/* =====================================================================
   Hero animé de l'accueil (validé par Laurent, oct. 2026)
   Repris de prototype-accueil-etoile-dor.html (section hero uniquement).
   Photo + voile de lecture à gauche + étoile en canvas qui arrive du ciel,
   se pose au-dessus du grand nom « L'Étoile d'Or » et y fait tomber un rai
   de lumière. JS : hero-anime.js. Le header reste celui du site (nav en
   position absolue par-dessus le hero, ~80 px).
   ===================================================================== */
.hero-anime{
  --hero-top:80px;                 /* hauteur du header du site posé par-dessus */
  --voile:10,30,42;                /* teinte du voile (bleu nuit du prototype) */
  position:relative;height:100vh;height:100svh;min-height:480px;overflow:hidden;  /* bandeau = hauteur visible de la fenêtre */
  background:var(--noir);
}
.hero-anime > picture{position:absolute;inset:0;display:block;}
.hero-anime > picture img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center;
  transform-origin:66% 70%;animation:heroAnimeZoom 24s ease-out forwards;
}
@keyframes heroAnimeZoom{from{transform:scale(1);}to{transform:scale(1.08);}}

/* Voile de lecture à gauche (+ léger assombrissement du bas) */
.hero-anime-voile{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(var(--voile),.78) 0%,rgba(var(--voile),.55) 30%,rgba(var(--voile),.15) 52%,rgba(var(--voile),0) 65%),
    linear-gradient(0deg,rgba(var(--voile),.35) 0%,rgba(var(--voile),0) 25%);
}
.hero-anime-ciel{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;}

