/* src/assets/style.css */
/* Design system shoppingnet -- voir design/handoff/README.md pour la source.
   Charge tokens.css + fonts.css AVANT ce fichier (voir base.njk). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sn-canvas);
  color: var(--sn-text);
  font-family: var(--sn-font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--sn-font-sans); font-weight: 600; color: var(--sn-ink); margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: var(--sn-green); text-decoration: none; }
a:hover { color: var(--sn-green-hover); }
button, input, select { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--sn-green); outline-offset: 2px; }

/* -- Sections suivantes ajoutees par les taches suivantes du plan :
   header/mega-menu/tiroir mobile (Tache 5), recherche (Tache 6),
   footer (Tache 7), guide comparatif (Taches 8-10), guide catalogue
   (Tache 11), home (Tache 13), responsive (Tache 14). -- */

/* Icones Phosphor (SVG inline, voir shortcode "icon" dans .eleventy.js) */
.ph { display: inline-block; flex-shrink: 0; vertical-align: middle; color: currentColor; }

/* Logo (mark SVG + wordmark texte reel, voir design/handoff/assets/logo/README.md) */
.brand { display: flex; align-items: center; gap: 9px; }
.brand-mark { border-radius: 9px; }
.brand-word { font-family: var(--sn-font-sans); font-weight: 600; letter-spacing: -0.04em; font-size: 20px; color: var(--sn-ink); }
.brand-word--dark { color: var(--sn-on-dark); }
.ph-duotone path:first-child { opacity: var(--ph-duotone-opacity, 0.28); }

/* Header sticky */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(251, 249, 246, 0.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--sn-border-soft); }
.site-header-inner { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; gap: 32px; padding: 14px 48px; position: relative; }
.site-nav { flex: 1; display: flex; align-items: center; gap: 26px; }
.nav-item { position: relative; }
.nav-trigger { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--sn-text); padding: 4px 0; }
.nav-trigger[aria-expanded="true"] { color: var(--sn-green); }
.nav-link { font-size: 15px; font-weight: 500; color: var(--sn-text); }
.nav-link:hover { color: var(--sn-green); }
.site-header-actions { display: flex; align-items: center; gap: 20px; }
.search-trigger { display: flex; align-items: center; gap: 8px; width: 280px; padding: 9px 14px; border: 1px solid var(--sn-border); border-radius: var(--sn-radius-md); background: var(--sn-card); color: var(--sn-text-muted); font-size: 14px; }
.search-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-favoris { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--sn-text-secondary); }
.btn-favoris:disabled { cursor: default; opacity: 0.55; }
.drawer-trigger { display: none; }

/* Mega menu */
.mega-menu { position: absolute; top: calc(100% + 18px); left: -48px; right: -400px; background: var(--sn-card); border-radius: var(--sn-radius-lg); box-shadow: var(--sn-shadow-panel); padding: 24px 28px; z-index: 10; }
/* t-dropdown (transitions.dev) : grandit depuis le declencheur au lieu d'un
   show/hide instantane -- reste dans le DOM (inert quand ferme, cf site.js). */
.mega-menu.t-dropdown {
  transform-origin: top left;
  transform: scale(var(--dropdown-pre-scale));
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dropdown-open-dur) var(--dropdown-ease), opacity var(--dropdown-open-dur) var(--dropdown-ease);
  will-change: transform, opacity;
}
.mega-menu.t-dropdown.is-open { transform: scale(1); opacity: 1; pointer-events: auto; }
.mega-menu.t-dropdown.is-closing {
  transform: scale(var(--dropdown-closing-scale));
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dropdown-close-dur) var(--dropdown-ease), opacity var(--dropdown-close-dur) var(--dropdown-ease);
}
@media (prefers-reduced-motion: reduce) { .t-dropdown { transition: none !important; } }
.mega-menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; min-width: 320px; }
.mega-menu-link { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: var(--sn-radius-sm); }
.mega-menu-link:hover { background: var(--sn-row-selected); }
.mega-menu-link-title { flex: 1; font-size: 15px; color: var(--sn-ink); }
.mega-menu-count { font-family: var(--sn-font-mono); font-size: 11px; color: var(--sn-text-faint); }

/* Tiroir mobile : en flux, pousse le contenu (pas d'overlay). L'affichage
   (display none <-> block) reste pilote par [hidden] natif (JS, cf site.js) --
   sinon le tiroir "ferme" resterait dans le flux et pousserait le footer en
   permanence. t-panel-slide (transitions.dev) ne pilote QUE l'anim
   opacity/transform/blur PAR-DESSUS ce show/hide, une fois affiche. */
.mobile-drawer.t-panel-slide {
  transform: translateY(var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  transition: transform var(--panel-close-dur) var(--panel-ease), opacity var(--panel-close-dur) var(--panel-ease), filter var(--panel-close-dur) var(--panel-ease);
}
.mobile-drawer.t-panel-slide.is-open {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  transition: transform var(--panel-open-dur) var(--panel-ease), opacity var(--panel-open-dur) var(--panel-ease), filter var(--panel-open-dur) var(--panel-ease);
}
@media (prefers-reduced-motion: reduce) { .t-panel-slide { transition: none !important; } }
.mobile-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--sn-border-soft); }
.drawer-close { color: var(--sn-text); }
.mobile-drawer-search { padding: 14px 20px; }
.search-trigger--full { width: 100%; }
.mobile-drawer-list { list-style: none; margin: 0; padding: 8px 8px 20px; }
.mobile-drawer-list li a { display: flex; align-items: center; gap: 10px; padding: 12px; min-height: 44px; border-radius: var(--sn-radius-sm); color: var(--sn-ink); font-size: 16px; }
.mobile-drawer-list li a:hover { background: var(--sn-row-selected); }
.mobile-drawer-list .mega-menu-count { margin-left: auto; }
.mobile-drawer-list--secondary { border-top: 1px solid var(--sn-border-soft); padding-top: 8px; margin-top: 8px; }
.mobile-drawer-list--secondary li a { font-size: 15px; color: var(--sn-text-secondary); }

@media (max-width: 1024px) {
  .mega-menu { left: -20px; right: 20px; }
}
@media (max-width: 768px) {
  .site-header-inner { padding: 12px 16px; gap: 16px; }
  /* Bug trouve en verifiant le tiroir mobile (Lot 2) : .search-trigger cible
     aussi bien le bouton du header desktop que le bouton "recherche" en pleine
     largeur DANS le tiroir (search-trigger--full) -- masquer .search-trigger
     sans scope rendait ce 2e bouton invisible en mobile (jamais remarque avant,
     rien ne testait le tiroir en navigateur reel jusqu'ici). Scope au header
     seul pour ne pas emporter celui du tiroir avec. */
  .site-nav, .site-header-actions .search-trigger, .btn-favoris { display: none; }
  .drawer-trigger { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--sn-ink); }
}

/* Recherche enrichie */
.search-panel { position: fixed; inset: 0; z-index: 30; background: var(--sn-surface); overflow-y: auto; }
/* t-modal (transitions.dev) : scale-up centre au lieu d'un show/hide
   instantane -- reste dans le DOM (inert quand ferme, cf site.js). */
