/* ==========================================================================
   wwc-v2.css — bibliothèque de composants éditoriaux (v2 ; la v1 vit dans wwc/wwc.css)
   ==========================================================================
   PRINCIPES

   1. Rien n'est imposé au texte de la page hôte : ni police, ni taille,
      ni couleur, ni fond. --wwc-font-* et --wwc-text-base valent `inherit`
      ou 1em, donc les blocs prennent la typographie de l'article.
   2. Filets, fonds et gris sont dérivés de `currentColor` : ils s'accordent
      automatiquement à un thème clair comme à un thème sombre, sans
      `prefers-color-scheme` et sans que le site ait à déclarer quoi que ce soit.
   3. Les seules couleurs réellement posées sont sémantiques — accent,
      succès, avertissement, danger. Elles ont une valeur claire et une
      valeur sombre, et ne portent jamais seules le sens : chaque bloc
      concerné a aussi un libellé texte et un pictogramme.
   4. Un site se met à ses couleurs avec une seule variable : --wwc-primary
      (alias --wwc-accent). Tout le reste en découle.
   5. Aucune dépendance externe : les pictogrammes sont des SVG en ligne,
      encodés dans la feuille.

   RÉTROCOMPATIBILITÉ
   L'ancienne API est conservée telle quelle et reprend le nouveau style :
   .wwc / .wwc-header / .wwc-title / .wwc-subtitle / .wwc-body / .wwc-footer,
   .wwc-grid + .wwc-column, .wwc-table + th/td.wwc-reco + .wwc-reco-tag,
   .wwc-tip .wwc-info .wwc-check … (encadrés à pictogramme), .wwc-field,
   boutons, formulaires, .wwc-metric, .wwc-scale, .sr-only.
   Changements de comportement volontaires :
   - `color-scheme: light` retiré (il forçait le thème clair) ;
   - les couleurs fixes (#fff, teal, gris) deviennent des dérivées de
     currentColor et de l'accent ;
   - les pictogrammes ne sont plus chargés depuis api.iconify.design ;
     un jeu géométrique interne les remplace. Pour retrouver une icône
     précise, redéfinir --wwc-icon-<nom> avec l'URL voulue.
   - la barre de progression (.wwc-progress) est supprimée.
   ========================================================================== */

/* ==================== JETONS ==================== */

:root,
.wwc {
    /* ---- Couleur d'accent : le seul jeton à personnaliser ---- */
    --wwc-primary: currentColor;
    --wwc-accent: var(--wwc-primary);

    /* Nuances de l'accent, transparentes : elles se posent sur n'importe
       quel fond sans le remplacer. */
    --wwc-accent-line: color-mix(in oklab, var(--wwc-accent) 40%, transparent);
    --wwc-accent-tint: color-mix(in oklab, var(--wwc-accent) 8%, transparent);
    --wwc-accent-tint-strong: color-mix(in oklab, var(--wwc-accent) 14%, transparent);

    /* Compatibilité : anciennes nuances numérotées. */
    --wwc-primary-100: var(--wwc-accent-tint);
    --wwc-primary-500: var(--wwc-accent);
    --wwc-primary-600: var(--wwc-accent);
    --wwc-primary-800: var(--wwc-accent);

    /* ---- Neutres dérivés du texte de la page ---- */
    --wwc-line: color-mix(in oklab, currentColor 16%, transparent);
    --wwc-line-strong: color-mix(in oklab, currentColor 32%, transparent);
    --wwc-surface: color-mix(in oklab, currentColor 4%, transparent);
    --wwc-surface-raised: color-mix(in oklab, currentColor 7%, transparent);
    --wwc-fg-muted: color-mix(in oklab, currentColor 68%, transparent);

    /* Compatibilité : anciens gris. Canvas et CanvasText suivent le
       thème du système et du site, contrairement à #fff / #111. */
    --wwc-gray: var(--wwc-fg-muted);
    --wwc-gray-100: var(--wwc-surface);
    --wwc-gray-500: var(--wwc-fg-muted);
    --wwc-gray-800: currentColor;
    --wwc-black: CanvasText;
    --wwc-white: Canvas;

    /* ---- Couleurs sémantiques, peu saturées ---- */
    --wwc-success: oklch(0.48 0.075 155);
    --wwc-warning: oklch(0.50 0.075 70);
    --wwc-danger: oklch(0.50 0.095 25);
    /* Alias historiques */
    --wwc-ok: var(--wwc-success);
    --wwc-warn: var(--wwc-warning);
    --wwc-no: var(--wwc-danger);

    /* ---- Typographie : héritée ---- */
    --wwc-font-family: inherit;
    --wwc-font-body: inherit;
    --wwc-font-title: inherit;
    --wwc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --wwc-line-height: 1.65;
    --wwc-lh: var(--wwc-line-height);
    --wwc-measure: 70ch;

    /* Échelle en em : chaque taille suit le corps de texte de l'hôte.
       base = 1em est idempotent, donc réappliquer la règle à un niveau
       imbriqué ne rétrécit rien. */
    --wwc-text-xs: 0.74em;
    --wwc-text-sm: 0.88em;
    --wwc-text-base: 1em;
    --wwc-text-lg: 1em;
    --wwc-text-xl: 1.12em;

    /* ---- Espacement, filets, rayons ---- */
    --wwc-space: 1em;
    --wwc-s1: 0.35em;
    --wwc-s2: 0.6em;
    --wwc-s3: 0.95em;
    --wwc-s4: 1.4em;
    --wwc-radius: 6px;
    --wwc-radius-lg: 8px;
    --wwc-border-width: 1px;
    --wwc-card-border-width: 1px;

    /* ---- Effets : discrets, jamais d'ombre portée ---- */
    --wwc-shadow: none;
    --wwc-outline-width: 2px;
    --wwc-transition: 150ms ease;
    --wwc-ring: 0 0 0 var(--wwc-outline-width) var(--wwc-accent-line);

    /* ---- Carte ---- */
    --wwc-card-bg: var(--wwc-surface);
    --wwc-card-surface: transparent;
    --wwc-card-border-color: var(--wwc-line);
    --wwc-card-text: inherit;
    --wwc-card-heading: inherit;
    --wwc-card-header-size: var(--wwc-text-xl);
    --wwc-card-header-weight: 600;
    --wwc-card-subheader-size: var(--wwc-text-base);
    --wwc-card-subheader-weight: 600;
    --wwc-card-body-size: var(--wwc-text-base);
    --wwc-card-body-weight: inherit;
    --wwc-card-footer-size: var(--wwc-text-sm);
    --wwc-card-footer-weight: inherit;

    /* ---- Puces : dessinées par la bibliothèque, pas par le navigateur ---- */
    --wwc-bullet-color: var(--wwc-accent-line);
    --wwc-bullet-size: 0.4em;
    --wwc-bullet-halo: none;
    --wwc-bullet-gutter: 1.3em;
    --wwc-bullet-inset: 0.15em;

    /* ---- Formulaires ---- */
    --wwc-form-label-size: var(--wwc-text-sm);
    --wwc-form-label-weight: 600;
    --wwc-form-input-size: var(--wwc-text-sm);
    --wwc-form-input-bg: transparent;
    --wwc-form-input-border: var(--wwc-line-strong);
    --wwc-form-input-text: inherit;
    --wwc-form-input-placeholder: var(--wwc-fg-muted);
    --wwc-form-input-focus: var(--wwc-accent);

    /* ---- Boutons. Le libellé était en `Canvas` — l'idée : contraster avec
       l'accent en thème clair comme en thème sombre, sans couleur codée en
       dur. Faux en pratique : `Canvas`/`CanvasText` suivent la préférence
       système (`prefers-color-scheme`), pas la couleur réelle de l'accent
       (`currentColor`, donc la couleur de texte de la PAGE hôte) — les deux
       signaux divergent dès que la page reste claire sous un OS en thème
       sombre (typiquement l'éditeur wisewand, toujours clair). Résultat
       observé : accent sombre (texte de page) + `Canvas` sombre (OS) =
       libellé illisible. `--wwc-accent` est conçu comme un fond assez
       soutenu pour du texte blanc (voir le jeton lui-même) ; le blanc fixe
       est donc le choix sûr, pas un renoncement. ---- */
    --wwc-button-size: var(--wwc-text-sm);
    --wwc-button-weight: 600;
    --wwc-button-primary-bg: var(--wwc-accent);
    --wwc-button-primary-bg-hover: color-mix(in oklab, var(--wwc-accent) 82%, CanvasText);
    --wwc-button-primary-text: white;
    --wwc-button-primary-ring: var(--wwc-ring);
    --wwc-button-secondary-bg: transparent;
    --wwc-button-secondary-bg-hover: var(--wwc-surface);
    --wwc-button-secondary-text: inherit;
    --wwc-button-secondary-border: var(--wwc-line-strong);
    --wwc-button-secondary-ring: 0 0 0 var(--wwc-outline-width) var(--wwc-line-strong);

    /* ---- Liens : la couleur du thème hôte par défaut ---- */
    --wwc-link-color: inherit;
    --wwc-link-color-hover: inherit;
    --wwc-link-underline: underline;
    --wwc-link-underline-offset: 2px;

    /* ---- Contrôles ---- */
    --wwc-slider-track-bg: var(--wwc-line);
    --wwc-slider-track-height: 4px;
    --wwc-slider-thumb-size: 1.1em;
    --wwc-slider-thumb-bg: var(--wwc-accent);
    --wwc-slider-thumb-ring: var(--wwc-ring);
    --wwc-checkbox-size: 1.05em;
    --wwc-checkbox-bg: transparent;
    --wwc-checkbox-border: var(--wwc-line-strong);
    --wwc-checkbox-radius: 3px;
    --wwc-checkbox-checked-bg: var(--wwc-accent);
    --wwc-checkbox-checked-border: var(--wwc-accent);
    --wwc-checkbox-ring: var(--wwc-ring);
    --wwc-radio-size: 1.05em;
    --wwc-radio-bg: transparent;
    --wwc-radio-border: var(--wwc-line-strong);
    --wwc-radio-checked-border: var(--wwc-accent);
    --wwc-radio-checked-dot: var(--wwc-accent);
    --wwc-radio-ring: var(--wwc-ring);
    --wwc-switch-width: 2.1em;
    --wwc-switch-height: 1.15em;
    --wwc-switch-bg: var(--wwc-line-strong);
    --wwc-switch-checked-bg: var(--wwc-accent);
    --wwc-switch-thumb-bg: Canvas;
    --wwc-switch-ring: var(--wwc-ring);

    /* ---- Pictogrammes : jeu géométrique interne, aucun appel réseau.
       Chaque jeton reste redéfinissable avec une url() de son choix. ---- */
    --wwc-icon-size: 1.2em;
    --wwc-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E");
    --wwc-icon-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5.5 5.5l9 9M14.5 5.5l-9 9'/%3E%3C/svg%3E");
    --wwc-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='M10 9v5'/%3E%3Ccircle cx='10' cy='6.4' r='.9' fill='black' stroke='none'/%3E%3C/svg%3E");
    --wwc-icon-tip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M10 3v3M10 14v3M3 10h3M14 10h3M5.4 5.4l2.1 2.1M12.5 12.5l2.1 2.1M14.6 5.4l-2.1 2.1M7.5 12.5l-2.1 2.1'/%3E%3C/svg%3E");
    --wwc-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3l7.5 14h-15z'/%3E%3Cpath d='M10 8v4.2'/%3E%3Ccircle cx='10' cy='14.6' r='.9' fill='black' stroke='none'/%3E%3C/svg%3E");
    --wwc-icon-danger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='M6.8 6.8l6.4 6.4M13.2 6.8l-6.4 6.4'/%3E%3C/svg%3E");
    --wwc-icon-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M10 3l7 7-7 7-7-7z'/%3E%3C/svg%3E");
    --wwc-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");

    /* Anciens noms d'icônes : tous rattachés au jeu interne. Redéfinir
       le jeton pour retrouver un pictogramme spécifique. */
    --wwc-icon-pro: var(--wwc-icon-check);
    --wwc-icon-con: var(--wwc-icon-cross);
    --wwc-icon-star: var(--wwc-icon-mark);
    --wwc-icon-zap: var(--wwc-icon-tip);
    --wwc-icon-quote: var(--wwc-icon-mark);
    --wwc-icon-message: var(--wwc-icon-mark);
    --wwc-icon-calendar: var(--wwc-icon-mark);
    --wwc-icon-clock: var(--wwc-icon-mark);
    --wwc-icon-link: var(--wwc-icon-mark);
    --wwc-icon-download: var(--wwc-icon-mark);
    --wwc-icon-bookmark: var(--wwc-icon-mark);
    --wwc-icon-code: var(--wwc-icon-mark);
    --wwc-icon-terminal: var(--wwc-icon-mark);
    --wwc-icon-settings: var(--wwc-icon-mark);
    --wwc-icon-list: var(--wwc-icon-mark);
    --wwc-icon-file: var(--wwc-icon-mark);
    --wwc-icon-image: var(--wwc-icon-mark);
    --wwc-icon-lock: var(--wwc-icon-mark);
    --wwc-icon-shield: var(--wwc-icon-check);
    --wwc-icon-eye: var(--wwc-icon-mark);
    --wwc-icon-user: var(--wwc-icon-mark);
    --wwc-icon-users: var(--wwc-icon-mark);
    --wwc-icon-heart: var(--wwc-icon-mark);
    --wwc-icon-credit-card: var(--wwc-icon-mark);
    --wwc-icon-gift: var(--wwc-icon-mark);
    --wwc-icon-tag: var(--wwc-icon-mark);
    --wwc-icon-book: var(--wwc-icon-mark);
    --wwc-icon-graduation: var(--wwc-icon-mark);
    --wwc-icon-map-pin: var(--wwc-icon-mark);
    --wwc-icon-compass: var(--wwc-icon-mark);
    --wwc-icon-globe: var(--wwc-icon-mark);
    --wwc-icon-video: var(--wwc-icon-mark);
    --wwc-icon-mic: var(--wwc-icon-mark);
    --wwc-icon-camera: var(--wwc-icon-mark);
}

