/* =====================================================================
   theme-niger.css — Habillage institutionnel « République du Niger »
   Chargé APRÈS style.css : il surcharge couleurs et composants, sans rien supprimer.
   Pour revenir à l'ancien visuel : retirer la ligne <link> de theme-niger.css
   dans includes/entete.php et login.php.

   Palette tirée du blason / logo du Ministère de l'Économie et des Finances :
     Vert profond  #045A2B   (couleur principale, fond du logo)
     Vert nuit     #02311B   (barre, pied de page, titres)
     Vert vif      #0B7A3B   (actions, succès)
     Orange        #E8590C   (drapeau nigérien : accent, boutons d'action)
     Or            #E3A71B   (soleil du blason : badges, liserés)
   ===================================================================== */

:root {
    --vert-nuit:   #02311B;
    --vert-fonce:  #045A2B;
    --vert-vif:    #0B7A3B;
    --vert-clair:  #E6F3EA;
    --orange:      #E8590C;
    --orange-fonce:#BF3E0A;
    --or:          #E3A71B;
    --or-fonce:    #B8860B;
    --rouge:       #B91C1C;

    /* Les variables de l'ancienne charte pointent désormais vers la nouvelle palette */
    --anthracite:       var(--vert-fonce);
    --anthracite-fonce: var(--vert-nuit);
    --emeraude:         var(--vert-vif);
    --emeraude-fonce:   var(--vert-fonce);
    --vert:             var(--vert-vif);
    --fond:             #F1F6F2;
    --gris-bord:        #CFDDD3;
    --gris-clair:       #EEF5F0;
    --gris-texte:       #4A5A50;
    --texte:            #16251C;
    --erreur:           #B91C1C;
    --ombre:            0 1px 2px rgba(2,49,27,.08), 0 6px 18px rgba(2,49,27,.07);
}

body {
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    background:
        radial-gradient(900px 380px at 100% -5%, rgba(11,122,59,.10), transparent 65%),
        radial-gradient(700px 300px at 0% 0%, rgba(232,89,12,.07), transparent 60%),
        var(--fond);
    background-attachment: fixed;
    color: var(--texte);
}
a { color: var(--vert-fonce); }
a:hover { color: var(--orange-fonce); }

