/* ============================================================
   Fabrique - Composants (components.css)
   Cartes produit, picks, catégories, guides, FAQ, related,
   + traitement d'image "flottante", outils de conversion.
   ============================================================ */

/* ---- Accent par carte (data-accent) ---- */
[data-accent="forest"] { --acc: var(--acc-forest); --acc-rgb: var(--acc-forest-rgb); }
[data-accent="azure"]  { --acc: var(--acc-azure);  --acc-rgb: var(--acc-azure-rgb); }
[data-accent="violet"] { --acc: var(--acc-violet); --acc-rgb: var(--acc-violet-rgb); }
[data-accent="amber"]  { --acc: var(--acc-amber);  --acc-rgb: var(--acc-amber-rgb); }
[data-accent="copper"] { --acc: var(--acc-copper); --acc-rgb: var(--acc-copper-rgb); }
[data-accent="slate"]  { --acc: var(--acc-slate);  --acc-rgb: var(--acc-slate-rgb); }
/* CABLAGE COMPLETE le 2026-09-06. Seuls six accents etaient branches, alors
   que les trois themes en definissent quatorze. Les outils declarant `cyan`,
   `teal`, `sand`, `terracotta`, `blue`, `green`, `aqua` ou `sky` n'obtenaient
   donc AUCUNE couleur : `--acc` restait indefini et les pages sortaient en
   gris. C'est la cause de l'aspect terne des calculateurs. Chaque site ne
   definit que les accents de sa palette ; les autres restent inertes chez lui,
   ce qui est sans effet. */
[data-accent="blue"]   { --acc: var(--acc-blue);   --acc-rgb: var(--acc-blue-rgb); }
[data-accent="cyan"]   { --acc: var(--acc-cyan);   --acc-rgb: var(--acc-cyan-rgb); }
[data-accent="green"]  { --acc: var(--acc-green);  --acc-rgb: var(--acc-green-rgb); }
[data-accent="teal"]   { --acc: var(--acc-teal);   --acc-rgb: var(--acc-teal-rgb); }
[data-accent="aqua"]   { --acc: var(--acc-aqua);   --acc-rgb: var(--acc-aqua-rgb); }
[data-accent="sky"]    { --acc: var(--acc-sky);    --acc-rgb: var(--acc-sky-rgb); }
[data-accent="sand"]   { --acc: var(--acc-sand);   --acc-rgb: var(--acc-sand-rgb); }
[data-accent="terracotta"] { --acc: var(--acc-terracotta); --acc-rgb: var(--acc-terracotta-rgb); }

/* ============================================================
   CTA TEXTE DE CARTE (centralisé) - un seul style pour TOUTES les
   cartes : lien accent sobre, souligné au survol de la carte, sans
   flèche. (Les boutons pleins restent .btn.)
   ============================================================ */
.pcard__link, .cat-card__cta, .guide-tile__cta, .hubcard__cta,
.related-tile__cta, .profile-card__cta {
  align-self: flex-end;   /* CTA texte ancré en bas à DROITE de la carte */
  font-weight: 600; font-size: .82rem; color: var(--acc, var(--brand));
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  text-decoration-color: transparent; transition: text-decoration-color .18s ease, color .15s ease;
}
.pcard:hover .pcard__link, .cat-card:hover .cat-card__cta, .guide-tile:hover .guide-tile__cta,
.hubcard:hover .hubcard__cta, .related-tile:hover .related-tile__cta,
.profile-card:hover .profile-card__cta { text-decoration-color: currentColor; }

/* ============================================================
   BASE CARTE (DRY) - fondation partagée par TOUS les composants
   carte. Chaque variante n'ajoute ensuite que ses différences
   (padding, mise en page, badge...). UNE seule source.
   ============================================================ */
.pcard, .guide-tile, .hubcard, .related-tile,
.learn-card, .criteria-card, .profile-card, .gprod, .mag-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* survol unifié : léger soulèvement + bord accent + ombre colorée */
.pcard:hover, .guide-tile:hover, .hubcard:hover, .related-tile:hover,
.learn-card:hover, .criteria-card:hover, .profile-card:hover, .gprod:hover,
.mag-card:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--acc-rgb, 20,224,176), .4);
  box-shadow: var(--shadow-acc);
}
/* grandes cartes : rayon plus large */
.pcard, .hubcard, .gprod { border-radius: var(--radius-lg); }

/* ============================================================
   TRAITEMENT D'IMAGE "FLOTTANTE" (anti-catalogue)
   Fond dégradé teinté + ombre portée colorée sous le produit.
   Appliqué à toutes les vignettes produit du site.
   ============================================================ */
.pcard__media, .gprod__media,
.hero__panel-media, .cmp-row__media, .sel-result__media {
  /* Cadre image de taille CONSTANTE : produit centré dedans, jamais collé aux
     bords -> toutes les vignettes paraissent harmonisées (principe écranspc). */
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
  background: var(--plinth);   /* tuile image : reste claire dans les deux thèmes -> les images (fond blanc) s'y fondent */
  position: relative;
}
.pcard__media img, .gprod__media img,
.hero__panel-media img, .sel-result__media img {
  /* AUCUN drop-shadow : les images sont des carrés JPEG OPAQUES (fond blanc).
     Une ombre projetterait tout le carré -> halo gris par-dessus le blanc.
     C'était la cause du "fond gris". On ne garde que l'animation au survol. */
  transition: transform .3s cubic-bezier(.16,.8,.3,1);
}
.pcard:hover .pcard__media img { transform: translateY(-6px) scale(1.03); }

/* ---------------- Grille produits ---------------- */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.pgrid--3 { grid-template-columns: repeat(3, 1fr); }

/* ============================================================
   CARTE PRODUIT - composant CANONIQUE unique pour tout le site
   (catalogue, coups de cœur, KB, similaires, comparateur...).
   Image cadrée + badge + specs + CTA. 100% fluide.
   ============================================================ */
.pcard { /* + BASE CARTE */
  display: flex; flex-direction: column; gap: var(--space-xs);
  padding: var(--space-md);
  overflow: hidden;
}
/* Variante "n°1 / mise en avant" : anneau accent (aucune barre générique) */
.pcard--star { border-color: rgba(var(--acc-rgb), .5); box-shadow: 0 0 0 1px rgba(var(--acc-rgb), .35), var(--shadow); }
.pcard__badge { align-self: flex-start; font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--on-accent); background: var(--acc, var(--brand)); padding: .35em .9em; border-radius: 999px; }
.pcard--star .pcard__badge { background: var(--grad-brand); }
.pcard__media { aspect-ratio: 4 / 3; padding: var(--space-xs); }
.pcard__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.pcard__body { display: flex; flex-direction: column; gap: var(--space-2xs); flex: 1; }
.pcard__title { font-size: var(--fs-md); }
.pcard__title a { color: var(--ink); }
.pcard__title a:hover { color: var(--brand); }
/* Specs clés = signal "fiche technique / testé" */
.pcard__specs { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: var(--space-2xs) 0; }
.pcard__spec { display: inline-flex; align-items: baseline; gap: .35em; font-size: var(--fs-2xs);
  color: var(--muted); background: var(--bg-alt); border-radius: var(--radius-sm);
  padding: .3em .6em; line-height: 1.2; }
.pcard__spec b { color: var(--ink); font-weight: 700; }
.pcard__tagline { font-size: var(--fs-sm); color: var(--muted); flex: 1; margin: 0; }
.pcard__actions { display: flex; flex-direction: column; gap: var(--space-2xs); margin-top: var(--space-2xs); }

/* ---------------- Grille coups de cœur (home) ---------------- */
.picks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); align-items: stretch; }

/* ---------------- Cartes catégories ---------------- */
/* 6 catégories -> grille équilibrée 3x2 (fini le "5 + 1 orphelin") */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
@media (max-width: 860px) { .cat-grid { grid-template-columns: 1fr 1fr; } }
/* ---- Carte catégorie : "ticket de transport" (talon + perforation + crans) ----
   Le talon porte le nombre, la perforation pointillée et les 2 crans poinçonnés
   (couleur var(--bg-alt) = fond de la section) donnent l'identité billet. */
.cat-card {
  --stub: clamp(58px, 5vw + 2rem, 80px);   /* largeur du talon */
  --notch: 11px;                            /* rayon des crans */
  position: relative;
  display: grid; grid-template-columns: var(--stub) 1fr; align-items: stretch;
  min-height: 152px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(15,40,33,.05), 0 10px 22px rgba(15,40,33,.06);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cat-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(var(--acc-rgb), .18); }
/* crans sur la ligne de perforation (haut + bas) : demi-cercle à contour accent */
.cat-card::before, .cat-card::after {
  content: ""; position: absolute; left: var(--stub); z-index: 2; box-sizing: border-box;
  width: calc(var(--notch) * 2); height: calc(var(--notch) * 2);
  background: rgba(var(--acc-rgb), .12); border: 1.5px solid rgba(var(--acc-rgb), .5); border-radius: 50%;
}
.cat-card::before { top: 0;    transform: translate(-50%, -50%); }
.cat-card::after  { bottom: 0; transform: translate(-50%, 50%); }
/* talon (accent léger) + perforation pointillée INSET (s'arrête avant les crans) */
.cat-card__stub {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 10px 6px; text-align: center;
  background: rgba(var(--acc-rgb), .10);
}
.cat-card__stub::after {
  content: ""; position: absolute; right: -1px;
  top: calc(var(--notch) + 5px); bottom: calc(var(--notch) + 5px);
  border-left: 2px dashed rgba(var(--acc-rgb), .40);
}
.cat-card__num { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + .8vw, 1.85rem); font-weight: 700; color: var(--acc); line-height: 1; letter-spacing: -.03em; }
.cat-card__unit { font-size: .56rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--acc); opacity: .82; font-style: normal; }
/* corps */
.cat-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; min-width: 0; }
.cat-card__title { font-size: 1.16rem; color: var(--ink); flex: 1; }
/* .cat-card__cta -> CTA centralisé (haut du fichier) */

/* ---------------- Tuiles guides ---------------- */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
/* ---- Carte guide : en-tête COLORÉE en haut (volontairement différent du ticket
   catégorie qui, lui, a un talon latéral). Pas de rail, pas de halo. ---- */
.guide-tile { /* + BASE CARTE */
  display: flex; flex-direction: column; overflow: hidden;
}
.guide-tile__head {
  background: rgba(var(--acc-rgb), .06);
  border-bottom: 1.5px dashed rgba(var(--acc-rgb), .4);   /* perforation "ticket", comme les cartes catégories */
  border-left: 3px solid var(--acc);
  padding: 13px 17px 11px;
  display: flex; flex-direction: column; gap: 5px;
}
.guide-tile__badge { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--acc); }
.guide-tile__title { color: var(--ink); font-size: 1rem; line-height: 1.2; }
.guide-tile__body { padding: 13px 17px 15px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.guide-tile__desc { font-size: .83rem; line-height: 1.5; color: var(--muted); flex: 1; margin: 0; }
/* .guide-tile__cta -> CTA centralisé (haut du fichier) */

/* ---------------- Hub catégories (page Guides d'achat) ---------------- */
/* auto-FILL (pas auto-fit) : une carte seule occupe UNE colonne (taille standard),
   jamais toute la largeur -> toutes les cartes d'outils ont la meme taille,
   quel que soit le nombre par groupe. */
/* auto-FIT et non auto-FILL. Avec `auto-fill`, la grille cree ses quatre
   colonnes meme quand la rangee ne contient qu'une carte : au hub des outils,
   la rangee « Comparer » laissait deux tiers de vide a sa droite. `auto-fit`
   replie les colonnes inoccupees, et les cartes presentes occupent la largeur. */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
/* Trois colonnes imposees quand la rangee compte un multiple de trois : a
   quatre colonnes, six cartes laissent deux orphelines sur la seconde ligne. */
@media (min-width: 1040px) { .hub-grid--3 { grid-template-columns: repeat(3, 1fr); } }
/* Titre de groupe du hub outils : discret, aligne a gauche, filet de separation. */
.tools-group__head { display: flex; align-items: center; gap: 14px; margin: 40px 0 16px; font-size: var(--fs-lg); color: var(--ink); }
.tools-group__head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tools-group:first-of-type .tools-group__head, .tools-group--first .tools-group__head { margin-top: 8px; }
.hubcard { /* + BASE CARTE */
  overflow: hidden;
  padding: 28px 26px; display: flex; flex-direction: column; gap: 8px; min-height: 210px;
}
.hubcard__ico { position: relative; width: 48px; height: 48px; border-radius: 14px; }
.hubcard__ico .ico { width: 25px; height: 25px; }
.hubcard__count { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--acc); position: relative; }
.hubcard__title { font-size: 1.3rem; color: var(--ink); position: relative; }
.hubcard__top { font-size: .9rem; color: var(--muted); flex: 1; position: relative; }
.hubcard__top strong { color: var(--ink); }
/* .hubcard__cta -> CTA centralisé */

