/*
 * Thème Blondeau — CSS Accessibilité
 * Styles dédiés à l'accessibilité WCAG 2.1 AA :
 * - Focus visible
 * - Skip links
 * - Texte pour lecteurs d'écran
 * - Mode contraste élevé
 * - Mouvement réduit
 * - Cibles tactiles
 *
 * @package Blondeau
 * @version 1.2.0 — focus clavier unifié : bord or foncé + halo or collé, comme les champs (DETTE-398) — 2026-10-23
 * @version 1.1.0 — champs de formulaire : contour au seuil 3:1, focus contour or foncé + halo or (DETTE-391) — 2026-10-23
 * @version 1.0.2 — code mort retiré : .header-actions* (DETTE-218), rendu identique — 2026-10-23
 * @version 1.0.1 — code mort retiré (règles sans aucun élément ciblé), rendu identique — 2026-10-14
 */


/* ============================================================
   FOCUS VISIBLE — Indicateurs de focus accessibles
   WCAG 2.4.7 : visibilité du focus (AA)
   WCAG 2.4.11 : apparence du focus (AAA)
   ============================================================ */

/*
 * Règle de base : tous les éléments focusables ont un outline visible.
 * On utilise :focus-visible pour ne l'afficher qu'avec le clavier,
 * pas au clic de souris (meilleure expérience utilisateur).
 */

/* Réinitialiser les styles par défaut du navigateur pour les contrôler nous-mêmes */
:focus {
  outline: none;
}

/* Focus visible uniquement au clavier — recette unique du site, identique
   aux champs (DETTE-398, 2026-10-23) : le bord de l'élément passe en or foncé
   (contour de 2 px posé sur le bord, vers l'intérieur : la taille ne change
   pas, pas de second trait) et un halo or de 3 px l'entoure, collé. Le
   contraste exigé (WCAG 1.4.11, 3:1) est porté par l'or foncé ; le halo est
   décoratif. Le rayon de l'élément est conservé (plus de border-radius forcé). */
