/* =====================================================================
   Hopeulà — DA reprise de agencehopeula.com
   Crème chaud + rouge Hopeulà en couleur secondaire, Figtree + DM Sans, pilules arrondies.
   ===================================================================== */

:root {
  color-scheme: dark;
  /* Base blanche neutre (ni beige ni gris froid) + voiles rosés très légers tirés du rouge,
     comme les dégradés de marque de meetsponsors.com. Le rouge reste la couleur secondaire,
     légèrement adouci (le logo garde le rouge d'origine #E40102). */
  --red: #DC3A2A;
  --red-rgb: 220, 58, 42;
  --red-600: #BF2C1E;
  /* Mode sombre façon wannathis.one : noir neutre, surfaces grises sans teinte, texte blanc,
     gris moyens pour le secondaire. Le rouge reste l'unique couleur d'accent.
     --red-50 / --red-100 deviennent des voiles rouges sombres (fonds), --pink-* les textes rosés. */
  --red-50: #1A0E0C;
  --red-100: #3A1A16;
  --pink-50: #FDF1EF;
  --pink-100: #F8D9D4;
  --ink: #FFFFFF;
  --ink-2: #B4B4B4;
  --muted: #848484;
  --line: #2A2A2A;
  --paper: #0A0A0A;
  --soft: #111111;
  --grey: #1A1A1A;
  --surface: #1A1A1A;
  --night: #111111;
  --black: #0A0A0A;
  --white: #FFFFFF;
  --star: #F5B83D;
  --shadow: 0 18px 40px -24px rgba(0, 0, 0, .7);

  --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-alt: 'DM Sans', var(--font);
  --font-logo: 'Anton', 'Impact', var(--font);

  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius: 16px;
  --pill: 999px;
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; }
h2 { font-size: clamp(32px, 4.6vw, 56px); }
h3 { font-size: 22px; letter-spacing: -0.015em; line-height: 1.2; }
em { font-style: italic; font-weight: 500; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--white); color: var(--black); padding: 10px 16px; border-radius: var(--pill); }
.skip-link:focus { left: 16px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 780px; }
.center { text-align: center; }
.center .section__lede { margin-left: auto; margin-right: auto; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px;
  border: 0; border-radius: var(--pill);
  font: 600 14px/1 var(--font); letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: transform .2s var(--ease), background .2s, color .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn--red { background: var(--red); color: var(--white); box-shadow: 0 8px 24px -10px rgba(var(--red-rgb), .6); }
.btn--red:hover { background: var(--red-600); }
.btn--white { background: var(--white); color: var(--red); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .3); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 12px; }
.btn--lg { min-height: 58px; padding: 0 32px; font-size: 15px; }
.btn--block { width: 100%; }

/* ---------- Bandeau + en-tête ---------- */
.topbar {
  background: var(--night); color: var(--ink-2);
  font: 500 13px/1.4 var(--font-alt); text-align: center; text-wrap: balance; padding: 9px var(--gutter);
}
.site-header { position: sticky; top: 0; z-index: 50; padding: 0 var(--gutter); transition: background .3s, box-shadow .3s; }
.site-header__inner {
  max-width: calc(var(--container) - 2 * var(--gutter)); margin: 0 auto;
  display: flex; align-items: center; gap: 16px; min-height: 84px;
}
.site-header.is-scrolled { background: rgba(10, 10, 10, .8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.site-header--landing .site-header__inner { justify-content: center; }
.logo img { height: 54px; width: auto; }
.logo--text { font: 400 26px/1 var(--font-logo); color: var(--red); text-transform: uppercase; letter-spacing: .01em; }
@media (max-width: 960px) {
  .site-header__inner { min-height: 72px; }
  .logo img { height: 44px; }
}

/* Site de l'agence : logo à gauche (accueil) ; liens et « Prendre rendez-vous » à droite */
.site-header--site .site-header__inner { justify-content: space-between; }
.site-header--site .logo img { height: 46px; }
.site-header__actions { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); }
.site-nav__list { display: flex; gap: clamp(18px, 2.6vw, 34px); }
.site-nav__list a { position: relative; display: block; padding: 6px 0; font: 500 15px/1 var(--font); color: var(--ink); text-decoration: none; }
.site-nav__list a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.site-nav__list a:hover::after, .site-nav__list .current-menu-item a::after { transform: scaleX(1); }
@media (max-width: 960px) { .site-header--site .logo img { height: 40px; } }
@media (max-width: 480px) {
  .site-header .site-header__cta { display: none; } /* le CTA collant prend le relais */
  .site-nav__list { gap: 14px; }
  .site-nav__list a { font-size: 13px; white-space: nowrap; }
}
@media (max-width: 359px) { .site-header--site .site-nav { display: none; } } /* trop étroit pour les 4 ancres */

/* Bouton WhatsApp : rond gris, blanc au survol, à droite sur la landing (logo centré), avant le CTA sur le site */
.whatsapp {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; background: var(--surface); color: var(--white);
  transition: background .2s, color .2s;
}
.whatsapp svg { width: 22px; height: 22px; }
.whatsapp:hover { background: var(--white); color: var(--black); }
.site-header--landing .site-header__inner { position: relative; }
.site-header--landing .whatsapp { position: absolute; right: 0; top: 50%; translate: 0 -50%; }
.site-header__actions .whatsapp { margin-right: calc(16px - clamp(20px, 3vw, 40px)); } /* collé au CTA */
@media (max-width: 480px) { .site-header--site .whatsapp { display: none; } } /* masqué avec le CTA */

/* ---------- Sur-titres ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
  font: 600 12px/1 var(--font-alt); letter-spacing: .14em; text-transform: uppercase; color: var(--red);
}
.eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; margin-bottom: 28px;
  border-radius: var(--pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2);
  font: 500 12px/1 var(--font-alt); letter-spacing: .12em; text-transform: uppercase;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(var(--red-rgb), .15); animation: pulse 2.4s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(var(--red-rgb), 0); } }
/* Variante sur fond rouge (CTA final) */
.final-cta .eyebrow-pill { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); color: var(--white); }
.final-cta .dot { background: var(--white); box-shadow: 0 0 0 4px rgba(255, 255, 255, .2); }
/* Sur-titre du hero, mobile : « Agence … » sur la 1re ligne, « ● Audit offert » seul en dessous, en rouge */
@media (max-width: 600px) {
  .hero__eyebrow {
    display: inline-grid; grid-template-columns: 1fr auto auto 1fr; align-items: center; gap: 7px 9px; padding: 12px 20px; border-radius: 22px;
    font-size: 11px; line-height: 1.3; letter-spacing: .1em; text-align: center;
  }
  .hero__eyebrow-a { grid-column: 1 / -1; grid-row: 1; }
  .hero__eyebrow-sep { display: none; }
  .hero__eyebrow .dot { grid-column: 2; grid-row: 2; }
  .hero__eyebrow-b { grid-column: 3; grid-row: 2; color: var(--red); font-weight: 600; }
}

