/* =====================================================================
   Keyflow — console d'exploitation
   Parti pris : tout ce qui est donnée est en chasse fixe (les clés, les
   empreintes et les slugs SONT du monospace), les titres passent en serif
   pour créer un contraste éditorial. Accent laiton, fond encre chaude.
   Aucune police distante, aucun script tiers.
   ===================================================================== */

:root {
  --ink:        #0c0d0a;
  --ink-panel:  #131610;
  --ink-raise:  #1a1e15;
  --ink-inset:  #090a07;

  --rule:       #262b1e;
  --rule-soft:  #1c2016;
  /* A la limite du perceptible : contraste 1,04:1 sur le fond. La grille
     doit se deviner sur un ecran bien calibre, jamais se lire. */
  --grid:       #12140b;

  --text:       #dedcd0;
  --text-dim:   #8d9280;
  --text-mute:  #5e6353;

  --brass:      #d4a72c;
  --brass-dim:  #8f7020;
  --brass-glow: rgba(212, 167, 44, .13);

  --green:      #7cc98d;
  --red:        #e06a5e;
  --amber:      #e0a93f;
  --grey:       #6f7463;

  --mono: ui-monospace, "Cascadia Mono", "Cascadia Code", "SF Mono",
          "Segoe UI Mono", Consolas, "Liberation Mono", monospace;
  --serif: "Constantia", "Cambria", "Palatino Linotype", Palatino,
           "Book Antiqua", Georgia, serif;

  --shell: 1180px;
}

/* ------------------------------------------------------------------ socle */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--ink);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.62;
  letter-spacing: -.01em;
}

/* Grille d'assise.
   Portée par un pseudo-élément plutôt que par le fond de body : ça permet
   de la masquer progressivement. Elle marque le haut de page, puis
   s'efface — elle donne le ton sans accompagner la lecture. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 112px 112px;
  background-position: -1px -1px;
  /* Le masque ne depasse pas le premier ecran, et n'atteint jamais son
     opacite pleine : la grille s'estompe des le tiers superieur. */
  -webkit-mask-image: radial-gradient(110% 55% at 50% 0%, rgba(0, 0, 0, .85), transparent 62%);
  mask-image: radial-gradient(110% 55% at 50% 0%, rgba(0, 0, 0, .85), transparent 62%);
}

/* Grain fin par-dessus tout : casse la platitude des aplats sombres. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

body > *:not(.grain) { position: relative; z-index: 1; }

a { color: var(--brass); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

code {
  font-family: var(--mono);
  font-size: .93em;
  color: var(--text-dim);
  background: var(--ink-inset);
  border: 1px solid var(--rule-soft);
  padding: .05em .4em;
}

.muted { color: var(--text-mute); }
.ta-r  { text-align: right; }

/* --------------------------------------------------------------- bandeau */

.masthead {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 28px;
  height: 58px;
  background: rgba(12, 13, 10, .88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 10;
}

.wordmark {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--text);
  white-space: nowrap;
}
.wordmark:hover { text-decoration: none; }
.wordmark__mark { color: var(--brass); margin-right: 9px; font-size: 9px; vertical-align: 2px; }
.wordmark__thin { color: var(--brass); font-weight: 400; }

.nav { display: flex; gap: 26px; margin-right: auto; }
.nav a {
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 20px 0;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
}
.nav a:hover { color: var(--text); text-decoration: none; }
.nav a.is-current { color: var(--brass); border-bottom-color: var(--brass); }

.masthead__account { display: flex; align-items: center; gap: 14px; }
.account__mail {
  color: var(--text-mute);
  font-size: 11px;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell { max-width: var(--shell); margin: 0 auto; padding: 38px 28px 72px; }

.colophon {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 22px 28px 40px;
  border-top: 1px solid var(--rule-soft);
  color: var(--text-mute);
  font-size: 11px;
  letter-spacing: .06em;
}
.colophon .dot { margin: 0 10px; opacity: .5; }

/* ----------------------------------------------------------------- titres */

.eyebrow {
  margin: 0 0 4px;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass-dim);
}

