:root{
  --barre-h:72px;
  --bg:#FFFCF8; --bg2:#F4F1EB; --carte:#FFFFFF; --trait:#E9E5DF;
  --accent:#EF5D4C; --accent-doux:rgba(239,93,76,.09);
  --t1:#222B3D; --t2:#5F6875; --t3:#6A6E75;
  --rouge:#E8193C; --vert:#008705;
  --ambre:#F5A623; --corail:#EF5D4C; --rose:#E8447A; --jade:#0FA378; --indigo:#5B5BD6;
  --degrade:linear-gradient(100deg,#F5A623,#EF5D4C 52%,#E8447A);
  --ombre:0 1px 2px rgba(34,43,61,.04),0 14px 34px -16px rgba(34,43,61,.2);
  --ombre-forte:0 2px 4px rgba(34,43,61,.06),0 26px 56px -20px rgba(34,43,61,.34);
  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-xl:28px; --r-full:999px;
  --police:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  --lent:.55s cubic-bezier(.22,.61,.36,1); --vif:.2s cubic-bezier(.22,.61,.36,1);
  color-scheme:light;
}
/* 🔴 Le CLAIR est le defaut, quel que soit le reglage du systeme.
   Avant, un bloc @media(prefers-color-scheme:dark) basculait le site en
   sombre chez tout visiteur dont l'OS est en sombre — il paraissait donc
   « obligatoirement sombre ». Le sombre ne s'applique plus QUE par la
   bascule. ⚠️ Si on retablit un jour le suivi du systeme, il faut AUSSI
   retablir la detection dans interactions.js, sinon le premier clic sur la
   bascule semble ne rien faire. */
:root[data-theme="sombre"]{
  --bg:#15171C; --bg2:#1B1E24; --carte:#22252C; --trait:#343842;
  --accent:#EF5D4C; --accent-doux:rgba(239,93,76,.16);
  --t1:#FFFFFF; --t2:#9AA0AA; --t3:#848C9D;
  --rouge:#FF453A; --vert:#32D74B;
  --ombre:0 1px 2px rgba(0,0,0,.34),0 14px 34px -16px rgba(0,0,0,.66);
  --ombre-forte:0 2px 4px rgba(0,0,0,.44),0 26px 56px -20px rgba(0,0,0,.8);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;
  scroll-padding-top:calc(var(--barre-h) + env(safe-area-inset-top,0px) + 20px)}
body{margin:0;position:relative;background:var(--bg);color:var(--t1);font-family:var(--police);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  transition:background var(--vif),color var(--vif)}
.enveloppe{max-width:1160px;margin:0 auto;
  padding-left:max(24px,env(safe-area-inset-left,0px));
  padding-right:max(24px,env(safe-area-inset-right,0px))}
a{color:inherit}
h1,h2,h3{font-weight:800;letter-spacing:-.025em;text-wrap:balance;margin:0;line-height:1.08}
/* 🔴 La borne basse tenait compte du confort de lecture, pas de la largeur
   reelle : a 320 px, « c'est beaucoup » — insecable, pour que le souligne du
   degrade reste d'un seul tenant — faisait 291 px pour 272 disponibles. */
h1{font-size:clamp(2.3rem,6.6vw,4.6rem);font-weight:900;letter-spacing:-.04em}
h2{font-size:clamp(1.75rem,3.3vw,2.6rem);font-weight:900}
h3{font-size:1.08rem;letter-spacing:-.01em;font-weight:800}
p{margin:0}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.etiquette{font-size:.73rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.flamme{background:var(--degrade);-webkit-background-clip:text;background-clip:text;color:transparent}

:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:5px}
.saut{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--r-md) 0;z-index:100;font-weight:800}
.saut:focus{left:0}

/* --- barre ------------------------------------------------------------- */
/* 🔴 SUR IPHONE, DU CONTENU DEFILAIT DANS LA BANDE DE L'HEURE.
   iOS cale un element colle `top:0` SOUS la barre d etat, mais laisse le
   contenu se peindre DERRIERE elle : une lichette de texte defilait donc au
   dessus de l en-tete, entre l heure et le logo.
   Avec `viewport-fit=cover`, `top:0` devient le vrai haut de la dalle, et ce
   rembourrage rend a l en-tete la hauteur de l encoche — son fond opaque
   couvre alors la bande, et les boutons ne bougent pas d un pixel.
   ⚠️ `0px` et non `0` dans le repli : `env()` sans unite casse le calcul.
   Sur un appareil sans encoche la valeur est nulle, rien ne change. */
header.barre{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 84%,transparent);
  padding-top:env(safe-area-inset-top,0px);
  backdrop-filter:blur(18px) saturate(1.5);border-bottom:1px solid transparent;
  transition:border-color var(--vif),box-shadow var(--vif)}
header.barre.collee{border-bottom-color:var(--trait);box-shadow:0 10px 30px -24px rgba(0,0,0,.7)}
.barre .enveloppe{display:flex;align-items:center;gap:18px;height:var(--barre-h);flex-wrap:nowrap}
.marque{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.logo{width:36px;height:36px;border-radius:11px;display:block;flex-shrink:0;
  box-shadow:0 8px 20px -8px rgba(239,93,76,.9);transition:transform var(--lent)}
.marque:hover .logo{transform:rotate(-7deg) scale(1.08)}
/* ⚠️ Le mot-symbole n'est PAS composé en Nunito : dans le vrai logo, « Wiki »
   et « Coaster » ont deux typographies différentes. On découpe donc le
   mot-symbole directement dans le fichier du logo (fenêtre + décalage), plutôt
   que de le retaper. Les valeurs ci-dessous cadrent la partie texte de
   logo-sunset.png (2367 x 1307). */
.marque-mot{position:relative;display:block;width:214px;height:28px;overflow:hidden;flex-shrink:0}
.marque-mot img{position:absolute;width:228px;max-width:none;left:-6px;top:-86px}

@media(max-width:520px){.marque-mot{display:none}}
nav.liens{display:flex;gap:4px}
/* 🔴 `nowrap` : sans lui une etiquette se coupe en son milieu des que la barre
   est serree, et les rubriques passent sur deux lignes. La barre elle-meme ne
   doit jamais se replier — d'ou `flex-wrap:nowrap` sur son enveloppe. */
nav.liens a{text-decoration:none;font-weight:700;font-size:.94rem;color:var(--t2);white-space:nowrap;
  padding:9px 11px;border-radius:var(--r-full);transition:color var(--vif),background var(--vif)}
nav.liens a:hover{color:var(--t1);background:var(--bg2)}
/* Sous 1040 px la barre n'a plus la place de tout aligner. On retire les
   rubriques plutot que de les laisser deborder : elles restent atteignables
   en faisant defiler la page, et le bouton App Store, lui, doit rester. */
@media(max-width:1040px){nav.liens{display:none}}
/* 🔴 Les rubriques disparaissaient SANS REMPLACEMENT : sur telephone comme
   sur tablette, et depuis n'importe laquelle des 8 891 pages parc ou
   attraction, il ne restait que le logo pour revenir quelque part.
   Le menu reprend le <details> du selecteur de langues — donc son style, son
   ouverture sans JavaScript et son pilotage au clavier. */
.menu-mobile{display:none}
@media(max-width:1040px){.menu-mobile{display:block}}
.menu-mobile summary{padding:9px 11px}
/* Pas de chevron sur le bouton : les trois barres disent deja « menu ». */
.menu-mobile summary::after{display:none}
.bascule{width:44px;height:44px;border-radius:var(--r-full);border:1.5px solid var(--trait);
  background:transparent;color:var(--t2);cursor:pointer;display:grid;place-items:center;
  transition:color var(--vif),border-color var(--vif),transform var(--lent);flex-shrink:0}
.bascule:hover{color:var(--accent);border-color:var(--accent);transform:rotate(20deg)}
.bascule svg{width:18px;height:18px;fill:currentColor}
.bascule .lune{display:none}

:root[data-theme="sombre"] .bascule .soleil{display:none}
:root[data-theme="sombre"] .bascule .lune{display:block}

/* --- menu de langues ----------------------------------------------------- */
/* <details> natif : s'ouvre SANS JavaScript et se pilote au clavier. Après le
   script cassé qui avait vidé le site, tout ce qui peut se passer de JS s'en
   passe. Le script n'ajoute qu'un confort : fermer au clic à côté. */
.menu-langues{position:relative;flex-shrink:0}
.menu-langues summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  list-style:none;border:1.5px solid var(--trait);border-radius:var(--r-full);
  padding:9px 14px;font-size:.88rem;font-weight:800;color:var(--t2);
  transition:color var(--vif),border-color var(--vif)}
