/* ═══════════════════════════════════════════════════════════════
   CADENCE TECH · Design System v2
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ─────────────────────────────────────────────────────────────
     Palette : crème & charbon, accent bleu vif, surfaces marine.
       bleu-*   → marine (fonds sombres) + bleus (liens, chiffres)
       accent-* → l'accent principal (bleu vif) et ses déclinaisons
     (anciennement blue-* et amber-*, renommés en octobre 2026)
     ───────────────────────────────────────────────────────────── */

  /* Fonds sombres + bleu profond */
  --bleu-900: #0C2440;   /* marine, sections sombres */
  --bleu-800: #12345C;
  --bleu-700: #1B5FBF;   /* bleu vif, liens, chiffres clés */
  --bleu-600: #2470DA;
  --bleu-500: #4A8CE8;   /* bleu clair, bordures actives */
  --bleu-100: #D6E6F2;
  --bleu-50:  #EEF5FA;

  /* Accent principal : bleu vif */
  --accent-700: #103262;
  --accent-600: #1B5FBF;  /* bleu vif, eyebrows, mot accentué */
  --accent-500: #1B5FBF;  /* bleu vif, boutons pleins, badges */
  --sur-accent: #FFFFFF;         /* texte posé SUR --accent-500 */
  --fond-sombre: #0C2440;        /* surfaces sombres : topbar, pied de page, bandeaux */
  --accent-400: #9FC4F2;  /* bleu clair, sur fond sombre */
  --accent-100: #E6F0FD;

  /* Accent secondaire (second ton du schéma Migratron) */
  --bleu-teal: #4E9AB8;

  /* Famille de teintes · SOURCE UNIQUE.
     Servent à la fois d'aplat (vignettes, visuels de carte) et de couleur de
     texte pour les chiffres clés : toutes sont donc assez foncées pour tenir
     le AA, en blanc dessus comme posées sur crème. Ne jamais redéfinir une
     de ces teintes ailleurs : c'est ainsi que l'ocre des réalisations était
     resté sur l'ancienne valeur claire (2,50 sur les chiffres). */
  --t-bleu:    #1B5FBF;   /* l'accent du site */
  --t-ciel:    #1E6E9E;
  --t-teal:    #2F6A70;
  --t-sauge:   #3F7A52;
  --t-ocre:    #8F6413;
  --t-terra:   #A54B31;
  --t-prune:   #5C4479;
  --t-rose:    #A2455C;
  --t-ardoise: #3A4654;
  --t-pastel:  #9FC4F2;   /* la seule claire : picto foncé dessus */

  /* Neutres chauds (et non plus bleutés) */
  --ink-900: #262524;
  --ink-800: #3A3836;
  --ink-700: #55524E;
  --ink-500: #6A6761;   /* assombri : contraste AA sur crème */
  --ink-400: #8A857E;
  --ink-300: #C3BCAC;
  --ink-200: #E0DACE;
  --ink-100: #EFEBE4;

  --cream: #FBF8F2;
  --cream-warm: #F1EDE3;
  --white: #FFFFFF;

  --green-500: #4A7C59;
  --red-500: #B4483F;

  /* Typographie : une seule famille géométrique + un mono.
     Plus de serif : c'était le principal « tell ». */
  --font-display: 'Jost', -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Jost', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Fira Mono', 'SF Mono', monospace;

  /* Layout : angles vifs, pas d'arrondi décoratif */
  --container-max: 1280px;
  --container-pad: clamp(1rem, 4vw, 2.5rem);
  --section-pad-y: clamp(4rem, 8vw, 7rem);
  --radius-sm: 0;
  --radius: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-pill: 40px;

  /* Motion : discrète */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--cream);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHIE
   ═══════════════════════════════════════════════════════════════ */

/* Eyebrow : mono, uppercase, sans filet décoratif */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-600);
  margin-bottom: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.eyebrow::before { content: none; }

.eyebrow.on-dark { color: var(--accent-400); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

/* Échelle typographique resserrée : plus de titres géants */
h1 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 500; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 1.25rem; }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 500; line-height: 1.2; }
h4 { font-size: 1.05rem; font-weight: 500; }

/* Le mot accentué : plus d'italique, plus de serif.
   Simple changement de couleur, sobre. */
.amber-word {
  color: var(--accent-600);
  font-style: normal;
  font-weight: 500;
}
.on-dark .amber-word,
.amber-word.on-dark,
h2.on-dark .amber-word { color: var(--accent-500); }

.text-amber { color: var(--accent-600); }
.text-blue { color: var(--bleu-700); }

.lead {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 65ch;
}

/* ═══════════════════════════════════════════════════════════════
   BOUTONS
   ═══════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 1.6rem;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth);
  white-space: nowrap;
  text-decoration: none;
}

.btn-primary { background: var(--accent-500); color: var(--sur-accent); border-color: var(--accent-500); }
.btn-primary:hover { background: var(--fond-sombre); color: var(--cream); border-color: var(--ink-900); }

.btn-secondary { background: var(--fond-sombre); color: var(--cream); border-color: var(--ink-900); }
.btn-secondary:hover { background: var(--accent-500); color: var(--sur-accent); border-color: var(--accent-500); }

.btn-outline { background: transparent; color: var(--ink-900); border: 1px solid var(--ink-300); }
.btn-outline:hover { border-color: var(--ink-900); background: var(--fond-sombre); color: var(--cream); }

.btn-outline.on-dark { color: white; border-color: rgba(255,255,255,0.3); }
.btn-outline.on-dark:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.05); }

.btn-arrow::after { content: "→"; font-size: 1.1em; transition: transform 0.2s; }
.btn-arrow:hover::after { transform: translateX(4px); }