/* ==========================================================================
   Edabos — Accompagnement mensuel
   Vient après style.css : réutilise les mêmes tokens (couleurs, radius, ombres,
   boutons, badges, cards .plan, FAQ .qa). Ce fichier ne couvre que les
   quelques composants inédits à cette page.
   ========================================================================== */

/* --------------------------------------------------------------
   1. Hero (variante légère du panel dégradé, sans mise en scène produit)
   -------------------------------------------------------------- */
.svc-hero{padding:172px 0 96px}
.svc-hero .badge{margin-bottom:22px}
.svc-hero .h1{max-width:760px;margin-bottom:20px}
.svc-hero .lead{max-width:640px;margin-bottom:32px}
.svc-hero__cta{display:flex;flex-direction:column;align-items:center;gap:14px}
.svc-hero__note{
  display:inline-flex;align-items:center;gap:8px;
  font-family:Geist,sans-serif;font-size:13.5px;font-weight:500;color:var(--ink-mute);
}
.svc-hero__note i{width:4px;height:4px;border-radius:50%;background:var(--ink-mute);flex:none}

.cta-final__actions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}

/* --------------------------------------------------------------
   2. Constat — 3 piliers (Maintenir / Analyser / Améliorer)
   -------------------------------------------------------------- */
.constat .lead{margin-bottom:52px}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left}
.pillar{
  background:#fff;border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
  padding:32px 28px;
  display:flex;flex-direction:column;gap:14px;
}
.pillar__index{
  font-family:"DM Sans",sans-serif;font-weight:600;font-size:15px;letter-spacing:-.2px;
  color:var(--ink-mute);
}
.pillar__title{font-family:"DM Sans",sans-serif;font-weight:600;font-size:21px;letter-spacing:-.5px;color:var(--ink)}
.pillar__text{font-size:14.5px;line-height:1.65;color:var(--ink-soft)}

/* --------------------------------------------------------------
   3. Forfaits — en-tête + prix / mois (le reste vient de .plan)
   -------------------------------------------------------------- */
#forfaits .lead{margin-bottom:52px}
.plan__price-row{display:flex;align-items:baseline;gap:6px}
.plan__price-period{font-family:Geist,sans-serif;font-size:15px;font-weight:500;color:var(--ink-mute)}
.plan__foot{
  padding:0 19px 24px;margin-top:-10px;
  font-size:13px;line-height:1.55;color:var(--ink-mute);
}

/* --------------------------------------------------------------
   4. Notre méthode — boucle en 4 étapes
   -------------------------------------------------------------- */
