/* ===================================================================
   CallMonster — Stop Appels Perdus
   Concept : "console de dispatch / rubalise de chantier"
   Palette : noir #0A0A0A + jaune haute-viz #F5C518 sur fond blanc
   Mobile-first (375px prioritaire)
   =================================================================== */

/* ---------- Polices auto-hébergées (latin + latin-ext) ---------- */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/anton-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/anton-400-ext.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/manrope-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/manrope-500-ext.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/manrope-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/manrope-700-ext.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/manrope-800.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/manrope-800-ext.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/spacemono-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/spacemono-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- Variables ---------- */
:root{
  --black:#0A0A0A;
  --ink:#15140F;
  --yellow:#F5C518;
  --yellow-deep:#C8901A;        /* texte LARGE sur blanc uniquement (≥18px bold) */
  --amber-ink:#9A6A0F;          /* texte PETIT sur blanc — WCAG AA 4.6:1 */
  --white:#FFFFFF;
  --concrete:#F4F2ED;
  --concrete-line:#E4E0D6;
  --red:#E5484D;
  --green:#16A34A;
  --muted:#5C5A52;
  --muted-light:#A8A599;
  --display:'Anton',Impact,'Arial Narrow Bold',sans-serif;
  --body:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Space Mono',ui-monospace,'Courier New',monospace;
  --radius:18px;
  --maxw:1120px;
  --shadow:0 18px 40px -22px rgba(10,10,10,.45);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--body);color:var(--ink);background:var(--white);
  line-height:1.55;font-weight:500;font-size:17px;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
s{color:var(--muted-light)}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.container-narrow{max-width:760px}
.visually-hidden,.skip-link:not(:focus){position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Accessibilité : focus clavier visible */
a:focus-visible,button:focus-visible,summary:focus-visible,.phone-cta:focus-visible{
  outline:3px solid var(--black);outline-offset:3px;border-radius:6px;
}
.skip-link{position:fixed;top:10px;left:10px;z-index:200;background:var(--yellow);color:var(--black);
  padding:10px 16px;border-radius:8px;font-weight:800;box-shadow:var(--shadow)}

/* ---------- Titres ---------- */
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:.98;letter-spacing:.5px;text-transform:uppercase}
h1{font-size:clamp(2.9rem,12vw,5.5rem)}
h2{font-size:clamp(2.1rem,8vw,3.4rem);letter-spacing:.4px}
h3{font-size:1.18rem;letter-spacing:.3px;line-height:1.1}
.hl{color:var(--yellow-deep);-webkit-text-stroke:0}
.section-tag{font-family:var(--mono);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber-ink);font-weight:700;margin-bottom:10px}
.section-tag::before{content:"// "}
.tag-light{color:var(--yellow)}

/* =================== HAZARD TAPE (signature) =================== */
.hazard-bar{
  height:14px;width:100%;
  background:repeating-linear-gradient(-45deg,
    var(--yellow) 0 22px, var(--black) 22px 44px);
  background-size:62px 62px;
}
@media (prefers-reduced-motion:no-preference){
  .hazard-bar{animation:hazard-scroll 2.4s linear infinite}
  @keyframes hazard-scroll{from{background-position:0 0}to{background-position:62px 0}}
}

/* =================== HEADER =================== */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--concrete-line)}
.site-header::after{content:"";display:block;height:3px;
  background:repeating-linear-gradient(-45deg,var(--yellow) 0 10px,var(--black) 10px 20px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{width:40px;height:40px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.18))}
.brand-name{font-family:var(--display);font-size:1.45rem;letter-spacing:.5px;text-transform:uppercase}
.brand-name strong{color:var(--yellow-deep)}
.btn-ghost{font-weight:800;font-size:.86rem;padding:9px 15px;border:2px solid var(--black);
  border-radius:10px;background:transparent;transition:transform .12s ease,background .12s ease;white-space:nowrap}
.btn-ghost:hover{background:var(--black);color:var(--white);transform:translateY(-1px)}

/* =================== HERO =================== */
.hero{background:var(--white);position:relative}
.hero-inner{display:flex;flex-direction:column;gap:24px;padding-top:34px;padding-bottom:38px;align-items:center;text-align:center}
.kicker{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.06em;background:var(--black);color:var(--white);
  padding:7px 14px;border-radius:999px;align-self:center}
