/* =========================================================
   🎠 Carousel – propre & unifié (scroll-snap + flèches)
   Markup base:
   .carousel > .carousel-track > .carousel-item
   Variantes: .carousel.is-blog, .consoles-carousel
   Compat:    .carousel-track-blog / .carousel-item-blog
   ========================================================= */

/* ---------- Conteneur ---------- */
.carousel{
  position: relative;
  --gap: clamp(12px, 2vw, 16px);
  margin-bottom: clamp(20px, 3vw, 32px);
  overflow: visible;                    /* garde les ombres des cartes */
  /* Option visuelle (activée par JS): .is-scrollable => fades aux bords */
}
.carousel--faded.is-scrollable::before,
.carousel--faded.is-scrollable::after{
  content:"";
  position:absolute; inset-block:0;
  inline-size:42px;
  pointer-events:none;
  z-index:5;
  /* dégradés latéraux */
  background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}
.carousel--faded.is-scrollable::before{ inset-inline-start:0; }
.carousel--faded.is-scrollable::after{
  inset-inline-end:0;
  transform: scaleX(-1);
}

/* ---------- Track (ligne horizontale) ---------- */
.carousel-track,
.carousel-track-blog{                  /* alias rétro-compat */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr); /* largeur carte par défaut */
  gap: var(--gap);

  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 4px 10px;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  align-items: stretch;                 /* étire les items en hauteur */

  /* masquage cross-browser des barres */
  scrollbar-width: none;                /* Firefox */
  -ms-overflow-style: none;             /* IE/Edge legacy */
  scrollbar-gutter: stable both-edges;  /* évite le CLS quand scrollbar */
  contain: content;
}
.carousel-track::-webkit-scrollbar,
.carousel-track-blog::-webkit-scrollbar{ display:none; }

/* ---------- Item ---------- */
.carousel-item,
.carousel-item-blog{                   /* alias rétro-compat */
  position: relative;
  scroll-snap-align: start;
  scroll-snap-stop: always;            /* stop net quand clic flèche */
  transition: transform .18s ease;
  height: 100%;
}
.carousel-item:hover,
.carousel-item-blog:hover{ transform: translateY(-4px); }

/* Cartes à l’intérieur d’un item (remplissent la hauteur) */
.vignette-card{ display:flex; flex-direction:column; }
.vignette-thumb img{ display:block; width:100%; height:auto; }

/* États d’interaction globaux (drag) */
.carousel.is-dragging .carousel-item,
.carousel.is-dragging .carousel-item-blog{ transition: none; }
.carousel.is-dragging{ cursor: grabbing; }

/* Keyboard/focus dans la piste (ex: lien de carte focus) */
.carousel :is(a,button,[tabindex]):focus-visible{
  outline: 3px solid var(--ring, #93c5fd);
  outline-offset: 2px;
  border-radius: 10px;
}

/* ---------- Responsif (largeurs colonnes) ---------- */
@media (min-width: 640px){
  .carousel-track,
  .carousel-track-blog{
    grid-auto-columns: minmax(180px, 1fr);
  }
}
@media (min-width: 1024px){
  .carousel-track,
  .carousel-track-blog{
    grid-auto-columns: minmax(220px, 1fr);
  }
}

/* ---------- Variantes d’alignement ---------- */
/* Centrage des snaps (optionnel sur un carrousel spécifique) */
.carousel.is-center .carousel-item,
.carousel.is-center .carousel-item-blog{ scroll-snap-align: center; }

/* Variante compacte (cartes plus étroites) */
.carousel.is-compact .carousel-track{ grid-auto-columns: minmax(160px, 1fr); }

/* ---------- Variante BLOG (items plus larges) ---------- */
/* Nouveau markup recommandé */
.carousel.is-blog .carousel-track{ grid-auto-columns: minmax(350px, 1fr); }
@media (min-width:640px){  .carousel.is-blog .carousel-track{ grid-auto-columns: minmax(450px, 1fr); } }
@media (min-width:1024px){ .carousel.is-blog .carousel-track{ grid-auto-columns: minmax(450px, 1fr); } }

/* Compat ancien markup */
.carousel-track-blog{ grid-auto-columns: minmax(350px, 1fr); }
@media (min-width:640px){  .carousel-track-blog{ grid-auto-columns: minmax(450px, 1fr); } }
@media (min-width:1024px){ .carousel-track-blog{ grid-auto-columns: minmax(450px, 1fr); } }

/* Blog: laisse la hauteur s’adapter au contenu */
.carousel.is-blog .carousel-track,
.carousel-track-blog{
  align-items: start;
  overflow-y: visible;
}
.carousel.is-blog .carousel-item,
.carousel-track-blog .carousel-item-blog{ height: auto; }
.carousel.is-blog .vignette-card{ height:auto; }

/* (Option) ratio fixe pour les vignettes d’articles */
/* .carousel.is-blog .vignette-thumb{ aspect-ratio:16/9; } */

/* ---------- Navigation (flèches) ---------- */
.carousel-nav{
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: 10;

  inline-size: 40px; block-size: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow-sm);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition: background .18s ease, filter .18s ease, transform .12s ease, box-shadow .18s ease;
}
.carousel-nav:hover{ filter: brightness(.95); }
.carousel-nav:active{ transform: translateY(calc(-50% + 1px)); }

.carousel-nav.prev{ inset-inline-start: 8px; }
.carousel-nav.next{ inset-inline-end: 8px; }

/* États désactivés (gérés par JS) */
.carousel-nav[disabled],
.carousel-nav[aria-disabled="true"],
.carousel-nav.is-disabled{
  opacity:.45; pointer-events:none; filter: none; box-shadow:none;
}

@media (max-width:640px){ .carousel-nav{ display:none; } }

/* ---------- RTL (si html[dir="rtl"]) ---------- */
html[dir="rtl"] .carousel-nav.prev{ inset-inline-start: auto; inset-inline-end: 8px; }
html[dir="rtl"] .carousel-nav.next{ inset-inline-end: auto; inset-inline-start: 8px; }

/* =========================================================
   🎮 Consoles – chips centrés
   ========================================================= */
.consoles-carousel .carousel-track{
  grid-auto-columns: minmax(200px, max-content);
  align-items: center;
  gap: var(--gap);
  padding-block: 10px;
}
.consoles-carousel .carousel-item{ display:flex; height:auto !important; }

.consoles-carousel .console-chip{
  display:flex; align-items:center; justify-content:center;
  inline-size: 100%;
  min-block-size: 54px;
  padding: 10px 16px;

  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);

  color: var(--text);
  text-decoration: none;
  text-align: center;
  gap: 8px;
  white-space: nowrap;

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.consoles-carousel .console-chip:hover{
  transform: translateY(-2px);
  background: #fff;
  box-shadow: var(--shadow);
  border-color: #e2e8f0;
}
.consoles-carousel .console-chip:focus-visible{
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: 999px;
}
.consoles-carousel .console-chip-name{ font-weight: 600; font-size: .95rem; }

.consoles-carousel .carousel-nav.prev{ inset-inline-start: 8px; }
.consoles-carousel .carousel-nav.next{ inset-inline-end: 8px; }

@media (max-width:640px){
  .consoles-carousel .console-chip{ min-block-size:48px; padding:8px 14px; }
}

/* =========================================================
   Accessibilité / Motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .carousel-item,
  .carousel-item-blog,
  .carousel-nav{ transition: none; }
  .carousel-track,
  .carousel-track-blog{ scroll-behavior: auto; }
}