#methode .lead{margin-bottom:60px}
.method{display:grid;grid-template-columns:repeat(4,1fr);gap:0;align-items:start;position:relative}
.method__step{
  text-align:left;padding:0 18px;position:relative;
  display:flex;flex-direction:column;gap:12px;
}
.method__step:first-child{padding-left:0}
.method__step:last-child{padding-right:0}
.method__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:#121315;color:#fff;
  font-family:Geist,sans-serif;font-weight:600;font-size:15px;
  flex:none;
}
.method__title{font-family:"DM Sans",sans-serif;font-weight:600;font-size:18px;letter-spacing:-.3px;color:var(--ink)}
.method__text{font-size:14px;line-height:1.6;color:var(--ink-soft)}
.method__arrow{
  position:absolute;top:20px;right:-4px;
  width:32px;height:32px;color:#c7c9ce;flex:none;
}
.method__loop{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin-top:48px;padding:16px 26px;
  border:1px dashed #d6d8dc;border-radius:40px;
  width:fit-content;margin-inline:auto;
  font-family:Geist,sans-serif;font-size:13.5px;font-weight:500;color:var(--ink-mute);
}
.method__loop svg{width:16px;height:16px;color:#9a9ca2;flex:none}

/* --------------------------------------------------------------
   5. Avant / Après
   -------------------------------------------------------------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;text-align:left}
.compare__col{
  border-radius:var(--r-card);padding:32px 30px 34px;
  display:flex;flex-direction:column;
}
.compare__col--before{background:var(--grey-panel)}
.compare__col--after{background:#0d0d10;color:#fff}
.compare__label{
  display:inline-flex;align-items:center;gap:8px;
  font-family:Geist,sans-serif;font-size:13px;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;margin-bottom:22px;
  color:var(--ink-mute);
}
.compare__col--after .compare__label{color:rgba(255,255,255,.55)}
.compare__steps{display:flex;flex-direction:column;align-items:flex-start}
.compare__step{
  font-family:Geist,sans-serif;font-size:15.5px;font-weight:500;line-height:1.4;
  color:var(--ink);
}
.compare__col--after .compare__step{color:#fff}
.compare__step--faded{color:var(--ink-mute)}
.compare__col--after .compare__step--faded{color:rgba(255,255,255,.5)}
.compare__chevron{margin:9px 0;color:#b7b9be;width:14px;height:14px}
.compare__col--after .compare__chevron{color:rgba(255,255,255,.35)}
.compare__note{
  max-width:760px;margin:34px auto 0;text-align:center;
  font-size:16px;line-height:1.6;color:var(--ink-soft);
}
.compare__note b{color:var(--ink);font-weight:600}

/* --------------------------------------------------------------
   6. Ce que nous pouvons améliorer
   -------------------------------------------------------------- */
#ameliorations .lead{margin-bottom:52px}
.improve{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:left}
.improve__item{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:22px 20px;display:flex;flex-direction:column;gap:12px;
}
.improve__ico{
  width:34px;height:34px;border-radius:10px;
  background:var(--grey-panel);color:#111;
  display:grid;place-items:center;flex:none;
}
.improve__ico svg{width:17px;height:17px}
.improve__title{font-family:Geist,sans-serif;font-weight:600;font-size:15.5px;color:var(--ink)}
.improve__text{font-size:13.5px;line-height:1.55;color:var(--ink-soft)}

/* --------------------------------------------------------------
   7. Pourquoi Edabos
   -------------------------------------------------------------- */
.why{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;text-align:left}
.why__left p{font-size:16px;line-height:1.65;color:var(--ink-soft);margin-bottom:16px}
.why__args{display:flex;flex-direction:column;gap:22px}
.why__arg{display:flex;gap:16px;align-items:flex-start}
.why__arg .ico-check{
  width:30px;height:30px;flex:none;border-radius:50%;
  background:#121315;color:#fff;padding:8px;box-sizing:border-box;
}
.why__arg-title{font-family:Geist,sans-serif;font-weight:600;font-size:16px;color:var(--ink);margin-bottom:4px}
.why__arg-text{font-size:14px;line-height:1.55;color:var(--ink-soft)}

/* --------------------------------------------------------------
   8. Responsive — ordinateur portable / tablette
   -------------------------------------------------------------- */
@media (max-width:1439.98px){
  .svc-hero{padding:150px 0 80px}
  .pillars{gap:16px}
  .pillar{padding:26px 22px}
  .method{grid-template-columns:repeat(2,1fr);gap:36px 20px}
  .method__arrow{display:none}
  .method__step{padding:0}
  .compare{gap:16px}
  .compare__col{padding:28px 24px}
  .improve{grid-template-columns:repeat(2,1fr)}
  .why{gap:44px}
}

/* --------------------------------------------------------------
   9. Responsive — téléphone
   -------------------------------------------------------------- */
@media (max-width:809.98px){
  .svc-hero{padding:118px 0 60px}
  .svc-hero .h1{max-width:340px}
  .svc-hero .lead{max-width:320px}
  .constat .lead{margin-bottom:34px}
  .pillars{grid-template-columns:1fr;gap:14px}
  #forfaits .lead{margin-bottom:30px}
  #methode .lead{margin-bottom:34px}
  .method{grid-template-columns:1fr;gap:28px}
  .method__loop{margin-top:8px;width:100%;justify-content:center;text-align:center;padding:14px 18px}
  .compare{grid-template-columns:1fr;gap:14px}
  .compare__note{margin-top:24px;font-size:15px}
  #ameliorations .lead{margin-bottom:30px}
  .improve{grid-template-columns:1fr 1fr;gap:12px}
  .improve__item{padding:18px 16px}
  .why{grid-template-columns:1fr;gap:32px}
}