/* Version 2.2 — 2026-10-13 — Lot 4c — Plus aucun style de l'espace organisateur : retrait (après recherche de chaque classe dans les pages, les scripts et le gabarit) du bandeau, de .evenement-courant, .saisie, .bouton-danger(-discret), .etiquette-actif / -inactif, des listes des lieux et des comptes (sauf .lieu-actions, utilisée par le jeu), des sections Outils, Journal, Cahier et de l'impression du Cahier ; les règles gardées sont inchangées
 * Version 2.1 — 2026-10-12 — Lot 4b — Feuille HISTORIQUE : section 9 (jeu) déplacée telle quelle dans jeu.css ; section 7 quater (carte de l'organisateur) et son bloc « grand écran » passés dans organisateur/pages/carte.css (hub Lieux) ; aucune autre règle modifiée
 * Version 2.0 — 2026-10-12 — Lot 2d-c1 — Carte du joueur : bouton « Recentrer » (suivi actif / arrêté) et bandeau de la cible en haut à droite ; bouton « Ignorer » de la bulle retiré (passé dans le bandeau)
 * Version 1.9 — 2026-10-12 — Feuille de style unique de l'application (mobile d'abord ; lot 3c : zones de recherche de la carte du joueur, zone choisie et zone ciblée, points exacts et interrupteur du mode test)
 *
 * Rôle depuis le lot 4c : socle de l'ÉCRAN DES JOUEURS (index.php) et des
 * pages d'erreur sobres (action_page_simple, includes/reponses.php).
 * Toujours chargée avec jeu.css derrière elle (FEUILLES_HISTORIQUES,
 * includes/gabarit.php). Toute l'interface organisateur est dans
 * assets/css/organisateur/ (jetons, socle, briques, gabarit).
 * N'y ajouter aucune règle d'organisateur.
 *
 * Organisation :
 *   1. Variables (couleurs, espacements) — thème clair, puis sombre
 *   2. Base (page, titres, liens)
 *   3. Mise en page (conteneur, carte)
 *   4. Formulaires (champs, choix en pastilles)
 *   5. Boutons
 *   6. Messages et étiquettes
 *   7. Actions d'une fiche (.lieu-actions)
 *   8. Écrans plus larges (gardés en dernier : ils doivent primer)
 *   (9. Jeu : voir jeu.css)
 *
 * Le thème clair est choisi par défaut : le relevé se fait dehors, en
 * plein jour, où un fond clair et contrasté se lit mieux.
 */

/* 1. Variables ------------------------------------------------------ */
:root {
    --fond: #f4f4f1;
    --surface: #ffffff;
    --texte: #1d1d1b;
    --texte-doux: #5a5a55;
    --bordure: #cfcfc8;
    --accent: #3b3f8f;
    --accent-texte: #ffffff;
    --succes-fond: #e3f3e6;
    --succes-texte: #1d5c2b;
    --erreur-fond: #fbe5e3;
    --erreur-texte: #8a1f14;
    --info-fond: #e6ebf7;
    --info-texte: #24346b;
    --danger: #b3261e;
    --focus: #f0a400;
    --rayon: 12px;
    --espace: 1rem;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --fond: #141416;
        --surface: #1f1f23;
        --texte: #ededea;
        --texte-doux: #a9a9a3;
        --bordure: #3c3c43;
        --accent: #8f95f0;
        --accent-texte: #141416;
        --succes-fond: #173a20;
        --succes-texte: #b9e8c3;
        --erreur-fond: #4a1a16;
        --erreur-texte: #ffc9c2;
        --info-fond: #1d2647;
        --info-texte: #c9d3ff;
        --danger: #ff8a80;
    }
}

/* 2. Base ----------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

h1,
h2 {
    margin: 0 0 0.75rem;
    line-height: 1.2;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.25rem;
}

p {
    margin: 0 0 0.75rem;
}

a {
    color: var(--accent);
}

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/* 3. Mise en page --------------------------------------------------- */
.conteneur {
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
    padding: var(--espace);
}

.conteneur-centre {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.carte {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: var(--espace);
    margin-bottom: var(--espace);
}

.attente {
    text-align: center;
}

.aide {
    color: var(--texte-doux);
    font-size: 0.9rem;
}

.noscript {
    margin: var(--espace);
}

/* 4. Formulaires ---------------------------------------------------- */
.champ {
    margin: 0 0 var(--espace);
    padding: 0;
    border: 0;
    min-width: 0;
}

.champ > label,
.champ > legend {
    display: block;
    margin-bottom: 0.35rem;
    padding: 0;
    font-weight: 600;
}

.champ .aide {
    margin: 0.35rem 0 0;
}

/* Choix en pastilles : boutons radio cachés visuellement mais toujours
   utilisables au clavier et par les lecteurs d'écran. */
.choix {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.choix label {
    position: relative;
    flex: 1 1 0;
    min-width: 4.5rem;
}

.choix input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.choix span {
    display: block;
    min-height: 3rem;
    padding: 0.7rem 0.5rem;
    border: 2px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface);
    text-align: center;
    font-weight: 600;
    cursor: pointer;
}

.choix input:checked + span {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-texte);
}

.choix input:focus-visible + span {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/* 5. Boutons -------------------------------------------------------- */
.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.6rem 1rem;
    border: 2px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface);
    color: var(--texte);
    font-size: 1rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
}

.bouton:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.bouton-principal {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-texte);
}

.bouton-large {
    width: 100%;
    min-height: 3.5rem;
    font-size: 1.1rem;
}

.bouton-petit {
    min-height: 2.5rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.95rem;
}

.bouton-discret {
    background: transparent;
}

/* 6. Messages et étiquettes ---------------------------------------- */
.message {
    margin: 0.75rem 0 0;
    padding: 0.75rem;
    border-radius: var(--rayon);
}

.message:empty {
    display: none;
}

.message-info {
    background: var(--info-fond);
    color: var(--info-texte);
}

.message-succes {
    background: var(--succes-fond);
    color: var(--succes-texte);
}

.message-erreur {
    background: var(--erreur-fond);
    color: var(--erreur-texte);
}

.etiquette {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--info-fond);
    color: var(--info-texte);
    font-size: 0.8rem;
    font-weight: 600;
}

/* 7. Actions d'une fiche (fiche d'une zone du jeu) ------------------- */
.lieu-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* 8. Écrans plus larges -------------------------------------------- */
@media (min-width: 40rem) {
    .conteneur {
        padding: 1.5rem;
    }

    .carte {
        padding: 1.5rem;
    }
}