/* ═══════════════════════════════════════════════════════════
   ZOLIAS GROUPE — feuille de style de la LP groupe
   Charte relevée sur zolias-conseil.com (nuit / or / ivoire,
   Cormorant Garamond + Manrope). Tout passe par les tokens :root.
   Polices servies en local : aucun appel à un tiers.
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/cormorant-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/cormorant-italic-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/manrope-latin.woff2') format('woff2');
}
/* Repli métrique : évite le saut de mise en page au chargement des fontes */
@font-face { font-family: 'Cormorant Fallback'; src: local('Times New Roman'); ascent-override: 95.27%; descent-override: 29.59%; size-adjust: 96.98%; }
@font-face { font-family: 'Manrope Fallback'; src: local('Arial'); ascent-override: 103.31%; descent-override: 29.07%; size-adjust: 103.19%; }

:root {
  /* ═══ COULEURS (charte du site) ═══ */
  --navy: #0b1c2d;
  --navy-deep: #081420;
  --navy-light: #16304a;
  --navy-border: #253f57;
  --gold: #b99a5e;
  --gold-dark: #7a6230;          /* or lisible sur fond clair (contraste ≥ 4,5:1 sur crème) */
  --gold-light: #d8c69b;
  --ivory: #faf8f4;
  --ivoire-conseil: #f3ede2;     /* papier ivoire du site Zolias Conseil (--color-ivoire) : porte Clients du hero */
  --cream: #f7f4ee;
  --cream-deep: #efe8da;
  --white: #ffffff;
  --charcoal: #23262b;
  --muted: #5f6469;
  --line: rgba(11, 28, 45, 0.12);
  --line-light: rgba(216, 198, 155, 0.22);

  /* ═══ TYPO ═══ */
  --serif: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;
  --sans: 'Manrope', 'Manrope Fallback', system-ui, sans-serif;
  --t-h1: clamp(36px, 4.6vw, 64px);
  --t-h2: clamp(34px, 4.4vw, 58px);
  --t-body: 17px;

  /* ═══ MISE EN PAGE ═══ */
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
  --radius: 14px;
  --header-h: 72px;

  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-card: 0 24px 60px -28px rgba(8, 20, 32, 0.45);
  --erreur: #9a2b22;             /* messages d'erreur des formulaires : contraste ≥ 7:1 sur blanc */
  --succes: #2f5d3a;             /* confirmation d'envoi : contraste ≥ 7:1 sur blanc */
}

/* ═══════════ BASE ═══════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--charcoal);
  font: 400 var(--t-body)/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.08; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: 26px; }
em { font-style: italic; color: var(--gold-dark); }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--navy); padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.skip:focus { top: 12px; }

.kicker {
  font: 600 13px/1.4 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.badge {
  display: inline-flex; align-items: center;
  font: 700 11px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--gold); color: var(--navy);
  padding: 6px 10px; border-radius: 999px;
}
.fine { font-size: 14px; color: var(--muted); margin-top: 18px; max-width: 60ch; }
.fine-light { color: rgba(250, 248, 244, 0.62); }

/* ═══════════ BOUTONS (cibles ≥ 48 px) ═══════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border-radius: 999px; border: 1px solid transparent;
  font: 600 15px/1.2 var(--sans); text-decoration: none; text-align: center;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease-premium);
}
.btn:hover { transform: translateY(-1px); }
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: var(--gold-light); }
.btn-navy { background: var(--navy); color: var(--ivory); }
.btn-navy:hover { background: var(--navy-light); }
.btn-line { border-color: var(--navy); color: var(--navy); }
.btn-line:hover { background: var(--navy); color: var(--ivory); }
.btn-line-light { border-color: var(--gold-light); color: var(--ivory); }
.btn-line-light:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ═══════════ EN-TÊTE ═══════════ */
/* Barre de 72 px, navy : logo · deux entrées centrées (Clients, Professionnels) avec leur panneau · rendez-vous */
.top {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--header-h); background: var(--navy);
  transition: box-shadow .35s;
}
.top.scrolled { box-shadow: 0 1px 0 var(--line-light); }
.top-in { position: relative; height: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.wordmark { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; text-decoration: none; color: var(--gold); line-height: 1; }
.wm-name { font: 500 25px/1 var(--serif); letter-spacing: 0.24em; margin-right: -0.24em; }
.wm-sub {
  display: flex; align-items: center; gap: 8px; margin-top: 5px;
  font: 500 9px/1 var(--sans); letter-spacing: 0.42em; text-transform: uppercase; margin-right: -0.42em;
}
.wm-sub::before, .wm-sub::after { content: ''; width: 16px; height: 1px; background: currentColor; opacity: .8; }

.nav { display: flex; align-items: center; }
/* Deux liens centrés vers les pages d'univers ; la page courante est soulignée d'un filet or de 1 px */
.nav-liens { position: absolute; left: 50%; top: 0; height: 100%; translate: -50% 0; display: flex; align-items: center; gap: 12px; }
.nav-lien {
  position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px;
  color: rgba(250, 248, 244, 0.88); font: 500 15px/1 var(--sans); text-decoration: none; transition: color .2s;
}
.nav-lien::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 10px; height: 1px; background: var(--gold); scale: 0 1; transition: scale .2s ease; }
.nav-lien:hover { color: var(--gold-light); }
.nav-lien[aria-current="page"] { color: var(--ivory); }
.nav-lien[aria-current="page"]::after { scale: 1 1; }
.nav-cta { min-height: 44px; padding: 0 20px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .nav-lien::after { transition: none; } }

.burger { display: none; width: 48px; height: 48px; border: 1px solid var(--line-light); border-radius: 999px; background: transparent; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 14px; right: 14px; height: 1.5px; background: var(--gold-light); transition: transform .3s var(--ease-premium); }
.burger span:first-child { top: 19px; }
.burger span:last-child { top: 27px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ═══════════ HERO ═══════════ */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(60% 60% at 82% 30%, rgba(185, 154, 94, 0.16), transparent 70%),
    linear-gradient(180deg, var(--navy-deep), var(--navy) 60%, var(--navy-deep));
  color: var(--ivory);
  padding: calc(var(--header-h) + clamp(20px, 4vh, 48px)) 0 clamp(36px, 5vh, 56px);
}
/* trame fine, rappel de l'accueil actuel */
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(216, 198, 155, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 198, 155, 0.05) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.hero-mono {
  position: absolute; right: max(-60px, calc((100vw - var(--wrap)) / 2 - 40px)); top: calc(var(--header-h) + 20px);
  width: clamp(220px, 30vw, 420px); pointer-events: none;
  /* fondu : le monogramme s'efface avant les portes Clients / Professionnels */
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 72%);
  mask-image: linear-gradient(180deg, #000 40%, transparent 72%);
}
.hero-mono img { display: block; width: 100%; height: auto; opacity: .06; } /* 17 octobre 2026 : moitié de 0,12, il ne concurrence plus le titre */
/* Les trois traits du Z, relevés sur monogramme.png : invisibles hors de l'ouverture */
.hero-trace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: 0; }
.hero-trace path { vector-effect: non-scaling-stroke; }
.hero-filet { display: block; width: 64px; height: 1px; margin-top: 24px; background: var(--gold); transform-origin: left; }
.hero-in { position: relative; }
.hero .kicker { color: var(--gold); }
.hero h1 { font-size: var(--t-h1); max-width: 24ch; }
.hero h1 em { color: var(--gold); white-space: nowrap; } /* « pour vos clients » jamais coupé */
.lead { font-size: clamp(16.5px, 1.4vw, 19px); color: rgba(250, 248, 244, 0.8); max-width: 62ch; margin: 18px 0 0; }


/* Deux portes, l'une claire (clients, ivoire du site Conseil), l'autre bleu nuit à filet or (professionnels).
   Lien « Découvrir… » étiré sur toute la porte ; survol discret : la porte monte de 2 px, la flèche avance. */
