/**
 * Festival Bénévoles Manager — Front-end bénévole, même identité "Blanc sur Blanc" que l'admin.
 *
 * Le front-end (front-style.css) est déjà entièrement piloté par des variables CSS
 * (--color-primary, --color-surface, --font-family-base, etc.) : il suffit donc de
 * redéfinir ces jetons sur le conteneur racine .fbm-front-dashboard pour que tous les
 * composants (en-tête, onglets, cartes, profil, blog) héritent automatiquement de la
 * nouvelle identité, sans toucher au HTML ni au reste des règles CSS existantes.
 *
 * Scopé à .fbm-front-dashboard (pas :root) pour ne jamais affecter le thème du site
 * en dehors de cet espace bénévole.
 */

.fbm-front-dashboard {
    --color-background: #FFFFFF;
    --color-surface: #FFFFFF;
    --color-text: #111111;
    --color-text-secondary: #86837D;

    --color-primary: #7A2331;
    --color-primary-hover: #8A2E20;
    --color-primary-active: #6A1C28;
    --color-btn-primary-text: #FFFFFF;

    --color-secondary: #F7F6F4;
    --color-secondary-hover: #F0EEEA;
    --color-secondary-active: #E7E4DE;

    --color-border: #E7E4DE;
    --color-card-border: #E7E4DE;
    --color-card-border-inner: #F0EEEA;

    --color-success: #2F6B4F;
    --color-warning: #A9761F;
    --color-error: #A33A2A;
    --color-info: #86837D;

    --font-family-base: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-family-mono: "Roboto Mono", ui-monospace, monospace;

    --shadow-sm: 0 1px 2px rgba(17,17,17,0.02), 0 10px 24px -18px rgba(17,17,17,0.10);
    --shadow-md: 0 1px 2px rgba(17,17,17,0.03), 0 16px 32px -18px rgba(17,17,17,0.14);
}

/* Chiffres alignés (heures, compteurs) comme côté admin */
.fbm-front-stat strong,
#fbm-my-assignments-count,
#fbm-my-hours-total {
    font-family: var(--font-family-mono);
    font-variant-numeric: tabular-nums;
}

/* Le bloc "articles" utilisait un blanc + ombre codés en dur : alignés sur --shadow-sm/--color-border
   pour rester cohérents si on retouche la palette plus tard. */
.fbm-blog-item {
    background: var(--color-surface) !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--color-border);
}