/*
Theme Name: Robodomus v10
Theme URI: https://robodomus.fr
Description: Thème de Robodomus, service d'alertes de bon prix pour les robots domestiques. Présentation seulement : les données et les API vivent dans l'extension robodomus-core.
Author: Benjamin Martinie
Version: 10.0.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: robodomus
*/

/* ========================================================================
   TOKENS — la seule source des valeurs. Aucune couleur en dur ailleurs.
   Régénérer docs/TOKENS.md après toute modification :
   python3 tools/gen-tokens.py
   ======================================================================== */
:root {
  /* Fonds et filets */
  --rd-bg: #F5F5F3;
  --rd-surface: #FFFFFF;
  --rd-border: rgba(11,11,15,.10);
  --rd-border-s: rgba(11,11,15,.18);
  --rd-border-ui: #767676; /* contour des champs : 3:1 minimum exigé pour un élément d'interface */

  /* Encre */
  --rd-text: #0B0B0F;
  --rd-text-2: #3D3D3D;
  --rd-text-3: #6B6B6B; /* le plus clair des textes : 4,9:1 sur le fond de page */
  --rd-on-cyan: #FFFFFF; /* texte sur le bouton plein */

  /* Accent unique : le bleu. Le texte et les boutons pleins prennent la teinte foncée */
  --rd-cyan: #00AEEF; /* filets, illustrations, fonds teintés. Jamais du texte */
  --rd-cyan-dim: rgba(0,174,239,.10);
  --rd-cyan-dk: #006E9E; /* texte, liens, bouton plein, anneau de focus : AA sur blanc et sur le fond */
  --rd-cyan-dkr: #005A82; /* survol et appui du bouton plein */

  /* Verdict prix : trois états, toujours écrits en toutes lettres à côté de la couleur */
  --rd-prix-bon: #1D7A4A;
  --rd-prix-bon-bg: #E8F2ED;
  --rd-prix-habituel: #9A5B00;
  --rd-prix-habituel-bg: #F5EFE6;
  --rd-prix-cher: #C0392B;
  --rd-prix-cher-bg: #F9EBEA;

  /* Typographie */
  --rd-font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --rd-font-body: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rd-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --rd-fs-sm: .875rem;
  --rd-fs-base: 1rem;
  --rd-fs-lg: 1.1875rem;
  --rd-fs-h3: 1.375rem;
  --rd-fs-h2: 1.625rem;
  --rd-fs-h1: 2.125rem;
  --rd-fs-display: 2.5rem;
  --rd-lh: 1.55;
  --rd-lh-tight: 1.15;

  /* Espacements */
  --rd-space-1: 4px;
  --rd-space-2: 8px;
  --rd-space-3: 12px;
  --rd-space-4: 16px;
  --rd-space-5: 24px;
  --rd-space-6: 32px;
  --rd-space-7: 48px;
  --rd-space-8: 72px;

  /* Mise en page */
  --rd-wrap: 1240px;
  --rd-reading: 760px;
  --rd-gutter: 16px;
  --rd-header-h: 56px;
  --rd-tap: 48px;
  --rd-radius: 10px;
  --rd-radius-sm: 6px;
  --rd-radius-pill: 999px;
}

@media (min-width: 640px) {
  :root {
    --rd-fs-h2: 1.875rem;
    --rd-fs-h1: 2.625rem;
    --rd-fs-display: 3.25rem;
    --rd-gutter: 24px;
  }
}

/* ========================================================================
   POLICES — hébergées par le thème (aucune requête vers Google)
   Sous-ensemble latin, axe de graisse seul. Licences : assets/fonts/LICENSE-*
   ======================================================================== */
@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/fraunces-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/space-grotesk-latin-wght-normal.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('assets/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ========================================================================
   BASE
   ======================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--rd-bg);
  color: var(--rd-text);
  font-family: var(--rd-font-body);
  font-size: var(--rd-fs-base);
  line-height: var(--rd-lh);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

