/* ===========================================================
   HERO MANDALA — page Retraites
   Hero immersif plein ecran : sceau Believe rayonnant au centre,
   mandala concentrique + faisceaux droits en fond, gros titre.
   Trois variantes de theme sur la meme geometrie :
     .rhero--nuit   cosmique froid (fidele a la reference Behance)
     .rhero--aube   chaud dore (chaleur signature Believe)
     .rhero--voile  clair editorial (coherent avec le reste du site)
   Aucune de ces regles ne touche au portail d'accueil.
   =========================================================== */

.rhero{
  position:relative;
  min-height:92vh;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  text-align:center;
  padding:clamp(7rem,14vh,10rem) 0 clamp(4.5rem,9vh,7rem);
}

/* ---------- FOND : mandala + bloom ---------- */
.rhero__fond{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}

.rhero__mandala{
  position:absolute;left:50%;top:47%;
  width:min(1480px,152vw);aspect-ratio:1;
  transform:translate(-50%,-50%);
  /* on eteint le mandala vers les bords pour qu'il fonde dans le fond */
  -webkit-mask-image:radial-gradient(circle at center,#000 26%,rgba(0,0,0,.7) 50%,transparent 78%);
          mask-image:radial-gradient(circle at center,#000 26%,rgba(0,0,0,.7) 50%,transparent 78%);
  animation:rheroTourne 150s linear infinite;
}
.rhero__mandala svg{width:100%;height:100%;display:block;overflow:visible;
  fill:none;stroke:currentColor;stroke-width:1.1;}
.rhero__mandala .m-beam{stroke-width:1.5;}
.rhero__mandala .m-dot{fill:currentColor;stroke:none;}
@keyframes rheroTourne{to{transform:translate(-50%,-50%) rotate(360deg);}}

/* halo colore diffus, derriere le sceau, donne la couleur d'ambiance */
.rhero__bloom{
  position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);
  width:min(1050px,118vw);aspect-ratio:1;border-radius:50%;
  filter:blur(4px);
}

/* ---------- CONTENU ---------- */
.rhero__centre{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(1.3rem,2.6vw,1.9rem);
  max-width:53rem;padding-inline:1.5rem;margin-inline:auto;
}
.rhero__fil{margin:0 0 .2rem;opacity:.7;}
.rhero .kicker{margin:0;}
.rhero__centre .titre{color:inherit;margin:0;}
.rhero__centre .prose{color:inherit;opacity:.86;margin:.2rem auto 0;max-width:38rem;}
.rhero__centre .boutons{margin-top:clamp(.8rem,2vw,1.4rem);}

/* ---------- SCEAU RAYONNANT (toujours epanoui) ---------- */
.rhero__logo-wrap{
  position:relative;display:grid;place-items:center;
  width:clamp(180px,25vw,290px);aspect-ratio:1;
  margin-bottom:clamp(.2rem,1.6vw,1rem);
}
.rhero__rays{
  position:absolute;z-index:0;width:300%;height:300%;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,
      transparent 0deg,transparent 3.2deg,
      var(--ray-a) 4deg,var(--ray-b) 4.4deg,
      transparent 5deg,transparent 8deg);
  -webkit-mask-image:radial-gradient(circle,transparent 13%,#000 24%,rgba(0,0,0,.45) 44%,transparent 66%);
          mask-image:radial-gradient(circle,transparent 13%,#000 24%,rgba(0,0,0,.45) 44%,transparent 66%);
  opacity:.72;transform:rotate(0deg);
  animation:rheroRays 90s linear infinite;
}
@keyframes rheroRays{to{transform:rotate(360deg);}}
.rhero__halo{
  position:absolute;z-index:1;width:250%;height:250%;border-radius:50%;pointer-events:none;
  background:var(--halo);
  animation:rheroPulse 6.5s ease-in-out infinite;
}
@keyframes rheroPulse{0%,100%{transform:scale(1);opacity:.94;}50%{transform:scale(1.06);opacity:1;}}
.rhero__logo{
  position:relative;z-index:2;width:100%;height:auto;
  filter:
    drop-shadow(0 0 16px rgba(145,216,255,.5))
    drop-shadow(0 0 48px rgba(145,216,255,.26))
    drop-shadow(0 10px 40px rgba(4,15,31,.5));
  animation:rheroRespire 6.5s ease-in-out infinite;
}
@keyframes rheroRespire{0%,100%{transform:scale(1);}50%{transform:scale(1.025);}}

/* =========================================================
   VARIANTE 1 — NUIT SACREE (cosmique froid, fidele a la reference)
   ========================================================= */
.rhero--nuit{
  background:radial-gradient(125% 100% at 50% 40%,#12293f 0%,#0b1c2c 46%,#05101a 100%);
  color:#f3efe6;
  --ray-a:rgba(210,234,255,.85);
  --ray-b:rgba(160,130,255,.5);
  --halo:radial-gradient(circle at center,
      rgba(255,253,248,.95) 0%,
      rgba(210,232,255,.68) 15%,
      rgba(150,190,255,.4) 37%,
      rgba(150,214,255,.14) 60%,
      transparent 78%);
}
.rhero--nuit .rhero__mandala{color:rgba(154,214,252,.5);}
.rhero--nuit .rhero__bloom{
  background:radial-gradient(circle at center,
      rgba(196,150,255,.26) 0%,
      rgba(120,200,255,.2) 26%,
      rgba(90,180,255,.1) 48%,
      transparent 68%);
}
.rhero--nuit .kicker{color:rgba(178,214,246,.92);}

/* =========================================================
   VARIANTE 2 — AUBE DOREE (chaud, chaleur signature)
   ========================================================= */
.rhero--aube{
  background:radial-gradient(125% 100% at 50% 42%,#1d2e3d 0%,#122234 48%,#0a141f 100%);
  color:#f4efe4;
  --ray-a:rgba(255,241,224,.9);
  --ray-b:rgba(248,152,104,.6);
  --halo:radial-gradient(circle at center,
      rgba(255,253,248,.98) 0%,
      rgba(255,228,198,.8) 12%,
      rgba(248,152,104,.5) 32%,
      rgba(150,214,255,.22) 58%,
      transparent 78%);
}
.rhero--aube .rhero__mandala{color:rgba(240,196,150,.5);}
.rhero--aube .rhero__bloom{
  background:radial-gradient(circle at center,
      rgba(255,224,180,.32) 0%,
      rgba(248,152,104,.22) 26%,
      rgba(196,120,255,.1) 50%,
      transparent 70%);
}
.rhero--aube .kicker{color:rgba(245,200,150,.95);}

/* =========================================================
   VARIANTE 3 — VOILE CLAIR (editorial, coherent avec le site)
   ========================================================= */
.rhero--voile{
  background:radial-gradient(125% 112% at 50% 34%,#faf7ef 0%,#f1ede1 60%,#e6e1d3 100%);
  color:#182a3d;
  --ray-a:rgba(200,120,60,.5);
  --ray-b:rgba(140,186,236,.42);
  --halo:radial-gradient(circle at center,
      rgba(255,246,232,.92) 0%,
      rgba(255,222,182,.55) 20%,
      rgba(150,214,255,.2) 48%,
      transparent 74%);
}
.rhero--voile .rhero__mandala{color:rgba(24,42,61,.26);}
.rhero--voile .rhero__bloom{
  background:radial-gradient(circle at center,
      rgba(255,250,243,.82) 0%,
      rgba(255,228,190,.52) 20%,
      rgba(248,180,120,.24) 40%,
      rgba(150,214,255,.14) 58%,
      transparent 74%);
}
.rhero--voile .kicker{color:#c26a3a;}
/* sur fond clair, le logo n'a pas besoin d'ombre bleue lourde */
.rhero--voile .rhero__logo{
  filter:
    drop-shadow(0 0 14px rgba(150,214,255,.4))
    drop-shadow(0 14px 34px rgba(24,42,61,.22));
}

/* ---------- BOUTONS sur fond sombre ---------- */
.rhero--nuit .bouton--plein,
.rhero--aube .bouton--plein{
  background:linear-gradient(180deg,#fbf4e8,#f2e5d1);
  color:#122130;border-color:transparent;
  box-shadow:0 12px 30px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,255,255,.14);
}
.rhero--nuit .bouton--ligne,
.rhero--aube .bouton--ligne{
  color:#f3efe6;border-color:rgba(243,239,230,.5);background:transparent;
}
.rhero--nuit .bouton--ligne:hover,
.rhero--aube .bouton--ligne:hover{
  border-color:rgba(243,239,230,.92);background:rgba(255,255,255,.07);
}

/* ---------- Mouvement reduit ---------- */
@media (prefers-reduced-motion:reduce){
  .rhero__mandala,.rhero__rays,.rhero__halo,.rhero__logo{animation:none;}
}

/* ---------- Mobile ---------- */
@media (max-width:640px){
  .rhero{min-height:auto;padding:clamp(6rem,20vh,8rem) 0 clamp(3.5rem,10vh,5rem);}
  .rhero__mandala{width:172vw;top:44%;}
}