/* ------------------------------------------------------------------ */
/*  Barre d'application                                                */
/* ------------------------------------------------------------------ */
.barre-appli {
    background: linear-gradient(120deg, #012714 0%, #03481F 45%, #07702F 100%);
    padding: 16px 24px 12px;
    border-bottom: 3px solid var(--or);
    box-shadow: 0 6px 20px rgba(2,49,27,.35);
}
/* Ruban tricolore du drapeau nigérien : orange · blanc · vert */
.barre-appli::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: linear-gradient(90deg, #E8590C 0 33.33%, #FFFFFF 33.33% 66.66%, #0DB02B 66.66% 100%);
}
.barre-marque { gap: 16px; }
.logo-armoiries {
    height: 58px; width: auto;
    background: #fff;
    border-radius: 12px;
    padding: 5px 8px;
    box-shadow: 0 0 0 3px rgba(227,167,27,.55), 0 4px 12px rgba(0,0,0,.35);
    flex: 0 0 auto;
}
.app-nom { font-size: 23px; font-weight: 800; letter-spacing: .2px; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.app-sous-titre { font-size: 12px; color: #F6DE9A; opacity: 1; letter-spacing: .15px; }

.menu { gap: 4px; }
.menu a {
    padding: 8px 15px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    color: #EAF6EE;
    transition: background .15s ease, color .15s ease, transform .1s ease;
}
.menu a:hover { background: rgba(255,255,255,.16); color: #fff; }
.menu a.actif {
    background: #fff;
    color: var(--vert-fonce);
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
.menu-user { color: #fff; font-weight: 600; margin-right: 6px; }
.badge-role {
    background: var(--or); color: #2B1E00;
    padding: 2px 10px; font-size: 11px; font-weight: 800; letter-spacing: .4px;
    text-transform: uppercase; border-radius: 999px;
}
.menu a.lien-deconnexion {
    background: linear-gradient(180deg, #F0620F, #C9450A);
    color: #fff; font-weight: 800;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.menu a.lien-deconnexion:hover { background: linear-gradient(180deg, #D9540C, #A93A08) !important; }

/* ------------------------------------------------------------------ */
/*  Contenu, titres, cartes                                            */
/* ------------------------------------------------------------------ */
.contenu { max-width: 1240px; padding-top: 28px; }
h1 { color: var(--vert-nuit); font-size: 30px; font-weight: 800; letter-spacing: -.2px; margin-bottom: 6px; }
h1::after {
    content: ""; display: block; width: 64px; height: 5px; margin-top: 8px;
    border-radius: 3px; background: linear-gradient(90deg, var(--orange), var(--or));
}
h3 { color: var(--vert-fonce); }
.sous-titre-page { color: var(--gris-texte); font-size: 15px; }

.carte {
    border: 1px solid var(--gris-bord);
    border-top: 4px solid var(--vert-fonce);
    border-radius: 12px;
    box-shadow: var(--ombre);
}
h2.section-titre {
    background: linear-gradient(100deg, var(--vert-nuit), var(--vert-fonce) 60%, var(--vert-vif));
    border-left: 6px solid var(--orange);
    border-radius: 10px 10px 0 0;
    font-size: 16px; font-weight: 800; letter-spacing: .2px;
    padding: 11px 16px;
}
.section-corps { border-color: var(--gris-bord); border-radius: 0 0 10px 10px; box-shadow: var(--ombre); }

/* ------------------------------------------------------------------ */
/*  Tableaux                                                           */
/* ------------------------------------------------------------------ */
table.grille { border-radius: 10px; overflow: hidden; font-size: 14px; }
table.grille th, table.grille td { border-color: #D6E4DA; padding: 10px 12px; }
table.grille thead th {
    background: linear-gradient(180deg, var(--vert-fonce), var(--vert-nuit));
    color: #fff; font-weight: 700; letter-spacing: .25px; border-color: #0A6B38;
}
table.grille tbody tr:nth-child(even) { background: #F0F7F2; }
table.grille tbody tr { transition: background .12s ease; }
table.grille tbody tr:hover { background: #DDEFE3; }
table.grille tr.total-ligne { background: #D5EBDC !important; color: var(--vert-nuit); }
table.grille tr.total-ligne td { border-top: 2px solid var(--vert-fonce); }
table.grille td.num, table.grille th.num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ */
/*  Formulaires                                                        */
/* ------------------------------------------------------------------ */
label { color: var(--vert-nuit); }
input[type=text], input[type=password], input[type=number], select, textarea {
    border: 1.5px solid #B7CCBD;
    border-radius: 8px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--vert-vif); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--vert-vif);
    box-shadow: 0 0 0 4px rgba(11,122,59,.20);
}
input[readonly], input:disabled, textarea[readonly] { background: #EAF2EC; color: #31453A; font-weight: 600; }

/* ------------------------------------------------------------------ */
/*  Boutons                                                            */
/* ------------------------------------------------------------------ */
.btn {
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 700;
    letter-spacing: .15px;
    color: #fff;
    background: linear-gradient(180deg, var(--vert-vif), var(--vert-fonce));
    box-shadow: 0 2px 6px rgba(2,49,27,.28);
    transition: transform .1s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover { background: linear-gradient(180deg, #0E8F45, var(--vert-fonce)); transform: translateY(-1px); box-shadow: 0 5px 12px rgba(2,49,27,.32); }
.btn:active { transform: translateY(0); }
.btn-or {
    background: linear-gradient(180deg, #E4540C, #BF3E0A);
    color: #fff;
}
.btn-or:hover { background: linear-gradient(180deg, #F0620F, #A93A08); }
.btn-clair {
    background: #fff; color: var(--vert-fonce); border: 1.5px solid var(--vert-fonce); box-shadow: none;
}
.btn-clair:hover { background: var(--vert-clair); }
.btn-rouge { background: linear-gradient(180deg, #CC2A2A, #A81818); }       /* actions destructrices : rouge */
.btn-rouge:hover { background: linear-gradient(180deg, #DC3434, #8E1212); }
.btn-vert { background: linear-gradient(180deg, #12A150, #0B7A3B); }
.btn-vert:hover { background: linear-gradient(180deg, #16B85B, #09672F); }
.btn:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }
.barre-boutons { border-top: 2px solid var(--vert-clair); }

/* ------------------------------------------------------------------ */
/*  Badges de statut : couleurs pleines, bien lisibles                  */
/* ------------------------------------------------------------------ */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 13px 4px 11px;
    border-radius: 999px;
    font-size: 12.5px; font-weight: 800; letter-spacing: .3px;
    color: #fff;
    border: 1px solid rgba(0,0,0,.12);
    box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.22);
    text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
.badge::before { font-size: 12px; line-height: 1; }
.badge-brouillon { background: #4B5563; }                 /* gris ardoise */
.badge-brouillon::before { content: "\270E"; }            /* ✎ */
.badge-soumis    { background: linear-gradient(180deg, #E4540C, #C2410C); }   /* orange */
.badge-soumis::before    { content: "\279C"; }            /* ➜ */
.badge-valide    { background: linear-gradient(180deg, #1B9A4B, #15803D); }   /* vert */
.badge-valide::before    { content: "\2714"; }            /* ✔ */
.badge-actif     { background: #15803D; }
.badge-actif::before     { content: "\25CF"; }
.badge-suspendu  { background: #B91C1C; }
.badge-suspendu::before  { content: "\25CF"; }

/* Messages */
.message { border-radius: 10px; border-left-width: 6px; font-weight: 600; box-shadow: var(--ombre); }
.message-ok     { background: #DDF3E4; border-color: var(--vert-vif); color: #0D4A25; }
.message-erreur { background: #FDE3E3; border-color: #B91C1C; color: #7F1212; }
.message-info   { background: #E3F0E8; border-color: var(--vert-fonce); color: var(--vert-nuit); }
.message-alerte { background: #FFEFD2; border-color: var(--orange); color: #7A3200; }

/* ------------------------------------------------------------------ */
/*  Cartes KPI et graphiques                                           */
/* ------------------------------------------------------------------ */
.kpi {
    border: 1px solid var(--gris-bord);
    border-top: 6px solid var(--vert-fonce);
    border-radius: 12px;
    padding: 15px 14px;
    background: linear-gradient(180deg, #fff, #F6FBF7);
}
.kpi.or    { border-top-color: var(--orange); }
.kpi.rouge { border-top-color: #C62828; }
.kpi.vert  { border-top-color: #12A150; }
.kpi-valeur { font-size: 22px; font-weight: 800; color: var(--vert-nuit); letter-spacing: -.3px; white-space: nowrap; }
.kpi-libelle { font-size: 13px; font-weight: 600; color: var(--gris-texte); }

.barre-piste { background: #E2EDE5; height: 22px; border-radius: 6px; }
.barre-remplissage { display: block; background: linear-gradient(90deg, var(--vert-fonce), #12A150); border-radius: 6px 0 0 6px; }
.barre-remplissage.or { background: linear-gradient(90deg, #C2410C, #F0801F); }
.barre-valeur { font-weight: 700; }

.progress-large { height: 30px; border-radius: 20px; background: #E2EDE5; border-color: #C5D8CB; }
.progress-large > span { background: linear-gradient(90deg, var(--vert-fonce), #12A150 70%, var(--or)); font-size: 13px; }

/* Cartes de liens du tableau de bord */
.lien-carte { border-radius: 12px; border-left-width: 6px; border-left-color: var(--vert-fonce); }
.lien-carte.or    { border-left-color: var(--orange); }
.lien-carte.rouge { border-left-color: var(--or); }
.lien-carte.vert  { border-left-color: #12A150; }
.lien-carte .lc-titre { color: var(--vert-nuit); font-size: 16px; }
.lien-carte:hover { box-shadow: 0 8px 22px rgba(2,49,27,.20); }

.remarque-bloc { border-left-color: var(--orange); background: #FFF8EE; border-radius: 0 8px 8px 0; }
.remarque-bloc .entite-nom { color: var(--vert-fonce); }
.bloc-edition { border-top-color: var(--orange); }

/* ------------------------------------------------------------------ */
/*  Pied de page                                                       */
/* ------------------------------------------------------------------ */
.pied-appli {
    position: relative;
    background: linear-gradient(120deg, #012714, #03481F);
    padding: 20px 14px 16px;
    color: #E4F2E9;
}
.pied-appli::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, #E8590C 0 33.33%, #FFFFFF 33.33% 66.66%, #0DB02B 66.66% 100%);
}

/* ------------------------------------------------------------------ */
/*  Page de connexion : écran partagé « blason / formulaire »          */
/* ------------------------------------------------------------------ */
.page-connexion { background: #fff; }
.login-ecran { flex: 1 0 auto; display: grid; grid-template-columns: 1.08fr 1fr; min-height: 100vh; }

.login-hero {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 48px 40px; text-align: center; color: #fff;
    background:
        radial-gradient(520px 520px at 15% 10%, rgba(255,255,255,.10), transparent 65%),
        radial-gradient(620px 620px at 95% 100%, rgba(227,167,27,.22), transparent 65%),
        linear-gradient(150deg, #012714 0%, #03481F 50%, #08752F 100%);
}
.login-hero::before {                       /* ruban tricolore vertical */
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 9px;
    background: linear-gradient(180deg, #E8590C 0 33.33%, #FFFFFF 33.33% 66.66%, #0DB02B 66.66% 100%);
}
.login-hero::after {                        /* motif discret en cercles */
    content: ""; position: absolute; width: 520px; height: 520px; right: -200px; top: -200px;
    border-radius: 50%; border: 60px solid rgba(255,255,255,.04);
}
.login-emblem {
    width: min(340px, 62%); height: auto;
    border-radius: 28px;
    box-shadow: 0 0 0 4px rgba(227,167,27,.75), 0 24px 50px rgba(0,0,0,.45);
    position: relative; z-index: 1;
}
.login-hero h1 {
    color: #fff; font-size: 31px; line-height: 1.2; margin: 30px 0 8px; position: relative; z-index: 1;
    text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.login-hero h1::after { margin: 12px auto 0; }
.login-hero .app-sous-titre { color: #F6DE9A; font-size: 14.5px; max-width: 460px; position: relative; z-index: 1; display: block; }
.login-points { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; position: relative; z-index: 1; }
.login-points li {
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
    padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 600;
}

.login-panneau {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 40px 28px;
    background: radial-gradient(700px 400px at 100% 0%, rgba(11,122,59,.10), transparent 60%), #F4F8F5;
}
.login-panneau .login-carte {
    width: 100%; max-width: 410px;
    background: #fff;
    border: 1px solid var(--gris-bord);
    border-top: 6px solid var(--orange);
    border-radius: 16px;
    padding: 32px 30px 30px;
    box-shadow: 0 18px 44px rgba(2,49,27,.18);
}
.login-titre { margin: 0 0 4px; color: var(--vert-nuit); font-size: 25px; font-weight: 800; }
.login-sous { margin: 0 0 18px; color: var(--gris-texte); font-size: 14px; }
.login-panneau .btn { padding: 12px 20px; font-size: 15px; }

@media (max-width: 900px) {
    .login-ecran { grid-template-columns: 1fr; }
    .login-hero { padding: 30px 20px; }
    .login-emblem { width: 170px; }
    .login-hero h1 { font-size: 22px; margin-top: 18px; }
    .login-points { display: none; }
}
@media (max-width: 720px) {
    .app-nom { font-size: 18px; }
    .logo-armoiries { height: 46px; }
    h1 { font-size: 24px; }
    .barre-appli { padding: 14px 12px 10px; }
}

/* ------------------------------------------------------------------ */
/*  Barre d'application sur DEUX niveaux (toutes largeurs d'écran) :    */
/*    1re ligne : blason + nom de l'application                         */
/*    2e ligne  : barre d'onglets                                       */
/*  Grand écran  : utilisateur + Déconnexion à droite de la 2e ligne.    */
/*  Écran moyen  : ils passent en haut à droite (1re ligne).             */
/* ------------------------------------------------------------------ */
.barre-appli {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
}
.barre-haut {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; width: 100%;
}
.barre-haut .barre-marque { flex: 1 1 360px; min-width: 0; }          /* le sous-titre peut passer sur 2 lignes */
.compte-haut { display: none; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; }
.menu { width: 100%; flex: 0 0 auto; flex-wrap: wrap; gap: 4px; }
.menu a { white-space: nowrap; }
.menu-user { margin-left: auto; white-space: nowrap; }
.compte-haut .menu-user { margin-left: 0; }

/* Bouton Déconnexion (dans la barre d'onglets comme en haut à droite) */
.barre-appli a.lien-deconnexion {
    padding: 8px 17px; border-radius: 999px; font-size: 14px; font-weight: 800;
    color: #fff; text-decoration: none; white-space: nowrap;
    background: linear-gradient(180deg, #F0620F, #C9450A);
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.barre-appli a.lien-deconnexion:hover { background: linear-gradient(180deg, #D9540C, #A93A08) !important; }

@media (max-width: 1260px) {
    .compte-haut { display: flex; }
    .menu > .menu-user, .menu > .lien-deconnexion { display: none; }
}
/* Écrans étroits : les onglets restent sur une seule ligne, défilable au doigt */
@media (max-width: 980px) {
    .menu {
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; padding-bottom: 4px;
    }
    .menu::-webkit-scrollbar { display: none; }
    .menu a { flex: 0 0 auto; }
}
@media (max-width: 560px) {
    .compte-haut { width: 100%; justify-content: space-between; }
}