h1, h2, h3, h4 {
  margin: 0 0 var(--rd-space-3);
  font-family: var(--rd-font-serif);
  font-weight: 500;
  line-height: var(--rd-lh-tight);
  color: var(--rd-text);
}
h1 { font-size: var(--rd-fs-h1); }
h2 { font-size: var(--rd-fs-h2); }
h3 { font-size: var(--rd-fs-h3); }
h4 { font-size: var(--rd-fs-lg); }

p { margin: 0 0 var(--rd-space-4); }

a {
  color: var(--rd-cyan-dk);
  text-decoration: underline;
  text-underline-offset: .15em;
}
a:hover { text-decoration-thickness: 2px; }

/* Focus : visible partout, jamais retiré. Le bleu foncé passe 3:1 sur tous les fonds. */
:focus-visible {
  outline: 2px solid var(--rd-cyan-dk);
  outline-offset: 2px;
}

/* Chiffres, dates, heures de relevé, étiquettes */
.rd-mono, time, .rd-price {
  font-family: var(--rd-font-mono);
  font-variant-numeric: tabular-nums;
}

.rd-label {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-fs-sm);
  color: var(--rd-text-3);
  letter-spacing: .02em;
}

.rd-visually-hidden {
  position: absolute !important; /* masquage accessible : seule exception documentée */
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Lien d'évitement */
.rd-skip {
  position: absolute;
  left: var(--rd-space-4);
  top: -100px;
  z-index: 100;
  padding: var(--rd-space-3) var(--rd-space-4);
  background: var(--rd-surface);
  color: var(--rd-text);
  border: 2px solid var(--rd-cyan-dk);
  border-radius: var(--rd-radius-sm);
}
.rd-skip:focus { top: var(--rd-space-3); }

/* ========================================================================
   MISE EN PAGE
   ======================================================================== */
.rd-wrap {
  width: 100%;
  max-width: var(--rd-wrap);
  margin-inline: auto;
  padding-inline: var(--rd-gutter);
}
.rd-reading { max-width: var(--rd-reading); }

.rd-main { min-height: 60vh; }
.rd-section { padding-block: var(--rd-space-7); }
.rd-section + .rd-section { border-top: 1px solid var(--rd-border); }
.rd-section--surface { background: var(--rd-surface); }

/* ========================================================================
   EN-TÊTE
   ======================================================================== */
.rd-header {
  background: var(--rd-surface);
  border-bottom: 1px solid var(--rd-border);
}
.rd-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rd-space-3);
  min-height: var(--rd-header-h);
}
.rd-header__nav {
  display: flex;
  align-items: center;
  gap: var(--rd-space-5);
}
.rd-header__link { display: none; color: var(--rd-text); font-weight: 500; text-decoration: none; }
.rd-header__link:hover { text-decoration: underline; }

@media (min-width: 640px) {
  .rd-header__link { display: inline; }
}

.rd-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--rd-space-2);
  color: var(--rd-text);
  text-decoration: none;
  min-height: 44px;
}
.rd-logo__mark { width: 28px; height: 28px; flex: none; }
.rd-logo__word {
  font-family: var(--rd-font-body);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ========================================================================
   BOUTONS
   ======================================================================== */
.rd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--rd-tap);
  padding: 0 var(--rd-space-5);
  border: 1.5px solid var(--rd-cyan-dk);
  border-radius: var(--rd-radius);
  background: var(--rd-cyan-dk);
  color: var(--rd-on-cyan);
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.rd-btn:hover, .rd-btn:active { background: var(--rd-cyan-dkr); border-color: var(--rd-cyan-dkr); text-decoration: none; }
.rd-btn--block { display: flex; width: 100%; }
.rd-btn--sm { min-height: 44px; padding: 0 var(--rd-space-4); font-size: var(--rd-fs-sm); }

.rd-btn--secondary { background: transparent; color: var(--rd-cyan-dk); }
.rd-btn--secondary:hover, .rd-btn--secondary:active { background: var(--rd-cyan-dim); border-color: var(--rd-cyan-dk); }

.rd-btn[disabled], .rd-btn[aria-disabled="true"] {
  background: var(--rd-border-s);
  border-color: var(--rd-border-s);
  color: var(--rd-text-3);
  cursor: default;
}

/* ========================================================================
   FORMULAIRES
   ======================================================================== */
