/* Composant : carrousel des joueuses. Utilise les variables de style.css (couleurs, polices, espacements).

   Trois photos visibles : la centrale (data-pos="0") est mise en avant, la précédente et la suivante
   (data-pos="-1" et "1") restent de chaque côté, plus petites et estompées. Les autres attendent hors champ
   (data-pos="cache-gauche" ou "cache-droite", opacité nulle). carousel.js pose data-pos, le CSS place les photos.
   Seuls transform et opacity sont animés (jamais width ni left). Le carrousel est prévu pour un fond bleu nuit (.on-dark). */

.carrousel { --car-dur: 560ms; position: relative; color: var(--bg); }

/* ===== Sans JavaScript : toutes les photos en grille, sans commandes ===== */
.carrousel__scene { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
@media (min-width: 720px) { .carrousel__scene { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.carrousel__fig { margin: 0; }
.carrousel__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--navy-2); }
.carrousel__photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; -webkit-user-drag: none; user-select: none; }

/* Légende sous la photo : « N° 10 » ou « Nationale 2 », avec une bande inclinée comme celles du logo */
.carrousel__legende { margin: 14px 0 0; text-align: center; white-space: nowrap; }
.carrousel__legende span { display: inline-flex; align-items: center; gap: .32em; font: 700 1.5rem/1 var(--font-title); letter-spacing: .03em; text-transform: uppercase; }
.carrousel__legende span::before { content: ""; flex: none; width: .26em; height: .8em; background: var(--yellow); transform: skewX(-17deg); }
.carrousel__legende small { display: block; margin-top: 6px; font: 500 .8125rem/1.3 var(--font-body); letter-spacing: .02em; color: color-mix(in srgb, var(--bg) 84%, var(--navy)); }
.carrousel__legende small:empty { display: none; }

