/* =============================================================================
   SAMUEL RUSSO FINANCE — SYSTÈME VISUEL
   -----------------------------------------------------------------------------
   1. Tokens (couleurs, typographie, espacements)
   2. Reset & base
   3. Typographie éditoriale
   4. Layout & utilitaires
   5. Navigation
   6. Boutons / CTA
   7. Sections
   8. Animations (reveal, parallax)
   9. Responsive
   10. Accessibilité / reduced-motion
   ============================================================================= */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  /* Palette */
  --noir:        #0A0A0B;
  --noir-800:    #101012;
  --noir-700:    #16161A;
  --surface:     #1A1A1F;
  --surface-2:   #212128;
  --graphite:    #8A8A93;
  --graphite-2:  #5A5A62;
  --ligne:       rgba(244, 241, 234, 0.10);
  --ligne-forte: rgba(244, 241, 234, 0.20);
  --blanc:       #F4F1EA;
  --blanc-doux:  rgba(244, 241, 234, 0.72);
  --blanc-faible:rgba(244, 241, 234, 0.46);

  /* Accent — brass / or, utilisé avec parcimonie */
  --accent:      #C6A15B;
  --accent-clair:#E4C88A;
  --accent-sombre:#8A6F3A;
  /* Variante d'encre de l'accent, pour du texte doré lisible sur fond clair
     (le doré normal échoue en contraste sur du blanc cassé — voir §section--light) */
  --accent-ink:  #6B5527;
  --ok-ink:      #2F6B4F;  /* confirmation, sur fond clair */
  --err-ink:     #B04632;  /* erreur, sur fond clair */

  /* Deux encres seulement — noir profond et anthracite — qui alternent
     d'une section à l'autre, comme des pages de magazine. Aucune teinte :
     l'or reste le seul accent de la marque, réservé aux deux moments forts
     (1 Minute Finance, Rendez-vous) et aux éléments interactifs. */
  --anthracite:   #1B1B20;
  --anthracite-2: #202027;

  /* Typographie */
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif:   'Newsreader', Georgia, 'Times New Roman', serif;

  /* Échelle typographique fluide */
  --fs-mega:   clamp(2.6rem, 8.2vw, 7.5rem);
  --fs-h1:     clamp(2.3rem, 6vw, 5rem);
  --fs-h2:     clamp(2rem, 5vw, 4rem);
  --fs-h3:     clamp(1.35rem, 2.4vw, 1.9rem);
  --fs-lead:   clamp(1.1rem, 1.6vw, 1.45rem);
  --fs-body:   clamp(1rem, 1.05vw, 1.075rem);
  --fs-small:  0.8125rem;
  --fs-micro:  0.6875rem;

  /* Espacements */
  --space-section: clamp(5rem, 12vw, 11rem);
  --gutter:        clamp(1.25rem, 5vw, 5rem);
  --maxw:          1500px;
  --maxw-text:     62ch;

  /* Divers */
  --radius:      14px;
  --radius-lg:   22px;
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur:         0.6s;
  --nav-h:       76px;
}

/* 2. RESET & BASE -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
picture { display: contents; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }

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

:focus-visible {
  outline: 2px solid var(--accent-clair);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Fond grain / texture très subtile */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* 3. TYPOGRAPHIE --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.overline {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--blanc-faible);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.overline::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--accent);
}
.overline--plain::before { display: none; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--blanc-doux);
  max-width: var(--maxw-text);
}

.serif-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.32;
}

.accent { color: var(--accent); }

/* 4. LAYOUT & UTILITAIRES ---------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--space-section);
  z-index: 2;
}
.section--tight { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--dark { background: var(--noir-800); }
.section--panel { background: var(--noir-700); }

/* Alternance noir / anthracite / blanc cassé — un vrai contraste de valeur
   (clair contre foncé) plutôt qu'une différence de teinte. Deux ou trois
   respirations claires ponctuent un site autrement sombre, comme des
   coupures franches entre les chapitres — pas un damier. */
.section--about    { background: var(--noir); border-top: 1px solid var(--ligne); }
.section--concepts { background: var(--noir); border-top: 1px solid var(--ligne); }
.section--social    { background: var(--anthracite); border-top: 1px solid var(--ligne); }

