/* =====================================================================================
 * css/style.css : L'IDENTITÉ VISUELLE DE VALMONT (commune aux 5 pages)
 * -------------------------------------------------------------------------------------
 * Utilisé par : index.html, createurs.html, supports.html, joueur1.html, joueur2.html.
 *
 * POUR LE RAPPORT (direction "médiéval sombre, finition contemporaine") :
 *   - L'univers reste celui de la nuit, de la pierre, des torches et de l'hiver qui approche,
 *     avec la retenue d'une interface de jeu moderne : grands aplats sombres, peu d'ornements,
 *     et une seule lumière chaude (l'or de torche) qui guide l'œil vers l'action.
 *   - TOUTES les valeurs (couleurs, tailles, espacements, durées, courbes) sont des variables
 *     définies dans la section 1. Les composants n'utilisent que des RÔLES (--surface,
 *     --texte, --accent...), jamais une couleur directement : changer l'ambiance = changer
 *     quelques lignes en haut du fichier.
 *   - L'or (--accent) ne brille que pour : l'action principale, le tour en cours, la flamme
 *     du jour, le focus clavier et la page active du menu. Rien d'autre.
 *   - Les panneaux se distinguent par la LUMIÈRE (surface plus claire, liseré d'1 px,
 *     reflet interne), pas par des bordures épaisses ni des ombres grises.
 *   - Accessibilité WCAG 2.2 AA : chaque couleur de texte est vérifiée (contraste noté
 *     à côté de sa variable), focus visible, cibles de 44 px, jamais la couleur seule,
 *     prefers-reduced-motion respecté partout.
 *
 * ORGANISATION DU FICHIER
 *   1. Tokens (variables)       4. Mouvement               7. Transitions
 *   2. Base                     5. Composants              8. Accessibilité
 *   3. Typographie              6. Pages                   9. Réduction du mouvement
 * ===================================================================================== */


/* =====================================================================================
 * 1. TOKENS : toutes les valeurs du design, définies UNE fois.
 * Contrastes calculés avec la formule WCAG (texte normal : 4,5:1 minimum, grand texte : 3:1).
 * ===================================================================================== */
:root {
    /* ---------- 1a. La palette (les matières de Valmont) ---------- */
    --suie: #0f0d0c;               /* la nuit */
    --charbon: #1b1815;            /* le bois sombre */
    --fer: #2a2725;                /* le fer */
    --fer-chaud: #342c24;          /* le fer éclairé par la torche */
    --parchemin: #ecdfc4;
    --parchemin-passe: #b8aa8f;
    --pierre: #8f877b;
    --or-torche: #e3a849;
    --or-clair: #efbd66;
    --braise: #ff7a2e;
    --sang: #e0604f;
    --sang-clair: #f08a7b;
    --cire: #8a2b22;
    --cire-claire: #a3352a;
    --cire-bord: #b0453a;
    --mousse: #8fb877;
    --mousse-sombre: #2f4a2a;
    --givre: #a9d3ea;
    --flocon: #dceef7;
    --fer-forge: #a3845a;          /* le détail d'angle forgé (décoratif) */

    /* ---------- 1b. Les RÔLES : les seules couleurs utilisées par les composants ---------- */
    --fond: var(--suie);
    --surface: var(--charbon);
    --surface-haute: var(--fer);
    --surface-active: var(--fer-chaud);
    --lisere: rgba(236, 223, 196, 0.10);
    --lisere-fort: rgba(236, 223, 196, 0.28);
    --lisere-lumiere: rgba(236, 223, 196, 0.07);
    --texte: var(--parchemin);             /* 14,7:1 fond · 13,4:1 surface · 11,3:1 surface-haute · 10,3:1 surface-active */
    --texte-doux: var(--parchemin-passe);  /*  8,5:1 fond ·  7,7:1 surface ·  6,5:1 surface-haute ·  5,9:1 surface-active */
    --texte-discret: var(--pierre);        /*  5,5:1 fond ·  5,0:1 surface (jamais sur surface-haute) */
    --accent: var(--or-torche);            /*  9,2:1 fond ·  8,4:1 surface ·  6,6:1 surface-active */
    --accent-vif: var(--or-clair);
    --sur-accent: var(--suie);             /* texte posé sur l'or : 9,2:1 */
    --accent-voile: rgba(227, 168, 73, 0.08);
    --danger: var(--sang);                 /*  5,5:1 fond ·  5,0:1 surface */
    --danger-texte: var(--sang-clair);     /*  6,1:1 surface-haute ·  7,3:1 surface */
    --danger-fond: var(--cire);            /* texte dessus : 6,5:1 */
    --danger-fond-vif: var(--cire-claire);
    --danger-bord: var(--cire-bord);
    --danger-voile: rgba(224, 96, 79, 0.10);
    --succes: var(--mousse);               /*  8,6:1 fond ·  6,6:1 surface-haute */
    --succes-fond: var(--mousse-sombre);   /* texte dessus : 7,5:1 */
    --hiver: var(--givre);                 /* 12,2:1 fond · 11,1:1 surface */
    --lumiere: var(--braise);              /* flammes, braises, ligne de survol : jamais du texte */
    --neige-flocon: var(--flocon);         /* lu par ambiance.js */

    /* Voiles (fonds transparents) et seule ombre portée (ce qui flotte vraiment) */
    --voile: rgba(5, 4, 4, 0.72);
    --voile-nuit: rgba(4, 6, 10, 0.9);
    --voile-fin: rgba(8, 7, 6, 0.94);
    --voile-fin-froid: rgba(9, 12, 16, 0.84);
    --voile-scene: rgba(15, 13, 12, 0.96);
    --voile-scene-leger: rgba(15, 13, 12, 0.55);
    --voile-scene-nul: rgba(15, 13, 12, 0);
    --ombre-flottante: 0 24px 60px rgba(0, 0, 0, 0.6);
    /* Le relief d'un panneau : un reflet en haut et un liseré d'1 px, À L'INTÉRIEUR */
    --relief: inset 0 1px 0 var(--lisere-lumiere), inset 0 0 0 1px var(--lisere);

    /* ---------- 1c. La scène du village et les illustrations (lues par img/illustrations.svg) ---------- */
    --nuit-ciel: #0d1015;
    --nuit-lune: #e6d9bd;
    --nuit-etoile: var(--parchemin);
    --nuit-mont-loin: #1d2126;
    --nuit-mont-proche: #16181b;
    --nuit-neige: var(--givre);
    --nuit-silhouette: #100d0b;
    --nuit-echafaudage: #4a3d31;
    --nuit-fenetre: #c99a4e;
    --nuit-sol: #0a0908;
    --torche-bois: #1a1411;
    --ill-corps: #3a332d;
    --ill-toit: #5a4f45;
    --ill-creux: var(--surface);
    --ill-trou: var(--fond);
    --ill-planche: var(--texte-doux);
    --ill-lumiere: var(--nuit-fenetre);
    --ill-ecu: var(--surface);
    --cire-neuve: #cdbf9f;          /* bougie d'un jour à venir */
    --cire-usee: #4a443d;           /* bougie consumée */
    --meche: #5a4c3c;

    /* ---------- 1d. Typographie : 3 polices, 6 tailles fluides ---------- */
    --police-gothique: "Grenze Gotisch", "Cinzel", Georgia, serif;   /* VALMONT et titres de fin, nulle part ailleurs */
    --police-gravee: "Cinzel", Georgia, serif;                        /* titres de panneaux et boutons */
    --police-texte: "Alegreya", Georgia, serif;                       /* tout le reste, chiffres compris */
    --t-1: 0.9375rem;                                        /* 15 px : boutons, menu, notes */
    --t-2: clamp(1.0625rem, 0.95rem + 0.35vw, 1.1875rem);    /* 17 à 19 px : texte courant */
    --t-3: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);          /* 20 à 24 px : chapeaux, titres de panneaux */
    --t-4: clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem);          /* 28 à 44 px : titres de section, compteurs */
    --t-5: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);            /* 40 à 72 px : titres de page, jour, fin */
    --t-6: clamp(5.5rem, 21vw, 17rem);                       /* VALMONT monumental */
    --interlettre: 0.04em;                                   /* l'espacement modéré de Cinzel */
    --interlettre-large: 0.12em;                             /* le seul sur-titre gravé (accueil) */

    /* ---------- 1e. Espacements (une seule échelle) et formes (2 rayons) ---------- */
    --e-1: 0.25rem;  --e-2: 0.5rem;  --e-3: 0.75rem;  --e-4: 1rem;
    --e-5: 1.5rem;   --e-6: 2.5rem;  --e-7: 4rem;     --e-8: clamp(4.5rem, 10vw, 7.5rem);
    --marge: clamp(1rem, 4vw, 3rem);       /* marges gauche et droite de la page */
    --largeur: 76rem;                      /* largeur maximale du contenu */
    --mesure: 60ch;                        /* longueur de ligne confortable */
    --rayon: 2px;                          /* panneaux, boutons, champs */
    --rayon-rond: 50%;                     /* cercles, flammes */

    /* ---------- 1f. Mouvement (voir la section 4) ---------- */
    --d-rapide: 150ms;     /* survol, pression */
    --d-normal: 280ms;     /* apparitions, refus */
    --d-lent: 600ms;       /* déplacements, chiffres qui défilent */
    --d-scene: 1400ms;     /* cinématiques (fin de partie, ouverture de l'accueil) */
    --d-bandeau: 1200ms;   /* le bandeau "À vous" */
    --d-nuit: 1900ms;      /* la séquence de la nuit (2 s au plus) */
    --d-ambiance: 1800ms;  /* vacillement des flammes (boucle lente) */
    --d-pulsation: 2400ms; /* pulsation lente de la réserve basse */
    --d-decalage: 80ms;    /* décalage entre deux éléments qui arrivent l'un après l'autre */
    --ease-sortie: cubic-bezier(0.2, 0.8, 0.2, 1);     /* ce qui ARRIVE : départ vif, arrivée douce */
    --ease-entree: cubic-bezier(0.6, 0, 0.8, 0.2);     /* ce qui PART : départ doux, sortie vive */
    --ease-ressort: cubic-bezier(0.34, 1.4, 0.64, 1);  /* les RÉUSSITES seulement (dépasse un peu) */
    --ease-ambiance: cubic-bezier(0.45, 0, 0.55, 1);   /* les boucles d'ambiance (flammes) */

    /* Quantité de neige (0 à 1), mise à jour par ambiance.js */
    --neige: 0;

    color-scheme: dark;   /* barres de défilement et champs natifs en version sombre */
}


