/* ── assets/css/tokens.css ── */
/* ==========================================================================
   Design tokens — palette, typographie, espacements, élévations
   Aucune valeur arbitraire ailleurs : tout passe par ces variables.
   ========================================================================== */

:root {
  /* --- Échelle d'espacement (base 4px) --- */
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 2.5rem;   /* 40px */
  --space-8: 3rem;     /* 48px */
  --space-9: 4rem;     /* 64px */
  --space-10: 5rem;    /* 80px */

  /* --- Typographie --- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem);
  --text-2xl: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
  --text-3xl: clamp(2rem, 1.4rem + 2.4vw, 3rem);

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.65;
  --leading-relaxed: 1.75;

  --measure: 74ch;          /* longueur de ligne confortable */

  /* --- Rayons --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 999px;

  /* --- Transitions --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 380ms;

  /* --- Gabarit --- */
  --sidebar-w: 296px;
  --topbar-h: 60px;
  --content-max: 1080px;

  /* --- Palette claire (par défaut) --- */
  --bg: #f4f6fb;
  --bg-tint: #eaeefa;
  --surface: #ffffff;
  --surface-2: #f8fafd;
  --surface-3: #eef2f9;
  --border: #dde3ee;
  --border-strong: #c6cfe0;

  --ink: #111726;
  --ink-2: #35405a;
  --muted: #616c85;
  --muted-2: #8b95ab;

  --accent: #4f46e5;
  --accent-ink: #ffffff;
  --accent-soft: #ecebfd;
  --accent-border: #c7c4f8;
  --accent-2: #0d9488;

  --ok: #167c4a;
  --ok-soft: #e4f6ec;
  --ok-border: #a7dcbf;
  --ko: #b42318;
  --ko-soft: #fdeceb;
  --ko-border: #f4b9b4;
  --warn: #9a5b00;
  --warn-soft: #fdf3e2;
  --warn-border: #f0d19a;
  --info: #0b6ea9;
  --info-soft: #e6f2fb;
  --info-border: #a8d4ee;

  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.07), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 16px 40px rgba(16, 24, 40, 0.12), 0 4px 10px rgba(16, 24, 40, 0.05);
  --ring: 0 0 0 3px rgba(79, 70, 229, 0.3);
}

/* --- Palette sombre : suit le système, sauf choix explicite --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0e15;
    --bg-tint: #10141d;
    --surface: #141922;
    --surface-2: #1a202b;
    --surface-3: #212936;
    --border: #262f3d;
    --border-strong: #38445a;

    --ink: #e9edf6;
    --ink-2: #c4cbdb;
    --muted: #96a0b5;
    --muted-2: #6f7c94;

    --accent: #8b8cf9;
    --accent-ink: #0b0e15;
    --accent-soft: #1d2039;
    --accent-border: #3b3f6b;
    --accent-2: #2dd4bf;

    --ok: #58d69a;
    --ok-soft: #10241a;
    --ok-border: #245f42;
    --ko: #ff9b92;
    --ko-soft: #2a1414;
    --ko-border: #6b2a26;
    --warn: #f0b458;
    --warn-soft: #251c0d;
    --warn-border: #5f4620;
    --info: #6fc0f2;
    --info-soft: #0e1e2b;
    --info-border: #244a63;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.6);
    --ring: 0 0 0 3px rgba(139, 140, 249, 0.4);
  }
}

/* --- Choix explicite du thème sombre --- */
:root[data-theme="dark"] {
  --bg: #0b0e15;
  --bg-tint: #10141d;
  --surface: #141922;
  --surface-2: #1a202b;
  --surface-3: #212936;
  --border: #262f3d;
  --border-strong: #38445a;

  --ink: #e9edf6;
  --ink-2: #c4cbdb;
  --muted: #96a0b5;
  --muted-2: #6f7c94;

  --accent: #8b8cf9;
  --accent-ink: #0b0e15;
  --accent-soft: #1d2039;
  --accent-border: #3b3f6b;
  --accent-2: #2dd4bf;

  --ok: #58d69a;
  --ok-soft: #10241a;
  --ok-border: #245f42;
  --ko: #ff9b92;
  --ko-soft: #2a1414;
  --ko-border: #6b2a26;
  --warn: #f0b458;
  --warn-soft: #251c0d;
  --warn-border: #5f4620;
  --info: #6fc0f2;
  --info-soft: #0e1e2b;
  --info-border: #244a63;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.6);
  --ring: 0 0 0 3px rgba(139, 140, 249, 0.4);
}


/* ── assets/css/auth.css ── */
/* ==========================================================================
   auth.css — pages de compte (connexion, activation, mot de passe)
   Servies sans session : ces écrans n'ont accès ni à layout.css ni à
   components.css. Ils sont donc autonomes, mais bâtis sur les mêmes tokens
   que l'application — même palette, mêmes espacements, même thème sombre.
   ========================================================================== */

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

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

body.auth-page {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

/* Halo discret : deux dégradés radiaux, aucun asset, aucune requête. */
body.auth-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58rem 34rem at 12% -8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(46rem 30rem at 104% 108%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 70%);
}

.auth {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 27rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* --- Carte ---------------------------------------------------------------- */

.auth__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-7) var(--space-6) var(--space-6);
}

/* --- Marque --------------------------------------------------------------- */

.auth__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.auth__mark {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-sm);
}
.auth__brandtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.auth__brandtext strong {
  font-size: var(--text-base);
  font-weight: 650;
  line-height: var(--leading-tight);
  color: var(--ink);
}
.auth__brandtext small {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: var(--leading-tight);
}

