:root{
  --klein:#0D1BB8; --egyptien:#163EBC; --framboise:#E11D6E;
  --ivoire:#F2F1EE; --mineral:#2B3039; --nuit:#070A14;
  --ink:#EDEEF4; --muted:rgba(237,238,244,.62); --faint:rgba(237,238,244,.40);
  --grotesk:"Hanken Grotesk",system-ui,sans-serif;
  --serif:"Newsreader",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--nuit); color:var(--ink); font-family:var(--grotesk);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{background:rgba(225,29,110,.35); color:#fff}

/* ---------- monde (canvas fixe) ---------- */
#world-canvas{position:fixed; inset:0; width:100vw; height:100vh; z-index:0; display:block;}

/* ---------- chrome ---------- */
.chrome{position:fixed; inset:0; z-index:30; pointer-events:none;}
.chrome > *{pointer-events:auto;}

.wordmark{
  position:fixed; top:26px; left:30px; z-index:40;
  opacity:0; transform:translateY(-6px); transition:opacity 1.1s ease, transform 1.1s ease;
  line-height:1; user-select:none;
}
.wordmark.show{opacity:1; transform:none;}
.wordmark .nm{font-weight:600; font-size:18px; letter-spacing:.28em; color:var(--ivoire);}
.wordmark .sub{display:block; font-weight:300; font-size:10px; letter-spacing:.42em;
  color:var(--framboise); margin-top:5px; padding-left:.1em;}

/* son */
.sound{position:fixed; top:26px; right:30px; z-index:40; display:flex; align-items:center; gap:11px;
  background:none; border:0; color:var(--faint); cursor:pointer; font-family:var(--grotesk);
  font-size:10px; letter-spacing:.34em; text-transform:uppercase; opacity:0; transition:opacity 1s ease .3s;}
.sound.show{opacity:1;}
.sound:hover{color:var(--ink);}
.sound .bars{display:flex; align-items:flex-end; gap:2.5px; height:15px;}
.sound .bars i{width:2px; height:5px; background:currentColor; border-radius:1px; transition:background .3s;}
.sound.on{color:var(--ivoire);}
.sound.on .bars i{background:var(--framboise); animation:eq 1s ease-in-out infinite;}
.sound.on .bars i:nth-child(2){animation-delay:.18s} .sound.on .bars i:nth-child(3){animation-delay:.36s}
.sound.on .bars i:nth-child(4){animation-delay:.12s}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}

/* carte de navigation (droite) */
.mapnav{position:fixed; right:30px; top:50%; transform:translateY(-50%); z-index:40;
  display:flex; flex-direction:column; gap:0; opacity:0; transition:opacity 1s ease .4s;}
.mapnav.show{opacity:1;}
.mapnav.hide{display:none;}
.mapnav button{pointer-events:auto; background:none; border:0; cursor:pointer; color:var(--faint);
  font-family:var(--grotesk); display:flex; align-items:center; gap:12px; justify-content:flex-end;
  padding:9px 0; transition:color .35s;}
.mapnav button .lab{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  opacity:0; transform:translateX(8px); transition:opacity .35s, transform .35s; white-space:nowrap;}
.mapnav button .dot{position:relative; width:9px; height:9px; flex:0 0 9px;}
.mapnav button .dot::before{content:""; position:absolute; inset:2px; border-radius:50%;
  border:1px solid currentColor; transition:all .35s;}
.mapnav:hover button .lab{opacity:.8; transform:none;}
.mapnav button:hover{color:var(--ink);}
.mapnav button.active{color:var(--ivoire);}
.mapnav button.active .dot::before{background:var(--framboise); border-color:var(--framboise);
  box-shadow:0 0 12px 2px rgba(225,29,110,.6); inset:1px;}
/* fil mince (variation) */
.mapnav.fil button .lab{display:none}
.mapnav.fil button .dot{width:22px; height:1px; background:currentColor; border-radius:0}
.mapnav.fil button .dot::before{display:none}
.mapnav.fil button.active .dot{height:2px; background:var(--framboise); box-shadow:0 0 8px rgba(225,29,110,.7)}

/* ---------- sections ---------- */
.scroller{position:relative; z-index:10;}
section{position:relative; min-height:100vh; display:flex; padding:11vh 8vw; }
.veil{position:absolute; inset:0; pointer-events:none; z-index:-1;}

/* INTRO */
.intro{align-items:center; justify-content:center; text-align:center; min-height:140vh;}
.intro .ip{max-width:640px;}
.intro .eyebrow{font-size:11px; letter-spacing:.5em; text-transform:uppercase; color:var(--framboise);}
.intro h1{font-family:var(--serif); font-style:italic; font-weight:200; font-size:clamp(30px,5.2vw,62px);
  line-height:1.18; color:var(--ivoire); margin:30px 0 0; text-wrap:balance;}
.intro .intro-corps{font-size:clamp(15px,1.7vw,19px); line-height:1.6; color:var(--muted); margin:30px auto 0; max-width:520px; text-wrap:pretty;}
.intro .hint{margin-top:42px; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted);
  opacity:0; transition:opacity 1.2s ease; display:flex; flex-direction:column; align-items:center; gap:16px;}
.intro .hint.show{opacity:.9;}
.intro .hint .arrow{width:1px; height:46px; background:linear-gradient(var(--framboise),transparent);
  animation:flow 2s ease-in-out infinite;}
@keyframes flow{0%{transform:scaleY(.3);opacity:.4;transform-origin:top}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.3);opacity:.4;transform-origin:bottom}}

/* MÉRÉSIS reveal */
.manifesto{align-items:center; justify-content:center; text-align:center;}
.manifesto .mark{font-weight:600; font-size:clamp(40px,9vw,120px); letter-spacing:.16em; color:var(--ivoire);
  line-height:1;}
.manifesto .mark em{font-style:normal; color:var(--framboise);}
.manifesto .tag{font-family:var(--serif); font-style:italic; font-weight:200; font-size:clamp(20px,3vw,34px);
  color:var(--ink); margin-top:24px; max-width:680px; text-wrap:balance;}
.manifesto .mf-title{font-weight:300; font-size:clamp(26px,4vw,46px); color:var(--ivoire); margin-top:40px; line-height:1.1; text-wrap:balance;}
.manifesto .mf-underline{font-family:var(--serif); font-style:italic; font-weight:200; font-size:clamp(17px,2.2vw,24px); color:var(--framboise); margin-top:18px;}
.manifesto .mf-title + .tag, .manifesto .mf-underline + .tag{margin-top:26px; font-style:normal; font-family:var(--grotesk); font-size:clamp(14px,1.5vw,17px); line-height:1.7; color:var(--muted); max-width:620px; margin-left:auto; margin-right:auto;}
.mf-soft{color:var(--muted); font-weight:300;}
.manifesto .credo{margin-top:46px; font-size:11px; letter-spacing:.42em; text-transform:uppercase; color:var(--framboise);}

/* TERRITOIRE */
.terr{align-items:flex-end;}
.terr.r{justify-content:flex-end; text-align:right;}
.terr .block{max-width:540px;}
.terr.r .block{align-items:flex-end;}
.terr .roman{font-family:var(--serif); font-style:italic; font-weight:200; font-size:46px; color:var(--framboise); opacity:.85;}
.terr .kicker{font-size:11px; letter-spacing:.4em; text-transform:uppercase; color:var(--faint); margin-top:18px;}
.terr h2{font-weight:300; font-size:clamp(34px,6vw,72px); line-height:1.02; letter-spacing:.01em;
  color:var(--ivoire); margin-top:14px; text-wrap:balance;}
.terr .essence{font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--egyptien-l,#7da0ff);
  margin-top:22px;}
.terr .phrase{font-family:var(--serif); font-style:italic; font-weight:200; font-size:clamp(19px,2.4vw,27px);
  color:var(--ink); margin-top:26px; line-height:1.35; text-wrap:balance;}
.terr p.body{font-size:15.5px; line-height:1.72; color:var(--muted); margin-top:22px; max-width:480px; text-wrap:pretty;}
.terr.r p.body, .terr.r .block{margin-left:auto;}

/* veil derrière le texte pour lisibilité */
.tveil{position:absolute; inset:0; z-index:-1; pointer-events:none;}

/* ARCHIPEL — îles/projets */
.isles{align-items:center; flex-direction:column; justify-content:center;}
.isles .head{text-align:center; max-width:620px; margin:0 auto 6vh;}
.isles .head .roman{font-family:var(--serif);font-style:italic;font-weight:200;font-size:40px;color:var(--framboise)}
.isles .head h2{font-weight:300;font-size:clamp(30px,5vw,58px);color:var(--ivoire);margin-top:10px}
.isles .head .phrase{font-family:var(--serif);font-style:italic;font-weight:200;font-size:clamp(17px,2vw,22px);color:var(--ink);margin-top:18px}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; width:100%; max-width:1080px; margin:0 auto;}
.isle{position:relative; padding:26px 24px 24px; border:1px solid rgba(125,140,200,.16);
  background:linear-gradient(160deg, rgba(22,30,70,.32), rgba(8,12,28,.30)); backdrop-filter:blur(3px);
  cursor:pointer; transition:border-color .4s, transform .4s, background .4s; overflow:hidden;}
.isle::after{content:""; position:absolute; left:0; top:0; width:0; height:1px; background:var(--framboise); transition:width .5s ease;}
.isle:hover{transform:translateY(-4px); border-color:rgba(225,29,110,.4); background:linear-gradient(160deg, rgba(30,38,90,.42), rgba(10,14,34,.4));}
.isle:hover::after{width:100%;}
.isle .yr{font-size:11px; letter-spacing:.24em; color:var(--framboise);}
.isle h3{font-weight:400; font-size:21px; color:var(--ivoire); margin:14px 0 0; line-height:1.2; text-wrap:balance;}
.isle .meta{font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-top:14px;}
.isle .note{font-family:var(--serif); font-style:italic; font-size:15px; color:var(--muted); margin-top:14px; line-height:1.4;}

/* MÉTHODE + clôture */
.method{flex-direction:column; justify-content:center; align-items:center; text-align:center;}
.method .lead{max-width:640px; margin-bottom:7vh;}
.method .lead .eyebrow{font-size:11px;letter-spacing:.46em;text-transform:uppercase;color:var(--framboise)}
.method .lead h2{font-weight:300;font-size:clamp(28px,4.5vw,52px);color:var(--ivoire);margin-top:18px;text-wrap:balance}
.method-credo{list-style:none; margin-top:22px; display:flex; flex-direction:column; gap:4px;}
.method-credo li{font-family:var(--serif); font-style:italic; font-weight:200; font-size:clamp(24px,3.6vw,44px); line-height:1.18; color:var(--ivoire); text-wrap:balance;}
.method-credo li:nth-child(even){color:var(--ink);}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; width:100%; max-width:980px;
  border-top:1px solid rgba(125,140,200,.16);}