/* ---------------- Hero de page (hub) vibrant ---------------- */
.page-hero {
  position: relative; overflow: hidden; padding: 60px 0 46px; border-bottom: 1px solid var(--line);
  background:
    radial-gradient(720px 360px at 88% -12%, rgba(var(--brand-mint-rgb, 20, 224, 176), .2), transparent 60%),
    radial-gradient(560px 380px at 0% 0%, var(--brand-soft), transparent 58%);
}
.page-hero .section-head { margin-bottom: 0; }
.page-hero__stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.page-hero__stat { background: var(--glass); border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px; font-size: .9rem; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.page-hero__stat b { font-family: var(--font-display); color: var(--brand); }

/* ================================================================
   NAVIGATION IN-PAGE : barre compacte sticky (composant partagé)
   UNE SEULE LIGNE de petites pilules (pas de points, pas de 2e rangée :
   hauteur mini). La progression de lecture est donnée par .progress-bar
   (liseré fixe en haut de page), pas ici.
   - guides : pilules de sections, l'active se surligne au scroll (.pagenav__seg)
   - hub KB : pilules de filtre par thème (.pagenav--filter .pagenav__chip)
   Identique desktop / mobile : la piste défile à l'horizontale au besoin. ==== */
:root { --pagenav-top: 67px; }   /* header = 68px : on chevauche le liseré de 1px */

.pagenav {
  position: sticky; top: var(--pagenav-top); z-index: 40;
  margin: 0 0 clamp(20px, 1rem + 1.2vw, 32px);
  background: var(--glass-strong);
  -webkit-backdrop-filter: saturate(150%) blur(12px); backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.pagenav__track {
  display: flex; align-items: center; gap: clamp(5px, 0.7vw, 9px);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 7px 2px;   /* compact : ~38px de haut */
}
.pagenav__track::-webkit-scrollbar { display: none; }

/* Pilules : base commune (sections de guide + filtres KB) */
.pagenav__seg, .pagenav__chip {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font); font-weight: 600; font-size: .85rem; white-space: nowrap;
  border: 1px solid transparent; border-radius: 999px; padding: 6px 13px;
  cursor: pointer; transition: color .15s ease, background .15s ease, border-color .15s ease;
}

/* ---- Guides : pilule de section (sobre, l'active se teinte) ---- */
.pagenav__seg { color: var(--muted); }
.pagenav__seg:hover { color: var(--ink); background: var(--bg-alt); }
.pagenav__seg.is-read { color: var(--ink); }
.pagenav__seg.is-active { color: var(--brand-dark); background: var(--brand-soft); font-weight: 700; }

/* ---- Hub KB : pilule de filtre (contour visible par défaut) ---- */
.pagenav__chip { color: var(--text); background: var(--surface); border-color: var(--line); }
.pagenav__chip:hover { border-color: var(--brand); color: var(--brand-dark); }
.pagenav__chip.is-active { background: var(--brand); border-color: var(--brand); color: var(--on-accent); }
.pagenav__chip-ico { font-size: 1.05em; line-height: 1; }
.pagenav__chip-n {
  font-size: .72rem; font-weight: 700; color: var(--muted);
  background: var(--bg-alt); border-radius: 999px; padding: 1px 7px;
}
.pagenav__chip.is-active .pagenav__chip-n { background: rgba(255,255,255,.22); color: var(--on-accent); }

/* ---------------- Hub KB groupé par thème (vibrant) ---------------- */
.kb-themes { display: flex; flex-direction: column; gap: 50px; }
.kb-theme__head { display: flex; align-items: center; gap: 14px; font-size: 1.4rem; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 2px solid rgba(var(--acc-rgb), .25); }
.kb-theme__ico {
  font-size: 1.5rem; line-height: 1; flex: none;
  width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
  border-radius: 14px; background: rgba(var(--acc-rgb), .14);
}
.kb-theme__label { flex: 1; color: var(--ink); }
.kb-theme__guide { font-family: var(--font); font-size: .88rem; font-weight: 700; color: var(--acc); white-space: nowrap; }
.kb-theme__guide:hover { filter: brightness(.9); }
.kb-theme__n { font-family: var(--font); font-size: .76rem; font-weight: 700; color: var(--acc); background: rgba(var(--acc-rgb), .12); padding: 4px 11px; border-radius: 999px; white-space: nowrap; }

/* Cartes article accentuées par la couleur du thème (couleur par zone) */
.kb-theme .learn-card {
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(var(--acc-rgb), .09), transparent 60%),
    var(--surface);
  border-color: rgba(var(--acc-rgb), .22);
}
.kb-theme .learn-card:hover { border-color: rgba(var(--acc-rgb), .5); box-shadow: var(--shadow-acc); }
.kb-theme .learn-card__arrow { color: var(--acc); }
/* Pastille d'icône teintée + libellé / CTA dans la couleur du rayon */
.kb-theme .learn-card__ico {
  width: 2.1em; height: 2.1em; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; background: rgba(var(--acc-rgb), .14);
}
.kb-theme .learn-card:hover .learn-card__title { color: var(--acc); }
.kb-theme .learn-card__cta { color: var(--acc); background: rgba(var(--acc-rgb), .14); }
.kb-theme .learn-card:hover .learn-card__cta { background: var(--acc); color: var(--on-accent); }

/* Bannière produit / CTA par thème (conversion + couleur) */
.kb-banner {
  margin-top: 18px; display: grid; grid-template-columns: 120px 1fr auto; gap: 22px; align-items: center;
  background:
    radial-gradient(150% 130% at 0% 0%, rgba(var(--acc-rgb), .16), transparent 55%),
    var(--surface);
  border: 1px solid rgba(var(--acc-rgb), .35); border-radius: var(--radius-lg); padding: 20px 24px;
  box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
}
.kb-banner:hover { transform: translateY(-3px); box-shadow: var(--shadow-acc); }
.kb-banner__media { aspect-ratio: 1/1; border-radius: var(--radius); padding: 8px; background: var(--plinth); }
.kb-banner__media img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(var(--acc-rgb), .28)); }
.kb-banner__label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--acc); }
.kb-banner__name { font-size: 1.18rem; margin: 4px 0; }
.kb-banner__name a { color: var(--ink); }
.kb-banner__tag { font-size: .9rem; color: var(--muted); margin: 0; }
.kb-banner__cta { display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: center; min-width: 200px; }
.kb-banner--cta { text-decoration: none; grid-template-columns: 80px 1fr auto; }
.kb-banner__bigico { font-size: 2.6rem; line-height: 1; text-align: center; }
.kb-banner__cta-btn { align-self: center; font-weight: 700; color: var(--acc); white-space: nowrap; }
@media (max-width: 680px) {
  .kb-banner, .kb-banner--cta { grid-template-columns: 1fr; text-align: center; }
  .kb-banner__media { max-width: 130px; margin: 0 auto; }
  .kb-banner__cta { min-width: 0; }
  .kb-theme__guide { display: none; }
}

/* ---------------- Bloc "À shopper" in-article (3 produits) ---------------- */
.kb-shop {
  margin: 30px 0; padding: 24px;
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(var(--acc-rgb), .12), transparent 55%),
    var(--bg-alt);
  border: 1px solid rgba(var(--acc-rgb), .3); border-radius: var(--radius-lg);
}
/* Le titre du bandeau tient sur une ligne quand il peut, et se replie
   proprement sinon : sur telephone, la pastille se coupait en deux lignes
   (« À / SHOPPER ») et le titre suivait. */
.kb-shop__head { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--ink); margin: 0 0 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.kb-shop__eyebrow { white-space: nowrap; }
.kb-shop__eyebrow { font-family: var(--font); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--acc); background: rgba(var(--acc-rgb), .14); padding: 5px 11px; border-radius: 999px; }
/* Le rayon concerne, juxtapose au titre au lieu d'y etre accorde : le titre
   etait construit et donnait "Nos bureautique recommandes" sur 73 pages. */
.kb-shop__cat { font-family: var(--font); font-size: .82rem; font-weight: 700; color: var(--muted); }
.kb-shop__cat::before { content: "·"; margin: 0 .5em; color: var(--muted); }
.kb-shop .pgrid--3 { gap: 16px; }
.kb-shop__more { text-align: center; margin: 20px 0 0; }

/* ================================================================
   LE MAG : masthead éditorial (gauche, compact) + cover story "à la une"
   Le masthead = petit label de page ; l'article à la une = LE grand titre
   (un seul), ce qui signale "page magazine" sans casser la hiérarchie.
   ================================================================ */
.mag-masthead { padding: clamp(1.5rem, 1.1rem + 2vw, 2.6rem) 0 clamp(.9rem, .7rem + .9vw, 1.4rem); }
.mag-masthead .eyebrow { margin-bottom: .5rem; }
.mag-masthead h1 { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2rem); line-height: 1.12; margin: 0; }
.mag-masthead p { color: var(--muted); margin: .5rem 0 0; font-size: var(--fs-md); max-width: 60ch; }

.mag-lead {
  display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: clamp(18px, 3vw, 36px); align-items: center;
  margin-bottom: clamp(22px, 3vw, 34px); padding: clamp(16px, 2.2vw, 26px);
  border: 1px solid rgba(var(--acc-rgb), .3); border-radius: var(--radius-lg);
  background: radial-gradient(150% 130% at 0% 0%, rgba(var(--acc-rgb), .15), transparent 55%), var(--surface);
  box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mag-lead:hover { transform: translateY(-4px); box-shadow: var(--shadow-acc); border-color: rgba(var(--acc-rgb), .5); }
.mag-lead__cover {
  aspect-ratio: 16 / 10; border-radius: var(--radius); display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(var(--acc-rgb), .95), rgba(var(--acc-rgb), .5));
}
.mag-lead__cover-ico { font-size: clamp(2.8rem, 6vw, 4.2rem); filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .22)); }
.mag-lead__kicker { display: inline-flex; align-items: center; gap: 10px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--acc); }
.mag-lead__tag { color: var(--on-accent); background: var(--acc); padding: 4px 10px; border-radius: 999px; letter-spacing: .06em; }
.mag-lead__title { font-size: clamp(1.4rem, 1.1rem + 1.7vw, 2.1rem); line-height: 1.1; color: var(--ink); margin: 12px 0 10px; transition: color .15s ease; }
.mag-lead:hover .mag-lead__title { color: var(--acc); }
.mag-lead__desc { color: var(--muted); margin: 0; font-size: var(--fs-md); max-width: 62ch; }
/* CTA plein : le seul bouton de la zone -> cible de clic évidente */
.mag-lead__more { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 11px 22px; font-weight: 700; font-size: .92rem; color: var(--on-accent); background: var(--acc); border-radius: 999px; }
.mag-lead__more::after { content: "→"; transition: transform .15s ease; }
.mag-lead:hover .mag-lead__more::after { transform: translateX(3px); }

/* ================================================================
   BARRE DE CONTRÔLE unique et calme (partagée : mag + classements)
   Une seule bande : pilules de rayon (nav principale) + recherche + tri.
   Évite l'empilement de bandeaux qui cassait la hiérarchie.
   ================================================================ */
.mag-controls {
  position: sticky; top: var(--pagenav-top); z-index: 40;
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 clamp(22px, 1rem + 1.6vw, 34px);
  background: var(--glass-strong);
  -webkit-backdrop-filter: saturate(150%) blur(12px); backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
}
/* La barre de pilules perd son propre sticky/fond : c'est le wrapper qui le porte. */
.mag-controls .pagenav--filter { position: static; flex: 1 1 auto; min-width: 0; margin: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.mag-tools { flex: none; display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.mag-search { position: relative; flex: 0 1 200px; min-width: 120px; display: flex; align-items: center; }
.mag-search__ico { position: absolute; left: 13px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.mag-search__input {
  width: 100%; font-family: inherit; font-size: .88rem; color: var(--ink);
  padding: 8px 14px 8px 36px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
}
.mag-search__input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.mag-sort { display: inline-flex; align-items: center; gap: 7px; flex: none; }
.mag-sort__label { font-size: .8rem; font-weight: 600; color: var(--muted); }
.mag-sort__select {
  font-family: inherit; font-size: .85rem; font-weight: 600; color: var(--ink); cursor: pointer;
  padding: 8px 32px 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b63' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 14px;
}
.mag-sort__select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* ================================================================
   LE MAG : grille éditoriale par rayon, filtrable / triable
   ================================================================ */
.mag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: clamp(14px, 1.5vw, 20px); }
.mag-divider {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 12px;
  margin-top: 12px; padding-bottom: 10px; border-bottom: 2px solid rgba(var(--acc-rgb), .25);
}
.mag-divider:first-child { margin-top: 0; }
.mag-divider__ico { width: 38px; height: 38px; border-radius: 11px; }
.mag-divider__ico .ico { width: 20px; height: 20px; }
.mag-divider__label { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 1rem + .6vw, 1.35rem); color: var(--ink); }
.mag-divider__n { font-size: .74rem; font-weight: 700; color: var(--acc); background: rgba(var(--acc-rgb), .12); padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.mag-divider__guide { margin-left: auto; font-weight: 700; font-size: .86rem; color: var(--acc); white-space: nowrap; }
.mag-divider__guide:hover { filter: brightness(.9); }

/* + BASE CARTE. Ne reste ici que ce qui lui est propre : la mise en page, et
   le voile de couleur de rayon en coin qui rattache l'article a sa rubrique. */
/* Meme anatomie que la carte d'outil : meme rembourrage, meme interligne,
   meme rayon. La hauteur reste plus faible - il y a 88 cartes sur la page,
   pas trois - mais le vocabulaire est le meme. */
.mag-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(18px, 1.9vw, 26px);
  border-radius: var(--radius-lg);
  border-color: rgba(var(--acc-rgb), .2);
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(var(--acc-rgb), .08), transparent 60%),
    var(--surface);
}
/* .67rem sortait a 10,7 px : trop petit pour des capitales espacees. Mesure
   au balayage des 285 pages, sur telephone. */
