/* =====================================================================
   CHARTE BSA (bsa.fr)
   Chargée après style.css et bdd.css quand CHARTE vaut 'bsa' (config.local.php du site de test
   it-service.best, voir includes/marque.php). Sans ce réglage, rien ne change : charte 1FOCOM.
   Reprend bsa.fr et shop.bsa.fr : police Poppins, vert #1aa06d (foncé #137a53), anthracite #232324,
   gris neutres, logo au triangle gris et à la barre verte. Fond uni, arrondis réduits, menu et boutons
   en capitales comme sur le site, bouton principal en pastille verte, bandeaux anthracite qui virent au vert.
===================================================================== */
:root {
    --bsa-vert: #1aa06d;
    --bsa-vert-fonce: #137a53;
    --bsa-vert-clair: #34c287;
    --bsa-vert-lumineux: #6fdcab;      /* sur fond sombre */
    --bsa-menthe: #e4f5ed;
    --bsa-anthracite: #232324;
    --bsa-anthracite-2: #19191a;
    --bsa-anthracite-vert: #1c3a2f;    /* bas de la navbar : l'anthracite vire au vert */
    --bsa-gris: #8a8a8a;

    /* Variables de la charte (style.css, section 11), reprises par tous les composants */
    --v-blue: var(--bsa-vert);
    --v-blue-dark: var(--bsa-vert-fonce);
    --v-navy: var(--bsa-anthracite);
    --v-navy-2: var(--bsa-anthracite-2);
    --v-navy-3: var(--bsa-anthracite-vert);
    --v-cyan: var(--bsa-vert-lumineux);
    --v-trait: linear-gradient(90deg, var(--bsa-vert), var(--bsa-vert-clair));

    --font: "Poppins", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-display: "Poppins", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --r-sm: 3px;
    --r: 6px;
    --r-lg: 8px;
}

:root[data-theme="light"] {
    --bg: #f4f5f5;
    --bg-2: #ffffff;
    --card-bg: #ffffff;
    --card-border: #e6e6e6;
    --surface: #f6f7f7;
    --surface-2: #eceeed;
    --line: #e6e6e6;
    --line-2: #d6d8d7;
    --field: #f8f9f9;
    --text: #3a3a3b;
    --text-strong: #232324;
    --text-muted: #656565;
    --text-dim: #8a8a8a;
    --accent: var(--bsa-vert-fonce);
    --accent-strong: var(--bsa-vert);
    --accent-soft: var(--bsa-menthe);
    --accent-ring: rgba(26, 160, 109, 0.22);
    --on-accent: #ffffff;
    --grid-line: transparent;
    --shadow: 0 1px 2px rgba(20, 20, 20, 0.05), 0 8px 24px -12px rgba(20, 20, 20, 0.18);
    --shadow-lg: 0 2px 6px rgba(20, 20, 20, 0.05), 0 24px 60px -24px rgba(20, 20, 20, 0.35);
}

/* ---------- Typographie : Poppins, titres gras sans resserrement ---------- */
body { font-size: 14.5px; }

h1, h2, h3, h4, h5, h6,
.card-title,
.stat-hero-value,
.month-title,
.section-header,
.portail-section-title,
.fc .fc-toolbar-title,
.ui-cal-title {
    letter-spacing: -0.01em;
}

h1 { font-weight: 700; }
h2 { font-weight: 700; }

.navbar-section-title,
.portail-eyebrow,
.stat-hero-label,
.legend-title,
.v-kicker {
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
}

/* Fond uni, comme bsa.fr (ni halos ni trame de points) */
body,
:root[data-theme="light"] body {
    background: var(--bg);
}

body::before { display: none; }

/* ---------- Navbar : anthracite, logo BSA, menu en capitales, trait vert ---------- */
.navbar-left {
    border-color: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: linear-gradient(180deg, var(--bsa-anthracite-2) 0%, var(--bsa-anthracite) 60%, var(--bsa-anthracite-vert) 100%);
    box-shadow: 0 24px 50px -24px rgba(20, 20, 20, 0.6);
}

.navbar-left:hover,
.navbar-statique:not(.is-deployee):hover {
    box-shadow: 0 30px 70px -24px rgba(20, 20, 20, 0.75);
}

.navbar-brand img.logo-bsa {
    display: block;
    width: calc(var(--nav-width) - 28px);
    height: auto;
}