.step{padding:30px 20px; text-align:left; border-left:1px solid rgba(125,140,200,.14); position:relative;}
.step:first-child{border-left:0;}
.step .n{font-family:var(--serif); font-style:italic; font-weight:200; font-size:34px; color:var(--framboise);}
.step .v{font-weight:500; font-size:18px; letter-spacing:.02em; color:var(--ivoire); margin-top:14px;}
.step .d{font-size:13px; line-height:1.6; color:var(--muted); margin-top:10px;}

.values{display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center; max-width:880px; margin:8vh auto 0;}
.values span{font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--faint);}
.values span::before{content:"·"; color:var(--framboise); margin-right:26px;}
.values span:first-child::before{display:none;}
.credo-list{list-style:none; display:flex; flex-direction:column; gap:6px; margin:7vh auto 0; max-width:560px;}
.credo-list li{font-family:var(--serif); font-style:italic; font-weight:200; font-size:clamp(17px,2.2vw,25px); color:var(--ink); line-height:1.4;}
.outro-lignes{display:flex; flex-direction:column; gap:30px; max-width:760px; margin:0 auto;}
.outro-lignes p{font-family:var(--serif); font-style:italic; font-weight:200;
  font-size:clamp(20px,2.8vw,30px); line-height:1.3; color:var(--ink); text-wrap:balance;}

.outro{margin-top:13vh; text-align:center;}
.outro .credo2{font-family:var(--serif); font-style:italic; font-weight:200; font-size:clamp(32px,5.4vw,56px);
  color:var(--ivoire); max-width:860px; margin:0 auto; line-height:1.14; text-wrap:balance;}
.outro .credo2 .q{color:var(--framboise); font-style:normal;}
.outro .cta{margin-top:7vh; display:inline-flex; align-items:center; gap:14px; cursor:pointer;
  background:none; border:1px solid rgba(225,29,110,.5); color:var(--ivoire); font-family:var(--grotesk);
  font-size:11px; letter-spacing:.3em; text-transform:uppercase; padding:15px 30px; transition:all .4s;}
.outro .cta:hover{background:rgba(225,29,110,.14); border-color:var(--framboise);}
.outro .sign{margin-top:8vh; font-size:10px; letter-spacing:.4em; text-transform:uppercase; color:var(--faint);}

/* CONTACT — invitation sobre, sous la méthode */
.contact{margin-top:13vh; text-align:center; display:flex; flex-direction:column; align-items:center;}
.contact-q{font-family:var(--serif); font-style:italic; font-weight:200; font-size:clamp(26px,4vw,44px);
  line-height:1.16; color:var(--ivoire); text-wrap:balance;}
.contact-lead{margin-top:26px; font-size:13px; line-height:1.5; color:var(--muted);}
.contact-mail{margin-top:14px; font-family:var(--serif); font-size:clamp(22px,3vw,34px); color:var(--framboise);
  text-decoration:none; letter-spacing:.005em; transition:color .35s ease; pointer-events:auto;}
.contact-mail:hover{color:var(--ivoire);}

/* entrée des sections au scroll — état visible par défaut (robuste : print, reduced-motion,
   onglet en pause montrent toujours le contenu) ; on cache-puis-révèle uniquement si le mouvement est permis */
.reveal-el{opacity:1; transform:none;}
@media (prefers-reduced-motion:no-preference){
  .reveal-el{opacity:0; transform:translateY(26px); transition:opacity 1s ease, transform 1s ease;}
  .reveal-el.in{opacity:1; transform:none;}
}

@media (max-width:860px){
  section{padding:12vh 26px;}
  .mapnav{right:14px;}
  .mapnav button .lab{display:none;}
  .wordmark{left:20px; top:20px;}
  .sound{right:20px; top:22px;}
  .steps{grid-template-columns:1fr 1fr;}
  .step:nth-child(odd){border-left:0;}
  .terr .block, .terr.r .block{max-width:none;}
}
/* ====================== LOGO & ENTRÉE ====================== */
.wordmark img{height:30px; display:block;}
.mark-logo{width:clamp(280px,44vw,560px); height:auto; display:block; margin:0 auto;}

.enter-link{margin-top:32px; display:inline-flex; align-items:center; gap:12px; background:none; border:0;
  cursor:pointer; color:var(--ivoire); font-family:var(--grotesk); font-size:12px; letter-spacing:.26em;
  text-transform:uppercase; padding:0 0 8px; position:relative;}
.enter-link i{font-style:normal; transition:transform .35s;}
.enter-link::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:linear-gradient(90deg,var(--framboise),transparent); transform:scaleX(.35); transform-origin:left; transition:transform .45s;}
.enter-link:hover::after{transform:scaleX(1);}
.enter-link:hover i{transform:translateX(6px);}
.enter-link.big{font-size:13px;}
.terr.r .enter-link::after{background:linear-gradient(270deg,var(--framboise),transparent); transform-origin:right;}
.isles-note{font-size:13px; color:var(--muted); margin-top:18px; letter-spacing:.03em;}

/* ====================== ESPACES (overlay) ====================== */
body.in-space{overflow:hidden;}
.space-layer{position:fixed; inset:0; z-index:60; opacity:0; visibility:hidden; pointer-events:none;
  transform:scale(1.035); transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);}
.space-layer.active{opacity:1; visibility:visible; pointer-events:auto; transform:none;}
.space-layer.shown{opacity:1; visibility:visible; transform:none; transition:none;}
#space-canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
/* fond plein cadre des Vallées (image DOM, derrière le canvas qui porte le réseau interactif) */
.vallees-bg{position:absolute; inset:0; pointer-events:none; transform-origin:center; will-change:transform;
  background:#070b1c url("assets/vallees-fond.png") center/cover no-repeat;}
.vallees-fx{position:absolute; inset:0; pointer-events:none; z-index:0; will-change:transform;}
/* fond plein cadre de la Forêt des traces (image DOM, sous les arbres-filaments du canvas) */
.foret-bg{position:absolute; inset:0; pointer-events:none; transform-origin:center bottom; will-change:transform;
  background:#04070f url("assets/foret-fond.png") center bottom / cover no-repeat;}
.fleuve-bg{position:absolute; inset:0; pointer-events:none; transform-origin:center; will-change:transform;
  background:#04060f url("assets/fleuve-fond.png") center / cover no-repeat;}
.space-content{position:absolute; inset:0; pointer-events:none;}
@keyframes spaceBloom{from{filter:blur(8px); transform:scale(.99);} to{filter:none; transform:none;}}
.space-layer.active .space-content{animation:spaceBloom .7s cubic-bezier(.16,1,.3,1) both;}

/* chrome commun */
.sp-top{position:absolute; top:24px; left:28px; display:flex; align-items:center; gap:18px; z-index:6;}
.sp-mark{background:none; border:0; cursor:pointer; padding:0; line-height:0;}
.sp-mark img{height:34px; display:block;}
.sp-crumb{display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint);}
.sp-crumb button{background:none; border:0; color:var(--faint); cursor:pointer; font:inherit; letter-spacing:inherit; text-transform:inherit;}
.sp-crumb button:hover{color:var(--ink);}
.sp-crumb em{color:var(--ivoire); font-style:normal;}
.sp-crumb span{opacity:.4;}
.sp-close{position:absolute; top:24px; right:28px; z-index:6; display:flex; align-items:center; gap:10px;
  background:rgba(8,11,22,.4); backdrop-filter:blur(6px); border:1px solid rgba(237,238,244,.2); color:var(--muted);
  cursor:pointer; padding:10px 16px; font-size:10px; letter-spacing:.26em; text-transform:uppercase; transition:all .3s;}
.sp-close:hover{border-color:var(--framboise); color:var(--ivoire);}
.sp-close i{font-style:normal;}
.sp-switch{position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:6; display:flex; gap:2px;
  background:rgba(8,11,22,.55); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.07); padding:5px;}
.sp-switch button{background:none; border:0; color:var(--faint); cursor:pointer; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; padding:9px 15px; transition:all .3s;}
.sp-switch button:hover{color:var(--ink);}
.sp-switch button.on{color:var(--ivoire); box-shadow:inset 0 -2px 0 var(--framboise);}

/* Archipel */
.sp-archipel{position:absolute; inset:0;}
.sp-head{position:absolute; top:90px; left:50%; transform:translateX(-50%); width:90%; text-align:center; pointer-events:none;}
.sp-head .roman{font-family:var(--serif); font-style:italic; font-weight:200; font-size:32px; color:var(--framboise);}
.sp-head h2{font-weight:300; font-size:clamp(28px,4vw,46px); color:var(--ivoire); margin-top:4px;}
.sp-head .sub{font-size:12px; letter-spacing:.14em; color:var(--muted); margin-top:14px;}
.sp-tools{position:absolute; top:210px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column;
  gap:12px; align-items:center;}
.fam-chips{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; max-width:680px; pointer-events:auto;}
.fam-chips button{pointer-events:auto; display:inline-flex; align-items:center; gap:7px; background:rgba(8,11,22,.5);
  backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.08); color:var(--muted); font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; padding:8px 13px; cursor:pointer; transition:all .3s;}
.fam-chips button i{width:7px; height:7px; border-radius:50%; display:inline-block;}
.fam-chips button:hover{color:var(--ink);}
.fam-chips button.on{color:var(--ivoire); border-color:rgba(225,29,110,.5);}
.view-toggle{display:flex; gap:2px; pointer-events:auto; background:rgba(8,11,22,.5); border:1px solid rgba(255,255,255,.07); padding:4px;}
.view-toggle button{background:none; border:0; color:var(--faint); cursor:pointer; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; padding:7px 14px; transition:all .3s;}
.view-toggle button.on{color:var(--ivoire); box-shadow:inset 0 -2px 0 var(--framboise);}
.sp-list{position:absolute; inset:0; padding:300px 8vw 96px; overflow-y:auto; pointer-events:auto;
  background:linear-gradient(rgba(6,9,20,.5), rgba(6,9,20,.85)); display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:0 40px; align-content:start;}
.sp-list-item{pointer-events:auto; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
  text-align:left; background:none; border:0; border-bottom:1px solid rgba(255,255,255,.07); color:var(--ink);
  cursor:pointer; padding:16px 6px; transition:background .3s, padding .3s;}
.sp-list-item:hover{background:rgba(255,255,255,.04); padding-left:12px;}
.sp-list-item .yr{font-size:11px; color:var(--framboise); letter-spacing:.08em;}
.sp-list-item .ti{font-size:16px; color:var(--ivoire);}
.sp-list-item .me{font-size:12px; color:var(--muted); text-align:right;}
.sp-list-item .fam-dot{display:none;}