/* Thème sombre : seules les couleurs sémantiques changent — tout le reste
   suit déjà currentColor. Le site peut forcer l'un ou l'autre en posant
   `color-scheme` ou en redéfinissant ces trois jetons. */
@media (prefers-color-scheme: dark) {

    :root,
    .wwc {
        --wwc-success: oklch(0.80 0.085 155);
        --wwc-warning: oklch(0.83 0.085 80);
        --wwc-danger: oklch(0.79 0.095 25);
        --wwc-line: color-mix(in oklab, currentColor 22%, transparent);
        --wwc-line-strong: color-mix(in oklab, currentColor 38%, transparent);
        --wwc-surface: color-mix(in oklab, currentColor 7%, transparent);
        --wwc-surface-raised: color-mix(in oklab, currentColor 11%, transparent);
        --wwc-accent-tint: color-mix(in oklab, var(--wwc-accent) 12%, transparent);
        --wwc-accent-tint-strong: color-mix(in oklab, var(--wwc-accent) 20%, transparent);
    }
}

/* Bascule manuelle : un site (ou un bouton d'aperçu) pose
   data-wwc-theme="dark" ou "light" sur <html> pour forcer un thème,
   indépendamment de la préférence système. */
[data-wwc-theme="dark"] {
    color-scheme: dark;
}

[data-wwc-theme="light"] {
    color-scheme: light;
}

[data-wwc-theme="dark"],
[data-wwc-theme="dark"] .wwc {
    --wwc-success: oklch(0.80 0.085 155);
    --wwc-warning: oklch(0.83 0.085 80);
    --wwc-danger: oklch(0.79 0.095 25);
    --wwc-line: color-mix(in oklab, currentColor 22%, transparent);
    --wwc-line-strong: color-mix(in oklab, currentColor 38%, transparent);
    --wwc-surface: color-mix(in oklab, currentColor 7%, transparent);
    --wwc-surface-raised: color-mix(in oklab, currentColor 11%, transparent);
    --wwc-accent-tint: color-mix(in oklab, var(--wwc-accent) 12%, transparent);
    --wwc-accent-tint-strong: color-mix(in oklab, var(--wwc-accent) 20%, transparent);
}

[data-wwc-theme="light"],
[data-wwc-theme="light"] .wwc {
    --wwc-success: oklch(0.48 0.075 155);
    --wwc-warning: oklch(0.50 0.075 70);
    --wwc-danger: oklch(0.50 0.095 25);
    --wwc-line: color-mix(in oklab, currentColor 16%, transparent);
    --wwc-line-strong: color-mix(in oklab, currentColor 32%, transparent);
    --wwc-surface: color-mix(in oklab, currentColor 4%, transparent);
    --wwc-surface-raised: color-mix(in oklab, currentColor 7%, transparent);
    --wwc-accent-tint: color-mix(in oklab, var(--wwc-accent) 8%, transparent);
    --wwc-accent-tint-strong: color-mix(in oklab, var(--wwc-accent) 14%, transparent);
}

/* Repli pour les thèmes anciens sans color-mix. */
@supports not (color: color-mix(in oklab, currentColor 10%, transparent)) {

    :root,
    .wwc {
        --wwc-line: rgba(128, 128, 128, 0.35);
        --wwc-line-strong: rgba(128, 128, 128, 0.6);
        --wwc-surface: rgba(128, 128, 128, 0.08);
        --wwc-surface-raised: rgba(128, 128, 128, 0.14);
        --wwc-fg-muted: inherit;
        --wwc-accent-line: rgba(128, 128, 128, 0.6);
        --wwc-accent-tint: rgba(128, 128, 128, 0.1);
        --wwc-accent-tint-strong: rgba(128, 128, 128, 0.16);
    }
}

/* ==================== BASE ==================== */

[class^="wwc-"],
[class*=" wwc-"],
[class^="wwc-"] *,
[class*=" wwc-"] * {
    box-sizing: border-box;
}

.wwc-vh,
:where(.wwc) .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---- Carte générique (ancienne API .wwc) ----
   Isolée des styles du thème, mais sans lui imposer police ni couleur. */
.wwc {
    box-sizing: border-box;
    margin: var(--wwc-space) 0;
    padding: var(--wwc-s3) var(--wwc-s4);
    border: var(--wwc-card-border-width) solid var(--wwc-card-border-color);
    border-radius: var(--wwc-radius-lg);
    font-family: var(--wwc-font-body);
    font-style: normal;
    line-height: var(--wwc-line-height);
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    word-spacing: normal;
    white-space: normal;
    text-decoration: none;
    color: var(--wwc-card-text);
    background: var(--wwc-card-bg);
    list-style: none;
    vertical-align: baseline;
    quotes: none;
}

:where(.wwc) *,
:where(.wwc) *::before,
:where(.wwc) *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
    text-decoration: inherit;
    background: transparent;
    vertical-align: baseline;
}

:where(.wwc) .wwc-header {
    margin-bottom: var(--wwc-s3);
}

:where(.wwc) .wwc-header:has(+ .wwc-body) {
    padding-bottom: var(--wwc-s3);
    border-bottom: var(--wwc-card-border-width) solid var(--wwc-card-border-color);
}

:where(.wwc) .wwc-header .wwc-title {
    font-family: var(--wwc-font-title);
    font-size: var(--wwc-card-header-size);
    font-weight: var(--wwc-card-header-weight);
    line-height: 1.3;
    color: var(--wwc-card-heading);
    margin-bottom: var(--wwc-s1);
}

:where(.wwc)>.wwc-title {
    font-family: var(--wwc-font-title);
    font-size: var(--wwc-text-lg);
    font-weight: var(--wwc-card-header-weight);
    line-height: 1.35;
    color: var(--wwc-card-heading);
    margin-bottom: var(--wwc-s1);
}

