/* GMU-DA — habillage sobre et accessible, dans l'esprit des portails de services publics,
   aux couleurs du drapeau de la Côte d'Ivoire (orange, blanc, vert).
   Le vert et l'orange exacts du drapeau servent aux aplats et aux accents ; les variantes
   foncées portent le texte, pour garder un contraste lisible. */

:root {
    --orange-drapeau: #f77f00;
    --vert-drapeau: #009e60;
    --primaire: #00724a;
    --primaire-fonce: #00563a;
    --primaire-clair: #e6f4ee;
    --action: var(--orange-drapeau);
    --action-fonce: #dd7000;
    --orange-texte: #7a3d00;
    --orange-clair: #ffe9d1;
    --encre: #1b1b1b;
    --gris-texte: #565c65;
    --gris-bord: #d5d9e0;
    --fond: #f6f7f9;
    --succes: var(--vert-drapeau);
    --alerte: #b42318;
    --focus: #0a76f6;
    --rayon: 0.25rem;

    --bs-primary: var(--primaire);
    --bs-primary-rgb: 0, 114, 74;
    --bs-link-color: var(--primaire);
    --bs-link-color-rgb: 0, 114, 74;
    --bs-link-hover-color: var(--primaire-fonce);
    --bs-link-hover-color-rgb: 0, 86, 58;
    --bs-body-color: var(--encre);
    --bs-border-radius: var(--rayon);
    --bs-border-radius-lg: var(--rayon);
    --bs-border-radius-sm: var(--rayon);
}