.rd-field { margin-bottom: var(--rd-space-4); }
.rd-field label { display: block; margin-bottom: var(--rd-space-1); font-weight: 500; }
.rd-input {
  width: 100%;
  min-height: var(--rd-tap);
  padding: 0 var(--rd-space-3);
  border: 1px solid var(--rd-border-ui);
  border-radius: var(--rd-radius-sm);
  background: var(--rd-surface);
  color: var(--rd-text);
  font: inherit;
  font-size: 1rem; /* 16 px au moins : sinon iOS zoome au focus */
}
.rd-error { color: var(--rd-prix-cher); font-size: var(--rd-fs-sm); margin-top: var(--rd-space-1); }

/* Le mark du logo est décoratif : sa couleur est celle de la marque */
.rd-logo__mark { color: var(--rd-cyan); }

/* ========================================================================
   ÉLÉMENTS RÉUTILISABLES
   ======================================================================== */
.rd-breadcrumb { font-size: var(--rd-fs-sm); color: var(--rd-text-3); margin-bottom: var(--rd-space-4); }
.rd-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--rd-space-1) var(--rd-space-2); list-style: none; margin: 0; padding: 0; }
.rd-breadcrumb li + li::before { content: "›"; margin-right: var(--rd-space-2); }

/* Encart d'affiliation : visible, jamais replié */
.rd-affiliation {
  margin: var(--rd-space-3) 0 0;
  color: var(--rd-text-2);
  font-size: var(--rd-fs-sm);
}

/* Texte éditorial (pages, fiches, guides) */
.rd-prose > * + * { margin-top: var(--rd-space-4); }
.rd-prose h2, .rd-prose h3 { margin-top: var(--rd-space-6); }
.rd-prose ul, .rd-prose ol { padding-left: 1.25em; }
.rd-prose li + li { margin-top: var(--rd-space-1); }

.rd-updated { color: var(--rd-text-3); font-size: var(--rd-fs-sm); }

/* ========================================================================
   ACCUEIL
   ======================================================================== */
.rd-hero { padding-block: var(--rd-space-7) var(--rd-space-8); background: var(--rd-surface); }
.rd-hero__title { font-size: var(--rd-fs-display); max-width: 18ch; }
.rd-hero__lead { font-size: var(--rd-fs-lg); color: var(--rd-text-2); max-width: 36em; }
.rd-hero__cta { margin-top: var(--rd-space-5); }
.rd-hero__pledges {
  display: flex; flex-wrap: wrap; gap: var(--rd-space-1) var(--rd-space-4);
  margin: var(--rd-space-4) 0 0; padding: 0; list-style: none;
  font-family: var(--rd-font-mono); font-size: var(--rd-fs-sm); color: var(--rd-text-2);
}
.rd-hero__pledges li::before { content: "•"; margin-right: var(--rd-space-2); color: var(--rd-cyan-dk); }

@media (min-width: 640px) {
  .rd-btn--auto-sm { display: inline-flex; width: auto; }
}

.rd-steps { list-style: none; margin: var(--rd-space-5) 0 0; padding: 0; display: grid; gap: var(--rd-space-5); counter-reset: rd-step; }
.rd-steps li { position: relative; padding-left: 56px; counter-increment: rd-step; }
.rd-steps li::before {
  content: counter(rd-step);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--rd-radius-pill);
  background: var(--rd-cyan-dim);
  color: var(--rd-cyan-dk);
  font-family: var(--rd-font-mono); font-weight: 600;
}
.rd-steps strong { display: block; }

.rd-faq details { border-bottom: 1px solid var(--rd-border); }
.rd-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--rd-space-3);
  min-height: var(--rd-tap); padding-block: var(--rd-space-2);
  font-weight: 500; cursor: pointer; list-style: none;
}
.rd-faq summary::-webkit-details-marker { display: none; }
.rd-faq summary::after { content: "+"; font-family: var(--rd-font-mono); color: var(--rd-cyan-dk); }
.rd-faq details[open] summary::after { content: "–"; }
.rd-faq details p { color: var(--rd-text-2); }

@media (min-width: 1024px) {
  .rd-steps { grid-template-columns: repeat(3, 1fr); gap: var(--rd-space-6); }
}

