/* ============================================================
   Able : carte interactive de la plateforme (page d'accueil)
   Toutes les règles sont préfixées par .able-map.
   Les couleurs reprennent les variables du site (style.css).
   ============================================================ */
.am-sec{background:var(--bg); position:relative; padding:12px 0 40px; overflow-x:clip;}

.able-map{
  --am-ink:var(--ink,#0B0B0B); --am-900:var(--ink,#0B0B0B); --am-800:var(--ink-2,#1E1B17);
  --am-600:var(--ink-soft,#5B5548); --am-500:var(--ink-faint,#8C8672); --am-400:#B4AA94;
  --am-300:var(--line-strong,#CFC3A7); --am-200:var(--line,#DFD6C2); --am-white:#FFF; --am-bg:var(--bg,#FBF9F6);
  --am-serif:var(--serif,'Lora',Georgia,serif); --am-sans:var(--sans,'Inter',system-ui,sans-serif); --am-mono:var(--mono,'IBM Plex Mono',monospace);
  --am-ease:cubic-bezier(.65,0,.35,1); --am-out:cubic-bezier(.22,1,.36,1);
  --am-cam:1000ms; --am-draw:700ms; --am-fade:300ms;
  --am-h:clamp(680px,100vh,880px); --am-map-max:720px; --am-map:min(var(--am-map-max),calc(var(--am-h) - 80px));
  container:am/inline-size; width:100%; color:var(--am-900); font-family:var(--am-sans);
}
.able-map *{box-sizing:border-box}
.able-map [hidden]{display:none!important}
.able-map :focus-visible{outline:2px solid var(--am-ink); outline-offset:3px}
.able-map .am-inner{max-width:1328px; margin:0 auto; padding:40px 44px; min-height:var(--am-h); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:48px; align-items:center}
.able-map .am-panel{min-height:var(--am-map); display:flex; flex-direction:column; justify-content:center; gap:34px; min-width:0}
.able-map .am-copy{display:flex; flex-direction:column; justify-content:flex-end; gap:18px; min-height:360px; transition:opacity .16s linear}
.able-map .am-copy.is-out{opacity:0}

/* ---------- texte de gauche (repris des styles du site) ---------- */
.able-map .am-eyebrow{display:flex; align-items:center; gap:12px; font-family:var(--am-mono); font-size:10.5px; line-height:1.3; letter-spacing:.16em; text-transform:uppercase; color:var(--am-500)}
.able-map .am-mark{flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--am-300); display:grid; place-items:center; color:var(--am-ink)}
.able-map .am-mark svg{width:15px; height:15px}
.able-map .am-mark-dot,.able-map .am-mark-disc{border:0}
.able-map .am-mark-dot::before,.able-map .am-mark-disc::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--am-ink)}
.able-map .am-mark-disc::before{width:16px; height:16px}
.able-map .am-title{margin:0; font-family:var(--am-serif); font-weight:600; font-size:clamp(26px,2.5vw,36px); line-height:1.15; letter-spacing:-.015em; color:var(--am-ink); text-wrap:pretty}
.able-map .am-title:focus{outline:none}
.able-map .am-lead{margin:0; font-size:17px; line-height:1.6; color:var(--am-600)}
.able-map .am-list{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.able-map .am-list li{position:relative; padding-left:24px; font-size:16px; line-height:1.55; color:var(--am-600); text-wrap:pretty}
.able-map .am-list li::before{content:""; position:absolute; left:0; top:.78em; width:12px; height:1px; background:var(--am-ink)}
.able-map .am-links{margin:0; display:flex; flex-wrap:wrap; gap:6px 22px}
.able-map .am-link{display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:500; color:var(--am-ink); text-decoration:none; border-bottom:1px solid var(--am-300); padding-bottom:3px; transition:border-color var(--am-fade)}
.able-map .am-link:hover{border-color:var(--am-ink)}
.able-map .am-invite{margin:0; font-size:14px; color:var(--am-500)}
.able-map .am-rise{animation:am-rise .55s var(--am-out) both; animation-delay:calc(var(--i)*60ms)}
.able-map .am-fadein{animation:am-fade .2s linear both}
@keyframes am-rise{from{opacity:0; transform:translateY(12px)}}
@keyframes am-fade{from{opacity:0}}
@keyframes am-spin{to{transform:rotate(360deg)}}
@keyframes am-breathe{50%{opacity:.82}}
@keyframes am-halo{0%{transform:scale(1); opacity:.5} 100%{transform:scale(1.9); opacity:0}}
@keyframes am-nudge{0%,62%,100%{transform:none} 74%{transform:translateX(6px)} 86%{transform:none}}
@keyframes am-bob{0%,100%{transform:none} 50%{transform:translateY(4px)}}

/* ---------- navigation (boutons identiques à ceux du site) ---------- */
.able-map .am-nav{display:flex; flex-direction:column; align-items:flex-start; gap:20px}
.able-map .am-actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px}
.able-map .am-btn{display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:12px 22px; border-radius:999px; border:1px solid var(--am-ink); background:var(--am-ink); color:var(--am-bg); font:500 14px/1.2 var(--am-sans); white-space:nowrap; text-decoration:none; cursor:pointer; transition:transform .18s cubic-bezier(.2,.7,.3,1), opacity .18s, background .18s, border-color .18s}
.able-map .am-btn:hover{transform:translateY(-1px); opacity:.9}
.able-map .am-btn-line{background:transparent; color:var(--am-ink); border-color:var(--am-300)}
.able-map .am-btn-line:hover{border-color:var(--am-ink); opacity:1}
.able-map .am-arr{display:inline-block; transition:transform .18s cubic-bezier(.2,.7,.3,1)}
.able-map .am-btn:hover .am-arr,.able-map .am-link:hover .am-arr{transform:translateX(4px)}
.able-map .am-back{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0; border:0; background:none; font:400 14px/1.2 var(--am-sans); color:var(--am-600); cursor:pointer}
.able-map .am-back:hover{color:var(--am-ink)}
.able-map .am-back:hover .am-arr{transform:translateX(-4px)}
.able-map .am-breathe{animation:am-breathe 2.4s ease-in-out infinite}
.able-map .am-next{min-height:52px; padding:15px 30px; font-size:15px; gap:12px}
.able-map .am-next .am-arr{animation:am-nudge 3.2s var(--am-out) infinite}
.able-map .am-next:hover .am-arr{animation:none; transform:translateX(5px)}
.able-map .am-scrollhint{display:none}
.able-map .am-prog{list-style:none; margin:0; padding:0; display:flex; gap:10px}
.able-map .am-pg{position:relative; width:34px; height:34px; padding:0; border-radius:50%; border:1px solid var(--am-200); background:none; color:var(--am-300); display:grid; place-items:center; cursor:pointer; transition:background .25s, color .25s, border-color .25s}
.able-map .am-pg:disabled{cursor:default}
.able-map .am-pg svg{width:16px; height:16px}
.able-map .am-pg[data-s=seen]{border-color:var(--am-300); color:var(--am-500)}
.able-map .am-pg[data-s=seen]:hover{border-color:var(--am-ink); color:var(--am-ink)}
.able-map .am-pg[data-s=cur]{background:var(--am-ink); border-color:var(--am-ink); color:var(--am-bg)}
.able-map .am-g-dot{width:8px; height:8px; border-radius:50%; background:currentColor}
.able-map .am-g-ring{width:12px; height:12px; border-radius:50%; border:1.5px solid currentColor}
.able-map .am-tip{position:absolute; bottom:calc(100% + 8px); left:50%; transform:translate(-50%,4px); padding:5px 10px; border-radius:6px; background:var(--am-ink); color:var(--am-bg); font-size:12px; line-height:1.3; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s}
.able-map .am-pg:hover .am-tip,.able-map .am-pg:focus-visible .am-tip{opacity:1; transform:translate(-50%,0)}
.able-map .am-skip{padding:0; border:0; background:none; white-space:nowrap; text-align:left; font:400 13.5px/1.4 var(--am-sans); color:var(--am-500); text-decoration:underline; text-decoration-color:var(--am-300); text-underline-offset:4px; cursor:pointer}
.able-map .am-skip:hover{color:var(--am-ink)}

