/* Autour de Maman — styles du GUIDE D'ACHAT (page « sélection documentée »).
   Réutilise strictement les tokens de styles.css / blog.css : aucune nouvelle couleur en dur,
   uniquement des color-mix() pour rester lisible en mode clair ET sombre. */

/* ── Hero du guide : bandeau doux + repères de confiance ── */
.ga-hero { padding-block:clamp(40px,6vw,72px) clamp(18px,3vw,28px); text-align:center;
  background:radial-gradient(120% 100% at 50% 0%, color-mix(in srgb,var(--rose) 22%,transparent), transparent 70%); }
.ga-hero .eyebrow { justify-content:center; margin-bottom:14px; }
.ga-hero .eyebrow::after { content:""; width:22px; height:2px; border-radius:2px; background:var(--miel); }
.ga-hero h1 { font-size:clamp(2rem,4.4vw,3.2rem); margin-bottom:14px; letter-spacing:-.015em; }
.ga-lead { color:var(--ink); font-size:clamp(1.05rem,1.6vw,1.18rem); line-height:1.65; max-width:60ch; margin:0 auto; }
.ga-trust { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:24px; }
.ga-trust span { background:var(--card); border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
  border-radius:999px; padding:8px 16px; font-size:.86rem; font-weight:700; color:var(--ink); }

/* ── Mention d'affiliation (obligatoire, visible) ── */
.ga-affiliate { max-width:900px; margin:26px auto 0; text-align:left; }
.ga-affiliate.art-callout p { color:var(--ink); font-size:.95rem; }

/* ── Sommaire ancré ── */
.ga-toc { background:var(--card); border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
  border-radius:var(--radius); padding:clamp(22px,3vw,30px); box-shadow:0 8px 24px -18px rgba(43,58,74,.3); }
.ga-toc h2 { font-size:1.35rem; margin-bottom:16px; }
.ga-toc ol { list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; counter-reset:ga; }
.ga-toc a { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); font-weight:600;
  padding:12px 14px; border-radius:var(--radius-sm); background:color-mix(in srgb,var(--cocon) 6%,transparent);
  transition:background .2s ease, transform .2s ease; min-height:44px; }
.ga-toc a:hover { background:color-mix(in srgb,var(--cocon) 14%,transparent); transform:translateX(3px); }
.ga-toc a::before { counter-increment:ga; content:counter(ga); flex:none; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; background:var(--cocon); color:#fff; font-size:.8rem; font-weight:800;
  font-family:var(--font-body); }
:root[data-theme="dark"] .ga-toc a::before, :root:not([data-theme="light"]) .ga-toc a::before { }

/* ── Bloc catégorie ── */
.ga-cat { margin-top:clamp(46px,6vw,72px); scroll-margin-top:90px; }
.ga-cat-head { display:flex; align-items:flex-start; gap:16px; margin-bottom:14px; }
.ga-ic { flex:none; width:54px; height:54px; border-radius:18px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--cocon) 14%,var(--card)); border:1px solid color-mix(in srgb,var(--cocon) 24%,transparent); }
.ga-ic svg { width:28px; height:28px; stroke:var(--cocon); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ga-cat-head h2 { font-size:clamp(1.5rem,2.8vw,2.05rem); line-height:1.15; margin-bottom:4px; }
.ga-cat-head .ga-kw { font-size:.82rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--brume); }
.ga-cat > p { margin-bottom:15px; line-height:1.75; color:var(--ink); }

/* Encart « les critères qui comptent » */
.ga-criteres { background:color-mix(in srgb,var(--sauge) 14%,var(--card));
  border:1px solid color-mix(in srgb,var(--sauge) 32%,transparent); border-radius:16px;
  padding:18px 22px; margin:20px 0 26px; }
.ga-criteres strong { display:block; font-family:var(--font-head); color:var(--cocon-deep); margin-bottom:8px; font-size:1.05rem; }
.ga-criteres ul { list-style:none; display:flex; flex-direction:column; gap:8px; }
.ga-criteres li { position:relative; padding-left:22px; line-height:1.6; }
.ga-criteres li::before { content:""; position:absolute; left:4px; top:.62em; width:8px; height:8px; border-radius:50%;
  background:var(--miel); }

/* ── Cartes produit ── */
.ga-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:20px; }
.ga-card { display:flex; flex-direction:column; background:var(--card); border-radius:var(--radius);
  border:1px solid color-mix(in srgb,var(--ink) 8%,transparent); overflow:hidden;
  box-shadow:0 10px 28px -20px rgba(43,58,74,.35); transition:transform .25s ease, box-shadow .25s ease; }
.ga-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }
.ga-card-visual { height:96px; position:relative; display:grid; place-items:center;
  background:linear-gradient(135deg, color-mix(in srgb,var(--rose) 38%,var(--card)), color-mix(in srgb,var(--miel) 32%,var(--card))); }
