@charset "UTF-8";
/* ==========================================================================
   THEME SSA (PILOTE) — langage visuel « console d'administration »
   ==========================================================================
   POURQUOI ce fichier : Leck veut tester un rendu inspire de l'app
   HPE Smart Storage Administrator (SSA) sur 3 ecrans seulement
   (login, dashboard, eleves) AVANT de generaliser aux 54 pages.

   REGLE D'OR : ce thema se charge APRES shared.css et REDEFINIT l'apparence
   par-dessus, SANS jamais modifier shared.css. Pour retirer le thema d'une
   page il suffit de supprimer sa ligne <link> — rien d'autre a toucher.

   LE LANGAGE VISUEL EN 6 POINTS (releve sur les captures reelles) :
   1. Tout est CLAIR : fond d'app gris #ddd, panneaux blancs, rail BLANC.
   2. UN SEUL accent : le bleu #0096d6 (liens, boutons, selection).
   3. Navigation = « lisere gauche 4 px » : repos transparent / survol #333
      + fond #e6e6e6 / selection #0096d6 + fond #cceaf7.
   4. Geometrie CARREE : rayon 0 partout, sauf 5 px en haut/bas de panneau.
   5. Ombres quasi nulles — on separe par des FILETS, pas par des ombres.
   6. Densite forte : lignes de tableau ~25 px, corps 12 px, titres 18 px.

   NOTE MARQUE : on reimplemente un langage visuel generique. Aucun logo,
   aucun nom, aucune police HP/HPE n'est repris ici.
   ========================================================================== */

/* ── 1. VARIABLES DU THEME ────────────────────────────────────────────────
   Toutes les valeurs sont regroupees ici : pour retoucher le thema, on
   modifie CES lignes, pas les regles plus bas. */
:root {
  /* Accent unique et ses declinaisons */
  --ssa-bleu:        #0096d6;   /* accent : liens, lisere de selection, boutons */
  --ssa-bleu-texte:  #007dba;   /* texte des boutons (un cran plus foncé, lisible) */
  --ssa-bleu-pale:   #cceaf7;   /* fond de selection + fond des boutons « piano » */
  --ssa-bleu-clair:  #bfe5f5;   /* fond du bouton par defaut au repos */

  /* Neutres de structure */
  --ssa-fond-app:    #dddddd;   /* fond general HORS panneaux */
  --ssa-blanc:       #ffffff;   /* panneaux, rail, champs */
  --ssa-gris-clair:  #f3f3f3;   /* bandeau, en-tete de panneau, th, sections du rail */
  --ssa-gris-moyen:  #e6e6e6;   /* survol de nav, caption de tableau, separateurs */
  --ssa-gris-pied:   #d9d9d9;   /* pied de panneau, bordure des champs */
  --ssa-bordure:     #d2d2d2;   /* bordure des panneaux et filets de tableau */
  --ssa-pointille:   #cccccc;   /* filets pointilles des fiches de detail */

  /* Textes (hierarchie a 4 niveaux) */
  --ssa-texte:       #333333;   /* texte principal et titres */
  --ssa-valeur:      #000000;   /* valeurs de donnees (fiches, cellules) */
  --ssa-label:       #666666;   /* labels secondaires, colonne « label » */
  /* POURQUOI #767676 et non le #999 releve chez SSA : sur fond blanc le #999
     ne donne qu'un ratio de contraste de 2,85 — sous le seuil de 3,0 de notre
     audit, et carrement illisible une fois pose sur le gris #f3f3f3 des
     champs et des cartes KPI. #767676 garde l'effet « texte tertiaire » tout
     en passant l'audit sur les DEUX fonds (4,5 sur blanc, 4,0 sur #f3f3f3). */
  --ssa-faible:      #767676;   /* descriptions, sous-titres 10 px, placeholders */

  /* Etats */
  --ssa-ok:          #42a425;
  --ssa-warn:        #f4b51e;
  --ssa-erreur:      #dc442f;
  --ssa-alerte:      #fb7e07;   /* bandeau d'alerte majeure, texte blanc */
  --ssa-note:        #fffdd7;   /* fond jaune paille des notes inline */

  /* Geometrie : SSA est CARRE. Le seul arrondi est 5 px en haut/bas de panneau. */
  --ssa-rayon:       0;
  --ssa-rayon-panneau: 5px;

  /* Hauteurs canoniques relevees sur les captures */
  --ssa-h-bandeau:   60px;
  --ssa-h-entete:    40px;      /* en-tete de panneau */
  --ssa-h-pied:      40px;      /* pied de panneau */
  --ssa-h-item:      50px;      /* item du rail : icone 30x30 + titre + sous-titre */
  --ssa-rail-w:      285px;

  /* Trame d'espacement : 15 px domine, 10 px secondaire, 5 px micro. */
  --ssa-pas:         15px;

  /* --- Rebranchement des variables heritees de shared.css : DEPLACE ---
     Ces 15 lignes (--navy, --gold, --primary, --text...) vivaient ici ET dans
     shared.css, deux fois chacune. Elles sont desormais declarees en UN SEUL
     point, `commun/tokens.css`, bloc « PONT VERS LES VARIABLES PREMIUM
     HERITEES », en alias des jetons --ork-*. Ne pas les remettre ici : c'est
     la duplication qui rendait `--navy` impossible a suivre. */
}

/* ── 2. SOCLE : typo, fond, geometrie globale ─────────────────────────────
   SSA melange une sans humaniste (titres/UI) et Arial 12 px (corps). On
   garde une pile systeme : meme silhouette, aucune police a redistribuer. */
html, body {
  background: var(--ssa-fond-app) !important;
  color: var(--ssa-texte);
  font-family: "Segoe UI", Selawik, system-ui, Arial, sans-serif;
  /* La taille du corps vient du JETON, plus d'un nombre ecrit ici.
     POURQUOI ce changement : `--ork-taille-base` annoncait 13 px pendant que
     cette ligne imposait 12 px en dur. Le jeton etait donc MORT -- on pouvait
     le modifier sans que l'ecran bouge d'un pixel. Un jeton qui ment est pire
     qu'un jeton absent. La valeur de repli (12px) protege les rares pages qui
     ne chargeraient pas encore commun/tokens.css. */
  font-size: var(--ork-taille-base, 12px);   /* corps SSA : cle de la densite */
  letter-spacing: 0;            /* shared.css serrait le texte : SSA ne le fait pas */
}

/* Suppression GLOBALE des arrondis et des ombres.
   POURQUOI en un seul bloc : shared.css pose des rayons/ombres sur des
   dizaines de selecteurs ; les neutraliser ici evite de tous les lister. */
.card, .btn, .form-control, .form-select, .input-group, .badge, .alert,
.table-responsive, .dropdown-menu, .modal-content, .nav-link, .list-group-item,
.progress, .page-link, .navbar-search, .tt-search, .sidebar-link,
.dashboard-kpi-panel, .pipe-step, .table thead th, .table-responsive > .table thead th {
  border-radius: var(--ssa-rayon) !important;
  box-shadow: none !important;
}

a { color: var(--ssa-bleu); text-decoration: none; }
a:hover { color: var(--ssa-bleu); text-decoration: underline; }

/* Focus SSA : bordure bleue franche, PAS de halo diffus. */
.form-control:focus, .form-select:focus, .btn:focus {
  border-color: var(--ssa-bleu) !important;
  box-shadow: none !important;
  outline: 0;
}

/* ── 3. BANDEAU SUPERIEUR ─────────────────────────────────────────────────
   Chez SSA le bandeau est CLAIR (#f3f3f3), pas sombre : identite a gauche,
   titre + version en gris, actions discretes a droite. */
.navbar.bg-navy {
  min-height: var(--ssa-h-bandeau);
  height: var(--ssa-h-bandeau);
  background: var(--ssa-gris-clair) !important;
  border-bottom: 1px solid var(--ssa-gris-moyen);
  box-shadow: none !important;
}
body { padding-top: var(--ssa-h-bandeau); }

/* L'identite : bloc texte sobre. Le mot-cle « Orke » reprend l'accent bleu. */
.navbar-brand {
  color: var(--ssa-texte) !important;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
}
.navbar-brand .text-gold { color: var(--ssa-bleu) !important; }
/* Le nom de l'etablissement joue le role du « titre + version » gris de SSA */
.navbar-brand small,
.navbar-brand .text-white-50 { color: var(--ssa-label) !important; font-size: 14px; }

/* Recherche : champ blanc borde gris, carre, sans ombre (cf. inputs SSA). */
.navbar-search {
  border: 1px solid var(--ssa-gris-pied);
  background: var(--ssa-blanc);
  max-width: 420px;
}
.navbar-search .input-group-text,
.navbar-search .form-control {
  background: var(--ssa-blanc) !important;
  color: var(--ssa-texte);
  font-size: 13px;
}
.navbar-search .form-control::placeholder { color: var(--ssa-faible); }

/* Actions de droite : icones grises 19 px sur fond transparent, pas de pilule. */
.btn-navlt, .navbar .btn-navlt {
  background: transparent !important;
  color: var(--ssa-label) !important;
  border: 0;
  font-size: 17px;
}
.btn-navlt:hover, .btn-navlt:focus {
  background: var(--ssa-gris-moyen) !important;
  color: var(--ssa-texte) !important;
}
/* Le bloc utilisateur etait blanc sur fond sombre : il passe en gris fonce. */
.navbar .dropdown > a { color: var(--ssa-texte) !important; }
.navbar .dropdown .text-white-50 { color: var(--ssa-faible) !important; }
.navbar-avatar { border: 1px solid var(--ssa-bordure); border-radius: 0; }
.navbar-badge { font-size: 10px; border-radius: 5px !important; }
.navbar .badge.bg-danger  { background: var(--ssa-erreur) !important; color: #fff !important; }
.navbar .badge.bg-warning { background: var(--ssa-warn) !important;   color: var(--ssa-valeur) !important; }

/* ── 4. RAIL DE NAVIGATION — LA SIGNATURE SSA ─────────────────────────────
   Rail BLANC de 285 px, borde a droite. Trois briques :
   a) les en-tetes de section sur bande grise,
   b) les items de 50 px (icone + titre + sous-titre),
   c) la mecanique du LISERE GAUCHE 4 px. */
.sidebar {
  width: var(--ssa-rail-w);
  top: var(--ssa-h-bandeau);
  height: calc(100vh - var(--ssa-h-bandeau));
  min-height: calc(100vh - var(--ssa-h-bandeau));
  background: var(--ssa-blanc);
  border-right: 1px solid var(--ssa-bordure);
}
.sidebar-inner { padding: 0; }

/* a) En-tete de section : bande grise, texte gras fonce. */
.sidebar-cat {
  background: var(--ssa-gris-clair);
  color: var(--ssa-texte);
  font-size: 12px;
  font-weight: 700;
  text-transform: none;         /* SSA ecrit en casse normale, pas en capitales */
  letter-spacing: 0;
  padding: 6px 10px;
  border-top: 1px solid var(--ssa-bordure);
  border-bottom: 1px solid var(--ssa-bordure);
}

/* b) Item de 50 px. `position:relative` + `::before` servent au lisere ;
      `::after` affiche le sous-titre (voir bloc 4bis). */
.sidebar-link {
  position: relative;
  display: block;               /* on quitte le flex : le sous-titre passe DESSOUS */
  min-height: var(--ssa-h-item);
  margin: 0;
  padding: 8px 10px 8px 44px;   /* 44 px = 4 lisere + 30 icone + 10 gouttiere */
  color: var(--ssa-texte);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
  border: 0;
  border-bottom: 1px solid #f0f0f0;  /* filet tres fin entre items */
  transition: none;             /* SSA ne fait aucune transition : rendu « natif » */
}
/* L'icone : 30x30 centree, calee a gauche, en bleu-gris (icones « device »). */
.sidebar-icon {
  position: absolute;
  left: 8px; top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 17px;
  color: #5f7d8c;               /* bleu-gris : rappelle les icones 3D de SSA */
  opacity: 1;
}
/* c) LISERE GAUCHE 4 px — la mecanique reprise partout dans SSA. */
.sidebar-link::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: transparent;
}
.sidebar-link:hover {
  background: var(--ssa-gris-moyen);
  color: var(--ssa-texte);
  padding-left: 44px;           /* shared.css decalait au survol : on fige */
}
.sidebar-link:hover::before { background: var(--ssa-texte); }

.sidebar-link.active {
  background: var(--ssa-bleu-pale);
  color: var(--ssa-texte);
  font-weight: 400;             /* SSA ne met PAS l'item actif en gras */
  padding-left: 44px;
  border: 0;
  border-bottom: 1px solid #f0f0f0;
}
.sidebar-link.active::before { background: var(--ssa-bleu); }
.sidebar-link.active .sidebar-icon { color: #3d6c85; }

/* ── 4bis. SOUS-TITRES DU RAIL ────────────────────────────────────────────
   POURQUOI en CSS et pas en HTML : les items du rail vivent dans _nav.html
   et sont recopies dans 54 pages. Injecter le sous-titre par `content:`
   sur l'attribut href donne le rendu SSA (titre + description 10 px #999)
   SANS toucher une seule ligne de HTML — et disparait avec le thema.
   Si Leck valide, on passera ces libelles dans le HTML proprement. */
.sidebar-link::after {
  display: block;
  font-size: 10px;
  color: var(--ssa-faible);
  line-height: 1.2;
  margin-top: 2px;
}
.sidebar-link[href="dashboard.html"]::after      { content: "Vue d'ensemble de l'etablissement"; }
.sidebar-link[href="sites.html"]::after          { content: "Etablissements et implantations"; }
.sidebar-link[href="inscriptions.html"]::after   { content: "Dossiers en cours et valides"; }
.sidebar-link[href="eleves.html"]::after         { content: "Effectifs et dossiers eleves"; }
.sidebar-link[href="classes.html"]::after        { content: "Niveaux, classes et matieres"; }
.sidebar-link[href="emploi-du-temps.html"]::after{ content: "Seances, salles et creneaux"; }
.sidebar-link[href="extrascolaire.html"]::after  { content: "Activites et clubs"; }
.sidebar-link[href="parents.html"]::after        { content: "Contacts et responsables legaux"; }
.sidebar-link[href="paiements.html"]::after      { content: "Frais, echeances et recouvrement"; }
.sidebar-link[href="achats.html"]::after         { content: "Demandes, commandes et receptions"; }
.sidebar-link[href="comptabilite.html"]::after   { content: "Journaux, comptes et ecritures"; }
.sidebar-link[href="rapports.html"]::after       { content: "Indicateurs et editions"; }
.sidebar-link[href="rh-personnel.html"]::after   { content: "Dossiers du personnel"; }
.sidebar-link[href="rh-gdt.html"]::after         { content: "Presences, absences et conges"; }
.sidebar-link[href="rh-paie.html"]::after        { content: "Bulletins et cotisations"; }
.sidebar-link[href="notifications.html"]::after  { content: "Messages et alertes"; }
.sidebar-link[href="documents.html"]::after      { content: "Fichiers et pieces jointes"; }
/* Sous-titre du nouveau bouton « Bibliotheques » (Leck, 2026-07-24) — il a
   remplace « Notifications » dans le rail, la cloche du bandeau suffisant. */
.sidebar-link[href="bibliotheque.html"]::after   { content: "Ouvrages et archives"; }
/* Rubrique « Assistance » (Leck, 2026-07-26). Sans cette ligne, l'entree du
   rail serait la SEULE sans sous-titre : le rythme vertical du menu se casse
   (toutes les autres lignes font deux etages, celle-ci un seul). */
.sidebar-link[href="guide.html"]::after          { content: "Thematiques et pas a pas"; }
.sidebar-link[href="support.html"]::after        { content: "Demandes d'assistance et suivi"; }

/* ── 5. ZONE DE CONTENU ───────────────────────────────────────────────────
   Le contenu est BLANC (pas gris) : chez SSA le fond gris ne se voit qu'en
   dehors des panneaux. La colonne est separee du rail par un filet. */
.main-content { background: var(--ssa-blanc); min-width: 0; }
.content-area { padding: var(--ssa-pas) !important; }

/* Titre de page : 18 px gras #333 + filet fin, comme les titres de section SSA. */
.page-header { margin-bottom: var(--ssa-pas); }
.page-header h4, .content-area > h4, .page-header h1, .page-header h5 {
  color: var(--ssa-texte) !important;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 4px;
}
.page-header p, .page-header .text-muted { font-size: 12px; color: var(--ssa-label) !important; }
h1, h2, h3, h4, h5, h6 { color: var(--ssa-texte); letter-spacing: 0; }
h5, h6 { font-size: 14px; font-weight: 700; }

/* ── 6. PANNEAUX ──────────────────────────────────────────────────────────
   En-tete gris 40 px arrondi EN HAUT, corps blanc borde, pied gris 40 px
   arrondi EN BAS. Aucune ombre : c'est la bordure qui detache le panneau. */
.card {
  background: var(--ssa-blanc);
  border: 1px solid var(--ssa-bordure) !important;
  border-radius: var(--ssa-rayon-panneau) !important;
  box-shadow: none !important;
  margin-bottom: var(--ssa-pas);
}
.card:hover { border-color: var(--ssa-bordure) !important; }

.card-header, .card-header-navy {
  min-height: var(--ssa-h-entete);
  display: flex; align-items: center;
  background: var(--ssa-gris-clair) !important;
  color: var(--ssa-texte) !important;
  border-bottom: 1px solid var(--ssa-bordure) !important;
  /* arrondi seulement en haut : la signature « panneau » de SSA */
  border-radius: var(--ssa-rayon-panneau) var(--ssa-rayon-panneau) 0 0 !important;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 700;
}
.card-header h5, .card-header h6, .card-header-navy h5, .card-header-navy h6 {
  margin: 0; font-size: 14px; font-weight: 700; color: var(--ssa-texte) !important;
}
.card-body { padding: var(--ssa-pas); }
.card-footer {
  min-height: var(--ssa-h-pied);
  background: var(--ssa-gris-pied) !important;
  border-top: 1px solid var(--ssa-bordure);
  border-radius: 0 0 var(--ssa-rayon-panneau) var(--ssa-rayon-panneau) !important;
  padding: 8px 10px;
  font-size: 12px;
}

/* ── 7. BOUTONS « PIANO » — l'autre signature SSA ─────────────────────────
   Forme : 2 coins OPPOSES arrondis a 5 px (haut-droit + bas-gauche), les
   deux autres carres. Au survol : bleu plein, texte blanc. */
.btn {
  font-size: 14px;
  font-weight: 700;
  padding: 4px 10px;
  border-width: 2px;
  border-style: solid;
  border-radius: 0 var(--ssa-rayon-panneau) 0 var(--ssa-rayon-panneau) !important;
  transition: none;
}
/* Action SECONDAIRE : fond bleu pale, texte bleu fonce (le cas le + frequent). */
.btn-outline-primary, .btn-outline-secondary, .btn-light, .btn-secondary,
.btn-outline-navy, .btn-navy {
  background: var(--ssa-bleu-pale) !important;
  border-color: var(--ssa-bleu-pale) !important;
  color: var(--ssa-bleu-texte) !important;
}
/* Action PRINCIPALE : bleu plein, texte blanc.
   LE FOND N'EST PAS L'ACCENT, et c'est voulu (26/07/2026) : sur du blanc,
   l'accent #0096d6 ne donne que 3,32 de contraste -- sous le seuil AA de 4,5.
   `--ssa-bleu-fond-actif` (#0079ad) monte a 4,84. L'accent lui-meme reste
   intact pour les liens, les filets et les liseres de selection, ou la
   question du texte blanc ne se pose pas. */
.btn-primary, .btn-gold, .btn-success {
  background: var(--ssa-bleu-fond-actif) !important;
  border-color: var(--ssa-bleu-fond-actif) !important;
  color: #fff !important;
}
/* Action NEUTRE : blanc borde gris. */
.btn-outline-light, .btn-outline-dark, .btn-white {
  background: var(--ssa-blanc) !important;
  border-color: #e8e8e8 !important;
  color: var(--ssa-bleu-texte) !important;
}
/* Meme raison que ci-dessus : #dc442f sous du blanc = 4,28, sous le seuil.
   `--ssa-erreur-fond-actif` (#c93a26) = 5,10. La pastille d'etat rouge, elle,
   garde --ssa-erreur : ce n'est pas du texte blanc sur fond rouge. */
.btn-danger, .btn-outline-danger {
  background: var(--ssa-erreur-fond-actif) !important;
  border-color: var(--ssa-erreur-fond-actif) !important;
  color: #fff !important;
}
/* Survol UNIFORME : tout bascule en bleu plein + texte blanc -- donc au fond
   accessible, pas a l'accent. */
.btn:hover, .btn:focus {
  background: var(--ssa-bleu-fond-actif) !important;
  border-color: var(--ssa-bleu-fond-actif) !important;
  color: #fff !important;
}
.btn-danger:hover { background: #b8341f !important; border-color: #b8341f !important; }
.btn-sm { font-size: 12px; padding: 3px 8px; }

/* Boutons-icones de tableau : discrets, gris, bleus au survol. Ils ne
   prennent PAS la forme piano (ce sont des glyphes, pas des boutons). */
.btn-icon {
  border: 0 !important; background: none !important;
  border-radius: 0 !important;
  color: var(--ssa-label) !important;
  font-size: 13px; padding: 0 4px;
}
.btn-icon:hover { color: var(--ssa-bleu) !important; background: none !important; }
.btn-icon.del:hover { color: var(--ssa-erreur) !important; }

/* ── 8. TABLEAUX — densite forte, filets fins, AUCUN zebrage ──────────────
   C'est le point ou SSA se distingue le plus : ~25 px par ligne, 12 px de
   texte, un filet horizontal par ligne, pas de bordure verticale. */
.table { border-collapse: collapse; font-size: 12px; margin-bottom: 0; }
.table thead th {
  background: var(--ssa-gris-clair) !important;
  color: var(--ssa-texte) !important;
  font-weight: 400;             /* SSA laisse les th en graisse NORMALE */
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  padding: 3px 5px !important;
  border: 0;
  border-bottom: 1px solid var(--ssa-bordure) !important;
  white-space: nowrap;
}
.table tbody td, .table tbody th {
  padding: 4px 5px !important;  /* ~25 px de haut avec le line-height : densite SSA */
  border: 0;
  border-top: 1px solid var(--ssa-bordure) !important;
  color: var(--ssa-valeur);
  vertical-align: middle;
}
.table tbody tr { background: var(--ssa-blanc); }
/* On NEUTRALISE le zebrage de Bootstrap : SSA n'en a pas. */
.table.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: transparent !important;
  background-color: transparent !important;
}
/* Survol de ligne = le bleu pale de selection, coherent avec le rail. */
.table > tbody > tr:hover > * { background-color: var(--ssa-bleu-pale) !important; }
.table tbody td a:not(.btn):not(.badge) { color: var(--ssa-bleu); }

/* Le conteneur de tableau devient un panneau carre borde. */
.table-responsive { border-radius: 0 !important; border: 0; }

/* Barre d'outils au-dessus du tableau = le « caption » gris de SSA. */
.table-toolbar {
  background: var(--ssa-gris-moyen) !important;
  color: var(--ssa-texte) !important;
  border: 0;
  border-bottom: 1px solid var(--ssa-bordure);
  border-radius: 0 !important;
  padding: 6px 10px !important;
  min-height: 0;
}
.table-toolbar .tt-title { font-size: 14px; font-weight: 700; color: var(--ssa-texte); }
.table-toolbar .tt-title b { font-weight: 700; }
.table-toolbar .tt-search {
  width: 260px;
  border: 1px solid var(--ssa-gris-pied);
  background: var(--ssa-blanc);
  border-radius: 0 !important;
  box-shadow: none !important;
}
.table-toolbar .tt-search .form-control,
.table-toolbar .tt-search .input-group-text {
  background: var(--ssa-blanc) !important; color: var(--ssa-texte); font-size: 12px;
}
.table-toolbar .btn-light {
  background: var(--ssa-bleu-pale) !important;
  color: var(--ssa-bleu-texte) !important;
}
.table-foot {
  background: var(--ssa-gris-pied);
  border-top: 1px solid var(--ssa-bordure);
  padding: 6px 10px;
  font-size: 12px;
  color: var(--ssa-label);
}

/* Pagination DataTables : carree, accent bleu. */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 0 !important; font-size: 12px; color: var(--ssa-bleu-texte) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--ssa-bleu) !important;
  border-color: var(--ssa-bleu) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_filter input {
  border-radius: 0; border: 1px solid var(--ssa-gris-pied); font-size: 12px;
}
.table .form-check-input { border-radius: 0; border-color: var(--ssa-gris-pied); }
.table .form-check-input:checked { background-color: var(--ssa-bleu); border-color: var(--ssa-bleu); }

/* ── 9. FICHES CLE / VALEUR ───────────────────────────────────────────────
   Label gris a gauche (~35 %), valeur foncee, filets pointilles, densite
   forte. Applique aux <dl> et aux tables de detail existantes. */
dl.row dt, .detail-label, .table-detail td:first-child {
  color: var(--ssa-label) !important;
  font-weight: 400 !important;
  font-size: 12px;
  width: 35%;
  padding: 5px 5px 5px 0 !important;
  border-bottom: 1px dotted var(--ssa-pointille);
}
dl.row dd, .detail-value, .table-detail td:last-child {
  color: var(--ssa-valeur) !important;
  font-size: 12px;
  padding: 5px 0 !important;
  border-bottom: 1px dotted var(--ssa-pointille);
}

/* ── 10. FORMULAIRES ──────────────────────────────────────────────────────
   Champs blancs bordes #d9d9d9, carres, 13 px. Focus = bordure bleue. */
.form-control, .form-select {
  background: var(--ssa-blanc);
  border: 1px solid var(--ssa-gris-pied);
  border-radius: 0 !important;
  padding: 5px 10px;
  font-size: 13px;
  color: var(--ssa-texte);
  box-shadow: none !important;
}
.form-control::placeholder { color: var(--ssa-faible); }
.form-label, label { font-size: 12px; color: var(--ssa-label); font-weight: 400; margin-bottom: 3px; }
.form-check-input { border-radius: 0; border-color: var(--ssa-gris-pied); }
.form-check-input:checked { background-color: var(--ssa-bleu); border-color: var(--ssa-bleu); }
.form-check-input[type="radio"] { border-radius: 50%; }  /* les radios restent rondes */
.input-group-text {
  background: var(--ssa-gris-clair); border: 1px solid var(--ssa-gris-pied);
  border-radius: 0 !important; font-size: 12px; color: var(--ssa-label);
}

/* ── 11. BADGES ET ETATS ──────────────────────────────────────────────────
   Radius 5 px (seule exception a la regle « tout carre »), texte blanc. */
