/* =========================================================
   GammaInvest — Design system
   Blanc premium + Bleu profond quasi-noir + Or
   Typographie Apple-like (Inter, fallback SF Pro / system)
   ========================================================= */

:root {
  --navy: #0a1f3c;
  --navy-2: #142a4d;
  --navy-deep: #050e1c;
  --gold: #c9a24b;
  --gold-light: #dfc793;
  --gold-dark: #a9812f;
  --white: #ffffff;
  --off-white: #f7f8fa;
  --paper: #fbfbfc;
  --text: #0a1f3c;
  --text-secondary: #58627a;
  --text-muted: #8a93a6;
  --border: #e7e9ee;
  --border-strong: #d7dbe3;
  --success: #1f8a5f;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(10, 31, 60, 0.04), 0 1px 6px rgba(10, 31, 60, 0.04);
  --shadow-md: 0 8px 30px rgba(10, 31, 60, 0.08);
  --shadow-lg: 0 20px 60px rgba(10, 31, 60, 0.12);
  --shadow-gold: 0 10px 30px rgba(201, 162, 75, 0.25);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;
  --container: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Accessibilité (2026-08-04) : anneau de focus visible au clavier sur tous
   les éléments interactifs, sitewide. N'apparaît que lors d'une navigation
   clavier (:focus-visible), donc aucun changement visuel à la souris. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2.5px solid var(--gold-dark);
  outline-offset: 2px;
  border-radius: 4px;
}
.dark-section a:focus-visible, .dark-section button:focus-visible,
.dark-section input:focus-visible, .dark-section select:focus-visible,
.dark-section textarea:focus-visible, .dark-section [tabindex]:focus-visible {
  outline-color: var(--gold-light);
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01" 1;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4 {
  color: var(--navy);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.5em;
}

h1 { font-weight: 650; }

p {
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 1em;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 16px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 60%, var(--gold-dark));
  color: var(--navy-deep);
  box-shadow: var(--shadow-gold);
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(201, 162, 75, 0.35);
}

.btn-outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--border-strong);
}

.btn-outline:hover {
  border-color: var(--navy);
  background: var(--off-white);
}

.btn-outline-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-outline-light:hover {
  border-color: var(--gold);
  color: var(--gold-light);
}

.btn-block { width: 100%; }
.btn-sm { padding: 10px 20px; font-size: 14px; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}

.site-header .nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 8px;
  min-height: 76px;
  padding: 10px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
  flex-shrink: 0;
  white-space: nowrap;
}

.brand img {
  height: 28px;
  width: auto;
  border-radius: 6px;
}

/* CORRECTIF 2026-08-27 (demande de Jean, "logo fondu dans la barre de menu",
   sans carre/boite autour) : icon-transparent.png est maintenant un vrai PNG
   transparent (symbole chrome argente seul, sans fond navy). Ce rendu argente
   est pense pour un fond sombre -- trop pale pour rester lisible tel quel sur
   le header clair public. Par defaut (header clair), on l'affiche donc en
   silhouette sombre unie (filter:brightness(0)), qui se fond naturellement
   dans la barre sans creer de bloc/carre visible. Sur le header sombre
   premium (.dark-header) et dans le footer (toujours fonce, meme en theme
   public), on restitue le rendu chrome argente complet d'origine. */
.brand img {
  filter: brightness(0) saturate(100%);
}
.dark-header .brand img,
.footer-brand .brand img {
  filter: none;
}

/* CORRECTIF 2026-08-24 : identité "GAMMA INVEST" (symbole gamma + wordmark
   espacé), remplace l'ancien pictogramme temple. Le wordmark reste du texte
   stylé (pas une image figée) pour s'adapter automatiquement aux fonds
   clairs (.site-header) et sombres (.dark-header) sans logo raster dédié
   par thème. */
.brand-name {
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* CORRECTIF 2026-08-24 : couleur "INVEST" alignée sur le wordmark officiel
   (image 2 de Jean) — bleu-gris échantillonné sur le logo fourni, plutôt
   que l'or utilisé jusqu'ici. Reste lisible sur fond clair ET sombre. */
.brand .accent { color: #55668e; margin-left: 0.22em; }
.dark-header .brand .accent, .hero-page-header .brand .accent { color: #8ea0c9; }

/* flex-wrap plutôt que d'autoriser le texte des liens à se casser au milieu
   d'un mot (voir white-space:nowrap ci-dessous) : si une page ajoute des
   éléments supplémentaires au nav-cta (ex. espace membre) et que tout ne
   tient plus sur une ligne, .nav-links passe proprement à la ligne — jamais
   de chevauchement avec le logo ou les boutons de droite (voir aussi
   flex-shrink:0 sur .brand et .nav-cta). */
.nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  row-gap: 6px;
}

.nav-links a {
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active {
  background: var(--off-white);
  color: var(--navy);
}

/* ---------- Nav dropdown (Simulateur) ---------- */
.nav-dropdown { position: relative; }

.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-secondary);
  background: none;
  border: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.nav-dropdown-trigger:hover,
.nav-dropdown.open .nav-dropdown-trigger {
  background: var(--off-white);
  color: var(--navy);
}

.nav-dropdown-caret { width: 13px; height: 13px; transition: transform 0.2s ease; }
.nav-dropdown.open .nav-dropdown-caret { transform: rotate(180deg); }

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  /* MISE À JOUR 2026-08-10 : largeur automatique (max-content) plutôt que
     fixe à 360px, à la demande de Jean — "je ne veux pas qu'il y ait des
     sauts de ligne et des espaces vides". Une largeur fixe forçait soit du
     vide sous les libellés courts ("Ouvrir son PEA"), soit un retour à la
     ligne du badge sous les libellés longs ("Indépendance financière
     (FIRE)"). Le panneau se dimensionne maintenant sur sa ligne la plus
     large (libellé + badge sur une seule ligne, voir flex-wrap: nowrap
     ci-dessous) ; min-width garde un panneau cohérent même pour les menus
     très courts, max-width reste le filet de sécurité mobile. */
  width: max-content;
  min-width: 280px;
  max-width: calc(100vw - 32px);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(10, 31, 60, 0.14);
  padding: 8px;
  z-index: 60;
  /* Filet de sécurité : quel que soit le contenu (libellé long + badge),
     rien ne doit jamais déborder du panneau arrondi — le panneau étant
     dimensionné sur son contenu le plus large (width: max-content
     ci-dessus), ceci ne se déclenche en pratique que si max-width (mobile
     étroit) force un rétrécissement en dessous du contenu naturel. */
  overflow: hidden;
}

.nav-dropdown.open .nav-dropdown-menu { display: block; }

.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  row-gap: 3px;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.25;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active {
  background: var(--off-white);
  color: var(--gold-dark);
  font-weight: 600;
}

/* "Se déconnecter" (menu "Mon espace", voir main.js) est un <button>, pas un
   <a> : même gabarit visuel que les liens du menu, sans les styles par
   défaut du navigateur, et pleine largeur pour s'aligner avec eux. */
.nav-dropdown-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  row-gap: 3px;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.25;
  white-space: nowrap;
  text-align: left;
  cursor: pointer;
}
.nav-dropdown-menu button:hover {
  background: var(--off-white);
  color: var(--gold-dark);
  font-weight: 600;
}
.nav-dropdown-menu button:disabled { opacity: 0.6; cursor: default; }

.nav-dropdown-menu .nav-lock-tag {
  flex-shrink: 0;
  /* Reste toujours collé à droite (même ligne si la place suffit, sinon
     replié seul sur sa propre ligne via flex-wrap sur le lien parent) au
     lieu de justify-content:space-between — qui recentrerait un badge seul
     sur sa ligne une fois replié. */
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold-dark);
  background: rgba(201, 162, 75, 0.14);
  padding: 3px 8px;
  border-radius: 999px;
}

/* Membre Premium (ou admin) connecté : le tag "Membre uniquement" passe à
   "Disponible" (voir unlockNavDropdownTags dans main.js), jamais pour un
   compte gratuit. */
.nav-dropdown-menu .nav-lock-tag.nav-lock-tag-unlocked {
  color: #2f7d4f;
  background: rgba(47, 125, 79, 0.14);
}

.nav-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}

/* Menus nav qui s'ouvrent au survol (Simulateur, Observatoire, Roadmaps —
   .nav-hover-dropdown — ainsi que l'icône profil — .nav-profile, règle plus
   bas). "L'observatoire" reste en plus un vrai lien (clic = accès direct à
   observatoire.html) ; Simulateur/Roadmaps n'ont pas de destination propre,
   mais gardent leur ouverture au clic (voir main.js) en complément du
   survol, pour le tactile/clavier. */
.nav-hover-dropdown { position: relative; }

/* Pont invisible entre le déclencheur et le panneau (qui démarre 10px plus
   bas, .nav-dropdown-menu / .nav-profile-menu). Sans lui, la souris quitte
   la zone survolée pendant cette traversée et le panneau se referme avant
   d'avoir pu cliquer sur un des liens : il fait donc partie de la chaîne de
   survol au même titre que le déclencheur ou le panneau lui-même. Largeur
   100% du déclencheur (pas du panneau, souvent plus large) : il suffit de
   couvrir la traversée initiale du vide, la suite du trajet de la souris se
   fait déjà à l'intérieur du panneau. */
.nav-hover-dropdown::before,
.nav-profile::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 10px;
}

.nav-dropdown-trigger-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.nav-dropdown-trigger-link:hover,
.nav-dropdown.open .nav-dropdown-trigger-link {
  background: var(--off-white);
  color: var(--navy);
}

/* CORRECTIF 2026-08-11 (septimo) : la règle :focus-within qui affichait
   encore le panneau "pour le clavier" reproduisait exactement le même bug
   que l'ancienne règle :hover, mais via le focus cette fois : cliquer sur le
   bouton (ou le lien "L'observatoire") le rend focus, ce qui fait matcher
   :focus-within sur tout le bloc parent en CSS — INDÉPENDAMMENT de la classe
   .open. Résultat concret signalé par Jean : au 2e clic sur "Simulateur",
   le JS retirait bien .open, mais le panneau restait affiché car
   :focus-within, lui, matchait toujours (le bouton cliqué garde le focus
   tant qu'on ne clique pas ailleurs). Supprimé : l'affichage du panneau est
   désormais piloté UNIQUEMENT par .open (posée/retirée par le clic, voir
   main.js), sans aucune autre règle CSS de secours pouvant le contredire.
   La rotation du chevron au survol/focus n'a plus besoin de règle dédiée
   non plus : .nav-dropdown.open .nav-dropdown-caret (plus haut) couvre déjà
   tous les déclencheurs, boutons comme liens, via la même classe .open. */

/* Tactile (mobile/tablette, voir main.js) : pas de survol possible, donc la
   1ère pression sur "L'observatoire" ouvre le sous-menu (comme .open des
   menus Simulateur/Roadmaps) au lieu de naviguer tout de suite. */
.nav-hover-dropdown.open .nav-dropdown-menu {
  display: block;
}
.nav-hover-dropdown.open .nav-dropdown-caret {
  transform: rotate(180deg);
}

.nav-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

/* Bouton icône profil (visiteur non connecté) : accès direct au formulaire
   de connexion, sans passer par le libellé texte "Mon Espace". Masqué en
   JS (main.js) dès qu'une session existe — le CTA "Mon espace" le remplace
   alors fonctionnellement. */
.nav-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  color: var(--navy);
  flex-shrink: 0;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.nav-login-btn svg { width: 18px; height: 18px; }
.nav-login-btn:hover { border-color: var(--navy); background: var(--off-white); }
.dark-header .nav-login-btn { border-color: rgba(255, 255, 255, 0.3); color: var(--white); }
.dark-header .nav-login-btn:hover { border-color: var(--gold); color: var(--gold-light); background: transparent; }

/* Survol de l'icône profil (sans clic, demande de Jean) : un petit menu
   propose l'accès direct à l'espace Premium ou à l'espace public. Réutilise
   le style visuel de .nav-dropdown-menu, mais s'ouvre au survol/focus plutôt
   qu'au clic (indépendant de la logique JS des menus Simulateur/Roadmaps). */
.nav-profile { position: relative; }
.nav-profile-menu {
  right: 0;
  left: auto;
  /* CORRECTIF 2026-08-11 : la largeur fixe 230px + le white-space:nowrap
     posé sur .nav-dropdown-menu a (fix "une seule ligne" du 2026-08-10)
     faisait déborder "Accéder à mon espace Premium" hors de l'encadré
     blanc (texte coupé par l'overflow:hidden du panneau, signalé par
     Jean). Comme pour les menus Simulateur/Roadmaps, le panneau se
     dimensionne maintenant sur son contenu (max-content) : plus aucun
     libellé ne peut dépasser, quelle que soit sa longueur. */
  width: max-content;
  min-width: 230px;
  max-width: calc(100vw - 32px);
}
.nav-profile:hover .nav-profile-menu,
.nav-profile:focus-within .nav-profile-menu {
  display: block;
}

