/*
 * Catalogue public (story 1.3) — composants `vk-*`.
 *
 * UX-DR1 : UNIQUEMENT des variables --vk-* de tokens.css (aucune valeur
 * de couleur/rayon/espacement en dur ici). Zéro JS, zéro webfont : les
 * interactions portées par le HTML (focus, :checked, <details>, sticky)
 * sont stylées en CSS pur.
 *
 * UX-DR19 : focus visible sur tous les interactifs, cibles ≥ 44 px.
 * UX-DR21 : grille 1 col < 640 / 2 col 640-1023 / 3 col ≥ 1024, filtres en
 * panneau repliable mobile / colonne latérale desktop.
 * UX-DR3 : chiffres tabulaires (--vk-numeric) pour les prix.
 */

/* ================= Base ================= */

.vk-page {
    margin: 0;
    background: var(--vk-surface-base);
    color: var(--vk-ink-primary);
    font: var(--vk-text-body);
    -webkit-text-size-adjust: 100%;
}

.vk-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.vk-numeric {
    font-variant-numeric: var(--vk-numeric);
}

/* Focus visible sur tous les interactifs (UX-DR19). */
.vk-page :is(a, button, input, select, summary):focus-visible {
    outline: 2px solid var(--vk-accent);
    outline-offset: 2px;
    border-radius: var(--vk-radius-sm);
}

/* ================= Conteneur ================= */

.vk-header__inner,
.vk-main,
.vk-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: var(--vk-margin-mobile);
    padding-right: var(--vk-margin-mobile);
}

@media (min-width: 1024px) {
    .vk-header__inner,
    .vk-main,
    .vk-footer__inner {
        padding-left: var(--vk-margin-desktop);
        padding-right: var(--vk-margin-desktop);
    }
}

/* ================= Header ================= */

.vk-header {
    border-bottom: 1px solid var(--vk-border-hairline);
    background: var(--vk-surface-base);
}

.vk-header__inner {
    display: flex;
    align-items: center;
    gap: var(--vk-space-5);
    flex-wrap: wrap;
    padding-top: var(--vk-space-4);
    padding-bottom: var(--vk-space-4);
}

.vk-wordmark__name {
    display: block;
    font-family: var(--vk-font-serif);
    font-size: 21px;
    letter-spacing: 0.22em;
    color: var(--vk-ink-primary);
}

.vk-wordmark__kicker {
    display: block;
    font: var(--vk-text-label-caps);
    letter-spacing: var(--vk-text-label-caps-tracking);
    color: var(--vk-ink-secondary);
    margin-top: var(--vk-space-1);
}

.vk-universes-nav {
    display: flex;
    align-items: center;
    gap: var(--vk-space-2);
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.vk-universes-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px; /* UX-DR19 */
    padding: var(--vk-space-2) var(--vk-space-4);
    border-radius: var(--vk-radius-full);
    border: 1px solid transparent;
    color: var(--vk-ink-secondary);
    text-decoration: none;
    font: var(--vk-text-body-sm);
    transition: color 0.25s ease, border-color 0.25s ease;
}

.vk-universes-nav__link:hover {
    color: var(--vk-accent);
    border-color: var(--vk-border-hairline);
}

.vk-universes-nav__link.vk-is-active {
    color: var(--vk-chip-active-fg);
    background: var(--vk-chip-active-bg);
    border-color: var(--vk-chip-active-border);
    font-weight: 600;
}

.vk-header__extra {
    display: flex;
    align-items: center;
    gap: var(--vk-space-4);
}

.vk-header__extra-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--vk-ink-secondary);
    text-decoration: none;
    border-bottom: 1px solid var(--vk-border-hairline);
}

.vk-lang {
    display: flex;
    align-items: center;
    gap: var(--vk-space-2);
}

.vk-lang__link,
.vk-lang__current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px; /* UX-DR19 */
    min-height: 44px;
    border-radius: var(--vk-radius-full);
    font: var(--vk-text-meta);
    letter-spacing: 0.06em;
    text-decoration: none;
}

.vk-lang__link {
    color: var(--vk-ink-secondary);
    border: 1px solid var(--vk-border-hairline);
    transition: color 0.25s ease, border-color 0.25s ease;
}

