:root{
  --cream:#f6f5ef; --paper:#fffffe; --ink:#16241c; --ink-soft:#45564c; --ink-mute:#7b877e;
  --forest:#1f6b52; --forest-deep:#143d30; --forest-2:#2a8666; --mint:#e7f0ea; --mint-2:#d7e8dd;
  --lime:#9ac81f; --lime-deep:#6f9a12; --gold:#c98b2e; --line:#e4e6df;
  --shadow:0 10px 40px -18px rgba(20,61,48,.35); --shadow-sm:0 4px 18px -10px rgba(20,61,48,.3);
  --serif:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,-apple-system,sans-serif; --wrap:1280px; --wrap-wide:1480px;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);background:var(--cream);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-wide{max-width:var(--wrap-wide);margin:0 auto;padding:0 32px}
@media(max-width:860px){.wrap-wide{padding:0 18px}}
/* Pages larges : le header s'aligne sur le conteneur large. */
body.layout-wide .site .wrap{max-width:var(--wrap-wide);padding:0 32px}
@media(max-width:860px){body.layout-wide .site .wrap{padding:0 18px}}
.serif{font-family:var(--serif)}

/* header */
header.site{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--cream) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:20px;height:68px}
.logo{font-family:var(--serif);font-weight:600;font-size:18px;letter-spacing:-.02em;display:flex;align-items:center;gap:9px;color:var(--ink);white-space:nowrap;flex-shrink:0}
.logo .mk{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(150deg,var(--forest-2),var(--forest-deep));color:#eaf7ef;flex-shrink:0}
.logo .mk svg{width:18px;height:18px}
.nav .links{display:flex;gap:18px;margin-left:auto;align-items:center}
.nav .links > a,.has-sub > a{font-size:13.5px;font-weight:500;color:var(--ink-soft);position:relative;padding:4px 0;white-space:nowrap;display:inline-flex;align-items:center;gap:3px}
.nav .links a:hover{color:var(--forest)}
.nav .links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--lime);transition:right .25s}
.nav .links a:hover::after{right:0}
.has-sub{position:relative}
.has-sub > .sub-toggle{cursor:pointer;user-select:none}
.has-sub .caret{font-size:10px;color:var(--ink-mute)}
.has-sub .sub-menu{position:absolute;top:100%;left:0;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px;min-width:210px;display:none;flex-direction:column;gap:2px;z-index:60}
/* Survol reserve aux appareils qui SURVOLENT vraiment. Sur iOS, un tap laisse l'element en
   etat :hover jusqu'au tap suivant : le sous-menu restait donc ouvert meme apres le retrait
   de la classe, et le menu paraissait impossible a refermer. */
@media(hover:hover) and (pointer:fine){ .has-sub:hover .sub-menu{display:flex} }
.has-sub .sub-menu a{padding:8px 12px;border-radius:8px;font-size:13.5px;white-space:nowrap}
.has-sub .sub-menu a::after{display:none}
.has-sub .sub-menu a:hover{background:var(--mint);color:var(--forest)}
/* Entrée phare "Meilleurs X" : pill accentué pour la faire ressortir dans le menu */
.nav .links a.nav-lead,.nav .links .has-sub.nav-lead>a{background:var(--mint);color:var(--forest);font-weight:600;padding:7px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--forest) 20%,transparent);transition:background .2s,border-color .2s,transform .2s}
.nav .links a.nav-lead::after,.nav .links .has-sub.nav-lead>a::after{display:none}
.nav .links a.nav-lead:hover,.nav .links .has-sub.nav-lead:hover>a{background:var(--lime);color:var(--forest);border-color:var(--lime);transform:translateY(-1px)}
.nav .right{margin-left:14px;display:flex;align-items:center;gap:12px}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;padding:11px 20px;border-radius:999px;cursor:pointer;border:0;transition:transform .15s,box-shadow .2s;font-family:var(--sans);text-align:center;justify-content:center}
.btn-primary{background:var(--forest);color:#f2fbf5;box-shadow:0 8px 22px -10px rgba(31,107,82,.7)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-lime{background:var(--lime);color:#1c2b06;box-shadow:0 8px 22px -10px rgba(154,200,31,.8)}
.btn-lime:hover{transform:translateY(-1px)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:860px){
  .burger{display:flex}
  .hide-mobile{display:none}
  .nav .right{margin-left:auto}
  /* Sur mobile, l'entrée phare redevient une ligne de liste plate (pas de pill) */
  .nav .links a.nav-lead,.nav .links .has-sub.nav-lead>a{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:13px 0;color:var(--forest);transform:none}
  /* Drawer fermé = totalement invisible (pas de fond/bordure/ombre -> plus de rectangle sous le header) */
  /* align-items:stretch obligatoire : la regle desktop centre les entrees, et en colonne cela
     centrait chaque libelle avec un trait de separation a sa propre largeur, d'ou l'escalier. */
  .nav .links{position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:0 24px;margin:0;max-height:0;overflow:hidden;transition:max-height .3s ease}
  .nav .links.open{max-height:82vh;overflow-y:auto;background:var(--cream);border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);padding:6px 24px 16px}
  .nav .links a{white-space:normal} /* pas de nowrap sur mobile -> aucun débordement horizontal */
  .nav .links > a,.has-sub > a{padding:14px 0;font-size:16px;border-bottom:1px solid var(--line);width:100%;justify-content:flex-start;text-align:left}
  .nav .links > a::after,.has-sub > a::after{display:none} /* le soulignement au survol n'a pas de sens au doigt */
  .nav .links .sub-menu a{justify-content:flex-start;text-align:left}
  .has-sub > a{justify-content:space-between}
  .has-sub .caret{display:inline-block;font-size:12px;transition:transform .2s}
  .has-sub.open > a .caret{transform:rotate(180deg);color:var(--forest)}
  /* Sous-menus fermés par défaut (accordéon) */
  .has-sub .sub-menu{position:static;display:none;border:0;box-shadow:none;padding:2px 0 8px 14px;border-radius:0;background:transparent}
  .has-sub.open .sub-menu{display:flex}
  .has-sub .sub-menu a{font-size:14.5px;padding:9px 0;color:var(--ink-mute);border-bottom:0}
}

/* hero */
.hero{position:relative;overflow:hidden;padding:0}/* le hero gère son espacement via .wrap (annule le section{padding:66px}) */
.hero::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(120% 90% at 88% -10%,var(--mint) 0,transparent 55%),radial-gradient(90% 70% at 8% 110%,#eef4ea 0,transparent 60%)}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start;padding:30px 24px 40px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--forest);background:var(--mint);border:1px solid var(--mint-2);padding:7px 14px;border-radius:999px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(154,200,31,.25)}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(38px,5.2vw,62px);line-height:1.03;letter-spacing:-.025em;margin:20px 0 0;text-wrap:balance}
.hero h1 em{font-style:italic;color:var(--forest)}
.hero .sub{font-size:18px;color:var(--ink-soft);margin:18px 0 0;max-width:46ch}
.hero .cta-row{display:flex;align-items:center;gap:14px;margin-top:30px;flex-wrap:wrap}
.hero .trust{display:flex;align-items:center;gap:18px;margin-top:30px;flex-wrap:wrap}
.hero .trust .stars{color:var(--gold);letter-spacing:2px;font-size:15px}
.hero .trust .t{font-size:13.5px;color:var(--ink-mute)}
.hero .trust b{color:var(--ink);font-weight:700}
.hero .trust .sep{width:1px;height:30px;background:var(--line)}
.hero-card{position:relative;align-self:center}
.scene{position:relative;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);background:linear-gradient(150deg,var(--forest-2,#2a5f47) 0,var(--forest,#1f6b52) 55%,var(--lime,#9ac81f) 160%);aspect-ratio:4/2.95}
.scene.scene-img{background:none}
.scene img{width:100%;height:100%;object-fit:cover;display:block}
.badge-float{position:absolute;background:var(--paper);border-radius:16px;padding:12px 15px;box-shadow:var(--shadow);display:flex;align-items:center;gap:11px;border:1px solid var(--line)}
.badge-float.b1{top:22px;left:-18px}
.score-chip{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:17px;color:#fff;background:linear-gradient(150deg,var(--forest-2),var(--forest))}
.badge-float .l1{font-size:12px;color:var(--ink-mute)}
.badge-float .l2{font-size:13.5px;font-weight:600}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:30px}.hero-card{max-width:480px}.badge-float.b1{left:0}}

/* sections */
section{padding:66px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px;flex-wrap:wrap}
.sec-head .k{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--forest-2)}
.sec-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3.4vw,38px);letter-spacing:-.02em;margin-top:8px;line-height:1.08;text-wrap:balance}
.sec-head p{color:var(--ink-soft);margin-top:6px;max-width:52ch}
.link-more{font-weight:600;font-size:14px;color:var(--forest);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.link-more:hover{gap:10px}

.brands{background:var(--forest-deep);color:#dfeee5;padding:30px 0;overflow:hidden}
.brands .wrap{display:flex;justify-content:center;padding:0 24px 18px}
.brands .lab{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:#9fc4b1}
/* Marquee défilant */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;gap:44px;width:max-content;animation:marquee 45s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee .b{font-family:var(--serif);font-weight:600;font-size:21px;opacity:.85;letter-spacing:-.01em;color:#dfeee5;white-space:nowrap;flex-shrink:0}
.marquee .b:hover{opacity:1;color:#eafff2}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;justify-content:center}}

.grid-surface{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.surface{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:24px 22px;transition:transform .2s,box-shadow .2s,border-color .2s;color:var(--ink)}
.surface:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--mint-2)}
.surface .ic{width:46px;height:46px;border-radius:12px;background:var(--mint);color:var(--forest);display:grid;place-items:center;margin-bottom:16px}
.surface h3{font-family:var(--serif);font-size:20px;font-weight:600}
.surface .m{font-size:13.5px;color:var(--ink-mute);margin-top:3px}
.surface .go{margin-top:16px;font-size:13.5px;font-weight:600;color:var(--forest)}
@media(max-width:900px){.grid-surface{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.grid-surface{grid-template-columns:1fr}}

.grid-tests{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;color:var(--ink)}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.card .ph{aspect-ratio:1.35;position:relative;display:grid;place-items:center;overflow:hidden;background:#fff}
.card .ph .card-img{width:100%;height:100%;object-fit:contain;padding:14px}
.card .ph .score{position:absolute;top:12px;left:12px;width:46px;height:46px;border-radius:12px;background:#fff;box-shadow:var(--shadow-sm);display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:17px;color:var(--forest);border:2px solid var(--lime);z-index:2}
.card .ph .tag{position:absolute;top:14px;right:12px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:#fff;padding:4px 9px;border-radius:999px;z-index:2;max-width:calc(100% - 84px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .ph .mow-ic{width:76px;height:76px;opacity:.9}
.card .body{padding:16px 17px 18px;display:flex;flex-direction:column;gap:4px;flex:1}
.card .brand{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--forest-2)}
.card h3{font-family:var(--serif);font-size:18.5px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.card .row{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:12px}
.card .price{font-weight:700;font-size:16px}
.card .price s{color:var(--ink-mute);font-weight:400;font-size:13px;margin-right:5px}
.card .see{font-size:13px;font-weight:600;color:var(--forest)}
@media(max-width:980px){.grid-tests{grid-template-columns:repeat(2,1fr)}}
/* Mobile : 2 produits par ligne (pas 1), cartes compactes */
@media(max-width:560px){
  .grid-tests{gap:12px}
  .card{border-radius:14px}
  .card .body{padding:11px 12px 13px;gap:3px}
  .card h3{font-size:15px}
  .card .brand{font-size:10.5px}
  .card .price{font-size:14.5px}
  .card .see{font-size:11.5px}
  .card .ph .score{width:38px;height:38px;font-size:14px;top:8px;left:8px}
  .card .ph .tag{font-size:9px;padding:3px 7px;top:8px;right:8px}
  .card .row{padding-top:8px;flex-direction:column;align-items:flex-start;gap:4px}
}

.podium{background:var(--mint)}
.podium-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:end}
.pod{background:var(--paper);border-radius:18px;padding:26px 22px;text-align:center;box-shadow:var(--shadow-sm);border:1px solid var(--line)}
.pod.first{border:2px solid var(--lime);box-shadow:var(--shadow);transform:translateY(-14px)}
.pod .rank{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--gold)}
.pod .medal{font-size:34px}
.pod h3{font-family:var(--serif);font-size:20px;font-weight:600;margin-top:6px}
.pod h3 a{color:var(--ink)}
.pod .sc{font-family:var(--serif);font-weight:700;font-size:30px;color:var(--forest);margin-top:8px}
.pod .why{font-size:13px;color:var(--ink-mute);margin-top:4px}
@media(max-width:760px){.podium-grid{grid-template-columns:1fr}.pod.first{transform:none}}

.guides{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.guide{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px;transition:border-color .2s,transform .2s;color:var(--ink)}
.guide:hover{border-color:var(--forest-2);transform:translateY(-3px)}
.guide .k{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--lime-deep)}
.guide h3{font-family:var(--serif);font-size:19px;font-weight:600;margin-top:8px;line-height:1.25}
.guide .rd{margin-top:12px;font-size:13px;font-weight:600;color:var(--forest)}
@media(max-width:860px){.guides{grid-template-columns:1fr}}

/* ---- Section Qui sommes-nous (home) ---- */
.about-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.about-text .k{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--lime-deep)}
.about-text h2{font-family:var(--serif);font-size:clamp(26px,3.4vw,38px);font-weight:600;letter-spacing:-.02em;margin:8px 0 18px;line-height:1.1;text-wrap:balance}
.about-text p{color:var(--ink-soft);margin:0 0 14px;font-size:15.5px}
.about-text .btn{margin-top:14px}
.about-media{display:grid;grid-template-columns:1.25fr 1fr;grid-auto-rows:1fr;gap:16px}
.about-panel{border-radius:20px;background:linear-gradient(160deg,var(--mint),var(--mint-2));display:grid;place-items:center;overflow:hidden;box-shadow:var(--shadow-sm);min-height:150px}
.about-panel img,.ap-panel img,.ap-media-single img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.ap-panel,.ap-media-single{overflow:hidden}
.about-panel .mow-ic{width:46%;opacity:.8}
.about-panel.p1{grid-row:span 2}
@media(max-width:860px){.about-grid{grid-template-columns:1fr;gap:30px}.about-panel.p1{grid-row:auto}}

/* ---- Blog (home) : layout magazine ---- */
.blog-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:18px}
.blog-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;color:var(--ink);transition:transform .2s,box-shadow .2s}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.blog-ph{aspect-ratio:1.6;background:linear-gradient(160deg,var(--mint),var(--mint-2));display:grid;place-items:center;overflow:hidden}
.blog-ph img{width:100%;height:100%;object-fit:cover}
.blog-ph .mow-ic{width:38%;opacity:.75}
.blog-body{padding:15px 16px 17px;display:flex;flex-direction:column;gap:6px;flex:1}
.blog-body .k{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--lime-deep)}
.blog-body h3{font-family:var(--serif);font-size:16.5px;font-weight:600;line-height:1.25}
.blog-exc{font-size:14px;color:var(--ink-soft);margin:0}
.blog-body .rd{margin-top:auto;padding-top:8px;font-size:12.5px;font-weight:600;color:var(--forest)}
.blog-card.feat{grid-column:span 2;grid-row:span 2}
.blog-card.feat .blog-ph{aspect-ratio:2.1}
.blog-card.feat h3{font-size:24px}
@media(max-width:980px){.blog-grid{grid-template-columns:repeat(2,1fr)}.blog-card.feat{grid-column:span 2;grid-row:auto}.blog-card.feat .blog-ph{aspect-ratio:1.8}}
@media(max-width:560px){.blog-grid{grid-template-columns:1fr}.blog-card.feat{grid-column:auto}}

/* ---- Guides en silos (page /guides/ + archives de silo) ---- */
.guides-hero{background:linear-gradient(180deg,var(--mint),var(--cream));padding:40px 0 30px}
.guides-hero .breadcrumb{margin-bottom:14px}
.guides-hero h1{font-family:var(--serif);font-size:clamp(30px,4.4vw,48px);font-weight:600;letter-spacing:-.025em;line-height:1.05;margin:6px 0 0;text-wrap:balance}
.guides-hero .sub{font-size:17px;color:var(--ink-soft);margin:14px 0 0;max-width:62ch}
.silo-jump{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.silo-jump a{font-size:13px;font-weight:600;color:var(--forest);background:var(--paper);border:1px solid var(--mint-2);padding:7px 14px;border-radius:999px;transition:background .2s,border-color .2s}
.silo-jump a:hover{background:var(--mint);border-color:var(--forest-2)}
.guides-wrap{padding:40px 24px 56px;display:flex;flex-direction:column;gap:46px}
.silo{scroll-margin-top:88px}
.silo-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.silo-head h2{font-family:var(--serif);font-size:clamp(22px,2.6vw,29px);font-weight:600;letter-spacing:-.02em;margin:0}
.silo-desc{color:var(--ink-soft);font-size:14.5px;margin:7px 0 0;max-width:70ch}
.silo-all{font-weight:600;font-size:14px;color:var(--forest);white-space:nowrap;display:inline-flex;gap:6px}
.silo-all:hover{gap:10px}
.silo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gcard{background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;color:var(--ink);transition:transform .2s,box-shadow .2s,border-color .2s}
.gcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--mint-2)}
.gcard-ph{aspect-ratio:1.9;overflow:hidden;background:var(--mint)}
.gcard-ph img{width:100%;height:100%;object-fit:cover;display:block}
.gcard-ph.is-ph{display:grid;place-items:center}
.gcard-body{padding:16px 17px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.gcard-body .k{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--lime-deep)}
.gcard-body h3{font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.28}
.gcard-ex{font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.gcard-rd{margin-top:auto;padding-top:6px;font-size:13px;font-weight:600;color:var(--forest)}
.silo-topics{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 28px}
.silo-topics li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink-soft);padding:6px 0}
.silo-topics .dot-sq{width:7px;height:7px;border-radius:2px;background:var(--lime);flex-shrink:0}
.silo-topics em{margin-left:auto;font-style:normal;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mute);background:var(--mint);padding:3px 9px;border-radius:999px}
.silo-empty{color:var(--ink-mute);padding:8px 0}
/* Article de guide (single post) */
.guide-single{max-width:760px;padding-top:34px;padding-bottom:48px}
.guide-single .k{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--lime-deep);margin-top:10px}
.guide-title{font-size:clamp(28px,4vw,42px);letter-spacing:-.02em;line-height:1.08;margin:8px 0 20px}
.guide-hero-img{border-radius:18px;overflow:hidden;margin-bottom:26px}
.guide-hero-img img{width:100%;height:auto;display:block}
@media(max-width:900px){.silo-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.silo-grid,.silo-topics{grid-template-columns:1fr}.silo-head{flex-direction:column;align-items:flex-start;gap:8px}}

