/* ============================================================
   BANDEAUX — images pleine largeur entre les sections
   ------------------------------------------------------------
   Trois bandeaux qui défilent normalement, plus un bandeau fixe
   sur lequel la page glisse. Ils sont posés ENTRE les blocs de
   texte, jamais dessous : une photo derrière un paragraphe rend
   la lecture plus difficile, pas plus facile.

   Rien n'est écrit sur ces images. Elles servent de respiration.
   ============================================================ */

.bandeau{
  /* Sortir de la colonne de l'article pour occuper toute la
     largeur de l'écran, sans casser le flux du texte. */
  position:relative;
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  width:100vw;

  height:clamp(200px, 26vw, 360px);
  margin-top:56px; margin-bottom:56px;
  overflow:hidden;
  background-color:var(--bg-2);
}

.bandeau img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 58%;
  display:block;

  /* Aucun texte ne passe dessus : on peut éclaircir franchement.
     La saturation suit, sinon l'image éclaircie paraît lavée. */
  filter:brightness(1.14) saturate(1.06);
}

/* Le haut et le bas se fondent dans le noir de la page : sans ça
   le bandeau ressemble à un rectangle collé au milieu du texte. */
.bandeau::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(
    180deg,
    var(--bg) 0%,
    rgba(11,12,15,.35) 14%,
    rgba(11,12,15,.10) 50%,
    rgba(11,12,15,.35) 86%,
    var(--bg) 100%);
  pointer-events:none;
}

/* ---------- le bandeau fixe ---------- */
/* La photo reste immobile, le texte glisse par-dessus. */
.bandeau-fixe{
  position:relative;
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  width:100vw;
  padding:clamp(48px, 7vw, 96px) 0;
  margin-top:56px; margin-bottom:56px;

  /* L'image est posée par le script : la même règle sert au
     panorama derrière les tarifs et aux skis derrière la FAQ. */
  background-image:var(--img);
  background-size:cover;
  background-position:center 62%;
  background-attachment:fixed;
  background-repeat:no-repeat;
}

/* Voile sombre : les photos sont claires, le texte du site est
   clair. Sans ce voile, plus rien ne se lit. Allégé de 86 % à 74 %
   pour laisser voir la montagne — la lisibilité est reprise par
   l'ombre portée ci-dessous plutôt que par plus de noir. */
.bandeau-fixe::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(
    180deg,
    var(--bg) 0%,
    rgba(11,12,15,.74) 12%,
    rgba(11,12,15,.76) 88%,
    var(--bg) 100%);
  pointer-events:none;
}
.bandeau-fixe > *{ position:relative; z-index:1; }

/* iOS ignore background-attachment:fixed et affiche l'image en
   énorme. Sur écran tactile, on repasse en défilement normal. */
@media (hover:none), (max-width:820px){
  .bandeau-fixe{ background-attachment:scroll; }
}

@media (prefers-reduced-motion:reduce){
  .bandeau-fixe{ background-attachment:scroll; }
}

@media (max-width:640px){
  .bandeau{ margin-top:40px; margin-bottom:40px; }
  .bandeau-fixe{ margin-top:40px; margin-bottom:40px; }
}

/* Le voile ayant été allégé, le texte posé dessus a besoin d'une
   ombre pour tenir sur les zones claires de la photo. Discrète :
   elle doit détacher les lettres, pas se voir. */
.bandeau-fixe h2,
.bandeau-fixe h3,
.bandeau-fixe p,
.bandeau-fixe li,
.bandeau-fixe summary,
.bandeau-fixe caption{
  text-shadow:0 1px 12px rgba(8,9,12,.85);
}

/* Le tableau des prix garde son propre fond : posé à même la
   photo, les chiffres deviendraient illisibles. */
.bandeau-fixe .tb-wrap{
  background:rgba(11,12,15,.62);
  border-radius:var(--radius);
}