.vk-lang__link:hover {
    color: var(--vk-accent);
    border-color: var(--vk-accent);
}

.vk-lang__current {
    color: var(--vk-success);
    font-weight: 700;
}

/* ================= Héros ================= */

.vk-hero {
    text-align: center;
    padding: var(--vk-space-12) var(--vk-space-5) var(--vk-space-5);
}

.vk-hero__kicker {
    font: var(--vk-text-label-caps);
    letter-spacing: var(--vk-text-label-caps-tracking);
    color: var(--vk-success);
    margin: 0 0 var(--vk-space-4);
}

.vk-hero__title {
    /* --vk-text-display-lg porte déjà le 40px de base (aucun override). */
    font: var(--vk-text-display-lg);
    margin: 0 0 var(--vk-space-3);
}

/* Échelle display mobile-only : 44px au-delà de 1024 — exception de
   hiérarchie assumée, hors échelle de tokens (comme la cible 44px). */
@media (min-width: 1024px) {
    .vk-hero__title {
        font-size: 44px;
    }
}

.vk-hero__sub {
    font: var(--vk-text-body-lg);
    color: var(--vk-ink-secondary);
    max-width: 620px;
    margin: 0 auto;
}

/* ================= Recherche reine (UX-DR12) ================= */

.vk-searchbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--vk-surface-base);
    box-shadow: var(--vk-shadow-persistent);
    padding: var(--vk-space-3) 0;
}

.vk-search {
    display: flex;
    align-items: center;
    gap: var(--vk-space-2);
    max-width: 760px;
    margin: 0 auto;
    background: var(--vk-surface-raised);
    border: 1px solid var(--vk-border-hairline);
    border-radius: var(--vk-radius-full);
    padding: var(--vk-space-2) var(--vk-space-2) var(--vk-space-2) var(--vk-space-6);
}

.vk-search input,
.vk-search button {
    font-family: var(--vk-font-sans);
}

.vk-search__lens {
    position: relative;
    width: 14px;
    height: 14px;
    border: 2px solid var(--vk-ink-secondary);
    border-radius: 50%;
    flex: none;
}

.vk-search__lens::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 2px;
    background: var(--vk-ink-secondary);
    border-radius: 2px;
    transform: rotate(45deg);
    left: 10px;
    top: 11px;
}

.vk-search__input {
    flex: 1;
    min-height: 44px; /* UX-DR19 — plus grand champ de la page */
    border: none;
    outline: none;
    background: transparent;
    font: var(--vk-text-body-lg);
    color: var(--vk-ink-primary);
}

.vk-search__input::placeholder {
    color: var(--vk-ink-disabled);
}

.vk-search__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px; /* UX-DR19 */
    border: none;
    cursor: pointer;
    background: var(--vk-accent);
    color: var(--vk-on-accent);
    border-radius: var(--vk-radius-full);
    padding: var(--vk-space-3) var(--vk-space-6);
    font-size: 14.5px;
    font-weight: 600;
    font-family: var(--vk-font-sans);
    transition: background 0.25s ease;
}

.vk-search__submit:hover {
    background: var(--vk-accent-hover);
}

/* ================= Panneau filtres (UX-DR11 / UX-DR21) ================= */

/* Colonne latérale desktop / empilement mobile. */
.vk-catalog-layout {
    display: block;
    padding-top: var(--vk-space-5);
}

@media (min-width: 1024px) {
    .vk-catalog-layout {
        display: grid;
        grid-template-columns: 320px minmax(0, 1fr);
        gap: var(--vk-gutter);
        align-items: start;
    }
}

.vk-filters-form {
    margin: 0;
}

.vk-filters {
    background: var(--vk-surface-raised);
    border: 1px solid var(--vk-border-hairline);
    border-radius: var(--vk-radius-lg);
}

.vk-filters__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px; /* UX-DR19 */
    padding: var(--vk-space-3) var(--vk-space-5);
    cursor: pointer;
    font-weight: 600;
    color: var(--vk-ink-primary);
    border-radius: var(--vk-radius-lg);
    list-style: none;
}

