/* =========================================================
   ♿ DesignCV — Accessibilité (Module 10 — Partie CSS)
   prefers-reduced-motion + contrastes + focus visibles
   ========================================================= */

/* ---------- 1. SKIP LINK (injecté par a11y.js) ---------- */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    background: var(--primary, #4F46E5);
    color: white;
    padding: 10px 18px;
    border-radius: var(--radius, 8px);
    font-weight: 600;
    font-size: 0.9rem;
    z-index: 999;
    text-decoration: none;
    transition: top var(--duration-fast, 150ms) var(--ease, ease);
    box-shadow: var(--shadow, 0 4px 6px -1px rgba(0,0,0,0.1));
}
.skip-link:focus {
    top: 1rem;
    outline: 3px solid white;
    outline-offset: 2px;
}

/* ---------- 2. SCREEN READER ONLY ---------- */
.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;
}

/* ---------- 3. CONTRASTES RENFORCÉS ---------- */
/* Texte muted déjà renforcé dans design-system.css (#64748B au lieu de #94A3B8) */
.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.8;
}

/* ---------- 4. FOCUS VISIBLE (TOUJOURS) ---------- */
*:focus {
    outline: none;
}
*:focus-visible {
    outline: 2px solid var(--primary, #4F46E5);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Focus plus visible sur petits éléments */
.btn:focus-visible,
.btn-icon:focus-visible,
.color-dot:focus-visible,
.theme-btn:focus-visible,
.opt-card:focus-visible,
.skill-remove:focus-visible {
    outline: 2px solid var(--primary, #4F46E5);
    outline-offset: 3px;
}

/* ---------- 5. PRÉFÉRENCES SYSTÈME : MOUVEMENT RÉDUIT ---------- */
@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;
    }

    /* Désactiver spécifiquement nos animations Phase 1 */
    .skill-tag { animation: none !important; }
    .toast.show { animation: none !important; }
    .btn-icon:hover { transform: none !important; }
    .skill-remove:hover { transform: none !important; }
    .color-dot:hover { transform: scale(1.05) !important; }
    .btn-primary:hover { transform: none !important; }
    .entry-card:hover { transform: none !important; }
    .opt-card:hover { transform: none !important; }
    .photo-preview:hover { transform: none !important; }
}

/* ---------- 6. CONTRASTE ÉLEVÉ (Windows) ---------- */
@media (prefers-contrast: more) {
    .form-input,
    .form-textarea,
    .form-select {
        border-width: 2px;
    }
    .btn-primary {
        border: 2px solid var(--text);
    }
    .entry-card {
        border-width: 2px;
    }
    .skill-tag {
        border-width: 2px !important;
    }
}

/* ---------- 7. FORCER LA VISIBILITÉ DU FOCUS AU CLAVIER ---------- */
/* Quand on navigue au clavier, on surligne visuellement les sections actives */
.form-section:focus-within {
    background: var(--primary-bg, #EEF2FF);
    border-radius: var(--radius-lg, 12px);
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
    transition: background var(--duration-fast, 150ms) ease;
}

/* ---------- 8. LIENS & TEXTES INTERACTIFS ---------- */
.cv-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---------- 9. INDICATION DE CHAMPS REQUIS ---------- */
.form-group[data-required="true"] label::after {
    content: " *";
    color: var(--danger, #DC2626);
}

/* ---------- 10. COULEURS BORDURES SELON VALIDITÉ (validation native) ---------- */
.form-input:user-invalid,
.form-textarea:user-invalid,
.form-select:user-invalid {
    border-color: var(--danger, #DC2626);
}
.form-input:user-invalid:focus,
.form-textarea:user-invalid:focus,
.form-select:user-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}