/* ============================================================
   MINIADS DARK · design system · rev 2026-08-27
   Fond charbon chaud, accent orange #ff991c, typo Saans
   ============================================================ */

:root {
  --bg: #0d0c0a;
  --bg-soft: #12100d;
  --surface: #171411;
  --surface-2: #1e1a15;
  --line: rgba(255, 244, 230, 0.08);
  --line-strong: rgba(255, 244, 230, 0.14);
  --text: #f4f0ea;
  --text-2: #a89f92;
  --text-3: #6f685d;
  --accent: #ff991c;
  --accent-hi: #ffb04a;
  --accent-deep: #b36a13;
  --on-accent: #1c0f00;
  --font-display: 'Degular Display', 'Inter', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-label: 'Inter', sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-main: cubic-bezier(0.625, 0.02, 0, 1.05);
  --ease-pop: cubic-bezier(0.5, 1.5, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --white-3: rgba(255, 244, 230, 0.03);
  --white-6: rgba(255, 244, 230, 0.06);
  --white-12: rgba(255, 244, 230, 0.12);
  --sh-neon: 0 0 7px rgba(255, 255, 255, 0.25) inset, -3px 15px 9px rgba(255, 153, 28, 0.08), -2px 7px 7px rgba(255, 153, 28, 0.13), 0 2px 4px rgba(255, 153, 28, 0.15);
  --sh-card: 0 0 0 1px rgba(255, 153, 28, 0.03), 0 3px 3px -1.5px rgba(0, 0, 0, 0.2), 0 6px 6px -3px rgba(0, 0, 0, 0.18), 0 12px 12px -6px rgba(0, 0, 0, 0.16), 0 24px 24px -12px rgba(0, 0, 0, 0.14), 0 44px 44px -16px rgba(255, 153, 28, 0.05);
  --r-card: 16px;
  --r-panel: 24px;
  /* 1200px, relevé sur la maquette : à 1340 le contenu s'étale et la page
     perd sa densité. */
  --container-w: min(1200px, calc(100% - 48px));
}
@media (min-width: 1800px) { :root { --container-w: min(1280px, calc(100% - 96px)); } }

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

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;

  /* Coupe optique forcée sur « display », comme la maquette du webdesigner.
     Laissé en auto, le navigateur choisit l'échelle d'après la taille : à
     16px il prend la coupe texte, la plus ouverte, et le texte paraît
     distendu. La coupe display est dessinée plus serrée ; c'est elle que
     Framer applique, y compris sur du petit corps.
     Mesuré : l'espace entre mots passe de 0.263em à 0.238em, contre 0.239em
     sur la maquette. La phrase entière se resserre de 6,6 %. */
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 32;
}

/* grain subtil sur toute la page */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; }

.container {
  width: var(--container-w);
  margin-inline: auto;
}
/* sliders full-bleed alignés sur la largeur du container (cohérence des sections) */
.clients-marquee {
  width: var(--container-w);
  margin-inline: auto;
}

/* la maquette respire à 60-100px par section, jamais doublés en 216 */
.section { padding-block: clamp(40px, 5vw, 70px); }

/* ============ Typo ============ */

/* ---- crénage ----
   Le même -0.025em couvrait h1 (74px) comme h3 (20px). Or les blancs entre
   lettres grandissent avec le corps : à 74px le titre paraissait lâche, à
   20px les mots se touchaient. Une valeur unique sur un rapport de 1 à 3,7,
   c'est ce qui se lisait comme mécanique.

   Le crénage se resserre donc quand le corps grossit. Les valeurs sont
   posées par niveau parce que CSS ne sait pas dériver une échelle optique :
   `em` donne du proportionnel, or la correction doit être plus que
   proportionnelle. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  text-wrap: balance;
  /* Le crénage négatif rogne aussi l'espace entre les mots, et Degular en a
     déjà une plus étroite qu'Inter. Sans compensation, « Des miniatures » se
     lisait « Desminiatures ». On rend au mot ce qu'on a pris à la lettre. */
  word-spacing: 0.09em;
}

/* evite les mots orphelins en fin de paragraphe : le navigateur reequilibre
   les dernieres lignes au lieu de laisser un mot seul */
p, li, figcaption, blockquote { text-wrap: pretty; }

h1 {
  /* 7vw suit la boîte : mesuré, la ligne longue du hero fait ~13.4× le corps,
     et 0.07 × 13.4 ≈ 0.94 — elle tient donc sur une ligne tant que le
     viewport dépasse ~780px. En dessous, retour au repli naturel du mobile. */
  font-size: clamp(2.6rem, 6.4vw, 4.75rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.042em;
}

h2 {
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.032em;
}

/* Un titre de carte se lit comme du texte, pas comme une affiche : il lui
   faut de l'air entre les lettres et entre les lignes. */
h3 {
  font-size: 1.25rem;
  line-height: 1.22;
  letter-spacing: -0.012em;
}

h1 em, h2 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--accent);
}

/* ---- en-tête de section ----
   Le titre et son sous-titre ne se lisent pas à la même vitesse, ils ne
   prennent donc pas la même largeur. Avant, une seule boîte de 680px portait
   les deux : les sous-titres partaient jusqu'à 89 caractères par ligne, très
   au-delà des 45-75 où l'œil revient sans effort à la ligne suivante. Huit
   sections coulées dans le même moule, c'est ça qui se voyait.

   Le titre garde une mesure large — il est gros, il tient en deux lignes.
   Le sous-titre est borné en `ch`, donc en caractères réellement affichés :
   la contrainte suit la taille du texte au lieu d'un nombre de pixels. */
.section-head { max-width: 46rem; margin: 0 auto clamp(26px, 3.8vw, 42px); text-align: center; }
.section-head h2 { max-width: 15em; margin-inline: auto; }

.section-sub {
  color: var(--text-2);
  margin-top: 14px;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.5;
  /* Mesuré, pas supposé : à 680px la plupart des sous-titres tenaient sur une
     seule ligne étirée (53 à 82 caractères), toujours la même forme d'une
     section à l'autre. À 424px, l'inverse : tous cassés en deux lignes de 27
     à 45 caractères, hachées.

     35rem laisse la longueur du texte décider — certains tiennent sur une
     ligne, d'autres passent à deux. C'est cette variation qui manquait, plus
     que le nombre de caractères. */
  max-width: 35rem;
  margin-inline: auto;
}

/* ============ Boutons ============ */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  word-spacing: 0.06em;
  border-radius: 999px;
  padding: 14px 26px;
  transition: transform 0.2s var(--ease-out), box-shadow 0.3s var(--ease-out), background-color 0.2s;
  overflow: hidden;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn svg { width: 17px; height: 17px; }

/* flèche statique (pas d'animation au survol) */
.btn-icon {
  position: relative;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}
.btn-icon svg { display: block; }
.btn-icon svg:nth-child(2) { display: none; }

/* CTA "touche de clavier" : 3 couches + glow orange */
.btn-key {
  color: var(--on-accent);
  border: 1.5px solid transparent;
  background:
    linear-gradient(180deg, var(--accent-hi) 0%, var(--accent) 55%, #f08a0e 100%) padding-box,
    linear-gradient(var(--accent-deep), var(--accent-deep)) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(120, 62, 0, 0.35),
    0 0 4px rgba(255, 153, 28, 0.5),
    0 20px 45px -12px rgba(255, 153, 28, 0.28);
}
/* survol : contour lumineux qui fait le tour (même mécanique que le pack Ascension) */
.btn-key:hover {
  background:
    linear-gradient(180deg, var(--accent-hi) 0%, var(--accent) 55%, #f08a0e 100%) padding-box,
    conic-gradient(from var(--spin),
      var(--accent-deep) 0deg,
      #ffe6b0 90deg,
      var(--accent-deep) 180deg,
      #ffe6b0 270deg,
      var(--accent-deep) 360deg) border-box;
  animation: spin-border 3s linear infinite;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 0 rgba(120, 62, 0, 0.35),
    0 0 20px rgba(255, 153, 28, 0.55),
    0 22px 48px -12px rgba(255, 153, 28, 0.5);
}
/* shimmer périodique sur les CTA orange */
.btn-key::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: shimmer 4.5s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 55% { transform: translateX(-120%); }
  75%, 100% { transform: translateX(120%); }
}

.btn-ghost {
  color: var(--text);
  border: 1px solid var(--line-strong);
  background: transparent;
}
.btn-ghost:hover { background: rgba(255, 244, 230, 0.06); border-color: rgba(255, 244, 230, 0.25); }

.btn-outline {
  color: var(--text);
  border: 1px solid var(--line-strong);
  background: var(--surface);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent-hi); }

.btn-dark {
  color: var(--text);
  background: #14100a;
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 244, 230, 0.08);
}
.btn-dark:hover { transform: translateY(-1px); background: #1d1710; }

.btn-lg { padding: 17px 32px; font-size: 1.05rem; }
.btn-sm { padding: 10px 20px; font-size: 0.9rem; }
.btn-block { width: 100%; }

/* ripple au clic */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transform: scale(0);
  animation: ripple 0.55s var(--ease-out) forwards;
  pointer-events: none;
}
@keyframes ripple {
  to { transform: scale(1); opacity: 0; }
}

/* ============ Nav pilule flottante ============ */

.nav {
  position: fixed;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(1080px, calc(100% - 32px));
  padding: 10px 12px 10px 20px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(13, 12, 10, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: width 0.45s var(--ease-out), background-color 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.nav.scrolled {
  width: min(880px, calc(100% - 32px));
  background: rgba(18, 16, 13, 0.88);
  border-color: var(--line-strong);
  box-shadow: 0 18px 45px -18px rgba(0, 0, 0, 0.7), 0 8px 30px -12px rgba(255, 153, 28, 0.12);
}

.nav-logo { display: flex; align-items: center; }
/* logo vectorise, symbole + mot-symbole en un seul fichier */
.nav-logo img { display: block; height: 22px; width: auto; }
@media (max-width: 620px) { .nav-logo img { height: 19px; } }

.nav-links { display: flex; gap: 26px; }
.nav-links a {
  position: relative;
  font-size: 0.92rem;
  color: var(--text-2);
  transition: color 0.2s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-main);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ============ Hero ============ */

.hero {
  position: relative;
  padding-top: clamp(116px, 15vh, 156px);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 560px;
  background: radial-gradient(ellipse at center, rgba(255, 153, 28, 0.14), transparent 65%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  text-align: center;
  /* 860px forçait « pensées pour générer » à casser : le titre tombait sur
     trois lignes au lieu des deux prévues par ses .line. La boîte s'ouvre,
     chaque élément dedans garde sa propre largeur (promesse en 44em, CTA
     centrés). */
  width: min(1240px, calc(100% - 48px));
  margin-inline: auto;
}

.pill-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-label);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-2);
  border: 1px solid var(--line);
  background: rgba(255, 244, 230, 0.04);
  border-radius: 999px;
  padding: 8px 16px;
  margin-bottom: 28px;
}

/* Calé sur la maquette du webdesigner, qui se lit plus naturellement : Inter
   en graisse 500 et interligne 1.5. En 400 sur du gris, les lettres sont trop
   fines — les blancs prennent le dessus et l'espacement paraît distendu alors
   qu'il est normal. Monter d'une graisse rééquilibre le gris typographique. */
