/*
Theme Name:  Robodomus V9
Theme URI:   https://robodomus.fr
Description: Thème V9 — magazine papier charte 2026. Fond #F5F5F3, accent GoPro Blue #00AEEF, Fraunces display. Spec vignettes lifestyle V9 (flou 3px, marge 11%).
Version:     1.0.0
Author:      Robodomus
Text Domain: robodomus
*/

/* ============================================================
   VARIABLES — Charte 2026 (papier, GoPro Blue)
   ============================================================ */
:root {
    /* Paper palette (mode unique clair) */
    --rd-bg:          #F5F5F3;
    --rd-paper-doux:  #EAEAE6;
    --rd-surface:     #FFFFFF;
    --rd-surface-2:   #F5F5F3;
    --rd-border:      rgba(11,11,15,.10);
    --rd-border-s:    rgba(11,11,15,.18);

    /* Accent — GoPro Blue charte 2026 */
    --rd-cyan:        #00AEEF;       /* alias historique = GoPro Blue */
    --rd-cyan-dim:    rgba(0,174,239,.10);
    --rd-cyan-dk:     #007DB3;       /* hover / CTA plein */

    /* Univers — piliers charte 2026 (désaturés) */
    --rd-aspi:        #3A6B9E;       /* bleu encre */
    --rd-aspi-bg:     #D8E3EE;
    --rd-tonte:       #4F8040;       /* vert sauge */
    --rd-tonte-bg:    #D8E3D2;
    --rd-pisci:       #1F7E96;       /* turquoise profond */
    --rd-pisci-bg:    #C8DDE3;
    --rd-humano:      #8C3A3A;       /* bordeaux */
    --rd-humano-bg:   #E3D2D2;

    /* Sémantique */
    --rd-con:         #C0392B;       /* négatif / promo — spec design system */
    --rd-con-bg:      rgba(192,57,43,.09);

    /* Ink / Text */
    --rd-text:        #0B0B0F;
    --rd-text-2:      #3D3D3D;
    --rd-text-3:      #8A8A8A;

    /* Typography */
    --rd-font-body:   'Space Grotesk', system-ui, sans-serif;
    --rd-font-serif:  'Fraunces', Georgia, serif;
    --rd-font-mono:   'JetBrains Mono', monospace;

    /* Layout */
    --rd-wrap:        1240px;
    --rd-radius:      10px;
    --rd-radius-sm:   6px;
    --rd-radius-pill: 999px;

    /* Couleurs pros/cons (ajoutées 2026-07-17 — fix bugs silencieux var(--rd-pro)/var(--rd-con)) */
    --rd-pro:         #1D7A4A;       /* vert — pros (spec design system 2026) */
    --rd-pro-bg:      rgba(29,122,74,.09);

    /* Spacing scale (ajoutée 2026-07-17 — fix bugs silencieux var(--rd-space-7)/var(--rd-space-8)) */
    --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;   /* ancien --s6 */
    --rd-space-8:     72px;   /* ancien --s7 */

    /* Alias (ajoutés 2026-07-18 — fix bugs silencieux dans page.php/single.php/404.php :
       --s6/--s7/--s8/--reading/--t-h1 n'étaient jamais définis, causant padding-top:0,
       max-width:none et un h1 en 16px sur toutes les pages simples + le 404 */
    --s6:             var(--rd-space-7);
    --s7:             var(--rd-space-8);
    --s8:             var(--rd-space-8);
    --reading:        70ch;
    --t-h1:           clamp(28px, 4vw, 44px);

    /* Spec vignettes V9 (validée 29/06/2026) — système .rd-card__m--*::before,
       conservé tel quel pour les cartes qui n'ont pas de détourage. */
    --vig-bg-filter:        blur(3px) brightness(0.85) saturate(0.95);
    --vig-bg-scale:         1.04;
    --vig-cutout-size:      78%;      /* marge éditoriale 11% sur la +grande dim */
    --vig-cutout-shadow:    drop-shadow(0 0 24px rgba(0,174,239,.55)) drop-shadow(0 16px 32px rgba(11,11,15,.4));   /* V9.8 — double halo cyan + Ink (signature charte) */
    --vig-radius:           8px;

    /* Spec vignettes v3 "vitre teintée" (validée 10/08/2026) — calques
       .rd-ctx-* / .rd-product de rd_vignette_html(). Fond quasi net,
       produit posé sur sa ligne de sol. */
    --vig-bg-blur:          1.5px;    /* on doit reconnaître le terrain */
    --vig-cut-size:         76%;      /* le produit est seul dans le cadre */
    --vig-sol:              8%;       /* sol laissé sous le produit */
    --vig-contact:          .34;      /* opacité de l'ombre de contact */

    --bloom-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='black'%3E%3Cellipse cx='50' cy='50' rx='13' ry='28' transform='rotate(0 50 50) translate(0 -14)'/%3E%3Cellipse cx='50' cy='50' rx='13' ry='28' transform='rotate(60 50 50) translate(0 -14)'/%3E%3Cellipse cx='50' cy='50' rx='13' ry='28' transform='rotate(120 50 50) translate(0 -14)'/%3E%3Cellipse cx='50' cy='50' rx='13' ry='28' transform='rotate(180 50 50) translate(0 -14)'/%3E%3Cellipse cx='50' cy='50' rx='13' ry='28' transform='rotate(240 50 50) translate(0 -14)'/%3E%3Cellipse cx='50' cy='50' rx='13' ry='28' transform='rotate(300 50 50) translate(0 -14)'/%3E%3Ccircle cx='50' cy='50' r='9'/%3E%3C/g%3E%3C/svg%3E")}

/* ===================================================================== */
/* ============================ ACCUEIL ================================= */
/* ===================================================================== */
.rd-hp-sec{padding:var(--rd-space-8) 0}

/* Hero éditorial */
.rd-hp-hero{padding:var(--rd-space-8) 0 var(--rd-space-7)}
.rd-hp-hero__grid{display:grid;}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }              /* V9 — désactivé (artifact smooth-scroll) */
body {
    background: var(--rd-bg);
    color: var(--rd-text);
    font-family: var(--rd-font-body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;                    /* V9 — évite scroll horizontal accidentel */
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }

/* ============================================================
   LAYOUT
   ============================================================ */
.rd-wrap { max-width: var(--rd-wrap); margin: 0 auto; padding: 0 24px; }

/* Thème classique (pas un thème de blocs FSE) : WordPress ne génère pas
   tout seul le CSS de largeur/centrage pour align="wide" sur un thème
   classique — la classe "alignwide" posée par l'éditeur n'a par défaut
   aucun effet ici. On la définit nous-mêmes, alignée sur --rd-wrap. */
.alignwide { max-width: var(--rd-wrap); margin-left: auto; margin-right: auto; }
.alignfull { max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* ============================================================
   SCROLLBAR + SKIP LINK
   ============================================================ */
.rd-scrollbar { display: none; }           /* V9 — désactivé, peut créer artefacts visuels */
.rd-skip-link {
    position: absolute; top: -100%; left: 1rem; z-index: 9999;
    padding: .5rem 1rem; background: var(--rd-cyan); color: #ffffff;
    font-weight: 600; border-radius: var(--rd-radius-sm); text-decoration: none;
}
.rd-skip-link:focus { top: 1rem; }

/* ============================================================
   HEADER — nav unique (maquette : logo + liens + recherche, une seule barre)
   ============================================================ */
.rd-nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(245, 245, 243, .9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(11, 11, 15, .06);
}
.rd-nav__in {
    display: flex; align-items: center; justify-content: space-between;
    height: 66px; gap: 24px;
}
/* Brand */
.rd-brand {
    display: inline-flex; align-items: center; gap: 10px;
    flex-shrink: 0;
}
.rd-brand__mark {
    width: 26px; height: 26px;
    color: var(--rd-cyan);
    flex-shrink: 0;
}
.rd-brand__mark .rd-bloom { width: 26px; height: 26px; }
.rd-brand__text { display: flex; flex-direction: column; gap: 0; }
.rd-brand__name {
    font-family: var(--rd-font-serif); font-weight: 600; font-size: 19px;
    line-height: 1; letter-spacing: -.01em; color: var(--rd-text);
}
.rd-brand__tag {
    font-family: var(--rd-font-mono); font-size: 8.5px;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--rd-text-3); line-height: 1; margin-top: 3px;
}
/* Liens de nav */
.rd-nav__links {
    display: flex; align-items: center; gap: 26px;
    list-style: none; margin: 0; padding: 0;
    font-size: 14px; color: var(--rd-text-2);
    flex: 1; justify-content: center;
}
.rd-nav__links a { color: var(--rd-text-2); }
.rd-nav__links a:hover,
.rd-nav__links a[aria-current],
.rd-nav__links li.current-menu-item a { color: var(--rd-cyan-dk); }

/* Actions (recherche) */
.rd-nav__actions {
    display: flex; align-items: center; gap: 16px;
    position: relative;
}
.rd-nav__search {
    width: 17px; height: 17px; color: var(--rd-text-3);
    flex-shrink: 0; cursor: pointer;
}
.rd-nav__search-toggle {
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; padding: 4px; margin: 0;
    cursor: pointer; line-height: 0;
}
.rd-nav__search-toggle:hover .rd-nav__search,
.rd-nav__search-toggle[aria-expanded="true"] .rd-nav__search { color: var(--rd-cyan-dk); }

.rd-search-panel {
    position: absolute; top: calc(100% + 12px); right: 0;
    width: 340px; max-width: calc(100vw - 32px);
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius);
    box-shadow: 0 12px 32px rgba(11,11,15,.12);
    padding: 12px;
    z-index: 200;
}
.rd-search-panel[hidden] { display: none; }

@media (max-width: 920px) {
    .rd-nav__links { display: none; }
    .rd-search-panel { width: calc(100vw - 32px); }
}

/* ============================================================
   HERO DARK
   ============================================================ */
