/**
 * Bandeau défilant.
 *
 * Le défilement est fait par le navigateur — scroll-snap — et non par
 * le script : le geste tactile fonctionne sans une ligne de code, et
 * le rendu ne dépend pas d'une animation JavaScript.
 */

/*
 * Le hero sort du conteneur : il occupe toute la fenêtre, comme le
 * slider qu'il remplace. Les marges négatives sont dans base.css.
 */
.slider {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  height: min(600px, 49.342vw);
  margin-block: 0 var(--e-l);
  margin-inline: calc(50% - 50vw);
  background-color: var(--couleur-fond-inverse);
}

.slider__piste {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;                 /* la pagination remplace la barre */
  overscroll-behavior-x: contain;
}

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

/*
 * La frise du hero d'accueil. Posée sur le cadre et non sur la piste :
 * elle reste en place pendant que les bandeaux défilent dessous.
 * Décorative, donc au-dessus des images mais sous les commandes.
 */
.slider__frise {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-color: var(--frise-home-couleur);
  -webkit-mask-image: var(--frise-home-fichier);
  mask-image: var(--frise-home-fichier);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

@supports not ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
  .slider__frise { display: none; }
}

.slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;

  /*
   * La hauteur est portée par le cadre, pas par la diapositive : celle-ci
   * la remplit. Deux raisons plutôt qu'une. La diapositive est un élément
   * flex, et une hauteur posée dessus laissait la ligne flex se
   * dimensionner à part — le fond marine du hero apparaissait sous les
   * images. Et une seule déclaration vaut mieux que trois quand il
   * s'agira de changer la hauteur du hero.
   */
  height: 100%;
}

/* L'image et le contenu se superposent dans la même cellule de grille :
   pas de position absolue, donc pas de hauteur à deviner. */
.slide__image,
.slide__contenu {
  grid-area: 1 / 1;
}

/*
 * L'image est sortie du flux et calée sur les quatre bords : elle
 * couvre exactement la diapositive, quelle que soit la façon dont la
 * grille et la ligne flex se résolvent. C'est ce qui laissait
 * apparaître le fond marine du hero sous la photo.
 */
.slide__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * Titre et bouton centrés dans le hero, comme la maquette. La réserve
 * en bas laisse la place aux points de pagination, qui se posent sur
 * l'image et non sous elle.
 */
/*
 * Les plans du hero, du fond vers la surface :
 *
 *   0  l'image
 *   1  le voile, posé sur l'image seule
 *   2  la frise, qui doit rester vive et non voilée
 *   3  le titre et le bouton
 *   4  les commandes
 */
.slide::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: var(--voile-slide);
  pointer-events: none;
}

.slide__contenu {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--e-l) calc(var(--e-2xl) + var(--e-s));
  text-align: center;
  color: var(--couleur-texte-inverse);

}

/*
 * Pas de largeur de lecture ici : le titre du hero est une accroche de
 * deux lignes, pas un paragraphe. La borner à 24 caractères le cassait
 * en quatre.
 */
/*
 * LE TITRE TIENT SUR DEUX LIGNES, QUELLE QUE SOIT LA LARGEUR.
 *
 * Ses deux lignes sont écrites à la main dans le contenu, avec un saut
 * entre elles : il ne s'agit donc pas de les obtenir, mais d'empêcher
 * qu'une troisième apparaisse quand la fenêtre se resserre.
 *
 * La valeur vient d'une mesure et non d'un essai. La ligne la plus
 * longue — « Envie de pratiquer une activité sportive ? » — occupe
 * 20,8 fois le corps de la police. Pour qu'elle entre dans la largeur
 * disponible, soit « 100vw » moins les deux fois seize pixels de
 * réserve du conteneur, il faut donc un corps d'au plus 4,81 vw. On
 * s'arrête à 4,45 : les sept pour cent de marge encaissent une fonte
 * de substitution un peu plus large, le temps que Barlow se charge.
 *
 * Le plafond reste celui de « --t-h1 » — le titre ne grossit pas
 * au-delà de la maquette sur un grand écran — et le plancher à
 * 0,95 rem tient jusqu'à 360 px de fenêtre, la plus étroite des
 * largeurs courantes. En dessous, la ligne se replie : mieux vaut
 * trois lignes lisibles qu'un titre qui déborde de l'écran.
 */
.slide__titre {
  margin: 0 auto;
  max-width: none;
  color: var(--couleur-texte-inverse);
  font-size: clamp(0.95rem, calc(4.45vw - 1px), 2.92rem);
  text-transform: uppercase;
  text-wrap: balance;
}

.slide__texte {
  margin: var(--e-2xs) auto 0;
  max-width: 55ch;
  font-size: var(--t-corps-grand);
}

/*
 * L'appel à l'action du hero : aplat ambre, filet blanc d'un pixel,
 * texte blanc. Au survol l'aplat se vide, le filet et le texte restent —
 * la photo reprend le dessus sans qu'aucune couleur nouvelle apparaisse.
 */
