/* COOMISGUI — héros de l'accueil : source unique des effets lumineux */

/* Rayons dorés tournants derrière la couronne (version validée) */
.hero .rayons {
  position: absolute !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  mix-blend-mode: screen !important;
  opacity: 0;
  background-color: transparent !important;
  background-image:
    radial-gradient(circle, rgba(255, 234, 160, 0.55) 0%, rgba(239, 194, 107, 0.22) 22%, transparent 48%),
    repeating-conic-gradient(from 0deg, rgba(243, 210, 122, 0.55) 0deg 2.5deg, transparent 2.5deg 12deg) !important;
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.65) 28%, transparent 56%) !important;
  mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.65) 28%, transparent 56%) !important;
  animation: heros-rayons-cycle 4.8s ease-in-out 0.6s forwards, heros-rayons-tourne 28s linear infinite !important;
  will-change: transform, opacity;
}
.hero .rayons::before { display: none !important; }
.hero .rayons::after {
  content: "" !important;
  position: absolute !important;
  inset: 20% !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255, 234, 160, 0.9), rgba(239, 194, 107, 0.35) 40%, transparent 68%) !important;
  filter: blur(30px) !important;
  animation: heros-coeur 5s ease-in-out infinite !important;
}
@keyframes heros-rayons-apparait { to { opacity: 1; } }
@keyframes heros-rayons-tourne { to { transform: rotate(360deg); } }
@keyframes heros-coeur { 0%, 100% { opacity: 0.6; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.1); } }

/* La couronne : naissance dans la lumière, puis respiration ample */
.hero .couronne-hero {
  --dx: 0px !important;
  --dy: 0px !important;
  position: relative !important;
  z-index: 2 !important;
  width: clamp(240px, 27vw, 430px) !important;
  margin: 0 0 10px 0 !important;
  transform-origin: 50% 80%;
  animation: heros-sacre 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards, heros-vivante 6s ease-in-out 2.1s infinite !important;
}
@keyframes heros-sacre {
  0% { opacity: 0; filter: blur(26px) brightness(2.4); }
  60% { opacity: 1; filter: blur(0) brightness(1.5) drop-shadow(0 0 70px rgba(255, 230, 150, 0.9)); }
  100% { opacity: 1; filter: blur(0) brightness(1) drop-shadow(0 30px 40px rgba(0, 0, 0, 0.5)); }
}
@keyframes heros-vivante {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.5)) brightness(1); }
  50% { transform: translateY(-34px) scale(1.04); filter: drop-shadow(0 50px 60px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 40px rgba(255, 230, 150, 0.55)) brightness(1.12); }
}

/* Ondes d'or qui s'élargissent depuis la couronne */
.hero .orbite { position: absolute !important; z-index: 1 !important; width: 0; height: 0; pointer-events: none; }
.hero .orbite::before, .hero .orbite::after {
  content: ""; position: absolute; left: 0; top: 0;
  width: calc(var(--base, 200px) * 1.2); height: calc(var(--base, 200px) * 1.2);
  margin-left: calc(var(--base, 200px) * -0.6); margin-top: calc(var(--base, 200px) * -0.6);
  border-radius: 50%; border: 1px solid rgba(243, 210, 122, 0.7);
  box-shadow: 0 0 18px rgba(243, 210, 122, 0.35); opacity: 0;
  animation: heros-onde 5s ease-out 2.4s infinite;
}
.hero .orbite::after { animation-delay: 4.9s; }
@keyframes heros-onde { 0% { transform: scale(0.35); opacity: 0.9; } 100% { transform: scale(2.1); opacity: 0; } }

/* Particules en orbite et éclats (inchangés, rappelés ici pour la priorité) */
.hero .orbite span {
  position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px; border-radius: 50%;
  background: #F3D27A; box-shadow: 0 0 12px rgba(243, 210, 122, 1), 0 0 30px rgba(239, 194, 107, 0.6);
  opacity: 0; animation: orbite-tourne var(--d) linear infinite, orbite-apparait 1.5s ease 2s forwards;
}
.hero .eclat { position: absolute; z-index: 3; width: 26px; height: 26px; margin: -13px; pointer-events: none; animation: eclat-brille 1.3s ease-out forwards; }

/* Le mot doré du titre : levée puis scintillement */
.hero .titre-sacre em.lettre-or { animation: lettre-monte 1.7s cubic-bezier(0.22, 1, 0.36, 1) forwards, scintille 5s linear 2.5s infinite !important; }

/* Décors absolus, contenu devant */
.hero > .filigrane, .hero > .bokeh, .hero > .eclat, .hero > .poussiere, .hero > .indice-defiler { position: absolute !important; }
.hero > .sur-titre, .hero > .titre-serif, .hero > .hero-bas { position: relative !important; z-index: 2 !important; }
.hero > .indice-defiler { z-index: 2 !important; }

@media (max-width: 860px) {
  .hero .couronne-hero { width: clamp(200px, 56vw, 300px) !important; }
  @keyframes heros-vivante { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
}
@media (prefers-reduced-motion: reduce) {
  .hero .rayons, .hero .orbite, .hero .eclat { display: none !important; }
  .hero .couronne-hero { animation: none !important; opacity: 1; }
}

/* Le sacre : les rayons s allument, brillent deux secondes, s eteignent */
@keyframes heros-rayons-cycle { 0% { opacity: 0; } 22% { opacity: 1; } 64% { opacity: 1; } 100% { opacity: 0; } }

/* La lumiere deborde sur toute la largeur de l ecran */
.hero { overflow: visible !important; }