/* ============================================================
   Fabrique - Fiches produit & guides (article.css)
   ============================================================ */

/* ---- Hero produit (accentué par catégorie via data-accent sur .product-hero) ---- */
/* Le rembourrage vient desormais de la declaration commune ci-dessus :
   la fiche produit n'avait ni fond ni filet, sur 120 pages. */
.product-hero__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; }
/* Cadre image = FOND BLANC pur (images = JPEG opaques) : aucune teinte de fond, aucune
   ombre portée sur l'image (sinon halo gris). Cohérent avec .pcard__media / .gprod__media. */
.product-hero__info { min-width: 0; }
.product-hero__media {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(18px, 1rem + 1vw, 30px); box-shadow: var(--shadow-sm); background: var(--plinth);
}
.product-hero__media img { width: 100%; aspect-ratio: 1/1; object-fit: contain; }
/* Titre calé sur les autres hero du site (pas surdimensionné). */
.product-hero__title { font-size: var(--fs-hero); line-height: 1.1; margin: 10px 0 12px; overflow-wrap: anywhere; }
.product-hero__tagline { font-size: 1.05rem; color: var(--muted); margin-bottom: 20px; }
/* CTA Amazon collé à DROITE de la colonne info, sous les specs (+ micro-mention dessous). */
.product-hero__cta { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; text-align: right; margin-top: 4px; }
.product-hero__specs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 22px; }
.product-hero__spec { min-width: 0; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.product-hero__spec-value { font-weight: 800; color: var(--ink); font-size: .98rem; line-height: 1.2; overflow-wrap: anywhere; }
/* .68rem sortait a 10,9 px, sous le plancher de lisibilite quelle que soit
   la longueur du libelle. */
.product-hero__spec-label { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

/* Verdict par usage (indicateurs) */
.verdict-usage { list-style: none; margin: 0 0 1.2em; padding: 0; display: grid; gap: 10px; }
/* PAS de `display:flex` ici, et c'est deliberé. En flex, CHAQUE enfant devient
   un item : le lien final et le point de ponctuation qui le suit formaient deux
   items distincts. Consequences visibles : le `gap` inserait un blanc entre le
   lien et le point, et `flex-wrap` faisait basculer le lien seul sur sa propre
   ligne. Un texte courant doit rester un flux de texte ; seules les pilules de
   statut sont mises en forme, en inline-block. */
.verdict-usage li { display: block; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .95rem; color: var(--muted); line-height: 1.6; }
/* Indicateur = petite pilule de statut colorée (fini le mot brut mal aligné). */
.verdict-usage .vu-ico { display: inline-block; margin: 0 6px 0 2px; white-space: nowrap; font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; }
.verdict-usage .vu-yes { color: var(--success); background: rgba(38, 160, 106, .13); }
.verdict-usage .vu-mid { color: var(--warning); background: rgba(200, 140, 20, .14); }
.verdict-usage .vu-no { color: var(--error); background: rgba(200, 60, 60, .12); }
.verdict-usage .vu-use { font-weight: 700; color: var(--ink); }
/* Le lien de fin de phrase ne doit jamais se detacher de sa ponctuation. */
.verdict-usage a { white-space: normal; }
.alt-list { margin: 0 0 1.2em 1.1em; }
.alt-list li { margin-bottom: 8px; }

/* ---- Layout article (corps + aside) ---- */
.article-layout { padding: 36px 0 8px; }
.article-layout__inner { display: grid; grid-template-columns: 1fr 320px; gap: 44px; align-items: start; }
/* Colonne d'article centrée (centralisé : remplace les style="max-width:..;margin:0 auto" en dur) */
.article-body { max-width: var(--lecture); margin-inline: auto; }
/* Un conteneur imbrique DANS le corps d article ne doit rien ajouter : il y
   remet 22 px de padding de chaque cote, et le bloc qu il enveloppe se
   retrouve en retrait de tout le reste de la page. C est ce qui mettait la FAQ
   d article a 255-1171 quand le corps allait de 233 a 1193.
   (La classe "container--narrow", employee sur 25 pages, n est declaree nulle
   part : elle ne fait qu heriter de "container", donc ce padding.) */
.article-body .container { max-width: none; padding-left: 0; padding-right: 0; }
.article-body > h1 { margin: 8px 0 14px; }
.article-body h2 { margin-top: 1.6em; scroll-margin-top: 86px; }
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { margin: 1.2em 0 .4em; }
.article-body ul { margin: 0 0 1.2em 1.1em; }
.article-body li { margin-bottom: .4em; }
.crosslink { background: var(--brand-soft); border-radius: var(--radius); padding: 16px 20px; font-weight: 500; }

/* ---- Pros / cons ---- */
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 1.4em; }
.proscons__col { border-radius: var(--radius); padding: 18px 20px; border: 1px solid var(--line); }
.proscons__col h3 { margin: 0 0 10px; font-size: 1rem; }
.proscons__col ul { list-style: none; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.proscons__col li { position: relative; padding-left: 26px; font-size: .94rem; }
.proscons__col--pro { background: var(--pro-bg); border-color: var(--pro-line); }
.proscons__col--pro h3 { color: var(--success); }
.proscons__col--pro li::before { content: "\2713"; position: absolute; left: 0; color: var(--success); font-weight: 800; }
.proscons__col--con { background: var(--con-bg); border-color: var(--con-line); }
.proscons__col--con h3 { color: var(--copper, #B5694A); }
.proscons__col--con li::before { content: "!"; position: absolute; left: 6px; color: var(--warning); font-weight: 800; }

/* ---- Vignette produit flottante dans les chapitres (mix image/texte + lien fiche) ---- */
.chapter-illus { width: clamp(150px, 20vw, 196px); margin: 4px 0 14px; }
.chapter-illus--right { float: right; margin-left: clamp(18px, 2vw, 28px); }
.chapter-illus--left { float: left; margin-right: clamp(18px, 2vw, 28px); }
.chapter-illus__media { display: block; aspect-ratio: 1 / 1; background: var(--plinth); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.chapter-illus__media img { width: 100%; height: 100%; object-fit: contain; }
.chapter-illus:hover .chapter-illus__media { transform: translateY(-3px); box-shadow: var(--shadow-acc); border-color: rgba(var(--acc-rgb, 21,127,102), .4); }
.chapter-illus figcaption { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; text-align: center; }
.chapter-illus figcaption a { font-size: .86rem; font-weight: 700; color: var(--ink); }
.chapter-illus figcaption a:hover { color: var(--acc, var(--brand)); }
.chapter-illus figcaption span { font-size: .76rem; font-weight: 600; color: var(--acc, var(--brand)); }
@media (max-width: 620px) {
  .chapter-illus, .chapter-illus--left, .chapter-illus--right { float: none; width: min(196px, 60%); margin: 14px auto; }
}

/* ---- Verdict ---- (callout doux teinté accent, SANS barre latérale) */
.verdict-box {
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(var(--acc-rgb), .10), transparent 55%),
    var(--surface);
  border: 1px solid rgba(var(--acc-rgb), .22);
  border-radius: var(--radius-lg); padding: clamp(18px, 1rem + 0.8vw, 24px);
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start; margin: 1.2em 0;
}

/* ---- Aside ---- */
.article-aside { position: sticky; top: 86px; display: flex; flex-direction: column; gap: 16px; }
.aside-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.aside-card h3 { font-size: .95rem; margin-bottom: 12px; }
.aside-card p { font-size: .9rem; color: var(--muted); }
.toc { display: flex; flex-direction: column; gap: 6px; }
.toc a { font-size: .9rem; color: var(--text); padding: 4px 0; }
.toc a:hover { color: var(--brand); }

/* ---- Guide (pillar) ---- */
.guide-hero { padding: 30px 0 10px; }
.guide-hero__inner {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px 36px; display: grid; grid-template-columns: 1.4fr .6fr; gap: 28px; align-items: center; box-shadow: var(--shadow);
  background:
    radial-gradient(620px 320px at 100% -20%, rgba(var(--brand-mint-rgb, 20, 224, 176),.16), transparent 60%),
    radial-gradient(520px 360px at -5% 120%, var(--brand-soft), transparent 60%),
    var(--surface);
}
.guide-hero__inner .eyebrow { position: relative; }
.guide-hero__title { margin: 10px 0 12px; position: relative; }
.guide-hero__lead { font-size: 1.1rem; color: var(--text); position: relative; }
.guide-hero__stats { display: flex; gap: 22px; justify-content: flex-end; position: relative; }
.guide-hero__stat-num { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.guide-hero__stat-label { font-size: .78rem; color: var(--muted); }

.criteria-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-sm); }
/* Base .criteria-card centralisée dans components.css (carte info, sans bord à gauche).
   Ici : seulement le détail propre aux critères (espacement + typographie). */
.criteria-card { padding: var(--space-md); }
.criteria-card h3 { font-size: 1.02rem; margin-bottom: 6px; color: var(--ink); }
.criteria-card p { font-size: .9rem; color: var(--muted); margin: 0; }

/* ---- Sous-titre de section dans le corps de guide ---- */
.guide-subhead { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.15rem; margin: 8px 0 14px; }
.guide-top3 { margin: 10px 0 30px; }
.section-router { margin: 8px 0 30px; }

/* ---- Espace bas pour la barre d'achat sticky ---- */
body.has-buybar { padding-bottom: 84px; }

/* ---- Article éditorial (base de connaissances) ---- */
.article-lead { font-size: 1.2rem; color: var(--muted); margin-bottom: 14px; line-height: 1.55; }
.article-meta { font-size: .85rem; color: var(--muted); margin-bottom: 24px; display: flex; gap: 14px; flex-wrap: wrap; }
.article-meta span { display: inline-flex; align-items: center; gap: 6px; }
.toc-inline { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.toc-inline--block { display: block; line-height: 1.7; }
.toc-inline a { font-size: .85rem; font-weight: 600; color: var(--text); background: var(--bg-alt); padding: 6px 12px; border-radius: 999px; }
.toc-inline a:hover { background: var(--brand-soft); color: var(--brand-dark); }

/* Sommaire repliable (anti "mur de 50 boutons") */
.toc-collapse { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: 28px; padding: 0 18px; }
.toc-collapse > summary { cursor: pointer; font-weight: 700; color: var(--ink); font-family: var(--font-display); padding: 15px 0; list-style: none; position: relative; padding-right: 26px; }
.toc-collapse > summary::-webkit-details-marker { display: none; }
.toc-collapse > summary::after { content: "+"; position: absolute; right: 2px; top: 12px; font-size: 1.4rem; color: var(--brand); font-weight: 400; }
.toc-collapse[open] > summary::after { content: "\2013"; }
.toc-collapse .toc-inline { border-top: 1px solid var(--line); border-bottom: none; margin-bottom: 0; padding: 14px 0 18px; }

/* Hero guide : boutons d'action */
.guide-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; position: relative; }

/* Bloc podium précoce (produits visibles tout de suite) */
.guide-picks { margin: 6px 0 32px; scroll-margin-top: 90px; }
.guide-picks .podium { margin-top: 14px; }
.guide-picks__more { text-align: center; margin-top: 18px; }
/* "En bref" : carte accent-tintée (même langage que .verdict-box), liste à puces accent. */
.key-takeaways {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(var(--acc-rgb, 20,224,176), .1), transparent 55%),
    var(--surface);
  border: 1px solid rgba(var(--acc-rgb, 20,224,176), .22);
  border-radius: var(--radius-lg); padding: clamp(18px, 1rem + .8vw, 26px); margin-bottom: 28px;
}
.key-takeaways h2 { font-size: 1.05rem; margin: 0 0 12px; }
.key-takeaways ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.key-takeaways li { position: relative; padding-left: 1.35em; font-size: .95rem; line-height: 1.5; color: var(--muted); margin: 0; }
.key-takeaways li::before { content: ""; position: absolute; left: 0; top: .58em; width: 6px; height: 6px; border-radius: 50%; background: var(--acc, var(--brand)); }
.key-takeaways strong { color: var(--ink); font-weight: 700; }
.article-body table { margin-bottom: 1.4em; }

@media (max-width: 980px) {
  /* Bloc (et pas grille 1 colonne) : la grille a 2 enfants (article + aside) pour 1 piste,
     l'aside tombait dans une piste implicite auto et l'article gonflait au min-content
     -> débordement horizontal sur mobile. En bloc, chaque enfant fait 100%. */
  .article-layout__inner { display: block; }
  .article-aside { position: static; flex-direction: row; flex-wrap: wrap; }
  .article-aside .aside-card { flex: 1; min-width: 240px; }
  .product-hero__inner { grid-template-columns: 1fr; gap: 24px; }
  .guide-hero__inner { grid-template-columns: 1fr; }
  .guide-hero__stats { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .proscons { grid-template-columns: 1fr; }
  .guide-hero__inner { padding: 24px 20px; }
  .guide-hero__stats { gap: 18px; }
  .guide-hero__cta .btn { flex: 1; }
  .product-hero__specs-grid { grid-template-columns: repeat(2, 1fr); }
  /* Mobile : CTA pleine largeur (tap-friendly), micro-mention centrée. */
  .product-hero__cta { align-items: stretch; text-align: center; }
  .product-hero__cta .btn { width: 100%; }
  .article-body { font-size: 1rem; }
}

/* ============================================================
   GUIDE SHELL : rail de navigation scrollspy + colonne unique
   Utilisé par les listicles "Meilleure X" et les piliers guides.
   Objectif : une SEULE largeur de contenu, un seul bord gauche,
   et un repère permanent ("où suis-je") façon site témoin.
   ============================================================ */
:root { --rail-w: 232px; --guide-top: 84px; }

.guide-layout { padding: clamp(18px, 0.8rem + 1.6vw, 36px) 0 8px; }
.guide-shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  gap: clamp(26px, 1rem + 2.6vw, 58px);
  align-items: start;
}
/* Les sections qui SUIVENT la colonne principale doivent tomber sur la meme
   verticale qu'elle, sinon la page compte trois alignements : l'en-tete pleine
   largeur, le corps decale par le rail, et la FAQ centree pour son compte.
   Mesure sur une fiche : en-tete 95-1331, corps 380-1331, FAQ 233-1193.
   On decale donc du rail et de sa gouttiere, au lieu de centrer.

   L'exclusion "not(.guide-shell *)" est indispensable : sur un classement la
   FAQ est DEJA dans la colonne principale, et le decalage s'y appliquait une
   seconde fois - elle partait a 665 au lieu de 380. La regle ne vise que les
   sections posees EN DEHORS de la colonne. */
main:has(.guide-shell) .faq:not(.guide-shell *) {
  max-width: none;
  margin-left: calc(var(--rail-w) + clamp(26px, 1rem + 2.6vw, 58px));
  margin-right: 0;
}
@media (max-width: 980px) {
  /* Sous ce seuil le rail passe au-dessus du contenu : plus rien a decaler. */
  main:has(.guide-shell) .faq:not(.guide-shell *) {
    margin-left: auto; max-width: var(--lecture);
  }
}
/* La colonne de contenu remplit la cellule (on neutralise le max-width d'.article-body
   pour que toutes les sections partagent EXACTEMENT la même largeur). */
.guide-main.article-body { max-width: none; min-width: 0; }
.guide-main > :first-child { margin-top: 0; }
.guide-main [id] { scroll-margin-top: calc(var(--guide-top) + 6px); }

/* ---- Hero plein largeur (hors grille rail) : carte contrainte au container ---- */
.guide-hero--full { padding: clamp(16px, 0.7rem + 1.2vw, 28px) 0 0; }
.guide-hero__card { width: 100%; }

/* Zone pleine largeur sous le hero (podium déjà dans le hero, "L'essentiel en bref",
   profils, classements...) : même largeur que le hero, avant l'entrée dans la grille. */
.guide-fullwidth { padding: clamp(14px, 0.7rem + 1vw, 24px) 0 0; }
.guide-fullwidth > .container > :first-child { margin-top: 0; }
.guide-fullwidth .key-takeaways:last-child,
.guide-fullwidth > .container > :last-child { margin-bottom: 0; }

/* ---- Hero ENRICHI : une seule carte (intro + stats + 3 choix + critères) ---- */
.guide-hero--rich {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(22px, 1rem + 1.6vw, 36px); box-shadow: var(--shadow);
  background:
    radial-gradient(620px 320px at 100% -20%, rgba(var(--brand-mint-rgb, 20, 224, 176),.16), transparent 60%),
    radial-gradient(520px 360px at -5% 120%, var(--brand-soft), transparent 60%),
    var(--surface);
}
/* la sous-carte d'origine devient transparente : tout vit dans la grande carte */
.guide-hero--rich .guide-hero__inner {
  border: none; background: none; box-shadow: none; padding: 0; border-radius: 0; overflow: visible;
  grid-template-columns: 1.5fr 0.95fr; align-items: start; gap: clamp(20px, 1rem + 1.5vw, 38px);
}
/* Colonne droite : panneau de stats puis boutons (les CTA passent à droite) */
.guide-hero__side { display: flex; flex-direction: column; gap: clamp(14px, 0.8rem + 0.6vw, 18px); }
.guide-hero--rich .guide-hero__side .guide-hero__cta { margin-top: 0; flex-direction: column; align-items: stretch; gap: 10px; }
.guide-hero--rich .guide-hero__side .guide-hero__cta .btn { width: 100%; justify-content: center; }

/* Panneau de stats : grille 2x2 encadrée + pied "Mis à jour" (remplit le coin droit) */
.guide-hero--rich .guide-hero__stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; align-content: start;
  background: var(--glass); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(16px, 0.8rem + 0.8vw, 22px);
}
.guide-hero--rich .guide-hero__stats > div { text-align: left; }
.guide-hero--rich .guide-hero__stat-num { line-height: 1; }
.guide-hero__updated {
  grid-column: 1 / -1; margin: 2px 0 0; padding-top: 12px;
  border-top: 1px solid var(--line); font-size: .76rem; color: var(--muted);
}

.guide-hero__picks, .guide-hero__criteria {
  margin-top: clamp(18px, 1rem + 1.4vw, 26px);
  padding-top: clamp(16px, 0.9rem + 1vw, 24px);
  border-top: 1px solid var(--line);
}
.guide-hero__blocklabel {
  font-family: var(--font-display); font-weight: 700; color: var(--ink);
  font-size: 1.05rem; margin: 0 0 14px;
}
.guide-hero__picks .podium { margin: 10px 0 0; }

/* "Accolade" sur le 1er choix : cadre mis en avant + pastille "Notre n°1" */
.guide-hero__picks .podium__card--1 { box-shadow: 0 0 0 2px var(--brand), var(--shadow-acc); }
.guide-hero__picks .podium__card--1::after {
  content: "\2605 Notre n\B0 1"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--grad-brand); color: var(--on-accent); font-size: .66rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; padding: 5px 13px; border-radius: 999px;
  white-space: nowrap; z-index: 4; box-shadow: var(--shadow-sm);
}
/* Critères en chips (titres seuls) : bloc ultra-compact, on va vite à l'essentiel.
   Le détail de chaque critère vit dans sa section dédiée plus bas. */
