/**
 * Repli des carrousels lorsque Swiper ne s'initialise pas.
 *
 * Couvre les trois carrousels de la page d'accueil et le diaporama photo des
 * fiches établissement.
 *
 * Le CSS de Swiper 8 met .swiper en overflow:hidden, .swiper-wrapper en rangée
 * flex non sécable et .swiper-slide en width:100%;flex-shrink:0. Tant que le
 * script n'a pas tourné, les slides débordent donc à droite et sont rognées :
 * seule la première reste visible, sans aucun moyen d'atteindre les autres.
 *
 * Swiper pose la classe .swiper-initialized sur le conteneur au moment où il
 * démarre. Tout ce qui suit ne s'applique donc qu'en son absence — JavaScript
 * désactivé, script en échec, CDN unpkg injoignable, ou simplement avant que le
 * DOM ready du thème parent n'ait eu lieu — et disparaît dès que le carrousel
 * prend la main. Aucun comportement de carrousel n'est modifié.
 *
 * La grille est préférée au défilement horizontal natif : une zone scrollable
 * n'est pas focusable au clavier sous Chrome sans tabindex, alors qu'un retour
 * à la ligne rend chaque slide atteignable par simple tabulation sur les liens.
 *
 * Chargée après styles.min.css et swiper-bundle.min.css, d'où l'absence de
 * !important : la spécificité et l'ordre de cascade suffisent.
 */

/* Le conteneur ne rogne plus ce qui dépasse. */
.page-template-home .hero-slider:not(.swiper-initialized),
.page-template-home .events-slider:not(.swiper-initialized),
.page-template-home .actus-slider:not(.swiper-initialized) {
    overflow: visible;
}

/* Le wrapper passe de la rangée flex non sécable à une grille. */
.page-template-home .hero-slider:not(.swiper-initialized) .swiper-wrapper,
.page-template-home .events-slider:not(.swiper-initialized) .swiper-wrapper,
.page-template-home .actus-slider:not(.swiper-initialized) .swiper-wrapper {
    display: grid;
    gap: 15px;
    height: auto;
    transform: none;
}

/* Les visuels du héro s'empilent, les cartes se répartissent en colonnes. */
.page-template-home .hero-slider:not(.swiper-initialized) .swiper-wrapper {
    grid-template-columns: 1fr;
}

.page-template-home .events-slider:not(.swiper-initialized) .swiper-wrapper,
.page-template-home .actus-slider:not(.swiper-initialized) .swiper-wrapper {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* Les slides reviennent dans le flux : ni largeur imposée, ni hauteur héritée
   d'un wrapper qui n'a plus de hauteur propre. Les règles de home.scss visant
   .event et .actu restent prioritaires, leurs cartes gardent leur gabarit. */
.page-template-home .hero-slider:not(.swiper-initialized) .swiper-slide,
.page-template-home .events-slider:not(.swiper-initialized) .swiper-slide,
.page-template-home .actus-slider:not(.swiper-initialized) .swiper-slide {
    position: relative;
    width: auto;
    height: auto;
    flex-shrink: 1;
}

/* En carrousel, chaque visuel du héro fait calc(100vh - 230px) : empilés, les
   cinq slides donneraient une page démesurée. On plafonne donc leur hauteur.
   Sélecteur calqué sur celui de home.scss, :not() en plus, pour le supplanter. */
.page-template-home section.hero .hero-slider:not(.swiper-initialized) .swiper-wrapper img.swiper-slide {
    height: 220px;
}

@media only screen and (min-width: 650px) {
    .page-template-home section.hero .hero-slider:not(.swiper-initialized) .swiper-wrapper img.swiper-slide {
        height: 320px;
    }
}

/* Commandes inopérantes sans script. display:none les retire aussi de l'ordre
   de tabulation : ce sont des <button>, les laisser visibles offrirait des
   cibles au clavier qui ne feraient rien. Le contenu reste atteignable, il est
   intégralement affiché juste au-dessus. */
.page-template-home .hero-slider:not(.swiper-initialized) .hero-nav-btn,
.page-template-home .hero-slider:not(.swiper-initialized) .hero-pagination {
    display: none;
}

/* Les flèches Agenda et Actus sont des frères du conteneur .swiper, et non ses
   descendants : d'où le combinateur ~ plutôt qu'une descendance. */
.page-template-home .events-container .swiper:not(.swiper-initialized) ~ .swiper-nav-btn,
.page-template-home .actus-container .swiper:not(.swiper-initialized) ~ .swiper-nav-btn {
    display: none;
}

/**
 * Diaporama photo des fiches établissement (#single-medias-slider).
 *
 * Mêmes causes et même remède que sur l'accueil : sans initialisation, seule la
 * première photo est visible et rien ne permet d'atteindre les suivantes. Les
 * photos sont pourtant toutes présentes dans le HTML, avec leur alternative
 * textuelle : il suffit de les remettre dans le flux pour qu'elles soient
 * consultables sans script.
 *
 * Le préfixe reprend la chaîne de single.scss afin de passer devant ses règles
 * comme devant celles de swiper-bundle.min.css.
 */
.single .page-container section.single-header .single-slider .single-medias-slider:not(.swiper-initialized) {
    overflow: visible;
}

.single .page-container section.single-header .single-slider .single-medias-slider:not(.swiper-initialized) .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 15px;
    height: auto;
    transform: none;
}

.single .page-container section.single-header .single-slider .single-medias-slider:not(.swiper-initialized) .swiper-slide {
    position: relative;
    height: auto;
    flex-shrink: 1;
}

/* Puces de pagination inopérantes sans script, et sœurs du conteneur .swiper. */
.single .page-container section.single-header .single-slider .single-medias-slider:not(.swiper-initialized) ~ .swiper-pagination {
    display: none;
}

/**
 * Flèches Agenda et Actus devenues de vrais <button>.
 *
 * Portée volontairement limitée à ces deux conteneurs : la même classe sert au
 * carrousel « Découvrir » du pied de page, qui n'entre pas dans le périmètre.
 */
.page-template-home .events-container .swiper-nav-btn,
.page-template-home .actus-container .swiper-nav-btn {
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.page-template-home .events-container .swiper-nav-btn:focus-visible,
.page-template-home .actus-container .swiper-nav-btn:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

/* Repli pour les navigateurs sans :focus-visible */
.page-template-home .events-container .swiper-nav-btn:focus,
.page-template-home .actus-container .swiper-nav-btn:focus {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

.page-template-home .events-container .swiper-nav-btn:focus:not(:focus-visible),
.page-template-home .actus-container .swiper-nav-btn:focus:not(:focus-visible) {
    outline: none;
}