.vk-filters__toggle::-webkit-details-marker {
    display: none;
}

.vk-filters__toggle::after {
    content: "▾";
    color: var(--vk-ink-disabled);
}

.vk-filters[open] .vk-filters__toggle::after {
    content: "▴";
}

.vk-filters__panel {
    display: grid;
    gap: var(--vk-space-5);
    padding: 0 var(--vk-space-5) var(--vk-space-5);
    border-top: 1px solid var(--vk-border-hairline);
    padding-top: var(--vk-space-5);
}

.vk-filters__group {
    border: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--vk-space-3);
}

.vk-filters__legend {
    font: var(--vk-text-label-caps);
    letter-spacing: 0.1em;
    color: var(--vk-ink-secondary);
    padding: 0;
}

.vk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vk-space-2);
}

.vk-chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px; /* UX-DR19 */
    padding: var(--vk-space-2) var(--vk-space-4);
    border: 1px solid var(--vk-border-hairline);
    border-radius: var(--vk-radius-full);
    cursor: pointer;
    color: var(--vk-ink-primary);
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.vk-chip:hover {
    border-color: var(--vk-accent);
}

.vk-chip__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

/* Actif : tokens chip actifs (UX-DR11). L'état survit au rechargement
   (attribut checked rendu côté serveur) ET bascule au clic (CSS pur). */
.vk-chip:has(.vk-chip__input:checked),
.vk-chip.vk-is-active {
    background: var(--vk-chip-active-bg);
    border-color: var(--vk-chip-active-border);
    color: var(--vk-chip-active-fg);
    font-weight: 600;
}

.vk-price {
    display: flex;
    gap: var(--vk-space-4);
    flex-wrap: wrap;
}

.vk-price__field {
    display: grid;
    gap: var(--vk-space-1);
}

.vk-price__label {
    font: var(--vk-text-meta);
    color: var(--vk-ink-secondary);
}

.vk-price__input {
    min-height: 44px; /* UX-DR19 */
    min-width: 120px;
    background: var(--vk-surface-raised);
    border: 1px solid var(--vk-border-hairline);
    border-radius: var(--vk-radius-md);
    padding: var(--vk-space-2) var(--vk-space-3);
    font: var(--vk-text-body);
    color: var(--vk-ink-primary);
}

/* ================= Chip dispo + dates inline (UX-DR11) ================= */

.vk-dates {
    border: 1px solid var(--vk-border-hairline);
    border-radius: var(--vk-radius-md);
    background: var(--vk-surface-raised);
}

.vk-dates__chip {
    display: flex;
    align-items: center;
    min-height: 44px; /* UX-DR19 */
    padding: var(--vk-space-2) var(--vk-space-4);
    cursor: pointer;
    border-radius: var(--vk-radius-full);
    font: var(--vk-text-body-sm);
    color: var(--vk-ink-primary);
    list-style: none;
}

.vk-dates__chip::-webkit-details-marker {
    display: none;
}

.vk-dates__chip::after {
    content: "▾";
    color: var(--vk-ink-disabled);
    margin-left: var(--vk-space-2);
}

.vk-dates[open] .vk-dates__chip::after {
    content: "▴";
}

/* Actif quand des dates sont saisies (classe rendue côté serveur). */
.vk-dates.vk-is-active > .vk-dates__chip {
    background: var(--vk-chip-active-bg);
    color: var(--vk-chip-active-fg);
    border-color: var(--vk-chip-active-border);
    font-weight: 600;
}

.vk-dates__panel {
    display: flex;
    gap: var(--vk-space-4);
    flex-wrap: wrap;
    align-items: end;
    padding: var(--vk-space-4);
    border-top: 1px solid var(--vk-border-hairline);
}

.vk-dates__field {
    display: grid;
    gap: var(--vk-space-1);
}

.vk-dates__label {
    font: var(--vk-text-meta);
    color: var(--vk-ink-secondary);
}

.vk-dates__input {
    min-height: 44px; /* UX-DR19 */
    background: var(--vk-surface-raised);
    border: 1px solid var(--vk-border-hairline);
    border-radius: var(--vk-radius-md);
    padding: var(--vk-space-2) var(--vk-space-3);
    font: var(--vk-text-body);
    color: var(--vk-ink-primary);
}

