/* ===========================================
   Bloc Carousel — nav toujours AU-DESSUS
   Sans position absolute, RGAA-friendly
   =========================================== */

/* Utilitaire accessibilité (texte pour lecteurs d'écran) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Conteneur global: NAV au-dessus + PISTE en flux normal */
.carousel-container {
  display: block;
}

/* NAVIGATION: toujours avant la piste, en flux normal */
.carousel-nav-above {
 display: flex;
 gap: .75rem;
 align-items: center;
 justify-content: center;
 flex-wrap: wrap;
 margin-bottom: .75rem;
}

/* Boutons: cibles >=44px, focus visible, contraste OK (AA normal / AAA grand texte) */
.carousel-nav-above .carousel-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  min-width: 44px;
  min-height: 44px;
   border: 1px solid #f7a52b;
    background: #f7a52b;
  border-radius: 9999px;
  cursor: pointer;
  line-height: 1;
  font-size: 27px;
  font-weight: 700;
  user-select: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  color: #000000; /* contraste ~6.35:1 sur #eb5f64 */
}
.carousel-nav-above .carousel-btn:focus-visible{
  outline: 3px solid #0a65ff;
  outline-offset: 3px;
}
.carousel-nav-above .carousel-btn[aria-disabled="true"],
.carousel-nav-above .carousel-btn:disabled{
  opacity: .7;
  cursor: not-allowed;
}

/* PISTE (ton module existant) */
.module-bloc-graphic-136.carousel-track{
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .5rem;
  margin-top: 0; /* pas de décalage */
  /* Masquer la scrollbar visuellement (conserve le scroll) */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge legacy */
}
.module-bloc-graphic-136.carousel-track::-webkit-scrollbar{ display: none; }

/* Cartes */
.module-bloc-graphic-136.carousel-track .module-bloc-graphic-item{
  scroll-snap-align: start;
  flex: 0 0 85%;
  max-width: 370px;
}

/* Responsive — propre jusqu’aux très grands écrans */
@media (min-width: 480px){
  .module-bloc-graphic-136.carousel-track .module-bloc-graphic-item{ flex-basis: 80%; }
}
@media (min-width: 640px){
  .module-bloc-graphic-136.carousel-track .module-bloc-graphic-item{ flex-basis: 62%; }
}
@media (min-width: 768px){
  .module-bloc-graphic-136.carousel-track .module-bloc-graphic-item{ flex-basis: 48%; }
}
@media (min-width: 1024px){
  .module-bloc-graphic-136.carousel-track .module-bloc-graphic-item{ flex-basis: 31.5%; }
}
@media (min-width: 1280px){
  .module-bloc-graphic-136.carousel-track .module-bloc-graphic-item{ flex-basis: 24%; } /* ~4 cartes */
}

/* Respect de prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .carousel-anim-left .module-bloc-graphic-item,
  .carousel-anim-right .module-bloc-graphic-item,
  .module-bloc-graphic-136 .module-bloc-graphic-item-image img {
    animation: none !important;
    transition: none !important;
  }
}

/* Micro transition douce sur les images */
.module-bloc-graphic-136 .module-bloc-graphic-item-image img {
  transition: transform 300ms ease, opacity 300ms ease;
  will-change: transform;
}

/* Animations directionnelles (optionnelles) */
@keyframes carouselSlideRight {
  from { transform: translateX(-12px) scale(.985); opacity: .92; }
  to   { transform: translateX(0)      scale(1);    opacity: 1; }
}
@keyframes carouselSlideLeft {
  from { transform: translateX(12px) scale(.985); opacity: .92; }
  to   { transform: translateX(0)    scale(1);    opacity: 1; }
}
.module-bloc-graphic-136.carousel-track.carousel-anim-right .module-bloc-graphic-item { animation: carouselSlideRight 320ms ease both; }
.module-bloc-graphic-136.carousel-track.carousel-anim-left  .module-bloc-graphic-item { animation: carouselSlideLeft  320ms ease both; }
.module-bloc-graphic-136.carousel-track.carousel-anim-right .module-bloc-graphic-item-image img { transform: translateX(6px); }
.module-bloc-graphic-136.carousel-track.carousel-anim-left  .module-bloc-graphic-item-image img { transform: translateX(-6px); }