/* Sections claires — blanc cassé, texte encre, coupure nette (pas de
   liseré : le saut de valeur est la rupture). Les blocs sombres imbriqués
   (cartes, champ de formulaire, images) restent inchangés — ce sont des
   îlots qui gardent leurs propres couleurs. */
.section--light {
  background: var(--blanc);
  color: var(--noir);
}
.section--light .overline { color: var(--graphite-2); }
.section--light .lead,
.section--light .newsletter__note,
.section--light .step__text { color: var(--graphite-2); }
.section--light .approach__body .serif-quote { color: var(--graphite-2); }
.section--light .approach__body .serif-quote b { color: var(--noir); }
.section--light .steps { border-top-color: rgba(10,10,11,0.14); }
.section--light .step { border-bottom-color: rgba(10,10,11,0.14); }
.section--light .step:hover { background: rgba(10,10,11,0.035); }
.section--light .link-arrow { color: var(--noir); border-bottom-color: rgba(10,10,11,0.24); }
.section--light .link-arrow:hover { border-color: var(--accent); }
.section--light .btn--ghost { --fg: var(--noir); border-color: rgba(10,10,11,0.24); }
.section--light .btn--ghost:hover { --bg: rgba(10,10,11,0.05); border-color: var(--noir); }
.section--light .services__grid,
.section--light .concepts__grid {
  background: rgba(10,10,11,0.12);
  border-color: rgba(10,10,11,0.12);
}
/* L'or normal (--accent) n'a pas assez de contraste sur blanc cassé (2.1:1) :
   on bascule sur son encre plus foncée pour tout texte doré posé directement
   sur le fond clair — vérifié WCAG AA (6.3:1). */
.section--light .accent,
.section--light .step__num { color: var(--accent-ink); }
.section--light .newsletter__status.is-ok { color: var(--ok-ink); }
.section--light .newsletter__status.is-err { color: var(--err-ink); }

/* Îlots sombres à l'intérieur des sections claires (ex. cartes services) :
   ils gardent leurs couleurs d'origine, pas celles du fond clair. */
.section--light .service .link-arrow { color: var(--blanc); border-bottom-color: var(--ligne-forte); }
.section--light .service .link-arrow:hover { border-color: var(--accent); }
.section--light .service .link-arrow .accent { color: var(--accent); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
  max-width: 30ch;
}
.section-head .lead { margin-top: 0.4rem; }
.section-head--wide { max-width: 46ch; }

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

.grid { display: grid; gap: var(--gutter); }

/* 5. NAVIGATION -------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.nav.is-scrolled {
  background: rgba(10, 10, 11, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--ligne);
}

.brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  white-space: nowrap;
}
.brand__dot { color: var(--accent); }
.brand small {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blanc-faible);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.4rem);
}
.nav__links a {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--blanc-doux);
  position: relative;
  padding-block: 0.4rem;
  transition: color 0.3s var(--ease);
}
/* Le bouton CTA vit aussi dans .nav__links : sans ceci, la règle générique
   ci-dessus (plus spécifique que .btn) lui volait sa couleur de texte et
   laissait "Prendre rendez-vous" quasi illisible sur le fond doré (2,15:1). */
.nav__links a.btn { color: var(--fg); }
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav__links a:hover { color: var(--blanc); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__links a.is-cta { display: none; }

/* Sélecteur de langue */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  padding: 3px;
}
.lang-switch button {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--blanc-faible);
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  line-height: 1;
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}
.lang-switch button[aria-pressed="true"] {
  color: var(--noir);
  background: var(--blanc);
}
.lang-switch button:hover[aria-pressed="false"] { color: var(--blanc); }

.nav__overlay-foot .lang-switch { border-color: var(--ligne-forte); }

.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  position: relative;
  z-index: 120;
}
.nav__toggle span {
  position: absolute;
  left: 10px; right: 10px;
  height: 1.5px;
  background: var(--blanc);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.nav__toggle span:nth-child(1) { top: 16px; }
.nav__toggle span:nth-child(2) { top: 22px; }
.nav__toggle span:nth-child(3) { top: 28px; }
body.menu-open .nav__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .nav__toggle span:nth-child(2) { opacity: 0; }
body.menu-open .nav__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Menu plein écran mobile */
.nav__overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--noir);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  padding: var(--gutter);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s var(--ease-out);
  pointer-events: none;
}
body.menu-open .nav__overlay {
  clip-path: inset(0 0 0 0);
  pointer-events: auto;
}
.nav__overlay a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  padding-block: 0.35rem;
  color: var(--blanc);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
