/* Wave Security Lab — design tokens communs (3 écrans).
   Trois palettes séparées par design : lab (console), portail (Kanopé), sim (révélation inspirée Wave). */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Instrument+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,500;9..144,700&display=swap");

:root {
  /* Typographie */
  --font-display: "Bricolage Grotesque", "Instrument Sans", sans-serif;
  --font-text: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;
  --font-serif: "Fraunces", Georgia, serif;
  --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.25rem;
  --fs-xl: 1.75rem; --fs-2xl: 2.25rem; --fs-3xl: 3rem;
  --lh-tight: 1.15; --lh-body: 1.5;

  /* Espacements (base 4) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --gutter: 16px; --tap: 44px;

  /* Rayons / ombres */
  --r-sm: 4px; --r-md: 10px; --r-lg: 18px; --r-xl: 28px; --r-full: 999px;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .08);
  --shadow-2: 0 8px 24px rgb(14 13 93 / .12);

  /* Mouvement : courbes et durées (pas de ease-in sur l'UI) */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 500ms; --dur-step: 2200ms;

  /* Palette SIM (révélation, inspirée Wave : bleu ciel, marine, orange, jaune doux) */
  --sim-sky: #1ab3e5; --sim-sky-deep: #0b8fbd; --sim-sky-soft: #d6f1fb;
  --sim-navy: #0e0d5d; --sim-bg: #f8f8f8; --sim-card: #ffffff;
  --sim-ink: #14153a; --sim-muted: #5b5e80; --sim-line: #e3e5ee;
  --sim-orange: #d85f1d; --sim-yellow: #fbde87; --sim-out: #c2361f; --sim-in: #0b7a4b;

  /* Accueil façon Wave (relevé sur capture réelle : fond indigo plein, carte bleu ciel, titres marine) */
  --wv-bg: #4a43dc; --wv-card: #22c4fb; --wv-card-pat: #6fd6fd; --wv-title: #15158f; --wv-sep: #ececec;
  --wv-pastel-1: #e1e4fb; --wv-pastel-2: #fdf3d6; --wv-pastel-3: #e1f3fd; --wv-pastel-4: #fde0f1;
  --wv-pastel-5: #dff7dc; --wv-pastel-6: #eadcf8; --wv-pastel-7: #fbe9d4; --wv-pastel-8: #ececec;

  /* Palette LAB (console SOC : encre, ardoise, ambre signal) */
  --lab-ink: #0d1215; --lab-panel: #141b20; --lab-raise: #1b252b; --lab-line: #27343c;
  --lab-text: #dbe4e9; --lab-muted: #8a9ba5; --lab-accent: #e8a33d;
  --lab-danger: #ef5b5b; --lab-ok: #43c08f; --lab-info: #5bb8d9;

  /* Palette PORTAIL (Kanopé : forêt, crème, terre cuite) */
  --por-forest: #1f4d3a; --por-forest-deep: #143528; --por-cream: #f6f1e7; --por-paper: #fffdf8;
  --por-clay: #c4643b; --por-ink: #1d2620; --por-muted: #5d6a61; --por-line: #ddd5c3;

  /* Palette OS du téléphone */
  --os-wall: #10222b; --os-wall-2: #1c3a47; --os-text: #f2f7f9; --os-glass: rgb(255 255 255 / .14);
  --os-bubble-in: #e9edf0; --os-link: #1769c2; --os-ok: #1c9a63;

  /* Palette PIXEL (Android sombre, Material You bleu nuit) */
  --px-bg: #070e1a; --px-surface: #101a2c; --px-surface-2: #1a2640; --px-chrome: #0c1424; --px-pill: #1b2a47;
  --px-text: #e3e8f2; --px-muted: #a9b4c9; --px-primary: #a8c7fa; --px-on-primary: #062e6f; --px-notif: #0c1526; --px-ok: #2fb35b;
  --px-av-1: #f28b55; --px-av-2: #f4c93d; --px-av-3: #ea6a60; --px-av-4: #4dc6dc; --px-av-5: #a45be0;

  /* Bannière « fictif » : signal fort, identique partout */
  --banner-bg: #ffd23f; --banner-ink: #1a1400; --banner-h: 36px;

  --focus: 0 0 0 3px rgb(26 179 229 / .55);
}

/* Base (une seule fois) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-text); line-height: var(--lh-body); }
button, [role="button"], a, label[for], summary, select { cursor: pointer; }
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; font-size: max(16px, 1rem); } /* >=16px : pas de zoom iOS */
:focus-visible { outline: none; box-shadow: var(--focus); }
button:disabled { cursor: not-allowed; opacity: .5; }
.i { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Bannière fictif permanente */
.fictif-banner {
  position: sticky; top: 0; z-index: 50; min-height: var(--banner-h);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3); background: var(--banner-bg); color: var(--banner-ink);
  font: 700 var(--fs-xs)/1.2 var(--font-text); letter-spacing: .08em; text-align: center; text-transform: uppercase;
  border-bottom: 2px solid var(--banner-ink);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-step: 0ms; }
  * { animation-duration: 0ms !important; transition-duration: 0ms !important; }
}