/* ═══════════════════════════════════════════════════════════════════════════
   FFPAPF · DESIGN SYSTEM (event) — tokens et primitives, alignés sur le
   système « v2 » de l'intranet (intranet-ffpapf/public/design-system.css +
   home-v2.css). Même palette, même échelle typographique/espacement — l'event
   et l'intranet sont un seul organisme visuel, plus deux langages divergents.

   Échelle de rayons à DEUX niveaux (assumé, pas un oubli) :
     - --radius-hero (28px) : réservé aux moments « éditoriaux » — le nouvel
       accueil (home.html) et le chrome des pages publiques (event-shell.css),
       où l'intranet utilise lui aussi ce rayon (home-v2.css).
     - --radius / --radius-sm (16/10px) : outils opérationnels denses
       (check-in, scanner, modales, fiches) — l'intranet applique la même
       logique ailleurs que sur son accueil (design-system.css --radius-lg de
       12px sur .ds-card/.block/.kpi, pas le rayon hero de sa page d'accueil).

   Adoption : <link rel="stylesheet" href="/design-system.css" /> avant
   styles.css / event-shell.css.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── 1. Palette — identique à l'intranet (v2) ─────────────────────────── */
  --ink: #111111;
  --muted: #666666;
  --line: #ececec;
  --line-soft: #f2f2f2;
  --soft: #f7f7f7;
  --panel: #f7f7f7;
  --surface: #ffffff;
  --paper: #ffffff;
  --beige: #f4f1eb;
  --sage: #e5f0e7;
  --orange: #f46b3f;
  --pink: #f3d7db;
  --green: #1a8f4c;
  --red: #c0392b;
  --blue: #2563eb;
  --border: var(--line);

  /* Accent produit event : orange (même rôle « à traiter / mis en avant » que
     home-v2.css — kicker, CTA d'accueil, statut « à traiter »). Remplace
     l'ancien violet (--accent:#6b4cff), non repris dans le système v2. */
  --accent: var(--orange);
  --accent-strong: #b64a26;
  --accent-soft: #fdece3;
  --accent-ink: #7a3319;

  /* ── 2. Échelle typographique (corps 14px) ────────────────────────────── */
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px;
  --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; --fs-4xl: 38px;
  --lh-tight: 1.2; --lh-snug: 1.4; --lh-base: 1.55;
  --fw-regular: 400; --fw-medium: 600; --fw-bold: 700;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --serif: Arial, Helvetica, sans-serif; /* alias historique, conservé (styles.css) */

  /* ── 3. Espacement (base 4px) ──────────────────────────────────────────── */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --gutter: clamp(20px, 5vw, 64px);

  /* ── 4. Rayons — voir note d'en-tête ───────────────────────────────────── */
  --radius-hero: 28px;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --radius-full: 999px;
  --pill: var(--radius-pill); /* alias rétro-compat (ancien nom utilisé partout dans styles.css) */

  /* ── 5. Ombres / z-index ───────────────────────────────────────────────── */
  --shadow: 0 1px 2px rgba(17, 17, 17, .06);
  --shadow-xs: 0 1px 2px rgba(17, 17, 17, .05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .12);
  --z-sticky: 50; --z-drawer: 200; --z-modal: 1000; --z-toast: 1100; --z-tooltip: 1200;

  /* ── 6. Couleurs sémantiques + fonds « soft » ──────────────────────────── */
  --color-success: var(--green); --color-warning: var(--orange); --color-danger: var(--red);
  --success-soft: #e7f6ee; --warning-soft: #fdf3e3; --danger-soft: #fdecec; --info-soft: #eaf1ff;

  /* ── 7. Cibles tactiles (terrain : mobile, gants, lumière forte) ───────── */
  --tap-min: 48px; --control-h: 44px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .12s; --dur: .2s;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ── Accessibilité (sûr, global) ────────────────────────────────────────── */
.ds-skip-link { position: absolute; left: 8px; top: -48px; z-index: var(--z-tooltip);
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius-md);
  font-weight: var(--fw-bold); transition: top var(--dur) var(--ease-out); }
.ds-skip-link:focus { top: 8px; outline: 2px solid var(--accent); outline-offset: 2px; }

.ds-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.ds-icon-btn { display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap-min); min-height: var(--tap-min); border: 1px solid transparent;
  border-radius: var(--radius-md); background: transparent; color: var(--muted); cursor: pointer; line-height: 1; }
.ds-icon-btn:hover { background: var(--panel); color: var(--ink); }
.ds-icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ds-ic { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.15em; }
.ds-ic-lg { width: 1.4em; height: 1.4em; }

/* Icônes ligne (SVG inline, cf. ui-kit.js) — même convention que l'intranet
   (ds-app.css .ic) : trait, jamais de remplissage, couleur héritée. */
svg.ic { stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ── Statuts (point + texte — jamais la couleur seule, cf. widget a11y daltonisme) */
.ds-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2xs);
  font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px;
  border-radius: var(--radius-pill); border: 1px solid transparent; }
.ds-status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.ds-status--present { color: var(--color-success); background: var(--success-soft); }
.ds-status--noshow  { color: var(--accent-strong); background: var(--warning-soft); }
.ds-status--pending { color: var(--muted); background: var(--panel); }
.ds-status--danger   { color: var(--color-danger); background: var(--danger-soft); }
.ds-status--info     { color: #1747b8; background: var(--info-soft); }

/* ── Carte standard (fiches, panneaux secondaires) ──────────────────────── */
.ds-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-4); box-shadow: var(--shadow-xs); }

/* ── Champ de formulaire (label toujours au-dessus) ─────────────────────── */
.ds-field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.ds-field > label, .ds-field-label { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted); }
.ds-field input, .ds-field select, .ds-field textarea {
  min-height: var(--control-h); padding: 8px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-md); }
.ds-field input:focus-visible, .ds-field select:focus-visible, .ds-field textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.ds-field-hint { font-size: var(--fs-xs); color: var(--muted); }
.ds-field-error { font-size: var(--fs-xs); color: var(--color-danger); font-weight: var(--fw-medium); }

/* ── Skeleton / état vide ───────────────────────────────────────────────── */
@keyframes ds-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.ds-skel { display: block; border-radius: var(--radius-xs); min-height: 14px;
  background: linear-gradient(90deg, rgba(0,0,0,.05) 25%, rgba(0,0,0,.10) 37%, rgba(0,0,0,.05) 63%);
  background-size: 200% 100%; animation: ds-shimmer 1.4s ease infinite; }
.ds-skel--row { height: 56px; border-radius: var(--radius-sm); margin-bottom: 8px; }
.ds-skel--text { height: 12px; margin: 6px 0; }
.ds-empty { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-2); padding: var(--space-10) var(--space-4); color: var(--muted); }
.ds-empty-icon { font-size: 32px; opacity: .5; line-height: 1; }
.ds-empty-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--ink); }
.ds-empty-text { max-width: 42ch; font-size: var(--fs-sm); }

/* ── KPI (utilisé par le nouvel accueil home.html) ──────────────────────── */
.kpi-row { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: var(--space-4); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
a.kpi { transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur); }
a.kpi:hover { border-color: var(--ink); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kpi .kpi-value { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .kpi-label { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kpi.urgent { border-color: var(--color-danger); }
.kpi.urgent .kpi-value { color: var(--color-danger); }

/* ── Réduction de mouvement ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}