/* Page Élite China : mise en page des sections.
   Les composants communs (couleurs, boutons, encart, billet…) sont dans elite.css.
   Retour d'Ibrahim du 02/11 au soir : « pourquoi un site aussi sombre ? » La page alterne maintenant
   des zones lumineuses (lueurs rouges, aplats rouges, sections blanches) et des vidéos plus claires. */

:root{
  --c-texte:#120708;               /* le texte sur fond blanc : le noir laqué */
  --c-doux:rgba(18,7,8,.72);
  --c-pale:rgba(18,7,8,.52);
  --c-trait:rgba(18,7,8,.12);
}

/* ---------- Les vidéos : une image dessous, la vidéo par-dessus dès qu'elle joue ---------- */
.video-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-attente{opacity:0;transition:opacity .5s}
.video-attente.joue{opacity:1}

/* ---------- Apparitions ---------- */
[data-apparait]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
[data-apparait].vu{opacity:1;transform:none}

/* ---------- Blocs ---------- */
.bloc{position:relative;max-width:calc(1240px + 2 * var(--marge));margin:0 auto;padding:96px var(--marge)}
.bloc-num{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--pale)}
.bloc-num span{color:var(--or)}
.bloc-num::after{content:"";flex:0 0 44px;height:1px;background:var(--trait)}
.bloc-titre{margin-top:16px;font:400 clamp(48px,14vw,108px)/.92 var(--titre);text-transform:uppercase;letter-spacing:.005em}
.bloc-titre em{font-style:normal;color:var(--rouge)}
.bloc-texte{margin-top:16px;font-size:17px;line-height:1.55;color:var(--doux);max-width:34em}
.respiration{padding-top:84px;padding-bottom:40px}

/* Les zones claires : fond blanc, texte noir laqué, accents rouges (l'or ne se lit pas sur le blanc) */
.zone-claire{position:relative;background:
  radial-gradient(60% 70% at 100% 0%,rgba(215,20,26,.09),rgba(215,20,26,0) 70%),
  radial-gradient(50% 60% at 0% 100%,rgba(246,195,67,.12),rgba(246,195,67,0) 70%),
  var(--blanc);color:var(--c-texte)}
.zone-claire .bloc-num{color:var(--c-pale)}
.zone-claire .bloc-num span{color:var(--rouge)}
.zone-claire .bloc-num::after{background:var(--c-trait)}
.zone-claire .bloc-texte{color:var(--c-doux)}
.zone-claire .point-or,.zone-claire .point-or::after{background:var(--rouge)}
.zone-claire .rond{background:var(--blanc);color:var(--c-texte);box-shadow:inset 0 0 0 1.5px rgba(18,7,8,.22),0 10px 24px -14px rgba(18,7,8,.5)}
.zone-claire .lien-question{color:var(--c-doux)}
.zone-claire .lien-question svg{color:#1faa53}
.zone-claire .lien-question span::after{background:var(--rouge)}

/* Les zones de lueur : la nuit éclairée de rouge, comme un néon dans la brume */
.zone-lueur{position:relative;overflow:hidden;background:
  radial-gradient(75% 55% at 50% 64%,rgba(232,38,44,.78),rgba(142,10,16,.5) 42%,rgba(18,7,8,0) 76%),
  radial-gradient(50% 40% at 85% 10%,rgba(246,195,67,.16),rgba(246,195,67,0) 70%),
  linear-gradient(180deg,#1d0809 0%,#2c0b0d 55%,#170708 100%)}

/* Les bandes rouges : un aplat lumineux, un reflet blanc qui glisse en biais */
.bande-rouge{position:relative;overflow:hidden;background:
  radial-gradient(80% 140% at 88% -10%,rgba(255,255,255,.26),rgba(255,255,255,0) 58%),
  linear-gradient(120deg,#ea2a30 0%,var(--rouge) 45%,var(--rouge-profond) 100%)}

/* =========================================================
   1. LE GLOBE : la Terre de nuit, rouge et lumineuse, « CHINA » au-dessus
   ========================================================= */
.globe-scene{
  --gy:44%;                    /* centre vertical du globe */
  --gr:min(33vw,17svh);        /* rayon du globe à l'écran */
  position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(circle at 50% var(--gy),rgba(232,38,44,.62) 0%,rgba(215,20,26,.3) calc(var(--gr) * 1.5),rgba(142,10,16,.16) calc(var(--gr) * 2.4),rgba(18,7,8,0) calc(var(--gr) * 3.6)),
    linear-gradient(180deg,#2e0b0e 0%,#1c0809 60%,#140708 100%);
}
.lueur-globe{left:50%;top:var(--gy);width:calc(var(--gr) * 5.2);height:calc(var(--gr) * 5.2);max-width:none;max-height:none;
  margin:calc(var(--gr) * -2.6) 0 0 calc(var(--gr) * -2.6);z-index:-3}
.filigrane-globe{z-index:-2;left:50%;top:var(--gy);font-size:calc(var(--gr) * 1.7);margin:calc(var(--gr) * -1.2) 0 0 calc(var(--gr) * -1.7);opacity:0;
  background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.03) 66%,rgba(255,255,255,0) 100%);-webkit-background-clip:text;background-clip:text}
/* « CHINA » au-dessus de la Terre : le globe ne mord que le bas des lettres, le mot reste lisible en entier */
.mot-china,.mot-china-halo{position:absolute;z-index:-1;left:0;right:0;bottom:calc(100% - var(--gy) + var(--gr) - .2em);display:flex;justify-content:center;
  font:400 min(46vw,20svh)/.86 var(--titre);letter-spacing:.01em;pointer-events:none;padding-top:.1em}
/* Les lettres montent derrière un cache (overflow) ; leur lueur rouge vit sur une copie du mot, jamais rognée :
   rognée par le cache, elle dessinait des bords nets autour du mot (retour d'Ibrahim, 02/11) */
.mot-china{color:var(--blanc);overflow:hidden}
.mot-china-halo{z-index:-2;color:transparent;text-shadow:0 0 .35em rgba(232,38,44,.55)}
.mot-china span,.mot-china-halo span{display:block;will-change:transform}
.js .mot-china span{transform:translateY(110%)}
.js .mot-china-halo{opacity:0}

.globe{position:absolute;inset:0;z-index:0}
.globe-images{position:absolute;inset:0;transition:opacity .9s ease}
.globe-image{position:absolute;left:50%;top:var(--gy);width:calc(var(--gr) * 2.6);height:calc(var(--gr) * 2.6);
  margin:calc(var(--gr) * -1.3) 0 0 calc(var(--gr) * -1.3);object-fit:contain}
.globe-image-chine{opacity:0}
.globe-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s ease}
.globe-3d .globe-canvas{opacity:1}
.globe-3d .globe-images{opacity:0}
.etiquette-lieu{position:absolute;left:0;top:0;display:flex;align-items:center;gap:7px;padding:5px 10px 5px 0;border-radius:999px;opacity:0;white-space:nowrap;pointer-events:none;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blanc);background:rgba(18,7,8,.55);will-change:transform,opacity}
.etiquette-lieu i{width:14px;height:1px;background:currentColor;opacity:.7}
.etiquette-or{color:var(--or)}

/* L'arrivée : Hongya Cave illuminée au crépuscule, le titre posé dessus */
.arrivee{position:absolute;z-index:1;inset:0;overflow:hidden;opacity:0;visibility:hidden;background:#3a1a10}
.arrivee-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.arrivee-voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,7,8,.5) 0%,rgba(18,7,8,0) 18%,rgba(18,7,8,0) 46%,rgba(18,7,8,.5) 66%,rgba(18,7,8,.86) 100%)}
.brume{position:absolute;z-index:2;inset:-20%;pointer-events:none;opacity:0;visibility:hidden;
  background:radial-gradient(closest-side,rgba(255,236,200,.55),rgba(246,195,67,.35) 30%,rgba(215,20,26,.45) 55%,rgba(18,7,8,0) 100%)}

