/* Gestion des emplois du temps
   Feuille de style unique, sans dependance externe.
   Mise en page a barre laterale, dans l'esprit d'un panneau d'administration.
   Typographie : Montserrat pour les titres, Inter pour le texte et les chiffres. */

@import url('/static/polices.css');

/* Les fichiers statiques sont versionnes par l'application :
   voir version_statique() dans app/templating.py. */

:root {
  --titre: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --texte: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --violet: #673de6;
  --violet-sombre: #5730c9;
  --violet-clair: #f2eeff;
  --violet-trait: #ddd2ff;

  --encre: #1d1e20;
  --encre-douce: #6b7280;
  --encre-tres-douce: #9aa1ae;
  --trait: #ececf2;
  --trait-fonce: #dcdce6;
  --fond: #f6f6f9;
  --blanc: #ffffff;
  --accent: var(--violet);
  --accent-clair: var(--violet-clair);

  --succes: #0f7b4f;
  --succes-clair: #e6f6ee;
  --alerte: #a15c00;
  --alerte-clair: #fdf3e3;
  --erreur: #c0293b;
  --erreur-clair: #fdecee;

  --rayon: 14px;
  --rayon-petit: 9px;
  --ombre: 0 1px 2px rgba(29, 30, 32, .04), 0 4px 16px rgba(29, 30, 32, .05);
  --largeur-barre: 248px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--texte);
  font-size: 14px;
  color: var(--encre);
  background: var(--fond);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ================= Ossature ================= */

.application { display: flex; min-height: 100vh; }

.zone { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.contenu { padding: 26px 30px 60px; max-width: 1560px; width: 100%; }

/* ================= Barre laterale ================= */

.barre-laterale {
  width: var(--largeur-barre);
  flex: 0 0 var(--largeur-barre);
  background: var(--blanc);
  border-right: 1px solid var(--trait);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 40;
}

.marque {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px 18px 16px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--trait);
}

.marque-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex: 0 0 40px;
  display: block;
}

.marque-pastille {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--violet); color: var(--blanc);
  border-radius: 11px;
  font-family: var(--titre); font-weight: 700; font-size: 18px;
}

.marque-texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }

.marque-nom {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .1px;
  line-height: 1.25;
  /* Un nom d'etablissement est long : il tient sur deux lignes plutot
     que d'etre coupe par des points de suspension. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.marque-annee { font-size: 11.5px; color: var(--encre-tres-douce); }

.menu { padding: 12px 10px 18px; flex: 1 1 auto; }

.menu-titre {
  font-family: var(--titre);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--encre-tres-douce);
  padding: 14px 10px 6px;
}

.lien-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 1px;
  border-radius: var(--rayon-petit);
  color: var(--encre-douce);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
}

.lien-menu:hover { background: var(--fond); color: var(--encre); }

.lien-menu.actif {
  background: var(--violet-clair);
  color: var(--violet-sombre);
  font-weight: 600;
}

.lien-menu .ico { width: 18px; height: 18px; flex: 0 0 18px; }
.lien-menu.actif .ico { color: var(--violet); }

.menu-pied {
  padding: 14px 18px 18px;
  border-top: 1px solid var(--trait);
  font-size: 11px;
  color: var(--encre-tres-douce);
  line-height: 1.5;
}

.voile { display: none; }

/* ================= Barre du haut ================= */

.barre-haut {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--trait);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 30px;
  min-height: 60px;
}

