/* =========================================================================
   MespERP - Feuille de style principale
   Thème institutionnel : vert sarcelle profond + or (M.E.S.P.)
   Typographie embarquée : Plus Jakarta Sans (titres) + Inter (texte)
                           + JetBrains Mono (matricules et comptes)
   ========================================================================= */

@import url("../vendor/fonts/fonts.css");

:root {
    /* ---- Couleurs de marque */
    --mesp-900: #062b2b;
    --mesp-800: #0a3d3d;
    --mesp-700: #0f5252;
    --mesp-600: #14706b;
    --mesp-500: #198f83;
    --mesp-300: #7ec8bd;
    --mesp-100: #e6f4f1;
    --mesp-50:  #f2faf8;
    --or-500: #c8a349;
    --or-400: #dcbc76;
    --or-100: #fbf4e2;

    /* ---- Neutres */
    --gris-50: #f5f7f9;
    --gris-100: #eef1f4;
    --gris-200: #e2e7ec;
    --gris-300: #cbd4dc;
    --gris-400: #9aa8b4;
    --gris-500: #6b7a86;
    --gris-700: #384451;
    --gris-900: #1c2530;

    /* ---- Sémantique */
    --danger: #c1443b;
    --succes: #1c7d54;
    --alerte: #a97012;
    --info: #2f6690;

    /* ---- Élévation par couches */
    --ombre-xs: 0 1px 2px rgba(6, 43, 43, .06);
    --ombre-sm: 0 1px 2px rgba(6, 43, 43, .05), 0 2px 6px rgba(6, 43, 43, .045);
    --ombre-md: 0 2px 4px rgba(6, 43, 43, .05), 0 8px 24px rgba(6, 43, 43, .08);
    --ombre-lg: 0 8px 16px rgba(6, 43, 43, .07), 0 24px 56px rgba(6, 43, 43, .13);
    --ombre-focus: 0 0 0 .2rem rgba(25, 143, 131, .18);

    /* ---- Rayons */
    --rayon-xs: .35rem;
    --rayon-sm: .5rem;
    --rayon: .75rem;
    --rayon-lg: 1rem;

    /* ---- Transitions */
    --transition: .18s cubic-bezier(.4, 0, .2, 1);

    /* ---- Typographie */
    --police-titre: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
    --police-texte: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --police-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;

    /* ---- Bootstrap */
    --bs-body-font-family: var(--police-texte);
    --bs-border-radius: var(--rayon-sm);
    --bs-link-color: var(--mesp-700);
    --bs-link-hover-color: var(--mesp-900);
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    font-family: var(--police-texte);
    font-feature-settings: "cv05", "ss01";
    background: var(--gris-50);
    color: var(--gris-700);
    font-size: .9rem;
    line-height: 1.55;
    letter-spacing: -.005em;
}

h1, h2, h3, h4, h5, h6, .police-titre,
.kpi .valeur, .barre-laterale .marque strong,
.entete-document .titre-doc, .entete-document .organisation {
    font-family: var(--police-titre);
    letter-spacing: -.015em;
}

strong, .fw-semibold, .fw-bold { font-variation-settings: "wght" 620; }

/* Chiffres alignés partout où c'est utile */
.num, .kpi .valeur, .table td, .table th, .form-control[type="number"], input[type="number"] {
    font-variant-numeric: tabular-nums lining-nums;
}

/* Barres de défilement discrètes */
* { scrollbar-width: thin; scrollbar-color: var(--gris-300) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gris-300); border-radius: 20px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--gris-400); background-clip: content-box; }

/* Sélection de texte */
::selection { background: var(--mesp-300); color: var(--mesp-900); }

/* Anneau de focus accessible et homogène */
:focus-visible {
    outline: 2px solid var(--mesp-500);
    outline-offset: 2px;
    border-radius: var(--rayon-xs);
}

/* ------------------------------------------------------------ Connexion */
.page-connexion {
    min-height: 100vh;
    background:
        radial-gradient(1200px 600px at 12% -10%, rgba(25, 143, 131, .55), transparent 60%),
        radial-gradient(900px 500px at 105% 110%, rgba(200, 163, 73, .35), transparent 55%),
        linear-gradient(140deg, var(--mesp-900), var(--mesp-700) 55%, #0b4a48);
    display: flex;
    align-items: center;
}
.page-connexion::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}
.carte-connexion {
    position: relative;
    z-index: 1;
    border: 0;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .07);
    animation: apparition-carte .45s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes apparition-carte {
    from { opacity: 0; transform: translateY(22px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
.carte-connexion .panneau-gauche {
    background: linear-gradient(160deg, #052625, var(--mesp-700) 62%, var(--mesp-600));
    color: #fff;
    position: relative;
    overflow: hidden;
}
.carte-connexion .panneau-gauche::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(420px 260px at 85% 10%, rgba(255, 255, 255, .1), transparent 70%);
    pointer-events: none;
}
.carte-connexion .panneau-gauche .liste-atouts li {
    padding: .26rem 0;
    color: rgba(255, 255, 255, .86);
    display: flex; align-items: flex-start;
    line-height: 1.35;
}
.carte-connexion .panneau-gauche .liste-atouts li i {
    flex: 0 0 auto;
    margin-top: .12rem;
}
.logo-mesp {
    width: 74px; height: 74px;
    flex: 0 0 74px;
    border-radius: 50%;
    background: #fff;
    display: grid; place-items: center;
    overflow: hidden;
    padding: 4px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}
.logo-mesp img { width: 100%; height: 100%; object-fit: contain; }

/* Logo sur le formulaire de connexion */
.logo-connexion { max-width: 190px; width: 100%; height: auto; }
.logo-connexion-mobile { max-width: 150px; width: 100%; height: auto; }

/* ------------------------------------------------------------ Structure */
.enveloppe { display: flex; min-height: 100vh; }

.barre-laterale {
    width: 262px;
    flex: 0 0 262px;
    background: linear-gradient(185deg, var(--mesp-900), var(--mesp-800) 60%, #093f3d);
    color: #cfe6e2;
    position: sticky; top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 1030;
    transition: width var(--transition), flex-basis var(--transition);
}
.barre-laterale::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); background-clip: content-box; }
.barre-laterale { scrollbar-color: rgba(255, 255, 255, .2) transparent; }

.barre-laterale .marque {
    padding: .9rem 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    display: flex; align-items: center; gap: .7rem;
}
.barre-laterale .marque .pastille {
    width: 44px; height: 44px; flex: 0 0 44px;
    border-radius: .6rem;
    background: #fff;
    display: grid; place-items: center;
    overflow: hidden; padding: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}
.barre-laterale .marque .pastille img {
    width: 100%; height: 100%; object-fit: contain;
}
.barre-laterale .marque strong { color: #fff; font-size: 1.08rem; letter-spacing: -.01em; }
.barre-laterale .marque small { color: rgba(255, 255, 255, .55); font-size: .68rem; }

.barre-laterale .titre-groupe {
    padding: .8rem 1.15rem .28rem;
    font-size: .655rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255, 255, 255, .35);
    white-space: nowrap;
}

/* ------------------------------------------------ Sections dépliables du menu */
.barre-laterale .groupe-menu { margin: .1rem 0; }
.barre-laterale .entete-groupe {
    width: calc(100% - 1.2rem);
    margin: .1rem .6rem;
    padding: .5rem .75rem;
    display: flex; align-items: center; gap: .65rem;
    background: transparent;
    border: 0;
    border-radius: var(--rayon-sm);
    color: rgba(255, 255, 255, .62);
    font-size: .69rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.barre-laterale .entete-groupe i:first-child { font-size: .95rem; width: 1.25rem; text-align: center; flex: 0 0 1.25rem; letter-spacing: 0; }
.barre-laterale .entete-groupe .libelle {
    flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis;
    /* Les intitules longs (Direction des Ressources Humaines) tiennent sur
       deux lignes au lieu d'etre coupes en bord de barre laterale. */
    white-space: normal; line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.barre-laterale .entete-groupe .chevron {
    font-size: .72rem; flex: 0 0 auto; opacity: .65;
    transition: transform var(--transition);
}
.barre-laterale .entete-groupe:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.barre-laterale .entete-groupe:focus-visible { outline: 2px solid var(--or-500); outline-offset: 1px; }
.barre-laterale .groupe-menu.ouvert > .entete-groupe { color: #fff; background: rgba(255, 255, 255, .05); }
.barre-laterale .groupe-menu.ouvert > .entete-groupe .chevron { transform: rotate(180deg); }
.barre-laterale .groupe-menu.actif > .entete-groupe { color: var(--or-500); }

.barre-laterale .sous-menu {
    overflow: hidden;
    max-height: 0;
    opacity: .4;
    /* Masqué visuellement ET retiré de l'ordre de tabulation. */
    visibility: hidden;
    transition: max-height .26s cubic-bezier(.4, 0, .2, 1), opacity .22s ease, visibility .26s;
}
.barre-laterale .groupe-menu.ouvert > .sous-menu { max-height: 34rem; opacity: 1; visibility: visible; }
.barre-laterale .sous-menu .nav-link { padding-left: 1.55rem; }
.barre-laterale .nav-link {
    color: #bcd9d4;
    padding: .42rem .8rem;
    margin: .05rem .6rem;
    border-radius: var(--rayon-sm);
    display: flex; align-items: center; gap: .65rem;
    font-size: .875rem;
    position: relative;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition), transform var(--transition);
}
.barre-laterale .nav-link i { font-size: 1.02rem; width: 1.25rem; text-align: center; flex: 0 0 1.25rem; }
.barre-laterale .nav-link:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
    transform: translateX(2px);
}
.barre-laterale .nav-link.active {
    background: linear-gradient(90deg, rgba(200, 163, 73, .26), rgba(200, 163, 73, .04));
    color: #fff; font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(200, 163, 73, .22);
}
.barre-laterale .nav-link.active::before {
    content: "";
    position: absolute; left: -.6rem; top: 50%; transform: translateY(-50%);
    width: 3px; height: 62%;
    background: var(--or-500);
    border-radius: 0 3px 3px 0;
}

/* Barre latérale réduite (mode confort d'écran) */
@media screen and (min-width: 992px) {
    .enveloppe.laterale-reduite .barre-laterale { width: 72px; flex-basis: 72px; overflow: visible; }
    .enveloppe.laterale-reduite .barre-laterale .marque > div:last-child,
    .enveloppe.laterale-reduite .barre-laterale .titre-groupe,
    .enveloppe.laterale-reduite .barre-laterale .nav-link span.libelle { display: none; }
    .enveloppe.laterale-reduite .barre-laterale .marque { justify-content: center; padding: 1.05rem .5rem; }
    .enveloppe.laterale-reduite .barre-laterale .nav-link { justify-content: center; margin: .12rem .55rem; padding: .55rem 0; }
    .enveloppe.laterale-reduite .barre-laterale .titre-groupe { display: block; height: .85rem; padding: .5rem 0 0; }
    /* En mode icônes, les sections sont matérialisées par un simple filet
       et tous les écrans restent accessibles d'un seul clic. */
    .enveloppe.laterale-reduite .barre-laterale .entete-groupe { display: none; }
    .enveloppe.laterale-reduite .barre-laterale .groupe-menu + .groupe-menu {
        border-top: 1px solid rgba(255, 255, 255, .1);
        margin-top: .4rem; padding-top: .4rem;
    }
    .enveloppe.laterale-reduite .barre-laterale .sous-menu {
        max-height: none !important; opacity: 1 !important; visibility: visible !important; overflow: visible;
    }
    .enveloppe.laterale-reduite .barre-laterale .sous-menu .nav-link { padding-left: 0; }
    .enveloppe.laterale-reduite .barre-laterale .nav-link.active::before { left: -.55rem; }
}

.zone-principale { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.barre-haute {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--gris-200);
    padding: .62rem 1.25rem;
    display: flex; align-items: center; gap: .9rem;
    position: sticky; top: 0; z-index: 1020;
}
.barre-haute.defilee { box-shadow: var(--ombre-sm); }
.barre-haute .fil-ariane {
    font-size: .74rem; color: var(--gris-500);
    text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Le bloc de titre se comprime, les commandes de droite restent intactes */
.barre-haute > .flex-grow-1 { min-width: 0; }
.barre-haute .d-flex.align-items-center.gap-2,
.barre-haute form { flex: 0 0 auto; }
.barre-haute h1 {
    font-size: 1.12rem; font-weight: 700; margin: 0; color: var(--mesp-900);
    line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Bouton d'appel de la palette de commandes */
.btn-palette {
    display: inline-flex; align-items: center; gap: .45rem;
    white-space: nowrap; flex: 0 0 auto;
    background: var(--gris-100);
    border: 1px solid var(--gris-200);
    color: var(--gris-500);
    border-radius: var(--rayon-sm);
    padding: .34rem .6rem;
    font-size: .78rem;
    transition: all var(--transition);
}
.btn-palette:hover { background: #fff; color: var(--mesp-700); border-color: var(--mesp-300); }
.barre-haute .form-select-sm { min-width: 9.5rem; }
.btn-palette kbd {
    background: #fff; border: 1px solid var(--gris-200); border-bottom-width: 2px;
    color: var(--gris-500); border-radius: var(--rayon-xs);
    font-family: var(--police-mono); font-size: .66rem; padding: .05rem .3rem;
}

/* Barre de progression de navigation */
#barre-chargement {
    position: fixed; top: 0; left: 0; height: 2px; width: 0;
    background: linear-gradient(90deg, var(--mesp-500), var(--or-500));
    z-index: 2000; opacity: 0;
    transition: width .2s ease, opacity .25s ease;
    box-shadow: 0 0 8px rgba(200, 163, 73, .6);
}

.contenu { padding: 1.35rem 1.25rem 2.5rem; }

.avatar-utilisateur {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(145deg, var(--mesp-600), var(--mesp-800));
    color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .82rem;
    font-family: var(--police-titre);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), var(--ombre-xs);
}

/* ------------------------------------------------------------ Cartes & KPI */
.card {
    border: 1px solid var(--gris-200);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-sm);
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--gris-200);
    font-weight: 650;
    font-family: var(--police-titre);
    letter-spacing: -.01em;
    color: var(--mesp-800);
    padding: .78rem 1rem;
    border-radius: var(--rayon) var(--rayon) 0 0 !important;
}
.card-footer { background: var(--gris-50); border-top: 1px solid var(--gris-200); }

.kpi { position: relative; overflow: hidden; }
.kpi::after {
    content: ""; position: absolute; right: -34px; top: -34px;
    width: 118px; height: 118px; border-radius: 50%;
    background: var(--mesp-100);
    opacity: .55;
    z-index: 0;
    pointer-events: none;
    transition: transform var(--transition);
}
.kpi::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, var(--mesp-500), var(--mesp-300));
    opacity: 0; transition: opacity var(--transition);
    z-index: 3;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--ombre-md); border-color: var(--mesp-300); }
