/* =====================================================
   TAONSA — Accessibilité (Phase 4 audit)
   À inclure sur toutes les pages publiques.
   ===================================================== */

/* ---- Skip link (WCAG 2.4.1) ---- */
.taonsa-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 99999;
    background: #0d9488;
    color: #fff;
    padding: 12px 20px;
    font-weight: 700;
    border-radius: 0 0 8px 0;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.35);
}
.taonsa-skip-link:focus,
.taonsa-skip-link:focus-visible {
    left: 0;
    outline: 3px solid #fff;
    outline-offset: -3px;
}

/* ---- Focus visible amélioré (WCAG 2.4.7) ---- */
:focus {
    outline: none;
}
:focus-visible {
    outline: 3px solid #0d9488;
    outline-offset: 2px;
    border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #0d9488;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(13, 148, 136, 0.15);
}

/* Focus dark sur fonds clairs */
@media (prefers-color-scheme: dark) {
    :focus-visible {
        outline-color: #5eead4;
    }
}

/* ---- Screen-reader only (visible aux SR uniquement) ---- */
.sr-only,
.taonsa-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;
}

/* ---- Réduire animations si l'utilisateur le demande (WCAG 2.3.3) ---- */
@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;
    }
}

/* ---- Tap targets >= 44x44px (WCAG 2.5.5) ---- */
button,
a.btn,
a[role="button"],
input[type="checkbox"],
input[type="radio"] {
    min-width: 44px;
    min-height: 44px;
}
/* Sauf à l'intérieur de paragraphes — gardent la taille naturelle */
p button,
p a {
    min-width: auto;
    min-height: auto;
}

/* ---- Contraste : badges promo/vedette (audit Phase 4) ---- */
/* L'orange Tailwind sur blanc tombe juste sous 4.5:1 — on assombrit */
.badge-amber,
.bg-amber-100 {
    color: #92400e !important; /* amber-800 */
}
.badge-orange {
    color: #c2410c !important; /* orange-700 */
}

/* ---- Liens : sous-lignement par défaut (sauf nav/btn) ---- */
main a:not(.btn):not([role="button"]):not(.no-underline):not([class*="hover:"]) {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* ---- Forms : indicateur d'erreur visuel + texte ---- */
[aria-invalid="true"],
input.error,
textarea.error {
    border-color: #dc2626 !important;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="none" stroke="%23dc2626" stroke-width="1.5"/><path d="M8 4v4M8 11h0" stroke="%23dc2626" stroke-width="1.5" stroke-linecap="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* ---- Badge "obligatoire" sur labels ---- */
label[data-required="true"]::after,
label.required::after {
    content: " *";
    color: #dc2626;
    font-weight: 700;
}