:where(.wwc) .wwc-header .wwc-subtitle,
:where(.wwc)>.wwc-subtitle {
    font-size: var(--wwc-card-body-size);
    color: var(--wwc-fg-muted);
}

:where(.wwc) .wwc-body {
    font-size: var(--wwc-card-body-size);
}

:where(.wwc) .wwc-body p,
:where(.wwc) .wwc-body ul,
:where(.wwc) .wwc-body ol,
:where(.wwc)>p,
:where(.wwc)>ul,
:where(.wwc)>ol {
    font-size: var(--wwc-card-body-size);
    margin: 0 0 var(--wwc-s2) 0;
}

:where(.wwc) :last-child {
    margin-bottom: 0 !important;
}

:where(.wwc) .wwc-footer {
    font-size: var(--wwc-card-footer-size);
    color: var(--wwc-fg-muted);
    margin-top: var(--wwc-s3);
    padding-top: var(--wwc-s3);
    border-top: var(--wwc-card-border-width) solid var(--wwc-card-border-color);
}

:where(.wwc) .wwc-help {
    font-size: var(--wwc-text-sm);
    color: var(--wwc-fg-muted);
}

:where(.wwc) code {
    font-family: var(--wwc-font-mono);
    font-size: 0.92em;
    background: var(--wwc-surface-raised);
    padding: 0.1em 0.3em;
    border-radius: 3px;
}

:where(.wwc) pre {
    margin: 0;
    padding: var(--wwc-s3);
    background: var(--wwc-surface);
    border: var(--wwc-card-border-width) solid var(--wwc-card-border-color);
    border-radius: var(--wwc-radius);
    overflow-x: auto;
}

:where(.wwc) pre code {
    padding: 0;
    background: none;
    font-size: var(--wwc-text-sm);
    line-height: 1.5;
}

/* `:where()` sur les deux membres, spécificité nulle — même principe que le reste de la
   feuille (voir l'en-tête). `[class^="wwc-"] a` portait une vraie spécificité (0,1,1), qui
   battait un bouton à une seule classe : `.wwc-product__cta`, `.wwc-collection-cta__cta` et
   `.wwc-product-banner__cta` en héritaient la couleur de lien et le soulignement au lieu de
   leur propre texte blanc sans soulignement, illisibles sur leur fond plein. `.wwc-toc__link`
   avait déjà buté dessus (voir plus bas, `.wwc-toc__list .wwc-toc__link`) et avait été
   contourné en montant sa propre spécificité à (0,2,0) plutôt qu'en corrigeant le reset — un
   correctif local à chaque bouton, contre un seul ici. */
:where(.wwc) a,
:where([class^="wwc-"]) a {
    color: var(--wwc-link-color);
    text-decoration: var(--wwc-link-underline);
    text-underline-offset: var(--wwc-link-underline-offset);
    transition: color var(--wwc-transition);
}

:where(.wwc) a:hover {
    color: var(--wwc-link-color-hover);
    text-decoration-style: dotted;
}

/* ==================== LISTES ====================
   La puce appartient à la bibliothèque : laissée au navigateur, elle
   disparaissait sous un reset hôte (Tailwind : `ul { list-style: none }`)
   et réapparaissait en disque sur WordPress. Un ::before dessiné ici rend
   le même contenu partout. */

:where(.wwc) ul,
:where(.wwc) ol {
    list-style: none;
    padding-left: 0;
}

:where(.wwc) li {
    position: relative;
    padding-left: var(--wwc-bullet-gutter);
    margin-bottom: var(--wwc-s1);
}

/* Alignée sur la première ligne, pas sur le bloc : un item qui passe à la
   ligne centrerait sa puce entre les deux. */
:where(.wwc) ul>li::before {
    content: "";
    position: absolute;
    left: var(--wwc-bullet-inset);
    top: calc((1em * var(--wwc-line-height) - var(--wwc-bullet-size)) / 2);
    width: var(--wwc-bullet-size);
    height: var(--wwc-bullet-size);
    border-radius: 50%;
    background: var(--wwc-bullet-color);
    box-shadow: var(--wwc-bullet-halo);
}

/* Le second niveau évide la même puce : la hiérarchie se lit sans changer
   de forme. */
:where(.wwc) ul ul>li::before {
    background: transparent;
    box-shadow: inset 0 0 0 0.11em var(--wwc-bullet-color);
}

/* Compteur porté par la liste : deux listes dans un même encart repartent
   chacune de 1. */
:where(.wwc) ol {
    counter-reset: wwc-item;
}

:where(.wwc) ol>li {
    counter-increment: wwc-item;
}