.menu-langues summary::-webkit-details-marker{display:none}
.menu-langues summary:hover{color:var(--t1);border-color:var(--accent)}
.menu-langues summary svg{width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:1.8;flex-shrink:0}
/* La petite flèche tourne à l'ouverture — le seul indice que c'est un menu. */
.menu-langues summary::after{content:"";width:6px;height:6px;margin-left:1px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--vif)}
.menu-langues[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.menu-liste{position:absolute;top:calc(100% + 10px);right:0;z-index:40;
  min-width:172px;padding:6px;display:flex;flex-direction:column;
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-md);
  box-shadow:var(--ombre-forte)}
.menu-liste a{text-decoration:none;padding:9px 13px;border-radius:var(--r-sm);
  font-size:.9rem;font-weight:700;color:var(--t2);
  transition:background var(--vif),color var(--vif)}
.menu-liste a:hover{background:var(--bg2);color:var(--t1)}
/* Sous 720 px la barre est déjà chargée : on garde le globe, on retire le mot. */
@media(max-width:720px){.menu-langues summary span{display:none}
  .menu-langues summary{padding:9px 11px}}

/* --- bouton App Store --------------------------------------------------- */
.appstore{display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  background:var(--t1);color:var(--bg);padding:13px 22px;border-radius:var(--r-full);
  font-weight:800;font-size:.95rem;white-space:nowrap;
  transition:transform var(--vif),box-shadow var(--vif)}
.appstore:hover{transform:translateY(-2px);box-shadow:var(--ombre-forte)}
.appstore:active{transform:translateY(0)}
.appstore svg{width:20px;height:20px;flex-shrink:0}
.appstore span{text-align:left;line-height:1.15;white-space:nowrap}
.appstore small{display:block;font-size:.67rem;font-weight:700;opacity:.7}
.appstore.flamme-fond{background:var(--degrade);color:#fff;
  box-shadow:0 12px 30px -12px rgba(239,93,76,.85)}
.appstore.flamme-fond:hover{box-shadow:0 18px 40px -14px rgba(239,93,76,.95)}
.appstore.contour{background:transparent;color:var(--t1);border:1.5px solid var(--trait);box-shadow:none}
.appstore.contour:hover{border-color:var(--accent);color:var(--accent);box-shadow:none}
@media(max-width:620px){.barre .appstore small{display:none}.barre .appstore{padding:11px 16px}}
/* 🔴 A 320 px la barre debordait de 34 px : icone + bascule + menu de langues
   + bouton complet ne tiennent pas dans 272 px. Le bouton se reduit a la
   pomme — l'action reste, contrairement a masquer la bascule ou le menu. */
@media(max-width:400px){.barre .appstore span{display:none}
  .barre .appstore{padding:11px 13px}
  .barre .enveloppe{gap:12px}}

/* --- héros -------------------------------------------------------------- */
.heros{padding:80px 0 44px;position:relative;overflow:hidden}
.aurore{position:absolute;inset:-46% -14% auto -14%;height:92%;pointer-events:none;
  background:
    radial-gradient(40% 46% at 22% 6%,rgba(245,166,35,.20),transparent 68%),
    radial-gradient(44% 50% at 62% 0%,rgba(239,93,76,.20),transparent 70%),
    radial-gradient(38% 44% at 88% 12%,rgba(232,68,122,.16),transparent 68%)}
.etoiles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.etoiles svg{position:absolute;fill:var(--sf,var(--accent));animation:scintille 4.5s ease-in-out infinite}
@keyframes scintille{0%,100%{opacity:.2;transform:scale(1) rotate(0)}50%{opacity:.7;transform:scale(1.22) rotate(14deg)}}
.heros .enveloppe{position:relative}
.accroche{max-width:15ch}
.accroche em{font-style:normal;position:relative;white-space:nowrap;
  background:var(--degrade);-webkit-background-clip:text;background-clip:text;color:transparent}
.accroche em::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;height:.085em;
  background:var(--degrade);border-radius:4px;transform:scaleX(0);transform-origin:left;
  animation:souligne .75s cubic-bezier(.22,.61,.36,1) .8s forwards}
@keyframes souligne{to{transform:scaleX(1)}}
.sous{margin-top:26px;max-width:52ch;color:var(--t2);font-size:1.16rem;font-weight:600}
.sous b{color:var(--t1);font-weight:800}
.actions{margin-top:36px;display:flex;gap:13px;flex-wrap:wrap;align-items:center}

