.textmark { color: #111; letter-spacing: -.075em; }
.textmark span { color: #ec1c24; }
.hero-art { display: grid; place-items: center; color: #ec1c24; }
.hero-art::before { width: 485px; height: 485px; top: -175px; right: -110px; }
.hero-art::after { width: 355px; height: 355px; left: -165px; bottom: -185px; }
.official-logo { position: relative; z-index: 3; display: block; width: min(70%, 320px); height: auto; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .32)); }
.brand-symbol { width: 34px; height: 34px; object-fit: contain; margin-right: 1px; }
.footer-symbol { width: 43px; height: 43px; margin-right: 5px; }
.logo-orbit { position: absolute; z-index: 2; width: 365px; height: 365px; border: 1px solid rgba(236, 28, 36, .5); border-radius: 50%; animation: rotate 30s linear infinite; }
.logo-orbit::before, .logo-orbit::after, .logo-orbit span { position: absolute; display: block; width: 8px; height: 8px; border-radius: 50%; background: #ec1c24; content: ""; }
.logo-orbit::before { top: 18px; left: 50%; }
.logo-orbit::after { right: 28px; bottom: 54px; }
.logo-orbit span:nth-child(1) { top: 39%; left: -4px; }
.logo-orbit span:nth-child(2) { right: 18%; top: 4px; }
.logo-orbit span:nth-child(3) { bottom: 4%; left: 23%; }
@keyframes rotate { to { transform: rotate(360deg); } }

/* Hero "noir immersif" : le signe fait partie de la scène, sans carte isolée. */
.hero-immersive { position: relative; overflow: hidden; background: var(--ink); color: #fff; }
.hero-immersive .hero { min-height: 650px; padding: 78px 0 53px; }
.hero-immersive .kicker { color: #c9c4bc; }
.hero-immersive .intro { color: #d5d0c8; }
.hero-immersive .underlink { color: #fff; }
.hero-immersive .callout { color: #bcb6ad; }
.hero-immersive .callout b { color: #fff; }
.hero-immersive .button.red { box-shadow: 9px 9px 0 rgba(236, 28, 36, .28); }
.hero-immersive .hero-art { min-height: 100%; background: transparent; }
.hero-immersive .hero-art::before { width: 580px; height: 580px; top: -238px; right: -105px; border-color: rgba(236, 28, 36, .36); }
.hero-immersive .hero-art::after { width: 425px; height: 425px; left: -185px; bottom: -178px; border-color: rgba(236, 28, 36, .36); }
.hero-immersive .official-logo { width: min(76%, 360px); filter: drop-shadow(0 20px 32px rgba(0, 0, 0, .52)); }
.hero-immersive .logo-orbit { width: 420px; height: 420px; border-color: rgba(236, 28, 36, .45); }

/* Deux groupes identiques : le déplacement de 50% ne révèle jamais de vide. */
.marquee { border: 0; }
.marquee .marquee-track { display: flex; width: max-content; padding: 0; animation: marquee-loop 25s linear infinite; }
.marquee .marquee-group { display: flex; flex: 0 0 auto; align-items: center; padding: 13px 0; animation: none; }
@keyframes marquee-loop { to { transform: translateX(-50%); } }

/* Sur desktop, les quatre entrées sont étirées sur la hauteur du panneau de réponse. */
.situation-layout { align-items: stretch; }
.situation-buttons { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); }
.situation { min-height: 0; }
.answer-panel { height: 100%; }

@media (max-width: 560px) {
  .official-logo { width: 225px; }
  .brand-symbol { width: 29px; height: 29px; }
  .logo-orbit { width: 265px; height: 265px; }
}
@media (max-width: 850px) {
  .hero-immersive .hero { min-height: 0; }
  .hero-immersive .hero-art { min-height: 465px; }
  .situation-buttons { display: block; }
}