.badge {
  border-radius: var(--ssa-rayon-panneau) !important;
  font-size: 11px; font-weight: 700; padding: 2px 6px;
}
.badge.bg-primary   { background: var(--ssa-bleu) !important;   color: #fff !important; }
.badge.bg-success   { background: var(--ssa-ok) !important;     color: #fff !important; }
.badge.bg-warning   { background: var(--ssa-warn) !important;   color: var(--ssa-valeur) !important; }
.badge.bg-danger    { background: var(--ssa-erreur) !important; color: #fff !important; }
.badge.bg-info      { background: var(--ssa-bleu) !important;   color: #fff !important; }
.badge.bg-secondary { background: var(--ssa-label) !important;  color: #ddd !important; }
.badge.bg-light     { background: var(--ssa-gris-moyen) !important; color: var(--ssa-texte) !important; }
.text-success { color: var(--ssa-ok) !important; }
.text-warning { color: var(--ssa-warn) !important; }
.text-danger  { color: var(--ssa-erreur) !important; }
.text-primary, .text-gold, .text-navy { color: var(--ssa-bleu) !important; }
.text-muted { color: var(--ssa-label) !important; }

/* ── 12. NOTES INLINE — le bandeau jaune paille ───────────────────────────
   Chez SSA toutes les notes (info/avertissement/erreur) partagent le meme
   fond jaune ; seule l'icone change de couleur. Radius 0. */
.alert {
  background: var(--ssa-note) !important;
  color: var(--ssa-valeur) !important;
  border: 1px solid var(--ssa-gris-pied) !important;
  border-radius: 0 !important;
  padding: 10px;
  font-size: 12px;
}
.alert-danger  { color: var(--ssa-erreur) !important; }
/* Alerte MAJEURE : le seul bandeau plein — orange vif, texte blanc, radius 5. */
.alert-orange, .alert-critical {
  background: var(--ssa-alerte) !important;
  color: #fff !important;
  font-weight: 700;
  border: 0 !important;
  border-radius: var(--ssa-rayon-panneau) !important;
}

/* ── 13. DIVERS COMPOSANTS EXISTANTS ──────────────────────────────────────
   Rattachement des composants « maison » d'Orkestror au vocabulaire SSA. */

/* Tuiles KPI du dashboard : panneaux carres bordes, chiffre bleu, pas d'ombre. */
.dashboard-kpi-panel, .kpi-card {
  background: var(--ssa-blanc) !important;
  border: 1px solid var(--ssa-bordure) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.dashboard-kpi-panel .kpi-value, .dashboard-kpi-row b {
  color: var(--ssa-texte) !important; border-radius: 0 !important;
}

/* Pipeline de validation : segments carres, l'etape courante prend l'accent. */
.pipe-step {
  border-radius: 0 !important;
  background: var(--ssa-gris-clair);
  color: var(--ssa-label);
  font-size: 11px;
  border: 1px solid var(--ssa-bordure);
}
.pipe-step.done    { background: var(--ssa-ok) !important;   color: #fff !important; }
.pipe-step.current { background: var(--ssa-bleu) !important; color: #fff !important; font-weight: 700; }
.pipe-step.todo    { background: var(--ssa-gris-clair) !important; color: var(--ssa-faible) !important; }

/* Menus deroulants : carres, avec le lisere BAS 4 px bleu propre a SSA. */
.dropdown-menu {
  border: 1px solid var(--ssa-bordure);
  border-bottom: 4px solid var(--ssa-bleu);
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 12px;
  padding: 0;
}
/* Les entrees de menu reprennent la mecanique du lisere GAUCHE. */
.dropdown-item {
  padding: 6px 10px 6px 12px;
  border-left: 4px solid transparent;
  font-size: 12px;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--ssa-bleu-pale);
  border-left-color: var(--ssa-bleu);
  color: var(--ssa-texte);
}

/* Modales : quasi plein ecran, en-tete 60 px gris, pied avec boutons piano. */
.modal-dialog { max-width: 900px; }
.modal-content { border: 1px solid var(--ssa-bordure); border-radius: 0 !important; box-shadow: none !important; }
.modal-header {
  /* CANON (Leck, 2026-07-25) : l'en-tete d'un popup a la MEME hauteur que
     l'en-tete d'un bloc (--ssa-h-entete, 40px), pas la hauteur du bandeau (60px)
     qui le rendait trop grand. */
  min-height: var(--ssa-h-entete);
  background: var(--ssa-gris-clair);
  border-bottom: 1px solid var(--ssa-gris-pied);
  border-radius: 0 !important;
  padding: 0 var(--ssa-pas);
}
.modal-title { font-size: 18px; font-weight: 700; color: var(--ssa-texte); }
.modal-body { padding: var(--ssa-pas); font-size: 12px; }
.modal-footer {
  /* CANON : pied de popup a la hauteur d'un pied de bloc (--ssa-h-pied, 40px). */
  min-height: var(--ssa-h-pied);
  background: var(--ssa-blanc);
  border-top: 1px solid var(--ssa-gris-pied);
  padding: 8px var(--ssa-pas);
}

/* Barres de progression : carrees, remplissage bleu sur piste gris clair. */
.progress { background: var(--ssa-gris-clair); border: 1px solid var(--ssa-bordure); border-radius: 0 !important; height: 12px; }
.progress-bar { background: var(--ssa-bleu); }

/* ── 14. PAGE DE CONNEXION ────────────────────────────────────────────────
   Fond gris uni (pas de degrade), carte blanche carree bordee, centree.
   Un seul accent bleu sur le bouton principal. */
body.login-page {
  padding-top: 0;
  background: var(--ssa-fond-app) !important;
}
body.login-page::before { display: none !important; }  /* neutralise un eventuel voile decoratif */
.login-page .card, .login-card, .login-box {
  background: var(--ssa-blanc);
  border: 1px solid var(--ssa-bordure) !important;
  border-radius: var(--ssa-rayon-panneau) !important;
  box-shadow: none !important;
}
.login-page h1, .login-page h2, .login-page h3, .login-page h4 {
  color: var(--ssa-texte); font-size: 18px; font-weight: 700;
}
.login-page .btn-primary, .login-page button[type="submit"] {
  width: 100%;
  background: var(--ssa-bleu) !important;
  border-color: var(--ssa-bleu) !important;
  color: #fff !important;
}

/* ── 15. RESPONSIVE ───────────────────────────────────────────────────────
   Sous 1200 px le rail de 285 px etoufferait le contenu : on le retrecit
   et on masque les sous-titres (le titre seul reste lisible). */
@media (max-width: 1199.98px) {
  :root { --ssa-rail-w: 230px; }
  .sidebar-link::after { display: none; }
  .sidebar-link { min-height: 38px; padding-top: 10px; padding-bottom: 10px; }
}

/* ── 16. COMPOSANTS « ork-* » PROPRES A ORKESTROR ─────────────────────────
   POURQUOI cette section separee : shared.css empile 6 passes de refonte
   successives ; ses dernieres regles (`.ork-table-card .table-toolbar
   .ork-grid-toolbar`, etc.) ont une specificite elevee + `!important`.
   Il faut donc les viser AVEC AU MOINS la meme specificite, sinon le theme
   est ignore. On les remappe une par une sur le vocabulaire SSA. */

/* Le panneau de tableau devient un panneau SSA : borde, carre, sans ombre. */
.ork-table-card, .ork-static-table-card {
  border: 1px solid var(--ssa-bordure) !important;
  border-radius: var(--ssa-rayon-panneau) !important;
  box-shadow: none !important;
}

/* La barre bleu ardoise devient le « caption » gris de SSA : fond #e6e6e6,
   titre gras fonce. C'est le changement le plus visible de cette passe. */
.ork-table-card .table-toolbar,
.ork-table-card .table-toolbar.ork-grid-toolbar {
  min-height: 38px !important;
  padding: 5px 10px !important;
  color: var(--ssa-texte) !important;
  background: var(--ssa-gris-moyen) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ssa-bordure) !important;
  border-radius: var(--ssa-rayon-panneau) var(--ssa-rayon-panneau) 0 0 !important;
}
.ork-table-card .table-toolbar .tt-title,
.ork-table-card .ork-grid-toolbar .tt-title {
  color: var(--ssa-texte) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
.ork-table-card .ork-grid-toolbar .tt-search,
.ork-table-card .table-toolbar .tt-search {
  height: 26px !important; min-height: 26px !important;
  width: 240px !important;
  border: 1px solid var(--ssa-gris-pied) !important;
  border-radius: 0 !important;
  background: var(--ssa-blanc) !important;
  box-shadow: none !important;
}
.ork-table-card .ork-grid-toolbar .tt-search .form-control,
.ork-table-card .ork-grid-toolbar .tt-search .input-group-text {
  background: var(--ssa-blanc) !important;
  color: var(--ssa-texte) !important;
  font-size: 12px !important;
}
/* Boutons de la barre : forme piano, bleu pale sur le caption gris. */
.ork-table-card .ork-grid-toolbar .tt-actions .btn,
.ork-table-card .ork-grid-toolbar .ork-add,
.ork-table-card .ork-grid-toolbar .ork-open-filters,
.ork-table-card .ork-grid-toolbar .ork-columns,
.ork-table-card .ork-grid-toolbar .ork-tool,
.ork-table-card .ork-grid-toolbar .ork-delete {
  /* HAUTEUR : le jeton, plus jamais un nombre.
     Cette regle ecrivait « 26px » en dur. Comme elle porte TROIS classes, elle
     battait toute correction ecrite plus tard avec un selecteur plus court —
     y compris les notres : le theme se combattait lui-meme, et « Colonnes »,
     « Filtre avance » et « Ajouter » restaient a 26 px quand tous les autres
     boutons etaient passes a 28. Mesure du 2026-07-24 sur le serveur.
     En lisant --ssa-h-btn, cette regle suit desormais le canon au lieu de le
     contredire, et il n'y a plus qu'UN endroit qui decide de la hauteur. */
  height: var(--ssa-h-btn) !important; min-height: var(--ssa-h-btn) !important;
  padding: 0 12px !important;
  font-size: 12px !important; font-weight: 700 !important;
  background: var(--ssa-bleu-pale) !important;
  /* La bordure de 2 px disparait : la couleur de fond suffit a delimiter le
     bouton (regle 5), et une bordure de la meme teinte que le fond ne servait
     qu'a fausser les calculs de hauteur. */
  border: 0 !important;
  color: var(--ssa-bleu-texte) !important;
  border-radius: 0 var(--ssa-rayon-panneau) 0 var(--ssa-rayon-panneau) !important;
}

/* « + AJOUTER » = L'ACTION PRINCIPALE DU TABLEAU -> BLEU PLEIN (Leck, 2026-07-24).
   Ecrite juste apres, avec la MEME specificite (0,3,0) : a egalite, la derniere
   lue gagne. Inutile de surencherir — surencherir est precisement ce qui a rendu
   cette feuille impossible a corriger.
   POURQUOI cette distinction : sur un ecran de liste, « Ajouter » est l'action
   que l'utilisateur vient chercher ; « Colonnes » et « Filtre avance » ne font
   que regler l'affichage. C'est le cas prevu par la regle 5 du canon
   (« Actions principales : bleu plein »). */
.ork-table-card .ork-grid-toolbar .ork-add {
  background: var(--ssa-bleu) !important;
  color: var(--ssa-blanc) !important;
}
/* Le survol d'une action deja bleu plein ne peut pas etre « plus bleu » : on
   l'assombrit, pour qu'un retour visuel existe quand meme. */
.ork-table-card .ork-grid-toolbar .ork-add:hover {
  background: var(--ssa-bleu-texte) !important;
  color: var(--ssa-blanc) !important;
}
.ork-table-card .ork-grid-toolbar .tt-actions .btn:hover,
.ork-table-card .ork-grid-toolbar .ork-add:hover,
.ork-table-card .ork-grid-toolbar .ork-open-filters:hover,
.ork-table-card .ork-grid-toolbar .ork-columns:hover,
.ork-table-card .ork-grid-toolbar .ork-tool:hover {
  background: var(--ssa-bleu) !important;
  border-color: var(--ssa-bleu) !important;
  color: #fff !important;
}

/* Tableaux statiques : on SUPPRIME le zebrage (SSA n'en a pas) et on serre. */
.ork-static-table tbody tr:nth-child(odd) > *,
.ork-static-table tbody tr:nth-child(even) > * { background: var(--ssa-blanc) !important; }
.ork-static-table thead th {
  background: var(--ssa-gris-clair) !important;
  color: var(--ssa-texte) !important;
  font-weight: 400 !important; font-size: 12px !important;
  padding: 3px 5px !important;
  border-bottom: 1px solid var(--ssa-bordure) !important;
}
.ork-static-table tbody td, .ork-static-table tbody th {
  padding: 4px 5px !important; font-size: 12px !important;
  border-top: 1px solid var(--ssa-bordure) !important;
}

/* DENSITE DES LIGNES : c'est l'ecart le plus net avec SSA (38 px vers ~26 px).
   Les avatars ronds de 32 px imposaient la hauteur : on les reduit a 20 px
   carres, dans l'esprit « petite icone de device » de SSA. */
.avatar-placeholder {
  width: 20px !important; height: 20px !important;
  min-width: 20px !important;
  font-size: 9px !important; line-height: 20px !important;
  border-radius: 0 !important;
  background: var(--ssa-gris-moyen) !important;
  color: var(--ssa-label) !important;
}
/* Actions de ligne : glyphes gris compacts, bleus au survol. */
.ork-row-action {
  border: 0 !important; background: none !important;
  border-radius: 0 !important;
  color: var(--ssa-label) !important;
  font-size: 12px !important; padding: 0 3px !important;
  width: auto !important; height: auto !important;
}
.ork-row-action:hover { color: var(--ssa-bleu) !important; background: none !important; }
.ork-row-action.del:hover { color: var(--ssa-erreur) !important; }
/* Les pastilles « pilule » redeviennent des badges carres a 5 px. */
.table .badge, .badge.rounded-pill {
  border-radius: var(--ssa-rayon-panneau) !important;
  font-size: 10px !important; padding: 1px 5px !important; font-weight: 700;
}

/* Tuiles KPI : panneau blanc carre borde, sans degrade ni lisere decoratif.
   Le seul lisere autorise dans SSA est celui de la NAVIGATION. */
.ork-kpi-card {
  min-height: 0 !important;
  padding: 10px !important;
  background: var(--ssa-blanc) !important;
  border: 1px solid var(--ssa-bordure) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.ork-kpi-card::before { display: none !important; }
.ork-kpi-card .stat-icon {
  width: 30px !important; height: 30px !important;
  border-radius: 0 !important;
  background: var(--ssa-gris-clair) !important;
  color: #5f7d8c !important;
  font-size: 15px !important;
}
.ork-kpi-card .stat-number { font-size: 22px !important; color: var(--ssa-texte) !important; font-weight: 700; }
.ork-kpi-viz { display: none !important; }  /* barre decorative : hors vocabulaire SSA */

/* Onglets : soulignes bleus, carres, denses (pas de pilules). */
.nav-tabs { border-bottom: 1px solid var(--ssa-bordure); gap: 0; }
.nav-tabs .nav-link {
  color: var(--ssa-label);
  border: 0; border-bottom: 3px solid transparent;
  border-radius: 0 !important;
  padding: 6px 12px;
  font-size: 12px;
}
.nav-tabs .nav-link:hover { color: var(--ssa-texte); background: var(--ssa-gris-moyen); border-bottom-color: var(--ssa-texte); }
.nav-tabs .nav-link.active {
  color: var(--ssa-texte); font-weight: 700;
  background: var(--ssa-bleu-pale);
  border-bottom: 3px solid var(--ssa-bleu);
}

/* Bloc de filtres contextuels : panneau SSA (en-tete gris, corps blanc). */
.ork-context-filter {
  border: 1px solid var(--ssa-bordure) !important;
  border-radius: var(--ssa-rayon-panneau) !important;
  box-shadow: none !important;
  background: var(--ssa-blanc) !important;
}
.ork-context-filter__bar {
  background: var(--ssa-gris-clair) !important;
  color: var(--ssa-texte) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ssa-bordure) !important;
  border-radius: var(--ssa-rayon-panneau) var(--ssa-rayon-panneau) 0 0 !important;
  min-height: 38px !important;
  padding: 5px 10px !important;
}
.ork-context-filter__toggle { color: var(--ssa-texte) !important; font-size: 12px !important; font-weight: 700 !important; }
/* Les « chips » de filtre : petits blocs blancs bordes, texte bleu. */
.ork-context-filter__chip {
  background: var(--ssa-blanc) !important;
  border: 1px solid var(--ssa-gris-pied) !important;
  border-radius: 0 !important;
  color: var(--ssa-label) !important;
  font-size: 11px !important;
  padding: 1px 6px !important;
}
.ork-context-filter__chip b { color: var(--ssa-bleu-texte) !important; }
.ork-context-filter__body, .ork-context-filter__footer { background: var(--ssa-blanc) !important; }
.ork-context-filter__footer { border-top: 1px solid var(--ssa-bordure) !important; }
.ork-context-filter__reset,
.ork-context-filter__bar-actions .ork-context-filter__reset {
  background: var(--ssa-bleu-pale) !important;
  border: 2px solid var(--ssa-bleu-pale) !important;
  color: var(--ssa-bleu-texte) !important;
  border-radius: 0 var(--ssa-rayon-panneau) 0 var(--ssa-rayon-panneau) !important;
  font-size: 12px !important; padding: 2px 8px !important;
}

/* ── 17. PASSE 3 — CORRECTIONS APRES COMPARAISON AUX CAPTURES SSA ─────────
   Trois ecarts constates sur les captures de l'iteration 2 :
   a) les en-tetes de panneau restaient bleu ardoise,
   b) le titre et le bouton de la page de connexion etaient delaves,
   c) les lignes de tableau restaient 1,5x trop hautes. */

/* a) LA VARIABLE `--header-slate` (#486381) est la vraie source du bleu
      ardoise : shared.css l'utilise dans 10 regles a forte specificite
      (bandeau, en-tetes de carte, barres d'outils). La reaffecter ici les
      neutralise TOUTES d'un coup — beaucoup plus sur que de reecrire
      chaque selecteur avec une specificite superieure. */
/* `--header-slate` et `--navy` etaient RE-declares ici : c'etaient les
   3e et 4e declarations de `--navy` du depot. Elles sont parties dans
   `commun/tokens.css` (bloc du pont herite), ou elles sont uniques. */

/* Consequence : `.bg-navy` (fond) doit etre remis au gris clair explicitement,
   sinon il prendrait le #333 de `--navy`. */
.bg-navy { background: var(--ssa-gris-clair) !important; color: var(--ssa-texte) !important; }
.bg-navy .text-white, .bg-navy.text-white { color: var(--ssa-texte) !important; }

/* EN-TETE DE PANNEAU : REGLE RETIREE LE 26/07/2026, ET VOICI POURQUOI.
   Cette regle peignait `.card-header-navy` en #f3f3f3 avec une specificite de
   (0,3,1) -- `.card > .card-header.card-header-navy`. Le canon 3 le veut a
   #e6e6e6 et le pose depuis `commun/blocs.css`, mais avec la specificite
   (0,1,0) d'un simple `.card-header-navy`. A `!important` egal, c'est la
   SPECIFICITE qui tranche : cette regle gagnait, et 22 bandeaux de 8 pages
   restaient au mauvais gris -- mesure a l'ecran, pas suppose.
   Le canon reprend donc la main. `commun/blocs.css` porte desormais la
   TOTALITE de l'apparence de ces bandeaux (fond, texte, filet, hauteur,
   marges interieures, titres h5/h6), avec les memes selecteurs longs pour
   couvrir aussi ceux de shared.css. C'est le seul endroit a ouvrir. */
.card > .card-header.card-header-navy {
  border-radius: var(--ssa-rayon-panneau) var(--ssa-rayon-panneau) 0 0 !important;
}
/* Boutons poses sur un en-tete de panneau : version piano bleu pale. */
.card-header-navy .btn-outline-light,
.card-header-navy .btn {
  background: var(--ssa-bleu-pale) !important;
  border: 2px solid var(--ssa-bleu-pale) !important;
  color: var(--ssa-bleu-texte) !important;
  border-radius: 0 var(--ssa-rayon-panneau) 0 var(--ssa-rayon-panneau) !important;
  font-size: 12px !important; padding: 2px 8px !important;
}
.card-header-navy .btn:hover {
  background: var(--ssa-bleu) !important; border-color: var(--ssa-bleu) !important; color: #fff !important;
}

/* b) `.btn-navy` est la classe du bouton PRINCIPAL d'Orkestror (Connexion,
      Enregistrer...). Chez SSA l'action principale est bleu PLEIN, texte
      blanc — elle ne doit donc pas rester dans la famille « pale ». */
.btn-navy, .btn.btn-navy {
  background: var(--ssa-bleu-fond-actif) !important;
  border-color: var(--ssa-bleu-fond-actif) !important;
  color: #fff !important;
}
.btn-navy:hover, .btn.btn-navy:hover {
  background: var(--ssa-bleu-texte) !important; border-color: var(--ssa-bleu-texte) !important; color: #fff !important;
}

/* Page de connexion : carte plus etroite et plus dense (SSA ne fait jamais
   de grands vides), titre gris fonce, sous-titres gris moyen. */
.login-card { max-width: 380px; margin: 0 auto; }
.login-card .card-body { padding: 24px !important; }
.login-card h1 { color: var(--ssa-texte) !important; font-size: 22px !important; }
.login-card .text-muted, .login-card small { color: var(--ssa-label) !important; font-size: 12px; }

/* c) DENSITE FINALE DES TABLEAUX : ~26 px par ligne au lieu de 41 px.
      SSA n'a AUCUNE bordure verticale : on les supprime explicitement,
      seul le filet horizontal separe les lignes. */
.table > :not(caption) > * > * {
  padding: 3px 6px !important;
  line-height: 1.35 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
}
.table tbody td, .table tbody th { font-size: 12px !important; }
/* Les boutons d'action en fin de ligne ne doivent pas gonfler la hauteur. */
.ork-actions .btn, .ork-actions .ork-row-action {
  padding: 0 3px !important; font-size: 12px !important; line-height: 1.2 !important;
  height: auto !important; min-height: 0 !important;
}
/* Le matricule en `code` : petite police mono grise, comme les identifiants SSA. */
.table code { color: var(--ssa-label) !important; font-size: 10px; }

/* ── 18. PASSE 4 — DENSITE REELLE DE LA GRILLE ────────────────────────────
   Dernier ecart notable avec SSA : les lignes faisaient encore 41 px contre
   ~26 px chez SSA. La cause est `.ork-table-card .ork-premium-table tbody td`
   dans shared.css, qui impose `height: 40px` avec une specificite (0,3,1)
   superieure a nos regles generiques `.table ...`. On la vise donc a
   l'identique — c'est le seul moyen de gagner sans toucher shared.css. */
.ork-table-card .ork-premium-table thead th {
  height: 26px !important;
  padding: 3px 6px !important;
  background: var(--ssa-gris-clair) !important;
  color: var(--ssa-texte) !important;
  font-size: 11px !important;
  font-weight: 400 !important;   /* SSA laisse les en-tetes en graisse normale */
  border-bottom: 1px solid var(--ssa-bordure) !important;
}
.ork-table-card .ork-premium-table tbody td,
.ork-table-card .ork-premium-table tbody th {
  height: 26px !important;
  padding: 2px 6px !important;
  color: var(--ssa-valeur) !important;   /* valeurs en noir, comme SSA */
  font-size: 12px !important;
  line-height: 1.3 !important;
  border-bottom: 1px solid var(--ssa-bordure) !important;
}
/* Survol de ligne : le bleu pale de selection, coherent avec le rail. */
.ork-table-card .ork-premium-table tbody tr:hover > * {
  background: var(--ssa-bleu-pale) !important;
}
/* Le nom de l'eleve reste le point d'entree : bleu, comme les liens SSA. */
.ork-table-card .ork-premium-table tbody td a { color: var(--ssa-bleu) !important; }

/* ── 35. PIED DE PAGE FIGE EN BAS (Leck, 2026-07-25) ──────────────────────────
   PROBLEME : le pied de page (<footer> "Powered by Orkestror...") flottait selon
   la hauteur du contenu du tableau, et grandissait quand son texte (desormais
   plus long) passait sur deux lignes. Leck veut un BLOC de hauteur FIXE, colle
   en bas de la fenetre, avec son trait de separation, qui NE BOUGE PAS quel que
   soit le contenu de la page.
   COMMENT : on fait de `.main-content` une colonne aussi haute que la fenetre
   (sous le bandeau, meme calcul que le rail) ; la zone de contenu prend toute la
   place restante et DEFILE a l'interieur ; le pied garde une hauteur fixe, il
   reste donc toujours colle en bas. */
/* Le .wrapper (rail + contenu) occupe EXACTEMENT la fenetre sous le bandeau.
   Il porte deja un `padding-top: 8px` (shared.css) : en fixant SA hauteur ici,
   `.main-content` (enfant flex, etire par defaut) prend tout seul la hauteur
   restante -- pas besoin de soustraire ce 8px a la main (aucun nombre magique). */
.wrapper {
  height: calc(100vh - var(--ssa-h-bandeau)) !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;         /* sinon un vide subsiste SOUS le pied */
}
.main-content {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;             /* s'etire a la hauteur du wrapper */
  overflow: hidden !important;          /* le defilement se fait dans .content-area */
}
.content-area {
  flex: 1 1 auto !important;
  overflow-y: auto !important;          /* le contenu (cartes, tableaux) defile ICI */
  min-height: 0 !important;             /* sans ca, un enfant flex ignore overflow */
}
/* Le pied de PAGE = l'element <footer class="... border-top">. On ne vise PAS
   `.card-footer` ni `.modal-footer` (ce sont des <div>, pas des <footer>). */
footer.border-top {
  flex: 0 0 38px !important;            /* hauteur fixe : ne grandit ni ne se comprime */
  height: 38px !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  white-space: nowrap !important;       /* le texte reste sur UNE ligne -> hauteur stable */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 35.1 — RESPIRATION RESTAUREE EN BAS DU CONTENU (Leck, regression 2026-07-25).
   `.wrapper { padding-bottom: 0 }` (juste au-dessus) colle le pied de PAGE au bas
   de l'ecran — voulu, et CONSERVE (bas a 899/900). Mais il avait aussi supprime
   la respiration en bas du CONTENU : la derniere carte venait buter contre le
   pied, et le cadre paraissait tronque en bas alors qu'il respire en haut et sur
   les cotes. On restitue cette respiration DANS la zone qui defile, au-dessus du
   pied de page : un espaceur en fin de contenu (`.content-area::after`) plus une
   gouttiere sous chaque carte. Le pied de page vit HORS de `.content-area` : il
   ne bouge pas, il reste colle en bas. */
.content-area::after {
  content: "";
  display: block;
  /* MEME RESPIRATION QU'EN HAUT (Leck, 2026-07-25) : la zone respire de 15 px
     (`--ssa-pas`) en haut et sur les cotes ; le bas etait reste a 8 px, donc
     invisible — « je ne retrouve plus l'espacement du bas ». On l'aligne sur
     le haut. C'est un VRAI element (pas un padding-bottom, que le navigateur
     ignore en fin de zone qui defile) : l'espace est donc toujours rendu. */
  height: var(--ssa-pas);
  flex: 0 0 auto;
}
/* Gouttiere grise entre deux cartes empilees (restaure l'« espacement entre les
   blocs ») : la derniere n'en porte pas, l'espaceur ci-dessus s'en charge. */
.content-area > .card + .card,
.content-area > .row + .row { margin-top: var(--ssa-gouttiere, 8px); }

/* L'avatar rond de 20 px gonflait encore la ligne : on descend a 18 px carres. */
.ork-table-card .avatar-placeholder {
  width: 18px !important; height: 18px !important; min-width: 18px !important;
  line-height: 18px !important; font-size: 8px !important;
}
/* Cases a cocher compactes et carrees. */
.ork-table-card .form-check-input { width: 13px !important; height: 13px !important; margin: 0 !important; }

/* ── 19. PASSE 5 — SUPPRESSION DES FILETS VERTICAUX ───────────────────────
   Chez SSA une grille ne comporte QUE des filets horizontaux : les colonnes
   sont separees par l'espacement, jamais par un trait. Bootstrap et
   shared.css en ajoutent sur les cellules et les en-tetes triables. */
.ork-table-card .ork-premium-table th,
.ork-table-card .ork-premium-table td,
.table th, .table td {
  border-left: 0 !important;
  border-right: 0 !important;
}
/* DataTables pose une bordure sur les en-tetes triables : on la retire. */
.ork-table-card .ork-premium-table thead th,
table.dataTable thead th, table.dataTable thead td {
  border-right: 0 !important;
  border-left: 0 !important;
}

/* ── 20. PASSE 6 — BANDEAU BLANC, SOBRIETE, ANGLES DROITS ─────────────────
   Trois corrections demandees apres comparaison avec image1/image5 :
   le bandeau doit etre BLANC a texte gris fonce, les pastilles de couleur
   doivent disparaitre, et il ne doit plus rester d'arrondi « pilule ». */

/* ── 20.a BANDEAU BLANC ───────────────────────────────────────────────────
   Le fond etait deja clair, mais le TEXTE restait blanc : shared.css force
   `color:#fff` via `.navbar.bg-navy .navbar-brand` (specificite 0,3,0), qui
   battait notre regle `.navbar-brand` (0,1,0). D'ou un bandeau delave et
   illisible. On reprend donc EXACTEMENT la meme specificite. */
.navbar.bg-navy {
  background: var(--ssa-blanc) !important;   /* BLANC, comme dans SSA */
  border-bottom: 1px solid var(--ssa-bordure) !important;
  box-shadow: none !important;
}
/* Identite + tout texte du bandeau : gris fonce #333. */
.navbar.bg-navy .navbar-brand,
.navbar.bg-navy .text-white,
.navbar.bg-navy a.text-white,
.navbar.bg-navy .dropdown > a {
  color: var(--ssa-texte) !important;
}
/* Le mot-cle garde l'accent bleu : c'est le seul point de couleur. */
.navbar.bg-navy .navbar-brand .text-gold { color: var(--ssa-bleu) !important; }
/* Contexte (nom de l'etablissement, statut « En ligne ») : gris moyen. */
.navbar.bg-navy .text-white-50,
.navbar.bg-navy .navbar-brand small,
.navbar.bg-navy .dropdown > a .text-white-50 {
  color: var(--ssa-label) !important;
  font-size: 13px;
}
/* Icones d'action a droite : grises et discretes, jamais colorees. */
.navbar.bg-navy .navbar-toggler,
.navbar.bg-navy .btn-navlt {
  color: var(--ssa-label) !important;
  background: transparent !important;
}
.navbar.bg-navy .navbar-toggler:hover,
.navbar.bg-navy .btn-navlt:hover,
.navbar.bg-navy .btn-navlt:focus {
  color: var(--ssa-texte) !important;
  background: var(--ssa-gris-moyen) !important;
}
/* Champ de recherche : blanc borde gris sur bandeau blanc. */
.navbar.bg-navy .navbar-search {
  border: 1px solid var(--ssa-gris-pied) !important;
  background: var(--ssa-blanc) !important;
}
.navbar.bg-navy .navbar-avatar {
  border: 1px solid var(--ssa-bordure) !important;
  border-radius: 0 !important;
}

/* ── 20.b SOBRIETE : plus aucune pastille pleine dans les tableaux ────────
   SSA est une console SOBRE : dans une grille, une valeur est du TEXTE.
   La couleur n'exprime QUE l'etat (OK / avertissement / erreur / info) et
   se limite a une petite pastille ronde de 8 px devant le libelle.
   NB : « Fille » / « Garcon » portent un `style=` en ligne dans eleves.html ;
   seul `!important` permet de le neutraliser sans toucher au HTML. */
.ork-table-card .ork-premium-table .badge,
.table .badge, .table td .badge, .table th .badge {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--ssa-texte) !important;
  box-shadow: none !important;
}
/* Le sexe est une donnee neutre : gris, sans pastille. */
.table td .badge.bg-danger,
.table td .badge.bg-info,
.table td .badge.bg-primary { color: var(--ssa-label) !important; }

/* Les ETATS gardent un signal, mais reduit a une pastille ronde de 8 px. */
.table td .badge.bg-success::before,
.table td .badge.bg-warning::before,
.table td .badge.bg-secondary::before,
.table td .badge.bg-light::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 5px;
  border-radius: 50%;          /* la pastille d'etat est le seul rond admis */
  vertical-align: baseline;
}
.table td .badge.bg-success::before { background: var(--ssa-ok); }
.table td .badge.bg-warning::before { background: var(--ssa-warn); }
.table td .badge.bg-secondary::before,
.table td .badge.bg-light::before   { background: var(--ssa-faible); }
/* « Archive » et assimiles : libelle en gris clair, etat inactif. */
.table td .badge.bg-secondary,
.table td .badge.bg-light { color: var(--ssa-faible) !important; }

/* ── 20.c ANGLES DROITS : suppression de tout arrondi « pilule » ──────────
   Bootstrap pose `border-radius: 50rem` sur `.rounded-pill`. Chez SSA il
   n'existe que l'angle droit, les 5 px des panneaux et les 2 coins des
   boutons piano. Seule exception conservee : la pastille d'etat ci-dessus
   et les boutons radio, qui sont ronds par nature. */
.rounded-pill, .rounded-circle, .badge.rounded-pill,
.nav-pills .nav-link, .list-group-item {
  border-radius: 0 !important;
}
/* Le compteur de notifications du bandeau reste lisible : 5 px, pas 999. */
.navbar .badge.rounded-pill, .navbar-badge {
  border-radius: var(--ssa-rayon-panneau) !important;
  padding: 1px 4px !important;
  font-size: 10px !important;
}

/* ── 20.d FILETS VERTICAUX (suite) ────────────────────────────────────────
   shared.css les impose en `!important` avec la specificite (0,2,2)
   `.ork-table-card .ork-premium-table thead th` : la passe precedente
   visait (0,2,1) et perdait. On aligne la specificite. */
.ork-table-card .ork-premium-table thead th,
.ork-table-card .ork-premium-table tbody td,
.ork-table-card .ork-premium-table tbody th {
  border-right: 0 !important;
  border-left: 0 !important;
  box-shadow: none !important;
}
/* shared.css remonte aussi la hauteur a 38 px et grossit les en-tetes :
   on re-impose la densite SSA a la bonne specificite. */
.ork-table-card .ork-premium-table thead th {
  height: 26px !important;
  padding: 3px 6px !important;
  background: var(--ssa-gris-clair) !important;
  color: var(--ssa-texte) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  text-transform: none !important;   /* SSA n'ecrit pas les en-tetes en capitales */
  letter-spacing: 0 !important;
  border-bottom: 1px solid var(--ssa-bordure) !important;
}
.ork-table-card .ork-premium-table tbody td,
.ork-table-card .ork-premium-table tbody th {
  height: 26px !important;
  padding: 2px 6px !important;
  color: var(--ssa-valeur) !important;
  font-size: 12px !important;
  border-bottom: 1px solid var(--ssa-bordure) !important;
}

/* ── 20.e MEME SOBRIETE SUR LE TABLEAU DE BORD ────────────────────────────
   Les tuiles de statistiques portaient des icones pastel (rose, vert...) :
   on les ramene au gris de l'iconographie SSA. Les graphiques (canvas)
   gardent leurs couleurs : elles sont definies en JS, hors perimetre. */
.stat-card { border: 1px solid var(--ssa-bordure) !important; border-radius: 0 !important; box-shadow: none !important; }
.stat-icon {
  width: 30px !important; height: 30px !important;
  border-radius: 0 !important;
  background: var(--ssa-gris-clair) !important;
  color: #5f7d8c !important;
  font-size: 15px !important;
}
.stat-number { color: var(--ssa-texte) !important; font-size: 22px !important; }

/* ══════════════════════════════════════════════════════════════════════════
   21. CORRECTIF « TEXTES FANTOMES » (iteration 6)
   ══════════════════════════════════════════════════════════════════════════
   LE PROBLEME : le theme a ECLAIRCI des fonds qui etaient sombres dans
   shared.css (panneaux KPI bleu nuit, en-tetes de carte bleu marine...),
   mais les textes poses dessus etaient ecrits en BLANC. Resultat : du blanc
   sur du blanc — le texte existe toujours dans le HTML, il est simplement
   invisible. Ce bloc rend a chacun de ces textes la couleur qui convient a
   son nouveau fond clair, selon la hierarchie SSA a 4 niveaux :
       titre    #333  (--ssa-texte)    | label    #666  (--ssa-label)
       valeur   #000  (--ssa-valeur)   | tertiaire #999 (--ssa-faible)
   Methode de detection : audit `getComputedStyle` au navigateur (ratio de
   contraste texte/fond calcule sur chaque element), PAS une lecture d'image.
   ────────────────────────────────────────────────────────────────────────── */

/* ── 21.a BANDE KPI DU TABLEAU DE BORD ────────────────────────────────────
   C'etait la regression la plus visible : sur les 5 panneaux, seuls
   l'anneau et les pastilles chiffrees restaient lisibles ; le titre, les
   libelles de lignes, l'etiquette de categorie et le pied avaient disparu.
   POURQUOI `.dashboard-kpi-panel` en premier : le panneau porte
   `color:#fff`, donc tout ce qui herite (et non redefini) doit basculer. */
.dashboard-kpi-panel { color: var(--ssa-texte) !important; }

/* Titre de la carte (« Eleves & inscriptions ») = titre de panneau SSA. */
.dashboard-kpi-detail h5 { color: var(--ssa-texte) !important; }

/* Etiquette de categorie (« SCOLARITE ») : sous-titre, donc gris moyen. */
.dashboard-kpi-title { color: var(--ssa-label) !important; }

/* Libelles des lignes (« Dossiers complets ») : label secondaire #666. */
.dashboard-kpi-row,
.dashboard-kpi-row span { color: var(--ssa-label) !important; }

/* Pastille chiffree : elle prenait la couleur de marque du panneau (teal,
   or, rose...). On la ramene a une pastille de donnee neutre — fond gris
   moyen, chiffre NOIR comme toute valeur de donnee chez SSA. */
.dashboard-kpi-row b {
  background: var(--ssa-gris-moyen) !important;
  color: var(--ssa-valeur) !important;
  border-radius: 0 !important;
}

/* Pied de carte : libelle tertiaire #999, valeur en texte principal, et
   le filet separateur (blanc translucide, donc invisible) repasse en gris. */
.dashboard-kpi-foot {
  color: var(--ssa-faible) !important;
  border-top-color: var(--ssa-bordure) !important;
}
.dashboard-kpi-foot strong { color: var(--ssa-texte) !important; }

/* Cercle decoratif rgba(255,255,255,.035) : invisible sur fond blanc et
   etranger au vocabulaire SSA (aucun ornement de fond). On le retire. */
.dashboard-kpi-panel::after { display: none !important; }

/* ── 21.b ANNEAUX DES CARTES KPI ──────────────────────────────────────────
   Ils gardaient les couleurs de marque (teal #48d0bd, or #f2b84b, rose...)
   et un disque central bleu nuit herite de l'ancien fond. Une console
   d'administration n'a pas 4 couleurs de marque : on reprend la jauge SSA
   — segment plein = accent (ou couleur d'ETAT quand elle a un sens metier),
   segment vide = gris de bordure, disque central blanc, chiffre #333. */
.dashboard-kpi-panel            { --ring: var(--ssa-bleu); }
.dashboard-kpi-panel.is-success { --ring: var(--ssa-ok); }      /* recouvrement conforme */
.dashboard-kpi-panel.is-warning { --ring: var(--ssa-warn); }    /* point de vigilance   */
.dashboard-kpi-panel.is-danger  { --ring: var(--ssa-erreur); }  /* exceptions & risques */
.dashboard-kpi-ring {
  background: conic-gradient(var(--ring) calc(var(--pct) * 1%), var(--ssa-bordure) 0) !important;
}
.dashboard-kpi-ring::before { background: var(--ssa-blanc) !important; }
.dashboard-kpi-ring strong  { color: var(--ssa-texte) !important; }

/* ── 21.c BOUTONS POSES SUR UN EN-TETE DE CARTE ───────────────────────────
   « Comptabilite », « Voir tout », « Toutes les classes » etaient blancs
   sur l'en-tete devenu gris clair #f3f3f3.
   POURQUOI ce selecteur a rallonge : shared.css ecrit
   `.card > .card-header.card-header-navy .btn { color:#fff !important }`.
   Un `!important` ne se bat qu'avec un selecteur AU MOINS aussi specifique ;
   la regle courte du thema (section 19) perdait donc la cascade. */
.card > .card-header.card-header-navy .btn,
.card > .card-header.card-header-navy .btn-outline-light,
.card > .card-header.card-header-navy a.btn {
  background: var(--ssa-bleu-pale) !important;
  border: 2px solid var(--ssa-bleu-pale) !important;
  color: var(--ssa-bleu-texte) !important;
}
.card > .card-header.card-header-navy .btn:hover {
  background: var(--ssa-bleu) !important;
  border-color: var(--ssa-bleu) !important;
  color: #fff !important;
}

/* ── 21.d PASTILLE DE CLASSE (tuiles « 6A », « 5B »...) ───────────────────
   Accent #0096d6 sur fond de selection #cceaf7 : lisible mais juste
   (ratio 2,6). Le bleu « texte » #007dba est fait pour ce cas. */
.class-tile .ct-ava { color: var(--ssa-bleu-texte) !important; }

/* ── 21.e ANNEAU CSS « OBJECTIF D'ENCAISSEMENT » ──────────────────────────
   Meme logique que les anneaux KPI : c'est une jauge, pas un element de
   marque. Vert d'ETAT (objectif tenu) sur segment vide gris SSA. */
/* JAUGE : le remplissage suit la variable --pct posee par le JS de la page
   (taux reel calcule depuis l'API), plus le 78 % ECRIT EN DUR d'avant --
   sur une base vide la jauge restait verte aux trois quarts a cote d'un
   "0 %" (defaut signale par Leck le 26/07/2026). Valeur de repli : 0. */
.ring { background: conic-gradient(var(--ssa-ok) calc(var(--pct, 0) * 1%), var(--ssa-bordure) 0) !important; }
.ring .ring-in { background: var(--ssa-blanc) !important; }

/* ── 21.f TAILLES DE TEXTE DE LA BANDE KPI ────────────────────────────────
   Ces textes sont dimensionnes en `rem` dans dashboard.html (.68rem, .6rem).
   Le thema ayant reduit la taille de base du document, ils tombaient a 8 px
   voire 7 px — lisibles « en theorie », illisibles en pratique. On les fixe
   en PIXELS sur l'echelle SSA : titre 14, corps 12, description 10. */
.dashboard-kpi-detail h5 { font-size: 14px !important; }
.dashboard-kpi-title     { font-size: 11px !important; }
.dashboard-kpi-row       { font-size: 12px !important; }
.dashboard-kpi-row b     { font-size: 11px !important; }
.dashboard-kpi-foot      { font-size: 10px !important; }
.dashboard-kpi-ring strong { font-size: 20px !important; }

/* ══════════════════════════════════════════════════════════════════════════
   22. ITERATION 7 — LES 6 DEMANDES DE LECK
   ══════════════════════════════════════════════════════════════════════════
   22.0  Structure « 3 BLOCS POSES SUR UN FOND GRIS »   (demande n°6, prioritaire)
   22.1  Rail gauche PLIABLE                             (demande n°1)
   22.2  Onglets : survol colore / selection soulignee   (demande n°2)
   22.3  Boutons : fond OUI, bordure NON, uniformes      (demande n°3)
   22.4  Cartes KPI qui accrochent l'oeil                (demande n°4)
   22.5  Champs de saisie sur fond gris                  (demande n°5)
   ────────────────────────────────────────────────────────────────────────── */

/* ── 22.0 STRUCTURE EN BLOCS DETACHES ─────────────────────────────────────
   L'ECART CORRIGE : jusqu'ici l'en-tete, le rail et le contenu se touchaient
   bord a bord, si bien que toute la fenetre paraissait BLANCHE. Chez SSA les
   panneaux FLOTTENT sur un fond gris : c'est la gouttiere grise entre eux qui
   fait lire « trois blocs » plutot qu'une seule nappe blanche.

   La mecanique tient en trois points :
     - le conteneur `.wrapper` porte le fond gris + un `padding` (= gouttiere
       exterieure : gauche, droite, bas) + un `gap` (= gouttiere entre le rail
       et le bloc principal) ;
     - chaque bloc devient un panneau blanc borde, arrondi 5 px ;
     - l'en-tete garde sa pleine largeur, colle en haut, SANS gouttiere.

   NB : le bloc principal reste UN SEUL panneau plein sur les vues tableau et
   le tableau de bord. Il n'est scinde en deux (Liste | Detail) que sur la
   fiche eleve — voir la section 23. */
:root {
  --ssa-gouttiere: 8px;   /* gouttiere grise entre les blocs */
}

/* Le fond gris doit etre visible : on le pose sur le conteneur des blocs. */
.wrapper {
  background: var(--ssa-fond-app);
  padding: var(--ssa-gouttiere);
  gap: var(--ssa-gouttiere);
  align-items: stretch;
  min-height: calc(100vh - var(--ssa-h-bandeau));
}

/* BLOC 1 — l'en-tete : pleine largeur, colle en haut, aucune gouttiere. */
.navbar.bg-navy {
  left: 0; right: 0; top: 0;
  border-radius: 0 !important;
}

/* BLOC 2 — le rail : panneau blanc DETACHE (bordure sur ses 4 cotes).
   `top` inclut la gouttiere pour que le collage en position sticky respecte
   l'espace gris sous l'en-tete. */
.sidebar {
  top: calc(var(--ssa-h-bandeau) + var(--ssa-gouttiere));
  height: calc(100vh - var(--ssa-h-bandeau) - var(--ssa-gouttiere) * 2);
  min-height: 0;
  background: var(--ssa-blanc);
  border: 1px solid var(--ssa-bordure);
  border-radius: var(--ssa-rayon-panneau);
  overflow: hidden auto;
  /* POURQUOI une transition ici : c'est ce rail qui se plie/deplie (22.1). */
  transition: width .18s ease;
}

/* BLOC 3 — le contenu principal : panneau blanc detache lui aussi. */
.main-content {
  background: var(--ssa-blanc);
  border: 1px solid var(--ssa-bordure);
  border-radius: var(--ssa-rayon-panneau);
  min-height: calc(100vh - var(--ssa-h-bandeau) - var(--ssa-gouttiere) * 2);
}

/* Le contenu du bloc principal ne porte plus lui-meme de fond. */
.content-area { background: transparent; min-height: 0; }

/* ── 22.1 RAIL PLIABLE ────────────────────────────────────────────────────
   Le bouton « hamburger » (deja present dans le bandeau) bascule la classe
   `ssa-rail-plie` sur <body> (voir theme-ssa.js). En mode plie le rail ne
   montre plus que les icones : on retrecit la variable de largeur et on
   masque libelles, sous-titres et titres de section.
   POURQUOI la variable sur <body> et non sur :root : elle CASCADE vers le
   rail, donc un simple ajout de classe suffit — aucune regle a dupliquer. */
body.ssa-rail-plie { --ssa-rail-w: 64px; }

/* Libelle et sous-titre disparaissent ; l'info-bulle native (attribut title
   pose par le JS) prend le relais au survol. */
body.ssa-rail-plie .sidebar-link > span,
body.ssa-rail-plie .sidebar-link::after { display: none; }

/* L'item se resume a son icone, centree. */
body.ssa-rail-plie .sidebar-link {
  padding: 0 0 0 4px;          /* 4 px = la place du lisere de selection */
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.ssa-rail-plie .sidebar-link:hover,
body.ssa-rail-plie .sidebar-link.active { padding-left: 4px; }
body.ssa-rail-plie .sidebar-icon {
  position: static;
  transform: none;
  left: auto;
}

/* Les titres de section (« Scolarite », « Ressources humaines ») n'ont plus
   la place de s'ecrire : ils deviennent un simple filet de separation, ce qui
   preserve le RYTHME du rail (les groupes restent lisibles). */
body.ssa-rail-plie .sidebar-cat {
  height: 0;
  padding: 0;
  overflow: hidden;
  border-top: 1px solid var(--ssa-bordure);
  border-bottom: 0;
  color: transparent;
}

/* Le hamburger : c'est un vrai bouton, on le rend visible a tous les formats
   (shared.css le masquait au-dela de 768 px, ou il n'avait pas d'usage). */
.navbar .navbar-toggler {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 0 !important;
  background: transparent !important;
  color: var(--ssa-label) !important;
  font-size: 16px;
  cursor: pointer;
}
.navbar .navbar-toggler:hover { background: var(--ssa-gris-moyen) !important; color: var(--ssa-texte) !important; }

/* ── 22.2 ONGLETS : SURVOL vs SELECTION ───────────────────────────────────
   REGLE DEMANDEE : le FOND bleu pale = l'effet de SURVOL ; la SELECTION se
   lit au petit bandeau du bas (lisere 3 px) + texte bleu fonce gras.
   Consequence : l'onglet actif ne garde AUCUN fond permanent, sinon les deux
   signaux se confondent et on ne sait plus ou l'on est. */
.nav-tabs .nav-link {
  background: transparent;
  border-bottom: 3px solid transparent;
  color: var(--ssa-label);
}
/* SURVOL = le fond bleu pale (et rien d'autre). */
.nav-tabs .nav-link:hover {
  background: var(--ssa-bleu-pale) !important;
  color: var(--ssa-texte) !important;
  border-bottom-color: transparent !important;
}
/* SELECTION = le bandeau du bas, sans fond. */
.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-item.show .nav-link {
  background: transparent !important;
  color: var(--ssa-bleu-texte) !important;
  font-weight: 700 !important;
  border-bottom: 3px solid var(--ssa-bleu) !important;
}

/* ── 22.3 BOUTONS : FOND OUI, BORDURE NON ─────────────────────────────────
   Chez SSA (cf. « Creer un module RAID ») un bouton est un RECTANGLE DE
   COULEUR sans aucun trait. Deux familles seulement :
     - SECONDAIRE  : fond bleu pale #cceaf7 + texte #007dba gras  (le defaut)
     - PRINCIPAL   : fond bleu plein #0096d6 + texte blanc        (l'action clef)
   Survol : les deux basculent en bleu plein + texte blanc.
   POURQUOI `border: 0` GLOBAL : « Parents & tuteurs » et « Enseignants »
   restaient blancs a bordure parce que shared.css les rhabille via des
   selecteurs plus specifiques que les notres. Plutot que de courir apres
   chaque cas, on supprime la bordure a la racine et on ne la reintroduit
   nulle part — la couleur de fond suffit a delimiter le bouton. */
.btn,
.page-context-actions .btn,
.card-header .btn, .card-header-navy .btn,
.modal-footer .btn, .modal-body .btn,
.table-toolbar .btn, .ork-grid-toolbar .btn {
  border: 0 !important;
  border-radius: 0 var(--ssa-rayon-panneau) 0 var(--ssa-rayon-panneau) !important;
  font-weight: 700;
  box-shadow: none !important;
  /* La bordure de 2 px disparait : on la compense en padding pour que les
     boutons gardent exactement la meme hauteur qu'avant. */
  padding: 6px 12px;
}
.btn-sm, .page-context-actions .btn-sm { padding: 4px 10px; font-size: 12px; }

/* SECONDAIRE — tout ce qui n'est pas explicitement principal ou destructif. */
.btn-outline-primary, .btn-outline-secondary, .btn-light, .btn-secondary,
.btn-outline-navy, .btn-outline-light, .btn-outline-dark, .btn-white,
.page-context-actions .btn-outline-secondary,
.page-context-actions a.btn,
.card-header-navy .btn, .card > .card-header.card-header-navy .btn,
.ork-table-card .ork-grid-toolbar .ork-add,
.ork-table-card .ork-grid-toolbar .ork-open-filters,
.ork-table-card .ork-grid-toolbar .ork-columns,
.ork-table-card .ork-grid-toolbar .ork-tool,
.ork-context-filter__reset,
.ork-context-filter__bar-actions .ork-context-filter__reset {
  background: var(--ssa-bleu-pale) !important;
  border: 0 !important;
  color: var(--ssa-bleu-texte) !important;
  font-weight: 700 !important;
}

/* PRINCIPAL — « Appliquer les filtres », « Connexion », OK d'un dialogue. */
.btn-primary, .btn-navy, .btn-gold, .btn-success,
.btn.btn-navy, .btn.btn-primary,
.ork-context-filter__actions .btn-primary,
.modal-footer .btn-primary {
  background: var(--ssa-bleu-fond-actif) !important;
  border: 0 !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* DESTRUCTIF — reste rouge : c'est une information d'etat, pas un style. */
.btn-danger, .btn-outline-danger {
  background: var(--ssa-erreur-fond-actif) !important;
  border: 0 !important;
  color: #fff !important;
}

/* SURVOL uniforme : bleu plein, texte blanc. */
.btn:hover, .btn:focus,
.page-context-actions .btn:hover,
.ork-context-filter__reset:hover {
  background: var(--ssa-bleu-fond-actif) !important;
  border: 0 !important;
  color: #fff !important;
}
.btn-danger:hover, .btn-outline-danger:hover { background: #b8341f !important; color: #fff !important; }

/* Les glyphes d'action (oeil, crayon, corbeille) NE SONT PAS des boutons :
   ils gardent leur aspect de simple icone cliquable.
   ⚠ PAS `.btn-close` ici : la croix de fermeture des modales est un
   `background-image` (SVG de Bootstrap). Un `background: none` l'EFFACE -> croix
   invisible (bug signale par Leck). `.btn-close` est traite plus bas
   (filter/opacity) en gardant son image. */
.btn-icon, .ork-row-action, .navbar-toggler, .btn-navlt {
  background: none !important;
  border: 0 !important;
  padding: 0 4px !important;
  font-weight: 400;
}
.btn-icon:hover, .ork-row-action:hover { background: none !important; color: var(--ssa-bleu) !important; }
.ork-row-action.del:hover { color: var(--ssa-erreur) !important; }

/* La croix de fermeture des modales : l'en-tete est CLAIR desormais, donc la
   variante « blanche » de Bootstrap y serait invisible. */
.btn-close, .btn-close-white {
  filter: none !important;
  opacity: .6;
}
.btn-close:hover, .btn-close-white:hover { opacity: 1; }

/* Le selecteur « Indicateurs / Filtres » est une paire de boutons : meme
   grammaire, donc MEME HAUTEUR que tous les autres (Leck, 2026-07-24).
   MESURE : ces deux boutons sortaient a 25 px (shared.css ligne 1674, un
   `min-height` de 25) quand le canon en impose 28 — l'ecart se voyait des
   qu'ils cotoyaient un bouton normal. On declare la hauteur au jeton, et le
   `padding` vertical passe a 0 : avec une hauteur fixe, une marge interne
   verticale ne sert plus qu'a deformer la boite. */
.ork-view-panel-toggle button {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ssa-gris-moyen) !important;
  color: var(--ssa-label) !important;
  font-size: 12px; font-weight: 700;
  height: var(--ssa-h-btn) !important;
  min-height: var(--ssa-h-btn) !important;
  padding: 0 10px !important;
}
.ork-view-panel-toggle button.is-active {
  background: var(--ssa-bleu) !important;
  color: #fff !important;
}
.ork-view-panel-toggle button:hover { background: var(--ssa-bleu-pale) !important; color: var(--ssa-bleu-texte) !important; }
.ork-view-panel-toggle button.is-active:hover { background: var(--ssa-bleu) !important; color: #fff !important; }

/* ── 22.4 CARTES KPI QUI ACCROCHENT L'OEIL ────────────────────────────────
   LE CONSTAT DE LECK : « les KPI passent a la loupe ». Elles etaient blanches
   sur fond blanc, avec un chiffre gris de 22 px — rien ne les detachait.
   LES TROIS LEVIERS APPLIQUES (sobres, tous dans la palette SSA) :
     1. un FOND gris #f3f3f3 (la couleur des en-tetes) : la carte se detache
        du panneau blanc sans introduire une seule couleur nouvelle ;
     2. une BANDE D'ACCENT de 4 px en haut, en bleu d'accent ;
     3. le CHIFFRE en 30 px, bleu #0096d6 : c'est lui qu'on doit lire en
        premier a un metre de l'ecran.
   NB : le sous-titre passe en #666 (et non #999) car sur fond gris #f3f3f3
   le gris clair tombait sous le seuil de contraste. */
.stat-card, .ork-kpi-card {
  background: var(--ssa-gris-clair) !important;
  border: 1px solid var(--ssa-bordure) !important;
  border-top: 4px solid var(--ssa-bleu) !important;   /* la bande d'accent */
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 14px !important;
}
.stat-card .stat-number, .ork-kpi-card .stat-number {
  color: var(--ssa-bleu) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -.02em;
}
/* Le libelle sous le chiffre : label secondaire, lisible sur le gris. */
.stat-card .small, .stat-card .text-muted,
.ork-kpi-card .small, .ork-kpi-card .text-muted {
  color: var(--ssa-label) !important;
  font-size: 12px !important;
}
/* L'icone : carre blanc borde sur la carte grise — discrete, jamais pastel. */
.stat-card .stat-icon, .ork-kpi-card .stat-icon {
  width: 34px !important; height: 34px !important;
  background: var(--ssa-blanc) !important;
  border: 1px solid var(--ssa-bordure) !important;
  color: #5f7d8c !important;
  font-size: 15px !important;
  border-radius: 0 !important;
}

/* INDICATEUR DE TENDANCE — n'apparait QUE si une donnee reelle le porte.
   Le JS de la page n'insere ce bloc que lorsqu'il a pu CALCULER la valeur a
   partir de l'API ; il n'existe aucune valeur par defaut, aucun aleatoire.
   (cf. rapport : l'API /api/dashboard ne fournit aujourd'hui aucune
   comparaison de periode — la seule tendance reellement calculable est le
   nombre d'inscriptions du mois courant, deduit de `date_inscription`.) */
.ssa-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.ssa-trend.up   { color: var(--ssa-ok); }
.ssa-trend.down { color: var(--ssa-erreur); }
.ssa-trend .ssa-trend-note { color: var(--ssa-label); font-weight: 400; }

/* La bande KPI du tableau de bord suit la meme grammaire : fond gris,
   bande d'accent, chiffre bleu. */
.dashboard-kpi-panel {
  background: var(--ssa-gris-clair) !important;
  border: 1px solid var(--ssa-bordure) !important;
  border-top: 4px solid var(--ssa-bleu) !important;
  border-radius: 0 !important;
}
.dashboard-kpi-panel.is-success { border-top-color: var(--ssa-ok) !important; }
.dashboard-kpi-panel.is-warning { border-top-color: var(--ssa-warn) !important; }
.dashboard-kpi-panel.is-danger  { border-top-color: var(--ssa-erreur) !important; }
.dashboard-kpi-ring strong { color: var(--ssa-bleu) !important; font-weight: 700 !important; }
.dashboard-kpi-ring::before { background: var(--ssa-gris-clair) !important; }
/* Sur le gris #f3f3f3, la pastille chiffree doit rester contrastee : on la
   passe en blanc borde plutot qu'en gris sur gris. */
.dashboard-kpi-row b {
  background: var(--ssa-blanc) !important;
  border: 1px solid var(--ssa-bordure) !important;
  color: var(--ssa-valeur) !important;
}
.dashboard-kpi-foot { color: var(--ssa-label) !important; }

/* ── 22.5 CHAMPS DE SAISIE SUR FOND GRIS ──────────────────────────────────
   DEMANDE : tous les champs prennent le gris du bandeau d'en-tete (#f3f3f3),
   une bordure fine #d2d2d2 et AUCUN arrondi. Le gris distingue au premier
   coup d'oeil « zone ou l'on saisit » de « zone ou l'on lit » — c'est
   exactement l'usage qu'en fait SSA dans ses dialogues.
   PORTEE : input, select, textarea, date, recherche — sur les 3 pages. */
.form-control, .form-select, .form-control-lg, .form-control-sm,
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], input[type="search"],
input[type="tel"], select, textarea,
.ork-premium-date, .dataTables_wrapper .dataTables_filter input {
  background: var(--ssa-gris-clair) !important;
  border: 1px solid var(--ssa-bordure) !important;
  border-radius: 0 !important;
  padding: 5px 10px;
  font-size: 13px;
  color: var(--ssa-texte) !important;
  box-shadow: none !important;
}
/* Placeholder : #767676 pour rester lisible SUR LE GRIS (le #999 d'origine
   tombait a 2,6 de ratio — sous le seuil de l'audit). */
.form-control::placeholder, input::placeholder, textarea::placeholder {
  color: var(--ssa-faible) !important;
  opacity: 1;
}
/* Focus : bordure bleue franche, aucun halo (regle SSA). */
.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
  background: var(--ssa-blanc) !important;   /* le champ actif s'eclaircit */
  border-color: var(--ssa-bleu) !important;
  box-shadow: none !important;
  outline: 0;
}
/* Les groupes de champs (icone + input) : l'icone partage le meme gris. */
.input-group-text {
  background: var(--ssa-gris-clair) !important;
  border: 1px solid var(--ssa-bordure) !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  color: var(--ssa-label) !important;
}
.input-group .form-control { border-left: 0 !important; }

/* ALIGNEMENT DES HAUTEURS DANS UN INPUT-GROUP (Leck, 2026-07-25).
   ECART CONSTATE (login) : l'icone (.input-group-text) et le bouton (l'oeil)
   etaient PLUS COURTS que le champ. CAUSE : Bootstrap `.form-control-lg` impose
   au CHAMP un `min-height` (~48 px) que le theme ne neutralisait pas, tandis que
   l'icone et le bouton restaient a la hauteur bouton (--ssa-h-btn). CANON :
   l'icone et le bouton EPOUSENT la hauteur du champ. On etire les items du groupe
   et on retire leur hauteur fixe pour qu'ils s'alignent, quelle que soit la taille
   du champ (normale ou -lg). Vaut pour TOUS les groupes : login, barres de
   recherche, filtres. */
/* TRANSITION DE PAGE — anti-flash (Leck, 2026-07-25). L'app est multi-pages
   (55 .html, rechargement complet a chaque menu). Cette regle demande au
   navigateur un FONDU ENCHAINE entre la page qui part et celle qui arrive, ce
   qui masque le rechargement (l'ecran ne "clignote" plus en blanc). Amelioration
   progressive : les navigateurs qui ne connaissent pas @view-transition
   l'ignorent, sans effet de bord. A combiner avec le fond gris inline pose en
   tete de chaque <head> (qui supprime, lui, la toile blanche avant le CSS). */
@view-transition { navigation: auto; }

.input-group { align-items: stretch !important; }
.input-group > .input-group-text,
.input-group > .btn {
  min-height: 0 !important;
  height: auto !important;
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
}

/* Les champs de recherche des barres d'outils suivent la meme regle. */
.navbar-search, .tt-search,
.ork-table-card .ork-grid-toolbar .tt-search,
.ork-table-card .table-toolbar .tt-search {
  background: var(--ssa-gris-clair) !important;
  border: 1px solid var(--ssa-bordure) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.navbar-search .form-control, .navbar-search .input-group-text,
.tt-search .form-control, .tt-search .input-group-text,
.ork-table-card .ork-grid-toolbar .tt-search .form-control,
.ork-table-card .ork-grid-toolbar .tt-search .input-group-text {
  background: var(--ssa-gris-clair) !important;
  border: 0 !important;
  color: var(--ssa-texte) !important;
}

/* Cases a cocher et radios : carrees (rondes pour les radios), accent bleu. */
.form-check-input {
  background-color: var(--ssa-blanc) !important;
  border: 1px solid var(--ssa-bordure) !important;
  border-radius: 0 !important;
}
.form-check-input[type="radio"] { border-radius: 50% !important; }
.form-check-input:checked {
  background-color: var(--ssa-bleu) !important;
  border-color: var(--ssa-bleu) !important;
}
.form-check-label, .form-label { color: var(--ssa-label); font-size: 12px; }

/* ── 22.6 PAGE DE CONNEXION : le bloc blanc sur fond gris ─────────────────
   Elle n'a ni rail ni bandeau : la carte EST le bloc. On garde donc le fond
   gris de l'application bien visible tout autour. */
body.login-page {
  background: var(--ssa-fond-app) !important;
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
}
/* POURQUOI `.login-page .login-card` et non `.login-card` seul : la section 14
   pose deja `.login-page .card { border: 1px solid ... !important }`. La carte
   portant les DEUX classes, c'est le selecteur le plus specifique qui gagne —
   il faut donc au moins deux classes ici pour que la bande d'accent s'affiche. */
.login-page .login-card, .login-page .card.login-card {
  border: 1px solid var(--ssa-bordure) !important;
  border-top: 4px solid var(--ssa-bleu) !important;   /* meme bande d'accent */
  border-radius: var(--ssa-rayon-panneau) !important;
  background: var(--ssa-blanc) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   23. VUE 3 COLONNES « MENU | LISTE | DETAIL »  (demande n°5, 2e volet)
   ══════════════════════════════════════════════════════════════════════════
   C'est le gabarit de la capture `image5.png` de SSA : le rail de navigation,
   puis une LISTE d'objets, puis le DETAIL de l'objet selectionne. Ici le bloc
   principal est donc — et seulement ici — SCINDE EN DEUX panneaux blancs,
   separes par la meme gouttiere grise que celle qui separe le rail du contenu.
   ────────────────────────────────────────────────────────────────────────── */

/* Le bloc principal cede la place a deux panneaux : on lui retire son propre
   habillage de panneau et on le transforme en simple porte-conteneurs. */
.main-content.ssa-3col {
  background: transparent;
  border: 0;
  display: flex;
  /* LISTE ET DETAIL COTE A COTE (Leck, 2026-07-25). `.main-content` de base porte
     `flex-direction: column !important` (layout console : contenu qui defile +
     pied). Sans cette surcharge, la liste et le detail s'EMPILAIENT au lieu d'etre
     cote a cote. On force donc la RANGEE ici (l'empilement responsive < 1200px est
     retabli plus bas, avec !important lui aussi). */
  flex-direction: row !important;
  gap: var(--ssa-gouttiere);   /* LA gouttiere grise entre Liste et Detail */
  align-items: stretch;
}

/* PANNEAU « LISTE » — largeur fixe ~360 px, avec sa recherche en tete. */
.ssa-liste {
  flex: 0 0 360px;
  display: flex;
  flex-direction: column;
  background: var(--ssa-blanc);
  border: 1px solid var(--ssa-bordure);
  border-radius: var(--ssa-rayon-panneau);
  overflow: hidden;
  min-height: calc(100vh - var(--ssa-h-bandeau) - var(--ssa-gouttiere) * 2);
}
.ssa-liste__entete {
  background: var(--ssa-gris-clair);
  border-bottom: 1px solid var(--ssa-bordure);
  padding: 8px 10px;
}
.ssa-liste__titre {
  font-size: 14px; font-weight: 700; color: var(--ssa-texte);
  margin: 0 0 6px;
}
.ssa-liste__corps { overflow-y: auto; flex: 1; }

/* Un item de liste reprend EXACTEMENT la mecanique du rail : icone 30x30,
   nom, sous-titre, et le lisere gauche 4 px pour l'etat selectionne. */
.ssa-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px 7px 14px;   /* 14 = 4 (lisere) + 10 (gouttiere) */
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  color: var(--ssa-texte);
  text-decoration: none;
}
.ssa-item::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: transparent;
}
.ssa-item:hover { background: var(--ssa-gris-moyen); text-decoration: none; }
.ssa-item:hover::before { background: var(--ssa-texte); }
.ssa-item.is-active { background: var(--ssa-bleu-pale); }
.ssa-item.is-active::before { background: var(--ssa-bleu); }   /* le liseré bleu */
.ssa-item__ava {
  width: 26px; height: 26px; flex: 0 0 26px;
  display: grid; place-items: center;
  background: var(--ssa-gris-moyen);
  color: var(--ssa-label);
  font-size: 10px; font-weight: 700;
}
.ssa-item__nom   { font-size: 12px; color: var(--ssa-texte); line-height: 1.2; }
.ssa-item__sous  { font-size: 10px; color: var(--ssa-faible); line-height: 1.2; }

/* PANNEAU « DETAIL » — occupe le reste de la largeur. */
.ssa-detail {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--ssa-blanc);
  border: 1px solid var(--ssa-bordure);
  border-radius: var(--ssa-rayon-panneau);
  min-height: calc(100vh - var(--ssa-h-bandeau) - var(--ssa-gouttiere) * 2);
}
.ssa-detail__entete {
  background: var(--ssa-gris-clair);
  border-bottom: 1px solid var(--ssa-bordure);
  padding: 10px 15px;
  display: flex; align-items: center; gap: 12px;
}
.ssa-detail__titre { font-size: 18px; font-weight: 700; color: var(--ssa-texte); margin: 0; }
.ssa-detail__sous  { font-size: 12px; color: var(--ssa-label); }
.ssa-detail__corps { padding: 15px; }

/* Titre de bloc a l'interieur du detail (« Actions », « Informations… »). */
.ssa-section-titre {
  font-size: 18px; font-weight: 700; color: var(--ssa-texte);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ssa-bordure);
}
.ssa-section + .ssa-section { margin-top: 22px; }

/* TABLE CLE / VALEUR — le coeur du panneau de detail SSA :
   label gris a gauche (~35 %), valeur foncee a droite, filets fins,
   AUCUN zebrage. */
.ssa-kv { width: 100%; border-collapse: collapse; }
.ssa-kv th, .ssa-kv td {
  padding: 6px 8px 6px 0;
  font-size: 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #ededed;   /* filet fin, pas de pointille lourd */
  background: transparent !important; /* jamais de zebrage */
}
.ssa-kv th {
  width: 35%;
  font-weight: 400;
  color: var(--ssa-label);
}
.ssa-kv td { color: var(--ssa-texte); font-weight: 400; }

/* Barre de boutons « piano » au-dessus du detail. */
.ssa-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }

/* Sur ecran etroit la vue 3 colonnes se replie en 2 (liste au-dessus). */
@media (max-width: 1199.98px) {
  /* !important pour battre le `row !important` pose plus haut : sous 1200px on
     REVIENT a l'empilement (liste au-dessus, detail en dessous). */
  .main-content.ssa-3col { flex-direction: column !important; }
  .ssa-liste { flex: 1 1 auto; min-height: 0; max-height: 320px; }
  .ssa-detail { min-height: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   24. CORRECTIFS APRES 1re CAPTURE v3
   ══════════════════════════════════════════════════════════════════════════ */

/* 24.a — Les cartes KPI portent `class="stat-card bg-white"` dans le HTML.
   `.bg-white` de Bootstrap est en `!important` : notre fond gris perdait la
   cascade et les cartes restaient blanches. On vise donc les DEUX classes
   ensemble (specificite 0,2,0 + !important). */
.stat-card.bg-white, .ork-kpi-card.bg-white {
  background: var(--ssa-gris-clair) !important;
}

/* 24.b — La bande KPI du tableau de bord (5 panneaux) debordait du bloc
   principal, dont la largeur utile a diminue avec les gouttieres. Les
   colonnes etaient figees a `minmax(220px,1fr)` : on autorise les panneaux a
   se COMPRIMER (`minmax(0,1fr)`) pour qu'ils tiennent toujours dans le bloc. */
.dashboard-kpi-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  overflow: visible !important;
  gap: var(--ssa-gouttiere) !important;
}
.dashboard-kpi-panel {
  min-height: 0 !important;
  padding: 12px 10px !important;
  gap: 10px !important;
}
/* L'anneau reprend une taille compatible avec la largeur reduite. */
.dashboard-kpi-ring { width: 74px !important; height: 74px !important; }
.dashboard-kpi-ring::before { width: 58px !important; height: 58px !important; }
.dashboard-kpi-main { flex: 0 0 78px !important; }

/* ══════════════════════════════════════════════════════════════════════════
   25. CORRECTIFS DE CONTRASTE (audit v3)
   ══════════════════════════════════════════════════════════════════════════
   L'audit `getComputedStyle` a releve 3 defauts reels apres la mise en place
   du fond gris des cartes KPI. Tous viennent du meme couple de couleurs. */

/* 25.a — LE GROS CHIFFRE DES KPI.
   Leck demandait « le chiffre principal en tres gros et en bleu #0096d6 » sur
   un fond #f3f3f3. Or ce couple ne donne qu'un ratio de 2,99 : sous le seuil
   de 3,0, le chiffre « bave » sur le gris au lieu de claquer.
   La palette SSA prevoit exactement ce cas : #007dba est SA declinaison du
   bleu « quand il faut le LIRE comme du texte » (c'est deja la couleur du
   texte des boutons). Sur #f3f3f3 il monte a 4,08 — le chiffre reste
   franchement bleu, mais devient net. C'est donc lui qu'on utilise pour les
   chiffres poses sur gris ; #0096d6 reste l'accent des aplats et des liseres. */
.stat-card .stat-number, .ork-kpi-card .stat-number,
.stat-card .ork-kpi-value, .stat-number.ork-kpi-value {
  color: var(--ssa-bleu-texte) !important;
}
/* Meme correction pour le chiffre au centre des anneaux du tableau de bord. */
.dashboard-kpi-ring strong { color: var(--ssa-bleu-texte) !important; }

/* 25.b — BOUTONS DESACTIVES (pagination « Precedent » en debut de liste).
   Bootstrap les rendait gris pale sur gris pale (ratio 2,54) : on ne lisait
   plus le libelle. On leur donne un couple explicite et stable — fond
   #e8e8e8 (le gris « zone inactive » de SSA) et texte #767676 : ratio 3,7.
   `opacity: 1` est indispensable, sinon Bootstrap re-delave le tout a .65. */
.btn:disabled, .btn.disabled, .btn[disabled],
.btn-group .btn:disabled, .btn-outline-secondary:disabled {
  background: #e8e8e8 !important;
  border: 0 !important;
  color: var(--ssa-faible) !important;
  opacity: 1 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   26. ITERATION 8 (v4) — LES 7 DEMANDES DE LECK
   ══════════════════════════════════════════════════════════════════════════
   26.A  Alignement BAS des blocs, au pixel                       (demande A)
   26.B  En-tete du rail + mode plie qui GARDE les sections       (demande B)
   26.C  Onglets : fond ET barre sur l'onglet actif               (demande C)
   26.D  Bouton « KPI | Filtres » : plus aucune bordure           (demande D)
   26.E  Bandeau : logo + 2 lignes de titre                       (demande E)
   26.F  Bandeau : zone de droite aeree, photo ronde = bouton     (demande F)
   26.G  Doctrine des formulaires : edition DANS le bloc Detail   (demande G)
   ────────────────────────────────────────────────────────────────────────── */

/* ── 26.A  ALIGNEMENT BAS DES DEUX BLOCS ──────────────────────────────────
   LE DEFAUT CORRIGE : jusqu'ici la page entiere defilait. Le rail, lui, etait
   colle (`position: sticky`) et haut d'exactement un ecran : des que le
   contenu depassait, le bloc principal continuait vers le bas pendant que le
   rail s'arretait — les deux panneaux ne se terminaient donc PAS a la meme
   hauteur, et la gouttiere grise du bas disparaissait sous le contenu.

   LA CORRECTION, qui est aussi celle de SSA (une console ne fait pas defiler
   sa fenetre) : la zone sous le bandeau occupe EXACTEMENT un ecran, les deux
   panneaux sont etires a cette meme hauteur (`align-items: stretch`), et
   c'est l'INTERIEUR de chaque panneau qui defile. Resultat : quel que soit le
   volume de donnees, les deux blocs se terminent sur la meme ligne et la
   gouttiere de 8 px reste visible sous les deux.

   PORTEE : uniquement a partir de 768 px. En dessous, le rail est un tiroir
   coulissant gere par ui-premium.js et la page doit defiler normalement. */
@media (min-width: 768px) {

  /* La fenetre ne defile plus : c'est le role des panneaux. */
  html, body { height: 100%; overflow: hidden; }

  .wrapper {
    height: calc(100vh - var(--ssa-h-bandeau));
    min-height: 0;
    overflow: hidden;
    align-items: stretch;      /* LA ligne qui aligne les deux bas */
  }

  /* Le rail n'a plus besoin d'etre « colle » : il est deja a demeure dans une
     zone qui ne defile pas. On le transforme en colonne flex pour que son
     en-tete (26.B) reste fixe pendant que la liste des menus defile. */
  .sidebar {
    position: static !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    overflow: hidden;          /* le defilement est confie a .sidebar-inner */
  }
  .sidebar-inner {
    flex: 1 1 auto;
    min-height: 0;
    padding-top: 0 !important; /* l'en-tete du rail remplace l'ancien pt-2 */
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Le bloc principal : meme hauteur exacte, defilement interne. */
  .main-content {
    align-self: stretch;
    height: auto;
    min-height: 0 !important;
    overflow: hidden auto;
  }
  /* shared.css imposait `min-height: calc(100vh - 100px)` au contenu : cela
     forcait a lui seul un depassement de la hauteur d'ecran. */
  .content-area { min-height: 0 !important; }

  /* Vue 3 colonnes : les deux panneaux du bloc principal suivent la meme
     regle, et c'est le CORPS du detail qui defile (son en-tete reste fixe). */
  .main-content.ssa-3col { overflow: hidden; }
  .ssa-liste, .ssa-detail {
    align-self: stretch;
    height: auto;
    min-height: 0 !important;
  }
  .ssa-detail { display: flex; flex-direction: column; }
  .ssa-detail__entete { flex: 0 0 auto; }
  .ssa-detail__corps  { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
}

/* ── 26.B  EN-TETE DU RAIL + MODE PLIE QUI GARDE LES SECTIONS ─────────────
   1) Le rail recoit une EN-TETE, posee AVANT « Tableau de bord », sur le meme
      gris #f3f3f3 que les en-tetes de section (« Scolarite »…). C'est elle —
      et non plus le bandeau du haut — qui porte le bouton plier/deplier.
      Elle est CREEE PAR theme-ssa.js : aucune des 4 pages n'a eu a etre
      modifiee, et retirer le script rend le rail d'origine.
   2) En mode plie, les titres de section ne disparaissent plus : ils
      deviennent un petit bandeau gris de 12 px. On continue donc de VOIR
      qu'on passe d'un groupe d'icones au suivant. */
.ssa-rail-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 5px 6px 5px 10px;
  background: var(--ssa-gris-clair);
  border-bottom: 1px solid var(--ssa-bordure);
}
.ssa-rail-entete__titre {
  font-size: 12px;
  font-weight: 700;
  color: var(--ssa-texte);
  white-space: nowrap;
  overflow: hidden;
}
/* Le bouton plier/deplier : meme grammaire que les icones du bandeau
   (aucune bordure, fond au survol seulement). */
.ssa-rail-plier {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0;
  background: transparent;
  color: var(--ssa-label);
  font-size: 14px;
  cursor: pointer;
  border-radius: 0;
}
.ssa-rail-plier:hover { background: var(--ssa-gris-moyen); color: var(--ssa-texte); }

/* Rail plie : un peu plus large que 64 px (l'en-tete doit y tenir). */
body.ssa-rail-plie { --ssa-rail-w: 76px; }
body.ssa-rail-plie .ssa-rail-entete { justify-content: center; padding: 5px; }
body.ssa-rail-plie .ssa-rail-entete__titre { display: none; }

/* LE POINT DEMANDE : le bandeau de section SURVIT au pliage.
   (La regle 22.1 le reduisait a un simple filet : on la remplace.) */
body.ssa-rail-plie .sidebar-cat {
  height: 12px;
  padding: 0;
  overflow: hidden;
  background: var(--ssa-gris-clair);
  border-top: 1px solid var(--ssa-bordure);
  border-bottom: 1px solid var(--ssa-bordure);
  font-size: 0;
  color: transparent;
}

/* Le ☰ quitte le bandeau du haut : il vit desormais dans l'en-tete du rail.
   On le garde en dessous de 768 px, ou il commande le tiroir mobile. */
@media (min-width: 768px) {
  .navbar .navbar-toggler { display: none !important; }
}

/* ── 26.C  ONGLETS : L'ACTIF PORTE LE FOND *ET* LA BARRE ──────────────────
   REGLE DEFINITIVE (elle corrige la 22.2) :
     - onglet ACTIF  : fond #cceaf7 ET barre de selection en bas ;
     - onglet SURVOLE (inactif) : le meme fond #cceaf7, sans barre.
   La barre est un element unique pose par theme-ssa.js : au changement
   d'onglet elle GLISSE vers le nouvel actif au lieu de sauter. */
.nav-tabs { position: relative; }
.nav-tabs .nav-link:hover {
  background: var(--ssa-bleu-pale) !important;
  color: var(--ssa-texte) !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-item.show .nav-link {
  background: var(--ssa-bleu-pale) !important;   /* le fond, qu'il CONSERVE */
  color: var(--ssa-bleu-texte) !important;
  font-weight: 700 !important;
  border-bottom: 3px solid var(--ssa-bleu) !important;   /* secours sans JS */
}
/* Des que le JS a pose la barre glissante, la bordure de secours s'efface
   pour ne pas doubler le trait. */
.nav-tabs.ssa-barre-js .nav-link.active,
.nav-tabs.ssa-barre-js .nav-link.active:hover {
  border-bottom-color: transparent !important;
}
.ssa-onglet-barre {
  position: absolute;
  bottom: 0;
  height: 3px;
  background: var(--ssa-bleu);
  transition: left .18s ease, width .18s ease;
  pointer-events: none;
}

/* ── 26.D  « KPI | FILTRES » : PLUS AUCUNE BORDURE ────────────────────────
   Leck : ces bordures n'apportent rien. On garde les FONDS (comme tous les
   autres boutons du theme) et on supprime le cadre, l'arrondi et l'ombre —
   la bordure venait du CONTENEUR (shared.css : `1px solid #0a6ed1`), pas des
   boutons, qui etaient deja sans trait. */
.ork-view-panel-toggle {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 0 !important;
  /* HAUTEUR : shared.css lui donne 31 px (ligne 1663), et cette pilule partage
     un conteneur `d-flex` avec « Relancer les impayes ». Or dans un conteneur
     flex, tous les enfants prennent la hauteur du PLUS GRAND : la pilule tirait
     donc le bouton voisin a 31 px, alors que ce bouton est lui-meme au canon
     (min-height 28). C'etait le « bouton a 31 px sur paiements.html » — il
     n'avait aucun defaut, il subissait son voisin.
     shared.css etant un fichier intouchable, on corrige ici : meme specificite
     (une classe), mais theme-ssa.css est charge APRES, donc cette valeur gagne. */
  min-height: var(--ssa-h-btn);
}
.ork-view-panel-toggle button { box-shadow: none !important; }

/* ── 26.E  BANDEAU : LOGO + DEUX LIGNES DE TITRE ──────────────────────────
   Le ☰ etant parti dans le rail, sa place accueille le logo de l'ecole,
   suivi de deux lignes : le NOM REEL de l'etablissement (lu dans l'API par
   theme-ssa.js) puis le slogan de l'application. */
.navbar .ssa-marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin: 0;
  text-decoration: none;
}
.navbar .ssa-marque:hover { text-decoration: none; }
/* Le carre du logo : 38 px, angles droits (geometrie SSA). Un vrai fichier
   image se glissera exactement dans ce cadre. */
.navbar .ssa-marque__logo {
  flex: 0 0 38px;
  width: 38px; height: 38px;
  display: block;
  object-fit: contain;
  border-radius: 0;
}
.navbar .ssa-marque__txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
  min-width: 0;
}
/* Ligne 1 — le nom de l'ecole : c'est le titre du produit a l'ecran. */
/* TITRE ET SLOGAN AGRANDIS pour remplir la hauteur du logo (Leck, 2026-07-24).
   Le logo fait 38 px ; a 15 + 11 px, le bloc de texte n'en occupait que ~30 et
   paraissait petit a cote. A 18 + 12 px, les deux lignes montent a ~36 px et
   s'alignent visuellement sur le carre du logo. */
.navbar .ssa-marque__ecole {
  font-size: 18px;
  font-weight: 700;
  color: var(--ssa-texte);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Ligne 2 — le slogan : plus petit et plus clair, comme le « 4.21.7.0 »
   qui suit le titre chez SSA. */
.navbar .ssa-marque__slogan {
  font-size: 12px;
  font-weight: 400;
  color: var(--ssa-label);
  white-space: nowrap;
}

/* ── 26.F  BANDEAU : ZONE DE DROITE AEREE, PHOTO RONDE = BOUTON ───────────
   Trois corrections : on ecarte nettement les icones (elles se touchaient),
   on supprime la fleche apres le nom, et on inverse l'ordre — nom + role
   d'abord, PHOTO ensuite. C'est la photo qui ouvre le menu utilisateur. */
.navbar .container-fluid > .d-flex.align-items-center:last-child {
  gap: 18px !important;            /* au lieu de 4-8 px : l'aeration demandee */
  padding-right: 4px;
}
.navbar .btn-navlt {
  width: 30px; height: 30px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}
/* Le bloc utilisateur : le texte, puis le bouton photo. */
.navbar .ssa-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 12px;
}
.navbar .ssa-user__txt {
  text-align: left;
  line-height: 1.2;
  color: var(--ssa-texte);
}
.navbar .ssa-user__txt .fw-semibold { font-size: 12px; color: var(--ssa-texte); }
.navbar .ssa-user__txt .text-white-50 { color: var(--ssa-faible) !important; }
/* La photo EST le bouton : rond, sans cadre de bouton, cercle bleu au survol
   pour signaler qu'elle est cliquable. */
.navbar .ssa-user__btn {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  line-height: 0;
  cursor: pointer;
  border-radius: 50%;
}
.navbar .ssa-user__btn .navbar-avatar {
  width: 34px; height: 34px;
  border-radius: 50% !important;      /* le CERCLE demande */
  border: 1px solid var(--ssa-bordure);
  object-fit: cover;
  display: block;
}
.navbar .ssa-user__btn:hover .navbar-avatar,
.navbar .ssa-user__btn[aria-expanded="true"] .navbar-avatar {
  border-color: var(--ssa-bleu);
  box-shadow: 0 0 0 2px var(--ssa-bleu-pale);
}

/* ── 26.G  EDITION DANS LE BLOC DETAIL (jamais de popup) ──────────────────
   DOCTRINE : creation = popup (assistant par etapes) ; consultation et
   modification = DANS le bloc Detail. Les champs prennent le gris du theme
   (regle 22.5) ; la barre d'actions Enregistrer / Annuler est collee en bas
   du panneau, comme le pied d'un panneau SSA. */
.ssa-form-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 20px;
}
.ssa-form-champ { display: flex; flex-direction: column; gap: 3px; }
.ssa-form-champ > label {
  font-size: 11px;
  color: var(--ssa-label);
}
.ssa-form-champ > input,
.ssa-form-champ > select,
.ssa-form-champ > textarea { width: 100%; }

/* Pied d'edition : fond gris #d9d9d9 comme les pieds de panneau SSA. */
.ssa-detail__pied {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  padding: 8px 15px;
  background: var(--ssa-gris-pied);
  border-top: 1px solid var(--ssa-bordure);
  border-radius: 0 0 var(--ssa-rayon-panneau) var(--ssa-rayon-panneau);
}
.ssa-detail__pied .ssa-form-message {
  margin-right: auto;
  font-size: 12px;
  color: var(--ssa-erreur);
}

/* ── 26.H  DEUX DETAILS DE FINITION ───────────────────────────────────────
   1) Un onglet est un <a> : la regle globale `a:hover { underline }` lui
      ajoutait un souligne au survol, en plus du fond bleu pale. Deux signaux
      pour un seul etat : on retire le souligne.
   2) Les listes deroulantes du theme (fond gris, aucune bordure arrondie)
      ressemblaient trait pour trait a un champ texte. On leur rend un petit
      chevron pour qu'on VOIE qu'elles s'ouvrent — dessine en CSS, donc aucun
      fichier image a livrer. */
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus { text-decoration: none !important; }

.form-select, select {
  appearance: none;
  -webkit-appearance: none;
  /* `!important` obligatoire : la regle 22.5 pose `background: <gris>
     !important` en raccourci, ce qui remet `background-image` a `none`. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ssa-label) 50%),
    linear-gradient(135deg, var(--ssa-label) 50%, transparent 50%) !important;
  background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px) !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
  padding-right: 26px !important;
}

/* Le champ actif s'eclaircit (regle 22.5) via un raccourci `background` :
   le chevron de la liste deroulante disparaissait des qu'on la focalisait.
   On le redessine donc aussi pour l'etat focus. */
.form-select:focus, select:focus {
  background-color: var(--ssa-blanc) !important;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ssa-label) 50%),
    linear-gradient(135deg, var(--ssa-label) 50%, transparent 50%) !important;
  background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px) !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   27. ITERATION 9 (v5) — LES 5 AJUSTEMENTS DE LECK
   ══════════════════════════════════════════════════════════════════════════
   27.1  Bouton plier/deplier : une FLECHE (Segoe MDL2 Assets)   (ajustement 1)
   27.2  Rail plie : un simple TRAIT entre les sections          (ajustement 2)
   27.3  Popup de creation : bouton dans l'en-tete + plus HAUT   (ajustement 3)
   27.4  Bloc Detail : actions dans l'en-tete + variante ONGLETS (ajustement 4)
   27.5  Bloc Liste : en-tete grise / zone de filtre blanche     (ajustement 5)
   27.6  Bande KPI du tableau de bord : libelles entiers         (bonus)
   ────────────────────────────────────────────────────────────────────────── */

/* ── 27.1  LE BOUTON PLIER/DEPLIER PORTE UNE FLECHE ───────────────────────
   Leck ne voulait plus du hamburger. Il a designe deux glyphes de la police
   Windows « Segoe MDL2 Assets » :
       E1BF  fleche qui rentre vers la GAUCHE   -> « replier »
       E1C0  fleche qui sort vers la DROITE     -> « deplier »
   Le glyphe est pose ICI (et non dans le HTML) : le CSS sait dans quel etat
   se trouve le rail (classe `ssa-rail-plie` sur <body>), donc il sait quelle
   fleche dessiner. Une seule regle decide, il n'y a rien a synchroniser.

   LE REPLI SI LA POLICE MANQUE : ces deux codes appartiennent a la « zone a
   usage prive » d'Unicode. Sur un poste sans Segoe MDL2 Assets (Mac, Linux,
   Android) ils s'afficheraient en carre vide. theme-ssa.js MESURE la police
   au demarrage ; si elle est absente il pose `ssa-sans-mdl2` sur <html> et
   les regles du bas prennent le relais avec un chevron ordinaire, present
   dans toutes les polices. La PILE de polices ci-dessous est une seconde
   ceinture : « Segoe Fluent Icons » est le nom de la meme police sous
   Windows 11, et les polices texte finales evitent tout saut de mise en page. */
.ssa-rail-plier__ico {
  font-family: 'Segoe MDL2 Assets', 'Segoe Fluent Icons',
               'Segoe UI Symbol', 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1;
  font-style: normal;
  font-weight: 400;
  display: block;
}
/* Rail DEPLIE : le clic va REPLIER -> fleche vers la gauche. */
.ssa-rail-plier__ico::before { content: "\E1BF"; }
/* Rail PLIE : le clic va DEPLIER -> fleche vers la droite. */
body.ssa-rail-plie .ssa-rail-plier__ico::before { content: "\E1C0"; }

/* REPLI — poste sans la police d'icones : chevrons simples et un peu plus
   gros, pour garder une cible visuelle de taille comparable. */
html.ssa-sans-mdl2 .ssa-rail-plier__ico { font-size: 20px; font-weight: 700; }
html.ssa-sans-mdl2 .ssa-rail-plier__ico::before { content: "\2039"; }              /* le chevron gauche */
html.ssa-sans-mdl2 body.ssa-rail-plie .ssa-rail-plier__ico::before { content: "\203A"; }  /* le chevron droit */


/* ── 27.2  RAIL PLIE : UN SIMPLE TRAIT ENTRE LES SECTIONS ─────────────────
   Leck : « le bandeau de section est trop grand, le rendu n'est pas top ».
   On remplace donc la bande grise de 12 px (regle 26.B) par UN FILET, et
   rien d'autre. Le titre reste masque (il ne tiendrait pas dans 76 px), mais
   on continue de VOIR qu'on change de groupe d'icones.
   COMMENT : la <div class="sidebar-cat"> devient une boite de hauteur nulle ;
   c'est sa BORDURE DU HAUT qui dessine le trait, et ses marges qui l'aerent. */
body.ssa-rail-plie .sidebar-cat {
  height: 0;
  min-height: 0;
  padding: 0;
  margin: 7px 12px;             /* 12 px de retrait : le trait ne touche pas les bords */
  overflow: hidden;
  background: transparent;      /* PLUS de bande grise */
  border-top: 1px solid var(--ssa-bordure);   /* LE trait, 1 px, #d2d2d2 */
  border-bottom: 0;
  font-size: 0;
  line-height: 0;
  color: transparent;
}


/* ── 27.3  LE POPUP DE CREATION : BOUTON EN HAUT A DROITE, ET PLUS HAUT ───
   Deux demandes distinctes.

   (a) « Formulaire complet » remonte dans l'EN-TETE, tout a droite, au meme
       niveau que le titre. Le deplacement du bouton est fait par theme-ssa.js
       (on DEPLACE le bouton de ui-premium.js, on ne le recree pas). Ici on
       ne fait que l'habiller : l'en-tete devient une ligne titre | bouton |
       croix, et le pied devenu vide disparait.

   (b) La HAUTEUR augmente — la LARGEUR NE BOUGE PAS (Leck : « la largeur est
       bonne »). On ne touche donc jamais a `max-width`.
       Le popup vise 80 % de la hauteur d'ecran : le contenu defile a
       l'interieur et le pied de l'assistant (Precedent / Suivant) reste
       colle en bas, toujours visible. */

/* (a) L'en-tete devient une ligne a trois elements. */
.modal-header { display: flex; align-items: center; gap: 12px; }
.modal-header .modal-title { flex: 1 1 auto; min-width: 0; }
/* Le bouton monte : il garde la grammaire des boutons du theme (fond bleu
   pale, aucune bordure) mais en taille reduite, pour ne pas ecraser le titre. */
.modal-header .ssa-modale-agrandir {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  white-space: nowrap;
}
/* Le pied vide (il ne contenait que ce bouton) n'a plus de raison d'etre. */
.modal-footer.ssa-pied-vide { display: none !important; }

/* (b) HAUTEUR. `--ssa-h-popup` est ecrite ici pour etre reglable d'un seul
   endroit si Leck la trouve encore trop basse ou trop haute. */
.modal-dialog.ssa-modale-assistant { --ssa-h-popup: 80vh; }

.modal-dialog.ssa-modale-assistant .modal-content {
  height: var(--ssa-h-popup);
  max-height: calc(100vh - 40px);   /* jamais plus haut que l'ecran */
  display: flex;
  flex-direction: column;
}
.modal-dialog.ssa-modale-assistant .modal-header { flex: 0 0 auto; }
/* Le corps prend toute la place restante et c'est LUI qui defile. */
.modal-dialog.ssa-modale-assistant .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
/* L'assistant occupe tout le corps… */
.modal-dialog.ssa-modale-assistant #assistantEleve {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* …et son pied d'action est POUSSE en bas : `margin-top: auto` mange tout
   l'espace libre au-dessus de lui. C'est ce qui le rend toujours visible
   sans le rendre « flottant » (il reste dans le flux, donc il ne recouvre
   jamais un champ). */
.modal-dialog.ssa-modale-assistant .ork-assistant-pied {
  margin-top: auto;
  padding-top: 12px;
}


/* ── 27.4  BLOC DETAIL : ACTIONS DANS L'EN-TETE + VARIANTE ONGLETS ────────
   (a) Les boutons d'action (Modifier la fiche, Bulletin, Paiements, Absences)
       quittent le corps du panneau : ils vivent desormais dans l'EN-TETE du
       bloc Detail, A DROITE, sur la meme ligne que le titre. Le bloc
       « Actions » du corps est supprime — il faisait doublon.
   (b) Juste sous l'en-tete, le detail peut s'organiser en ONGLETS ou rester
       en SECTIONS. Les deux rendus existent ; dans les DEUX cas les boutons
       restent a droite dans l'en-tete. */

/* (a) L'en-tete du detail : titre a gauche, actions a droite. */
.ssa-detail__entete {
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 6px;
}
.ssa-detail__entete-txt { min-width: 0; }      /* autorise la troncature du titre */
.ssa-detail__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-left: auto;      /* LA regle qui pousse les boutons a droite */
}
/* Boutons d'en-tete : un cran plus compacts que dans le corps, pour tenir
   sur la meme ligne que le titre sans faire grossir l'en-tete. */
.ssa-detail__actions .btn {
  padding: 4px 10px !important;
  font-size: 12px !important;
  white-space: nowrap;
}

/* (b) LA BARRE D'ONGLETS DU DETAIL — posee ENTRE l'en-tete et le corps.
   Elle ne defile pas avec le contenu (`flex: 0 0 auto`) : on garde toujours
   les onglets sous les yeux. Le fond blanc et le filet du bas la relient
   visuellement au corps, pas a l'en-tete grise. */
.ssa-detail__onglets {
  flex: 0 0 auto;
  background: var(--ssa-blanc);
  border-bottom: 1px solid var(--ssa-bordure);
  padding: 0 var(--ssa-pas);
}
.ssa-detail__onglets:empty { display: none; }   /* variante « sections » */
.ssa-detail__onglets .nav-tabs { border-bottom: 0 !important; margin-bottom: 0; }

/* En variante ONGLETS, le titre de section devient inutile (l'onglet le
   porte deja) : deux fois le meme mot serait du bruit. */
.ssa-detail__corps.ssa-vue-onglets .ssa-section-titre { display: none; }
.ssa-detail__corps.ssa-vue-onglets .ssa-section + .ssa-section { margin-top: 0; }


/* ── 27.5  BLOC LISTE : EN-TETE GRISE, ZONE DE FILTRE BLANCHE, PUIS TRAIT ─
   Leck ne voyait pas ou s'arretait l'en-tete du bloc Liste. On rend donc la
   limite EVIDENTE, avec trois zones empilees et nettement differenciees :

     1. EN-TETE     fond GRIS #f3f3f3 + filet du bas  -> le titre, rien d'autre
     2. ZONE DE FILTRE  fond BLANC (celui du corps)   -> recherche + 2 boutons
        …separee de la liste par LE MEME filet fin que les sections…
     3. CORPS       fond BLANC                        -> la liste elle-meme

   La zone de filtre est BLANCHE volontairement : elle appartient au corps
   (elle agit sur la liste), pas a l'en-tete. C'est le contraste gris/blanc
   qui montre ou l'en-tete s'arrete. */

/* 1. L'en-tete ne porte plus que le titre : sa hauteur redevient franche. */
.ssa-liste__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: var(--ssa-h-entete);
  padding: 8px var(--ssa-pas);
  background: var(--ssa-gris-clair);
  border-bottom: 1px solid var(--ssa-bordure);
}
.ssa-liste__titre { margin: 0 !important; font-size: 14px; font-weight: 700; }
/* Le COMPTE d'elements a droite du titre : c'est un comptage de la liste
   reellement chargee (« affiches / total »), pas une donnee fabriquee. */
.ssa-liste__compte { font-size: 11px; color: var(--ssa-label); white-space: nowrap; }

/* 2. La zone de filtre : BLANCHE, et separee de la liste par le filet fin. */
.ssa-liste__filtre {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--ssa-blanc);                 /* le BLANC demande */
  border-bottom: 1px solid var(--ssa-bordure);  /* LA ligne de separation */
}
.ssa-liste__filtre .input-group { flex: 1 1 120px; min-width: 0; }
/* Les deux boutons sont eux aussi sur fond blanc : on leur retire le fond
   bleu pale des boutons « piano » et on ne garde que le texte bleu. Ils
   reprennent leur fond au survol, pour rester des boutons. */
.ssa-liste__filtre-boutons { display: flex; gap: 4px; flex: 0 0 auto; }

/* Le panneau Liste s'elargit de 360 a 430 px : c'est le minimum pour que la
   recherche ET les deux boutons tiennent sur UNE SEULE ligne, comme Leck le
   demande (« le champ de saisie puis, a sa droite, DEUX boutons »). Les 70 px
   sont pris sur le panneau Detail, qui en a de reste. */
.ssa-liste { flex: 0 0 430px; }
.ssa-liste__filtre-boutons .btn {
  background: var(--ssa-blanc) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ssa-bleu-texte) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 8px !important;
  white-space: nowrap;
}
.ssa-liste__filtre-boutons .btn:hover,
.ssa-liste__filtre-boutons .btn:focus {
  background: var(--ssa-bleu-pale) !important;
  color: var(--ssa-bleu-texte) !important;
}
/* Le bouton « Filtre avance » reste enfonce tant que son panneau est ouvert :
   sinon on ne sait plus d'ou viennent les criteres affiches. */