/* Chambre-projet */
.sp-chamber{position:absolute; inset:0; overflow-y:auto; pointer-events:auto; perspective:1300px;}
.sp-depth{max-width:940px; margin:0 auto; padding:130px 6vw 120px; transform-style:preserve-3d;}
.sp-depth section{min-height:0; padding:0; display:block; margin:5vh 0;}
.sp-depth section.mod-chiffres{display:flex; padding:42px 0;}
.sp-depth section.mod-equipe{display:grid; padding-top:42px;}
.lbl{display:block; font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--framboise); margin-bottom:24px;}
.sp-hero{margin-bottom:2vh;}
.fam-tag{display:inline-flex; align-items:center; gap:9px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);}
.fam-tag i{width:8px; height:8px; border-radius:50%;}
.sp-hero h2{font-weight:300; font-size:clamp(36px,6.5vw,78px); line-height:1.01; color:var(--ivoire); margin-top:18px; text-wrap:balance;}
.sp-hero .accroche{font-family:var(--serif); font-style:italic; font-weight:200; font-size:clamp(19px,2.6vw,29px); color:var(--ink); margin-top:22px; max-width:700px;}
.sp-tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:26px; max-width:720px;}
.sp-tags span{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  border:1px solid rgba(255,255,255,.12); padding:6px 11px; border-radius:1px;}
.sp-visit{display:inline-flex; align-items:center; gap:10px; margin-top:30px; color:var(--ivoire);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; text-decoration:none;
  border:1px solid rgba(225,29,110,.5); padding:13px 22px; transition:all .35s;}
.sp-visit:hover{background:rgba(225,29,110,.14); border-color:var(--framboise);}
.sp-visit i{font-style:normal;}
.sp-herofig{margin:6vh 0 0; overflow:hidden; border:1px solid rgba(255,255,255,.08);}
.sp-herofig img{display:block; width:100%; max-height:62vh; object-fit:cover;}
.sp-facts{display:grid; grid-template-columns:repeat(4,auto); gap:38px; margin-top:42px; justify-content:start;}
.sp-facts dt{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--faint);}
.sp-facts dd{font-size:15px; color:var(--ivoire); margin-top:7px;}
.mod-intention p{font-family:var(--serif); font-style:italic; font-weight:200; font-size:clamp(22px,3.4vw,42px); line-height:1.34; color:var(--ivoire); text-wrap:balance;}
.mod-intention .lbl{margin-bottom:18px;}
.disp-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.07);}
.disp{background:#080B16; padding:28px 26px;}
.disp .n{font-family:var(--serif); font-style:italic; font-weight:200; color:var(--framboise); font-size:26px;}
.disp h4{font-weight:500; font-size:17px; color:var(--ivoire); margin-top:12px;}
.disp p{font-size:13.5px; color:var(--muted); margin-top:9px; line-height:1.6;}
.mod-chiffres{display:flex; flex-wrap:wrap; justify-content:center; gap:24px 48px; border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); padding:42px 0;}
.chiffre{text-align:center; flex:0 1 200px;}
.chiffre .v{display:block; font-weight:300; font-size:clamp(28px,4vw,46px); color:var(--ivoire);}
.chiffre .l{font-size:11.5px; letter-spacing:.08em; color:var(--muted); margin-top:10px; display:block; text-wrap:balance;}
.media-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.media-ph{position:relative; aspect-ratio:16/10; overflow:hidden; border:1px solid rgba(255,255,255,.08); margin:0;}
.media-stripes{position:absolute; inset:0; background:repeating-linear-gradient(135deg, rgba(125,140,200,.12) 0 2px, transparent 2px 12px), linear-gradient(160deg, rgba(22,30,70,.45), rgba(8,12,28,.55));}
.media-ph figcaption{position:absolute; left:0; right:0; bottom:0; padding:14px; font-size:12px; color:var(--muted); background:linear-gradient(transparent, rgba(5,7,15,.78));}
.media-ph .mono{font-family:ui-monospace,Menlo,monospace; font-size:10.5px; color:var(--faint); letter-spacing:.03em; margin-right:6px;}
.media-play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--ivoire); font-size:18px; opacity:.85;}
.frise{list-style:none; display:flex; flex-wrap:nowrap; gap:0; border-top:1px solid rgba(255,255,255,.12);}
.frise li{flex:1 1 0; min-width:0; position:relative; padding:26px 16px 0;}
.frise li + li{border-left:1px solid rgba(255,255,255,.06);}
.frise li::before{content:""; position:absolute; top:-5px; left:0; width:9px; height:9px; border-radius:50%; background:var(--framboise);}
.frise .a{font-size:11.5px; color:var(--framboise); letter-spacing:.04em; display:block; text-wrap:balance;}
.frise .t{font-size:13px; color:var(--ink); margin-top:9px; display:block; line-height:1.4; text-wrap:pretty;}
.mod-temoignages{display:grid; gap:26px;}
.mod-temoignages blockquote{margin:0; border-left:2px solid var(--framboise); padding-left:26px;}
.mod-temoignages p{font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(18px,2.4vw,27px); color:var(--ivoire); line-height:1.4;}
.mod-temoignages cite{font-style:normal; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:14px; display:block;}
.media-ph.has-img{background:#080B16;}
.media-ph.has-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.media-ph.has-img figcaption{position:absolute; left:0; right:0; bottom:0; padding:14px; font-size:12px; color:var(--ivoire); background:linear-gradient(transparent, rgba(5,7,15,.82));}
.mod-equipe{display:grid; grid-template-columns:repeat(3,1fr); gap:38px; border-top:1px solid rgba(255,255,255,.1); padding-top:42px;}
.mod-equipe:has(> div:only-child){grid-template-columns:1fr;}
.mod-equipe ul{list-style:none; margin-top:16px;}
.mod-equipe li{font-size:14px; color:var(--ink); padding:8px 0; border-bottom:1px solid rgba(255,255,255,.05);}
.sp-prevnext{display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:center; margin-top:6vh; border-top:1px solid rgba(255,255,255,.12); padding-top:36px;}
.sp-prevnext button{background:none; border:0; cursor:pointer; text-align:left; color:var(--muted); transition:color .3s;}
.sp-prevnext button:hover{color:var(--ink);}
.sp-prevnext button.r{text-align:right;}
.sp-prevnext .dir{display:block; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--framboise);}
.sp-prevnext .ti{display:block; font-size:16px; color:var(--ivoire); margin-top:9px;}
.sp-prevnext .to-sea{text-align:center; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); border:1px solid rgba(255,255,255,.2); padding:14px 22px; align-self:center;}
.sp-prevnext .to-sea:hover{border-color:var(--framboise); color:var(--ivoire);}

/* Espace-territoire (Forêt, Vallées, Montagnes, Fleuve) */
.sp-terr{position:absolute; inset:0; overflow-y:auto; pointer-events:auto; perspective:1300px;}
.sp-terr-depth{max-width:880px; margin:0 auto; padding:130px 6vw 120px; transform-style:preserve-3d;}
.sp-terr-hero{text-align:center; margin-bottom:5vh;}
.sp-terr-hero .roman{font-family:var(--serif); font-style:italic; font-weight:200; font-size:46px; color:var(--framboise);}
.sp-terr-hero .kicker{font-size:11px; letter-spacing:.4em; text-transform:uppercase; color:var(--faint); margin-top:16px;}
.sp-terr-hero h2{font-weight:300; font-size:clamp(34px,6vw,72px); line-height:1.02; color:var(--ivoire); margin-top:14px; text-wrap:balance;}
.sp-terr-hero .essence{font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:#7da0ff; margin-top:22px;}
.sp-terr-hero .phrase{font-family:var(--serif); font-style:italic; font-weight:200; font-size:clamp(20px,2.8vw,30px); color:var(--ink); margin-top:26px; text-wrap:balance;}
.sp-strophes{display:flex; flex-direction:column; gap:3.5vh; align-items:center; text-align:center; margin:1vh 0 6vh;}
.strophe p{font-family:var(--serif); font-weight:200; font-size:clamp(20px,3vw,32px); line-height:1.5; color:var(--ivoire); text-wrap:balance;}
.strophe p + p{margin-top:2px;}
.sp-methode-tag{display:flex; align-items:baseline; gap:18px; justify-content:center; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); padding:26px 0; margin-bottom:6vh;}
.sp-methode-tag .n{font-family:var(--serif); font-style:italic; font-weight:200; font-size:30px; color:var(--framboise);}
.sp-methode-tag .v{font-weight:500; font-size:20px; letter-spacing:.02em; color:var(--ivoire);}
.sp-methode-tag .d{font-size:13px; color:var(--muted); letter-spacing:.04em;}
.sp-facettes{margin-bottom:6vh;}
.sp-facettes .lbl{display:block; font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--framboise); margin-bottom:24px; text-align:center;}
.facettes-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.07);}
.facette{background:#080B16; padding:26px 24px; transition:background .4s;}
.facette:hover{background:#0C1020;}
.facette h4{font-weight:500; font-size:17px; color:var(--ivoire);}
.facette p{font-size:13.5px; line-height:1.62; color:var(--muted); margin-top:11px;}
.sp-cloture{text-align:center; margin-bottom:5vh;}
.sp-cloture p{font-family:var(--serif); font-style:italic; font-weight:200; font-size:clamp(19px,2.6vw,28px); line-height:1.45; color:var(--ink); text-wrap:balance;}
.sp-prevnext.terr{grid-template-columns:auto 1fr;}
@media (max-width:860px){
  .sp-terr-depth{padding:108px 22px 110px;}
  .sp-prevnext.terr{grid-template-columns:1fr;}
}

/* ====================== LA FORÊT DES TRACES ====================== */
.foret-chrome{position:absolute; inset:0; pointer-events:none; z-index:5; overflow:hidden;}

.foret-hero{position:absolute; top:90px; left:50%; transform:translateX(-50%); width:min(640px,90vw); text-align:center;}
.foret-hero .roman{font-family:var(--serif); font-style:italic; font-weight:200; font-size:38px; color:var(--framboise);}
.foret-hero .kicker{font-size:11px; letter-spacing:.4em; text-transform:uppercase; color:var(--faint); margin-top:12px;}
.foret-hero h2{font-weight:300; font-size:clamp(30px,4.6vw,54px); line-height:1.04; color:var(--ivoire); margin-top:10px; text-wrap:balance;}
.foret-lede{font-family:var(--serif); font-style:italic; font-weight:200; font-size:clamp(16px,1.9vw,21px); line-height:1.5; color:var(--ink); margin-top:18px; text-wrap:balance;}
.foret-hint{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-top:22px;}
/* voile radial derrière le hero pour que le texte reste lisible par-dessus les traces */
.foret-chrome:not(.vallees-chrome) .foret-hero::before{content:""; position:absolute; inset:-66px -170px -44px; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 60% 76% at 50% 46%, rgba(4,8,16,.82), rgba(4,8,16,.5) 50%, transparent 80%);}

/* indice au survol — la mémoire qui se donne à peine */
.foret-indice{position:absolute; transform:translate(calc(-50% + var(--shift,0px)),calc(-100% - 18px)); pointer-events:none; z-index:7;
  display:flex; flex-direction:column; align-items:center; gap:6px; white-space:nowrap;
  padding:11px 16px; background:rgba(7,10,20,.66); backdrop-filter:blur(8px);
  border:1px solid rgba(225,29,110,.35); animation:indiceIn .35s cubic-bezier(.16,1,.3,1) both;}
.foret-indice::after{content:""; position:absolute; bottom:-5px; left:calc(50% - var(--shift,0px)); transform:translateX(-50%) rotate(45deg);
  width:8px; height:8px; background:rgba(7,10,20,.66); border-right:1px solid rgba(225,29,110,.35); border-bottom:1px solid rgba(225,29,110,.35);}
.foret-indice .il{font-size:9px; letter-spacing:.28em; text-transform:uppercase; color:var(--framboise);}
.foret-indice .iv{font-size:17px; color:var(--ivoire); letter-spacing:.01em;}
.foret-indice.t-phrase .iv,.foret-indice.t-nom .iv{font-family:var(--serif); font-style:italic; font-weight:200; font-size:20px;}
.foret-indice.t-date .iv{font-family:ui-monospace,Menlo,monospace; font-size:15px; letter-spacing:.08em;}
.foret-indice .iv.son{display:flex; align-items:center; gap:4px;}
.foret-indice .iv.son i{width:2.5px; height:11px; background:var(--framboise); border-radius:1px; animation:eq 1s ease-in-out infinite;}
.foret-indice .iv.son i:nth-child(2){animation-delay:.18s} .foret-indice .iv.son i:nth-child(3){animation-delay:.36s} .foret-indice .iv.son i:nth-child(4){animation-delay:.1s}
.foret-indice .iv.son b{font-weight:300; font-size:14px; color:var(--ivoire); margin-left:8px; font-family:var(--grotesk);}
@keyframes indiceIn{from{opacity:0;} to{opacity:1;}}

/* archive au clic — surgit, reste lisible, fermable */
.foret-archive{position:absolute; left:50%; top:54%; transform:translate(-50%,-50%); z-index:6;
  width:min(440px,84vw); pointer-events:auto; background:rgba(8,11,22,.82); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12); box-shadow:0 30px 80px rgba(2,4,10,.6);
  animation:archiveIn .7s cubic-bezier(.16,1,.3,1) both;}