.search-panel.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition: transform var(--modal-open-dur) var(--modal-ease), opacity var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.search-panel.t-modal.is-open { transform: scale(1); opacity: 1; pointer-events: auto; }
.search-panel.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition: transform var(--modal-close-dur) var(--modal-ease), opacity var(--modal-close-dur) var(--modal-ease);
}
@media (prefers-reduced-motion: reduce) { .t-modal { transition: none !important; } }
.search-panel-inner { max-width: 1100px; margin: 0 auto; padding: 24px 48px 48px; }
.search-panel-bar { display: flex; align-items: center; gap: 24px; padding: 16px 24px; background: var(--sn-card); border-radius: var(--sn-radius-lg); box-shadow: var(--sn-shadow-panel); }
.search-field { flex: 1; position: relative; display: flex; align-items: center; gap: 10px; }
.search-input { flex: 1; border: 1.5px solid var(--sn-border); border-radius: var(--sn-radius-md); padding: 10px 14px; font-size: 15px; }
.search-input:focus { border-color: var(--sn-green); box-shadow: 0 0 0 4px var(--sn-green-halo); outline: none; }
.search-count { font-family: var(--sn-font-mono); font-size: 12px; color: var(--sn-text-faint); white-space: nowrap; }
.search-reset { font-size: 20px; color: var(--sn-text-muted); }
.search-close { font-size: 14px; font-weight: 500; color: var(--sn-text); white-space: nowrap; }
.search-results { margin-top: 24px; }
.search-section-label { font-family: var(--sn-font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sn-text-faint); margin: 20px 0 10px; }
.search-suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.search-suggestion { font-size: 13px; border: 1px solid var(--sn-border); border-radius: var(--sn-radius-pill); padding: 6px 12px; }
.search-result-row { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--sn-radius-sm); border: 1px solid transparent; }
.search-result-row:hover { border-color: var(--sn-ink); background: var(--sn-surface); }
.search-result-row img { width: 48px; height: 48px; object-fit: contain; border-radius: var(--sn-radius-sm); }
.search-result-title { flex: 1; font-size: 15px; color: var(--sn-ink); }
.search-result-price { font-family: var(--sn-font-mono); font-weight: 700; font-size: 15px; }
.search-empty { color: var(--sn-text-muted); font-size: 14px; padding: 20px 0; }

@media (max-width: 768px) {
  .search-panel-inner { padding: 16px 16px 32px; }
  .search-panel-bar { flex-wrap: wrap; padding: 12px 16px; }
}

/* Footer riche */
.site-footer { background: var(--sn-dark); color: var(--sn-on-dark); margin-top: 64px; }
.footer-band { max-width: 1440px; margin: 0 auto; padding: 32px 48px; border-top: 1px solid var(--sn-dark-divider); }
.footer-band:first-child { border-top: none; }
.footer-engagements { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer-engagement { display: flex; gap: 12px; }
.footer-engagement-title { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.footer-engagement-text { font-size: 13px; color: var(--sn-on-dark-secondary); margin: 0; }
.footer-col-label { font-family: var(--sn-font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sn-on-dark-tertiary); margin: 0 0 12px; }
.footer-guide-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-guide-list a { color: var(--sn-on-dark-link); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.footer-guide-list a:hover { color: var(--sn-green-light); }
.footer-content-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px 24px; align-items: start; }
.footer-brand { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; }
.footer-disclosure { font-size: 13px; color: var(--sn-on-dark-secondary); max-width: 46ch; margin: 14px 0; }
.footer-chips { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sn-font-mono); font-size: 11px; color: var(--sn-on-dark-tertiary); }
.footer-col a { display: block; color: var(--sn-on-dark-link); font-size: 14px; }
.footer-col a:hover { color: var(--sn-green-light); }
.footer-partners-label { font-family: var(--sn-font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sn-on-dark-tertiary); text-align: center; margin: 0 0 12px; }
.footer-partners-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; }
.footer-partners-grid a { font-size: 12px; color: var(--sn-on-dark-tertiary); border: 1px solid var(--sn-dark-border); border-radius: var(--sn-radius-pill); padding: 5px 12px; }
.footer-partners-grid a:hover { color: var(--sn-on-dark-link); border-color: var(--sn-on-dark-tertiary); }
.footer-partners-grid a[hidden] { display: none; }
.footer-partners-more { display: block; margin: 12px auto 0; background: none; border: none; font-family: var(--sn-font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--sn-on-dark-tertiary); cursor: pointer; padding: 6px 12px; }
.footer-partners-more:hover { color: var(--sn-on-dark-link); }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; font-family: var(--sn-font-mono); font-size: 11px; color: var(--sn-on-dark-tertiary); }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.footer-legal-links a { color: var(--sn-on-dark-tertiary); }
.footer-legal-note { flex-basis: 100%; }

