/* ============================================================
   ACOMPIA — Charte 2026 sur les pages hors accueil

   L'accueil a été refondu en août 2026 (voir `landing-2026.css`) : Schibsted
   Grotesk, fond blanc, accent mauve, titres serrés, boutons en pastille. Passer
   de l'accueil à une page de ressources donnait l'impression de changer de site.

   La bascule s'est faite en deux temps, et il faut connaître les deux avant de
   toucher à quoi que ce soit :

   1. Les valeurs écrites en clair dans `style-v2.css`, `style.css`,
      `ressources.css` et `legal-v2.css` ont été migrées sur place : police,
      accent, fonds crème, nuits. C'était nécessaire — ces feuilles déclaraient
      la police hors de tout jeton, une cinquantaine de fois, et aucune feuille
      chargée après ne pouvait les atteindre sans réécrire autant de sélecteurs.

   2. Cette feuille-ci ne porte plus que ce qui reste : les jetons que la
      migration ne pouvait pas atteindre parce qu'ils portent un autre nom
      (`variables.css` nomme `--bg-light` ce que `style-v2.css` appelle `--bg`),
      et les quelques traits de la refonte qui n'existaient nulle part avant.

   Ni l'une ni l'autre n'a touché au HTML : pas un mot du contenu ne bouge.

   L'accueil ne charge pas cette feuille, il a la sienne.
   ============================================================ */

:root {
  /* ---------- Filets ----------
     Les filets de l'ancienne charte étaient teintés de beige, accordés au fond
     crème. Sur blanc, ils tirent au jaune. */
  --line: rgba(16, 16, 20, 0.08);
  --line-2: rgba(16, 16, 20, 0.16);
  --line-a: rgba(16, 16, 20, 0.08);
  --line-a-strong: rgba(16, 16, 20, 0.16);

  /* ---------- Dégradés secondaires ----------
     Ils partaient de l'indigo pour finir en cyan ou en émeraude. L'accent est
     devenu mauve, et le cyan est justement la couleur qui jure le plus avec
     lui : on garde la mécanique, on change les arrivées. */
  --g-cyan: linear-gradient(135deg, #4A34F5 0%, #8C7BFF 100%);
  --g-cyem: linear-gradient(135deg, #6E5BFF 0%, #A99BFF 100%);
  --indigo-pale: #8C7BFF;

  /* Ombre d'appel à l'action, recalée sur le mauve et adoucie : sur blanc, une
     ombre portée se lit plus franchement que sur crème. */
  --shadow-cta: 0 1px 2px rgba(16, 16, 20, 0.10),
                0 8px 20px -8px rgba(74, 52, 245, 0.32);
}

/* ============================================================
   Barre de navigation

   Elle est commune à tout le site, mais l'accueil la rhabillait pour lui seul
   dans `landing-2026.css`. Résultat, la même barre changeait de forme d'une
   page à l'autre : 93 px de haut et transparente sur l'accueil, 82 px et
   blanche voilée ailleurs ; libellés en 15 px maigres d'un côté, 14 px gras de
   l'autre ; et surtout un bouton noir sur l'accueil, mauve partout ailleurs.
   C'est ce bouton qui trahissait le plus le changement de page.

   Les valeurs ci-dessous sont celles de `landing-2026.css`, reportées telles
   quelles. Elles ne sont pas recalculées : toute divergence future se corrige
   des deux côtés, ou se factorise.
   ============================================================ */

body > header {
  /* Transparente au repos, comme sur l'accueil : la barre ne se pose sur un
     fond que lorsqu'elle passe devant du contenu. `main.js` bascule
     `nav--scrolled` au-delà de 50 px, sur le `nav` comme sur son `header`. */
  background-color: transparent;
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background-color .25s ease, box-shadow .25s ease;
}
body > header.nav--scrolled {
  background-color: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 1px 0 rgba(12, 12, 20, 0.06), 0 8px 24px rgba(12, 12, 20, 0.05);
}

#nav {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px clamp(20px, 3vw, 56px);
  background: transparent;
  box-shadow: none;
  border-bottom: 0;
}
#nav.nav--scrolled { box-shadow: none; }

.nav-links a,
.nav-dropdown-toggle {
  font-size: 15px;
  font-weight: 400;
  color: #55556A;
}
.nav-links a:hover,
.nav-dropdown-toggle:hover { color: #0C0C14; }

/* `.nav-cta` est déclaré propriété par propriété en `!important` dans
   `style.css` : aucune spécificité ne lui répond, seul un `!important` le
   peut. Le `::before` de `style-v2.css` porte en plus un dégradé à éteindre. */
.nav-links a.nav-cta {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  background: #0C0C14 !important;
  padding: 11px 20px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.nav-links a.nav-cta::before { display: none; }
.nav-links a.nav-cta:hover { background: #4A34F5 !important; }

/* Schibsted Grotesk porte plus large que Geist à taille égale. Sans resserrer
   l'interlettrage, les titres gagnaient une ligne et le rythme des pages ne
   répondait plus à celui de l'accueil, qui les serre à -0,04 em. */
h1, h2, h3,
.section-header h2,
.hero h1 {
  letter-spacing: -0.035em;
}
h1, .hero h1 { letter-spacing: -0.04em; }

/* Les chiffres du site se lisent en colonnes : dates, montants, barèmes. La
   chasse fixe les aligne d'une ligne à l'autre. */
.stat-number,
.stat-value,
table td,
table th {
  font-variant-numeric: tabular-nums;
}

/* La refonte arrondit ses boutons en pastille plutôt qu'en rectangle. C'est le
   signe le plus visible de la nouvelle charte, et il ne coûte qu'un rayon : la
   géométrie des boutons ne bouge pas d'un pixel.

   `!important` parce que `style.css` déclare tout le bouton de la barre de
   navigation en `!important`, rayon compris. Une spécificité plus forte n'y
   suffit pas : seul un `!important` répond à un `!important`. */
.btn-primary,
.btn-secondary,
.btn-ghost,
.nav-links a.nav-cta,
.nav-cta {
  border-radius: 999px !important;
}