/* ============================================================
   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); }

/* ============================================================
   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 {
  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 {
  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: #fff;   /* cadre BLANC pur : les images (fond blanc) s'y fondent -> tailles harmonisées */
  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: #fff; 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: .64rem; 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) ---------------- */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.hubcard { /* + BASE CARTE */
  overflow: hidden;
  padding: 28px 26px; display: flex; flex-direction: column; gap: 8px; min-height: 210px;
}
.hubcard__ico { font-size: 2.2rem; line-height: 1; position: relative; }
.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(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: rgba(255,255,255,.7); 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: rgba(250, 252, 249, .92);
  -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: #fff; }
.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: #fff; }

/* ---------------- 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: #fff; }

/* 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: linear-gradient(180deg,#fff,#fbfdfb); }
.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);
}
.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; gap: 12px; }
.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; }
.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: #fff; 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: #fff; 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: rgba(250, 252, 249, .92);
  -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 { flex: none; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; border-radius: 11px; background: rgba(var(--acc-rgb), .14); }
.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); }

.mag-card {
  display: flex; flex-direction: column; gap: 8px; padding: clamp(16px, 1.6vw, 20px);
  border: 1px solid rgba(var(--acc-rgb), .2); border-radius: var(--radius);
  background: radial-gradient(120% 130% at 0% 0%, rgba(var(--acc-rgb), .08), transparent 60%), var(--surface);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.mag-card:hover { transform: translateY(-4px); border-color: rgba(var(--acc-rgb), .5); box-shadow: var(--shadow-acc); }
.mag-card__kicker { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-size: .67rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--acc); background: rgba(var(--acc-rgb), .12); padding: 5px 10px; border-radius: 999px; }
.mag-card__ico { font-size: 1em; line-height: 1; }
.mag-card__title { font-size: 1.02rem; line-height: 1.28; 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: .86rem; line-height: 1.5; color: var(--muted); margin: 0; flex: 1; }
.mag-card__more { margin-top: 4px; font-weight: 700; font-size: .82rem; color: var(--acc); display: inline-flex; align-items: center; gap: 5px; }
.mag-card__more::after { content: "→"; 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: #fff;
  box-shadow: var(--shadow-acc); transition: transform .2s ease;
}
.mag-cta:hover { transform: translateY(-3px); }
.mag-cta__ico { font-size: 1.8rem; flex: none; }
.mag-cta__txt { flex: 1; font-size: .98rem; color: rgba(255, 255, 255, .92); }
.mag-cta__txt strong { color: #fff; }
.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: linear-gradient(180deg,#fff,#fbfdfb); }
.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(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: #fff; }

/* ---------------- FAQ ---------------- */
.faq { max-width: 820px; 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; }
.faq__item[open] { border-color: rgba(var(--acc-rgb), .4); }
.faq__question { font-weight: 700; color: var(--ink); cursor: pointer; padding: 14px 0; list-style: none; position: relative; padding-right: 28px; font-family: var(--font-display); }
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after { content: "+"; position: absolute; right: 0; top: 12px; font-size: 1.4rem; color: var(--brand); font-weight: 400; transition: transform .2s ease; }
.faq__item[open] .faq__question::after { content: "\2013"; }
.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 {
  flex: none; width: 1.85em; height: 1.85em;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1em; line-height: 1;
  border-radius: 13px; background: rgba(var(--acc-rgb), .15);
}
/* 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: #fff; 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: #fff; 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: #fff; 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. */
.gprod__badge {
  font-size: .67rem; 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: #FFF4E5; border: 1px dashed var(--amazon-dark); color: #8a5512;
  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: clamp(1.5rem, 1.05rem + 2.2vw, 2.3rem); 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: #fff; 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: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: #fff; 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 { font-size: 1.4rem; line-height: 1; margin-bottom: 2px; }
.profile-card__use { font-size: .68rem; 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 { font-size: 1.15rem; margin-bottom: 1px; }
  .profile-card__use { font-size: .61rem; }
  .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); }
.ctable thead th { background: var(--bg-alt); font-family: var(--font-display); font-size: .82rem; color: var(--ink); vertical-align: bottom; }
.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(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); }
.sel-opt__ico { font-size: 1.7rem; line-height: 1; }
.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: #fff; 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: linear-gradient(180deg,#fff,#fbfdfb); }
.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; }
.trust__ico { font-size: 1.5rem; line-height: 1; flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--brand-soft); }
.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: rgba(255,255,255,.92); 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: linear-gradient(180deg,#fff,#fbfdfb); 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; }
  .ctable thead th { font-size: .72rem; }
  .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) */
  .picks-grid { grid-template-columns: repeat(3, 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;
    width: max-content; max-width: calc(100% + 6px); font-size: .52rem; line-height: 1.1;
    padding: .35em .6em; letter-spacing: .01em; box-shadow: 0 3px 8px rgba(17,32,27,.22); }
  .picks-grid > .pcard .pcard__title { font-size: .7rem; 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: .55rem; padding: .32em .35em; }
  .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 */
  .picks-grid > .pcard .pcard__tagline,
  .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: 880px; 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; }
}