/* ==========================================================================
   NOPILLO — Design System
   Hub des estimateurs LMNP — charte graphique alignée sur nopillo.fr
   ========================================================================== */

:root{
  /* Couleurs de marque */
  --color-primary: #4F46E5;
  --color-primary-dark: #3B32C9;
  --color-primary-darker: #2C2699;
  --color-primary-light: #EEECFC;
  --color-bg-lavender: #EEEBFB;
  --color-bg-lavender-2: #E4DFF8;
  --color-dark: #14142B;
  --color-text: #1D1B33;
  --color-text-soft: #5B5877;
  --color-border: #E6E3F5;
  --color-green: #1F9254;
  --color-green-light: #E8F7EE;
  --color-green-pale: #DDF3E4;
  --color-red: #D64545;
  --color-red-light: #FBEAEA;
  --color-orange: #F0883E;
  --color-orange-light: #FDEEE0;
  --color-white: #FFFFFF;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-full: 999px;

  --shadow-card: 0 10px 30px rgba(20, 20, 43, 0.07);
  --shadow-card-lg: 0 20px 45px rgba(20, 20, 43, 0.10);

  --font-main: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --container-w: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-main);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ padding: 0; margin: 0; list-style: none; }
h1,h2,h3,h4{ font-weight: 800; line-height: 1.2; margin: 0 0 .5em; letter-spacing: -0.01em; }
p{ margin: 0 0 1em; }
.container{ max-width: var(--container-w); margin: 0 auto; padding: 0 24px; }

/* ---------- Utility ---------- */
.text-primary{ color: var(--color-primary); }
.text-soft{ color: var(--color-text-soft); }
.tag-pill{
  display:inline-flex; align-items:center; gap:6px;
  background: var(--color-primary-light); color: var(--color-primary-dark);
  font-weight: 700; font-size: .78rem; padding: 7px 16px;
  border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: .03em;
}
.section{ padding: 64px 0; }
.section-tight{ padding: 40px 0; }
.section-lavender{ background: var(--color-bg-lavender); }
.section-dark{ background: var(--color-dark); color: #fff; }
.center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.max-w-680{ max-width: 680px; }
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.grid{ display:grid; gap: 24px; }
.grid-2{ grid-template-columns: 1fr 1fr; }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
.grid-5{ grid-template-columns: repeat(5,1fr); }
.flex{ display:flex; }
.flex-center{ display:flex; align-items:center; }
.gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;} .gap-24{gap:24px;}
.hidden{ display:none !important; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-main); font-weight: 700; font-size: .95rem;
  padding: 14px 28px; border-radius: var(--radius-full);
  border: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--color-primary); color: #fff; box-shadow: 0 8px 20px rgba(79,70,229,.28); }
.btn-primary:hover{ background: var(--color-primary-dark); }
.btn-dark{ background: var(--color-dark); color: #fff; }
.btn-dark:hover{ background:#000; }
.btn-outline{ background: transparent; color: var(--color-dark); border: 1.5px solid var(--color-border); }
.btn-outline:hover{ border-color: var(--color-primary); color: var(--color-primary); }
.btn-block{ width: 100%; }
.btn-sm{ padding: 10px 20px; font-size: .85rem; }
.btn-link{ background:none; border:none; color: var(--color-text-soft); font-weight:600; font-size:.85rem; cursor:pointer; text-decoration: underline; text-underline-offset: 3px; }
.btn-link:hover{ color: var(--color-primary); }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50; background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.logo{ font-family: var(--font-main); font-weight: 800; font-size: 1.4rem; color: var(--color-dark); letter-spacing:-0.02em; }
.logo span{ color: var(--color-primary); }
.main-nav{ display:flex; align-items:center; gap: 30px; }
.main-nav a{ font-weight: 600; font-size: .93rem; color: var(--color-dark); position:relative; }
.main-nav a:hover{ color: var(--color-primary); }
.header-actions{ display:flex; align-items:center; gap:16px; }
.nav-toggle{ display:none; background:none; border:none; font-size:1.5rem; cursor:pointer; }

@media (max-width: 900px){
  .main-nav{ display:none; }
  .nav-toggle{ display:block; }
  .header-actions .btn{ padding: 10px 16px; font-size: .82rem; }
}

/* ---------- Announcement bar ---------- */
.announce-bar{
  background: var(--color-orange-light); color: var(--color-dark);
  text-align:center; padding: 10px 16px; font-size: .85rem; font-weight: 600;
  display:flex; align-items:center; justify-content:center; gap: 14px; flex-wrap:wrap;
}
.announce-bar .btn{ padding: 6px 16px; font-size:.78rem; }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ font-size: .82rem; color: var(--color-text-soft); padding: 18px 0; }
.breadcrumb a{ color: var(--color-text-soft); }
.breadcrumb a:hover{ color: var(--color-primary); }
.breadcrumb .sep{ margin: 0 6px; opacity:.5; }

/* ---------- Hero ---------- */
.hero{
  background: var(--color-bg-lavender);
  position: relative; overflow:hidden;
  padding: 40px 0 60px;
}
.hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items:flex-start; position:relative; z-index:2; }
.hero h1{ font-size: 2.5rem; color: var(--color-dark); }
.hero .lead{ font-size: 1.08rem; color: var(--color-text-soft); max-width: 480px; }
.hero-badges{ display:flex; gap: 22px; flex-wrap:wrap; margin: 22px 0; font-size:.85rem; font-weight:600; color: var(--color-text-soft); }
.hero-badges span{ display:flex; align-items:center; gap:7px; }
.hero-checklist{ margin-top: 26px; }
.hero-checklist li{ display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; font-weight:600; font-size:.95rem; }
.hero-checklist li i{ color: var(--color-primary); margin-top:3px; }
.freshness-note{ margin-top:20px; font-size:.78rem; color: var(--color-text-soft); display:flex; align-items:center; gap:6px; }

