/* ==========================================================================
   SOCLE ACCESSIBILITÉ — SI Groupe e-learning
   Fichier chargé sur toutes les pages (layout apprenant + login)
   ========================================================================== */

/* ----- SKIP LINK ----- */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 9999;
    padding: 0.75rem 1.5rem;
    background: #1a202c;
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
}
.skip-link:focus {
    top: 0;
}

/* ----- SR-ONLY (texte masqué visuellement, lisible par lecteurs d'écran) ----- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ----- FOCUS VISIBLE ----- */
*:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}

/* Supprime le outline par défaut pour les utilisateurs souris/tactile */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Focus amélioré pour les boutons et liens sur fond foncé */
.bg-theme-1 *:focus-visible,
.text-white *:focus-visible {
    outline-color: #fbbf24;
}

/* ----- LIENS : indication non basée uniquement sur la couleur ----- */
.part-content-text a {
    text-decoration: underline;
}

/* ----- RESET BOUTON (pour les <a> convertis en <button>) ----- */
button.button,
button.select-reviews {
    border: none;
    cursor: pointer;
    font: inherit;
    text-decoration: none;
    line-height: inherit;
}

/* ----- ACCORDÉON ACCESSIBLE ----- */
.accordion__pane__toggle[aria-expanded="true"] {
    font-weight: 700;
}
.accordion__pane:not(.active) .accordion__pane__content {
    display: none;
}

/* =====================================================================
   CORRECTIFS CONTRASTE WCAG 2.1 AA
   Seuils : 4.5:1 texte normal | 3:1 texte ≥18pt ou ≥14pt bold + UI
   ===================================================================== */

/* --- C1: blanc sur vert #91C714 (ratio 2.02:1 → FAIL)
       Contexte : bandeaux succès "Bravo" dans module-part, module-end
       Fix : fond vert foncé, ratio 6.19:1 --- */
.bg-theme-9.text-white,
.bg-theme-9 .text-white,
.text-white.bg-theme-9 {
    background-color: #2e7d32 !important;
}

/* --- C3: texte vert #91C714 sur fond vert clair #D8F8BC (ratio 1.74:1 → FAIL)
       Contexte : messages de succès login/forgotpassword
       Fix : texte vert foncé, ratio 5.45:1 --- */
.bg-theme-18 .text-theme-9,
.bg-theme-18.text-theme-9 {
    color: #276749 !important;
}

/* --- C4: text-gray-500 #a0aec0 sur blanc (ratio 2.26:1 → FAIL normal + UI)
       Contexte : dates événements dashboard, heures notifications
       Fix : ciblé sur les petits textes informatifs --- */
.top-bar .text-gray-500,
.notification-content .text-gray-500,
.cursor-pointer .text-gray-500 {
    color: #718096 !important; /* gray-600, ratio 4.02:1 sur blanc */
}

/* --- C9: barre de progression bg-gray-400 (ratio 1.49:1 → FAIL UI 3:1)
       Contexte : dashboard, formations
       Fix : fond gris plus foncé pour le rail de la barre, ratio 4.02:1 --- */
[role="progressbar"].bg-gray-400 {
    background-color: #718096 !important; /* gray-600 */
}

/* --- I1/I2: text-gray-600 #718096 sur blanc (ratio 4.02:1 → FAIL normal 4.5:1)
       Contexte : descriptions modals, contenus événements/posts, message-reviews
       Fix : texte plus foncé, ratio 7.53:1 --- */
.modal .text-gray-600,
.blog .text-gray-600,
.message-reviews-content + p .text-gray-600 {
    color: #4a5568 !important; /* gray-700 */
}

/* --- I4: erreur rouge #D32929 sur rose #ffd8d8 (ratio 3.91:1 → FAIL normal)
       Contexte : messages erreur login, forgotpassword
       Fix : rouge plus foncé, ratio 5.84:1 --- */
.bg-theme-31 .text-theme-6,
.bg-theme-31.text-theme-6 {
    color: #9b2c2c !important; /* red-800 */
}

/* --- I5: text-theme-1 #e52020 sur #F1F5F8 (ratio 4.34:1 → FAIL normal)
       Contexte : boutons outline, liens "Voir toutes" dans zone .content
       Fix : rouge plus foncé pour les boutons outline, ratio 5.63:1 --- */
.content .border-theme-1.text-theme-1 {
    color: #c53030 !important; /* red-700 */
    border-color: #c53030 !important;
}
/* Préserver le blanc sur boutons plein bg-theme-1 */
.content .bg-theme-1.text-white,
.content .bg-theme-1 .text-white {
    color: #fff !important;
}

