/* ============================================================
   ri-dispositif.css — Composants pages dispositif
   Direction A « Vert profond » · figée le 11/06/2026
   ============================================================
   Source : <style> de /transverse/wireframes/direction-A-figee.html
   (tokens → ri-design-system.css · header/footer → Theme Builder).
   Chargé uniquement si ri_is_dispositif_view() — cf functions.php.
   Typo des titres scopée sous .single-dispositif main (RI-158 :
   aucune taille hN dans le Kit ; le composant gouverne seul).
   Ancienne feuille Direction B : ri-dispositif.css.bak-20260611
   ============================================================ */

/* ---- 0. Reset local (spécificité nulle : ne bat aucune règle) -- */
:where(.single-dispositif main),
:where(.single-dispositif main *),
:where(.single-dispositif main *)::before,
:where(.single-dispositif main *)::after{box-sizing:border-box}
:where(.single-dispositif main h1,.single-dispositif main h2,
.single-dispositif main h3,.single-dispositif main h4,
.single-dispositif main p){margin:0;padding:0}

/* ---- 1. Bases typographiques (scope page dispositif) ---------- */
.single-dispositif main h1{font-size:44px;line-height:1.15;font-weight:700;letter-spacing:-0.02em;text-wrap:balance;margin-bottom:24px}
.single-dispositif main h2{font-size:28px;font-weight:700;letter-spacing:-0.01em;line-height:1.25;margin-bottom:12px}

/* ---- 2. Layout & utilitaires ---------------------------------- */
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:600;font-size:16px;padding:12px 24px;border-radius:6px;border:none;cursor:pointer;font-family:var(--font)}
.btn:hover{background:var(--accent-hover)}
/* Correctif 11/06 : .elementor-kit-5 a (0-1-1) bat .btn (0-1-0) → texte vert sur fond vert */
.single-dispositif a.btn,.single-dispositif a.btn:hover,.single-dispositif a.btn:focus{color:#fff}
.single-dispositif .sim-results a.btn,.single-dispositif .sim-results a.btn:hover,.single-dispositif .sim-results a.btn:focus,.single-dispositif .final-card a.btn,.single-dispositif .final-card a.btn:hover,.single-dispositif .final-card a.btn:focus{color:var(--panel)}
.btn-sm{padding:8px 20px;font-size:15px}
.btn-lg{padding:16px 32px;font-size:18px}
.eyebrow{white-space:nowrap;display:inline-block;font-size:14px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);background:var(--support);padding:6px 12px;border-radius:4px;margin-bottom:24px}
.reassure{font-size:14px;color:var(--ink-2)}
.micro{font-size:13px;color:var(--ink-2);margin-top:16px;max-width:80ch;text-wrap:pretty}
.legal{font-size:13px;color:var(--ink-2);max-width:88ch;margin:32px auto 0;text-wrap:pretty}
.section-head{margin-bottom:48px;max-width:62ch}
.section-head p{color:var(--ink-2);font-size:18px;text-wrap:pretty}

/* ---- 3. Hero --------------------------------------------------- */
.hero{padding:96px 0 64px}
.hero-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:64px;align-items:center}
.hero-sub{font-size:18px;color:var(--ink-2);max-width:54ch;margin-bottom:32px;text-wrap:pretty}
.hero-cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:16px}
.hero-stat{border:1px solid var(--line);border-radius:8px;padding:32px;background:var(--bg-soft)}
.hero-stat .big{font-size:44px;font-weight:700;color:var(--accent);letter-spacing:-0.02em;line-height:1.1}
.hero-stat p{font-size:16px;color:var(--ink-2);margin-top:12px;text-wrap:pretty}