.ssa-liste__filtre-boutons .btn[aria-expanded="true"] {
  background: var(--ssa-bleu-pale) !important;
}

/* Le panneau de criteres du « Filtre avance » : il se glisse SOUS la zone de
   filtre, toujours sur fond blanc, et se ferme par le meme bouton. */
.ssa-liste__avance {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  padding: 8px 10px 10px;
  background: var(--ssa-blanc);
  border-bottom: 1px solid var(--ssa-bordure);
}
.ssa-liste__avance[hidden] { display: none; }
.ssa-liste__avance label {
  display: block;
  font-size: 10px;
  color: var(--ssa-label);
  margin-bottom: 2px;
}
.ssa-liste__avance select { font-size: 11px !important; }

/* 3. Le corps garde le fond blanc du panneau et defile seul. */
.ssa-liste__corps { background: var(--ssa-blanc); }


/* ── 27.6  BONUS : LES LIBELLES DE LA BANDE KPI NE SONT PLUS TRONQUES ─────
   DEFAUT HERITE (il vient du <style> local de dashboard.html, pas du theme) :
   chaque libelle etait borne a deux lignes par `-webkit-line-clamp: 2` avec
   `overflow: hidden`. Depuis que la bande tient en 5 colonnes comprimees
   (regle 24.b), la place manque : « Millions encaisses » devenait
   « Millions encaiss… » et « Stocks sous le seuil » « Stocks sous le… ».
   CORRECTIF : on retire la limite de lignes et on autorise le libelle a
   passer a la ligne autant de fois qu'il le faut. Le texte reste donc
   ENTIER — c'est ce que Leck demande. Pour compenser la place prise, la
   pastille du chiffre est un peu resserree et les lignes sont alignees en
   haut, ce qui evite l'effet « escalier » quand une ligne fait deux hauteurs.

   ATTENTION (piege rencontre a la 1re capture v5) : ne JAMAIS mettre
   `overflow-wrap: anywhere` ici. Le mot se coupait alors n'importe ou —
   « Millions encaisse|s », « Millions a recouvr|er » — ce qui est PIRE que la
   troncature d'origine. On impose donc explicitement une coupure aux SEULS
   espaces : un libelle passe a la ligne entre deux mots, jamais dedans. */