/* ---------- Hero (noir, le rouge en accent) ---------- */
.hero {
  background: var(--paper); color: var(--ink);
  margin-top: -84px; padding: clamp(170px, 22vh, 230px) 0 0; /* passe sous l'en-tête collant */
  position: relative; overflow: hidden;
}
@media (max-width: 960px) { .hero { margin-top: -72px; } } /* = hauteur de l'en-tête mobile, sinon le hero mord sur le bandeau */
.hero::before { /* lueur rouge qui monte du bas */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 105%, rgba(var(--red-rgb), .16), transparent 70%);
}
.hero .container { position: relative; z-index: 1; }
.hero__content { text-align: center; }
.hero__content .hero__title, .hero__content .hero__lede { margin-left: auto; margin-right: auto; }
.hero__title { font-size: clamp(38px, 5.6vw, 76px); font-weight: 600; letter-spacing: -0.035em; line-height: .95; max-width: 20ch; }
.hero__title em { font-weight: 500; color: var(--red); }
.hero__lede { max-width: 540px; margin-top: 24px; font-size: clamp(16px, 1.4vw, 18px); color: var(--muted); }
.hero__actions { margin: 40px 0 clamp(90px, 14vh, 140px); }
/* CTA du hero : onde qui pulse en continu, en pause au survol (agrandi + icône qui glisse). */
.hero__cta { animation: ctaPulse 2.2s ease-out infinite; }
.hero__cta svg { transition: transform .3s var(--ease); }
.hero__cta:hover { transform: translateY(-2px) scale(1.03); animation-play-state: paused; }
.hero__cta:hover svg { transform: translateX(5px); }
@keyframes ctaPulse {
  0%   { box-shadow: 0 8px 24px -10px rgba(var(--red-rgb), .6), 0 0 0 0 rgba(var(--red-rgb), .55); }
  70%  { box-shadow: 0 8px 24px -10px rgba(var(--red-rgb), .6), 0 0 0 18px rgba(var(--red-rgb), 0); }
  100% { box-shadow: 0 8px 24px -10px rgba(var(--red-rgb), .6), 0 0 0 0 rgba(var(--red-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) { .hero__cta { animation: none; } }

.rating { display: flex; align-items: center; gap: 22px; }
.stars { color: var(--star); letter-spacing: 3px; font-size: 15px; }
.rating__score { font-size: 15px; color: var(--muted); }
.rating__score b { font-size: 30px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.rating__sep { width: 1px; align-self: stretch; background: var(--line); }
.avatars { display: flex; }
.avatars > * {
  width: 38px; height: 38px; border-radius: 50%; margin-left: -10px; border: 2px solid var(--paper);
  object-fit: cover; background: var(--red-100);
}
.avatars > *:first-child { margin-left: 0; }
.avatars__initials { display: grid; place-items: center; font: 700 12px/1 var(--font-alt); color: var(--white); background: var(--grey) !important; }
.avatars__more { display: grid; place-items: center; background: var(--red) !important; color: var(--white); font-size: 20px; }
.rating__label { margin-top: 6px; font: 500 13px/1 var(--font-alt); color: var(--muted); }

/* ---------- Bande de chiffres : simple sur la landing, cartes illustrées (inspiré de numadeo.fr) sur l'accueil ----------
   Les illustrations s'animent quand leur carte apparaît (classe .is-on posée par main.js).
   Sans JS ou en mouvement réduit, elles restent affichées dans leur état final. Aucun effet au survol.
   Rouge du logo (plus franc que --red) pour les illustrations. */
/* Bande simple (landing) : chiffres centrés séparés par des traits */
.stats { background: var(--night); color: var(--white); padding: clamp(26px, 3vw, 38px) 0; }
.stats__list { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 auto; text-align: center; }
.stats__item { padding: 6px 16px; }
.stats__item + .stats__item { border-left: 1px solid rgba(255, 255, 255, .14); }
.stats dt { font: italic 500 clamp(24px, 2.4vw, 32px)/1.05 var(--font); letter-spacing: -0.03em; }
.stats dd { margin: 8px 0 0; font: 500 11px/1.3 var(--font-alt); text-transform: uppercase; letter-spacing: .14em; color: rgba(255, 255, 255, .6); }
.stats dd::before { content: '✓'; margin-right: 7px; color: var(--red); }
@media (max-width: 760px) {
  /* Un seul trait vertical continu au centre, au lieu d'un trait par ligne */
  .stats__list { grid-template-columns: 1fr 1fr; row-gap: 20px; position: relative; }
  .stats__list::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(255, 255, 255, .14); }
  .stats__item + .stats__item { border-left: 0; }
}

/* Cartes illustrées (accueil, .stats--cards) */
.stats--cards { --art-red: #E40102; --art-red-rgb: 228, 1, 2; padding: clamp(22px, 2.6vw, 34px) 0; }
.stats--cards .stats__list { gap: 14px; text-align: left; }
.stats--cards .stats__list::before { content: none; }
.stats--cards .stats__item + .stats__item { border-left: 0; }
.stats--cards .stats__item {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: clamp(18px, 1.8vw, 24px); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}
.stats__art { position: relative; height: 64px; margin-bottom: 20px; }
.stats--cards dt { position: relative; font: italic 500 clamp(30px, 3vw, 42px)/1 var(--font); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.stats--cards dd { position: relative; margin: 10px 0 0; font: 500 11px/1.3 var(--font-alt); text-transform: uppercase; letter-spacing: .14em; color: rgba(255, 255, 255, .6); }
.stats--cards dd::before { color: var(--art-red); }

/* Audit offert : la loupe descend sur les lignes, qui se cochent à son passage, puis flotte */
.art-audit { position: relative; display: grid; align-content: space-between; height: 100%; padding-right: 22%; }
.art-audit__row { display: flex; align-items: center; gap: 10px; }
.art-audit__row svg { flex: none; width: 17px; height: 17px; }
.art-audit__row circle { fill: var(--art-red); }
.art-audit__row path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.art-audit__row i { position: relative; height: 7px; width: var(--w); border-radius: 4px; background: rgba(255, 255, 255, .22); }
.art-audit__row i::after { content: ''; position: absolute; left: calc(100% + 6px); top: 0; width: 24%; height: 100%; border-radius: inherit; background: rgba(255, 255, 255, .1); }
.art-audit__lens {
  position: absolute; right: 0; top: 0; width: 46px; height: 46px; overflow: visible;
  filter: drop-shadow(0 0 14px rgba(var(--art-red-rgb), .55));
}
.art-audit__lens circle { fill: rgba(var(--art-red-rgb), .14); stroke: var(--art-red); stroke-width: 3; }
.art-audit__lens path { stroke: var(--art-red); stroke-width: 4.5; stroke-linecap: round; }
.is-on .art-audit__row circle { animation: artFillRed .35s var(--ease) both; animation-delay: calc(.35s + var(--c) * .4s); }
.is-on .art-audit__row path { stroke-dasharray: 1; animation: artDraw .4s var(--ease) both; animation-delay: calc(.5s + var(--c) * .4s); }
.is-on .art-audit__row i { animation: artWipe .6s var(--ease) both; animation-delay: calc(var(--c) * .12s); }
.is-on .art-audit__lens { animation: artScan 1.5s var(--ease) both, artFloat 3.6s ease-in-out 1.5s infinite; }
@keyframes artFillRed { from { fill: rgba(255, 255, 255, .14); } }
@keyframes artWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -50% 0 0); } }
@keyframes artScan { from { opacity: 0; translate: -190% -10%; } 15% { opacity: 1; } 55% { translate: -100% 35%; } }
@keyframes artFloat { 50% { translate: -8px 14px; } }

/* Courbe des vues */
.art-curve { display: block; width: 100%; height: 100%; overflow: visible; }
.art-curve__grid { stroke: rgba(255, 255, 255, .09); stroke-dasharray: 3 5; }
.art-curve__line { fill: none; stroke: var(--art-red); stroke-width: 2.5; stroke-linecap: round; }
.art-curve__runner { fill: #fff; opacity: 0; }
.is-on .art-curve__runner { opacity: 1; transition: opacity .3s 1.6s; }
.art-curve__dot {
  position: absolute; right: 0; top: 0; width: 11px; height: 11px; margin: -1px -4px 0 0; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 4px rgba(var(--art-red-rgb), .45), 0 0 18px 4px rgba(var(--art-red-rgb), .6);
}
.is-on .art-curve__line { stroke-dasharray: 1; animation: artDraw 1.4s var(--ease) both; }
.is-on .art-curve__area { animation: artFade 1s var(--ease) .7s both; }
.is-on .art-curve__dot { animation: artPop .5s var(--ease) 1.3s both, artGlow 2.4s ease-in-out 1.8s infinite; }
@keyframes artDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes artFade { from { opacity: 0; } }
@keyframes artPop { from { opacity: 0; transform: scale(0); } }
@keyframes artGlow { 50% { box-shadow: 0 0 0 7px rgba(var(--art-red-rgb), .15), 0 0 24px 6px rgba(var(--art-red-rgb), .5); } }

/* Grille des clients */
.art-grid { display: grid; grid-template-columns: repeat(14, 1fr); gap: 5px; height: 100%; align-content: end; }
.art-grid span { aspect-ratio: 1; border-radius: 3px; background: rgba(255, 255, 255, .2); }
.art-grid span:nth-child(14n+1), .art-grid span:nth-child(14n+2) { background: rgba(255, 255, 255, .32); }
.art-grid .is-hot { background: var(--art-red) !important; box-shadow: 0 0 10px rgba(var(--art-red-rgb), .7); }
.is-on .art-grid span { animation: artCell .45s var(--ease) both; animation-delay: calc(var(--c) * 22ms); }
.is-on .art-grid .is-hot { animation: artCell .45s var(--ease) both, artBlink 2.6s ease-in-out infinite; animation-delay: calc(var(--c) * 22ms + 200ms), calc(var(--c) * 90ms); }
@keyframes artCell { from { opacity: 0; transform: scale(.3); } }
@keyframes artBlink { 50% { opacity: .55; } }

/* Barres des vidéos par mois */
.art-bars { display: flex; align-items: flex-end; gap: 6px; height: 100%; }
.art-bars span {
  flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px; transform-origin: bottom;
  background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .1));
}
.art-bars .is-hot { position: relative; background: linear-gradient(180deg, var(--art-red), #A80001); box-shadow: 0 0 22px rgba(var(--art-red-rgb), .55); }
.art-bars .is-hot::after { /* petit chevron au-dessus du dernier mois */
  content: ''; position: absolute; left: 50%; top: -10px; width: 6px; height: 6px; margin-left: -3px;
  border: solid var(--art-red); border-width: 1.5px 0 0 1.5px; transform: rotate(45deg);
}
.is-on .art-bars span { animation: artGrow .9s var(--ease) both; animation-delay: calc(var(--c) * 70ms); }
.is-on .art-bars .is-hot::after { animation: artNudge 1.6s ease-in-out 1.2s infinite; }
@keyframes artGrow { from { transform: scaleY(0); } }
@keyframes artNudge { 50% { translate: 0 -3px; } }

/* 3 h de tournage → 3 mois de contenu */
.art-time { display: flex; align-items: center; gap: 10px; height: 100%; }
.art-time__clock { flex: none; width: 64px; height: 64px; }
.art-time__face { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .14); }
.art-time__tick { stroke: rgba(255, 255, 255, .3); stroke-width: 1.5; stroke-linecap: round; }
.art-time__arc { fill: none; stroke: rgba(var(--art-red-rgb), .5); stroke-width: 27; stroke-dasharray: .25 1; opacity: .55; }
.art-time__hand { stroke: var(--art-red); stroke-width: 2.5; stroke-linecap: round; transform: rotate(90deg); transform-origin: 32px 32px; }
.art-time__arrow { flex: none; width: 24px; height: 10px; overflow: visible; }
.art-time__arrow path { fill: none; stroke: rgba(255, 255, 255, .4); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.art-time__months { flex: 1; display: flex; gap: 8px; height: 100%; }
.art-time__months div { flex: 1; display: grid; grid-template-rows: repeat(4, 1fr); gap: 4px; }
.art-time__months span { border-radius: 3px; background: rgba(255, 255, 255, .26); }
.art-time__months div:last-child span:last-child { background: var(--art-red); box-shadow: 0 0 12px rgba(var(--art-red-rgb), .6); }
.is-on .art-time__arc { stroke-dasharray: 0 1; animation: artSweep 1s var(--ease) .1s forwards; }
.is-on .art-time__hand { animation: artHand 1s var(--ease) .1s both; }
.is-on .art-time__arrow path { stroke-dasharray: 1; animation: artDraw .5s var(--ease) 1s both; }
.is-on .art-time__months span { animation: artCell .4s var(--ease) both; animation-delay: calc(1.3s + var(--c) * 60ms); }
@keyframes artSweep { to { stroke-dasharray: .25 1; } }
@keyframes artHand { from { transform: rotate(0); } }

@media (max-width: 960px) {
  .stats--cards .stats__list { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stats__art { height: 52px; margin-bottom: 16px; }
  .art-time__clock { width: 52px; height: 52px; }
}
@media (max-width: 420px) {
  .stats--cards .stats__item { padding: 16px 14px; border-radius: var(--radius); }
  .art-grid { gap: 3px; }
  .art-bars { gap: 4px; }
  .art-time { gap: 6px; }
  .art-time__arrow { display: none; }
  .art-time__months { gap: 5px; }
  .art-time__months div { gap: 3px; }
  .stats--cards dd { letter-spacing: .1em; }
}

/* Halo flou qui suit le curseur et dévoile des notifications, sous les textes (voir main.js) */
.hero__blob { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__reveal {
  position: absolute; inset: 0; overflow: hidden; user-select: none;
  /* Masque doux (dégradés radiaux animés en JS) : pas de contour, les notifications s'estompent en opacité */
  -webkit-mask-image: linear-gradient(transparent, transparent); mask-image: linear-gradient(transparent, transparent);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  will-change: mask-image;
}
/* Zone des notifs : même hauteur que le contenu (du haut du titre au bas du bouton, cf. padding du hero
   et marge de .hero__actions), en deux colonnes sur les côtés. Impaires à gauche, paires à droite.
   Le masque reste sur .hero__reveal, donc ses coordonnées ne bougent pas. */
.hero__notifs {
  position: absolute; inset: clamp(170px, 22vh, 230px) 0 clamp(90px, 14vh, 140px);
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; grid-auto-flow: dense;
  padding: 0 clamp(16px, 3vw, 56px);
}
.notif {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px 10px 13px; border-radius: var(--pill);
  background: var(--surface); border: 1px solid var(--red-100); box-shadow: var(--shadow);
  font: 500 15px/1 var(--font-alt); color: var(--ink); white-space: nowrap;
}
.notif svg { width: 19px; height: 19px; flex: none; color: var(--red); }
.notif:nth-child(odd)  { grid-column: 1; justify-self: start; align-self: center; }
.notif:nth-child(even) { grid-column: 2; justify-self: end;   align-self: center; }
/* Léger zigzag et inclinaisons alternées pour un effet « posé à la main » */
.notif:nth-child(4n+1) { transform: translateX(0)    rotate(-3deg); }
.notif:nth-child(4n+3) { transform: translateX(28%)  rotate(2deg); }
.notif:nth-child(4n+2) { transform: translateX(-28%) rotate(2deg); }
.notif:nth-child(4n)   { transform: translateX(0)    rotate(-2deg); }
/* Sans marge latérale suffisante, les notifs passeraient sous le texte : on coupe l'effet. */
@media (max-width: 1100px) { .hero__blob { display: none; } }
.hero__content { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .hero__blob { display: none; } }

/* Bandeau logos défilant (section à part, sous la citation) */
.marquee { background: var(--soft); color: var(--ink-2); overflow: hidden; padding: 26px 0; box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.marquee__track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
/* Espacement porté par chaque logo (marge + ✦ + marge), pas par gap : les deux groupes font exactement la même largeur. */
.marquee__group { display: flex; flex: none; align-items: center; min-width: 100vw; justify-content: space-around; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { flex: none; font: 600 22px/1 var(--font); letter-spacing: -0.01em; white-space: nowrap; opacity: .85; }
.marquee__item::after { content: '✦'; margin: 0 72px; color: var(--red); font-size: 14px; vertical-align: middle; }
.marquee__item { display: inline-flex; align-items: center; }
.marquee__item img { height: 42px; width: auto; max-width: 170px; object-fit: contain; filter: brightness(0) invert(1); opacity: .5; transition: opacity .3s; }
.marquee__item:hover img { opacity: .9; }
.marquee__link { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- Sections ---------- */
.section { padding: clamp(80px, 11vw, 140px) 0; }
.section--tight { padding: clamp(40px, 6vw, 80px) 0; }
/* Section juste sous la bande de chiffres : la bande sert déjà de séparation, on remonte le titre pour qu'il soit visible dès l'arrivée */
.stats + .section { padding-top: clamp(48px, 4vw, 64px); }
.section--soft { background: var(--soft); }
.section--ink { background: var(--night); color: var(--white); }
.section--ink .section__lede { color: rgba(255, 255, 255, .7); }
.section__head { max-width: 760px; margin-bottom: 56px; }
.section__head.center { margin-left: auto; margin-right: auto; }
.section__head .btn { margin-top: 28px; }
.section__lede { max-width: 620px; margin-top: 20px; font-size: 18px; color: var(--muted); }
.big-question { font-size: clamp(26px, 3vw, 36px); font-weight: 600; letter-spacing: -0.025em; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.split__aside { position: sticky; top: 120px; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split__aside { position: static; }
}

/* ---------- Études de cas ---------- */
.cases { display: grid; gap: 24px; }
.case {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0;
  background: var(--surface); border-radius: var(--radius-xl); overflow: hidden;
}
.case__media { position: relative; min-height: 380px; background: linear-gradient(160deg, var(--red-50), var(--red-100)); }
.case__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .6s var(--ease), transform .8s var(--ease); }
.case:hover .case__media img { filter: grayscale(0); transform: scale(1.03); }
.case__initials {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 400 clamp(64px, 9vw, 120px)/1 var(--font-logo); color: var(--red); opacity: .9;
}
.case__kpi {
  position: absolute; left: 20px; bottom: 20px; padding: 10px 16px; border-radius: var(--pill);
  background: var(--surface); color: var(--ink); font: 500 13px/1 var(--font-alt);
}
.case__kpi b { color: var(--red); font: 700 18px/1 var(--font); }
.case__body { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; gap: 14px; }
.case__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.case__name { font: 600 12px/1 var(--font-alt); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.case__status {
  padding: 5px 10px; border-radius: var(--pill); background: var(--red); color: var(--white);
  font: 700 10px/1 var(--font-alt); letter-spacing: .1em; text-transform: uppercase;
}
.case h3, .case h1 { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.025em; line-height: 1.1; }
.case__role { margin-top: -8px; font-size: 14px; color: var(--muted); }
/* Résultats clés : la partie la plus visible de la carte */
.case__results { display: grid; gap: 8px; margin: 4px 0 2px; }
.case__results li { display: flex; gap: 10px; align-items: baseline; font: 600 clamp(16px, 1.5vw, 19px)/1.3 var(--font); letter-spacing: -0.01em; }
.case__results li::before { content: '✓'; flex: none; color: var(--red); font-weight: 700; }
.case__story { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 6px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.case__story dt { margin-bottom: 6px; font: 600 11px/1 var(--font-alt); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.case__story dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 1000px) { .case__story { grid-template-columns: 1fr; gap: 14px; } }
.case__text { color: var(--ink-2); }
/* Carte finale du carrousel : appel à l'action en rouge */
.case--cta {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  min-height: 380px; padding: clamp(32px, 5vw, 64px); text-align: center;
  background: var(--red); color: var(--white);
}
.case--cta .case__name { color: var(--pink-100); }
.case--cta .big-question { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.05; }
.case--cta .case__text { max-width: 460px; color: var(--pink-50); }
.case--cta .btn { margin-top: 12px; }
/* Landing : carrousel en boucle, slide active au centre, voisines atténuées (voir main.js) */
.cases-slider__viewport {
  width: 100vw; margin-left: calc(50% - 50vw); /* déborde du conteneur pour laisser voir les voisines */
  overflow: hidden; padding: 6px 0;
}
.cases-slider .cases {
  position: relative; /* référence des offsetLeft lus en JS */
  display: flex; gap: clamp(14px, 2vw, 28px); padding: 0 8vw;
  overflow-x: auto; scroll-snap-type: x mandatory; /* repli sans JS */
}
.cases-slider .case { flex: 0 0 min(1000px, 84vw); scroll-snap-align: center; }
.cases-slider.is-ready .cases {
  overflow: visible; padding: 0; touch-action: pan-y; user-select: none;
  transition: transform .75s var(--ease); will-change: transform;
}
.cases-slider.is-ready .case { opacity: .38; transform: scale(.92); cursor: pointer; transition: opacity .6s var(--ease), transform .75s var(--ease); }
.cases-slider.is-ready .case.is-active { opacity: 1; transform: none; cursor: auto; }
.cases-slider.is-jumping .cases, .cases-slider.is-jumping .case, .cases-slider.is-dragging .cases { transition: none; }
.cases-slider .case img { pointer-events: none; }
.cases-slider__nav { display: flex; justify-content: center; margin-top: 28px; }
.cases-slider__dots { display: flex; gap: 8px; }
.cases-slider__dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--pill); background: var(--red-100); cursor: pointer;
  transition: width .4s var(--ease), background .3s;
}
.cases-slider__dots button[aria-current="true"] { width: 28px; background: var(--red); }
@media (max-width: 800px) {
  .case { grid-template-columns: 1fr; }
  .case__media { min-height: 260px; }
  /* Carte active plus étroite et voisines moins réduites/atténuées : on les voit mieux de chaque côté */
  .cases-slider .cases { gap: 10px; }
  .cases-slider .case { flex-basis: 76vw; }
  .cases-slider.is-ready .case { opacity: .5; transform: scale(.95); }
  .cases-slider.is-ready .case.is-active { opacity: 1; transform: none; }
}

/* ---------- Services ---------- */
.services { border-top: 1px solid var(--line); }
.service {
  display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 28px 0;
  border-bottom: 1px solid var(--line); transition: padding .3s var(--ease);
}
.service:hover { padding-left: 10px; }
.service__num { font: 600 14px/1.6 var(--font-alt); color: var(--red); }
.service h3 { font-size: clamp(22px, 2.4vw, 30px); }
.service p { margin-top: 8px; color: var(--muted); max-width: 560px; }

/* ---------- Méthode ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: s; }
.step { perspective: 1000px; }
/* Carte 3D : inclinée selon le curseur (--rx/--ry), reflet et liseré lumineux qui suivent le curseur (--mx/--my).
   Le contenu est posé à différentes profondeurs (translateZ) pour un léger effet de parallaxe. */
.step__card {
  position: relative; height: 100%; padding: 30px 26px 34px; border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(160deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 55%);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .7s var(--ease), box-shadow .7s var(--ease), border-color .5s var(--ease);
}
.step.is-tilting .step__card { transition: transform .15s ease-out, box-shadow .7s var(--ease), border-color .5s var(--ease); }
.step:hover .step__card { border-color: rgba(255, 255, 255, .22); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .02); }
.step__num { display: block; font: 400 56px/1 var(--font-logo); color: var(--red); margin-bottom: 26px; transform: translateZ(40px); }
.step__period { font: 600 11px/1 var(--font-alt); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: 10px; transform: translateZ(24px); }
.step h3 { margin-bottom: 12px; transform: translateZ(24px); }
.step__text { color: rgba(255, 255, 255, .78); font-size: 15px; transform: translateZ(12px); }
/* Reflet doux sous le curseur */
.step__glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .10), rgba(255, 255, 255, .03) 35%, transparent 65%);
  transition: opacity .5s var(--ease);
}
/* Liseré : la bordure s'éclaire près du curseur */
.step__card::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity .5s var(--ease);
}
.step:hover .step__glare, .step:hover .step__card::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .step__card { transform: none; transition: none; } }
@media (max-width: 1000px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Formats : téléphone + réseaux ---------- */
.formats__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.formats__visual { display: flex; align-items: center; justify-content: center; gap: clamp(22px, 3vw, 44px); }
.formats__networks { display: flex; flex-direction: column; gap: 16px; }
.formats__networks li {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 10px 24px -12px rgba(0, 0, 0, .25);
  animation: float 3.6s ease-in-out infinite;
}
.formats__networks li:nth-child(2) { animation-delay: .4s; }
.formats__networks li:nth-child(3) { animation-delay: .8s; }
.formats__networks li:nth-child(4) { animation-delay: 1.2s; }
.formats__networks li:nth-child(5) { animation-delay: 1.6s; }
.formats__networks svg { width: 28px; height: 28px; }
@keyframes float { 50% { transform: translateY(-10px); } }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Téléphone : cadre sombre, îlot, écran 9:16 */
.phone {
  position: relative; flex: none; width: clamp(230px, 22vw, 290px); padding: 10px; border-radius: 46px;
  background: #111114; box-shadow: inset 0 0 0 2px #2b2b30, 0 50px 80px -40px rgba(0, 0, 0, .55), 0 18px 30px -18px rgba(0, 0, 0, .35);
}
.phone::before { content: ''; position: absolute; z-index: 3; top: 20px; left: 50%; width: 30%; height: 22px; border-radius: 20px; background: #111114; transform: translateX(-50%); }
.phone__screen { position: relative; aspect-ratio: 9 / 16; border-radius: 36px; overflow: hidden; background: var(--red-50); }
.phone__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .6s var(--ease); }
.phone__slide.is-on { opacity: 1; }
.phone__slide video { width: 100%; height: 100%; object-fit: cover; }
.phone__placeholder {
  display: grid; place-items: center; height: 100%;
  background: linear-gradient(160deg, var(--red-50), var(--red-100));
  font: 400 clamp(64px, 7vw, 92px)/1 var(--font-logo); color: var(--red);
}
.phone__name {
  position: absolute; left: 14px; bottom: 16px; padding: 7px 12px; border-radius: var(--pill);
  background: rgba(17, 17, 20, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; font: 600 12px/1 var(--font-alt);
}
/* Barres de progression façon « stories » */
.phone__progress { position: absolute; z-index: 2; top: 52px; left: 14px; right: 14px; display: flex; gap: 4px; }
.phone__progress span { flex: 1; height: 3px; border-radius: 3px; background: rgba(17, 17, 20, .2); overflow: hidden; }
.phone__progress i { display: block; height: 100%; width: 0; background: var(--red); }
.formats__text h2 { max-width: 14ch; }
.formats__text h2 em { color: var(--red); }
.formats__hook { margin-top: 20px; font-size: clamp(18px, 1.6vw, 21px); font-weight: 600; letter-spacing: -0.01em; }
.formats__desc { max-width: 46ch; margin: 14px 0 32px; font-size: 17px; color: var(--muted); }
@media (max-width: 900px) {
  .formats__inner { grid-template-columns: 1fr; }
  .formats__text { order: -1; text-align: center; }
  .formats__text h2, .formats__desc { margin-left: auto; margin-right: auto; }
}
@media (max-width: 520px) {
  .formats__visual { flex-direction: column-reverse; gap: 22px; }
  .formats__networks { flex-direction: row; gap: 10px; }
  .formats__networks li { width: 48px; height: 48px; border-radius: 12px; }
  .formats__networks svg { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) { .formats__networks li { animation: none; } }

/* ---------- Citation ---------- */
.quote { position: relative; background: var(--red-50); color: var(--ink); padding: clamp(90px, 12vw, 160px) 0; overflow: hidden; }
.quote__bg { position: absolute; inset: 0; }
.quote__bg img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: luminosity; opacity: .12; filter: grayscale(1); }
.quote__inner { position: relative; }
.quote blockquote { margin: 0 auto; max-width: 900px; } /* bloc centré dans la page, texte ferré à gauche */
/* Citation en grand, mots-clés en italique rouge comme le titre du hero. */
.quote blockquote { position: relative; isolation: isolate; } /* le guillemet (z-index -1) reste derrière le texte, devant le fond */
.quote__mark {
  position: absolute; left: -0.08em; top: -0.42em; z-index: -1;
  font: 600 clamp(120px, 14vw, 190px)/1 var(--font); color: var(--red); opacity: .15; pointer-events: none;
}
.quote p { font: 500 clamp(26px, 3.2vw, 40px)/1.2 var(--font); letter-spacing: -0.03em; text-wrap: pretty; }
.quote p em { font-style: italic; font-weight: 500; color: var(--red); }
.quote footer { display: flex; align-items: center; gap: 14px; margin-top: 32px; font: 600 12px/1.4 var(--font-alt); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.quote footer::before { content: ''; width: 32px; height: 1px; background: currentColor; }

/* ---------- Pour qui ---------- */
.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 40px auto; max-width: 860px; }
.tags li { padding: 13px 22px; border-radius: var(--pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-weight: 500; }
.tags__accent { box-shadow: inset 0 0 0 1px var(--red) !important; }
.tags__last { font-style: italic; color: var(--red); box-shadow: inset 0 0 0 1.5px var(--red) !important; }

/* ---------- Offres ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 36px 30px 30px; border-radius: var(--radius-xl); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
}
.plan h3 { font-size: 28px; }
.plan__pitch { color: var(--muted); }
.plan__price { margin-top: 18px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan__price b { font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.plan__price span { color: var(--muted); font-size: 15px; }
.plan__commit { font: 600 11px/1 var(--font-alt); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.plan__list { margin: 20px 0 28px; display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 22px; flex: 1; }
.plan__list li { position: relative; padding-left: 28px; font-size: 15px; }
.plan__list li::before {
  content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--red-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' fill='none' stroke='%23FF5A47' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;
}
.plan--pop { background: var(--red); color: var(--white); box-shadow: 0 30px 60px -30px rgba(var(--red-rgb), .7); }
.plan--pop .plan__pitch, .plan--pop .plan__price span { color: rgba(255, 255, 255, .8); }
.plan--pop .plan__commit { color: var(--white); }
.plan--pop .plan__list { border-color: rgba(255, 255, 255, .25); }
.plan--pop .plan__list li::before { background-color: rgba(255, 255, 255, .95); }
.plan__badge {
  position: absolute; top: 20px; right: 20px; padding: 7px 12px; border-radius: var(--pill);
  background: var(--white); color: var(--red); font: 700 11px/1 var(--font-alt); letter-spacing: .12em; text-transform: uppercase;
}
/* Encart « Un besoin particulier ? » sous les formules */
.custom-offer {
  display: flex; align-items: center; justify-content: space-between; gap: 24px 40px;
  max-width: 1000px; margin: 48px auto 0; padding: clamp(26px, 3.5vw, 40px);
  border-radius: var(--radius-xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.custom-offer .eyebrow { margin-bottom: 12px; }
.custom-offer h3 { font-size: clamp(22px, 2.2vw, 28px); }
.custom-offer__text { max-width: 560px; margin-top: 10px; color: var(--muted); font-size: 15px; }
.custom-offer .btn { flex: none; }
@media (max-width: 800px) { .custom-offer { flex-direction: column; align-items: flex-start; } }
/* Libellé long (« Réserver mon audit offert ») : centré s'il passe sur deux lignes dans une carte étroite */
.plan .btn { padding: 10px 18px; font-size: 13px; line-height: 1.25; text-align: center; }
/* Formules en 3D (CSS seul) : les cartes latérales pivotent vers le centre, la formule populaire avance.
   Propriétés rotate/translate/scale (et non transform) pour ne pas entrer en conflit avec l'apparition .reveal. */
@media (min-width: 901px) {
  .plans { perspective: 1600px; }
  .js .plans .plan {
    transition: opacity .9s var(--ease), filter .9s var(--ease), transform .9s var(--ease),
      rotate .6s var(--ease), translate .6s var(--ease), scale .6s var(--ease), box-shadow .6s var(--ease);
  }
  .plans .plan:first-child { rotate: y 12deg; transform-origin: right center; }
  .plans .plan:last-child  { rotate: y -12deg; transform-origin: left center; }
  .plans .plan--pop { z-index: 1; translate: 0 -12px; scale: 1.04; }
  .plans .plan:hover { rotate: y 0deg; translate: 0 -8px; box-shadow: inset 0 0 0 1px var(--line), 0 40px 70px -35px rgba(0, 0, 0, .35); }
  .plans .plan--pop:hover { translate: 0 -18px; box-shadow: 0 44px 80px -34px rgba(var(--red-rgb), .75); }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  .js .plans .plan { transition: none; }
}
.plans__note { max-width: 720px; margin: 40px auto 0; text-align: center; color: var(--muted); font-size: 15px; }
@media (max-width: 900px) {
  .plans { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0; cursor: pointer; list-style: none;
  font-size: clamp(18px, 1.8vw, 21px); font-weight: 600; letter-spacing: -0.01em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary { -webkit-tap-highlight-color: transparent; }
/* « + » → « − » : la pastille se remplit de rouge et fait un demi-tour pendant que la barre verticale se rétracte. */
.faq__icon {
  position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--soft);
  transition: background .35s var(--ease), box-shadow .35s var(--ease), transform .55s cubic-bezier(.34, 1.4, .5, 1);
}
.faq__icon::before, .faq__icon::after {
  content: ''; position: absolute; left: 11px; right: 11px; top: 17px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .45s var(--ease), background .35s var(--ease), opacity .3s;
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item summary:hover .faq__icon { transform: scale(1.1); box-shadow: inset 0 0 0 1px var(--red-100); }
.faq__item summary:active .faq__icon { transform: scale(.92); transition-duration: .15s; }
.faq__item[open] .faq__icon { background: var(--red); transform: rotate(180deg); box-shadow: 0 6px 16px -6px rgba(var(--red-rgb), .6); }
.faq__item[open] summary:hover .faq__icon { transform: rotate(180deg) scale(1.1); }
.faq__item[open] summary:active .faq__icon { transform: rotate(180deg) scale(.92); }
.faq__item[open] .faq__icon::before, .faq__item[open] .faq__icon::after { background: #fff; }
.faq__item[open] .faq__icon::after { transform: rotate(90deg) scaleX(0); opacity: 0; }
/* Réponse : déroulé en hauteur là où le navigateur sait animer <details>, sinon simple fondu. */
.faq__item[open] .faq__answer { animation: faqIn .45s var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq__item::details-content { height: 0; overflow: clip; transition: height .45s var(--ease), content-visibility .45s allow-discrete; }
  .faq__item[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .faq__icon, .faq__icon::before, .faq__icon::after, .faq__item::details-content { transition: none; }
  .faq__item[open] .faq__answer { animation: none; }
}
.faq__answer { padding: 0 56px 26px 0; color: var(--muted); }
.faq__answer p + p { margin-top: 12px; }

/* ---------- CTA final ---------- */
.final-cta {
  position: relative; overflow: hidden; text-align: center;
  background: var(--red); color: var(--white); border-radius: var(--radius-xl);
  padding: clamp(56px, 8vw, 100px) clamp(24px, 6vw, 80px);
}
.final-cta::before {
  content: ''; position: absolute; width: 700px; height: 700px; left: 50%; top: -420px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255, 255, 255, .2), transparent 60%);
}
.final-cta > * { position: relative; }
.final-cta h2 { max-width: 16ch; margin: 0 auto; text-wrap: balance; }
.final-cta__text { max-width: 620px; margin: 22px auto 34px; color: rgba(255, 255, 255, .88); font-size: 18px; }
.checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 28px; font: 500 14px/1 var(--font-alt); }
.checks li::before { content: '✓'; margin-right: 8px; }

/* =====================================================================
   Site de l'agence (Accueil, À propos, Méthode) : mise en page de prsnl.io
   (bandes noires / claires, grands titres légers + italique rouge, cartes à liseré, pilules « + »)
   ===================================================================== */

/* Pilule « + » : rond avec un plus, puis le libellé */
.pill {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 5px 24px 5px 5px;
  border-radius: var(--pill); font: 500 15px/1 var(--font); text-decoration: none; white-space: nowrap;
  transition: transform .2s var(--ease), box-shadow .2s;
}
.pill:hover { transform: translateY(-2px); }
.pill__plus { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; transition: transform .4s var(--ease); }
.pill__plus::before, .pill__plus::after { content: ''; position: absolute; left: 12px; right: 12px; top: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.pill__plus::after { transform: rotate(90deg); }
.pill:hover .pill__plus { transform: rotate(90deg); }
.pill--light { background: var(--white); color: var(--black); }
.pill--light .pill__plus { background: var(--black); color: var(--white); }
.pill--dark { background: var(--grey); color: var(--white); }
.pill--dark .pill__plus { background: var(--white); color: var(--black); }
.pill--red { background: var(--red); color: var(--white); box-shadow: 0 10px 30px -12px rgba(var(--red-rgb), .7); }
.pill--red .pill__plus { background: var(--white); color: var(--red); }
.pill--caps { padding: 5px 30px; font-weight: 600; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }

/* Lignes verticales discrètes des en-têtes (4 colonnes, calées sur le conteneur) */
.grid-lines { position: relative; }
.grid-lines::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); pointer-events: none;
  width: min(calc(var(--container) - 2 * var(--gutter)), calc(100% - 2 * var(--gutter)));
  background: linear-gradient(to right, var(--line) 1px, transparent 1px) 0 0 / 25% 100%;
  border-right: 1px solid var(--line);
}
.grid-lines > * { position: relative; }

/* Titres de section : même typo que les h2 de la landing, jamais de trait au-dessus */
.site-title { margin-bottom: clamp(36px, 5vw, 56px); text-align: center; text-wrap: balance; }
.site-title em { color: var(--red); }
.site-title--left { text-align: left; }

/* Grand titre (hero de l'accueil, en-têtes des pages) : même typo que le hero de la landing */
.intro__title { max-width: 26ch; margin: 0 auto; font-size: clamp(38px, 5.6vw, 76px); font-weight: 600; letter-spacing: -0.035em; line-height: .95; text-wrap: balance; }
.intro__title em { color: var(--red); font-weight: 500; }

/* ---------- Accueil : hero en viseur de caméra, puis formats en salle de montage (sans image) ---------- */
/* Respiration du viseur : entre le header et le cadre, et sous le cadre. --peek : hauteur de la section suivante visible à l'arrivée */
.intro { --head: 84px; --air: clamp(24px, 4vh, 48px); --peek: clamp(110px, 18vh, 200px); margin-top: calc(-1 * var(--head)); padding: calc(var(--head) + var(--air)) 0 calc(2 * var(--air)); background: var(--paper); }
.intro__frame {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  min-height: calc(100svh - var(--head) - 3 * var(--air) - var(--peek) - var(--wp-admin--admin-bar--height, 0px)); padding-block: clamp(24px, 4.5vh, 48px);
}
/* Coins de cadrage du viseur */
.intro__corner { position: absolute; width: clamp(22px, 3vw, 40px); aspect-ratio: 1; pointer-events: none; color: var(--ink); }
.intro__corner::before, .intro__corner::after { content: ''; position: absolute; background: currentColor; }
.intro__corner::before { left: 0; right: 0; height: 2px; }
.intro__corner::after { top: 0; bottom: 0; width: 2px; }
.intro__corner--tl { top: 0; left: var(--gutter); }
.intro__corner--tr { top: 0; right: var(--gutter); }
.intro__corner--bl { bottom: 0; left: var(--gutter); }
.intro__corner--br { bottom: 0; right: var(--gutter); }
.intro__corner--tl::before, .intro__corner--tr::before { top: 0; }
.intro__corner--bl::before, .intro__corner--br::before { bottom: 0; }
.intro__corner--tl::after, .intro__corner--bl::after { left: 0; }
.intro__corner--tr::after, .intro__corner--br::after { right: 0; }

.intro__hud, .intro__tc { font: 500 12px/1.4 var(--font-alt); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.intro__hud { display: flex; align-items: baseline; gap: 18px; padding-inline: clamp(12px, 2vw, 24px); }
.intro__rec { display: inline-flex; align-items: center; gap: 8px; color: var(--red); font-weight: 700; }
.intro__rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); animation: recBlink 1.6s steps(1) infinite; }
@keyframes recBlink { 50% { opacity: .15; } }
.intro__eyebrow { display: flex; flex: 1; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; }

.intro .intro__title { max-width: 18ch; margin: 0; padding-inline: clamp(12px, 2vw, 24px); font-size: clamp(42px, min(5.8vw, 7.6vh), 88px); line-height: .98; }
.intro .intro__title em { display: inline-block; margin-top: .06em; }
/* Sous-titres karaoké (main.js) : le mot « prononcé » passe sur une pastille rouge, les précédents restent rouges */
[data-karaoke] .w { border-radius: .14em; transition: background .12s, color .12s, box-shadow .12s; }
.js .intro [data-karaoke] .w { opacity: 0; filter: none; transform: none; animation: none; }
.js .intro [data-karaoke] .w.is-said { opacity: 1; animation: sayIn .28s var(--ease); }
[data-karaoke] .w.is-on { background: var(--red); color: var(--white); box-shadow: -.03em 0 0 .04em var(--red); }
@keyframes sayIn { from { opacity: 0; transform: translateY(.12em) scale(.96); } }

.intro__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-inline: clamp(12px, 2vw, 24px); }
.intro__pitch { max-width: 360px; }
.intro__lede { margin-bottom: 24px; font-size: clamp(16px, 1.4vw, 18px); color: var(--muted); }
.intro__tc { font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: .1em; }
@media (max-width: 960px) {
  .intro { --head: 72px; --air: clamp(20px, 4vh, 40px); --peek: 72px; }
}
@media (max-width: 640px) {
  .intro__hud { flex-wrap: wrap; gap: 6px 14px; letter-spacing: .1em; }
  .intro__eyebrow { flex-basis: 100%; }
  .intro__foot { flex-direction: column; align-items: flex-start; }
  .intro__tc { align-self: flex-end; margin-top: -8px; }
}

/* Derrière le fond blanc (main.js, heroHalo) : l'écran de réglages de la caméra, calé sur le cadre du viseur,
   invisible sauf sous le halo du curseur (bords complètement estompés). Pas de couleur de fond : seuls les
   repères apparaissent, en gris clair. */
.intro { position: relative; --set: #4A4A4A; --set-line: rgba(255, 255, 255, .1); }
.intro__frame { z-index: 1; }
.intro__behind {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; user-select: none; overflow: hidden;
  padding: calc(var(--head) + var(--air)) 0 var(--air);
  -webkit-mask-image: linear-gradient(transparent, transparent); mask-image: linear-gradient(transparent, transparent);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; will-change: mask-image;
}
.intro__settings {
  position: relative; height: 100%;
  font: 500 13px/1 var(--font-alt); letter-spacing: .12em; text-transform: uppercase; color: var(--set); font-variant-numeric: tabular-nums;
}
.intro__settings > * { position: absolute; }
/* Grille des tiers, croix centrale, niveau */
.intro__third { background: var(--set-line); }
.intro__third--v1, .intro__third--v2 { top: 0; bottom: 0; width: 1px; }
.intro__third--h1, .intro__third--h2 { left: var(--gutter); right: var(--gutter); height: 1px; }
.intro__third--v1 { left: calc(var(--gutter) + (100% - 2 * var(--gutter)) / 3); }
.intro__third--v2 { left: calc(var(--gutter) + (100% - 2 * var(--gutter)) * 2 / 3); }
.intro__third--h1 { top: 33.333%; }
.intro__third--h2 { top: 66.666%; }
.intro__cross { left: 50%; top: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%);
  background: linear-gradient(var(--set), var(--set)) center / 100% 1.5px no-repeat, linear-gradient(var(--set), var(--set)) center / 1.5px 100% no-repeat; }
.intro__level { left: 50%; top: 50%; width: 260px; height: 1.5px; transform: translate(-50%, -50%);
  background: linear-gradient(to right, var(--set) 0 90px, transparent 90px calc(100% - 90px), var(--set) calc(100% - 90px)); }
.intro__level span { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); }
/* Collimateur de mise au point, sur l'intersection haut-droite des tiers */
.intro__af {
  left: calc(var(--gutter) + (100% - 2 * var(--gutter)) * 2 / 3); top: 33.333%; width: 120px; height: 84px; transform: translate(-50%, -50%);
  --c: var(--red); --l: 18px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) 2px, linear-gradient(var(--c), var(--c)) top left / 2px var(--l),
    linear-gradient(var(--c), var(--c)) top right / var(--l) 2px, linear-gradient(var(--c), var(--c)) top right / 2px var(--l),
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) 2px, linear-gradient(var(--c), var(--c)) bottom left / 2px var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) 2px, linear-gradient(var(--c), var(--c)) bottom right / 2px var(--l);
  background-repeat: no-repeat; opacity: .75; transition: scale .35s var(--ease), opacity .35s var(--ease);
}
/* Il suit le curseur (main.js) : un peu plus large et plus pâle tant qu'il cherche, puis se resserre (mise au point faite) */
.intro__af.is-hunting { scale: 1.12; opacity: .5; }
.intro__af span { position: absolute; left: 0; top: calc(100% + 10px); color: var(--red); font-size: 11px; }
/* Bandeau d'état (sous le HUD, à droite) et histogramme */
.intro__status { top: clamp(64px, 9vh, 92px); right: calc(var(--gutter) + clamp(12px, 2vw, 24px)); display: flex; gap: 28px; align-items: center; }
.intro__battery { display: inline-flex; align-items: center; gap: 8px; }
.intro__battery i { width: 26px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--set);
  background: linear-gradient(var(--set), var(--set)) 3px 3px / calc(100% - 6px) 6px no-repeat; }