/* =====================================================================================
 * 2. BASE
 * ===================================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: var(--police-texte);
    font-size: var(--t-2);
    line-height: 1.6;
    /* Chiffres ALIGNÉS et de même largeur : les compteurs ne "sautent" pas quand ils changent */
    font-variant-numeric: lining-nums tabular-nums;
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
[hidden] { display: none !important; }   /* "hidden" gagne toujours (écran de fin, etc.) */

a { color: var(--accent); text-underline-offset: 0.2em; transition: color var(--d-rapide) var(--ease-sortie); }
a:hover { color: var(--texte); }
::selection { background: var(--accent); color: var(--sur-accent); }

/* ---------- Plans et profondeur ----------
 * Du fond vers l'avant :  z 0 = la scène du village
 *                         z 1 = le canvas de neige (créé par ambiance.js)
 *                         z 2 = le contenu (textes, panneaux, boutons)
 *                         z 20 = l'écran de fin, z 22 = l'en-tête (menu toujours utilisable),
 *                         z 24 et plus = le bandeau "À vous", l'éclat, la nuit
 * La neige passe DERRIÈRE les panneaux : elle ne gêne jamais la lecture.
 * Attention : <main> ne doit PAS avoir de z-index, sinon tout serait enfermé
 * dans le même "contexte d'empilement". */
canvas.ambiance {
    position: fixed; inset: 0; z-index: 1;
    width: 100%; height: 100%;
    pointer-events: none;            /* les clics traversent le canvas */
}
.pied, main > *:not(.avec-scene):not(dialog):not(.fin), .avec-scene > :not(.scene) {
    position: relative; z-index: 2;
}


/* =====================================================================================
 * 3. TYPOGRAPHIE
 * Grenze Gotisch : UNIQUEMENT le mot VALMONT et les titres des écrans de fin.
 * Cinzel         : titres de panneaux et boutons (petites capitales, espacement modéré).
 * Alegreya       : tout le reste, avec des chiffres alignés et tabulaires.
 * ===================================================================================== */
h1, h2, h3 {
    margin: 0; font-weight: 600;
    font-family: var(--police-gravee); letter-spacing: var(--interlettre);
    color: var(--texte);
}
h1 { font-size: var(--t-5); line-height: 1.05; }
h2 { font-size: var(--t-4); line-height: 1.1; }
h3 { font-size: var(--t-3); line-height: 1.25; }

p, ul, ol { margin: 0 0 var(--e-4); max-width: var(--mesure); }
strong { font-weight: 700; color: var(--texte); }

.chapeau { font-size: var(--t-3); line-height: 1.45; max-width: 30ch; }
.legende, .aide, caption { font-size: var(--t-1); color: var(--texte-doux); }

/* Les grands chiffres (jour, ressources, compte à rebours) : Alegreya grasse */
.chiffre { font-family: var(--police-texte); font-weight: 700; line-height: 1; }

/* Le texte posé directement sur la nuit (hors panneau) reçoit un halo sombre très fin :
   un flocon qui passe derrière une lettre ne peut jamais réduire sa lisibilité. */
main { text-shadow: 0 0 6px var(--fond), 0 0 2px var(--fond); }
.panneau, .bouton, button, select, dialog, .fin, .scene { text-shadow: none; }


/* =====================================================================================
 * 4. MOUVEMENT
 * POUR LE RAPPORT : le système de mouvement tient en quelques variables (section 1f) :
 *   - 4 durées : --d-rapide (survol, pression), --d-normal (apparitions),
 *     --d-lent (déplacements), --d-scene (cinématiques) ;
 *   - 3 courbes : --ease-sortie (ce qui arrive), --ease-entree (ce qui part),
 *     --ease-ressort (réservée aux réussites : construction, ressource qui monte).
 *   Toutes les animations ci-dessous les utilisent : changer le rythme du jeu = changer
 *   ces variables. On n'anime que transform, opacity et (un peu) filter : ce sont les
 *   propriétés que le navigateur sait animer sans recalculer la mise en page.
 *   Règle : chaque animation SIGNIFIE quelque chose dans le jeu (une action, un événement).
 *   Exception assumée : clip-path pour l'ouverture circulaire de la fin et le dévoilement
 *   de son titre (demandés explicitement, joués une seule fois).
 * ===================================================================================== */

/* Apparition simple : ce qui ARRIVE à l'écran (message du matin, erreur, fenêtre) */
@keyframes apparaitre { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fondu      { from { opacity: 0; } to { opacity: 1; } }

/* Réussites (avec --ease-ressort) : un bâtiment s'élève du sol ; l'icône d'une ressource bondit */
@keyframes construire { from { opacity: 0; transform: translateY(18px) scaleY(0.5); } to { opacity: 1; transform: none; } }
@keyframes bond       { 0%, 100% { transform: none; } 40% { transform: translateY(-6px) scale(1.08); } }

/* Un écart "+3" / "−2" s'envole et s'efface */
@keyframes ecart {
    0%   { opacity: 0; transform: translateY(6px); }
    15%  { opacity: 1; transform: none; }
    75%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-10px); }
}