.navbar-left .nav-item { border-radius: 6px; }

.navbar-left .nav-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.navbar-left .nav-item.active {
    background: rgba(26, 160, 109, 0.16);
}

.navbar-left .nav-item.active .nav-icon { color: var(--bsa-vert-lumineux); }

/* Élément actif : trait vert à gauche, toujours visible (le menu actif de bsa.fr est souligné de vert) */
.navbar-left .nav-item.active::before,
.navbar-statique:not(.is-deployee):hover .nav-item.active::before {
    top: 9px;
    bottom: 9px;
    left: 0;
    right: auto;
    width: 3px;
    height: auto;
    border-radius: 0 3px 3px 0;
    background: var(--bsa-vert);
    opacity: 1;
}

/* ---------- Blocs : arrondis réduits, ombres neutres ---------- */
.card,
.section-card,
.table-wrapper,
.filters-section,
.stat-hero,
.admin-panel,
.edenred-tile,
.week-block,
.demande-card,
.extra-frais-section,
#descriptionGroup,
.result-item,
.portail-section {
    border-radius: 8px !important;
}

.card::after,
.section-card::after,
.stat-hero::after,
.admin-panel::after,
.portail-section::after,
.edenred-tile::after {
    height: 3px;
}

.form-section,
.tk-barre,
.v-chiffres { border-radius: 8px; }

/* Chiffres : dégradé vert */
.stat-hero-value,
.edenred-tile strong,
.recap-summary-value,
.v-chiffre strong {
    background-image: linear-gradient(135deg, var(--bsa-vert-fonce), var(--bsa-vert) 60%, var(--bsa-vert-clair));
}

/* ---------- Bandeaux sombres : anthracite qui vire au vert ---------- */
.v-bandeau,
.banniere-entite { border-radius: 10px; }

.v-bandeau h1 em {
    background-image: linear-gradient(90deg, #b5f2d4, var(--v-cyan) 50%, #ffffff);
}

/* ---------- Boutons ---------- */
/* Bouton principal : pastille verte en capitales, comme « Nos Valeurs » sur bsa.fr */
.btn-plein {
    padding: 12px 22px;
    background: var(--bsa-vert);
    font: 600 0.76rem/1 var(--font-display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 10px 22px -12px rgba(26, 160, 109, 0.75);
}

.btn-plein:hover {
    background: var(--bsa-vert-fonce);
    box-shadow: 0 14px 26px -12px rgba(19, 122, 83, 0.85);
}

/* Boutons-liens : capitales espacées (« VOIR PLUS »), trait vert */
.btn,
.btn-action,
.btn-mail,
.btn-filter,
.btn-send-mail,
.btn-back,
.btn-toggle-extra,
.btn-details,
.btn-delete-user,
.details-btn,
.rappel-ouvrir {
    font-weight: 600 !important;
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---------- Tickets : carte « Mes tickets » ---------- */
.vue-moi {
    border-radius: 8px;
    box-shadow: 0 12px 24px -16px rgba(20, 20, 20, 0.8);
}

.vue-moi.is-active { box-shadow: 0 0 0 2px var(--v-cyan), 0 12px 24px -16px rgba(20, 20, 20, 0.8); }

/* ---------- Assistant ---------- */
.assistant-bulle {
    box-shadow: 0 12px 26px -10px rgba(20, 20, 20, 0.6), 0 0 0 4px color-mix(in srgb, var(--v-blue) 18%, transparent);
}

/* ---------- Téléphone : barre d'onglets ---------- */
.barre-mobile {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 -1px 0 rgba(255, 255, 255, 0.25),
        0 18px 40px -18px rgba(20, 20, 20, 0.35),
        0 2px 8px rgba(20, 20, 20, 0.06);
}

.bm-curseur {
    box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(26, 160, 109, 0.14), 0 6px 16px -8px rgba(20, 20, 20, 0.4);
}

.bm-plus {
    background: linear-gradient(135deg, var(--bsa-vert), var(--bsa-vert-fonce));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--bg-2) 55%, transparent), 0 12px 24px -10px rgba(26, 160, 109, 0.75);
}

/* ---------- Page de connexion ---------- */
.cx-marque img.logo-bsa-complet {
    height: 84px;
    width: auto;
}

.cx-microsoft { border-radius: 30px; }
.cx-message { border-radius: 6px; }