.intro__histo { top: calc(clamp(64px, 9vh, 92px) + 40px); right: calc(var(--gutter) + clamp(12px, 2vw, 24px)); display: flex; align-items: flex-end; gap: 2px; width: 150px; height: 56px;
  box-shadow: 0 1px 0 var(--set-line); }
.intro__histo i { flex: 1; background: var(--set); opacity: .45; }
/* Réglages d'exposition, en bas à côté du timecode */
.intro__expo { bottom: clamp(24px, 4.5vh, 48px); right: calc(var(--gutter) + clamp(12px, 2vw, 24px) + 150px); display: flex; gap: 26px; align-items: center; }
.intro__scale { letter-spacing: .08em; }
.intro__scale b { color: var(--red); font-weight: 700; }
@media (max-width: 1100px), (prefers-reduced-motion: reduce) { .intro__behind { display: none; } }

/* Salle de montage */
.edit { padding: clamp(72px, 9vw, 112px) 0 clamp(72px, 9vw, 120px); background: var(--night); color: var(--white); }
.edit__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(40px, 7vw, 110px); }
.edit__copy { max-width: 560px; }
.edit__title em { color: var(--red); }
.edit__hook { margin-top: 28px; font-size: clamp(19px, 1.8vw, 22px); font-weight: 600; letter-spacing: -0.01em; }
.edit__text { margin: 14px 0 34px; font-size: 17px; color: rgba(255, 255, 255, .62); }
/* Un texte par étape, empilés au même endroit : la hauteur reste celle du plus long, seul l'actif est visible */
.edit__texts { display: grid; }
.edit__texts .edit__text { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s; }
.edit__texts .edit__text.is-on { opacity: 1; visibility: visible; }

