/* ==========================================================================
   SMI — couche de modernisation visuelle
   ==========================================================================

   Chargée APRÈS css/smi.css, qu'elle laisse intacte : retirer le <link> dans
   header.inc.php et inc/header.inc.php suffit à revenir à l'apparence d'origine.

   Pourquoi une surcouche plutôt qu'une réécriture : le HTML de SMI date de 2006,
   il est bâti sur des tableaux imbriqués et ~1790 lignes de CSS que 169 pages se
   partagent. Réécrire cette feuille, c'est risquer de casser des écrans qu'on ne
   verra jamais passer. On ne change donc QUE l'apparence, jamais la structure.

   Parti pris : on garde l'identité bleu ardoise de SMI. Ce qui change, c'est la
   lisibilité — corps de texte à 15 px au lieu de 12, annotations à 12 au lieu de
   9, contrastes conformes WCAG AA, cibles de clic assez grandes, et des pastilles
   qui ressemblent à des pastilles.
   ========================================================================== */

:root {
    --smi-encre:        #1f2933;
    --smi-encre-douce:  #52606d;
    --smi-trait:        #d3dce6;
    --smi-fond:         #f7f9fb;
    --smi-blanc:        #ffffff;

    --smi-bleu:         #2b5f8e;
    --smi-bleu-clair:   #eaf1f8;
    --smi-bleu-fonce:   #1d4368;

    --smi-alerte:       #b42318;
    --smi-alerte-fond:  #fef3f2;
    --smi-ok:           #027a48;
    --smi-ok-fond:      #ecfdf3;

    --smi-rayon:        8px;
    --smi-ombre:        0 1px 2px rgba(31, 41, 51, .06), 0 2px 8px rgba(31, 41, 51, .06);
    --smi-police:       system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- Base ---------------------------------------------------------------- */

body,
.base,
td, th, div, span, p, label, li {
    font-family: var(--smi-police);
}

body {
    font-size: 15px;
    line-height: 1.55;
    color: var(--smi-encre);
    background-color: var(--smi-fond);
}

/* Les annotations étaient en 9 px : illisibles au-delà de 40 ans, ce qui est
   exactement le public d'un logiciel de maintenance. */
.annot_petit_gras,
.annot_petit_gras2,
.annot_petit_it,
.annot_petit,
.annot_std,
.annot_std_gras {
    font-size: 12px;
}

/* Les liens héritaient d'un font-size: 9px qui rapetissait le texte des menus
   et des tableaux dès qu'il était cliquable. */
a:link, a:visited, a:hover, a:active {
    font-size: inherit;
    color: var(--smi-bleu);
}

a:hover {
    text-decoration: underline;
}

/* --- Pastilles ----------------------------------------------------------- */

/* Titre de page : c'était une boîte grise de 100 px de large, texte rouge sur
   gris — contraste insuffisant et largeur qui tronquait les titres longs. */
*.titrepage {
    display: inline-block;
    width: auto;
    min-width: 220px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--smi-blanc);
    background: linear-gradient(180deg, #35719f 0%, var(--smi-bleu) 100%);
    padding: 14px 34px;
    border: 0;
    border-radius: 999px;
    box-shadow: var(--smi-ombre);
}

*.titrepageerr {
    display: inline-block;
    font-size: 22px;
    font-weight: 700;
    color: var(--smi-blanc);
    background: var(--smi-alerte);
    padding: 14px 34px;
    border: 0;
    border-radius: 999px;
    box-shadow: var(--smi-ombre);
}

/* Alertes : le jaune sur rouge pur était agressif et brouillait la lecture.
   On garde le code couleur (rouge = problème, vert = ok) en version lisible. */
*.alerte1,
*.alerte2 {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid transparent;
}

*.alerte1 {
    color: var(--smi-alerte);
    background-color: var(--smi-alerte-fond);
    border-color: #fecdca;
}

*.alerte2 {
    color: var(--smi-ok);
    background-color: var(--smi-ok-fond);
    border-color: #a6f4c5;
}

/* --- Boutons ------------------------------------------------------------- */

/* Cibles de clic portées à 40 px de haut (recommandation d'accessibilité). */
.bton_std,
input[type="submit"],
input[type="button"],
input[type="reset"],
button {
    font-family: var(--smi-police);
    font-size: 14px;
    font-weight: 600;
    color: var(--smi-blanc);
    background: var(--smi-bleu);
    border: 0;
    border-radius: var(--smi-rayon);
    padding: 10px 20px;
    min-height: 40px;
    cursor: pointer;
    box-shadow: var(--smi-ombre);
    transition: background-color .15s ease, transform .05s ease;
}

.bton_std:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
button:hover {
    background: var(--smi-bleu-fonce);
}

.bton_std:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active,
button:active {
    transform: translateY(1px);
}

input[type="reset"] {
    color: var(--smi-encre);
    background: var(--smi-blanc);
    border: 1px solid var(--smi-trait);
}

input[type="reset"]:hover {
    background: var(--smi-fond);
}

/* --- Champs de saisie ---------------------------------------------------- */

/* Le gris #C5CED7 sans bordure distincte donnait des champs qu'on ne
   distinguait pas du fond. Fond blanc + bordure franche + focus visible. */
input, select, textarea {
    font-family: var(--smi-police);
    font-size: 14px;
    color: var(--smi-encre);
    background-color: var(--smi-blanc);
    border: 1px solid var(--smi-trait);
    border-radius: 6px;
    padding: 8px 10px;
}

input:focus, select:focus, textarea:focus,
input.iefocus, select.iefocus, textarea.iefocus {
    background-color: var(--smi-blanc);
    border-color: var(--smi-bleu);
    outline: 3px solid rgba(43, 95, 142, .18);
    outline-offset: 0;
}

input[type="checkbox"], input[type="radio"] {
    width: 18px;
    height: 18px;
    padding: 0;
    accent-color: var(--smi-bleu);
}

/* --- Tableaux ------------------------------------------------------------ */

/* Les classes réellement employées par SMI : Mtable (160 tableaux), MtableD,
   MItable, Ltable, Ftable, MtableR. Elles sont déclarées en majuscules dans
   smi.css (TABLE.Mtable) ; on les cible ici en minuscules, à spécificité égale,
   et c'est l'ordre de chargement qui tranche. */
table.Mtable,
table.MtableD,
table.MtableR,
table.MItable,
table.Ltable,
table.Ftable {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--smi-trait);
    border-radius: var(--smi-rayon);
    overflow: hidden;
    background: var(--smi-blanc);
    box-shadow: var(--smi-ombre);
    font-size: 14px;
}