/* ---- Texte SEO + maillage (home) ---- */
.home-seo{background:var(--cream)}
.home-seo-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:52px;align-items:start}
.home-seo h2{font-family:var(--serif);font-size:clamp(24px,3vw,32px);font-weight:600;letter-spacing:-.02em;margin:0 0 16px;text-wrap:balance}
.home-seo p{color:var(--ink-soft);font-size:15.5px;margin:0 0 14px}
.home-seo-text a{color:var(--forest);font-weight:600;text-decoration:underline;text-decoration-color:var(--mint-2);text-underline-offset:2px}
.home-seo-text a:hover{text-decoration-color:var(--forest)}
.home-seo-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:84px}
.seo-box{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px 24px;box-shadow:var(--shadow-sm)}
.seo-box h3{font-family:var(--serif);font-size:17px;font-weight:600;margin:0 0 14px}
@media(max-width:860px){.home-seo-grid{grid-template-columns:1fr;gap:28px}.home-seo-side{position:static}}
.seo-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.seo-links a{display:inline-flex;padding:9px 16px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--forest);transition:all .16s}
.seo-links a:hover{border-color:var(--forest);background:var(--mint);transform:translateY(-1px)}

/* ---- Page Qui sommes-nous ---- */
.about-page section{padding:64px 0}
.about-page .k{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--lime-deep)}
.about-page h2{font-family:var(--serif);font-size:clamp(26px,3.4vw,38px);font-weight:600;letter-spacing:-.02em;margin:8px 0 16px;line-height:1.1;text-wrap:balance}
.about-page p{color:var(--ink-soft);font-size:15.5px;margin:0 0 14px}
.ap-hero{background:linear-gradient(180deg,var(--mint),var(--cream))}
.ap-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.ap-hero h1{font-family:var(--serif);font-size:clamp(34px,4.6vw,52px);font-weight:600;letter-spacing:-.025em;line-height:1.04;margin:10px 0 18px;text-wrap:balance}
.ap-lead{font-size:17px;color:var(--ink-soft);max-width:52ch;margin-bottom:26px}
.ap-hero-media{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:14px}
.ap-panel{border-radius:20px;background:linear-gradient(160deg,var(--mint),var(--mint-2));display:grid;place-items:center;min-height:130px;box-shadow:var(--shadow-sm)}
.ap-panel.big{grid-column:span 2;min-height:200px}
.ap-panel .mow-ic{width:36%;opacity:.8}
.ap-two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.ap-media-single{border-radius:24px;background:linear-gradient(160deg,var(--mint),var(--mint-2));display:grid;place-items:center;min-height:300px;box-shadow:var(--shadow-sm)}
.ap-media-single .mow-ic{width:40%;opacity:.8}
.ap-story{background:var(--cream)}
.ap-method{background:var(--paper)}
.ap-method .sec-head{margin-bottom:10px}
.ap-method-intro{max-width:72ch;margin:0 0 34px;font-size:16px}
.ap-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ap-card{background:var(--cream);border:1px solid var(--line);border-radius:20px;padding:28px}
.ap-ic{font-size:30px;margin-bottom:12px;line-height:1}
.ap-card h3{font-family:var(--serif);font-size:20px;font-weight:600;margin:0 0 8px}
.ap-card p{margin:0;font-size:14.5px}
.ap-diff{background:var(--cream)}
.ap-indep .band .k{margin-bottom:6px}
.ap-indep .band p{color:#cfe4d6;max-width:62ch;margin:0 auto 10px;font-size:16px}
@media(max-width:860px){.ap-hero-grid,.ap-two{grid-template-columns:1fr;gap:30px}.ap-cards{grid-template-columns:1fr}.ap-media-single{min-height:220px}.ap-diff .ap-media-single.alt{order:-1}}
/* Méthodologie : hero + corps alignés sur la même colonne (820px), écart resserré */
.legal-brand .ap-hero .wrap{max-width:820px}
.legal-brand .ap-hero{padding-bottom:18px}
.legal-brand .ap-story{padding-top:22px}
.methodo-wrap{max-width:820px;margin:0 auto}
.methodo-block{margin-bottom:38px}
.methodo-block.highlight{background:var(--mint);border-left:4px solid var(--lime);border-radius:16px;padding:26px 30px;margin-bottom:44px}
.methodo-block ul{color:var(--ink-soft);padding-left:22px;margin:0 0 14px;font-size:15.5px}
.methodo-block li{margin-bottom:7px}
.methodo-block .btn{margin-top:12px}

/* Pages légales (texte lisible) */
.legal-page{padding:56px 0 80px}
.legal-page .wrap{max-width:840px}
.legal-page .k{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--lime-deep)}
.legal-page h1{font-family:var(--serif);font-size:clamp(30px,4vw,42px);font-weight:600;letter-spacing:-.02em;margin:8px 0 6px;line-height:1.1}
.legal-upd{color:var(--ink-mute);font-size:13.5px;margin-bottom:28px}
.legal-page h2{font-family:var(--serif);font-size:22px;font-weight:600;margin:34px 0 10px;color:var(--forest);letter-spacing:-.01em}
.legal-page p{color:var(--ink-soft);font-size:15.5px;margin:0 0 14px}
.legal-page a{color:var(--forest);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.legal-info{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:7px}
.legal-info li{color:var(--ink-soft);font-size:15px;line-height:1.5}

.band{background:linear-gradient(140deg,var(--forest) 0,var(--forest-deep) 100%);color:#eafff2;border-radius:26px;padding:52px 44px;text-align:center;position:relative;overflow:hidden}
.band::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(154,200,31,.35),transparent 70%)}
.band h2{font-family:var(--serif);font-size:clamp(26px,3.4vw,38px);font-weight:600;letter-spacing:-.02em;text-wrap:balance;color:#eafff2}
.band p{color:#bfe0cd;margin-top:10px;max-width:46ch;margin-inline:auto}
.band .cta-row{margin-top:24px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

footer.site{background:var(--forest-deep);color:#bcd6c7;padding:54px 0 30px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
.foot-grid>div{min-width:0}.foot-grid a{overflow-wrap:anywhere}
footer .logo{color:#eafff2;margin-bottom:12px}
footer p.desc{font-size:13.5px;color:#9fc4b1;max-width:34ch}
footer h4,footer .foot-t{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#86b39c;margin-bottom:12px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0;padding:0}
footer ul a{font-size:14px;color:#cfe4d6}
footer ul a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:34px;padding-top:18px;font-size:12.5px;color:#86b39c;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}

/* Entrée en CSS pur : le contenu finit TOUJOURS visible, même si app.js ne charge pas (429). */
.reveal{animation:revealIn .6s ease both}
.reveal.in{opacity:1;transform:none}
@keyframes revealIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.reveal{animation:none}}

/* ---- Fiche produit (single test) ---- */
.fiche{padding-top:24px;padding-bottom:20px}
.breadcrumb{font-size:12.5px;color:var(--ink-mute);margin-bottom:20px}
.breadcrumb a{color:var(--forest)}
.breadcrumb span{color:var(--ink-soft)}
.fiche-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.gallery{border-radius:22px;overflow:hidden;box-shadow:var(--shadow-sm);aspect-ratio:1;display:grid;place-items:center}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery .mow-ic{width:120px;height:120px}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.thumb{aspect-ratio:1;border-radius:12px;display:grid;place-items:center;cursor:pointer;border:1px solid var(--line)}
.thumb .mow-ic{width:40px;height:40px}
.thumb:hover{border-color:var(--forest-2)}
.summary30{margin:20px 0 0;background:var(--mint);border-radius:16px;padding:18px 20px;border-left:3px solid var(--lime)}
.summary30 .q-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--forest)}
.summary30 p{margin:6px 0 0;font-size:15px;color:var(--ink)}
.fiche-card{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:var(--shadow-sm);position:sticky;top:84px}
.fiche .badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--lime);color:#1c2b06;padding:5px 11px;border-radius:999px}
.fiche h1{font-family:var(--serif);font-size:clamp(26px,3.6vw,36px);font-weight:600;letter-spacing:-.02em;margin:12px 0 4px;line-height:1.1}
.h1-sub{display:block;font-family:var(--sans);font-size:15px;font-weight:500;color:var(--ink-mute);margin-top:10px;line-height:1.45;letter-spacing:0}
.fiche .brand{font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--forest-2);font-size:13px}
.fiche .variant{color:var(--ink-mute);margin:0}
.cta-box{display:flex;align-items:center;gap:18px;margin:20px 0 8px;padding:18px;border-radius:16px;background:var(--mint);border:1px solid var(--mint-2)}
.cta-box .big-score{width:70px;height:70px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:26px;color:#fff;background:linear-gradient(150deg,var(--forest-2),var(--forest));flex-shrink:0;line-height:1}
.cta-box .big-score small{font-size:11px;font-weight:400;opacity:.85}
.cta-box .price{font-weight:700;font-size:22px}
.cta-box .price s{color:var(--ink-mute);font-weight:400;font-size:15px;margin-right:6px}
.cta-note{font-size:11px;color:var(--ink-mute);margin:8px 0 0;text-align:center}
.scores-list{display:flex;flex-direction:column;gap:12px;margin:18px 0 0}
.score-line .top{display:flex;justify-content:space-between;font-size:13.5px;font-weight:600;margin-bottom:5px}
.score-line .bar{height:8px;border-radius:999px;background:var(--mint-2);overflow:hidden}
.score-line .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--forest-2),var(--lime));border-radius:999px}
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:32px 0}
.pc{border-radius:16px;padding:20px;border:1px solid var(--line)}
.pc.pros{background:#f0f7f1;border-color:#cfe6d5}.pc.cons{background:#fbf3f1;border-color:#eed6d2}
.pc h4{font-family:var(--serif);font-size:17px;margin-bottom:12px}
.pc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14px}
.pc.pros li::before{content:"✓ ";color:var(--forest);font-weight:700}
.pc.cons li::before{content:"✕ ";color:#c0483e;font-weight:700}
/* Article long-form */
.article{max-width:760px;margin:10px auto 0;font-size:16.5px;line-height:1.75;color:var(--ink-soft)}
.article .lead{font-size:19px;color:var(--ink);line-height:1.6}
.article h2{font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:38px 0 12px;line-height:1.15}
.article p{margin:0 0 16px}
.article strong{color:var(--ink)}
.specs{width:100%;border-collapse:collapse;margin:8px 0 24px;font-size:14.5px}
.specs td{padding:11px 4px;border-bottom:1px solid var(--line)}
.specs td:first-child{color:var(--ink-mute)}
.specs td:last-child{text-align:right;font-weight:600;color:var(--ink)}
.profil-box{background:var(--mint);border-radius:18px;padding:26px;margin:30px 0}
.profil-box h3{font-family:var(--serif);font-size:21px;margin-bottom:16px}
.profil-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.profil-grid span{display:inline-block;font-weight:700;font-size:13px;margin-bottom:6px}
.profil-grid .p-yes{color:var(--forest)}.profil-grid .p-no{color:#c0483e}
.profil-grid p{margin:0;font-size:14.5px;color:var(--ink-soft)}
.verdict{background:linear-gradient(140deg,var(--forest),var(--forest-deep));color:#eafff2;border-radius:18px;padding:28px;margin:30px 0}
.verdict h3{font-family:var(--serif);font-size:22px;margin-bottom:10px;color:#eafff2}
.verdict p{color:#cfe4d6;margin:0 0 4px}
.cta-inline{display:flex;align-items:center;gap:16px;margin-top:18px;flex-wrap:wrap}
.cta-inline .price{font-weight:700;font-size:20px;color:#fff}
.cta-inline .price s{opacity:.6;font-weight:400;font-size:14px;margin-right:6px}
/* Sticky CTA */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -8px 30px -14px rgba(20,61,48,.4);transform:translateY(100%);transition:transform .3s ease;padding:10px 0}
.sticky-cta.show{transform:translateY(0)}
.sticky-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.sticky-info{display:flex;align-items:center;gap:12px;min-width:0}
.sticky-score{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:16px;color:#fff;background:linear-gradient(150deg,var(--forest-2),var(--forest));flex-shrink:0}
.sticky-name{font-family:var(--serif);font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-right{display:flex;align-items:center;gap:14px;flex-shrink:0}
.sticky-price{font-weight:700;font-size:18px}
@media(max-width:560px){.sticky-name{display:none}.sticky-price{font-size:16px}.sticky-cta .btn{padding:10px 16px}}
/* Carrousel alternatives */
.alternatives{background:var(--mint);margin-top:20px}
.carousel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:18px;overflow-x:auto;padding:6px 2px 16px;scroll-snap-type:x mandatory}
.carousel .card{scroll-snap-align:start}
.carousel::-webkit-scrollbar{height:8px}
.carousel::-webkit-scrollbar-thumb{background:var(--mint-2);border-radius:999px}
@media(max-width:860px){.fiche-grid{grid-template-columns:1fr}.pros-cons{grid-template-columns:1fr}.profil-grid{grid-template-columns:1fr}.fiche-card{position:static}}

/* ---- Collections + filtres ---- */
/* padding vertical seulement : ne pas écraser le padding horizontal de .wrap-wide */
.coll-head{padding-top:40px;padding-bottom:10px}
.coll-head .breadcrumb{margin-bottom:16px;font-size:13px;color:var(--ink-mute)}
.coll-head .breadcrumb a{color:var(--ink-soft)}
.coll-head .breadcrumb a:hover{color:var(--forest)}
.coll-back{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--forest);background:var(--mint);border:1px solid var(--line);border-radius:999px;padding:7px 15px;margin-bottom:16px;transition:all .16s}
.coll-back:hover{background:var(--mint-2);transform:translateX(-2px)}
/* ---- Page index d'axe (toutes les marques / catégories) ---- */
.index-wrap{padding:8px 0 80px}
.index-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.index-card{display:flex;flex-direction:column;gap:6px;position:relative;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px 22px;transition:all .18s;box-shadow:var(--shadow-sm)}
.index-card:hover{border-color:var(--forest);transform:translateY(-3px);box-shadow:var(--shadow)}
.index-name{font-size:18px;font-weight:600;color:var(--ink)}
.index-count{font-size:13px;color:var(--ink-mute)}
.index-arrow{position:absolute;top:18px;right:20px;color:var(--forest);font-weight:700;opacity:0;transition:opacity .18s,transform .18s;transform:translateX(-4px)}
.index-card:hover .index-arrow{opacity:1;transform:translateX(0)}
@media(max-width:980px){.index-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.index-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.index-grid{grid-template-columns:1fr}}
.seo-empty{color:var(--ink-mute);font-style:italic}
.coll-head h1{font-family:var(--serif);font-size:clamp(30px,4.2vw,46px);font-weight:600;letter-spacing:-.025em;line-height:1.05}
.coll-intro{color:var(--ink-soft);margin-top:14px;max-width:none;font-size:16.5px}
/* Bulles collections phares */
.coll-bubbles{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.bubble{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--ink-soft);transition:all .18s;box-shadow:var(--shadow-sm)}
.bubble:hover{border-color:var(--forest);color:var(--forest);transform:translateY(-2px)}
.bubble::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime)}
.coll-layout{display:grid;grid-template-columns:270px 1fr;gap:34px;align-items:start;padding-top:28px;padding-bottom:70px}
.coll-main{min-width:0}
.coll-combo{padding-top:8px;padding-bottom:70px}
.filters{position:sticky;top:84px;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:8px 20px 20px;box-shadow:var(--shadow-sm)}
.filters-head{display:flex;align-items:center;justify-content:space-between;padding:16px 0 13px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.filters-head span{font-family:var(--serif);font-size:17px;font-weight:600}
.filter-block{padding:16px 0;border-bottom:1px solid var(--line)}
.filter-block:last-child{border-bottom:0;padding-bottom:4px}
.filters h4{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 12px}
.filter-opts{display:flex;flex-direction:column;gap:2px;max-height:230px;overflow-y:auto;margin:-2px -6px;padding:2px 6px}
.filter-opts::-webkit-scrollbar{width:5px}.filter-opts::-webkit-scrollbar-thumb{background:var(--mint-2);border-radius:9px}
.fopt{display:flex;align-items:center;gap:10px;font-size:14px;padding:6px 8px;cursor:pointer;color:var(--ink-soft);border-radius:9px;transition:background .14s,color .14s}
.fopt:hover{background:var(--mint);color:var(--forest)}
.fopt input[type=checkbox]{accent-color:var(--forest);width:16px;height:16px;flex-shrink:0}
.fopt:has(input:checked){color:var(--forest);font-weight:600}
.fopt .fcount{margin-left:auto;font-size:12px;font-weight:400;color:var(--ink-mute);font-variant-numeric:tabular-nums}
.fopt:has(input:checked) .fcount{color:var(--forest)}
.filters .reset{font-size:12.5px;color:var(--forest);font-weight:600;cursor:pointer;background:none;border:0;padding:0}
.filters .reset:hover{text-decoration:underline}
/* Slider double poignée */
.range .range-val{display:block;font-size:14px;font-weight:700;color:var(--forest);margin-bottom:16px}
.range-track{position:relative;height:5px;background:var(--mint-2);border-radius:999px;margin:0 8px 6px}
.range-fill{position:absolute;top:0;bottom:0;background:var(--forest);border-radius:999px}
.range-track input[type=range]{position:absolute;top:50%;transform:translateY(-50%);left:-8px;right:-8px;width:calc(100% + 16px);margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none;height:22px}
.range-track input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:19px;height:19px;border-radius:50%;background:#fff;border:2.5px solid var(--forest);box-shadow:var(--shadow-sm);cursor:grab}
.range-track input[type=range]::-moz-range-thumb{pointer-events:auto;width:19px;height:19px;border-radius:50%;background:#fff;border:2.5px solid var(--forest);box-shadow:var(--shadow-sm);cursor:grab}
.range-track input[type=range]::-webkit-slider-runnable-track{background:none}
.no-result{color:var(--ink-mute)}
.coll-results-info{font-size:14px;color:var(--ink-mute);margin-bottom:18px;font-weight:500}
/* Grille 3 colonnes (comme QC) */
.grid-tests.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1080px){.grid-tests.cols-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid-tests.cols-3{grid-template-columns:repeat(2,1fr);gap:12px}}
/* Élements mobile-only du drawer filtres : masqués en desktop */
.filters-toggle,.filters-close,.filters-apply,.filters-backdrop,.intro-more{display:none}
@media(max-width:860px){
  .coll-layout{grid-template-columns:1fr;padding-top:14px}
  .filter-opts{max-height:none}
  /* Intro tronquée + "voir plus" pour arriver vite au bouton Filtres */
  .coll-intro{font-size:15px;margin-top:10px}
  .coll-intro.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .intro-more{display:inline-block;margin-top:6px;font-size:13.5px;font-weight:600;color:var(--forest);background:none;border:0;cursor:pointer;padding:0}
  /* Bouton "Filtres" (ouvre le drawer) */
  .filters-toggle{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:15px;font-weight:600;color:#fff;background:var(--forest);border:0;border-radius:12px;padding:12px 22px;cursor:pointer;margin-top:16px;box-shadow:var(--shadow-sm)}
  .filters-toggle svg{width:16px;height:16px}
  /* Filtres en bottom-sheet */
  .filters{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:95;border-radius:22px 22px 0 0;max-height:85vh;overflow-y:auto;transform:translateY(101%);transition:transform .3s ease;box-shadow:0 -12px 44px -12px rgba(20,61,48,.5);padding:0 22px 22px}
  .filters.open{transform:translateY(0)}
  .filters-backdrop{display:block;position:fixed;inset:0;background:rgba(20,36,28,.45);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:94}
  .filters-backdrop.show{opacity:1;visibility:visible}
  .filters-head{position:sticky;top:0;background:var(--paper);padding:18px 0 13px;z-index:2}
  .filters-close{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--mint);border:0;color:var(--ink);font-size:18px;cursor:pointer;line-height:1}
  .filters-apply{display:block;position:sticky;bottom:0;width:100%;margin-top:14px;background:var(--forest);color:#fff;border:0;border-radius:12px;padding:14px;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 -6px 16px -8px rgba(0,0,0,.15)}
}

/* ---- Bloc SEO (onglets : labels courts + H2 complet dans le panneau) ---- */
.coll-seo{padding-top:24px;padding-bottom:80px}
/* Barre d'onglets.
   Les libelles sont rediges, donc longs et de longueur imprevisible. En `flex-wrap`, des
   qu'ils depassaient la largeur, un onglet tombait sur une deuxieme ligne, detache du
   panneau auquel il est cense etre accroche : la mise en page paraissait cassee. Sur mobile
   ca arrivait a chaque fois.
   Une barre qui defile horizontalement supprime le probleme a toutes les largeurs, sans
   dependre de la longueur du texte. Le degrade a droite signale qu'il reste des onglets. */
.seo-tabs{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;margin-bottom:0;position:relative;z-index:1;
  padding-right:2px}
.seo-tabs::-webkit-scrollbar{display:none}
/* Le degrade n'est pose QUE si la barre deborde reellement (classe ajoutee en JS) : sinon
   il rongerait le dernier onglet d'une barre qui tient largement. */
.seo-tabs.is-scrollable{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.seo-tabs.is-scrollable.at-end{-webkit-mask-image:none;mask-image:none}
.seo-tab{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;max-width:min(24em,72vw);
  padding:13px 20px;border-radius:14px 14px 0 0;background:var(--paper);border:1px solid var(--line);
  border-bottom:0;font-family:var(--serif);font-size:15.5px;font-weight:600;color:var(--ink-soft);
  cursor:pointer;transition:color .16s,background .16s;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.seo-tab:hover{color:var(--forest)}
.seo-tab.active{color:var(--forest);background:var(--mint)}
.seo-panel{display:none;background:var(--mint);border:1px solid var(--line);border-radius:0 14px 14px 14px;padding:28px 30px;color:var(--ink-soft);font-size:15.5px;margin-top:-1px}
.seo-panel.active{display:block}
.seo-h2{font-family:var(--serif);font-size:clamp(20px,2.4vw,25px);font-weight:600;color:var(--forest);letter-spacing:-.015em;margin:0 0 16px}
.seo-panel h3{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink);margin:20px 0 8px}
.seo-panel p{margin:0 0 12px}.seo-panel p:last-child{margin-bottom:0}
.seo-panel ul,.seo-panel ol{padding-left:22px;margin:0 0 14px}.seo-panel li{margin-bottom:6px}
.seo-panel strong{color:var(--ink)}
.seo-panel a{color:var(--forest);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.seo-panel a:hover{color:var(--ink)}
/* ---------------------------------------------------------------------------
   TABLEAUX : format unique sur tout le site (comparatifs de collection, grilles
   éditoriales, tableaux de fiche). La structure est normalisée au rendu par
   quel_os_format_tables() : conteneur .table-wrap, classe .qc-table, et un
   data-label sur chaque cellule repris de l'en-tête de sa colonne.
   --------------------------------------------------------------------------- */
.table-wrap{margin:6px 0 18px;max-width:100%}
.qc-table{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.qc-table thead th{background:var(--mint-2);color:var(--forest);font-family:var(--serif);font-weight:600;text-align:left}
.qc-table th,.qc-table td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.qc-table tbody tr:last-child td{border-bottom:0}
.qc-table tbody tr:nth-child(even) td{background:rgba(0,0,0,.015)}
.qc-table tbody td:first-child{font-weight:600;color:var(--ink)}
/* Tablette : on garde la lecture en lignes, avec défilement si vraiment trop large. */
@media(max-width:900px){
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .qc-table{min-width:520px}
}
/* Mobile : lecture en CARTES. Un comparatif à 5 colonnes est illisible en scroll
   horizontal (on perd le nom du modèle dès qu'on fait défiler). Chaque ligne devient
   une carte titrée par sa 1re cellule, chaque valeur est préfixée par son intitulé
   de colonne via data-label. L'en-tête reste dans le DOM pour les lecteurs d'écran. */
@media(max-width:640px){
  .seo-panel{padding:22px 16px}
  /* Barre d'onglets compacte : elle doit tenir sans defilement dans le cas normal. */
  .seo-tab{padding:11px 15px;font-size:14.5px;max-width:60vw}
  .seo-tabs{gap:4px}
  .table-wrap{overflow-x:visible}
  .qc-table{min-width:0;border:0;background:transparent;font-size:14px}
  .qc-table thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .qc-table,.qc-table tbody,.qc-table tr,.qc-table td{display:block;width:100%}
  .qc-table tr{border:1px solid var(--line);border-radius:10px;margin:0 0 12px;overflow:hidden;background:var(--paper)}
  .qc-table tbody tr:nth-child(even) td{background:transparent}
  .qc-table td{display:flex;gap:14px;justify-content:space-between;align-items:baseline;padding:9px 14px;border-bottom:1px solid var(--line);white-space:normal;text-align:right}
  .qc-table td:last-child{border-bottom:0}
  .qc-table td::before{content:attr(data-label);flex:0 0 44%;text-align:left;font-weight:600;color:var(--forest)}
  .qc-table td:empty{display:none}
  /* 1re cellule = l'entité comparée (le modèle) : en-tête de carte, sans intitulé. */
  /* Specificite volontairement superieure a la regle zebra ci-dessus (qui compte un
     element de plus) : sans ca, une carte sur deux perdait son en-tete colore. */
  .qc-table tbody tr td:first-child{display:block;text-align:left;background:var(--mint-2);color:var(--forest);font-family:var(--serif);font-size:15px;padding:10px 14px}
  .qc-table tbody tr td:first-child::before{content:none}
}
/* Barre de slider cliquable */
.range-track{cursor:pointer}
.range-track input[type=range]::-webkit-slider-thumb{cursor:grab}
.range-track input[type=range]::-moz-range-thumb{cursor:grab}

/* ---- Passe responsive globale ---- */
@media(max-width:860px){
  section{padding:44px 0}
  .hero .wrap{padding:40px 20px}
  .wrap{padding:0 18px}
  .sec-head{margin-bottom:22px}
  .band{padding:38px 24px}
  footer.site{padding:40px 0 26px}
}
@media(max-width:560px){
  .hero h1{font-size:34px}
  .hero .sub{font-size:16px}
  .hero .trust{gap:12px}
  .hero .trust .sep{display:none}
  .badge-float{position:static;margin-top:12px;display:inline-flex}
  .hero-card{max-width:none}
  .scene{aspect-ratio:16/10}
  .cta-row .btn{flex:1}
  .marquee-track{gap:30px}
  .marquee .b{font-size:18px}
}
/* Placeholder image soigné (motif + icône) */
.ph.is-placeholder{background:
  radial-gradient(120% 100% at 100% 0,rgba(154,200,31,.18),transparent 55%),
  linear-gradient(160deg,var(--mint),var(--mint-2)) !important}
.gallery.is-placeholder{background:
  radial-gradient(120% 100% at 100% 0,rgba(154,200,31,.18),transparent 55%),
  linear-gradient(160deg,var(--mint),var(--mint-2))}

/* ============ FICHE QC COMPLÈTE (override) ============ */
/* overflow-x:clip -> pas de scroll horizontal (marges restaurées) sans casser le sticky */
.fiche-wrap{padding-bottom:0;overflow-x:clip}
.fiche-card,.card-box,.summary30,.aff-notice,.badges-row,.pros-cons,.two-cards,.verdict-box,.author-box{max-width:100%}
@media(max-width:560px){
  .fiche-grid{gap:22px}
  .fiche-card{padding:20px}
  .card-box{padding:20px}
  /* Les tableaux specs restent des vraies tables width:100% (label gauche / valeur à droite) */
}
.fiche{padding-top:22px;padding-bottom:0} /* padding horizontal via .wrap (marges mobile) */
.fiche-card{position:static;padding:28px}
.fiche-card .badge{background:#16241c;color:#fff;font-size:11px}
.fiche h1{font-size:clamp(26px,3.4vw,34px);margin:14px 0 10px}
.sub-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:4px}
.sub-row .variant{color:var(--ink-mute);font-size:14px;text-transform:uppercase;letter-spacing:.04em}
.coloris{display:flex;align-items:center;gap:6px}
.coloris .cl-label{font-size:11px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.06em;margin-right:2px}
.coloris .dot{width:20px;height:20px;border-radius:50%;border:1px solid rgba(0,0,0,.12);box-shadow:inset 0 0 0 2px #fff}
.formats-toggle{margin:14px 0 8px;border:1px solid var(--line);border-radius:12px;background:var(--cream)}
.formats-toggle summary{padding:12px 16px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink-soft);list-style:none}
.formats-toggle summary::-webkit-details-marker{display:none}
.formats-list{display:flex;flex-direction:column;padding:0 16px 12px}
.formats-list a{padding:9px 0;border-top:1px solid var(--line);font-size:14px;display:flex;justify-content:space-between}
.formats-list a b{color:var(--forest)}
.fiche-card .by{font-size:14px;color:var(--ink-soft);margin:8px 0 0}
.fiche-card .by b{color:var(--forest-2)}
.cta-box{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:20px;margin:20px 0 0;padding:22px;border-radius:18px;background:var(--mint);border:1px solid var(--mint-2)}
.cta-box .cta-price .price{font-family:var(--serif);font-weight:700;font-size:30px;line-height:1.05;white-space:nowrap}
.cta-box .cta-price .price s{display:block;color:var(--ink-mute);font-weight:400;font-size:16px;margin:0 0 3px}
.cta-box .pnote{display:block;font-size:12px;color:var(--ink-mute);font-style:italic;margin-top:4px}
.cta-box .cta-score{text-align:center}
.cta-box .cta-score .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-mute);display:block;margin-bottom:2px}
.cta-box .cta-score .big-score{font-family:var(--serif);font-weight:700;font-size:34px;color:var(--forest);line-height:1;background:none;width:auto;height:auto}
.cta-box .cta-score .big-score small{font-size:14px;color:var(--ink-mute);font-weight:400}
.cta-box .cta-btn{white-space:nowrap;font-size:15.5px;font-weight:700;padding:15px 30px;box-shadow:0 12px 30px -8px rgba(31,107,82,.85)}
.cta-box .cta-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px -8px rgba(31,107,82,.95)}
/* Plusieurs marchands (le 1er = plus gros taux = mis en avant) */
.merchants{margin:16px 0 0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper)}
.merchants-lab{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);padding:15px 20px 9px}
.merchant{display:flex;align-items:center;gap:14px;padding:13px 20px;border-top:1px solid var(--line);color:var(--ink);transition:background .15s}
.merchant:hover{background:var(--mint)}
.merchant.best{background:var(--mint)}
.m-name{font-weight:600;font-size:15px;display:flex;align-items:center;gap:9px;flex:1}
.m-badge{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--forest);color:#fff;padding:3px 8px;border-radius:999px}
.m-price{font-weight:700;font-size:16px;font-family:var(--serif)}
.m-go{font-size:13px;font-weight:600;color:var(--forest);white-space:nowrap}
@media(max-width:520px){.merchant{flex-wrap:wrap;gap:5px 12px}.m-go{width:100%}}
/* Bloc "On préfère" (produit non affilié) */
.prefer-box{margin:20px 0 0;padding:22px 24px;border:1px dashed var(--mint-2);border-radius:18px;background:var(--mint)}
.prefer-intro{color:var(--ink-soft);font-size:15px;margin:0 0 14px}
.prefer-intro b{color:var(--ink)}
.prefer-card{display:flex;align-items:center;gap:16px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px;color:var(--ink);transition:all .18s;box-shadow:var(--shadow-sm)}
.prefer-card:hover{border-color:var(--forest);transform:translateY(-2px)}
.pf-ph{width:64px;height:64px;border-radius:10px;overflow:hidden;background:linear-gradient(160deg,var(--mint),var(--mint-2));display:grid;place-items:center;flex-shrink:0}
.pf-ph img{width:100%;height:100%;object-fit:cover}
.pf-ph .mow-ic{width:70%;opacity:.8}
.pf-body{flex:1;display:flex;flex-direction:column;gap:3px}
.pf-name{font-size:17px;font-weight:600}
.pf-score{font-size:13px;color:var(--forest);font-weight:600}
.pf-go{font-size:13px;font-weight:600;color:var(--forest);white-space:nowrap}
@media(max-width:520px){.prefer-card{flex-wrap:wrap}.pf-go{width:100%}}
.subscores{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;margin-top:20px}
.ss-item .ss-top{display:flex;justify-content:space-between;font-size:13.5px;font-weight:600;margin-bottom:6px}
.ss-item .ss-val{color:var(--forest)}
.ss-bar{height:7px;border-radius:999px;background:var(--mint-2);overflow:hidden}
.ss-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--forest-2),var(--lime));border-radius:999px}
.summary30{max-width:none}
.aff-notice{text-align:center;font-size:11.5px;color:var(--ink-mute);background:rgba(231,240,234,.4);border-radius:10px;padding:12px;margin:16px 0 26px;line-height:1.5}
.two-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0}
.card-box{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:24px}
.card-box h4{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 14px}
.baro{text-align:center}
.baro h4{color:var(--ink)}
.baro-svg{width:100%;max-width:230px;margin:0 auto;display:block}
.ideal ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ideal li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500}
.ideal .chk{width:22px;height:22px;border-radius:50%;background:var(--forest);color:#fff;display:grid;place-items:center;font-size:12px;flex-shrink:0}
.specs-cards .specs{margin:0}
.specs-cards td{padding:9px 2px}
.badges-row{display:flex;gap:16px;flex-wrap:wrap;background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin:0 0 26px}
.badges-row .rb{font-size:13.5px;color:var(--ink-soft)}
.badges-row .rb b{color:var(--ink)}
.pros-cons{margin:26px 0}
.pc h4{display:flex;align-items:center;gap:8px}
.pc.pros h4{color:var(--forest)}.pc.cons h4{color:#c0483e}
.pc li::before{content:none}
.pc.pros li,.pc.cons li{position:relative;padding-left:26px}
.pc.pros li::after{content:"✓";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:var(--forest);color:#fff;font-size:11px;display:grid;place-items:center}
.pc.cons li::after{content:"✕";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:#c0483e;color:#fff;font-size:11px;display:grid;place-items:center}
.fmt-cards{margin:30px 0}
.fmt-cards>h3{font-family:var(--serif);font-size:24px;margin-bottom:16px}
.fmt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fmt-card{background:var(--mint);border-radius:16px;padding:22px;text-align:center;display:flex;flex-direction:column;gap:8px;transition:transform .2s}
.fmt-card:hover{transform:translateY(-3px)}
.fmt-card .fmt-name{font-size:17px;font-weight:600}
.fmt-card .fmt-price{font-weight:700;font-size:18px}
.fmt-card .fmt-see{font-size:12px;font-weight:600;color:var(--forest);text-transform:uppercase;letter-spacing:.04em}
.pour-qui{background:var(--mint);border-radius:18px;padding:28px;margin:30px 0}
.pour-qui h2{font-family:var(--serif);font-size:22px;margin-bottom:12px}
.pour-qui p{margin:0;color:var(--ink-soft);line-height:1.75;font-size:16px}
.acc-sections{max-width:820px;margin:30px auto}
.acc-sections .lead{font-size:19px;color:var(--ink);line-height:1.6;margin-bottom:20px}
.acc{background:var(--paper);border:1px solid var(--line);border-radius:16px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
/* section header H2 (formats) */
.fmt-h2{font-family:var(--serif);font-size:20px;font-weight:600;margin-bottom:14px}
.acc summary{display:flex;align-items:center;gap:16px;padding:20px 22px;cursor:pointer;list-style:none;font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.3}
.acc summary::-webkit-details-marker{display:none}
.acc .acc-num{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink-mute);flex-shrink:0}
.acc[open] .acc-num{background:var(--forest);color:#fff;border-color:var(--forest)}
.acc .acc-title{flex:1;margin:0;font-size:18px;font-weight:600;font-family:var(--serif);line-height:1.3}
.acc .acc-plus{font-size:22px;color:var(--ink-mute);font-weight:300}
.acc[open] .acc-plus{transform:rotate(45deg)}
.acc-body{padding:0 22px 22px 68px;color:var(--ink-soft);line-height:1.75;font-size:16px}
.verdict-box{background:linear-gradient(140deg,var(--forest),var(--forest-deep));color:#eafff2;border-radius:20px;padding:34px;margin:34px auto;max-width:820px;position:relative}
.verdict-box .stars{color:var(--gold);letter-spacing:3px;position:absolute;top:26px;right:30px}
.verdict-box h2{font-family:var(--serif);font-size:24px;color:#eafff2;margin-bottom:16px;max-width:80%}
.verdict-box p{color:#cfe4d6;margin:0 0 14px;line-height:1.7}
.verdict-box .v-intro{border-left:3px solid var(--gold);padding-left:16px;color:#eafff2}
.verdict-box .v-ic{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--gold);color:#143d30;font-size:12px;margin-right:8px;vertical-align:middle}
.verdict-box b{color:#fff}
.verdict-box .btn{margin-top:8px}
.collections-pills{margin:34px 0}
.collections-pills h2{font-family:var(--serif);font-size:22px;margin-bottom:16px}
.collections-pills .pills{display:flex;flex-wrap:wrap;gap:10px}
.collections-pills .pill{background:var(--mint);border-radius:999px;padding:10px 18px;font-size:14px;font-weight:500;color:var(--ink);transition:background .2s}
.collections-pills .pill:hover{background:var(--mint-2);color:var(--forest)}
.author-box{display:flex;gap:18px;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:24px;margin:30px 0;max-width:820px}
.author-box .av{width:56px;height:56px;border-radius:50%;background:linear-gradient(150deg,var(--forest-2),var(--forest-deep));color:#fff;display:grid;place-items:center;font-family:var(--serif);font-size:24px;font-weight:600;flex-shrink:0}
.author-box .a-name{font-size:15px;margin:0}
.author-box .a-role{font-size:13px;color:var(--forest-2);font-weight:600;margin:2px 0 8px}
.author-box .a-bio{font-size:14px;color:var(--ink-soft);line-height:1.6;margin:0 0 8px}
.author-box .a-date{font-size:12px;color:var(--ink-mute);margin:0}
.faq{max-width:820px;margin:34px auto}
.faq>h2{font-family:var(--serif);font-size:24px;margin-bottom:16px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;cursor:pointer;list-style:none;font-size:16px;font-weight:600}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .acc-plus{font-size:22px;color:var(--ink-mute);font-weight:300;flex-shrink:0}
.faq-item[open] .acc-plus{transform:rotate(45deg)}
.faq-a{padding:0 0 18px;color:var(--ink-soft);line-height:1.7}
@media(max-width:860px){.two-cards{grid-template-columns:1fr}.fmt-grid{grid-template-columns:1fr}.cta-box{grid-template-columns:1fr;text-align:left}.cta-box .cta-score{text-align:left}.subscores{grid-template-columns:1fr}.acc-body{padding-left:22px}}

/* ---- Corrections fiche (galerie carrousel, tooltip i, note globale ---- */
.thumbs{display:flex;grid-template-columns:none;gap:10px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.thumbs .thumb{flex:0 0 88px;aspect-ratio:1;scroll-snap-align:start}
.thumbs::-webkit-scrollbar{height:6px}
.thumbs::-webkit-scrollbar-thumb{background:var(--mint-2);border-radius:999px}
.thumb.active{border-color:var(--forest);box-shadow:0 0 0 2px var(--forest)}
.gallery-note{font-size:11.5px;color:var(--ink-mute);font-style:italic;margin:12px 0 0;line-height:1.4}
/* bloc note globale : plus d'air */
.cta-box{gap:14px 26px;padding:22px 26px}
.cta-box .cta-score{padding:0 6px;min-width:74px}
.cta-box .cta-score .lbl{white-space:nowrap;margin-bottom:4px}
/* icône info + tooltip */
.info-i{display:inline-grid;place-items:center;width:15px;height:15px;border:1px solid var(--ink-mute);border-radius:50%;font-size:9px;font-style:italic;color:var(--ink-mute);margin-left:5px;cursor:help;position:relative;vertical-align:middle;font-family:Georgia,serif}
.info-i .tip{position:absolute;bottom:calc(100% + 10px);right:-6px;left:auto;transform:translateY(4px);width:min(260px,80vw);white-space:normal;word-break:break-word;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:14px 16px;font-size:12.5px;line-height:1.5;font-style:normal;color:var(--ink-soft);text-align:left;text-transform:none;letter-spacing:0;font-weight:400;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s;z-index:70;font-family:var(--sans)}
.info-i:hover .tip,.info-i:focus .tip{opacity:1;visibility:visible;transform:translateY(0)}
.info-i .tip::after{content:"";position:absolute;top:100%;right:14px;left:auto;transform:none;border:7px solid transparent;border-top-color:var(--paper)}
@media(max-width:560px){.info-i .tip{width:min(240px,86vw);right:-6px}}

/* ---- Note globale : score sur une ligne, centré ---- */
.cta-box .cta-score{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px}
.cta-box .cta-score .big-score{display:inline-flex;flex-direction:row;align-items:baseline;gap:3px;line-height:1}
.cta-box .cta-score .big-score small{font-size:16px;color:var(--ink-mute);font-weight:400}

/* ---- Cartes format = boutons (aperçu) ---- */
.fmt-card{border:0;cursor:pointer;width:100%;font-family:var(--sans);text-align:center}
/* Modale aperçu format */
.fmt-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}
.fmt-modal[hidden]{display:none}
.fmt-modal-backdrop{position:fixed;inset:0;background:rgba(20,36,28,.55);backdrop-filter:blur(2px)}
.fmt-modal-card{position:relative;background:var(--paper);border-radius:20px;max-width:460px;width:100%;padding:22px;box-shadow:var(--shadow);z-index:1}
.fmt-modal-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--paper);cursor:pointer;font-size:14px;color:var(--ink-soft)}
.fmt-modal-close:hover{background:var(--mint)}
.fmt-modal-img{border-radius:14px;aspect-ratio:1.3;display:grid;place-items:center;margin-bottom:16px}
.fmt-modal-img .mow-ic{width:100px;height:100px}
.fmt-modal-card h3{font-family:var(--serif);font-size:22px;text-align:center;margin-bottom:14px}
.fmt-modal-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--mint);border-radius:14px;padding:16px 18px;flex-wrap:wrap}
.fmt-modal-price{font-family:var(--serif);font-weight:700;font-size:26px}
.fmt-modal-actions{display:flex;gap:8px;flex-wrap:wrap}
.fmt-modal .specs{margin-top:16px}

/* ---- Galerie avec vraies images ---- */
.gallery:not(.is-placeholder){background:#fff;border:1px solid var(--line);padding:24px}
.gallery img{width:100%;height:100%;object-fit:contain}
.thumbs .thumb{padding:0;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:12px}
.thumbs .thumb img{width:100%;height:100%;object-fit:contain;padding:6px}
.thumbs .thumb.active{border-color:var(--forest);box-shadow:0 0 0 2px var(--forest)}

/* Libellés de blocs (ex-H4 passés en <p> pour ne pas casser la hiérarchie SEO H1->H2->H3) */
.box-t{font-family:var(--serif);font-weight:600;font-size:15px;line-height:1.3;margin:0 0 10px;color:var(--ink)}
.faq-q{display:inline;margin:0;font:inherit;font-weight:600;color:inherit}
.foot-t{display:block;font-weight:600;font-size:13.5px;margin:0 0 12px;color:var(--ink)}

/* ---------------------------------------------------------------------------
   SOMMAIRE PLIABLE des articles de blog (.qc-toc). En <details> natif : pliable
   sans JavaScript, donc aucun contenu masque par un script aux yeux de Google,
   et ouvert par defaut. Les ancres sont posees en meme temps que le sommaire,
   elles ne peuvent pas diverger des titres.
   --------------------------------------------------------------------------- */
.qc-toc{margin:20px 0;border:1px solid var(--line);border-radius:12px;background:var(--mint);padding:2px 16px}
.qc-toc summary{cursor:pointer;padding:12px 0;font-family:var(--serif);font-size:15.5px;font-weight:600;color:var(--forest);list-style:none}
.qc-toc summary::-webkit-details-marker{display:none}
.qc-toc summary::after{content:"+";float:right;font-size:18px;line-height:1;color:var(--ink-mute)}
.qc-toc[open] summary::after{content:"–"}
.qc-toc ul{margin:0 0 14px;padding:0;list-style:none;border-top:1px solid var(--line);padding-top:10px}
.qc-toc li{margin:0}
.qc-toc li a{display:block;padding:5px 0;color:var(--ink-soft);text-decoration:none;font-size:14px;border-bottom:1px solid transparent}
.qc-toc li a:hover{color:var(--forest);text-decoration:underline;text-underline-offset:2px}
.qc-toc .toc-l3 a{padding-left:16px;font-size:13.5px;color:var(--ink-mute)}
/* Le titre vise ne doit pas se retrouver colle sous un en-tete fixe apres un clic. */
.entry-content h2,.entry-content h3{scroll-margin-top:84px}

/* ---------------------------------------------------------------------------
   PAGE DE SILO : filtres par cluster + etiquette sur les cartes. Les puces sont
   derivees des articles publies, donc aucune configuration a maintenir.
   --------------------------------------------------------------------------- */
.silo-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.silo-chip{cursor:pointer;border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);
  border-radius:999px;padding:7px 14px;font-size:13px;font-family:inherit;transition:.15s}
.silo-chip span{color:var(--ink-mute);font-size:12px;margin-left:4px}
.silo-chip:hover{border-color:var(--forest);color:var(--forest)}
.silo-chip.active{background:var(--forest);border-color:var(--forest);color:#fff}
.silo-chip.active span{color:rgba(255,255,255,.75)}
.silo-empty-filter{margin:8px 0 0;color:var(--ink-mute);font-size:14px}
.breadcrumb{margin-bottom:14px;font-size:13px;color:var(--ink-mute)}
.breadcrumb a{color:var(--ink-mute);text-decoration:none}
.breadcrumb a:hover{color:var(--forest);text-decoration:underline}

/* ---------------------------------------------------------------------------
   CORPS D'ARTICLE DE BLOG. Le reset global a{color:inherit;text-decoration:none}
   rendait les liens internes INVISIBLES : ils etaient bien poses dans le HTML
   mais s'affichaient comme du texte normal, donc ni cliques ni suivis.
   --------------------------------------------------------------------------- */
.entry-content a{color:var(--forest);font-weight:600;text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:var(--mint-2)}
.entry-content a:hover{color:var(--ink);text-decoration-color:var(--forest)}
.entry-content{font-size:16px;line-height:1.7;color:var(--ink-soft)}
.entry-content h2{font-family:var(--serif);font-size:26px;color:var(--ink);margin:36px 0 12px}
.entry-content h3{font-family:var(--serif);font-size:20px;color:var(--ink);margin:26px 0 8px}
.entry-content ul,.entry-content ol{margin:12px 0 18px;padding-left:22px}
.entry-content li{margin-bottom:7px}
.entry-content strong{color:var(--ink)}
.entry-content figure{margin:26px 0}
.entry-content figure img{width:100%;height:auto;border-radius:12px;display:block}
.entry-content figcaption{margin-top:8px;font-size:13px;color:var(--ink-mute);text-align:center}

/* Cartes de guide.
   Trois defauts corriges par rapport a la premiere version : les cartes sans image
   a la une n'avaient pas de zone visuelle du tout, ce qui donnait une grille en
   escalier ; le titre et le resume avaient une hauteur libre, donc plus aucune
   ligne de base commune ; et le theme du cluster se noyait dans le texte.
   Ici : zone visuelle TOUJOURS presente (placeholder si pas de vignette), titre
   et resume tronques a un nombre de lignes fixe, badge de cluster pose sur
   l'image. Resultat : des cartes de meme hauteur, alignees, lisibles en diagonale. */
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin-top:4px;align-items:stretch}
.gcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;background:var(--paper);text-decoration:none;height:100%;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.gcard:hover{border-color:var(--forest);transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.09)}

/* Deux markups coexistent : un <span> a background (silo) et une vraie <img> issue de
   get_the_post_thumbnail (accueil, page guides). La meme regle couvre les deux. */
.gcard-img{position:relative;display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  background-size:cover;background-position:center;background-color:var(--mint-2)}
/* Sans vignette, un aplat degrade tient la maille et reste sobre. */
.gcard-img.is-empty{background-image:linear-gradient(135deg,var(--mint) 0%,var(--mint-2) 100%)}
.gcard-img.is-empty::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.55),transparent 60%)}

.gcard-tag{position:absolute;left:12px;bottom:12px;z-index:1;display:inline-block;
  margin:0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--forest);background:rgba(255,255,255,.94);border-radius:999px;padding:4px 10px;
  box-shadow:0 1px 4px rgba(0,0,0,.12)}

.gcard-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;gap:8px}
.gcard-body h3{margin:0;font-family:var(--serif);font-size:17.5px;font-weight:600;
  line-height:1.32;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gcard-ex{margin:0;font-size:13.5px;color:var(--ink-mute);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gcard-rd{margin-top:auto;padding-top:10px;font-size:13px;font-weight:600;color:var(--forest)}
.gcard-rd::after{content:" \2192";display:inline-block;transition:transform .18s}
.gcard:hover .gcard-rd::after{transform:translateX(4px)}
@media(max-width:640px){ .gcards{grid-template-columns:1fr;gap:16px} }

/* Illustrations reprises des fiches produit, inserees dans le corps de l'article. */
.art-img{margin:30px 0}
.art-img img{width:100%;height:auto;border-radius:14px;display:block;border:1px solid var(--line)}
.art-img figcaption{margin-top:9px;font-size:13px;color:var(--ink-mute);text-align:center}
.art-img figcaption a{color:var(--forest);font-weight:600}

/* ---------------------------------------------------------------------------
   BANDEAU COOKIES.
   La croix de fermeture du plugin ACCEPTE les cookies, alors que son libelle
   annonce "Refuser" : elle trompe le lecteur, et fermer un bandeau ne vaut pas
   consentement. On la retire, il ne reste que deux choix explicites.
   --------------------------------------------------------------------------- */
#cn-close-notice{display:none!important}
#cookie-notice .cn-button{border-radius:8px;font-weight:600;padding:8px 18px}
#cookie-notice #cn-more-info{background:transparent!important;text-decoration:underline;
  text-underline-offset:3px;padding-left:8px;padding-right:8px}
#cookie-notice .cn-text-container{font-size:13.5px;line-height:1.55}
@media(max-width:640px){
  #cookie-notice .cookie-notice-container{padding:14px 16px}
  #cookie-notice .cn-buttons-container{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
  #cookie-notice .cn-button{margin:0}
}

/* ---------------------------------------------------------------------------
   NOTE, explication repliable. Une note affichee nue demande au lecteur de
   croire sur parole ; la methodologie vivait sur une page que personne n'ouvre.
   --------------------------------------------------------------------------- */
.note-methodo{margin-top:10px;text-align:left}
.note-methodo summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--forest);
  list-style:none;display:inline-flex;align-items:center;gap:6px}
