/* legacy.css — reprise du langage visuel de l'ancien back-office Educia :
   barre d'onglets colorée par section, bandeau de widgets d'état, panneaux à
   en-tête gris, tableaux denses à filets fins. Utilisé par la page d'accueil
   et par les fiches client / élève / professeur, afin que les utilisateurs
   retrouvent des repères familiers.

   Les couleurs d'onglets reprennent celles de l'ancien admin : rouge sombre
   pour le dossier client, cyan pour le dossier professeur. */

/* Jetons reprenant les noms utilisés par les styles en ligne des vues
   (héritage de l'autre feuille), avec des valeurs accordées au gabarit
   dense : les pages converties gardent ainsi leurs espacements. */
body.legacy {
  --space-1: 4px; --space-2: 6px; --space-3: 10px; --space-4: 12px;
  --space-6: 18px; --space-8: 24px;
  --color-bg: #fff; --color-surface: #FAFAFA; --color-text: #333;
  --color-divider: #DDD;
  --color-accent: #4B9CC9; --color-accent-100: #EAF4FB;
  --color-accent-600: #3C82A8; --color-accent-700: #1E6B36; --color-accent-800: #004961;
  --color-accent-2: #C00; --color-accent-2-100: #FBE7E7;
  --color-accent-2-700: #96201F; --color-accent-2-800: #7A1A19;
  --font-mono: 'Courier New', monospace;
  --radius-md: 2px;
}