.portes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: clamp(28px, 4.5vh, 44px); }
.porte {
  position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%;
  padding: 28px 30px 26px; border: 1px solid transparent; border-radius: var(--radius);
  transition: translate .5s var(--ease-premium), box-shadow .5s var(--ease-premium), border-color .3s ease;
}
/* filet or au haut de la porte, qui s'allonge au survol */
.porte::before {
  content: ''; position: absolute; left: 30px; top: -1px; width: 96px; height: 2px; background: var(--gold);
  transform-origin: left; scale: .34 1; transition: scale .5s var(--ease-premium);
}
.porte:is(:hover, :has(.porte-lien:focus-visible)) { translate: 0 -4px; }
.porte:is(:hover, :has(.porte-lien:focus-visible))::before { scale: 1 1; }
.porte-clients { background: var(--ivoire-conseil); color: var(--navy); }
.porte-clients:is(:hover, :has(.porte-lien:focus-visible)) { box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.6); }
.porte-pros { background: var(--navy); border-color: var(--gold); color: var(--ivory); }
.porte-pros:is(:hover, :has(.porte-lien:focus-visible)) { border-color: var(--gold-light); box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.7); }
.porte-sur { margin: 0; font: 600 12px/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.porte-clients .porte-sur { color: var(--gold-dark); }
.porte-pros .porte-sur { color: var(--gold-light); }
.porte-titre { margin: 0; font: 500 clamp(26px, 2.5vw, 32px)/1.12 var(--serif); max-width: 26ch; }
.porte-lien {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; min-height: 44px;
  font: 600 15px/1.2 var(--sans); text-decoration: none; color: inherit;
}
.porte-lien span { transition: translate .5s var(--ease-premium); }
.porte-clients .porte-lien span { color: var(--gold-dark); }
.porte-pros .porte-lien span { color: var(--gold); }
.porte:is(:hover, :has(.porte-lien:focus-visible)) .porte-lien span { translate: 8px 0; }
.porte-lien::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.porte-lien:focus-visible { outline: none; }
.porte-lien:focus-visible::after { outline: 2px solid var(--gold); outline-offset: 3px; }
.trust { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 22px; color: rgba(250, 248, 244, 0.6); font-size: 13.5px; letter-spacing: .02em; }
.trust li { display: flex; align-items: center; gap: 10px; }
.trust li + li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); margin-left: -18px; }

/* ═══════════ SECTIONS ═══════════ */
.section { padding: clamp(64px, 8vw, 104px) 0; position: relative; }
.light { background: var(--ivory); }
.white { background: var(--white); }
.navy { background: var(--navy); color: var(--ivory); }
.navy h2 em, .navy h3 em { color: var(--gold); }
.navy .kicker { color: var(--gold); }

.head { max-width: 760px; margin-bottom: clamp(32px, 4.5vw, 56px); }
.head .intro, .intro { font-size: 18px; color: var(--muted); margin-top: 22px; }
.navy .intro { color: rgba(250, 248, 244, 0.76); }
.head-split { max-width: none; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: end; }
.head-split .intro { margin: 0; }

/* ═══════════ LE GROUPE : la maison (société mère → deux pôles → offres) ═══════════
   Direction éditoriale : typographie seule, filets or, listes ; aucune ombre, aucun fond de carte.
   État de base = état final : tout est visible sans JavaScript, à l'impression, en mouvement réduit
   et dans les navigateurs sans animation-timeline (CSS seul, aucun script). */
#groupe { background: var(--cream); padding: clamp(64px, 7.5vw, 96px) 0; }
.maison { margin-top: clamp(40px, 5vw, 64px); }
.maison-sur { margin: 0; font: 600 11px/16px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dark); }
/* même surtitre en tête d'une section d'offre (Associés, sur fond navy : or clair) */
.head .maison-sur { margin-bottom: 16px; }
.navy .maison-sur { color: var(--gold); }

/* Société mère : centrée ; monogramme S or à 5 %, large, derrière le texte */
.maison-mere { position: relative; isolation: isolate; max-width: 640px; margin: 0 auto; text-align: center; }
.maison-mere::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 50%;
  width: clamp(150px, 16vw, 210px); aspect-ratio: 348 / 486; translate: -50% -50%;
  background: url('img/monogramme.png') center / contain no-repeat; opacity: .05; pointer-events: none;
}
.maison-nom { margin: 10px 0 8px; font: 500 clamp(2.5rem, 5vw, 4rem)/1.02 var(--serif); letter-spacing: -.01em; color: var(--navy); }
.maison-desc { margin: 0; font-size: 16px; color: var(--muted); }
.maison-filet { display: block; width: 48px; height: 1px; margin: 24px auto 0; background: var(--gold); transform-origin: left; }

/* Deux pôles, séparés par un filet vertical or (une seule colonne à 375 px) */
.maison-poles { --ecart: clamp(40px, 6vw, 96px); display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--ecart); margin-top: clamp(48px, 6vw, 80px); }
.maison-pole { position: relative; }
.maison-pole + .maison-pole::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--ecart) / -2); width: 1px;
  background: var(--gold); transform-origin: top;
}
.maison-titre { margin: 6px 0 20px; font: 500 clamp(28px, 2.6vw, 34px)/1.15 var(--serif); color: var(--navy); }

/* Offres : liste éditoriale ; une ligne = un lien, filet de 1 px entre les lignes (et au-dessus, au-dessous) */
.maison-offres li { position: relative; }
.maison-offres li::before, .maison-offres li:last-child::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--line); transform-origin: left;
}
.maison-offres li::before { top: 0; }
.maison-offres li:last-child::after { bottom: 0; }
.maison-offre {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 4px; color: var(--charcoal); text-decoration: none;
}
.maison-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.maison-offre-sur { font: 600 11px/16px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dark); }
.maison-offre strong { font: 500 1.5rem/1.2 var(--serif); color: var(--navy); transition: translate .2s ease; }
.maison-promesse { font-size: 15px; line-height: 1.45; color: var(--muted); }
.maison-offre i { flex: none; font: 400 20px/1 var(--sans); font-style: normal; color: var(--navy); transition: color .2s ease, translate .2s ease; }
.maison-offre:hover strong { translate: 6px 0; }
.maison-offre:hover i { color: var(--gold); }
/* focus : or foncé, contraste ≥ 3:1 sur le fond crème */
.maison-offre:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 4px; border-radius: 2px; }

@media (max-width: 640px) {
  .maison-poles { grid-template-columns: 1fr; row-gap: 48px; }
  .maison-pole + .maison-pole::before { display: none; }
}

/* Entrée au défilement : les filets se dessinent (--trait 0 → 1, depuis la gauche ; le filet vertical, --trait-v, depuis le
   haut) et les lignes montent, posés par assets/groupe/mouvement.js. Valeur par défaut 1 : sans JavaScript, tout est tracé. */
.maison-filet, .maison-offres li::before, .maison-offres li:last-child::after { scale: var(--trait, 1) 1; }
.maison-pole + .maison-pole::before { scale: 1 var(--trait-v, 1); }

/* ═══ Blocs texte + visuel ═══ */
.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.split-rev { grid-template-columns: 1.1fr 0.9fr; }
.split-media { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1 / 1; box-shadow: var(--shadow-card); }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-text h2 { margin-bottom: 24px; }
.split-text > p:not(.kicker):not(.fine) { color: var(--muted); font-size: 18px; max-width: 56ch; }

/* ═══ Notre conviction : portrait encadré (repris de l'accueil actuel) ═══ */
.conviction { grid-template-columns: 1.25fr 0.75fr; }
.conviction h2 { font-size: clamp(34px, 4vw, 54px); }
.portrait { margin: 0; justify-self: center; width: min(100%, 400px); }
.portrait-frame {
  padding: 16px; background: var(--white); border: 1px solid var(--cream-deep);
  box-shadow: 0 40px 70px -40px rgba(8, 20, 32, 0.45);
}
.portrait-frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.portrait figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; padding-left: 16px; border-left: 2px solid var(--gold); }
.portrait figcaption strong { font: 500 24px/1.2 var(--serif); color: var(--navy); }
.portrait figcaption span { font: 600 12px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dark); }