/* Un surtitre, plus une pastille : la pastille faisait doublon avec la tuile
   d'icone juste au-dessus. */
.mag-card__kicker {
  align-self: flex-start; font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--acc, var(--brand)); margin-top: 2px;
}
/* TUILE PLEINE, comme sur les cartes d'outil : les trois hubs doivent parler
   la meme langue. Le pictogramme etait enferme dans la pastille de texte, a
   14 px, et ne se voyait pas. */
.mag-card__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 14px; align-self: flex-start;
  background: linear-gradient(150deg,
    var(--acc, var(--brand)),
    color-mix(in srgb, var(--acc, var(--brand)) 74%, #000));
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--acc, var(--brand)) 26%, transparent);
}
.mag-card__ico .ico { width: 25px; height: 25px; }
.mag-card__title { font-size: 1.14rem; line-height: 1.25; color: var(--ink); margin: 2px 0 0; transition: color .15s ease; }
.mag-card:hover .mag-card__title { color: var(--acc); }
.mag-card__desc { font-size: .93rem; line-height: 1.55; color: var(--muted); margin: 0; flex: 1; }
/* La date de derniere modification, discrete : elle montre la fraicheur au
   lieu de l affirmer. Elle a remplace la pastille « A jour . <mois> ». */
.mag-card__date { font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Un vrai bouton en pied de carte, comme sur les cartes d'outil : le lien
   texte ne disait pas qu'on pouvait cliquer sur toute la carte. */
/* Le bouton de la carte d'outil : pleine largeur, contour franc, centre. */
/* Une espace insecable avant la fleche : le bouton n est plus un lien en
   ligne, la fleche se collait au texte. */
.mag-card__more::after { content: " →"; display: inline-block; transition: transform .15s ease; }
.mag-card:hover .mag-card__more::after { transform: translateX(3px); }

.mag-empty { text-align: center; color: var(--muted); padding: 30px 0; }

/* CTA sélecteur unique en pied de mag (dégradé marque, contraste avec l'éditorial) */
.mag-cta {
  margin-top: clamp(24px, 4vw, 40px); display: flex; align-items: center; gap: 18px;
  padding: clamp(18px, 2.2vw, 24px) clamp(20px, 2.6vw, 28px); border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--brand-dark), var(--brand)); color: var(--on-accent);
  box-shadow: var(--shadow-acc); transition: transform .2s ease;
}
.mag-cta:hover { transform: translateY(-3px); }
/* Deja pose sur un degrade de marque : une tuile pleine y serait invisible.
   On garde donc un trace clair, simplement agrandi. */
.mag-cta__ico { flex: none; display: inline-flex; color: var(--on-accent); }
.mag-cta__ico .ico { width: 34px; height: 34px; }
.mag-cta__txt { flex: 1; font-size: .98rem; color: rgba(255, 255, 255, .92); }
.mag-cta__txt strong { color: var(--on-accent); }
.mag-cta__btn { flex: none; font-weight: 700; background: #fff; color: var(--brand-dark); padding: 10px 18px; border-radius: 999px; white-space: nowrap; }

/* Masquage (attribut) : bat les display author des cartes, sans !important */
.mag-lead[hidden], .mag-card[hidden], .mag-divider[hidden], .cls-tile[hidden], .classement-group[hidden] { display: none; }

/* Classements : la grille de rayons reprend les groupes existants (.classement-group) */
.cls-groups { display: flex; flex-direction: column; }

@media (max-width: 760px) {
  /* Cover story : image au-dessus du texte. */
  .mag-lead { grid-template-columns: 1fr; gap: 16px; }
  .mag-lead__cover { aspect-ratio: 16 / 9; max-height: 190px; }
  /* Contrôles : pilules sur une ligne (défilante), recherche + tri en dessous. */
  .mag-controls { flex-direction: column; align-items: stretch; gap: 6px; }
  .mag-tools { padding: 0 0 8px; }
  .mag-search { flex: 1 1 auto; }
  .mag-divider__guide { display: none; }
}

/* ---------------- CTA Amazon inline (milieu de texte) ---------------- */
.kb-inline {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin: 28px 0; padding: 18px 22px; border-radius: var(--radius);
  background: linear-gradient(100deg, rgba(var(--acc-rgb), .14), rgba(var(--acc-rgb), .04));
  border: 1px solid rgba(var(--acc-rgb), .3);
}
.kb-inline__txt { font-size: .98rem; color: var(--text); }
.kb-inline__label { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--acc); margin-bottom: 3px; }
.kb-inline__txt strong { color: var(--ink); }
.kb-inline .btn { flex: none; }
@media (max-width: 560px) { .kb-inline { flex-direction: column; align-items: stretch; text-align: center; } }

/* ---------------- Box reco Amazon (articles KB) ---------------- */
.reco-box {
  display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center;
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(var(--acc-rgb), .1), transparent 60%),
    var(--surface);
  border: 1px solid rgba(var(--acc-rgb), .22);
  border-radius: var(--radius-lg); padding: 22px; margin: 26px 0; box-shadow: var(--shadow-sm);
}
.reco-box__media { aspect-ratio: 1/1; border-radius: var(--radius); padding: 12px; background: var(--plinth); }
.reco-box__media img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(var(--acc-rgb), .26)); }
.reco-box__label { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--acc); margin-bottom: 6px; }
.reco-box__name { font-size: 1.2rem; margin-bottom: 4px; }
.reco-box__name a { color: var(--ink); }
.reco-box__tagline { font-size: .92rem; color: var(--muted); margin-bottom: 14px; }
.reco-box__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
@media (max-width: 560px) {
  .reco-box { grid-template-columns: 1fr; text-align: center; }
  .reco-box__media { max-width: 160px; margin: 0 auto; }
  .reco-box__actions { justify-content: center; }
  .kb-theme__head { font-size: 1.15rem; }
}

/* ---------------- Learn cards (héritent de la BASE CARTE, voir haut) ---------------- */
.learn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-sm); }
.learn-card { padding: 15px 18px; display: flex; align-items: center; gap: 14px; }
.learn-card__ico { font-size: 1.2rem; line-height: 1.2; flex: none; }
.learn-card__txt { flex: 1; min-width: 0; }
.learn-card__title { font-size: .94rem; color: var(--ink); transition: color .15s ease; }
.learn-card:hover .learn-card__title { color: var(--brand-dark); }
.learn-card__desc { font-size: .82rem; line-height: 1.5; color: var(--muted); margin: 3px 0 0; }
.learn-card__cta { flex: none; font-weight: 700; font-size: .78rem; color: var(--brand-dark);
  background: rgba(var(--brand-mint-rgb, 20, 224, 176), .14); padding: .3em .85em; border-radius: 999px;
  transition: background .15s ease, color .15s ease; }
.learn-card:hover .learn-card__cta { background: var(--brand); color: var(--on-accent); }

/* ---------------- FAQ ---------------- */
.faq { max-width: var(--lecture); margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq__item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 4px 18px;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.faq__item:hover { border-color: rgba(var(--acc-rgb), .3); }
/* Ouverte, la question se detache : teinte d'accent et un peu d'ombre, comme
   les cartes de la page d'accueil. Pas de barre laterale : ce n'est pas le
   vocabulaire du site. */
.faq__item[open] {
  border-color: rgba(var(--acc-rgb), .4);
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(var(--acc-rgb), .07), transparent 58%),
    var(--surface);
  box-shadow: var(--shadow-sm);
}
.faq__question { font-weight: 700; color: var(--ink); cursor: pointer; padding: 15px 0; list-style: none; position: relative; padding-right: 46px; font-family: var(--font-display); }
.faq__question::-webkit-details-marker { display: none; }
/* Le « + » etait un caractere pose dans le vide. Il devient une pastille
   ronde, comme toutes les autres commandes du site. */
.faq__question::after {
  content: "+";
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; line-height: 1; font-weight: 400;
  color: var(--acc, var(--brand));
  background: rgba(var(--acc-rgb), .12);
  transition: background .15s ease, color .15s ease;
}
.faq__item:hover .faq__question::after { background: rgba(var(--acc-rgb), .2); }
.faq__item[open] .faq__question::after {
  content: "\2013";
  color: #fff;
  background: linear-gradient(150deg,
    var(--acc, var(--brand)),
    color-mix(in srgb, var(--acc, var(--brand)) 74%, #000));
}
.faq__answer { padding: 0 0 14px; color: var(--text); font-size: .95rem; }
.faq__answer p { margin: 0; }

/* ---------------- Related ---------------- */
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.related-tile { /* + BASE CARTE */ padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.related-tile__label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--brand); }
.related-tile__title { font-size: 1.05rem; color: var(--ink); }
.related-tile__desc { font-size: .88rem; color: var(--muted); flex: 1; margin: 0; }
/* .related-tile__cta -> CTA centralisé */

/* ---- Classements groupés par rayon (page /classements) ----
   Chaque rayon porte sa COULEUR (data-accent) : badge d'en-tête teinté + cartes
   teintées + bord/ombre accent au survol -> on voit la catégorie d'un coup d'oeil
   et la carte donne envie de cliquer (sans barre dégradée générique). */
.classement-group { margin-top: clamp(2rem, 4vw, 3rem); }
.classement-group:first-of-type { margin-top: 0; }
.classement-group__title {
  display: flex; align-items: center; gap: .6em;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); color: var(--ink);
  margin: 0 0 clamp(1rem, 2.4vw, 1.4rem); padding-bottom: .5em;
  border-bottom: 2px solid rgba(var(--acc-rgb), .32);
}
/* Pastille colorée par rayon (même langage que les icônes du hub KB) */
.classement-group__ico {
  width: 40px; height: 40px; border-radius: 13px;
}
.classement-group__ico .ico { width: 21px; height: 21px; }
/* Carte classement : fond légèrement teinté + bord accent (survol = BASE CARTE) */
.classement-group .related-tile {
  background:
    radial-gradient(125% 115% at 0% 0%, rgba(var(--acc-rgb), .12), transparent 58%),
    var(--surface);
  border-color: rgba(var(--acc-rgb), .28);
}
.classement-group .related-tile:hover { border-color: rgba(var(--acc-rgb), .55); }
/* Label = petite pilule pleine accent (plus visible qu'un texte coloré) */
.classement-group .related-tile__label {
  align-self: flex-start; color: var(--on-accent); background: var(--acc);
  padding: .34em .85em; border-radius: 999px; letter-spacing: .07em;
}
.classement-group .related-tile__title { font-size: 1.12rem; transition: color .15s ease; }
.classement-group .related-tile:hover .related-tile__title { color: var(--acc); }

/* ---- Podium top 3 (guides) ---- */
/* Podium = la grille pgrid--3 + un rang sur la carte produit unifiée. */
.podium { align-items: stretch; margin: 8px 0 12px; }
/* Pastille de rang posée dans le coin haut-droit de la carte (cohérent partout) */
.pcard__rank {
  position: absolute; z-index: 3; top: var(--space-sm); right: var(--space-sm);
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--ink); color: var(--bg); font-weight: 800; font-family: var(--font-display);
  display: flex; align-items: center; justify-content: center; font-size: .95rem;
  box-shadow: var(--shadow-sm);
}
.pcard--star .pcard__rank { background: var(--grad-brand); }

/* ---- Product-card horizontale détaillée (guides) ---- */
.gprod-list { display: flex; flex-direction: column; gap: 22px; counter-reset: gprod; }
.gprod { /* + BASE CARTE */
  display: grid; grid-template-columns: 264px minmax(0, 1fr);
  column-gap: 28px; align-items: start;
  padding: 24px; scroll-margin-top: 90px;
}
/* PANNEAU GAUCHE : image + caracteristiques + lien fiche + mention affiliee. */
.gprod__side { position: sticky; top: 86px; display: flex; flex-direction: column; gap: 14px; }
.gprod__media { border-radius: var(--radius); padding: 16px; }
.gprod__media img { width: 100%; aspect-ratio: 1/1; object-fit: contain; }
.gprod__specs { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.gprod__spec { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .82rem; color: var(--ink); font-weight: 600; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.gprod__spec:last-child { border-bottom: none; }
.gprod__spec strong { color: var(--muted); font-weight: 600; flex: none; }
/* MAIN editorial (droite) : en-tete (rang + badge + lien fiche), titre, verdict, intro,
   on aime / a surveiller, puis le bouton + mention affiliee. */
.gprod__main { min-width: 0; }
.gprod__headline { margin-bottom: 12px; }
.gprod__head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; flex-wrap: wrap; }
/* RANG proeminent (pastille pleine accent) : on voit tout de suite que c'est le n°X. */
.gprod__rank {
  font-family: var(--font-display); font-weight: 800; font-size: .82rem; line-height: 1.5; letter-spacing: .02em;
  color: var(--on-accent); background: var(--acc, var(--brand)); padding: 3px 12px; border-radius: 999px;
}
/* Badge produit = SECONDAIRE (contour leger), il ne doit pas voler la vedette au rang. */
/* Pastilles remontees a .72rem : a .66-.67rem elles sortaient sous 10,7 px
   sur telephone. Elles restent des micro-libelles en capitales, mais un
   demi-point de plus ne coute rien et se lit sans plisser les yeux. */
.gprod__badge {
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--acc, var(--brand)); background: rgba(var(--acc-rgb, 21,127,102), .07);
  border: 1px solid rgba(var(--acc-rgb, 21,127,102), .3); padding: 3px 10px; border-radius: 999px;
}
/* "Lire la fiche" : en HAUT A DROITE de l'en-tete (renvoie vers la fiche). */
.gprod__fiche { margin-left: auto; font-weight: 700; font-size: .85rem; color: var(--acc, var(--brand));
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; white-space: nowrap; }
.gprod__fiche:hover { color: var(--brand-dark); }
/* Bouton "Voir sur Amazon" en BAS A DROITE, "Lien affilié" juste dessous (empiles, alignes a droite). */
.gprod__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; margin-top: 18px; }
.gprod .aff-note { color: var(--muted); }
.gprod__title { font-size: 1.45rem; margin-bottom: 4px; }
.gprod__title a { color: var(--ink); }
.gprod__title a:hover { color: var(--brand); }
.gprod__tagline { font-size: 1rem; color: var(--brand-dark); font-weight: 600; margin-bottom: 10px; }
.gprod__intro { font-size: .96rem; color: var(--text); margin-bottom: 14px; }
/* Verdict editorial (classements) : callout doux teinte accent + petit label "Notre avis".
   SANS barre laterale (style assume, pas le pattern IA generique). */