/* Tactile : 1ère pression ouvre (voir main.js), même principe que
   .nav-hover-dropdown.open ci-dessus. */
.nav-profile.open .nav-profile-menu {
  display: block;
}

/* Le pont générique (.nav-profile::before, règle plus haut) ne couvre que la
   largeur de l'icône (38px) alors que le panneau fait désormais une largeur
   variable (max-content, min 230px) et part du bord droit : en diagonale
   vers le panneau, la souris pouvait sortir de cette zone trop étroite et
   fermer le menu avant d'arriver dessus. On élargit et réaligne donc ce
   pont ici pour qu'il couvre une largeur généreuse (280px, supérieure à la
   largeur réelle du panneau même avec son libellé le plus long), pas
   seulement celle de l'icône. */
.nav-profile::before {
  left: auto;
  right: 0;
  width: 280px;
  height: 14px;
}

/* Le CTA "Accéder au Premium" / "Mon espace" (voir main.js) vit désormais
   dans .nav-cta plutôt que .nav-links : il doit donc rester lisible que le
   header soit en thème clair (visiteur public) ou sombre (.dark-header,
   membre Premium ou page nativement sombre) — .btn-outline seul ne gérait
   que le cas clair jusqu'ici (voir .dark-section .btn-outline plus bas, qui
   ne s'applique pas au header). */
.dark-header .btn-outline {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.3);
}
.dark-header .btn-outline:hover {
  border-color: var(--gold);
  background: transparent;
  color: var(--gold-light);
}

/* Bouton "Mon espace" -> menu déroulant des modules Premium (voir main.js).
   Garde l'apparence d'un bouton bordé (comme l'ancien lien "Mon Espace")
   plutôt que le style texte du déclencheur "Simulateur". */
.nav-dropdown-trigger-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: var(--navy);
  background: transparent;
  border: 1px solid var(--border-strong);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.nav-dropdown-trigger-cta:hover,
.nav-dropdown.open .nav-dropdown-trigger-cta {
  border-color: var(--navy);
  background: var(--off-white);
}

.nav-dropdown-trigger-cta .nav-dropdown-caret { width: 12px; height: 12px; }

/* Le menu se déroule côté droit (le bouton est en bout de nav, pas au début
   comme "Simulateur") pour ne jamais déborder hors de l'écran. */
.nav-dropdown-menu-right {
  left: auto;
  right: 0;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  margin: 5px 0;
  transition: 0.2s;
}

/* ---------- Sections ---------- */
section {
  padding: 72px 0;
}

.section-tight { padding: 48px 0; }

.section-alt {
  background: var(--off-white);
}

.section-divider {
  border-top: 1px solid var(--border);
}

.section-header {
  max-width: 640px;
  margin: 0 0 40px;
}

.section-header.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------- Hero ---------- */
.hero {
  padding: 64px 0 32px;
  position: relative;
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  top: -220px;
  right: -160px;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(201, 162, 75, 0.16), transparent 70%);
  pointer-events: none;
}

.hero-inner {
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
  position: relative;
}

.hero h1 {
  font-size: clamp(36px, 6vw, 64px);
  margin-bottom: 20px;
}

.hero .lead {
  font-size: 19px;
  max-width: 560px;
  margin: 0 auto 36px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.hero-note {
  font-size: 13px;
  color: var(--text-muted);
}

/* ---------- Cards ---------- */
.grid {
  display: grid;
  gap: 24px;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f4ead2, #eadcb4);
  color: var(--gold-dark);
  margin-bottom: 20px;
}

.card-icon svg { width: 24px; height: 24px; }

.card h3 {
  font-size: 19px;
  margin-bottom: 10px;
}

.card p {
  font-size: 14.5px;
  margin-bottom: 18px;
}

.card-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.card-link svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.card:hover .card-link svg {
  transform: translateX(3px);
}

/* ---------- Feature list rows ---------- */
.feature-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}

.feature-row:last-child { border-bottom: none; }

.feature-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-dark);
  width: 28px;
  flex-shrink: 0;
  padding-top: 3px;
}

.feature-row h4 {
  font-size: 16.5px;
  margin-bottom: 6px;
}

.feature-row p {
  font-size: 14.5px;
  margin-bottom: 0;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.65);
  padding: 64px 0 32px;
}

/* CORRECTIF 2026-08-13 : le footer vit hors de <main> (donc hors de portée
   de .dark-section, posée uniquement sur <main>) — restait navy même en
   thème Premium, créant un bloc visiblement différent du noir du reste de
   la page juste au-dessus (voir capture Jean). On raccroche donc au body,
   seul ancêtre commun disponible : main.js pose data-gi-theme="1" dessus
   dès qu'un membre Premium actif (ou admin) est détecté, sur TOUTE page —
   y compris les pages nativement sombres comme espace-membre.html. */
body[data-gi-theme="1"] .site-footer { background: #08090b; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand .brand {
  color: var(--white);
  margin-bottom: 14px;
}

.footer-brand .brand .accent { color: #8ea0c9; }

.footer-brand p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  max-width: 280px;
}

.footer-col h5 {
  color: var(--white);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
  font-weight: 600;
}

.footer-col a, .footer-col span {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  padding: 6px 0;
  transition: color 0.2s ease;
}

.footer-col a:hover { color: var(--gold-light); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.45);
}

.footer-bottom a:hover { color: var(--white); }

.footer-legal-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--off-white);
  color: var(--navy);
  border: 1px solid var(--border);
}

.tag-gold {
  background: rgba(201, 162, 75, 0.12);
  color: var(--gold-dark);
  border-color: rgba(201, 162, 75, 0.3);
}

/* État "déjà débloqué" pour un membre Premium (voir main.js) : pastille
   pleine + micro-interaction au survol, pour signaler un accès inclus
   plutôt qu'une fonctionnalité encore à vendre. */
.obs-premium-badge-unlocked {
  background: var(--gold);
  color: var(--navy-deep);
  border-color: var(--gold);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.obs-premium-badge-unlocked:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(201, 162, 75, 0.35);
}
.dark-section .obs-premium-badge-unlocked { color: var(--navy-deep); }

/* MISE À JOUR 2026-08-07 : la simple rangée de pastilles verrouillées a
   été remplacée par un vrai encart de vente (à la demande de Jean —
   "ne mets pas juste des boutons, il faut un appel d'achat"), visible et
   engageant côté public, et qui reste fonctionnel une fois Premium actif
   (main.js déverrouille les pastilles + change le texte/lien du CTA). */
.obs-premium-promo {
  margin-top: 40px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  background: linear-gradient(150deg, rgba(201, 162, 75, 0.08), rgba(201, 162, 75, 0.02));
  border: 1px solid rgba(201, 162, 75, 0.3);
  border-radius: var(--radius-lg);
  padding: 34px 40px;
}

.obs-premium-promo-text h3 { margin: 0 0 10px; font-size: 22px; }
.obs-premium-promo-text > p { max-width: 540px; margin: 0 auto; color: var(--text-secondary); font-size: 15px; line-height: 1.6; }

.obs-premium-promo-features {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}

