/* =========================================================================
   Accessibilité — feuille de styles du thème enfant
   Audit Sélestat Haut-Kœnigsbourg Tourisme, 17 août 2026 (RGAA 4.1.2 / AA)

   Chargée après le thème parent et le kit de style d'Elementor.
   ========================================================================= */


/* -------------------------------------------------------------------------
   Utilitaire — texte réservé aux technologies d'assistance

   Support des intitulés ajoutés côté serveur (critères 6.1, 6.2, 7.1).
   Surtout pas display:none ni visibility:hidden, qui retirent le texte de
   l'arbre d'accessibilité et annulent le correctif.
   ---------------------------------------------------------------------- */

.dn-a11y-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Rendu visible à la prise de focus, si l'élément lui-même est focalisable. */
.dn-a11y-sr:focus,
.dn-a11y-sr:focus-visible {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}


/* -------------------------------------------------------------------------
   Critère 10.7 — Prise de focus visible

   Filet de sécurité à l'échelle du thème. L'audit ne relève que 2 champs en
   défaut sur 74 à 118 éléments focalisables, mais la règle globale évite que
   le prochain composant ajouté ne rouvre le même écart.

   !important est nécessaire : il s'agit d'écraser des « outline: none »
   posés par le thème et par des widgets. :focus-visible réserve l'indicateur
   au parcours clavier — la souris ne le déclenche pas.
   ---------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[contenteditable="true"]:focus-visible,
.elementor-button:focus-visible {
  outline: 3px solid #1d4ed8 !important;
  outline-offset: 2px !important;
  /* Liseré clair : garantit le contraste de l'indicateur sur fond sombre. */
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .85) !important;
}

/* Navigateurs sans :focus-visible — l'indicateur reste présent au clavier. */
@supports not selector(:focus-visible) {
  a:focus,
  button:focus,
  input:focus,
  select:focus,
  textarea:focus,
  [tabindex]:focus {
    outline: 3px solid #1d4ed8 !important;
    outline-offset: 2px !important;
  }
}


/* -------------------------------------------------------------------------
   Pagination — surface de la cible (anticipation WCAG 2.2, critère 2.5.8)

   Mesuré sur le Blog : 9 × 22 px pour les numéros, 0 × 22 px pour le lien de
   page précédente. La règle n'impose pas d'agrandir le visuel, seulement la
   surface cliquable.
   ---------------------------------------------------------------------- */

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: .35rem .6rem;
  /* Évite que deux cibles adjacentes ne se touchent. */
  margin: 0 .15rem;
}


/* -------------------------------------------------------------------------
   Critère 3.3 — Contraste des composants d'interface

   À COORDONNER avec le chantier sur le plugin d'annuaire : la règle vise des
   sélecteurs `bridge-*`, mais elle n'a pas sa place dans leurs modèles — un
   contour de champ est une affaire de feuille de styles.

   Champs du moteur de recherche : aucun fond propre sur quatre niveaux de
   conteneurs, donc aucune délimitation perceptible. #64748b sur #ffffff
   mesure 4,76:1, au-delà du seuil de 3:1 exigé pour un composant.
   ---------------------------------------------------------------------- */

.bridge-moteur-section input[type="text"],
.bridge-moteur-section input[type="search"],
.bridge-moteur-section select {
  border: 1px solid #64748b;
  border-radius: 4px;
  background-color: #fff;
}


/* -------------------------------------------------------------------------
   Respect des préférences de mouvement
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}