/* =====================================================================
   Suivi du personnel — habillage
   Thème STUDIA (défaut) : charte V2.2 « application métier » — pupitre marine
   (en-tête + rail), feuille claire pour lire, badge = pastille + mot du statut.
   Thème NEUTRE : ardoise et blanc, mêmes couleurs de statut (lisibilité).
   Toutes les couleurs passent par les variables ci-dessous.
   ===================================================================== */
:root{
  --pupitre:#061630; --pupitre-2:#0B1929; --pupitre-touche:#0D3442; --pupitre-filet:#283543;
  --pupitre-texte:#FFFFFF; --pupitre-texte-2:#A8B4C4; --pupitre-accent:#6EC1C3;
  --feuille:#FFFFFF; --fond:#F4F6F8; --filet:#E3E8EC; --alterne:#F8FAFB;
  --encre:#061630; --encre-2:#5C6675;
  --action:#15B0B6; --action-socle:#11787E; --action-texte:#061630; --accent-texte:#11787E;
  --st-ok:#99BF1C; --st-cours:#15B0B6; --st-vigil:#F8B325; --st-retard:#E7533F; --st-non:#AB9E9F; --st-requis:#C29C1E;
  --fd-ok:#F1F6DD; --fd-cours:#EAF6F6; --fd-vigil:#FEF3DE; --fd-retard:#FCE7E3; --fd-non:#F1EEEE; --fd-requis:#FEF3DE;
  --rayon:8px; --ombre:0 4px 16px rgba(6,22,48,.10);
  --police:Arial, "Helvetica Neue", Helvetica, sans-serif;
}
body[data-theme="NEUTRE"]{
  --pupitre:#1F2933; --pupitre-2:#18212A; --pupitre-touche:#2B3742; --pupitre-filet:#3A4752;
  --pupitre-accent:#9FB3C8; --action:#3E7CB1; --action-socle:#2C5D87; --action-texte:#FFFFFF; --accent-texte:#2C5D87;
  --fd-cours:#E8F0F7;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
#racine{min-height:100%}
body{font-family:var(--police);font-size:14px;color:var(--encre);background:var(--fond);line-height:1.4}
a{color:var(--accent-texte)}
button,input,select,textarea{font:inherit;color:inherit}
h1{font-size:22px;margin:0}
h2{font-size:17px;margin:0 0 10px}
h3{font-size:15px;margin:0 0 8px}
.chargement{padding:40px;text-align:center;color:var(--encre-2)}
.discret{color:var(--encre-2)}
.petit{font-size:12px}
.cache{display:none!important}
:focus-visible{outline:3px solid var(--action);outline-offset:2px}

/* ---------- touches ---------- */
.touche{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:var(--rayon);
  border:1px solid #C9D2DA;background:#fff;color:var(--encre);cursor:pointer;white-space:nowrap;font-weight:bold;font-size:13px}
.touche:hover{border-color:var(--action)}
.touche:disabled{opacity:.5;cursor:not-allowed}
.touche.principale{background:var(--action);border-color:var(--action);color:var(--action-texte);box-shadow:0 3px 0 var(--action-socle);
  margin-bottom:3px}
.touche.principale:active{transform:translateY(3px);box-shadow:none}
.touche.danger{color:#A3321F;border-color:#E9B4AB}
.touche.danger:hover{background:var(--fd-retard)}
.touche.lien{border:none;background:none;color:var(--accent-texte);text-decoration:underline;padding:0 4px;height:auto}
.touche.petite{height:30px;padding:0 10px;font-size:12px}
.touches{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- champs ---------- */
label.champ{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:bold;margin-bottom:10px}
label.champ span.aide{font-weight:normal;color:var(--encre-2);font-size:12px}
input[type=text],input[type=password],input[type=date],input[type=number],input[type=search],select,textarea{
  height:36px;border:1px solid #C9D2DA;border-radius:6px;padding:0 10px;background:#fff;font-weight:normal;min-width:0}
textarea{height:auto;padding:8px 10px;min-height:60px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--action);outline:none;box-shadow:0 0 0 3px rgba(21,176,182,.18)}
.grille2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.grille3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 16px}
.coche{display:flex;gap:8px;align-items:flex-start;font-weight:normal;margin:6px 0;cursor:pointer}
.coche input{margin-top:3px}

/* ---------- badges : pastille + mot (jamais la couleur seule) ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 8px;border-radius:12px;font-size:12px;font-weight:bold;
  white-space:nowrap;color:var(--encre);background:var(--fd-non)}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--st-non);flex:none}
.badge.retard{background:var(--fd-retard)} .badge.retard::before{background:var(--st-retard)}
.badge.vigil{background:var(--fd-vigil)} .badge.vigil::before{background:var(--st-vigil)}
.badge.ok{background:var(--fd-ok)} .badge.ok::before{background:var(--st-ok)}
.badge.cours{background:var(--fd-cours)} .badge.cours::before{background:var(--st-cours)}
.badge.saisir{background:var(--fd-non)} .badge.saisir::before{background:transparent;border:2px solid var(--st-non);width:6px;height:6px}
.badge.requis{background:var(--fd-requis)} .badge.requis::before{border-radius:1px;transform:rotate(45deg);background:transparent;border:1.5px solid var(--st-requis);width:7px;height:7px}
.badge.na{background:transparent;color:var(--encre-2);font-weight:normal} .badge.na::before{display:none}
.badge.grand{font-size:14px;padding:4px 14px 4px 10px}

/* ---------- écrans de garde (emplacement, assistant, connexion) ---------- */
.garde{min-height:100vh;background:var(--pupitre);display:flex;align-items:flex-start;justify-content:center;padding:48px 16px}
.carte-garde{background:var(--feuille);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.35);width:100%;max-width:560px;padding:28px 32px}
.carte-garde.large{max-width:820px}
.garde .entete-garde{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.garde .entete-garde img{height:34px}
.etapes{display:flex;gap:6px;margin:0 0 18px;padding:0;list-style:none;counter-reset:e}
.etapes li{flex:1;border-top:4px solid var(--filet);padding-top:6px;font-size:12px;color:var(--encre-2);counter-increment:e}
.etapes li::before{content:counter(e) " · "}
.etapes li.faite{border-color:var(--st-ok);color:var(--encre)}
.etapes li.active{border-color:var(--action);color:var(--encre);font-weight:bold}
.choix-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.choix-carte{border:2px solid var(--filet);border-radius:var(--rayon);padding:12px;cursor:pointer;background:#fff;text-align:left}
.choix-carte:hover{border-color:var(--action)}
.choix-carte.choisie{border-color:var(--action);background:var(--fd-cours)}
.choix-carte b{display:block;margin-bottom:4px}
.choix-carte span{font-size:12px;color:var(--encre-2)}
.choix-carte[disabled]{opacity:.5;cursor:not-allowed}
.erreur-form{background:var(--fd-retard);border-left:4px solid var(--st-retard);padding:8px 12px;border-radius:4px;margin:8px 0;display:none}
.erreur-form.visible{display:block}
.encadre{background:var(--fd-cours);border-left:4px solid var(--action);padding:10px 14px;border-radius:4px;margin:10px 0;font-size:13px}
.encadre.alerte{background:var(--fd-vigil);border-color:var(--st-vigil)}
.encadre.grave{background:var(--fd-retard);border-color:var(--st-retard)}

/* ---------- application : pupitre ---------- */
.appli{display:grid;grid-template-columns:220px 1fr;grid-template-rows:64px 1fr;height:100vh}
.entete{grid-column:1/3;background:var(--pupitre);color:var(--pupitre-texte);display:flex;align-items:center;gap:16px;padding:0 18px;
  border-bottom:4px solid var(--action)}
.entete .logo{height:30px;display:block}
.entete .cartouche{background:#fff;border-radius:6px;padding:3px 8px;display:flex}
.entete .cartouche img{height:26px}
.entete .titre{display:flex;flex-direction:column;line-height:1.15}
.entete .titre b{font-size:15px}
.entete .titre span{font-size:12px;color:var(--pupitre-texte-2)}
.entete .droite{margin-left:auto;display:flex;align-items:center;gap:10px}
.voyant{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;border-radius:12px;background:var(--pupitre-touche);color:var(--pupitre-texte)}
.voyant::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--st-ok)}
.voyant.lecture::before{background:var(--st-non)}
.compte{font-size:12px;color:var(--pupitre-texte-2);text-align:right;line-height:1.2}
.compte b{color:var(--pupitre-texte);display:block;font-size:13px}
.entete .touche{background:var(--pupitre-touche);color:#fff;border-color:var(--pupitre-filet)}
.rail{background:var(--pupitre-2);color:var(--pupitre-texte);overflow-y:auto;padding:12px 10px}
.rail .groupe{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--pupitre-texte-2);margin:14px 8px 6px}
.rail a{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--pupitre-texte);text-decoration:none;
  padding:9px 10px;border-radius:6px;margin-bottom:2px;font-size:13px;border-left:4px solid transparent}
.rail a:hover{background:var(--pupitre-touche)}
.rail a.actif{background:var(--pupitre-touche);border-left-color:var(--action);font-weight:bold}
.rail a .nb{font-size:11px;background:var(--st-retard);color:#fff;border-radius:9px;padding:0 6px;font-weight:bold}
.rail a .nb.zero{display:none}
.contenu{overflow-y:auto;padding:0 24px 40px;position:relative}
.bandeaux>div{margin:12px 0 0;padding:10px 14px;border-radius:6px;font-size:13px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bandeau-lecture{background:var(--fd-vigil);border-left:4px solid var(--st-vigil)}
.bandeau-grave{background:var(--fd-retard);border-left:4px solid var(--st-retard)}
.tete-page{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;padding:20px 0 14px;border-bottom:1px solid var(--filet);margin-bottom:16px}
.tete-page .sous{color:var(--encre-2);font-size:13px;margin-top:4px}
.tete-page .touches{margin-left:auto}
.filtres{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filtres input[type=search]{width:240px}
.carte{background:var(--feuille);border:1px solid var(--filet);border-radius:var(--rayon);padding:16px;margin-bottom:16px}
.vide{text-align:center;padding:36px 20px;color:var(--encre-2)}
.vide b{display:block;color:var(--encre);font-size:16px;margin-bottom:6px}
.vide .touches{justify-content:center;margin-top:14px}

/* tuiles du tableau de bord */
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.tuile{background:var(--feuille);border:1px solid var(--filet);border-radius:var(--rayon);padding:14px 16px;border-top:6px solid var(--st-non);cursor:pointer;text-align:left}
.tuile:hover{box-shadow:var(--ombre)}
.tuile .n{font-size:32px;font-weight:900;line-height:1.1}
.tuile .l{font-size:13px;color:var(--encre-2)}
.tuile.retard{border-top-color:var(--st-retard)} .tuile.vigil{border-top-color:var(--st-vigil)}
.tuile.requis{border-top-color:var(--st-requis)} .tuile.effectif{border-top-color:var(--action);cursor:default}
.demarrage ol{margin:6px 0 0;padding-left:20px} .demarrage li{margin:8px 0}
.demarrage li.fait{color:var(--encre-2);text-decoration:line-through}

/* tableaux */
.tableau{width:100%;border-collapse:collapse;background:var(--feuille)}
.tableau th{background:var(--alterne);text-align:left;font-size:12px;color:var(--encre-2);font-weight:bold;padding:8px 10px;border-bottom:2px solid var(--filet);white-space:nowrap}
.tableau td{padding:8px 10px;border-bottom:1px solid var(--filet);vertical-align:middle}
.tableau tr.clic{cursor:pointer}
.tableau tr.clic:hover td{background:var(--fd-cours)}
.tableau td.nb{text-align:right;font-variant-numeric:tabular-nums}
.enveloppe{overflow:auto;border:1px solid var(--filet);border-radius:var(--rayon);background:#fff;max-height:calc(100vh - 230px)}
.grille-famille th{position:sticky;top:0;z-index:1}
.grille-famille td:first-child,.grille-famille th:first-child{position:sticky;left:0;background:#fff;z-index:2;min-width:190px}
.grille-famille th:first-child{background:var(--alterne);z-index:3}
.grille-famille td.case{cursor:pointer;min-width:120px}
.grille-famille td.case:hover{background:var(--fd-cours)}
.grille-famille th.el{white-space:normal;min-width:120px;max-width:180px;vertical-align:bottom}
.case-fin{display:block;font-size:11px;color:var(--encre-2);margin-top:2px}
.synthese td.cellule{cursor:pointer}
.synthese td.cellule:hover{background:var(--fd-cours)}
.compte-mini{display:inline-block;margin-right:6px;font-size:12px}

/* fiche */
.fiche-tete{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.fiche-tete .ident{flex:1;min-width:260px}
.fiche-tete .ident .meta{color:var(--encre-2);margin-top:4px}
.blocs{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:16px}
.bloc h3{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--filet);padding-bottom:6px}
.ligne-suivi{display:grid;grid-template-columns:1fr auto 18px;gap:8px;align-items:center;padding:7px 4px;border-bottom:1px solid var(--filet);cursor:pointer}
.ligne-suivi:hover{background:var(--fd-cours)}
.ligne-suivi .quand{font-size:12px;color:var(--encre-2)}

/* tiroir (détail d'une case) */
.voile{position:fixed;inset:0;background:rgba(6,22,48,.35);z-index:50;display:flex;justify-content:flex-end}
.tiroir{width:min(520px,100%);height:100%;background:#fff;overflow-y:auto;padding:22px 24px;box-shadow:-8px 0 24px rgba(0,0,0,.2)}
.tiroir .fermer{float:right}
.tiroir section{border-top:1px solid var(--filet);padding-top:12px;margin-top:14px}
.pourquoi{margin:6px 0 0;padding-left:18px;font-size:13px}
.histo{list-style:none;padding:0;margin:0}
.histo li{border:1px solid var(--filet);border-radius:6px;padding:8px 10px;margin-bottom:6px;font-size:13px}
.histo li.en-cours{border-color:var(--action);background:var(--fd-cours)}
.histo li.annulee{opacity:.6;text-decoration:line-through}
.histo .act{margin-top:6px}

/* modale */
.modale-voile{position:fixed;inset:0;background:rgba(6,22,48,.45);z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}
.modale{background:#fff;border-radius:12px;width:100%;max-width:560px;box-shadow:0 16px 40px rgba(0,0,0,.3)}
.modale.large{max-width:860px}
.modale header{padding:16px 20px;border-bottom:1px solid var(--filet);display:flex;justify-content:space-between;align-items:center}
.modale .corps{padding:16px 20px}
.modale footer{padding:12px 20px;border-top:1px solid var(--filet);display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}

/* paramétrage */
.onglets{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.onglet{background:#fff;border:1px solid var(--filet);border-radius:var(--rayon);padding:10px 14px;cursor:pointer;min-width:150px;text-align:left;border-bottom:4px solid transparent}
.onglet b{display:block;font-size:14px} .onglet span{font-size:12px;color:var(--encre-2)}
.onglet.actif{border-bottom-color:var(--action)}
.onglet.avance{background:var(--alterne)}
.famille-carte{display:flex;gap:12px;align-items:center;border:1px solid var(--filet);border-radius:var(--rayon);padding:12px 14px;margin-bottom:8px;background:#fff}
.famille-carte .txt{flex:1}
.famille-carte.inactive{background:var(--alterne)}
.colonnes-org{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.liste-org{list-style:none;padding:0;margin:0 0 10px}
.liste-org li{display:flex;align-items:center;gap:6px;padding:6px 0;border-bottom:1px solid var(--filet)}
.liste-org li .lib{flex:1}
.liste-org li.archivee .lib{color:var(--encre-2);text-decoration:line-through}
.apercu{background:var(--alterne);border:1px dashed #C9D2DA;border-radius:6px;padding:10px 12px;font-size:13px;margin:8px 0}

/* import */
.corresp td{padding:6px 8px}
.corresp select{width:100%}
.liste-erreurs{max-height:180px;overflow:auto;font-size:12px;margin:6px 0;padding-left:18px}

/* toasts */
#toasts{position:fixed;bottom:20px;right:20px;z-index:90;display:flex;flex-direction:column;gap:8px;align-items:flex-end;max-width:calc(100% - 40px)}
.toast{background:var(--pupitre);color:#fff;padding:10px 16px;border-radius:8px;box-shadow:var(--ombre);max-width:560px;font-size:13px;border-left:6px solid var(--st-ok)}
.toast.erreur{border-left-color:var(--st-retard)}
.toast.info{border-left-color:var(--action)}

/* lecture seule : les commandes d'écriture disparaissent */
body.lecture [data-ecrit]{display:none!important}
body:not(.admin) [data-admin]{display:none!important}

/* fenêtres étroites */
@media (max-width:1000px){
  .appli{grid-template-columns:64px 1fr}
  .rail a span.lib,.rail .groupe{display:none}
  .rail a::before{content:attr(data-court);font-weight:bold;font-size:12px;width:100%;text-align:center}
  .entete .titre span,.compte span{display:none}
}
@media (max-width:640px){
  .grille2,.grille3{grid-template-columns:1fr}
  .contenu{padding:0 12px 40px}
  .blocs{grid-template-columns:1fr}
}
@media print{
  .rail,.entete,.bandeaux,.touches,.filtres{display:none!important}
  .appli{display:block;height:auto} .contenu{overflow:visible}
}