/**
 * Slider : blocs owlic/slider*
 *
 * Chargée quand un bloc owlic/slider est rendu, via wp_enqueue_block_style()
 * dans inc/Assets/BlockStylesheets.php, ainsi que dans le canevas de l'éditeur. La zone
 * de défilement, les slides, les contrôles et la pagination ne vivent qu'à
 * l'intérieur d'un slider : cette feuille les couvre tous, et tout y est scopé
 * au slider pour qu'une boucle de requête placée ailleurs reste intacte.
 *
 * La mise en page reste en CSS : la largeur des slides découle ici du nombre de
 * slides visibles et de l'écart, posés en variables par le bloc slider. Swiper
 * tourne en slidesPerView 'auto' et se contente de mesurer les slides
 * (src/slider.ts) : rien ne bouge au démarrage du script, et l'écart suit les
 * presets d'espacement sans conversion en pixels. Seules les règles du cœur de
 * Swiper utiles à ce mode sont reprises, plutôt que d'importer swiper/css.
 */

/* ============================================
   Réglages
   ============================================ */

/* Valeurs par défaut, écrasées par les variables inline du bloc slider.
   Déclarées sur le slider lui-même pour qu'un slider imbriqué n'hérite pas des
   réglages de son parent. */
.wp-block-owlic-slider {
    --owlic-slider-gap: 0px;
    --owlic-slider-columns: var(--owlic-slider-per-view-mobile, 1);
}

/* Au-delà du point de rupture des colonnes de WordPress */
@media (min-width: 782px) {
    .wp-block-owlic-slider {
        --owlic-slider-columns: var(--owlic-slider-per-view, 1);
    }
}

/* ============================================
   Zone de défilement
   ============================================ */

/* Cœur de Swiper (swiper/swiper.css). Les classes sont posées par le bloc de
   zone de défilement ou, pour une boucle de requête, par inc/slider.php.
   Son overflow: hidden n'est volontairement pas repris : les slides peuvent
   déborder de la zone. Poser le rognage sur un conteneur parent si la page se
   met à défiler horizontalement. */
.wp-block-owlic-slider .swiper {
    position: relative;
    /* Corrige le scintillement sous WebKit */
    z-index: 1;
    display: block;
}

.wp-block-owlic-slider .swiper-horizontal {
    touch-action: pan-y;
}

.wp-block-owlic-slider .swiper-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: content-box;
    /* La liste d'articles d'une boucle de requête sert de wrapper */
    list-style: none;
    /* Swiper mesure les marges des slides, pas l'écart du conteneur : l'écart
       de mise en page de WordPress est neutralisé ici */
    gap: 0;
    transform: translate3d(0px, 0, 0);
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
}

.wp-block-owlic-slider .swiper-android .swiper-slide,
.wp-block-owlic-slider .swiper-ios .swiper-slide {
    transform: translate3d(0px, 0, 0);
}

.wp-block-owlic-slider .swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Région live du module A11y de Swiper : lue, jamais affichée */
.wp-block-owlic-slider .swiper-notification {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1000;
    opacity: 0;
    pointer-events: none;
}

/* ============================================
   Slides
   ============================================ */

/* La zone se partage entre les slides visibles, écarts déduits. L'écart est une
   marge : Swiper la mesure avec la slide. Les deux derniers sélecteurs sont les
   équivalents dans l'éditeur, où Swiper ne tourne pas. */
.wp-block-owlic-slider .swiper-slide,
.wp-block-owlic-slider-track.block-editor-block-list__layout > .wp-block,
.editor-styles-wrapper .wp-block-owlic-slider .wp-block-post-template > li {
    position: relative;
    flex-shrink: 0;
    box-sizing: border-box;
    width: calc((100% - (var(--owlic-slider-columns) - 1) * var(--owlic-slider-gap)) / var(--owlic-slider-columns));
    margin-inline-end: var(--owlic-slider-gap);
}

/* Sans quoi la dernière position laisserait un écart vide en bout de zone */
.wp-block-owlic-slider .swiper-slide:last-child {
    margin-inline-end: 0;
}

/* Les slides sont côte à côte : aucune marge haute entre elles, quelle que soit
   la règle de flux qui en pose une — le `* + *` de WordPress, les écarts du
   thème autour des titres (0,2,0) ou des groupes pleine largeur (0,3,0). Le
   wrapper porte la spécificité à (0,4,0) pour passer devant toutes. */