:where(.wwc) ol>li::before {
    content: counter(wwc-item) ".";
    position: absolute;
    left: 0;
    top: 0;
    width: calc(var(--wwc-bullet-gutter) - var(--wwc-bullet-inset) * 1.2);
    text-align: right;
    font-family: var(--wwc-font-title);
    font-size: var(--wwc-text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: calc(var(--wwc-line-height) / 0.88);
    color: var(--wwc-fg-muted);
}

/* La puce prend l'accent de l'encadré qui la porte : une liste de garanties
   sous une icône verte ne pointe pas en couleur d'action. */
:where(.wwc).wwc-check,
:where(.wwc).wwc-shield,
:where(.wwc-grid)>.wwc-column.wwc-icon-pro {
    --wwc-bullet-color: var(--wwc-success);
}

:where(.wwc).wwc-danger,
:where(.wwc-grid)>.wwc-column.wwc-icon-con {
    --wwc-bullet-color: var(--wwc-danger);
}

:where(.wwc).wwc-warning {
    --wwc-bullet-color: var(--wwc-warning);
}

/* ==================== ENCADRÉS À PICTOGRAMME ====================
   Ancienne API : <div class="wwc wwc-tip">. Le pictogramme est un masque
   SVG interne ; sa couleur vient de background-color, donc du thème. */

:where(.wwc)[class*="wwc-tip"],
:where(.wwc)[class*="wwc-info"],
:where(.wwc)[class*="wwc-warning"],
:where(.wwc)[class*="wwc-danger"],
:where(.wwc)[class*="wwc-calendar"],
:where(.wwc)[class*="wwc-clock"],
:where(.wwc)[class*="wwc-link"],
:where(.wwc)[class*="wwc-download"],
:where(.wwc)[class*="wwc-bookmark"],
:where(.wwc)[class*="wwc-quote"],
:where(.wwc)[class*="wwc-message"],
:where(.wwc)[class*="wwc-code"],
:where(.wwc)[class*="wwc-terminal"],
:where(.wwc)[class*="wwc-settings"],
:where(.wwc)[class*="wwc-list"],
:where(.wwc)[class*="wwc-file"],
:where(.wwc)[class*="wwc-image"],
:where(.wwc)[class*="wwc-check"],
:where(.wwc)[class*="wwc-star"],
:where(.wwc)[class*="wwc-zap"],
:where(.wwc)[class*="wwc-lock"],
:where(.wwc)[class*="wwc-shield"],
:where(.wwc)[class*="wwc-eye"],
:where(.wwc)[class*="wwc-user"],
:where(.wwc)[class*="wwc-users"],
:where(.wwc)[class*="wwc-heart"],
:where(.wwc)[class*="wwc-credit-card"],
:where(.wwc)[class*="wwc-gift"],
:where(.wwc)[class*="wwc-tag"],
:where(.wwc)[class*="wwc-book"],
:where(.wwc)[class*="wwc-graduation"],
:where(.wwc)[class*="wwc-map-pin"],
:where(.wwc)[class*="wwc-compass"],
:where(.wwc)[class*="wwc-globe"],
:where(.wwc)[class*="wwc-video"],
:where(.wwc)[class*="wwc-mic"],
:where(.wwc)[class*="wwc-camera"] {
    position: relative;
    padding-left: calc(var(--wwc-s4) + var(--wwc-icon-size) + var(--wwc-s2));
    border-left-width: 2px;
    border-left-color: var(--wwc-accent-line);
    background: transparent;
}

:where(.wwc)[class*="wwc-tip"]::before,
:where(.wwc)[class*="wwc-info"]::before,
:where(.wwc)[class*="wwc-warning"]::before,
:where(.wwc)[class*="wwc-danger"]::before,
:where(.wwc)[class*="wwc-calendar"]::before,
:where(.wwc)[class*="wwc-clock"]::before,
:where(.wwc)[class*="wwc-link"]::before,
:where(.wwc)[class*="wwc-download"]::before,
:where(.wwc)[class*="wwc-bookmark"]::before,
:where(.wwc)[class*="wwc-quote"]::before,
:where(.wwc)[class*="wwc-message"]::before,
:where(.wwc)[class*="wwc-code"]::before,
:where(.wwc)[class*="wwc-terminal"]::before,
:where(.wwc)[class*="wwc-settings"]::before,
:where(.wwc)[class*="wwc-list"]::before,
:where(.wwc)[class*="wwc-file"]::before,
:where(.wwc)[class*="wwc-image"]::before,
:where(.wwc)[class*="wwc-check"]::before,
:where(.wwc)[class*="wwc-star"]::before,
:where(.wwc)[class*="wwc-zap"]::before,
:where(.wwc)[class*="wwc-lock"]::before,
:where(.wwc)[class*="wwc-shield"]::before,
:where(.wwc)[class*="wwc-eye"]::before,
:where(.wwc)[class*="wwc-user"]::before,
:where(.wwc)[class*="wwc-users"]::before,
:where(.wwc)[class*="wwc-heart"]::before,
:where(.wwc)[class*="wwc-credit-card"]::before,
:where(.wwc)[class*="wwc-gift"]::before,
:where(.wwc)[class*="wwc-tag"]::before,
:where(.wwc)[class*="wwc-book"]::before,
:where(.wwc)[class*="wwc-graduation"]::before,
:where(.wwc)[class*="wwc-map-pin"]::before,
:where(.wwc)[class*="wwc-compass"]::before,
:where(.wwc)[class*="wwc-globe"]::before,
:where(.wwc)[class*="wwc-video"]::before,
:where(.wwc)[class*="wwc-mic"]::before,
:where(.wwc)[class*="wwc-camera"]::before {
    content: "";
    position: absolute;
    left: var(--wwc-s4);
    top: calc(var(--wwc-s3) + 0.2em);
    width: var(--wwc-icon-size);
    height: var(--wwc-icon-size);
    --_icon: var(--wwc-icon-mark);
    -webkit-mask: var(--_icon) no-repeat center / contain;
    mask: var(--_icon) no-repeat center / contain;
    background-color: var(--wwc-fg-muted);
}

:where(.wwc).wwc-tip::before {
    --_icon: var(--wwc-icon-tip);
    background-color: var(--wwc-success);
}

:where(.wwc).wwc-tip {
    border-left-color: var(--wwc-success);
}

:where(.wwc).wwc-info::before {
    --_icon: var(--wwc-icon-info);
}

:where(.wwc).wwc-warning::before {
    --_icon: var(--wwc-icon-warning);
    background-color: var(--wwc-warning);
}

:where(.wwc).wwc-warning {
    border-left-color: var(--wwc-warning);
}

:where(.wwc).wwc-danger::before {
    --_icon: var(--wwc-icon-danger);
    background-color: var(--wwc-danger);
}

:where(.wwc).wwc-danger {
    border-left-color: var(--wwc-danger);
    background: color-mix(in oklab, var(--wwc-danger) 6%, transparent);
}

:where(.wwc).wwc-check::before {
    --_icon: var(--wwc-icon-check);
    background-color: var(--wwc-success);
}

:where(.wwc).wwc-check {
    border-left-color: var(--wwc-success);
}

:where(.wwc).wwc-shield::before {
    --_icon: var(--wwc-icon-shield);
    background-color: var(--wwc-success);
}

:where(.wwc).wwc-calendar::before {
    --_icon: var(--wwc-icon-calendar);
}

:where(.wwc).wwc-clock::before {
    --_icon: var(--wwc-icon-clock);
}

:where(.wwc).wwc-link::before {
    --_icon: var(--wwc-icon-link);
}

:where(.wwc).wwc-download::before {
    --_icon: var(--wwc-icon-download);
}

:where(.wwc).wwc-bookmark::before {
    --_icon: var(--wwc-icon-bookmark);
}

:where(.wwc).wwc-quote::before {
    --_icon: var(--wwc-icon-quote);
}

:where(.wwc).wwc-message::before {
    --_icon: var(--wwc-icon-message);
}

:where(.wwc).wwc-code::before {
    --_icon: var(--wwc-icon-code);
}

:where(.wwc).wwc-terminal::before {
    --_icon: var(--wwc-icon-terminal);
}

:where(.wwc).wwc-settings::before {
    --_icon: var(--wwc-icon-settings);
}

:where(.wwc).wwc-list::before {
    --_icon: var(--wwc-icon-list);
}

:where(.wwc).wwc-file::before {
    --_icon: var(--wwc-icon-file);
}

:where(.wwc).wwc-image::before {
    --_icon: var(--wwc-icon-image);
}

:where(.wwc).wwc-star::before {
    --_icon: var(--wwc-icon-star);
}

:where(.wwc).wwc-zap::before {
    --_icon: var(--wwc-icon-zap);
}

:where(.wwc).wwc-lock::before {
    --_icon: var(--wwc-icon-lock);
}

:where(.wwc).wwc-eye::before {
    --_icon: var(--wwc-icon-eye);
}

:where(.wwc).wwc-user::before {
    --_icon: var(--wwc-icon-user);
}

:where(.wwc).wwc-users::before {
    --_icon: var(--wwc-icon-users);
}

:where(.wwc).wwc-heart::before {
    --_icon: var(--wwc-icon-heart);
}

:where(.wwc).wwc-credit-card::before {
    --_icon: var(--wwc-icon-credit-card);
}

:where(.wwc).wwc-gift::before {
    --_icon: var(--wwc-icon-gift);
}

:where(.wwc).wwc-tag::before {
    --_icon: var(--wwc-icon-tag);
}

:where(.wwc).wwc-book::before {
    --_icon: var(--wwc-icon-book);
}

:where(.wwc).wwc-graduation::before {
    --_icon: var(--wwc-icon-graduation);
}

:where(.wwc).wwc-map-pin::before {
    --_icon: var(--wwc-icon-map-pin);
}

:where(.wwc).wwc-compass::before {
    --_icon: var(--wwc-icon-compass);
}

:where(.wwc).wwc-globe::before {
    --_icon: var(--wwc-icon-globe);
}

:where(.wwc).wwc-video::before {
    --_icon: var(--wwc-icon-video);
}

:where(.wwc).wwc-mic::before {
    --_icon: var(--wwc-icon-mic);
}

:where(.wwc).wwc-camera::before {
    --_icon: var(--wwc-icon-camera);
}

/* ==================== GRILLE ==================== */

:where(.wwc).wwc-grid,
:where(.wwc) .wwc-grid {
    display: grid;
    grid-template-columns: repeat(var(--wwc-grid-cols, 2), 1fr);
    gap: var(--wwc-s4);
}

:where(.wwc)>.wwc-grid {
    margin: var(--wwc-s2) 0;
}

:where(.wwc).wwc-grid>.wwc-column,
:where(.wwc) .wwc-grid>.wwc-column {
    padding: 0;
}

:where(.wwc).wwc-grid>.wwc-column>.wwc-title,
:where(.wwc) .wwc-grid>.wwc-column>.wwc-title {
    display: flex;
    align-items: center;
    gap: var(--wwc-s2);
    font-family: var(--wwc-font-title);
    font-size: var(--wwc-card-subheader-size);
    font-weight: var(--wwc-card-subheader-weight);
    color: var(--wwc-card-heading);
    margin-bottom: var(--wwc-s1);
}

:where(.wwc-grid)>.wwc-column[class*="wwc-icon-"]>.wwc-title::before {
    content: "";
    flex-shrink: 0;
    width: var(--wwc-icon-size);
    height: var(--wwc-icon-size);
    --_icon: var(--wwc-icon-mark);
    -webkit-mask: var(--_icon) no-repeat center / contain;
    mask: var(--_icon) no-repeat center / contain;
    background-color: var(--wwc-fg-muted);
}

:where(.wwc-grid)>.wwc-column.wwc-icon-pro>.wwc-title::before {
    --_icon: var(--wwc-icon-pro);
    background-color: var(--wwc-success);
}

:where(.wwc-grid)>.wwc-column.wwc-icon-con>.wwc-title::before {
    --_icon: var(--wwc-icon-con);
    background-color: var(--wwc-danger);
}

:where(.wwc).wwc-grid>.wwc-column>p,
:where(.wwc) .wwc-grid>.wwc-column>p {
    font-size: var(--wwc-text-base);
    margin: 0;
}

/* ==================== TABLEAU ====================
   Ancienne API : .wwc.wwc-table > table. Nouvelle API : figure.wwc-table
   > .wwc-table__scroll > table.wwc-table__el. Les deux partagent le style. */

:where(.wwc).wwc-table {
    padding: 0;
    border: 0;
    background: transparent;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.wwc-table {
    margin: 0;
}

.wwc-table__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Le tableau ne s'enferme pas dans une boîte : il se lit sur des filets.
   Pas de zébrures, pas de fond d'en-tête, pas de cadre — la colonne mise
   en évidence reste ainsi la seule zone teintée du bloc. */
:where(.wwc).wwc-table table,
.wwc-table__el {
    width: 100%;
    min-width: 30em;
    border-collapse: collapse;
    font-family: var(--wwc-font-body);
    font-size: var(--wwc-text-sm);
    line-height: 1.5;
    margin-top: 0;
    background: none;
}

:where(.wwc).wwc-table th,
:where(.wwc).wwc-table td,
.wwc-table__el th,
.wwc-table__el td {
    padding: 0.85em 1.1em;
    text-align: left;
    vertical-align: baseline;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--wwc-line);
}

/* Cellules de rive alignées sur le texte courant : le tableau respire
   dans la colonne de l'article au lieu de flotter dans un cadre. */
:where(.wwc).wwc-table th:first-child,
:where(.wwc).wwc-table td:first-child,
.wwc-table__el th:first-child,
.wwc-table__el td:first-child {
    padding-left: 0;
}

:where(.wwc).wwc-table th:last-child,
:where(.wwc).wwc-table td:last-child,
.wwc-table__el th:last-child,
.wwc-table__el td:last-child {
    padding-right: 0;
}

:where(.wwc).wwc-table thead th,
.wwc-table__el thead th {
    font-family: var(--wwc-font-title);
    font-size: var(--wwc-text-xs);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--wwc-fg-muted);
    vertical-align: bottom;
    padding-bottom: 0.6em;
    border-bottom: 1px solid var(--wwc-line-strong);
    white-space: nowrap;
}

:where(.wwc).wwc-table tbody tr:last-child td,
:where(.wwc).wwc-table tbody tr:last-child th,
.wwc-table__el tbody tr:last-child td,
.wwc-table__el tbody tr:last-child th {
    border-bottom: 0;
}

/* La colonne d'index nomme sa ligne : c'est un th, pas une en-tête de
   tableau. Sans ça, deux barres d'en-tête semblent se croiser. */
:where(.wwc).wwc-table tbody th,
.wwc-table__el th[scope="row"] {
    font-family: var(--wwc-font-title);
    font-size: inherit;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    min-width: 7em;
}

/* Ligne de section intercalaire : un intertitre dans le tableau, pas une
   deuxième barre d'en-tête. */
.wwc-table__group th {
    font-family: var(--wwc-font-title);
    font-size: var(--wwc-text-xs);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--wwc-fg-muted);
    padding-top: 1.6em;
    padding-bottom: 0.35em;
    border-bottom: 1px solid var(--wwc-line);
}

.wwc-table__note {
    margin: var(--wwc-s3) 0 0;
    font-size: var(--wwc-text-sm);
    color: var(--wwc-fg-muted);
}