@media (max-width: 768px) {
  .footer-band { padding: 24px 16px; }
  .footer-engagements { grid-template-columns: 1fr; gap: 16px; }
  .footer-brand { grid-template-columns: 1fr; gap: 20px; }
  .footer-content-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* Guide comparatif : intro + podium */
.guide { max-width: 1200px; margin: 0 auto; padding: 40px 48px 0; }
.breadcrumb { font-family: var(--sn-font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sn-text-muted); margin-bottom: 16px; }
.breadcrumb-current { color: var(--sn-green); }
.guide-intro { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; padding-bottom: 40px; border-bottom: 1px solid var(--sn-border-soft); }
.guide-intro h1 { font-size: 56px; line-height: 0.98; letter-spacing: -0.025em; margin-bottom: 16px; }
.guide-intro h1 em { font-style: italic; }
.guide-intro .intro { font-size: 18px; line-height: 1.6; color: var(--sn-text-secondary); max-width: 60ch; }
.guide-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 13px; color: var(--sn-text-muted); margin: 14px 0 0; }
.guide-byline .ph { vertical-align: -2px; margin-right: 4px; }
.guide-byline-bio { font-size: 13px; color: var(--sn-text-faint); margin: 4px 0 0; }
.related-guides { font-size: 13px; color: var(--sn-text-faint); margin: 10px 0 0; }
.related-guides a { color: var(--sn-green-hover); text-decoration: underline; text-underline-offset: 2px; }
.brief-card { background: var(--sn-card); border: 1px solid var(--sn-border-soft); border-radius: var(--sn-radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.brief-row { display: flex; gap: 12px; align-items: flex-start; }
.brief-row--rank1 { color: var(--sn-amber); }
.brief-row--rank2 { color: var(--sn-green); }
.brief-row--rank3 { color: var(--sn-text-muted); }
.brief-label { font-size: 15px; font-weight: 700; color: var(--sn-ink); margin: 0 0 2px; }
.brief-value { font-size: 14px; font-weight: 400; color: var(--sn-text-muted); margin: 0; }

.podium { padding: 48px 0; }
.podium h2 { font-size: 34px; margin-bottom: 24px; }
.podium-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.podium-card { background: var(--sn-card); border: 1px solid var(--sn-border); border-radius: var(--sn-radius-xl); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.podium-card--rank1 { border-color: var(--sn-ink); border-width: 2px; }
.podium-badge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-family: var(--sn-font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 5px 10px; border-radius: var(--sn-radius-xs); background: var(--sn-border-softer); color: var(--sn-ink); }
.podium-card--rank1 .podium-badge { background: var(--sn-dark); color: var(--sn-on-dark); }
.podium-card--rank2 .podium-badge { background: var(--sn-amber); color: var(--sn-ink); }
.podium-card img { width: 100%; max-width: 210px; height: 160px; object-fit: contain; margin: 4px auto; }
.podium-card h3 { font-size: 19px; line-height: 1.15; }
.podium-blurb { font-size: 14px; color: var(--sn-text-secondary); flex: 1; }
.podium-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--sn-border-softer); }
.podium-footer .price { font-family: var(--sn-font-mono); font-size: 24px; font-weight: 700; }
.podium-footer .cta-amazon { display: inline-flex; align-items: center; gap: 6px; background: var(--sn-ink); color: var(--sn-on-dark); font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: var(--sn-radius-pill); white-space: nowrap; }
.podium-footer .cta-amazon:hover { background: var(--sn-dark); }

@media (max-width: 1024px) {
  .guide-intro { grid-template-columns: 1fr; }
  .podium-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .guide { padding: 24px 16px 0; }
  .guide-intro h1 { font-size: 40px; }
}

/* Guide comparatif : filtres, tableau, barre de comparaison */
.compare-section { padding: 8px 0 48px; }
.compare-section h2 { font-size: 34px; margin-bottom: 8px; }
.compare-note { font-size: 13px; color: var(--sn-text-muted); margin-bottom: 20px; }
.compare-filters { display: flex; flex-wrap: wrap; gap: 32px; background: var(--sn-card); border: 1px solid var(--sn-border-soft); border-radius: var(--sn-radius-lg); padding: 16px 20px; margin-bottom: 16px; }
.pill-group { position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pill-group-label { font-family: var(--sn-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sn-text-faint); margin-right: 4px; }
.pill { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; padding: 7px 13px; border-radius: var(--sn-radius-pill); border: 1px solid var(--sn-border); background: var(--sn-card); color: var(--sn-text); transition: color 0.18s ease, border-color 0.18s ease; }
.pill[aria-selected="true"] { background: transparent; border-color: transparent; color: var(--sn-on-dark); }

/* Curseur glissant derriere le bouton actif (t-tabs, transitions.dev, "Lot 1").
   translate(x,y) et pas seulement translateX : nos groupes de pilules (Type,
   surtout) wrappent sur plusieurs lignes en mobile/etroit, contrairement a
   l'exemple 1-ligne du skill. */
.pill-slider {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  background: var(--sn-ink);
  border-radius: var(--sn-radius-pill);
  pointer-events: none;
  transition: transform var(--tabs-dur) var(--tabs-ease), width var(--tabs-dur) var(--tabs-ease), height var(--tabs-dur) var(--tabs-ease);
}
.pill-slider--jump { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .pill-slider { transition: none; }
}

/* Carte blanche englobant le tableau (fidelite maquette, Tache "cadre vignettes") :
   sans elle, .compare-table est pose a nu sur le fond beige de la page, et chaque
   miniature produit (fond quasi blanc des photos Amazon) se detache en carre clair
   mal aligne. La carte blanche uniformise tout l'arriere-plan du tableau, les
   vignettes s'y fondent naturellement -- desactivee en mobile (< 900px) ou les
   lignes deviennent deja leurs propres cartes individuelles (voir plus bas), une
   carte englobante en plus y ferait un cadre-dans-le-cadre inutile.
   overflow: auto hidden (pas juste "hidden", bug trouve le 19/08/2026) : une
   categorie avec beaucoup de colonnes de specs (5 sur fer-a-repasser) peut depasser
   la largeur du conteneur -- avec un simple "hidden" le surplus etait coupe en
   silence (le bouton CTA, dernier a droite, disparaissait derriere le bord de la
   carte au lieu de rester visible). "auto hidden" garde le rognage vertical des
   coins arrondis (1ere valeur = overflow-x, 2e = overflow-y) mais fait apparaitre
   un scroll horizontal plutot que de couper le contenu quand ca ne rentre pas. */
.compare-table-wrap { background: var(--sn-card); border: 1px solid var(--sn-border-soft); border-radius: var(--sn-radius-lg); overflow: auto hidden; }
.compare-table { width: 100%; border-collapse: collapse; }
/* Padding horizontal resserre 16px -> 10px (retour Alex 19/08/2026) : sur une
   categorie a 5 colonnes de specs (fer-a-repasser), le tableau depassait de 54px
   la largeur de sa carte (le CTA "Voir le prix", dernier a droite, en etait
   coupe) -- 10px suffit a faire tenir 10 colonnes sans scroll horizontal, tout en
   restant lisible (verifie au navigateur). Le scroll auto sur .compare-table-wrap
   (voir plus haut) reste le filet de securite si une future categorie a encore
   plus de colonnes. */
.compare-table thead th { background: var(--sn-surface-alt); font-family: var(--sn-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sn-text-muted); text-align: left; padding: 12px 10px; }
.compare-table td { padding: 12px 10px; border-bottom: 1px solid var(--sn-border-softer); vertical-align: middle; }
.compare-table tr[hidden] { display: none; }
.compare-table tr.row-selected { background: var(--sn-row-selected); }
/* t-check (transitions.dev) : la case se remplit d'abord, puis la coche se
   dessine (stroke-dashoffset) -- remplace l'ancien ::after en coin de bordure
   (instantane). --check-len non fixe : la longueur reelle du path (~14.4)
   tient dans le defaut du skill (15), pas besoin de la recalculer. Structure
   commune desktop/mobile : .row-check est TOUJOURS la zone cliquable (22px
   desktop, 44px mobile via media query plus bas), .row-check-box est
   TOUJOURS la case visuelle 22x22 centree dedans -- un vrai noeud DOM (pas un
   ::before) puisque la coche est un <svg> reel, pas du contenu genere. */
.row-check { width: 22px; height: 22px; padding: 0; border: none; background: transparent; display: flex; align-items: center; justify-content: center; }
.row-check-box { width: 100%; height: 100%; border: 1.5px solid var(--sn-checkbox-border); border-radius: 5px; background: var(--sn-card); display: flex; align-items: center; justify-content: center; transition: background var(--check-box) var(--check-ease), border-color var(--check-box) var(--check-ease); }
.row-check[aria-checked="true"] .row-check-box { background: var(--sn-green); border-color: var(--sn-green); }
.row-check svg { width: 11px; height: 11px; overflow: visible; display: block; }
.row-check svg path { fill: none; stroke: var(--sn-on-dark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--check-len, 15); stroke-dashoffset: var(--check-len, 15); transition: stroke-dashoffset var(--check-uncheck) var(--check-ease); }
.row-check[aria-checked="true"] svg path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--check-draw) var(--check-ease) var(--check-delay); }
@media (prefers-reduced-motion: reduce) { .row-check-box, .row-check svg path { transition: none !important; } }
.row-product { display: flex; align-items: center; gap: 12px; }
.row-product img { width: 52px; height: 52px; object-fit: contain; }
.row-title { display: block; }
/* Chip marque (14/08/2026) : isole du titre (pipeline/brand_tag.py extrait la
   marque, src/_data/shoppingnet.js retire son prefixe du titre affiche) --
   badge passif distinct du .chip interactif (facette) et du .row-tag (label
   editorial vert type "Top choix"), gris neutre pour ne pas rivaliser avec eux. */
.brand-chip { display: inline-block; align-self: flex-start; font-family: var(--sn-font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--sn-text-muted); background: var(--sn-border-softer); border-radius: var(--sn-radius-xs); padding: 2px 7px; margin-bottom: 3px; }
/* display custom ci-dessus court-circuite le [hidden] natif du navigateur
   (meme piege deja corrige pour .footer-partners-grid a / .compare-table tr) --
   utilisee sur le hero home (data-hero-brand, cache quand le pick n'a pas de
   marque groundee). */
.brand-chip[hidden] { display: none; }
.row-tag { display: block; font-family: var(--sn-font-mono); font-size: 10px; color: var(--sn-green); margin-top: 2px; }
.row-rating { font-family: var(--sn-font-mono); font-weight: 700; white-space: nowrap; }
.row-rating .ph { color: var(--sn-amber); vertical-align: -2px; margin-right: 4px; }
.row-price { font-family: var(--sn-font-mono); font-weight: 700; }
.compare-table .cta-amazon { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; font-weight: 600; font-size: 14px; color: var(--sn-ink); border: 1.5px solid var(--sn-ink); border-radius: var(--sn-radius-pill); padding: 9px 16px; }
.compare-table .cta-amazon:hover { background: var(--sn-ink); color: var(--sn-on-dark); }

/* Format "carte rankee" (test fer-a-repasser, 19/08/2026) : liste verticale de
   cartes numerotees en remplacement du tableau, quand category.content.compare_layout
   vaut "cards" (comparateur.njk). Meme "carte blanche + bordure" que .compare-table-wrap
   pour chaque ligne plutot qu'un seul conteneur englobant : une categorie a specs
   variables (certains produits n'ont pas toutes les caracteristiques) n'a plus besoin
   de colonnes fixes ni de "-" pour les valeurs manquantes -- chaque carte n'affiche
   que ce qu'elle a reellement (voir .rank-card-specs:empty plus bas). */