.fil { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.fil-etab {
  font-family: var(--titre); font-weight: 700; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fil-annee { font-size: 12px; color: var(--encre-douce); }

.actions-haut { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.compte {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 11px 5px 6px;
  border: 1px solid var(--trait);
  border-radius: 99px;
  text-decoration: none; color: inherit;
  background: var(--blanc);
}
.compte:hover { background: var(--fond); }
.compte-pastille {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--violet-clair); color: var(--violet-sombre);
  font-family: var(--titre); font-weight: 700; font-size: 13px;
}
.compte-texte { display: flex; flex-direction: column; line-height: 1.2; }
.compte-nom { font-family: var(--titre); font-weight: 600; font-size: 12.5px; }
.compte-role { font-size: 10.5px; color: var(--encre-tres-douce); }

@media (max-width: 760px) { .compte-texte { display: none; } }

.bouton-menu {
  display: none;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  border: 1px solid var(--trait-fonce);
  background: var(--blanc);
  border-radius: var(--rayon-petit);
  cursor: pointer;
  color: var(--encre);
}
.bouton-menu svg { width: 20px; height: 20px; }

/* ================= Titres ================= */

h1, h2, h3 { font-family: var(--titre); }
h1 { font-size: 24px; font-weight: 700; letter-spacing: -.3px; margin: 0 0 6px; }
h2 { font-size: 17px; font-weight: 600; letter-spacing: -.1px; margin: 30px 0 12px; }
h3 { font-size: 11px; font-weight: 700; margin: 20px 0 8px; text-transform: uppercase;
     letter-spacing: .9px; color: var(--encre-tres-douce); }

.sous-titre { color: var(--encre-douce); margin: 0 0 22px; max-width: 78ch; }

/* ================= Cartes ================= */

.carte {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: var(--ombre);
}

.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.indicateur {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 18px;
  box-shadow: var(--ombre);
  position: relative;
}

.indicateur .etiquette-haut {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--titre); font-size: 11px; font-weight: 600;
  letter-spacing: .4px; text-transform: uppercase; color: var(--encre-tres-douce);
  margin-bottom: 10px;
}
.indicateur .etiquette-haut .ico { width: 15px; height: 15px; color: var(--violet); }

.indicateur .valeur {
  font-family: var(--titre);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.8px;
  font-variant-numeric: tabular-nums;
}

.indicateur .etiquette { color: var(--encre-douce); font-size: 12.5px; margin-top: 5px; }
.indicateur.attention .valeur { color: var(--alerte); }
.indicateur.probleme .valeur { color: var(--erreur); }
.indicateur.ok .valeur { color: var(--succes); }

.rangee { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.rangee > * { flex: 0 0 auto; }

/* Barre de progression */
.jauge {
  height: 6px; background: var(--trait); border-radius: 99px;
  overflow: hidden; margin-top: 10px;
}
.jauge > span { display: block; height: 100%; background: var(--violet); border-radius: 99px; }
.jauge.haute > span { background: var(--alerte); }
.jauge.pleine > span { background: var(--erreur); }

/* ================= Formulaires ================= */

label { display: block; font-family: var(--titre); font-size: 11px;
        font-weight: 600; letter-spacing: .2px;
        color: var(--encre-douce); margin-bottom: 5px; }

/* Tous les champs de saisie partagent la meme allure : les dates et les
   mots de passe sont de la liste, sinon le navigateur leur redonne son
   propre habillage au milieu d'un formulaire soigne. */
input[type=text], input[type=number], input[type=email], input[type=password],
input[type=date], input[type=time], input[type=search], input[type=tel],
input[type=url], input[type=file], select, textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--trait-fonce);
  border-radius: var(--rayon-petit);
  background: var(--blanc);
  color: var(--encre);
  min-width: 120px;
}

input[type=date], input[type=time] { font-variant-numeric: tabular-nums; }

input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--violet-clair);
  border-color: var(--violet);
}

input[type=checkbox] { accent-color: var(--violet); width: 15px; height: 15px; }

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--titre);
  letter-spacing: .1px;
  padding: 9px 16px;
  border: 1px solid var(--violet);
  border-radius: var(--rayon-petit);
  background: var(--violet);
  color: var(--blanc);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, border-color .12s;
}
.bouton:hover { background: var(--violet-sombre); border-color: var(--violet-sombre); }
.bouton.secondaire { background: var(--blanc); color: var(--violet); }
.bouton.secondaire:hover { background: var(--violet-clair); }
.bouton.discret { background: var(--blanc); color: var(--encre-douce);
                  border-color: var(--trait-fonce); font-weight: 500; }
