/* ============================================================
   PROVIDENZIA WEALTH MANAGEMENT — Shared Stylesheet
   ============================================================ */

:root {
  --bg: #0a0f1a;
  --bg2: #0e1322;
  --surface: #141b2d;
  --border: rgba(160,180,210,0.08);
  --text: #ffffff;
  --text-muted: #b7c2d4;
  --accent: #2d3e6b;
  --accent-light: #4a5f8f;
  --accent-pale: #8a9cbd;
  --accent-dim: rgba(45,62,107,0.15);
  --gold: #b8965a;
  --gold-light: #d4b478;
  --gold-dim: rgba(184,150,90,0.15);
  --slate-blue: #6b7fa3;
  --display: 'Inter Tight', 'Helvetica Now Display', Helvetica, Arial, sans-serif;
  --body: 'Carlito', Calibri, 'Segoe UI', sans-serif;
  /* Réservée aux blocs de citation, à la demande du client : une police à
     empattements y ramène le ton des pages « manifeste ». Une seule graisse
     est chargée, en italique, et elle ne sert nulle part ailleurs. */
  --quote: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 110%; }

body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-light); color: var(--bg); }

/* NOISE OVERLAY */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: none; /* noise overlay retiré — rendu lisse */
  pointer-events: none;
  z-index: 9999;
}

/* ============================================================
   NAVIGATION
   ============================================================ */

nav#nav {
  position: fixed;
  top: 0;
  width: 100%;
  /* ⚠️ Cette barre est en position:fixed avec un z-index : elle crée donc un
     CONTEXTE D'EMPILEMENT. Le z-index du hamburger, à l'intérieur, n'est comparé
     qu'aux autres enfants de la barre — jamais au menu plein écran, qui vit à la
     racine. Tant que la barre passait sous le menu (100 < 150), le bouton était
     inatteignable quel que soit son propre z-index. */
  z-index: 200;
  padding: 1.5rem 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(180deg, rgba(11,11,15,0.95) 0%, transparent 100%);
  transition: all 0.4s;
}

nav#nav.scrolled {
  background: rgba(11,11,15,0.97);
  backdrop-filter: blur(20px);
  padding: 1rem 4rem;
  border-bottom: 1px solid var(--border);
}

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.nav-logo img {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
  transition: opacity 0.3s;
}

.nav-logo:hover img { opacity: 0.85; }

.nav-links { display: flex; gap: 2.5rem; align-items: center; }

.nav-links > a {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.3s;
}

.nav-links > a:hover,
.nav-links > a.active { color: var(--accent-pale); }

/* DROPDOWN */
.nav-dropdown {
  position: relative;
}

.nav-dropdown > a {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.3s;
}

.nav-dropdown > a::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1px solid var(--text-muted);
  border-bottom: 1px solid var(--text-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.3s, border-color 0.3s;
}

.nav-dropdown:hover > a::after {
  transform: rotate(-135deg) translateY(-2px);
  border-color: var(--accent-pale);
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  padding-top: 1.2rem;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: rgba(11,13,22,0.98);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  min-width: 220px;
  padding: 0.75rem 0;
  opacity: 0;
  z-index: 1000;
}

.dropdown-menu a {
  display: block !important;
  padding: 0.7rem 1.5rem;
  font-size: 0.72rem !important;
  letter-spacing: 0.1em;
  color: var(--text-muted) !important;
  transition: color 0.3s, background 0.3s;
}

.dropdown-menu::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.dropdown-menu a:hover {
  color: var(--accent-pale) !important;
  background: rgba(74,95,143,0.05);
}

.nav-cta {
  font-size: 0.72rem !important;
  font-weight: 400 !important;
  padding: 0.6rem 1.6rem;
  border: 1px solid var(--accent-light);
  color: var(--gold) !important;
  transition: all 0.3s !important;
}

.nav-cta:hover {
  background: var(--gold) !important;
  color: var(--bg) !important;
}

/* HAMBURGER */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  /* ⚠️ Zone de touche d'au moins 44px : trois traits de 1px et deux écarts de 5px
     ne font que 13px de haut. Sans ce remplissage, la croix se rate au doigt. */
  padding: 16px 10px;
  margin: -16px -10px;
  box-sizing: content-box;
  /* ⚠️ Un z-index ne s'applique qu'à un élément positionné. Sans cette ligne,
     le 200 ci-dessous était inopérant et le menu plein écran (z-index 150)
     recouvrait le bouton : la croix existait, elle était simplement dessous. */
  position: relative;
  z-index: 200;
  -webkit-tap-highlight-color: transparent;
}