/* ========================================================================
   CARTES ROBOT ET SIGNAUX DE PRIX (questionnaire, bons prix, alternatives)
   ======================================================================== */
.rd-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rd-space-3); }

/* Mobile : la carte est une ligne — vignette à gauche, texte à droite. Trois robots tiennent
   sur un écran au lieu de deux et demi. Sans photo, le texte prend toute la largeur. */
.rd-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--rd-space-3); align-items: start; padding: var(--rd-space-3); background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: var(--rd-radius); }
.rd-card:not(:has(> .rd-card__photo)) { grid-template-columns: minmax(0, 1fr); }
.rd-card:hover { border-color: var(--rd-border-s); }
.rd-card__photo { width: 88px; height: 88px; object-fit: contain; }
.rd-card__body { display: flex; flex-direction: column; gap: var(--rd-space-1); min-width: 0; }
.rd-card__name { margin: 0; font-size: var(--rd-fs-base); line-height: 1.3; }
.rd-card__name a { color: inherit; text-decoration: none; }
.rd-card__name a:hover { text-decoration: underline; }
.rd-card__reasons { margin: 0; padding-left: 1.1em; color: var(--rd-text-2); font-size: var(--rd-fs-sm); }
.rd-card__price { margin: var(--rd-space-1) 0 0; font-size: var(--rd-fs-lg); font-weight: 600; }
.rd-card__meta { margin: 0; color: var(--rd-text-3); font-size: var(--rd-fs-sm); }
.rd-card__why { margin: 0; color: var(--rd-text-2); font-size: var(--rd-fs-sm); }
.rd-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rd-space-1) var(--rd-space-4); margin-top: var(--rd-space-2); }
.rd-card .rd-btn { align-self: flex-start; }
.rd-card__alerte { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--rd-fs-sm); }
.rd-card .rd-signal { margin-top: var(--rd-space-1); }

/* À partir de 640 px : grille de cartes, photo en tête. */
@media (min-width: 640px) {
  .rd-card { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
  .rd-card__photo { width: 100%; height: 160px; padding: var(--rd-space-3); }
  .rd-card__body { padding: var(--rd-space-4); }
  .rd-card__name { font-size: var(--rd-fs-lg); }
}

/* Signal de prix : pastille + libellé écrit, jamais la couleur seule */
.rd-signal { display: inline-flex; align-items: center; gap: var(--rd-space-2); align-self: flex-start; margin: 0; padding: var(--rd-space-1) var(--rd-space-3); border-radius: var(--rd-radius-pill); color: var(--rd-text); font-size: var(--rd-fs-sm); font-weight: 500; }
.rd-signal__dot { width: 10px; height: 10px; border-radius: var(--rd-radius-pill); background: currentColor; }
.rd-signal--bon { background: var(--rd-prix-bon-bg); }
.rd-signal--bon .rd-signal__dot { color: var(--rd-prix-bon); }
.rd-signal--habituel { background: var(--rd-prix-habituel-bg); }
.rd-signal--habituel .rd-signal__dot { color: var(--rd-prix-habituel); }

@media (min-width: 640px) {
  .rd-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .rd-cards { grid-template-columns: repeat(3, 1fr); }
}

.rd-price { font-variant-numeric: tabular-nums; }
.rd-lead { font-size: var(--rd-fs-lg); color: var(--rd-text-2); max-width: 40em; }

/* ========================================================================
   FICHE MODÈLE
   ======================================================================== */
.rd-fiche__photo { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: var(--rd-radius); padding: var(--rd-space-4); margin-bottom: var(--rd-space-5); }
.rd-fiche__photo img { width: 100%; max-height: 240px; object-fit: contain; }
@media (min-width: 1024px) { .rd-fiche__photo img { max-height: 420px; } }
.rd-fiche__texte { margin-block: var(--rd-space-6); }
.rd-fiche > section, .rd-fiche__methode { margin-top: var(--rd-space-7); }
.rd-fiche__methode { padding-top: var(--rd-space-5); border-top: 1px solid var(--rd-border); color: var(--rd-text-2); font-size: var(--rd-fs-sm); }
.rd-fiche__methode h2 { font-size: var(--rd-fs-lg); }

@media (min-width: 1024px) {
  .rd-fiche__top { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rd-space-6); align-items: start; }
  /* sans photo officielle, le verdict ne reste pas coincé dans une demi-colonne */
  .rd-fiche__top > .rd-fiche__verdict:only-child { grid-column: 1 / -1; max-width: var(--rd-reading); }
}

