/* Prototype · hero « on entre dans le cercle » + 4 sorties (A empilement, B dôme, C lentille inversée, D simple). */
/* Aucune valeur d'espacement des lettres n'est réglée ici : typo par défaut. */
body { background: #001F55; }
.stage > div { overflow-x: visible !important; overflow-y: clip !important; overflow-clip-margin: 0; }
#hero-spacer { position: relative; width: 1440px; }
#hero-spacer { flex-shrink: 0; overflow: visible !important; }
#hero-spacer > div:first-child { position: sticky !important; top: 0; transform-origin: 50% 0; will-change: transform; }
#hero-spacer ~ div { position: relative; z-index: 10; }
#after > div { overflow: clip; }
.mode-A .hero-after { border-radius: 32px 32px 0 0; box-shadow: 0 -30px 60px rgba(0, 0, 0, .35); }
.mode-A #after.hero-after { box-shadow: none; filter: drop-shadow(0 -30px 60px rgba(0, 0, 0, .35)); }
.mode-A #after > [data-pencil-id="MpkOX"] { border-radius: 32px 32px 0 0; }

/* calques ajoutés dans le hero */
.hx { position: absolute; left: 0; top: -120px; width: 1440px; height: 900px; pointer-events: none; }
.hx > i { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; transform-origin: 720px 450px; will-change: transform; }
.hx-imag { z-index: 2; clip-path: circle(170px at 720px 450px); }
.hx-imag > i { background-image: url('img/brief-33-01-imaginaire.jpg'); }
.hx-real { z-index: 3; clip-path: circle(0px at 720px 450px); }
.hx-real > i { background-image: url('img/brief-33-01-reel.jpg'); }
.hx-ring { position: absolute; z-index: 3; left: 0; top: 0; border-radius: 50%; outline: 1.5px solid #FFFFFF80; pointer-events: none; }
.hx-ring2 { opacity: 0; }
.hx-voile { position: absolute; z-index: 4; inset: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%); }
.hx-phrase { position: absolute; z-index: 5; left: 48px; top: 580px; width: 1344px; display: flex; gap: 16px; align-items: flex-end; color: #fff; pointer-events: none; }
.hx-phrase span { display: inline-block; line-height: 1; white-space: pre; }
.hx-phrase .b { font-family: "Host Grotesk", system-ui, sans-serif; font-weight: 600; font-size: 94px; }
.hx-phrase .s { font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 400; font-size: 102px; }
.hx-phrase .l { opacity: 0; transform: translateY(60px); will-change: transform, opacity; }
.dome { position: absolute; left: 0; right: 0; bottom: 100%; height: 0; background: #001F55; border-radius: 50% 50% 0 0 / 100% 100% 0 0; display: none; }
.mode-B .dome { display: block; }
.fin { padding: 64px 48px 140px; text-align: center; color: #FFFFFF80; font: 400 15px/1.4 system-ui, sans-serif; background: #001F55; }

.proto-bar .lbl { padding: 0 6px 0 10px; opacity: .7; }
.proto-bar button[aria-pressed="true"] { background: var(--citron); color: #000; }
@media (max-width: 760px) { .hero-bar button { padding: 10px 9px; } }
.mode-A #hero-spacer { background: #00102E; }