/* menu ouvert : les trois traits deviennent une croix, sur le fond sombre du panneau */
.nav-hamburger.open span { background: var(--text); }

.nav-hamburger span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--text-muted);
  transition: all 0.3s;
}

/* ⚠️ L'ordre compte : les transformations s'appliquent de DROITE à GAUCHE.
   « rotate() translateY() » déplaçait le trait dans le repère déjà tourné, donc en
   diagonale — la croix ne se refermait pas et les traits ne se superposaient pas.
   Il faut translater d'abord, tourner ensuite. */
.nav-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  /* ⚠️ Sur iOS, inset:0 s'étend sous la barre d'adresse : le contenu centré
     verticalement paraît alors remonté, et le bas du menu passe hors écran.
     dvh suit la zone réellement visible. */
  height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
  padding: 5rem 1.5rem 3rem;
  padding-bottom: max(3rem, env(safe-area-inset-bottom));
  background: rgba(10,15,26,0.98);
  backdrop-filter: blur(20px);
  z-index: 150;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.mobile-menu.open { display: flex; }

/* Une seule police et une seule taille pour tous les liens du menu.
 *
 * Il en cohabitait quatre : les entrées principales en serif 21 px, les
 * services en sans 16 px, la bascule de langue en serif 21 px — aussi grosse
 * que « À propos », alors que c'est un contrôle — et le bouton en 13 px. La
 * hiérarchie est désormais portée par l'étiquette « Nos prestations » et par
 * l'espacement, pas par un changement de police à chaque niveau. Le menu suit
 * ainsi le même vocabulaire que la navigation de bureau, en sans-serif. */
.mobile-menu a {
  font-size: 1rem;
  font-family: var(--body);
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.3s;
}

.mobile-menu a:hover { color: var(--text); }

.mobile-menu .mobile-label {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-pale);
  margin-top: 1rem;
}

.mobile-menu .mobile-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Les sous-entrées partagent la taille des autres : seule leur couleur, un ton
   en dessous, marque qu'elles dépendent de l'étiquette au-dessus. */
.mobile-menu .mobile-sub a { color: var(--accent-pale); }

.mobile-menu .mobile-sub a:hover { color: var(--text); }

/* La bascule de langue est un contrôle, pas une entrée de menu. */
.mobile-menu .lang-switch a {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
}

/* Le logo, en tête du menu : sur téléphone, le menu couvre toute la page et
   masque celui de la barre de navigation — il n'y avait plus aucun moyen de
   revenir à l'accueil. */
.mobile-menu .mobile-logo {
  margin-bottom: 0.5rem;
}

.mobile-menu .mobile-logo img {
  height: 30px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  transition: opacity 0.3s;
}

.mobile-menu .mobile-logo:hover img { opacity: 1; }

/* Page courante : rien ne la signalait, on ne savait pas où on se trouvait.
   Le repère est un filet doré sous le libellé, dans le vocabulaire du site,
   plutôt qu'un simple changement de couleur qui se confondrait avec le
   survol. */
.mobile-menu a[aria-current="page"] {
  color: var(--text);
  position: relative;
}

.mobile-menu a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -0.5rem;
  width: 1.6rem;
  height: 1px;
  background: var(--gold);
}

/* La bascule marque déjà la langue active en doré : pas de second filet. */
.mobile-menu .lang-switch a[aria-current="page"]::after { display: none; }

/* Même appel à l'action que sur grand écran : sur téléphone il se confondait
   avec les autres liens du menu. */
.mobile-menu .mobile-cta {
  margin-top: 1.5rem;
  padding: 0.7rem 1.8rem;
  border: 1px solid var(--accent-light);
  font-family: var(--body);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  transition: background 0.3s, color 0.3s;
}

.mobile-menu .mobile-cta:hover {
  background: var(--gold);
  color: var(--bg);
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* La marge haute réserve la place de la navigation : sans elle, un titre sur
     deux lignes remonte et passe derrière le menu. Les feuilles de page la
     redéclarent, mais c'est ici qu'elle doit vivre — une page qui ne
     redéclarerait pas `.hero` héritait sinon d'un hero sans marge. */
  padding: 7rem 2rem 3rem;
  position: relative;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.3) brightness(0.5);
  opacity: 0.3;
}