body.menu-open .nav__overlay a {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.12s + var(--i, 0) * 0.05s);
}
.nav__overlay .nav__overlay-foot {
  margin-top: 2.5rem;
  display: flex;
  gap: 1.4rem;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--blanc-faible);
}
.nav__overlay .nav__overlay-foot a {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
}

/* 6. BOUTONS / CTA --------------------------------------------------- */
.btn {
  --bg: var(--blanc);
  --fg: var(--noir);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.6rem;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease);
  isolation: isolate;
}
.btn__arrow { transition: transform 0.4s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--ghost {
  --bg: transparent;
  --fg: var(--blanc);
  border: 1px solid var(--ligne-forte);
}
.btn--ghost:hover { --bg: rgba(244,241,234,0.06); border-color: var(--blanc); }

.btn--accent { --bg: var(--accent); --fg: var(--noir); }
.btn--accent:hover { --bg: var(--accent-clair); }

.btn--lg { padding: 1.15rem 2rem; font-size: 0.82rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blanc);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--ligne-forte);
  transition: border-color 0.3s var(--ease), gap 0.3s var(--ease);
}
.link-arrow:hover { border-color: var(--accent); gap: 0.9rem; }
.link-arrow .accent { color: var(--accent); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.4rem;
}

/* 7. SECTIONS ------------------------------------------------------- */

/* HERO */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + clamp(2rem, 8vh, 6rem));
  padding-bottom: clamp(4rem, 12vh, 8rem);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img,
.hero__media video {
  width: 100%;
  height: 120%;
  object-fit: cover;
  object-position: center 30%;
  will-change: transform;
}
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--noir) 4%, rgba(10,10,11,0.55) 45%, rgba(10,10,11,0.72) 100%),
    linear-gradient(to right, rgba(10,10,11,0.88), rgba(10,10,11,0.35) 70%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hero__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.4rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.hero__brandline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hero__title {
  font-size: var(--fs-mega);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.hero__title .line { display: block; overflow: hidden; margin-block: -0.06em; }
.hero__title .line > span {
  display: block;
  will-change: transform;
  padding: 0.12em 0.04em 0.16em;
}
.hero__title .line:nth-child(2) { color: var(--blanc-doux); }
.hero__title .line:nth-child(3) { color: var(--accent); }

/* Respiration continue après l'entrée : chacun des trois mots s'illumine
   à son tour, en boucle lente — garde le hero vivant sans distraire. */
@keyframes hero-glow {
  0%, 88%, 100% { text-shadow: none; }
  44% { text-shadow: 0 0 30px rgba(198, 161, 91, 0.45); }
}
.hero__title .line:nth-child(1) > span { animation: hero-glow 7.5s ease-in-out infinite; }
.hero__title .line:nth-child(2) > span { animation: hero-glow 7.5s ease-in-out infinite; animation-delay: 2.5s; }
.hero__title .line:nth-child(3) > span { animation: hero-glow 7.5s ease-in-out infinite; animation-delay: 5s; }

.hero__sub {
  margin-top: clamp(1.4rem, 3vw, 2rem);
  font-size: var(--fs-lead);
  color: var(--blanc-doux);
  max-width: 40ch;
}
.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(2.5rem, 6vw, 5rem);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blanc-faible);
  writing-mode: vertical-rl;
}
.hero__scroll::after {
  content: '';
  width: 1px;
  height: 54px;
  background: linear-gradient(var(--accent), transparent);
  animation: scrollpulse 2.4s var(--ease) infinite;
}
@keyframes scrollpulse {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; transform-origin: top; }
  50%      { transform: scaleY(1);   opacity: 1;   transform-origin: top; }
}

/* APPROCHE */
.approach__statement {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.025em;
  max-width: 18ch;
  text-transform: uppercase;
}
.approach__body {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 44ch;
  margin-left: auto;
}
.approach__body .serif-quote {
  font-size: var(--fs-h3);
  color: var(--blanc-doux);
}
.approach__body .serif-quote b { color: var(--blanc); font-weight: 400; font-style: normal; }