.obs-premium-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.obs-premium-badge:hover {
  border-color: rgba(201, 162, 75, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.divider {
  height: 1px;
  background: var(--border);
  border: none;
  margin: 0;
}

/* ---------- Accueil : liste d'actifs personnalisable (carte hero) ---------- */
.hp-asset-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hp-asset-row select,
.hp-asset-row input[type="number"] {
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
}

.hp-asset-row select {
  flex: 1;
  min-width: 0;
}

.hp-asset-row input[type="number"] {
  width: 108px;
  text-align: right;
  flex-shrink: 0;
}

.hp-asset-remove {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  flex-shrink: 0;
}

.hp-asset-remove:hover {
  color: #c0392b;
}

.hp-assets-empty {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin: 0 0 4px;
}

/* Textes de la carte "Votre situation aujourd'hui" : classes dédiées (au
   lieu d'une couleur en style inline) pour que le mode Premium sitewide
   (voir plus bas) puisse les re-thémer correctement. */
.hp-muted { color: var(--text-secondary); }
.hp-figure { color: var(--navy); }
.dark-section .hp-muted { color: rgba(255, 255, 255, 0.55); }
.dark-section .hp-figure { color: var(--white); }

/* ---------- Dark / Premium theme ---------- */
/* 2026-08-04 : refonte de l'ambiance Premium — anthracite/noir profond avec
   liserés dorés et effets de verre, le bleu ne sert plus que de lueur
   d'accent discrète (plus de fond bleu dominant). Variables scopées à
   .dark-section pour ne rien changer ailleurs sur le site public. */
.dark-section {
  --pg-glass: rgba(255, 255, 255, 0.045);
  --pg-glass-strong: rgba(255, 255, 255, 0.07);
  --pg-glass-border: rgba(255, 255, 255, 0.09);
  --pg-glass-border-strong: rgba(201, 162, 75, 0.32);
  --pg-gold-line: rgba(201, 162, 75, 0.22);
  /* MISE À JOUR 2026-08-07 : le halo bleu (rgba(91,127,184,...)) donnait un
     rendu "navy" plutôt que "noir pur" — supprimé à la demande de Jean.
     Ne subsiste qu'un très léger glow doré (cohérent avec vip.html) sur
     une base 100% noire, sans dégradé bleuté. */
  background:
    radial-gradient(circle at 88% 108%, rgba(201, 162, 75, 0.06) 0%, transparent 46%),
    #08090b;
  color: rgba(255, 255, 255, 0.78);
}

.dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4 {
  color: var(--white);
}

.dark-section p { color: rgba(255, 255, 255, 0.62); }

/* Cartes "verre" : fond légèrement translucide, liseré doré discret en
   haut, ombre profonde plutôt que la bordure plate d'origine. */
.dark-section .card {
  background: var(--pg-glass);
  border: 1px solid var(--pg-glass-border);
  border-top-color: var(--pg-gold-line);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.dark-section .card:hover {
  transform: translateY(-3px);
  background: var(--pg-glass-strong);
  border-color: var(--pg-glass-border-strong);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(201, 162, 75, 0.08);
}

.dark-section .card h3 { color: var(--white); }
.dark-section .card p { color: rgba(255, 255, 255, 0.55); }

/* Composants de simulateurs (sim-panel / result-card / chart-card) et
   widgets tv-frame : sans ces règles ils restaient blancs par défaut,
   ce qui créait des blocs clairs plaqués sur fond sombre. Même
   traitement "verre" que .card pour une identité Premium cohérente. */
.dark-section .sim-panel,
.dark-section .chart-card,
.dark-section .tv-frame {
  background: var(--pg-glass);
  border: 1px solid var(--pg-glass-border);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.dark-section .tv-frame-head p { color: rgba(255, 255, 255, 0.55); }
.dark-section .tv-frame-foot { color: rgba(255, 255, 255, 0.4); }

.dark-section .result-card {
  background: var(--pg-glass);
  border: 1px solid var(--pg-glass-border);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.dark-section .result-card:hover {
  border-color: var(--pg-glass-border-strong);
  background: var(--pg-glass-strong);
}
.dark-section .result-card .label { color: rgba(255, 255, 255, 0.45); }
.dark-section .result-card .value { color: var(--white); }
.dark-section .result-card.accent .value { color: var(--gold-light); }
.dark-section .result-card .icon {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
}
.dark-section .result-card.accent .icon {
  background: rgba(201, 162, 75, 0.16);
  color: var(--gold-light);
}

.dark-section .field label { color: rgba(255, 255, 255, 0.75); }
.dark-section .field label .value { color: var(--gold-light); border-bottom-color: rgba(223, 199, 147, 0.45); }
.dark-section .field-hint { color: rgba(255, 255, 255, 0.4); }

.dark-section input[type="range"] { background: rgba(255, 255, 255, 0.12); }
.dark-section input[type="range"]::-webkit-slider-thumb {
  background: #0c0d11;
  border-color: var(--gold-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(201, 162, 75, 0.12);
}
.dark-section input[type="range"]::-moz-range-thumb {
  background: #0c0d11;
  border-color: var(--gold-light);
}

/* Compléments pour le mode Premium sitewide (voir main.js) : composants
   partagés qui existaient déjà mais n'avaient jamais eu besoin d'une
   variante sombre tant que .dark-section restait limité à quelques pages
   d'outils. */
.dark-section .section-alt { background: rgba(255, 255, 255, 0.03); }
/* CORRECTIF 2026-08-13 : Jean demande un fond "vraiment tout noir" avec des
   transitions en fondu entre blocs plutôt que des blocs juxtaposés — la
   ligne de séparation .section-divider (pensée pour le thème clair, contre
   var(--off-white)/var(--white)) ressortait comme une ligne quasi blanche
   sur fond noir. Comme les sections voisines partagent maintenant la même
   teinte (noir vrai, ou noir légèrement teinté pour .section-alt), la
   supprimer suffit à obtenir un enchaînement continu sans coupure visible. */
.dark-section .section-divider { border-top: none; }
.dark-section .eyebrow { color: var(--gold-light); }
.dark-section .disclaimer-box {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}
.dark-section .tag:not(.tag-gold) {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
}
/* .btn-primary est un bouton plein bleu marine (var(--navy)) — sur le
   thème sombre sitewide (fond anthracite quasi noir), il se fond dans
   l'arrière-plan et devient à peine visible/cliquable. Passe en blanc
   plein pour rester le bouton le plus contrasté de la page. */
.dark-section .btn-primary {
  background: var(--white);
  color: var(--navy-deep);
}
.dark-section .btn-primary:hover {
  background: var(--gold-light);
  color: var(--navy-deep);
}
.dark-section .btn-outline {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.3);
}
.dark-section .btn-outline:hover {
  border-color: var(--gold);
  background: transparent;
  color: var(--gold-light);
}
.dark-section .check-list-light li { color: rgba(255, 255, 255, 0.7); }
.dark-section .hp-locked-item { color: rgba(255, 255, 255, 0.55); }
/* Spécificité volontairement plus élevée que .hp-locked-item.hp-unlocked
   (texte var(--text), donc quasi noir) pour rester lisible une fois le
   thème sombre sitewide actif — sinon un membre Premium voit du texte
   presque noir sur fond presque noir dès qu'un item de la carte "Votre
   situation aujourd'hui" est débloqué. */
.dark-section .hp-locked-item.hp-unlocked { color: rgba(255, 255, 255, 0.9); }
/* Même bug sur les liens "Explorer" des cartes publiques (page d'accueil,
   Observatoire...) : .card-link reste en var(--navy) (quasi noir) sans
   override, invisible dès que .card passe en fond sombre sous .dark-section. */
.dark-section .card-link { color: var(--gold-light); }
.dark-section .card:hover .card-link { color: var(--white); }
.dark-section .offer-card .offer-price { color: var(--white); }
.dark-section .offer-card .offer-price span { color: rgba(255, 255, 255, 0.5); }
.dark-section .legend-item { color: rgba(255, 255, 255, 0.65); }
.dark-section .feature-row { border-bottom-color: rgba(255, 255, 255, 0.1); }
/* MISE À JOUR 2026-08-07 : filet de sécurité de lisibilité, élargi et
   généralisé à la demande de Jean ("si il y a des caractères en noir,
   les mettre en blanc, fond noir = texte clair"). Nombreux contenus
   rédactionnels (glossaire, guides, fiches, comparatifs) utilisent des
   styles inline color:var(--navy) / color:#0a1f3c / color:var(--text)
   pensés pour un fond clair — quasi invisibles sur le fond désormais
   "noir vrai" (#08090b) de .dark-section. Un style inline ne peut être
   neutralisé que par une règle plus précise ET !important : on cible
   donc l'attribut style lui-même, sur N'IMPORTE QUEL tag (sélecteur
   universel, pas seulement a/strong/p/tbody comme avant) et sur les deux
   écritures possibles (var(--navy) ET sa valeur hexadécimale #0a1f3c),
   plus var(--text) (même couleur, autre nom) et var(--navy-deep). Les
   gris "secondaire/muted" (var(--text-secondary), var(--text-muted)),
   pensés eux aussi pour du texte sur fond clair, sont éclaircis pour
   rester confortablement lisibles sur noir plutôt que de disparaître
   en gris sombre sur noir. */
.dark-section [style*="color:var(--navy)"],
.dark-section [style*="color: var(--navy)"],
.dark-section [style*="color:#0a1f3c"],
.dark-section [style*="color:var(--text)"],
.dark-section [style*="color: var(--text)"],
.dark-section [style*="color:var(--navy-deep)"],
.dark-section [style*="color: var(--navy-deep)"],
.dark-section [style*="color:#050e1c"],
.dark-section [style*="color:#000"],
.dark-section [style*="color:black"] { color: var(--white) !important; }
.dark-section a[style*="color:var(--navy)"]:hover,
.dark-section a[style*="color:#0a1f3c"]:hover,
.dark-section a[style*="color:var(--text)"]:hover { color: var(--gold-light) !important; }
.dark-section [style*="color:var(--text-secondary)"] { color: rgba(255, 255, 255, 0.68) !important; }
.dark-section [style*="color:var(--text-muted)"] { color: rgba(255, 255, 255, 0.5) !important; }

/* CORRECTIF 2026-08-13 : le filet de sécurité ci-dessus force TOUT texte
   color:#0a1f3c en blanc — correct quand le fond environnant devient noir,
   mais 16 pages publiques (guides/initiations) ont un encadré "Exemple
   concret" au fond volontairement clair en dur (style inline
   background:#f6f4ef), qui lui NE devient PAS noir. Résultat signalé par
   Jean : texte blanc quasi invisible sur fond crème. Ces encadrés gardent
   donc un texte sombre, qu'importe le thème — sélectionné via leur fond
   inline (spécificité supérieure à la règle universelle ci-dessus, qui
   cible seulement l'attribut color).
   CORRECTIF 2026-08-14 : même bug, autre écriture non couverte — les cartes
   ".card-link" du bloc "Pour aller plus loin" (22 pages : guides,
   initiations, Observatoire...) utilisent background:var(--surface-alt,
   #f6f4ef) (avec var() et valeur de repli) plutôt que le hex brut
   background:#f6f4ef ci-dessus. Le sélecteur [style*="background:#f6f4ef"]
   fait une recherche de sous-chaîne EXACTE sur l'attribut style : il ne
   matchait donc pas cette écriture var(), et le filet de sécurité forçait
   leur texte (color:#0a1f3c) en blanc sur un fond resté crème — texte
   quasiment illisible, signalé par Jean sur plusieurs pages ("partout sur
   le site"). Ajout de l'écriture var() en plus du hex brut, sélecteurs
   fusionnés pour éviter toute divergence future entre les deux. */
.dark-section [style*="background:#f6f4ef"],
.dark-section [style*="background:#f6f4ef"] strong,
.dark-section [style*="background:#f6f4ef"] p,
.dark-section [style*="background:var(--surface-alt,#f6f4ef)"],
.dark-section [style*="background:var(--surface-alt,#f6f4ef)"] strong,
.dark-section [style*="background:var(--surface-alt,#f6f4ef)"] p,
.dark-section [style*="background:var(--surface-alt, #f6f4ef)"],
.dark-section [style*="background:var(--surface-alt, #f6f4ef)"] strong,
.dark-section [style*="background:var(--surface-alt, #f6f4ef)"] p {
  color: #0a1f3c !important;
}

/* CORRECTIF 2026-08-13 : .obl-ratio-table (tableaux "terme : définition",
   ex. PEA/CTO/assurance-vie) codée uniquement pour fond clair (libellés en
   var(--navy), texte en var(--text-secondary), séparateurs en var(--border))
   — jamais adaptée au thème sombre, d'où les libellés bleu foncé
   quasi invisibles et les lignes de séparation presque blanches signalés
   par Jean. */
.dark-section .obl-ratio-table tr { border-bottom-color: rgba(255, 255, 255, 0.1); }
.dark-section .obl-ratio-table th { color: var(--white); }
.dark-section .obl-ratio-table th span { color: rgba(255, 255, 255, 0.5); }
.dark-section .obl-ratio-table td { color: rgba(255, 255, 255, 0.68); }

/* Même filet pour les quelques tableaux comparatifs inline (ex.
   guide-ouvrir-compte-investissement.html, simulateur-juste-prix.html) qui
   séparent leurs lignes par un style inline border-bottom:...var(--border) —
   ligne quasi blanche sur fond noir sinon. */
.dark-section [style*="border-bottom:1px solid var(--border)"] { border-bottom-color: rgba(255, 255, 255, 0.1) !important; }
.dark-section [style*="border-bottom:1.5px solid var(--border-strong)"] { border-bottom-color: rgba(255, 255, 255, 0.16) !important; }

.dark-header {
  /* Noir vrai (aligné sur .dark-section, #08090b) plutôt que navy — pour
     que l'expérience Premium (header + contenu) soit visuellement d'un
     seul bloc noir, nettement distincte du thème navy/clair public.
     CORRECTIF 2026-08-11 : cette règle n'a en réalité jamais gagné face à
     .hero-page-header.hero-page-header (site-header-glass.css / hero-
     cinematic.css, fond navy rgba(9,18,34,0.42)) — spécificité plus élevée
     (2 classes contre 1 ici), qu'importe l'ordre de chargement des
     feuilles de style. Résultat : le bandeau de nav restait visuellement
     navy/bleuté même en thème sombre, jamais le "noir vrai" documenté
     ci-dessus. !important force enfin le noir voulu. */
  background: rgba(8, 9, 11, 0.85) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dark-header .brand,
.dark-header .nav-links a {
  color: rgba(255, 255, 255, 0.75);
}

.dark-header .brand { color: var(--white); }

.dark-header .nav-links a:hover,
.dark-header .nav-links a.active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
}

.dark-header .nav-toggle span { background: var(--white); }

.dark-header .nav-dropdown-trigger { color: rgba(255, 255, 255, 0.75); }

.dark-header .nav-dropdown-trigger:hover,
.dark-header .nav-dropdown.open .nav-dropdown-trigger {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
}

.dark-header .nav-dropdown-trigger-link { color: rgba(255, 255, 255, 0.75); }

.dark-header .nav-dropdown-trigger-link:hover,
.dark-header .nav-hover-dropdown:hover .nav-dropdown-trigger-link,
.dark-header .nav-hover-dropdown:focus-within .nav-dropdown-trigger-link {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
}

.dark-header .nav-dropdown-trigger-cta {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.3);
}

.dark-header .nav-dropdown-trigger-cta:hover,
.dark-header .nav-dropdown.open .nav-dropdown-trigger-cta {
  border-color: var(--gold);
  background: transparent;
  color: var(--gold-light);
}

/* Icône "Gérer mon abonnement" (espace-membre.html, nav-cta) : même
   silhouette ET même sobriété que .nav-login-btn public (liseré fin,
   neutre, doré uniquement au survol) — remplace l'ancien bouton texte +
   caret qui faisait passer le header à la ligne. CORRECTIF 2026-08-13 :
   première version avec liseré doré permanent jugée trop appuyée par Jean
   ("présente-le comme [l'icône profil publique]") ; repris à l'identique du
   style discret de .nav-login-btn plutôt que d'inventer un traitement
   "premium" à part. */
.nav-account-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  gap: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: var(--white);
  /* CORRECTIF 2026-08-13 : sans caret ni libellé, le bouton n'a plus qu'un
     seul enfant (l'icône) — .nav-dropdown-trigger (classe de base) ne fixe
     pas justify-content, donc flex-start par défaut décalait l'icône vers
     la gauche du cercle au lieu de la centrer. */
  justify-content: center;
  align-items: center;
  line-height: 0;
}
.nav-account-btn svg { width: 18px; height: 18px; flex-shrink: 0; display: block; margin: 0; }
.dark-header .nav-account-btn:hover,
.dark-header .nav-dropdown.open .nav-account-btn {
  border-color: var(--gold);
  background: transparent;
  color: var(--gold-light);
}

/* Le panneau du menu déroulant reste blanc même sur un header sombre : son
   texte doit donc rester sombre, sans hériter du blanc de .nav-links a
   ci-dessus (qui rendait les liens illisibles sur fond blanc). Il faut aussi
   couvrir .active : c'est ce qui rendait invisible l'intitulé de l'outil sur
   lequel on se trouve déjà (son propre lien de menu devient "actif" et
   héritait sinon du blanc de .dark-header .nav-links a.active). */
.dark-header .nav-dropdown-menu a,
.dark-header .nav-dropdown-menu a.active {
  color: var(--text);
}

/* Au survol (ou sur la page en cours), l'intitulé se met clairement en
   évidence (couleur dorée + graisse) au lieu de rester quasi indistinct sur
   le fond clair du panneau. */
.dark-header .nav-dropdown-menu a:hover,
.dark-header .nav-dropdown-menu a.active {
  background: var(--off-white);
  color: var(--gold-dark);
  font-weight: 600;
}

/* ---------- Page header (sous-pages) ---------- */
.page-hero {
  padding: 56px 0 40px;
  text-align: center;
}

.page-hero h1 { font-size: clamp(30px, 4.5vw, 44px); }
.page-hero p { max-width: 560px; margin: 0 auto; font-size: 16.5px; }

/* ---------- Simulateur ---------- */
.sim-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 32px;
  align-items: flex-start;
}

.sim-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 100px;
}

.field {
  margin-bottom: 26px;
}

.field label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 10px;
}