.edit__monitor { width: clamp(220px, 19vw, 260px); }
.edit__screen {
  position: relative; display: grid; place-items: center; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: 26px; background: var(--grey);
  box-shadow: 0 40px 80px -40px rgba(var(--red-rgb), .55);
}
.edit__screen-hud {
  position: absolute; top: 18px; left: 20px; right: 20px; display: flex; align-items: center; gap: 8px;
  font: 600 11px/1 var(--font-alt); letter-spacing: .14em; color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums;
}
.edit__screen-title, .edit__caption { grid-area: 1 / 1; box-sizing: border-box; width: 100%; min-width: 0; margin: 0; transition: opacity .45s var(--ease), filter .45s var(--ease), transform .45s var(--ease); }
.edit__screen-title {
  padding: 0 18px; text-align: center; text-wrap: balance; hyphens: manual;
  font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; letter-spacing: -0.04em; line-height: .92;
}
.edit__caption {
  align-self: end; margin-bottom: 18%; padding: 0 18px; text-align: center;
  font-size: 17px; font-weight: 800; line-height: 1.5; text-transform: uppercase; letter-spacing: .01em;
}
.edit__caption span { padding: 0 .12em; border-radius: .2em; transition: background .12s, color .12s; }
.edit__caption span.is-on { background: var(--red); }
.edit__screen-title:not(.is-on), .edit__caption:not(.is-on) { opacity: 0; filter: blur(8px); transform: scale(.96); }