.hero-sub {
  color: var(--text-2);
  font-size: clamp(1rem, 1.55vw, 1.16rem);
  font-weight: 500;
  line-height: 1.5;
  /* dimensionnée pour que la promesse tombe sur DEUX lignes au desktop ;
     balance les égalise au lieu de laisser une traîne courte */
  max-width: 44em;
  margin: 20px auto 0;
  text-wrap: balance;
}

.hero-ctas {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}


/* ============ Trust : pluie physique de tags clients ============ */

.trust { padding-block: clamp(22px, 3vw, 34px); }
.trust-label {
  text-align: center;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  color: var(--text-2);
  margin-bottom: 30px;
  padding-inline: 24px;
  text-wrap: balance;
}
.trust-label b {
  color: var(--text);
  font-weight: 700;
}

/* scroller de logos clients */
.clients-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  padding-block: 6px;
}
.clients-track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  animation: rail-x 46s linear infinite;
}
.clients-marquee:hover .clients-track { animation-play-state: paused; }

.client-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--text-2);
  white-space: nowrap;
  transition: color 0.3s;
}
.client-chip:hover { color: var(--text); }
.client-chip img, .client-chip .mono {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1);
  opacity: 0.85;
  transition: filter 0.3s, opacity 0.3s;
}
.client-chip:hover img { filter: grayscale(0); opacity: 1; }
/* logo de marque : il garde sa forme rectangulaire, en plus petit que les portraits */
.client-chip.chip-marque img {
  width: auto;
  height: 20px;
  border-radius: 3px;
  object-fit: contain;
}

/* la place laissée libre : "ce sera peut-être toi" */
.client-chip.is-you {
  border: 1.5px dashed var(--line-strong);
  border-radius: 10px;
  padding: 7px 16px;
  color: var(--text-3);
  font-size: 0.94rem;
}
.client-chip.is-you:hover { color: var(--text-2); border-color: rgba(255, 153, 28, 0.4); }
.client-chip .mono {
  display: inline-grid;
  place-items: center;
  font-family: var(--font-label);
  font-size: 0.7rem;
  font-weight: 700;
  font-style: normal;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  filter: none;
  opacity: 1;
}

/* cascade d'entrée au chargement (attend document.fonts.ready via html.fonts-ready) */
.load-1, .load-3, .load-4, .load-5, .load-6 {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(8px);
}
.fonts-ready .load-1, .fonts-ready .load-3, .fonts-ready .load-4, .fonts-ready .load-5, .fonts-ready .load-6 {
  animation: rise 1.1s var(--ease-out) forwards;
}
.fonts-ready .load-1 { animation-delay: 0.05s; }
.fonts-ready .load-3 { animation-delay: 0.4s; }
.fonts-ready .load-4 { animation-delay: 0.55s; }
.fonts-ready .load-5 { animation-delay: 0.7s; }
.fonts-ready .load-6 { animation-delay: 0.8s; }
@keyframes rise {
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* reveal du H1 par lignes masquées */
.hero h1 .line { display: block; overflow: hidden; padding-block: 0.06em; }
.hero h1 .line > span { display: block; transform: translateY(118%); }
.fonts-ready .hero h1 .line > span {
  transform: none;
  transition: transform 1s var(--ease-out);
}
.fonts-ready .hero h1 .line:nth-child(1) > span { transition-delay: 0.1s; }
.fonts-ready .hero h1 .line:nth-child(2) > span { transition-delay: 0.18s; }
.fonts-ready .hero h1 .line:nth-child(3) > span { transition-delay: 0.26s; }

/* ---- le mot qui tourne dans le titre ----
   Un rouleau vertical : la piste remonte d'un cran, avec un flou qui monte puis
   se dissipe pendant le trajet, comme les reveals du reste du site. */
.rot {
  display: inline-block;
  position: relative;
  vertical-align: bottom;
  height: 1.05em;
  overflow: hidden;
  color: var(--accent);
  /* le rognage reste net en haut et en bas (c'est le principe du rouleau), mais
     sans cette marge laterale il couperait le flou au ras des lettres */
  padding-inline: 0.3em;
  margin-inline: -0.3em;
}
/* La largeur ne s'anime qu'une fois le carrousel lancé. Avant, la correction
   de calibrage (police de secours → Degular) se verrait comme un
   rétrécissement au chargement, au lieu de ne jamais exister. */
.rot.actif { transition: width 0.55s var(--ease-out); }
.rot-piste { display: block; transition: transform 0.62s var(--ease-spring); }
.rot-piste span { display: block; height: 1.05em; line-height: 1.05; white-space: nowrap; }
.rot.bouge .rot-piste { animation: rot-flou 0.62s var(--ease-out); }
@keyframes rot-flou {
  0%   { filter: blur(0);   opacity: 1; }
  45%  { filter: blur(7px); opacity: 0.45; }
  100% { filter: blur(0);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rot-piste { transition: none; animation: none; }
  .rot.bouge .rot-piste { animation: none; }
}

/* nappes orange floutées (fond de section) */
.bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.cloud {
  position: absolute;
  opacity: 0.14;
  filter: blur(70px);
}
.cloud-hero {
  width: 75%;
  top: -10%;
  left: 12%;
}

/* logo Miniads en halftone de points — ne sert plus qu'au bloc CTA
   (.cta-logo redéfinit la position ; la règle média garde le masquage mobile) */
.halftone {
  position: absolute;
  left: 50%;
  top: -60px;
  transform: translateX(-50%) rotate(-4deg);
  width: min(1000px, 82vw);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0.15;
  z-index: 0;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 42%, transparent 80%);
  mask-image: radial-gradient(circle at 50% 45%, #000 42%, transparent 80%);
}

@media (max-width: 1020px) {
  .halftone { display: none; }
}

/* système appear : les assets s'assemblent pièce par pièce */
[data-appear] {
  opacity: 0;
  transform: translateY(var(--ay, 12px)) scale(var(--as, 1)) rotate(var(--ar, 0deg));
  filter: blur(6px);
}
.in-view [data-appear] {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(var(--ar, 0deg));
  filter: blur(0);
  transition: opacity 0.8s var(--ease-out) calc(var(--i, 0) * 90ms), transform 0.8s var(--ease-out) calc(var(--i, 0) * 90ms), filter 0.8s var(--ease-out) calc(var(--i, 0) * 90ms);
}


/* ============ Hero : mur de miniatures en colonnes verticales 3D ============ */

/* ============ Bandeau hero : anneau 3D ============
   Reprise du parti pris de la maquette : les vignettes ne défilent plus en
   colonnes, elles tournent sur un cylindre. Le rayon est large, donc l'arc
   avant paraît presque plat et seules les cartes de bord s'inclinent.

   Le rayon se déduit du nombre de cartes plutôt que d'être posé à la main :
   R = (largeur + écart) / (2·tan(π/n)). Écrit en dur, il faudrait le
   recalculer à chaque vignette ajoutée, et les cartes se chevaucheraient
   sans prévenir. */
.hero-ring {
  position: relative;
  margin-top: clamp(28px, 4vw, 52px);
  height: clamp(240px, 30vw, 420px);
  opacity: 0;
  /* PAS de mask-image ici : c'est une propriété de groupement, elle aplatit
     le contexte 3D des descendants dans Chromium et backface-visibility
     cesse d'agir — les cartes arrière traversaient l'écran en géant.
     Le fondu latéral est fait par ::after, hors du contexte 3D. */
}
.hero-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, var(--bg) 0%, transparent 16%, transparent 84%, var(--bg) 100%);
}
.fonts-ready .hero-ring { animation: mq-in 1.1s var(--ease-out) 0.6s forwards; }
@keyframes mq-in { to { opacity: 1; } }

.ring-scene {
  position: absolute;
  inset: 0;
  /* Relevé sur la maquette : 2064px. Plus la perspective est courte, plus les
     cartes de bord s'écrasent — à 1500px elles tombaient à 95px pour 209 au
     centre, l'anneau se lisait comme un tourniquet. Vu de plus loin, l'arc
     avant s'aplatit et on retrouve la bande presque plate de la maquette. */
  perspective: 2064px;
  perspective-origin: 50% 50%;
}

.ring-piste {
  --carte: clamp(230px, 27vw, 385px);
  --ecart: clamp(14px, 1.4vw, 22px);
  /* tan(180°/n) : n=16 → tan(11.25°) ≈ 0.1989 */
  --rayon: calc((var(--carte) + var(--ecart)) / 0.3978);

  position: absolute;
  inset: 0;
  /* La piste est projetée vers l'avant (translateZ +rayon) : sa boîte de
     hit-test, grossie par la perspective, couvrait les boutons du hero.
     Personne ne clique la piste ni les cartes — la saisie écoute sur la
     bande, dont la boîte n'est pas transformée. */
  pointer-events: none;
  transform-style: preserve-3d;
  /* On regarde l'arc OPPOSÉ du cylindre, comme la maquette : les cartes de
     bord s'inclinent en s'éloignant, pas en se rapprochant. La piste avance
     donc du rayon pour poser cet arc sur le plan de l'écran.
     L'angle vient du JS : une seule source pour l'avance automatique ET le
     glisser à la souris — deux écritures du même transform se voleraient
     la main. */
  transform: translateZ(var(--rayon)) rotateY(var(--angle, 0deg));
}

.ring-carte {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Les cartes de l'arc proche sont invisibles (backface) mais leurs zones
     de clic PROJETÉES débordent de la bande, jusque sur les boutons du hero :
     un clic y tombait sur une carte et la saisie l'avalait. Les cartes sont
     donc transparentes aux clics ; la saisie vit sur la bande elle-même. */
  pointer-events: none;
  width: var(--carte);
  margin: calc(var(--carte) * -0.281) 0 0 calc(var(--carte) / -2);
  /* translateZ négatif : les cartes font face au centre. Celles de l'arc
     éloigné regardent l'écran, celles de l'arc proche lui tournent le dos —
     backface-visibility les retire, on ne voit jamais l'avant du cylindre
     passer devant le titre. */
  transform: rotateY(calc(var(--i) * (360deg / var(--n)))) translateZ(calc(var(--rayon) * -1));
  backface-visibility: hidden;
}
.ring-carte img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
  display: block;
  /* double protection : certains moteurs testent la face sur l'élément
     peint plutôt que sur son conteneur */
  backface-visibility: hidden;
}


@media (max-width: 720px) {
  .ring-piste { --carte: clamp(180px, 52vw, 260px); }
  .ring-scene { perspective: 1100px; }
}

/* saisie a la souris : seules les images se laissent tirer — le curseur
   grab n'apparait que sur une carte, pose par le JS qui projette leur
   position reelle */
.hero-ring { touch-action: pan-y; }
.hero-ring.sur-carte { cursor: grab; }
.hero-ring.saisi { cursor: grabbing; }
.ring-carte img { -webkit-user-drag: none; user-select: none; }

/* ============ Stats ============ */

.stats { padding-block: clamp(40px, 6vw, 70px); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  padding: 10px 28px;
  border-left: 1px solid var(--line);
  text-align: center;
}
.stat:first-child { border-left: none; }

.stat-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.stat-label {
  display: block;
  margin-top: 6px;
  font-family: var(--font-label);
  font-size: 0.85rem;
  color: var(--text-3);
}

/* ============ Méthode : 3 cards bénéfices ============ */

.mcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.mcard {
  position: relative;
  display: flex;
  flex-direction: column;
  /* une seule surface : la teinte du visuel fond dans le corps, comme la
     carte de reference. La coupure nette et l'empilement d'ombres avec
     liseret incruste faisaient l'effet gabarit. */
  border: 1px solid rgba(255, 244, 230, 0.06);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 153, 28, 0.07), rgba(255, 153, 28, 0.02) 46%, transparent 68%),
    var(--surface);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  transition: transform 0.45s var(--ease-out), border-color 0.45s, box-shadow 0.45s;
}
.mcard:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 153, 28, 0.22);
  box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.65), 0 20px 60px -30px rgba(255, 153, 28, 0.25);
}

/* spotlight qui suit la souris */
.card-spot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 153, 28, 0.09), transparent 62%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  z-index: 4;
}
.card-spot:hover::after { opacity: 1; }

/* zone mockup en haut, hauteur fixe */
.mcard-visual {
  position: relative;
  height: 234px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: radial-gradient(circle, rgba(255, 244, 230, 0.05) 1px, transparent 1.3px) 0 0 / 22px 22px;
}
.mcard-visual::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  /* meme fondu que la carte process : les deux familles doivent etre jumelles */
  height: 60px;
  background: linear-gradient(transparent, var(--surface) 92%);
  pointer-events: none;
  z-index: 2;
}

.mcard-body { padding: 26px 24px 28px; }
/* meme traitement que .pcard-step : du texte, pas une pilule */
.mcard-label {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.mcard h3 { font-size: 1.22rem; margin-bottom: 11px; }
.mcard p { color: var(--text-2); font-size: 0.96rem; }

/* mockup 1 : grille d'analyse de niche */
.mk-niche {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* toutes en couleur au départ : un balayage passe sur chacune et éteint
   celles qui ne performent pas. Seule la gagnante reste allumée. */
.niche-thumb {
  position: relative;
  margin: 0;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.niche-thumb img {
  display: block;
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
}
/* le balayage, qui remonte du bas vers le haut de la vignette */
.niche-thumb::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -4px;
  height: 3px;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent-hi) 22%, #fff 50%, var(--accent-hi) 78%, transparent);
  box-shadow: 0 0 14px 3px rgba(255, 153, 28, 0.6);
}
.niche-thumb b {
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 3;
  opacity: 0;
  font-family: var(--font-label);
  font-size: 0.62rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(6, 4, 2, 0.82);
  color: var(--text-2);
}
.niche-thumb.win b {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  color: var(--on-accent);
}
/* chaque vignette est balayée à son tour, dans l'ordre de lecture */
.in-view .niche-thumb::after { animation: nicheScan 5s forwards; }
.in-view .niche-thumb b { animation: nicheScore 5s forwards; }
/* celles qui ne performent pas s'éteignent au passage du balayage.
   La gagnante n'a pas cette animation : elle reste en couleur. */
.in-view .niche-thumb:not(.win) img { animation: nicheDim 5s forwards; }

.in-view .niche-thumb:nth-child(1)::after,
.in-view .niche-thumb:nth-child(1) b,
.in-view .niche-thumb:nth-child(1) img { animation-delay: 0.25s; }
.in-view .niche-thumb:nth-child(2)::after,
.in-view .niche-thumb:nth-child(2) b,
.in-view .niche-thumb:nth-child(2) img { animation-delay: 1.15s; }
.in-view .niche-thumb:nth-child(3)::after,
.in-view .niche-thumb:nth-child(3) b,
.in-view .niche-thumb:nth-child(3) img { animation-delay: 2.05s; }
.in-view .niche-thumb:nth-child(4)::after,
.in-view .niche-thumb:nth-child(4) b,
.in-view .niche-thumb:nth-child(4) img { animation-delay: 2.95s; }

@keyframes nicheScan  { 0%, 2% { bottom: -4px; opacity: 0; } 5% { opacity: 1; } 15% { bottom: 100%; opacity: 1; } 19%, 100% { bottom: 100%; opacity: 0; } }
@keyframes nicheDim   { 0%, 13% { filter: none; } 20%, 100% { filter: grayscale(1) brightness(0.34); } }
@keyframes nicheScore { 0%, 4% { opacity: 0; transform: translateY(4px); } 12%, 100% { opacity: 1; transform: none; } }

.fig-cursor {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  z-index: 3;
  animation: cursor-drift 5s ease-in-out infinite;
}
.fig-cursor svg { width: 15px; height: 15px; flex: 0 0 auto; }
.fig-cursor span {
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  transform: translateY(9px);
}
@keyframes cursor-drift {
  0%, 100% { translate: 0 0; }
  35% { translate: 9px -7px; }
  70% { translate: -6px 5px; }
}

/* mockup 2 : le feed, l'oeil s'arrete sur ta vignette */
.mk-feed {
  position: relative;
  width: 100%;
  display: grid;
  /* hauteur de ligne = miniature 16/9 + padding + bordures, donc constante */
  --fd-thumb: 84px;
  --fd-gap: 8px;
  --fd-row: calc(var(--fd-thumb) * 9 / 16 + 10px);
  --fd-step: calc(var(--fd-row) + var(--fd-gap));
  gap: var(--fd-gap);
}
.fd-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--fd-thumb) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 4px 5px;
  border: 1px solid transparent;
  border-radius: 9px;
}
.fd-row img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
  filter: grayscale(1) brightness(0.4);
}
.fd-meta { display: grid; gap: 6px; align-content: center; min-width: 0; }
.fd-line { height: 7px; border-radius: 999px; background: rgba(255, 244, 230, 0.15); }
.fd-line.short { width: 58%; }
.fd-chan { height: 5px; width: 34%; border-radius: 999px; background: rgba(255, 244, 230, 0.08); }
/* la ligne mise en avant laisse la place au badge */
.fd-row.is-mine .fd-line { width: 56%; }
.fd-row.is-mine .fd-line.short { width: 36%; }

.fd-tag {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%) scale(0.7);
  z-index: 4;
  font-family: var(--font-label);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  border-radius: 5px;
  padding: 3px 7px;
  opacity: 0;
}

/* le regard qui descend le feed */
.fd-look {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--fd-row);
  z-index: 3;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 153, 28, 0.85);
  box-shadow: 0 0 0 400px rgba(19, 16, 11, 0.55), 0 0 18px rgba(255, 153, 28, 0.35);
  pointer-events: none;
  opacity: 0;
}
.in-view .fd-look { animation: fdLook 2.6s cubic-bezier(0.65, 0, 0.2, 1) 0.85s forwards; }
.in-view .fd-row.is-mine img { animation: fdWake 0.6s var(--ease-out) 2.9s forwards; }
.in-view .fd-row.is-mine { animation: fdLift 0.6s var(--ease-out) 2.9s forwards; }
.in-view .fd-tag { animation: fdTag 0.5s var(--ease-out) 3.25s forwards; }

@keyframes fdLook {
  0% { top: 0; opacity: 0; }
  10% { top: 0; opacity: 1; }
  28% { top: 0; }
  46% { top: var(--fd-step); }
  62% { top: calc(var(--fd-step) * 2); }
  78% { top: var(--fd-step); }
  100% { top: var(--fd-step); opacity: 1; box-shadow: 0 0 0 400px rgba(19, 16, 11, 0), 0 0 18px rgba(255, 153, 28, 0); }
}
@keyframes fdWake { to { filter: none; } }
@keyframes fdLift { to { border-color: rgba(255, 153, 28, 0.35); background: rgba(255, 153, 28, 0.08); } }
@keyframes fdTag { to { opacity: 1; transform: translateY(-50%) scale(1); } }

/* mockup 3 : la fiche de perf de la video */
.perf {
  width: 100%;
  max-width: 330px;
  display: grid;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 244, 230, 0.02);
  overflow: hidden;
}
.perf-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--white-3);
  font-family: var(--font-label);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  opacity: 0;
}
.perf-head i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); font-style: normal; }
.perf-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  opacity: 0;
}
.perf-row + .perf-row { border-top: 1px solid var(--line); }
.perf-k { font-family: var(--font-label); font-size: 0.74rem; color: var(--text-2); }
.perf-v {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-label);
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.perf-old { color: var(--text-3); }
.perf-arw { color: var(--text-3); font-size: 0.72rem; opacity: 0; }
.perf-new { color: var(--accent-hi); opacity: 0; }
.perf-check {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  font-size: 0.66rem;
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  opacity: 0;
}
.perf-same {
  font-family: var(--font-label);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-3);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 6px;
  opacity: 0;
}
.perf-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid rgba(255, 153, 28, 0.22);
  background: rgba(255, 153, 28, 0.07);
  font-family: var(--font-label);
  font-size: 0.74rem;
  color: var(--text-2);
  opacity: 0;
}
.perf-foot b { font-size: 0.88rem; font-weight: 600; color: var(--accent-hi); font-variant-numeric: tabular-nums; }

.in-view .perf-head { animation: perfIn 0.5s var(--ease-out) 0.15s forwards; }
.in-view .perf-row { animation: perfIn 0.5s var(--ease-out) var(--d, 0s) forwards; }
.in-view .perf-same { animation: perfIn 0.5s var(--ease-out) 1.15s forwards; }
.in-view .perf-arw,
.in-view .perf-new { animation: perfIn 0.5s var(--ease-out) var(--dv, 0s) forwards; }
.in-view .perf-check { animation: perfPop 0.45s var(--ease-pop) var(--dv, 0s) forwards; }
@keyframes perfPop { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }
.in-view .perf-foot { animation: perfIn 0.55s var(--ease-out) 2.25s forwards; }
@keyframes perfIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============ Process : 3 cards étapes ============ */

.process-cta { margin-top: 26px; }

.pcards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* fil conducteur pointillé entre les étapes (visible dans les intervalles) */
.pcards::before {
  content: '';
  position: absolute;
  top: 165px;
  left: 8%;
  right: 8%;
  border-top: 2px dashed rgba(255, 153, 28, 0.5);
  z-index: 0;
}
/* chevrons d'avancement 1 -> 2 -> 3, posés dans chaque intervalle */
.pstep-link {
  position: absolute;
  top: 165px;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  border: 2px solid #141009;
  box-shadow: var(--sh-neon);
  animation: chev-nudge 2.6s ease-in-out infinite;
}
.pstep-link svg { width: 17px; height: 17px; margin-left: 1px; }
.pstep-link.l1 { left: calc((100% - 48px) / 3 + 12px); }
.pstep-link.l2 { left: calc((100% - 48px) * 2 / 3 + 36px); animation-delay: -1.3s; }
@keyframes chev-nudge {
  0%, 100% { translate: 0 0; }
  50% { translate: 3px 0; }
}

.pcard {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /* une seule surface : la teinte du visuel fond dans le corps, comme la
     carte de reference. La coupure nette et l'empilement d'ombres avec
     liseret incruste faisaient l'effet gabarit. */
  border: 1px solid rgba(255, 244, 230, 0.06);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 153, 28, 0.07), rgba(255, 153, 28, 0.02) 46%, transparent 68%),
    var(--surface);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  transition: transform 0.45s var(--ease-out), border-color 0.45s, box-shadow 0.45s;
}
.pcard:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 153, 28, 0.22);
  box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.65), 0 20px 60px -30px rgba(255, 153, 28, 0.25);
}

.pcard-visual {
  position: relative;
  height: 372px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle, rgba(255, 244, 230, 0.05) 1px, transparent 1.3px) 0 0 / 22px 22px;
}
.pcard-visual::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 60px;
  background: linear-gradient(transparent, var(--surface) 92%);
  pointer-events: none;
  z-index: 2;
}

