/* La Sécurité Incendie · tokens (généré depuis tokens.json du design system) */

@font-face { font-family: "Archivo SemiExpanded"; src: url("../fonts/ArchivoSemiExpanded-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo-Italic-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  --surface: #ffffff;
  --surface-alt: #f2f2ef;
  --surface-raised: #ffffff;
  --ink: #1d1d1b;
  --ink-muted: #6b6b67;
  --ink-subtle: #8a8a85;
  --border: #8a8a85;
  --line: #dfdfda;
  --accent: #c8281e;
  --accent-hover: #ae2119;
  --accent-pressed: #8f1b14;
  --accent-soft: #fbefee;
  --accent-ink: #c8281e;
  --on-accent: #ffffff;
  --focus: #1d1d1b;
  --success-ink: #1e7a4c;
  --success-soft: #e8f3ec;
  --warning: #f2c230;
  --on-warning: #1d1d1b;
  --warning-ink: #8a5a00;
  --danger-ink: #a31f17;
  --danger-soft: #fbefee;
  --info-ink: #2f5e8c;
  --info-soft: #eaf0f6;
  --logo-ink: #1d1d1b;
  --scrim: #1d1d1b80;
  --brand-red: #c8281e;
  --brand-ink: #1d1d1b;
  --brand-grey: #f2f2ef;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  --control-sm: 40px;
  --control-md: 48px;
  --control-lg: 56px;
  --target-min: 44px;
  --icon-sm: 20px;
  --icon-md: 24px;
  --icon-lg: 32px;
  --icon-xl: 48px;
  --container-max: 1280px;
  --content-max: 720px;
  --gutter-lg: 32px;
  --gutter-sm: 16px;
  --margin-lg: 64px;
  --margin-sm: 20px;
  --header-height: 84px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --shadow-sm: 0 1px 2px #1d1d1b14;
  --shadow-md: 0 2px 4px #1d1d1b0f, 0 8px 24px #1d1d1b14;
  --shadow-lg: 0 16px 48px #1d1d1b29;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #1d1d1b;
  --font-display: "Archivo SemiExpanded", Archivo, Arial, sans-serif;
  --font-text: Archivo, Arial, sans-serif;
}

[data-theme="dark"], .is-dark {
  --surface: #1d1d1b;
  --surface-alt: #262624;
  --surface-raised: #2b2b28;
  --ink: #f2f2ef;
  --ink-muted: #b5b5af;
  --ink-subtle: #8a8a85;
  --border: #77776f;
  --line: #3d3d39;
  --accent: #c8281e;
  --accent-hover: #ae2119;
  --accent-pressed: #8f1b14;
  --accent-soft: #3a1d1a;
  --accent-ink: #f0645a;
  --on-accent: #ffffff;
  --focus: #f2f2ef;
  --success-ink: #5fb98a;
  --success-soft: #1f3328;
  --warning: #f2c230;
  --on-warning: #1d1d1b;
  --warning-ink: #e2a93b;
  --danger-ink: #f0645a;
  --danger-soft: #3a1d1a;
  --info-ink: #7fa9d6;
  --info-soft: #1f2a35;
  --logo-ink: #ffffff;
  --scrim: #000000a6;
  --shadow-sm: 0 1px 2px #00000080;
  --shadow-md: 0 2px 4px #00000066, 0 8px 24px #00000080;
  --shadow-lg: 0 16px 48px #000000b3;
  --focus-ring: 0 0 0 2px #1d1d1b, 0 0 0 4px #f2f2ef;
}

[data-theme="light"] {
  --surface: #ffffff;
  --surface-alt: #f2f2ef;
  --surface-raised: #ffffff;
  --ink: #1d1d1b;
  --ink-muted: #6b6b67;
  --ink-subtle: #8a8a85;
  --border: #8a8a85;
  --line: #dfdfda;
  --accent: #c8281e;
  --accent-hover: #ae2119;
  --accent-pressed: #8f1b14;
  --accent-soft: #fbefee;
  --accent-ink: #c8281e;
  --on-accent: #ffffff;
  --focus: #1d1d1b;
  --success-ink: #1e7a4c;
  --success-soft: #e8f3ec;
  --warning: #f2c230;
  --on-warning: #1d1d1b;
  --warning-ink: #8a5a00;
  --danger-ink: #a31f17;
  --danger-soft: #fbefee;
  --info-ink: #2f5e8c;
  --info-soft: #eaf0f6;
  --logo-ink: #1d1d1b;
  --scrim: #1d1d1b80;
  --shadow-sm: 0 1px 2px #1d1d1b14;
  --shadow-md: 0 2px 4px #1d1d1b0f, 0 8px 24px #1d1d1b14;
  --shadow-lg: 0 16px 48px #1d1d1b29;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #1d1d1b;
}

.display-xl { font-family: var(--font-display); font-size: 72px; line-height: 72px; font-weight: 700; letter-spacing: -0.015em; }
.display { font-family: var(--font-display); font-size: 56px; line-height: 60px; font-weight: 700; letter-spacing: -0.01em; }
.h1 { font-family: var(--font-display); font-size: 44px; line-height: 48px; font-weight: 700; }
.h2 { font-family: var(--font-display); font-size: 34px; line-height: 40px; font-weight: 700; }
.h3 { font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 700; }
.h4 { font-family: var(--font-display); font-size: 21px; line-height: 28px; font-weight: 700; }
.figure { font-family: var(--font-display); font-size: 48px; line-height: 48px; font-weight: 700; }
.lead { font-family: var(--font-text); font-size: 21px; line-height: 32px; font-weight: 400; }
.body { font-family: var(--font-text); font-size: 17px; line-height: 28px; font-weight: 400; }
.body-strong { font-family: var(--font-text); font-size: 17px; line-height: 28px; font-weight: 600; }
.body-sm { font-family: var(--font-text); font-size: 15px; line-height: 24px; font-weight: 400; }
.label { font-family: var(--font-text); font-size: 15px; line-height: 20px; font-weight: 600; }
.caption { font-family: var(--font-text); font-size: 13px; line-height: 18px; font-weight: 400; }
.overline { font-family: var(--font-text); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.14em; }