/**
 * accessibility.css — Corrections RGAA pour le thème imagence-belgique
 * =====================================================================
 * RGAA 10.7 : Visibilité du focus clavier
 * RGAA 6.1 / 6.3 : Liens s'ouvrant dans un nouvel onglet
 * RGAA 11.1 / 11.2 : Labels de formulaires
 */

/* =====================================================================
   1. FOCUS CLAVIER GLOBAL (RGAA 10.7 / 12.1)
   Assure un indicateur de focus visible pour tous les éléments
   interactifs naviguables au clavier.
   ===================================================================== */

/*
 * Indicateur de focus par défaut pour tous les éléments interactifs.
 * :focus-visible cible uniquement la navigation clavier (pas le clic souris),
 * conformément aux recommandations WCAG 2.4.7 / RGAA 10.7.
 */
:focus-visible {
    outline: 3px solid #1A4368 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 5px rgba(26, 67, 104, 0.25) !important;
    border-radius: 2px;
}

/*
 * Correction : .themes-tab avait outline:none sans indicateur alternatif.
 * On force un focus visible cohérent avec la charte graphique.
 */
.themes-tab:focus,
.themes-tab:focus-visible {
    outline: 3px solid #FFD960 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px rgba(255, 217, 96, 0.35) !important;
}

/*
 * Correction : .cf7-field input/textarea avait outline:none.
 * Remplacement par un indicateur visible (outline + box-shadow).
 */
.cf7-field input:focus,
.cf7-field input:focus-visible,
.cf7-field textarea:focus,
.cf7-field textarea:focus-visible {
    outline: 2px solid #1A4368 !important;
    outline-offset: 0 !important;
    box-shadow: 0 0 0 4px rgba(26, 67, 104, 0.2) !important;
}

/*
 * Correction des champs du formulaire depot-plainte :
 * outline:none était appliqué mais seul box-shadow était utilisé.
 * On ajoute un outline visible tout en conservant le box-shadow existant.
 */
.depot-plainte-form .wpcf7-form input[type="text"]:focus,
.depot-plainte-form .wpcf7-form input[type="text"]:focus-visible,
.depot-plainte-form .wpcf7-form input[type="email"]:focus,
.depot-plainte-form .wpcf7-form input[type="email"]:focus-visible,
.depot-plainte-form .wpcf7-form input[type="tel"]:focus,
.depot-plainte-form .wpcf7-form input[type="tel"]:focus-visible {
    outline: 2px solid #45A7DE !important;
    outline-offset: 0 !important;
    background: #e1f0f7 !important;
    box-shadow: 0 0 0 4px rgba(69, 167, 222, 0.35) !important;
}

.depot-plainte-form .wpcf7-form select:focus,
.depot-plainte-form .wpcf7-form select:focus-visible {
    outline: 2px solid #45A7DE !important;
    outline-offset: 0 !important;
    background-color: #e1f0f7 !important;
    box-shadow: 0 0 0 4px rgba(69, 167, 222, 0.35) !important;
}

.depot-plainte-form .wpcf7-form textarea:focus,
.depot-plainte-form .wpcf7-form textarea:focus-visible {
    outline: 2px solid #45A7DE !important;
    outline-offset: 0 !important;
    background: #e1f0f7 !important;
    box-shadow: 0 0 0 4px rgba(69, 167, 222, 0.35) !important;
}

/*
 * Correction : checkbox du formulaire depot-plainte avait outline:none.
 * L'indicateur de focus sur les cases à cocher est essentiel pour RGAA 10.7.
 */
.depot-plainte-form .wpcf7-acceptance input[type="checkbox"]:focus,
.depot-plainte-form .wpcf7-acceptance input[type="checkbox"]:focus-visible,
.depot-plainte-form input[type="checkbox"]:focus,
.depot-plainte-form input[type="checkbox"]:focus-visible {
    outline: 2px solid #1A4368 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(26, 67, 104, 0.2) !important;
}