.bouton.discret:hover { background: var(--fond); color: var(--encre); }
.bouton.danger { background: var(--blanc); color: var(--erreur); border-color: #f3c9ce; }
.bouton.danger:hover { background: var(--erreur-clair); }
.bouton.petit { padding: 5px 10px; font-size: 12px; border-radius: 7px; }

/* ================= Tableaux ================= */

table { border-collapse: collapse; width: 100%; background: var(--blanc); }

th, td {
  border-bottom: 1px solid var(--trait);
  padding: 9px 11px;
  text-align: left;
  vertical-align: middle;
}

th { background: #fbfbfd; font-family: var(--titre); font-size: 10.5px;
     text-transform: uppercase; letter-spacing: .6px;
     color: var(--encre-tres-douce); font-weight: 700;
     border-bottom: 1px solid var(--trait-fonce); }

tbody tr:hover { background: #fcfcfe; }
tbody tr:last-child td { border-bottom: none; }
td.nombre, th.nombre { text-align: right; font-variant-numeric: tabular-nums; }

.tableau-defilant {
  overflow-x: auto;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  margin-bottom: 18px;
}
.carte .tableau-defilant { box-shadow: none; }

/* ================= Messages ================= */

.alerte { padding: 12px 15px; border-radius: var(--rayon-petit);
          margin-bottom: 16px; border: 1px solid; }
.alerte-succes { background: var(--succes-clair); border-color: #bfe5d3; color: var(--succes); }
.alerte-erreur { background: var(--erreur-clair); border-color: #f3c9ce; color: var(--erreur); }
.alerte-info { background: var(--violet-clair); border-color: var(--violet-trait); color: var(--violet-sombre); }
.alerte-attention { background: var(--alerte-clair); border-color: #f0d9ac; color: var(--alerte); }

.liste-alertes { margin: 6px 0 0; padding-left: 18px; }
.liste-alertes li { margin-bottom: 3px; }

.etiquette-statut {
  display: inline-block; padding: 3px 9px; border-radius: 20px;
  font-family: var(--titre); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
}
.st-fonctionnaire { background: var(--succes-clair); color: var(--succes); }
.st-contractuel { background: var(--violet-clair); color: var(--violet-sombre); }
.st-vacataire { background: var(--alerte-clair); color: var(--alerte); }
.st-appui_local { background: #eef2ff; color: #4338ca; }

.vide { color: var(--encre-tres-douce); font-style: italic; }

/* ================= Grille d'emploi du temps ================= */

.grille-edt {
  border-collapse: collapse; width: 100%; table-layout: fixed;
  background: var(--blanc);
}

.grille-edt th, .grille-edt td {
  border: 1px solid var(--trait);
  padding: 0;
  height: 48px;
  text-align: center;
  font-size: 12px;
}

.grille-edt thead th { background: #fbfbfd; border-bottom: 1px solid var(--trait-fonce); }

.grille-edt th.heure { width: 98px; background: #fbfbfd; font-size: 11px;
                       font-family: var(--texte); font-weight: 600;
                       text-transform: none; letter-spacing: 0; color: var(--encre-douce);
                       font-variant-numeric: tabular-nums; padding: 4px; }
.grille-edt tr.pause td { background: #f4f4f8; color: var(--encre-tres-douce);
                          height: 24px; letter-spacing: 6px; font-size: 10.5px;
                          font-weight: 600; }
.grille-edt tr.tutorat td { background: #fbf7ee; color: #8a6d3b;
                            height: 26px; font-size: 11px; font-weight: 600; }

.case { height: 100%; padding: 5px; display: flex; flex-direction: column;
        justify-content: center; gap: 1px; cursor: grab; border-radius: 5px; }

/* Une seule couleur, unie, pour toutes les cases occupees : ni teinte par
   matiere, ni filet plus fonce sur le bord. Une grille ou chaque case a sa
   couleur se lit mal, et s'imprime plus mal encore. */
.case.occupee {
  background: var(--violet-clair);
  border: none;
}
.case.occupee .matiere { color: var(--violet-sombre); }

/* Seance tenue par un autre responsable : lisible, mais pas manipulable. */
.case.figee { cursor: default; background: var(--fond); }
.case.figee .matiere { color: var(--encre-douce); }

/* Meme idee dans le tableau de repartition des services. */
.hors-perimetre {
  padding: 6px 9px;
  border: 1px dashed var(--trait-fonce);
  border-radius: var(--rayon-petit);
  background: var(--fond);
  color: var(--encre-douce);
  font-size: 13px;
  min-width: 130px;
}
.case .matiere { font-family: var(--titre); font-weight: 700; font-size: 12px;
                 letter-spacing: .1px; }
.case .detail { font-size: 10px; color: var(--encre-douce); }
.case.vide-case { cursor: pointer; background: transparent; }
.case.vide-case:hover { background: var(--violet-clair); }
.case.verrouillee { box-shadow: inset 3px 0 0 var(--encre); }
.case.survol { outline: 2px dashed var(--violet); outline-offset: -3px; }
.case.conflit { outline: 2px solid var(--erreur); outline-offset: -3px; }

/* ================= Fiches imprimables ================= */

.fiche { background: var(--blanc); padding: 22px; border: 1px solid var(--trait);
         border-radius: var(--rayon); margin-bottom: 20px; position: relative;
         box-shadow: var(--ombre); }

.barre-fiche {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  justify-content: flex-end; padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--trait);
}

.fiche-entete { margin-bottom: 14px; position: relative; }
.logo-fiche { height: 66px; width: auto; display: block; margin: 0 auto 8px; }
.fiche-entete .etablissement { font-family: var(--titre); text-align: center;
                               font-weight: 700; text-transform: uppercase;
                               letter-spacing: 1.2px; }
.fiche-entete .titre-fiche { font-family: var(--titre); text-align: center;
                             font-size: 15px; font-weight: 700;
                             letter-spacing: .3px; margin: 8px 0 14px; }
.fiche-champs { display: grid; grid-template-columns: repeat(2, 1fr);
                gap: 4px 24px; margin-bottom: 12px; }
.fiche-champs div { border-bottom: 1px dotted var(--trait-fonce); padding: 3px 0; }
.fiche-champs .cle { font-family: var(--titre); font-weight: 600;
                     text-transform: uppercase; font-size: 10px; letter-spacing: .4px;
                     color: var(--encre-douce); }
.fiche-visa { font-family: var(--titre); margin-top: 18px; text-align: right;
              font-size: 11px; font-weight: 600;
              text-transform: uppercase; letter-spacing: .6px; }

/* Cellule coupee en diagonale : matiere en haut, classe en bas */
.diagonale {
  position: relative; height: 100%; width: 100%;
  background-image: linear-gradient(to top right,
    transparent calc(50% - 0.5px), var(--trait-fonce) 50%, transparent calc(50% + 0.5px));
}
.diagonale .haut { position: absolute; top: 3px; left: 5px;
                   font-family: var(--titre); font-weight: 700; }
.diagonale .bas { position: absolute; bottom: 3px; right: 5px; }

/* ================= Adaptation aux petits ecrans ================= */

@media (max-width: 1020px) {
  .barre-laterale {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 0 0 40px rgba(29, 30, 32, .18);
  }
  .barre-laterale.ouverte { transform: translateX(0); }
  .voile { display: block; position: fixed; inset: 0; background: rgba(29, 30, 32, .35);
           opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 35; }
  .voile.visible { opacity: 1; pointer-events: auto; }
  .bouton-menu { display: flex; }
  .barre-haut { padding: 12px 18px; }
  .contenu { padding: 20px 18px 50px; }
}

/* ================= Impression ================= */

@media print {
  .barre-laterale, .barre-haut, .voile,
  .sans-impression, .bouton { display: none !important; }
  [hidden] { display: none !important; }
  body { background: var(--blanc); font-size: 11px; }
  .application { display: block; }
  .contenu { padding: 0; max-width: none; }
  .carte, .fiche, .tableau-defilant { border: none; box-shadow: none;
                                      padding: 0; margin: 0; }
  .fiche { page-break-after: always; }
  .fiche:last-child { page-break-after: auto; }
  .grille-edt th, .grille-edt td { height: 34px; }
  /* Sur papier, le quadrillage du tableau suffit : pas de fond de couleur,
     que le navigateur refuse le plus souvent d'imprimer de toute facon. */
  .case.occupee { background: none; }
  .case.occupee .matiere { color: #000; }
  @page { size: A4 portrait; margin: 12mm; }
}

/* ==========================================================================
   Finitions : barres d'outils, champs encadres, points critiques
   ========================================================================== */

/* --- Listes deroulantes : chevron dessine, pas de fleche systeme ---
   Cette mise en forme reste celle du <select> natif : elle sert de secours
   si le script liste-deroulante.js ne s'execute pas. Quand il s'execute, le
   <select> passe derriere un bouton (voir la section "Listes deroulantes
   habillees" a la fin du fichier). */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 9px center;
  cursor: pointer;
}
select:hover { border-color: var(--violet-trait); }

input[type=text], input[type=number], input[type=email], input[type=password],
input[type=date], input[type=time], input[type=search], input[type=tel],
input[type=url], select, textarea {
  transition: border-color .12s, box-shadow .12s;
  box-shadow: 0 1px 1px rgba(29, 30, 32, .03);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px var(--violet-clair);
}

/* --- Champ encadre : etiquette + controle dans un meme cadre --- */
.champ {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 11px 8px;
  background: var(--blanc);
  border: 1px solid var(--trait-fonce);
  border-radius: var(--rayon-petit);
  min-width: 170px;
  transition: border-color .12s, box-shadow .12s;
}
.champ:focus-within { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-clair); }
.champ > label {
  margin: 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--encre-tres-douce);
}
.champ > select, .champ > input, .champ > textarea {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0 0 0 1px;
  min-width: 0;
  width: 100%;
  font-size: 13.5px;
  font-weight: 500;
}
.champ > select { padding-right: 22px; background-position: right 0 center; }
.champ > select:focus, .champ > input:focus { outline: none; box-shadow: none; }
.champ.critique { border-color: var(--erreur); background: var(--erreur-clair); }

/* --- Barre d'outils : un bandeau propre au-dessus des tableaux --- */
.barre-outils {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 12px 14px;
  margin-bottom: 18px;
}
.barre-outils .separateur { flex: 1 1 auto; }
.barre-outils .bouton { align-self: flex-end; }
.barre-outils .groupe { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }

/* --- Boutons : relief discret, appui perceptible --- */
.bouton {
  box-shadow: 0 1px 2px rgba(29, 30, 32, .07);
  transition: background .12s, border-color .12s, box-shadow .12s, transform .06s;
}
.bouton:hover { box-shadow: 0 3px 10px rgba(103, 61, 230, .18); }
.bouton:active { transform: translateY(1px); box-shadow: none; }
.bouton:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--violet-clair); }
.bouton.secondaire, .bouton.discret, .bouton.danger { box-shadow: 0 1px 2px rgba(29, 30, 32, .05); }
.bouton.secondaire:hover, .bouton.discret:hover { box-shadow: 0 2px 8px rgba(29, 30, 32, .09); }
.bouton.danger:hover { box-shadow: 0 2px 8px rgba(192, 41, 59, .16); }
.bouton .ico { width: 15px; height: 15px; flex: 0 0 15px; }
.bouton[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* --- Points critiques : toujours en rouge --- */
.critique { color: var(--erreur) !important; }

.pastille-critique {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: 20px;
  background: var(--erreur-clair); color: var(--erreur);
  border: 1px solid #f3c9ce;
  font-family: var(--titre); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
}
.pastille-critique::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--erreur); flex: 0 0 6px;
}

.bloc-critique {
  border: 1px solid #f3c9ce;
  border-left: 4px solid var(--erreur);
  background: var(--erreur-clair);
  color: var(--erreur);
  border-radius: var(--rayon-petit);
  padding: 12px 15px;
  margin-bottom: 16px;
}
.bloc-critique h3 { color: var(--erreur); margin: 0 0 6px; }
.bloc-critique ul { margin: 6px 0 0; padding-left: 18px; }
.bloc-critique li { margin-bottom: 3px; }

/* Cases de grille signalees comme critiques */
.grille-edt td.case-critique { background: var(--erreur-clair); }
.grille-edt td.case-critique .case { box-shadow: inset 0 0 0 2px var(--erreur); }
.grille-edt td.trou-critique {
  background: repeating-linear-gradient(135deg, #fdecee, #fdecee 6px, #fbdfe3 6px, #fbdfe3 12px);
}
.grille-edt td.trou-critique::after {
  content: "heure creuse"; display: block; font-size: 9px; color: var(--erreur);
  font-weight: 600; letter-spacing: .3px;
}
.grille-edt tr.debut-tardif th.heure { color: var(--erreur); font-weight: 700; }

.liste-alertes li.critique::marker { color: var(--erreur); }

/* --- Conseil sur les journees de presence --- */
.conseil { margin-top: 12px; }
.options-jours { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.option-jour {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--trait-fonce); border-radius: var(--rayon-petit);
  background: var(--blanc); padding: 9px 12px; cursor: pointer;
  text-align: left; font-family: var(--texte); min-width: 190px;
  transition: border-color .12s, box-shadow .12s;
}
.option-jour:hover { border-color: var(--violet); box-shadow: 0 2px 10px rgba(103, 61, 230, .14); }
.option-jour .titre-option {
  font-family: var(--titre); font-weight: 700; font-size: 13px; color: var(--encre);
}
.option-jour .note-option { font-size: 11.5px; color: var(--encre-douce); }
.option-jour.retenue { border-color: var(--violet); background: var(--violet-clair); }

@media print { .barre-outils, .options-jours { display: none !important; } }

/* --- Emplois du temps conserves, annee par annee --- */

.annee-versions { margin-bottom: 26px; }

.entete-annee {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.titre-annee {
  margin: 0;
  font-family: var(--titre);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.1px;
  text-transform: none;
  color: var(--encre);
}
.compte-versions { font-size: 12px; color: var(--encre-tres-douce); margin-left: auto; }

/* Une annee passee s'efface d'un ton : elle reste consultable, elle ne
   reclame plus l'attention. Le survol la rend a sa lisibilite entiere. */
.annee-versions.passee .titre-annee { color: var(--encre-douce); }
.annee-versions.passee .tableau-defilant { opacity: .82; transition: opacity .15s; }
.annee-versions.passee .tableau-defilant:hover { opacity: 1; }

.actions-version {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

/* --- Matieres rangees par groupe (enseignements generaux, puis filieres) --- */

.groupe-matieres {
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
  padding: 10px 12px 12px;
  margin-bottom: 10px;
  background: #fcfcfe;
}
.titre-groupe-matieres {
  margin: 0 0 8px;
  font-family: var(--titre);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--encre-douce);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--trait);
}
.choix-matieres {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 3px 12px;
}
.choix-matiere {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  padding: 3px 5px;
  border-radius: 6px;
  font-family: var(--texte);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--encre);
  cursor: pointer;
}
.choix-matiere:hover { background: var(--violet-clair); }
.choix-matiere input { flex: 0 0 auto; margin: 0; }

/* ==========================================================================
   Listes deroulantes habillees
   Le <select> reste dans le formulaire mais devient invisible ; c'est le
   bouton qui s'affiche, et le panneau des choix est dessine ici.
   Voir app/static/liste-deroulante.js.
   ========================================================================== */

.liste-pro {
  position: relative;
  display: inline-flex;
  vertical-align: top;
  min-width: 150px;
  max-width: 100%;
}

/* Le champ natif garde sa place et sa taille : le navigateur peut ainsi
   afficher au bon endroit son message de champ obligatoire. */
.liste-pro-natif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  background: none;
  box-shadow: none;
}

