/* Styles propres à templates/layout/public.html.twig (déplacés depuis son bloc <style>). */
*{margin:0;padding:0;box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation:none!important;transition:none!important}
}
/* Filet de sécurité : si un élément quelque part déborde encore en
   largeur (tableau non adapté, etc.), la PAGE ne défile jamais
   horizontalement — seul cet élément, dans son propre conteneur,
   le fera (cf. .tableau-scroll). Sans ça, un tel débordement peut
   faire glisser toute la page (y compris le header, sticky mais
   pas fixe horizontalement) vers la gauche, collant le logo au
   bord. */
body{background:var(--fond-page);color:var(--papier);font-family:'Karla',sans-serif;font-size:17px;line-height:1.6;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
:focus-visible{outline:2px solid var(--laiton);outline-offset:3px}

/* Champs de formulaire — base commune à tous les formulaires publics (création de
   partie du Laboratoire et du Bunker notamment) : la largeur du champ suit ce qu'on
   y saisit plutôt que de s'étirer sur toute la largeur du formulaire (un select ou un
   nombre n'a pas besoin de la même largeur qu'un nom). */
label{display:block;margin:1rem 0 .3rem;font-size:.9rem}
input[type=text],input[type=email],input[type=password],textarea{width:100%;padding:.5rem;border-radius:4px;border:1px solid var(--bordure-champ);background:var(--fond-element);color:var(--papier);box-sizing:border-box}
textarea{resize:vertical}
input[type=number]{width:5.5rem;padding:.5rem;border-radius:4px;border:1px solid var(--bordure-champ);background:var(--fond-element);color:var(--papier);box-sizing:border-box}
input[type=date]{width:auto;max-width:100%;padding:.5rem;border-radius:4px;border:1px solid var(--bordure-champ);background:var(--fond-element);color:var(--papier);box-sizing:border-box;color-scheme:dark;font:inherit}
select{width:auto;max-width:100%;padding:.5rem;border-radius:4px;border:1px solid var(--bordure-champ);background:var(--fond-element);color:var(--papier);box-sizing:border-box}
input[type=file]{color:var(--brume);font-size:.85rem;margin-top:.4rem}
input.champ-code{width:44px;padding:.5rem;text-align:center;border-radius:4px;border:1px solid var(--bordure-champ);background:var(--fond-element);color:var(--papier);font-family:'Special Elite',monospace;font-size:1.2rem;box-sizing:border-box}

header.site{position:sticky;top:0;z-index:50;background:var(--fond-page-voile);backdrop-filter:blur(6px);border-bottom:1px solid var(--bordure)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:'Fraunces',serif;font-weight:900;font-size:1.25rem;letter-spacing:.02em;text-decoration:none}
.logo em{font-style:normal;color:var(--laiton)}
.nav-links{display:flex;gap:26px;align-items:center;list-style:none}
.nav-links a{text-decoration:none;font-weight:500;font-size:.95rem;color:var(--brume)}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--papier)}
/* `.nav-links a` (ci-dessus, classe+élément) est plus spécifique que
   `.btn` seul et écrasait sa couleur foncée par --brume : le bouton
   "Voir les scénarios" devenait quasi illisible sur son fond laiton
   (texte pâle sur fond doré, confirmé en inspectant le style calculé
   en direct). */
.nav-links a.btn{color:var(--fond-page)}
.nav-links a.btn:hover,.nav-links a.btn:focus-visible{color:var(--fond-page)}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:0;background:transparent;border:1px solid var(--bordure-bouton);border-radius:4px;cursor:pointer}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--papier);margin:0 auto}
.btn{display:inline-block;text-decoration:none;font-weight:700;padding:12px 26px;border-radius:4px;font-size:1rem;background:var(--laiton);color:var(--fond-page);border:1px solid var(--laiton);transition:transform .12s ease, background .12s ease}
.btn:hover,.btn:focus-visible{background:var(--laiton-survol);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--papier);border:1px solid var(--bordure-bouton)}
.btn.ghost:hover{border-color:var(--papier)}
.btn.small{padding:8px 18px;font-size:.9rem}

/* Conteneur de défilement horizontal pour les tableaux larges
   (équipes, temps par session…) : sans lui, un tableau plus large que
   l'écran pousse toute la page en largeur sur mobile (nav, boutons,
   tout devient scrollable horizontalement) au lieu de ne faire
   défiler que le tableau lui-même. */
/* Piste/curseur aux couleurs de la charte : sans ça, la barre de
   défilement horizontal par défaut du navigateur est blanche/grise
   vive sur ce fond sombre. */
.tableau-scroll{overflow-x:auto;scrollbar-color:var(--laiton) var(--fond-carte);scrollbar-width:thin}
.tableau-scroll::-webkit-scrollbar{height:8px}
.tableau-scroll::-webkit-scrollbar-track{background:var(--fond-carte)}
.tableau-scroll::-webkit-scrollbar-thumb{background:var(--laiton);border-radius:4px}