.steps {
  margin-top: clamp(4rem, 9vw, 8rem);
  border-top: 1px solid var(--ligne);
}
.step {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: clamp(1rem, 4vw, 3rem);
  align-items: start;
  padding-block: clamp(1.8rem, 4vw, 2.8rem);
  border-bottom: 1px solid var(--ligne);
  transition: background 0.5s var(--ease);
}
.step:hover { background: rgba(244,241,234,0.02); }
.step__num {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
  padding-top: 0.5rem;
}
.step__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.step__text {
  margin-top: 0.6rem;
  color: var(--blanc-faible);
  max-width: 40ch;
}

/* À PROPOS */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.about__portrait {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--surface);
}
.about__portrait img { width: 100%; height: 100%; object-fit: cover; }
.about__portrait figcaption {
  position: absolute;
  left: 1.2rem; bottom: 1.2rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blanc-doux);
  background: rgba(10,10,11,0.55);
  backdrop-filter: blur(6px);
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
}
.about__title {
  font-size: var(--fs-h1);
  text-transform: uppercase;
}
.about__text { margin-top: 1.8rem; display: grid; gap: 1.2rem; color: var(--blanc-doux); max-width: 50ch; }
.about__meta {
  margin-top: 2.2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  border-top: 1px solid var(--ligne);
  padding-top: 1.6rem;
}
.about__meta dt { font-size: var(--fs-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--blanc-faible); }
.about__meta dd { margin-top: 0.4rem; font-family: var(--font-display); font-size: 1rem; }

/* SERVICES */
.services__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--ligne);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* color: var(--blanc) est explicite (pas hérité) sur ces quatre cartes :
   ce sont des îlots sombres qui peuvent se retrouver dans une section claire
   (.section--light met color: noir sur tout son contenu) — sans ce rappel,
   un titre sans couleur propre hérite du noir ambiant et devient illisible
   sur le fond sombre de la carte. */
.service {
  background: var(--noir-800);
  color: var(--blanc);
  padding: clamp(1.8rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: clamp(300px, 40vw, 420px);
  position: relative;
  transition: background 0.5s var(--ease);
}
.service::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 100% 0%, rgba(198,161,91,0.10), transparent 55%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.service:hover { background: var(--surface); }
.service:hover::after { opacity: 1; }
.service__num {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.1em;
}
.service__title {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.service__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.2rem;
}
.service__list li {
  font-size: var(--fs-small);
  color: var(--blanc-faible);
  border: 1px solid var(--ligne);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.service:hover .service__list li { border-color: var(--ligne-forte); color: var(--blanc-doux); }
.service__foot { margin-top: auto; padding-top: 1.4rem; }

/* CONCEPTS */
.concepts__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}
.concepts__filters button {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--blanc-faible);
  padding: 0.5rem 1rem;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.concepts__filters button[aria-pressed="true"] {
  color: var(--noir);
  background: var(--blanc);
  border-color: var(--blanc);
}
.concepts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1px;
  background: var(--ligne);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.concept {
  background: var(--noir-800);
  color: var(--blanc);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-height: 280px;
  position: relative;
  transition: background 0.4s var(--ease);
}
.concept:hover { background: var(--surface); }
.concept__label {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.concept.is-accent .concept__label { color: var(--accent); }
.concept__cat {
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blanc-faible);
}
.concept__q {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--blanc);
}
.concept__excerpt { font-size: var(--fs-small); color: var(--blanc-faible); }
.concept__foot {
  margin-top: auto;
  padding-top: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blanc-faible);
}
.concept__foot .arrow { color: var(--accent); transition: transform 0.35s var(--ease); }
.concept:hover .concept__foot .arrow { transform: translateX(4px); }