.liste-pro-bouton {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  font-family: var(--texte);
  font-size: 14px;
  color: var(--encre);
  text-align: left;
  background: var(--blanc);
  border: 1px solid var(--trait-fonce);
  border-radius: var(--rayon-petit);
  box-shadow: 0 1px 1px rgba(29, 30, 32, .03);
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, background .12s;
}

.liste-pro-valeur {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.liste-pro.sans-choix .liste-pro-valeur { color: var(--encre-tres-douce); }

.liste-pro-chevron {
  width: 15px; height: 15px; flex: 0 0 15px;
  color: var(--encre-tres-douce);
  transition: transform .15s, color .12s;
}

.liste-pro-bouton:hover { border-color: var(--violet-trait); }
.liste-pro-bouton:hover .liste-pro-chevron { color: var(--encre-douce); }
.liste-pro-bouton:focus-visible {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px var(--violet-clair);
}
.liste-pro.deployee .liste-pro-bouton {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px var(--violet-clair);
}
.liste-pro.deployee .liste-pro-chevron { transform: rotate(180deg); color: var(--violet); }
.liste-pro.desactivee { opacity: .6; }
.liste-pro-bouton[disabled] { cursor: not-allowed; background: var(--fond); }

/* Dans un champ encadre, le bouton n'a ni cadre ni fond propres. */
.champ > .liste-pro { min-width: 0; width: 100%; }
.champ > .liste-pro .liste-pro-bouton {
  padding: 0 0 0 1px;
  font-size: 13.5px;
  font-weight: 500;
  border: none;
  background: transparent;
  box-shadow: none;
}
.champ > .liste-pro .liste-pro-chevron { width: 14px; height: 14px; flex: 0 0 14px; }

/* Dans un tableau, les lignes restent denses. */
td > .liste-pro .liste-pro-bouton { padding: 6px 9px; font-size: 13px; }

/* --- Panneau des choix --- */

.liste-pro-panneau {
  position: fixed;
  z-index: 90;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  max-width: 560px;
  background: var(--blanc);
  border: 1px solid var(--trait-fonce);
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(29, 30, 32, .05), 0 14px 36px rgba(29, 30, 32, .17);
  overflow: hidden;
  animation: liste-pro-entree .11s ease-out;
}
.liste-pro-panneau.vers-haut { animation-name: liste-pro-entree-haut; }

@keyframes liste-pro-entree { from { opacity: 0; transform: translateY(-5px); } }
@keyframes liste-pro-entree-haut { from { opacity: 0; transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) {
  .liste-pro-panneau { animation: none; }
  .liste-pro-chevron { transition: none; }
}

.liste-pro-recherche {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 9px 11px;
  background: #fbfbfd;
  border-bottom: 1px solid var(--trait);
}
.liste-pro-recherche svg {
  width: 15px; height: 15px; flex: 0 0 15px;
  color: var(--encre-tres-douce);
}
.liste-pro-recherche input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  font-family: var(--texte);
  font-size: 13.5px;
  color: var(--encre);
  background: transparent;
  border: none;
  box-shadow: none;
}
.liste-pro-recherche input:focus { outline: none; box-shadow: none; }

.liste-pro-options {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 5px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.liste-pro-options:focus { outline: none; }
.liste-pro-options::-webkit-scrollbar { width: 11px; }
.liste-pro-options::-webkit-scrollbar-thumb {
  background: var(--trait-fonce);
  border: 3px solid var(--blanc);
  border-radius: 99px;
}

/* Le panneau ferme et les choix ecartes par la recherche sont marques
   [hidden]. Sans cette regle, les display:flex poses plus haut annulent le
   display:none que le navigateur applique a [hidden] : ils ont la meme
   force, et la derniere regle lue l'emporte. */
.liste-pro-panneau[hidden],
.liste-pro-panneau [hidden] { display: none !important; }

.liste-pro-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--encre);
  border-radius: 7px;
  cursor: pointer;
}
.liste-pro-option.dans-groupe { padding-left: 19px; }