/* La colonne recommandée : en-tête ET cases. Une couleur posée sur la
   seule en-tête se perd dès que le lecteur descend dans le tableau,
   c'est-à-dire au moment où il compare. Un aplat très pâle et un filet
   d'accent au sommet suffisent ; le mot reste dans le th — jamais la
   couleur seule, jamais d'emoji. */
:where(.wwc).wwc-table th.wwc-reco,
:where(.wwc).wwc-table td.wwc-reco,
.wwc-table__el .wwc-table__cell--lead {
    background: var(--wwc-accent-tint);
    padding-left: 1.1em;
    padding-right: 1.1em;
}

:where(.wwc).wwc-table thead th.wwc-reco,
.wwc-table__el thead .wwc-table__cell--lead {
    color: var(--wwc-accent);
    border-bottom-color: var(--wwc-accent-line);
    border-radius: var(--wwc-radius) var(--wwc-radius) 0 0;
}

:where(.wwc).wwc-table tbody tr:last-child .wwc-reco,
.wwc-table__el tbody tr:last-child .wwc-table__cell--lead {
    border-radius: 0 0 var(--wwc-radius) var(--wwc-radius);
}

.wwc-table__el .wwc-table__row--lead th,
.wwc-table__el .wwc-table__row--lead td {
    background: var(--wwc-accent-tint);
}

.wwc-table__el .wwc-table__row--lead th:first-child {
    box-shadow: inset 2px 0 0 0 var(--wwc-accent);
    padding-left: 1.1em;
    border-radius: var(--wwc-radius) 0 0 var(--wwc-radius);
}

.wwc-table__el .wwc-table__row--lead td:last-child {
    border-radius: 0 var(--wwc-radius) var(--wwc-radius) 0;
}

:where(.wwc).wwc-table .wwc-reco-tag,
.wwc-table__flag {
    display: block;
    margin-top: 0.35em;
    font-family: var(--wwc-font-title);
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--wwc-accent);
    white-space: nowrap;
}

.wwc-table__el thead .wwc-table__flag {
    margin-top: 0.2em;
}

/* Première colonne figée : uniquement là où le scroll horizontal a lieu.
   Le fond doit être opaque, sinon le texte défile dessous. */
@media (max-width: 900px) {

    .wwc-table__el th[scope="row"],
    :where(.wwc).wwc-table tbody th {
        position: sticky;
        left: 0;
        z-index: 1;
        background: Canvas;
        padding-left: 0.2em;
        padding-right: 1em;
    }

    .wwc-table__el thead th:first-child,
    :where(.wwc).wwc-table thead th:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: Canvas;
        padding-left: 0.2em;
    }

    .wwc-table__el .wwc-table__row--lead th:first-child {
        background: color-mix(in oklab, var(--wwc-accent) 8%, Canvas);
    }

    .wwc-table__group th {
        position: static !important;
    }
}

/* ==================== VIDÉO ====================
   Un <iframe> YouTube posé tel quel par jobs/v3/src/steps/video.ts, sans
   width/height ni style — sans cette règle, le navigateur retombe sur la
   taille par défaut d'un iframe (~300×150px) au lieu de suivre la colonne.
   `.wwc-video` était déjà pris par le pictogramme « vidéo » d'un encart
   (plus haut, `::before`) : nom distinct pour ne pas en hériter. */

.wwc-video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--wwc-radius);
    overflow: hidden;
}

.wwc-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==================== CARTE PRODUIT ====================
   Cinq composants, une seule intention : montrer un produit réel de la
   boutique connectée — prix et lien d'achat compris, jamais une note ni un
   avis, qu'aucune source Shopify ne peut fournir sans l'inventer. Voir
   jobs/v3/src/core/wwc.ts::renderProductCard. */

.wwc-product {
    display: grid;
    grid-template-columns: minmax(9em, 30%) 1fr;
    gap: var(--wwc-s4);
    align-items: center;
    border: 1px solid var(--wwc-line);
    border-radius: var(--wwc-radius-lg);
    padding: var(--wwc-s3);
}

.wwc-product__media {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--wwc-radius);
}

.wwc-product__body {
    display: grid;
    gap: var(--wwc-s2);
    align-content: start;
}

.wwc-product__title {
    margin: 0;
    font-family: var(--wwc-font-title);
    font-size: 1.05em;
    font-weight: 600;
    line-height: 1.35;
}

.wwc-product__price {
    margin: 0;
    font-size: var(--wwc-text-base);
    font-weight: 700;
}

/* `background` descend de `--wwc-primary: currentColor` (voir JETONS) : sans typage, une
   variable CSS ne fige jamais de valeur, elle réinjecte le mot-clé `currentColor` brut à chaque
   `var()`, qui se résout alors contre le `color` de CET élément — celui qui déclare le fond, pas
   celui de l'article. Poser `color: var(--wwc-button-primary-text)` (blanc) et `background:
   currentColor` sur le MÊME élément les rend donc solidaires : le fond devenait blanc lui aussi,
   bouton illisible, et gris pâle au survol (`color-mix` de ce même blanc avec `CanvasText` dans
   `--wwc-button-primary-bg-hover`). Vérifié : `@property` ne répare pas ça — `currentColor` ne
   se fige pas au moment où une propriété personnalisée typée est déclarée, seulement à l'usage
   final, comme pour n'importe quelle propriété (voir wwc/product-cards-v2-demo.html). La seule
   réparation qui marche sépare les deux rôles sur deux éléments : le conteneur ne redéfinit plus
   son propre texte (donc `currentColor` y vaut le texte hérité de l'article), et c'est le
   `<span>` interne qui porte le blanc. `:has(> span)` ne s'arme que sur ce balisage-là — un CTA
   déjà publié sans `<span>` (ancien `core/wwc.ts`) garde le comportement d'avant, inchangé,
   plutôt que de gagner un bouton texte-sur-texte d'une autre couleur. */
.wwc-product__cta,
.wwc-collection-cta__cta,
.wwc-product-banner__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wwc-s2);
    width: fit-content;
    padding: 0.5em 1em;
    font-family: var(--wwc-font-title);
    font-size: var(--wwc-button-size);
    font-weight: var(--wwc-button-weight);
    line-height: var(--wwc-line-height);
    color: var(--wwc-button-primary-text);
    background: var(--wwc-button-primary-bg);
    border-radius: var(--wwc-radius);
    text-decoration: none;
    transition: background-color var(--wwc-transition);
}

.wwc-product__cta:has(> span),
.wwc-collection-cta__cta:has(> span),
.wwc-product-banner__cta:has(> span) {
    color: inherit;
}

.wwc-product__cta > span,
.wwc-collection-cta__cta > span,
.wwc-product-banner__cta > span {
    color: var(--wwc-button-primary-text);
}

.wwc-product__cta:hover,
.wwc-collection-cta__cta:hover,
.wwc-product-banner__cta:hover {
    background: var(--wwc-button-primary-bg-hover);
}

/* 2 — grille de 2 à 4 produits associés */
.wwc-products {
    display: grid;
    gap: var(--wwc-s3);
    margin: 0;
}

.wwc-products__header {
    margin: 0;
    font-family: var(--wwc-font-title);
    font-size: var(--wwc-text-xs);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--wwc-fg-muted);
}

.wwc-products__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
    gap: var(--wwc-s3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wwc-products__item {
    display: grid;
    gap: var(--wwc-s2);
    align-content: start;
    border: 1px solid var(--wwc-line);
    border-radius: var(--wwc-radius-lg);
    padding: var(--wwc-s3);
}

.wwc-products__item .wwc-product__media {
    aspect-ratio: 1 / 1;
}

/* 3 — tableau comparatif, 2 à 3 produits. Même structure que .wwc-table
   (figure > scroll > table), classes propres pour ne jamais confondre un
   comparatif éditorial et une comparaison produit. */
.wwc-comparison {
    margin: 0;
}

.wwc-comparison__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.wwc-comparison__el {
    width: 100%;
    min-width: 28em;
    border-collapse: collapse;
    font-family: var(--wwc-font-body);
    font-size: var(--wwc-text-sm);
    line-height: 1.5;
    margin: 0;
    background: none;
}

.wwc-comparison__el th,
.wwc-comparison__el td {
    padding: 0.85em 1.1em;
    text-align: center;
    vertical-align: middle;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--wwc-line);
}

.wwc-comparison__el th[scope="row"] {
    text-align: left;
    font-family: var(--wwc-font-title);
    font-weight: 600;
    white-space: normal;
}

.wwc-comparison__col {
    vertical-align: bottom;
    padding-bottom: 0.6em;
}

.wwc-comparison__media {
    display: block;
    width: 3.6em;
    height: 3.6em;
    object-fit: cover;
    border-radius: var(--wwc-radius);
    margin: 0 auto var(--wwc-s2);
}

.wwc-comparison__icon {
    width: 1.2em;
    height: 1.2em;
    color: var(--wwc-fg-muted);
}

.wwc-comparison__el tbody tr:last-child td,
.wwc-comparison__el tbody tr:last-child th {
    border-bottom: 0;
}

.wwc-comparison__el tfoot td {
    border-bottom: 0;
    padding-top: var(--wwc-s3);
}

/* 4 — bandeau vers une collection entière */
.wwc-collection-cta {
    display: grid;
    grid-template-columns: minmax(9em, 35%) 1fr;
    align-items: stretch;
    border: 1px solid var(--wwc-line);
    border-radius: var(--wwc-radius-lg);
    overflow: hidden;
}

.wwc-collection-cta__media {
    width: 100%;
    height: 100%;
    min-height: 10em;
    object-fit: cover;
}

.wwc-collection-cta__body {
    display: grid;
    gap: var(--wwc-s2);
    align-content: center;
    padding: var(--wwc-s4);
}

.wwc-collection-cta__title {
    margin: 0;
    font-family: var(--wwc-font-title);
    font-size: 1.15em;
    font-weight: 600;
}

.wwc-collection-cta__blurb {
    margin: 0;
    font-size: var(--wwc-text-sm);
    color: var(--wwc-fg-muted);
}