table.Mtable th,
table.MtableD th,
table.MtableR th,
table.MItable th,
table.Ltable th,
table.Ftable th {
    font-size: 13px;
    font-weight: 700;
    color: var(--smi-blanc);
    background-color: var(--smi-bleu);
    border-right: 1px solid rgba(255, 255, 255, .18);
    padding: 12px 14px;
}

table.Mtable td,
table.MtableD td,
table.MtableR td,
table.MItable td,
table.Ltable td,
table.Ftable td {
    height: auto;
    padding: 11px 14px;
    border-bottom: 1px solid var(--smi-trait);
}

table.Mtable tr:last-child td,
table.MtableD tr:last-child td,
table.MItable tr:last-child td {
    border-bottom: 0;
}

/* Alternance de fond : on garde le principe, en plus discret. */
table.Mtable tr:nth-child(odd),
table.MtableD tr:nth-child(odd),
table.MItable tr:nth-child(odd) {
    background-color: #f4f8fc;
}

table.Mtable tr:nth-child(even),
table.MtableD tr:nth-child(even),
table.MItable tr:nth-child(even) {
    background-color: var(--smi-blanc);
}

table.Mtable tr:hover:nth-child(odd),
table.Mtable tr:hover:nth-child(even),
table.MtableD tr:hover:nth-child(odd),
table.MtableD tr:hover:nth-child(even),
table.MItable tr:hover:nth-child(odd),
table.MItable tr:hover:nth-child(even) {
    background-color: var(--smi-bleu-clair);
}

