/* AV Patrimoine — feuille de style du site (reconstruction propre, sans WordPress/Elementor) */

:root {
  --color-primary: #92C461;   /* vert de marque */
  --color-primary-dark: #74a647;
  --color-text: #373636;      /* couleur de corps du kit d'origine (#373636) */
  --color-muted: #5b6472;
  --color-dark: #081420;      /* fond sombre (footer) */
  --color-bg: #ffffff;
  --color-bg-alt: #f7f9f6;
  --color-border: #e7e7e7;
  /* polices identiques au site WordPress d'origine (vérifiées via les styles
     calculés réels, pas via les liens Google Fonts qui en listaient d'autres
     jamais réellement appliqués) : Voces pour les grands titres, Urbanist
     pour les petits libellés en majuscules, Raleway pour le corps/UI. */
  --font-heading: 'Voces', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-eyebrow: 'Urbanist', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius: 14px;
  --max-width: 1140px;
  --max-width-wide: 1320px;

  /* verre dépoli (mêmes réglages que le fond animé MIKASA, cf. --btn-bg etc.) */
  --btn-bg: rgba(255,255,255,.55);
  --btn-bg-hover: rgba(255,255,255,.78);
  --glass-brd: rgba(255,255,255,.75);
  --glass-shadow: 0 8px 24px rgba(31,38,42,.10), 0 2px 8px rgba(31,38,42,.06);
  --glass-shadow-hover: 0 12px 32px rgba(31,38,42,.14), 0 3px 10px rgba(31,38,42,.08);

  --ease: cubic-bezier(.16,.8,.3,1);
}

/* ---------- Thème clair/sombre explicite (en plus du système) ----------
   data-theme est posé par le bouton de la nav ; sans préférence enregistrée,
   on suit prefers-color-scheme (règle plus bas). */
:root[data-theme="dark"] {
  --color-text: #eef1ee;
  --color-muted: #9aa4ad;
  --color-bg: #0e1512;
  --color-bg-alt: #131d19;
  --color-border: #223028;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

/* navigation clavier : anneau de focus visible et cohérent partout */
:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
  border-radius: 4px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
  font-size: 17px;
  position: relative;
}

/* ---------- Fond animé (même système que MIKASA : ShaderGradient WebGL,
   recoloré aux teintes vertes de la marque au lieu de l'orange/vert/bleu de
   MIKASA). Le ::before est le repli statique aux mêmes couleurs : visible
   pendant le chargement, hors-ligne, ou à l'impression. ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(115deg, #f2e8d5, #c8dba0 48%, #92c461);
  opacity: .32;
}
#gradient-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
/* apparition en fondu du canvas WebGL : lors des navigations suivantes
   (cache chaud, preloader déjà terminé), le canvas monte APRÈS que la page
   est visible -- sans fondu il "pop" brutalement par-dessus le dégradé
   statique de repli. */
#gradient-bg canvas { animation: fond-apparait .8s ease-out both; }
@keyframes fond-apparait { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #gradient-bg canvas { animation: none; }
}
/* voile blanc + grain au-dessus du canvas : remis plus visible qu'avant
   (mouvement du dégradé animé bien perceptible), tons beige/vert. */
#gradient-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255,255,255,.8);
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/></svg>");
}
@media print {
  #gradient-bg { display: none !important; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) body::before, :root:not([data-theme]) #gradient-bg { display: none; }
}
:root[data-theme="dark"] body::before, :root[data-theme="dark"] #gradient-bg { display: none; }

.btn-theme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  background: var(--btn-bg);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--glass-brd); border-radius: 50%;
  cursor: pointer; font-size: 15px;
  box-shadow: var(--glass-shadow);
  transition: box-shadow .18s ease, background .18s ease, transform .18s ease;
  margin-left: 8px;
  position: relative;
}
@media (hover: hover) and (pointer: fine) { .btn-theme:hover { background: var(--btn-bg-hover); box-shadow: var(--glass-shadow-hover); transform: translateY(-1px) rotate(15deg); } }
.btn-theme svg { fill: var(--color-muted); transition: fill .18s ease; }
@media (hover: hover) and (pointer: fine) { .btn-theme:hover svg { fill: var(--color-text); } }
.btn-theme .icon-sun { display: none; }
:root[data-theme="dark"] .btn-theme .icon-moon { display: none; }
:root[data-theme="dark"] .btn-theme .icon-sun { display: inline; }
/* accès au tableau de bord MIKASA : même pastille ronde que le sélecteur de
   thème, mais sans la rotation au survol (amusante pour un soleil, absurde
   pour une grille de tableau de bord). */
@media (hover: hover) and (pointer: fine) { .btn-dashboard:hover { transform: translateY(-1px); } }

/* ---------- Écran de chargement (reprend le "Preloader Plus" du site
   d'origine : fond sombre, barre verte en haut, logo qui pulse, compteur) ---------- */
.site-preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: #141414;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 1s ease, visibility 1s ease;
}
/* le filet de sécurité si le JS ne s'exécute pas est géré côté JS
   (setTimeout) plutôt qu'en CSS : une "animation" sur les mêmes
   propriétés (opacity/visibility) que cette classe passerait devant elle
   dans la cascade et empêcherait le fondu de s'appliquer. */
.site-preloader.is-complete { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-bar-track { position: absolute; top: 0; left: 0; right: 0; height: 5px; background: #919191; }
.preloader-bar { height: 100%; width: 0%; background: var(--color-primary); transition: width .25s ease; }
.preloader-content { text-align: center; }
.preloader-logo {
  height: 56px; width: auto; margin: 0 auto 18px;
  filter: brightness(0) invert(1);
  animation: preloader-pulse 1.6s ease-in-out infinite;
}
@keyframes preloader-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.92); }
}
#preloader-counter {
  color: #918d8a;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 22px;
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .preloader-logo { animation: none; }
}

/* ---------- Barre de progression de lecture ---------- */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--color-primary), #5fa6a0);
  z-index: 200;
  transition: width .1s linear;
  pointer-events: none;
}

h1, h2, h3, h4, h5 {
  line-height: 1.25;
  margin: 0 0 0.6em;
  color: var(--color-text);
}

/* h1 : Voces, 900, majuscules, vert — valeurs reprises telles quelles du
   kit Elementor d'origine (color:#92C461, 40px desktop → 25px mobile).
   Taille fluide (clamp) : s'adapte en continu à la largeur d'écran plutôt
   que de sauter par paliers de media queries. */
h1 {
  font-family: var(--font-heading);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .015em;
  font-size: clamp(1.8rem, 4.2vw, 2.5rem);
  color: var(--color-primary);
}
/* h2 "nu" (pas précédé d'un h4) : reprend le style par défaut du kit
   d'origine — Voces, 600, vert, PAS majuscule (25px desktop → 16px mobile) */
h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: .01em;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  color: var(--color-primary-dark);
}
/* h3 : Urbanist majuscules, petite taille — comme le kit d'origine */
/* h3 : Raleway grasse en casse normale plutôt qu'Urbanist tout majuscule —
   plus agréable à lire, surtout sur des titres qui peuvent être longs
   (titres d'articles, "Conseiller en gestion de patrimoine"...). */
h3 {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  font-size: 1.05rem;
  color: var(--color-text);
}
/* partout où un h2 suit immédiatement un h4 (libellé "oeil-de-boeuf" vert +
   grand titre), le titre reprend le traitement Urbanist gras/majuscule
   propre à CE widget précis sur le site d'origine (vérifié sur plusieurs
   instances : "DU SUR-MESURE", "LE PLACEMENT MAGIQUE EXISTE-T-IL ?",
   "COMBIEN ÇA COÛTE ?" — toutes en Urbanist 900 majuscule quasi-noir,
   à la différence du h2 "nu" ci-dessus). */
h4 + h2 {
  font-family: var(--font-eyebrow);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  color: var(--color-text);
}
/* h4 : petit libellé "oeil-de-boeuf" en Urbanist FIN (300, pas gras) et en
   casse normale (le site d'origine ne le met pas en majuscules à ce
   niveau — seul le h2 qui suit l'est) ; couleur vert de marque. */
h4 {
  font-family: var(--font-eyebrow);
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: .02em;
  color: var(--color-primary);
}

p { margin: 0 0 1.1em; }

/* lien "nu" (sans classe) : Voces 600 vert, comme le kit d'origine —
   les composants spécifiques (nav, boutons, liens-flèche...) ont leur
   propre règle plus spécifique et ne sont pas affectés. */
a { font-family: var(--font-heading); font-weight: 600; color: var(--color-primary-dark); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration: none; color: var(--color-primary); } }

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

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  /* contexte de positionnement pour les .scroll-cue absolus posés dedans --
     sans ça (position:static), ils se positionnent par rapport à <body>,
     donc au bas de TOUTE la page plutôt qu'au bas de leur propre section. */
  position: relative;
}
/* variante plus large pour les encarts qui ont besoin de plus de place
   (ex. le panneau Conseiller/Formateur) sans élargir tout le site */
.container-wide { max-width: var(--max-width-wide); margin: 0 auto; padding: 0 24px; position: relative; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border-bottom: 1px solid rgba(90,70,150,.08);
  box-shadow: 0 0 0 rgba(20,30,20,0);
  transition: box-shadow .25s ease, background .25s ease;
}
.site-header.is-scrolled { box-shadow: 0 8px 30px -18px rgba(20,30,20,.35); }

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 24px;
}

.site-logo img { height: 44px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 28px; }

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 26px;
  margin: 0;
  padding: 0;
}

.main-nav ul li { position: relative; }

/* sous-menu "Outils" : liste des 4 simulateurs, révélée au survol/focus --
   chaque lien pointe vers l'ancre du simulateur correspondant sur la page
   Outils (cf. #sim-card-* + le script qui l'ouvre et défile jusqu'à lui). */
.main-nav .nav-submenu {
  display: block;
  position: absolute; top: 100%; left: 0; margin-top: 6px;
  list-style: none; margin-left: 0; padding: 8px;
  min-width: 250px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  border: 1px solid var(--glass-brd);
  border-radius: 14px;
  box-shadow: var(--glass-shadow-hover);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 200;
}
.nav-has-sub:hover .nav-submenu,
.nav-has-sub:focus-within .nav-submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-submenu li { border: none; }
.nav-submenu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  font-size: .8rem; font-weight: 600; white-space: nowrap;
  color: var(--color-text);
}
.nav-submenu a .sim-tag { flex: none; }
/* couleur d'accentuation au survol assortie à l'étiquette de chaque lien
   (SCPI orange, Assurance vie bleu, Impôts violet) plutôt qu'un vert
   générique -- même teinte que le badge .sim-tag, juste beaucoup plus
   pastel pour rester discrète dans un menu. */
