/* =========================================================
   AdminToolz : page article et fiche review
   Chargé par PostController et ReviewController : 'styles' => ['article.css']
   Sommaire :
   1. En-tête d'article
   2. Grille + sommaire (TOC des pages piliers)
   3. Corps de l'article (prose, images, médias)
   4. Divulgation d'affiliation
   5. Galerie de preuves
   6. FAQ
   7. Tags + encadré auteur
   8. Contenus liés (8bis : fiche review, 8ter : cocon pilier / cluster)
   9. Responsive

   v3 :
   - images : largeur plafonnée, hauteur TOUJOURS libre (plus de recadrage) ;
   - sommaire hiérarchique, section en cours surlignée (main.js) ;
   - un seul point de rupture (1000px) pour la grille et le sommaire ;
   - ancres calées sous le header collant (--atz-header-h, mis à jour par main.js).
   ========================================================= */

:root{--atz-header-h:72px;}

/* ---------- 1. EN-TÊTE ---------- */
.article-head{background:#fff;padding:30px 26px 28px;}
.article-head-inner{max-width:820px;margin:0 auto;}

.article-kicker{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
}
.article-kicker a{color:var(--red);}
.article-kicker a:hover{text-decoration:underline;}
.article-type{
  border:1px solid #DCDCDC;border-radius:3px;
  padding:3px 8px;color:var(--muted);
}

.article-title{
  font-family:var(--heavy);
  font-size:44px;line-height:1.08;letter-spacing:-.6px;
  margin-top:16px;
}
.article-standfirst{
  margin-top:16px;font-size:19px;line-height:1.55;color:#4A4A4A;max-width:68ch;
}

.article-byline{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.byline-author{display:inline-flex;align-items:center;gap:10px;font-size:16px;}
.byline-author img{width:32px;height:32px;border-radius:50%;object-fit:cover;}
.byline-author:hover span{color:var(--red);}
.byline-data{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
}
.byline-data svg{width:14px;height:14px;stroke-width:1.9;}
.byline-updated{color:var(--blue);}

/* Image principale : pleine largeur du cadre, hauteur selon l'image. */
.article-hero{max-width:1000px;margin:0 auto;padding:0 26px;}
.article-hero img{
  display:block;width:100%;height:auto;
  border-radius:6px;border:1px solid var(--line);
}

/* ---------- 2. GRILLE + SOMMAIRE ---------- */
/* Sans sommaire : une colonne centrée. Avec sommaire : 270px + texte (desktop). */
.article-wrap{max-width:1160px;margin:0 auto;padding:36px 26px 60px;}
.article-wrap > .article-body--wide{max-width:820px;margin:0 auto;}
.article-wrap.has-toc{
  display:grid;grid-template-columns:270px minmax(0,1fr);gap:48px;align-items:start;
}

/* Sommaire : colonne collante sur desktop, barre repliable sur mobile (section 9). */
.toc{
  position:sticky;top:calc(var(--atz-header-h) + 24px);z-index:20;
  max-height:calc(100vh - var(--atz-header-h) - 48px);overflow-y:auto;
  overscroll-behavior:contain;scrollbar-width:thin;
}
.toc-box{background:#fff;border:1px solid #E6E6E6;border-radius:8px;padding:20px 18px 18px;}
.toc-summary{
  display:flex;align-items:center;gap:12px;list-style:none;cursor:default;margin-bottom:12px;
}
.toc-summary::-webkit-details-marker{display:none;}
.toc-summary:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px;}
.toc-title{
  flex:none;font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.toc-current{
  display:none;flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-size:15px;font-weight:600;color:var(--red);
}
.toc-caret{
  display:none;flex:none;width:18px;height:18px;
  fill:none;stroke:var(--muted);stroke-width:2.2;transition:transform .18s;
}
.toc-box[open] .toc-caret{transform:rotate(180deg);}

.toc-list,.toc-sub{list-style:none;margin:0;padding:0;}
.toc-list{counter-reset:toc;}

/* Chaque entrée s'accroche à un rail vertical ; la section lue y marque un trait rouge. */
.toc-link{
  display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:4px;
  padding:6px 8px 6px 12px;border-left:2px solid var(--line);
  font-size:15px;line-height:1.35;color:#3F3F3F;
  transition:color .15s,background-color .15s,border-color .15s;
}
/* Numéro de chapitre : uniquement sur les <h2>. */
.toc-list > .toc-item:not(.toc-item--extra){counter-increment:toc;}
.toc-list > .toc-item:not(.toc-item--extra) > .toc-link::before{
  content:counter(toc) ".";
  font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--red);
}
/* Sous-titres <h3> et sections de fin : décalés, sans numéro. */
.toc-sub .toc-link,
.toc-item--extra .toc-link{
  grid-template-columns:minmax(0,1fr);padding-left:40px;font-size:14px;color:#5C5C5C;
}
.toc-item--extra.is-first-extra{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);}

.toc-link:hover{color:var(--red);background:var(--bg-soft);}
.toc-link:focus-visible{outline:2px solid var(--red);outline-offset:-2px;}

/* Section en cours de lecture. */
.toc-link.is-active{
  color:var(--red);background:#FFF6F6;border-left-color:var(--red);font-weight:600;
}
/* Le chapitre qui contient le <h3> lu reste marqué. */
.toc-item.is-parent-active > .toc-link{color:#1F1F1F;font-weight:600;}

@media (prefers-reduced-motion:no-preference){
  html:has(.toc){scroll-behavior:smooth;}
}

/* ---------- 3. CORPS ---------- */
.article-body{
  background:#fff;border:1px solid #E6E6E6;border-radius:8px;
  padding:34px 40px 40px;
  font-size:17.5px;line-height:1.68;color:#333;
}
.article-body > * + *{margin-top:20px;}
.article-body h2{
  font-family:var(--heavy);font-size:27px;line-height:1.2;margin-top:44px;
}
.article-body h3{
  font-size:21px;font-weight:600;line-height:1.3;margin-top:30px;
}
/* Ancres : un titre visé par un lien s'arrête sous le header collant. */
.article-body :is(h2,h3)[id],
.article #cluster-hub,.article #faq,.article #screenshots,.article #pricing,.article #verdict{
  scroll-margin-top:calc(var(--atz-header-h) + 24px);
}
.article-body p{max-width:70ch;}
.article-body a{color:var(--blue);text-decoration:underline;}
.article-body a:hover{color:#0F64D6;}
.article-body ul,.article-body ol{padding-left:22px;max-width:70ch;}
.article-body ul li{list-style:disc;}
.article-body ol li{list-style:decimal;}
.article-body li + li{margin-top:8px;}
.article-body strong{font-weight:600;color:#1F1F1F;}
.article-body blockquote{
  border-left:3px solid var(--red);background:var(--bg-soft);
  margin-left:0;margin-right:0;padding:16px 20px;
  font-size:17px;color:#3F3F3F;
}

/* Images : une seule dimension imposée (largeur max = la colonne),
   la hauteur suit les proportions réelles. Les attributs width/height
   du HTML servent au navigateur à réserver la place (pas de saut). */
.article-body img{
  display:block;width:auto;max-width:100%;height:auto;margin-left:auto;margin-right:auto;
  border-radius:4px;border:1px solid var(--line);
}
.article-body figure{margin-left:0;margin-right:0;}
.article-body figure figcaption{
  margin-top:8px;font-family:var(--mono);font-size:12.5px;color:var(--muted);text-align:center;
}

.article-body table{
  width:100%;border-collapse:collapse;font-size:16px;display:block;overflow-x:auto;
}
.article-body th,.article-body td{
  border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;
}
.article-body th{background:var(--bg-soft);font-weight:600;}
.article-body code{
  font-family:var(--mono);font-size:14.5px;background:var(--bg-soft);
  padding:2px 6px;border-radius:3px;
}
.article-body pre{
  background:#1F1F1F;color:#EDEDED;border-radius:6px;padding:16px 18px;overflow-x:auto;
}
.article-body pre code{background:none;color:inherit;padding:0;}
/* Vidéo intégrée : ici seulement, le ratio est imposé (une iframe n'en a pas). */
.article-body iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:6px;}
.article-body video{display:block;width:100%;height:auto;border-radius:6px;}
.article-body hr{border:0;border-top:1px solid var(--line);margin:32px 0;}

/* ---------- 4. DIVULGATION ---------- */
.disclosure{
  display:flex;gap:12px;align-items:flex-start;
  background:#FFF6F6;border-left:3px solid var(--red);border-radius:0 4px 4px 0;
  padding:14px 16px;margin-bottom:28px;
}
.disclosure-icon{width:20px;height:20px;flex:none;color:var(--red);margin-top:2px;}
.disclosure p{font-size:15px;line-height:1.5;color:#4A4A4A;max-width:none;}
.disclosure a{color:var(--blue);}

/* ---------- 5. GALERIE ---------- */
.gallery{margin-top:44px;padding-top:30px;border-top:1px solid var(--line);}
.gallery-title{font-family:var(--heavy);font-size:24px;line-height:1.2;}
.gallery-note{
  margin-top:6px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
}
.gallery-grid{
  margin-top:20px;display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:start;
}
/* Captures non recadrées : on montre l'écran entier, comme promis. */
.article-body .gallery-item img{width:100%;height:auto;margin:0;}
.gallery-item figcaption{
  margin-top:8px;font-size:14.5px;color:var(--muted);line-height:1.4;
}
.gallery-videos{margin-top:18px;}
.gallery-videos li + li{margin-top:10px;}
.gallery-videos a{
  display:inline-flex;align-items:center;gap:10px;color:var(--blue);font-size:16.5px;
}
.gallery-videos a:hover{text-decoration:underline;}
.gallery-videos svg{width:20px;height:20px;stroke-width:1.8;}

/* ---------- 6. FAQ ---------- */
.faq{margin-top:44px;padding-top:30px;border-top:1px solid var(--line);}
.faq-title{font-family:var(--heavy);font-size:24px;line-height:1.2;margin-bottom:18px;}
.faq-item{border:1px solid #E6E6E6;border-radius:6px;background:var(--bg-soft);}
.faq-item + .faq-item{margin-top:10px;}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 18px;cursor:pointer;font-size:17px;font-weight:600;color:#1F1F1F;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--red);}
.faq-caret{width:18px;height:18px;flex:none;color:var(--muted);stroke-width:2.2;transition:transform .18s;}
.faq-item[open] .faq-caret{transform:rotate(180deg);}
.faq-answer{padding:0 18px 16px;font-size:16.5px;line-height:1.6;color:#3F3F3F;}

/* ---------- 7. TAGS + AUTEUR ---------- */
.article-tags{
  margin-top:36px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px;
}
.tag-chip{
  display:inline-block;border:1px solid #E0E0E0;border-radius:4px;
  padding:7px 12px;font-family:var(--mono);font-size:13px;color:#5C5C5C;
  background:var(--bg-soft);
}
.tag-chip:hover{border-color:var(--red);color:var(--red);}

.author-box{
  margin-top:32px;border:1px solid #E6E6E6;border-radius:8px;
  background:var(--bg-soft);padding:22px 24px 24px;
}
.author-box-label{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:16px;
}
.author-box-inner{display:grid;grid-template-columns:88px minmax(0,1fr);gap:20px;align-items:start;}
.author-box-inner:only-child{grid-template-columns:1fr;}
.author-avatar{width:88px;height:88px;border-radius:50%;object-fit:cover;border:1px solid #E0E0E0;}
.author-name{font-family:var(--heavy);font-size:19px;}
.author-name a:hover{color:var(--red);}
.author-role{
  margin-top:4px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--red);
}
.author-bio{margin-top:12px;font-size:16px;line-height:1.55;color:#3F3F3F;}
.author-expertise{margin-top:10px;font-size:15px;color:#5C5C5C;}
.author-links{margin-top:12px;display:flex;gap:14px;flex-wrap:wrap;}
.author-links a{font-family:var(--mono);font-size:13px;color:var(--blue);}
.author-links a:hover{text-decoration:underline;}

/* ---------- 8. CONTENUS LIÉS ---------- */
.related{background:#fff;border-top:1px solid var(--line);padding:46px 0 54px;}
.related .section-title{margin-bottom:22px;}

/* ---------- 8bis. FICHE REVIEW ---------- */
/* Kicker : badges Tested / No access */
.article-type.is-tested{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--blue);border-color:var(--blue);color:#fff;
}
.article-type.is-tested svg{width:12px;height:12px;stroke-width:2.6;}
.article-type.is-untested{background:var(--dark);border-color:var(--dark);color:#fff;}

/* Zone verdict, sous l'image */
.verdict-wrap{max-width:1160px;margin:0 auto;padding:30px 26px 0;}
.verdict-wrap .disclosure{margin-bottom:18px;}

.verdict{
  background:#fff;border:1px solid #E6E6E6;border-radius:10px;
  box-shadow:0 4px 18px rgba(0,0,0,.05);
  overflow:hidden;
}
.verdict-main{
  display:grid;grid-template-columns:170px minmax(0,1fr) 300px;
  gap:0;align-items:stretch;
}

/* Note */
.verdict-score{
  background:var(--dark);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:28px 16px;text-align:center;
}
.verdict-number{font-family:var(--display);font-size:64px;line-height:1;letter-spacing:1px;}
.verdict-best{font-family:var(--mono);font-size:14px;color:#BDBDBD;margin-top:4px;}
.verdict-label{
  margin-top:14px;padding:5px 12px;border-radius:3px;background:var(--red);
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
}
.verdict-score.is-empty .verdict-number{font-size:40px;color:#BDBDBD;}
.verdict-score.is-empty .verdict-label{background:#555;}

/* Texte du verdict */
.verdict-text{padding:26px 30px;}
.verdict-eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--red);
}
.verdict-title{font-family:var(--heavy);font-size:28px;line-height:1.15;margin-top:6px;}
.verdict-vendor{margin-top:4px;font-size:15px;color:var(--muted);}
.verdict-status{
  display:flex;align-items:flex-start;gap:8px;
  margin-top:14px;font-size:15px;line-height:1.45;
}
.verdict-status svg{width:18px;height:18px;flex:none;stroke-width:2.4;margin-top:1px;}
.verdict-status.is-tested{color:var(--blue);font-weight:600;}
.verdict-status.is-untested{
  background:#FFF6F6;border-left:3px solid var(--red);padding:10px 12px;color:#8E0E2E;
}
.verdict-summary{margin-top:14px;font-size:16.5px;line-height:1.6;color:#3F3F3F;}

/* Détail de la note */
.verdict-breakdown{margin-top:20px;}
.verdict-breakdown li{
  display:grid;grid-template-columns:150px minmax(0,1fr) 36px;
  align-items:center;gap:12px;
}
.verdict-breakdown li + li{margin-top:9px;}
.bd-name{font-size:14.5px;color:#3F3F3F;}
.bd-bar{height:8px;border-radius:4px;background:#EDEDED;overflow:hidden;}
.bd-bar span{display:block;height:100%;border-radius:4px;background:var(--red);}
.bd-score{font-family:var(--mono);font-size:13px;text-align:right;color:#1F1F1F;}

/* Colonne achat */
.verdict-buy{
  background:var(--bg-soft);border-left:1px solid var(--line);
  padding:26px 24px;display:flex;flex-direction:column;
}
.buy-label{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.buy-price{font-family:var(--display);font-size:44px;line-height:1.05;color:#1F1F1F;margin-top:4px;}
.buy-note{font-size:14px;color:var(--muted);margin-top:2px;}
.buy-facts{margin:18px 0 0;}
.buy-facts div{
  display:flex;justify-content:space-between;gap:12px;
  padding:8px 0;border-top:1px solid var(--line);font-size:14.5px;
}
.buy-facts dt{color:var(--muted);}
.buy-facts dd{margin:0;text-align:right;color:#1F1F1F;font-weight:600;}
.buy-facts code{
  font-family:var(--mono);font-size:13px;background:#fff;
  border:1px dashed var(--red);border-radius:3px;padding:2px 7px;color:var(--red);
}
.buy-cta{margin-top:20px;text-align:center;}
.buy-bonus{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin-top:12px;font-size:15px;color:var(--blue);
}
.buy-bonus svg{width:18px;height:18px;stroke-width:1.8;}
.buy-bonus:hover{text-decoration:underline;}
.buy-disclaimer{
  margin-top:auto;padding-top:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--muted);line-height:1.5;
}

/* Pros / cons */
.verdict-points{
  display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
}
.points{padding:22px 30px 24px;}
.points + .points{border-left:1px solid var(--line);}
.points h3{
  display:flex;align-items:center;gap:8px;
  font-family:var(--heavy);font-size:17px;margin-bottom:12px;
}
.points li{
  position:relative;padding-left:26px;
  font-size:15.5px;line-height:1.5;color:#3F3F3F;
}
.points li + li{margin-top:9px;}
.points li::before{
  position:absolute;left:0;top:0;
  font-family:var(--mono);font-weight:700;font-size:16px;
}
.points-pros h3{color:#136B39;}
.points-pros li::before{content:"+";color:#0F9D58;}
.points-cons h3{color:#B3261E;}
.points-cons li::before{content:"\2212";color:var(--red);}

/* Bonus */
/* Bonus : texte + bouton d'action à côté du titre */
.verdict-bonus{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  border-top:1px solid var(--line);background:#FFF9F0;
  padding:18px 30px 20px;
}
.verdict-bonus > svg{width:24px;height:24px;flex:none;color:var(--red);stroke-width:1.8;align-self:flex-start;margin-top:2px;}
.verdict-bonus-text{flex:1;min-width:240px;}
.verdict-bonus-title{font-family:var(--heavy);font-size:16px;margin-bottom:4px;}
.verdict-bonus p{font-size:15px;line-height:1.55;color:#3F3F3F;}
.verdict-bonus-cta{flex:none;white-space:nowrap;text-align:center;}
@media (max-width:640px){
  .verdict-bonus{padding:16px 20px;}
  .verdict-bonus-cta{width:100%;}
}

/* Vidéo */
.review-video a{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;text-decoration:none;
}
.review-video svg{width:22px;height:22px;stroke-width:1.8;}

/* Funnel / OTOs */
.funnel{margin-top:44px;padding-top:30px;border-top:1px solid var(--line);}
.funnel-title{font-family:var(--heavy);font-size:24px;line-height:1.2;}
.funnel-note{
  margin-top:6px;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--muted);
}
.funnel-table{margin-top:18px;overflow-x:auto;}
.article-body .funnel table{display:table;font-size:15.5px;}
.funnel th,.funnel td{vertical-align:middle;}
.funnel thead th{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
}
.funnel-step{
  display:inline-block;min-width:52px;margin-right:8px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted);
}
.funnel-badge{
  display:inline-block;margin-left:8px;padding:2px 8px;border-radius:3px;
  background:#E9F8EF;color:#136B39;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
}
.funnel-price{font-family:var(--mono);font-weight:700;white-space:nowrap;color:#1F1F1F;}
.funnel tr.is-recommended td{background:#FBFFFC;}
.funnel tfoot th,.funnel tfoot td{background:var(--bg-soft);font-weight:600;}

/* CTA de fin */
.review-final-cta{
  margin-top:40px;padding:22px 24px;border-radius:8px;
  background:var(--dark);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.review-final-cta p{max-width:none;font-size:16.5px;color:#E8E8E8;}
.review-final-cta strong{color:#fff;margin-right:6px;}
.article-body .review-final-cta a.btn-red{color:#fff;text-decoration:none;}

/* ---------- 8ter. COCON PILIER / CLUSTER ---------- */
.article-type.is-pillar{background:var(--red);border-color:var(--red);color:#fff;}

/* Encart "Part of the guide" (page cluster vers son pilier) */
.pillar-box{
  max-width:1108px;margin:26px auto 0;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:#fff;border:1px solid #E6E6E6;border-left:3px solid var(--red);
  border-radius:0 8px 8px 0;padding:16px 20px;
}
.pillar-box > svg{width:26px;height:26px;flex:none;color:var(--red);stroke-width:1.7;}
.pillar-box p{flex:1;min-width:220px;}
.pillar-box-label{
  display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.pillar-box p a{font-family:var(--heavy);font-size:18px;line-height:1.3;color:#1F1F1F;}
.pillar-box p a:hover{color:var(--red);}
.pillar-box-link{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--blue);font-size:15.5px;white-space:nowrap;
}
.pillar-box-link:hover{text-decoration:underline;}
.pillar-box-link .arrow{width:15px;height:15px;stroke-width:2.2;}

/* Hub des clusters (page pilier vers ses clusters) */
.cluster-hub{margin-top:44px;padding-top:30px;border-top:1px solid var(--line);}
.cluster-hub-title{font-family:var(--heavy);font-size:24px;line-height:1.2;}
.cluster-hub-note{
  margin-top:6px;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--muted);
}
.article-body .cluster-list{
  margin-top:18px;padding-left:0;max-width:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
}
.article-body .cluster-list li{list-style:none;margin:0;}
.article-body .cluster-list a{
  display:flex;align-items:center;gap:12px;height:100%;
  border:1px solid #E6E6E6;border-radius:6px;background:var(--bg-soft);
  padding:13px 15px;text-decoration:none;color:#2B2B2B;
  transition:border-color .15s;
}
.article-body .cluster-list a:hover{border-color:var(--red);}
.article-body .cluster-list a:hover .cluster-name{color:var(--red);}
.cluster-type{
  flex:none;min-width:74px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}
.cluster-name{flex:1;font-size:16px;line-height:1.35;font-weight:600;}
.cluster-score{
  flex:none;font-family:var(--display);font-size:20px;line-height:1;
  color:#fff;background:var(--dark);border-radius:3px;padding:5px 8px;
}

/* ---------- 9. RESPONSIVE ---------- */
@media (max-width:1000px){
  .article-title{font-size:34px;}
  .article-standfirst{font-size:17.5px;}
  .article-wrap{padding-top:26px;}
  .article-wrap > .article-body--wide{max-width:none;}

  /* Sommaire : barre collante repliée sous le header, affiche la section en cours. */
  .article-wrap.has-toc{grid-template-columns:minmax(0,1fr);gap:20px;}
  .toc{top:var(--atz-header-h);max-height:none;overflow:visible;}
  .toc-box{padding:0;box-shadow:0 6px 18px rgba(0,0,0,.06);}
  .toc-summary{cursor:pointer;margin:0;padding:13px 16px;}
  .toc-current,.toc-caret{display:block;}
  .toc-list{max-height:60vh;overflow-y:auto;padding:0 12px 14px;}
  /* Les titres visés passent aussi sous cette barre. */
  .article-wrap.has-toc :is(h2,h3)[id],
  .article-wrap.has-toc :is(#cluster-hub,#faq,#screenshots){
    scroll-margin-top:calc(var(--atz-header-h) + 80px);
  }

  .verdict-main{grid-template-columns:150px minmax(0,1fr);}
  .verdict-buy{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);}
  .verdict-number{font-size:54px;}
}

@media (max-width:640px){
  .article-head{padding:22px 18px 22px;}
  .article-title{font-size:27px;}
  .article-standfirst{font-size:16.5px;}
  .article-hero{padding:0 18px;}
  .article-wrap{padding:20px 18px 44px;}
  .article-body{padding:22px 20px 26px;font-size:17px;border-radius:6px;}
  .article-body h2{font-size:22px;margin-top:34px;}
  .article-body h3{font-size:19px;}
  .gallery-grid{grid-template-columns:1fr;}
  .author-box-inner{grid-template-columns:1fr;gap:14px;}
  .author-avatar{width:68px;height:68px;}

  .verdict-wrap{padding:22px 18px 0;}
  .verdict-main{grid-template-columns:1fr;}
  .verdict-score{flex-direction:row;gap:12px;padding:18px;}
  .verdict-number{font-size:46px;}
  .verdict-label{margin-top:0;}
  .verdict-text{padding:20px;}
  .verdict-title{font-size:23px;}
  .verdict-breakdown li{grid-template-columns:110px minmax(0,1fr) 32px;gap:8px;}
  .verdict-buy{padding:20px;}
  .verdict-points{grid-template-columns:1fr;}
  .points{padding:18px 20px;}
  .points + .points{border-left:0;border-top:1px solid var(--line);}
  .verdict-bonus{padding:16px 20px;}
  .review-final-cta{flex-direction:column;align-items:stretch;text-align:left;}
  .review-final-cta .btn-red{text-align:center;}

  .pillar-box{margin:20px 18px 0;padding:14px 16px;}
  .article-body .cluster-list{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
  .toc-link,.toc-caret,.faq-caret{transition:none;}
}