.barre{position:absolute;z-index:5;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(16px + env(safe-area-inset-top)) var(--marge) 0}
.barre-reserver{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:999px;font-size:13px;font-weight:650;
  background:rgba(18,7,8,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);transition:background .3s}
.barre-reserver span{color:var(--or);font-variant-numeric:tabular-nums}

/* Avant le départ : l'essentiel lisible tout de suite */
.depart{position:absolute;z-index:4;left:var(--marge);right:var(--marge);bottom:calc(16px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px}
.depart-titre{font:400 44px/1 var(--titre);text-transform:uppercase;letter-spacing:.01em}
.depart-infos{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;font-size:14.5px;font-weight:650;color:var(--doux)}
.depart-infos b{width:4px;height:4px;border-radius:50%;background:var(--or);margin:0 10px}
.depart .bouton{margin-top:6px;width:100%;max-width:380px}
.defile{display:flex;align-items:center;gap:10px;margin-top:2px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--pale)}
.defile-trait{position:relative;width:1px;height:24px;background:rgba(255,255,255,.18);overflow:hidden}
.defile-trait::after{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background:var(--or);animation:goutte 1.9s var(--ease-io) infinite}
@keyframes goutte{0%{transform:translateY(-100%)}65%,100%{transform:translateY(100%)}}

/* À l'arrivée : le titre */
.final{position:absolute;z-index:4;left:var(--marge);right:var(--marge);bottom:calc(20px + env(safe-area-inset-bottom))}
.js .final{visibility:hidden}
.final .surtitre{margin-bottom:12px}
.final .titre-geant{margin-top:.1em;text-shadow:0 .03em .3em rgba(18,7,8,.35)}
.js .final .ligne > span{transform:translateY(106%)}
.accroche{margin-top:12px;max-width:26em;font-size:17px;line-height:1.42;color:rgba(255,255,255,.9)}
.faits{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;row-gap:6px;font-size:15px;font-weight:650}
.faits li{display:inline-flex;align-items:center;white-space:nowrap}
.faits li + li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--or);margin:0 11px}
.actions{margin-top:20px;display:flex;flex-direction:column;gap:8px}
.actions .bouton,.actions .bouton-ghost{width:100%}
.actions .bouton-ghost::before{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}

.villes-liste{display:none}

/* Sans 3D (mouvement réduit, ou téléphone trop lent) : une image fixe de la Terre, puis le titre */
.statique .globe-scene{--gy:40%;--gr:min(34vw,17svh)}
.statique .mot-china span{transform:none}
.statique .mot-china-halo{opacity:1}
.statique .globe-image-france{opacity:0}
.statique .globe-image-chine{opacity:1}
.statique .depart{display:none}
.statique .final,.statique .villes-liste{visibility:visible}
.statique .final .ligne > span{transform:none}