@media (hover: hover) and (pointer: fine) {
  .nav-sub-scpi a:hover { background: rgba(255,189,122,.3); color: #8a5a26; }
  .nav-sub-av a:hover { background: rgba(177,231,242,.4); color: #2b6777; }
  .nav-sub-impots a:hover { background: rgba(215,198,242,.4); color: #6b4f96; }
}
/* le sous-menu hérite sinon le trait qui se remplit au survol des liens de
   nav principaux (.main-nav a:not(.btn)::after) -- hors de propos ici, chaque
   lien a déjà son propre fond au survol. */
.nav-submenu a::after { content: none !important; }
@media (max-width: 860px) {
  .main-nav .nav-submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: none; border: none; box-shadow: none; backdrop-filter: none;
    padding: 0 0 6px 16px; margin-top: 2px; min-width: 0;
  }
  .nav-submenu a { padding: 8px 4px; white-space: normal; }
}

.main-nav a:not(.btn) {
  position: relative;
  font-family: var(--font-body);
  text-transform: none;
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: normal;
  padding-bottom: 4px;
}

.main-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}

@media (hover: hover) and (pointer: fine) { .main-nav a:not(.btn):hover { color: var(--color-primary-dark); text-decoration: none; } }
@media (hover: hover) and (pointer: fine) { .main-nav a:not(.btn):hover::after { transform: scaleX(1); } }

/* page courante : libellé coloré + trait plein (pas seulement au survol) */
.main-nav a.is-active { color: var(--color-primary-dark); }
.main-nav a.is-active::after { transform: scaleX(1); }

/* bouton "verre teinté" : un verre dépoli au vert de marque au repos (pas du
   blanc pur : sur un en-tête déjà blanc/flouté, un bouton blanc/flouté
   par-dessus devenait invisible). Au survol, les deux verts s'inversent : le
   fond prend le vert sombre du texte au repos, le texte s'éclaircit -- pas
   un simple assombrissement, un vrai échange des deux tons. Réutilisé sur
   le "Prendre RDV" du menu et le "Prendre un rdv" de la carte "Comment ça
   marche" (même vert que le titre "Découverte" à côté : --color-primary-dark). */
.btn.btn-glass {
  padding: 8px 16px;
  font-size: .88rem;
  color: var(--color-primary-dark);
  text-decoration: none;
  background: rgba(146,196,97,.16);
  border: 1px solid rgba(146,196,97,.4);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow: 0 4px 14px -8px rgba(20,30,20,.18);
  transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .2s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .btn.btn-glass:hover {
    background: var(--color-primary-dark);
    color: #eaf6df;
    border-color: var(--color-primary-dark);
    box-shadow: 0 10px 26px -10px rgba(116,166,71,.35);
    transform: translateY(-2px);
    text-decoration: none;
  }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  flex: none;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* bouton principal : sobre, un seul par bloc en général (on réserve le
   remplissage plein aux actions vraiment prioritaires — RDV, envoi de
   formulaire — le reste passe par des liens texte avec flèche). */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.3;
  padding: 11px 24px;
  border-radius: 10px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  gap: 8px;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
/* icône SVG dans un bouton : hérite la couleur du texte (blanc) plutôt
   qu'un rendu multicolore d'émoji */
.btn svg { fill: currentColor; flex: none; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background: var(--color-primary-dark);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -8px rgba(116,166,71,.5);
  }
}
.btn:active { transform: translateY(0); box-shadow: none; }


/* lien texte avec flèche : remplace les boutons secondaires redondants */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.link-arrow .arrow { transition: transform .2s var(--ease); display: inline-block; }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover .arrow { transform: translateX(4px); } }

/* lien vidéo : pastille ronde colorée à gauche (qui change de couleur au
   survol), texte noir fixe */
.video-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text);
}
@media (hover: hover) and (pointer: fine) { .video-link:hover { color: var(--color-text); text-decoration: none; } }
.video-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  flex: none;
  transition: background .2s ease, transform .2s ease;
}
.video-link-icon svg { fill: #fff; margin-left: 2px; }
@media (hover: hover) and (pointer: fine) { .video-link:hover .video-link-icon { background: var(--color-primary-dark); transform: scale(1.06); } }

/* animation de survol façon huly.io : un halo lumineux chaud, flouté,
   traverse le bouton de gauche à droite en continu tant que la souris reste
   dessus — réservé aux CTA de prise de rendez-vous. */
.btn-glow { overflow: hidden; isolation: isolate; }
.btn-glow::before {
  content: "";
  position: absolute;
  top: -40%; bottom: -40%;
  left: -30%;
  width: 45%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,244,214,.55) 55%, transparent);
  filter: blur(10px);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn-glow:hover::before {
    opacity: 1;
    animation: btn-glow-sweep 1.4s ease-in-out infinite;
  }
  .btn-glow:hover {
    background: var(--color-primary-dark);
    box-shadow: 0 0 24px -4px rgba(242,214,140,.85), 0 8px 18px -8px rgba(116,166,71,.5);
  }
}
@keyframes btn-glow-sweep {
  0% { left: -45%; }
  60% { left: 105%; }
  100% { left: 105%; }
}
@media (prefers-reduced-motion: reduce) {
  @media (hover: hover) and (pointer: fine) { .btn-glow:hover::before { animation: none; opacity: .6; left: 55%; } }
}

/* surlignage attaché au scroll, mot par mot (cf. base.html) : chaque mot
   d'une .scroll-highlight-line est débité en .scroll-highlight-word au
   chargement, et c'est CE span qui porte le dégradé -- .scroll-highlight-line
   elle-même n'est plus qu'un conteneur neutre. Même style "feutre" décalé
   sous le texte que .article-content strong (bande basse via un dégradé à
   2 tons, pas un bloc plein derrière la lettre). */
.scroll-highlight-word {
  background-image: linear-gradient(180deg, transparent 62%, rgba(146,196,97,.35) 62%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-highlight-word { background-size: 100% 100%; }
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
@media (hover: hover) and (pointer: fine) { .btn-outline:hover { background: rgba(146,196,97,.1); border-color: var(--color-primary); box-shadow: none; transform: translateY(-1px); } }

/* ---------- Hero ---------- */
.hero {
  /* compact : tout le hero (nav + texte + boutons) doit tenir dans un
     écran standard sans avoir besoin de scroller à l'arrivée. */
  padding: 32px 0 90px;
  /* pas de fond opaque ici : on laisse transparaître le dégradé animé
     (aurora) posé sur le body */
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
}

/* invite discrète à faire défiler : une pastille qui rebondit doucement en
   bas du hero, comme sur les sites qui indiquent qu'il y a du contenu
   au-delà du premier écran */
.hero .container { position: relative; }
.scroll-cue {
  position: absolute; left: 50%; bottom: -54px; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--btn-bg);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow);
  color: var(--color-primary-dark);
  animation: scroll-cue-bounce 1.8s ease-in-out infinite;
  transition: background .18s ease, box-shadow .18s ease;
}
@media (hover: hover) and (pointer: fine) { .scroll-cue:hover { background: var(--btn-bg-hover); box-shadow: var(--glass-shadow-hover); } }
.scroll-cue svg { display: block; }
@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: none; }
}

.hero-text { text-align: left; }

/* "Rendre accessible le conseil en gestion de patrimoine" : petite
   introduction italique, comme sur le site d'origine (Raleway italique
   gris, pas un h1 en majuscules). */
/* c'est un <h1> (le titre SEO de l'accueil) mais visuellement une simple
   phrase d'intro en italique : on neutralise donc les majuscules/espacement
   du h1 global en plus des propriétés déjà redéfinies. */
.hero-intro {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  color: #545455;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  margin-bottom: 18px;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.5;
}

/* "écouter / accompagner / & développer" : grande police manuscrite
   décorative (Sriracha), fine, en 3 lignes empilées, en majuscules —
   l'élément visuel dominant du hero sur le site d'origine. Taille resserrée
   pour que tout le hero reste visible sans scroll. */
.hero-script {
  font-family: 'Sriracha', cursive;
  font-weight: 400;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--color-text);
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  margin: 0 0 14px;
}

.hero p.lead { font-size: clamp(0.92rem, 1.3vw, 1.02rem); color: var(--color-muted); margin-bottom: 8px; }
/* phrase d'accroche transformée en étiquettes (au lieu d'une longue phrase
   à questions enchaînées) — même esprit que .review-tag, en plus discret
   (contour, pas de remplissage plein) puisqu'on est au tout début du hero */
.lead-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.lead-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(146,196,97,.14);
  color: var(--color-primary-dark);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .82rem;
  font-weight: 600;
  transition: box-shadow .3s ease, transform .3s ease;
}
.lead-tag svg { flex-shrink: 0; }
/* ombre "Apple" au survol : deux couches, très douces, plutôt qu'une ombre
   dure à un seul niveau — c'est ce qui donne cette impression de légèreté */
@media (hover: hover) and (pointer: fine) {
  .lead-tag:hover, .review-tag:hover {
    box-shadow: 0 10px 24px -8px rgba(20,30,20,.18), 0 2px 6px rgba(20,30,20,.08);
    transform: translateY(-2px);
  }
}
.hero-text p:not(.hero-intro):not(.hero-script):not(.lead) { margin-bottom: 8px; font-size: 0.96rem; }

/* étiquettes du hero ("Faire travailler votre épargne"...) : chaque icône a
   sa propre réaction au survol plutôt qu'un simple currentColor uniforme --
   des pièces dorées qui s'empilent (deux fois), un % qui rapetisse, une
   voiture verte qui roule de gauche à droite, un parasol qui s'incline
   comme planté dans le sable.
   Le transform passe par un <span class="icon-wrap"> englobant le <svg>,
   pas par un transform posé sur le <svg>/<g> lui-même : dans ce contexte de
   mise en page précis (hero-panel + glass-panel + reveal imbriqués), un
   transform CSS direct sur un <svg> ou un <g> enfant ne s'applique pas de
   façon fiable, alors qu'il fonctionne sans problème sur un <span> HTML. */