/* Échecs et dégâts : le contrôle refusé oscille 3 fois ; un bâtiment frappé tremble et noircit */
@keyframes refuser {
    0%, 100% { transform: none; }
    16% { transform: translateX(-5px); }  33% { transform: translateX(5px); }
    50% { transform: translateX(-4px); }  66% { transform: translateX(4px); }
    83% { transform: translateX(-2px); }
}
@keyframes tremble {
    0%, 100% { transform: none; }
    20% { transform: translateX(-5px) rotate(-0.6deg); }
    40% { transform: translateX(4px) rotate(0.5deg); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}
@keyframes noircit { from { filter: none; } to { filter: grayscale(0.7) brightness(0.62); } }
/* Réparation : une brève lueur sur le dessin (filter léger) */
@keyframes repare  { from { filter: brightness(1.5); } to { filter: none; } }

/* Alerte lente : la réserve de nourriture est basse */
@keyframes pulsation { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* Ambiance (boucles lentes, accueil et bougie du jour) : la flamme vacille, le halo respire */
@keyframes vacille {
    0%   { transform: scale(1, 1) skewX(0); }
    25%  { transform: scale(0.94, 1.06) skewX(2deg); }
    50%  { transform: scale(1.04, 0.96) skewX(-1deg); }
    75%  { transform: scale(0.97, 1.04) skewX(-2deg); }
    100% { transform: scale(1.02, 0.98) skewX(1deg); }
}
@keyframes respire { from { opacity: 0.7; transform: scale(0.95); } to { opacity: 1; transform: scale(1.05); } }

/* Les séquences (voir la section 7) */
@keyframes traverser {                       /* le bandeau "À vous" */
    0%   { opacity: 0; transform: translateX(-60%); }
    20%  { opacity: 1; transform: none; }
    80%  { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translateX(60%); }
}
@keyframes nuit-voile { 0% { opacity: 0; } 25%, 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes nuit-lune  {
    0%   { opacity: 0; transform: translateY(60px); }
    40%  { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translateY(-24px); }
}
@keyframes nuit-gain {
    0%   { opacity: 0; transform: translateY(16px); }
    30%  { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translateY(-48px); }
}
@keyframes eclat { 0% { opacity: 0; } 25% { opacity: 0.25; } 100% { opacity: 0; } }
@keyframes ouvrir-cercle { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(100% at 50% 50%); } }
@keyframes devoiler      { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* L'ouverture de l'accueil (une fois par visite) */
@keyframes allumer { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes graver  { from { opacity: 0; transform: scale(1.04); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes monter  { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }

/* Les changements de page (View Transitions, section 7) */
@keyframes vt-sortie { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-entree { from { opacity: 0; transform: translateY(12px); } }


/* =====================================================================================
 * 5. COMPOSANTS (identiques sur les 5 pages)
 * ===================================================================================== */

/* ---------- 5a. En-tête et menu ----------
 * Il flotte au-dessus de la scène du village, sur TOUTES les pages (même HTML, même CSS). */
/* z-index 22 : l'en-tête passe AU-DESSUS de l'écran de fin (z 20), pour que le menu reste
   toujours utilisable ; le bandeau "À vous" et la nuit (z 24 et plus) passent devant lui. */
.entete { position: absolute; top: 0; left: 0; right: 0; z-index: 22; }
.entete-contenu {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--e-2) var(--e-6);
    max-width: calc(var(--largeur) + 2 * var(--marge));
    margin: 0 auto; padding: var(--e-3) var(--marge);
}
/* Le mot VALMONT : gothique, comme gravé sur une enseigne */
.marque {
    font-family: var(--police-gothique); font-weight: 800; font-size: var(--t-4); line-height: 1;
    color: var(--texte); text-decoration: none;
    display: inline-flex; align-items: center; min-height: 44px;
}
.marque:hover { color: var(--accent); }

.menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--e-5); max-width: none; }
.menu a {
    position: relative; display: inline-flex; align-items: center; min-height: 44px;
    font-family: var(--police-gravee); font-weight: 600; font-size: var(--t-1); letter-spacing: var(--interlettre);
    color: var(--texte-doux); text-decoration: none;
}
.menu a:hover { color: var(--texte); }
/* Page en cours : couleur ET trait sous le lien (jamais la couleur seule) */
.menu a[aria-current="page"] { color: var(--accent); }

/* ---------- 5b. La ligne de braise (survol et focus) ----------
 * Une fine ligne se dessine sous le bouton ou le lien : scaleX de 0 à 1.
 * La même au survol (souris) et au focus (clavier). Fixe sous la page active du menu. */
.bouton, button, .menu a { position: relative; }
.bouton::after, button::after, .menu a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
    background: var(--lumiere);
    transform: scaleX(0); transform-origin: left center;
    transition: transform var(--d-rapide) var(--ease-sortie);
    pointer-events: none;
}
.menu a::after { bottom: 6px; }
.bouton:hover::after, button:hover::after, .menu a:hover::after,
.bouton:focus-visible::after, button:focus-visible::after, .menu a:focus-visible::after,
.menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu a[aria-current="page"]::after { background: var(--accent); }

/* ---------- 5c. Boutons ----------
 * Principal (or : l'action importante), secondaire (liseré), attention (cire : effacer la partie).
 * Pression : il s'enfonce. Désactivé : désaturé (le texte .note-tour explique pourquoi). */
.bouton, button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e-3);
    min-height: 48px;                                /* cible tactile confortable (> 44 px) */
    padding: var(--e-3) var(--e-5);
    font-family: var(--police-gravee); font-weight: 700; font-size: var(--t-1); letter-spacing: var(--interlettre);
    line-height: 1.25; text-align: center; text-decoration: none;
    background: var(--accent); color: var(--sur-accent);
    border: 1px solid var(--accent); border-radius: var(--rayon);
    cursor: pointer;
    transition: transform var(--d-rapide) var(--ease-sortie), background-color var(--d-rapide) var(--ease-sortie),
                border-color var(--d-rapide) var(--ease-sortie), color var(--d-rapide) var(--ease-sortie),
                filter var(--d-rapide) var(--ease-sortie), opacity var(--d-rapide) var(--ease-sortie);
}
.bouton:hover, button:hover { background: var(--accent-vif); color: var(--sur-accent); }
.bouton:active, button:active { transform: translateY(1px) scale(0.98); }

.bouton-secondaire, button.bouton-secondaire {
    background: transparent; color: var(--texte); border-color: var(--lisere-fort);
}
.bouton-secondaire:hover, button.bouton-secondaire:hover {
    background: var(--accent-voile); color: var(--texte); border-color: var(--texte-doux);
}
.bouton-attention, button.bouton-attention {
    background: var(--danger-fond); color: var(--texte); border-color: var(--danger-bord);
}
.bouton-attention:hover, button.bouton-attention:hover { background: var(--danger-fond-vif); color: var(--texte); }

button:disabled, button:disabled:hover {
    filter: grayscale(1); opacity: 0.5; cursor: not-allowed; transform: none;
}
button:disabled::after { display: none; }

/* Action refusée par le serveur : le contrôle utilisé oscille 3 fois (classe posée par jeu.js) */
.refuse { animation: refuser var(--d-normal) var(--ease-sortie); }

/* Petites icônes dans les boutons (silhouettes de bâtiments, habitant, marteau) */
.icone-bouton { flex: 0 0 auto; width: 34px; height: 27px; color: currentColor; }
.icone-habitant-bouton { width: 22px; height: 22px; margin: 0 6px; }

/* ---------- 5d. Panneaux : différenciés par la LUMIÈRE ----------
 * Surface plus claire que la nuit, reflet en haut et liseré d'1 px à l'intérieur.
 * .panneau-principal (UN par écran : les actions, le choix du rôle, la confirmation) :
 * surface plus haute et le seul détail d'angle forgé. */
.panneau {
    position: relative;
    background: var(--surface);
    box-shadow: var(--relief);
    border-radius: var(--rayon);
    padding: clamp(var(--e-5), 2.6vw, var(--e-6));
}
.panneau > :last-child { margin-bottom: 0; }
.panneau-principal { background: var(--surface-haute); }
.panneau-principal::before {
    content: ""; position: absolute; top: 0; left: 0; width: 26px; height: 26px; pointer-events: none;
    background: var(--fer-forge);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M1.5 25V1.5H25' fill='none' stroke='black' stroke-width='2.5'/%3E%3Cpath d='M1.5 1.5l8 3-5 5z'/%3E%3C/svg%3E") no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M1.5 25V1.5H25' fill='none' stroke='black' stroke-width='2.5'/%3E%3Cpath d='M1.5 1.5l8 3-5 5z'/%3E%3C/svg%3E") no-repeat;
}

/* ---------- 5e. Tableau (vraies données : il garde ses lignes fines) ---------- */
table { width: 100%; border-collapse: collapse; }
caption { text-align: left; caption-side: bottom; padding-top: var(--e-4); }
th, td { text-align: left; padding: var(--e-4) var(--e-4) var(--e-4) 0; border-bottom: 1px solid var(--lisere); vertical-align: middle; }
th {
    font-family: var(--police-gravee); font-size: var(--t-1); font-weight: 600; letter-spacing: var(--interlettre);
    color: var(--texte-doux); border-bottom-color: var(--lisere-fort);
}

/* ---------- 5f. Menus déroulants (affectation des habitants) ----------
 * La flèche est dessinée avec deux petits triangles (dégradés "nets") : sa couleur
 * vient ainsi d'une variable, au lieu d'être écrite dans une image. */
select {
    appearance: none; -webkit-appearance: none;
    min-height: 44px; min-width: 9.5rem;
    padding: var(--e-2) 2.5rem var(--e-2) var(--e-3);
    font: inherit; font-size: var(--t-1); color: var(--texte);
    background-color: var(--fond);
    background-image: linear-gradient(45deg, transparent 50%, var(--texte-doux) 50%),
                      linear-gradient(135deg, var(--texte-doux) 50%, transparent 50%);
    background-position: right 1.1rem center, right 0.75rem center;
    background-size: 6px 6px; background-repeat: no-repeat;
    border: 1px solid var(--lisere-fort); border-radius: var(--rayon);
    cursor: pointer;
    transition: border-color var(--d-rapide) var(--ease-sortie);
}
select:hover { border-color: var(--texte-doux); }
/* Désactivé (pas mon tour, ou pas mon rôle) : trait pointillé, sans flèche */
select:disabled { cursor: not-allowed; color: var(--texte-doux); border-style: dashed; background-image: none; }

/* ---------- 5g. Fenêtre de confirmation <dialog> (la seule ombre portée : elle flotte) ---------- */
dialog {
    max-width: min(30rem, calc(100% - 2rem));
    padding: var(--e-6);
    background: var(--surface-haute); color: var(--texte);
    border: 0; border-radius: var(--rayon);
    box-shadow: var(--relief), var(--ombre-flottante);
}
dialog h2 { font-size: var(--t-3); margin-bottom: var(--e-3); }
.dialogue-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e-3); margin-top: var(--e-6); }

