/* =====================================================================
   AMG COMORES — Flagship sections
   1) Hero "La carte se décompose" (scroll-pinned decomposition)
   2) Carte interactive des structures (SVG map + filters)
   3) Simulateur de cotisation (wizard)
   Motion is driven ONLY by the --p custom property / state classes set in JS.
   Content lives in the markup; these rules animate the semantic classes.
   ===================================================================== */

/* ============ 1. HERO DECOMPOSITION ============ */
.hero{position:relative;height:235vh;background:var(--c-navy)}
.hero__stage{position:sticky;top:0;height:100vh;min-height:620px;overflow:hidden;display:block}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 42%;
  transform:scale(calc(1.06 + var(--p,0)*0.12));transition:transform .1s linear;will-change:transform}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,22,45,.94) 0%,rgba(8,27,53,.8) 40%,rgba(8,27,53,.52) 68%,rgba(8,27,53,.42) 100%)}
.hero__scrim::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,22,45,.6),transparent 46%)}
.hero__inner{position:relative;z-index:3;height:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:clamp(16px,4vw,32px);display:flex;align-items:center}

.hero__content{max-width:min(460px,42%);color:#eaf4fb;position:relative;z-index:3;
  transform:translateY(calc(var(--p,0)*-70px));opacity:calc(1 - var(--p,0)*1.15);will-change:transform,opacity}