.icon-wrap { display: inline-flex; }
.icon-wrap-percent, .icon-wrap-parasol { transition: transform .25s var(--ease); }
.icon-wrap-parasol { transform-origin: 50% 100%; }
@media (hover: hover) and (pointer: fine) {
  .lead-tag:hover .icon-coins .coin { stroke: #a8760a; fill: #f2c14e; fill-opacity: .9; }
  .lead-tag:hover .icon-coins .coin-mid { animation: coin-empile .5s ease-out 2 .1s; }
  .lead-tag:hover .icon-coins .coin-haut { animation: coin-empile .5s ease-out 2 .25s; }
  .lead-tag:hover .icon-wrap-percent { transform: scale(.55); }
  .lead-tag:hover .icon-percent { stroke: #8b5cf6; }
  .lead-tag:hover .icon-mur .brique { stroke: #a86a4a; fill: #d99b72; fill-opacity: .85; }
  .lead-tag:hover .icon-mur .brique-1 { animation: brique-empile .22s ease-out .05s both; }
  .lead-tag:hover .icon-mur .brique-2 { animation: brique-empile .22s ease-out .12s both; }
  .lead-tag:hover .icon-mur .brique-3 { animation: brique-empile .22s ease-out .19s both; }
  .lead-tag:hover .icon-mur .brique-4 { animation: brique-empile .22s ease-out .28s both; }
  .lead-tag:hover .icon-mur .brique-5 { animation: brique-empile .22s ease-out .35s both; }
  .lead-tag:hover .icon-wrap-parasol { transform: rotate(-9deg); }
  .lead-tag:hover .icon-umbrella { stroke: #f2a93c; }
  .lead-tag:hover .icon-umbrella .parasol-canopy { fill: #f2a93c; }
}
@keyframes coin-empile {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(5px); opacity: .5; }
}
@keyframes brique-empile {
  0% { transform: translateY(5px); opacity: .4; }
  100% { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lead-tag:hover .icon-coins .coin-mid,
  .lead-tag:hover .icon-coins .coin-haut,
  .lead-tag:hover .icon-mur .brique-1,
  .lead-tag:hover .icon-mur .brique-2,
  .lead-tag:hover .icon-mur .brique-3,
  .lead-tag:hover .icon-mur .brique-4,
  .lead-tag:hover .icon-mur .brique-5 { animation: none; }
  .lead-tag:hover .icon-wrap-percent,
  .lead-tag:hover .icon-wrap-parasol { transform: none; }
}

.hero-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: flex-start; margin-top: 30px; }

/* illustrations flottantes du hero (mockup app + checklist/objectifs),
   pas une photo — reprend la disposition d'origine plutôt qu'un portrait */
/* les 2 images sont en position absolute (pas de contenu en flux normal) :
   il faut une largeur explicite, "margin:auto" seul ferait s'effondrer le
   conteneur à 0px de large dans une grille. */
.hero-illus { position: relative; width: 100%; max-width: 360px; height: 250px; margin-left: auto; margin-right: auto; }
.hero-illus img { position: absolute; max-width: 260px; width: 46%; height: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.15)); }
.hero-illus .illus-1 { top: -50px; left: 4%; width: 62%; max-width: 340px; animation: float-a 6s ease-in-out infinite; }
.hero-illus .illus-2 { width: 40%; max-width: 220px; bottom: 62px; right: 2%; animation: float-b 7s ease-in-out infinite; }

@keyframes float-a { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes float-b { 0%,100% { transform: translateY(0); } 50% { transform: translateY(12px); } }

.icon-3d { width: 86px; height: auto; margin-bottom: 6px; }

.video-embed { position: relative; width: 100%; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; box-shadow: 0 20px 50px -20px rgba(0,0,0,.25); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed-thumb { display: block; }
.video-embed-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease); }
@media (hover: hover) and (pointer: fine) { .video-embed-thumb:hover img { transform: scale(1.04); } }
.video-embed-play {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary); border-radius: 50%;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.45);
  transition: transform .2s var(--ease), background .2s ease;
}
.video-embed-play svg { fill: #fff; margin-left: 3px; }
@media (hover: hover) and (pointer: fine) { .video-embed-thumb:hover .video-embed-play { transform: scale(1.1); background: var(--color-primary-dark); } }

/* ---------- Logos partenaires : grappe statique, alignée en haut avec le
   texte ; teintées vert/beige au repos, couleurs réelles au survol.
   Les fichiers sources sont maintenant recadrés à leur contenu réel (script
   Pillow, marge alpha < 20 ignorée) : la marge transparente qui restait
   autour de certains logos gonflait artificiellement leur boîte englobante
   tout en gardant le même "poids" visuel qu'un logo déjà bien cadré.
   Convention standard des "murs de logos" : une hauteur FIXE identique pour
   tous, largeur laissée libre (auto) pour respecter le ratio propre à
   chaque marque plutôt que forcer un cadre width+height qui écrase les
   wordmarks larges (ex. "CORUM L'EPARGNE") au profit des pictogrammes
   carrés (ex. "SEI") — la hauteur commune est ce qui se perçoit vraiment
   comme "la même taille" dans une rangée de logos hétérogènes. ---------- */
.partners-cluster {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: center;
  gap: 20px 34px;
}
.partners-cluster img {
  height: 32px;
  width: auto;
  flex: none;
  opacity: .82;
  filter: grayscale(1) sepia(.4) hue-rotate(55deg) saturate(1.8) brightness(.95);
  transition: transform .2s var(--ease), filter .3s ease, opacity .3s ease;
}
.partners-cluster img:nth-child(3n+2) { filter: grayscale(1) sepia(.5) hue-rotate(8deg) saturate(1.3) brightness(1.08); }
.partners-cluster img:nth-child(3n) { filter: grayscale(1) sepia(.35) hue-rotate(80deg) saturate(1.5) brightness(1); }
@media (hover: hover) and (pointer: fine) { .partners-cluster img:hover { transform: translateY(-2px) scale(1.06); filter: none; opacity: 1; } }

/* variante "patchwork" : même rangée de logos à hauteur uniforme, mais
   plafonnée en hauteur totale pour ne jamais dépasser le bloc de texte à
   gauche (l'irrégularité vient naturellement des largeurs différentes des
   logos, plus besoin de tuiles de tailles forcées). */
/* padding interne : sans lui, un logo pile au bord du cadre se faisait
   rogner par l'overflow:hidden dès qu'il grossissait/se soulevait au survol
   (transform sur .partners-cluster img:hover) -- la marge lui laisse la
   place de "respirer" sans jamais toucher la limite du cadre. */
.partners-patchwork { max-height: 340px; overflow: hidden; padding: 12px 8px; }
@media (max-width: 720px) {
  .partners-patchwork { max-height: 240px; }
}

/* deux fleches manuscrites qui accompagnent la lecture : celle en haut à
   droite plonge vers le titre, celle en bas à gauche repart vers la section
   suivante — jamais de simple symétrie flex, il faut les positionner en
   absolu pour contrôler leur point d'arrivée. */
.arrows-banner {
  position: relative;
  text-align: center;
  padding: 46px 90px 64px;
}
.arrows-banner h2 { margin: 0; }
.arrows-banner .arrow-top,
.arrows-banner .arrow-bottom {
  position: absolute;
  width: 92px;
  height: auto;
}
/* ancrées par rapport au CENTRE (calc 50%) et non aux bords du conteneur :
   elles restent collées au titre centré quelle que soit la largeur d'écran,
   au lieu de flotter loin de lui sur grand écran. La flèche haute plonge
   vers la fin du titre, la basse repart juste sous son début. */
.arrows-banner .arrow-top { top: -8px; right: calc(50% - 260px); }
.arrows-banner .arrow-bottom { bottom: -20px; left: calc(50% - 260px); }
@media (max-width: 780px) {
  .arrows-banner { padding: 20px 20px 30px; }
  .arrows-banner .arrow-top, .arrows-banner .arrow-bottom { display: none; }
}

.map-embed { border-radius: var(--radius); overflow: hidden; margin: 14px 0; }
.map-embed iframe { width: 100%; height: 260px; border: 0; display: block; }

p.note { font-size: 0.9rem; color: var(--color-muted); }

/* ---------- Avis clients (vrais avis Google, cf. content/reviews.yaml) ---------- */
.review-card { display: flex; flex-direction: column; gap: 10px; }
.review-stars { color: #f2b100; letter-spacing: 2px; font-size: .95rem; transition: transform .3s var(--ease); }
@media (hover: hover) and (pointer: fine) { .review-card:hover .review-stars { transform: scale(1.08); } }
/* le texte, grisé au repos, passe en pleine lisibilité au survol — l'avis
   qu'on regarde se met à se "lire" plus facilement, plutôt qu'un simple
   effet décoratif sans rapport avec le contenu */
.review-text { color: var(--color-muted); font-size: .95rem; flex: 1; transition: color .3s ease; }
@media (hover: hover) and (pointer: fine) { .review-card:hover .review-text { color: var(--color-text); } }
/* chaque avis est clampé à 8 lignes ; le JS (base.html) ne révèle le bouton
   "Voir plus" QUE si le texte dépasse réellement cette hauteur */
.review-text.clamp-text {
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-text.clamp-text.is-expanded { -webkit-line-clamp: unset; overflow: visible; }
.review-more {
  align-self: flex-start;
  background: none; border: none; padding: 0; margin-top: -4px;
  color: var(--color-primary-dark); font-weight: 700; font-family: var(--font-body);
  font-size: .85rem; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .review-more:hover { color: var(--color-primary); } }
.review-author { font-weight: 700; font-family: var(--font-eyebrow); font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.review-date { font-weight: 400; text-transform: none; color: var(--color-muted); letter-spacing: normal; }

/* grille de 9 avis (3 rangées de 3) : la 1re rangée est nette, les 2
   suivantes sont floutées DÈS LE CHARGEMENT (pas seulement au survol — le
   flou est posé directement sur chaque carte, pas sur un calque à part) et
   ne se révèlent qu'au clic sur "Voir plus d'avis", jamais au survol. La
   révélation imite une page qu'on tourne : les cartes basculent depuis une
   légère inclinaison (rotateX, axe du haut) en se dépliant vers leur
   position normale, en cascade rangée par rangée. */
.reviews-reveal { position: relative; }
.reviews-reveal .grid-3 { perspective: 1400px; }
.review-card:nth-child(n+4) {
  filter: blur(6px);
  opacity: .45;
  transform: rotateX(-20deg) translateY(-6px);
  transform-origin: 50% 0%;
  pointer-events: none;
  transition: filter .7s var(--ease), opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: 0s;
}
.reviews-reveal.is-expanded .review-card:nth-child(n+4) {
  filter: blur(0); opacity: 1; transform: none; pointer-events: auto;
}
.reviews-reveal.is-expanded .review-card:nth-child(4) { transition-delay: 0s; }
.reviews-reveal.is-expanded .review-card:nth-child(5) { transition-delay: .06s; }
.reviews-reveal.is-expanded .review-card:nth-child(6) { transition-delay: .12s; }
.reviews-reveal.is-expanded .review-card:nth-child(7) { transition-delay: .18s; }
.reviews-reveal.is-expanded .review-card:nth-child(8) { transition-delay: .24s; }
.reviews-reveal.is-expanded .review-card:nth-child(9) { transition-delay: .3s; }

.reviews-reveal-btn {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
  background: #fff; border: 1px solid var(--color-border); border-radius: 999px;
  padding: 12px 28px; font-family: var(--font-body); font-weight: 700; font-size: .92rem;
  color: var(--color-text); cursor: pointer; z-index: 2;
  box-shadow: 0 10px 26px -12px rgba(20,30,20,.28);
  transition: transform .2s var(--ease), box-shadow .2s ease, opacity .3s ease;
}
@media (hover: hover) and (pointer: fine) { .reviews-reveal-btn:hover { transform: translate(-50%, -50%) translateY(-2px); box-shadow: 0 14px 32px -12px rgba(20,30,20,.34); } }
.reviews-reveal.is-expanded .reviews-reveal-btn { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .review-card:nth-child(n+4) { transition: filter .3s ease, opacity .3s ease; transform: none; }
}
@media (max-width: 900px) {
  .reviews-reveal-btn { top: 34%; }
}

/* petite flèche manuscrite qui pointe vers la phrase-clé de recommandation */
.reco-line { display: flex; align-items: flex-start; gap: 22px; margin-top: 4px; }
/* fleche.png (même asset manuscrit que sur devenir-cgp, déjà vérifiée : le
   trait plonge vers le bas-droite, donc pointe naturellement vers le texte
   placé à sa droite ici) plutôt qu'une flèche SVG dessinée à main levée.
   Remontée un peu par rapport au texte pour que sa pointe arrive bien sur
   le tout début de la phrase (pas plus bas, au milieu du bloc). */
.reco-arrow { flex: none; width: 30px; height: auto; transform: rotate(-8deg); margin-top: -8px; }
/* texte descendu légèrement (padding-top) pour laisser la pointe de la
   flèche arriver dessus, et tenu sur une seule ligne (taille fluide plutôt
   que fixe, pour que ça tienne quelle que soit la largeur de colonne) */
.reco-text {
  display: inline-block;
  padding-top: 8px;
  font-size: clamp(0.78rem, 2.1vw, 1rem);
  white-space: nowrap;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .reco-text { white-space: normal; font-size: 1rem; }
}

/* mots-clés dérivés des vrais avis Google (thèmes qui reviennent dans le
   contenu réel — cf. content/reviews.yaml) */
.review-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: -8px 0 32px; }
.review-tag {
  display: inline-flex; align-items: center; gap: 7px;
  /* vert plus profond que le vert de marque : le blanc reste lisible
     (contraste >= 4.5:1, ce que #92C461 ne permettait pas) */
  background: #567d31;
  color: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: .85rem;
  font-weight: 600;
  transition: box-shadow .3s ease, transform .3s ease;
}
.review-tag svg { fill: currentColor; flex: none; opacity: .9; }

/* ---------- Encart d'alerte (recrée le widget "Alert" du site d'origine :
   fond vert pastel, liseré gauche, titre en gras + description) ---------- */
.alert-box {
  padding: 16px 18px;
  border-left: 5px solid #cae6be;
  border-radius: 6px;
  background-color: #dff0d8;
  color: #3c763d;
  margin: 18px 0;
}
.alert-box .alert-title { display: block; font-weight: 700; margin-bottom: 4px; }
.alert-box .alert-description { font-size: 0.9rem; line-height: 1.5; }
.alert-box.alert-info { background-color: #d9edf7; color: #31708f; border-left-color: #bcdff1; }
.alert-box.alert-warning { background-color: #fcf8e3; color: #8a6d3b; border-left-color: #f9f0c3; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .alert-box { background-color: rgba(146,196,97,.12); color: #b7e3a4; border-left-color: rgba(146,196,97,.4); }
  :root:not([data-theme]) .alert-box.alert-info { background-color: rgba(91,166,232,.12); color: #9cc9f2; border-left-color: rgba(91,166,232,.4); }
}
:root[data-theme="dark"] .alert-box { background-color: rgba(146,196,97,.12); color: #b7e3a4; border-left-color: rgba(146,196,97,.4); }
:root[data-theme="dark"] .alert-box.alert-info { background-color: rgba(91,166,232,.12); color: #9cc9f2; border-left-color: rgba(91,166,232,.4); }

/* ---------- Sections ---------- */
section.block { padding: 70px 0; }
/* plus AUCUN voile par section : l'alternance de fonds translucides créait
   une "ombre" (rupture nette) à chaque frontière de section sur le dégradé
   animé — le fond est désormais continu sur toute la page. */
section.block.alt { background: transparent; }
/* espace supplementaire avant "Qui suis-je ?" : le scroll-cue (fleche) a
   besoin de respirer entre les 2 encarts vitres, comme pour le hero. */
#showcase { padding-bottom: 130px; }

.section-title { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.section-title h4 { margin-bottom: 10px; }

.grid {
  display: grid;
  gap: 32px;
}
/* les items de grille ont un min-width:auto implicite : un enfant au
   contenu "large" (marquee, texte non-cassable...) forcerait sinon la
   colonne entière (voire toute la grille) à s'élargir en conséquence. */
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* "relais" média/texte du bloc Qui suis-je : le média (photo, puis plus bas
   la vidéo) reste collé à gauche via position:sticky tant que SA colonne de
   texte défile, puis repart avec elle une fois la fin de la rangée grid
   atteinte -- le containing block du sticky (la cellule grid, étirée à la
   hauteur du texte) fait naturellement ce travail, sans point d'arrêt à
   calculer en JS. Deux .qsj-relay se suivent (photo puis vidéo), chacun
   scope son propre sticky à son propre paragraphe -- le relais se fait tout
   seul au changement de rangée. */
.qsj-relay {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  margin: 4px 0 20px;
}
.qsj-relay-media { min-width: 0; }
.qsj-relay-text { min-width: 0; }
.qsj-photo-sticky { position: sticky; top: 96px; }
.qsj-photo-sticky img {
  display: block; border-radius: 50%;
  width: 100%; max-width: 280px; margin: 0 auto;
}
/* paragraphe d'invitation en clôture du "qui suis-je" : mis en évidence
   dans un encart au liseré vert, texte un peu plus grand -- c'est l'appel
   à l'échange, il ne doit pas se fondre dans la biographie qui précède. */
.qsj-invite {
  margin-top: 18px;
  padding: 16px 20px;
  border-left: 3px solid var(--color-primary);
  border-radius: 0 14px 14px 0;
  background: rgba(146,196,97,.10);
  font-size: 1.08rem;
  line-height: 1.65;
}
.qsj-invite strong { color: var(--color-primary-dark); }

/* bannière "GPS objectifs de vie" : légèrement de travers, comme posée sur
   le bureau, pas alignée au carré comme un visuel purement décoratif. */
.qsj-banniere-img {
  display: block; width: 90%; margin: 0 auto; border-radius: 18px;
  transform: rotate(-3deg);
  box-shadow: 0 24px 50px -20px rgba(20,30,20,.35);
  transition: transform .35s var(--ease);
  cursor: zoom-in;
}
@media (hover: hover) and (pointer: fine) { .qsj-banniere-img:hover { transform: rotate(-1deg) scale(1.02); } }
/* lightbox de la bannière : plein écran sur fond assombri, l'image centrée
   à sa taille lisible ; tout clic (ou Échap) referme. */
/* [hidden] doit gagner sur le display:flex ci-dessous, sinon le lightbox
   reste affiché en permanence (l'attribut hidden ne pose que display:none
   en style navigateur, battu par toute règle display explicite). */
.lightbox[hidden] { display: none; }
/* ouverture/fermeture animées : le JS retire [hidden] PUIS pose .open une
   frame plus tard (et inversement, retire .open puis re-pose [hidden] après
   la transition) -- display:none ne s'animant pas, c'est ce relais
   attribut+classe qui permet un fondu dans les deux sens, avec un léger
   zoom de l'image à l'arrivée. */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 16, 12, .82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  cursor: zoom-out;
  opacity: 0;
  transition: opacity .28s ease;
}
.lightbox.open { opacity: 1; }
.lightbox img {
  max-width: min(1100px, 94vw); max-height: 92vh;
  border-radius: 14px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.6);
  transform: scale(.94) translateY(10px);
  transition: transform .34s cubic-bezier(.22,.9,.3,1.08);
}
.lightbox.open img { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox img { transition: none; }
  .lightbox img { transform: none; }
}
/* lien "réseau Inovéa" : le poids 600 par défaut des liens du site l'aurait
   confondu avec les phrases en surlignage voisines -- poids normal, et une
   petite flèche explicite plutôt que le gras pour signaler que c'est cliquable. */
.inline-link-icon {
  font-weight: 400;
  display: inline-flex; align-items: center; gap: 3px;
}
.inline-link-icon svg { flex-shrink: 0; }
@media (max-width: 900px) {
  .qsj-relay { grid-template-columns: 1fr; }
  .qsj-photo-sticky { position: static; margin-top: 8px; }
}

/* portrait "Qui suis-je" : la photo flotte DANS le texte (pas à côté, dans
   sa propre colonne) — le paragraphe se déforme réellement autour du rond
   grâce à shape-outside, donnant l'impression que la photo pénètre le texte
   plutôt que de simplement s'afficher devant. */
.qsj-photo-wrap { overflow: hidden; }
.qsj-photo {
  float: left;
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: 50%;
  shape-outside: circle(50%);
  shape-margin: 28px;
  margin: 6px 36px 24px 0;
  box-shadow: 0 20px 50px -20px rgba(20,30,20,.35);
}
@media (max-width: 640px) {
  .qsj-photo { float: none; display: block; width: 220px; height: 220px; margin: 0 auto 24px; shape-outside: none; }
}

.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 30px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -24px rgba(20,30,20,.25);
    border-color: rgba(146,196,97,.45);
  }
}

.icon-box { text-align: left; counter-increment: icon-step; position: relative; }
.icon-box .icon { font-size: 1.8rem; margin-bottom: 14px; }
.icon-box .icon-3d { transition: transform .35s var(--ease); }
@media (hover: hover) and (pointer: fine) { .icon-box:hover .icon-3d { transform: scale(1.12) rotate(-6deg); } }
/* petit numéro discret en haut à droite, pour lire la carte comme une étape */
.icon-box::before {
  content: counter(icon-step);
  position: absolute; top: 18px; right: 18px;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.6rem;
  color: var(--color-border);
  line-height: 1;
}
.numbered-grid { counter-reset: icon-step; }

/* ---------- Encart "Comment ça marche" : une seule carte blanche,
   texte + bouton à gauche, liseré vertical, 3 colonnes d'icônes à droite ---------- */
.panel-card {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 24px 60px -30px rgba(20,30,20,.18);
  padding: 48px;
}
/* même carte que le panneau Conseiller/Formateur, teintée d'un vert "détrempé"
   (un simple lavis, pas un aplat saturé) plutôt que blanche */
.panel-card.wash-green {
  background: linear-gradient(160deg, rgba(146,196,97,.18), rgba(95,166,160,.10));
}
.showcase-card {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 24px 60px -30px rgba(20,30,20,.18);
  padding: 48px;
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 48px;
  align-items: center;
}

/* variante 2 colonnes symétriques (Conseiller / Formateur...) : une icône
   ronde à gauche de chaque bloc de texte, qui s'anime au survol.
   Même respiration que la carte "Comment ça marche" : padding généreux et
   séparateur vertical entre les deux moitiés. */
.panel-card.split-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 56px 0;
}
.panel-card.split-2 .split-icon-col { padding: 0 56px; }
.panel-card.split-2 .split-icon-col + .split-icon-col { border-left: 1px solid var(--color-border); }
.split-icon-col { display: flex; gap: 26px; align-items: flex-start; }
/* réserve toujours 2 lignes à la phrase d'intro (avant la liste), pour que
   les puces démarrent à la même hauteur dans les deux colonnes même si
   l'une des phrases est un peu plus courte que l'autre */
.split-icon-col > div > p:first-of-type { min-height: 3.35em; }
@media (max-width: 720px) {
  .split-icon-col > div > p:first-of-type { min-height: 0; }
}
/* listes du panneau Conseiller/Formateur : plus de puces rondes par défaut,
   un petit chevron vert + respiration verticale généreuse entre les lignes */
.split-icon-col ul {
  list-style: none;
  margin: 18px 0 0 -18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.split-icon-col li {
  position: relative;
  padding-left: 22px;
  color: var(--color-muted);
  line-height: 1.5;
}
.split-icon-col li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 9px; height: 9px;
  border-radius: 3px;
  background: var(--color-primary);
  transform: rotate(45deg);
}
/* grisées au repos, vertes + agrandies seulement au survol */
.split-icon-circle {
  width: 46px; height: 46px; flex: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #e8e8e8;
  box-shadow: 0 10px 24px -12px rgba(20,30,20,.2);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s ease;
}
.split-icon-circle img { width: 22px; height: 22px; filter: grayscale(1) opacity(.75); transition: transform .35s var(--ease), filter .3s ease; }
@media (hover: hover) and (pointer: fine) {
  .split-icon-col:hover .split-icon-circle {
    background: var(--color-primary);
    box-shadow: 0 10px 24px -10px rgba(116,166,71,.45);
    transform: scale(1.08) rotate(-8deg);
  }
  .split-icon-col:hover .split-icon-circle img { filter: none; transform: scale(1.15) rotate(6deg); }
}
@media (max-width: 720px) {
  .panel-card.split-2 { grid-template-columns: 1fr; padding: 32px 0; row-gap: 32px; }
  .panel-card.split-2 .split-icon-col { padding: 0 28px; }
  .panel-card.split-2 .split-icon-col + .split-icon-col { border-left: none; border-top: 1px solid var(--color-border); padding-top: 32px; }
}
.showcase-text {
  border-right: 1px solid var(--color-border);
  padding-right: 48px;
}
.showcase-text h4 { margin-bottom: 6px; }
.showcase-text h2 { margin-bottom: 16px; }
.showcase-text > p { font-weight: 600; }
.showcase-icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 34px;
}
.showcase-icons .icon-box { text-align: center; counter-increment: none; }
.showcase-icons .icon-box::before { content: none; }
.showcase-icons .icon-3d { margin: 0 auto 10px; }
/* titres Découverte/Planification/Suivi : Raleway 700 21px, comme les
   widgets "image-box" d'origine (pas Urbanist majuscule comme le h3 par défaut) */
.showcase-icons h3 {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  font-size: 21px;
  color: var(--color-primary-dark);
}
.showcase-icons p { font-size: 15px; }
.showcase-icons p { color: var(--color-muted); font-size: .95rem; }

@media (max-width: 900px) {
  .showcase-card { grid-template-columns: 1fr; padding: 32px; }
  .showcase-text { border-right: none; border-bottom: 1px solid var(--color-border); padding-right: 0; padding-bottom: 32px; margin-bottom: 32px; text-align: center; }
  .showcase-icons { grid-template-columns: 1fr; }
}

/* ligne pointillée reliant les cartes d'une timeline (Comment ça marche,
   Par où commencer...), masquée dès que la grille repasse en 1 colonne */
.timeline-row { position: relative; }
.timeline-row::before {
  content: "";
  position: absolute;
  top: 64px;
  left: 12%;
  right: 12%;
  height: 0;
  border-top: 2px dashed rgba(146,196,97,.4);
  z-index: 0;
}
@media (max-width: 900px) {
  .timeline-row::before { display: none; }
}
.timeline-step { text-align: center; padding: 0 6px; position: relative; z-index: 1; }
.timeline-dot {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #06210a;
  font-weight: 800;
  font-family: var(--font-heading);
  box-shadow: 0 6px 16px -6px rgba(116,166,71,.6);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .timeline-step:hover .timeline-dot {
    transform: scale(1.15);
    box-shadow: 0 10px 22px -6px rgba(116,166,71,.75);
  }
}
.timeline-step h3 {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  font-size: 1rem;
  color: var(--color-text);
  margin-bottom: 6px;
}
.timeline-step p { font-size: .88rem; color: var(--color-muted); margin: 0; }

/* fleche manuscrite qui plonge vers le bouton final : le bouton est
   repoussé assez bas pour laisser toute la place à la flèche au-dessus,
   sans jamais chevaucher les cartes "Ambassadeur/Consultant/Conseiller". */
.cta-arrow-wrap { position: relative; text-align: center; margin-top: 96px; padding-top: 10px; }
/* la flèche arrive de la gauche et sa pointe (coin bas-droit de l'image)
   vient se poser juste au-dessus du coin gauche du bouton -- geste
   "regardez ici" naturel, au lieu de flotter loin au-dessus du centre. */
.cta-arrow { position: absolute; width: 66px; height: auto; top: -62px; left: calc(50% - 165px); transform: rotate(10deg); }
@media (max-width: 640px) {
  .cta-arrow { display: none; }
  .cta-arrow-wrap { margin-top: 40px; }
}

/* panneau "verre dépoli" : fond translucide flouté posé sous un bloc de
   texte qui serait sinon directement sur le dégradé animé. Placé après les
   cartes qu'il habille (showcase-card, panel-card, timeline...) pour que
   son fond translucide gagne sur leur fond blanc opaque, à spécificité
   égale (une classe partout), sans avoir besoin de sur-spécifier. */
.glass-panel {
  background: rgba(255,255,255,.45) !important;
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 24px;
  padding: 44px 48px;
  box-shadow: var(--glass-shadow);
}
@media (max-width: 720px) {
  .glass-panel { padding: 28px 22px; }
}

/* ---------- Articles ---------- */
/* couverture générée (dégradé de marque + icône ligne), remplace les
   anciennes images "stock IA" : même gabarit sur toutes les cartes, aucun
   fichier à héberger, jamais deux articles avec la même image générique. */
.article-cover-gen {
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.article-cover-gen::after {
  /* même grain subtil que le fond animé, pour rester dans la même famille
     visuelle plutôt qu'un aplat de couleur plat */
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/></svg>");
  mix-blend-mode: overlay;
}
.article-cover-gen svg { position: relative; z-index: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.12)); transition: transform .35s var(--ease); }
@media (hover: hover) and (pointer: fine) { .article-card:hover .article-cover-gen svg { transform: scale(1.1) rotate(-4deg); } }
/* halo qui pulse doucement derrière l'icône au survol : donne un peu de
   vie à la couverture générée sans distraire du titre juste en dessous */
.article-cover-gen::before {
  content: "";
  position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border-radius: 50%;
  background: rgba(255,255,255,.35);
  opacity: 0; transform: scale(.6);
  transition: opacity .4s ease, transform .4s ease;
}
@media (hover: hover) and (pointer: fine) { .article-card:hover .article-cover-gen::before { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .article-cover-gen::before, .article-cover-gen svg { transition: none; }
}

/* le display:flex ci-dessous écraserait l'attribut hidden posé par le
   filtre par catégorie (même piège que le lightbox de la bannière) : cette
   règle rend au filtre son pouvoir de masquer les cartes. */
.article-card[hidden] { display: none; }
.article-card {
  border: 1px solid rgba(255,255,255,.65);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255,255,255,.45) !important;
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  display: flex;
  flex-direction: column;
  color: inherit;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
}
/* ---------- Carrousel "Les derniers articles" (accueil, style kokonutui
   "carousel-cards") : défilement horizontal + flèches, plutôt qu'une grille
   figée à 3 articles -- affiche jusqu'à 8 articles sans quitter la page. Le
   dimensionnement fixe des cartes (.carousel-track .article-card) est scopé
   à ce conteneur pour ne pas toucher la grille de la page "Toutes les actus"
   (articles_list.html), qui réutilise la même classe .article-card. */
.carousel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.carousel-nav { display: flex; align-items: center; gap: 12px; }
.carousel-showall { font-size: .9rem; font-weight: 600; color: var(--color-primary-dark); text-decoration: none; }
.carousel-showall:hover { text-decoration: underline; }
.carousel-arrow {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--color-border); background: #fff; cursor: pointer; color: var(--color-text);
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
@media (hover: hover) and (pointer: fine) { .carousel-arrow:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } }
.carousel-arrow:active { transform: scale(.92); }
.carousel-track {
  display: flex; gap: 24px; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: 4px 4px 12px; margin: -4px -4px 0;
  scrollbar-width: none; -ms-overflow-style: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track .article-card { flex: 0 0 300px; scroll-snap-align: start; }
@media (max-width: 560px) {
  .carousel-track .article-card { flex-basis: 82vw; }
}
@media (hover: hover) and (pointer: fine) { .article-card:hover { transform: translateY(-8px) scale(1.012); box-shadow: 0 26px 48px -22px rgba(20,30,20,.3); border-color: rgba(146,196,97,.4); } }
.article-card .article-body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.article-card .date {
  display: inline-block; align-self: flex-start;
  background: rgba(146,196,97,.14); color: var(--color-primary-dark);
  font-size: .74rem; font-weight: 700; letter-spacing: .03em;
  padding: 4px 10px; border-radius: 999px; margin-bottom: 14px;
}
.article-card h3 {
  font-size: 1.12rem; letter-spacing: .02em; margin-bottom: 0; line-height: 1.42; flex: 1;
  transition: color .25s ease;
}
@media (hover: hover) and (pointer: fine) { .article-card:hover h3 { color: var(--color-primary-dark); } }
.article-card .read-more {
  margin-top: 20px; font-weight: 700; color: var(--color-primary-dark);
  display: inline-flex; align-items: center; gap: 6px;
  width: fit-content;
}
.article-card .read-more .arrow { transition: transform .2s var(--ease); display: inline-block; }
@media (hover: hover) and (pointer: fine) { .article-card:hover .read-more .arrow { transform: translateX(4px); } }

.article-hero { padding: 50px 0 36px; }
.article-hero .date { color: var(--color-muted); font-weight: 600; }
/* le titre d'un article peut être une phrase entière (contrairement aux
   courts titres de page "Qui suis-je ?") : la casse normale reste lisible
   là où un h1 tout en majuscules deviendrait pénible sur plusieurs mots. */
.article-hero h1 { margin-top: 4px; text-transform: none; letter-spacing: normal; }
/* miniature ronde à côté du titre plutôt qu'une grande bannière pleine
   largeur : un article, c'est d'abord du texte à lire, pas une affiche. */
.article-hero-top { display: flex; align-items: center; gap: 20px; margin-top: 14px; }
.article-cover-badge {
  flex-shrink: 0; width: 64px; height: 64px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px -10px rgba(20,30,20,.3);
}

/* pastille catégorie + date côte à côte (fiche article et cartes de liste) */
.article-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.article-meta .date { margin: 0; }

/* puces de filtrage par catégorie (page "Les actus") */
.filtres-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 30px; }
.filtre-cat {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--color-border); background: rgba(255,255,255,.6);
  font: inherit; font-size: .88rem; font-weight: 600; color: var(--color-muted);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.filtre-cat-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