.pcard-body { padding: 26px 24px 28px; position: relative; z-index: 1; }
.pcard-step {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.pcard h3 { font-size: 1.22rem; margin-bottom: 11px; }
.pcard p { color: var(--text-2); font-size: 0.96rem; }

.mock-toast {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: max-content;
  z-index: 4;
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  border-radius: 999px;
  padding: 7px 15px;
  box-shadow: var(--sh-neon);
}

/* ---- étape 1 : formulaire d'onboarding ---- */
.pv-1 { background:
  radial-gradient(340px 220px at 50% 30%, rgba(255, 153, 28, 0.09), transparent 70%),
  radial-gradient(circle, rgba(255, 244, 230, 0.05) 1px, transparent 1.3px) 0 0 / 22px 22px,
  linear-gradient(160deg, #191510 0%, #13100b 100%);
}

.onb {
  position: relative;
  width: 84%;
  padding: 13px 13px 14px;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: #1a1510;
  box-shadow: 0 32px 60px -22px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 244, 230, 0.06);
}
.onb-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--line);
}
.onb-head img { border-radius: 7px; }
.onb-head-txt {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
}
.onb-prog { display: flex; gap: 5px; }
.onb-prog i {
  width: 16px;
  height: 4px;
  border-radius: 999px;
  background: var(--white-12);
}
.onb-prog i.on { background: var(--accent); }

.onb-field { margin-bottom: 6px; }
.onb-field label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-bottom: 3px;
}
.onb-input {
  position: relative;
  display: flex;
  align-items: center;
  font-family: var(--font-label);
  font-size: 0.8rem;
  color: var(--text);
  background: var(--white-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 28px 6px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.onb-input.done { border-color: rgba(255, 153, 28, 0.3); }
.onb-check {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c0f00' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4 10-10'/%3E%3C/svg%3E") center / 9px no-repeat,
    linear-gradient(180deg, var(--accent-hi), var(--accent));
}
/* pas de vrai texte dans les champs : une barre neutre, pour ne suggérer
   aucun titre en particulier. Les libellés suffisent à comprendre la feature. */
.onb-bar {
  display: block;
  height: 7px;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 244, 230, 0.44), rgba(255, 244, 230, 0.14));
}
/* champ photos : des vignettes neutres plutôt qu'une barre */
.onb-shots {
  position: relative;
  display: flex;
  gap: 5px;
  padding-right: 28px;
}
.onb-shots i {
  width: 30px;
  height: 22px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255, 244, 230, 0.16), rgba(255, 244, 230, 0.05)),
    var(--white-3);
  opacity: 0;
}

/* ---------- Étape 1 : le brief rempli en un rien de temps (une seule lecture) ---------- */
.onb-chrono {
  position: absolute;
  top: -13px;
  left: 50%;
  translate: -50% 0;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-hi);
  background: rgba(20, 15, 8, 0.95);
  border: 1px solid rgba(255, 153, 28, 0.32);
  border-radius: 999px;
  padding: 5px 13px;
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.9);
  opacity: 0;
}
.onb-chrono i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.6px solid var(--accent-hi);
  border-top-color: transparent;
}
.onb-done {
  position: absolute;
  left: 50%;
  bottom: -14px;
  translate: -50% 0;
  z-index: 4;
  opacity: 0;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  border-radius: 999px;
  padding: 5px 13px;
  box-shadow: var(--sh-neon);
}
/* au repos : le formulaire est vierge tant que la carte n'est pas à l'écran */
.pv-1 .onb-field,
.pv-1 .onb-submit,
.pv-1 .onb-check { opacity: 0; }
.pv-1 .onb-prog i { background: var(--white-12); }

.in-view .pv-1 .onb-chrono { animation: onbChrono 7s forwards; }
.in-view .pv-1 .onb-chrono i { animation: onbSpin 0.9s linear infinite; }
.in-view .pv-1 .f1 { animation: onbField 7s forwards; }
.in-view .pv-1 .f2 { animation: onbField 7s forwards; animation-delay: 0.5s; }
.in-view .pv-1 .f3 { animation: onbField 7s forwards; animation-delay: 1s; }
.in-view .pv-1 .f4 { animation: onbField 7s forwards; animation-delay: 1.5s; }
.in-view .pv-1 .f1 .onb-bar { animation: onbFill1 7s forwards; }
.in-view .pv-1 .f2 .onb-bar { animation: onbFill2 7s forwards; animation-delay: 0.5s; }
.in-view .pv-1 .f4 .onb-bar { animation: onbFill3 7s forwards; animation-delay: 1.5s; }
.in-view .pv-1 .f3 .onb-shots i { animation: onbShot 7s forwards; animation-delay: 1s; }
.in-view .pv-1 .f3 .onb-shots i:nth-child(2) { animation-delay: 1.15s; }
.in-view .pv-1 .f3 .onb-shots i:nth-child(3) { animation-delay: 1.3s; }
.in-view .pv-1 .f1 .onb-check { animation: onbCheck 7s forwards; }
.in-view .pv-1 .f2 .onb-check { animation: onbCheck 7s forwards; animation-delay: 0.5s; }
.in-view .pv-1 .f3 .onb-check { animation: onbCheck 7s forwards; animation-delay: 1.3s; }
.in-view .pv-1 .f4 .onb-check { animation: onbCheck 7s forwards; animation-delay: 1.5s; }
.in-view .pv-1 .pr1 { animation: onbProg 7s forwards; }
.in-view .pv-1 .pr2 { animation: onbProg 7s forwards; animation-delay: 0.8s; }
.in-view .pv-1 .pr3 { animation: onbProg 7s forwards; animation-delay: 1.7s; }
.in-view .pv-1 .onb-submit { animation: onbSubmit 7s forwards; }
.in-view .pv-1 .onb-done { animation: onbDone 7s forwards; }

