/* =====================================================================
   EPBOMI-MCID Gestion — composants propres à l'application Gestion.
   Repose sur app.css (identique à l'application Rapports : mêmes
   couleurs, polices, menus, panneaux, tableaux et boutons).
   ===================================================================== */

/* --- Bandeau du tableau de bord ---------------------------------------- */
.vedette .periode { font-variant-numeric: tabular-nums; }
.partage { max-width: 440px; margin-bottom: .2rem; }
.partage-barre { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, .1); gap: 3px; }
.partage-barre span { display: block; height: 100%; border-radius: 99px; }
.partage-barre .h { background: #7fd1d9; }
.partage-barre .f { background: var(--lumiere); }
.partage-legende { display: flex; gap: 1.2rem; margin-top: .55rem; color: #cfe6e8; font-weight: 600; font-size: .92rem; flex-wrap: wrap; }
.partage-legende .pt { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .45rem; vertical-align: -.05em; }
.partage-legende .pt.h { background: #7fd1d9; }
.partage-legende .pt.f { background: var(--lumiere); }
.lien-clair { color: #dcf0f1 !important; font-weight: 700; }
.chiffres-vedette { margin: 0; display: grid; gap: .2rem; min-width: 230px; padding: 1rem 1.2rem; border-radius: 20px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.chiffres-vedette > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: .55rem 0; }
.chiffres-vedette > div + div { border-top: 1px solid rgba(255, 255, 255, .1); }
.chiffres-vedette dt { font-weight: 600; color: #a9d0d4; font-size: .92rem; }
.chiffres-vedette dd { margin: 0; font-family: var(--titre); font-weight: 800; font-size: 1.5rem; color: #fff; font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) { .chiffres-vedette { min-width: 0; } }

/* --- Listes de personnes ------------------------------------------------- */
.pastille-sexe { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; font-family: var(--titre);
  font-weight: 700; font-size: .82rem; letter-spacing: .02em; }
.pastille-sexe.h { background: #dff1f3; color: var(--royal-2); }
.pastille-sexe.f { background: var(--lumiere-pale); color: var(--lumiere-texte); }
.pastille-sexe.grande { width: 72px; height: 72px; font-size: 1.5rem; border-radius: 22px; }
.liste-personnes { list-style: none; margin: 0; padding: 0; }
.liste-personnes li + li { border-top: 1px solid var(--trait); }
.liste-personnes a { display: flex; align-items: center; gap: .8rem; padding: .65rem .2rem; color: var(--encre) !important; text-decoration: none !important; font-weight: 400 !important; }
.liste-personnes a:hover strong { text-decoration: underline; }
.liste-personnes .qui { flex: 1; min-width: 0; line-height: 1.25; }
.liste-personnes .qui strong { display: block; color: var(--nuit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liste-personnes .qui small { color: var(--encre-2); }
.table-sentinelles .personne { display: inline-flex; align-items: center; gap: .7rem; color: var(--encre) !important; font-weight: 400 !important; }
.table-sentinelles .personne strong { color: var(--nuit); }
.table-sentinelles td { padding-top: .55rem; padding-bottom: .55rem; }
.table-sentinelles td:first-child { min-width: 240px; }
.pastille-sexe:empty::before { content: "?"; }

/* --- Barres horizontales simples ----------------------------------------- */
.barres { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.barres li { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; align-items: center; gap: .7rem; font-size: .92rem; }
.barres .lib { color: var(--encre); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barres .barre, .barre-part { display: block; height: 10px; border-radius: 99px; background: var(--calcule); overflow: hidden; }
.barres .barre > span, .barre-part > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--royal), #2b98a3); }
.barres .val { font-family: var(--titre); font-weight: 700; color: var(--nuit); font-variant-numeric: tabular-nums; min-width: 2.5rem; text-align: right; }

/* --- Point mensuel ------------------------------------------------------- */
.point-resume { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--trait); border: 1px solid var(--trait); border-radius: var(--r-md); overflow: hidden; }
.point-resume > div { background: #fff; padding: .8rem .9rem; display: flex; flex-direction: column; gap: .15rem; }
.point-resume span { color: var(--encre-2); font-size: .85rem; font-weight: 600; }
.point-resume strong { font-family: var(--titre); font-size: 1.6rem; color: var(--nuit); font-variant-numeric: tabular-nums; }
.point-resume .total { background: var(--calcule); }
@media (max-width: 575.98px) { .point-resume { grid-template-columns: repeat(2, 1fr); } .point-resume .total { grid-column: span 2; } }
.mois-pastilles { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; }
.mois-pastilles a { display: block; text-align: center; padding: .4rem 0; border-radius: 10px; border: 1px solid var(--trait); background: #fff; font-weight: 700 !important;
  font-size: .85rem; color: var(--encre-3) !important; text-decoration: none !important; }
.mois-pastilles .ok a { background: var(--delivre-pale); border-color: #bfe3ca; color: var(--delivre-texte) !important; }
.mois-pastilles .manque a { background: var(--lumiere-pale); border-color: #f4d896; color: var(--lumiere-texte) !important; }
.table-point th[scope="row"] { font-weight: 600; color: var(--nuit); white-space: nowrap; }
.table-point .groupe { border-left: 2px solid var(--trait); }
.table-point thead th { text-align: inherit; }
.table-point .calc { background: var(--calcule); font-weight: 700; color: var(--nuit); }
.table-point .total { font-family: var(--titre); font-weight: 800; color: var(--nuit); }
.table-point tr.futur { color: var(--encre-3); }
.table-point tr.futur th[scope="row"] { color: var(--encre-3); font-weight: 500; }
.calc-sortie { background: var(--calcule) !important; border-style: dashed !important; text-align: right; font-weight: 800; color: var(--nuit); }
#form-point .table-rapport input.form-control { min-width: 4.5rem; }

/* --- Filtres et recherche ----------------------------------------------- */
.filtres { padding: 1rem 1.1rem; }
.filtres-ligne { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.filtres-ligne .recherche { position: relative; flex: 1 1 260px; }
.filtres-ligne .recherche .bi { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--encre-3); }
.filtres-ligne .recherche .form-control { padding-left: 2.4rem; }
.filtres-ligne > div:not(.recherche) { flex: 0 1 220px; }
.lien-discret { color: var(--encre-2) !important; font-weight: 600; }
@media (max-width: 575.98px) { .filtres-ligne > div:not(.recherche) { flex: 1 1 100%; } .filtres-ligne .btn { flex: 1 1 auto; } }

/* --- Formulaire de fiche ------------------------------------------------- */
.num-etape { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--nuit); color: #fff;
  font-size: .85rem; margin-right: .6rem; vertical-align: .1em; }
.requis { color: var(--alerte-texte); }
.choix-segment { display: flex; gap: .5rem; }
.choix-segment .btn { flex: 1; border: 1px solid #cbdcde; background: #fff; color: var(--encre); font-weight: 600; padding: .5rem .8rem; }
.choix-segment .btn:hover { border-color: var(--royal); }
.choix-segment .btn-check:checked + .btn { background: var(--royal); border-color: var(--royal); color: #fff; }
.choix-segment .btn-check:focus-visible + .btn { outline: 3px solid #4fc3d1; outline-offset: 2px; }
.valeur-fixe { margin: 0; padding: .55rem .8rem; border-radius: 10px; background: var(--calcule); font-weight: 700; color: var(--nuit); }
.valeur-fixe .bi { color: var(--royal); margin-right: .4rem; }
.rattachement { position: sticky; top: 80px; }
@media (max-width: 1199.98px) { .rattachement { position: static; } }

/* --- Fiche ---------------------------------------------------------------- */
.fiche-entete { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.fiche-entete h1 { margin: 0 0 .35rem; font-size: 2rem; }
.fiche-entete .prenom { font-weight: 500; }
dl.fiche { display: grid; grid-template-columns: minmax(130px, 40%) 1fr; margin: 0; }
dl.fiche dt, dl.fiche dd { padding: .6rem 0; border-top: 1px solid var(--trait); margin: 0; }
dl.fiche dt:first-of-type, dl.fiche dt:first-of-type + dd { border-top: 0; }
dl.fiche dt { color: var(--encre-2); font-weight: 600; }
dl.fiche dd { color: var(--nuit); font-weight: 600; }

/* --- Référentiels --------------------------------------------------------- */
.onglets-ref { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: .9rem; scrollbar-width: none; }
.onglets-ref::-webkit-scrollbar { display: none; }
.onglets-ref a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .95rem; border-radius: 99px; background: #fff;
  border: 1px solid var(--trait); color: var(--encre) !important; text-decoration: none !important; font-weight: 600 !important; font-size: .92rem; }
.onglets-ref a.actif { background: var(--nuit); border-color: var(--nuit); color: #fff !important; }
.onglets-ref a.actif .bi { color: var(--lumiere); }
.roles-aide { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; padding: .9rem 1rem; border-radius: var(--r-md); background: var(--fond); font-size: .9rem; }
.roles-aide dt { font-weight: 700; color: var(--nuit); }
.roles-aide dd { margin: 0; color: var(--encre-2); }
@media (max-width: 575.98px) { .roles-aide { grid-template-columns: 1fr; } .roles-aide dd { margin-bottom: .4rem; } }


/* Champs de saisie sur fond blanc (meilleur contraste dans les panneaux) */
.panneau .form-control:not(:disabled):not([readonly]):not(.calc-sortie), .panneau .form-select { background-color: #fff; }
#form-point td:last-child { min-width: 5.5rem; }
#form-point output { display: block; }