/* ==========================================================================
   Annuaire CASU 144 — complément au design system partagé.

   `style.css` est le même fichier que celui de Scribe, D-ID Voice et
   Research Share : jetons, surfaces, panneaux, boutons, tableaux. Il n'est
   pas modifié ici, pour que les quatre applications continuent de se
   ressembler sans que l'une tire la couverture à elle.

   Ce fichier n'ajoute que ce qui est propre à l'annuaire : les règles de
   mot de passe qui se cochent pendant la frappe, la remise d'un secret,
   l'enrôlement du second facteur, les pastilles d'accès applicatif et de
   rattachement.
   ========================================================================== */

/* ── En-têtes de panneau ───────────────────────────────────────────────────
   Le design system pose `h2` et son explication côte à côte. Cela va pour
   une phrase courte ; ici, les explications tiennent souvent deux ou trois
   lignes — elles disent ce que l'écran fait et pourquoi — et se retrouvaient
   comprimées contre le bord droit. On laisse donc l'en-tête passer à la
   ligne : court, il reste sur une ligne comme ailleurs ; long, il s'étale
   sous le titre au lieu de s'écraser.
   ───────────────────────────────────────────────────────────────────────── */
.main .panel-head { flex-wrap: wrap; align-items: baseline; }
.main .panel-head > p {
  flex: 1 1 26rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

/* ── Notes de panneau ──────────────────────────────────────────────────── */
.panel-note-err { border-left: 3px solid var(--err); background: var(--err-bg); color: var(--err); }
.panel-note-warn { border-left: 3px solid var(--warn); background: var(--warn-bg); color: var(--warn); }
.panel-note-ok { border-left: 3px solid var(--ok); background: var(--ok-bg); color: var(--ok); }
.panel-note-info { border-left: 3px solid var(--hug-blue); background: var(--info-bg); }

/* ── Mot de passe : règles, jauge ──────────────────────────────────────────
   Les règles sont affichées avant la saisie et se cochent pendant la frappe.
   Les découvrir une à une au fil des refus pousse à essayer des variantes au
   hasard, souvent tout aussi faibles que la première.
   ───────────────────────────────────────────────────────────────────────── */
.regles-mdp {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  font-size: 0.86rem;
  color: var(--muted);
}
.regles-mdp li {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0.2rem 0;
  line-height: 1.45;
}
.regle-puce {
  flex-shrink: 0;
  width: 0.95rem;
  height: 0.95rem;
  margin-top: 0.18rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.regles-mdp .regle-ok { color: var(--ok); }
.regles-mdp .regle-ok .regle-puce {
  border-color: var(--ok);
  background: var(--ok);
  /* La coche est dessinée en ombre : pas d'image à charger, et elle suit la
     couleur du thème. */
  box-shadow: inset 0 0 0 1.5px var(--ok-bg);
}

.jauge {
  height: 5px;
  margin: 0.45rem 0 0.3rem;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.jauge-barre {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--line-strong);
  transition: width 0.2s ease, background 0.2s ease;
}
.jauge-0, .jauge-1 { background: var(--err); }
.jauge-2 { background: var(--warn); }
.jauge-3 { background: var(--hug-blue); }
.jauge-4 { background: var(--ok); }

.hint-ok { color: var(--ok); }
.hint-err { color: var(--err); }

/* Le mot de passe se saisit en clair : c'est un administrateur qui le fixe
   pour quelqu'un d'autre et qui devra le lui dicter. Le masquer l'obligerait
   à le taper deux fois sans jamais le voir. */
.mdp-saisie { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.mdp-saisie input {
  flex: 1 1 16rem;
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

.bloc-mdp {
  margin-top: 0.4rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}
.bloc-mdp > label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.bloc-mdp .regles-mdp { margin: 0.7rem 0 0.5rem; }
.bloc-mdp .field-hint { margin: 0.35rem 0 0; max-width: 72ch; }
.bloc-mdp input {
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: 0.06em;
}

/* ── Remise d'un secret ────────────────────────────────────────────────── */
.panel-remise { max-width: 48rem; }
.remise-identifiant, .remise-bloc { margin-bottom: 1rem; }
.remise-etiquette {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.3rem;
}
.remise-valeur {
  font-family: var(--mono);
  font-size: 1rem;
  background: var(--surface-inset);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 0.3rem 0.6rem;
}
.remise-ligne { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

/* Le mot de passe se lit de loin et se dicte : il mérite la place. */
.remise-secret {
  font-family: var(--mono);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--hug-red);
  background: var(--hug-red-soft);
  border: 1px solid color-mix(in srgb, var(--hug-red) 28%, transparent);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.9rem;
  user-select: all;
  overflow-wrap: anywhere;
}
:root[data-theme="dark"] .remise-secret {
  background: color-mix(in srgb, var(--hug-red) 14%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .remise-secret {
    background: color-mix(in srgb, var(--hug-red) 14%, transparent);
  }
}

/* ── Double authentification ───────────────────────────────────────────── */
.champ-code {
  font-family: var(--mono);
  font-size: 1.5rem;
  letter-spacing: 0.4em;
  text-align: center;
}

.etapes-2fa {
  margin: 0 0 1rem;
  padding-left: 1.3rem;
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 76ch;
}
.etapes-2fa li { margin-bottom: 0.35rem; }

.enrolement {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}
/* Le code QR se lit par une caméra : il lui faut du blanc franc et une taille
   confortable, quel que soit le thème de l'écran. */
.enrolement-qr {
  flex: 0 0 auto;
  padding: 0.6rem;
  border-radius: 8px;
  background: #fff;
  line-height: 0;
}
.enrolement-qr svg { width: 11rem; height: 11rem; display: block; }
.enrolement-cle { flex: 1 1 14rem; min-width: 0; }
.enrolement-cle .remise-secret {
  display: block;
  margin: 0.3rem 0;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  overflow-wrap: anywhere;
}

.codes-secours {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}
.codes-secours code {
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: var(--text-strong);
}

.auth-secours { margin-top: 1rem; }
.auth-secours > summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }
.auth-secours .field-hint { margin: 0.5rem 0 0; }
.auth-abandon { margin: 1rem 0 0; text-align: center; font-size: 0.85rem; }

/* ── Accès applicatifs ─────────────────────────────────────────────────────
   Une case par application, avec ce qu'elle ouvre écrit à côté. Une liste de
   noms seuls obligerait à savoir par cœur ce que « voix » désigne — et c'est
   exactement au moment d'accorder un accès qu'il ne faut pas se tromper.
   ───────────────────────────────────────────────────────────────────────── */
.acces-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0.6rem;
  margin: 0.2rem 0 0.4rem;
}
.acces-carte {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.acces-carte:hover { border-color: var(--line-strong); }
.acces-carte:has(input:checked) {
  border-color: var(--hug-blue);
  background: var(--info-bg);
}
.acces-carte input { margin-top: 0.25rem; accent-color: var(--hug-red); }
.acces-carte-texte { min-width: 0; }
.acces-carte-nom {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--text-strong);
}
.acces-carte-ico { color: var(--hug-blue); font-size: 1.05rem; }
.acces-carte-sous { font-size: 0.82rem; color: var(--muted); }
.acces-carte-detail {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  color: var(--faint);
  line-height: 1.45;
}

/* ── Pastilles ─────────────────────────────────────────────────────────── */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}
.pastille-liste { display: flex; flex-wrap: wrap; gap: 0.25rem; }

.pastille-app {
  background: var(--info-bg);
  color: var(--link);
  border-color: color-mix(in srgb, var(--link) 30%, transparent);
}
.pastille-app-attente {
  background: var(--warn-bg);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 38%, transparent);
}
/* Le rattachement externe est la seule valeur qu'on cherche des yeux dans une
   liste : c'est la seule qui soit mise en couleur. */
.pastille-externe {
  background: var(--hug-red-soft);
  color: var(--hug-red);
  border-color: color-mix(in srgb, var(--hug-red) 32%, transparent);
}
.pastille-ok { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.pastille-err { background: var(--err-bg); color: var(--err); border-color: color-mix(in srgb, var(--err) 35%, transparent); }

/* ── Tableau des comptes ───────────────────────────────────────────────── */
.table-comptes td { vertical-align: top; }
.table-comptes .col-nom strong { display: block; color: var(--text-strong); }
.table-comptes .col-nom code { font-size: 0.82rem; color: var(--muted); }
.table-comptes tr.inactif { opacity: 0.55; }

.ligne-compte-lien { color: inherit; text-decoration: none; }
.ligne-compte-lien:hover strong { color: var(--hug-blue); text-decoration: underline; }

/* ── Commande à passer ailleurs ────────────────────────────────────────────
   GESICA s'ouvre par une commande sur le VPS, pas par cette application.
   Elle est donnée prête à coller plutôt que décrite : une commande qu'on
   recompose de mémoire se tape de travers.
   ───────────────────────────────────────────────────────────────────────── */
.commande {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.5rem 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-inset);
}
.commande code {
  flex: 1 1 22rem;
  font-size: 0.86rem;
  user-select: all;
  overflow-wrap: anywhere;
}

/* ── Fiche de compte ───────────────────────────────────────────────────── */
.fiche-entete {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}
.fiche-entete h2 { margin: 0; }
.fiche-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.fiche-meta b { color: var(--text-strong); font-weight: 600; }

.mdp-revele {
  margin: 0.6rem 0 0;
  display: none;
}
.mdp-revele[data-ouvert="1"] { display: block; }

/* ── Divers ────────────────────────────────────────────────────────────── */
.check-serree { margin-top: 0.45rem; }
.check-disabled { opacity: 0.5; }
.liste-seche { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.liste-seche li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  font-size: 0.87rem;
}
.liste-seche time { color: var(--faint); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

/* Une tuile par application : combien de comptes actifs elle ouvre. Le
   chiffre est ce qu'on vient chercher — il se lit avant le libellé, et c'est
   pour cela qu'il est seul sur sa ligne. */
.stat-rangee {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--gap-block);
  margin-bottom: var(--gap-block);
}
.stat-rangee .stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: var(--pad-item-y) var(--pad-item-x);
}
.stat-rangee .stat .label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat-rangee .stat .value {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}

@media print {
  /* Imprimer les codes de secours ne doit pas imprimer l'application. */
  .sidebar, .shell-top, .footer, .toolbar, .panel-note { display: none !important; }
  .codes-secours { border: 1px solid #000; background: #fff; }
}