/* ==========================================================================
   Interface v2 — écrans réservés/administratifs : « Journal d'audit »,
   « RH », « Conformité », « État du système », « Mon compte »
   (25/08/2026, session admin2)
   ==========================================================================
   Compagnon de ui-v2-admin2.js. Tout est scopé html.ui-v2 et préfixé v2adm-
   (les préfixes v2m- appartiennent à ui-v2-admin.js — Organisations,
   Pilotage, Santé des données — qu'on ne touche pas).

   Règles communes v2 (cahier §8) : cartes blanches radius 12, bordure
   var(--v2-bordure-douce), ombre 0 1px 2px rgba(20,33,59,.04) ; H1 en
   PT Serif ; pastilles pastel radius 4 (jamais « badge- » dans les écrans
   réécrits) ; cibles tactiles 44 px ; UN seul bouton primaire cuivre par
   écran/carte ; grille de 8 points. La peau v2adm-v1 en fin de fichier
   éclaircit les trois écrans restés en logique v1 (RH, Conformité, État du
   système) et recolore leurs badges d'état en pastel.
   ========================================================================== */

/* ------------------------------------------------------- en-tête d'écran */
html.ui-v2 .v2adm-entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
html.ui-v2 .v2adm-entete h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  color: var(--sobria-nuit);
}
html.ui-v2 .v2adm-sous-titre {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--texte-attenue);
  max-width: 72ch;
}

/* ----------------------------------------------------------------- cartes */
html.ui-v2 .v2adm-carte {
  background: var(--fond-surface, #fff);
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 33, 59, .04);
  padding: 24px;
  min-width: 0;
  margin-bottom: 16px;
}
/* Variante « tableau plein bord » (la table touche les bords arrondis). */
html.ui-v2 .v2adm-carte-pleine { padding: 0; overflow: hidden; }
html.ui-v2 .v2adm-carte h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--sobria-nuit);
}
html.ui-v2 .v2adm-carte h2 svg { width: 20px; height: 20px; color: var(--sobria-cuivre); flex: none; }

html.ui-v2 .v2adm-vide {
  padding: 28px 20px;
  text-align: center;
  color: var(--texte-attenue);
  font-size: 14px;
}
html.ui-v2 .v2adm-charge {
  padding: 40px;
  text-align: center;
  color: var(--texte-attenue);
}
html.ui-v2 .v2adm-attenue { color: var(--texte-attenue); }
html.ui-v2 .v2adm-nom {
  font-size: 14px;
  font-weight: 600;
  color: var(--sobria-nuit);
}
html.ui-v2 .v2adm-meta {
  font-size: 13px;
  color: var(--texte-attenue);
  margin: 0 0 12px;
}
html.ui-v2 .v2adm-statut { margin: 0 0 12px; font-size: 14px; color: var(--texte); }

