/* ===========================
   Carrousel — variables
   =========================== */
:root{
  /* Tailles plus grandes par défaut */
  --card-w: clamp(360px, 54vw, 640px);
  --card-w-even: clamp(300px, 46vw, 560px);
  --card-gap: clamp(12px, 1.8vw, 24px);
}

/* ===========================
   Piste scrollable
   =========================== */
.module-bloc-graphic-133.carousel-track{
  position: relative;
  display: flex;
  gap: var(--card-gap);

  /* Scroll horizontal (mais barre masquée) */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0.001px; /* évite un micro-bond en snap */

  /* Masquer la barre de scroll (conserve le scroll) */
  -ms-overflow-style: none;     /* IE/Edge hérité */
  scrollbar-width: none;        /* Firefox */
  max-width: 100%;
  padding-bottom: .25rem;       /* espace pour focus visible */
  box-sizing: border-box;
  overscroll-behavior-x: contain; /* n’“accroche” pas la page */
}
.module-bloc-graphic-133.carousel-track::-webkit-scrollbar{
  display: none;                /* Chrome/Safari */
  height: 0; width: 0;
}

/* Évite tout débordement horizontal global si un item dépasse */
html, body { overflow-x: clip; }

/* ===========================
   Cartes
   =========================== */
.module-bloc-graphic-133.carousel-track .module-bloc-graphic-item{
  scroll-snap-align: start;
  flex: 0 0 var(--card-w);
  max-width: 100%;
  min-width: 0;
}

/* 1 carte sur 2 un peu plus étroite (alternance) */
.module-bloc-graphic-133.carousel-track .module-bloc-graphic-item:nth-child(even){
  flex-basis: var(--card-w-even);
}

/* Images : ratio respecté, jamais déformées */
.module-bloc-graphic-133.carousel-track .module-bloc-graphic-item img{
  display: block;
  width: 100%;
  height: auto;           /* respecte le ratio natif */
  object-fit: contain;    /* change en cover si tu veux recadrer */
}

/* Typo/links internes : wrapping propre */
.module-bloc-graphic-133.carousel-track .module-bloc-graphic-item *{
  min-width: 0;
  word-wrap: break-word;
}

/* Focus visibles (RGAA) */
.module-bloc-graphic-133.carousel-track .module-bloc-graphic-item :where(a,button,[tabindex]){
  outline-offset: 3px;
}
.module-bloc-graphic-133.carousel-track .module-bloc-graphic-item :where(a,button,[tabindex]):focus-visible{
  outline: 2px solid #005fcc;
}

/* Petits écrans : harmonise la largeur pour le confort */
@media (max-width: 420px){
  .module-bloc-graphic-133.carousel-track .module-bloc-graphic-item{
    flex-basis: clamp(280px, 88vw, 360px);
  }
}

/* ===========================
   Navigation au-dessus (pas overlay)
   =========================== */
.carousel-nav-above{
  display: flex;
  gap: .5rem;
  justify-content: center;
    align-items: center;
  margin-top: -3em;
}

@media (max-width: 640px){
  .carousel-nav-above{ justify-content: center; }
}

.carousel-nav-above .carousel-btn{
display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    border: 1px solid #142f3f;
    background: #142f3f;
    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: #ffffff;
}

.carousel-nav-above .carousel-btn[aria-disabled="true"]{
  opacity: .5;
  cursor: not-allowed;
}

.carousel-nav-above .carousel-btn:focus-visible{
  outline: 2px solid #005fcc;
  outline-offset: 3px;
}

/* Utilitaire a11y */
.sr-only{
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}

/* ===========================
   Animations directionnelles (optionnel)
   =========================== */
.carousel-anim-right{ animation: car-anim-r .32s ease-out; }
.carousel-anim-left{  animation: car-anim-l .32s ease-out; }

@keyframes car-anim-r{
  from{ transform: translateX(-6px); } to{ transform: translateX(0); }
}
@keyframes car-anim-l{
  from{ transform: translateX(6px); } to{ transform: translateX(0); }
}