/* ═══════════════════════════════════════════════════════════════════
   Eatalia v6.20.8 — Patches Accessibilité WCAG 2.2 AA
   ═══════════════════════════════════════════════════════════════════
   
   Ce fichier corrige les anti-patterns d'accessibilité présents dans
   les CSS hérités. Il est chargé EN DERNIER pour écraser les outline:none
   et autres règles non conformes.
   
   Conformité ciblée :
   - WCAG 2.2 AA (obligatoire ERP/restauration FR depuis décret 09/10/2023)
   - RGAA 4.1 (Référentiel Général d'Amélioration de l'Accessibilité)
   - Décret 2019-768 du 24 juillet 2019
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────
   1. FOCUS VISIBLE — WCAG 2.4.7 (AA, Level AA)
   ─────────────────────────────────────────────────────────────────── */

/* Override de tous les outline:none hérités */
*:focus-visible {
  outline: 3px solid var(--col-primary, #C4572E) !important;
  outline-offset: 3px !important;
  border-radius: 3px;
}

/* Boutons custom ont besoin d'un offset négatif pour ne pas casser le design */
button:focus-visible,
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--col-accent, #CE9426) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(206, 148, 38, 0.25) !important;
}

/* Liens en focus : contour terracotta + soulignement renforcé */
a:focus-visible {
  outline: 3px solid var(--col-primary, #C4572E) !important;
  outline-offset: 3px !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
}

/* Champs de formulaire : bordure terracotta épaisse + halo */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--col-primary, #C4572E) !important;
  outline-offset: 0 !important;
  border-color: var(--col-primary, #C4572E) !important;
  box-shadow: 0 0 0 4px rgba(196, 87, 46, 0.15) !important;
}

/* Cas spécial : on retire l'outline UNIQUEMENT en focus souris (pas clavier) */
*:focus:not(:focus-visible) {
  outline: none;
}

/* ───────────────────────────────────────────────────────────────────
   2. SKIP LINK — WCAG 2.4.1 (A, Level A)
   ─────────────────────────────────────────────────────────────────── */

/* Conteneur multi-skip-links (v6.20.9) */
.eap-skip-links {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 100001;
  display: flex;
  gap: 0.5rem;
  padding: 1rem;
}

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: 1rem;
  z-index: 100001;
  padding: 1rem 1.5rem;
  background: var(--col-primary, #C4572E);
  color: #FFFFFF !important;
  text-decoration: none !important;
  font-weight: 700;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: inset-block-start 0.2s ease;
  white-space: nowrap;
}
/* Décaler les skip-links suivants pour qu'ils ne se superposent pas au focus */
.eap-skip-links .skip-link:nth-child(2):focus,
.eap-skip-links .skip-link:nth-child(2):focus-visible { inset-inline-start: 18rem; }
.eap-skip-links .skip-link:nth-child(3):focus,
.eap-skip-links .skip-link:nth-child(3):focus-visible { inset-inline-start: 33rem; }

.skip-link:focus,
.skip-link:focus-visible {
  inset-block-start: 1rem;
  outline: 3px solid #FFFFFF !important;
  outline-offset: 3px !important;
}

/* Mobile : empiler verticalement */
@media (max-width: 768px) {
  .eap-skip-links .skip-link:focus,
  .eap-skip-links .skip-link:focus-visible {
    inset-inline-start: 1rem !important;
  }
  .eap-skip-links .skip-link:nth-child(2):focus { inset-block-start: 5rem; }
  .eap-skip-links .skip-link:nth-child(3):focus { inset-block-start: 9rem; }
}

/* ───────────────────────────────────────────────────────────────────
   3. CIBLES TACTILES MIN. 44×44px — WCAG 2.5.8 (AA, Level AA - WCAG 2.2)
   ─────────────────────────────────────────────────────────────────── */

button,
.btn,
.btn-primary,
.btn-secondary,
.add-to-cart-btn,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"],
.eap-product-card__quick-add,
.eap-drawer__close,
.eap-search__close {
  min-height: 44px;
  min-width: 44px;
}

/* Petites icônes interactives : si vraiment plus petites visuellement,
   on agrandit la zone cliquable invisible avec ::before */
.footer-social-link {
  position: relative;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ───────────────────────────────────────────────────────────────────
   4. PREFERS-REDUCED-MOTION — WCAG 2.3.3 (AAA mais best practice)
   ─────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Désactive les animations scroll-driven */
  .reveal,
  .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  /* Désactive le ticker de l'infobar */
  .eap-infobar--mode-ticker .eap-infobar__ticker-track {
    animation: none !important;
  }
}

/* ───────────────────────────────────────────────────────────────────
   5. SCREEN-READER ONLY — pour les libellés non-visuels
   ─────────────────────────────────────────────────────────────────── */

.screen-reader-text,
.sr-only {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus,
.sr-only:focus {
  background-color: var(--col-bg, #FBF8F2);
  clip: auto !important;
  -webkit-clip-path: none;
  clip-path: none;
  color: var(--col-ink, #3D3024);
  display: block;
  font-size: 1rem;
  font-weight: 700;
  height: auto;
  inset-inline-start: 1rem;
  inset-block-start: 1rem;
  line-height: 1.5;
  padding: 1rem;
  text-decoration: none;
  width: auto;
  z-index: 100000;
}

/* ───────────────────────────────────────────────────────────────────
   6. CONTRASTE FORCÉ (HIGH CONTRAST MODE) — WCAG 1.4.11
   ─────────────────────────────────────────────────────────────────── */

@media (prefers-contrast: more) {
  :root {
    --col-border: rgba(0, 0, 0, 0.6) !important;
    --col-border-strong: rgba(0, 0, 0, 0.9) !important;
  }
  *:focus-visible {
    outline-width: 4px !important;
    outline-color: currentColor !important;
  }
  a:not(.btn):not(.btn-primary):not(.btn-secondary) {
    text-decoration: underline !important;
  }
}

/* Windows High Contrast Mode (système) */
@media (forced-colors: active) {
  *:focus-visible {
    outline: 3px solid CanvasText !important;
    outline-offset: 3px !important;
  }
  .btn,
  button {
    border: 2px solid CanvasText !important;
  }
}

/* ───────────────────────────────────────────────────────────────────
   7. FORMULAIRES ACCESSIBLES — WCAG 3.3.2, 1.3.1
   ─────────────────────────────────────────────────────────────────── */

label {
  display: inline-block;
  margin-block-end: 0.4rem;
  font-weight: 600;
  cursor: pointer;
}

/* Indicateur visuel des champs requis */
.required,
[aria-required="true"] + .required-indicator,
label .required {
  color: var(--col-primary, #C4572E);
  font-weight: 700;
  margin-inline-start: 0.25rem;
}

/* États invalides clairement visibles */
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"],
.is-invalid {
  border-color: #B91C1C !important;
  background-color: rgba(185, 28, 28, 0.05);
}

/* Messages d'erreur lisibles */
.error,
[role="alert"].error,
.field-error {
  color: #B91C1C;
  font-size: 0.9rem;
  font-weight: 600;
  margin-block-start: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Hints (descriptions) */
.hint,
[id$="-hint"] {
  font-size: 0.85rem;
  color: var(--col-muted, #8a7a68);
  margin-block-start: 0.3rem;
}

/* ───────────────────────────────────────────────────────────────────
   8. IMAGES SANS ALT — détection visuelle (debug pour devs)
   ─────────────────────────────────────────────────────────────────── */

/* En mode debug uniquement (à désactiver en prod) :
   décommenter pour voir les images sans alt entourées de rouge */
/*
img:not([alt]),
img[alt=""]:not([role="presentation"]) {
  outline: 3px solid red !important;
  outline-offset: 2px;
}
*/

/* ───────────────────────────────────────────────────────────────────
   9. ARIA-LIVE REGIONS — pour les notifications dynamiques (panier)
   ─────────────────────────────────────────────────────────────────── */

[role="status"],
[role="alert"],
[aria-live] {
  /* Assurer la lisibilité même quand le contenu change rapidement */
  min-height: 1px;
}

/* ───────────────────────────────────────────────────────────────────
   10. NAVIGATION CLAVIER — éléments interactifs
   ─────────────────────────────────────────────────────────────────── */

/* Curseur explicitement pointer sur tous les interactifs */
button,
[role="button"],
[role="tab"],
[role="menuitem"],
[onclick],
.is-clickable {
  cursor: pointer;
}

/* États disabled clairement visibles */
button:disabled,
[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ───────────────────────────────────────────────────────────────────
   11. CONTRASTE DES PLACEHOLDERS — WCAG 1.4.3
   ─────────────────────────────────────────────────────────────────── */

::placeholder {
  color: var(--col-muted, #8a7a68);
  opacity: 1;
}

/* ───────────────────────────────────────────────────────────────────
   12. TEXTE REDIMENSIONNABLE — WCAG 1.4.4 (zoom 200% sans casse)
   ─────────────────────────────────────────────────────────────────── */

html {
  font-size: 100%;
  /* Empêche le zoom auto iOS sur input < 16px */
  -webkit-text-size-adjust: 100%;
}

input,
textarea,
select {
  font-size: max(16px, 1rem);
}

/* ───────────────────────────────────────────────────────────────────
   13. LIENS DE NAVIGATION — WCAG 2.4.4 (contexte)
   ─────────────────────────────────────────────────────────────────── */

/* "Lire la suite", "Cliquer ici" etc. doivent avoir un contexte ARIA */
a[href]:not([aria-label]):not([aria-labelledby]) {
  /* Pas de règle visuelle, juste un rappel pour le dev */
}

/* Liens externes : icône + ARIA pour signaler la nouvelle fenêtre */
a[target="_blank"]::after {
  content: " ↗";
  font-size: 0.8em;
  opacity: 0.7;
  margin-inline-start: 0.15em;
  display: inline-block;
}
/* Sauf sur les boutons sociaux et les boutons stylés */
.btn[target="_blank"]::after,
.btn-primary[target="_blank"]::after,
.btn-secondary[target="_blank"]::after,
.footer-social-link[target="_blank"]::after,
[aria-label][target="_blank"]::after {
  content: none;
}