/* =========================================================
   ODTR — Maquette « cinématique par plans »
   Chaque scène = plein écran. L'arrière-plan (fixe) se fond
   d'une scène à l'autre pendant que le texte défile/s'anime.
   Scroll-snap + backdrops en crossfade + animations variées.
   ========================================================= */

:root{
  --bleu:#020071; --bleu-nuit:#01003a; --bleu-encre:#050427;
  --vert:#899E0D; --vert-moyen:#A5B447; --vert-clair:#C3CD83;
  --gris-clair:#DBDBD8; --creme:#FAF9F5; --or:#D8B46A; --rose:#E87BA6;
  --rouge:#C42E4E; --rouge-fonce:#A8203F; --rouge-clair:#EF6178;
  --ui:'Montserrat',system-ui,sans-serif; --serif:'Fraunces',Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-snap-type:y mandatory;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--ui);color:#fff;background:#01002a;line-height:1.6;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--vert);color:var(--bleu)}
.skip-link{position:absolute;left:-999px;top:0;z-index:600;background:#fff;color:var(--bleu);padding:.7rem 1.1rem}
.skip-link:focus{left:0}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- ARRIÈRE-PLAN FIXE (crossfade) ---------- */
.stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:#01002a}
.backdrop{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;background-size:cover;background-position:center;will-change:opacity;transform:scale(1.06)}
.backdrop.actif{opacity:1;transition:opacity 1.2s ease,transform 9s ease-out;transform:scale(1.14)}
.stage-veil{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(1,0,38,.72) 0%,rgba(1,0,38,.42) 30%,rgba(1,0,38,.58) 62%,rgba(1,0,34,.96) 100%)}
.stage-grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.7) .5px,transparent .5px);background-size:3px 3px}
#poussiere{position:fixed;inset:0;z-index:1;pointer-events:none}

/* ---------- HEADER ---------- */
.entete{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:2rem;
  padding:26px clamp(24px,4vw,56px);transition:padding .4s,background .4s}
.entete.reduit{padding-top:16px;padding-bottom:16px;background:linear-gradient(180deg,rgba(1,0,42,.6),transparent)}
.marque{display:flex;align-items:center}
.marque .wm{display:flex;flex-direction:column;line-height:1;text-shadow:0 2px 14px rgba(0,0,20,.5)}
.marque .wm b{font-family:var(--serif);font-weight:500;font-size:1.62rem;letter-spacing:.02em;color:#fff}
.marque .wm small{font-family:var(--ui);font-size:.58rem;letter-spacing:.32em;text-transform:uppercase;color:var(--vert-clair);margin-top:5px;font-weight:600}
.nav{display:flex;gap:1.7rem;margin-left:auto;align-items:center}
.nav a{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;opacity:.88;position:relative;padding:.4rem 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--vert-clair);transition:width .3s}
.nav a:hover{opacity:1}.nav a:hover::after{width:100%}
.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:26px;height:2px;background:#fff;margin:5px 0}

/* ---------- NAV CHAPITRES (droite) ---------- */
.chapitres{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:16px}
.chapitres button{display:flex;align-items:center;gap:12px;background:none;border:0;cursor:pointer;color:#fff;justify-content:flex-end}
.chapitres .label{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateX(8px);transition:.3s;white-space:nowrap;font-weight:600}
.chapitres .dot{width:9px;height:9px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);transition:.3s;flex:none}
.chapitres button:hover .label{opacity:.9;transform:none}
.chapitres button.on .dot{background:var(--vert-clair);border-color:var(--vert-clair);transform:scale(1.25)}
.chapitres button.on .label{opacity:1;transform:none;color:var(--vert-clair)}

/* ---------- SCÈNES ---------- */
.scenes{position:relative;z-index:2}
.scene{min-height:100vh;min-height:100svh;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;align-items:flex-end;position:relative;padding:0 clamp(24px,6vw,90px) clamp(70px,12vh,140px)}
.scene.centre{align-items:center}
.scene .inner{max-width:620px;width:100%}
.scene .inner.large{max-width:900px}