.vk-dates__note {
    flex-basis: 100%;
    margin: 0;
    font: var(--vk-text-meta);
    color: var(--vk-ink-disabled);
}

.vk-filters__actions {
    display: flex;
    align-items: center;
    gap: var(--vk-space-4);
}

.vk-filters__apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px; /* UX-DR19 */
    border: none;
    cursor: pointer;
    background: var(--vk-accent);
    color: var(--vk-on-accent);
    border-radius: var(--vk-radius-full);
    padding: var(--vk-space-3) var(--vk-space-6);
    font-size: 14.5px;
    font-weight: 600;
    font-family: var(--vk-font-sans);
    transition: background 0.25s ease;
}

.vk-filters__apply:hover {
    background: var(--vk-accent-hover);
}

/* Chemin alternatif toujours visible (UX-DR7) : reset 1 clic. */
.vk-filters__reset,
.vk-state__action {
    display: inline-flex;
    align-items: center;
    min-height: 44px; /* UX-DR19 */
    padding: var(--vk-space-2) var(--vk-space-5);
    border: 1.5px solid var(--vk-accent);
    border-radius: var(--vk-radius-full);
    color: var(--vk-accent);
    text-decoration: none;
    font-weight: 600;
    background: transparent;
}

/* ================= Résultats et grille (UX-DR21) ================= */

.vk-results {
    padding: var(--vk-space-8) 0 var(--vk-space-12);
}

.vk-results__count {
    text-align: center;
    font: var(--vk-text-meta);
    letter-spacing: var(--vk-text-meta-tracking);
    color: var(--vk-ink-disabled);
    margin: 0 0 var(--vk-space-6);
}

.vk-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr; /* 1 col < 640 */
    gap: var(--vk-gutter);
}

@media (min-width: 640px) {
    .vk-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 col 640-1023 */
    }
}

@media (min-width: 1024px) {
    .vk-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 col ≥ 1024 */
    }

    /* Filtres en colonne latérale desktop (UX-DR21) : le panneau se pose
       à gauche de la grille au-delà de 1024 px. */
    .vk-catalog-layout {
        display: grid;
        grid-template-columns: 320px 1fr;
        gap: var(--vk-gutter);
        align-items: start;
    }
}

/* ================= Carte Référence (UX-DR8) ================= */

.vk-grid__item {
    margin: 0;
}

.vk-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--vk-surface-raised);
    border: 1px solid var(--vk-border-hairline);
    border-radius: var(--vk-radius-lg);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hover : envol (UX-DR4) — reste accessible clavier via focus-within
   (story 1.4 branchera le lien). */
.vk-card:hover,
.vk-card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--vk-shadow-card-hover);
}

.vk-card__visual {
    aspect-ratio: 4 / 3;
    background: var(--vk-surface-base);
    border-bottom: 1px solid var(--vk-border-hairline);
}

.vk-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--vk-radius-lg) var(--vk-radius-lg) 0 0;
}

.vk-card__body {
    padding: var(--vk-space-5) var(--vk-space-5) var(--vk-space-6);
    display: grid;
    gap: var(--vk-space-1);
}

.vk-card__univers {
    margin: 0;
    font: var(--vk-text-meta);
    letter-spacing: var(--vk-text-meta-tracking);
    color: var(--vk-ink-disabled);
    text-transform: uppercase;
}

.vk-card__title {
    margin: 0;
    font: var(--vk-text-display-sm);
}

.vk-card__price {
    margin: var(--vk-space-2) 0 0;
    font: var(--vk-text-body-sm);
    color: var(--vk-ink-secondary);
}

.vk-card__body .vk-badge {
    margin-top: var(--vk-space-2);
}

/* ================= Badge disponibilité (story 1.5, FR-3) =================
   Pilule trilingue « :n dispo » (chiffre réel) / « Dernier disponible » /
   « Sur demande · 48 h » — fond/encré des tokens badge (existants depuis
   1.1), rayon full (pilule, mockup 999px), méta 12,5 px en 600, lettres
   espacées. L'état est porté par le TEXTE du badge (jamais la couleur
   seule) ; chiffres tabulaires (UX-DR3). catalog.css est chargé sur les
   deux surfaces (carte ET fiche). */