.edit__timeline { margin-top: clamp(36px, 5vw, 56px); padding-block: 16px 8px; overflow-x: auto; scrollbar-width: none; } /* overflow-x coupe aussi en vertical : marge pour l'étiquette du curseur et le bas de la tête de lecture */
.edit__timeline::-webkit-scrollbar { display: none; }
.edit__tracks {
  --t: 0; position: relative; min-width: 640px;
  display: grid; grid-template-columns: 34px 1fr; grid-template-rows: 26px 64px 40px 52px; gap: 8px 12px;
}
.edit__ruler {
  grid-column: 2; position: relative;
  background: repeating-linear-gradient(to right, rgba(255, 255, 255, .22) 0 1px, transparent 1px 2.5%) bottom / 100% 6px no-repeat;
}
.edit__ruler span { position: absolute; top: 0; font: 500 11px/1 var(--font-alt); letter-spacing: .08em; color: rgba(255, 255, 255, .45); font-variant-numeric: tabular-nums; }
.edit__label { align-self: center; font: 600 11px/1 var(--font-alt); letter-spacing: .12em; color: rgba(255, 255, 255, .4); }
.edit__track { display: flex; gap: 4px; min-width: 0; }
.edit__track li { display: flex; min-width: 0; }
.edit__clip {
  flex: 1; min-width: 0; padding: 0 14px; border: 0; border-radius: 10px; cursor: pointer; text-align: left;
  background: rgba(var(--red-rgb), .32); color: var(--white); font: 600 15px/1.1 var(--font); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .3s;
}
.edit__clip:hover { background: rgba(var(--red-rgb), .55); }
.edit__clip.is-on { background: var(--red); }
.edit__track--subs span {
  flex: 1; display: flex; align-items: center; min-width: 0; padding: 0 12px; border-radius: 8px;
  background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .6); font: 500 12px/1 var(--font-alt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.edit__track--audio { position: relative; }
.edit__wave { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; }
.edit__wave i { flex: 1; border-radius: 2px; background: rgba(255, 255, 255, .16); }
.edit__wave--played { clip-path: inset(0 calc(100% - var(--t) * 100%) 0 0); }
.edit__wave--played i { background: var(--pink-100); }
.edit__playhead {
  position: absolute; top: 0; bottom: -6px; left: calc(46px + (100% - 46px) * var(--t));
  width: 2px; margin-left: -1px; background: var(--red); pointer-events: none;
}
.edit__playhead span {
  position: absolute; top: -4px; left: 50%; transform: translateX(-50%); padding: 4px 7px; border-radius: 6px;
  background: var(--red); font: 600 11px/1 var(--font-alt); letter-spacing: .06em; font-variant-numeric: tabular-nums; white-space: nowrap;
}

.edit__export { display: flex; align-items: center; gap: 20px; margin-top: 44px; }
.edit__export-label { font: 600 11px/1 var(--font-alt); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .4); }
.edit__networks { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.edit__networks li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255, 255, 255, .78); }
.edit__networks svg { width: 22px; height: 22px; }
.edit__networks li:nth-child(2) svg path { fill: var(--white); }
.edit__cta--bottom { display: none; margin-top: 40px; }