.foret-archive.closing{animation:archiveOut 1s ease forwards;}
.fa-visual{position:relative; aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.1);}
.fa-visual img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.85) contrast(.95);}
.fa-evoke{position:absolute; inset:0; display:flex; align-items:flex-end; padding:14px;
  background:repeating-linear-gradient(135deg, rgba(125,140,200,.12) 0 2px, transparent 2px 12px), linear-gradient(160deg, rgba(22,30,70,.5), rgba(8,12,28,.6));}
.fa-evoke .mono{font-family:ui-monospace,Menlo,monospace; font-size:10px; color:var(--faint); letter-spacing:.04em;}
.fa-body{padding:22px 24px 24px;}
.fa-src{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--framboise);}
.fa-text{font-family:var(--serif); font-style:italic; font-weight:200; font-size:clamp(18px,2.4vw,23px); line-height:1.4; color:var(--ivoire); margin-top:14px; text-wrap:balance;}
.fa-meta{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:16px;}
.fa-audio{display:inline-flex; align-items:center; gap:3px; margin-top:14px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint);}
.fa-audio i{width:2.5px; height:9px; background:var(--framboise); border-radius:1px; animation:eq 1s ease-in-out infinite;}
.fa-audio i:nth-child(2){animation-delay:.16s}.fa-audio i:nth-child(3){animation-delay:.32s}.fa-audio i:nth-child(4){animation-delay:.08s}
.fa-audio span{margin-left:8px;}
@keyframes archiveIn{from{opacity:0; transform:translate(-50%,calc(-50% + 26px)) scale(.97); filter:blur(6px);} to{opacity:1; transform:translate(-50%,-50%) scale(1); filter:blur(0);}}
@keyframes archiveOut{to{opacity:0; transform:translate(-50%,calc(-50% - 14px)) scale(1.01); filter:blur(7px);}}

/* ---- bouton de fermeture commun aux fiches-mémoire (Forêt · Vallées) ---- */
.mem-close{position:absolute; top:13px; right:13px; z-index:4; display:inline-flex; align-items:center; gap:8px;
  background:rgba(7,10,20,.6); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.16);
  cursor:pointer; color:var(--muted); font-family:var(--grotesk); font-size:9px; letter-spacing:.22em;
  text-transform:uppercase; padding:7px 11px; transition:color .3s, border-color .3s; pointer-events:auto;}
.mem-close span{opacity:0; transition:opacity .3s; max-width:0; overflow:hidden; white-space:nowrap;}
.mem-close:hover{color:var(--ivoire); border-color:var(--framboise);}
.mem-close:hover span{opacity:.85; max-width:60px;}
.mem-close i{font-style:normal; font-size:13px; line-height:1;}
/* barre de minuterie commune (fermeture auto) */
.mem-timer{position:absolute; left:0; bottom:0; height:2px; width:0; z-index:4;
  background:linear-gradient(90deg, rgba(225,29,110,.25), var(--framboise)); animation:fctimer 11s linear forwards;}

/* compteur de collecte + méthode */
.foret-status{position:absolute; left:30px; bottom:26px; display:flex; flex-direction:column; gap:14px;}
.foret-count{display:flex; align-items:baseline; gap:8px;}
.foret-count .cn{font-weight:300; font-size:30px; color:var(--ivoire); line-height:1;}
.foret-count .ct{font-size:14px; color:var(--faint);}
.foret-count .cl{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-left:6px;}
.foret-methode{display:flex; align-items:baseline; gap:12px; max-width:310px;}
.foret-methode .mn{font-family:var(--serif); font-style:italic; font-weight:200; font-size:20px; color:var(--framboise);}
.foret-methode .mv{font-weight:500; font-size:14px; color:var(--ivoire);}
.foret-methode .md{font-size:11px; color:var(--muted); letter-spacing:.02em; line-height:1.4;}

/* son (ambiance) */
.foret-sound{position:absolute; left:30px; bottom:130px; pointer-events:auto;
  display:flex; align-items:center; gap:10px; background:rgba(8,11,22,.5); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.1); color:var(--muted); cursor:pointer;
  font-family:var(--grotesk); font-size:10px; letter-spacing:.24em; text-transform:uppercase; padding:10px 15px; transition:all .3s;}
.foret-sound:hover{color:var(--ink); border-color:rgba(225,29,110,.4);}
.foret-sound .bars{display:flex; align-items:flex-end; gap:2.5px; height:13px;}
.foret-sound .bars i{width:2px; height:5px; background:currentColor; border-radius:1px;}
.foret-sound.on{color:var(--ivoire);}
.foret-sound.on .bars i{background:var(--framboise); animation:eq 1s ease-in-out infinite;}
.foret-sound.on .bars i:nth-child(2){animation-delay:.18s}.foret-sound.on .bars i:nth-child(3){animation-delay:.36s}

/* territoire suivant */
.foret-next{position:absolute; right:30px; bottom:26px; pointer-events:auto; background:none; border:0;
  cursor:pointer; text-align:right; color:var(--muted); transition:color .3s;}
.foret-next:hover{color:var(--ink);}
.foret-next .dir{display:block; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--framboise);}
.foret-next .ti{display:block; font-size:16px; color:var(--ivoire); margin-top:8px;}

@media (max-width:860px){
  .foret-hero{top:74px; width:92vw;}
  .foret-hint{display:none;}
  .foret-methode .md{display:none;}
  .foret-status{left:18px; bottom:78px;}
  .foret-sound{left:18px; bottom:178px; padding:9px 12px;}
  .foret-next{right:18px; bottom:78px; text-align:right;}
  .foret-archive{top:50%;}
}
@media (prefers-reduced-motion:reduce){
  .foret-indice,.foret-archive{animation:none!important;}
}

/* ====================== LES VALLÉES DES CONNEXIONS ====================== */
.vallees-chrome .foret-hero{position:absolute; transition:opacity .45s ease;}
.vallees-chrome .foret-hero.dim{opacity:.14; pointer-events:none;}
.vallees-chrome .foret-hero::before{content:""; position:absolute; inset:-50px -120px -30px; z-index:-1;
  background:radial-gradient(ellipse 60% 70% at 50% 42%, rgba(4,7,16,.62), rgba(4,7,16,.28) 55%, transparent 78%);}
.vallees-anchor{position:absolute; top:90px; right:26px; width:min(264px,26vw); z-index:8;
  display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:5px;
  padding:18px 18px; pointer-events:auto; overflow:hidden;
  background:linear-gradient(168deg, rgba(14,20,40,.93), rgba(7,11,24,.95));
  border:1px solid rgba(125,140,200,.20); box-shadow:0 24px 64px -30px rgba(0,0,0,.78);
  backdrop-filter:blur(16px);
  animation:fpanelIn .6s cubic-bezier(.16,1,.3,1) both;}
.vallees-anchor .va-ti{font-weight:500; font-size:15px; color:var(--ivoire); white-space:normal; line-height:1.2;}
.vallees-anchor .va-ess{font-family:var(--serif); font-style:italic; font-weight:200; font-size:13px; line-height:1.34; color:var(--ink); white-space:normal; margin-top:2px;}
.vallees-anchor .va-meta{font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:3px;}
.vallees-anchor .va-res{display:flex; align-items:baseline; gap:6px; font-size:11.5px; line-height:1.3; color:var(--ivoire); margin-top:6px;}
.vallees-anchor .va-res i{font-family:var(--serif); font-style:italic; color:var(--framboise); font-size:13px;}
.vallees-anchor .va-cta{font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--framboise); margin-top:9px;}
.vallees-anchor:hover .va-cta{color:var(--ivoire);}
.va-cta-btn{margin-top:11px; display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:none; border:1px solid rgba(225,29,110,.45); color:var(--ivoire); font-family:var(--grotesk);
  font-size:9px; letter-spacing:.18em; text-transform:uppercase; padding:7px 12px; transition:border-color .3s, background .3s;}
.va-cta-btn:hover{border-color:var(--framboise); background:rgba(225,29,110,.1);}
.va-cta-btn i{font-style:normal; color:var(--framboise); transition:transform .3s;}
.va-cta-btn:hover i{transform:translateX(4px);}
@keyframes vAnchorIn{from{opacity:0; transform:translate(-50%,calc(-50% + 16px)); filter:blur(4px);} to{opacity:1; transform:translate(-50%,-50%); filter:blur(0);}}
@media (prefers-reduced-motion:reduce){ .vallees-anchor{animation:none!important;} }
@media (max-width:860px){
  .vallees-anchor{top:auto; right:14px; left:14px; bottom:74px; width:auto; padding:16px 16px; justify-content:flex-start;}
}