.field label .value {
  font-weight: 700;
  color: var(--gold-dark);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  border-bottom: 1px dashed rgba(201, 162, 75, 0.5);
}

.field-inline-edit {
  width: 90px;
  text-align: right;
  font-weight: 700;
  font-family: inherit;
  font-size: 14px;
  color: var(--gold-dark);
  border: 1px solid var(--gold-dark);
  border-radius: 6px;
  padding: 2px 6px;
}

.dark-section .field-inline-edit,
.cost-section .field-inline-edit {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

/* CORRECTIF 2026-08-27 (demande de Jean, options de listes deroulantes
   invisibles) : le menu deroulant natif d'un <select> est toujours affiche
   par le navigateur/l'OS avec un fond blanc, quelle que soit la couleur de
   fond du <select> lui-meme. De nombreux outils du site stylent leurs
   <select> en blanc sur fond sombre (ex: .oi-input, .fin-asset-form select)
   -- le texte des <option>, qui herite de ce blanc, devient alors invisible
   une fois la liste ouverte. Regle globale : on impose une paire
   couleur/fond toujours lisible sur TOUTES les <option> du site, quel que
   soit le style du <select> parent. */
select option {
  color: var(--navy);
  background-color: #ffffff;
}

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--border-strong);
  outline: none;
  margin: 8px 0;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--navy);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(10,31,60,0.25);
  transition: border-color 0.2s ease, transform 0.15s ease;
}

input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.08); }

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--navy);
  cursor: pointer;
}

.field-hint {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 6px;
}

.sim-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.result-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px;
}

.result-card .label {
  font-size: 12.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
  font-weight: 600;
}

.result-card .value {
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.result-card.accent .value { color: var(--gold-dark); }

.result-card .icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 31, 60, 0.06);
  color: var(--navy);
  margin-bottom: 10px;
}

.result-card.accent .icon {
  background: rgba(201, 162, 75, 0.14);
  color: var(--gold-dark);
}

.result-card .icon svg {
  width: 16px;
  height: 16px;
}

.sim-personalized-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-dark);
  background: rgba(201, 162, 75, 0.12);
  border: 1px solid rgba(201, 162, 75, 0.3);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 16px;
}

.sim-personalized-badge button {
  background: none;
  border: none;
  padding: 0;
  margin-left: 4px;
  font: inherit;
  font-size: 11.5px;
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
}

.chart-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}

.chart-card canvas { max-height: 340px; }

.legend-row {
  display: flex;
  gap: 20px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.disclaimer-box {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-top: 28px;
}

/* Bloc pédagogique "Comprendre ce simulateur" (2026-08-04) : chaque
   simulateur doit expliquer son objectif, ses hypothèses et comment lire
   son résultat — jamais un chiffre nu sans contexte. */
.sim-guide {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  margin-top: 20px;
}

.sim-guide-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold-dark);
  margin-bottom: 16px;
}

.sim-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 28px;
}

.sim-guide-item h4 {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sim-guide-item h4 svg { width: 16px; height: 16px; color: var(--gold-dark); flex: none; }

.sim-guide-item p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

.dark-section .sim-guide {
  background: var(--pg-glass);
  border: 1px solid var(--pg-glass-border);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.dark-section .sim-guide-title { color: var(--gold-light); }
.dark-section .sim-guide-item h4 { color: rgba(255, 255, 255, 0.9); }
.dark-section .sim-guide-item h4 svg { color: var(--gold-light); }
.dark-section .sim-guide-item p { color: rgba(255, 255, 255, 0.55); }

/* ============================================================
   Bloc "Comprendre [le sujet] en profondeur" — article pédagogique
   complet ajouté sous chaque simulateur/outil (2026-08-14, à la demande
   de Jean, inspiré par la structure d'un article de référence :
   sommaire ancré, concept, mécanique/formule, exemples chiffrés, mode
   d'emploi de l'outil, stratégies, FAQ). Gabarit visuel commun réutilisé
   par les ~19 pages simulateurs/outils — le contenu (texte) est propre
   à chaque page, jamais un conseil personnalisé.
   ============================================================ */
.tool-article { max-width: 820px; margin: 0 auto; }
.tool-article-head { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.tool-article-head .eyebrow { justify-content: center; }
.tool-article-intro { font-size: 15px; line-height: 1.7; color: var(--text-secondary); margin-top: 10px; }

.tool-toc { background: var(--off-white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px 26px; margin: 0 0 40px; }
.tool-toc-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold-dark); margin-bottom: 12px; }
.tool-toc ol { margin: 0; padding: 0 0 0 20px; columns: 2; column-gap: 24px; }
.tool-toc li { font-size: 13.5px; margin-bottom: 8px; break-inside: avoid; }
.tool-toc a { color: var(--navy); text-decoration: none; }
.tool-toc a:hover { text-decoration: underline; }

.tool-article-body h2 { font-size: 22px; margin: 48px 0 14px; scroll-margin-top: 100px; }
.tool-article-body h2:first-child { margin-top: 0; }
.tool-article-body h3 { font-size: 16.5px; margin: 26px 0 10px; color: var(--navy); scroll-margin-top: 100px; }
.tool-article-body p { font-size: 14.5px; line-height: 1.75; color: var(--text-secondary); margin: 0 0 14px; }
.tool-article-body ul, .tool-article-body ol.tool-list { margin: 0 0 16px; padding-left: 20px; }
.tool-article-body li { font-size: 14.5px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 6px; }
.tool-article-body strong { color: var(--navy); }

/* CORRECTIF 2026-08-21 : tableaux financiers dans les notes d'analyse
   (premium_posts.content, HTML de confiance rédigé par l'admin) — aucun
   style de table n'existait encore pour .tool-article-body. */
.tool-article-body table { width: 100%; border-collapse: collapse; margin: 4px 0 22px; font-size: 13px; }
.tool-article-body caption { caption-side: bottom; font-size: 12px; font-style: italic; color: var(--text-secondary); margin-top: 6px; text-align: left; }
.tool-article-body th, .tool-article-body td { padding: 9px 12px; text-align: left; border-bottom: 1px solid rgba(10,31,60,0.1); white-space: nowrap; }
.tool-article-body th { background: var(--navy); color: #fff; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em; }
.tool-article-body tbody tr:nth-child(even) { background: rgba(10,31,60,0.03); }
.tool-article-body .table-scroll { overflow-x: auto; margin: 0 0 22px; }
.tool-article-body .table-scroll table { margin: 0; }
.na-stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 22px; }
.na-stat-box { flex: 1 1 140px; background: var(--off-white); border-radius: 10px; padding: 12px 14px; }
.na-stat-box .na-stat-label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin-bottom: 4px; }
.na-stat-box .na-stat-value { display: block; font-size: 18px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.na-stat-box.is-buy { background: rgba(84,163,113,0.14); }
.na-stat-box.is-buy .na-stat-value { color: #2f7a4d; }
.na-callout { border-left: 3px solid var(--gold); background: rgba(201,162,75,0.08); border-radius: 0 10px 10px 0; padding: 12px 16px; margin: 0 0 20px; font-size: 14px; line-height: 1.6; }
.na-callout.na-callout-buy { border-left-color: #2f7a4d; background: rgba(84,163,113,0.1); }

.tool-formula { background: var(--navy); color: #fff; border-radius: var(--radius-md); padding: 22px 26px; margin: 18px 0 20px; text-align: center; }
.tool-formula code { font-size: 17px; font-weight: 700; color: var(--gold-light); letter-spacing: 0.02em; }
.tool-formula-legend { margin-top: 12px; font-size: 12.5px; color: rgba(255,255,255,0.65); text-align: left; display: grid; gap: 4px; }

.tool-example { background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--radius-sm); padding: 16px 20px; margin: 0 0 18px; box-shadow: var(--shadow-sm); }
.tool-example-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold-dark); margin-bottom: 8px; }
.tool-example p { margin: 0 0 6px; font-size: 14px; }
.tool-example p:last-child { margin-bottom: 0; }

.tool-example-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 0 0 18px; }
.tool-example-grid .tool-example { margin-bottom: 0; }

.tool-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 20px 0 24px; }
.tool-step { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px; }
.tool-step-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: var(--navy); font-size: 12.5px; font-weight: 700; margin-bottom: 10px; }
.tool-step h4 { font-size: 14px; margin: 0 0 5px; color: var(--navy); }
.tool-step p { font-size: 13px; margin: 0; color: var(--text-secondary); line-height: 1.55; }

/* Tableaux de contenu (remplacent les listes à puces isolées pour les
   comparaisons / cas de figure — plus lisible, plus proche du gabarit
   Seqooia). */
.tool-table-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold-dark); margin: 0 0 10px; }
.tool-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); margin: 0 0 22px; -webkit-overflow-scrolling: touch; }
.tool-table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 13.5px; }
.tool-table th { background: var(--off-white); color: var(--navy); font-weight: 700; text-align: left; padding: 12px 16px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tool-table td { padding: 13px 16px; color: var(--text-secondary); border-bottom: 1px solid var(--border); line-height: 1.55; vertical-align: top; }
.tool-table tr:last-child td { border-bottom: none; }
.tool-table td strong { color: var(--navy); }
.tool-table td.is-accent { color: var(--gold-dark); font-weight: 700; }

/* Mini-graphiques et illustrations intégrés à l'article (Chart.js ou SVG
   statique selon le cas). */
.tool-chart { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px 22px 12px; margin: 0 0 22px; }
.tool-chart-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold-dark); margin-bottom: 4px; }
.tool-chart-note { font-size: 12px; color: var(--text-secondary); margin: 10px 0 8px; }
.tool-chart canvas { max-height: 240px; }
.tool-chart img { width: 100%; height: auto; display: block; background: #fff; border-radius: 8px; }
.tool-diagram { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px; margin: 0 0 22px; text-align: center; }
.tool-diagram svg { width: 100%; height: auto; max-width: 520px; display: block; margin: 0 auto; }
.tool-diagram-caption { font-size: 12.5px; color: var(--text-secondary); margin-top: 12px; }

.tool-faq { margin-top: 8px; }
.tool-faq-item { border-bottom: 1px solid var(--border); }
.tool-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 2px; font-size: 14.5px; font-weight: 600; color: var(--navy); }
.tool-faq-item summary::-webkit-details-marker { display: none; }
.tool-faq-item summary .tool-faq-plus { flex: none; width: 20px; height: 20px; position: relative; }
.tool-faq-item summary .tool-faq-plus::before,
.tool-faq-item summary .tool-faq-plus::after { content: ''; position: absolute; background: var(--gold-dark); top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform .25s ease, opacity .2s ease; }
.tool-faq-item summary .tool-faq-plus::before { width: 13px; height: 2px; }
.tool-faq-item summary .tool-faq-plus::after { width: 2px; height: 13px; }
.tool-faq-item[open] summary .tool-faq-plus::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.tool-faq-item p { padding: 0 2px 18px; color: var(--text-secondary); font-size: 13.5px; line-height: 1.65; margin: 0; }