/* --- héros en deux colonnes ---------------------------------------------- */
.heros-grille{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
/* 🔴 SANS ce min-width:0, la capture débordait sur toute la page : un élément de
   grille a min-width:auto, donc il ne descend pas sous la largeur intrinsèque de
   son contenu (l'image fait 1290 px) — et en CSS min-width l'emporte TOUJOURS
   sur max-width. Le max-width:296px ci-dessous était purement décoratif. */
.heros-grille>*{min-width:0}
@media(max-width:980px){.heros-grille{grid-template-columns:1fr;gap:36px}
  /* Elle passe sous le texte, plus petite : elle illustre, elle ne porte
     plus la moitie de la mise en page. */
    .telephone img{transform:rotate(-2deg)}}
.telephone{position:relative;justify-self:center;max-width:296px;width:100%}
/* Ecrite APRES la regle de base : a specificite egale, c est la derniere qui
   gagne. Placee dans le @media au-dessus, elle etait sans effet. */
@media(max-width:980px){.telephone{max-width:244px}}
.telephone img{width:100%;height:auto;display:block;border-radius:36px;
  box-shadow:0 44px 96px -34px rgba(34,43,61,.6),0 0 0 1px var(--trait);
  transform:rotate(-3.5deg);transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.telephone:hover img{transform:rotate(0) translateY(-8px)}
.bulle{position:absolute;background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-lg);
  padding:11px 15px;box-shadow:var(--ombre-forte);font-weight:700;font-size:.78rem;color:var(--t2);
  white-space:nowrap;animation:flotte 5.5s ease-in-out infinite}
.bulle b{display:block;font-size:1.06rem;font-weight:900;letter-spacing:-.035em;color:var(--c);margin-bottom:1px}
/* 🔴 Ancrées aux BORDS de la capture, pas posées dessus : en left/right négatif
   en pourcentage, chaque bulle recouvrait ~35 % de la largeur de l'écran et on
   ne voyait plus l'app. Avec calc(100% - 24px) elles débordent vers l'extérieur
   et ne mordent que 24 px sur le cadre du téléphone. */
.bulle.une{top:11%;right:calc(100% - 24px);animation-delay:.4s}
.bulle.deux{bottom:15%;left:calc(100% - 24px);animation-delay:2.2s}
/* Sous 1080 px la colonne n'a plus la place de les loger dehors : le bord de la
   fenêtre les rognerait. Le téléphone reste, seul, jusqu'à 980 px. */
@media(max-width:1080px){.bulle{display:none}}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

/* --- pastilles de chiffres ------------------------------------------------ */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.chip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--trait);
  border-radius:var(--r-full);padding:9px 16px;font-size:.86rem;font-weight:800;background:var(--carte);
  box-shadow:var(--ombre);transition:transform var(--vif)}
.chip:hover{transform:translateY(-2px)}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--c);font-style:normal;flex-shrink:0}

.monte{opacity:0;transform:translateY(24px);animation:monte .75s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes monte{to{opacity:1;transform:none}}
.reveler{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.reveler.vu{opacity:1;transform:none}

/* --- tableau de bord live ------------------------------------------------ */
.tdb{margin-top:58px;border:1px solid var(--trait);border-radius:var(--r-xl);
  background:var(--carte);box-shadow:var(--ombre-forte);overflow:hidden}
.tdb-tete{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 20px;border-bottom:1px solid var(--trait);background:var(--bg2)}
.direct{display:inline-flex;align-items:center;gap:9px;font-weight:900;font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--vert)}
.point{width:9px;height:9px;border-radius:50%;background:var(--vert);position:relative;flex-shrink:0}
.point::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--vert);
  animation:onde 2.2s ease-out infinite}
@keyframes onde{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.6);opacity:0}}
.tdb-outils{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.champ{border:1.5px solid var(--trait);background:var(--bg);color:var(--t1);border-radius:var(--r-full);
  padding:9px 16px;font-family:inherit;font-size:16px;font-weight:700;width:172px;
  transition:border-color var(--vif),width var(--vif)}
.champ::placeholder{color:var(--t3);font-weight:600}
.champ:focus{outline:none;border-color:var(--accent);width:204px}
.segments{display:flex;gap:2px;background:var(--bg);border:1.5px solid var(--trait);
  border-radius:var(--r-full);padding:3px}
.segments button{border:0;background:transparent;color:var(--t2);font-family:inherit;font-weight:800;
  font-size:.8rem;padding:6px 14px;border-radius:var(--r-full);cursor:pointer;
  transition:color var(--vif),background var(--vif)}
.segments button[aria-pressed="true"]{background:var(--degrade);color:#fff}
.segments button:hover:not([aria-pressed="true"]){color:var(--t1)}

/* --- filtre par pays ------------------------------------------------------ */
/* Le menu deroulant reprend l'allure du champ de recherche : meme bordure,
   meme rayon, meme graisse. Ils se lisent comme une paire.
   La fleche est dessinee en CSS — celle du navigateur change d'un systeme a
   l'autre et jure avec la charte. */
.champ-select{appearance:none;-webkit-appearance:none;cursor:pointer;
  width:auto;max-width:230px;padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--t3) 50%),
    linear-gradient(135deg,var(--t3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 53%,calc(100% - 12px) 53%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
/* Le champ de recherche s elargit au focus ; le select, lui, ne doit pas
   bouger — sa largeur depend de son contenu. */
.champ-select:focus{width:auto;outline:none;border-color:var(--accent)}
.champ-select:hover{border-color:var(--accent)}
/* Les listes deroulantes natives heritent mal du fond en theme sombre. */
.champ-select option{background:var(--carte);color:var(--t1)}

/* 🏳️ Le drapeau remplace la pastille de couleur, qui ne portait aucune
   information : elle reprenait l'accent du parc, deja visible sur le liseret
   gauche de la carte.
   🔴 Ce sont des SVG et non des emoji : Windows n'a aucun glyphe de drapeau
   et affichait « US », « FR » a la place. Voir `drapeau()` dans localise.mjs.
   Le liseret adoucit les drapeaux a fond blanc (Japon), qui sans lui
   flottent sans contour sur la carte. */
.drapeau{width:20px;height:15px;flex-shrink:0;margin-top:3px;border-radius:2px;
  object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.12)}

.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(244px,1fr))}
.parc{position:relative;padding:18px 20px 17px;border-right:1px solid var(--trait);
  border-bottom:1px solid var(--trait);display:flex;flex-direction:column;gap:9px;min-height:126px;
  overflow:hidden;text-decoration:none;color:inherit;
  transition:background var(--lent),transform var(--vif)}
.parc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--pa);
  opacity:.55;transition:opacity var(--vif),width var(--vif)}