.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(12,16,24,0.08) 32%, rgba(12,16,24,0.26) 76%, var(--bg) 100%);
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(180deg, transparent, var(--bg));
  pointer-events: none;
}

.hero > .hero-content { position: relative; z-index: 2; }

.hero-label {
  font-size: 0.68rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--accent-pale);
  margin-bottom: 2.5rem;
  font-weight: 400;
  opacity: 0;
  animation: fadeUp 1s 0.3s forwards;
}

.hero h1 {
  font-family: var(--display);
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 900px;
  margin-inline: auto;
  opacity: 0;
  animation: fadeUp 1.2s 0.5s forwards;
}

/* Le second membre du titre était en bleu pâle : sur une bannière sombre, le
   contraste est faible au point que le mot semble mal chargé plutôt que mis en
   valeur. Le titre reste blanc d'un bout à l'autre ; la respiration passe par
   le retour à la ligne, pas par la couleur. */
.hero h1 em,
.page-hero h1 em {
  font-style: normal;
  color: inherit;
}

.hero-sub {
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text-muted);
  max-width: 520px;
  line-height: 1.7;
  /* 2rem laissait le sous-titre flotter loin du titre : ramené à 1.25rem */
  margin: 1.25rem auto 0;
  opacity: 0;
  animation: fadeUp 1s 0.8s forwards;
}

.hero-cta {
  margin-top: 3.5rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  opacity: 0;
  animation: fadeUp 1s 1.1s forwards;
}

/* Inner hero for sub-pages (shorter) */
.page-hero {
  min-height: 55vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0 4rem 6rem;
  position: relative;
}

.page-hero .hero-bg img { opacity: 0.25; }

.page-hero .hero-content {
  position: relative;
  z-index: 2;
}

.page-hero .hero-label {
  margin-bottom: 1.5rem;
}

.page-hero h1 {
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  text-align: left;
  max-width: 700px;
}

/* ============================================================
   BUTTONS
   ============================================================ */

/* Une icône par valeur, à la demande du client : géométrique, un seul trait,
   dans l'esprit du losange du logo. Elle annonce le titre sans le concurrencer.
   Déclarée ici et non dans une feuille de page : la section des valeurs existe
   sur l'accueil comme sur « à propos », qui ne chargent pas les mêmes feuilles. */
.value-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 1.4rem;
}

.value-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

.btn-primary {
  display: inline-block;
  padding: 1rem 2.8rem;
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--accent-light);
  cursor: pointer;
  transition: all 0.4s;
}

.btn-primary:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); }

/* Uniformisé sur .btn-primary à la demande du client : le bouton secondaire
   était blanc à bordure blanche, les deux autres dorés à bordure bleue.
   Même palette pour les trois, la hiérarchie passe par la place, pas la couleur. */
.btn-ghost {
  display: inline-block;
  padding: 1rem 2.8rem;
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--accent-light);
  transition: all 0.4s;
  cursor: pointer;
}

.btn-ghost:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); }

/* ============================================================
   DIVIDER
   ============================================================ */

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4rem;
  gap: 2rem;
}

.divider-line { flex: 1; height: 1px; background: var(--border); }
.divider-icon { color: var(--accent-pale); font-family: var(--display); font-size: 1.2rem; }

/* ============================================================
   SECTIONS — COMMON
   ============================================================ */

section { padding: 8rem 4rem; }

/* La section d'identite se termine par deux chiffres, une ligne basse : les
   8 rem d'origine creusaient un vide de 282 px avant la section suivante. */
section[aria-labelledby="who-we-are"] { padding-bottom: 4.5rem; }

.section-label {
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--accent-pale);
  font-weight: 400;
  margin-bottom: 1.5rem;
}

.section-title {
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 400;
  line-height: 1.2;
  max-width: 600px;
  margin-bottom: 1.5rem;
}

.section-desc {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text-muted);
  max-width: 500px;
  line-height: 1.8;
}

/* ============================================================
   INTRO BLOCK
   ============================================================ */

.intro {
  display: grid;
  /* La colonne de droite ne porte qu'une citation : elle n'a pas besoin de la
     largeur du texte courant. */
  grid-template-columns: 1.15fr 0.85fr;
  gap: 5rem;
  align-items: start;
}

.intro-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3rem;
}




.stat {
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
}

.stat-number {
  font-family: var(--display);
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--accent-pale);
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 0.5rem;
  letter-spacing: 0.05em;
}