body {
    background: var(--fond);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.55;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main { flex: 1; }
h1 { font-size: 2rem; font-weight: 700; }
h2 { font-size: 1.5rem; font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 700; }
.lead { color: var(--gris-texte); }

/* Accessibilité : focus toujours visible, lien d'évitement */
:focus-visible { outline: 3px solid var(--focus) !important; outline-offset: 2px; box-shadow: none !important; }
.skip-link {
    position: absolute; left: -999px; top: 0; z-index: 2000;
    background: #fff; color: var(--primaire); padding: 0.75rem 1rem; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* En-tête */
.flag-stripe { height: 6px; background: linear-gradient(90deg, var(--orange-drapeau) 33.33%, #fff 33.33% 66.66%, var(--vert-drapeau) 66.66%); }
.site-header { background: #fff; border-bottom: 1px solid var(--gris-bord); }
.brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; color: var(--encre); padding: 0.9rem 0; }
.brand-mark {
    width: 46px; height: 46px; flex: none; display: grid; place-items: center;
    background: var(--primaire); color: #fff; font-size: 1.25rem; border-radius: var(--rayon);
}
.brand-name { display: block; font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.brand-tagline { display: block; font-size: 0.85rem; color: var(--gris-texte); }
.header-tools { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.92rem; }
.header-tools form { display: inline; }
.site-nav { border-top: 1px solid var(--gris-bord); background: #fff; }
.site-nav .navbar-nav .nav-link {
    color: var(--encre); font-weight: 500; padding: 0.8rem 0.9rem;
    border-bottom: 3px solid transparent; border-radius: 0;
}
.site-nav .navbar-nav .nav-link:hover { background: var(--fond); color: var(--primaire); }
.site-nav .navbar-nav .nav-link.active { color: var(--primaire); border-bottom-color: var(--orange-drapeau); }
.site-nav .navbar-nav { margin-left: -0.9rem; }
.nav-sep { border-left: 1px solid var(--gris-bord); margin: 0.6rem 0.4rem; }

/* Boutons */
.btn { border-radius: var(--rayon); font-weight: 600; }
.btn-primary {
    --bs-btn-bg: var(--primaire); --bs-btn-border-color: var(--primaire);
    --bs-btn-hover-bg: var(--primaire-fonce); --bs-btn-hover-border-color: var(--primaire-fonce);
    --bs-btn-active-bg: var(--primaire-fonce); --bs-btn-active-border-color: var(--primaire-fonce);
    --bs-btn-disabled-bg: var(--primaire); --bs-btn-disabled-border-color: var(--primaire);
}
.btn-outline-primary {
    --bs-btn-color: var(--primaire); --bs-btn-border-color: var(--primaire);
    --bs-btn-hover-bg: var(--primaire); --bs-btn-hover-border-color: var(--primaire);
    --bs-btn-active-bg: var(--primaire-fonce); --bs-btn-active-border-color: var(--primaire-fonce);
}
.btn-action {
    --bs-btn-color: var(--encre); --bs-btn-bg: var(--action); --bs-btn-border-color: var(--action);
    --bs-btn-hover-color: var(--encre); --bs-btn-hover-bg: var(--action-fonce); --bs-btn-hover-border-color: var(--action-fonce);
    --bs-btn-active-color: var(--encre); --bs-btn-active-bg: var(--action-fonce); --bs-btn-active-border-color: var(--action-fonce);
}
.btn-link-plain { background: none; border: 0; padding: 0; color: var(--primaire); text-decoration: underline; font-weight: 500; }

/* Blocs */
.panel { background: #fff; border: 1px solid var(--gris-bord); border-radius: var(--rayon); }
.panel-header { padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--gris-bord); display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.panel-header h2, .panel-header h3 { margin: 0; font-size: 1.05rem; }
.panel-body { padding: 1.1rem; }
.callout { background: var(--primaire-clair); border-left: 4px solid var(--primaire); padding: 1rem 1.25rem; border-radius: 0 var(--rayon) var(--rayon) 0; }
.callout-succes { background: var(--primaire-clair); border-left-color: var(--succes); }
.callout-alerte { background: #fdecea; border-left-color: var(--alerte); }
.alert { border-radius: var(--rayon); }

/* Accueil */
.hero { background: var(--primaire); color: #fff; padding: 3rem 0; }
.hero h1 { font-size: 2.25rem; }
.hero p { color: #e3f3ec; font-size: 1.1rem; max-width: 38rem; }
.hero .btn-light { color: var(--primaire); }
.track-box { background: #fff; color: var(--encre); padding: 1.25rem; border-radius: var(--rayon); }
.tile {
    display: flex; flex-direction: column; gap: 0.35rem; height: 100%;
    background: #fff; border: 1px solid var(--gris-bord); border-bottom: 3px solid var(--orange-drapeau);
    border-radius: var(--rayon); padding: 1.1rem; color: var(--encre); text-decoration: none;
}
a.tile:hover { background: var(--primaire-clair); color: var(--encre); }
.tile i { font-size: 1.5rem; color: var(--primaire); }
.tile strong { font-size: 1rem; }
.tile small { color: var(--gris-texte); }
.chiffre { background: #fff; border: 1px solid var(--gris-bord); border-radius: var(--rayon); padding: 1.1rem; height: 100%; }
.chiffre .valeur { font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--primaire); }
.chiffre .libelle { color: var(--gris-texte); font-size: 0.92rem; }
.chiffre.alerte .valeur { color: var(--alerte); }
.etape-num {
    width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--primaire); color: #fff; font-weight: 700; flex: none;
}

/* Étiquettes de statut et de priorité */
.tag {
    display: inline-block; padding: 0.15rem 0.55rem; border-radius: var(--rayon);
    font-size: 0.8rem; font-weight: 600; white-space: nowrap; background: #e6e8ec; color: #2b2f36;
}
.tag-DECLARE { background: #eceef1; color: #3d444d; }
.tag-VALIDE, .tag-ASSIGNEE { background: #fff; color: var(--orange-texte); box-shadow: inset 0 0 0 1px var(--orange-drapeau); }
.tag-EN_COURS, .tag-EN_ROUTE, .tag-SUR_PLACE { background: var(--orange-clair); color: var(--orange-texte); }
.tag-RESOLU, .tag-TERMINEE { background: #d9f2e6; color: var(--primaire-fonce); }
.tag-ANNULE, .tag-FAUX, .tag-ANNULEE { background: #e6e8ec; color: #4a4f57; }
.tag-p1 { background: #fde2df; color: #9b1c12; }
.tag-p2 { background: var(--orange-clair); color: var(--orange-texte); }
.tag-p3 { background: #eceef1; color: #3d444d; }
.tag-p4 { background: #f3f4f6; color: #5b6470; }
.tag-retard { background: var(--alerte); color: #fff; }
.ref { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; color: var(--encre); white-space: nowrap; }

/* Indicateur d'étapes (suivi et formulaire) */
.stepper { list-style: none; display: flex; padding: 0; margin: 0; counter-reset: etape; }
.stepper li { flex: 1; position: relative; text-align: center; font-size: 0.88rem; color: var(--gris-texte); padding-top: 2.6rem; counter-increment: etape; }
.stepper li::before {
    content: counter(etape); position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
    background: #fff; border: 2px solid var(--gris-bord); color: var(--gris-texte); font-weight: 700; z-index: 1;
}
.stepper li::after { content: ""; position: absolute; top: 1rem; left: -50%; width: 100%; height: 2px; background: var(--gris-bord); }
.stepper li:first-child::after { display: none; }
.stepper li.fait { color: var(--encre); }
.stepper li.fait::before { content: "✓"; background: var(--primaire); border-color: var(--primaire); color: #fff; }
.stepper li.fait::after, .stepper li.courant::after { background: var(--succes); }
.stepper li.courant { color: var(--primaire); font-weight: 700; }
.stepper li.courant::before { background: var(--orange-drapeau); border-color: var(--orange-drapeau); color: var(--encre); }

/* Formulaire de signalement */
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem; }
.type-option { position: relative; }
.type-option input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.type-option label {
    display: flex; flex-direction: column; gap: 0.4rem; height: 100%; cursor: pointer;
    background: #fff; border: 2px solid var(--gris-bord); border-radius: var(--rayon); padding: 0.9rem; font-weight: 600;
}
.type-option label i { font-size: 1.4rem; color: var(--primaire); }
.type-option label small { font-weight: 400; color: var(--gris-texte); }
.type-option input:checked + label { border-color: var(--primaire); background: var(--primaire-clair); }
.type-option input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
fieldset legend { font-size: 1.15rem; font-weight: 700; }
.form-label { font-weight: 600; }
.form-text { color: var(--gris-texte); }
.form-control, .form-select { border-radius: var(--rayon); border-color: #8d95a3; }
.piege { position: absolute; left: -9999px; }
.resultats-adresse { list-style: none; padding: 0; margin: 0.25rem 0 0; border: 1px solid var(--gris-bord); border-radius: var(--rayon); background: #fff; }
.resultats-adresse:empty { display: none; }
.resultats-adresse button { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--gris-bord); padding: 0.5rem 0.75rem; }
.resultats-adresse li:last-child button { border-bottom: 0; }
.resultats-adresse button:hover { background: var(--primaire-clair); }

/* Cartes géographiques */
.carte { height: 420px; border: 1px solid var(--gris-bord); border-radius: var(--rayon); z-index: 0; }
.carte-sm { height: 280px; }
.carte-lg { height: 600px; }
.legende { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: 0.88rem; }
.legende span::before { content: ""; display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 50%; margin-right: 0.35rem; background: var(--c); vertical-align: -1px; }

/* Tableaux et historique */
.table { --bs-table-bg: transparent; margin: 0; }
.table thead th { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--gris-texte); border-bottom-width: 2px; white-space: nowrap; }
.table td { vertical-align: middle; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 1.1rem 1.4rem; border-left: 2px solid var(--gris-bord); margin-left: 0.4rem; }
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline li::before { content: ""; position: absolute; left: -0.45rem; top: 0.3rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--orange-drapeau); }
.timeline time { color: var(--gris-texte); font-size: 0.85rem; }
dl.fiche { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0; }
dl.fiche dt { color: var(--gris-texte); font-weight: 500; }
dl.fiche dd { margin: 0; }

/* Tâches du tableau de bord : un grand chiffre, une phrase, un clic */
.tache {
    display: flex; align-items: center; gap: 1rem; height: 100%; padding: 1.1rem;
    background: #fff; border: 1px solid var(--gris-bord); border-left: 6px solid var(--gris-bord);
    border-radius: var(--rayon); color: var(--encre); text-decoration: none;
}
.tache:hover { background: var(--fond); color: var(--encre); }
.tache-nombre { font-size: 2.4rem; font-weight: 700; line-height: 1; min-width: 2.6rem; text-align: center; color: var(--gris-texte); }
.tache-texte small { display: block; color: var(--gris-texte); }
.tache-active { border-left-color: var(--orange-drapeau); }
.tache-active .tache-nombre { color: var(--orange-texte); }
.tache-urgente { border-left-color: var(--alerte); }
.tache-urgente .tache-nombre { color: var(--alerte); }

/* Étape suivante d'un incident : la consigne et son bouton */
.etape-suivante {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
    background: var(--orange-clair); border-left: 6px solid var(--orange-drapeau);
    border-radius: 0 var(--rayon) var(--rayon) 0; padding: 1rem 1.25rem;
}

/* Filtres rapides (liste des incidents) */
.filtres-rapides { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filtres-rapides a {
    padding: 0.4rem 0.9rem; border: 1px solid var(--gris-bord); border-radius: 99px;
    background: #fff; color: var(--encre); text-decoration: none; font-weight: 500;
}
.filtres-rapides a:hover { background: var(--primaire-clair); }
.filtres-rapides a.actif { background: var(--primaire); border-color: var(--primaire); color: #fff; }

/* Onglets de l'administration */
.onglets-gestion .nav-link { color: var(--encre); font-weight: 500; }
.onglets-gestion .nav-link.active { color: var(--primaire); border-bottom-color: #fff; font-weight: 700; }
.list-group-item form { margin: 0; }

/* Cloche des notifications */
.cloche { position: relative; }
.cloche-nombre {
    position: absolute; top: -0.5rem; right: -0.5rem; min-width: 1.25rem; padding: 0 0.3rem;
    border-radius: 99px; background: var(--alerte); color: #fff; font-size: 0.72rem; font-weight: 700; line-height: 1.25rem;
}
.notification-nouvelle { background: var(--orange-clair); }

/* Pied de page */
.site-footer { background: #fff; border-top: 3px solid var(--vert-drapeau); margin-top: 3rem; padding: 1.75rem 0; font-size: 0.92rem; }
.site-footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; padding: 0; margin: 0; }
.site-footer .urgence { color: var(--gris-texte); }

@media (max-width: 575.98px) {
    .hero { padding: 2rem 0; }
    .hero h1 { font-size: 1.7rem; }
    .stepper li { font-size: 0.75rem; }
    .brand-tagline { display: none; }
}

/* Barre du bouton « Enregistrer » des paramètres : reste visible en bas de page */
.barre-enregistrer { position: sticky; bottom: 0; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--fond); padding: 0.75rem 0; border-top: 1px solid var(--gris-bord); z-index: 5; }