/* ============================================================
   Ossature du site — en-tête, menu, pied de page, pages de texte.

   Volontairement SÉPARÉE de socle.css : les pages de jeu occupent
   l'écran entier, n'ont ni menu ni pied de page, et n'ont donc
   aucune raison de télécharger ces règles. Seuls le hub, les
   récompenses et les pages d'information chargent ce fichier.

   La palette, elle, reste celle du socle : un seul site, une
   seule identité visuelle.
   ============================================================ */

body.site{
  display:flex;flex-direction:column;min-height:100dvh;
  overscroll-behavior-y:none;
}
.cadre{max-width:920px;margin:0 auto;padding:0 16px;width:100%}
body.site > main{flex:1 0 auto}

/* ---------- lien d'évitement ----------
   Premier élément focalisable : invisible tant qu'il n'a pas le focus,
   il permet de sauter la navigation au clavier. */
.evitement{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--accent);color:#06101f;padding:10px 18px;
  border-radius:0 0 var(--radius) 0;text-decoration:none;
  font:700 14px/1 system-ui,sans-serif;
}
.evitement:focus{left:0}

/* ---------- bandeau de site ---------- */
.entete-site{border-bottom:1px solid var(--line);background:rgba(23,30,46,.6)}
.entete-barre{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px;
}
.marque{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.sceau{
  flex:0 0 auto;width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;
  background:rgba(94,176,255,.12);border:1px solid var(--line);
}
.sceau svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round}
.marque-nom{display:block;font:800 18px/1.15 system-ui,sans-serif;letter-spacing:-.02em;color:var(--txt)}
.marque-sous{
  display:block;font:700 9.5px/1 system-ui,sans-serif;letter-spacing:.22em;
  text-transform:uppercase;color:var(--txt-dim);margin-top:3px;
}
.marque:hover .marque-nom{color:var(--accent)}

/* ---------- menu principal ---------- */
.menu-site ul{list-style:none;display:flex;gap:4px;flex-wrap:wrap;margin:0;padding:0}
.menu-site a{
  display:block;padding:7px 13px;border-radius:999px;
  color:var(--txt-dim);text-decoration:none;font:600 13px/1 system-ui,sans-serif;
  border:1px solid transparent;transition:color .15s,border-color .15s;
}
.menu-site a:hover{color:var(--txt);border-color:var(--line)}
.menu-site a[aria-current="page"]{color:var(--accent);border-color:var(--accent)}
.menu-site a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.menu-bouton{
  display:none;background:none;border:1px solid var(--line);color:var(--accent);
  border-radius:999px;padding:7px 15px;font:600 13px/1 system-ui,sans-serif;cursor:pointer;
}
.menu-bouton:hover{border-color:var(--accent)}

/* Sous 640 px le menu se replie derrière le bouton. L'état ouvert est porté
   par une classe et non par `hidden` : au retour sur un écran large, le menu
   doit réapparaître même s'il avait été refermé. */
@media (max-width:640px){
  .menu-bouton{display:block}
  .menu-site{flex-basis:100%;display:none}
  .menu-site.ouvert{display:block}
  .menu-site ul{flex-direction:column;gap:0;padding-bottom:6px}
  .menu-site a{border-radius:9px;padding:11px 13px}
}

/* ---------- fil d'Ariane ---------- */
.fil{padding-top:14px;font:500 12.5px/1.4 system-ui,sans-serif}
.fil ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0;padding:0}
.fil li{display:flex;align-items:center;gap:7px;min-width:0}
.fil li + li::before{content:"›";color:var(--line-strong)}
.fil a{color:var(--txt-dim);text-decoration:none}
.fil a:hover{color:var(--accent)}
.fil [aria-current="page"]{color:var(--txt-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- pied de page ---------- */
.pied-site{
  flex:0 0 auto;border-top:1px solid var(--line);
  background:rgba(30,39,57,.5);padding:38px 0 26px;margin-top:34px;
  font:500 14px/1.55 system-ui,sans-serif;
}
.pied-grille{
  display:grid;gap:30px;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);
}
.pied-site h2{
  font:700 10px/1 system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0 0 12px;
}
.pied-site ul{list-style:none;display:grid;gap:7px;margin:0;padding:0}
.pied-site a{color:var(--txt-dim);text-decoration:none;font-size:13.5px}
.pied-site a:hover{color:var(--txt);text-decoration:underline;text-underline-offset:3px}
.pied-marque .marque{margin-bottom:12px}
.pied-texte{color:var(--txt-dim);max-width:30rem;font-size:13px;margin:0}
.pied-bas{
  margin-top:28px;padding-top:20px;border-top:1px solid var(--line);
  display:grid;gap:10px;
}
.pied-note{color:var(--txt-dim);font-size:12.5px;line-height:1.5;margin:0}
.pied-copyright{color:var(--txt-dim);font-size:12.5px;margin:0}
.pied-copyright b{color:var(--txt);font-weight:600}
@media (max-width:640px){
  .pied-grille{grid-template-columns:1fr;gap:24px}
}

/* ---------- pages de texte (mentions légales, confidentialité) ---------- */
.page-texte{max-width:44rem;margin:26px auto 0}
.page-texte h1{
  font:800 clamp(24px,4vw,32px)/1.15 system-ui,sans-serif;
  letter-spacing:-.02em;margin:0 0 6px;
}
.page-texte .maj{color:var(--txt-dim);font-size:13px;margin:0 0 26px}
.page-texte h2{font:700 18px/1.25 system-ui,sans-serif;margin:30px 0 10px;color:var(--txt)}
.page-texte p,.page-texte li{color:var(--txt);font:500 14.5px/1.65 system-ui,sans-serif;margin:0 0 14px}
.page-texte ul{padding-left:20px;margin:0 0 14px}
.page-texte li{margin-bottom:7px}
.page-texte a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.page-texte a:hover{color:var(--txt)}
.page-texte dl{margin:0 0 18px}
.page-texte dt{
  font:700 11px/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-dim);margin-top:14px;
}
.page-texte dd{margin:5px 0 0;color:var(--txt);font:500 14.5px/1.6 system-ui,sans-serif}
.page-texte .encadre{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius);padding:16px 18px;margin:0 0 20px;
}
.page-texte .encadre p:last-child{margin-bottom:0}