:root{--fond:#F3F2FA;--surface:#fff;--creux:#E9E7F5;--filet:#DAD8EA;--bord:#8A8EB0;--encre:#14173A;--douce:#50557A;--pale:#656A90;
--feerie:#3A32D4;--voile:#E4E2FB;--chateau:#BF2362;--chateau-clair:#FF86B3;--chateau-voile:#FCE3EC;--lanterne:#F5B544;--sur-lanterne:#2B1B00;
--nuit:#151A45;--sur-nuit:#F4F3FF;--prune:#7E2A53;--prune-voile:#F6E4EC;--dispo:#0B6B45;--dispo-voile:#DDF5EA;--lagune:#0C7379;--lagune-voile:#DDF1F1;
--ciel:#FFD9C7;--horizon:#F7A9B8;--encre-ciel:#14173A;--douce-ciel:rgba(20,23,58,.74);--bouton:#3A32D4;--sur-bouton:#fff;--etoiles:0;
--conte:"Fraunces",ui-serif,"Iowan Old Style","Palatino Linotype",Georgia,serif;--texte:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--chiffres:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,sans-serif;--marge:clamp(20px,5vw,64px)}
html[data-encre=clair]{--encre-ciel:#fff;--douce-ciel:rgba(255,255,255,.8);--bouton:#fff;--sur-bouton:#151A45}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ciel);color:var(--encre-ciel);font:17px/1.6 var(--texte);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p{margin:0}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--encre-ciel);outline-offset:4px;border-radius:8px}
.saut{position:absolute;left:16px;top:-100px;z-index:30;background:var(--surface);color:var(--encre);padding:12px 16px;border-radius:12px}
.saut:focus{top:12px}
.conte{font-family:var(--conte);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:650;letter-spacing:-.015em}
.chiffres{font-family:var(--chiffres);font-weight:800;font-variant-numeric:tabular-nums}

/* ---------- Le ciel : fixe derrière la page ---------- */
.ciel{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--ciel)}
.ciel .etoiles{position:absolute;inset:0;width:100%;height:100%;opacity:var(--etoiles)}
.ciel .etoiles circle{fill:#fff}
.ciel .aurore{position:absolute;left:0;right:0;top:0;width:100%;height:46vh;opacity:calc(var(--etoiles)*.9)}
.ciel .astre{position:absolute;left:0;top:0;width:clamp(54px,7vw,104px);aspect-ratio:1;border-radius:50%;background:var(--lanterne);will-change:transform,opacity}
.ciel .lune{position:absolute;right:11vw;top:15vh;width:clamp(48px,6vw,84px);aspect-ratio:1;border-radius:50%;background:var(--lanterne);opacity:var(--lune,0);transform:translateY(calc((1 - var(--lune,0))*40px))}
.ciel .lune::after{content:"";position:absolute;width:86%;height:86%;right:-18%;top:-10%;border-radius:50%;background:var(--ciel)}
.ciel .horizon{position:absolute;left:0;bottom:0;width:100%;height:clamp(96px,18vh,190px);display:block}
.ciel .horizon path,.ciel .horizon circle{fill:var(--horizon)}
header,main,footer{position:relative;z-index:1}

/* ---------- En-tête ---------- */
.tete{position:fixed;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(1180px,calc(100% - 20px));z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 8px 8px 14px;border-radius:999px;transition:background-color .35s ease,box-shadow .35s ease}
.tete.flotte{background:rgba(255,255,255,.76);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 10px 30px -12px rgba(20,23,58,.28)}
html[data-encre=clair] .tete.flotte{background:rgba(21,26,69,.62)}
.marque{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--encre-ciel)}
.marque svg{width:38px;height:38px;border-radius:10px;display:block}
.mot{position:relative;font-family:var(--conte);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:650;font-size:23px;line-height:1;letter-spacing:-.02em;white-space:nowrap}
.mot i{position:relative;font-style:normal}
.mot i::after{content:"";position:absolute;left:.03em;right:.12em;bottom:-.16em;height:.075em;border-radius:1em;background:currentColor;opacity:.9}
.mot i::before{content:"";position:absolute;right:-.05em;bottom:-.225em;width:.2em;height:.2em;border-radius:50%;background:var(--chateau)}
html[data-encre=clair] .mot i::before{background:var(--chateau-clair)}
.tete nav{display:flex;align-items:center;gap:6px}
.tete nav a.lien{padding:10px 12px;font-size:15px;font-weight:600;text-decoration:none;color:var(--encre-ciel)}
.pastille{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;background:var(--bouton);color:var(--sur-bouton);font-weight:650;font-size:15px;text-decoration:none;white-space:nowrap;transition:transform .16s ease}
.pastille:hover{transform:translateY(-1px)}
.pastille.grande{min-height:58px;padding:0 28px;font-size:18px}
@media (max-width:520px){.tete nav a.lien{display:none}.tete nav a.lien.langue{display:inline-block;padding:10px 8px}}