@media (max-width: 860px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero h1{ font-size: 1.9rem; }
}

/* Rework #5 (plein largeur) : dès que le moteur JS a pris la main, la
   colonne d'intro (titre, texte, checklist) du .hero-grid est masquée, que
   ce soit pendant la saisie du formulaire ou sur le résultat, pour que le
   contenu utile (formulaire, puis résultat) occupe toute la largeur — cf.
   retour utilisateur : "prend toute la place en largeur ... et enlève ça"
   pour le résultat, et "fait une forme plus en largeur ... pour que
   l'utilisateur voie tout d'un coup" pour le formulaire. Le texte reste
   présent dans le HTML (SEO / dégradation propre sans JS), il est
   seulement masqué visuellement une fois le composant hydraté. */
.hero-grid.wiz-state-form,
.hero-grid.wiz-state-result{ grid-template-columns: 1fr; }
.hero-grid.wiz-state-form > div:not(.estimator-card),
.hero-grid.wiz-state-result > div:not(.estimator-card){ display:none; }
.hero-grid.wiz-state-form .estimator-card,
.hero-grid.wiz-state-result .estimator-card{ max-width: 900px; margin: 0 auto; width:100%; }
.hero-grid.wiz-state-result .estimator-card{ max-width: 980px; }

/* ---------- Estimator card / wizard ---------- */
.estimator-card{
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card-lg);
  padding: 30px; position: relative;
  min-height: 520px; /* réserve l'espace avant hydratation JS : limite le CLS (Core Web Vitals) */
}
.estimator-card .card-badge{ margin-bottom: 18px; }

/* Formulaire de saisie en une seule page (rework UX : plus de multi-étapes).
   Les sections (« 1. Acquisition », « 2. Revente »…) sont désormais des
   cartes disposées en grille qui se répartissent sur plusieurds colonnes
   dès que la largeur le permet (carte élargie en mode plein-largeur), pour
   que l'utilisateur voie plusieurs sections d'un coup au lieu d'empiler une
   longue colonne unique. Sur mobile / carte étroite, une seule colonne
   suffit automatiquement grâce à auto-fit. */