.gprod__verdict {
  font-size: .94rem; color: var(--ink); line-height: 1.5; margin: 0 0 13px;
  padding: 11px 14px; border-radius: var(--radius-sm);
  background: rgba(var(--acc-rgb, 21,127,102), .07);
  border: 1px solid rgba(var(--acc-rgb, 21,127,102), .16);
}
.gprod__verdict::before {
  content: "Notre avis"; display: block;
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--acc, var(--brand)); margin-bottom: 4px;
}
/* Placeholders de contenu manquant : VISIBLES (orange), jamais une page muette. */
.todo-note, .gprod__verdict--todo {
  background: var(--amazon-soft); border: 1px dashed var(--amazon-dark); color: var(--amazon-soft-fg);
  border-radius: var(--radius-sm); font-weight: 600; font-size: .9rem;
}
.todo-note { padding: 12px 14px; margin: 12px 0; }
.gprod__verdict--todo { padding: 9px 12px; }
.gprod__verdict--todo::before { display: none; }
/* Intro etoffee + meta de fraicheur (classements) */
.listicle-intro { margin-bottom: 6px; }
.listicle-intro p { font-size: 1.02rem; color: var(--text); margin-bottom: .9em; }
.guide-intro__meta { font-size: .82rem; color: var(--muted); margin: 8px 0 16px; }

/* ---- HERO CLASSEMENT : texte + carte "Notre n1" (visuel, facon accueil) ---- */
.listicle-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(190px, 23vw, 240px);
  gap: clamp(18px, 2.4vw, 36px); align-items: center;
  background:
    radial-gradient(125% 130% at 100% 0%, rgba(var(--acc-rgb), .14), transparent 56%),
    var(--surface);
  border: 1px solid rgba(var(--acc-rgb), .18);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 1rem + 1.6vw, 34px);
  margin-bottom: clamp(22px, 3vw, 32px);
}
.listicle-hero__title { font-size: var(--fs-hero); line-height: 1.08; margin: 9px 0 10px; }
.listicle-hero__lead { color: var(--muted); font-size: 1rem; margin-bottom: 12px; max-width: 52ch; }
.listicle-hero__text .btn { margin-top: 2px; }
.listicle-hero__pick {
  display: flex; flex-direction: column; align-items: center; gap: 11px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; box-shadow: var(--shadow-sm); text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.listicle-hero__pick:hover { transform: translateY(-4px); box-shadow: var(--shadow-acc); border-color: rgba(var(--acc-rgb), .4); }
.listicle-hero__shot { width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: var(--plinth); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; }
.listicle-hero__shot img { max-width: 100%; max-height: 100%; object-fit: contain; }
.listicle-hero__pickbody { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.listicle-hero__tag {
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--on-accent); background: var(--grad-brand); padding: 5px 13px; border-radius: 999px;
}
.listicle-hero__pickname { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: .98rem; line-height: 1.18; }
.listicle-hero__picksee { font-size: .8rem; font-weight: 700; color: var(--acc, var(--brand)); }
@media (max-width: 620px) {
  /* Mobile : la carte n1 passe EN HAUT (visuel d'accroche), texte dessous, H1 reduit. */
  .listicle-hero { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .listicle-hero__pick { order: -1; flex-direction: row; align-items: center; text-align: left; gap: 14px; padding: 11px; }
  .listicle-hero__shot { width: 92px; flex: none; }
  .listicle-hero__pickbody { align-items: flex-start; gap: 6px; }
}
.proscons--compact { gap: 14px; margin-bottom: 0; }
.proscons--compact .proscons__col { padding: 14px 16px; }
.proscons--compact h4 { margin: 0 0 8px; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }

/* ============================================================
   ROUTAGE PAR PROFIL (piliers) - "Quel modèle pour vous ?"
   ============================================================ */
/* Profils "Quel modèle pour vous ?" : TOUJOURS sur une seule rangée en desktop
   (flux en colonnes), puis 2 colonnes en tablette, 1 sur mobile. */
.profiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-sm); }
.profile-card { /* + BASE CARTE */
  display: flex; flex-direction: column; gap: 4px;
  padding: 15px 16px; overflow: hidden;
}
.profile-card__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px; margin-bottom: 6px;
  background: linear-gradient(150deg,
    var(--acc, var(--brand)),
    color-mix(in srgb, var(--acc, var(--brand)) 74%, #000));
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--acc, var(--brand)) 26%, transparent);
}
.profile-card__ico .ico { width: 21px; height: 21px; }
.profile-card__use { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--acc); }
.profile-card__name { font-size: 1.05rem; font-family: var(--font-display); color: var(--ink); line-height: 1.2; }
.profile-card__why { font-size: .84rem; color: var(--muted); flex: 1; margin: 1px 0 6px; }
/* .profile-card__cta -> CTA centralisé */
/* Mobile : 2 colonnes COMPACTES (icone + usage + modele). On masque la phrase "why" et
   le CTA texte (la carte entiere est cliquable) -> tuiles bien plus petites. */
@media (max-width: 760px) {
  .profiles { grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 10px; }
  .profile-card { padding: 11px 12px; gap: 2px; }
  .profile-card__ico { width: 34px; height: 34px; border-radius: 10px; margin-bottom: 4px; }
  .profile-card__ico .ico { width: 18px; height: 18px; }
  .profile-card__use { font-size: .75rem; }  /* la variante telephone descendait a 9,8 px */
  .profile-card__name { font-size: .9rem; }
  .profile-card__why, .profile-card__cta { display: none; }
}

/* ============================================================
   TABLEAU SYNTHÈSE (piliers) - top modèles, gagnant surligné
   ============================================================ */
.ctable-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.ctable { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 640px; }
.ctable th, .ctable td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--line); }
/* L'en-tete reste visible quand on fait defiler un tableau de dix lignes, et
   se distingue du corps au lieu d'etre une rangee de plus. */
.ctable thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-alt); font-family: var(--font-display); font-size: .82rem;
  color: var(--ink); vertical-align: bottom;
  box-shadow: inset 0 -1px 0 var(--line);
}
/* Une ligne sur deux legerement teintee : sur un tableau de six colonnes, l'oeil
   perdait sa ligne en cours de route. */
.ctable tbody tr:nth-child(even) td,
.ctable tbody tr:nth-child(even) th { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.ctable tbody tr:hover td,
.ctable tbody tr:hover th { background: rgba(var(--acc-rgb), .06); }
.ctable tbody th { font-weight: 700; color: var(--ink); }
.ctable tr:last-child td, .ctable tr:last-child th { border-bottom: none; }
.ctable__prod { display: flex; align-items: center; gap: 6px; }
.ctable__rank { font-family: var(--font-display); color: var(--brand); font-weight: 700; }
/* CTA "Voir le prix" sous le nom du modele (dans la colonne figee), plus de colonne dediee. */
.ctable tbody th:first-child { min-width: 150px; }
.ctable__buy { display: inline-flex; width: fit-content; margin-top: 8px; white-space: nowrap; }
.ctable td.is-best { background: rgba(var(--acc-rgb, 21,127,102), .08); color: var(--ink); font-weight: 700; position: relative; }
.ctable td.is-best::after { content: "\2605"; color: var(--amazon-dark); font-size: .72em; margin-left: 5px; vertical-align: top; }

/* ============================================================
   OUTIL SÉLECTEUR "Trouvez votre engin"
   ============================================================ */
.selector {
  background:
    radial-gradient(700px 300px at 100% 0%, rgba(var(--brand-mint-rgb, 20, 224, 176), .1), transparent 60%),
    radial-gradient(600px 320px at 0% 100%, var(--brand-soft), transparent 60%),
    var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px; box-shadow: var(--shadow);
}
.selector__progress { display: flex; gap: 8px; margin-bottom: 22px; }
.selector__dot { height: 5px; flex: 1; border-radius: 3px; background: var(--line); transition: background .3s ease; }
.selector__dot.is-on { background: var(--grad-mint); }
.sel-step { animation: selIn .35s cubic-bezier(.16,.8,.3,1); }
.sel-step[hidden] { display: none; }
@keyframes selIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sel-step__q { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); margin-bottom: 4px; }
.sel-step__hint { color: var(--muted); font-size: .95rem; margin-bottom: 20px; }
.sel-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.sel-opt {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; cursor: pointer; font-family: inherit; color: var(--text);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sel-opt:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: var(--shadow-acc); }
/* Un chevron permanent : la carte est un bouton, et elle mene quelque part.
   Sans lui, elle se lisait comme une vignette inerte - on ne comprenait pas
   qu'on pouvait cliquer, ni ce que le clic declenchait. */
.sel-opt { position: relative; padding-right: 42px; }
/* Une FLECHE, pas deux bordures formant un angle : l audit refuse le second,
   et il a raison - c est la signature d une accolade decorative. */
.sel-opt::after {
  content: "→"; position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.05rem; line-height: 1; color: var(--acc, var(--brand));
  opacity: .55; transition: transform .15s ease, opacity .15s ease;
}
.sel-opt:hover::after { opacity: 1; transform: translateY(-50%) translateX(3px); }
.sel-opt__ico { width: 42px; height: 42px; border-radius: 13px; }
.sel-opt__ico .ico { width: 22px; height: 22px; }
.sel-opt__t { font-weight: 700; color: var(--ink); font-size: 1rem; }
.sel-opt__d { font-size: .82rem; color: var(--muted); }
.sel-back { background: none; border: none; color: var(--muted); cursor: pointer; font-family: inherit; font-size: .88rem; font-weight: 600; margin-top: 18px; padding: 0; }
.sel-back:hover { color: var(--brand); }

/* Résultat du sélecteur */
.sel-result__head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.sel-result__eyebrow { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--brand); }
.sel-hero {
  display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center;
  background: var(--surface); border: 1.5px solid rgba(var(--acc-rgb), .4); border-radius: var(--radius-lg);
  padding: 22px; box-shadow: 0 0 0 1px rgba(var(--acc-rgb), .25), var(--shadow); margin-bottom: 20px;
}
.sel-result__media { aspect-ratio: 1/1; border-radius: var(--radius); padding: 14px; }
.sel-result__media img { width: 100%; height: 100%; object-fit: contain; }
.sel-result__badge { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--on-accent); background: var(--grad-brand); padding: 5px 12px; border-radius: 999px; margin-bottom: 8px; }
.sel-result__name { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); margin-bottom: 6px; }
.sel-result__name a { color: var(--ink); }
.sel-result__tagline { color: var(--muted); margin-bottom: 14px; }
.sel-result__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.sel-alts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.sel-alt { display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; transition: border-color .15s ease, box-shadow .15s ease; }
.sel-alt:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.sel-alt__media { width: 64px; height: 64px; flex: none; border-radius: var(--radius-sm); padding: 6px; background: var(--plinth); }
.sel-alt__media img { width: 100%; height: 100%; object-fit: contain; }
.sel-alt__name { font-weight: 700; color: var(--ink); font-size: .95rem; }
.sel-alt__name a { color: var(--ink); }
.sel-alt__badge { font-size: .76rem; color: var(--muted); }
.sel-restart { background: none; border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 9px 18px; cursor: pointer; font-family: inherit; font-weight: 600; font-size: .88rem; }
.sel-restart:hover { border-color: var(--brand); color: var(--brand); }

/* Option déjà choisie (quand on revient en arrière) */
.sel-opt.is-selected { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow-sm); }

/* Récap modifiable du résultat */
.sel-recap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.sel-recap__label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.sel-chip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font-family: inherit; font-weight: 700; font-size: .88rem; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sel-chip:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.sel-chip__edit { font-weight: 600; font-size: .76rem; color: var(--brand); text-decoration: underline; }

/* CTA comparaison (sous la reco) */
.sel-compare { margin: 18px 0 8px; font-size: 1rem; }

/* Actions sous le résultat */
.sel-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.sel-alt__txt { display: flex; flex-direction: column; }

/* ============================================================
   BANDEAU RÉASSURANCE (trust)
   ============================================================ */