.hero__eyebrow{color:#9fe3ee}
.hero__eyebrow::before{background:#9fe3ee}
.hero__headline{color:#fff;font-size:clamp(2.1rem,4.6vw,3.7rem);margin:.3em 0 .35em;text-shadow:0 2px 18px rgba(4,16,35,.4)}
.hero__headline .w{display:inline-block}
.hero__sub{color:#d9ebf9;font-size:clamp(1.05rem,1.6vw,1.28rem);max-width:40ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero__trust{display:flex;align-items:center;gap:10px;margin-top:22px;color:#bcd6ec;font-size:.9rem}
.hero__trust svg{width:20px;height:20px;color:#8fe6f2}

/* card wrap */
.hero__cardwrap{position:absolute;left:58%;top:50%;transform:translate(-50%,-50%);
  width:clamp(280px,30vw,420px);z-index:2;pointer-events:none}
.hero__cardwrap[hidden]{display:none}

/* The card — 3D stage */
.amg-card{position:relative;width:100%;aspect-ratio:1.585/1;transform-style:preserve-3d;
  transform:perspective(1300px) rotateX(calc(6deg + var(--p,0)*16deg)) rotateY(calc(-14deg + var(--p,0)*-10deg)) translateY(calc(var(--p,0)*26px));
  transition:transform .12s linear;will-change:transform}
.amg-card__layer{position:absolute;will-change:transform,opacity}
/* base plate = inline SVG (blue field + white curved left panel) */
.amg-card__plate{inset:0;width:100%;height:100%;display:block;filter:drop-shadow(0 26px 52px rgba(8,27,53,.5))}
.amg-card__shine{inset:0;border-radius:22px;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.26) 50%,transparent 62%);
  opacity:calc(.7 - var(--p,0)*.7);mix-blend-mode:screen;transform:translateX(calc(var(--p,0)*38px))}

/* logo badge (left white panel, top) */
.amg-card__logo{left:5%;top:8%;width:34%;height:auto;border-radius:9px;
  transform:translate3d(calc(var(--p,0)*-250px),calc(var(--p,0)*-140px),0) rotate(calc(var(--p,0)*-16deg))}

/* "Assurance Maladie Généralisée" (navy, below badge) */
.amg-card__brand{left:7.5%;top:52%;color:#163a61;font-family:var(--font-head);font-weight:700;line-height:1.02;
  font-size:clamp(.62rem,1.55vw,1.02rem);
  transform:translate3d(calc(var(--p,0)*-205px),calc(var(--p,0)*-8px),0) rotate(calc(var(--p,0)*-6deg))}

/* "Carte d'assuré.e" navy pill (bottom-left) */
.amg-card__ribbon{left:6.5%;bottom:8%;background:#163a61;color:#fff;border-radius:7px;padding:5px 11px;
  font-family:var(--font-head);font-weight:600;font-size:clamp(.5rem,1.15vw,.74rem);
  transform:translate3d(calc(var(--p,0)*-175px),calc(var(--p,0)*95px),0) rotate(calc(var(--p,0)*-9deg))}

/* holder names + numbers (blue field, top) */
.amg-card__holder{left:53%;top:13%;right:5%;color:#fff;
  transform:translate3d(calc(var(--p,0)*185px),calc(var(--p,0)*-85px),0)}
.amg-card__holder .hn{font-family:var(--font-head);font-weight:700;font-size:clamp(.74rem,1.65vw,1.08rem);line-height:1.1}
.amg-card__holder .hid{font-family:var(--font-head);font-weight:600;font-size:clamp(.66rem,1.5vw,.98rem);margin-bottom:11px;letter-spacing:.01em;color:#eef5ff}

/* validity (blue field, bottom) */
.amg-card__validity{left:54%;bottom:9%;right:5%;color:#d7e8fb;font-family:var(--font-head);font-weight:500;line-height:1.26;
  font-size:clamp(.6rem,1.35vw,.9rem);
  transform:translate3d(calc(var(--p,0)*150px),calc(var(--p,0)*98px),0) rotate(calc(var(--p,0)*5deg))}
.amg-card__validity span{display:block}

/* floating spec annotations appear as card decomposes */
.hero-spec{position:absolute;z-index:4;background:rgba(255,255,255,.95);border-radius:12px;padding:8px 12px;
  box-shadow:var(--shadow);font-family:var(--font-head);font-weight:600;font-size:.82rem;color:var(--c-navy);
  display:flex;align-items:center;gap:8px;opacity:0;pointer-events:none;white-space:nowrap;
  transform:translateY(10px) scale(.9);transition:opacity .3s,transform .3s}
.hero-spec svg{width:18px;height:18px;color:var(--c-teal-600)}
.hero-spec small{display:block;font-weight:400;font-size:.72rem;color:var(--muted)}
.hero.is-exploded .hero-spec{opacity:1;transform:none}
.hero-spec--logo{left:-6%;top:4%}
.hero-spec--holder{right:-8%;top:4%}
.hero-spec--validity{right:-4%;bottom:18%}

.hero__scrollcue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:4;color:#cfe3f5;
  display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  opacity:calc(1 - var(--p,0)*2.2)}
.hero__scrollcue .mouse{width:26px;height:42px;border:2px solid rgba(255,255,255,.65);border-radius:14px;position:relative}
.hero__scrollcue .mouse::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;background:#fff;border-radius:3px;transform:translateX(-50%);animation:wheel 1.6s infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}60%{opacity:1;transform:translate(-50%,10px)}100%{opacity:0;transform:translate(-50%,14px)}}

@media (max-width:860px){
  /* keep the scroll-pinned decomposition (like desktop), stacked layout */
  .hero{height:200vh}
  .hero__stage{min-height:0}
  .hero__inner{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:22px;padding-block:90px 30px}
  .hero__content{max-width:100%;width:100%}
  .hero__trust{display:none}
  .hero__cardwrap{position:relative;left:auto;right:auto;top:auto;transform:none;width:min(300px,76vw);margin:4px auto 0}
  .amg-card{transform:perspective(1100px) rotateX(calc(3deg + var(--p,0)*12deg)) rotateY(calc(-6deg + var(--p,0)*-6deg))}
  .hero-spec{font-size:.72rem;padding:5px 9px}
  .hero__scrollcue{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero{height:auto}
  .hero__stage{position:relative;height:auto;min-height:0;padding-block:110px}
  .hero__bg{transform:none}
  .hero__content{transform:none;opacity:1}
  .amg-card,.amg-card__layer{transform:none!important}
  .amg-card{transform:perspective(1000px) rotateY(-8deg)!important}
  .hero-spec,.hero__scrollcue{display:none}
}

/* ============ 2. STRUCTURES — interactive map ============ */
.sv{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,34px);align-items:flex-start}
.sv__mapcol{flex:1 1 440px;min-width:300px;position:sticky;top:96px}
.sv__listcol{flex:1 1 420px;min-width:300px}
.filterbar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm);margin-bottom:20px}
.filterbar .field{margin-bottom:0;flex:1 1 180px}
.filter-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip{display:inline-flex;align-items:center;gap:.45em;border:1.5px solid var(--line);background:#fff;border-radius:999px;
  padding:.5em .9em;font-weight:600;font-size:.9rem;color:var(--c-navy);cursor:pointer;transition:.15s}
.chip svg{width:16px;height:16px}
.chip:hover{border-color:var(--c-teal)}
.chip.is-active{background:var(--c-blue);color:#fff;border-color:var(--c-blue)}
.chip[data-island].is-active{background:var(--c-teal);border-color:var(--c-teal);color:#042a30}

.map-wrap{position:relative;background:linear-gradient(180deg,#eaf4fb,#dcebf7);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow-sm);overflow:hidden}
.map-wrap svg{width:100%;height:auto;display:block;overflow:visible}
.island{fill:#bfe0d2;stroke:#5aa98a;stroke-width:1.5;transition:fill .2s,opacity .2s}
.island.is-dim{opacity:.35}
.island-label{font-family:var(--font-head);font-weight:600;fill:#2b6a53;font-size:13px;pointer-events:none}
.poi{cursor:pointer;transition:transform .18s;transform-box:fill-box;transform-origin:center}
.poi circle{stroke:#fff;stroke-width:2;transition:r .15s}
.poi:hover,.poi.is-hover{transform:scale(1.15)}
.poi.is-dim{opacity:.18;pointer-events:none}
.poi.is-active circle{stroke:var(--c-gold);stroke-width:3}
.poi--hopital circle{fill:#164E8A}
.poi--centre circle{fill:#2BA6B8}
.poi--pharmacie circle{fill:#0E8A4F}
.poi--cabinet circle{fill:#8257c4}
.map-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;font-size:.88rem}
.map-legend span{display:inline-flex;align-items:center;gap:.5em}
.map-legend i{width:14px;height:14px;border-radius:50%;display:inline-block}
.map-tooltip{position:absolute;z-index:5;background:var(--c-navy);color:#fff;padding:8px 12px;border-radius:10px;
  font-size:.84rem;pointer-events:none;opacity:0;transform:translate(-50%,-120%);transition:opacity .15s;white-space:nowrap;box-shadow:var(--shadow)}
.map-tooltip.is-on{opacity:1}

.result-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.result-count{font-family:var(--font-head);font-weight:600;color:var(--c-navy)}
.result-list{display:flex;flex-direction:column;gap:12px;max-height:none}
.result-card{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:16px;box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s;scroll-margin-top:100px}
.result-card.is-active{border-color:var(--c-gold);box-shadow:0 0 0 2px rgba(242,183,5,.3)}
.result-card__dot{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff}
.result-card__dot svg{width:22px;height:22px}
.result-card[data-type="Hôpital"] .result-card__dot{background:#164E8A}
.result-card[data-type="Centre de santé"] .result-card__dot{background:#2BA6B8}
.result-card[data-type="Pharmacie"] .result-card__dot{background:#0E8A4F}
.result-card[data-type="Cabinet"] .result-card__dot{background:#8257c4}
.result-card[hidden]{display:none}
.result-card h3{font-size:1.08rem;margin:0 0 3px}
.result-card .meta{font-size:.9rem;color:var(--muted);margin:0 0 4px}
.result-card .tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px}
.result-card .tag{font-size:.76rem;background:var(--surface-2);color:var(--c-blue-600);border-radius:999px;padding:.2em .7em;font-weight:600}
.result-card .acts{display:flex;flex-wrap:wrap;gap:8px}
.result-card .acts a{font-size:.86rem;padding:.5em .9em}
.result-empty{text-align:center;color:var(--muted);padding:40px 10px}

@media (max-width:900px){.sv__mapcol{position:relative;top:0}}

/* ============ 3. SIMULATEUR ============ */
.sim{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.sim__progress{display:flex;background:var(--surface)}
.sim__progress li{flex:1;display:flex;align-items:center;gap:8px;justify-content:center;padding:14px 8px;font-family:var(--font-head);
  font-weight:600;font-size:.9rem;color:var(--muted);border-bottom:3px solid transparent;position:relative}
.sim__progress li .n{width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:.85rem}
.sim__progress li.is-active{color:var(--c-blue-600);border-bottom-color:var(--c-blue)}
.sim__progress li.is-active .n{background:var(--c-blue);border-color:var(--c-blue);color:#fff}
.sim__progress li.is-done .n{background:var(--c-green);border-color:var(--c-green);color:#fff}
.sim__progress li span{display:none}
.sim__body{padding:clamp(22px,3.4vw,44px)}
.sim__step{display:none;animation:simin .4s var(--ease)}
.sim__step.is-active{display:block}
@keyframes simin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sim__q{font-family:var(--font-head);font-weight:600;font-size:1.3rem;color:var(--c-navy);margin-bottom:6px}
.sim__hint{color:var(--muted);margin-bottom:20px}
.opt-cards{display:flex;flex-wrap:wrap;gap:12px}
.opt-card{flex:1 1 150px;min-width:140px;border:1.8px solid var(--line);border-radius:16px;padding:18px;cursor:pointer;background:#fff;
  display:flex;flex-direction:column;gap:6px;transition:.15s;text-align:center;align-items:center}
.opt-card svg{width:32px;height:32px;color:var(--c-blue)}
.opt-card b{font-family:var(--font-head);color:var(--c-navy)}
.opt-card small{color:var(--muted)}
.opt-card input{position:absolute;opacity:0}
.opt-card:hover{border-color:var(--c-teal)}
.opt-card:has(input:checked){border-color:var(--c-blue);background:var(--c-blue-050);box-shadow:var(--ring)}
.counter{display:flex;align-items:center;gap:16px;background:var(--surface);border-radius:14px;padding:12px 16px;width:fit-content}
.counter button{width:44px;height:44px;border-radius:12px;border:0;background:var(--c-blue);color:#fff;font-size:1.4rem;cursor:pointer;line-height:1}
.counter button:hover{background:var(--c-blue-600)}
.counter output{font-family:var(--font-head);font-weight:700;font-size:1.6rem;color:var(--c-navy);min-width:40px;text-align:center}
.sim__range{margin-top:10px}
.sim__range input[type=range]{width:100%;accent-color:var(--c-teal)}
.range-val{font-family:var(--font-head);font-weight:700;font-size:1.4rem;color:var(--c-blue-600)}
.sim__nav{display:flex;justify-content:space-between;gap:12px;margin-top:28px}
.sim__result{text-align:center}
.sim__amount{font-family:var(--font-head);font-weight:800;font-size:clamp(2.4rem,6vw,3.6rem);color:var(--c-blue-600);line-height:1}
.sim__amount small{font-size:1rem;color:var(--muted);font-weight:500}
.sim__breakdown{list-style:none;padding:0;margin:20px auto;max-width:420px;text-align:left}
.sim__breakdown li{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line)}
.sim__breakdown li.total{border-bottom:0;border-top:2px solid var(--c-navy);font-weight:700;color:var(--c-navy);font-size:1.1rem}
.sim__badge{display:inline-flex;align-items:center;gap:.5em;background:rgba(14,138,79,.1);color:var(--c-green);border-radius:999px;padding:.5em 1em;font-weight:600;margin-bottom:14px}