.criteria-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 9px; }
.criteria-chips li {
  font-size: .84rem; font-weight: 600; color: var(--ink); line-height: 1.2;
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px;
}

/* "Nos critères de sélection" : liste unique critère + description, dans le bloc du hero. */
.hero-takeaways {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 9px;
}
.hero-takeaways li {
  position: relative; padding-left: 1.15em;
  font-size: .92rem; line-height: 1.5; color: var(--muted);
}
.hero-takeaways li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
}
.hero-takeaways strong { color: var(--ink); font-weight: 700; }

/* Mobile/tablette : le hero enrichi repasse en UNE colonne (sinon le panneau de stats
   + boutons étaient poussés hors écran -> rendu cassé). Spécificité alignée sur la
   règle desktop .guide-hero--rich .guide-hero__inner pour bien la neutraliser. */
@media (max-width: 980px) {
  .guide-hero--rich .guide-hero__inner { grid-template-columns: 1fr; align-items: stretch; gap: 18px; }
  .guide-hero--rich .guide-hero__side { gap: 14px; }
  .guide-hero--rich .guide-hero__side .guide-hero__cta { flex-direction: row; flex-wrap: wrap; }
  .guide-hero--rich .guide-hero__side .guide-hero__cta .btn { width: auto; flex: 1 1 auto; }
}