.dashboard-kpi-row {
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: .35rem !important;
}
.dashboard-kpi-row span {
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
  white-space: normal !important;
  overflow-wrap: normal !important;   /* coupure aux espaces UNIQUEMENT */
  word-break: normal !important;
  hyphens: none;
  line-height: 1.15 !important;
}
/* Un cran de moins sur le libelle : 11 px au lieu de 12 px. C'est ce qui
   permet aux mots longs (« recouvrer », « incomplets ») de tenir dans la
   colonne sans etre coupes, une fois la bande KPI comprimee en 5 panneaux. */
.dashboard-kpi-row       { font-size: 11px !important; }
.dashboard-kpi-panel     { padding: 12px 8px !important; }
/* La pastille du chiffre ne doit pas s'etirer sur deux lignes de libelle. */
.dashboard-kpi-row b { align-self: start; }


/* ═══════════════════════════════════════════════════════════════════════════
   28. ITERATION 10 (v6) — LES 3 DERNIERES RETOUCHES AVANT GENERALISATION

   28.1  Zone de filtre : les deux boutons passent en ICONES SEULES
   28.2  Mode edition : la barre Annuler/Enregistrer devient BLANCHE, dans le
         bloc, separee des champs par un simple FILET
   28.3  Les TROIS en-tetes de bloc (Menus / Liste / Detail) ont la MEME hauteur

   Ces trois regles FIGENT le theme : c'est cet etat qui est generalise a
   toutes les pages. Tout le reste (couleurs, dimensions, structure) est
   valide par Leck et ne bouge plus.
   ─────────────────────────────────────────────────────────────────────── */

