/* ============================================================
   NDF LFPL — Feuille de style commune (CHARTE GRAPHIQUE LFPL)
   Couleurs et typographies officielles de la Ligue.
   Liée après les styles internes de chaque page : elle impose
   l'identité de marque sans toucher à la structure.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Heebo:wght@400;500;700;900&display=swap');

:root {
    /* ── Palette officielle LFPL ── */
    --brand:        #2D427B;   /* Bleu foncé — chrome, en-têtes, barre de nav */
    --brand-2:      #24365f;   /* variante plus sombre (dégradés / survol)     */
    --accent:       #416EA9;   /* Bleu — liens, focus, boutons d'action        */
    --accent-2:     #325491;   /* Bleu — survol / états actifs                 */
    --danger:       #D8171C;   /* Rouge officiel — alertes, rejet, suppression */
    --danger-2:     #b0141a;
    --gold:         #C19A2A;   /* Doré — total à rembourser, accents           */
    --ok:           #1e8a5a;   /* Vert conservé pour le statut « validé »      */
    --ok-2:         #176f49;

    --page:         #eef2f7;
    --card:         #ffffff;
    --ink:          #1f2a37;
    --muted:        #6b7688;
    --line:         #e3e8ef;
    --line-strong:  #d3dae4;
    --radius:       10px;
}

/* ── Typographie de marque ── */
body {
    background: var(--page) !important;
    color: var(--ink);
    font-family: 'Heebo', 'Segoe UI', Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}
/* Grands titres en Anton (typo titres de la charte) */
h2 {
    font-family: 'Anton', 'Heebo', sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: .5px;
    color: var(--brand) !important;
    border-bottom-color: var(--accent) !important;
}
h3 { font-family: 'Heebo', sans-serif; letter-spacing: -.2px; }

/* ── Conteneurs ── */
.container, .box {
    border: 1px solid var(--line);
    box-shadow: 0 1px 3px rgba(16, 33, 60, .06), 0 8px 24px rgba(16, 33, 60, .05) !important;
    border-radius: 14px !important;
}
/* La carte de connexion passe au-dessus du décor graphique */
.box { position: relative; z-index: 1; }

/* ── Barre de navigation ── */
.nav {
    background: var(--brand) !important;
    border-radius: 12px !important;
    padding: 12px 18px !important;
    border-bottom: 3px solid var(--danger);   /* rappel du bandeau rouge LIGUE */
    box-sizing: border-box;
    width: calc(100vw - 60px);
    max-width: 1500px;
    height: 64px;
    min-height: 64px;
    margin-left: 50%;
    margin-right: 0;
    transform: translateX(-50%);
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 18px;
    overflow: hidden;
}
/* ── Barre de navigation : pastilles segmentées (proposition A) ── */
.nav a {
    color: #cddcf1 !important;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: 8px;
    font-size: 0.9em; white-space: nowrap; line-height: 1;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease;
}
.nav a:hover { background: rgba(255, 255, 255, .12); color: #fff !important; }
.nav a.active { background: #fff !important; color: #2D427B !important; font-weight: 600; }
.nav a.active:hover { background: #fff !important; color: #2D427B !important; }
.nav a.nav-user { color:#fff !important; font-weight:700; }
.nav a.nav-user:not(.active) { background:rgba(255,255,255,.10); }
.nav a.logout { color: #ffd0cf !important; }
.nav a.logout:hover { background: rgba(216, 23, 28, .28) !important; color: #fff !important; }
.nav-links {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav > span:first-child { flex: 0 0 auto; }
.nav-brand-title { color:#fff; font-size:1.02em; white-space:nowrap; }
.nav-sep { width: 1px; height: 22px; background: rgba(255, 255, 255, .22); margin: 0 4px; }
.nav strong { display: inline-flex; align-items: center; gap: 8px; }
/* Logo sur pastille blanche pour ressortir sur le bleu foncé */
.nav img {
    background: #fff;
    padding: 3px 8px;
    border-radius: 8px;
    box-sizing: content-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

@media (max-width: 700px) {
    .nav {
        width: calc(100vw - 20px);
        height: 58px;
        min-height: 58px;
        padding: 9px 10px !important;
        gap: 8px;
    }
    .nav img { height: 26px !important; padding: 2px 5px; }
    .nav-brand-title { font-size: .9em; }
    .nav a { padding: 8px 9px; }
}

/* ── Boutons ── */
.btn {
    border-radius: var(--radius) !important;
    font-weight: 700 !important;
    letter-spacing: .2px;
    display: inline-flex; align-items: center; gap: 7px; justify-content: center;
    transition: filter .15s ease, transform .05s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn-add, .btn-ok, .btn-save { background: var(--ok) !important; }
.btn-ko { background: var(--danger) !important; }
.btn-submit { background: var(--accent) !important; }
.btn-edit { background: var(--accent) !important; }

/* ── Champs de saisie ── */
input, select, textarea { border-radius: 8px !important; }
input:focus, select:focus, textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(65, 110, 169, .18);
    outline: none !important;
}

/* ── Pastilles de statut (arrondies) ── */
.badge {
    border-radius: 999px !important;
    padding: 3px 12px !important;
    font-weight: 700 !important;
    letter-spacing: .2px;
    display: inline-flex; align-items: center; gap: 5px; line-height: 1.6;
}

/* ── Total à rembourser en doré (accent charte) ── */
.grand-total { color: var(--gold) !important; }
/* Bandeaux total des tableaux de saisie (pas l'admin) */
.total-row, .tfoot-main td { background: var(--brand) !important; color: #fff !important; }

/* ── Bloc d'information / rappel : accent doré ── */
.header-info { border-left-color: var(--accent) !important; border-radius: 10px !important; }
.pj-notice { border-color: var(--gold) !important; }

/* ── Onglets de filtre ── */
.btn-fil { display: inline-flex; align-items: center; gap: 6px; border-radius: 8px !important; }
.btn-fil.active { background: var(--accent) !important; }

/* ── Icônes SVG + liens ── */
.ico { display: inline-block; }
a { color: var(--accent); }

/* ── Accessibilité : focus clavier visible ── */
a:focus-visible, button:focus-visible, .btn:focus-visible, .btn-fil:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
    border-radius: 6px;
}
.nav a:focus-visible { outline-color: #ffd166; }

/* Cibles tactiles un peu plus généreuses */
.btn-edit, .btn-tog { min-width: 34px; min-height: 30px; }

/* Bouton "joindre un justificatif" (vue mensuelle) */
.pj-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 28px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    color: var(--accent);
    background: #fff;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pj-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.pj-btn.filled { background: var(--ok); color: #fff; border-color: var(--ok); }

/* Chiffres alignés dans les colonnes de montants */
.total-cell, .line-total, .grand-total, td[class*="total"], .hist-table td {
    font-variant-numeric: tabular-nums;
}

/* Respect de prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}