/* =====================================================================
   rt-plus.css : couche de design (octobre 2026), chargée APRÈS rt-v2.css.
   Règle d'or : uniquement de la présentation. Aucun texte, titre, lien ni
   balisage n'est modifié ; les pages gardent exactement leur contenu SEO.
   ===================================================================== */
:root{
  --p-ink:#10261a;--p-ink2:#3c4d42;--p-mute:#66736a;--p-paper:#f6f4ee;--p-tint:#e9efe0;
  --p-forest:#0f2d1c;--p-forest2:#173d27;--p-lime:#beff3b;--p-grn:#1f7a33;--p-line:#e4e2d8;
  --p-r:16px;--p-sh:0 1px 2px rgba(16,38,26,.06),0 10px 28px -18px rgba(16,38,26,.28);
  --p-ease:cubic-bezier(.16,1,.3,1)
}
/* ---------- Socle commun à toutes les pages ---------- */
html{scroll-padding-top:84px}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
::selection{background:var(--p-lime);color:var(--p-forest)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,textarea:focus-visible{outline:3px solid var(--p-lime)!important;outline-offset:3px;border-radius:8px}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
img{max-width:100%;height:auto}
/* « overflow-x:hidden » sur html/body (ancien correctif mobile) faisait de body un conteneur de
   défilement : plus aucun élément « sticky » ne tenait (sommaire). « clip » coupe sans créer de
   conteneur ; les navigateurs anciens ignorent la valeur et gardent « hidden ». */
html,body{overflow-x:clip!important}
/* L'ancien correctif mobile forçait flex-shrink:1 sur tout .flex-shrink-0 : pastilles et icônes écrasées. */
.flex-shrink-0{flex-shrink:0!important}

/* Barre de progression de lecture (posée par rt-plus.js sur les articles) */
.rp-progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--p-grn),var(--p-lime));z-index:60;pointer-events:none}