/* Verdict prix */
.rd-verdict { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: var(--rd-radius); padding: var(--rd-space-5); display: flex; flex-direction: column; gap: var(--rd-space-3); }
.rd-verdict > * { margin: 0; }
.rd-verdict__q { font-family: var(--rd-font-body); font-size: var(--rd-fs-base); font-weight: 600; color: var(--rd-text-2); }
.rd-verdict__r { font-family: var(--rd-font-serif); font-size: var(--rd-fs-h2); line-height: var(--rd-lh-tight); }
.rd-verdict__r--oui { color: var(--rd-prix-bon); }
.rd-verdict__prix .rd-price { font-size: var(--rd-fs-h2); font-weight: 600; color: var(--rd-text); }
.rd-verdict__prix { color: var(--rd-text-2); }
.rd-verdict__reperes { display: grid; gap: var(--rd-space-2); }
.rd-verdict__reperes div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--rd-space-1) var(--rd-space-3); padding-block: var(--rd-space-2); border-top: 1px solid var(--rd-border); }
.rd-verdict__reperes dt { font-weight: 500; }
.rd-verdict__reperes dd { margin: 0; color: var(--rd-text-2); font-size: var(--rd-fs-sm); text-align: right; }
.rd-verdict__reperes dd .rd-price { display: block; color: var(--rd-text); font-size: var(--rd-fs-base); }
.rd-verdict__pourquoi { color: var(--rd-text-2); }
.rd-verdict__note { color: var(--rd-text-3); font-size: var(--rd-fs-sm); }

/* Offres */
.rd-offres__liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rd-border); }
.rd-offre { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--rd-space-1) var(--rd-space-3); padding-block: var(--rd-space-3); border-bottom: 1px solid var(--rd-border); }
.rd-offre__marchand { font-weight: 500; }
.rd-offre__prix { font-size: var(--rd-fs-lg); font-weight: 600; text-align: right; }
.rd-offre__meta { color: var(--rd-text-3); font-size: var(--rd-fs-sm); }
.rd-offre__lien { justify-self: end; }
.rd-offre--indispo .rd-offre__prix { color: var(--rd-text-3); font-weight: 400; }
.rd-offres__note { margin-top: var(--rd-space-3); color: var(--rd-text-3); font-size: var(--rd-fs-sm); }

/* Historique : tracé SVG étiré, libellés en HTML (lisibles à toute largeur) */
.rd-histo__fig { margin: 0; }
.rd-histo__plot { position: relative; height: 200px; margin-left: 72px; border-left: 1px solid var(--rd-border); border-bottom: 1px solid var(--rd-border); }
.rd-histo__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rd-histo__grille { stroke: var(--rd-border-s); stroke-width: 1; stroke-dasharray: 3 3; }
.rd-histo__ligne { fill: none; stroke: var(--rd-cyan-dk); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.rd-histo__y { position: absolute; right: calc(100% + 8px); transform: translateY(-50%); font-family: var(--rd-font-mono); font-size: var(--rd-fs-sm); color: var(--rd-text-3); white-space: nowrap; }
.rd-histo__min { position: absolute; width: 12px; height: 12px; border-radius: var(--rd-radius-pill); background: var(--rd-prix-bon); border: 2px solid var(--rd-surface); transform: translate(-50%, -50%); }
.rd-histo__x { display: flex; justify-content: space-between; margin: var(--rd-space-1) 0 0 72px; font-family: var(--rd-font-mono); font-size: var(--rd-fs-sm); color: var(--rd-text-3); }
.rd-histo__legende { margin-top: var(--rd-space-3); color: var(--rd-text-2); font-size: var(--rd-fs-sm); }

/* Specs */
.rd-specs { margin: 0; border-top: 1px solid var(--rd-border); }
.rd-specs__ligne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--rd-space-3); padding-block: var(--rd-space-2); border-bottom: 1px solid var(--rd-border); }
.rd-specs dt { color: var(--rd-text-2); }
.rd-specs dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.rd-source { margin-left: var(--rd-space-1); color: var(--rd-text-3); font-size: .75rem; font-weight: 400; }
.rd-specs__complet { margin-top: var(--rd-space-4); }
.rd-specs__complet summary { display: flex; align-items: center; min-height: var(--rd-tap); font-weight: 500; color: var(--rd-cyan-dk); cursor: pointer; }
.rd-specs__note { margin-top: var(--rd-space-3); color: var(--rd-text-3); font-size: var(--rd-fs-sm); }