.pagetitle {
  margin: 0;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.05;
}
.pagetitle--key { font-family: var(--mono); font-size: 26px; letter-spacing: .06em; }

.pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.pagehead--tight { margin-bottom: 22px; }

.crumb { margin: 0 0 18px; font-size: 11px; letter-spacing: .08em; }
.crumb a { color: var(--text-mute); }
.crumb a:hover { color: var(--brass); }

/* ---------------------------------------------------------------- compteurs */

.tally {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--rule);
  background: var(--ink-panel);
  margin-bottom: 26px;
}
.tally__cell {
  padding: 18px 20px;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tally__cell:last-child { border-right: 0; }
.tally__n { font-family: var(--serif); font-size: 30px; line-height: 1; letter-spacing: -.02em; }
.tally__k { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-mute); }
.tally__cell--active   .tally__n { color: var(--green); }
.tally__cell--revoked  .tally__n { color: var(--red); }
.tally__cell--suspended .tally__n { color: var(--amber); }

/* ------------------------------------------------------------------ filtres */

.sieve {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-bottom: 0;
  background: var(--ink-panel);
}

/* ------------------------------------------------------------------ tables */

.ledger {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--rule);
  background: var(--ink-panel);
}

.ledger th {
  text-align: left;
  padding: 11px 16px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--text-mute);
  border-bottom: 1px solid var(--rule);
  background: var(--ink-inset);
  white-space: nowrap;
}

.ledger td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
}
.ledger tbody tr:last-child td { border-bottom: 0; }
.ledger tbody tr { transition: background .12s ease; }
.ledger tbody tr:hover { background: var(--ink-raise); }
.ledger tbody tr.is-released { color: var(--text-mute); }
.ledger tbody tr.is-released code { opacity: .6; }

.ledger--inner { border: 0; background: transparent; }
.ledger--inner th { background: transparent; padding-left: 0; }
.ledger--inner td { padding-left: 0; }
.ledger--inner td:last-child, .ledger--inner th:last-child { padding-right: 0; }

.keylink { letter-spacing: .07em; }
.rowgo { color: var(--text-mute); font-size: 15px; }
.rowgo:hover { color: var(--brass); text-decoration: none; }

/* Apparition échelonnée : une seule respiration au chargement. */
@keyframes rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.ledger tbody tr { animation: rise .4s both; animation-delay: calc(var(--row, 0) * 20ms); }

.paginate {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 14px 2px;
  font-size: 11px;
  letter-spacing: .06em;
}
.paginate span { margin-right: auto; }
.paginate a:last-child { margin-left: auto; }

/* ---------------------------------------------------------------- pastilles */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 3px 9px 3px 7px;
  border: 1px solid var(--rule);
  background: var(--ink-inset);
  white-space: nowrap;
}
.chip i { width: 6px; height: 6px; display: block; }
.chip--active    { color: var(--green); border-color: rgba(124, 201, 141, .3); }
.chip--active i  { background: var(--green); }
.chip--revoked   { color: var(--red); border-color: rgba(224, 106, 94, .32); }
.chip--revoked i { background: var(--red); }
.chip--suspended { color: var(--amber); border-color: rgba(224, 169, 63, .32); }
.chip--suspended i { background: var(--amber); }
.chip--expired   { color: var(--grey); }
.chip--expired i { background: var(--grey); }

/* ------------------------------------------------------------------ jauge */

.slots { display: inline-flex; align-items: center; gap: 9px; }
.slots__bar { display: inline-flex; gap: 2px; }
.slots__bar i {
  width: 4px; height: 13px;
  background: var(--rule);
  display: block;
}
.slots__bar i.is-on { background: var(--brass-dim); }
.slots__count { font-size: 11px; color: var(--text-dim); letter-spacing: .04em; }
.slots--full .slots__bar i.is-on { background: var(--red); }
.slots--full .slots__count { color: var(--red); }