/* --- Barre de menu ------------------------------------------------------- */

/* .sf-menu est en float: left — il sort donc du flux et #barre_menu s'effondrait
   à une hauteur nulle. Une bordure posée sur .mnubar encadrait alors une boîte
   VIDE, la vraie barre s'affichant plus bas. `display: flow-root` fait contenir
   le flottant par son parent, sans toucher au HTML. */
.mnubar {
    display: flow-root;
    background: var(--smi-blanc);
    border: 1px solid var(--smi-trait);
    border-radius: var(--smi-rayon);
    box-shadow: var(--smi-ombre);
    margin-bottom: 22px;
}

.sf-menu {
    margin-bottom: 0;
}

/* Le fond gris #C6CFD8 est porté par .sf-menu LI (superfish.css), pas par le
   lien : les entrées formaient des pavés gris jointifs. C'est la barre qui doit
   porter le fond, les entrées restent transparentes jusqu'au survol. */
.sf-menu > li,
.sf-menu ul li,
.sf-menu ul ul li {
    background: transparent;
}

.sf-menu a {
    font-size: 14px;
    font-weight: 600;
    padding: 13px 18px;
    color: var(--smi-encre);
    background: transparent;
    border-radius: 6px;
}

.sf-menu > li:hover,
.sf-menu > li.sfHover,
.sf-menu ul li:hover,
.sf-menu ul li.sfHover {
    background: var(--smi-bleu-clair);
}

.sf-menu a:hover,
.sf-menu li:hover > a,
.sf-menu li.sfHover > a {
    background-color: var(--smi-bleu-clair);
    color: var(--smi-bleu-fonce);
    text-decoration: none;
}

/* Les flèches « ce menu a des enfants » sont des triangles CSS en blanc
   semi-transparent : lisibles sur l'ancien fond gris, invisibles sur la barre
   blanche. On les repasse en gris ardoise, et en bleu au survol. */
.sf-arrows .sf-with-ul:after {
    border-top-color: var(--smi-encre-douce);
}

.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
    border-top-color: var(--smi-bleu);
}

/* Flèches des sous-menus, orientées vers la droite */
.sf-arrows ul .sf-with-ul:after {
    border-left-color: var(--smi-encre-douce);
    border-top-color: transparent;
}

.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
    border-left-color: var(--smi-bleu);
    border-top-color: transparent;
}

/* Sous-menus déroulants */
.sf-menu ul {
    background: var(--smi-blanc);
    border: 1px solid var(--smi-trait);
    border-radius: var(--smi-rayon);
    box-shadow: 0 6px 20px rgba(31, 41, 51, .14);
    padding: 6px;
    min-width: 15em;
}

.sf-menu ul a {
    background: transparent;
    padding: 10px 14px;
}

/* --- En-tête ------------------------------------------------------------- */

#header {
    padding-bottom: 8px;
}

/* Pas d'inline-block ici : le bloc identité est précédé, dans le même conteneur
   flottant, du texte de la date. En inline-block il devenait le voisin de ligne
   de cette date, qui se retrouvait rejetée sous le cadre. */
.head_hd .cnx {
    border: 1px solid var(--smi-trait);
    border-radius: var(--smi-rayon);
    background: var(--smi-blanc);
    padding: 12px 16px;
    box-shadow: var(--smi-ombre);
}

/* 50 px de marge haute décrochaient « Quitter » du reste de l'en-tête. */
.head_hd .exit {
    margin-top: 14px;
}

/* Le tableau interne porte un width="250" en dur, calibré pour du 9 px. Avec
   des annotations à 12 px, « Pays / Langage » débordait de son cadre. On laisse
   le tableau prendre la largeur qu'il lui faut. */
.head_hd .cnx table {
    width: auto !important;
    min-width: 250px;
}

.head_hd .cnx td {
    white-space: nowrap;
    padding: 2px 0;
}

