/* Carrousel de la page d'accueil : photo + textes placés depuis le panel admin.
   Utilisé par le site ET par l'éditeur du panel (même rendu). */

@font-face {
  font-family: "AvenirNextLTPro-Regular.otf";
  src: url('AvenirNextLTPro-Regular.otf');
}

.carrousel { container: carrousel / inline-size; }
.carrousel .slide { min-width: 100%; }

.carrousel-scene {
  position: relative;
  container-type: inline-size;
  background: #000;
  overflow: hidden;
}
.carrousel-scene img { width: 100%; height: auto; display: block; }
.carrousel-lien { display: block; }

.carrousel-calque { position: absolute; inset: 0; pointer-events: none; }

.carrousel-bloc {
  position: absolute;
  transform: translate(-50%, -50%);
  margin: 0;
  white-space: pre;
  font-family: "AvenirNextLTPro-Regular.otf", "Avenir Next", Avenir, "PT Sans", sans-serif;
  font-weight: 400;
  font-size: calc(var(--taille, 2.5) * 1cqw);
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}
.carrousel-gras { font-weight: 700; }

.carrousel-bouton {
  pointer-events: auto;
  text-decoration: none;
  border: 1px solid #fff;
  background: rgba(0, 0, 0, .35);
  padding: .25em .55em .3em;
  line-height: 1.2;
  transition: background .2s;
}
.carrousel-bouton:hover { background: rgba(255, 255, 255, .15); }

/* Écran étroit (téléphone) : le texte passe sous la photo, en taille lisible. */
@container carrousel (max-width: 640px) {
  .carrousel-calque {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 20px;
    text-align: center;
    pointer-events: auto;
  }
  .carrousel-bloc {
    position: static;
    transform: none;
    white-space: pre-line;
    text-align: center !important;
    font-size: 15px;
  }
  .carrousel-titre { font-size: 21px; }
  /* flèches au milieu de la photo (format 1900 × 700), pas au milieu du texte */
  .carrousel .prev, .carrousel .next { top: 18.4cqw; }
  .carrousel-bouton { font-size: 15px; margin-top: 4px; }
}