/* 5 — bandeau compact, un produit, idéal en fin d'article */
.wwc-product-banner {
    display: flex;
    align-items: center;
    gap: var(--wwc-s3);
    flex-wrap: wrap;
    border: 1px solid var(--wwc-line);
    border-radius: var(--wwc-radius-lg);
    padding: var(--wwc-s3);
}

.wwc-product-banner__media {
    width: 3.6em;
    height: 3.6em;
    object-fit: cover;
    border-radius: var(--wwc-radius);
    flex: none;
}

.wwc-product-banner__body {
    flex: 1 1 12em;
    min-width: 0;
    display: grid;
    gap: 0.2em;
}

.wwc-product-banner__title {
    margin: 0;
    font-family: var(--wwc-font-title);
    font-weight: 600;
}

.wwc-product-banner__hook {
    margin: 0;
    font-size: var(--wwc-text-sm);
    color: var(--wwc-fg-muted);
}

.wwc-product-banner__price {
    margin: 0;
    font-weight: 700;
    white-space: nowrap;
}

/* ==================== FORMULAIRES ==================== */

:where(.wwc) label {
    display: block;
    font-family: var(--wwc-font-title);
    font-size: var(--wwc-form-label-size);
    font-weight: var(--wwc-form-label-weight);
    color: var(--wwc-card-heading);
    margin-bottom: var(--wwc-s1);
}

:where(.wwc) .wwc-field {
    margin-bottom: var(--wwc-s3);
}

:where(.wwc) .wwc-field:last-child {
    margin-bottom: 0;
}

:where(.wwc) .wwc-field .wwc-help {
    margin-top: var(--wwc-s1);
}

:where(.wwc) input:where([type="text"], [type="email"], [type="password"], [type="number"],
    [type="tel"], [type="url"], [type="search"], [type="date"],
    [type="time"], [type="datetime-local"]),
:where(.wwc) textarea,
:where(.wwc) select {
    display: block;
    width: 100%;
    padding: 0.5em 0.7em;
    font-family: inherit;
    font-size: var(--wwc-form-input-size);
    line-height: var(--wwc-line-height);
    color: var(--wwc-form-input-text);
    background: var(--wwc-form-input-bg);
    border: var(--wwc-border-width) solid var(--wwc-form-input-border);
    border-radius: var(--wwc-radius);
    transition: border-color var(--wwc-transition), box-shadow var(--wwc-transition);
}

:where(.wwc) input:where([type="text"], [type="email"], [type="password"], [type="number"],
    [type="tel"], [type="url"], [type="search"], [type="date"],
    [type="time"], [type="datetime-local"]):focus,
:where(.wwc) textarea:focus,
:where(.wwc) select:focus {
    outline: none;
    border-color: var(--wwc-form-input-focus);
    box-shadow: var(--wwc-ring);
}

:where(.wwc) textarea {
    min-height: 5em;
    resize: vertical;
}

:where(.wwc) select {
    cursor: pointer;
    appearance: none;
    background-image: var(--wwc-icon-chevron);
    background-repeat: no-repeat;
    background-position: right 0.6em center;
    background-size: 1em;
    padding-right: 2em;
}

:where(.wwc) :not(.wwc-switch)>input[type="checkbox"] {
    appearance: none;
    width: var(--wwc-checkbox-size);
    height: var(--wwc-checkbox-size);
    margin: 0 var(--wwc-s2) 0 0;
    background-color: var(--wwc-checkbox-bg);
    border: var(--wwc-border-width) solid var(--wwc-checkbox-border);
    border-radius: var(--wwc-checkbox-radius);
    cursor: pointer;
}

:where(.wwc) :not(.wwc-switch)>input[type="checkbox"]:checked {
    background-color: var(--wwc-checkbox-checked-bg);
    border-color: var(--wwc-checkbox-checked-border);
    -webkit-mask: none;
    mask: none;
    background-image: none;
    box-shadow: inset 0 0 0 0.16em Canvas, inset 0 0 0 1em var(--wwc-checkbox-checked-bg);
}

:where(.wwc) :not(.wwc-switch)>input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: var(--wwc-checkbox-ring);
}

:where(.wwc) input[type="radio"] {
    appearance: none;
    width: var(--wwc-radio-size);
    height: var(--wwc-radio-size);
    margin: 0 var(--wwc-s2) 0 0;
    background-color: var(--wwc-radio-bg);
    border: var(--wwc-border-width) solid var(--wwc-radio-border);
    border-radius: 50%;
    cursor: pointer;
}

:where(.wwc) input[type="radio"]:checked {
    border-color: var(--wwc-radio-checked-border);
    box-shadow: inset 0 0 0 0.2em var(--wwc-radio-checked-dot);
}

:where(.wwc) input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: var(--wwc-radio-ring);
}

:where(.wwc) .wwc-checkbox,
:where(.wwc) .wwc-radio {
    display: flex;
    align-items: center;
    margin-bottom: var(--wwc-s2);
}

:where(.wwc) .wwc-checkbox:last-child,
:where(.wwc) .wwc-radio:last-child {
    margin-bottom: 0;
}

:where(.wwc) .wwc-checkbox label,
:where(.wwc) .wwc-radio label,
:where(.wwc) .wwc-switch label {
    display: inline;
    margin-bottom: 0;
    font-family: var(--wwc-font-body);
    font-weight: inherit;
    color: inherit;
    cursor: pointer;
}

:where(.wwc) input[type="range"] {
    width: 100%;
    height: var(--wwc-slider-track-height);
    margin: var(--wwc-s2) 0;
    padding: 0;
    background: var(--wwc-slider-track-bg);
    border: none;
    border-radius: 9999px;
    appearance: none;
    cursor: pointer;
}

:where(.wwc) input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: var(--wwc-slider-thumb-size);
    height: var(--wwc-slider-thumb-size);
    background: var(--wwc-slider-thumb-bg);
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: transform var(--wwc-transition);
}

:where(.wwc) input[type="range"]::-moz-range-thumb {
    width: var(--wwc-slider-thumb-size);
    height: var(--wwc-slider-thumb-size);
    background: var(--wwc-slider-thumb-bg);
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: transform var(--wwc-transition);
}

:where(.wwc) input[type="range"]:focus {
    outline: none;
}

:where(.wwc) input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: var(--wwc-slider-thumb-ring);
}

:where(.wwc) input[type="range"]:focus-visible::-moz-range-thumb {
    box-shadow: var(--wwc-slider-thumb-ring);
}

:where(.wwc) label:has(+ input[type="range"]) {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

:where(.wwc) label output {
    font-size: var(--wwc-text-lg);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

:where(.wwc) .wwc-switch {
    display: flex;
    align-items: center;
    gap: var(--wwc-s2);
    margin-bottom: var(--wwc-s2);
}

:where(.wwc) .wwc-switch:last-child {
    margin-bottom: 0;
}

:where(.wwc) .wwc-switch input[type="checkbox"] {
    position: relative;
    width: var(--wwc-switch-width);
    height: var(--wwc-switch-height);
    margin: 0;
    appearance: none;
    background: var(--wwc-switch-bg);
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color var(--wwc-transition);
}

:where(.wwc) .wwc-switch input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(var(--wwc-switch-height) - 4px);
    height: calc(var(--wwc-switch-height) - 4px);
    background: var(--wwc-switch-thumb-bg);
    border-radius: 9999px;
    transition: transform var(--wwc-transition);
}

:where(.wwc) .wwc-switch input[type="checkbox"]:checked {
    background: var(--wwc-switch-checked-bg);
}

:where(.wwc) .wwc-switch input[type="checkbox"]:checked::before {
    transform: translateX(calc(var(--wwc-switch-width) - var(--wwc-switch-height)));
}

:where(.wwc) .wwc-switch input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: var(--wwc-switch-ring);
}

:where(.wwc) input:disabled,
:where(.wwc) textarea:disabled,
:where(.wwc) select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

:where(.wwc) ::placeholder {
    color: var(--wwc-form-input-placeholder);
}

/* ==================== BOUTONS ==================== */

:where(.wwc) button,
:where(.wwc) input:where([type="submit"], [type="reset"], [type="button"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wwc-s2);
    padding: 0.5em 1em;
    font-family: var(--wwc-font-title);
    font-size: var(--wwc-button-size);
    font-weight: var(--wwc-button-weight);
    line-height: var(--wwc-line-height);
    color: var(--wwc-button-primary-text);
    background: var(--wwc-button-primary-bg);
    border: var(--wwc-border-width) solid transparent;
    border-radius: var(--wwc-radius);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--wwc-transition), box-shadow var(--wwc-transition);
}

:where(.wwc) button:hover,
:where(.wwc) input:where([type="submit"], [type="reset"], [type="button"]):hover {
    background: var(--wwc-button-primary-bg-hover);
}

:where(.wwc) button:focus-visible,
:where(.wwc) input:where([type="submit"], [type="reset"], [type="button"]):focus-visible {
    outline: none;
    box-shadow: var(--wwc-button-primary-ring);
}

:where(.wwc) button:disabled,
:where(.wwc) input:where([type="submit"], [type="reset"], [type="button"]):disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

:where(.wwc) button.wwc-secondary {
    color: var(--wwc-button-secondary-text);
    background: var(--wwc-button-secondary-bg);
    border-color: var(--wwc-button-secondary-border);
}

:where(.wwc) button.wwc-secondary:hover {
    background: var(--wwc-button-secondary-bg-hover);
}

:where(.wwc) button.wwc-secondary:focus-visible {
    box-shadow: var(--wwc-button-secondary-ring);
}

:where(.wwc) button+button {
    margin-left: var(--wwc-s2);
}

/* ==================== MÉTRIQUE ET ÉCHELLE ==================== */

:where(.wwc) .wwc-column.wwc-metric {
    text-align: center;
    padding: var(--wwc-s3);
    border: 1px solid var(--wwc-line);
    border-radius: var(--wwc-radius);
    background: transparent;
}