/* ---- Intro compacte (remplace le gros hero centré + le lead dupliqué) ---- */
.guide-intro { margin-bottom: clamp(18px, 1rem + 1vw, 30px); }
.guide-intro__title { margin: 8px 0 12px; }
.guide-intro__lead { font-size: var(--fs-md); color: var(--muted); max-width: 60ch; margin-bottom: 18px; }

/* ---- Rail (desktop) : sommaire collant scrollspy ---- */
.guide-rail {
  position: sticky; top: var(--guide-top); align-self: start;
  max-height: calc(100dvh - var(--guide-top) - 16px); overflow: auto;
  scrollbar-width: thin;
  min-width: 0;   /* CRUCIAL : sinon, en grille mobile 1 col, les chips (nowrap) forcent
                     la colonne à la largeur de TOUS les chips -> débordement horizontal. */
}
.guide-rail__title {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .13em;
  color: var(--muted); font-weight: 700; margin: 0 0 12px; padding-left: 16px;
}
.guide-rail__list { list-style: none; margin: 0; padding: 0; position: relative; }
.guide-rail__list::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 2px; background: var(--line); border-radius: 2px;
}
.guide-rail__link {
  display: flex; gap: 11px; align-items: baseline; position: relative;
  padding: 7px 8px 7px 16px; line-height: 1.32; font-size: .9rem; color: var(--muted);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: color .15s ease, background .15s ease;
}
.guide-rail__link:hover { color: var(--ink); background: rgba(var(--acc-rgb, 20,224,176), .1); }
.guide-rail__num {
  font-family: var(--font-display); font-weight: 700; font-size: .8rem;
  color: var(--muted); flex: none; min-width: 1.1ch; text-align: center;
}
.guide-rail__num--ico { font-family: var(--font); font-weight: 700; }
/* Titre JAMAIS tronqué : il passe à la ligne (pas d'ellipsis). */
.guide-rail__label { overflow-wrap: anywhere; }
.guide-rail__link--section { margin-top: 6px; }
.guide-rail__link.is-active { color: var(--ink); font-weight: 600; }
.guide-rail__link.is-active::before {
  content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px;
  width: 3px; background: var(--acc, var(--brand)); border-radius: 3px;
}
.guide-rail__link.is-active .guide-rail__num { color: var(--acc, var(--brand)); }
/* Barre de progression : masquée en desktop (le liseré global .progress-bar suffit) ;
   visible uniquement sur mobile, collée au bas du rail sticky (voir media query). */