/* Formulaire contact-custom : même corrections */
.contact-custom-section .wpcf7-form input:focus,
.contact-custom-section .wpcf7-form input:focus-visible,
.contact-custom-section .wpcf7-form textarea:focus,
.contact-custom-section .wpcf7-form textarea:focus-visible,
.contact-custom-section .wpcf7-form select:focus,
.contact-custom-section .wpcf7-form select:focus-visible {
    outline: 2px solid #45A7DE !important;
    outline-offset: 0 !important;
    box-shadow: 0 0 0 4px rgba(69, 167, 222, 0.35) !important;
}

/* Focus sur les boutons */
.btn:focus,
.btn:focus-visible,
button:focus,
button:focus-visible,
input[type="submit"]:focus,
input[type="submit"]:focus-visible,
input[type="button"]:focus,
input[type="button"]:focus-visible,
input[type="reset"]:focus,
input[type="reset"]:focus-visible {
    outline: 3px solid #1A4368 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 5px rgba(26, 67, 104, 0.25) !important;
}

/* Focus sur les liens de navigation */
a:focus,
a:focus-visible {
    outline: 2px solid #1A4368;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Header/nav links — focus bien visible sur fond sombre */
.site-header a:focus,
.site-header a:focus-visible,
.menu a:focus,
.menu a:focus-visible,
.mobile-menu a:focus,
.mobile-menu a:focus-visible {
    outline: 2px solid #FFD960 !important;
    outline-offset: 3px !important;
    border-radius: 2px;
}

/* Bouton burger */
.menu-burger:focus,
.menu-burger:focus-visible {
    outline: 3px solid #FFD960 !important;
    outline-offset: 3px !important;
}

/* =====================================================================
   2. LIENS NOUVEL ONGLET — AVERTISSEMENT VISUEL (RGAA 6.3)
   Les liens avec target="_blank" doivent informer l'utilisateur.
   L'élément .sr-only est lisible par les lecteurs d'écran uniquement.
   L'icône .new-tab-icon est visible graphiquement.
   ===================================================================== */

/* Texte masqué visuellement mais accessible aux lecteurs d'écran */
.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;
}

/* Icône visuelle "nouvel onglet" affichée après les liens target=_blank */
.new-tab-icon {
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    margin-left: 0.3em;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.7;
}

/* =====================================================================
   3. FORMULAIRES CONTACT FORM 7 — LABELS & ERREURS (RGAA 11.1 / 11.2)
   ===================================================================== */

/*
 * Messages d'erreur inline CF7 : bien visibles et contrastés.
 * RGAA 11.10 : les messages d'erreur doivent être perceptibles.
 */
.wpcf7-not-valid-tip {
    display: block !important;
    color: #D93025 !important;
    font-size: 0.85em !important;
    font-weight: 600 !important;
    margin-top: 4px !important;
    padding: 2px 0 !important;
}

/*
 * Message global CF7 (envoi/erreur) : lisible par les lecteurs d'écran
 * grâce à aria-live / role="alert" ajoutés via JS (voir functions.php).
 */
.wpcf7-response-output {
    padding: 12px 16px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    margin-top: 16px !important;
}

.wpcf7-response-output.wpcf7-validation-errors {
    background: #FFF3F2 !important;
    border: 2px solid #D93025 !important;
    color: #9A1C12 !important;
}

.wpcf7-response-output.wpcf7-mail-sent-ok {
    background: #F0FAF0 !important;
    border: 2px solid #1E8E3E !important;
    color: #0D6B2B !important;
}

/* Champ invalide : indicateur couleur sur le champ lui-même */
.wpcf7-form .wpcf7-not-valid {
    border: 2px solid #D93025 !important;
    background: #FFF8F8 !important;
}

/* Labels CF7 : s'assurer qu'ils sont visibles et bien positionnés */
.wpcf7 label,
.wpcf7-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    color: #1A4368;
}

/* Marquer les champs obligatoires visuellement (astérisque) */
.wpcf7-form .wpcf7-validates-as-required,
.wpcf7-form input[aria-required="true"],
.wpcf7-form textarea[aria-required="true"],
.wpcf7-form select[aria-required="true"] {
    border-left: 3px solid #1A4368 !important;
}