/* ============================================================
   ROBOT-TONTE V2 — Thème inspiré de meilleurs-robot-tondeuse.com
   Palette : vert #228B22, slate #4B566B, orange #ED942F, fond blanc
   Typo : Rubik (titres) + Inter (corps)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --grn:#228B22; --grn-d:#1c7a1c; --grn-dd:#176617;
  --hero1:#0f3d22; --hero2:#1d6b34; --hero3:#2e8b46;
  --slate:#4B566B; --slate-d:#373F50; --ink:#1A1A2E;
  --orange:#ED942F; --orange-d:#d97e1a;
  --bg:#ffffff; --bg-alt:#f5f7f9; --bg-soft:#eef2f5;
  --bd:#e5e9ef; --bd-soft:#eef1f5;
  --muted:#6b7280; --muted-2:#9aa3af;
  --rad:8px; --rad-sm:6px; --rad-lg:14px;
  --sh:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.05);
  --sh-md:0 4px 14px rgba(16,24,40,.08);
  --sh-lg:0 18px 40px rgba(16,24,40,.12);
  --fdisplay:'Rubik',system-ui,sans-serif;
  --fbody:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
body.rtv2{margin:0;font-family:var(--fbody);color:var(--ink);background:var(--bg);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.rtv2 h1,.rtv2 h2,.rtv2 h3,.rtv2 h4{font-family:var(--fdisplay);color:var(--ink);line-height:1.2;margin:0}
.rtv2 a{color:var(--ink);text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.sec{padding:56px 0}
.sec-alt{background:var(--bg-alt)}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grn)}
.sec-head{text-align:center;max-width:680px;margin:0 auto 36px}
.sec-head h2{font-size:2rem;font-weight:800;margin:.4rem 0}
.sec-head p{color:var(--muted);margin:0}
@media(max-width:640px){.sec-head h2{font-size:1.6rem}.sec{padding:40px 0}}

/* ---- Boutons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--fbody);font-weight:700;font-size:.95rem;border-radius:var(--rad-sm);padding:.7rem 1.3rem;cursor:pointer;border:1.5px solid transparent;transition:all .15s;text-decoration:none;line-height:1}
.btn-grn{background:var(--grn);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 2px rgba(0,0,0,.1)}
.btn-grn:hover{background:var(--grn-d);color:#fff}
.btn-org{background:transparent;color:var(--orange);border-color:var(--orange)}
.btn-org:hover{background:var(--orange);color:#fff}
.btn-ghost{background:#fff;color:var(--slate);border-color:var(--bd)}
.btn-ghost:hover{border-color:var(--slate);color:var(--ink)}
.btn-white{background:#fff;color:var(--grn-dd)}
.btn-white:hover{background:#f0f4f0}
.btn-lg{padding:.95rem 1.8rem;font-size:1.05rem}
.btn-block{width:100%}

/* ---- Top bar + nav ---- */
.topbar{background:#fff;border-bottom:1px solid var(--bd)}
.topbar .row{display:flex;align-items:center;gap:1rem;height:68px}
.brand{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.brand .ic{width:38px;height:38px;border-radius:9px;background:linear-gradient(135deg,var(--grn),#3aa83a);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.3rem}
.brand b{font-family:var(--fdisplay);font-weight:800;font-size:1.12rem;color:var(--ink);line-height:1}
.brand small{display:block;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);font-weight:600;margin-top:2px}
.topbar .spacer{flex:1}
.nav{background:#fff;border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:40;box-shadow:var(--sh)}
.nav .row{display:flex;align-items:center;gap:.6rem;height:62px}
.nav .brand-link{flex-shrink:0;display:flex;align-items:center}
.nav-links{display:flex;align-items:center;gap:.05rem;flex:1;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.nav-links::-webkit-scrollbar{display:none}
.nav a{font-size:.875rem;font-weight:600;color:var(--slate);padding:.5rem .5rem;border-radius:6px;white-space:nowrap;text-decoration:none}
.nav a:hover{color:var(--grn);background:var(--bg-alt)}
.nav .cta{flex-shrink:0;background:var(--grn);color:#fff;margin-left:.3rem}
.nav .cta:hover{background:var(--grn-d);color:#fff}
/* bouton hamburger (mobile/tablette) — masqué sur grand écran */
.nav-burger{display:none;flex-shrink:0;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:none;border:1px solid var(--bd);border-radius:9px;color:var(--ink);font-size:1.4rem;line-height:1;cursor:pointer}
.nav-burger:hover{background:var(--bg-alt)}
@media(max-width:1100px){
  .nav .row{position:relative;flex-wrap:nowrap}
  .nav-burger{display:inline-flex;order:3}
  .nav .cta{order:2;margin-left:auto}
  .nav-links{position:absolute;top:100%;left:0;right:0;flex:none;flex-direction:column;align-items:stretch;gap:0;overflow:visible;background:#fff;border-bottom:1px solid var(--bd);box-shadow:0 14px 28px rgba(5,14,9,.12);padding:.4rem .7rem .7rem;max-height:calc(100vh - 56px);overflow-y:auto;display:none}
  .nav.open .nav-links{display:flex}
  .nav-links a{font-size:.98rem;padding:.8rem .6rem;border-bottom:1px solid var(--bg-alt)}
  .nav-links a:last-child{border-bottom:none}
}
@media(max-width:860px){.nav .row{height:56px;gap:.5rem}.nav .cta{padding:.45rem .8rem;font-size:.82rem}}
/* CTA cloné en tête du menu déroulant (téléphones) — masqué par défaut */
.nav-menu-cta{display:none}
@media(max-width:600px){
  .nav .row{display:grid;grid-template-columns:1fr auto;column-gap:.5rem;align-items:center}
  .nav .row > .cta{display:none}                 /* on retire le CTA de la barre sur petit écran */
  .nav .brand-link{min-width:0}                  /* autorise la 1re colonne à rétrécir */
  .nav-links .nav-menu-cta{display:block;width:100%;text-align:center;border-bottom:none!important;margin:.15rem 0 .5rem;color:#fff;order:-1}
  .nav-burger{position:static;transform:none;margin:0;justify-self:end;width:40px;height:40px;font-size:1.3rem}
}

/* ---- Hero ---- */
.hero{background:linear-gradient(135deg,var(--hero1),var(--hero2) 55%,var(--hero3));color:#fff;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 80% 10%,rgba(255,255,255,.08),transparent 60%);pointer-events:none}
.hero .row{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:64px 0;position:relative;z-index:1}
.hero h1{color:#fff;font-size:2.9rem;font-weight:800;letter-spacing:-.5px}
.hero p{color:rgba(255,255,255,.82);font-size:1.12rem;margin:1rem 0 1.6rem;max-width:34rem}
.hero .pills{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.4rem}
.hero .pill{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:.8rem;font-weight:600;padding:.35rem .8rem;border-radius:999px}
.hero .cta-row{display:flex;gap:.8rem;flex-wrap:wrap}
/* carte lead dans le hero */
.lead-card{background:#fff;border-radius:var(--rad-lg);box-shadow:var(--sh-lg);padding:26px;color:var(--ink)}
.lead-card h3{font-size:1.3rem;font-weight:800;margin-bottom:.3rem}
.lead-card .sub{color:var(--muted);font-size:.92rem;margin-bottom:1rem}
.lead-card form{display:grid;gap:.6rem}
.lead-card input,.lead-card select{width:100%;padding:.75rem .9rem;border:1.5px solid var(--bd);border-radius:var(--rad-sm);font-size:.95rem;font-family:var(--fbody)}
.lead-card input:focus,.lead-card select:focus{outline:none;border-color:var(--grn);box-shadow:0 0 0 3px rgba(34,139,34,.12)}
.lead-card .mini{font-size:.74rem;color:var(--muted-2);text-align:center;margin-top:.3rem}
.trust{display:flex;gap:1.4rem;margin-top:1.5rem;flex-wrap:wrap}
.trust div{display:flex;align-items:center;gap:.45rem;color:rgba(255,255,255,.9);font-size:.85rem;font-weight:600}
.trust .dot{width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:.7rem}
@media(max-width:900px){.hero .row{grid-template-columns:1fr;padding:44px 0}.hero h1{font-size:2.2rem}}

/* ---- Cartes produit (top sélection) ---- */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.prod-card{background:#fff;border:1px solid var(--bd);border-radius:var(--rad);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s;position:relative}
.prod-card:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}
.prod-card .tag{position:absolute;top:10px;left:10px;background:var(--orange);color:#fff;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:.25rem .55rem;border-radius:5px;z-index:2}
.prod-card .tag.best{background:var(--grn)}
.prod-card .img{height:150px;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;padding:14px}
.prod-card .img img{max-height:120px;max-width:100%;object-fit:contain}
.prod-card .body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.prod-card .name{font-family:var(--fdisplay);font-weight:700;font-size:1.02rem;margin-bottom:.3rem}
.prod-card .stars{color:#f5a623;font-size:.9rem;margin-bottom:.5rem}
.prod-card .stars span{color:var(--muted-2);font-size:.8rem;margin-left:.3rem}
.prod-card ul{list-style:none;padding:0;margin:0 0 .8rem;font-size:.82rem;color:var(--slate)}
.prod-card li{padding:.15rem 0 .15rem 1.1rem;position:relative}
.prod-card li::before{content:"✓";position:absolute;left:0;color:var(--grn);font-weight:700}
.prod-card .price{font-family:var(--fdisplay);font-weight:800;font-size:1.25rem;color:var(--ink);margin-top:auto}
.prod-card .price small{font-size:.72rem;color:var(--muted-2);font-weight:500}
.prod-card .acts{display:grid;gap:.45rem;margin-top:.7rem}
.score{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:46px;height:46px;border-radius:10px;background:var(--grn);color:#fff;font-family:var(--fdisplay);font-weight:800;line-height:1;position:absolute;top:10px;right:10px}
.score b{font-size:1.05rem}.score small{font-size:.55rem;opacity:.85;font-weight:600}
@media(max-width:1000px){.prod-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.prod-grid{grid-template-columns:1fr}}

/* ---- Cartes comparatif par jardin ---- */
.cmp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cmp-card{background:#fff;border:1px solid var(--bd);border-radius:var(--rad);padding:22px;transition:all .15s;display:block}
.cmp-card:hover{box-shadow:var(--sh-md);border-color:#cfe6cf;transform:translateY(-2px)}
.cmp-card .ic{width:46px;height:46px;border-radius:11px;background:rgba(34,139,34,.1);color:var(--grn);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:.8rem}
.cmp-card h3{font-size:1.12rem;font-weight:700;margin-bottom:.35rem}
.cmp-card p{color:var(--muted);font-size:.9rem;margin:0 0 .8rem}
.cmp-card .lnk{color:var(--grn);font-weight:700;font-size:.88rem}
@media(max-width:900px){.cmp-grid{grid-template-columns:1fr}}

/* ---- Bandeau lead (vert) ---- */
.lead-band{background:linear-gradient(135deg,var(--hero1),var(--hero3));border-radius:var(--rad-lg);color:#fff;padding:38px 40px;display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:center;position:relative;overflow:hidden}
.lead-band h2{color:#fff;font-size:1.8rem;font-weight:800}
.lead-band p{color:rgba(255,255,255,.85);margin:.6rem 0 0}
.lead-band .bx{background:#fff;border-radius:var(--rad);padding:18px}
.lead-band .bx form{display:grid;gap:.55rem}
.lead-band .bx input{width:100%;padding:.72rem .9rem;border:1.5px solid var(--bd);border-radius:var(--rad-sm);font-size:.95rem;font-family:var(--fbody)}
@media(max-width:760px){.lead-band{grid-template-columns:1fr;padding:28px 22px}}

/* ---- Cartes articles ---- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post-card{background:#fff;border:1px solid var(--bd);border-radius:var(--rad);overflow:hidden;display:flex;flex-direction:column;transition:all .15s}
.post-card:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}
.post-card .img{height:180px;background:var(--bg-soft);overflow:hidden}
.post-card .img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.post-card:hover .img img{transform:scale(1.05)}
.post-card .body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.cat-label{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--grn);margin-bottom:.4rem}
.post-card h3{font-size:1.05rem;font-weight:700;line-height:1.3;margin-bottom:.5rem}
.post-card .meta{margin-top:auto;font-size:.78rem;color:var(--muted-2);display:flex;align-items:center;gap:.4rem}
.post-card .meta .au{color:var(--slate);font-weight:600}
@media(max-width:900px){.post-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.post-grid{grid-template-columns:1fr}}

/* ---- Expertises (4 colonnes) ---- */
.exp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.exp{text-align:left}
.exp .ic{width:52px;height:52px;border-radius:13px;background:rgba(34,139,34,.1);color:var(--grn);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:.9rem}
.exp h3{font-size:1.08rem;font-weight:700;margin-bottom:.4rem}
.exp p{color:var(--muted);font-size:.9rem;margin:0}
@media(max-width:860px){.exp-grid{grid-template-columns:1fr 1fr}}

/* ---- FAQ ---- */
.faq{max-width:780px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--bd);border-radius:var(--rad);margin-bottom:.7rem;overflow:hidden}
.faq summary{cursor:pointer;padding:1.1rem 1.3rem;font-family:var(--fdisplay);font-weight:700;font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--grn);font-size:1.4rem;font-weight:700;flex-shrink:0}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 1.3rem 1.2rem;color:var(--slate);font-size:.95rem}

/* ---- Footer ---- */
.ftr{background:var(--slate-d);color:#cfd4dd;padding:54px 0 26px;font-size:.9rem}
.ftr a{color:#cfd4dd}.ftr a:hover{color:#fff}
.ftr .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr;gap:36px;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.1)}
.ftr h4{color:#fff;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1rem}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{margin-bottom:.5rem}
.ftr .brand b{color:#fff}.ftr .brand small{color:#9aa3af}
.ftr .news input{width:100%;padding:.65rem .8rem;border:none;border-radius:6px;margin-bottom:.5rem;font-family:var(--fbody)}
.ftr .bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-top:22px;color:#9aa3af;font-size:.82rem}
@media(max-width:820px){.ftr .cols{grid-template-columns:1fr 1fr}}

/* ---- Logo robot-tonte (conservé) ---- */
.site-logo{font-family:var(--fdisplay);font-weight:800;font-size:1.22rem;color:var(--ink);letter-spacing:-.02em;white-space:nowrap}
.logo-dot{display:inline-block;width:8px;height:8px;background:var(--grn);border-radius:50%;margin-left:1px;vertical-align:baseline}
.ftr .site-logo{color:#fff}

/* ---- Formulaire lead : consentement + 2 étapes ---- */
.v2-consent{display:flex;align-items:flex-start;gap:.5rem;font-size:.73rem;color:var(--muted);line-height:1.45;cursor:pointer;text-align:left}
.v2-consent input{width:auto!important;min-height:auto!important;margin-top:2px;flex-shrink:0;accent-color:var(--grn)}
.v2-consent a{color:var(--grn);text-decoration:underline}
.v2-step2{display:none}
.v2-step2 .hint{font-weight:700;margin:.1rem 0 .6rem;font-size:.95rem}
.v2-ok{display:none;background:#eef9ee;border:1px solid #cfe8cf;color:#176617;border-radius:var(--rad);padding:16px;font-weight:600;text-align:center}

/* ---- MOBILE : optimisation poussée (formulaire prioritaire) ---- */
.rtv2 input,.rtv2 select,.rtv2 textarea{font-size:16px;min-height:48px}
.rtv2 .btn{min-height:48px}
.rtv2 .btn-lg{min-height:54px}
@media(max-width:900px){
  .hero .row{padding:26px 0 30px;gap:18px}
  .hero h1{font-size:1.78rem}
  .hero p{font-size:1rem;margin:.6rem 0 .9rem}
  .hero .pills{gap:.4rem;margin-bottom:1rem}
  .hero .pill{font-size:.72rem;padding:.3rem .65rem}
  /* sur mobile le FORMULAIRE est l'action principale : on masque les CTA secondaires et la ligne de confiance pour le remonter */
  .hero .cta-row,.hero .trust{display:none}
  .lead-card{padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
  .lead-card h3{font-size:1.18rem}
  .nav .row{height:56px}
  .topbar .row{height:58px}
  .topbar .btn{padding:.55rem .9rem;font-size:.85rem}
  .sec-head h2{font-size:1.5rem}
}
@media(max-width:420px){
  .hero h1{font-size:1.55rem}
  .lead-card .v2-step1 > div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
}

/* ============================================================
   OVERRIDE — re-skin des pages de contenu existantes (Tailwind)
   chargé APRÈS tailwind.min.css : harmonise polices, accents,
   et masque l'ancien header/footer (remplacés par les blocs V2).
   ============================================================ */
:root{
  --font-display:'Rubik',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
/* ancien header/footer/scroll -> masqués (remplacés par V2) */
.navbar,#mobile-menu,.mobile-menu,.footer,#scroll-top,.scroll-top{display:none!important}
/* boutons du site -> vert V2 */
.btn-primary{background:#228B22!important;color:#fff!important;border-radius:6px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 2px rgba(0,0,0,.12)!important;font-family:var(--font-body)!important;letter-spacing:0!important}
.btn-primary:hover{background:#1c7a1c!important;box-shadow:0 2px 8px rgba(34,139,34,.3)!important}
.btn-secondary{border-radius:6px!important}
/* le header V2 injecté est sticky ; on neutralise un éventuel double sticky */
body > .nav{position:sticky;top:0}

/* ============================================================
   COHÉRENCE TOTALE — re-skin profond du contenu façon "home"
   ============================================================ */
/* Typo & couleurs de base */
body{color:#2b3340}
h1,h2,h3,h4,.font-display{font-family:'Rubik',system-ui,sans-serif!important;letter-spacing:-.01em}
.text-forest-900{color:#1A1A2E!important}
.text-forest-800{color:#26303f!important}
.text-forest-700{color:#228B22!important}      /* liens contenu -> vert */
.section-tag{color:#228B22!important;font-weight:700;letter-spacing:.06em;text-transform:uppercase}

/* HÉROS (articles + fiches) -> dégradé V2 propre */
.hero-gradient{background:linear-gradient(135deg,#0f3d22 0,#1d6b34 55%,#2e8b46 100%)!important}
.hero-gradient .badge{backdrop-filter:none}

/* CARTES -> blanc, bord léger, ombre douce, arrondi V2 */
.card{background:#fff!important;border:1px solid #e5e9ef!important;border-radius:10px!important;
  box-shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.04)!important}
.card:hover{box-shadow:0 4px 14px rgba(16,24,40,.08)!important}

/* TABLEAUX -> en-tête slate V2, bords nets, arrondi */
.bg-forest-900{background-color:#373F50!important}
.border-warm-200{border-color:#e5e9ef!important}
.overflow-x-auto{border-radius:10px!important}
table th{font-family:'Inter',sans-serif!important;font-weight:600}

/* ENCADRÉS info/avertissement/reco -> tons doux V2 */
.bg-blue-50{background-color:#eff5ff!important}.border-blue-200{border-color:#d3e3ff!important}
.bg-amber-50{background-color:#fff8ec!important}.border-amber-200{border-color:#ffe6bf!important}
.bg-lime\/5{background-color:rgba(34,139,34,.06)!important}
.border-lime\/20{border-color:rgba(34,139,34,.28)!important}
.border-lime\/30{border-color:rgba(34,139,34,.35)!important}
.bg-lime\/10{background-color:rgba(34,139,34,.1)!important}

/* BADGES -> pastilles V2 nettes */
.badge{border-radius:6px!important;font-weight:700;letter-spacing:.02em;padding:.2rem .55rem}
.badge-green{background:rgba(34,139,34,.12)!important;color:#176617!important}
.badge-purple{background:#efeaff!important;color:#5b3aa8!important}
.badge-blue{background:#e7f0ff!important;color:#2a5db0!important}
.badge-gray{background:#eef1f5!important;color:#4b566b!important}
.badge-cyan{background:#e2f6fb!important;color:#1d7d96!important}
.badge-red{background:#ffeaea!important;color:#b3261e!important}

/* Liens génériques du corps d'article -> vert (hors boutons/badges) */
main article a:not(.btn-primary):not(.btn-secondary):not(.badge):not([class*="card"]){color:#228B22}
main article a:not(.btn-primary):not(.btn-secondary):not(.badge):hover{text-decoration:underline}

/* Boutons secondaires foncés -> style V2 */
.btn-secondary{font-family:'Inter',sans-serif!important;border-radius:6px!important}

/* Sommaire / breadcrumb -> léger */
.breadcrumb{font-family:'Inter',sans-serif}
aside .card,aside.card{border-radius:10px!important}

/* Espacement de lecture plus aéré */
main article p{line-height:1.75}

/* ============================================================
   CTA in-article : formulaire de capture (le plus visible)
   ============================================================ */
.art-lead{position:relative;background:#fff;border:1px solid var(--bd);border-top:4px solid var(--grn);
  border-radius:16px;box-shadow:0 14px 40px rgba(20,40,25,.10);padding:22px 22px 18px;margin:26px 0 30px}
.art-lead .al-badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--grn);color:#fff;
  font-weight:800;font-size:.72rem;letter-spacing:.02em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px;margin-bottom:.7rem}
.art-lead h3{font-family:var(--fdisplay);font-size:1.28rem;font-weight:800;color:var(--ink);line-height:1.25;margin:.1rem 0 .35rem}
.art-lead .al-sub{color:var(--muted);font-size:.93rem;line-height:1.5;margin-bottom:1rem}
.art-lead form{display:grid;gap:.6rem}
.art-lead input,.art-lead select{width:100%;padding:.78rem .9rem;border:1.5px solid var(--bd);border-radius:10px;
  font-size:16px;font-family:var(--fbody);background:#fff;color:var(--ink)}
.art-lead input:focus,.art-lead select:focus{outline:none;border-color:var(--grn);box-shadow:0 0 0 3px rgba(34,139,34,.12)}
.art-lead .mini{font-size:.74rem;color:var(--muted-2);text-align:center;margin-top:.35rem}
.art-lead .al-trust{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.76rem;color:var(--muted);margin-top:.7rem;justify-content:center}
.art-lead .al-trust span{display:inline-flex;align-items:center;gap:.3rem}
.art-lead .v2-step2{display:none}
.art-lead .v2-ok{display:none;background:#eef9ee;border:1px solid #cfe8cf;color:#176617;border-radius:12px;padding:16px;font-weight:600;text-align:center}

/* ============================================================
   CTA de fin : quiz surface « En 30 secondes » + comparateur
   ============================================================ */
.surf-quiz{background:linear-gradient(135deg,#10331b 0%,#1f5130 100%);color:#fff;border-radius:18px;
  padding:26px 24px;margin:34px 0 14px;text-align:center}
.surf-quiz .sq-eyebrow{font-weight:800;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:#BEFF3B;margin-bottom:.5rem}
.surf-quiz h3{font-family:var(--fdisplay);font-size:1.45rem;font-weight:800;margin-bottom:1.1rem;line-height:1.25;color:#fff}
.surf-quiz .sq-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;max-width:560px;margin:0 auto 1rem}
.surf-quiz .sq-opts a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.22);border-radius:12px;padding:.85rem .5rem;
  color:#fff;text-decoration:none;font-weight:700;font-size:.95rem;transition:all .15s}
.surf-quiz .sq-opts a small{font-weight:500;font-size:.72rem;color:rgba(255,255,255,.65)}
.surf-quiz .sq-opts a:hover{background:var(--grn);border-color:var(--grn);transform:translateY(-2px)}
.surf-quiz .sq-note{font-size:.86rem;color:rgba(255,255,255,.72);margin-bottom:1rem;max-width:520px;margin-left:auto;margin-right:auto}
.surf-quiz .sq-cmp{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);
  color:#fff;text-decoration:none;font-weight:700;font-size:.9rem;padding:.6rem 1.3rem;border-radius:999px}
.surf-quiz .sq-cmp:hover{background:#fff;color:#10331b}
@media(max-width:560px){.surf-quiz .sq-opts{grid-template-columns:1fr}.surf-quiz h3{font-size:1.25rem}}

/* ============================================================
   Maillage interne : « À lire également »
   ============================================================ */
.art-xlink{background:#f6f8f5;border:1px solid var(--bd);border-left:4px solid var(--grn);
  border-radius:12px;padding:16px 18px;margin:26px 0}
.art-xlink .xl-h{font-weight:800;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--grn);margin-bottom:.5rem}
.art-xlink ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.art-xlink li a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;display:inline-flex;gap:.45rem;align-items:baseline}
.art-xlink li a::before{content:"→";color:var(--grn);font-weight:800}
.art-xlink li a:hover{color:var(--grn);text-decoration:underline}

/* ============================================================
   CONTRASTE DES BADGES / LABELS
   Problème : certains badges avaient un fond translucide (badge-green à 12%,
   badge-lime à 20%) ou indéfini (badge-amber/-warm) ou aucune couleur (.badge nu).
   Posés sur l'image sombre des cards d'articles, le texte foncé devenait illisible
   (texte foncé sur fond foncé). Solution : fonds OPAQUES + texte foncé contrasté,
   lisibles aussi bien sur fond blanc que sur image sombre.
   ============================================================ */
.badge{background:#eef1f5;color:#3a4252}                                  /* .badge sans variant : pilule grise lisible */
.badge-green{background:#dcfce7!important;color:#15663a!important}
.badge-lime{background:#eaf7cf!important;color:#3f6212!important}
.badge-amber{background:#fef3c7!important;color:#92400e!important}
.badge-yellow{background:#fef9c3!important;color:#854d0e!important}
.badge-orange{background:#ffedd5!important;color:#9a3412!important}
.badge-teal{background:#ccfbf1!important;color:#115e59!important}
.badge-warm{background:#f1ece4!important;color:#6b5848!important}
/* (badge-blue, -cyan, -gray, -purple, -red sont déjà opaques plus haut) */

/* Date / méta des cards un peu trop claires -> contraste renforcé */
.post-card .meta{color:var(--muted)}
.post-card .meta .au{color:var(--slate)}

/* ============================================================
   CONTRASTE — texte LIME (#BEFF3B) & CTA
   Le lime n'est lisible que sur fond SOMBRE. Partout où il est posé sur
   un fond clair (labels, icônes), on le passe en vert foncé. Et les CTA
   (liens) verts foncés passent de lime -> texte blanc.
   (le !important bat les styles inline qui n'ont pas de !important)
   ============================================================ */
/* 1. Label « Guide complet · juin 2026 » (.section-tag) : il est sur le hero SOMBRE,
   mais texte lime + pastille lime-teintée = même teinte (illisible). -> texte blanc,
   pastille lime un peu plus marquée + liseré pour bien la détacher. */
.section-tag{background:rgba(190,255,59,.18)!important;color:#fff!important;
  border:1px solid rgba(190,255,59,.45);border-radius:999px;padding:.28rem .8rem;
  font-weight:700;letter-spacing:.02em;display:inline-block}
/* 2. Icônes/texte lime à l'intérieur d'une pastille lime claire -> vert foncé */
[class*="bg-lime/"] .text-lime{color:#1f6b1f!important}
/* 3. CTA (liens/boutons) vert foncé : police lime -> blanche */
a.bg-forest-900.text-lime,a.bg-forest-800.text-lime,
button.bg-forest-900.text-lime,button.bg-forest-800.text-lime,
a.bg-gradient-to-r.text-lime{color:#fff!important}

/* ============================================================
   Sélecteur de surface (fiches produits) — .fiche-variants
   ============================================================ */
.fiche-variants .fv-label{font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem;display:flex;align-items:center;gap:.3rem}
.fiche-variants .fv-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.85rem}
.fv-chip{cursor:pointer;border:1.5px solid var(--bd);background:#fff;color:var(--ink);font-family:var(--fdisplay);font-weight:700;font-size:.82rem;padding:.38rem .7rem;border-radius:999px;transition:all .12s;line-height:1}
.fv-chip:hover{border-color:var(--grn)}
.fv-chip.active{background:var(--grn);color:#fff;border-color:var(--grn)}
.fiche-variants .fv-price{font-family:var(--fdisplay);font-weight:800;font-size:1.8rem;color:var(--ink);letter-spacing:-.02em}
.fiche-variants .fv-note{font-size:.74rem;color:var(--muted-2);margin-top:.15rem}