/* La case se remplit de la couleur du parc, pas d'un gris générique. */
a.parc:hover{background:color-mix(in srgb,var(--pa) 13%,var(--bg));z-index:1}
a.parc:hover::before{opacity:1;width:7px}
a.parc:hover .parc-nom{color:var(--pa)}
a.parc:hover .mini{opacity:1}
a.parc:hover .fleche{opacity:1;transform:translateX(0)}
a.parc:focus-visible{outline-offset:-3px}
.parc.cache{display:none}
/* Entrée en cascade des cartes, après l'apparition du cadre. */
.grille .parc{opacity:0;transform:translateY(16px) scale(.985);
  animation:carte .55s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes carte{to{opacity:1;transform:none}}
.fleche{position:absolute;top:18px;right:18px;color:var(--pa);font-weight:900;font-size:1.05rem;
  opacity:0;transform:translateX(-6px);transition:opacity var(--vif),transform var(--vif)}
/* Silhouette de la journée : même donnée que la courbe des pages parc, en 66 px. */
.mini{position:absolute;right:18px;bottom:17px;width:66px;height:24px;opacity:.5;
  transition:opacity var(--vif);overflow:visible}
.mini path{fill:none;stroke:var(--pa);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mini .remplissage{fill:var(--pa);opacity:.16;stroke:none}
.parc-tete{display:flex;align-items:flex-start;gap:9px;padding-right:24px}
.pastille{width:9px;height:9px;border-radius:50%;background:var(--pa);margin-top:7px;flex-shrink:0}
.parc-nom{font-size:.96rem;font-weight:800;line-height:1.25;letter-spacing:-.015em;
  transition:color var(--vif)}
.parc-nom span{display:block;color:var(--t3);font-size:.75rem;font-weight:700;margin-top:2px;letter-spacing:0}
.chiffres{display:flex;align-items:baseline;gap:9px;margin-top:auto;flex-wrap:wrap;padding-right:88px}
.attente{font-size:1.95rem;font-weight:900;letter-spacing:-.045em;line-height:1}
.attente small{font-size:.78rem;color:var(--t3);font-weight:800;margin-left:3px;letter-spacing:0}
.ecart{font-size:.79rem;font-weight:900;padding:4px 10px;border-radius:var(--r-full);white-space:nowrap}
.ecart.mieux{color:var(--vert);background:color-mix(in srgb,var(--vert) 14%,transparent)}
.ecart.pire{color:var(--rouge);background:color-mix(in srgb,var(--rouge) 14%,transparent)}
.ecart.neutre{color:var(--t2);background:var(--bg2)}
.ferme{color:var(--t3);font-weight:800;font-size:.86rem;margin-top:auto}
/* Ne sert qu'au telephone : sur grand ecran les 33 parcs tiennent en quatre
   colonnes et se lisent d'un coup. */
.voir-plus{display:none;width:100%;border:0;border-top:1px solid var(--trait);
  background:var(--bg2);color:var(--t1);font-family:inherit;font-size:.92rem;
  font-weight:800;padding:16px;cursor:pointer;
  transition:background var(--vif),color var(--vif)}
.voir-plus:hover{color:var(--accent)}
.vide{padding:36px 20px;color:var(--t2);text-align:center;grid-column:1/-1;font-weight:700}

/* --- sections ------------------------------------------------------------ */
/* --- décor de fond ------------------------------------------------------- */
/* Grain : sans lui les aplats paraissent plats et vides. */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:40;opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.6'/></svg>")}
/* Trame de points, la texture de fond des rubriques. */
.trame{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:radial-gradient(circle at 1px 1px,var(--trait) 1.4px,transparent 0);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 78%)}
/* --- la grande voie, celle qui traverse toute la page -------------------- */
/* Tracée par le script une fois la hauteur du document connue. Elle passe
   AU-DESSUS des fonds de rubrique (z-index 2) mais SOUS le contenu (3), sinon
   chaque fond coloré la recouvrirait. */
#voie-globale{position:absolute;top:0;left:0;width:100%;pointer-events:none;z-index:2;
  fill:none;stroke-linecap:round}
#voie-globale .rail{stroke:var(--accent);stroke-opacity:.17;stroke-width:2.4}
#voie-globale .traverses{stroke:var(--accent);stroke-opacity:.13;stroke-width:15;stroke-dasharray:2.4 22}
#voie-globale .wagon{display:none;fill:var(--accent);fill-opacity:.5;stroke:none}
.chemin-ok #voie-globale .wagon{display:block;offset-rotate:auto}
.heros .enveloppe{z-index:3}

/* Voie ferrée : le motif du logo, en très basse opacité. */
.voie{position:absolute;left:0;right:0;width:100%;height:300px;pointer-events:none;
  z-index:0;opacity:.16;fill:none;stroke-linecap:round}
.voie.bas{bottom:-24px}
.voie.haut{top:-24px;transform:scaleY(-1)}
.voie.droite{left:auto;right:-8%;width:62%}
.voie .rail{stroke:var(--c,var(--accent));stroke-width:2.6}
.voie .traverses{stroke:var(--c,var(--accent));stroke-width:16;stroke-dasharray:2.6 24}
.voie .pilier{stroke:var(--c,var(--accent));stroke-width:2;opacity:.55}
/* Le wagon n'apparaît que si le navigateur sait suivre un tracé (offset-path),
   sinon il resterait planté à l'origine. La classe est posée par le script. */
.voie .wagon{display:none;fill:var(--c,var(--accent));stroke:none}
.chemin-ok .voie .wagon{display:block;offset-rotate:auto;will-change:offset-distance;
  animation:roule 34s linear infinite}
@keyframes roule{from{offset-distance:0%}to{offset-distance:100%}}
.boucle{position:absolute;pointer-events:none;z-index:0;opacity:.14;fill:none;stroke-linecap:round}
.boucle .rail{stroke:var(--c,var(--accent));stroke-width:2.6}
.boucle .traverses{stroke:var(--c,var(--accent));stroke-width:13;stroke-dasharray:2.4 20}
.boucle.hg{top:6%;left:-4%}
.boucle.hd{top:10%;right:-3%}
.boucle.bd{bottom:8%;right:2%}

section{padding:104px 0;position:relative;overflow:hidden}
section>.enveloppe{position:relative;z-index:3}
section.creme{background:var(--bg2)}
/* Rubrique teintée : la couleur est mélangée AU FOND courant, donc le même
   réglage tient en clair comme en sombre sans second jeu de valeurs. */
section.teinte{position:relative;overflow:hidden;background:color-mix(in srgb,var(--c) 9%,var(--bg))}
section.teinte::before{content:"";position:absolute;inset:auto -12% -46% -12%;height:86%;pointer-events:none;
  background:radial-gradient(42% 62% at 50% 100%,color-mix(in srgb,var(--c) 22%,transparent),transparent 72%)}
section.teinte::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--degrade);opacity:.45}
section.teinte>.enveloppe{position:relative}
.entete{max-width:62ch;margin-bottom:48px}
.entete h2{margin-top:14px}
.entete p{margin-top:18px;color:var(--t2);font-size:1.08rem;font-weight:600}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:62px;align-items:center}
/* 🔴 min-width:0 OBLIGATOIRE — voir .heros-grille : sans lui, la colonne se
   dilate a la largeur mini du tableau (520 px) et deborde de l ecran, ou
   `section{overflow:hidden}` la coupe SANS defilement possible. */
.duo>*,.fiche>*,.bandeau-duo>*{min-width:0}
@media(max-width:900px){.duo{grid-template-columns:1fr;gap:38px}section{padding:76px 0}}

/* --- démonstration ------------------------------------------------------- */
.demo{border:1px solid var(--trait);border-radius:var(--r-xl);overflow:hidden;
  background:var(--carte);box-shadow:var(--ombre-forte)}
.demo-ligne{display:flex;align-items:center;gap:18px;padding:24px 26px}
.demo-ligne+.demo-ligne{border-top:1px solid var(--trait)}
.demo-ligne.nous{background:linear-gradient(100deg,rgba(245,166,35,.12),rgba(232,68,122,.06) 70%,transparent)}
.demo-qui{font-size:.7rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t3);width:78px;flex-shrink:0}
.demo-ligne.nous .demo-qui{color:var(--accent)}
.demo-val{font-size:1.8rem;font-weight:900;letter-spacing:-.045em}
.demo-txt{color:var(--t2);font-size:.96rem;font-weight:700}
.demo-txt b{color:var(--vert);font-weight:900}

/* --- tuiles fonctionnalités ---------------------------------------------- */
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:18px}
.tuile{border:1px solid var(--trait);border-radius:var(--r-xl);padding:26px 24px;background:var(--carte);
  transition:transform var(--lent),box-shadow var(--lent),border-color var(--vif)}
.tuile:hover{transform:translateY(-5px);box-shadow:var(--ombre-forte);border-color:transparent}
.icone{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;
  background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c)}