.rd-hp-hero {
    background: var(--rd-bg);
    padding: 40px 0 32px;
}
.rd-hp-hero__grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 16px;
    align-items: start;
}
/* Main hero card */
.rd-hp-hero__main {
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius);
    padding: 36px 40px;
    position: relative; overflow: hidden;
}
.rd-hp-hero__bloom {
    position: absolute; right: -40px; bottom: -40px;
    width: 160px; height: 160px;
    color: var(--rd-cyan); opacity: .06;
    pointer-events: none;
}
.rd-hp-hero__kicker {
    display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
}
.rd-dot { width: 7px; height: 7px; background: var(--rd-cyan); border-radius: 50%; flex-shrink: 0; }
.rd-eyebrow {
    font-family: var(--rd-font-mono);
    font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--rd-text-3);
}
.rd-eyebrow--accent { color: var(--rd-cyan); }
.rd-eyebrow--band { margin-bottom: 8px; display: block; }
.rd-mono { font-family: var(--rd-font-mono); font-size: 11px; color: var(--rd-text-3); }
.rd-hp-hero__title {
    font-family: var(--rd-font-serif);
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 400;
    line-height: 1.15;
    color: var(--rd-text);
    margin-bottom: 14px;
}
.rd-hp-hero__title em { color: var(--rd-cyan); font-style: italic; }
.rd-hp-hero__stand {
    font-size: 15px; color: var(--rd-text-2); line-height: 1.7;
    max-width: 520px; margin-bottom: 28px;
}
.rd-hp-hero__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Buttons */
.rd-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 20px; border-radius: var(--rd-radius-pill, 999px);
    font-size: 14.5px; font-weight: 600; border: none; cursor: pointer;
    text-decoration: none; transition: background .2s, box-shadow .2s;
}
.rd-btn--cta { background: var(--rd-cyan-dk); color: #ffffff; }
.rd-btn--cta:hover { background: #0098D4; box-shadow: 0 0 20px rgba(0,174,239,.32); color: #ffffff; }

/* core/button émet <div class="wp-block-button ..."><a class="wp-block-button__link">
   — quand un contenu pose rd-btn/rd-btn--cta sur le bloc, habiller le lien
   interne, pas le div englobant, sinon le bouton par défaut de WordPress reste
   imbriqué dans notre propre cartouche. (Fix e2a29ed, retiré par 39bf8c2 comme
   code mort côté home — requis de nouveau par les core/button des articles.) */
.wp-block-button.rd-btn { background: none; padding: 0; }
.wp-block-button.rd-btn .wp-block-button__link {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 20px; border-radius: var(--rd-radius-pill, 999px);
    font-family: var(--rd-font-body); font-size: 14.5px; font-weight: 600;
    text-decoration: none; transition: background .2s, box-shadow .2s;
}
.wp-block-button.rd-btn--cta .wp-block-button__link { background: var(--rd-cyan-dk); color: #ffffff; }
.wp-block-button.rd-btn--cta .wp-block-button__link:hover { background: #0098D4; box-shadow: 0 0 20px rgba(0,174,239,.32); color: #ffffff; }
/* ============================================================
   HERO V9.5 — pattern Frandroid strict : 2 articles à la une
   1 grand format à gauche avec overlay texte sur image + 1 card normale à droite
   Hauteurs uniformes via flex stretch + grid align-items stretch.
   ============================================================ */
.rd-hp-hero {
    padding: 32px 0 56px;
}
.rd-hp-hero__head {
    margin-bottom: 24px;
}
.rd-hp-hero__head h2 {
    font-family: var(--rd-font-serif);
    font-size: 24px;
    font-weight: 500;
    color: var(--rd-text);
    letter-spacing: -.01em;
}
.rd-hp-hero__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;     /* V9.5 — asymétrie Frandroid (60/40) */
    gap: 20px;
    align-items: stretch;                 /* V9.5 — hauteurs uniformes */
}
.rd-hp-hero__media-fallback {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--rd-paper-doux), #d8d8d4);
}

/* Article principal du hero — photo au-dessus, texte en dessous
   (pattern maquette Accueil.html, pas de texte en surimpression) */
.rd-hp-hero__feat {
    display: flex; flex-direction: column; gap: 16px;
    text-decoration: none; color: inherit;
    min-width: 0;                          /* évite l'overflow horizontal mobile : sans ça, le contenu impose sa min-content width à la piste de la grille (grid-template-columns:1fr) au lieu de la respecter */
}
.rd-hp-hero__feat-media {
    position: relative; overflow: hidden;
    aspect-ratio: 16/10; border-radius: var(--rd-radius);
    background: var(--rd-paper-doux);
}
/* Cible uniquement le fallback direct-enfant (<img class="rd-thumb__photo">
   rendu par rd_vignette_html() quand pas de cutout) — PAS un descendant
   générique, sinon ça capture aussi le <img> du produit détouré niché dans
   .rd-product (position:absolute qui s'y ajoute casse tout le compositing
   en couches : le produit se retrouve étiré plein cadre PAR-DESSUS lui-même,
   d'où l'effet "deux photos superposées" — bug réel, pas un artefact). */
.rd-hp-hero__feat-media > img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.rd-hp-hero__feat-title {
    font-family: var(--rd-font-serif); font-weight: 600;
    font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -.01em;
    color: var(--rd-text); max-width: 20ch;
}
.rd-hp-hero__feat:hover .rd-hp-hero__feat-title { color: var(--rd-cyan-dk); }

/* ------------------------------------------------------------------
   Hero « bandeau » (spec v3, variante c — validée 11/08/2026).
   Le seul endroit du site où le texte revient DANS l'image : le hero de
   la une est assez grand pour que le produit garde son cadre entier et
   que le bandeau n'empiète que sur une bande de sol vide. Il rend la une
   autonome — partagée seule, elle dit encore quel produit elle montre.

   Le hero de l'article ne suit pas, délibérément : sa figure est en 5/4,
   une colonne de texte y étrangle le produit, et son titre est déjà en
   h1 juste au-dessus de l'image — l'y remettre le dirait deux fois.
   ------------------------------------------------------------------ */
.rd-hp-hero__feat-media--bandeau {
    --vig-cut-size: 40%;
    --band-sol: 10%;   /* hauteur de sol laissée sous le produit */
}
/* Le produit quitte le centre pour la droite. Il est ancré par le BAS et non
   centré sur une ligne de sol : le détourage est contenu puis aligné en bas
   de sa boîte, donc centrer la boîte revient à coller le produit contre le
   bord du cadre — mesuré à 100 % exactement, zéro respiration. Ancré par le
   bas, --band-sol dit littéralement combien de sol reste sous lui. */
.rd-hp-hero__feat-media--bandeau .rd-product {
    left: auto; right: 6%; top: auto; bottom: var(--band-sol);
    transform: none;
    width: var(--vig-cut-size); height: 74%;
}
/* L'ombre de contact se pose sur cette même ligne, centrée sous le produit :
   6 % de marge droite, plus la moitié de ce qui sépare les deux largeurs. */
.rd-hp-hero__feat-media--bandeau .rd-ctx-contact {
    left: auto; right: calc(6% + var(--vig-cut-size) * .09);
    top: auto; bottom: var(--band-sol);
    transform: translateY(50%);
    width: calc(var(--vig-cut-size) * .82);
}
.rd-hp-hero__feat:hover .rd-hp-hero__feat-media--bandeau .rd-product {
    transform: translateY(-5px);
}
/* Voile de lisibilité descendu du haut, là où le texte se pose désormais.
   Le bandeau occupait le bas du cadre, du même côté que la ligne de sol et
   l'ombre du produit : trois masses sombres empilées sur le tiers inférieur,
   et la moitié haute vide. Texte en haut à gauche, produit en bas à droite,
   la diagonale répartit le poids. */
.rd-hp-hero__feat-media--bandeau .rd-ctx-tint::after {
    background: linear-gradient(to bottom,
        rgba(11,11,15,.86) 0%, rgba(11,11,15,.30) 38%, rgba(11,11,15,0) 62%);
}
.rd-hp-hero__band {
    position: absolute; left: 0; right: auto; top: 0; z-index: 5;
    display: flex; flex-direction: column; gap: 6px;
    padding: 20px 24px;
    /* Le produit monte jusqu'à 34 % du cadre par la droite : le bandeau
       s'arrête avant pour que le titre ne lui passe jamais dessus. */
    max-width: 62%;
}
/* Le voile seul ne suffit pas là où le fond est clair — un ciel, une eau au
   soleil. L'ombre portée tient le texte lisible sans avoir à noircir
   davantage l'image. */
.rd-hp-hero__band-kicker,
.rd-hp-hero__band-title,
.rd-hp-hero__band-meta,
.rd-hp-hero__band-score {
    text-shadow: 0 1px 2px rgba(11,11,15,.55), 0 2px 12px rgba(11,11,15,.42);
}
.rd-hp-hero__band-kicker {
    font-family: var(--rd-font-mono); font-size: 10px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--rd-cyan-lt);
}
.rd-hp-hero__band-title {
    font-family: var(--rd-font-serif); font-weight: 600;
    font-size: clamp(19px, 2.2vw, 30px); line-height: 1.14; letter-spacing: -.01em;
    color: #fff; text-wrap: pretty; max-width: 22ch;
}
.rd-hp-hero__band-meta {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-family: var(--rd-font-mono); font-size: 11px; color: rgba(255,255,255,.78);
}
.rd-hp-hero__band-score {
    font-family: var(--rd-font-serif); font-weight: 600; font-size: 22px;
    line-height: 1; color: #fff;
}
.rd-hp-hero__band-score small { font-size: 11px; opacity: .6; }
/* Sous 560 px la une occupe toute la largeur mais reste basse : le bandeau
   se resserre pour ne pas manger le produit. */
@media (max-width: 560px) {
    .rd-hp-hero__band { padding: 14px 16px; gap: 4px; }
    .rd-hp-hero__band-title { max-width: 100%; }
    .rd-hp-hero__feat-media--bandeau { --vig-cut-size: 36%; }
}
.rd-hp-hero__feat-excerpt {
    color: var(--rd-text-2); font-size: 16px; line-height: 1.6; max-width: 56ch;
}
.rd-hp-hero__feat-meta {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-family: var(--rd-font-mono); font-size: 11px; color: var(--rd-text-3); letter-spacing: .04em;
}
.rd-hp-hero__feat-score {
    display: inline-flex; align-items: baseline; gap: 4px;
    font-family: var(--rd-font-serif); font-weight: 600; font-size: 15px; color: var(--rd-cyan-dk);
}
.rd-hp-hero__feat-score small { font-family: var(--rd-font-body); font-size: 11px; font-weight: 400; color: var(--rd-text-3); }

.rd-hp-hero__empty {
    padding: 40px;
    text-align: center;
    color: var(--rd-text-3);
    font-style: italic;
}

/* Mini-cartes latérales du hero (Guide/Test/Dossier — pattern maquette) */
.rd-hp-hero__side {
    display: flex; flex-direction: column;
    min-width: 0;                          /* idem .rd-hp-hero__feat — même bug de grid track overflow */
}
.rd-hp-hero__side-item {
    display: flex; gap: 14px; padding: 18px 0;
    border-bottom: 1px solid var(--rd-border);
    text-decoration: none; color: inherit;
}
.rd-hp-hero__side:first-child { padding-top: 0; }
.rd-hp-hero__side-item:first-child { padding-top: 0; }
.rd-hp-hero__side-item:last-child { border-bottom: none; padding-bottom: 0; }
.rd-hp-hero__side-thumb {
    position: relative;
    width: 96px; aspect-ratio: 4/3; border-radius: var(--rd-radius-sm);
    overflow: hidden; background: var(--rd-paper-doux); flex: none;
}
.rd-hp-hero__side-thumb > img { width: 100%; height: 100%; object-fit: cover; }
.rd-hp-hero__side-txt { min-width: 0; }
.rd-hp-hero__side-title {
    font-family: var(--rd-font-serif); font-weight: 600; font-size: 15.5px;
    line-height: 1.3; color: var(--rd-text); margin: 6px 0 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rd-hp-hero__side-item:hover .rd-hp-hero__side-title { color: var(--rd-cyan-dk); }
.rd-hp-hero__side-meta {
    display: flex; gap: 6px; font-family: var(--rd-font-mono);
    font-size: 10px; color: var(--rd-text-3);
}

/* Responsive : empile hero principal + mini-cartes sur mobile */
@media (max-width: 900px) {
    .rd-hp-hero__grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   SECTIONS COMMUNES
   ============================================================ */
.rd-hp-sec {
    max-width: var(--rd-wrap); margin-left: auto; margin-right: auto;
    padding: 40px clamp(20px, 5vw, 24px);
}
.rd-hp-sec + .rd-hp-sec { border-top: 1px solid var(--rd-border); }
.rd-sec-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 24px;
}
.rd-sec-head h2 {
    font-family: var(--rd-font-serif);
    font-size: 26px; font-weight: 400;
    color: var(--rd-text);
}
.rd-sec-head h2 em { color: var(--rd-cyan); font-style: italic; }

/* Titres de section en blocs core (wp:heading) dans les sections homepage —
   sans cette règle ils héritent du style H2 par défaut de WordPress au lieu
   du traitement éditorial Fraunces de la maquette. */
.rd-hp-sec .wp-block-heading {
    font-family: var(--rd-font-serif);
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.1;
    color: var(--rd-text);
}
/* Espace sous le titre pour les sections sans CTA (donc sans .rd-sec-head,
   qui porte déjà margin-bottom:24px) — sélecteur enfant direct pour ne pas
   dupliquer cet espace là où .rd-sec-head l'apporte déjà. */
.rd-hp-sec > .wp-block-heading { margin-bottom: 24px; }

/* ============================================================
   PILIERS
   ============================================================ */
.rd-piliers-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.rd-pilier {
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius);
    padding: 20px 18px;
    text-decoration: none; display: block;
    position: relative; overflow: hidden;
    transition: border-color .15s, transform .15s;
}
.rd-pilier:hover { border-color: var(--rd-border-s); transform: translateY(-2px); }
.rd-pilier__num {
    font-family: var(--rd-font-mono);
    font-size: 28px; font-weight: 400;
    color: var(--rd-surface-2);
    margin-bottom: 8px; line-height: 1;
}
.rd-pilier__name {
    font-size: 14px; font-weight: 600;
    color: var(--rd-text); margin-bottom: 6px;
}
.rd-pilier__desc {
    font-size: 12px; color: var(--rd-text-2); line-height: 1.55;
    margin-bottom: 12px;
}
.rd-pilier__tag {
    font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--rd-text-3);
}
.rd-pilier__stripe {
    position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
}
.rd-pilier--aspi  .rd-pilier__stripe { background: var(--rd-aspi); }
.rd-pilier--tonte .rd-pilier__stripe { background: var(--rd-tonte); }
.rd-pilier--pisci .rd-pilier__stripe { background: var(--rd-pisci); }
.rd-pilier--humano .rd-pilier__stripe { background: var(--rd-humano); }

/* ============================================================
   FEATURE (test mis en avant)
   ============================================================ */