.wp-block-owlic-slider .swiper-wrapper > .swiper-slide + .swiper-slide,
.wp-block-owlic-slider-track.block-editor-block-list__layout > .wp-block + .wp-block,
.editor-styles-wrapper .wp-block-owlic-slider .wp-block-post-template > li + li {
    margin-block-start: 0;
}

/* Éditeur : les slides s'alignent en rangée défilante, pour rester toutes
   accessibles à l'édition. */
.wp-block-owlic-slider-track.block-editor-block-list__layout,
.editor-styles-wrapper .wp-block-owlic-slider .wp-block-post-template {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
}

.wp-block-owlic-slider-track.block-editor-block-list__layout > .block-list-appender {
    flex-shrink: 0;
    align-self: center;
}

/* ============================================
   Contrôles
   ============================================ */

/* Le bloc est une rangée flex (support layout) : son écart propre l'emporte
   sur celui, nul, des styles globaux */
.wp-block-owlic-slider .wp-block-owlic-slider-controls {
    gap: var(--wp--preset--spacing--8);
}

.wp-block-owlic-slider-controls__button {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* WCAG 2.5.5 : taille de cible minimum 44x44px */
    width: var(--wp--preset--spacing--48);
    height: var(--wp--preset--spacing--48);
    margin: 0;
    padding: 0;
    border: 1px solid var(--wp--custom--color--border);
    border-radius: var(--wp--preset--border-radius--pill);
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--gray-1000);
    cursor: pointer;
    transition: background-color var(--wp--custom--motion--duration-fast) ease-out, color var(--wp--custom--motion--duration-fast) ease-out, opacity var(--wp--custom--motion--duration-fast) ease-out;
}

.wp-block-owlic-slider-controls__button svg {
    display: block;
    width: var(--wp--preset--spacing--24);
    height: var(--wp--preset--spacing--24);
}

.wp-block-owlic-slider-controls__button:hover:not(:disabled) {
    background-color: var(--wp--preset--color--gray-1000);
    color: var(--wp--preset--color--white);
}

/* Première ou dernière position atteinte, hors boucle : Swiper désactive le
   bouton */
.wp-block-owlic-slider-controls__button:disabled {
    cursor: default;
    opacity: 0.4;
}

/* Toutes les slides tiennent dans la zone : Swiper verrouille la navigation */
.wp-block-owlic-slider-controls__button.swiper-button-lock {
    display: none;
}

/* ============================================
   Pagination
   ============================================ */

/* Rangée flex (support layout). La hauteur d'une puce est réservée avant que
   Swiper ne les crée, pour que la page ne bouge pas à son démarrage. */
.wp-block-owlic-slider .wp-block-owlic-slider-pagination {
    gap: var(--wp--preset--spacing--4);
    min-height: var(--wp--preset--spacing--24);
    color: var(--wp--preset--color--gray-1000);
}

/* Chaque puce est un bouton de 24px (WCAG 2.5.8) dont seul le point central
   est dessiné */
.wp-block-owlic-slider-pagination .swiper-pagination-bullet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--wp--preset--spacing--24);
    height: var(--wp--preset--spacing--24);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--wp--preset--border-radius--pill);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

/* Cerclé au repos, plein une fois actif : l'état se lit à la forme, pas
   seulement à la couleur (WCAG 1.4.1 et 1.4.11) */
.wp-block-owlic-slider-pagination .swiper-pagination-bullet::before {
    content: "";
    box-sizing: border-box;
    width: var(--wp--preset--spacing--8);
    height: var(--wp--preset--spacing--8);
    border: 1px solid currentColor;
    border-radius: var(--wp--preset--border-radius--pill);
    background-color: transparent;
    transition: background-color var(--wp--custom--motion--duration-fast) ease-out;
}

.wp-block-owlic-slider-pagination .swiper-pagination-bullet-active::before {
    background-color: currentColor;
}

/* Toutes les slides tiennent dans la zone : Swiper verrouille la pagination */
.wp-block-owlic-slider-pagination.swiper-pagination-lock {
    display: none;
}

@media (forced-colors: active) {
    .wp-block-owlic-slider-pagination .swiper-pagination-bullet-active::before {
        forced-color-adjust: none;
        background-color: CanvasText;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-owlic-slider-controls__button,
    .wp-block-owlic-slider-pagination .swiper-pagination-bullet::before {
        transition: none;
    }
}