/* ---------------------------------------------------------------- panneaux */

.panel {
  border: 1px solid var(--rule);
  background: var(--ink-panel);
  padding: 22px 24px 26px;
  margin-bottom: 22px;
}

.panel__title {
  margin: 0 0 18px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-soft);
}
.panel__title .muted { text-transform: none; letter-spacing: .02em; }

.split { display: grid; grid-template-columns: 1.55fr 1fr; gap: 22px; align-items: start; }
.split--wide { grid-template-columns: 1.9fr 1fr; }

.facts { margin: 0; display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 10px 22px; }
.facts dt { color: var(--text-mute); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.facts dd { margin: 0; }

.hint { color: var(--text-mute); font-size: 11px; line-height: 1.6; margin: 10px 0 0; }
.stack { margin-top: 18px; }
.stack .field__input { margin-bottom: 8px; }
.rowbtns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

.notice {
  border: 1px solid rgba(224, 106, 94, .3);
  border-left-width: 3px;
  background: rgba(224, 106, 94, .06);
  padding: 12px 16px;
  margin: 0 0 22px;
}

/* Offre d'abonnement : encadre le seul geste payant de l'interface. */
.offer {
  border: 1px solid var(--brass-dim);
  background:
    radial-gradient(120% 140% at 50% 0%, var(--brass-glow), transparent 62%),
    var(--ink-inset);
  padding: 20px 20px 18px;
  margin-bottom: 16px;
}
.offer__name {
  margin: 0;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass);
}
.offer__price {
  margin: 6px 0 14px;
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: -.02em;
}
.offer__list {
  margin: 0 0 18px;
  padding: 0 0 0 16px;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.9;
}
.offer__list li::marker { color: var(--brass-dim); }

.snippet {
  margin: 0;
  padding: 16px 18px;
  background: var(--ink-inset);
  border: 1px solid var(--rule-soft);
  border-left: 2px solid var(--brass-dim);
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
}

/* ------------------------------------------------------------------- coffre
   Le moment fort de l'interface : la seule fois où une clé est visible. */

.vault {
  border: 1px solid var(--brass-dim);
  background:
    radial-gradient(120% 140% at 50% 0%, var(--brass-glow), transparent 62%),
    var(--ink-panel);
  padding: 24px 26px 22px;
  margin-bottom: 22px;
}
.vault--hero { padding: 34px 32px 28px; }

.vault__label {
  margin: 0 0 14px;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass);
}

.vault__key {
  margin: 0 0 20px;
  font-size: clamp(19px, 3.6vw, 30px);
  letter-spacing: .16em;
  color: var(--text);
  word-break: break-all;
  text-shadow: 0 0 26px rgba(212, 167, 44, .22);
}
.vault__key--hero { font-size: clamp(21px, 4.4vw, 38px); }
.vault__key--token { font-size: clamp(13px, 1.9vw, 17px); letter-spacing: .04em; }

.vault__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vault__warn { color: var(--text-mute); font-size: 11px; line-height: 1.6; flex: 1 1 260px; }
.vault__warn strong { color: var(--amber); font-weight: 400; }

/* ------------------------------------------------------------------ boutons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 9px 16px;
  border: 1px solid var(--rule);
  background: var(--ink-raise);
  color: var(--text);
  cursor: pointer;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.btn:hover { border-color: var(--text-mute); text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.btn--primary { background: var(--brass); border-color: var(--brass); color: #17150c; font-weight: 700; }
.btn--primary:hover { background: #e3b641; border-color: #e3b641; }

.btn--danger { color: var(--red); border-color: rgba(224, 106, 94, .35); }
.btn--danger:hover { background: rgba(224, 106, 94, .1); border-color: var(--red); }

.btn--warn { color: var(--amber); border-color: rgba(224, 169, 63, .3); }
.btn--warn:hover { background: rgba(224, 169, 63, .09); border-color: var(--amber); }

.btn--ghost { background: transparent; color: var(--text-dim); }
.btn--ghost:hover { color: var(--text); }

.btn--sm { padding: 5px 11px; font-size: 10px; }
.btn--block { width: 100%; }
.btn.is-done { color: var(--green); border-color: var(--green); background: transparent; }

/* ----------------------------------------------------------------- champs */

