/**
 * Nom du fichier : accessibility.styles.css
 * Description : Styles d'accessibilité WCAG 2.1 niveau AA — structure de base
 *               Focus visible, skip navigation, tailles touch 44px minimum,
 *               contraste renforcé, réduction animations, lecteurs d'écran,
 *               formulaires et tableaux accessibles
 *               Charte couleur harmonisée : #0E7490 (turquoise Reserva) partout.
 * Module : Core / UI / Accessibilité
 * Auteur : Reserva
 * Date de création : 13/04/2026
 * Dernière modification : 14/04/2026
 *
 * Inclusion : Chargé dans TOUS les layouts via :
 * <link rel="stylesheet" href="{{ asset('css/accessibility.styles.css') }}">
 *
 * Norme visée : WCAG 2.1 niveau AA
 * Critères couverts :
 * - 1.4.1 : Utilisation de la couleur (pas uniquement la couleur)
 * - 1.4.3 : Contraste minimum (4.5:1 texte normal, 3:1 grand texte)
 * - 2.1.1 : Navigation clavier
 * - 2.4.1 : Contourner les blocs (skip nav)
 * - 2.4.7 : Focus visible
 * - 2.5.5 : Taille de la cible (44x44px)
 * - 2.3.1 : Pas de contenu clignotant (prefers-reduced-motion)
 */

/* ==========================================================================
   1. SKIP NAVIGATION
   ========================================================================== */
/* Lien invisible sauf quand il reçoit le focus (touche Tab)           */
/* Permet de sauter directement au contenu principal                    */
/* Doit être le PREMIER élément focusable dans le <body>               */

.skip-nav {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 9999;
    padding: 0.75rem 1.5rem;
    background-color: #0E7490;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 0.5rem 0;
    transition: top 0.2s ease;
}

/* Visible quand le lien reçoit le focus (Tab) */
.skip-nav:focus {
    top: 0;
    outline: 3px solid #fbbf24;
    outline-offset: 2px;
}

/* ==========================================================================
   2. FOCUS VISIBLE
   ========================================================================== */
/* Style de focus clair sur TOUS les éléments interactifs               */
/* Utilise :focus-visible pour ne montrer le focus qu'au clavier        */
/* Ratio de contraste outline : >= 3:1 (WCAG AA)                       */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="checkbox"]:focus-visible,
[role="radio"]:focus-visible,
summary:focus-visible {
    outline: 3px solid #0E7490;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Mode sombre — outline plus lumineux pour rester visible */

/* Cacher le outline par défaut (remplacé par :focus-visible) */
:focus:not(:focus-visible) {
    outline: none;
}

/* ==========================================================================
   3. TAILLES TOUCH — MINIMUM 44x44px
   ========================================================================== */
/* WCAG 2.1 critère 2.5.5 — cibles tactiles minimum 44x44 pixels       */
/* Essentiel pour Djibouti : usage mobile dominant                       */

/* Boutons — hauteur et largeur minimales 44px */
.btn,
button:not(.btn-icon-only),
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"] {
    min-height: 44px;
    min-width: 44px;
    padding: 0.625rem 1rem;
}

/* Liens dans les navigations — zone cliquable élargie */
nav a,
.nav-link,
.menu-item a:not([class*="text-"]) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
}

/* Champs de formulaire — hauteur minimale 44px */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea:not([class*="text-"]) {
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    font-size: 1rem; /* 16px — évite le zoom automatique sur iOS */
}

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

/* Labels associés aux checkboxes/radios — zone cliquable 44px */
label:has(input[type="checkbox"]),
label:has(input[type="radio"]) {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.25rem 0;
    cursor: pointer;
}

/* ==========================================================================
   4. CONTRASTE ET LISIBILITÉ
   ========================================================================== */
/* Ratios de contraste WCAG AA :                                         */
/* - Texte normal (< 18px) : ratio >= 4.5:1                             */
/* - Grand texte (>= 18px ou 14px bold) : ratio >= 3:1                  */