/* ---------- 5h. La scène du village (les 5 pages) ----------
 * 4 plans dessinés dans img/illustrations.svg. Un voile sombre en bas fond la scène
 * dans la nuit de la page (c'est le seul dégradé de la page : il sert à la lisibilité). */
.avec-scene { position: relative; overflow: hidden; margin: 0 calc(-1 * var(--marge)); padding-inline: var(--marge); }
.scene { position: absolute; inset: 0; z-index: 0; background: var(--nuit-ciel); }
.scene .plan {
    position: absolute; left: -40px; top: -40px;
    width: calc(100% + 80px); height: calc(100% + 40px);
    max-width: none;              /* sinon la règle "svg { max-width: 100% }" couperait le débord */
}
 /* Dans un bandeau (pages autres que l'accueil), la scène garde ses proportions (16/9)
    et se cale par le BAS : la ligne des toits arrive au pied du bandeau, les montagnes
    et la lune au-dessus. 21 % = la hauteur du sol sous le village dans le dessin (188/900). */
.tete-jeu .scene .plan, .tete-page .scene .plan {
    top: auto; height: auto; aspect-ratio: 16 / 9;
    bottom: calc((100vw + 80px) * 9 / 16 * -0.21);
}
.scene::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, var(--voile-scene) 0%, var(--voile-scene-leger) 32%, var(--voile-scene-nul) 60%);
}

/* ---------- 5i. Pied de page : le nom revient en grand, comme un générique ---------- */
.pied { text-align: center; padding: var(--e-8) var(--marge) var(--e-6); margin-top: var(--e-8); }
.pied p { margin: 0 auto; color: var(--texte-doux); font-size: var(--t-1); max-width: none; }
.pied .pied-nom {
    font-family: var(--police-gothique); font-weight: 800;
    font-size: var(--t-6); line-height: 0.85;
    color: var(--surface-haute);       /* décoratif (aria-hidden) : volontairement en retrait */
    margin-bottom: var(--e-4);
}

/* ---------- 5j. L'échelle des jours : une bougie par jour (accueil et jeu) ----------
 *   .passe = bougie consumée · .aujourdhui = la seule allumée · .hiver = le flocon.
 * Le texte "Jour 3 sur 13, 10 jours avant l'hiver" est toujours écrit juste à côté. */
