/*
 * Carrousel — pattern APG (03-composants.md).
 * Structure commune au hero, à "En ce moment" et à la carte fromages.
 * Bouton lecture/pause obligatoire (WCAG 2.2.2), flèches, pastilles.
 */

.carousel {
    position: relative;
    outline-offset: 6px;
}

.carousel__track-wrap {
    overflow: hidden;
    border-radius: var(--mr-r-xl);
}

.carousel__controls {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    align-items: center;
    margin-top: 22px;
}

/* Sélecteur composé (.carousel__play.arrow-btn) pour battre .arrow-btn seul
   en spécificité : ce bouton est ovale (largeur au contenu), pas rond. */
.carousel__play.arrow-btn {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: 44px;
    min-height: 44px;
    min-width: 44px;
    padding: 0 16px;
    white-space: nowrap;
    border-radius: var(--mr-r-pill);
    border: 2px solid var(--mr-brun);
    background: var(--mr-blanc);
    color: var(--mr-brun);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.carousel__play.arrow-btn:hover {
    background: var(--mr-rose-pale);
    color: var(--mr-brun);
    transform: translateY(-50%);
    box-shadow: none;
}

@media (max-width: 900px) {
    /* .carousel__play.arrow-btn:hover (ci-dessus) a une spécificité plus
       élevée (2 classes + 1 pseudo-classe) que .carousel__play.arrow-btn
       seul (2 classes) : sans le répéter ici, son transform:translateY(-50%)
       — pensé pour le centrage vertical du bouton en position absolute sur
       desktop — l'emportait quand même au survol/tap tactile en mobile,
       où le bouton est en position static (flux normal) et décalait donc
       visiblement le bouton de 22px vers le haut au clic (retour
       utilisateur : "le bouton se décale au clic en format téléphone"). */
    .carousel__play.arrow-btn,
    .carousel__play.arrow-btn:hover {
        position: static;
        transform: none;
        order: -1;
        flex: 1 0 100%;
        justify-content: center;
    }
}

.arrow-btn {
    width: 50px;
    height: 50px;
    border-radius: var(--mr-r-pill);
    border: 0;
    background: var(--mr-corail);
    color: var(--mr-blanc);
    font-size: 22px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s var(--mr-ease-bounce), box-shadow 0.2s ease;
}

.arrow-btn:hover {
    background: var(--mr-corail-fonce);
    transform: scale(1.09);
    box-shadow: 0 6px 16px rgba(196, 59, 35, 0.32);
}

.arrow-btn[aria-disabled='true'] {
    background: var(--mr-rose-2);
    color: #e8836e;
    cursor: default;
    transform: none;
    box-shadow: none;
}

/* Retour utilisateur : "les boutons des sliders ne s'adaptent pas en mode
   accessible" — .arrow-btn (flèches, bouton lecture/pause) et .slider-dot
   (pastilles), utilisés par tous les carrousels du site (hero, "En ce
   moment chez nous", carte fromages...), n'avaient encore aucune
   surcharge contraste : le corail sur blanc de .arrow-btn est sous le
   seuil AA pour un composant d'interface (~3:1 requis, ~2.96:1 mesuré), et
   .slider-dot (rose très clair) est à peine visible. Couleurs reprises à
   l'identique de la maquette ([data-contrast="high"] .arrow-btn/.slider-dot,
   Site.dc.html) : accent de marque foncé, jamais noir/blanc pur. */
html.a11y-contrast .arrow-btn,
html.a11y-enhanced .arrow-btn {
    background: var(--mr-a11y-vif) !important;
    color: var(--mr-blanc) !important;
    border: 2px solid var(--mr-blanc) !important;
    box-shadow: 0 0 0 2px var(--mr-a11y-vif) !important;
}

html.a11y-contrast .arrow-btn:hover,
html.a11y-enhanced .arrow-btn:hover {
    background: var(--mr-encre) !important;
    box-shadow: 0 0 0 2px var(--mr-encre) !important;
}

html.a11y-contrast .arrow-btn[aria-disabled='true'],
html.a11y-enhanced .arrow-btn[aria-disabled='true'] {
    background: var(--mr-blanc) !important;
    color: var(--mr-gris-texte) !important;
    border: 2px dashed var(--mr-gris-texte) !important;
    box-shadow: none !important;
}

html.a11y-contrast .slider-dot,
html.a11y-enhanced .slider-dot {
    background: var(--mr-blanc) !important;
    border: 2px solid var(--mr-encre);
}

html.a11y-contrast .slider-dot[aria-current='true'],
html.a11y-enhanced .slider-dot[aria-current='true'] {
    background: var(--mr-encre) !important;
}

.carousel__dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.slider-dot {
    height: 11px;
    width: 11px;
    border-radius: var(--mr-r-pill);
    border: 0;
    cursor: pointer;
    padding: 0;
    background: var(--mr-rose-2);
}

.slider-dot[aria-current='true'] {
    width: 28px;
    background: var(--mr-corail);
}

/* Zoom léger des visuels cliquables (survol/focus clavier). */
.zoom-link {
    overflow: hidden;
    display: block;
}

.zoom-link img {
    transition: transform var(--mr-duration-zoom) var(--mr-ease-expressive);
}

.zoom-link:hover img,
.zoom-link:focus-visible img {
    transform: scale(1.05);
}

.no-zoom:hover img,
.no-zoom:focus-visible img {
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .zoom-link img {
        transition: none !important;
        transform: none !important;
    }
}