.rank-list { display: flex; flex-direction: column; gap: 12px; }
.rank-card { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; background: var(--sn-card); border: 1px solid var(--sn-border-soft); border-radius: var(--sn-radius-lg); padding: 14px 20px; }
.rank-card[hidden] { display: none; }
/* Rang 1 discretement mis en avant, meme convention que .podium-card--rank1 --
   pas de nouvelle classe : data-rank est deja pose par comparateur.njk (filtrage JS). */
.rank-card[data-rank="1"] { border-color: var(--sn-ink); border-width: 2px; }
.rank-card-num { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-family: var(--sn-font-mono); font-weight: 700; font-size: 17px; background: var(--sn-surface-alt); border-radius: var(--sn-radius-sm); color: var(--sn-text-muted); }
/* Echo des couleurs du podium (.podium-card--rank1/2 .podium-badge, meme
   convention) sur les rangs 1-2 de la liste -- retour Alex 19/08/2026 : le
   badge numerique se lisait comme un vestige de checkbox, deconnecte du
   podium juste au-dessus qui distingue deja visuellement le top 3. Rang 3
   reste neutre : c'est deja le cas sur le podium (medal sans fond colore). */
.rank-card[data-rank="1"] .rank-card-num { background: var(--sn-dark); color: var(--sn-on-dark); }
.rank-card[data-rank="2"] .rank-card-num { background: var(--sn-amber); color: var(--sn-ink); }
.rank-card-img { flex-shrink: 0; width: 76px; height: 76px; object-fit: contain; background: var(--sn-surface-alt); border-radius: var(--sn-radius-sm); padding: 8px; }
.rank-card-body { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rank-card-title { font-size: 16px; line-height: 1.25; }
.rank-card-rating { font-family: var(--sn-font-mono); font-weight: 700; font-size: 14px; }
.rank-card-rating .ph { color: var(--sn-amber); vertical-align: -2px; margin-right: 4px; }
.rank-card-reviews { font-family: var(--sn-font-mono); font-weight: 400; color: var(--sn-text-muted); }
.rank-card-specs { display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; padding: 0; margin: 2px 0 0; font-size: 12.5px; color: var(--sn-text-muted); }
/* Aucune spec renseignee pour ce produit -> le <ul> reste vide (comparateur.njk
   ne rend pas de <li> quand specValue() renvoie "-") : :empty le retire du flux
   plutot que de laisser un vide/marge residuelle. */
.rank-card-specs:empty { display: none; }
.rank-card-specs strong { color: var(--sn-text); font-weight: 600; margin-right: 3px; }
.rank-card-footer { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-left: auto; }
.rank-card-price { font-family: var(--sn-font-mono); font-weight: 700; font-size: 17px; white-space: nowrap; }
.rank-card .cta-amazon { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; font-weight: 600; font-size: 14px; color: var(--sn-ink); border: 1.5px solid var(--sn-ink); border-radius: var(--sn-radius-pill); padding: 9px 16px; white-space: nowrap; }
.rank-card .cta-amazon:hover { background: var(--sn-ink); color: var(--sn-on-dark); }
@media (max-width: 900px) {
  /* Meme raisonnement que le tableau mobile plus bas : le footer (prix+CTA)
     passe sur sa propre ligne pleine largeur au lieu de se serrer a droite du
     titre -- width:100% force le wrap independamment de la place restante
     (contrairement a flex-wrap seul, qui n'aurait wrappe qu'en cas de manque
     de place, avec un titre ecrase en attendant). */
  .rank-card { padding: 14px; }
  .rank-card-img { width: 64px; height: 64px; }
  .rank-card-footer { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--sn-border-softer); }
  .rank-card .cta-amazon { flex: 1; max-width: 200px; }
}

/* Bouton "Voir les N autres modeles" (divulgation progressive, retour Alex
   19/08/2026) : style pointille volontairement discret (ni CTA plein ni
   pilule) pour ne pas rivaliser avec "Voir le prix" -- c'est une action de
   confort de lecture, pas l'action principale de la page. [hidden] doit etre
   redeclare explicitement (meme piege que .rank-card[hidden] plus haut) :
   sans ca, le display:flex ci-dessous l'emporterait sur le [hidden] natif. */
.btn-rank-expand { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 6px; padding: 14px; border: 1px dashed var(--sn-border); border-radius: var(--sn-radius-lg); background: transparent; font-weight: 600; font-size: 14px; color: var(--sn-ink); }
.btn-rank-expand:hover { background: var(--sn-card); border-style: solid; }
.btn-rank-expand[hidden] { display: none; }

/* t-toast (transitions.dev) : la barre reste dans le DOM (sticky, ne pousse
   rien) et se pilote par opacity/transform/blur au lieu d'un [hidden]
   instantane -- pointer-events desactives a l'etat ferme pour ne pas
   intercepter les clics sur le contenu qu'elle chevauche (position:sticky). */
.compare-bar { position: sticky; bottom: 16px; margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--sn-dark); border-radius: var(--sn-radius-lg); padding: 14px 18px; opacity: 0; pointer-events: none; transform: translateY(var(--toast-distance)) scale(var(--toast-scale)); filter: blur(var(--toast-blur)); transition: opacity var(--toast-close) var(--toast-ease), transform var(--toast-close) var(--toast-ease), filter var(--toast-close) var(--toast-ease); }
.compare-bar.is-open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); filter: blur(0); transition: opacity var(--toast-open) var(--toast-ease), transform var(--toast-open) var(--toast-ease), filter var(--toast-open) var(--toast-ease); }
@media (prefers-reduced-motion: reduce) { .compare-bar { transition: none !important; } }
.compare-bar-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.compare-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--sn-dark-surface); border: 1px solid var(--sn-dark-border); border-radius: var(--sn-radius-md); padding: 6px 10px; font-size: 13px; color: var(--sn-on-dark); }
.compare-chip button { color: var(--sn-on-dark-secondary); font-size: 15px; }
.btn-compare-cta { background: var(--sn-green-mid); color: var(--sn-dark); font-weight: 700; font-size: 13px; padding: 10px 18px; border-radius: var(--sn-radius-md); white-space: nowrap; }

/* Barre de comparaison mobile : les chips affichent le titre produit complet
   sans troncature (compare.js n'ecrit qu'un noeud texte), ce qui fait exploser
   la hauteur de la barre sticky en bas d'ecran sur mobile -- on tronque en
   ellipsis et on empile la barre en colonne. */