/* ---------- Tableaux : lisibles sur mobile, sans mots coupés ---------- */
main table{border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
main table th{white-space:nowrap}
main table th,main table td{vertical-align:top}
.rp-tab{position:relative}
.rp-tab-hint{display:none}
@media (max-width:760px){
  main .overflow-x-auto,.rp-tab{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  main .overflow-x-auto>table,.rp-tab>table{min-width:560px}
  main table td,main table th{padding:.7rem .75rem!important}
  main table td:first-child,main table th:first-child{position:sticky;left:0;z-index:1;background:inherit}
  main table tbody td:first-child{background:#fff;box-shadow:6px 0 8px -8px rgba(16,38,26,.35)}
  main table thead th:first-child{background:var(--p-forest)}
  .rp-tab-hint{display:flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:600;color:var(--p-mute);margin:.2rem 0 .5rem}
  .rp-tab-hint svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
}

/* =====================================================================
   ARTICLES DU BLOG (185 pages) : héros, mise en page, lecture
   ===================================================================== */
/* Héros : plus de voile blanc baveux, une vraie fin nette ; texte aligné à gauche sur grand écran */
body:has(main > .grid > aside) .hero-gradient{background:linear-gradient(150deg,#0b2617 0,#123a22 45%,#1d5a31 100%)!important;padding-top:3.2rem!important;padding-bottom:3.4rem!important}
body:has(main > .grid > aside) .hero-gradient::after{display:none}
body:has(main > .grid > aside) .hero-gradient::before{background:radial-gradient(ellipse at 85% 10%,rgba(190,255,59,.14) 0,transparent 55%)!important}
body:has(main > .grid > aside) .hero-gradient > div{max-width:1140px!important}
body:has(main > .grid > aside) .hero-gradient h1{text-wrap:pretty;font-size:clamp(2rem,1.3rem + 2.6vw,3.3rem)!important;line-height:1.06!important;letter-spacing:-.03em;max-width:22ch;margin-left:auto;margin-right:auto}
body:has(main > .grid > aside) .hero-gradient p{color:#cfdccc!important;max-width:62ch;margin-left:auto;margin-right:auto}
body:has(main > .grid > aside) .hero-gradient > div > div:last-child{color:#a7bba6!important;flex-wrap:wrap;row-gap:.4rem}
@media (min-width:1024px){
  body:has(main > .grid > aside) .hero-gradient > div{text-align:left!important}
  body:has(main > .grid > aside) .hero-gradient h1,body:has(main > .grid > aside) .hero-gradient p{margin-left:0}
  body:has(main > .grid > aside) .hero-gradient > div > div:last-child{justify-content:flex-start!important}
  body:has(main > .grid > aside) .hero-gradient > div{padding-left:calc(300px + 2.5rem + 1.5rem)!important}
}
@media (max-width:760px){
  body:has(main > .grid > aside) .hero-gradient{padding-top:2rem!important;padding-bottom:2.2rem!important}
  body:has(main > .grid > aside) .hero-gradient > div{text-align:left!important}
  body:has(main > .grid > aside) .hero-gradient > div > div:first-child{margin-bottom:.8rem}
  body:has(main > .grid > aside) .hero-gradient p{font-size:1rem!important;margin-left:0}
  body:has(main > .grid > aside) .hero-gradient h1{margin-left:0}
  body:has(main > .grid > aside) .hero-gradient > div > div:last-child{justify-content:flex-start!important;gap:.35rem .9rem!important;margin-top:1rem!important}
  body:has(main > .grid > aside) .hero-gradient > div > div:last-child > span:empty,
  body:has(main > .grid > aside) .hero-gradient > div > div:last-child > span:only-child{display:none}
}

/* Mise en page : colonne de lecture confortable + sommaire collant sur ordinateur */
main.max-w-4xl:has(> .grid > aside){max-width:1140px!important}
@media (min-width:1024px){
  main.max-w-4xl:has(> .grid > aside) > .grid{grid-template-columns:300px minmax(0,1fr)!important;gap:2.5rem!important;align-items:start}
  main.max-w-4xl:has(> .grid > aside) > .grid > article{grid-column:auto!important;max-width:740px}
  main.max-w-4xl:has(> .grid > aside) > .grid > aside{grid-column:auto!important;position:sticky;top:88px}
  main.max-w-4xl:has(> .grid > aside) > .grid > aside .sticky{position:static!important}
}
main:has(> .grid > aside) article > img:first-child,main:has(> .grid > aside) article > figure:first-child img{border-radius:18px!important;box-shadow:0 22px 48px -26px rgba(16,38,26,.5)!important}

/* Sommaire (ordinateur) : liste propre avec section active */
main > .grid > aside > .card{border-radius:18px!important;padding:1.3rem 1.2rem!important;box-shadow:var(--p-sh)!important;border-color:var(--p-line)!important}
main > .grid > aside nav a{display:block;padding:.45rem .6rem!important;margin:0 -.6rem;border-radius:8px;border:0!important;color:var(--p-ink2)!important;line-height:1.35;transition:background .2s,color .2s}
main > .grid > aside nav a:hover{background:var(--p-tint);text-decoration:none!important;color:var(--p-ink)!important}
main > .grid > aside nav a.rp-on{background:var(--p-tint);color:var(--p-grn)!important;font-weight:700;box-shadow:inset 3px 0 0 var(--p-grn)}

/* Typographie de lecture */
main:has(> .grid > aside) article{color:var(--p-ink2)}
main:has(> .grid > aside) article p,main:has(> .grid > aside) article li{font-size:1.04rem;line-height:1.75}
main:has(> .grid > aside) article h2{font-size:clamp(1.5rem,1.2rem + 1vw,1.95rem)!important;line-height:1.15!important;letter-spacing:-.022em;color:var(--p-ink)!important;margin-top:.4rem;margin-bottom:1rem!important;scroll-margin-top:96px}
main:has(> .grid > aside) article h3{letter-spacing:-.01em;color:var(--p-ink)}
main:has(> .grid > aside) article section{scroll-margin-top:96px}
main:has(> .grid > aside) article a:not(.btn):not([class*="btn"]):not([class*="card"]){text-decoration:underline;text-decoration-color:rgba(31,122,51,.35);text-underline-offset:3px;text-decoration-thickness:1.5px}
main:has(> .grid > aside) article a:not(.btn):not([class*="btn"]):not([class*="card"]):hover{text-decoration-color:var(--p-grn)}

/* Encadrés et cartes de contenu : même famille visuelle, plus de barre colorée épaisse à gauche */
main:has(> .grid > aside) article .card{border-radius:14px!important;border-color:var(--p-line)!important;box-shadow:var(--p-sh)!important}
main:has(> .grid > aside) article .border-l-4{border-left-width:1px!important;position:relative;overflow:hidden}
main:has(> .grid > aside) article .border-l-4::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--p-grn);opacity:.9}
main:has(> .grid > aside) article .border-l-4.border-red-400::before,main:has(> .grid > aside) article .border-l-4.border-red-500::before{background:#d6453d}
main:has(> .grid > aside) article .border-l-4.border-amber-500::before,main:has(> .grid > aside) article .border-l-4.border-amber-400::before{background:#e0a020}
main:has(> .grid > aside) article .border-l-4.border-blue-500::before,main:has(> .grid > aside) article .border-l-4.border-blue-400::before{background:#3b82c4}
main:has(> .grid > aside) article .bg-amber-50{background:#fff8ec!important;border-color:#f1dfb8!important;border-radius:14px!important;color:#5c4512!important}
main:has(> .grid > aside) article .bg-blue-50{border-radius:14px!important}
main:has(> .grid > aside) article .bg-forest-50,main:has(> .grid > aside) article [class*="bg-lime/5"]{border-radius:16px!important}
main:has(> .grid > aside) article .rounded-xl{border-radius:14px!important}

/* FAQ : accordéons nets, chevron dessiné */
main:has(> .grid > aside) article details{border-radius:14px!important;border:1px solid var(--p-line)!important;box-shadow:none!important;transition:box-shadow .3s var(--p-ease),border-color .3s}
main:has(> .grid > aside) article details[open]{border-color:#cfdcc4!important;box-shadow:var(--p-sh)!important}
main:has(> .grid > aside) article details summary{cursor:pointer;font-weight:700;color:var(--p-ink)}

/* Articles connexes en pied d'article */
body:has(main > .grid > aside) section.bg-warm-50{background:var(--p-paper)!important}
body:has(main > .grid > aside) section.bg-warm-50 > div{max-width:1140px!important}
body:has(main > .grid > aside) section.bg-warm-50 .grid > a{border-radius:16px!important;overflow:hidden;box-shadow:var(--p-sh)!important;transition:transform .35s var(--p-ease),box-shadow .35s}
body:has(main > .grid > aside) section.bg-warm-50 .grid > a:hover{transform:translateY(-3px)}
body:has(main > .grid > aside) section.bg-warm-50 .grid > a img{transition:transform .6s var(--p-ease)}
body:has(main > .grid > aside) section.bg-warm-50 .grid > a:hover img{transform:scale(1.04)}

/* ---------- Mobile : sommaire en barre collante (posée par rt-plus.js) ---------- */
.rp-toc{display:none}
@media (max-width:1023px){
  html.rp-js main > .grid > aside:has(nav a[href^="#"]){display:none}
  .rp-toc{display:block;position:sticky;top:var(--rp-navh,57px);z-index:35;margin:0 -16px 1.2rem;width:calc(100% + 32px)!important;max-width:none!important;box-sizing:border-box;background:rgba(246,244,238,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--p-line)}
  .rp-toc button.rp-tg{display:flex;align-items:center;gap:.6rem;width:100%;padding:.75rem 16px;background:none;border:0;font:inherit;text-align:left;color:var(--p-ink);cursor:pointer}
  .rp-toc .rp-lbl{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--p-grn);flex:0 0 auto}
  .rp-toc .rp-cur{flex:1;min-width:0;font-weight:700;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rp-toc .rp-ch{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .3s var(--p-ease)}
  .rp-toc.open .rp-ch{transform:rotate(180deg)}
  .rp-toc ol{list-style:none;margin:0;padding:0 16px;max-height:0;overflow:hidden;visibility:hidden;transition:max-height .45s var(--p-ease),padding .3s,visibility 0s .45s}
  .rp-toc.open ol{max-height:70vh;overflow-y:auto;padding:.2rem 16px 1rem;visibility:visible;transition:max-height .45s var(--p-ease),padding .3s}
  .rp-toc li a{display:flex;gap:.6rem;padding:.6rem .4rem;border-radius:10px;color:var(--p-ink2)!important;text-decoration:none!important;font-weight:600;font-size:.95rem;line-height:1.35}
  .rp-toc li a span{color:var(--p-mute);font-variant-numeric:tabular-nums;min-width:1.4em}
  .rp-toc li a.rp-on{background:var(--p-tint);color:var(--p-grn)!important}
}
@media (prefers-reduced-motion:reduce){.rp-toc ol,.rp-toc .rp-ch{transition:none}}

/* =====================================================================
   FICHES PRODUIT (86 pages) : photo mise en valeur, achat toujours à portée
   ===================================================================== */
/* Héros : la photo sur un plateau clair (le fond blanc des photos disparaît), infos alignées */
body:has(#acheter) div[class*="bg-gradient-to-br"].text-white.py-12{padding-top:2.6rem!important;padding-bottom:2.8rem!important}
body:has(#acheter) div[class*="bg-gradient-to-br"].text-white > div > .grid > div:first-child{background:#fff!important;border:0!important;border-radius:22px!important;padding:1rem!important;display:grid;place-items:center;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
body:has(#acheter) div[class*="bg-gradient-to-br"].text-white > div > .grid > div:first-child img{width:100%!important;max-width:520px!important;height:auto!important;max-height:100%!important;aspect-ratio:4/3;object-fit:contain;filter:none!important;margin:0 auto}
body:has(#acheter) div[class*="bg-gradient-to-br"].text-white h1{font-size:clamp(1.9rem,1.3rem + 2.2vw,2.9rem)!important;line-height:1.05!important;letter-spacing:-.03em}
body:has(#acheter) div[class*="bg-gradient-to-br"].text-white .grid-cols-3 > div{background:rgba(255,255,255,.09)!important;border:1px solid rgba(255,255,255,.12);border-radius:14px!important}
body:has(#acheter) div[class*="bg-gradient-to-br"].text-white .text-4xl{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
@media (max-width:767px){
  body:has(#acheter) div[class*="bg-gradient-to-br"].text-white.py-12{padding-top:1.4rem!important;padding-bottom:2rem!important}
  body:has(#acheter) div[class*="bg-gradient-to-br"].text-white .grid{gap:1.2rem!important}
  body:has(#acheter) div[class*="bg-gradient-to-br"].text-white > div > .grid > div:first-child{padding:.6rem!important}
  body:has(#acheter) div[class*="bg-gradient-to-br"].text-white > div > .grid > div:first-child img{max-width:340px!important}
  body:has(#acheter) div[class*="bg-gradient-to-br"].text-white .grid-cols-3{gap:.5rem!important}
  body:has(#acheter) div[class*="bg-gradient-to-br"].text-white .grid-cols-3 .text-xl{font-size:1.05rem!important}
}
/* Contenu : cartes, avantages / inconvénients, fiche technique */
body:has(#acheter) main .card{border-radius:16px!important;border-color:var(--p-line)!important;box-shadow:var(--p-sh)!important}
body:has(#acheter) main .border-l-4{border-left-width:1px!important;position:relative;overflow:hidden}
body:has(#acheter) main .border-l-4::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--p-grn)}
body:has(#acheter) main .border-l-4.border-red-400::before{background:#d6453d}
body:has(#acheter) main h2{letter-spacing:-.022em;scroll-margin-top:96px}
body:has(#acheter) main p,body:has(#acheter) main li{line-height:1.7}
body:has(#acheter) .spec-item{border-radius:14px!important;border:1px solid var(--p-line)!important;background:#fff!important;box-shadow:none!important}
body:has(#acheter) #acheter{border:2px solid var(--p-grn)!important;box-shadow:0 18px 40px -24px rgba(31,122,51,.55)!important}
@media (min-width:1024px){body:has(#acheter) main > .grid > aside{position:sticky;top:88px;align-self:start}}
body:has(#acheter) section > details,body:has(#acheter) .space-y-3 > details{border-radius:14px!important}

/* Barre d'achat mobile (posée par rt-plus.js) */
.rp-buy{position:fixed;left:0;right:0;bottom:0;z-index:94;display:flex;align-items:center;gap:.8rem;padding:.65rem 14px calc(.65rem + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.97);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--p-line);box-shadow:0 -10px 30px -12px rgba(16,38,26,.25);transform:translateY(110%);transition:transform .35s var(--p-ease)}
.rp-buy.on{transform:none}
.rp-buy .rp-b-t{flex:1;min-width:0;line-height:1.2}
.rp-buy .rp-b-t b{display:block;font-size:.88rem;color:var(--p-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-buy .rp-b-t span{font-family:Rubik,system-ui,sans-serif;font-weight:800;font-size:1.15rem;color:var(--p-ink);font-variant-numeric:tabular-nums}
.rp-buy a{flex:0 0 auto;background:var(--p-grn);color:#fff!important;font-weight:800;font-size:.92rem;padding:.75rem 1rem;border-radius:12px;text-decoration:none!important;white-space:nowrap}
body.rp-buy-on .rt-fab-wrap{opacity:0}
body.rp-buy-on .rt-fab-wrap,body.rp-buy-on .rt-fab-wrap>*{pointer-events:none!important}
@media (min-width:1024px){.rp-buy{display:none}}

/* =====================================================================
   COMPARATEUR : une fiche par ligne sur mobile, caractéristiques lisibles
   ===================================================================== */
.pcard{border-radius:16px!important;border-color:var(--p-line)!important;box-shadow:var(--p-sh)!important;transition:transform .35s var(--p-ease),box-shadow .35s}
.pcard:hover{transform:translateY(-2px)}
.pcard .pc-visual{background:#fff!important}
.pcard .pc-visual img{object-fit:contain!important;filter:none!important}
.pcard .pc-name{letter-spacing:-.01em}
.pcard .spec-item{border-radius:10px!important}
.cmp-check{font-family:Inter,system-ui,sans-serif!important}
@media (max-width:600px){
  #grid.pgrid{grid-template-columns:1fr!important;gap:.8rem!important}
  .pcard{display:grid!important;grid-template-columns:112px minmax(0,1fr);grid-template-areas:"head head" "vis body";column-gap:.2rem;padding:0!important;overflow:hidden}
  .pcard .pc-head{grid-area:head;padding:.6rem .8rem 0!important}
  .pcard .pc-visual{grid-area:vis;height:auto!important;min-height:0!important;margin:.5rem 0 .8rem .8rem!important;border-radius:12px;align-self:start;aspect-ratio:1/1}
  .pcard .pc-visual img{width:100%!important;height:100%!important}
  .pcard .pc-visual .tg,.pcard .pc-visual [class*="badge"]{transform:scale(.85);transform-origin:left bottom}
  .pcard .pc-body{grid-area:body;padding:.4rem .8rem .9rem .6rem!important;min-width:0}
  .pcard .pc-name{font-size:1.02rem!important;line-height:1.25!important}
  .pcard .pc-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.84rem!important;margin:.25rem 0 .4rem!important}
  #grid .pcard .pc-specs{display:flex!important;flex-wrap:wrap!important;grid-template-columns:none!important;gap:.3rem!important;margin:.4rem 0!important}
  #grid .pcard .spec-item{display:inline-flex!important;flex-direction:row!important;align-items:baseline;gap:.3rem;padding:.25rem .5rem!important;min-width:0!important;width:auto!important}
  .pcard .spec-value{font-size:.86rem!important;white-space:nowrap}
  /* sur mobile la valeur suffit (1 500 m², 80 %, Sans fil) : les trois tiennent sur une ligne */
  #grid .pcard .spec-label{display:none!important}
  .pcard .pc-tags{display:none!important}
  #grid .pcard .pc-foot{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:.5rem!important;margin-top:.4rem!important}
  #grid .pcard .pc-price b{font-size:1.25rem!important}
  #grid .pcard .pc-acts{display:flex!important;gap:.4rem!important;flex:1 1 100%!important;width:100%}
  #grid .pcard .pc-acts .btn{flex:1 1 0!important;justify-content:center;text-align:center;min-width:0;padding-left:.4rem!important;padding-right:.4rem!important}
}

/* =====================================================================
   PAGES À HÉROS VERT (guide d'achat, blog, outils) : fin nette, pas de voile blanc
   ===================================================================== */
.hero-gradient::after{display:none!important}

/* =====================================================================
   INDEX DU BLOG (blog/articles.html) : magazine sur ordinateur, liste nette sur mobile.
   Tout est scopé sur body:has(#articles-grid) ; la recherche et « Afficher plus »
   sont posés par rt-plus.js. Les 187 cartes, leurs textes et leurs liens restent dans le HTML.
   ===================================================================== */
body:has(#articles-grid){background:var(--p-paper)}
/* Héros : clair et éditorial au lieu du grand aplat vert */
body:has(#articles-grid) .hero-gradient{background:var(--p-paper)!important;color:var(--p-ink)!important;padding:3.25rem 0 1.5rem!important;border-bottom:0}
body:has(#articles-grid) .hero-gradient::before{display:none!important}
body:has(#articles-grid) .hero-gradient>div{max-width:1200px!important}
body:has(#articles-grid) .hero-gradient .section-tag{background:var(--p-forest)!important;color:var(--p-lime)!important;font-size:.72rem;letter-spacing:.08em}
body:has(#articles-grid) .hero-gradient h1{color:var(--p-ink)!important;font-size:clamp(2.2rem,1.4rem + 3vw,3.6rem)!important;letter-spacing:-.035em!important;line-height:1!important;margin:1rem 0 .9rem!important}
body:has(#articles-grid) .hero-gradient p{color:var(--p-ink2)!important;font-size:1.08rem!important;max-width:60ch!important}
body:has(#articles-grid) .hero-gradient .glass{background:#fff!important;border:1px solid var(--p-line)!important;color:var(--p-mute)!important;box-shadow:none!important;backdrop-filter:none!important;padding:.4rem .8rem!important;border-radius:999px!important}
body:has(#articles-grid) .hero-gradient .glass .text-lime{color:var(--p-grn)!important}
body:has(#articles-grid) .hero-gradient .glass .text-white\/70{color:var(--p-ink)!important}
body:has(#articles-grid) .hero-gradient .mt-8{margin-top:1.25rem!important;gap:.6rem!important}

body:has(#articles-grid) main#main{max-width:1200px!important;padding-top:.5rem!important}
/* Barre d'outils collante : catégories + recherche (la place de la recherche est réservée : pas de saut) */
body:has(#articles-grid) main > .mb-8:has(#filter-bar){position:sticky;top:var(--rp-navh,64px);z-index:30;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:.75rem 1.25rem;align-items:center;margin:0 0 1.75rem!important;padding:.75rem 0;transition:transform .3s var(--p-ease)}
/* fond pleine largeur de la barre (pseudo-élément : ne recouvre pas les cartes en dessous) */
body:has(#articles-grid) main > .mb-8:has(#filter-bar)::before{content:"";position:absolute;inset:0 -100vmax;z-index:-1;background:var(--p-paper);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
body.rp-tb-stuck main > .mb-8:has(#filter-bar)::before{border-bottom-color:var(--p-line);box-shadow:0 10px 18px -16px rgba(16,38,26,.35)}
#filter-bar{gap:.45rem!important}
body:has(#articles-grid) .filter-btn{border:1px solid var(--p-line)!important;background:#fff!important;color:var(--p-ink2)!important;font-size:.84rem!important;padding:.45rem .8rem!important;min-height:40px}
body:has(#articles-grid) .filter-btn:hover{border-color:var(--p-grn)!important;color:var(--p-ink)!important}
body:has(#articles-grid) .filter-btn.active{background:var(--p-forest)!important;border-color:var(--p-forest)!important;color:#fff!important}
body:has(#articles-grid) .filter-btn.active .filter-count{background:var(--p-lime)!important;color:var(--p-forest)!important}
.rp-q{position:relative;grid-column:2;grid-row:1}
.rp-q input{width:100%;height:44px;border:1px solid var(--p-line);border-radius:999px;background:#fff;padding:0 2.6rem 0 2.6rem;font:inherit;font-size:16px;color:var(--p-ink);transition:border-color .2s,box-shadow .2s}
.rp-q input::placeholder{color:#8b958d}
.rp-q input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.rp-q input:focus{outline:none!important;border-color:var(--p-grn);box-shadow:0 0 0 4px rgba(31,122,51,.14)}
.rp-q>svg{position:absolute;left:.95rem;top:50%;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:var(--p-mute);stroke-width:2;stroke-linecap:round;pointer-events:none}
.rp-q button{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:50%;background:var(--p-paper);color:var(--p-ink);font-size:1.1rem;line-height:1;cursor:pointer;display:none}
.rp-q.on button{display:block}
.rp-q kbd{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);font:600 .72rem/1 Inter,sans-serif;color:var(--p-mute);border:1px solid var(--p-line);border-radius:6px;padding:.2rem .4rem;background:var(--p-paper)}
.rp-q.on kbd{display:none}
.rp-res{grid-column:1 / -1;font-size:.88rem;color:var(--p-mute);margin:-.25rem 0 0;display:none}
.rp-res.on{display:block}
.rp-res b{color:var(--p-ink)}

/* Grille : 3 colonnes, image au-dessus, titre lisible SOUS l'image */
#articles-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:1.5rem!important}
.article-card{display:grid!important;grid-template-rows:auto auto 1fr;background:#fff!important;border:1px solid var(--p-line)!important;border-radius:18px!important;box-shadow:0 1px 2px rgba(16,38,26,.05)!important;transition:transform .35s var(--p-ease),box-shadow .35s var(--p-ease),border-color .35s!important;cursor:pointer}
.article-card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -26px rgba(16,38,26,.45)!important;border-color:#d5dccb!important}
.article-card > .h-48{display:contents!important}
.article-card > .h-48 > img{grid-row:1;width:100%!important;height:auto!important;aspect-ratio:16/10;object-fit:cover;transform:none!important}
.article-card > .h-48 > div[style*="linear-gradient"]{display:none!important}
.article-card > .h-48 > div[style*="bottom:0"]{position:static!important;grid-row:2;padding:1.15rem 1.3rem 0!important}
.article-card .badge{display:inline-block;background:var(--p-tint)!important;color:var(--p-grn)!important;border:0!important;font-size:.68rem!important;font-weight:800!important;letter-spacing:.06em;text-transform:uppercase;padding:.28rem .6rem!important;border-radius:999px!important;margin-bottom:.6rem!important}
.article-card h2{color:var(--p-ink)!important;font-family:Rubik,system-ui,sans-serif!important;font-size:1.12rem!important;line-height:1.25!important;letter-spacing:-.015em;font-weight:800!important;transition:color .2s}
.article-card:hover h2{color:var(--p-grn)!important}
.article-card > .flex.flex-col{grid-row:3;padding:.55rem 1.3rem 1.2rem!important}
.article-card > .flex.flex-col > p{color:var(--p-ink2)!important;font-size:.9rem!important;line-height:1.55!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.article-card > .flex.flex-col > div{margin-top:1rem!important;padding-top:.85rem;border-top:1px solid #efede6}
.article-card .text-warm-400{color:var(--p-mute)!important}
.article-card .btn-primary.stretched-link{background:none!important;color:var(--p-grn)!important;padding:0!important;font-weight:700!important;box-shadow:none!important;font-size:.88rem!important;border:0!important;min-height:0!important}
.article-card:hover .btn-primary.stretched-link{text-decoration:underline;text-underline-offset:4px}
.article-card.rp-cache{display:none!important}


/* Afficher plus */
.rp-plus{display:flex;flex-direction:column;align-items:center;gap:.6rem;margin:2.5rem 0 0}
.rp-plus button{display:inline-flex;align-items:center;gap:.5rem;height:50px;padding:0 1.6rem;border-radius:999px;border:1px solid var(--p-forest);background:#fff;color:var(--p-forest);font:700 .95rem Inter,sans-serif;cursor:pointer;transition:background .2s,color .2s}
.rp-plus button:hover{background:var(--p-forest);color:#fff}
.rp-plus small{color:var(--p-mute);font-size:.82rem}
.rp-plus .rp-bar{width:180px;height:3px;border-radius:3px;background:var(--p-line);overflow:hidden}
.rp-plus .rp-bar i{display:block;height:100%;background:var(--p-grn)}
#no-results{padding:3rem 1rem!important}
/* Bandeau final « comparateur » */
body:has(#articles-grid) main .card-highlight{background:var(--p-forest)!important;border:0!important;border-radius:22px!important;padding:2.5rem 2rem!important}
body:has(#articles-grid) main .card-highlight h3{color:#fff!important;font-size:1.6rem!important}
body:has(#articles-grid) main .card-highlight p{color:#c9d6c6!important;font-size:1rem!important}
body:has(#articles-grid) main .card-highlight .btn-primary{background:var(--p-lime)!important;color:var(--p-forest)!important}

@media (max-width:1023px){
  #articles-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:760px){
  body:has(#articles-grid) .hero-gradient{padding:1.6rem 0 .5rem!important}
  body:has(#articles-grid) .hero-gradient h1{font-size:2.15rem!important;margin:.75rem 0 .6rem!important}
  body:has(#articles-grid) .hero-gradient p{font-size:.98rem!important}
  body:has(#articles-grid) .hero-gradient .mt-8{margin-top:.9rem!important}
  body:has(#articles-grid) .hero-gradient .glass{font-size:.8rem!important;padding:.3rem .7rem!important}
  /* barre d'outils : recherche pleine largeur, puis catégories en ruban défilant */
  body:has(#articles-grid) main > .mb-8:has(#filter-bar){grid-template-columns:minmax(0,1fr);gap:.6rem;margin:0 0 1rem!important;padding:.6rem 0 .65rem}
  .rp-q{grid-column:1;grid-row:1}
  .rp-q kbd{display:none}
  body:has(#articles-grid) main > .mb-8 > #filter-bar{grid-row:2;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;margin:0 -1rem;padding:0 1rem;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  #filter-bar::-webkit-scrollbar{display:none}
  body:has(#articles-grid) .filter-btn{flex:0 0 auto;font-size:.82rem!important;padding:.45rem .85rem!important;min-height:38px}
  /* liste : vignette + titre complet, puis début du résumé sur toute la largeur */
  #articles-grid{grid-template-columns:minmax(0,1fr)!important;gap:.65rem!important}
  .article-card{grid-template-columns:84px minmax(0,1fr);grid-template-rows:auto auto;column-gap:.85rem;padding:.8rem!important;border-radius:16px!important}
  .article-card:hover{transform:none}
  .article-card > .h-48 > img{grid-column:1;grid-row:1;align-self:start;width:84px!important;height:84px!important;aspect-ratio:1;border-radius:12px}
  .article-card > .h-48 > div[style*="bottom:0"]{grid-column:2;grid-row:1;align-self:center;padding:0!important}
  .article-card .badge{font-size:.62rem!important;padding:.2rem .5rem!important;margin-bottom:.35rem!important}
  .article-card h2{font-size:1rem!important;line-height:1.3!important;display:block!important;overflow:visible!important;-webkit-line-clamp:unset!important}
  .article-card > .flex.flex-col{grid-column:1 / -1;grid-row:2;padding:.6rem 0 0!important}
  .article-card > .flex.flex-col > p{display:-webkit-box!important;-webkit-line-clamp:3;font-size:.88rem!important;line-height:1.5!important}
  .article-card > .flex.flex-col > div{margin-top:.5rem!important;padding-top:0;border-top:0}
  .article-card .btn-primary.stretched-link{font-size:.82rem!important;flex:0 0 auto;width:auto!important;min-width:0!important}
  .article-card .text-warm-400{font-size:.74rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .article-card > .flex.flex-col > div{gap:.5rem}
  body:has(#articles-grid) main .card-highlight{padding:2rem 1.25rem!important}
}


/* ---------- Index du blog, 2e passe (mobile surtout) ---------- */
/* catégories : ordre utile (les plus demandées d'abord) ; bouton Dépannage ajouté par rt-plus.js */
#filter-bar [data-filter="tous"]{order:0}#filter-bar [data-filter="achat"]{order:1}#filter-bar [data-filter="marques"]{order:2}
#filter-bar [data-filter="depannage"]{order:3}#filter-bar [data-filter="pratique"]{order:4}#filter-bar [data-filter="technologie"]{order:5}#filter-bar [data-filter="securite"]{order:6}
/* une couleur par famille, pour repérer d'un coup d'œil */
.article-card[data-category="achat"] .badge{background:#e6f2dc!important;color:#2b6a1c!important}
.article-card:is([data-category="marques"],[data-category="marque"],[data-category="comparatif"]) .badge{background:#ece8f8!important;color:#5a3fa6!important}
.article-card:is([data-category="depannage"],[data-category="entretien"]) .badge{background:#fbe9de!important;color:#a8461b!important}
.article-card:is([data-category="pratique"],[data-category="installation"]) .badge{background:#fbf1d6!important;color:#8a5d00!important}
.article-card[data-category="technologie"] .badge{background:#e0eef6!important;color:#1f5f86!important}
.article-card[data-category="securite"] .badge{background:#fde4e4!important;color:#a12a2a!important}
/* articles déjà lus (mémorisés dans ce navigateur seulement) */
.article-card.rp-lu > .h-48 > img{filter:saturate(.35) brightness(1.05);opacity:.75}
.article-card.rp-lu h2::after{content:"Déjà lu";display:inline-block;vertical-align:.15em;margin-left:.45rem;font:700 .62rem/1 Inter,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--p-mute);background:#efede6;border-radius:999px;padding:.25rem .45rem}
/* suggestions sous le champ de recherche */
.rp-sug{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;background:#fff;border:1px solid var(--p-line);border-radius:16px;box-shadow:0 18px 40px -20px rgba(16,38,26,.4);padding:.8rem;display:none}
.rp-q.sug .rp-sug{display:block}
.rp-sug p{margin:0 0 .5rem;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--p-mute)}
.rp-sug div{display:flex;flex-wrap:wrap;gap:.4rem}
.rp-sug button{position:static!important;transform:none!important;display:inline-flex!important;width:auto!important;height:36px!important;align-items:center;gap:.35rem;padding:0 .8rem!important;border-radius:999px!important;border:1px solid var(--p-line)!important;background:var(--p-paper)!important;font:600 .85rem Inter,sans-serif!important;color:var(--p-ink)!important}
.rp-sug button small{color:var(--p-mute);font-weight:600}
.rp-mois{display:none}
@media (max-width:760px){
  /* héros plus court : la une apparaît dès le premier écran */
  body:has(#articles-grid) .hero-gradient{padding:1.1rem 0 .25rem!important}
  body:has(#articles-grid) .hero-gradient .section-tag{font-size:.62rem!important;padding:.3rem .6rem!important}
  body:has(#articles-grid) .hero-gradient h1{font-size:1.95rem!important;margin:.55rem 0 .45rem!important}
  body:has(#articles-grid) .hero-gradient p{font-size:.92rem!important;line-height:1.5!important}
  body:has(#articles-grid) .hero-gradient .mt-8{margin-top:.7rem!important}
  /* barre d'outils : se range quand on descend, revient dès qu'on remonte */
  body:has(#articles-grid) main > .mb-8:has(#filter-bar){gap:.5rem;padding:.5rem 0 .55rem;margin-bottom:.75rem!important}
  body.rp-tb-cache main > .mb-8:has(#filter-bar){transform:translateY(calc(-100% - 12px))}
  .rp-q input{height:42px}
  body:has(#articles-grid) .filter-btn{min-height:36px;padding:.35rem .8rem!important}
  /* liste : chevron au lieu de « Lire → », toute la carte reste cliquable */
  .article-card:not(.rp-une){position:relative}
  .article-card:not(.rp-une) .btn-primary.stretched-link{position:absolute!important;right:.7rem;top:auto;bottom:.6rem;transform:none;width:28px!important;height:28px!important;border-radius:50%!important;background:var(--p-paper)!important;font-size:0!important;color:transparent!important}
  .article-card:not(.rp-une) .btn-primary.stretched-link::after{content:"";position:absolute;inset:0;margin:auto;width:7px;height:7px;border-top:2px solid var(--p-grn);border-right:2px solid var(--p-grn);transform:translateX(-1px) rotate(45deg)}
  .article-card:not(.rp-une) .text-warm-400{font-size:.75rem!important}
  .article-card:active{transform:scale(.985);transition-duration:.1s}
  /* repères de mois entre les articles */
  .rp-mois{order:1;display:flex;align-items:center;gap:.6rem;margin:.9rem 0 .1rem;font:800 .72rem/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--p-mute)}
  .rp-mois::after{content:"";flex:1;height:1px;background:var(--p-line)}
  .rp-sug{border-radius:14px}
}

/* =====================================================================
   ANNUAIRE DES REVENDEURS (3 732 pages) : recherche lisible, boutons lisibles
   ===================================================================== */
a.an-btn-vit,a.an-btn-call{color:#fff!important;text-decoration:none!important}
a.an-btn{text-decoration:none!important}
.an-card{border-radius:16px!important;transition:box-shadow .3s,transform .3s var(--p-ease)}
.an-card:hover{transform:translateY(-2px)}
@media (max-width:600px){
  .an-search-row{flex-wrap:wrap!important}
  .an-search-row input{flex:1 1 100%!important;min-width:0!important;font-size:16px!important}
  .an-search-row .an-geo{flex:1 1 100%!important;justify-content:center}
}