@media (min-width:900px){
  .globe-scene{--gy:56%;--gr:min(25svh,18vw)}
  .mot-china,.mot-china-halo{font-size:min(17vw,30svh)}
  .depart{left:var(--marge);right:auto;bottom:48px;align-items:flex-start;text-align:left;max-width:460px}
  .depart-titre{font-size:58px}
  .depart-infos{justify-content:flex-start}
  .depart .bouton{width:auto}
  .arrivee-voile{background:
    linear-gradient(90deg,rgba(18,7,8,.72) 0%,rgba(18,7,8,.32) 38%,rgba(18,7,8,0) 64%),
    linear-gradient(180deg,rgba(18,7,8,.45) 0%,rgba(18,7,8,0) 16%,rgba(18,7,8,0) 58%,rgba(18,7,8,.7) 100%)}
  .final{right:auto;bottom:60px;max-width:72vw}
  .final .titre-geant{font-size:min(calc((100vw - 2 * var(--marge)) * .66 / 4.32),236px)}
  .accroche{font-size:20px;margin-top:16px}
  .faits{font-size:16px;margin-top:18px}
  .actions{flex-direction:row;align-items:center;gap:12px;margin-top:28px}
  .actions .bouton,.actions .bouton-ghost{width:auto}
  .statique .globe-scene{--gy:54%;--gr:min(23svh,17vw)}

  .villes-liste{display:block;position:absolute;z-index:5;right:var(--marge);top:50%;transform:translateY(-50%)}
  .js .villes-liste{visibility:hidden}
  .villes-liste ol{position:relative;display:flex;flex-direction:column;gap:22px;padding-right:26px}
  .villes-liste ol::after{content:"";position:absolute;right:3px;top:4px;bottom:4px;width:1px;background:rgba(255,255,255,.3)}
  .villes-liste a{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:12px;font-size:12.5px;font-weight:650;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75);text-shadow:0 1px 8px rgba(18,7,8,.6);transition:color .3s}
  .villes-liste a::after{content:"";position:absolute;right:-26px;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6);z-index:1}
  .villes-liste a b{font-weight:650;color:var(--or);font-variant-numeric:tabular-nums}
  .villes-liste li:first-child a{color:var(--blanc)}
  .villes-liste li:first-child a::after{width:11px;height:11px;right:-28px;background:var(--or);box-shadow:0 0 0 5px rgba(246,195,67,.25)}
}
@media (hover:hover) and (pointer:fine){
  .villes-liste a:hover{color:var(--blanc)}
  .barre-reserver:hover{background:var(--rouge)}
}

/* =========================================================
   2. LES 5 VILLES : la carte suivante grandit et devient le fond
   ========================================================= */
