/* =====================================================================
   Diaporama de l'accueil — ACF + Glide.js.
   Reproduit le rendu MetaSlider / FlexSlider mesuré sur la production :
   cadre au ratio 1440/640 (min 420 px, max 640 px), image en couverture,
   légende centrée en bas, flèches cerclées de 32 px, aucune puce.
   La typographie des légendes (.caption-title, .caption-sub, .caption-btn)
   reste définie dans style.css, elle s'applique telle quelle.
   ===================================================================== */

/* Boîte */
.home-hero .aec-hero{
  width:100%;
  max-width:1440px;
  margin:0 auto;
  position:relative;
  z-index:1;
}
.home-hero .aec-hero .glide__track{ overflow:hidden; }

/* Fondu entre les slides. Glide ne sait que faire défiler : on neutralise sa
   translation (piste figée) et on superpose toutes les slides dans une même cellule
   de grille ; l'opacité suit la classe glide__slide--active qu'il pose. Glide garde
   la main sur l'autoplay, les flèches, le clavier et le glissement au doigt. */
.home-hero .aec-hero .glide__slides{
  margin:0; padding:0; list-style:none;
  display:grid;
  grid-template-columns:minmax(0, 1fr);   /* la colonne suit le conteneur, pas la largeur que le ratio du slide réclamerait via min-height */
  width:100% !important;
  transform:none !important;
}
.home-hero .aec-hero .glide__slide{
  grid-area:1 / 1;
  min-width:0;
  width:100% !important;
  opacity:0;
  transition:opacity var(--aec-hero-fade, 700ms) ease;
}
/* Avant le montage de Glide (ou sans JavaScript) : seule la première slide est visible. */
.home-hero .aec-hero:not(.glide--slider) .glide__slide:first-child{ opacity:1; }
.home-hero .aec-hero .glide__slide--active{ opacity:1; z-index:1; }
@media (prefers-reduced-motion: reduce){
  .home-hero .aec-hero .glide__slide{ transition:none; }
}

/* Cadre du slide (ratio) — identique à .flexslider .slides > li */
.home-hero .aec-hero .aec-hero__slide{
  aspect-ratio:1440/640;
  width:100%;
  min-height:420px;
  max-height:640px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0;
}

/* Image : les copies MetaSlider étaient recadrées en 1440 × 640 ; on impose le
   même ratio, l'image reste centrée verticalement quand le cadre est plus haut
   (mobile : cadre de 420 px, image de 222 px). */
.home-hero .aec-hero .aec-hero__link{ display:block; width:100%; }
.home-hero .aec-hero .aec-hero__img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1440/640;
  max-height:640px;
  object-fit:cover;
  object-position:center;
}

/* Légende : deux niveaux absolus imbriqués, comme dans le balisage MetaSlider
   (caption-wrap, puis caption), avec la même règle pour les deux. */
.home-hero .aec-hero .caption-wrap,
.home-hero .aec-hero .caption{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:8%;
  top:auto;
  text-align:center;
  width:min(90%,800px);
  padding:0 20px;
  margin:0;
  z-index:10;
  background:transparent;
  opacity:1;
}
.home-hero .aec-hero .caption-wrap{ color:#fff; }   /* public.css de MetaSlider : color:white */
.home-hero .aec-hero .caption{ word-wrap:break-word; }

/* Flèches : cercles de 32 px, texte natif masqué, glyphe en pseudo-élément */
.home-hero .aec-hero .aec-hero__arrows{ position:static; z-index:30; pointer-events:none; }
.home-hero .aec-hero .aec-hero__arrow{
  pointer-events:auto;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  margin:-20px 0 0;            /* flexslider.css : margin:-20px 0 0 — les flèches sont 20 px au-dessus du centre */
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(0,0,0,.35);
  background-image:none;
  color:#fff;
  box-shadow:none;
  font-size:0;
  line-height:0;
  text-indent:0;
  overflow:hidden;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  transition:transform .2s ease, background .2s ease;
}
.home-hero .aec-hero .aec-hero__arrow--prev{ left:14px; }
.home-hero .aec-hero .aec-hero__arrow--next{ right:14px; }
.home-hero .aec-hero .aec-hero__arrow::after{
  content:"←";
  display:inline-block;
  font-family:Arial, sans-serif;
  font-weight:700;
  font-size:16px;
  line-height:1;
  color:#fff;
  margin-top:-2px;
}
.home-hero .aec-hero .aec-hero__arrow--next::after{ content:"→"; }
.home-hero .aec-hero .aec-hero__arrow:hover,
.home-hero .aec-hero .aec-hero__arrow:focus-visible{
  background:#8B0000;
  transform:translateY(-50%) scale(1.05);
}

/* Mobile ≤ 767 px */
@media (max-width:767px){
  .home-hero .aec-hero .caption-wrap{ bottom:5%; width:92%; padding:0 10px; }
  .home-hero .aec-hero .aec-hero__arrow--prev{ left:10px; }
  .home-hero .aec-hero .aec-hero__arrow--next{ right:10px; }
  .home-hero .aec-hero .aec-hero__arrow::after{ font-size:14px; }
}