/*
 * Le sélecteur porte deux classes, et non une seule : à poids égal
 * c'est l'ordre de chargement qui tranche, et boutons.css est chargé
 * après slider.css. L'aplat ambre était écrasé par le fond transparent
 * de « .bouton », et le texte blanc par son marine.
 */
.slider .slide__lien {
  display: inline-flex;
  width: auto;
  margin-top: var(--e-s);
  border: 1px solid var(--c-blanc);
  background-color: var(--c-ambre);
  color: var(--c-blanc);

  /*
   * En capitales, comme le titre qu'il accompagne. « .bouton » les
   * laisse en bas de casse partout ailleurs, et c'est volontaire :
   * ici seulement, le bouton appartient au hero et en suit le ton.
   * La transformation est faite par le CSS et non dans le contenu,
   * pour que la saisie reste lisible en gestion et que les lecteurs
   * d'écran annoncent une phrase plutôt qu'un sigle.
   */
  text-transform: uppercase;
}

.slider .slide__lien:hover,
.slider .slide__lien:focus-visible {
  background-color: transparent;
  color: var(--c-blanc);
}

/* ---------------------------------------------------------------
 * Commandes — créées par le script
 * --------------------------------------------------------------- */

.slider__commandes {
  position: absolute;

  /* Au-dessus de tout le reste. */
  z-index: 4;

  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2xs);
  padding: var(--e-s);

  /* Les commandes se posent sur l'image, elles n'ont pas de fond à
     elles : la maquette ne montre qu'une rangée de points. */
  background: none;
  pointer-events: none;
}

.slider__commandes > * { pointer-events: auto; }

.slider__fleche,
.slider__pause,
.slider__pastille {
  display: grid;
  place-items: center;
  border: 2px solid rgb(255 255 255 / 0.7);
  background-color: rgb(10 31 71 / 0.55);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}

/* Le hero est une image plein cadre : le contenu s'y pose sans la
   gouttière de lecture des sections courantes. */
.slide__contenu > .conteneur {
  max-width: none;
  padding-inline: var(--e-s);
}

/* Cibles tactiles à 44 px, y compris pour les pastilles : un point de
   8 px est impossible à viser au doigt. */
.slider__fleche,
.slider__pause {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
}

/*
 * Les flèches de la charte, en masque.
 *
 * Elles remplacent les chevrons typographiques « ‹ › » que le script
 * posait dans le bouton : un caractère dépend de la fonte installée et
 * ne ressemble jamais tout à fait au dessin de la maquette. Le masque
 * prend la couleur du bouton, donc il suit ses états sans rien de plus.
 *
 * Le bouton reste une cible de 44 px ; seul le dessin fait 1.125rem.
 */
.slider__fleche::before {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
  background-color: currentcolor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.slider__fleche--precedent::before {
  -webkit-mask-image: var(--precedent-fichier);
  mask-image: var(--precedent-fichier);
}

.slider__fleche--suivant::before {
  -webkit-mask-image: var(--suivant-fichier);
  mask-image: var(--suivant-fichier);
}


.slider__pagination {
  display: flex;
  gap: var(--e-3xs);
}

.slider__pastille {
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: none;
  border-radius: 50%;
}

/* Le point visible est dessiné en pseudo-élément : la zone cliquable
   reste grande, le repère visuel reste discret. */
.slider__pastille::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border: 1px solid var(--c-blanc);
  border-radius: 50%;

  /* Les points sont pleins et blancs ; seul celui du bandeau en cours
     passe à l'ambre. Un point creux se voit mal sur une photo. */
  background-color: var(--c-blanc);
  transition: background-color var(--transition);
}

/* Le bandeau en cours : la pastille se remplit d'ambre, cerclée de
   blanc comme les autres. */
.slider__pastille--actif::before {
  background-color: var(--slider-pastille-active);
}

.slider__fleche:hover,
.slider__pause:hover {
  background-color: var(--c-marine);
  border-color: #fff;
}

.slider__fleche:focus-visible,
.slider__pause:focus-visible,
.slider__pastille:focus-visible {
  outline: var(--focus-epaisseur) solid #fff;
  outline-offset: var(--focus-decalage);
}

/* ---------------------------------------------------------------
 * Sans JavaScript, ou en mouvement réduit
 * --------------------------------------------------------------- */

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

@media (max-width: 599px) {
  .slide__contenu { padding-bottom: calc(var(--e-2xl) + var(--e-m)); }

  /*
   * Plus de bascule sur « --t-h2 » ici : elle écrasait le clamp et
   * rendait d'un coup un corps trop grand pour la ligne, donc une
   * troisième ligne — exactement ce qu'on cherche à éviter. La
   * fonction continue toute seule en dessous de 599 px.
   */
}