.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.trust__item { display: flex; gap: 14px; align-items: flex-start; }
/* Tuile pleine, comme toutes les autres fentes d icone du site. */
.trust__ico {
  flex: none; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  border-radius: 14px; color: #fff;
  background: linear-gradient(150deg, var(--brand), color-mix(in srgb, var(--brand) 74%, #000));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 26%, transparent);
}
.trust__ico .ico { width: 24px; height: 24px; }
.trust__t { font-weight: 700; color: var(--ink); font-size: .98rem; font-family: var(--font-display); }
.trust__d { font-size: .86rem; color: var(--muted); margin: 2px 0 0; }

/* ============================================================
   BARRE D'ACHAT STICKY (fiches produit)
   ============================================================ */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--glass-strong); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-top: 1px solid var(--line); box-shadow: 0 -8px 28px rgba(17,32,27,.1);
  transform: translateY(110%); transition: transform .3s cubic-bezier(.16,.8,.3,1);
}
.buybar.is-on { transform: none; }
.buybar__inner { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
.buybar__media { width: 52px; height: 52px; flex: none; border-radius: 10px; padding: 5px; background: var(--plinth); border: 1px solid var(--line); }
.buybar__media img { width: 100%; height: 100%; object-fit: contain; }
.buybar__info { flex: 1; min-width: 0; }
.buybar__rank { display: block; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--acc, var(--brand)); line-height: 1.1; margin-bottom: 1px; }
.buybar__name { font-weight: 700; color: var(--ink); font-size: .98rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar__sub { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar .btn { flex: none; }

@media (max-width: 760px) {
  /* Carte modele COMPACTE + REORDONNEE sur mobile. Objectif : voir l'essentiel d'un modele
     sans scroller -> image, explication, "On aime", puis "Voir sur Amazon" en haut ; les
     specs detaillees et "A surveiller" passent SOUS le CTA (infos secondaires).
     display:contents sur .proscons fait remonter "On aime" et descendre "A surveiller"
     independamment via order, sans toucher au markup. */
  /* En-tete COMPACT : image (84px) + rang/titre/tagline COTE A COTE (grid-areas),
     puis le corps detaille en pleine largeur dessous. Gros gain de hauteur. */
  /* Carte modele COMPACTE sur mobile. On APLATIT le panneau + l'editorial (display:contents)
     pour tout reordonner : image + titre cote a cote, puis (verdict ->) explication ->
     On aime -> Voir sur Amazon -> caracteristiques -> A surveiller. CTA visible vite. */
  .gprod {
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-areas: none;   /* on annule les zones desktop : ici tout est ordonne via order */
    column-gap: 12px; row-gap: 0; padding: 14px; align-items: start;
  }
  .gprod__side, .gprod__main, .gprod .proscons { display: contents; }
  .gprod__media { position: static; width: 84px; max-width: none; padding: 6px; margin: 0; grid-column: 1; grid-row: 1; }
  .gprod__headline { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
  .gprod__head { margin-bottom: 3px; }
  .gprod__rank { font-size: 1rem; }
  .gprod__title { font-size: 1.1rem; margin-bottom: 2px; }
  .gprod__tagline { font-size: .85rem; margin-bottom: 0; }
  /* Tout le reste : pleine largeur sous l'en-tete, sequence par order. */
  .gprod__verdict, .gprod__intro, .gprod__specs, .gprod__actions,
  .gprod .proscons__col--pro, .gprod .proscons__col--con { grid-column: 1 / -1; }
  .gprod__verdict { order: 1; margin: 11px 0 0; }
  .gprod__intro {
    order: 2; font-size: .86rem; line-height: 1.4; margin: 11px 0 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .gprod .proscons__col--pro { order: 3; margin: 11px 0 0; padding: 9px 11px; }
  .gprod__actions { order: 4; margin: 12px 0 0; flex-direction: column; align-items: stretch; gap: 6px; }
  .gprod__actions .btn { width: 100%; }
  .gprod__actions .aff-note { text-align: center; }
  .gprod__specs { order: 5; margin: 12px 0 0; }
  .gprod .proscons__col--con { order: 6; margin: 11px 0 0; padding: 9px 11px; }
  /* "Lire la fiche" masquee sur mobile (image + titre deja cliquables vers la fiche). */
  .gprod__fiche { display: none; }
  /* Specs en grille 2 colonnes label/valeur (dense) : on neutralise le cadre du panneau desktop. */
  .gprod__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 14px; border: none; border-radius: 0; overflow: visible; }
  .gprod__spec {
    display: flex; flex-direction: column; gap: 0; justify-content: flex-start;
    background: none; border: none; border-radius: 0; padding: 0; font-size: .84rem; color: var(--ink); font-weight: 400;
  }
  .gprod__spec strong { font-size: .66rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 700; }
  .gprod .proscons__col h4 { font-size: .7rem; margin-bottom: 5px; }
  .gprod .proscons__col ul { gap: 5px; }
  .gprod .proscons__col li { font-size: .8rem; padding-left: 20px; line-height: 1.35; }
  /* Tableau comparatif COMPACT sur mobile : police + paddings reduits, on limite a
     "Modele + 3 specs" pour tenir l'ecran sans gros scroll horizontal. */
  .ctable { font-size: .8rem; min-width: 0; }
  .ctable th, .ctable td { padding: 8px 9px; }
  /* L'entete de ce tableau porte les NOMS DE PRODUITS : c'est du texte a
     lire, pas un libelle decoratif, et il sortait a 11,5 px quand le corps
     du tableau est a 12,8 px. Le tableau defile deja dans son cadre, la
     largeur n'est donc pas une contrainte. Mesure au balayage mobile. */
  .ctable thead th { font-size: .8rem; }
  .ctable tbody th:first-child { min-width: 116px; }
  .ctable th:nth-child(n+5), .ctable td:nth-child(n+5) { display: none; }
  .ctable__buy { margin-top: 6px; }
  .ctable td.is-best::after { margin-left: 3px; }
  .sel-hero { grid-template-columns: 1fr; text-align: center; }
  .sel-hero .sel-result__media { max-width: 200px; margin: 0 auto; }
  .sel-result__actions { justify-content: center; }
  .sel-alts { grid-template-columns: 1fr; }
  .selector { padding: 22px; }
  .buybar__sub { display: none; }
  .buybar__inner { gap: 10px; padding: 9px 0; }
  .buybar__media { width: 44px; height: 44px; }
  .buybar__name { white-space: normal; font-size: .85rem; line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .buybar .btn { padding: .58em .9em; font-size: .82rem; }
}

/* ---- Maillage : strip "À explorer" ---- */
.xlinks { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 18px 22px; background: var(--bg-alt); border-radius: var(--radius); }
.xlinks__label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-right: 4px; }
.xlink { font-size: .9rem; font-weight: 600; color: var(--brand-dark); background: var(--surface); border: 1px solid var(--line); padding: 7px 14px; border-radius: 999px; transition: all .15s ease; }
.xlink:hover { border-color: var(--brand); background: var(--brand-soft); transform: translateY(-2px); }

@media (max-width: 860px) {
  .picks-grid, .pgrid--3 { grid-template-columns: 1fr; }
}
@media (min-width: 521px) and (max-width: 860px) {
  .pgrid--3 { grid-template-columns: 1fr 1fr; }
  .picks-grid { grid-template-columns: 1fr 1fr; }
}

/* Téléphone : coups de cœur en 3 cartes côte à côte (compactes).
   Étiquette stylée posée sur l'image + 2 specs (valeur) = repère "fiche technique". */
@media (max-width: 600px) {
  /* Coups de cœur : 3 cartes côte à côte, compactes, étiquette perchée.
     (la MÊME carte .pcard, juste densifiée dans le contexte .picks-grid) */
  /* Deux colonnes, pas trois : a 390 px, trois colonnes donnent 115 px par
     carte et aucune etiquette ne tient a 12 px. Deux donnent 173 px. */
  .picks-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-xs); align-items: stretch; margin-top: 9px; }
  .picks-grid > .pcard { min-width: 0; padding: 0; gap: 0; border-radius: var(--radius-sm); overflow: visible; }
  .picks-grid > .pcard:hover { transform: none; box-shadow: none; }
  .picks-grid > .pcard--star { border-color: var(--line); box-shadow: none; }
  .picks-grid > .pcard .pcard__media { padding: 11px 9px 5px; aspect-ratio: 1 / 1; }
  .picks-grid > .pcard .pcard__media img { max-height: 100%; }
  .picks-grid > .pcard .pcard__badge { position: absolute; top: -9px; left: 7px; z-index: 3; align-self: auto;
    /* La largeur maximale retranche le decalage left : sans cela l etiquette sort de la carte de 7 px. */
    width: max-content; max-width: calc(100% - 7px); font-size: .75rem; line-height: 1.1;
    padding: .35em .6em; letter-spacing: .01em; box-shadow: 0 3px 8px rgba(17,32,27,.22); }
  /* Plancher de lisibilite : 12 px. Mesure au balayage des 285 pages a 390 px,
     ou .62/.64/.7rem sortaient entre 9,9 et 11,2 px. Une carte de 115 px tient
     ces tailles sans troncature : verifie au rendu, pas a l oeil. */
  .picks-grid > .pcard .pcard__title { font-size: .8rem; line-height: 1.18; padding: 2px 7px 0; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .picks-grid > .pcard .pcard__specs { padding: 4px 7px 7px; gap: 3px; margin: 3px 0 0; flex-wrap: nowrap; flex-direction: column; }
  .picks-grid > .pcard .pcard__spec { display: block; width: 100%; text-align: center; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; font-size: .75rem; padding: .32em .35em; }
  /* Trois cartes sur deux colonnes laissent un orphelin. Plutot qu'une
     demi-rangee vide, il prend la largeur entiere ; son image passe en
     deux-pour-un pour ne pas occuper tout l'ecran. */
  .picks-grid > .pcard:nth-child(3):last-child { grid-column: 1 / -1; }
  .picks-grid > .pcard:nth-child(3):last-child .pcard__media { aspect-ratio: 2 / 1; }
  .picks-grid > .pcard .pcard__spec-k { display: none; }                 /* compact : valeur seule */
  .picks-grid > .pcard .pcard__spec:nth-of-type(n+3) { display: none; }  /* 2 specs max */
  /* La carte compacte du telephone montre l'image, le nom et deux valeurs, et
     rien d'autre : c'est un repere, pas une fiche. Les raisons vertes en
     faisaient partie par oubli et se pliaient dans une colonne de 160 px,
     coupant les mots en deux. Elles rejoignent la liste des blocs masques. */
  /* La carte compacte du telephone montre l'image, le nom et deux valeurs.
     La pastille de diagonale y recouvrait un tiers du visuel. */
  .picks-grid > .pcard .pcard__diag,
  .picks-grid > .pcard .pcard__tagline,
  .picks-grid > .pcard .pcard__raisons,
  .picks-grid > .pcard .pcard__actions,
  .picks-grid > .pcard .aff-note { display: none; }
  /* Catalogue produit (autres pages) : carte densifiée */
  .pcard { padding: var(--space-sm); gap: var(--space-2xs); }
  .pcard__media { padding: 10px; }
  .pcard__title { font-size: 1rem; }
  /* Catégories : grille 2 colonnes compacte, les 6 rayons visibles d'un coup.
     Ticket resserré : talon étroit, corps compact, CTA sur une ligne. */
  .cat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cat-card { --stub: 42px; --notch: 9px; min-height: 0; }
  .cat-card__num { font-size: 1.15rem; }
  .cat-card__unit { font-size: .46rem; letter-spacing: .05em; }
  .cat-card__body { padding: 12px 11px; gap: 5px; }
  .cat-card__title { font-size: .98rem; flex: none; }
  .cat-card__cta { font-size: .8rem; gap: 4px; }
}

/* Filet de sécurité petits écrans : tout en 1 colonne (évite tout débordement) */
@media (max-width: 430px) {
  .pgrid, .hub-grid, .learn-grid, .guide-grid,
  .related-grid, .trust, .criteria-grid, .sel-alts { grid-template-columns: 1fr; }
  /* .profiles reste en 2 colonnes compactes meme sur petit ecran (tuiles courtes). */
  .container { padding: 0 16px; }
  .sel-hero { padding: 18px; }
  .gprod__actions .btn { width: 100%; }
}

/* ----------------------------------------------------------------
   Bandeau cookies (consentement RGPD - consent.js)
   ---------------------------------------------------------------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  padding: 0 16px 16px;
  transform: translateY(120%); transition: transform .35s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.cookie-banner.is-on { transform: none; pointer-events: auto; }
.cookie-banner__inner {
  max-width: var(--lecture); margin: 0 auto;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 18px 22px;
}
.cookie-banner__txt { flex: 1; min-width: 240px; }
.cookie-banner__title { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.02rem; margin: 0 0 4px; }
.cookie-banner__desc { font-size: .9rem; color: var(--muted); line-height: 1.5; margin: 0; }
.cookie-banner__desc a { color: var(--brand); font-weight: 600; }
.cookie-banner__actions { display: flex; gap: 10px; flex: none; }
.cookie-banner__btn { white-space: nowrap; }
@media (max-width: 560px) {
  .cookie-banner { padding: 0 10px 10px; }
  .cookie-banner__inner { padding: 13px 15px; gap: 9px; border-radius: var(--radius-sm); }
  .cookie-banner__txt { min-width: 0; }
  .cookie-banner__title { font-size: .92rem; margin-bottom: 2px; }
  .cookie-banner__desc { font-size: .8rem; line-height: 1.45; }
  .cookie-banner__actions { width: 100%; gap: 8px; }
  .cookie-banner__btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; }
}

/* ============================================================
   BULLE D'AIDE - partagee par le moteur de decision et les calculateurs.
   Ici et non dans moteur.css : les pages de calculateurs chargent
   components.css et tools.css, jamais moteur.css. Une regle placee la
   n'aurait servi qu'a la page du moteur de decision.
   L'explication s'affiche au survol ou au focus clavier, elle n'occupe plus
   la colonne en permanence. `title` porte le texte : le navigateur le montre
   au survol et les lecteurs d'ecran l'annoncent via `aria-label`.
   ============================================================ */
.champ-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 5px; border-radius: 50%;
  background: var(--muted); color: var(--bg);
  font-size: 10px; font-weight: 700; font-style: normal;
  line-height: 1; cursor: help; vertical-align: middle;
  opacity: .55; transition: opacity .15s;
}
.champ-info:hover, .champ-info:focus-visible { opacity: 1; }

/* ============================================================
   UNE SEULE LARGEUR PAR PAGE

   Defaut mesure le 2026-09-06 sur les 665 pages du reseau : 8 pages empilaient
   des blocs de largeurs differentes. Le calculateur occupait le `.container`
   entier (1160 px) tandis que le chapo au-dessus tenait dans 896 px et le
   texte en dessous dans 820. A l'ecran, chaque bloc s'arretait a un endroit
   different : la page paraissait mal montee, sans qu'on sache pourquoi.

   La regle : sur une page qui porte un moteur ou un calculateur, tous les
   blocs de section prennent la meme largeur - celle du conteneur. La
   lisibilite du texte reste assuree en bornant la longueur des PARAGRAPHES
   (68 caracteres), et non la largeur du bloc qui les contient : un titre, un
   tableau ou une liste n'ont aucune raison d'etre retrecis.

   `:has()` evite d'avoir a marquer ces pages au build - elles se reconnaissent
   a ce qu'elles contiennent. Les navigateurs qui l'ignorent retombent sur
   l'ancienne mise en page, qui reste lisible.
   Place ici et non dans moteur.css : les pages de CALCULATEURS ne chargent
   pas moteur.css. La regle n'aurait servi qu'aux trois pages de moteur, et
   les cinq pages d'outils concernees seraient restees de travers.
   ============================================================ */
main:has(.moteur) .tool-intro,
main:has(.moteur) .faq,
main:has(.tool-work) .article-body,
main:has(.tool-work) .tool-intro,
main:has(.tool-work) .tool-head,
main:has(#tool-app) .tool-intro,
main:has(#tool-app) .tool-head {
  max-width: none;
}
/* La FAQ d'une page de calculateur ne fait PAS partie de cette liste : elle
   garde la mesure de lecture du site. Elle y figurait, et la capture d'ecran
   a montre le resultat - la FAQ courait jusqu'au bord du conteneur pendant
   que les paragraphes s'arretaient 300 px avant, dans la meme colonne. La
   regle qui la remet a 820 px et la cale a gauche est dans tools.css. */
main:has(.tool-work) .article-body > p,
main:has(.moteur) .tool-intro__lead,
main:has(.tool-work) .tool-intro__lead,
main:has(#tool-app) .tool-intro__lead {
  max-width: 68ch;
}
/* LA PROSE SOUS LE MOTEUR : une colonne, centree, a la mesure du site.

   Elle etait en pleine largeur (1116 px) avec ses paragraphes plafonnes a
   68ch : deux bords droits differents dans la meme colonne et 300 px de vide
   a droite du texte. "Pourquoi tu as mis une limite vers la droite comme ca ?
   Tres bien, tu prends toute la largeur, ce que tu fais en dessous,
   incomprehensible." Elle reprend donc `.article-body` tel quel - 820 px
   centres, comme toutes les pages d'article du site. */
/* DEMANDE EXPLICITE, formulee deux fois : la prose sous le moteur doit faire
   LA MEME LARGEUR QUE L'OUTIL. « Tu vois bien qu'a gauche il y a une grosse
   marge, a droite aussi, ca ne va pas. »

   Une colonne de 820 px centree sous un outil de 1116 px laissait en effet une
   marge de chaque cote. On aligne donc les deux bords. La ligne devient longue
   pour du texte suivi : c'est le choix assume de la coherence de la page. */
main:has(.moteur) .article-body { max-width: none; margin-inline: 0; }
main:has(.moteur) .article-body > p { max-width: none; }

/* ============================================================
   ACCUEIL : puces de confiance, chiffres, raisons sur les cartes

   D'apres la maquette fournie par l'utilisateur. Trois ajouts seulement, et
   chacun s'appuie sur une donnee qui existe deja : les `pros` des fiches, le
   compte des produits et des guides, et trois affirmations verifiables sur le
   site meme. Le score « 96/100 » de la maquette n'est PAS repris : aucun
   score n'est calcule hors du moteur, il serait invente.
   ============================================================ */
/* TROIS COLONNES, pas un flux libre. En `flex-wrap` la troisieme puce tombait
   seule a la ligne : deux en haut, une en bas, ce qui se lit comme une erreur
   de mise en page. Une grille de trois les tient alignees, et elles passent en
   colonne unique quand la place manque. */
/* Pictogramme des chiffres du hero : meme famille que ceux des pastilles du
   moteur, meme raison - ils suivent la couleur du texte. */
.hero__stat-ico {
  display: block; margin-bottom: 2px;
  color: var(--brand); font-size: .95rem; line-height: 1; opacity: .8;
}

/* Trois raisons sur une carte de l'accueil. Ce sont les `pros` de la fiche :
   deja rediges, deja relus, jamais inventes pour la vitrine. */
/* `min-width: 0` sur la liste ET sur ses items : sans lui, une piste de
   grille se dimensionne sur son contenu le plus large et deborde de la carte.
   Mesure a l'appui : la page d'accueil sortait a 394 px de large pour une
   fenetre de 390, a cause de ces trois lignes. Detecte par le controle de
   debordement de l'outil de capture, invisible a l'oeil sur l'image. */
.pcard__raisons {
  list-style: none; margin: 0 0 12px; padding: 0;
  display: grid; gap: 5px; min-width: 0;
}
.pcard__raisons li {
  position: relative; padding-left: 22px; min-width: 0;
  font-size: var(--fs-sm); color: var(--text); line-height: 1.4;
}
.pcard__raisons li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--success); font-weight: 700;
}