.form-hint-top{ font-size:.8rem; color: var(--color-text-soft); background: var(--color-bg-lavender); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 20px; }
.est-fullform-sections{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px 26px; align-items:start; }
.est-fullform-sections .est-section{
  margin-bottom: 0; padding: 22px 22px 20px; border-bottom:none;
  background: #FBFAFF; border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.est-optional-group{ margin-top: 6px; }
.est-optional-group summary{ cursor:pointer; font-weight:700; font-size:.85rem; color: var(--color-primary); list-style:none; padding: 8px 0; user-select:none; }
.est-optional-group summary i{ transition: transform .2s; font-size:.75rem; margin-right:4px; }
.est-optional-group[open] summary i{ transform: rotate(90deg); }
.est-optional-fields{ padding-top: 8px; }
.est-fullform-footer{ margin-top: 8px; }
.form-footnote{ font-size:.76rem; color: var(--color-text-soft); text-align:center; margin: 10px 0 0; }

.est-section-title{ font-size:1.05rem; font-weight:800; margin-bottom:16px; color: var(--color-dark); }
.est-field{ margin-bottom: 18px; }
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width:520px){ .contact-grid{ grid-template-columns: 1fr; } }
.est-field label{ display:flex; align-items:center; gap:6px; font-weight:700; font-size:.87rem; margin-bottom:7px; color: var(--color-dark); }
.est-field .req{ color: var(--color-primary); }
.est-field input[type="text"],
.est-field input[type="number"],
.est-field input[type="email"],
.est-field input[type="tel"],
.est-field input[type="month"],
.est-field input[type="date"],
.est-field select{
  width: 100%; padding: 13px 16px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border); font-family: var(--font-main);
  font-size: .95rem; background: #FBFAFF; color: var(--color-dark);
  transition: border-color .15s;
}
.est-field input:focus, .est-field select:focus{ outline:none; border-color: var(--color-primary); background:#fff; }
.est-field .field-hint{ font-size: .78rem; color: var(--color-text-soft); margin-top:6px; line-height:1.4; }
.est-field .unit-input{ position:relative; }
.est-field .unit-input span{ position:absolute; right:16px; top:50%; transform:translateY(-50%); color: var(--color-text-soft); font-size:.85rem; font-weight:600; }
.est-toggle-group{ display:flex; gap:8px; flex-wrap:wrap; }
.est-toggle-group button{
  flex:1; min-width: 110px; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border); background:#FBFAFF; font-weight:700; font-size:.85rem;
  cursor:pointer; color: var(--color-dark); transition: all .15s;
}
.est-toggle-group button.active{ background: var(--color-primary); border-color: var(--color-primary); color:#fff; }
.est-checkbox{ display:flex; align-items:flex-start; gap:10px; font-size:.83rem; color: var(--color-text-soft); margin-bottom:14px; }
.est-checkbox input{ margin-top:3px; width:16px; height:16px; accent-color: var(--color-primary); flex-shrink:0; }
.est-range-wrap{ display:flex; align-items:center; gap:14px; }
.est-range-wrap input[type="range"]{ flex:1; accent-color: var(--color-primary); height:6px; }
.est-range-wrap .est-range-value{ font-weight:800; color: var(--color-primary); font-size:.95rem; min-width:58px; text-align:right; }

.est-nav-buttons{ display:flex; justify-content:space-between; gap:12px; margin-top: 22px; }
.est-skip-link{ text-align:center; margin-top:14px; }

.field-error{ border-color: var(--color-red) !important; }
.field-error-msg{ color: var(--color-red); font-size:.76rem; margin-top:5px; display:none; }

/* ---------- Result blocks ---------- */
.result-block{ margin-bottom: 26px; }
.result-headline{ text-align:left; padding: 0; }
.result-headline .label{ font-size:.72rem; font-weight:700; color: var(--color-text-soft); text-transform:uppercase; letter-spacing:.03em; }
.result-headline .value{ font-size: 1.7rem; font-weight:800; color: var(--color-dark); margin: 4px 0 0; }
.result-headline .value.positive{ color: var(--color-green); }
.result-headline .value.negative{ color: var(--color-red); }

/* ---------- Barre de stats compacte (tableau de bord) ---------- */
/* Regroupe chiffre-clé + score + écart chiffré sur UNE ligne horizontale,
   fini l'empilement vertical : tout le résultat clé tient sans scroller. */
.stat-bar{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:16px; align-items:stretch; }
.stat-card{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md); padding:16px 18px; flex:1; min-width:150px; }
.stat-card-main{ background: var(--color-bg-lavender); border-color: var(--color-bg-lavender-2); }
.stat-card-secondary{ display:flex; flex-direction:column; justify-content:center; }
.stat-card-secondary .stat-card-label{ font-size:.72rem; font-weight:700; color: var(--color-text-soft); text-transform:uppercase; letter-spacing:.03em; }
.stat-card-secondary .stat-card-value{ font-size:1.5rem; font-weight:800; color: var(--color-primary-dark); margin-top:4px; }
.stat-card-secondary .stat-card-fun{ font-size:.74rem; color: var(--color-text-soft); margin-top:6px; font-weight:600; }
.stat-card-score{ display:flex; flex-direction:column; justify-content:center; min-width:170px; }
.stat-card-score .score-box{ background:none; padding:0; }
.stat-card-score .score-note{ display:none; } /* trop de texte pour le format compact */