.icone svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.tuile h3{margin-bottom:8px}
.tuile p{color:var(--t2);font-size:.93rem;font-weight:600}

/* --- offres gratuit / Plus ------------------------------------------------ */
.offres{display:grid;grid-template-columns:1fr 1.12fr;gap:22px;align-items:start}
@media(max-width:900px){.offres{grid-template-columns:1fr}}
.offre{border:1.5px solid var(--trait);border-radius:var(--r-xl);padding:34px 32px;background:var(--carte)}
/* Bordure en dégradé : deux fonds superposés, l'un rogné sur la boîte, l'autre
   sur la bordure. Un simple border-image casserait le rayon. */
.offre.plus{border:2px solid transparent;box-shadow:var(--ombre-forte);
  background:linear-gradient(var(--carte),var(--carte)) padding-box,var(--degrade) border-box}
.offre-tete{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:26px}
.offre h3{font-size:1.35rem;font-weight:900;letter-spacing:-.03em}
.prix{font-size:.8rem;font-weight:900;padding:7px 15px;border-radius:var(--r-full);
  background:var(--degrade);color:#fff;white-space:nowrap}
.prix.neutre{background:var(--bg2);color:var(--t2)}
.liste{display:flex;flex-direction:column;gap:19px;margin:0;padding:0;list-style:none}
.liste li{display:flex;gap:14px;font-weight:800;line-height:1.4}
.liste svg{width:21px;height:21px;flex-shrink:0;margin-top:1px;fill:none;stroke:var(--c,var(--accent));
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.liste small{display:block;color:var(--t2);font-weight:600;font-size:.89rem;margin-top:4px}
.note-offre{margin-top:28px;padding-top:22px;border-top:1px solid var(--trait);
  color:var(--t2);font-size:.9rem;font-weight:700}

/* --- captures ------------------------------------------------------------ */
.captures{display:grid;grid-template-columns:repeat(auto-fit,minmax(198px,1fr));gap:24px}
.capture{margin:0;border-radius:var(--r-xl);overflow:hidden;background:var(--carte);
  border:1px solid var(--trait);box-shadow:var(--ombre);
  transition:transform var(--lent),box-shadow var(--lent)}
.capture:hover{transform:translateY(-9px) rotate(-.7deg);box-shadow:var(--ombre-forte)}
.capture img{display:block;width:100%;height:auto}
.capture figcaption{padding:16px 18px;font-size:.86rem;color:var(--t2);font-weight:600}
.capture figcaption b{display:block;color:var(--t1);font-weight:900;margin-bottom:3px;font-size:.93rem}

/* --- bandeau d'appel ------------------------------------------------------ */
.bandeau{position:relative;border-radius:var(--r-xl);overflow:hidden;padding:64px 48px;
  background:var(--degrade);color:#fff;text-align:center;box-shadow:0 30px 70px -32px rgba(239,93,76,.8)}
.bandeau h2{color:#fff;max-width:20ch;margin:0 auto}
.bandeau p{margin:18px auto 0;max-width:52ch;font-weight:700;opacity:.94;font-size:1.06rem}
.bandeau .actions{justify-content:center;margin-top:34px}
.bandeau .appstore{background:#fff;color:#222B3D}
/* Version en deux colonnes : l'argument à gauche, ce que l'app ajoute à droite. */
.bandeau-duo{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;
  gap:52px;align-items:center;text-align:left}
@media(max-width:900px){.bandeau-duo{grid-template-columns:1fr;gap:36px}}
.bandeau-duo h2{margin:0;max-width:18ch}
.bandeau-duo p{margin:16px 0 0;max-width:46ch}
.bandeau-duo .actions{justify-content:flex-start;margin-top:28px}
.bandeau-duo .mention{font-size:.84rem;opacity:.8;font-weight:700;margin-top:16px}
.bandeau-duo .liste{gap:15px}
.bandeau-duo .liste li{font-size:.97rem;font-weight:800}
.bandeau-duo .liste svg{stroke:#fff;opacity:.92}
.bandeau .etoiles svg{--sf:#fff;opacity:.3}
/* Sur le dégradé, la voie passe en blanc et remonte en opacité. */
.bandeau .voie{--c:#fff;opacity:.24}
.bandeau-parc{--c:var(--pa)}
.bandeau-parc .boucle{opacity:.1}
@media(max-width:620px){.bandeau{padding:48px 26px}}

/* --- socle chiffré --------------------------------------------------------- */
.socle{display:grid;grid-template-columns:repeat(auto-fit,minmax(182px,1fr));gap:18px}
.socle div{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-xl);
  padding:30px 26px;transition:transform var(--lent),box-shadow var(--lent)}
.socle div:hover{transform:translateY(-4px);box-shadow:var(--ombre)}
.socle .n{font-size:2.6rem;font-weight:900;letter-spacing:-.05em;display:block;line-height:1;color:var(--c)}
.socle .l{color:var(--t2);font-size:.9rem;font-weight:700;margin-top:9px;display:block}

/* --- cartes de liens -------------------------------------------------------- */
.cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:14px}
.carte{display:block;text-decoration:none;border:1px solid var(--trait);border-radius:var(--r-lg);
  padding:19px 22px;background:var(--carte);position:relative;overflow:hidden;
  transition:border-color var(--vif),transform var(--vif),box-shadow var(--vif)}
.carte::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--pa,var(--accent));
  opacity:.6;transition:opacity var(--vif)}
.carte::after{content:"→";position:absolute;right:20px;top:50%;transform:translate(6px,-50%);
  opacity:0;color:var(--accent);font-weight:900;transition:opacity var(--vif),transform var(--vif)}
.carte:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--ombre)}
.carte:hover::after{opacity:1;transform:translate(0,-50%)}
.carte b{display:block;font-weight:900;margin-bottom:4px;letter-spacing:-.015em}
.carte span{color:var(--t3);font-size:.85rem;font-weight:700}
.carte.inactive{opacity:.4;pointer-events:none}

/* --- tableaux ---------------------------------------------------------------- */
.cadre{border:1px solid var(--trait);border-radius:var(--r-xl);overflow-x:auto;
  background:var(--carte);box-shadow:var(--ombre);
  background-image:linear-gradient(to right,var(--carte),transparent 24px),
    linear-gradient(to left,var(--carte),transparent 24px),
    linear-gradient(to left,rgba(34,43,61,.13),transparent 22px);
  background-position:left center,right center,right center;
  background-repeat:no-repeat;background-size:26px 100%,26px 100%,22px 100%;
  background-attachment:local,local,scroll}
table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
th{text-align:left;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t3);font-weight:900;padding:16px 22px;border-bottom:1px solid var(--trait);white-space:nowrap}
td{padding:15px 22px;border-bottom:1px solid var(--trait);font-weight:700}
tr:last-child td{border-bottom:0}
tbody tr{transition:background var(--vif)}
tbody tr:hover{background:var(--bg2)}
td.n{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
td a{text-decoration:none;font-weight:900;border-bottom:2px solid var(--accent-doux);
  transition:border-color var(--vif),color var(--vif)}
td a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.rang{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:9px;
  background:var(--bg2);color:var(--t3);font-size:.78rem;font-weight:900;margin-right:12px}
tr:nth-child(1) .rang{background:var(--degrade);color:#fff}
.piste{height:8px;border-radius:var(--r-full);background:var(--bg2);overflow:hidden;min-width:80px}
.jauge{height:100%;border-radius:var(--r-full);background:var(--degrade);width:0;
  transition:width 1.1s cubic-bezier(.22,.61,.36,1)}
/* ⚠️ inline-block + nowrap : en inline la pastille se coupait au milieu
   (« le » sur une ligne, « plus calme » sur la suivante) dès que la colonne
   était étroite. Et text-transform:none annule le capitalize de la cellule —
   qui sert à écrire « Mercredi » — sinon on lisait « Le Plus Calme ». */
.medaille{display:inline-block;white-space:nowrap;text-transform:none;vertical-align:middle;
  font-size:.72rem;font-weight:900;padding:3px 10px;border-radius:var(--r-full);
  background:color-mix(in srgb,var(--vert) 15%,transparent);color:var(--vert);margin-left:10px}

/* --- courbes ------------------------------------------------------------------ */
.courbe{width:100%;height:auto;display:block;overflow:visible}
.courbe .trace{stroke:url(#trait);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--l,0);stroke-dashoffset:var(--l,0);
  transition:stroke-dashoffset 1.4s cubic-bezier(.22,.61,.36,1)}
.courbe.vu .trace{stroke-dashoffset:0}
.courbe .aire{fill:url(#aire);opacity:0;transition:opacity 1s ease .4s}
.courbe.vu .aire{opacity:1}
.courbe .axe{stroke:var(--trait);stroke-width:1.5}
.courbe .grille-h{stroke:var(--trait);stroke-width:1;stroke-dasharray:3 6;opacity:.7}
.courbe .graduation{fill:var(--t3);font-size:11.5px;font-family:var(--police);font-weight:800}
.courbe .creux{fill:var(--vert)}
.courbe .creux-txt{fill:var(--vert);font-size:12px;font-family:var(--police);font-weight:900}
.courbe .pic{fill:var(--rouge)}
.courbe .pic-txt{fill:var(--rouge);font-size:12px;font-family:var(--police);font-weight:900}
.courbe .creux,.courbe .pic,.courbe .creux-txt,.courbe .pic-txt{opacity:0;transition:opacity .45s ease 1.25s}
.courbe.vu .creux,.courbe.vu .pic,.courbe.vu .creux-txt,.courbe.vu .pic-txt{opacity:1}

.creneaux{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.creneau{border:1px solid var(--trait);border-radius:var(--r-lg);padding:14px 19px;background:var(--carte);
  transition:transform var(--vif),border-color var(--vif),box-shadow var(--vif)}
.creneau:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--ombre)}
.creneau b{font-size:1.28rem;font-weight:900;display:block;letter-spacing:-.04em}
.creneau span{color:var(--t3);font-size:.82rem;font-weight:800}

/* --- réponse citable ------------------------------------------------------------ */
.reponse{position:relative;padding:22px 26px;margin:30px 0 0;font-size:1.16rem;max-width:66ch;
  font-weight:700;background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-xl);
  box-shadow:var(--ombre)}
.reponse::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;
  background:var(--degrade);border-radius:0 4px 4px 0}
.reponse b{font-weight:900}
.reponse .maj{display:block;margin-top:14px;font-size:.79rem;color:var(--t3);font-weight:800}

/* --- fiche attraction ------------------------------------------------------------- */
.fiche{display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:start}
@media(max-width:900px){.fiche{grid-template-columns:1fr;gap:36px}}
.photo{border-radius:var(--r-xl);overflow:hidden;background:var(--bg2);border:1px solid var(--trait);
  box-shadow:var(--ombre-forte)}
.photo img{display:block;width:100%;height:auto;transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.photo:hover img{transform:scale(1.05)}
.attributs{display:grid;grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:12px;margin-top:22px}
.attributs div{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-lg);
  padding:18px 20px;transition:transform var(--vif),border-color var(--vif)}
.attributs div:hover{transform:translateY(-3px);border-color:var(--c,var(--accent))}
.attributs b{display:block;font-size:1.35rem;font-weight:900;letter-spacing:-.04em;color:var(--c,var(--t1))}
.attributs span{color:var(--t3);font-size:.79rem;font-weight:800}
.jetons{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.jeton{border-radius:var(--r-full);padding:6px 15px;font-size:.83rem;font-weight:800;
  background:var(--accent-doux);color:var(--accent);transition:transform var(--vif)}
.jeton:hover{transform:translateY(-2px)}

/* --- bandeau de parc --------------------------------------------------------------- */
.bandeau-parc{position:relative;overflow:hidden;padding:38px 0 8px}
.bandeau-parc::before{content:"";position:absolute;inset:-70% -20% auto -20%;height:180%;
  background:radial-gradient(46% 52% at 24% 0%,var(--pa),transparent 68%);opacity:.16}
.bandeau-parc .enveloppe{position:relative}

/* --- fil d'ariane -------------------------------------------------------------------- */
/* 🔴 `padding` en raccourci ECRASAIT les 24 px lateraux de `.enveloppe`, que
   cet element porte aussi : le fil se collait au bord. On ne touche que le
   haut, la respiration laterale reste celle du conteneur. */
.ariane{padding-top:28px;font-size:.85rem;color:var(--t3);font-weight:800}
.ariane a{text-decoration:none}
.ariane a:hover{color:var(--accent)}

/* --- retour en haut -------------------------------------------------------------------- */
.haut{position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));width:48px;height:48px;border-radius:var(--r-full);
  border:1px solid var(--trait);background:var(--carte);color:var(--t1);cursor:pointer;display:grid;
  place-items:center;box-shadow:var(--ombre);opacity:0;pointer-events:none;transform:translateY(14px);
  transition:opacity var(--vif),transform var(--vif),border-color var(--vif);z-index:25}
.haut.visible{opacity:1;pointer-events:auto;transform:none}
.haut:hover{border-color:var(--accent);color:var(--accent)}
.haut svg{width:19px;height:19px;fill:currentColor}

/* --- pied ------------------------------------------------------------------------------- */
/* z-index 3 : sinon la grande voie (2) passerait par-dessus le pied de page. */
footer{position:relative;z-index:3;border-top:1px solid var(--trait);
  padding:66px 0 calc(46px + env(safe-area-inset-bottom,0px));
  color:var(--t2);font-size:.9rem;background:var(--bg2);font-weight:600}
.pied{display:flex;justify-content:space-between;gap:44px;flex-wrap:wrap;align-items:flex-start}
.pied-liens{display:flex;gap:34px;flex-wrap:wrap;font-weight:800}
.pied a{text-decoration:none}
.pied a:hover{color:var(--accent)}
.mot{height:78px;width:auto;display:block}
/* 🎨 Une seule version du logo : celle ou « Wiki » ET « Coaster » sont en
   degrade. Rien n'y est blanc, elle tient donc sur les deux fonds — plus de
   bascule de theme, et une image de moins a charger. */
.langues{margin-top:24px;display:flex;gap:8px;flex-wrap:wrap;max-width:46ch}
.langues span,.langues a{border:1px solid var(--trait);border-radius:var(--r-full);padding:5px 12px;text-decoration:none;
  font-size:.78rem;font-weight:800;background:var(--carte)}
.langues span.actif{background:var(--degrade);border-color:transparent;color:#fff}
.langues a:hover{border-color:var(--accent);color:var(--accent)}



/* === LA BARRE, SUR TELEPHONE ==============================================
   🔴 ELLE N EST PLUS EPINGLEE. Quatre tentatives ont echoue a la placer
   correctement sur iPhone : `sticky`, `fixed`, un pseudo-element debordant
   vers le haut, puis le retrait de `viewport-fit=cover`. A chaque fois une
   lichette de contenu restait visible au-dessus d elle, sous l heure.
   iOS place les elements epingles par rapport a la zone de securite sans
   qu'on puisse y monter quoi que ce soit. On ne corrige pas ce qu on ne peut
   pas observer : on retire le mecanisme. Une barre dans le flux ne peut pas
   etre mal placee.

   💡 La reference donnee par Fabie (nike.com) a la MEME bande sous l encoche.
   Ce qui la rend invisible chez eux, c est qu elle est du meme ton que la
   barre — pas un tour de force technique. Le fond de la barre est donc pose
   en dur ici, identique a `theme-color`, pour que les deux zones se lisent
   comme une seule.

   Et l allure suit la meme reference : des icones NUES, plus grandes, avec de
   l air. Les pastilles cerclees faisaient quatre petits boutons serres et
   bavards ; a cette taille, un contour n aide personne — il encombre.
   ⚠️ Sur grand ecran, rien de tout cela : la barre y reste collante et
   cerclee, elle fait partie du dessin et n a jamais pose probleme. */
@media(max-width:720px){
  /* 🔄 COLLANTE A NOUVEAU. Elle avait ete mise dans le flux apres quatre
     echecs a la placer sous l encoche — mais la reference de Fabie (nike.com)
     garde la sienne a l ecran en defilant, et c est ce qu il veut.
     La cause reelle du bug etait `viewport-fit=cover`, retire depuis : sans
     lui, la fenetre s arrete sous l encoche, plus rien ne s y peint, et une
     barre collee se pose bien en haut de cette fenetre. */
  /* 🔴 LE GRAIN EST RETIRE, ET C EST LUI LE COUPABLE PROBABLE.
     `body::after` est un calque FIXE, plein ecran, en `mix-blend-mode:overlay`
     et `z-index:40` — donc AU-DESSUS de la barre collante (z-index 30). Sur
     iOS, un calque fixe avec fusion par-dessus un element collant est une
     cause connue de zones non repeintes : la sonde montrait `header.barre`
     peinte a y=2, alors que l ecran y affichait encore du contenu ancien.
     A 5 % d opacite sur un telephone, ce grain ne se voit de toute facon pas.
     Sur grand ecran il reste : il donne sa matiere aux aplats. */
  body::after{display:none}

  /* La barre prend sa propre couche de composition. Sans cela Safari la
     repeint avec le reste de la page, et c est la qu il oublie des bandes. */
  header.barre{position:sticky;top:0;background:var(--bg);
    transform:translateZ(0);will-change:transform;backface-visibility:hidden;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    border-bottom:1px solid var(--trait)}
  /* Une ombre qui apparait au defilement fait repeindre la barre a chaque
     image. Un liseret fixe dit la meme chose sans rien couter. */
  header.barre.collee{box-shadow:none}
  .barre .enveloppe{height:64px;gap:0}
  html{scroll-padding-top:84px}

  /* Icones nues, cible tactile pleine : 44 px de zone cliquable pour un
     dessin de 23 px. La cible ne se voit pas, elle se touche. */
  .bascule,.menu-langues summary,.barre .appstore{
    width:44px;height:44px;padding:0;border:0;background:none;color:var(--t1);
    display:grid;place-items:center;border-radius:var(--r-full)}
  /* 🔴 SAUF le bouton App Store : sa pastille sombre est ce qui le distingue
     d une rangee d icones utilitaires. Le denuder comme les autres l avait
     noye — c est le seul de la barre qui demande une action. */
  .barre .appstore{background:var(--t1);color:var(--bg)}
  .bascule svg,.menu-langues summary svg,.barre .appstore svg{width:23px;height:23px}
  .bascule:hover,.menu-langues summary:hover{border:0;color:var(--accent);transform:none}

  /* Le libelle et le chevron du selecteur de langue tombent : a cote d une
     rangee d icones, ils cassent le rythme. Le globe suffit. */
  .menu-langues summary::after{display:none}

  /* Le bouton App Store redevient une icone. L appel a l action complet est
     juste dessous dans le heros, et repete trois fois dans la page : le
     repeter en pastille sombre dans la barre ne convainc personne de plus.
     ⚠️ Le fond degrade et le libelle sont retires ICI SEULEMENT — les autres
     boutons App Store de la page gardent tout. */
  .barre .appstore{box-shadow:none}
  .barre .appstore span,.barre .appstore small{display:none}
  .barre .appstore:hover{transform:none;box-shadow:none;color:var(--bg);opacity:.88}

  /* Le menu passe en dernier, comme sur les sites qui servent de reference :
     c est la position ou le pouce l attend. */
  .menu-mobile{order:9}
  .menu-liste{right:0;min-width:196px}
  .menu-liste a{padding:13px 15px;font-size:.95rem}

  /* Sans barre epinglee, ce bouton est le seul chemin de retour vers le menu.
     Il se montre plus tot (voir le seuil dans interactions.js). */
  .haut{width:52px;height:52px}
}
/* === TELEPHONE ============================================================
   🔴 La mise en page avait ete pensee en large : le mobile en etait une
   version AMPUTEE (capture retiree, navigation retiree) plutot qu'une mise
   en page a part entiere. Ce bloc lui en donne une. */
@media(max-width:720px){

  /* --- en-tete du tableau de bord : 5 lignes empilees -> 3 --------------
     Le champ fige a 172 px, le menu pays et les trois segments tombaient
     chacun sur sa ligne, alignes a droite par `margin-left:auto` : ~230 px
     de commandes avant le premier parc. */
  .tdb-tete{padding:12px 14px;gap:10px}
  .direct{font-size:.72rem;letter-spacing:.06em}
  .tdb-outils{margin-left:0;width:100%;gap:8px}
  .champ{flex:1.45 1 0;width:auto;min-width:0;padding-left:13px;padding-right:13px}
  .champ:focus{width:auto}
  .champ-select{flex:1 1 0;max-width:none;width:auto;padding-left:11px;padding-right:26px;
    background-position:calc(100% - 13px) 53%,calc(100% - 8px) 53%}
  .segments{width:100%}
  .segments button{flex:1;padding:11px 8px}

  /* --- la grille devient une LISTE --------------------------------------
     33 cartes de 128 px faisaient 4 224 px, soit 6,3 ecrans de telephone.
     En ligne — drapeau, nom, attente — on tombe a ~76 px. C'est aussi plus
     honnete : le bloc est un CLASSEMENT trie par attente, pas une galerie. */
  .parc{flex-direction:row;align-items:center;gap:12px;min-height:0;
    padding:13px 16px;border-right:0}
  .parc-tete{flex:1;min-width:0;padding-right:0;align-items:center}
  .parc-nom{font-size:.92rem}
  /* 🔴 PAS de troncature a une ligne : elle coupait « · 30 attractions »,
     c est-a-dire la seule information que la section supprimee apportait en
     propre. Deux lignes au maximum, le reste en points de suspension. */
  .parc-nom span{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden}
  .chiffres{margin-top:0;padding-right:0;flex-shrink:0;flex-wrap:nowrap;
    flex-direction:column;align-items:flex-end;gap:3px}
  .attente{font-size:1.4rem}
  .ferme{margin-top:0;flex-shrink:0;font-size:.8rem}
  /* La silhouette et la fleche vivaient dans les coins d'une carte haute :
     sur une ligne de 76 px elles se posent sur le texte. */
  .mini,.fleche{display:none}


  /* --- le decor recule -------------------------------------------------
     La grande voie traverse toute la page. Sur grand ecran elle passe dans
     les marges ; sur telephone il n y a plus de marges, alors elle passe SUR
     le texte. On ne la retire pas — c est la signature du site — on la rend
     deux fois plus discrete. */
  #voie-globale .rail{stroke-opacity:.08}
  #voie-globale .traverses{stroke-opacity:.055}

  /* --- l'en-tete est une seule bande ------------------------------------
     🔴 Sur iPhone on lisait TROIS bandes empilees : la barre systeme claire,
     puis le contenu qui defilait a travers l'en-tete translucide, puis les
     boutons. Opaque sur telephone : une seule bande, nette. La couleur de la
     barre systeme suit le theme (voir `majCouleurSysteme` dans le script). */
  /* (fond et transparence traites dans le bloc « LA BARRE » ci-dessus) */

  /* --- le heros se passe de la capture -----------------------------------
     Les cinq captures du rail, plus bas, montrent deja l'application. Celle
     du heros faisait doublon et coutait un demi-ecran avant le premier
     chiffre. Sur grand ecran elle reste : elle y remplit la seconde colonne,
     qui autrement serait vide. */
  .telephone{display:none}

  /* --- la liste, resserree ----------------------------------------------
     Le nombre d'attractions poussait la ligne a deux lignes de sous-titre.
     Utile sur une carte, de trop sur une ligne de liste. */
  .parc-nom i{display:none}
  .parc-nom span{-webkit-line-clamp:1;line-clamp:1}
  .parc{padding:11px 14px;gap:11px}
  .parc-nom{font-size:.9rem}
  .attente{font-size:1.25rem}
  .ecart{font-size:.72rem;padding:3px 8px}

  /* --- douze parcs, puis a la demande -------------------------------------
     🔴 Repli PUREMENT VISUEL : les 33 liens restent dans le HTML, rien n'est
     retire aux robots. Le script leve le repli des qu'on cherche, filtre ou
     trie — sinon `nth-child` masquerait des lignes deja retenues et un parc
     trouve resterait invisible. */
  /* 🔴 `nth-of-type` ET NON `nth-child`. Le paragraphe « aucun parc » est un
     enfant de la grille : des que le script trie, `appendChild` deplace les 33
     cartes en fin de liste et ce paragraphe remonte en PREMIERE position. Avec
     `nth-child` il comptait pour un, et une carte de trop disparaissait —
     douze annoncees, onze affichees. `nth-of-type` ne compte que les <a>. */
  .grille[data-plie] .parc:nth-of-type(n+13){display:none}
  .grille[data-plie]+.voir-plus{display:block}

  /* --- les tableaux tiennent dans l'ecran --------------------------------
     🔴 Il fallait faire glisser le tableau pour voir les barres, c'est-a-dire
     la colonne qui porte toute la lecture. En retirant « Relevés » — un
     indicateur de fiabilite, pas une information de visite — et en resserrant
     les cellules, les trois colonnes utiles tiennent sans defilement.
     ⚠️ `nth-child(4)` ne vise QUE le tableau des attractions : celui des
     jours n'a que trois colonnes. */
  table{min-width:0;font-size:.86rem}
  th{font-size:.62rem;letter-spacing:.07em;padding:11px 12px}
  td{padding:11px 12px}
  th:nth-child(4),td:nth-child(4){display:none}
  .piste{min-width:40px}
  .rang{width:22px;height:22px;font-size:.72rem;border-radius:7px}
  /* --- la barre de commandes reste atteignable --------------------------
     Une fois descendu dans les 33 parcs, filtrer obligeait a tout remonter —
     alors que filtrer sur la France ramene 33 parcs a 5.
     🔴 `overflow:hidden` sur .tdb aurait ANNULE le collant : il cree un
     conteneur de defilement. `clip` decoupe les angles arrondis sans en
     creer un. Sur un navigateur trop ancien, les angles ne sont pas rognes ;
     le collant, lui, fonctionne. */
  .tdb{overflow:clip}
  .tdb-tete{position:sticky;top:72px;z-index:20}

  /* --- les captures defilent lateralement -------------------------------
     🔴 Le plus gros bloc de la page : cinq captures empilees, 4 194 px, soit
     cinq ecrans pour un seul argument. En colonne unique la grille les met
     bout a bout — c est la mise en page bureau qui tombe a la verticale.
     Un rail horizontal a calage : ~560 px au lieu de 4 194. C est aussi le
     geste que tout le monde connait, l App Store presente ses captures ainsi.
     ⚠️ Aucun JavaScript : `scroll-snap` est natif. Et la carte suivante
     depasse volontairement de l ecran — c est ce debord qui dit qu on peut
     faire glisser, sans avoir besoin d une barre de defilement. */
  .captures{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:-24px;padding-inline:24px;scroll-padding-inline:24px}
  .captures::-webkit-scrollbar{display:none}
  .capture{flex:0 0 72%;scroll-snap-align:start}
  /* Le survol souleve la carte : sur un rail, ca la ferait deborder. */
  .capture:hover{transform:none;box-shadow:var(--ombre)}

  /* --- respiration ------------------------------------------------------
     76 px de marge par section, c'est un quart d'un ecran de 667 px. */
  section{padding:60px 0}
  .entete{margin-bottom:32px}
  .tdb{margin-top:40px}
}

/* Sous 400 px le libelle du bouton App Store est deja masque ; le menu
   deroulant prend sa place dans la barre sans la faire deborder. */
/* Sous 380 px, « Chercher un parc » ne tient plus a cote du menu pays : le
   texte etait coupe a « Chercher un pa ». Chacun prend sa ligne — une ligne
   de plus vaut mieux qu un libelle ampute. */
@media(max-width:380px){.champ,.champ-select{flex:1 1 100%}}

@media(max-width:400px){.menu-mobile summary{padding:9px 9px}
  /* A 320 px le tableau debordait encore de 53 px. On resserre plutot que de
     laisser une colonne hors champ. */
  th,td{padding:9px 9px}
  table{font-size:.82rem}
  .piste{min-width:30px}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveler{opacity:1;transform:none}
  .courbe .trace{stroke-dashoffset:0}
  .courbe .aire,.courbe .creux,.courbe .pic,.courbe .creux-txt,.courbe .pic-txt{opacity:1}
  .accroche em::after{transform:scaleX(1)}
}