/* ---------- Cerveau IA, premier écran façon gleap.ai « close the loop » (07/10/2026, demande Axel) ----------
   Ciel sombre dans les deux modes, comme l'accueil. La scène reste en place pendant un court défilement (cvh__piste) :
   la boucle se ferme et les étiquettes apparaissent, puis la page reprend son cours. Dessin : cerveau-hero.js */
body.page-cerveau .nav.nav--pilule { height: 0; }   /* le ciel passe sous la pilule, sans bande claire au-dessus */
.cvh { position: relative; background: #191919; color: #fff; }
.cvh__piste { position: relative; height: calc(100vh + 75vh); }
.cvh__scene { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 640px; display: flex; flex-direction: column; padding-top: 112px; overflow: clip; }
.cvh__ciel { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cvh__figure { position: relative; flex: 1 1 auto; min-height: 0; pointer-events: none; }

/* Étiquettes le long de la boucle : un point lumineux, un mot, une ligne d'explication */
.cvh__etiq, .cvh__legende { position: absolute; margin: 0; white-space: nowrap; }
.cvh__etiq { display: flex; flex-direction: column; gap: 3px; max-width: 290px; white-space: normal; opacity: 0; transition: opacity .8s ease, filter .8s ease, translate .9s cubic-bezier(.22,1,.36,1); filter: blur(6px); translate: 0 8px; }
.cvh__etiq.is-on { opacity: 1; filter: none; translate: 0 0; }
.cvh__etiq b { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 500; letter-spacing: -.01em; color: #fff; }
.cvh__etiq b::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #dcebff; box-shadow: 0 0 0 3px rgba(150,196,245,.16); }
.cvh__etiq--cle b::before { background: #ffb08a; box-shadow: 0 0 0 3px rgba(251,77,23,.2); }
.cvh__etiq span { font-size: 13.5px; line-height: 1.35; color: rgba(255,255,255,.58); }
.cvh__etiq[data-sens="g"] { transform: translate(-100%, -50%); text-align: right; align-items: flex-end; }
.cvh__etiq[data-sens="g"] b { flex-direction: row-reverse; }
.cvh__etiq[data-sens="d"] { transform: translate(0, -50%); text-align: left; align-items: flex-start; }
.cvh__etiq:is([data-sens="h"], [data-sens="hh"]) { transform: translate(-50%, -100%); text-align: center; align-items: center; }
.cvh__etiq[data-sens="b"] { transform: translate(-50%, 0); text-align: center; align-items: center; }
.cvh__legende { transform: translate(-50%, 0); font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.42); }
.cvh__legende[data-sens="x"] { display: none; }

/* « Faites défiler… », puis « La boucle est fermée » */
.cvh__defile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 0 14px; font-size: 13px; color: rgba(255,255,255,.58); }
.cvh__defile > span { transition: opacity .6s ease; }
.cvh__defile-ok { position: absolute; top: 0; left: 50%; transform: translateX(-50%); white-space: nowrap; opacity: 0; color: rgba(255,255,255,.75); }
.cvh__defile.is-fini .cvh__defile-txt { opacity: 0; }
.cvh__defile.is-fini .cvh__defile-ok { opacity: 1; }
.cvh__defile i { font-style: normal; animation: cvh-fleche 1.8s ease-in-out infinite; transition: opacity .6s ease; }
.cvh__defile.is-fini i { animation: none; opacity: 0; }
@keyframes cvh-fleche { 0%, 100% { transform: none; opacity: .5; } 50% { transform: translateY(4px); opacity: 1; } }

/* Titre et texte sous la figure, comme sur gleap.ai */
.cvh__texte { position: relative; text-align: center; padding-bottom: clamp(28px, 4.5vh, 52px); }
.cvh__texte h1 { max-width: 900px; margin: 0 auto; color: #fff; }
.cvh__sous { max-width: 760px; margin: 16px auto 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.45; color: rgba(255,255,255,.66); }
.cvh__actions { justify-content: center; margin-top: 24px; }
.cvh .btn.btn:not(.nav__cta) { background: #fff; color: #191919; }
.cvh .btn.btn:not(.nav__cta):hover { background: #e9e9e6; color: #191919; }
.cvh .btn.btn--ghost:not(.nav__cta) { background: #353535; color: #fff; }
.cvh .btn.btn--ghost:not(.nav__cta):hover { background: #474747; color: #fff; }

/* L'ancien premier écran (le « centre d'aide » du cerveau) arrive juste après */
.cv-hero.cv-hero--suite { padding-top: 72px; }
.cv-hero--suite .cv-preuve { margin-top: 0; }
.cv-hero--suite .cv-portail { margin-top: 40px; }

/* Écrans bas : la scène n'est plus épinglée, la boucle se ferme d'elle-même */
@media (max-height: 620px) {
  .cvh__piste { height: auto; }
  .cvh__scene { position: relative; height: auto; min-height: 0; }
  .cvh__figure { flex: none; height: 440px; }
}
@media (max-width: 699px) {
  .cvh__piste { height: calc(100svh + 55vh); }
  .cvh__scene { min-height: 680px; padding-top: 72px; justify-content: center; }
  .cvh__figure { flex: 0 1 340px; }
  .cvh__etiq { max-width: none; }
  .cvh__etiq span { display: none; }
  .cvh__etiq b { font-size: 13px; gap: 6px; }
  .cvh__etiq b::before { width: 5px; height: 5px; }
  .cvh__etiq[data-sens="hh"] b { font-size: 14px; }
  .cvh__defile { margin-bottom: 8px; font-size: 12px; }
  .cvh__texte h1 { font-size: 32px; }
  .cvh__sous { margin-top: 12px; font-size: 15px; }
  .cvh__plus { display: none; }
  .cvh__actions { margin-top: 18px; }
  .cvh__actions .btn { flex: 1 1 100%; justify-content: center; }
  .cv-hero.cv-hero--suite { padding-top: 48px; }
  .cv-hero--suite .cv-portail { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .cvh__piste { height: auto; }
  .cvh__scene { position: relative; }
  .cvh__etiq { opacity: 1; filter: none; translate: none; transition: none; }
  .cvh__defile { display: none; }
}
html:not(.js) .cvh__etiq { opacity: 1; filter: none; translate: none; }