/* =============================================
   ACCESSIBILITÉ (menu utilisateur > Accessibilité)
   Mêmes options que l'appli mobile ; réglages gardés dans ce navigateur.
   ============================================= */

/* Texte plus grand : +25 % sur toutes les tailles de texte du site
   (elles passent toutes par les variables --text-*). */
html.a11y-larger-text {
    --text-xs: 14px;
    --text-sm: 15px;
    --text-base: 17.5px;
    --text-md: 19px;
    --text-lg: 20px;
    --text-xl: 22.5px;
    --text-2xl: 25px;
    --text-3xl: 30px;
    --text-4xl: 35px;
    --text-5xl: 40px;
    --text-6xl: 50px;
    --text-7xl: 60px;
    font-size: 125%;
}

/* Réduire les animations (aussi appliqué quand le système le demande) */
html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/* ----- Panneau ----- */

.a11y-dialog {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.a11y-dialog__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.a11y-dialog__panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-3xl);
    padding: var(--space-6);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.a11y-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.a11y-dialog__title {
    font-size: var(--text-2xl);
    color: var(--text-primary);
    margin: 0;
}

.a11y-dialog__close {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-default);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.a11y-dialog__close:hover {
    background: var(--bg-card-hover);
}

.a11y-dialog__intro {
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 0 var(--space-5);
}

.a11y-option {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    text-align: left;
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-default);
    background: var(--accent-softer);
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
}

.a11y-option:hover:not(:disabled) {
    border-color: var(--border-focus);
}

.a11y-option:disabled {
    cursor: default;
    opacity: 0.6;
}

.a11y-option__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.a11y-option__text {
    flex: 1;
    min-width: 0;
}

.a11y-option__title {
    display: block;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-primary);
}

.a11y-option__desc {
    display: block;
    margin-top: 2px;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Interrupteur */
.a11y-switch {
    position: relative;
    width: 46px;
    height: 26px;
    border-radius: 13px;
    background: var(--border-strong);
    flex-shrink: 0;
    transition: background 0.2s;
}

.a11y-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--text-primary);
    transition: transform 0.2s;
}

.a11y-option[aria-checked="true"] .a11y-switch {
    background: var(--accent-primary);
}

.a11y-option[aria-checked="true"] .a11y-switch::after {
    transform: translateX(20px);
    background: var(--bg-primary);
}

.a11y-option:focus-visible,
.a11y-dialog__close:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .a11y-dialog {
        align-items: flex-end;
        padding: 0;
    }

    .a11y-dialog__panel {
        max-width: none;
        border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
        padding: var(--space-5) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));
    }
}