/* ---- Dark theme (pages Premium, .dark-section) ---- */
.dark-section .tool-article-intro { color: rgba(255,255,255,0.6); }
.dark-section .tool-toc { background: var(--pg-glass); border-color: var(--pg-glass-border); }
.dark-section .tool-toc-title { color: var(--gold-light); }
.dark-section .tool-toc a { color: rgba(255,255,255,0.85); }
.dark-section .tool-article-body h2,
.dark-section .tool-article-body h3 { color: #fff; }
.dark-section .tool-article-body p,
.dark-section .tool-article-body li { color: rgba(255,255,255,0.62); }
.dark-section .tool-article-body strong { color: #fff; }
.dark-section .tool-article-body th { background: rgba(255,255,255,0.08); color: #fff; }
.dark-section .tool-article-body th, .dark-section .tool-article-body td { border-bottom-color: rgba(255,255,255,0.1); }
.dark-section .tool-article-body tbody tr:nth-child(even) { background: rgba(255,255,255,0.03); }
.dark-section .tool-article-body td { color: rgba(255,255,255,0.75); }
.dark-section .na-stat-box { background: var(--pg-glass); border: 1px solid var(--pg-glass-border); }
.dark-section .na-stat-box .na-stat-label { color: rgba(255,255,255,0.5); }
.dark-section .na-stat-box .na-stat-value { color: #fff; }
.dark-section .na-stat-box.is-buy { background: rgba(84,163,113,0.16); border-color: rgba(84,163,113,0.3); }
.dark-section .na-stat-box.is-buy .na-stat-value { color: #7fd99a; }
.dark-section .na-callout { background: rgba(201,162,75,0.1); color: rgba(255,255,255,0.75); }
.dark-section .na-callout.na-callout-buy { background: rgba(84,163,113,0.12); }
.dark-section .tool-article-body caption { color: rgba(255,255,255,0.45); }
/* CORRECTIF 2026-08-21 (bis) : le logo doit occuper toute l'illustration de
   la note (carte liste ET hero de la page détail), pas une simple pastille
   centrée — demande explicite de Jean. Fond blanc conservé pour la
   lisibilité des logos (fonds transparents/blancs), object-fit:contain pour
   ne jamais rogner un wordmark large comme "Schneider Electric". */
.na-logo-badge { aspect-ratio: 21 / 9; border-radius: var(--radius-lg); margin: 0 auto 32px; max-width: 820px; overflow: hidden; box-shadow: var(--shadow-md); background: #fff; display: flex; }
.na-logo-badge img { width: 100%; height: 100%; object-fit: contain; padding: 40px 60px; }
.na-card-logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 26px 32px; z-index: 1; }
.blog-card-cover.has-logo { background: #fff; }
.blog-card-cover.has-logo .blog-card-category { position: absolute; top: 12px; left: 12px; z-index: 2; }
.dark-section .tool-formula { background: rgba(255,255,255,0.05); border: 1px solid var(--pg-glass-border); }
.dark-section .tool-formula code { color: var(--gold-light); }
.dark-section .tool-example { background: var(--pg-glass); border-color: var(--pg-glass-border); box-shadow: none; }
.dark-section .tool-step { background: var(--pg-glass); border-color: var(--pg-glass-border); }
.dark-section .tool-step h4 { color: #fff; }
.dark-section .tool-step p { color: rgba(255,255,255,0.55); }
.dark-section .tool-faq-item { border-color: var(--pg-glass-border); }
.dark-section .tool-faq-item summary { color: #fff; }
.dark-section .tool-faq-item p { color: rgba(255,255,255,0.6); }
.dark-section .tool-table-title { color: var(--gold-light); }
.dark-section .tool-table-wrap { border-color: var(--pg-glass-border); }
.dark-section .tool-table th { background: rgba(255,255,255,0.05); color: #fff; border-color: var(--pg-glass-border); }
.dark-section .tool-table td { color: rgba(255,255,255,0.62); border-color: var(--pg-glass-border); }
.dark-section .tool-table td strong { color: #fff; }
.dark-section .tool-table td.is-accent { color: var(--gold-light); }
.dark-section .tool-chart,
.dark-section .tool-diagram { background: var(--pg-glass); border-color: var(--pg-glass-border); }
.dark-section .tool-chart-title { color: var(--gold-light); }
.dark-section .tool-chart-note,
.dark-section .tool-diagram-caption { color: rgba(255,255,255,0.55); }

@media (max-width: 640px) {
  .tool-toc ol { columns: 1; }
  .tool-steps { grid-template-columns: 1fr; }
  .tool-example-grid { grid-template-columns: 1fr; }
  .tool-table { min-width: 0; }
}

@media (max-width: 900px) {
  .sim-layout { grid-template-columns: 1fr; }
  .sim-panel { position: static; }
  .sim-results { grid-template-columns: 1fr; }
  .sim-guide-grid { grid-template-columns: 1fr; }
}

/* ---------- Shop / Produits ---------- */
.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-thumb {
  height: 140px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0a1f3c, #142a4d);
  color: var(--gold-light);
}

.product-thumb svg { width: 40px; height: 40px; }

.product-card .price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.price {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
}

.price .cents { font-size: 14px; color: var(--text-muted); font-weight: 500; }

.product-card.featured,
.offer-card.featured {
  border: 1.5px solid var(--gold);
  box-shadow: var(--shadow-gold);
  position: relative;
}

.featured-badge {
  position: absolute;
  top: -12px;
  right: 24px;
  background: var(--navy);
  color: var(--gold-light);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
}

.trust-row {
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-secondary);
}

.trust-item svg { width: 18px; height: 18px; color: var(--gold-dark); flex-shrink: 0; }

/* ---------- Coût de l'attente (cinématique) ---------- */
.cost-section {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 15% 10%, #16294a 0%, var(--navy-deep) 60%);
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}

.cost-section .eyebrow { color: var(--gold-light); }
.cost-section h2 { color: var(--white); }
.cost-section .section-header p { color: rgba(255, 255, 255, 0.6); }
.cost-section .card-link { color: var(--white); }
.cost-section .card-link:hover { color: var(--gold-light); }

.cost-glow {
  position: absolute;
  top: -160px;
  right: -120px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 75, 0.28), transparent 70%);
  filter: blur(6px);
  pointer-events: none;
  animation: costGlowFloat 9s ease-in-out infinite alternate;
}

.cost-glow-2 {
  top: auto;
  right: auto;
  bottom: -180px;
  left: -140px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(20, 42, 77, 0.9), transparent 70%);
  animation-duration: 12s;
  animation-direction: alternate-reverse;
}

/* CORRECTIF 2026-08-13 : le simulateur "Coût de ton attente" (aperçu sur la
   page d'accueil) restait navy même en thème Premium — Jean veut du noir
   partout, y compris ici. Le halo doré (.cost-glow) reste tel quel (fonctionne
   sur noir comme sur navy) ; le second halo, nettement navy (.cost-glow-2),
   est assombri pour rester cohérent avec le noir environnant. */
.dark-section .cost-section {
  background: radial-gradient(circle at 15% 10%, #14161c 0%, #08090b 60%);
}
.dark-section .cost-glow-2 {
  background: radial-gradient(circle, rgba(10, 14, 22, 0.9), transparent 70%);
}

@keyframes costGlowFloat {
  from { transform: translate(0, 0) scale(1); opacity: 0.55; }
  to { transform: translate(-30px, 30px) scale(1.18); opacity: 0.9; }
}

/* ---------- Preuves (accueil) — zone signature, distincte du reste ---------- */
.gi-proof-section {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 18% 0%, rgba(223, 199, 147, 0.18) 0%, var(--off-white) 55%);
  border-top: 1px solid rgba(201, 162, 75, 0.18);
}

.gi-proof-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(6px);
  pointer-events: none;
  background: radial-gradient(circle, rgba(201, 162, 75, 0.24), transparent 70%);
  animation: costGlowFloat 10s ease-in-out infinite alternate;
}

.gi-proof-glow-1 { top: -150px; right: -110px; width: 400px; height: 400px; }

.gi-proof-glow-2 {
  top: auto;
  bottom: -170px;
  left: -130px;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(10, 31, 60, 0.10), transparent 70%);
  animation-duration: 13s;
  animation-direction: alternate-reverse;
}

.dark-section .gi-proof-section {
  background: radial-gradient(circle at 18% 0%, rgba(223, 199, 147, 0.08) 0%, #0c0d10 55%);
  border-top-color: rgba(223, 199, 147, 0.14);
}
.dark-section .gi-proof-glow-2 { background: radial-gradient(circle, rgba(10, 14, 22, 0.9), transparent 70%); }

.gi-proof-grid {
  position: relative;
  z-index: 1;
}

.gi-proof-card {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 40px 30px 32px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease;
}

.gi-proof-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold-dark));
}

.gi-proof-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg);
}

.dark-section .gi-proof-card {
  background: var(--pg-glass, rgba(255, 255, 255, 0.04));
  border-color: var(--pg-glass-border, rgba(255, 255, 255, 0.1));
}

.gi-proof-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201, 162, 75, 0.12);
  color: var(--gold-dark);
}

.gi-proof-icon svg { width: 24px; height: 24px; }

@media (prefers-reduced-motion: reduce) {
  .gi-proof-glow { animation: none; }
  .gi-proof-card { transition: none; }
}

.cost-card {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  /* MISE À JOUR 2026-08-07 : composant resserré (moins de vide) à la
     demande de Jean — padding et espacements internes réduits. */
  padding: 30px 32px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.cost-section .field label,
.dark-section .field label {
  color: rgba(255, 255, 255, 0.85);
}

.cost-section .field label .value,
.dark-section .field label .value {
  color: var(--gold-light);
}

.cost-section .field-hint,
.dark-section .field-hint {
  color: rgba(255, 255, 255, 0.4);
}

.cost-section input[type="range"] {
  background: rgba(255, 255, 255, 0.15);
}

.cost-section input[type="range"]::-webkit-slider-thumb {
  background: var(--navy-deep);
  border-color: var(--gold-light);
}

.cost-section input[type="range"]::-moz-range-thumb {
  background: var(--navy-deep);
  border-color: var(--gold-light);
}

/* MISE À JOUR 2026-08-08 : la colonne de curseurs exploite mieux l'espace
   vertical de la carte (alignée avec la hauteur du graphique à droite) et
   les curseurs sont plus présents visuellement (piste et poignée agrandies,
   valeur affichée en pastille dorée). */
.cost-fields {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.cost-fields .field {
  margin-bottom: 34px;
}

.cost-fields .field:last-child {
  margin-bottom: 0;
}

.cost-fields .field label {
  font-size: 15px;
  margin-bottom: 14px;
}

.cost-section .field label .value {
  display: inline-block;
  background: rgba(223, 199, 147, 0.12);
  border: 1px solid rgba(223, 199, 147, 0.3);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 14px;
}

.cost-fields input[type="range"] {
  height: 6px;
  margin: 10px 0;
}

.cost-fields input[type="range"]::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  border-width: 3px;
}

.cost-fields input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-width: 3px;
}

.cost-fields .field-hint {
  margin-top: 10px;
}

.cost-bar-row {
  margin-bottom: 22px;
}

.cost-bar-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  gap: 12px;
}

.cost-bar-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}

.cost-bar-value {
  font-size: 21px;
  font-weight: 700;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cost-bar-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.cost-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.cost-bar-fill.now {
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}

.cost-bar-fill.later {
  background: linear-gradient(90deg, #4a5972, #6b7a94);
}

/* ---- Graphique de projection (courbes "maintenant" vs "plus tard") ---- */
.cost-chart-wrap { margin-bottom: 12px; }
.cost-chart {
  width: 100%;
  height: 120px;
  display: block;
  overflow: visible;
}
.cost-chart-area { fill: url(#costChartGradNow); stroke: none; opacity: .9; }
.cost-chart-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cost-chart-line--now { stroke: var(--gold-light); }
.cost-chart-line--later { stroke: rgba(255, 255, 255, 0.4); stroke-dasharray: 5 5; }
.cost-chart-point { fill: var(--gold-light); }
.cost-chart-legend { display: flex; gap: 18px; margin-top: 10px; flex-wrap: wrap; }
.cost-chart-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.cost-chart-legend .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-now { background: var(--gold-light); }
.dot-later { background: rgba(255, 255, 255, 0.45); }
.dot-versements { background: rgba(255, 255, 255, 0.4); }
.dot-interets { background: var(--gold-light); }

.cost-result-row { margin-bottom: 8px; }
.cost-result-row:last-of-type { margin-bottom: 0; }

/* ---- Répartition versements / intérêts composés ---- */
.cost-breakdown { margin-top: 14px; }
.cost-breakdown-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.5); margin-bottom: 10px; }
.cost-breakdown-track {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}
.cost-breakdown-seg { height: 100%; transition: width .6s cubic-bezier(.22,.9,.3,1); }
.seg-versements { background: rgba(255, 255, 255, 0.4); }
.seg-interets { background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.cost-breakdown-legend { display: flex; gap: 18px; margin-top: 10px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255, 255, 255, 0.6); }
.cost-breakdown-legend b { color: var(--white); font-weight: 700; margin-left: 4px; }
.cost-breakdown-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }

.cost-note {
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.4);
}

.cost-highlight {
  margin-top: 18px;
  background: linear-gradient(135deg, rgba(201, 162, 75, 0.2), rgba(201, 162, 75, 0.04));
  border: 1px solid rgba(201, 162, 75, 0.35);
  border-radius: var(--radius-md);
  padding: 16px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.cost-highlight .label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.65);
}

.cost-highlight .value {
  font-size: clamp(26px, 3.5vw, 34px);
  font-weight: 700;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}

.cost-cta {
  margin-top: 36px;
  text-align: center;
}

.cost-cta .btn {
  padding: 17px 38px;
  font-size: 16px;
}

@media (max-width: 900px) {
  .cost-card { padding: 28px; }
}

/* ---------- Pricing (Premium) ---------- */
.pricing-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pricing-card.highlight {
  border: 1.5px solid var(--gold);
  background: linear-gradient(160deg, rgba(201,162,75,0.1), rgba(255,255,255,0.02));
  box-shadow: 0 20px 50px rgba(201,162,75,0.15);
  position: relative;
}

.pricing-card .plan-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 14px;
}

.pricing-card .plan-price {
  font-size: 42px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
}

.pricing-card .plan-price span {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
}

.pricing-card .plan-sub {
  font-size: 13.5px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 28px;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: rgba(255,255,255,0.7);
  padding: 8px 0;
}

.check-list svg {
  width: 18px;
  height: 18px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
}