.echelle {
    list-style: none; margin: 0; padding: 22px 0 0;   /* place pour la flamme */
    display: flex; align-items: flex-end; gap: clamp(7px, 1.1vw, 11px);
    max-width: none;
}
.echelle li { position: relative; flex: 0 0 auto; width: 8px; height: 26px; background: var(--cire-neuve); border-radius: var(--rayon) var(--rayon) 0 0; }
.echelle li::before { content: ""; position: absolute; left: 3.5px; top: -4px; width: 1px; height: 4px; background: var(--meche); }
.echelle li.passe { height: 8px; background: var(--cire-usee); }
.echelle li.passe::before { display: none; }
.echelle li.aujourdhui { background: var(--texte); }
.echelle li.aujourdhui::after {            /* la flamme du jour en cours : l'or = maintenant */
    content: ""; position: absolute; left: -1px; top: -19px; width: 10px; height: 15px;
    background: var(--accent); border-radius: var(--rayon-rond);
    transform-origin: 50% 100%;
    animation: vacille var(--d-ambiance) var(--ease-ambiance) infinite alternate;
}
.echelle li.hiver {
    width: auto; height: auto; background: none; margin-left: var(--e-2);
    display: flex; align-items: center; gap: 6px;
    font-family: var(--police-gravee); font-weight: 700; font-size: var(--t-1); line-height: 1; letter-spacing: var(--interlettre);
    color: var(--hiver);
}
.echelle li.hiver::before {                /* le flocon (forme en masque, couleur = --hiver) */
    position: static; width: 18px; height: 18px; background: var(--hiver);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg stroke='black' stroke-width='5' stroke-linecap='round' fill='none'%3E%3Cpath d='M32 4v56M8 18l48 28M8 46l48-28'/%3E%3Cpath d='M24 9l8 8 8-8M24 55l8-8 8 8'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg stroke='black' stroke-width='5' stroke-linecap='round' fill='none'%3E%3Cpath d='M32 4v56M8 18l48 28M8 46l48-28'/%3E%3Cpath d='M24 9l8 8 8-8M24 55l8-8 8 8'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- 5k. Petites choses communes ---------- */
.vide { color: var(--texte-doux); font-style: italic; }
.a-remplir:empty::before {
    content: "À compléter"; color: var(--texte-discret);
    font-family: var(--police-texte); font-style: italic; font-size: var(--t-1); letter-spacing: 0;
}
.blason { display: block; flex: 0 0 auto; width: 76px; height: 92px; color: var(--texte-doux); }


/* =====================================================================================
 * 6. PAGES
 * ===================================================================================== */
.page { padding: 0 var(--marge); }

/* ---------------------------------------------------------------- 6a. ACCUEIL */
.accueil-hero {
    padding-top: 6.5rem; padding-bottom: clamp(var(--e-6), 6vh, var(--e-7));
    min-height: max(100svh, 640px);
    display: grid; grid-template-rows: 1fr auto; gap: var(--e-6);
}

/* Les torches (accueil seulement) : accrochées aux bords, au-dessus du voile */
.torche { position: absolute; z-index: 1; bottom: 14%; width: clamp(48px, 6vw, 96px); height: auto; aspect-ratio: 120 / 320; }
.torche-gauche { left: 1.5%; }
.torche-droite { right: 1.5%; }
.torche .halo { fill: var(--lumiere); transform-box: fill-box; transform-origin: 50% 50%; animation: respire calc(var(--d-ambiance) * 1.4) var(--ease-ambiance) infinite alternate; }
.torche-manche { fill: var(--torche-bois); }
.torche-coupe { fill: var(--surface-haute); }
.flamme-ext { fill: var(--lumiere); }
.flamme-int { fill: var(--accent); }
.torche .flamme { transform-box: fill-box; transform-origin: 50% 100%; animation: vacille var(--d-ambiance) var(--ease-ambiance) infinite alternate; }
.torche-droite .flamme { animation-delay: calc(var(--d-ambiance) / -3); }
.torche-droite .halo   { animation-delay: calc(var(--d-ambiance) / -2); }

/* Le titre-monument : "Les Bâtisseurs de" gravé, puis VALMONT immense (Grenze Gotisch) */
.titre-monument { align-self: center; text-align: center; margin: 0; letter-spacing: 0; }
.titre-sur {
    display: block; margin-bottom: var(--e-3);
    font-family: var(--police-gravee); font-weight: 600; font-size: var(--t-3); letter-spacing: var(--interlettre-large);
    color: var(--texte-doux);
}
.titre-nom {
    display: block;
    font-family: var(--police-gothique); font-weight: 800; font-size: var(--t-6); line-height: 0.82;
    color: var(--texte);
}

/* Le bas de l'écran-titre : l'appel à jouer à gauche, le compte à rebours à droite */
.hero-bas {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--e-6);
    width: 100%; max-width: var(--largeur); margin: 0 auto;
}
.hero-texte .chapeau { margin-bottom: var(--e-5); }
.compte-a-rebours { justify-self: end; max-width: 22rem; }
.compte-chiffre { display: flex; align-items: baseline; gap: var(--e-2); margin: 0 0 var(--e-2); }
.compte-chiffre .chiffre { font-size: var(--t-5); color: var(--hiver); }
.compte-unite { font-family: var(--police-gravee); font-weight: 600; font-size: var(--t-3); letter-spacing: var(--interlettre); color: var(--hiver); }
.compte-a-rebours .legende { margin: var(--e-3) 0 0; }

/* Le livret de règles : une grille de 12 colonnes, le titre à gauche (1 à 5), le texte à droite (7 à 12) */
.bloc {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--e-5);
    max-width: var(--largeur); margin: 0 auto;
    padding: var(--e-8) 0 0;
}
.bloc > h2 { grid-column: 1 / span 5; align-self: start; }
.bloc > :not(h2) { grid-column: 7 / -1; }
.bloc > div > :last-child { margin-bottom: 0; }
.bloc p { line-height: 1.7; }
.bloc-large > h2, .bloc-large > :not(h2) { grid-column: 1 / -1; }
.bloc-large > h2 { margin-bottom: var(--e-4); }

.roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6); margin-top: var(--e-6); }
.role-carte h3 { margin: var(--e-4) 0 var(--e-2); }
.role-carte p { margin: 0; }

/* La journée : une frise de 4 étapes côte à côte (une vraie séquence) */
.etapes { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-6); }
.etapes li { border-top: 1px solid var(--lisere-fort); padding-top: var(--e-5); }
.etapes li span { display: block; }
.picto { display: block; width: 46px; height: 54px; margin-bottom: var(--e-4); color: var(--texte-doux); }
.picto-nuit, .picto-orage { width: 46px; height: 46px; margin-bottom: calc(var(--e-4) + 8px); }
.picto-nuit { color: var(--hiver); }

.table-batiments td:first-child { font-weight: 700; white-space: nowrap; }
.illu { width: 72px; height: 58px; vertical-align: middle; margin-right: var(--e-4); }

/* Le choix du rôle : le panneau principal de la page, deux grandes tuiles avec les blasons */
.depart { max-width: var(--largeur); margin: var(--e-8) auto 0; padding: clamp(var(--e-6), 5vw, var(--e-7)); }
.depart h2 { margin-bottom: var(--e-4); }
.depart-choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); margin-top: var(--e-6); }
.bouton.bouton-role {
    justify-content: flex-start; gap: var(--e-5); padding: var(--e-5) var(--e-6); min-height: 136px;
    background: var(--surface); color: var(--texte); border-color: var(--lisere); text-align: left;
}
.bouton.bouton-role:hover { background: var(--surface-active); color: var(--texte); border-color: var(--accent); }
.bouton-role .blason { width: 60px; height: 72px; transition: color var(--d-rapide) var(--ease-sortie); }
.bouton-role:hover .blason, .bouton-role:focus-visible .blason { color: var(--accent); }
.bouton-role-texte { font-size: var(--t-3); }
.bouton-role-texte span {
    display: block; margin-top: var(--e-1);
    font-family: var(--police-texte); font-weight: 400; font-size: var(--t-1); letter-spacing: 0;
    color: var(--texte-doux);
}

/* L'ouverture (une fois par visite : classe .ouverture posée par le script du <head>).
   Les torches s'allument, VALMONT se révèle, le village monte du sol, puis le reste arrive. */
.ouverture .torche            { animation: allumer var(--d-lent) var(--ease-sortie) both; }
.ouverture .torche-droite     { animation-delay: var(--d-rapide); }
.ouverture .titre-nom         { animation: graver var(--d-scene) var(--ease-sortie) var(--d-normal) both; }
.ouverture .titre-sur         { animation: fondu var(--d-lent) var(--ease-sortie) var(--d-lent) both; }
.ouverture .scene .plan:nth-child(3) { animation: monter var(--d-lent) var(--ease-sortie) var(--d-lent) both; }
.ouverture .scene .plan:nth-child(4) { animation: monter var(--d-lent) var(--ease-sortie) calc(var(--d-lent) + var(--d-rapide)) both; }
.ouverture .hero-bas          { animation: apparaitre var(--d-lent) var(--ease-sortie) var(--d-scene) both; }

/* ---------------------------------------------------------------- 6b. PAGES DE JEU (le HUD)
 * POUR LE RAPPORT : composition ASYMÉTRIQUE. La colonne large (7/12) porte l'action du
 * joueur : son panneau d'actions, puis la liste qui sert à SON rôle (habitants pour
 * l'Intendante, bâtiments pour le Maître d'œuvre). La colonne étroite (5/12) porte le
 * reste du village, en retrait. La classe joueur-1 / joueur-2 (posée par jeu.js) choisit. */
.page-jeu .page > :not(.avec-scene):not(.fin):not(dialog) { max-width: var(--largeur); margin-left: auto; margin-right: auto; }
.tete-jeu { padding-top: 6rem; padding-bottom: var(--e-5); min-height: clamp(200px, 28vh, 300px); display: grid; align-content: end; }
.jeu-titre { width: 100%; max-width: var(--largeur); margin: 0 auto; }
.jeu-titre h1 { font-size: var(--t-4); }

/* Le bandeau d'état : [ le jour | les bougies | le statut ], puis le journal et l'erreur */
.etat { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--e-4) var(--e-6); }
.etat .jour-editorial { grid-column: 1; }
.etat .echelle { grid-column: 2; justify-self: center; }
.etat .pastille { grid-column: 3; justify-self: end; }
.etat .journal, .etat .alerte { grid-column: 1 / -1; }

