/* =====================================================
   BLOG + ARTICLE — THÈME VERRE DÉPOLI VERT LUMINEUX (consolidé)
   - Une seule feuille pour tout (liste + article/modale)
   - Filtres noir/vert à lueur, Réinitialiser 42px
   - Badges TESTÉ/APPROUVÉ/PROMO : même taille
   - Rails (blog + article) : centrage parfait quand statique
   ===================================================== */

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap");

/* ===================== */
/* Variables & base      */
/* ===================== */
:root{
  /* Couleurs */
  --text:#ecfff2; --text-2:#d7ffdf; --text-muted:#b6eac3; --text-dark:#0c1712;
  /* Vert */
  --brand:#36e18f; --brand-700:#16b870; --brand-glow:#50ffb4; --halo:0 0 28px rgba(80,255,180,.45);
  /* Verre & fonds */
  --blur:12px; --vignette:rgba(0,0,0,.65); --tint-top:rgba(22,63,39,.45);
  --bg1:#002b1c; --bg2:#00150d; --bg3:#000a06;
  /* Plaques */
  --glass-dark:rgba(10,24,16,.90); --glass:rgba(12,28,18,.82); --glass-soft:rgba(14,32,22,.60);
  /* Bordures & ombres */
  --border-strong:rgba(120,255,190,.55); --border-soft:rgba(120,255,190,.32);
  --shadow:0 10px 28px rgba(0,0,0,.35), 0 0 26px rgba(54,225,143,.22);
  /* Rythme & typo */
  --ff:"Roboto",system-ui,-apple-system,Segoe UI,Arial,sans-serif; --lh:1.6;
  --radius-sm:10px; --radius:12px; --radius-lg:14px; --radius-xl:18px;

  /* Cartes produit (rails) */
  --prod-card-w:230px; --prod-name-lines:2; --prod-name-lh:1.25;
  --prod-meta-h:1.2em; --prod-price-h:26px;

  /* Cartes “Produits cités” (article) */
  --a-prod-w:170px; --a-name-lines:2; --a-name-lh:1.25; --a-price-h:26px;
}
*{box-sizing:border-box;}
@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important;} }

/* ===================== */
/* Fond & layout         */
/* ===================== */
html,body{height:100%;}
body{
  margin:0; color:var(--text); font-family:var(--ff); line-height:var(--lh);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background:transparent; color-scheme:dark;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:radial-gradient(circle at 20% 20%, var(--bg1) 0%, var(--bg2) 45%, var(--bg3) 100%);
  filter:brightness(1) saturate(1.1);
  animation:bgMove 40s ease-in-out infinite alternate;
}
@keyframes bgMove{0%{background-position:left top;}100%{background-position:right bottom;}}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(160% 110% at 50% 0%, transparent 0%, var(--vignette) 80%),
             linear-gradient(180deg, var(--tint-top), rgba(0,0,0,.8));
}

.blog-main{padding:100px 20px 44px; max-width:1280px; margin:0 auto;}
 ===================== */
/* Navbar & menu         */
/* ===================== */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:1000; height:74px; padding:10px 16px;
  display:flex; align-items:center; justify-content:center;
  background:var(--glass-dark); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft); box-shadow:var(--shadow);
}
.logo{position:absolute; left:16px; display:flex; align-items:center;}
.logo img{height:46px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));}
.title{font-weight:900; font-size:20px; letter-spacing:.3px; text-shadow:0 0 16px rgba(0,0,0,.25);}
.menu-button{position:absolute; right:16px; background:transparent; border:0; color:var(--text); font-size:28px; cursor:pointer;}

