/* ==========================================================================
   _skills.css — couche d'effets additive (ne remplace rien de styles.css)
   Ajouts vanilla portés depuis la lib @jnt/ui :
     1. TextReveal — mots qui glissent de derrière un masque (Power4.out)
     2. LightBeamButton — bordure conique tournante or sur les CTAs primaires
     3. Ambient gold — léger halo gold radial au niveau body (continu, pas de bandes)
     4. Magnetic — base CSS pour les éléments attirés par la souris (logique en JS)
   Tout coupé sous prefers-reduced-motion.
   ========================================================================== */

/* ---------- 1. TEXT REVEAL (word mask, Power4.out) ---------- */
.text-reveal { line-height: inherit; }
.text-reveal .tr-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1.05;
}
.text-reveal .tr-word {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: transform;
}
.text-reveal.tr-in .tr-word { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .text-reveal .tr-word { transform: none !important; transition: none !important; }
}

/* ---------- 2. SHINE CTA — sheen lumineux qui balaye la surface ----------
   Le VRAI « shine » : une bande de lumière inclinée traverse le bouton en
   boucle lente (et plus vite au hover), clippée par overflow:hidden à la forme
   pill. Zéro conic-gradient = zéro artifact, peu importe le fond.
   (Remplace l'ancien halo radial qui « respirait » : un glow, pas un shine.) */
.btn-light-beam {
  position: relative;
  isolation: isolate;
  overflow: hidden;           /* clippe le sheen aux coins arrondis du bouton */
}
.btn-light-beam::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;                 /* au-dessus du fond gradient, glisse sur le label */
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 60%
  );
  transform: translateX(-130%) skewX(-18deg);
  animation: jnt-sheen-sweep 6s cubic-bezier(.6, .04, .3, 1) infinite;
}
.btn-light-beam:hover::before { animation-duration: 2.4s; }
@keyframes jnt-sheen-sweep {
  0%        { transform: translateX(-130%) skewX(-18deg); }
  18%, 100% { transform: translateX(130%)  skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-light-beam::before { animation: none; opacity: 0; }
}

/* ---------- 3. AMBIENT GOLD (halo continu au niveau body) ---------- */
body.ambient-gold {
  background-color: var(--cream);
  background-image:
    radial-gradient(ellipse 55% 26% at 15% 7%, rgba(242, 145, 27, 0.07), transparent 70%),
    radial-gradient(ellipse 60% 28% at 85% 18%, rgba(248, 193, 58, 0.06), transparent 70%),
    radial-gradient(ellipse 50% 22% at 25% 42%, rgba(242, 145, 27, 0.05), transparent 70%),
    radial-gradient(ellipse 65% 24% at 78% 65%, rgba(248, 193, 58, 0.05), transparent 70%),
    radial-gradient(ellipse 55% 22% at 20% 88%, rgba(242, 145, 27, 0.06), transparent 70%);
}

/* ---------- 4. MAGNETIC (le JS pilote le transform; ici juste la base) ---------- */
[data-magnetic] {
  will-change: transform;
  /* Le transform inline du JS gagne; transition douce pour le retour au repos. */
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- bonus : enlève l'aliasing des bordures sur les btn-light-beam pendant le hover ---------- */
.btn-light-beam.btn-primary { will-change: transform, box-shadow; }

/* ---------- 5. NAV — entrance + scroll-state (pill premium) ----------
   Le pill descend en fade au chargement, puis se compacte + ombre renforcée
   dès qu'on scrolle (classe .jnt-scrolled posée par _skills.js). Additif :
   ne touche pas au layout grid existant de .nav-inner. */
nav .nav-inner {
  transition: height .38s cubic-bezier(.22, 1, .36, 1),
              box-shadow .38s ease,
              background-color .38s ease;
}
@media (prefers-reduced-motion: no-preference) {
  nav .nav-inner { animation: jnt-nav-drop .75s cubic-bezier(.22, 1, .36, 1) both; }
}
@keyframes jnt-nav-drop {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
nav.jnt-scrolled .nav-inner {
  height: 60px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .09) inset;
}
nav.jnt-scrolled .logo img { height: 32px; }
.nav-inner .logo img { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), height .38s cubic-bezier(.22, 1, .36, 1); }

/* ====================================================================
   6. HERO « WOW » CLAIR (Apple-minimal) — blanc + 1 accent or
   Le wow vient de l'ÉCHELLE de la typo + du moment « $1 → $15 » + du mouvement,
   PAS d'un fond sombre. Lumière dorée TRÈS pâle qui dérive sur le cream.
   ==================================================================== */
.hero.hero--cinematic { padding: 70px 0 84px; }

/* aurora RETIRÉE : ses halos dorés (gauche/droite) rendaient le fond non-uniforme
   (plus chaud à gauche). Fond hero = plat comme le body (uni). La chaleur vient des
   particules + de l'accent orange + de la carte. */
.hero--cinematic .hero-aurora { display: none; }
.hero--cinematic .ha-blob { position: absolute; border-radius: 50%; will-change: transform; }
.hero--cinematic .ha-blob-1 {
  width: 44vw; height: 44vw; left: -8vw; top: -14vw;
  background: radial-gradient(circle, rgba(242,145,27,.13), transparent 62%);
  animation: jnt-ha-drift-1 24s ease-in-out infinite;
}
.hero--cinematic .ha-blob-2 {
  width: 40vw; height: 40vw; right: -6vw; top: 2vw;
  background: radial-gradient(circle, rgba(248,193,58,.11), transparent 62%);
  animation: jnt-ha-drift-2 29s ease-in-out infinite;
}
.hero--cinematic .ha-blob-3 {
  width: 34vw; height: 34vw; left: 30vw; bottom: -16vw;
  background: radial-gradient(circle, rgba(242,145,27,.08), transparent 62%);
  animation: jnt-ha-drift-3 33s ease-in-out infinite;
}
@keyframes jnt-ha-drift-1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6vw,4vw) scale(1.12); } }
@keyframes jnt-ha-drift-2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-5vw,5vw) scale(1.15); } }
@keyframes jnt-ha-drift-3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(4vw,-5vw) scale(1.1); } }

