/* Hallmark · macrostructure: Workbench (accueil) + Wizard (saisie) · tone: premium utilitaire
 * theme: custom "héraldique lyonnaise" · paper: light · display: high-contrast-serif · accent: cool-blue + gold
 * paper oklch(98.6% 0.005 85) · accent oklch(46% 0.115 250) · gold oklch(84% 0.148 88)
 * display: Fraunces (self-hosted) · body: Inter Tight (self-hosted)
 * pre-emit critique: P5 H5 E5 S5 R4 V5
 */

/* ============================================================
   FORMALYON — SOCLE PARTAGÉ
   Verrouillé. Aucune valeur de couleur ni de police en dur
   dans les pages : tout passe par un token nommé.
   ============================================================ */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("fonts/inter-tight.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* — Marque Formalyon (relevée sur leur emblème et leur site) — */
  --color-navy:        oklch(33.5% 0.083 246);   /* #00416B — bleu du lion */
  --color-navy-deep:   oklch(26%   0.070 248);
  --color-royal:       oklch(38.5% 0.115 264);   /* #204B90 */
  --color-blue:        oklch(46%   0.115 250);   /* #066AAB — bleu d'action */
  --color-blue-hover:  oklch(41%   0.112 250);
  --color-blue-wash:   oklch(95.5% 0.021 250);
  --color-blue-line:   oklch(88%   0.037 250);

  --color-gold:        oklch(84%   0.148 88);    /* #F3C22F — récompense */
  --color-gold-deep:   oklch(62%   0.116 76);    /* #B9831C */
  --color-gold-wash:   oklch(96.5% 0.038 90);
  --color-gold-line:   oklch(89%   0.070 88);

  /* — Papier & encre — */
  --color-paper:       oklch(98.6% 0.005 85);
  --color-paper-2:     oklch(96.8% 0.007 85);
  --color-paper-3:     oklch(94%   0.009 85);
  --color-card:        oklch(100%  0     0);
  --color-ink:         oklch(24%   0.018 248);
  --color-ink-2:       oklch(45%   0.014 248);
  --color-ink-3:       oklch(60%   0.011 248);
  --color-rule:        oklch(90.5% 0.007 248);
  --color-rule-soft:   oklch(94.5% 0.005 248);

  /* — Statuts (jamais décoratifs : uniquement porteurs de sens) — */
  --color-wait:        oklch(58%   0.115 62);    /* en attente */
  --color-wait-wash:   oklch(96%   0.035 70);
  --color-stop:        oklch(52%   0.165 27);    /* absence, alerte */
  --color-stop-wash:   oklch(96%   0.030 27);
  --color-done:        oklch(48%   0.105 165);   /* acquis */
  --color-done-wash:   oklch(95.5% 0.030 165);

  --color-focus:       oklch(46%   0.115 250);

  /* — Typographie — */
  --font-display: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --font-body: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-display:   clamp(2.4rem, 5.2vw, 3.6rem);
  --text-title:     clamp(1.6rem, 3.2vw, 2.1rem);
  --text-section:   1.0625rem;
  --text-lg:        1.1875rem;
  --text-base:      1.0625rem;
  --text-sm:        0.9375rem;
  --text-xs:        0.8125rem;
  --text-micro:     0.6875rem;

  /* — Espace (échelle 4pt) — */
  --space-2xs: 4px;  --space-xs: 8px;  --space-sm: 12px; --space-md: 16px;
  --space-lg: 24px;  --space-xl: 32px; --space-2xl: 48px; --space-3xl: 72px;

  /* — Formes — */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px;
  --radius-pill: 999px;
  --rule-hair: 1px;

  --shadow-card: 0 1px 2px oklch(33.5% 0.083 246 / 0.05),
                 0 8px 24px -12px oklch(33.5% 0.083 246 / 0.14);
  --shadow-lift: 0 2px 4px oklch(33.5% 0.083 246 / 0.07),
                 0 18px 40px -16px oklch(33.5% 0.083 246 / 0.22);
  --press: 0 3px 0 var(--color-navy-deep);

  /* — Mouvement : trois primitives, pas une de plus — */
  --dur-fast: 140ms; --dur-base: 200ms; --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:  cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  font-feature-settings: "cv05" 1, "ss03" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;              /* jamais d'italique en titre */
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 120;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.12;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

/* Chiffres alignés partout où il y a des montants, heures, dates */
.num, .amount, time, td.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- Focus : visible, instantané, jamais animé ---------- */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- Bouton : 8 états ---------- */
.btn {
  --btn-bg: var(--color-blue);
  --btn-fg: #fff;
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 48px; padding: 0 var(--space-lg);
  border: 0; border-radius: var(--radius-md);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 600;
  letter-spacing: -0.005em; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover, .btn.is-hover { background: var(--color-blue-hover); }
.btn:active, .btn.is-active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled {
  background: var(--color-paper-3); color: var(--color-ink-3);
  cursor: not-allowed; transform: none;
}
.btn[data-state="loading"] { color: transparent; position: relative; pointer-events: none; }
.btn[data-state="loading"]::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #fff; border-top-color: transparent;
  animation: spin 700ms linear infinite;
}
.btn[data-state="error"]   { background: var(--color-stop); }
.btn[data-state="success"] { background: var(--color-done); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Bouton principal « tactile » — l'appui s'enfonce vraiment */
.btn-solid {
  --btn-bg: var(--color-navy);
  box-shadow: var(--press);
}
.btn-solid:hover, .btn-solid.is-hover { --btn-bg: var(--color-royal); }
.btn-solid:active, .btn-solid.is-active { transform: translateY(3px); box-shadow: 0 0 0 var(--color-navy-deep); }

.btn-ghost {
  --btn-bg: transparent; --btn-fg: var(--color-ink);
  box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule);
}
.btn-ghost:hover, .btn-ghost.is-hover { --btn-bg: var(--color-paper-2); }

.btn-block { width: 100%; }

/* ---------- Carte ---------- */
.card {
  background: var(--color-card);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* ---------- Pastille de statut : sens, pas décor ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: -0.005em;
  background: var(--color-paper-2); color: var(--color-ink-2);
  white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-wait { background: var(--color-wait-wash); color: var(--color-wait); }
.pill-done { background: var(--color-done-wash); color: var(--color-done); }
.pill-stop { background: var(--color-stop-wash); color: var(--color-stop); }
.pill-gold { background: var(--color-gold-wash); color: var(--color-gold-deep); }
.pill-blue { background: var(--color-blue-wash); color: var(--color-blue); }

/* ---------- Or = progression et récompense, jamais décoration ---------- */
.gold-rule { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--color-gold-deep), var(--color-gold)); }

/* ---------- Marque ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand img { width: 30px; height: 30px; display: block; }
.brand-name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem;
  letter-spacing: -0.012em; color: var(--color-navy);
}
.brand-name span { color: var(--color-gold-deep); }

/* ---------- Libellé de section ---------- */
.section-label {
  font-size: var(--text-micro); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-3);
}

/* ---------- Cible tactile : jamais moins de 44px ---------- */
.tap { min-height: 44px; min-width: 44px; }

/* ---------- Squelette de chargement ---------- */
.skeleton {
  background: linear-gradient(90deg, var(--color-paper-2), var(--color-paper-3), var(--color-paper-2));
  background-size: 200% 100%;
  animation: sk 1.4s var(--ease-in-out) infinite;
  border-radius: var(--radius-sm);
}
@keyframes sk { to { background-position: -200% 0; } }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}