/**
 * bijoux-a11y.css — Accessibilité WCAG 2.1 AA — iter 24 polish 3e passe
 * NE PAS MODIFIER bijoux-fixes.css ni bijoux-theme-claude.css
 */

/* ============================================================
   1. FOCUS VISIBLE — double outline (dark exterior + gold interior)
   ============================================================ */
*:focus-visible {
  outline: 3px solid var(--night, #0E0B1A) !important;
  outline-offset: 3px !important;
  box-shadow:
    0 0 0 1px var(--night, #0E0B1A),
    0 0 0 4px var(--gold, #D4B570),
    0 0 0 6px var(--night, #0E0B1A) !important;
}

*:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Sélecteurs spécifiques qui forcent outline:none dans d'autres CSS */
.page-authentication input:focus,
.page-authentication select:focus,
#identity input:focus,
#authentication input:focus,
#search_widget input[type="search"]:focus,
#search_widget input[type="text"]:focus,
.bhr-search-input:focus {
  outline: 3px solid var(--night, #0E0B1A) !important;
  outline-offset: 3px !important;
  box-shadow:
    0 0 0 1px var(--night, #0E0B1A),
    0 0 0 4px var(--gold, #D4B570),
    0 0 0 6px var(--night, #0E0B1A) !important;
}

/* Touchspin */
.bootstrap-touchspin-up:focus-visible,
.bootstrap-touchspin-down:focus-visible {
  outline: 3px solid var(--night, #0E0B1A) !important;
  outline-offset: 3px !important;
}

/* ============================================================
   2. SKIP LINK — visible at focus
   ============================================================ */
.skip-link {
  position: absolute;
  top: -9999px;
  left: 8px;
  z-index: 9999;
  background: var(--gold, #D4B570);
  color: var(--night, #0E0B1A);
  padding: 10px 20px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  border: 2px solid var(--night, #0E0B1A);
  transition: top 0.15s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: 3px solid var(--night, #0E0B1A);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--gold, #D4B570);
}

/* ============================================================
   3. SCREEN READER ONLY
   ============================================================ */
.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;
}

.sr-only-focusable:not(:focus):not(:active) {
  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;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* ============================================================
   4. LIENS DANS BLOCS DE TEXTE
   ============================================================ */
p a,
article a,
section a,
.page-content a,
.cms-block a,
.product-description a,
.product-additional-info a,
.rte a {
  text-decoration: underline;
  text-decoration-color: var(--gold, #D4B570);
  text-underline-offset: 3px;
}

p a.btn,
p a.bhr-btn,
p a.label,
p a.quick-view,
article a.btn,
section a.btn {
  text-decoration: none;
}

/* ============================================================
   5. ARIA-CURRENT PAGE
   ============================================================ */
[aria-current="page"],
[aria-current="page"] > a {
  text-decoration: underline;
  text-decoration-color: var(--gold, #D4B570);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  font-weight: 600;
}

/* ============================================================
   6. TOUCH TARGETS — min 44x44px
   ============================================================ */
a:not(.bhr-inline):not(.bhr-skip),
button,
[role="button"],
input[type="submit"],
input[type="reset"],
input[type="button"],
select,
label[for] {
  min-height: 44px;
  min-width: 44px;
}

p a,
article a,
.rte a,
.bhr-inline {
  min-height: unset;
  min-width: unset;
}

/* ============================================================
   7. ARIA-LIVE REGIONS — cart count / form errors
   ============================================================ */
[aria-live="polite"],
[aria-live="assertive"],
[role="status"],
[role="alert"],
.cart-preview-count,
#cart-subtotal-products,
.js-cart-count {
  /* Ensure live regions are announced by AT */
  speak: normal;
}

/* Erreurs de formulaire : visible + annoncé */
[role="alert"],
.alert-danger,
.has-error .help-block,
.form-error-message {
  font-weight: 600;
  border-left: 4px solid currentColor;
  padding-left: 0.75em;
}

/* ============================================================
   8. PREFERS-REDUCED-MOTION — strict mode (toutes animations off)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Carousel : stop auto-play + no slide */
  .carousel,
  .carousel .carousel-item,
  .carousel-inner {
    transition: none !important;
    animation: none !important;
  }

  /* Skip-link : pas de transition, position directe */
  .skip-link {
    transition: none !important;
  }

  /* Sliders / parallax / video auto-play */
  video[autoplay] {
    animation: none !important;
  }

  /* PS product thumbnails hover */
  .product-thumbnail img,
  .product-cover img {
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   9. ARIA-HIDDEN FOCUSABLE — empêcher focus dans nav mobile
   ============================================================ */
[aria-hidden="true"] *,
[aria-hidden="true"] {
  pointer-events: none !important;
}

#bhr-mobile-menu[aria-hidden="true"],
#bhr-mobile-menu[aria-hidden="true"] * {
  visibility: hidden;
  pointer-events: none !important;
}

/* ============================================================
   10. HIGH CONTRAST MODE (prefers-contrast: more) — renforcé
   ============================================================ */
@media (prefers-contrast: more) {
  :root {
    --gold: #C9A84C;
    --cream: #FFFDF5;
    --night: #000000;
  }

  *:focus-visible {
    outline: 4px solid #000 !important;
    outline-offset: 4px !important;
    box-shadow:
      0 0 0 2px #000,
      0 0 0 6px var(--gold, #C9A84C),
      0 0 0 8px #000 !important;
  }

  p a,
  article a,
  .rte a,
  .page-content a {
    text-decoration-thickness: 3px;
    text-decoration-color: currentColor;
  }

  .btn,
  .bhr-btn,
  button {
    border: 2px solid currentColor !important;
  }

  /* Form fields */
  input,
  select,
  textarea {
    border: 2px solid #000 !important;
  }

  /* Cart badge */
  .cart-products-count,
  .js-cart-count {
    outline: 2px solid #000;
  }
}

/* ============================================================
   11. FORCED COLORS MODE — Windows HCM (System tokens)
   ============================================================ */
@media (forced-colors: active) {
  /* Focus ring via system tokens */
  *:focus-visible {
    outline: 3px solid ButtonText !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
  }

  /* Skip link */
  .skip-link {
    background: ButtonFace;
    color: ButtonText;
    border: 2px solid ButtonText;
    forced-color-adjust: none;
  }

  /* Navigation courante */
  [aria-current="page"],
  [aria-current="page"] > a {
    text-decoration-color: LinkText;
    outline: 2px solid ButtonText;
  }

  /* Liens texte */
  p a,
  article a,
  .rte a {
    text-decoration-color: LinkText;
    color: LinkText;
  }

  /* Boutons */
  .btn,
  .bhr-btn,
  button,
  [role="button"] {
    forced-color-adjust: none;
    border: 2px solid ButtonText;
  }

  /* Images décoratives */
  img[aria-hidden="true"],
  .bhr-decorative {
    forced-color-adjust: auto;
  }

  /* Cart badge */
  .cart-products-count,
  .js-cart-count {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }

  /* Form inputs */
  input,
  select,
  textarea {
    border: 2px solid ButtonText;
    background: Field;
    color: FieldText;
  }

  /* Alerts */
  [role="alert"],
  .alert-danger {
    border: 2px solid ButtonText;
    color: ButtonText;
  }

  /* Live regions */
  [aria-live="assertive"] {
    forced-color-adjust: none;
    outline: 1px solid ButtonText;
  }
}

/* ============================================================
   12. KEYBOARD SHORTCUT HINTS — [aria-keyshortcuts] visible
   ============================================================ */
[aria-keyshortcuts]::after {
  content: " [" attr(aria-keyshortcuts) "]";
  font-size: 0.75em;
  opacity: 0.65;
  font-family: monospace;
  vertical-align: super;
  margin-left: 0.25em;
}

/* Sur focus seulement pour les éléments interactifs */
[aria-keyshortcuts]:not(:focus-visible)::after {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[aria-keyshortcuts]:focus-visible::after {
  position: static;
  display: inline;
  clip: auto;
  width: auto;
  height: auto;
  overflow: visible;
  white-space: normal;
  opacity: 0.8;
}