/* ── 28.1  ZONE DE FILTRE : BOUTONS EN ICONES SEULES ───────────────────
   LE DEFAUT : sur les 430 px du bloc Liste, les libelles « Filtre avance » et
   « Reinitialiser les filtres » consommaient a eux seuls ~250 px. Le champ de
   recherche n'en gardait que 130 — de quoi afficher une dizaine de lettres.

   LA CORRECTION : on ne garde que l'ICONE. Chaque bouton devient un carre de
   28 px. Les ~220 px liberes vont TOUS au champ de recherche, parce que
   celui-ci est le seul element extensible de la ligne (`flex: 1 1 auto`).

   ACCESSIBILITE (non negociable) : un bouton sans texte visible doit porter
   `title` (infobulle souris) ET `aria-label` (lecteur d'ecran). C'est fait
   dans le HTML — le CSS ne fait que la mise en forme. */
/* La recherche prend TOUTE la place restante. PIEGE RENCONTRE A LA 1re
   CAPTURE v6 : il faut garder une base de 120 px (`flex: 1 1 120px`) et NON
   `auto`. Avec `auto`, la base vaut la largeur NATURELLE du champ (son
   placeholder, ~250 px) : les trois elements ne tiennent alors plus sur la
   ligne et les deux icones PASSENT A LA LIGNE, sous le champ. Avec une base de
   120 px la ligne tient toujours, et le facteur de croissance `1` reverse tout
   l'espace libre au champ. */
.ssa-liste__filtre .input-group { flex: 1 1 120px; min-width: 0; }
.ssa-liste__filtre { flex-wrap: nowrap; }   /* ceinture et bretelles */

.ssa-liste__filtre-boutons .btn {
  /* Un carre : meme largeur que hauteur, l'icone centree dedans. */
  width: 28px;
  height: 28px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px !important;   /* l'icone seule peut respirer un peu plus */
}
/* La marge `me-1` du HTML d'origine servait a ecarter l'icone de son texte.
   Sans texte, elle decentre l'icone : on la neutralise. */
.ssa-liste__filtre-boutons .btn i { margin: 0 !important; }


/* ── 28.2  MODE EDITION : PIED BLANC, DANS LE BLOC, SEPARE PAR UN FILET ───
   LE CONSTAT DE LECK : « les boutons Annuler et Enregistrer ne sont pas dans
   la bonne zone, ils sont sur la zone ou le fond est gris au lieu d'etre
   blanc ». Le pied etait bien A L'INTERIEUR du bloc Detail (regle 26.G), mais
   il portait le gris #d9d9d9 des pieds de panneau SSA — exactement la couleur
   du fond de l'application. A l'oeil, il se lisait donc comme une barre POSEE
   PAR-DESSUS le bloc, et non comme une partie du bloc.

   LA CORRECTION, en trois points :
     1. FOND BLANC, celui du corps du panneau : le pied appartient
        visiblement au bloc Detail ;
     2. un simple FILET FIN (1 px #d2d2d2, le meme qui separe les sections et
        la zone de filtre de la liste) marque la limite champs / boutons ;
     3. le pied occupe SA PROPRE ZONE en bas du bloc — il reste dans le flux
        flex (`flex: 0 0 auto`), donc il ne recouvre jamais un champ : c'est le
        CORPS qui defile au-dessus de lui.
   L'alignement bas est inchange (regle 10) : le pied se termine sur la meme
   ligne que le bloc Liste et le bloc Menus. Verifie par mesure-alignement.py. */
.ssa-detail__pied {
  background: var(--ssa-blanc);                 /* le BLANC demande (etait #d9d9d9) */
  border-top: 1px solid var(--ssa-bordure);     /* LE filet de separation */
  min-height: var(--ssa-h-pied);
}


/* ── 28.3  UNE SEULE ET MEME HAUTEUR POUR LES TROIS EN-TETES DE BLOC ─────
   LE DEFAUT MESURE (avant correction, ecran 1440x1000) :
       en-tete du rail   « Navigation » : 37,0 px
       en-tete de liste  « Eleves »     : 40,0 px
       en-tete du detail « NOM Prenom » : 60,6 px  ← deux lignes
   Les trois blocs commencaient donc au meme niveau mais leur contenu, non :
   l'oeil voyait un decrochement.

   LA CORRECTION :
     a) le SOUS-TITRE du bloc Detail est supprime (dans eleve-detail.html) :
        c'est lui qui imposait la deuxieme ligne. L'en-tete ne porte plus que
        le nom, avec les boutons d'action a sa droite ;
     b) une variable UNIQUE, `--ssa-h-entete-bloc`, fixe la hauteur des trois.
        Changer cette seule valeur les fait bouger ENSEMBLE : il n'y a plus
        aucun moyen de les desynchroniser par megarde.

   La hauteur retenue est 40 px — celle qui etait deja canonique pour les
   en-tetes de panneau (`--ssa-h-entete`, section « hauteurs canoniques »). */
:root {
  /* Hauteur COMMUNE aux en-tetes des 3 blocs : Menus, Liste, Detail.
     Bordure comprise (`box-sizing: border-box` est global au theme). */
  --ssa-h-entete-bloc: 40px;
}

/* PORTEE : a partir de 768 px seulement, comme la regle d'alignement 26.A.
   En dessous, le rail devient un tiroir et le titre du detail a le droit de
   passer sur deux lignes plutot que d'etre tronque. */