.eyebrow{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--vert-clair);display:block;margin-bottom:22px}
.scene h1,.scene h2{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.01em}
.scene h1{font-size:clamp(2.8rem,7vw,5.6rem)}
.scene h2{font-size:clamp(2.2rem,5vw,4rem)}
.scene .compo{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,2vw,1.5rem);color:var(--vert-clair);margin-top:10px}
.scene .desc{font-size:clamp(1rem,1.4vw,1.18rem);max-width:46ch;margin:22px 0 30px;color:rgba(255,255,255,.9);font-weight:300}
.scene .desc.serif{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(1.1rem,1.7vw,1.4rem);line-height:1.5}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:15px 28px;border-radius:3px;border:1.5px solid transparent;cursor:pointer;transition:transform .3s,background .3s,color .3s,border-color .3s}
.btn:hover{transform:translateY(-2px)}
.btn .arr{transition:transform .3s}.btn:hover .arr{transform:translateX(4px)}
.btn-vert{background:var(--vert);color:var(--bleu);border-color:var(--vert)}
.btn-vert:hover{background:var(--vert-clair);border-color:var(--vert-clair)}
.btn-rouge{background:var(--rouge);color:#fff;border-color:var(--rouge)}
.btn-rouge:hover{background:var(--rouge-fonce);border-color:var(--rouge-fonce)}
.btn-ligne{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ligne:hover{background:rgba(255,255,255,.12);border-color:#fff}
.lien-souligne{display:inline-flex;align-items:center;gap:9px;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  border-bottom:1.5px solid var(--vert);padding-bottom:5px;transition:gap .3s}
.lien-souligne:hover{gap:15px}

/* ---------- ANIMATIONS D'ENTRÉE (variées, jouées quand .actif) ---------- */
.r{--d:0s}
.r-mask{overflow:hidden;display:block}
.r-mask > span{display:block;transform:translateY(125%);transition:transform 1.05s cubic-bezier(.19,1,.22,1) var(--d)}
.scene.actif .r-mask > span{transform:none}
.r-up{opacity:0;transform:translateY(42px);transition:opacity .9s ease var(--d),transform .9s cubic-bezier(.2,.8,.2,1) var(--d)}
.scene.actif .r-up{opacity:1;transform:none}
.r-left{opacity:0;transform:translateX(-44px);transition:opacity 1s ease var(--d),transform 1s cubic-bezier(.2,.8,.2,1) var(--d)}
.scene.actif .r-left{opacity:1;transform:none}
.r-wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1.15s cubic-bezier(.77,0,.18,1) var(--d)}
.scene.actif .r-wipe{clip-path:inset(0 0 0 0)}
.r-blur{opacity:0;filter:blur(16px);transform:scale(1.05);transition:opacity 1s ease var(--d),filter 1s ease var(--d),transform 1.2s ease var(--d)}
.scene.actif .r-blur{opacity:1;filter:none;transform:none}
.r-scale{opacity:0;transform:scale(.88);transition:opacity 1s ease var(--d),transform 1.1s cubic-bezier(.19,1,.22,1) var(--d)}
.scene.actif .r-scale{opacity:1;transform:none}

/* ---------- Scène 1 : hero + projecteur ---------- */
.hero-title em{font-style:italic;color:var(--vert-clair)}
.followspot{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(216,180,106,.15),transparent 62%)}
.scene-hero:hover ~ .followspot,body.spot .followspot{opacity:1}
.scroll-hint{position:absolute;left:clamp(24px,6vw,90px);bottom:34px;display:flex;align-items:center;gap:12px;
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--vert-clair)}
.scroll-hint .bar{width:40px;height:1px;background:rgba(255,255,255,.4);position:relative;overflow:hidden}
.scroll-hint .bar::after{content:"";position:absolute;inset:0;background:var(--vert);animation:sweep 2.6s ease-in-out infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ---------- Scène 3 : vedette (cadre + flèches) ---------- */
.vedette-cadre{border:1px solid rgba(255,255,255,.2);border-left:3px solid var(--vert);padding:30px 34px;
  background:rgba(1,0,42,.28);backdrop-filter:blur(4px)}
.fleches{display:flex;gap:14px;margin-top:26px}
.fleches button{width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:none;color:#fff;cursor:pointer;
  display:grid;place-items:center;transition:.3s}
.fleches button:hover{background:var(--vert);border-color:var(--vert);color:var(--bleu)}

/* ---------- Scène 4 : piliers inline ---------- */
.mot-fond{position:absolute;right:4%;bottom:8%;font-family:var(--serif);font-size:clamp(6rem,20vw,18rem);color:rgba(255,255,255,.05);
  font-style:italic;z-index:-1;pointer-events:none;user-select:none;line-height:.8}
.piliers-inline{display:flex;gap:30px;flex-wrap:wrap;margin-top:24px}
.piliers-inline .pil{max-width:180px}
.piliers-inline .pil b{font-family:var(--serif);color:var(--vert-clair);font-size:1.15rem;display:block;margin-bottom:4px}
.piliers-inline .pil span{font-size:.86rem;color:rgba(255,255,255,.75);font-weight:300}

/* ---------- Scène 5 : carte Mauricie ---------- */
.map-wrap{margin-top:20px;max-width:560px}
.map-wrap svg{width:100%;height:auto;overflow:visible}
.map-wrap .trace{stroke:var(--vert-clair);stroke-width:2;fill:none;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 2.4s ease}
.scene.actif .map-wrap .trace{stroke-dashoffset:0}
.map-wrap .fleuve{stroke:rgba(120,150,220,.5);stroke-width:9;fill:none;opacity:.5}
.map-wrap .lieu{opacity:0;transition:opacity .5s ease}
.scene.actif .map-wrap .lieu{opacity:1}
.map-wrap .lieu circle{fill:var(--vert-clair)}
.map-wrap .lieu text{fill:#fff;font-size:13px;font-weight:600;font-family:var(--ui)}

/* ---------- Scène 6 : témoignage ---------- */
.cite-grande{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.6rem,3.6vw,2.8rem);line-height:1.32;max-width:20ch}
.cite-mark{font-family:var(--serif);font-size:6rem;color:var(--vert);opacity:.5;line-height:.3;font-style:italic;display:block;margin-bottom:20px}
.cite-qui{margin-top:28px;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.cite-qui b{color:var(--vert-clair)}

/* ---------- Scène 7 : engagement / cartes ---------- */
.engage-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.engage-c{border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:24px;background:rgba(1,0,42,.3);backdrop-filter:blur(4px)}
.engage-c .ic{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--vert);display:grid;place-items:center;color:var(--vert-clair);margin-bottom:16px}
.engage-c b{font-family:var(--serif);font-size:1.15rem;display:block;margin-bottom:8px}
.engage-c p{font-size:.84rem;color:rgba(255,255,255,.78);font-weight:300;margin-bottom:16px}
.engage-c a{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--vert-clair);display:inline-flex;gap:7px}