/* ---------- la carte ---------- */
.able-map .am-mapcol{display:flex; flex-direction:column; align-items:center; gap:20px; min-width:0}
.able-map .am-stage{--am-disc:calc(var(--am-size,720px)*.1444); position:relative; width:min(100%,var(--am-map)); aspect-ratio:1/1; touch-action:pan-y; user-select:none}
.able-map .am-cam{position:absolute; inset:0; transition:transform var(--am-cam) var(--am-ease)}
.able-map .am-svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.able-map .am-cd{fill:var(--am-300); transition:fill .25s linear, opacity .3s linear}
.able-map .am-cd.is-dark{fill:var(--am-ink)}
.able-map .am-cd.is-gap{opacity:0}
.able-map .is-loose .am-cd{fill:var(--am-400)}
.able-map .am-crown{transform-origin:360px 360px; transition:transform .55s var(--am-ease)}
.able-map .am-crown.is-tight{transform:scale(.955)}
.able-map .am-ln{fill:none; stroke:var(--am-ink); stroke-width:calc(1.5px*var(--am-k,1)); stroke-dasharray:1 1; stroke-dashoffset:1; opacity:0; transition:stroke-dashoffset var(--am-draw) var(--am-ease), opacity .3s linear, stroke .6s linear, stroke-width .6s linear}
.able-map .am-ln.am-thin,.able-map .am-ln.is-trace{stroke-width:calc(1px*var(--am-k,1))}
.able-map .am-ln.is-trace{stroke:var(--am-300)}
.able-map .am-fx{fill:var(--am-ink)}
.able-map .am-rip{fill:none; stroke:var(--am-ink)}

