/*
 * Tableau de bord des licences.
 *
 * Bleu profond, comme le reste de la marque. Le rouge est reserve a ce qui est
 * critique — une licence revoquee, un clone suspect — et a rien d'autre : s'il
 * sert a decorer, il ne signale plus rien.
 */
:root {
  --bleu: #0b2a4a;
  --bleu-clair: #14406f;
  --encre: #16202c;
  --gris: #5d6b7a;
  --gris-clair: #8b97a4;
  --bord: #dde3ea;
  --fond: #f4f6f9;
  --blanc: #fff;
  --critique: #a12a2a;
  --critique-fond: #fdf3f3;
  --ok: #1f5133;
  --ok-fond: #eef6f0;
}

* { box-sizing: border-box; }

/*
 * L'attribut `hidden` doit vraiment cacher.
 *
 * Le navigateur lui applique `display: none`, mais n'importe quelle regle de
 * classe le remporte — et `.modale { display: grid }` suffisait a laisser la
 * fenetre modale posee sur toute la page, invisible mais avalant chaque clic.
 * L'ecran de connexion devenait inutilisable sans que rien ne paraisse anormal.
 */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 14px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
}

.marque { margin: 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--bleu); font-weight: 700; }
h1 { margin: 4px 0 0; font-size: 22px; letter-spacing: -.02em; }
h2 { margin: 0; font-size: 16px; }
h3 { margin: 0; font-size: 16px; }
.chapo { margin: 6px 0 24px; color: var(--gris); }
.aide { color: var(--gris); margin: 0 0 12px; }

/* ——— Connexion ——— */
.connexion { min-height: 100vh; display: grid; place-items: center; }
.carte-connexion {
  width: min(420px, calc(100vw - 40px));
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 14px;
  padding: 36px 38px 30px; box-shadow: 0 18px 50px rgba(11, 42, 74, .10);
}

.etiquette { display: block; font-weight: 600; font-size: 12.5px; margin: 14px 0 6px; }
.champ {
  width: 100%; padding: 10px 12px; font: inherit;
  border: 1.5px solid var(--bord); border-radius: 8px; background: #fbfcfd; color: var(--encre);
}
.champ:focus { outline: none; border-color: var(--bleu); background: var(--blanc); }
select.champ { cursor: pointer; }

.bouton {
  padding: 9px 15px; font: 600 13.5px/1 inherit; cursor: pointer;
  border: 1.5px solid var(--bord); border-radius: 8px; background: var(--blanc); color: var(--encre);
}
.bouton:hover { border-color: var(--gris-clair); }
.bouton--primaire { background: var(--bleu); border-color: var(--bleu); color: var(--blanc); }
.bouton--primaire:hover { background: var(--bleu-clair); border-color: var(--bleu-clair); }
.bouton--discret { color: var(--gris); }
.bouton--bloc { width: 100%; margin-top: 20px; padding: 12px; }
.bouton--critique { color: var(--critique); border-color: #e8cfcf; }
.bouton--petit { padding: 5px 9px; font-size: 12px; }

.erreur { margin: 14px 0 0; padding: 10px 12px; border-radius: 8px; font-size: 13px; background: var(--critique-fond); border: 1px solid #f0d5d5; color: var(--critique); }

/* ——— Structure ——— */
.entete {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 32px; background: var(--blanc); border-bottom: 1px solid var(--bord);
}
.entete__meta { display: flex; align-items: center; gap: 10px; }
.puce { font-size: 12px; color: var(--gris); background: var(--fond); border: 1px solid var(--bord); border-radius: 999px; padding: 5px 11px; }

.section { margin: 26px 32px; background: var(--blanc); border: 1px solid var(--bord); border-radius: 12px; padding: 20px 22px; }
.section__tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

.alerte {
  margin: 20px 32px -6px; padding: 12px 16px; border-radius: 10px;
  background: var(--critique-fond); border: 1px solid #f0d5d5; color: var(--critique); font-size: 13px;
}

/* ——— Tables denses : on lit beaucoup de lignes d'un coup ——— */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--bord); vertical-align: middle; }
th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); font-weight: 600; }
tr:last-child td { border-bottom: none; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.vide { color: var(--gris-clair); padding: 16px 2px; }

code, .mono { font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 12.5px; }

.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; border: 1px solid var(--bord); }
.badge--active { background: var(--ok-fond); border-color: #cfe4d6; color: var(--ok); }
.badge--suspendue { background: #fdf7ec; border-color: #ecdcc0; color: #7a5a1e; }
.badge--revoquee { background: var(--critique-fond); border-color: #f0d5d5; color: var(--critique); }
.badge--libere { color: var(--gris); }

.bloc-code {
  margin: 0; padding: 14px 16px; background: var(--fond); border: 1px solid var(--bord);
  border-radius: 8px; overflow-x: auto; font-family: Consolas, ui-monospace, monospace; font-size: 12.5px;
}

/* ——— Modale ——— */
.modale { position: fixed; inset: 0; background: rgba(11, 42, 74, .34); display: grid; place-items: center; padding: 20px; z-index: 50; }
.modale__boite { width: min(560px, 100%); max-height: 88vh; overflow: auto; background: var(--blanc); border-radius: 14px; padding: 24px 26px; box-shadow: 0 24px 60px rgba(11, 42, 74, .24); }
.modale__tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

.cle-remise {
  margin: 16px 0; padding: 18px; text-align: center; border-radius: 10px;
  background: var(--ok-fond); border: 1px solid #cfe4d6;
}
.cle-remise__valeur { font: 700 20px/1.4 Consolas, ui-monospace, monospace; letter-spacing: .08em; color: var(--ok); }
.cle-remise__note { margin: 10px 0 0; font-size: 12.5px; color: var(--ok); }