/* Feuille de style — squelette minimal, propre et lisible */
:root {
  --bleu: #1f4e79;
  --bleu-clair: #eaf1f8;
  --gris: #5a6473;
  --bordure: #d9dee5;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  color: #1d2733;
  background: #f5f7fa;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.entete {
  background: var(--bleu);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.5rem;
}
.entete__marque { font-weight: 700; font-size: 1.1rem; }
.entete__nav a { color: #fff; text-decoration: none; opacity: 0.9; }
.entete__nav a:hover { opacity: 1; text-decoration: underline; }

.contenu {
  flex: 1;
  width: 100%;
  max-width: 820px;
  margin: 2rem auto;
  padding: 0 1.25rem;
}

.carte {
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  padding: 1.75rem 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

h1 { margin: 0 0 0.25rem; color: var(--bleu); }
.sous-titre { margin: 0 0 1.5rem; color: var(--gris); }

.liste-modules { list-style: none; padding: 0; margin: 1rem 0; }
.liste-modules li {
  padding: 0.7rem 1rem;
  margin-bottom: 0.5rem;
  background: var(--bleu-clair);
  border-radius: 8px;
}

.note {
  margin-top: 1.5rem;
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  color: var(--gris);
  border-left: 3px solid var(--bleu);
  background: #fafbfc;
}

.pied {
  text-align: center;
  padding: 1rem;
  font-size: 0.85rem;
  color: var(--gris);
}

/* --- En-tête : utilisateur connecté + déconnexion --- */
.entete__nav { display: flex; align-items: center; gap: 0.8rem; }
.entete__user { opacity: 0.95; }
.badge-doyen { font-size: 0.82rem; font-style: italic; opacity: 0.85; }
.entete__num { font-size: 0.82rem; opacity: 0.85; }
.lien-engrenage { text-decoration: none; font-size: 1.1rem; line-height: 1; opacity: 0.9; }
.lien-engrenage:hover { opacity: 1; }
.ok-message {
  background: #e7f6ec;
  color: #1b7a3d;
  border: 1px solid #b6e2c4;
  border-radius: 7px;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
}
.form-inline { margin: 0; }
.lien-bouton {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
}
.lien-bouton:hover { background: rgba(255, 255, 255, 0.15); }

/* --- Formulaire de connexion --- */
.carte--etroite { max-width: 380px; margin: 0 auto; }
.formulaire { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.formulaire label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; color: var(--gris); }
.formulaire input {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--bordure);
  border-radius: 7px;
  font-size: 1rem;
}
.formulaire input:focus { outline: 2px solid var(--bleu); border-color: var(--bleu); }
.bouton {
  background: var(--bleu);
  color: #fff;
  border: none;
  padding: 0.7rem;
  border-radius: 7px;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
}
.bouton, .bouton:hover, .bouton:focus { text-decoration: none; }
.bouton:hover { background: #163a5c; }
.alerte {
  background: #fdecea;
  color: #b3261e;
  border: 1px solid #f5c2c0;
  padding: 0.7rem 1rem;
  border-radius: 7px;
  font-size: 0.9rem;
}
.succes {
  background: #e8f5e9;
  color: #1b5e20;
  border: 1px solid #b6dcb8;
  padding: 0.7rem 1rem;
  border-radius: 7px;
  font-size: 0.9rem;
}
.erreur {
  background: #fff4f4;
  color: #a11813;
  border: 1px solid #f5c2c0;
  padding: 0.7rem 1rem;
  border-radius: 7px;
  font-size: 0.9rem;
}
/* --- Module synchronisation HFSQL --- */
.tableau-sync { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.92rem; }
.tableau-sync th, .tableau-sync td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid #e6e6e6; vertical-align: middle; }
.tableau-sync thead th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: #666; }
.tableau-sync .sync-nom { font-weight: 600; font-family: ui-monospace, monospace; }
.tableau-sync input[type="time"] { padding: 0.3rem 0.4rem; }
.badge { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; }
.badge--ok { background: #e8f5e9; color: #1b5e20; border: 1px solid #b6dcb8; }
.badge--erreur { background: #fff4f4; color: #a11813; border: 1px solid #f5c2c0; }
.badge--attente { background: #fff4e5; color: #8a5300; border: 1px solid #ffcf8a; }
.solde-box { background: #eaf1f8; color: #1e4e79; border: 1px solid #bcd4ea; border-radius: 8px; padding: 0.7rem 1rem; font-size: 1rem; }
.solde-box strong { font-size: 1.15rem; }
/* L'encadré est passé de <p> à <div> (il contient un tableau) : il faut donc
   lui redonner l'espacement vertical que le navigateur donnait au paragraphe. */
.solde-box { margin: 0 0 1rem; }
.solde-box__titre { margin: 0; }
.solde-detail { border-collapse: collapse; margin-top: 0.6rem; font-size: 0.9rem; }
.solde-detail th, .solde-detail td { padding: 0.25rem 0.9rem 0.25rem 0; text-align: right; }
.solde-detail thead th { font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.02em; opacity: 0.75; }
/* Première colonne = libellé de ligne : alignée à gauche, contrairement aux chiffres. */
.solde-detail tbody th { text-align: left; font-weight: 600; padding-right: 1.4rem; }
/* Les totaux du tableau ne doivent pas concurrencer le chiffre du solde,
   qui reste le message principal de l'encadré. */
.solde-detail strong { font-size: inherit; }
.solde-box__note { margin: 0.5rem 0 0; font-size: 0.82rem; }
.avertissement {
  background: #fff4e5;
  color: #8a5300;
  border: 1px solid #ffcf8a;
  padding: 0.6rem 1rem;
  border-radius: 7px;
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 1rem;
}
.liens-aux { margin-top: 1.1rem; font-size: 0.9rem; }
.liens-aux a { color: var(--bleu, #1d4e79); }

/* --- 2FA --- */
.etapes { color: var(--gris); font-size: 0.92rem; padding-left: 1.2rem; }
.qr {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: 10px;
}
.secret-manuel { font-size: 0.88rem; color: var(--gris); margin-bottom: 1rem; }
.secret-manuel summary { cursor: pointer; }
.secret {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: var(--bleu-clair);
  border-radius: 6px;
  letter-spacing: 1px;
  word-break: break-all;
}
input[name="code"] {
  text-align: center;
  letter-spacing: 0.5rem;
  font-size: 1.4rem;
}

/* --- Module Élèves --- */
/* Page en pleine largeur : le grand tableau exploite tout l'écran. */
.contenu:has(.carte--large) { max-width: none; }
.carte--large { max-width: none; }
.entete-page { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.entete-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }

/* --- Aperçu des présences (HTML imprimable, zoomable) --- */
.apercu-barre { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.apercu-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.apercu-zoom { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--gris); }
.apercu-zoom .bouton--petit { min-width: 2rem; }
#zoom-niveau { min-width: 3.2rem; text-align: center; }
/* Boutons de la barre d'aperçu : même hauteur (alignement + icônes calées sur le texte) */
.apercu-actions .bouton { display: inline-flex; align-items: center; line-height: 1.2; }
.bouton--pdf { gap: 0.45rem; }
.bouton--pdf .ic-pdf { height: 1.2em; width: auto; display: block; }
.apercu-zone { background: #e9ecef; padding: 1.5rem; border-radius: 8px; overflow: auto; max-height: 76vh; }
.apercu-feuille {
  background: #fff; width: 210mm; max-width: 100%; margin: 0 auto; padding: 14mm 12mm;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18); transform-origin: top center;
}

/* Mise en forme du « document » (identique au PDF) — partagée par l'aperçu */
.feuille-entete { position: relative; text-align: center; margin: 0 0 8px; border-bottom: 1.5px solid #000; padding-bottom: 4px; }
.fe-titre { font-weight: bold; font-size: 15px; }
.fe-saison { position: absolute; right: 0; top: 2px; font-weight: bold; font-size: 12px; }
.feuille-table { width: 100%; border-collapse: collapse; font-size: 11px; color: #111; }
.feuille-table thead th { border-bottom: 1px solid #000; text-align: left; font-weight: normal; padding: 2px 8px 4px; background: none; text-transform: none; }
.feuille-table th.tel, .feuille-table td.tel, .feuille-table th.age, .feuille-table td.age { text-align: right; white-space: nowrap; }
.feuille-table td.tel, .feuille-table td.age { font-size: 9px; color: #333; }
.feuille-table td { padding: 8px; vertical-align: top; border: none; }
.feuille-table tr.grp td { font-weight: bold; padding: 9px 8px 2px; }
.feuille-table .nowrap { white-space: nowrap; }
.grille { border-collapse: collapse; }
.grille td { width: 22px; height: 14px; border: 1px solid #333; padding: 0; }
.feuille-vide { color: #888; font-style: italic; }

/* Impression : on ne montre que la feuille (sans en-tête appli, barre, ombre, zoom) */
@media print {
  .entete, .pied, .apercu-barre { display: none !important; }
  .contenu { margin: 0; padding: 0; }
  .apercu-carte { border: none; box-shadow: none; padding: 0; margin: 0; }
  .apercu-zone { background: none; padding: 0; max-height: none; overflow: visible; border-radius: 0; }
  .apercu-feuille { width: auto; max-width: none; box-shadow: none; padding: 0; transform: none !important; }
}
.ok { color: #1b873f; font-size: 0.8rem; font-weight: 600; }
.liste-modules a { text-decoration: none; color: inherit; }
.liste-modules a:hover { text-decoration: underline; }

.filtres {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin: 1rem 0 1.25rem;
  padding: 0.9rem 1rem;
  background: var(--bleu-clair);
  border-radius: 8px;
}
.filtres label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--gris); }
.filtres select {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  font-size: 0.95rem;
  min-width: 160px;
  background: #fff;
}
.bouton--petit { padding: 0.45rem 0.9rem; font-size: 0.9rem; }
.reinit { align-self: center; font-size: 0.85rem; color: var(--bleu); }

/* --- Recherche élève --- */
.recherche { display: flex; align-items: center; gap: 0.8rem; margin: 0 0 1rem; }
.recherche input[type="search"] {
  flex: 1;
  max-width: 360px;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  font-size: 0.95rem;
}
.recherche input[type="search"]:focus { outline: 2px solid var(--bleu); border-color: var(--bleu); }
.recherche-compte { font-size: 0.85rem; color: var(--gris); }
.aucun-resultat { color: var(--gris); font-style: italic; padding: 1rem 0; }

/* --- Filtres multi-colonnes (barre au-dessus de la liste) --- */
.filtres-multi { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; flex: 1 1 auto; }
.filtre-col { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.72rem; color: var(--gris); text-transform: uppercase; letter-spacing: 0.02em; }
.filtre-col input[type="search"] {
  width: 9.5rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  font-size: 0.9rem;
  text-transform: none;
}
.filtre-col input[type="search"]:focus { outline: 2px solid var(--bleu); border-color: var(--bleu); }
.filtre-col select {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  font-size: 0.9rem;
  text-transform: none;
  background: #fff;
}
.filtre-col select:focus { outline: 2px solid var(--bleu); border-color: var(--bleu); }
.filtres-multi .recherche-compte { align-self: center; }
.filtres-multi .reinit { align-self: center; }

.table-wrap { overflow-x: auto; }

/* --- Super-administration : liste des modules --- */
.liste-modules { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.7rem; }
.liste-modules a {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 1rem 1.2rem; border: 1px solid var(--bordure); border-radius: 10px;
  text-decoration: none; color: inherit; background: #fff;
}
.liste-modules a:hover { border-color: var(--bleu); background: #f4f8fc; }
.module-icone { font-size: 1.6rem; }
.module-desc { display: block; color: var(--gris); font-size: 0.88rem; }

/* --- Super-admin : test de connexion + liste des tables --- */
.test-resultat { margin: 1rem 0; }
.liste-tables {
  list-style: none; padding: 0.6rem; margin: 0.5rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.2rem 1rem;
  max-height: 320px; overflow: auto;
  border: 1px solid var(--bordure); border-radius: 8px; background: #fafbfc;
  font-size: 0.86rem;
}
.liste-tables li { padding: 0.15rem 0.3rem; border-bottom: 1px solid #eef; }
.erreur-detail { white-space: pre-wrap; background: #fff4f4; border: 1px solid #f5c2c0; border-radius: 7px; padding: 0.6rem 0.8rem; font-size: 0.8rem; overflow: auto; max-height: 220px; }

/* Ascenseur horizontal en haut du tableau (synchronisé avec le tableau) */
.scroll-haut { overflow-x: auto; overflow-y: hidden; }
.scroll-haut-piste { height: 1px; }
.liste { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.liste thead th {
  text-align: left;
  padding: 0.6rem 0.7rem;
  border-bottom: 2px solid var(--bleu);
  color: var(--bleu);
  white-space: nowrap;
}
.th-triable { cursor: pointer; user-select: none; }
.th-triable:hover { background: #eef3f9; }
.tri-ind { font-size: 0.7rem; }
.liste tbody td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--bordure); }
.liste tbody tr:hover { background: #f7f9fc; }
.liste .muted { color: var(--gris); font-size: 0.85rem; }
.liste .centre { text-align: center; }
.liste .nowrap { white-space: nowrap; }
.alerte-inline { color: #b3261e; font-weight: 600; }

/* --- Lien "modifier" dans la cellule info examen --- */
.lien-modifier {
  margin-left: 0.4rem;
  background: none;
  border: none;
  color: var(--bleu);
  cursor: pointer;
  font-size: 0.8rem;
  text-decoration: underline;
  padding: 0;
}

/* --- Modale --- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
}
.modal[hidden] { display: none; }
.modal__boite {
  background: #fff;
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.modal__boite--large { max-width: 1280px; }
.modal__titre { margin: 0 0 0.25rem; color: var(--bleu); }

/* --- Barre au-dessus de la liste (recherche + bouton à droite) --- */
.barre-liste { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem; }
.barre-liste .recherche { flex: 1 1 280px; margin: 0; }

/* --- Fenêtre « Inscription examen » : 2 tableaux côte à côte + drag&drop --- */
.champ-examen { display: block; margin-bottom: 0.6rem; font-weight: 600; }
.champ-examen select { width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--bordure); border-radius: 7px; font-size: 1rem; background: #fff; }
.aide-dnd { margin: 0.2rem 0 0.9rem; font-size: 0.85rem; }
.inscription-2col { display: flex; gap: 1rem; align-items: flex-start; }
.inscription-col { flex: 1 1 0; min-width: 0; }
/* Le tableau de droite (inscrits) a une colonne de plus → un peu plus large. */
.inscription-col:last-child { flex: 1.45 1 0; }
.inscription-col h3 { margin: 0 0 0.5rem; font-size: 1rem; color: var(--bleu); }
.table-wrap-modal { height: 52vh; overflow: auto; border: 1px solid var(--bordure); border-radius: 8px; }
.table-wrap-modal.drop-actif { outline: 2px dashed var(--bleu); outline-offset: -2px; background: #eef3fb; }
.table-wrap-modal .liste { margin: 0; font-size: 0.8rem; }
.table-wrap-modal .liste th, .table-wrap-modal .liste td { padding: 0.35rem 0.5rem; }
.table-wrap-modal .liste th { position: sticky; top: 0; background: #f4f6f9; z-index: 1; }
.table-wrap-modal tbody tr { cursor: grab; }
.table-wrap-modal tbody tr.dragging { opacity: 0.4; }
.table-wrap-modal tbody tr:hover { background: #eef3fb; }
.heure-passage { width: 7.5em; padding: 0.2rem 0.35rem; border: 1px solid var(--bordure); border-radius: 5px; font-size: 0.8rem; }
@media (max-width: 760px) { .inscription-2col { flex-direction: column; } }
.modal__eleve { margin: 0 0 1rem; font-weight: 600; color: var(--gris); }
.modal__actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.5rem; }
.modal__actions--espace { justify-content: space-between; align-items: center; flex-wrap: wrap; }
.serveur-resultat { font-size: 0.85rem; color: var(--gris); }
.serveur-resultat.ok { color: #1b5e20; font-weight: 600; }
.serveur-resultat.ko { color: #b3261e; font-weight: 600; }
.modal .formulaire select {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--bordure);
  border-radius: 7px;
  font-size: 1rem;
  background: #fff;
}
.bouton--secondaire {
  background: #fff;
  color: var(--gris);
  border: 1px solid var(--bordure);
}
.bouton--secondaire:hover { background: #f1f3f6; }

/* --- Menu des formulaires --- */
.grille-formulaires {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}
.carte-formulaire {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.05s;
}
.carte-formulaire:hover { border-color: var(--bleu); box-shadow: 0 4px 14px rgba(31, 78, 121, 0.12); }
.carte-formulaire:active { transform: translateY(1px); }
.carte-formulaire__icone { font-size: 1.6rem; }
.carte-formulaire__titre { font-weight: 700; color: var(--bleu); }
.carte-formulaire__desc { font-size: 0.85rem; color: var(--gris); }

.bd-serveur { margin: 1rem 0 0; text-align: center; font-size: 0.75rem; color: #8a8f98; }
.fil-ariane { margin: 0 0 0.5rem; font-size: 0.85rem; }
.fil-ariane a { color: var(--bleu); text-decoration: none; }
.formulaire textarea {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--bordure);
  border-radius: 7px;
  font: inherit;
  resize: vertical;
}
.erreur-detail {
  background: #fbeaea;
  border: 1px solid #f5c2c0;
  border-radius: 7px;
  padding: 0.7rem;
  font-size: 0.8rem;
  white-space: pre-wrap;
  overflow-x: auto;
}

/* --- Bulletin de remplacement --- */
.champs-bulletin {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.champs-bulletin label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--gris); }
.champs-bulletin input, .champs-bulletin select {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--bordure);
  border-radius: 7px;
  font-size: 1rem;
}
.lecture-seule { background: #f1f3f6; color: #333; }
.oblig { color: #b3261e; font-weight: 700; }
.tableau-saisie input:user-invalid,
.champs-bulletin input:user-invalid { border-color: #e6a6a3; background: #fdf6f6; }
.type-cours {
  border: 1px solid var(--bordure);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin-bottom: 1.25rem;
}
.type-cours legend { font-size: 0.85rem; color: var(--gris); padding: 0 0.4rem; }
.type-cours .case { display: block; margin: 0.3rem 0; font-size: 0.95rem; }
.sous-section { font-size: 1.05rem; color: var(--bleu); margin: 0.5rem 0; }
.tableau-saisie th { font-size: 0.82rem; }
.tableau-saisie td { padding: 0.3rem 0.4rem; }
.tableau-saisie input,
.tableau-saisie select {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  font-size: 0.9rem;
  background: #fff;
}
#ajouter-ligne { margin: 0.6rem 0 1.25rem; }

/* --- Annonce d'absence : blocs conditionnels --- */
.bloc-conditionnel {
  margin: 0.4rem 0 0.8rem 1.7rem;
  padding: 0.7rem 0.9rem;
  background: var(--bleu-clair);
  border-radius: 8px;
}
.bloc-conditionnel[hidden] { display: none; }
.bloc-titre { margin: 0 0 0.5rem; font-weight: 600; font-size: 0.9rem; color: var(--bleu); }
.ligne-date { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.ligne-date input { padding: 0.4rem 0.5rem; border: 1px solid var(--bordure); border-radius: 6px; }
.cadre-remplacant {
  border: 1px solid var(--bordure);
  border-radius: 8px;
  padding: 0.8rem 1rem 1rem;
  margin-bottom: 1.25rem;
}
.cadre-remplacant[hidden] { display: none; }
.cadre-remplacant legend { font-weight: 700; color: var(--bleu); padding: 0 0.4rem; }

/* --- Projet musique de chambre --- */
.texte-intro {
  background: #fafbfc;
  border-left: 3px solid var(--bleu);
  padding: 0.8rem 1.1rem;
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
  color: #333;
  border-radius: 0 8px 8px 0;
}
.texte-intro p { margin: 0.4rem 0; }
.texte-intro ul { margin: 0.4rem 0; padding-left: 1.2rem; }
.label-bloc { display: block; font-size: 0.85rem; color: var(--gris); margin-bottom: 0.3rem; }

/* Éditeur de texte mis en forme */
.richtext { border: 1px solid var(--bordure); border-radius: 8px; overflow: hidden; margin-bottom: 1.25rem; }
.richtext-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; padding: 0.4rem; background: #f1f3f6; border-bottom: 1px solid var(--bordure); }
.richtext-barre button {
  min-width: 2rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--bordure);
  background: #fff;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1.2;
}
.richtext-barre button:hover { background: var(--bleu-clair); }
.richtext-sep { width: 1px; align-self: stretch; background: var(--bordure); margin: 0.1rem 0.25rem; }

/* Sélecteur de couleur déguisé en bouton */
.richtext-couleur {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 1.9rem;
  border: 1px solid var(--bordure);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
}
.richtext-couleur:hover { background: var(--bleu-clair); }
.richtext-couleur .pastille { font-weight: 700; font-size: 0.85rem; border-bottom: 3px solid currentColor; line-height: 1; padding-bottom: 1px; }
.richtext-couleur .pastille--surligne { background: #ffe066; padding: 0 2px; border-bottom: none; }
.richtext-couleur input[type="color"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  border: none;
  cursor: pointer;
}
.richtext-zone { min-height: 140px; padding: 0.7rem 0.9rem; outline: none; font-size: 0.95rem; line-height: 1.5; }
.richtext-zone:focus { background: #fffefb; }

/* Recherche d'élève (autocomplétion) dans le tableau du projet de chambre */
.tableau-eleves-chambre td { overflow: visible; }
.cell-recherche { position: relative; }
.autocomplete {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 30;
  background: #fff;
  border: 1px solid var(--bordure);
  border-top: none;
  border-radius: 0 0 7px 7px;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}
.autocomplete[hidden] { display: none; }
.auto-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  font-size: 0.9rem;
}
.auto-item:hover { background: var(--bleu-clair); }
.auto-meta { color: var(--gris); font-size: 0.8rem; white-space: nowrap; }
.auto-vide { padding: 0.5rem 0.7rem; color: var(--gris); font-size: 0.85rem; font-style: italic; }
.liste .vide { text-align: center; color: var(--gris); padding: 1.5rem; }
.badge-exam {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: #fef3cd;
  color: #8a6d00;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}

/* --- Bandeau « base de TEST » (rappel permanent, toutes pages) --- */
.bandeau-test {
  background: #fff4d6;
  border-bottom: 2px solid #e0a800;
  color: #6b4d00;
  text-align: center;
  padding: 0.45rem 1rem;
  font-size: 0.9rem;
}

/* --- Super-admin : bloc « base active » (prod / test) --- */
.cible-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border: 2px solid #c62828;
  border-radius: 8px;
  background: #fdeaea;
}
.cible-base--test { border-color: #e0a800; background: #fff8e6; }
.cible-base__etat { margin: 0; }
.cible-base code { font-size: 0.85rem; }

/* --- Crayon d'édition de l'horaire (colonnes Jour / Heure / Lieu) --- */
.cel-horaire { white-space: nowrap; }
.crayon {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0 0.15rem;
  font-size: 0.9em;
  line-height: 1;
  opacity: 0.55;                   /* toujours visible, discret ; net au survol */
  transition: opacity 0.12s, transform 0.12s;
}
tr:hover .crayon { opacity: 0.85; }
.crayon:hover, .crayon:focus { opacity: 1; transform: scale(1.2); }

/* --- État « Résumé de la dotation » (page Salaire) ---------------------
   Mise en page calquée sur l'état imprimé par OG (bouton « Prof »). */
.etat-salaire {
  max-width: 720px;
  margin: 1.2rem auto 0;
  color: #000;
}
.etat-salaire__org { font-size: 1.35rem; font-weight: 700; letter-spacing: 0.02em; }
.etat-salaire__org span { color: #999; }
.etat-salaire__sous { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; }
.etat-salaire__titre {
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  margin: 1.4rem 0;
}
.etat-salaire__identite { font-size: 0.85rem; line-height: 1.5; }
.etat-salaire__table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #000;
  font-size: 0.78rem;
  margin-top: 0.9rem;
}
.etat-salaire__table th,
.etat-salaire__table td { padding: 0.22rem 0.35rem; }
.etat-salaire__table th { font-weight: 700; text-align: left; }
.etat-salaire__table .col-cours  { width: 30%; }
.etat-salaire__table .col-niveau { width: 24%; }
.etat-salaire__table .centre { text-align: center; }
.etat-salaire__table .droite { text-align: right; }
.etat-salaire__soustotal td { font-weight: 700; border-top: 1px solid #000; }
.etat-salaire__mensuel { text-align: right; font-size: 0.82rem; margin: 0.15rem 0 0; }
.etat-salaire__pied {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.82rem;
  margin-top: 1.1rem;
}
.etat-salaire__taux { font-size: 0.85rem; margin: 0.4rem 0 0; }
.etat-salaire__brut { text-align: right; font-size: 0.9rem; margin-top: 0.5rem; }

/* À l'impression : ne garder que l'état (ni en-tête de site, ni boutons). */
@media print {
  .entete, .pied, .entete-actions, .no-print, .bandeau-test { display: none !important; }
  .carte { border: 0; box-shadow: none; padding: 0; }
  .etat-salaire { max-width: none; margin: 0; }
}

/* --- Projet artistique : champs longs et pièces jointes --- */
.champ-texte-long {
  width: 100%;
  font: inherit;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--bordure, #ccc);
  border-radius: 6px;
  resize: vertical;
}
/* Champ court : une date n'a pas besoin de toute la largeur. */
.label-etroit input { max-width: 14rem; }

/* Titre + bouton d'action sur la même ligne. Nécessaire parce que .formulaire
   est une colonne flex : sans ce conteneur, le bouton s'étirerait sur toute
   la largeur. */
.titre-action {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem;
}
.titre-action .sous-section { margin: 0; }

/* Pièces jointes affichées en « jetons » retirables un à un. */
.jetons-fichiers {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.jeton {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.4rem 0.3rem 0.7rem;
  border: 1px solid var(--bordure, #ccc);
  border-radius: 999px;
  background: #f4f7fb;
  font-size: 0.85rem;
  max-width: 100%;
}
.jeton__nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22rem; }
.jeton__poids { color: var(--gris, #667); font-size: 0.78rem; }
.jeton__retirer {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--gris, #667);
  font-size: 0.9rem;
  line-height: 1;
  padding: 0.1rem 0.2rem;
  border-radius: 50%;
}
.jeton__retirer:hover, .jeton__retirer:focus { background: #dde5ef; color: #000; }
/* Fichier hors limite : visible d'un coup d'œil, et l'envoi est bloqué. */
.jeton--refuse { border-color: #c62828; background: #fdeaea; }
.jeton--refuse .jeton__nom { color: #c62828; font-weight: 600; }

/* Mention « Inscriptions figées » à côté du titre du tableau des inscrits. */
.fige-mention { color: #c62828; font-weight: 600; font-size: 0.85rem; }
/* Titre + bouton « Trier par heure » : le h3 n'a plus de marge propre, on la
   remet sur le conteneur pour que le bouton ne colle pas au tableau. */
.modal__boite .titre-action h3 { margin: 0; }
.modal__boite .titre-action { margin-bottom: 0.5rem; }

/* Formulaire temporairement fermé : visible mais inerte. */
.carte-formulaire--bloquee {
  opacity: 0.55;
  cursor: not-allowed;
  position: relative;
}
.carte-formulaire--bloquee .carte-formulaire__titre { color: var(--gris, #667); }
.carte-formulaire__etat {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #b26a00;
}