.note-methodo summary::-webkit-details-marker{display:none}
.note-methodo summary::before{content:"?";display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;background:var(--mint-2);color:var(--forest);font-size:11px;font-weight:700}
.note-methodo[open] summary{margin-bottom:8px}
.note-methodo-in{font-size:12.5px;color:var(--ink-soft);line-height:1.55}
.note-methodo-in p{margin:0 0 8px}
.note-methodo-in .note-sub{margin:8px 0;font-size:12.5px}
.note-methodo-in a{color:var(--forest);font-weight:600;text-decoration:underline}

/* Commentaires de fiche. */
/* Respiration apres la bande "alternatives", qui a un fond menthe : sans marge haute, le bloc
   d'invitation collait a elle et paraissait en faire partie. */
.fiche-comments{padding:46px 24px 64px}
.fiche-comments .comment-respond{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-top:18px}
.fiche-comments .comment-reply-title{font-family:var(--serif);font-size:20px;margin:0 0 6px}
.fiche-comments .comment-form label{display:block;font-size:12.5px;font-weight:600;margin:10px 0 4px}
.fiche-comments .comment-form input[type=text],
.fiche-comments .comment-form input[type=email],
.fiche-comments .comment-form textarea{width:100%;border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;font-family:inherit;font-size:14px;background:#fff}
.fiche-comments .comment-form textarea{min-height:120px}
.fiche-comments .form-submit input{background:var(--forest);color:#fff;border:0;border-radius:10px;
  padding:11px 22px;font-weight:600;font-size:14px;cursor:pointer;margin-top:12px}
.fiche-comments .commentlist{list-style:none;padding:0;margin:18px 0 0}
.fiche-comments .commentlist li{border-top:1px solid var(--line);padding:16px 0}
.fiche-comments .comment-author{font-weight:600;font-size:14px}
.fiche-comments .comment-meta{font-size:12px;color:var(--ink-mute);margin-bottom:6px}
.fiche-comments .comment-content{font-size:14px;line-height:1.6;color:var(--ink-soft)}

/* ---------------------------------------------------------------------------
   QUIZ D'ORIENTATION dans les articles. Un article se lit et se quitte ; deux
   clics vers la bonne collection transforment la lecture en parcours.
   --------------------------------------------------------------------------- */
.qz{margin:32px 0;padding:22px 24px;border:1px solid var(--mint-2);border-radius:16px;
  background:linear-gradient(180deg,var(--mint),var(--paper))}
.qz-k{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--forest)}
.qz-t{margin:0 0 6px;font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink)}
.qz-s{margin:0 0 14px;font-size:14px;color:var(--ink-soft);line-height:1.55}
.qz-opts{display:flex;flex-wrap:wrap;gap:9px}
.qz-o{display:inline-flex;align-items:center;gap:7px;background:var(--paper);border:1px solid var(--line);
  border-radius:999px;padding:9px 16px;font-size:14px;font-weight:600;color:var(--ink);
  text-decoration:none!important;transition:.16s}
