/* ═══════════════════════════════════════════════════════════════════════════
   nation2027 — environnement graphique
   Source : carrousel LinkedIn « nation2027 — saison 2026-2027 » (valeurs
   relevées dans le PDF : couleurs, polices, symbole vectoriel).
   Toutes les couleurs de l'app passent par ces tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Polices embarquées (licence OFL, fichiers dans brand/fonts/) ───────────
   Aucune dépendance à Google Fonts : les polices s'affichent partout.
   DM Sans est la version variable avec axe d'optique : le carrousel utilise
   l'instance « DM Sans 9pt » → font-variation-settings: 'opsz' 9. */
@font-face {
  font-family: 'Bellefair';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('fonts/bellefair-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bellefair';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('fonts/bellefair-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: block;
  src: url('fonts/dm-sans-latin-opsz-normal.woff2') format('woff2-variations'), url('fonts/dm-sans-latin-opsz-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: block;
  src: url('fonts/dm-sans-latin-ext-opsz-normal.woff2') format('woff2-variations'), url('fonts/dm-sans-latin-ext-opsz-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Palette du carrousel */
  --n27-navy: #173049;      /* bleu nuit : fonds sombres, titres sur crème */
  --n27-cream: #fcfaf4;     /* crème : fonds clairs, titres sur bleu nuit */
  --n27-bordeaux: #7a2222;  /* accent sur fond crème (surtitres, « 2027 ») */
  --n27-rose: #c56b6b;      /* accent sur fond bleu nuit (phrase d'accroche) */

  /* Textes secondaires — teintes mesurées dans le carrousel */
  --n27-ink-body: #44586b;        /* texte courant sur crème */
  --n27-ink-muted: #9ca5ad;       /* texte discret sur crème */
  --n27-cream-body: #d9dcdb;      /* texte courant sur bleu nuit */
  --n27-cream-kicker: #a0a9af;    /* surtitre sur bleu nuit */
  --n27-cream-muted: #7f8b96;     /* texte discret sur bleu nuit */

  /* Filets et surfaces dérivés (bleu nuit / crème en transparence) */
  --n27-line: rgba(23, 48, 73, 0.16);
  --n27-line-strong: rgba(23, 48, 73, 0.32);
  --n27-surface: rgba(23, 48, 73, 0.04);
  --n27-line-on-navy: rgba(252, 250, 244, 0.18);
  --n27-bordeaux-soft: rgba(122, 34, 34, 0.08);

  /* Typographies */
  --n27-serif: 'Bellefair', 'Times New Roman', Georgia, serif;
  --n27-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ── Ambiances (les deux fonds du carrousel) ───────────────────────────────── */
.n27-on-cream { background: var(--n27-cream); color: var(--n27-navy); }
.n27-on-navy { background: var(--n27-navy); color: var(--n27-cream); }

/* ── Typographie ───────────────────────────────────────────────────────────── */
.n27-display {            /* grands titres : Bellefair */
  font-family: var(--n27-serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0;
}
.n27-body {               /* texte courant : DM Sans Regular (optique 9 pt) */
  font-family: var(--n27-sans);
  font-weight: 400;
  font-variation-settings: 'opsz' 9;
  line-height: 1.55;
  color: var(--n27-ink-body);
}
.n27-on-navy .n27-body { color: var(--n27-cream-body); }

.n27-kicker {             /* surtitres : DM Sans Bold, capitales très espacées */
  font-family: var(--n27-sans);
  font-weight: 700;
  font-variation-settings: 'opsz' 9;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--n27-bordeaux);
}
.n27-on-navy .n27-kicker { color: var(--n27-cream-kicker); }
.n27-on-navy .n27-kicker.is-accent { color: var(--n27-rose); }

.n27-muted {              /* numérotation, mentions */
  font-family: var(--n27-sans);
  font-weight: 500;
  font-variation-settings: 'opsz' 9;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--n27-ink-muted);
}
.n27-on-navy .n27-muted { color: var(--n27-cream-muted); }

.n27-accent { color: var(--n27-bordeaux); }
.n27-on-navy .n27-accent { color: var(--n27-rose); }

/* ── Logos : fichiers vectoriels exacts (jamais recomposés en texte) ─────────
   brand/logo-nation2027-ia.svg      symbole + nation²⁰²⁷.ia   (viewBox 579×140)
   brand/logo-nation2027.svg         symbole + nation²⁰²⁷      (viewBox 494×140)
   brand/wordmark-nation2027-ia.svg  nation²⁰²⁷.ia seul        (viewBox 419×98)
   brand/signature-nation-advisors.png  signature Nation Advisors (image d'origine du
                                        carrousel, 1200×407, utilisée en masque)
   Symbole et lettres Bellefair en tracés, aux positions exactes du carrousel.
   Usage : <svg class="n27-logo n27-logo--ia" viewBox="0 0 579 140"><use href="brand/logo-nation2027-ia.svg#logo-nation2027-ia"/></svg>
   Taille : fixer la hauteur (height), la largeur suit. Couleur : color du parent. */
.n27-logo { display: block; flex: none; align-self: flex-start; height: 40px; width: auto; max-width: 100%; color: currentColor; overflow: visible; }
.n27-logo--ia { aspect-ratio: 579 / 140; }
.n27-logo--2027 { aspect-ratio: 494 / 140; }
.n27-logo--wordmark { aspect-ratio: 419 / 98; }
.n27-signature {
  display: block;
  flex: none;
  align-self: flex-start;
  height: 34px;
  aspect-ratio: 1200 / 407;
  background-color: currentColor;
  -webkit-mask: url('signature-nation-advisors.png') no-repeat center / contain;
  mask: url('signature-nation-advisors.png') no-repeat center / contain;
}

/* « 2027 » : bordeaux sur crème, crème sur bleu nuit (comme dans le carrousel) */
.n27-on-cream { --n27-logo-2027: var(--n27-bordeaux); }
.n27-on-navy { --n27-logo-2027: var(--n27-cream); }

/* ── Composants ───────────────────────────────────────────────────────────── */
.n27-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid var(--n27-navy);
  border-radius: 0;
  background: var(--n27-navy);
  color: var(--n27-cream);
  font-family: var(--n27-sans);
  font-variation-settings: 'opsz' 9;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}
.n27-button.is-ghost { background: transparent; color: var(--n27-navy); border-color: var(--n27-line-strong); }
.n27-on-navy .n27-button { background: var(--n27-cream); color: var(--n27-navy); border-color: var(--n27-cream); }

.n27-field { display: block; }
.n27-field label { display: block; margin-bottom: 8px; }
.n27-field input {
  width: 100%;
  min-height: 48px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--n27-line-strong);
  border-radius: 0;
  background: transparent;
  font-family: var(--n27-sans);
  font-variation-settings: 'opsz' 9;
  font-size: 17px;
  color: var(--n27-navy);
  outline: none;
}
.n27-field input:focus { border-bottom-color: var(--n27-navy); }
.n27-field input::placeholder { color: var(--n27-ink-muted); }

/* Étiquette thématique */
.n27-tag {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--n27-line-strong);
  border-radius: 999px;
  background: transparent;
  font-family: var(--n27-sans);
  font-variation-settings: 'opsz' 9;
  font-weight: 500;
  font-size: 15px;
  color: var(--n27-navy);
  cursor: pointer;
}
.n27-tag.is-selected { background: var(--n27-navy); border-color: var(--n27-navy); color: var(--n27-cream); }