/* bulles de chaque espace */
.able-map .am-x{position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px; opacity:0; transform:scale(.5); transition:opacity .4s var(--am-out), transform .6s var(--am-out); pointer-events:none}
.able-map .am-x.is-on{opacity:1; transform:none}
.able-map .am-x.is-on.is-dim{opacity:.3}
.able-map .am-xc{display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--am-white); border:1px solid var(--am-300); color:var(--am-ink); transition:border-color .3s, background .3s, color .3s, transform .3s var(--am-out)}
.able-map .am-xc svg{width:18px; height:18px}
.able-map .am-x.is-ping .am-xc{border-color:var(--am-ink); background:var(--am-ink); color:var(--am-bg); transform:scale(1.12)}
.able-map .am-xl{position:absolute; white-space:nowrap; font-size:12.5px; font-weight:500; line-height:1.2; color:var(--am-600); background:var(--am-bg); padding:1px 4px; border-radius:4px}

/* nœuds : centre, espaces, places */
.able-map .am-nodes{position:absolute; inset:0}
.able-map .am-node{position:absolute; width:44px; height:44px; margin:-22px 0 0 -22px; padding:0; border:0; background:none; color:inherit; font:inherit; display:grid; place-items:center; cursor:default; transition:opacity .5s var(--am-out), transform .5s var(--am-out), visibility 0s}
.able-map .am-node[tabindex="0"]{cursor:pointer}
.able-map .am-node[data-s=off]{opacity:0; transform:scale(.8); visibility:hidden; pointer-events:none; transition:opacity .3s, transform .3s, visibility 0s .3s}
.able-map .am-m .am-c{width:46px; height:46px; border-radius:50%; background:var(--am-white); border:1px solid var(--am-300); display:grid; place-items:center; color:var(--am-ink); transition:background .25s, color .25s, border-color .25s, transform .3s var(--am-out)}
.able-map .am-m .am-c svg{width:21px; height:21px}
.able-map .am-m[data-s=disc] .am-c{color:var(--am-500)}
.able-map .am-m[data-s=act] .am-c{background:var(--am-ink); border-color:var(--am-ink); color:var(--am-bg)}
.able-map .am-m.is-ping .am-c{border-color:var(--am-ink); transform:scale(1.14)}
.able-map .am-p .am-c{position:relative; width:14px; height:14px; border-radius:50%; background:var(--am-ink); transition:background .25s, transform .3s var(--am-out)}
.able-map .am-p .am-c::after{content:""; position:absolute; inset:-1px; border-radius:50%; border:1px solid var(--am-ink); opacity:0}
.able-map .am-p[data-s=act] .am-c::after,.able-map .am-p[data-s=full] .am-c::after{animation:am-halo 7.8s var(--am-out) infinite}
.able-map .am-hon .am-c{width:20px; height:20px}
.able-map .am-p[data-s=disc] .am-c{background:var(--am-400)}
.able-map .am-p[data-s=disc] .am-c::after{animation:none}
.able-map .am-p[data-s=act] .am-c{transform:scale(1.3)}
.able-map .am-hon[data-s=act] .am-c{transform:scale(1.2)}
.able-map .am-p.is-ping .am-c{transform:scale(1.3)}