/* particules dorées (canvas piloté par _skills.js) — au-dessus de l'aurora, sous le contenu */
.hero--cinematic .hero-embers { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero--cinematic .container { position: relative; z-index: 3; }

/* --- typo géante confiante (Apple-scale), couleur ink par défaut --- */
.hero--cinematic h1 {
  font-size: clamp(2.8rem, 6.6vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  max-width: 15ch;
}
/* le « $15 » : or qui SHIMMER en continu (gradient qui coule) + petit pop quand le compteur atterrit */
.hero--cinematic h1 .accent {
  display: inline-block;
  font-size: 1.24em;            /* le « $15 » domine la phrase = pièce maîtresse */
  line-height: 0.85;
  vertical-align: -0.06em;
  background: linear-gradient(110deg, #E87413 0%, #F2A028 35%, #FFD66B 52%, #F2A028 68%, #E87413 100%);
  background-size: 230% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: jnt-gold-shift 5.5s ease-in-out infinite;
}
@keyframes jnt-gold-shift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.hero--cinematic h1 .accent.jnt-countup-done { animation: jnt-gold-shift 5.5s ease-in-out infinite, jnt-accent-pop 0.9s cubic-bezier(.22,1,.36,1); }
@keyframes jnt-accent-pop { 0% { transform: scale(1); } 42% { transform: scale(1.07); } 100% { transform: scale(1); } }

/* hero épuré (Cuberto) : plus de respiration, le visuel = la sphère 3D */
.hero--cinematic .container { align-items: center; gap: 3rem; }
.hero--cinematic .hero-text { max-width: 640px; }
.hero--cinematic h1 { margin-bottom: 1.4rem; }
.hero--cinematic .hero-sub { font-size: 1.22rem; max-width: 30ch; }

/* HERO STATIQUE : plus de stage 300vh / sticky (le scroll-scrub sortait la carte de
   l'écran). Le hero est une section normale ; la carte reste en place, animée au load. */
.hero-stage { position: relative; }

/* --- DASHBOARD = le visuel du hero : se trace + GROSSIT vers plein écran au scroll --- */
.hero--cinematic .hero-visual { display: flex; justify-content: center; align-items: center; }
.hero--cinematic .hero-text { will-change: opacity; }
.hero--cinematic .partenaire-dashboard-card {
  transform-origin: center center;
  will-change: transform;
  position: relative;
  z-index: 4;            /* passe au-dessus du titre quand elle s'agrandit */
  box-shadow:
    0 34px 80px -30px rgba(20,20,45,.30),
    0 10px 28px -14px rgba(242,145,27,.20),
    0 0 0 1px rgba(0,0,0,.05);
}
/* showcase pur : PAS de flou ni de scrim au hover (on veut voir les résultats nets) */
.hero--cinematic .partenaire-dashboard-card:hover .dashboard-content { filter: none; opacity: 1; }
.hero--cinematic .partenaire-dashboard-card .dashboard-cta-overlay { display: none; }

/* ====================================================================
   6b. SECTION PREUVE — garantie + avis (descendus du hero pour épurer)
   ==================================================================== */
.hero-proof { background: var(--cream); padding: 4px 0 60px; }
.proof-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; max-width: 1000px; margin: 0 auto; }
.proof-card {
  background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 20px;
  padding: 1.7rem 1.9rem; box-shadow: 0 22px 46px -32px rgba(20,20,45,.32);
  display: flex; flex-direction: column; gap: .8rem;
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}
.proof-card:hover { transform: translateY(-4px); box-shadow: 0 30px 56px -30px rgba(20,20,45,.4); }
.proof-card-head { display: flex; align-items: center; gap: .7rem; }
.proof-icon {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #FBE6BE, #F4A028); color: #6b3e06;
}
.proof-icon svg { width: 21px; height: 21px; }
.proof-eyebrow { font-family: 'Sora',sans-serif; font-weight: 700; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.proof-stars { color: var(--gold-bright); font-size: 1.05rem; letter-spacing: .1em; }
.proof-text, .proof-quote { color: var(--ink); font-size: 1rem; line-height: 1.55; margin: 0; }
.proof-text strong, .proof-quote strong { color: var(--gold); font-weight: 700; }
.proof-author { color: var(--gray); font-size: .9rem; margin-top: .1rem; }
.proof-author strong { color: var(--ink); font-weight: 600; }

@media (max-width: 768px) {
  .hero.hero--cinematic { padding: 28px 0 48px; }
  .hero--cinematic h1 { font-size: clamp(1.95rem, 7.8vw, 3.4rem); max-width: 100%; overflow-wrap: break-word; }
  .hero--cinematic .hero-sub { max-width: 100%; }
  .proof-cards { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hero--cinematic .ha-blob,
  .hero--cinematic h1 .accent { animation: none !important; }
}

/* la nav glisse hors champ pendant l'expansion plein écran du dashboard */
nav { transition: transform .45s cubic-bezier(.22, 1, .36, 1); will-change: transform; }

/* ====================================================================
   7. CURSEUR CUSTOM (signature Cuberto) — pastille qui suit + grossit au hover
   Desktop pointer:fine seulement. Le natif est masqué via body.jnt-cursor-on.
   ==================================================================== */
/* quand le curseur custom est actif, masquer le natif PARTOUT (sinon cursor:pointer
   d'autres règles le fait réapparaître par-dessus les liens/cartes) */
body.jnt-cursor-on,
body.jnt-cursor-on * { cursor: none !important; }
#jntCursor {
  position: fixed; top: 0; left: 0;
  width: 12px; height: 12px; border-radius: 50%;
  /* orange + glow → visible sur fond clair ET foncé (avant: dot foncé invisible sur le noir) */
  background: var(--gold, #F2911B);
  box-shadow: 0 0 14px 2px rgba(242, 145, 27, .7);
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .28s cubic-bezier(.22,1,.36,1), height .28s cubic-bezier(.22,1,.36,1),
              background-color .28s ease, border-color .28s ease, opacity .3s ease;
  opacity: 0;
}
#jntCursor.jnt-ready { opacity: 1; }
#jntCursor.jnt-hover {
  width: 56px; height: 56px;
  background: rgba(242, 145, 27, .16);
  border: 1.5px solid var(--gold, #F2911B);
  box-shadow: 0 0 22px 2px rgba(242, 145, 27, .5);
}
@media (pointer: coarse) { #jntCursor { display: none !important; } }

/* 8. FUNNEL — l'icône complète qui suit le curseur (magnetic) + grossit :
   géré dans styles.css (.funnel-center-mag / .funnel-center-tile) + data-magnetic. */

/* GRAPHE INTERACTIF — curseur natif ↔ (le rond custom est masqué dessus par le JS).
   (0,2,1) pour battre body.jnt-cursor-on *{cursor:none!important} et éviter « pas de curseur ». */
body.jnt-cursor-on .chart-wrapper,
body.jnt-cursor-on .chart-wrapper * { cursor: ew-resize !important; }
/* ISOLATION DU RENDU — le graphe est dans une carte (ombre) posée par-dessus le canvas
   de particules qui repeint en continu. Sans containment, tout changement dans le SVG
   force Safari à re-compositer la carte par-dessus les particules à chaque frame = choppy.
   contain borne le rendu du graphe → ses repaints ne sortent plus de la boîte. */
.chart-wrapper { contain: paint; }
/* Nombres animés (count-up) sur leur propre couche GPU. Le texte change ~30×/s ;
   sans isolation, chaque écriture re-rasterise la carte/section par-dessus les
   particules animées = micro-lag. translateZ(0) → seul le nombre se repeint. */
.metric-num, .result-num,
.partenaire-dashboard-card .metric-number,
.partenaire-dashboard-card .footer-value { transform: translateZ(0); }
/* INVITATION du graphe = anneau HTML (div) qui pulse + glisse à droite au-dessus du point.
   transform/opacity sur un DIV = GPU → fluide Safari (≠ animer un élément SVG = re-raster). */
.chart-invite {
  position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; border: 2px solid rgba(232,116,15,.75);
  pointer-events: none; z-index: 6; will-change: transform, opacity;
  animation: jntChartInvite 1.5s ease-in-out infinite;
}
@keyframes jntChartInvite {
  0%,100% { transform: translateX(0)    scale(.8);  opacity: .95; }
  50%     { transform: translateX(16px) scale(1.35); opacity: .4; }
}
@media (prefers-reduced-motion: reduce) { .chart-invite { display: none; } }

/* ====================================================================
   9. NAV CTA — bouton compact qui FLOTTE dans le pill noir (marge autour)
   ==================================================================== */
.nav-inner { padding-right: .8rem; }
.nav-inner .nav-cta.btn { padding: .72rem 1.7rem; font-size: .9rem; }
nav.jnt-scrolled .nav-inner .nav-cta.btn { padding: .6rem 1.5rem; font-size: .86rem; }

/* ====================================================================
   VERSE BANNER — fond TRANSPARENT (hérite la page) → AUCUNE bande/ligne de
   séparation de background (règle JNT : un site pro n'a jamais de seam).
   Sur la page claire (accueil) on fonce le texte du verset pour la lisibilité.
   ==================================================================== */
.verse-banner { background: transparent; }
/* contraste AA sur le crème (était #B97D12 ≈ 3:1, trop pâle pour du petit texte) */
body.ambient-gold:not(.plasma-page) .verse-banner em { color: #8f5e0a; }
body.ambient-gold:not(.plasma-page) .verse-banner span { color: #6b6358; }

/* ====================================================================
   A11Y — focus clavier visible. Le curseur custom masque le curseur souris
   (cursor:none) et il n'y avait AUCUN style de focus → navigation clavier
   invisible. :focus-visible ne s'affiche qu'au clavier (rien à la souris).
   ==================================================================== */
a:focus-visible, button:focus-visible, .btn:focus-visible, [tabindex]:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
.case-cta:focus-visible, .nav-toggle:focus-visible, [data-open-booking]:focus-visible {
  outline: 3px solid var(--gold-bright, #E8B940);
  outline-offset: 3px;
  border-radius: 6px;
}

/* A11Y — couper les animations infinies sous prefers-reduced-motion (vestibulaire) */
@media (prefers-reduced-motion: reduce) {
  .results-grid, .testi-marquee, .partners-grid, .marquee,
  .funnel-center-tile::before, .status-dot, .badge .pulse, .pulse {
    animation: none !important;
  }
}

/* ====================================================================
   10. HERO ZOOM-AURA — halo doré qui grandit derrière la carte au scroll
   (opacity/scale pilotés par le scrub inline d'index.html). Fond plus vide.
   ==================================================================== */
.hero--cinematic .hero-zoom-aura {
  position: absolute; inset: -25%; z-index: 0; pointer-events: none; opacity: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(242,145,27,.20), transparent 52%),
    radial-gradient(circle at 50% 48%, rgba(248,193,58,.12), transparent 72%);
  filter: blur(50px); transform-origin: center center;
  will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .hero--cinematic .hero-zoom-aura { display: none; }
}

/* ====================================================================
   11. CARTE HERO — lockup « client × Partenaire.io » (façon études de cas)
   ==================================================================== */
.partenaire-dashboard-card .dash-lockup {
  display: flex; align-items: center; gap: 11px; min-height: 26px; margin-bottom: 6px;
}
.partenaire-dashboard-card .dash-lockup .metric-client-logo { max-height: 24px; }
.partenaire-dashboard-card .dash-cross {
  font-family: 'Sora', sans-serif; font-weight: 400; font-size: 15px; color: #c8ccd2; line-height: 1;
}
.partenaire-dashboard-card .dash-pmark { height: 24px; width: auto; display: block; }

/* ====================================================================
   12. SECTION MÉTRIQUES — fond beige UNI + texturé (« pièce d'art »)
   JNT : le crème plat manquait de texture. metrics + preuve = un même panneau
   beige chaud, grain fin (SVG noise) + halo or diffus = look galerie.
   ==================================================================== */
/* zone claire UNIFORME : hero + métriques + preuve = même beige, AUCUN gradient de
   transition → zéro séparation visible (JNT : « ça doit être uni »). */
/* fond clair PLAT et uni (#F8F5EF) — on retire les nappes dorées : elles créaient des
   zones plus chaudes = des bandes/seams subtils. Un fond pro = uniforme. (plasma-page garde son fond sombre, défini plus bas.) */
body.ambient-gold { background-color: #F8F5EF; background-image: none; }
/* hero + métriques + preuve TRANSPARENTS → laissent voir le MÊME fond body en continu
   = beige chaud + nappes dorées partout, AUCUNE marche de couleur entre les sections. */
body.ambient-gold .hero-stage,
body.ambient-gold .hero,
body.ambient-gold .metrics,
body.ambient-gold .hero-proof { background: transparent; position: relative; }
/* bubbles orange adoucies → wash ambiant uniforme (au lieu de 2 taches) */
body.ambient-gold .metrics-bubbles { opacity: .4; filter: blur(34px); }
/* le contenu passe AU-DESSUS du grain */
body.ambient-gold .metrics .container,
body.ambient-gold .hero-proof .container { position: relative; z-index: 2; }

/* ====================================================================
   13. ÉTUDES DE CAS — STACKING CARDS (deck collant, comme un paquet de cartes)
   Chaque carte sticky en haut ; la suivante glisse par-dessus. Pur CSS au scroll
   (zéro JS/frame) : --stack-i (posé par _skills.js) décale chaque carte de qq px →
   on voit la tranche du deck. Desktop only ; mobile garde le flux normal.
   ==================================================================== */
/* DECK STICKY (CSS pur = FLUIDE, zéro JS au scroll). Le header est sticky et se fait COUVRIR
   sur place par la 1ère carte (il ne « scroll pas down » / disparaît pas), puis chaque carte
   se colle un peu plus bas que la précédente (--stack-i) → on VOIT la pile au top. */
@media (min-width: 901px) {
  .cases-section .cases-list { gap: 0; }
  /* header sticky DERRIÈRE (z-index 0) → la 1ère carte (z-index 1) passe par-dessus.
     (0,3,0) pour battre .plasma-stage > *:not(.team-plasma){position:relative;z-index:1} */
  .plasma-page .plasma-stage .cases-hero { position: sticky; top: 88px; z-index: 0; }
  .cases-section .case-row {
    position: sticky;
    top: calc(88px + var(--stack-i, 0) * 16px);        /* décalage → pile visible au top */
    z-index: 1;
    background: var(--white);
    box-shadow: 0 -10px 40px rgba(0,0,0,.06), 0 30px 70px -28px rgba(20,20,45,.36);
  }
  /* un seul effet = le stacking ; pas de reveal qui « descend » */
  .cases-section .case-row.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .plasma-stage .cases-hero, .cases-section .case-row { position: static; }
}

/* ====================================================================
   14. FOND PLASMA (noir + orange) — .plasma-stage (équipe + études de cas)
   Le canvas .team-plasma (WebGL, _plasma.js) est inséré dans chaque .plasma-stage.
   Fallback = dégradé sombre chaud si pas de WebGL / mobile / reduced-motion.
   Tout l'intérieur est en fond transparent → le plasma se voit partout, AUCUNE
   séparation entre hero / grille / CTA / cartes.
   ==================================================================== */
.plasma-stage {
  /* TRANSPARENT : le dégradé chaud vient UNIQUEMENT du body (plasma-page), continu depuis
     le haut de la page. Avant, .plasma-stage redémarrait son propre dégradé sous le nav →
     discontinuité = bande horizontale (masquée au centre par le nav et à droite par l'aurora,
     mais visible à gauche = le « hard cut »). Un seul calque de fond = aucun seam possible.
     PAS d'overflow:hidden (casse le sticky des cartes sur Safari). */
  position: relative; isolation: isolate;
  background: transparent;
}
/* AURORA CSS (remplace le plasma WebGL, trop lourd) : halos orange/or flous qui dérivent
   sur le noir = même vibe « plasma » mais animé en transform/scale uniquement = GPU, léger.
   Les blobs sont injectés par _skills.js dans <div class="team-plasma aurora"> (la classe
   .team-plasma fournit absolute inset:0 z-index:0). .aurora{overflow:hidden} clippe les blobs
   SANS overflow sur .plasma-stage (sinon casse le sticky des cartes). */
.plasma-stage .aurora { overflow: hidden; }
/* blobs GROS qui se CHEVAUCHENT (champ continu = pas de gap sombre = pas de bande/seam)
   + mouvement bien visible (17-23s, déplacement 12-14%). */
.plasma-stage .aurora b {
  position: absolute; width: 100vw; max-width: 1100px; aspect-ratio: 1 / 1;
  border-radius: 50%; filter: blur(70px); opacity: .38; will-change: transform;
}
.plasma-stage .aurora b:nth-child(1){ background: radial-gradient(circle, #F2911B, transparent 70%); left:-20%; top:-15%; animation: jntAur1 17s ease-in-out infinite; }
.plasma-stage .aurora b:nth-child(2){ background: radial-gradient(circle, #E8B940, transparent 70%); right:-22%; top:12%;  animation: jntAur2 21s ease-in-out infinite; }
.plasma-stage .aurora b:nth-child(3){ background: radial-gradient(circle, #C7901A, transparent 70%); left:5%;    top:40%;  animation: jntAur3 19s ease-in-out infinite; }
.plasma-stage .aurora b:nth-child(4){ background: radial-gradient(circle, #F2911B, transparent 70%); right:-10%; top:62%;  animation: jntAur1 20s ease-in-out infinite reverse; }
.plasma-stage .aurora b:nth-child(5){ background: radial-gradient(circle, #E8B940, transparent 70%); left:-15%;  top:82%;  animation: jntAur2 23s ease-in-out infinite; }
@keyframes jntAur1 { 0%,100% { transform: translate(0,0) scale(1);    } 50% { transform: translate(14%,8%) scale(1.25);  } }
@keyframes jntAur2 { 0%,100% { transform: translate(0,0) scale(1.08); } 50% { transform: translate(-12%,9%) scale(1.22); } }
@keyframes jntAur3 { 0%,100% { transform: translate(0,0) scale(1.15); } 50% { transform: translate(10%,-8%) scale(1);   } }
@media (prefers-reduced-motion: reduce) { .plasma-stage .aurora b { animation: none !important; } }
.plasma-stage .team-plasma {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%; display: block;
}
.plasma-stage > *:not(.team-plasma) { position: relative; z-index: 1; }
/* sections internes transparentes → le plasma passe à travers (zéro séparation) */
.plasma-stage .team-hero, .plasma-stage .team-section,
.plasma-stage .final-cta, .plasma-stage .cases-hero, .plasma-stage .cases-section { background: transparent; }
/* page sombre : derrière le nav + le bandeau verset = sombre (pas blanc) */
body.plasma-page {
  /* Dégradé chaud UNIQUE pour toute la page sombre (verset + nav + hero plasma), ancré au
     haut → fond continu, aucune bande. Étiré (58% de haut) pour garder la chaleur sur le hero. */
  background-color: #000;
  background-image: radial-gradient(ellipse 125% 58% at 50% 0%, #1c1003 0%, #130d06 32%, #0a0a0b 62%, #000 100%);
}
/* heros (équipe + études de cas) en clair sur le plasma */
.plasma-stage .team-hero h1, .plasma-stage .cases-hero h1 { color: #fff; }
.plasma-stage .team-hero p, .plasma-stage .cases-hero p { color: rgba(255,255,255,.68); }
.plasma-stage .team-hero .eyebrow, .plasma-stage .cases-hero .eyebrow { color: var(--gold-bright); }
/* cartes membres → verre foncé qui lit sur le plasma */
/* verre foncé SOLIDE (pas de backdrop-filter : 12 flous sur le plasma WebGL = tueur de perf
   sur la page équipe). Look quasi identique, coût quasi nul. */
.plasma-stage .member {
  background: rgba(22,17,10,.82); border-color: rgba(242,145,27,.18);
}
.plasma-stage .member:hover {
  background: rgba(28,20,10,.55); border-color: rgba(242,145,27,.4);
  box-shadow: 0 22px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(242,145,27,.2);
}
.plasma-stage .member-name { color: #fff; }
.plasma-stage .member-role { color: rgba(255,255,255,.58); }
.plasma-stage .member-photo {
  background: linear-gradient(135deg,#1a1a1d 0%,#0a0a0b 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06);
}