@media (max-width: 768px) {
  .compare-bar { flex-direction: column; align-items: stretch; }
  .compare-bar-chips { flex-direction: column; align-items: stretch; }
  .compare-chip {
    display: block;
    position: relative;
    max-width: 100%;
    padding: 12px 40px 12px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .compare-chip button {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .btn-compare-cta { width: 100%; }
}

@media (max-width: 900px) {
  .compare-table-wrap { background: transparent; border: none; border-radius: 0; overflow: visible; }
  .compare-table thead { display: none; }
  .compare-table, .compare-table tbody { display: block; width: 100%; }
  /* Chaque ligne devient une carte flex compacte : fond carte visible (avant,
     la ligne flottait sans fond sur le fond beige), paddings resserres (les
     td empiles avec leur padding desktop de 12px 16px montaient a ~366px de
     haut par produit), note et prix sur la meme ligne, CTA pleine largeur. */
  .compare-table tr { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; background: var(--sn-card); border: 1px solid var(--sn-border-soft); border-radius: var(--sn-radius-md); margin-bottom: 12px; padding: 14px; }
  .compare-table td { display: block; width: auto; padding: 0; border-bottom: none; }
  /* Retour Alex 18/08/2026 : carte trop haute + pas assez "plot produit
     classique" (image trop petite, collee au titre). La vignette redevient
     un bloc identifiable (fond + coins arrondis, 88px au lieu de 64px) a
     cote du titre au lieu d'au-dessus -- .row-product doit redeclarer
     explicitement display:flex, sinon la regle generique ".compare-table
     td" juste au-dessus (element+classe, plus specifique que le simple
     ".row-product { display:flex }" de la base desktop) l'emporte et empile
     image/texte verticalement. */
  .compare-table td.row-product { display: flex; align-items: flex-start; width: 100%; padding-right: 44px; margin-bottom: 4px; }
  .compare-table td.row-product > span { flex: 1; min-width: 0; }
  .row-product img { width: 88px; height: 88px; padding: 8px; background: var(--sn-surface-alt); border-radius: var(--sn-radius-sm); }
  /* Note + avis fusionnes sur une seule ligne (avis en petit via attr(),
     data-reviews pose par comparateur.njk) au lieu de deux lignes separees
     -- la cellule Avis dediee (utile seulement en colonne desktop) est
     masquee ici pour ne pas dupliquer l'info sur sa propre ligne. */
  .compare-table td.row-reviews { display: none; }
  .compare-table td.row-rating { margin-top: 6px; }
  .compare-table td.row-rating[data-reviews]::after { content: " (" attr(data-reviews) ")"; font-family: var(--sn-font-mono); font-weight: 400; font-size: 12px; color: var(--sn-text-muted); }
  .compare-table td.row-price { margin-left: auto; margin-top: 6px; font-size: 17px; }
  /* Sur mobile l'entete <thead> est masque (colonnes empilees en carte) : les
     cellules de specs (Assise/Accoudoirs/Charge) redeviennent ambigues sans
     leur libelle de colonne -- on le reaffiche en petit label au-dessus de
     la valeur via data-label, comme le montant/etoile restent lisibles par
     leur propre mise en forme (mono/€/icone) sans avoir besoin de label.
     Grille 2 colonnes (calc(50% - 7px), la moitie du column-gap de 14px du
     tr) au lieu d'1 colonne pleine largeur : c'etait la 1ere cause de
     hauteur (5 lignes de specs empilees, souvent a moitie vides). Les
     colonnes sans valeur taguee (.spec-empty, cf comparateur.njk) sont
     retirees du flux plutot que d'afficher un libelle sans donnee. */
  .compare-table td[data-label] { width: calc(50% - 7px); padding: 4px 0; }
  .compare-table td[data-label]::before { content: attr(data-label); display: block; font-family: var(--sn-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sn-text-faint); margin-bottom: 2px; }
  .compare-table td.spec-empty { display: none; }
  .compare-table td:last-child { width: 100%; margin-top: 6px; }
  .compare-table .cta-amazon { width: 100%; }
  /* Case a cocher : coin haut-droit de la carte via sa cellule hote sortie
     du flux (avant : .row-check absolue sans top/right restait a sa position
     statique et chevauchait la vignette produit). Zone cliquable 44x44,
     .row-check-box visuelle 22x22 centree par le flex du bouton. */
  .compare-table td:has(> .row-check) { position: absolute; top: 0; right: 0; width: 44px; height: 44px; padding: 0; }
  .row-check { position: static; width: 44px; height: 44px; }
  .row-check-box { width: 22px; height: 22px; }
}

/* Guide comparatif : criteres, guide d'achat, budgets, avis, FAQ */
.criteria { padding: 8px 0 48px; }
.criteria h2 { font-size: 30px; margin-bottom: 20px; }
.criteria-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* Guide catalogue (ecran-pc) : 6 cartes criteres au lieu de 4 -- repeat(4)
   laisserait une 2e ligne a moitie vide, on force 3 colonnes (grille 3x2 pleine). */
/* Grille 3 colonnes quand le nombre de criteres est un multiple de 3 au-dela
   de 4 (ex. 6 criteres ecran-pc) -- modifier pose par guide-content.njk. Une
   seule classe (specificite egale a .criteria-grid) pour que les media queries
   ci-dessous (2 puis 1 colonne) continuent de s'appliquer sur mobile. */
.criteria-grid--cols3 { grid-template-columns: repeat(3, 1fr); }
.criteria-card { background: var(--sn-card); border: 1px solid var(--sn-border-soft); border-radius: var(--sn-radius-lg); padding: 20px; }
.criteria-card h3 { font-size: 17px; margin: 12px 0 6px; }
.criteria-card p { font-size: 14px; color: var(--sn-text-secondary); }

.buying-guide { display: grid; grid-template-columns: 1fr 320px; gap: 40px; padding: 8px 0 48px; }
.buying-guide-text h2 { font-size: 30px; margin-bottom: 16px; }
.buying-guide-text p { font-size: 18px; line-height: 1.7; color: var(--sn-text); max-width: 68ch; margin-bottom: 16px; }
.buying-guide-toc { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 10px; align-self: start; }
.buying-guide-toc a { font-size: 14px; color: var(--sn-text-secondary); }
.buying-guide-toc a:hover { color: var(--sn-green); }

.budgets { padding: 8px 0 48px; }
.budgets h2 { font-size: 30px; margin-bottom: 20px; }
.budgets-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.budget-card { background: var(--sn-card); border: 1px solid var(--sn-border-soft); border-radius: var(--sn-radius-lg); padding: 16px; display: flex; gap: 14px; align-items: flex-start; }
.budget-thumb { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; }
.budget-body { flex: 1; min-width: 0; }
.budget-tier { font-family: var(--sn-font-mono); font-size: 11px; text-transform: uppercase; color: var(--sn-green); margin-bottom: 8px; }
.budget-card h3 { font-size: 17px; margin-bottom: 12px; }
.budget-footer { display: flex; align-items: center; justify-content: space-between; }
.budget-price { font-family: var(--sn-font-mono); font-size: 20px; font-weight: 700; }

.bonplan { padding: 0 0 48px; }
.bonplan-card { background: var(--sn-card); border: 1px solid var(--sn-green); border-radius: var(--sn-radius-xl); padding: 20px; display: flex; gap: 20px; align-items: center; }
.bonplan-thumb { width: 120px; height: 120px; object-fit: contain; flex-shrink: 0; }
.bonplan-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.bonplan-badge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-family: var(--sn-font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 5px 10px; border-radius: var(--sn-radius-xs); background: var(--sn-green); color: var(--sn-on-dark); }
.bonplan-card h3 { font-size: 22px; line-height: 1.15; }
.bonplan-note { font-size: 14px; color: var(--sn-text-secondary); }
.bonplan-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--sn-border-softer); }
.bonplan-footer .price { font-family: var(--sn-font-mono); font-size: 24px; font-weight: 700; }
.bonplan-footer .cta-amazon { display: inline-flex; align-items: center; gap: 6px; background: var(--sn-ink); color: var(--sn-on-dark); font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: var(--sn-radius-pill); white-space: nowrap; }
.bonplan-footer .cta-amazon:hover { background: var(--sn-dark); }

@media (max-width: 768px) {
  /* La carte restait en 2 colonnes (vignette + corps) : le footer, coince
     dans la colonne de droite trop etroite, faisait deborder le CTA de ~25px
     hors du viewport (scroll horizontal parasite sur toutes les pages guide).
     Empilement vertical en mobile, vignette centree. */
  .bonplan-card { flex-direction: column; align-items: stretch; }
  .bonplan-thumb { width: 140px; height: 140px; margin: 0 auto; }
}