/* Alternatives (modèle arrêté) */
.rd-alternatives { display: flex; flex-direction: column; gap: var(--rd-space-4); }
.rd-alternatives h2 { margin: var(--rd-space-3) 0 0; font-size: var(--rd-fs-h3); }
.rd-alternatives__intro { padding: var(--rd-space-5); background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: var(--rd-radius); }
.rd-alternatives__intro > * { margin: 0; }
.rd-alternatives__intro > * + * { margin-top: var(--rd-space-3); }
.rd-alternatives__neutre { font-family: var(--rd-font-serif); font-size: var(--rd-fs-h3); line-height: var(--rd-lh-tight); }
.rd-alternatives__note { color: var(--rd-text-3); font-size: var(--rd-fs-sm); }
.rd-alternatives .rd-affiliation { margin-top: var(--rd-space-2); }

/* ========================================================================
   BONS PRIX DU MOMENT
   ======================================================================== */
.rd-filtre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rd-space-2); margin-block: var(--rd-space-4) var(--rd-space-5); }
.rd-filtre__label { font-weight: 500; margin-right: var(--rd-space-1); }
.rd-filtre__choix { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--rd-space-4); border: 1.5px solid var(--rd-border-ui); border-radius: var(--rd-radius-pill); color: var(--rd-text); font-size: var(--rd-fs-sm); text-decoration: none; }
.rd-filtre__choix:hover { border-color: var(--rd-cyan-dk); }
.rd-filtre__choix[aria-current="true"] { background: var(--rd-cyan-dk); border-color: var(--rd-cyan-dk); color: var(--rd-on-cyan); }
.rd-bonsprix__vide { max-width: 40em; color: var(--rd-text-2); }

/* ========================================================================
   LE BON MOMENT
   ======================================================================== */
.rd-bm-liste { padding-left: 1.25em; }
.rd-apercu { margin-block: var(--rd-space-4); padding: var(--rd-space-5); background: var(--rd-bg); border: 1px dashed var(--rd-border-s); border-radius: var(--rd-radius); }
.rd-apercu > * { margin: 0 0 var(--rd-space-3); }
.rd-apercu__objet { font-family: var(--rd-font-mono); font-size: var(--rd-fs-sm); color: var(--rd-text-3); }
.rd-apercu__verdict { font-weight: 600; }
.rd-apercu__robots, .rd-bm-signaux { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rd-space-3); }
.rd-apercu__robots li { display: flex; flex-direction: column; gap: var(--rd-space-1); align-items: flex-start; }
.rd-bm-signaux li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rd-space-2); }

/* ========================================================================
   PIED DE PAGE
   ======================================================================== */
.rd-footer { margin-top: var(--rd-space-8); padding-block: var(--rd-space-7) var(--rd-space-6); background: var(--rd-surface); border-top: 1px solid var(--rd-border); font-size: var(--rd-fs-sm); }
.rd-footer__tag { margin: var(--rd-space-2) 0 var(--rd-space-5); color: var(--rd-text-2); }
.rd-footer__links { display: flex; flex-wrap: wrap; gap: var(--rd-space-1) var(--rd-space-5); list-style: none; margin: 0 0 var(--rd-space-5); padding: 0; }
.rd-footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
.rd-footer__copy { margin: var(--rd-space-5) 0 0; color: var(--rd-text-3); }

/* ========================================================================
   MOUVEMENT RÉDUIT
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* !important documenté : la préférence de l'utilisateur doit l'emporter sur toute règle de composant */
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