.jour-editorial { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--e-3); margin: 0; }
.jour-editorial .chiffre { font-size: var(--t-5); }
.jour-editorial .sur { font-size: var(--t-1); color: var(--texte-doux); }
.jour-editorial .sur:first-child { font-family: var(--police-gravee); font-weight: 600; letter-spacing: var(--interlettre); }
#avant-hiver { color: var(--hiver); }

/* La pastille de statut : TEXTE + COULEUR + FORME (triangle = à vous, cercle = attente,
   coche = victoire, croix = défaite). L'or ne s'allume que pour "À vous de jouer". */
.pastille {
    display: inline-flex; align-items: center; gap: var(--e-3);
    min-height: 48px; margin: 0; padding: var(--e-2) var(--e-5);
    font-family: var(--police-gravee); font-weight: 700; font-size: var(--t-1); line-height: 1.25; letter-spacing: var(--interlettre);
    color: var(--texte-doux); border-radius: var(--rayon); box-shadow: inset 0 0 0 1px var(--lisere-fort);
    transition: background-color var(--d-normal) var(--ease-sortie), color var(--d-normal) var(--ease-sortie);
}
.pastille::before { content: ""; flex: 0 0 auto; width: 12px; height: 12px; background: currentColor; }
.statut-moi { background: var(--accent); color: var(--sur-accent); box-shadow: none; }
.statut-moi::before { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.statut-attente::before { background: none; box-shadow: inset 0 0 0 2px currentColor; border-radius: var(--rayon-rond); }
.statut-gagne { background: var(--succes-fond); color: var(--texte); box-shadow: inset 0 0 0 1px var(--succes); }
.statut-gagne::before { clip-path: polygon(0 55%, 18% 38%, 40% 60%, 82% 10%, 100% 28%, 40% 95%); }
.statut-perdu { background: var(--danger-fond); color: var(--texte); box-shadow: inset 0 0 0 1px var(--danger); }
.statut-perdu::before { clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%); }

/* Le journal : la dernière nouvelle. Après la nuit, il arrive comme le rapport du matin. */
.journal { margin: 0; padding-top: var(--e-4); max-width: none; border-top: 1px solid var(--lisere); font-style: italic; }
.rapport-matin { animation: apparaitre var(--d-lent) var(--ease-sortie); }

/* L'erreur : texte rouge clair, un "!" (forme + texte, pas la couleur seule) */
.alerte {
    display: flex; align-items: center; gap: var(--e-3);
    margin: 0; padding: var(--e-3) var(--e-4);
    background: var(--danger-voile); border-left: 3px solid var(--danger); border-radius: var(--rayon);
    color: var(--danger-texte); font-weight: 700;
    animation: apparaitre var(--d-normal) var(--ease-sortie);
}
.alerte::before {
    content: "!"; flex: 0 0 auto; width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
    background: var(--danger); color: var(--fond); font-weight: 700; line-height: 1; border-radius: var(--rayon);
}
.alerte:empty { display: none; }        /* vide = invisible (jeu.js la vide après 3 s) */

/* ---------- La grille du jeu (ordinateur) ---------- */
.jeu {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start;
    gap: var(--e-5); margin-top: var(--e-5);
    grid-template-areas:
        "actions reserves"
        "actions chantier"
        "travail autre";
}
.actions { grid-area: actions; }
.section-reserves { grid-area: reserves; }
.section-chantier { grid-area: chantier; }
.section-habitants { grid-area: travail; }       /* par défaut (et joueur 1) : les habitants à côté des actions */
.section-batiments { grid-area: autre; }
.joueur-2 .section-batiments { grid-area: travail; }   /* joueur 2 : les bâtiments à côté des actions */
.joueur-2 .section-habitants { grid-area: autre; }
.section-village h3 { margin-bottom: var(--e-4); }

/* ---------- Le panneau d'actions : il s'éclaire à mon tour, s'atténue sinon ---------- */
.actions { transition: background-color var(--d-lent) var(--ease-sortie), box-shadow var(--d-lent) var(--ease-sortie); }
.actions.actif { background: var(--surface-active); box-shadow: var(--relief), inset 0 2px 0 var(--accent); }
.actions.actif .role-tete .blason { color: var(--accent); }
.actions .role { transition: opacity var(--d-lent) var(--ease-sortie); }
.actions.en-attente .role { opacity: 0.55; }      /* la phrase .note-tour, elle, reste pleinement lisible */
.note-tour { margin: 0 0 var(--e-4); font-size: var(--t-1); color: var(--texte); font-style: italic; }
.note-tour:empty { display: none; }
.role { display: flex; flex-direction: column; gap: var(--e-3); }
.role-tete { display: flex; align-items: center; gap: var(--e-4); }
.role-tete .blason { width: 48px; height: 58px; transition: color var(--d-lent) var(--ease-sortie); }
.role .aide { margin: var(--e-2) 0 var(--e-3); }
.role button { justify-content: flex-start; text-align: left; width: 100%; padding-inline: var(--e-4); }
.role .btn-terminer { justify-content: center; margin-top: var(--e-3); }

/* ---------- Les réserves : un compteur en ligne, comme un HUD ---------- */
.reserves {
    list-style: none; margin: 0; padding: 0; max-width: none;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.reserves li {
    position: relative;
    display: grid; grid-template-columns: auto; justify-items: start; gap: var(--e-1);
    padding: 0 var(--e-3);
}
.reserves li:first-child { padding-left: 0; }
.reserves li + li { box-shadow: inset 1px 0 0 var(--lisere); }
.icone-ressource { width: 28px; height: 28px; color: var(--texte-doux); }
.reserves .chiffre { font-size: var(--t-4); }
.reserves .nom-ressource { font-size: var(--t-1); color: var(--texte-doux); line-height: 1.2; }
/* La ressource monte : l'icône bondit (réussite) ; "+3" ou "−2" s'envole (après l'aube s'il fait nuit) */
.hausse .icone-ressource { animation: bond var(--d-lent) var(--ease-ressort) var(--delai, 0ms); }
.ecart {
    position: absolute; top: 0; right: var(--e-2);
    font-weight: 700; font-size: var(--t-1);
    animation: ecart calc(var(--d-scene) + var(--d-normal)) var(--ease-sortie) var(--delai, 0ms) both;
}
.hausse .ecart { color: var(--succes); }
.baisse .ecart { color: var(--danger-texte); }
/* Réserve basse (moins de nourriture que d'habitants) : texte + liseré rouge qui pulse lentement */
.etiquette-basse { font-size: var(--t-1); font-weight: 700; color: var(--danger-texte); line-height: 1.2; }
.reserve-basse::before {
    content: ""; position: absolute; inset: calc(-1 * var(--e-2)) 0; border-radius: var(--rayon);
    box-shadow: inset 0 -2px 0 var(--danger);
    animation: pulsation var(--d-pulsation) var(--ease-ambiance) infinite;
    pointer-events: none;
}
.conso { margin: var(--e-5) 0 0; font-size: var(--t-1); color: var(--texte-doux); }

/* ---------- Le chantier de la Mairie : trois jauges (dessinées avec transform: scaleX) ---------- */
.chantier { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-4); max-width: none; }
.chantier li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 4rem; align-items: center; gap: var(--e-3); font-size: var(--t-1); }
.chantier .jauge { display: block; height: 6px; background: var(--surface-haute); border-radius: var(--rayon); overflow: hidden; }
.chantier .jauge span { display: block; height: 100%; background: var(--texte-doux); transform: scaleX(var(--part, 0)); transform-origin: left center; }
.chantier .compte { text-align: right; color: var(--texte-doux); }
/* Matériau réuni : jauge verte ET coche (pas la couleur seule) */
.chantier li.complet .jauge span { background: var(--succes); }
.chantier li.complet .compte { color: var(--succes); font-weight: 700; }
.chantier li.complet .compte::after { content: " ✓"; }
.chantier-etat { margin: var(--e-4) 0 0; font-size: var(--t-1); font-weight: 700; color: var(--succes); }
.chantier-etat:empty { display: none; }