.vk-badge {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: var(--vk-space-1) var(--vk-space-3);
    border-radius: var(--vk-radius-full);
    font: var(--vk-text-meta);
    font-weight: 600;
    letter-spacing: var(--vk-text-meta-tracking);
    font-variant-numeric: var(--vk-numeric);
    /* Mode Sur demande : le badge est un <a> vers #demande (story 2.7) —
       pas de soulignement hérité du navigateur (la pilule reste une pilule). */
    text-decoration: none;
}

.vk-badge--available {
    background: var(--vk-badge-availability-bg);
    color: var(--vk-badge-availability-fg);
}

.vk-badge--on-request {
    background: var(--vk-badge-on-request-bg);
    color: var(--vk-badge-on-request-fg);
}

/* ================= États UX-DR22 ================= */

.vk-state {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
    background: var(--vk-surface-raised);
    border: 1px solid var(--vk-border-hairline);
    border-radius: var(--vk-radius-lg);
    padding: var(--vk-space-8) var(--vk-space-6);
    display: grid;
    gap: var(--vk-space-3);
    justify-items: center;
}

.vk-state__title {
    margin: 0;
    font: var(--vk-text-display-sm);
}

.vk-state__body {
    margin: 0;
    font: var(--vk-text-body);
    color: var(--vk-ink-secondary);
}

.vk-state__hint {
    margin: var(--vk-space-3) 0 0;
    font: var(--vk-text-meta);
    color: var(--vk-ink-disabled);
}

.vk-state__suggestions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--vk-space-2);
    justify-content: center;
}

.vk-state__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px; /* UX-DR19 */
    padding: var(--vk-space-2) var(--vk-space-4);
    border: 1px solid var(--vk-border-hairline);
    border-radius: var(--vk-radius-full);
    color: var(--vk-ink-primary);
    text-decoration: none;
    transition: border-color 0.25s ease, color 0.25s ease;
}

.vk-state__link:hover {
    border-color: var(--vk-accent);
    color: var(--vk-accent);
}

.vk-state__active-filters {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--vk-space-2);
    justify-content: center;
}

.vk-state__active-filter {
    background: var(--vk-chip-active-bg);
    color: var(--vk-chip-active-fg);
    border: 1px solid var(--vk-chip-active-border);
    border-radius: var(--vk-radius-full);
    padding: var(--vk-space-1) var(--vk-space-3);
    font: var(--vk-text-meta);
}

/* ================= Pager « Charger plus » ================= */

.vk-pager {
    display: flex;
    justify-content: center;
    margin-top: var(--vk-space-8);
}

.vk-pager__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px; /* UX-DR19 */
    padding: var(--vk-space-3) var(--vk-space-6);
    border: 1.5px solid var(--vk-accent);
    border-radius: var(--vk-radius-full);
    color: var(--vk-accent);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease;
}

.vk-pager__more:hover {
    background: var(--vk-accent);
    color: var(--vk-on-accent);
}

/* ================= CTA configurateur (story 2.3) =================
   Lien d'entrée vers le configurateur pick & mix, porté par la fiche et la
   page Univers. Charge catalog.css (commun aux deux surfaces) : une seule
   règle suffit, le style reprend l'action primaire (UX-DR6). */

.vk-config-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px; /* UX-DR19 */
    margin-top: var(--vk-space-4);
    padding: var(--vk-space-3) var(--vk-space-6);
    background: var(--vk-accent);
    color: var(--vk-on-accent);
    border-radius: var(--vk-radius-full);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.25s ease;
}

.vk-config-cta:hover {
    background: var(--vk-accent-hover);
}

/* ================= Pied ================= */

.vk-footer {
    border-top: 1px solid var(--vk-border-hairline);
    margin-top: var(--vk-space-8);
}

.vk-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vk-space-4);
    justify-content: space-between;
    padding-top: var(--vk-space-5);
    padding-bottom: var(--vk-space-6);
}

.vk-footer__place,
.vk-footer__promise {
    margin: 0;
    font: var(--vk-text-meta);
    color: var(--vk-ink-disabled);
}