/* --------------------------------------------------------------- boutons */
/* Un seul primaire cuivre par écran/carte ; les autres restent blancs bordés. */
html.ui-v2 .v2adm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  background: var(--fond-surface, #fff);
  color: var(--texte);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
html.ui-v2 .v2adm-btn:hover { background: #faf8f3; }
html.ui-v2 .v2adm-btn-primaire {
  border: 0;
  background: var(--sobria-cuivre);
  color: #fff;
  font-weight: 600;
}
html.ui-v2 .v2adm-btn-primaire:hover { background: #b06c33; }
/* Action destructrice (désactiver la 2FA) : bord et texte rouges, jamais un aplat. */
html.ui-v2 .v2adm-btn-danger {
  border-color: #e5c1bb;
  color: #a3392b;
}
html.ui-v2 .v2adm-btn-danger:hover { background: #fbeeec; }

html.ui-v2 .v2adm-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* ------------------------------------------------------ champs & libellés */
html.ui-v2 .v2adm-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--texte);
  margin: 12px 0 4px;
}
html.ui-v2 .v2adm-champ {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  background: var(--fond-surface, #fff);
  color: var(--texte);
  font-size: 14px;
}

/* ------------------------------------------------------------------ filtres */
html.ui-v2 .v2adm-filtres {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
html.ui-v2 .v2adm-filtres select,
html.ui-v2 .v2adm-filtres input {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  background: var(--fond-surface, #fff);
  color: var(--texte);
  font-size: 14px;
  width: auto;
  max-width: 100%;
}
html.ui-v2 .v2adm-filtres .v2adm-btn { min-height: 40px; }
html.ui-v2 .v2adm-compteur {
  margin-left: auto;
  font-size: 13px;
  color: var(--texte-attenue);
  white-space: nowrap;
}

/* Troncature du journal / mot de passe par défaut : dit en AMBRE, jamais tu. */
html.ui-v2 .v2adm-avertissement {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid #ecd9ae;
  border-radius: 8px;
  background: #fdf3e3;
  color: #9a6b1a;
  font-size: 13.5px;
}

/* ---------------------------------------------------------------- pastilles */
html.ui-v2 .v2adm-pastille {
  display: inline-block;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
  white-space: nowrap;
}
html.ui-v2 .v2adm-pastille-verte  { background: #eaf5ee; color: #3f8f5f; }
html.ui-v2 .v2adm-pastille-ambre  { background: #fdf3e3; color: #9a6b1a; }
html.ui-v2 .v2adm-pastille-rouge  { background: #fbeeec; color: #a3392b; }
html.ui-v2 .v2adm-pastille-neutre { background: #efeeec; color: #676d7c; }

/* ----------------------------------------------------- tableau du journal */
html.ui-v2 .v2adm-defile { overflow-x: auto; }
html.ui-v2 .v2adm-tableau {
  width: 100%;
  border-collapse: collapse;
}
html.ui-v2 .v2adm-tableau th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texte-attenue);
  padding: 12px;
  border-bottom: 1px solid var(--v2-bordure-douce);
  white-space: nowrap;
}
html.ui-v2 .v2adm-tableau td {
  padding: 10px 12px;
  border-top: 1px solid var(--v2-bordure-douce);
  font-size: 13.5px;
  vertical-align: top;
  color: var(--texte);
}
html.ui-v2 .v2adm-tableau tbody tr:first-child td { border-top: 0; }
/* Alerte / sensible : le liséré v1, en pastel — le niveau se voit en balayant. */
html.ui-v2 .v2adm-tableau tr.v2adm-ligne-alerte td:first-child   { box-shadow: inset 3px 0 0 #a3392b; }
html.ui-v2 .v2adm-tableau tr.v2adm-ligne-sensible td:first-child { box-shadow: inset 3px 0 0 #d9a73f; }
html.ui-v2 .v2adm-c-date { white-space: nowrap; width: 130px; }
html.ui-v2 .v2adm-c-details { color: var(--texte-attenue); overflow-wrap: anywhere; }
html.ui-v2 .v2adm-action {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Le nom canonique (auth.login.failure) : la trace technique reste lisible. */
html.ui-v2 .v2adm-code {
  margin-top: 2px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--texte-attenue);
}

/* ------------------------------------------------------------- Mon compte */
html.ui-v2 .v2adm-grille-compte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  max-width: 980px;
}
html.ui-v2 .v2adm-grille-compte .v2adm-carte { margin-bottom: 0; }
html.ui-v2 .v2adm-dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  font-size: 14px;
}
html.ui-v2 .v2adm-dl dt { color: var(--texte-attenue); }
html.ui-v2 .v2adm-dl dd { margin: 0; color: var(--texte); font-weight: 500; overflow-wrap: anywhere; }

/* ==========================================================================
   Peau v2adm-v1 — restyle LÉGER des écrans restés en logique v1 (RH,
   Conformité, État du système). Les variables inversées de la peau de
   compatibilité (ui-v2.css) rendent déjà ces écrans clairs ; ici on aligne
   cartes, champs et boutons sur le dessin v2 et on recolore les badges
   d'état (ok/warn/danger/info) en pastel clair — la logique et la structure
   v1 ne bougent pas.
   ========================================================================== */
html.ui-v2 #main.v2adm-v1 .card {
  background: var(--fond-surface, #fff);
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 33, 59, .04);
}
html.ui-v2 #main.v2adm-v1 .card h2,
html.ui-v2 #main.v2adm-v1 .card h3 { color: var(--sobria-nuit); }
html.ui-v2 #main.v2adm-v1 .card h3 { font-size: 16px; }
/* Le survol v1 (blanc translucide) est invisible sur fond blanc. */
html.ui-v2 #main.v2adm-v1 .list-row:hover { background: rgba(20, 33, 59, .04); }
html.ui-v2 #main.v2adm-v1 .btn {
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid var(--v2-bordure-douce);
}
html.ui-v2 #main.v2adm-v1 input,
html.ui-v2 #main.v2adm-v1 select,
html.ui-v2 #main.v2adm-v1 textarea {
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  background: var(--fond-surface, #fff);
  color: var(--texte);
}
html.ui-v2 #main.v2adm-v1 input,
html.ui-v2 #main.v2adm-v1 select { min-height: 40px; padding: 0 10px; }
html.ui-v2 #main.v2adm-v1 textarea { padding: 8px 10px; }

/* Les pastilles d'état v1 (badge-ok vert / badge-warn ambre / badge-danger
   rouge / badge-info bleu — État du système, RH, Conformité), recolorées en
   pastel clair. La classe v1 reste dans le HTML (la logique v1 la pose),
   seule sa robe change ici. */
html.ui-v2 #main.v2adm-v1 .badge { border-radius: 4px; font-weight: 600; }
html.ui-v2 #main.v2adm-v1 .badge-ok     { background: #eaf5ee; color: #3f8f5f; }
html.ui-v2 #main.v2adm-v1 .badge-warn   { background: #fdf3e3; color: #9a6b1a; }
html.ui-v2 #main.v2adm-v1 .badge-danger { background: #fbeeec; color: #a3392b; }
html.ui-v2 #main.v2adm-v1 .badge-info   { background: #eef3fb; color: #2f5fa8; }

/* ---------------------------------------------------------------- mobile */
@media (max-width: 900px) {
  html.ui-v2 .v2adm-grille-compte { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  html.ui-v2 .v2adm-entete { align-items: flex-start; flex-direction: column; }
  html.ui-v2 .v2adm-compteur { margin-left: 0; }
  html.ui-v2 .v2adm-tableau th, html.ui-v2 .v2adm-tableau td { padding: 8px 10px; }
}

/* --------------------------------------------------------- accessibilité */
html.ui-v2 .v2adm-btn:focus-visible,
html.ui-v2 .v2adm-champ:focus-visible,
html.ui-v2 .v2adm-filtres select:focus-visible,
html.ui-v2 .v2adm-filtres input:focus-visible {
  outline: 2px solid var(--sobria-cuivre);
  outline-offset: 2px;
}