@media (hover: hover) and (pointer: fine) { .filtre-cat:hover { border-color: var(--color-primary); color: var(--color-text); transform: translateY(-1px); } }
.filtre-cat.on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.filtre-cat.on .filtre-cat-dot { background: #fff !important; }

/* fiche article : contenu + sidebar collante (progression de lecture,
   simulateurs liés, à lire ensuite, CTA) ; la sidebar passe sous l'article
   sur écran étroit. */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.article-aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; }
.aside-card {
  border: 1px solid rgba(255,255,255,.65); border-radius: 16px; padding: 18px 20px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.aside-titre { font-family: var(--font-eyebrow); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 12px; }
.aside-progress-track { height: 7px; border-radius: 7px; background: var(--color-border); overflow: hidden; }
.aside-progress-bar { height: 100%; width: 0; border-radius: 7px; background: linear-gradient(90deg, var(--color-primary), #5fa6a0); transition: width .15s linear; }
.aside-progress-pct { margin-top: 8px; font-size: .82rem; color: var(--color-muted); }
.aside-outil { display: flex; align-items: center; gap: 9px; padding: 8px 0; font-size: .88rem; font-weight: 600; color: var(--color-text); line-height: 1.35; }
.aside-outil .sim-tag { flex: none; margin: 0; }
@media (hover: hover) and (pointer: fine) { .aside-outil:hover { color: var(--color-primary-dark); } }
.aside-article { display: block; padding: 8px 0; font-size: .88rem; font-weight: 600; line-height: 1.4; color: var(--color-text); border-bottom: 1px dashed var(--color-border); }
.aside-article:last-child { border-bottom: none; padding-bottom: 0; }
@media (hover: hover) and (pointer: fine) { .aside-article:hover { color: var(--color-primary-dark); } }
.aside-cta { text-align: center; }
.aside-cta p { margin: 0 0 12px; font-weight: 600; }
@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-aside { position: static; }
}

.article-content { max-width: 980px; margin: 0 auto; font-size: 1.05rem; line-height: 1.8; }
.article-content h2 { margin-top: 1.6em; margin-bottom: .6em; }
.article-content h3 { margin-top: 1.4em; margin-bottom: .5em; }
.article-content p { margin-bottom: 1.3em; }
/* 1er paragraphe traité comme un chapeau : légèrement plus grand et plus
   contrasté, pour donner un point d'entrée dans la lecture (façon presse) */
.article-content > p:first-of-type {
  font-size: 1.18rem; line-height: 1.7; color: var(--color-text); font-weight: 500;
}
.article-content ul, .article-content ol { padding-left: 1.3em; margin-bottom: 1.3em; }
.article-content li { margin-bottom: .4em; }
/* surlignage façon feutre sous le texte en gras, dans la continuité du
   surlignage utilisé ailleurs sur le site plutôt qu'un simple gras isolé */
.article-content strong {
  color: var(--color-text);
  background-image: linear-gradient(180deg, transparent 62%, rgba(146,196,97,.35) 62%);
}
/* dans un tableau, le gras sert à repérer une ligne d'en-tête ou une valeur
   -- pas à "surligner" une phrase : le feutre décoratif n'y a pas sa place
   et finirait par saturer visuellement des cellules déjà denses. */
.article-content table strong { background-image: none; }
.article-content table {
  width: 100%; border-collapse: collapse; margin: 1.8em 0;
  font-size: .92em;
}
.article-content th, .article-content td {
  padding: 10px 14px; border-bottom: 1px solid var(--color-border); text-align: left;
}
.article-content tr:first-child { border-bottom: 2px solid var(--color-border); }
.article-content tr:nth-child(even) { background: var(--color-bg-alt); }
.article-content blockquote {
  margin: 1.6em 0; padding: 4px 24px;
  border-left: 3px solid var(--color-primary);
  color: var(--color-muted);
  font-style: italic;
}

.back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 24px; font-weight: 600; transition: transform .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .back-link:hover { transform: translateX(-3px); } }

/* ---------- Steps ---------- */
.steps { counter-reset: step; position: relative; }
/* ligne verticale discrète reliant les puces numérotées */
.steps::before {
  content: "";
  position: absolute; left: 20px; top: 20px; bottom: 20px; width: 2px;
  background: repeating-linear-gradient(180deg, rgba(146,196,97,.4) 0 8px, transparent 8px 14px);
}
.step { position: relative; padding-left: 56px; margin-bottom: 28px; }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px;
  background: var(--color-primary);
  color: #06210a;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-family: var(--font-heading);
  box-shadow: 0 6px 16px -6px rgba(116,166,71,.6);
  transition: transform .25s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .step:hover::before { transform: scale(1.12); } }