.guide-rail__bar { display: none; }

/* ---- Bloc "Nos classements" compact (vivait dans une section pleine largeur) ---- */
.guide-related { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 16px 18px; margin: 26px 0; }
.guide-related__title { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1rem; margin: 0 0 10px; }
.xlinks--stack { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- "Tout le catalogue" : liens vers les fiches hors selection du guide ---- */
.catalog-rest { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(16px,1rem+0.7vw,24px); margin: 28px 0; background: var(--surface); }
.catalog-rest__title { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.1rem; margin: 0 0 5px; }
.catalog-rest__lead { color: var(--muted); font-size: .92rem; margin: 0 0 16px; }
/* Grille de liens ALIGNES (fini les pilules de largeurs inegales en vrac). */
.catalog-rest__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.catalog-rest__grid a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: .9rem; font-weight: 600; color: var(--ink);
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 13px; transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.catalog-rest__grid a::after { content: "\2192"; color: var(--muted); font-weight: 700; }
.catalog-rest__grid a:hover { border-color: var(--acc, var(--brand)); color: var(--acc, var(--brand)); background: var(--surface); }
@media (max-width: 480px) { .catalog-rest__grid { grid-template-columns: 1fr 1fr; } }

/* ---- Tableaux : 1re colonne figée + indice de glissement ---- */
.ctable thead th:first-child, .ctable tbody th:first-child,
.cmp-table thead .cmp-th-spec, .cmp-table tbody .cmp-th-spec {
  position: sticky; left: 0; z-index: 1;
}
.ctable tbody th:first-child { background: var(--surface); }
.ctable thead th:first-child { background: var(--bg-alt); }
.cmp-table { min-width: 560px; }
.table-hint {
  display: none; font-size: .8rem; color: var(--muted); font-weight: 600;
  margin: 6px 2px 0; align-items: center; gap: 6px;
}

@media (max-width: 980px) {
  /* Le rail devient une barre de saut horizontale collée sous le header.
     IMPORTANT : on repasse en flux bloc (et pas une grille 1 colonne) car la grille
     a 2 enfants (rail + main) pour 1 seule piste explicite -> le main tombait dans une
     piste IMPLICITE auto, dimensionnée au contenu (tableau, specs) -> débordement
     horizontal de toute la page sur mobile. En bloc, chaque enfant fait 100% et le
     tableau scrolle dans son .ctable-wrap. */
  .guide-shell { display: block; }
  .guide-main.article-body { max-width: none; min-width: 0; }
  .guide-rail {
    /* top = hauteur du header (68px) : la barre se cale PILE dessous, sans être coupée. */
    position: sticky; top: 67px; z-index: 30;
    max-height: none; overflow: visible;
    /* Bleed = padding mobile du .container (16px). -22px débordait de 6px -> scroll horizontal. */
    margin: 0 -16px 16px; padding: 7px 0;
    background: var(--glass-strong);
    -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .guide-rail__title { display: none; }
  .guide-rail__list {
    display: flex; flex-direction: row; align-items: center; gap: 6px; min-width: 0;
    overflow-x: auto; padding: 0 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .guide-rail__list::before, .guide-rail__list::-webkit-scrollbar { display: none; }
  /* Chips compactes et sobres (texte plus petit, coins peu arrondis, AUCUN marqueur) */
  .guide-rail__link {
    flex: none; white-space: nowrap; border: 1px solid var(--line);
    border-radius: 8px; background: var(--surface); padding: 4px 11px; font-size: .76rem;
  }
  .guide-rail__num { display: none; }   /* pas de numéro/icône dans les chips */
  .guide-rail__link.is-active::before { display: none; }
  .guide-rail__link.is-active {
    border-color: rgba(var(--acc-rgb, 20,224,176), .5);
    background: rgba(var(--acc-rgb, 20,224,176), .14);
    color: var(--acc, var(--brand-dark));
  }
  .guide-rail__link.is-active .guide-rail__num { color: var(--acc, var(--brand-dark)); }
  /* Barre de progression de lecture : PILE au niveau du sticky (bord bas du rail) */
  .guide-rail__bar {
    display: block; position: absolute; left: 0; bottom: -1px; height: 2px;
    width: 0; background: var(--acc, var(--brand)); transition: width .12s linear;
  }
  /* Le liseré global ferait doublon : sur mobile, la progression vit sur le sticky. */
  body:has(.guide-rail) .progress-bar { display: none; }
  /* Cible d'ancre dégagée sous header + barre sticky (sinon le titre est caché). */
  .guide-main h2, .guide-main [id] { scroll-margin-top: 116px; }
}

@media (max-width: 720px) {
  .table-hint { display: flex; }
}

/* Liens editoriaux DANS LE CORPS : soulignes = visiblement cliquables au fil du texte (clics affilies). */
.article-body p a:not(.btn):not(.xlink),
.article-body li a:not(.btn):not(.xlink),
.article-lead a { text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   ENCART OUTIL (.tool-callout) - injecte automatiquement par
   autoToolLink() dans build.js, au fil des articles kb/pilier.

   Pourquoi : un moteur IA sait resumer un article, il ne sait pas
   executer un calculateur. L'encart transforme une page de lecture
   (cannibalisable) en porte d'entree vers un outil (destination).
   Sans cet encart, les calculateurs du site restent invisibles
   depuis le contenu qui leur amenerait du trafic.
   ============================================================ */
/* Fond = --surface (theme-aware : redefini en clair ET en sombre dans style.css).
   PAS --brand-soft : seul ecranspc en donne une version sombre dans son theme.css ;
   sur urbanito/maizon il resterait clair en mode sombre, avec --ink passe au blanc
   -> encart illisible. La couleur de marque passe par la bordure gauche, qui elle
   est lisible sur les deux fonds. */
.tool-callout {
  display: flex; align-items: center; gap: 16px;
  margin: 30px 0; padding: 18px 20px;
  /* Fond teinte plutot qu'un filet lateral : un `border-left` sur un bloc
     arrondi dessine un crochet, interdit par le controle d'audit. */
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--brand, var(--primary)) 9%, transparent),
      transparent 55%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 12px);
}
/* La tuile elle-meme est declaree une seule fois dans components.css, avec
   celles des autres fentes, pour qu'elles ne divergent pas. Ici : la taille. */
.tool-callout__icon { width: 46px; height: 46px; border-radius: 14px; }
.tool-callout__icon .ico { width: 24px; height: 24px; }
.tool-callout__body { flex: 1 1 auto; min-width: 0; }
.tool-callout__label {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.tool-callout__title { display: block; font-weight: 700; color: var(--ink); line-height: 1.35; }
.tool-callout__title a { color: inherit; text-decoration: none; }
.tool-callout__title a:hover { text-decoration: underline; }
.tool-callout__desc { display: block; margin-top: 4px; font-size: .92rem; color: var(--text, var(--muted)); }
.tool-callout__cta {
  flex: 0 0 auto; align-self: center; white-space: nowrap;
  padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: .9rem;
  background: var(--brand, var(--primary)); color: var(--on-accent, #fff); text-decoration: none;
}
.tool-callout__cta:hover { filter: brightness(1.07); }
@media (max-width: 640px) {
  .tool-callout { flex-wrap: wrap; gap: 12px; }
  .tool-callout__cta { width: 100%; text-align: center; }
}


/* Renvois vers les calculateurs, sous le tableau technique d'une fiche.
   Volontairement sobre : c'est un complement d'information, pas une publicite.
   PAS de flex sur les <li> (voir regle 13 des conventions) : ce sont des
   phrases, avec un lien et de la ponctuation. */
.fiche-outils {
  border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 18px; margin: 0 0 1.4em;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--primary) 9%, transparent), transparent 55%),
    var(--bg-alt);
}
.fiche-outils__titre {
  margin: 0 0 8px; font-weight: 700; color: var(--ink);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
}
.fiche-outils ul { margin: 0; padding-left: 20px; }
.fiche-outils li { margin: 0 0 6px; color: var(--muted); line-height: 1.55; }
.fiche-outils li:last-child { margin-bottom: 0; }