/* --- L3: blanc sur #e52121 dashboard intro (ratio 4.59:1 → limite)
       Contexte : .user-intro-dashboard h2/p
       Fix : fond légèrement plus foncé, ratio 5.74:1 --- */
.user-intro-dashboard {
    background-color: #c53030 !important;
}

/* --- Overlay texte sur images (actualités/événements) --- */
.blog__preview .absolute.bottom-0 {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    padding-top: 2rem;
}

/* ----- SYSTÈME D'ONGLETS ACCESSIBILITÉ ----- */
.a11y-tabs {
    margin-top: 0.5rem;
}

.a11y-tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    background: #f1f5f9;
    border-radius: 0.5rem;
    padding: 0.3rem;
    margin-bottom: 0.75rem;
}

.a11y-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: #475569;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}

.a11y-tabs__tab:hover {
    color: #093b7c;
    background: #e0e7ff;
}

.a11y-tabs__tab:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 1px;
    border-radius: 0.375rem;
}

.a11y-tabs__tab--active,
.a11y-tabs__tab[aria-selected="true"] {
    color: #093b7c;
    background: #ffffff;
    border-color: #cbd5e1;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.a11y-tabs__panel {
    padding: 1rem 0.25rem;
    animation: a11yFadeIn 0.2s ease;
}

.a11y-tabs__panel[hidden] {
    display: none;
}

@keyframes a11yFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ----- RÉDUCTION DES ANIMATIONS (préférence système) ----- */
@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;
    }
}

/* ==========================================================================
   PRÉFÉRENCES UTILISATEUR (panneau profil)
   Classes appliquées sur <body> via le layout
   ========================================================================== */

/* ----- TAILLE DE POLICE ----- */
body.a11y-font-large {
    font-size: 120%;
}
body.a11y-font-large .side-menu .side-menu__title,
body.a11y-font-large .top-bar {
    font-size: 0.95rem;
}

body.a11y-font-xlarge {
    font-size: 130%;
}
body.a11y-font-xlarge .side-menu .side-menu__title,
body.a11y-font-xlarge .top-bar {
    font-size: 1rem;
}

body.a11y-font-xlarge .side-nav .side-menu {
    height: auto;
        margin: 15px 0;
}
.module-part-header{
        font-size: 0.9rem;
}
/* ----- CONTRASTE ÉLEVÉ ----- */
body.a11y-high-contrast {
    --hc-text: #000;
    --hc-bg: #fff;
    --hc-border: #000;
    --hc-link: #0000ee;
}

body.a11y-high-contrast,
body.a11y-high-contrast .box,
body.a11y-high-contrast .intro-y {
    color: var(--hc-text);
}

body.a11y-high-contrast.app {
    background-color: #fff;
}

body.a11y-high-contrast .box {
    border: 1px solid var(--hc-border);
}

body.a11y-high-contrast a:not(.button):not([class*="bg-theme"]) {
    color: var(--hc-link);
    text-decoration: underline;
}

body.a11y-high-contrast .text-gray-500,
body.a11y-high-contrast .text-gray-600,
body.a11y-high-contrast .text-gray-700 {
    color: var(--hc-text) !important;
}

body.a11y-high-contrast .border-gray-200,
body.a11y-high-contrast .border-gray-300 {
    border-color: var(--hc-border) !important;
}

body.a11y-high-contrast .bg-gray-100,
body.a11y-high-contrast .bg-gray-200 {
    background-color: #e5e5e5 !important;
}

body.a11y-high-contrast *:focus-visible {
    outline: 3px solid #000 !important;
    outline-offset: 2px;
}

/* ----- RÉDUCTION DES ANIMATIONS (préférence utilisateur) ----- */
body.a11y-reduce-motion *,
body.a11y-reduce-motion *::before,
body.a11y-reduce-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/* ----- QUIZ ACCESSIBILITÉ ----- */
.responses-container[role="group"] {
    border: none;
    padding: 0;
    margin: 0;
}
.quest_title:focus {
    outline: 2px solid #093b7c;
    outline-offset: 2px;
}
.correction .response.correct {
    color: #155724;
}
.correction .response.n-correct {
    color: #721c24;
}

.response-part .input[type=checkbox]:not(.input--switch) {
    width: 35px;
    height: 35px;
    border-radius: 0.2em;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid #c53030;
}