@keyframes onbSpin   { to { rotate: 360deg; } }
@keyframes onbChrono { 0%, 3% { opacity: 0; transform: translateY(-8px); } 9%, 74% { opacity: 1; transform: none; } 82%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes onbField  { 0%, 8% { opacity: 0; transform: translateX(-10px); } 15%, 100% { opacity: 1; transform: none; } }
@keyframes onbFill1  { 0%, 12% { width: 0; } 26%, 100% { width: 62%; } }
@keyframes onbFill2  { 0%, 12% { width: 0; } 26%, 100% { width: 78%; } }
@keyframes onbFill3  { 0%, 12% { width: 0; } 26%, 100% { width: 70%; } }
@keyframes onbShot   { 0%, 14% { opacity: 0; transform: scale(0.7); } 20% { opacity: 1; transform: scale(1.08); } 24%, 100% { opacity: 1; transform: scale(1); } }
@keyframes onbCheck  { 0%, 26% { opacity: 0; transform: translateY(-50%) scale(0.4); } 31% { opacity: 1; transform: translateY(-50%) scale(1.3); } 35%, 100% { opacity: 1; transform: translateY(-50%) scale(1); } }
@keyframes onbProg   { 0%, 22% { background: var(--white-12); } 30%, 100% { background: var(--accent); } }
@keyframes onbSubmit { 0%, 52% { opacity: 0; transform: translateY(10px); } 60% { opacity: 1; transform: none; } 70% { transform: scale(0.95); } 75%, 100% { opacity: 1; transform: none; } }
@keyframes onbDone   { 0%, 78% { opacity: 0; transform: translateY(10px) scale(0.9); } 86% { opacity: 1; transform: translateY(0) scale(1.06); } 92%, 100% { opacity: 1; transform: none; } }

.onb-chips { display: flex; gap: 7px; }
.onb-chips span {
  font-family: var(--font-label);
  font-size: 0.76rem;
  color: var(--text-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
}
.onb-chips span.on {
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  border-color: var(--accent-deep);
  font-weight: 600;
}
.onb-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  border-radius: 999px;
  padding: 8px;
  box-shadow: var(--sh-neon);
}
.onb-submit svg { width: 14px; height: 14px; }
.onb-cursor { right: 4px; bottom: -6px; }
.onb-cursor span { background: var(--accent); color: var(--on-accent); }

/* ---- étape 2 : calques de conception ---- */
.pv-2 { background:
  radial-gradient(420px 260px at 50% 36%, rgba(255, 153, 28, 0.1), transparent 70%),
  radial-gradient(circle, rgba(255, 244, 230, 0.05) 1px, transparent 1.3px) 0 0 / 22px 22px,
  linear-gradient(160deg, #191510 0%, #13100b 100%);
  align-items: center;
}

/* 95% pour que les calques (88% du bloc) fassent la même largeur apparente
   que le formulaire et la conversation des deux autres étapes */
.layer-stack {
  position: relative;
  width: 95%;
  aspect-ratio: 16 / 13;
}
.lay {
  position: absolute;
  width: 88%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  overflow: visible;
}
.lay-1 {
  top: 0;
  left: 0;
  background:
    linear-gradient(rgba(255, 244, 230, 0.09) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(90deg, rgba(255, 244, 230, 0.09) 1px, transparent 1px) 0 0 / 25% 100%,
    rgba(255, 244, 230, 0.04);
}
.lay-2 {
  top: 9%;
  left: 6%;
  background: linear-gradient(150deg, #2a1a06 0%, #1c1207 100%);
}
.lay-3 {
  top: 18%;
  left: 12%;
  box-shadow: 0 34px 60px -20px rgba(0, 0, 0, 0.85), 0 14px 30px -10px rgba(255, 153, 28, 0.25);
  animation: lay-float 5.5s ease-in-out infinite;
}
.lay-3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
@keyframes lay-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}
.lay-tag {
  position: absolute;
  top: -10px;
  left: -8px;
  z-index: 2;
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-2);
  background: #241d14;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px 9px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);
}
.lay-tag-on {
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  border-color: var(--accent-deep);
  box-shadow: var(--sh-neon);
}
.lay-2 .lay-tag { top: auto; bottom: -10px; }
.lay-3 .lay-tag { left: auto; right: -8px; }
/* placés dans des bandes libres : les étiquettes de calque sont en haut-gauche,
   en bas-gauche et en haut-droite, le curseur ne doit en couvrir aucune */
.pv2-cur-1 { top: 40%; right: 5%; }
.pv2-cur-1 span { background: var(--accent); color: var(--on-accent); }
/* remonté sur la miniature : en bas de zone, on avait l'impression qu'il
   travaillait à côté du fichier */
.pv2-cur-2 { top: 44%; left: 13%; }
.pv2-cur-2 span { background: #f4f0ea; color: #1c0f00; }

/* ---------- Étape 2 : l'atelier, les calques sont distribués (boucle 11s) ---------- */
.lay-flash {
  position: absolute;
  left: 12%;
  top: 18%;
  width: 88%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  background: radial-gradient(60% 70% at 50% 40%, rgba(255, 169, 58, 0.62), transparent 72%);
}
/* au repos, rien n'est monté tant que la carte n'est pas à l'écran */
.pv-2 { --deal-x: 120px; --deal-y: -70px; --wander: 1; }
.pv-2 .lay,
.pv-2 .lay-tag,
.pv-2 .fig-cursor,
.pv-2 .mock-toast { opacity: 0; }

/* une seule lecture : l'animation se joue puis reste sur le montage terminé */
/* les repères du calque 2 (cercle du visage, bloc du titre) ne se tracent plus :
   ils arrivent avec leur calque, c'est l'empilement qui raconte, pas le tracé */
.in-view .pv-2 .lay-1 { animation: layDeal1 4.5s forwards; }
.in-view .pv-2 .lay-2 { animation: layDeal2 4.5s forwards; }
.in-view .pv-2 .lay-3 { animation: layDeal3 4.5s forwards, lay-float 5.5s ease-in-out infinite 2.6s; }
.in-view .pv-2 .lay-3 .lay-tag { animation: layTag 4.5s forwards; animation-delay: 1.7s; }
.in-view .pv-2 .lay-flash { animation: layFlash 4.5s forwards; }
/* apparition en une fois, puis déplacement continu : les deux se promènent
   sur la miniature comme deux curseurs dans un éditeur collaboratif */
/* déplacement continu et fluide sur la miniature */
/* les curseurs n'entrent qu'une fois les trois calques posés (2,6s).
   `both` et pas `forwards` : sans ça ils resteraient visibles pendant le délai */
.in-view .pv-2 .pv2-cur-1 { animation: layCurIn 4.5s both 2.2s, curWander1 18s ease-in-out infinite; }
.in-view .pv-2 .pv2-cur-2 { animation: layCurIn 4.5s both 2.7s, curWander2 21s ease-in-out infinite; }
.in-view .pv-2 .mock-toast { animation: layToast 8s forwards; }

@keyframes layDeal1 { 0%, 3% { opacity: 0; transform: translate(var(--deal-x), var(--deal-y)) rotate(14deg) scale(0.9); } 16%, 100% { opacity: 1; transform: none; } }
@keyframes layDeal2 { 0%, 20% { opacity: 0; transform: translate(var(--deal-x), var(--deal-y)) rotate(12deg) scale(0.9); } 33%, 100% { opacity: 1; transform: none; } }
@keyframes layDeal3 { 0%, 38% { opacity: 0; transform: translate(var(--deal-x), var(--deal-y)) rotate(10deg) scale(0.9); } 53%, 100% { opacity: 1; transform: none; } }
@keyframes layTag   { 0%, 8% { opacity: 0; transform: scale(0.7); } 16% { opacity: 1; transform: scale(1.14); } 22%, 100% { opacity: 1; transform: scale(1); } }
@keyframes layFlash { 0%, 49% { opacity: 0; } 56% { opacity: 0.9; } 70%, 100% { opacity: 0; } }
@keyframes layCurIn { 0%, 14% { opacity: 0; } 24%, 100% { opacity: 1; } }
/* trajectoires larges, surtout horizontales, dans des bandes qui ne recouvrent
   aucune étiquette de calque */
@keyframes curWander1 {
  0%   { translate: 0 0; }
  13%  { translate: calc(-146px * var(--wander)) 30px; }
  26%  { translate: calc(-58px * var(--wander)) -26px; }
  39%  { translate: calc(-188px * var(--wander)) 6px; }
  52%  { translate: calc(-92px * var(--wander)) 42px; }
  65%  { translate: calc(-164px * var(--wander)) -18px; }
  78%  { translate: calc(-36px * var(--wander)) 20px; }
  91%  { translate: calc(-118px * var(--wander)) -32px; }
  100% { translate: 0 0; }
}
@keyframes curWander2 {
  0%   { translate: 0 0; }
  12%  { translate: calc(142px * var(--wander)) -34px; }
  25%  { translate: calc(56px * var(--wander)) 28px; }
  38%  { translate: calc(206px * var(--wander)) 4px; }
  51%  { translate: calc(96px * var(--wander)) -42px; }
  64%  { translate: calc(172px * var(--wander)) 32px; }
  77%  { translate: calc(40px * var(--wander)) -14px; }
  90%  { translate: calc(188px * var(--wander)) 22px; }
  100% { translate: 0 0; }
}
@keyframes layToast { 0%, 80% { opacity: 0; transform: translateY(8px); } 88%, 100% { opacity: 1; transform: none; } }

/* ---- étape 3 : conversation WhatsApp ---- */
.pv-3 { background:
  radial-gradient(360px 240px at 50% 34%, rgba(255, 153, 28, 0.08), transparent 72%),
  radial-gradient(circle, rgba(255, 244, 230, 0.05) 1px, transparent 1.3px) 0 0 / 22px 22px,
  linear-gradient(160deg, #191510 0%, #13100b 100%);
}

.wa {
  width: 84%;
  display: grid;
  gap: 12px;
}
.wa-banner {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--accent-hi);
  background: rgba(255, 153, 28, 0.1);
  border: 1px solid rgba(255, 153, 28, 0.28);
  border-radius: 999px;
  padding: 4px 11px;
  margin-bottom: 2px;
}
.wa-bcheck {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c0f00' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4 10-10'/%3E%3C/svg%3E") center / 9px no-repeat,
    linear-gradient(180deg, var(--accent-hi), var(--accent));
}

.wa-row { display: flex; align-items: flex-end; gap: 8px; }
.wa-row.out { flex-direction: row-reverse; }
/* photo de profil du client, comme dans WhatsApp */
.wa-av {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line-strong);
}

.wa-bubble {
  max-width: 84%;
  padding: 8px 10px;
  font-size: 0.75rem;
  line-height: 1.35;
}
/* .out = ce qu'on envoie (à droite, pointe à droite) : bulle sombre
   .in  = la réponse du client (à gauche, pointe à gauche) : orange, elle doit sauter aux yeux */
.wa-bubble.out {
  background: #262019;
  border-radius: 13px 3px 13px 13px;
  color: var(--text-2);
}
.wa-bubble.in {
  background: linear-gradient(180deg, #ffa93a, #ff991c);
  border-radius: 3px 13px 13px 13px;
  color: var(--on-accent);
  font-weight: 500;
}
/* la miniature est le livrable : on la montre en entier, jamais recadrée */
.wa-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #0d0b08;
  border-radius: 8px;
  margin-bottom: 8px;
}
/* sans ça, `.pcard p` impose sa couleur ET sa taille aux messages */
.wa-bubble p { margin-bottom: 8px; color: inherit; font-size: inherit; }
.wa-bubble.in p { margin-bottom: 3px; }
/* les titres accompagnent la miniature, ils ne doivent pas lui voler la vedette */
/* comme dans le brief : aucun texte réel, des barres neutres */
.wa-titles { display: grid; gap: 3px; }
.wa-titles span {
  display: flex;
  align-items: center;
  background: rgba(255, 244, 230, 0.04);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 7px;
  overflow: hidden;
}
.wa-tbar {
  display: block;
  height: 6px;
  width: 86%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 244, 230, 0.38), rgba(255, 244, 230, 0.12));
}
.wa-tbar.w2 { width: 68%; }
.wa-tbar.w3 { width: 77%; }
.wa-titles span.on .wa-tbar {
  background: linear-gradient(90deg, var(--accent-hi), rgba(255, 153, 28, 0.4));
}
.wa-titles span.on {
  color: var(--accent-hi);
  border-color: rgba(255, 153, 28, 0.42);
  background: rgba(255, 153, 28, 0.1);
}
.wa-bubble time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  font-family: var(--font-label);
  font-size: 0.66rem;
  margin-top: 6px;
  opacity: 0.65;
}
.wa-bubble.out time { color: var(--text-3); }
.wa-bubble time svg { width: 13px; height: 13px; }

/* ---------- Étape 3 : la conversation se joue en direct (boucle 12s) ---------- */
.wa-typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  background: #262019;
  border-radius: 3px 13px 13px 13px;
  padding: 11px 13px;
}
.wa-typing.out { border-radius: 13px 3px 13px 13px; }
.wa-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
  animation: wa-dot 1.3s infinite;
}
.wa-typing i:nth-child(2) { animation-delay: 0.18s; }
.wa-typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes wa-dot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
.wa-emoji {
  position: absolute;
  right: -8px;
  top: -12px;
  font-size: 1.1rem;
  opacity: 0;
}
.wa-bubble { position: relative; }

/* état de repos : rien n'est visible tant que la carte n'est pas à l'écran */
.pv-3 .rowIn,
.pv-3 .rowOut,
.pv-3 .waTxt,
.pv-3 .wa-titles span { opacity: 0; }

/* Placement : une seule colonne, chaque cellule désignée explicitement.
   Chaque indicateur de saisie occupe la cellule de la bulle qui lui succède,
   donc il s'affiche pile où elle apparaîtra sans ajouter la moindre hauteur.
   La colonne DOIT être explicite : deux éléments sur la même ligne sans
   colonne définie font créer une 2e colonne au navigateur, ce qui envoie
   les bulles à droite et écrase leur largeur. */
.pv-3 .wa { grid-template-columns: minmax(0, 1fr); }
/* notre bloc est le plus lourd : on le resserre pour qu'il n'écrase pas
   la réponse du client, et on laisse respirer entre les deux */
.pv-3 .rowIn .wa-bubble { max-width: 66%; }
.pv-3 .rowOut { margin-top: 4px; }
/* la phrase d'accompagnement doit rester discrète face à la miniature */
.pv-3 .waTxt { font-size: 0.72rem; margin-bottom: 6px; }
.pv-3 .rowIn      { grid-area: 1 / 1; }
.pv-3 .rowTyping2 { grid-area: 2 / 1; }
.pv-3 .rowOut     { grid-area: 2 / 1; }
.pv-3 .rowTyping2 { align-self: start; opacity: 0; z-index: 2; }

/* une seule lecture : la conversation se joue puis reste affichée */
.in-view .pv-3 .rowIn       { animation: waIn 6s forwards; }
.in-view .pv-3 .wa-thumb    { animation: waThumb 6s forwards; }
.in-view .pv-3 .waTxt       { animation: waStep 6s forwards; }
.in-view .pv-3 .wa-titles span { animation: waStep 6s forwards; }
.in-view .pv-3 .wa-titles span:nth-child(2) { animation-delay: 0.3s; }
.in-view .pv-3 .wa-titles span:nth-child(3) { animation-delay: 0.6s; }
.in-view .pv-3 .wa-titles span.on { animation: waStep 6s forwards, waPick 6s forwards; }
.in-view .pv-3 .waCheck     { animation: waCheck 6s forwards; }
.in-view .pv-3 .rowTyping2  { animation: waTyping2 6s forwards; }
.in-view .pv-3 .rowOut      { animation: waOut 6s forwards; }
.in-view .pv-3 .wa-emoji    { animation: waEmoji 6s forwards; }

