/* ══════════════════════════════════════════════════════════════════════════
   Design system public minimal — lot F, item F2 (2026-08-31)
   ══════════════════════════════════════════════════════════════════════════
   Chargé AVANT style_{{templateName}}.css (voir templates/base.html.twig) : ce
   fichier pose des TOKENS (custom properties) et des règles de base sur des
   sélecteurs génériques (.btn-*, table, input/label, badges) — le thème actif
   (couleurs par tenant, ex. style_sun.css) charge APRÈS et garde la main sur
   toute valeur qu'il redéfinit explicitement (dernier gagne à spécificité
   égale). Volontairement PAS une refonte : la base Bootstrap existante sur la
   grille/l'espacement est déjà saine (audit design 2026-08-30 section 6), donc
   l'essentiel de ce fichier FORMALISE des valeurs déjà utilisées de fait dans
   les templates (font-32/font-24/font-16, table-striped, badge-dispo...)
   plutôt que d'en inventer de nouvelles. Appliqué par construction (sélecteurs
   génériques déjà posés dans les templates, pas de nouvelle classe à ajouter)
   aux pages : accueil, liste catalogue, fiche produit, panier, checkout,
   login. Voir docs/socle/ux/lot-f/F2-DESIGN-SYSTEM.md pour les mesures de
   contraste et la méthode.

   ── Typographie (échelle à 4 niveaux + caption, formalise l'existant) ──
   H1 32px (.font-32, déjà utilisé) / H2 24px (.font-24) / corps 16px (défaut
   body) / caption 13px (.font-13) — jamais en dessous de 13px (audit design,
   section "Axes pour le public").

   ── Espacement (échelle 4/8/12/16/24/32/48/64px) ──
   Déjà globalement cohérent avec les marges Bootstrap par défaut (.px-xl-5,
   .mb-2...) : ces tokens documentent la référence pour tout nouveau
   composant, ils ne remplacent pas les classes Bootstrap existantes.

   ── Couleur ──
   --theme-color / --theme-active-color / --color-on-accent etc. sont déjà
   injectés par tenant (templates/base.html.twig, <style> inline) AVANT ce
   fichier n'a besoin d'exister : on les RÉUTILISE ici (jamais de couleur en
   dur), avec des valeurs de repli identiques à celles du thème par défaut
   pour qu'aucune page ne casse si ce fichier est chargé seul (ex. contexte de
   test). */

:root {
    /* Typographie */
    --ds-font-size-h1: 2rem;      /* 32px, cf. .font-32 */
    --ds-font-size-h2: 1.5rem;    /* 24px, cf. .font-24 */
    --ds-font-size-body: 1rem;    /* 16px */
    --ds-font-size-caption: 0.8125rem; /* 13px, jamais en dessous */

    /* Espacement (échelle 4/8/12/16/24/32/48/64) */
    --ds-space-1: 0.25rem;  /* 4px */
    --ds-space-2: 0.5rem;   /* 8px */
    --ds-space-3: 0.75rem;  /* 12px */
    --ds-space-4: 1rem;     /* 16px */
    --ds-space-5: 1.5rem;   /* 24px */
    --ds-space-6: 2rem;     /* 32px */
    --ds-space-7: 3rem;     /* 48px */
    --ds-space-8: 4rem;     /* 64px */

    /* Rayons et ombres (formalise les valeurs déjà utilisées : cartes produit
       12px/0 4px 18px, badges 20px, etc.) */
    --ds-radius-sm: 0.25rem;   /* 4px, champs de formulaire */
    --ds-radius-md: 0.5rem;    /* 8px, images/vignettes */
    --ds-radius-lg: 0.75rem;   /* 12px, cartes */
    --ds-radius-pill: 20px;    /* badges/pastilles */
    --ds-shadow-card: 0 4px 18px rgba(0, 0, 0, 0.13);
    --ds-shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.20);

    /* Focus : un seul token, réutilisé par tous les composants interactifs
       (jamais égal à la couleur de fond de l'élément qui le porte — voir
       AUDIT-DESIGN-2026-08-30.md, correctif "composant focus/état"). Défini
       une seule fois ici ; --focus-ring-color (posé par style_sun.css) reste
       la source de vérité si les deux sont chargés, ce fallback ne sert que
       si design-system.css est utilisé seul. */
    --ds-focus-ring-color: var(--focus-ring-color, #0a1828);
    --ds-focus-ring-width: 2px;
    --ds-focus-ring-offset: 2px;
}