/* ---------- Scène 8 : billet / final ---------- */
.billet{max-width:560px;border:1px solid rgba(195,205,131,.35);border-radius:14px;padding:38px;background:rgba(1,0,42,.4);backdrop-filter:blur(6px);position:relative}
.billet::before,.billet::after{content:"";position:absolute;top:50%;width:24px;height:24px;border-radius:50%;background:#01002a;transform:translateY(-50%)}
.billet::before{left:-12px}.billet::after{right:-12px}
.info-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.info-form input{flex:1;min-width:160px;padding:14px 16px;border-radius:5px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;font:inherit}
.info-form input::placeholder{color:rgba(255,255,255,.5)}
.info-form input:focus{outline:none;border-color:var(--vert)}
.info-merci{width:100%;color:var(--vert-clair);font-weight:600;margin-top:6px}
.final-foot{display:flex;gap:24px;margin-top:34px;font-size:.82rem;color:rgba(255,255,255,.7);flex-wrap:wrap}
.final-foot a:hover{color:#fff}

/* ---------- Événements à venir (cartes) ---------- */
.evt-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
.evt-card{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:3/3.5;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;color:#fff;isolation:isolate;box-shadow:0 16px 40px rgba(0,0,20,.45);transition:transform .5s}
.evt-card:hover{transform:translateY(-6px)}
.evt-card img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .8s}
.evt-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(2,0,50,.05) 32%,rgba(2,0,50,.55) 62%,rgba(2,0,45,.95))}
.evt-card:hover img{transform:scale(1.07)}
.evt-card .tag{align-self:flex-start;border:1px solid rgba(195,205,131,.5);color:var(--vert-clair);font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:40px;margin-bottom:12px;background:rgba(1,0,42,.35)}
.evt-card b{font-family:var(--serif);font-size:1.4rem;line-height:1.05;display:block;margin-bottom:8px}
.evt-card .m{font-size:.78rem;color:rgba(255,255,255,.85);margin-bottom:14px}
.evt-card .go{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--vert);color:var(--bleu);padding:8px 14px;border-radius:3px;align-self:flex-start}
@media(max-width:820px){.evt-cards{grid-template-columns:1fr;gap:12px}.evt-card{aspect-ratio:16/9}}