@keyframes waFade    { 0%, 3% { opacity: 0; transform: translateY(-8px); } 8%, 100% { opacity: 1; transform: none; } }
@keyframes waIn      { 0%, 12% { opacity: 0; transform: translateY(10px) scale(0.96); } 19%, 100% { opacity: 1; transform: none; } }
@keyframes waThumb   { 0%, 16% { opacity: 0; transform: scale(1.06); filter: blur(6px); } 25%, 100% { opacity: 1; transform: none; filter: none; } }
@keyframes waStep    { 0%, 27% { opacity: 0; transform: translateX(6px); } 35%, 100% { opacity: 1; transform: none; } }
@keyframes waPick    { 0%, 44% { box-shadow: none; } 51% { box-shadow: 0 0 0 3px rgba(255, 153, 28, 0.28); } 57%, 100% { box-shadow: 0 0 14px -2px rgba(255, 153, 28, 0.5); } }
@keyframes waCheck   { 0%, 59% { color: currentColor; } 64%, 100% { color: #3ba9ff; } }
@keyframes waTyping2 { 0%, 67% { opacity: 0; } 71%, 80% { opacity: 1; } 84%, 100% { opacity: 0; } }
@keyframes waOut     { 0%, 83% { opacity: 0; transform: translateY(10px) scale(0.94); } 89% { transform: translateY(0) scale(1.03); } 93%, 100% { opacity: 1; transform: none; } }
@keyframes waEmoji   { 0%, 93% { opacity: 0; transform: scale(0.3) rotate(-18deg); } 97% { opacity: 1; transform: scale(1.3) rotate(8deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }

/* ============ Cas client : études de cas filtrables ============ */
.cas-haut { text-align: center; }
.cas-filtres { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin: -24px 0 40px; }
/* le fond de l'onglet actif glisse au lieu de sauter */
.cas-pilule {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  transition: transform 0.5s var(--ease-spring), width 0.5s var(--ease-spring), height 0.3s;
  pointer-events: none;
  z-index: 0;
}
.cas-filtres button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font-label);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-2);
  background: var(--white-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 17px;
  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
}
.cas-filtres button svg { width: 15px; height: 15px; opacity: 0.75; }
.cas-filtres button:hover { color: var(--text); border-color: var(--line-strong); }
.cas-filtres button { position: relative; z-index: 1; }
.cas-filtres button.is-on {
  color: var(--on-accent);
  background: transparent;
  border-color: transparent;
  font-weight: 600;
}
.cas-filtres button.is-on svg { opacity: 1; }

/* les panneaux sont superposés : changer de filtre ne fait pas sauter la page */
/* clip : les panneaux inactifs restent posés en absolu dans la scène */
.cas-scene { position: relative; overflow-x: clip; }
.cas-panneau {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 26px;
  align-items: start;
}
.cas-panneau:not(.is-on) {
  position: absolute;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---- colonne texte : titre, objectif, chiffres, CTA ----
   Mise en page reprise de la maquette : le cas se lit comme une page —
   titre à gauche, preuve visuelle à droite — au lieu d'une carte
   témoignage décorée. Mêmes contenus qu'avant, réagencés. */
.cas-info { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 8px; }
.cas-titre {
  font-size: clamp(1.55rem, 2.7vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.cas-objectif { font-size: 0.96rem; line-height: 1.62; color: var(--text-2); max-width: 46ch; }
.cas-objectif b { color: var(--text); font-weight: 600; }
.cas-cta { margin-top: 4px; }

.cas-chiffres { display: grid; grid-template-columns: repeat(3, auto); gap: 30px; margin-top: 2px; }
.cas-chiffres b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  white-space: nowrap;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent-hi);
}
.cas-chiffres span { display: block; margin-top: 5px; font-family: var(--font-label); font-size: 0.78rem; color: var(--text-3); }

/* ---- colonne visuelle : écran + bulle ---- */
.cas-visu { display: grid; gap: 13px; }
.cas-ecran {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  padding: 13px;
  display: grid;
  gap: 12px;
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 0.85);
}
.cas-grille3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cas-grille3 img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; border: 1px solid var(--line); }

.cas-avap-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cas-avap-grille figure { margin: 0; position: relative; }
.cas-avap-grille figcaption {
  position: absolute; top: 9px; left: 9px; z-index: 1;
  font-family: var(--font-label); font-size: 0.74rem; font-weight: 600;
  background: rgba(12, 10, 7, 0.74); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 11px; color: var(--text-2);
}
.cas-avap-grille .ap figcaption {
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  border-color: transparent;
}
.cas-avap-grille img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; border: 1px solid rgba(255, 244, 230, 0.12); }
.cas-avap-grille .ap img { border-color: rgba(255, 153, 28, 0.5); box-shadow: 0 0 30px -12px rgba(255, 153, 28, 0.45); }

/* la bulle : le retour client, comme un message reçu */
.cas-retour { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.cas-bulle {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  color: var(--on-accent);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.4;
  padding: 10px 17px;
  border-radius: 16px 16px 4px 16px;
  max-width: 52ch;
}
.cas-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent-hi); flex: 0 0 auto; }

/* ---- entrée : mêmes valeurs que [data-appear] du site ---- */
.cas-filtres,
.cas-info,
.cas-visu {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(8px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out), filter 0.8s var(--ease-out);
}
.in-view .cas-filtres,
.in-view .cas-info,
.in-view .cas-visu { opacity: 1; transform: none; filter: blur(0); }
.in-view .cas-filtres { transition-delay: 0.36s; }
.in-view .cas-info { transition-delay: 0.08s; }
.in-view .cas-visu { transition-delay: 0.24s; }

/* changement d'onglet : un simple fondu du panneau entrant */
@keyframes cas-fondu { from { opacity: 0; } to { opacity: 1; } }
.cas-panneau.entre { animation: cas-fondu 0.3s ease both; }
@media (prefers-reduced-motion: reduce) {
  .cas-panneau.entre { animation: none; }
}

@media (max-width: 1000px) {
  .cas-panneau { grid-template-columns: 1fr; }
  .cas-retour { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .cas-chiffres { grid-template-columns: repeat(3, auto); gap: 18px; }
  .cas-grille3 { gap: 8px; }
  .cas-avap-grille { gap: 8px; }
  .cas-ecran { padding: 9px; gap: 8px; border-radius: 14px; }
}

/* ============ Portfolio ============ */

/* Réalisations : les miniatures dans un vrai feed YouTube */
.yt-fen {
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: #0f0e0c;
  box-shadow: var(--sh-card);
}
.yt-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--white-3);
}
.yt-logo {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--text-2);
  flex: 0 0 auto;
}
.yt-logo i {
  position: relative;
  width: 23px;
  height: 16px;
  border-radius: 4px;
  background: #ff0033;
  font-style: normal;
}
.yt-logo i::after {
  content: '';
  position: absolute;
  left: 8.5px;
  top: 4px;
  border-left: 6px solid #fff;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.yt-champ {
  flex: 1;
  max-width: 440px;
  height: 31px;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 0 15px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  font-family: var(--font-label);
  font-size: 0.78rem;
  color: var(--text-3);
}
.yt-champ b { font-weight: 400; color: var(--text-2); }
.yt-caret { width: 1px; height: 14px; background: var(--accent); animation: yt-clignote 1.1s steps(1) infinite; }
@keyframes yt-clignote { 50% { opacity: 0; } }

.yt-vue {
  /* proportionnel : les cartes grandissent avec la largeur, une hauteur fixe
     recouperait la 2e rangée sur grand écran. Là on en voit toujours 2 et un tiers. */
  aspect-ratio: 2 / 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent);
  mask-image: linear-gradient(180deg, #000 82%, transparent);
}
.yt-flux {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 16px;
  padding: 18px;
}
/* le feed ne remonte qu'une fois la section à l'écran */
.in-view .yt-flux { animation: yt-remonte 65s linear infinite; }
@keyframes yt-remonte { to { transform: translateY(-50%); } }
/* au survol on ralentit le flux au lieu de le figer — géré en JS par
   updatePlaybackRate, qui garde la position courante là où changer la durée
   en CSS ferait sauter le feed */

.yt-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  transition: transform 0.35s var(--ease-out);
}
.yt-card:hover img { transform: scale(1.03); }
.yt-meta { display: flex; gap: 9px; margin-top: 8px; }
.yt-pp { flex: 0 0 auto; width: 23px; height: 23px; border-radius: 50%; background: var(--white-12); }
.yt-txt { display: grid; gap: 5px; flex: 1; min-width: 0; align-content: start; }
.yt-t { height: 6px; border-radius: 999px; background: rgba(255, 244, 230, 0.17); }
.yt-t.s { width: 56%; }
.yt-c { height: 4px; width: 38%; border-radius: 999px; background: rgba(255, 244, 230, 0.09); }

@media (max-width: 820px) {
  .yt-flux { grid-template-columns: repeat(2, 1fr); gap: 14px 12px; padding: 14px; }
  /* 2 colonnes : les cartes sont plus hautes, il faut un cadre plus carré */
  .yt-vue { aspect-ratio: 1.12 / 1; }
  .yt-champ { max-width: none; }
}
@media (max-width: 560px) {
  .yt-logo span { display: none; }
}

.portfolio-more { text-align: center; margin-top: 34px; }

/* ============ Pricing ============ */

.pricing {
  width: calc(100vw - 16px);
  margin-inline: auto;
  border-radius: 28px;
  background: linear-gradient(108deg, #191309 0%, #120c05 100%);
  box-shadow: inset 0 1px 0 rgba(255, 244, 230, 0.09);
  overflow: hidden;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: start;
}

.price-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: 36px 30px;
  transition: border-color 0.35s, transform 0.4s var(--ease-main), box-shadow 0.4s;
}
.price-card:hover {
  border-color: rgba(255, 153, 28, 0.45);
  transform: translateY(-9px);
  box-shadow: 0 34px 80px -28px rgba(255, 153, 28, 0.3), 0 20px 50px -20px rgba(0, 0, 0, 0.6);
}

/* au survol d'une carte, son CTA passe en orange */
.price-card:hover .btn-outline {
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent-hi) 0%, var(--accent) 55%, #f08a0e 100%);
  border-color: var(--accent-deep);
  box-shadow: 0 0 6px rgba(255, 153, 28, 0.5), 0 14px 35px -10px rgba(255, 153, 28, 0.35);
}

.price-card h3 { font-size: 1.5rem; }
.price-desc { color: var(--text-2); font-size: 0.95rem; margin-top: 8px; min-height: 44px; }

/* ---- ce que contient le pack : une ligne de texte, lisible sans etre criarde ---- */
.pk-compte {
  margin-top: 12px;
  font-family: var(--font-label);
  font-size: 0.86rem;
  color: var(--text-2);
}
.pk-compte b { color: var(--accent); font-weight: 600; }

.price-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 22px 0 26px;
}
.price-amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.1rem, 3.6vw, 3.7rem);
  letter-spacing: -0.03em;
  line-height: 1;
  transition: color 0.3s;
}
.price-card:hover .price-amount { color: var(--accent-hi); }
.price-ttc {
  font-family: var(--font-label);
  font-size: 0.82rem;
  color: var(--text-3);
}
.price-promo {
  margin-left: auto;
  font-family: var(--font-label);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  background: rgba(255, 153, 28, 0.1);
  border-radius: 999px;
  padding: 4px 10px;
}

.price-per {
  margin: -16px 0 24px;
  font-family: var(--font-label);
  font-size: 0.8rem;
  color: var(--text-3);
}
.price-per b { color: var(--accent-hi); font-weight: 700; }

.price-feats {
  position: relative;
  margin-top: 26px;
  padding-top: 24px;
  display: grid;
  gap: 12px;
}
/* séparateur pointillé maîtrisé */
.price-feats::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, var(--line-strong) 55%, transparent 55%);
  background-size: 9px 1px;
}
.price-feats li {
  position: relative;
  padding-left: 28px;
  font-size: 0.95rem;
  color: var(--text-2);
}
.price-feats li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff991c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4 10-10'/%3E%3C/svg%3E") center / 11px no-repeat,
    rgba(255, 153, 28, 0.12);
}