.check-list-light li { color: var(--text-secondary); }
.check-list-light svg { color: var(--gold-dark); }

/* MISE À JOUR 2026-08-07 : les listes "terme : définition" sans icône
   héritaient du display:flex de .check-list, ce qui créait un rendu
   bâclé (colonnes mal alignées selon la longueur du terme — cf. la page
   Obligations). Remplacées par un vrai tableau à 2 colonnes, aligné et
   lisible, réutilisable partout où ce motif "indicateur : définition"
   apparaît. */
.obl-ratio-table-wrap { overflow-x: auto; }
.obl-ratio-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.obl-ratio-table tr { border-bottom: 1px solid var(--border); }
.obl-ratio-table tr:last-child { border-bottom: none; }
.obl-ratio-table th {
  text-align: left;
  vertical-align: top;
  padding: 14px 20px 14px 0;
  width: 220px;
  font-weight: 700;
  color: var(--navy);
}
.obl-ratio-table th span {
  display: block;
  font-weight: 500;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.obl-ratio-table td {
  text-align: left;
  vertical-align: top;
  padding: 14px 0;
  color: var(--text-secondary);
}
@media (max-width: 640px) {
  .obl-ratio-table th { width: auto; display: block; padding-bottom: 4px; }
  .obl-ratio-table td { display: block; padding-top: 0; padding-bottom: 14px; }
  .obl-ratio-table tr { display: block; }
}

.hp-locked-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text-muted);
}

.hp-lock-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201, 162, 75, 0.12);
  margin-top: 1px;
}

.hp-lock-icon svg {
  width: 14px;
  height: 14px;
  color: var(--gold-dark);
}

.hp-locked-item.hp-unlocked {
  color: var(--text);
}

.hp-locked-item.hp-unlocked .hp-lock-icon {
  background: rgba(201, 162, 75, 0.9);
}

.hp-locked-item.hp-unlocked .hp-lock-icon svg {
  color: #fff;
}

.offer-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.offer-card .offer-price {
  font-size: 34px;
  font-weight: 700;
  color: var(--navy);
  margin: 4px 0 4px;
}

.offer-card .offer-price span {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
}

.offer-card .btn { margin-top: 24px; }

.pricing-card .btn { margin-top: 28px; }

/* ---------- Pages légales ---------- */
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 0 96px;
}

.legal-page h2 {
  font-size: 20px;
  margin-top: 44px;
  margin-bottom: 14px;
}

.legal-page h2:first-of-type { margin-top: 0; }

.legal-page p, .legal-page li {
  font-size: 15px;
  color: var(--text-secondary);
}

.legal-page ul {
  margin-bottom: 1em;
}

.legal-page li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
}

.legal-page li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.legal-page .updated {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 36px;
}

/* ---------- Observatoire : icônes d'actifs & hiérarchie visuelle ---------- */
.asset-card {
  position: relative;
  overflow: hidden;
  /* MISE À JOUR 2026-08-07 : mise en colonne + lien "Explorer" ancré en
     bas (margin-top:auto) pour que les 6 cartes restent alignées même
     quand la longueur des descriptions varie — demande de Jean ("tout
     doit être homogène et à la même hauteur"). */
  display: flex;
  flex-direction: column;
}

.asset-card .asset-trait { margin-bottom: 12px; }
.asset-card h3 { margin-bottom: 8px; }
.asset-card p { flex: 1 0 auto; margin-bottom: 18px; }
.asset-card .card-link { margin-top: auto; }

.asset-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}