/* Texte principal — contraste fort sur fond blanc */
body {
    color: #1f2937; /* gray-800 — ratio 12.6:1 sur blanc */
    font-size: 1rem;
    line-height: 1.6; /* Espacement des lignes pour une meilleure lisibilité */
}

/* Mode sombre — texte clair sur fond sombre */

/* Texte secondaire — contraste suffisant */
.text-muted,
.text-secondary {
    color: #4b5563; /* gray-600 — ratio 7.1:1 sur blanc */
}

/* ==========================================================================
   LIENS — Règle corrigée pour ne pas écraser les classes Tailwind
   On ne colore que les liens "nus" (sans aucune classe) pour éviter
   de forcer du bleu sur les boutons, badges, nav links, etc.
   ========================================================================== */
a:not([class]) {
    color: #0E7490; /* turquoise Reserva — ratio 4.5:1 sur blanc */
    text-decoration: underline;
    text-underline-offset: 3px;
}

a:not([class]):hover {
    color: #0C4A6E; /* turquoise foncé */
    text-decoration-thickness: 2px;
}


/* Placeholders — contraste suffisant (souvent trop clair par défaut) */
::placeholder {
    color: #6b7280; /* gray-500 — ratio 4.6:1 */
    opacity: 1;
}

/* ==========================================================================
   5. RÉDUCTION DES ANIMATIONS
   ========================================================================== */
/* Respecte la préférence système prefers-reduced-motion                 */
/* WCAG critère 2.3.1 — pas de contenu qui clignote                     */

@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;
    }
}

/* ==========================================================================
   6. CONTENUS POUR LECTEURS D'ÉCRAN UNIQUEMENT
   ========================================================================== */
/* Caché visuellement mais lu par les lecteurs d'écran (NVDA, VoiceOver) */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Visible uniquement quand l'élément reçoit le focus (skip-nav) */
.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ==========================================================================
   7. INDICATEURS D'ÉTAT ACCESSIBLES
   ========================================================================== */
/* WCAG 1.4.1 : Ne JAMAIS se fier uniquement à la couleur               */
/* Toujours accompagner la couleur d'un texte, icône, ou bordure         */

/* Champ en erreur — bordure rouge + icône d'avertissement */
.field-error {
    border-color: #dc2626;
    border-width: 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23dc2626'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
    padding-right: 2.5rem;
}

/* Message d'erreur — texte rouge + icône textuelle */
.error-message {
    color: #dc2626;
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 0.25rem;
}

.error-message::before {
    content: "⚠ ";
}

/* Champ valide — bordure verte */
.field-success {
    border-color: #16a34a;
    border-width: 2px;
}

/* ==========================================================================
   8. TABLEAUX ACCESSIBLES
   ========================================================================== */
/* En-têtes associés aux données, bordures visibles, survol             */

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

th,
td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

/* En-têtes de tableau — fond distinct */
th {
    font-weight: 600;
    background-color: #f9fafb;
    color: #374151;
}



/* Ligne au survol — améliore la lisibilité des tableaux longs */
tr:hover td {
    background-color: #f3f4f6;
}


/* ==========================================================================
   9. FORMULAIRES ACCESSIBLES
   ========================================================================== */
/* Labels visibles, champs obligatoires marqués, aide contextuelle       */

/* Labels toujours visibles au-dessus du champ */
label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.375rem;
    color: #374151;
}


/* Indicateur de champ obligatoire — étoile rouge + texte sr-only */
label .required,
.required-indicator {
    color: #dc2626;
    margin-left: 0.25rem;
}

/* Texte "obligatoire" lu par les lecteurs d'écran mais invisible */
label .required::after,
.required-indicator::after {
    content: " (obligatoire)";
    font-size: 0;
}

/* Texte d'aide sous les champs */
.help-text {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

/* Champs désactivés — style distinct pour indiquer l'état */
input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f3f4f6;
}


/* ==========================================================================
   10. IMAGES ET MÉDIAS
   ========================================================================== */

/* Images sans attribut alt — bordure rouge en dev pour repérer les oublis */
img:not([alt]) {
    outline: 3px solid #dc2626;
}

/* Images décoratives (alt="") — pas de bordure d'erreur */
img[alt=""] {
    outline: none;
}