/* ---------- Tabs (Ambassadeur / Consultant / Conseiller) ---------- */
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tab-card {
  border: 1px solid rgba(255,255,255,.65); border-radius: var(--radius); padding: 26px;
  background: rgba(255,255,255,.45) !important;
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease, background .3s ease;
}
/* survol nettement plus affirmé que le simple translateY d'origine : la
   carte se soulève ET grossit légèrement, son fond devient presque opaque
   (elle "sort" du verre dépoli ambiant) et l'ombre portée verte l'ancre
   au-dessus des deux voisines. */
@media (hover: hover) and (pointer: fine) {
  .tab-card:hover {
    transform: translateY(-10px) scale(1.025);
    box-shadow: 0 30px 55px -22px rgba(20,30,20,.35), 0 0 0 1px rgba(146,196,97,.25);
    border-color: rgba(146,196,97,.75);
    background: rgba(255,255,255,.85) !important;
  }
}
.tab-card h3 { color: var(--color-primary-dark); }
.tab-card ul { margin: 0; padding-left: 1.1em; color: var(--color-muted); }
.tab-card li { margin-bottom: 8px; }

/* ---------- Badges ---------- */
/* grille 3x3 (ordre du site d'origine conservé : lecture ligne par ligne).
   Les images sont carrées et remplissent toute la largeur de leur colonne
   (au lieu d'un max-height + justify-items:center, qui laissait un vide
   variable de chaque côté et rendait l'espacement horizontal bien plus
   large que l'espacement vertical) : un seul "gap" produit alors le même
   espace dans les deux sens. */
.badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 820px;
  margin: 0 auto;
}
.badges img {
  display: block; width: 100%; height: auto; border-radius: 10px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .badges img:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 20px 36px -18px rgba(20,30,20,.35);
  }
}
@media (max-width: 560px) {
  .badges { gap: 8px; max-width: 420px; }
}

/* ---------- Outils / Simulateurs ---------- */
.sim-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 16px 40px -26px rgba(20,30,20,.22);
  margin-bottom: 22px;
  overflow: hidden;
  scroll-margin-top: 96px;
}
.sim-head {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 28px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.sim-tag {
  display: inline-block;
  font-family: var(--font-eyebrow);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #06210a;
  padding: 3px 10px;
  border-radius: 8px;
  margin-bottom: 8px;
}
.sim-title { margin: 0 0 4px; font-family: var(--font-body); font-weight: 700; text-transform: none; letter-spacing: normal; font-size: 1.1rem; color: var(--color-text); }
.sim-sub { margin: 0; font-size: .88rem; color: var(--color-muted); }
.sim-chev { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; transition: transform .25s var(--ease); margin-top: 4px; }
.sim-chev svg { fill: var(--color-muted); }
.sim-chev.open { transform: rotate(180deg); }
/* accordéon animé (hauteur mesurée en JS, cf. toggleSim dans
   simulateurs.js) plutôt qu'un display:none/"" instantané qui tranchait
   avec le reste du site, entièrement animé en douceur.
   (essayé grid-template-rows: 0fr/1fr pour éviter la remesure JS -- ne se
   redimensionne pas de façon fiable dans tous les moteurs testés, revenu à
   max-height qui est éprouvé.) */
.sim-body {
  padding: 0 28px 28px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .45s var(--ease), opacity .3s ease;
}
.sim-body.open { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .sim-body { transition: none; }
}

/* note "PS" : petite mention discrète, pas une phrase d'intro comme les autres */
.sim-note-ps { font-size: .82rem; font-style: italic; color: var(--color-muted); max-width: 640px; margin: 0 auto; }
.section-title .sim-note-ps { margin-top: 6px; }

@media (max-width: 560px) {
  .sim-head { padding: 20px; }
  .sim-body { padding: 0 20px 22px; }
}

/* ---------- Contenu interne des simulateurs : port fidèle des composants
   MIKASA (cf. assets/js/simulateurs.js), scopé sous .mikasa-sim avec ses
   propres variables de couleur — c'est volontairement la palette interne du
   cabinet (navy/vert/orange neumorphique), pas celle du site public : le
   contenu des simulateurs est repris à l'identique, l'habillage visuel
   (au-delà de cet encart) sera harmonisé avec la charte AV Patrimoine dans
   un second temps. */
.mikasa-sim {
  --navy: #241f3d; --mut: #736e8c; --mut2: #a29dbd; --ink: #2c2740;
  --green: #1fab6f; --orange: #f2994a; --red: #e0455a;
  --line: rgba(90,70,150,.10); --card: #fff;
  --grad1: #1fab6f; --grad2: #4cc38c; --grad: linear-gradient(120deg, var(--grad1), var(--grad2));
  --neu-light: rgba(255,255,255,.55); --neu-dark: rgba(163,177,198,.35);
  --neu-out-sm: 2px 2px 6px var(--neu-dark), -2px -2px 6px var(--neu-light);
  --neu-in: inset 2px 2px 5px var(--neu-dark), inset -2px -2px 5px var(--neu-light);
  --radius-s: 16px;
}
.mikasa-sim .pos { color: var(--green); }
.mikasa-sim .neg { color: var(--red); }
.mikasa-sim .neutre { color: var(--mut2); }
.mikasa-sim table { border-collapse: collapse; width: 100%; }
.mikasa-sim th, .mikasa-sim td { padding: 7px 9px; text-align: right; white-space: nowrap; font-size: 12.5px; }
.mikasa-sim th { color: var(--mut); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; border-bottom: 2px solid #f1eefb; }
.mikasa-sim td { border-bottom: 1px solid rgba(90,70,150,.07); }
.mikasa-sim th:first-child, .mikasa-sim td:first-child { text-align: left; }
.mikasa-sim .tbl-scroll { overflow-x: auto; }
.mikasa-sim .tbl-centre th, .mikasa-sim .tbl-centre td { text-align: center; }
.mikasa-sim .tbl-centre .col-gauche { text-align: left; }
.mikasa-sim .tbl-scroll-local thead th {
  position: sticky; top: 0; z-index: 5;
  background: rgba(255,255,255,.95); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line);
}
.mikasa-sim .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

.mikasa-sim .voir-suite {
  border: 1px solid var(--glass-brd); background: var(--btn-bg);
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-radius: 14px; padding: 8px 22px; font: inherit; font-size: 13px; font-weight: 700;
  color: var(--navy); cursor: pointer; box-shadow: var(--glass-shadow);
  transition: box-shadow .15s ease, background .15s ease, transform .15s ease;
}
@media (hover: hover) and (pointer: fine) { .mikasa-sim .voir-suite:hover { background: var(--btn-bg-hover); box-shadow: var(--glass-shadow-hover); transform: translateY(-1px); } }

.mikasa-sim .legende { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: flex-end; font-size: 12px; color: var(--mut); margin-bottom: 4px; }
.mikasa-sim .legende > span { white-space: nowrap; }
.mikasa-sim .legende .sw { display: inline-block; width: 26px; height: 10px; border-radius: 5px; vertical-align: middle; margin-right: 6px; }
.mikasa-sim .gwrap { position: relative; }
.mikasa-sim .gwrap svg { max-width: 100%; }
/* point de mesure mis en avant au survol : grossit avec un léger rebond
   plutôt que de rester figé -- confirme visuellement, sur le graphique
   lui-même, quel point exact correspond à l'infobulle affichée. */
.mikasa-sim .chart-pt {
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
  transform-box: fill-box;
  transform-origin: center;
}
.mikasa-sim .chart-pt.hi { transform: scale(1.7); }
@media (prefers-reduced-motion: reduce) {
  .mikasa-sim .chart-pt { transition: none; }
}
/* indicateur personnalisé du graphique "rendements annuels" : au survol
   d'une année, ses barres restent nettes pendant que les autres années
   s'estompent -- repère immédiat sur la colonne concernée plutôt qu'un
   simple curseur/dot par défaut. */
.mikasa-sim .simr-bar-annuel { transition: opacity .25s ease; }
.mikasa-sim .simr-bar-annuel.dim { opacity: .3; }
@media (prefers-reduced-motion: reduce) {
  .mikasa-sim .simr-bar-annuel { transition: none; }
}

.mikasa-sim .chart-tip {
  position: absolute; pointer-events: none; z-index: 30; min-width: 190px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-brd); border-radius: 14px;
  padding: 10px 13px; font-size: 12px; box-shadow: var(--glass-shadow-hover);
}
.mikasa-sim .chart-tip .t-mois { font-weight: 800; color: var(--navy); margin-bottom: 5px; }
.mikasa-sim .chart-tip .t-row { display: flex; justify-content: space-between; gap: 14px; padding: 1.5px 0; }
.mikasa-sim .chart-tip .t-row .v { font-weight: 700; color: var(--navy); }
.mikasa-sim .chart-tip .t-row .v.pos { color: var(--green); }
.mikasa-sim .chart-tip .t-row .v.neg { color: var(--red); }