/* révélation des modules — état visible par défaut, caché-puis-révélé si mouvement permis */
.reveal-mod{opacity:1; transform:none;}
@media (prefers-reduced-motion:no-preference){
  .reveal-mod{opacity:0; transform:translateY(40px) translateZ(-120px); transition:opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1);}
  .reveal-mod.in{opacity:1; transform:none;}
}

@media (max-width:860px){
  .sp-top{left:18px; top:18px; gap:12px;}
  .sp-mark img{height:28px;}
  .sp-close{right:16px; top:18px; padding:9px 12px;}
  .sp-head{top:78px;} .sp-tools{top:200px;}
  .sp-list{padding:290px 22px 96px; grid-template-columns:1fr;}
  .sp-depth{padding:108px 22px 110px;}
  .disp-grid,.mod-chiffres,.media-grid,.mod-equipe{grid-template-columns:1fr 1fr;}
  .mod-equipe{gap:26px;}
  .frise{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .frise li{min-width:120px;}
  .sp-facts{grid-template-columns:1fr 1fr; gap:24px;}
  .sp-prevnext{grid-template-columns:1fr; gap:14px;}
  .sp-prevnext button.r{text-align:left;}
  .sp-switch{bottom:12px; gap:0; flex-wrap:wrap; max-width:94vw; justify-content:center;}
  .sp-switch button{padding:8px 10px;}
}
@media (max-width:560px){
  .disp-grid,.mod-chiffres,.media-grid,.mod-equipe,.sp-facts{grid-template-columns:1fr;}
}

/* ====================== LES MONTAGNES DE L'ÉMERGENCE ====================== */
.mont-chrome{position:absolute; inset:0; pointer-events:none; z-index:5; overflow:hidden;}
/* fond plein cadre : l'image illustrée (parallaxe douce ou Ken Burns) */
.mont-bg{position:absolute; inset:0; z-index:0; background:#0a1230 url("assets/montagnes-fond.png") center/cover no-repeat;
  transform:scale(1.06); transform-origin:center; will-change:transform;}
[data-mont-motion="ambiance"] .mont-bg{animation:montKen 42s ease-in-out infinite alternate;}
@keyframes montKen{0%{transform:scale(1.05) translate(0,0);} 100%{transform:scale(1.13) translate(-1.6%,-1.1%);}}
.mont-fx{position:absolute; inset:0; z-index:1; pointer-events:none;}
@media (prefers-reduced-motion:reduce){ .mont-bg{animation:none!important; transform:scale(1.04)!important;} }
.mont-hero{z-index:6;}
.mont-stars{z-index:8;}
.mont-hero{top:60px; left:56px; transform:none; width:min(400px,40vw); text-align:left;}
/* voile doux à gauche pour détacher le texte du relief */
.mont-hero{position:absolute;}
.mont-hero::before{content:""; position:absolute; inset:-36px -70px -30px -46px; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 78% 82% at 28% 42%, rgba(4,7,16,.66), rgba(4,7,16,.32) 52%, transparent 80%);}
/* lede compact : 4 énoncés rapprochés qui restent au-dessus des sommets */
.mont-lede{font-size:clamp(13.5px,1.5vw,17.5px); line-height:1.4; margin-top:14px;}
.mont-lede .lp{display:block;}
.mont-lede .lp + .lp{margin-top:.5em;}
.mont-hero,.mont-massif,.mont-status{transition:opacity .5s ease, filter .5s ease;}
.mont-chrome.panel-open .mont-hero,
.mont-chrome.panel-open .mont-massif,
.mont-chrome.panel-open .mont-status{opacity:.12; filter:blur(2px); pointer-events:none;}

/* massif : silhouettes étagées en profondeur */
.mont-massif{position:absolute; inset:0; pointer-events:none;}

/* champ d'étoiles — chaque sommet est un point de lumière posé sur une crête */
.mont-stars{position:absolute; inset:0; z-index:8; pointer-events:none;}
.mont-star{position:absolute; width:150px; height:150px;
  transform:translate(calc(-50% - var(--px,0) * var(--plxpx,40) * 1px), calc(-50% - var(--py,0) * 14px));
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer; pointer-events:auto;}

/* lueur au sol — la crête s'éclaire au survol */
.star-ground{position:absolute; width:300px; height:150px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(225,29,110,.26), rgba(225,29,110,0) 66%);
  opacity:0; transition:opacity .55s ease; pointer-events:none;}
.mont-star.on .star-ground{opacity:1;}

/* halo doux autour du point — respire en permanence pour signaler l'interactivité */
.star-glow{position:absolute; width:34px; height:34px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,224,238,.6), rgba(255,150,195,.16) 52%, rgba(255,150,195,0) 72%);
  transition:width .5s ease, height .5s ease, background .5s ease;
  animation:starBreath 3.6s ease-in-out infinite;}
/* anneau « ping » qui s'ouvre et s'efface : invite au tap */
.mont-star .star-glow::after{content:""; position:absolute; inset:0; margin:auto; width:22px; height:22px;
  border-radius:50%; border:1.5px solid rgba(255,160,200,.55); animation:starPing 3.6s ease-out infinite;}
.mont-star.on .star-glow{width:78px; height:78px; background:radial-gradient(circle, rgba(255,224,238,.9), rgba(225,29,110,.18) 60%, rgba(225,29,110,0) 74%); animation:none;}
.mont-star.on .star-glow::after{animation:none; opacity:0;}
.mont-star:nth-child(2) .star-glow, .mont-star:nth-child(2) .star-glow::after{animation-delay:-.9s;}
.mont-star:nth-child(3) .star-glow, .mont-star:nth-child(3) .star-glow::after{animation-delay:-1.8s;}
.mont-star:nth-child(4) .star-glow, .mont-star:nth-child(4) .star-glow::after{animation-delay:-2.7s;}
@keyframes starBreath{0%,100%{transform:scale(.86); opacity:.72;} 50%{transform:scale(1.12); opacity:1;}}
@keyframes starPing{0%{transform:scale(.5); opacity:.7;} 70%,100%{transform:scale(2.8); opacity:0;}}

/* l'étoile — plus présente, scintillement marqué */
.star-core{position:absolute; width:20px; height:20px; overflow:visible;
  fill:var(--ivoire); filter:drop-shadow(0 0 7px rgba(255,214,231,.85));
  transition:transform .5s cubic-bezier(.16,1,.3,1), fill .4s ease, filter .4s ease;
  animation:starTwinkle 4.2s ease-in-out infinite;}
.mont-star.on .star-core{transform:scale(1.9); fill:#FFE3EE; filter:drop-shadow(0 0 12px rgba(225,29,110,.95));}
.mont-star:nth-child(2) .star-core{animation-delay:-1.3s;}
.mont-star:nth-child(3) .star-core{animation-delay:-2.5s;}
.mont-star:nth-child(4) .star-core{animation-delay:-3.6s;}
@keyframes starTwinkle{0%,100%{opacity:.72; transform:scale(.88) rotate(0deg);} 50%{opacity:1; transform:scale(1.12) rotate(45deg);}}
@media (prefers-reduced-motion:reduce){
  .star-glow, .star-glow::after, .star-core{animation:none!important;}
  .star-glow{opacity:.9;} .mont-star .star-glow::after{opacity:.4;}
}

/* libellé = la question, RÉVÉLÉE au survol / tap uniquement (sinon on ne garde que le point) */
.mont-star .mont-label{position:absolute; left:50%; transform:translateX(-50%) translateY(6px);
  display:flex; flex-direction:column; align-items:center; gap:4px; width:max-content; max-width:230px;
  opacity:0; pointer-events:none; transition:opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1);}
.mont-star .mont-label::before{content:""; position:absolute; inset:-12px -20px; z-index:-1; border-radius:16px;
  background:radial-gradient(ellipse at center, rgba(6,9,22,.62), rgba(6,9,22,.28) 56%, transparent 78%);}
.mont-star.lp-up .mont-label{bottom:58%;}
.mont-star.lp-down .mont-label{top:58%;}
.mont-star.on .mont-label{opacity:1; transform:translateX(-50%) translateY(0);}
.mont-star.lp-up.on .mont-label{transform:translateX(-50%) translateY(0);}
.ml-num,.ml-methode,.ml-phrase{display:none;}
.ml-q{font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(13.5px,1.3vw,17px); line-height:1.34;
  color:#eef0f6; text-align:center; text-wrap:balance;
  text-shadow:0 1px 4px rgba(4,7,18,.98), 0 2px 22px rgba(4,7,18,.9);}
.mont-star.on .ml-q{color:#fff;}

/* brume basse atmosphérique */
.mont-mist{position:absolute; left:0; right:0; bottom:0; height:22%; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgba(7,11,30,.55), rgba(10,16,42,.14) 60%, transparent);}

.mont-status{}

/* panneau au clic */
.mont-scrim{position:absolute; inset:0; z-index:9; pointer-events:auto; display:flex; align-items:center; justify-content:center;
  padding:40px 20px; background:radial-gradient(ellipse at 50% 45%, rgba(5,8,20,.72), rgba(4,6,14,.92));
  animation:montScrimIn .4s ease both;}
@keyframes montScrimIn{from{opacity:0}to{opacity:1}}
.mont-panel{position:relative; width:min(620px,92vw); max-height:84vh; overflow-y:auto;
  background:rgba(9,13,28,.9); backdrop-filter:blur(14px); border:1px solid rgba(242,241,238,.14);
  box-shadow:0 40px 110px rgba(2,4,10,.7); padding:46px clamp(26px,4vw,52px) 40px;
  animation:montPanelIn .55s cubic-bezier(.16,1,.3,1) both;}
@keyframes montPanelIn{from{opacity:0; transform:translateY(26px); filter:blur(6px);} to{opacity:1; transform:none; filter:none;}}
.mont-panel-close{position:absolute; top:18px; right:18px; display:flex; align-items:center; gap:8px;
  background:none; border:0; cursor:pointer; color:var(--muted); font-family:var(--grotesk);
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; transition:color .3s;}
.mont-panel-close:hover{color:var(--ivoire);}
.mont-panel-close i{font-style:normal; font-size:14px;}
.mp-eyebrow{display:flex; align-items:baseline; gap:12px; margin-bottom:22px;}
.mp-num{font-family:var(--serif); font-style:italic; font-weight:200; font-size:24px; color:var(--framboise);}
.mp-step{font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--ivoire);}
.mp-question{font-family:var(--serif); font-style:italic; font-weight:200; font-size:clamp(22px,3vw,32px); line-height:1.28; color:var(--ivoire); text-wrap:balance;}
.mp-answer{margin-top:26px; padding-top:24px; border-top:1px solid rgba(242,241,238,.1);}
.mp-lbl{display:block; font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--framboise); margin-bottom:12px;}
.mp-answer p{font-size:clamp(14px,1.5vw,16px); line-height:1.66; color:var(--ink);}
.mp-projet{display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin-top:30px; width:100%;
  padding:18px 20px; cursor:pointer; text-align:left; background:rgba(225,29,110,.06);
  border:1px solid rgba(225,29,110,.3); transition:border-color .3s, background .3s;}