.ga-card:nth-child(2) .ga-card-visual { background:linear-gradient(135deg, color-mix(in srgb,var(--cocon) 28%,var(--card)), color-mix(in srgb,var(--sauge) 34%,var(--card))); }
.ga-card:nth-child(3) .ga-card-visual { background:linear-gradient(135deg, color-mix(in srgb,var(--terracotta) 34%,var(--card)), color-mix(in srgb,var(--rose) 28%,var(--card))); }
.ga-card-visual svg { width:42px; height:42px; stroke:var(--cocon-deep); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; opacity:.85; }
.ga-badge { position:absolute; top:10px; left:10px; background:var(--card); color:var(--cocon-deep);
  font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:5px 11px; border-radius:999px;
  border:1px solid color-mix(in srgb,var(--cocon) 25%,transparent); }
.ga-card-body { padding:18px 20px 22px; display:flex; flex-direction:column; gap:12px; flex:1; }
.ga-card h3 { font-size:1.1rem; line-height:1.3; }
.ga-price { font-family:var(--font-head); font-size:1.15rem; font-weight:600; color:var(--cocon);
  font-variant-numeric:tabular-nums; }
.ga-list { list-style:none; display:flex; flex-direction:column; gap:6px; font-size:.92rem; }
.ga-list li { position:relative; padding-left:20px; line-height:1.5; color:var(--ink); }
.ga-list li::before { position:absolute; left:0; top:0; font-weight:800; }
.ga-plus li::before { content:"+"; color:var(--sauge); }
.ga-minus li::before { content:"−"; color:var(--terracotta); }
.ga-sub { font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--brume); margin-bottom:2px; display:block; }
.ga-cta { margin-top:auto; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 16px; border-radius:var(--radius-sm); background:color-mix(in srgb,var(--cocon) 12%,transparent);
  color:var(--cocon); font-family:var(--font-head); font-weight:600; font-size:.95rem; text-decoration:none;
  transition:background .2s ease, color .2s ease; min-height:44px; }
.ga-card:hover .ga-cta, .ga-cta:hover { background:#4C6E8A; color:#fff; }
.ga-cta svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }

/* Lien vers l'article de blog associé */
.ga-read { display:inline-flex; align-items:center; gap:9px; margin-top:20px; padding:12px 18px;
  border-radius:999px; text-decoration:none; font-weight:700; font-size:.93rem; color:var(--cocon);
  background:color-mix(in srgb,var(--cocon) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--cocon) 22%,transparent); transition:background .2s ease; }
.ga-read:hover { background:color-mix(in srgb,var(--cocon) 16%,transparent); }
/* Le libellé « Lire l'article » ne doit jamais se couper en deux lignes sur mobile. */
.ga-read b { font-weight:700; white-space:nowrap; }
.ga-read span { font-weight:400; color:var(--brume); }
@media (max-width:480px){
  .ga-read { border-radius:16px; align-items:flex-start; flex-direction:column; gap:3px; }
}

/* ── Tableau comparatif (scroll horizontal sur mobile) ── */
.ga-table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius);
  border:1px solid color-mix(in srgb,var(--ink) 10%,transparent); background:var(--card);
  box-shadow:0 10px 30px -22px rgba(43,58,74,.4); }
.ga-table { width:100%; min-width:720px; border-collapse:collapse; font-size:.93rem; }
.ga-table th, .ga-table td { padding:14px 16px; text-align:left; vertical-align:top;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 9%,transparent); }
.ga-table thead th { background:color-mix(in srgb,var(--cocon) 12%,var(--card)); font-family:var(--font-head);
  font-weight:600; font-size:.95rem; color:var(--ink); position:sticky; top:0; }
.ga-table tbody tr:last-child td { border-bottom:none; }
.ga-table tbody tr:hover { background:color-mix(in srgb,var(--cocon) 5%,transparent); }
.ga-table td:first-child { font-weight:700; }
.ga-table .num { font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--cocon); font-weight:700; }
.ga-scroll-hint { text-align:center; color:var(--brume); font-size:.83rem; margin-top:10px; }
@media (min-width:820px){ .ga-scroll-hint { display:none; } }

/* ── Passerelle vers le guide 27 € (réutilise .art-cta) ── */
.ga-bridge { margin-top:clamp(48px,6vw,76px); }

@media (max-width:600px){
  .ga-cat-head { gap:12px; }
  .ga-ic { width:46px; height:46px; border-radius:14px; }
  .ga-ic svg { width:24px; height:24px; }
  .ga-grid { grid-template-columns:1fr; }
  .ga-toc ol { grid-template-columns:1fr; }
}

/* Mention d'affiliation — obligation légale (DGCCRF + règles Amazon) : le lecteur doit être
   informé AVANT de cliquer, pas seulement en pied de page. Traitée en note discrète plutôt
   qu'en encart : l'information reste lisible sans couper l'élan de lecture. */
.ga-affiliate-note {
  max-width: 900px;
  margin: 0 auto 2.5rem;
  padding: 0 1.25rem;
  font-size: 0.82rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--encre) 55%, transparent);
  text-align: center;
}