/* --- Titres --------------------------------------------------------------- */

.auth__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xl);
  font-weight: 680;
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.auth__lead {
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
  color: var(--muted);
}

/* --- Bandeaux ------------------------------------------------------------- */

.auth__alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--ko-border);
  border-radius: var(--radius-md);
  background: var(--ko-soft);
  color: var(--ko);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.auth__alert--ok   { border-color: var(--ok-border);   background: var(--ok-soft);   color: var(--ok); }
.auth__alert--info { border-color: var(--info-border); background: var(--info-soft); color: var(--info); }
.auth__alert svg { flex: none; margin-top: 1px; }

/* --- Formulaire ----------------------------------------------------------- */

.auth__form { display: flex; flex-direction: column; gap: var(--space-5); }

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-2);
}
.field__hint {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: var(--leading-snug);
}
.field__wrap { position: relative; display: flex; }

.field__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--text-md);
  line-height: 1.4;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field__wrap .field__input { padding-right: var(--space-9); }
.field__input::placeholder { color: var(--muted-2); }
.field__input:hover { border-color: var(--muted-2); }
.field__input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: var(--ring);
}
.field__input:disabled { opacity: 0.55; cursor: not-allowed; }
.field__input[aria-invalid="true"] { border-color: var(--ko); }

/* Œil : afficher / masquer le mot de passe. */
.field__eye {
  position: absolute;
  top: 50%;
  right: var(--space-2);
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field__eye:hover { color: var(--ink); background: var(--surface-3); }
.field__eye:focus-visible { outline: none; color: var(--ink); box-shadow: var(--ring); }

/* --- Jauge de robustesse -------------------------------------------------- */

.meter { display: flex; flex-direction: column; gap: var(--space-2); }
.meter__track {
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  overflow: hidden;
}
.meter__bar {
  height: 100%;
  width: 0;
  border-radius: var(--radius-full);
  background: var(--ko);
  transition: width var(--dur-slow) var(--ease-out), background var(--dur) var(--ease);
}
.meter[data-niveau="2"] .meter__bar { background: var(--warn); }
.meter[data-niveau="3"] .meter__bar { background: var(--info); }
.meter[data-niveau="4"] .meter__bar { background: var(--ok); }
.meter__texte { font-size: var(--text-xs); color: var(--muted); line-height: var(--leading-snug); }

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

.auth__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.auth__btn:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.auth__btn:active { transform: translateY(0) scale(0.99); box-shadow: var(--shadow-xs); }
.auth__btn:focus-visible { outline: none; box-shadow: var(--ring); }
.auth__btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.auth__btn--ghost {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--border-strong);
  box-shadow: none;
  font-weight: 600;
}
.auth__btn--ghost:hover { background: var(--surface-3); color: var(--ink); box-shadow: var(--shadow-xs); }

/* --- Pieds de page -------------------------------------------------------- */

.auth__foot {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: var(--leading-snug);
}
.auth__foot a { color: var(--accent); text-decoration: none; }
.auth__foot a:hover { text-decoration: underline; }

.auth__legal {
  margin: 0;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--muted-2);
  line-height: var(--leading-snug);
}

/* --- Liste de règles (activation) ----------------------------------------- */

.regles { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); }
.regles li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--muted);
}
.regles li::before {
  content: "○";
  flex: none;
  font-size: 0.7em;
  color: var(--muted-2);
}
.regles li[data-ok="1"] { color: var(--ok); }
.regles li[data-ok="1"]::before { content: "●"; color: var(--ok); }

/* --- Résumé de compte ---------------------------------------------------- */

.infos { margin: 0 0 var(--space-5); display: grid; gap: var(--space-2); }
.infos__ligne {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--border);
  font-size: var(--text-sm);
}
.infos__ligne:last-child { border-bottom: 0; }
.infos__cle { color: var(--muted); }
.infos__val { color: var(--ink); font-weight: 600; word-break: break-word; }

/* --- Tablette et mobile --------------------------------------------------- */

@media (max-width: 480px) {
  body.auth-page { padding: var(--space-4) var(--space-3); align-items: start; padding-top: var(--space-7); }
  .auth__card { padding: var(--space-6) var(--space-5) var(--space-5); border-radius: var(--radius-lg); }
  .auth__brand { margin-bottom: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  .auth__btn, .field__input, .meter__bar, .field__eye { transition: none; }
  .auth__btn:hover, .auth__btn:active { transform: none; }
}

/* --- Code en ligne (chemins, commandes) ---------------------------------- */

code {
  /* Sans nowrap, « php bin/activation.php <email> » se coupe à l'espace et la
     commande se lit sur deux lignes, moitié dans un cadre, moitié dehors. */
  white-space: nowrap;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 0.9em;
  word-break: break-word;
}

/* --- Rangée d'actions ---------------------------------------------------- */

.auth__actions { margin: var(--space-5) 0 0; display: grid; gap: var(--space-3); }
.auth__actions--duo { grid-template-columns: 1fr 1fr; }
@media (max-width: 380px) { .auth__actions--duo { grid-template-columns: 1fr; } }

/* --- Séparateur de section ------------------------------------------------ */

.auth__sep {
  margin: var(--space-6) 0 var(--space-5);
  border: 0;
  border-top: 1px solid var(--border);
}
.auth__soustitre {
  margin: 0 0 var(--space-4);
  font-size: var(--text-base);
  font-weight: 650;
  color: var(--ink);
}