.qz-o::after{content:"→";color:var(--forest);transition:transform .16s}
.qz-o:hover{border-color:var(--forest);color:var(--forest);transform:translateY(-1px)}
.qz-o:hover::after{transform:translateX(3px)}
@media(max-width:640px){ .qz{padding:18px 16px} .qz-o{width:100%;justify-content:space-between} }

/* ---------------------------------------------------------------------------
   PLAN DU SITE. Le sitemap XML ne sert qu'aux robots ; il manquait un chemin
   humain vers toutes les pages, et un lien depuis le pied de page. Une page
   orpheline est une page qui n'existe pas.
   Colonnes automatiques : une liste de 450 fiches a plat ne se parcourt pas.
   --------------------------------------------------------------------------- */
.sitemap-wrap{padding:36px 24px 70px;display:flex;flex-direction:column;gap:38px}
.sm-block > h2{font-size:clamp(20px,2.6vw,26px);font-weight:600;color:var(--ink);
  margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;gap:10px}
.sm-group{margin:0 0 22px}
.sm-group h3{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--ink);
  margin:0 0 8px;display:flex;align-items:baseline;gap:8px}
.sm-group h3 a{color:var(--ink);text-decoration:none}
.sm-group h3 a:hover{color:var(--forest);text-decoration:underline}
.sm-n{font-size:11.5px;font-weight:600;color:var(--forest);background:var(--mint-2);
  border-radius:999px;padding:1px 8px}