.vk-footer__place {
    font-weight: 600;
    color: var(--vk-ink-secondary);
}

/* ================= Préférences utilisateur ================= */

@media (prefers-reduced-motion: reduce) {
    .vk-card,
    .vk-card:hover,
    .vk-card:focus-within {
        transform: none;
        transition: none;
    }
}

/* ================= Demande (story 2.7, FR-4) ================= */

.vk-demande {
    border-top: 1px solid var(--vk-border-hairline);
    margin-top: var(--vk-space-6);
    padding-top: var(--vk-space-6);
    scroll-margin-top: var(--vk-space-8);
}

.vk-demande__lead {
    margin: var(--vk-space-2) 0 var(--vk-space-4);
    font: var(--vk-text-body);
    color: var(--vk-ink-secondary);
}

.vk-demande__ack {
    background: var(--vk-badge-availability-bg);
    border: 1px solid var(--vk-border-hairline);
    border-radius: var(--vk-radius-md);
    padding: var(--vk-space-4);
    margin-bottom: var(--vk-space-4);
}

.vk-demande__ack-title {
    margin: 0;
    font: var(--vk-text-body);
    font-weight: 600;
    color: var(--vk-badge-availability-fg);
}

.vk-demande__ack-promise {
    margin: var(--vk-space-1) 0 0;
    font: var(--vk-text-body-sm);
    color: var(--vk-ink-secondary);
}

.vk-demande__form {
    display: flex;
    flex-direction: column;
    gap: var(--vk-space-4);
}

.vk-demande__field {
    display: flex;
    flex-direction: column;
    gap: var(--vk-space-2);
}

.vk-demande__label {
    font: var(--vk-text-label-caps);
    letter-spacing: var(--vk-text-label-caps-tracking);
    text-transform: uppercase;
    color: var(--vk-ink-secondary);
}

.vk-demande__input {
    min-height: 44px;
    padding: var(--vk-space-3);
    border: 1px solid var(--vk-border-hairline);
    border-radius: var(--vk-radius-md);
    background: var(--vk-surface-raised);
    color: var(--vk-ink-primary);
    font: var(--vk-text-body);
}

.vk-demande__input:focus-visible {
    outline: 2px solid var(--vk-accent);
    outline-offset: 2px;
}

textarea.vk-demande__input {
    min-height: 96px;
    resize: vertical;
}

.vk-demande__field-error,
.vk-demande__form-error {
    margin: 0;
    font: var(--vk-text-body-sm);
    color: var(--vk-danger);
}

.vk-demande__submit {
    min-height: 44px;
    padding: var(--vk-space-3) var(--vk-space-6);
    border: none;
    border-radius: var(--vk-radius-full);
    background: var(--vk-accent);
    color: var(--vk-on-accent);
    font: var(--vk-text-body);
    font-weight: 600;
    cursor: pointer;
}

.vk-demande__submit:hover {
    background: var(--vk-accent-hover);
}

.vk-demande__submit:focus-visible {
    outline: 2px solid var(--vk-ink-primary);
    outline-offset: 2px;
}

/* ----- Liste « Mes demandes » (compte) ----- */

.vk-account__promise {
    margin: 0 0 var(--vk-space-6);
    font: var(--vk-text-body-sm);
    color: var(--vk-ink-secondary);
}

.vk-demande-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--vk-space-4);
}

.vk-demande-list__item {
    background: var(--vk-surface-raised);
    border: 1px solid var(--vk-border-hairline);
    border-radius: var(--vk-radius-lg);
    padding: var(--vk-space-5);
}

.vk-demande-list__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--vk-space-2);
}

.vk-demande-list__ref {
    font: var(--vk-text-display-sm);
    color: var(--vk-ink-primary);
    text-decoration: none;
}

.vk-demande-list__ref:hover {
    text-decoration: underline;
}

.vk-demande-list__status {
    display: inline-block;
    padding: var(--vk-space-1) var(--vk-space-3);
    border-radius: var(--vk-radius-full);
    background: var(--vk-badge-on-request-bg);
    color: var(--vk-badge-on-request-fg);
    font: var(--vk-text-label-caps);
    letter-spacing: var(--vk-text-label-caps-tracking);
    text-transform: uppercase;
}

