/* Schibsted Grotesk, hébergée localement (SIL OFL, voir assets/fonts/OFL.txt).
   Fonte variable 400-900 : les graisses intermédiaires 450 et 550 de la
   direction artistique en dépendent.
   Auto-hébergée plutôt que servie par Google : un @import tiers bloque le
   rendu le temps d'un aller-retour DNS + TLS vers un second domaine. */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/schibsted-grotesk-latin.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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/schibsted-grotesk-latin-ext.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;
}

/* Repli métrique, pour que le texte ne se recompose pas quand la fonte
   arrive. Valeurs mesurées dans le navigateur, pas estimées. */
@font-face {
  font-family: 'Schibsted Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 103.3%;
  ascent-override: 94.9%;
  descent-override: 25.2%;
  line-gap-override: 0%;
}

:root {
  /* Socle — neutres chauds (design.md §3).
     Les neutres dérivent de la même famille chromatique que l'accent.
     C'est le point qui décide de l'impression générale : les gris bleutés
     précédents (#F5F6F8, #111827, #667085, #EAECF0) sont la palette par
     défaut d'un starter, et c'est d'eux que venait l'air générique. */
  --ink: #241A15;      /* texte principal, brun-noir chaud */
  --ink-2: #6B5B52;    /* texte secondaire — 6.2:1 sur --paper */
  --ink-3: #9E9089;    /* hints, placeholders, et texte sur fond --ink */
  --paper: #FBFAF8;    /* fond de page */
  --surface: #FFFFFF;  /* surfaces élevées */
  --line: #E7E1DC;     /* filets, séparateurs */
  --line-2: #D5CCC5;   /* bordures actives */

  /* Accent — une seule couleur sur tout le site. Elle signale l'action,
     l'état actif et la progression ; elle ne décore jamais. */
  --brique: #9C4A2E;
  --brique-deep: #74341F;
  --brique-light: #C4694A;
  --brique-wash: #F5EAE5;

  /* Données — exclusivement dans un SVG de graphique, jamais ailleurs.
     Un empilement tout en terracotta est illisible : la distinction
     capital apporté / intérêts générés est le cœur de la démonstration,
     elle demande deux teintes séparables, y compris pour un daltonien. */
  --data-capital: #8C7B72;   /* la part versée — neutre */
  --data-interet: var(--brique);  /* la part produite par le temps */
  --data-retrait: #B9AFA8;   /* phase de décaissement */

  /* États système : désaturés, dans la même température que le reste.
     Pas de rouge d'alerte ni de vert fluo. */
  --ok: #4A7C59;
  --warn: #A67C2E;
  --warn-wash: #F7F0E2;
  --err: #A33A2A;
  --err-wash: #F7EBE8;
  --err-line: #E2BDB5;

  /* Noms employés dans les pages, rattachés au socle ci-dessus. */
  --terracotta: var(--brique);
  --terracotta-dark: var(--brique-deep);
  --terracotta-light: var(--brique-light);
  --bg: var(--paper);
  --bg-card: var(--surface);
  --text: var(--ink);
  /* --text2 porte de l'information : contraste >= 4.5:1 sur --bg et --bg-card */
  --text2: var(--ink-2);
  /* --text3 est décoratif sur fond clair (3.0:1). Il ne porte d'information
     que sur le fond --ink du footer, où il monte à 5.5:1. */
  --text3: var(--ink-3);
  --border: var(--line);
  --border2: var(--line-2);

  /* Typography — échelle de rapport ~1.25, ancrée sur un corps de 17px */
  --font-family: 'Schibsted Grotesk', 'Schibsted Fallback', -apple-system,
                 BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-size-micro: 0.8125rem;  /* 13px — mentions */
  --font-size-sm: 0.9375rem;     /* 15px — légendes, hints */
  --font-size-base: 1.0625rem;   /* 17px — corps */
  --font-size-lg: 1.3125rem;     /* 21px */
  --font-size-xl: 1.625rem;      /* 26px */
  --font-size-2xl: 2rem;         /* 32px */
  --font-size-3xl: 2.5rem;       /* 40px */

  /* Rôles typographiques. Le tracking négatif sur les grandes tailles
     est ce qui produit leur densité optique. */
  --display-size: clamp(2.25rem, 5.5vw, 3.75rem);
  --display-track: -0.035em;
  --title-size: clamp(1.75rem, 3vw, 2.25rem);
  --title-track: -0.025em;
  --question-size: clamp(1.375rem, 2.5vw, 1.75rem);
  --question-track: -0.02em;
  --amount-size: clamp(2rem, 5vw, 3rem);
  --amount-track: -0.03em;

  /* Longueur de ligne maximale : 68 caractères */
  --measure: 34em;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* Pas de jeton d'ombre : la hiérarchie passe par le filet et la surface.
     Une ombre ne s'anime pas sans repaint, et celles qui restaient au
     survol apparaissaient d'un coup. */

  /* Rayons — le rayon encode la nature de l'objet, pas sa taille.
     Un rayon unique partout aplatit la lecture. */
  --r-card: 4px;      /* cartes de choix — sobres, presque droites */
  --r-input: 8px;     /* champs, boutons, notices — objets précis */
  --r-surface: 16px;  /* panneaux larges */
  --r-pill: 999px;    /* bascules et badges d'état uniquement */

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;

  /* Courbe de sortie, pour les révélations */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Surface de survol : teinte d'accent très diluée, plutôt qu'un gris neutre */
  --surface-2: var(--brique-wash);
}

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