.villes{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;isolation:isolate;background:var(--noir)}
.villes-scene{position:absolute;inset:0}
.ville{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;transform-origin:0 0;background:#2a1414;
  will-change:transform;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ville.active{cursor:default}
.ville-media{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform}
.ville-media video,.ville-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Le voile ne couvre que la zone du texte : le reste de la vidéo reste lumineux */
.ville-voile-fond{position:absolute;inset:0;transition:opacity .9s var(--ease);
  background:linear-gradient(180deg,rgba(18,7,8,.78) 0%,rgba(18,7,8,.5) 30%,rgba(18,7,8,0) 52%,rgba(18,7,8,0) 62%,rgba(18,7,8,.55) 86%,rgba(18,7,8,.8) 100%)}
.ville-voile-carte{position:absolute;inset:0;opacity:0;background:linear-gradient(180deg,rgba(18,7,8,0) 45%,rgba(18,7,8,.85) 100%);transition:opacity .5s}
/* Une ville est soit le fond (voile pour le texte), soit une carte (son nom en bas) */
.ville.carte .ville-voile-fond{opacity:0}
.ville.carte .ville-voile-carte{opacity:1}
.ville-carte{position:absolute;left:0;bottom:0;transform-origin:0 100%;padding:10px 10px 11px;display:flex;flex-direction:column;gap:3px;opacity:0;transition:opacity .35s;pointer-events:none}
.ville.carte .ville-carte{opacity:1}
.ville-carte b{font:400 16px/1 var(--titre);font-weight:400;text-transform:uppercase;letter-spacing:.02em}
.ville-carte span{font-size:10.5px;font-weight:650;color:var(--doux);white-space:nowrap}

/* Les emplacements des cartes (mesurés par le script). Sur téléphone, le bas de l'écran reste à la barre d'action. */
.villes-emplacements{position:absolute;z-index:-1;visibility:hidden;display:flex;gap:10px;left:var(--marge);bottom:calc(150px + env(safe-area-inset-bottom))}
.villes-emplacements span{flex:none;width:27vw;height:calc(27vw * 1.42)}

.villes-texte{position:absolute;z-index:6;left:var(--marge);right:var(--marge);top:calc(62px + env(safe-area-inset-top));pointer-events:none;text-shadow:0 1px 18px rgba(18,7,8,.45)}
.villes-texte a{pointer-events:auto}
.villes-surtitre{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.ville-han{z-index:-1;font-size:min(46vw,190px);left:-4px;top:4px;opacity:.9}
.ville-nom{position:relative;margin-top:14px;height:.98em;overflow:hidden;font:400 clamp(56px,17vw,150px)/1 var(--titre);text-transform:uppercase;letter-spacing:.005em}
.ville-nom span{position:absolute;left:0;top:0;white-space:nowrap;padding-top:.04em;will-change:transform}
.ville-jours{margin-top:10px;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--or)}
.ville-phrase{margin-top:10px;max-width:24em;font-size:17px;line-height:1.45;color:rgba(255,255,255,.92)}
.ville-bouton{margin-top:16px;min-height:46px;padding:0 20px}
.ville-bouton svg{width:16px;height:16px}
.ville-bouton::before{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}

.villes-fil{display:none}
.villes-controles{position:absolute;z-index:6;left:var(--marge);right:var(--marge);bottom:calc(84px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px}
.rond{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;border:0;background:rgba(18,7,8,.4);color:var(--blanc);cursor:pointer;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45);transition:transform .45s var(--ease),opacity .3s;-webkit-tap-highlight-color:transparent}
.rond svg{width:20px;height:20px}
.rond:active{transform:scale(.92)}
.rond:disabled{opacity:.35;cursor:default}
.rond:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.villes-compte{margin-left:auto;font:650 14px/1 var(--texte);letter-spacing:.12em;color:rgba(255,255,255,.88);font-variant-numeric:tabular-nums;text-shadow:0 1px 8px rgba(18,7,8,.6)}
.villes-compte b{display:inline-block;color:var(--or);font-weight:650}

@media (min-width:900px){
  .villes-emplacements{left:54vw;bottom:auto;top:50%;transform:translateY(-36%);gap:20px}
  .villes-emplacements span{width:clamp(180px,14.5vw,240px);height:calc(clamp(180px,14.5vw,240px) * 1.42)}
  .ville-voile-fond{background:
    linear-gradient(90deg,rgba(18,7,8,.72) 0%,rgba(18,7,8,.38) 32%,rgba(18,7,8,0) 56%),
    linear-gradient(180deg,rgba(18,7,8,.35) 0%,rgba(18,7,8,0) 18%,rgba(18,7,8,0) 78%,rgba(18,7,8,.45) 100%)}
  .ville-carte{padding:16px 16px 17px;gap:5px}
  .ville-carte b{font-size:24px}
  .ville-carte span{font-size:12px}
  .villes-texte{left:calc(var(--marge) + 64px);right:auto;top:50%;transform:translateY(-54%);width:min(44vw,640px)}
  .ville-han{font-size:min(22vw,320px);top:-40px}
  .ville-nom{font-size:min(9.6vw,150px)}
  .ville-phrase{font-size:19px}
  .villes-fil{display:block;position:absolute;z-index:6;left:var(--marge);top:50%;width:13px;height:min(340px,44vh);transform:translateY(-50%)}
  .villes-fil::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.35)}
  .villes-fil-or{position:absolute;left:6px;top:0;width:1px;height:100%;background:var(--or);transform:scaleY(0);transform-origin:top;transition:transform .9s var(--ease)}
  .villes-fil span{position:absolute;left:3px;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6);transition:transform .5s var(--ease),background .5s}
  .villes-fil span:nth-of-type(1){top:0}
  .villes-fil span:nth-of-type(2){top:25%}
  .villes-fil span:nth-of-type(3){top:50%}
  .villes-fil span:nth-of-type(4){top:75%}
  .villes-fil span:nth-of-type(5){top:100%}
  .villes-fil span{margin-top:-3.5px}
  .villes-fil span.fait,.villes-fil span.actif{background:var(--or)}
  .villes-fil span.actif{transform:scale(1.6)}
  .villes-controles{left:calc(var(--marge) + 64px);bottom:48px;right:var(--marge)}
}

/* =========================================================
   L'encart obligatoire : « Session sans Foire de Canton », sur une bande rouge
   ========================================================= */
.sans-foire{padding:46px 0}
.sans-foire .encart{max-width:calc(1240px + 2 * var(--marge));margin:0 auto;padding:0 var(--marge);background:none;box-shadow:none;border-radius:0}
.sans-foire .encart::before{display:none}
.sans-foire .encart-titre{font-size:clamp(34px,9vw,64px);line-height:.95}
.sans-foire .encart-titre em{color:var(--blanc);display:block}
.sans-foire .encart-texte{margin-top:14px;max-width:36em;font-size:17px;color:rgba(255,255,255,.95)}
@media (min-width:900px){
  .sans-foire{padding:64px 0}
  .sans-foire .encart{display:flex;align-items:center;justify-content:space-between;gap:48px}
  .sans-foire .encart-titre em{display:inline}
  .sans-foire .encart-texte{margin-top:0;max-width:30em;font-size:19px}
}

/* =========================================================
   3. LE JOUR PAR JOUR : la plongée au défilement
   ========================================================= */
