/* Design tokens — repris du design system fourni (_ds/.../tokens/*.css) */

@import url("https://fonts.googleapis.com/css2?family=Oxanium:wght@400;500;600;700;800&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap");

:root{
/* --- Bleu de marque : échelle extraite du dégradé du logo --- */
--blue-950:#04081F;
--blue-900:#071233;
--blue-800:#0A1B4F;
--blue-700:#0E2670;
--blue-600:#13369B;
--blue-500:#1A47C4;
--blue-400:#3B67DF;
--blue-300:#7595EE;
--blue-200:#AFC3F7;
--blue-100:#D9E3FB;
--blue-50:#F1F5FE;

/* --- Or civique : accent unique, réservé à l'action --- */
--gold-700:#8A5D07;
--gold-600:#B8800C;
--gold-500:#E5A614;
--gold-400:#F2BC42;
--gold-300:#F8D585;
--gold-100:#FDF1D5;

/* --- Neutres froids (teintés bleu, jamais de gris pur) --- */
--ink-900:#0B1020;
--ink-800:#1A2033;
--ink-700:#2C3448;
--ink-600:#454E66;
--ink-500:#6B7490;
--ink-400:#98A0B8;
--ink-300:#C3C9D9;
--ink-200:#DFE3ED;
--ink-100:#EFF1F7;
--white:#FFFFFF;

/* --- Sémantiques --- */
--green-600:#137A54;
--green-100:#DDF2E9;
--amber-600:#B8800C;
--amber-100:#FDF1D5;
--red-600:#B8322F;
--red-100:#FBE3E2;

/* --- Alias sémantiques --- */
--brand-primary:var(--blue-600);
--brand-primary-hover:var(--blue-700);
--brand-primary-active:var(--blue-800);
--brand-deep:var(--blue-900);
--brand-accent:var(--gold-500);
--brand-accent-hover:var(--gold-600);

--text-heading:var(--blue-900);
--text-body:var(--ink-700);
--text-muted:var(--ink-500);
--text-inverse:var(--white);
--text-inverse-muted:var(--blue-200);
--text-link:var(--blue-600);
--text-link-hover:var(--blue-800);
--text-on-accent:var(--blue-900);

--surface-page:var(--white);
--surface-subtle:var(--blue-50);
--surface-card:var(--white);
--surface-deep:var(--blue-900);
--surface-deep-alt:var(--blue-800);
--surface-accent:var(--gold-100);
--surface-disabled:var(--ink-100);

--border-subtle:var(--ink-200);
--border-strong:var(--ink-300);
--border-on-deep:rgba(255,255,255,.16);
--border-focus:var(--blue-400);

--status-success-fg:var(--green-600);
--status-success-bg:var(--green-100);
--status-warning-fg:var(--amber-600);
--status-warning-bg:var(--amber-100);
--status-danger-fg:var(--red-600);
--status-danger-bg:var(--red-100);
--status-info-fg:var(--blue-600);
--status-info-bg:var(--blue-100);

--gradient-deep:radial-gradient(120% 120% at 50% 90%, var(--blue-600) 0%, var(--blue-900) 55%, var(--blue-950) 100%);
--gradient-band:linear-gradient(180deg, var(--blue-900) 0%, var(--blue-800) 100%);
--scrim-photo:linear-gradient(90deg, rgba(7,18,51,.92) 0%, rgba(7,18,51,.68) 45%, rgba(7,18,51,.15) 100%);
--scrim-bottom:linear-gradient(180deg, rgba(7,18,51,0) 0%, rgba(7,18,51,.85) 100%);

--font-display:"Oxanium","Trebuchet MS",sans-serif;
--font-body:"Source Sans 3","Segoe UI",system-ui,sans-serif;

--fs-display-1:clamp(44px,5.2vw,72px);
--fs-display-2:clamp(36px,4vw,56px);
--fs-h1:40px;
--fs-h2:32px;
--fs-h3:24px;
--fs-h4:20px;
--fs-lead:20px;
--fs-body:17px;
--fs-body-sm:15px;
--fs-caption:13px;
--fs-overline:12px;

--lh-tight:1.06;
--lh-heading:1.18;
--lh-snug:1.35;
--lh-body:1.62;

--fw-regular:400;
--fw-medium:500;
--fw-semibold:600;
--fw-bold:700;
--fw-black:800;

--ls-display:-0.01em;
--ls-heading:0em;
--ls-overline:0.16em;
--ls-logotype:0.12em;

--measure-prose:66ch;

--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;

--section-y:var(--space-9);
--section-y-tight:var(--space-8);
--gutter:24px;
--container:1200px;
--container-narrow:800px;

--radius-xs:4px;
--radius-sm:8px;
--radius-md:12px;
--radius-lg:20px;
--radius-xl:32px;
--radius-pill:999px;
--radius-arch:180px 180px 12px 12px;
--border-width:1px;
--border-width-strong:2px;

--shadow-xs:0 1px 2px rgba(7,18,51,.06);
--shadow-sm:0 2px 8px rgba(7,18,51,.08);
--shadow-md:0 8px 24px rgba(7,18,51,.10);
--shadow-lg:0 18px 48px rgba(7,18,51,.14);
--shadow-focus:0 0 0 3px rgba(58,103,223,.35);
--shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.10);
--blur-glass:saturate(140%) blur(14px);
--overlay-scrim:rgba(4,8,31,.62);

--ease-standard:cubic-bezier(.2,.6,.2,1);
--ease-out:cubic-bezier(.16,1,.3,1);
--dur-fast:120ms;
--dur-base:200ms;
--dur-slow:360ms;
--transition-base:all var(--dur-base) var(--ease-standard);

--shell-w:none;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--text-heading);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);font-weight:var(--fw-bold);margin:0 0 var(--space-4)}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}h4{font-size:var(--fs-h4)}
p{margin:0 0 var(--space-4);max-width:var(--measure-prose)}
a{color:var(--text-link);text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
button{font:inherit}

.occ-overline{font-family:var(--font-display);font-size:var(--fs-overline);font-weight:var(--fw-semibold);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--brand-primary)}
.occ-container{max-width:var(--shell-w,var(--container));margin:0 auto;padding:0 var(--gutter);width:100%}