html {
  scroll-behavior: smooth;
  /* iOS gonfle le corps du texte de sa propre initiative dans certaines
     mises en page. Tout ce qui mesure du texte avant de calculer une
     géométrie se retrouve alors faux — c'est ce qui faisait chevaucher
     les volets du tambour sur iPhone et pas dans un émulateur. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--text);
  background-color: var(--bg);
}

/* Grain fin sur toute la page.
   Bruit fractal généré par feTurbulence et encodé en data-URI : pas de
   requête réseau, pas de fichier binaire à versionner. Statique, jamais
   animé — il doit se sentir sans se voir. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  /* Mesuré, pas estimé : sur un fond clair, 0.032 ne produisait que 3
     niveaux d'amplitude sur 255 — invisible. Un fond sombre rend le même
     bruit deux fois plus présent, c'est de là que venait le réglage.
     0.055 donne ~6 niveaux : la surface a du grain sans qu'on distingue
     le bruit. */
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Enfoncement au clic. Uniquement sur transform, jamais sur la boîte. */
.btn-nav:active,
.btn-cta:active,
.btn-cta-calc:active,
.journey-row:active,
.option:active,
.simulator-band-cta:active {
  transform: scale(0.985);
}

/* Soulignement qui se déploie de la gauche, via scaleX plutôt que
   text-decoration, qui ne s'anime pas. */
.footer-section a {
  position: relative;
}

.footer-section a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-fast);
}

.footer-section a:hover::after,
.footer-section a:focus-visible::after {
  transform: scaleX(1);
}

/* Focus visible sur tout élément interactif.
   Au clavier uniquement, pour ne pas cerner les boutons au clic souris. */
:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

/* Les montants ne doivent pas sauter quand un slider bouge */
.tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Zones tactiles : 48px de haut minimum.
   Les sliders sont traités dans chaque page : leur zone tactile s'obtient
   par du padding, qui doit être déclaré avec le background pour survivre
   au raccourci `background:` qui réinitialiserait background-clip. */
button,
.btn-nav,
input[type="text"],
input[type="email"],
input[type="tel"] {
  min-height: 48px;
}

/* Une partie de l'audience cible est sensible au mouvement.
   Le tracé de la courbe du hero, son parallaxe et l'interpolation des
   montants sont neutralisés côté script, qui interroge la même requête
   média. Le grain reste : c'est une texture, pas du mouvement. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Typography */
body {
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: var(--title-track);
  margin-bottom: var(--spacing-md);
}

h1 {
  font-size: var(--font-size-3xl);
}

h2 {
  font-size: var(--font-size-2xl);
}

h3 {
  font-size: var(--font-size-xl);
  letter-spacing: -0.02em;
}

h4 {
  font-size: var(--font-size-lg);
  letter-spacing: -0.015em;
}

p {
  margin-bottom: var(--spacing-md);
  color: var(--text2);
}

/* Rôles typographiques nommés */
.t-display {
  font-size: var(--display-size);
  font-weight: 600;
  letter-spacing: var(--display-track);
  line-height: 1.05;
}

.t-title {
  font-size: var(--title-size);
  font-weight: 600;
  letter-spacing: var(--title-track);
  line-height: 1.15;
}

.t-question {
  font-size: var(--question-size);
  font-weight: 550;
  letter-spacing: var(--question-track);
  line-height: 1.25;
}

.t-amount {
  font-size: var(--amount-size);
  font-weight: 500;
  letter-spacing: var(--amount-track);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.t-micro {
  font-size: var(--font-size-micro);
  font-weight: 450;
  letter-spacing: 0.01em;
  line-height: 1.45;
}

a {
  color: var(--terracotta);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--terracotta-dark);
}

/* Containers */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.section {
  padding: var(--spacing-2xl) 0;
}

/* .btn, .btn-primary, .btn-secondary et .card vivaient ici sans qu'aucune
   page ne les porte. Les boutons réellement utilisés sont .btn-nav,
   .btn-cta, .btn-cta-calc et .simulator-band-cta ; les cartes sont
   .journey-row et .results-card, définies dans leur page. */