/**
 * Accessible Slider Styles
 * Styles pour le bouton pause/play du carrousel accessible RGAA
 */

:root {
    --a11y-slider-btn-bg: #E11709;
    --a11y-slider-btn-color: #fff;
    --a11y-slider-btn-bg-hover: #c5303d;
    --a11y-slider-btn-size: 50px;
}

/* Bouton Pause/Play - positionné à droite de la flèche prev */
button.a11y-pause-button {
    background: var(--a11y-slider-btn-bg) !important;
    border: none !important;
    border-radius: 50% !important;
    width: var(--a11y-slider-btn-size) !important;
    height: var(--a11y-slider-btn-size) !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--a11y-slider-btn-color) !important;
    transition: background-color 0.2s ease !important;
    /* Positionnement */
    position: absolute !important;
    left: 65px !important; /* 50px (bouton) + 15px (gap) */
    bottom: -67px !important; /* descendre au niveau des flèches */
    z-index: 10 !important;
}

button.a11y-pause-button:hover,
button.a11y-pause-button:focus {
    background: var(--a11y-slider-btn-bg-hover) !important;
}

button.a11y-pause-button:focus {
    outline: 2px solid var(--a11y-slider-btn-bg) !important;
    outline-offset: 2px !important;
}

button.a11y-pause-button svg {
    width: 20px !important;
    height: 20px !important;
}