@charset "UTF-8";
/* ==========================================================================
   Linobase — Swiper Diaporama
   Structure attendue :
   .lb-diaporama
     .lb-diaporama__swiper.swiper[data-lb-swiper]
       .swiper-wrapper
         .lb-slide.swiper-slide
           .lb-slide__figure
             .lb-slide__media img
             .lb-slide__caption (optionnel)
               .lb-slide__title (optionnel)
               p, etc.
   ========================================================================== */
/* ---------
  Variables
  (optionnel) : remplace par tes variables CSS / SCSS Linobase si tu en as
--------- */
.lb-diaporama {
  position: relative;
  /* Le conteneur swiper */
}
.lb-diaporama .lb-diaporama__swiper {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  /* évite le “saut” visuel pendant chargement */
  background: rgba(0, 0, 0, 0.02);
}
.lb-diaporama .swiper-wrapper {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.lb-diaporama {
  /* Accessibilité : focus visible */
}
.lb-diaporama .swiper-button-prev:focus-visible,
.lb-diaporama .swiper-button-next:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* -------------------
   Slide + media
------------------- */
.lb-slide {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.lb-slide.swiper-slide {
  height: auto;
}

.lb-slide__figure {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
}

.lb-slide__media {
  width: 100%;
  height: 100%;
  /* Drupal peut wrapper les images, on force la cohérence */
}
.lb-slide__media picture,
.lb-slide__media img {
  display: block;
  width: 100%;
}
.lb-slide__media img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* -------------------------------------------------
   Caption overlay (par défaut) + typographie
------------------------------------------------- */
.lb-slide__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem 2rem;
  color: #fff;
  /* Dégradé sobre pour assurer la lisibilité */
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.72)), color-stop(35%, rgba(0, 0, 0, 0.38)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.38) 35%, rgba(0, 0, 0, 0) 100%);
  /* Gestion texte */
}
.lb-slide__caption p {
  margin: 0;
  max-width: none;
  font-size: 1rem;
  line-height: 1.55;
}
.lb-slide__caption a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lb-slide__caption a:hover {
  text-decoration-thickness: 2px;
}

/* Titre optionnel (si tu ajoutes field_title + markup dédié) */
.lb-slide__title {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1.25;
  max-width: none;
  color: #fff;
}

/* ------------------------------------------
   Navigation / Pagination (discrètes)
------------------------------------------ */
.lb-diaporama .swiper-button-prev,
.lb-diaporama .swiper-button-next {
  width: 44px;
  height: 44px;
  color: #fff;
  /* fond léger pour visibilité sur photos claires */
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(6px);
  -webkit-transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), background 180ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), background 180ms cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lb-diaporama .swiper-button-prev::after,
.lb-diaporama .swiper-button-next::after {
  font-size: 1.1rem;
  font-weight: 700;
}
.lb-diaporama .swiper-button-prev:hover,
.lb-diaporama .swiper-button-next:hover {
  background: rgba(0, 0, 0, 0.38);
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
}
.lb-diaporama .swiper-pagination {
  bottom: 12px;
}
.lb-diaporama .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.55);
  opacity: 1;
  -webkit-transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), background 180ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), background 180ms cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lb-diaporama .swiper-pagination-bullet-active {
  background: #fff;
  -webkit-transform: scale(1.15);
          transform: scale(1.15);
}