.intro-right {
  position: relative;
  padding: 3rem 3.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* La carte descend a hauteur du paragraphe de gauche, pas du titre : mesure
     relevee sur le rendu, 174 px pour une racine de 17,6 px. */
  margin-top: 9.9rem;
}

@media (max-width: 900px) {
  .intro-right { margin-top: 0; }
}

.intro-right::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 2rem;
  right: 2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.intro-quote {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.6;
  color: var(--text);
}

.intro-quote-author {
  margin-top: 2rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 400;
}

/* ============================================================
   SERVICE CARDS
   ============================================================ */

.services-section { background: var(--bg2); }

.services-header {
  text-align: center;
  margin-bottom: 5rem;
}

.services-header .section-title { margin: 0 auto 1.5rem; }
.services-header .section-desc { margin: 0 auto; max-width: 560px; text-align: center; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.services-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.service-card {
  background: var(--bg2);
  padding: 3.5rem 2.5rem;
  transition: all 0.5s;
  position: relative;
}

.service-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 2.5rem;
  right: 2.5rem;
  height: 1px;
  background: var(--accent-light);
  transform: scaleX(0);
  transition: transform 0.5s;
}

.service-card:hover::after { transform: scaleX(1); }
.service-card:hover { background: var(--surface); }

.service-num {
  font-family: var(--display);
  font-size: 3rem;
  font-weight: 400;
  color: rgba(120,146,201,0.42);
  margin-bottom: 2rem;
}

.service-card h3 {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 1.25rem;
}

.service-card p {
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.8;
}

.service-link {
  display: inline-block;
  margin-top: 2rem;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-pale);
  text-decoration: none;
  transition: all 0.3s;
}

.service-link::after { content: ' \2192'; transition: margin-left 0.3s; }
.service-link:hover::after { margin-left: 0.5rem; }

/* ============================================================
   VALUES / FEATURES GRID
   ============================================================ */

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
  margin-top: 4rem;
}

.values-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  margin-top: 4rem;
}

.value-item {
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  transition: border-color 0.4s;
}

.value-item:hover { border-color: var(--accent-pale); }

.value-icon {
  font-family: var(--display);
  font-size: 1.6rem;
  color: rgba(138,156,189,0.4);
  margin-bottom: 1.25rem;
}.value-item h3,
.value-item h4,
.value-item h5 {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 1rem;
}

.value-item p {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.8;
}

/* ============================================================
   TEAM
   ============================================================ */

.team-section { background: var(--bg2); }

.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 4rem;
}

.team-card {
  display: flex;
  gap: 2.5rem;
  padding: 3rem;
  background: var(--bg);
  border: 1px solid var(--border);
  transition: border-color 0.4s;
}

.team-card:hover { border-color: rgba(75,95,143,0.3); }

.team-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-dim), var(--surface));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--accent-pale);
  flex-shrink: 0;
  border: 1px solid rgba(75,95,143,0.2);
}

.team-info h3 {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 0.3rem;
}

.team-role {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-pale);
  font-weight: 400;
  margin-bottom: 1rem;
}

.team-bio {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.7;
}

/* Full-page team cards (team.html) */
.team-card-full {
  display: flex;
  flex-direction: column;
  padding: 3.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  transition: border-color 0.4s;
  position: relative;
}

.team-card-full::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 3rem;
  right: 3rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.team-card-full:hover { border-color: rgba(75,95,143,0.3); }

.team-card-full .team-avatar {
  width: 100px;
  height: 100px;
  font-size: 1.8rem;
  margin-bottom: 2rem;
}

.team-card-full .team-info h3 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.team-card-full .team-role {
  font-size: 0.75rem;
  margin-bottom: 1.5rem;
}

.team-card-full .team-bio {
  font-size: 0.9rem;
  line-height: 1.85;
}

.team-card-full .team-credentials {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.credential-tag {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 0.35rem 0.85rem;
  font-weight: 400;
}

/* ============================================================
   OFFICES
   ============================================================ */

.offices-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 4rem;
  background: var(--border);
  border: 1px solid var(--border);
}

.office {
  background: var(--bg);
  padding: 3rem 2.5rem;
  transition: all 0.4s;
}

.office:hover { background: var(--surface); }

.office-city {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 0.3rem;
}

.office-country {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-pale);
  font-weight: 400;
  margin-bottom: 1.5rem;
}