.sm-list{list-style:none;margin:0;padding:0;columns:3;column-gap:28px}
.sm-list li{break-inside:avoid;margin:0 0 6px;font-size:14px;line-height:1.45}
.sm-list a{color:var(--ink-soft);text-decoration:none}
.sm-list a:hover{color:var(--forest);text-decoration:underline}
.sm-lead{columns:2}
.sm-lead a{font-weight:600;color:var(--ink);font-size:15px}
.sm-legal{border-top:1px solid var(--line);padding-top:26px}
.sm-xml{margin:14px 0 0;font-size:13px;color:var(--ink-mute)}
.sm-xml a{color:var(--forest);font-weight:600}
@media(max-width:900px){ .sm-list{columns:2} }
@media(max-width:600px){ .sm-list,.sm-lead{columns:1} }

/* Mention Partenaires Amazon : imposee, donc lisible, mais sans voler la vedette. */
.foot-amz{display:block;font-size:12px;color:var(--ink-mute);line-height:1.5}

/* ---------------------------------------------------------------------------
   COMPARATEUR. Cocher deux modeles depuis une liste et les mettre face a face.
   Le plus fort rapport entre l'effort et le signal : temps passe eleve et
   intention d'achat maximale, sans une ligne de contenu a rediger.
   --------------------------------------------------------------------------- */
/* La carte VISUELLE devient le conteneur : bordure, arrondi et ombre passent sur lui, et le
   lien produit perd les siens. La ligne "Comparer" vit alors DANS la carte, separee par un
   simple filet, au lieu d'etre une boite accolee qui alourdissait la grille. */