.programme{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;isolation:isolate;background:#2a1414}
.programme-media{position:absolute;inset:0;z-index:-1}
.pg-plan{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease);transform-origin:50% 60%;will-change:transform,opacity}
.pg-plan.actif{opacity:1}
.pg-plan video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.programme-voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,7,8,.55) 0%,rgba(18,7,8,0) 18%,rgba(18,7,8,0) 55%,rgba(18,7,8,.35) 100%)}
.programme-barre{position:absolute;z-index:3;top:calc(16px + env(safe-area-inset-top));left:var(--marge);right:var(--marge);display:flex;gap:4px}
.programme-barre li{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.45);overflow:hidden;box-shadow:0 1px 6px rgba(18,7,8,.3)}
.programme-barre li.fait{background:var(--or)}
.programme-barre li i{display:block;height:100%;background:var(--or);transform:scaleX(0);transform-origin:left;will-change:transform}
.programme-tete{position:absolute;z-index:3;top:calc(32px + env(safe-area-inset-top));left:var(--marge);right:var(--marge);display:flex;align-items:center;justify-content:space-between;gap:12px;text-shadow:0 1px 10px rgba(18,7,8,.6)}
.programme-tete .bloc-num{color:rgba(255,255,255,.9)}
.programme-tete .bloc-num::after{display:none}
.programme-compte{font-size:13px;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.9);font-variant-numeric:tabular-nums}
.programme-compte b{color:var(--or);font-weight:700}
.programme-points{display:none}
.programme-cartes{position:absolute;z-index:3;left:var(--marge);right:var(--marge);bottom:calc(86px + env(safe-area-inset-bottom))}
/* La carte du jour, blanche : elle se lit d'un coup d'œil sur n'importe quelle image */
.programme .carte-jour{position:absolute;left:0;bottom:0;opacity:0;visibility:hidden;transform:translateY(22px);
  background:rgba(255,255,255,.97);color:var(--c-texte);box-shadow:0 30px 60px -28px rgba(18,7,8,.75);
  transition:opacity .55s var(--ease),transform .7s var(--ease),visibility 0s .7s}
.programme .carte-jour.actif{opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease) .12s,transform .8s var(--ease) .12s,visibility 0s}
.programme .cj-quand{color:var(--c-doux)}
.programme .cj-quand i{background:var(--c-pale)}
.programme .cj-programme{color:var(--c-doux)}
.programme .cj-apprends{border-top-color:var(--c-trait)}
.programme .cj-label{color:var(--rouge)}
/* Sur téléphone, une carte compacte : le texte ne mange pas la vidéo (retour d'Ibrahim, 02/11 : « trop gros ») */
.programme .carte-jour{max-width:none;padding:14px 16px 15px}
.programme .cj-jour{font-size:25px}
.programme .cj-quand{font-size:12.5px}
.programme .cj-programme{margin-top:7px;font-size:13.5px;line-height:1.42}
.programme .cj-apprends{margin-top:10px;padding-top:9px}
.programme .cj-label{font-size:10.5px}
.programme .cj-lecon{margin-top:3px;font-size:15.5px;line-height:1.3}
.programme .cj-fort{margin-top:10px;padding:6px 12px 6px 10px;font-size:12px}
.programme .cj-fort svg{width:13px;height:13px}
@media (min-width:900px){
  .programme-voile{background:
    linear-gradient(90deg,rgba(18,7,8,.84) 0%,rgba(18,7,8,.66) 30%,rgba(18,7,8,.22) 52%,rgba(18,7,8,0) 68%),
    linear-gradient(180deg,rgba(18,7,8,.5) 0%,rgba(18,7,8,0) 18%,rgba(18,7,8,0) 80%,rgba(18,7,8,.35) 100%)}
  .programme-barre,.programme-compte{display:none}
  .programme-tete{top:40px}
  .programme-cartes{bottom:64px;right:auto;width:470px}
  /* Sur ordinateur, plus de petite carte en bas à gauche : le jour s'écrit en grand sur la vidéo, centré à gauche */
  html:not(.statique) .programme-cartes{top:0;bottom:0;left:calc(var(--marge) + 8px);width:min(52vw,760px)}
  html:not(.statique) .programme .carte-jour{top:50%;bottom:auto;right:0;padding:0;border-radius:0;background:none;box-shadow:none;color:var(--blanc);
    text-shadow:0 2px 26px rgba(18,7,8,.4);transform:translate3d(0,calc(-50% + 28px),0)}
  html:not(.statique) .programme .carte-jour.actif{transform:translate3d(0,-50%,0)}
  html:not(.statique) .programme .cj-tete{flex-direction:column;align-items:flex-start;gap:16px}
  html:not(.statique) .programme .cj-jour{font-size:clamp(92px,8.6vw,150px);line-height:.86}
  html:not(.statique) .programme .cj-quand{font-size:clamp(17px,1.35vw,21px);color:rgba(255,255,255,.9)}
  html:not(.statique) .programme .cj-quand i{background:rgba(255,255,255,.65)}
  html:not(.statique) .programme .cj-programme{margin-top:22px;max-width:28em;font-size:clamp(19px,1.5vw,23px);line-height:1.45;color:rgba(255,255,255,.92)}
  html:not(.statique) .programme .cj-apprends{margin-top:28px;padding-top:24px;max-width:660px;border-top-color:rgba(255,255,255,.28)}
  html:not(.statique) .programme .cj-label{font-size:13px;color:var(--or)}
  html:not(.statique) .programme .cj-lecon{margin-top:10px;font-size:clamp(28px,2.45vw,40px);line-height:1.18;letter-spacing:-.01em}
  html:not(.statique) .programme .cj-fort{margin-top:26px;padding:11px 20px 11px 16px;font-size:16px;text-shadow:none}
  html:not(.statique) .programme .cj-fort svg{width:18px;height:18px}
  .programme-points{display:flex;flex-direction:column;align-items:center;gap:18px;position:absolute;z-index:3;right:calc(var(--marge) + 6px);top:50%;transform:translateY(-50%)}
  .programme-points::before{content:"";position:absolute;top:4px;bottom:4px;left:50%;width:1px;background:rgba(255,255,255,.5)}
  .programme-fil{position:absolute;top:4px;bottom:4px;left:50%;width:1px;background:var(--or);transform:scaleY(0);transform-origin:top;will-change:transform}
  .programme-points li{position:relative;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.75);box-shadow:0 1px 6px rgba(18,7,8,.35);transition:transform .5s var(--ease),background .4s}
  .programme-points li.fait{background:var(--or)}
  .programme-points li.actif{background:var(--or);transform:scale(1.7);box-shadow:0 0 0 4px rgba(246,195,67,.3)}
  .programme-points li span{position:absolute;right:22px;top:50%;font-size:7px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--blanc);
    opacity:0;transform:translateY(-50%);transition:opacity .4s;text-shadow:0 1px 6px rgba(18,7,8,.8)}
  .programme-points li.actif span{opacity:1}
}