.kpi:hover::after { transform: scale(1.12); }
.kpi:hover::before { opacity: 1; }
.kpi > .card-body { position: relative; z-index: 2; }
.kpi .icone {
    width: 44px; height: 44px; border-radius: .7rem;
    display: grid; place-items: center; font-size: 1.2rem; color: #fff;
    position: relative; z-index: 2;
    box-shadow: var(--ombre-sm), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.kpi .valeur {
    font-size: 1.5rem; font-weight: 750; color: var(--mesp-900);
    position: relative; z-index: 2; line-height: 1.12;
}
.kpi .intitule {
    font-size: .715rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--gris-500); font-weight: 700; position: relative; z-index: 2;
}
.kpi .card-body > div:last-child { min-width: 0; }
.bg-teal { background: linear-gradient(145deg, var(--mesp-500), var(--mesp-700)); }
.bg-or { background: linear-gradient(145deg, var(--or-500), #a9863a); }
.bg-ardoise { background: linear-gradient(145deg, #4c6272, #2f3f4c); }
.bg-brique { background: linear-gradient(145deg, #d16a4f, #a8412d); }
.bg-mauve { background: linear-gradient(145deg, #ab5266, #7d3446); }

/* Puce de variation */
.delta {
    display: inline-flex; align-items: center; gap: .2rem;
    font-size: .7rem; font-weight: 700;
    padding: .08rem .38rem; border-radius: 20px;
}
.delta-hausse { background: #e5f4ec; color: var(--succes); }
.delta-baisse { background: #fbeceb; color: var(--danger); }
.delta-stable { background: var(--gris-100); color: var(--gris-500); }

/* Titre de section */
.titre-section {
    font-family: var(--police-titre);
    font-size: .95rem; font-weight: 700; color: var(--mesp-900);
    display: flex; align-items: center; gap: .5rem;
    margin: 0 0 .7rem;
}
.titre-section .surtitre {
    font-family: var(--police-texte);
    font-size: .66rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--or-500);
}

/* Saisie du barème : largeurs minimales pour éviter les montants tronqués */
.table-bareme input.form-control-sm { min-width: 108px; }
.table-bareme input.saisie-libelle { min-width: 190px; }

/* ------------------------------------------------------------ Tableaux */
.table { font-size: .845rem; margin-bottom: 0; }
.table > thead {
    background: var(--mesp-800);
}
.table > thead th {
    background: linear-gradient(180deg, var(--mesp-700), var(--mesp-800)) !important;
    --bs-table-bg: var(--mesp-800);
    --bs-table-accent-bg: var(--mesp-800);
    color: #eaf5f3 !important;
    font-weight: 600;
    font-size: .715rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
    vertical-align: middle;
    border-color: var(--mesp-700);
    padding-top: .62rem; padding-bottom: .62rem;
}
.table > tbody tr { transition: background .12s ease; }
.table > tbody tr:hover { background: var(--mesp-50) !important; }
.table > tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--mesp-500); }
.table td, .table th { vertical-align: middle; }
.table tfoot td {
    background: var(--gris-100); font-weight: 700; color: var(--mesp-900);
    border-top: 2px solid var(--mesp-700);
}
.tableau-defilant {
    max-height: 70vh; overflow: auto; border-radius: var(--rayon);
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.tableau-defilant::-webkit-scrollbar { height: 9px; width: 9px; }
.tableau-defilant::-webkit-scrollbar-thumb {
    background: var(--mesp-300); border-radius: 6px;
}
.tableau-defilant::-webkit-scrollbar-track { background: var(--gris-100); }
/* Repère affiché par le script lorsque le tableau dépasse la largeur visible */
.indice-defilement {
    display: none;
    align-items: center; gap: .35rem;
    margin: 0 0 .4rem; padding: .3rem .6rem;
    font-size: .72rem; font-weight: 600; color: var(--mesp-700);
    background: var(--mesp-100); border: 1px dashed var(--mesp-300);
    border-radius: var(--rayon-xs);
}
.indice-defilement.visible { display: inline-flex; }
.tableau-defilant thead th { position: sticky; top: 0; z-index: 5; }
/* À l'écran, les grands états défilent plutôt que de tasser les colonnes.
   À l'impression, le retour à la ligne reste autorisé pour tenir sur la page. */
@media screen {
    .tableau-defilant > .table > thead th,
    .tableau-defilant > .table > tbody td { white-space: nowrap; }
}
.num { text-align: right; white-space: nowrap; }
/* Valeur chiffrée qui ne doit jamais être coupée en fin de ligne. */
.insecable { white-space: nowrap; }
th.triable { cursor: pointer; user-select: none; position: relative; }
th.triable::after { content: " \F0DC"; font-family: bootstrap-icons; opacity: .35; font-size: .7rem; }
th.triable:hover { color: #fff !important; }
th.triable:hover::after { opacity: .8; }
th.tri-asc::after { content: " \F235"; opacity: 1; color: var(--or-400); }
th.tri-desc::after { content: " \F229"; opacity: 1; color: var(--or-400); }

/* Ligne masquée par la recherche + surlignage des correspondances */
mark.surlignage { background: #fdf1c7; color: inherit; padding: 0 .1em; border-radius: .15em; }
.ligne-vide td { text-align: center; color: var(--gris-500); padding: 1.6rem .5rem; font-style: italic; }

/* ------------------------------------------------------------ Composants */
.btn {
    border-radius: var(--rayon-sm);
    font-size: .845rem;
    font-weight: 550;
    letter-spacing: -.005em;
    transition: transform .1s ease, box-shadow var(--transition), background var(--transition), color var(--transition);
}
.btn:active { transform: translateY(1px); }
.btn-mesp {
    background: linear-gradient(180deg, var(--mesp-600), var(--mesp-700));
    border-color: var(--mesp-700); color: #fff;
    box-shadow: var(--ombre-xs), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.btn-mesp:hover {
    background: linear-gradient(180deg, var(--mesp-700), var(--mesp-800));
    border-color: var(--mesp-800); color: #fff;
    box-shadow: 0 4px 14px rgba(15, 82, 82, .28);
}
.btn-or {
    background: linear-gradient(180deg, var(--or-400), var(--or-500));
    border-color: var(--or-500); color: #4a3a11;
    box-shadow: var(--ombre-xs), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.btn-or:hover { background: linear-gradient(180deg, var(--or-500), #a9863a); border-color: #a9863a; color: #33280b; }
.btn-outline-mesp { color: var(--mesp-700); border-color: var(--gris-300); background: #fff; }
.btn-outline-mesp:hover { background: var(--mesp-700); color: #fff; border-color: var(--mesp-700); box-shadow: 0 4px 14px rgba(15, 82, 82, .2); }

.badge { font-weight: 650; letter-spacing: .01em; }
.badge-grade {
    background: var(--mesp-100); color: var(--mesp-700); font-weight: 700;
    border: 1px solid var(--mesp-300);
    font-family: var(--police-mono); font-size: .68rem;
}
/* ------------------------------------------------------------------
   SIGNALEMENTS EN ROUGE
   Deux usages : les montants d'un plan de trésorerie déséquilibré
   (TOTAL CHARGES supérieur aux RESSOURCES, BESOIN de financement
   négatif) et les lignes d'une fiche de coordination qui viennent
   d'être modifiées et attendent leur confirmation. Dans les deux cas
   il ne s'agit que d'un habillage : aucun calcul n'est affecté.
   ------------------------------------------------------------------ */
.valeur-alerte {
    color: var(--danger) !important;
    font-weight: 700;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.ligne-modifiee > td,
.ligne-modifiee > td .text-muted,
.ligne-modifiee > td.num {
    color: var(--danger) !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.ligne-modifiee > td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.ligne-modifiee { background: #fdf4f3; }
.badge-modifiee {
    background: #fbeceb; color: var(--danger); border: 1px solid #eec4c0;
    font-weight: 700; font-size: .66rem;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

.badge-statut-OUVERTE { background: #eaf1f7; color: var(--info); border: 1px solid #bcd4e6; }
.badge-statut-CALCULEE { background: var(--or-100); color: #8a6d20; border: 1px solid #e3cd90; }
.badge-statut-CLOTUREE { background: #e5f4ec; color: var(--succes); border: 1px solid #a9d8bf; }

.form-label { font-weight: 650; font-size: .78rem; color: var(--gris-700); margin-bottom: .28rem; letter-spacing: .01em; }
.form-control, .form-select {
    border-radius: var(--rayon-sm);
    border-color: var(--gris-300);
    font-size: .875rem;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.form-control:hover:not(:focus), .form-select:hover:not(:focus) { border-color: var(--gris-400); }
.form-control:focus, .form-select:focus {
    border-color: var(--mesp-500);
    box-shadow: var(--ombre-focus);
}
.form-control::placeholder { color: var(--gris-400); }
.input-group-text { background: var(--gris-50); border-color: var(--gris-300); color: var(--gris-500); }
.champ-court { max-width: 92px; }

/* Champs recalcules automatiquement lors de la saisie des presences */
.champ-calcule {
    background: var(--or-050, #fff8e6) !important;
    border-color: var(--or-500) !important;
    font-weight: 700;
}

.nav-onglets .nav-link { color: var(--gris-500); font-weight: 650; font-size: .85rem; border: 0; border-bottom: 2px solid transparent; transition: all var(--transition); }
.nav-onglets .nav-link:hover { color: var(--mesp-700); border-bottom-color: var(--gris-300); }
.nav-onglets .nav-link.active { color: var(--mesp-700); border-bottom-color: var(--or-500); background: transparent; }

.dropdown-menu {
    border: 1px solid var(--gris-200); border-radius: var(--rayon);
    box-shadow: var(--ombre-lg); padding: .35rem; font-size: .865rem;
}
.dropdown-item { border-radius: var(--rayon-xs); padding: .42rem .6rem; }
.dropdown-item:hover { background: var(--mesp-50); color: var(--mesp-800); }
.dropdown-header { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--gris-500); font-weight: 700; }

.alert { border: 1px solid transparent; border-radius: var(--rayon); font-size: .865rem; }
.alert-success { background: #eaf6f0; border-color: #b6ddc9; color: #12603f; }
.alert-danger { background: #fbeceb; border-color: #f0c5c1; color: #8f2f28; }
.alert-warning { background: var(--or-100); border-color: #e8d59f; color: #7c5f14; }
.alert-info { background: #eef4f9; border-color: #c6d9e8; color: #21506f; }

.progress { background: var(--gris-100); border-radius: 20px; }
.progress-bar { background: linear-gradient(90deg, var(--mesp-500), var(--mesp-600)); }

/* Notifications flottantes */
.pile-notifications {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 1090;
    display: flex; flex-direction: column; gap: .5rem;
    max-width: min(360px, calc(100vw - 2rem));
}
.notification {
    display: flex; align-items: flex-start; gap: .6rem;
    background: #fff; color: var(--gris-700);
    border: 1px solid var(--gris-200); border-left: 3px solid var(--mesp-500);
    border-radius: var(--rayon-sm); box-shadow: var(--ombre-lg);
    padding: .6rem .75rem; font-size: .84rem;
    animation: notif-entree .3s cubic-bezier(.2, .8, .2, 1) both;
}
.notification.sortie { animation: notif-sortie .25s ease forwards; }
.notification i { font-size: 1rem; line-height: 1.35; }
.notification.succes { border-left-color: var(--succes); } .notification.succes i { color: var(--succes); }
.notification.erreur { border-left-color: var(--danger); } .notification.erreur i { color: var(--danger); }
.notification.info i { color: var(--mesp-600); }
@keyframes notif-entree { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes notif-sortie { to { opacity: 0; transform: translateX(24px); } }

/* Palette de commandes (Ctrl + K) */
.voile-palette {
    position: fixed; inset: 0; z-index: 1080;
    background: rgba(6, 43, 43, .45);
    backdrop-filter: blur(3px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 8vh 1rem 1rem;
    animation: fondu .16s ease both;
}
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
.palette {
    width: 100%; max-width: 560px;
    background: #fff; border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-lg); overflow: hidden;
    animation: palette-entree .22s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes palette-entree { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: none; } }
.palette .champ-palette {
    display: flex; align-items: center; gap: .6rem;
    padding: .8rem 1rem; border-bottom: 1px solid var(--gris-200);
}
.palette .champ-palette i { color: var(--gris-400); font-size: 1.05rem; }
.palette .champ-palette input {
    border: 0; outline: 0; width: 100%; font-size: .98rem;
    font-family: var(--police-texte); color: var(--gris-900);
}
.palette .resultats { max-height: 52vh; overflow-y: auto; padding: .35rem; }
.palette .resultats .entree {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem .7rem; border-radius: var(--rayon-sm);
    color: var(--gris-700); text-decoration: none; font-size: .885rem;
    cursor: pointer;
}
.palette .resultats .entree i { color: var(--mesp-600); width: 1.2rem; text-align: center; }
.palette .resultats .entree .groupe { margin-left: auto; font-size: .68rem; color: var(--gris-400); text-transform: uppercase; letter-spacing: .07em; }
.palette .resultats .entree.survol, .palette .resultats .entree:hover { background: var(--mesp-50); color: var(--mesp-900); }
.palette .aucun { padding: 1.4rem; text-align: center; color: var(--gris-500); font-size: .86rem; }
.palette .pied-palette {
    display: flex; gap: 1rem; justify-content: center;
    padding: .5rem; border-top: 1px solid var(--gris-200);
    background: var(--gris-50); font-size: .7rem; color: var(--gris-500);
}
.palette .pied-palette kbd {
    background: #fff; border: 1px solid var(--gris-200); border-bottom-width: 2px;
    color: var(--gris-500); border-radius: var(--rayon-xs);
    font-family: var(--police-mono); font-size: .66rem; padding: .02rem .28rem;
}

/* Retour en haut de page */
#retour-haut {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 1050;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--gris-200); background: #fff; color: var(--mesp-700);
    box-shadow: var(--ombre-md);
    display: grid; place-items: center;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: all var(--transition);
}
#retour-haut.visible { opacity: 1; visibility: visible; transform: none; }
#retour-haut:hover { background: var(--mesp-700); color: #fff; border-color: var(--mesp-700); }

/* Apparition progressive des blocs */
.animer.vue { animation: monter .45s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes monter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    .animer, .animer.vue { opacity: 1; transform: none; animation: none !important; }
}

/* ------------------------------------------------------------ Documents imprimables */
.document {
    background: #fff;
    padding: 1.6rem 1.8rem;
    border: 1px solid var(--gris-200);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-md);
}
.entete-document { text-align: center; line-height: 1.35; }
.entete-document .titre-doc-conteneur { text-align: center; }
.entete-document .bandeau-officiel {
    display: flex; align-items: center; justify-content: center;
    gap: 1.1rem;
    max-width: 900px; margin: 0 auto;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--gris-200);
}
.entete-document .bandeau-officiel .mentions { flex: 1 1 auto; min-width: 0; }
.entete-document .logo-doc {
    flex: 0 0 auto;
    width: 82px; height: auto;
    object-fit: contain;
}
.entete-document .logo-doc-espaceur { flex: 0 0 auto; width: 82px; display: block; }
.entete-document .organisation {
    font-weight: 700; font-size: .84rem; text-transform: uppercase;
    /* La denomination complete est longue : l'espacement des mots est
       legerement elargi pour qu'aucun mot ne paraisse colle au suivant. */
    letter-spacing: 0; word-spacing: .12em; line-height: 1.35;
}
.entete-document .sigle { font-size: .8rem; font-style: italic; }
.entete-document .titre-doc {
    margin-top: .9rem; font-weight: 800;
    font-size: clamp(.78rem, .5rem + 1.1vw, 1.02rem);
    max-width: 100%; overflow-wrap: break-word;
    text-transform: uppercase; letter-spacing: .02em;
    border-top: 2px solid var(--mesp-800); border-bottom: 2px solid var(--mesp-800);
    display: inline-block; padding: .3rem 1.1rem;
}
.signatures { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.6rem; }
.signatures .bloc { text-align: center; flex: 1; font-size: .8rem; }
.signatures .bloc .nom { font-weight: 700; border-top: 1px solid #333; padding-top: .3rem; margin-top: 2.6rem; }
/* Signature unique (états du module PTR) : bloc centré, largeur maîtrisée. */
.signatures.signature-unique { justify-content: center; }
.signatures.signature-unique .bloc { flex: 0 1 auto; min-width: 260px; max-width: 380px; }

/* Signataire centré ajouté SOUS la ligne de signatures (décision de la
   Direction Financière sur une demande de fonds instruite par la DRH). */
.signatures.signature-centrale { justify-content: center; margin-top: 1.6rem; }
.signatures.signature-centrale .bloc { flex: 0 1 auto; min-width: 250px; max-width: 360px; }
.signatures.signature-centrale .mention-visa {
    font-size: .72rem; font-weight: 600; color: #6c757d; text-transform: uppercase;
    letter-spacing: .02em; margin-bottom: .2rem;
}
.signatures.signature-centrale .bloc .nom { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   Colonnes ajustées au contenu
   --------------------------------------------------------------------------
   Une colonne portant « colonne-ajustee » (en-tête) et « cellule-ajustee »
   (cellules du corps) se règle sur les valeurs réellement saisies au lieu
   d'occuper toute la place disponible. La largeur reste souple : elle suit le
   contenu jusqu'à un plafond raisonnable, au-delà duquel les libellés
   exceptionnellement longs se replient sur plusieurs lignes plutôt que
   d'élargir la colonne pour tout le tableau. Disposition purement
   typographique : aucune donnée ni aucun calcul n'en dépend.
   -------------------------------------------------------------------------- */
.table th.colonne-ajustee,
.table td.cellule-ajustee {
    max-width: 250px;
    white-space: normal;
    overflow-wrap: break-word;
}
.table td.cellule-ajustee > div { white-space: normal; }
/* Dans un tableau défilant, les autres colonnes restent insécables ; les
   colonnes ajustées font exception pour rester compactes. */
@media screen {
    .tableau-defilant > .table > thead th.colonne-ajustee,
    .tableau-defilant > .table > tbody td.cellule-ajustee,
    .tableau-defilant > .table > tbody td.cellule-ajustee > div { white-space: normal; }
}

/* --------------------------------------------------------------------------
   Largeurs de colonnes adaptatives des états
   --------------------------------------------------------------------------
   Les états comportaient des largeurs fixes en pixels : sur un écran étroit ou
   sur le papier, les colonnes de chiffres conservaient leur place tandis que la
   colonne de libellés était écrasée sur deux ou trois lignes. Les classes
   ci-dessous décrivent la NATURE de chaque colonne ; la largeur est ensuite
   calculée par le navigateur.

   Le ressort du procédé est « width: 1% » : associé à la disposition
   automatique du tableau, il demande à une colonne de se réduire à la largeur
   de son contenu. Toute la place ainsi libérée revient aux colonnes de texte,
   qui n'ont pas de largeur imposée. La mise en page suit donc les valeurs
   réellement saisies, à l'écran comme à l'impression, sans qu'aucun libellé ne
   soit tronqué.

     col-numero   numéro d'ordre                → largeur minimale
     col-code     code, compte comptable        → largeur du contenu
     col-mesure   NB, PART, TAUX, ÉTAT, STATUT  → largeur du contenu
     col-montant  montants en francs congolais  → largeur du contenu, aligné à droite
     col-actions  boutons (jamais imprimés)     → largeur du contenu
     col-libelle  colonne principale de texte   → souple, prend la place restante
     col-texte    texte secondaire              → souple, plafonnée

   Disposition purement typographique : aucune valeur, aucun total ni aucun
   calcul de l'application n'en dépend.
   -------------------------------------------------------------------------- */
.table th.col-numero,  .table td.col-numero,
.table th.col-code,    .table td.col-code,
.table th.col-mesure,  .table td.col-mesure,
.table th.col-montant, .table td.col-montant,
.table th.col-actions, .table td.col-actions {
    width: 1%;
    white-space: nowrap;
}
.table th.col-numero,  .table td.col-numero  { min-width: 2.3rem; text-align: center; }
.table th.col-code,    .table td.col-code    { text-align: center; }
.table th.col-mesure,  .table td.col-mesure  { text-align: center; }
.table th.col-montant, .table td.col-montant { text-align: right; }
.table th.col-actions, .table td.col-actions { text-align: center; }
/* L'en-tête d'une colonne de chiffres peut être plus long que les valeurs
   qu'elle reçoit : il se replie afin de ne pas élargir toute la colonne, sans
   pour autant descendre sous une largeur plancher qui le découperait mot à
   mot sur quatre lignes. */
.table th.col-montant, .table th.col-mesure { min-width: 5rem; }
.table th.col-montant, .table th.col-mesure {
    white-space: normal;
    overflow-wrap: break-word;
}
/* Colonnes de texte : elles absorbent l'espace disponible et se replient au
   lieu de repousser les colonnes voisines hors de la feuille. */
.table th.col-libelle, .table td.col-libelle,
.table th.col-texte,   .table td.col-texte {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    /* Pas de césure automatique : dans une colonne étroite elle découpait les
       mots (« Admi-nistra-tion ») et rendait les libellés illisibles. */
    hyphens: manual;
}
/* « width: 100% » ne rend pas la colonne large de toute la table : dans un
   tableau à disposition automatique, cette valeur signifie « attribue-moi tout
   l'espace que les autres colonnes n'utilisent pas ». La colonne principale
   récupère ainsi la place laissée par les colonnes de chiffres, au lieu que
   cet excédent soit réparti au hasard sur les colonnes secondaires. */
.table th.col-libelle, .table td.col-libelle { width: 100%; min-width: 12rem; }
/* Colonne de texte secondaire (type de dépense, entité rattachée, feuille
   importée…). Son plancher est exprimé par « min-width » et non par « width » :
   face à une colonne principale qui réclame tout l'espace disponible, seule une
   largeur minimale est réellement garantie par le navigateur. Sans ce plancher,
   la colonne se réduisait à la largeur du mot le plus long et son contenu se
   repliait sur quatre ou cinq lignes. */
.table th.col-texte,   .table td.col-texte   { min-width: 10rem; max-width: 16rem; }
.table td.col-libelle > div, .table td.col-texte > div { white-space: normal; }
/* Dans un tableau défilant, les colonnes de texte gardent leur repli : sans
   cela la règle générale « nowrap » les étirerait sur une seule ligne. */
@media screen {
    .tableau-defilant > .table > thead th.col-libelle,
    .tableau-defilant > .table > thead th.col-texte,
    .tableau-defilant > .table > thead th.col-montant,
    .tableau-defilant > .table > thead th.col-mesure,
    .tableau-defilant > .table > tbody td.col-libelle,
    .tableau-defilant > .table > tbody td.col-texte,
    .tableau-defilant > .table > tbody td.col-libelle > div,
    .tableau-defilant > .table > tbody td.col-texte > div { white-space: normal; }
}

/* ============================================================
   « Aller à… » (Ctrl + K) — recherche d'une rubrique dans le PTR
   d'une entité opérationnelle. Champ d'aide à la navigation : il ne
   filtre que l'affichage, jamais les données ni les totaux.
   ============================================================ */
.aller-a-rubrique { min-width: 260px; flex: 1 1 320px; max-width: 460px; }
.champ-aller-a { position: relative; display: flex; align-items: center; }
.champ-aller-a > .bi-search {
    position: absolute; left: .6rem; color: var(--gris-500);
    font-size: .82rem; pointer-events: none;
}
.champ-aller-a > .form-control {
    padding-left: 1.9rem; padding-right: 4.4rem; border-radius: var(--rayon-sm);
}
.champ-aller-a > .form-control:focus {
    border-color: var(--mesp-500);
    box-shadow: 0 0 0 .18rem rgba(13, 90, 74, .16);
}
.champ-aller-a > kbd {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: var(--gris-100); color: var(--gris-600);
    border: 1px solid var(--gris-300); border-radius: 4px;
    font-size: .62rem; line-height: 1; padding: .18rem .28rem;
    box-shadow: none; pointer-events: none;
}
.champ-aller-a > kbd:nth-of-type(1) { right: 2.05rem; }
.champ-aller-a > kbd:nth-of-type(2) { right: .5rem; }
.champ-aller-a > .form-control:focus ~ kbd { opacity: 0; }
.aller-a-rubrique kbd {
    background: var(--gris-100); color: var(--gris-600);
    border: 1px solid var(--gris-300); border-radius: 4px;
    font-size: .62rem; padding: .1rem .24rem; box-shadow: none;
}
/* Ligne atteinte par la recherche : surlignage temporaire. */
.table > tbody > tr.ligne-atteinte > * {
    background-color: var(--mesp-100) !important;
    box-shadow: inset 0 0 0 9999px rgba(13, 90, 74, .06);
}
.table > tbody > tr.ligne-atteinte > td:first-child { box-shadow: inset 3px 0 0 var(--mesp-500); }
@media (prefers-reduced-motion: no-preference) {
    .table > tbody > tr.ligne-atteinte > * { transition: background-color .25s ease; }
}

.bulletin-ligne { display: flex; justify-content: space-between; padding: .34rem .55rem; border-bottom: 1px dashed var(--gris-200); }
.bulletin-ligne.total { background: var(--mesp-100); font-weight: 700; border-bottom: 0; border-radius: var(--rayon-xs); }

@media print {
    .barre-laterale, .barre-haute, .sans-impression, .alert-dismissible .btn-close,
    #retour-haut, .pile-notifications, .voile-palette, #barre-chargement,
    .indice-defilement, .voile-mobile { display: none !important; }
    .enveloppe, .zone-principale { display: block; }
    .contenu { padding: 0; }
    body { background: #fff; font-size: 10.5pt; }
    /* Les états occupent toute la largeur utile de la page, quelle que soit
       la taille de la fenêtre au moment de l'impression. */
    html, body, .enveloppe, .zone-principale, .contenu,
    .document, .tableau-defilant, .tableau-defilant > .table {
        width: 100% !important; max-width: 100% !important;
        margin-left: 0 !important; margin-right: 0 !important;
        float: none !important;
    }
    .document { border: 0; box-shadow: none; padding: 0; border-radius: 0; }
    .card { border: 0; box-shadow: none; }
    .container, .container-fluid, .container-lg, .container-xl { max-width: none !important; padding: 0 !important; }
    .table { font-size: 8.4pt; }
    .table > thead th { background: #0a3d3d !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .table > tbody tr:hover td:first-child { box-shadow: none; }
    /* ==========================================================
       RÈGLE DE SÉCURITÉ CONTRE LES TEXTES SUPERPOSÉS À L'IMPRESSION
       ----------------------------------------------------------
       Un conteneur qui garde une hauteur maximale sur le papier ne
       réserve dans le flux que cette hauteur : tout ce qui dépasse est
       dessiné par-dessus les éléments suivants (en-tête de la feuille
       suivante, notes, feuille de clôture, signature). C'était l'origine
       des chevauchements constatés sur les états du PTR. Toute limite de
       hauteur et tout défilement sont donc levés sans exception, avec
       « !important » pour qu'aucune autre règle ne puisse les rétablir.
       ========================================================== */
    .tableau-defilant, .table-responsive, .zone-defilante,
    .contenu, .document, .card, .card-body, .tab-content, .tab-pane {
        max-height: none !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
    /* Un en-tête « collant » ou une cellule figée reste accroché au bord de
       la zone visible : sur le papier il se retrouvait imprimé par-dessus
       l'en-tête du document. Toutes les parties du tableau reviennent donc
       dans le flux normal ; les en-têtes de colonnes sont alors simplement
       répétés en haut de chaque feuille (voir « table-header-group »). */
    .tableau-defilant, .tableau-defilant > .table,
    .table, .table > thead, .table > tbody, .table > tfoot,
    .table > thead > tr, .table > tbody > tr, .table > tfoot > tr,
    .table > thead > tr > th, .table > thead > tr > td,
    .table > tbody > tr > th, .table > tbody > tr > td,
    .table > tfoot > tr > th, .table > tfoot > tr > td {
        position: static !important;
        top: auto !important; bottom: auto !important;
        left: auto !important; right: auto !important;
        transform: none !important;
        z-index: auto !important;
    }
    /* Les blocs qui composent un état (bandeaux, tableaux, notes, feuille de
       clôture) reviennent eux aussi dans le flux : le calque « z-index » utilisé
       à l'écran pour passer au-dessus du filigrane n'a plus lieu d'être et
       empêchait la pagination de séparer proprement les blocs. Le filigrane,
       lui, conserve son ancrage sur « .document » resté positionné. */
    .document > *:not(.filigrane-logo) {
        position: static !important;
        z-index: auto !important;
    }
    /* Les ombres, filtres et confinements créent des calques qui faussent la
       pagination : ils sont neutralisés sur le papier. */
    .document, .tableau-defilant, .table, .card {
        filter: none !important;
        box-shadow: none !important;
        contain: none !important;
        will-change: auto !important;
    }
    /* Décorations d'écran positionnées en absolu : elles se détacheraient de
       leur carte au moment de la pagination et viendraient tacher le texte. */
    .kpi::after, .kpi::before, .carte-connexion .panneau-gauche::after,
    .barre-laterale .nav-link.active::before, th.triable::after {
        display: none !important; content: none !important;
    }
    /* Les tableaux reprennent leur mise en page naturelle : la largeur des
       colonnes se calcule sur l'ensemble des lignes de la feuille. */
    .table { table-layout: auto !important; border-collapse: collapse !important; }
    /* Les colonnes se replient au lieu de sortir de la feuille ; les montants
       et les numéros de compte restent d'un seul tenant. */
    .table > thead th, .table > tbody td, .table > tfoot td {
        white-space: normal !important; overflow-wrap: break-word; word-break: normal;
    }
    .table .num, .table code, .table td.num, .table th.num,
    .table .insecable, .table .badge, .table .badge-grade { white-space: nowrap !important; }
    /* En-tête de tableau et totaux répétés sur chaque feuille d'un état long. */
    .table > thead { display: table-header-group; }
    .table > tfoot { display: table-footer-group; }
    .table > tbody tr, .table > thead tr, .table > tfoot tr,
    .signatures, .entete-document,
    .bulletin-ligne, .carte-indicateur { page-break-inside: avoid; break-inside: avoid; }
    /* Un titre ne se sépare jamais de ce qu'il annonce. */
    h1, h2, h3, h4, h5, h6, .titre-doc, .titre-cloture {
        page-break-after: avoid; break-after: avoid;
        page-break-inside: avoid; break-inside: avoid;
    }
    /* Densité adaptée au nombre de colonnes de l'état. */
    .impr-dense .table { font-size: 7.3pt; }
    .impr-dense .table > :not(caption) > * > * { padding: .2rem .22rem; }
    .impr-tres-dense .table { font-size: 6.2pt; letter-spacing: -.01em; }
    .impr-tres-dense .table > :not(caption) > * > * { padding: .13rem .14rem; }
    .impr-dense .table code, .impr-tres-dense .table code {
        font-size: .95em; padding: 0; background: transparent;
    }
    .impr-dense .text-muted, .impr-tres-dense .text-muted { font-size: .92em; }

    /* ------------------------------------------------------------------
       LIGNES DES ÉTATS EN SORTIE
       Le gris clair de Bootstrap s'éclaircit encore à l'impression : les
       filets deviennent à peine visibles sur papier. Tous les tableaux d'un
       état imprimé reçoivent donc un filet noir franc, épaissi sur le
       pourtour, sous l'en-tête et au-dessus des totaux. L'affichage à
       l'écran n'est pas touché : la règle vit dans « @media print ».
       ------------------------------------------------------------------ */
    .document .table,
    .document .table > thead > tr > th, .document .table > thead > tr > td,
    .document .table > tbody > tr > th, .document .table > tbody > tr > td,
    .document .table > tfoot > tr > th, .document .table > tfoot > tr > td {
        border-color: #000 !important;
    }
    .document .table > :not(caption) > * > * {
        border-width: .75pt !important; border-style: solid !important;
    }
    /* Pourtour du tableau, trait sous les intitulés de colonnes et trait au
       dessus de la ligne des totaux : nettement plus épais. */
    .document .table.table-bordered { border: 1.4pt solid #000 !important; }
    .document .table > thead > tr:last-child > th,
    .document .table > thead > tr:last-child > td { border-bottom-width: 1.4pt !important; }
    .document .table > tfoot > tr:first-child > th,
    .document .table > tfoot > tr:first-child > td { border-top-width: 1.4pt !important; }
    /* Les cellules d'en-tête restent en fond foncé : le texte blanc et le
       filet noir sont conservés à l'impression. */
    .document .table > thead th { border-color: #000 !important; }
    /* Un tableau sans la classe « table-bordered » reçoit malgré tout ses
       filets horizontaux, faute de quoi les lignes se confondent. */
    .document .table:not(.table-bordered) > tbody > tr > th,
    .document .table:not(.table-bordered) > tbody > tr > td {
        border-top: .75pt solid #000 !important; border-bottom: .75pt solid #000 !important;
    }
    /* Les filets d'un texte de mention ou d'un bloc de signature ne sont pas
       concernés : seules les grilles de données sont renforcées. */
    .document .table.sans-filets, .document .table.sans-filets > :not(caption) > * > * {
        border-color: transparent !important; border-width: 0 !important;
    }
    .animer, .animer.vue { opacity: 1 !important; transform: none !important; animation: none !important; }
    .kpi::before, .kpi::after { display: none; }
    .entete-document .logo-doc-espaceur { width: 62px; }
    .entete-document .logo-doc {
        width: 62px !important;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .entete-document .titre-doc { font-size: 10.5pt; }
    .entete-document .bandeau-officiel { page-break-inside: avoid; break-inside: avoid; }
    .filigrane-logo { display: flex !important; }
    .seulement-impression { display: block !important; }
    .form-control, .form-select {
        border: 0 !important; background: transparent !important;
        padding: 0 !important; box-shadow: none !important; text-align: center;
    }
    /* Chaque liste de virement commence sur une nouvelle page. */
    .saut-page { page-break-before: always; break-before: page; }
    /* Colonnes ajustées : sur le papier la largeur reste minimale et les
       libellés très longs se replient pour ne jamais sortir de la feuille. */
    .table th.colonne-ajustee, .table td.cellule-ajustee {
        width: 1%; max-width: 62mm; white-space: normal !important;
    }
    /* ------------------------------------------------------------------
       Largeurs de colonnes sur le papier
       ------------------------------------------------------------------
       Même principe qu'à l'écran, exprimé en millimètres : les colonnes de
       chiffres, de codes et d'indicateurs se réduisent à la largeur de leur
       contenu, et toute la place restante revient aux libellés. Les états
       tiennent ainsi dans la largeur de la feuille sans qu'aucun texte ne soit
       tronqué ni écrasé sur plusieurs lignes inutiles.
       ------------------------------------------------------------------ */
    .table th.col-numero,  .table td.col-numero,
    .table th.col-code,    .table td.col-code,
    .table th.col-mesure,  .table td.col-mesure,
    /* Un intitulé de colonne de montants ne doit pas se replier mot par mot :
       une largeur plancher lui est réservée sur le papier, sauf dans les
       tranches de la matrice où chaque millimètre compte. */
    .table th.col-montant { min-width: 20mm; }
    .tranche-matrice .table th.col-montant { min-width: 0; }
    .table th.col-montant, .table td.col-montant {
        width: 1% !important;
        white-space: nowrap !important;
    }
    .table th.col-numero,  .table td.col-numero  { min-width: 0 !important; }
    .table th.col-montant, .table th.col-mesure  { white-space: normal !important; }
    /* Sur le papier, la place restante est partagée entre les colonnes de
       texte à proportion de la longueur de leurs valeurs, chacune disposant
       d'un plancher : la colonne principale reste la plus large sans pour
       autant réduire les colonnes secondaires à la largeur d'un mot. */
    .table th.col-libelle, .table td.col-libelle {
        width: auto !important; min-width: 55mm !important; max-width: none;
        white-space: normal !important; overflow-wrap: break-word;
    }
    .table th.col-texte, .table td.col-texte {
        width: auto !important; min-width: 32mm !important; max-width: 45mm;
        white-space: normal !important; overflow-wrap: break-word;
    }
    /* Les colonnes de boutons portent déjà « sans-impression » : elles sont
       retirées de la feuille en tête comme en corps de tableau, ce qui évite
       tout décalage entre les en-têtes et les cellules. */
    /* Sur les états très larges (matrice du plan global), les libellés
       disposent d'un plafond plus bas pour laisser voir toutes les colonnes. */
    .impr-dense .table th.col-libelle, .impr-dense .table td.col-libelle {
        min-width: 38mm !important; max-width: 52mm;
    }
    .impr-tres-dense .table th.col-libelle, .impr-tres-dense .table td.col-libelle {
        min-width: 30mm !important; max-width: 42mm;
    }
    .impr-dense .table th.col-texte, .impr-dense .table td.col-texte {
        min-width: 22mm !important; max-width: 30mm;
    }
    .impr-tres-dense .table th.col-texte, .impr-tres-dense .table td.col-texte {
        min-width: 18mm !important; max-width: 26mm;
    }
    /* ------------------------------------------------------------------
       Feuille de clôture des états du PTR : « Fait à … », signature du
       Secrétaire Exécutif National et pied du document.

       La feuille s'ouvre toujours sur une nouvelle page (break-before) et sa
       hauteur est exprimée en « vh » : à l'impression, l'unité vh correspond à
       la hauteur utile de la feuille réellement employée par l'imprimante.
       Elle s'adapte donc au format (A4 paysage ou portrait), aux marges
       choisies dans la boîte de dialogue d'impression et à la réduction
       automatique appliquée par le navigateur aux états très larges.
       Le contenu est ensuite poussé vers le bas par « margin-top: auto » :
       la mention « Secrétaire Exécutif National », la date et le pied du
       document se trouvent ainsi TOUJOURS au bas de la DERNIÈRE feuille,
       quel que soit le nombre de feuilles de l'état.
       94 vh (et non 100 vh) laisse la marge d'arrondi qui évite qu'une feuille
       blanche ne soit ajoutée derrière la feuille de clôture.
       ------------------------------------------------------------------ */
    .bloc-fin-document { page-break-inside: avoid; break-inside: avoid; }
    .feuille-signature {
        page-break-before: always; break-before: page;
        page-break-inside: avoid; break-inside: avoid;
        display: flex; flex-direction: column;
    }
    /* La hauteur réservée à la feuille de clôture est exprimée en millimètres,
       et non en « vh » : l'unité de fenêtre correspond à la hauteur de
       l'affichage et non à celle du papier, ce qui repoussait la signature sur
       une feuille supplémentaire presque vide. Les valeurs ci-dessous
       correspondent à la hauteur utile d'une feuille A4, marges de 10 mm
       déduites, dans chacune des deux orientations. */
    @media print and (orientation: landscape) {
        .feuille-signature { min-height: 168mm; }
    }
    @media print and (orientation: portrait) {
        .feuille-signature { min-height: 255mm; }
    }
    /* Certains moteurs d'impression rapportent l'orientation de la fenetre et
       non celle du papier : la hauteur utile est donc egalement declaree par la
       classe du corps, que chaque etat paysage porte explicitement. */
    body.impr-paysage .feuille-signature { min-height: 168mm; }
    .feuille-signature .bloc-fin-document { margin-top: auto; }
    .feuille-signature .pied-document { margin-bottom: 0; }
    /* Rappel de l'en-tête officiel en tête de la feuille de clôture. */
    .feuille-signature .entete-cloture {
        display: flex; align-items: center; gap: 10px;
        padding-bottom: 6px; margin-bottom: 0;
        border-bottom: 1.5px solid #0f6b6b;
    }
    .feuille-signature .logo-cloture { height: 34px; width: auto; }
    .feuille-signature .mentions-cloture { flex: 1 1 auto; line-height: 1.25; }
    .feuille-signature .mentions-cloture .sigle { font-weight: 600; font-size: 9pt; }
    .feuille-signature .mentions-cloture .coordination {
        font-size: 7.5pt; text-transform: uppercase; color: #4a4a4a;
    }
    .feuille-signature .mentions-cloture .titre-cloture {
        font-size: 8pt; font-weight: 600; color: #0f6b6b; margin-top: 2px;
    }
    .feuille-signature .mention-cloture {
        font-size: 7.5pt; font-style: italic; color: #4a4a4a; white-space: nowrap;
    }
    /* ------------------------------------------------------------------
       Récapitulatifs reportés sur la feuille de clôture : rappel du
       « TOTAL CDF », « VENTILATION PAR TYPE DE DÉPENSE » et paragraphe
       « Arrêté le présent plan… ». Chaque bloc reste d'un seul tenant et
       ne paraît que sur cette dernière feuille.
       ------------------------------------------------------------------ */
    .feuille-signature .recapitulatifs-cloture { margin-top: 8mm; }
    .feuille-signature .bloc-recapitulatif {
        page-break-inside: avoid; break-inside: avoid;
        margin-bottom: 5mm;
    }
    .feuille-signature .bloc-recapitulatif:last-child { margin-bottom: 0; }
    /* Les récapitulatifs de clôture ne comptent que deux ou trois colonnes :
       ils gardent une taille de caractères confortable, même lorsque l'état
       lui-même est imprimé en mode dense à cause de ses nombreuses colonnes. */
    .feuille-signature .bloc-recapitulatif { font-size: 9.5pt; }
    /* Feuille de clôture resserrée : réservée aux états dont les
       récapitulatifs comptent de nombreuses lignes, afin que la signature
       reste sur la même feuille que les totaux. */
    .feuille-signature.cloture-dense .recapitulatifs-cloture { margin-top: 4mm; }
    .feuille-signature.cloture-dense .bloc-recapitulatif {
        font-size: 8pt; margin-bottom: 3mm;
    }
    .feuille-signature.cloture-dense .bloc-recapitulatif > .table {
        font-size: 7.6pt !important;
    }
    .feuille-signature.cloture-dense .bloc-recapitulatif > .table > :not(caption) > * > * {
        padding-top: .12rem !important; padding-bottom: .12rem !important;
    }
    .feuille-signature.cloture-dense .signatures { margin-top: .5rem; }
    .feuille-signature.cloture-dense .signatures .bloc .nom { margin-top: .9rem; }
    .feuille-signature.cloture-dense .pied-document { margin-top: .4rem; }
    .feuille-signature .bloc-recapitulatif > .table { width: auto !important; font-size: 9pt !important; }
    .feuille-signature .bloc-recapitulatif > .table > :not(caption) > * > * {
        padding: .18rem .45rem !important;
    }
    .feuille-signature .bloc-recapitulatif > .table th,
    .feuille-signature .bloc-recapitulatif > .table td { white-space: normal; }
    /* Les éléments réservés au papier reprennent leur affichage normal. */
    .impression-seule { display: block !important; }
    table.impression-seule { display: table !important; }
    tr.impression-seule { display: table-row !important; }
    /* ------------------------------------------------------------------
       Matrice du plan global imprimée par tranches de colonnes
       ------------------------------------------------------------------
       La matrice complète se parcourt par défilement à l'écran ; sur le papier
       elle est remplacée par des groupes de colonnes successifs, chacun tenant
       dans la largeur de la feuille. */
    .matrice-ecran { display: none !important; }
    .tranche-matrice { break-inside: auto; page-break-inside: auto; }
    .tranche-matrice + .tranche-matrice { margin-top: 4mm; }
    .intitule-tranche {
        margin: 0 0 1.5mm;
        font-size: 7pt; font-weight: 600; letter-spacing: .04em;
        text-transform: uppercase; color: var(--mesp-600);
        break-after: avoid; page-break-after: avoid;
    }
    @page { size: A4 landscape; margin: 10mm; }
}

/* Le rappel d'en-tête de la feuille de clôture n'existe que sur le papier :
   à l'écran, l'état conserve exactement sa présentation d'origine. */
@media screen {
    .entete-cloture { display: none; }
    /* Éléments destinés uniquement au papier : rappel du « TOTAL CDF » de la
       feuille de clôture, déjà visible au pied du tableau à l'écran. */
    .impression-seule { display: none !important; }
    /* Les tranches d'impression de la matrice n'existent pas à l'écran. */
    .matrice-impression { display: none !important; }
    /* À l'écran, les récapitulatifs de fin d'état restent présentés sous le
       tableau, comme auparavant. */
    .recapitulatifs-cloture { margin-top: 1rem; }
    .recapitulatifs-cloture .bloc-recapitulatif + .bloc-recapitulatif { margin-top: .75rem; }
}

/* Filigrane discret du logo sur les documents officiels */
.document { position: relative; }
.filigrane-logo {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    z-index: 0;
    opacity: .028;
}
.filigrane-logo img { width: 38%; max-width: 340px; height: auto; }
.seulement-impression { display: none; }
.pied-document {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    margin-top: 1.6rem; padding-top: .6rem;
    border-top: 1px solid var(--gris-200);
    font-size: .68rem; letter-spacing: .02em;
    color: var(--gris-500);
}
.pied-document .logo-pied { width: 22px; height: 22px; object-fit: contain; }
.entete-impression { margin-bottom: 1rem; }
.document > *:not(.filigrane-logo) { position: relative; z-index: 1; }

/* ------------------------------------------------------------ Responsive */
/* Deux indicateurs par ligne sur téléphone plutôt qu'une colonne unique. */
@media screen and (max-width: 767.98px) {
    .row > [class*="col-md-"]:has(> .card.kpi),
    .row > [class*="col-lg-"]:has(> .card.kpi),
    .row > [class*="col-md-"]:has(> .carte-indicateur) {
        flex: 0 0 auto; width: 50%;
    }
    .card.kpi .valeur { font-size: 1.15rem; }
    .card.kpi .icone { width: 36px; height: 36px; font-size: 1rem; }
    .card.kpi .card-body { padding: .7rem .75rem; gap: .6rem !important; }
}

/* États imprimables consultés sur petit écran */
@media screen and (max-width: 767.98px) {
    .document { padding: 1rem .8rem; }
    .entete-document .bandeau-officiel {
        flex-direction: column; gap: .5rem; text-align: center;
    }
    .entete-document .logo-doc { width: 58px; }
    .entete-document .logo-doc-espaceur { display: none; }
    .entete-document .organisation { font-size: .74rem; }
    .entete-document .sigle { font-size: .72rem; }
    .signatures { flex-direction: column; gap: 1.4rem; margin-top: 1.8rem; }
    .signatures .bloc .nom { margin-top: 1.6rem; }
    .signatures.signature-unique { flex-direction: row; justify-content: center; }
    .signatures.signature-unique .bloc { max-width: 60%; }
    .signatures.signature-centrale { flex-direction: row; justify-content: center; margin-top: 1.2rem; }
    .signatures.signature-centrale .bloc { max-width: 80%; }
    .tableau-defilant { max-height: 62vh; }
    .tableau-defilant > .table { font-size: .74rem; }
    .nav-onglets .nav-link { padding: .45rem .6rem; font-size: .8rem; }
    .pied-app { flex-direction: column; text-align: center; gap: .25rem !important; }
    .modal-body.row { --bs-gutter-y: .75rem; }
}

@media screen and (max-width: 575.98px) {
    .document { padding: .85rem .6rem; }
    .titre-doc { letter-spacing: 0; }
    .d-flex.flex-wrap.justify-content-end.gap-2 > .btn,
    .d-flex.flex-wrap.justify-content-end.gap-2 > a.btn { flex: 1 1 auto; }
    /* Les indicateurs restent sur deux colonnes : intitulé au-dessus de la valeur. */
    .card.kpi .card-body { flex-direction: column; align-items: flex-start !important; gap: .35rem !important; }
    .card.kpi .intitule { font-size: .62rem; letter-spacing: .05em; }
    .card.kpi .valeur { font-size: 1.02rem; }
}

@media screen and (max-width: 991.98px) {
    .barre-laterale {
        position: fixed; left: -280px; transition: left .25s ease; box-shadow: var(--ombre-lg);
    }
    .barre-laterale.ouverte { left: 0; }
    .voile-mobile { position: fixed; inset: 0; background: rgba(6, 43, 43, .45); z-index: 1025; backdrop-filter: blur(2px); }
    .barre-haute h1 { font-size: 1rem; }
    .contenu { padding: 1rem .85rem 2.5rem; }
    .table > :not(caption) > * > * { padding-top: .45rem; padding-bottom: .45rem; }
}

/* ------------------------------------------------------------ Divers */
.scroll-doux { scroll-behavior: smooth; }
.texte-mesp { color: var(--mesp-700); }
.texte-or { color: var(--or-500); }
.fond-mesp-clair { background: var(--mesp-100); }
.separateur-groupe td {
    background: linear-gradient(90deg, var(--mesp-800), var(--mesp-700)) !important;
    color: #fff !important; font-weight: 700; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .09em;
}
.pied-app {
    border-top: 1px solid var(--gris-200); background: #fff;
    padding: .7rem 1.25rem; font-size: .74rem; color: var(--gris-500);
}

/* ------------------------------------------------------------ Codes et monospace */
code, .table code {
    color: var(--mesp-700);
    background: var(--mesp-100);
    padding: .08rem .34rem;
    border-radius: var(--rayon-xs);
    font-family: var(--police-mono);
    font-size: .76rem;
    letter-spacing: -.02em;
}
.table code.copiable { cursor: copy; transition: all var(--transition); }
.table code.copiable:hover { background: var(--mesp-300); color: var(--mesp-900); }
.comptes-demo code { background: transparent; padding: 0; }

/* ------------------------------------------------------------ Colonne des noms (documents larges) */
#tab-feuille td:nth-child(3),
#tab-ipr td:nth-child(3),
#tab-presences td:nth-child(2),
#tab-bulletins td:nth-child(1) { min-width: 200px; }
#tab-feuille td:nth-child(3) strong,
#tab-ipr td:nth-child(3) strong,
#tab-presences td:nth-child(2) strong,
#tab-bulletins td:nth-child(1) strong { white-space: nowrap; }

/* ------------------------------------------------------------ Importation Excel */
.zone-depot {
    display: block; width: 100%; cursor: pointer; text-align: center;
    padding: 2.4rem 1.25rem;
    border: 2px dashed var(--mesp-300);
    border-radius: var(--rayon-md);
    background: linear-gradient(180deg, var(--mesp-50), #fff);
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.zone-depot:hover, .zone-depot.survol {
    border-color: var(--mesp-500);
    background: var(--mesp-100);
    transform: translateY(-1px);
}
.zone-depot > .bi { font-size: 2.4rem; color: var(--mesp-500); display: block; margin-bottom: .5rem; }
.zone-depot .titre-depot { font-weight: 700; color: var(--mesp-900); margin-bottom: .15rem; }
.zone-depot .nom-fichier {
    margin-top: .8rem; font-family: var(--police-mono); font-size: .78rem;
    color: var(--mesp-700); font-weight: 700;
}
.zone-depot.rempli { border-style: solid; border-color: var(--succes); background: #f2fbf6; }
.zone-depot.rempli > .bi { color: var(--succes); }

.carte-indicateur {
    text-align: center; padding: .85rem .5rem;
    border: 1px solid var(--gris-200); border-radius: var(--rayon-md);
    background: #fff; transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.carte-indicateur:hover { border-color: var(--mesp-300); box-shadow: var(--ombre-sm); transform: translateY(-2px); }
.carte-indicateur .icone { color: var(--mesp-500); font-size: 1.05rem; margin-bottom: .2rem; }
.carte-indicateur .valeur {
    font-size: 1.5rem; font-weight: 750; color: var(--mesp-900); line-height: 1.1;
    font-variant-numeric: tabular-nums lining-nums;
}
.carte-indicateur .libelle {
    font-size: .69rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--gris-500); font-weight: 700;
}


/* Respect des préférences d'accessibilité : pas d'animation du menu */
@media (prefers-reduced-motion: reduce) {
    .barre-laterale .sous-menu,
    .barre-laterale .entete-groupe .chevron { transition: none; }
}


/* =========================================================================
   Dossier administratif de l'agent
   Sous-titres de bloc, lignes répétables (diplômes, expériences, enfants),
   pièces jointes et photo de profil.
   ========================================================================= */

.sous-titre-bloc {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
    font-weight: 800; color: var(--mesp-700);
    padding-bottom: .3rem; margin-top: .35rem;
    border-bottom: 1px solid var(--gris-200);
}

.lignes-repetees { display: flex; flex-direction: column; gap: .55rem; }

.lignes-repetees:empty::before {
    content: "Aucune ligne pour le moment — cliquez sur le bouton + pour en ajouter une.";
    display: block; padding: .7rem .85rem; border-radius: var(--rayon-sm);
    border: 1px dashed var(--gris-300); background: var(--gris-50);
    color: var(--gris-500); font-size: .8rem;
}

.ligne-repetee {
    border: 1px solid var(--gris-200); border-left: 3px solid var(--mesp-300);
    border-radius: var(--rayon-sm); background: #fff;
    padding: .6rem .7rem .7rem; margin: 0;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.ligne-repetee:hover { border-color: var(--mesp-300); box-shadow: var(--ombre-xs); }
.ligne-repetee .form-label {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
    font-weight: 700; color: var(--gris-500); margin-bottom: .18rem;
}

.lien-piece {
    display: inline-flex; align-items: center; gap: .3rem; margin-top: .3rem;
    font-size: .72rem; font-weight: 700; color: var(--mesp-600);
    text-decoration: none; max-width: 100%; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.lien-piece:hover { color: var(--mesp-800); text-decoration: underline; }

.cadre-photo {
    width: 132px; height: 132px; border-radius: var(--rayon-sm);
    overflow: hidden; background: var(--gris-50);
    border: 1px solid var(--gris-200); box-shadow: var(--ombre-xs);
    display: grid; place-items: center;
}
.cadre-photo img { width: 100%; height: 100%; object-fit: cover; }
.cadre-photo .sans-photo { color: var(--gris-300); font-size: 3rem; line-height: 1; }

.photo-fiche {
    width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
    border: 3px solid #fff; box-shadow: inset 0 0 0 1px var(--gris-200), var(--ombre-sm);
}

.vignette-agent {
    width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
    vertical-align: middle; box-shadow: inset 0 0 0 1px var(--gris-200);
}

/* =====================================================================
   IMPRIMÉS DE CONGÉ
   Fiche de demande de congé et notification de départ en congé.
   ===================================================================== */

/* --- Encadré d'identification de la fiche de demande --- */
.fiche-conge .cadre-conge th,
.fiche-conge .cadre-conge td { vertical-align: middle; padding: .4rem .55rem; }
.fiche-conge .cadre-conge th { font-weight: 600; letter-spacing: .01em; }

/* --- Rubriques « LIBELLÉ : valeur » de la fiche de demande --- */
.rubriques-conge {
    margin: 0 0 1rem; padding: 0 .25rem;
}
.rubriques-conge dt {
    float: left; clear: left; width: 15.5rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .01em;
    padding: .18rem 0;
}
.rubriques-conge dt::after { content: ' :'; }
.rubriques-conge dd {
    margin: 0 0 0 16.5rem; padding: .18rem 0 .18rem .35rem;
    border-bottom: 1px dotted var(--gris-300); min-height: 1.55rem;
}

/* --- Tableaux « NOMS ET SIGNATURES » et « TYPE DE CONGE PERMIS » --- */
.signatures-conge th,
.types-conge td { font-weight: 600; }
.signatures-conge td { height: 2.1rem; }
.compteur-conge th { font-size: .74rem; letter-spacing: .01em; }

/* --- Rubriques de la notification de départ --- */
.rubriques-notif { margin: .5rem 0 1.1rem; }
.rubriques-notif .row-notif {
    display: flex; align-items: flex-end; gap: .5rem; padding: .22rem 0;
}
/* Rubriques appariées (NOM + MATRICULE, DEPART + FIN…) : une seule ligne sur
   écran large et à l'impression, comme sur l'imprimé officiel. */
.rubriques-notif .row-notif.deux-colonnes { gap: 1.5rem; flex-wrap: nowrap; }
.rubriques-notif .row-notif > .d-flex { min-width: 0; }
.rubriques-notif .etiquette {
    flex: 0 0 15.5rem; text-transform: uppercase; letter-spacing: .01em;
}
.rubriques-notif .etiquette-courte {
    flex: 0 0 auto; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap;
}
.rubriques-notif .deux-points { flex: 0 0 auto; }
.rubriques-notif .pointille {
    flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere;
    border-bottom: 1px dotted var(--gris-400);
    padding: 0 .25rem .12rem;
}

/* --- Bandeau bleu « VISA » --- */
.bandeau-visa {
    width: 34%; margin: 1.2rem auto .35rem; padding: .35rem .5rem;
    background: var(--mesp-600); color: #fff; text-align: center;
    font-weight: 700; letter-spacing: .18em; border-radius: 2px;
}

/* --- Tableau des visas D.A.F. / S.E.N. --- */
.visas-conge td { vertical-align: top; padding: .7rem .8rem; line-height: 1.7; }

/* --- Ajustements d'impression --- */
@media print {
    .rubriques-conge dt { width: 14rem; }
    .rubriques-conge dd { margin-left: 15rem; }
    .rubriques-notif .etiquette { flex-basis: 14rem; }
    .bandeau-visa {
        background: var(--mesp-600) !important; color: #fff !important;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .fiche-conge, .notification-conge { page-break-inside: avoid; }
    /* Compactage : chaque imprimé de congé doit tenir sur une seule page A4. */
    .fiche-conge, .notification-conge { font-size: 8.6pt; }
    .fiche-conge .rubriques-conge { margin-bottom: .45rem; }
    .fiche-conge .rubriques-conge dt,
    .fiche-conge .rubriques-conge dd { padding: .1rem 0; min-height: 1.15rem; }
    .fiche-conge .table, .notification-conge .table { margin-bottom: .45rem !important; }
    .fiche-conge .signatures-conge td { height: 1.5rem; }
    .signatures-conge, .types-conge, .compteur-conge, .visas-conge {
        page-break-inside: avoid; break-inside: avoid;
    }
    .rubriques-notif .row-notif { padding: .12rem 0; }
    .bandeau-visa { margin-top: .7rem; }
    .pied-document { margin-top: .8rem !important; }
    /* À l'impression, aucun conteneur défilant : les tableaux reprennent leur largeur. */
    .fiche-conge .table-responsive,
    .notification-conge .table-responsive { overflow: visible !important; }
}

/* --- Petits écrans : les rubriques passent en pleine largeur --- */
@media screen and (max-width: 575.98px) {
    .rubriques-conge dt { float: none; width: auto; }
    .rubriques-conge dd { margin-left: 0; }
    /* Chaque rubrique s'empile : intitulé puis valeur soulignée pleine largeur.
       On quitte la disposition en ligne pour éviter tout écrasement des valeurs. */
    .rubriques-notif .row-notif { display: block; }
    /* Les rubriques appariées (NOM + MATRICULE, DEPART + FIN…) s'empilent aussi. */
    .rubriques-notif .row-notif > .d-flex { display: block !important; min-width: 0 !important; }
    .rubriques-notif .etiquette,
    .rubriques-notif .etiquette-courte { display: block; width: auto; }
    .rubriques-notif .deux-points { display: none; }
    .rubriques-notif .pointille {
        display: block; width: auto; padding-left: 0; margin-bottom: .45rem;
    }
    .bandeau-visa { width: 70%; }
}

/* ---------- Référentiels : villes rattachées & mention légale ---------- */
.cadre-rattachement {
    border: 1px dashed var(--mesp-teal, #01696f);
    border-radius: .5rem;
    padding: .6rem .75rem;
    background: #f4faf9;
}
.puce-ville {
    border-radius: 2rem;
    font-size: .78rem;
    padding: .15rem .6rem;
}
.puce-ville.active {
    background: var(--mesp-teal, #01696f);
    color: #fff;
}
.puce-ville.active .text-muted { color: #e6f2f1 !important; }
.mention-legale {
    border-left: 4px solid #d19900;
    background: #fdf7e6;
    border-radius: .35rem;
    padding: .5rem .75rem;
    font-size: .82rem;
    color: #5a4a12;
}
.saisie-libre { border-color: var(--mesp-teal, #01696f); }
@media print {
    .cadre-rattachement, .puce-ville { display: none !important; }
}

/* =====================================================================
 * Gestion Patrimoine, Gestion de Bon et Planning de congé
 * ===================================================================== */

/* Inventaire et bon d'entrée magasin : seize colonnes, donc typographie serrée */
.tableau-magasin th,
.tableau-magasin td {
    font-size: .72rem;
    padding: .25rem .3rem;
    vertical-align: middle;
}
.tableau-magasin thead th {
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: .66rem;
}
.bon-magasin .table-responsive { border: 0; }

/* Grille du planning de congé : douze colonnes mensuelles */
.grille-planning th,
.grille-planning td {
    font-size: .74rem;
    padding: .2rem .25rem;
}
.grille-planning thead th {
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: .68rem;
}
.grille-planning .case-mois { cursor: pointer; }
.grille-planning .case-mois input.form-check-input {
    cursor: pointer;
    border-color: var(--mesp-teal, #01696f);
}
.grille-planning .case-cochee {
    background: #e3f1f1;
}
.grille-planning .case-cochee input.form-check-input:checked {
    background-color: var(--mesp-teal, #01696f);
    border-color: var(--mesp-teal, #01696f);
}
.grille-planning tbody tr:hover { background: #fbf8ef; }

/* Cartouche d'identification des bons administratifs */
.cadre-conge th { font-size: .74rem; text-transform: uppercase; letter-spacing: .02em; }
.cadre-conge td { font-size: .82rem; }

@media print {
    .grille-planning th,
    .grille-planning td { font-size: .68rem; padding: .15rem .2rem; }
    .grille-planning .form-check-input { display: none !important; }
    /* Les zones de saisie s'impriment sans cadre, comme du texte simple */
    .grille-planning .form-control {
        border: 0; padding: 0; font-size: .68rem; background: transparent;
    }
    .tableau-magasin th,
    .tableau-magasin td { font-size: .62rem; padding: .12rem .2rem; }
}

/* Grille imprimée du planning : défilement horizontal à l'écran seulement */
.cadre-grille-imprimee { overflow-x: auto; }
@media print {
    .cadre-grille-imprimee { overflow: visible !important; }
}

/* Mention de la direction émettrice, au coin gauche sous le titre du document */
.direction-document {
    text-align: left;
    margin: .15rem 0 .4rem;
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .01em;
    color: var(--mesp-700, #0c4e54);
}
@media print {
    .direction-document { font-size: 9pt; margin: .1rem 0 .3rem; }
}

/* À l'impression, seul l'onglet visible est reproduit (registres à onglets). */
@media print {
    .tab-content > .tab-pane:not(.active) { display: none !important; }
}

/* ============================================================
   Socle ERP — Rôles et droits, Structures et antennes
   ============================================================ */
.list-group-item.active-profil {
    background: var(--mesp-50, #f2f7f5);
    border-left: 3px solid var(--mesp-600, #0b6b4f);
}
.list-group-item.active-profil .fw-semibold { color: var(--mesp-700, #085239); }
.bloc-droits { background: #fff; }
.bloc-droits:hover { border-color: var(--mesp-300, #9ec9b8) !important; }
.ligne-structure .indent { display: inline-block; color: var(--gris-400, #adb5bd); }
.organigramme, .organigramme ul { list-style: none; margin: 0; padding: 0; }
.organigramme ul { margin-left: 1.35rem; padding-left: 1rem; border-left: 1px dashed var(--mesp-300, #9ec9b8); }
.organigramme li { position: relative; padding: .2rem 0; }
.noeud-structure {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #fff; border: 1px solid var(--gris-200, #e9ecef);
    border-radius: .5rem; padding: .3rem .65rem; font-size: .82rem;
}
.noeud-structure:hover { border-color: var(--mesp-400, #6bb195); box-shadow: var(--ombre-sm); }
.noeud-structure .code { font-family: var(--police-mono, monospace); font-size: .68rem; color: #6c757d; }
.noeud-structure.inactif { opacity: .55; }

/* Pastilles de synthèse ERP sur les pages de connexion */
.pastille-erp {
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: .6rem;
    padding: .5rem .25rem;
    color: rgba(255, 255, 255, .92);
}
.pastille-erp i { font-size: .95rem; }
.pastille-erp .valeur { font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.pastille-erp .libelle {
    font-size: .62rem; text-transform: uppercase; letter-spacing: .05em;
    color: rgba(255, 255, 255, .68);
}
.ligne-compte:hover { background: rgba(0, 0, 0, .04); }


/* =====================================================================
 * LISIBILITÉ DES TABLEAUX DE SYNTHÈSE ADOSSÉS AUX GRAPHIQUES
 * Pastille de couleur rappelant la série du graphique et colonnes de
 * montants en chiffres tabulaires, afin que les valeurs se lisent
 * d'un seul regard à l'écran comme à l'impression.
 * ===================================================================== */
.puce-serie {
    display: inline-block; width: .62rem; height: .62rem;
    border-radius: .2rem; margin-right: .45rem;
}
td.chiffre, th.chiffre {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}


/* =====================================================================
 * PIED OFFICIEL DES IMPRIMÉS PAPIER
 * Siège national à gauche, contacts à droite, comme sur les imprimés
 * de la Direction des Ressources Humaines. Le filet supérieur sépare le
 * pied du corps du document ; à l'impression le bloc reste solidaire.
 * ===================================================================== */
.pied-officiel {
    display: flex;
    justify-content: space-between;
    gap: 1.2rem;
    margin-top: 1.4rem;
    padding-top: .45rem;
    border-top: 1px solid #b9c4cf;
    font-size: .68rem;
    line-height: 1.35;
    color: #3a4753;
    page-break-inside: avoid;
}
.pied-officiel .colonne { flex: 1 1 0; }
.pied-officiel .colonne:last-child { text-align: left; }
.pied-officiel .intitule { font-weight: 700; color: #14323f; }
.pied-mention {
    margin-top: .3rem;
    font-size: .64rem;
    color: #6b7783;
    text-align: right;
}
@media print {
    .pied-officiel { font-size: .64rem; border-top: 1px solid #333; }
    .pied-mention { font-size: .6rem; }
}

/* =========================================================================
   « EXPRESSION DES BESOINS » — imprimé de la Direction des Ressources Humaines
   ========================================================================= */
.fiche-besoins .entete-besoins {
    text-align: right; margin: .1rem 0 .9rem; font-size: .84rem; line-height: 1.5;
}
.fiche-besoins .entete-besoins .numero { font-weight: 700; letter-spacing: .01em; }
.fiche-besoins .entete-besoins .lieu { font-style: italic; color: var(--gris-700); }

/* Les dix rubriques, réparties en deux colonnes comme sur le papier */
.rubriques-besoins { display: flex; gap: 1.6rem; margin: .2rem 0 1rem; }
.rubriques-besoins .colonne-besoins { flex: 1 1 50%; min-width: 0; }
.rubriques-besoins .ligne-besoin {
    display: flex; align-items: baseline; gap: .4rem;
    padding: .18rem 0; font-size: .82rem;
}
.rubriques-besoins .case {
    flex: 0 0 auto; width: 1.05rem; height: 1.05rem;
    border: 1px solid var(--gris-700); border-radius: 2px;
    text-align: center; line-height: .95rem; font-weight: 700;
    color: var(--mesp-700); background: #fff;
}
.rubriques-besoins .intitule {
    flex: 0 0 auto; font-weight: 600; font-style: italic; white-space: nowrap;
}
.rubriques-besoins .valeur {
    flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere;
    border-bottom: 1px dotted var(--gris-400); padding: 0 .2rem .1rem;
}
.rubriques-besoins .ligne-besoin.retenue .intitule { color: var(--mesp-800); }
.rubriques-besoins .montant-rubrique {
    font-family: var(--police-mono, monospace); font-weight: 700; white-space: nowrap;
    margin-left: .45rem;
}
/* Sur cet imprimé, « DIRECTION » et « Bénéficiaire » gardent leur casse et le
   deux-points suit immédiatement l'intitulé, comme sur le papier. */
.fiche-besoins .rubriques-notif { margin: .35rem 0 .7rem; }
.fiche-besoins .rubriques-notif .etiquette {
    flex: 0 0 auto; text-transform: none; font-weight: 700;
}

/* Motif : trois lignes pointillées au minimum */
.fiche-besoins .bloc-motif { margin: .3rem 0 .8rem; }
.fiche-besoins .row-motif {
    display: flex; align-items: flex-end; gap: .5rem; padding: .2rem 0; font-size: .84rem;
}
.fiche-besoins .etiquette-motif { flex: 0 0 auto; font-weight: 700; }
.fiche-besoins .pointille-motif {
    flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere;
    border-bottom: 1px dotted var(--gris-400); padding: 0 .25rem .12rem;
}

/* Délai de livraison et indice budgétaire */
.fiche-besoins .liste-besoins {
    margin: .2rem 0 .9rem; padding-left: 1.4rem; font-size: .84rem;
}
.fiche-besoins .liste-besoins li { padding: .2rem 0; }
.fiche-besoins .liste-besoins .intitule { font-weight: 700; }
.fiche-besoins .liste-besoins .mention-indice { font-style: italic; }
.fiche-besoins .liste-besoins .mention-jointe {
    color: var(--succes); font-weight: 600; white-space: nowrap;
}
.fiche-besoins .pointille-inline {
    display: inline-block; min-width: 45%; max-width: 100%;
    border-bottom: 1px dotted var(--gris-400); padding: 0 .25rem .1rem;
    overflow-wrap: anywhere;
}

/* Montant en chiffre et en lettres */
.fiche-besoins .bloc-montants { margin: .3rem 0 .4rem; }
.fiche-besoins .row-montant {
    display: flex; align-items: flex-end; gap: .5rem; padding: .22rem 0; font-size: .86rem;
}
.fiche-besoins .etiquette-montant { flex: 0 0 11.5rem; font-weight: 700; }
.fiche-besoins .pointille-montant {
    flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere;
    border-bottom: 1px dotted var(--gris-400); padding: 0 .25rem .12rem;
}
.fiche-besoins .contrevaleur {
    font-weight: 400; font-style: italic; font-size: .78rem; color: var(--gris-500);
}

/* Sur l'expression des besoins, le gabarit A4 prime sur l'empilement des
   petits écrans : « DIRECTION » et « Bénéficiaire » gardent leur ligne. */
@media screen and (max-width: 575.98px) {
    .fiche-besoins .rubriques-notif .row-notif { display: flex; }
    .fiche-besoins .rubriques-notif .etiquette { display: inline; width: auto; }
    .fiche-besoins .rubriques-notif .deux-points { display: inline; }
    .fiche-besoins .rubriques-notif .pointille {
        display: block; flex: 1 1 auto; width: auto; padding-left: .25rem; margin-bottom: 0;
    }
}

/* Gabarit fixe de la feuille : quelle que soit la largeur de l'écran, l'aperçu
   reste celui de l'imprimé A4 (deux colonnes de rubriques, numéro et lieu à
   droite). Sur un écran étroit, la feuille défile latéralement au lieu de se
   replier en une seule colonne. */
.fiche-besoins .feuille-besoins { min-width: 44rem; }
@media screen and (max-width: 991.98px) {
    .fiche-besoins { overflow-x: auto; }
}
@media print {
    .fiche-besoins .feuille-besoins { min-width: 0; }
}

@media print {
    .fiche-besoins .entete-besoins { font-size: 9.5pt; margin-bottom: .55rem; }
    .rubriques-besoins { gap: 1rem; margin: .1rem 0 .55rem; }
    .rubriques-besoins .ligne-besoin { font-size: 9pt; padding: .1rem 0; }
    .rubriques-besoins .case { width: .95rem; height: .95rem; line-height: .85rem; }
    .fiche-besoins .row-motif,
    .fiche-besoins .liste-besoins { font-size: 9.5pt; }
    .fiche-besoins .row-motif { padding: .12rem 0; }
    .fiche-besoins .row-montant { font-size: 10pt; padding: .14rem 0; }
    .fiche-besoins .contrevaleur { font-size: 8.5pt; }
    .fiche-besoins .bloc-motif,
    .fiche-besoins .liste-besoins,
    .fiche-besoins .bloc-montants { margin-bottom: .5rem; }
}

/* ---------------------------------------------------------------------
 * Module PTR — écran « Évolution PTR » (mois précédent / mois en cours)
 * Couleurs des écarts : une hausse de charge est signalée en brique, une
 * baisse en vert. Purement visuel : aucun montant n'en dépend.
 * ------------------------------------------------------------------- */
.evol-plus  { color: #a8452f !important; }
.evol-moins { color: var(--succes, #2e7d4f) !important; }
.badge-evol {
    font-weight: 700; font-size: .66rem; border: 1px solid transparent; white-space: nowrap;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.badge-evol.evol-hausse    { background: #fbeceb; color: #a8452f; border-color: #eec4c0; }
.badge-evol.evol-baisse    { background: #e5f4ec; color: #2e7d4f; border-color: #a9d8bf; }
.badge-evol.evol-nouvelle  { background: #eaf1f7; color: #2b5d8a; border-color: #bcd4e6; }
.badge-evol.evol-supprimee { background: #f1f1f1; color: #5b6b7a; border-color: #d5d9dd; }
.badge-evol.evol-stable    { background: #f7f7f2; color: #6c6c5c; border-color: #e0e0d2; }
#table-evolution tr.evol-ligne-supprimee > td { color: #6b7780; }
#table-evolution tr.evol-ligne-nouvelle > td:first-child { box-shadow: inset 3px 0 0 #2b5d8a; }
#table-evolution tr.evol-ligne-hausse > td:first-child   { box-shadow: inset 3px 0 0 #a8452f; }
#table-evolution tr.evol-ligne-baisse > td:first-child   { box-shadow: inset 3px 0 0 #2e7d4f; }
@media print {
    #table-evolution { font-size: 8.5pt; }
    #table-evolution th .small { font-size: 7pt; }
}