/* ============================================================
   TABLEAUX LARGES : ILS DEFILENT DANS LEUR CADRE

   `.table-scroll` est posee autour des tableaux depuis toujours dans le HTML,
   et n'avait JAMAIS ete stylee. Consequence mesuree au telephone : 9 pages sur
   30 poussaient la page entiere vers la droite, jusqu'a 242 px de decalage.
   Tout le texte s'en trouvait deporte et il fallait balayer lateralement pour
   lire un simple paragraphe.

   Un tableau plus large que l'ecran doit defiler DANS son propre cadre. Le
   `min-width` sur la table empeche les colonnes de s'ecraser au point de
   devenir illisibles ; le voile a droite indique qu'il reste du contenu.
   ============================================================ */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-md) 0;
  border-radius: var(--radius);
}
.table-scroll > .styled-table { margin: 0; }

@media (max-width: 720px) {
  .table-scroll > .styled-table { min-width: 34rem; }
  /* Le voile dit qu'il reste quelque chose a droite : sans lui, un tableau
     coupe net ressemble a un tableau complet. */
  .table-scroll {
    background:
      linear-gradient(to right, var(--bg) 30%, rgba(0, 0, 0, 0)) left center / 24px 100% no-repeat,
      linear-gradient(to left, var(--bg) 30%, rgba(0, 0, 0, 0)) right center / 24px 100% no-repeat;
    background-attachment: local, local;
  }
}