:focus-visible {
  outline: 2px solid var(--color-focus, #A8842C);
  outline-offset: -2px;
  box-shadow: 0 0 0 3px var(--color-field-halo, rgba(204, 166, 59, 0.18));
}

/* Liens de texte (sans classe) : soulignement or foncé épaissi + halo */
a:not([class]):focus-visible {
  outline: none;
  text-decoration: underline;
  text-decoration-color: var(--color-focus, #A8842C);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  border-radius: 2px;
  box-shadow: 0 0 0 3px var(--color-field-halo, rgba(204, 166, 59, 0.18));
}
/* …sauf un lien qui ne contient qu'une image : recette des boutons */
a:not([class]):has(> img:only-child):focus-visible {
  outline: 2px solid var(--color-focus, #A8842C);
  outline-offset: -2px;
  text-decoration: none;
}

/* Boutons — même recette, plus spécifique que les styles de boutons */
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--color-focus, #A8842C);
  outline-offset: -2px;
  box-shadow: 0 0 0 3px var(--color-field-halo, rgba(204, 166, 59, 0.18));
}

/* Cases, boutons radio, curseurs : contour juste autour (un contour posé à
   l'intérieur recouvrirait la case), sans halo */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
input[type="range"]:focus-visible {
  outline: 2px solid var(--color-focus, #A8842C);
  outline-offset: 2px;
  box-shadow: none;
}

/* Champs de saisie (DETTE-391) : le contour du champ passe en or foncé
   (3,5:1 sur blanc, WCAG 1.4.11) et porte l'indicateur ; le halo or est
   décoratif. :where() garde la spécificité basse : un champ sans bordure
   placé dans un cadre (recherche, quantité, dimensions, tri) annule le halo
   et laisse son cadre afficher le focus (:focus-within / :has).
   Cases à cocher, boutons radio, curseurs, fichiers et boutons gardent le
   contour de focus standard (:focus-visible ci-dessus). */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"]), textarea, select):focus-visible {
  outline: none;
  border-color: var(--color-field-focus, #A8842C) !important;
  box-shadow: 0 0 0 3px var(--color-field-halo, rgba(204, 166, 59, 0.18));
}

/* Éléments de navigation avec tabindex */
[tabindex]:focus-visible {
  outline: 2px solid var(--color-focus, #A8842C);
  outline-offset: -2px;
}

/* Cas particuliers : images cliquables, SVG interactifs */
img:focus-visible,
svg:focus-visible {
  outline: 2px solid var(--color-focus, #A8842C);
  outline-offset: -2px;
}

/* Cartes produits cliquables */
.entry--card a:focus-visible,
.wc-card a:focus-visible {
  outline-offset: -2px;
}

/* Navigation : focus sur les items de menu */
.nav-primary__link:focus-visible {
  outline: 2px solid var(--color-focus, #A8842C);
  outline-offset: -2px;
  box-shadow: 0 0 0 3px var(--color-field-halo, rgba(204, 166, 59, 0.18));
}

/* Bouton hamburger */
.nav-toggle:focus-visible {
  outline: 2px solid var(--color-focus, #A8842C);
  outline-offset: -2px;
  box-shadow: 0 0 0 3px var(--color-field-halo, rgba(204, 166, 59, 0.18));
}




/* ============================================================
   TEXTE POUR LECTEURS D'ÉCRAN
   ============================================================ */

/* Masqué visuellement mais accessible aux technologies d'assistance */
.sr-only,
.screen-reader-text,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Version focusable : visible au focus clavier */
.sr-only:focus,
.sr-only:active,
.screen-reader-text:focus,
.screen-reader-text:active {
  position: static;
  width: auto;
  height: auto;
  padding: 0.75rem 1.5rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--color-primary, #1C1F3B);
  color: #ffffff;
  border-radius: 4px;
  outline: 2px solid var(--color-focus, #A8842C);
}

/* Masqué pour les lecteurs d'écran (décoratif) */
[aria-hidden="true"] {
  /* Pas de style particulier nécessaire, le navigateur gère */
}


/* ============================================================
   CIBLES TACTILES MINIMUM 44x44px
   WCAG 2.5.5 : taille de la cible (AAA)
   WCAG 2.5.8 : taille minimale (AA) — nouvelle dans WCAG 2.2
   ============================================================ */

/* Assurer une surface de clic suffisante pour tous les éléments interactifs.
   .header-action exclu : sa cible tactile (44px desktop, réduite à 36/32/30px
   en mobile via main.css) est déjà gérée en responsive — sans cette exclusion,
   min-height:44px prime toujours sur le height réduit et bloque à 44px les
   boutons (compte, favoris) alors que le lien panier (<a>, non concerné par
   "button") suit bien la réduction, désalignant les icônes/badges sur mobile. */
button:not(.header-action),
[role="button"]:not(.header-action),
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn {
  min-height: 44px;
  min-width: 44px;
}

/* Liens de navigation : padding suffisant pour la cible tactile */
.nav-primary__link {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Bouton retour en haut */
.back-to-top {
  min-width: 44px;
  min-height: 44px;
}

/* Checkboxes et radios avec labels */
input[type="checkbox"],
input[type="radio"] {
  min-width: 20px;
  min-height: 20px;
  cursor: pointer;
}

/* Sélection dans les formulaires */
select {
  min-height: 44px;
}


/* ============================================================
   MODE CONTRASTE ÉLEVÉ
   Support de Windows High Contrast Mode
   ============================================================ */

@media (prefers-contrast: high) {

  /* Augmenter les contrastes des borders et textes */
  :root {
    --color-border:      #767676;
    --color-border-dark: #595959;
    --color-text-muted:  #595959;
  }

  /* Boutons : contrastes forcés */
  .btn {
    border-width: 2px;
  }

  .btn--primary {
    background: ButtonText;
    color: ButtonFace;
    border-color: ButtonText;
  }

  .btn--outline {
    border-color: ButtonText;
    color: ButtonText;
  }

  /* Liens : toujours soulignés en contraste élevé */
  a {
    text-decoration: underline;
    text-underline-offset: 0.1em;
  }

  /* Focus : outline forcé en couleur système */
  :focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }

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

  /* Navigation */
  .nav-primary__link {
    color: LinkText;
  }

  .nav-primary__item.current-menu-item > .nav-primary__link {
    color: Highlight;
  }

  /* Header */
  .site-header {
    border-bottom: 2px solid ButtonText;
  }

  /* Footer */
  .site-footer {
    border-top: 2px solid ButtonText;
  }
}

/* Mode contraste forcé (Windows) */
@media (forced-colors: active) {

  /* Assurer la visibilité des éléments décoratifs importants */
  .nav-toggle__bar {
    background: ButtonText;
  }

  .cart-count {
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }

  /* Garder les couleurs de focus définies */
  :focus-visible {
    outline: 2px solid Highlight;
  }

  /* SVG icons */
  svg {
    color: ButtonText;
  }
}


/* ============================================================
   MOUVEMENT RÉDUIT
   WCAG 2.3.3 : animation déclenché par interaction (AAA)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  /* Réduire les animations décoratives (cards, thumbnails).
     On NE touche PAS animation-iteration-count pour préserver les boucles
     fonctionnelles (téléphone, cœur). Les transitions restent intactes. */
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  /* Scroll smooth désactivé */
  html {
    scroll-behavior: auto;
  }

  /* Désactiver les animations de défilement infini ou cinétiques */
  .entry--card:hover,
  .card:hover {
    transform: none;
  }

  /* Pas d'animation sur les images de thumbnail */
  .entry-thumbnail__image {
    transition: none;
  }
}


/* ============================================================
   AMÉLIORATION DES LIENS
   ============================================================ */

/* Indiquer visuellement les liens externes */
a[target="_blank"]::after {
  content: " ↗";
  font-size: 0.75em;
  vertical-align: super;
  color: var(--color-text-muted, #6B7280);
}

/* Exception : boutons, éléments de navigation, images */
.btn[target="_blank"]::after,
nav a[target="_blank"]::after,
.entry-thumbnail a[target="_blank"]::after,
.site-branding a[target="_blank"]::after {
  content: none;
}


/* ============================================================
   AMÉLIORATION DES FORMULAIRES
   ============================================================ */

/* Erreurs de validation accessibles */
[aria-invalid="true"] {
  border-color: var(--color-error, #DC2626) !important;
  background-color: rgba(220, 38, 38, 0.03);
}

[aria-invalid="true"]:focus-visible {
  outline-color: var(--color-error, #DC2626);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

/* Champs requis — indicateur visuel
   BUG-351 [OK] — uniquement si le libellé ne porte pas déjà son propre
   astérisque (`span.required` des gabarits WooCommerce / thème) : sans ce
   :not(), « Adresse e-mail * * » sur la connexion et la création de compte.
   Les annulations locales (.blondeau-profile-form, .contact-form) restent
   valides mais ne sont plus nécessaires — corrigé le 2026-10-02. */
[aria-required="true"] ~ label:not(:has(.required))::after,
label:not(:has(.required)):has(+ [aria-required="true"])::after {
  content: " *";
  color: var(--color-error, #DC2626);
  font-weight: 600;
}

/* Description de champ */
.field-description {
  font-size: 0.875rem;
  color: var(--color-text-muted, #6B7280);
  margin-top: 0.25rem;
}

/* Message d'erreur inline */
.field-error {
  font-size: 0.875rem;
  color: var(--color-error, #DC2626);
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}


/* ============================================================
   PAGINATION ACCESSIBLE
   ============================================================ */

/* La pagination doit avoir un rôle nav et un label descriptif */
.pagination[role="navigation"],
.navigation[role="navigation"] {
  /* Le role et aria-label sont ajoutés via PHP */
}

/* Page courante clairement identifiée */
.page-numbers.current {
  /* Déjà stylisé dans main.css, mais assurons le contraste */
  color: #ffffff;
  background-color: var(--color-primary, #1C1F3B);
}

/* Ellipsis non interactif */
.page-numbers.dots {
  cursor: default;
  pointer-events: none;
}


/* ============================================================
   TABLES ACCESSIBLES
   ============================================================ */

table {
  width: 100%;
  border-collapse: collapse;
}

caption {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text, #1E1E1E);
  text-align: left;
  padding: var(--space-3, 0.75rem) 0;
  margin-bottom: var(--space-2, 0.5rem);
}

th {
  text-align: left;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-primary, #1C1F3B);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  border-bottom: 2px solid var(--color-border-dark, #C8C3BA);
  background: var(--color-bg-alt, #F8F7F5);
}

td {
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  border-bottom: 1px solid var(--color-border, #E5E1D8);
  color: var(--color-text, #1E1E1E);
  vertical-align: top;
}

tr:hover td {
  background: var(--color-bg-alt, #F8F7F5);
}

/* Table responsive */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* ============================================================
   LIVE REGIONS ET ANNONCES DYNAMIQUES
   ============================================================ */

/* Conteneur pour les annonces aux lecteurs d'écran */
.aria-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Zone d'annonce pour les mises à jour AJAX (ex: ajout panier) */
[aria-live="polite"],
[aria-live="assertive"] {
  /* Ces éléments peuvent être visibles ou cachés selon le besoin */
}