/* =========================================================
   4. USINES ET MARCHÉS : l'anneau de cartes en 3D, dans une lueur rouge
   ========================================================= */
.tunnel{position:relative;height:min(78svh,620px);min-height:440px}
.tunnel-scene{position:absolute;inset:0;perspective:1100px;perspective-origin:50% 45%;overflow:hidden}
.tunnel-anneau{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
/* Pas de backface-visibility : sur iPhone, une vidéo dans une carte qui la cache s'affiche en noir.
   Le script masque lui-même les cartes de dos. */
.tunnel-carte{--l:172px;--h:244px;position:absolute;left:calc(var(--l) / -2);top:calc(var(--h) / -2);width:var(--l);height:var(--h);
  border:0;padding:0;border-radius:16px;overflow:hidden;background:#3a1a1a;cursor:pointer;color:var(--blanc);text-align:left;font-family:var(--texte);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 24px 44px -18px rgba(18,7,8,.85);-webkit-tap-highlight-color:transparent}
.tunnel-carte img,.tunnel-carte video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tunnel-carte video{opacity:0;transition:opacity .4s}
.tunnel-carte video.joue{opacity:1}
.tunnel-carte::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,7,8,0) 50%,rgba(18,7,8,.85) 100%)}
.tc-texte{position:absolute;z-index:1;left:12px;right:12px;bottom:11px;display:flex;flex-direction:column;gap:3px}
.tc-texte b{font:400 19px/1 var(--titre);text-transform:uppercase;letter-spacing:.01em}
.tc-texte span{font-size:11px;font-weight:650;color:rgba(255,255,255,.85)}
.tunnel-carte:focus-visible{outline:2px solid var(--or);outline-offset:3px}
@media (min-width:900px){
  .tunnel{height:min(82svh,700px)}
  .tunnel-carte{--l:224px;--h:316px}
  .tc-texte b{font-size:24px}
}
/* Téléphone : la roue qui tourne seule. Chaque carte a sa propre perspective (pas de 3D imbriquée, plus sûr sur iPhone),
   et le doigt peut la faire tourner sans bloquer le défilement vertical de la page. */
.roue-tel{touch-action:pan-y;-webkit-user-select:none;user-select:none}
.roue-tel .tunnel-scene{perspective:none}
.roue-tel .tunnel-anneau{transform-style:flat;perspective:1100px}
.roue-tel .tunnel-carte{will-change:transform}
.roue-tel .tunnel-carte img{-webkit-user-drag:none;pointer-events:none}
.tunnel-zoom{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:var(--marge)}
.tunnel-zoom[hidden]{display:none}
.tz-fond{position:absolute;inset:0;background:rgba(18,7,8,.86)}
.tz-carte{position:relative;width:min(440px,100%);border-radius:24px;overflow:hidden;background:var(--blanc);color:var(--c-texte);box-shadow:0 40px 80px -30px rgba(0,0,0,.9);
  animation:zoom-entre .5s var(--ease)}
@keyframes zoom-entre{from{opacity:0;transform:translateY(24px) scale(.96)}}
.tz-video{display:block;width:100%;height:min(62svh,560px);object-fit:cover;background:#3a1a1a}
.tz-texte{padding:18px 20px 22px}
.tz-jour{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rouge)}
.tz-titre{margin-top:6px;font:400 34px/1 var(--titre);text-transform:uppercase}
.tz-lecon{margin-top:10px;font-size:16px;line-height:1.5;color:var(--c-doux)}
.tz-fermer{position:absolute;top:12px;right:12px}

/* La pause pour réserver : une carte blanche dans la lueur */
.pause-bloc{padding-top:8px;padding-bottom:84px}
.pause{max-width:760px;margin:0 auto;padding:24px 22px;border-radius:var(--rayon);display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  background:var(--blanc);color:var(--c-texte);box-shadow:0 30px 70px -30px rgba(18,7,8,.8)}
.pause-texte{font-size:19px;line-height:1.4;font-weight:600}
.pause-texte b{color:var(--rouge);font-weight:700}
.pause .bouton{width:100%}
@media (min-width:600px){.pause{flex-direction:row;align-items:center;justify-content:space-between}.pause .bouton{width:auto}}

/* =========================================================
   5. LES RETOURS : onze frères filmés en Chine, montages verticaux
   ========================================================= */