/* ══════════════════════════════════════════════════
   Composant : boutons (primaire / secondaire / danger)
   ══════════════════════════════════════════════════
   États hover/focus/disabled systématiques sur les trois variantes. Les
   couleurs restent celles du thème (var(--theme-*)) : seul le patron d'état
   (quoi change au survol/focus/désactivé) est formalisé ici. */
.btn {
    border-radius: var(--ds-radius-sm);
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.btn:focus-visible,
.btn.focus {
    outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);
    outline-offset: var(--ds-focus-ring-offset);
    box-shadow: none;
}
.btn:disabled,
.btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none !important;
}

/* Danger : hover/focus/disabled manquaient (seule la couleur de fond était
   définie dans style_sun.css avant ce lot). */
.btn-danger {
    color: #fff;
}
.btn-danger:hover,
.btn-danger:focus {
    background-color: #a11f22 !important; /* assombri, reste >= 4,5:1 avec du blanc */
    border-color: #a11f22 !important;
    color: #fff !important;
}
.btn-danger:disabled,
.btn-danger.disabled {
    background-color: #C92A2D !important;
    opacity: 0.55;
}

/* ══════════════════════════════════════════════════
   Composant : formulaires (label, aide, erreur, focus)
   ══════════════════════════════════════════════════ */
.form-control:focus,
select.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
    outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);
    outline-offset: 1px;
    box-shadow: none;
    border-color: var(--ds-focus-ring-color);
}
.ds-form-label {
    display: block;
    font-weight: 600;
    font-size: var(--ds-font-size-body);
    margin-bottom: var(--ds-space-1);
}
.ds-form-help {
    display: block;
    font-size: var(--ds-font-size-caption);
    color: #5a6472; /* >= 4,5:1 sur fond blanc, mesuré */
    margin-top: var(--ds-space-1);
}
.ds-form-error,
.invalid-feedback {
    display: block;
    font-size: var(--ds-font-size-caption);
    color: #b3261e; /* >= 4,5:1 sur fond blanc, mesuré */
    margin-top: var(--ds-space-1);
    font-weight: 600;
}
.form-control.is-invalid,
input.is-invalid,
textarea.is-invalid {
    border-color: #b3261e;
}

/* ══════════════════════════════════════════════════
   Composant : tableaux (en-tête, zébrage, scroll responsive interne)
   ══════════════════════════════════════════════════
   Formalise .table-striped/.table-responsive déjà posés dans les templates
   panier/checkout/liste catalogue (panier-details-table.html.twig,
   commander-article-list.html.twig...) : pas de nouvelle classe requise. */
.table-responsive {
    border-radius: var(--ds-radius-sm);
}
table.table thead th {
    font-weight: 700;
    font-size: var(--ds-font-size-caption);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom-width: 2px;
}
table.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.025);
}

/* ══════════════════════════════════════════════════
   Composant : cartes produit
   ══════════════════════════════════════════════════
   Formalise .product-card-item/.article-img-zone/.product-block-name déjà en
   place (image à ratio fixe via hauteur fixe + object-fit:contain, nom clampé
   à 2 lignes via -webkit-line-clamp, prix + CTA visibles) : rien à changer
   structurellement, juste les tokens de rayon/ombre déjà utilisés en dur. */
.product-card-item {
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-card);
}
.product-card-item:hover {
    box-shadow: var(--ds-shadow-card-hover);
}

/* ══════════════════════════════════════════════════
   Composant : badges de statut
   ══════════════════════════════════════════════════
   Réutilise TEL QUEL .badge-dispo (lot E, déjà 5,06:1 mesuré) : rien à
   dupliquer ici, juste le rayon en pilule formalisé. */
.badge-dispo,
.badge-stock-inline {
    border-radius: var(--ds-radius-pill);
}