/* Meilleur modele du rayon, sur la carte de l'accueil. Le centre de ces cartes
   etait blanc : un nombre a gauche, un titre en haut, un lien en bas, et rien
   entre les deux. Cette ligne y met la seule information que le visiteur
   cherche a cet endroit, et elle est deja calculee ailleurs. */
.cat-card__top {
  font-size: var(--fs-2xs); color: var(--muted); line-height: 1.4;
  display: block; min-width: 0;
}
.cat-card__top b {
  display: block; color: var(--ink); font-weight: 600;
  font-size: var(--fs-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 600px) {
  .cat-card__top { display: none; }   /* carte compacte : deja dense */
}



/* Encart d'appel du Mag : icone + texte + bouton sur une ligne, sans retour a
   la ligne possible. A 390 px le bouton depassait de 10 px et poussait toute
   la page. Sous 560 px on autorise le passage a la ligne et le bouton prend
   la largeur : c'est aussi une cible tactile plus confortable. */
@media (max-width: 560px) {
  .mag-cta { flex-wrap: wrap; gap: 12px; }
  .mag-cta__txt { flex: 1 1 100%; }
  .mag-cta__btn { flex: 1 1 100%; text-align: center; }
}

/* Pastille de caracteristique posee sur le visuel d'une carte de l'accueil,
   reprise de la maquette. Elle situe l'objet avant meme la lecture du nom. */
.pcard__media { position: relative; }
.pcard__diag {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  font-size: var(--fs-2xs); font-weight: 700; color: var(--ink);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .28em .6em; line-height: 1.2;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}

/* Lien d'une en-tete de section, aligne a droite du titre. */
.section-head__link {
  display: inline-block; margin-top: 10px;
  font-size: var(--fs-sm); font-weight: 700; color: var(--brand);
}
.section-head__link::after { content: " \2192"; }
.section-head__link:hover { text-decoration: underline; }

/* ============================================================
   PICTOGRAMMES

   Le reseau affichait 263 emoji dans le corps de ses pages, tous dans une
   fente d'icone produite par le build. Un emoji est une image en couleur
   imposee par le systeme : il ne suit ni la couleur de marque, ni le theme,
   et son dessin change d'un appareil a l'autre. Ils sont remplaces par des
   traces SVG monochromes (voir _template/core/icones.js), poses dans la meme
   tuile pleine que celles de la page d'accueil.
   ============================================================ */

/* Le trace lui-meme : il prend la couleur de ce qui le contient. */
.ico { display: block; flex: none; width: 24px; height: 24px; }
/* Pictogramme pose DANS une ligne de texte, et non dans une pastille : il
   se cale sur la taille et la couleur du texte qui l'entoure, et descend
   d'un cheveu pour s'aligner sur les capitales. */
/* Conteneur de section ramené à la largeur de lecture. Existait en dur
   dans `build.js` sous la forme d'un `style="max-width:760px"`, qui
   gagnait sur la feuille et bridait la page recherche des trois sites. */
.container--lecture { max-width: var(--lecture); }
.ico--texte { display: inline-block; vertical-align: -.16em;
  width: 1.05em; height: 1.05em; margin-right: .42em; }

/* La tuile. Une seule declaration pour toutes les fentes, afin qu'elles ne
   puissent pas diverger. La couleur suit l'accent du rayon quand il y en a un,
   sinon la couleur de marque. */
.hubcard__ico,
.mag-divider__ico,
.classement-group__ico,
.sel-opt__ico,
.tool-callout__icon {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  /* TUILE PLEINE et non un voile : a 15 % d'accent, le trace clair devenait
     illisible en theme clair. Meme lecon que sur les tuiles de l'accueil. */
  background: linear-gradient(150deg,
    var(--acc, var(--brand)),
    color-mix(in srgb, var(--acc, var(--brand)) 74%, #000));
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--acc, var(--brand)) 26%, transparent);
}

/* La couverture de l'article mis en avant : trace large sur l'aplat colore,
   sans tuile puisque le fond en tient deja lieu. */
.mag-lead__cover-ico { display: inline-flex; color: rgba(255, 255, 255, .92); }
.mag-lead__cover-ico .ico {
  width: clamp(56px, 9vw, 86px); height: clamp(56px, 9vw, 86px); stroke-width: 1.3;
}

/* ============================================================
   SCENE PRODUITS DU HERO

   Trois produits flottants : celui du centre en avant, les deux autres
   estompes derriere. Ces regles vivaient dans home.css, qui n'est charge que
   par la page d'accueil : la scene ne pouvait donc pas servir ailleurs. Les
   hubs (Le Mag, comparateur, outils) ouvraient sur un en-tete de 550 a 600 px
   ne contenant qu'un titre centre dans du noir. Le placement en grille propre
   a l'accueil, lui, est reste dans home.css.
   ============================================================ */
/* ── Scène hero : 3 produits flottants (centre devant agrandi + 2 côtés
   estompés/floutés derrière + halo qui suit). Disposition reprise d'EcransPC,
   couleurs de marque (halo, ombres adaptées fond clair). ── */
.hero__scene { position: relative; display: flex; align-items: center; justify-content: center;
  min-height: clamp(16rem, 11rem + 14vw, 22rem); }
.hero__scene-glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: clamp(16rem, 10rem + 20vw, 23rem); aspect-ratio: 1 / 1; z-index: 1; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--brand-mint-rgb), .30) 0%, transparent 70%);
  filter: blur(56px); transition: left .4s ease;
}
/* Liens : positionnement éventail (centre devant + 2 côtés estompés derrière) */
.hero__scene-link { position: absolute; display: block; cursor: pointer; text-decoration: none;
  transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .4s ease, filter .4s ease; }
.hero__scene-link--center { z-index: 10; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.hero__scene-link--left  { z-index: 5; left: -1%;  top: 50%; transform: translateY(-50%); opacity: .62; filter: blur(.8px); }
.hero__scene-link--right { z-index: 5; right: -1%; top: 50%; transform: translateY(-50%); opacity: .62; filter: blur(.8px); }

/* Carte : contour net + petite étiquette en haut (lisible sur fond clair) */
.hero__scene-card { display: flex; flex-direction: column; align-items: center;
  gap: clamp(.4rem, .3rem + .4vw, .7rem);
  /* Tuile image claire dans les deux thèmes (comme .pcard__media) : les visuels
     produit à fond blanc s'y fondent au lieu de flotter en carré blanc en sombre. */
  background: var(--plinth); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(.7rem, .5rem + .7vw, 1.05rem); box-shadow: var(--shadow-md);
  transition: box-shadow .3s ease, transform .3s ease; }
.hero__scene-card--center { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--brand-mint-rgb), .28); }
.hero__scene-tag { align-self: flex-start; font-size: var(--fs-2xs); font-weight: 700;
  color: var(--brand-dark); background: rgba(var(--brand-mint-rgb, 20, 224, 176),.14); border: 1px solid rgba(var(--acc-rgb, 21, 127, 102),.20);
  padding: .22em .7em; border-radius: 999px; white-space: nowrap; letter-spacing: .01em; }