.card-wrap{position:relative;display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.card-wrap:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.card-wrap > .card{flex:1;border:0;border-radius:0;background:transparent}
.card-wrap > .card:hover{transform:none;box-shadow:none}
.card-wrap:has(.cmp-toggle input:checked){border-color:var(--forest);box-shadow:0 0 0 1px var(--forest)}

/* Ligne de selection : discrete au repos, evidente une fois active. Posee sur l'image, la
   case tombait sur la note et passait inapercue. */
/* Appel a comparer. Discret, il ne se voyait pas et personne ne comparait : la fonction la
   plus utile de la page passait pour une case a cocher de formulaire. Il prend l'allure d'un
   bouton, avec son icone, et change franchement d'etat une fois coche. */
.cmp-toggle{display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font-weight:600;color:var(--forest);background:var(--cream);
  border-top:1px solid var(--line);padding:12px 14px;font-size:14px;
  transition:background .18s,color .18s}
.cmp-toggle:hover{background:var(--mint);color:var(--forest)}
/* Icone de comparaison : deux barres, lisible a toute taille et sans fichier a charger. */
.cmp-box{position:relative}
.cmp-toggle:has(input:checked){background:var(--forest);color:#fff}
.cmp-toggle:has(input:checked) .cmp-lab{color:#fff}
.cmp-toggle:has(input:checked) .cmp-box{background:#fff;border-color:#fff}
.cmp-toggle:has(input:checked) .cmp-box::after{border-color:var(--forest)}
.cmp-toggle input{position:absolute;opacity:0;width:0;height:0}
.cmp-box{width:15px;height:15px;border-radius:4px;border:1.5px solid var(--line);
  display:grid;place-items:center;transition:.15s;flex:0 0 auto;background:var(--paper)}
.cmp-box::after{content:"";width:7px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) scale(0);transition:transform .15s;margin-top:-2px}
.cmp-toggle input:checked ~ .cmp-box{background:var(--forest);border-color:var(--forest)}
.cmp-toggle input:checked ~ .cmp-box::after{transform:rotate(-45deg) scale(1)}
.cmp-toggle:has(input:checked){background:var(--mint);color:var(--forest)}
.cmp-toggle input:focus-visible ~ .cmp-box{outline:2px solid var(--forest);outline-offset:2px}

.cmp-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:60;
  display:flex;align-items:center;flex-wrap:nowrap;gap:12px;max-width:calc(100% - 24px);
  background:var(--ink);color:#fff;border-radius:999px;padding:10px 12px 10px 20px;
  box-shadow:0 10px 34px rgba(0,0,0,.28);font-size:14px}
/* display:flex ecrase l'attribut hidden du navigateur : la barre restait affichee sans aucune
   selection, avec un libelle qui ne parlait de rien et une croix seule sur une ligne. */
.cmp-bar[hidden]{display:none}
/* Aucun retour a la ligne : les boutons gardent leur taille, seul le libelle se comprime. */
.cmp-bar > *{flex:0 0 auto}
.cmp-count{flex:1 1 auto;min-width:0}
/* Plafond atteint : on le DIT, sinon une case qui refuse de se cocher passe pour un bug. */
.cmp-bar.is-full .cmp-count{color:var(--lime,#9ac81f)}
.cmp-count{font-weight:700;white-space:nowrap}
.cmp-names{opacity:.7;font-size:12.5px;max-width:min(46vw,380px);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cmp-go{background:var(--lime,#9ac81f);color:var(--ink);border-radius:999px;padding:8px 16px;
  font-weight:700;font-size:13.5px;text-decoration:none!important;white-space:nowrap}
.cmp-go.is-off{opacity:.45;pointer-events:none}
.cmp-hide{background:transparent;border:0;color:#fff;opacity:.65;font:inherit;font-size:12.5px;text-decoration:underline;cursor:pointer;padding:0 2px;white-space:nowrap}
.cmp-hide:hover{opacity:1}
.cmp-bar.is-hidden .cmp-hide{display:none}
.cmp-clear{background:transparent;border:0;color:#fff;opacity:.6;font-size:20px;cursor:pointer;line-height:1;padding:0 4px}
/* Barre repliee : elle reste accessible d'une pression, sans masquer le contenu. Une barre
   fixe qu'on ne peut pas ecarter finit par gener exactement au moment ou on lit un prix. */
.cmp-bar.is-hidden{padding:0;gap:0;width:auto;min-width:0}
.cmp-bar.is-hidden .cmp-count,.cmp-bar.is-hidden .cmp-names,.cmp-bar.is-hidden .cmp-go,.cmp-bar.is-hidden .cmp-clear{display:none}
.cmp-reopen{display:none;background:transparent;border:0;color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:10px 16px;white-space:nowrap}
.cmp-bar.is-hidden .cmp-reopen{display:block}
.cmp-clear:hover{opacity:1}
@media(max-width:760px){ .cmp-names{display:none} }
@media(max-width:640px){
  /* Sur telephone la barre prend toute la largeur et le compteur passe au-dessus du bouton :
     un texte tronque a "2 modè…" ne renseigne personne. */
  /* Flex et non grille : la grille etait declaree a trois colonnes pour quatre elements, et le
     quatrieme, la croix, partait seul sur une deuxieme ligne. Une grille dont le nombre de
     colonnes doit suivre le nombre d'enfants est une grille de trop. */
  .cmp-bar{width:calc(100% - 20px);bottom:12px;padding:10px 12px 10px 16px;
    display:flex;align-items:center;flex-wrap:nowrap;gap:10px;border-radius:16px}
  /* Barre compacte : le libelle long passait sur deux lignes et poussait la croix sur une
     troisieme, ce qui donnait un bloc massif au milieu de l'ecran. Tout tient sur une ligne. */
  .cmp-count{font-size:12.5px;white-space:nowrap;line-height:1.2;overflow:hidden;text-overflow:ellipsis}
  .cmp-go{padding:8px 12px;font-size:12.5px}
  .cmp-hide{font-size:0;text-decoration:none;padding:0 2px}
  .cmp-hide::before{content:"\2304";font-size:19px;line-height:1}
  .cmp-clear{font-size:19px;padding:0 2px}
}

.cmp-wrap{padding:30px 24px 70px}
.cmp-table th{vertical-align:bottom;text-align:left}
.cmp-table thead th a{display:block;margin-top:6px;color:var(--ink);font-weight:600;text-decoration:none}
.cmp-table thead th a:hover{color:var(--forest);text-decoration:underline}
.cmp-img{width:100%;max-width:150px;height:auto;border-radius:10px;display:block}
.cmp-best{background:var(--mint)!important;font-weight:700;color:var(--forest)}
.cmp-note{margin-top:14px;font-size:12.5px;color:var(--ink-mute)}
/* En carte mobile, l'intitule de gauche porte le NOM DU MODELE : il lui faut de la place, et un
   nom long doit passer a la ligne plutot que d'ecraser la valeur qu'on vient comparer. */
@media(max-width:640px){
  .cmp-h1{font-size:clamp(22px,6vw,30px);line-height:1.15}
  .cmp-table td::before{flex:0 0 55%;font-weight:600;color:var(--ink);font-size:13px;line-height:1.25}
  .cmp-table td{align-items:center;gap:10px}
  .cmp-table tbody tr td:first-child{font-size:16px;font-weight:700}
  /* Cellule d'achat : le bouton et le lien sont larges, les garder sur la meme ligne que le nom
     du modele les poussait hors du cadre. Ils passent dessous, sur toute la largeur. */
  .cmp-table td:has(.cmp-actions){flex-direction:column;align-items:stretch;gap:8px}
  .cmp-table td:has(.cmp-actions)::before{flex:none;width:auto;text-align:left}
  .cmp-table .cmp-actions{width:100%}
  .cmp-table .cmp-full{text-align:center;font-size:13px}
  .cmp-img{max-width:64px}
  .cmp-actions .btn{font-size:13px;padding:9px 12px}
}

/* Calculateur de dimensionnement. */
.calc-wrap{padding:30px 24px 70px}
.calc-form{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;
  background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.calc-form label{display:flex;flex-direction:column;gap:6px;flex:1 1 200px}
.calc-form label span{font-size:13px;font-weight:600;color:var(--ink)}
.calc-form label em{font-style:normal;color:var(--ink-mute);font-weight:400}
.calc-form input{border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:15px;font-family:inherit}
.calc-form .btn{flex:0 0 auto}
.calc-res{margin-top:26px}
.calc-count{font-size:14.5px;color:var(--ink-soft);margin:0 0 14px}

/* Sondage d'une question, en fin d'article. */
.poll{margin:36px 0 0;padding:20px 22px;border:1px solid var(--line);border-radius:16px;background:var(--paper)}
.poll-q{margin:0 0 12px;font-size:15px;font-weight:600;color:var(--ink)}
.poll-btns{display:flex;flex-wrap:wrap;gap:9px}
.poll-btns button{background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:9px 20px;font-size:14px;font-weight:600;font-family:inherit;color:var(--ink);cursor:pointer;transition:.15s}
.poll-btns button:hover:not(:disabled){border-color:var(--forest);color:var(--forest)}
.poll-btns button:disabled{opacity:.5;cursor:default}
.poll-res{margin:12px 0 0;font-size:13.5px;color:var(--ink-soft)}
.poll-pct{font-weight:700;color:var(--forest)}
.poll-n{color:var(--ink-mute);font-size:12.5px}
.poll.is-done .poll-q::after{content:" Merci.";color:var(--forest);font-weight:600}

/* Vrai ou faux, en tete de guide. Une idee recue accroche parce qu'elle interpelle
   AVANT la lecture ; posee apres la conclusion elle n'aurait plus rien a corriger. */
.myth{margin:26px 0;padding:20px 22px;border:1px solid var(--line);border-radius:16px;background:var(--paper)}
.myth-k{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--forest)}
.myth-c{margin:0 0 13px;font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink);line-height:1.35}
.myth-btns{display:flex;gap:9px}
.myth-btns button{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:9px 24px;
  font-size:14px;font-weight:600;font-family:inherit;color:var(--ink);cursor:pointer;transition:.15s}
.myth-btns button:hover:not(:disabled){border-color:var(--forest);color:var(--forest)}
.myth-btns button:disabled{cursor:default;opacity:.55}
.myth-btns button.is-good{background:var(--mint);border-color:var(--forest);color:var(--forest);opacity:1}
.myth-btns button.is-bad{border-color:#e0736b;color:#c0564e;opacity:1}
.myth-r{margin-top:13px;font-size:14px;line-height:1.6;color:var(--ink-soft)}
.myth-verdict{margin:0}
.myth-verdict b{color:var(--ink)}

/* Selection plafonnee : la carte le montre au lieu de refuser le clic en silence. */
.cmp-toggle.is-locked{opacity:.5;cursor:not-allowed}
.cmp-toggle.is-locked:hover{color:var(--ink-mute);border-color:var(--line)}

/* Deux actions par colonne du comparatif : acheter, ou approfondir. Un tableau tranche
   entre deux modeles, il ne remplace pas l'analyse. */
.cmp-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.cmp-actions .btn{width:100%;text-align:center}
.cmp-full{font-size:12.5px;font-weight:600;color:var(--forest);text-decoration:underline;
  text-underline-offset:2px;white-space:nowrap}
@media(max-width:640px){ .cmp-actions{align-items:stretch} .cmp-full{text-align:center} }

/* Date du releve de prix : presente et lisible, mais jamais concurrente du prix lui-meme. */
.cta-price .pdate{display:block;margin-top:5px;font-size:11.5px;color:var(--ink-mute);line-height:1.35}

/* Appel a commentaire. Un retour d'utilisateur reel est le seul contenu qu'aucun concurrent ne
   peut copier, encore faut-il le demander.
   Fond clair et filet vert plutot qu'un aplat menthe : place juste sous une bande menthe, le
   bloc s'y fondait et le texte pale dessus se lisait mal. */
.cmt-ask{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--forest);
  border-radius:0 14px 14px 0;padding:18px 22px;margin:0 0 26px}
.cmt-ask b{display:block;font-family:var(--serif);font-size:17px;color:var(--forest);margin-bottom:5px}
.cmt-ask span{font-size:14.5px;color:var(--ink-soft);line-height:1.55}

/* Bloc commentaires : il n'avait aucun style, d'ou le grand vide sous l'invitation et un titre
   pose au milieu de nulle part. */
.comments-block{margin-top:0}
.comments-title{font-size:clamp(21px,2.4vw,26px);color:var(--ink);margin:0 0 4px}
.comments-block .comment-respond{margin-top:14px}
.comments-list{list-style:none;margin:18px 0 0;padding:0}
.comments-list li{border-top:1px solid var(--line);padding:16px 0}
@media(max-width:640px){ .fiche-comments{padding:34px 18px 48px} .cmt-ask{padding:16px 18px} }

/* ============ PODIUM DE COLLECTION ============ */
/* Un classement doit se lire en trois secondes, et se verifier juste en dessous. */
/* padding-top/bottom seulement : ecrire padding tout court effacait les marges laterales de
   .wrap-wide, porte par le MEME element, et les cartes touchaient les bords de l'ecran. */
.podium-wrap{padding-top:44px;padding-bottom:8px}
.podium-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.podium-head h2{font-size:clamp(22px,2.6vw,28px);margin:0;color:var(--forest)}
.podium-date{font-size:12.5px;color:var(--ink-mute)}

/* NOM PROPRE au bloc de classement. La page d'accueil porte deja une section .podium, avec
   son fond menthe : reutiliser le nom transformait cette section en grille de trois colonnes
   et ecrasait toute la mise en page de l'accueil. Un nom generique dans une feuille partagee
   finit toujours par rencontrer son homonyme. */
.podium-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.podium-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:10px}
/* La premiere place doit se voir sans lire : c'est tout l'interet d'un podium. */
.podium-card.rank-1{border-color:var(--forest);box-shadow:0 0 0 1px var(--forest),var(--shadow-sm)}
.podium-rank{position:absolute;top:-12px;left:20px;width:30px;height:30px;border-radius:50%;background:var(--mint-2);color:var(--forest);font-family:var(--serif);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.podium-card.rank-1 .podium-rank{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.podium-ph{display:block;aspect-ratio:1.3;border-radius:12px;overflow:hidden;background:var(--cream)}
.podium-ph img{width:100%;height:100%;object-fit:contain}
.podium-card h3{font-size:16.5px;margin:0;line-height:1.25}
.podium-card h3 a{color:var(--ink)}
.podium-meta{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.podium-score{font-family:var(--serif);font-size:24px;font-weight:700;color:var(--forest)}
.podium-score small{font-size:13px;font-weight:400;color:var(--ink-mute)}
.podium-price{font-weight:600;font-size:15px}
.podium-why{font-size:13.5px;color:var(--ink-soft);margin:0;flex:1}
.podium-card .btn{width:100%;text-align:center}
.podium-table{margin-top:24px}
.podium-note{font-size:12.5px;color:var(--ink-mute);margin-top:12px}

/* TABLEAU DU PODIUM sur mobile : on garde une VRAIE table qui defile de gauche a droite.
   La mise en cartes generique produisait cinq blocs identiques repetant les memes intitules,
   soit cinq fois la meme grille a lire, alors qu'un comparatif se lit justement en colonnes.
   La premiere colonne reste visible pendant le defilement, sans elle on ne sait plus de quel
   modele on lit la ligne. */
@media(max-width:640px){
  .podium-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .podium-table .qc-table{display:table;min-width:640px;border:1px solid var(--line);background:var(--paper);font-size:13px}
  .podium-table .qc-table thead{position:static;width:auto;height:auto;margin:0;clip:auto;overflow:visible}
  .podium-table .qc-table tbody,.podium-table .qc-table tr{display:table-row-group}
  .podium-table .qc-table tr{display:table-row;border:0;margin:0;background:transparent}
  .podium-table .qc-table th,.podium-table .qc-table td{display:table-cell;text-align:left;white-space:nowrap;padding:9px 12px;gap:0}
  .podium-table .qc-table td::before{content:none}
  .podium-table .qc-table thead th:first-child,
  .podium-table .qc-table tbody td:first-child{position:sticky;left:0;z-index:2;background:var(--paper);white-space:normal;min-width:150px;font-size:13px;font-weight:600;color:var(--ink)}
  .podium-table .qc-table thead th:first-child{background:var(--mint-2)}
}

@media(max-width:860px){
  /* CARROUSEL sur mobile. Empilees, les trois cartes prenaient trois ecrans entiers : le
     lecteur devait defiler longtemps pour comprendre qu'il y avait un classement. Cote a cote,
     le deuxieme depasse volontairement du bord, ce qui montre qu'il y a une suite. */
  .podium-list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;gap:14px;
    overflow-x:auto;scroll-snap-type:x mandatory;padding:14px 0 18px;
    scroll-padding-left:18px;-webkit-overflow-scrolling:touch}
  .podium-card{scroll-snap-align:center;padding:18px}
  /* La pastille de rang deborde vers le haut : sans cette marge elle serait coupee par le
     debordement horizontal du conteneur. */
  .podium-rank{top:-10px;left:16px}
  .podium-ph{aspect-ratio:1.5}
  .podium-list::-webkit-scrollbar{height:6px}
  .podium-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
  .podium-head{margin-bottom:10px}
}

/* Carte "meilleur choix" de l'accueil : elle est desormais un lien, elle doit le montrer. */
a.badge-float{text-decoration:none;color:inherit;transition:transform .18s,box-shadow .18s}
a.badge-float:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
a.badge-float .l2{text-decoration:underline;text-underline-offset:2px;text-decoration-color:color-mix(in srgb,var(--forest) 35%,transparent)}

/* ============ A LIRE AUSSI (collections -> guides) ============ */
/* Un silo se tient par ses deux bouts. Le bloc s'affiche des le PREMIER guide publie et se
   remplit tout seul : exiger quatre articles le laisserait vide pendant des mois. */
.read-also{padding:48px 0 8px}
.read-also-head{margin-bottom:18px}
.read-also-head .k{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--forest);margin-bottom:6px}
.read-also-head h2{font-size:clamp(21px,2.4vw,27px);margin:0;color:var(--ink)}
.read-also-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ra-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .18s,box-shadow .18s,border-color .18s}
.ra-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--mint-2)}
.ra-ph{display:block;aspect-ratio:1.7;background:var(--cream);overflow:hidden}
.ra-ph img{width:100%;height:100%;object-fit:cover;display:block}
.ra-body{display:flex;flex-direction:column;gap:7px;padding:14px 16px 16px;flex:1}
.ra-k{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--forest)}
.ra-t{font-family:var(--serif);font-size:15.5px;line-height:1.3;color:var(--ink);flex:1}
.ra-go{font-size:12.5px;font-weight:600;color:var(--forest)}
.ra-all{display:inline-block;margin-top:16px;font-size:13.5px;font-weight:600;color:var(--forest)}
.ra-all:hover{text-decoration:underline}
@media(max-width:980px){ .read-also-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){
  /* En dessous de deux colonnes, la grille devient une pile trop longue : on defile. */
  .read-also{padding:36px 0 4px}
  .read-also-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:76%;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}
  .ra-card{scroll-snap-align:start}
}

/* ============ DEBORDEMENT HORIZONTAL : LA CAUSE, PAS LE SYMPTOME ============ */
/* Un element de grille ou de flex a une largeur minimale AUTOMATIQUE : il refuse de devenir
   plus etroit que son contenu le plus large. Une galerie, un tableau ou une reference produit
   sans espace suffit alors a pousser toute la colonne au dela de l'ecran, et la page se
   retrouve coupee a droite. Cela ne se voit pas sur un ecran large, ce qui rend le defaut
   difficile a reproduire : il n'apparait que sur les telephones etroits. */
.fiche-grid > *,
.coll-grid > *,
.read-also-grid > *,
.podium-list > *,
.grid-tests > *,
.blog-grid > * { min-width: 0; }

/* Une reference produit sans espace ne doit pas elargir la page a elle seule. */
body { overflow-wrap: break-word; }

/* overflow-x:clip n'existe pas sur tous les navigateurs Android encore en service. La ou il
   manque, le debordement fuyait sans que rien ne l'arrete. On ne bascule sur hidden QUE dans
   ce cas : hidden cree un bloc conteneur et casserait le bouton flottant la ou clip suffit. */
@supports not (overflow-x: clip) {
  .fiche-wrap { overflow-x: hidden; }
}

/* Filet de securite au niveau de la page. Il n'excuse pas les causes ci-dessus, il evite
   qu'une seule regression rende un site illisible sur telephone. */
html { max-width: 100%; overflow-x: hidden; }

/* ============ CE MODELE VOUS CONVIENT-IL ? ============ */
.fit-ask{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px 24px;margin:34px 0 6px}
.fit-q b{display:block;font-family:var(--serif);font-size:18px;color:var(--ink);margin-bottom:4px}
.fit-q span{font-size:13.5px;color:var(--ink-mute)}
.fit-btns{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.fit-btn{flex:1 1 220px;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:13px 16px;
  font:inherit;font-size:14.5px;font-weight:600;color:var(--forest);cursor:pointer;
  transition:background .18s,border-color .18s,transform .18s}
.fit-btn:hover{background:var(--mint);border-color:var(--mint-2);transform:translateY(-1px)}
.fit-msg{margin:14px 0 0;font-size:14px;color:var(--forest);font-weight:600}
.fit-alts{margin-top:16px;border-top:1px solid var(--line);padding-top:16px}
.fit-alts-t{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:10px}
.fit-alts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fit-alt{display:flex;flex-direction:column;gap:6px;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;color:inherit;transition:border-color .18s,transform .18s}
.fit-alt:hover{border-color:var(--forest);transform:translateY(-2px)}
.fa-n{font-family:var(--serif);font-size:14.5px;color:var(--ink);line-height:1.25}
.fa-m{font-size:13px;color:var(--ink-mute)}
.fa-m b{color:var(--forest);font-size:15px}
.fa-p{margin-left:8px;font-weight:600;color:var(--ink)}
@media(max-width:640px){
  .fit-ask{padding:18px}
  .fit-btn{flex:1 1 100%}
  .fit-alts-grid{grid-template-columns:1fr}
}

/* Photo de l'auteur. Meme gabarit que la pastille a initiale qu'elle remplace, pour que
   l'encart garde sa mise en page sur les sites qui n'en ont pas encore. */
/* 56 px comme la pastille qu'elle remplace : la mise en page de l'encart est calee dessus. */
.author-box .av-photo{width:56px;height:56px;object-fit:cover;border-radius:50%;display:block;flex-shrink:0;background:var(--cream)}

/* ============ TRI DES COLLECTIONS ============ */
.coll-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.coll-sort{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-mute)}
.coll-sort select{font:inherit;font-size:13.5px;font-weight:600;color:var(--forest);background:var(--paper);
  border:1px solid var(--line);border-radius:10px;padding:8px 30px 8px 12px;cursor:pointer;
  appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--forest) 50%),linear-gradient(135deg,var(--forest) 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.coll-sort select:hover{border-color:var(--mint-2)}
.coll-sort select:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
@media(max-width:560px){
  /* Le tri passe sous le compteur : cote a cote, l'un des deux se retrouve tronque. */
  .coll-bar{flex-direction:column;align-items:flex-start;gap:8px}
  .coll-sort select{padding:9px 30px 9px 12px}
}

/* Comparatif des marques, sous la grille de la page marques. */
.brands-seo{padding:44px 0 8px;max-width:820px}
.brands-seo h2{font-family:var(--serif);font-size:clamp(21px,2.4vw,27px);color:var(--ink);margin:34px 0 12px}
.brands-seo h3{font-family:var(--serif);font-size:18px;color:var(--forest);margin:26px 0 8px}
.brands-seo p{margin:0 0 14px}
.brands-seo ul{margin:0 0 18px;padding-left:20px;color:var(--ink-soft);font-size:14.5px}
.brands-seo li{margin-bottom:5px}
.brands-seo .table-wrap{max-width:none}
@media(max-width:900px){ .brands-seo{max-width:none} }

/* ============ QUELLE MARQUE SELON VOS BESOINS ============ */
.brand-finder{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:26px 28px;margin:0 0 34px;scroll-margin-top:80px}
.bf-head{margin-bottom:18px}
.bf-k{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--forest);background:var(--mint);border-radius:999px;padding:4px 11px;margin-bottom:10px}
.bf-head h2{font-family:var(--serif);font-size:clamp(20px,2.4vw,26px);color:var(--ink);margin:0 0 6px}
.bf-head p{margin:0;font-size:14px;color:var(--ink-mute)}
.bf-step{margin-top:18px}
.bf-q{display:block;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:10px}
.bf-opts{display:flex;flex-wrap:wrap;gap:9px}
.bf-opt{background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:10px 18px;font:inherit;font-size:14px;font-weight:600;color:var(--forest);cursor:pointer;transition:background .18s,border-color .18s,transform .18s}
.bf-opt:hover{background:var(--mint);border-color:var(--mint-2);transform:translateY(-1px)}
.bf-opt.is-on{background:var(--forest);border-color:var(--forest);color:#fff}
.bf-result{margin-top:22px;border-top:1px solid var(--line);padding-top:20px}
.bf-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bf-card{position:relative;background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:18px 16px;display:flex;flex-direction:column;gap:9px}
.bf-card.is-first{border-color:var(--forest);box-shadow:0 0 0 1px var(--forest)}
.bf-rank{position:absolute;top:-11px;left:16px;width:26px;height:26px;border-radius:50%;background:var(--mint-2);color:var(--forest);font-family:var(--serif);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.bf-card.is-first .bf-rank{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.bf-name{font-family:var(--serif);font-size:18px;color:var(--ink);margin-top:4px}
.bf-why{font-size:13.5px;color:var(--ink-soft);flex:1;line-height:1.45}
.bf-go{width:100%;text-align:center;font-size:13.5px}
.bf-note{margin:14px 0 0;font-size:12.5px;color:var(--ink-mute)}
.bf-again{margin-top:14px;background:transparent;border:0;font:inherit;font-size:13px;font-weight:600;color:var(--forest);text-decoration:underline;cursor:pointer;padding:0}
/* Appel vers le selecteur, sous le chapo de la page. */
.bf-cta{display:inline-flex;align-items:center;gap:9px;background:var(--forest);color:#fff;border-radius:999px;padding:13px 22px;font-size:15px;font-weight:600;text-decoration:none;margin-top:6px;transition:background .18s,transform .18s}
.bf-cta:hover{background:var(--forest-deep);color:#fff;transform:translateY(-1px)}
@media(max-width:760px){
  .brand-finder{padding:20px 18px;border-radius:16px}
  .bf-cards{grid-template-columns:1fr}
  .bf-opt{flex:1 1 calc(50% - 5px);text-align:center;padding:11px 12px}
}
/* Colonne des analyses : le nombre accompagne la note, une marque non analysee le dit. */
.bt-n{font-size:11.5px;color:var(--ink-mute);font-weight:400}
.bt-none{font-size:12.5px;color:var(--ink-mute);font-style:italic}

/* Tableaux triables : l'en-tete doit annoncer qu'il est cliquable, sinon personne n'essaie. */
.qc-table.is-sortable thead th{cursor:pointer;user-select:none;white-space:nowrap;position:relative;padding-right:22px}
.qc-table.is-sortable thead th:hover{color:var(--ink)}
.qc-table.is-sortable thead th:focus-visible{outline:2px solid var(--forest);outline-offset:-2px}
.th-ar{position:absolute;right:8px;top:50%;transform:translateY(-50%);opacity:.35;font-size:10px}
.th-ar::after{content:"\2195"}
.qc-table.is-sortable thead th[data-dir] .th-ar{opacity:1;color:var(--forest)}
.qc-table.is-sortable thead th[data-dir="asc"] .th-ar::after{content:"\2191"}
.qc-table.is-sortable thead th[data-dir="desc"] .th-ar::after{content:"\2193"}
@media(max-width:640px){
  /* En cartes, l'en-tete est masque : le tri n'a plus de prise, on le dit plutot que de
     laisser un tableau qui ne repond pas au clic. */
  .qc-table.is-sortable thead th{cursor:default}
}

.card-wrap.is-clamped{display:none}
.grid-more{display:block;width:100%;margin:22px 0 0;padding:14px 18px;background:transparent;
  border:1px solid var(--line);border-radius:12px;color:var(--forest);font-size:14.5px;font-weight:600;
  font-family:inherit;cursor:pointer;transition:background .15s}
.grid-more:hover{background:var(--cream)}

.by-method{margin-left:10px;font-size:12.5px;color:var(--ink-mute);text-decoration:underline;
  text-underline-offset:2px;font-weight:400}
.by-method:hover{color:var(--forest)}

/* ============ TRANSPARENCE ============ */
/* Une mention necessaire n'a pas a occuper le haut d'une page de comparatif : le lecteur vient
   pour comparer. Elle doit etre lisible, pas encombrante. */
.foot-disc{max-width:none;line-height:1.6}
.foot-disc a{color:inherit;text-decoration:underline;text-underline-offset:2px}

.ai-inline{display:flex;gap:9px;align-items:flex-start;background:var(--cream);border:1px solid var(--line);
  border-radius:12px;padding:11px 14px;margin:0 0 20px;font-size:12.5px;color:var(--ink-mute);line-height:1.5}
.ai-inline a{color:var(--forest);font-weight:600}
.ai-dot{flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--forest);margin-top:6px}
@media(max-width:640px){ .ai-inline{padding:10px 12px;font-size:12px} }

/* Mention IA : le titre etait un <b> en ligne, donc colle au paragraphe qui suit. */
.ai-notice{border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:var(--paper);margin:24px 0}
.ai-notice > b{display:block;font-size:15px;margin-bottom:8px;color:var(--ink)}
.ai-notice > span{display:block;font-size:14px;line-height:1.65;color:var(--ink-soft)}
.ai-notice > span b{color:var(--ink)}

/* LE PRIX NE S'AFFICHE PLUS A COTE D'UN LIEN MARCHAND.
   Voir quel_os_prix_marchand_visible(). L'encart d'achat garde sa colonne : la remplacer par
   du vide desequilibrerait la boite, ou la note globale se retrouverait seule a gauche. */
.cta-box .cta-price .price-cta{font-family:var(--serif);font-weight:700;font-size:19px;line-height:1.2;color:var(--ink)}
@media(max-width:640px){.cta-box .cta-price .price-cta{font-size:17px}}

/* PAGE METHODOLOGIE : les blocs qui rendent la methode verifiable.
   Trois faits en tete, la chaine de preuve, la grille reelle de la niche, les engagements.
   Voir page-methodologie.php : ces classes n'existent que la. */
.methodo-facts{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:26px 0 0;max-width:760px}
.methodo-facts>div{flex:1 1 150px;background:var(--paper);padding:14px 16px}
.methodo-facts b{display:block;font-family:var(--serif);font-size:27px;line-height:1.1;font-variant-numeric:tabular-nums}
.methodo-facts b.small{font-size:16px;font-weight:600;padding-top:8px}
.methodo-facts span{display:block;font-size:12.5px;color:var(--ink-mute);margin-top:2px}

.methodo-regle{border-left:3px solid var(--lime-deep);padding-left:15px;margin-top:16px;font-size:15.5px;color:var(--ink-soft)}

.methodo-chaine{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.methodo-chaine li{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:16px 18px;font-size:14.5px;color:var(--ink-soft)}
.methodo-chaine .n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--lime-deep);color:#fff;font-size:13px;font-weight:700;margin-bottom:9px}
.methodo-chaine b{display:block;color:var(--ink);font-size:15.5px;margin-bottom:4px}

.methodo-grille{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.methodo-grille li{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:13px 15px}
.methodo-grille b{display:block;font-size:15px}
.methodo-grille span{display:block;font-size:12.5px;color:var(--ink-mute);margin-top:3px}

.methodo-engagements{margin:10px 0 0;padding-left:20px}
.methodo-engagements li{margin:5px 0;color:var(--ink-soft)}

.methodo-sources{list-style:none;counter-reset:src;margin:16px 0 0;padding:0}
.methodo-sources li{counter-increment:src;position:relative;padding:0 0 14px 40px;font-size:14.5px;color:var(--ink-soft)}
.methodo-sources li::before{content:counter(src);position:absolute;left:0;top:1px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--paper);font-size:12.5px;font-weight:700;color:var(--ink)}
.methodo-sources b{display:block;color:var(--ink);font-size:15.5px;margin-bottom:3px}

@media(max-width:640px){.methodo-facts b{font-size:23px}}

/* CARTE DE SYNTHESE, VOISINS DE GAMME, BUDGET COMPARABLE.
   Trois blocs de fin de fiche : le lecteur qui arrive la a tout lu, et jusqu'ici la page ne lui
   proposait rien. Voir single-test.php. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.synthese{padding:0 0 10px}
.synth-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:24px 26px;box-shadow:var(--shadow)}
.synth-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.synth-head h2{margin:2px 0 0;font-size:22px}
.synth-score{display:flex;align-items:baseline;gap:2px;font-family:var(--serif);color:var(--forest)}
.synth-score b{font-size:34px;line-height:1}
.synth-score small{font-size:14px;color:var(--ink-mute)}
.synth-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:18px}
.synth-cols h3{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-mute);margin:0 0 8px}
.synth-cols ul{margin:0;padding-left:18px;font-size:15px;color:var(--ink-soft)}
.synth-cols li{margin:5px 0}
.synth-pros li::marker{color:var(--lime-deep)}
.synth-cons li::marker{color:var(--gold)}
.synth-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.synth-note{font-size:13px;color:var(--ink-mute)}

.gamme{padding-top:26px}
.tbl-scroll{overflow-x:auto}
.gamme-tbl{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px;margin-top:14px}
.gamme-tbl th{text-align:left;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute);font-weight:500;padding:9px 12px;border-bottom:1px solid var(--line)}
.gamme-tbl td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.gamme-tbl tr:last-child td{border-bottom:none}
.gamme-tbl td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.gamme-tbl td.lim{color:var(--ink-soft);font-size:13.5px}
.gamme-tbl td.go{text-align:right;white-space:nowrap}
.gamme-tbl tr.ici{background:var(--mint)}
.gamme-tbl tr.ici td:first-child{border-left:3px solid var(--lime-deep)}
.ici-tag{display:inline-block;margin-left:8px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;background:var(--lime-deep);color:#fff;padding:2px 7px;border-radius:3px;vertical-align:middle}

/* Lien d'evitement : hors ecran tant qu'il n'a pas le focus. Le rendre invisible avec
   display:none le retirerait aussi du parcours clavier, ce qui annulerait son seul role. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--forest);color:#fff;padding:11px 18px;border-radius:0 0 8px 0;font-size:14px;font-weight:600;text-decoration:none}
.skip-link:focus{left:0}
#contenu{scroll-margin-top:80px}
.prix-disclaimer{max-width:900px;margin:18px auto 0;padding:0 20px;font-size:12.5px;line-height:1.55;color:var(--ink-mute);text-align:center}

/* Criteres d'inclusion d'une selection. Deterministe : il enonce le critere, le nombre retenu
   et le catalogue de depart. Voir archive.php. */
.inclusion{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px 26px;margin:26px auto 0}
.inclusion h2{font-size:19px;margin:0 0 10px}
.inclusion ul{margin:0;padding-left:20px;font-size:14.5px;color:var(--ink-soft)}
.inclusion li{margin:6px 0}

/* Radar de notation. Trace en SVG sans bibliotheque : un graphique de six points ne justifie
   pas cent kilo-octets de script. Voir quel_os_radar(). */
.radar{margin:0 0 18px;display:flex;justify-content:center}
.radar svg{max-width:100%;height:auto}
.rd-grid{fill:none;stroke:var(--line);stroke-width:1}
.rd-axe{stroke:var(--line);stroke-width:1}
.rd-aire{fill:color-mix(in srgb,var(--lime-deep) 22%,transparent);stroke:var(--lime-deep);stroke-width:2;stroke-linejoin:round}
.rd-lbl{font-size:10px;fill:var(--ink-mute);font-family:inherit}
@media(max-width:520px){.rd-lbl{font-size:9px}}

/* DUELS. Pages rendues a la volee depuis deux fiches : rien n'est stocke, donc rien ne
   vieillit. Voir os-duel.php et os-duels.php. */
.duel-head{margin:18px 0 26px}
.duel-head h1{font-size:clamp(26px,4vw,40px);line-height:1.12;margin:8px 0 0}
.duel-lead{color:var(--ink-soft);max-width:66ch;margin:12px 0 0}
.duel-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.duel-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:10px}
.duel-card.mieux{border-color:var(--lime-deep);box-shadow:0 0 0 1px var(--lime-deep) inset}
.duel-card h2{font-size:19px;margin:0}
.duel-ph{aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--cream);display:grid;place-items:center}
.duel-ph img{width:100%;height:100%;object-fit:contain}
.duel-score{display:flex;align-items:baseline;gap:2px;font-family:var(--serif);color:var(--forest)}
.duel-score b{font-size:29px;line-height:1}
.duel-score small{font-size:13px;color:var(--ink-mute)}
.duel-lim{font-size:13.5px;color:var(--ink-soft);margin:0}
.duel-lim span{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:2px}
.duel-tbl-sec,.duel-verdict,.duel-autres{margin-top:40px}
.duel-tbl{border-collapse:collapse;width:100%;min-width:520px;font-size:14.5px;margin-top:12px}
.duel-tbl th{text-align:left;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute);font-weight:500;padding:9px 12px;border-bottom:1px solid var(--line)}
.duel-tbl tbody th{font-size:14.5px;text-transform:none;letter-spacing:0;color:var(--ink);font-weight:600}
.duel-tbl td{padding:10px 12px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.duel-tbl td.gagne{background:var(--mint);font-weight:700;color:var(--forest)}
.duel-note{font-size:13px;color:var(--ink-mute);margin-top:12px;max-width:70ch}
.duel-pour{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:12px}
.duel-pour h3{font-size:17px;margin:0 0 4px}
.duel-bilan{font-size:13px;color:var(--ink-mute);margin:0 0 8px}
.duel-pour ul{margin:0 0 14px;padding-left:20px;font-size:14.5px;color:var(--ink-soft)}
.duels-list{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}
.duels-list a{display:block;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:13px 16px;font-size:14.5px;text-decoration:none;color:var(--ink)}
.duels-list a:hover{border-color:var(--lime-deep)}
.duels-list span{color:var(--ink-mute);font-style:italic;margin:0 4px}
.duels-fiche{padding-top:26px}

/* Radar : la note accompagne le libelle, et chaque sommet est survolable. Sans echelle affichee,
   le graphique montrait une forme sans dire ce qu'elle mesurait. */
.radar{flex-direction:column;align-items:center;gap:6px;margin:18px 0 0}
.radar figcaption{font-size:12px;color:var(--ink-mute);text-align:center;order:2}
.rd-val{font-weight:700;fill:var(--forest)}
.rd-pt{fill:var(--lime-deep);stroke:var(--paper);stroke-width:2;cursor:help}
.rd-med{fill:none;stroke:var(--gold);stroke-width:2;stroke-dasharray:6 4;opacity:.9}
.radar svg{overflow:visible}

/* Signaler une erreur. Discret par choix : c'est un signal de responsabilite, pas un appel a
   l'action, et un bouton voyant detournerait du parcours d'achat. */
.signaler{max-width:900px;margin:6px auto 22px;padding:0 20px;text-align:center}
.signaler a{font-size:12.5px;color:var(--ink-mute);text-decoration:underline;text-underline-offset:3px}
.signaler a:hover{color:var(--ink)}

/* Metriques de preuve. Discret : elles appuient l'argument, elles ne sont pas l'argument. */
.preuve{font-size:12.5px;color:var(--ink-mute);margin:0 0 10px;font-variant-numeric:tabular-nums}

/* Double sortie sur la carte : la fiche d'abord, l'offre ensuite. Le bouton d'offre est
   volontairement secondaire, il ne doit pas detourner du parcours editorial. */
.frais{position:absolute;left:10px;bottom:10px;background:var(--paper);color:var(--forest);font-size:10.5px;
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:20px;box-shadow:var(--shadow)}
/* Role de recommandation : il prime visuellement sur le badge descriptif, parce qu'il aide a
   trancher la ou le badge decrit. */
.tag-role{background:var(--forest);color:#fff;font-weight:700}

/* Suivi de prix. Une donnee qui ne se scrape pas : elle s'accumule. */

/* Rappels produits officiels. Rouge sobre : l'alerte doit se distinguer de l'or du site sans
   virer au bandeau publicitaire, qui se fait ignorer par reflexe. */
.rappel-alerte{border:1px solid #b3261e;border-left:4px solid #b3261e;background:rgba(179,38,30,.06);border-radius:8px;padding:14px 16px;margin:18px 0;font-size:.92rem;line-height:1.55}
.rappel-alerte .ra-t{font-weight:700;color:#b3261e;margin:0 0 6px}
.rappel-alerte p{margin:0 0 6px}
.rappel-alerte p:last-child{margin-bottom:0}
.rappel-list{list-style:none;padding:0;margin:22px 0;display:grid;gap:16px}
.rappel-item{border:1px solid var(--line);border-radius:10px;padding:18px 20px;background:var(--card)}
.rappel-item h2{font-size:1.12rem;margin:6px 0 10px}
.rappel-item p{margin:0 0 8px;font-size:.93rem;line-height:1.6}
.rappel-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.rappel-marque{border:1px solid var(--line);border-radius:99px;padding:2px 10px}
.rappel-ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86rem;word-break:break-word}
.rappel-nos{border-left:3px solid var(--gold);padding-left:10px}
.rappel-src a{color:var(--gold)}
.rappel-vide,.rappel-avert{font-size:.93rem;color:var(--muted)}
.rappel-avert{margin-top:26px;padding-top:14px;border-top:1px solid var(--line)}

/* Identite de l'editeur en pied : verifiable, donc lisible, mais jamais au-dessus du
   contenu. Elle prend la ligne entiere pour ne pas comprimer la mention d'affiliation. */
.foot-ed{flex-basis:100%;line-height:1.6;opacity:.85}

/* Les plus consultees. Liste sobre : le bloc sert de raccourci, il ne doit pas concurrencer le
   podium juste au-dessus, qui porte lui un vrai jugement. */
.pops{padding:26px 0}
.pops-list{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px;grid-template-columns:1fr}
@media(min-width:760px){.pops-list{grid-template-columns:1fr 1fr}}
.pops-list a{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:var(--card);text-decoration:none}
.pops-list a:hover{border-color:var(--gold)}
.pop-n{flex:0 0 auto;width:22px;height:22px;border-radius:99px;background:var(--gold);color:#111;font-size:12px;font-weight:700;display:grid;place-items:center}
.pop-t{flex:1 1 auto;min-width:0;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop-s{flex:0 0 auto;font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.pops-note{margin-top:12px;font-size:.85rem;color:var(--muted)}

/* Generations d'une serie. Liste et non tableau : trois colonnes pour un nom, une note et un
   prix se lisent moins bien qu'une ligne, et le tableau de gamme juste au-dessus tient deja ce
   role. */
.series{padding:8px 0 26px}
.series-list{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:6px}
.series-list li{display:flex;align-items:center;gap:12px;padding:9px 14px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.series-list li.ici{border-color:var(--gold);background:rgba(212,175,55,.07)}
.se-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.95rem}
.se-m{flex:0 0 auto;display:flex;gap:12px;align-items:center;font-size:.88rem;color:var(--muted);font-variant-numeric:tabular-nums}
.se-p{font-weight:600;color:var(--fg)}
.series-note{margin-top:12px;font-size:.85rem;color:var(--muted)}

/* Lexique. Liste de definitions dense : le lecteur y arrive par une ancre, il doit trouver son
   mot sans lire le reste. */
.lexique .wrap{max-width:820px}
.lex-lead{color:var(--muted);max-width:62ch;margin:14px 0 0;line-height:1.65}
.lex-nav{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.lex-nav a{display:inline-block;border:1px solid var(--line);border-radius:99px;padding:5px 13px;
  font-size:.86rem;text-decoration:none;color:var(--muted)}
.lex-nav a:hover{border-color:var(--gold);color:var(--fg)}
.lex-axe{margin-top:38px;scroll-margin-top:80px}
.lex-axe h2{font-size:1.22rem;margin:0 0 4px;padding-bottom:8px;border-bottom:1px solid var(--line)}
/* Definition de l'axe : c'est un chapo, pas une entree de la liste. Elle se lit avant les
   termes qu'elle chapeaute, et sur un axe booleen elle est tout ce qu'il y a a lire. */
.lex-axe-def{margin:10px 0 0;color:var(--fg);font-size:.95rem;line-height:1.6;max-width:62ch}
.lex-axe-def + .lex-liste{margin-top:12px}
.lex-liste{margin:0;display:grid;gap:2px}
.lex-item{padding:13px 0;border-bottom:1px solid var(--line);scroll-margin-top:80px}
.lex-item:last-child{border-bottom:none}
.lex-item dt{font-weight:600;font-size:.98rem;margin:0 0 3px}
.lex-item dd{margin:0;color:var(--muted);font-size:.93rem;line-height:1.6}
.lex-vide{font-style:italic}
.lex-voir{display:inline-block;margin-left:8px;color:var(--gold);text-decoration:none;white-space:nowrap}
.lex-voir:hover{text-decoration:underline}

/* Navigation des marchés : lisible au clavier et sur petit écran. */
.network-switcher{margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.15)}
.network-switcher ul{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.network-switcher a{display:inline-flex;gap:8px;align-items:center;border:1px solid rgba(255,255,255,.25);border-radius:8px;padding:8px 12px;overflow-wrap:anywhere}
.network-switcher a[aria-current]{background:rgba(255,255,255,.12)}
.network-switcher a:focus-visible{outline:2px solid #fff;outline-offset:3px}