.mp-projet:hover{border-color:var(--framboise); background:rgba(225,29,110,.12);}
.mpp-lbl{font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--framboise);}
.mpp-ti{font-weight:500; font-size:18px; color:var(--ivoire);}
.mpp-go{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:6px;}
.mpp-go i{font-style:normal;}
.mp-projet:hover .mpp-go{color:var(--ivoire);}

@media (max-width:860px){
  .mont-hero{top:64px;}
  .mont-label{max-width:38vw;}
  .ml-phrase{display:none;}
}

/* ====================== LE FLEUVE DE TRANSMISSION ====================== */
.fleuve-chrome{position:absolute; inset:0; pointer-events:none; z-index:5; overflow:hidden;}
.fleuve-hero{top:84px; left:64px; transform:none; text-align:left; width:min(540px,44vw); transition:opacity .5s ease;}
.fleuve-hero.dim{opacity:.12; pointer-events:none;}
.fleuve-hero::before{content:""; position:absolute; inset:-54px -110px -34px -84px; z-index:-1;
  background:radial-gradient(ellipse 72% 78% at 32% 44%, rgba(5,9,26,.66), rgba(5,9,26,.26) 56%, transparent 80%);}
.fleuve-q{font-family:var(--serif); font-style:italic; font-weight:200; font-size:clamp(20px,2.8vw,30px); color:var(--ivoire); margin-top:18px; text-wrap:balance;}

/* ---- la Forêt-lède / la question restent en serif de maison (Newsreader) ---- */
.fleuve-chrome.card-open .fleuve-transition{ opacity:.12; pointer-events:none; transition:opacity .4s ease; }

/* scrim de fermeture (modes centrée / proche) */
.fleuve-scrim{position:absolute; inset:0; z-index:6; pointer-events:auto;
  background:radial-gradient(ellipse 70% 70% at 50% 50%, rgba(4,8,20,.34), rgba(4,8,20,.06) 72%);
  animation:fscrimIn .5s ease both;}
@keyframes fscrimIn{from{opacity:0;} to{opacity:1;}}

/* ---- la fenêtre d'info (3 dispositions) ---- */
.fleuve-card{z-index:8; pointer-events:auto; color:var(--ivoire); display:flex; flex-direction:column;
  background:linear-gradient(168deg, rgba(14,20,40,.93), rgba(7,11,24,.95));
  border:1px solid rgba(125,140,200,.20); box-shadow:0 34px 90px -34px rgba(0,0,0,.78);
  backdrop-filter:blur(16px); overflow:hidden;}
.fleuve-card .fc-verb{font-family:var(--grotesk); font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--framboise);}
.fleuve-card .fc-text{font-family:var(--serif); font-style:italic; font-weight:200; font-size:clamp(23px,2.7vw,33px); line-height:1.34; color:var(--ivoire); text-wrap:balance; margin-top:16px;}
.fcard-close{position:absolute; top:15px; right:16px; display:inline-flex; align-items:center; gap:8px;
  background:none; border:0; cursor:pointer; color:var(--faint); font-family:var(--grotesk);
  font-size:9px; letter-spacing:.24em; text-transform:uppercase; transition:color .3s; pointer-events:auto;}
.fcard-close span{opacity:0; transition:opacity .3s;}
.fcard-close:hover{color:var(--ivoire);} .fcard-close:hover span{opacity:.7;}
.fcard-close i{font-style:normal; font-size:15px; line-height:1;}
.fc-projet{display:inline-flex; flex-direction:column; align-items:flex-start; gap:6px; width:100%; text-align:left;
  margin-top:22px; padding-top:18px; border:0; border-top:1px solid rgba(255,255,255,.12);
  background:none; cursor:pointer; pointer-events:auto;}
.fcp-lbl{font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted);}
.fcp-ti{font-weight:500; font-size:16px; color:var(--ivoire); display:inline-flex; align-items:center; gap:9px; transition:color .3s;}
.fcp-ti i{font-style:normal; color:var(--framboise); transition:transform .3s;}
.fc-projet:hover .fcp-ti{color:var(--framboise);}
.fc-projet:hover .fcp-ti i{transform:translateX(4px);}
.fc-timer{position:absolute; left:0; bottom:0; height:2px; width:0;
  background:linear-gradient(90deg, rgba(225,29,110,.25), var(--framboise)); animation:fctimer 11s linear forwards;}
@keyframes fctimer{from{width:0;} to{width:100%;}}

/* mode panneau — ancré à droite, ne couvre jamais le fleuve */
.fleuve-card.mode-panneau{position:absolute; top:96px; right:30px; bottom:96px; width:min(380px,40vw);
  justify-content:center; padding:40px 36px; animation:fpanelIn .6s cubic-bezier(.16,1,.3,1) both;}
.fleuve-card.mode-panneau.closing{animation:fpanelOut .55s ease forwards;}
@keyframes fpanelIn{from{opacity:0; transform:translateX(34px); filter:blur(5px);} to{opacity:1; transform:none; filter:none;}}
@keyframes fpanelOut{to{opacity:0; transform:translateX(26px); filter:blur(4px);}}

/* mode centrée */
.fleuve-card.mode-centre{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(560px,86vw); align-items:center; text-align:center; padding:46px 48px;
  animation:fcentreIn .6s cubic-bezier(.16,1,.3,1) both;}
.fleuve-card.mode-centre .fc-projet{align-items:center; text-align:center;}
.fleuve-card.mode-centre.closing{animation:fcentreOut .55s ease forwards;}
@keyframes fcentreIn{from{opacity:0; transform:translate(-50%,calc(-50% + 14px)); filter:blur(5px);} to{opacity:1; transform:translate(-50%,-50%); filter:none;}}
@keyframes fcentreOut{to{opacity:0; transform:translate(-50%,calc(-50% - 12px)); filter:blur(4px);}}

/* mode proche — collé au mot cliqué */
.fleuve-card.mode-proche{position:absolute; transform:translate(-50%,-50%); width:min(380px,82vw); padding:30px 32px 34px;
  animation:fproIn .5s cubic-bezier(.16,1,.3,1) both;}
.fleuve-card.mode-proche.closing{animation:fproOut .5s ease forwards;}
@keyframes fproIn{from{opacity:0; transform:translate(-50%,calc(-50% + 12px)); filter:blur(5px);} to{opacity:1; transform:translate(-50%,-50%); filter:none;}}
@keyframes fproOut{to{opacity:0; transform:translate(-50%,calc(-50% - 10px)); filter:blur(4px);}}

/* transition vers l'Archipel */
.fleuve-transition{position:absolute; right:30px; bottom:26px; pointer-events:auto; text-align:right;
  display:flex; flex-direction:column; align-items:flex-end; gap:11px;}
.ft-line{font-family:var(--serif); font-style:italic; font-weight:200; font-size:15px; color:var(--ink); max-width:280px; text-wrap:balance;}
.ft-cta{display:inline-flex; align-items:center; gap:10px; cursor:pointer; background:none;
  border:1px solid rgba(225,29,110,.4); color:var(--ivoire); font-family:var(--grotesk);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; padding:11px 18px; transition:border-color .3s, background .3s;}
.ft-cta:hover{border-color:var(--framboise); background:rgba(225,29,110,.1);}
.ft-cta i{font-style:normal; color:var(--framboise); transition:transform .3s;}
.ft-cta:hover i{transform:translateX(4px);}