.hero__scene-img { display: block; width: auto; object-fit: contain; margin: 0 auto; }
.hero__scene-img--center { max-height: clamp(9.5rem, 7rem + 9vw, 13.5rem); max-width: 100%; }
.hero__scene-img--left, .hero__scene-img--right { max-height: clamp(7rem, 5rem + 7vw, 10rem); max-width: 100%; }

/* Focus au survol : le côté survolé avance (net), le centre recule, le halo suit */
.hero__scene-link--left:hover, .hero__scene-link--right:hover { opacity: 1; filter: none; z-index: 20; }
.hero__scene-link--left:hover .hero__scene-card,
.hero__scene-link--right:hover .hero__scene-card { transform: scale(1.04); box-shadow: var(--shadow-lg); }
.hero__scene:has(.hero__scene-link--left:hover)  .hero__scene-link--center,
.hero__scene:has(.hero__scene-link--right:hover) .hero__scene-link--center { opacity: .5; filter: blur(.8px); }
.hero__scene-link--center:hover .hero__scene-card { transform: scale(1.03);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--brand-mint-rgb), .45); }
.hero__scene:has(.hero__scene-link--left:hover)  .hero__scene-glow { left: 25%; }
.hero__scene:has(.hero__scene-link--right:hover) .hero__scene-glow { left: 75%; }

.hero__scene-chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  margin: 10px 10px 0;
}
.hero__scene-chip {
  font-size: .68rem; font-weight: 700; color: var(--ink);
  background: var(--bg-alt);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 999px; padding: .3em .7em; line-height: 1.2;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hero__scene-nom {
  display: block; margin: 12px 14px 0; text-align: center;
  font-family: var(--font-display); font-weight: 700;
  /* La carte de la scene est un socle CLAIR dans les deux themes (`--plinth`).
     `--ink` y ecrivait donc du blanc sur du blanc en theme sombre : le nom du
     produit etait invisible. On reprend la couleur du badge de la meme carte,
     dont on sait qu'elle s'y lit. */
  font-size: .95rem; color: var(--brand-dark); line-height: 1.2;
}
.hero__scene-note {
  display: block; margin: 3px 14px 14px; text-align: center;
  font-size: .76rem; color: color-mix(in srgb, var(--brand-dark) 62%, transparent);
  line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Sous 900 px, la scene est masquee : trois cartes superposees dans 390 px de
   large ne se lisent pas, et l'en-tete doit rester court sur telephone.
   (L'accueil a deja sa propre regle equivalente dans home.css.) */
@media (max-width: 900px) {
  .page-hero__scene { display: none; }
}

/* ============================================================
   EN-TETE DE HUB, EN DEUX COLONNES

   Les trois hubs (Le Mag, comparateur, outils) ouvraient sur 550 a 600 px ne
   contenant qu'un titre centre dans du noir : rien a regarder avant d'avoir
   fait defiler. Ils reprennent la composition de la page d'accueil, texte a
   gauche et scene produits a droite.

   Le placement des deux colonnes est EXPLICITE. Piege deja rencontre deux fois
   sur l'accueil : sans placement explicite, un bloc en pleine largeur pousse le
   visuel a la rangee suivante et laisse un trou.
   ============================================================ */
.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
.page-hero__grid > .section-head { grid-column: 1; grid-row: 1; }
.page-hero__grid > .page-hero__scene { grid-column: 2; grid-row: 1; }

/* Le titre d'un hub etait centre. Face a un visuel, il se lit a gauche, comme
   sur la page d'accueil : c'est le meme geste de lecture. */
.page-hero__grid .section-head { text-align: left; margin-left: 0; margin-right: 0; max-width: 46ch; }
.page-hero__grid .section-head__cta { margin-left: 0; }
.page-hero__grid .page-hero__stats { justify-content: flex-start; }

/* Un en-tete plus court : c'est du preambule, pas du contenu. */
.page-hero:has(.page-hero__scene) { padding: var(--hero-haut) 0 var(--hero-bas); }
/* Le titre d'un hub prenait la taille par defaut d'un h1 (58 px), soit 20 px de
   plus que celui d'un classement. Meme role, meme echelle - et la regle porte
   sur TOUT h1 de section-head, sinon les pages de service (recherche, methode,
   contact) restent les seules a 58 px. Huit pages concernees. */
.section-head h1 { font-size: var(--fs-hero); line-height: 1.1; }
/* La scene doit contenir la carte, sinon elle deborde du bandeau : ses cartes
   sont en position absolue et ne portent donc pas la hauteur. Mesure : carte
   409 px pour un bandeau de 373, soit 15 px de debordement en haut et 22 en
   bas. On raccourcit la carte ET on donne a la scene la hauteur qui reste. */
.page-hero__scene { min-height: clamp(15rem, 10rem + 9vw, 21rem); }
.page-hero__scene .hero__scene-img--center { max-height: clamp(7.5rem, 5rem + 6vw, 9rem); }
/* Les pastilles de caracteristiques restent sur la page d accueil, ou la
   scene est le sujet. Sur un hub, elles allongent la carte de 56 px pour une
   information que la page en dessous donne deja. */
.page-hero__scene .hero__scene-chips { display: none; }
.page-hero__scene .hero__scene-img--left,
.page-hero__scene .hero__scene-img--right { max-height: clamp(5.5rem, 4rem + 4.5vw, 7rem); }

@media (max-width: 900px) {
  .page-hero__grid { grid-template-columns: 1fr; }
  .page-hero__grid > .section-head { grid-column: 1; grid-row: 1; }
  .page-hero__grid .section-head { text-align: center; max-width: none; }
  .page-hero__grid .page-hero__stats { justify-content: center; }
}

/* ============================================================
   BRIQUES DE LA MAQUETTE DE REFERENCE

   Quatre choses n'existaient pas dans la fabrique : un titre de section avec
   son sous-titre a droite, une grande carte a bouton pleine largeur, des
   etiquettes qui flottent autour d'un visuel, et une annotation manuscrite.
   Elles sont ecrites ici, donc disponibles pour les six hubs et pour les deux
   autres sites.
   ============================================================ */

/* ---- Titre de section, sous-titre a droite ---- */
.titre-section {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin: 0 0 clamp(18px, 2vw, 28px);
}
.titre-section__t { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); color: var(--ink); margin: 0; }
.titre-section__d { font-size: .95rem; color: var(--muted); }

/* ---- Grande carte (un outil, un rayon, un service) ----
   Elle differe de `.hubcard` par sa hauteur, ses points et son bouton en pied.
   Elle reprend la BASE CARTE pour le fond, le bord et le survol. */
.grande-carte {
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(20px, 2vw, 28px);
  border-radius: var(--radius-lg);
}
/* Mise en avant : anneau colore, comme la carte n°1 de la page d'accueil.
   Un ANNEAU, pas un filet sur un cote : pas d'accolade. */
.grande-carte--phare {
  border-color: rgba(var(--acc-rgb), .5);
  box-shadow: 0 0 0 1px rgba(var(--acc-rgb), .35), var(--shadow-acc);
}
.grande-carte__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.grande-carte__ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 15px; color: #fff;
  background: linear-gradient(150deg,
    var(--acc, var(--brand)),
    color-mix(in srgb, var(--acc, var(--brand)) 74%, #000));
  box-shadow: 0 5px 14px color-mix(in srgb, var(--acc, var(--brand)) 28%, transparent);
}
.grande-carte__ico .ico { width: 27px; height: 27px; }
.grande-carte__marque {
  font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  color: var(--on-accent); background: var(--acc, var(--brand));
  padding: .35em .85em; border-radius: 999px; white-space: nowrap;
}
.grande-carte__titre { font-size: 1.22rem; color: var(--ink); margin: 6px 0 0; }
.grande-carte__sous { font-size: .95rem; font-weight: 700; color: var(--acc, var(--brand)); }
.grande-carte__txt { font-size: .93rem; color: var(--muted); line-height: 1.55; margin: 0; }

/* Points a coche ronde pleine, comme les raisons des cartes de l'accueil. */
.grande-carte__points { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.grande-carte__points li { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--text); line-height: 1.45; }
.grande-carte__points li::before {
  content: "\2713"; flex: none;
  width: 21px; height: 21px; margin-top: 1px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 800;
  color: var(--on-accent); background: var(--success, var(--acc, var(--brand)));
}
/* Le bouton tient toute la largeur du pied : c'est lui qui dit que la carte
   est une porte, et non un article a lire. */
.grande-carte__cta { margin-top: 14px; width: 100%; justify-content: center; }

/* ---- Visuel a etiquettes flottantes ----
   Le visuel d'un hub doit dire ce que la page fait. Les etiquettes portent les
   QUESTIONS auxquelles la page repond, posees autour de l'image. */
.visuel { position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(15rem, 10rem + 9vw, 21rem); }
.visuel__fond {
  position: absolute; inset: 8% 4%; z-index: 0; pointer-events: none; border-radius: var(--radius-lg);
  background: radial-gradient(circle at 50% 45%,
    color-mix(in srgb, var(--brand) 30%, transparent) 0%, transparent 68%);
  filter: blur(46px);
}
/* 78 % laissait les etiquettes se poser SUR l ecran au lieu d autour : elles
   masquaient l image et devenaient illisibles sur son fond charge. */
.visuel__image { position: relative; z-index: 1; max-width: 60%; }
/* Borner la HAUTEUR, pas seulement la largeur : l image debordait du visuel
   en haut et en bas, et se retrouvait coupee. */
.visuel__image img { width: auto; max-width: 100%; max-height: clamp(12rem, 8rem + 8vw, 17rem); height: auto; margin: 0 auto; border-radius: var(--radius); }
.visuel__etiquette {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 14px; border-radius: 14px;
  background: var(--glass-strong, var(--surface));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  font-size: .82rem; font-weight: 600; color: var(--ink); line-height: 1.3;
  max-width: 15rem;
}
.visuel__etiquette .ico { width: 19px; height: 19px; color: var(--acc, var(--brand)); }
.visuel__etiquette--hg { top: 4%;  left: 0; }
.visuel__etiquette--hd { top: 26%; right: 0; }
.visuel__etiquette--bg { bottom: 22%; left: 0; }
.visuel__etiquette--bd { bottom: 2%;  right: 2%; }
@media (max-width: 900px) { .visuel { display: none; } }

/* ---- Annotation manuscrite ----
   Une main courante posee a cote du visuel. Pas de police chargee pour ca :
   une pile de polices manuscrites deja presentes sur les systemes, avec une
   italique en dernier recours. */
.annotation {
  display: inline-flex; align-items: flex-start; gap: 10px;
  font-family: "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive;
  font-style: italic;
  font-size: .95rem; line-height: 1.45; color: var(--muted);
  max-width: 18rem;
}
.annotation__fleche { flex: none; width: 34px; height: 26px; color: var(--muted); opacity: .7; }
@media (max-width: 900px) { .annotation { display: none; } }

/* ---- Bande de renvoi, en pied de hub ----
   Quand l'outil ou la liste n'a pas suffi, on propose la suite. En PIED, une
   fois qu'on a fini avec le sujet de la page. */
.bande-renvoi {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(18px, 2.4vw, 34px); flex-wrap: wrap;
  margin-top: clamp(30px, 4vw, 52px);
  padding: clamp(22px, 2.6vw, 32px) clamp(24px, 3vw, 38px);
  border: 1px solid rgba(var(--acc-rgb), .28);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(130% 130% at 0% 0%, rgba(var(--acc-rgb), .12), transparent 58%),
    var(--surface);
}
.bande-renvoi__txt { min-width: 0; flex: 1; }
.bande-renvoi__sur {
  display: block; font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--acc, var(--brand)); margin-bottom: 6px;
}
.bande-renvoi__t { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, .95rem + .7vw, 1.4rem); color: var(--ink); margin: 0; }
.bande-renvoi__d { font-size: .92rem; color: var(--muted); margin: 6px 0 0; }
.bande-renvoi .btn { flex: none; }
@media (max-width: 620px) {
  .bande-renvoi { flex-direction: column; align-items: flex-start; }
  .bande-renvoi .btn { width: 100%; justify-content: center; }
}

/* ---- Les quatre visuels de hub ----
   Meme cadre `.visuel`, contenus differents : chaque hub montre ce que SA page
   fait. Toutes les images viennent du catalogue, aucune n'est decorative. */

/* Podium : le premier au centre et plus haut, les deux autres de part et
   d'autre. C'est la difference de hauteur qui fait lire « classement ». */
.visuel__podium { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: clamp(8px, 1.2vw, 18px); }
.visuel__marche {
  display: block; background: var(--plinth); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow-md);
}
.visuel__marche img { width: 100%; height: auto; display: block; object-fit: contain; }
.visuel__marche--1 { width: clamp(7rem, 5rem + 6vw, 10rem); }
.visuel__marche--2, .visuel__marche--3 { width: clamp(5rem, 3.5rem + 4.5vw, 7.5rem); margin-bottom: clamp(14px, 2vw, 30px); opacity: .85; }

/* Face a face : deux ecrans et le mot qui les separe. */
.visuel__face { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.6vw, 22px); }
.visuel__cote {
  display: block; width: clamp(6rem, 4rem + 6vw, 9rem);
  background: var(--plinth); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow-md);
}
.visuel__cote img { width: 100%; height: auto; display: block; object-fit: contain; }
.visuel__vs {
  flex: none; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(.9rem, .8rem + .5vw, 1.15rem); text-transform: uppercase;
  color: var(--on-accent); background: var(--acc, var(--brand));
  border-radius: 999px; padding: .4em .8em; box-shadow: var(--shadow-md);
}