/* libellés */
.able-map .am-lbl{position:absolute; white-space:nowrap; font-size:15px; font-weight:500; line-height:1.2; color:var(--am-800); transition:color .3s, opacity .3s}
.able-map .am-lbl-t{bottom:calc(50% + 18px); left:50%; transform:translateX(-50%)}
.able-map .am-lbl-b{top:calc(50% + 18px); left:50%; transform:translateX(-50%)}
.able-map .am-hon .am-lbl-t{bottom:calc(50% + 20px)}
.able-map .am-m .am-lbl{font-size:12.5px; letter-spacing:.01em; color:var(--am-800); background:var(--am-bg); padding:1px 5px; border-radius:4px; left:50%; transform:translateX(-50%)}
.able-map .am-lbl-mb{top:calc(50% + 28px)}
.able-map .am-lbl-mt{bottom:calc(50% + 28px)}
.able-map .am-hon .am-lbl{font-family:var(--am-serif); font-weight:600; font-size:20px; letter-spacing:-.01em; color:var(--am-ink)}
.able-map .am-node[data-s=disc] .am-lbl{color:var(--am-500)}
.able-map .am-node[data-s=act] .am-lbl{color:var(--am-ink)}

/* centre */
.able-map .am-center{width:var(--am-disc); height:var(--am-disc); margin:calc(var(--am-disc)/-2) 0 0 calc(var(--am-disc)/-2); border-radius:50%; background:var(--am-ink); transition:opacity .6s var(--am-out), transform .6s var(--am-out), visibility 0s}
.able-map .am-center[data-s=off]{transform:scale(.2)}
.able-map .am-logo{width:56%; height:auto; opacity:0; transition:opacity .4s linear; pointer-events:none}
.able-map .am-center.is-logo .am-logo{opacity:1}
.able-map .am-center::after{content:""; position:absolute; inset:-9px; border-radius:50%; border:1.5px solid var(--am-ink); opacity:0; transition:opacity var(--am-fade)}
.able-map .am-center.is-ring::after{opacity:1}

/* cercle en pointillés qui annonce l'élément suivant */
.able-map .am-hint{--h:44px; position:absolute; width:var(--h); height:var(--h); margin:calc(var(--h)/-2) 0 0 calc(var(--h)/-2); padding:0; border:0; border-radius:50%; background:none; cursor:pointer; opacity:0; visibility:hidden; transition:opacity .4s, visibility 0s .4s}
.able-map .am-hint.is-on{opacity:1; visibility:visible; transition:opacity .6s}
.able-map .am-hint[data-k=m]{--h:68px}
.able-map .am-hint[data-k=c]{--h:calc(var(--am-disc) + 26px)}
.able-map .am-hint::before{content:""; position:absolute; inset:0; border-radius:50%; border:1.5px dashed var(--am-600); animation:am-spin 12s linear infinite}
.able-map .am-hint:hover::before{border-style:solid; border-color:var(--am-ink)}
.able-map.is-still .am-hint{display:none}

/* pastilles des acteurs (mobile) */
.able-map .am-pills{display:none}
.able-map .am-pill{white-space:nowrap; min-height:44px; padding:0 16px; border-radius:999px; border:1px solid var(--am-300); background:transparent; font:500 14px/1.2 var(--am-sans); color:var(--am-800); cursor:pointer; transition:background .25s, color .25s, border-color .25s}
.able-map .am-pill[data-s=act]{background:var(--am-ink); border-color:var(--am-ink); color:var(--am-bg)}
.able-map .am-pill[data-s=disc]{color:var(--am-500)}