/* Remplace les icônes orphelines qu'affichait l'en-tête quand le centre de
   gestion n'est pas renseigné (voir inc/entete.inc.php). */
.cg_absent {
    display: inline-block;
    margin: 10px 0 16px;
    padding: 9px 16px;
    font-size: 13px;
    color: var(--smi-encre-douce);
    background: var(--smi-blanc);
    border: 1px dashed var(--smi-trait);
    border-radius: var(--smi-rayon);
}

.cg_absent a {
    font-weight: 600;
}

/* --- Divers -------------------------------------------------------------- */

hr {
    border: 0;
    border-top: 1px solid var(--smi-trait);
    margin: 22px 0;
}

/* Les icônes de 16 px sont difficiles à viser. On les passe à 20 px sans
   toucher au HTML : le rapport reste correct, les images sont en PNG 22-32 px. */
*.icones {
    width: 20px;
    height: 20px;
}

/* --- Couleurs héritées de 2006 ------------------------------------------- */

/* `titre_std_gras_jaune_frouge` : jaune sur rouge pur. C'était le dernier
   reliquat visible sur l'écran de connexion, que la surcouche ne ciblait pas.
   La classe porte DEUX rôles dans le code ; on les sépare par le nom de
   l'élément, sans toucher au PHP :
     - en <div>, c'est un bandeau de section (« Champs à exporter »,
       « Nouveau mot de passe ») → bandeau bleu, dans l'identité SMI ;
     - en <span>, c'est une vraie erreur (pass.php) → pastille rouge lisible.
   11 occurrences : index.php, pass.php, newpass.php, inc/exp_data.inc.php,
   inc/imp_data.inc.php. */
*.titre_std_gras_jaune_frouge,
*.ptitre_std_gras_jaune_frouge {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--smi-blanc);
    background-color: var(--smi-bleu);
    padding: 10px 18px;
    border-radius: var(--smi-rayon);
}

span.titre_std_gras_jaune_frouge,
span.ptitre_std_gras_jaune_frouge {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: var(--smi-alerte);
    background-color: var(--smi-alerte-fond);
    border: 1px solid #fecdca;
    border-radius: 999px;
    padding: 9px 18px;
}

/* Boutons secondaires (« Aucun », « Valider » d'un sous-bloc). La règle
   input[type="button"] plus haut l'emporte sur `.bton_fgris_petit` par
   spécificité : ces 29 boutons devenaient identiques aux boutons principaux,
   ce qui effaçait la hiérarchie de l'écran. On leur rend un rôle secondaire. */
input.bton_fgris_petit,
a.bton_fgris_petit {
    font-size: 13px;
    font-weight: 600;
    color: var(--smi-bleu);
    background: var(--smi-blanc);
    border: 1px solid var(--smi-trait);
    box-shadow: none;
    text-decoration: none;
    padding: 8px 14px;
    min-height: 36px;
}

input.bton_fgris_petit:hover,
a.bton_fgris_petit:hover {
    background: var(--smi-bleu-clair);
    border-color: var(--smi-bleu);
}

/* Deux `<tr bgcolor="#FF0000">` subsistent en dur dans le HTML (pass.php,
   newpass.php) : une fois le bandeau repassé en bleu, il en restait un liseré
   rouge tout autour. Neutralisé ici plutôt qu'en retirant l'attribut, pour que
   la surcouche reste entièrement réversible. */
tr[bgcolor="#FF0000"] {
    background-color: transparent;
}

/* Annotation d'alerte : 9 px en rouge pur (#FF0000), donc à la fois illisible
   et agressive. Alignée sur les autres annotations (12 px) et sur le rouge de
   la palette. */
*.annot_petit_gras_rouge {
    font-size: 12px;
    color: var(--smi-alerte);
}

/* Le rendez-vous déjà associé à l'intervention était surligné en vert fluo
   (#00FF00) dans la liste déroulante. */
option.vert {
    background-color: var(--smi-ok-fond);
    color: var(--smi-ok);
    font-weight: 600;
}