/**
 * Yerres – Correctifs d’accessibilité – CSS front
 * Version: 1.0.0
 *
 * Objectifs RGAA principaux :
 * - 10.7 : focus visible ;
 * - 12.7 : lien d’évitement ;
 * - 10.4 / 10.11 : limiter les pertes de contenu au zoom lorsque possible.
 */

:root {
  --yerres-a11y-focus-inner: #ffffff;
  --yerres-a11y-focus-outer: rgba(0, 0, 0, 0.88);
  --yerres-a11y-skip-offset-desktop: 93px;
  --yerres-a11y-skip-offset-mobile: 66px;
}

@media (max-width: 767px) {
  :root {
    --yerres-a11y-sticky-offset: var(--yerres-a11y-skip-offset-mobile);
  }
}

@media (min-width: 768px) {
  :root {
    --yerres-a11y-sticky-offset: var(--yerres-a11y-skip-offset-desktop);
  }
}

html {
  scroll-padding-top: var(--yerres-a11y-sticky-offset);
}

#main-content,
#content,
main,
[role="main"] {
  scroll-margin-top: var(--yerres-a11y-sticky-offset);
}

/**
 * Lien d’évitement.
 * Visible uniquement à la prise de focus clavier.
 */
.yerres-skip-link,
a.skip-link.screen-reader-text {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

.yerres-skip-link:focus,
a.skip-link.screen-reader-text:focus {
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  padding: 10px 14px;
  background: #ffffff;
  color: #000000;
  border: 2px solid currentColor;
  border-radius: 8px;
  z-index: 999999;
  white-space: normal;
  text-decoration: none;
}

/**
 * Focus visible global.
 * On restaure un focus robuste malgré les règles historiques du thème qui font outline:0.
 */
:where(
  a,
  button,
  input,
  select,
  textarea,
  summary,
  [role="button"],
  [role="link"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 2px solid var(--yerres-a11y-focus-inner) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--yerres-a11y-focus-outer) !important;
}

:where(
  a,
  button,
  input,
  select,
  textarea,
  summary,
  [role="button"],
  [role="link"],
  [tabindex]:not([tabindex="-1"])
):focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/**
 * JetEngine cards avec lien overlay : éviter double contour.
 */
a.jet-engine-listing-overlay-link:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

@supports selector(.x:has(a:focus-visible)) {
  .jet-engine-listing-overlay-wrap:has(> a.jet-engine-listing-overlay-link:focus-visible) {
    box-shadow: 0 0 0 2px var(--yerres-a11y-focus-inner), 0 0 0 5px var(--yerres-a11y-focus-outer) !important;
    position: relative;
    z-index: 5;
  }
}

/**
 * Classe utilitaire pour contenus accessibles uniquement aux technologies d’assistance.
 */
.yerres-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}