.kicker-dot{width:9px;height:9px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 0 rgba(245,197,24,.7)}
@media (prefers-reduced-motion:no-preference){.kicker-dot{animation:pulse 1.8s ease-out infinite}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(245,197,24,.7)}70%{box-shadow:0 0 0 10px rgba(245,197,24,0)}100%{box-shadow:0 0 0 0 rgba(245,197,24,0)}}
h1{margin:2px 0}
.hero-sub{font-size:1.12rem;color:var(--muted);max-width:30ch;margin:0 auto}
.hero-sub strong{color:var(--ink)}

/* Visuel mascotte */
.hero-visual{position:relative;order:-1;width:min(70vw,260px)}
.hero-mascot{width:100%;filter:drop-shadow(0 22px 30px rgba(10,10,10,.28));position:relative;z-index:1}
.hero-glow{position:absolute;inset:-12% -12% -8% -12%;z-index:0;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,rgba(245,197,24,.55),rgba(245,197,24,0) 62%);filter:blur(6px)}

/* Bouton téléphone géant (CTA principal) */
.phone-cta{display:inline-flex;align-items:center;gap:14px;background:var(--yellow);color:var(--black);
  border:3px solid var(--black);border-radius:16px;padding:14px 22px;font-weight:800;
  box-shadow:6px 6px 0 0 var(--black);transition:transform .12s ease,box-shadow .12s ease;align-self:center}
.phone-cta:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 0 var(--black)}
.phone-cta:active{transform:translate(3px,3px);box-shadow:2px 2px 0 0 var(--black)}
.phone-cta-icon{font-size:1.7rem;line-height:1}
.phone-cta-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05}
.phone-cta-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.phone-cta-number{font-family:var(--mono);font-weight:700;font-size:1.5rem;letter-spacing:-.5px}
@media (prefers-reduced-motion:no-preference){.phone-cta{animation:cta-breathe 2.6s ease-in-out infinite}}
@keyframes cta-breathe{0%,100%{box-shadow:6px 6px 0 0 var(--black)}50%{box-shadow:6px 6px 0 0 var(--black),0 0 0 6px rgba(245,197,24,.35)}}

.trust-row{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;font-weight:700;font-size:.9rem;color:var(--ink)}
.trust-row li{background:var(--concrete);border:1px solid var(--concrete-line);padding:7px 12px;border-radius:999px}