.retours{padding-bottom:40px}
/* Montages verticaux 9:16 (03/11) : la vidéo entière, sous-titres et marque compris, sans bandeau par-dessus */
.retours-scene{--l:min(74vw,340px);--h:calc(var(--l) * 16 / 9);position:relative;height:calc(var(--h) + 110px);overflow:hidden;perspective:1200px}
.retours-piste{position:absolute;left:50%;top:0;width:0;height:var(--h);transform-style:preserve-3d;touch-action:pan-y}
.retour{position:absolute;left:calc(var(--l) / -2);top:0;width:var(--l);height:var(--h);border-radius:22px;overflow:hidden;
  background:#2a1414;box-shadow:0 30px 60px -28px rgba(18,7,8,.75);
  transition:transform .75s var(--ease),opacity .6s var(--ease);will-change:transform;cursor:grab}
.retour-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.retour-son{position:absolute;z-index:3;top:14px;left:14px;display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 10px;border-radius:999px;border:0;cursor:pointer;
  background:var(--rouge);color:var(--blanc);font:650 13px/1 var(--texte);box-shadow:0 10px 24px -10px rgba(215,20,26,.9)}
.retour-son svg{width:16px;height:16px}
.retour-son[aria-pressed="true"]{background:var(--blanc);color:var(--rouge)}
.retours-controles{position:absolute;left:0;right:0;bottom:24px;display:flex;align-items:center;justify-content:center;gap:18px}
.retours-compte{font:650 14px/1 var(--texte);letter-spacing:.12em;color:var(--c-doux);font-variant-numeric:tabular-nums;min-width:62px;text-align:center}
.retours-compte b{color:var(--rouge);font-weight:650}

/* =========================================================
   6. LES CHIFFRES : le compteur qui roule, sur un aplat rouge
   ========================================================= */
.chiffres{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;isolation:isolate}
.chiffres-scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:0 var(--marge)}
.compteur-pilule{position:relative;width:100%;max-width:none;height:clamp(110px,30vw,190px);border-radius:999px;background:var(--blanc);overflow:hidden;
  box-shadow:0 30px 60px -24px rgba(18,7,8,.55),0 0 0 8px rgba(255,255,255,.12)}
/* Le compteur kilométrique : chaque chiffre est une colonne 0-9 qui roule ; les positions glissent en douceur */
.odo{position:absolute;inset:0;font:400 clamp(66px,19vw,128px)/1 var(--titre);color:var(--noir)}
.odo-case{position:absolute;left:50%;top:50%;height:1em;margin-top:-.5em;overflow:hidden;transition:transform .8s var(--ease-io),opacity .5s;will-change:transform}
.odo-bande{display:flex;flex-direction:column;transition:transform .9s var(--ease-io);will-change:transform}
.odo-bande span{display:block;height:1em;line-height:1.02;text-align:left;white-space:pre}
.chiffres-g,.chiffres-d{position:relative;width:100%;max-width:520px;min-height:2.6em;text-align:center}
.chiffres-g span,.chiffres-d span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.chiffres-g{font:400 34px/1 var(--titre);text-transform:uppercase;letter-spacing:.01em}
.chiffres-d{font-size:17px;line-height:1.35;font-weight:650}
.chiffres-points{display:flex;gap:8px}
.chiffres-points li{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);transition:transform .4s var(--ease),background .4s}
.chiffres-points li.actif{background:var(--blanc);transform:scale(1.4)}
@media (min-width:900px){
  .chiffres-scene{flex-direction:row;gap:40px}
  .compteur-pilule{width:min(560px,42vw);flex:none}
  .chiffres-g{order:-1;text-align:right;max-width:280px;font-size:44px}
  .chiffres-g span{justify-content:flex-end;text-align:right}
  .chiffres-d{text-align:left;max-width:280px;font-size:19px}
  .chiffres-d span{justify-content:flex-start;text-align:left}
  .chiffres-points{position:absolute;bottom:48px;left:50%;transform:translateX(-50%)}
}

/* =========================================================
   7. L'OFFRE : le billet rouge sur le blanc, ce qui est compris, réserver
   ========================================================= */