:where(.wwc) .wwc-column.wwc-metric>.wwc-title {
    font-family: var(--wwc-font-title);
    font-size: 1.75em;
    font-weight: 700;
    justify-content: center;
    margin-bottom: var(--wwc-s1);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

:where(.wwc) .wwc-column.wwc-metric>p {
    font-size: var(--wwc-text-sm);
    color: var(--wwc-fg-muted);
}

:where(.wwc) .wwc-scale {
    position: relative;
    height: 1.4em;
    border-radius: var(--wwc-radius);
    overflow: hidden;
    margin: var(--wwc-s2) 0 var(--wwc-s1);
    background: linear-gradient(to right,
            color-mix(in oklab, var(--wwc-danger) 26%, transparent),
            color-mix(in oklab, var(--wwc-danger) 10%, transparent) 40%,
            color-mix(in oklab, var(--wwc-success) 10%, transparent) 60%,
            color-mix(in oklab, var(--wwc-success) 26%, transparent));
}

:where(.wwc) .wwc-scale-marker {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 3px;
    background: currentColor;
    border-radius: 2px;
    transform: translateX(-50%);
    transition: left 0.3s ease;
    box-shadow: 0 0 0 2px Canvas;
}

:where(.wwc) .wwc-scale-ticks {
    display: flex;
    justify-content: space-between;
    font-size: var(--wwc-text-xs);
    color: var(--wwc-fg-muted);
    margin-bottom: var(--wwc-s3);
}

/* ==========================================================================
   COMPOSANTS ÉDITORIAUX
   Utilisables seuls dans un bloc HTML personnalisé, sans conteneur .wwc.
   ========================================================================== */

[class^="wwc-"],
[class*=" wwc-"] {
    font-family: var(--wwc-font-body);
}

/* Libellés : capitales espacées, sans imposer de police. */
.wwc-brief__title,
.wwc-answer__lead,
.wwc-recap__title,
.wwc-pc__title,
.wwc-binary__tag,
.wwc-note__title,
.wwc-verdict__title,
.wwc-toc__summary {
    font-family: var(--wwc-font-title);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* 1 — En bref */
.wwc-brief {
    border: 1px solid var(--wwc-line);
    border-top: 2px solid var(--wwc-accent-line);
    border-radius: var(--wwc-radius-lg);
    padding: var(--wwc-s4);
    max-width: var(--wwc-measure);
    line-height: var(--wwc-lh);
}

.wwc-brief__title {
    margin: 0 0 var(--wwc-s3);
    font-size: var(--wwc-text-xs);
    line-height: 1.3;
    color: var(--wwc-fg-muted);
}

.wwc-brief__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--wwc-s2);
}

.wwc-brief__item {
    position: relative;
    padding-left: 1.4em;
}

.wwc-brief__item::before {
    content: "";
    position: absolute;
    left: 0.1em;
    top: 0.72em;
    width: 0.42em;
    height: 0.42em;
    border: 1.5px solid var(--wwc-accent-line);
    border-radius: 1px;
    transform: rotate(45deg);
}

/* 2 — Réponse courte */
.wwc-answer {
    max-width: var(--wwc-measure);
    margin: 0;
    padding: 0.1em 0 0.1em var(--wwc-s4);
    border-left: 2px solid var(--wwc-accent-line);
    font-size: 1.18em;
    line-height: 1.5;
}

.wwc-answer__lead {
    display: block;
    margin-bottom: var(--wwc-s1);
    font-size: 0.58em;
    color: var(--wwc-fg-muted);
}

/* 3 — À retenir */
.wwc-recap {
    max-width: var(--wwc-measure);
    border-top: 1px solid var(--wwc-line);
    padding-top: var(--wwc-s3);
}

.wwc-recap__title {
    margin: 0 0 var(--wwc-s1);
    font-size: var(--wwc-text-xs);
    color: var(--wwc-fg-muted);
}

.wwc-recap__text {
    margin: 0;
    font-size: var(--wwc-text-sm);
    color: var(--wwc-fg-muted);
}

/* 4 — Deux colonnes générique */
.wwc-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wwc-s3);
}

.wwc-duo__panel {
    border: 1px solid var(--wwc-line);
    border-radius: var(--wwc-radius-lg);
    padding: var(--wwc-s3) var(--wwc-s4) var(--wwc-s4);
    line-height: var(--wwc-lh);
}

.wwc-duo__title {
    margin: 0 0 var(--wwc-s2);
    padding-bottom: var(--wwc-s2);
    border-bottom: 1px solid var(--wwc-line);
    font-family: var(--wwc-font-title);
    font-size: 1em;
    font-weight: 600;
}

.wwc-duo__body {
    margin: 0;
    font-size: 0.96em;
}

.wwc-duo__body>*+* {
    margin-top: var(--wwc-s2);
}

/* 5 — Pour / Contre */
.wwc-pc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wwc-s3);
}

.wwc-pc__col {
    border: 1px solid var(--wwc-line);
    border-radius: var(--wwc-radius-lg);
    padding: var(--wwc-s3) var(--wwc-s4) var(--wwc-s4);
    line-height: var(--wwc-lh);
}

.wwc-pc__col--pro {
    border-top: 2px solid var(--wwc-success);
}

.wwc-pc__col--con {
    border-top: 2px solid var(--wwc-danger);
}

.wwc-pc__title {
    display: flex;
    align-items: center;
    gap: 0.45em;
    margin: 0 0 var(--wwc-s2);
    font-size: var(--wwc-text-xs);
}

.wwc-pc__col--pro .wwc-pc__title,
.wwc-pc__col--pro .wwc-pc__icon {
    color: var(--wwc-success);
}

.wwc-pc__col--con .wwc-pc__title,
.wwc-pc__col--con .wwc-pc__icon {
    color: var(--wwc-danger);
}

.wwc-pc__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--wwc-s2);
}

.wwc-pc__item {
    display: grid;
    grid-template-columns: 1.25em 1fr;
    gap: 0.5em;
    align-items: start;
    font-size: 0.96em;
}

.wwc-pc__icon {
    width: 1.1em;
    height: 1.1em;
    margin-top: 0.35em;
    flex: none;
}

/* 7 — Ce qui marche / ne marche pas */
.wwc-binary {
    display: grid;
    gap: var(--wwc-s2);
    max-width: var(--wwc-measure);
}

.wwc-binary__row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--wwc-s3);
    align-items: baseline;
    border: 1px solid var(--wwc-line);
    border-left-width: 2px;
    border-radius: var(--wwc-radius);
    padding: var(--wwc-s3) var(--wwc-s4);
    line-height: var(--wwc-lh);
}

.wwc-binary__row--yes {
    border-left-color: var(--wwc-success);
}

.wwc-binary__row--no {
    border-left-color: var(--wwc-danger);
}

.wwc-binary__tag {
    display: flex;
    align-items: center;
    gap: 0.4em;
    min-width: 9em;
    margin: 0;
    font-size: var(--wwc-text-xs);
}

.wwc-binary__row--yes .wwc-binary__tag {
    color: var(--wwc-success);
}

.wwc-binary__row--no .wwc-binary__tag {
    color: var(--wwc-danger);
}

.wwc-binary__icon {
    width: 1.05em;
    height: 1.05em;
    flex: none;
}

.wwc-binary__text {
    margin: 0;
    font-size: 0.96em;
}

/* 8 — Grille de mini-cartes */
.wwc-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
    gap: var(--wwc-s3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wwc-cards__item {
    border: 1px solid var(--wwc-line);
    border-radius: var(--wwc-radius-lg);
    padding: var(--wwc-s4);
    display: grid;
    gap: var(--wwc-s2);
    align-content: start;
    line-height: var(--wwc-lh);
}

.wwc-cards__icon {
    width: 1.5em;
    height: 1.5em;
    color: var(--wwc-fg-muted);
}

.wwc-cards__title {
    margin: 0;
    font-family: var(--wwc-font-title);
    font-size: 1em;
    font-weight: 600;
    line-height: 1.35;
}

.wwc-cards__text {
    margin: 0;
    font-size: var(--wwc-text-sm);
    line-height: 1.55;
    color: var(--wwc-fg-muted);
}

/* 9 — Étapes numérotées */
.wwc-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: wwc-step;
    display: grid;
    gap: var(--wwc-s3);
    max-width: var(--wwc-measure);
}

.wwc-steps__item {
    counter-increment: wwc-step;
    display: grid;
    grid-template-columns: 2.2em 1fr;
    gap: var(--wwc-s3);
    align-items: start;
    border-bottom: 1px solid var(--wwc-line);
    padding-bottom: var(--wwc-s3);
    line-height: var(--wwc-lh);
}

.wwc-steps__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.wwc-steps__item::before {
    content: counter(wwc-step);
    color: var(--wwc-line-strong);
    font-family: var(--wwc-font-title);
    font-size: 1.9em;
    font-weight: 700;
    line-height: 1;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.wwc-steps__title {
    margin: 0 0 var(--wwc-s1);
    font-family: var(--wwc-font-title);
    font-size: 1em;
    font-weight: 600;
}

.wwc-steps__text {
    margin: 0;
    font-size: 0.96em;
}

/* 10 — Fiche compacte */
.wwc-sheet {
    border: 1px solid var(--wwc-line);
    border-radius: var(--wwc-radius);
    padding: var(--wwc-s3) var(--wwc-s4);
    max-width: var(--wwc-measure);
    line-height: var(--wwc-lh);
}

.wwc-sheet+.wwc-sheet {
    margin-top: var(--wwc-s2);
}

.wwc-sheet__title {
    margin: 0 0 var(--wwc-s2);
    font-family: var(--wwc-font-title);
    font-size: 0.95em;
    font-weight: 600;
}

.wwc-sheet__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.25em;
}

.wwc-sheet__item {
    position: relative;
    padding-left: 1em;
    font-size: var(--wwc-text-sm);
    line-height: 1.5;
}

.wwc-sheet__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 0.35em;
    height: 1px;
    background: var(--wwc-line-strong);
}

/* 11 — Liste de vérification */
.wwc-check-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--wwc-s2);
    max-width: var(--wwc-measure);
    line-height: var(--wwc-lh);
}