.menu-content{
  position:fixed; top:74px; left:0; right:0; z-index:1001;
  background:var(--glass-soft); border-bottom:1px solid var(--border-soft);
  visibility:hidden; opacity:0; transform:translateY(-6px); pointer-events:none; transition:.25s ease;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:var(--shadow);
}
.menu-content.show{visibility:visible; opacity:1; transform:translateY(0); pointer-events:auto;}
.menu-content nav{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; padding:12px;}
.menu-content nav a{color:var(--text); text-decoration:none; padding:8px 14px; border-radius:10px; transition:.25s;}
.menu-content nav a:hover{background:linear-gradient(135deg,var(--brand),var(--brand-700)); box-shadow:var(--halo); color:#001a0d;}
@media (prefers-reduced-motion: no-preference){
  .menu-content{transform-origin:top center; clip-path:inset(-10px -10px 100% -10px round 14px);}
  .menu-content.show{animation:subbarIn .38s cubic-bezier(.2,.7,.2,1.02) both; transition:none;}
  .menu-content nav a{opacity:0; transform:translateY(6px);}
  .menu-content.show nav a{animation:itemIn .42s cubic-bezier(.2,.7,.2,1.02) both;}
  @keyframes subbarIn{0%{opacity:0; transform:translateY(-8px) scaleY(.98); filter:blur(8px);}
                      60%{opacity:1; transform:translateY(0) scaleY(1.005); filter:blur(2px);}
                      100%{opacity:1; transform:translateY(0) scaleY(1); filter:blur(0);} }
  @keyframes itemIn{from{opacity:0; transform:translateY(8px); filter:blur(2px);} to{opacity:1; transform:translateY(0); filter:blur(0);} }
}

/* ===================== */
/* Barre de recherche    */
/* ===================== */
.search-bar{
  position:relative; background:rgba(10,24,16,.9); border:1px solid rgba(61,220,132,.35);
  border-radius:16px; padding:12px; backdrop-filter:blur(8px) saturate(1.1); -webkit-backdrop-filter:blur(8px) saturate(1.1);
  box-shadow:0 0 28px rgba(61,220,132,.15), inset 0 0 10px rgba(61,220,132,.12); transition:all .3s ease;
}
.search-bar:hover{border-color:rgba(80,255,180,.55); box-shadow:0 0 36px rgba(80,255,180,.25), 0 0 50px rgba(54,225,143,.15);}
.search-form{display:flex; align-items:center; gap:12px;}
.search-form input[type="text"]{
  flex:1; height:48px; padding:0 16px; border-radius:12px; border:1px solid rgba(61,220,132,.3);
  background:rgba(0,0,0,.4); color:#e7fdee; font-weight:500; letter-spacing:.2px;
  box-shadow:inset 0 0 12px rgba(61,220,132,.15); transition:.25s ease;
}
.search-form input[type="text"]::placeholder{color:#a6dcb7; opacity:.85;}
.search-form input[type="text"]:focus{outline:none; border-color:rgba(80,255,180,.7); box-shadow:0 0 18px rgba(80,255,180,.35), 0 0 36px rgba(61,220,132,.25);}
.search-form button{
  height:48px; padding:0 20px; border-radius:12px; border:1px solid rgba(61,220,132,.5);
  background:linear-gradient(135deg,#50ffb4,#2edb88); color:#001d0f; font-weight:900; letter-spacing:.3px; cursor:pointer;
  box-shadow:0 8px 22px rgba(61,220,132,.35); transition:.25s ease;
}
.search-form button:hover{filter:brightness(1.1); transform:translateY(-1px); box-shadow:0 12px 30px rgba(61,220,132,.45), 0 0 20px rgba(61,220,132,.35);}

/* ===================== */
/* Filtres (bandeau)     */
/* ===================== */
.filters-bar{
  position:sticky; top:calc(74px + 8px); z-index:900;
  display:flex; align-items:center; min-height:70px;
  margin:18px auto 10px; padding:14px 16px; color:#e9fff3;
  background:linear-gradient(180deg, rgba(10,24,16,0.84), rgba(6,18,12,0.90));
  border:1px solid rgba(82,255,170,.50); border-radius:18px;
  backdrop-filter:blur(10px) saturate(1.15); -webkit-backdrop-filter:blur(10px) saturate(1.15);
  box-shadow:0 0 26px rgba(82,255,170,.22), inset 0 0 12px rgba(82,255,170,.10);
  transition: box-shadow .3s, border-color .3s, background .3s;
}
.filters-bar:hover{box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 36px rgba(80,255,180,.30), 0 0 60px rgba(54,225,143,.12); border-color:rgba(120,255,190,.70);}
.filters-bar::after{
  content:""; display:block; height:2px; margin-top:10px; border-radius:999px;
  background: radial-gradient(120% 120% at 50% 50%, rgba(120,255,190,.75), rgba(120,255,190,0) 70%); opacity:.35;
}
.filters-form{width:100%; display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; justify-content:flex-start;}
.filters-form .label{font-size:12px; letter-spacing:.28px; color:#baf7d3; font-weight:800; text-transform:uppercase; opacity:.95; display:inline-flex; align-items:center; height:42px;}

.chip-select-wrap{position:relative;}
.chip-select{
  height:42px; min-width:180px; padding:0 40px 0 14px; border-radius:999px;
  background:linear-gradient(135deg,#0d1f15,#03150c); color:#a8ffd4;
  border:1px solid rgba(80,255,180,.55); font-weight:800; letter-spacing:.2px; font-size:14px; appearance:none; cursor:pointer;
  box-shadow: inset 0 0 10px rgba(80,255,180,.2), 0 0 0 2px rgba(0,0,0,.25);
  transition: all .35s ease; line-height:42px;
}
.chip-select:hover{border-color:rgba(80,255,180,.9); box-shadow:0 0 25px rgba(80,255,180,.5), 0 0 40px rgba(80,255,180,.25); filter:brightness(1.08);}
.chip-select:focus{outline:none; box-shadow:0 0 30px rgba(80,255,180,.55), 0 0 60px rgba(80,255,180,.35); animation: glowPulse 2s infinite ease-in-out;}
.chip-select-wrap::after{content:"▾"; position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:12px; color:#50ffb4; pointer-events:none; text-shadow:0 0 8px rgba(80,255,180,.5);}

.chip-apply,.btn-reset{
  display:inline-flex; align-items:center; justify-content:center; height:42px; line-height:42px; padding:0 18px; border-radius:999px;
}
.chip-apply{
  border:1px solid rgba(80,255,180,.55);
  background:linear-gradient(135deg,#2edb88,#15a664); color:#001a0d; font-weight:900; letter-spacing:.3px; cursor:pointer;
  box-shadow:0 10px 24px rgba(80,255,180,.35), 0 0 0 2px rgba(0,0,0,.20) inset; transition:.3s;
}
.chip-apply:hover{transform:translateY(-1px); filter:brightness(1.1); box-shadow:0 14px 30px rgba(80,255,180,.45), 0 0 24px rgba(80,255,180,.35);}
.btn-reset{
  border:1px solid rgba(80,255,180,.55);
  background:linear-gradient(135deg,#0e1e14,#04160d); color:#a8ffd4; font-weight:800; letter-spacing:.2px; cursor:pointer;
  box-shadow: inset 0 0 10px rgba(80,255,180,.15), 0 0 18px rgba(80,255,180,.15); transition:.3s;
}
.btn-reset:hover{box-shadow:0 0 28px rgba(80,255,180,.45), 0 0 40px rgba(80,255,180,.25); border-color:rgba(80,255,180,.85); color:#dffff0; transform:translateY(-1px);}
@keyframes glowPulse{0%{box-shadow:0 0 10px rgba(80,255,180,.3), 0 0 20px rgba(80,255,180,.2);} 50%{box-shadow:0 0 25px rgba(80,255,180,.6), 0 0 45px rgba(80,255,180,.3);} 100%{box-shadow:0 0 10px rgba(80,255,180,.3), 0 0 20px rgba(80,255,180,.2);}}

/* ===================== */
/* Grille d’articles     */
/* ===================== */
.grid{margin-top:16px; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; align-items:stretch;}
.post-card{
  position:relative; display:flex; flex-direction:column; height:100%; overflow:hidden;
  background:var(--glass); border:1px solid rgba(61,220,132,.35); border-radius:14px;
  box-shadow:0 8px 30px rgba(0,0,0,.5), 0 0 24px rgba(61,220,132,.18), inset 0 0 18px rgba(61,220,132,.08);
  transition:transform .25s ease, box-shadow .3s ease;
}
.post-card:hover{transform:translateY(-4px) scale(1.02); box-shadow:0 14px 48px rgba(61,220,132,.4), 0 0 60px rgba(61,220,132,.25), inset 0 0 20px rgba(61,220,132,.15);}
.cover{width:100%; aspect-ratio:16/9; object-fit:cover; display:block;}
.post-body{padding:14px; display:grid; grid-template-rows:auto auto 1fr auto auto; gap:10px; flex:1;}
.post-title{font-size:20px; font-weight:900; color:#bbffcd; margin:0; text-shadow:0 0 10px rgba(61,220,132,.25);}
.post-date{font-size:12px; color:var(--text-muted);}
.excerpt{margin:2px 0 6px; color:var(--text-2); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; line-height:1.55;}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 4px;}
.chip{display:inline-block; font-size:12px; font-weight:800; padding:6px 10px; border-radius:999px; background:rgba(61,220,132,.25); border:1px solid rgba(61,220,132,.45); color:#d8ffe9; box-shadow:0 0 16px rgba(61,220,132,.20);}

/* ===================== */
/* Rails — blog & article*/
/* ===================== */
.rail-mask{
  position:relative; overflow:hidden; border-radius:12px;
  border:1px solid var(--border-soft); background:rgba(0,0,0,.25);
}
.rail-mask::before, .rail-mask::after{content:""; position:absolute; top:0; bottom:0; width:56px; z-index:2; pointer-events:none;}
.rail-mask::before{left:0; background:linear-gradient(90deg,rgba(0,0,0,.6)0%,transparent 100%);}
.rail-mask::after{right:0; background:linear-gradient(270deg,rgba(0,0,0,.6)0%,transparent 100%);}

/* rails (liste) */
.used-products-rail{display:flex; gap:12px; align-items:stretch; will-change:transform;}
/* rails (article) */
.media-strip, .products-strip{display:flex; gap:12px; align-items:stretch; will-change:transform;}

/* ===== CENTRAGE quand statique (tous rails) ===== */
.rail-mask.is-static{ display:flex; justify-content:center; }
.used-products-rail.is-static,
.media-strip.is-static,
.products-strip.is-static{
  width:max-content; margin-inline:auto; justify-content:center; transform:none !important;
}
.rail-mask.is-static::before, .rail-mask.is-static::after{ display:none !important; }

/* ===================== */
/* Cartes produit (blog) */
/* ===================== */
.product.product--sm{
  box-sizing:border-box; width:var(--prod-card-w); flex:0 0 var(--prod-card-w);
  background:rgba(20,40,30,0.8); border:1px solid var(--border-strong);
  border-radius:12px; padding:10px; color:var(--text);
  box-shadow:0 10px 28px rgba(0,0,0,.35),0 0 28px rgba(54,225,143,.25);
  transition:.25s ease; display:grid !important;
  grid-template-rows:auto calc(var(--prod-name-lines)*1em*var(--prod-name-lh)) var(--prod-meta-h) var(--prod-price-h);
  align-items:start;
}
.product.product--sm:hover{transform:translateY(-3px); box-shadow:0 14px 36px rgba(54,225,143,.45);}
.product.product--sm .thumb{position:relative; overflow:visible;}
.product.product--sm img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; border:1px solid var(--border-soft); background:#0c1712;}
.product.product--sm .name{
  margin-top:8px; text-align:center; line-height:var(--prod-name-lh);
  display:-webkit-box; -webkit-line-clamp:var(--prod-name-lines); -webkit-box-orient:vertical; overflow:hidden;
  min-height:calc(var(--prod-name-lines)*1em*var(--prod-name-lh));
}
.product.product--sm .mini-meta{margin-top:2px; text-align:center; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:var(--prod-meta-h);}
.product.product--sm .price{display:flex; gap:8px; align-items:baseline; justify-content:center; height:var(--prod-price-h); margin-top:6px;}
.product.product--sm > a{display:contents;}

/* Badges unifiés */
.badge-tested, .badge-approved, .badge-promo{
  position:absolute; top:8px; font-size:12px; line-height:1; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.3);
}
.badge-promo{left:8px; background:linear-gradient(135deg,#ff5454,#c81818); color:#fff; box-shadow:0 8px 20px rgba(255,60,60,.40);}
.badge-tested, .badge-approved{right:8px; background:linear-gradient(135deg,#50ffb4,#2edb88); color:#00180c; box-shadow:0 8px 20px rgba(61,220,132,.50);}

/* ===================== */
/* Article (modale)      */
/* ===================== */
.article-modal{ color:var(--text); }
.article-head{ text-align:center; margin-bottom:10px; }
.article-title{ margin:6px 0 4px; font-weight:900; color:#bbffcd; font-size:1.32rem; }
.article-date{ font-size:.92rem; color:var(--text-muted); }
.article-excerpt{ color:var(--text-2); line-height:1.55; }

.article-cover{
  width:100%; height:clamp(110px,16vw,200px); object-fit:cover;
  border-radius:12px; background:#0c1712; border:1px solid rgba(61,220,132,.35);
  box-shadow:0 10px 24px rgba(0,0,0,.35), 0 0 20px rgba(61,220,132,.18);
  margin:0 auto 14px; display:block;
}
.article-text{ color:#f3fff9; line-height:1.72; font-size:1rem; }
.article-text h2,.article-text h3,.article-text h4{ color:#ffffff; }
.article-text img{ max-width:100%; height:auto; display:block; margin:12px auto; border-radius:10px; border:1px solid rgba(61,220,132,.30); box-shadow:0 8px 22px rgba(0,0,0,.35); }

.media-gallery{ margin:16px 0 18px; }
.media-item{
  flex:0 0 auto; width:min(420px,85%); border-radius:12px; overflow:hidden;
  background:rgba(255,255,255,.06); border:1px solid var(--border-soft);
}
.media-item img{ width:100%; height:188px; object-fit:cover; display:block; background:#0c1712; }
.media-item figcaption{ padding:8px 10px; font-size:.85rem; color:#fff; background:linear-gradient(0deg,rgba(0,0,0,.55),transparent); }

/* Produits cités — cartes article */
.article-subtitle{ margin:18px 0 10px; text-align:center; font-weight:900; color:#dcffea; }
.product.article{
  flex:0 0 auto; width:var(--a-prod-w);
  background:rgba(20,40,30,.8); border:1px solid var(--border-strong);
  border-radius:12px; padding:8px; color:var(--text);
  box-shadow:0 8px 22px rgba(0,0,0,.35), 0 0 22px rgba(54,225,143,.18);
  text-align:center; display:grid; grid-template-rows:auto calc(var(--a-name-lines)*1em*var(--a-name-lh)) var(--a-price-h); align-items:start;
}
.product.article > a{ display:block; color:inherit; text-decoration:none; }
.product.article .thumb{ position:relative; }
.product.article img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; border:1px solid var(--border-soft); background:#0c1712; }
.product.article .name{
  margin-top:6px; font-weight:900; color:#f1fff6; font-size:.92rem;
  line-height:var(--a-name-lh); display:-webkit-box; -webkit-line-clamp:var(--a-name-lines); -webkit-box-orient:vertical; overflow:hidden;
  min-height:calc(var(--a-name-lines)*1em*var(--a-name-lh));
}
.product.article .price{ margin-top:4px; font-size:.92rem; color:#ffffff; display:flex; justify-content:center; gap:6px; align-items:center; height:var(--a-price-h); }
.product.article .price-old{ opacity:.8; text-decoration:line-through; font-size:.88rem; }

/* badges (article) — mêmes styles */
.product.article .badge-promo, .product.article .badge-tested{
  position:absolute; top:6px; font-size:.72rem; line-height:1; padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.28);
}
.product.article .badge-promo{ left:8px; background:linear-gradient(135deg,#ff5454,#c81818); color:#fff; }
.product.article .badge-tested{ right:8px; background:linear-gradient(135deg,#50ffb4,#2edb88); color:#00180c; }
.product.article .badge-tested svg{ width:16px; height:16px; }

/* ===================== */
/* Modale article        */
/* ===================== */
.modal{position:fixed; inset:0; z-index:2000; display:grid; place-items:center;}
.modal.hidden{display:none;}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(8px);}
.modal-dialog{
  position:relative; z-index:1; width:min(980px,92vw); max-height:86vh; overflow:auto;
  background:rgba(18,32,26,.92); border:1px solid var(--border-strong); border-radius:14px; box-shadow:0 20px 48px rgba(0,0,0,.6);
  animation:pop .2s ease;
}
.modal-close{
  position:fixed; top:12px; right:12px; width:56px; height:56px; border-radius:16px; cursor:pointer;
  display:grid; place-items:center; background:rgba(0,0,0,.55);
  color:var(--brand); border:1px solid var(--brand);
  backdrop-filter:blur(8px) saturate(1.1); -webkit-backdrop-filter:blur(8px) saturate(1.1);
  box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 22px rgba(80,255,180,.35);
  font-size:28px; line-height:1; z-index:3; transition:transform .15s, box-shadow .25s, background .25s, border-color .25s, color .25s;
}
.modal-close:hover{ transform:translateY(-1px) scale(1.02); background:rgba(0,0,0,.65); color:#50ffb4; border-color:#50ffb4; box-shadow:0 14px 36px rgba(0,0,0,.55), 0 0 36px rgba(80,255,180,.45); }
.modal-close:active{ transform:translateY(0) scale(.98); }
.modal-close:focus-visible{ outline:3px solid rgba(80,255,180,.75); outline-offset:3px; border-radius:14px; }
.modal-content{padding:16px;}
.loading{text-align:center; padding:28px; color:var(--text-muted);}
@keyframes pop{from{transform:translateY(8px) scale(.98); opacity:0;} to{transform:translateY(0) scale(1); opacity:1;}}

/* ===================== */
/* Responsive            */
/* ===================== */
:focus-visible{outline:3px solid rgba(54,225,143,.7); outline-offset:3px; border-radius:8px;}
@media (max-width:920px){ .chip-select{min-width:200px;} }
@media (max-width:560px){
  .grid{grid-template-columns:1fr;}
  :root{ --prod-card-w:200px; } /* garde 230px si tu préfères */
  .post-title{font-size:18px;}
  .product.article{ width:160px; }
  .media-item img{ height:210px; }
}

/* --- Forcer le texte en blanc sur les produits du rail de la page blog --- */
.product.product--sm .name,
.product.product--sm .mini-meta,
.product.product--sm .price,
.product.product--sm .price-old,
.product.product--sm .price-new {
  color:#fff;
}

/* --- Empêcher la description (mini-meta) d'empiéter sur le prix --- */
.product.product--sm .mini-meta{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  /* La ligne suivante est clé : on borne la hauteur à la piste de grille allouée */
  height: var(--prod-meta-h);         /* remplace visuellement le min-height */
  /* Optionnel : verrouiller la line-height pour une hauteur prévisible */
  line-height: 1.2;
}

/* --- Centrage parfait des rails quand ils sont en mode statique (pas assez d'items) --- */
.rail-mask.is-static{ display:flex; justify-content:center; }
.media-strip.is-static,
.products-strip.is-static{
  width:max-content;
  margin-inline:auto;
  justify-content:center;
  transform:none !important;
}
.rail-mask.is-static::before,
.rail-mask.is-static::after{
  display:none !important;
}

/* Réinitialiser (barre de recherche) — texte en blanc lisible */
.search-bar .btn-reset,
.search-bar .btn-reset:link,
.search-bar .btn-reset:visited {
  color: #fff !important;
}

.search-bar .btn-reset:hover,
.search-bar .btn-reset:focus {
  color: #fff !important;        /* garde le texte blanc au survol/focus */
  text-decoration: none;          /* optionnel : évite le soulignement */
}

/* Réinitialiser (à côté du champ de recherche) : texte toujours blanc */
.search-bar .search-form .btn-reset,
.search-bar .search-form .btn-reset:link,
.search-bar .search-form .btn-reset:visited {
  color: #fff !important;
}

.search-bar .search-form .btn-reset:hover,
.search-bar .search-form .btn-reset:focus {
  color: #fff !important;
}

/* ==== PATCH anti-chevauchement cartes d'articles ==== */

/* La carte se comporte en empilement normal, pas d'overlay */
.post-card { position: relative; display: grid; grid-template-columns: 1fr; }

/* Le visuel reste bloc, prend sa place, évite les flottants fantômes */
.post-card .cover { display:block; width:100%; height:auto; }

/* Le corps est au flux, sans position absolue, évite z-index sauvage */
.post-card .post-body { position: relative; z-index: 0; }

/* Titre, date, résumé : on force des espacements et un line-height correct */
.post-card .post-header { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.post-card .post-title { margin: 10px 0 4px; line-height: 1.25; }
.post-card .post-date { margin: 0 0 8px; }
.post-card .chips { margin: 4px 0 8px; }
.post-card .excerpt { margin: 8px 0 10px; line-height: 1.55; clear: both; }

/* Rail produits : on lui donne sa propre "rangée" et une hauteur auto */
.used-label { margin-top: 10px; }
.rail-mask { position: relative; overflow: hidden; }
.used-products-rail { display:flex; gap:12px; align-items:stretch; }

/* Chaque produit a son propre contexte d’empilement ; pas de chevauchement interne */
.product.product--sm { position: relative; z-index: 0; }
.product.product--sm .thumb { position: relative; overflow: hidden; border-radius: 8px; }
.product.product--sm .name { margin-top: 8px; line-height: 1.25; font-weight: 700; }
.product.product--sm .mini-meta { margin-top: 4px; line-height: 1.2; }
.product.product--sm .price { margin-top: 6px; }

/* Badges dans le rail "produits utilisés" : on les place EN BAS pour ne plus masquer l'image */
.product.product--sm .promo-thumb { position: relative; }
.product.product--sm .badge-promo,
.product.product--sm .badge-tested {
  position: absolute;
  bottom: .4rem;
  transform: none;
  opacity: .95;
}
.product.product--sm .badge-promo { left: .4rem; }
.product.product--sm .badge-tested { right: .4rem; }

/* Mode static (quand pas de défilement) : centrage OK, pas d’after/before */
.rail-mask.is-static { display:flex; justify-content:center; }
.products-strip.is-static { width:max-content; margin-inline:auto; justify-content:center; transform:none !important; }
.rail-mask.is-static::before, .rail-mask.is-static::after { display:none !important; }

/* Sécurité : toute image cassée libère de l’espace et ne casse pas le flux */
.post-card img[onerror] { min-height: 1px; }

/* Sur petits écrans, on augmente légèrement l’espace pour éviter les collisions */
@media (max-width: 520px){
  .post-card .excerpt { margin-bottom: 12px; }
}


/* ====== PATCH anti-empiètement titres / descriptions / prix ====== */

/* 1) Carte article : on borne le titre et le résumé */
.post-card .post-body{
  display: grid;
  grid-auto-rows: min-content;   /* chaque bloc prend sa hauteur réelle */
  row-gap: 10px;
}

.post-card .post-title{
  margin: 10px 0 4px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;         /* max 2 lignes */
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.post-card .excerpt{
  margin: 8px 0 10px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;         /* max 3 lignes */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Fallback si -webkit-line-clamp indisponible */
@supports not (-webkit-line-clamp: 2){
  .post-card .post-title{
    max-height: calc(2 * 1.25em);  /* 2 lignes à 1.25 */
    overflow: hidden;
  }
  .post-card .excerpt{
    max-height: calc(3 * 1.55em);  /* 3 lignes à 1.55 */
    overflow: hidden;
  }
}

/* 2) Cartes produit du rail (blog) : on fige les pistes et on coupe proprement */
.product.product--sm{
  display: grid !important;
  grid-template-rows:
    auto                                 /* image */
    calc(var(--prod-name-lines)*1em*var(--prod-name-lh))
    var(--prod-meta-h)
    var(--prod-price-h);
  align-items: start;
}

.product.product--sm .name{
  margin-top: 8px;
  line-height: var(--prod-name-lh);
  display: -webkit-box;
  -webkit-line-clamp: var(--prod-name-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: calc(var(--prod-name-lines)*1em*var(--prod-name-lh)); /* hauteur fixe → pas d’empiètement */
}

.product.product--sm .mini-meta{
  margin-top: 4px;
  line-height: 1.2;
  height: var(--prod-meta-h);      /* borne stricte */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.product.product--sm .price{
  margin-top: 6px;
  height: var(--prod-price-h);     /* borne stricte */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
}

/* Sécurité : casse des mots trop longs */
.post-card .post-title, .post-card .excerpt,
.product.product--sm .name, .product.product--sm .mini-meta{
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Badges — taille/position unifiées (cartes blog + article) */
.product.product--sm .badge-promo,
.product.product--sm .badge-tested,
.product.article .badge-promo,
.product.article .badge-tested{
  top: 8px !important;
  bottom: auto !important;
  transform: none !important;
  font-size: 11px !important;
  padding: 4px 8px !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  z-index: 3 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.35) !important;
}

/* Coin gauche pour PROMO, coin droit pour TESTÉ */
.product.product--sm .badge-promo,
.product.article .badge-promo { left: 8px !important; right: auto !important; }

.product.product--sm .badge-tested,
.product.article .badge-tested { right: 8px !important; left: auto !important; }

/* Icône testée — mini */
.product.product--sm .badge-tested svg,
.product.article .badge-tested svg{
  width: 14px !important; height: 14px !important; vertical-align: -2px;
}

/* Bouton "Lire l’article" harmonisé */
.post-actions .btn-read{
  display:inline-flex; align-items:center; justify-content:center;
  height: 42px; line-height: 42px; padding: 0 18px;
  border-radius: 999px;
  border:1px solid rgba(80,255,180,.55);
  background: linear-gradient(135deg,#2edb88,#15a664);
  color:#001a0d; font-weight:900; letter-spacing:.3px; text-decoration:none;
  box-shadow:0 10px 24px rgba(80,255,180,.35), 0 0 0 2px rgba(0,0,0,.20) inset;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.post-actions .btn-read:hover{
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow:0 14px 30px rgba(80,255,180,.45), 0 0 24px rgba(80,255,180,.35);
}
.post-actions .btn-read:focus-visible{
  outline:3px solid rgba(80,255,180,.75); outline-offset:3px;
}

/* Sécurité flex dans les rails */
.used-products-rail > *,
.media-strip > *,
.products-strip > * {
  flex: 0 0 auto;
}