/* Accueil · « L'écosystème qui s'éclate » : section épinglée, le schéma se déploie au défilement (assets/eco-burst.js). */
.eb{position:relative;height:460vh;height:460svh}
.eb .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eb-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center}
.eb-grid{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px);align-items:center;padding-top:84px}

/* textes : un seul visible à la fois */
.eb-copy{position:relative;min-height:340px}
.eb-cap{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(26px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.eb-cap.on{opacity:1;transform:none;pointer-events:auto}
.eb-cap .kicker{margin-bottom:18px}
.eb-t{font-family:var(--display);font-weight:500;font-size:clamp(34px,4vw,60px);line-height:1.02;letter-spacing:-.01em;margin:0 0 16px;color:#fff;max-width:19ch}
.eb-p{font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--text-2);max-width:40ch}
.eb-ben{display:grid;gap:10px;margin:4px 0 22px}
.eb-ben li{position:relative;padding-left:26px;color:var(--text-2);font-size:clamp(15px,1.15vw,17px);line-height:1.45}
.eb-ben li::before{content:"";position:absolute;left:0;top:.42em;width:12px;height:12px;border-radius:3px;background:#7fd6a3}
.eb-ben b{color:#fff;font-weight:600}
.eb-cta{display:flex;flex-wrap:wrap;gap:10px}
.eb-dots{position:absolute;left:0;top:-40px;display:flex;gap:8px}
.eb-dots i{width:22px;height:3px;border-radius:3px;background:rgba(255,255,255,.18);transition:background .3s,width .3s}
.eb-dots i.on{background:#7fd6a3;width:38px}

/* le schéma */
.eb-stage{position:relative;width:min(100%,600px,calc(100svh - 150px));aspect-ratio:1;justify-self:center;--z:1}
.eb-glow{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,rgba(127,214,163,.22),transparent 70%);filter:blur(10px);transform:scale(var(--glow,.6))}
.eb-ring,.eb-ring2{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(255,255,255,.14);transform:translate(-50%,-50%);width:calc(var(--r,0) * 2%);height:calc(var(--r,0) * 2%);opacity:var(--o,0)}
.eb-ring2{border-style:dashed;border-color:rgba(127,214,163,.35)}
.eb-wave{position:absolute;left:50%;top:50%;width:20%;height:20%;border-radius:50%;border:2px solid #7fd6a3;transform:translate(-50%,-50%) scale(var(--w,0));opacity:var(--wo,0)}
.eb-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.eb-l,.eb-dl{stroke-width:.28;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.eb-l{stroke:rgba(127,214,163,.7);stroke-width:1.4}
.eb-dl{stroke:rgba(255,255,255,.3);stroke-width:1.2;stroke-dasharray:.03 .02}
.eb-debris i{position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);border-radius:2px;background:#7fd6a3;opacity:0;will-change:transform,opacity}

.eb-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--cs,1));width:26%;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:radial-gradient(circle at 50% 40%,#22304f,#151e33 70%);border:1px solid rgba(127,214,163,.35);box-shadow:0 0 0 10px rgba(127,214,163,.05),0 20px 60px rgba(0,0,0,.35);z-index:3}
.eb-core img{width:34%;height:auto}
.eb-core b{font-family:var(--display);font-weight:500;letter-spacing:.32em;font-size:clamp(14px,1.5vw,20px);color:#fff;margin-right:-.32em}
.eb-sub{font-size:clamp(9px,.8vw,11px);letter-spacing:.14em;text-transform:uppercase;color:#7fd6a3;text-align:center;line-height:1.2;max-width:90%}

.eb-orb{position:absolute;transform:translate(-50%,-50%) scale(var(--os,1)) rotate(var(--or,0deg));display:flex;flex-direction:column;align-items:center;gap:6px;z-index:2;opacity:var(--oo,1);will-change:left,top,transform}
.eb-logo{width:clamp(40px,5vw,58px);aspect-ratio:1;border-radius:14px;display:grid;place-items:center;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.eb-logo svg{width:58%;height:58%}
.eb-lab{font-size:clamp(10px,.85vw,12px);font-weight:600;color:#dfe5ef;white-space:nowrap;opacity:var(--lo,1);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.eb-orb.ping .eb-logo{animation:eb-ping .9s ease}
@keyframes eb-ping{40%{box-shadow:0 0 0 8px rgba(127,214,163,.35),0 10px 30px rgba(0,0,0,.35)}}

.eb-doc{position:absolute;transform:translate(-50%,-50%) scale(var(--ds,1));opacity:var(--do,1);display:flex;flex-direction:column;align-items:center;justify-content:center;width:clamp(50px,6.2vw,74px);aspect-ratio:1;border-radius:50%;background:#1b2640;border:1px solid rgba(255,255,255,.22);z-index:2;text-align:center}
.eb-doc b{font-family:var(--display);font-weight:500;font-size:clamp(12px,1.15vw,16px);color:#fff;line-height:1}
.eb-doc small{font-size:clamp(8px,.72vw,10px);color:var(--text-2);letter-spacing:.04em;margin-top:3px}
.eb-doc.me{background:#2fa36b;border-color:#7fd6a3;box-shadow:0 0 0 6px rgba(127,214,163,.18)}
.eb-doc.me small{color:#eafff3}

.eb-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2);opacity:var(--ho,1);transition:opacity .3s}
.eb-hint span{width:18px;height:28px;border:1.5px solid rgba(255,255,255,.4);border-radius:10px;position:relative}
.eb-hint span::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:#7fd6a3;animation:eb-hint 1.6s ease-in-out infinite}
@keyframes eb-hint{50%{transform:translateY(7px);opacity:.3}}

/* téléphone : schéma en haut, texte en dessous */
@media (max-width:860px){
  .eb{height:520vh;height:520svh}
  .eb-grid{grid-template-columns:1fr;gap:4px;padding-top:76px;align-content:start;height:100%}
  .eb-stage{order:-1;width:min(84vw,calc(100svh - 390px),420px)}
  .eb-copy{min-height:250px}
  /* animé : grand schéma en haut, textes calés en bas de l'écran ; à la dernière étape le schéma recule pour laisser la place */
  .eb.eb-js .eb-grid{display:flex;flex-direction:column;padding-top:112px;padding-bottom:20px}
  body.eb-in .totop{opacity:0;pointer-events:none}
  .eb.eb-js .eb-stage{width:min(96vw,calc(100svh - 346px),480px);flex:none;transform-origin:50% 0;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
  .eb.eb-js.is-end .eb-stage{transform:scale(.62)}
  .eb.eb-js.is-net .eb-stage{transform:scale(.88)}
  .eb.eb-js .eb-copy{margin-top:auto;min-height:0;height:0;align-self:stretch}
  .eb.eb-js .eb-cap{inset:auto 0 0 0}
  .eb.eb-js .eb-hint{display:none}
  .eb-sub{font-size:7.5px;letter-spacing:.08em;margin-top:1px}
  .eb-core b{font-size:13px}
  .eb-t{font-size:clamp(28px,8vw,38px);margin-bottom:10px;max-width:none}
  .eb-cap .kicker{margin-bottom:12px}
  .eb-p{font-size:15px}
  .eb-ben{gap:6px;margin-bottom:14px}
  .eb-ben li{font-size:14px}
  .eb-cta .btn{padding:11px 16px;font-size:14px}
  .eb-cta .btn.secondary{display:none}
  .eb-gain .eb-t{font-size:clamp(26px,7.4vw,34px)}
  .eb-doc{width:46px}
  .eb-dots{display:none}
  .eb-hint{bottom:12px}
  .eb-lab{font-size:9.5px}
  .eb-logo{border-radius:11px}
}

/* sans JavaScript ou mouvement réduit : tout est posé, textes les uns sous les autres */
.eb:not(.eb-js){height:auto}
.eb:not(.eb-js) .eb-pin{position:relative;height:auto;padding-block:clamp(70px,8vw,120px);flex-direction:column;align-items:stretch}
.eb:not(.eb-js) .eb-argsw{width:100%}
.eb:not(.eb-js) .eb-cap{position:relative;opacity:1;transform:none;margin-bottom:34px}
.eb:not(.eb-js) .eb-cap:first-of-type .eb-p,.eb:not(.eb-js) .eb-hint,.eb:not(.eb-js) .eb-dots{display:none}
.eb:not(.eb-js) .eb-grid{align-items:start}
.eb:not(.eb-js) .eb-stage{position:sticky;top:90px}
@media (max-width:860px){.eb:not(.eb-js) .eb-stage{position:relative;top:0}}
.eb .btn.secondary{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff}
.eb .btn.secondary:hover{border-color:#7fd6a3;color:#7fd6a3}
.eb-sub:empty{display:none}
/* lien « Ma zone est-elle encore libre ? » sous les étapes 1 à 3 */
.eb-zone{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-weight:600;font-size:clamp(15px,1.15vw,17px);color:#7fd6a3;border-bottom:1px solid rgba(127,214,163,.45);padding-bottom:2px;transition:color .2s,border-color .2s,gap .2s}
.eb-zone svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.eb-zone:hover{color:#fff;border-color:#fff;gap:12px}
@media (max-width:860px){.eb-zone{margin-top:10px;font-size:15px}}
/* pas de trait devant les sur-titres (01, 02…) dans cette section */
.eb .kicker i{display:none}
.eb .kicker{gap:0}
/* les trois arguments, visibles en permanence, qui s'allument au fil des étapes */
.eb-argsw{position:absolute;top:100px;left:0;right:0;z-index:4;pointer-events:none}
.eb-args{display:flex;flex-wrap:wrap;gap:8px}
.eb-args li{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 7px;border-radius:99px;border:1px solid rgba(255,255,255,.18);color:var(--text-2);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;transition:background .4s,border-color .4s,color .4s}
.eb-args span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.1);font-size:11px;letter-spacing:0;transition:background .4s,color .4s}
.eb-args li.on,.eb:not(.eb-js) .eb-args li{border-color:#7fd6a3;color:#fff;background:rgba(47,163,107,.22)}
.eb-args li.on span,.eb:not(.eb-js) .eb-args span{background:#7fd6a3;color:#151e33}
.eb:not(.eb-js) .eb-argsw{position:relative;top:0;margin-bottom:28px}
@media (max-width:860px){
  .eb-argsw{top:74px}
  .eb-args{gap:6px;flex-wrap:nowrap}
  .eb-args li{padding:5px 10px 5px 5px;font-size:10.5px;letter-spacing:.03em;gap:6px;white-space:nowrap}
  .eb-args span{width:17px;height:17px;font-size:10px}
}
/* téléphone (finition) : schéma en haut, les 3 arguments juste dessous en boutons égaux, texte en bas */
@media (max-width:860px){
  .eb{--S:min(90vw,calc(100svh - 366px),460px)}
  .eb.eb-js .eb-grid{padding-top:100px}
  .eb.eb-js .eb-stage{width:var(--S)}
  .eb.eb-js .eb-argsw{top:calc(100px + var(--S) + 10px);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
  .eb.eb-js.is-net .eb-argsw{transform:translateY(calc(var(--S) * -.12))}
  .eb.eb-js.is-end .eb-argsw{transform:translateY(calc(var(--S) * -.38))}
  .eb-args{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .eb-args li{justify-content:center;padding:7px 4px;border-radius:12px;font-size:10.5px;letter-spacing:.04em;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
  .eb-args li.on{background:rgba(47,163,107,.28);border-color:rgba(127,214,163,.8);box-shadow:0 6px 18px rgba(47,163,107,.18)}
  .eb-args span{width:16px;height:16px;font-size:9.5px}
  .eb-cap .kicker{margin-bottom:10px;font-size:11px}
  .eb-t{font-size:clamp(26px,7.2vw,31px);line-height:1.04;margin-bottom:10px}
  .eb-p{font-size:14.5px;line-height:1.5;color:#c9cfdb}
  .eb-zone{margin-top:10px;font-size:14px}
}
/* très petits téléphones : on garde les logos, sans leurs noms */
@media (max-width:860px) and (max-height:600px){.eb-lab,.eb-doc small{display:none}}
/* fin : petits cercles lumineux qui tournent autour de HANA pendant qu'il grossit */
.eb-stage{container-type:inline-size}
.eb-halo{position:absolute;left:50%;top:50%;width:0;height:0;z-index:2;pointer-events:none;opacity:var(--hq,0);transform:scale(var(--hs,1))}
.eb-halo .hr{position:absolute;left:0;top:0;animation:eb-spin 16s linear infinite}
.eb-halo .r1{--R:25cqw}
.eb-halo .r2{--R:31cqw;animation-duration:26s;animation-direction:reverse}
.eb-halo b{position:absolute;left:0;top:0;width:var(--z);height:var(--z);margin:calc(var(--z) / -2);border-radius:50%;background:#9fe8bd;box-shadow:0 0 12px 3px rgba(127,214,163,.55);transform:rotate(var(--a)) translateX(var(--R))}
.eb-halo .r2 b{background:#dfffee;opacity:.75}
.eb:not(.is-end) .eb-halo .hr{animation-play-state:paused}
@keyframes eb-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.eb-halo{display:none}}
/* confrères du réseau : un point lumineux et le nom de la ville, sans « Dr A, B… » */
.eb-doc:not(.me){width:16px;background:#1b2640;border:2px solid #7fd6a3;box-shadow:0 0 12px rgba(127,214,163,.55)}
.eb-doc:not(.me) small{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:5px;white-space:nowrap;font-size:11px;font-weight:600;color:#c9cfdb;letter-spacing:.02em}
@media (max-width:860px){.eb-doc:not(.me){width:12px}.eb-doc:not(.me) small{font-size:9.5px;margin-top:3px}}
.eb-doc.me b{font-size:clamp(14px,1.3vw,18px)}
/* confrères : Dr A, Dr B, Dr C dans des ronds discrets ; « Vous » en vert */
.eb-doc:not(.me){width:clamp(40px,4.2vw,52px);background:#1b2640;border:1px solid rgba(255,255,255,.26);box-shadow:none}
.eb-doc:not(.me) b{font-size:clamp(12px,1.05vw,14px);color:#dfe5ef}
.eb-doc.me{width:clamp(52px,5.4vw,68px)}
@media (max-width:860px){.eb-doc:not(.me){width:36px}.eb-doc:not(.me) b{font-size:11px}.eb-doc.me{width:46px}}

/* défilement plus calme : section plus longue + une pause (point d'arrêt) sur chaque argument */
.eb{height:660vh;height:660svh}
@media (max-width:860px){.eb{height:720vh;height:720svh}}
html{scroll-snap-type:y proximity}
.eb-snap{position:absolute;left:0;width:1px;height:1px;top:calc(var(--t) * (100% - 100svh));scroll-snap-align:start;pointer-events:none}
.eb:not(.eb-js) .eb-snap{display:none}
/* étape 03 : chaque source devient lumineuse et pulse doucement */
.eb.is-orbit .eb-logo,.eb.is-end .eb-logo{animation:eb-glow 2.6s ease-in-out infinite;box-shadow:0 0 0 1px rgba(127,214,163,.55),0 0 22px 3px rgba(127,214,163,.4),0 10px 30px rgba(0,0,0,.35)}
@keyframes eb-glow{50%{box-shadow:0 0 0 2px rgba(127,214,163,.85),0 0 34px 8px rgba(127,214,163,.6),0 10px 30px rgba(0,0,0,.35)}}
.eb.is-orbit .eb-doc:not(.me){border-color:rgba(127,214,163,.5)}
@media (prefers-reduced-motion:reduce){.eb .eb-logo{animation:none!important}}