/* ==========================================================================
   Xavier Argeles — Page Randonnees : pellicule horizontale

   Defilement lateral, hauteur fixe, largeurs variables : la page se
   parcourt comme une planche-contact. Le titre est vertical contre le
   bord gauche.

   Sous 900 px le parcours redevient vertical : le defilement horizontal
   au doigt entre en conflit avec le defilement de page sur mobile.
   ========================================================================== */

html,
body {
  height: 100%;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Titre vertical, colle au bord gauche
   -------------------------------------------------------------------------- */

.titre-vertical {
  position: fixed;
  left: 48px;
  top: calc(var(--hauteur-entete) + 100px);
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 30px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* Voile sous le titre : les photos defilent derriere lui, et sans ce
   fond le texte deviendrait illisible sur une image claire. Le degrade
   part du bord gauche et s'eteint avant les cadres. */
.titre-vertical::before {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  width: 190px;
  height: 100%;
  z-index: -1;
  background: linear-gradient(to right,
    var(--noir) 0%,
    rgba(13, 13, 13, 0.92) 45%,
    rgba(13, 13, 13, 0) 100%);
  pointer-events: none;
}

.titre-vertical__titre {
  margin: 0;
  font-size: clamp(38px, 4vw, 58px);
  font-weight: 200;
  letter-spacing: 0.04em;
  line-height: 1;
}

.titre-vertical__mention {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gris-inactif);
}

/* --------------------------------------------------------------------------
   La pellicule
   -------------------------------------------------------------------------- */

.pellicule {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--hauteur-entete) + 40px);
  bottom: 150px;

  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 48px 0 168px;

  overflow-x: auto;
  overflow-y: hidden;
  margin: 0;
  list-style: none;

  /* Chaque cadre s'aligne apres la colonne du titre vertical : sans cette
     marge, le premier cadre viendrait se caler sous le titre, qui
     deviendrait illisible.

     « proximity » et non « mandatory » : le magnetisme ne se declenche
     qu'a proximite d'un cadre, ce qui laisse le glisser libre de
     s'arreter ou il veut. Le deplacement molette et fleches se fait
     cadre par cadre depuis le JS, jamais au pixel — un petit cran de
     souris resterait sinon sous le seuil du magnetisme, qui le
     ramenerait aussitot en arriere. */
  scroll-snap-type: x proximity;
  scroll-padding-left: 168px;
  scroll-behavior: smooth;

  /* Indique que la bande se saisit a la souris. */
  cursor: grab;

  /* La barre native est remplacee par la progression en pied. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pellicule::-webkit-scrollbar {
  display: none;
}

/* Pendant le glisser : le curseur se ferme et le zoom au survol est
   neutralise, sinon les photos gonfleraient au passage du pointeur. */
.pellicule.est-glissee {
  cursor: grabbing;
}

.pellicule.est-glissee .cadre__image {
  transform: none !important;
}

/* Le texte ne doit pas se selectionner quand on tire la bande. */
.pellicule.est-glissee * {
  user-select: none;
}

.cadre {
  position: relative;
  flex-shrink: 0;
  height: 100%;
  max-height: 620px;
  scroll-snap-align: start;

  opacity: 1;
  transition: opacity 400ms ease, transform 400ms ease;
}

/* Trois largeurs, posees par data-format dans le HTML : c'est ce qui
   donne son rythme irregulier a la pellicule. */
.cadre[data-format="etroit"] { width: min(26vw, 300px); }
.cadre[data-format="moyen"]  { width: min(33vw, 380px); }
.cadre[data-format="large"]  { width: min(38vw, 430px); }

/* Element filtre : retire du flux une fois l'animation terminee. */
.cadre.est-masque {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}

.cadre.est-retire {
  display: none;
}

.cadre__lien {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--noir-doux);
}

.cadre__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1100ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.cadre__lien:hover .cadre__image,
.cadre__lien:focus-visible .cadre__image {
  transform: scale(1.045);
}

.cadre__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.10) 50%,
    rgba(0, 0, 0, 0) 100%);
  transition: opacity 500ms ease;
}

.cadre__lien:hover .cadre__voile,
.cadre__lien:focus-visible .cadre__voile {
  opacity: 0.82;
}

.cadre__legende {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 22px;
}

