/* ============================================================================
   Design-system — Cabinet Bruno extranet
   100% ADDITIF : ce fichier ne restyle AUCUN élément existant (aucune régression).
   Il fournit des VARIABLES de marque et des CLASSES réutilisables, à adopter
   progressivement à la place des styles inline dupliqués.
   ============================================================================ */

:root {
    /* Palette de marque (à utiliser partout au lieu des ~40 hex ad-hoc). */
    --cb-orange: #eb7f15;
    --cb-orange-dark: #cf6f0c;
    --cb-orange-soft: #fff3e6;
    --cb-card-bg: #E1E0DE;
    --cb-ink: #132957;
    --cb-text: #222222;
    --cb-muted: #64748b;
    --cb-border: #e2e8f0;
    --cb-success: #198754;
    --cb-danger: #c0392b;
    --cb-white: #ffffff;

    /* Échelle d'espacement (multiples de 4). */
    --cb-space-1: 4px;
    --cb-space-2: 8px;
    --cb-space-3: 12px;
    --cb-space-4: 16px;
    --cb-space-5: 24px;
    --cb-space-6: 32px;

    /* Échelle typographique. */
    --cb-fs-sm: 13px;
    --cb-fs-base: 14px;
    --cb-fs-md: 16px;
    --cb-fs-lg: 18px;
    --cb-fs-xl: 24px;

    --cb-radius: 8px;
    --cb-radius-pill: 50px;
    --cb-shadow: 0 4px 14px rgba(235, 127, 21, 0.18);
}

/* --- Badge numéroté de l'accueil (remplace ~40 répétitions inline) --------- */
.cb-badge-num {
    display: inline-block;
    font-weight: 700;
    color: var(--cb-text);
    border: 2px solid var(--cb-orange);
    border-radius: var(--cb-radius-pill);
    padding: 5px 10px;
    line-height: 1;
}

/* Séparateur orange centré sous un titre/badge (motif récurrent de l'accueil). */
.cb-sep {
    border-bottom: 2px solid var(--cb-orange);
    width: 40px;
    margin: 15px auto 7px;
}

/* --- Carte de marque ------------------------------------------------------- */
.cb-card {
    background: var(--cb-card-bg);
    border-radius: var(--cb-radius);
    box-shadow: var(--cb-shadow);
}

/* --- Boutons de marque ----------------------------------------------------- */
.cb-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--cb-orange);
    border: 1px solid var(--cb-orange);
    color: var(--cb-white);
    border-radius: var(--cb-radius);
    padding: 8px 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.cb-btn-primary:hover {
    background: var(--cb-orange-dark);
    border-color: var(--cb-orange-dark);
    color: var(--cb-white);
    text-decoration: none;
}

/* --- Helpers texte --------------------------------------------------------- */
.cb-text-muted { color: var(--cb-muted); }
.cb-title { color: var(--cb-ink); font-weight: 700; }