.rd-feature {
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius);
    overflow: hidden;
    display: grid; grid-template-columns: 1fr 1fr;
    align-items: stretch;
    text-decoration: none;
    transition: border-color .15s;
    max-height: 560px;                       /* V9 — cap anti-étirement du hero featured */
}
.rd-feature:hover { border-color: var(--rd-border-s); }
.rd-feature__media {
    position: relative; overflow: hidden;
    aspect-ratio: 4/3;                       /* V9 — ratio photo, jamais étiré */
    max-height: 540px;
    background: var(--rd-paper-doux);       /* fallback charte 2026 */
    flex-shrink: 0;
}
.rd-feature__media-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.rd-feature__media-fallback {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--rd-text-3);
}
.rd-feature__media-fallback svg { width: 80px; height: 80px; opacity: .35; }
.rd-feature__week {
    position: absolute; top: 12px; left: 12px;
    background: var(--rd-cyan); color: #ffffff;
    font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 4px;
}
.rd-feature__body { padding: 28px 32px; display: flex; flex-direction: column; justify-content: center; }
.rd-feature__kicker { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.rd-badge {
    font-size: 10px; padding: 3px 8px; border-radius: 4px;
    text-transform: uppercase; letter-spacing: .06em; font-weight: 500;
}
.rd-badge--aspi   { background: var(--rd-aspi-bg);  color: var(--rd-aspi); }
.rd-badge--tonte  { background: var(--rd-tonte-bg); color: var(--rd-tonte); }
.rd-badge--pisci  { background: var(--rd-pisci-bg); color: var(--rd-pisci); }
.rd-badge--humano { background: var(--rd-humano-bg);color: var(--rd-humano); }
.rd-badge--neutral{ background: var(--rd-surface-2); color: var(--rd-text-2); }
.rd-badge--xs { font-size: 9px; padding: 2px 6px; letter-spacing: .06em; }
.rd-feature__title {
    font-family: var(--rd-font-serif);
    font-size: 22px; font-weight: 400; line-height: 1.25;
    color: var(--rd-text); margin-bottom: 10px;
}
.rd-feature__stand {
    font-size: 14px; color: var(--rd-text-2); line-height: 1.65;
    margin-bottom: 20px; font-style: italic;
}
.rd-feature__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rd-feature__score {
    font-family: var(--rd-font-mono);
    font-size: 32px; font-weight: 500; color: var(--rd-cyan); line-height: 1;
}
.rd-feature__score small { font-size: 14px; color: var(--rd-text-3); margin-left: 1px; }
.rd-feature__price { font-size: 15px; font-weight: 600; color: var(--rd-text); }

/* ============================================================
   CARDS GRILLE — vignettes carrées (SPEC V9)
   ============================================================ */
.rd-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rd-card {
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: var(--radius, 10px);
    overflow: hidden; display: block; text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.rd-card:hover { border-color: var(--rd-border-s); transform: translateY(-2px); }
.rd-card__m {
    position: relative; overflow: hidden;
    aspect-ratio: 1/1;                       /* VIGNETTE CARRÉE — spec V9 */
    background: var(--rd-paper-doux);       /* fallback charte 2026 */
}
.rd-card__m--aspi  { background: linear-gradient(135deg, #d8e3ee, #c5d5e6); }
.rd-card__m--tonte { background: linear-gradient(135deg, #d8e3d2, #bdd2b4); }
.rd-card__m--pisci { background: linear-gradient(135deg, #c8dde3, #a9cdd5); }
.rd-card__m--humano{ background: linear-gradient(135deg, #e3d2d2, #d2b8b8); }
.rd-card__img { width: 100%; height: 100%; object-fit: cover; }
.rd-img-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.rd-card__badge {
    position: absolute; top: 10px; left: 10px;
    font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 4px;
    z-index: 3;
}
.rd-card__score {
    position: absolute; top: 10px; right: 10px;   /* TOP — aligné avec badge */
    background: rgba(245,245,243,.92); backdrop-filter: blur(4px);
    color: var(--rd-text); font-family: var(--rd-font-mono);
    font-size: 13px; font-weight: 600; padding: 3px 8px; border-radius: 4px;
    z-index: 3;
}
.rd-card__score small { font-size: 10px; color: var(--rd-text-3); }
.rd-card__b { padding: 14px 16px; }
/* Surtitre d'univers — sorti de l'image par la spec v3 (10/08/2026), il vit
   maintenant sous elle. Il réutilise les classes rd-badge--* pour hériter de
   la couleur d'univers ; le fond de pastille est neutralisé ici, cette règle
   étant plus tardive dans le fichier que les .rd-badge--*, parce qu'un
   surtitre n'est plus une pastille mais une ligne de texte. */
.rd-card__kicker {
    display: block; margin-bottom: 5px; padding: 0;
    background: none;
    font-family: var(--rd-font-mono); font-size: 9.5px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
}
/* Note du test, descendue elle aussi sous l'image, dans la ligne de méta. */
.rd-card__note { font-weight: 600; color: var(--rd-text); }
.rd-card__note small { color: var(--rd-text-3); }
.rd-card__title {
    font-size: 14px; font-weight: 500; color: var(--rd-text);
    line-height: 1.4; margin-bottom: 8px;
}
.rd-card__meta {
    display: flex; justify-content: space-between;
    font-family: var(--rd-font-mono); font-size: 10px;
    color: var(--rd-text-3); letter-spacing: .04em; text-transform: uppercase;
}

/* ============================================================
   NEWSLETTER
   ============================================================ */
.rd-newsletter {
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius);
    padding: 36px 40px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    position: relative; overflow: hidden;
}
.rd-newsletter__bloom {
    position: absolute; right: -32px; top: -32px;
    width: 120px; height: 120px; color: var(--rd-cyan); opacity: .05;
    pointer-events: none;
}
.rd-newsletter__c h2 {
    font-family: var(--rd-font-serif); font-size: 22px; font-weight: 400;
    color: var(--rd-text); margin-bottom: 6px;
}
.rd-newsletter__c h2 em { color: var(--rd-cyan); font-style: italic; }
.rd-newsletter__c p { font-size: 14px; color: var(--rd-text-2); }

/* Variante carte verticale — sidebar (module "Derniers tests") */
.rd-newsletter--card {
    display: block; flex-direction: initial; align-items: initial; justify-content: initial;
    background: var(--rd-text); color: #F4F4F0;
    padding: 24px;
}
.rd-newsletter--card .rd-newsletter__bloom { right: -20px; top: auto; bottom: -30px; width: 130px; height: 130px; color: #fff; opacity: .06; }
.rd-newsletter__k {
    position: relative;
    font-family: var(--rd-font-mono); font-size: 10px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--rd-cyan); margin-bottom: 10px; display: block;
}
.rd-newsletter--card h4 {
    position: relative;
    font-family: var(--rd-font-serif); font-weight: 600; font-size: 19px;
    line-height: 1.3; margin-bottom: 10px; color: #F4F4F0;
}
.rd-newsletter--card p { position: relative; font-size: 13.5px; opacity: .75; line-height: 1.5; margin-bottom: 16px; color: #F4F4F0; }
.rd-newsletter__form { display: flex; gap: 8px; position: relative; }
.rd-newsletter__input {
    flex: 1; min-width: 0; font-family: var(--rd-font-body); font-size: 13.5px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
    color: #fff; border-radius: var(--rd-radius-sm); padding: 11px 13px;
}
.rd-newsletter__input::placeholder { color: rgba(255,255,255,.45); }
.rd-newsletter__submit {
    font-family: var(--rd-font-body); font-weight: 600; font-size: 13.5px;
    background: var(--rd-cyan); color: var(--rd-text); border: none;
    border-radius: var(--rd-radius-sm); padding: 11px 16px; cursor: pointer; transition: background .2s;
}
.rd-newsletter__submit:hover { background: #33c1f5; }

/* ============================================================
   LIEN "VOIR TOUT →" DE SECTION
   ============================================================ */
.rd-lien {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--rd-cyan-dk);
    white-space: nowrap; transition: color .15s, gap .15s;
}
.rd-lien:hover { color: var(--rd-cyan); gap: 9px; }

/* ============================================================
   NOTE / SCORE — bloc robodomus/score-badge (utilisable partout,
   y compris dans le modèle d'une Boucle de requête)
   ============================================================ */
.rd-score-badge {
    display: inline-flex; align-items: baseline; gap: 4px;
    font-family: var(--rd-font-mono); font-weight: 600; font-size: 15px;
    color: var(--rd-cyan-dk);
}
.rd-score-badge small { font-size: 11px; color: var(--rd-text-3); font-weight: 400; }

/* ============================================================
   ACTUALITÉS — liste compacte type ticker (style Frandroid)
   ============================================================ */
.rd-actus-list {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px;
}
.rd-actu-row {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 13px 0; border-bottom: 1px solid var(--rd-border);
    text-decoration: none;
}
.rd-actu-row:nth-last-child(-n+2) { border-bottom: none; }
.rd-actu-row__tag {
    font-family: var(--rd-font-mono); font-size: 9.5px;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--rd-cyan-dk); flex: none; width: 150px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rd-actu-row__ttl {
    font-size: 14.5px; color: var(--rd-text); flex: 1; min-width: 0;
    line-height: 1.4; min-height: calc(14.5px * 1.4 * 2); transition: color .15s;
}
.rd-actu-row:hover .rd-actu-row__ttl { color: var(--rd-cyan-dk); }
.rd-actu-row__tm {
    font-family: var(--rd-font-mono); font-size: 10.5px;
    color: var(--rd-text-3); flex: none;
}
@media (max-width: 760px) { .rd-actus-list { grid-template-columns: 1fr; } }

/* ============================================================
   BONS PLANS — carrousel horizontal (meilleur prix marchand réel)
   ============================================================ */
.rd-deals-scroll {
    display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px;
    scrollbar-width: thin;
}
.rd-deal {
    flex: 0 0 240px;
    background: var(--rd-surface); border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius); padding: 16px;
    display: flex; flex-direction: column; gap: 9px;
    text-decoration: none; transition: border-color .15s, transform .15s;
}
.rd-deal:hover { border-color: var(--rd-border-s); transform: translateY(-2px); }
.rd-deal__m {
    aspect-ratio: 4/3; border-radius: var(--rd-radius-sm);
    overflow: hidden; background: var(--rd-paper-doux);
    position: relative;
}
.rd-deal__m > img { width: 100%; height: 100%; object-fit: cover; }
.rd-deal__name {
    font-family: var(--rd-font-serif); font-weight: 600; font-size: 16px;
    color: var(--rd-text); line-height: 1.25; min-height: calc(16px * 1.25 * 2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rd-deal__price {
    font-family: var(--rd-font-mono); font-weight: 600; font-size: 20px;
    color: var(--rd-cyan-dk);
}
.rd-deal__merchant {
    font-family: var(--rd-font-mono); font-size: 10.5px;
    color: var(--rd-text-3); text-transform: uppercase; letter-spacing: .06em;
}

/* ============================================================
   DOSSIERS & GUIDES — grille cards image
   ============================================================ */
.rd-dossiers-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.rd-dossier {
    border-radius: var(--rd-radius); overflow: hidden;
    background: var(--rd-surface); border: 1px solid var(--rd-border);
    display: block; text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.rd-dossier:hover { border-color: var(--rd-border-s); transform: translateY(-2px); }
.rd-dossier__m { aspect-ratio: 4/3; background: var(--rd-paper-doux); position: relative; overflow: hidden; }
.rd-dossier__m > img { width: 100%; height: 100%; object-fit: cover; }
.rd-dossier__b { padding: 14px 16px; }
.rd-dossier__cat {
    font-family: var(--rd-font-mono); font-size: 9.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--rd-cyan-dk);
}
.rd-dossier__title {
    font-family: var(--rd-font-serif); font-weight: 600; font-size: 16px;
    color: var(--rd-text); margin: 7px 0 5px; line-height: 1.3;
    min-height: calc(16px * 1.3 * 2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rd-dossier__excerpt {
    font-size: 13px; color: var(--rd-text-2); line-height: 1.5;
    min-height: calc(13px * 1.5 * 2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 900px) { .rd-dossiers-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rd-dossiers-grid { grid-template-columns: 1fr; } }

/* ============================================================
   MODULE "DERNIERS TESTS" — liste + sidebar (populaire + newsletter)
   ============================================================ */
.rd-tests-layout {
    display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start;
}
.rd-test-row {
    display: grid; grid-template-columns: 220px 1fr; gap: 22px;
    padding: 24px 0; border-bottom: 1px solid var(--rd-border);
}
/* Boucle de requête : chaque item est enveloppé dans son propre <li> par
   post-template, donc .rd-test-row est TOUJOURS unique enfant de son <li> —
   :first-child/:last-child sur .rd-test-row lui-même matcherait tout le
   temps. On cible la position du <li> dans la liste à la place. */
.rd-test-rows > li:first-child .rd-test-row { padding-top: 0; }
.rd-test-rows > li:last-child .rd-test-row { border-bottom: none; padding-bottom: 0; }
.rd-test-row__m {
    position: relative; aspect-ratio: 4/3; border-radius: var(--rd-radius);
    overflow: hidden; background: var(--rd-paper-doux);
}
.rd-test-row__title {
    font-family: var(--rd-font-serif); font-weight: 600; font-size: 22px;
    line-height: 1.2; margin: 8px 0;
}
.rd-test-row__title a { color: var(--rd-text); }
.rd-test-row__title a:hover { color: var(--rd-cyan-dk); }
.rd-test-row__excerpt { color: var(--rd-text-2); font-size: 14.5px; line-height: 1.55; max-width: 52ch; }
.rd-test-row__foot { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.rd-test-row__foot .wp-block-post-date { font-size: 13px; color: var(--rd-text-3); }

@media (max-width: 980px) {
    .rd-tests-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .rd-test-row { grid-template-columns: 1fr; }
}

.rd-side-panel {
    background: var(--rd-surface); border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius); padding: 22px; margin-bottom: 20px;
}
/* Module Populaire autonome (plus dans une colonne sidebar) : largeur
   raisonnable plutôt qu'étiré sur toute la largeur de section. */
.rd-side-panel--standalone { max-width: 640px; }
.rd-side-panel__k {
    font-family: var(--rd-font-mono); font-size: 10px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--rd-text-3);
    margin-bottom: 16px; display: block;
}
.rd-pop-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 12px 0; border-bottom: 1px solid var(--rd-border);
    text-decoration: none;
}
.rd-pop-item:first-child { padding-top: 0; }
.rd-pop-item:last-child { border-bottom: none; padding-bottom: 0; }
.rd-pop-item__n {
    font-family: var(--rd-font-serif); font-weight: 600; font-size: 24px;
    color: var(--rd-border); width: 28px; flex: none; line-height: 1;
}
.rd-pop-item__cat {
    font-family: var(--rd-font-mono); font-size: 9.5px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--rd-cyan-dk); display: block; margin-bottom: 4px;
}
.rd-pop-item__title { font-family: var(--rd-font-serif); font-weight: 600; font-size: 14.5px; color: var(--rd-text); line-height: 1.3; }

/* ============================================================
   COMPARATIF EN VEDETTE — vrai tableau (tests liés via metabox),
   traduit du CSS exact de la maquette (.cmp-teaser → .rd-cmp-teaser).
   ============================================================ */
.rd-cmp-teaser {
    background: var(--rd-surface); border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius); overflow: hidden;
}
.rd-cmp-teaser-scroll { overflow-x: auto; }
.rd-cmp-teaser table { width: 100%; border-collapse: collapse; }
.rd-cmp-teaser th, .rd-cmp-teaser td {
    padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--rd-border);
    font-size: 14.5px;
}
.rd-cmp-teaser thead th {
    background: var(--rd-paper-doux); font-family: var(--rd-font-mono); font-size: 9.5px;
    letter-spacing: .08em; text-transform: uppercase; color: var(--rd-text-2); font-weight: 500;
}
.rd-cmp-teaser tbody th {
    font-family: var(--rd-font-body); font-weight: 500; color: var(--rd-text-3); width: 170px;
}
.rd-cmp-prodname { font-family: var(--rd-font-serif); font-weight: 600; color: var(--rd-text); }
/* Sélecteur plus spécifique que "thead th"/"tbody td" pour que la teinte
   accent de la colonne hero gagne sur le fond gris du thead. */
.rd-cmp-teaser th.rd-cmp-hero-col,
.rd-cmp-teaser td.rd-cmp-hero-col { background: var(--rd-cyan-dim); }
.rd-cmp-teaser tbody tr:last-child td, .rd-cmp-teaser tbody tr:last-child th { border-bottom: none; }
.rd-cmp-cta { padding: 16px 18px; border-top: 1px solid var(--rd-border); display: flex; justify-content: flex-end; }

/* ============================================================
   BOUCLE DE REQUÊTE (core/query) — resets + habillage avec nos
   classes rd- appliquées via "className" sur le bloc Post Template,
   pour ne pas dépendre du layout "grid" natif de core/query.
   ============================================================ */
.wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.wp-block-post-template.rd-cards-grid,
.wp-block-post-template.rd-dossiers-grid,
.wp-block-post-template.rd-actus-list,
.wp-block-post-template.rd-list-grid { display: grid; }
.rd-list-grid { grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
@media (max-width: 760px) { .rd-list-grid { grid-template-columns: 1fr; } }

/* ============================================================
   VIGNETTE PRODUIT v3 — "vitre teintée" (spec validée 2026-08-10,
   voir rd_vignette_html() dans inc/vignette.php).
   Calques injectés par PHP DANS un conteneur position:relative +
   overflow:hidden + aspect-ratio fourni par l'appelant (.rd-card__m,
   .rd-dossier__m, .rd-deal__m, .rd-cmp-teaser__m, .rd-list-item__thumb,
   .rd-hp-hero__feat-media, .rd-hp-hero__side-thumb).

   Trois écarts par rapport à la v2, tous vérifiés au rendu :

   1. Le fond est presque net — 1,5 px contre 4. On doit reconnaître le
      parquet, la pelouse, l'eau : c'est ce qui raconte la catégorie. Le
      peu de flou restant n'est plus là pour masquer le fond mais pour
      empêcher une texture nette de vibrer contre le détourage.
   2. Le produit n'est plus centré dans la boîte, il est posé sur une
      ligne de sol (--vig-sol) et lesté d'une ombre de contact
      (.rd-ctx-contact). Centré et sans ombre au sol, il lévitait.
   3. Le halo silhouette Ink est remplacé par une ombre portée. Empilé
      sur un fond net et clair, il cernait le produit d'un liseré sale.
      Au survol, le produit se soulève au lieu de s'illuminer.

   Rien de tout ça n'est visible sans les fonds `terrain-*.jpg` : les
   `hero-*.jpg` sont panoramiques (2,4:1) et, cadrés en 4/3, n'affichent
   que leur ligne d'horizon. Voir rd_vignette_lifestyle_url().
   ============================================================ */
.rd-ctx-photo {
    position: absolute; inset: -2%;
    background-size: cover; background-position: center;
    filter: blur(var(--vig-bg-blur)) saturate(1.06);
}
.rd-ctx-tint { position: absolute; inset: 0; }
.rd-ctx-tint::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(200deg, rgba(31,126,150,.28), rgba(11,11,15,.16));
}
.rd-ctx-tint--light::after {
    background: linear-gradient(200deg, rgba(11,11,15,.06), rgba(11,11,15,.14));
}
/* L'ombre de contact : l'ellipse au sol qui rattache le produit au terrain.
   Posée sous le produit (z-index 1) pour que le détourage la recouvre. */
.rd-ctx-contact {
    position: absolute; left: 50%; z-index: 1; pointer-events: none;
    bottom: var(--vig-sol);
    transform: translate(-50%, 50%);
    width: calc(var(--vig-cut-size) * .82);
    height: calc(var(--vig-cut-size) * .17);
    background: radial-gradient(50% 50% at 50% 50%,
        rgba(11,11,15,var(--vig-contact)) 0%,
        rgba(11,11,15,calc(var(--vig-contact) * .45)) 45%,
        rgba(11,11,15,0) 72%);
    filter: blur(2px);
    transition: transform .28s ease, opacity .28s ease;
}
/* Ancré par le bas, jamais centré sur une ligne : le détourage est contenu
   puis aligné en bas de sa boîte, donc centrer la boîte colle le produit au
   bord inférieur du cadre quoi qu'on règle. --vig-sol dit combien de sol lui
   reste sous les pieds. */
.rd-product {
    position: absolute; z-index: 2; pointer-events: none;
    left: 50%; bottom: var(--vig-sol);
    transform: translateX(-50%);
    width: var(--vig-cut-size); height: var(--vig-cut-size);
    transition: transform .28s ease;
}
.rd-product img {
    display: block;
    width: 100% !important; height: 100% !important;
    object-fit: contain !important;
    object-position: center bottom;
    transition: filter .28s ease;
}
.rd-product--silhouette img {
    filter:
        drop-shadow(0 10px 22px rgba(11,11,15,.42))
        drop-shadow(0  2px  4px rgba(11,11,15,.30));
}
/* Survol : le produit se soulève, son ombre s'ouvre. Rien d'autre.
   Deux essais avant celui-ci. Un halo cyan diffus de 22 px : invisible,
   la lueur se dilue dans un fond clair. Un liseré cyan court et saturé :
   visible, mais il cerne le produit d'un trait néon qui n'a rien à voir
   avec la scène qu'on vient de construire. Reste le seul registre qui
   parle sur n'importe quel fond et ne coûte aucune couleur — la physique
   de l'objet : il monte de cinq pixels, son ombre portée s'allonge et
   s'adoucit comme celle d'un objet qui s'éloigne du sol, et l'ombre de
   contact s'élargit sous lui en pâlissant. */
a:hover .rd-product,
.rd-card:hover .rd-product { transform: translateX(-50%) translateY(-5px); }
a:hover .rd-product--silhouette img,
.rd-card:hover .rd-product--silhouette img {
    filter:
        drop-shadow(0 20px 32px rgba(11,11,15,.46))
        drop-shadow(0  3px  6px rgba(11,11,15,.32))
        drop-shadow(0 0  12px rgba(11,11,15,.30));
}
a:hover .rd-ctx-contact,
.rd-card:hover .rd-ctx-contact { transform: translate(-50%,50%) scale(1.12,.8); opacity: .8; }
/* Vignettes minuscules (mini-cartes, listes) : la ligne de sol et l'ombre
   de contact ne se lisent plus à cette taille, et le produit posé bas
   sort du cadre. On y revient à un produit centré, plus petit.
   Le centrage était annoncé ici mais pas appliqué : `bottom: 4%` gardait
   l'ancrage bas, et `object-position: center bottom` collait en plus le
   détourage contre le bord inférieur de sa boîte. Le produit se retrouvait
   posé en bas du cadre avec tout le vide au-dessus. */
.rd-list-item__thumb .rd-product,
.rd-hp-hero__side-thumb .rd-product {
    top: 50%; bottom: auto;
    transform: translate(-50%, -50%);
    width: 84%; height: 84%;
}
.rd-list-item__thumb .rd-product img,
.rd-hp-hero__side-thumb .rd-product img { object-position: center center; }
a:hover .rd-list-item__thumb .rd-product,
a:hover .rd-hp-hero__side-thumb .rd-product,
.rd-card:hover .rd-list-item__thumb .rd-product,
.rd-card:hover .rd-hp-hero__side-thumb .rd-product {
    transform: translate(-50%, -50%) translateY(-5px);
}
.rd-list-item__thumb .rd-ctx-contact,
.rd-hp-hero__side-thumb .rd-ctx-contact { display: none; }
.rd-thumb__photo {
    position: absolute; inset: 0;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
}
/* Bloc robodomus/vignette : remplit son conteneur (Query Loop) comme le
   faisait core/post-featured-image avant lui. */
.rd-vignette-block { position: absolute; inset: 0; display: block; }

/* ============================================================
   FOOTER (charte 2026 : fond noir #101014)
   ============================================================ */
.rd-footer {
    background: #101014;
    color: #F4F4F0;
    padding: 64px 0 32px;
    margin-top: 64px;
}
.rd-footer__grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
    margin-bottom: 40px;
}
.rd-footer__brand .rd-brand__name { color: #F4F4F0; }
.rd-footer__brand .rd-brand__tag { color: #00AEEF; }
.rd-footer__tag { font-size: 13px; color: rgba(244,244,240,.65); margin-top: 12px; line-height: 1.6; }
.rd-footer h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: rgba(244,244,240,.45); margin-bottom: 14px; }
.rd-footer ul li { margin-bottom: 8px; }
.rd-footer ul a { font-size: 14px; color: rgba(244,244,240,.75); transition: color .15s; }
.rd-footer ul a:hover { color: #00AEEF; }
.rd-footer__bottom {
    border-top: 1px solid rgba(244,244,240,.12); padding-top: 20px;
    font-size: 12px; color: rgba(244,244,240,.45); font-family: var(--rd-font-mono);
}

/* ============================================================
   SINGLE TEST
   ============================================================ */
.rd-test-hero {padding:18px 0 32px}
.rd-test-hero__grid {display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.rd-test-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.rd-test-title {
    font-family: var(--rd-font-serif); font-size: clamp(26px, 3vw, 40px);
    font-weight: 400; line-height: 1.2; color: var(--rd-text); margin-bottom: 12px;
}
.rd-test-stand { font-size: 15px; color: var(--rd-text-2); line-height: 1.7; margin-bottom: 24px; font-style: italic; }
.rd-test-meta { display: flex; gap: 20px; flex-wrap: wrap; }
.rd-test-meta__item { display: flex; flex-direction: column; gap: 2px; }
.rd-test-meta__label { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--rd-text-3); }
.rd-test-meta__val { font-size: 14px; color: var(--rd-text); font-weight: 500; }
.rd-test-hero__img {width:100%;height:100%;object-fit:cover}
.rd-test-hero__img img { width: 100%; height: 100%; object-fit: cover; }

/* Score global */
.rd-score-hero {
    display: flex; align-items: baseline; gap: 6px; margin-bottom: 20px;
}
.rd-score-hero__num {
    font-family: var(--rd-font-mono); font-size: 56px; font-weight: 500;
    color: var(--rd-cyan); line-height: 1;
}
.rd-score-hero__den { font-size: 20px; color: var(--rd-text-3); }
.rd-score-hero__label {
    font-size: 13px; color: var(--rd-text-2); margin-left: 4px;
    font-style: italic;
}

/* Score bars */
.rd-scores { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.rd-score-row { display: flex; align-items: center; gap: 12px; }
.rd-score-row__label { font-size: 12px; color: var(--rd-text-2); width: 140px; flex-shrink: 0; }
.rd-score-row__bar { flex: 1; height: 5px; background: var(--rd-surface-2); border-radius: 3px; overflow: hidden; }
.rd-score-row__fill { height: 100%; background: var(--rd-cyan); border-radius: 3px; transition: width .6s .1s; }
.rd-score-row__val { font-family: var(--rd-font-mono); font-size: 12px; color: var(--rd-text); min-width: 28px; text-align: right; }

/* Pros/Cons */
.rd-pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 32px 0; }
.rd-pros, .rd-cons { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: var(--rd-radius); padding: 20px 24px; }
.rd-pros h3 { color: var(--rd-tonte); font-size: 13px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px; }
.rd-cons h3 { color: #F87171; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px; }
.rd-pros ul li, .rd-cons ul li { font-size: 14px; color: var(--rd-text-2); padding: 4px 0 4px 16px; position: relative; line-height: 1.5; }
.rd-pros ul li::before { content: '+'; position: absolute; left: 0; color: var(--rd-tonte); font-weight: 700; }
.rd-cons ul li::before { content: '−'; position: absolute; left: 0; color: #F87171; font-weight: 700; }

/* Marchands */
.rd-merchants { display: flex; flex-direction: column; gap: 8px; margin: 24px 0; }
.rd-merchant {
    background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: var(--rd-radius);
    padding: 14px 20px; display: flex; align-items: center; justify-content: space-between;
    text-decoration: none; gap: 12px; transition: border-color .15s;
}
.rd-merchant:hover { border-color: var(--rd-cyan); }
.rd-merchant__name { font-size: 14px; font-weight: 600; color: var(--rd-text); }
.rd-merchant__del { font-size: 12px; color: var(--rd-text-3); }
.rd-merchant__price { font-family: var(--rd-font-mono); font-size: 16px; font-weight: 600; color: var(--rd-cyan); }
.rd-merchant__cta {
    background: var(--rd-cyan); color: #ffffff;
    padding: 7px 14px; border-radius: var(--rd-radius-sm); font-size: 12px; font-weight: 700;
}
.rd-merchant__cta:hover { background: var(--rd-cyan-dk); }

/* Content */
.rd-content { padding: 48px 0; }
.rd-content__inner {
    max-width: 720px;
    color: var(--rd-text-2); font-size: 16px; line-height: 1.8;
}
.rd-content__inner h2 { font-family: var(--rd-font-serif); font-size: 26px; color: var(--rd-text); margin: 36px 0 14px; font-weight: 400; }
.rd-content__inner h3 { font-size: 18px; color: var(--rd-text); margin: 24px 0 10px; font-weight: 600; }
.rd-content__inner p { margin-bottom: 16px; }
.rd-content__inner a { color: var(--rd-cyan); text-decoration: underline; }
.rd-content__inner img { border-radius: var(--rd-radius); margin: 24px 0; }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal {
    opacity: 0; transform: translateY(18px);
    transition: opacity .5s, transform .5s;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .05s; }
.reveal[data-d="2"] { transition-delay: .12s; }
.reveal[data-d="3"] { transition-delay: .22s; }

/* ============================================================
   SPEC VIGNETTES V9 — Lifestyle flou 3px + produit détouré
   Validée 29/06/2026.
   Note : le flou "léger" est volontaire. Au-delà de ~5px on perd
   la lisibilité du décor, autant mettre un aplat.
   ============================================================ */

/* Pseudo-élément ::before = fond lifestyle (flou 3px charte 2026) */
.rd-card__m--aspi::before,
.rd-mini-card__media--aspi::before,
.rd-list-item__thumb--aspi::before    { background-image: url('/assets/heroes/hero-maison.jpg'); }

.rd-card__m--tonte::before,
.rd-mini-card__media--tonte::before,
.rd-list-item__thumb--tonte::before   { background-image: url('/assets/heroes/hero-jardin-exterieur.jpg'); }

.rd-card__m--pisci::before,
.rd-mini-card__media--pisci::before,
.rd-list-item__thumb--pisci::before   { background-image: url('/assets/heroes/hero-piscine.jpg'); }

.rd-card__m--humano::before,
.rd-mini-card__media--humano::before,
.rd-list-item__thumb--humano::before  { background-image: url('/assets/heroes/hero-humanoides.jpg'); }

/* Styles communs ::before — fond lifestyle (SPEC V9 : flou 3px) */
.rd-card__m--aspi::before,
.rd-card__m--tonte::before,
.rd-card__m--pisci::before,
.rd-card__m--humano::before,
.rd-mini-card__media--aspi::before,
.rd-mini-card__media--tonte::before,
.rd-mini-card__media--pisci::before,
.rd-mini-card__media--humano::before,
.rd-list-item__thumb--aspi::before,
.rd-list-item__thumb--tonte::before,
.rd-list-item__thumb--pisci::before,
.rd-list-item__thumb--humano::before {
    content: '';
    position: absolute;
    inset: -4px;
    background-size: cover;
    background-position: center;
    filter: var(--vig-bg-filter);    /* blur(3px) brightness(.85) saturate(.95) — SPEC V9 */
    transform: scale(var(--vig-bg-scale));
    z-index: 0;
}

/* Pas d'overlay sombre sur fond clair (papier charte 2026) */
.rd-card__m--aspi::after,
.rd-card__m--tonte::after,
.rd-card__m--pisci::after,
.rd-card__m--humano::after,
.rd-mini-card__media--tonte::after { display: none; }

/* Photo produit : entière (contain) + ombre pour détacher du fond */
.rd-card__img,
.rd-mini-card__media img {
    position: relative;
    z-index: 2;
    object-fit: contain !important;
    padding: 10px;
    filter: var(--vig-cutout-shadow);
}

/* Placeholder et badges au-dessus */
.rd-img-ph { position: relative; z-index: 2; }
.rd-card__badge,
.rd-card__score { z-index: 3; position: relative; }

/* ── Vignette lifestyle + cutout (spec V9 — activable par produit via _test_product_cutout_id) ── */
.rd-feature__media-compo {
    position: relative; overflow: hidden;
    aspect-ratio: 4/3;
    max-height: 540px;
    background: var(--rd-paper-doux);
    flex-shrink: 0;
}
.rd-feature__media-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
    filter: var(--vig-bg-filter);
    transform: scale(var(--vig-bg-scale));
    z-index: 0;
}
.rd-feature__media-cutout-img {
    position: absolute;
    top: 11%; left: 11%;
    width: 78%; height: 78%;
    object-fit: contain;
    filter: var(--vig-cutout-shadow);
    z-index: 2;
}

/* ============================================================
   DOUBLE COLONNE — Tests | Guides (style Frandroid)
   ============================================================ */
.rd-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}
.rd-split__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rd-border);
}
.rd-split__head h2 {
    font-family: var(--rd-font-body);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--rd-text);
}
.rd-split__head h2 em { color: var(--rd-cyan); font-style: normal; }
.rd-split__divider {
    width: 1px;
    background: var(--rd-border);
    align-self: stretch;
    margin: 0 -24px;
}

/* List item compact */
.rd-list-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--rd-border);
    text-decoration: none;
    color: inherit;
    transition: opacity .15s;
}
.rd-list-item:last-child,
.rd-list-grid .rd-list-item:nth-last-child(-n+2) { border-bottom: none; }
.rd-list-item:hover { opacity: .8; }
.rd-list-item__thumb {
    width: 80px;
    height: 56px;
    border-radius: var(--rd-radius-sm);
    overflow: hidden;
    background: var(--rd-surface-2);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rd-list-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rd-list-item__thumb--aspi   { background: var(--rd-aspi-bg); }
.rd-list-item__thumb--tonte  { background: var(--rd-tonte-bg); }
.rd-list-item__thumb--pisci  { background: var(--rd-pisci-bg); }
.rd-list-item__thumb--humano { background: var(--rd-humano-bg); }
.rd-list-item__body {}
.rd-list-item__kicker {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.rd-list-item__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--rd-text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rd-list-item__meta {
    font-size: 11px;
    color: var(--rd-text-3);
    font-family: var(--rd-font-mono);
    margin-top: 4px;
    display: flex;
    gap: 8px;
}
.rd-list-item__score {
    color: var(--rd-cyan);
    font-weight: 700;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .rd-hp-hero__grid { grid-template-columns: 1fr; }
    .rd-hp-hero__side { flex-direction: row; }
    .rd-piliers-grid { grid-template-columns: repeat(2, 1fr); }
    .rd-cards-grid { grid-template-columns: repeat(2, 1fr); }
    .rd-feature { grid-template-columns: 1fr; }
    .rd-feature__media { min-height: 180px; }
    .rd-test-hero__grid { grid-template-columns: 1fr; }
    .rd-footer__grid { grid-template-columns: 1fr 1fr; }
    .rd-newsletter { flex-direction: column; text-align: center; }
    .rd-split { grid-template-columns: 1fr; gap: 32px; }
    .rd-split__divider { display: none; }
}
@media (max-width: 600px) {
    .rd-piliers-grid { grid-template-columns: repeat(2, 1fr); }
    .rd-cards-grid { grid-template-columns: 1fr; }
    .rd-pros-cons { grid-template-columns: 1fr; }
    .rd-footer__grid { grid-template-columns: 1fr; }
    .rd-hp-hero__main { padding: 24px 20px; }
    /* En dessous de 600px, 3 mini-cartes en ligne (héritées du breakpoint
       tablette 900px) n'ont plus la place : vignette 96px fixe x3 écrase
       le texte. On revient à l'empilement vertical d'origine. */
    .rd-hp-hero__side { flex-direction: column; }
}

/* ============================================================
   FIX D'URGENCE V9.4 — bug "lifestyle+cutout pleine page" au scroll
   Cause : un élément devient position:fixed/absolute et prend la viewport.
   Fix : isolation + overflow sur tous les conteneurs médias + disable des ::before parasites.
   ============================================================ */
.rd-feature, .rd-card, .rd-mini-card, .rd-list-item {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
}
.rd-feature__media,
.rd-card__m,
.rd-mini-card__media,
.rd-list-item__thumb {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
}
.rd-feature__media-img,
.rd-card__img,
.rd-mini-card__media img,
.rd-list-item__thumb img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    object-fit: cover;
    display: block;
}

/* Bloque TOUT background-image qui essaierait de s'évader du conteneur */
.rd-hp-hero, .rd-hp-hero__main, .rd-feature, .rd-card, .rd-mini-card {
    background-image: none !important;
}
/* Désactive les ::before/::after sur les cards/mini-cards qui ajoutent des bg lifestyle parasites */
.rd-card::before, .rd-card::after,
.rd-mini-card::before, .rd-mini-card::after,
.rd-list-item__thumb::before, .rd-list-item__thumb::after {
    display: none !important;
    content: none !important;
}

/* ============================================================
   V9.6 — PAGE TEST (single-test.php) importée de robodomus-2026
   Variables CSS harmonisées : --text-2 → --rd-text-2
   ============================================================ */

.rd-anc{display:block;position:relative;top:-80px;visibility:hidden}

.rd-cards-grid--3{grid-template-columns:repeat(3,1fr)}

@media(max-width:900px){.rd-cards-grid--3{grid-template-columns:1fr 1fr}}

@media(max-width:600px){.rd-cards-grid--3{grid-template-columns:1fr}}

.rd-test h2,.rd-test h1{font-family:var(--rd-font-serif)}

.rd-test-hero__top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}

.rd-test-hero__title{font-size:clamp(34px, 4.4vw, 58px);margin-bottom:16px;max-width:16ch}

.rd-test-hero__title em{display:block;font-size:.5em;font-weight:400;color:var(--rd-text-2);margin-top:.4em;line-height:1.25;max-width:none}

.rd-test-hero__meta{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:24px;font-size:13px;color:var(--rd-text-3)}

.rd-test-hero__fig{position:relative;border-radius:var(--rd-radius);overflow:hidden;aspect-ratio:5/4;background:
   radial-gradient(80% 80% at 50% 35%,#fff,var(--rd-paper-doux));display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(11,11,15,.06)}

.rd-test-hero__score-block{margin-bottom:16px}

.rd-test-hero__score{font-family:var(--rd-font-serif);font-weight:600;font-size:64px;line-height:1;color:var(--rd-cyan-dk)}

.rd-test-hero__score-n{font-size:64px}

.rd-test-hero__score-d{font-size:24px;color:var(--rd-text-3)}

.rd-test-hero__verdict{font-family:var(--rd-font-serif);font-style:italic;font-size:20px;line-height:1.5;color:var(--rd-text-2);border-left:3px solid var(--rd-cyan);padding-left:18px;margin:16px 0}

.rd-test-hero__cta-box{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;background:var(--rd-surface);border:1px solid var(--rd-border);border-radius:var(--rd-radius-sm)}

.rd-test-hero__price{font-family:var(--rd-font-serif);font-weight:600;font-size:30px}

@media(max-width:860px){.rd-test-hero__grid{grid-template-columns:1fr;gap:24px}}

.rd-test-verdict{padding:16px 0}

.rd-verdict-box{position:relative;overflow:hidden;background:var(--rd-surface);border:1px solid var(--rd-border);border-radius:var(--rd-radius);padding:24px}

.rd-verdict-box__head{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid rgba(11,11,15,.06);margin-bottom:16px}

.rd-verdict-box__score{font-family:var(--rd-font-serif);font-weight:600;font-size:34px;color:var(--rd-cyan-dk)}

.rd-verdict-box__label{font-size:18px;color:var(--rd-text-3)}

.rd-verdict-box__quote{font-family:var(--rd-font-serif);font-style:italic;font-size:18px;color:var(--rd-text-2);flex:1;min-width:240px;line-height:1.5}

.rd-proscons-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}

/* V9.7 — différenciation chromatique des cards pros/cons */
.rd-proscons{display:flex;flex-direction:column;padding:20px 22px 24px;border-radius:var(--rd-radius);border:1px solid var(--rd-border-s);background:var(--rd-surface)}
.rd-proscons--pros{background:#EAF5EE;border-color:rgba(29,122,74,.20)}
.rd-proscons--cons{background:#FBEEEE;border-color:rgba(192,57,43,.18)}

.rd-proscons__head{display:flex;align-items:center;gap:10px;font-family:var(--rd-font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px;font-weight:600}
.rd-proscons--pros .rd-proscons__head{color:var(--rd-pro)}
.rd-proscons--cons .rd-proscons__head{color:var(--rd-con)}
.rd-proscons ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rd-proscons li{position:relative;padding-left:26px;font-size:15px;line-height:1.5;color:var(--rd-text)}

/* V9.7 — puces = logo bloom 6 branches (étoile stylisée) */
.rd-proscons li::before{
    content:"";
    position:absolute;left:0;top:4px;
    width:16px;height:16px;
    background-color:currentColor;
    -webkit-mask-image:var(--bloom-mask);
    mask-image:var(--bloom-mask);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:contain;
    mask-size:contain;
}
.rd-proscons--pros li{color:var(--pro,#1D7A4A)}
.rd-proscons--cons li{color:var(--con,#C0392B)}
.rd-proscons--pros li::before{background-color:var(--pro,#1D7A4A)}
.rd-proscons--cons li::before{background-color:var(--con,#C0392B)}

@media(max-width:760px){.rd-proscons-grid{grid-template-columns:1fr}}

.rd-test-body{padding:32px 0}

.rd-test-body__grid{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:48px;align-items:start}

.rd-test-content{min-width:0}

.rd-test-content>p{margin-bottom:16px;color:var(--rd-text-2)}

/* Mention sources en pied d'article : sobre, pas au même poids que le
   texte éditorial (héritait du corps à 16px avant ce fix). */
.rd-test-content .rd-meta-source {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--rd-text-3);
  margin-top: 4px;
}
.rd-test-content .rd-meta-source a { color: var(--rd-text-3); text-decoration: underline; }

/* Séparateur juste avant les sources : trait court plutôt que la ligne
   pleine largeur par défaut de core/separator. */
.rd-test-content .wp-block-separator {
  border: none;
  border-top: 1px solid rgba(11,11,15,.08);
  width: 48px;
  margin: 28px 0 14px;
}

.rd-test-lead{font-family:var(--rd-font-serif);font-size:21px;line-height:1.6;color:var(--rd-text)!important}

.rd-test-content h2{position:relative;display:flex;align-items:center;gap:12px;margin:32px 0 12px;scroll-margin-top:80px}

.rd-test-content h2::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background: var(--rd-cyan);
  -webkit-mask-image: var(--bloom-mask);
  mask-image: var(--bloom-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.rd-test-content strong{color:var(--rd-text);font-weight:600}

.rd-test-content figure{margin:24px 0}

.rd-test-content figure img{border-radius:var(--rd-radius-sm)}

.rd-test-content figcaption{font-size:13px;color:var(--rd-text-3);font-style:italic;margin-top:8px}

/* Fond explicite : sans lui la fiche technique laissait voir le papier
   (--rd-bg) à travers ses lignes et sortait entièrement grise, alors que
   les autres cadres de l'article sont posés sur blanc. */
.rd-specs{margin:24px 0;background:var(--rd-surface);border:1px solid var(--rd-border);border-radius:var(--rd-radius-sm);overflow:hidden}

.rd-specs>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--rd-paper-doux);font-family:var(--rd-font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--rd-text-2)}

.rd-specs>summary::-webkit-details-marker{display:none}

.rd-specs>summary::after{content:"+";font-size:18px}

.rd-specs[open]>summary::after{content:"–"}

/* Repli « En savoir plus » de la fiche technique. Les specs de tête sont
   toujours visibles ; le reste se déplie. Le sélecteur d'origine visait
   .rd-specs>summary en enfant direct, qui ne couvre plus ce niveau. */
.rd-specs-more{border-top:1px solid var(--rd-border)}
.rd-specs-more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--rd-paper-doux);font-family:var(--rd-font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--rd-text-2)}
.rd-specs-more>summary::-webkit-details-marker{display:none}
.rd-specs-more>summary::after{content:"+";font-size:18px}
.rd-specs-more[open]>summary::after{content:"–"}
.rd-specs-table--vedettes td{font-size:15.5px}
.rd-specs-table--vedettes td:last-child{font-weight:500;color:var(--rd-text-1)}

.rd-specs-table{width:100%;border-collapse:collapse;font-size:15px;margin:0}

.rd-specs-table th{text-align:left;background:var(--rd-surface);padding:12px 18px 6px;font-family:var(--rd-font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--rd-cyan-dk)}

.rd-specs-table td{padding:10px 18px;border-bottom:1px solid rgba(11,11,15,.06)}

.rd-specs-table tr:last-child td{border-bottom:0}

.rd-specs-table td:first-child{color:var(--rd-text-3);width:46%}

.rd-scoring{display:flex;flex-direction:column;gap:14px;background:var(--rd-surface);border:1px solid var(--rd-border);border-radius:var(--rd-radius);padding:24px;margin:16px 0}

.rd-test-bar{display:grid;grid-template-columns:160px 1fr 42px;gap:16px;align-items:center}

.rd-test-bar__label{font-size:14px;color:var(--rd-text-2)}

.rd-test-bar__track{height:8px;background:var(--rd-paper-doux);border-radius:999px;overflow:hidden}

.rd-test-bar__fill{height:100%;width:0;border-radius:999px;background:var(--rd-cyan-dk);transition:width 1.1s cubic-bezier(.4,0,.2,1)}

.rd-test-bar__val{font-family:var(--rd-font-mono);font-size:14px;font-weight:500;text-align:right}

@media(max-width:600px){.rd-test-bar{grid-template-columns:104px 1fr 36px;gap:10px}}

.rd-profil-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}

.rd-profil-card{padding:16px;border-radius:var(--rd-radius-sm);border:1px solid var(--rd-border)}

.rd-profil-card__head{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;margin-bottom:10px}

.rd-profil-card--yes{background:rgba(29,122,74,.05)}

.rd-profil-card--yes .rd-profil-card__head{color:var(--rd-pro)}

.rd-profil-card--no{background:rgba(192,57,43,.04)}

.rd-profil-card--no .rd-profil-card__head{color:var(--rd-con)}

.rd-profil-card p,.rd-profil-card li{font-size:14.5px;color:var(--rd-text-2);line-height:1.55}

.rd-profil-card ul{margin:0;padding-left:18px}

@media(max-width:600px){.rd-profil-grid{grid-template-columns:1fr}}

.rd-verdict-final{position:relative;overflow:hidden;margin:32px 0 0;padding:24px;background:#101014;color:#F4F4F0;border-radius:var(--rd-radius)}

.rd-verdict-final__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}

.rd-verdict-final__head h3{color:#fff;margin:0}

.rd-verdict-final__score{font-family:var(--rd-font-serif);font-weight:600;font-size:38px;color:#fff}

.rd-verdict-final__score small{font-size:18px;opacity:.6}

.rd-verdict-final__quote{font-family:var(--rd-font-serif);font-style:italic;font-size:18px;line-height:1.55;opacity:.92;margin:0}

.rd-bloom-wm{position:absolute;right:-26px;top:-30px;width:160px;height:160px;color:var(--rd-cyan);opacity:.05;pointer-events:none}

.rd-bloom-wm--light{color:#fff;opacity:.06;top:auto;bottom:-40px;right:-24px;width:170px;height:170px}

.rd-test-rail{position:sticky;top:80px;display:flex;flex-direction:column;gap:18px}

.rd-rail-buy{background:var(--rd-surface);border:1px solid var(--rd-border);border-radius:var(--rd-radius);padding:18px;box-shadow:0 6px 24px rgba(11,11,15,.05)}

/* Conteneur de vignette : position:relative + overflow + aspect-ratio, comme
   les autres appelants de rd_vignette_html(). Le centrage flex a sauté, les
   calques se positionnent en absolu. */
.rd-rail-buy__thumb{position:relative;background:var(--rd-paper-doux);border-radius:var(--rd-radius-sm);aspect-ratio:4/3;overflow:hidden;margin-bottom:14px}

/* Ne vise que le repli photo, en enfant direct : le détourage, lui, est
   imbriqué dans .rd-product et doit garder son object-fit:contain. Sans le
   sélecteur d'enfant direct, cette règle — plus tardive dans le fichier —
   gagnerait sur .rd-product img et rognerait le produit. */
.rd-rail-buy__thumb > img{width:100%;height:100%;object-fit:cover}

.rd-rail-buy__scorerow{display:flex;align-items:center;gap:10px;margin-bottom:12px}

.rd-rail-buy__score{font-family:var(--rd-font-serif);font-weight:600;font-size:26px;line-height:1;color:var(--rd-cyan-dk)}

.rd-rail-buy__score small{font-size:14px;color:var(--rd-text-3)}

.rd-rail-buy__lbl{font-family:var(--rd-font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--rd-text-3)}

.rd-rail-buy__price{font-family:var(--rd-font-serif);font-weight:600;font-size:28px;line-height:1.1;margin:6px 0 2px}

.rd-rail-buy__btn{width:100%;justify-content:center;margin-top:14px;padding:13px}

.rd-rail-buy__best{margin-top:12px;padding-top:12px;border-top:1px solid rgba(11,11,15,.06);font-size:13px;color:var(--rd-text-2)}
.rd-rail-buy__best-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;margin-top:4px;text-decoration:none;color:inherit;border-radius:4px;transition:opacity .15s}
.rd-rail-buy__best-row:hover{opacity:.75}
.rd-rail-buy__best-row b{flex:0 1 auto;max-width:100%;color:var(--rd-text);font-weight:600;line-height:1.35}
.rd-rail-buy__best-price{white-space:normal;flex:0 0 auto;max-width:100%;font-family:var(--rd-font-serif);font-size:18px;font-weight:600;color:var(--rd-text)}
.rd-rail-buy__best-catalog{margin-top:2px;font-size:12px;color:var(--rd-text-3)}

.rd-price-was{color:var(--rd-text-3);font-weight:400;text-decoration:line-through;font-size:.85em}

.rd-test-buy{padding:32px 0;border-top:1px solid rgba(11,11,15,.06)}

.rd-test-buy__head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:16px}

.rd-merchant-list{display:flex;flex-direction:column;gap:10px}

.rd-disclaimer{font-size:12.5px;color:var(--rd-text-3);margin-top:16px}

.rd-disclaimer a{text-decoration:underline}

.rd-test-author{padding:32px 0;border-top:1px solid rgba(11,11,15,.06)}

.rd-author-box{display:flex;gap:16px;align-items:flex-start}

.rd-author-box__av{width:60px;height:60px;border-radius:50%;background:var(--rd-cyan-dim);color:var(--rd-cyan);flex:none;display:flex;align-items:center;justify-content:center}

.rd-author-box__av .rd-bloom{width:32px;height:32px}

.rd-author-box__name{font-weight:600;font-size:16px}

.rd-author-box__role{font-size:13px;color:var(--rd-text-3);margin-bottom:8px}

.rd-author-box__bio{font-size:14px;color:var(--rd-text-2);max-width:60ch;margin-bottom:8px}

.rd-test-related{padding:32px 0;border-top:1px solid rgba(11,11,15,.06)}

/* Barre d'achat collante — V9.9 : plus seulement mobile.
   Elle n'existait qu'en dessous de 980 px alors que c'est sur desktop que
   l'article est le plus long et le CTA du hero le plus vite hors écran.
   Masquée par défaut, révélée par .is-visible (app.js) après ~420 px de scroll.
   padding-inline aligne le contenu sur --rd-wrap sans conteneur supplémentaire. */
.rd-mcta{
  display:flex;align-items:center;gap:14px;
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  padding:10px max(16px, calc((100vw - var(--rd-wrap)) / 2));
  background:color-mix(in srgb,var(--rd-surface) 96%,transparent);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--rd-border);
  box-shadow:0 -4px 20px rgba(11,11,15,.08);
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.rd-mcta.is-visible{transform:none}
.rd-mcta__thumb{width:44px;height:44px;flex:none;border-radius:var(--rd-radius-sm);overflow:hidden;background:var(--rd-paper-doux);border:1px solid var(--rd-border)}
.rd-mcta__thumb img{width:100%;height:100%;object-fit:contain;display:block}
.rd-mcta__info{display:flex;flex-direction:column;line-height:1.2;min-width:0;flex:1}
.rd-mcta__name{font-family:var(--rd-font-mono);font-size:12px;letter-spacing:.04em;color:var(--rd-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-mcta__price{font-family:var(--rd-font-serif);font-weight:600;font-size:18px}
.rd-mcta .rd-btn{flex:none;white-space:nowrap}
.single-test{padding-bottom:68px}

@media(max-width:980px){
  .rd-test-body__grid{grid-template-columns:1fr;gap:40px}
  .rd-test-rail{position:static}
  .rd-rail-buy{max-width:420px}
  .rd-mcta__thumb{display:none}
  .rd-mcta__name{max-width:46vw}
}

.rd-newsletter .rd-bloom-wm--light{color:var(--rd-cyan);opacity:.12}

/* ========================================
   RD-SCORING — pour wp:table (override du flex parent)
   Le thème avait .rd-scoring{display:flex — qui ne marche pas
   avec wp-block-table. Cette règle cible la table interne.
   ======================================== */

table.rd-scoring,
.wp-block-table.rd-scoring table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius-sm);
  overflow: hidden;
}

table.rd-scoring thead,
.wp-block-table.rd-scoring table thead { background: var(--rd-paper-doux); }

table.rd-scoring th,
.wp-block-table.rd-scoring table th {
  text-align: left;
  padding: 12px 14px;
  font-family: var(--rd-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rd-text-2);
  border-bottom: 1px solid var(--rd-border);
}

table.rd-scoring td,
.wp-block-table.rd-scoring table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(11,11,15,.06);
  color: var(--rd-text-2);
}

table.rd-scoring tbody tr:last-child td,
.wp-block-table.rd-scoring table tbody tr:last-child td { border-bottom: 0; }

table.rd-scoring tbody tr:nth-child(even),
.wp-block-table.rd-scoring table tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.015);
}

table.rd-scoring td strong,
.wp-block-table.rd-scoring table td strong { color: var(--rd-text); }

table.rd-scoring td:nth-child(2),
.wp-block-table.rd-scoring table td:nth-child(2) {
  font-family: var(--rd-font-serif);
  font-weight: 600;
  color: var(--rd-cyan-dk);
  white-space: nowrap;
  width: 80px;
}

/* ============================================================
   ÉDITORIAL — styles de contenu (chapô, cartes rail composées en blocs)
   ============================================================ */

/* Chapô magazine — paragraphe avec className rd-chapo dans le contenu */
.rd-chapo {
  font-family: var(--rd-font-serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.6;
  color: var(--rd-text-2);
  margin: 0 0 8px;
}

/* Vue produit « studio » — PNG détouré posé sur fond papier doux. Registre
   intermédiaire entre la composition lifestyle (hero/cartes) et les visuels
   documentaires constructeur : pour les vues produit sur fond blanc. */
.rd-img-studio { background: var(--rd-paper-doux); border-radius: var(--rd-radius); padding: 32px 8%; }
.rd-img-studio img { margin: 0 auto; max-height: 440px; width: auto; object-fit: contain; }
.rd-img-studio figcaption { text-align: center; padding-bottom: 4px; }

/* ============================================================
   FICHE TECHNIQUE — carte "L'essentiel" (remplace le tableau brut)
   Composée en blocs (core/group), pas un bloc custom : contenu statique,
   pas de donnée dynamique à calculer. Voir patterns/spec-card.php.
   ============================================================ */
.rd-spec-card { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: var(--rd-radius); overflow: hidden; margin: 16px 0 24px; }
.rd-spec-card__head {
  padding: 16px 22px; border-bottom: 1px solid rgba(11,11,15,.06);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--rd-paper-doux);
}
.rd-spec-card__k { font-family: var(--rd-font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--rd-text-2); margin: 0; }
.rd-spec-score { display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--rd-font-serif); font-weight: 600; font-size: 17px; color: var(--rd-cyan-dk); }
.rd-spec-score small { font-size: 11px; color: var(--rd-text-3); font-weight: 400; }

.rd-spec-row { display: grid; grid-template-columns: 170px 1fr; gap: 18px; padding: 15px 22px; border-bottom: 1px solid rgba(11,11,15,.06); }
.rd-spec-row:last-child { border-bottom: none; }
/* Alternance explicite via classe plutôt que nth-child : la carte a un
   conteneur __head en frère aîné des lignes, nth-child/nth-of-type y
   compterait ce div et décalerait la parité de toutes les lignes. */
.rd-spec-row--alt { background: rgba(11,11,15,.015); }
.rd-spec-row--highlight { background: rgba(0,174,239,.10); }
.rd-spec-row--highlight .rd-spec-row__label { color: var(--rd-cyan-dk); }
.rd-spec-row__label { font-family: var(--rd-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--rd-text-3); margin: 0; }
.rd-spec-row__value { font-size: 14.5px; color: var(--rd-text); line-height: 1.5; margin: 0; }
.rd-spec-row__value strong { font-weight: 600; color: var(--rd-text); }
@media (max-width: 520px) { .rd-spec-row { grid-template-columns: 1fr; gap: 4px; } }

/* Cartes rail composées en blocs (core/group.rd-rail-buy + heading/list) */
.rd-rail-buy h3 {
  font-family: var(--rd-font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rd-text-3);
  margin: 0 0 12px;
}

.rd-rail-buy ul { margin: 0; padding-left: 18px; }

.rd-rail-buy li { font-size: 14px; line-height: 1.55; color: var(--rd-text-2); margin-bottom: 6px; }

.rd-rail-buy p { font-size: 13.5px; line-height: 1.55; color: var(--rd-text-2); margin: 0 0 8px; }

/* Liens éditoriaux des cartes composées en blocs — surtout pas les .rd-btn du
   rail (sinon color = background, bouton au texte invisible). */
.rd-rail-buy p a { color: var(--rd-cyan-dk); text-decoration: underline; }

/* ============================================================
   FORMULAIRE DE CONTACT — bloc robodomus/contact-form
   ============================================================ */
.rd-contact-form {
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius);
    padding: 36px 40px;
    max-width: 560px;
}
.rd-contact-form__head h2 {
    font-family: var(--rd-font-serif); font-size: 22px; font-weight: 400;
    color: var(--rd-text); margin-bottom: 6px;
}
.rd-contact-form__head p { font-size: 14px; color: var(--rd-text-2); margin-bottom: 20px; }
.rd-contact-form__form { display: flex; flex-direction: column; gap: 16px; }
.rd-contact-form__row { display: flex; flex-direction: column; gap: 6px; }
.rd-contact-form__row label {
    font-family: var(--rd-font-mono); font-size: 11px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--rd-text-2);
}
.rd-contact-form__row input,
.rd-contact-form__row textarea {
    font-family: var(--rd-font-body); font-size: 14px;
    background: #fff; border: 1px solid var(--rd-border);
    color: var(--rd-text); border-radius: var(--rd-radius-sm); padding: 11px 13px;
    resize: vertical;
}
.rd-contact-form__row input:focus,
.rd-contact-form__row textarea:focus {
    outline: none; border-color: var(--rd-cyan);
}
.rd-contact-form__form .rd-btn--cta { align-self: flex-start; border: none; cursor: pointer; }
.rd-contact-form__hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.rd-contact-form__notice {
    font-size: 14px; padding: 14px 16px; border-radius: var(--rd-radius-sm);
}
.rd-contact-form__notice--ok { background: rgba(0,174,239,.10); color: var(--rd-cyan-dk); }
.rd-contact-form__notice--err { background: rgba(192,57,43,.08); color: #C0392B; }

/* ============================================================
   MODULES PAGE TEST — V9.9
   Portage des prototypes Claude Design (bandeau specs, scorecard,
   face-à-face, historique de prix, sommaire collant).
   Aucune couleur en dur : tout passe par les tokens de la charte 2026.
   ============================================================ */

/* ── Bandeau specs clés ─────────────────────────────────── */
.rd-keyspecs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  background:var(--rd-surface);border:1px solid var(--rd-border);
  border-radius:var(--rd-radius);overflow:hidden;margin:0 0 var(--rd-space-6);
}
.rd-keyspecs__item{padding:20px;border-left:1px solid rgba(11,11,15,.06);min-width:0}
.rd-keyspecs__item:first-child{border-left:0}
.rd-keyspecs__label{
  font-family:var(--rd-font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rd-text-3);margin-bottom:10px;
}
.rd-keyspecs__val{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap}
.rd-keyspecs__num{
  font-family:var(--rd-font-mono);font-size:26px;font-weight:500;
  color:var(--rd-text);line-height:1.1;
  /* tabular-nums : sans ça le compteur animé fait tressauter la largeur */
  font-variant-numeric:tabular-nums;
}
.rd-keyspecs__unit{font-size:13px;color:var(--rd-text-3)}
@media(max-width:600px){
  .rd-keyspecs{grid-template-columns:1fr 1fr}
  .rd-keyspecs__item{padding:16px}
  .rd-keyspecs__item:nth-child(odd){border-left:0}
  .rd-keyspecs__item:nth-child(n+3){border-top:1px solid rgba(11,11,15,.06)}
  .rd-keyspecs__num{font-size:22px}
}

/* ── Scorecard (note globale + barres) ──────────────────── */
.rd-scorecard{
  background:var(--rd-surface);border:1px solid var(--rd-border);
  border-radius:var(--rd-radius);padding:24px;margin:0 0 var(--rd-space-6);
}
.rd-scorecard__head{
  display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid rgba(11,11,15,.06);margin-bottom:20px;
}
.rd-scorecard__overall{
  font-family:var(--rd-font-serif);font-weight:600;font-size:34px;
  color:var(--rd-cyan-dk);line-height:1;
}
.rd-scorecard__overall span{font-size:18px;color:var(--rd-text-3)}
.rd-scorecard__intro{flex:1;min-width:240px}
.rd-scorecard__intro p{font-size:14px;color:var(--rd-text-2);line-height:1.5;margin:4px 0 0}
/* La scorecard porte déjà surface + bordure : la .rd-scoring qu'elle contient
   ne doit pas en remettre une couche (double cadre). */
.rd-scorecard .rd-scoring{background:none;border:0;border-radius:0;padding:0;margin:0}

/* ── Face à face ────────────────────────────────────────── */
.rd-faceoff__note{font-size:14px;color:var(--rd-text-3);margin:0 0 16px}
/* Titre et chapeau vivent hors du cadre : un H2 posé dans une boîte sans
   padding collait son picto au filet. Le cadre n'entoure que le tableau,
   qui porte lui-même ses gouttières. */
.rd-faceoff{margin:0 0 var(--rd-space-6)}
.rd-faceoff__frame{
  background:var(--rd-surface);border:1px solid var(--rd-border);
  border-radius:var(--rd-radius);
  /* Le tableau défile dans son cadre plutôt que de pousser la page
     horizontalement — 3 colonnes de specs ne tiennent pas en 360 px. */
  overflow-x:auto;
}
.rd-faceoff__table{width:100%;min-width:520px;border-collapse:collapse;font-size:14.5px}
.rd-faceoff__table th,
.rd-faceoff__table td{padding:14px 18px;text-align:left;vertical-align:top}
.rd-faceoff__table thead th{background:var(--rd-paper-doux);font-weight:500}
.rd-faceoff__table thead th:first-child{
  font-family:var(--rd-font-mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--rd-text-2);
}
.rd-faceoff__table tbody th{
  font-weight:500;color:var(--rd-text-3);
  border-top:1px solid rgba(11,11,15,.06);white-space:nowrap;
}
.rd-faceoff__table tbody td{border-top:1px solid rgba(11,11,15,.06);color:var(--rd-text-2)}
.rd-faceoff__table .is-hero{background:var(--rd-cyan-dim);color:var(--rd-text)}
.rd-faceoff__name{
  display:block;font-family:var(--rd-font-serif);font-weight:600;
  font-size:14.5px;color:var(--rd-text);line-height:1.25;
}
a.rd-faceoff__name:hover{color:var(--rd-cyan-dk)}
.rd-faceoff__price{
  display:block;font-family:var(--rd-font-mono);font-size:10.5px;
  color:var(--rd-text-3);margin-top:3px;
}

/* ── Historique de prix ─────────────────────────────────── */
.rd-pricehist{
  background:var(--rd-surface);border:1px solid var(--rd-border);
  border-radius:var(--rd-radius);padding:22px 24px;margin-top:var(--rd-space-5);
}
.rd-pricehist__head{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:20px;flex-wrap:wrap;margin-bottom:16px;
}
.rd-pricehist__summary{font-size:14px;color:var(--rd-text-2);margin:6px 0 0}
.rd-pricehist__summary strong{font-family:var(--rd-font-mono);font-weight:600;color:var(--rd-text)}
.rd-pricehist__count{color:var(--rd-text-3);white-space:nowrap}
.rd-spark{width:100%;height:90px;display:block;overflow:visible}

/* ── Sommaire + progression de lecture ──────────────────── */
.rd-toc{
  background:var(--rd-surface);border:1px solid var(--rd-border);
  border-radius:var(--rd-radius);padding:20px 22px;margin-top:18px;
}
.rd-toc__list{list-style:none;margin:14px 0 0;padding:0;counter-reset:none}
.rd-toc__list li{margin:0}
.rd-toc__list a{
  display:block;padding:8px 0 8px 12px;font-size:13.5px;line-height:1.4;
  color:var(--rd-text-2);border-left:2px solid var(--rd-border);
  transition:color .15s,border-color .15s;
}
.rd-toc__list a:hover{color:var(--rd-cyan-dk)}
.rd-toc__list a.is-current{color:var(--rd-cyan-dk);font-weight:600;border-left-color:var(--rd-cyan)}
.rd-toc__progress{margin-top:14px;padding-top:12px;border-top:1px solid rgba(11,11,15,.06)}
.rd-toc__track{height:5px;border-radius:var(--rd-radius-pill);background:var(--rd-paper-doux);overflow:hidden;margin-top:8px}
.rd-toc__fill{height:100%;width:0;border-radius:var(--rd-radius-pill);background:var(--rd-cyan);transition:width .1s linear}
@media(max-width:980px){
  /* Rail dépilée sous 980 px : un sommaire non collant en milieu de page
     n'aide pas, l'article est déjà linéaire au doigt. */
  .rd-toc{display:none}
}

@media(prefers-reduced-motion:reduce){
  .rd-mcta,.rd-toc__fill{transition:none}
  /* Vignette v3 : l'ombre s'ouvre toujours au survol, la levée non. */
  .rd-product,.rd-ctx-contact{transition:none}
  a:hover .rd-product,.rd-card:hover .rd-product{transform:translateX(-50%)}
  a:hover .rd-list-item__thumb .rd-product,
  a:hover .rd-hp-hero__side-thumb .rd-product,
  .rd-card:hover .rd-list-item__thumb .rd-product,
  .rd-card:hover .rd-hp-hero__side-thumb .rd-product{transform:translate(-50%,-50%)}
  .rd-hp-hero__feat:hover .rd-hp-hero__feat-media--bandeau .rd-product{transform:none}
  a:hover .rd-ctx-contact,.rd-card:hover .rd-ctx-contact{transform:translate(-50%,50%);opacity:1}
}

/* ── Cycle en étapes (pattern robodomus/cycle-etapes) ───── */
.rd-cycle{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:12px;margin:0 0 var(--rd-space-6);
}
.rd-cycle__step{
  background:var(--rd-surface);border:1px solid var(--rd-border);
  border-radius:var(--rd-radius);padding:18px 18px 22px;
  position:relative;overflow:hidden;min-width:0;
}
/* Liseré de progression : opacité croissante d'une étape à l'autre.
   En CSS et non en style inline — un style non déclaré dans les attributs
   du bloc casse la validation Gutenberg à l'ouverture de l'éditeur. */
.rd-cycle__step::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--rd-cyan);
}
.rd-cycle__step:nth-child(1)::after{opacity:.25}
.rd-cycle__step:nth-child(2)::after{opacity:.5}
.rd-cycle__step:nth-child(3)::after{opacity:.75}
.rd-cycle__step:nth-child(n+4)::after{opacity:1}
.rd-cycle__n{
  font-family:var(--rd-font-mono);font-size:24px;color:var(--rd-paper-doux);
  line-height:1;margin:0 0 8px;
}
.rd-cycle__title{font-size:14px;font-weight:600;color:var(--rd-text);margin:0 0 6px}
.rd-cycle__desc{
  font-size:12.5px;color:var(--rd-text-2);line-height:1.55;margin:0;
  /* Descriptions courtes dans des colonnes étroites : un mot technique long
     doit se couper plutôt que déborder la carte. */
  overflow-wrap:anywhere;
}

/* ============================================================
   COMPARATEUR — V9.9
   Un comparateur par type de robot (taxonomy-robot_type.php) +
   page sommaire (page-comparateur.php).
   ============================================================ */

.rd-comparator{padding:40px 0 140px}
.rd-comparator__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:28px;flex-wrap:wrap;margin-bottom:28px;
}
.rd-comparator__title{
  font-family:var(--rd-font-serif);font-size:clamp(28px,3.5vw,44px);
  font-weight:400;line-height:1.15;margin:12px 0 0;max-width:22ch;
}
.rd-comparator__lead{
  font-size:15px;color:var(--rd-text-2);line-height:1.7;
  margin:14px 0 0;max-width:58ch;text-wrap:pretty;
}
.rd-eyebrow--accent{color:var(--rd-cyan)}
.rd-comparator__bar{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.rd-comparator__count-n{
  font-family:var(--rd-font-serif);font-size:32px;font-weight:600;
  color:var(--rd-cyan-dk);line-height:1;
}
.rd-comparator__empty,
.rd-comparator__noresult{
  border:1px dashed var(--rd-border-s);border-radius:var(--rd-radius);
  padding:48px 24px;text-align:center;background:var(--rd-surface);
  color:var(--rd-text-3);font-size:14px;
}
.rd-comparator__empty-title{
  font-family:var(--rd-font-serif);font-size:19px;font-weight:600;
  color:var(--rd-text);margin:0 0 8px;
}
.rd-comparator__content{margin-top:48px;max-width:var(--reading)}

/* ── Sommaire des comparateurs ──────────────────────────── */
.rd-chub{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.rd-chub__card{
  display:flex;flex-direction:column;gap:6px;
  background:var(--rd-surface);border:1px solid var(--rd-border);
  border-radius:var(--rd-radius);padding:22px 24px;
  transition:transform .15s,border-color .15s,box-shadow .15s;
}
.rd-chub__card:hover{
  transform:translateY(-2px);border-color:var(--rd-cyan);
  box-shadow:0 6px 24px rgba(0,174,239,.12);
}
.rd-chub__mark{display:block;width:22px;height:22px;color:var(--rd-cyan);margin-bottom:6px}
.rd-chub__mark .rd-bloom{width:100%;height:100%;display:block}
.rd-chub__name{font-family:var(--rd-font-serif);font-size:19px;font-weight:600;color:var(--rd-text);line-height:1.25}
.rd-chub__count{font-size:11px;color:var(--rd-text-3)}

/* ── Filtres ────────────────────────────────────────────── */
.rd-cfilters{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px;
  background:var(--rd-surface);border:1px solid var(--rd-border);
  border-radius:var(--rd-radius);padding:22px 24px;margin-bottom:28px;
}
.rd-cfilters__group{border:0;margin:0;padding:0;min-width:0}
.rd-cfilters__group legend{padding:0}
.rd-cfilters__budget{
  display:block;font-family:var(--rd-font-serif);font-size:24px;
  font-weight:600;line-height:1;margin:10px 0;
}
.rd-cfilters__range{width:100%;accent-color:var(--rd-cyan);cursor:pointer}
.rd-cfilters__bounds{display:flex;justify-content:space-between;font-size:10px;color:var(--rd-text-3);margin-top:6px}
.rd-cfilters__pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

/* Pilules : la case/le radio natif reste dans le DOM pour le clavier et les
   lecteurs d'écran, on ne le masque qu'à l'œil. */
.rd-pill{position:relative;display:inline-flex}
.rd-pill input{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;opacity:0;cursor:pointer;
}
.rd-pill span{
  padding:7px 13px;border-radius:var(--rd-radius-pill);
  font-size:12.5px;font-weight:600;white-space:nowrap;
  background:var(--rd-surface-2);border:1px solid rgba(11,11,15,.12);
  color:var(--rd-text-2);transition:all .18s ease;
}
.rd-pill input:checked + span{
  background:var(--rd-cyan-dim);border-color:rgba(0,174,239,.40);color:var(--rd-cyan-dk);
}
.rd-pill input:focus-visible + span{outline:2px solid var(--rd-cyan);outline-offset:2px}

/* ── Cartes ─────────────────────────────────────────────── */
.rd-ccards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.rd-ccard{
  display:flex;flex-direction:column;
  background:var(--rd-surface);border:1px solid var(--rd-border);
  border-radius:var(--rd-radius);overflow:hidden;
  /* position:relative sur le conteneur : la vignette pose des calques en
     absolu, sans ça ils se repèrent sur le viewport et envahissent la page. */
  position:relative;isolation:isolate;
  transition:transform .15s,border-color .15s,box-shadow .15s;
}
.rd-ccard[hidden]{display:none}
.rd-ccard:hover{transform:translateY(-2px);border-color:var(--rd-border-s)}
.rd-ccard.is-selected{
  border-color:rgba(0,174,239,.45);
  box-shadow:0 0 0 1px rgba(0,174,239,.25), 0 6px 24px rgba(0,174,239,.12);
}
.rd-ccard__m{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--rd-paper-doux)}
.rd-ccard__badge{position:absolute;top:10px;left:10px;z-index:3;pointer-events:none}
.rd-ccard__score{
  position:absolute;top:10px;right:10px;z-index:3;pointer-events:none;
  background:color-mix(in srgb,var(--rd-bg) 92%,transparent);backdrop-filter:blur(4px);
  font-family:var(--rd-font-mono);font-size:13px;font-weight:600;
  padding:3px 8px;border-radius:4px;color:var(--rd-text);
}
.rd-ccard__score small{font-size:10px;color:var(--rd-text-3)}
.rd-ccard__b{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.rd-ccard__brand{
  font-family:var(--rd-font-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rd-cyan-dk);margin-bottom:5px;
}
.rd-ccard__title{font-family:var(--rd-font-serif);font-weight:600;font-size:16px;line-height:1.3;margin:0 0 14px}
.rd-ccard__title a{color:var(--rd-text)}
.rd-ccard__title a:hover{color:var(--rd-cyan-dk)}
.rd-ccard__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.rd-ccard__price{font-family:var(--rd-font-mono);font-size:18px;font-weight:600;color:var(--rd-cyan);white-space:nowrap}
.rd-ccard__add{
  padding:7px 13px;border-radius:var(--rd-radius-pill);
  font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;
  white-space:nowrap;flex:none;transition:all .18s ease;
  background:transparent;border:1px solid rgba(11,11,15,.16);color:var(--rd-text-2);
}
.rd-ccard__add:hover{border-color:var(--rd-cyan);color:var(--rd-cyan-dk)}
.rd-ccard.is-selected .rd-ccard__add{
  background:var(--rd-cyan-dim);border-color:rgba(0,174,239,.40);color:var(--rd-cyan-dk);
}

/* ── Tableau comparatif ─────────────────────────────────── */
.rd-ctable{margin-top:56px}
.rd-ctable__head{
  display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:12px;margin-bottom:18px;
  padding-bottom:12px;border-bottom:1px solid var(--rd-border);
}
.rd-ctable__head h2{font-family:var(--rd-font-serif);font-size:26px;font-weight:400;margin:0}
.rd-ctable__head span{color:var(--rd-text-3)}
.rd-ctable__scroll{
  background:var(--rd-surface);border:1px solid var(--rd-border);
  border-radius:var(--rd-radius);overflow-x:auto;
}
.rd-ctable__table{width:100%;min-width:520px;border-collapse:collapse;font-size:14.5px}
.rd-ctable__table th,
.rd-ctable__table td{padding:14px 18px;text-align:left;vertical-align:top}
.rd-ctable__table thead th{background:var(--rd-paper-doux);position:relative;font-weight:500}
.rd-ctable__table tbody th,
.rd-ctable__table tfoot th{font-weight:500;color:var(--rd-text-3);white-space:nowrap}
.rd-ctable__table tbody tr td,
.rd-ctable__table tbody tr th{border-top:1px solid rgba(11,11,15,.06)}
.rd-ctable__table tbody tr:nth-child(even) td:not(.is-hero){background:rgba(11,11,15,.015)}
.rd-ctable__table .is-hero{background:var(--rd-cyan-dim)}
.rd-ctable__table td{color:var(--rd-text)}
.rd-ctable__table td.is-best{font-weight:600;color:var(--rd-cyan-dk)}
.rd-ctable__brand{
  display:block;font-family:var(--rd-font-mono);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--rd-cyan-dk);margin-bottom:3px;
}
.rd-ctable__name{
  display:block;font-family:var(--rd-font-serif);font-weight:600;
  font-size:15px;color:var(--rd-text);line-height:1.25;padding-right:20px;
}
.rd-ctable__name:hover{color:var(--rd-cyan-dk)}
.rd-ctable__rm{
  position:absolute;top:10px;right:10px;
  background:none;border:0;color:var(--rd-text-3);
  font-size:17px;line-height:1;cursor:pointer;font-family:inherit;padding:2px 4px;
}
.rd-ctable__rm:hover{color:var(--rd-con)}
.rd-ctable__badge{
  display:inline-block;margin-left:8px;padding:2px 7px;border-radius:4px;
  background:var(--rd-cyan);color:#fff;font-family:var(--rd-font-mono);
  font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
}
.rd-ctable__table tfoot td{border-top:1px solid var(--rd-border)}
.rd-ctable__table tfoot .rd-btn{width:100%;justify-content:center}
.rd-ctable__source{font-size:12.5px;color:var(--rd-text-3);line-height:1.6;margin:16px 0 0;max-width:74ch}

/* ── Tiroir collant ─────────────────────────────────────── */
.rd-ctray{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px max(16px, calc((100vw - var(--rd-wrap)) / 2));
  background:color-mix(in srgb,var(--rd-surface) 96%,transparent);
  backdrop-filter:blur(10px);border-top:1px solid var(--rd-border);
  box-shadow:0 -4px 20px rgba(11,11,15,.08);
}
.rd-ctray[hidden]{display:none}
.rd-ctray__label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--rd-cyan-dk);font-weight:600;flex:none}
.rd-ctray__chips{display:flex;gap:9px;flex:1;min-width:0;flex-wrap:wrap}
.rd-ctray__chip{
  display:inline-flex;align-items:center;gap:9px;padding:7px 12px;
  border-radius:var(--rd-radius-sm);background:var(--rd-cyan-dim);
  border:1px solid rgba(0,174,239,.30);font-size:13px;font-weight:500;
  color:var(--rd-text);
}
.rd-ctray__x{background:none;border:0;color:var(--rd-cyan-dk);font-size:16px;line-height:1;cursor:pointer;font-family:inherit;padding:0}
.rd-ctray__slot{
  display:inline-flex;align-items:center;padding:7px 14px;
  border-radius:var(--rd-radius-sm);border:1px dashed var(--rd-border-s);
  font-size:11px;color:var(--rd-text-3);white-space:nowrap;
}
.rd-ctray__clear{
  padding:10px 16px;border-radius:var(--rd-radius-pill);background:transparent;
  border:1px solid var(--rd-border-s);color:var(--rd-text-2);
  font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;flex:none;white-space:nowrap;
}
.rd-ctray__clear:hover{border-color:rgba(11,11,15,.35);color:var(--rd-text)}
/* Le tiroir recouvre le bas de page tant qu'une sélection est active. */
body.has-rd-tray .rd-comparator{padding-bottom:190px}

@media(max-width:600px){
  .rd-cfilters{padding:18px 16px;gap:20px}
  .rd-ctray{gap:10px;padding:12px 16px}
  .rd-ctray__label{width:100%}
}