.billet-zone{margin-top:28px;display:grid;gap:30px;justify-items:center}
.billet-scene{--billet-largeur:min(340px,calc(100vw - 64px));position:relative;width:100%;height:calc(var(--billet-largeur) * 1.6471 + 80px);display:flex;align-items:center;justify-content:center;perspective:1100px}
.billet-scene .lueur{left:50%;top:50%;width:620px;height:620px;margin:-310px 0 0 -310px;background:radial-gradient(closest-side,rgba(215,20,26,.32),rgba(215,20,26,.1) 50%,rgba(215,20,26,0))}
.billet-ombre{position:absolute;left:50%;bottom:4px;width:280px;height:44px;margin-left:-140px;border-radius:50%;background:radial-gradient(closest-side,rgba(142,10,16,.45),rgba(142,10,16,0));will-change:transform}
.billet-bonus{font-size:.78em}
.offre-details{width:100%;max-width:460px;display:flex;flex-direction:column;gap:14px}
.offre-prix{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.offre-prix b{font:400 64px/1 var(--titre);letter-spacing:.01em}
.offre-prix span{font-size:16px;font-weight:650;color:var(--c-doux)}
.offre-bonus{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--c-doux)}
.offre-details .bouton{width:100%;margin-top:4px}
.listes{margin-top:14px;display:grid;gap:22px;padding-top:20px;border-top:1px solid var(--c-trait)}
.liste-titre{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--c-pale)}
.liste{margin-top:10px;display:grid;gap:9px}
.liste li{position:relative;padding-left:26px;font-size:15px;line-height:1.45;color:var(--c-doux)}
.liste li::before{content:"";position:absolute;left:0;top:.2em;width:16px;height:16px;border-radius:50%}
.liste-oui li::before{background:var(--rouge) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.liste-non li::before{box-shadow:inset 0 0 0 1.5px rgba(18,7,8,.3);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5l5 5M10.5 5.5l-5 5' fill='none' stroke='rgba(18,7,8,.55)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat}
@media (min-width:900px){
  .billet-zone{grid-template-columns:1fr 1fr;align-items:center;margin-top:10px}
  .billet-scene{--billet-largeur:380px;height:calc(var(--billet-largeur) * 1.6471 + 140px)}
  .billet-ombre{width:320px;margin-left:-160px}
  .listes{grid-template-columns:1fr 1fr}
}

/* =========================================================
   Les questions
   ========================================================= */
.faq{padding-top:40px}
.faq-liste{margin-top:30px;max-width:820px;display:grid;gap:10px}
.faq-liste details{border-radius:18px;background:rgba(215,20,26,.05);box-shadow:inset 0 0 0 1px rgba(215,20,26,.12);overflow:hidden}
.faq-liste summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;font-size:17px;font-weight:650;color:var(--c-texte);-webkit-tap-highlight-color:transparent}
.faq-liste summary::-webkit-details-marker{display:none}
.faq-liste summary::after{content:"";flex:none;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(18,7,8,.3);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7v10M7 12h10' stroke='%23120708' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat;transition:transform .4s var(--ease)}
.faq-liste details[open] summary::after{transform:rotate(45deg);box-shadow:none;
  background:var(--rouge) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7v10M7 12h10' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat}
.faq-liste details p{padding:0 20px 18px;font-size:15.5px;line-height:1.55;color:var(--c-doux)}
.faq-liste summary:focus-visible{outline:2px solid var(--rouge);outline-offset:-2px;border-radius:18px}

/* =========================================================
   Le pied de page et la barre d'action
   ========================================================= */
.pied-zone{background:radial-gradient(80% 60% at 50% 0%,rgba(215,20,26,.35),rgba(215,20,26,0) 70%),var(--noir)}
.pied{max-width:calc(1240px + 2 * var(--marge));margin:0 auto;padding:56px var(--marge) calc(110px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.pied .signature{font-size:40px}
.reseaux{display:flex;gap:10px;justify-content:center;width:100%;max-width:440px}
.reseaux li{flex:1}
.reseaux a{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:14px;font-size:13.5px;font-weight:600;
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:background .3s,color .3s,transform .3s var(--ease)}
.reseaux a:active{transform:scale(.95)}
.pied-ligne{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--pale)}
.pied-ligne a{padding:6px 2px}
@media (hover:hover) and (pointer:fine){
  .reseaux a:hover{background:var(--rouge)}
  .pied-ligne a:hover{color:var(--blanc)}
}

/* La barre d'action : opaque, et elle s'efface dès qu'un autre bouton « Réserver » est à l'écran */
.barre-action{position:fixed;z-index:40;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:7px 7px 7px 18px;border-radius:999px;background:var(--noir);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 18px 40px -16px rgba(18,7,8,.9);
  transform:translateY(160%);transition:transform .6s var(--ease)}
.barre-action.visible{transform:none}
.barre-action p{display:flex;flex-direction:column;line-height:1.1}
.barre-action p b{font:400 22px/1 var(--titre);letter-spacing:.01em}
.barre-action p span{margin-top:3px;font-size:11.5px;font-weight:650;color:var(--pale)}
.barre-action .bouton{min-height:46px;padding:5px 5px 5px 18px;font-size:15px;gap:12px}
.barre-action .bouton-fleche{width:36px;height:36px}
@media (min-width:900px){
  .barre-action{left:auto;right:24px;bottom:24px;gap:16px}
  .pied{padding-bottom:56px}
}

/* ---------- Sans animation (réduire les animations) : chaque section reste lisible, sans épinglage ni 3D ---------- */
.statique .programme{height:auto;min-height:0;padding:24px var(--marge) 40px;background:var(--blanc)}
.statique .programme-media,.statique .programme-barre,.statique .programme-points,.statique .programme-tete{display:none}
.statique .programme-cartes{position:static;display:grid;gap:14px}
.statique .programme .carte-jour{position:relative;opacity:1;visibility:visible;transform:none;max-width:none;box-shadow:inset 0 0 0 1px var(--c-trait)}
.statique .tunnel{height:auto;min-height:0;overflow:visible}
.statique .tunnel-scene{position:static;perspective:none}
.statique .tunnel-anneau{position:static;width:auto;height:auto;display:flex;gap:12px;overflow-x:auto;padding:0 var(--marge) 20px;scroll-snap-type:x mandatory}
.statique .tunnel-carte{position:relative;left:auto;top:auto;flex:none;scroll-snap-align:center}
.statique .chiffres{height:auto;min-height:0;padding:72px 0}
.statique .chiffres-scene{position:static}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-apparait]{opacity:1;transform:none}
}