/* ---------- Partenaires (marquee, scène finale) ---------- */
.parten{overflow:hidden;margin:22px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.parten-piste{display:flex;gap:14px;width:max-content;animation:defileP 32s linear infinite}
.parten .p{flex:none;border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:12px 20px;font-family:var(--serif);color:rgba(255,255,255,.82);font-size:.92rem;white-space:nowrap}
@keyframes defileP{to{transform:translateX(-50%)}}

/* ---------- Chiffres d'impact ---------- */
.impact{display:flex;gap:clamp(24px,5vw,60px);flex-wrap:wrap;margin-top:22px}
.impact .n{font-family:var(--serif);font-size:clamp(2.4rem,5vw,3.8rem);color:#fff;line-height:1}
.impact .n .plus{color:var(--vert-clair)}
.impact div p{font-size:.82rem;color:rgba(255,255,255,.72);max-width:15ch;margin-top:8px}

/* ---------- Témoignages (multiples) ---------- */
.tem-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.tem-c{border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:26px;background:rgba(1,0,42,.34);backdrop-filter:blur(4px)}
.tem-c .q{font-family:var(--serif);font-style:italic;font-size:2.2rem;color:var(--vert);line-height:.1;display:block;height:18px}
.tem-c blockquote{font-family:var(--serif);font-style:italic;font-size:1.02rem;line-height:1.45;margin:16px 0 18px;color:#fff}
.tem-c .who{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.tem-c .who b{color:var(--vert-clair)}
@media(max-width:820px){.tem-row{grid-template-columns:1fr}}

/* ---------- Événements touristiques : cartes ---------- */
.tour-tags{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 16px}
.tour-tags span{border:1px solid rgba(195,205,131,.45);color:var(--vert-clair);border-radius:40px;padding:7px 15px;font-size:.76rem;font-weight:600}
.tour-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center;margin-top:6px}
@media(max-width:820px){.tour-grid{grid-template-columns:1fr}}

/* ---------- Partenaires : pastille logo ---------- */
.parten .p{display:flex;align-items:center;gap:11px}
.pl-mark{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;font-family:var(--ui);font-weight:700;font-size:.72rem;color:#fff;letter-spacing:.02em}

/* ---------- Scène finale : infolettre + contact ---------- */
.rester-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:6px}
@media(max-width:820px){.rester-grid{grid-template-columns:1fr}}
.rester-grid .billet{margin:0;padding:28px}
.rester-grid .billet h2{font-size:clamp(1.3rem,2.4vw,1.7rem)}
.info-form.vert{flex-direction:column;align-items:stretch}
.info-form.vert input,.info-form.vert textarea{width:100%;min-width:0}
.info-form.vert textarea{resize:vertical;min-height:88px;font-family:inherit}
.info-form.vert .btn{width:100%;justify-content:center}

/* ---------- Section Soutenir : vert → rouge ---------- */
.soutenir-scene .eyebrow{color:var(--rouge-clair)}
.soutenir-scene .pil b{color:var(--rouge-clair)}

/* ---------- Cœurs animés (section Soutenir) ---------- */
.soutenir-scene{overflow:hidden}
.soutenir-scene .inner{position:relative;z-index:2}
.hearts{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hearts span{position:absolute;bottom:-8%;display:block;color:var(--rose);opacity:0;
  animation:heartUp linear infinite;will-change:transform,opacity;filter:drop-shadow(0 0 8px rgba(232,123,166,.6))}
.hearts span svg{width:100%;height:100%;display:block;fill:currentColor}
@keyframes heartUp{
  0%{transform:translate(0,0) scale(.5) rotate(-6deg);opacity:0}
  12%{opacity:.9}
  50%{transform:translate(var(--sway,0),-52vh) scale(1) rotate(6deg)}
  85%{opacity:.55}
  100%{transform:translate(calc(var(--sway,0) * -0.5),-102vh) scale(.85) rotate(-4deg);opacity:0}
}
.don-pulse{animation:donPulse 1.8s ease-in-out infinite}
@keyframes donPulse{0%,100%{box-shadow:0 0 0 0 rgba(232,123,166,.6)}70%{box-shadow:0 0 0 16px rgba(232,123,166,0)}}

/* ---------- Social fixe ---------- */
.social-fixe{position:fixed;right:26px;bottom:26px;z-index:40;display:flex;gap:12px}
.social-fixe a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;transition:.3s}
.social-fixe a:hover{border-color:var(--vert);color:var(--vert-clair)}

/* ---------- RIDEAU D'OUVERTURE (bleu marine) ---------- */
#rideau{position:fixed;inset:0;z-index:500;pointer-events:none;overflow:hidden}
#rideau .valance{display:none}
#rideau .pan{position:absolute;top:0;bottom:0;width:52%;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.3) 0,rgba(255,255,255,.035) 26px,rgba(0,0,0,.3) 54px),
    linear-gradient(180deg,var(--bleu),var(--bleu-nuit));
  box-shadow:inset 0 0 150px rgba(0,0,0,.65);
  transition:transform 1.9s cubic-bezier(.66,0,.2,1);
  will-change:transform;backface-visibility:hidden}
#rideau .pan.g{left:0;transform-origin:left center;border-right:2px solid var(--vert)}
#rideau .pan.d{right:0;transform-origin:right center;border-left:2px solid var(--vert)}
/* s'ouvre par simple glissement latéral (les panneaux quittent l'écran) */
#rideau.ouvert .pan.g{transform:translateX(-100%)}
#rideau.ouvert .pan.d{transform:translateX(100%)}
#rideau .emb{position:absolute;inset:0;z-index:2;display:grid;place-items:center;transition:opacity .5s}
#rideau .emb .wm{text-align:center;text-shadow:0 2px 24px rgba(0,0,0,.6);animation:pulse 1.9s ease-in-out infinite}
#rideau .emb .wm b{font-family:var(--serif);font-weight:500;font-size:clamp(2.1rem,4.5vw,3.2rem);color:#fff;display:block;letter-spacing:.04em}
#rideau .emb .wm small{font-family:var(--ui);font-size:.82rem;letter-spacing:.42em;text-transform:uppercase;color:var(--vert-clair);display:block;margin-top:11px}
#rideau.ouvert .emb{opacity:0}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.06);opacity:1}}

/* ---------- Menu mobile ---------- */
.menu-mobile{position:fixed;inset:0;z-index:300;background:var(--bleu);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;transform:translateX(100%);transition:transform .4s}
.menu-mobile.ouvert{transform:none}
.menu-mobile a{font-size:1.3rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.menu-mobile .fermer{position:absolute;top:24px;right:26px;background:none;border:0;color:#fff;font-size:2rem;cursor:pointer}

/* ---------- Responsive ---------- */
@media(max-width:820px){
  .nav{display:none}.burger{display:block}
  .chapitres{display:none}
  .engage-row{grid-template-columns:1fr}
  .scene{padding-bottom:90px}
  .social-fixe{bottom:18px;right:18px}
}

/* ---------- Reduced motion / fallback ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-snap-type:none}
  #rideau{display:none!important}
  .backdrop{transition:none}
  .backdrop.actif{transform:none;animation:none;transition:opacity .001ms}
  .r-mask>span,.r-up,.r-left,.r-wipe,.r-blur,.r-scale{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;transition:none!important}
  .map-wrap .trace{stroke-dashoffset:0}.map-wrap .lieu{opacity:1}
  .followspot,#poussiere,.stage-grain,.hearts{display:none!important}
  .don-pulse{animation:none!important}
  .scroll-hint .bar::after{animation:none}
}