/**
 * Styles du widget d'accessibilité
 */

/* Widget flottant */
#a11y-widget {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#a11y-toggle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #b22222;
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
}

#a11y-toggle:hover {
    transform: scale(1.1);
    background: #8b0000;
}

#a11y-toggle:focus {
    outline: 3px solid #ffd700;
    outline-offset: 2px;
}

/* Panel */
#a11y-panel {
    position: absolute;
    bottom: 60px;
    left: 0;
    width: 280px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    overflow: hidden;
    transition: opacity 0.3s, transform 0.3s;
}

#a11y-panel.a11y-hidden {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.a11y-header {
    background: #1a1a1a;
    color: white;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.a11y-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

#a11y-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

#a11y-close:hover {
    color: #b22222;
}

.a11y-content {
    padding: 10px;
    max-height: 400px;
    overflow-y: auto;
}

.a11y-section {
    margin-bottom: 8px;
}

.a11y-section label {
    display: block;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 5px;
}

.a11y-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.a11y-buttons button {
    width: 40px;
    height: 40px;
    border: 2px solid #ddd;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
}

.a11y-buttons button:hover {
    border-color: #b22222;
    color: #b22222;
}

.a11y-buttons span {
    font-weight: bold;
    min-width: 50px;
    text-align: center;
}

.a11y-option {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #eee;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    font-size: 0.9rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.a11y-option:hover {
    border-color: #b22222;
    background: #fff5f5;
}

.a11y-option.active {
    border-color: #b22222;
    background: #b22222;
    color: white;
}

.a11y-reset button {
    width: 100%;
    padding: 10px;
    border: none;
    background: #f5f5f5;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.a11y-reset button:hover {
    background: #e0e0e0;
}

/* ===== MODES D'ACCESSIBILITÉ ===== */

/* Contraste élevé */
.a11y-contraste {
    filter: contrast(1.2);
}

.a11y-contraste body,
.a11y-contraste .card,
.a11y-contraste .list-group-item {
    background: #000 !important;
    color: #fff !important;
}

.a11y-contraste a {
    color: #ffff00 !important;
}

.a11y-contraste .btn {
    border: 2px solid #fff !important;
}

.a11y-contraste .navbar,
.a11y-contraste footer {
    background: #000 !important;
    border-bottom: 2px solid #fff;
}

/* Police dyslexie */
@font-face {
    font-family: 'OpenDyslexic';
    src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Regular.woff') format('woff');
    font-weight: normal;
}

@font-face {
    font-family: 'OpenDyslexic';
    src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Bold.woff') format('woff');
    font-weight: bold;
}

.a11y-dyslexie,
.a11y-dyslexie * {
    font-family: 'OpenDyslexic', sans-serif !important;
    letter-spacing: 0.05em;
    word-spacing: 0.1em;
}

/* Interligne augmenté */
.a11y-interligne {
    line-height: 2 !important;
}

.a11y-interligne p,
.a11y-interligne li,
.a11y-interligne .texte-contenu {
    line-height: 2.2 !important;
}

/* Souligner les liens */
.a11y-liens a {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* Grand curseur */
.a11y-curseur,
.a11y-curseur * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1' d='M5 2 L5 28 L12 21 L18 30 L22 28 L16 19 L26 19 Z'/%3E%3C/svg%3E"), auto !important;
}

.a11y-curseur a,
.a11y-curseur button,
.a11y-curseur [role="button"] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23b22222' stroke='%23fff' stroke-width='1' d='M10 5 L10 27 L16 21 L20 27 L24 25 L20 19 L26 19 Z'/%3E%3C/svg%3E"), pointer !important;
}

/* Désactiver animations */
.a11y-no-animations,
.a11y-no-animations * {
    animation: none !important;
    transition: none !important;
}

/* Mode lecteur d'écran / plage braille */

/* Masquer les éléments purement décoratifs */
.a11y-lecteur img:not([alt]),
.a11y-lecteur [aria-hidden="true"],
.a11y-lecteur .fa,
.a11y-lecteur .fas,
.a11y-lecteur .fab,
.a11y-lecteur .far,
.a11y-lecteur i[class*="fa-"] {
    display: none !important;
}

/* Structure linéaire */
.a11y-lecteur .row {
    display: block !important;
}

.a11y-lecteur [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
}

/* Texte plus lisible */
.a11y-lecteur {
    font-size: 1.1rem;
    line-height: 1.8;
}

.a11y-lecteur h1, .a11y-lecteur h2, .a11y-lecteur h3 {
    border-bottom: 2px solid #b22222;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

/* Liens très visibles */
.a11y-lecteur a {
    text-decoration: underline !important;
    font-weight: bold;
}

.a11y-lecteur a::before {
    content: "→ ";
}

/* Focus très visible */
.a11y-lecteur *:focus {
    outline: 4px solid #b22222 !important;
    outline-offset: 4px !important;
    background: #fff3cd !important;
}

/* Skip link (aller au contenu) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: #b22222;
    color: white;
    padding: 10px 20px;
    z-index: 10000;
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    font-weight: bold;
}

.skip-link:focus {
    top: 0;
}

/* Focus visible amélioré */
*:focus-visible {
    outline: 3px solid #b22222 !important;
    outline-offset: 2px !important;
}

/* Responsive */
@media (max-width: 576px) {
    #a11y-widget {
        bottom: 10px;
        left: 10px;
    }
    
    #a11y-toggle {
        width: 45px;
        height: 45px;
    }
    
    #a11y-panel {
        width: calc(100vw - 20px);
        max-width: 300px;
    }
}