/* =====================================================================
   style.css — Feuille de style unique de l'application SIGMP Niger
   Charte : Bleu royal #1F5A8E, Rouge #A31C2A, Or #E0A82E, fond #f4f6f8.
   Design institutionnel sobre, responsive (mobile en une colonne).
   Aucune ressource externe : polices système uniquement (Arial).
   ===================================================================== */

:root {
    --bleu:       #1F5A8E;
    --bleu-fonce: #17466e;
    --rouge:      #A31C2A;
    --rouge-fonce:#821521;
    --or:         #E0A82E;
    --or-fonce:   #c8901c;
    --fond:       #f4f6f8;
    --blanc:      #ffffff;
    --gris-bord:  #d5dbe1;
    --gris-clair: #eef1f4;
    --gris-texte: #555;
    --texte:      #222;
    --vert:       #2e7d46;
    --ombre:      0 1px 3px rgba(0,0,0,.12);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: var(--fond);
    color: var(--texte);
    font-size: 15px;
    line-height: 1.45;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a { color: var(--bleu); }

/* ---------------------------------------------------------------- */
/*  Barre d'application et navigation                               */
/* ---------------------------------------------------------------- */
.barre-appli {
    background: var(--bleu);
    color: var(--blanc);
    padding: 10px 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-shadow: var(--ombre);
    /* Barre de navigation fixée en haut, visible au défilement. */
    position: sticky;
    top: 0;
    z-index: 1000;
}
.barre-marque { display: flex; align-items: center; gap: 12px; }
.drapeau {
    width: 34px; height: 24px;
    border-radius: 2px;
    background: linear-gradient(to bottom,
        var(--or) 0 33%, var(--blanc) 33% 66%, var(--vert) 66% 100%);
    position: relative;
    flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,.5);
}
.drapeau::after {              /* disque orange central du drapeau nigérien */
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 8px; height: 8px;
    background: var(--or);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.app-nom { font-size: 20px; font-weight: bold; letter-spacing: .3px; }
.app-sous-titre { font-size: 11.5px; opacity: .9; }

.menu { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.menu a {
    color: var(--blanc);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
}
.menu a:hover { background: rgba(255,255,255,.15); }
.menu a.actif { background: rgba(255,255,255,.22); font-weight: bold; }
.menu-user { font-size: 13px; margin-left: 6px; display: inline-flex; align-items: center; gap: 6px; }
.badge-role {
    background: var(--or);
    color: #3a2c00;
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 10px;
    font-weight: bold;
}
.lien-deconnexion { background: var(--rouge); }
.lien-deconnexion:hover { background: var(--rouge-fonce) !important; }

/* ---------------------------------------------------------------- */
/*  Zone de contenu et pied de page                                 */
/* ---------------------------------------------------------------- */
.contenu {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px 18px 40px;
}
.pied-appli {
    background: var(--bleu-fonce);
    color: #e8eef4;
    text-align: center;
    padding: 14px;
    font-size: 12.5px;
}
.pied-mention { opacity: .8; margin-top: 2px; }

/* ---------------------------------------------------------------- */
/*  Titres et sections                                              */
/* ---------------------------------------------------------------- */
h1 { color: var(--bleu); font-size: 24px; margin: 0 0 4px; }
h2.section-titre {
    background: var(--rouge);
    color: var(--blanc);
    font-size: 16px;
    padding: 8px 12px;
    border-radius: 4px 4px 0 0;
    margin: 26px 0 0;
}
h3 { color: var(--bleu-fonce); font-size: 15px; margin: 14px 0 6px; }
.sous-titre-page { color: var(--gris-texte); margin: 0 0 18px; }

.carte {
    background: var(--blanc);
    border: 1px solid var(--gris-bord);
    border-radius: 6px;
    box-shadow: var(--ombre);
    padding: 18px;
    margin-bottom: 18px;
}
.section-corps {           /* corps sous un bandeau rouge de section */
    background: var(--blanc);
    border: 1px solid var(--gris-bord);
    border-top: none;
    border-radius: 0 0 4px 4px;
    padding: 14px 16px;
    margin-bottom: 8px;
}

/* ---------------------------------------------------------------- */
/*  Tableaux                                                        */
/* ---------------------------------------------------------------- */
table.grille {
    width: 100%;
    border-collapse: collapse;
    margin: 6px 0 12px;
    font-size: 14px;
}
table.grille th, table.grille td {
    border: 1px solid var(--gris-bord);
    padding: 6px 9px;
    text-align: left;
}
table.grille thead th {
    background: var(--bleu);
    color: var(--blanc);
    font-weight: bold;
}
table.grille tbody tr:nth-child(even) { background: var(--gris-clair); }
table.grille td.num, table.grille th.num { text-align: right; white-space: nowrap; }
table.grille tr.total-ligne {
    background: #dfe7ef !important;
    font-weight: bold;
}
table.grille tr.total-ligne td { border-top: 2px solid var(--bleu); }

/* Deux tableaux côte à côte (DAO, marchés…) */
.duo {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}
.duo > div { flex: 1 1 320px; min-width: 0; }

/* ---------------------------------------------------------------- */
/*  Formulaires                                                     */
/* ---------------------------------------------------------------- */
label { display: block; font-weight: bold; margin: 10px 0 3px; font-size: 14px; }
input[type=text], input[type=password], input[type=number], select, textarea {
    width: 100%;
    padding: 8px 9px;
    border: 1px solid var(--gris-bord);
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    background: var(--blanc);
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--bleu);
    outline-offset: -1px;
}
input[readonly], input:disabled, textarea[readonly] {
    background: var(--gris-clair);
    color: var(--gris-texte);
}
/* Montant total contrôlé : résultat calculé pendant la saisie */
input.total-live[readonly] {
    background: #e7f6ea;
    color: var(--texte);
    font-weight: bold;
}
/* Champs numériques dans les tableaux : compacts, alignés à droite */
table.grille input[type=text] {
    text-align: right;
    padding: 5px 6px;
    min-width: 90px;
}
.champ-inline { display: flex; gap: 14px; flex-wrap: wrap; }
.champ-inline > div { flex: 1 1 180px; }
textarea { min-height: 90px; resize: vertical; }

/* ---------------------------------------------------------------- */
/*  Boutons                                                         */
/* ---------------------------------------------------------------- */
.btn {
    display: inline-block;
    border: none;
    border-radius: 4px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    color: var(--blanc);
    background: var(--bleu);
}
.btn:hover { background: var(--bleu-fonce); }
.btn-or { background: var(--or); color: #3a2c00; }
.btn-or:hover { background: var(--or-fonce); }
.btn-rouge { background: var(--rouge); }
.btn-rouge:hover { background: var(--rouge-fonce); }
.btn-vert { background: var(--vert); }
.btn-vert:hover { background: #245c37; }
.btn-clair { background: var(--gris-clair); color: var(--texte); border: 1px solid var(--gris-bord); }
.btn-clair:hover { background: #e2e7ec; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.barre-boutons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--gris-bord);
}

/* ---------------------------------------------------------------- */
/*  Badges de statut, messages                                      */
/* ---------------------------------------------------------------- */
.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}
.badge-brouillon { background: #e6e6e6; color: #555; }
.badge-soumis    { background: #fbe6b8; color: #7a5600; }
.badge-valide    { background: #cdeccf; color: #1c6b2c; }

.message {
    padding: 12px 15px;
    border-radius: 4px;
    margin-bottom: 16px;
    border-left: 5px solid;
}
.message-ok    { background: #e7f6ea; border-color: var(--vert); color: #1c5c2c; }
.message-erreur{ background: #fbe7e9; border-color: var(--rouge); color: #7a1420; }
.message-info  { background: #e7eff7; border-color: var(--bleu); color: #17466e; }
.message-alerte{ background: #fff4d9; border-color: var(--or); color: #7a5600; }

/* ---------------------------------------------------------------- */
/*  Cartes KPI (consolidation)                                      */
/* ---------------------------------------------------------------- */
.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 18px 0;
}
.kpi {
    background: var(--blanc);
    border: 1px solid var(--gris-bord);
    border-top: 4px solid var(--bleu);
    border-radius: 6px;
    padding: 14px 16px;
    box-shadow: var(--ombre);
}
.kpi.or   { border-top-color: var(--or); }
.kpi.rouge{ border-top-color: var(--rouge); }
.kpi.vert { border-top-color: var(--vert); }
.kpi-valeur { font-size: 22px; font-weight: bold; color: var(--bleu-fonce); }
.kpi-libelle { font-size: 12.5px; color: var(--gris-texte); margin-top: 2px; }

/* ---------------------------------------------------------------- */
/*  Graphiques en barres horizontales (CSS pur)                     */
/* ---------------------------------------------------------------- */
.graph { margin: 8px 0 16px; }
.barre-ligne {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    font-size: 13px;
}
.barre-etiquette { flex: 0 0 130px; text-align: right; color: var(--gris-texte); }
.barre-piste {
    flex: 1 1 auto;
    background: var(--gris-clair);
    border-radius: 3px;
    overflow: hidden;
    height: 20px;
}
.barre-remplissage {
    height: 100%;
    background: var(--bleu);
    border-radius: 3px 0 0 3px;
    min-width: 2px;
}
.barre-remplissage.or { background: var(--or); }
.barre-valeur { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--texte); }

/* ---------------------------------------------------------------- */
/*  Page de connexion                                               */
/* ---------------------------------------------------------------- */
.page-login {
    max-width: 400px;
    margin: 6vh auto;
    padding: 0 16px;
}
.login-carte {
    background: var(--blanc);
    border: 1px solid var(--gris-bord);
    border-top: 5px solid var(--or);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    padding: 26px 24px;
}
.login-entete { text-align: center; margin-bottom: 18px; }
.login-entete .app-nom { color: var(--bleu); font-size: 22px; font-weight: bold; }
.login-entete .app-sous-titre { color: var(--gris-texte); font-size: 12px; }

/* ---------------------------------------------------------------- */
/*  Divers utilitaires                                              */
/* ---------------------------------------------------------------- */
.remarque-bloc { border-left: 4px solid var(--or); padding: 6px 12px; margin: 8px 0; background: #fffdf5; }
.remarque-bloc .entite-nom { font-weight: bold; color: var(--rouge); }
.muet { color: var(--gris-texte); font-size: 13px; }
.centre { text-align: center; }
.droite { text-align: right; }
.mt { margin-top: 16px; }
.liste-manquantes { columns: 2; font-size: 13px; }
.liste-manquantes li { break-inside: avoid; }
.entete-page { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.filtres { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.filtres label { margin: 0 0 3px; }
.filtres > div { flex: 0 0 auto; }
.tag-cat { font-size: 11px; color: var(--gris-texte); }

/* ---------------------------------------------------------------- */
/*  Tableau de bord administrateur                                  */
/* ---------------------------------------------------------------- */
.dash-grille {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 18px;
    align-items: start;
}
.dash-liens { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lien-carte {
    display: block;
    text-decoration: none;
    color: var(--texte);
    background: var(--blanc);
    border: 1px solid var(--gris-bord);
    border-left: 4px solid var(--bleu);
    border-radius: 6px;
    padding: 14px;
    box-shadow: var(--ombre);
    transition: transform .08s ease, box-shadow .08s ease;
}
.lien-carte:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.14); }
.lien-carte.or   { border-left-color: var(--or); }
.lien-carte.rouge{ border-left-color: var(--rouge); }
.lien-carte.vert { border-left-color: var(--vert); }
.lien-carte .lc-titre { font-weight: bold; font-size: 15px; color: var(--bleu-fonce); }
.lien-carte .lc-desc  { font-size: 12.5px; color: var(--gris-texte); margin-top: 3px; }

/* Grande barre de progression (taux de complétion) */
.progress-large {
    background: var(--gris-clair);
    border-radius: 20px;
    height: 26px;
    overflow: hidden;
    border: 1px solid var(--gris-bord);
}
.progress-large > span {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    background: linear-gradient(90deg, var(--bleu), var(--or));
    color: var(--blanc);
    font-size: 12.5px;
    font-weight: bold;
    padding-right: 10px;
    min-width: 34px;
    border-radius: 20px;
    white-space: nowrap;
}

/* Actions dans les tableaux d'administration */
.btn-petit { padding: 4px 10px; font-size: 12.5px; }
.actions-ligne { display: flex; gap: 6px; flex-wrap: wrap; }
.actions-ligne form { display: inline; margin: 0; }
.badge-actif    { background: #cdeccf; color: #1c6b2c; }
.badge-suspendu { background: #f3d0d3; color: #8a1a24; }

/* Formulaire en grille (création / édition) */
.form-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 16px; }
.form-grille .pleine-largeur { grid-column: 1 / -1; }
.bloc-edition { border-top: 4px solid var(--or); }
.barre-outils { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.barre-outils .grandi { flex: 1 1 auto; }

/* ---------------------------------------------------------------- */
/*  Responsive : une seule colonne sur mobile                       */
/* ---------------------------------------------------------------- */
@media (max-width: 720px) {
    .duo { flex-direction: column; }
    .dash-grille { grid-template-columns: 1fr; }
    .dash-liens { grid-template-columns: 1fr; }
    .liste-manquantes { columns: 1; }
    .app-sous-titre { display: none; }
    .barre-appli { padding: 8px 12px; }
    .contenu { padding: 14px 12px 30px; }
    table.grille { font-size: 13px; }
    table.grille input[type=text] { min-width: 70px; }
    .barre-etiquette { flex-basis: 90px; }
    h1 { font-size: 20px; }
}