/* ------------------------------------------
   Animation du texte (caption)
   Principe :
   - état par défaut : légèrement bas + flou + transparent
   - quand la slide est active : visible + net
------------------------------------------ */
/* état de base (toutes slides) */
.lb-slide .lb-slide__caption {
  opacity: 0;
  -webkit-transform: translate3d(0, 14px, 0);
          transform: translate3d(0, 14px, 0);
  -webkit-filter: blur(2px);
          filter: blur(2px);
  -webkit-transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 520ms cubic-bezier(0.22, 1, 0.36, 1), -webkit-filter 520ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 520ms cubic-bezier(0.22, 1, 0.36, 1), -webkit-filter 520ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 520ms cubic-bezier(0.22, 1, 0.36, 1), filter 520ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 520ms cubic-bezier(0.22, 1, 0.36, 1), filter 520ms cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 520ms cubic-bezier(0.22, 1, 0.36, 1), -webkit-filter 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* slide active : on affiche le texte */
.swiper-slide-active .lb-slide__caption {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-filter: blur(0);
          filter: blur(0);
}

/* Option : faire apparaître aussi sur la slide suivante/précédente (si tu veux) */
/*
.swiper-slide-next .lb-slide__caption,
.swiper-slide-prev .lb-slide__caption {
  opacity: 0.65;
  transform: translate3d(0, 6px, 0);
  filter: blur(0.5px);
}
*/
/* ------------------------------------------
   Hauteur du diaporama
   Recommandation : gérer via Drupal (classe ou style)
   Exemple : tu mets une classe sur le paragraph (champ “hauteur”)
   - lb-diaporama--h-sm / --h-md / --h-lg / --h-auto
------------------------------------------ */
/* Par défaut : auto (hauteur dictée par contenu / image) */
.lb-diaporama--h-auto .lb-diaporama__swiper {
  height: auto;
}
.lb-diaporama--h-auto .lb-slide__media img {
  height: auto;
}

/* Hauteurs fixes (exemples) */
.lb-diaporama--h-sm .lb-diaporama__swiper {
  height: 320px;
}

.lb-diaporama--h-md .lb-diaporama__swiper {
  height: 460px;
}

.lb-diaporama--h-lg .lb-diaporama__swiper {
  height: 620px;
}

/* Maintien de l’image en cover si hauteur fixée */
.lb-diaporama--h-sm .lb-slide,
.lb-diaporama--h-sm .lb-slide__figure,
.lb-diaporama--h-sm .lb-slide__media,
.lb-diaporama--h-sm .lb-slide__media img,
.lb-diaporama--h-md .lb-slide,
.lb-diaporama--h-md .lb-slide__figure,
.lb-diaporama--h-md .lb-slide__media,
.lb-diaporama--h-md .lb-slide__media img,
.lb-diaporama--h-lg .lb-slide,
.lb-diaporama--h-lg .lb-slide__figure,
.lb-diaporama--h-lg .lb-slide__media,
.lb-diaporama--h-lg .lb-slide__media img {
  height: 100%;
}

/* Alternative moderne : ratio plutôt que height fixe (si tu préfères) */
.lb-diaporama--ratio-16-9 .lb-diaporama__swiper {
  aspect-ratio: 16/9;
}
.lb-diaporama--ratio-16-9 .lb-slide,
.lb-diaporama--ratio-16-9 .lb-slide__figure,
.lb-diaporama--ratio-16-9 .lb-slide__media,
.lb-diaporama--ratio-16-9 .lb-slide__media img {
  height: 100%;
}

.lb-diaporama--ratio-21-9 .lb-diaporama__swiper {
  aspect-ratio: 21/9;
}
.lb-diaporama--ratio-21-9 .lb-slide,
.lb-diaporama--ratio-21-9 .lb-slide__figure,
.lb-diaporama--ratio-21-9 .lb-slide__media,
.lb-diaporama--ratio-21-9 .lb-slide__media img {
  height: 100%;
}

/* ------------------------------------------
   Variante “texte sous image” (si besoin futur)
   Applique la classe sur le paragraph :
   .lb-diaporama--text-below
------------------------------------------ */
.lb-diaporama--text-below .lb-slide__caption {
  position: static;
  padding: 1rem 1.25rem;
  background: none;
  color: inherit;
  /* animation désactivée dans ce mode (plus naturel) */
  opacity: 1;
  -webkit-transform: none;
          transform: none;
  -webkit-filter: none;
          filter: none;
  -webkit-transition: none;
  transition: none;
}
.lb-diaporama--text-below .lb-slide__caption p {
  max-width: none;
}

/* ------------------------------------------
   Responsive
------------------------------------------ */
@media (max-width: 768px) {
  .lb-slide__caption {
    padding: 1rem 1.25rem;
  }
  .lb-slide__caption p {
    font-size: 0.95rem;
  }
  .lb-slide__title {
    font-size: 1.1rem;
  }
  .lb-diaporama .swiper-button-prev,
  .lb-diaporama .swiper-button-next {
    width: 40px;
    height: 40px;
  }
  .lb-diaporama .swiper-button-prev::after,
  .lb-diaporama .swiper-button-next::after {
    font-size: 1rem;
  }
  /* Hauteurs sur mobile (optionnel) */
  .lb-diaporama--h-md .lb-diaporama__swiper {
    height: 380px;
  }
  .lb-diaporama--h-lg .lb-diaporama__swiper {
    height: 460px;
  }
}
/* 1) Garantir un fond lisible (pas “trop subtil”) */
.lb-slide__caption {
  /* assure que le dégradé est bien visible sur toutes les photos */
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.82)), color-stop(42%, rgba(0, 0, 0, 0.55)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.55) 42%, rgba(0, 0, 0, 0) 100%);
  /* léger “mat” en plus du dégradé (améliore sur photos très claires) */
}