/* ============================================================
   DEUX DERNIERS DEBORDEMENTS, TROUVES EN BALAYANT LES 285 PAGES

   1. Un `<table>` SANS CLASSE, ecrit a la main dans un article, echappe a
      `.table-scroll` comme a `.ctable-wrap` : rien ne le fait defiler et il
      pousse la page. On le rend defilant par lui-meme, sans toucher aux deux
      tableaux deja encadres.

   2. La barre de filtres du Mag a bien un `overflow-x: auto`, mais son
      conteneur n'avait pas de `min-width: 0` : en contexte flex, la piste
      s'etirait a la largeur de son contenu au lieu de defiler.

   Debordement mesure : 15 px et 10 px. Peu, mais assez pour decaler tout le
   texte d'une page sur un telephone.
   ============================================================ */
.article-body table:not(.ctable):not(.styled-table) {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pagenav, .pagenav__track { min-width: 0; max-width: 100%; }

/* ============================================================
   EN-TETE D ARTICLE

   97 articles du Mag commencaient par un titre pose sur du noir : les 250
   premiers pixels ne montraient rien, et rien ne distinguait le haut de la
   page du reste. Ils recoivent le meme bandeau que les hubs et les
   classements. Le fond reprend la teinte de rayon quand la page en declare
   une, sinon la couleur de marque.
   ============================================================ */
.kb-hero,
.tool-hero,
.product-hero {
  position: relative; overflow: hidden;
  padding: var(--hero-haut) 0 var(--hero-bas);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(760px 380px at 82% -18%,
      color-mix(in srgb, var(--acc, var(--brand)) 16%, transparent), transparent 62%),
    radial-gradient(560px 380px at 0% 0%,
      color-mix(in srgb, var(--brand) 12%, transparent), transparent 58%);
}
/* Deux colonnes quand l en-tete porte un produit, une seule sinon.
   Le placement est EXPLICITE : piege deja rencontre deux fois sur l accueil. */
.kb-hero__grid { max-width: var(--lecture); margin: 0 auto; }
/* MEME largeur que le corps de l article. A 1100 px, l en-tete commencait
   140 px a gauche du texte qu il annonce : deux verticales differentes sur la
   meme page. */
.kb-hero--pick .kb-hero__grid {
  max-width: var(--lecture);
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 34px); align-items: center;
}
.kb-hero--pick .kb-hero__grid > .kb-hero__text { grid-column: 1; grid-row: 1; }
.kb-hero--pick .kb-hero__grid > .kb-hero__pick { grid-column: 2; grid-row: 1; }