.liste-pro-etiquette {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.liste-pro-note {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--encre-tres-douce);
  font-variant-numeric: tabular-nums;
}
.liste-pro-coche {
  width: 15px; height: 15px; flex: 0 0 15px;
  color: var(--violet);
  opacity: 0;
}

.liste-pro-option.survolee { background: var(--fond); }
.liste-pro-option.choisie {
  background: var(--violet-clair);
  color: var(--violet-sombre);
  font-weight: 600;
}
.liste-pro-option.choisie .liste-pro-note { color: var(--violet); }
.liste-pro-option.choisie .liste-pro-coche { opacity: 1; }
.liste-pro-option.choisie.survolee { background: var(--violet-trait); }
.liste-pro-option[aria-disabled="true"] {
  color: var(--encre-tres-douce);
  background: none;
  cursor: not-allowed;
}

.liste-pro-groupe {
  padding: 11px 9px 4px;
  font-family: var(--titre);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--encre-tres-douce);
}

.liste-pro-vide {
  margin: 0;
  padding: 18px 12px;
  font-size: 13px;
  text-align: center;
  color: var(--encre-tres-douce);
}

@media print {
  .liste-pro-panneau { display: none !important; }
  .liste-pro-chevron { display: none; }
  .liste-pro-bouton {
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
  }
  .liste-pro-valeur { overflow: visible; white-space: normal; }
}