/* 1 MINUTE FINANCE */
.omf {
  border-top: 1px solid var(--ligne);
  background:
    radial-gradient(80% 60% at 80% 0%, rgba(198,161,91,0.14), transparent 60%),
    var(--anthracite);
}
.omf__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  margin-bottom: clamp(3rem, 7vw, 5.5rem);
}
.omf__clock {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 7rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 3vw, 2rem) clamp(1.4rem, 4vw, 2.8rem);
  display: inline-flex;
  align-items: center;
  gap: 0.1em;
}
.omf__clock .sep { animation: blink 1.4s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.2; } }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.omf__pitch {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.omf__pitch span { display: block; color: var(--blanc-faible); }
.omf__pitch span:last-child { color: var(--accent); }

.capsules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}
.capsule {
  display: flex;
  flex-direction: column;
  background: var(--noir-700);
  color: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
.capsule:hover { transform: translateY(-4px); border-color: var(--ligne-forte); }
.capsule__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface);
}
.capsule__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.capsule:hover .capsule__media img { transform: scale(1.05); }
.capsule__badge {
  position: absolute;
  top: 0.8rem; left: 0.8rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(10,10,11,0.7);
  backdrop-filter: blur(6px);
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  color: var(--blanc-doux);
}
.capsule__dur {
  position: absolute;
  bottom: 0.8rem; right: 0.8rem;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
  background: var(--accent);
  color: var(--noir);
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
}
.capsule__body { padding: 1.3rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.capsule__meta { font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--blanc-faible); }
.capsule__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.capsule__actions { margin-top: auto; padding-top: 1rem; display: flex; gap: 0.6rem; }
.capsule__actions a {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--ligne-forte);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.capsule__actions a:hover { background: var(--blanc); color: var(--noir); }

/* INFOLETTRE */
.newsletter {
  /* fond réel posé par .section--light (blanc cassé, coupure nette) */
}
.newsletter__inner {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}
.newsletter__title {
  font-size: var(--fs-h1);
  text-transform: uppercase;
}
.newsletter__title .accent { display: block; }
.newsletter__form {
  margin-top: 1rem;
  display: flex;
  gap: 0.7rem;
  width: 100%;
  max-width: 480px;
}
.newsletter__form input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--ligne-forte);
  border-radius: 999px;
  padding: 1rem 1.4rem;
  color: var(--blanc);
  font: inherit;
  font-size: var(--fs-small);
  transition: border-color 0.3s var(--ease);
}
.newsletter__form input::placeholder { color: var(--blanc-faible); }
.newsletter__form input:focus { border-color: var(--accent); outline: none; }
.newsletter__note { font-size: var(--fs-micro); color: var(--blanc-faible); letter-spacing: 0.04em; }
.newsletter__status {
  min-height: 1.4em;
  font-size: var(--fs-small);
  font-weight: 500;
}
.newsletter__status.is-ok { color: var(--accent-clair); }
.newsletter__status.is-err { color: #E58B7B; }
.newsletter.is-done .newsletter__form { display: none; }

/* RÉSEAUX */
.socials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
}
.social-card {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--ligne);
  color: var(--blanc);
}
.social-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.social-card:hover img { transform: scale(1.06); }
.social-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  background: linear-gradient(to top, rgba(10,10,11,0.85), transparent 55%);
}
.social-card__platform {
  align-self: flex-start;
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(10,10,11,0.6);
  backdrop-filter: blur(6px);
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
}
.social-card__caption { font-size: var(--fs-small); color: var(--blanc); line-height: 1.35; }

.socials__foot {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  justify-content: space-between;
}
.socials__links { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.socials__links a {
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  color: var(--blanc-doux);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.socials__links a:hover { border-color: var(--accent); color: var(--blanc); }

/* RENDEZ-VOUS */
.booking {
  border-top: 1px solid var(--ligne);
  background:
    radial-gradient(70% 120% at 20% 0%, rgba(198,161,91,0.14), transparent 55%),
    var(--noir);
  text-align: center;
}
.booking__inner { max-width: 900px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 1.8rem; }
.booking__title {
  font-size: var(--fs-h1);
  text-transform: uppercase;
}
.booking__text { max-width: 46ch; color: var(--blanc-doux); }

/* FOOTER */
.footer {
  position: relative;
  z-index: 2;
  background: var(--noir);
  border-top: 1px solid var(--ligne);
  padding-block: clamp(3.5rem, 8vw, 6rem) 2.5rem;
}
.footer__brandline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 4.5rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1;
  max-width: 16ch;
  margin-bottom: clamp(3rem, 7vw, 5rem);
}
.footer__brandline .accent { color: var(--accent); }
.footer__cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(2, 1fr);
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--ligne);
}
.footer__cols h4 {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blanc-faible);
  margin-bottom: 1.1rem;
}
.footer__cols a, .footer__cols p { font-size: var(--fs-small); color: var(--blanc-doux); display: block; margin-bottom: 0.6rem; }
.footer__cols a:hover { color: var(--accent); }
.footer__legal {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.2rem;
  font-size: var(--fs-micro);
  line-height: 1.7;
  color: var(--blanc-faible);
  max-width: 90ch;
}
.footer__legal a {
  color: var(--blanc-doux);
  border-bottom: 1px solid var(--ligne-forte);
  white-space: nowrap;
}
.footer__legal a:hover { color: var(--accent); border-color: var(--accent); }
.footer__bottom {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blanc-faible);
}