body.legacy {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #333;
  background: #fff;
}
body.legacy a { text-decoration: none; color: #333; }
/* En texte sur blanc, #4B9CC9 ne vaut que 3,04 pour 1. Il reste la couleur
   des filets et des reperes ; le texte prend le ton du dessous. */
body.legacy a:hover { color: #35759A; }

/* ---------- barre d'onglets de section ---------- */
.lg-tabs { display: flex; align-items: center; gap: 0; flex-wrap: wrap; padding: 0 8px; }
/* La couleur du texte DOIT etre qualifiee par `body.legacy` : la regle
   generique `body.legacy a { color: #333 }` pese (0,1,2) -- `body` est un
   selecteur d'element -- et battait `.lg-tabs a`, qui ne pese que (0,1,1).
   Les onglets sortaient alors en #333 sur fond de section : 1,70 pour 1 de
   contraste sur le rouge du dossier client, soit un texte invisible. */
body.legacy .lg-tabs a {
  color: #fff; font-size: 12px; padding: 9px 10px; display: block;
  opacity: 1; white-space: nowrap;
}
body.legacy .lg-tabs a:hover { opacity: 1; background: rgba(255, 255, 255, .14); color: #fff; }
/* L'onglet courant se marque par un CREUX, pas par un voile blanc. Le voile
   eclaircissait le fond de la section et faisait tomber le blanc a 3,1 pour 1
   sur le vert du cours et le bleu-vert du candidat ; en creux il monte a 7,2.
   Le relief reste tout aussi lisible comme " page ouverte ". */
body.legacy .lg-tabs a.on {
  opacity: 1; font-weight: bold; background: rgba(0, 0, 0, .22);
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .55);
}
/* Un module non migre reste en retrait, mais la nuance porte sur la COULEUR
   et non sur l'opacite du bloc : 12 % de transparence suffisent a le
   distinguer d'un lien actif, et laissent 4,7 pour 1 au minimum sur les six
   teintes. A .62, le libelle tombait a 3,4 pour 1 sur le cyan du professeur. */
body.legacy .lg-tabs a.off {
  opacity: 1; color: rgba(255, 255, 255, .88); cursor: default;
  /* La nuance de couleur seule est trop faible pour distinguer un module non
     migre d'un lien actif — et la creuser davantage repasserait sous le seuil
     de contraste. Un souligne pointille porte donc l'information sans rien
     coûter en lisibilite. */
  text-decoration: underline dotted rgba(255, 255, 255, .5);
  text-underline-offset: 3px;
}
body.legacy .lg-tabs a.off:hover { background: none; }
.lg-tabs .sp { margin-left: auto; }
/* Identite + deconnexion restent groupees a droite : elles basculent
   ensemble a la ligne plutot que de se separer quand la barre est etroite. */
.lg-tabs .util { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; }
/* Sépare les onglets legacy des sections réellement migrées. */
.lg-tabs .sep { width: 1px; align-self: stretch; margin: 6px 8px;
  background: rgba(255, 255, 255, .35); flex: 0 0 1px; }
.lg-tabs.accueil .sep { background: #DDD; }
body.legacy .lg-tabs .who { color: #fff; font-size: 11px; padding: 0 4px; white-space: nowrap; }
.lg-tabs form { margin: 0; }
/* En creux, comme la pastille Admin : un voile blanc eclaircissait le fond
   sous un texte blanc, ce qui tombait a 3,5 pour 1 sur les teintes claires. */
body.legacy .lg-tabs button {
  background: rgba(0, 0, 0, .25); color: #fff;
  border: 1px solid rgba(255, 255, 255, .4);
  font-size: 11px; padding: 4px 10px; border-radius: 2px; cursor: pointer;
}
body.legacy .lg-tabs button:hover { background: rgba(0, 0, 0, .38); }

.lg-tabs.client { background: #A81A1A; }
/* Assombri de #1B9AAA : le blanc pur n'y atteignait que 3,36 pour 1. Meme
   teinte, assez bas pour que le libelle d'un module non migre passe encore
   (4,9 pour 1) -- c'est la seule des six a l'avoir demande. */
.lg-tabs.prof   { background: #12707C; }
.lg-tabs.eleve  { background: #4B6BA8; }
.lg-tabs.cours  { background: #5A7A28; }
/* Les viviers de prospection : des teintes plus sourdes que celles des fiches
   definitives, pour qu'on voie tout de suite qu'on est en amont du dossier. */
.lg-tabs.pp     { background: #4A7C84; }
.lg-tabs.clp    { background: #8A5A2B; }
.lg-tabs.accueil{ background: #fff; border-bottom: 3px solid #4B9CC9; }

/* ---------- barre de fiche : un enregistrement, pas une navigation ----------
   L'ancien admin ouvrait les fiches dans une fenetre separee (OpenWindow), de
   sorte qu'on ne pouvait pas confondre le menu global et celui d'un dossier.
   Nos fiches s'ouvrent dans leur propre onglet ; ces deux marques rendent la
   distinction lisible a l'interieur de la page elle-meme. */

/* Le nom de l'enregistrement, en tete de sa barre. */
.lg-tabs.fiche .rec {
  color: #fff; font-size: 12px; font-weight: bold; padding: 9px 12px 9px 4px;
  margin-right: 4px; border-right: 1px solid rgba(255, 255, 255, .3);
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Sortie vers l'admin : detachee du menu de l'enregistrement, en creux plutot
   qu'en relief, pour ne pas se lire comme un onglet de plus. */
body.legacy .lg-tabs .retour {
  font-size: 11px; padding: 3px 9px; border-radius: 2px; color: #fff;
  background: rgba(0, 0, 0, .18); border: 1px solid rgba(255, 255, 255, .45);
  opacity: 1;
}
body.legacy .lg-tabs .retour:hover { background: rgba(0, 0, 0, .3); }
/* La barre d'accueil est blanche : elle reprend le texte sombre. Ces regles
   viennent APRES et pesent autant, elles gagnent donc a leur tour. */
body.legacy .lg-tabs.accueil a { color: #333; opacity: 1; box-shadow: none; }
/* #999 sur blanc ne vaut que 2,85 pour 1 ; #767676 est le gris le plus clair
   qui passe le seuil de 4,5. */
body.legacy .lg-tabs.accueil a.off {
  color: #767676;
  /* Sur fond blanc le pointille blanc de la regle generale serait invisible. */
  text-decoration-color: #B0B0B0;
}
body.legacy .lg-tabs.accueil a:hover { background: none; color: #35759A; }
/* #4B9CC9 sur blanc ne vaut que 3,04 pour 1 : le meme bleu, deux tons plus
   bas, en donne 5,05. Le filet, lui, reste dans la teinte claire. */
body.legacy .lg-tabs.accueil a.on { background: none; color: #35759A; border-bottom: 2px solid #4B9CC9; }
body.legacy .lg-tabs.accueil .who { color: #767676; }
.lg-tabs.accueil .who { color: #888; }
/* La barre blanche garde un bouton clair a texte sombre : la regle generale
   ci-dessus, qualifiee par `body.legacy`, la battait en specificite et
   laissait du blanc sur du gris clair (1,83 pour 1). */
body.legacy .lg-tabs.accueil button { background: #EEE; color: #333; border-color: #CCC; }
body.legacy .lg-tabs.accueil button:hover { background: #DDD; }

/* ---------- ligne d'identité sous les onglets ---------- */
.lg-ident { display: flex; align-items: baseline; gap: 10px; padding: 10px 16px 4px; flex-wrap: wrap; }
.lg-ident h1 { font-size: 19px; margin: 0; font-weight: bold; font-family: Arial, sans-serif; }
.lg-ident .sub { color: #666; font-size: 11.5px; }
.lg-ident .sp { margin-left: auto; }
.lg-ident .mail { color: #4B9CC9; font-size: 11.5px; }

/* ---------- bandeau de widgets d'état ---------- */
.lg-strip {
  display: flex; gap: 0; padding: 6px 16px 10px; flex-wrap: wrap;
  border-bottom: 1px solid #DDD; align-items: flex-start;
}
.lg-col { min-width: 150px; padding-right: 22px; }
.lg-col > .t {
  font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
  color: #888; padding-bottom: 3px; white-space: nowrap;
}
.lg-line {
  display: flex; align-items: center; gap: 6px;
  border-bottom: 1px solid #E8E8E8; padding: 3px 0; font-size: 11.5px; min-height: 19px;
}
.lg-line .v { margin-left: auto; color: #666; font-size: 11px; }
.lg-line .strong { font-weight: bold; font-size: 13px; }
.lg-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: #CCC; }
.lg-dot.ok { background: #2E9B4F; }
.lg-dot.ko { background: #C00; }
.lg-dot.warn { background: #E8A33D; }
.lg-links { padding: 4px 16px 10px; font-size: 11px; color: #4B9CC9; display: flex; gap: 18px; flex-wrap: wrap; }
.lg-links a { color: #4B9CC9; }

/* ---------- panneaux ---------- */
.lg-panel { border: 1px solid #DDD; margin-bottom: 14px; background: #fff; }
.lg-panel > .h {
  background: #F4F4F4; border-bottom: 1px solid #CCC; padding: 4px 8px;
  font-size: 11.5px; font-weight: bold; text-transform: uppercase; letter-spacing: .04em;
  display: flex; align-items: center; gap: 8px;
}
.lg-panel > .h .sp { margin-left: auto; }
.lg-panel > .h .clock { color: #888; font-weight: normal; text-transform: none; font-size: 11px; }
.lg-panel > .h a { color: #4B9CC9; font-weight: normal; text-transform: none; }
.lg-panel > .b { padding: 8px; }
.lg-panel > .b.tight { padding: 0; }

/* ---------- tableaux denses ---------- */
table.lg { width: 100%; border-collapse: collapse; font-size: 11.5px; }
table.lg th {
  background: #EDEDED; border: 1px solid #DDD; padding: 3px 6px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: #555; text-align: left;
  white-space: nowrap;
}
table.lg td { border: 1px solid #E8E8E8; padding: 3px 6px; }
table.lg tbody tr:hover { background: #F7FBFD; }
table.lg .r { text-align: right; }
table.lg .c { text-align: center; }

/* ---------- pastilles de statut ---------- */
.lg-tag {
  display: inline-block; font-size: 10.5px; padding: 1px 7px; border-radius: 2px;
  border: 1px solid transparent; white-space: nowrap;
}
.lg-tag.neutre  { background: #EFEFEF; color: #555; border-color: #DDD; }
.lg-tag.succes  { background: #E4F5E9; color: #1E6B36; border-color: #BFE3CB; }
.lg-tag.attente { background: #FDF3DC; color: #8A6014; border-color: #F0DFAE; }
.lg-tag.echec   { background: #FBE7E7; color: #96201F; border-color: #F0C7C6; }
.lg-tag.inconnu { background: #F2F2F2; color: #999; border-color: #E0E0E0; border-style: dashed; }

/* ---------- grilles matières (vert) et disponibilités (bleu) ---------- */
table.lg-grid { border-collapse: collapse; font-size: 11px; }
table.lg-grid th {
  background: #F4F4F4; border: 1px solid #CCC; padding: 2px 5px;
  font-size: 10px; font-weight: normal; color: #555; white-space: nowrap;
}
table.lg-grid td { border: 1px solid #CCC; padding: 0; width: 26px; height: 17px; text-align: center; }
table.lg-grid td.lbl { width: auto; text-align: left; padding: 2px 6px; background: #FAFAFA; white-space: nowrap; }
table.lg-grid td.on-mat { background: #8DC63F; }
table.lg-grid td.on-dispo { background: #4B9CC9; }
table.lg-grid.dark th { background: #222; color: #DDD; border-color: #444; }
table.lg-grid.dark td { border-color: #444; }
table.lg-grid.dark td.lbl { background: #222; color: #DDD; }

/* ---------- boutons ---------- */
.lg-btn {
  background: #F4F4F4; border: 1px solid #BBB; color: #333;
  font-size: 11px; padding: 3px 10px; border-radius: 2px; cursor: pointer;
}
.lg-btn:hover { background: #E8E8E8; }
/* Le bleu d'accent #4B9CC9 sert de couleur de lien et de filet ; en aplat
   sous du texte blanc il ne donnait que 3,04 pour 1. Le bouton plein prend
   donc le ton du dessous, deja present dans la palette comme bordure et
   comme survol : 5,04 pour 1. Le bleu clair reste inchange partout ailleurs. */
.lg-btn.primary { background: #35759A; border-color: #2C6182; color: #fff; }
.lg-btn.primary:hover { background: #2C6182; }
.lg-btn.yellow { background: #FC0; border-color: #E0B400; font-weight: bold; }
.lg-btn.yellow:hover { background: #4B9CC9; border-color: #3C82A8; color: #fff; }
.lg-btn.yellow.off, .lg-btn.off { background: #F2F2F2; border-color: #DDD; color: #AAA; cursor: default; }
.lg-btn.yellow.off:hover, .lg-btn.off:hover { background: #F2F2F2; color: #AAA; }

.lg-select, .lg-input {
  font-family: Arial, Helvetica, sans-serif; font-size: 11px;
  border: 1px solid #CCC; padding: 2px 4px; background: #fff; color: #333;
}

/* ---------- équivalents des classes de mise en page de broadsheet, pour
   les écrans (listes, recherche, formulaires) qui ne chargent plus que
   cette feuille ---------- */
body.legacy .page-shell { max-width: 1440px; margin: 0 auto; padding: 14px 16px; }
body.legacy .kicker {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #888;
}
body.legacy h1 { font-size: 20px; margin: 4px 0 6px; font-weight: bold; font-family: Arial, sans-serif; }
body.legacy h1 + p, body.legacy .text-muted { color: #888; font-size: 11.5px; }
body.legacy p { margin: 0 0 8px; }
body.legacy .field > label { display: block; font-size: 10.5px; color: #888; margin-bottom: 3px; }
body.legacy .field { min-width: 0; }
body.legacy .lg-input, body.legacy .lg-select { width: 100%; min-height: 26px; box-sizing: border-box; }
body.legacy .text-mono { font-family: 'Courier New', monospace; }
body.legacy textarea.lg-input { font-family: Arial, Helvetica, sans-serif; }

/* ---------- gabarit commun des listes (clients / eleves / profs) ----------
   Titre compact, barre d'outils grise integree au panneau, pagination en
   pied de panneau : la meme silhouette que les listings de l'ancien admin. */
.lg-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.lg-head h1 { margin: 0; font-size: 19px; }
.lg-head .kicker { flex: 0 0 auto; }
.lg-head .count { color: #888; font-size: 11.5px; }
.lg-head .sp { margin-left: auto; }

.lg-toolbar {
  display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap;
  background: #FAFAFA; border-bottom: 1px solid #DDD; padding: 7px 8px;
}
.lg-toolbar .field { flex: 0 0 auto; }
.lg-toolbar .sp { margin-left: auto; }
.lg-toolbar .hint { color: #999; font-size: 10.5px; }

.lg-pager {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  padding: 6px 8px; border-top: 1px solid #DDD; background: #FAFAFA;
  font-size: 11px; color: #888;
}

/* Bloc encadré des formulaires : même filet gris que .lg-panel, mais sans
   en-tête, chaque bloc portant son propre .kicker. */
.lg-card { border: 1px solid #DDD; background: #fff; padding: 12px; }
.lg-card + .lg-card { margin-top: 12px; }
/* Le premier .kicker du bloc devient l'en-tete gris du panneau : meme
   silhouette que .lg-panel > .h, sans avoir a re-baliser les formulaires. */
body.legacy .lg-card > .kicker:first-child {
  margin: -12px -12px 10px; padding: 4px 8px;
  background: #F4F4F4; border-bottom: 1px solid #CCC;
  font-size: 11.5px; font-weight: bold; color: #555;
}

/* ---------- fenetres modales (partials/composeModals) ----------
   Le partial de composition SMS / e-mail est partage avec les fiches et
   porte les classes .dialog*, .btn et .input de l'ancienne feuille : on les
   definit ici pour que les pages qui ne chargent que legacy.css les rendent
   correctement. */
body.legacy .dialog-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .38);
  display: flex; align-items: center; justify-content: center; z-index: 40;
}
body.legacy .dialog {
  background: #fff; border: 1px solid #999; width: min(520px, 92vw);
  box-shadow: 0 3px 14px rgba(0, 0, 0, .25);
}
body.legacy .dialog-header {
  background: #F4F4F4; border-bottom: 1px solid #CCC; padding: 5px 9px;
  display: flex; align-items: center; gap: 8px;
}
body.legacy .dialog-title { font-size: 12px; font-weight: bold; }
body.legacy .dialog-close {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font-size: 15px; line-height: 1; color: #666;
}
body.legacy .dialog-close:hover { color: #C00; }
body.legacy .dialog-body { padding: 10px; }
body.legacy .dialog-body .field { margin-bottom: 9px; }
body.legacy .dialog-actions {
  display: flex; gap: 6px; justify-content: flex-end;
  padding: 7px 10px; background: #FAFAFA; border-top: 1px solid #DDD;
}
body.legacy .sms-error, body.legacy .mail-error { color: #96201F; font-size: 11px; }

/* Equivalents legacy des boutons et champs de l'ancienne feuille, pour ce
   meme partial. */
body.legacy .btn {
  background: #F4F4F4; border: 1px solid #BBB; color: #333;
  font-size: 11px; padding: 3px 10px; border-radius: 2px; cursor: pointer;
}
body.legacy .btn:hover { background: #E8E8E8; }
body.legacy .btn.btn-primary { background: #4B9CC9; border-color: #3C82A8; color: #fff; }
body.legacy .btn.btn-primary:hover { background: #3C82A8; }
body.legacy .btn.btn-secondary { background: #F4F4F4; border-color: #BBB; color: #333; }
body.legacy .btn.btn-secondary:hover { background: #E8E8E8; }
/* Proportion affichee en petit sous un compteur (pieces du dossier, etc.). */
body.legacy .ratio { color: #888; font-size: 10.5px; }
body.legacy .btn-icon {
  background: none; border: 0; cursor: pointer; font-size: 13px;
  padding: 0 3px; line-height: 1;
}
body.legacy .input, body.legacy textarea.input, body.legacy select.input {
  font-family: Arial, Helvetica, sans-serif; font-size: 11px; width: 100%;
  border: 1px solid #CCC; padding: 3px 4px; background: #fff; color: #333;
  box-sizing: border-box;
}

/* ---------- classes des ecrans rapatries depuis l'app anterieure ----------
   Rendu equivalent a celui de leur feuille d'origine, mais accorde au
   gabarit dense : ces ecrans (rapport mensuel, relance de rentree) ont un
   tableau groupe famille / enfants et quelques boutons compacts. */
body.legacy .text-right { text-align: right; }

body.legacy .btn-mini {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; padding: 2px 7px; border: 1px solid #CCC;
  border-radius: 2px; background: #FAFAFA; cursor: pointer; color: #333;
  font-family: Arial, Helvetica, sans-serif;
}
body.legacy .btn-mini:hover { background: #EDEDED; }

/* Tableau groupe : une ligne par famille, puis ses enfants en retrait. */
body.legacy .table-grouped tbody { border-top: 2px solid #DDD; }
body.legacy .table-grouped tbody:first-of-type { border-top: 0; }
body.legacy .table-grouped tr.row-famille td { background: #EAF4FB; font-weight: bold; }
body.legacy .table-grouped tr.row-entete-enfants td {
  font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
  color: #888; border-bottom: 1px solid #DDD; padding: 2px 6px;
}
body.legacy .table-grouped tr.row-enfant td.indent {
  color: #AAA; text-align: center; width: 20px; padding-right: 0;
}
body.legacy .table-grouped tr.row-enfant.estimee td.classe-inscription {
  color: #999; font-style: italic;
}
body.legacy .table-grouped tbody[hidden] { display: none; }

/* Champs et messages des formulaires de contact de la relance de rentree. */
body.legacy .notes-input {
  font-family: Arial, Helvetica, sans-serif; font-size: 11px;
  border: 1px solid #CCC; padding: 2px 4px; width: 100%; box-sizing: border-box;
}
body.legacy .statut-select { font-size: 11px; border: 1px solid #CCC; padding: 1px 3px; }
body.legacy .statut-save-status { font-size: 10px; color: #888; margin-left: 4px; }
body.legacy .contact-error { color: #96201F; font-size: 11px; }
body.legacy .historique-data { font-size: 11px; }

/* Bascule de vues du rapport mensuel (Prestation / Remuneration / Marge) :
   chaque colonne porte un data-group, et la classe view-* de la table masque
   celles qui ne relevent pas de la vue choisie. Regles fonctionnelles, pas
   decoratives : sans elles la table affiche tout d'un coup. */
body.legacy .report-table.view-prestation [data-group]:not([data-group~="base"]) { display: none; }
body.legacy .report-table.view-remuneration [data-group]:not([data-group~="base"]):not([data-group~="remuneration"]) { display: none; }
body.legacy .report-table.view-marge [data-group]:not([data-group~="base"]):not([data-group~="marge"]) { display: none; }

/* ---------- fiches (tickets) des panneaux d'accueil ---------- */
.lg-ticket { border-bottom: 1px solid #EEE; padding: 7px 8px; }
.lg-ticket:hover { background: #FAFCFE; }
.lg-ticket .top { display: flex; align-items: baseline; gap: 8px; }
.lg-ticket .tel { font-size: 15px; font-weight: bold; }
.lg-ticket .nom { font-size: 12.5px; font-weight: bold; }
.lg-ticket .when { margin-left: auto; color: #999; font-size: 10px; white-space: nowrap; }
.lg-ticket .meta { color: #888; font-size: 10.5px; margin-top: 2px; }
.lg-ticket .obs { color: #666; font-size: 10.5px; margin-top: 3px; }
.lg-ticket .acts { display: flex; gap: 4px; align-items: center; margin-top: 5px; flex-wrap: wrap; }
/* Les deux menus (statut, responsable) sont bornes pour que la rangee
   d'actions tienne sur une ligne dans une colonne de tableau de bord. */
.lg-ticket .acts .lg-select { max-width: 112px; }
.lg-ticket .acts .lg-btn { padding: 3px 7px; }
.lg-ticket .acts label { display: flex; align-items: center; gap: 2px; }
.lg-note { color: #999; font-size: 10.5px; padding: 5px 8px; }

/* ---------- controle de saisie (public/js/validation.js) ----------
   Le champ fautif se signale par un filet rouge et un message sous lui. Le
   message est cree a la volee par le script : la regle de style doit donc
   exister meme si aucune vue ne pose la classe. */
body.legacy .champ-ko,
body.legacy input.champ-ko, body.legacy select.champ-ko {
  border-color: #C00; background: #FFF8F8;
}
body.legacy .champ-ko:focus { outline: 1px solid #C00; }
body.legacy .err-champ {
  display: none; color: #96201F; font-size: 10.5px; margin-top: 3px; line-height: 1.3;
}