/* =================== PROBLÈME (sombre) =================== */
.problem{background:var(--black);color:var(--white);padding:64px 0;position:relative;overflow:hidden}
.problem::before{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(circle at 85% -10%,rgba(245,197,24,.18),transparent 45%)}
.problem>.container{position:relative}
.problem h2{color:var(--white)}
.problem-lead{color:var(--muted-light);max-width:46ch;margin:14px 0 30px;font-size:1.08rem}
.calc{background:#141310;border:1px solid #2a2820;border-radius:var(--radius);padding:26px 22px;text-align:center}
.calc-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;margin-bottom:8px}
.calc-cell{display:flex;flex-direction:column;align-items:center}
.calc-num{font-family:var(--display);font-size:2.4rem;color:var(--white);line-height:1}
.calc-unit{font-size:.8rem;color:var(--muted-light);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.calc-op{font-family:var(--display);font-size:1.8rem;color:var(--yellow)}
.calc-result{margin-top:18px;padding-top:22px;border-top:1px dashed #3a382e}
.calc-result-label{display:block;font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:var(--muted-light)}
.calc-result-num{display:block;font-family:var(--display);color:var(--yellow);
  font-size:clamp(3.6rem,18vw,6.5rem);line-height:.95;text-shadow:0 0 36px rgba(245,197,24,.35)}
.calc-result-unit{display:block;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--white);font-size:1rem}
.problem-foot{margin-top:24px;font-size:1.05rem;font-weight:700;color:var(--white);text-align:center}
.problem-foot::before{content:"→ ";color:var(--yellow)}

/* =================== COMMENT ÇA MARCHE =================== */
.how{padding:64px 0;background:var(--white)}
.how-lead{color:var(--muted);max-width:50ch;margin:12px 0 34px;font-size:1.05rem}
.how-grid{display:flex;flex-direction:column;gap:38px}
.steps{display:flex;flex-direction:column;gap:14px;position:relative}
.step{display:flex;gap:16px;background:var(--concrete);border:1px solid var(--concrete-line);
  border-left:6px solid var(--yellow);border-radius:14px;padding:18px 18px 18px 16px}
.step-num{flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  background:var(--black);color:var(--yellow);font-family:var(--display);font-size:1.5rem}
.step-body h3{margin-bottom:5px}
.step-body p{font-size:.98rem;color:var(--muted)}

/* ----- Console SMS (signature) ----- */
.phone-demo{align-self:center;width:100%;max-width:330px}
.phone-frame{background:#0A0A0A;border-radius:38px;padding:12px;box-shadow:var(--shadow),0 0 0 2px #2a2820;
  border:1px solid #38352b;position:relative}
.phone-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:120px;height:22px;
  background:#0A0A0A;border-radius:0 0 16px 16px;z-index:3}
.phone-screen{background:linear-gradient(180deg,#1b1a16,#111),#111;border-radius:28px;
  padding:34px 14px 18px;min-height:430px;display:flex;flex-direction:column;gap:11px;overflow:hidden}
.phone-statusbar{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.7rem;
  color:var(--muted-light);padding:0 6px 6px;font-weight:700}
.sms-event{display:flex;align-items:center;gap:11px;background:#211f19;border:1px solid #34322a;
  border-radius:12px;padding:11px 13px;color:#fff}
.sms-event strong{display:block;font-size:.92rem}
.sms-event span:not(.missed-dot):not(.won-check){font-size:.78rem;color:var(--muted-light);font-family:var(--mono)}
.sms-missed{border-color:rgba(229,72,77,.5)}
.missed-dot{flex:0 0 auto;width:13px;height:13px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(229,72,77,.7)}
@media (prefers-reduced-motion:no-preference){.missed-dot{animation:pulse-red 1.4s ease-out infinite}}
@keyframes pulse-red{0%{box-shadow:0 0 0 0 rgba(229,72,77,.7)}70%{box-shadow:0 0 0 9px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}}
.sms-won{border-color:rgba(22,163,74,.55);background:#16271b}
.won-check{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--green);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:.9rem}
.sms-meta{font-family:var(--mono);font-size:.66rem;color:var(--muted-light);text-transform:uppercase;letter-spacing:.04em;padding-left:4px}
.bubble{padding:11px 14px;border-radius:16px;font-size:.9rem;line-height:1.4;max-width:88%}
.bubble-out{align-self:flex-end;background:var(--yellow);color:var(--black);border-bottom-right-radius:5px;font-weight:600}
.bubble-in{align-self:flex-start;background:#2b2920;color:#fff;border:1px solid #3c3a30;border-bottom-left-radius:5px}
.bubble-in strong{color:var(--yellow)}
.phone-caption{text-align:center;font-size:.84rem;color:var(--muted);margin-top:12px;font-weight:600}

/* animation d'apparition séquencée des événements
   (masqué uniquement si JS actif → sinon tout reste visible, no-JS friendly) */
@media (prefers-reduced-motion:no-preference){
  .js [data-step]{opacity:0;transform:translateY(10px)}
  [data-sms-console].play [data-step]{animation:sms-in .5s ease forwards}
  [data-sms-console].play [data-step="1"]{animation-delay:.1s}
  [data-sms-console].play [data-step="2"]{animation-delay:.7s}
  [data-sms-console].play [data-step="3"]{animation-delay:1.4s}
  [data-sms-console].play [data-step="4"]{animation-delay:2.1s}
  @keyframes sms-in{to{opacity:1;transform:translateY(0)}}
}

/* =================== PRICING =================== */
.pricing{padding:64px 0;background:var(--concrete);border-top:1px solid var(--concrete-line);border-bottom:1px solid var(--concrete-line)}
.setup-banner{margin:18px 0 30px;background:var(--black);color:#fff;border-radius:14px;padding:14px 18px;
  text-align:center;font-weight:700;font-size:1rem;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:center}
.setup-banner strong{color:var(--yellow);text-transform:uppercase;letter-spacing:.02em}
.setup-badge{font-family:var(--mono);font-size:.72rem;background:var(--yellow);color:var(--black);
  padding:3px 9px;border-radius:999px;font-weight:700}
.setup-badge:empty{display:none}

.plans{display:flex;flex-direction:column;gap:18px}
.plan{background:var(--white);border:2px solid var(--ink);border-radius:var(--radius);padding:24px 22px;
  position:relative;box-shadow:5px 5px 0 0 rgba(10,10,10,.9);display:flex;flex-direction:column}
.plan-featured{border-color:var(--yellow-deep);box-shadow:6px 6px 0 0 var(--yellow-deep);
  background:linear-gradient(180deg,#fffdf4,#fff)}
.plan-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--yellow);
  color:var(--black);font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;
  padding:6px 16px;border-radius:999px;border:2px solid var(--black);white-space:nowrap}
.plan-name{font-size:1.7rem;color:var(--ink)}
.plan-price{display:flex;align-items:baseline;gap:4px;margin:4px 0 2px}
.plan-amount{font-family:var(--display);font-size:3rem;line-height:1;color:var(--ink)}
.plan-per{font-weight:800;color:var(--muted)}
.plan-tagline{color:var(--muted);font-size:.92rem;margin-bottom:16px}
.plan-features{display:flex;flex-direction:column;gap:10px;margin-bottom:22px;flex:1}
.plan-features li{position:relative;padding-left:28px;font-size:.95rem;line-height:1.4}
.plan-features li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;
  background:var(--yellow);color:var(--black);border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:800}
.plan-features .feat-inherit{font-weight:800;padding-left:0;color:var(--amber-ink)}
.plan-features .feat-inherit::before{content:none}
.plan-features strong{font-weight:800}
.btn-plan{display:block;text-align:center;font-weight:800;padding:14px;border-radius:12px;
  border:2px solid var(--black);background:var(--white);transition:transform .12s ease,background .12s ease}
.btn-plan:hover{background:var(--black);color:#fff;transform:translateY(-2px)}
.btn-plan-primary{background:var(--yellow);box-shadow:4px 4px 0 0 var(--black)}
.btn-plan-primary:hover{background:var(--black);color:var(--yellow)}

.setup-common{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;margin-top:28px;
  font-weight:700;font-size:.92rem;color:var(--ink)}
.setup-common li{color:var(--muted)}

/* =================== FAQ =================== */
.faq{padding:64px 0;background:var(--white)}
.faq-list{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.faq-item{border:1px solid var(--concrete-line);border-radius:14px;background:var(--concrete);overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:18px 50px 18px 18px;font-weight:800;font-size:1.02rem;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);
  font-family:var(--display);font-size:1.6rem;color:var(--yellow-deep);transition:transform .2s ease}
.faq-item[open] summary::after{content:"–"}
.faq-answer{padding:0 18px 18px;color:var(--muted)}
.faq-item[open]{border-color:var(--yellow-deep)}

/* =================== CTA FINAL =================== */
.final-cta{background:var(--black);color:#fff;position:relative}
.final-inner{text-align:center;padding:58px 20px}
.final-cta h2{color:#fff}
.final-cta .hl{color:var(--yellow)}
.final-sub{color:var(--muted-light);margin:14px 0 26px;font-size:1.08rem}
.final-cta .phone-cta{margin:0 auto}
.phone-cta-lg{padding:18px 28px}
.phone-cta-lg .phone-cta-number{font-size:1.75rem}
.final-foot{margin-top:20px;font-size:.9rem;color:var(--muted-light);font-weight:700}

/* =================== FOOTER =================== */
.site-footer{background:#070707;color:var(--muted-light);padding:40px 0}
.footer-inner{display:flex;flex-direction:column;gap:22px;text-align:center;align-items:center}
.footer-brand{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:40ch}
.footer-logo{width:48px;height:48px}
.footer-brand p{font-size:.92rem}
.footer-brand strong{color:var(--yellow)}
.footer-nav{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:center;font-weight:700;font-size:.92rem}
.footer-nav a{color:#fff}
.footer-nav a:hover{color:var(--yellow)}
.footer-phone{font-family:var(--mono);font-weight:700;font-size:1.2rem;color:var(--yellow)}
.footer-legal{font-size:.82rem;line-height:1.8}

/* =================== RESPONSIVE ≥ 760px =================== */
@media (min-width:760px){
  body{font-size:18px}
  .hero-inner{flex-direction:row;text-align:left;justify-content:space-between;
    align-items:center;gap:40px;padding-top:54px;padding-bottom:58px}
  .hero-copy{flex:1 1 54%;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
  .kicker,.phone-cta,.trust-row{align-self:flex-start}
  .trust-row{justify-content:flex-start}
  .hero-sub{margin:0;max-width:38ch}
  .hero-visual{order:0;width:min(40vw,360px);flex:0 0 auto}
  .how-grid{flex-direction:row;align-items:flex-start;gap:46px}
  .steps{flex:1 1 56%}
  .phone-demo{flex:0 0 auto;position:sticky;top:84px}
  .plans{flex-direction:row;align-items:stretch}
  .plan{flex:1}
  .plan-featured{transform:scale(1.04)}
  .calc-num{font-size:3rem}
}
@media (min-width:1024px){
  .hero-inner{padding-top:70px;padding-bottom:72px}
}

/* =================== HERO — schéma animé du flow (remplace la mascotte) =================== */
.hero-flow{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;gap:14px;
  background:var(--white);border:2px solid var(--ink);border-radius:18px;
  padding:18px 16px;box-shadow:6px 6px 0 0 var(--black);list-style:none}
.flow-step{position:relative;display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center}
.flow-badge{position:relative;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:var(--concrete);border:2px solid var(--concrete-line);
  transition:transform .3s ease,background .3s ease,border-color .3s ease,box-shadow .3s ease}
.flow-emoji{font-size:1.5rem;line-height:1;transition:opacity .35s ease,transform .35s ease}
.flow-text{display:flex;flex-direction:column;line-height:1.18;min-width:0}
.flow-text strong{font-size:1rem;color:var(--ink);transition:color .3s ease}
.flow-text small{font-size:.82rem;color:var(--muted)}

/* connecteur + chevron entre deux étapes */
.flow-link{position:absolute;left:23px;top:48px;width:2px;height:14px;background:var(--concrete-line);
  transition:background .3s ease}
.flow-chevron{position:absolute;left:50%;bottom:-4px;width:8px;height:8px;
  transform:translateX(-50%) rotate(45deg);
  border-right:2px solid var(--concrete-line);border-bottom:2px solid var(--concrete-line);
  transition:border-color .3s ease}

/* point rouge "appel manqué" (pulse) */
.flow-pip{position:absolute;top:-4px;right:-4px;width:14px;height:14px;border-radius:50%;
  background:var(--red);border:2px solid var(--white)}
.flow-pip--sms{background:var(--white);border-color:var(--concrete-line);font-size:.6rem;
  display:grid;place-items:center;width:18px;height:18px;top:-6px;right:-6px}
@media (prefers-reduced-motion:no-preference){
  .flow-step--miss .flow-pip{animation:hero-pulse-red 1.4s ease-out infinite}
  @keyframes hero-pulse-red{0%{box-shadow:0 0 0 0 rgba(229,72,77,.7)}70%{box-shadow:0 0 0 9px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}}
}

/* --- état ACTIF (étape allumée) --- */
.flow-step.is-active .flow-badge{background:var(--yellow);border-color:var(--black);
  transform:scale(1.08);box-shadow:0 0 0 4px rgba(245,197,24,.32)}
.flow-step.is-active .flow-text strong{color:var(--black)}
/* connecteurs franchis = jaunes */
.flow-step.is-active .flow-link,.flow-step.is-done .flow-link{background:var(--yellow-deep)}
.flow-step.is-active .flow-chevron,.flow-step.is-done .flow-chevron{border-color:var(--yellow-deep)}
/* dot qui descend le long du connecteur de l'étape active */
@media (prefers-reduced-motion:no-preference){
  .flow-step.is-active .flow-link::after{content:"";position:absolute;left:50%;top:0;width:6px;height:6px;
    border-radius:50%;background:var(--yellow);transform:translateX(-50%);
    animation:flow-travel .9s ease-in-out infinite}
  @keyframes flow-travel{0%{top:-3px;opacity:0}30%{opacity:1}100%{top:13px;opacity:0}}
}

/* --- étape finale "client récupéré" : la coche verte apparaît --- */
.js .flow-step--won .flow-emoji{opacity:.25;transform:scale(.7)}
.js .flow-step--won.is-active .flow-emoji,
.flow-static .flow-step--won .flow-emoji{opacity:1;transform:scale(1)}
.flow-step--won.is-active .flow-badge{background:#e7f7ee;border-color:var(--green);
  box-shadow:0 0 0 4px rgba(22,163,74,.28)}
@media (prefers-reduced-motion:no-preference){
  .flow-step--won.is-active .flow-emoji{animation:flow-pop .5s ease}
  @keyframes flow-pop{0%{transform:scale(.3)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
}

/* --- état statique (mouvement réduit ou repli) : diagramme complet, lisible --- */
.flow-static .flow-link{background:var(--yellow-deep)}
.flow-static .flow-chevron{border-color:var(--yellow-deep)}

/* sur grand écran la carte du flow respire un peu plus */
@media (min-width:760px){
  .hero-flow{gap:16px;padding:22px 20px}
  .flow-text strong{font-size:1.05rem}
}

/* =================== Préférence mouvement réduit =================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-step]{opacity:1!important;transform:none!important}
}