/* Modale calendrier (mode embed) */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  padding: var(--gutter);
  background: rgba(5,5,6,0.8);
  backdrop-filter: blur(8px);
}
.modal.is-open { display: grid; }
.modal__panel {
  position: relative;
  width: min(900px, 100%);
  height: min(80vh, 780px);
  background: var(--noir-800);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.modal__panel iframe { width: 100%; height: 100%; border: 0; }
.modal__close {
  position: absolute;
  top: 0.8rem; right: 0.8rem;
  z-index: 2;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: rgba(10,10,11,0.7);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
}

/* QUIZ — TON SCORE FINANCIER ---------------------------------------- */
.quiz {
  max-width: 640px;
  background: var(--noir-800);
  color: var(--blanc);
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 5vw, 3.2rem);
  position: relative;
  overflow: hidden;
}
.quiz::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 100% 0%, rgba(198,161,91,0.10), transparent 55%);
  pointer-events: none;
}

/* Variante vitrine : renvoie vers l'outil externe (config.score.url) plutôt
   que d'héberger le test ici. Garde l'habillage de carte, simplifie le reste. */
.quiz--teaser {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}
.quiz--teaser p { color: var(--blanc-doux); max-width: 46ch; position: relative; z-index: 1; }
.quiz--teaser .cta-row { margin-top: 0; position: relative; z-index: 1; }

/* Progression */
.quiz__progress {
  height: 3px;
  background: var(--ligne-forte);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 1.6rem;
}
.quiz__progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.5s var(--ease-out);
}
.quiz__meta {
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blanc-faible);
  margin-bottom: 1rem;
}

/* Question */
.quiz__question {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 1.8rem;
}
.quiz__options {
  display: grid;
  gap: 0.7rem;
}
.quiz__option {
  text-align: left;
  padding: 1rem 1.3rem;
  border: 1px solid var(--ligne-forte);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--blanc-doux);
  background: transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.quiz__option::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--ligne-forte);
  flex-shrink: 0;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.quiz__option:hover { border-color: var(--accent); color: var(--blanc); }
.quiz__option:hover::before { border-color: var(--accent); }
.quiz__option.is-selected { border-color: var(--accent); background: rgba(198,161,91,0.08); color: var(--blanc); }
.quiz__option.is-selected::before { border-color: var(--accent); background: var(--accent); }

.quiz__nav { margin-top: 1.6rem; display: flex; justify-content: space-between; align-items: center; }
.quiz__back {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--blanc-faible);
  transition: color 0.3s var(--ease);
}
.quiz__back:hover { color: var(--blanc); }
.quiz__back[hidden] { visibility: hidden; }

/* Intro */
.quiz__intro { text-align: left; }
.quiz__intro p { color: var(--blanc-doux); margin-bottom: 1.6rem; }