.reviews { padding: 8px 0 48px; }
.reviews h2 { font-size: 30px; margin-bottom: 8px; }
.reviews-aggregate { font-size: 16px; color: var(--sn-text-secondary); margin-bottom: 20px; }
.reviews-score { font-family: var(--sn-font-mono); font-weight: 700; font-size: 20px; color: var(--sn-ink); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.review-card { background: var(--sn-card); border: 1px solid var(--sn-border-soft); border-radius: var(--sn-radius-lg); padding: 18px; }
.review-thumb { width: 88px; height: 88px; object-fit: contain; margin-bottom: 10px; }
.review-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--sn-green); }
.stars--amber { color: var(--sn-amber); letter-spacing: 0.1em; }
.star-rating { position: relative; display: inline-block; line-height: 1; vertical-align: -1px; }
.star-rating-track,
.star-rating-fill { display: block; white-space: nowrap; letter-spacing: inherit; }
.star-rating-track { color: var(--sn-border-strong); }
.star-rating-fill { position: absolute; inset: 0; width: var(--star-pct); overflow: hidden; color: inherit; }
.review-product { font-size: 15px; font-weight: 600; margin: 8px 0 4px; }
.review-count { font-size: 13px; color: var(--sn-text-muted); }

.faq { padding: 8px 0 64px; }
.faq h2 { font-size: 30px; margin-bottom: 20px; }
.faq-item { border-bottom: 1px solid var(--sn-border-soft); padding: 8px 0; }
.faq-item-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 8px 0; background: none; border: none;
  font-family: inherit; font-size: 17px; font-weight: 600; color: inherit;
  text-align: left; cursor: pointer;
}
.faq-item p { font-size: 16px; line-height: 1.65; color: var(--sn-text-secondary); }
/* t-acc (transitions.dev, accordion expand) : hauteur animee via
   grid-template-rows 0fr<->1fr, pas de mesure JS -- le chevron se retourne
   verticalement (v -> ^) au lieu d'un morph de path (Chromium-only). */
.t-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--acc-collapse) var(--acc-ease); }
.t-acc[data-open="true"] .t-acc-panel { grid-template-rows: 1fr; transition: grid-template-rows var(--acc-expand) var(--acc-ease); }
.t-acc-panel-inner { overflow: hidden; padding-top: 8px; opacity: 0; filter: blur(2px); transition: opacity var(--acc-collapse) var(--acc-ease), filter var(--acc-collapse) var(--acc-ease); }
.t-acc[data-open="true"] .t-acc-panel-inner { opacity: 1; filter: blur(0); transition: opacity var(--acc-expand) var(--acc-ease), filter var(--acc-expand) var(--acc-ease); }
.t-acc-chevron { display: inline-flex; flex-shrink: 0; color: var(--sn-text-muted); transform: scaleY(1); transform-origin: center; transition: transform var(--acc-chevron) var(--acc-ease); }
.t-acc-chevron path { vector-effect: non-scaling-stroke; }
.t-acc[data-open="true"] .t-acc-chevron { transform: scaleY(-1); }
@media (prefers-reduced-motion: reduce) {
  .t-acc-panel, .t-acc-panel-inner, .t-acc-chevron { transition: none !important; }
}

@media (max-width: 900px) {
  .criteria-grid, .budgets-grid, .reviews-grid { grid-template-columns: 1fr 1fr; }
  .buying-guide { grid-template-columns: 1fr; }
  .buying-guide-toc { position: static; }
}
@media (max-width: 600px) {
  .criteria-grid, .budgets-grid, .reviews-grid { grid-template-columns: 1fr; }
}

/* Ex "Guide catalogue : classement numerote" (.ranking-*) -- retire a la
   fusion des gabarits (14/08/2026), ecran-pc utilise desormais le meme
   podium a 3 cartes que chaise (.podium-*, plus haut), plus aucun gabarit ne
   genere de classement numerote complet. */

/* Comparateur unifie : "Plus de filtres" (facettes secondaires, cf plus bas) --
   .facets-clear/.facet-group/.facet-range restent d'avant la fusion des
   gabarits (14/08/2026), reutilises tels quels dans le nouvel accordeon. Le
   reste de l'ancienne sidebar de facettes/grille de cartes (.catalogue-layout,
   .facets, .facets-header, .facet-options/.facet-option, .catalogue-toolbar/
   sort/head*/grid/card*) a ete retire : plus aucun gabarit ne le genere
   depuis que comparateur.njk remplace l'ancienne grille catalogue. */
.facets-clear { font-size: 13px; color: var(--sn-green); }
.facet-group h3 { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--sn-text); margin-bottom: 10px; }
.facet-range { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.facet-range input, .facet-group select { flex: 1; border: 1px solid var(--sn-border); border-radius: var(--sn-radius-sm); padding: 6px 8px; }

/* Boutons de choix multiple (Coloris, facettes secondaires multiselect) --
   jamais stylees avant la fusion des gabarits (14/08/2026), la sidebar
   d'origine les laissait en bouton par defaut du navigateur. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: var(--sn-radius-pill); border: 1px solid var(--sn-border); background: var(--sn-card); color: var(--sn-text); transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.chip.active { background: var(--sn-ink); border-color: var(--sn-ink); color: var(--sn-on-dark); }

/* "Plus de filtres" (t-acc, comparateur unifie) : panneau replie par defaut,
   les facettes secondaires (peu consultees) n'encombrent pas la rangee de
   pilules principale. Grille plutot que pile verticale (l'ancien
   .facet-group premier-sans-bordure etait pense pour une sidebar) --
   surcharge la bordure/marge here pour que chaque groupe reste une carte
   independante dans la grille. */
.btn-more-filters { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: var(--sn-radius-pill); border: 1px dashed var(--sn-border); color: var(--sn-text-secondary); background: transparent; }
.btn-more-filters[aria-expanded="true"] { border-style: solid; color: var(--sn-text); }
.more-filters[data-open="true"] { margin-top: 12px; }
.more-filters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; background: var(--sn-card); border: 1px solid var(--sn-border-soft); border-radius: var(--sn-radius-lg); padding: 20px; }
.more-filters-grid .facet-group { border-top: none; margin-top: 0; padding-top: 0; }
.more-filters .facets-clear { display: inline-block; margin-top: 12px; }

@media (max-width: 900px) {
  .ranking-row { grid-template-columns: 44px 74px 1fr; }
  .ranking-side { grid-column: 2 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; text-align: left; }
}

.disclosure { max-width: 1200px; margin: 0 auto; padding: 0 48px 48px; font-size: 13px; color: var(--sn-text-muted); }

.sitemap-page { max-width: 900px; margin: 0 auto; padding: 48px 48px 80px; }
.sitemap-page h1 { font-size: 32px; margin-bottom: 32px; }
.sitemap-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.sitemap-group ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sitemap-group a { color: var(--sn-text); }
.sitemap-group a:hover { color: var(--sn-green); }
@media (max-width: 720px) {
  .sitemap-page { padding: 32px 24px 56px; }
  .sitemap-groups { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 768px) { .disclosure { padding: 0 16px 32px; } }

/* Home */
/* align-items:start (au lieu du stretch par defaut d'une grille CSS) : sans
   ca, .hero-visual s'etirait pour egaler la hauteur de .hero-main (titre +
   sous-titre + recherche), qui varie avec la largeur d'ecran/le nombre de
   lignes du H1 -- la boite grandissait sans que la photo suive, laissant un
   vide grandissant au-dessus/en dessous de l'image selon l'ecran. */
.hero { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 32px; padding: 64px 48px 56px; align-items: start; }
.hero-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sn-font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sn-text-muted); margin-bottom: 20px; }
.hero-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sn-green); }
.hero h1 { font-size: 64px; line-height: 0.98; letter-spacing: -0.025em; text-wrap: balance; }
.hero h1 em { font-style: italic; color: var(--sn-green); }
.hero-subtitle { font-size: 18px; color: var(--sn-text-secondary); max-width: 520px; margin: 20px 0 28px; }
.hero-search { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 560px; background: var(--sn-card); border: 1px solid var(--sn-border); border-radius: var(--sn-radius-lg); padding: 10px 10px 10px 20px; margin-bottom: 28px; color: var(--sn-text-muted); }
.hero-search:hover, .hero-search:focus-visible { border-color: var(--sn-green); box-shadow: 0 0 0 4px var(--sn-green-halo); outline: none; }
.hero-search-placeholder { flex: 1; text-align: left; font-size: 15px; }
.hero-search-cta { background: var(--sn-green); color: var(--sn-on-dark); font-weight: 600; font-size: 14px; padding: 10px 20px; border-radius: var(--sn-radius-md); white-space: nowrap; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 20px; }
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--sn-text-secondary); }
/* Carousel simple (remplace le "dual fan", retour Alex 19/08/2026 : "joli
   mais peu utilisable" -- seule la carte de tete du fan etait vraiment
   lisible, et le cycle au clic sur la pile n'etait pas decouvrable). Une
   seule carte visible a la fois (empilees en position:absolute, meme boite),
   fleches + points de pagination explicites, crossfade au changement.
   Sans JS : seule la 1ere carte (classe is-active des le rendu serveur,
   les autres portent l'attribut hidden natif) est affichee -- degrade
   proprement, comme le fan avant elle. */