.insight-strip{
  background: var(--color-orange-light); border-radius: var(--radius-sm);
  padding: 10px 16px; font-size: .82rem; font-weight: 700; color: var(--color-dark);
  text-align:center; border: 1px solid #F7D9BB; margin-bottom:16px;
}
.insight-strip b{ color: var(--color-red); }

.score-box{ background: var(--color-bg-lavender); border-radius: var(--radius-md); padding: 20px; }
.score-box .score-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; gap:8px; }
.score-box .score-top span:first-child{ font-size:.78rem; font-weight:700; color: var(--color-text-soft); }
.score-box .score-top .num{ font-size:1.3rem; font-weight:800; color: var(--color-primary); white-space:nowrap; }
.score-gauge{ height: 10px; border-radius: var(--radius-full); background: #DFDAF3; overflow:hidden; }
.score-gauge-fill{ height:100%; border-radius: var(--radius-full); background: linear-gradient(90deg,#D64545,#F0883E,#1F9254); }
.score-box .score-note{ font-size:.8rem; color: var(--color-text-soft); margin-top:10px; }
@media (max-width: 640px){ .stat-bar{ flex-direction:column; } }

.chart-wrap{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md); padding: 18px; }
.chart-wrap canvas{ max-height: 280px; }

.comparison-table{ width:100%; border-collapse: collapse; font-size:.88rem; }
.comparison-table th, .comparison-table td{ padding: 12px 14px; border-bottom: 1px solid var(--color-border); text-align:left; }
.comparison-table th{ background: var(--color-bg-lavender); font-weight:800; color:var(--color-dark); }
.comparison-table td.highlight, .comparison-table th.highlight{ background: var(--color-green-light); font-weight:700; }
.comparison-table tr:last-child td{ border-bottom:none; }

.verdict-box{
  background: var(--color-dark); color:#fff; border-radius: var(--radius-md);
  padding: 20px 22px; font-size: .95rem; font-weight:600; line-height:1.55;
}
.verdict-box b{ color: #B9AEFB; }

.alert-box{ background: var(--color-red-light); border:1px solid #F2C6C6; border-radius: var(--radius-md); padding:16px 18px; font-size:.88rem; font-weight:700; color:#8a2b2b; }
.exo-box{ background: var(--color-green-light); border:1px solid var(--color-green-pale); border-radius: var(--radius-md); padding:18px 20px; }
.exo-box .exo-title{ font-size:1.15rem; font-weight:800; color: var(--color-green); margin-bottom:6px; }

.levers-box{ border: 1.5px dashed var(--color-primary); border-radius: var(--radius-md); padding: 20px; background: #FBFAFF; }
.levers-box h4{ font-size: 1rem; margin-bottom:14px; }
.levers-box ul li{ display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; font-weight:600; font-size:.9rem; color: var(--color-text); flex-wrap:wrap; }
.levers-box ul li i{ color: var(--color-primary); }
.levers-box ul li .lock{ margin-left:auto; opacity:.5; }
.levers-box ul li .lever-teaser{ font-weight:800; color: var(--color-primary-dark); letter-spacing:.02em; background: var(--color-primary-light); border-radius: var(--radius-full); padding:2px 10px; font-size:.85rem; }

/* ---------- Chips de leviers (format compact dans la carte de conversion) ---------- */
.lever-chip-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:10px; margin: 14px 0 18px; }
.lever-chip{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-sm); padding:12px 14px; }
.lever-chip-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.lever-chip-top i:first-child{ color: var(--color-green); font-size:.85rem; }
.lever-chip-top i:last-child{ color: var(--color-text-soft); opacity:.5; font-size:.8rem; }
.lever-chip-text{ font-size:.78rem; font-weight:600; color: var(--color-text); line-height:1.3; }
.lever-chip-value{ font-size:.9rem; font-weight:800; color: var(--color-primary-dark); margin-top:4px; }
@media (max-width: 520px){ .lever-chip-grid{ grid-template-columns: 1fr; } }

.recall-box{ background:#fff; border:1.5px solid var(--color-border); border-radius: var(--radius-md); padding:18px 20px; }
.recall-box .row{ display:flex; gap:10px; margin-top:12px; }
.recall-box input{ flex:1; padding:12px 14px; border-radius: var(--radius-sm); border:1.5px solid var(--color-border); }

.limit-note{ font-size:.78rem; color: var(--color-text-soft); background: var(--color-bg-lavender); border-radius: var(--radius-sm); padding: 12px 16px; }

.thanks-panel{ text-align:center; padding: 20px 0; }
.thanks-panel i{ font-size:2.6rem; color: var(--color-green); margin-bottom:14px; }

/* ---------- Bloc de conversion : formulaire de contact unifié ---------- */
.conversion-block{ background:#fff; border-radius: var(--radius-lg); padding: 26px; border: 1.5px solid var(--color-primary-light); box-shadow: var(--shadow-card); margin-bottom:26px; }
.conv-badge{ display:inline-flex; align-items:center; gap:6px; background: var(--color-green-light); color: var(--color-green); font-weight:700; font-size:.74rem; padding:5px 12px; border-radius: var(--radius-full); margin-bottom:12px; text-transform:uppercase; letter-spacing:.02em; }
.conversion-block h4{ font-size:1.15rem; margin-bottom:16px; line-height:1.3; }
.conversion-block .est-field{ margin-bottom:14px; }
.conversion-block .btn-block{ margin-top:6px; }

/* Colonne gauche (leviers + caution expert) / colonne droite (formulaire) —
   inspiré de la maquette de référence : les leviers et la caution d'expert
   sont mis en avant à gauche, le formulaire de collecte à droite. Se replie
   en une seule colonne sur tablette/mobile. */
.conv-columns{ display:grid; grid-template-columns: .95fr 1.05fr; gap: 28px; align-items:start; }
.conv-col-left{ display:flex; flex-direction:column; gap:16px; }
@media (max-width: 860px){ .conv-columns{ grid-template-columns: 1fr; gap:20px; } }
.palier-slots{ display:flex; gap:8px; flex-wrap:wrap; }
.palier-slots button{
  flex:1; min-width: 100px; padding: 12px 10px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border); background:#fff; font-weight:700; font-size:.85rem;
  cursor:pointer; color: var(--color-dark); transition: all .15s;
}
.palier-slots button.active{ background: var(--color-primary); border-color: var(--color-primary); color:#fff; }
@media (max-width: 480px){
  .palier-slots{ display:flex; flex-direction:column; gap:8px; }
  .palier-slots button{ flex:none; min-width: 0; width:100%; box-sizing:border-box; }
}
.conversion-block .est-skip-link a{ font-size:.82rem; }

/* Caution d'expert : justifie la demande du téléphone en la reliant à une
   vérification humaine du calcul, plutôt qu'à un simple rappel commercial. */
.expert-caution{ display:flex; align-items:center; gap:12px; background: var(--color-bg-lavender); border-radius: var(--radius-md); padding:12px 14px; margin: 4px 0 14px; }
.expert-caution .avatar{ width:38px; height:38px; border-radius:50%; background: var(--color-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.95rem; flex-shrink:0; }
.expert-caution .txt{ font-size:.8rem; color: var(--color-text-soft); line-height:1.4; }
.expert-caution .txt b{ color: var(--color-dark); }

/* Bloc téléphone : champ standard requis (plus de case "optionnel" qui
   faisait chuter la collecte de numéros) — toujours visible, jamais masqué. */
.tel-block{ margin: 4px 0 16px; padding-top: 12px; border-top: 1px dashed var(--color-border); }
.tel-block-note{ font-size:.78rem; color: var(--color-text-soft); margin: 4px 0 12px; }
.tel-block-note i{ color: var(--color-primary); margin-right:5px; }

/* Bandeau de confiance sous le bouton d'envoi (sécurité RGPD, avis experts) */
.trust-row{ display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:12px; font-size:.74rem; color: var(--color-text-soft); font-weight:600; }
.trust-row i{ color: var(--color-primary); margin-right:5px; }

/* ---------- Stat band ---------- */
.stat-band{ background:#fff; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); }
.stat-band .container{ display:flex; align-items:center; justify-content:space-between; padding: 34px 24px; flex-wrap:wrap; gap: 24px; }
.stat-item .num{ font-size: 2.3rem; font-weight:800; color: var(--color-dark); }
.stat-item .label{ font-size:.82rem; color: var(--color-text-soft); font-weight:600; max-width:160px; }
.stat-cta{ text-align:right; }
.stat-cta p{ font-weight:700; margin-bottom:10px; }

/* ---------- How it works cards ---------- */
.how-grid{ grid-template-columns: repeat(3,1fr); }
.how-card{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: 26px; }
.how-card .icon{ width:52px; height:52px; border-radius:14px; background: var(--color-primary-light); display:flex; align-items:center; justify-content:center; color: var(--color-primary); font-size:1.4rem; margin-bottom:16px; }
.how-card h3{ font-size:1.05rem; }
.how-card p{ font-size:.88rem; color: var(--color-text-soft); margin-bottom:0; }

/* ---------- Numbered steps grid (6) ---------- */
.steps-grid{ grid-template-columns: repeat(3,1fr); }
.step-card{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: 26px; }
.step-card .step-num{ font-size:2.2rem; font-weight:800; color: var(--color-dark); margin-bottom:10px; }
.step-card h3{ font-size:1.02rem; }
.step-card p{ font-size:.86rem; color: var(--color-text-soft); }

/* ---------- Essentiel (GEO block) ---------- */
.essentiel-box{ background: var(--color-bg-lavender); border-radius: var(--radius-lg); padding: 34px; }
.essentiel-box ul li{ display:flex; gap:12px; margin-bottom:16px; font-size:.96rem; line-height:1.55; }
.essentiel-box ul li:last-child{ margin-bottom:0; }
.essentiel-box ul li i{ color: var(--color-primary); margin-top:5px; flex-shrink:0; }

/* ---------- Sommaire ancres ---------- */
.toc-box{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: 26px 30px; }
.toc-box ol{ list-style: none; counter-reset: toc; padding:0; margin:0; columns: 2; column-gap: 40px;}
.toc-box li{ counter-increment: toc; margin-bottom: 12px; font-weight:700; font-size:.92rem; }
.toc-box li a{ color: var(--color-dark); }
.toc-box li a:hover{ color: var(--color-primary); }
.toc-box li::before{ content: counter(toc) ". "; color: var(--color-primary); }
@media (max-width:700px){ .toc-box ol{ columns:1; } }

/* ---------- Guide content ---------- */
.guide-article h3{ font-size: 1.3rem; margin-top: 40px; scroll-margin-top: 100px; }
.guide-article h4{ font-size: 1.05rem; margin-top: 24px; }
.guide-article p, .guide-article li{ font-size: .98rem; color: var(--color-text); }
.guide-article table{ width:100%; border-collapse:collapse; margin: 20px 0; font-size:.9rem; }
.guide-article table th, .guide-article table td{ padding:10px 14px; border:1px solid var(--color-border); text-align:left; }
.guide-article table th{ background: var(--color-bg-lavender); }
.guide-article blockquote{ border-left:4px solid var(--color-primary); padding: 4px 20px; margin: 20px 0; background: var(--color-bg-lavender); border-radius: 0 12px 12px 0; font-weight:600; }
.guide-article ul{ list-style: none; margin:16px 0; }
.guide-article ul li{ position:relative; padding-left:22px; margin-bottom:8px; }
.guide-article ul li::before{ content:"•"; color: var(--color-primary); font-weight:900; position:absolute; left:2px; }

.situation-cards{ grid-template-columns: repeat(3,1fr); margin-top: 20px; }
.situation-card{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md); padding:22px; }
.situation-card b{ display:block; margin-bottom:8px; color: var(--color-primary-dark); }
.situation-card p{ font-size:.87rem; color: var(--color-text-soft); margin:0; }

.example-table{ width:100%; border-collapse:collapse; font-size:.92rem; background:#fff; border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-card); }
.example-table th, .example-table td{ padding: 13px 18px; border-bottom:1px solid var(--color-border); }
.example-table th{ background: var(--color-dark); color:#fff; }
.example-table tr:last-child td{ border-bottom:none; }
.example-table td.total{ font-weight:800; background: var(--color-bg-lavender); }

.cas-particuliers details{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px 20px; margin-bottom:12px; }
.cas-particuliers summary{ font-weight:700; cursor:pointer; font-size:.96rem; }
.cas-particuliers p{ margin-top:10px; font-size:.9rem; color: var(--color-text-soft); }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--color-border); padding: 18px 0; }
.faq-q{ display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:700; font-size:.98rem; gap:16px; }
.faq-q i{ transition: transform .2s; color: var(--color-primary); flex-shrink:0; }
.faq-item.open .faq-q i{ transform: rotate(45deg); }
.faq-a{ display:none; padding-top:12px; font-size:.92rem; color: var(--color-text-soft); }
.faq-item.open .faq-a{ display:block; }

/* ---------- Comparatif régimes (checklist style) ---------- */
.regime-compare{ grid-template-columns: 1fr 1fr; align-items:stretch; }
.regime-col{ border-radius: var(--radius-lg); padding: 30px; }
.regime-col.win{ background: var(--color-green-light); border: 1.5px solid var(--color-green-pale); }
.regime-col.lose{ background:#fff; border: 1.5px solid var(--color-border); }
.regime-col h3{ text-align:center; font-size:1.1rem; }
.regime-col ul li{ display:flex; align-items:center; gap:10px; padding:10px 0; font-weight:600; font-size:.92rem; border-bottom: 1px solid rgba(0,0,0,.05); }
.regime-col.win ul li i{ color: var(--color-green); }
.regime-col.lose ul li i{ color: #B7C3D9; }

/* ---------- Testimonials ---------- */
.testimonial-grid{ grid-template-columns: repeat(3,1fr); }
.testimonial-card{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; }
.testimonial-card .stars{ color:#F5B94A; margin-bottom:10px; letter-spacing:2px; }
.testimonial-card p{ font-size:.9rem; color: var(--color-text-soft); }
.testimonial-card .who{ font-weight:800; font-size:.88rem; margin-top:10px; }
.rating-badge{ display:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-full); padding:10px 18px; font-weight:700; font-size:.85rem; }

/* ---------- Cards grid other estimators ---------- */
.tool-card{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; transition: box-shadow .2s, transform .2s; display:flex; flex-direction:column; height:100%; }
.tool-card:hover{ box-shadow: var(--shadow-card-lg); transform: translateY(-3px); }
.tool-card .icon{ width:46px; height:46px; border-radius:12px; background: var(--color-primary-light); color:var(--color-primary); display:flex; align-items:center; justify-content:center; font-size:1.25rem; margin-bottom:14px; }
.tool-card h3{ font-size:1rem; }
.tool-card p{ font-size:.85rem; color: var(--color-text-soft); flex:1; }
.tool-card .meta{ display:flex; justify-content:space-between; font-size:.78rem; color: var(--color-text-soft); font-weight:700; margin-top:10px; }
.tool-card .meta .time{ color: var(--color-primary); }

/* ---------- Final CTA ---------- */
.cta-final{ background: var(--color-primary); border-radius: var(--radius-lg); padding: 46px; color:#fff; text-align:center; }
.cta-final h2{ color:#fff; }
.cta-final .btns{ display:flex; gap:14px; justify-content:center; margin-top:20px; flex-wrap:wrap; }
.cta-final .btn-outline{ border-color: rgba(255,255,255,.4); color:#fff; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--color-dark); color: #C9C6DC; padding: 56px 0 26px; }
.site-footer h4{ color:#fff; font-size:.95rem; margin-bottom:16px; }
.site-footer ul li{ margin-bottom:10px; font-size:.87rem; }
.site-footer ul li a:hover{ color:#fff; }
.footer-grid{ grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:36px; padding-top:22px; font-size:.78rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ---------- Author box ---------- */
.author-box{ display:flex; gap:16px; align-items:center; background: var(--color-bg-lavender); border-radius: var(--radius-md); padding:20px; }
.author-box .avatar{ width:52px; height:52px; border-radius:50%; background: var(--color-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.1rem; flex-shrink:0; }
.author-box .meta{ font-size:.8rem; color: var(--color-text-soft); }
.author-box b{ display:block; font-size:.92rem; color:var(--color-dark); }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .grid-2, .grid-3, .grid-4, .grid-5, .how-grid, .steps-grid, .situation-cards, .testimonial-grid, .footer-grid, .regime-compare{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .grid-2, .grid-3, .grid-4, .grid-5, .how-grid, .steps-grid, .situation-cards, .testimonial-grid, .footer-grid, .regime-compare{ grid-template-columns: 1fr; }
  .stat-band .container{ justify-content:center; text-align:center; }
  .stat-cta{ text-align:center; width:100%; }
  .est-nav-buttons{ flex-direction:column-reverse; }
  .cta-final{ padding: 30px 22px; }
  .hero h1{ font-size: 1.6rem; }
  .result-headline .value{ font-size: 2rem; }
}