/* Résultat */
.quiz__result { text-align: left; }
.quiz__score {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.6rem 0 1rem;
}
.quiz__score-num {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 9vw, 5.2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--accent);
  line-height: 1;
}
.quiz__score-suffix { font-size: var(--fs-lead); color: var(--blanc-faible); }
.quiz__gauge {
  height: 6px;
  background: var(--ligne-forte);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 1.4rem;
}
.quiz__gauge-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-sombre), var(--accent));
  border-radius: 999px;
  transition: width 1.1s var(--ease-out);
}
.quiz__band {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}
.quiz__summary { color: var(--blanc-doux); margin-bottom: 1.8rem; max-width: 48ch; }
.quiz__reco-title {
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blanc-faible);
  margin-bottom: 0.9rem;
}
.quiz__reco { display: grid; gap: 0.8rem; margin-bottom: 1.8rem; }
.quiz__reco li {
  display: flex;
  gap: 0.8rem;
  color: var(--blanc-doux);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.quiz__reco li::before {
  content: '';
  width: 6px; height: 6px;
  margin-top: 0.5em;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.quiz__email {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1.8rem;
  flex-wrap: wrap;
}
.quiz__email-label {
  font-size: var(--fs-small);
  color: var(--blanc-faible);
  flex-basis: 100%;
}
.quiz__email input {
  flex: 1;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--ligne-forte);
  border-radius: 999px;
  padding: 0.75rem 1.1rem;
  color: var(--blanc);
  font: inherit;
  font-size: var(--fs-small);
}
.quiz__email input:focus { border-color: var(--accent); outline: none; }
.quiz__email-status { font-size: var(--fs-small); flex-basis: 100%; }
.quiz__email-status.is-ok { color: var(--accent-clair); }
.quiz.is-email-done .quiz__email-form { display: none; }

.quiz__retake {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--blanc-faible);
  margin-top: 0.4rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.quiz__retake:hover { color: var(--blanc); border-color: var(--ligne-forte); }

.quiz .disclaimer {
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--blanc-faible);
  padding-top: 1.4rem;
  border-top: 1px solid var(--ligne);
}

/* Le quiz reste une carte sombre même dans une section claire (voir
   .section--light plus haut) : re-fixer la couleur de base au cas où. */
.section--light .quiz .lead,
.section--light .quiz p { color: inherit; }

/* PAGES SECONDAIRES (article / à propos) --------------------------- */
.page-hero {
  padding-top: calc(var(--nav-h) + clamp(3rem, 10vw, 7rem));
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--ligne);
  background: var(--noir);
}
.page-hero--concept {
  background: var(--anthracite);
}
.page-hero h1 {
  font-size: var(--fs-h1);
  text-transform: uppercase;
  margin-top: 1.2rem;
  max-width: 20ch;
}
.page-hero .lead { margin-top: 1.4rem; }
.breadcrumb {
  display: flex;
  gap: 0.5rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blanc-faible);
}
.breadcrumb a:hover { color: var(--accent); }

.article {
  max-width: 68ch;
  margin-inline: auto;
  padding-block: var(--space-section);
}
.article > * + * { margin-top: 1.5rem; }
.article h2 {
  font-size: var(--fs-h3);
  text-transform: uppercase;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ligne);
}
.article p { color: var(--blanc-doux); }
.article ul { display: grid; gap: 0.6rem; padding-left: 1.2rem; list-style: disc; color: var(--blanc-doux); }
.article strong { color: var(--blanc); }
.article .callout {
  background: var(--surface);
  border-left: 2px solid var(--accent);
  padding: 1.4rem 1.6rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--blanc);
}
.article .disclaimer {
  margin-top: 3rem;
  font-size: var(--fs-micro);
  color: var(--blanc-faible);
  line-height: 1.7;
}

/* 8. ANIMATIONS -------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-56px); }
[data-reveal="left"].is-visible { transform: none; }
[data-reveal="right"] { transform: translateX(56px); }
[data-reveal="right"].is-visible { transform: none; }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="scale"].is-visible { transform: none; }
/* Zoom franc — pour un effet de « focus » plus marqué qu'un simple fondu.
   À réserver aux éléments nettement plus étroits que leur conteneur : un
   scale > 1 grandit au-delà de ses propres bornes et peut provoquer un
   débordement horizontal sur un bloc déjà proche de la largeur de l'écran
   (vécu avec la carte du quiz en mobile). Pour un bloc pleine largeur,
   préférer [data-reveal="scale"] (0.94 → 1, ne dépasse jamais sa taille finale). */
[data-reveal="zoom"] { transform: scale(1.14); }
[data-reveal="zoom"].is-visible { transform: scale(1); }
/* Glisse d'un côté tout en faisant le point — portrait, visuels clés. */
[data-reveal="left-zoom"] { transform: translateX(-64px) scale(0.92); }
[data-reveal="left-zoom"].is-visible { transform: none; }
[data-reveal="right-zoom"] { transform: translateX(64px) scale(0.92); }
[data-reveal="right-zoom"].is-visible { transform: none; }

