/* ADVENTWARD — la carte et la voix (direction retenue le 22-09 : « B avec le côté
   voix de C »). Le papier d'une carte de région pour le monde ; l'onde gravée
   pour la parole. Une loi de couleur tient les deux : ROUGE = ce que fait le
   joueur (son trajet, sa voix), ENCRE = le monde qui répond. */
:root {
  --papier: #e7e1d2;
  --papier-clair: #f1ece0;
  --encre: #1e2a30;
  --encre-douce: #5b6670;
  --trait: #b6ae9a;
  --eau: #3d7a8a;
  --eau-pale: #a9c6cc;
  --rouge: #b3361f;
  /* les couleurs du jeu lui-meme : le fond sur lequel les figurines sont
     rendues, et les terrains de la carte de combat */
  --nuit: #2a2a35;
  --nuit-claire: #353543;
  --herbe: #8ba06a;
  --bois: #5f7a4d;
  --or: #d9a441;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Karla", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
/* ⚠️ Sans ceci, `element.hidden = true` est sans effet dès qu'une classe pose
   un `display` — c'est ce qui laissait les vignettes sous le carrousel. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papier); color: var(--encre);
  font: 400 1.125rem/1.7 var(--serif); font-optical-sizing: auto;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }
.cadre { max-width: 76rem; margin: 0 auto; padding: 0 1.25rem; }

/* bandeau de chantier — il part le jour où les tours sont de vrais enregistrements */
.chantier { background: var(--encre); color: var(--papier); font: 400 .9rem/1.5 var(--sans); padding: .55rem 1.25rem; }

.entete { display: flex; justify-content: space-between; align-items: baseline; padding-top: 1rem; }   /* les côtés : ceux de .cadre */
.marque { font: 500 1.5rem/1 var(--serif); font-style: italic; text-decoration: none; letter-spacing: .01em; }
.outils { display: flex; align-items: center; gap: 1.5rem; }
.langues { font-family: var(--sans); }
.bouton-jouer { padding: .6rem 1.2rem; background: var(--rouge); }
.bouton-jouer:hover { background: #c94429; }
.langues button { font: 400 .95rem var(--sans); background: none; border: 0; color: var(--encre-douce); cursor: pointer; margin-left: 1rem; padding: .2rem 0; border-bottom: 1px solid transparent; }
.langues button[aria-pressed="true"] { color: var(--encre); border-bottom-color: var(--rouge); }

/* ── L'oscilloscope, en haut de page ────────────────────────────────────── */
/* Une onde radio À L'ANCIENNE : un tube, sa grille, une trace verte et sa
   rémanence — les deux tracés pâles qui la suivent s'effacent derrière elle.
   Chaque courbe est périodique sur la largeur : le défilement boucle sans saut. */
.bandeau-voix { max-width: 76rem; margin: .5rem auto .2rem; padding: 0 1.25rem; }
.radio { display: block; width: 100%; height: 4.2rem; border: 2px solid #1a2a20;
  border-radius: 3px; overflow: hidden; }
.radio .ecran { fill: #0d1a12; }
.radio .axe { stroke: #2f6a4a; stroke-width: 1; opacity: .6; }
.radio .tr { fill: none; stroke-linecap: round; stroke: #5dfc9a; }
.radio .vive { stroke-width: 3.2; filter: drop-shadow(0 0 3px #5dfc9a); }
.radio .r1 { stroke-width: 2.4; opacity: .38; }
.radio .r2 { stroke-width: 2; opacity: .17; }
@media (prefers-reduced-motion: no-preference) {
  .radio .tr { animation: defiler 9s linear infinite; }
  @keyframes defiler { to { transform: translateX(-600px); } }
}
@media (max-width: 62rem) { .radio { height: 3rem; } }

/* ── LA CARTE, et le cartouche posé dessus ───────────────────────────────── */
h1 { font: 300 clamp(2rem, 3.6vw, 3rem)/1.06 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.02em; margin: 0 0 .7rem; }
h1 i { font-weight: 400; }

.bouton { display: inline-block; font: 600 1rem var(--sans); background: var(--encre); color: var(--papier); text-decoration: none; padding: .85rem 1.4rem; border: 0; border-radius: 0; cursor: pointer; }
.bouton:hover { background: #0e161b; }
.bouton[disabled] { background: var(--encre-douce); cursor: default; }

/* ── LA VOIX : l'onde gravée, et le tour qu'elle porte ───────────────────── */
.voix { border-top: 1px solid var(--encre); margin-top: 1.6rem; padding: 2.1rem 0 2.3rem; }
.voix h2 { font: 400 clamp(1.7rem, 3.2vw, 2.3rem)/1.15 var(--serif); margin: 0 0 .4rem; max-width: 24em; }
.voix .sous { color: var(--encre-douce); margin: 0 0 1.4rem; max-width: 34em; }
.onde { width: 100%; height: auto; display: block; }
.onde .b { fill: var(--encre); }
.onde .toi { fill: var(--rouge); }
.onde .vide { fill: var(--trait); }
/* Pendant la lecture, ce qui n'est pas encore passe attend en retrait. Hors
   lecture, tout est plein : une onde qui n'existe que pendant son animation
   serait invisible partout ou elle ne tourne pas. */
.onde.lit .b { opacity: .22; transition: opacity .12s linear; }
.onde.lit .b.passe { opacity: 1; }
.onde .tete { fill: var(--rouge); opacity: 0; }
.onde.lit .tete { opacity: .75; }
.commande { grid-column: 1 / -1; margin-top: .4rem; }
.rejouer { font: 500 .95rem var(--sans); background: none; border: 0; color: var(--encre-douce);
  cursor: pointer; padding: .3rem 0; border-bottom: 1px solid var(--trait); }
.rejouer:hover { color: var(--encre); border-bottom-color: var(--rouge); }
.rejouer[disabled] { color: var(--trait); border-bottom-color: transparent; cursor: default; }
.reperes { display: grid; grid-template-columns: 34.7% auto; font: 500 .85rem/1.4 var(--sans); color: var(--encre-douce); margin-top: .5rem; }
.reperes span { border-top: 1px solid var(--trait); padding-top: .4rem; }
.reperes span:first-child { color: var(--rouge); }

.repliques { display: grid; gap: 1.2rem; margin-top: 1.4rem; }
@media (min-width: 46rem) { .repliques { grid-template-columns: 25% 1fr; gap: 3rem; } }
.qui { font: 500 .85rem/1.4 var(--sans); color: var(--encre-douce); margin-bottom: .3rem; }
.toi-dit { font-style: italic; font-size: 1.3rem; margin: 0; color: var(--rouge); }
.lui-dit { font-size: 1.15rem; margin: 0; min-height: 3.4em; max-width: 36em; }
.lui-dit .mot { opacity: .18; transition: opacity .35s ease-out; }
.lui-dit .mot.dit { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lui-dit .mot { opacity: 1; transition: none; } }

/* ── LE MAITRE DU JEU T'ACCUEILLE ───────────────────────────────────────── */
/* Une bande chaude entre la carte et la voix : c'est l'invitation. */
.hote { margin: 0; position: relative; }
.hote::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 2%; height: .9rem;
  background: radial-gradient(ellipse at center, rgba(30,42,48,.28), transparent 70%); }
.hote img { display: block; width: 100%; height: auto; margin: 0 auto; }
.hote3d { width: 100%; }
.hote3d canvas { display: block; width: 100% !important; height: auto !important; }
.hote3d:not(:empty) + img { display: none; }
.echange { border-left: 3px solid var(--rouge); padding-left: .9rem; margin: 0; }
.echange p { margin: 0 0 .5rem; font-size: .98rem; line-height: 1.45; }
.echange .qui { display: block; font: 500 .82rem var(--sans); color: var(--encre-douce); margin-bottom: .1rem; }
.echange .toi span:last-child { font-style: italic; color: var(--rouge); }

/* ── CE QU'ON FAIT DANS LE JEU ──────────────────────────────────────────── */
.themes { border-top: 1px solid var(--encre); padding: 2.1rem 0 2.3rem; }
.themes h2 { font: 400 clamp(1.7rem, 3.2vw, 2.3rem)/1.15 var(--serif); margin: 0 0 .4rem; }
.themes .sous { color: var(--encre-douce); margin: 0 0 1.4rem; max-width: 42em; }
.six { display: grid; gap: 1.2rem; }
@media (min-width: 40rem) { .six { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .six { grid-template-columns: repeat(3, 1fr); } }
.theme { border: 1px solid var(--trait); padding: 0 0 1.3rem; background: var(--papier-clair); }
.theme-image { height: 8.5rem; display: flex; align-items: flex-end; justify-content: center;
  padding: .8rem .8rem 0; margin-bottom: 1rem; }
.theme-image img { max-height: 100%; width: auto; }
.theme-image svg { height: 7rem; width: auto; }
.vignette .t { fill: none; stroke: #7a5a34; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.vignette .t.f { fill: #efe6d2; }
.vignette .t.b { fill: #c9a97a; }
.vignette .t.s { fill: #c9724f; }
.vignette .h { fill: none; stroke: #a98a5e; stroke-width: 1; opacity: .6; }
.vignette .et path { fill: none; stroke: var(--or); stroke-width: 2; stroke-linecap: round; }
.vignette .volute path { fill: none; stroke: #6a5a93; stroke-width: 2; stroke-linecap: round; }
.vignette .et2 { fill: #6a5a93; }
.vignette .fl { fill: #c9724f; stroke: #8a3a1e; stroke-width: 1.6; }
.vignette .fl2 { fill: #e8b34a; stroke: none; }
.vignette .e { fill: none; stroke: var(--eau); stroke-width: 2; stroke-linecap: round; }
.vignette .neige circle { fill: #9fb6c8; }
.theme h3 { font: 400 1.45rem/1.2 var(--serif); margin: 0 .35rem .4rem 1.2rem; }
.theme p { margin: 0 1.2rem .8rem; font-size: 1rem; color: var(--encre-douce); }
.theme .extrait { font-style: italic; color: var(--rouge); font-size: 1.02rem; margin-bottom: 0; }
/* chaque thème a sa teinte : le fond du visuel, et le filet du haut */
.t-enquete  { border-top: 3px solid #3d7a8a; } .t-enquete .theme-image  { background: #dbe4e2; }
.t-craft    { border-top: 3px solid #a8641f; } .t-craft .theme-image    { background: #e7dcc6; }
.t-magie    { border-top: 3px solid #6a5a93; } .t-magie .theme-image    { background: #e0dce8; }
.t-monstres { border-top: 3px solid var(--rouge); } .t-monstres .theme-image { background: #e5dbd2; }
.t-mer { border-top: 3px solid #2f6f7e; } .t-mer .theme-image { background: #dae6e8; }
.t-survie { border-top: 3px solid #8a6a3a; } .t-survie .theme-image { background: #e9e2d3; }
.t-craft .metal { fill: #5d5a55; } .t-craft .bois { fill: #8a5a2b; }
.t-craft .etincelle path { stroke: #d9a441; stroke-width: 3; stroke-linecap: round; fill: none; }

/* ── L'OUVERTURE : le titre, l'hôte et le monde, d'un seul tenant ───────── */
.ouverture { background: var(--papier); }
.ouverture-corps { display: grid; gap: 1.6rem; padding: 1rem 1.25rem 1.6rem; align-items: start; }
@media (min-width: 62rem) { .ouverture-corps { grid-template-columns: 27rem 1fr; gap: 2.6rem; } }
.parole { max-width: 34rem; }
.chapeau { font-size: 1.1rem; line-height: 1.5; margin: 0 0 1.2rem; }
.note-ouverture { font: 400 .98rem/1.5 var(--sans); color: var(--encre-douce); margin: .9rem 0 0; max-width: 30em; }
.table-de-jeu { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: center;
  background: #e8dcc2; padding: .9rem 1rem; margin: 0 0 1.2rem; }
.monde svg { display: block; width: 100%; height: auto; }
.monde svg.petite { display: none; }
@media (max-width: 62rem) {
  .monde svg.grande { display: none; }
  .monde svg.petite { display: block; }
}

/* ── LE COMBAT : la carte, et le de ─────────────────────────────────────── */
/* Une bande SOMBRE au milieu du papier : c'est l'ecran du jeu, et c'est la que
   les figurines sont rendues. Le contraste fait le travail, pas un cadre. */
.combat { background: var(--nuit); color: var(--papier); padding: 2.2rem 0 2.4rem; }
.combat h2 { font: 400 clamp(1.8rem, 3.4vw, 2.4rem)/1.15 var(--serif); margin: 0 0 .4rem; }
.combat .sous { color: #b9b3a6; margin: 0 0 1.4rem; max-width: 40em; }
.combat-corps { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 58rem) { .combat-corps { grid-template-columns: 1.45fr 1fr; gap: 3.5rem; } }

.plateau-cadre { margin: 0; }
.plateau { display: block; width: 100%; height: auto; }
.plateau .case { transition: none; }
.plateau .portee { fill: none; stroke: var(--or); stroke-width: 2.5; stroke-dasharray: 7 6; opacity: .85; }
.plateau .cible { fill: none; stroke: var(--rouge); stroke-width: 4; }
.plateau .vue { stroke: var(--rouge); stroke-width: 2; stroke-dasharray: 3 7; opacity: .8; }
.plateau .ombre { fill: #000; opacity: .32; }
.plateau .pion { image-rendering: auto; }
.plateau .decor { opacity: .96; }
.scene3d { width: 100%; }
.scene3d canvas { display: block; width: 100% !important; height: auto !important; background: var(--nuit); }
.plateau-cadre.en3d .plateau { display: none; }
.poids { color: #8d8879; font: 400 .82rem var(--sans); }
.plateau-cadre figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.6rem; margin-top: .9rem;
  font: 500 .88rem var(--sans); color: #b9b3a6; }
.clef::before { content: ""; display: inline-block; width: 1.1rem; height: 0; vertical-align: .25em;
  margin-right: .45rem; border-top: 3px solid currentColor; }
.clef-portee { color: var(--or); }
.clef-cible { color: #e0705a; }

.jet { text-align: left; }
.de { width: 6.4rem; height: 6.4rem; display: block; margin: 0 0 .8rem; }
.de .f { fill: #7d2416; }
.de .f2 { fill: #93301f; }
.de .f3 { fill: #6a1d11; }
.de .arete { fill: none; stroke: #e6d6b8; stroke-width: 2.5; stroke-linejoin: round; }
.de-valeur { font: 700 2.6rem var(--sans); fill: #f3e7cf; }
.de.pose { display: none; }
.de.roule .de-corps { animation: rouler .75s cubic-bezier(.3,.8,.4,1); transform-origin: 60px 60px; }
@keyframes rouler { 0% { transform: rotate(0) scale(.82); } 55% { transform: rotate(420deg) scale(1.08); }
                    100% { transform: rotate(720deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .de.roule .de-corps { animation: none; } }
.calcul { display: grid; gap: .3rem; font-family: var(--sans); margin: 0 0 1.1rem; max-width: 22rem; }
.calcul .ligne { display: flex; justify-content: space-between; gap: 1rem; color: #b9b3a6; font-size: 1rem; }
.calcul b { color: var(--papier); font-weight: 600; font-variant-numeric: tabular-nums; }
.calcul .total { border-top: 1px solid #4a4a58; padding-top: .35rem; margin-top: .2rem; }
.verdict { font: 400 1.18rem/1.4 var(--serif); margin: 0 0 .9rem; max-width: 22rem; }
.verdict.rate { color: #b9b3a6; }
.recit { font: 400 1.05rem/1.45 var(--serif); color: #cfc8b8; margin: 0 0 1rem; max-width: 24rem;
  min-height: 3.2em; border-left: 2px solid #4a4a58; padding-left: .9rem; }
.recit.toi { font-style: italic; color: #e0705a; border-left-color: var(--rouge); }
.commandes { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
.bouton-scene { background: var(--rouge); color: var(--papier); }
.bouton-scene:hover { background: #c94429; }
.bouton-scene[disabled] { background: #5a4a46; }
.combat .rejouer { color: #b9b3a6; border-bottom-color: #4a4a58; }
.combat .rejouer:hover { color: var(--papier); border-bottom-color: var(--rouge); }

/* ── LES FIGURINES ──────────────────────────────────────────────────────── */
.figurines { border-top: 1px solid var(--encre); padding: 2.1rem 0 2.2rem; }
.figurines h2 { font: 400 clamp(1.7rem, 3.2vw, 2.3rem)/1.15 var(--serif); margin: 0 0 .4rem; }
.figurines .sous { color: var(--encre-douce); margin: 0 0 1rem; max-width: 40em; }

/* ── Ce qu'on joue ───────────────────────────────────────────────────────── */
.campagnes { border-top: 1px solid var(--encre); padding: 2.1rem 0 2.3rem; }
.campagnes h2 { font: 400 clamp(1.7rem, 3.2vw, 2.3rem)/1.15 var(--serif); margin: 0 0 .4rem; }

.trois-campagnes { display: grid; gap: 2rem; }
@media (min-width: 46rem) { .trois-campagnes { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.trois-campagnes article { border-top: 2px solid var(--rouge); padding-top: .9rem; }
.trois-campagnes h3 { font: 400 1.5rem/1.2 var(--serif); margin: 0 0 .15rem; }
.trois-campagnes .duree { font: 500 .85rem var(--sans); color: var(--encre-douce); margin: 0 0 .7rem; }
.trois-campagnes p:last-child { margin: 0; font-size: 1.05rem; }

/* ── Ce que ca coute ─────────────────────────────────────────────────────── */
/* Trois paliers cote a cote, UNE duree montree a la fois (le choix en haut), l'essai en bande dessous.
   Ce qui est commun aux trois offres se dit une fois, sous elles : dans une colonne ne reste que ce
   qui la distingue. Les couleurs passent par des variables : la page de nuit les redefinit. */
.tarifs { --t-fond: var(--papier-clair); --t-texte: var(--encre); --t-doux: var(--encre-douce);
  --t-trait: var(--trait); --t-feu: #94560f; --t-lueur: rgba(217, 164, 65, .28);
  border-top: 1px solid var(--encre); padding: 2.1rem 0 2.3rem; color: var(--t-texte); }
.tarifs h2 { font: 400 2rem/1.15 var(--serif); margin: 0 0 .4rem; }
.tarifs .sous { color: var(--t-doux); margin: 0 0 1.2rem; max-width: 40em; }
.grille { display: grid; gap: 1.5rem; }
@media (min-width: 46rem) { .grille { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

/* Le choix de la duree : trois radios (caches, mais au clavier) et leurs etiquettes. */
.duree-choix { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.durees { display: inline-flex; border: 1px solid var(--t-trait); margin: 0 0 1.2rem; font: 500 .98rem var(--sans); }
.durees label { padding: .55rem 1.15rem; cursor: pointer; color: var(--t-doux); }
.durees label + label { border-left: 1px solid var(--t-trait); }
.durees label:hover { color: var(--t-texte); }
#duree-mensuel:checked ~ .durees label[for="duree-mensuel"],
#duree-trimestriel:checked ~ .durees label[for="duree-trimestriel"],
#duree-annuel:checked ~ .durees label[for="duree-annuel"] { background: var(--t-texte); color: var(--t-fond); }
#duree-mensuel:focus-visible ~ .durees label[for="duree-mensuel"],
#duree-trimestriel:focus-visible ~ .durees label[for="duree-trimestriel"],
#duree-annuel:focus-visible ~ .durees label[for="duree-annuel"] { outline: 2px solid var(--rouge); outline-offset: 3px; }

.paliers { display: grid; gap: 1rem; }
@media (min-width: 50rem) { .paliers { grid-template-columns: repeat(3, 1fr); } }
.palier { display: flex; flex-direction: column; border: 1px solid var(--t-trait); background: var(--t-fond);
  padding: 1.25rem 1.3rem 1.35rem; }
/* L'offre mise en avant est celle qu'eclaire la torche : meme lueur que sur la carte. */
.palier.mise-en-avant { border-color: var(--t-feu);
  background: radial-gradient(ellipse 130% 75% at 50% 0%, var(--t-lueur), transparent 72%), var(--t-fond); }
.palier h3 { font: 400 1.6rem/1.2 var(--serif); margin: 0 0 .15rem; }
.palier .temps { font: 500 1rem/1.4 var(--sans); color: var(--t-feu); margin: 0 0 1.3rem; }
.formule { display: none; margin-top: auto; }
#duree-mensuel:checked ~ .paliers .pour-mensuel,
#duree-trimestriel:checked ~ .paliers .pour-trimestriel,
#duree-annuel:checked ~ .paliers .pour-annuel { display: block; }
.prix { margin: 0; font-family: var(--sans); }
.montant { font: 400 2.7rem/1 var(--serif); font-variant-numeric: lining-nums; letter-spacing: -.01em; color: var(--t-texte); }
.par { color: var(--t-doux); font-size: .95rem; margin-left: .3rem; }
.regle { font: 400 .92rem/1.45 var(--sans); color: var(--t-doux); margin: .4rem 0 0; }
/* Cote a cote, les trois boutons restent alignes quelle que soit la duree ; empilees, pas de vide. */
@media (min-width: 50rem) { .regle { min-height: 2.9em; } }
.regle .economie { display: block; color: var(--t-feu); font-weight: 600; }
.formule .bouton-choix { display: block; width: 100%; margin-top: .9rem; padding: .8rem 1rem; font-size: 1rem; text-align: center; }
.palier.mise-en-avant .bouton-choix { background: var(--rouge); color: var(--papier); }
.palier.mise-en-avant .bouton-choix:hover { background: #c94429; }

.commun { font: 400 .95rem/1.5 var(--sans); color: var(--t-doux); margin: 1rem 0 0; }
.commun-titre { color: var(--t-texte); font-weight: 600; margin-right: .5rem; }
.commun-titre::after { content: " :"; }
.essai-bande { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin-top: 1rem;
  border: 1px dashed var(--t-trait); padding: .85rem 1.3rem; }
.essai-bande h3 { font: 400 1.3rem/1.2 var(--serif); margin: 0; }
.essai-bande .essai-prix { color: var(--t-feu); font-style: italic; }
.essai-bande p { flex: 1 1 18rem; margin: 0; font: 400 .95rem/1.45 var(--sans); color: var(--t-doux); }
.essai-bande .bouton-choix { margin-top: 0; align-self: center; }
.tarifs .note { margin-top: 1.1rem; max-width: 62em; font: 400 .85rem/1.5 var(--sans); color: var(--t-doux); }

/* la vitrine : une bande de sculptures qui tournent */
/* le carrousel : deux flèches qui n'apparaissent que si la 3D est là */
.carrousel { position: relative; max-width: 26rem; margin: 0 auto; }
.fleche { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  font: 400 2rem/1 var(--sans); width: 2.6rem; height: 2.6rem; border: 1px solid var(--trait);
  background: var(--papier-clair); color: var(--encre-douce); cursor: pointer; border-radius: 50%; }
.fleche:hover { color: var(--encre); border-color: var(--encre); }
.fleche-g { left: 0; } .fleche-d { right: 0; }
.carrousel.vivant .fleche { display: block; }
.vitrine3d { width: 100%; }
.vitrine3d canvas { display: block; width: 100% !important; height: auto !important; }
.vitrine3d:empty { min-height: 0; }
/* le repli : la même rangée, en images, tant que les sculptures ne sont pas là */
.vitrine-plate { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
@media (min-width: 46rem) { .vitrine-plate { grid-template-columns: repeat(6, 1fr); gap: 1rem; } }
.vitrine-plate img { display: block; width: 100%; height: 8.5rem; object-fit: contain;
  background: var(--nuit); border: 1px solid var(--nuit-claire); }

/* choisir un scénario : une image, un titre, une phrase — rien de plus */
.trois-campagnes { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .trois-campagnes { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } }
.scenario { display: block; text-decoration: none; border: 1px solid var(--trait);
  background: var(--papier-clair); padding: 0 0 1rem; }
.scenario:hover { border-color: var(--encre); }
.scenario img { display: block; width: 100%; height: 8.5rem; object-fit: contain;
  background: #f1ece0; padding: .6rem 0 .2rem; }
.scenario h3 { font: 400 1.4rem/1.15 var(--serif); margin: .7rem 1rem .1rem; }
.scenario .duree { font: 500 .8rem var(--sans); color: var(--rouge); margin: 0 1rem .4rem; }
.scenario p:last-child { margin: 0 1rem; font-size: 1rem; color: var(--encre-douce); }

/* ── Trois faits ─────────────────────────────────────────────────────────── */
.faits { border-top: 1px solid var(--encre); padding: 2.1rem 0 2.2rem; display: grid; gap: 2.2rem; }
@media (min-width: 46rem) { .faits { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.fait h2 { font: 400 1.6rem/1.2 var(--serif); margin: 0 0 .5rem; }
.fait p { margin: 0; color: var(--encre-douce); font-size: 1.05rem; max-width: 34em; }

/* ── Pour jouer + la liste ───────────────────────────────────────────────── */
.bas { border-top: 1px solid var(--encre); padding: 2.2rem 0 2.6rem; display: grid; gap: 3rem; }
@media (min-width: 46rem) { .bas { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.bas h2 { font: 400 2rem/1.15 var(--serif); margin: 0 0 1rem; }
.bas ol { padding-left: 1.2em; margin: 0 0 1rem; max-width: 34em; }
.bas li { margin-bottom: .5rem; padding-left: .3em; }
.bas li::marker { color: var(--rouge); }
.note { color: var(--encre-douce); font-size: 1rem; max-width: 34em; }
form { display: grid; gap: .35rem; max-width: 26rem; font-family: var(--sans); }
label { font-size: .95rem; margin-top: .8rem; color: var(--encre-douce); }
input, select { font: 400 1.05rem var(--sans); background: var(--papier-clair); color: var(--encre); border: 1px solid #b5ad9a; border-radius: 0; padding: .7rem .8rem; }
form .bouton { margin-top: 1.2rem; justify-self: start; }
.retour { font: 400 1rem/1.5 var(--sans); min-height: 3em; margin: .8rem 0 0; color: var(--encre-douce); }
.retour.erreur { color: var(--rouge); }

.pied { border-top: 1px solid var(--encre); padding-top: 1.5rem; padding-bottom: 2.2rem; font: 400 .95rem var(--sans); color: var(--encre-douce); display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.pied a { text-decoration: none; }
.pied .age { margin-left: auto; }

/* ── L'alternance des fonds ─────────────────────────────────────────────── */
.bande { background: var(--papier); }
.bande-claire { background: #d7e0da; }            /* vert-de-gris : les cartes et l'eau */
.bande-chaude { background: #e8dcc2; }            /* le parchemin chaud */
.bande-sombre { background: var(--nuit); color: var(--papier); }
.bande-sombre h2 { color: var(--papier); }
.bande-sombre .sous, .bande-sombre .poids { color: #b9b3a6; }
.bande > .cadre { padding-top: 2.1rem; padding-bottom: 2.3rem; }
/* la section porte maintenant le fond ; son contenu garde le rythme, pas le filet */
.figurines, .themes, .campagnes, .tarifs, .bas { border-top: 0; padding-top: 0; padding-bottom: 0; }

/* ── Pages de texte (confidentialité, conditions) ────────────────────────── */
.page { padding-top: 2.5rem; padding-bottom: 4rem; }
.page > * { max-width: 42rem; }
.page h1 { font-size: clamp(2.2rem, 4.5vw, 3rem); margin-bottom: 1.2rem; }
.page h2 { font: 400 1.5rem/1.2 var(--serif); margin: 2.4rem 0 .5rem; }
.page p { margin: 0 0 1rem; }
.brouillon { font: 400 1rem/1.6 var(--sans); border-left: 3px solid var(--rouge); padding: .2rem 0 .2rem 1rem; color: var(--encre-douce); }
.page ul { padding-left: 1.2em; margin: 0 0 1rem; }
.page li { margin-bottom: .45rem; padding-left: .3em; }
.page li::marker { color: var(--rouge); }
.page .bouton { margin-top: .5rem; }
.retour-accueil { font: 400 1rem var(--sans); color: var(--encre-douce); }
/* Le choix de la langue (six langues du jeu, décision user 28-09), en tête de chaque page. */
.entete-droite { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: .4rem 1rem; }
select.langue { font: 400 .95rem var(--sans); color: var(--encre-douce); background: transparent;
                border: 1px solid var(--encre-douce); border-radius: 3px; padding: .15rem .25rem; cursor: pointer; }

/* ── Le dessin de la carte ───────────────────────────────────────────────── */
.mer { fill: var(--eau-pale); opacity: .5; }
.contour { fill: none; stroke: #c5bda7; stroke-width: 1.4; }
.eau { fill: none; stroke: var(--eau); stroke-width: 3; stroke-linecap: round; }
.chemin { fill: none; stroke: #8f8874; stroke-width: 1.4; stroke-dasharray: 5 6; }
.bois { fill: none; stroke: #7f8f6a; stroke-width: 1.2; }
.lieu { font: italic 400 20px var(--serif); fill: var(--encre); }
.lieu.gros { font-size: 25px; font-style: normal; }
.lieu.eau-nom { fill: var(--eau); }
.lieu.pale { fill: var(--encre-douce); }
.point { fill: var(--encre); }
.trajet { fill: none; stroke: var(--rouge); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.rose { fill: none; stroke: var(--encre-douce); stroke-width: 1.2; }
.rose-n { font: 500 15px var(--sans); fill: var(--encre-douce); }
/* Les éléments ajoutés le 28-09 (« un port et d'autres éléments ») */
.vague { fill: none; stroke: var(--eau); stroke-width: 1.2; opacity: .35; }
.ile { fill: var(--papier-clair); stroke: #8f8874; stroke-width: 1.2; }
.route-mer { fill: none; stroke: var(--eau); stroke-width: 1.4; stroke-dasharray: 2 7; stroke-linecap: round; opacity: .7; }
.mont { fill: none; stroke: #8f8874; stroke-width: 1.4; stroke-linejoin: round; }
.marais { fill: none; stroke: #7f8f6a; stroke-width: 1.2; }
.lac { fill: var(--eau-pale); stroke: var(--eau); stroke-width: 1.5; opacity: .8; }
.quai { stroke: #5f5a4a; stroke-width: 3.5; stroke-linecap: round; }
.navire path { fill: #5f5a4a; }
.navire .mat { fill: none; stroke: #5f5a4a; stroke-width: 2; }
.phare path { fill: #8f8874; }
.feu-du-phare { fill: var(--or); }
.ruine { fill: #8f8874; }

/* Un trait qui n'existe QUE pendant son animation disparaît partout où elle ne
   tourne pas. L'état normal est donc le trajet PLEIN ; l'animation part de
   l'invisible et rend la main à cet état. */
@media (prefers-reduced-motion: no-preference) {
  /* ⚠️ Le pointillé est le MÊME aux deux bouts (1 = le trajet entier, `pathLength="1"`) ; seul le
     décalage glisse. Aller de « 1 » à « aucun pointillé » ne s'interpole pas : le navigateur BASCULAIT
     à mi-animation, le trajet se traçait à moitié puis se complétait d'un coup (vu par le user, 28-09). */
  .trajet { animation: tracer 3.2s ease-out .7s backwards; }
  @keyframes tracer { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
  .onde .b { animation: lever .5s ease-out backwards; animation-delay: calc(var(--i) * 14ms); transform-origin: center; }
  @keyframes lever { from { transform: scaleY(.06); opacity: 0; } }
}

/* ── Téléphone. ⚠️ Ce bloc est le DERNIER de la feuille : à spécificité égale,
   la dernière règle gagne, et un media query placé plus haut ne s'applique pas. */
@media (max-width: 62rem) {
  .carte { display: flex; flex-direction: column; }
  .cartouche { position: static; order: -1; max-width: none; margin-bottom: 1.25rem; padding: 1.4rem 1.2rem 1.2rem; }
  .carte svg.grande { display: none; }
  .carte svg.petite { display: block; }
  /* Une carte de téléphone montre MOINS et plus gros : à 900 unités de dessin
     sur 350 px d'écran, un nom de 26 px n'en fait que 10. */
  .lieu { font-size: 40px; } .lieu.gros { font-size: 48px; }
  .second { display: none; }
  .eau { stroke-width: 5; } .contour { stroke-width: 2.5; } .trajet { stroke-width: 6; }
  .point { r: 9; }
  /* ⚠️ `preserveAspectRatio="none"` + `height:auto` écrase l'onde à 35 px de haut :
     sa hauteur se POSE. */
  .onde { height: 4.6rem; }
  .reperes { font-size: .72rem; }
}

/* ── Les comptes (lot 5c, 28-09) : choisir une offre, la connexion, « mon compte » ── */
.offre { display: flex; flex-direction: column; }
.offre ul { flex: 1; }
.bouton-choix { padding: .55rem .9rem; font-size: .95rem; margin-top: 1rem; align-self: flex-start; }
.bouton-discret { background: transparent; color: var(--encre); border: 1px solid var(--encre); margin: .5rem .5rem 0 0; }
.bouton-discret:hover { background: var(--papier-clair); }
.bouton-danger { background: var(--rouge); }
.bouton-danger:hover { background: #c94429; }
/* « Mon compte » présente les offres comme la page des prix (demande user 13-10) : trois paliers, la
   durée choisie en haut. Mêmes classes que la section des prix ; ici sans bordure ni marge de bande. */
.choix-offres { border-top: 0; padding: 0; --t-feu: #e9a44a; }
.choix-offres .palier.actuelle { border-color: var(--t-feu); }
.choix-offres .bouton-choix[disabled] { background: transparent; color: var(--t-feu); border: 1px solid var(--t-feu); cursor: default; }
/* La confirmation d'un changement d'offre : ce qui sera prélevé, dit avant le oui. */
.pop-confirmation { border: 1px solid #3d3d4a; background: var(--papier); color: var(--encre); padding: 1.6rem 1.8rem 1.4rem;
  max-width: min(32rem, 92vw); }
.pop-confirmation::backdrop { background: rgba(10, 10, 14, .7); }
.pop-confirmation h2 { font: 400 1.6rem/1.2 var(--serif); margin: 0 0 .8rem; }
.pop-confirmation .actions { margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.pop-confirmation .actions .bouton { margin: 0; }
.liste-offres { display: grid; gap: .5rem; max-width: 34rem; }
.bouton-offre { text-align: left; }
.bouton-offre[disabled] { background: var(--papier-clair); color: var(--encre-douce); border: 1px solid var(--trait); }
button.lien { background: none; border: 0; padding: 0; font: inherit; color: var(--rouge); text-decoration: underline; cursor: pointer; }
label.case { display: flex; gap: .5rem; align-items: center; color: var(--encre); }
.page form { margin-top: 1rem; }
label.case input { padding: 0; width: 1.1rem; height: 1.1rem; }

/* ── LA NUIT (demande user 07-10 : « que les autres pages du site, Mentions légales, Confidentialité,
   etc., soient au même format que la page prix ») ─────────────────────────────────────────────────
   Une seule classe, `de-nuit`, retourne les couleurs : tout ce qui se dessine avec `--papier` et `--encre`
   suit sans règle de plus. Elle se pose sur le `<body>` d'une page ouverte seule, et sur chaque pop-up
   de l'accueil. ⚠️ Pas `nuit` : l'accueil nomme déjà ainsi le voile sombre posé sur sa carte.
   Ce qui restait écrit en clair (survol d'un bouton, rouge des erreurs) est redit ici. */
.de-nuit { --papier: #1b1b24; --papier-clair: #23232d; --encre: #e9dfc6; --encre-douce: #aaa18b; --trait: #40404d;
  --alerte: #ef7d62; color: var(--encre); }
body.de-nuit { background: #16161d; }
.de-nuit .bouton:hover { background: #fff6df; }
.de-nuit .bouton-danger, .de-nuit .bouton-principal { color: #f1ece0; }
.de-nuit .bouton-danger:hover, .de-nuit .bouton-principal:hover { background: #c94429; }
.de-nuit .bouton[disabled] { background: #3a3a46; color: var(--encre-douce); }
.de-nuit .bouton-discret, .de-nuit .bouton-discret:hover { color: var(--encre); }
.de-nuit .bouton-discret:hover { background: var(--papier-clair); }
.de-nuit .retour.erreur, .de-nuit button.lien { color: var(--alerte); }
.de-nuit input, .de-nuit select { border-color: #5a5648; }
.de-nuit :focus-visible { outline-color: #e9a44a; }
/* Une page ouverte seule : le même panneau que la pop-up des prix, posé sur la nuit. */
body.de-nuit main.page { background: var(--papier); border: 1px solid #3d3d4a; max-width: 52rem;
  margin: 1.5rem auto 2.5rem; padding: 1.8rem clamp(1rem, 4vw, 2.6rem) 2.4rem; }
body.de-nuit .pied { border-top-color: var(--trait); }