/* pack mis en avant : bordure lumineuse rotative + fond ambré + trame de points */
@property --spin {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.price-featured {
  border: 1.5px solid transparent;
  background:
    radial-gradient(140% 90% at 50% -20%, rgba(255, 153, 28, 0.26), rgba(255, 153, 28, 0.04) 48%, transparent 70%) padding-box,
    linear-gradient(175deg, #251504 0%, #1a1007 55%, #17130e 100%) padding-box,
    conic-gradient(from var(--spin), var(--accent) 0deg, rgba(255, 153, 28, 0.14) 70deg, rgba(255, 153, 28, 0.14) 150deg, var(--accent-hi) 180deg, rgba(255, 153, 28, 0.14) 210deg, rgba(255, 153, 28, 0.14) 290deg, var(--accent) 360deg) border-box;
  animation: spin-border 6s linear infinite;
  box-shadow:
    0 40px 90px -28px rgba(255, 153, 28, 0.35),
    0 20px 50px -20px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 244, 230, 0.12);
}
@keyframes spin-border {
  to { --spin: 360deg; }
}
/* trame de points en haut de la carte (rappel du halftone) */
.price-featured::before {
  content: '';
  position: absolute;
  inset: 0 0 55%;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255, 176, 74, 0.22) 1px, transparent 1.3px) 0 0 / 13px 13px;
  -webkit-mask-image: linear-gradient(#000, transparent);
  mask-image: linear-gradient(#000, transparent);
  pointer-events: none;
}
.price-featured .price-per { color: var(--text-2); }
.price-featured .price-feats::before {
  background: linear-gradient(to right, rgba(255, 153, 28, 0.35) 55%, transparent 55%);
  background-size: 9px 1px;
}
.price-featured .price-feats li { color: var(--text); }
.price-featured .price-feats li::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c0f00' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4 10-10'/%3E%3C/svg%3E") center / 11px no-repeat,
    linear-gradient(180deg, var(--accent-hi), var(--accent));
  box-shadow: 0 2px 8px rgba(255, 153, 28, 0.35);
}
@media (min-width: 821px) {
  .price-featured { transform: scale(1.045); }
  .price-featured:hover { transform: scale(1.06) translateY(-8px); }
}

/* ---------- carte sur-mesure : sélecteur dégressif ---------- */
.price-slider .sl-count { font-family: var(--font-label); color: var(--text-2); font-size: 0.95rem; margin-bottom: 12px; }
.price-slider .sl-count b { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--accent-hi); margin-right: 5px; }
.price-slider input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; margin: 2px 0 22px; cursor: pointer; outline: none;
  background: linear-gradient(90deg, var(--accent) var(--pct, 24%), var(--white-12) var(--pct, 24%));
}
.price-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent)); border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent-deep), 0 6px 16px -4px rgba(255, 153, 28, 0.7); cursor: grab; transition: transform 0.12s;
}
.price-slider input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.1); cursor: grabbing; }
.price-slider input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg);
  box-shadow: 0 6px 16px -4px rgba(255, 153, 28, 0.7); cursor: grab;
}
.price-slider input[type="range"]::-moz-range-track { height: 8px; border-radius: 99px; background: var(--white-12); }
.price-slider input[type="range"]::-moz-range-progress { height: 8px; border-radius: 99px; background: var(--accent); }
.price-slider .price-amount { transition: color 0.15s; }
.price-slider .sl-save { color: var(--accent-hi); font-weight: 500; }
#slCta.is-loading { opacity: 0.6; pointer-events: none; }
#slCta b { font-weight: inherit; }

.price-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-label);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  border-radius: 999px;
  padding: 6px 16px;
  box-shadow: 0 6px 20px rgba(255, 153, 28, 0.4);
}

.pricing-note {
  text-align: center;
  margin-top: 40px;
  color: var(--text-3);
  font-size: 0.95rem;
}

/* ============ Mur d'avis (wall of love) : 2 colonnes verticales ============ */
.wall-wrap {
  position: relative;
  /* --wall-max est la reference lue par le JS ; il n'ecrit que max-height,
     sinon il relit sa propre valeur et se stabilise sur un mauvais calcul */
  --wall-max: 720px;
  max-height: var(--wall-max);
  overflow: hidden;
}
/* le wrap porte aussi data-reveal, dont la transition raccourcie écrase la
   nôtre. On redéclare les deux ensemble, sur un sélecteur plus spécifique. */
.wall-wrap[data-reveal] {
  transition:
    max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 1.1s var(--ease-out),
    transform 1.1s var(--ease-out),
    filter 1.1s var(--ease-out);
}
.wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 248px;
  gap: 16px;
}
.wall-mask {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 300px;
  background: linear-gradient(180deg, transparent, var(--bg) 78%);
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.4s;
}
.wall-more {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 3;
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), visibility 0s linear 0s;
}
/* sans ça, .btn:active (plus spécifique) remplace le centrage par un scale
   et le bouton saute d'une demi-largeur vers la droite pendant l'appui. */
.wall-more:active { transform: translate(-50%, 0) scale(0.98); }
.wall-wrap.is-open .wall-mask { opacity: 0; }
.wall-wrap.is-open .wall-more {
  opacity: 0;
  transform: translate(-50%, 10px);
  pointer-events: none;
  visibility: hidden;
  transition-delay: 0s, 0s, 0.35s;
}

.wall-card {
  height: 100%;
  overflow: hidden;
  background: var(--white-3);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 12px 28px -22px rgba(0, 0, 0, 0.5);
}
.wall-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--accent);
}
.wall-stars svg { width: 13px; height: 13px; }
.wall-card blockquote {
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.52;
  /* toutes les cartes font la même hauteur : les avis longs sont coupés proprement */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wall-video {
  position: relative;
  display: block;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: pointer;
  box-shadow: 0 12px 28px -22px rgba(0, 0, 0, 0.5);
}
.wall-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s var(--ease-main);
}
/* posters verticaux : au lieu de recadrer dans le visage, on affiche la vidéo
   entière sur un fond flouté tiré du même poster, avec une lueur ambrée */
.wall-video.v img {
  object-fit: contain;
  position: relative;
  z-index: 1;
  transform: scale(0.94);
}
.wall-video.v:hover img { transform: scale(0.99); }
.wall-video.v::before {
  content: '';
  position: absolute;
  inset: -12%;
  background: var(--poster) center / cover no-repeat;
  filter: blur(26px) saturate(1.15) brightness(0.5);
  z-index: 0;
}
.wall-video.v {
  background: radial-gradient(120% 90% at 50% 8%, rgba(255, 153, 28, 0.26), transparent 62%), #0b0906;
}
.wall-video:hover img { transform: scale(1.05); }
.wall-video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(6, 4, 2, 0.9));
  z-index: 1;
  pointer-events: none;
}
.wall-video .video-play { z-index: 2; width: 44px; height: 44px; }
.wall-video .video-play svg { width: 19px; height: 19px; }
.wall-video .video-meta {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 2;
  display: grid;
  gap: 2px;
  font-family: var(--font-label);
  font-size: 0.86rem;
  color: rgba(244, 240, 234, 0.72);
}
.wall-video .video-meta b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  color: #fff;
  line-height: 1.15;
}

.wall-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}
.wall-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wall-who > img, .wall-mono {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: 0 0 auto;
  object-fit: cover;
}
.wall-mono {
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--accent-hi), var(--accent-deep));
  color: var(--on-accent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  font-style: normal;
}
.wall-id { display: grid; min-width: 0; }
.wall-id b {
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wall-id span {
  color: var(--text-3);
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wall-plat {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px -4px rgba(255, 153, 28, 0.5);
}
.wall-plat svg { width: 17px; height: 17px; color: var(--on-accent); }
@media (max-width: 1020px) {
  .wall { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 236px; }
  .wall-wrap { max-height: 640px; }
}
@media (max-width: 720px) {
  /* une seule colonne : pas d'effet escalier possible, on rend le texte en entier */
  .wall { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 14px; }
  .wall-card blockquote { -webkit-line-clamp: unset; }
  .wall-video { aspect-ratio: 16 / 9; height: auto; }
  .wall-wrap { --wall-max: 620px; }
  .wall-card { padding: 20px; border-radius: 18px; }
  .wall-video { border-radius: 18px; }
  .wall-mask { height: 220px; }
}

/* ============ (ancien) rails / carrousel — non utilisés ============ */
.reviews-rails {
  display: grid;
  gap: 18px;
}
.rail {
  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);
}
.rail-track {
  display: flex;
  align-items: stretch;
  gap: 18px;
  width: max-content;
  animation: rail-x var(--dur, 80s) linear infinite;
}
.rail-reverse .rail-track { animation-direction: reverse; }
.rail:hover .rail-track { animation-play-state: paused; }
@keyframes rail-x {
  to { transform: translateX(calc(-50% - 9px)); }
}

/* Carrousel avis vidéo (navigation manuelle par flèches) */
.vreviews {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 22px;
}
.vreviews-viewport {
  overflow: hidden;
  flex: 0 1 auto;
  max-width: 100%;
}
.vreviews-track {
  display: flex;
  gap: 18px;
  transition: transform 0.6s var(--ease-main);
  will-change: transform;
}
.vreviews .video-card {
  width: clamp(230px, 23vw, 285px);
  min-height: clamp(300px, 30vw, 378px);
}
.vreviews-arrow {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--white-3);
  color: var(--text-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, background-color 0.3s, transform 0.2s, opacity 0.3s;
}
.vreviews-arrow:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent-hi);
  background: rgba(255, 153, 28, 0.08);
}
.vreviews-arrow:active:not(:disabled) { transform: scale(0.94); }
.vreviews-arrow:disabled { opacity: 0.28; cursor: default; }
.vreviews-arrow svg { width: 18px; height: 18px; }

.rev-card {
  width: min(322px, 80vw);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white-3);
  padding: 18px 20px;
}
.rev-card blockquote {
  color: var(--text-2);
  font-size: 0.86rem;
  line-height: 1.5;
  margin-bottom: 14px;
}
.rev-card figcaption {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: center;
}
.rev-card figcaption img {
  grid-row: span 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line-strong);
}
.rev-card figcaption:not(:has(img)) { grid-template-columns: 1fr; }

.video-card {
  position: relative;
  width: 250px;
  min-height: 330px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  display: block;
  flex: 0 0 auto;
}
.video-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-main), filter 0.4s;
  filter: saturate(0.85);
}
.video-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(6, 4, 2, 0.85) 100%);
}
.video-card:hover img { transform: scale(1.04); filter: saturate(1); }

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(244, 240, 234, 0.95);
  color: #14100a;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45), 0 0 0 8px rgba(244, 240, 234, 0.12);
  transition: scale 0.35s var(--ease-pop), background-color 0.3s;
  z-index: 2;
}
.video-play svg { width: 24px; height: 24px; margin-left: 2px; }
.video-card:hover .video-play {
  scale: 1.12;
  background: var(--accent);
}

.video-meta {
  position: absolute;
  left: 16px;
  bottom: 14px;
  display: grid;
  z-index: 2;
}
.video-meta b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: #fff;
}
.video-meta {
  font-family: var(--font-label);
  font-size: 0.8rem;
  color: rgba(244, 240, 234, 0.6);
}

.review-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
}
.review-role {
  font-family: var(--font-label);
  font-size: 0.8rem;
  color: var(--text-3);
}

/* ============ FAQ ============ */

.faq-list { max-width: 860px; margin-inline: auto; }

.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.06rem;
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent-hi); }

.faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition: transform 0.4s var(--ease-spring), border-color 0.3s, background-color 0.3s;
}
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.6px;
  background: var(--text-2);
  transform: translate(-50%, -50%);
  transition: background-color 0.3s;
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq-item[open] .faq-icon {
  transform: rotate(45deg);
  border-color: var(--accent);
  background: rgba(255, 153, 28, 0.1);
}
.faq-item[open] .faq-icon::before, .faq-item[open] .faq-icon::after { background: var(--accent); }

.faq-body {
  overflow: hidden;
  color: var(--text-2);
  font-size: 0.98rem;
}
.faq-body p { padding-bottom: 22px; max-width: 680px; }
.faq-body ul { list-style: none; max-width: 680px; padding-bottom: 22px; display: grid; gap: 7px; }
.faq-body ul li { padding-left: 18px; position: relative; }
.faq-body ul li::before { content: '—'; position: absolute; left: 0; color: var(--text-3); }
.faq-body p + ul { margin-top: -12px; }

/* carte CTA sous la FAQ */
.faq-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: clamp(52px, 6vw, 76px) auto 0;
  border-radius: 40px;
  padding: clamp(40px, 4.2vw, 58px) clamp(28px, 5vw, 64px);
  text-align: center;
  background:
    radial-gradient(85% 120% at 16% 4%, rgba(255, 153, 28, 0.22), transparent 55%),
    radial-gradient(80% 130% at 102% 104%, rgba(255, 176, 74, 0.16), transparent 52%),
    radial-gradient(135% 155% at 50% -8%, #3a2109 0%, #241505 46%, #150c02 100%);
  border: 1px solid rgba(255, 153, 28, 0.18);
  box-shadow:
    0 44px 100px -34px rgba(0, 0, 0, 0.72),
    0 0 120px -50px rgba(255, 153, 28, 0.4),
    inset 0 1px 0 rgba(255, 244, 230, 0.06);
}
.cta-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.6;
  pointer-events: none;
}
.cta-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(900px, 78vw);
  height: min(900px, 78vw);
  opacity: 0.12;
  transform: translate(-50%, -50%) rotate(-6deg);
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 60%, transparent 100%);
}
.cta-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
.cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-label);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text);
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(255, 244, 230, 0.1);
  border-radius: 999px;
  padding: 7px 18px 7px 9px;
  margin-bottom: clamp(14px, 2vw, 20px);
  backdrop-filter: blur(6px);
}
.cta-avatars { display: inline-flex; }
.cta-avatars img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #241505;
  margin-left: -11px;
}
.cta-avatars img:first-child { margin-left: 0; }
.faq-cta h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 4.6vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--text);
}
.faq-cta h3 em {
  font-style: italic;
  font-weight: 600;
  color: var(--accent);
}
.faq-cta p {
  margin: clamp(12px, 1.8vw, 20px) auto 0;
  max-width: 620px;
  color: var(--text-2);
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
}
.cta-actions {
  margin-top: clamp(24px, 3vw, 38px);
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-cta-ghost {
  color: var(--text);
  background: rgba(255, 244, 230, 0.06);
  border: 1px solid rgba(255, 244, 230, 0.14);
}
.btn-cta-ghost:hover {
  background: rgba(255, 244, 230, 0.1);
  border-color: rgba(255, 244, 230, 0.24);
}
.cta-assure {
  margin-top: clamp(14px, 1.8vw, 18px);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-label);
  font-size: 0.9rem;
  color: var(--text-2);
}
.cta-assure svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
  flex: none;
}
.cta-logos {
  width: min(760px, 100%);
  margin: clamp(26px, 3vw, 38px) auto 0;
}
.cta-logos .clients-track { gap: 38px; animation-duration: 38s; }
.cta-logos .client-chip { font-size: 0.92rem; }
.cta-logos .client-chip img { width: 26px; height: 26px; }

/* ============ CTA final ============ */

/* ============ Footer ============ */

.footer {
  border-top: 1px solid var(--line);
  padding-top: clamp(50px, 7vw, 80px);
  overflow: hidden;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 60px;
}

.footer-brand p {
  margin-top: 16px;
  color: var(--text-2);
  max-width: 240px;
  font-size: 0.95rem;
}

.footer-col { display: grid; gap: 12px; align-content: start; }
.footer-title {
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
.footer-col a {
  font-size: 0.95rem;
  color: var(--text-2);
  transition: color 0.2s;
  width: max-content;
}
.footer-col a:hover { color: var(--accent-hi); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 22px;
  border-top: 1px solid var(--line);
  font-family: var(--font-label);
  font-size: 0.8rem;
  color: var(--text-3);
}

/* ============ Reveal au scroll ============ */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(10px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out), filter 1.1s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].visible { opacity: 1; transform: none; filter: blur(0); }

/* ============ Responsive ============ */

@media (max-width: 1020px) {
  .mcards { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .pcards { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .pcards::before { display: none; }
  .pstep-link { display: none; }
  /* en colonne : les visuels prennent leur hauteur naturelle, pas de découpe */
  .pcard-visual { height: auto; align-items: center; padding: 28px 24px; }
  .pcard-visual::after { display: none; }
  /* la colonne est étroite : les trois visuels prennent toute la largeur */
  .pv-1 .onb, .pv-2 .layer-stack, .pv-3 .wa { width: 100%; }
  /* les calques arrivent de moins loin et les curseurs se promènent moins :
     l'écran est étroit */
  .pv-2 { --deal-x: 64px; --deal-y: -38px; --wander: 0.55; }
  /* l'étiquette « Visage » occupe la colonne de gauche sur cet écran :
     on démarre le curseur à sa droite, il ne la croisera jamais */
  .pv2-cur-2 { top: 52%; left: 34%; }
  /* la colonne est étroite : on rend sa largeur à la bulle pour que les titres tiennent */
  .pv-3 .rowIn .wa-bubble { max-width: 84%; }
  /* la colonne est plus étroite ici : on récupère la largeur perdue */
  .wa { width: 100%; }
  .wa-titles span { font-size: 0.71rem; padding: 4px 7px; }
}

@media (max-width: 860px) {
}

@media (max-width: 820px) {
  .nav-links { display: none; }
  .faq-cta { padding: clamp(36px, 6vw, 48px) clamp(20px, 4vw, 32px); border-radius: 28px; }
  .cta-logos { margin-top: 30px; }
  .stats-grid { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .stat:nth-child(odd) { border-left: none; }
  .video-reviews { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; margin-bottom: 40px; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .hero-ctas .btn { width: 100%; }
  .rev-card { padding: 20px; }
  .faq-cta { padding: 36px 18px; border-radius: 26px; }
  .cta-actions { flex-direction: column; }
  .cta-actions .btn { width: 100%; }
  .cta-badge {
    display: flex;
    font-size: 0.74rem;
    line-height: 1.25;
    gap: 8px;
    padding: 7px 14px 7px 8px;
    text-align: left;
  }
  .cta-avatars img { width: 22px; height: 22px; margin-left: -8px; }
  .cta-avatars img:nth-child(4) { display: none; }
  .cta-assure { font-size: 0.82rem; gap: 7px; }
  .cta-assure svg { width: 16px; height: 16px; }
  .cta-logos .clients-track { gap: 24px; }
  .cta-logos .client-chip { font-size: 0.84rem; gap: 8px; }
  .cta-logos .client-chip img { width: 22px; height: 22px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ============ Reduced motion ============ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  [data-reveal], [data-appear], .load-1, .load-3, .load-4, .load-5, .load-6 { opacity: 1; transform: none; filter: none; }
  .hero h1 .line > span { transform: none; }
  .hero-ring { opacity: 1; }
  /* étape 3 : sans animation, on montre la conversation aboutie */
  .pv-3 .wa-banner, .pv-3 .rowIn, .pv-3 .rowOut,
  .pv-3 .waTxt, .pv-3 .wa-titles span, .pv-3 .wa-emoji { opacity: 1; }
  .pv-3 .rowTyping, .pv-3 .rowTyping2 { display: none; }
  /* étape 2 : le montage est montré terminé */
  .pv-2 .lay, .pv-2 .lay-tag { opacity: 1; }
  /* analyse : on montre le résultat, la gagnante en couleur */
  .niche-thumb b { opacity: 1; }
  .niche-thumb:not(.win) img { filter: grayscale(1) brightness(0.34); }
  .niche-thumb::after { display: none; }
  /* étape 1 : le brief est montré rempli */
  .pv-1 .onb-field, .pv-1 .onb-submit, .pv-1 .onb-check, .pv-1 .onb-done { opacity: 1; }
  .pv-1 .onb-prog i { background: var(--accent); }
  .pv-1 .f1 .onb-bar { width: 62%; }
  .pv-1 .f2 .onb-bar { width: 78%; }
  .pv-1 .onb-chrono { display: none; }
}

/* ============ Lightbox avis vidéo (Wistia) ============ */
.vlightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 4, 2, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
}
.vlightbox.is-open { opacity: 1; }
.vlightbox-inner {
  position: relative;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 153, 28, 0.22);
  transform: scale(0.96);
  transition: transform 0.25s var(--ease-out);
}
.vlightbox.is-open .vlightbox-inner { transform: scale(1); }
.vlightbox-inner.vl-h { width: min(900px, 92vw); aspect-ratio: 16 / 9; }
.vlightbox-inner.vl-v { height: min(84vh, 720px); width: calc(min(84vh, 720px) * 9 / 16); max-width: 92vw; }
.vlightbox-inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vlightbox-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.5rem;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.vlightbox-close:hover { background: var(--accent); color: var(--on-accent); transform: scale(1.08); }

/* ============ bouton WhatsApp flottant ============
   Il n'apparait qu'une fois le lecteur arrive en bas : plus tot, il ferait
   doublon avec les CTA de la page et masquerait du contenu. */
.wa-flot {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  text-decoration: none;
  color: var(--on-accent);
  /* meme fabrication que .btn-key : degrade en padding-box, contour en border-box */
  background:
    linear-gradient(180deg, var(--accent-hi) 0%, var(--accent) 55%, #f08a0e 100%) padding-box,
    linear-gradient(var(--accent-deep), var(--accent-deep)) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(120, 62, 0, 0.35),
    /* halo : un anneau proche puis deux diffusions, pour que la lumiere
       deborde du cercle sans faire de contour net */
    0 0 0 7px rgba(255, 153, 28, 0.10),
    0 0 22px rgba(255, 153, 28, 0.55),
    0 0 55px rgba(255, 153, 28, 0.32),
    0 16px 40px -10px rgba(255, 153, 28, 0.45);
  /* etat cache par defaut */
  opacity: 0;
  transform: translateY(18px) scale(0.94);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 0.45s var(--ease-out),
    transform 0.45s var(--ease-out),
    visibility 0s linear 0.45s;
}
.wa-flot svg { width: 29px; height: 29px; }

.wa-flot.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s, 0s, 0s;
}
.wa-flot:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(120, 62, 0, 0.35),
    0 0 0 9px rgba(255, 153, 28, 0.13),
    0 0 30px rgba(255, 153, 28, 0.7),
    0 0 70px rgba(255, 153, 28, 0.4),
    0 16px 40px -10px rgba(255, 153, 28, 0.5);
}
.wa-flot:active { transform: translateY(0) scale(0.97); }

@media (max-width: 620px) {
  .wa-flot { right: 16px; bottom: 16px; width: 56px; height: 56px; }
  .wa-flot svg { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-flot { transition: opacity 0.2s linear, visibility 0s linear 0.2s; transform: none; }
  .wa-flot.is-on { transform: none; }
}