/* Cartes en grille (services, concepts, capsules, réseaux) : la montée
   s'accompagne d'un léger zoom — la carte « arrive » plutôt qu'elle
   n'apparaît simplement, à chaque section où l'on défile vers elle. */
.services__grid [data-reveal],
.concepts__grid [data-reveal],
.capsules [data-reveal],
.socials__grid [data-reveal] {
  transform: translateY(28px) scale(0.93);
}
.services__grid [data-reveal].is-visible,
.concepts__grid [data-reveal].is-visible,
.capsules [data-reveal].is-visible,
.socials__grid [data-reveal].is-visible {
  transform: none;
}

.reveal-lines .line > span {
  transform: translateY(110%);
  transition: transform 1s var(--ease-out);
  transition-delay: var(--line-delay, 0s);
}
.reveal-lines.is-visible .line > span { transform: none; }

[data-count] { font-variant-numeric: tabular-nums; }

/* Barre de progression de lecture — filet doré sous la nav, sans à-coups. */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 101;
  pointer-events: none;
}
.scroll-progress__bar {
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* Titres qui se révèlent mot par mot (grands énoncés éditoriaux uniquement —
   pas tous les H2, pour garder l'effet spécial). Le texte réel vient de
   data-i18n ; le JS découpe en mots après coup, en FR comme en EN. */
[data-reveal].split-words { opacity: 1; transform: none; }
.split-words .word { display: inline-block; overflow: hidden; vertical-align: top; }
.split-words .word > span {
  display: inline-block;
  transform: translateY(112%);
  transition: transform 0.8s var(--ease-out);
  transition-delay: var(--w-delay, 0s);
}
.split-words.is-visible .word > span { transform: none; }

/* Images qui se dévoilent par un masque, plutôt qu'un simple fondu. */
.about__portrait img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.about__portrait.is-visible img { clip-path: inset(0 0 0% 0); }

.capsule__media img,
.social-card img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s var(--ease-out), transform 0.6s var(--ease);
}
.capsule.is-visible .capsule__media img,
.social-card.is-visible img { clip-path: inset(0 0 0% 0); }

/* Bandeau défilant — respiration éditoriale entre deux sections. */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--ligne);
  border-bottom: 1px solid var(--ligne);
  background: var(--noir);
  padding-block: clamp(0.9rem, 2vw, 1.4rem);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 32s linear infinite;
}
.marquee__group { display: flex; align-items: center; }
.marquee__track span {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 2.1rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--blanc-faible);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.marquee__track span::after {
  content: '—';
  color: var(--accent);
  margin-inline: 2.4rem;
}

/* 9. RESPONSIVE ------------------------------------------------------ */
@media (max-width: 1080px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__portrait { max-width: 460px; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  :root { --nav-h: 66px; }
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .services__grid { grid-template-columns: 1fr; }
  .approach__body { margin-left: 0; }
  .omf__head { grid-template-columns: 1fr; }
  .about__meta { grid-template-columns: 1fr 1fr; }
  .footer__cols { grid-template-columns: 1fr; gap: 2rem; }
  .newsletter__form { flex-direction: column; align-items: stretch; }
  .newsletter__form .btn { justify-content: center; }
  .hero__scroll { display: none; }
  .step { grid-template-columns: 3.2rem 1fr; }
}

@media (max-width: 520px) {
  .hero__title { line-height: 0.95; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { justify-content: center; }
  .concepts__grid { grid-template-columns: 1fr; }
  .about__meta { grid-template-columns: 1fr; }
}

/* 10. ACCESSIBILITÉ / REDUCED MOTION ------------------------------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -60px;
  z-index: 300;
  background: var(--blanc);
  color: var(--noir);
  padding: 0.7rem 1.1rem;
  border-radius: 8px;
  font-size: var(--fs-small);
  font-weight: 600;
  transition: top 0.3s var(--ease);
}
.skip-link:focus { top: 1rem; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal],
  .reveal-lines .line > span,
  .split-words .word > span { opacity: 1 !important; transform: none !important; }
  .hero__media img, .hero__media video { height: 100%; }
  .about__portrait img,
  .capsule__media img,
  .social-card img { clip-path: none !important; }
  .scroll-progress { display: none; }
  .marquee__track { animation: none; }
}