@media (min-width: 768px) {

  .ssa-rail-entete,
  .ssa-liste__entete,
  .ssa-detail__entete {
    height: var(--ssa-h-entete-bloc);
    min-height: var(--ssa-h-entete-bloc);
    flex: 0 0 auto;
    /* Un en-tete de hauteur FIXE ne doit jamais passer a la ligne : sinon le
       contenu deborderait au lieu de faire grandir la boite. On remplace donc
       le `flex-wrap: wrap` de la regle 27.4 par un `nowrap`. */
    flex-wrap: nowrap;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
  }

  /* Le titre du detail est en 18 px : sur 40 px de haut il tient largement,
     a condition qu'il ne fasse qu'UNE ligne. On le tronque proprement plutot
     que de laisser un nom tres long casser la hauteur commune. */
  .ssa-detail__titre {
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Si un HTML conserve encore un sous-titre, il ne doit plus creer de
     deuxieme ligne : on le masque (l'information vit dans la fiche). */
  .ssa-detail__entete .ssa-detail__sous { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   29. GENERALISATION (v6) — CORRECTIFS VALABLES POUR TOUTES LES PAGES

   Le theme est desormais pose sur les ~50 pages restantes. L'audit automatique
   (audit-contraste.py, passe sur CHACUNE des 53 pages) a fait remonter des
   defauts qui reviennent page apres page. On les corrige donc ICI, une fois :
   une seule regle vaut pour N pages, et une page ajoutee demain en herite.

   29.1  Textes trop clairs herites du theme premium (gris bleutes)
   29.2  `.text-warning` / `.text-info` : illisibles en TEXTE
   29.3  Pagination DataTables : « Precedent / Suivant » fantomes
   29.4  Pastilles « -subtle » de Bootstrap : hors charte et peu lisibles
   29.5  Zones jadis FONCEES devenues claires : le texte blanc y disparait
   ─────────────────────────────────────────────────────────────────────── */

/* ── 29.1  LES GRIS BLEUTES DU THEME PREMIUM ──────────────────────────────
   Le rendu premium utilisait une famille de gris bleutes (#8b98a6, #8a98a8,
   #94a3b8) pour ses textes tertiaires. Poses sur le BLANC du theme SSA, ils
   plafonnent a un ratio de 2,5 a 2,9 — sous le seuil de 3,0 de notre audit :
   ce sont des « textes fantomes ». On les ramene aux gris du theme, qui sont
   eux calibres (#767676 = 4,54 sur blanc ; #666666 = 5,74).
   TOUCHE 42 PAGES pour le seul `.ork-history time`. */
.ork-history time,
.ork-field-note,
.ork-summary-card__body time { color: var(--ssa-faible) !important; }

.ork-assistant-lib,
.ork-assistant-pas .ork-assistant-lib,
table.edt tr.pause td,
table.edt tr.pause td.hcol { color: var(--ssa-label) !important; }


/* ── 29.2  `.text-warning` ET `.text-info` : ILLISIBLES EN TEXTE ──────────
   L'ambre #f4b51e de la charte (regle 7) est fait pour une PASTILLE RONDE
   posee sur du blanc — une forme pleine de quelques pixels. Utilise comme
   COULEUR DE TEXTE, il tombe a un ratio de 1,83 : le mot est quasiment
   invisible (constate sur roles.html, 10 mots concernes, et sur sites.html,
   emploi-du-temps.html, rapports.html…).
   CORRECTIF : la PASTILLE garde l'ambre exact de la charte ; seul le TEXTE
   passe a un ambre fonce lisible (#8a6100, ratio 5,5 sur blanc). L'oeil lit
   toujours « attention », mais il lit.
   `.text-info` subit le meme sort (#0dcaf0, ratio 1,96) et il viole en plus
   la regle 2 (UN SEUL accent) : on le ramene donc au bleu du theme. */
:root {
  --ssa-warn-texte: #8a6100;   /* ambre LISIBLE en texte (la pastille garde #f4b51e) */
  --ssa-ok-texte:   #2d7a1b;   /* vert LISIBLE en texte (la pastille garde #42a425) */
}
.text-warning:not(.fa):not(.fas):not(.far) { color: var(--ssa-warn-texte) !important; }
.text-info:not(.fa):not(.fas):not(.far)    { color: var(--ssa-bleu-texte)  !important; }
.text-success:not(.fa):not(.fas):not(.far) { color: var(--ssa-ok-texte)    !important; }
/* Les PASTILLES rondes, elles, gardent la couleur exacte de la regle 7 :
   ce sont des formes pleines, pas du texte — leur lisibilite n'est pas en jeu. */
.fa-circle.text-warning, i.text-warning { color: var(--ssa-warn) !important; }
.fa-circle.text-success, i.text-success { color: var(--ssa-ok)   !important; }


/* ── 29.3  PAGINATION DATATABLES : « PRECEDENT / SUIVANT » FANTOMES ───────
   DataTables grise les boutons inactifs en #9aa3af (ratio 2,55). Sur 13 pages
   a tableau, « Precedent » etait donc illisible. Le gris du theme (#767676)
   dit la meme chose — « ce bouton ne fait rien pour l'instant » — mais reste
   lisible. */
.dataTables_paginate .page-item.disabled .page-link,
.dataTables_paginate .paginate_button.disabled .page-link,
.dataTables_paginate .page-link { color: var(--ssa-faible) !important; }
.dataTables_paginate .page-item.active .page-link {
  background: var(--ssa-bleu) !important;
  border-color: var(--ssa-bleu) !important;
  color: var(--ssa-blanc) !important;
}


/* ── 29.4  LES PASTILLES « -subtle » DE BOOTSTRAP ─────────────────────────
   `bg-primary-subtle` / `bg-success-subtle` posent un fond pastel colore avec
   un texte de la meme teinte : ratio 2,46 a 2,52, et surtout une pastille
   COLOREE, ce que la regle 7 proscrit (« pas de pastilles multicolores »).
   CORRECTIF : fond gris neutre du theme, texte fonce. Le statut reste lu — il
   est simplement dit par le TEXTE, comme dans SSA. */
.badge[class*="-subtle"] {
  background: var(--ssa-gris-clair) !important;
  color: var(--ssa-texte) !important;
  border: 1px solid var(--ssa-bordure) !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
}


/* ── 29.5  ZONES JADIS FONCEES, DEVENUES CLAIRES ──────────────────────────
   LE MECANISME DU DEFAUT : le theme reaffecte `--navy` au gris clair #f3f3f3
   (voir « Rebranchement des variables heritees »). Tout ce qui etait un
   bandeau bleu nuit devient donc clair — c'est voulu. Mais le HTML de ces
   bandeaux porte des classes `text-white` / `text-white-50` ecrites pour un
   fond FONCE : le texte blanc devient alors blanc sur blanc.
   Constate sur documents.html (ratio 1,05) et parametres.html (1,08).
   CORRECTIF : dans ces conteneurs precis, le blanc redevient un gris du theme. */
.card-header-navy,
.bg-navy:not(.navbar),
.ork-premium-tree__head {
  color: var(--ssa-texte) !important;
}
.card-header-navy .text-white-50,
.card-header-navy small,
.bg-navy:not(.navbar) .text-white-50,
.ork-premium-tree__head .text-white-50,
.ork-premium-tree__head small { color: var(--ssa-label) !important; }

/* La page d'accueil `index.html` a son propre bandeau `.hero`, dessine par un
   degrade qui partait de `--navy`. Le degrade reste sombre a gauche tandis que
   le titre, lui, a pris le #333 du theme : titre fonce sur fond fonce.
   On aligne le bandeau sur la grammaire du theme — un en-tete CLAIR, filet du
   bas, texte fonce — plutot que d'y remettre du blanc. */
.hero {
  background: var(--ssa-gris-clair) !important;
  border-bottom: 1px solid var(--ssa-bordure);
  color: var(--ssa-texte) !important;
}
.hero h1, .hero h1 span, .hero p { color: var(--ssa-texte) !important; }
.hero .text-white-50, .hero p { color: var(--ssa-label) !important; }


/* ── 29.6  LES PAGES « FICHE » (objet-shell.js) — CORRECTIFS GENERIQUES ───
   Trois pages partagent la meme coquille, batie par `objet-shell.js` /
   `objet-form.js` : `table-record-detail.html`, `compta-compte-detail.html`,
   `compta-ecriture-detail.html` (et les fiches `*-detail.html` qui la
   reutilisent). Deux defauts s'y voyaient a l'oeil.

   (a) LES BOUTONS DU BANDEAU SE CHEVAUCHAIENT. Ces pages n'ont pas la zone de
       recherche centrale ; leur groupe de boutons « Retour / Enregistrer » est
       un simple `.d-flex` sans `flex-shrink: 0`. Dans un conteneur
       `flex-nowrap`, il se laissait donc comprimer a 82 px et les libelles
       debordaient l'un sur l'autre. On lui interdit de retrecir.
   (b) LES PANNEAUX « SYNTHESE / HISTORIQUE / LIENS » restaient BLEU ARDOISE
       (#3c5874, ecrit en dur dans shared.css — fichier intouchable). Sur un
       ecran ou tout le reste est passe au gris clair, ils faisaient tache et
       violaient la regle 1 (en-tetes de panneau sur le gris #f3f3f3). */

/* (a) Le groupe d'actions du bandeau ne retrecit plus. */
.navbar .container-fluid > .d-flex:last-child { flex: 0 0 auto; }
.navbar .btn-navlt { white-space: nowrap; }
.navbar .ssa-marque { flex: 0 1 auto; min-width: 0; }

/* (b) L'en-tete de carte de synthese prend le gris des en-tetes de panneau. */
.ork-summary-card__head {
  background: var(--ssa-gris-clair) !important;
  color: var(--ssa-texte) !important;
  border-bottom: 1px solid var(--ssa-bordure);
  border-radius: 0 !important;
}
.ork-summary-card__head i,
.ork-summary-card__head .text-white-50 { color: var(--ssa-label) !important; }
.ork-summary-card {
  border: 1px solid var(--ssa-bordure) !important;
  border-radius: var(--ssa-rayon-panneau) !important;
  box-shadow: none !important;
}

/* (a-bis) LE VRAI COUPABLE DU CHEVAUCHEMENT. La regle 26.F donne aux boutons
   du bandeau une taille CARREE de 30x30 avec `padding: 0` : parfait pour les
   boutons a ICONE SEULE du bandeau standard (aide, cloche, engrenage). Mais
   les pages « fiche » y mettent des boutons A LIBELLE (« Retour »,
   « Enregistrer ») : le texte debordait d'une boite de 30 px et les deux mots
   se chevauchaient.
   CORRECTIF : 30 px devient un MINIMUM, pas une largeur fixe. Un bouton a
   icone seule reste exactement carre (son contenu ne fait que 14 px, donc le
   minimum s'applique) ; un bouton a libelle s'elargit et retrouve son padding.
   Une seule regle sert donc les deux cas, sans distinguer les pages. */
.navbar .btn-navlt {
  width: auto;
  min-width: 30px;
  padding: 0 6px !important;
  gap: 5px;
  flex: 0 0 auto;
}


/* ==========================================================================
   30. ITERATION 11 (v7) — LES 5 DERNIERS DEFAUTS + LES PASTILLES D'ALERTE
   ==========================================================================
   Bloc ADDITIF : rien n'est retire des sections 1 a 29 ci-dessus.

   POURQUOI UNE SECTION DE PLUS PLUTOT QUE DES <style> DANS LES PAGES : les
   memes regles servent plusieurs pages (la pastille d'alerte vit dans
   `eleves.html` ET dans `eleve-detail.html` ; la carte de formulaire vit dans
   les TROIS pages « fiche »). Une regle ecrite ici vaut pour toutes, et une
   page ajoutee demain en herite sans rien recopier.

   30.1  Cartes de formulaire des pages « fiche » : le titre de section ne
         chevauche plus les champs                        (defauts 1 et 2)
   30.2  Pastille d'alerte des eleves                     (demande B)
   30.3  Bulletin : la barre « Moyenne generale » porte un SENS  (defaut 3)
   30.4  Achats : le bouton de ligne DESTRUCTIF aligne sur la palette (defaut 4)
   30.5  Saisie et affichage des notes : la case « Absent » et la mention
         « Abs. »                                         (adaptation C.1)
   ========================================================================== */


/* -- 30.1  CARTES DE FORMULAIRE : PLUS AUCUN CHEVAUCHEMENT ----------------
   LE DEFAUT (constate a l'oeil sur les 3 pages « fiche ») : « Informations
   principales », « Details metier », « Notes et pieces jointes » se
   superposaient aux libelles des champs juste dessous, et leur icone etait
   COLLEE au mot.

   LA CAUSE, trouvee en cherchant `.ork-form-card` dans TOUTES les feuilles :
   cette classe n'est definie NULLE PART — ni dans shared.css, ni ici. Le HTML
   l'utilise depuis toujours, mais aucune regle ne lui a jamais donne de
   padding ni de marge. `.ork-form-card__head` etait donc un simple <div> sans
   hauteur propre, pose a ras des champs. Et `.ork-field > span` (le libelle)
   n'etait pas stylise non plus : shared.css ne connait que
   `.ork-field .form-label`, une autre ecriture.

   LE CORRECTIF : on definit enfin ces classes, dans la grammaire du theme —
   un panneau blanc borde, un en-tete GRIS #f3f3f3 de la meme hauteur que tous
   les autres en-tetes de bloc (variable `--ssa-h-entete-bloc`, regle 23), et
   un corps qui respire. L'icone est ecartee du mot par un `gap`. */
.ork-form-card {
  background: var(--ssa-blanc);
  border: 1px solid var(--ssa-bordure);
  border-radius: var(--ssa-rayon-panneau);
  margin-bottom: var(--ssa-pas);
  overflow: hidden;             /* l'en-tete gris epouse l'arrondi du panneau */
}

.ork-form-card__head {
  display: flex;
  align-items: center;
  gap: 8px;                     /* c'est CE gap qui decolle l'icone du mot */
  min-height: var(--ssa-h-entete-bloc, 40px);
  padding: 0 12px;
  background: var(--ssa-gris-clair);
  border-bottom: 1px solid var(--ssa-bordure);
  color: var(--ssa-texte);
  font-weight: 600;
  font-size: 12px;
}
.ork-form-card__head i { color: var(--ssa-label); font-size: 12px; }

/* Le corps : c'est le padding qui manquait. Sans lui, la 1re rangee de champs
   demarrait exactement sur la ligne du titre — d'ou le chevauchement vu. */
.ork-form-card .ork-form-grid { padding: 12px; }

/* Le libelle du champ. `.ork-field` est un <label> ; son <span> etait inline,
   donc il se posait SUR la meme ligne que le champ au lieu de le surmonter.
   `display: block` le remet au-dessus, et c'est fini. */
.ork-field > span {
  display: block;
  margin-bottom: 4px;
  color: var(--ssa-label);
  font-size: 11px;
  font-weight: 600;
}


/* -- 30.2  LA PASTILLE D'ALERTE DES ELEVES --------------------------------
   DEMANDE DE LECK : « comme les messages d'etat de SSA ». Dans SSA, un etat
   n'est jamais une grosse etiquette coloree : c'est un petit POINT rond pose
   a cote du libelle (regle 7 du theme).

   CE QU'ELLE MONTRE : le champ `alertes.niveau` calcule par l'API
   (GET /api/eleves et GET /api/mes-enfants). RIEN n'est calcule ici — le
   front ne fait que traduire un niveau en couleur.
       ok        -> AUCUNE pastille n'est posee (voir plus bas : pourquoi)
       attention -> ambre  #f4b51e
       critique  -> rouge  #dc442f

   POURQUOI RIEN DU TOUT POUR « ok » : sur le banc, 130 eleves sur 200 sont
   « ok ». Poser un point vert sur les deux tiers d'une liste, c'est du bruit :
   l'oeil ne verrait plus les 70 qui comptent. Un signal ne vaut que par sa
   RARETE. L'absence de pastille EST l'information « rien a signaler ».

   TAILLE : 8 px, soit la moitie d'une majuscule du texte a 12 px. C'est un
   SIGNAL, pas une decoration : il ne doit pas concurrencer le nom. */
.ssa-alerte {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;           /* la SEULE exception a « SSA est carre » :
                                   la regle 7 dit explicitement « pastille
                                   RONDE ». */
  margin-left: 6px;
  vertical-align: middle;
  flex: 0 0 auto;               /* dans un conteneur flex, elle ne s'ecrase pas */
}
.ssa-alerte--attention { background: var(--ssa-warn); }
.ssa-alerte--critique  { background: var(--ssa-erreur); }


/* -- 30.3  BULLETIN : LA BARRE « MOYENNE GENERALE » PORTE UN SENS ---------
   LE DEFAUT : la barre de mention sous la moyenne generale etait VERTE
   PLEINE quoi qu'il arrive — un eleve a 4/20 avait la meme barre verte qu'un
   eleve a 18/20. La couleur ne disait rien, elle decorait.

   LE CORRECTIF : la barre prend la couleur de l'ETAT, avec EXACTEMENT les
   memes seuils que les pastilles d'alerte ci-dessus (30.2), qui sont ceux du
   serveur (EleveController::SEUILS) :
       moyenne >= 10  -> vert   #42a425
       moyenne <  10  -> ambre  #f4b51e
       moyenne <   8  -> rouge  #dc442f
   POURQUOI LES MEMES SEUILS : un eleve dont la pastille est orange dans la
   liste ne doit pas avoir une barre verte sur son bulletin. Deux ecrans qui
   parlent de la meme chose doivent le dire pareil, sinon on ne sait plus
   lequel croire.

   LA COULEUR DU TEXTE CHANGE AVEC LE FOND, et ce n'est pas un caprice :
   l'ambre #f4b51e ne donne que 1,83 de contraste avec du blanc (regle 25.b —
   c'est une couleur de PASTILLE, pas de fond de texte). Sur ambre le texte
   passe donc en fonce (ratio 11,5) ; sur vert et sur rouge il reste blanc
   (3,20 et 4,28 — au-dessus du seuil de 3,0 de notre audit). */
.badge.ssa-etat-ok        { background: var(--ssa-ok) !important;     color: #ffffff !important; }
.badge.ssa-etat-attention { background: var(--ssa-warn) !important;   color: #3a2c00 !important; }
.badge.ssa-etat-critique  { background: var(--ssa-erreur) !important; color: #ffffff !important; }

/* Le GRAND CHIFFRE de la moyenne suit la meme couleur d'etat que la barre —
   mais en version TEXTE. L'ambre plein y serait illisible (1,83) : on reprend
   donc l'ambre fonce deja calibre en 29.2 pour le texte. */
.ssa-moy-ok        { color: #2d7a1b !important; }   /* vert fonce, ratio 5,0 */
.ssa-moy-attention { color: #8a6100 !important; }   /* ambre fonce, ratio 5,5 */
.ssa-moy-critique  { color: #b8341f !important; }   /* rouge fonce, ratio 5,9 */

/* Le compteur d'evaluations NON PASSEES (adaptation C.2). Ce n'est pas une
   alerte : c'est un avertissement de LECTURE (« la moyenne ne porte pas sur
   toutes les evaluations »). Il reste donc discret, en gris. */
.ssa-non-passees { color: var(--ssa-label); font-size: 11px; }


/* -- 30.4  ACHATS : LE BOUTON DE LIGNE DESTRUCTIF -------------------------
   LA QUESTION LAISSEE OUVERTE EN v6 : le bouton « Refuser » d'une demande
   d'achat est ROUGE PLEIN, alors que la regle 5 veut des boutons SANS bordure,
   en bleu pale.

   LA REPONSE : le rouge RESTE. La regle 5 decrit la grammaire des boutons
   ORDINAIRES ; refuser une demande est une action NEGATIVE et IRREVERSIBLE
   pour le demandeur — la signaler autrement serait mentir a l'utilisateur.
   SSA lui-meme peint en rouge « Delete logical drive ». Ce qui etait fautif,
   ce n'est pas la couleur, c'est la BORDURE : elle contredisait la regle 5.

   CORRECTIF : rouge de la palette (#dc442f), AUCUNE bordure, comme tous les
   boutons du theme. Le survol fonce, il ne change pas de teinte.

   CE QUE CETTE REGLE NE TOUCHE PAS, ET POURQUOI : les petites ICONES d'action
   de ligne (`.ork-row-action.del`, la corbeille des tableaux) gardent leur
   traitement d'origine — transparentes, rouges SEULEMENT AU SURVOL (sections
   22 et 26.F). Ce n'est pas un oubli : une colonne de 25 carres rouges pleins
   sur une page de liste serait du bruit, pas un avertissement, et l'oeil
   cesserait de le voir — exactement le raisonnement de la regle 26 sur les
   pastilles. Le rouge PLEIN est reserve aux boutons de DECISION, ceux qu'on
   clique une fois et qui engagent. */
.ork-actions .btn-outline-danger,
.ork-actions .btn-danger,
.table .btn-outline-danger,
.table .btn-danger {
  background: var(--ssa-erreur-fond-actif) !important;
  color: #ffffff !important;
  border: 0 !important;         /* LE correctif : plus aucune bordure */
  border-radius: var(--ssa-rayon) !important;
  box-shadow: none !important;
}
.ork-actions .btn-outline-danger:hover,
.ork-actions .btn-danger:hover,
.table .btn-outline-danger:hover,
.table .btn-danger:hover {
  background: #b8341f !important;
  color: #ffffff !important;
}


/* -- 30.5  NOTES : LA CASE « ABSENT » ET LA MENTION « Abs. » --------------
   ADAPTATION RENDUE NECESSAIRE PAR LA MIGRATION 011 DE L'API : le champ
   `valeur` d'une note peut desormais valoir NULL, et un drapeau `est_absent`
   dit pourquoi. Une evaluation NON PASSEE n'est pas un zero — l'afficher
   « 0/20 » serait une erreur de fond, pas de style.

   La mention « Abs. » remplace la note. Elle est en gris et en italique :
   ce n'est pas un resultat, c'est une absence de resultat. */
.ssa-abs {
  color: var(--ssa-label);
  font-style: italic;
  font-weight: normal;
}

/* La case a cocher « Absent » de la grille de saisie. Elle DESACTIVE le champ
   de note de sa ligne : on ne peut pas etre absent ET avoir une note. */
.ssa-absent-case {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  color: var(--ssa-label);
  font-size: 11px;
  cursor: pointer;
}
.ssa-absent-case input { margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   31. LE CANON DES BOUTONS — UNE SEULE HAUTEUR, UN SEUL ARRONDI
   (bloc ADDITIF du 2026-07-24 ; rien n'est retire au-dessus)

   CONSTAT DE LECK : « certains boutons ne sont pas au canon, d'autres ont des
   hauteurs plus larges que les autres. La largeur peut differer selon le
   libelle, mais la hauteur, les arrondis et les couleurs devraient etre au
   canon. » Exemples cites : « Importer » / « Exporter », et « Precedent » /
   « Suivant » de la page eleves.

   CE QUE LA MESURE DANS LE CODE A DONNE :
     - bouton ordinaire (section 29) : padding 6px 12px + texte 14px ;
     - bouton .btn-sm               : padding 4px 10px + texte 12px.
   Deux hauteurs, donc, selon qu'une page a ecrit `btn-sm` ou non. « Importer »
   et « Exporter » (table-canon.js) n'ont PAS `btn-sm`, les outils de la MEME
   barre l'ont : d'ou le decrochement visible.

   LA CAUSE PROFONDE : la regle 23 avait deja resolu ce probleme pour les
   EN-TETES de bloc en leur donnant UNE variable commune, --ssa-h-entete-bloc.
   Rien d'equivalent n'existait pour les boutons : leur hauteur etait le
   RESULTAT d'un calcul (padding + taille du texte), elle changeait donc des
   que l'un des deux bougeait. On applique ici la meme solution : une hauteur
   DECLAREE, a un seul endroit.

   CE QUI RESTE LIBRE, ET C'EST VOULU : la LARGEUR. Elle depend du libelle.
   Seules la hauteur, la forme et les couleurs sont au canon.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* La hauteur de TOUS les boutons. La changer ici les fait bouger ENSEMBLE. */
  --ssa-h-btn: 28px;
}

/* 31.1 — UNE SEULE HAUTEUR POUR TOUS LES BOUTONS.
   `min-height` et non `height` : un bouton dont le libelle passe a la ligne
   doit pouvoir grandir plutot que de rogner son texte.
   Le centrage flex remplace le calage par padding vertical — d'ou la remise a
   zero de ce padding juste apres : sans elle, les deux s'ADDITIONNERAIENT et
   le bouton serait plus haut que la valeur declaree. */
.btn,
.page-context-actions .btn,
.card-header .btn, .card-header-navy .btn,
.modal-footer .btn, .modal-body .btn,
.table-toolbar .btn, .ork-grid-toolbar .btn,
.ork-table-card .ork-grid-toolbar .ork-tool,
.ork-context-filter__reset {
  min-height: var(--ssa-h-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;               /* decolle l'icone de son libelle */
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}

/* 31.2 — `.btn-sm` NE CHANGE PLUS LA HAUTEUR, seulement la densite du texte.
   POURQUOI garder une difference : une barre d'outils dense reste plus lisible
   avec un texte legerement plus petit. Ce qui ne doit PLUS varier, c'est la
   hauteur — c'est elle que l'oeil compare d'un bouton a l'autre. */
.btn-sm, .page-context-actions .btn-sm {
  min-height: var(--ssa-h-btn);
  padding-top: 0;
  padding-bottom: 0;
}

/* 31.3 — L'ARRONDI « PIANO » SURVIT AUX GROUPES DE BOUTONS.
   PIEGE TROUVE : `orkPagination` (ork-charger-helpers.js) enveloppe
   « Precedent » et « Suivant » dans un `.btn-group`. Or Bootstrap impose ses
   PROPRES rayons aux enfants d'un groupe — carres au milieu, arrondis aux
   extremites — avec une specificite superieure a la notre. Ces deux boutons
   sortaient donc du canon sans qu'aucune page ne l'ait demande.
   On reimpose le rayon a 2 coins opposes A L'INTERIEUR des groupes. */
.btn-group > .btn,
.btn-group-sm > .btn,
.btn-group > .btn:first-child,
.btn-group > .btn:last-child,
.btn-group > .btn:not(:first-child),
.btn-group > .btn:not(:last-child) {
  border-radius: 0 var(--ssa-rayon-panneau) 0 var(--ssa-rayon-panneau) !important;
}
/* Un `.btn-group` colle ses boutons bord a bord ; le canon les veut espaces
   comme toute autre barre d'action (meme `gap` de 5 px que `.ssa-actions`). */
.btn-group, .btn-group-sm { gap: 5px; }
.btn-group > .btn + .btn { margin-left: 0 !important; }

/* 31.4 — LES BOUTONS EN ICONE SEULE RESTENT CARRES (regle 21).
   Rappel du piege de la regle 25.f : 30 px etait une largeur FIXE, ce qui
   ecrasait les boutons portant un libelle. Ici la largeur minimale vaut la
   hauteur : un bouton sans texte est donc CARRE, un bouton avec texte
   s'elargit tout seul. */
.ssa-liste__filtre-boutons .btn {
  min-width: var(--ssa-h-btn);
  padding-left: 0;
  padding-right: 0;
}

/* 31.5 — AUCUN SOULIGNEMENT SUR CE QUI SE CLIQUE COMME UN BOUTON.
   CONSTAT DE LECK : « pourquoi les labels sont soulignes ? Le canon de SSA ne
   fonctionne pas comme ca. » Cites : « Eleves », « Parents », « Classes »
   soulignes au survol — mais PAS « Precedent » / « Suivant ».

   LA CAUSE, ET C'EST LE THEME LUI-MEME (ligne 120) :
       a:hover { text-decoration: underline; }
   Cette regle vise TOUS les liens. Or dans cette application, beaucoup
   d'elements qui se PRESENTENT comme des boutons sont ecrits avec une balise
   <a> : les entrees du rail (`.sidebar-link`), les onglets (`.nav-link`), les
   actions de ligne des tableaux, les entrees de menu deroulant. Ils heritaient
   donc du soulignement. « Precedent » et « Suivant » y echappaient pour une
   raison sans rapport avec le style : ce sont de vrais <button>.
   C'est exactement le genre d'incoherence que l'oeil remarque sans pouvoir la
   nommer — deux elements identiques a l'ecran ne se comportent pas pareil.

   LA REGLE : le soulignement appartient au lien de TEXTE (celui qu'on lit dans
   une phrase et qu'il faut distinguer du texte autour). Un bouton, un onglet ou
   une entree de menu se signale par son FOND — c'est la grammaire de SSA
   (regle 3 : survol = fond gris ; regle 5 : survol = bleu plein). Jamais par un
   trait sous le mot.
   On ne TOUCHE PAS la ligne 120 : elle reste juste pour les vrais liens de
   texte. On en EXCLUT ce qui se clique comme un bouton. */
a.btn:hover, a.btn:focus,
.sidebar-link:hover, .sidebar-link:focus,
.nav-link:hover, .nav-link:focus,
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus,
.dropdown-item:hover, .dropdown-item:focus,
.navbar a:hover, .navbar a:focus,
.ork-row-action:hover, .ork-row-action:focus,
.btn-icon:hover, .btn-icon:focus,
.ssa-liste__filtre-boutons .btn:hover,
.page-context-actions a.btn:hover,
.ork-object-actions a:hover,
.stat-card a:hover, .card a.btn:hover {
  text-decoration: none !important;
}

/* 31.6 — LES VARIANTES OUBLIEES : PLUS AUCUN BOUTON HORS CANON.
   Un recensement de TOUTES les combinaisons de classes reellement utilisees
   (53 distinctes, pages HTML *et* fichiers JS qui fabriquent du HTML) a montre
   que trois variantes n'etaient traitees NULLE PART dans le theme :
       .btn-outline-success   10 boutons  -> restaient VERTS a bordure
       .btn-outline-warning    6 boutons  -> restaient AMBRE a bordure
       .btn-lg                 1 bouton   -> hauteur Bootstrap, hors canon
   Elles echappaient donc a la fois a la regle 2 (UN SEUL accent : le bleu) et
   a la regle 5 (aucune bordure).

   POURQUOI LE VERT ET L'AMBRE DEVIENNENT BLEUS, et non une exception de plus :
   la seule exception admise par le canon est le ROUGE destructif (regle 27),
   parce qu'un refus est une decision irreversible et que l'avertissement y a un
   sens. « Valider » et « Avertir » ne sont pas des actions destructrices : ce
   sont des actions ordinaires, elles prennent donc la grammaire ordinaire.
   Rappel de la regle 25.b : cet ambre est fait pour une PASTILLE, pas pour un
   bouton — en fond de texte il tombe a 1,83 de contraste. */
.btn-outline-success, .btn-outline-warning, .btn-outline-info,
.btn-success, .btn-warning, .btn-info {
  background: var(--ssa-bleu-pale) !important;
  border: 0 !important;
  color: var(--ssa-bleu-texte) !important;
  font-weight: 700 !important;
}

/* EXCEPTION ASSUMEE ET DECLAREE : le grand bouton d'action pleine largeur
   (« Connexion »). Lui imposer les 28 px des barres d'outils donnerait un
   bouton ridiculement plat sur une page qui ne contient que lui. Sa hauteur est
   donc DECLAREE elle aussi — c'est une deuxieme valeur, pas une absence de
   regle : elle se change ici, a un seul endroit, comme --ssa-h-btn. */
:root { --ssa-h-btn-lg: 38px; }
.btn-lg {
  min-height: var(--ssa-h-btn-lg);
  padding-top: 0;
  padding-bottom: 0;
  font-size: 15px;
}

/* 31.7 — « IMPORTER » / « EXPORTER » : LA CASCADE, PAS LE CANON.
   Constat de Leck apres la v=15 : ces deux boutons n'ont toujours ni la bonne
   hauteur, ni le bon fond, ni la bonne police.
   LA CAUSE, MESUREE : `shared.css` ligne 1469 ecrit
       .ork-table-card .ork-table-footer-tools .btn { min-height: 32px;
         padding: .38rem .72rem; color: #0a6ed1 !important;
         background: #fff !important; border-color: #0a6ed1 !important; }
   Sa specificite est de 0,3,0 (trois classes) et il pose des `!important`.
   Notre regle 31.1 vise `.btn` : 0,1,0. shared.css l'emporte donc TOUJOURS,
   et le bouton reste blanc a bordure bleue, haut de 32 px au lieu de 28.
   C'est le piege deja rencontre en section 29 : « shared.css les rhabille via
   des selecteurs plus specifiques que les notres ».
   LA PARADE : viser EXACTEMENT le meme selecteur. A specificite egale, c'est la
   feuille chargee en DERNIER qui gagne — et le theme est charge apres
   shared.css (c'est la regle de pose du theme). */
.ork-table-card .ork-table-footer-tools .btn {
  min-height: var(--ssa-h-btn) !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--ssa-bleu-texte) !important;
  background: var(--ssa-bleu-pale) !important;
  border: 0 !important;
  border-radius: 0 var(--ssa-rayon-panneau) 0 var(--ssa-rayon-panneau) !important;
}
.ork-table-card .ork-table-footer-tools .btn:hover,
.ork-table-card .ork-table-footer-tools .btn:focus {
  color: var(--ssa-blanc) !important;
  background: var(--ssa-bleu) !important;
}

/* 31.8 — LA PAGINATION EN ENTIER, PAS SEULEMENT SES DEUX EXTREMITES.
   Constat de Leck : « les boutons ENTRE Suivant et Precedent ne sont pas au
   canon ; sur certaines pages ils ont encore l'ancienne couleur ».
   IL Y A DEUX PAGINATIONS DIFFERENTES DANS L'APPLICATION, et c'est la source
   de la confusion :
     1. celle d'`orkPagination` (ork-charger-helpers.js) : de vrais <button>
        dans un `.btn-group` -> deja traitee en 31.3 ;
     2. celle de DataTables / Bootstrap : des `.page-link` dans `.pagination`,
        qui ne sont PAS des `.btn` — aucune de nos regles sur `.btn` ne les
        atteignait. Ce sont EUX, les « boutons du milieu » : les NUMEROS de page.
   L'ANCIENNE COULEUR vient de `shared.css` ligne 95 :
       .pagination .page-item.active .page-link { background: #2c8ef0; }
   Le theme ne corrigeait que le cas `.dataTables_paginate` (section 29.3) :
   toute pagination hors DataTables gardait donc le bleu vif d'origine.
   On traite ici `.pagination` DANS TOUS LES CAS. */
.pagination .page-link,
.dataTables_paginate .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button {
  min-height: var(--ssa-h-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px !important;
  margin: 0 3px !important;
  font-size: 12px;
  font-weight: 700;
  border: 0 !important;
  border-radius: 0 var(--ssa-rayon-panneau) 0 var(--ssa-rayon-panneau) !important;
  background: var(--ssa-bleu-pale) !important;
  color: var(--ssa-bleu-texte) !important;
}
/* La page COURANTE : bleu plein, comme une action principale (regle 5). */
.pagination .page-item.active .page-link,
.dataTables_paginate .page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--ssa-bleu) !important;
  color: var(--ssa-blanc) !important;
}
/* Un bouton DESACTIVE ne se peint pas comme un bouton actif : fond neutre et
   texte gris lisible (section 29.3), sans quoi « Precedent » sur la page 1
   invite a un clic qui ne fait rien. */
.pagination .page-item.disabled .page-link,
.dataTables_paginate .page-item.disabled .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  background: var(--ssa-gris-clair) !important;
  color: var(--ssa-faible) !important;
}
.pagination .page-link:hover,
.dataTables_paginate .page-link:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--ssa-bleu) !important;
  color: var(--ssa-blanc) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   31.9  LES DERNIERS ECARTS, MESURES SUR LE SERVEUR REEL (2026-07-24)
   ══════════════════════════════════════════════════════════════════════════
   Cette fois les valeurs ne sont pas supposees : elles sont RELEVEES au
   navigateur sur SRV-DEV-003, page eleves.html, onglet Absences :

       pagination (page-link)        34,0 px   <- attendu 28
       Colonnes / Filtre av. / Ajouter 26,0 px <- attendu 28
       Importer / Exporter           28,0 px   OK (corrige en 31.7)
       page ACTIVE                   rgb(10,110,209) <- attendu le bleu du canon

   POURQUOI LES REGLES 31.8 N'ONT PAS SUFFI — la specificite, encore :
       shared.css l.731  .ork-table-card .pagination .page-link   -> 0,3,0
       notre 31.8        .pagination .page-link                   -> 0,2,0
   shared.css imposait `height: 34px` (une hauteur FIXE, pas un minimum) et
   notre `min-height` ne pouvait rien contre elle. Meme histoire pour les
   boutons d'outils, habilles par `.ork-table-card .tt-actions .btn` (0,3,0).
   On vise donc les MEMES selecteurs, et on force la hauteur des deux cotes
   (`height` ET `min-height`) : contre une hauteur fixe, un minimum ne suffit pas.
   ══════════════════════════════════════════════════════════════════════════ */

/* La pagination du canon : meme hauteur et memes couleurs que les autres boutons. */
.ork-table-card .pagination .page-link,
.ork-table-card .dataTables_paginate .page-link,
.ork-table-card .pagination .paginate_button {
  height: var(--ssa-h-btn) !important;
  min-height: var(--ssa-h-btn) !important;
  padding: 0 10px !important;
  margin: 0 3px !important;
  font-size: 12px !important;
  background: var(--ssa-bleu-pale) !important;
  color: var(--ssa-bleu-texte) !important;
  border: 0 !important;
  border-radius: 0 var(--ssa-rayon-panneau) 0 var(--ssa-rayon-panneau) !important;
}
/* La page COURANTE : bleu plein. shared.css l.748 posait ici un #19aee6 en
   !important — il faut donc au moins autant de specificite ET un !important. */
.ork-table-card .pagination .page-item.active .page-link,
.ork-table-card .pagination .paginate_button.current {
  background: var(--ssa-bleu) !important;
  color: var(--ssa-blanc) !important;
}
/* DESACTIVE : fond neutre, texte gris lisible — il ne doit pas inviter au clic. */
.ork-table-card .pagination .page-item.disabled .page-link,
.ork-table-card .pagination .paginate_button.disabled {
  background: var(--ssa-gris-clair) !important;
  color: var(--ssa-faible) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   32. LES BANDEAUX KPI RETROUVENT LEURS COULEURS (essai demande par Leck)
   ══════════════════════════════════════════════════════════════════════════
   Demande du 2026-07-24 : « remettre les couleurs sur les KPI du tableau de
   bord — le bleu, le vert, le rouge bordeaux et le marron — pour voir ce que
   ca donne ». Valeurs RELEVEES dans la maquette de reference
   (`.BackUp-Files\maquette\dashboard.html`, style local l.338-378), pas
   reinventees : ce sont exactement celles de la capture fournie.

   ⚠ ECART ASSUME AVEC LA REGLE 2 DU CANON (« un seul accent : le bleu »).
   C'est un ESSAI visuel demande par Leck, pas un abandon du canon. Deux
   raisons de le documenter ici plutot que de le refuser :
     - la bande KPI est un bandeau d'en-tete, pas un composant reutilise
       ailleurs : la coloration y reste circonscrite a un seul ecran ;
     - le texte est BLANC sur des fonds volontairement FONCES, donc le
       contraste reste bon (verifie ci-dessous), contrairement aux pastilles
       pastel que la regle 25.d avait du corriger.
   Si l'essai n'est pas retenu, il suffit de supprimer CE bloc : rien d'autre
   n'en depend.
   ══════════════════════════════════════════════════════════════════════════ */

.dashboard-kpi-panel {
  --panel: #174f7f;          /* bleu — panneau par defaut */
  --ring: #14a8db;
  color: var(--ssa-blanc) !important;
  background: var(--panel) !important;
}
.dashboard-kpi-panel:nth-child(even) {
  --panel: #141052;          /* bleu nuit — alternance */
  --ring: #10a9d7;
}
.dashboard-kpi-panel.is-success {
  --panel: #145c58;          /* vert profond — recouvrement */
  --ring: #48d0bd;
}
.dashboard-kpi-panel.is-warning {
  --panel: #594512;          /* marron — ressources humaines */
  --ring: #f2b84b;
}
.dashboard-kpi-panel.is-danger {
  --panel: #64263a;          /* bordeaux — exceptions et risques */
  --ring: #ef6c87;
}

/* Le texte du bandeau redevient clair : le theme l'avait passe en gris fonce
   pour un fond clair. Sur ces fonds sombres il serait illisible — c'est
   exactement le defaut « texte fantome » que l'audit traque (regle 25.e). */
.dashboard-kpi-panel h3,
.dashboard-kpi-panel strong,
.dashboard-kpi-panel span,
.dashboard-kpi-panel .dashboard-kpi-row,
.dashboard-kpi-panel .dashboard-kpi-foot {
  color: var(--ssa-blanc) !important;
}

/* L'ANNEAU REDEVIENT COLORE SUR LES BANDEAUX COLORES.
   CONSTAT (capture du serveur, 2026-07-24) : les cinq anneaux — 367, 80 %, 34,
   42, 19 — s'affichaient en GRIS TERNE alors que la maquette de reference les
   montre colores (bleu clair, vert menthe, ambre, rose).
   POURQUOI : le theme redessine l'anneau a TROIS endroits (l.1271, 1273, 1654),
   avec des valeurs pensees pour une carte BLANCHE :
       partie vide  -> var(--ssa-bordure)     (gris)
       centre       -> var(--ssa-gris-clair)  (gris clair)
       chiffre      -> var(--ssa-bleu)        (bleu)
   Pose sur un bandeau fonce, ce reglage donne un disque gris sur fond colore.
   On retablit ici la logique de la maquette d'origine : la portion vide est un
   BLANC TRANSLUCIDE (donc elle prend la teinte du bandeau qu'elle laisse voir),
   le centre reprend la couleur du panneau, et le chiffre repasse en blanc.
   `--ring` et `--panel` sont deja definis plus haut, par panneau : une seule
   ecriture suffit pour les cinq. */
.dashboard-kpi-panel .dashboard-kpi-ring {
  background: conic-gradient(var(--ring) calc(var(--pct) * 1%),
                             rgba(255, 255, 255, .18) 0) !important;
}
.dashboard-kpi-panel .dashboard-kpi-ring::before {
  background: var(--panel) !important;
}
.dashboard-kpi-panel .dashboard-kpi-ring strong {
  color: var(--ssa-blanc) !important;
}

/* LES CHIFFRES DES LIGNES SONT UNE EXCEPTION — TEXTE FONCE.
   Ils ne sont pas posés sur le fond sombre du bandeau : ils ont LEUR PROPRE
   pastille, remplie de la couleur d'anneau (claire). Les passer en blanc comme
   le reste donnait du blanc sur blanc — a l'ecran, des rectangles VIDES a la
   place des nombres. Defaut vu sur la capture, invisible pour la mesure de
   contraste qui ne regardait que les titres : la lecon est qu'il faut
   REGARDER l'image en plus de mesurer.
   Valeurs reprises telles quelles de la maquette de reference
   (`.BackUp-Files\maquette\dashboard.html`, `.dashboard-kpi-row b`). */
.dashboard-kpi-panel .dashboard-kpi-row b {
  color: #08263d !important;
  background: var(--ring) !important;
  border-radius: 10px !important;
  padding: .18rem .35rem !important;
  font-weight: 800 !important;
}
/* Les libelles secondaires : blanc legerement attenue, pour garder la
   hierarchie sans tomber sous le seuil de contraste. */
.dashboard-kpi-panel .dashboard-kpi-foot span,
.dashboard-kpi-panel .dashboard-kpi-label {
  color: rgba(255, 255, 255, .86) !important;
}

/* LES DEUX TITRES QUE LA REGLE CI-DESSUS NE COUVRAIT PAS.
   Mesure au navigateur apres la 1re pose des couleurs : tout le contenu des
   bandeaux etait bien blanc SAUF deux elements, restes aux gris du theme —
   contraste 1,35 a 1,95 sur les fonds sombres, donc ILLISIBLES :
       div.dashboard-kpi-title  rgb(102,102,102)  « Scolarité », « Alertes »…
       h5 (sans classe)         rgb(51,51,51)     « Élèves & inscriptions »…
   C'est exactement le defaut que l'audit de contraste traque : un texte prevu
   pour un fond CLAIR laisse sur un fond devenu SOMBRE. */
.dashboard-kpi-panel h5 {
  color: var(--ssa-blanc) !important;
}
.dashboard-kpi-panel .dashboard-kpi-title {
  /* Sous-titre : blanc attenue, il ne doit pas concurrencer le titre. */
  color: rgba(255, 255, 255, .82) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   33. LES TROIS DERNIERS ECARTS RELEVES SUR LES CAPTURES DU SERVEUR
   (2026-07-24, apres deploiement v=17)
   ══════════════════════════════════════════════════════════════════════════ */

/* 33.1 — « + AJOUTER » EN BLEU PLEIN, POUR DE BON.
   La regle posee plus haut (pres de la l.750) etait juste, mais la section 31.9
   contient `.ork-table-card .ork-grid-toolbar .btn` — MEME specificite (0,3,0),
   ecrite PLUS LOIN dans le fichier. A egalite, c'est la derniere lue qui gagne :
   le bleu pale reprenait donc le dessus, et « Ajouter » restait pale.
   Je me suis auto-ecrase — exactement le defaut reproche au theme.
   La regle est donc REPOSEE ICI, en fin de feuille, ou plus rien ne la suit.
   LECON A RETENIR : dans une feuille de 3 500 lignes, la specificite ne suffit
   pas a raisonner ; l'ORDRE compte autant. Mesurer, toujours. */
.ork-table-card .ork-grid-toolbar .ork-add,
.ork-table-card .tt-actions .ork-add {
  background: var(--ssa-bleu) !important;
  color: var(--ssa-blanc) !important;
}
.ork-table-card .ork-grid-toolbar .ork-add:hover,
.ork-table-card .tt-actions .ork-add:hover {
  background: var(--ssa-bleu-texte) !important;
  color: var(--ssa-blanc) !important;
}

/* 33.2 — LES BOUTONS D'ACTION DE PAGE A LA HAUTEUR DU CANON.
   Mesure : « Relancer les impayes » (page Frais de scolarite) sortait a 31 px
   quand tous les autres etaient a 28. Ces boutons vivent dans la barre de titre
   de la page (`.page-context-actions`), que les regles precedentes ne visaient
   pas explicitement. */
.page-context-actions .btn,
.page-context-actions a.btn,
.ork-page-actions .btn {
  height: var(--ssa-h-btn) !important;
  min-height: var(--ssa-h-btn) !important;
  padding: 0 12px !important;
  font-size: 12px !important;
}

/* 33.3 — LE CALENDRIER PASSE AU-DESSUS, PAS EN DESSOUS.
   CONSTAT (capture) : le calendrier ouvert sur « Date de fin » etait TRAVERSE
   par le bouton « Appliquer les filtres » — on lisait « uer les filtres » par
   dessus les jours du mois.
   POURQUOI : le calendrier est pose en `position: absolute` dans le bloc de
   filtre, mais aucun `z-index` ne le place au-dessus du pied de ce bloc. Sans
   z-index, c'est l'ordre du HTML qui tranche, et le bouton vient apres.
   1055 = au-dessus des elements de page, sous les modales Bootstrap (1055 est
   MESURE FAITE : le calendrier porte DEJA z-index 2000 — il est donc bien
   au-dessus, et lui imposer 1050 l'aurait AGGRAVE. Le chevauchement vu sur la
   capture vient d'ailleurs ; il est traite en 34.3, apres verification. */

/* Les boutons de la barre d'outils du tableau (Colonnes, Filtre avance,
   Ajouter, et les outils de `.tt-actions`) : mesures a 26 px, remis au canon. */
.ork-table-card .ork-add,
.ork-table-card .ork-tool,
.ork-table-card .ork-columns,
.ork-table-card .ork-open-filters,
.ork-table-card .ork-delete,
.ork-table-card .tt-actions .btn,
.ork-table-card .ork-grid-toolbar .btn {
  height: var(--ssa-h-btn) !important;
  min-height: var(--ssa-h-btn) !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  background: var(--ssa-bleu-pale) !important;
  color: var(--ssa-bleu-texte) !important;
  border: 0 !important;
  border-radius: 0 var(--ssa-rayon-panneau) 0 var(--ssa-rayon-panneau) !important;
}

/* « + AJOUTER » EST L'ACTION PRINCIPALE DU TABLEAU -> BLEU PLEIN (demande de
   Leck, 2026-07-24). Ecrit APRES la regle ci-dessus, avec la meme specificite :
   a egalite, c'est la derniere lue qui gagne — inutile de surencherir.
   POURQUOI cette exception est justifiee : sur un ecran de liste, « Ajouter »
   est l'action que l'utilisateur vient chercher ; « Colonnes » et « Filtre
   avance » ne font que regler l'affichage. La regle 5 du canon prevoit
   exactement cela : « Actions principales : bleu plein ». */
.ork-table-card .ork-add {
  background: var(--ssa-bleu) !important;
  color: var(--ssa-blanc) !important;
}

/* « SUPPRIMER (N) » EN ROUGE (demande de Leck, 2026-07-26).
   POURQUOI : ce bouton n'apparait QUE lorsque des lignes sont cochees, et il
   declenche une suppression definitive. Il portait la meme teinte bleu pale
   que « Colonnes » ou « Filtre avance » -- rien ne le distinguait d'un simple
   reglage d'affichage. Le rouge est deja la couleur de l'action destructrice
   dans les fenetres de confirmation (bouton « Supprimer » du canon) : on
   applique la MEME couleur au meme geste, pour que l'utilisateur reconnaisse
   le danger avant de cliquer, pas seulement apres. */
.ork-table-card .ork-delete,
.ork-table-card .ork-grid-toolbar .ork-delete {
  background: var(--ssa-erreur) !important;
  color: var(--ssa-blanc) !important;
}
.ork-table-card .ork-tool:hover,
.ork-table-card .ork-columns:hover,
.ork-table-card .ork-open-filters:hover,
.ork-table-card .tt-actions .btn:hover,
.ork-table-card .ork-grid-toolbar .btn:hover {
  background: var(--ssa-bleu) !important;
  color: var(--ssa-blanc) !important;
}

.ork-table-card .ork-delete:hover,
.ork-table-card .ork-grid-toolbar .ork-delete:hover {
  /* Survol : un cran plus sombre (melange avec du noir) -- on reste dans la
     meme couleur, on ne bascule pas au bleu comme les boutons neutres. */
  background: color-mix(in srgb, var(--ssa-erreur) 85%, #000) !important;
  color: var(--ssa-blanc) !important;
}

/* Le survol d'une action PRINCIPALE ne peut pas etre « encore plus bleu » :
   on l'assombrit legerement pour qu'un retour visuel existe quand meme. */
.ork-table-card .ork-add:hover {
  background: var(--ssa-bleu-texte) !important;
  color: var(--ssa-blanc) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   34. BLOC FINAL — RIEN NE DOIT ETRE ECRIT APRES CELUI-CI
   ══════════════════════════════════════════════════════════════════════════
   POURQUOI UN BLOC « FINAL » : dans une feuille de 3 700 lignes, raisonner sur
   la seule specificite ne suffit pas — a specificite EGALE, c'est la derniere
   regle lue qui gagne. Mes corrections precedentes se sont fait ecraser par des
   regles ecrites plus bas dans le fichier, y compris les miennes. Tout ce qui
   doit gagner sans discussion vit donc ici, a la toute fin.
   REGLE DE MAINTENANCE : on n'ajoute PAS de CSS apres ce bloc. Une nouvelle
   correction se pose A L'INTERIEUR, ou remplace celle qu'elle corrige.
   ══════════════════════════════════════════════════════════════════════════ */

/* 34.1 — « + AJOUTER » EST L'ACTION PRINCIPALE DU TABLEAU : BLEU PLEIN.
   POURQUOI CE BLOC A LONGTEMPS ECHOUE (diagnostic du 2026-07-24, au moteur) :
   on croyait que la regle concurrente etait `.ork-table-card .ork-grid-toolbar
   .btn` — trois classes, comme les regles ci-dessous — et qu'il suffisait donc
   d'ecrire plus BAS dans le fichier pour gagner. C'etait faux.
   La regle qui gagnait est celle-ci (ligne 727) :
       .ork-table-card .ork-grid-toolbar .tt-actions .btn   -> QUATRE classes
   Le bouton porte `class="btn ork-add"` et vit dans `.tt-actions` : il est donc
   attrape par ce selecteur a quatre classes, qui bat toute regle `.ork-add` a
   trois classes. Entre deux `!important`, ce n'est PAS la position qui tranche
   mais la SPECIFICITE — la position ne departage qu'a specificite egale.
   Piege supplementaire : la regle de la ligne 727 liste `.ork-add` dans la meme
   declaration. Cela ne change rien, car chaque selecteur d'une liste garde sa
   propre specificite ; c'est bien via `.tt-actions .btn` que le bouton etait
   peint en bleu pale.
   LA REGLE CI-DESSOUS monte donc a quatre classes elle aussi. On ne peut pas
   simplement retirer `.ork-add` de la regle 727 : shared.css (intouchable)
   ecrit le meme selecteur a quatre classes avec `background: transparent
   !important`, et c'est lui qui prendrait alors la main.
   Les deux selecteurs suivants couvrent les deux formes de barre d'outils :
   avec `.ork-grid-toolbar` (les grilles metier) et sans (les tableaux simples). */
.ork-table-card .ork-grid-toolbar .tt-actions .ork-add,
.ork-table-card .tt-actions .ork-add {
  background: var(--ssa-bleu) !important;
  color: var(--ssa-blanc) !important;
}
/* Meme raisonnement au survol : la concurrente est `.ork-grid-toolbar
   .tt-actions .btn:hover`, donc on l'egale en nombre de classes. */
.ork-table-card .ork-grid-toolbar .tt-actions .ork-add:hover,
.ork-table-card .tt-actions .ork-add:hover {
  background: var(--ssa-bleu-texte) !important;
  color: var(--ssa-blanc) !important;
}

/* 34.2 — LES BOUTONS D'ACTION DE PAGE A LA HAUTEUR DU CANON.
   Mesure : « Relancer les impayes » (Frais de scolarite) sortait a 31 px quand
   les 19 autres boutons de la page etaient a 28. */
.page-context-actions .btn,
.page-context-actions a.btn,
.ork-page-actions .btn,
.ork-page-actions a.btn {
  height: var(--ssa-h-btn) !important;
  min-height: var(--ssa-h-btn) !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

/* 34.3 — LES BOUTONS DU CALENDRIER AU CANON (constat de Leck).
   « Aujourd'hui » et « Fermer » gardaient les couleurs de shared.css (l.2711
   et 2768) : ni le fond, ni la forme, ni la hauteur des autres boutons.
   Le calendrier lui-meme porte deja z-index 2000 — il n'a pas besoin d'aide
   pour passer au-dessus, contrairement a ce que je pensais. */
.ork-calendar-foot button {
  height: var(--ssa-h-btn) !important;
  min-height: var(--ssa-h-btn) !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border: 0 !important;
  border-radius: 0 var(--ssa-rayon-panneau) 0 var(--ssa-rayon-panneau) !important;
  background: var(--ssa-bleu-pale) !important;
  color: var(--ssa-bleu-texte) !important;
}
.ork-calendar-foot button:hover {
  background: var(--ssa-bleu) !important;
  color: var(--ssa-blanc) !important;
}
/* Les fleches de mois : ce sont des ICONES, pas des boutons (regle 7 du canon)
   — elles restent nues et ne se colorent qu'au survol. */
.ork-calendar-head button {
  background: none !important;
  border: 0 !important;
  color: var(--ssa-bleu-texte) !important;
}
.ork-calendar-head button:hover {
  background: var(--ssa-gris-moyen) !important;
}

/* 34.4 — LE BOUTON PLIER/DEPLIER REVIENT APRES « REINITIALISER ».
   Constat de Leck : « je ne vois pas le petit bouton carre apres Reinitialiser
   qui sert a plier et deplier le bloc filtre ».
   IL EXISTE POURTANT (dashboard.html l.268, `data-filter-toggle`) : il est
   simplement place EN TETE de la barre, avec son libelle « Filtrer le tableau
   de bord » — on ne le reconnait donc pas comme le bouton carre attendu.
   ON NE LE RECREE PAS, ON LE DEPLACE : le comportement plier/deplier est cable
   par `ui-premium.js` (fichier intouchable) sur CE bouton precis. Le recreer
   demanderait de recabler l'evenement ; le deplacer en CSS conserve tout.
   `order` fonctionne parce que `.ork-context-filter__bar` est une flexbox :
   les trois enfants (toggle, resume, actions) peuvent etre reordonnes sans
   toucher au HTML. */
.ork-context-filter__bar { display: flex !important; align-items: center !important;
                           flex-wrap: wrap !important; }
.ork-context-filter__summary    { order: 1 !important; }
.ork-context-filter__bar-actions { order: 2 !important; }
.ork-context-filter__toggle      { order: 3 !important; }

/* POURQUOI `flex-wrap: wrap` : quand les pastilles de filtres sont nombreuses,
   elles doivent pouvoir passer a la ligne plutot que d'ecraser le titre et le
   bouton. Sans cela, une barre chargee comprime tout sur une seule ligne. */

/* Le toggle devient le CARRE attendu : le libelle passe en infobulle (il reste
   lisible au survol et pour un lecteur d'ecran), seule la fleche subsiste. */
.ork-context-filter__toggle > span { display: none !important; }
.ork-context-filter__toggle {
  /* MESURE DU 2026-07-24 : ce bouton sortait a 205 x 28, pas en carre, alors
     que `width` etait bien fixe a 28. La cause n'est ni la specificite ni
     l'ordre : shared.css (ligne 1905) lui donne `min-width: 205px`, et un
     MINIMUM l'emporte toujours sur une largeur — le navigateur applique
     d'abord `width`, puis le corrige pour respecter le plancher. Aucun
     `!important` sur `width` ne peut gagner contre un `min-width`.
     Il faut donc abaisser le plancher lui-meme, et fermer le plafond pour que
     rien ne le retire plus tard. */
  width: var(--ssa-h-btn) !important;
  min-width: var(--ssa-h-btn) !important;
  max-width: var(--ssa-h-btn) !important;
  height: var(--ssa-h-btn) !important;
  min-height: var(--ssa-h-btn) !important;
  padding: 0 !important;
  margin-left: 6px !important;
  flex: 0 0 auto !important;   /* ne s'etire pas, ne se comprime pas */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 var(--ssa-rayon-panneau) 0 var(--ssa-rayon-panneau) !important;
  /* BLEU PLEIN (Leck, 2026-07-24) : plier/deplier le bloc de filtres est une
     action principale, au meme titre que « + Ajouter ». Il porte donc la meme
     couleur, et non le bleu pale des outils secondaires. */
  background: var(--ssa-bleu) !important;
  color: var(--ssa-blanc) !important;
}
/* Un bouton deja bleu plein ne peut pas devenir « plus bleu » au survol : on
   l'assombrit, comme « + Ajouter ». */
.ork-context-filter__toggle:hover {
  background: var(--ssa-bleu-texte) !important;
  color: var(--ssa-blanc) !important;
}
/* La fleche tourne selon l'etat : vers le bas quand le bloc est ouvert (le clic
   va replier), vers la droite quand il est ferme. C'est `aria-expanded` qui
   porte l'etat — deja tenu a jour par ui-premium.js, on ne fait que le lire. */
/* CENTRAGE DU CHEVRON (Leck : « il n'a pas l'air centre, ni plie ni deplie »).
   POURQUOI IL NE L'ETAIT PAS : une icone de police n'occupe pas toute sa boite
   — le glyphe « chevron » est etroit et cale sur la ligne de base, ce qui le
   decale vers le bas et vers la gauche. En le passant en `block` occupant
   toute la surface du bouton, avec un `line-height` egal a cette surface, le
   glyphe se centre sur les DEUX axes, quel que soit son etat.
   ET SURTOUT : la rotation tourne autour du centre de la BOITE. Tant que la
   boite ne coincidait pas avec le bouton, le chevron pivotait de travers —
   d'ou l'impression de decentrage differente selon l'etat. */
.ork-context-filter__toggle i {
  transition: transform .18s ease !important;
  display: block !important;
  width: 100% !important;
  line-height: var(--ssa-h-btn) !important;
  text-align: center !important;
  transform-origin: 50% 50% !important;
}
.ork-context-filter__toggle[aria-expanded="true"] i { transform: rotate(90deg) !important; }

/* 34.5 — LE TITRE DU BLOC DE FILTRES REVIENT A GAUCHE.
   Constat de Leck : « tu as enleve le libelle qui etait juste avant le premier
   champ ». Il avait raison sur l'effet, mais le libelle n'a pas ete supprime :
   il vit toujours dans le HTML, DANS le bouton plier/deplier (`<span>Filtrer
   le tableau de bord</span>`). En rendant ce bouton carre (34.4), on a masque
   son texte — et comme le bouton est parti a droite, le titre a disparu.
   On ne pouvait pas simplement le reafficher : le bouton cesserait d'etre
   carre. Il faut donc DEUX elements, et le titre est ajoute dans le HTML des
   13 pages qui portent un bloc de filtres, en reprenant le texte propre a
   chacune (« Filtrer les eleves », « Filtrer les paiements »...). Le `<span>`
   du bouton reste en place, masque : il sert d'etiquette au lecteur d'ecran. */
.ork-context-filter__titre {
  order: 0 !important;          /* tout a gauche, avant le resume et le bouton */
  flex: 0 0 auto !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  margin-right: 12px !important;
  color: var(--ssa-texte) !important;
}
/* PAS de surcharge blanche pour le tableau de bord : la feuille de la page
   prevoit une barre ardoise, mais le rendu MESURE montre une barre claire —
   un titre blanc y devenait illisible (capture du 2026-07-24). Le titre garde
   donc la couleur de texte du theme sur toutes les pages. */

/* 34.6 — LE CALENDRIER PORTE LE BLEU DU CANON, PAS CELUI DE BOOTSTRAP.
   Constat de Leck : « le calendrier n'a pas le meme canon, il a un autre
   bleu ». Mesure : le jour selectionne sortait en rgb(10,110,209) — #0a6ed1,
   le bleu de shared.css (ligne 2755) — la ou le canon SSA est #0096d6.
   theme-ssa.css ne repeignait jusqu'ici que l'en-tete et le pied du
   calendrier ; la grille des jours n'avait jamais ete reprise. */
.ork-calendar-grid button.is-selected {
  background: var(--ssa-bleu) !important;
  border-color: var(--ssa-bleu) !important;
  color: var(--ssa-blanc) !important;
}
/* « Aujourd'hui » n'est pas selectionne : il se signale par son seul contour. */
.ork-calendar-grid button.is-today {
  border-color: var(--ssa-bleu) !important;
  color: var(--ssa-bleu-texte) !important;
}
.ork-calendar-grid button:hover {
  background: var(--ssa-bleu-pale) !important;
  color: var(--ssa-bleu-texte) !important;
}
/* Le survol du jour deja selectionne ne doit pas le faire palir. */
.ork-calendar-grid button.is-selected:hover {
  background: var(--ssa-bleu-texte) !important;
  color: var(--ssa-blanc) !important;
}

/* 34.7 — PAGINATION : UN SEUL FOND, DE LA LARGEUR DE LA ZONE CLIQUABLE.
   Constat de Leck : « le fond a l'air plus large que l'effet de survol ».
   MESURE : c'est exactement cela, et voici pourquoi. Un numero de page est
   fait de DEUX boites emboitees — `<li class="paginate_button page-item">`
   qui contient `<a class="page-link">` — et les regles existantes peignent
   les DEUX, avec le meme `padding: 0 10px` et la meme `margin: 0 3px`.
   Le li ressortait donc a 103 px quand le `a` qu'il contient en faisait 77 :
   26 px de fond colore (2 x 10 de marge interne + 2 x 3 de marge) qui ne
   reagissent a aucun survol, puisque seul le `a` est cliquable.
   CORRECTIF : le li redevient un simple conteneur — ni fond, ni marge
   interne — et le `a` porte toute l'apparence. Fond et zone cliquable
   coincident alors au pixel pres. */
.dataTables_paginate .pagination .page-item,
.dataTables_paginate .pagination .paginate_button {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 3px !important;      /* l'espacement reste ici, applique UNE fois */
}
.dataTables_paginate .pagination .page-item .page-link,
.dataTables_paginate .pagination .paginate_button .page-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--ssa-h-btn) !important;
  min-height: var(--ssa-h-btn) !important;
  min-width: var(--ssa-h-btn) !important;
  padding: 0 10px !important;
  margin: 0 !important;          /* deja portee par le li : sinon comptee deux fois */
  border: 0 !important;
  border-radius: 0 var(--ssa-rayon-panneau) 0 var(--ssa-rayon-panneau) !important;
}

/* 34.8 — LE CHOIX DU NOMBRE DE LIGNES PAR PAGE (10 / 20 / 50).
   Pose par `table-canon.js` juste avant les numeros de page, comme demande.
   Il prend la meme hauteur et la meme forme que les boutons voisins : c'est un
   controle de la barre de pagination, pas un champ de formulaire. */
.dataTables_paginate {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}
.ork-page-length {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  font-size: 12px !important;
  color: var(--ssa-texte) !important;
  white-space: nowrap !important;
}
.ork-page-length select {
  /* La fleche du menu deroulant doit rester visible : sans elle, le controle
     ressemble a une etiquette et personne ne devine qu'il s'ouvre. Le theme
     retire l'habillage natif des `select` ailleurs (`appearance: none`) — ici
     on le retablit explicitement. */
  -webkit-appearance: auto !important;
  appearance: auto !important;
  height: var(--ssa-h-btn) !important;
  min-height: var(--ssa-h-btn) !important;
  padding: 0 2px 0 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border: 0 !important;
  border-radius: 0 var(--ssa-rayon-panneau) 0 var(--ssa-rayon-panneau) !important;
  background: var(--ssa-bleu-pale) !important;
  color: var(--ssa-bleu-texte) !important;
  cursor: pointer !important;
}
.ork-page-length select:hover {
  background: var(--ssa-bleu) !important;
  color: var(--ssa-blanc) !important;
}

/* 34.9 — CARTE DES SITES (tableau de bord).
   Google Maps se dessine dans un conteneur qui doit avoir une hauteur REELLE :
   sans elle, la bibliotheque s'initialise dans une boite de 0 pixel et la carte
   reste invisible, sans aucune erreur en console. C'est le piege classique de
   cette API — d'ou une hauteur posee ici plutot qu'un `style=` dans la page. */
.ork-carte-sites {
  height: 380px;
  width: 100%;
  background: var(--ssa-gris-clair, #f3f3f3);   /* fond neutre pendant le chargement */
}
@media (max-width: 900px) {
  .ork-carte-sites { height: 260px; }
}

/* 34.10 — LA BARRE DE RECHERCHE AUSSI FAIT 28 px.
   Releve en mesurant la barre d'outils apres l'ajout d'« Actualiser » : tous
   les boutons sortaient a 28, la recherche a 26. Elle n'avait aucune hauteur
   declaree — la sienne venait de son contenu, donc d'un calcul de police.
   C'est precisement ce que le canon interdit : une hauteur qui se trouve au
   lieu de se decider. */
.ork-table-card .ork-grid-toolbar .tt-search,
.ork-table-card .table-toolbar .tt-search {
  height: var(--ssa-h-btn) !important;
  min-height: var(--ssa-h-btn) !important;
  align-items: center !important;
}
/* Le champ lui-meme remplit la boite, sinon la zone cliquable reste plus
   petite que ce que l'utilisateur voit. */
.ork-table-card .ork-grid-toolbar .tt-search .form-control,
.ork-table-card .table-toolbar .tt-search .form-control,
.ork-table-card .ork-grid-toolbar .tt-search input,
.ork-table-card .table-toolbar .tt-search input {
  height: 100% !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 34.16 — LA BARRE DE RECHERCHE DU TABLEAU : BLANCHE, PLEINE, SANS DOUBLON.
   Quatre corrections demandees par Leck le 2026-07-24. */

/* a) FOND BLANC, et le champ occupe TOUTE la boite. Le libelle `.tt-search`
      et l'`<input>` qu'il contient portaient chacun un fond gris : on voyait
      donc une bande grise autour d'une zone de saisie plus etroite qu'elle. */
.tt-search,
.ork-table-card .ork-grid-toolbar .tt-search,
.ork-table-card .table-toolbar .tt-search {
  background: var(--ssa-blanc) !important;
  /* PAS DE CADRE AU REPOS (Leck, 2026-07-24) : le fond blanc suffit a detacher
     la zone de saisie du gris de la barre d'outils. Un cadre permanent en plus
     du fond, c'est deux fois la meme information.
     LA BORDURE RESTE DECLAREE, EN TRANSPARENT : si on la mettait a `0`, la
     boite perdrait 2 px de hauteur au moment de la prise de focus et le champ
     sauterait. En transparent, la place est reservee — seule la couleur
     change. */
  border: 1px solid transparent !important;
  /* PAS DE MARGE INTERNE A DROITE : le bouton d'effacement fait desormais
     toute la hauteur du champ, il doit donc pouvoir se coller au bord. Une
     marge interne l'en aurait ecarte de quelques pixels et aurait laisse une
     bande blanche entre lui et le cadre. */
  padding-right: 0 !important;
  overflow: hidden !important;   /* le coin arrondi du bouton suit celui du champ */
}
/* Le cadre n'apparait qu'au focus : c'est lui qui dit « vous ecrivez ici ». */
.tt-search:focus-within,
.ork-table-card .ork-grid-toolbar .tt-search:focus-within,
.ork-table-card .table-toolbar .tt-search:focus-within {
  border: 1px solid var(--ssa-bleu) !important;
}
.tt-search input,
.tt-search .form-control,
.ork-table-card .ork-grid-toolbar .tt-search input,
.ork-table-card .table-toolbar .tt-search input {
  background: var(--ssa-blanc) !important;
  flex: 1 1 auto !important;     /* prend toute la largeur restante */
  width: 100% !important;
  min-width: 0 !important;       /* sinon un input refuse de descendre sous sa taille par defaut */
  /* NI CADRE NI HALO SUR LE CHAMP LUI-MEME : c'est le libelle qui porte le
     cadre de la barre. Sans cela on voyait deux boites emboitees — un champ
     encadre a l'interieur d'une barre encadree — et la croix d'effacement
     paraissait posee A COTE du champ au lieu d'etre dedans. */
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* b) UNE SEULE CROIX D'EFFACEMENT. Un `<input type="search">` recoit du
      NAVIGATEUR sa propre croix, qui venait s'ajouter a celle du theme
      (`.ork-search-clear`) : deux boutons cote a cote pour la meme action.
      On retire celle du navigateur — c'est la seule des deux qu'on ne peut ni
      styler ni deplacer. Le prefixe `-webkit-` couvre Chrome et Edge, les deux
      navigateurs du parc. */
.tt-search input[type="search"]::-webkit-search-cancel-button,
.tt-search input[type="search"]::-webkit-search-decoration,
.navbar-search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
}

/* c) LA LOUPE S'EFFACE DES QUE L'ON TAPE, comme le texte d'invite.
      `:placeholder-shown` est vrai TANT QUE le champ est vide : des qu'une
      lettre est saisie, il devient faux et la loupe disparait. `:has()` permet
      de remonter du champ vers le libelle qui contient l'icone — c'est ce qui
      evite d'avoir a ajouter une classe en JavaScript a chaque frappe.
      ATTENTION AU SELECTEUR : `>` est indispensable. La loupe est un enfant
      DIRECT du libelle, mais le bouton d'effacement contient lui aussi une
      icone (la croix) — sans `>`, on effacerait la croix en meme temps que la
      loupe, c'est-a-dire le seul bouton qui reste pour vider le champ. */
.tt-search:has(input:not(:placeholder-shown)) > i,
.tt-search:has(input:not(:placeholder-shown)) > .fa {
  display: none !important;
}

/* 34.11 — LE SURVOL D'UN NUMERO DE PAGE SE COMPORTE COMME UN BOUTON.
   Constat de Leck : « au survol le libelle est souligne, et ca ne donne pas le
   bleu plein ». MESURE : au survol, `text-decoration` passait a `underline` et
   le fond ne bougeait pas — le navigateur appliquait son style de LIEN, parce
   qu'un numero de page est un `<a href="#">` et que rien ne l'en empechait.
   Un numero de page est un bouton : il se peint comme les autres actions
   secondaires (bleu plein au survol), et ne se souligne jamais. */
.dataTables_paginate .pagination .page-link:hover,
.dataTables_paginate .pagination .page-link:focus {
  background: var(--ssa-bleu) !important;
  color: var(--ssa-blanc) !important;
  text-decoration: none !important;
}
/* La page COURANTE est deja bleu plein : son survol s'assombrit, comme
   « + Ajouter », au lieu de rester identique (sinon rien ne repond au geste). */
.dataTables_paginate .pagination .page-item.active .page-link:hover,
.dataTables_paginate .pagination .paginate_button.active .page-link:hover {
  background: var(--ssa-bleu-texte) !important;
  color: var(--ssa-blanc) !important;
}
/* Une page indisponible (« Precedent » sur la page 1) ne doit pas reagir :
   un retour visuel sur un bouton mort est un mensonge. */
.dataTables_paginate .pagination .page-item.disabled .page-link:hover,
.dataTables_paginate .pagination .paginate_button.disabled .page-link:hover {
  background: var(--ssa-gris-clair) !important;
  color: var(--ssa-label) !important;
  cursor: default !important;
}
/* Aucun soulignement, dans aucun etat. */
.dataTables_paginate .pagination .page-link { text-decoration: none !important; }

/* 34.12 — TOUT CHAMP DE SAISIE A LA HAUTEUR D'UN BOUTON, DANS TOUTE L'APPLI.
   Demande de Leck : « il ne s'agit pas que du bloc filtre, c'est la hauteur
   des champs de saisie de toute l'application ; traite le sujet au niveau du
   canon pour que toutes les pages prennent la meme hauteur, que ce soit du
   texte ou une date ».
   MESURE qui a lance le sujet : les champs du bloc de filtres sortaient a
   35 px avec une police de 8,76 px, quand les boutons font 28 px en 12 px.
   Ni l'une ni l'autre de ces valeurs n'etait ecrite : elles resultaient des
   marges internes et d'une taille heritee. C'est exactement ce que le canon
   refuse — une dimension qui se trouve au lieu de se decider.
   LA SEULE EXCEPTION EST LE MULTI-LIGNES : un `textarea` doit pouvoir grandir,
   sinon il n'a plus d'objet. Les cases a cocher et les boutons radio sont eux
   aussi ecartes : ce sont des marques, pas des zones de saisie. Leck indiquera
   au cas par cas les champs a passer sur plusieurs lignes. */
.form-control:not(textarea),
.form-select,
input.form-control,
input.ork-premium-date,
select.form-select {
  height: var(--ssa-h-btn) !important;
  min-height: var(--ssa-h-btn) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: var(--ssa-taille-controle, 12px) !important;
  line-height: 1 !important;
}
/* Multi-lignes : la hauteur reste libre, seule la police suit le standard. */
textarea.form-control, textarea {
  height: auto !important;
  min-height: 0 !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  font-size: var(--ssa-taille-controle, 12px) !important;
  line-height: 1.35 !important;
}
/* Cases a cocher et radios : ce ne sont pas des champs de saisie. */
input[type="checkbox"], input[type="radio"], .form-check-input {
  height: auto !important;
  min-height: 0 !important;
}
/* Un champ de fichier ouvre une boite de dialogue : sa hauteur native reste. */
input[type="file"] { height: auto !important; }

/* 34.13 — LA POLICE DES BOUTONS DEVIENT CELLE DE L'APPLICATION.
   Demande de Leck : « la police des boutons me convient, fais-en le standard ».
   MESURE : la FAMILLE est deja commune a toute l'application (Segoe UI) ; ce
   qui variait, c'est la TAILLE — 12 px sur les boutons, le menu et les
   cellules, mais 11 px dans les en-tetes de tableau et 8,76 px dans les
   champs. On aligne donc ces deux exceptions sur 12 px.
   ON NE TOUCHE NI AUX TITRES NI AUX GRAISSES : un standard de taille pour les
   controles et le texte courant, pas un aplatissement de toute la hierarchie
   visuelle. */
:root { --ssa-taille-controle: 12px; }
.ork-table-card .ork-premium-table thead th,
.form-select, .form-control,
.ork-page-length select,
/* LES CHAMPS DE RECHERCHE EN FONT PARTIE (Leck, 2026-07-24). Ils y
   echappaient : `.ork-search` et l'input du bandeau ne portent PAS la classe
   `.form-control` de Bootstrap, donc aucune des regles ci-dessus ne les
   atteignait — leur taille venait de l'heritage, et elle etait plus petite
   que celle des boutons voisins. */
.tt-search input,
.navbar-search input,
.ork-search {
  font-size: var(--ssa-taille-controle) !important;
}

/* 34.14 — TABLEAUX : PLUS DE ZEBRAGE, DES LIGNES SERREES, UN FILET FIN.
   Demande de Leck : « retire le bicolore des lignes, l'espacement entre deux
   lignes est trop grand, un trait fin me conviendrait ».
   POURQUOI CA MARCHE MIEUX : le zebrage sert a suivre une ligne des yeux sur
   un tableau tres large ; ici les colonnes sont peu nombreuses et un filet
   suffit. Sans alternance, l'oeil ne cherche plus a interpreter la couleur
   comme une information (« pourquoi cette ligne est-elle grise ? »). */
.ork-table-card .ork-premium-table tbody tr > *,
.ork-table-card .ork-premium-table.table-striped > tbody > tr > *,
.ork-table-card .ork-premium-table tbody tr:nth-child(odd) > *,
.ork-table-card .ork-premium-table tbody tr:nth-child(even) > * {
  background: var(--ssa-blanc) !important;
}
/* Le survol reste, lui : c'est un retour au geste, pas une decoration. */
.ork-table-card .ork-premium-table tbody tr:hover > * {
  background: var(--ssa-gris-clair) !important;
}
.ork-table-card .ork-premium-table tbody tr.is-selected > * {
  background: var(--ssa-bleu-pale) !important;
}
/* Lignes serrees : la hauteur vient du texte (12 px) plus une marge reduite,
   et le trait de separation est le filet fin du theme.
   2 px (Leck : « reduis encore de moitie ») — en dessous, les lettres a
   jambage (p, g, j) toucheraient le trait de la ligne suivante. */
.ork-table-card .ork-premium-table tbody td,
.ork-table-card .ork-premium-table tbody th {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  /* TRAIT TRES FIN (Leck : « pas fins comme demande »). 1 px est le minimum
     qu'un ecran sait tracer : on ne peut plus l'amincir, on l'ECLAIRCIT. Un
     trait pale se lit comme une separation legere ; c'est ce qui donne
     l'impression de finesse, pas l'epaisseur. `--ssa-bordure` (#d2d2d2) est la
     couleur des cadres de blocs : trop soutenue quand elle se repete a chaque
     ligne d'un tableau de 15 entrees. */
  border-bottom: 1px solid var(--ssa-filet-tableau, #ededed) !important;
  border-right: 0 !important;
  /* COULEUR DE TEXTE AU JETON (Leck, 2026-07-24). Mesure : les cellules et les
     noms d'eleves ressortaient en NOIR PUR (rgb(0,0,0)) quand tout le reste de
     l'application est a #333 (--ssa-texte). L'ecart se voit : le tableau parait
     plus « dur » que les blocs autour. La couleur venait de DataTables, pas du
     theme, d'ou ce rappel explicite.
     ON NE PEINT QUE LE TEXTE HERITE : les pastilles de statut (« Actif » vert,
     « Brouillon » orange) et les liens portent leur PROPRE couleur sur un span
     interne — elle gagne, on n'y touche pas. */
  color: var(--ssa-texte) !important;
  /* LE TRAIT FAISAIT 2 px, PAS 1 (mesure du 2026-07-24). Chaque cellule porte
     un trait EN BAS (le notre, tres pale) et la cellule du dessous en portait
     un EN HAUT, reste gris #d2d2d2. Colles l'un a l'autre, ils formaient une
     ligne de 2 px dont la moitie etait sombre : eclaircir notre trait ne
     pouvait donc rien y changer, on ne touchait qu'a la moitie du probleme.
     Un seul des deux suffit a separer deux lignes — on garde celui du bas. */
  border-top: 0 !important;
}
.ork-table-card .ork-premium-table thead th {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}
/* LE TRAIT DE FERMETURE DU BAS EST PORTE PAR LE PIED, PAS PAR LA DERNIERE
   LIGNE (Leck, 2026-07-24).
   POURQUOI CE CHANGEMENT : ce trait fermait le tableau en bas, mais il etait
   pose sur la DERNIERE LIGNE du tableau. Depuis que seules les lignes defilent
   (scrollY), cette derniere ligne monte et descend avec le defilement — le
   trait disparaissait donc des qu'on faisait glisser les lignes.
   LA PARADE : on met le trait EN HAUT du pied (les boutons Importer / Exporter
   a gauche, la pagination a droite, tous deux sur la meme ligne). Le pied ne
   defile pas : le trait reste donc toujours affiche, juste au-dessus des
   boutons, quelle que soit la position du defilement.
   TRAIT SUR LE CONTENEUR, PAS SUR LES DEUX MOITIES (Leck, regression 2026-07-25) :
   le pied est en `justify-content: space-between`, donc les deux moities sont
   ECARTEES et un espace vide les separe. Poser le bord haut sur CHAQUE moitie
   laissait donc un TROU dans le trait au milieu (et, si les deux moities ne font
   pas exactement la meme hauteur, un decrochage a leur jonction) — c'est ce que
   Leck voyait « masquer » la ligne. On pose donc le trait UNE SEULE FOIS, sur le
   conteneur `.ork-table-pied` (voir section 34.23) : une ligne pleine, continue,
   sans trou ni recouvrement, sur toute la largeur. */
/* Les pastilles et vignettes des cellules (avatar « AB », pastille de statut)
   imposaient leur propre hauteur : c'est ce qui tenait les lignes ecartees
   meme apres avoir reduit les marges. On les aligne sur le texte. */
.ork-table-card .ork-premium-table tbody td > *,
.ork-table-card .ork-premium-table tbody th > * {
  vertical-align: middle !important;
}

/* Le rappel « Page X sur N » vit dans le pied, apres Exporter : c'est une
   information, pas une action — donc pas de fond ni de cadre de bouton. */
.ork-page-info {
  display: inline-flex !important;
  align-items: center !important;
  height: var(--ssa-h-btn) !important;
  margin-left: 10px !important;
  font-size: var(--ssa-taille-controle, 12px) !important;
  color: var(--ssa-label) !important;
  white-space: nowrap !important;
}

/* 34.21 — SEULES LES LIGNES DEFILENT, EN-TETE COLLANT (sans `scrollY`).
   HISTOIRE : on avait d'abord utilise l'option `scrollY` de DataTables. Elle
   donnait un beau resultat visuel MAIS scindait la table en deux (un clone
   d'en-tete + un corps), et ce clone cassait le remplissage par l'API sur
   TOUTES les pages cablees (les lignes partaient dans le clone invisible ->
   tableaux vides ou coinces sur les lignes de demo). On l'a donc retiree.
   MAINTENANT : une SEULE table. La zone `.table-responsive` defile
   (`overflow-y: auto`, hauteur posee par table-canon.js), et les en-tetes de
   colonnes restent visibles grace a `position: sticky`. Pas de clone, donc
   plus aucun risque pour les donnees. Contrepartie : la barre de defilement
   longe aussi l'en-tete (au lieu de commencer a la 1re ligne) — detail visuel
   assume au profit d'une application qui affiche vraiment ses donnees. */
.ork-table-card .table-responsive {
  overflow-y: auto;
}
.ork-table-card .ork-premium-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;   /* l'en-tete reste au-dessus des lignes qui glissent */
}

/* 34.23 — PIED DU TABLEAU FIGE SOUS LA ZONE QUI DEFILE + BOUTON « ... » DE LIGNE
   (Leck, regression 2026-07-25).
   PIED : table-canon.js sort desormais Importer/Exporter + la pagination de
   `.table-responsive` (la zone qui defile) vers un conteneur `.ork-table-pied`
   pose JUSTE DESSOUS. Il reste donc toujours visible, quelle que soit la position
   du defilement. On le met en ligne : outils a gauche, pagination a droite. Leur
   trait du haut (deja pose en 34.18) forme la ligne de separation continue. */
.ork-table-card .ork-table-pied {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex: 0 0 auto !important;
  /* LE TRAIT DE SEPARATION est ici, sur le conteneur (et plus sur les deux
     moities — voir 34.18) : une ligne pleine et continue sur toute la largeur,
     sans trou au milieu ni decrochage a la jonction (Leck, 2026-07-25). */
  border-top: 1px solid var(--ssa-bordure) !important;
}

/* BOUTON « ... » (trois points verticaux) dans CHAQUE cellule de la colonne
   principale. Discret au repos, il se revele au survol de la ligne (facon liste
   moderne) et reste toujours cliquable (on joue sur l'opacite, pas sur
   `display`). Un clic dessus ouvre le meme menu que le clic droit. */
.ork-table-card .ork-premium-table td.ork-cell-primary {
  position: relative !important;
  padding-right: 26px !important;   /* place du bouton, sans chevaucher le texte */
}
.ork-cell-menu {
  position: absolute;
  right: 1px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ssa-label, #6b7a90);
  font-size: 13px;
  line-height: 1;
  opacity: 0;
  cursor: pointer;
  transition: opacity .12s ease, background .12s ease, color .12s ease;
}
/* La colonne principale se signale comme cliquable (elle ouvre la fiche). */
.ork-table-card .ork-premium-table td.ork-cell-primary { cursor: pointer; }
.ork-table-card .ork-premium-table tbody tr:hover .ork-cell-menu,
.ork-cell-menu:focus-visible { opacity: 1; }
/* SURVOL DU BOUTON ... ET DU MENU CONTEXTUEL AU CANON (Leck, 2026-07-25).
   Le canon des actions secondaires au survol = FOND BLEU PLEIN + texte blanc
   (comme la pagination et le toggle de filtre). Avant : le bouton ... survolait
   en bleu PALE, et l'item « Supprimer » du menu contextuel survolait en fond
   ROUGE. On aligne tout sur le canon. L'item Supprimer garde son texte ROUGE
   AU REPOS (action dangereuse), mais son SURVOL suit le canon : fond bleu,
   texte blanc — jamais de fond rouge. */
.ork-cell-menu:hover {
  background: var(--ssa-bleu) !important;
  color: var(--ssa-blanc) !important;
}
.ork-row-menu button:hover { background: var(--ssa-bleu) !important; color: var(--ssa-blanc) !important; }
.ork-row-menu button:hover i { color: var(--ssa-blanc) !important; }
.ork-row-menu button.is-danger:hover { background: var(--ssa-bleu) !important; color: var(--ssa-blanc) !important; }
.ork-row-menu button.is-danger:hover i { color: var(--ssa-blanc) !important; }

/* 34.22 — ETAT VIDE SOIGNE, facon liste SharePoint moderne (Leck, 2026-07-25).
   POURQUOI : quand un tableau ne renvoie AUCUNE ligne (resultat vide) ou que le
   chargement echoue (reseau coupe), on n'affiche plus le sec « Aucune donnee
   disponible » ni le message technique brut, mais un bloc centre : une petite
   illustration sobre (SVG « liste vide », coherent avec le gris/marine de l'app)
   + un titre amical + un sous-texte, et un bouton « Reessayer » pour l'erreur.
   COMMENT LE CENTRAGE TIENT : la zone `.table-responsive` a une hauteur FIXE
   (posee par table-canon.js). Elle recoit la classe `.ork-vide` quand le tableau
   est vide, et la variable `--ork-h-vide` = hauteur libre sous l'en-tete collant
   et au-dessus du pied. Le bloc `.ork-etat-vide` prend cette hauteur en minimum
   et centre son contenu -> illustration + message pile au milieu, meme sans
   aucune ligne. Le HTML du bloc est fabrique par `window.orkEtatVide`
   (table-canon.js), commun aux deux chemins : la langue `emptyTable` de
   DataTables (cas vide) et `orkEmpty`/`orkError` (cas vide/erreur des tbody). */

/* La zone des lignes sert de contexte au centrage. */
.ork-table-card .table-responsive { position: relative; }

/* La cellule unique qui porte l'etat vide, quel que soit le chemin :
   `.dataTables_empty` (pose par DataTables) ou `.ork-empty-cell` (pose par
   orkEmpty/orkError). On neutralise bordure, fond raye et rembourrage pour que
   seul le bloc centre soit visible. */
.ork-table-card .table-responsive td.dataTables_empty,
.ork-table-card .table-responsive td.ork-empty-cell {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Le bloc illustration + textes. `box-sizing: border-box` -> son rembourrage est
   compris DANS la hauteur `--ork-h-vide` (sinon il deborderait de 32 px et
   sortirait une barre de defilement). */
.ork-etat-vide {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--ork-h-vide, 260px);
  width: 100%;
  gap: 4px;
  padding: 16px;
  text-align: center;
}
/* L'illustration : gris doux pour le cas vide, ambre discret pour l'erreur
   (`currentColor` pilote le trait du SVG). */
.ork-etat-vide__img { color: #aab4c0; margin-bottom: 6px; }
.ork-etat-vide--erreur .ork-etat-vide__img { color: #d19a3f; }
.ork-etat-vide__titre { font-size: 15px; font-weight: 600; color: #52627a; }
.ork-etat-vide__sous  { font-size: 13px; color: #8b97a6; max-width: 340px; }
.ork-etat-vide__retry { margin-top: 12px; }

/* 34.20 — LE BANDEAU PRINCIPAL PASSE EN MARINE (Leck, 2026-07-24).
   Couleur choisie sur apercus : #174f7f, le bleu profond des panneaux KPI. Le
   bandeau devient ainsi le CADRE fonce de l'application, tandis que l'ardoise
   #486381 des barres de tableau reste pour les titres de section — deux
   niveaux de bleu qui donnent la hierarchie.
   Sur fond fonce, tout le texte et les icones basculent en clair. Seuls
   RESTENT SUR FOND CLAIR : le champ de recherche (un ilot blanc, lisible) et
   les pastilles de notification (rouge/jaune, qui doivent trancher). */
:root { --ssa-marine: #174f7f; }

.navbar.bg-navy {
  background: var(--ssa-marine) !important;
  border-bottom: 1px solid rgba(0, 0, 0, .18) !important;
}
/* Le nom de l'appli et le sous-titre, en clair.
   ATTENTION : le nom de l'ecole et le slogan ne sont PAS dans un `<small>` ;
   ils sont injectes par theme-ssa.js dans `.ssa-marque__ecole` (le nom) et
   `.ssa-marque__slogan` (le slogan). Sans ces deux selecteurs, le nom restait
   a #333 et le slogan a #666 — le titre paraissait sombre sur le marine. */
.navbar.bg-navy .navbar-brand,
.navbar.bg-navy .navbar-brand small,
.navbar.bg-navy .ssa-marque__ecole { color: #fff !important; }
/* Le slogan est une information secondaire : blanc adouci, comme la fonction. */
.navbar.bg-navy .navbar-brand .text-white-50,
.navbar.bg-navy .ssa-marque__slogan { color: rgba(255, 255, 255, .72) !important; }
/* Les icones du bandeau (aide, cloche, messages, reglages) et le nom de
   l'utilisateur : blanc legerement adouci pour ne pas eblouir. */
.navbar.bg-navy .btn-navlt,
.navbar.bg-navy .btn-navlt i,
.navbar.bg-navy .navbar-nav .nav-link,
.navbar.bg-navy .navbar-text,
.navbar.bg-navy .navbar-brand .text-gold { color: rgba(255, 255, 255, .9) !important; }
.navbar.bg-navy .btn-navlt:hover { background: rgba(255, 255, 255, .12) !important; color: #fff !important; }
/* LE NOM ET LA FONCTION DE L'UTILISATEUR, en clair (Leck, 2026-07-24).
   Ils n'etaient pas couverts par la regle du titre : le nom restait a #333 et
   la fonction a #767676 — illisibles sur le marine. Le nom en blanc plein, la
   fonction en blanc adouci (c'est une information secondaire). */
.navbar.bg-navy .ssa-user__txt .fw-semibold { color: #fff !important; }
.navbar.bg-navy .ssa-user__txt .text-white-50 { color: rgba(255, 255, 255, .72) !important; }

/* LA 2e LIGNE DEVIENT « LE PROFIL DE CONNEXION » (Leck, 2026-07-24).
   Leck : « au lieu de la fonction, appelle-la profil, pour que l'utilisateur
   voie sur quel profil il s'est connecte (enseignant, promoteur, eleve,
   parent...) ». On prefixe donc le role par « Profil : », via CSS pour ne pas
   toucher a rbac-ui.js (intouchable) qui injecte le role dans cette ligne.
   Le mot est pose par `::before`, que rbac-ui ne peut pas effacer puisqu'il ne
   fait partie ni du texte ni des enfants du span. */
.navbar.bg-navy .ssa-user__txt .text-white-50::before {
  content: "Profil : ";
  opacity: .8;
}
/* La ligne etait a 8 px (mesure) : trop petite pour un role qu'on veut lire
   d'un coup d'oeil. On la remonte a 11 px et on l'espace du nom au-dessus. */
.navbar.bg-navy .ssa-user__txt .text-white-50 {
  font-size: 11px !important;
  margin-top: 3px !important;
}
/* Le nom et le profil ne se touchent plus : la colonne les espace. */
.navbar.bg-navy .ssa-user__txt { gap: 2px !important; }

/* LA BARRE DE RECHERCHE PRINCIPALE PASSE AU CANON DE CELLE DU TABLEAU
   (Leck, 2026-07-24) : fond blanc, hauteur 28 comme tous les controles, cadre
   invisible au repos et bleu au focus. Elle ne se distingue que par sa LARGEUR
   (c'est la recherche de toute l'application, elle occupe le centre du bandeau).
   Mesure du 2026-07-24 : elle sortait a 40 px de haut, avec un input GRIS
   (#f3f3f3) et un cadre gris permanent — trois ecarts avec le canon. */
.navbar.bg-navy .navbar-search {
  height: var(--ssa-h-btn) !important;
  min-height: var(--ssa-h-btn) !important;
  background: #fff !important;
  border: 1px solid transparent !important;   /* invisible au repos */
  border-radius: 0 !important;
  align-items: center !important;
  overflow: hidden !important;                 /* le bouton effacer suit le bord */
}
.navbar.bg-navy .navbar-search:focus-within {
  border: 1px solid var(--ssa-bleu) !important;   /* le cadre n'apparait qu'au focus */
}
/* L'input et la loupe : fond blanc, pas de cadre, texte du canon. */
.navbar.bg-navy .navbar-search .form-control,
.navbar.bg-navy .navbar-search input,
.navbar.bg-navy .navbar-search .input-group-text {
  height: 100% !important;
  background: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: var(--ssa-taille-controle, 12px) !important;
}
/* TEXTE CENTRE VERTICALEMENT (Leck l'a redemande le 2026-07-24).
   L'ERREUR PRECEDENTE : j'avais mis `display:flex` sur l'`<input>` — un input
   n'est PAS un conteneur flex, la propriete est ignoree et ne centrait rien.
   La bonne methode pour un champ d'une seule ligne : une hauteur fixe ET une
   `line-height` EGALE a cette hauteur ; le texte se cale alors au milieu.
   On l'applique au seul input (pas a la loupe, qui est bien centree par son
   propre flex). */
.navbar.bg-navy .navbar-search .form-control,
.navbar.bg-navy .navbar-search input {
  display: block !important;      /* on annule le flex pose par erreur */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: var(--ssa-h-btn) !important;
}
/* La loupe, elle, se centre par flex (c'est une boite, pas un champ). */
.navbar.bg-navy .navbar-search .input-group-text {
  display: flex !important;
  align-items: center !important;
}
/* La loupe s'efface des que l'on tape, comme sur la recherche du tableau. */
.navbar.bg-navy .navbar-search:has(input:not(:placeholder-shown)) .input-group-text {
  display: none !important;
}

/* 34.19 — LE BOUTON QUI EFFACE LA RECHERCHE PASSE AU CANON.
   Demande de Leck (2026-07-24) : bleu pale au repos, bleu plein au survol,
   et une forme carree — pas un rond.
   D'OU VENAIT L'ECART : shared.css lui donnait ses propres couleurs
   (#eef3f8 au repos, #dcecff au survol) et un `border-radius: 50%`. Il etait
   donc le seul bouton rond de l'application, avec deux bleus qu'aucun autre
   element ne portait.
   IL PREND TOUTE LA HAUTEUR DU CHAMP (Leck) : 28 px, comme tous les boutons.
   Il faisait 22 px et flottait au milieu du champ ; a 28 il se cale d'un bord
   a l'autre et retrouve la meme assise que « Actualiser » ou « Colonnes ». */
.ork-search-clear {
  width: var(--ssa-h-btn) !important;
  height: var(--ssa-h-btn) !important;
  background: var(--ssa-bleu-pale) !important;
  color: var(--ssa-bleu-texte) !important;
  border: 0 !important;
  flex: 0 0 auto !important;   /* il ne se comprime pas quand le champ retrecit */
  /* Meme forme que les autres boutons du canon : deux coins adoucis, deux
     coins vifs. Ce n'est pas un rond, et ce n'est pas non plus un carre
     parfaitement sec — c'est la signature de forme du theme SSA. */
  border-radius: 0 var(--ssa-rayon-panneau) 0 var(--ssa-rayon-panneau) !important;
}
.ork-search-clear:hover,
.ork-search-clear:focus-visible {
  background: var(--ssa-bleu) !important;
  color: var(--ssa-blanc) !important;
}

/* 34.18 — LE PIED DU TABLEAU A LA MEME HAUTEUR QUE SA BARRE DU HAUT.
   Constat de Leck (capture du 2026-07-24) : « ces deux blocs n'ont pas la meme
   hauteur ». MESURE : 39 px en haut, 63 px en bas — et les deux moities du
   pied (Importer/Exporter d'un cote, pagination de l'autre) n'etaient meme pas
   alignees entre elles, avec des marges internes de 15 et 17 px.
   POURQUOI CA COMPTE : le haut et le bas encadrent la meme liste. Des qu'ils
   n'ont pas la meme epaisseur, le bloc parait pencher vers le bas.
   On reprend donc exactement les valeurs de la barre du haut : min-height 38
   et 5 px de marge interne haut et bas. */
.ork-table-card .ork-table-footer-tools,
.ork-table-card .dataTables_paginate {
  /* HAUTEUR FERMEE, pas seulement un minimum : avec `min-height`, la moitie
     droite ressortait quand meme a 42 px — la liste des numeros de page
     ajoutait ses propres marges. Les deux moities du pied doivent faire la
     MEME hauteur, sinon elles se decalent l'une par rapport a l'autre dans la
     grille du tableau. Tout ce qu'elles contiennent fait 28 px : il n'y a donc
     rien qui puisse deborder de 38. */
  height: 38px !important;
  min-height: 38px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  display: flex !important;
  align-items: center !important;   /* les deux moities se calent sur le meme axe */
}
/* La liste des numeros de page ne doit pas rajouter de hauteur par-dessus. */
.ork-table-card .dataTables_paginate .pagination {
  margin: 0 !important;
  align-items: center !important;
}

/* 34.17 — LE TEXTE DU BLOC DE FILTRES REDEVIENT NET.
   Constat de Leck : « les champs du bloc filtre ont l'air floutes sur la vue
   eleves, alors que sur le tableau de bord c'est mieux ».
   MESURE (2026-07-24) : sur eleves.html, le bloc vit dans un panneau qui porte
   en PERMANENCE `will-change: opacity, transform, filter` et
   `backface-visibility: hidden` (shared.css l.1700), plus, pendant la
   bascule, un `filter: drop-shadow(...)`.
   POURQUOI CA FLOUTE : chacune de ces proprietes deporte l'element sur une
   couche graphique separee. Le navigateur abandonne alors le lissage
   SOUS-PIXEL — celui qui exploite les trois composantes rouge/vert/bleu de
   chaque pixel pour dessiner des lettres franches — au profit d'un lissage en
   niveaux de gris, plus laiteux. Le tableau de bord n'a aucune de ces
   proprietes : c'est toute la difference que Leck voit.
   `will-change` est fait pour PREVENIR le navigateur juste avant une
   animation, pas pour rester en place a demeure ; declare en permanence, il ne
   fait plus qu'imposer son cout.
   CE QU'ON PERD : une bascule Indicateurs/Filtres peut-etre un cheveu moins
   fluide sur une machine modeste. On l'echange contre du texte net en
   permanence — c'est l'etat de repos qui est lu 99 % du temps.
   shared.css etant intouchable, la neutralisation se fait ici. */
[data-view-panel] {
  will-change: auto !important;
  backface-visibility: visible !important;
}
.ork-view-panel-stage { will-change: auto !important; }
/* L'ombre de la bascule passe de `filter` a `box-shadow` : meme dessin, mais
   `box-shadow` n'entraine pas le texte sur une couche a part. */
.ork-view-panel-stage.is-morphing {
  filter: none !important;
  box-shadow: 0 12px 26px rgba(15, 35, 58, .055) !important;
}

/* 34.15 — LE BOUTON DU MENU : TROIS LIGNES, TOUJOURS A LA MEME PLACE.
   Demandes de Leck (2026-07-24) : « en mode reduit le menu est un peu large » ;
   « mets le bouton a 3 lignes au lieu de la fleche » ; « qu'il ne bouge pas de
   position, peu importe le mode, et qu'il reste aligne avec les icones des
   menus, meme couleur et meme dimension ».
   POURQUOI IL BOUGEAIT : l'en-tete du rail etait en `space-between` (titre a
   gauche, bouton a droite), et passait en `center` une fois le rail plie. Le
   bouton faisait donc DEUX sauts — un a chaque changement d'etat. En le
   plaçant a gauche dans les deux modes, il devient un point fixe : le seul
   repere qui ne bouge jamais quand tout le reste se replie. */
:root {
  --ssa-icone-rail: #5f7d8c;      /* la couleur des icones du menu, en un seul endroit */
  /* LE TRAIT ENTRE DEUX LIGNES DE TABLEAU. Passe de #d2d2d2 a #ededed puis a
     #f4f4f4 : Leck le trouvait encore trop marque. 1 px est le minimum qu'un
     ecran sache tracer — on ne peut donc pas l'AMINCIR, seulement l'eclaircir.
     A #f4f4f4 il ne reste qu'un souffle entre le blanc du fond et lui : c'est
     la limite avant de ne plus rien voir du tout.
     C'EST ICI, ET NULLE PART AILLEURS, qu'on regle cette finesse. */
  --ssa-filet-tableau: #f4f4f4;
}

.ssa-rail-entete {
  justify-content: flex-start !important;
  /* 8 px = exactement le retrait des icones de menu (`.sidebar-icon`, left: 8px). */
  padding-left: 8px !important;
  gap: 6px !important;
}
.ssa-rail-plier {
  order: -1 !important;        /* le bouton passe AVANT le titre, sans toucher au HTML */
  /* Memes dimensions que `.sidebar-icon` : 30 x 30, glyphe de 17 px. */
  width: 30px !important;
  height: 30px !important;
  font-size: 17px !important;
  color: var(--ssa-icone-rail) !important;
}
.ssa-rail-plier__ico { font-size: 17px !important; }
/* En mode plie, l'en-tete restait centree : le bouton se decalait vers la
   droite alors que les icones, elles, ne bougeaient pas. */
body.ssa-rail-plie .ssa-rail-entete {
  justify-content: flex-start !important;
  padding-left: 8px !important;
}
/* LES TROIS LIGNES. `\E700` est le glyphe « menu » de Segoe MDL2, la police
   d'icones de Windows deja utilisee par ce bouton. Le meme dessin dans les
   DEUX etats : ce bouton dit « ouvrir/fermer le menu », pas « aller a gauche »
   — un chevron qui change de sens obligeait a lire son orientation pour
   comprendre ce qu'il allait faire. */
.ssa-rail-plier__ico::before,
body.ssa-rail-plie .ssa-rail-plier__ico::before { content: "\E700" !important; }
/* Poste depourvu de cette police : le caractere « trigramme » ☰ donne le meme
   dessin dans les polices courantes. */
html.ssa-sans-mdl2 .ssa-rail-plier__ico::before,
html.ssa-sans-mdl2 body.ssa-rail-plie .ssa-rail-plier__ico::before { content: "\2630" !important; }

/* MENU REDUIT PLUS ETROIT : 76 -> 56 px. L'icone occupe de 8 a 38 px ; 56
   laisse la respiration necessaire a droite sans conserver une colonne vide. */
body.ssa-rail-plie { --ssa-rail-w: 56px !important; }

/* EN MODE REDUIT, TOUT EST CENTRE — BOUTON COMPRIS (Leck, 2026-07-24).
   J'avais d'abord cale les icones a gauche, a 8 px, pour qu'elles s'alignent
   sur le bouton. Le resultat etait aligne mais visuellement de travers : dans
   une colonne de 56 px, une icone de 30 px posee a 8 px laisse 18 px de vide a
   droite — le rail penche.
   La bonne lecture de la demande initiale (« que le bouton reste aligne avec
   les icones ») est donc : ils partagent le meme axe, et cet axe est le CENTRE
   de la colonne. Le bouton ne bouge toujours pas d'un mode a l'autre — c'est
   ce qui comptait — et le rail reduit est droit. */
body.ssa-rail-plie .sidebar-link {
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.ssa-rail-plie .ssa-rail-entete {
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* PLUS DE FILET DE SECTION EN MODE REDUIT (Leck : « ce trait parasite »).
   Il avait ete ajoute pour qu'on continue de voir le passage d'un groupe
   d'icones au suivant une fois les titres masques. A l'usage, il ne se lit pas
   comme une separation mais comme un artefact — d'autant que les groupes
   restent perceptibles par l'espacement. */
body.ssa-rail-plie .sidebar-cat {
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   40. BANDEAU SOMBRE (ARDOISE) DES BLOCS DE FICHE — 1 bloc / 2 blocs / 3 blocs
   ══════════════════════════════════════════════════════════════════════════
   Leck a valide (2026-07-25) un bandeau d'en-tete SOMBRE (ardoise) sur le
   BLOC PRINCIPAL des vues « fiche ». Il porte les BOUTONS D'ACTION ; le titre
   quitte le gris/bleu pour du CLAIR (voir la note « titre » plus bas). Pour
   l'unite demandee — « comme le bandeau du bloc liste et du rail » — les TROIS
   en-tetes de bloc de la console fiche prennent la meme ardoise : rail, liste,
   detail. Cela vaut que le bloc principal soit SEUL (1 bloc) ou accompagne de
   la liste (2 blocs).

   PORTEE VOLONTAIREMENT LIMITEE a `#ssa-console` (les pages fiche :
   eleve-detail.html et table-record-detail.html). POURQUOI : les pages de MENU
   (tableaux) ne portent PAS ce conteneur ; leur bandeau clair reste donc
   inchange. On valide d'abord le pilote « fiche » avant toute generalisation
   aux tableaux (regle : valider un pilote visuel avant de generaliser).

   NOTE « titre passe au NOIR » : un titre litteralement noir sur une ardoise
   sombre serait illisible (contraste sous le seuil). On l'interprete donc
   comme « le titre QUITTE le bleu d'accent » : sur l'ardoise il est rendu
   BLANC. Pour un titre plus fonce, il suffit d'eclaircir `--ssa-ardoise` (une
   seule variable) — a valider en revue visuelle. */
:root {
  --ssa-ardoise:      #2f3b47;   /* ardoise sombre du bandeau de bloc */
  --ssa-ardoise-bord: #46545f;   /* filet du bas, un cran plus clair */
  --ssa-ardoise-txt:  #ffffff;   /* titre + libelles poses sur l'ardoise */
  --ssa-ardoise-txt2: #c9d3db;   /* sous-texte / compte : contraste plus doux */
  --ssa-or:           #d4860a;   /* or du canon : bouton d'action primaire */
}

/* Les TROIS en-tetes de bloc passent en ardoise (ils etaient sur #f3f3f3). */
#ssa-console .ssa-rail-entete,
#ssa-console .ssa-liste__entete,
#ssa-console .ssa-detail__entete {
  background: var(--ssa-ardoise);
  border-bottom-color: var(--ssa-ardoise-bord);
}

/* Titres en clair (ils etaient fonces, illisibles sur l'ardoise). */
#ssa-console .ssa-rail-entete__titre,
#ssa-console .ssa-liste__titre,
#ssa-console .ssa-detail__titre { color: var(--ssa-ardoise-txt); }
#ssa-console .ssa-liste__compte,
#ssa-console .ssa-detail__sous  { color: var(--ssa-ardoise-txt2); }

/* Bouton plier/deplier du rail : icone claire, fond au survol translucide. */
#ssa-console .ssa-rail-plier { color: var(--ssa-ardoise-txt2); }
#ssa-console .ssa-rail-plier:hover {
  background: rgba(255, 255, 255, .14);
  color: var(--ssa-ardoise-txt);
}

/* BOUTONS D'ACTION du bloc principal, poses SUR l'ardoise. Ils etaient dessines
   pour un fond clair (texte bleu sur blanc) : ILLISIBLES ici. On les repasse en
   « contour clair » — bord et texte blancs, fond translucide au survol. Le
   bouton PRIMAIRE (Valider) garde l'or du canon pour rester l'action forte.
   La specificite (#id + 2 classes) depasse la regle claire d'origine. */
#ssa-console .ssa-detail__entete .ssa-detail__actions .btn {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  color: #fff !important;
  box-shadow: none !important;
}
#ssa-console .ssa-detail__entete .ssa-detail__actions .btn:hover {
  background: rgba(255, 255, 255, .16) !important;
  border-color: #fff !important;
  color: #fff !important;
}
#ssa-console .ssa-detail__entete .ssa-detail__actions .btn.is-primaire,
#ssa-console .ssa-detail__entete .ssa-detail__actions .btn.btn-primary {
  background: var(--ssa-or) !important;
  border-color: var(--ssa-or) !important;
  color: #fff !important;
}
#ssa-console .ssa-detail__entete .ssa-detail__actions .btn.is-primaire:hover,
#ssa-console .ssa-detail__entete .ssa-detail__actions .btn.btn-primary:hover {
  filter: brightness(1.08);
}

/* 3e BLOC « detail approfondi » : c'est un panneau `.ssa-detail` de plus. En
   vue 3 blocs, le principal et l'approfondi se partagent la place a parts
   egales, a droite de la liste (430 px fixe). Aucune largeur en dur : le flex
   d'origine des `.ssa-detail` (1 1 auto) suffit ; cette regle ne fait que
   documenter l'intention et garantir une largeur minimale lisible. */
#ssa-console .ssa-approfondi { min-width: 0; }


/* ============================================================
   36. TRANSITIONS DE NAVIGATION (#21, 2026-07-25)
   LE FLASH : chaque clic de menu rechargeait une page MPA "a blanc"
   (ecran vide un instant, puis tout repeint) — impression de casse.
   LA PARADE : @view-transition (Chrome 126+) — le navigateur garde une
   photo de l'ancienne vue et fond la nouvelle par-dessus (~180 ms).
   DEGRADATION PROPRE : navigateur sans support = comportement d'avant
   (le fond gris inline des pages evite deja le blanc pur).
   ============================================================ */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 180ms; }

/* ============================================================
   37. BARRE DE DEFILEMENT DU RAIL — DISCRETE (Leck, 26/07/2026)
   Le menu compte une vingtaine d'entrees : sur un ecran de 900 px il depasse
   d'environ 90 px et doit donc pouvoir defiler. Mais sa barre de defilement
   s'affichait en permanence, au milieu de l'ecran, alors que le contenu
   principal, lui, n'en a plus. On garde le DEFILEMENT (sinon les derniers
   menus seraient inatteignables) et on rend la barre FINE et discrete : elle
   ne se remarque qu'au survol du rail. Aucune entree de menu n'est perdue.
   ============================================================ */
.sidebar-inner {
  scrollbar-width: thin;                        /* Firefox */
  scrollbar-color: transparent transparent;     /* invisible au repos */
}
.sidebar-inner:hover { scrollbar-color: var(--ssa-gris-pied) transparent; }
.sidebar-inner::-webkit-scrollbar { width: 6px; }
.sidebar-inner::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.sidebar-inner:hover::-webkit-scrollbar-thumb { background: var(--ssa-gris-pied); }

/* ============================================================================
   41. MODULE SUPPORT — LIGNE DE DEMANDE, RESUME DE FICHE, ECHANGE
   ============================================================================
   Demande de Leck (26/07/2026) : aligner l'ecran Support sur le niveau de
   finition du reste de l'application.

   TOUT PART DES CLASSES EXISTANTES : `.ssa-item` (la ligne de liste, deja
   utilisee par la fiche eleve) garde son lisere de selection, son survol et sa
   bordure. On n'ajoute ici QUE ce que la ligne de ticket a en plus -- trois
   etages au lieu d'un seul. C'est pour cela que le modificateur s'appelle
   `--ticket` : il ne remplace pas `.ssa-item`, il le complete. */

/* ── LA LIGNE DE DEMANDE, SUR TROIS ETAGES ────────────────────────────────
   1. le TITRE (l'objet) et, a droite, les badges ;
   2. le CONTEXTE : le debut de la description -- c'est lui qui evite d'ouvrir
      la fiche pour savoir de quoi il s'agit ;
   3. la META en petit : code, demandeur, date.
   `.ssa-item` est en `display:flex; align-items:center` (une seule ligne) :
   on repasse donc en colonne, sinon les trois etages se mettraient cote a cote. */
.ssa-item--ticket {
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding-top: 9px;
  padding-bottom: 9px;
}
.ssa-item__haut {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.ssa-item__titre {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ssa-texte);
  /* Un objet trop long ne doit PAS pousser les badges hors du bloc : il se
     coupe sur deux lignes au maximum. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ssa-item__badges {
  display: flex; gap: 4px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end;
  max-width: 52%;
}
.ssa-item__contexte {
  font-size: 12px;
  color: var(--ssa-label);
  line-height: 1.35;
  /* Une seule ligne : c'est un APERCU, pas le texte de la demande. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ssa-item__meta {
  display: flex; gap: 5px; flex-wrap: wrap;
  font-size: 11px;
  color: var(--ssa-label);
}

/* ── LE RESUME DE FICHE, ENTRE LE BANDEAU ET LES ONGLETS ──────────────────
   POURQUOI CETTE ZONE EXISTE (Leck, 26/07/2026) : les informations
   principales d'une demande doivent etre lisibles SANS avoir a chercher dans
   quel onglet elles se trouvent. Elle est donc HORS des onglets, et ne bouge
   pas quand on passe de « Detail » a « Suivi ».
   La grille s'adapte d'elle-meme a la largeur : autant de colonnes que la
   place le permet, jamais moins de 150 px par champ. */
.ssa-detail__resume { border-bottom: 1px solid var(--ssa-bordure); background: var(--ssa-blanc); }
.ssa-detail__resume:empty { display: none; }
.ssa-resume {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 18px;
  padding: 12px 15px;
}
.ssa-resume__champ { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ssa-resume__intitule {
  font-size: 11px;
  color: var(--ssa-label);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.ssa-resume__valeur {
  font-size: 13px;
  color: var(--ssa-texte);
  overflow: hidden; text-overflow: ellipsis;
}

/* ── UN ECHANGE DE L'HISTORIQUE ───────────────────────────────────────────
   Le lisere de gauche dit d'un coup d'oeil a QUI s'adresse le message : bleu
   pour un echange visible du demandeur, ambre pour une NOTE INTERNE. Celui
   qui traite doit savoir a tout instant s'il ecrit en interne ou au
   demandeur -- se tromper la-dessus est la faute classique d'un outil de
   support. */
.ssa-echange {
  border-left: 3px solid var(--ssa-bleu);
  padding: 2px 0 2px 12px;
  margin-bottom: 14px;
}
.ssa-echange--interne { border-left-color: var(--ork-tag-ambre-texte); }
.ssa-echange__entete {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  font-size: 12px;
  margin-bottom: 2px;
}
.ssa-echange__texte { font-size: 13px; color: var(--ssa-texte); white-space: pre-wrap; }

/* ── SECTIONS 42 et 43 RETIREES le 26/07/2026 ─────────────────────────────
   Elles reglaient la couleur des bandeaux d'en-tete et l'espace du bas.
   Ces deux points sont devenus des CANONS OFFICIELS de l'application et
   vivent desormais dans `commun/blocs.css`, avec le troisieme (le bandeau
   inferieur). Les garder ici aurait fait deux sources pour une meme regle.
   NOTE : la section 40 (bandeau ardoise) est desormais SANS EFFET --
   `commun/blocs.css` la surcharge integralement. Elle pourra etre retiree
   lors d'un prochain nettoyage, apres controle visuel. */