/*------------------------------------*\
  # ACCESSIBILITÉ
  Styles écrits à la main, chargés après dist/css/styles.css (compilé par Tailwind
  depuis assets/css/main.css : npm run tw:build).
\*------------------------------------*/

/* Lien d'évitement : invisible jusqu'à ce qu'il reçoive le focus clavier */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 10000;
  padding: 0.75rem 1rem;
  background: #000;
  color: #fff;
  font-weight: 700;
}
.skip-link:focus {
  top: 1rem;
}

/* Focus clavier visible partout, dans la couleur du texte pour contraster avec le fond */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Cible du lien d'évitement : pas de cadre autour de tout le contenu */
#contenu:focus {
  outline: none;
}

/* Bouton pause / lecture du carrousel d'accueil (WCAG 2.2.2) */
.carousel-toggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: #fff;
  color: #000;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
/* Sur une photo, le contour noir seul peut se perdre : on l'entoure de blanc */
.carousel-toggle:focus-visible {
  outline: 3px solid #000;
  outline-offset: 3px;
  box-shadow: 0 0 0 9px #fff;
}

/* Cartes spectacle : un seul lien (le titre), étendu à toute la carte */
.single-event {
  position: relative;
}
.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* Le contour de focus entoure toute la carte plutôt que le seul titre */
.card-link:focus-visible {
  outline: none;
}
.card-link:focus-visible::after {
  outline: 2px solid #000;
  outline-offset: 3px;
}

/*------------------------------------*\
  # CONTRASTES (WCAG 1.4.3 et 1.4.11)
\*------------------------------------*/

/* Flèches des galeries photo : rond sombre pour rester lisibles sur toutes les photos */
.swiper .swiper-button-prev,
.swiper .swiper-button-next,
.swiper-carousel .swiper-button-prev,
.swiper-carousel .swiper-button-next {
  width: 2.75rem;
  height: 2.75rem;
  margin-top: -1.375rem;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
}
.swiper .swiper-button-prev::after,
.swiper .swiper-button-next::after,
.swiper-carousel .swiper-button-prev::after,
.swiper-carousel .swiper-button-next::after {
  font-size: 1.125rem;
  font-weight: 700;
}

/* Flèches du carrousel d'accueil sur mobile : posées sur la photo, elles prennent
   un rond blanc comme le bouton pause (sur ordinateur, elles ont déjà un fond blanc) */
@media (max-width: 1023px) {
  .swiper-home .swiper-button-prev,
  .swiper-home .swiper-button-next {
    width: 3rem;
    height: 3rem;
    margin-top: -1.5rem;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  }
  .swiper-home .swiper-button-prev::after,
  .swiper-home .swiper-button-next::after {
    font-size: 1.125rem;
    font-weight: 700;
  }
}

/* Sous-menus colorés : texte à pleine opacité, la page en cours est soulignée */
@media (min-width: 1024px) {
  #menu-item-104 .sub-menu {
    color: #295d6b;
  }
  #menu-item-105 .sub-menu {
    color: #716f21;
  }
  #menu-item-4530 .sub-menu {
    color: #3b672a;
  }
  #menu-item-106 .sub-menu {
    color: #464995;
  }
}
.sub-menu .current-menu-item > a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Filtre actif des pages Saison : repéré par aria-current (dist/js/filter-events.js) */
.term-link[aria-current] {
  color: #000;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.bg-indigo-700 .term-link[aria-current] {
  color: #fff;
}

/* Champ de recherche : texte indicatif lisible (fond bleu clair en mobile, blanc sur ordinateur) */
.searchForm__input::placeholder {
  color: #4b5563;
  opacity: 1;
}
/* En mobile, le bouton n'a pas de fond : flèche et trait foncés sur le bleu clair */
@media (max-width: 1023px) {
  .searchForm__form {
    border-bottom-color: rgba(0, 0, 0, 0.6);
  }
  .searchForm__submit svg {
    stroke: #000;
  }
}

/* Formulaire newsletter (pied de page) : lien vers les mentions légales repérable sans la couleur */
#sib-rgpd a {
  text-decoration: underline;
}

/* Bouton CookieYes (bas gauche) et « Retour en haut » (bas droite) sont fixes : en mobile,
   les liens du pied de page, alignés à gauche, passaient dessous en fin de page */
@media (max-width: 767px) {
  footer nav[aria-label="Pied de page"] {
    padding-bottom: 5.5rem;
  }
}