/* ---------- Les bâtiments : la rue du village ----------
 * Pas de cartes : chaque bâtiment se dresse sur son bout de rue (un trait au sol).
 * Abîmé : dessin noirci + toit percé (--degats), sol en pointillé rouge, texte "Endommagé". */
.batiments { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--e-6) var(--e-5); margin: 0; }
.batiment { display: flex; flex-direction: column; gap: 2px; }
.illu-batiment {
    display: block; width: 100%; max-width: 128px; height: auto; aspect-ratio: 120 / 96;
    padding-bottom: var(--e-2); margin-bottom: var(--e-3);
    border-bottom: 2px solid var(--lisere-fort);           /* le sol de la rue */
    transform-origin: 50% 100%;
}
.batiment strong { font-family: var(--police-gravee); font-weight: 700; font-size: var(--t-1); letter-spacing: var(--interlettre); }
.batiment .places { font-size: var(--t-1); color: var(--texte-doux); }
.batiment .degat { font-size: var(--t-1); font-weight: 700; color: var(--danger-texte); }
.batiment .degat::before { content: "✕ "; }
.batiment button { margin-top: var(--e-3); width: 100%; padding-inline: var(--e-3); }
.batiment.abime .illu-batiment { --degats: 1; filter: grayscale(0.7) brightness(0.62); border-bottom-style: dashed; border-bottom-color: var(--danger); }

/* Animations "seulement si ça vient de changer" (classes ajoutées par jeu.js) */
.batiment.apparait .illu-batiment { animation: construire var(--d-lent) var(--ease-ressort); }
.batiment.apparait strong, .batiment.apparait .places { animation: fondu var(--d-normal) var(--ease-sortie) var(--d-normal) both; }
.batiment.vient-abime { animation: tremble var(--d-normal) linear; }
.batiment.vient-abime .illu-batiment { animation: noircit var(--d-lent) var(--ease-sortie); }
.batiment.repare .illu-batiment { animation: repare var(--d-lent) var(--ease-sortie); }

/* ---------- Les habitants : une ligne par habitant (le nom, puis son menu) ---------- */
.habitants { list-style: none; margin: 0; padding: 0; max-width: none; }
.habitants li { padding: var(--e-2) 0; border-top: 1px solid var(--lisere); }
.habitants li:first-child { border-top: 0; }
.habitants label { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: var(--e-3); cursor: pointer; }
.icone-habitant { width: 22px; height: 22px; color: var(--texte-doux); }
.nom-habitant { font-weight: 700; overflow-wrap: anywhere; }
.habitants .vide { border-top: 0; }

.controles { display: flex; justify-content: flex-end; margin-top: var(--e-5); }

/* ---------------------------------------------------------------- 6c. CRÉATEURS ET SUPPORTS
 * Même scène (en version calme), même titre, mise en page éditoriale. */
.tete-page { padding-top: 7rem; padding-bottom: var(--e-7); min-height: clamp(380px, 54vh, 580px); display: grid; align-content: end; }
.titre-page { width: 100%; max-width: var(--largeur); margin: 0 auto; }
.titre-page h1 { margin-bottom: var(--e-4); }
.titre-page .chapeau { margin-bottom: 0; color: var(--texte-doux); }

/* Une ligne par créateur : le nom à gauche (grand), le reste à droite */
.createurs { max-width: var(--largeur); margin: var(--e-6) auto 0; }
.createur {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--e-5);
    padding: var(--e-6) 0; border-top: 1px solid var(--lisere-fort);
}
.createur .nom { grid-column: 1 / span 5; margin: 0; font-family: var(--police-gravee); font-weight: 700; font-size: var(--t-4); letter-spacing: var(--interlettre); line-height: 1.15; }
.createur-texte { grid-column: 7 / -1; }
.createur .role-createur { color: var(--texte-doux); }

.document-corps { max-width: var(--largeur); margin: var(--e-6) auto 0; }
.document-corps > p { line-height: 1.7; }
/* Le lien vers le support : le seul panneau éclairé de la page */
.document .lien-support {
    max-width: 40rem; margin-top: var(--e-6); padding: var(--e-5) var(--e-6);
    background: var(--surface-haute); box-shadow: var(--relief); border-radius: var(--rayon);
    font-family: var(--police-gravee); font-weight: 700; letter-spacing: var(--interlettre);
}

/* ---------------------------------------------------------------- 6d. ÉCRANS DE FIN (cinématique)
 * L'écran s'ouvre en CERCLE depuis le centre, puis le titre se révèle de gauche à droite,
 * puis le texte et le bouton. Joué une seule fois, quand la partie VIENT de finir
 * (si la page s'ouvre sur une partie déjà finie : classe .sans-cinematique, affichage direct).
 * "main > .fin" : plus prioritaire que la règle des plans (section 2). */
main > .fin {
    position: fixed; inset: 0; z-index: 20;
    display: grid; place-content: center; justify-items: center; gap: var(--e-5);
    padding: var(--e-6) var(--marge); text-align: center;
    background: var(--voile-fin);
    animation: ouvrir-cercle var(--d-scene) var(--ease-sortie);
}
.fin h2 {
    font-family: var(--police-gothique); font-weight: 800; font-size: var(--t-5); line-height: 0.95; letter-spacing: 0;
    max-width: 14ch;
    animation: devoiler var(--d-lent) var(--ease-sortie) calc(var(--d-scene) / 2) both;
}
.fin p { max-width: 52ch; margin: 0; animation: apparaitre var(--d-normal) var(--ease-sortie) var(--d-scene) both; }
.fin button { animation: apparaitre var(--d-normal) var(--ease-sortie) calc(var(--d-scene) + var(--d-normal)) both; }
.fin-gagne h2 { color: var(--accent); }        /* victoire : l'or (9,5:1) ; les braises montent (ambiance.js) */
.fin-perdu { background: var(--voile-fin-froid); }
.fin-perdu h2 { color: var(--hiver); }         /* défaite : le givre (12,3:1) ; la tempête se voit derrière */
.fin.sans-cinematique, .fin.sans-cinematique * { animation: none; }

/* ---------------------------------------------------------------- 6e. TABLETTE ET TÉLÉPHONE
 * La même ambiance, une seule colonne. ambiance.js dessine aussi moins de flocons.
 * Ordre sur petit écran : l'action d'abord, puis la liste du rôle, puis le reste. */
@media (max-width: 1080px) {
    .jeu { grid-template-columns: 1fr; grid-template-areas: "actions" "travail" "reserves" "chantier" "autre"; }
    .etat { grid-template-columns: minmax(0, 1fr) auto; }
    .etat .pastille { grid-column: 2; }
    .etat .echelle { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
    .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--e-7); }
}
@media (max-width: 760px) {
    .accueil-hero { padding-top: 10rem; min-height: max(100svh, 600px); }
    .hero-bas { grid-template-columns: 1fr; }
    .compte-a-rebours { justify-self: start; }
    .torche { bottom: auto; top: 40%; width: 40px; }   /* hors du texte, à hauteur des montagnes */

    .bloc, .createur { grid-template-columns: 1fr; }
    .bloc > h2, .bloc > :not(h2), .createur .nom, .createur-texte { grid-column: 1; }
    .roles, .depart-choix, .etapes { grid-template-columns: 1fr; }
    .table-batiments td:first-child { white-space: normal; }
    .illu { display: block; margin: 0 0 var(--e-2); width: 56px; height: 45px; }

    /* Sur téléphone, le menu tient sur deux lignes : on laisse sa place au-dessus des titres */
    .tete-jeu { padding-top: 10.5rem; }
    .tete-page { padding-top: 11rem; min-height: 380px; }
    .etat { grid-template-columns: 1fr; }
    .etat .jour-editorial, .etat .pastille, .etat .echelle { grid-column: 1; grid-row: auto; justify-self: start; }
    .reserves { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--e-5); }
    .reserves li:nth-child(3) { padding-left: 0; box-shadow: none; }
    .batiments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .habitants label { grid-template-columns: 22px minmax(0, 1fr); }
    .habitants select { grid-column: 1 / -1; width: 100%; }
    .controles button { width: 100%; }
}


