/* ===========================
   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-135.carousel-track{
  position: relative;
  display: flex;
  gap: var(--card-gap);
max-width: 80% !important;
    float: right !important;

  /* 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-135.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-135.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-135.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-135.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-135.carousel-track .module-bloc-graphic-item *{
  min-width: 0;
  word-wrap: break-word;
}

/* Focus visibles (RGAA) */
.module-bloc-graphic-135.carousel-track .module-bloc-graphic-item :where(a,button,[tabindex]){
  outline-offset: 3px;
}
.module-bloc-graphic-135.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-135.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: -7em;
    margin-bottom: 1em;
}

@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 #4f9180;
    background: #4f9180;
    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;
}

.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); }
}
/* ===========================
   Bloc Graphic 135 — images 590×472
   (priorité en fin de fichier)
   =========================== */
:root{
  --bg135-img-w: 500px;
  --bg135-img-h: 500px;
  --bg135-ratio: 500/500;
}

/* Cartes = largeur de l’image (uniforme) */
.module-bloc-graphic-135.carousel-track .module-bloc-graphic-item{
  flex: 0 0 var(--bg135-img-w);      /* remplace --card-w pour ce module */
  max-width: var(--bg135-img-w);
}

/* Annule l’alternance “even” plus étroite */
.module-bloc-graphic-135.carousel-track .module-bloc-graphic-item:nth-child(even){
  flex-basis: var(--bg135-img-w);    /* uniformise */
}

/* Image : 590×472 avec recadrage propre */
.module-bloc-graphic-135.carousel-track .module-bloc-graphic-item img{
  display: block;
  width: var(--bg135-img-w);
  height: var(--bg135-img-h);
  aspect-ratio: var(--bg135-ratio);  /* utile si le navigateur l’utilise */
  object-fit: cover;                  /* remplissage + crop (propre) */
}

/* Responsive : sous 720px, on fluidifie la largeur mais on garde le ratio */
@media (max-width: 720px){
  .module-bloc-graphic-135.carousel-track .module-bloc-graphic-item{
    flex-basis: min(88vw, var(--bg135-img-w));
    max-width: 100%;
  }
  .module-bloc-graphic-135.carousel-track .module-bloc-graphic-item img{
    width: 100%;
    height: auto;                     /* calcule la hauteur via aspect-ratio */
    aspect-ratio: var(--bg135-ratio);
    object-fit: cover;
  }
}
/* ===========================
   Bloc Graphic 135 — Scroll Snap
   =========================== */
.module-bloc-graphic-135.carousel-track {
  scroll-snap-type: x mandatory;   /* aligne sur chaque item */
  overflow-x: auto;                 /* défilement horizontal */
  scroll-behavior: smooth;          /* défilement doux au clic */
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;              /* évite coupe d’ombre éventuelle */
}

/* Chaque carte devient une “cible” de snap */
.module-bloc-graphic-135.carousel-track .module-bloc-graphic-item {
  scroll-snap-align: start;         /* colle au bord gauche */
  scroll-snap-stop: always;         /* évite de “sauter” plusieurs cartes */
}