@media (max-width: 860px) {
  .edit__top { grid-template-columns: 1fr; }
  .edit__copy { max-width: none; }
  .edit__monitor { justify-self: center; width: min(260px, 70vw); }
  .edit__timeline { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .edit__export { flex-direction: column; align-items: flex-start; gap: 14px; }
  /* Mobile : le bouton passe en bas du bloc */
  .edit__copy .edit__cta { display: none; }
  .edit__cta--bottom { display: block; }
}
@media (max-width: 640px) {
  .edit__timeline { margin-inline: 0; padding-inline: 0; }
  .edit__tracks { min-width: 0; grid-template-columns: 20px 1fr; grid-template-rows: 22px 58px 32px 40px; gap: 6px 8px; }
  .edit__playhead { left: calc(28px + (100% - 28px) * var(--t)); }
  .edit__ruler span { font-size: 10px; }
  .edit__label { font-size: 10px; letter-spacing: .06em; }
  .edit__clip { padding: 0 6px; border-radius: 8px; font-size: 12px; white-space: normal; text-overflow: clip; }
  .edit__track--subs span { padding: 0 6px; font-size: 10px; text-overflow: clip; }
}

/* ---------- Services en parcours défilant (liste collante + illustration qui change) ---------- */
.flow { --flow-red: #E40102; --flow-red-rgb: 228, 1, 2; }
.flow__stage { display: grid; gap: 48px; }
.flow__title { margin-bottom: 0; } /* l'écart vient du gap de .flow__stage ; le titre se fige avec le bloc */
.flow__list { position: relative; }
.flow__steps { position: relative; display: flex; flex-direction: column; gap: clamp(48px, 8vw, 64px); }
.flow__rail { position: absolute; top: 23px; bottom: 23px; left: 22px; width: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.flow__rail::after {
  content: ''; position: absolute; inset: 0; transform-origin: top; transform: scaleY(var(--p, 1));
  background: linear-gradient(to bottom, #FF3030, var(--flow-red)); transition: transform .25s linear;
}
.flow-step__row { display: flex; gap: 22px; }
.flow-step__icon {
  position: relative; z-index: 1; flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line);
  transition: background .5s, color .5s, box-shadow .5s, transform .6s var(--ease);
}
.flow-step__icon svg { width: 20px; height: 20px; }
.flow-step.is-active .flow-step__icon {
  background: var(--flow-red); color: var(--white); transform: scale(1.08);
  box-shadow: 0 0 0 8px rgba(var(--flow-red-rgb), .14), 0 0 30px rgba(var(--flow-red-rgb), .5);
}
.flow-step__body { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.flow-step__num { font: 600 13px/1 var(--font-alt); letter-spacing: .08em; color: var(--flow-red); }
.flow-step__title { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.025em; line-height: 1.1; transition: color .5s; }
.flow-step__text { max-width: 440px; font-size: 16px; color: var(--muted); transition: color .5s; }

/* Écran sombre des illustrations */
.flow-screen {
  position: relative; aspect-ratio: 1; width: min(100%, 540px, calc(100svh - 200px)); overflow: hidden; color: var(--white);
  border-radius: var(--radius-xl); background: radial-gradient(80% 70% at 50% 25%, #2B0D0F 0%, #111014 70%), #111014;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55);
}
.flow-screen::before {
  content: ''; position: absolute; inset: 0; background-size: 32px 32px;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000, transparent); mask-image: radial-gradient(70% 60% at 50% 45%, #000, transparent);
}
.flow-screen--inline { width: 100%; max-width: 480px; margin-top: 24px; }
.flow__aside { display: none; }

.flow-scene { position: absolute; inset: 0; opacity: 0; filter: blur(10px); transform: scale(.94); transition: opacity .7s, filter .7s, transform .9s var(--ease); }
.flow-scene.is-active { opacity: 1; filter: none; transform: none; }
.flow-scene::after { content: attr(data-num); position: absolute; right: 6%; bottom: 1%; font: 400 clamp(64px, 9vw, 120px)/1 var(--font-logo); color: rgba(255, 255, 255, .05); }
.flow-scene:not(.is-active) *, .flow-scene:not(.is-active) ::before, .flow-scene:not(.is-active) ::after { animation-play-state: paused !important; }

.fs-chip {
  position: absolute; z-index: 3; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; white-space: nowrap; opacity: 0;
  border-radius: var(--pill); background: rgba(17, 16, 20, .86); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 600 clamp(11px, 2.6vw, 13px)/1 var(--font-alt);
}
.fs-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--flow-red); box-shadow: 0 0 8px rgba(var(--flow-red-rgb), .8); }
.flow-scene.is-active .fs-chip { animation: fsChip .7s var(--ease) var(--d, .5s) both; }
@keyframes fsChip { from { opacity: 0; transform: translate(-50%, -30%) scale(.9); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* 1. Stratégie : cible et radar */
.fs-target { position: absolute; top: 50%; left: 50%; width: 58%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.fs-sweep, .fs-ring { position: absolute; border-radius: 50%; }
.fs-sweep { inset: 0; background: conic-gradient(rgba(var(--flow-red-rgb), .45), rgba(var(--flow-red-rgb), 0) 25%, transparent); }
.flow-scene.is-active .fs-sweep { animation: fsSpin 5s linear infinite; }
.fs-ring { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.fs-ring:nth-child(2) { inset: 0; }
.fs-ring:nth-child(3) { inset: 17%; }
.fs-ring:nth-child(4) { inset: 34%; background: rgba(var(--flow-red-rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--flow-red-rgb), .6); }
.fs-cross { position: absolute; inset: -8%; }
.fs-cross::before, .fs-cross::after { content: ''; position: absolute; background: rgba(255, 255, 255, .12); }
.fs-cross::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.fs-cross::after { top: 50%; left: 0; right: 0; height: 1px; }
.fs-dot, .fs-ripple { position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; }
.fs-dot { background: #FF3030; box-shadow: 0 0 0 6px rgba(var(--flow-red-rgb), .25), 0 0 24px rgba(255, 48, 48, .9); }
.flow-scene.is-active .fs-dot { animation: fsDart 1s var(--ease) .3s both; }
.fs-ripple { opacity: 0; box-shadow: inset 0 0 0 2px var(--flow-red); }
.flow-scene.is-active .fs-ripple { animation: fsRipple 2.4s ease-out 1.2s infinite; }
@keyframes fsSpin { to { transform: rotate(1turn); } }
@keyframes fsDart { from { opacity: 0; transform: translate(-140px, -140px) scale(.4); } }
@keyframes fsRipple { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(7); } }

/* 2. Production vidéo : viseur vertical */
.fs-cam {
  position: absolute; top: 50%; left: 50%; height: 76%; aspect-ratio: 9 / 16; transform: translate(-50%, -50%); overflow: hidden;
  border-radius: 18px; background: #160C0D; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 60px -20px #000;
}
.fs-cam__footage {
  position: absolute; inset: -25%; filter: blur(8px);
  background: radial-gradient(34% 26% at 50% 34%, rgba(255, 170, 170, .35), transparent 70%), radial-gradient(48% 38% at 50% 62%, rgba(var(--flow-red-rgb), .6), transparent 70%), radial-gradient(40% 30% at 22% 90%, rgba(150, 0, 8, .7), transparent 70%);
}
.flow-scene.is-active .fs-cam__footage { animation: fsFootage 9s ease-in-out infinite alternate; }
.fs-cam__thirds {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(255, 255, 255, .14) 0 calc(33.33% + .5px), transparent 0 calc(66.66% - .5px), rgba(255, 255, 255, .14) 0 calc(66.66% + .5px), transparent 0),
              linear-gradient(transparent calc(33.33% - .5px), rgba(255, 255, 255, .14) 0 calc(33.33% + .5px), transparent 0 calc(66.66% - .5px), rgba(255, 255, 255, .14) 0 calc(66.66% + .5px), transparent 0);
}
.fs-cam__corner { position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .85); }
.fs-cam__corner:nth-of-type(3) { top: 6%; left: 8%; border-right: 0; border-bottom: 0; }
.fs-cam__corner:nth-of-type(4) { top: 6%; right: 8%; border-left: 0; border-bottom: 0; }
.fs-cam__corner:nth-of-type(5) { bottom: 8%; left: 8%; border-right: 0; border-top: 0; }
.fs-cam__corner:nth-of-type(6) { bottom: 8%; right: 8%; border-left: 0; border-top: 0; }
.fs-cam__rec { position: absolute; top: 11%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 6px; background: rgba(0, 0, 0, .45); font: 600 10px/1 var(--font-alt); letter-spacing: .1em; }
.fs-cam__rec::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--flow-red); }
.fs-cam__rec b { font-weight: 500; opacity: .8; }
.flow-scene.is-active .fs-cam__rec::before { animation: fsBlink 1.2s ease-in-out infinite; }
.fs-cam__focus { position: absolute; top: 34%; left: 50%; width: 38%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 8px; box-shadow: inset 0 0 0 1.5px #FFD25A; opacity: 0; }
.flow-scene.is-active .fs-cam__focus { animation: fsFocus 1.4s var(--ease) .6s both; }
.fs-cam__levels { position: absolute; right: 9%; bottom: 14%; display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.fs-cam__levels i { width: 4px; height: 100%; border-radius: 2px; background: linear-gradient(to top, #6BD38A 60%, #FFD25A 80%, var(--flow-red)); transform-origin: bottom; transform: scaleY(.3); }
.flow-scene.is-active .fs-cam__levels i { animation: fsLevel .9s ease-in-out calc(var(--i) * -.17s) infinite alternate; }
.fs-cam__scrub { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .2); }
.fs-cam__scrub i { position: absolute; inset: 0; background: var(--flow-red); transform-origin: left; transform: scaleX(.1); }
.flow-scene.is-active .fs-cam__scrub i { animation: fsScrub 8s linear infinite; }
@keyframes fsFootage { to { transform: translate(4%, -3%) scale(1.06); } }
@keyframes fsBlink { 50% { opacity: .2; } }
@keyframes fsFocus { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } 60% { opacity: 1; transform: translate(-50%, -50%) scale(.95); } 100% { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes fsLevel { to { transform: scaleY(1); } }
@keyframes fsScrub { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 3. Publication & diffusion : un contenu, cinq réseaux */
.fs-net { position: absolute; inset: 0; width: 100%; height: 100%; }
.fs-net line { stroke: rgba(var(--flow-red-rgb), .55); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.flow-scene.is-active .fs-net line { animation: fsDraw .8s var(--ease) calc(.25s + var(--i) * .08s) forwards; }
.fs-hub {
  position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 28%; background: linear-gradient(150deg, #FF3030, #A80001); box-shadow: 0 0 0 10px rgba(var(--flow-red-rgb), .12), 0 20px 50px -10px rgba(var(--flow-red-rgb), .7);
  font: 400 clamp(28px, 5vw, 46px)/1 var(--font-logo);
}
.flow-scene.is-active .fs-hub { animation: fsHub 2.6s var(--ease) infinite; }
.fs-node {
  position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: 13%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: #1B1719; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); opacity: 0;
}
.fs-node svg { width: 44%; height: 44%; }
.fs-node b {
  position: absolute; top: -6px; right: -10px; padding: 3px 6px; border-radius: var(--pill); background: var(--flow-red);
  font: 700 10px/1 var(--font-alt); opacity: 0;
}
.flow-scene.is-active .fs-node { animation: fsPop .6s var(--ease) calc(.6s + var(--i) * .1s) both; }
.flow-scene.is-active .fs-node b { animation: fsLike 3s var(--ease) calc(1.6s + var(--i) * .45s) infinite; }
@keyframes fsDraw { to { stroke-dashoffset: 0; } }
@keyframes fsHub { 50% { box-shadow: 0 0 0 18px rgba(var(--flow-red-rgb), 0), 0 20px 50px -10px rgba(var(--flow-red-rgb), .7); } }
@keyframes fsPop { from { opacity: 0; transform: translate(-50%, -50%) scale(.3); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes fsLike { 0%, 100% { opacity: 0; transform: translateY(6px) scale(.6); } 12%, 40% { opacity: 1; transform: none; } 55% { opacity: 0; transform: translateY(-8px); } }

/* Grand écran : la liste et l'écran restent collés pendant le défilement de la section */
@media (min-width: 1024px) {
  .flow { height: calc(var(--n, 3) * 75svh + 25svh); }
  .flow__stage {
    /* Figé au centre de la fenêtre sous l'en-tête (--stage-h : hauteur du bloc, mesurée en JS) */
    position: sticky; top: max(96px, calc(42px + 50svh - var(--stage-h, 0px) / 2)); align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vh, 48px) clamp(32px, 4vw, 64px);
  }
  .flow__title { grid-column: 1 / -1; }
  .flow__steps { gap: clamp(16px, 2.5vh, 40px); }
  .flow-step:not(.is-active) .flow-step__title, .flow-step:not(.is-active) .flow-step__text { color: #4A4A4A; }
  .flow-step { cursor: pointer; }
  .flow-screen--inline { display: none; }
  .flow__aside { display: flex; align-items: center; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-scene, .flow-scene * { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; }
}

/* ---------- Citation en carte ---------- */
.quote-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin: 0; } /* ni bordure ni fond : le texte reste sur le fond de la section */
.quote-card__media { position: relative; min-height: 360px; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(160deg, var(--red-100), var(--red-50)); }
.quote-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; filter: grayscale(1); }
.quote-card__mark { position: absolute; inset: 0; display: grid; place-items: center; font: 600 clamp(180px, 20vw, 260px)/1 var(--font); color: var(--red); padding-top: .25em; }
.quote-card__body { display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: clamp(28px, 5vw, 64px); }
.quote-card blockquote { position: relative; isolation: isolate; margin: 0; } /* guillemet géant derrière le texte, comme la citation de la landing (.quote__mark) */
.quote-card blockquote p { font: italic 500 clamp(22px, 2.5vw, 32px)/1.3 var(--font); letter-spacing: -0.02em; text-wrap: pretty; }
.quote-card blockquote em { color: var(--red); }
.quote-card figcaption b { display: block; font-size: 18px; font-weight: 600; }
.quote-card figcaption span { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
@media (max-width: 800px) { .quote-card { grid-template-columns: 1fr; } .quote-card__media { min-height: 200px; } }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--night); color: rgba(255, 255, 255, .78); padding: 80px 0 32px; font-size: 15px; }
.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
.site-footer .logo img { height: 56px; }
.site-footer__baseline { max-width: 340px; margin: 18px 0 24px; }
.site-footer__title { margin-bottom: 16px; font: 600 12px/1 var(--font-alt); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.site-footer__links { display: grid; gap: 10px; }
.site-footer__links a { text-decoration: none; }
.site-footer__links a:hover { color: #fff; }
.site-footer__bottom a { text-decoration: none; }
.site-footer__bottom a:hover { color: #fff; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 64px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; }
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- CTA collant mobile ---------- */
.sticky-cta {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
  display: none; align-items: center; justify-content: center; gap: 10px; min-height: 54px;
  border-radius: var(--pill); background: var(--red); color: #fff; text-decoration: none;
  font: 600 14px/1 var(--font); letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 16px 40px -12px rgba(var(--red-rgb), .7);
  transform: translateY(140%); transition: transform .35s var(--ease);
}
.sticky-cta.is-visible { transform: none; }
@media (max-width: 760px) { .sticky-cta { display: flex; } }

/* ---------- Bandeau cookies (pixel Meta) ---------- */
/* Accepter et Refuser au même niveau (CNIL) ; au-dessus du CTA collant. */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 70;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  max-width: 720px; margin: 0 auto; padding: 16px 20px;
  border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
  font-size: 14px; line-height: 1.45; color: var(--ink-2);
}
.consent[hidden] { display: none; }
.consent__text { flex: 1 1 280px; margin: 0; }
.consent__text a { color: var(--ink); }
.consent__actions { display: flex; gap: 10px; }
.consent__actions .btn { flex: 1; }
.site-footer__consent { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.site-footer__consent:hover { color: #fff; }

/* ---------- Pages simples ---------- */
.page-plain { padding-top: 80px; }
.prose h1 { font-size: clamp(36px, 5vw, 56px); margin-bottom: 28px; }
.prose h2 { font-size: 28px; margin: 36px 0 12px; }
.prose p, .prose ul, .prose ol { margin-bottom: 16px; }
.prose ul { list-style: disc; padding-left: 22px; }

/* ---------- 404 : plein écran, passe sous l'en-tête collant comme le hero ---------- */
.notfound {
  position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
  margin-top: -84px; padding: 120px 0 72px;
  background: var(--paper); text-align: center;
}
@media (max-width: 960px) { .notfound { margin-top: -72px; padding-top: 104px; } }
.notfound__glow { /* lueur rouge qui monte du bas, comme le hero */
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 50% at 50% 110%, rgba(var(--red-rgb), .22), transparent 70%),
    radial-gradient(40% 35% at 50% 30%, rgba(var(--red-rgb), .08), transparent 70%);
}
.notfound__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.notfound__code {
  font: 400 clamp(110px, min(30vw, 32svh), 360px)/.85 var(--font-logo); letter-spacing: -0.01em;
  color: #E40102; margin-bottom: clamp(20px, 3vh, 36px);
  text-shadow: 0 30px 80px rgba(228, 1, 2, .35);
  user-select: none;
}
.notfound__code span { display: inline-block; animation: notfoundWobble 3.2s var(--ease) infinite; }
@keyframes notfoundWobble {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-8deg) translateY(-4%); }
  50% { transform: rotate(6deg); }
  75% { transform: rotate(-3deg) translateY(-2%); }
}
.notfound .eyebrow-pill { margin-bottom: 22px; }
.notfound__title { font-size: clamp(32px, 4.6vw, 60px); letter-spacing: -0.035em; line-height: 1; max-width: 18ch; }
.notfound__title em { color: var(--red); }
.notfound__lede { max-width: 480px; margin-top: 20px; font-size: clamp(16px, 1.4vw, 18px); color: var(--muted); }
.notfound__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; }
@media (max-width: 480px) { .notfound__actions .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .notfound__code span { animation: none; } }

/* ---------- Apparitions (flou → net, inspiré de meetsponsors.com) ---------- */
.js .reveal { opacity: 0; filter: blur(10px); transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
.js .reveal.is-in { opacity: 1; filter: none; transform: none; }

/* Titre du hero découpé en mots (main.js), chaque mot sort du flou l'un après l'autre */
.js [data-words] .w { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(.25em); }
.js .is-ready [data-words] .w,
.js [data-words].is-in .w { animation: wordIn .9s var(--ease) forwards; animation-delay: calc(var(--i) * 70ms + 150ms); }
@keyframes wordIn { to { opacity: 1; filter: blur(0); transform: none; } }
/* Le reste du hero suit le titre */
.js .hero__intro { opacity: 0; filter: blur(8px); transform: translateY(14px); }
.js .is-ready .hero__intro { animation: wordIn 1s var(--ease) forwards; animation-delay: var(--d, .8s); }
/* Ordre d'arrivée sur la landing (secondes après le lancement des animations) :
   1. hero, du titre au bouton (0 → 1,95 s) ;
   2. bande noire dès 1 s du hero (1 → 1,8 s), puis les chiffres un par un (1,65 → 3,2 s) ;
   3. haut de la section suivante pendant les derniers chiffres (main.js, à 2,5 s) ;
   4. logo du header (3 s). */
.js .stats__item { opacity: 0; filter: blur(8px); transform: translateY(14px); }
.js .is-ready .stats:not(.stats--scroll) .stats__item { animation: wordIn 1s var(--ease) forwards; animation-delay: calc(1.65s + var(--i, 0) * .18s); }
/* Bande de l'accueil : main.js pose .is-in quand la bande est à l'écran ET que le texte sous le titre du hero arrive ;
   la bande noire se déroule, puis les cartes arrivent. */
.js .stats--scroll { clip-path: inset(0 0 100% 0); }
.js .stats--scroll.is-in { animation: statsDown .8s var(--ease) forwards; }
.js .stats--scroll.is-in .stats__item { animation: wordIn 1s var(--ease) forwards; animation-delay: calc(.45s + var(--i, 0) * .15s); }
/* La bande noire se déroule de haut en bas juste avant les chiffres */
.js .stats:not(.stats--scroll) { clip-path: inset(0 0 100% 0); }
.js .is-ready .stats:not(.stats--scroll) { animation: statsDown .8s var(--ease) 1s forwards; }
@keyframes statsDown { to { clip-path: inset(0); } }
/* Logo de la landing : passe de ×2,2 à sa taille normale. Ailleurs (site de l'agence, ou pas de bande de chiffres), il reste affiché tout de suite. */
.js body.is-landing:has(.stats) .site-header .logo { opacity: 0; }
.js body.is-landing.is-ready:has(.stats) .site-header .logo { animation: logoIn .3s var(--ease) 3s both; }
@keyframes logoIn { from { opacity: 0; transform: scale(2.2); } to { opacity: 1; transform: none; } }
/* La lueur rouge du hero s'allume en même temps que le logo */
.js body.is-landing:has(.stats) .hero::before { opacity: 0; }
.js body.is-landing.is-ready:has(.stats) .hero::before { animation: glowIn .8s var(--ease) 3s both; }
@keyframes glowIn { from { opacity: 0; } to { opacity: 1; } }
.js .site-header { animation: headerIn .8s var(--ease) both; }
@keyframes headerIn { from { opacity: 0; transform: translateY(-14px); } }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js [data-words] .w, .js .hero__intro, .js .stats__item { opacity: 1; filter: none; transform: none; transition: none; animation: none; }
  .js .stats { clip-path: none; animation: none; }
  .js body.is-landing:has(.stats) .site-header .logo, .js body.is-landing:has(.stats) .hero::before { opacity: 1; animation: none; }
  .js .site-header { animation: none; }
  .intro__rec-dot { animation: none; }
}

/* ---------- Accueil : extraits déjà produits en bandeau de Reels défilant (modèle kosmos-agence.com) ---------- */
.extraits { position: relative; overflow: hidden; }
.anchor-alias { position: absolute; top: 0; }
.extraits__copy { max-width: 760px; margin: 0 auto clamp(40px, 5vw, 60px); text-align: center; }
.extraits__title { text-wrap: balance; }
.extraits__title em { color: var(--red); }
.extraits__hook { margin-top: 22px; font-size: clamp(19px, 1.8vw, 22px); font-weight: 600; letter-spacing: -0.01em; }
.extraits__text { margin-top: 12px; font-size: 17px; color: rgba(255, 255, 255, .62); text-wrap: pretty; }
.extraits__cta { margin-top: clamp(40px, 5vw, 60px); text-align: center; }
.reels {
  --reel-w: clamp(190px, 16vw, 230px);
  --reel-gap: clamp(14px, 1.6vw, 22px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.reels__track { display: flex; width: max-content; animation: reelsLoop var(--reels-time, 60s) linear infinite; }
.reels:hover .reels__track, .reels.is-paused .reels__track { animation-play-state: paused; }
@keyframes reelsLoop { to { transform: translateX(-50%); } }
.reels__list { display: flex; gap: var(--reel-gap); padding: 12px calc(var(--reel-gap) / 2) 28px; }

.reel {
  position: relative; flex: none; width: var(--reel-w); aspect-ratio: 9 / 16;
  border-radius: 26px; overflow: hidden; background: var(--grey);
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .9);
  transition: transform .5s var(--ease);
}
.reel:hover { transform: translateY(-6px); }
.reel__media, .reel__media video, .reel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel__placeholder {
  display: grid; place-items: center; height: 100%;
  background: linear-gradient(160deg, var(--red-50), var(--red-100));
  font: 400 64px/1 var(--font-logo); color: var(--red);
}
/* Voiles haut et bas pour la lisibilité de l'en-tête et des icônes, comme dans l'appli */
.reel::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 22%, transparent 70%, rgba(0, 0, 0, .45));
}

.reel__head { position: absolute; z-index: 1; top: 14px; left: 14px; right: 14px; display: flex; gap: 8px; align-items: flex-start; color: #fff; }
.reel__avatar {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  background: var(--red); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
  font: 700 11px/1 var(--font); letter-spacing: .02em;
}
.reel__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.reel__who { display: grid; min-width: 0; font-size: 10.5px; line-height: 1.3; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.reel__who b { display: flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; }
.reel__who span { color: rgba(255, 255, 255, .82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel__who span:last-child:not(:nth-child(2)) { font-weight: 700; color: #fff; }
.reel__badge { flex: none; width: 13px; height: 13px; }

.reel__actions { position: absolute; z-index: 1; right: 12px; bottom: 16px; display: grid; justify-items: center; gap: 14px; }
.reel__icon { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4)); }
.reel__icon--like { fill: #FF3B5C; stroke: none; animation: reelBeat 6s var(--d) infinite; }
/* Cœurs qui montent depuis le j'aime, en décalé d'une carte à l'autre */
.reel__hearts { position: absolute; left: 50%; bottom: 100%; width: 0; height: 120px; pointer-events: none; }
.reel__hearts i {
  position: absolute; bottom: -30px; left: -6px; width: 12px; height: 12px; opacity: 0;
  background: #FF3B5C;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M19.2753 0.230304C16.2977 -0.564017 13.5386 0.863757 12.0232 3.61384L11.1552 2.39099C7.21703 -2.31419 0.423942 0.363803 0 6.6109V7.85978C0.261128 11.7947 3.68523 14.9186 6.3059 17.3022C8.04425 18.8835 9.85211 20.394 11.6255 21.9246C11.8779 22.0254 12.1227 22.0247 12.3745 21.9246C14.3564 20.2018 16.3979 18.523 18.3284 16.7295C20.4463 14.7624 23.1271 12.1331 23.7984 9.11935C24.6206 5.42676 22.8929 1.1955 19.2753 0.229636V0.230304Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M19.2753 0.230304C16.2977 -0.564017 13.5386 0.863757 12.0232 3.61384L11.1552 2.39099C7.21703 -2.31419 0.423942 0.363803 0 6.6109V7.85978C0.261128 11.7947 3.68523 14.9186 6.3059 17.3022C8.04425 18.8835 9.85211 20.394 11.6255 21.9246C11.8779 22.0254 12.1227 22.0247 12.3745 21.9246C14.3564 20.2018 16.3979 18.523 18.3284 16.7295C20.4463 14.7624 23.1271 12.1331 23.7984 9.11935C24.6206 5.42676 22.8929 1.1955 19.2753 0.229636V0.230304Z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: reelHeart 3s calc(var(--d) + var(--h) * .45s) ease-out infinite;
}
.reel__hearts i:nth-child(even) { --sway: -10px; width: 9px; height: 9px; }
@keyframes reelHeart {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--sway, 10px), -120px) scale(1.1); }
}
@keyframes reelBeat { 0%, 6%, 100% { transform: none; } 3% { transform: scale(1.3); } }

/* Haut-parleur : barré tant que la carte est muette, avec ondes quand son son sort (survol) */
.reel__sound {
  position: absolute; z-index: 1; left: 12px; bottom: 16px; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, .35); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s;
}
.reel:hover .reel__sound, .reel.is-sound .reel__sound { opacity: 1; }
.reel__sound svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reel__sound-hp { fill: #fff; }
.reel__sound-on, .reel.is-sound .reel__sound-off { display: none; }
.reel.is-sound .reel__sound-on { display: inline; }
.reel:has(video) { cursor: pointer; }
/* Carte avec lien : toute la carte ouvre l'extrait, sauf le haut-parleur posé au-dessus qui règle le son */
.reel__link { position: absolute; z-index: 2; inset: 0; border-radius: inherit; }
.reel__link:focus-visible { outline: 2px solid var(--white); outline-offset: -4px; }
.reel--link .reel__sound { z-index: 3; cursor: pointer; }
@media (hover: none) { .reel__sound { opacity: 1; } }

/* Double-tap : gros cœur blanc qui éclot au centre de temps en temps */
.reel__pop { position: absolute; z-index: 1; top: 42%; left: 50%; width: 34%; translate: -50% -50%; opacity: 0; pointer-events: none; animation: reelPop 9s calc(var(--d) * 1.5 + 1s) infinite; }
.reel__pop svg { fill: #fff; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35)); }
@keyframes reelPop {
  0%, 100% { opacity: 0; transform: scale(.3); }
  3% { opacity: 1; transform: scale(1.12); }
  5% { transform: scale(.95); }
  10% { opacity: 1; transform: scale(1); }
  14% { opacity: 0; transform: scale(1.1) translateY(-14px); }
}

@media (max-width: 640px) {
  .reels { --reel-w: 170px; }
  .reel { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .reels { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; }
  .reels__track { animation: none; }
  .reels__list[aria-hidden] { display: none; }
  .reel { scroll-snap-align: center; }
  .reel__icon--like, .reel__hearts i, .reel__pop { animation: none; }
}