/* Textes (à gauche) */
.hero-anime-texte{
  position:absolute;z-index:4;left:clamp(1.2rem,4vw,4rem);top:calc(var(--hero-top) + 6vh);top:calc(var(--hero-top) + 6svh);
  max-width:min(46rem,52vw);color:#fff;
}
.hero-anime-texte .lieu{margin:0 0 clamp(.5rem,1.8svh,1.2rem);font-size:.95rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.6);}
.hero-anime-texte h1{
  margin:0;font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:clamp(2.6rem,5.6vw,5.4rem);font-size:clamp(2.1rem,min(5.6vw,9svh),5.4rem);line-height:1.08;color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.5);
}
.hero-anime-texte h1 em{font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;font-style:italic;color:var(--or-clair);font-size:1.06em;}
.hero-anime-texte .chapo{margin:clamp(.7rem,2.4svh,1.6rem) 0 clamp(.8rem,3svh,2rem);font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.7;max-width:34rem;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6);}
.hero-anime-boutons{display:flex;flex-wrap:wrap;gap:1rem;}
.hero-anime-boutons a{display:inline-block;padding:clamp(.75rem,1.6svh,1.05rem) 2rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;font-size:.95rem;}
.hero-anime-boutons .btn-or{background:var(--or);color:var(--noir);}
.hero-anime-boutons .btn-or:hover{background:var(--or-clair);}
.hero-anime-boutons .btn-ligne{border:1.5px solid var(--or-clair);color:#fff;background:rgba(var(--voile),.35);}
.hero-anime-boutons .btn-ligne:hover{background:rgba(var(--voile),.55);}
/* apparition des textes une fois l'étoile posée */
.hero-anime-texte > *{opacity:0;transform:translateY(10px);transition:opacity .9s ease,transform .9s ease;}
.hero-anime.fini .hero-anime-texte > *{opacity:1;transform:none;}
.hero-anime.fini .hero-anime-texte > :nth-child(2){transition-delay:.15s;}
.hero-anime.fini .hero-anime-texte > :nth-child(3){transition-delay:.3s;}
.hero-anime.fini .hero-anime-texte > :nth-child(4){transition-delay:.45s;}
.hero-anime.fini .hero-anime-texte > :nth-child(5){transition-delay:.6s;}
/* Barre de recherche « maison » (recherche-sejour.css, 2026-10-13, remplace le widget Secure Holiday) :
   place réservée = hauteur de la barre, pas de saut à l'affichage ; elle s'empile sous 640 px de large */
.hero-anime-recherche{margin-top:clamp(.8rem,2.1svh,1.4rem);width:min(820px,calc(100vw - 2*clamp(1.2rem,4vw,4rem)));min-height:68px;}

/* Enseigne : emplacement de l'étoile + grand nom */
.hero-anime-enseigne{position:absolute;z-index:4;right:clamp(1rem,4vw,5rem);top:calc(var(--hero-top) + 2vh);width:min(46vw,720px);text-align:center;pointer-events:none;}
.hero-anime-enseigne .place{display:block;width:clamp(150px,14vw,220px);height:clamp(150px,14vw,220px);margin:0 auto;}
.hero-anime-enseigne .nom{
  margin:-.2rem 0 0;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:700;
  font-size:clamp(3rem,6vw,6.6rem);line-height:1;white-space:nowrap;color:var(--or-clair);
  background:linear-gradient(180deg,#FFF0C2 0%,#E8C77E 45%,#B88F3E 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 1px rgba(40,22,0,.9)) drop-shadow(0 0 6px rgba(var(--voile),.75)) drop-shadow(0 0 26px rgba(255,210,120,.5));
  opacity:0;transform:scale(.96);transition:opacity 1.2s ease,transform 1.2s ease;
}
.hero-anime.pose .hero-anime-enseigne .nom{opacity:1;transform:none;}

/* « Camping ★★★★ » en bas à droite */
.hero-anime-etoiles4{
  position:absolute;z-index:4;right:clamp(1rem,4vw,4rem);bottom:calc(5.5rem + env(safe-area-inset-bottom,0px));
  margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:700;font-size:clamp(2rem,3.6vw,3.6rem);color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.65),0 1px 3px rgba(0,0,0,.6);opacity:0;transition:opacity 1s ease .6s;
}
/* Étoiles en or vif (plus visibles, demande Steve 2026-10-07) */
.hero-anime-etoiles4 span{color:#F5C02E;letter-spacing:.08em;font-style:normal;font-size:.8em;vertical-align:.06em;
  background:linear-gradient(180deg,#FFE58A 0%,#F5C02E 45%,#D99A0B 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:none;filter:drop-shadow(0 2px 1px rgba(40,22,0,.9)) drop-shadow(0 0 10px rgba(255,190,40,.55));}
.hero-anime.pose .hero-anime-etoiles4{opacity:1;}

/* Bouton « Passer l'intro » */
.hero-anime-passer{
  position:absolute;z-index:5;right:clamp(1rem,4vw,4rem);bottom:calc(1.5rem + env(safe-area-inset-bottom,0px));
  font-family:'Manrope',sans-serif;font-size:.95rem;font-weight:600;color:#fff;background:rgba(var(--voile),.55);
  border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:.6rem 1.3rem;cursor:pointer;transition:opacity .5s;
}
.hero-anime-passer:hover{background:rgba(var(--voile),.75);}
.hero-anime-passer:focus-visible{outline:2px solid var(--or);outline-offset:3px;}
.hero-anime.fini .hero-anime-passer{opacity:0;pointer-events:none;}

/* Mobile : étoile et nom en haut, texte en bas, photo calée sur la piscine */
@media (max-width:900px){
  .hero-anime{--hero-top:64px;}
  .hero-anime > picture img{object-position:70% center;transform-origin:70% 70%;}
  .hero-anime-voile{background:linear-gradient(0deg,rgba(var(--voile),.85) 0%,rgba(var(--voile),.6) 45%,rgba(var(--voile),.05) 70%);}
  .hero-anime-enseigne{left:0;right:0;margin:auto;top:calc(var(--hero-top) + 1.5vh);width:90%;}
  .hero-anime-enseigne .place{width:110px;height:110px;}
  .hero-anime-enseigne .nom{font-size:clamp(2.6rem,12vw,3.6rem);}
  .hero-anime-texte{top:auto;bottom:calc(6rem + env(safe-area-inset-bottom,0px));max-width:none;right:1.2rem;}
  .hero-anime-texte .lieu{font-size:.78rem;margin-bottom:.6rem;}
  .hero-anime-texte h1{font-size:clamp(2rem,8.5vw,2.8rem);}
  .hero-anime-texte .chapo{margin:1rem 0 1.2rem;font-size:.98rem;}
  .hero-anime-boutons a{padding:.85rem 1.2rem;font-size:.85rem;}
  /* barre de recherche empilée : le chapô et « Réserver un séjour » cèdent la place (barre Réserver flottante en bas) */
  .hero-anime-texte .chapo,.hero-anime-boutons .btn-or{display:none;}
  .hero-anime-texte .lieu,.hero-anime-texte h1{margin-bottom:.9rem;}
  .hero-anime-recherche{margin-top:.9rem;width:auto;}
  .hero-anime-etoiles4{display:none;}
  .hero-anime-passer{bottom:calc(5rem + env(safe-area-inset-bottom,0px));}
}
@media (max-width:800px){.hero-anime-recherche{min-height:166px;}}  /* barre empilée (3 rangées) dès que sa largeur < 720 px (recherche-sejour.css) */
/* Ordinateur à fenêtre basse (portable, mise à l'échelle Windows 125-150 %) : la barre de recherche doit rester
   entièrement visible sans défiler. 1) titre et interlignes réduits ; 2) en dernier recours (≤ 540 px), chapô masqué.
   Les tailles du bandeau suivent déjà la hauteur (svh) plus haut ; 1920×1080 inchangé. */
@media (min-width:901px) and (max-height:620px){
  .hero-anime-texte h1{font-size:clamp(2rem,min(5.6vw,7.5svh),5.4rem);line-height:1.04;}
  .hero-anime-texte .chapo{line-height:1.5;}
}
@media (min-width:901px) and (max-height:540px){
  .hero-anime-texte .chapo{display:none;}
  .hero-anime-texte .lieu{margin-bottom:.4rem;}
}  /* barre empilée sur téléphone (3 rangées) */
/* Petits téléphones (hauteur ≤ 760 px) : le bloc texte + widget remonterait sur le nom « L'Étoile d'Or » */
@media (max-width:900px) and (max-height:760px){
  .hero-anime-texte{bottom:calc(1.2rem + env(safe-area-inset-bottom,0px));}
  .hero-anime-texte .lieu,.hero-anime-boutons{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .hero-anime > picture img{animation:none;}
  .hero-anime-texte > *,.hero-anime-enseigne .nom,.hero-anime-etoiles4{transition:none;}
}