/* La carte du produit mis en avant : socle clair dans les deux themes, comme
   toutes les tuiles image du site, pour que les visuels a fond blanc s y
   fondent au lieu de flotter en carre blanc. */
.kb-hero__pick {
  display: flex; flex-direction: column; gap: 10px; text-align: center;
  background: var(--plinth); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(14px, 1.4vw, 20px);
  box-shadow: var(--shadow-md);
  transition: transform .2s ease, box-shadow .2s ease;
}
.kb-hero__pick:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.kb-hero__shot { display: block; }
.kb-hero__shot img { width: 100%; max-height: 150px; object-fit: contain; display: block; }
.kb-hero__pickbody { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.kb-hero__tag {
  /* .68rem sortait a 10,9 px sur telephone, sur 89 pages. Des capitales
     espacees ont besoin de 12 px. Mesure au balayage. */
  font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--brand-dark); background: color-mix(in srgb, var(--brand) 16%, transparent);
  padding: .3em .8em; border-radius: 999px;
}
/* Socle CLAIR dans les deux themes : --ink y ecrirait du blanc sur du blanc en
   theme sombre. Meme piege que sur la scene du hero d accueil. */
.kb-hero__pickname { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--brand-dark); line-height: 1.2; }
.kb-hero__picksub { font-size: .8rem; color: color-mix(in srgb, var(--brand-dark) 62%, transparent); line-height: 1.35; }
.kb-hero__picksee { font-size: .82rem; font-weight: 700; color: var(--brand); }

@media (max-width: 860px) {
  .kb-hero--pick .kb-hero__grid { grid-template-columns: 1fr; }
  .kb-hero--pick .kb-hero__grid > .kb-hero__pick { grid-column: 1; grid-row: 2; }
  .kb-hero__shot img { max-height: 150px; }
}
.kb-hero__text h1 { font-size: var(--fs-hero); line-height: 1.1; margin: 10px 0 0; }
.kb-hero__text .article-lead { margin: 14px 0 0; }

/* ============================================================
   ENCART DE NOTE

   `.note-box` etait employe sur 21 pages sans exister dans aucune feuille de
   style : ses 54 encarts s'affichaient en texte nu, et leur titre - qui
   portait la MEME classe que la boite - ressemblait a un titre casse au milieu
   de la prose.

   Fond teinte plutot qu'un filet lateral : un `border-left` sur un bloc
   arrondi dessine un crochet, interdit par le controle d'audit. Meme parti
   pris que l'encart d'outil.
   ============================================================ */