/* Mécanisme responsive partagé par TOUS les tableaux du site (élaboré
   pour "Mes parties", désormais centralisé ici pour que chaque page
   n'ait qu'à fixer ses propres `grid-template-columns` — jamais à
   redéfinir toute la mécanique responsive). Un seul balisage
   (div + role="table/row/cell", jamais de <table> ni deux blocs dont
   un masqué) :
   - ≥768px : `.ligne{display:contents}` fait remonter les cellules
     de chaque ligne directement dans la grille CSS de
     `.tableau-grille`, comme les colonnes d'un vrai tableau.
   - <768px : `.tableau-grille` redevient un simple flux vertical de
     cartes (`.ligne-donnees`) ; chaque valeur est précédée de son
     libellé via `data-label` + `content: attr(data-label)` — le
     composant générique (_composants/tableau_responsive.html.twig)
     s'arrête là. Un tableau avec une mise en page mobile sur-mesure
     (équipes, temps par session) surcharge `.ligne-donnees` avec ses
     propres règles, plus spécifiques, au lieu d'utiliser ce
     comportement par défaut. */
@media (min-width:768px){
    /* `--nb-colonnes` (posée par le composant générique
       _composants/tableau_responsive.html.twig, cf. son commentaire)
       évite tout nombre de colonnes codé en dur : un tableau simple
       marche quel que soit son nombre de champs, sans qu'aucune page
       n'ait à le déclarer. Un tableau sur-mesure (équipes, temps par
       session) qui a besoin de largeurs différentes par colonne
       (`1fr`, `minmax()`…) écrase cette valeur par défaut via SA
       PROPRE classe de page (`.equipes-grille`, `.temps-grille`) —
       jamais en modifiant `.tableau-grille` elle-même. */
    /* Pas de `column-gap` : l'espacement entre colonnes vient
       uniquement du padding horizontal des cellules (.3rem de
       chaque côté = .6rem entre 2 cellules, la même valeur qu'un
       `column-gap:.6rem` produirait). Avec un vrai `column-gap`, la
       bordure du bas de chaque cellule s'arrête au bord de la
       cellule : l'espace du gap, lui, n'a pas de bordure, donc la
       ligne de séparation paraît interrompue entre les colonnes. En
       gap:0 + padding, les cellules se touchent et leurs bordures
       se prolongent les unes les autres en une ligne continue. */
    .tableau-grille{display:grid;grid-template-columns:repeat(var(--nb-colonnes),auto);column-gap:0;align-items:center;font-size:.88rem}
    .tableau-grille .ligne{display:contents}
    .tableau-grille [role=columnheader]{color:var(--brume);font-size:.72rem;text-transform:uppercase;font-weight:500;padding:.5rem .3rem;border-bottom:1px solid var(--bordure)}
    .tableau-grille [role=cell]{padding:.5rem .3rem;border-bottom:1px solid var(--bordure);white-space:nowrap}
}
@media (max-width:767px){
    .tableau-grille{display:flex;flex-direction:column;gap:.8rem}
    .tableau-grille .ligne-entete{display:none}
    .tableau-grille .ligne-donnees{
        display:flex;flex-direction:column;gap:.5rem;
        background:var(--fond-carte);border:1px solid var(--bordure);border-radius:6px;padding:.8rem 1rem;
    }
    .tableau-grille [role=cell][data-label]{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem}
    .tableau-grille [role=cell][data-label]::before{content:attr(data-label);color:var(--brume);font-size:.72rem;text-transform:uppercase;font-weight:500;flex-shrink:0}
}

/* Code d'équipe ou de joueur (Special Elite, laiton) — ex. le_bunker/codes.html.twig. */
.code{font-family:'Special Elite',monospace;color:var(--laiton);letter-spacing:.5px}

section{padding:84px 0}
.section-title{font-family:'Fraunces',serif;font-weight:700;font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:14px}
.section-intro{color:var(--brume);max-width:38em;margin-bottom:48px}

footer.site{border-top:1px solid var(--bordure);padding:36px 0;color:var(--brume);font-size:.88rem}
.info-deploiement{margin-top:18px;font-size:.78rem;color:var(--brume)}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
.foot a{color:var(--brume);text-decoration:none}
.foot a:hover{color:var(--papier)}

@media (max-width:860px){
    .nav-toggle{display:flex}
    .nav-links{display:none}
    .nav-links.ouverte{
        display:flex;flex-direction:column;align-items:stretch;gap:4px;
        position:absolute;top:64px;left:0;right:0;
        background:var(--fond-carte);border-bottom:1px solid var(--bordure);
        padding:16px 24px 20px;
    }
    .nav-links li{width:100%}
    .nav-links a{display:flex;align-items:center;min-height:44px;padding:10px 0}
    /* Le bouton "Voir les scénarios" est une action, pas juste un
       lien de plus dans la liste : un peu d'air au-dessus l'en
       distingue visuellement des liens texte "Scénarios"/"Déconnexion"
       qui le précèdent, et un padding horizontal cohérent avec son
       fond plein l'empêche de paraître collé aux bords. */
    .nav-links li:last-child{margin-top:10px}
    .nav-links a.btn{padding-left:18px;padding-right:18px;justify-content:center}
}