/* ================= Evaluations : notes et bulletins ================= */

.onglets-classes, .sequences { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.onglet-classe {
  padding: 6px 11px; border: 1px solid var(--trait-fonce); border-radius: var(--rayon-petit);
  background: var(--blanc); color: var(--encre); font-size: 13px; text-decoration: none;
  font-family: var(--titre); font-weight: 600;
}
.onglet-classe span { color: var(--encre-tres-douce); font-weight: 500; margin-left: 4px; }
.onglet-classe.actif { background: var(--violet); border-color: var(--violet); color: var(--blanc); }
.onglet-classe.actif span { color: var(--violet-trait); }

.sequence {
  display: flex; flex-direction: column; align-items: center; min-width: 64px;
  padding: 7px 10px; border: 1px solid var(--trait-fonce); border-radius: var(--rayon-petit);
  background: var(--blanc); text-decoration: none; color: var(--encre);
}
.sequence-nom { font-family: var(--titre); font-weight: 700; font-size: 14px; }
.sequence-etat { font-size: 10.5px; color: var(--succes); }
.sequence.fermee .sequence-etat { color: var(--encre-tres-douce); }
.sequence.actif { border-color: var(--violet); background: var(--violet-clair); }
.sequence.actif .sequence-nom { color: var(--violet-sombre); }

.lien-bouton {
  background: none; border: none; padding: 0; color: var(--violet); cursor: pointer;
  font: inherit; text-decoration: underline;
}
.sans-lien { color: inherit; text-decoration: none; }

.liste-cours { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cours {
  display: flex; flex-direction: column; gap: 3px; padding: 13px 15px;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon);
  text-decoration: none; color: var(--encre);
}
.cours:hover { border-color: var(--violet); }
.cours-classe { font-family: var(--titre); font-weight: 700; font-size: 14px; }
.cours-matiere { color: var(--encre-douce); font-size: 13px; }
.cours-etat { margin-top: 6px; font-size: 12px; color: var(--erreur); }
.cours-etat.partiel { color: var(--alerte); }
.cours-etat.complet { color: var(--succes); }

.table-notes td { padding: 7px 11px; }
.champ-note {
  width: 86px; text-align: right; font-size: 16px; font-variant-numeric: tabular-nums;
  padding: 7px 9px;
}
.champ-note.invalide { border-color: var(--erreur); background: var(--erreur-clair); }
.champ-court { width: 62px; }
.barre-enregistrer {
  position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding: 12px 0; background: var(--fond); border-top: 1px solid var(--trait);
}
.barre-enregistrer span { font-size: 12.5px; color: var(--encre-douce); flex: 1 1 280px; }

.cases-suivi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-bottom: 14px; }
.case-suivi {
  display: flex; flex-direction: column; padding: 8px 10px; border-radius: var(--rayon-petit);
  border: 1px solid; text-decoration: none; color: var(--encre); font-size: 12px;
}
.case-suivi.rien { background: var(--erreur-clair); border-color: #f3c9ce; }
.case-suivi.partiel { background: var(--alerte-clair); border-color: #f0d9ac; }
.case-suivi.complet { background: var(--succes-clair); border-color: #bfe5d3; }
.case-code { font-family: var(--titre); font-weight: 700; }
.case-compte { font-variant-numeric: tabular-nums; }
.case-prof { color: var(--encre-douce); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.jauge { height: 7px; background: var(--trait); border-radius: 4px; overflow: hidden; margin-bottom: 3px; }
.jauge span { display: block; height: 100%; background: var(--violet); }

.table-pv th, .table-pv td { padding: 5px 6px; text-align: center; font-size: 12px; white-space: nowrap; }
.table-pv .g { text-align: left; }
.table-pv th small { font-weight: 500; text-transform: none; letter-spacing: 0; }
.table-pv td.faible { color: var(--erreur); }
.table-pv tfoot td { font-weight: 600; background: #fbfbfd; border-top: 1px solid var(--trait-fonce); }

/* Bulletin : une feuille A4 par eleve */
.bulletin {
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 18px 20px; margin-bottom: 20px; font-size: 11px; color: #111;
  max-width: 820px;
}
.bul-entete { display: grid; grid-template-columns: 1fr 90px 1fr; gap: 8px; align-items: start;
              text-align: center; font-size: 8.5px; line-height: 1.45; letter-spacing: .2px; }
.bul-logo img { height: 70px; width: auto; }
.bul-etablissement { text-align: center; font-family: var(--titre); font-weight: 700;
                     text-transform: uppercase; letter-spacing: 1px; font-size: 12px; margin-top: 6px; }
.bul-titre { text-align: center; font-family: var(--titre); font-weight: 700; font-size: 14px;
             text-transform: uppercase; letter-spacing: .4px; margin-top: 6px;
             padding: 5px 0; border-top: 1.5px solid #111; border-bottom: 1.5px solid #111; }
.bul-annee { text-align: center; font-size: 10.5px; margin: 3px 0 8px; }
.bul-identite { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 14px; margin-bottom: 8px; }
.bul-identite div { border-bottom: 1px dotted #999; padding: 2px 0; }
.bul-identite .large { grid-column: span 2; }
.bul-identite span, .bul-annuel span, .bul-conseil > span {
  display: block; font-family: var(--titre); font-size: 7.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .4px; color: #555;
}
.bul-notes { width: 100%; border-collapse: collapse; font-size: 9.5px; }
.bul-notes th, .bul-notes td { border: 1px solid #777; padding: 2px 4px; text-align: center;
                               font-variant-numeric: tabular-nums; }
.bul-notes th { background: #eee; color: #111; font-size: 8px; letter-spacing: .3px; padding: 3px; }
.bul-notes .g { text-align: left; }
.bul-notes .prof { font-size: 8px; color: #555; margin-left: 5px; }
.bul-notes .visa { width: 52px; }
.bul-notes tr.sous-total td { background: #f4f4f4; font-weight: 600; font-size: 9px; }
.bul-notes tfoot td { font-weight: 700; background: #e9e9e9; }
.bul-resultats { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 6px; margin-top: 7px; }
.bul-moyenne { border: 1.5px solid #111; padding: 6px 8px; display: grid;
               grid-template-columns: auto auto; align-content: start; gap: 1px 6px; align-items: baseline; }
.bul-moyenne span { grid-column: 1 / -1; font-family: var(--titre); font-size: 7.5px; font-weight: 600;
                    text-transform: uppercase; letter-spacing: .4px; color: #555; margin-top: 3px; }
.bul-moyenne strong { font-family: var(--titre); font-size: 18px; }
.bul-moyenne small { font-size: 9px; color: #555; }
.bul-moyenne .appr { font-size: 10px; color: #111; text-transform: none; letter-spacing: 0; font-weight: 600; }
.bul-boite { border: 1px solid #777; padding: 4px 6px; }
.bul-boite-titre { font-family: var(--titre); font-weight: 700; font-size: 8.5px; text-transform: uppercase;
                   letter-spacing: .4px; border-bottom: 1px solid #bbb; padding-bottom: 2px; margin-bottom: 2px; }
.bul-boite .ligne { display: flex; justify-content: space-between; gap: 6px; font-size: 9px; padding: 1px 0; }
.bul-boite .ligne span { color: #333; }
.coche { display: inline-block; width: 11px; height: 11px; border: 1px solid #333; text-align: center;
         font-style: normal; font-weight: 700; font-size: 9px; line-height: 10px; }
.bul-annuel { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 6px;
              border: 1px solid #777; padding: 5px 7px; font-size: 11px; }
.bul-annuel .fort { font-weight: 700; }
.bul-conseil { border: 1px solid #777; padding: 5px 7px; margin-top: 6px; min-height: 38px; font-size: 10.5px; }
.bul-signatures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px;
                  min-height: 70px; font-family: var(--titre); font-size: 9px; font-weight: 600;
                  text-transform: uppercase; letter-spacing: .3px; text-align: center; }
.bul-signatures .nom-chef { margin-top: 38px; text-transform: none; font-size: 10px; }

@media (max-width: 760px) {
  .bul-identite { grid-template-columns: repeat(2, 1fr); }
  .bul-resultats { grid-template-columns: 1fr 1fr; }
  .bul-annuel { grid-template-columns: repeat(3, 1fr); }
  .bulletin { overflow-x: auto; }
}

@media print {
  .bulletin { border: none; border-radius: 0; padding: 0; margin: 0; max-width: none;
              page-break-after: always; break-after: page; }
  .bulletin:last-child { page-break-after: auto; break-after: auto; }
  .bul-notes th, .bul-notes tr.sous-total td, .bul-notes tfoot td {
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .barre-enregistrer { display: none; }
  .table-pv th, .table-pv td { font-size: 9px; padding: 3px 4px; border: 1px solid #999; }
  .table-pv td.faible { color: #000; }
}

/* Suivi pedagogique : une barre par mois, hauteur = taux d'heures faites */
.barres-mois { display: flex; align-items: flex-end; gap: 2px; height: 44px; }
.barre-mois { position: relative; width: 22px; height: 100%; display: flex; flex-direction: column;
              justify-content: flex-end; background: var(--fond); border-radius: 4px 4px 0 0; padding-bottom: 14px; }
.barre-mois i { display: block; width: 100%; background: var(--violet); border-radius: 4px 4px 0 0; min-height: 1px; }
.barre-mois em { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-style: normal;
                 font-size: 9.5px; color: var(--encre-tres-douce); line-height: 12px; }
.barre-mois:hover i { background: var(--violet-sombre); }
.table-suivi .faible { color: var(--erreur); }

/* ================= Champs de saisie : une seule allure partout ================= */

input:not([type]), input[type=text], input[type=number], input[type=email], input[type=password],
input[type=date], input[type=time], input[type=search], input[type=tel], input[type=url], select, textarea {
  font: 14px/1.3 var(--texte);
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--trait-fonce);
  border-radius: 10px;
  background-color: var(--blanc);
  color: var(--encre);
  min-width: 0;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
textarea { height: auto; min-height: 64px; padding: 10px 12px; line-height: 1.45; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--encre-tres-douce); }
input:hover, select:hover, textarea:hover { border-color: #c4c4cf; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-clair); }
input[readonly] { background: var(--fond); color: var(--encre-douce); }

select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
input[type=date] { padding-right: 8px; }
input[type=date]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }

input[type=file] { height: auto; padding: 5px; border: 1px dashed var(--trait-fonce); border-radius: 10px; background: var(--blanc);
                   font: 13px var(--texte); color: var(--encre-douce); max-width: 100%; }
input[type=file]::file-selector-button { border: 0; border-radius: 8px; background: var(--violet-clair); color: var(--violet-sombre);
                   font: 600 13px var(--texte); padding: 8px 14px; margin-right: 12px; cursor: pointer; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--violet); cursor: pointer; vertical-align: middle; }

label { font-family: var(--texte); font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--encre-douce); margin-bottom: 6px; }
.rangee { gap: 14px; }
.rangee > div > input:not([type=checkbox]):not([type=file]), .rangee > div > select { display: block; }

/* Dans les tableaux : champs plus bas, lignes aerees */
table input:not([type=checkbox]):not([type=radio]):not([type=file]), table select { height: 34px; border-radius: 8px; font-size: 13.5px; }
table td { padding-top: 7px; padding-bottom: 7px; }

/* Oeil pour voir le code */
.mdp { position: relative; display: block; }
.mdp input { width: 100%; padding-right: 48px; }
.mdp-voir { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 36px; border: 0;
            background: none; color: var(--encre-douce); cursor: pointer; display: grid; place-items: center; border-radius: 8px; }
.mdp-voir:hover { color: var(--encre); background: var(--fond); }
select { min-width: 74px; }