/* Planche de vignettes : le catalogue, en petit. */
.visuel__planche { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(100%, 22rem); }
.visuel__case {
  display: block; aspect-ratio: 1 / 1; padding: 8px;
  background: var(--plinth); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
}
.visuel__case img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---- Numero d'etape ----
   Deux blocs d'une meme page se lisaient comme deux outils concurrents. Les
   numeroter suffit a dire qu'ils s'enchainent. */
.etape {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-right: 10px; border-radius: 50%;
  font-family: var(--font-display); font-weight: 800; font-size: .85rem;
  color: var(--on-accent); background: var(--acc, var(--brand));
  vertical-align: middle;
}

/* ---- Bandeau de titre SANS visuel ----
   Un hero n'existe que s'il sert. Quand il ne porte qu'un titre, il doit
   s'effacer et laisser voir le contenu de la page : c'est a ca qu'on
   reconnait ou l'on est arrive.

   Trois espaces s'additionnaient : le rembourrage du bandeau, la marge basse
   du bloc de titre, et le rembourrage haut de la section suivante. Les trois
   sont reduits ensemble - reduire un seul ne se voit pas. */
.page-hero:not(:has(.page-hero__scene)):not(:has(.visuel)) {
  padding: clamp(20px, 2.2vw, 30px) 0 clamp(16px, 1.8vw, 24px);
}
.page-hero:not(:has(.page-hero__scene)):not(:has(.visuel)) .section-head {
  margin-bottom: 0;
}
/* La section qui suit immediatement un bandeau de titre commence haut : son
   rembourrage ferait doublon avec celui du bandeau. */
.page-hero + .section { padding-top: clamp(18px, 2vw, 28px); }

/* Sans visuel, la grille a deux colonnes laisse la moitie droite vide et
   force le titre a se casser sur deux lignes : le bandeau y gagne 60 px de
   haut pour rien. Une seule colonne quand il n y a rien a mettre a droite. */
.page-hero__grid:not(:has(.visuel)):not(:has(.page-hero__scene)) {
  grid-template-columns: 1fr;
}
/* Le titre etait borne a 46 ch pour cohabiter avec un visuel a sa droite.
   Sans visuel, cette borne ne fait plus que casser le titre en deux lignes et
   allonger le bandeau : on la releve, le chapo garde une mesure lisible. */
.page-hero__grid:not(:has(.visuel)):not(:has(.page-hero__scene)) .section-head { max-width: none; }
.page-hero__grid:not(:has(.visuel)):not(:has(.page-hero__scene)) .section-head p { max-width: 70ch; }

/* ============================================================
   HERO DE HUB : L'ARTICLE MIS EN AVANT EST LE HAUT DE LA PAGE

   Il ne s'agit pas d'un bandeau de titre suivi d'une carte : le contenu EST
   le hero. On comprend en arrivant qu'on est sur des articles, et l'article
   propose donne envie de descendre.

   La scene de droite est DESSINEE, pas photographiee : les articles n'ont pas
   d'image, et un aplat de couleur avec un glyphe au milieu n'est pas un
   visuel. Un ecran, un halo, deux etiquettes.
   ============================================================ */
.heromag {
  position: relative; overflow: hidden;
  /* Peu de marge basse : le contenu de la page doit suivre immediatement.
     Il restait 90 px de vide entre le bouton du hero et la barre de filtres. */
  padding: clamp(14px, 1.6vw, 22px) 0 clamp(10px, 1.2vw, 18px);
}
/* PAS DE CADRE. Il y en a eu un, c'etait la mauvaise reponse : le hero ne
   flottait pas faute de boite, il flottait faute de SEPARATION DE ZONES. La
   page d'accueil ne met aucun cadre et ne flotte pas - ses sections alternent
   des fonds legerement differents, et c'est ce contraste doux qui decoupe la
   page. La separation se fait donc par les fonds (voir `.section--alt`), pas
   par un contour autour du contenu. */
.heromag__item {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 3vw, 52px); align-items: center;
  max-width: var(--container); margin: 0 auto; padding: 0 22px;
}
/* Placement EXPLICITE : un bloc en pleine largeur ferait tomber la scene a la
   rangee suivante. Piege deja rencontre deux fois sur l'accueil. */
/*  ecrase l attribut  : sans cette regle, les six
   candidats s affichent tous empiles au lieu d un seul. */
.heromag__item[hidden] { display: none; }
.heromag__item > .heromag__txt { grid-column: 1; grid-row: 1; }
.heromag__item > .scene { grid-column: 2; grid-row: 1; }

.heromag__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.heromag__kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: var(--acc, var(--brand));
}
.heromag__tag {
  color: var(--on-accent); background: var(--acc, var(--brand));
  padding: .34em .8em; border-radius: 999px; letter-spacing: .06em;
}
.heromag__titre {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.8rem); line-height: 1.08;
  color: var(--ink);
}
.heromag__desc { font-size: 1.02rem; line-height: 1.55; color: var(--muted); max-width: 52ch; }
.heromag__cta {
  margin-top: 6px; display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--on-accent);
  background: var(--grad-brand, var(--brand));
  padding: .8em 1.5em; border-radius: 999px;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--acc, var(--brand)) 34%, transparent);
  transition: transform .18s ease, box-shadow .18s ease;
}
.heromag__item:hover .heromag__cta { transform: translateY(-2px); }

/* ---- La scene dessinee ---- */
.scene { position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(13rem, 9rem + 9vw, 18rem); }
.scene__halo {
  position: absolute; inset: 4% 6%; z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%,
    color-mix(in srgb, var(--acc, var(--brand)) 55%, transparent) 0%, transparent 66%);
  filter: blur(52px);
}
.scene__ecran { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: min(100%, 20rem); }
/* La dalle : un degrade de la couleur du rayon, un liseré clair en haut pour
   figurer le reflet, et le pictogramme du rayon en grand. */
.scene__dalle {
  width: 100%; aspect-ratio: 16 / 10; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--acc, var(--brand)) 88%, #fff 4%) 0%,
      color-mix(in srgb, var(--acc, var(--brand)) 62%, #000 38%) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 22px 48px color-mix(in srgb, var(--acc, var(--brand)) 32%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc, var(--brand)) 55%, #fff 18%);
}
.scene__dalle .ico { width: 34%; height: auto; color: rgba(255, 255, 255, .92); stroke-width: 1.2; }
/* `.scene__col` et `.scene__socle` (le pied du moniteur) ont ete retires :
   ils faisaient lire « ecran » sur trois sites dont deux ne vendent pas
   d'ecrans. Le visuel est desormais une vraie photo produit, ou a defaut
   le panneau colore seul. */

/* Les etiquettes : deux, pas quatre, et posees en dehors de la dalle pour ne
   rien masquer. */
.scene__etiq {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  font-size: .8rem; font-weight: 700; color: var(--ink); white-space: nowrap;
}
.scene__etiq--a { top: 6%; left: -2%; }
.scene__etiq--b { bottom: 8%; right: -2%; }

@media (max-width: 900px) {
  .heromag__item { grid-template-columns: 1fr; }
  .heromag__item > .scene { grid-column: 1; grid-row: 2; }
  .scene { min-height: 11rem; }
  .scene__etiq--a { left: 2%; }
  .scene__etiq--b { right: 2%; }
}

/* ---- Titre de page compact ----
   Le nom de la page, au-dessus du hero de contenu. Il doit tenir en une ligne
   discrete : ce n est pas lui qui doit remplir l ecran, c est le contenu. */
/* Zero en haut : la bande vide entre le fil d Ariane et le titre ne servait
   qu a repousser le contenu. */
.page-titre { padding: 0; }
.page-titre__h {
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); line-height: 1.2;
  color: var(--ink); margin: 6px 0 0;
}

/* Pictogramme dans une pastille de filtre : petit, a la couleur du texte. */
.pagenav__chip-ico { display: inline-flex; }
.pagenav__chip-ico .ico { width: 15px; height: 15px; stroke-width: 2; }

/* ---- Tuile de classement : meme vocabulaire que les cartes d'outil ----
   Les trois hubs (Le Mag, Classements, Outils) doivent se ressembler : hero
   rotatif en haut, cartes au meme vocabulaire en dessous. */
.cls-tile__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px; align-self: flex-start;
  background: linear-gradient(150deg,
    var(--acc, var(--brand)),
    color-mix(in srgb, var(--acc, var(--brand)) 74%, #000));
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--acc, var(--brand)) 26%, transparent);
}
.cls-tile__ico .ico { width: 21px; height: 21px; }
/* Un surtitre, plus une pastille pleine : la pastille faisait doublon avec la
   tuile d icone juste au-dessus, et ma premiere version n en changeait que la
   couleur du texte - qui devenait alors identique au fond, donc invisible.
   Il faut retirer le fond, pas repeindre le texte. */
.classement-group .cls-tile .related-tile__label {
  background: none; padding: 0; color: var(--acc, var(--brand));
}
/* Un vrai bouton en pied, comme sur les cartes d'outil. */

/* Scene a PHOTO : le hub des fiches est le seul dont le contenu est un
   produit, donc le seul ou une vraie image vaut mieux qu un ecran dessine. */
/* Socle clair, comme toutes les vignettes produit du site : les visuels du
   catalogue sont sur fond blanc et flottaient en carre blanc sur la page
   sombre. */
.scene--photo .scene__photo {
  position: relative; z-index: 1; display: block; width: min(100%, 20rem);
  background: var(--plinth); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(12px, 1.4vw, 20px);
  box-shadow: var(--shadow-lg);
}
.scene--photo .scene__photo img { width: 100%; height: auto; display: block; object-fit: contain; }

/* ============================================================
   SEPARATION DES ZONES PAR LE FOND

   C'est la methode de la page d'accueil, et c'est la seule qui marche : elle
   ne met aucun cadre, elle fait alterner des fonds a peine differents. Les
   autres pages n'avaient qu'un seul fond du haut en bas, et le contenu
   paraissait pose au hasard.

   Le haut de page - titre et hero - forme UNE bande ; le contenu qui suit
   reste sur le fond de base. `.page-titre` et `.heromag` sont deux elements
   voisins : meme fond, aucune marge entre eux, sinon on verrait la couture.
   ============================================================ */
.page-titre,
.heromag {
  background:
    radial-gradient(900px 420px at 82% -10%,
      color-mix(in srgb, var(--brand) 9%, transparent), transparent 62%),
    var(--bg-alt);
}
.page-titre { padding-top: clamp(14px, 1.6vw, 22px); padding-bottom: 0; }
.heromag { margin-top: 0; }
/* La frontiere avec le contenu : un filet, pas une ombre. */
.heromag { border-bottom: 1px solid var(--line); }
/* Quand il n'y a pas de hero rotatif, c'est le bandeau de titre qui ferme la
   bande. Le critere est « PAS SUIVI d'un hero », pas « dernier enfant » :
   `:last-child` ne matchait jamais, le bandeau etant toujours suivi des
   sections de la page. La bande du comparateur - seul hub sans hero rotatif -
   restait donc ouverte. */
.page-titre:not(:has(+ .heromag)) {
  border-bottom: 1px solid var(--line);
  padding-bottom: clamp(16px, 2vw, 26px);
}
/* La section qui suit la bande commence haut : son rembourrage de section
   pleine s ajoutait a celui de la bande et ouvrait ~85 px de vide entre le
   hero et la barre de filtres. */
.heromag + .section,
.page-titre + .section { padding-top: clamp(20px, 2.2vw, 30px); }
/* Une bande de titre qui OUVRE une section ne doit pas subir en plus le
   rembourrage haut de cette section : le vide sous le fil d Ariane atteignait
   80 px sur les hubs du Mag des trois sites. La bande porte deja le sien. */
.section:has(> .container > .page-titre:first-child) { padding-top: 0; }

/* ============================================================
   LE BOUTON EN PIED DE CARTE — declaration UNIQUE

   Il etait ecrit deux fois - pour la vignette du Mag et pour la tuile de
   classement - et les 94 tuiles « liees » gardaient un simple lien texte :
   rien ne disait qu'on pouvait cliquer sur toute la carte.

   Une seule declaration desormais, tous les pieds de carte s'y branchent. Un
   nouveau type de carte s'y ajoute, il ne redessine pas son bouton.
   ============================================================ */
.mag-card__more,
.related-tile__cta,
.guide-tile__cta {
  margin-top: auto; align-self: stretch; text-align: center;
  font-weight: 700; font-size: .9rem; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  padding: .78em 1.2em;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mag-card:hover .mag-card__more,
.related-tile:hover .related-tile__cta,
.guide-tile:hover .guide-tile__cta {
  background: var(--acc, var(--brand));
  color: var(--on-accent);
  border-color: var(--acc, var(--brand));
}

/* ---- Page vide (404) ----
   Six regles etaient ecrites dans des attributs `style` : elles gagnent sur la
   feuille de style et rendent les variables inoperantes, exactement comme les
   181 largeurs en dur trouvees dans les sources. */
.page-vide { text-align: center; }
.page-vide__titre { margin: 10px 0 14px; }
.page-vide__texte { color: var(--muted); max-width: 46ch; margin: 0 auto 26px; }
.page-vide__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }