/* ═════════════════════════════════════════════════════════════════════════════
   LA FEUILLE DES PAGES DE CONTENU — « Comment jouer », FAQ, journal, contact.
   ═════════════════════════════════════════════════════════════════════════════
   ⚠️ POURQUOI ELLE EXISTE (2026-08-26). Chaque page portait sa propre copie de
   la même mise en page, dans son propre gabarit. Elles ont donc DIVERGÉ : la
   charte du 2026-08-02 a fait passer la marque au crème et les liens du vert
   d'action à la marque + soulignement, `how-to-play` a suivi, les pages de la
   vitrine NON — pendant des semaines, et personne ne pouvait le voir sans
   ouvrir les deux côte à côte. Une seule feuille rend la divergence
   IMPOSSIBLE, au lieu de la rendre repérable.

   Elle se charge APRÈS `theme.css`, dont elle consomme les jetons et les
   polices. Aucune valeur de couleur ici : que des `var(--af-…)`.
   Ce qui reste dans un gabarit, c'est ce qui n'appartient QU'À lui (les pictos
   et les familles d'objets de « Comment jouer », par exemple).
   ═════════════════════════════════════════════════════════════════════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; }
/* Le MÊME fond que le jeu, trois arrêts (2026-08-27) : « ce dégradé on le
   retrouve aussi sur toutes les pages, les pages mentions légales et cetera ». */
/* Le MÊME fond que le jeu : halo orange dans l'angle bas-droit AU-DESSUS d'un
   dégradé vertical à deux arrêts. « on va garder le dégradé orange en bas à
   droite même dans les autres menus ». */
html { background: radial-gradient(120% 100% at var(--af-fond-halo-x) var(--af-fond-halo-y), var(--af-fond-chaud) 0%, transparent 58%), linear-gradient(180deg, var(--af-fond-haut), var(--af-fond-bas) var(--af-fond-bascule)) fixed; }
body { min-height: 100vh; font-size: 15px; line-height: 1.55; }

/* ─── LE BANDEAU D'EN-TÊTE ────────────────────────────────────────────────────
   Il est sur TOUTES les pages de contenu depuis le 2026-08-26 (demande
   utilisateur). Avant, « Comment jouer » était la seule à ne pas l'avoir : on y
   entrait depuis le menu et on ne pouvait plus aller nulle part — un cul-de-sac.
   Fait de la matière des PANNEAUX du jeu, pas d'un décor à lui. */
header.barre {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px clamp(16px, 4vw, 28px);
  background: var(--af-panneau); border-bottom: 1px solid var(--af-panneau-bord);
  backdrop-filter: blur(6px);
}
/* La MARQUE en CRÈME — variante L du 2026-08-02 : elle a été en menthe, mais la
   menthe était à 7° du vert du bouton JOUER. Le vert reste le signal unique de
   ce qui se clique. */
header .marque {
  font-family: 'Baloo 2', system-ui, sans-serif; font-size: 15px; font-weight: 700;
  letter-spacing: 1.4px; color: var(--af-texte); text-decoration: none;
}
header nav { display: flex; flex-wrap: wrap; gap: clamp(9px, 2.2vw, 18px); font-size: 11px; letter-spacing: 1.1px; }
header nav a { color: var(--af-texte-attenue); text-decoration: none; }
header nav a:hover { color: var(--af-texte); }
header nav a[aria-current] { color: var(--af-marque); border-bottom: 1px solid var(--af-marque); padding-bottom: 2px; }
/* « JOUER » est un RETOUR, pas une nouvelle partie : il ramène à l'onglet du jeu
   resté ouvert (voir le script du gabarit). D'où le vert d'action, qui le
   distingue des autres entrées. */
header nav a.jouer { color: var(--af-action-clair); font-weight: 700; }
header nav a.jouer:hover { color: var(--af-action-clair); text-decoration: underline; }

/* ─── LE TEXTE ─────────────────────────────────────────────────────────────── */
main { max-width: 760px; margin: 0 auto; padding: 32px 20px 20px; }
/* ESSAI « palette vitrine » (2026-08-27, demande utilisateur) : trois niveaux de
   titre au lieu d'un seul blanc — « c'est un peu dur de distinguer les titres et
   les sous-titres ». Valeur d'avant pour les trois : `var(--af-texte)`. */
h1 { font-size: 26px; margin-bottom: 4px; color: var(--af-titre); }
/* ⚠️ CAPITALES (2026-08-02, 3e passe) : la taille seule ne détachait pas un titre
   du corps du texte. Les capitales changent la SILHOUETTE du mot — on reconnaît
   un titre avant même de le lire. C'est un `text-transform`, donc de la mise en
   forme : les libellés du catalogue gardent leurs minuscules et restent lisibles
   par les moteurs de recherche et les lecteurs d'écran. */
h2 { font-size: 21px; margin: 28px 0 8px; color: var(--af-sous-titre);
     text-transform: uppercase; letter-spacing: 1.1px;
     display: flex; align-items: center; gap: 10px; }
h3 { font-size: 17px; margin: 22px 0 6px; color: var(--af-texte); }
p, li { color: var(--af-texte); }
p { margin: 0 0 12px; }
ul { padding-left: 22px; margin: 6px 0 12px; }
li { margin: 3px 0; }
strong { font-weight: 700; }
hr { border: none; border-top: 1px solid var(--af-panneau-bord); margin: 26px 0; }
code, kbd { background: color-mix(in srgb, var(--af-texte) 12%, transparent);
            border: 1px solid var(--af-panneau-bord); border-radius: 6px; padding: 1px 6px; }
kbd { font-weight: 700; font-size: 13px; }
code { font-size: .92em; }
/* LES LIENS — variante J (2026-08-02). Ils étaient au vert d'ACTION, c'est-à-dire
   la couleur du bouton dominant, pour quelque chose qui n'est pas un bouton. Ils
   prennent la MARQUE, et un soulignement : la couleur attire, le trait PROUVE que
   c'est un lien — y compris pour qui perçoit mal la teinte. */
a { color: var(--af-marque); text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--af-marque) 45%, transparent);
    text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--af-marque); }

/* ─── PANNEAU ─────────────────────────────────────────────────────────────── */
.panel, .panneau {
  background: var(--af-panneau); border: 1px solid var(--af-panneau-bord);
  border-radius: var(--af-rayon-carte); padding: 18px 22px; margin-top: 18px;
}
.note { margin-top: 10px; font-size: 13px; color: var(--af-texte-attenue); }

/* ─── FAQ : accordéon natif, zéro JavaScript ──────────────────────────────── */
details.q { border-bottom: 1px solid var(--af-panneau-bord); padding: 12px 0; }
details.q summary { cursor: pointer; color: var(--af-texte); font-weight: 700;
                    list-style: none; display: flex; gap: 10px; }
details.q summary::-webkit-details-marker { display: none; }
details.q summary::before { content: "+"; color: var(--af-marque); font-weight: 700; }
details.q[open] summary::before { content: "\2212"; }
details.q p { margin: 10px 0 2px 22px; color: var(--af-texte-attenue); }

/* ─── LE PIED ──────────────────────────────────────────────────────────────
   Il ne porte plus QUE l'obligation légale (décision utilisateur 2026-08-26) :
   mentions légales, confidentialité, CGU. Tout le reste est monté dans le
   bandeau. Le pied sert la loi, le bandeau sert la découverte. */
footer { max-width: 760px; margin: 0 auto; padding: 22px 20px 46px;
         border-top: 1px solid var(--af-panneau-bord);
         display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
         font-size: 12px; color: var(--af-texte-attenue); }
footer nav { display: flex; flex-wrap: wrap; gap: 14px; }
footer a { color: var(--af-texte-attenue);
           text-decoration-color: color-mix(in srgb, var(--af-texte-attenue) 45%, transparent); }

/* ─── LE FORMULAIRE DE CONTACT ─────────────────────────────────────────────
   Il reprend le bouton du jeu : vert d'action, ombre plate, texte sombre —
   les mêmes jetons que `.btn3d` du menu, sans son relief animé (une page
   statique n'a pas de moteur de rendu). */
form.formulaire { display: flex; flex-direction: column; gap: 4px; }
form.formulaire label { font-size: 13px; color: var(--af-texte-attenue); margin-top: 12px; }
form.formulaire input[type="email"], form.formulaire textarea {
  font: inherit; color: var(--af-texte);
  background: color-mix(in srgb, var(--af-texte) 7%, transparent);
  border: 1px solid var(--af-panneau-bord); border-radius: var(--af-rayon-carte);
  padding: 9px 12px; width: 100%; resize: vertical;
}
form.formulaire input[type="email"]:focus, form.formulaire textarea:focus {
  outline: none; border-color: var(--af-marque);
}
form.formulaire button {
  font: inherit; font-weight: 700; cursor: pointer; align-self: flex-start;
  margin-top: 16px; padding: 10px 24px; border: none;
  border-radius: var(--af-rayon-carte);
  background: var(--af-action); color: var(--af-action-texte);
  box-shadow: 0 4px 0 var(--af-action-relief);
}
form.formulaire button:hover:not(:disabled) { background: var(--af-action-clair); }
form.formulaire button:disabled { opacity: .55; cursor: default; box-shadow: none; }
/* ⚠️ LE CHAMP-PIÈGE. Sorti de l'écran, PAS `display:none` : une partie des robots
   saute ce qui est explicitement masqué, mais remplit ce qu'ils trouvent dans le
   flux. Il reste lisible par un lecteur d'écran, d'où son libellé qui a du sens. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.etat { margin-top: 12px; font-size: 13px; color: var(--af-texte-attenue); min-height: 1.2em; }
.etat.ok { color: var(--af-action-clair); font-weight: 700; }

/* ─── LE BANDEAU DES PAGES LÉGALES ─────────────────────────────────────────
   Mentions légales, confidentialité et CGU ne portent PAS la navigation (elles
   sont des feuilles, pas des carrefours) mais elles portent le « Retour », et
   il est EN HAUT À GAUCHE, collant (demande utilisateur 2026-08-26). Raison :
   ces pages sont longues — la politique de confidentialité fait plus de 400
   lignes — et l'issue ne doit pas se mériter en faisant défiler jusqu'en bas.
   Celui du bas reste : arrivé à la fin d'un texte, on ne veut pas remonter. */
header .retour { color: var(--af-texte); text-decoration: none; font-weight: 700; font-size: 13px; }
header .retour:hover { color: var(--af-marque); }

/* ─── LE SOMMAIRE LATÉRAL (journal) ────────────────────────────────────────
   Demandé le 2026-08-26 : le journal est long, et un texte long sans plan se
   parcourt mal. Il est BÂTI depuis les titres de la page — il ne peut donc pas
   se désynchroniser d'elle, et une section ajoutée y entre toute seule.
   ⚠️ La bascule en deux colonnes tient à `:has()`. Si un navigateur ne le
   connaît pas, la règle est ignorée et le sommaire se pose simplement AU-DESSUS
   du texte : toujours utilisable, jamais cassé. C'est le repli qu'on veut. */
.page:has(.sommaire) {
  display: grid; grid-template-columns: 220px minmax(0, 760px);
  gap: 34px; justify-content: center; align-items: start;
}
.page:has(.sommaire) main { margin: 0; }
.sommaire {
  display: flex; flex-direction: column; gap: 2px;
  padding: 32px 4px 20px 20px; font-size: 13px; line-height: 1.4;
  /* Collant SOUS le bandeau : il reste sous la main pendant toute la lecture. */
  position: sticky; top: 56px; align-self: start;
  max-height: calc(100vh - 72px); overflow-y: auto;
}
.sommaire-titre { text-transform: uppercase; letter-spacing: 1.1px; font-size: 11px;
                  color: var(--af-texte-attenue); margin: 0 0 8px; }
.sommaire a { color: var(--af-texte-attenue); text-decoration: none;
              padding: 5px 10px; border-left: 2px solid var(--af-panneau-bord); }
.sommaire a:hover { color: var(--af-texte); border-left-color: var(--af-marque); }
/* La section VISÉE par l'ancre se marque : on sait où l'on vient d'atterrir. */
.sommaire a:target, .sommaire a:focus { color: var(--af-marque); }
/* Le bandeau est collant : sans ce décalage, une ancre poserait le titre DESSOUS. */
main h2 { scroll-margin-top: 62px; }
/* Sous 1080 px, la colonne latérale n'a plus la place : le sommaire redevient un
   plan pose en tete du texte, ce qui reste sa fonction. */
@media (max-width: 1080px) {
  .page:has(.sommaire) { display: block; }
  .sommaire { position: static; max-height: none; padding: 28px 20px 0;
              max-width: 760px; margin: 0 auto; }
  .sommaire a { border-left: none; border-top: 1px solid var(--af-panneau-bord); }
}