.hero-visual { position: relative; display: block; }
.hero-carousel { position: relative; width: 320px; margin-left: auto; }
.hero-carousel-track { position: relative; height: 452px; }
.hero-carousel-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--sn-card);
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius-xl);
  box-shadow: var(--sn-shadow-float);
  opacity: 0;
  pointer-events: none;
}
/* is-active pose des le rendu serveur sur la 1ere carte (voir index.njk) --
   fonctionne donc identiquement avec ou sans JS. Le JS (site.js) se contente
   de deplacer cette classe au clic sur une fleche/un point ou au cycle auto.
   Changement INSTANTANE, sans transition CSS (bug trouve au navigateur,
   19/08/2026) : avec 9 cartes empilees en position:absolute partageant la
   meme regle de transition sur opacity, Chrome perdait le fil apres le tout
   premier changement -- les cartes suivantes gardaient un opacity fige
   (reproduit de facon fiable, teste sans aucun timer d'auto-avance en cause,
   corrige uniquement en supprimant la transition). Pas grave pour un
   changement de carte, deja instantane egalement sur la plupart des
   carousels du marche. */
.hero-carousel-card.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
.hero-carousel-media { padding: 18px 18px 0; }
.hero-carousel-media img { display: block; width: 100%; height: 218px; object-fit: contain; }
/* La zone info comble tout le bas de la carte (flex:1) et le CTA guide est
   pousse en bas (margin-top:auto) : plus de vide sous le contenu. */
.hero-carousel-info { flex: 1; display: flex; flex-direction: column; padding: 10px 18px 18px; }
.hero-carousel-info .footer-col-label { margin: 0 0 8px; }
.hero-carousel-info .brand-chip { margin-bottom: 8px; }
.hero-carousel-info .brief-value { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; font-weight: 600; color: var(--sn-ink); line-height: 1.35; }
/* Fleches prev/next : memes proportions/position que l'ancien bouton
   "suivant" du fan, dupliquees de chaque cote de la carte. */
.hero-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sn-card);
  border: 1px solid var(--sn-border);
  border-radius: 50%;
  color: var(--sn-text-muted);
  box-shadow: var(--sn-shadow-float);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.hero-carousel-arrow:hover, .hero-carousel-arrow:focus-visible { color: var(--sn-green); border-color: var(--sn-green); outline: none; }
.hero-carousel-arrow--prev { left: -16px; }
.hero-carousel-arrow--next { right: -16px; }
/* Points de pagination, sous la carte (deborde volontairement du bas de
   .hero-carousel-track, meme logique que le bouton "suivant" du fan avant). */
.hero-carousel-dots { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); z-index: 2; display: flex; gap: 8px; }
.hero-carousel-dot { width: 8px; height: 8px; padding: 0; border-radius: 50%; background: var(--sn-border); transition: background 0.18s ease, transform 0.18s ease; }
.hero-carousel-dot[aria-selected="true"] { background: var(--sn-green); transform: scale(1.3); }
.hero-carousel-dot:hover, .hero-carousel-dot:focus-visible { background: var(--sn-text-muted); outline: none; }
.hero-float-price { font-family: var(--sn-font-mono); font-weight: 700; font-size: 19px; margin-top: 10px; }
.hero-guide-cta { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--sn-green); margin-top: auto; padding-top: 12px; border-top: 1px solid var(--sn-border-softer); }

.home-categories, .home-guides, .home-selection { max-width: 1440px; margin: 0 auto; padding: 40px 48px; border-top: 1px solid var(--sn-border-soft); }
.home-categories h2, .home-guides h2, .home-selection h2 { font-size: 34px; margin-bottom: 24px; }
.home-categories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.category-card { background: var(--sn-card); border: 1px solid var(--sn-border-soft); border-radius: var(--sn-radius-lg); padding: 20px 18px; transition: transform 0.18s ease; }
.category-card:hover { transform: translateY(-3px); }
.category-card-name { font-size: 15px; font-weight: 600; color: var(--sn-ink); margin-top: 14px; }
.category-card-count { font-family: var(--sn-font-mono); font-size: 11px; color: var(--sn-text-faint); margin-top: 4px; }
.category-card--soon { opacity: 0.5; cursor: default; }
.category-card--soon:hover { transform: none; }

.home-guides-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.guide-teaser-image { display: block; aspect-ratio: 3 / 2; background: var(--sn-surface-alt); border-radius: var(--sn-radius-lg); overflow: hidden; margin-bottom: 16px; }
.guide-teaser-image img { width: 100%; height: 100%; object-fit: cover; }
.guide-teaser h3 { font-size: 24px; margin-bottom: 8px; }
.guide-teaser h3 a { color: var(--sn-ink); }
.guide-teaser-intro { font-size: 14px; color: var(--sn-text-secondary); margin-bottom: 8px; }
.guide-teaser-meta { font-family: var(--sn-font-mono); font-size: 11px; color: var(--sn-text-faint); }

