/* BUILD — design system tokens.
   Repris de la source Build (tokens/colors · fonts · typography · spacing ·
   radius · elevation · motion · layout). Ne pas inventer de valeur ici :
   toute nouvelle couleur doit venir de la rampe ci-dessous. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&family=Manrope:wght@200..800&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root{
  /* --- Rampe de base : béton de nuit ---------------------------------- */
  --ink-950:#080C10;
  --ink-900:#0B1116;
  --ink-800:#101820;
  --ink-700:#17222C;
  --ink-600:#1F2C38;
  --ink-500:#2A3A47;
  --ink-400:#3B4652;
  --ink-300:#6B7885;
  --ink-200:#9AA6B2;
  --ink-100:#CDD5DD;
  --ink-050:#F2F4F7;
  --white:#FFFFFF;

  /* --- Hi-viz : le seul accent saturé, une fois par vue --------------- */
  --hiviz-700:#B88C00;
  --hiviz-600:#E5AF00;
  --hiviz-500:#FFC300;
  --hiviz-400:#FFD23F;
  --hiviz-200:#FFE894;
  --hiviz-100:#FFF6D6;

  --blue-600:#1B6FE0;
  --blue-500:#2E86FF;
  --blue-400:#5CA1FF;
  --ok-500:#37D67A;
  --danger-500:#FF4D3D;

  /* --- Alphas sur fond sombre ---------------------------------------- */
  --alpha-050:rgba(242,244,247,0.05);
  --alpha-080:rgba(242,244,247,0.08);
  --alpha-120:rgba(242,244,247,0.12);
  --alpha-220:rgba(242,244,247,0.22);
  --alpha-400:rgba(242,244,247,0.40);
  --scrim:rgba(8,12,16,0.72);

  /* --- Surfaces ------------------------------------------------------- */
  --surface-page:var(--ink-900);
  --surface-raised:var(--ink-800);
  --surface-card:var(--ink-700);
  --surface-inset:var(--ink-950);
  --surface-hover:var(--ink-600);
  --surface-accent:var(--hiviz-500);

  /* --- Texte ---------------------------------------------------------- */
  --text-primary:var(--ink-050);
  --text-secondary:var(--ink-200);
  --text-muted:var(--ink-300);
  --text-invert:var(--ink-900);
  --text-accent:var(--hiviz-500);
  --text-link:var(--blue-400);
  --text-link-hover:var(--hiviz-500);

  /* --- Filets --------------------------------------------------------- */
  --border-subtle:var(--alpha-080);
  --border-default:var(--alpha-120);
  --border-strong:var(--alpha-220);
  --border-accent:var(--hiviz-500);
  --focus-ring:var(--hiviz-500);

  /* --- Actions -------------------------------------------------------- */
  --action-primary-bg:var(--hiviz-500);
  --action-primary-bg-hover:var(--hiviz-400);
  --action-primary-bg-active:var(--hiviz-600);
  --action-primary-fg:var(--ink-900);
  --action-secondary-bg:var(--alpha-080);
  --action-secondary-bg-hover:var(--alpha-120);
  --action-secondary-fg:var(--ink-050);
  --action-ghost-fg:var(--ink-100);

  /* --- Typographie ---------------------------------------------------- */
  --font-display:"Archivo","Archivo Expanded","Helvetica Neue",Helvetica,sans-serif;
  --font-sans:"Manrope","Helvetica Neue",Helvetica,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --font-display-wdth:112;
  --ls-display:-0.035em;
  --ls-title:-0.02em;
  --ls-body:-0.005em;
  --ls-label:0.08em;
  --ls-micro:0.14em;

  /* --- Rayons (par rôle, jamais mélangés) ----------------------------- */
  --radius-xs:6px;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:28px;
  --radius-pill:999px;
  --radius-control:var(--radius-pill);
  --radius-card:var(--radius-lg);
  --radius-media:var(--radius-xl);
  --radius-field:var(--radius-md);

  /* --- Élévation ------------------------------------------------------ */
  --shadow-1:0 1px 2px rgba(8,12,16,0.40);
  --shadow-2:0 6px 20px -6px rgba(8,12,16,0.55);
  --shadow-3:0 20px 48px -12px rgba(8,12,16,0.70);
  --shadow-4:0 40px 96px -24px rgba(8,12,16,0.80);
  --shadow-accent:0 8px 28px -8px rgba(255,195,0,0.45);
  --blur-panel:saturate(140%) blur(18px);
  --scrim-bottom:linear-gradient(to top,rgba(8,12,16,0.92) 0%,rgba(8,12,16,0.55) 42%,rgba(8,12,16,0) 100%);
  --grain:repeating-linear-gradient(135deg,rgba(242,244,247,0.035) 0 1px,transparent 1px 4px);

  /* --- Mouvement ------------------------------------------------------ */
  --dur-1:120ms;
  --dur-2:180ms;
  --dur-3:260ms;
  --dur-4:420ms;
  --dur-5:700ms;
  --ease-out:cubic-bezier(0.2,0.8,0.2,1);
  --ease-spring:cubic-bezier(0.34,1.4,0.5,1);
  --transition-control:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out);
  --press-scale:0.97;

  /* --- Gabarit -------------------------------------------------------- */
  --maxw:1320px;

  /* --- Alias héritées du site (avant Build) --------------------------- */
  --ink:var(--text-primary);
  --ink-soft:var(--text-secondary);
  --sand:var(--surface-page);
  --sand-deep:var(--surface-raised);
  --paper:var(--surface-card);
  --line:var(--border-default);
  --accent:var(--hiviz-500);
  --accent-ink:var(--text-secondary);
  --font-text:var(--font-sans);
}
/* --- Thème clair (bascule via data-theme sur <html>) ------------------ */
:root[data-theme="clair"]{
  --surface-page:#F2F4F7;
  --surface-raised:#FFFFFF;
  --surface-card:#FFFFFF;
  --surface-inset:#E4E8ED;
  --surface-hover:#E9EDF1;
  --text-primary:#0B1116;
  --text-secondary:#3B4652;
  --text-muted:#6B7885;
  --text-invert:#F2F4F7;
  --ink-100:#1F2C38;
  --ink-300:#3B4652;
  --alpha-050:rgba(11,17,22,0.04);
  --alpha-080:rgba(11,17,22,0.07);
  --alpha-120:rgba(11,17,22,0.13);
  --alpha-220:rgba(11,17,22,0.22);
  --alpha-400:rgba(11,17,22,0.40);
  --accent-ink:#3B4652;
  --nav-bg:rgba(255,255,255,0.78);
  --shadow-1:0 1px 2px rgba(11,17,22,0.08);
  --shadow-2:0 6px 20px -6px rgba(11,17,22,0.14);
  --shadow-3:0 20px 48px -12px rgba(11,17,22,0.18);
  --shadow-4:0 40px 96px -24px rgba(11,17,22,0.22);
  color-scheme:light;
}

@media (prefers-reduced-motion:reduce){:root{--dur-1:0ms;--dur-2:0ms;--dur-3:0ms;--dur-4:0ms;--dur-5:0ms;--press-scale:1}}

*{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-sans);font-size:16px;line-height:1.55;letter-spacing:var(--ls-body);-webkit-font-smoothing:antialiased}
a{color:var(--text-primary);text-decoration:none;transition:color var(--dur-2) var(--ease-out)}
a:hover{color:var(--hiviz-500)}
img,video{display:block;max-width:100%}
input,textarea,select,button{font-family:inherit;font-size:inherit;color:inherit}
::selection{background:var(--hiviz-500);color:var(--ink-900)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}