/* ---------------------------------------------------------
   LES BERGERIES DE SÈTE — styles propres à : index (accueil)
   Chargé après main.css.
   --------------------------------------------------------- */

.link-arrow svg{stroke:currentColor;transition:transform .3s var(--ease)}
.scroll-cue{position:absolute;bottom:150px;left:50%;transform:translateX(-50%);z-index:3;
  color:rgba(255,255,255,.8);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-cue i{width:1px;height:42px;background:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,0));animation:cue 2.4s ease-in-out infinite}
.pathcard h3{color:#fff;font-size:clamp(26px,3.2vw,38px);font-weight:300}
@media (max-width:760px){
  .scroll-cue{display:none}
}
/* ---- Indicateur de défilement (bas gauche du hero) ---- */
.scroll-cue{left:auto;right:50px;bottom:clamp(28px,5.5vh,64px);transform:none;align-items:flex-end;gap:12px;z-index:11}
.scroll-cue i{height:54px}
@media(max-width:1100px){
  .scroll-cue{right:var(--gutter)}
}
@media(prefers-reduced-motion:reduce){
  .scroll-cue i{animation:none}
}
/* ---- Indicateur de défilement : souris + point qui descend et remonte ---- */
.scroll-cue{color:rgba(255,255,255,.88);gap:11px}
.scroll-cue i{display:none}
@keyframes scrollDot{
  0%        {transform:translateY(0);   opacity:0}
  18%       {opacity:1}
  50%       {transform:translateY(14px);opacity:1}
  82%       {opacity:1}
  100%      {transform:translateY(0);   opacity:0}
}
/* Ligne basse du hero : l'indicateur de défilement et le lien vidéo s'y posent
   ensemble, l'un centré, l'autre à droite. Une seule valeur pour les deux. */
.hero{--hero-baseline:clamp(24px,3.6vh,40px)}
@media(min-width:761px){
  .scroll-cue{left:50%;right:auto;transform:translateX(-50%);align-items:center;
              bottom:var(--hero-baseline);gap:9px}
}
/* ---- Hero : guichet remonté, indicateur centré juste dessous (desktop) ---- */
@media(min-width:761px){
  .availbar{bottom:clamp(108px,14vh,164px)}
}
/* ---- Hero de l accueil : vidéo plein cadre ---- */
.hero__media video{width:100%;height:100%;object-fit:cover;display:block}
/* ---- Poster de patience, puis fondu vers l'extrait ----
   Le poster est peint par le conteneur : il occupe le cadre dès le premier
   rendu, sans attendre la vidéo. Même fichier que l'attribut poster, donc un
   seul téléchargement. La vidéo n'est masquée que si le JS tourne — sinon
   elle s'affiche normalement (le fondu est un supplément, pas une condition). */
.hero__media{
  background:url("../../img/accueil-hero-poster.webp") center/cover no-repeat var(--pine);
}
.has-js .hero__media video{opacity:0;transition:opacity .9s var(--ease)}
.has-js .hero__media video.is-playing{opacity:1}
/* ---- Lien vers le film complet ---- */
.hero-play{
  position:absolute;right:50px;bottom:clamp(108px,14vh,164px);z-index:12;
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  padding:11px 20px;border-radius:999px;
  background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.6);color:#fff;
  font-family:var(--sans);font-size:10.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;
  transition:background .3s var(--ease),transform .3s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
@media (hover:hover){
  .hero-play:hover{background:rgba(255,255,255,.24);transform:translateY(-2px)}
}
.hero-play:active{transform:translateY(0) scale(.98);transition-duration:.1s}
.hero-play:focus-visible{outline:1px solid rgba(255,255,255,.8);outline-offset:4px}
@media(max-width:1100px){.hero-play{right:var(--gutter)}}
/* Desktop : le lien descend sur la ligne de l'indicateur de défilement, à droite.
   Le décalage compense la hauteur de l'indicateur (souris + légende, plus haut
   que la pilule) pour que les deux soient alignés à l'œil, pas seulement par la base. */
@media(min-width:761px){
  .hero-play{top:auto;bottom:calc(var(--hero-baseline) + 10px)}
}
@media(max-width:760px){
  /* Le lien rejoint le flux du hero : il se range de lui-même sous le titre,
     dans le bloc centré, et la réserve du bas (--availbar-zone) garantit qu'il
     ne rencontre jamais le guichet. Rien à mesurer, rien à recaler. */
  .hero-play{
    position:static;align-self:center;
    padding:9px 15px;font-size:9.5px;letter-spacing:.14em;
  }
  /* Hors positionnement absolu, l'état d'appui n'a plus de centrage à reconduire. */
  .hero-play:hover,
  .hero-play:active{transform:scale(.98)}
}
/* ---- Le film complet, en plein écran ---- */
.video-modal{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);
  background:rgba(20,22,18,.94);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .35s var(--ease);
}
.video-modal[hidden]{display:none}
.video-modal.open{opacity:1}
.video-modal__frame{width:min(1280px,100%);aspect-ratio:16/9;background:#000;box-shadow:0 24px 80px rgba(0,0,0,.5)}
.video-modal video{width:100%;height:100%;display:block;object-fit:contain}
.video-modal__close{
  position:absolute;top:clamp(14px,2.5vw,28px);right:clamp(14px,2.5vw,28px);
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.45);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s var(--ease);
}
@media (hover:hover){.video-modal__close:hover{background:rgba(255,255,255,.22)}}
.video-modal__close:focus-visible{outline:1px solid rgba(255,255,255,.8);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .has-js .hero__media video{transition:none}
  .video-modal{transition:none}
}