/* =====================================================================
   DIGI-PND — MAQUETTE de la nouvelle interface (3 écrans)
   Principes : une seule source de couleurs (ci-dessous), titres sobres,
   orange et rouge réservés aux alertes, chiffres alignés, menu latéral,
   barre de contexte. Indépendant du template SySPerf.
   ===================================================================== */

:root {
    /* Couleurs — identité SySPerf (vert #009e95, orange #fd7e14) en version institutionnelle */
    --m-encre: #1b2b29;
    --m-texte: #3a4846;
    --m-gris: #6b7876;
    --m-gris-clair: #97a3a1;
    --m-bordure: #e1e7e5;
    --m-fond: #f3f6f5;
    --m-surface: #ffffff;
    --m-vert: #007a73;          /* texte, liens, boutons (contraste AA sur blanc) */
    --m-vert-fonce: #00615b;
    --m-vert-vif: #009e95;      /* accents : barres, sélection, focus */
    --m-vert-pale: #e6f5f4;
    --m-orange: #fd7e14;        /* accent secondaire, avec parcimonie */
    --m-menu-fond: #0e3a36;     /* menu latéral */
    /* Couleurs d'état : réservées aux alertes et aux signaux */
    --m-ok: #2e7d32;      --m-ok-pale: #e8f3e9;
    --m-attention: #b45309; --m-attention-pale: #fdf3e6;
    --m-alerte: #c62828;  --m-alerte-pale: #fbeceb;
    --m-info: #1f5fa8;    --m-info-pale: #eaf1fa;
    /* Relief léger : ni plat, ni « carte flottante » */
    --m-ombre: 0 1px 2px rgba(16, 40, 37, .05), 0 2px 10px rgba(16, 40, 37, .04);
    --m-ombre-survol: 0 2px 4px rgba(16, 40, 37, .06), 0 8px 20px rgba(16, 40, 37, .07);
    /* Espacements, rayons, polices */
    --m-rayon: 8px;
    --m-menu-l: 252px;
    --m-barre-h: 60px;
    --m-police: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --m-titre: 'Poppins', 'Source Sans 3', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body.immobi {
    margin: 0; font-family: var(--m-police); font-size: 15px; line-height: 1.5;
    color: var(--m-texte); background: var(--m-fond);
    -webkit-font-smoothing: antialiased;
}
.chiffre, .m-table td.num, .m-kpi-valeur { font-variant-numeric: tabular-nums; }
a { color: var(--m-vert); }
:focus-visible { outline: 2px solid var(--m-vert); outline-offset: 2px; }

/* ---------- Liseré national ---------- */
.m-lisere { position: fixed; top: 0; left: 0; right: 0; height: 3px; display: flex; z-index: 60; }
.m-lisere span { flex: 1; }
.m-lisere span:nth-child(1) { background: #f77f00; }
.m-lisere span:nth-child(2) { background: #fff; }
.m-lisere span:nth-child(3) { background: #009e60; }

/* ---------- Menu latéral ---------- */
.m-menu {
    position: fixed; top: 3px; bottom: 0; left: 0; width: var(--m-menu-l); z-index: 50;
    background: var(--m-menu-fond); color: rgba(255,255,255,.82);
    display: flex; flex-direction: column;
}
.m-marque { display: flex; align-items: center; gap: 10px; height: var(--m-barre-h); padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.08); text-decoration: none; }
.m-marque img { height: 36px; }
.m-marque strong { display: block; font-family: var(--m-titre); font-size: 16px; font-weight: 600; color: #fff; letter-spacing: .6px; line-height: 1.1; }
.m-marque small { display: block; font-size: 11.5px; color: rgba(255,255,255,.6); }
.m-nav { flex: 1; overflow-y: auto; padding: 10px 10px 16px; }
.m-nav-groupe { font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: rgba(255,255,255,.45); padding: 16px 10px 6px; }
.m-nav a {
    display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--m-rayon);
    color: rgba(255,255,255,.82); text-decoration: none; font-size: 14.5px;
}
.m-nav a i { font-size: 18px; color: rgba(255,255,255,.55); width: 20px; text-align: center; }
.m-nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.m-nav a.actif { background: var(--m-vert-vif); color: #fff; font-weight: 600; }
.m-nav a.actif i { color: #fff; }
.m-compteur { margin-left: auto; min-width: 22px; padding: 0 6px; border-radius: 10px; font-size: 12px; font-weight: 600; text-align: center; background: var(--m-orange); color: #fff; }
.m-menu-pied { padding: 12px 18px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; color: rgba(255,255,255,.55); }
.m-menu-pied a { color: rgba(255,255,255,.7); }

/* ---------- Barre de contexte ---------- */
.m-barre {
    position: fixed; top: 3px; left: var(--m-menu-l); right: 0; height: var(--m-barre-h); z-index: 40;
    background: var(--m-surface); border-bottom: 1px solid var(--m-bordure);
    display: flex; align-items: center; gap: 14px; padding: 0 24px;
}
.m-burger { display: none; border: none; background: none; font-size: 24px; color: var(--m-encre); padding: 4px; }
.m-contexte { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: nowrap; }
.m-contexte-element {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px;
    border: 1px solid var(--m-bordure); border-radius: var(--m-rayon); background: var(--m-surface);
    font-size: 14px; color: var(--m-encre); white-space: nowrap; cursor: pointer;
}
.m-contexte-element small { color: var(--m-gris); font-size: 12px; }
.m-contexte-element i { color: var(--m-gris); }
.m-contexte-element:hover { border-color: var(--m-gris-clair); }
.m-recherche { flex: 1; max-width: 360px; margin-left: auto; position: relative; }
.m-recherche input { width: 100%; height: 36px; padding: 0 12px 0 34px; border: 1px solid var(--m-bordure); border-radius: var(--m-rayon); background: var(--m-fond); font: inherit; font-size: 14px; color: var(--m-encre); }
.m-recherche input:focus { outline: none; background: #fff; border-color: var(--m-vert); }
.m-recherche i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--m-gris); }
.m-icone-btn { position: relative; border: none; background: none; width: 36px; height: 36px; border-radius: var(--m-rayon); color: var(--m-texte); font-size: 21px; }
.m-icone-btn:hover { background: var(--m-fond); }
.m-pastille { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--m-alerte); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 16px; }
.m-utilisateur { display: flex; align-items: center; gap: 10px; padding-left: 14px; border-left: 1px solid var(--m-bordure); }
.m-initiales { width: 34px; height: 34px; border-radius: 50%; background: var(--m-vert); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.m-utilisateur strong { display: block; font-size: 14px; color: var(--m-encre); line-height: 1.15; }
.m-utilisateur small { display: block; font-size: 12px; color: var(--m-gris); }

/* ---------- Contenu ---------- */
.m-page { margin-left: var(--m-menu-l); padding: calc(var(--m-barre-h) + 3px + 24px) 32px 48px; max-width: 1480px; }
.m-ariane { font-size: 13px; color: var(--m-gris); margin-bottom: 6px; }
.m-ariane a { color: var(--m-gris); text-decoration: none; }
.m-ariane a:hover { color: var(--m-vert); text-decoration: underline; }
.m-entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.m-entete h1 { margin: 0; font-family: var(--m-titre); font-size: 24px; font-weight: 600; color: var(--m-encre); line-height: 1.25; letter-spacing: -.2px; }
.m-entete p { margin: 4px 0 0; color: var(--m-gris); font-size: 14px; }
/* Le titre et son sous-titre prennent la place (le sous-titre passe à la ligne) ; les boutons restent à droite */
.m-entete > :first-child { flex: 1 1 360px; min-width: 0; }
.m-entete > .m-actions { margin-left: auto; flex-shrink: 0; }
.m-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Boutons */
.m-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--m-rayon); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; border: 1px solid transparent; white-space: nowrap; }
.m-btn i { font-size: 17px; }
.m-btn-principal { background: var(--m-vert); color: #fff; }
.m-btn-principal:hover { background: var(--m-vert-fonce); color: #fff; }
.m-btn-secondaire { background: #fff; color: var(--m-encre); border-color: var(--m-bordure); }
.m-btn-secondaire:hover { border-color: var(--m-gris-clair); color: var(--m-encre); }
.m-btn-danger { background: #fff; color: var(--m-alerte); border-color: #efc9c7; }
.m-btn-danger:hover { background: var(--m-alerte-pale); }
.m-btn-petit { height: 30px; padding: 0 10px; font-size: 13px; }

/* Blocs */
.m-bloc { background: var(--m-surface); border: 1px solid var(--m-bordure); border-radius: var(--m-rayon); box-shadow: var(--m-ombre); }
.m-bloc-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--m-bordure); flex-wrap: wrap; }
.m-bloc-entete h2 { margin: 0; font-family: var(--m-titre); font-size: 15px; font-weight: 600; color: var(--m-encre); }
.m-bloc-entete .m-source { font-size: 12.5px; color: var(--m-gris); }
.m-bloc-corps { padding: 16px 18px; }
.m-grille { display: grid; gap: 20px; margin-bottom: 20px; }
.m-g-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.m-g-3-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.m-g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* Signaux */
.m-signal { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; }
.m-signal.ok { background: var(--m-ok); } .m-signal.attention { background: #d97706; } .m-signal.alerte { background: var(--m-alerte); } .m-signal.neutre { background: var(--m-gris-clair); }
.m-statut { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 2px 8px; border-radius: 4px; white-space: nowrap; }
.m-statut.soumise { background: var(--m-info-pale); color: var(--m-info); }
.m-statut.renvoyee { background: var(--m-alerte-pale); color: var(--m-alerte); }
.m-statut.validee { background: var(--m-ok-pale); color: var(--m-ok); }
.m-statut.brouillon { background: var(--m-fond); color: var(--m-gris); }
.m-statut.anomalie { background: var(--m-attention-pale); color: var(--m-attention); }

/* ===== ÉCRAN 1 : accueil ===== */
.m-taches { list-style: none; margin: 0; padding: 0; }
.m-tache { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--m-bordure); }
.m-tache:first-child { border-top: none; }
.m-tache .m-tache-nombre { font-family: var(--m-titre); font-size: 22px; font-weight: 600; color: var(--m-encre); text-align: right; font-variant-numeric: tabular-nums; }
.m-tache.urgent .m-tache-nombre { color: var(--m-alerte); }
.m-tache strong { display: block; color: var(--m-encre); font-weight: 600; }
.m-tache span { font-size: 13.5px; color: var(--m-gris); }

.m-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 20px; }
.m-kpi { padding: 16px 18px; border-left: 1px solid var(--m-bordure); }
.m-kpi:first-child { border-left: none; }
.m-kpi-libelle { font-size: 13.5px; color: var(--m-gris); }
.m-kpi-valeur { font-family: var(--m-titre); font-size: 28px; font-weight: 600; color: var(--m-encre); line-height: 1.15; margin: 4px 0 2px; }
.m-kpi-valeur small { font-size: 15px; font-weight: 600; color: var(--m-gris); }
.m-kpi-detail { font-size: 13px; color: var(--m-gris); }
.m-tendance { font-weight: 600; }
.m-tendance.hausse { color: var(--m-ok); } .m-tendance.baisse { color: var(--m-alerte); }
.m-jauge { height: 6px; background: #edf1f0; border-radius: 3px; margin-top: 10px; position: relative; }
.m-jauge-remplie { height: 100%; border-radius: 3px; background: var(--m-vert-vif); }
.m-jauge-cible { position: absolute; top: -4px; width: 2px; height: 14px; background: var(--m-encre); }

/* Carte des régions (tuiles) */
.m-carte { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; max-width: 520px; margin: 0 auto; }
.m-region {
    aspect-ratio: 1.25; border-radius: 4px; padding: 4px 5px; font-size: 10.5px; line-height: 1.15; font-weight: 600;
    display: flex; flex-direction: column; justify-content: space-between; cursor: default; min-width: 0; overflow: hidden; overflow-wrap: anywhere; hyphens: auto;
}
.m-region b { font-size: 12px; font-variant-numeric: tabular-nums; }
.m-region.ok { background: #cfe6d1; color: #1b4d1e; }
.m-region.attention { background: #f6dfbf; color: #6b3606; }
.m-region.alerte { background: #f2c9c6; color: #7a1b1b; }
.m-region.district { outline: 2px solid var(--m-encre); outline-offset: -2px; }
.m-region.vide { visibility: hidden; }
.m-legende { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 12px; font-size: 13px; color: var(--m-gris); }
.m-legende span { display: inline-flex; align-items: center; gap: 6px; }
.m-legende i { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }

/* Barres horizontales : réalisé contre cible */
.m-barres { display: flex; flex-direction: column; gap: 14px; }
.m-barre-ligne { display: grid; grid-template-columns: 170px minmax(0, 1fr) 56px; align-items: center; gap: 12px; }
.m-barre-libelle { font-size: 14px; color: var(--m-encre); line-height: 1.25; }
.m-barre-libelle small { display: block; color: var(--m-gris); font-size: 12px; }
.m-barre-piste { position: relative; height: 14px; background: #edf1f0; border-radius: 2px; }
.m-barre-valeur { height: 100%; border-radius: 2px; }
.m-barre-valeur.ok { background: var(--m-ok); } .m-barre-valeur.attention { background: #d97706; } .m-barre-valeur.alerte { background: var(--m-alerte); } .m-barre-valeur.neutre { background: var(--m-vert-vif); }
.m-barre-repere { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--m-encre); }
.m-barre-chiffre { font-weight: 700; color: var(--m-encre); text-align: right; font-variant-numeric: tabular-nums; }
.m-note { font-size: 12.5px; color: var(--m-gris); margin-top: 12px; }

/* Barre empilée des statuts */
.m-empile { display: flex; height: 18px; border-radius: 3px; overflow: hidden; }
.m-empile span { height: 100%; }

/* ===== ÉCRAN 2 : liste ===== */
.m-onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--m-bordure); margin-bottom: 14px; overflow-x: auto; }
.m-onglets a { padding: 10px 14px; color: var(--m-gris); text-decoration: none; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.m-onglets a.actif { color: var(--m-vert); border-bottom-color: var(--m-vert-vif); }
.m-onglets a span { font-weight: 400; color: var(--m-gris); margin-left: 4px; }
.m-filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.m-filtre { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 12px; border: 1px solid var(--m-bordure); border-radius: 16px; background: #fff; font-size: 13.5px; color: var(--m-encre); }
.m-filtre small { color: var(--m-gris); }
.m-filtre button { border: none; background: none; color: var(--m-gris); font-size: 16px; line-height: 1; padding: 2px; border-radius: 50%; }
.m-filtre button:hover { background: var(--m-fond); color: var(--m-encre); }
.m-filtre-ajout { border-style: dashed; color: var(--m-vert); cursor: pointer; padding-right: 12px; }
.m-filtres .m-recherche-liste { margin-left: auto; position: relative; }
.m-recherche-liste input { height: 34px; width: 260px; padding: 0 12px 0 32px; border: 1px solid var(--m-bordure); border-radius: var(--m-rayon); font: inherit; font-size: 14px; }
.m-recherche-liste i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--m-gris); }

.m-selection { display: none; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 10px; background: var(--m-menu-fond); color: #fff; border-radius: var(--m-rayon); flex-wrap: wrap; }
.m-selection.visible { display: flex; }
.m-selection strong { margin-right: auto; }
.m-selection .m-btn-secondaire { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.m-selection .m-btn-secondaire:hover { border-color: #fff; color: #fff; }

/* Un tableau trop large défile dans son cadre, jamais la page. */
.m-table-cadre { overflow-x: auto; max-width: 100%; position: relative; } /* position : contient aussi les libellés invisibles placés en absolu */
.m-table { width: 100%; border-collapse: collapse; min-width: 880px; }
.m-table th { background: #fafbfb; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--m-gris); padding: 10px 12px; border-bottom: 1px solid var(--m-bordure); white-space: nowrap; }
.m-table td { padding: 11px 12px; border-bottom: 1px solid var(--m-bordure); vertical-align: middle; font-size: 14px; }
.m-table td.num, .m-table th.num { text-align: right; }
.m-table tbody tr { cursor: pointer; }
.m-table tbody tr:hover td { background: #f7faf9; }
.m-table tbody tr.coche td { background: var(--m-vert-pale); }
.m-table input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--m-vert); cursor: pointer; }
.m-code { font-weight: 600; color: var(--m-encre); }
.m-sous { display: block; font-size: 12.5px; color: var(--m-gris); }
.m-pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; font-size: 13.5px; color: var(--m-gris); flex-wrap: wrap; }

/* ===== ÉCRAN 3 : formulaire ===== */
.m-circuit { display: flex; margin-bottom: 22px; background: #fff; border: 1px solid var(--m-bordure); border-radius: var(--m-rayon); overflow-x: auto; }
.m-etape { flex: 1; min-width: 150px; padding: 12px 16px; border-left: 1px solid var(--m-bordure); position: relative; }
.m-etape:first-child { border-left: none; }
.m-etape-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700; border: 1px solid var(--m-gris-clair); color: var(--m-gris); margin-right: 6px; }
.m-etape strong { font-size: 14px; color: var(--m-gris); }
.m-etape small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--m-gris); }
.m-etape.fait .m-etape-num { background: var(--m-ok); border-color: var(--m-ok); color: #fff; }
.m-etape.fait strong { color: var(--m-encre); }
.m-etape.encours { background: var(--m-vert-pale); }
.m-etape.encours .m-etape-num { background: var(--m-vert-vif); border-color: var(--m-vert-vif); color: #fff; }
.m-etape.encours strong { color: var(--m-vert-fonce); }

.m-section { padding: 18px 20px; border-top: 1px solid var(--m-bordure); }
.m-section:first-child { border-top: none; }
.m-section h3 { margin: 0 0 4px; font-family: var(--m-titre); font-size: 15px; font-weight: 600; color: var(--m-encre); }
.m-section > p { margin: 0 0 14px; font-size: 13.5px; color: var(--m-gris); }
.m-champs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.m-champ label { display: block; font-size: 13.5px; font-weight: 600; color: var(--m-encre); margin-bottom: 5px; }
.m-champ label .req { color: var(--m-alerte); }
.m-saisie { display: flex; align-items: center; height: 40px; border: 1px solid #c8d1cf; border-radius: 4px; background: #fff; overflow: hidden; }
.m-saisie:focus-within { border-color: var(--m-vert); box-shadow: inset 0 0 0 1px var(--m-vert); }
.m-saisie input, .m-saisie select { flex: 1; min-width: 0; height: 100%; border: none; outline: none; padding: 0 10px; font: inherit; font-size: 15px; color: var(--m-encre); background: transparent; }
.m-saisie input.droite { text-align: right; font-variant-numeric: tabular-nums; }
.m-unite { padding: 0 10px; height: 100%; display: flex; align-items: center; background: #f4f6f5; border-left: 1px solid #c8d1cf; color: var(--m-gris); font-size: 13.5px; }
.m-saisie.calcule { background: #f7f9f8; }
.m-aide { font-size: 12.5px; color: var(--m-gris); margin-top: 4px; }
.m-zone-texte { width: 100%; min-height: 96px; border: 1px solid #c8d1cf; border-radius: 4px; padding: 10px; font: inherit; font-size: 15px; color: var(--m-encre); resize: vertical; }
.m-zone-texte:focus { outline: none; border-color: var(--m-vert); box-shadow: inset 0 0 0 1px var(--m-vert); }
.m-table-desag { width: 100%; border-collapse: collapse; }
.m-table-desag th, .m-table-desag td { padding: 6px 8px; border-bottom: 1px solid var(--m-bordure); font-size: 14px; text-align: left; }
.m-table-desag th { font-size: 12.5px; color: var(--m-gris); font-weight: 600; }
.m-table-desag input { width: 100%; height: 34px; border: 1px solid #c8d1cf; border-radius: 4px; padding: 0 8px; text-align: right; font: inherit; font-variant-numeric: tabular-nums; }
.m-depot { border: 1px dashed #b9c4c2; border-radius: var(--m-rayon); padding: 16px; text-align: center; color: var(--m-gris); font-size: 14px; background: #fafbfb; }
.m-depot a { font-weight: 600; }
.m-fichiers { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.m-fichier { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--m-bordure); border-radius: var(--m-rayon); }
.m-vignette { width: 44px; height: 44px; border-radius: 4px; background-size: cover; background-position: center; flex-shrink: 0; background-color: #e9eeed; display: flex; align-items: center; justify-content: center; color: var(--m-gris); font-size: 20px; }
.m-fichier strong { display: block; font-size: 14px; color: var(--m-encre); }
.m-fichier small { font-size: 12.5px; color: var(--m-gris); }
.m-fichier .m-icone-btn { margin-left: auto; font-size: 18px; }

.m-fiche dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.m-fiche dt { color: var(--m-gris); }
.m-fiche dd { margin: 0; color: var(--m-encre); text-align: right; font-variant-numeric: tabular-nums; }
.m-message { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--m-rayon); font-size: 14px; }
.m-message i { font-size: 20px; flex-shrink: 0; }
.m-message.attention { background: var(--m-attention-pale); color: #7a3c06; }
.m-message.attention i { color: var(--m-attention); }
.m-message.ok { background: var(--m-ok-pale); color: #1b4d1e; }
.m-message.alerte { background: var(--m-alerte-pale); color: #7a1b1b; }
.m-message.alerte i { color: var(--m-alerte); }
.m-chrono { list-style: none; margin: 0; padding: 0; }
.m-chrono li { position: relative; padding: 0 0 14px 18px; font-size: 14px; }
.m-chrono li::before { content: ''; position: absolute; left: 3px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--m-gris-clair); }
.m-chrono li::after { content: ''; position: absolute; left: 6px; top: 16px; bottom: 0; width: 1px; background: var(--m-bordure); }
.m-chrono li:last-child::after { display: none; }
.m-chrono strong { color: var(--m-encre); font-weight: 600; }
.m-chrono small { display: block; color: var(--m-gris); font-size: 12.5px; }
.m-chrono q { display: block; margin-top: 4px; padding: 6px 10px; background: var(--m-fond); border-radius: 4px; color: var(--m-texte); font-size: 13.5px; quotes: none; }

.m-barre-actions {
    position: sticky; bottom: 0; z-index: 5; margin: 20px calc(-1 * var(--m-page-px, 32px)) -48px; padding: 12px var(--m-page-px, 32px);
    background: rgba(255,255,255,.96); border-top: 1px solid var(--m-bordure);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.m-barre-actions .m-info-enreg { margin-right: auto; font-size: 13px; color: var(--m-gris); }

/* Bandeau de maquette */
.m-bandeau-maquette { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 16px; border: 1px dashed #c8d1cf; border-radius: var(--m-rayon); font-size: 13px; color: var(--m-gris); background: #fff; }
.m-bandeau-maquette a { margin-left: auto; }

/* ===== Responsive ===== */
.m-voile { display: none; }
@media (max-width: 1280px) {
    .m-g-3-2, .m-g-2-1 { grid-template-columns: minmax(0, 1fr); }
    .m-contexte-element.m-masquable { display: none; }
}
@media (max-width: 1100px) {
    .m-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .m-kpi:nth-child(3) { border-left: none; }
    .m-kpi:nth-child(n+3) { border-top: 1px solid var(--m-bordure); }
    .m-champs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 992px) {
    .m-menu { transform: translateX(-100%); transition: transform .25s ease; box-shadow: none; }
    body.menu-ouvert .m-menu { transform: none; box-shadow: 8px 0 24px rgba(0,0,0,.12); }
    body.menu-ouvert .m-voile { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 45; }
    .m-barre { left: 0; padding: 0 12px; gap: 8px; }
    .m-burger { display: block; }
    .m-page { margin-left: 0; padding: calc(var(--m-barre-h) + 3px + 16px) 16px 40px; }
    .m-recherche { display: none; }
    .m-utilisateur div { display: none; }
    .m-utilisateur { padding-left: 8px; margin-left: auto; }
    .m-g-2 { grid-template-columns: minmax(0, 1fr); }
    .m-barre-actions { margin: 20px -16px -40px; padding: 10px 16px; }
}
@media (max-width: 640px) {
    .m-contexte-element:not(.m-essentiel) { display: none; }
    .m-entete h1 { font-size: 22px; }
    .m-kpis { grid-template-columns: minmax(0, 1fr); }
    .m-kpi { border-left: none; border-top: 1px solid var(--m-bordure); }
    .m-kpi:first-child { border-top: none; }
    .m-tache { grid-template-columns: 40px minmax(0, 1fr); padding: 12px 14px; }
    .m-tache .m-btn { grid-column: 2; justify-self: start; }
    .m-barre-ligne { grid-template-columns: 110px minmax(0, 1fr) 46px; gap: 8px; }
    .m-region { font-size: 8.5px; padding: 2px 3px; }
    .m-region b { font-size: 10px; }
    .m-champs { grid-template-columns: minmax(0, 1fr); }
    .m-filtres .m-recherche-liste { margin-left: 0; width: 100%; }
    .m-recherche-liste input { width: 100%; }
    .m-barre-actions .m-info-enreg { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .m-menu { transition: none; } }

/* ===== Téléphone : chaque ligne de tableau devient une carte ===== */
@media (max-width: 640px) {
    .m-table-cadre:has(> .m-table) { overflow: visible; } /* les lignes deviennent des cartes ; les autres tableaux gardent leur défilement */
    .m-table { min-width: 0; }
    .m-table thead { display: none; }
    .m-table, .m-table tbody, .m-table tr, .m-table td { display: block; width: 100%; }
    .m-table tbody tr { position: relative; padding: 12px 14px 12px 44px; border-bottom: 1px solid var(--m-bordure); }
    .m-table td { padding: 0; border: none; text-align: left !important; }
    .m-table td.c-coche { position: absolute; left: 14px; top: 14px; width: auto; }
    .m-table td.c-indicateur, .m-table td.c-principal { margin-bottom: 8px; }
    .m-table td[data-libelle] {
        display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; font-size: 13.5px;
    }
    .m-table td[data-libelle]::before { content: attr(data-libelle); color: var(--m-gris); font-size: 12.5px; flex-shrink: 0; }
    .m-table td .v { text-align: right; min-width: 0; }
    .m-table td.c-structure .m-sous, .m-table td.c-par .m-sous { display: block; }
    .m-table td.c-valeur .m-sous { display: inline; }
    .m-table td.c-controle, .m-table td.c-bas { margin-top: 8px; }
    .m-table td.c-actions { margin-top: 10px; }
    .m-table td.c-masque-mobile { display: none; }
    .m-table tbody tr:hover td { background: transparent; }
    .m-table tbody tr.coche { background: var(--m-vert-pale); }
    .m-pagination { justify-content: center; }
}
/* Barre de contexte très étroite : le sélecteur de périmètre se raccourcit au lieu de passer sous la cloche */
@media (max-width: 640px) {
    .m-contexte { flex: 1; min-width: 0; }
    .m-contexte-element.m-essentiel { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .m-utilisateur { margin-left: 0; }
}

/* =====================================================================
   BIBLIOTHÈQUE DE COMPOSANTS (tous les écrans de la maquette)
   ===================================================================== */

/* --- Pastilles de filtre colorées avec compteur (reprises de la liste des utilisateurs SySPerf) ---
   <button class="m-pastille-filtre actif" style="--c:#009e95">Tous <b>124</b></button> */
.m-pastilles-filtre { display: flex; flex-wrap: wrap; gap: 6px; }
.m-pastille-filtre {
    --c: var(--m-vert-vif);
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
    border: 1px solid var(--c); border-radius: 16px; background: #fff; color: var(--c);
    font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s;
}
.m-pastille-filtre b { font-weight: 600; font-size: 12px; padding: 0 6px; border-radius: 9px; background: color-mix(in srgb, var(--c) 14%, #fff); }
.m-pastille-filtre:hover, .m-pastille-filtre.actif { background: var(--c); color: #fff; }
.m-pastille-filtre:hover b, .m-pastille-filtre.actif b { background: rgba(255,255,255,.25); color: #fff; }

/* --- Barre d'outils de liste : filtres + recherche + bascule de vue --- */
.m-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--m-bordure); }
.m-outils .m-recherche-liste { margin-left: auto; }
.m-select { height: 34px; padding: 0 30px 0 10px; border: 1px solid var(--m-bordure); border-radius: 6px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%236b7876' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 8px center; appearance: none; font: inherit; font-size: 14px; color: var(--m-encre); }
.m-vue { display: inline-flex; border: 1px solid var(--m-bordure); border-radius: 6px; overflow: hidden; }
.m-vue button { border: none; background: #fff; width: 36px; height: 32px; color: var(--m-gris); font-size: 18px; cursor: pointer; }
.m-vue button + button { border-left: 1px solid var(--m-bordure); }
.m-vue button.actif { background: var(--m-vert-pale); color: var(--m-vert); }

/* --- Avatars et étiquettes --- */
.m-personne { display: flex; align-items: center; gap: 10px; min-width: 0; }
.m-personne strong { display: block; color: var(--m-encre); font-weight: 600; line-height: 1.2; }
.m-personne small { display: block; color: var(--m-gris); font-size: 12.5px; }
.m-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--m-titre); font-size: 13px; font-weight: 600; color: #fff; background: var(--m-vert-vif);
    border: 2px solid #fff; box-shadow: 0 1px 4px rgba(16,40,37,.15); object-fit: cover;
}
.m-avatar.grand { width: 64px; height: 64px; font-size: 20px; }
.m-avatar.c1 { background: #009e95; } .m-avatar.c2 { background: #1f5fa8; } .m-avatar.c3 { background: #b45309; }
.m-avatar.c4 { background: #6d3fb5; } .m-avatar.c5 { background: #0e3a36; } .m-avatar.c6 { background: #c2410c; }
.m-etiquette { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; background: var(--m-info-pale); color: var(--m-info); margin: 1px 2px 1px 0; white-space: nowrap; }
.m-etiquette.vert { background: var(--m-vert-pale); color: var(--m-vert); }
.m-etiquette.orange { background: #fff1e6; color: #b45309; }
.m-etiquette.gris { background: var(--m-fond); color: var(--m-gris); }
.m-etiquette.violet { background: #f1ebfb; color: #6d3fb5; }

/* --- Boutons d'action carrés (lignes de tableau) --- */
.m-btn-icone { width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--m-bordure); background: #fff; color: var(--m-gris); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; cursor: pointer; text-decoration: none; transition: all .15s; }
.m-btn-icone:hover { border-color: var(--m-vert-vif); color: var(--m-vert); background: var(--m-vert-pale); }
.m-btn-icone.danger:hover { border-color: #efc9c7; color: var(--m-alerte); background: var(--m-alerte-pale); }
.m-actions-ligne { display: inline-flex; gap: 4px; }

/* --- Grille de cartes (vue « cartes » des listes, projets, utilisateurs) --- */
.m-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; padding: 16px; }
.m-carte-item { background: #fff; border: 1px solid var(--m-bordure); border-radius: var(--m-rayon); padding: 16px; box-shadow: var(--m-ombre); transition: box-shadow .2s, transform .2s; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.m-carte-item:hover { box-shadow: var(--m-ombre-survol); transform: translateY(-1px); }
.m-carte-item h3 { margin: 0; font-family: var(--m-titre); font-size: 14.5px; font-weight: 600; color: var(--m-encre); line-height: 1.35; }
.m-carte-pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--m-bordure); }

/* --- Barre de progression avec libellé --- */
.m-progression { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.m-progression-piste { height: 8px; background: #edf1f0; border-radius: 4px; overflow: hidden; }
.m-progression-valeur { height: 100%; border-radius: 4px; background: var(--m-vert-vif); }
.m-progression-valeur.attention { background: #d97706; } .m-progression-valeur.alerte { background: var(--m-alerte); } .m-progression-valeur.bleu { background: var(--m-info); }
.m-progression b { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--m-encre); min-width: 38px; text-align: right; }
.m-progression-libelle { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--m-gris); margin-bottom: 4px; }

/* --- Statistiques compactes en ligne --- */
.m-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; }
.m-stat { padding: 14px 16px; border-left: 1px solid var(--m-bordure); }
.m-stat:first-child { border-left: none; }
.m-stat span { display: block; font-size: 13px; color: var(--m-gris); }
.m-stat strong { display: block; font-family: var(--m-titre); font-size: 22px; font-weight: 600; color: var(--m-encre); font-variant-numeric: tabular-nums; line-height: 1.25; }
.m-stat small { font-size: 12.5px; color: var(--m-gris); }

/* --- Liste de définitions (fiches) --- */
.m-dl { display: grid; grid-template-columns: minmax(130px, auto) 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
.m-dl dt { color: var(--m-gris); }
.m-dl dd { margin: 0; color: var(--m-encre); }

/* --- Arborescence (cadre de résultats) --- */
.m-arbre { list-style: none; margin: 0; padding: 0; }
.m-arbre ul { list-style: none; margin: 0; padding-left: 22px; border-left: 1px dashed var(--m-bordure); margin-left: 9px; }
.m-arbre details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; }
.m-arbre details > summary::-webkit-details-marker { display: none; }
.m-arbre details > summary::before { content: '\25B8'; color: var(--m-gris); width: 12px; transition: transform .15s; }
.m-arbre details[open] > summary::before { transform: rotate(90deg); }
.m-arbre summary:hover, .m-arbre .m-feuille:hover { background: var(--m-fond); }
.m-arbre .m-feuille { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 28px; border-radius: 6px; }
.m-code-niveau { font-family: var(--m-titre); font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 4px; background: var(--m-fond); color: var(--m-gris); white-space: nowrap; }
.m-arbre .m-droite { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--m-gris); white-space: nowrap; }

/* --- Calendrier mensuel (étapes de réforme, activités de PTA) --- */
.m-mois { display: grid; grid-template-columns: repeat(12, minmax(18px, 1fr)); gap: 2px; }
.m-mois span { height: 18px; border-radius: 3px; background: #edf1f0; font-size: 10px; text-align: center; line-height: 18px; color: var(--m-gris-clair); }
.m-mois span.prevu { background: #cfe9e7; color: var(--m-vert-fonce); }
.m-mois span.fait { background: var(--m-vert-vif); color: #fff; }
.m-mois span.retard { background: #f6d2cf; color: var(--m-alerte); }
.m-mois-entete span { background: none; color: var(--m-gris); font-weight: 600; }

/* --- Colonnes de suivi (mesures correctives) --- */
.m-colonnes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.m-colonne { background: #eef2f1; border-radius: var(--m-rayon); padding: 12px; min-width: 0; }
.m-colonne h3 { margin: 0 0 10px; font-family: var(--m-titre); font-size: 13.5px; font-weight: 600; color: var(--m-encre); display: flex; justify-content: space-between; }
.m-colonne h3 span { color: var(--m-gris); font-weight: 500; }
.m-colonne .m-carte-item { padding: 12px; margin-bottom: 10px; gap: 6px; }

/* --- Interrupteur --- */
.m-interrupteur { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--m-encre); }
.m-interrupteur input { position: absolute; opacity: 0; }
.m-interrupteur i { width: 36px; height: 20px; border-radius: 10px; background: #c8d1cf; position: relative; transition: background .15s; flex-shrink: 0; }
.m-interrupteur i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.m-interrupteur input:checked + i { background: var(--m-vert-vif); }
.m-interrupteur input:checked + i::after { left: 18px; }
.m-interrupteur input:focus-visible + i { outline: 2px solid var(--m-vert); outline-offset: 2px; }

/* --- Graphiques Chart.js --- */
.m-graphique { position: relative; height: 260px; }

/* --- État vide --- */
.m-vide { text-align: center; padding: 40px 20px; color: var(--m-gris); }
.m-vide i { font-size: 40px; color: var(--m-gris-clair); }
.m-vide h3 { margin: 10px 0 4px; font-family: var(--m-titre); font-size: 16px; color: var(--m-encre); }

/* --- Sélecteur de champ générique dans les formulaires --- */
.m-champ select.m-select, .m-champ input.m-input { width: 100%; height: 40px; }
.m-input { height: 40px; padding: 0 10px; border: 1px solid #c8d1cf; border-radius: 4px; font: inherit; font-size: 15px; color: var(--m-encre); background: #fff; }
.m-input:focus, .m-select:focus { outline: none; border-color: var(--m-vert-vif); box-shadow: inset 0 0 0 1px var(--m-vert-vif); }

/* --- Responsive des composants --- */
@media (max-width: 992px) {
    .m-colonnes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .m-outils { padding: 10px; }
    .m-outils .m-recherche-liste { margin-left: 0; width: 100%; }
    .m-cartes { grid-template-columns: minmax(0, 1fr); padding: 12px; }
    .m-stat { border-left: none; border-top: 1px solid var(--m-bordure); }
    .m-stat:first-child { border-top: none; }
    .m-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .m-dl dd { margin-bottom: 8px; }
    .m-mois { grid-template-columns: repeat(12, minmax(14px, 1fr)); }
    .m-mois span { font-size: 0; height: 14px; }
    .m-arbre ul { padding-left: 12px; margin-left: 4px; }
    .m-arbre .m-droite { display: none; }
}

/* Champ de recherche des listes : l icone se place dans le champ, quel que soit le conteneur */
.m-recherche-liste { position: relative; }

/* Circuit de validation sur téléphone : étapes empilées */
@media (max-width: 640px) {
    .m-circuit { flex-direction: column; overflow: visible; }
    .m-etape { min-width: 0; border-left: none; border-top: 1px solid var(--m-bordure); }
    .m-etape:first-child { border-top: none; }
}
/* La page et ses blocs ne s'élargissent jamais au-delà de l'écran */
.m-page, .m-bloc, .m-grille > * { min-width: 0; }

/* Petites tables (désagrégation, répartitions) : les libellés longs passent à la ligne */
.m-table-desag th, .m-table-desag td { overflow-wrap: anywhere; }
@media (max-width: 400px) {
    .m-table-desag th, .m-table-desag td { padding: 6px 4px; font-size: 13px; }
}

/* Pièces justificatives : un nom de fichier long passe à la ligne au lieu de pousser le bouton hors écran */
.m-fichier > div { min-width: 0; overflow-wrap: anywhere; }
.m-fichier .m-icone-btn { flex-shrink: 0; }

/* =====================================================================
   VOLET LATÉRAL (saisie et validation sans quitter la liste) et NOTIFICATIONS
   ===================================================================== */
/* <div class="m-volet" id="volet" aria-hidden="true"><div class="m-volet-voile" data-fermer></div>
     <aside class="m-volet-panneau" role="dialog" aria-modal="true" aria-labelledby="voletTitre">
       <header class="m-volet-entete"><div><small>IP1.1.1</small><h2 id="voletTitre">…</h2></div><button class="m-btn-icone" data-fermer aria-label="Fermer"><i class="bx bx-x"></i></button></header>
       <div class="m-volet-corps">…</div>
       <footer class="m-volet-pied">…boutons…</footer>
     </aside></div>
   Ouvrir / fermer : MQ.ouvrirVolet('volet') / MQ.fermerVolet('volet') (layout) ; Échap et clic sur le voile ferment. */
.m-volet { position: fixed; inset: 0; z-index: 80; visibility: hidden; }
.m-volet.ouvert { visibility: visible; }
.m-volet-voile { position: absolute; inset: 0; background: rgba(14, 58, 54, .35); opacity: 0; transition: opacity .2s; }
.m-volet.ouvert .m-volet-voile { opacity: 1; }
.m-volet-panneau {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100vw);
    background: #fff; box-shadow: -8px 0 30px rgba(16, 40, 37, .18);
    display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s ease;
}
.m-volet.ouvert .m-volet-panneau { transform: none; }
.m-volet-panneau.large { width: min(760px, 100vw); }
.m-volet-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--m-bordure); }
.m-volet-entete small { display: block; font-size: 12.5px; color: var(--m-gris); font-weight: 600; letter-spacing: .3px; }
.m-volet-entete h2 { margin: 2px 0 0; font-family: var(--m-titre); font-size: 17px; font-weight: 600; color: var(--m-encre); line-height: 1.3; }
.m-volet-corps { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.m-volet-pied { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--m-bordure); background: #fafbfb; }
.m-volet-pied .m-gauche { margin-right: auto; }
.m-volet .m-champs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) {
    .m-volet .m-champs { grid-template-columns: minmax(0, 1fr); }
    .m-volet-pied .m-btn { flex: 1; justify-content: center; }
    .m-volet-pied .m-gauche { flex-basis: 100%; }
}

/* Notifications éphémères : MQ.toast('Saisie validée', 'ok' | 'alerte' | 'info') */
.m-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 120; display: flex; flex-direction: column; gap: 8px; max-width: calc(100vw - 32px); }
.m-toast { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 6px; background: var(--m-menu-fond); color: #fff; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.18); animation: m-toast-entree .2s ease; }
.m-toast i { font-size: 19px; color: #7fd8d1; }
.m-toast.alerte i { color: #ffb4ab; }
@keyframes m-toast-entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Ligne qui disparaît après une action (validée, renvoyée) */
.m-ligne-sortie { transition: opacity .35s ease; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .m-volet-panneau, .m-volet-voile { transition: none; } .m-toast { animation: none; } }

/* =====================================================================
   CARTE DE CÔTE D'IVOIRE (Leaflet + maquette-carte.js)
   ===================================================================== */
.m-carte-geo { height: 540px; border-radius: 6px; background: #eef3f2; border: 1px solid var(--m-bordure); }
.m-carte-geo.petite { height: 380px; }
.m-carte-geo .leaflet-container, .m-carte-geo.leaflet-container { font-family: var(--m-police); background: #eef3f2; }
.leaflet-container .mq-infobulle { font-family: var(--m-police); font-size: 13px; border-radius: 4px; border: none; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.leaflet-container .leaflet-popup-content { font-family: var(--m-police); font-size: 13.5px; margin: 10px 12px; }
.leaflet-container .leaflet-popup-content a { color: var(--m-vert); font-weight: 600; }
.leaflet-container .leaflet-control-attribution { font-size: 10px; }
.m-carte-options { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 10px; }
@media (max-width: 640px) {
    .m-carte-geo { height: 360px; }
    .m-carte-geo.petite { height: 300px; }
}

/* =====================================================================
   MENUS DÉROULANTS DE LA BARRE DU HAUT (contexte + utilisateur)
   ===================================================================== */
.m-selecteur { position: relative; min-width: 0; }
.m-contexte-element .m-selecteur-valeur { font-weight: 600; }
.m-selecteur.ouvert > .m-contexte-element { border-color: var(--m-vert); }
.m-deroulant {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 230px; max-width: 340px;
    background: var(--m-surface); border: 1px solid var(--m-bordure); border-radius: var(--m-rayon);
    box-shadow: 0 10px 28px rgba(14,58,54,.14); padding: 6px;
}
.m-deroulant.large { width: 330px; }
.m-deroulant.droite { left: auto; right: 0; }
.m-selecteur.ouvert > .m-deroulant { display: block; }
.m-deroulant-defile { max-height: min(420px, 60vh); overflow-y: auto; }
.m-deroulant-groupe { padding: 10px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; color: var(--m-gris); }
.m-deroulant-separateur { height: 1px; background: var(--m-bordure); margin: 6px 4px; }
.m-deroulant-recherche { position: relative; margin: 2px 2px 6px; }
.m-deroulant-recherche i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--m-gris); }
.m-deroulant-recherche input { width: 100%; height: 34px; padding: 0 10px 0 32px; border: 1px solid var(--m-bordure); border-radius: var(--m-rayon); font: inherit; font-size: 14px; color: var(--m-encre); background: var(--m-fond); }
.m-deroulant-recherche input:focus { outline: none; border-color: var(--m-vert); background: #fff; }
.m-deroulant-vide { padding: 10px; margin: 0; font-size: 13.5px; color: var(--m-gris); }
.m-deroulant-choix, .m-deroulant-lien {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: none; border-radius: 6px;
    background: none; font: inherit; font-size: 14px; color: var(--m-encre); text-align: left; text-decoration: none; cursor: pointer;
}
.m-deroulant-choix small { margin-left: auto; font-size: 12px; color: var(--m-gris); white-space: nowrap; }
.m-deroulant-choix > i { color: var(--m-vert); font-size: 18px; visibility: hidden; flex-shrink: 0; }
.m-deroulant-choix small + i { margin-left: 0; }
.m-deroulant-choix:not(:has(small)) > i { margin-left: auto; }
.m-deroulant-choix.choisi { font-weight: 600; color: var(--m-vert); background: var(--m-vert-pale); }
.m-deroulant-choix.choisi > i { visibility: visible; }
.m-deroulant-choix:hover:not(:disabled), .m-deroulant-lien:hover, .m-deroulant-choix:focus-visible, .m-deroulant-lien:focus-visible { background: var(--m-fond); outline: none; }
.m-deroulant-choix.choisi:hover { background: var(--m-vert-pale); }
.m-deroulant-choix:disabled { color: var(--m-gris-clair); cursor: not-allowed; }
.m-deroulant-choix[hidden], .m-deroulant-groupe[hidden] { display: none; }
.m-deroulant-lien i { font-size: 18px; color: var(--m-gris); width: 20px; text-align: center; }
.m-deroulant-lien .m-compteur { margin-left: auto; }
.m-deroulant-lien.danger, .m-deroulant-lien.danger i { color: var(--m-alerte); }
.m-deroulant form { margin: 0; }

/* Menu utilisateur : s'ouvre au survol (souris) et au clic (tactile, clavier) */
.m-selecteur-utilisateur .m-utilisateur { border: none; border-left: 1px solid var(--m-bordure); background: none; font: inherit; text-align: left; cursor: pointer; padding-top: 4px; padding-bottom: 4px; }
.m-utilisateur-fleche { color: var(--m-gris); font-size: 18px; transition: transform .15s; }
.m-selecteur-utilisateur.ouvert .m-utilisateur-fleche { transform: rotate(180deg); }
.m-deroulant-utilisateur { width: 290px; }
.m-deroulant-utilisateur::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; } /* pont pour le survol */
.m-deroulant-entete { display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--m-bordure); }
.m-deroulant-entete strong { display: block; font-size: 14.5px; color: var(--m-encre); }
.m-deroulant-entete small { display: block; font-size: 12.5px; color: var(--m-gris); overflow-wrap: anywhere; }
.m-deroulant-entete .m-initiales { flex-shrink: 0; }
.m-deroulant-utilisateur .m-deroulant-choix small { display: none; }
@media (hover: hover) and (min-width: 993px) {
    .m-selecteur-utilisateur:hover > .m-deroulant { display: block; }
    .m-selecteur-utilisateur:hover .m-utilisateur-fleche { transform: rotate(180deg); }
}

/* Exercice et période repris dans le menu du périmètre quand la barre est trop étroite */
.m-deroulant-mobile { display: none; }
.m-deroulant-mobile label { display: block; font-size: 12px; color: var(--m-gris); margin-bottom: 3px; }
.m-deroulant-mobile select { width: 100%; height: 36px; padding: 0 8px; border: 1px solid var(--m-bordure); border-radius: var(--m-rayon); font: inherit; font-size: 14px; background: #fff; color: var(--m-encre); }

@media (max-width: 1280px) {
    .m-contexte-element.m-masquable { display: inline-flex; }
    .m-contexte-element.m-masquable small { display: none; }
}
@media (max-width: 992px) {
    .m-selecteur-utilisateur { margin-left: auto; }
    .m-selecteur-utilisateur .m-utilisateur { margin-left: 0; }
    .m-utilisateur-fleche { display: none; }
}
@media (max-width: 640px) {
    .m-contexte-element.m-masquable { display: none; }
    .m-contexte .m-selecteur[data-cle="perimetre"] { min-width: 0; max-width: 100%; }
    .m-contexte .m-selecteur[data-cle="perimetre"] .m-contexte-element { width: 100%; }
    .m-contexte-element .m-selecteur-valeur { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .m-selecteur-utilisateur { margin-left: 0; }
    .m-deroulant, .m-deroulant.large, .m-deroulant.droite {
        position: fixed; top: calc(var(--m-barre-h) + 8px); left: 12px; right: 12px; width: auto; max-width: none; min-width: 0;
        max-height: calc(100vh - var(--m-barre-h) - 24px); overflow-y: auto;
    }
    .m-deroulant-mobile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 10px 4px 4px; margin-top: 6px; border-top: 1px solid var(--m-bordure); }
}

/* =====================================================================
   MENU LATÉRAL RÉDUCTIBLE (ordinateur) — body.menu-reduit
   ===================================================================== */
.m-reduire {
    position: absolute; top: calc(var(--m-barre-h) + 3px + 14px); right: -13px; z-index: 2;
    width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--m-bordure); background: var(--m-surface);
    color: var(--m-encre); display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.m-reduire:hover { color: var(--m-vert); border-color: var(--m-vert); }
.m-reduire i { transition: transform .2s; }
body.menu-anime .m-menu, body.menu-anime .m-barre, body.menu-anime .m-page { transition: width .2s ease, left .2s ease, margin-left .2s ease; }
@media (min-width: 993px) {
    body.menu-reduit { --m-menu-l: 72px; }
    body.menu-reduit .m-reduire i { transform: rotate(180deg); }
    body.menu-reduit .m-marque { justify-content: center; padding: 0; }
    body.menu-reduit .m-marque > span, body.menu-reduit .m-menu-pied { display: none; }
    body.menu-reduit .m-nav-libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    body.menu-reduit .m-nav { padding: 10px 12px 16px; overflow-x: hidden; }
    body.menu-reduit .m-nav-groupe { font-size: 0; padding: 0; height: 1px; margin: 10px 6px; background: rgba(255,255,255,.12); }
    body.menu-reduit .m-nav a { position: relative; justify-content: center; padding: 9px 0; }
    body.menu-reduit .m-nav a i { font-size: 20px; }
    body.menu-reduit .m-nav a .m-compteur { position: absolute; top: 4px; right: 6px; min-width: 0; width: 9px; height: 9px; padding: 0; font-size: 0; border: 2px solid var(--m-menu-fond); box-sizing: content-box; }
}
@media (max-width: 992px) { .m-reduire { display: none; } }
@media (prefers-reduced-motion: reduce) { body.menu-anime .m-menu, body.menu-anime .m-barre, body.menu-anime .m-page { transition: none; } }

/* Infobulle du menu réduit (nom de la rubrique survolée) */
.m-infobulle-menu {
    position: fixed; z-index: 70; transform: translate(-4px, -50%); opacity: 0; pointer-events: none;
    display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px;
    background: var(--m-menu-fond); color: #fff; font-size: 13.5px; font-weight: 500; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0,0,0,.18); transition: opacity .12s, transform .12s;
}
.m-infobulle-menu::before { content: ""; position: absolute; left: -5px; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left: 0; border-right-color: var(--m-menu-fond); }
.m-infobulle-menu.visible { opacity: 1; transform: translate(0, -50%); }
.m-infobulle-menu b { min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--m-orange); font-size: 11.5px; text-align: center; }

/* Contenu centré dans l'espace restant (menu ouvert ou réduit) */
@media (min-width: 993px) {
    .m-page { --m-page-px: max(32px, calc((100vw - var(--m-menu-l) - 1480px) / 2 + 32px)); max-width: none; padding-left: var(--m-page-px); padding-right: var(--m-page-px); }
}

/* =====================================================================
   RETOURS DE FORMULAIRES (utils.js)
   ===================================================================== */
/* Champ en erreur : bordure rouge + message sous le champ */
.m-input.error_border, .m-champ select.error_border, .m-champ textarea.error_border,
.m-saisie.error_border, input.error_border, select.error_border, textarea.error_border {
    border-color: var(--m-alerte) !important; box-shadow: 0 0 0 3px rgba(198, 40, 40, .12);
}
.m-saisie.error_border input, .m-saisie.error_border select { box-shadow: none; }
.m-erreur-champ { display: flex; align-items: flex-start; gap: 5px; margin-top: 5px; font-size: 13px; line-height: 1.35; color: var(--m-alerte); }
.m-erreur-champ i { font-size: 15px; margin-top: 1px; flex-shrink: 0; }
.m-erreurs-resume { margin-bottom: 14px; }
.m-champ textarea { width: 100%; min-height: 90px; padding: 8px 10px; border: 1px solid #c8d1cf; border-radius: 4px; font: inherit; font-size: 15px; color: var(--m-encre); resize: vertical; }
.m-input:focus, .m-champ select:focus, .m-champ textarea:focus { outline: none; border-color: var(--m-vert); box-shadow: 0 0 0 3px rgba(0, 158, 149, .14); }

/* Indicateur de chargement (bouton, volet, écran) */
.m-rond-chargement { display: inline-block; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: m-tourne .7s linear infinite; vertical-align: -2px; }
.m-rond-chargement.grand { width: 34px; height: 34px; border-width: 3px; color: var(--m-vert); }
.m-btn.m-en-cours { cursor: progress; opacity: .85; justify-content: center; }
.m-btn.m-en-cours .m-rond-chargement { margin-right: 2px; }
.m-chargement-bloc { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 10px; color: var(--m-gris); font-size: 14px; }
.m-ecran-chargement { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .6); }
.m-ecran-chargement > div { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 28px; background: #fff; border: 1px solid var(--m-bordure); border-radius: var(--m-rayon); box-shadow: 0 10px 28px rgba(14, 58, 54, .14); font-size: 14px; color: var(--m-encre); }
@keyframes m-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .m-rond-chargement { animation-duration: 1.6s; } }
.m-btn-danger-plein { background: var(--m-alerte); color: #fff; }
.m-btn-danger-plein:hover { background: #a61f1f; color: #fff; }

/* Fenêtre centrée (utils.loadModal / utils.ouvrirModal) */
.m-modale { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; }
.m-modale-voile { position: absolute; inset: 0; background: rgba(14, 58, 54, .35); opacity: 0; transition: opacity .2s; }
.m-modale-boite { position: relative; width: 100%; max-height: 88vh; display: flex; flex-direction: column; background: #fff; border-radius: var(--m-rayon); box-shadow: 0 18px 50px rgba(14, 58, 54, .22); opacity: 0; transform: translateY(12px); transition: opacity .2s, transform .2s; }
.m-modale-boite.moyenne { max-width: 520px; } .m-modale-boite.large { max-width: 780px; } .m-modale-boite.tres-large { max-width: 1100px; }
.m-modale-boite.plein-ecran { max-width: none; max-height: none; height: 100%; }
.m-modale.ouverte .m-modale-voile { opacity: 1; }
.m-modale.ouverte .m-modale-boite { opacity: 1; transform: none; }
.m-modale-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--m-bordure); }
.m-modale-entete h2 { margin: 0; font-family: var(--m-titre); font-size: 17px; font-weight: 600; color: var(--m-encre); }
.m-modale-corps { padding: 18px 20px; overflow-y: auto; }
@media (max-width: 640px) { .m-modale { padding: 0; } .m-modale-boite, .m-modale-boite.moyenne, .m-modale-boite.large, .m-modale-boite.tres-large { max-width: none; max-height: 100%; border-radius: 0 0 var(--m-rayon) var(--m-rayon); } }

/* SweetAlert2 aux couleurs du template */
.swal2-container { font-family: var(--m-police); }
.m-swal { border-radius: 10px !important; padding: 26px 22px 22px !important; width: min(440px, calc(100vw - 32px)) !important; }
.m-swal .swal2-title { font-family: var(--m-titre); font-size: 19px; font-weight: 600; color: var(--m-encre); padding: 4px 8px 0; }
.m-swal .swal2-html-container, .m-swal-texte { font-size: 15px; color: var(--m-texte); margin: 8px 0 0; }
.m-swal .swal2-icon { transform: scale(.78); margin: 4px auto -6px; }
.m-swal .swal2-input-label { font-size: 13.5px; font-weight: 600; color: var(--m-encre); justify-content: flex-start; margin: 14px 6px 0; }
.m-swal .swal2-textarea { margin: 6px 6px 0; font: inherit; font-size: 15px; border: 1px solid #c8d1cf; border-radius: 4px; box-shadow: none; }
.m-swal .swal2-textarea:focus { border-color: var(--m-vert); box-shadow: 0 0 0 3px rgba(0, 158, 149, .14); }
.m-swal .swal2-validation-message { background: var(--m-alerte-pale, #fbeceb); color: var(--m-alerte); font-size: 13.5px; }
.m-swal-actions { gap: 8px; margin-top: 18px !important; }
.m-swal .swal2-loader { border-color: var(--m-vert) transparent var(--m-vert) transparent; }
.m-swal-toast { border-radius: 8px !important; box-shadow: 0 8px 22px rgba(0, 0, 0, .18) !important; padding: 10px 14px !important; }
.m-swal-toast .swal2-title { font-size: 14.5px !important; font-weight: 600 !important; margin: 0 6px !important; color: #fff !important; }
.m-swal-toast .swal2-icon { transform: scale(.85); }
@media (max-width: 640px) { .swal2-container.swal2-top-end { left: 12px !important; right: 12px !important; } .m-swal-toast { width: 100% !important; } }
.m-swal-toast .swal2-close { color: rgba(255, 255, 255, .8); font-size: 22px; }
.m-swal-toast .swal2-timer-progress-bar { background: rgba(255, 255, 255, .45); }
.swal2-container.swal2-top-end { top: calc(var(--m-barre-h) + 8px) !important; }
/* Interrupteur placé dans un .m-champ (le style des libellés de champ ne doit pas l'écraser) */
.m-champ label.m-interrupteur { display: inline-flex; margin-bottom: 0; font-weight: 400; font-size: 14px; }
.m-interrupteur i { display: inline-block; }
.m-interrupteur input.error_border + i { box-shadow: 0 0 0 2px var(--m-alerte); }

/* Bloc rechargé en arrière-plan (utils.rechargerBloc) : contenu visible sous un voile + rond de chargement */
.m-bloc-charge { position: relative; pointer-events: none; }
.m-bloc-charge::before { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(255, 255, 255, .55); }
.m-bloc-charge::after {
    content: ""; position: absolute; z-index: 3; left: 50%; top: min(50%, 120px); width: 30px; height: 30px; margin: -15px 0 0 -15px;
    border: 3px solid var(--m-vert); border-right-color: transparent; border-radius: 50%; animation: m-tourne .7s linear infinite;
}

/* ===== Listes de référentiels (patron index / liste / action / formulaire) ===== */
/* Critères de recherche repliables, sous la barre d'outils */
.m-criteres-panneau { display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--m-bordure); background: #fafbfb; }
.m-criteres-panneau.ouvert { display: grid; }
.m-criteres-panneau .m-champ label { font-size: 12.5px; color: var(--m-gris); font-weight: 600; }
.m-criteres-panneau .m-criteres-pied { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
[data-basculer][aria-expanded=true] { background: var(--m-vert-pale); border-color: var(--m-vert); color: var(--m-vert); }
/* Menu d'actions d'une ligne : placé en position fixe par utils.basculerMenuLigne() */
.m-menu-ligne { display: inline-block; }
.m-menu-ligne > .m-deroulant { position: fixed; top: 0; left: 0; min-width: 220px; }
.m-menu-ligne.ouvert > .m-deroulant { display: block; }
.m-deroulant-lien.danger { color: var(--m-alerte); }
.m-deroulant-lien > i { font-size: 18px; color: var(--m-gris); }
.m-deroulant-lien.danger > i { color: var(--m-alerte); }
/* Liste à cocher groupée (permissions d'un rôle, acteurs autorisés) */
.m-groupe-coches { border: 1px solid var(--m-bordure); border-radius: var(--m-rayon); background: #fff; margin-bottom: 10px; }
.m-groupe-coches > header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--m-bordure); background: #fafbfb; }
.m-groupe-coches > header strong { font-size: 14px; }
.m-groupe-coches > header .m-sous { display: inline; margin-left: 4px; }
.m-groupe-coches > header .m-compte-coches { margin-left: auto; font-size: 12.5px; color: var(--m-gris); white-space: nowrap; }
.m-coches { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 16px; padding: 10px 14px; }
.m-coche { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; cursor: pointer; }
.m-coche input, .m-groupe-coches > header input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--m-vert); flex-shrink: 0; }
.m-coche strong { display: block; font-size: 14px; font-weight: 600; color: var(--m-encre); }
.m-coche small { display: block; font-size: 12.5px; color: var(--m-gris); line-height: 1.4; }
.m-coche[hidden] { display: none; }
@media (max-width: 1100px) { .m-criteres-panneau { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .m-criteres-panneau { grid-template-columns: minmax(0, 1fr); } .m-coches { grid-template-columns: minmax(0, 1fr); } }
.m-champ.plein { grid-column: 1 / -1; }
.m-groupe-coches[hidden] { display: none; }
.m-titre-section { margin: 20px 0 4px; font-family: var(--m-titre); font-size: 15px; font-weight: 600; color: var(--m-encre); }
.m-masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== Tableaux DataTables (canevas de budget : Excel, PDF, Imprimer, Colonnes) ===== */
.m-dt { overflow: visible; }
.m-dt .dataTables_wrapper { position: relative; }
.m-dt-haut, .m-dt-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13.5px; color: var(--m-gris); }
/* Barre du tableau comme budget : Afficher [25] éléments · Rechercher : [……] · Excel PDF Colonnes */
.m-dt-haut { gap: 14px 5%; padding: 14px 18px; color: var(--m-encre); font-size: 14.5px; }
.m-dt .dataTables_filter { flex: 0 1 38%; min-width: 260px; }
.m-dt .dataTables_filter label { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; font-weight: 400; }
.m-dt .dataTables_filter input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--m-bordure); border-radius: var(--m-rayon); background: #fff; font: inherit; font-size: 14px; color: var(--m-encre); }
.m-dt .dataTables_filter input:focus { outline: none; border-color: var(--m-vert-vif); box-shadow: 0 0 0 3px rgba(0,158,149,.15); }
.m-dt-haut { border-bottom: 1px solid var(--m-bordure); }
.m-dt-bas { justify-content: space-between; }
.m-dt .dataTables_length label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; }
.m-dt .dataTables_length select { height: 34px; min-width: 100px; padding: 0 24px 0 10px; border: 1px solid var(--m-bordure); border-radius: var(--m-rayon); background: #fff; font: inherit; font-size: 13.5px; color: var(--m-encre); }
.m-dt .dt-buttons { display: inline-flex; flex-wrap: nowrap; }
/* Boutons d'export au design de budget (resources/views/partials/style.blade.php de budget) :
   fond blanc, bordure de la couleur principale (#009e95), texte gris, en groupe */
.m-dt .dt-buttons .m-dt-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 4px 12px; margin: 0 0 0 -1px; border: 1px solid var(--m-vert-vif); border-radius: 0; background: #fff; color: rgba(0,0,0,.52); font: inherit; font-size: 14px; line-height: 1.5; cursor: pointer; white-space: nowrap; position: relative; }
.m-dt .dt-buttons > .m-dt-btn:first-child { margin-left: 0; border-radius: 4px 0 0 4px; }
.m-dt .dt-buttons > :last-child .m-dt-btn, .m-dt .dt-buttons > .m-dt-btn:last-child { border-radius: 0 4px 4px 0; }
.m-dt .dt-buttons .m-dt-btn:hover { background: var(--m-vert-pale); color: var(--m-encre); z-index: 1; }
.m-dt .dt-buttons .m-dt-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,158,149,.25); z-index: 2; }
.m-dt .dt-buttons .m-dt-btn i { font-size: 20px; }
.m-dt .dt-buttons .m-dt-excel i { color: teal; }
.m-dt .dt-buttons .m-dt-pdf i { color: orange; }
.m-dt .dt-buttons .m-dt-colonnes::after { content: ''; display: inline-block; margin-left: 4px; border-top: 5px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; }
.m-dt .m-table-cadre-defile, .m-dt .dataTables_wrapper > .m-table, .m-dt table.m-table { margin: 0 !important; width: 100% !important; border-collapse: collapse !important; }
.m-dt table.dataTable thead > tr > th.sorting, .m-dt table.dataTable thead > tr > th.sorting_asc, .m-dt table.dataTable thead > tr > th.sorting_desc { cursor: pointer; padding-right: 24px; position: relative; }
.m-dt table.dataTable thead > tr > th.sorting_asc, .m-dt table.dataTable thead > tr > th.sorting_desc { color: var(--m-vert); }
.m-dt .dataTables_info { padding: 0; }
.m-dt .dataTables_paginate ul.pagination { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.m-dt .dataTables_paginate ul.pagination { gap: 0; }
.m-dt .dataTables_paginate .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 10px; margin-left: -1px; border: 1px solid var(--m-vert-vif); border-radius: 0; background: #fff; color: rgba(0,0,0,.52); text-decoration: none; font-size: 14px; }
.m-dt .dataTables_paginate .page-item:first-child .page-link { margin-left: 0; border-radius: 4px 0 0 4px; }
.m-dt .dataTables_paginate .page-item:last-child .page-link { border-radius: 0 4px 4px 0; }
.m-dt .dataTables_paginate .page-item.active .page-link { background: var(--m-vert-vif); border-color: var(--m-vert-vif); color: #fff; position: relative; z-index: 1; }
.m-dt .dataTables_paginate .page-item.disabled .page-link { color: rgba(0,0,0,.3); pointer-events: none; }
.m-dt .dataTables_paginate .page-item:not(.active) .page-link:hover { background: var(--m-vert-pale); }
.m-dt .dataTables_processing { position: absolute; inset: 0; display: flex !important; align-items: center; justify-content: center; margin: 0 !important; width: auto !important; height: auto !important; top: 0 !important; left: 0 !important; background: rgba(255,255,255,.6); border: none; box-shadow: none; font-size: 13.5px; color: var(--m-gris); z-index: 5; }
.m-dt .dataTables_processing[style*="display: none"] { display: none !important; }
.m-dt .dataTables_processing > div:last-child { display: none; }
.m-dt table.dataTable td.dataTables_empty { text-align: center; padding: 30px 12px; color: var(--m-gris); }
/* Liste « Colonnes » : cases pour afficher ou masquer */
div.dt-button-collection { position: absolute; z-index: 70; min-width: 220px; padding: 6px; background: var(--m-surface); border: 1px solid var(--m-bordure); border-radius: var(--m-rayon); box-shadow: 0 10px 28px rgba(14,58,54,.14); }
div.dt-button-collection .dt-button-collection-title { display: none; }
div.dt-button-collection [role=menu], div.dt-button-collection .dropdown-menu { display: block; position: static; border: none; box-shadow: none; padding: 0; margin: 0; min-width: 0; }
div.dt-button-collection .dt-button, div.dt-button-collection .dropdown-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: none; border-radius: 6px; background: none; font: inherit; font-size: 14px; color: var(--m-gris); text-align: left; cursor: pointer; text-decoration: line-through; }
div.dt-button-collection .dt-button.active, div.dt-button-collection .dropdown-item.active, div.dt-button-collection .dt-button.dt-button-active { color: var(--m-encre); text-decoration: none; font-weight: 600; }
div.dt-button-collection .dt-button:hover, div.dt-button-collection .dropdown-item:hover { background: var(--m-fond); }
div.dt-button-background { position: fixed; inset: 0; z-index: 69; background: transparent !important; }
@media (max-width: 640px) {
    .m-dt .dataTables_filter { flex-basis: 100%; min-width: 0; }
    .m-dt-bas { justify-content: center; }
    .m-dt table.dataTable td.dataTables_empty { display: block; }
}
.m-dt .dt-buttons .btn-group { position: relative; display: inline-flex; }
.m-dt .dt-buttons div.dt-button-collection { top: calc(100% + 4px) !important; left: auto !important; right: 0; }
.m-onglets a.inactif { color: var(--m-gris-clair); cursor: default; }
/* Chiffres clés en haut d'une fiche (volet) : en lignes, libellé à gauche, nombre à droite */
.m-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; margin: 0; padding: 6px 20px 10px; border-bottom: 1px solid var(--m-bordure); }
.m-chiffre { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--m-bordure); }
.m-chiffre:nth-last-child(1), .m-chiffre:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.m-chiffre dt { font-size: 14px; color: var(--m-gris); min-width: 0; }
.m-chiffre dt small { display: block; font-size: 12px; color: var(--m-gris-clair); }
.m-chiffre dd { margin: 0; font-family: var(--m-titre); font-size: 18px; font-weight: 600; color: var(--m-encre); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) { .m-chiffres { grid-template-columns: minmax(0, 1fr); } .m-chiffre:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--m-bordure); } }
.m-chiffres + .m-section { border-top: none; }

/* ===== Sous-menus du menu latéral (Paramètres…) ===== */
.m-nav-parent { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: none; border-radius: var(--m-rayon); background: none; color: rgba(255,255,255,.82); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; }
.m-nav-parent > i:first-child { font-size: 18px; color: rgba(255,255,255,.55); width: 20px; text-align: center; }
.m-nav-parent:hover { background: rgba(255,255,255,.07); color: #fff; }
.m-nav-parent.contient-actif { color: #fff; font-weight: 600; }
.m-nav-parent.contient-actif > i:first-child { color: #fff; }
.m-nav-chevron { margin-left: auto; font-size: 18px; color: rgba(255,255,255,.45); transition: transform .15s; }
.m-nav-sous.ouvert > .m-nav-parent .m-nav-chevron { transform: rotate(180deg); }
.m-nav-enfants { display: none; margin: 2px 0 6px 19px; padding-left: 8px; border-left: 1px solid rgba(255,255,255,.14); }
.m-nav-sous.ouvert > .m-nav-enfants { display: block; }
.m-nav-enfants a { padding: 6px 10px; font-size: 14px; }
.m-nav-enfants a i { font-size: 16px; }
body.menu-reduit .m-nav-enfants { display: none !important; }
body.menu-reduit .m-nav-parent { position: relative; justify-content: center; padding: 9px 0; }
body.menu-reduit .m-nav-parent > i:first-child { font-size: 20px; }
body.menu-reduit .m-nav-chevron { display: none; }
body.menu-reduit .m-nav-parent.contient-actif { background: var(--m-vert-vif); }
/* Liste flottante d'un sous-menu quand le menu est réduit */
.m-nav-flottant { position: fixed; z-index: 70; display: none; min-width: 220px; padding: 6px; border-radius: 6px; background: var(--m-menu-fond); box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.m-nav-flottant.visible { display: block; }
.m-nav-flottant strong { display: block; padding: 6px 10px 8px; font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: rgba(255,255,255,.5); }
.m-nav-flottant a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--m-rayon); color: rgba(255,255,255,.85); text-decoration: none; font-size: 14px; }
.m-nav-flottant a i { font-size: 16px; color: rgba(255,255,255,.55); width: 20px; text-align: center; }
.m-nav-flottant a:hover { background: rgba(255,255,255,.08); color: #fff; }
.m-nav-flottant a.actif { background: var(--m-vert-vif); color: #fff; }
.m-nav-flottant a.actif i { color: #fff; }
[data-visible-si][hidden] { display: none !important; }

/* Choix exclusifs (boutons radio) dans un champ de formulaire */
.m-champ .m-libelle { display: block; font-size: 13.5px; font-weight: 600; color: var(--m-encre); margin-bottom: 5px; }
.m-champ .m-libelle .req { color: var(--m-alerte); }
.m-champ .m-coches { padding: 0; }
.m-champ label.m-coche { display: flex; margin-bottom: 0; font-weight: 400; border: 1px solid var(--m-bordure); border-radius: 4px; padding: 8px 12px; }
.m-champ label.m-coche:has(input:checked) { border-color: var(--m-vert); }

/* ===== Logo d'une structure ===== */
.m-avec-logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.m-avec-logo > div { min-width: 0; }
.m-logo { width: 30px; height: 30px; flex-shrink: 0; object-fit: contain; border: 1px solid var(--m-bordure); border-radius: 4px; background: #fff; }
.m-logo.vide { display: inline-flex; align-items: center; justify-content: center; font-family: var(--m-titre); font-size: 10px; font-weight: 600; color: var(--m-gris); background: var(--m-fond); letter-spacing: .3px; }
.m-logo.moyen { width: 64px; height: 64px; padding: 4px; }
.m-logo.moyen.vide { font-size: 15px; }
.m-logo.grand { width: 72px; height: 72px; padding: 6px; }
.m-logo.grand.vide { font-size: 18px; }
.m-entete-structure { align-items: center; }
.m-entete-structure .m-avec-logo { gap: 16px; }
.m-champ-logo { display: flex; gap: 14px; align-items: flex-start; }
.m-champ-logo > div { flex: 1; min-width: 0; }
.m-champ-logo .m-interrupteur { margin-top: 6px; }

/* ===== Organigramme : la racine, ses entités directes en colonnes, le reste en liste dessous ===== */
.m-organigramme { overflow-x: auto; padding-bottom: 4px; }
.m-org-racine { display: flex; justify-content: center; position: relative; padding-bottom: 18px; }
.m-org-racine::after { content: ''; position: absolute; bottom: 0; left: 50%; height: 18px; border-left: 1px solid var(--m-gris-clair); }
.m-org-colonnes { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; justify-content: center; min-width: min-content; }
.m-org-colonnes > li { position: relative; padding-top: 18px; flex: 0 0 auto; width: 170px; }
/* trait horizontal qui relie les colonnes, et trait vertical vers chaque case */
.m-org-colonnes > li::before { content: ''; position: absolute; top: 0; left: -6px; right: -6px; border-top: 1px solid var(--m-gris-clair); }
.m-org-colonnes > li:first-child::before { left: 50%; }
.m-org-colonnes > li:last-child::before { right: 50%; }
.m-org-colonnes > li:only-child::before { display: none; }
.m-org-colonnes > li::after { content: ''; position: absolute; top: 0; left: 50%; height: 18px; border-left: 1px solid var(--m-gris-clair); }
.m-org-colonnes ul { list-style: none; margin: 8px 0 0 10px; padding: 0 0 0 12px; border-left: 1px solid var(--m-gris-clair); }
.m-org-colonnes ul li { margin-top: 6px; position: relative; }
.m-org-colonnes ul li::before { content: ''; position: absolute; left: -12px; top: 16px; width: 10px; border-top: 1px solid var(--m-gris-clair); }
.m-noeud { display: block; padding: 7px 10px; border: 1px solid var(--m-bordure); border-radius: 4px; background: var(--m-surface); text-decoration: none; color: var(--m-encre); font-size: 13px; line-height: 1.3; }
.m-org-colonnes > li > .m-noeud, .m-org-racine .m-noeud { text-align: center; }
.m-noeud strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
.m-noeud small { display: block; font-size: 11.5px; color: var(--m-gris); }
.m-noeud:hover { border-color: var(--m-vert); }
.m-noeud.racine { border-color: var(--m-vert); min-width: 180px; }
.m-noeud.inactif { opacity: .55; border-style: dashed; }

.m-graphe { position: relative; width: 100%; }
.m-ligne-simple { margin: 0; padding: 6px 0; font-size: 14px; border-bottom: 1px solid var(--m-bordure); }
tr[data-lien] { cursor: pointer; }
@media (max-width: 640px) { .m-entete-structure .m-logo.grand { width: 52px; height: 52px; } }

/* ===== Listes de choix (select) : toujours une flèche, même avec .m-input (qui remettait un fond uni) ===== */
select.m-select, select.m-input {
    appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 34px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23435553' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}
select.m-select:hover, select.m-input:hover { border-color: var(--m-gris-clair); }
select.m-select:disabled, select.m-input:disabled { cursor: not-allowed; background-color: var(--m-fond); color: var(--m-gris); opacity: 1; }
/* Liste à choix multiples : pas de flèche, hauteur libre */
select.m-select[multiple], select.m-input[multiple] { background-image: none; padding: 6px 10px; height: auto !important; cursor: default; }

/* ===== Zone de dépôt de fichiers (partials/depot) ===== */
.m-depot-zone { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px dashed #b9c4c2; border-radius: 4px; background: #fafbfb; cursor: pointer; transition: border-color .15s, background-color .15s; flex-wrap: wrap; }
.m-depot-zone:hover, .m-depot-zone:focus-visible { border-color: var(--m-vert); outline: none; }
.m-depot-zone.survol { border-color: var(--m-vert); border-style: solid; background: var(--m-vert-pale); }
.m-depot-zone.is-invalid { border-color: var(--m-alerte); }
.m-depot-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.m-depot-texte { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--m-gris); }
.m-depot-zone:not(.image) .m-depot-texte { align-items: center; text-align: center; }
.m-depot-texte > i { font-size: 26px; color: var(--m-vert); line-height: 1; margin-bottom: 4px; }
.m-depot-zone.image .m-depot-texte > i { display: none; }
.m-depot-texte strong { color: var(--m-encre); font-weight: 600; }
.m-depot-lien { color: var(--m-vert); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.m-depot-texte small { font-size: 12.5px; color: var(--m-gris-clair); margin-top: 2px; }
.m-depot-apercu { width: 88px; height: 88px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--m-bordure); border-radius: 4px; background: #fff; overflow: hidden; }
.m-depot-apercu img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 6px; }
.m-depot-apercu span { font-family: var(--m-titre); font-size: 18px; font-weight: 600; color: var(--m-gris-clair); }
.m-depot-fichiers { list-style: none; margin: 0; padding: 0; width: 100%; }
.m-depot-fichiers:empty { display: none; }
.m-depot-fichiers li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-top: 6px; background: #fff; border: 1px solid var(--m-bordure); border-radius: 4px; font-size: 13.5px; color: var(--m-encre); cursor: default; }
.m-depot-fichiers li i { color: var(--m-vert); font-size: 18px; }
.m-depot-fichiers li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-depot-fichiers li small { color: var(--m-gris); white-space: nowrap; }
.m-depot-fichiers li button { border: none; background: none; color: var(--m-gris); cursor: pointer; padding: 2px 4px; font-size: 18px; line-height: 1; }
.m-depot-fichiers li button:hover { color: var(--m-alerte); }
.m-depot-retirer { margin-top: 8px; }

/* Colonne « Logo » de la liste des structures : bien visible */
td.c-logo, th.c-logo { width: 76px; text-align: center; }
.m-logo.liste { width: 56px; height: 56px; padding: 4px; border-color: #d6dedc; }
.m-logo.liste.vide { font-size: 13px; }

/* Fiche d'une structure : logo bien visible en tête, dans l'organigramme et le tableau des entités */
.m-logo.fiche { width: 112px; height: 112px; padding: 8px; border-color: #d6dedc; }
.m-logo.fiche.vide { font-size: 24px; }
.m-entete-structure .m-avec-logo { gap: 20px; }
.m-noeud { display: flex; align-items: center; gap: 10px; text-align: left !important; }
.m-noeud > span { min-width: 0; }
.m-logo.noeud { width: 38px; height: 38px; padding: 3px; }
.m-logo.noeud.vide { font-size: 10.5px; }
.m-logo.noeud.racine { width: 48px; height: 48px; }
.m-noeud.racine { justify-content: center; }
@media (max-width: 640px) { .m-logo.fiche { width: 72px; height: 72px; } }

/* Total d'un tableau dans le titre : « Structures (21) », « (3 sur 21) » quand des critères filtrent */
.m-total:empty { display: none; }
.m-total { font-weight: 500; color: var(--m-gris); font-size: .8em; white-space: nowrap; }
.m-total::before { content: '('; }
.m-total::after { content: ')'; }
.m-total.filtre { color: var(--m-vert-fonce, #007a73); }

/* ===== Utilisateurs : photo ronde, chiffres clés cliquables, parcours ===== */
.m-photo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--m-bordure); background: #fff; }
.m-photo.vide { display: inline-flex; align-items: center; justify-content: center; font-family: var(--m-titre); font-size: 12px; font-weight: 600; color: var(--m-vert-fonce, #007a73); background: var(--m-vert-pale); border-color: transparent; }
.m-photo.liste { width: 48px; height: 48px; }
.m-photo.liste.vide { font-size: 15px; }
.m-photo.fiche { width: 112px; height: 112px; border-width: 2px; }
.m-photo.fiche.vide { font-size: 34px; }
.m-depot-zone.rond .m-depot-apercu { border-radius: 50%; }
.m-depot-zone.rond .m-depot-apercu img { padding: 0; width: 100%; height: 100%; object-fit: cover; }

.m-kpis-6 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.m-kpi-filtre { font: inherit; text-align: left; background: none; border: none; border-left: 1px solid var(--m-bordure); cursor: pointer; transition: background-color .15s; }
.m-kpi-filtre:first-child { border-left: none; }
.m-kpi-filtre:hover { background: var(--m-fond); }
.m-kpi-filtre.actif { background: var(--m-vert-pale); box-shadow: inset 0 -2px 0 var(--m-vert); }
@media (max-width: 900px) { .m-kpis-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .m-kpi-filtre:nth-child(odd) { border-left: none; } }

.m-coches-1 { grid-template-columns: minmax(0, 1fr); gap: 6px; }

.m-parcours-etape { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 10px 0 10px 14px; border-left: 2px solid var(--m-bordure); position: relative; font-size: 14px; }
.m-parcours-etape::before { content: ''; position: absolute; left: -6px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--m-gris-clair); }
.m-parcours-etape.actuelle::before { background: var(--m-vert); border-color: var(--m-vert); }
.m-parcours-date { color: var(--m-gris); font-size: 13px; line-height: 1.35; }
.m-parcours-date small { font-size: 12px; }

/* Lien d'action discret dans un texte (fiche) */
.m-lien-bouton { border: none; background: none; padding: 0; margin-left: 6px; color: var(--m-vert); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.m-lien-bouton:hover { color: var(--m-vert-fonce, #007a73); }

/* ===== Listes de choix en Ajax (select2) : même apparence que .m-select / .m-input ===== */
.select2-container { font: inherit; }
.select2-container.select2-container .select2-selection.select2-selection--single { height: 40px; border: 1px solid #c8d1cf; border-radius: 4px; background: #fff; display: flex; align-items: center; }
.select2-container.select2-container .select2-selection .select2-selection__rendered { padding: 0 54px 0 10px; line-height: 38px; font-size: 15px; color: var(--m-encre); }
.select2-container.select2-container .select2-selection .select2-selection__placeholder { color: var(--m-gris-clair); }
/* La flèche : celle des autres listes (même image), à la même place */
.select2-container.select2-container .select2-selection .select2-selection__arrow { height: 38px; width: 34px; right: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23435553' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat center / 16px; }
.select2-container.select2-container .select2-selection .select2-selection__arrow b { display: none; }
.select2-container--open .select2-selection .select2-selection__arrow { transform: rotate(180deg); }
.select2-container.select2-container .select2-selection .select2-selection__clear { margin-right: 30px; font-size: 18px; color: var(--m-gris); height: 38px; line-height: 36px; }
.select2-container.select2-container .select2-selection:hover { border-color: var(--m-gris-clair); }
.select2-container--focus .select2-selection, .select2-container--open .select2-selection { border-color: var(--m-vert-vif) !important; box-shadow: inset 0 0 0 1px var(--m-vert-vif); outline: none; }
/* Choix multiples : étiquettes sobres */
.select2-container.select2-container .select2-selection.select2-selection--multiple { min-height: 40px; border: 1px solid #c8d1cf; border-radius: 4px; padding: 3px 6px; }
.select2-container.select2-container .select2-selection .select2-selection__choice { background: var(--m-vert-pale); border: none; border-radius: 4px; color: var(--m-encre); font-size: 13.5px; padding: 2px 8px 2px 22px; margin: 3px 4px 0 0; }
.select2-container.select2-container .select2-selection .select2-search--inline .select2-search__field { font: inherit; font-size: 14px; margin-top: 6px; }
/* Liste déroulante */
.select2-container .select2-dropdown { border-color: var(--m-vert-vif) !important; border-radius: 4px; box-shadow: 0 6px 18px rgba(16, 42, 38, .12); font-size: 14px; z-index: 2000; }
.select2-container .select2-dropdown .select2-search__field { height: 36px; border: 1px solid #c8d1cf !important; border-radius: 4px; padding: 0 10px; font: inherit; font-size: 14px; }
.select2-container .select2-dropdown .select2-search__field:focus { outline: none; border-color: var(--m-vert-vif) !important; }
.select2-container .select2-dropdown .select2-results__option { padding: 7px 10px; }
.select2-container .select2-dropdown .select2-results__option--highlighted.select2-results__option--selectable { background: var(--m-vert-pale); color: var(--m-encre); }
.select2-container .select2-dropdown .select2-results__option--selected { background: var(--m-fond); font-weight: 600; }
.m-s2-option strong { display: block; font-weight: 600; color: var(--m-encre); }
.m-s2-option small { display: block; font-size: 12.5px; color: var(--m-gris); }
.is-invalid + .select2-container.select2-container .select2-selection { border-color: var(--m-alerte); }

/* ===== Aide et assistance (resources/views/aide/assistance.blade.php) ===== */
.p-faq details { border-top: 1px solid var(--m-bordure); }
.p-faq details:first-of-type { border-top: 0; }
.p-faq summary { cursor: pointer; padding: 11px 0; font-weight: 600; color: var(--m-encre); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.p-faq summary::-webkit-details-marker { display: none; }
.p-faq summary::after { content: "+"; color: var(--m-gris); font-weight: 400; }
.p-faq details[open] summary::after { content: "–"; }
.p-faq details p { margin: 0 0 12px; }
.p-contact { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 12px 0; }
.p-contact dt { color: var(--m-gris); font-size: 12.5px; }
.p-contact dd { margin: 0; }