.office-detail {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.8;
}

.office-detail a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.3s;
}

.office-detail a:hover { color: var(--accent-pale); }

/* ============================================================
   CTA SECTION
   ============================================================ */

.cta-section {
  text-align: center;
  padding: 10rem 4rem;
  position: relative;
  overflow: hidden;
}

.cta-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.4) brightness(0.72);
  opacity: 0.32;
}

.cta-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(12,16,24,0.3) 30%, rgba(12,16,24,0.3) 70%, var(--bg) 100%);
}

.cta-section > .cta-content { position: relative; z-index: 2; }

.cta-section .section-title {
  margin: 0 auto 1.5rem;
  max-width: 700px;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
}

.cta-section .section-desc {
  margin: 0 auto 3rem;
  text-align: center;
}

/* Simple CTA (no bg image) */
.cta-simple {
  text-align: center;
  padding: 8rem 4rem;
  background: var(--bg2);
  border-top: 1px solid var(--border);
}

.cta-simple .section-title {
  margin: 0 auto 1.5rem;
  max-width: 650px;
  text-align: center;
}

.cta-simple .section-desc {
  margin: 0 auto 3rem;
  text-align: center;
}

/* ============================================================
   QUOTE BLOCK
   ============================================================ */

.quote-block {
  position: relative;
  padding: 5rem 4rem;
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.quote-block::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.quote-block blockquote {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 400;
  font-style: normal;
  line-height: 1.6;
  color: var(--text);
  max-width: 750px;
  margin: 0 auto 2rem;
}

.quote-block cite {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-style: normal;
  font-weight: 400;
}

/* ============================================================
   SERVICE BLOCKS (detailed)
   ============================================================ */

.service-block {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 5rem;
  align-items: start;
  padding-bottom: 5rem;
  border-bottom: 1px solid var(--border);
}

.service-block:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.service-block.reverse {
  grid-template-columns: 1.6fr 1fr;
}

.service-block-label {
  font-size: 0.62rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 400;
  margin-bottom: 1.2rem;
}

.service-block h3 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.service-block p {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.85;
  margin-bottom: 1.25rem;
}

.service-block ul {
  list-style: none;
  margin-top: 1.5rem;
}

.service-block ul li {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.7;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.service-block ul li::before {
  content: '—';
  color: var(--accent-pale);
  font-size: 0.7rem;
  flex-shrink: 0;
}

.service-block-aside {
  position: relative;
  padding: 3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  align-self: center;
}

.service-block-aside::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 2rem;
  right: 2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}.service-block-aside h3,
.service-block-aside h4,
.service-block-aside h5 {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 1rem;
  color: var(--text);
}

.service-block-aside p {
  font-size: 0.83rem;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 0;
}

/* ============================================================
   CAPABILITIES GRID
   ============================================================ */

.capabilities-section { background: var(--bg2); }

.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 4rem;
}

.capability-card {
  background: var(--bg2);
  padding: 2.5rem 2rem;
  transition: background 0.4s;
}

.capability-card:hover { background: var(--surface); }

.capability-num {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 400;
  color: rgba(120,146,201,0.42);
  margin-bottom: 1.25rem;
}.capability-card h3,
.capability-card h4,
.capability-card h5 {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 400;
  margin-bottom: 0.75rem;
}

.capability-card p {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.8;
}

/* ============================================================
   CONTACT FORM
   ============================================================ */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 6rem;
  align-items: start;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 400;
  margin-bottom: 0.6rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--body);
  font-size: 0.88rem;
  font-weight: 400;
  padding: 0.9rem 1.2rem;
  outline: none;
  transition: border-color 0.3s;
  -webkit-appearance: none;
  border-radius: 0;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent-light);
}

.form-group select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238a9cbd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.2rem center;
  padding-right: 2.5rem;
}

.form-group select option {
  background: var(--surface);
  color: var(--text);
}