.cadre__titre {
  margin: 0;
  font-size: 25px;
  font-weight: 300;
  line-height: 1.15;
}

.cadre__detail {
  margin: 6px 0 0;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gris-clair);
}

.cadre__lien:focus-visible {
  outline: 1px solid var(--blanc);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Pied : filtres a gauche, progression a droite
   -------------------------------------------------------------------------- */

.pied-pellicule {
  position: fixed;
  left: 168px;
  right: 48px;
  bottom: 74px;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}

.filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.filtre {
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris-inactif);
  cursor: pointer;
  transition: color 300ms ease, border-color 300ms ease;
}

.filtre:hover {
  color: var(--gris-clair);
}

.filtre.est-actif {
  color: var(--blanc);
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

.progression-pellicule {
  display: flex;
  align-items: center;
  gap: 20px;
}

.progression-pellicule__compte {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--gris-inactif);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.progression-pellicule__piste {
  position: relative;
  width: 260px;
  height: 1px;
  background: var(--filet);
}

.progression-pellicule__barre {
  position: absolute;
  left: 0;
  top: 0;
  height: 1px;
  width: 12%;
  background: var(--blanc);
  transition: width 200ms ease, left 200ms ease;
}

/* --------------------------------------------------------------------------
   Fleches de navigation
   -------------------------------------------------------------------------- */

.fleches {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
}

.fleche {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--filet);
  background: none;
  color: var(--gris-clair);
  cursor: pointer;
  transition: color 300ms ease, border-color 300ms ease, background 300ms ease;
}

.fleche:hover:not(:disabled) {
  color: var(--blanc);
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.05);
}

/* Bout de course : la fleche reste en place mais cesse de repondre —
   la masquer ferait sauter la mise en page du pied. */
.fleche:disabled {
  color: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.07);
  cursor: default;
}

.fleche:focus-visible {
  outline: 1px solid var(--blanc);
  outline-offset: 2px;
}

.fleche svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
}

.indication {
  position: fixed;
  left: 168px;
  bottom: 34px;
  z-index: 12;
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gris-inactif);
}

/* Message si un filtre ne renvoie aucune randonnee. */
.pellicule-vide {
  position: fixed;
  left: 168px;
  top: 50%;
  z-index: 11;
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris-inactif);
}

/* --------------------------------------------------------------------------
   Sous 900 px : retour a un parcours vertical

   Le defilement horizontal au doigt entre en conflit avec celui de la
   page sur mobile. La pellicule redevient une colonne classique.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  html,
  body {
    height: auto;
    overflow: visible;
  }

  /* Le titre reprend sa position horizontale. */
  .titre-vertical {
    position: static;
    writing-mode: horizontal-tb;
    transform: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: calc(var(--hauteur-entete) + 40px) 20px 0;
  }

  /* Plus de photos derriere le titre : le voile n'a plus lieu d'etre. */
  .titre-vertical::before {
    display: none;
  }

  .titre-vertical__titre {
    font-size: 40px;
  }

  .pellicule {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px 20px 0;
    overflow: visible;
    scroll-snap-type: none;
    /* Plus rien a saisir : la page defile normalement. */
    cursor: default;
  }

  .cadre,
  .cadre[data-format="etroit"],
  .cadre[data-format="moyen"],
  .cadre[data-format="large"] {
    width: 100%;
    height: 78vw;
    max-height: none;
  }

  .pied-pellicule {
    position: static;
    padding: 30px 20px 0;
    justify-content: flex-start;
  }

  /* Progression et fleches n'ont plus de sens sans defilement lateral. */
  .progression-pellicule {
    display: none;
  }

  .indication {
    display: none;
  }

  .pellicule-vide {
    position: static;
    padding: 60px 20px;
  }

  .pied {
    margin-top: 50px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pellicule {
    scroll-behavior: auto;
  }

  .cadre,
  .cadre__image,
  .cadre__voile {
    transition-duration: 1ms;
  }
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.pied {
  padding: 40px 0 46px;
  border-top: 1px solid var(--filet);
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris-inactif);
}

/* En mode pellicule (grand ecran) le pied de page n'a pas sa place :
   la page ne defile pas verticalement. */
@media (min-width: 901px) {
  .pied {
    display: none;
  }
}