@container am (max-width:1180px){
  .able-map .am-list li{font-size:15px}
  .able-map .am-copy{gap:14px}
}
@container am (max-width:819px){
  .able-map .am-inner{grid-template-columns:minmax(0,1fr); min-height:0; padding:32px 26px; gap:28px}
  .able-map .am-mapcol{order:-1}
  .able-map .am-panel{min-height:0; grid-template-rows:auto auto; gap:28px}
  .able-map .am-stage{--am-disc:calc(var(--am-size,320px)*.19); width:min(100%,420px)}
  .able-map .am-tip,.able-map .am-xl{display:none}
  /* noms des acteurs et des piliers, en petit ; les bulles restent sans libellé */
  .able-map .am-lbl{font-size:11px}
  .able-map .am-hon .am-lbl{font-size:13px}
  .able-map .am-lbl-t,.able-map .am-hon .am-lbl-t{bottom:calc(50% + 11px)}
  .able-map .am-lbl-b{top:calc(50% + 11px)}
  .able-map .am-m .am-lbl{width:80px; white-space:normal; text-align:center; font-size:10px; line-height:1.15; letter-spacing:0; padding:1px 3px}
  .able-map .am-lbl-mb{top:auto; bottom:calc(50% + 19px)}
  .able-map .am-lbl-mt{bottom:auto; top:calc(50% + 19px)}
  .able-map .am-m.is-ext .am-lbl{opacity:0}
  .able-map .am-m .am-c{width:34px; height:34px}
  .able-map .am-m .am-c svg{width:16px; height:16px}
  .able-map .am-x{width:24px; height:24px; margin:-12px 0 0 -12px}
  .able-map .am-xc{width:24px; height:24px}
  .able-map .am-xc svg{width:13px; height:13px}
  .able-map .am-p .am-c{width:11px; height:11px}
  .able-map .am-hon .am-c{width:15px; height:15px}
  .able-map .am-hint[data-k=m]{--h:50px}
  .able-map .am-pills{display:flex; flex-wrap:wrap; gap:8px; width:100%; max-width:420px}
  .able-map .am-eyebrow{font-size:11px; letter-spacing:.12em}
  .able-map .am-title{font-size:25px}
  .able-map .am-list li{font-size:15px}
  .able-map .am-prog{gap:8px}
  .able-map .am-pg{width:44px; height:44px}
  .able-map .am-skip{min-height:44px}
}
/* ---------- mobile : la carte reste à l'écran et avance au défilement ---------- */
.able-map.is-scrolly{--am-top:76px; height:calc(100vh + 7 * 70vh); height:calc(100svh + 7 * 70svh)}
.able-map.is-scrolly .am-inner{position:sticky; top:var(--am-top); height:calc(100vh - var(--am-top)); height:calc(100svh - var(--am-top)); overflow:hidden; align-content:start; grid-template-rows:auto 1fr; padding:14px 22px 18px; gap:14px}
.able-map.is-scrolly .am-stage{width:min(100%,38vh); width:min(100%,38svh)}
.able-map.is-scrolly .am-mapcol{gap:12px}
.able-map.is-scrolly .am-pills{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; max-width:100%; padding-bottom:2px}
.able-map.is-scrolly .am-pills::-webkit-scrollbar{display:none}
.able-map.is-scrolly .am-pill{flex:none; min-height:38px; padding:0 14px; font-size:13px}
.able-map.is-scrolly .am-panel{justify-content:space-between; gap:14px; min-height:0}
.able-map.is-scrolly .am-copy{min-height:0; justify-content:flex-start; gap:10px}
.able-map.is-scrolly .am-title{font-size:21px; line-height:1.2}
.able-map.is-scrolly .am-lead{font-size:15px}
.able-map.is-scrolly .am-list{gap:6px}
.able-map.is-scrolly .am-list li{font-size:14px; line-height:1.45}
.able-map.is-scrolly .am-nav{gap:10px}
.able-map.is-scrolly .am-next,.able-map.is-scrolly .am-back{display:none}
.able-map.is-scrolly .am-actions:empty{display:none}
.able-map.is-scrolly .am-actions{flex-wrap:nowrap; gap:8px}
.able-map.is-scrolly .am-btn{min-height:40px; padding:10px 14px; font-size:13px; gap:6px}
.able-map.is-scrolly[data-step="7"] .am-prog{display:none}
.able-map.is-scrolly .am-prog{gap:6px}
.able-map.is-scrolly .am-pg{width:30px; height:30px}
.able-map.is-scrolly .am-pg svg{width:14px; height:14px}
.able-map.is-scrolly .am-scrollhint{display:flex; align-items:center; gap:8px; margin:0; font-size:13.5px; font-weight:500; color:var(--am-ink)}
.able-map.is-scrolly .am-scrollhint[hidden]{display:none}
.able-map.is-scrolly .am-down{display:inline-block; animation:am-bob 1.6s ease-in-out infinite}
.able-map.is-scrolly .am-skip{min-height:0; font-size:13px}

@media (prefers-reduced-motion:reduce){
  .able-map .am-cam{transition:none}
  .able-map .am-hint::before,.able-map .am-breathe,.able-map .am-p .am-c::after,.able-map .am-next .am-arr,.able-map .am-down{animation:none}
  .able-map .am-ln{transition:opacity .3s linear, stroke .3s linear}
}