/* ====================================================
     LAYOUT CATALOGUE
     ==================================================== */
  .cat-page {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: var(--space-24) var(--space-16) var(--space-48);
  }
  .cat-header {
    margin-bottom: var(--space-44);
    padding-bottom: var(--space-24);
    border-bottom: 1px solid var(--line);
  }
  .cat-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-eyebrow);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--terra-deep);
    margin-bottom: var(--space-6);
    font-weight: var(--weight-mono);
  }
  .cat-header h1 { margin-bottom: var(--space-6); }
  .cat-header p {
    font-size: var(--text-body-l);
    line-height: var(--leading-body-l);
    color: var(--ink-soft);
    max-width: var(--max-w-text);
    font-weight: var(--weight-body-medium);
  }

  .cat-section { margin-bottom: var(--space-48); }
  .cat-section-title {
    font-size: var(--text-h2);
    font-weight: var(--weight-display-bold);
    line-height: var(--leading-h2);
    letter-spacing: var(--tracking-h2);
    color: var(--olive-deep);
    margin-bottom: var(--space-8);
  }
  .cat-section-intro {
    color: var(--ink-soft);
    margin-bottom: var(--space-24);
    max-width: var(--max-w-text);
  }

  .cat-block {
    margin-bottom: var(--space-24);
  }
  .cat-block-label {
    font-family: var(--font-mono);
    font-size: var(--text-eyebrow);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--terra-deep);
    margin-bottom: var(--space-8);
    font-weight: var(--weight-mono);
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }
  .cat-block-label::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--terra);
    border-radius: var(--radius-circle);
  }
  /* Direction 3 (2026-05-07) : .cat-block-stage neutralisé par défaut.
     Composants validés au plus près du rendu réel (la fiche plante finale n'a aucun
     stage). Layout flex/gap conservé, visuel transparent. */
  .cat-block-stage {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    margin-block: var(--space-12);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
    align-items: flex-start;
  }
  .cat-block-stage.column {
    flex-direction: column;
    align-items: stretch;
  }
  /* .dark conservé pour démos contraste (boutons, nav sur fond sombre) */
  .cat-block-stage.dark {
    background: var(--olive-deep);
    padding: var(--space-16);
    border-radius: var(--radius-xl);
  }
  .cat-block-stage.dark .btn {
    /* keep buttons readable on dark */
  }
  /* Opt-in : bg démo pour cas où contraste catalogue strictement nécessaire.
     À utiliser avec parcimonie, pas par défaut. */
  .cat-block-stage--demo-bg {
    background: var(--linen-warm);
    border-radius: var(--radius-xl);
    padding: var(--space-16);
  }

  .cat-spec {
    margin-top: var(--space-8);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    color: var(--ink-mute);
    line-height: 1.55;
    background: var(--linen-soft);
    overflow-wrap: break-word;
    word-break: break-word;
    padding: var(--space-8) var(--space-12);
    border-radius: var(--radius-md);
    border: 1px dashed var(--line-strong);
  }


  /* ====================================================
     1. BOUTON
     ==================================================== */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-body-s);
    font-weight: var(--weight-body-medium);
    line-height: 1;
    padding: 14px 28px;
    border: 1.5px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition-all);
    user-select: none;
    min-height: 44px;
  }
  .btn:focus-visible {
    outline: 2px solid var(--olive);
    outline-offset: 3px;
  }

  /* Primary */
  .btn--primary {
    background: var(--olive-deep);
    color: var(--linen);
    border-color: var(--olive-deep);
  }
  .btn--primary:hover {
    background: var(--olive);
    border-color: var(--olive);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--olive-deep) 40%, transparent);
  }
  .btn--primary:active {
    background: var(--olive-deep);
    transform: translateY(0);
    box-shadow: none;
  }
  .btn--primary:disabled,
  .btn--primary.is-disabled {
    background: var(--olive-pale);
    border-color: var(--olive-pale);
    color: var(--ink-mute);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  /* Secondary — warm filled (mirroir du primary, accent chaud) */
  .btn--secondary {
    background: var(--terra-deep);
    color: var(--linen);
    border-color: var(--terra-deep);
  }
  .btn--secondary:hover {
    background: var(--terra-deep);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--terra-deep) 45%, transparent);
    filter: brightness(1.06);
  }
  .btn--secondary:active {
    transform: translateY(0);
    box-shadow: none;
    filter: none;
  }
  .btn--secondary:disabled,
  .btn--secondary.is-disabled {
    background: var(--terra-soft);
    border-color: var(--terra-soft);
    color: var(--ink-mute);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: none;
  }

  /* Ghost / Tertiary — outlined olive (le bouton qu'on voit clairement) */
  .btn--ghost {
    background: transparent;
    color: var(--olive-deep);
    border-color: var(--olive-deep);
    font-weight: var(--weight-body-semibold);
    padding: 12.5px 26.5px;
  }
  .btn--ghost:hover {
    background: var(--olive-mist);
    border-color: var(--olive);
  }
  .btn--ghost:active {
    background: var(--olive-pale);
  }
  .btn--ghost:disabled,
  .btn--ghost.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Sizes */
  .btn--sm { padding: 10px 18px; font-size: var(--text-caption); min-height: 36px; }
  .btn--sm.btn--ghost { padding: 8.5px 16.5px; }

  .btn--lg { padding: 18px 36px; font-size: var(--text-body-m); min-height: 52px; }
  .btn--lg.btn--ghost { padding: 16.5px 34.5px; }


  /* ====================================================
     2. LIEN
     ==================================================== */

  .link {
    color: var(--olive-deep);
    text-decoration: underline;
    text-decoration-color: var(--olive-pale);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    font-weight: var(--weight-body-medium);
    transition: var(--transition-color), text-decoration-color var(--duration-fast) var(--ease-default);
  }
  .link:hover {
    text-decoration-color: var(--olive);
  }
  .link:visited {
    color: var(--olive-deep);
  }
  .link:focus-visible {
    outline: 2px solid var(--olive);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  /* Variant arrow link */
  .link--arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    text-decoration: none;
    color: var(--olive-deep);
  }
  .link--arrow::after {
    content: '→';
    transition: transform var(--duration-default) var(--ease-default);
    color: var(--terra-deep);
  }
  .link--arrow:hover::after {
    transform: translateX(4px);
    color: var(--terra-deep);
  }
  .link--arrow:hover {
    color: var(--olive);
  }

  /* Variant subtle link */
  .link--subtle {
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px dashed var(--line-strong);
    padding-bottom: 1px;
  }
  .link--subtle:hover {
    color: var(--olive-deep);
    border-bottom-color: var(--olive);
  }


  /* ====================================================
     3. BADGE / PILL
     ==================================================== */

  .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-caption);
    font-weight: var(--weight-body-semibold);
    line-height: 1;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    border: 1.5px solid transparent;
    background: var(--olive-mist);
    color: var(--olive-deep);
    letter-spacing: 0.1px;
    transition: var(--transition-all);
  }

  /* Variants */
  .badge--solid {
    background: var(--olive);
    color: var(--linen);
  }
  .badge--terra {
    background: var(--terra-soft);
    color: var(--terra-deep);
  }
  .badge--outline {
    background: transparent;
    color: var(--olive-deep);
    border-color: var(--olive-pale);
  }
  .badge--mono {
    font-family: var(--font-mono);
    font-size: var(--text-eyebrow);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    background: var(--linen-deep);
    color: var(--ink);
    padding: 6px 12px;
    font-weight: var(--weight-mono);
  }
  .badge--mono.badge--terra {
    background: var(--terra-soft);
    color: var(--terra-deep);
  }
  .badge--mono.badge--olive {
    background: var(--olive-mist);
    color: var(--olive-deep);
  }

  /* Hover (interactive pill) */
  .badge.is-interactive {
    cursor: pointer;
  }
  .badge.is-interactive:hover {
    transform: scale(1.03);
    background: var(--olive-pale);
  }
  .badge.is-interactive.badge--terra:hover {
    background: var(--terra);
    color: var(--linen);
  }


  /* ====================================================
     4. CARD
     ==================================================== */

  .card {
    background: var(--linen);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-2xl);
    padding: var(--space-16);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-transform), var(--transition-shadow);
    color: var(--ink);
  }
  .card-title {
    font-family: var(--font-display);
    font-size: var(--text-h4);
    font-weight: var(--weight-display-semibold);
    color: var(--olive-deep);
    margin-bottom: var(--space-6);
    line-height: var(--leading-h4);
    letter-spacing: var(--tracking-h4);
  }
  .card-meta {
    font-family: var(--font-mono);
    font-size: var(--text-eyebrow);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--terra-deep);
    margin-bottom: var(--space-8);
    font-weight: var(--weight-mono);
    display: block;
  }
  .card-body {
    font-size: var(--text-body-s);
    line-height: var(--leading-body-s);
    color: var(--ink-soft);
    margin-bottom: var(--space-12);
  }
  .card-actions {
    display: flex;
    gap: var(--space-6);
    align-items: center;
    margin-top: var(--space-12);
  }

  /* Variants */
  .card--warm {
    background: var(--linen-warm);
    border: none;
  }
  .card--flat {
    box-shadow: none;
  }
  .card--interactive {
    cursor: pointer;
    text-decoration: none;
    display: block;
  }
  .card--interactive:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
  .card--interactive:focus-visible {
    outline: 2px solid var(--olive);
    outline-offset: 3px;
  }

  /* Card photo-top */
  .card--photo {
    padding: 0;
    overflow: hidden;
  }
  .card--photo .card-photo {
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    background-color: var(--olive-pale);
    position: relative;
  }
  .card--photo .card-body-wrap {
    padding: var(--space-12) var(--space-16) var(--space-16);
  }


  /* ====================================================
     5. INPUT
     ==================================================== */

  .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 360px;
  }
  .field-label {
    font-family: var(--font-body);
    font-size: var(--text-body-s);
    font-weight: var(--weight-body-semibold);
    color: var(--ink);
  }
  .field-help {
    font-size: var(--text-caption);
    color: var(--ink-mute);
    line-height: var(--leading-caption);
  }
  .field-error {
    font-size: var(--text-caption);
    color: var(--terra-deep);
    line-height: var(--leading-caption);
    font-weight: var(--weight-body-medium);
  }

  .input {
    background: var(--linen-warm);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-pill);
    padding: 12px 18px;
    font-family: var(--font-body);
    font-size: var(--text-body-s);
    line-height: 1.4;
    color: var(--ink);
    transition: var(--transition-all);
    min-height: 44px;
  }
  .input::placeholder {
    color: var(--ink-mute);
  }
  .input:hover {
    background: var(--linen-deep);
  }
  .input:focus {
    background: var(--linen);
    border-color: var(--olive);
    outline: none;
    box-shadow: var(--shadow-focus);
  }
  .input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .input.is-invalid {
    border-color: var(--terra-deep);
    box-shadow: var(--shadow-focus-error);
  }

  /* Search input */
  .input--search {
    padding-left: 44px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23767E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7' fill='none' stroke='%23767E7A'/><path d='m21 21-4.3-4.3' fill='none' stroke='%23767E7A'/></svg>");
    background-repeat: no-repeat;
    background-position: 18px center;
    width: 240px;
  }

  /* Textarea */
  textarea.input {
    border-radius: var(--radius-2xl);
    padding: 14px 18px;
    min-height: 96px;
    font-family: var(--font-body);
    line-height: 1.55;
    resize: vertical;
  }


  /* ====================================================
     6. SITE HEADER
     ==================================================== */
  .site-header {
    background: var(--overlay-header);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
  }
  .site-header__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 18px var(--space-16);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-16);
  }
  .site-logo {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: var(--weight-display-bold);
    letter-spacing: -1px;
    color: var(--ink);
    text-decoration: none;
    line-height: 1;
  }
  .site-logo__dot {
    color: var(--terra);
  }
  .site-nav {
    display: flex;
    gap: var(--space-4);
    list-style: none;
    justify-content: center;
  }
  .site-nav a {
    font-family: var(--font-body);
    font-size: var(--text-body-s);
    font-weight: var(--weight-body-medium);
    color: var(--ink-soft);
    text-decoration: none;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    transition: var(--transition-all);
  }
  .site-nav a:hover {
    color: var(--olive-deep);
    background: var(--linen-warm);
    text-decoration-color: transparent;
  }
  .site-nav a.is-active,
  .site-nav .current-menu-item > a,
  .site-nav .current_page_item > a,
  .site-nav .current-menu-ancestor > a {
    color: var(--olive-deep);
    background: var(--olive-mist);
    font-weight: var(--weight-body-semibold);
  }

  /* Direction 2 (2026-05-07) : burger button + drawer mobile.
     Burger visible <1024px, ouvre drawer latéral droit. */
  .site-burger {
    display: none;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--ink);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: var(--transition-all);
  }
  .site-burger:hover {
    background: var(--linen-warm);
  }
  .site-burger:focus-visible {
    outline: 2px solid var(--olive);
    outline-offset: 2px;
  }
  .site-burger svg {
    width: var(--icon-size-xl);
    height: var(--icon-size-xl);
    display: block;
  }

  /* Drawer overlay */
  .site-drawer-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-drawer);
    z-index: var(--z-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms var(--ease-default), visibility 0s linear 200ms;
    cursor: pointer;
  }
  .site-drawer-overlay.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 200ms var(--ease-default), visibility 0s linear 0s;
  }

  /* Drawer panel */
  /* Direction 3 (2026-05-07) : padding/gap réduits (32×24px / gap 24px). */
  .site-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 100vw;
    height: 100vh;
    background: var(--linen-warm);
    border-left: 1px solid var(--line-strong);
    z-index: var(--z-modal);
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    padding: var(--space-16) var(--space-12);
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    box-sizing: border-box;
  }
  .site-drawer.is-open {
    transform: translateX(0);
  }
  /* Direction 3 (2026-05-07) : drawer header sans logo, croix alignée droite. */
  .site-drawer__header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .site-drawer__close {
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: var(--transition-all);
  }
  .site-drawer__close:hover {
    background: var(--linen);
  }
  .site-drawer__close:focus-visible {
    outline: 2px solid var(--olive);
    outline-offset: 2px;
  }
  .site-drawer__close svg {
    width: var(--icon-size-xl);
    height: var(--icon-size-xl);
    display: block;
  }
  .site-drawer__nav {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .site-drawer__nav li {
    border-bottom: 1px solid var(--line);
  }
  .site-drawer__nav li:last-child {
    border-bottom: none;
  }
  .site-drawer__nav a {
    display: block;
    padding: var(--space-16) 0;
    font-family: var(--font-display);
    font-size: var(--text-h5);
    color: var(--olive-deep);
    text-decoration: none;
    font-weight: var(--weight-display-semibold);
    line-height: 1.3;
    transition: color 200ms var(--ease-default);
  }
  .site-drawer__nav a:hover {
    color: var(--terra-deep);
  }
  .site-drawer__nav a.is-active,
  .site-drawer__nav .current-menu-item > a,
  .site-drawer__nav .current_page_item > a,
  .site-drawer__nav .current-menu-ancestor > a {
    color: var(--terra-deep);
  }
  .site-drawer__nav a:focus-visible {
    outline: 2px solid var(--olive);
    outline-offset: 4px;
  }

  /* Body scroll lock quand drawer ouvert */
  body.is-drawer-open {
    overflow: hidden;
  }

  /* Mobile: burger visible aligné droite, nav desktop cachée, search dans drawer */
  @media (max-width: 1023px) {
    .site-burger {
      display: inline-flex;
    }
    .site-header__inner {
      grid-template-columns: 1fr auto;
      gap: var(--space-8);
    }
    .site-header__inner > nav,
    .site-header__inner > .site-header__search {
      display: none;
    }
  }

  /* Desktop: drawer + overlay hors DOM visuel */
  @media (min-width: 1024px) {
    .site-drawer-overlay,
    .site-drawer {
      display: none;
    }
  }


  /* ====================================================
     7. BREADCRUMB
     ==================================================== */
  .breadcrumb {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: var(--space-12) var(--space-16) 0;
    font-family: var(--font-body);
    font-size: var(--text-caption);
    color: var(--ink-mute);
  }
  .breadcrumb a {
    color: var(--ink-mute);
    text-decoration: none;
    font-weight: var(--weight-body-regular);
  }
  .breadcrumb a:hover {
    color: var(--terra-deep);
  }
  .breadcrumb__sep {
    margin: 0 10px;
    color: var(--olive-pale);
  }


  /* ====================================================
     8. HERO EDITORIAL (fiche plante — 2 colonnes)
     ==================================================== */
  .plant-hero {
    background: var(--linen);
    border-bottom: 1px solid var(--line);
  }
  .plant-hero__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 64px var(--space-16) 80px;
  }
  .plant-hero__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-32);
    align-items: center;
  }
  .plant-hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }
  .plant-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
  }
  .plant-hero__title {
    font-family: var(--font-display);
    font-size: var(--text-h1);
    font-weight: var(--weight-display-bold);
    line-height: var(--leading-h1);
    letter-spacing: var(--tracking-h1);
    color: var(--olive-deep);
    margin: 0;
  }
  .plant-hero__title .hl {
    color: var(--terra-deep);
    font-weight: var(--weight-display-bold);
  }
  .plant-hero__latin {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 22px;
    color: var(--ink-soft);
    font-weight: var(--weight-body-medium);
    letter-spacing: 0.2px;
    margin: 0;
  }
  .plant-hero__author {
    font-family: var(--font-mono);
    font-size: var(--text-eyebrow);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--ink-mute);
    margin: 0;
    font-weight: var(--weight-mono);
  }
  .plant-hero__intro {
    font-family: var(--font-body);
    font-size: var(--text-body-l);
    line-height: var(--leading-body-l);
    color: var(--ink-soft);
    font-weight: var(--weight-body-medium);
    max-width: 56ch;
    margin: var(--space-8) 0 0;
  }
  .plant-hero__intro strong {
    color: var(--olive-deep);
    font-weight: var(--weight-body-bold);
  }
  .plant-hero__intro em {
    font-style: italic;
    color: var(--terra-deep);
    font-weight: var(--weight-body-medium);
  }
  .plant-hero__synonyms {
    font-family: var(--font-body);
    font-size: var(--text-caption);
    color: var(--ink-soft);
    line-height: 1.65;
    margin: var(--space-6) 0 0;
  }
  .plant-hero__synonyms-label {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--terra-deep);
    display: block;
    margin-bottom: var(--space-2);
    font-weight: var(--weight-mono);
  }
  .plant-hero__media {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }
  .plant-hero__photo {
    aspect-ratio: 4 / 3;
    max-height: 520px;
    width: 100%;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: var(--olive-pale);
  }
  .plant-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(1.05);
    display: block;
  }
  .plant-hero__caption {
    font-family: var(--font-mono);
    font-size: var(--text-eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--ink-mute);
    margin: 0;
    font-weight: var(--weight-mono);
  }

  /* Variante text-only (sans photo) — modifier class explicite + :has() pour auto-détection.
     Grille passe en 1fr (pleine largeur du container .plant-hero__inner = max-w 1280px).
     Contenu aligné à gauche, intro contrainte à 64ch (~700px) pour respecter la règle de
     lisibilité du DESIGN.md. Aucun fallback image générique. */
  .plant-hero--text-only .plant-hero__grid,
  .plant-hero:not(:has(.plant-hero__media)) .plant-hero__grid {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .plant-hero--text-only .plant-hero__content,
  .plant-hero:not(:has(.plant-hero__media)) .plant-hero__content {
    width: 100%;
    align-items: flex-start;
  }
  .plant-hero--text-only .plant-hero__title,
  .plant-hero:not(:has(.plant-hero__media)) .plant-hero__title {
    font-size: var(--text-h1-textonly);
  }
  .plant-hero--text-only .plant-hero__intro,
  .plant-hero:not(:has(.plant-hero__media)) .plant-hero__intro {
    max-width: 64ch;
  }


  /* ====================================================
     9. INTRO BAND
     ==================================================== */
  .plant-intro {
    background: var(--linen);
    border-bottom: 1px solid var(--line);
  }
  .plant-intro__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: var(--space-32) var(--space-16);
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--space-32);
    align-items: start;
  }
  .plant-intro__text {
    font-family: var(--font-body);
    font-size: 28px;
    line-height: 1.45;
    color: var(--ink);
    font-weight: var(--weight-body-medium);
    letter-spacing: -0.3px;
    margin: 0;
  }
  .plant-intro__text strong {
    color: var(--olive-deep);
    font-weight: var(--weight-body-bold);
  }
  .plant-intro__text em {
    font-style: italic;
    color: var(--terra-deep);
    font-weight: var(--weight-body-medium);
  }
  .plant-intro__aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
  }
  .plant-intro__synonyms {
    font-family: var(--font-body);
    font-size: var(--text-caption);
    color: var(--ink-soft);
    line-height: 1.65;
    margin: 0;
  }
  .plant-intro__synonyms-label {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--terra-deep);
    display: block;
    margin-bottom: var(--space-2);
    font-weight: var(--weight-mono);
  }
  .usage-pills {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
  }


  /* ====================================================
     PILL (variants — proches du badge mais sémantique distincte)
     ==================================================== */
  .pill {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: var(--weight-body-medium);
    line-height: 1;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-pill);
    border: 1.5px solid transparent;
    background: var(--olive-mist);
    color: var(--olive-deep);
    letter-spacing: 0.1px;
  }
  .pill.solid {
    background: var(--olive);
    color: var(--linen);
    font-weight: var(--weight-body-semibold);
  }
  .pill.terra {
    background: var(--terra-soft);
    color: var(--terra-deep);
  }
  .pill.outline {
    background: transparent;
    color: var(--olive-deep);
    border-color: var(--olive-pale);
  }


  /* ====================================================
     10. QUICK FACTS BAND
     Desktop ≥1024 : 5 cols égales, séparateurs verticaux border-right
     Mobile <1024  : 1 col stack, séparateurs horizontaux border-bottom
     Pas de cas tablet bâtard avec orphan : on stack tôt et proprement.
     ==================================================== */
  .quick-facts {
    background: var(--linen-warm);
    border-bottom: 1px solid var(--line);
  }
  .quick-facts__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 40px var(--space-16);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
  }
  .fact {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: 0 var(--space-12);
    border-right: 1px solid var(--line);
    border-bottom: none;
  }
  .fact:first-child {
    padding-left: 0;
  }
  .fact:last-child {
    border-right: none;
    padding-right: 0;
  }
  .fact__icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-circle);
    background: var(--olive-mist);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--olive-deep);
    margin-bottom: var(--space-2);
    flex-shrink: 0;
  }
  .fact__icon svg {
    width: 22px;
    height: 22px;
    display: block;
  }
  .fact__label {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--ink-mute);
    font-weight: var(--weight-mono);
  }
  .fact__value {
    font-family: var(--font-display);
    font-size: var(--text-h4);
    font-weight: var(--weight-display-semibold);
    color: var(--olive-deep);
    line-height: 1.15;
    letter-spacing: -0.5px;
  }


  /* ====================================================
     11. TOC STICKY SCROLL-SPY
     ==================================================== */
  .toc {
    position: sticky;
    top: var(--space-48);
  }
  .toc__label {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    text-transform: uppercase;
    letter-spacing: 0.20em;
    color: var(--ink-mute);
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    font-weight: var(--weight-mono);
  }
  .toc__list {
    list-style: none;
    counter-reset: section;
    margin: 0;
    padding: 0;
  }
  .toc__list li {
    counter-increment: section;
    margin-bottom: var(--space-2);
  }
  .toc__link {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    color: var(--ink-soft);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: var(--text-caption);
    line-height: 1.4;
    transition: color 200ms var(--ease-default), background-color 200ms var(--ease-default);
    align-items: center;
    font-weight: var(--weight-body-medium);
  }
  .toc__link::before {
    content: counter(section, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-mute);
    letter-spacing: 1px;
    font-weight: var(--weight-mono);
  }
  .toc__link:hover {
    color: var(--olive-deep);
    background: var(--linen-warm);
  }
  .toc__link.is-active {
    color: var(--olive-deep);
    background: var(--olive-mist);
    font-weight: var(--weight-body-semibold);
  }
  .toc__link.is-active::before {
    color: var(--olive-deep);
  }


  /* ====================================================
     12. SECTION MOLECULES (eyebrow + title + lede)
     ==================================================== */
  .section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--text-eyebrow);
    color: var(--terra-deep);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    margin-bottom: 18px;
    font-weight: var(--weight-mono);
  }
  .section-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--terra);
    border-radius: var(--radius-circle);
    flex-shrink: 0;
  }
  .section-title {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: var(--weight-display-bold);
    color: var(--olive-deep);
    line-height: var(--leading-h2);
    letter-spacing: var(--tracking-h2);
    margin: 0 0 var(--space-12);
  }
  .section-title .hl {
    color: var(--terra-deep);
    font-weight: var(--weight-display-bold);
  }
  .section-lede {
    font-family: var(--font-body);
    font-size: var(--text-body-l);
    line-height: var(--leading-body-l);
    color: var(--ink-soft);
    margin: 0 0 var(--space-16);
    max-width: 620px;
    font-weight: var(--weight-body-medium);
    letter-spacing: -0.3px;
  }


  /* ====================================================
     13. BOTANICAL TABLE
     ==================================================== */
  .botanical-table {
    background: var(--linen-warm);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-2xl);
    margin: var(--space-16) 0;
    overflow: hidden;
  }
  .botanical-table dl {
    display: grid;
    grid-template-columns: 220px 1fr;
    margin: 0;
  }
  .botanical-table dt,
  .botanical-table dd {
    padding: 18px 28px;
    border-bottom: 1px solid var(--line);
    margin: 0;
  }
  .botanical-table dt {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    color: var(--ink-mute);
    font-weight: var(--weight-mono);
    /* Direction 5 (2026-05-07) : dt en linen-warm pour adoucir le contraste
       et homogénéiser avec mobile. Séparation visuelle via grille + border. */
    background: var(--linen-warm);
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }
  .botanical-table dt svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    flex-shrink: 0;
    color: var(--ink-mute);
  }
  .botanical-table dd {
    color: var(--ink);
    font-size: var(--text-body-s);
    line-height: 1.55;
    background: var(--linen);
  }
  .botanical-table dd em {
    font-style: italic;
  }
  .botanical-table dl > *:nth-last-child(-n+2) {
    border-bottom: none;
  }


  /* ====================================================
     14. PROPERTIES LIST (pharmacologiques)
     ==================================================== */
  .properties-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: var(--space-12) 0 var(--space-16);
    padding: 0;
    list-style: none;
  }
  .property {
    display: inline-flex;
    align-items: center;
    background: var(--olive-mist);
    color: var(--olive-deep);
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: var(--weight-body-semibold);
    letter-spacing: 0.1px;
    transition: transform 200ms var(--ease-default), background-color 200ms var(--ease-default);
    cursor: pointer;
    border: none;
  }
  .property:hover {
    transform: scale(1.03);
    background: var(--olive-pale);
  }


  /* ====================================================
     15. CULINARY GRID
     ==================================================== */
  .culinary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    margin: var(--space-16) 0;
  }
  /* Direction 5 (2026-05-07) : bordure gradient enveloppe complète
     (4 côtés) via double background-clip (padding-box pour bg interne,
     border-box pour bordure gradient). Préserve border-radius proprement.
     Suppression de l'ancien ::before (trait haut isolé) + bordure D4. */
  .culinary-card {
    background:
      linear-gradient(var(--linen), var(--linen)) padding-box,
      linear-gradient(135deg, var(--olive-deep) 0%, var(--terra) 100%) border-box;
    border: 2px solid transparent;
    border-radius: var(--radius-2xl);
    padding: var(--space-16);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }
  .culinary-card h4 {
    font-family: var(--font-display);
    font-size: var(--text-h4);
    color: var(--olive-deep);
    margin: 0 0 var(--space-8);
    font-weight: var(--weight-display-semibold);
    line-height: 1.15;
    letter-spacing: -0.4px;
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }
  .culinary-card h4 svg {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    flex-shrink: 0;
    color: var(--olive-deep);
  }
  .culinary-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .culinary-card li {
    padding: 10px 0;
    display: flex;
    gap: var(--space-6);
    font-size: var(--text-body-s);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .culinary-card li:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .culinary-card li::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--terra-deep);
    border-radius: var(--radius-circle);
    flex-shrink: 0;
    margin-top: var(--space-4);
  }


  /* ====================================================
     16. PREP BLOCK (préparations / dosage)
     ==================================================== */
  .prep-block {
    background: var(--linen);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-2xl);
    padding: var(--space-16);
    margin: var(--space-12) 0;
    box-shadow: var(--shadow-sm);
    counter-increment: prep;
  }
  .preparations { counter-reset: prep; }
  /* Direction 5 (2026-05-07) : suppression border-bottom header.
     Le bloc dosage en linen-warm en dessous suffit à structurer. */
  .prep-block__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
  }
  .prep-block__title {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--ink);
    font-weight: var(--weight-display-semibold);
    line-height: 1.1;
    letter-spacing: -0.6px;
    margin: 0;
  }
  .prep-block__num {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--terra-deep);
    background: var(--terra-soft);
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
    font-weight: var(--weight-mono);
  }
  /* Direction 5 (2026-05-07) : suppression bordure D4.
     Fond linen-warm distingue déjà le dosage du body. Radius conservé. */
  .prep-block__dosage {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin: var(--space-8) 0 var(--space-12);
    padding: var(--space-12);
    background: var(--linen-warm);
    border-radius: var(--radius-md);
  }
  .dosage-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .dosage-label {
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--ink-mute);
    font-weight: var(--weight-mono);
  }
  .dosage-value {
    font-family: var(--font-display);
    font-size: 17px;
    color: var(--olive-deep);
    font-weight: var(--weight-display-semibold);
    line-height: 1.2;
    letter-spacing: -0.3px;
  }
  .prep-block__body {
    font-size: var(--text-body-s);
    line-height: 1.65;
    margin: 0;
    color: var(--ink-soft);
  }


  /* ====================================================
     17. PRECAUTION BLOCK (contre-indications)
     ==================================================== */
  .precaution-block {
    background: var(--terra-soft);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-2xl);
    padding: 36px;
    margin: var(--space-32) 0 var(--space-12);
  }
  .precaution-block__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid color-mix(in srgb, var(--terra-deep) 18%, transparent);
  }
  .precaution-block__header > .precaution-block__title {
    flex: 1 1 auto;
    min-width: 0;
  }
  .precaution-block__icon {
    width: 40px;
    height: 40px;
    background: var(--terra);
    color: var(--linen);
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .precaution-block__icon svg {
    width: 22px;
    height: 22px;
    display: block;
  }
  .precaution-block__title {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--terra-deep);
    margin: 0;
    font-weight: var(--weight-display-bold);
    letter-spacing: -0.7px;
    line-height: 1.15;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }
  .precaution-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  /* Direction 5 (2026-05-07) : suppression des puces rondes.
     Simplification grid 24px/1fr → bloc unique. Séparation entre items
     conservée via border-bottom + padding. Titre item (terra-deep, gras)
     reste aligné à gauche par le padding du li. */
  .precaution-list li {
    padding: var(--space-8) 0;
    border-bottom: 1px solid color-mix(in srgb, var(--terra-deep) 16%, transparent);
    font-size: var(--text-body-s);
    color: var(--ink);
    line-height: 1.55;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  .precaution-list strong {
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  .precaution-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .precaution-list strong {
    color: var(--terra-deep);
    font-weight: var(--weight-body-bold);
    display: block;
    margin-bottom: 2px;
  }


  /* ====================================================
     18. MEDICAL DISCLAIMER
     ==================================================== */
  .medical-disclaimer {
    background: var(--linen);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    padding: var(--space-12) var(--space-14, 26px);
    margin: var(--space-16) 0;
    font-family: var(--font-body);
    font-size: var(--text-caption);
    line-height: 1.7;
    color: var(--ink-soft);
  }
  .medical-disclaimer strong {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--terra-deep);
    margin-bottom: var(--space-4);
    font-weight: var(--weight-mono);
  }


  /* ====================================================
     19. SOURCES LIST
     ==================================================== */
  .sources-list {
    list-style: none;
    counter-reset: source;
    margin-top: var(--space-8);
    padding: 0;
  }
  .sources-list li {
    counter-increment: source;
    padding: 18px 24px 18px 92px;
    position: relative;
    font-size: var(--text-caption);
    color: var(--ink);
    line-height: 1.6;
    background: var(--linen-warm);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
  }
  .sources-list__icon {
    position: absolute;
    left: 22px;
    top: 18px;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--terra-deep);
    flex-shrink: 0;
  }
  .sources-list li::before {
    content: '[' counter(source, decimal-leading-zero) ']';
    position: absolute;
    left: 50px;
    top: 18px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--terra-deep);
    letter-spacing: 1px;
    font-weight: var(--weight-display-bold);
  }
  .sources-list em {
    font-style: italic;
  }
  .sources-list a {
    color: var(--olive-deep);
    text-decoration: underline;
    text-decoration-color: var(--olive-pale);
    text-underline-offset: 3px;
    font-weight: var(--weight-body-medium);
  }
  .sources-list a:hover {
    text-decoration-color: var(--olive);
  }


  /* ====================================================
     20. RELATED CARD photo-top (extension de .card--photo avec tag overlay)
     ==================================================== */
  .card-tag {
    position: absolute;
    top: var(--space-8);
    left: var(--space-8);
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--linen);
    background: rgba(20, 20, 15, 0.55);
    border: 1px solid var(--line-strong);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-weight: var(--weight-mono);
  }
  /* Grille de plantes cousines */
  .related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-12);
    width: 100%;
  }
  @media (max-width: 768px) {
    .related-grid { grid-template-columns: 1fr; }
  }
  /* Variant "related" pour grille de plantes cousines */
  .card--related .card-title {
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: -1px;
  }
  .card--related .card-latin {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 14px;
    color: var(--ink-mute);
    margin: -4px 0 12px;
  }
  .card--related .card-meta-bottom {
    font-size: var(--text-caption);
    color: var(--ink-soft);
    line-height: 1.55;
    margin: 0;
  }

  /* ====================================================
     23. CARD PLANTE MINI (Lot 3)
     Variante compacte de .card--related pour grille archive
     plante (4 cols desktop / 2 cols tablette / 1 col mobile).
     L'aspect-ratio 4/3 est conservé : la photo réduit
     naturellement avec la largeur de colonne.
     ==================================================== */
  .card--related--mini .card-body-wrap {
    padding: var(--space-8);
  }
  .card--related--mini .card-title {
    font-size: var(--text-h5);
    line-height: var(--leading-h5);
    letter-spacing: 0;
    margin: 0;
  }
  .card--related--mini .card-latin {
    font-family: var(--font-body);
    font-style: italic;
    font-size: var(--text-caption);
    color: var(--ink-mute);
    margin: var(--space-2) 0 var(--space-4);
  }
  .card--related--mini .card-meta-bottom {
    font-size: var(--text-caption);
    color: var(--ink-soft);
    line-height: var(--leading-caption);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Grille archive plante mini */
  .related-grid--mini {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-12);
    width: 100%;
  }
  @media (max-width: 960px) {
    .related-grid--mini { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 480px) {
    .related-grid--mini { grid-template-columns: 1fr; }
  }


  /* ====================================================
     24. FILTERS FACETTES (Lot 3)
     Sidebar de filtres taxonomies pour archive plante.
     5 groupes (1 déplié défaut + 4 pliés), pills cliquables
     aria-pressed, chips actifs avec X individuel + reset.
     Logique filtre = OU intra-taxo / ET inter-taxo (côté
     intégration WP, mockup statique ici).
     ==================================================== */
  .filters {
    width: 280px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    background: transparent;
    color: var(--ink);
  }

  /* Header : titre seul (compteur résultats vit dans le header de page, pas ici) */
  .filters__header {
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--line-strong);
  }
  .filters__header h3 {
    font-family: var(--font-display);
    font-size: var(--text-h5);
    font-weight: var(--weight-display-semibold);
    color: var(--ink);
    line-height: 1;
    letter-spacing: 0;
    margin: 0;
  }

  /* Filtres actifs : chips + reset */
  .filters__active {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
  }
  .filters__active[hidden] { display: none; }

  .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-eyebrow);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--terra-deep);
    background: var(--terra-soft);
    padding: 6px 6px 6px 12px;
    border-radius: var(--radius-pill);
    font-weight: var(--weight-mono);
    line-height: 1;
  }
  .filter-chip__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--terra-deep);
    cursor: pointer;
    border-radius: var(--radius-circle);
    transition: var(--transition-bg);
  }
  .filter-chip__close:hover {
    background: color-mix(in srgb, var(--terra-deep) 18%, transparent);
  }
  .filter-chip__close svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .filters__reset {
    font-family: var(--font-body);
    font-size: var(--text-caption);
    color: var(--ink-mute);
    background: transparent;
    border: 0;
    border-bottom: 1px dashed var(--line-strong);
    padding: 0 0 1px;
    cursor: pointer;
    margin-left: var(--space-2);
    transition: var(--transition-color), border-color var(--duration-fast) var(--ease-default);
  }
  .filters__reset:hover {
    color: var(--olive-deep);
    border-bottom-color: var(--olive);
  }

  /* Groupe de filtre (1 par taxonomie) */
  .filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--line);
  }
  .filter-group:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  /* Toggle (header cliquable du groupe) */
  .filter-group__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    width: 100%;
    background: transparent;
    border: 0;
    padding: var(--space-4) 0;
    cursor: pointer;
    color: var(--ink);
    text-align: left;
  }
  .filter-group__toggle:focus-visible {
    outline: 2px solid var(--olive);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }
  .filter-group__label {
    font-family: var(--font-display);
    font-size: var(--text-body-m);
    font-weight: var(--weight-display-semibold);
    color: var(--ink);
    flex: 1;
    line-height: 1.2;
  }
  .filter-group__counter {
    font-family: var(--font-mono);
    font-size: var(--text-eyebrow);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--ink-mute);
    font-weight: var(--weight-mono);
  }
  .filter-group__counter--has-active {
    color: var(--terra-deep);
  }
  .filter-group__chevron {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    color: var(--ink-mute);
    transition: transform var(--duration-default) var(--ease-default);
    flex-shrink: 0;
  }
  .filter-group.is-open .filter-group__chevron {
    transform: rotate(180deg);
  }

  /* Body : pills */
  .filter-group__body {
    display: none;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding-top: var(--space-2);
  }
  .filter-group.is-open .filter-group__body {
    display: flex;
  }

  /* Pill cliquable (étend .badge.is-interactive avec aria-pressed)
     Note Lot 3 Étape D : text-decoration none pour usage en <a> côté thème WP
     (navigation classique sur archive). Inerte sur <button>. */
  .filter-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-caption);
    font-weight: var(--weight-body-semibold);
    line-height: 1;
    padding: 7px 12px;
    background: var(--olive-mist);
    color: var(--olive-deep);
    border: 1.5px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: var(--transition-all);
    letter-spacing: 0.1px;
    text-decoration: none;
  }
  .filter-pill:hover,
  .filter-pill:focus {
    text-decoration: none;
  }
  .filter-pill:focus-visible {
    outline: 2px solid var(--olive);
    outline-offset: 3px;
  }
  .filter-pill__count {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    color: inherit;
    opacity: 0.7;
    font-weight: var(--weight-mono);
    letter-spacing: var(--tracking-mono);
  }
  .filter-pill:hover {
    background: var(--olive-pale);
  }
  .filter-pill[aria-pressed="true"] {
    background: var(--olive-deep);
    color: var(--linen);
  }
  .filter-pill[aria-pressed="true"]:hover {
    filter: brightness(1.05);
  }


  /* ====================================================
     25. PAGINATION CHARGER PLUS (Lot 3)
     Bouton unique "Charger plus" + compteur "X sur Y"
     centré au-dessus. État épuisé = bouton disabled.
     ==================================================== */
  .load-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-16) 0;
  }
  .load-more__count {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono);
    color: var(--ink-mute);
    font-weight: var(--weight-mono);
    margin: 0;
  }
  /* Modifier sur .btn.btn--ghost : padding plus généreux + icône à droite */
  .load-more__btn {
    padding-block: 14px;
    gap: var(--space-6);
  }
  .load-more__btn svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    flex-shrink: 0;
  }


  /* ====================================================
     26. EMPTY STATE (Lot 3 Étape C)
     Composant générique "0 résultat" pour archive plante,
     taxonomies, search. Eyebrow + titre + lede + CTA ghost.
     ==================================================== */
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-8);
    padding: var(--space-44) var(--space-12);
    max-width: 520px;
    margin-inline: auto;
  }
  .empty-state__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    font-family: var(--font-mono);
    font-size: var(--text-eyebrow);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--terra-deep);
    font-weight: var(--weight-mono);
    line-height: 1;
  }
  .empty-state__eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--terra);
    border-radius: var(--radius-circle);
  }
  .empty-state__title {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: var(--weight-display-semibold);
    color: var(--ink);
    line-height: var(--leading-h3);
    letter-spacing: var(--tracking-h3);
    margin: 0;
  }
  .empty-state__lede {
    font-family: var(--font-body);
    font-size: var(--text-body-l);
    color: var(--ink-soft);
    line-height: var(--leading-body-l);
    margin: 0;
    max-width: 460px;
  }
  .empty-state__action {
    margin-top: var(--space-6);
  }


  /* ====================================================
     21. BLOG RELATED LIST
     ==================================================== */
  .blog-related-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    padding: 0;
    margin: 0;
  }
  /* Direction 5 (2026-05-07) : desktop = pill row + title row + arrow droite.
     Reproduit la disposition mobile (clarté lecture). Grid 2 cols
     (contenu + 24px arrow), arrow span 2 rows aligné centre vertical. */
  .blog-related-list a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px;
    grid-template-rows: auto auto;
    grid-template-areas:
      "cat   arrow"
      "title arrow";
    gap: var(--space-4) var(--space-12);
    align-items: center;
    padding: 22px 24px;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--linen);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-all);
    min-width: 0;
  }
  .blog-related-list .blog-cat { grid-area: cat; justify-self: start; }
  .blog-related-list .blog-title { grid-area: title; }
  .blog-related-list .blog-arrow { grid-area: arrow; align-self: center; }
  .blog-related-list a:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
    text-decoration-color: transparent;
  }
  .blog-related-list a:hover .blog-arrow {
    color: var(--terra-deep);
    transform: translateX(4px);
  }
  .blog-cat {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--ink);
    background: var(--terra-soft);
    border: 1px solid var(--line-strong);
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    text-align: center;
    font-weight: var(--weight-mono);
  }
  .blog-cat svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    flex-shrink: 0;
  }
  .blog-cat--olive {
    background: var(--olive-mist);
  }
  .blog-title {
    font-family: var(--font-display);
    font-size: 19px;
    color: var(--ink);
    font-weight: var(--weight-display-semibold);
    line-height: 1.25;
    letter-spacing: -0.3px;
    min-width: 0;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  .blog-arrow {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--ink-mute);
    transition: var(--transition-all);
    font-weight: var(--weight-display-semibold);
    text-align: center;
  }


  /* ====================================================
     22. SITE FOOTER
     ==================================================== */
  .site-footer {
    background: var(--olive-deep);
    color: var(--linen);
    padding: var(--space-44) var(--space-16) var(--space-16);
    border-top: 1px solid var(--line);
    overflow: hidden;
  }
  .site-footer__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 56px;
    margin-bottom: 56px;
    min-width: 0;
  }
  .site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }
  .site-footer__logo {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: var(--weight-display-bold);
    color: var(--linen);
    margin: 0;
    letter-spacing: -1.4px;
    line-height: 1;
  }
  .site-footer__logo-dot {
    color: var(--terra);
  }
  .site-footer__tagline {
    font-size: 14.5px;
    color: color-mix(in srgb, var(--linen) 78%, transparent);
    line-height: 1.7;
    max-width: 340px;
    margin: 0;
  }
  .site-footer__tagline > p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
  }
  .site-footer__tagline > p + p {
    margin-top: var(--space-4);
  }
  .site-footer__col h5 {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin: 0 0 18px;
    color: var(--terra);
    font-weight: var(--weight-mono);
  }
  .site-footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .site-footer__col li {
    margin-bottom: 10px;
  }
  .site-footer__col a {
    color: color-mix(in srgb, var(--linen) 85%, transparent);
    text-decoration: none;
    font-size: 14px;
    transition: var(--transition-color);
    font-weight: var(--weight-body-regular);
  }
  .site-footer__col a:hover {
    color: var(--terra);
    text-decoration-color: transparent;
  }
  .site-footer__bottom {
    border-top: 1px dashed color-mix(in srgb, var(--linen) 18%, transparent);
    padding-top: 28px;
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-8);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: color-mix(in srgb, var(--linen) 55%, transparent);
  }


  /* ====================================================
     TOC SCROLL-SPY DEMO LAYOUT
     ==================================================== */
  .toc-demo {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: var(--space-16) 0 0;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--space-44);
    align-items: start;
  }
  .toc-demo__content {
    max-width: var(--max-w-text);
  }
  .toc-demo__section {
    margin-bottom: var(--space-44);
    scroll-margin-top: 100px;
  }
  .toc-demo__section p {
    margin-bottom: var(--space-12);
  }
  /* Direction 5 (2026-05-07) : note dev simplifiée.
     Fond transparent, pas de bordure, pas de radius. Le label
     "Note dev" reste mis en avant via strong olive-deep. */
  .toc-demo-note {
    background: transparent;
    padding: 0;
    margin-bottom: var(--space-16);
    font-size: var(--text-body-s);
    color: var(--ink-soft);
  }
  .toc-demo-note strong {
    color: var(--olive-deep);
    font-weight: var(--weight-body-bold);
  }


  /* ====================================================
     UTILS
     ==================================================== */
  .row { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; }
  .col { display: flex; flex-direction: column; gap: var(--space-8); }


  /* ====================================================
     RESPONSIVE
     ==================================================== */
  /* Quick Facts : stack vertical dès 1024 (pas de cas tablet bâtard avec orphan) */
  @media (max-width: 1024px) {
    .quick-facts__inner {
      grid-template-columns: 1fr;
      gap: 0;
      padding: var(--space-16) var(--space-16);
    }
    .fact {
      padding: var(--space-12) 0;
      border-right: none;
      border-bottom: 1px solid var(--line);
    }
    .fact:first-child { padding-top: 0; padding-left: 0; }
    .fact:last-child { padding-bottom: 0; padding-right: 0; border-bottom: none; border-right: none; }
  }

  @media (max-width: 960px) {
    .toc-demo {
      grid-template-columns: 1fr;
      gap: var(--space-24);
    }
    .toc {
      position: static;
      top: auto;
    }
    .plant-intro__inner {
      grid-template-columns: 1fr;
      gap: var(--space-16);
      padding: var(--space-24) var(--space-12);
    }
    .plant-intro__text { font-size: 22px; }

    /* Hero editorial : photo en haut, contenu en dessous */
    .plant-hero__inner { padding: var(--space-24) var(--space-16) var(--space-32); }
    .plant-hero__grid {
      grid-template-columns: 1fr;
      gap: var(--space-16);
    }
    .plant-hero__media { order: -1; }
    .plant-hero__photo { max-height: 320px; aspect-ratio: 16/10; }
  }

  @media (max-width: 768px) {
    .input--search { width: 100%; }
    /* Direction 3 fix (2026-05-07) : burger collé au bord droit.
       Cohérence avec règle 1023 (logo 1fr + burger auto). L'ancienne
       valeur auto/1fr datait d'avant l'ajout du burger D2 et plaçait
       le burger en cell 1fr aligné start (= collé au logo + gap). */
    .site-header__inner {
      padding: 14px var(--space-12);
      grid-template-columns: 1fr auto;
      gap: var(--space-8);
    }
    .breadcrumb { padding: var(--space-8) var(--space-12) 0; }
    .plant-hero__inner { padding: var(--space-16) var(--space-12) var(--space-24); }
    /* Direction 5 (2026-05-07) : quick-facts 2 colonnes mobile.
       5 facts → 2+2+1 (dernière fact occupe 1 col, pas de span).
       Pas de séparateur (cohérent avec grille 2D), gap suffit. */
    .quick-facts__inner {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-16) var(--space-12);
      padding: var(--space-16) var(--space-12);
    }
    .fact {
      padding: 0;
      border-right: none;
      border-bottom: none;
    }
    .fact:first-child { padding: 0; }
    .fact:last-child { padding: 0; border-right: none; border-bottom: none; }
    .fact__value {
      font-size: 18px;
      letter-spacing: -0.3px;
      overflow-wrap: break-word;
      word-break: break-word;
      hyphens: auto;
      -webkit-hyphens: auto;
      min-width: 0;
    }
    .fact__label { overflow-wrap: break-word; min-width: 0; }
    .botanical-table dl { grid-template-columns: 1fr; }
    /* Direction 4 (2026-05-07) : suppression effet sifflet mobile.
       dt et dd partagent le même bg parent (--linen-warm) en mobile.
       Séparateur uniquement entre paires (border-bottom sur dd). */
    .botanical-table dt {
      background: var(--linen-warm);
      padding: 14px 20px 4px;
      border-bottom: none;
    }
    .botanical-table dd {
      background: var(--linen-warm);
      padding: 0 20px 14px;
      border-bottom: 1px solid var(--line);
    }

    /* 1.1b responsive */
    .culinary-grid { grid-template-columns: 1fr; }
    .prep-block__header {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-4);
    }
    .prep-block__dosage { grid-template-columns: 1fr; }
    .precaution-block { padding: var(--space-16); }
    .precaution-block__title {
      font-size: 22px;
      letter-spacing: -0.4px;
      hyphens: auto;
      -webkit-hyphens: auto;
    }
    .blog-related-list { grid-template-columns: 1fr; }
    /* Direction 5 (2026-05-07) : layout desktop = mobile (cat + title + arrow).
       Conserve la même grille, ajuste juste le padding mobile. */
    .blog-related-list a {
      padding: var(--space-12) var(--space-12);
    }
    /* Footer mobile : 1 col stack, no overflow possible */
    .site-footer {
      padding: var(--space-24) var(--container-padding-mobile, 20px) var(--space-12);
    }
    .site-footer__inner {
      grid-template-columns: 1fr;
      gap: var(--space-16);
      margin-bottom: var(--space-16);
    }
    .site-footer__col { min-width: 0; }
    .site-footer__col a { overflow-wrap: break-word; }
    .site-footer__bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-4);
    }
  }

  @media (min-width: 769px) and (max-width: 960px) {
    .site-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--space-24); }
  }

  /* Small mobile <480px : précaution title plus petit, prep-block padding réduit */
  @media (max-width: 480px) {
    .precaution-block { padding: var(--space-12); }
    .precaution-block__title { font-size: 20px; letter-spacing: -0.3px; }
    .precaution-block__icon { width: 36px; height: 36px; }
    .precaution-block__icon svg { width: 20px; height: 20px; }
    .prep-block { padding: var(--space-12); }
    .prep-block__title { font-size: 22px; }
    .prep-block__dosage { padding: var(--space-8); gap: var(--space-4); }
    .culinary-card { padding: var(--space-12); }
    .culinary-card h4 {
      font-size: 20px;
      flex-wrap: wrap;
      letter-spacing: -0.3px;
      min-width: 0;
    }
    .culinary-card h4 svg { width: var(--icon-size-md); height: var(--icon-size-md); }
    /* Blog related <480 : flèche cachée, layout 1 col (cat puis title). */
    .blog-related-list a {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      grid-template-areas:
        "cat"
        "title";
      gap: var(--space-4);
      padding: var(--space-12);
    }
    .blog-related-list .blog-arrow { display: none; }
    .blog-title { font-size: var(--text-h6); }
    .sources-list li {
      padding: 16px 16px 16px 76px;
      overflow-wrap: break-word;
      hyphens: auto;
      -webkit-hyphens: auto;
    }
    .sources-list__icon { left: var(--space-8); top: var(--space-8); }
    .sources-list li::before { left: 42px; top: 16px; }
  }


  /* ====================================================
     27. HERO ACCUEIL TEXT-ONLY (Lot 4)
     Composition typographique soignée. Aucune image.
     Centré, max-width 880px, padding-block généreux.
     ==================================================== */
  .hero-accueil {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-12);
    max-width: 880px;
    margin-inline: auto;
    padding-block: var(--space-64) var(--space-48);
  }
  .hero-accueil__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    font-family: var(--font-mono);
    font-size: var(--text-eyebrow);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--terra-deep);
    font-weight: var(--weight-mono);
    line-height: 1;
  }
  .hero-accueil__eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--terra);
    border-radius: var(--radius-circle);
  }
  .hero-accueil__title {
    font-family: var(--font-display);
    font-size: var(--text-h1);
    font-weight: var(--weight-display-bold);
    color: var(--ink);
    line-height: var(--leading-h1);
    letter-spacing: var(--tracking-h1);
    margin: 0;
    text-wrap: balance;
  }
  .hero-accueil__title em {
    font-style: italic;
    color: var(--terra-deep);
    font-weight: var(--weight-display-bold);
  }
  .hero-accueil__lede {
    font-family: var(--font-body);
    font-size: var(--text-body-l);
    color: var(--ink-soft);
    line-height: var(--leading-body-l);
    margin: 0;
    max-width: 64ch;
  }
  .hero-accueil__cta {
    margin-top: var(--space-6);
  }
  @media (max-width: 768px) {
    .hero-accueil {
      padding-block: var(--space-44) var(--space-32);
      gap: var(--space-8);
    }
  }


  /* ====================================================
     28. CARD TAXO (Lot 4)
     Card cliquable d'exploration de taxonomie. Icône
     Phosphor Bold dans cercle olive-mist + label H5 +
     count caption mono. Grilles 3 cols (usage) ou 4 cols
     (type). Hover translateY(-4) + shadow-md.
     ==================================================== */
  .card-taxo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
    padding: var(--space-12);
    background: var(--linen-soft);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    color: var(--ink);
    transition: var(--transition-all);
    min-height: 140px;
  }
  .card-taxo:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--olive-pale);
    text-decoration-color: transparent;
  }
  .card-taxo:focus-visible {
    outline: 2px solid var(--olive);
    outline-offset: 3px;
    border-radius: var(--radius-2xl);
  }
  .card-taxo__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-circle);
    background: var(--olive-mist);
    color: var(--olive-deep);
    flex-shrink: 0;
  }
  .card-taxo__icon svg {
    width: var(--icon-size-2xl);
    height: var(--icon-size-2xl);
  }
  .card-taxo__label {
    font-family: var(--font-display);
    font-size: var(--text-h5);
    font-weight: var(--weight-display-semibold);
    color: var(--ink);
    line-height: var(--leading-h5);
    letter-spacing: 0;
    margin: 0;
  }
  .card-taxo__count {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono);
    color: var(--ink-mute);
    font-weight: var(--weight-mono);
    margin-top: auto;
  }

  /* Grilles card-taxo */
  .card-taxo-grid {
    display: grid;
    gap: var(--space-12);
    width: 100%;
  }
  .card-taxo-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .card-taxo-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
  @media (max-width: 1024px) {
    .card-taxo-grid--4 { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 768px) {
    .card-taxo-grid--3 { grid-template-columns: 1fr; }
  }
  @media (max-width: 480px) {
    .card-taxo-grid--4 { grid-template-columns: 1fr; }
  }


  /* ====================================================
     29. CARD ARTICLE BLOG (Lot 4)
     Card article du journal. Photo top 16/9 + body
     padding 20px + meta row (pill catégorie + dot +
     temps lecture) + titre H4 line-clamp 2 + extrait
     line-clamp 2 + date mono. Hover translateY(-4).
     Réutilisé Lot 5 (archive blog + taxonomy + search).
     ==================================================== */
  .card-article-blog {
    display: flex;
    flex-direction: column;
    background: var(--linen);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    transition: var(--transition-all);
  }
  .card-article-blog:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    text-decoration-color: transparent;
  }
  .card-article-blog:focus-visible {
    outline: 2px solid var(--olive);
    outline-offset: 3px;
    border-radius: var(--radius-xl);
  }
  .card-article-blog__photo {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: var(--linen-warm);
    filter: saturate(0.92) brightness(0.96);
  }
  .card-article-blog__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-12);
  }
  .card-article-blog__meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
  }
  .card-article-blog__sep {
    color: var(--ink-mute);
    font-family: var(--font-mono);
    line-height: 1;
  }
  .card-article-blog__readtime {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono);
    color: var(--ink-mute);
    font-weight: var(--weight-mono);
  }
  .card-article-blog__title {
    font-family: var(--font-display);
    font-size: var(--text-h4);
    font-weight: var(--weight-display-semibold);
    color: var(--ink);
    line-height: var(--leading-h4);
    letter-spacing: var(--tracking-h4);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .card-article-blog__excerpt {
    font-family: var(--font-body);
    font-size: var(--text-body-s);
    color: var(--ink-soft);
    line-height: var(--leading-body-s);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .card-article-blog__date {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono);
    color: var(--ink-mute);
    font-weight: var(--weight-mono);
    margin-top: var(--space-2);
  }

  /* Grille card-article-blog */
  .card-article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-12);
    width: 100%;
  }
  @media (max-width: 960px) {
    .card-article-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .card-article-grid { grid-template-columns: 1fr; }
    .card-article-blog__body { padding: var(--space-8); }
  }


  /* ====================================================
     30. HERO ARTICLE BLOG (Lot 5)
     Hero du single article : pill catégorie + titre H1
     + meta-row mono. Pas de photo, parti pris cohérent
     home text-only (Lot 4).
     ==================================================== */
  .hero-article {
    background: var(--linen);
  }
  .hero-article__inner {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-block: var(--space-44);
    padding-inline: var(--container-padding);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12);
  }
  .hero-article__title {
    font-family: var(--font-display);
    font-size: var(--text-h1);
    font-weight: var(--weight-display-bold);
    color: var(--ink);
    line-height: var(--leading-h1);
    letter-spacing: var(--tracking-h1);
    margin: 0;
    text-wrap: balance;
    max-width: 24ch;
  }
  .hero-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    color: var(--ink-mute);
    font-weight: var(--weight-mono);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    line-height: 1.4;
  }
  .hero-article__sep {
    color: var(--olive-pale);
    line-height: 1;
  }
  @media (max-width: 768px) {
    .hero-article__inner {
      padding-block: var(--space-32);
      padding-inline: var(--container-padding-mobile);
      gap: var(--space-8);
    }
    .hero-article__title {
      max-width: none;
    }
  }


  /* ====================================================
     32. GLOSSAIRE LIST (Lot 6)
     Liste alphabetique <dl> avec sections par lettre.
     Chaque paire dt/dd = terme + extrait court (1-2 lignes).
     Border-bottom 1px line entre paires pour scannabilite.
     ==================================================== */
  .glossaire-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
    margin: 0;
    padding: 0;
    width: 100%;
  }
  .glossaire-list__section {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    scroll-margin-top: calc(var(--header-height) + var(--space-16));
  }
  .glossaire-list__letter {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: var(--weight-display-bold);
    color: var(--terra-deep);
    line-height: var(--leading-h2);
    letter-spacing: var(--tracking-h2);
    margin: 0;
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--line-strong);
  }
  .glossaire-list__pair {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-block: var(--space-12);
    border-bottom: 1px solid var(--line);
  }
  .glossaire-list__pair:last-child {
    border-bottom: none;
  }
  .glossaire-list__term {
    font-family: var(--font-display);
    font-size: var(--text-h5);
    font-weight: var(--weight-display-semibold);
    line-height: var(--leading-h5);
    color: var(--ink);
    margin: 0;
  }
  .glossaire-list__term a {
    color: var(--ink);
    text-decoration: none;
    transition: var(--transition-color);
  }
  .glossaire-list__term a:hover {
    color: var(--terra-deep);
  }
  .glossaire-list__excerpt {
    font-family: var(--font-body);
    font-size: var(--text-body-s);
    line-height: var(--leading-body-l);
    color: var(--ink-soft);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  @media (max-width: 768px) {
    .glossaire-list {
      gap: var(--space-24);
    }
    .glossaire-list__pair {
      padding-block: var(--space-8);
    }
  }


  /* ====================================================
     33. GLOSSAIRE ANCHORS A-Z (Lot 6)
     Barre de navigation alphabetique 26 lettres.
     Lettres avec termes : encre + hover terra-deep.
     Lettres sans termes : opacity 0.3 + pointer-events none.
     Police mono coherence wiki/dictionnaire.
     ==================================================== */
  .glossaire-anchors-az {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-12);
    background: var(--linen-warm);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
  }
  .glossaire-anchors-az__link {
    font-family: var(--font-mono);
    font-size: var(--text-body-s);
    font-weight: var(--weight-mono);
    letter-spacing: var(--tracking-mono);
    color: var(--ink);
    text-decoration: none;
    text-transform: uppercase;
    min-width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--space-2);
    border-radius: var(--radius-sm);
    transition: var(--transition-color), var(--transition-bg);
  }
  .glossaire-anchors-az__link:hover {
    color: var(--terra-deep);
    background: var(--linen-soft);
  }
  .glossaire-anchors-az__link.is-disabled,
  .glossaire-anchors-az__link[aria-disabled="true"] {
    color: var(--ink-mute);
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
  }
  @media (max-width: 480px) {
    .glossaire-anchors-az {
      padding: var(--space-6) var(--space-8);
      gap: var(--space-2);
    }
    .glossaire-anchors-az__link {
      min-width: 24px;
      height: 24px;
      font-size: var(--text-caption);
    }
  }