/* Optionnel : améliorer le contraste du texte */
.lb-slide__caption,
.lb-slide__caption p,
.lb-slide__caption a {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* 2) Rendre le lien cliquable : gérer la superposition avec les flèches Swiper
   Problème : .swiper-button-prev/next peuvent recouvrir la zone caption.
   Solution : donner un “layering” clair et limiter la zone cliquable des flèches.
*/
/* Le slide et son overlay au-dessus */
.lb-slide__figure {
  position: relative;
}

.lb-slide__caption {
  position: absolute;
  z-index: 3; /* au-dessus du média */
}

/* Navigation au-dessus du visuel mais sans bloquer le bas (caption) */
.lb-diaporama .swiper-button-prev,
.lb-diaporama .swiper-button-next {
  z-index: 2; /* en dessous de la caption pour ne pas la bloquer */
}
.lb-diaporama .swiper-pagination {
  z-index: 4; /* au-dessus si besoin */
}

/* 3) Sécuriser l’accessibilité et la clicabilité du lien */
.lb-slide__link {
  position: relative;
  z-index: 4; /* au-dessus de tout dans la caption */
  pointer-events: auto;
}

.lb-slide__link a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.95rem;
  border-radius: 999px;
  /* bouton lisible */
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
  text-decoration: none;
  font-weight: 650;
  -webkit-transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1), border-color 180ms cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1), border-color 180ms cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), background 180ms cubic-bezier(0.22, 1, 0.36, 1), border-color 180ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), background 180ms cubic-bezier(0.22, 1, 0.36, 1), border-color 180ms cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lb-slide__link a:hover {
  -webkit-transform: translate3d(0, -1px, 0);
          transform: translate3d(0, -1px, 0);
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.55);
}

.lb-slide__link a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* 4) Important : éviter que des éléments Swiper capturent le clic sur la caption
   - On autorise les interactions sur la caption
   - Et on s’assure que rien au-dessus ne “mange” les clics
*/
.lb-slide__caption {
  pointer-events: auto;
}

/* Si tu constates que le drag/swipe empêche de cliquer, tu peux activer ça côté JS :
   new Swiper(... { preventClicks: false, preventClicksPropagation: false, ... })
   (je peux te donner le réglage exact dans ton behavior Drupal)
*/
/* 5) Option “zone safe” : éloigner les flèches de la caption sur desktop */
@media (min-width: 992px) {
  .lb-diaporama .swiper-button-prev,
  .lb-diaporama .swiper-button-next {
    top: 45%;
  }
}
/* 6) Mobile : caption plus dense, lien plein largeur si besoin */
@media (max-width: 768px) {
  .lb-slide__caption {
    padding: 1rem 1.25rem;
  }
  .lb-slide__link a {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
  }
}
.lb-slide__caption--left {
  text-align: left;
}
.lb-slide__caption--center {
  text-align: center;
}
.lb-slide__caption--right {
  text-align: right;
}