.note-box {
  /* Contexte de formatage propre : sans lui, la vignette produit qui flotte a
     droite passait PAR-DESSUS le cadre de l encart. Mesure : encart 325-1101,
     vignette 884-1080. Avec, l encart se retrecit a cote du flottant. */
  overflow: hidden;
  margin: var(--space-md) 0;
  padding: clamp(14px, 1.4vw, 18px) clamp(16px, 1.6vw, 20px);
  border: 1px solid rgba(var(--acc-rgb), .22);
  border-radius: var(--radius);
  background:
    radial-gradient(130% 120% at 0% 0%, rgba(var(--acc-rgb), .09), transparent 60%),
    var(--surface);
}
.note-box > .note-box__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--acc, var(--brand));
  margin-bottom: 8px;
}
.note-box > p { margin: 0; }
.note-box > p + p { margin-top: .7em; }

/* ============================================================
   COMPOSANTS QUI N'AVAIENT AUCUN STYLE

   Trouves par le controle des classes fantomes ajoute a l'audit le
   2026-09-07. Ils s'affichaient en texte nu depuis toujours, sur des dizaines
   de pages, sans que rien ne le signale.
   ============================================================ */

/* ---- « L'avis de l'expert » (25 pages) ----
   Fond teinte plutot qu'un filet lateral : un `border-left` sur un bloc
   arrondi dessine un crochet, interdit par le controle d'audit. */
.expert-verdict {
  margin: var(--space-md) 0;
  padding: clamp(16px, 1.6vw, 22px) clamp(18px, 1.8vw, 24px);
  border: 1px solid rgba(var(--acc-rgb), .26);
  border-radius: var(--radius);
  background:
    radial-gradient(130% 120% at 0% 0%, rgba(var(--acc-rgb), .10), transparent 58%),
    var(--surface);
}
.expert-verdict__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--acc, var(--brand)); margin-bottom: 8px;
}
.expert-verdict > p { margin: 0; }
.expert-verdict > p + p { margin-top: .7em; }

/* ---- Mise en avant produit dans un article (10 pages) ---- */
.product-spotlight {
  display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 22px); align-items: center;
  margin: var(--space-md) 0; padding: clamp(14px, 1.6vw, 20px);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.product-spotlight__img {
  background: var(--plinth); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px; aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
}
.product-spotlight__img img { width: 100%; height: 100%; object-fit: contain; }
.product-spotlight__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.product-spotlight__label {
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--acc, var(--brand));
}
.product-spotlight__name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.product-spotlight__desc { font-size: .9rem; color: var(--muted); margin: 0; }
.product-spotlight__action { margin-top: 6px; }
@media (max-width: 620px) {
  .product-spotlight { grid-template-columns: 1fr; }
  .product-spotlight__img { max-width: 150px; }
}

/* ---- Le bouton qui clot un bloc de produits similaires (120 pages) ---- */
.similar__cta { margin: var(--space-md) 0 0; text-align: center; }

/* ---- Tableaux d'article : la ligne et la cellule remarquables ----
   Le tableau comparatif `.ctable` a les siennes ; les tableaux ecrits dans le
   corps d'un article n'en avaient aucune, alors que le HTML les demandait. */
.article-body tr.highlight > td,
.article-body tr.highlight > th { background: rgba(var(--acc-rgb), .09); }
.article-body td.best,
.article-body th.best { color: var(--success); font-weight: 700; }

/* ---- Liste de cas chiffres sous un outil (6 pages) ---- */
.tool-exemples {
  list-style: none; margin: var(--space-sm) 0 var(--space-md); padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.tool-exemples li {
  padding: 11px 15px; border-radius: var(--radius-sm);
  background: var(--bg-alt); border: 1px solid var(--line);
  font-size: .93rem; color: var(--text);
}
.tool-exemples strong { color: var(--acc, var(--brand)); }

/* ---- Compteur dans l'en-tete d'un pilier (3 pages) ----
   `.guide-hero__stat` encadrait le seul chiffre calcule du panneau, au
   milieu de freres sans cadre et dans un panneau deja encadre. Le balisage
   du build a ete aligne sur celui de la source ; la classe n'existe plus. */
.guide-hero__stat-num { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--acc, var(--brand)); line-height: 1; }
.guide-hero__stat-label { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }

/* ---- Avantages / limites en deux colonnes (1 page) ----
   Reprend le vocabulaire de `.proscons`, qui fait deja cela ailleurs. */
.product-card__pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: var(--space-md) 0; }
.product-card__pros-cons .pros,
.product-card__pros-cons .cons {
  padding: 18px 20px; border-radius: var(--radius); border: 1px solid var(--line);
}
.product-card__pros-cons .pros { background: var(--pro-bg); border-color: var(--pro-line); }
.product-card__pros-cons .cons { background: var(--con-bg); border-color: var(--con-line); }
.product-card__pros-cons h4 { margin: 0 0 10px; font-size: 1rem; }
.product-card__pros-cons .pros h4 { color: var(--success); }
.product-card__pros-cons .cons h4 { color: var(--copper, #B5694A); }
.product-card__pros-cons ul { margin: 0 0 0 1.1em; }
@media (max-width: 620px) { .product-card__pros-cons { grid-template-columns: 1fr; } }