.form-group textarea {
  resize: vertical;
  min-height: 130px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* ============================================================
   FOOTER
   ============================================================ */

footer {
  padding: 4rem;
  border-top: 1px solid var(--border);
  /* Grille à 3 colonnes plutôt que space-between : les deux colonnes
     latérales font la même largeur (1fr chacune), donc la colonne du milieu
     tombe exactement au centre de la PAGE. Avec space-between, les liens se
     centraient dans l'espace restant entre le logo et la mention légale,
     qui n'ont pas la même largeur — d'où le décalage visible. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
}

.footer-logo-link { text-decoration: none; }
.footer-logo-img {
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: opacity 0.3s;
}
.footer-logo-link:hover .footer-logo-img { opacity: 1; }

.footer-links { display: flex; gap: 2rem; flex-wrap: wrap; }

.footer-links a {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 400;
  transition: color 0.3s;
}

.footer-links a:hover { color: var(--accent-pale); }

.footer-copy {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 400;
  justify-self: end;
  text-align: right;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s, transform 0.8s;
}

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

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  section { padding: 6rem 2rem; }
  nav#nav { padding: 1.2rem 2rem; }
  nav#nav.scrolled { padding: 0.8rem 2rem; }
  .page-hero { padding: 0 2rem 5rem; min-height: 48vh; }
  .intro { grid-template-columns: 1fr; gap: 3rem; }
  .services-grid { grid-template-columns: 1fr; }
  .services-grid-2 { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .values-grid-2 { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .team-grid { grid-template-columns: 1fr; }
  .offices-row { grid-template-columns: 1fr; }
  .capabilities-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 4rem; }
  .service-block { grid-template-columns: 1fr; gap: 3rem; }
  .service-block.reverse { grid-template-columns: 1fr; }
  footer { flex-direction: column; gap: 2rem; text-align: center; }
  .footer-links { justify-content: center; }
  .cta-section { padding: 7rem 2rem; }
  .cta-simple { padding: 6rem 2rem; }
  .divider { padding: 0 2rem; }
}

@media (max-width: 600px) {
  section { padding: 5rem 1.5rem; }
  nav#nav { padding: 1rem 1.5rem; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .values-grid { grid-template-columns: 1fr; }
  .values-grid-2 { grid-template-columns: 1fr; }
  .team-card { flex-direction: column; gap: 1.5rem; }
  .hero-cta { flex-direction: column; }
  .capabilities-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .page-hero { padding: 0 1.5rem 4rem; }
  /* Cette regle ne visait que `.page-hero`, or les pages interieures utilisent
     `.hero` : le titre y gardait donc son plancher de 3rem sur mobile. Mesure a
     390 px, « Investissements prives » debordait de 6 px hors du cadre, et de
     76 px a 320 px. Le plancher descend a 1.9rem et la pente passe a 9vw, ce qui
     laisse passer le mot le plus long du site dans les deux langues. */
  .page-hero h1,
  .hero h1 { font-size: clamp(1.9rem, 9vw, 3.5rem); }
  .team-grid { grid-template-columns: 1fr; }
  .cta-section { padding: 5rem 1.5rem; }
  .cta-simple { padding: 5rem 1.5rem; }
  .quote-block { padding: 4rem 1.5rem; }
}

.hero-label { color: rgba(255,255,255,0.9) !important; }

/* <p> en blanc + centrage bureau unique */
.section-desc, .hero-sub, .service-card p, .value-item p, .team-bio, .intro-quote, .body-md, .body-sm, .office-detail { color: #ffffff; }
.offices-single { justify-content: center; text-align: center; }
.offices-single .office { text-align: center; margin-inline: auto; }
.offices-single .office-detail { text-align: center; }

/* ============================================================
   AUDIT DA 2026-07 — Alignement cohérent + lisibilité
   ============================================================ */
.section-label,
.section-title,
.section-desc { text-align: center; }
.section-title,
.section-desc { margin-left: auto; margin-right: auto; }
.intro-left .section-label, .intro-left .section-title, .intro-left .section-desc,
.who-text .section-label, .who-text .section-title, .who-text .section-desc,
.contact-left .section-label, .contact-left .section-title, .contact-left .section-desc {
  text-align: left; margin-left: 0; margin-right: 0;
}
:root { --text-muted: #b7c2d4 !important; }
.section-desc, .hero-sub, .who-text p, .founder-bio, .team-bio,
.pillar-card p, .value-item p, .capability-card p, .banking-card p,
.conv-card p, .feature-card p, .investment-card p, .main-block p,
.block-geographies p, .service-item p, .process-step p,
.contact-intro, .contact-aside-note p, .office-detail { color: #ffffff !important; }
.btn-primary, .btn-ghost { color: var(--gold) !important; }
.btn-primary:hover, .btn-ghost:hover { color: var(--bg) !important; }

/* ============================================================
   PROPAGATION des finitions de l'accueil aux sous-pages (2026-07-09)
   ============================================================ */
/* Plus d'italique manuscrit */
.page-hero h1 em, .hero h1 em { font-style: normal !important; }
/* Losange divider en CSS pur (plus de flash de police) */
.divider-icon { width: 9px; height: 9px; padding: 0; font-size: 0 !important; line-height: 0; background: var(--accent-pale); transform: rotate(45deg); flex: none; border-radius: 1px; }
/* Finition typo (poids et interlettrage adaptés à Inter Tight + Carlito) */
.hero h1, .page-hero h1, .section-title { font-weight: 500 !important; letter-spacing: -0.015em; }
.hero-label, .section-label { font-weight: 500 !important; letter-spacing: 0.22em; }
.btn-primary, .btn-ghost { font-weight: 500 !important; letter-spacing: 0.14em; }
.stat-number { font-family: var(--body) !important; font-weight: 600 !important; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
/* Corps de texte plus généreux (lisibilité premium) */
.section-desc { font-size: 1.06rem !important; line-height: 1.7 !important; }
.who-text p, .founder-bio, .team-bio, .pillar-card p, .value-item p, .capability-card p,
.banking-card p, .conv-card p, .feature-card p, .investment-card p, .main-block p,
.service-item p, .process-step p, .contact-intro, .contact-aside-note p, .office-detail {
  font-size: 1rem !important; line-height: 1.72 !important;
}

/* Citations : deux demandes contraires du client, la plus récente l'emporte.
   Le 18-08-2026, il trouvait l'italique du titrage trop calligraphique et
   demandait du romain dans la police de texte : c'est ce qui était en place.
   Le 28-08-2026, il demande de revenir à une police à empattements dans les
   blocs de citation. Playfair Display italique est chargée pour ce seul usage,
   en une graisse ; elle ne sert nulle part ailleurs sur le site.
   ⚠️ Si le client revenait à son avis d'août, il suffit de remettre
   var(--body) et font-style: normal ci-dessous, et de retirer
   « &family=Playfair+Display:ital,wght@1,400 » des vingt pages. */
.intro-quote,
.quote-block blockquote {
  font-family: var(--quote) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: 0.005em !important;
  line-height: 1.6 !important;
}
.intro-quote { font-size: 1.12rem !important; }
.quote-block blockquote { font-size: clamp(1.1rem, 1.5vw, 1.32rem) !important; }

/* ============================================================
   Accessibilité + bascule de langue (ajouts audit 2026-07-15)
   ============================================================ */
.lang-switch { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 400; letter-spacing: 0.1em; }
.lang-switch a { color: var(--text-muted); text-decoration: none; transition: color 0.3s; }
.lang-switch a.active { color: var(--gold); }
.lang-switch a:hover { color: var(--accent-pale); }
.lang-switch span { color: var(--border); }

.skip-link { position: absolute; top: -60px; left: 0; z-index: 200; background: var(--gold); color: var(--bg); padding: 0.7rem 1.2rem; font-weight: 600; text-decoration: none; border-radius: 0 0 6px 0; transition: top 0.2s; }
.skip-link:focus { top: 0; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: #8a9cbd; opacity: 0.9; }


/* ─── Footer : logo à gauche, liens au centre de la PAGE, mention à droite ───
   Le space-between d'origine centrait les liens dans l'espace restant entre
   le logo et la mention légale. Comme ces deux blocs n'ont pas la même
   largeur, les liens tombaient à côté du centre. La grille à 3 colonnes
   règle ça : les deux colonnes latérales valent 1fr chacune, donc elles ont
   exactement la même largeur et la colonne du milieu est centrée sur la page.
   Bloc placé en fin de feuille pour primer sur les règles précédentes. */
footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
  text-align: initial;
}
footer .footer-logo-link { justify-self: start; }
footer .footer-links {
  justify-self: center;
  justify-content: center;
}
footer .footer-copy {
  justify-self: end;
  text-align: right;
}

@media (max-width: 1024px) {
  footer {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  footer .footer-logo-link,
  footer .footer-links,
  footer .footer-copy {
    justify-self: center;
    text-align: center;
  }
}

/* Champ leurre du formulaire de contact : hors écran plutôt que display:none,
   que certains robots savent détecter. Invisible et non focusable. */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Retour après envoi du formulaire de contact. */
.form-feedback {
  margin-bottom: 1.5rem;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1.6;
}
.form-feedback.is-ok {
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--gold);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
}
.form-feedback.is-ko {
  padding: 1rem 1.25rem;
  border-left: 2px solid #c25b5b;
  background: rgba(194, 91, 91, 0.06);
  color: var(--text);
}

/* Globe de la bascule de langue : posé avant EN/FR, il signale la fonction
   sans texte supplémentaire. Il suit la couleur du texte voisin. */
.lang-globe {
  flex-shrink: 0;
  color: var(--text-muted);
  margin-right: 0.15rem;
  transition: color 0.3s;
}
.lang-switch:hover .lang-globe { color: var(--accent-pale); }

/* Bloc d'appel des pages légales : nettement séparé du contenu obligatoire,
   pour qu'aucun lecteur ne puisse le confondre avec du texte réglementaire.
   Plus sobre que le bloc des pages de contenu, sans image de fond. */
.cta-legal {
  margin-top: 5rem;
  padding-top: 4rem;
  border-top: 1px solid var(--border);
  background: none;
  text-align: center;
}
.cta-legal .section-title { font-size: clamp(1.6rem, 3vw, 2.2rem); }


/* ─── Traitement commun des images de hero ───────────────────────────────
 *
 * Toutes les pages passent par le même filtre, pour qu'aucune ne détonne :
 * les photos viennent d'heures et de saisons différentes — jet d'eau en plein
 * jour, village sous la neige, vignes en été — et sans traitement commun on
 * voyait la couture en passant d'une page à l'autre.
 *
 * Trois couches, dans cet ordre :
 *   1. un voile navy qui fond l'image dans le fond en haut et en bas ;
 *   2. une teinte navy uniforme par-dessus l'image, qui ramène tous les
 *      ciels et tous les verts vers la même famille de bleus ;
 *   3. une désaturation forte et un léger gain de contraste.
 *
 * Chaque page ne fournit que son image, via --hero-image.
 */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
/* Le client trouvait les bannières trop fondues : l'image disparaissait
     sous trois couches de voile. Le dégradé haut et bas est conservé, il
     assure la lisibilité du menu et la jonction avec la section suivante,
     mais le ventre de l'image est rendu et la désaturation reculée. */
    linear-gradient(180deg,
      var(--bg) 0%,
      rgba(12, 16, 24, 0.10) 30%,
      rgba(12, 16, 24, 0.28) 78%,
      var(--bg) 100%),
    linear-gradient(rgba(18, 26, 44, 0.10), rgba(18, 26, 44, 0.10)),
    var(--hero-image) var(--hero-position, center 55%) / cover no-repeat;
  opacity: 1;
  filter: saturate(0.85) brightness(1.02) contrast(1.06);
  pointer-events: none;
}

html { scroll-behavior: smooth; }

/* Les ancres de vérification (#correction-N) tombaient sous le menu fixe :
   on réserve sa hauteur au-dessus de la cible. */
[id^="correction-"] { scroll-margin-top: 120px; }

/* ------------------------------------------------------------------ *
   Jonction hero / première section

   Le client signalait « pas de fade » sur cinq bannières : le hero se
   fondait vers `--bg` (#0a0f1a) alors que la section suivante démarre en
   `--bg2` (#0e1322). Mesuré, l'écart de luminance n'était que de 4,3 —
   mais franchi en un seul pixel, ce qui donne une arête visible sur toute
   la largeur (bande de Mach).

   Plutôt que de déclarer la couleur de sortie page par page, ce qui se
   désynchronise au premier ajout de page, c'est la section elle-même qui
   remonte son propre fond au-dessus d'elle : `background: inherit` reprend
   exactement sa couleur, et un masque en dégradé le fait naître de rien.
   Une section au fond transparent (accueil, cabinet, family office,
   contact) hérite du transparent et reste donc inchangée.
 * ------------------------------------------------------------------ */
:is(.hero, .page-hero, .hero-scrolly) + section {
  position: relative;
}
:is(.hero, .page-hero, .hero-scrolly) + section::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;              /* déborde vers le haut, dans le bas du hero */
  height: 200px;
  background: inherit;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 92%);
          mask-image: linear-gradient(180deg, transparent, #000 92%);
  pointer-events: none;
  /* Pas de z-index : l'ordre du DOM le pose déjà au-dessus des voiles du
     hero, tandis que `.hero-content` (z-index 2) reste au-dessus de lui.
     Un z-index ici voilerait le sous-titre du hero. */
}