:root{
  /* Identité visuelle OFPPT : couleurs extraites du logo officiel
     (losange vert / gris / bleu). --primary pilote l'essentiel de
     l'interface (navbar, liens, boutons, focus, badges actifs). */
  --primary:#008245;
  --primary-dark:#00623a;
  --primary-light:#e6f4ec;
  --ofppt-bleu:#0059a1;
  --ofppt-gris:#8a949f;
  --danger:#dc2626;
  --green:#16a34a;
  --gray:#6b7280;
  --bg:#f4f6f9;
  --card:#ffffff;
  --border:#e2e8f0;
  --text:#1e293b;
  --radius:10px;
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 1px 8px rgba(15,23,42,.04);
  --shadow-hover:0 4px 16px rgba(15,23,42,.08);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none;}
a:hover{text-decoration:underline;}

.navbar{
  background:#111827;
  color:#fff;
  padding:14px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.navbar .brand{font-weight:600;font-size:18px;display:flex;align-items:center;gap:10px;}
.navbar .brand img.logo-ofppt{height:36px;width:36px;border-radius:50%;background:#fff;padding:2px;box-shadow:0 0 0 1px rgba(255,255,255,.15);}
.login-box .logo-ofppt{display:block;height:76px;width:76px;margin:0 auto 12px;border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,.12);}
.navbar nav a{
  color:#cbd5e1;
  margin-left:16px;
  font-size:14px;
  padding-bottom:3px;
  border-bottom:2px solid transparent;
  transition:color .15s;
}
.navbar nav a:hover, .navbar nav a.active{color:#fff;text-decoration:none;}
.navbar nav a.active{border-bottom-color:var(--primary);}
.navbar .userinfo{font-size:13px;color:#9ca3af;margin-left:16px;}

/* Menus déroulants de la navbar (regroupent les nombreux liens admin :
   Gestion / Absences / Documents / Suivi) au lieu d'une longue liste à
   plat. Basé sur <details>/<summary> : ouverture au clic ou au clavier,
   sans dépendance JS, cohérent avec .groupe-section ailleurs sur le site. */
.navbar nav{display:flex;align-items:center;flex-wrap:wrap;}

/* Bouton "☰ Menu" qui replie la navigation sur smartphone (voir règles
   dans le bloc @media plus bas). Case à cocher invisible + <label> :
   sur PC elle reste masquée et <nav> s'affiche normalement. */
.nav-toggle-checkbox{display:none;}
.nav-mobile-summary{display:none;}
.nav-dropdown{position:relative;margin-left:16px;}
.nav-dropdown > summary{
  color:#cbd5e1;font-size:14px;cursor:pointer;list-style:none;
  padding-bottom:3px;border-bottom:2px solid transparent;
  display:inline-flex;align-items:center;gap:3px;
}
.nav-dropdown > summary::-webkit-details-marker{display:none;}
.nav-dropdown > summary::after{content:"▾";font-size:10px;opacity:.8;}
.nav-dropdown > summary:hover,
.nav-dropdown.active > summary{color:#fff;}
.nav-dropdown.active > summary{border-bottom-color:var(--primary);}
.nav-dropdown[open] > summary::after{content:"▴";}
.nav-dropdown-menu{
  position:absolute;top:calc(100% + 8px);left:0;
  background:#fff;border:1px solid var(--border);border-radius:8px;
  box-shadow:var(--shadow-hover);
  min-width:200px;padding:6px;z-index:200;
  display:flex;flex-direction:column;
}
.nav-dropdown-menu a{
  color:#374151;font-size:14px;margin-left:0;padding:8px 10px;
  border-radius:6px;border-bottom:none;
}
.nav-dropdown-menu a:hover{background:var(--primary-light);text-decoration:none;}
.nav-dropdown-menu a.active{background:var(--primary-light);color:var(--primary-dark);font-weight:600;}
.nav-dropdown .nav-badge{position:relative;top:-1px;}

.container{max-width:1100px;margin:24px auto;padding:0 16px;}
/* Page saisie groupée (vue semaine) : la matrice jours × séances a besoin
   de bien plus de largeur que les pages classiques pour que toute la
   semaine tienne sans défilement horizontal. On élargit le conteneur
   uniquement sur cette page (voir header.php) plutôt que pour tout le site. */
.container--large{max-width:1800px;}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
  margin-bottom:20px;
}
.card h2{margin-top:0;font-size:18px;}


.grid{display:grid;gap:16px;}
/* auto-fit/minmax : le nombre de colonnes s'adapte en continu à la
   largeur disponible, sans dépendre d'un seul point de rupture fixe
   (mieux supporté et plus fluide sur tablette/mobile/desktop). */
.grid-3{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
/* Les cellules de grille ont par défaut min-width:auto : elles refusent
   de rétrécir sous la largeur "native" de leur contenu (ex: un champ
   date). Sans ce reset, la colonne reste large et déborde sur mobile. */
.grid > *{min-width:0;}

.stat{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:18px;
  text-align:center;
}
.stat .num{font-size:28px;font-weight:700;color:var(--primary);}
.stat .label{color:var(--gray);font-size:13px;margin-top:4px;}

table{width:100%;border-collapse:collapse;font-size:14px;}
th,td{padding:10px 8px;border-bottom:1px solid var(--border);text-align:left;}
th{background:#f8fafc;color:#475569;font-weight:600;font-size:13px;}
tr:hover td{background:#f9fafb;}

/* Journal d'activité (admin_journal.php) : ce tableau peut compter des
   centaines de lignes très similaires (même structure de colonnes) —
   sans repère visuel, il devient difficile à parcourir. Deux repères
   ajoutés ici, sans toucher au balisage générique <table> ci-dessus :
   - un zébrage léger (via :nth-child, qui reste correct même après un
     tri par colonne, table-enhance.js réordonnant les <tr> en place) ;
   - un liseré de couleur sur le bord gauche de chaque ligne, reprenant
     la couleur du badge "Catégorie" (voir classeLigneCategorieJournal()
     dans journal.php), pour repérer une catégorie sans avoir à relire
     le badge de chaque ligne une par une. */
.table-journal tr:nth-child(even) td{background:#fbfcfe;}
.table-journal tr:hover td{background:#eef2ff;}
.table-journal td,.table-journal th{padding:11px 8px;}
.table-journal tr td:first-child{border-left:4px solid transparent;}
.table-journal tr.jligne-blue td:first-child{border-left-color:#3b82f6;}
.table-journal tr.jligne-green td:first-child{border-left-color:#22c55e;}
.table-journal tr.jligne-red td:first-child{border-left-color:#ef4444;}
.table-journal tr.jligne-yellow td:first-child{border-left-color:#eab308;}
.table-journal tr.jligne-purple td:first-child{border-left-color:#a855f7;}
.table-journal tr.jligne-gray td:first-child{border-left-color:#94a3b8;}
.table-journal tr.jligne-orange td:first-child{border-left-color:#f97316;}

/* ============================================================
   PAGE STATISTIQUES : sous-navigation par section + tableaux
   défilables. Objectif : une longue page (groupes / stagiaires /
   formateurs) devient facile à parcourir grâce à des ancres rapides
   et des tableaux à hauteur limitée (au lieu de tout étirer la page).
   ============================================================ */
.stats-subnav{
  position:sticky;top:58px;z-index:90;
  display:flex;gap:8px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:10px;margin-bottom:20px;
}
.stats-subnav a{
  color:var(--text);background:#f1f5f9;
  padding:7px 14px;border-radius:999px;
  font-size:13px;font-weight:600;text-decoration:none;
  white-space:nowrap;border:1px solid transparent;
  transition:background .15s,color .15s;
}
.stats-subnav a:hover{background:var(--primary-light);color:var(--primary-dark);text-decoration:none;}
.stats-subnav a .count{
  display:inline-block;margin-left:6px;padding:0 6px;border-radius:999px;
  background:rgba(0,0,0,.08);font-size:11px;
}

.stats-section{scroll-margin-top:110px;}
.stats-section + .stats-section{margin-top:28px;}
.stats-section-title{
  display:flex;align-items:baseline;gap:8px;
  margin:0 0 12px;padding-bottom:8px;border-bottom:2px solid var(--border);
}
.stats-section-title h2{margin:0;font-size:19px;}
.stats-section-title .sub{color:var(--gray);font-size:13px;}

/* Tableau à hauteur limitée avec en-tête qui reste visible pendant le
   défilement interne : évite qu'un tableau de 100+ lignes n'allonge
   indéfiniment la page tout en gardant les colonnes lisibles.
   Quand l'en-tête a PLUSIEURS lignes (ex: matrice semaine ci-dessous),
   seule la 1ère ligne a son "top" fixé ici (0, ou 58px sous la navbar
   pour la vue semaine) : le décalage des lignes suivantes est calculé
   dynamiquement en JS (voir table-enhance.js -> stickHeaderRows) car il
   dépend de la hauteur réelle de la 1ère ligne, variable selon le
   contenu/la largeur d'écran. */
/* Modifié à la demande : on ne veut plus de petite boîte à défilement
   interne limitée en hauteur (l'ancien max-height:480px + overflow-y:auto
   coupait les tableaux et obligeait à scroller DANS la carte). Le tableau
   s'affiche maintenant en entier, quelle que soit sa longueur, et suit le
   défilement normal de la page (une seule barre de défilement globale,
   comme c'était déjà le cas pour .table-scroll--semaine ci-dessous).
   Les deux axes doivent être "visible" (pas juste overflow-y) pour que
   position:sticky reste ancré à la page plutôt qu'à ce conteneur — voir
   l'explication détaillée au-dessus de .table-scroll--semaine. */
.table-scroll{overflow:visible;border:1px solid var(--border);border-radius:8px;}
.table-scroll table{margin:0;}
.table-scroll thead th{position:sticky;z-index:5;box-shadow:0 1px 0 var(--border);}
/* top:58px = hauteur de la .navbar (position:sticky;top:0), pour que l'en-tête
   du tableau se colle juste sous elle au lieu de disparaître dessous. */
.table-scroll thead tr:first-child th{top:58px;}

/* Vue "semaine" de la saisie groupée (admin_saisie_absences.php) : la
   matrice est volumineuse (jusqu'à 6 jours × plusieurs séances) et l'idée
   de cette page est justement de voir TOUTE la semaine sans avoir à
   défiler dans une petite boîte en plus de la page elle-même. On retire
   donc la hauteur limitée/le défilement interne vertical : le tableau
   prend sa hauteur naturelle et suit le défilement normal de la page
   (une seule barre de défilement, celle du navigateur). L'en-tête reste
   collé, mais sous la barre de navigation (58px, comme .stats-subnav)
   puisqu'il n'y a plus de petite boîte défilante pour ancrer le top:0.
   Le défilement horizontal (overflow-x) reste en secours pour les très
   petits écrans (voir règle mobile plus bas), mais sur desktop la table
   est en table-layout:fixed avec un <colgroup> en pourcentages calculé
   côté PHP (voir admin_saisie_absences.php) : la somme des largeurs vaut
   toujours 100% du conteneur, donc la semaine tient nécessairement dans
   la largeur disponible, quel que soit le nombre de jours/séances.
   IMPORTANT : les deux axes (x ET y) doivent être "visible" ici, pas
   juste overflow-y. En CSS, si un axe vaut "visible" et l'autre non
   (ici overflow-x:auto hérité de .table-scroll), le navigateur force
   l'axe "visible" à devenir "auto" lui aussi (règle du spec Overflow) :
   le conteneur redevient alors un contexte de défilement à part entière,
   ce qui casse position:sticky par rapport à la page et empêche l'en-tête
   de rester figé pendant le défilement. D'où le "overflow" en shorthand
   ci-dessous, qui force explicitement les deux axes à visible. */
.table-scroll--semaine{max-height:none;overflow:visible;}
.table-scroll--semaine thead tr:first-child th{top:58px;}
.table-scroll--semaine table{table-layout:fixed;}
.table-scroll--semaine th,
.table-scroll--semaine td{overflow:hidden;word-break:break-word;}

/* Matrice "droits" (admin_droits.php) : une colonne PAR formateur/admin,
   donc une largeur qui grandit avec le nombre de comptes — sans limite,
   ce tableau peut devenir plus large que sa carte et déborder de l'écran
   (voir le problème d'affichage remonté). Contrairement à .table-scroll de
   base, on garde ici un défilement horizontal dédié à CE tableau, pour que
   la carte ne soit jamais dépassée en largeur, tout en gardant la hauteur
   entièrement visible (pas de limite verticale, conforme à la demande
   générale). Ces tableaux n'ont pas d'en-tête <thead> collé, donc aucun
   risque de casser le comportement sticky en transformant ce conteneur en
   contexte de défilement (contrairement à .table-scroll--semaine ci-dessus,
   qui doit rester "visible" sur les deux axes pour cette raison précise).
   */
.table-scroll--matrice{overflow-x:auto;overflow-y:visible;}
.table-scroll--matrice table{margin:0;}

/* Colonne "Stagiaire" figée sur le côté pendant le défilement horizontal
   (utile quand la matrice déborde sur petit écran malgré table-layout
   fixed) : le nom du stagiaire reste toujours visible. La cellule d'angle
   (en-tête "Stagiaire") cumule sticky haut ET gauche, donc z-index plus
   élevé pour rester au-dessus des deux autres groupes de cellules
   collées (l'en-tête du haut et la colonne de gauche). */
.table-scroll--semaine td.col-stagiaire,
.table-scroll--semaine th.col-stagiaire{
  position:sticky;left:0;z-index:4;
  background:#fff;
  box-shadow:1px 0 0 var(--border);
}
.table-scroll--semaine thead th.col-stagiaire{z-index:6;background:#f8fafc;}

/* Séparation visuelle des colonnes par jour : un jour sur deux (Lundi,
   Mercredi, Vendredi...) reçoit une teinte légèrement différente sur
   toute la hauteur de ses colonnes (en-tête + cellules), pour repérer
   d'un coup d'œil où commence/finit chaque jour dans la matrice. */
.col-jour-base{background:#ffffff;}
.col-jour-alt{background:#f4f7fb;}
/* .col-jour-debut marque la 1ère colonne (séance 1) de chaque jour :
   une bordure verticale plus marquée matérialise le début du groupe. */
.col-jour-debut{box-shadow:inset 2px 0 0 var(--border);}
.table-scroll--semaine thead th.col-jour-debut{box-shadow:inset 2px 0 0 var(--border),0 1px 0 var(--border);}

.form-group{margin-bottom:14px;}
.form-group label{display:block;margin-bottom:5px;font-size:14px;font-weight:600;color:#374151;}
input[type=text],input[type=password],input[type=email],input[type=date],select,textarea{
  width:100%;
  max-width:100%;
  padding:9px 10px;
  border:1px solid #cbd5e1;
  border-radius:6px;
  font-size:14px;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);border-color:var(--primary);}

/* Rendu cohérent des <select> entre navigateurs (Chrome/Edge, Firefox,
   Safari et les navigateurs mobiles appliquent chacun un style natif
   différent) : flèche personnalisée identique partout. */
select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-color:#fff;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%236b7280' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3e%3c/svg%3e");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:16px;
  padding-right:32px;
  cursor:pointer;
}
select::-ms-expand{display:none;}
select:disabled{cursor:not-allowed;opacity:.7;}

/* Rendu cohérent du champ date entre navigateurs (Chrome/Edge, Firefox,
   Safari affichent tous l'icône et le texte différemment par défaut) */
input[type=date]{
  -webkit-appearance:none;
  appearance:none;
  background-color:#fff;
  color-scheme:light;
  font-family:inherit;
}
input[type=date]::-webkit-calendar-picker-indicator{
  cursor:pointer;
  opacity:.55;
}
input[type=date]::-webkit-datetime-edit{padding:0;}

/* Champ verrouillé (ex: date du jour imposée) : même apparence sur
   tous les navigateurs, sans dépendre du style natif "readonly" */
.input-locked{
  background-color:#f1f5f9 !important;
  color:#475569;
  cursor:not-allowed;
  border-color:#e2e8f0;
}
.input-locked::-webkit-calendar-picker-indicator{
  pointer-events:none;
  opacity:.35;
}

.btn{
  display:inline-block;
  padding:9px 16px;
  border-radius:6px;
  border:none;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  background:var(--primary);
  color:#fff;
  transition:background .15s, box-shadow .15s, transform .05s;
}
.btn:hover{background:var(--primary-dark);}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:2px solid var(--primary-dark);outline-offset:2px;}
.btn:disabled,.btn[disabled]{opacity:.6;cursor:not-allowed;}
.btn-danger{background:var(--danger);}
.btn-danger:hover{background:#b91c1c;}
.btn-gray{background:#e5e7eb;color:#111827;}
.btn-gray:hover{background:#d1d5db;}
.btn-sm{padding:5px 10px;font-size:12px;}
.btn-export-excel{display:inline-flex;align-items:center;gap:6px;background:#1d6f42;color:#fff;padding:8px 14px;border-radius:6px;font-size:14px;text-decoration:none;font-weight:600;}
.btn-export-excel:hover{background:#155a34;}

.alert{padding:12px 14px;border-radius:8px;margin-bottom:16px;font-size:14px;}
.alert-success{background:#dcfce7;color:#166534;border:1px solid #bbf7d0;}
.alert-error{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;}

.badge{padding:3px 9px;border-radius:20px;font-size:12px;font-weight:600;}
.badge-green{background:#dcfce7;color:#166534;}
.badge-red{background:#fee2e2;color:#991b1b;}
.badge-gray{background:#f1f5f9;color:#475569;}
.badge-yellow{background:#fef9c3;color:#854d0e;}
.badge-blue{background:#dbeafe;color:#1e40af;}
.badge-purple{background:#f3e8ff;color:#6b21a8;}
.badge-orange{background:#ffedd5;color:#9a3412;}

/* Regroupement Établissement > Promotion > Niveau > Année (admin_groupes.php) */
.groupe-section{
  border:1px solid #e5e7eb;border-radius:10px;margin-bottom:12px;
  padding:10px 14px;background:#fafafa;
}
.groupe-section .groupe-section{margin-top:10px;margin-bottom:10px;}
.groupe-section-2{background:#f6f8fb;}
.groupe-section-3{background:#ffffff;}
.groupe-section > summary{
  cursor:pointer;font-weight:700;font-size:15px;padding:4px 0;
  list-style:none;
}
.groupe-section > summary::-webkit-details-marker{display:none;}
.groupe-section > summary::before{content:"▶ ";font-size:12px;color:var(--gray);}
.groupe-section[open] > summary::before{content:"▼ ";}
.groupe-sousbloc{margin:10px 0 14px 4px;}
.groupe-sousbloc h3{font-size:13px;color:var(--gray);margin:0 0 6px;text-transform:uppercase;letter-spacing:.03em;}

/* Détail masqué par défaut (type de séance présentiel / à distance) dans
   les tableaux de statistiques (admin_statistiques.php) : un clic sur
   "Détail" déplie la ventilation. */
.detail-toggle{display:inline-block;}
.detail-toggle > summary{
  cursor:pointer;font-size:12px;font-weight:600;color:var(--primary);
  list-style:none;white-space:nowrap;
}
.detail-toggle > summary::-webkit-details-marker{display:none;}
.detail-toggle > summary::before{content:"▶ ";font-size:10px;}
.detail-toggle[open] > summary::before{content:"▼ ";}
.detail-toggle-content{
  margin-top:6px;display:flex;flex-direction:column;gap:4px;
  font-size:12px;white-space:nowrap;
}

.nav-badge{
  display:inline-block;min-width:16px;height:16px;padding:0 4px;
  background:#dc2626;color:#fff;border-radius:20px;
  font-size:10px;line-height:16px;text-align:center;font-weight:700;
  margin-left:4px;vertical-align:2px;
}

.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--primary-dark),var(--primary));
}
.login-box{
  background:#fff;
  padding:36px;
  border-radius:14px;
  width:100%;
  max-width:380px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.login-box h1{font-size:20px;margin-bottom:4px;text-align:center;}
.login-box p.sub{text-align:center;color:var(--gray);font-size:13px;margin-bottom:20px;}

/* Pages publiques plus larges qu'un formulaire de connexion (demande de
   document, suivi de demande) : même habillage que .login-wrap mais boîte
   plus large pour accueillir un formulaire à plusieurs champs. */
.public-wrap{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:linear-gradient(135deg,var(--primary-dark),var(--primary));
  padding:24px 16px;
}
.public-topbar{
  width:100%;
  max-width:640px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#dcfce7;
  font-size:14px;
  margin-bottom:16px;
}
.public-topbar a{color:#fff;font-weight:600;}
.public-topbar span:first-child{display:flex;align-items:center;gap:8px;font-weight:600;}
.public-topbar img.logo-ofppt{height:28px;width:28px;border-radius:50%;background:#fff;padding:1px;}
.public-box{
  background:#fff;
  padding:32px;
  border-radius:14px;
  width:100%;
  max-width:640px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}
@media (max-width:600px){
  .public-box{padding:22px;}
}

.checklist{border:1px solid var(--border);border-radius:8px;overflow:visible;}
.checklist-row{
  display:flex;
  align-items:flex-start;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  transition:background .12s;
}
.checklist-row:first-child{border-top-left-radius:8px;border-top-right-radius:8px;}
.checklist-row:last-child{border-bottom:none;border-bottom-left-radius:8px;border-bottom-right-radius:8px;}
.checklist-row:nth-child(even){background:#fafbfc;}
.checklist-row:hover{background:var(--primary-light);}
.checklist-row.is-checked{background:#fef2f2;}
.checklist-row.is-blocked{background:#fef2f2;box-shadow:inset 3px 0 0 #dc2626;}
.checklist-row.is-hidden{display:none;}
/* La case et le numéro sont figés en haut de la ligne (align-self), avec une
   largeur/hauteur fixes qui ne varient jamais : ainsi, même si le nom est
   long (retour à la ligne) ou si plusieurs badges s'affichent (absent,
   bloqué, billet, remarque...) et poussent la ligne à s'agrandir, la case
   ne se recentre plus verticalement et reste alignée avec les autres. */
.checklist-row input[type=checkbox]{
  width:22px;height:22px;margin-right:14px;cursor:pointer;
  flex-shrink:0;flex-grow:0;
  align-self:flex-start;
  margin-top:2px;
  accent-color:var(--danger);
}
.checklist-row input[type=checkbox]:disabled{cursor:not-allowed;opacity:.55;}
.checklist-row input[type=checkbox]:disabled ~ .name,
.checklist-row input[type=checkbox]:disabled ~ .num{color:var(--gray);opacity:.7;}
.checklist-row .num{
  color:var(--gray);width:32px;flex-shrink:0;flex-grow:0;
  align-self:flex-start;margin-top:2px;
}
.checklist-row .name{flex:1;font-weight:500;min-width:0;word-break:break-word;}
.checklist-row .tag-absent{
  color:#991b1b;background:#fee2e2;border-radius:20px;padding:2px 10px;
  font-size:12px;font-weight:600;margin-left:8px;white-space:nowrap;
}
.checklist-row .tag-absent.tag-absent-justifie{
  color:#166534;background:#dcfce7;
}
.checklist-row .tag-bloque{
  color:#fff;background:#dc2626;border-radius:20px;padding:2px 10px;
  font-size:12px;font-weight:700;margin-left:8px;white-space:nowrap;
}
.checklist-row .tag-billet{
  color:#9a3412;background:#ffedd5;border-radius:20px;padding:2px 10px;
  font-size:12px;font-weight:600;margin-left:8px;white-space:nowrap;
}
.checklist-row .tag-remarque{
  color:#1e40af;background:#dbeafe;border-radius:20px;padding:2px 10px;
  font-size:12px;font-weight:600;margin-left:8px;white-space:nowrap;
  text-decoration:none;
}

.remarque-list{display:flex;flex-direction:column;gap:12px;}
.remarque-item{border:1px solid var(--border);border-radius:8px;padding:12px 14px;background:#fafbfc;}
.remarque-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;margin-bottom:6px;}
.remarque-contenu{margin:0;white-space:pre-line;}

/* Barre d'actions rapides + compteur (page "Saisie des absences") */
.checklist-toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0;
}
.checklist-toolbar input[type=search]{flex:1;min-width:160px;}
.counter-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--primary-light);color:var(--primary-dark);
  border-radius:20px;padding:6px 14px;font-size:13px;font-weight:600;white-space:nowrap;
}
.counter-badge.has-absents{background:#fee2e2;color:#991b1b;}

/* Barre d'enregistrement fixée en bas : toujours accessible sans
   avoir à remonter tout en haut d'une longue liste, surtout mobile */
.sticky-actions{
  position:sticky;bottom:0;
  background:var(--card);
  border-top:1px solid var(--border);
  padding:12px 16px;
  margin:0 -16px;
  box-shadow:0 -4px 12px rgba(15,23,42,.06);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  z-index:10;
}
.sticky-actions .btn{flex:1;min-width:200px;}

.toolbar{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:16px;}
.toolbar .form-group{margin-bottom:0;min-width:160px;}

.empty{color:var(--gray);text-align:center;padding:30px;}

/* ============================================================
   COMPATIBILITÉ SMARTPHONE
   ============================================================ */
@media(max-width:640px){
  .container{padding:0 10px;margin:14px auto;}
  .card{padding:14px;}

  /* Navbar : passe en colonne, liens groupés et espacés proprement */
  .navbar{flex-direction:column;align-items:stretch;gap:10px;padding:12px 14px;}
  .navbar .brand{font-size:16px;}
  .navbar > div{flex-direction:column;align-items:stretch;gap:10px;}

  /* Le menu était affiché en entier (tous les liens dépliés) en haut de
     chaque page sur smartphone : il prenait une grande partie de l'écran
     et repoussait le contenu (ex. la liste de saisie des absences) très
     bas. On le replie maintenant derrière un bouton "☰ Menu", fermé par
     défaut, qu'on ouvre/ferme au tap (case à cocher invisible pilotée
     par son <label> — fonctionne sans JS, sur tous les navigateurs). */
  .nav-mobile-summary{
    display:flex;align-items:center;justify-content:space-between;gap:6px;
    width:100%;padding:10px 12px;margin-bottom:2px;
    background:#1f2937;color:#fff;font-size:14px;font-weight:600;
    border-radius:8px;cursor:pointer;
  }
  .nav-mobile-summary::after{content:"▾";font-size:12px;opacity:.8;}
  .nav-toggle-checkbox:checked + .nav-mobile-summary::after{content:"▴";}
  .navbar nav.nav-mobile-content{display:none;}
  .nav-toggle-checkbox:checked ~ nav.nav-mobile-content{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
  }

  .navbar nav a{margin-left:0;padding:8px 0;}

  /* Menus déroulants : en pile plutôt qu'en popover flottant, pour
     rester lisibles sur un écran étroit (pas assez de place pour un
     panneau superposé sans qu'il ne dépasse de l'écran). */
  .nav-dropdown{margin-left:0;border-top:1px solid #374151;padding-top:2px;}
  .nav-dropdown > summary{padding:8px 0;width:100%;justify-content:space-between;}
  .nav-dropdown-menu{
    position:static;box-shadow:none;border:none;background:transparent;
    padding:0 0 4px 12px;min-width:0;
  }
  .nav-dropdown-menu a{color:#cbd5e1;padding:6px 0;}
  .nav-dropdown-menu a:hover{background:transparent;color:#fff;}
  .nav-dropdown-menu a.active{background:transparent;color:#fff;font-weight:700;}
  .navbar .userinfo{margin-left:0;display:flex;justify-content:space-between;align-items:center;
    border-top:1px solid #374151;padding-top:8px;}

  /* Tableaux : on garde la mise en page mais on autorise le défilement
     horizontal à l'intérieur de la carte plutôt que de tout écraser */
  .card{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  table{min-width:520px;}
  .table-search-wrap{flex-wrap:wrap;}
  .table-toggle-reduit{margin-left:0;}

  /* Sous-nav des statistiques : pas de "sticky" sur mobile (le menu
     ☰ déroulant de la navbar a une hauteur variable, un décalage fixe
     provoquerait un chevauchement) — elle défile simplement avec la page. */
  .stats-subnav{position:static;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;}
  .stats-section{scroll-margin-top:14px;}
  .table-scroll--semaine{max-height:none;}

  /* Formulaires : évite le zoom automatique iOS (police < 16px) */
  input[type=text],input[type=password],input[type=email],input[type=date],select,textarea{
    font-size:16px;padding:10px;
  }

  /* Barre d'outils (filtres) et grilles : un seul élément par ligne */
  .toolbar{flex-direction:column;align-items:stretch;}
  .toolbar .form-group{min-width:0;}
  .toolbar .btn{width:100%;}

  /* Fiches "checklist" (appel des stagiaires) : plus lisibles en colonne */
  .checklist-row{flex-wrap:wrap;align-items:flex-start;padding:10px 12px;}
  .checklist-row input[type=checkbox],
  .checklist-row .num{align-self:flex-start;margin-top:2px;}
  .checklist-row .name{flex-basis:100%;order:1;margin-top:4px;}
  .checklist-row .tag-absent{margin-left:0;order:2;}
  .checklist-row .tag-bloque{margin-left:0;order:2;}
  .checklist-row .tag-billet{margin-left:0;order:3;}
  .checklist-row .tag-remarque{margin-left:0;order:4;}

  .login-box{padding:24px;}

  .stat .num{font-size:24px;}
}

/* ---- Recherche et tri automatiques des tableaux ---- */
.table-search-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.table-search{
  max-width:320px;
  padding:8px 10px;
  border:1px solid #cbd5e1;
  border-radius:6px;
  font-size:13px;
}
.table-search-count{
  font-size:12px;
  color:var(--gray);
  white-space:nowrap;
}
.table-toggle-reduit{
  margin-left:auto;
  white-space:nowrap;
}

/* Mode "réduit" (bouton 🔼 Réduire l'affichage, voir table-enhance.js) :
   sur demande ponctuelle, on retrouve une petite boîte à défilement
   interne pour un tableau long, au lieu de l'afficher en entier. L'en-tête
   collé se réfère alors au haut de CETTE boîte (top:0) et non plus au haut
   de la page sous la navbar (top:58px, cas normal ci-dessus). */
.table-scroll.is-reduit{max-height:480px;overflow:auto;}
.table-scroll.is-reduit thead tr:first-child th{top:0;}
table th.sortable-col{
  cursor:pointer;
  user-select:none;
}
table th.sortable-col:hover{background:#e0e7ff;}
table th.sorted-asc::after{content:" \25B2";font-size:10px;color:var(--primary);}
table th.sorted-desc::after{content:" \25BC";font-size:10px;color:var(--primary);}

/* ---- Graphiques statistiques ---- */
.chart-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:20px;
  margin-bottom:20px;
}
.chart-card h2{margin-top:0;font-size:18px;}
.chart-wrap{position:relative;height:320px;}

/* ---- Graphiques en barres (pur CSS, sans dépendance externe) ---- */
.barchart{display:flex;flex-direction:column;gap:10px;}
.barchart-row{display:flex;align-items:center;gap:10px;}
.barchart-label{
  width:150px;
  flex-shrink:0;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#374151;
}
.barchart-track{
  flex:1;
  background:#f1f5f9;
  border-radius:6px;
  height:22px;
  overflow:hidden;
}
.barchart-fill{
  background:linear-gradient(90deg,var(--primary),#3b82f6);
  height:100%;
  border-radius:6px;
  transition:width .4s ease;
}
.barchart-fill.fill-red{background:linear-gradient(90deg,var(--danger),#ef4444);}
.barchart-fill.fill-green{background:linear-gradient(90deg,var(--green),#22c55e);}
.barchart-value{
  width:65px;
  flex-shrink:0;
  text-align:right;
  font-size:13px;
  font-weight:600;
  color:#111827;
}

/* ============================================================
   ANNONCES — formulaire (pièces jointes) + affichage public
   Voir admin_annonces.php, annonces-form.js et emplois.php.
   ============================================================ */

.annonce-section{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;
  margin-bottom:14px;
  background:#fafbfc;
}
.annonce-section > .annonce-section-titre{
  font-size:13px;
  font-weight:700;
  color:#374151;
  text-transform:uppercase;
  letter-spacing:.03em;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:6px;
}
.annonce-section-aide{font-size:12px;color:var(--gray);margin:2px 0 10px;}

.attachment-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:var(--primary-light);
  color:var(--primary-dark);
  border:1px solid #bfdbfe;
  border-radius:20px;
  padding:4px 10px;
  font-size:12px;
  margin:4px 6px 0 0;
}
.attachment-preview{margin-top:8px;}
.attachment-preview:empty{margin-top:0;}

.lien-ligne{
  display:grid;
  grid-template-columns:1fr 1.4fr auto;
  gap:8px;
  margin-bottom:8px;
  align-items:center;
}
.lien-ligne input{width:100%;}
@media (max-width:640px){
  .lien-ligne{grid-template-columns:1fr;}
}

.pieces-existantes{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.piece-existante{
  display:flex;
  align-items:center;
  gap:8px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px 8px 6px 10px;
  font-size:12px;
}
.piece-existante img{
  width:32px;height:32px;object-fit:cover;border-radius:4px;
}
.piece-existante .piece-nom{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.piece-existante .piece-supprimer{
  color:var(--danger);
  font-weight:700;
  cursor:pointer;
  border:none;
  background:none;
  font-size:14px;
  padding:0 2px;
}
.piece-existante .piece-supprimer:hover{text-decoration:underline;}

/* ---- Affichage public (emplois.php) ---- */
.annonce-public{
  border-radius:var(--radius);
  padding:14px 16px;
  margin-bottom:14px;
}
.annonce-public-importante{
  background:#fef2f2;
  border:1px solid #fecaca;
  border-left:4px solid var(--danger);
}
.annonce-public-normale{
  background:#fff;
  border:1px solid var(--border);
}
.annonce-public-entete{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:4px;
}
.annonce-public-titre{font-size:15px;font-weight:700;}
.annonce-public-texte{
  margin-top:6px;
  white-space:pre-line;
  font-size:14px;
  color:#374151;
}
.annonce-public-meta{font-size:11px;color:var(--gray);margin-top:8px;}

.annonce-images{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:8px;
  margin-top:10px;
}
.annonce-images a{display:block;}
.annonce-images img{
  width:100%;
  height:90px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid var(--border);
  transition:opacity .15s ease;
}
.annonce-images img:hover{opacity:.85;}

.annonce-fichiers-liste{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.annonce-fichiers-liste a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#f6f8fb;
  border:1px solid var(--border);
  border-radius:20px;
  padding:5px 12px;
  font-size:12.5px;
  color:var(--text);
}
.annonce-fichiers-liste a:hover{background:#eef2f7;text-decoration:none;}
.annonce-fichiers-liste .taille{color:var(--gray);font-size:11px;}

.annonce-liens-liste{margin-top:10px;display:flex;flex-direction:column;gap:4px;}
.annonce-liens-liste a{font-size:13.5px;font-weight:600;}

/* ============================================================
   DASHBOARD MODERNISÉ (admin_dashboard.php)
   ------------------------------------------------------------
   Cartes statistiques avec icône + accent couleur, section "Actions
   rapides" en grille de tuiles cliquables (au lieu d'une rangée de
   boutons plats), et un léger dégradé de fond derrière la page pour
   distinguer le tableau de bord des pages de gestion classiques.
   N'affecte aucune autre page : classes nouvelles, rien de renommé.
   ============================================================ */
.dash-hero{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px;margin-bottom:18px;
}
.dash-hero h1{margin:0;font-size:22px;font-weight:700;color:var(--text);}
.dash-hero .dash-date{color:var(--gray);font-size:13.5px;}

.stat-grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  margin-bottom:20px;
}
.stat-modern{
  background:var(--card);
  border-radius:14px;
  border:1px solid var(--border);
  padding:16px 18px;
  display:flex;align-items:flex-start;gap:12px;
  box-shadow:var(--shadow);
  border-left:4px solid var(--accent, var(--primary));
  transition:transform .15s ease, box-shadow .15s ease;
}
.stat-modern:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);}
.stat-modern .stat-icon{
  width:38px;height:38px;flex:0 0 38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;background:color-mix(in srgb, var(--accent, var(--primary)) 14%, white);
}
.stat-modern .stat-body .num{font-size:24px;font-weight:700;line-height:1.15;color:var(--text);}
.stat-modern .stat-body .label{color:var(--gray);font-size:12.5px;margin-top:2px;}
.stat-modern.link{text-decoration:none;color:inherit;display:flex;}
.stat-modern.link:hover{text-decoration:none;}

.quick-grid{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.quick-tile{
  display:flex;align-items:center;gap:10px;
  background:#f8fafc;border:1px solid var(--border);border-radius:12px;
  padding:12px 14px;color:var(--text);font-size:13.5px;font-weight:600;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
  position:relative;
}
.quick-tile:hover{background:var(--primary-light);border-color:var(--primary);text-decoration:none;transform:translateY(-1px);}
.quick-tile .quick-icon{font-size:17px;}
.quick-tile .nav-badge{position:static;margin-left:auto;}

.dash-section-title{
  font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--gray);margin:0 0 10px;
}

/* ============================================================
   ALERTES REUTILISABLES (.alert-*) + EN-TÊTE DE SÉANCE
   ------------------------------------------------------------
   Remplace les blocs d'info ad-hoc (style inline "border-left:4px
   solid #xxxxxx" dispersés dans formateur_saisie.php) par une petite
   famille de classes cohérentes, réutilisables ailleurs sur le site.
   ============================================================ */
.alert{
  display:flex;align-items:flex-start;gap:10px;
  border-radius:12px;padding:12px 16px;margin-bottom:14px;
  font-size:13.5px;line-height:1.5;border:1px solid transparent;
}
.alert .alert-icon{font-size:17px;flex:0 0 auto;line-height:1.3;}
.alert p{margin:0;}
.alert-info{background:#eff6ff;border-color:#bfdbfe;color:#1e3a8a;}
.alert-success{background:#f0fdf4;border-color:#bbf7d0;color:#14532d;}
.alert-warning{background:#fff7ed;border-color:#fed7aa;color:#7c2d12;}
.alert-danger{background:#fef2f2;border-color:#fecaca;color:#7f1d1d;}
.alert-neutral{background:#f8fafc;border-color:var(--border);color:var(--text);}

/* Extraits de format ("Groupe;Filiere;...") dans les blocs d'aide à
   l'import CSV/texte : lisible, distinct du texte courant, cohérent
   partout où <code> est utilisé sur le site. */
code{
  background:#f1f5f9;border:1px solid var(--border);border-radius:5px;
  padding:1px 6px;font-size:12.5px;font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  color:#334155;white-space:nowrap;
}
.alert code{background:rgba(255,255,255,.6);}

/* Blocs d'aide à l'import (listes de règles courtes, plus lisibles
   qu'un paragraphe compact). */
.import-hint-list{margin:10px 0 0;padding-left:20px;font-size:13px;color:var(--gray);}
.import-hint-list li{margin-bottom:6px;line-height:1.5;}
.import-hint-list li:last-child{margin-bottom:0;}
.import-hint-list code{white-space:normal;}

/* Section repliable pour les colonnes optionnelles (attestation) : garde
   le format "obligatoire" visible en priorité, le reste à un clic. */
details.import-advanced{
  margin-top:14px;border:1px solid var(--border);border-radius:10px;
  padding:0;background:#fafafa;overflow:hidden;
}
details.import-advanced summary{
  cursor:pointer;padding:10px 14px;font-size:13.5px;font-weight:600;
  color:var(--primary-dark);list-style:none;display:flex;align-items:center;gap:6px;
}
details.import-advanced summary::-webkit-details-marker{display:none;}
details.import-advanced summary::after{content:"▾";margin-left:auto;font-size:11px;color:var(--gray);}
details.import-advanced[open] summary::after{content:"▴";}
details.import-advanced summary:hover{background:#f1f5f9;}
details.import-advanced .import-advanced-body{padding:2px 14px 14px;font-size:13px;color:var(--gray);}
details.import-advanced .import-advanced-body code{white-space:normal;display:inline-block;margin:4px 0;}

/* En-tête "session" (groupe/date/séance) sur l'écran de saisie */
.session-hero{
  background:linear-gradient(135deg,#111827,#1f2937);
  color:#fff;border-radius:14px;padding:18px 22px;margin-bottom:16px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
}
.session-hero h2{margin:0 0 4px;font-size:19px;color:#fff;}
.session-hero .session-meta{color:#cbd5e1;font-size:13.5px;display:flex;flex-wrap:wrap;gap:14px;}
.session-hero .session-meta span{display:inline-flex;align-items:center;gap:5px;}
.session-hero .btn-gray{background:rgba(255,255,255,.12);color:#fff;}
.session-hero .btn-gray:hover{background:rgba(255,255,255,.22);}

/* Bandeau "type de séance" du dashboard formateur */
.type-seance-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:#f8fafc;border:1px solid var(--border);border-radius:12px;padding:12px 16px;
}

/* Popover "historique mini" (5 dernières séances) — voir formateur_saisie.php.
   Positionné en absolu par rapport à la ligne (.checklist-row en position
   relative), pour rester ancré au nom cliqué sans décaler le reste de la
   liste. */
.checklist-row{position:relative;}
.popover-historique{
  position:absolute;z-index:20;top:26px;left:0;
  background:#111827;color:#fff;font-size:12px;line-height:1.6;
  padding:10px 12px;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.25);
  min-width:220px;
}