.asset-card .asset-trait {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.asset-card--actions .asset-icon { background: linear-gradient(135deg, #eaf3ec, #cfe8d6); }
.asset-card--actions .asset-trait { background: rgba(46, 145, 90, 0.12); color: #2e915a; }

.asset-card--etf .asset-icon { background: linear-gradient(135deg, #eaf0fb, #cddcf7); }
.asset-card--etf .asset-trait { background: rgba(47, 100, 202, 0.12); color: #2f64ca; }

.asset-card--obligations .asset-icon { background: linear-gradient(135deg, #f1ecf9, #ded1f2); }
.asset-card--obligations .asset-trait { background: rgba(122, 78, 191, 0.12); color: #7a4ebf; }

.asset-card--crypto .asset-icon { background: linear-gradient(135deg, #fdeeea, #f7cfc2); }
.asset-card--crypto .asset-trait { background: rgba(214, 92, 47, 0.12); color: #d65c2f; }

.asset-card--matieres .asset-icon { background: linear-gradient(135deg, #f9f3e2, #eadcb4); }
.asset-card--matieres .asset-trait { background: rgba(169, 129, 47, 0.14); color: var(--gold-dark); }

.asset-card--forex .asset-icon { background: linear-gradient(135deg, #e7f4f5, #c9e7e9); }
.asset-card--forex .asset-trait { background: rgba(28, 138, 145, 0.12); color: #1c8a91; }

/* CORRECTIF 2026-08-13 : 7e famille d'actifs (Immobilier, absente de
   l'Observatoire public à 6 familles) utilisée par la grille "Mes Outils"
   de l'espace Premium — même logique de variante que les 6 ci-dessus. */
.asset-card--immobilier .asset-icon { background: linear-gradient(135deg, #f3e8df, #e3c7a8); }
.asset-card--immobilier .asset-trait { background: rgba(180, 120, 60, 0.16); color: #b4783c; }

.asset-card.hover-pop:hover {
  transform: translateY(-8px) scale(1.015);
}

/* CORRECTIF 2026-08-14 : .gi-tab-banner (bandeau compact utilisé en tête de
   la zone "Mes Offres" de espace-membre.html) n'avait jamais eu de règles
   CSS — un simple <div> avec une image de fond en style inline, sans
   dimension ni overlay, s'affichait donc écrasé et illisible. Traitement
   "carte compacte" : coins arrondis, dégradé sombre pour la lisibilité du
   texte, hauteur minimale généreuse. Le hero plein cadre de outils.html
   (voir assets/css/premium-hero.css) reprend le même langage visuel en
   version plus grande, façon Observatoire. */
.gi-tab-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  margin-bottom: 32px;
}
.gi-tab-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 9, 20, 0.35) 0%, rgba(4, 9, 20, 0.78) 100%);
}
.gi-tab-banner-content {
  position: relative;
  z-index: 1;
  padding: 28px 32px;
  max-width: 640px;
}
.gi-tab-banner-content .eyebrow { justify-content: flex-start; }
.gi-tab-banner-content h2 { color: #fff; margin: 6px 0 8px; }
.gi-tab-banner-content p { color: rgba(255, 255, 255, 0.78); margin: 0; font-size: 14.5px; }
@media (max-width: 640px) {
  .gi-tab-banner { min-height: 180px; }
  .gi-tab-banner-content { padding: 22px 20px; }
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger.is-visible > * {
  transition-delay: calc(var(--reveal-i, 0) * 90ms);
}

/* ---------- Moteur de recherche d'actifs ---------- */
.asset-search {
  max-width: 620px;
  margin: 0 auto;
  position: relative;
}

.asset-search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  padding: 14px 22px;
  box-shadow: var(--shadow-md);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.asset-search-box:focus-within {
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
}

.asset-search-box svg {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.asset-search-box input {
  flex: 1;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 15.5px;
  color: var(--text);
  background: transparent;
}

.asset-search-results {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 340px;
  overflow-y: auto;
  z-index: 40;
  display: none;
}

.asset-search-results.open { display: block; }

.asset-search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  width: 100%;
  background: none;
  font-family: inherit;
}

.asset-search-result:last-child { border-bottom: none; }
.asset-search-result:hover, .asset-search-result.active { background: var(--off-white); }

.asset-search-result .asr-icon { font-size: 18px; width: 26px; text-align: center; flex-shrink: 0; }
.asset-search-result .asr-name { font-weight: 600; font-size: 14.5px; color: var(--navy); }
.asset-search-result .asr-meta { font-size: 12.5px; color: var(--text-muted); margin-left: auto; }
.asset-search-empty { padding: 18px 20px; font-size: 14px; color: var(--text-muted); }

.asset-search-chart {
  margin-top: 20px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  display: none;
}

.asset-search-chart.open { display: block; }

/* ---------- Marchés aujourd'hui ---------- */
.market-today-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.market-chip {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.market-chip .mc-icon { font-size: 22px; margin-bottom: 6px; }
.market-chip .mc-label { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; }
.market-chip .mc-value { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

.fng-widget {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.fng-widget img {
  max-width: 260px;
  width: 100%;
  border-radius: var(--radius-md);
}

/* ---------- Widgets TradingView intégrés ---------- */
.tv-frame {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.tv-frame-head {
  padding: 20px 24px 4px;
}

.tv-frame-head .tag { margin-bottom: 10px; }
.tv-frame-head h3 { font-size: 17px; margin-bottom: 6px; }
.tv-frame-head p { font-size: 14px; color: var(--text-secondary); margin-bottom: 0; }

.tv-frame-body { padding: 12px; }

.tv-frame-foot {
  padding: 4px 24px 20px;
  font-size: 13px;
  color: var(--text-muted);
}

/* ---------- CTA de fin de parcours ---------- */
.journey-cta {
  background: radial-gradient(circle at 25% 20%, #16294a 0%, var(--navy-deep) 60%);
  border-radius: var(--radius-lg);
  padding: 56px 40px;
  text-align: center;
  color: var(--white);
}

/* CORRECTIF 2026-08-13 : ce bloc de fin de page (juste au-dessus du footer)
   restait navy en thème Premium — capture de Jean montrant un "bloc bleu"
   posé sur fond noir juste avant le footer, lui aussi resté navy (voir
   .site-footer plus bas) : deux teintes différentes qui empêchaient tout
   fondu entre "le contenu" et "le bas de page". Les deux passent au noir. */
.dark-section .journey-cta {
  background: radial-gradient(circle at 25% 20%, #14161c 0%, #08090b 60%);
}

.journey-cta .eyebrow { color: var(--gold-light); justify-content: center; }
.journey-cta h2 { color: var(--white); font-size: clamp(24px, 3.5vw, 34px); }
.journey-cta p { color: rgba(255,255,255,0.65); max-width: 540px; margin: 0 auto 28px; }
.journey-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .market-today-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  section { padding: 64px 0; }
  .nav-links {
    display: none;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 12px 24px 20px;
    gap: 2px;
    box-shadow: var(--shadow-md);
  }
  .dark-header .nav-links { background: #08090b; border-color: rgba(255,255,255,0.08); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 14px; }
  .nav-toggle { display: block; }
  .nav-cta .btn-outline span, .nav-cta .btn span { display: inline; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .market-today-grid { grid-template-columns: 1fr 1fr; }
  .asset-search-box { padding: 12px 16px; }
  .journey-cta { padding: 40px 22px; }

  .nav-dropdown-trigger { width: 100%; padding: 12px 14px; justify-content: space-between; }
  .nav-dropdown-trigger-link { width: 100%; padding: 12px 14px; justify-content: space-between; }
  /* CORRECTIF 2026-08-11 (ter) : Jean demande explicitement un fond blanc
     pour le panneau déroulant mobile, "pour mettre en avant les différents
     boutons" — remplace le fond quasi transparent précédent (pensé pour se
     fondre dans le panneau sombre) par une vraie carte blanche, identique
     dans l'esprit au popup du desktop, qui se détache nettement du panneau
     sombre derrière elle. Le texte redevient donc sombre par défaut (voir
     .nav-dropdown-menu a plus haut, déjà color:var(--text)) : plus besoin
     d'un texte clair spécifique ici, ni sous .dark-header — supprimé. */
  .nav-dropdown-menu {
    display: none;
    position: static;
    box-shadow: 0 6px 18px rgba(10, 31, 60, 0.18);
    border: 1px solid var(--border);
    background: var(--white);
    border-radius: 12px;
    margin: 2px 0 6px;
    min-width: 0;
  }
  .nav-dropdown.open .nav-dropdown-menu { display: block; }
  /* Le passage à width: max-content (desktop, règle de base plus haut) vise à
     garder chaque libellé + étiquette "Membre uniquement" sur une seule
     ligne sans espace mort. Sur mobile, le panneau redevient plein-largeur
     (position: static ci-dessus) et cette largeur naturelle peut dépasser un
     écran étroit : on réautorise donc ici le retour à la ligne (comme
     avant), seul filet de sécurité qui reste nécessaire une fois le panneau
     forcé à la largeur de l'écran plutôt qu'à celle de son contenu. */
  .nav-dropdown-menu a,
  .nav-dropdown-menu button {
    flex-wrap: wrap;
    white-space: normal;
  }

  /* Le bouton profil reste dans .nav-cta (jamais replié dans le menu
     hamburger) : son menu doit donc rester un popup flottant même en
     mobile, contrairement au menu "Simulateur" qui devient inline ci-dessus.
     CORRECTIF 2026-08-11 : ce bloc ciblait .nav-dropdown-space, une classe
     qui n'existe plus dans le HTML depuis la refonte de l'icône profil
     (elle s'appelle désormais .nav-profile) — la règle ne s'appliquait donc
     plus du tout, et le menu profil retombait sur le style générique
     .nav-dropdown-menu mobile (panneau quasi transparent, position:static,
     texte pensé pour le fond sombre du menu Simulateur) : d'où le
     chevauchement avec le bouton hamburger et le texte illisible
     (bleu-sur-bleu / blanc-sur-blanc) signalés par Jean. Renommé pour
     cibler la vraie classe actuelle. */
  .nav-profile .nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    min-width: 240px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 18px 40px rgba(10, 31, 60, 0.14);
    margin: 0;
  }
  .nav-profile.open .nav-dropdown-menu { display: block; }
  /* Le menu profil garde un panneau blanc même en mobile (règle ci-dessus) :
     sans ce correctif, il héritait quand même du texte clair
     .dark-header .nav-dropdown-menu a (pensé pour le panneau transparent
     du menu "Simulateur"), ce qui donnait du texte quasi blanc sur fond
     blanc. Spécificité volontairement plus élevée pour gagner sur cette
     règle plus générale, quel que soit l'ordre des déclarations. */
  .dark-header .nav-profile .nav-dropdown-menu a,
  .dark-header .nav-profile .nav-dropdown-menu a.active,
  .dark-header .nav-profile .nav-dropdown-menu button {
    color: var(--text);
    background: none;
  }
  .dark-header .nav-profile .nav-dropdown-menu a:hover,
  .dark-header .nav-profile .nav-dropdown-menu button:hover {
    background: var(--off-white);
    color: var(--gold-dark);
    font-weight: 600;
  }
  .nav-dropdown-trigger-cta { padding: 8px 14px; font-size: 13px; }
  \* .nav-account-btn hérite de .nav-dropdown-trigger { width:100% } ci-dessus
     (règle générique pour les entrées repliées dans le menu mobile) : il
     vit dans .nav-cta (toujours visible, jamais replié), donc on lui rend
     sa taille ronde et compacte ici, après la règle générique pour gagner
     le conflit de spécificité égale. */
  .nav-account-btn { width: 38px; padding: 0; justify-content: center; }
}

/* ---------- Tableaux d'articles (pages initiation-*.html, etc.) ----------
   Classe générique réutilisable pour les tableaux comparatifs dans les
   articles longs (ex. PEA vs CTO, Livret A vs LDDS vs LEP). Volontairement
   simple : bordures fines, en-tête doré, lignes zébrées légères. */
.gi-table-wrap { overflow-x: auto; margin: 22px 0; }
.gi-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.gi-table caption { text-align: left; font-size: 12px; color: #888; margin-bottom: 8px; }
.gi-table th, .gi-table td { padding: 10px 14px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.gi-table thead th { background: var(--navy); color: #fff; font-weight: 600; }
.gi-table tbody tr:nth-child(even) { background: var(--off-white); }
.gi-table tbody th { background: var(--off-white); font-weight: 600; color: var(--navy); white-space: nowrap; }

/* CORRECTIF 2026-08-13 : cause exacte du contraste signalé par Jean (ex.
   tableau Livret A / LDDS / LEP) — .dark-section fixe son propre `color`
   (blanc) sur <main>, hérité par défaut par les <td> de .gi-table (aucune
   couleur définie pour eux dans la règle ci-dessus). Ça fonctionne tant que
   le fond de la ligne reste noir, mais .gi-table tbody tr:nth-child(even)
   passe une ligne sur deux en fond clair (var(--off-white)) SANS readapter
   le texte : texte blanc hérité sur fond clair = illisible. Les libellés
   (.gi-table tbody th) restent lisibles dans tous les cas car ils ont déjà
   leur propre couleur explicite (var(--navy)) sur leur propre fond clair
   permanent — seule la ligne zébrée doit changer. */
.dark-section .gi-table th, .dark-section .gi-table td { border-color: rgba(255, 255, 255, 0.1); }
.dark-section .gi-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.05); }
.dark-section .gi-table tbody tr:nth-child(even) td { color: rgba(255, 255, 255, 0.78); }

/* Variante "définitions" (2026-08-10) : anciennes listes à puces
   "Étiquette en gras — explication" (ex. critères de choix d'un courtier,
   erreurs fréquentes) converties en tableau à la demande de Jean — le rendu
   en liste forçait des retours à la ligne au milieu du libellé et un
   alignement bancal entre l'étiquette et le texte. Deux <td> (pas de <th>
   nowrap comme les tableaux comparatifs ci-dessus) : la colonne de gauche
   garde une largeur repère mais reste libre de passer à la ligne comme un
   texte normal, jamais de scroll horizontal forcé ni de mot coupé. */
.gi-table-defs td:first-child {
  width: 200px;
  font-weight: 600;
  color: var(--navy);
  background: var(--off-white);
  white-space: normal;
}
.dark-section .gi-table-defs td:first-child { color: var(--white); background: rgba(255,255,255,0.05); }
@media (max-width: 560px) {
  .gi-table-defs td:first-child { width: 130px; }
}

/* ---------- Bouton flottant mail (contact Outlook) ----------
   Sitewide, fixe en bas à droite : mailto: vers gammaworkers@gmail.com.
   z-index 500 : au-dessus du header sticky (100) et des dropdowns nav (60),
   mais sous le toast "défis/badges" des Roadmaps (99999, ponctuel) et
   l'overlay de transition cinématique (99999, plein écran, très bref) — un
   chevauchement furtif dans ces deux cas précis est un compromis volontaire
   plutôt que de complexifier le z-index sitewide pour un élément secondaire.

   CORRECTIF 2026-08-27 (demande de Jean) : remplace l'ancien bouton "Suivre
   sur X" par un bouton de contact e-mail, en bleu façon Outlook avec une
   icône enveloppe. Même chorégraphie qu'avant (héritée de la mise à jour
   2026-08-11) : au repos, seul le logo est visible (pastille ronde) ; à
   intervalles réguliers, le bouton s'étire automatiquement en pilule pour
   révéler "Nous écrire", tient quelques secondes, puis se rétracte — en
   boucle infinie, en CSS pur (deux @keyframes synchronisées, une sur le
   conteneur pour la largeur, une sur le libellé pour son apparition/
   disparition), sans JS ni service tiers. Le survol/focus clavier étire
   aussi le bouton et met la boucle en pause (animation-play-state), pour ne
   jamais gêner un clic volontaire. Le segment "+1 abonné" de l'ancien
   bouton (propre à un compteur de followers X) n'a pas de sens pour un
   contact e-mail et a été retiré ; seule l'icône + le libellé subsistent. */
.mail-float-btn {
  position: fixed;
  right: 22px;
  bottom: 22px;
  height: 48px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0078d4 0%, #0a2767 100%);
  display: flex;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(10, 39, 103, 0.35);
  z-index: 500;
  text-decoration: none;
  animation: mailFloatExpand 9s ease-in-out infinite;
}
.mail-float-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mail-float-btn svg { width: 20px; height: 20px; fill: #fff; flex-shrink: 0; }
.mail-float-label {
  display: inline-block;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 0;
  animation: mailFloatLabel 9s ease-in-out infinite;
}
@keyframes mailFloatExpand {
  0%, 58% { width: 48px; box-shadow: 0 8px 24px rgba(10, 39, 103, 0.35); }
  66%, 82% { width: 156px; box-shadow: 0 12px 30px rgba(10, 39, 103, 0.45); }
  90%, 100% { width: 48px; box-shadow: 0 8px 24px rgba(10, 39, 103, 0.35); }
}
@keyframes mailFloatLabel {
  0%, 60% { max-width: 0; opacity: 0; margin-right: 0; }
  68%, 80% { max-width: 92px; opacity: 1; margin-right: 6px; }
  88%, 100% { max-width: 0; opacity: 0; margin-right: 0; }
}
.mail-float-btn:hover,
.mail-float-btn:focus-visible {
  width: 156px !important;
  animation-play-state: paused;
  box-shadow: 0 12px 30px rgba(10, 39, 103, 0.45);
}
.mail-float-btn:hover .mail-float-label,
.mail-float-btn:focus-visible .mail-float-label {
  max-width: 92px !important;
  opacity: 1 !important;
  margin-right: 6px !important;
  animation-play-state: paused;
}
.mail-float-btn:focus-visible {
  outline: 2.5px solid var(--gold-dark);
  outline-offset: 3px;
}
/* Respecte les préférences d'accessibilité : pas d'animation en boucle
   forcée pour les personnes ayant demandé "réduire les animations" au
   niveau système — le bouton reste utilisable, juste statique (icône seule,
   toujours cliquable, le survol garde son effet). */
@media (prefers-reduced-motion: reduce) {
  .mail-float-btn, .mail-float-label { animation: none; }
}
@media (max-width: 760px) {
  .mail-float-btn { right: 16px; bottom: 16px; }
  .mail-float-icon { width: 44px; height: 44px; }
  .mail-float-btn svg { width: 18px; height: 18px; }
  @keyframes mailFloatExpand {
    0%, 58% { width: 44px; box-shadow: 0 8px 24px rgba(10, 39, 103, 0.35); }
    66%, 82% { width: 146px; box-shadow: 0 12px 30px rgba(10, 39, 103, 0.45); }
    90%, 100% { width: 44px; box-shadow: 0 8px 24px rgba(10, 39, 103, 0.35); }
  }
  @keyframes mailFloatLabel {
    0%, 60% { max-width: 0; opacity: 0; margin-right: 0; }
    68%, 80% { max-width: 86px; opacity: 1; margin-right: 5px; }
    88%, 100% { max-width: 0; opacity: 0; margin-right: 0; }
  }
  .mail-float-btn:hover, .mail-float-btn:focus-visible { width: 146px !important; }
  .mail-float-btn:hover .mail-float-label, .mail-float-btn:focus-visible .mail-float-label { max-width: 86px !important; margin-right: 5px !important; }
}

/* =========================================================
   Organiser son patrimoine — parcours pédagogique Observatoire
   ========================================================= */

/* ---------- Sommaire des chapitres ---------- */
.patr-toc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 28px;
}
.patr-toc-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  font-size: 14px;
}
.patr-toc-num {
  font-weight: 700;
  color: var(--gold-dark);
  font-size: 12.5px;
  flex-shrink: 0;
  width: 24px;
}
.patr-toc-item .patr-toc-title { color: var(--navy); font-weight: 600; transition: color 0.2s ease; }
.patr-toc-item:hover .patr-toc-title { color: var(--gold-dark); }
.dark-section .patr-toc-item { border-bottom-color: rgba(255, 255, 255, 0.1); }
.dark-section .patr-toc-item .patr-toc-title { color: var(--white); }
.dark-section .patr-toc-item:hover .patr-toc-title { color: var(--gold-light); }
@media (max-width: 760px) {
  .patr-toc-grid { grid-template-columns: 1fr; }
}

/* ---------- Ligne de transition "vlog" ---------- */
.patr-vlog-line {
  font-size: 17.5px;
  font-style: italic;
  color: var(--navy);
  border-left: 3px solid var(--gold);
  padding-left: 18px;
  margin: 32px 0;
  max-width: 620px;
}
.dark-section .patr-vlog-line { color: var(--white); border-left-color: var(--gold-light); }

/* ---------- Boîtes de lecture à plusieurs niveaux ---------- */
.level-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 26px 0;
}
.level-box {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--off-white);
  overflow: hidden;
}
.level-box summary {
  cursor: pointer;
  padding: 14px 20px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}
.level-box summary::-webkit-details-marker { display: none; }
.level-box summary::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.level-box summary::after {
  content: '+';
  margin-left: auto;
  font-size: 19px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}
.level-box[open] summary::after { transform: rotate(45deg); }
.level-box[open] summary { border-bottom: 1px solid var(--border); }
.level-box.lvl-retenir summary::before { background: #2e915a; }
.level-box.lvl-loin summary::before { background: #2f64ca; }
.level-box.lvl-avance summary::before { background: var(--gold-dark); }
.level-box-body { padding: 16px 20px 20px; font-size: 14.5px; color: var(--text-secondary); }
.level-box-body p:last-child { margin-bottom: 0; }
.dark-section .level-box { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); }
.dark-section .level-box summary { color: var(--white); }
.dark-section .level-box[open] summary { border-bottom-color: rgba(255, 255, 255, 0.1); }
.dark-section .level-box-body { color: rgba(255, 255, 255, 0.62); }

/* ---------- Schémas de flux ---------- */
/* flex-wrap:nowrap + overflow-x:auto (plutôt que wrap) : avec 5 étapes,
   un retour à la ligne classique isolait la dernière carte seule sur une
   2e ligne avec une flèche mal alignée au-dessus. On garde donc tout sur
   une seule ligne, quitte à défiler horizontalement sur les largeurs
   intermédiaires — jamais de carte coupée ni de flèche orpheline. */
.flow-diagram {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: nowrap;
  justify-content: center;
  margin: 30px 0;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.flow-step {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 12px;
  min-width: 108px;
  flex-shrink: 0;
  text-align: center;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: var(--shadow-sm);
}
.flow-step .flow-step-icon { font-size: 19px; }
.flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  flex-shrink: 0;
  color: var(--gold-dark);
}
.flow-arrow svg { width: 18px; height: 18px; }
.dark-section .flow-step { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); color: var(--white); }
.dark-section .flow-arrow { color: var(--gold-light); }
@media (max-width: 560px) {
  .flow-diagram { flex-direction: column; overflow-x: visible; align-items: stretch; }
  .flow-step { min-width: 0; width: 100%; }
  .flow-arrow { width: 100%; height: 22px; }
  .flow-arrow svg { transform: rotate(90deg); }
}

/* ---------- Cartes de profils / mises en situation ---------- */
.profile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 28px 0; }
.profile-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
}
.profile-card .profile-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(201, 162, 75, 0.14);
  color: var(--gold-dark);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 10px;
}
.profile-card h4 { font-size: 14.5px; margin: 0 0 8px; color: var(--navy); }
.profile-card p { font-size: 13px; color: var(--text-secondary); margin: 0; }
.dark-section .profile-card { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); }
.dark-section .profile-card h4 { color: var(--white); }
.dark-section .profile-card p { color: rgba(255, 255, 255, 0.6); }
@media (max-width: 960px) { .profile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .profile-grid { grid-template-columns: 1fr; } }

/* ---------- Cartes comparatives de classes d'actifs ---------- */
.asset-mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 28px 0; }
.asset-mini-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; }
.asset-mini-card .ami-icon { font-size: 24px; display: block; margin-bottom: 8px; }
.asset-mini-card h4 { font-size: 14.5px; margin: 0 0 10px; color: var(--navy); }
.asset-mini-card dl { margin: 0; font-size: 12px; }
.asset-mini-card dt { font-weight: 600; color: var(--gold-dark); margin-top: 9px; text-transform: uppercase; letter-spacing: 0.02em; font-size: 10.5px; }
.asset-mini-card dt:first-child { margin-top: 0; }
.asset-mini-card dd { margin: 2px 0 0; color: var(--text-secondary); }
.dark-section .asset-mini-card { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); }
.dark-section .asset-mini-card h4 { color: var(--white); }
.dark-section .asset-mini-card dd { color: rgba(255, 255, 255, 0.6); }
@media (max-width: 960px) { .asset-mini-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .asset-mini-grid { grid-template-columns: 1fr; } }

/* ---------- Comparateur patrimoine concentré / diversifié ---------- */
.port-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 28px 0; }
.port-viz { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px; text-align: center; }
.port-viz h4 { margin: 0 0 4px; font-size: 15.5px; color: var(--navy); }
.port-viz .port-sub { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 18px; }
.port-blocks { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; min-height: 130px; }
.port-blocks span { border-radius: 8px; display: inline-block; }
.dark-section .port-viz { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); }
.dark-section .port-viz h4 { color: var(--white); }
@media (max-width: 760px) { .port-compare { grid-template-columns: 1fr; } }

/* ---------- Allocations en donut (exemples pédagogiques) ---------- */
.alloc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 28px 0; }
.alloc-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px 18px; text-align: center; }
.alloc-card h4 { font-size: 14px; margin: 0 0 4px; color: var(--navy); }
.alloc-card .alloc-sub { font-size: 11.5px; color: var(--text-secondary); margin-bottom: 16px; }
.alloc-donut { width: 106px; height: 106px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; }
.alloc-donut-hole { width: 54px; height: 54px; border-radius: 50%; background: var(--white); }
.dark-section .alloc-donut-hole { background: #14171c; }
.alloc-legend { list-style: none; margin: 0; padding: 0; text-align: left; font-size: 11.5px; }
.alloc-legend li { display: flex; align-items: center; gap: 8px; padding: 3px 0; color: var(--text-secondary); }
.alloc-legend .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dark-section .alloc-card { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); }
.dark-section .alloc-card h4 { color: var(--white); }
.dark-section .alloc-legend li { color: rgba(255, 255, 255, 0.6); }
@media (max-width: 960px) { .alloc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .alloc-grid { grid-template-columns: 1fr; } }

/* ---------- Erreurs patrimoniales (accordéon) ---------- */
.mistake-list { display: flex; flex-direction: column; gap: 10px; margin: 26px 0; }
.mistake-item { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); overflow: hidden; }
.mistake-item summary {
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
}
.mistake-item summary::-webkit-details-marker { display: none; }
.mistake-item summary::after { content: '+'; font-size: 20px; color: var(--gold-dark); transition: transform 0.2s ease; flex-shrink: 0; }
.mistake-item[open] summary::after { transform: rotate(45deg); }
.mistake-item[open] summary { border-bottom: 1px solid var(--border); }
.mistake-item-body { padding: 14px 20px 18px; font-size: 13.5px; color: var(--text-secondary); }
.mistake-item-body dt { font-weight: 600; color: var(--gold-dark); margin-top: 10px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.02em; }
.mistake-item-body dt:first-child { margin-top: 0; }
.mistake-item-body dd { margin: 3px 0 0; }
.dark-section .mistake-item { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); }
.dark-section .mistake-item summary { color: var(--white); }
.dark-section .mistake-item[open] summary { border-bottom-color: rgba(255, 255, 255, 0.1); }

/* ---------- Checklist interactive avec progression ---------- */
.patr-progress-wrap { margin: 22px 0 30px; }
.patr-progress-bar { height: 10px; border-radius: 999px; background: var(--off-white); overflow: hidden; border: 1px solid var(--border); }
.patr-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 999px; transition: width 0.4s ease; }
.patr-progress-label { font-size: 13px; color: var(--text-secondary); margin-top: 10px; text-align: center; font-weight: 600; }
.dark-section .patr-progress-bar { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); }
.dark-section .patr-progress-label { color: rgba(255, 255, 255, 0.65); }
.patr-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.patr-checklist li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.patr-checklist input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--gold-dark); flex-shrink: 0; cursor: pointer; }
.patr-checklist label { font-size: 14.5px; color: var(--navy); cursor: pointer; flex: 1; }
.patr-checklist li.is-checked { border-color: rgba(46, 145, 90, 0.4); background: rgba(46, 145, 90, 0.06); }
.patr-checklist li.is-checked label { color: var(--text-secondary); text-decoration: line-through; text-decoration-color: rgba(88, 98, 122, 0.4); }
.dark-section .patr-checklist li { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); }
.dark-section .patr-checklist label { color: var(--white); }
.dark-section .patr-checklist li.is-checked { background: rgba(46, 145, 90, 0.1); border-color: rgba(46, 145, 90, 0.35); }
.dark-section .patr-checklist li.is-checked label { color: rgba(255, 255, 255, 0.55); }

/* ---------- Carte "parcours vedette" sur observatoire.html ---------- */
.patr-feature-card {
  display: flex;
  align-items: center;
  gap: 32px;
  background: linear-gradient(135deg, rgba(10, 31, 60, 0.03), rgba(201, 162, 75, 0.05));
  border: 1.5px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  margin: 28px 0 8px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.patr-feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.patr-feature-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  background: linear-gradient(135deg, #f4ead2, #eadcb4);
}
.patr-feature-card h3 { font-size: 20px; margin: 0 0 6px; color: var(--navy); }
.patr-feature-card p { font-size: 14.5px; color: var(--text-secondary); margin: 0 0 12px; }
.dark-section .patr-feature-card h3 { color: var(--white); }
.dark-section .patr-feature-card p { color: rgba(255, 255, 255, 0.6); }
@media (max-width: 760px) {
  .patr-feature-card { flex-direction: column; text-align: center; padding: 28px 22px; }
}

/* ============================================================
   BLOG — listing (blog.html) + article (blog-post.html)
   2026-08-16 : façon magazine (inspiré de seqooia.com/blog),
   accessible en public ET depuis l'espace Premium (même header
   partagé). Les couvertures sont des dégradés + icône (pas de
   vraies photos) pour rester cohérent avec le reste du site et
   ne dépendre d'aucune banque d'images externe.
   ============================================================ */
.blog-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 0 36px; }
.blog-filter { appearance: none; border: 1px solid var(--border); background: var(--white); color: var(--text-secondary); font-family: inherit; font-size: 13.5px; font-weight: 600; padding: 9px 18px; border-radius: 999px; cursor: pointer; transition: .2s; }
.blog-filter:hover { border-color: var(--gold); color: var(--navy); }
.blog-filter.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.blog-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; text-decoration: none; }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.blog-card-cover { position: relative; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.blog-card-cover svg { width: 44px; height: 44px; color: #fff; opacity: .92; }
.blog-card-cover.has-image { background: var(--off-white); }
.blog-card-cover.has-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.blog-card:hover .blog-card-cover.has-image img { transform: scale(1.04); }
.blog-card-category { position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,0.92); color: var(--navy); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 5px 12px; border-radius: 999px; }
.blog-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.blog-card-body h3 { font-size: 17.5px; margin: 0 0 10px; color: var(--navy); line-height: 1.35; }
.blog-card-excerpt { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 16px; flex: 1; }
.blog-card-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); padding-top: 14px; border-top: 1px solid var(--border); }
.blog-card-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--off-white); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--gold-dark); flex: none; }
.blog-card-meta-sep { opacity: .5; }
.blog-empty { text-align: center; color: var(--text-secondary); font-size: 14.5px; padding: 60px 20px; grid-column: 1 / -1; }
.blog-skeleton { text-align: center; color: var(--text-muted); font-size: 14px; padding: 60px 20px; grid-column: 1 / -1; }