@media (max-width:860px){
  .fleuve-hero{top:68px; left:20px; width:84vw;}
  .fleuve-transition{right:18px; bottom:72px; max-width:62vw;}
  .ft-line{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .fleuve-cue,.fleuve-phrase{animation:none!important;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;}
  .reveal-el{opacity:1;transform:none;}
  .reveal-mod{opacity:1;transform:none;}
  .space-layer{transition:opacity .3s ease;}
}
@media print{
  .reveal-el,.reveal-mod,.space-content{opacity:1!important;transform:none!important;filter:none!important;animation:none!important;}
}

/* ====================== LA SOURCE (parenthèse immersive) ====================== */
/* déclencheur dans le manifeste */
.source-link{margin-top:42px; display:inline-flex; align-items:center; gap:13px; cursor:pointer;
  background:none; border:1px solid rgba(225,29,110,.5); color:var(--ivoire); font-family:var(--grotesk);
  font-size:11px; letter-spacing:.3em; text-transform:uppercase; padding:15px 30px; border-radius:2px; transition:all .4s;}
.source-link:hover{background:rgba(225,29,110,.14); border-color:var(--framboise);}
.source-link i{font-style:normal; transition:transform .35s;}
.source-link:hover i{transform:translateX(6px);}

.source-overlay{position:fixed; inset:0; z-index:80; opacity:0; visibility:hidden; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 108%, #0a1838 0%, #060e26 32%, transparent 70%),
    radial-gradient(140% 120% at 50% 8%, #05091c 0%, #03060f 55%, #020409 100%);
  transition:opacity 1s ease;}
.source-overlay.open{opacity:1; visibility:visible; pointer-events:auto;}
.source-overlay.shown{opacity:1; visibility:visible; transition:none;}
.source-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; z-index:1;}
.source-veil{position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(125% 95% at 50% 58%, transparent 50%, rgba(1,3,9,.66) 100%);}
body.source-open{overflow:hidden;}

.s-retour{position:absolute; top:26px; left:30px; z-index:6; display:inline-flex; align-items:center; gap:10px;
  background:none; border:0; color:var(--muted); cursor:pointer; font-family:var(--grotesk);
  font-size:10px; letter-spacing:.28em; text-transform:uppercase; padding:6px; transition:color .35s;}
.s-retour:hover{color:var(--ivoire);}
.s-retour i{font-style:normal; transition:transform .35s; color:var(--framboise);}
.s-retour:hover i{transform:translateX(-4px);}
.s-brand{position:absolute; top:22px; right:28px; z-index:6; width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(236,72,128,.34); display:flex; align-items:center; justify-content:center;}
.s-brand img{height:22px; width:auto; opacity:.82;}

/* ---- scrollytelling « fil de l'eau » : décor fixe, temps qui défilent ---- */
.source-scroll{position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; z-index:2;
  scroll-behavior:smooth;}
.s-beat{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:96px 7vw; box-sizing:border-box; position:relative;}
.beat-confluence{min-height:78vh;}      /* le climax : laisser respirer la source */

/* temps 1 — ouverture */
.beat-ouverture{gap:22px; text-align:center;}
.s-title{font-family:var(--serif); font-weight:300; font-size:clamp(46px,7vw,96px); color:var(--ivoire);
  line-height:1; letter-spacing:.01em;}
.s-sub{font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(19px,2.6vw,30px);
  color:#f0a4c0; text-align:center; text-wrap:balance; max-width:560px;}
.s-cue{margin-top:42px; width:24px; height:38px; border:1px solid rgba(188,212,255,.4); border-radius:13px;
  position:relative;}
.s-cue::after{content:""; position:absolute; left:50%; top:8px; width:3px; height:7px; border-radius:2px;
  background:#bcd4ff; transform:translateX(-50%); animation:s-cue 1.8s ease-in-out infinite;}
@keyframes s-cue{0%,100%{opacity:.2; transform:translate(-50%,0);}50%{opacity:1; transform:translate(-50%,10px);}}

/* temps 2 — intention */
.beat-intention{text-align:center;}
.s-intro{font-family:var(--serif); font-weight:300; font-size:clamp(22px,3.1vw,38px); line-height:1.5;
  color:var(--ivoire); max-width:760px; text-wrap:balance;}

/* temps 3 — la rencontre (fondatrices côte à côte) */
.beat-rencontre{padding-top:120px; padding-bottom:120px;}
.s-rencontre{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,8vw,150px); width:100%;
  max-width:1080px; align-items:start;}
.s-fig{display:flex; flex-direction:column;}
.s-fig.left{align-items:flex-start; text-align:left;}
.s-fig.right{align-items:flex-end; text-align:right;}
.s-portrait{width:clamp(140px,15vw,196px); height:clamp(186px,20vw,262px); display:block; margin-bottom:26px;
  --slot-bg:rgba(10,18,40,.5); border-radius:8px; opacity:.95;}
.s-name{font-family:var(--serif); font-weight:400; font-size:clamp(24px,2.6vw,34px); color:var(--ivoire);
  line-height:1.1;}
.s-roles{list-style:none; margin-top:18px; display:flex; flex-direction:column; gap:11px; max-width:330px;}
.s-fig.right .s-roles{align-items:flex-end;}
.s-roles li{font-size:clamp(13px,1vw,15px); line-height:1.6; color:var(--muted);}
.s-roles li.lead{color:#e69bb8;}
.s-keys{margin-top:26px; color:#bcd4ff;}
.s-fig.right .s-keys{color:#ec88aa;}
.s-keys ul{list-style:none; display:flex; flex-direction:column; gap:4px;}
.s-fig.right .s-keys ul{align-items:flex-end;}
.s-keys li{font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(16px,1.6vw,22px); line-height:1.5;}
.s-flourish{display:block; width:124px; height:8px; margin-top:10px; opacity:.7;}
.s-fig.right .s-flourish{margin-left:auto;}
.mots-capitales .s-keys li{font-family:var(--grotesk); font-style:normal; font-size:12px; letter-spacing:.28em; text-transform:uppercase; line-height:2;}
.mots-capitales .s-flourish{display:none;}
.mots-liste .s-keys li{font-family:var(--grotesk); font-style:normal; font-size:13.5px; letter-spacing:.1em; line-height:1.85;}
.mots-liste .s-fig.left .s-keys li::before{content:"— "; opacity:.6;}
.mots-liste .s-fig.right .s-keys li::after{content:" —"; opacity:.6;}
.mots-liste .s-flourish{display:none;}

/* temps 5 — Mérésis émerge */
.beat-meresis{gap:48px;}
.s-medallion{width:clamp(220px,24vw,300px); aspect-ratio:1; border:1px solid rgba(180,200,255,.18);
  border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:30px; text-align:center; background:radial-gradient(circle at 50% 60%, rgba(20,42,90,.32), transparent 70%);}
.s-med-mark{height:34px; width:auto; opacity:.8; margin-bottom:2px;}
.s-med-name{font-size:14px; letter-spacing:.5em; text-transform:uppercase; color:var(--ivoire); padding-left:.5em;}
.s-med-phrase{font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(15px,1.6vw,20px);
  color:#e69bb8; max-width:88%; line-height:1.4; text-wrap:balance;}
.s-cta{display:inline-flex; align-items:center; gap:13px; cursor:pointer; background:none;
  border:1px solid rgba(225,29,110,.5); color:var(--ivoire); font-family:var(--grotesk);
  font-size:11px; letter-spacing:.3em; text-transform:uppercase; padding:16px 32px; border-radius:2px;
  white-space:nowrap; transition:all .4s;}
.s-cta:hover{background:rgba(225,29,110,.14); border-color:var(--framboise);}
.s-cta i{font-style:normal; color:var(--framboise); transition:transform .35s;}
.s-cta:hover i{transform:translateX(6px);}

/* révélation au défilement : fade + léger glissé vertical */
.s-reveal{opacity:1; transform:none;}
@media (prefers-reduced-motion:no-preference){
  .source-overlay .s-reveal{opacity:0; transform:translateY(34px);
    transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.16,1,.3,1);}
  .source-overlay .s-reveal.in{opacity:1; transform:none;}
  .s-rencontre .s-fig.right.s-reveal{transition-delay:.14s;}
  .source-overlay.shown .s-reveal{opacity:1; transform:none; transition:none;}
}

/* ---- mobile / écrans étroits ---- */
@media (max-width:880px){
  .s-beat{padding:92px 26px;}
  .s-rencontre{grid-template-columns:1fr; gap:64px; max-width:420px;}
  .s-fig.left,.s-fig.right{align-items:center; text-align:center;}
  .s-fig.right .s-roles{align-items:center;}
  .s-roles{align-items:center;}
  .s-fig.right .s-keys ul{align-items:center;}
  .s-keys ul{align-items:center;}
  .s-flourish,.s-fig.right .s-flourish{margin:10px auto 0;}
  .s-brand{top:18px; right:18px; width:40px; height:40px;}
  .s-retour{top:18px; left:16px;}
  .s-retour span{display:none;}
}
/* ====================== L'ARCHIPEL DES PROJETS (carte d'îles) ====================== */
.arch2{position:absolute; inset:0; pointer-events:none;}
.arch2-bg{position:absolute; inset:0; z-index:0; pointer-events:none; transform-origin:center; will-change:transform;
  background:#04060f url("assets/archipel-fond.png") center/cover no-repeat;}
.arch2-sea{position:absolute; inset:0; width:100%; height:100%; z-index:0;}

.arch2-head{position:absolute; top:80px; left:48px; z-index:6; max-width:300px; pointer-events:none;}
.arch2-head h2{font-size:clamp(28px,3.2vw,44px); font-weight:300; line-height:1.04; color:var(--ivoire); letter-spacing:-.01em;}
.arch2-rule{display:block; width:42px; height:2px; background:var(--framboise); margin:18px 0;}
.arch2-head p{font-size:13px; line-height:1.5; color:var(--muted); margin-top:11px; max-width:262px;}

.arch2-filters{position:absolute; top:22px; left:50%; transform:translateX(-50%); z-index:12;
  display:flex; flex-direction:column; align-items:center; gap:9px; pointer-events:auto; max-width:97vw;}

/* barre : bouton Filtrer (menu déroulant) + compteur + bascule Carte/Liste */
.arch2-barrow{display:flex; align-items:center; gap:14px;}
.arch2-filterbtn{display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-family:var(--grotesk);
  background:rgba(12,18,38,.62); border:1px solid rgba(255,255,255,.14); color:var(--ivoire);
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; padding:9px 14px; border-radius:999px;
  backdrop-filter:blur(10px); transition:border-color .3s, background .3s;}
.arch2-filterbtn:hover, .arch2-filterbtn.open{border-color:rgba(255,255,255,.4); background:rgba(18,26,52,.8);}
.arch2-filterbtn.active{border-color:rgba(225,29,110,.5);}
.afb-ic{display:inline-flex; flex-direction:column; gap:2.5px; width:12px;}
.afb-ic i{display:block; height:1.5px; background:currentColor; border-radius:2px;}
.afb-ic i:nth-child(1){width:12px;} .afb-ic i:nth-child(2){width:8px;} .afb-ic i:nth-child(3){width:5px;}
.afb-badge{display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px;
  background:var(--framboise); color:#fff; border-radius:999px; font-size:9.5px; letter-spacing:0;}
.afb-caret{font-style:normal; font-size:9px; opacity:.7; transition:transform .3s;}
.arch2-filterbtn.open .afb-caret{transform:rotate(180deg);}

.arch2-count{font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); min-width:64px; text-align:center;}
.arch2-toggle{display:flex; gap:2px; background:rgba(12,18,38,.5); border:1px solid rgba(255,255,255,.08);
  padding:4px; backdrop-filter:blur(8px);}
.arch2-toggle button{background:none; border:0; color:var(--faint); cursor:pointer; font-family:var(--grotesk);
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; padding:6px 13px; transition:color .3s;}
.arch2-toggle button.on{color:var(--ivoire); box-shadow:inset 0 -2px 0 var(--framboise);}

/* menu déroulant des filtres */
.arch2-menu-scrim{position:fixed; inset:0; z-index:11; background:transparent;}
.arch2-menu{position:relative; z-index:12; width:min(340px,92vw); display:flex; flex-direction:column;
  background:rgba(10,15,32,.94); border:1px solid rgba(255,255,255,.14); border-radius:14px;
  box-shadow:0 30px 80px -24px rgba(0,0,0,.8); backdrop-filter:blur(16px); overflow:hidden;
  animation:archMenuIn .28s cubic-bezier(.16,1,.3,1) both;}
@keyframes archMenuIn{from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:none;}}
.afm-group{padding:15px 16px 6px; border-bottom:1px solid rgba(255,255,255,.07);}
.afm-title{font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--framboise); margin-bottom:11px;}
.afm-opts{display:flex; flex-direction:column; gap:2px;}
.afm-opt{display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
  background:none; border:0; padding:9px 8px; border-radius:8px; color:var(--muted); font-family:var(--grotesk);
  font-size:12.5px; letter-spacing:.02em; transition:background .2s, color .2s;}
.afm-opt:hover{background:rgba(255,255,255,.05); color:var(--ivoire);}
.afm-opt.on{color:#fff;}
.afm-opt.off{opacity:.34; cursor:default;}
.afm-check{position:relative; flex:none; width:17px; height:17px; border-radius:5px;
  border:1.5px solid rgba(255,255,255,.28); background:rgba(255,255,255,.04); transition:border-color .2s, background .2s;}
.afm-opt .afm-check{--c:var(--framboise);}
.afm-opt.on .afm-check{background:var(--c,var(--framboise)); border-color:var(--c,var(--framboise));}
.afm-opt.on .afm-check::after{content:""; position:absolute; left:5px; top:1.5px; width:4px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(43deg);}
.afm-opt.fmt.on .afm-check{background:var(--framboise); border-color:var(--framboise);}
.afm-lab{flex:1;}
.afm-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px;}
.afm-reset{background:none; border:0; cursor:pointer; font-family:var(--grotesk); color:var(--muted);
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; padding:6px 2px; transition:color .25s;}
.afm-reset:hover:not(:disabled){color:var(--ivoire);}
.afm-reset:disabled{opacity:.32; cursor:default;}
.afm-apply{background:rgba(225,29,110,.16); border:1px solid rgba(225,29,110,.5); cursor:pointer;
  font-family:var(--grotesk); color:#fff; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  padding:10px 16px; border-radius:999px; transition:background .25s, border-color .25s;}
.afm-apply:hover{background:rgba(225,29,110,.28); border-color:var(--framboise);}

.arch2-map{position:absolute; inset:0; z-index:5;}
.arch2-ile{position:absolute; transform:translate(-50%,-50%);
  width:clamp(124px, calc(12.4vw * var(--s,1)), 212px); height:auto; aspect-ratio:787/368;
  background:none; border:0; padding:0; cursor:pointer; pointer-events:auto; transition:opacity .4s ease;}
.arch2-ile.dim{opacity:.22; pointer-events:none;}
.ile-img{position:absolute; left:0; top:0; width:100%; height:100%; object-fit:contain; object-position:center bottom;
  pointer-events:none; user-select:none; transition:transform .45s cubic-bezier(.16,1,.3,1), filter .45s ease;}
.arch2-ile.on .ile-img{transform:translateY(-6px) scale(1.05); filter:brightness(1.1);}
.arch2-ile.dim .ile-img{filter:saturate(.5) brightness(.66);}
.ile-label{position:absolute; left:50%; bottom:90%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:4px; width:max-content; max-width:210px; text-align:center;
  opacity:0; transition:opacity .35s ease; pointer-events:none;}
.il-name{font-size:13px; letter-spacing:.1em; font-weight:600; color:#fff; text-shadow:0 1px 8px rgba(4,7,18,.98), 0 0 20px rgba(4,7,18,.85);}
.il-desc{font-size:11.5px; line-height:1.34; color:#d7dcec; text-shadow:0 1px 8px rgba(4,7,18,.98), 0 0 16px rgba(4,7,18,.8);}
.arch2-ile.on{z-index:9;}
.arch2-ile.on .ile-label{opacity:1;}

.arch2-son{position:absolute!important; left:30px; bottom:130px; top:auto; right:auto; z-index:7;}

.arch2-panels{position:absolute; left:0; right:0; bottom:62px; z-index:6; display:grid; grid-template-columns:repeat(3,1fr);
  padding:20px 48px 0; border-top:1px solid rgba(255,255,255,.08); pointer-events:none;}
.arch2-panel{padding:4px 34px 0; border-left:1px solid rgba(255,255,255,.07);}
.arch2-panel:first-child{border-left:0; padding-left:0;}
.arch2-panel h4{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ivoire); margin:0 0 9px; font-weight:600;}
.arch2-panel h4 .pk{color:var(--framboise);}
.arch2-panel p{font-size:12px; line-height:1.5; color:var(--muted); max-width:320px; margin:0;}

.arch2-list{position:absolute; left:50%; top:148px; transform:translateX(-50%); z-index:6; width:min(760px,86vw);
  max-height:64vh; overflow-y:auto; pointer-events:auto; display:flex; flex-direction:column; gap:2px;}
.arch2-list-item{display:grid; grid-template-columns:14px 1fr auto auto; align-items:center; gap:16px;
  background:rgba(12,18,38,.4); border:0; border-bottom:1px solid rgba(255,255,255,.06); cursor:pointer;
  padding:14px 18px; text-align:left; transition:background .3s;}
.arch2-list-item:hover{background:rgba(225,29,110,.10);}
.arch2-list-item .fam-dot{width:9px; height:9px; border-radius:50%;}
.arch2-list-item .ti{color:var(--ivoire); font-size:14px;}
.arch2-list-item .me{color:var(--muted); font-size:11px; letter-spacing:.04em;}
.arch2-list-item .yr{color:var(--faint); font-size:10px; letter-spacing:.14em; text-transform:uppercase;}

@media (max-width:980px){
  .arch2-head{max-width:220px; top:70px; left:24px;}
  .arch2-panels{display:none;}
  .arch2-son{left:18px; bottom:96px;}
}

/* ============================================================= */
/* ============  REMISE À PLAT MOBILE (téléphone)  ============= */
/* ============================================================= */

/* ---- indication tactile (mobile uniquement) ---- */
.touch-hint{position:absolute; left:50%; bottom:118px; transform:translateX(-50%) translateY(10px);
  z-index:11; display:flex; align-items:center; gap:12px; padding:11px 17px 11px 13px; max-width:88vw;
  background:rgba(8,11,22,.74); backdrop-filter:blur(12px); border:1px solid rgba(225,29,110,.42);
  border-radius:999px; color:var(--ivoire); font-family:var(--grotesk); font-size:12.5px; line-height:1.3;
  box-shadow:0 18px 44px -20px rgba(0,0,0,.8); opacity:0; pointer-events:none;
  transition:opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1);}
.touch-hint.show{opacity:1; transform:translateX(-50%) translateY(0);}
.th-text{text-wrap:balance;}
.th-ripple{position:relative; width:18px; height:18px; flex:0 0 18px;}
.th-ripple i{position:absolute; inset:0; margin:auto; width:6px; height:6px; border-radius:50%; background:var(--framboise);}
.th-ripple i:nth-child(2){width:18px; height:18px; background:none; border:1px solid var(--framboise);
  animation:thpulse 1.7s ease-out infinite;}
@keyframes thpulse{0%{transform:scale(.35); opacity:.85;} 100%{transform:scale(1.1); opacity:0;}}

@media (max-width:600px){
  /* ---------- barre haute commune des espaces ---------- */
  .sp-top{top:12px; left:12px; gap:9px;}
  .sp-mark img{height:24px;}
  .sp-crumb{display:none;}
  .sp-close{top:11px; right:11px; padding:10px 12px;}
  .sp-close span{display:none;}
  .sp-close i{font-size:15px;}

  /* bouton son → remonté dans la barre haute (icône seule) */
  .foret-sound{top:11px; right:52px; left:auto; bottom:auto; padding:10px 11px; gap:0;}
  .foret-sound > span:last-child{display:none;}

  /* ---------- hero (haut) ---------- */
  .foret-hero{top:60px; left:14px; right:14px; width:auto; transform:none;}
  .foret-hero .roman{font-size:30px;}
  .foret-lede{font-size:14px; line-height:1.46; margin-top:14px;}
  .mont-hero{top:58px; left:14px; right:14px; width:auto;}
  .mont-hero::before{inset:-24px -20px;}
  .fleuve-hero{top:58px; left:14px; right:14px; width:auto;}
  .fleuve-hero::before{inset:-30px -20px;}

  /* ---------- pied : sélecteur de territoires en barre pleine défilante ---------- */
  .sp-switch{left:0; right:0; bottom:0; transform:none; width:100%; max-width:none; gap:0;
    justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    padding:5px 8px; border-left:0; border-right:0; border-bottom:0;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;}
  .sp-switch::-webkit-scrollbar{display:none;}
  .sp-switch button{flex:0 0 auto; padding:9px 13px; white-space:nowrap;}

  /* ---------- pied : rangée méta au-dessus de la barre ---------- */
  .foret-status{left:14px; right:auto; bottom:54px; gap:8px;}
  .foret-count .cn{font-size:24px;}
  .foret-count .cl{display:none;}
  .foret-methode{max-width:52vw; gap:9px;}
  .foret-next, .fleuve-transition{right:14px; left:auto; bottom:54px; text-align:right;
    align-items:flex-end; max-width:44vw;}
  .foret-next .ti{font-size:14px;}

  /* Vallées : la fiche-ancre devient une feuille basse, dégagée des barres */
  .vallees-anchor{left:12px; right:12px; bottom:110px; top:auto; width:auto; padding:16px 16px;}

  /* Fleuve : la fenêtre d'info devient une feuille basse (quel que soit le mode) */
  .fleuve-card{left:12px !important; right:12px !important; top:auto !important; bottom:110px !important;
    width:auto !important; transform:none !important; max-height:52vh; overflow-y:auto;
    align-items:flex-start !important; text-align:left !important; padding:26px 22px !important;}
  .fleuve-card.mode-centre .fc-projet{align-items:flex-start; text-align:left;}

  /* indice de la Forêt : garder lisible, jamais collé au bord */
  .foret-indice{max-width:78vw; white-space:normal; text-align:center;}

  /* place le hint tactile au-dessus de la rangée méta */
  .touch-hint{bottom:112px;}
}

/* ---------- ARCHIPEL en portrait : mer immersive + liste tactile ---------- */
@media (max-width:600px){
  .arch2-head{display:none;}
  .arch2-filters{top:12px; left:8px; right:8px; transform:none; width:auto; max-width:none; gap:10px; align-items:center;}
  .arch2-barrow{gap:10px; flex-wrap:nowrap;}
  .arch2-count{min-width:auto;}
  .arch2-menu{width:min(360px,94vw);}

  .arch2-list{left:10px; right:10px; top:132px; bottom:108px; transform:none; width:auto; max-height:none;}
  .arch2-list-item{grid-template-columns:12px 1fr auto; gap:12px; padding:15px 14px;}
  .arch2-list-item .me{display:none;}

  .arch2-son{left:12px; right:auto; top:auto; bottom:58px; padding:10px 12px; gap:10px;}
  .arch2-ile{width:clamp(96px, 30vw, 150px);}
  .ile-label{max-width:60vw;}

  .touch-hint{bottom:auto; top:50%; transform:translate(-50%,-50%) translateY(10px);}
  .touch-hint.show{transform:translate(-50%,-50%);}
}

/* Chambre-projet & espace-territoire scrollables : marges plus douces en portrait */
@media (max-width:600px){
  .sp-depth{padding:96px 18px 92px;}
  .sp-terr-depth{padding:96px 18px 92px;}
  .sp-hero h2{font-size:clamp(30px,9vw,44px);}
  .sp-facts{grid-template-columns:1fr 1fr; gap:20px;}
  .sp-prevnext{grid-template-columns:1fr; gap:14px;}
  .mont-panel{padding:40px 22px 32px;}
  /* Montagnes portrait : points plus compacts, libellé (au tap) borné à l'écran */
  .mont-star{width:104px; height:104px;}
  .mont-star .mont-label{max-width:72vw;}
  .mont-star .ml-q{font-size:15px;}

  /* La section méthode+contact+clôture déborde en portrait : ne pas centrer (sinon haut ET bas
     rognés → « on ne voit pas le bas de page »). On aligne en haut et on laisse défiler. */
  .method{justify-content:flex-start; min-height:auto; padding-top:14vh; padding-bottom:18vh;}
  .method .lead{margin-bottom:5vh;}
  .steps{grid-template-columns:1fr 1fr;}
  .contact{margin-top:9vh;}
  .outro{margin-top:9vh;}
  .outro .cta{margin-top:5vh;}
}