.vk-demande-list__meta {
    margin: var(--vk-space-3) 0 0;
}

.vk-demande-list__row {
    display: flex;
    gap: var(--vk-space-3);
    margin: 0;
}

.vk-demande-list__row dt {
    min-width: 8rem;
    font: var(--vk-text-body-sm);
    color: var(--vk-ink-secondary);
}

.vk-demande-list__row dd {
    margin: 0;
    font: var(--vk-text-body);
}

.vk-demande-list__convert {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: var(--vk-space-4);
    padding: 0 var(--vk-space-5);
    border: 1.5px solid var(--vk-accent);
    border-radius: var(--vk-radius-full);
    color: var(--vk-accent);
    font: var(--vk-text-body);
    font-weight: 600;
    text-decoration: none;
}

.vk-demande-list__convert:hover {
    background: var(--vk-accent);
    color: var(--vk-on-accent);
}

/* ================= Stepper « Statut commande » (story 3.5, UX-DR15) =================
 *
 * 4 étapes `validee → livraison_en_cours → livree → terminee` (+ item
 * terminal `annulee`). L'état est TOUJOURS porté par la forme (✓ / ● / ○,
 * `aria-hidden`) + le libellé + l'état masqué — la couleur n'est jamais
 * seule (UX-DR15, DESIGN.md « Statut commande »). Pas d'action : les
 * cibles ≥ 44 px ne s'appliquent pas (EXPERIENCE — cibles des contrôles).
 *
 * Tokens uniquement (UX-DR1) : fait = --vk-success, courant = --vk-accent
 * + anneau (outline), à venir = --vk-border-hairline, annulée =
 * --vk-danger.
 */

.vk-commande-stepper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vk-space-2) var(--vk-space-5);
    margin: var(--vk-space-3) 0 var(--vk-space-5);
    padding: 0;
    list-style: none;
}

.vk-commande-stepper__step {
    display: inline-flex;
    align-items: center;
    gap: var(--vk-space-2);
    font: var(--vk-text-meta);
    letter-spacing: var(--vk-text-meta-tracking);
    color: var(--vk-ink-secondary);
}

.vk-commande-stepper__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
    border: 1.5px solid var(--vk-border-hairline);
    border-radius: var(--vk-radius-full);
    font-size: 0.85em;
    line-height: 1;
}

/* Fait — le vert olive + coche pleine. */
.vk-commande-stepper__step[data-step-state="done"] {
    color: var(--vk-success);
}

.vk-commande-stepper__step[data-step-state="done"] .vk-commande-stepper__marker {
    border-color: var(--vk-success);
    background: var(--vk-success);
    color: var(--vk-on-accent);
}

/* Courant — la terracotta + anneau (jamais la couleur seule : le libellé
   d'état masqué et le marqueur ● portent aussi l'information). */
.vk-commande-stepper__step[data-step-state="current"] {
    color: var(--vk-accent);
    font-weight: 600;
}

.vk-commande-stepper__step[data-step-state="current"] .vk-commande-stepper__marker {
    border-color: var(--vk-accent);
    color: var(--vk-accent);
    outline: 2px solid var(--vk-accent);
    outline-offset: 2px;
}

/* Annulée — item terminal en brique (jamais un stepper « en marche »). */
.vk-commande-stepper__step[data-step="annulee"] {
    color: var(--vk-danger);
    font-weight: 600;
}

.vk-commande-stepper__step[data-step="annulee"] .vk-commande-stepper__marker {
    border-color: var(--vk-danger);
    color: var(--vk-danger);
    outline: 2px solid var(--vk-danger);
    outline-offset: 2px;
}

/* À venir — filet craie, encre secondaire (déjà posée par défaut). */
.vk-commande-stepper__step[data-step-state="upcoming"] {
    color: var(--vk-ink-secondary);
}

/* Mobile : une étape par ligne (colonne), lisible d'un coup d'œil. */
@media (max-width: 639px) {
    .vk-commande-stepper {
        flex-direction: column;
        gap: var(--vk-space-2);
    }
}