/* Commandes : boutons carrés (cible tactile de 48 px), cachées tant que le script n'est pas prêt */
.carrousel__commandes { display: none; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.carrousel__btn { display: grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0; border: 2px solid color-mix(in srgb, var(--bg) 72%, transparent); border-radius: 0; background: transparent; color: var(--bg); font-size: 1.1rem; line-height: 1; cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: manipulation; }
.carrousel__btn--play { margin-right: 8px; }
.carrousel__btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 0; }
.carrousel__btn:active { transform: scale(.94); }
@media (hover: hover) { .carrousel__btn:hover { background: var(--yellow); border-color: var(--yellow); color: var(--on-yellow); } }
.carrousel.is-paused .carrousel__btn--play { background: var(--yellow); border-color: var(--yellow); color: var(--on-yellow); }
.carrousel__compteur { min-width: 4.75rem; margin: 0; text-align: center; font: 600 1.5rem/1 var(--font-title); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.carrousel__compteur span:last-child { color: color-mix(in srgb, var(--bg) 78%, var(--navy)); }

/* ===== Avec JavaScript : la scène à trois photos ===== */
.carrousel.is-ready .carrousel__commandes { display: flex; }
.carrousel.is-ready .carrousel__stage { container-type: inline-size; overflow: hidden; overflow: clip; }
.carrousel.is-ready .carrousel__scene {
  --car-w: min(56cqw, 380px);        /* largeur de la photo centrale : 56 % de la scène, plafonnée sur grand écran */
  --car-sl: .8;                      /* échelle des photos latérales */
  --car-dx: min(calc(var(--car-w) * .94), calc((100cqw - var(--car-w) * var(--car-sl)) / 2));  /* écart du centre aux latérales : elles ne dépassent jamais la scène */
  position: relative; isolation: isolate; display: block;
  height: calc(var(--car-w) * 1.25 + 5rem);   /* photo 4:5 + légende : la hauteur ne change jamais */
  touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.carrousel.is-ready .carrousel__slide {
  position: absolute; top: 0; left: calc(50% - var(--car-w) / 2); width: var(--car-w);
  transform-origin: 50% calc(var(--car-w) * .625);   /* centre de la photo */
  transform: translateX(var(--car-x, 0px)) scale(var(--car-s, 1));
  opacity: var(--car-o, 0); z-index: var(--car-z, 1);
  pointer-events: none;
}
.carrousel.is-ready .carrousel__photo { opacity: var(--car-po, 1); }
.carrousel.is-ready .carrousel__legende { opacity: var(--car-lo, 1); }

.carrousel.is-ready .carrousel__slide[data-pos="0"]  { --car-x: 0px; --car-s: 1; --car-o: 1; --car-z: 30; --car-po: 1; --car-lo: 1; }
.carrousel.is-ready .carrousel__slide[data-pos="-1"] { --car-x: calc(var(--car-dx) * -1); --car-s: var(--car-sl); --car-o: 1; --car-z: 20; --car-po: .5; --car-lo: 0; }
.carrousel.is-ready .carrousel__slide[data-pos="1"]  { --car-x: var(--car-dx); --car-s: var(--car-sl); --car-o: 1; --car-z: 20; --car-po: .5; --car-lo: 0; }
.carrousel.is-ready .carrousel__slide[data-pos="cache-gauche"] { --car-x: calc(var(--car-dx) * -1.7); --car-s: .6; --car-o: 0; --car-z: 10; --car-po: .5; --car-lo: 0; }
.carrousel.is-ready .carrousel__slide[data-pos="cache-droite"] { --car-x: calc(var(--car-dx) * 1.7); --car-s: .6; --car-o: 0; --car-z: 10; --car-po: .5; --car-lo: 0; }

/* Seules les trois photos visibles réagissent à la souris ; les latérales se cliquent pour revenir au centre */
.carrousel.is-ready .carrousel__slide[data-pos="0"] .carrousel__photo,
.carrousel.is-ready .carrousel__slide[data-pos="-1"] .carrousel__photo,
.carrousel.is-ready .carrousel__slide[data-pos="1"] .carrousel__photo { pointer-events: auto; }
.carrousel.is-ready .carrousel__slide[data-pos="-1"] .carrousel__photo,
.carrousel.is-ready .carrousel__slide[data-pos="1"] .carrousel__photo { cursor: pointer; }
@media (hover: hover) {
  .carrousel.is-ready .carrousel__slide[data-pos="-1"] .carrousel__photo:hover,
  .carrousel.is-ready .carrousel__slide[data-pos="1"] .carrousel__photo:hover { opacity: .8; }
}

/* Transitions : activées après le premier affichage (carousel.js pose .is-anim), pour que les photos ne « volent » pas à l'ouverture.
   Le z-index bascule en cours de route, quand les deux photos qui se croisent ont la même taille. */
.carrousel.is-anim .carrousel__slide { transition: transform var(--car-dur) var(--ease), opacity var(--car-dur) var(--ease), z-index 0s linear 60ms; }
.carrousel.is-anim .carrousel__photo,
.carrousel.is-anim .carrousel__legende { transition: opacity var(--car-dur) var(--ease); }
.carrousel.is-anim .carrousel__btn { transition: transform .15s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .carrousel.is-anim .carrousel__slide,
  .carrousel.is-anim .carrousel__photo,
  .carrousel.is-anim .carrousel__legende,
  .carrousel.is-anim .carrousel__btn { transition: none; }
}

.carrousel.is-ready .carrousel__legende span { font-size: 2rem; }

/* Navigateurs sans unités de conteneur (cqw) : même mise en page, calculée sur la largeur de la fenêtre */
@supports not (width: 1cqw) {
  .carrousel.is-ready .carrousel__scene {
    --car-w: min(56vw, 380px);
    --car-dx: min(calc(var(--car-w) * .94), calc((100vw - 32px - var(--car-w) * var(--car-sl)) / 2));
  }
}