/* =========================================================================
   CYBERGEAR - ERGONOMIC MICRO-OVERRIDE (v2 CONSERVATEUR — 2026-04-17)

   PRINCIPE: ne JAMAIS toucher aux layouts produits, images, prix, formulaires.
   Uniquement ameliorations a11y + tap targets + focus + skip link.

   Ce fichier est volontairement petit et sans !important agressif.
   Aucune regle ne peut masquer du texte, clipper un layout ou changer la
   couleur rouge des promotions.
   ========================================================================= */

/* ---------- 1. FOCUS VISIBLE (WCAG 2.4.7) ---------- */
/* Applique uniquement sur focus clavier, pas sur focus souris */
*:focus-visible {
  outline: 3px solid #e0a63e;
  outline-offset: 2px;
  border-radius: 4px;
}
/* Suppression outline souris (UX moderne) */
*:focus:not(:focus-visible) {
  outline: none;
}

/* ---------- 2. SKIP LINK (a11y clavier) ---------- */
.skip-to-main, a.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  background: #e0a63e;
  color: #0a1628;
  padding: 12px 20px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}
.skip-to-main:focus, a.skip-link:focus {
  left: 0;
}

/* ---------- 3. TAP TARGETS MOBILE (Apple HIG 44x44, Material 48x48) ---------- */
/* Uniquement sur mobile pour ne pas affecter desktop */
@media (max-width: 768px) {
  /* Icon-only nav buttons: elargir la HITBOX sans changer la taille visuelle */
  nav a, nav button,
  header a, header button,
  footer a[href*="facebook"],
  footer a[href*="instagram"],
  footer a[href*="linkedin"],
  footer a[href*="twitter"],
  footer a[href*="youtube"] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Pagination buttons mobile */
  .pagination a, .pagination button, .pagination .page-link {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ---------- 4. REDUCE-MOTION (WCAG 2.3.3) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 5. SCROLL SMOOTH ---------- */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- 6. FLOATING "AFFINEZ" BUTTON FIX (reconditionne mobile) ---------- */
/* Empeche le bouton flottant de chevaucher les produits
   - Repositionne au bas centre avec marge safe
   - Ne modifie PAS la couleur/taille du bouton, juste sa position */
@media (max-width: 768px) {
  .floating-filter-btn,
  [class*="affinez" i],
  button[class*="filter-toggle" i] {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  }
}

/* ---------- 7. INVISIBLE CONTENT SAFETY NETS ---------- */
/* Ensure no element ends up with display:none accidentally from cascading
   or that the product titles remain visible even if inner spans get color:white */
.product-title, h3.product-title, .product-card .product-title,
[class*="product-card"] [class*="title"],
[class*="product-card"] [class*="name"] {
  /* Safety: ensure readable color and min-opacity */
  opacity: 1;
  visibility: visible;
}

/* ---------- 8. IMG ALT SAFETY ---------- */
/* Afficher un placeholder lisible pour les images brisees sans alt (a11y) */
img:not([alt]) {
  outline: 2px dashed #b42222;
}

/* ---------- 9. FORM LABEL VISIBILITY (a11y) ---------- */
/* Si un label est masque par accident, le garder accessible (sr-only) */
label.visually-hidden, label.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;
}

/* ---------- 10. PRINT STYLES ---------- */
@media print {
  nav, footer, [class*="chat"], button, .btn:not([download]),
  [class*="cookie"], [class*="floating"] {
    display: none !important;
  }
  body { background: white; color: black; }
  a { text-decoration: underline; }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}

/* ---------- 11. HIGH CONTRAST MODE SUPPORT (Windows) ---------- */
@media (prefers-contrast: more) {
  a, button, .btn {
    text-decoration: underline;
  }
  *:focus-visible {
    outline-width: 4px;
  }
}

/* ---------- 12. REDUCE DATA (slow connexion) ---------- */
@media (prefers-reduced-data: reduce) {
  img { image-rendering: auto; }
  video, [class*="bg-video"] { display: none; }
}