/* L'pieces — Design Tokens (source de vérité)
   Extraits de base.html le 18 avril 2026.
   Toute nouvelle variable va ICI, pas dans les templates inline.
*/
:root {
    /* Couleurs marque */
    --bg-base: #f2f1ee;
    --bg-card: #faf9f7;
    --bg-elevated: #fefefe;
    --border-subtle: rgba(0,0,0,0.12);
    --text-primary: #1d1d1f;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    /* CEO 05/05 03h45 — Palette luxe Stripe-style.
       Navy profond élégant majeur + orange clair classe mineur.
       Inspiration : Stripe, Apple, Linear. */
    --accent: #0a2540;
    --accent-hover: #1e40af;
    --accent-soft: rgba(10,37,64,0.10);
    --primary: #0a2540;

    /* Ambient F1 dashboard vendeur (LED glow) — bleu navy aussi pour cohérence */
    --ambient-color: #0a2540;

    /* Orange clair luxueux — CTAs secondaires, brand touches lumineuses */
    --accent-orange: #f97316;
    --accent-orange-hover: #ea580c;
    --accent-orange-soft: rgba(249,115,22,0.12);

    /* Bleu vif secondaire — pour distinguer accent (navy) vs accent-blue (vif) */
    --accent-blue: #2563eb;
    --accent-blue-hover: #1d4ed8;
    --accent-blue-soft: rgba(37,99,235,0.12);

    /* Sémantique */
    --success: #22c55e;
    --success-soft: rgba(34,197,94,0.12);
    --warning: #eab308;
    --warning-soft: rgba(234,179,8,0.12);
    --info: #3b82f6;
    --info-soft: rgba(59,130,246,0.12);

    /* Espacement & forme */
    --radius: 12px;
    --radius-lg: 16px;
    --space: 24px;
    --shadow-soft: 0 4px 20px rgba(0,0,0,0.08);
    --focus-ring: rgba(37,99,235,0.35); /* CEO 27/04 : bleu pour casser orange */

    /* Typographie */
    --font-body: 'DM Sans', -apple-system, sans-serif;
    --font-display: 'Outfit', sans-serif;

    /* Navigation */
    --lp-nav-offset: 112px;

    /* Secondaire — CEO 27/04 : bleu pour casser orange/blanc */
    --secondary: #2563eb;
    --steel-light: #86868b;
    --steel-text: #1d1d1f;
    --card-matte: #faf9f7;
    --border-stealth: rgba(0,0,0,0.08);
    --border-interactive: rgba(0,0,0,0.18);
}

/* Liens sémantiques — bleu par défaut (sauf accent override) */
a:not([class*="btn"]):not([class*="lp-"]):not([class*="adm-"]):not([class*="cat-"]) {
    color: var(--accent-blue);
}
a:not([class*="btn"]):not([class*="lp-"]):not([class*="adm-"]):not([class*="cat-"]):hover {
    color: var(--accent-blue-hover);
}

/* Éléments interactifs — bordure visible */
a[class*="btn-"], button[class*="btn-"],
.btn-primary-led, .btn-secondary-led {
    border: 1.5px solid var(--border-interactive) !important;
}
.btn-primary-led {
    border-color: var(--accent) !important;
}

/* Cards cliquables — ombre au hover */
a[class*="card"]:hover, [class*="card"] a:hover {
    box-shadow: var(--shadow-soft);
}