.wwc-check__item {
    display: grid;
    grid-template-columns: 1.3em 1fr;
    gap: 0.55em;
    align-items: start;
}

.wwc-check__box {
    width: 1em;
    height: 1em;
    margin-top: 0.4em;
    border: 1.5px solid var(--wwc-line-strong);
    border-radius: 3px;
    flex: none;
}

.wwc-check__text {
    font-size: 0.96em;
}

/* 12 — Encadrés contextuels (nouvelle API BEM) */
.wwc-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--wwc-s3);
    border: 1px solid var(--wwc-line);
    border-left-width: 2px;
    border-radius: var(--wwc-radius);
    padding: var(--wwc-s3) var(--wwc-s4);
    max-width: var(--wwc-measure);
    line-height: var(--wwc-lh);
}

.wwc-note__icon {
    width: 1.15em;
    height: 1.15em;
    margin-top: 0.4em;
}

.wwc-note__body {
    min-width: 0;
}

.wwc-note__body>*+* {
    margin-top: var(--wwc-s2);
}

.wwc-note__title {
    display: block;
    margin-bottom: 0.1em;
    font-size: var(--wwc-text-xs);
}

.wwc-note__text {
    margin: 0;
    font-size: 0.96em;
}

.wwc-note--info {
    border-left-color: var(--wwc-accent-line);
}

.wwc-note--info .wwc-note__icon,
.wwc-note--info .wwc-note__title {
    color: var(--wwc-fg-muted);
}

.wwc-note--tip {
    border-left-color: var(--wwc-success);
}

.wwc-note--tip .wwc-note__icon,
.wwc-note--tip .wwc-note__title {
    color: var(--wwc-success);
}

.wwc-note--warning {
    border-left-color: var(--wwc-warning);
}

.wwc-note--warning .wwc-note__icon,
.wwc-note--warning .wwc-note__title {
    color: var(--wwc-warning);
}

.wwc-note--danger {
    border-left-color: var(--wwc-danger);
    background: color-mix(in oklab, var(--wwc-danger) 6%, transparent);
}

.wwc-note--danger .wwc-note__icon,
.wwc-note--danger .wwc-note__title {
    color: var(--wwc-danger);
}

/* 13 — Avis de la rédaction */
.wwc-verdict {
    border-left: 2px solid var(--wwc-accent-line);
    padding: 0.1em 0 0.1em var(--wwc-s4);
    max-width: var(--wwc-measure);
    line-height: var(--wwc-lh);
}

.wwc-verdict__title {
    margin: 0 0 var(--wwc-s1);
    font-size: var(--wwc-text-xs);
    color: var(--wwc-fg-muted);
}

.wwc-verdict__text {
    margin: 0;
}

.wwc-verdict__by {
    display: block;
    margin-top: var(--wwc-s2);
    font-family: var(--wwc-font-title);
    font-size: var(--wwc-text-sm);
    font-style: normal;
    color: var(--wwc-fg-muted);
}

/* 14 — Citation d'expert */
.wwc-quote-block {
    margin: 0;
    max-width: var(--wwc-measure);
}

.wwc-quote__text {
    margin: 0;
    font-size: 1.14em;
    line-height: 1.5;
}

.wwc-quote__text p {
    margin: 0;
}

.wwc-quote__attr {
    display: grid;
    gap: 0.1em;
    margin-top: var(--wwc-s3);
    padding-top: var(--wwc-s2);
    border-top: 1px solid var(--wwc-line);
}

.wwc-quote__name {
    font-family: var(--wwc-font-title);
    font-size: 0.9em;
    font-weight: 600;
    font-style: normal;
}

.wwc-quote__role {
    font-size: var(--wwc-text-sm);
    color: var(--wwc-fg-muted);
}

/* 15 — Chiffre-clé */
.wwc-stat {
    display: grid;
    gap: var(--wwc-s1);
    border-top: 1px solid var(--wwc-line);
    border-bottom: 1px solid var(--wwc-line);
    padding: var(--wwc-s4) 0;
    max-width: var(--wwc-measure);
}

.wwc-stat__value {
    font-family: var(--wwc-font-title);
    font-size: 2.8em;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.wwc-stat__caption {
    margin: 0;
    max-width: 32ch;
    line-height: var(--wwc-lh);
}

.wwc-stat__source {
    font-family: var(--wwc-font-title);
    font-size: var(--wwc-text-sm);
    letter-spacing: 0.03em;
    color: var(--wwc-fg-muted);
}

/* 16 — Sommaire */
.wwc-toc {
    border: 1px solid var(--wwc-line);
    border-radius: var(--wwc-radius-lg);
    padding: var(--wwc-s3) var(--wwc-s4);
    max-width: 34em;
    line-height: var(--wwc-lh);
}

.wwc-toc__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wwc-s2);
    cursor: pointer;
    font-size: var(--wwc-text-xs);
    color: var(--wwc-fg-muted);
}

.wwc-toc__summary::-webkit-details-marker {
    display: none;
}

.wwc-toc__chevron {
    width: 1em;
    height: 1em;
    transition: transform 0.18s ease;
}

.wwc-toc[open] .wwc-toc__chevron {
    transform: rotate(180deg);
}

.wwc-toc__list {
    margin: var(--wwc-s3) 0 0;
    padding: 0;
    list-style: none;
    counter-reset: wwc-toc;
    display: grid;
    gap: 0.3em;
}

.wwc-toc__item {
    counter-increment: wwc-toc;
}

/* `.wwc-toc__list .wwc-toc__link` (0,2,0) : le lien générique `[class^="wwc-"] a`
   (0,1,1) l'emportait sinon, et le sommaire sortait souligné, numéro compris. */
.wwc-toc__list .wwc-toc__link {
    display: grid;
    grid-template-columns: 1.8em 1fr;
    gap: 0.35em;
    color: inherit;
    text-decoration: none;
    font-size: 0.96em;
}

.wwc-toc__link::before {
    content: counter(wwc-toc) ".";
    color: var(--wwc-fg-muted);
    font-variant-numeric: tabular-nums;
}

.wwc-toc__list .wwc-toc__link:hover {
    color: var(--wwc-link-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wwc-toc__sub {
    margin: 0.25em 0 0;
    padding-left: 1.8em;
    list-style: none;
    display: grid;
    gap: 0.2em;
}

/* ==================== ACCESSIBILITÉ ==================== */

[class^="wwc-"] a:focus-visible,
[class*=" wwc-"] a:focus-visible,
.wwc-toc__summary:focus-visible,
.wwc-table__scroll:focus-visible,
:where(.wwc) :focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

    .wwc,
    [class^="wwc-"],
    [class*=" wwc-"],
    :where(.wwc) *,
    :where(.wwc) *::before,
    :where(.wwc) *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ==================== MOBILE ==================== */

@media (max-width: 640px) {

    .wwc-duo,
    .wwc-pc,
    .wwc-cards,
    .wwc-product,
    .wwc-products__grid,
    .wwc-collection-cta,
    :where(.wwc).wwc-grid,
    :where(.wwc) .wwc-grid {
        grid-template-columns: 1fr;
    }

    .wwc-collection-cta__media {
        min-height: 8em;
    }

    .wwc-binary__row {
        grid-template-columns: 1fr;
        gap: var(--wwc-s1);
    }

    .wwc-answer {
        padding-left: var(--wwc-s3);
    }

    .wwc-note {
        padding: var(--wwc-s3);
    }

    .wwc-steps__item {
        grid-template-columns: 1.7em 1fr;
        gap: var(--wwc-s2);
    }

    .wwc-steps__item::before {
        font-size: 1.5em;
    }

    .wwc-stat__value {
        font-size: 2.3em;
    }

    .wwc-table__el th[scope="row"],
    :where(.wwc).wwc-table tbody th {
        max-width: 9em;
        white-space: normal;
    }
}

/* ==================== IMPRESSION ==================== */

@media print {

    .wwc,
    [class^="wwc-"],
    [class*=" wwc-"] {
        color: #000;
        background: transparent !important;
        box-shadow: none !important;
    }

    .wwc,
    .wwc-brief,
    .wwc-note,
    .wwc-cards__item,
    .wwc-duo__panel,
    .wwc-pc__col,
    .wwc-sheet,
    .wwc-binary__row,
    .wwc-toc,
    .wwc-table__scroll,
    .wwc-product,
    .wwc-products__item,
    .wwc-collection-cta,
    .wwc-product-banner {
        border-color: #999 !important;
        border-width: 1px !important;
    }

    .wwc-note,
    :where(.wwc)[class*="wwc-tip"],
    :where(.wwc)[class*="wwc-info"],
    :where(.wwc)[class*="wwc-warning"],
    :where(.wwc)[class*="wwc-danger"] {
        border-left-width: 2px !important;
    }

    .wwc-brief {
        border-top-width: 1px !important;
    }

    .wwc-table__el thead th,
    .wwc-table__group th,
    .wwc-table__el tbody tr:nth-child(even) td,
    .wwc-table__el .wwc-table__cell--lead,
    .wwc-table__el .wwc-table__row--lead th,
    .wwc-table__el .wwc-table__row--lead td,
    :where(.wwc).wwc-table th,
    :where(.wwc).wwc-table td {
        background: transparent !important;
    }

    .wwc-table__el th[scope="row"],
    .wwc-table__el thead th:first-child,
    :where(.wwc).wwc-table tbody th,
    :where(.wwc).wwc-table thead th:first-child {
        position: static !important;
    }

    .wwc-table__scroll,
    :where(.wwc).wwc-table {
        overflow: visible;
    }

    .wwc-brief,
    .wwc-note,
    .wwc-stat,
    .wwc-steps__item,
    .wwc-cards__item,
    .wwc-sheet,
    .wwc-quote-block,
    .wwc-duo__panel,
    .wwc-pc__col,
    .wwc-product,
    .wwc-products__item,
    .wwc-collection-cta,
    .wwc-product-banner,
    .wwc {
        break-inside: avoid;
    }
}