.creds { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.creds-main { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.creds-main li { position: relative; padding-left: 28px; font-size: 15.5px; font-weight: 600; color: var(--navy); line-height: 1.4; }
.creds-main li::before {
  content: ''; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8c69b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.creds-status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.creds-status div { display: flex; flex-direction: column; gap: 4px; padding: 12px 10px; border: 1px solid var(--cream-deep); border-radius: 10px; background: var(--cream); text-align: center; }
.creds-status dt { font: 600 20px/1 var(--serif); letter-spacing: .08em; color: var(--navy); }
.creds-status dd { margin: 0; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.creds-note { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.creds-note a { color: var(--navy); }

.links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 15px; font-weight: 500; color: var(--navy); text-decoration: none;
  transition: border-color .2s, background-color .2s;
}
.links a:hover { border-color: var(--gold); background: var(--cream); }

/* ═══ Répartition (80/20, 50/50) ═══ */
.share { margin: 0 0 clamp(36px, 5vw, 56px); }
.share-bar { display: flex; gap: 6px; height: 76px; }
.share-part {
  display: flex; align-items: center; gap: 12px; padding: 0 22px; min-width: 0;
  border-radius: 10px; white-space: nowrap; overflow: hidden;
  font-size: 15px; font-weight: 500;
  flex: 0 1 var(--to);
  transition: flex-basis 1.4s var(--ease-premium);
}
.share-part b { font: 500 34px/1 var(--serif); }
.share-a { background: var(--gold); color: var(--navy); }
.share-b { background: var(--navy-light); color: var(--gold-light); border: 1px solid var(--navy-border); }
.share-note { margin-top: 16px; color: rgba(250, 248, 244, 0.72); font-size: 15.5px; }
/* état de départ de l'animation (posé par le JS, jamais sans lui) */
.share-light { margin: 30px 0 34px; }
.share-light .share-b { background: var(--navy); color: var(--gold-light); border-color: var(--navy); }
.share-light .share-note { color: var(--muted); }

/* ═══ Associés : ce que le groupe apporte (liste compacte) ═══ */
.perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line-light); }
.perks li { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px 4px 0; color: rgba(250, 248, 244, 0.72); font-size: 15px; }
.perks strong { font: 500 22px/1.2 var(--serif); color: var(--ivory); }

/* ═══ Étapes ═══ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line-light); }
.steps li { display: flex; flex-direction: column; gap: 12px; padding: 22px 20px 0 0; font-size: 15.5px; color: rgba(250, 248, 244, 0.86); }
.steps li span { font: 500 34px/1 var(--serif); color: var(--gold); }
.steps-light { grid-template-columns: repeat(2, 1fr); gap: 0 24px; margin-top: 0; border-top-color: var(--line); }
.steps-light li { color: var(--charcoal); padding-bottom: 18px; }
.steps-light li span { color: var(--gold-dark); font-size: 28px; }

/* ═══ Flex ═══ */
.flex { overflow: hidden; }
.flex .wrap { position: relative; }

/* ═══ Démo animée de l'application Zolias Flex (fidèle à l'appli, données fictives) ═══ */
.phone-wrap { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.phone-wrap figcaption { font-size: 13px; color: var(--muted); }
.phone {
  --ph-navy: #0f1b33; --ph-blue: #1f3361; --ph-gold: #c9a65a; --ph-bg: #f4f5f8; --ph-ink: #111a2e; --ph-grey: #6b7280;
  --ph-ease: cubic-bezier(.22, 1, .36, 1);
  position: relative; width: min(100%, 330px); overflow: hidden; isolation: isolate;
  border-radius: 46px; border: 10px solid #0a1220;
  background: var(--ph-bg);
  box-shadow: 0 0 0 1px #24324a, 0 50px 90px -40px rgba(8, 20, 32, 0.7);
  font-family: var(--sans); color: var(--ph-ink);
}
.phone p { margin: 0; }
.phone svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.ph-bar { position: relative; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 18px 18px 14px; background: var(--ph-navy); }
.ph-z { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(201, 166, 90, .55); border-radius: 9px; color: var(--ph-gold); font: 700 19px/1 var(--serif); }
.ph-brand { color: #fff; font: 700 19px/1 var(--serif); letter-spacing: -.01em; }
.ph-brand i { font-style: normal; color: var(--ph-gold); }

/* écrans : l'accueil donne la hauteur, la rémunération glisse par-dessus */
.ph-screen { position: relative; overflow: hidden; }
.ph-view { transition: transform .7s var(--ph-ease), opacity .7s var(--ph-ease); }
.ph-pay { position: absolute; inset: 0; background: var(--ph-bg); padding: 18px 16px; transform: translateX(100%); }

/* — Accueil — */
.ph-hero { padding: 16px 20px 62px; background: linear-gradient(135deg, var(--ph-blue), #1a2747 60%, #232d45); border-radius: 0 0 30px 30px; }
.ph-hello { color: #fff; font: 700 30px/1.1 var(--serif); letter-spacing: -.01em; }
.ph-sub { margin-top: 12px !important; color: rgba(255, 255, 255, .62); font-size: 12.5px; }
.ph-big { display: flex; align-items: center; justify-content: space-between; color: var(--ph-gold); font: 800 34px/1.1 var(--sans); letter-spacing: -.02em; }
.ph-chev { width: 22px; height: 22px; stroke: var(--ph-gold); stroke-width: 2.4; }
.ph-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: -44px 16px 0; position: relative; }
.ph-stats span { display: flex; flex-direction: column; gap: 3px; padding: 12px 11px; background: #fff; border-radius: 16px; color: var(--ph-grey); font-size: 11px; box-shadow: 0 10px 24px -16px rgba(15, 27, 51, .45); }
.ph-stats b { color: var(--ph-ink); font: 800 22px/1.1 var(--sans); margin-top: 6px; transition: color .4s; }
.ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.ic svg { width: 16px; height: 16px; stroke-width: 1.8; }
.ic-gold { background: #f6ecd6; border: 1px solid #e7d3a6; color: #8a6a2a; }
.ic-blue { background: #e6ebfb; border: 1px solid #c9d3f3; color: #2f4bb3; }
.ic-green { background: #e2f2ea; border: 1px solid #bfe0cf; color: #1d6b45; }
.ph-title { padding: 18px 18px 10px; font: 700 19px/1.2 var(--serif); color: var(--ph-ink); }
.ph-list { margin: 0 14px 4px; background: #fff; border-radius: 18px; overflow: hidden; }
.ph-list li { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #eef0f3; transition: background-color .5s; }
.ph-list li:last-child { border-bottom: 0; }
.ph-list li > span { position: relative; display: flex; flex-direction: column; gap: 2px; color: var(--ph-grey); font-size: 11.5px; }
.ph-list b { color: var(--ph-ink); font-size: 13.5px; font-weight: 600; }
.ph-list em { font-style: normal; transition: opacity .4s; }
.ph-list .ph-st-b { position: absolute; left: 0; bottom: 0; opacity: 0; color: #1d6b45; font-weight: 600; }
.ph-list time { color: var(--ph-grey); font-size: 11.5px; }

/* — Rémunération (sans montant) — */
.ph-h1 { font: 700 24px/1.15 var(--serif); color: var(--ph-navy); margin-bottom: 14px !important; }
.ph-card { padding: 18px 16px 16px; border-radius: 20px; background: var(--ph-navy); color: #fff; }
.ph-card-k { color: rgba(255, 255, 255, .62); font-size: 12px; }
.ph-card-v { font: 800 24px/1.2 var(--sans); margin: 2px 0 14px !important; }
.ph-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .08); font-size: 11.5px; line-height: 1.4; color: rgba(255, 255, 255, .85); }
.ph-note svg { width: 18px; height: 18px; flex: none; stroke: var(--ph-gold); stroke-width: 1.7; }
.ph-note b { color: #fff; }
.ph-btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding: 12px; border-radius: 14px; background: var(--ph-gold); color: var(--ph-navy); font-weight: 700; font-size: 13px; }
.ph-btn svg { width: 16px; height: 16px; stroke-width: 2; }
.ph-btn-line { background: #fff; border: 1px solid #e3e6ec; color: var(--ph-ink); font-weight: 600; margin-top: 8px; }
.ph-panel { margin-top: 12px; padding: 14px; border-radius: 18px; background: #fff; }
.ph-panel-t { font: 700 15px/1.2 var(--serif); margin-bottom: 8px !important; }
.ph-panel li { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 8px 0; border-top: 1px solid #eef0f3; font-size: 11.5px; color: var(--ph-grey); }
.ph-panel li b { color: var(--ph-ink); font-size: 13px; font-weight: 600; }
.ph-panel li span { grid-column: 1; }
.ph-panel li time { grid-row: 1 / span 2; grid-column: 2; align-self: center; }

/* — Notification dans l'appli — */
.ph-banner {
  position: absolute; z-index: 4; left: 10px; right: 10px; top: 10px;
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 16px; background: rgba(255, 255, 255, .97);
  box-shadow: 0 14px 30px -14px rgba(15, 27, 51, .55);
  transform: translateY(-140%); transition: transform .6s var(--ph-ease);
}
.ph-banner-z { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--ph-navy); color: var(--ph-gold); font: 700 16px/1 var(--serif); }
.ph-banner > span:last-child { display: flex; flex-direction: column; gap: 1px; }
.ph-banner small { font-size: 10px; color: var(--ph-grey); }
.ph-banner b { font-size: 12.5px; font-weight: 700; color: var(--ph-ink); }

/* — Barre de navigation — */
.ph-nav { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; margin-top: 14px; padding: 10px 6px 14px; background: var(--ph-navy); border-radius: 26px 26px 0 0; }
.ph-nav > span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; color: rgba(255, 255, 255, .62); font-size: 9.5px; transition: color .4s; }
.ph-nav > span > svg { width: 20px; height: 20px; stroke-width: 1.7; }
.ph-nav > span::before { content: ''; position: absolute; top: -10px; width: 22px; height: 3px; border-radius: 2px; background: var(--ph-gold); opacity: 0; transition: opacity .4s; }
.phone:not([data-step="pay"]) .ph-tab-home,
.phone[data-step="pay"] .ph-tab-pay { color: var(--ph-gold); }
.phone:not([data-step="pay"]) .ph-tab-home::before,
.phone[data-step="pay"] .ph-tab-pay::before { opacity: 1; }
.ph-nav .ph-share { color: var(--ph-gold); font-weight: 600; }
.ph-nav .ph-share::before { display: none; }
.ph-share i { position: relative; width: 50px; height: 50px; margin-top: -30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #dcc07f, var(--ph-gold)); box-shadow: 0 0 0 5px #fff; transition: transform .25s var(--ph-ease); }
.ph-share i svg { width: 20px; height: 20px; stroke: var(--ph-navy); stroke-width: 2; }
/* onde de l'appui sur « Partager » */
.ph-share i::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--ph-gold); opacity: 0; }
.ph-dot::after { content: ''; position: absolute; top: -2px; right: calc(50% - 14px); width: 7px; height: 7px; border-radius: 50%; background: var(--ph-gold); }

/* — Fiche « Recommander Zolias Conseil » — */
.ph-backdrop { position: absolute; inset: 0; z-index: 5; background: rgba(15, 27, 51, .45); opacity: 0; pointer-events: none; transition: opacity .5s; }
.ph-sheet {
  position: absolute; z-index: 6; left: 0; right: 0; bottom: 0;
  padding: 10px 16px 18px; border-radius: 26px 26px 0 0; background: #fff;
  transform: translateY(105%); transition: transform .7s var(--ph-ease);
}
.ph-handle { display: block; width: 38px; height: 4px; margin: 0 auto 12px; border-radius: 2px; background: #cfd4de; }
.ph-sheet-t { display: flex; justify-content: space-between; align-items: center; font: 700 17px/1.2 var(--serif); margin-bottom: 12px !important; }
.ph-x { font: 400 22px/1 var(--sans); color: var(--ph-ink); }
.ph-qrcard { display: flex; align-items: stretch; justify-content: space-between; gap: 10px; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, #1f3361, var(--ph-navy)); box-shadow: 0 16px 30px -18px rgba(15, 27, 51, .8); }
.ph-qr-left { display: flex; flex-direction: column; }
.ph-qr-brand { display: flex; align-items: center; gap: 6px; color: #fff; font: 700 14px/1 var(--serif); }
.ph-qr-brand span { color: var(--ph-gold); font-size: 20px; }
.ph-qr-brand i { font-style: normal; color: var(--ph-gold); }
.ph-qr-k { margin-top: auto !important; font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ph-gold); }
.ph-qr-name { color: #fff; font-weight: 700; font-size: 13px; margin-top: 3px !important; }
.ph-qr-box { position: relative; width: 96px; height: 96px; flex: none; padding: 7px; border-radius: 10px; background: #fff; }
.ph-qr-box .qr { width: 100%; height: 100%; display: block; }
.ph-qr-box .qr path { fill: var(--ph-navy); stroke: none; }
.ph-qr-z { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; display: grid; place-items: center; border-radius: 6px; background: var(--ph-navy); color: var(--ph-gold); font: 700 13px/1 var(--serif); box-shadow: 0 0 0 2px #fff; }
.ph-sheet-help { margin: 12px 0 2px !important; text-align: center; font-size: 11.5px; line-height: 1.45; color: var(--ph-ink); }

/* ═══ Les étapes de la démo ═══ */
.phone[data-step="tap"] .ph-share i { transform: scale(.9); }
.phone[data-step="tap"] .ph-share i::after { animation: ph-ripple .7s ease-out; }
.phone[data-step="sheet"] .ph-backdrop { opacity: 1; }
.phone[data-step="sheet"] .ph-sheet { transform: none; }
.phone[data-step="banner"] .ph-banner { transform: none; }
.phone[data-step="banner"] .ph-hot,
.phone[data-step="pay"] .ph-hot { background: #eef7f2; }
.phone[data-step="banner"] .ph-st-a, .phone[data-step="pay"] .ph-st-a { opacity: 0; }
.phone[data-step="banner"] .ph-st-b, .phone[data-step="pay"] .ph-st-b { opacity: 1; }
.phone[data-step="banner"] .ph-signed, .phone[data-step="pay"] .ph-signed { color: #1d6b45; }
.phone[data-step="pay"] .ph-pay { transform: none; }
.phone[data-step="pay"] .ph-home { transform: translateX(-24%); opacity: .4; }
@keyframes ph-ripple { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }

/* lévitation douce du téléphone */
.js .phone-wrap.is-in .phone { animation: ph-float 7s ease-in-out infinite; }
@keyframes ph-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ═══ Pôle clients : cartes d'offres ═══ */
.offers-head { margin: clamp(48px, 6vw, 72px) 0 28px; padding-top: 40px; border-top: 1px solid var(--line); }
.offers-head h3 { font-size: clamp(28px, 3.2vw, 40px); max-width: 24ch; }
.offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.offers > li { display: flex; }
.offer {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
  border-radius: calc(var(--radius) + 4px); background: var(--cream); border: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: transform .45s var(--ease-premium), box-shadow .45s var(--ease-premium), border-color .3s;
}
.offer:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); border-color: var(--gold); }
.offer-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream-deep); }
.offer-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: transform 1.2s var(--ease-premium); }
.offer:hover .offer-media img { transform: scale(1.05); }
.offer-body { flex: 1; display: flex; flex-direction: column; padding: 26px 26px 28px; }
.offer-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font: 600 12px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dark); }
.offer h4 { margin: 0 0 16px; font: 500 28px/1.12 var(--serif); color: var(--navy); }
.ticks { display: flex; flex-direction: column; gap: 9px; margin-bottom: 24px; }
.ticks li { position: relative; padding-left: 22px; font-size: 15.5px; color: var(--muted); line-height: 1.5; }
.ticks li::before { content: ''; position: absolute; left: 0; top: .55em; width: 10px; height: 6px; border-left: 1.5px solid var(--gold-dark); border-bottom: 1.5px solid var(--gold-dark); transform: rotate(-45deg); }
.offer-go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--navy); }
.offer-go span { color: var(--gold-dark); transition: transform .3s var(--ease-premium); }
.offer:hover .offer-go span { transform: translateX(5px); }
.fine-wide { max-width: 100ch; margin-top: 26px; }

/* ═══ Pôle professionnels : comparatif ═══ */
.compare { border-radius: calc(var(--radius) + 4px); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-card); overflow: hidden; }
.cmp-row { display: grid; grid-template-columns: 0.8fr 1fr 1fr; }
.cmp-row > span { padding: 18px 24px; border-top: 1px solid var(--line); font-size: 15.5px; color: var(--charcoal); }
.cmp-row > span[role="rowheader"] { font: 600 12px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: 21px; }
.cmp-row > span:nth-child(3) { background: rgba(185, 154, 94, 0.07); }
.cmp-row b { font: 500 22px/1 var(--serif); color: var(--navy); margin-right: 4px; }
.cmp-headrow > span { border-top: 0; padding-top: 26px; padding-bottom: 22px; }
.cmp-col { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.cmp-col strong { font: 500 26px/1.1 var(--serif); color: var(--navy); }
.cmp-col em { font: 600 14px/1 var(--sans); font-style: normal; color: var(--gold-dark); letter-spacing: .06em; }
.cmp-ctarow > span { padding-top: 22px; padding-bottom: 26px; }
.cmp-ctarow .btn { width: 100%; }

/* ═══ FAQ ═══ */
.faq-in { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq .head { margin-bottom: 0; position: sticky; top: calc(var(--header-h) + 32px); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 22px 48px 22px 0; min-height: 48px;
  font: 500 22px/1.3 var(--serif); color: var(--navy);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -9px;
  border-right: 1.5px solid var(--gold-dark); border-bottom: 1.5px solid var(--gold-dark);
  transform: rotate(45deg); transition: transform .3s var(--ease-premium);
}
.faq-list details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq-list summary:hover { color: var(--gold-dark); }
.faq-list details p { margin: 0 0 22px; color: var(--muted); font-size: 16.5px; max-width: 64ch; }

/* ═══ Clôture ═══ */
.close { text-align: center; }
.close .kicker { justify-content: center; }
.close-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 48px 0 40px; text-align: left; }
.close-card {
  display: flex; flex-direction: column; gap: 10px; padding: 28px 26px;
  border: 1px solid var(--navy-border); border-radius: var(--radius);
  text-decoration: none; transition: border-color .3s, background-color .3s;
}
.close-card:hover { border-color: var(--gold); background: rgba(22, 48, 74, 0.6); }
.close-card span { font: 600 12px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-light); }
.close-card strong { font: 500 26px/1.15 var(--serif); }
.close-card { position: relative; }
.close-card i { position: absolute; right: 24px; bottom: 26px; font-style: normal; color: var(--gold); transition: transform .3s var(--ease-premium); }
.close-card:hover i { transform: translateX(5px); }
/* Autant de colonnes que de cartes affichées (les cartes des sites non publiés sont masquées) : deux cartes côte à côte et
   centrées ; une seule carte (règle de secours) : centrée, à la largeur d'une carte. Sous 921 px : une colonne pleine largeur. */
@media (min-width: 921px) {
  /* exactement deux cartes affichées */
  .close-grid:has(> .close-card:not([hidden]) ~ .close-card:not([hidden])):not(:has(> .close-card:not([hidden]) ~ .close-card:not([hidden]) ~ .close-card:not([hidden]))) { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; }
  /* une seule carte affichée */
  .close-grid:not(:has(> .close-card:not([hidden]) ~ .close-card:not([hidden]))) { grid-template-columns: minmax(0, 360px); justify-content: center; }
}
.close-direct { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 14px; color: rgba(250, 248, 244, 0.72); font-size: 15.5px; }
.close-direct a { text-decoration: none; padding: 10px 0; }
.close-direct a:hover { color: var(--gold-light); }

/* ═══ Barre d'action mobile (visible sous 920 px, après le hero) ═══ */
.mbar { display: none; }

/* ═══════════ PIED DE PAGE ═══════════ */
.foot { background: var(--navy-deep); color: rgba(250, 248, 244, 0.72); padding: 72px 0 40px; font-size: 15px; }
.foot-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 40px; border-bottom: 1px solid var(--navy-border); }
.foot-cols { display: flex; gap: clamp(40px, 8vw, 120px); flex-wrap: wrap; }
.foot-cols div { display: flex; flex-direction: column; gap: 2px; }
.foot-cols a { text-decoration: none; padding: 8px 0; }
.foot-cols a:hover { color: var(--gold-light); }
.foot-h { font: 600 12px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.legal { padding-top: 32px; font-size: 13.5px; line-height: 1.7; color: rgba(250, 248, 244, 0.58); max-width: 92ch; }
.legal a { color: var(--gold-light); }
.legal p { margin-bottom: 10px; }
.copy { margin-top: 20px; }

/* ═══════════ APPARITIONS AU DÉFILEMENT ═══════════
   Aucun état caché en CSS : les éléments .reveal sont posés en JavaScript (assets/groupe/mouvement.js), au premier geste de
   défilement, s'ils sont encore sous l'écran ; sans JavaScript, à l'impression et en mouvement réduit, tout est visible. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .phone-wrap.is-in .phone { animation: none; }
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1080px) {
  .perks { grid-template-columns: repeat(2, 1fr); }
  .nav { gap: 20px; }
}

@media (max-width: 920px) {
  .mbar {
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40;
    display: flex; align-items: center; gap: 10px; padding: 8px;
    background: rgba(8, 20, 32, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--navy-border); border-radius: 999px;
    box-shadow: 0 16px 40px -16px rgba(8, 20, 32, 0.7);
    transform: translateY(140%); transition: transform .45s var(--ease-premium);
  }
  .mbar.on { transform: none; }
  .mbar .btn { flex: 1; min-height: 48px; padding: 0 16px; white-space: nowrap; font-size: 14.5px; }
  .mbar-alt { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; color: var(--gold-light); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
  .foot { padding-bottom: 110px; }
  .faq-in { grid-template-columns: 1fr; }
  .faq .head { position: static; }
  .burger { display: block; }
  /* Menu mobile : panneau plein écran ivoire sous la barre, trois liens empilés (Clients, Professionnels, rendez-vous) */
  .nav {
    position: fixed; inset: var(--header-h) 0 0; flex-direction: column; align-items: stretch;
    padding: 24px var(--gutter) calc(24px + env(safe-area-inset-bottom)); background: var(--ivory); overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility 0s .18s;
  }
  .nav.open { opacity: 1; visibility: visible; transition: opacity .18s ease, visibility 0s; }
  .nav-liens { position: static; translate: none; height: auto; flex-direction: column; align-items: stretch; gap: 0; border-bottom: 1px solid var(--line); }
  .nav-liens li { border-top: 1px solid var(--line); }
  .nav-lien { display: flex; min-height: 64px; padding: 0 2px; color: var(--navy); font: 500 1.5rem/1.2 var(--serif); }
  .nav-lien::after { left: 2px; right: auto; width: 32px; bottom: 12px; }
  .nav-lien:hover { color: var(--navy); }
  .nav-lien[aria-current="page"] { color: var(--navy); }
  .nav-cta { margin-top: 24px; min-height: 52px; }
  html.menu-ouvert { overflow: hidden; }

  .portes { grid-template-columns: 1fr; }
  .porte { padding: 24px 22px 20px; }

  .head-split, .split, .split-rev { grid-template-columns: 1fr; }
  .split-media { aspect-ratio: 16 / 10; }
  .conviction .portrait { order: -1; width: 100%; justify-self: stretch; }
  .conviction .portrait-frame { max-width: 260px; }
  .split-rev .phone-wrap { order: 2; }

  .offers { grid-template-columns: 1fr; gap: 16px; }
  .offer { flex-direction: row; }
  .offer-media { aspect-ratio: auto; width: 34%; flex: none; position: relative; }
  .offer-media img { position: absolute; inset: 0; }
  /* comparatif : une colonne par offre, libellés repris dans chaque cellule */
  .cmp-empty, .cmp-row > span[role="rowheader"] { display: none !important; }
  .cmp-headrow > span { padding: 20px 18px 14px; }
  .compare { display: grid; grid-template-columns: 1fr 1fr; }
  .cmp-row { display: contents; }
  .cmp-row > span[data-col] { grid-column: auto; }
  .cmp-row > span[data-col]::before { content: attr(data-label); display: block; margin-bottom: 4px; font: 600 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dark); }
  .cmp-row > span { padding: 16px 18px; font-size: 14.5px; }

  .close-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 0 20px; }
  .steps li { padding-bottom: 18px; }
}

@media (max-width: 560px) {
  .wm-name { font-size: 22px; }
  .hero-mono { width: 150px; opacity: .05; right: -56px; top: calc(var(--header-h) - 6px); }
  .portes { gap: 12px; }
  .porte { padding: 20px 20px 14px; gap: 8px; }
  .porte-sur { font-size: 11px; }
  .porte-titre { font-size: 25px; }
  .perks { grid-template-columns: 1fr; }
  .perks li { padding: 16px 0 0; }
  .steps, .steps-light { grid-template-columns: 1fr; }
  /* la barre garde ses proportions : chiffre au-dessus, libellé dessous */
  .share-part { flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; padding: 0 10px; white-space: normal; }
  .share-part b { font-size: 23px; white-space: nowrap; }
  .share-part .lbl { font-size: 12px; line-height: 1.2; }
  .ctas .btn { width: 100%; }
  .faq-list summary { font-size: 20px; }
  .offer { flex-direction: column; }
  .offer-media { width: auto; aspect-ratio: 16 / 9; }
  .offer-media img { position: static; }
  .trust { gap: 8px 22px; font-size: 12.5px; }
  .compare { grid-template-columns: 1fr; }
  /* une colonne : tout Associés, puis tout Flex */
  .cmp-headrow > span:nth-child(2) { order: 0; }
  .cmp-row > span[data-col="Associés"] { order: 1; }
  .cmp-ctarow > span:nth-child(2) { order: 2; }
  .cmp-headrow > span:nth-child(3) { order: 3; border-top: 1px solid var(--line); }
  .cmp-row > span[data-col="Flex"] { order: 4; }
  .cmp-ctarow > span:nth-child(3) { order: 5; }
}

/* ═══════════════════════════════════════════════════════════
   PAGES LÉGALES (/legal/…) — même charte, lecture longue
   ═══════════════════════════════════════════════════════════ */
.legal-page .top { box-shadow: 0 1px 0 var(--line-light); }

/* ═══════════ PAGES D'UNIVERS (/clients/, /professionnels/) ═══════════
   Hero typographique navy (H1 révélé ligne par ligne, monogramme en parallaxe), puis la liste éditoriale des offres
   de la section « Le groupe » (classes .maison-*), numérotée, avec fond et mot-fantôme au survol sur ordinateur.
   État de base = état final : tout est visible sans JavaScript, à l'impression et en mouvement réduit. */
.univers-hero {
  position: relative; z-index: 1; /* le monogramme déborde de 120 px sur la section ivoire, par-dessus son fond */
  background: linear-gradient(180deg, var(--navy-deep), var(--navy)); color: var(--ivory);
  padding: calc(var(--header-h) + clamp(40px, 6vw, 80px)) 0 clamp(56px, 7vw, 96px);
}
.univers-hero .wrap { position: relative; z-index: 1; }
/* Monogramme S or à 6 % : 70 % de la hauteur du hero, calé à droite, chevauche la frontière navy / ivoire de 120 px */
.univers-hero::after {
  content: ''; position: absolute; z-index: 0; bottom: -120px; right: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  height: 70%; aspect-ratio: 348 / 486;
  background: url('img/monogramme.png') center / contain no-repeat; opacity: .06; pointer-events: none;
}
.univers-hero .maison-sur { color: var(--gold); }
.univers-filet { display: block; width: 48px; height: 1px; margin-top: 14px; background: var(--gold); transform-origin: left; }
.univers-hero h1 { margin: 20px 0 0; font-size: var(--t-h1); max-width: 18ch; }
.univers-ligne { display: block; }
.mot { display: inline-block; }
.univers-hero h1 em { color: var(--gold); }
/* Ouverture typographique : grand titre, filet or, et un mot en filigrane (serif italique géant, or à 7 %), calé en bas à droite */
.univers-hero-typo { overflow: hidden; }
.univers-hero-typo::after { display: none; }
.univers-filigrane {
  transform-origin: right bottom; position: absolute; z-index: 0; right: -.04em; bottom: -.22em; pointer-events: none; user-select: none; white-space: nowrap;
  font: italic 400 clamp(120px, 21vw, 300px)/.9 var(--serif); letter-spacing: -.03em; color: rgba(216, 190, 138, 0.07);
}
.univers-hero .lead { margin-bottom: 32px; }
.fil ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; font-size: 14px; color: rgba(250, 248, 244, 0.72); }
.fil li + li::before { content: '/'; margin-right: 8px; color: var(--gold); }
.fil a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; color: inherit; text-decoration: none; }
.fil a:hover { color: var(--gold-light); }
.fil [aria-current="page"] { color: var(--ivory); }

/* Liste des offres : section ivoire, lignes sur toute la largeur du conteneur, numérotées 01, 02, 03… */
.univers-offres { background: var(--ivory); padding: clamp(64px, 7.5vw, 96px) 0; }
.univers-offres .maison-offres { counter-reset: offre; }
.univers-offres .maison-offres li { counter-increment: offre; }
.univers-offres .maison-offre {
  display: grid; grid-template-columns: 2.5rem minmax(0, auto) 1fr auto; align-items: baseline; column-gap: 16px;
  margin: 0 -16px; padding: 20px 16px;
}
.univers-offres .maison-offre::before {
  content: counter(offre, decimal-leading-zero); content: counter(offre, decimal-leading-zero) / '';
  font: 600 11px/16px var(--sans); letter-spacing: .16em; color: var(--gold-dark);
}
.univers-offres .maison-offre i { align-self: center; grid-column: 4; }
/* Bloc réglementaire : filet or vertical de 2 px, 15 px gris, 65 caractères par ligne au plus */
.univers-cadre { margin-top: clamp(48px, 6vw, 72px); padding-left: 20px; border-left: 2px solid var(--gold); }
.univers-cadre p { max-width: 65ch; margin: 0; font-size: 15px; color: var(--muted); }
.univers-cadre a { color: var(--navy); }

/* Mouvement : révélation du hero au chargement, parallaxe du monogramme au défilement (CSS seul) */
@keyframes univers-ligne { from { clip-path: inset(0 0 100% 0); translate: 0 .35em; } to { clip-path: inset(-.1em -.1em -.25em -.1em); translate: 0 0; } }
@keyframes univers-fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes univers-parallaxe { from { translate: 0 -24px; } to { translate: 0 24px; } }
@keyframes univers-estompe { from { opacity: .06; } to { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .univers-ligne { animation: univers-ligne .5s var(--ease-premium) both; }
  .univers-ligne:nth-child(1) { animation-delay: .2s; }
  .univers-ligne:nth-child(2) { animation-delay: .32s; }
  .univers-ligne:nth-child(3) { animation-delay: .44s; }

  @supports (animation-timeline: scroll()) {
    /* parallaxe sur le défilement de la page ; estompage 6 % → 0 entre le moment où le hero quitte l'écran (son bas passe
       le haut de la fenêtre) et 200 px plus bas : timeline du hero, dont la zone de vue est prolongée de 200 px vers le haut */
    .univers-hero { view-timeline: --univers-hero block; view-timeline-inset: -200px 0px; }
    .univers-hero::after {
      animation: univers-parallaxe linear both, univers-estompe linear both;
      animation-timeline: scroll(root block), --univers-hero;
      animation-range: normal, exit calc(100% - 200px) exit 100%;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .maison-offre strong, .maison-offre i, .maison-ecrire, .univers-fantome > span { translate: none !important; }
}
@media print {
  .univers-filet, .univers-ligne, .mot, .hero-entree, .univers-hero .lead, .univers-hero .btn, .univers-hero::after { animation: none !important; clip-path: none !important; opacity: 1 !important; translate: none !important; scale: none !important; }
  .univers-hero::after { opacity: .06 !important; }
}
.lp-head { background: linear-gradient(180deg, var(--navy-deep), var(--navy)); color: var(--ivory); padding: calc(var(--header-h) + 56px) 0 56px; }
.lp-head .kicker { color: var(--gold); }
.lp-head h1 { font-size: clamp(36px, 4.4vw, 56px); }
.lp-head p { color: rgba(250, 248, 244, 0.72); margin: 16px 0 0; max-width: 64ch; }
.lp-body { padding: clamp(48px, 6vw, 80px) 0 clamp(64px, 8vw, 104px); background: var(--white); }
.lp-grid { display: grid; grid-template-columns: 240px 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.lp-toc { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; }
.lp-toc p { font: 600 12px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.lp-toc a { padding: 8px 0 8px 14px; border-left: 2px solid var(--line); color: var(--charcoal); text-decoration: none; }
.lp-toc a:hover, .lp-toc a[aria-current="page"] { border-color: var(--gold); color: var(--navy); }
.lp-grid > * { min-width: 0; }
.lp-content { max-width: 760px; }
.lp-content h2 { font-size: clamp(26px, 2.6vw, 32px); margin: 48px 0 16px; padding-top: 8px; color: var(--navy); scroll-margin-top: calc(var(--header-h) + 24px); }
.lp-content h2:first-child { margin-top: 0; }
.lp-content h3 { font: 600 17px/1.4 var(--sans); margin: 26px 0 8px; color: var(--navy); }
.lp-content p, .lp-content li { color: var(--charcoal); font-size: 16.5px; }
.lp-content ul { list-style: disc; padding-left: 22px; margin: 0 0 1em; }
.lp-content li { margin-bottom: 6px; }
.lp-content a { color: var(--navy); text-underline-offset: 3px; }
.lp-content dl { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 10px 20px; margin: 0 0 1em; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ivory); }
.lp-content dt { font-weight: 600; color: var(--navy); font-size: 15px; }
.lp-content dd { margin: 0; font-size: 15.5px; }
.lp-table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: 14.5px; }
.lp-table th, .lp-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.lp-table th { font: 600 12px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--ivory); }
.lp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lp-note { padding: 16px 18px; border-left: 3px solid var(--gold); background: var(--cream); border-radius: 0 10px 10px 0; font-size: 15.5px; }
.lp-todo { background: #fff4d6; padding: 1px 6px; border-radius: 4px; font-weight: 600; color: #6b4e00; }
.lp-updated { margin-top: 48px; font-size: 14px; color: var(--muted); }
@media (max-width: 920px) {
  .lp-grid { grid-template-columns: 1fr; }
  .lp-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .lp-toc p { width: 100%; margin-bottom: 0; }
  .lp-toc a { border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; min-height: 44px; display: inline-flex; align-items: center; }
  .lp-content dl { grid-template-columns: 1fr; gap: 2px 0; }
  .lp-content dd { margin-bottom: 10px; }
}
@media (max-width: 640px) {
  /* tableaux en fiches : chaque cellule reprend l'intitulé de sa colonne */
  .lp-table thead { display: none; }
  .lp-table, .lp-table tbody, .lp-table tr, .lp-table td { display: block; width: 100%; }
  .lp-table tr { margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .lp-table td { border-bottom: 1px solid var(--line); padding: 10px 14px; }
  .lp-table td:last-child { border-bottom: 0; }
  .lp-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 600 11px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dark); }
  .lp-table td:first-child { background: var(--ivory); font-weight: 600; color: var(--navy); }
}

/* ═══ Site non publié (publie: false dans docs/sites.json) : scripts/sites.mjs retire le href de ses liens et pose
   l'attribut hidden sur ses boutons et cartes d'appel ; cette règle l'emporte sur les display des composants.
   publie: true rétablit liens et boutons sans retouche. ═══ */
[hidden] { display: none !important; }
/* Sans href, le texte reste lisible mais ne ressemble plus à un lien : ni flèche, ni « Découvrir… », ni effet de survol. */
a[data-site]:not([href]) { cursor: auto; text-decoration: none; }
.maison-offre:not([href]) i, .offer:not([href]) .offer-go { display: none; }
.maison-offre:not([href]):hover strong { translate: none; }
.univers-offres .maison-offre:not([href]):hover { background: none; }
.univers-offres .maison-offre:not([href]) .univers-fantome { display: none; }
.offer:not([href]):hover { transform: none; box-shadow: none; border-color: var(--line); }
.offer:not([href]):hover .offer-media img { transform: none; }
/* Rangée ou groupe de boutons dont tous les boutons sont masqués : rien ne reste à l'écran (pas de marge vide). */
.ctas:not(:has(a:not([hidden]))), .cmp-ctarow:not(:has(a:not([hidden]))) { display: none; }

/* ═══ Survol et focus clavier des lignes, sans image ═══
   Le fond se remplit depuis la gauche (clip-path, 0,6 s), le mot en filigrane entre par la droite derrière son masque en
   resserrant son interlettrage, le numéro passe en or, le titre glisse de 8 px, la flèche avance. Même courbe à la sortie.
   Mouvement réduit : mêmes états, sans déplacement (règle globale + translate: none). */
.maison-offre { position: relative; isolation: isolate; }
.maison-offre::after {
  content: ''; position: absolute; inset: 0; z-index: -2; background: var(--cream-deep);
  clip-path: inset(0 100% 0 0); transition: clip-path .6s var(--ease-premium);
}
/* accueil : marge à droite pour que la flèche avance sans sortir du fond */
.maison .maison-offre { padding-right: 14px; }
.maison-offre strong, .maison-offre i, .maison-ecrire { transition: translate .6s var(--ease-premium), color .3s ease; }
.univers-offres .maison-offre::before { transition: color .3s ease; }
.univers-fantome { overflow: hidden; white-space: nowrap; pointer-events: none; font: 500 4rem/1.15 var(--serif); color: rgba(185, 154, 94, 0.16); }
.univers-fantome > span {
  display: inline-block; opacity: 0; translate: 45% 0; letter-spacing: .14em;
  transition: opacity .6s var(--ease-premium), translate .6s var(--ease-premium), letter-spacing .6s var(--ease-premium);
}
.univers-offres .univers-fantome { grid-column: 3; justify-self: end; align-self: center; max-width: 100%; }
.maison .univers-fantome { position: absolute; z-index: -1; right: 44px; top: 50%; translate: 0 -50%; max-width: 62%; font-size: 3rem; }
.maison .maison-texte { position: relative; }
@media (max-width: 920px) { .univers-fantome { display: none; } }
@supports selector(:focus-visible) {
  .maison-offre[href]:focus-visible::after { clip-path: inset(0 0 0 0); }
  .maison-offre[href]:focus-visible .univers-fantome > span { opacity: 1; translate: 0 0; letter-spacing: -.01em; }
  .maison-offre[href]:focus-visible strong { translate: 8px 0; }
  .maison-offre[href]:focus-visible i, .maison-offre[href]:focus-visible .maison-ecrire { translate: 6px 0; }
  .maison-offre[href]:focus-visible i { color: var(--gold-dark); }
  .univers-offres .maison-offre[href]:focus-visible::before { color: var(--gold); }
}
@media (hover: hover) {
  .maison-offre[href]:hover::after { clip-path: inset(0 0 0 0); }
  .maison-offre[href]:hover .univers-fantome > span { opacity: 1; translate: 0 0; letter-spacing: -.01em; }
  .maison-offre[href]:hover strong { translate: 8px 0; }
  .maison-offre[href]:hover i, .maison-offre[href]:hover .maison-ecrire { translate: 6px 0; }
  .maison-offre[href]:hover i { color: var(--gold-dark); }
  .univers-offres .maison-offre[href]:hover::before { color: var(--gold); }
}

/* Ligne vers la page Contact (repli d'un site non publié) : « Nous écrire » à la place de la flèche */
.maison-ecrire { display: none; }
.maison-offre[href^="/contact/"] i { display: none; }
.maison-offre[href^="/contact/"] .maison-ecrire {
  display: inline; flex: none; align-self: center; grid-column: 4; position: relative; z-index: 1;
  font: 600 12px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dark);
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}

/* ═══ /professionnels/ : les deux formules, côte à côte, séparées par un filet or vertical ═══ */
.formules-section { background: var(--white); }
.formules-section h2 { max-width: 20ch; margin-bottom: clamp(36px, 5vw, 64px); }
.formules { --ecart: clamp(40px, 6vw, 96px); display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--ecart); }
.formule { position: relative; }
.formule + .formule::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--ecart) / -2); width: 1px; background: var(--gold); }
.formule-ratio { margin: 0; font: 500 clamp(56px, 7vw, 88px)/1 var(--serif); color: var(--gold-dark); letter-spacing: -.02em; }
.share-formule { margin: 22px 0 0; }
.share-formule .share-bar { height: 72px; }
/* colonnes étroites : chiffre et libellé empilés, pour que « Zolias » tienne dans les 20 % */
.share-formule .share-part { flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; padding: 0 12px; white-space: nowrap; overflow: hidden; }
.share-formule .share-part b { font-size: 24px; }
.share-formule .share-part .lbl { font-size: 12.5px; line-height: 1.2; }
.formule h3 { margin: 26px 0 4px; font: 500 clamp(26px, 2.4vw, 32px)/1.15 var(--serif); color: var(--navy); }
.formule-pour { margin: 0 0 24px; color: var(--muted); }
.formule-points li { padding: 18px 0; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.6; color: var(--charcoal); }
.formule-points strong { display: block; margin-bottom: 4px; font-weight: 600; color: var(--navy); }
@media (max-width: 760px) {
  .formules { grid-template-columns: 1fr; row-gap: 56px; }
  .formule + .formule::before { display: none; }
}

/* ═══ /professionnels/ : « Parlons de votre projet » ═══ */
.projet-in { text-align: center; }
.projet h2 { margin: 0 auto; }
.projet .intro { max-width: 52ch; margin: 18px auto 32px; }
.projet .close-direct { margin-top: 28px; }

/* ═══ Ouverture (accueil et pages d'univers) ═══
   L'état caché n'existe qu'avec la classe .ouverture, posée par le script d'ouverture de chaque page (mouvement réduit : jamais).
   Titre ligne par ligne derrière un masque (--l = rang de la ligne), filet or qui se dessine ; sur l'accueil, les trois traits du Z
   se tracent l'un après l'autre puis le monogramme prend le relais en filigrane, et les deux portes arrivent de côtés opposés.
   Remplissage « backwards » : une fois l'entrée finie, les styles ordinaires (survol, parallaxe) reprennent la main. */
@keyframes ouv-ligne { from { clip-path: inset(0 0 100% 0); translate: 0 .55em; } to { clip-path: inset(-.15em -.1em -.3em -.1em); translate: 0 0; } }
@keyframes ouv-filet { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes ouv-fondu { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes ouv-gauche { from { opacity: 0; translate: -56px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes ouv-droite { from { opacity: 0; translate: 56px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes ouv-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ouv-trace-fond { 0% { opacity: 1; } 68% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ouv-mono { from { opacity: 0; } to { opacity: .06; } }
/* resserrement par scale (et non letter-spacing, qui décalerait la mise en page) */
@keyframes ouv-filigrane { from { opacity: 0; translate: 6% 0; scale: 1.08 1; } to { opacity: 1; translate: 0 0; scale: 1 1; } }
@media (prefers-reduced-motion: no-preference) {
  .ouverture h1 .mot { animation: ouv-ligne .9s var(--ease-premium) backwards; animation-delay: calc(.15s + var(--l, 0) * .14s); }
  .ouverture .hero-filet, .ouverture .univers-filet { animation: ouv-filet 1s var(--ease-premium) .55s backwards; }
  .ouverture .lead { animation: ouv-fondu .8s var(--ease-premium) .7s backwards; }
  .ouverture .univers-texte > .btn { animation: ouv-fondu .8s var(--ease-premium) .85s backwards; }
  .ouverture .porte-clients { animation: ouv-gauche 1s var(--ease-premium) .8s backwards; }
  .ouverture .porte-pros { animation: ouv-droite 1s var(--ease-premium) .9s backwards; }
  .ouverture .trust { animation: ouv-fondu .8s var(--ease-premium) 1.1s backwards; }
  .ouverture .hero-trace { animation: ouv-trace-fond 3.3s ease forwards; }
  .ouverture .hero-trace path { stroke-dasharray: 1; animation: ouv-trace .75s cubic-bezier(.65, 0, .35, 1) backwards; }
  .ouverture .hero-trace path:nth-child(1) { animation-delay: .2s; }
  .ouverture .hero-trace path:nth-child(2) { animation-delay: .85s; }
  .ouverture .hero-trace path:nth-child(3) { animation-delay: 1.5s; }
  .ouverture .hero-mono img { animation: ouv-mono 1.3s ease 1.9s backwards; }
  .ouverture .univers-filigrane { animation: ouv-filigrane 1.8s var(--ease-premium) .3s backwards; }
}
@media print {
  .ouverture *, .ouverture { animation: none !important; }
  .hero-trace { display: none; }
}

/* ═══ Bandeau de mots (accueil, une seule fois) : serif fin, immobile sans JavaScript ; mouvement.js le fait avancer avec le
   défilement, dans son sens (aucun mouvement automatique : rien à mettre en pause) ═══ */
.bandeau { overflow: hidden; background: var(--white); border-block: 1px solid var(--line); padding: clamp(20px, 3vw, 34px) 0; }
.bandeau-piste { display: flex; width: max-content; white-space: nowrap; }
.bandeau-piste span { font: 400 clamp(40px, 6.4vw, 92px)/1.05 var(--serif); letter-spacing: -.015em; color: rgba(11, 28, 45, 0.86); }
.bandeau-piste span::after { content: '·'; display: inline-block; margin: 0 .42em; color: var(--gold); }
.bandeau-piste span:nth-child(even) { font-style: italic; color: var(--gold-dark); }

/* ═══ Navigation entre les pages : fondu (View Transitions, navigateurs qui la gèrent) ; l'en-tête reste en place ═══ */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  .top { view-transition-name: entete; }
}

/* ═══ Surfaces du navigateur : sélection et curseur de saisie aux couleurs du groupe ═══ */
::selection { background: var(--gold-light); color: var(--navy); }
.navy ::selection, .hero ::selection, .univers-hero ::selection { background: var(--gold); color: var(--navy-deep); }
:root { caret-color: var(--gold-dark); }

/* ═══════════ PAGE CONTACT ═══════════ */
/* Ouverture : les deux cartes « Par où commencer ? » sous le titre, alignées sur le texte */
.contact-hero { padding-bottom: clamp(56px, 7vw, 88px); }
.contact-portes { display: grid; grid-template-columns: repeat(2, minmax(0, 400px)); gap: 16px; margin-top: clamp(32px, 4vw, 48px); position: relative; z-index: 1; }
@media (max-width: 760px) { .contact-portes { grid-template-columns: 1fr; } }

/* Formulaire « professionnels » : en-tête à gauche, formulaire à droite sur ordinateur ; une colonne sur mobile */
.contact-formulaire { background: var(--white); scroll-margin-top: calc(var(--header-h) + 8px); }
.contact-formulaire-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact-formulaire-tete h2 { max-width: 14ch; }
@media (max-width: 920px) { .contact-formulaire-in { grid-template-columns: 1fr; } }
.champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
.champ { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.champ-large { grid-column: 1 / -1; }
@media (max-width: 560px) { .champs { grid-template-columns: 1fr; } }
.champ label { font: 600 14px/1.4 var(--sans); color: var(--navy); }
.champ-obligatoire { color: var(--gold-dark); }
.champ input:not([type="checkbox"]), .champ select, .champ textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid rgba(11, 28, 45, 0.28); border-radius: 10px;
  background: var(--white); color: var(--charcoal); font: 400 16px/1.4 var(--sans);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.champ textarea { min-height: 150px; resize: vertical; }
.champ select { appearance: none; padding-right: 40px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a6230' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat; }
.champ input:not([type="checkbox"]):hover, .champ select:hover, .champ textarea:hover { border-color: rgba(11, 28, 45, 0.5); }
.champ input:not([type="checkbox"]):focus-visible, .champ select:focus-visible, .champ textarea:focus-visible {
  outline: none; border-color: var(--gold-dark); box-shadow: 0 0 0 3px rgba(185, 154, 94, 0.35); border-radius: 10px;
}
.champ [aria-invalid="true"] { border-color: var(--erreur) !important; }
.champ-aide { margin: 0; font-size: 13.5px; color: var(--muted); }
.champ-erreur { margin: 0; font: 600 13.5px/1.4 var(--sans); color: var(--erreur); }
.champ-erreur::before { content: '!'; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 8px; border-radius: 50%; background: var(--erreur); color: var(--white); font-size: 11px; vertical-align: 1px; }
.champ-case { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: start; }
.champ-case input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--navy); }
.champ-case label { font-weight: 500; color: var(--charcoal); line-height: 1.5; }
.champ-case .champ-erreur { grid-column: 2; }
/* Champ piège : hors de l'écran, jamais atteint au clavier */
.champ-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.champs-note { margin: 18px 0 0; font-size: 13.5px; color: var(--muted); }
.formulaire-envoi { margin-top: 22px; }
.formulaire-envoi .btn[disabled] { opacity: .65; cursor: progress; transform: none; }
.formulaire-statut { margin: 18px 0 0; padding: 14px 16px; border-radius: 10px; font-weight: 600; font-size: 15px; }
.formulaire-statut-erreur, .formulaire-statut-champs { background: rgba(154, 43, 34, 0.07); color: var(--erreur); }
.formulaire-statut a { color: inherit; }
.formulaire-rgpd { max-width: 70ch; }
.formulaire-rgpd a { color: var(--navy); }
.formulaire-merci { padding: clamp(28px, 4vw, 40px); border-radius: var(--radius); background: var(--cream); border-top: 2px solid var(--gold); }
.formulaire-merci:focus { outline: none; }
.formulaire-merci-titre { margin: 0; font: 500 clamp(24px, 2.4vw, 30px)/1.25 var(--serif); color: var(--succes); }