/* =====================================================================================
 * 7. TRANSITIONS (les grands moments)
 * ===================================================================================== */

/* ---------- 7a. Entre les pages : View Transitions entre documents ----------
 * POUR LE RAPPORT : avec "@view-transition { navigation: auto; }", le navigateur fait
 * une capture de l'ancienne page et de la nouvelle, puis anime de l'une à l'autre.
 *   - Les éléments qui portent le MÊME view-transition-name sur les deux pages sont
 *     reliés : l'en-tête reste immobile, et la scène du village se transforme de l'une à
 *     l'autre (en grand sur l'accueil -> en bandeau dans le jeu : effet de "zoom").
 *   - Tout le reste (root) sort en fondu en montant un peu, et le nouveau contenu arrive.
 *   - Les navigateurs qui ne connaissent pas cette API changent de page normalement. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    .entete { view-transition-name: entete; }
    .scene  { view-transition-name: scene; }
    ::view-transition-old(root) { animation: vt-sortie var(--d-normal) var(--ease-entree) both; }
    ::view-transition-new(root) { animation: vt-entree var(--d-lent) var(--ease-sortie) both; }
    ::view-transition-group(scene) { animation-duration: var(--d-lent); animation-timing-function: var(--ease-sortie); }
}

/* ---------- 7b. Le passage de tour : le bandeau "À vous" ----------
 * Créé par jeu.js quand c'est DEVENU mon tour. Il traverse l'écran en 1,2 s,
 * ne bloque jamais les clics (pointer-events: none) ; un clic ou Échap le fait disparaître.
 * À sa fin, le panneau d'actions s'éclaire (.actions.actif, section 6b). */
.bandeau-tour {
    position: fixed; left: 0; right: 0; top: 40%; z-index: 24;
    display: grid; place-items: center; padding: var(--e-5) var(--marge);
    background: var(--surface-haute); box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent);
    pointer-events: none;
    animation: traverser var(--d-bandeau) var(--ease-sortie) both;
}
.bandeau-tour span { font-family: var(--police-gravee); font-weight: 700; font-size: var(--t-4); letter-spacing: var(--interlettre); color: var(--accent); text-align: center; }

/* ---------- 7c. La nuit (changement de jour) : 2 secondes au plus ----------
 * L'écran s'assombrit, la lune monte, les "+N" de la production s'envolent, l'aube revient.
 * Un clic ou Échap passe la séquence. */
.nuit {
    position: fixed; inset: 0; z-index: 26;
    display: grid; place-content: center; justify-items: center; gap: var(--e-4);
    padding: var(--marge); text-align: center;
    background: var(--voile-nuit); cursor: pointer;
    animation: nuit-voile var(--d-nuit) var(--ease-sortie) both;
}
.nuit-lune { width: 72px; height: 72px; color: var(--nuit-lune); animation: nuit-lune var(--d-nuit) var(--ease-sortie) both; }
.nuit-titre { margin: 0; font-family: var(--police-gravee); font-weight: 700; font-size: var(--t-3); letter-spacing: var(--interlettre); color: var(--texte); }
.nuit-gains { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2) var(--e-5); min-height: 2em; }
.nuit-gains span {
    font-size: var(--t-3); font-weight: 700; color: var(--succes);
    animation: nuit-gain calc(var(--d-nuit) * 0.7) var(--ease-sortie) calc(var(--d-nuit) * 0.2 + var(--rang, 0) * var(--d-decalage)) both;
}
.nuit-eclat { position: absolute; inset: 0; background: var(--neige-flocon); opacity: 0; pointer-events: none; animation: eclat var(--d-normal) var(--ease-sortie) calc(var(--d-nuit) * 0.45); }

/* ---------- 7d. L'éclat de la tempête (hors nuit) : opacité 0,25 au plus, moins de 300 ms ---------- */
.eclat { position: fixed; inset: 0; z-index: 25; pointer-events: none; background: var(--neige-flocon); opacity: 0; animation: eclat var(--d-normal) var(--ease-sortie) both; }

/* ---------- 7e. La fenêtre de confirmation : zoom léger, fond qui s'assombrit ----------
 * En CSS pur, à l'ouverture ET à la fermeture (même mouvement, inversé) :
 *   - @starting-style donne l'état de DÉPART quand la fenêtre s'ouvre ;
 *   - "allow-discrete" permet d'animer aussi display et overlay, donc la fermeture.
 * Les navigateurs plus anciens ouvrent et ferment simplement sans animation. */
dialog {
    opacity: 0; transform: scale(0.96);
    transition: opacity var(--d-normal) var(--ease-entree), transform var(--d-normal) var(--ease-entree),
                overlay var(--d-normal) allow-discrete, display var(--d-normal) allow-discrete;
}
dialog[open] { opacity: 1; transform: none; transition-timing-function: var(--ease-sortie); }
dialog::backdrop {
    background-color: var(--voile-scene-nul);
    transition: background-color var(--d-normal) var(--ease-entree),
                overlay var(--d-normal) allow-discrete, display var(--d-normal) allow-discrete;
}
dialog[open]::backdrop { background-color: var(--voile); transition-timing-function: var(--ease-sortie); }
@starting-style {
    dialog[open] { opacity: 0; transform: scale(0.96); }
    dialog[open]::backdrop { background-color: var(--voile-scene-nul); }
}


/* =====================================================================================
 * 8. ACCESSIBILITÉ
 * ===================================================================================== */

/* Focus clavier : un anneau or net (+ la ligne de braise, comme au survol) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Lien d'évitement : caché hors de l'écran, il apparaît au premier appui sur Tab */
.evitement {
    position: absolute; left: var(--e-4); top: -6rem; z-index: 30;
    padding: var(--e-3) var(--e-4); border-radius: var(--rayon);
    background: var(--accent); color: var(--sur-accent);
    font-family: var(--police-gravee); font-weight: 700; text-decoration: none;
}
.evitement:focus { top: var(--e-4); }

/* Texte réservé aux lecteurs d'écran (invisible à l'écran, lu à voix haute) */
.lecteur-ecran { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Écran tactile : pas de ligne de survol "collée" après un appui */
@media (hover: none) {
    .bouton:hover::after, button:hover::after, .menu a:hover::after { transform: scaleX(0); }
}

/* Mode "contraste élevé" de Windows : les panneaux gardent un contour visible */
@media (forced-colors: active) {
    .panneau, dialog, select, .bouton, button { border: 1px solid CanvasText; }
}


/* =====================================================================================
 * 9. RÉDUCTION DU MOUVEMENT
 * POUR LE RAPPORT : si l'utilisateur a demandé "moins d'animations" dans son système :
 *   - plus de séquences (ni bandeau qui traverse, ni nuit, ni éclat : jeu.js ne les crée pas),
 *     plus de neige animée ni de parallaxe (ambiance.js s'arrête), plus d'ouverture ;
 *   - les changements se font par un simple fondu de 150 ms ;
 *   - la neige devient un voile givré FIXE dont la force suit --neige :
 *     l'information "l'hiver approche" reste visible, sans mouvement.
 * ===================================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
    /* Les seuls changements visibles : un fondu court */
    .rapport-matin, .alerte, main > .fin:not(.sans-cinematique), .batiment.apparait .illu-batiment, dialog[open] {
        animation: fondu var(--d-rapide) linear !important;
    }
    @view-transition { navigation: auto; }
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--d-rapide) !important; }
    body::after {
        content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
        background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--hiver) calc(var(--neige) * 18%), transparent), transparent 70%);
    }
}