/* Dégradés de couverture, réutilisés listing + article */
.blog-cover-gold { background: linear-gradient(135deg, #c9a24b, #8a6a1f); }
.blog-cover-navy { background: linear-gradient(135deg, #1b3f6e, #050e1c); }
.blog-cover-green { background: linear-gradient(135deg, #1f8a5f, #0f4a33); }
.blog-cover-plum { background: linear-gradient(135deg, #6a3f8f, #351f4a); }

/* Article (blog-post.html) */
.blog-post-hero-cover { aspect-ratio: 21 / 9; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin: 0 auto 32px; max-width: 820px; overflow: hidden; box-shadow: var(--shadow-md); }
.blog-post-hero-cover svg { width: 60px; height: 60px; color: #fff; opacity: .92; }
.blog-post-hero-cover.has-image { background: var(--off-white); }
.blog-post-hero-cover.has-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-post-meta { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text-secondary); margin-top: 14px; }
.blog-post-meta-sep { opacity: .5; }
.blog-takeaways { background: var(--navy); color: #fff; border-radius: var(--radius-md); padding: 22px 26px; margin: 0 0 28px; }
.blog-takeaways-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gold-light); margin-bottom: 12px; }
.blog-takeaways ul { margin: 0; padding-left: 20px; }
.blog-takeaways li { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.85); margin-bottom: 8px; }
.blog-takeaways li:last-child { margin-bottom: 0; }
.blog-author-box { display: flex; align-items: center; gap: 14px; padding: 20px 22px; background: var(--off-white); border-radius: var(--radius-md); margin: 36px 0; }
.blog-author-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: var(--gold-light); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex: none; }
.blog-author-box strong { display: block; color: var(--navy); font-size: 14.5px; }
.blog-author-box span { font-size: 12.5px; color: var(--text-secondary); }
.blog-related-title { text-align: center; margin-bottom: 24px; }
.blog-post-not-found { text-align: center; padding: 80px 20px; }
.blog-share-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 30px 0 0; }

.dark-section .blog-filter { background: var(--pg-glass); border-color: var(--pg-glass-border); color: rgba(255,255,255,0.7); }
.dark-section .blog-filter.is-active { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.dark-section .blog-card { background: var(--pg-glass); border-color: var(--pg-glass-border); }
.dark-section .blog-card-body h3 { color: #fff; }
.dark-section .blog-card-excerpt { color: rgba(255,255,255,0.6); }
.dark-section .blog-card-meta { border-top-color: var(--pg-glass-border); color: rgba(255,255,255,0.45); }
.dark-section .blog-card-avatar { background: rgba(255,255,255,0.08); color: var(--gold-light); }
.dark-section .blog-empty,
.dark-section .blog-skeleton { color: rgba(255,255,255,0.5); }
.dark-section .blog-author-box { background: var(--pg-glass); }
.dark-section .blog-author-box strong { color: #fff; }
.dark-section .blog-author-box span { color: rgba(255,255,255,0.55); }

@media (max-width: 560px) {
  .blog-grid { grid-template-columns: 1fr; }
}