/* ---------- Ouverture ---------- */
.ouverture{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(24px,5vw,72px);padding:clamp(104px,14vh,150px) var(--marge) clamp(60px,10vh,120px);max-width:1280px;margin:0 auto}
.etiquette{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:0 13px;border-radius:999px;background:rgba(255,255,255,.62);color:#14173A;font-size:12px;font-weight:750;letter-spacing:.07em;text-transform:uppercase}
html[data-encre=clair] .etiquette{background:rgba(255,255,255,.16);color:#fff}
.ouverture h1{font-size:clamp(46px,8.2vw,112px);line-height:.96;letter-spacing:-.025em;margin:22px 0 26px;text-wrap:balance}
.souligne{position:relative;white-space:nowrap}
.souligne::after{content:"";position:absolute;left:.02em;right:.2em;bottom:-.02em;height:.07em;border-radius:1em;background:var(--feerie);transform-origin:left;transform:scaleX(var(--trait,1))}
.souligne::before{content:"";position:absolute;right:.02em;bottom:-.09em;width:.2em;height:.2em;border-radius:50%;background:var(--chateau);transform:scale(var(--point,1))}
.chapo{font-size:clamp(18px,2vw,22px);line-height:1.5;max-width:33em;color:var(--douce-ciel)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:34px}
.suite{font-weight:650;text-underline-offset:5px}
.precision{margin-top:18px;font-size:14px;color:var(--douce-ciel)}

/* ---------- Le téléphone : l'app, vivante ---------- */
.scene{display:flex;justify-content:center;perspective:1400px}
.tel{position:relative;width:310px;flex:none;border-radius:50px;background:#14173A;padding:9px;box-shadow:0 40px 80px -30px rgba(20,23,58,.55),0 0 0 1px rgba(255,255,255,.08) inset;transform:rotateX(var(--rx,4deg)) rotateY(var(--ry,-9deg));transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform}
.ecran{position:relative;border-radius:42px;overflow:hidden;background:var(--fond);color:var(--encre);height:612px;font-size:13px;line-height:1.35}
.ecran .encoche{position:absolute;left:50%;top:9px;width:84px;height:24px;margin-left:-42px;border-radius:14px;background:#14173A;z-index:3}
.t-ciel{position:relative;height:124px;background:#BFE3FA;overflow:hidden}
.t-ciel svg{position:absolute;inset:0;width:100%;height:100%}
.t-ciel b{position:absolute;left:16px;bottom:40px;font-family:var(--conte);font-weight:650;font-size:25px;letter-spacing:-.01em}
.t-ciel span{position:absolute;left:16px;bottom:24px;font-size:10.5px;font-weight:650}
.t-corps{padding:0 12px}
.t-carte{background:var(--surface);border-radius:18px;overflow:hidden;box-shadow:0 6px 18px rgba(20,23,58,.1)}
.t-photo{position:relative;height:104px;background:#8CCBF5;overflow:hidden}
.t-photo svg{position:absolute;inset:0;width:100%;height:100%}
.t-photo .voile{position:absolute;left:0;right:0;bottom:0;height:64%;background:linear-gradient(to top,rgba(21,26,69,.88),rgba(21,26,69,0))}
.t-photo h3{position:absolute;left:12px;bottom:9px;color:#F4F3FF;font-family:var(--conte);font-weight:650;font-size:18px}
.vive{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:99px;background:var(--chateau);color:#fff;font-size:10px;font-weight:750}
.battement{position:relative;width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.battement::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid currentColor;animation:bat 1.8s ease-out infinite}
@keyframes bat{0%{transform:scale(.6);opacity:.75}70%,100%{transform:scale(1.6);opacity:0}}
.t-faits{display:flex;align-items:center;gap:12px;padding:11px 12px 4px}
.jeton{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;flex:none;width:52px;height:52px;border-radius:17px;background:#3DD598;color:#06281A;font-family:var(--chiffres)}
.jeton b{font-size:22px;line-height:22px;font-weight:800;font-variant-numeric:tabular-nums}
.jeton small{font-size:9px;line-height:10px;font-weight:800;letter-spacing:.06em}
.jeton i{display:flex;gap:3px;margin-top:3px}
.jeton i u{width:4.5px;height:4.5px;border-radius:50%;background:currentColor;opacity:.28}
.jeton i u.p{opacity:1}
.jeton.n2{background:#F5C73B;color:#2B2000}.jeton.n3{background:#F0853A;color:#2A1300}.jeton.n4{background:#C4244A;color:#fff}.jeton.n0{background:#5E6385;color:#fff}
.jeton.xl{width:66px;height:66px;border-radius:22px}.jeton.xl b{font-size:30px;line-height:30px}
.jeton .mot2{font-size:10px;line-height:11px;font-weight:800;text-align:center}
.jeton .roule{display:block;height:1em;overflow:hidden}
.jeton .roule span{display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.t-faits .marche b{font-family:var(--chiffres);font-weight:800;font-size:17px}
.puce-v{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:99px;background:var(--dispo-voile);color:var(--dispo);font-size:9.5px;font-weight:750;margin-top:3px}
.t-raison{display:flex;gap:8px;align-items:flex-start;padding:6px 12px 10px;font-size:11.5px;color:var(--encre)}
.t-raison .battement{color:var(--chateau);margin-top:4px}
.t-boutons{display:flex;gap:6px;padding:0 12px 12px}
.t-boutons span{flex:1;display:flex;align-items:center;justify-content:center;height:36px;border-radius:99px;background:var(--feerie);color:#fff;font-weight:650;font-size:12.5px}
.t-boutons span + span{flex:.7;background:var(--voile);color:var(--feerie)}
.t-titre{font-weight:750;font-size:14px;margin:14px 2px 8px}
.t-fil{position:relative;height:214px;padding-left:34px}
.t-fil svg{position:absolute;left:0;top:0;width:34px;height:100%;overflow:visible}
.t-fil .plein{fill:none;stroke:var(--feerie);stroke-width:2.5;stroke-linecap:round}
.t-fil .pointille{fill:none;stroke:var(--feerie);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1 7;opacity:.75}
.billet{position:absolute;left:34px;right:0;height:50px;display:flex;align-items:center;gap:8px;padding:0 10px;background:var(--surface);border-radius:15px;box-shadow:0 4px 12px rgba(20,23,58,.08);transition:transform .7s cubic-bezier(.2,.9,.2,1),opacity .4s ease}
.billet .tx{flex:1;min-width:0}
.billet .tx small{display:block;font-family:var(--chiffres);font-weight:700;font-size:10px;color:var(--douce)}
.billet .tx b{display:block;font-size:12.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.billet .jeton{width:36px;height:36px;border-radius:12px}.billet .jeton b{font-size:15px;line-height:15px}.billet .jeton small{font-size:7px;line-height:8px}.billet .jeton i{display:none}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:99px;font-size:9.5px;font-weight:750;background:var(--prune-voile);color:var(--prune)}
.b1{transform:translateY(0)}.b2{transform:translateY(58px)}.b3{transform:translateY(116px)}
.ajuste{position:absolute;left:34px;right:0;top:116px;padding:8px 10px;border-radius:15px;background:var(--chateau-voile);font-size:10.5px;line-height:1.3;opacity:0;transform:translateY(10px) scale(.97);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.9,.2,1)}
.ajuste b{display:block;color:var(--chateau);font-size:9.5px}
.tel[data-etat="2"] .b2,.tel[data-etat="3"] .b2{transform:translateY(174px)}
.tel[data-etat="2"] .b3,.tel[data-etat="3"] .b3{transform:translateY(58px)}
.tel[data-etat="2"] .ajuste,.tel[data-etat="3"] .ajuste{opacity:1;transform:none}
.t-barre{position:absolute;left:12px;right:12px;bottom:12px;height:46px;border-radius:99px;background:rgba(255,255,255,.92);box-shadow:0 8px 24px rgba(20,23,58,.18);display:flex;align-items:center;justify-content:space-around;z-index:2}
.t-barre u{width:20px;height:20px;border-radius:7px;background:var(--creux)}
.t-barre u:first-child{background:var(--feerie)}

/* ---------- Le parcours : le Fil descend la page ---------- */
.parcours{position:relative;max-width:1180px;margin:0 auto;padding:0 var(--marge) 40px}
.fil{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.fil path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.fil .fond-fil{stroke:var(--encre-ciel);stroke-width:3;stroke-dasharray:1 10;opacity:.28}
.fil .trace{stroke:var(--feerie);stroke-width:4}
html[data-encre=clair] .fil .trace{stroke:#fff}
.pouls{position:absolute;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--chateau);color:var(--chateau);z-index:3;will-change:transform;opacity:0}
html[data-encre=clair] .pouls{background:var(--chateau-clair);color:var(--chateau-clair)}
.pouls::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2.5px solid currentColor;animation:bat 1.8s ease-out infinite}
.js .pouls{opacity:1}
.etape{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);align-items:center;min-height:86svh;padding:8svh 0}
.etape .texte{grid-column:1}
.etape .vitrine{grid-column:3;display:flex;justify-content:center}
.etape.inverse .texte{grid-column:3}
.etape.inverse .vitrine{grid-column:1;grid-row:1}
.repere{grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px}
.etape:nth-child(even) .repere{transform:translateX(26px)}
.etape:nth-child(odd) .repere{transform:translateX(-26px)}
.repere .noeud{width:22px;height:22px;border-radius:50%;background:var(--ciel);border:4px solid var(--encre-ciel);opacity:.45;transition:transform .5s cubic-bezier(.2,1.6,.4,1),opacity .3s,background .3s,border-color .3s}
.repere.atteint .noeud{opacity:1;transform:scale(1.15);background:var(--lanterne);border-color:var(--lanterne)}
.repere .heure{font-family:var(--chiffres);font-weight:800;font-size:15px;padding:4px 12px;border-radius:99px;background:var(--surface);color:var(--encre);box-shadow:0 4px 14px rgba(20,23,58,.12);white-space:nowrap}
.etape h2{font-family:var(--conte);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:650;font-size:clamp(34px,4.6vw,60px);line-height:1.02;letter-spacing:-.02em;margin:14px 0 18px;text-wrap:balance}
.etape .texte p{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--douce-ciel);max-width:30em}
.etape .texte p + p{margin-top:12px}
.sur{font-size:13px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--douce-ciel)}

/* Apparition : seulement si le script tourne */
.js .anim{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*90ms)}
.js .vu .anim{opacity:1;transform:none}
.js .pop{opacity:0;transform:scale(.7);transition:opacity .4s ease,transform .6s cubic-bezier(.2,1.5,.4,1);transition-delay:calc(var(--i,0)*90ms + 200ms)}
.js .vu .pop{opacity:1;transform:none}

/* Cartes de démonstration */
.carte{width:min(100%,400px);background:var(--surface);color:var(--encre);border-radius:28px;padding:22px;box-shadow:0 30px 60px -28px rgba(20,23,58,.4)}
.carte h3{font-family:var(--conte);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:650;font-size:24px;line-height:1.15;margin-bottom:14px}
.carte .libelle{font-size:12px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--douce);margin:16px 0 8px}
.rang{display:flex;flex-wrap:wrap;gap:8px}
.choix{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:99px;border:1px solid var(--bord);font-weight:650;font-size:15px}
.choix.on{background:var(--encre);border-color:var(--encre);color:var(--fond)}
.arches{display:flex;gap:10px}
.arche{position:relative;display:block;width:76px;height:94px;flex:none;overflow:hidden;border-radius:50% 50% 12px 12px / 40% 40% 12px 12px;background:var(--creux)}
.arche svg{position:absolute;inset:0;width:100%;height:100%}
.arche.petite{width:48px;height:59px;border-radius:50% 50% 9px 9px / 40% 40% 9px 9px}
.arche .coche{position:absolute;right:6px;bottom:6px;width:22px;height:22px;border-radius:50%;background:var(--lanterne);display:flex;align-items:center;justify-content:center}
.arche .coche::after{content:"";width:9px;height:5px;border-left:2.5px solid var(--sur-lanterne);border-bottom:2.5px solid var(--sur-lanterne);transform:rotate(-45deg) translate(1px,-1px)}
.plein{display:flex;align-items:center;justify-content:center;min-height:52px;margin-top:18px;border-radius:99px;background:var(--feerie);color:#fff;font-weight:650}
.pile{position:relative;height:330px}
.pile .billet{left:0;height:64px;border-radius:20px;padding:0 14px;gap:12px}
.pile .billet .tx small{font-size:12px}.pile .billet .tx b{font-size:16px}
.pile .billet .jeton{width:48px;height:48px;border-radius:16px}.pile .billet .jeton b{font-size:20px;line-height:20px}.pile .billet .jeton small{font-size:8.5px}
.pile .c1{transform:translateY(0)}.pile .c2{transform:translateY(76px)}.pile .c3{transform:translateY(152px)}
.pile .message{position:absolute;left:0;right:0;top:152px;padding:12px 14px;border-radius:20px;background:var(--chateau-voile);font-size:15px;line-height:1.35;opacity:0;transform:translateY(14px) scale(.97);transition:opacity .5s ease .9s,transform .7s cubic-bezier(.2,.9,.2,1) .9s}
.pile .message b{display:block;color:var(--chateau);font-size:13px}
.js .pile .billet{transition-delay:.9s}
.vu .pile .c2{transform:translateY(246px)}
.vu .pile .c3{transform:translateY(76px)}
.vu .pile .message{opacity:1;transform:none}
.bilan{display:flex;align-items:center;gap:16px;margin-top:14px;padding:14px 18px;border-radius:20px;background:var(--nuit);color:var(--sur-nuit)}
.bilan .nb{font-size:44px;line-height:1;color:var(--lanterne)}
.bilan b{display:block;font-size:17px}
.bilan small{font-size:13px;opacity:.85}
.ligne{display:flex;align-items:center;gap:12px;padding:10px 0}
.ligne + .ligne{border-top:1px solid var(--filet)}
.ligne .tx{flex:1;min-width:0}
.ligne .tx b{display:block;font-size:16px;font-weight:650}
.fanion{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--douce)}
.fanion::before{content:"";width:9px;height:13px;background:var(--land,#3A32D4);clip-path:polygon(0 0,100% 0,100% 100%,50% 70%,0 100%)}
.echelle{display:flex;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--filet)}
.echelle .jeton{width:46px;height:46px;border-radius:15px}.echelle .jeton b{font-size:18px;line-height:18px}.echelle .jeton small{font-size:8px}
.photo{position:relative;height:150px;border-radius:20px;overflow:hidden;background:#F79F6B;margin:-6px -6px 14px}
.photo svg{position:absolute;inset:0;width:100%;height:100%}
.photo .avantage{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:99px;background:var(--lanterne);color:var(--sur-lanterne);font-size:12px;font-weight:750}
.detail{font-size:15px;color:var(--douce)}
.creneaux{display:flex;gap:8px;margin-top:14px}
.creneau{display:flex;align-items:center;justify-content:center;height:46px;min-width:74px;padding:0 14px;border-radius:14px;background:var(--prune-voile);color:var(--prune);font-family:var(--chiffres);font-weight:800;font-size:16px}
.avis{display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px 16px;border-radius:20px;background:var(--nuit);color:var(--sur-nuit);font-size:13px;line-height:1.35}
.avis b{display:block;font-size:15px}
.avis .battement{color:var(--chateau-clair)}
.js .avis{opacity:0;transform:translateY(-16px);transition:opacity .5s ease 1.1s,transform .7s cubic-bezier(.2,1.2,.4,1) 1.1s}
.js .vu .avis{opacity:1;transform:none}

/* Tout le reste */
.reste{position:relative;max-width:1180px;margin:0 auto;padding:10svh var(--marge) 12svh;text-align:center}
.reste h2{font-family:var(--conte);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:650;font-size:clamp(34px,4.6vw,60px);line-height:1.02;letter-spacing:-.02em;margin:14px auto 12px;max-width:16em;text-wrap:balance}
.reste > p{color:var(--douce-ciel);font-size:clamp(17px,1.5vw,20px);max-width:34em;margin:0 auto}
.grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:44px;text-align:left}
.tuile{background:var(--surface);color:var(--encre);border-radius:24px;padding:20px;box-shadow:0 20px 40px -26px rgba(20,23,58,.4)}
.tuile svg{width:30px;height:30px;fill:none;stroke:var(--feerie);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tuile b{display:block;margin:12px 0 4px;font-size:17px}
.tuile span{font-size:14.5px;line-height:1.45;color:var(--douce)}
.tuile.large{grid-column:span 2;display:flex;gap:18px;align-items:center;background:var(--nuit);color:var(--sur-nuit)}
.tuile.large span{color:rgba(244,243,255,.82)}
.tuile.large svg{stroke:var(--lanterne);width:44px;height:44px;flex:none}

/* Saison */
.saison{position:relative;max-width:1180px;margin:0 auto;padding:10svh var(--marge);text-align:center}
.saison h2{font-family:var(--conte);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:650;font-size:clamp(34px,4.6vw,60px);line-height:1.02;letter-spacing:-.02em;margin:14px auto 12px;max-width:15em;text-wrap:balance}
.saison > p{color:var(--douce-ciel);font-size:clamp(17px,1.5vw,20px);max-width:33em;margin:0 auto}
.guirlande{display:block;width:100%;max-width:900px;margin:36px auto 0;overflow:visible}
.guirlande .cordon{fill:none;stroke:#fff;stroke-width:2;opacity:.45;stroke-linecap:round}
.guirlande .lampe .culot{fill:#9296BF}
.guirlande .lampe .verre{fill:currentColor;fill-opacity:.18;stroke:currentColor;stroke-width:1.5;transition:fill-opacity .35s ease}
.guirlande .lampe .halo{fill:currentColor;opacity:0;transition:opacity .5s ease}
.guirlande .lampe.on .verre{fill-opacity:1}
.guirlande .lampe.on .halo{opacity:.28}
.portes{display:flex;justify-content:center;align-items:flex-end;gap:12px;margin-top:34px;flex-wrap:wrap}
.porte{position:relative;display:flex;align-items:center;justify-content:center;width:64px;height:80px;border-radius:50% 50% 12px 12px / 40% 40% 12px 12px;background:#1F6B4A;color:#fff;font-family:var(--conte);font-weight:650;font-size:22px}
.porte:nth-child(3n){background:#B92A35}.porte:nth-child(3n+1){background:#0A0D2B}
.porte.ouverte{background:var(--lanterne);color:var(--sur-lanterne);box-shadow:0 0 0 10px rgba(245,181,68,.18)}
.porte.jour{background:var(--lanterne);overflow:hidden;box-shadow:0 0 0 3px var(--chateau-clair),0 0 0 9px rgba(255,134,179,.3)}
.porte.jour::before{content:attr(data-n);position:absolute;left:0;top:0;bottom:0;width:60%;display:flex;align-items:center;justify-content:center;background:#B92A35;color:#fff;transform-origin:left;transition:transform .9s cubic-bezier(.2,.8,.2,1) .6s}
.vu .porte.jour::before{transform:scaleX(.55)}

/* Fin */
.fin{position:relative;min-height:92svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12svh var(--marge)}
.fin .signe{width:clamp(120px,16vw,190px);height:auto;overflow:visible}
.fin .signe path{fill:none;stroke:var(--encre-ciel);stroke-width:60;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1700;stroke-dashoffset:0}
.js .fin .signe path{stroke-dashoffset:1700;transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1)}
.js .fin.vu .signe path{stroke-dashoffset:0}
.js .fin .signe circle{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .6s cubic-bezier(.2,1.6,.4,1) 1.1s}
.js .fin.vu .signe circle{transform:none}
.fin h2{font-family:var(--conte);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:650;font-size:clamp(40px,6.4vw,88px);line-height:.98;letter-spacing:-.025em;margin:30px 0 30px;max-width:11em;text-wrap:balance}
.pied{position:relative;z-index:1;padding:36px var(--marge) max(36px,env(safe-area-inset-bottom));color:var(--douce-ciel);font-size:14px;line-height:1.6;text-align:center}
.pied p{max-width:54em;margin:0 auto 10px}
.pied a{font-weight:600;text-underline-offset:4px}

/* ---------- Écrans étroits : le Fil longe le bord gauche ---------- */
@media (max-width:900px){
  .ouverture{grid-template-columns:1fr;text-align:left;padding-top:112px}
  .scene{margin-top:8px}
  .tel{transform:none}
  .etape,.etape.inverse{grid-template-columns:44px minmax(0,1fr);min-height:0;padding:9svh 0;row-gap:26px}
  .etape .repere{grid-column:1;grid-row:1;align-self:start;transform:none !important;margin-top:4px}
  .etape .repere .heure{position:absolute;left:34px;top:-3px}
  .etape .texte,.etape.inverse .texte{grid-column:2;grid-row:1;padding-top:38px}
  .etape .vitrine,.etape.inverse .vitrine{grid-column:2;grid-row:2;justify-content:flex-start}
  .grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reste,.saison{text-align:left}
  .reste h2,.reste > p,.saison h2,.saison > p{margin-left:0}
  .portes{justify-content:flex-start}
}
@media (max-width:520px){.grille{grid-template-columns:1fr}.tuile.large{grid-column:auto}.carte{padding:18px}.etiquette{white-space:normal;border-radius:16px;padding:6px 13px;line-height:1.35}.ouverture h1{margin-top:16px}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .battement::after,.pouls::after{animation:none;opacity:.35}
  .js .anim,.js .pop,.js .avis,.js .fin .signe path,.js .fin .signe circle{opacity:1;transform:none;transition:none;stroke-dashoffset:0}
  .tel,.billet,.ajuste,.pile .message{transition:none}
}