.mikasa-sim .jauge-frais { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.mikasa-sim .jauge-frais .jf-titre { font-size: 11px; letter-spacing: .05em; color: var(--mut); font-weight: 700; text-transform: uppercase; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: baseline; }
.mikasa-sim .jauge-frais .jf-pct { font-size: 14px; font-weight: 800; }
.mikasa-sim .jauge-frais .jf-barre { height: 10px; border-radius: 6px; background: #e8eef5; overflow: hidden; }
.mikasa-sim .jauge-frais .jf-barre.jf-barre-split { display: flex; height: 20px; position: relative; }
.mikasa-sim .jf-barre-split .jf-seg {
  display: flex; align-items: center; justify-content: center; height: 100%;
  font-size: 10px; font-weight: 800; color: #fff; overflow: hidden; white-space: nowrap; text-shadow: 0 1px 1.5px rgba(0,0,0,.25);
}
.mikasa-sim .jauge-frais .jf-sub { font-size: 10.5px; color: var(--mut2); margin-top: 5px; }

.mikasa-sim .fin-card { border: 1px solid rgba(242,153,74,.25); }
.mikasa-sim .fin-repartition { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 12px; margin-top: 14px; }
.mikasa-sim .fin-scpi { background: #fbf7f1; border: 1px solid rgba(242,153,74,.18); border-radius: 14px; padding: 12px 14px; }
.mikasa-sim .fin-scpi-nom { font-weight: 800; color: var(--navy); font-size: 13px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.mikasa-sim .fin-scpi-row { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; }
.mikasa-sim .fin-scpi-row .v { font-weight: 700; color: var(--navy); }
.mikasa-sim .fin-jauge-legende { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 8px; }
.mikasa-sim .fin-jauge-item { display: flex; align-items: baseline; gap: 7px; font-size: 12.5px; }
.mikasa-sim .fin-jauge-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; position: relative; top: -1px; }
.mikasa-sim .fin-jauge-lbl { color: var(--mut); }
.mikasa-sim .fin-jauge-val { font-weight: 800; color: var(--navy); }
.mikasa-sim .fin-jauge-val b { font-weight: 800; }

.mikasa-sim .vue-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 800px) { .mikasa-sim .vue-grid { grid-template-columns: 1fr; } }
.mikasa-sim .sim-row { display: flex; flex-wrap: wrap; gap: 14px 20px; margin-bottom: 16px; align-items: end; }
.mikasa-sim .sim-field { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.mikasa-sim .sim-field label { font-size: 10.5px; letter-spacing: .04em; color: var(--mut); font-weight: 700; text-transform: uppercase; white-space: nowrap; }
/* champs de saisie : sobres et lisibles (fond blanc, contour fin) plutôt que
   le style neumorphique "creusé" d'origine, avec une largeur en pixels
   (pas en "ch", qui tronquait le champ date -- jj/mm/aaaa + icône calendrier
   ont besoin d'une largeur fixe, pas d'un nombre de caractères). */
.mikasa-sim .sim-field input, .mikasa-sim .sim-field select {
  padding: 9px 12px; border: 1.5px solid var(--color-border); border-radius: 10px;
  background: #fff; color: var(--navy); font: inherit; font-size: 14px;
  box-shadow: none; transition: border-color .18s ease, box-shadow .18s ease;
  min-width: 70px; height: 40px;
}
.mikasa-sim .sim-field input[type=number] { width: 104px; }
.mikasa-sim .sim-field input[type=date] { width: 156px; }
.mikasa-sim .sim-field input[type=text] { width: 150px; }
@media (hover: hover) and (pointer: fine) { .mikasa-sim .sim-field input:hover, .mikasa-sim .sim-field select:hover { border-color: var(--mut2); } }
.mikasa-sim .sim-field input:focus, .mikasa-sim .sim-field select:focus { outline: none; border-color: var(--grad1); box-shadow: 0 0 0 3px rgba(31,171,111,.15); }
.mikasa-sim .sim-field input:disabled, .mikasa-sim .sim-field select:disabled { background: #f4f2f8; color: var(--mut2); cursor: not-allowed; border-color: transparent; }
.mikasa-sim .sim-field label { font-size: 11px; letter-spacing: .03em; }
.mikasa-sim .sim-scpi-titre { font-size: 11px; letter-spacing: .05em; color: var(--mut); font-weight: 700; text-transform: uppercase; margin-bottom: 8px; }
.mikasa-sim .sim-scpi-rows { display: flex; flex-direction: column; gap: 10px; }
.mikasa-sim .sim-scpi-row { display: flex; flex-direction: column; gap: 10px; background: #fbf7f1; border: 1px solid rgba(242,153,74,.18); border-radius: 14px; padding: 12px 14px; }
.mikasa-sim .sim-scpi-row .sim-row { margin-bottom: 0; }
.mikasa-sim .sim-remove { border: none; background: transparent; color: var(--red); font-size: 17px; font-weight: 700; cursor: pointer; line-height: 1; padding: 8px; border-radius: 8px; align-self: center; }
@media (hover: hover) and (pointer: fine) { .mikasa-sim .sim-remove:hover { background: rgba(224,69,90,.1); } }

.mikasa-sim .sime-scpi-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mikasa-sim .sime-scpi-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: box-shadow .15s ease, border-color .15s ease;
}
@media (hover: hover) and (pointer: fine) { .mikasa-sim .sime-scpi-chip:hover { box-shadow: var(--neu-out-sm); } }
.mikasa-sim .sime-scpi-chip.on { border-color: var(--grad1); background: rgba(31,171,111,.08); color: var(--navy); box-shadow: var(--neu-in); }
.mikasa-sim .sime-scpi-chip .src-logo { margin: 0; }

/* groupe de boutons pour un choix fermé de chiffres (différé, revalorisation)
   plutôt qu'un champ number libre -- même hauteur que les autres champs pour
   rester aligné sur la même ligne. */
.mikasa-sim .sim-choix-group { display: flex; gap: 6px; height: 40px; align-items: center; }
.mikasa-sim .sim-choix-btn {
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1.5px solid var(--color-border); border-radius: 10px;
  background: #fff; color: var(--mut); font: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease;
}
@media (hover: hover) and (pointer: fine) { .mikasa-sim .sim-choix-btn:hover { border-color: var(--mut2); } }
.mikasa-sim .sim-choix-btn.on { border-color: var(--grad1); background: rgba(31,171,111,.1); color: var(--navy); }

/* pas un encart dans l'encart : une citation classique (filet vertical +
   italique), sur toute la largeur disponible, plutôt qu'une carte flottante
   centrée avec une police disproportionnée par rapport au reste du simulateur. */
.mikasa-sim .sime-recit-encart { margin-top: 16px; }
.mikasa-sim .sime-recit {
  font-family: "Quicksand", sans-serif; font-size: 15.5px; line-height: 1.7;
  color: var(--mut); text-align: left; font-style: italic;
  border-left: 3px solid var(--grad1); padding-left: 16px;
}
.mikasa-sim .sime-recit b { color: var(--navy); font-weight: 800; font-style: normal; }
.mikasa-sim .sime-recit .sime-recit-detail { font-size: .78em; color: var(--mut2); font-weight: 400; font-style: normal; }
/* variante "propre ligne" : seulement là où un retour à la ligne aide
   vraiment la lecture (ex. l'aside du TMI dans le simulateur impôts), pas la
   règle par défaut -- ailleurs (épargne, rendement) l'aside reste dans le
   flux de la phrase, comme prévu à l'origine. */
.mikasa-sim .sime-recit .sime-recit-detail-block { display: block; margin-top: 4px; }

.mikasa-sim .pill { display: inline-block; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.mikasa-sim .pill.SWISSLIFE { background: #e3edfa; color: #1d4ed8; }
.mikasa-sim .pill.CORUM { background: #fdeadd; color: #c2410c; }
.mikasa-sim .pill.ALDERAN { background: #e6f5ea; color: #1a7f37; }
.mikasa-sim .pill.COLONNES3 { background: #f2e9fb; color: #7c3aed; }
.mikasa-sim .src-logo { width: 46px; height: 16px; object-fit: contain; object-position: center; vertical-align: middle; background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 2px 7px; box-sizing: content-box; }
.mikasa-sim .src-logo-lg { width: 88px; height: 30px; }

.mikasa-sim .seg {
  position: relative; display: inline-flex; border: 1px solid var(--glass-brd); border-radius: 12px; overflow: hidden;
  background: var(--btn-bg); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: var(--glass-shadow);
}
.mikasa-sim .seg button {
  position: relative; z-index: 1; border: 0; background: transparent; padding: 7px 14px; font: inherit; font-size: 13px;
  border-radius: 9px; cursor: pointer; color: var(--mut);
  transition: box-shadow .28s cubic-bezier(.4,0,.2,1), color .2s ease, background .2s ease;
}
@media (hover: hover) and (pointer: fine) { .mikasa-sim .seg button:hover { box-shadow: var(--glass-shadow-hover); color: var(--navy); background: rgba(255,255,255,.5); } }
.mikasa-sim .seg button.on { background: var(--grad); color: #fff; font-weight: 700; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .mikasa-sim .seg button.on:hover { background: var(--grad); box-shadow: none; } }

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

/* ---------- Simulateur "Impôts" ---------- */
.mikasa-sim .simi-hero-row { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.mikasa-sim .simi-gauge-wrap { flex: 1 1 320px; max-width: 400px; }
.mikasa-sim .simi-gauge { width: 100%; height: auto; display: block; }
/* remplissage animé de chaque secteur à chaque recalcul (revenu, situation,
   niches...) : le SVG entier est reconstruit à chaque frappe, donc une
   transition CSS classique n'aurait rien à partir de quoi s'animer -- un
   @keyframes démarre en revanche automatiquement dès l'insertion d'un
   nouvel élément, ce qui donne l'effet de jauge qui se remplit à chaque
   validation. Chaque tranche a un animation-delay (posé en JS, cf.
   simiJaugeSVG) égal à rang * durée -- elle attend la fin complète du
   remplissage de la précédente avant de démarrer le sien, jamais simultané.
   .6s ici DOIT rester égal à SIMI_DUREE_SEG dans le JS. */
.mikasa-sim .simi-jauge-seg {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: simi-jauge-remplir .55s var(--ease) both;
}
@keyframes simi-jauge-remplir {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mikasa-sim .simi-jauge-seg { animation: none; }
}
.mikasa-sim .simi-recit-side { flex: 1 1 280px; }
.mikasa-sim .simi-recit-side .sime-recit-encart { margin-top: 0; }
.mikasa-sim .simi-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
.mikasa-sim .simi-stat { background: #fbf7f1; border: 1px solid rgba(242,153,74,.18); border-radius: 14px; padding: 12px 10px; text-align: center; }
.mikasa-sim .simi-stat-val { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 800; color: var(--navy); }
.mikasa-sim .simi-stat-lbl { font-size: 10.5px; color: var(--mut); letter-spacing: .02em; margin-top: 2px; }
.mikasa-sim .simi-revenu-field { flex: 1 1 220px; }
.mikasa-sim .simi-revenu-field input[type=number] { width: 100%; font-size: 1.05rem; font-weight: 700; text-align: right; }
.mikasa-sim .simi-revenu-input { display: flex; align-items: center; gap: 8px; }
.mikasa-sim .simi-revenu-input span { color: var(--mut); font-weight: 700; font-size: .92rem; flex: none; }
/* encart qui entoure les 3 lignes de paramètres (travail / foncier / niches) :
   un vrai conteneur visuel plutôt que des champs flottant librement dans la
   carte, pour bien signaler "ceci est un bloc de saisie cohérent". */
.mikasa-sim .simi-params-encart {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #faf9fc;
  padding: 18px 20px 20px;
}
.mikasa-sim .simi-params-titre { font-size: 11px; letter-spacing: .05em; color: var(--mut); font-weight: 700; text-transform: uppercase; margin-bottom: 14px; }
/* seg + infobulle ⓘ côte à côte plutôt qu'en colonne (le .sim-field parent
   est flex-direction:column) -- sinon l'icône tombe sous les boutons et
   la ligne foncier/niches devient plus haute que la ligne travail (sans
   icône), ce qui décale la grille partagée d'une ligne à l'autre. */
.mikasa-sim .simi-seg-row { display: flex; align-items: center; gap: 8px; }
/* grille à 3 colonnes fixes (champ / bouton régime / 2e champ) PARTAGÉE par
   les 3 lignes (travail, foncier, niches) : un seul grid conteneur (pas un
   par ligne) pour que la colonne 2 (boutons) tombe exactement à la même
   abscisse sur les 3 lignes -- avec 3 grids indépendants, chaque ligne
   recalcule sa propre largeur de colonne "auto" selon SON seul contenu, d'où
   un léger décalage d'une ligne à l'autre. Le flux automatique de la grille
   (rang par rang, gauche à droite) place naturellement 3 champs par ligne
   pour travail/foncier, et seulement 2 pour niches (pas de 2e champ), en
   laissant la 3e cellule de cette ligne vide plutôt que de décaler quoi que
   ce soit. */
.mikasa-sim .simi-params-grid {
  display: grid;
  grid-template-columns: minmax(200px,1fr) minmax(170px,auto) minmax(200px,1fr);
  align-items: end;
  column-gap: 16px;
  row-gap: 22px;
}
@media (max-width: 560px) {
  .mikasa-sim .simi-params-grid { grid-template-columns: 1fr; }
}
/* infobulle personnalisée (un title natif ne se stylise pas) : courte, un
   exemple par dispositif + la seule règle qui compte. */
.mikasa-sim .simi-info {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--line); color: var(--mut);
  font-size: 10px; font-style: normal; font-weight: 700; cursor: help; flex: none;
}
.mikasa-sim .simi-tooltip {
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px);
  display: flex; align-items: flex-start; gap: 12px;
  width: 340px; text-align: left;
  background: rgba(255,255,255,.96); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-brd); border-radius: 12px; box-shadow: var(--glass-shadow-hover);
  padding: 10px 12px; font-size: 11.5px; line-height: 1.55; font-weight: 400; color: var(--ink);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 50;
}
.mikasa-sim .simi-tooltip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: rgba(255,255,255,.96);
}
.mikasa-sim .simi-tooltip b { color: var(--navy); }
/* la règle se place à droite des exemples (colonne verticale, pas un bloc en
   dessous) pour une infobulle plus large mais moins haute -- plus lisible
   d'un coup d'œil qu'un long empilement vertical. */
.mikasa-sim .simi-tooltip-exemples { flex: 1 1 50%; }
.mikasa-sim .simi-tooltip-regle { display: block; flex: 1 1 50%; padding-left: 12px; border-left: 1px dashed var(--line); color: var(--mut); }
@media (max-width: 480px) {
  .mikasa-sim .simi-tooltip { width: 260px; flex-direction: column; }
  .mikasa-sim .simi-tooltip-regle { border-left: none; padding-left: 0; padding-top: 7px; border-top: 1px dashed var(--line); }
}
.mikasa-sim .simi-info:hover .simi-tooltip,
.mikasa-sim .simi-info:focus-visible .simi-tooltip {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .mikasa-sim .simi-tooltip { transition: opacity .18s ease, visibility .18s ease; }
}
@media (max-width: 640px) {
  .mikasa-sim .simi-hero-row { flex-direction: column; }
  .mikasa-sim .simi-gauge-wrap { max-width: 320px; }
  .mikasa-sim .simi-stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
}

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.contact-info .item { margin-bottom: 24px; }
.contact-info h4 { margin-bottom: 6px; }

.form-fake {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 30px;
  background: var(--color-bg-alt);
}
.form-fake label { display: block; font-weight: 600; margin: 14px 0 6px; }
.form-fake input, .form-fake textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--color-border);
  border-radius: 8px; font-family: var(--font-body); font-size: 1rem;
}
.form-fake textarea { min-height: 120px; resize: vertical; }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-dark); color: #cfd6dc; padding: 64px 0 26px; margin-top: 60px; position: relative; overflow: hidden; }
.site-footer::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--color-primary), #5fa6a0, var(--color-primary));
}
.site-footer a { color: #cfd6dc; transition: color .15s ease; }
@media (hover: hover) and (pointer: fine) { .site-footer a:hover { color: #fff; } }
.footer-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-brand img { height: 34px; width: auto; filter: brightness(0) invert(1); margin-bottom: 14px; }
.footer-brand p { color: #8b95a1; font-size: .9rem; max-width: 260px; }
.footer-col h5 {
  font-family: var(--font-eyebrow); text-transform: uppercase; letter-spacing: .06em;
  font-size: .8rem; color: #8b95a1; margin-bottom: 16px; font-weight: 700;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: .95rem; }
.footer-contact-list li { display: flex; align-items: center; gap: 10px; font-weight: 400; }
.footer-contact-list a { font-family: var(--font-body); font-weight: 400; }
/* icônes blanches (couleur du texte), pas en couleur */
.footer-contact-list svg { fill: currentColor; flex: none; opacity: .85; }
.footer-address { align-items: flex-start; }
.footer-address svg { margin-top: 2px; }
.footer-address span { white-space: nowrap; }
@media (max-width: 380px) {
  .footer-address span { white-space: normal; }
}
.social-links { display: flex; gap: 14px; }
.social-links a {
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.social-links svg { fill: currentColor; }
@media (hover: hover) and (pointer: fine) { .social-links a:hover { background: var(--color-primary); color: #06210a; transform: translateY(-2px); } }
.footer-bottom { text-align: center; margin-top: 30px; font-size: 0.85rem; color: #8b95a1; }

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

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-illus { height: 280px; margin-top: 20px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .tabs { grid-template-columns: 1fr; }
  .arrows-banner { flex-direction: column; gap: 14px; }
  .arrows-banner img { width: 46px; }
}

@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .site-header .container { padding-top: 10px; padding-bottom: 10px; }
}

/* ---------- Menu mobile (hamburger) ----------
   En dessous de 860px : le menu inline disparaît, un bouton hamburger
   ouvre un panneau déroulant sous l'en-tête. */
@media (max-width: 860px) {
  .nav-toggle { display: flex; order: 3; }
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(22px) saturate(1.5);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    border-bottom: 1px solid transparent;
    padding: 0 24px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, padding .3s ease;
  }
  .site-header.nav-open .main-nav {
    max-height: 480px;
    padding: 10px 24px 22px;
    border-bottom-color: var(--color-border);
  }
  .main-nav ul { flex-direction: column; gap: 4px; width: 100%; }
  .main-nav ul li { border-bottom: 1px solid var(--color-border); }
  .main-nav ul li a { display: block; padding: 14px 4px; }
  .main-nav .btn { margin-top: 16px; text-align: center; }
}

body.nav-lock { overflow: hidden; }

/* ---------- Animations d'apparition au scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.reveal.reveal-left { transform: translateX(-28px); }
.reveal.reveal-right { transform: translateX(28px); }
.reveal.reveal-scale { transform: scale(.92); }
/* "impact" : entrée plus rapide, plus ample, avec un léger rebond à
   l'arrivée — donne l'impression que l'élément vient percuter le texte
   plutôt que de simplement glisser en fondu. */
.reveal.reveal-impact {
  transform: translateX(-90px) scale(1.04);
  transition: opacity .5s cubic-bezier(.22,.9,.24,1.35), transform .5s cubic-bezier(.22,.9,.24,1.35);
}
.reveal.in-view { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: .1s; }
.reveal.delay-2 { transition-delay: .22s; }
.reveal.delay-3 { transition-delay: .34s; }
.reveal.delay-4 { transition-delay: .46s; }

/* liseré animé qui se dessine sous les titres de section au fur et à mesure
   qu'ils entrent dans le viewport (petit détail "vivant" en plus du fade) */
.section-title h2 { position: relative; display: inline-block; }
.section-title h2::after {
  content: "";
  position: absolute; left: 50%; bottom: -8px;
  width: 0; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--color-primary), #5fa6a0);
  transform: translateX(-50%);
  transition: width .6s var(--ease) .2s;
}
.reveal.in-view .section-title h2::after,
.section-title.in-view h2::after { width: 64px; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-illus img { animation: none; }
  .scroll-highlight-word { background-size: 100% 100%; }
}

/* ---------- Dark mode (auto via prefers-color-scheme, ou manuel via le
   bouton lune/soleil qui pose data-theme sur <html>) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-text: #eef1ee;
    --color-muted: #9aa4ad;
    --color-bg: #0e1512;
    --color-bg-alt: #131d19;
    --color-border: #223028;
  }
}
.site-header, .main-nav, .nav-toggle span, .card, .article-card, .tab-card, .form-fake, .form-fake input, .form-fake textarea {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .site-header { background: rgba(14,21,18,0.92); }
  :root:not([data-theme]) .main-nav a { color: var(--color-text); }
  :root:not([data-theme]) .main-nav { background: rgba(14,21,18,.97); }
  :root:not([data-theme]) .nav-toggle span { background: var(--color-text); }
  :root:not([data-theme]) .card, :root:not([data-theme]) .article-card, :root:not([data-theme]) .tab-card { background: #10231a; }
  :root:not([data-theme]) .form-fake { background: #10231a; }
  :root:not([data-theme]) .form-fake input, :root:not([data-theme]) .form-fake textarea { background: #0e1512; color: var(--color-text); }
}
:root[data-theme="dark"] .site-header { background: rgba(14,21,18,0.92); }
:root[data-theme="dark"] .main-nav a { color: var(--color-text); }
:root[data-theme="dark"] .main-nav { background: rgba(14,21,18,.97); }
:root[data-theme="dark"] .nav-toggle span { background: var(--color-text); }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .article-card, :root[data-theme="dark"] .tab-card { background: #10231a; }
:root[data-theme="dark"] .form-fake { background: #10231a; }
:root[data-theme="dark"] .form-fake input, :root[data-theme="dark"] .form-fake textarea { background: #0e1512; color: var(--color-text); }