.field { display: flex; flex-direction: column; gap: 6px; }
.field--inline { flex: 0 0 auto; }
.field--grow { flex: 1 1 200px; }

.field__label {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.field__label .muted { text-transform: none; letter-spacing: .02em; font-size: 10px; }

.field__input {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  background: var(--ink-inset);
  border: 1px solid var(--rule);
  padding: 9px 12px;
  width: 100%;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.field__input::placeholder { color: var(--text-mute); opacity: .75; }
.field__input:focus {
  outline: none;
  border-color: var(--brass-dim);
  box-shadow: 0 0 0 3px var(--brass-glow);
}
select.field__input { cursor: pointer; }

.form { display: flex; flex-direction: column; gap: 18px; }
.form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* ------------------------------------------------------------------ divers */

.flash {
  padding: 11px 16px;
  margin: 0 0 24px;
  border: 1px solid var(--rule);
  border-left-width: 3px;
  font-size: 12px;
  background: var(--ink-panel);
}
.flash--ok  { border-left-color: var(--green); }
.flash--err { border-left-color: var(--red); color: var(--red); }

.void {
  border: 1px dashed var(--rule);
  padding: 56px 28px;
  text-align: center;
  background: var(--ink-panel);
}
.void__code { font-family: var(--serif); font-size: 52px; margin: 0 0 6px; color: var(--brass-dim); line-height: 1; }
.void__title { font-family: var(--serif); font-size: 21px; margin: 0 0 8px; }
.void__body { color: var(--text-mute); margin: 0 0 20px; }

/* --------------------------------------------------------------- connexion */

.gate { max-width: 380px; margin: 9vh auto 0; }
.gate__brand { text-align: center; margin-bottom: 34px; }
.gate__mark { color: var(--brass); font-size: 11px; display: block; margin-bottom: 14px; }
.gate__name { font-size: 17px; font-weight: 700; letter-spacing: .2em; margin: 0 0 10px; }
.gate__tag { color: var(--text-mute); font-size: 11px; letter-spacing: .06em; margin: 0; }
.gate__form { display: flex; flex-direction: column; gap: 18px; border: 1px solid var(--rule); background: var(--ink-panel); padding: 28px 26px; }
.gate__note { color: var(--text-mute); font-size: 11px; text-align: center; margin-top: 22px; line-height: 1.7; }

.gate__plan {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--brass-dim);
  background: var(--ink-panel);
}
.gate__plan-title {
  margin: 0 0 6px;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass);
}
.gate__plan-body { margin: 0; color: var(--text-mute); font-size: 11px; line-height: 1.7; }
.gate__plan-body strong { color: var(--text-dim); font-weight: 400; }

/* ------------------------------------------------------------- adaptation */

@media (max-width: 900px) {
  .split, .split--wide, .form__pair { grid-template-columns: 1fr; }
  .tally { grid-template-columns: repeat(2, 1fr); }
  .tally__cell:nth-child(2) { border-right: 0; }
  .tally__cell:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}

@media (max-width: 720px) {
  .masthead { height: auto; flex-wrap: wrap; gap: 14px; padding: 14px 18px; }
  .nav { order: 3; width: 100%; gap: 20px; }
  .nav a { padding: 8px 0; }
  .shell { padding: 26px 18px 56px; }
  .pagetitle { font-size: 26px; }
  /* Les tableaux larges défilent plutôt que de casser la mise en page. */
  .ledger { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}