.home-selection-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.selection-card { background: var(--sn-card); border: 1px solid var(--sn-border-soft); border-radius: var(--sn-radius-lg); padding: 16px; display: flex; flex-direction: column; transition: transform 0.18s ease; }
.selection-card:hover { transform: translateY(-3px); }
.selection-card-media { display: flex; align-items: center; justify-content: center; height: 150px; margin-bottom: 12px; }
.selection-card-media img { max-height: 100%; object-fit: contain; }
.selection-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.selection-card-head .brand-chip { margin: 0; }
.selection-card-rating { display: inline-flex; align-items: center; gap: 4px; font-family: var(--sn-font-mono); font-size: 13px; font-weight: 700; color: var(--sn-amber); }
.selection-card-rating span { font-weight: 400; color: var(--sn-text-muted); }
.selection-card-title { font-size: 15px; font-weight: 600; line-height: 1.3; margin-bottom: 10px; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.selection-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--sn-border-softer); }
.selection-card .price { font-family: var(--sn-font-mono); font-size: 20px; font-weight: 700; }
.selection-card .cta-amazon { display: inline-flex; align-items: center; background: var(--sn-ink); color: var(--sn-on-dark); border-radius: var(--sn-radius-pill); padding: 8px 14px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.selection-card .cta-amazon:hover { background: var(--sn-dark); }

.home-tests-blog { max-width: 1440px; margin: 0 auto; padding: 40px 48px; border-top: 1px solid var(--sn-border-soft); display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; }
.home-tests-blog h2 { font-size: 34px; margin-bottom: 24px; }
.coming-soon-card { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; background: var(--sn-surface-alt); border: 1px dashed var(--sn-border); border-radius: var(--sn-radius-lg); padding: 40px 24px; color: var(--sn-text-muted); }
.coming-soon-card p { font-size: 15px; margin: 0; }

/* Cartes article (home "Derniers tests" / "Le blog") : sobres, sans ombre,
   calquees sur le langage .category-card (bord fin, leger lift au survol). */
.article-card-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.article-card { display: flex; align-items: center; gap: 16px; background: var(--sn-card); border: 1px solid var(--sn-border-soft); border-radius: var(--sn-radius-lg); padding: 18px 20px; transition: transform 0.18s ease; }
.article-card:hover { transform: translateY(-2px); }
/* Vignette "image a la une" (front matter image: des articles) : photos
   Amazon sur fond blanc, fond de carte blanc aussi -- pas besoin de cadre. */
.article-card-thumb { flex: 0 0 92px; height: 92px; display: flex; align-items: center; justify-content: center; }
.article-card-thumb img { max-width: 92px; max-height: 92px; width: auto; height: auto; }
.article-card-text { flex: 1; min-width: 0; }
.article-card .footer-col-label { margin: 0 0 6px; }
.article-card-title { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--sn-ink); margin: 0 0 6px; }
.article-card-excerpt { font-size: 14px; color: var(--sn-text-secondary); margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article-card-meta { font-family: var(--sn-font-mono); font-size: 11px; color: var(--sn-text-faint); margin: 0; }

/* Page article (src/_includes/article.njk) : colonne prose etroite et
   confortable, ancree sur les tokens. */
.article-page { max-width: 720px; margin: 0 auto; padding: 40px 48px 48px; }
/* Sidebar "produits mentionnes" (19/08/2026) : la page ne s'elargit QUE
   quand une sidebar existe reellement (relatedProducts.length), sinon la
   colonne prose etroite ci-dessus reste inchangee (tests + posts blog sans
   produit catalogue). Meme grille/rail sticky que .buying-guide/
   .buying-guide-toc (deja en prod sur les guides), zero nouveau pattern. */
.article-page--with-sidebar { max-width: 1080px; }
.article-layout { display: block; }
.article-page--with-sidebar .article-layout { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
.article-related { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 12px; background: var(--sn-card); border: 1px solid var(--sn-border-soft); border-radius: var(--sn-radius-lg); padding: 20px; }
.article-related .brief-row { text-decoration: none; }
.article-related-thumb { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: var(--sn-radius-xs); flex-shrink: 0; }
@media (max-width: 900px) {
  .article-page--with-sidebar .article-layout { grid-template-columns: 1fr; }
  .article-related { position: static; }
}
.article-breadcrumb { font-size: 13px; color: var(--sn-text-muted); margin-bottom: 28px; }
.article-breadcrumb a { color: var(--sn-text-secondary); }
.article-breadcrumb a:hover { color: var(--sn-ink); }
.article-breadcrumb-sep { margin: 0 6px; color: var(--sn-text-faint); }
.article-header { margin-bottom: 32px; }
.article-header .footer-col-label { margin: 0 0 8px; }
.article-header h1 { font-size: 40px; line-height: 1.15; margin: 0 0 12px; }
.article-meta { font-size: 13px; color: var(--sn-text-muted); margin: 0; }
.article-body { font-size: 16px; line-height: 1.75; color: var(--sn-text); }
.article-body h2 { font-size: 26px; line-height: 1.25; margin: 40px 0 12px; }
.article-body h3 { font-size: 20px; line-height: 1.3; margin: 32px 0 10px; }
.article-body p, .article-body ul, .article-body ol { margin: 0 0 18px; }
.article-body ul, .article-body ol { padding-left: 24px; }
.article-body li { margin-bottom: 6px; }
.article-body strong { color: var(--sn-ink); }
.article-body a { color: var(--sn-green-hover); text-decoration: underline; text-underline-offset: 2px; }
.article-body blockquote { margin: 0 0 18px; padding: 4px 0 4px 16px; border-left: 3px solid var(--sn-border-strong); color: var(--sn-text-secondary); font-style: italic; }
.article-body table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 14px; }
.article-body th, .article-body td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--sn-border-soft); }
.article-body th { font-weight: 600; color: var(--sn-ink); }
.article-body img { max-width: 100%; height: auto; border-radius: var(--sn-radius-md); }
/* Encadre editorial utilisable depuis le markdown via
   <div class="article-callout"> : fond leger, bord gauche accent. */
.article-body .article-callout, .article-callout { background: var(--sn-surface-alt); border-left: 3px solid var(--sn-green); border-radius: var(--sn-radius-sm); padding: 14px 18px; margin: 0 0 24px; }
.article-callout p:last-child { margin-bottom: 0; }
/* Visuel hero d'article (front matter image:) : photos produits Amazon sur
   fond blanc, portrait ou paysage -- on borne la hauteur et on centre sur
   une carte blanche pour un rendu uniforme quelle que soit la photo. */
.article-hero { margin: 0 0 28px; background: #fff; border: 1px solid var(--sn-border-soft); border-radius: var(--sn-radius-md); padding: 20px; text-align: center; }
.article-hero img { max-width: 100%; max-height: 400px; width: auto; height: auto; display: inline-block; }
.article-hero figcaption { margin-top: 10px; font-size: 12px; color: var(--sn-text-secondary); }
/* Embed video responsive dans le corps d'un article (ratio 16/9 conserve,
   meme légende que le hero). */
.article-video { margin: 0 0 28px; }
.article-video .article-video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--sn-radius-md); overflow: hidden; border: 1px solid var(--sn-border-soft); background: #000; }
.article-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.article-video figcaption { margin-top: 10px; font-size: 12px; color: var(--sn-text-secondary); text-align: center; }
/* Placeholder click-to-play : l'iframe YouTube n'est chargee qu'au clic
   (perf + vie privee). Le bouton couvre tout le frame, icone play centree. */
.article-video-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.article-video-play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.article-video-play::after { content: ""; position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(0, 0, 0, 0.65) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 34px no-repeat; transition: background-color 0.15s ease, transform 0.15s ease; }
.article-video-play:hover::after, .article-video-play:focus-visible::after { background-color: rgba(0, 0, 0, 0.85); transform: translate(-50%, -50%) scale(1.06); }
/* La .disclosure globale est calee sur le container 1200px des pages guide ;
   dans la colonne article on la resserre et on la detache du corps. */
.article-page .disclosure { max-width: none; margin: 32px 0 0; padding: 24px 0 0; border-top: 1px solid var(--sn-border-soft); }

@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; padding: 40px 24px; }
  .hero-carousel { margin: 8px auto 0; }
  .home-tests-blog { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 768px) {
  .hero h1 { font-size: 40px; }
  /* Carousel simple (retour Alex 19/08/2026, remplace le "dual fan" -- voir
     desktop plus haut) : une seule carte a la fois, meme comportement qu'en
     desktop, juste une boite plus etroite pour tenir dans le viewport. */
  .hero-carousel { width: 290px; }
  .hero-carousel-track { height: 436px; }
  .home-categories, .home-guides, .home-selection, .home-tests-blog { padding: 28px 16px; }
  .home-categories-grid { grid-template-columns: repeat(2, 1fr); }
  .article-page { padding: 28px 16px 32px; }
  .article-header h1 { font-size: 30px; }
  /* Tableaux comparatifs des articles : scroll horizontal au lieu de
     deborder du viewport (recette mobile 16/08/2026, table 491px > 390px). */
  .article-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Cibles tactiles mobiles >= 44px (Tache 14) */
@media (max-width: 768px) {
  .pill,
  .chip,
  .btn-more-filters,
  .btn-compare-cta,
  .search-close,
  .facets-clear,
  .footer-partners-grid a,
  .footer-partners-more,
  .search-suggestion,
  .cta-amazon {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .drawer-close,
  .search-reset {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}