/* ---- 4. Simulateur --------------------------------------------- */
.simulator{padding:64px 0 32px}
.sim-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.sim-inputs{border:1px solid var(--line);border-radius:8px;padding:32px;background:var(--bg)}
.sim-inputs h3,.sim-results h3{font-size:14px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:24px}
.sim-inputs h3{color:var(--ink-2)}
.field{margin-bottom:16px}
.field label{display:block;font-size:14px;font-weight:500;color:var(--ink-2);margin-bottom:4px}
.field .value{border:1px solid var(--line);border-radius:6px;padding:12px 16px;font-size:16px;font-weight:600;background:var(--bg);display:flex;justify-content:space-between;align-items:center}
.field .value .unit{font-weight:400;color:var(--ink-2);font-size:14px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.segmented{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.segmented span{flex:1;text-align:center;padding:12px 8px;font-size:15px;font-weight:500;color:var(--ink-2)}
.segmented .on{background:var(--support);color:var(--accent);font-weight:600}
.sim-results{background:var(--panel);color:var(--panel-ink);border-radius:8px;padding:32px;display:flex;flex-direction:column}
.sim-results h3{color:var(--panel-ink-2)}
.kpi{margin-bottom:24px}
.kpi .num{font-size:40px;font-weight:700;color:var(--highlight);letter-spacing:-0.02em;line-height:1.1}
.kpi .lbl{font-size:15px;color:var(--panel-ink-2);margin-top:4px}
.res-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-top:1px solid var(--panel-line);font-size:16px}
.res-row .v{font-weight:600;white-space:nowrap}
.res-row .k{color:var(--panel-ink-2)}
.sim-results .btn{background:var(--highlight);color:var(--panel);text-align:center;margin-top:auto}
.sim-results .btn:hover{background:#A9EBCB}

/* ---- 5. Étapes (Comment ça marche) ----------------------------- */
.steps{padding:64px 0}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{border:1px solid var(--line);border-radius:8px;padding:32px;background:var(--bg)}
.step .n{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--support);color:var(--accent);font-weight:700;font-size:15px;margin-bottom:16px}
.step h3{font-size:18px;font-weight:600;margin-bottom:8px}
.step p{font-size:16px;color:var(--ink-2);text-wrap:pretty}

/* ---- 6. Pour qui ------------------------------------------------ */
.eligibility{padding:32px 0 64px}
.elig-card{background:var(--bg-soft);border-radius:8px;padding:48px}
.elig-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 48px;margin-top:24px}
.elig-item{display:flex;gap:12px;align-items:flex-start;font-size:16px}
.elig-item svg{flex:none;margin-top:4px}
.elig-item span{text-wrap:pretty}

/* ---- 7. FAQ ------------------------------------------------------ */
.faq{padding:32px 0 64px}
.faq-list{max-width:760px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-size:18px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{flex:none;transition:transform .2s;color:var(--accent)}
.faq details[open] summary .chev{transform:rotate(180deg)}
.faq .ans{padding:0 0 24px;color:var(--ink-2);font-size:16px;max-width:65ch;text-wrap:pretty}

/* ---- 8. CTA final ------------------------------------------------ */
.final{padding:32px 0 64px}
.final-card{background:var(--panel);color:var(--panel-ink);border-radius:8px;padding:64px 48px;text-align:center}
.final-card h2{color:var(--panel-ink)}
.final-card p{color:var(--panel-ink-2);font-size:18px;max-width:50ch;margin:0 auto 32px;text-wrap:pretty}
.final-card .btn{background:var(--highlight);color:var(--panel)}
.final-card .btn:hover{background:#A9EBCB}
.final-card .reassure{display:block;margin-top:16px;color:var(--panel-ink-2)}

/* ---- 9. Mobile (breakpoint unique 860px) ------------------------- */
@media (max-width:860px){
  .hero{padding:48px 0 32px}
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .single-dispositif main h1{font-size:32px}
  .sim-grid{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr}
  .elig-grid{grid-template-columns:1fr}
  .elig-card{padding:32px 24px}
  .final-card{padding:48px 24px}
  .hero-stat .big{font-size:36px}
  .field-row{grid-template-columns:1fr}
}