/* =========================================================================
   PROTECTOR ACCESS — colors_and_type.css
   Foundations: font face declarations, color tokens, semantic type roles.
   Source: Charte graphique (2026–2027), Triptyque WEB.
   ========================================================================= */

/* --- Futura PT family (project's official typeface) -------------------- */
@font-face {
  font-family: "Futura PT";
  src: url("fonts/FuturaPTLight.woff2") format("woff2"), url("fonts/FuturaPTLight.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT";
  src: url("fonts/FuturaPTLightOblique.woff2") format("woff2"), url("fonts/FuturaPTLightOblique.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT";
  src: url("fonts/FuturaPTBook.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT";
  src: url("fonts/FuturaPTBookOblique.woff2") format("woff2"), url("fonts/FuturaPTBookOblique.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT";
  src: url("fonts/FuturaPTMedium.woff2") format("woff2"), url("fonts/FuturaPTMedium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT";
  src: url("fonts/FuturaPTMediumOblique.woff2") format("woff2"), url("fonts/FuturaPTMediumOblique.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT";
  src: url("fonts/FuturaPTDemi.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT";
  src: url("fonts/FuturaPTDemiOblique.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT";
  src: url("fonts/FuturaPTBold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT";
  src: url("fonts/FuturaPTBoldOblique.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT";
  src: url("fonts/FuturaPTHeavy.woff2") format("woff2"), url("fonts/FuturaPTHeavy.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT";
  src: url("fonts/FuturaPTHeavyOblique.woff2") format("woff2"), url("fonts/FuturaPTHeavyOblique.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT";
  src: url("fonts/FuturaPTExtraBold.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT";
  src: url("fonts/FuturaPTExtraBoldOblique.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Condensed cuts — for compact display, vertical metadata, dense lists */
@font-face {
  font-family: "Futura PT Cond";
  src: url("fonts/FuturaPTCondBook.woff2") format("woff2"), url("fonts/FuturaPTCondBook.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT Cond";
  src: url("fonts/FuturaPTCondBookOblique.woff2") format("woff2"), url("fonts/FuturaPTCondBookOblique.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT Cond";
  src: url("fonts/FuturaPTCondMedium.woff2") format("woff2"), url("fonts/FuturaPTCondMedium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT Cond";
  src: url("fonts/FuturaPTCondMediumOblique.woff2") format("woff2"), url("fonts/FuturaPTCondMediumOblique.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT Cond";
  src: url("fonts/FuturaPTCondBold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT Cond";
  src: url("fonts/FuturaPTCondBoldOblique.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT Cond";
  src: url("fonts/FuturaPTCondExtraBold.woff2") format("woff2"), url("fonts/FuturaPTCondExtraBold.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT Cond";
  src: url("fonts/FuturaPTCondExtraBoldOblique.woff2") format("woff2"), url("fonts/FuturaPTCondExtraBoldOblique.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* ---- Brand colors (charte graphique) -------------------- */
  --pa-midnight:        #140029;  /* primary — large flats only */
  --pa-dark-amethyst:   #290052;  /* CTAs, interactive elements */
  --pa-velvet-orchid:   #53246a;  /* fine accent on light bg */
  --pa-black:           #000000;
  --pa-white:           #ffffff;

  /* ---- Neutrals (derived for UI; not from the charte) ----- */
  --pa-ink-95: #0b0014;            /* near-black with violet undertone */
  --pa-ink-80: #2a1638;
  --pa-ink-60: #564461;
  --pa-ink-40: #8a7d93;
  --pa-ink-20: #c6becd;
  --pa-ink-10: #e4dfea;
  --pa-ink-05: #f4f1f7;            /* warm off-white surface */
  --pa-paper:  #fbfaf9;            /* page background */

  /* ---- Semantic colors ------------------------------------ */
  --pa-fg:              var(--pa-midnight);
  --pa-fg-muted:        var(--pa-ink-60);
  --pa-fg-subtle:       var(--pa-ink-40);
  --pa-fg-inverse:      var(--pa-white);

  --pa-bg:              var(--pa-paper);
  --pa-bg-surface:      var(--pa-white);
  --pa-bg-subtle:       var(--pa-ink-05);
  --pa-bg-inverse:      var(--pa-midnight);
  --pa-bg-inverse-2:    var(--pa-dark-amethyst);

  --pa-accent:          var(--pa-dark-amethyst);
  --pa-accent-hover:    #36006c;   /* +10% L */
  --pa-accent-press:    #1f0040;
  --pa-accent-soft:     #efe6f6;   /* very light amethyst tint */

  --pa-highlight:       var(--pa-velvet-orchid);

  --pa-border:          var(--pa-ink-10);
  --pa-border-strong:   var(--pa-ink-20);
  --pa-border-inverse:  rgba(255,255,255,.18);

  /* status — derived (no spec); use sparingly */
  --pa-success:         #2f7a4d;
  --pa-warning:         #b97412;
  --pa-danger:          #9b2030;

  /* ---- Typography ----------------------------------------- */
  --pa-font-sans:       "Futura PT", "Futura", "Century Gothic", "Avenir Next", sans-serif;
  --pa-font-cond:       "Futura PT Cond", "Futura PT", "Futura", sans-serif;

  /* Weights — names mirror the charte (Light/Book/Medium/Demi/Bold/Heavy) */
  --pa-w-light:    300;
  --pa-w-book:     400;
  --pa-w-medium:   500;
  --pa-w-demi:     600;
  --pa-w-bold:     700;
  --pa-w-heavy:    800;
  --pa-w-extra:    900;

  /* Type scale — built around a 16px body, 1.25 ratio for body, looser for display */
  --pa-fs-12: 0.75rem;
  --pa-fs-14: 0.875rem;
  --pa-fs-16: 1rem;
  --pa-fs-18: 1.125rem;
  --pa-fs-20: 1.25rem;
  --pa-fs-24: 1.5rem;
  --pa-fs-32: 2rem;
  --pa-fs-40: 2.5rem;
  --pa-fs-56: 3.5rem;
  --pa-fs-72: 4.5rem;
  --pa-fs-96: 6rem;

  --pa-lh-tight: 1.05;
  --pa-lh-snug:  1.2;
  --pa-lh-base:  1.5;
  --pa-lh-loose: 1.65;

  --pa-track-tight: -0.02em;
  --pa-track-normal: 0;
  --pa-track-wide:  0.04em;
  --pa-track-eyebrow: 0.18em;   /* uppercase eyebrows */

  /* ---- Spacing scale (8pt grid w/ 4px half-step) ---------- */
  --pa-sp-1:  4px;
  --pa-sp-2:  8px;
  --pa-sp-3:  12px;
  --pa-sp-4:  16px;
  --pa-sp-5:  24px;
  --pa-sp-6:  32px;
  --pa-sp-7:  48px;
  --pa-sp-8:  64px;
  --pa-sp-9:  96px;
  --pa-sp-10: 128px;

  /* ---- Radii (charte is hard-edged premium; keep radii small) */
  --pa-radius-none: 0;
  --pa-radius-sm:   4px;
  --pa-radius-md:   8px;
  --pa-radius-lg:   16px;
  --pa-radius-pill: 999px;

  /* ---- Elevation ------------------------------------------ */
  --pa-shadow-1: 0 1px 2px rgba(20,0,41,.06), 0 1px 1px rgba(20,0,41,.04);
  --pa-shadow-2: 0 4px 16px rgba(20,0,41,.08), 0 1px 2px rgba(20,0,41,.04);
  --pa-shadow-3: 0 16px 48px rgba(20,0,41,.18), 0 4px 12px rgba(20,0,41,.08);
  --pa-shadow-inset: inset 0 0 0 1px rgba(20,0,41,.06);

  /* ---- Motion --------------------------------------------- */
  --pa-ease-out:   cubic-bezier(.16,.84,.32,1);
  --pa-ease-in:    cubic-bezier(.6,0,.84,.4);
  --pa-ease-in-out: cubic-bezier(.65,.05,.36,1);
  --pa-dur-fast:  120ms;
  --pa-dur-base:  220ms;
  --pa-dur-slow:  380ms;
}

/* ============================================================
   BASE
   ============================================================ */
html {
  font-family: var(--pa-font-sans);
  color: var(--pa-fg);
  background: var(--pa-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   SEMANTIC TYPE ROLES
   Mapping from the charte:
     Sous-titres = Heavy   (eyebrow / section label)
     Titres      = Bold
     Corps       = Medium / Demi / Book
   Italic optional.
   ============================================================ */

/* Display — only for hero / poster moments */
.pa-display {
  font-family: var(--pa-font-sans);
  font-weight: var(--pa-w-extra);
  font-size: clamp(48px, 7vw, var(--pa-fs-96));
  line-height: var(--pa-lh-tight);
  letter-spacing: var(--pa-track-tight);
}

/* H1 — page-level title */
.pa-h1, h1 {
  font-family: var(--pa-font-sans);
  font-weight: var(--pa-w-bold);
  font-size: clamp(36px, 4.5vw, var(--pa-fs-72));
  line-height: var(--pa-lh-tight);
  letter-spacing: var(--pa-track-tight);
  color: #fbfaf9;
  text-wrap: balance;
}

/* H2 */
.pa-h2, h2 {
  font-family: var(--pa-font-sans);
  font-weight: var(--pa-w-bold);
  font-size: clamp(28px, 3.2vw, var(--pa-fs-56));
  line-height: var(--pa-lh-snug);
  letter-spacing: var(--pa-track-tight);
  color: #fbfaf9;
  text-wrap: balance;
}

/* H3 */
.pa-h3, h3 {
  font-family: var(--pa-font-sans);
  font-weight: var(--pa-w-bold);
  font-size: var(--pa-fs-32);
  line-height: var(--pa-lh-snug);
  color: var(--pa-fg);
}

/* H4 */
.pa-h4, h4 {
  font-family: var(--pa-font-sans);
  font-weight: var(--pa-w-demi);
  font-size: var(--pa-fs-24);
  line-height: var(--pa-lh-snug);
  color: var(--pa-fg);
}

/* Eyebrow / sous-titre — Heavy uppercase tracked */
.pa-eyebrow {
  font-family: var(--pa-font-sans);
  font-weight: var(--pa-w-heavy);
  font-size: var(--pa-fs-12);
  line-height: 1;
  letter-spacing: var(--pa-track-eyebrow);
  text-transform: uppercase;
  color: var(--pa-accent);
}

/* Lead paragraph — Demi, slightly larger */
.pa-lead {
  font-family: var(--pa-font-sans);
  font-weight: var(--pa-w-demi);
  font-size: var(--pa-fs-20);
  line-height: var(--pa-lh-loose);
  color: var(--pa-fg);
  text-wrap: pretty;
}

/* Body — Medium is the default body weight per charte */
.pa-body, p {
  font-family: var(--pa-font-sans);
  font-weight: var(--pa-w-medium);
  font-size: var(--pa-fs-16);
  line-height: var(--pa-lh-loose);
  color: var(--pa-fg);
  text-wrap: pretty;
}

/* Body small */
.pa-body-sm {
  font-family: var(--pa-font-sans);
  font-weight: var(--pa-w-medium);
  font-size: var(--pa-fs-14);
  line-height: var(--pa-lh-base);
  color: var(--pa-fg-muted);
}

/* Quote — used for the baseline (Sécuriser les infrastructures…) */
.pa-quote {
  font-family: var(--pa-font-sans);
  font-weight: var(--pa-w-medium);  /* light body */
  font-size: clamp(28px, 3vw, var(--pa-fs-56));
  line-height: var(--pa-lh-snug);
  letter-spacing: var(--pa-track-tight);
  color: var(--pa-fg);
  text-wrap: balance;
}
/* Key words inside .pa-quote get bumped to Heavy — pattern from the charte */
.pa-quote strong, .pa-quote b, .pa-quote .pa-q-key {
  font-weight: var(--pa-w-heavy);
}

/* Labels / buttons */
.pa-label {
  font-family: var(--pa-font-sans);
  font-weight: var(--pa-w-demi);
  font-size: var(--pa-fs-14);
  letter-spacing: var(--pa-track-wide);
  text-transform: uppercase;
  line-height: 1;
}

/* Caption / fine print */
.pa-caption {
  font-family: var(--pa-font-sans);
  font-weight: var(--pa-w-book);
  font-size: var(--pa-fs-12);
  line-height: var(--pa-lh-base);
  color: var(--pa-fg-subtle);
  letter-spacing: var(--pa-track-wide);
}

/* Condensed display — only for tight vertical/metadata moments */
.pa-cond-display {
  font-family: var(--pa-font-cond);
  font-weight: var(--pa-w-extra);
  font-size: var(--pa-fs-40);
  line-height: var(--pa-lh-tight);
  letter-spacing: var(--pa-track-normal);
}

/* Utility — invert text for dark backgrounds */
.pa-on-dark { color: var(--pa-white); }
.pa-on-dark .pa-eyebrow { color: var(--pa-white); opacity: .85; }
.pa-on-dark .pa-body-sm { color: rgba(255,255,255,.72); }