/* ---- ACCESSIBILITY OVERRIDES (WCAG AA) ---- */

/* Font scale via CSS variable */
html { font-size: calc(16px * var(--font-scale, 1)); }

/* Skip link */
.skip-link {
    position: absolute;
    top: -60px;
    left: 12px;
    z-index: 9999;
    padding: 10px 18px;
    background: var(--surface-solid);
    color: var(--accent);
    font-weight: 700;
    border-radius: 0 0 8px 8px;
    border: 2px solid var(--accent);
    transition: top 0.2s;
    text-decoration: none;
    font-size: 0.9rem;
}
.skip-link:focus {
    top: 0;
}

/* Focus visible — global */
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* ---- HIGH CONTRAST ---- */
html[data-contrast="high"] {
    --bg-start: #000000;
    --bg-end: #000000;
    --glass-bg: #000000;
    --glass-bg-hover: #111111;
    --glass-border: 1px solid rgba(255,255,255,0.6);
    --text-primary: #ffffff;
    --text-secondary: #ffffff;
    --text-muted: #cccccc;
    --accent-color: #00e5ff;
    --accent-glow: rgba(0, 229, 255, 0.4);
    --vigilance-absolue: #ff2b2b;
    --vigilance-none: #00cc44;
    --color-dark-1: #000000;
    --color-dark-2: #111111;
    --color-dark-3: #ffffff;
    --color-light-1: #ffffff;
    --color-light-2: #cccccc;
    --glass-shadow: none;
}

/* Base */
html[data-contrast="high"] body {
    background: #000000 !important;
}

/* Supprime les glass blur partout */
html[data-contrast="high"] * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Texte global — titres et labels uniquement, pas les éléments colorés */
html[data-contrast="high"] label,
html[data-contrast="high"] h1,
html[data-contrast="high"] h2,
html[data-contrast="high"] h3,
html[data-contrast="high"] h4,
html[data-contrast="high"] h5 {
    color: #ffffff !important;
}
/* Paragraphes et textes de contenu (pas les spans inline colorés) */
html[data-contrast="high"] p,
html[data-contrast="high"] .explication,
html[data-contrast="high"] .risk-details,
html[data-contrast="high"] .text-muted,
html[data-contrast="high"] .footer-credits {
    color: #cccccc !important;
}
html[data-contrast="high"] a,
html[data-contrast="high"] .nav-item,
html[data-contrast="high"] .nav-text {
    color: #00e5ff !important;
}

/* ---- Navigation ---- */
html[data-contrast="high"] .navbar {
    background: #000000 !important;
    border-bottom: 1px solid #ffffff !important;
}
html[data-contrast="high"] .nav-item:hover,
html[data-contrast="high"] .nav-item.active {
    background: #111111 !important;
    color: #00e5ff !important;
}
html[data-contrast="high"] .mobile-menu-overlay {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
}

/* ---- Cartes & conteneurs ---- */
html[data-contrast="high"] .column-card,
html[data-contrast="high"] .dashboard-card,
html[data-contrast="high"] .glass-card,
html[data-contrast="high"] .auth-card,
html[data-contrast="high"] .model-card,
html[data-contrast="high"] .obs-admin-card,
html[data-contrast="high"] .phenom-block,
html[data-contrast="high"] .phenomenon-block,
html[data-contrast="high"] .risk-row,
html[data-contrast="high"] .stat-box,
html[data-contrast="high"] .hero-banner,
html[data-contrast="high"] .achievement-badge {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
}

/* ---- News ---- */
html[data-contrast="high"] .news-card {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
}
html[data-contrast="high"] .news-modal-container,
html[data-contrast="high"] .news-date-overlay {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
}
html[data-contrast="high"] .news-modal-overlay {
    background: rgba(0,0,0,0.9) !important;
}
html[data-contrast="high"] .cat-badge {
    background: #111111 !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
}

/* ---- Observations ---- */
html[data-contrast="high"] .observation-card {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
}
html[data-contrast="high"] .obs-date-badge {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
}
html[data-contrast="high"] .modal-content,
html[data-contrast="high"] .modal-info-col,
html[data-contrast="high"] .lvm-modal-card {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
}
html[data-contrast="high"] .modal-overlay,
html[data-contrast="high"] .lvm-modal-overlay,
html[data-contrast="high"] .news-modal-overlay {
    background: rgba(0,0,0,0.92) !important;
}

/* ---- Formulaires ---- */
html[data-contrast="high"] input,
html[data-contrast="high"] select,
html[data-contrast="high"] textarea,
html[data-contrast="high"] .custom-input,
html[data-contrast="high"] .auth-text-input {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
}
html[data-contrast="high"] input::placeholder,
html[data-contrast="high"] textarea::placeholder {
    color: #aaaaaa !important;
}
html[data-contrast="high"] select option {
    background: #000000;
    color: #ffffff;
}

/* ---- Boutons ---- */
html[data-contrast="high"] button:not(.a11y-pill):not(#a11y-toggle-btn):not(#a11y-reset-btn) {
    border-color: rgba(255,255,255,0.5) !important;
}
html[data-contrast="high"] .quick-btn,
html[data-contrast="high"] .tab-button {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
}
html[data-contrast="high"] .quick-btn.active,
html[data-contrast="high"] .tab-button.active {
    background: #111111 !important;
    border-color: #00e5ff !important;
    color: #00e5ff !important;
}

/* ---- Chat ---- */
html[data-contrast="high"] #chat-widget {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
}
html[data-contrast="high"] .chat-header {
    background: #111111 !important;
    border-bottom: 1px solid #ffffff !important;
}
html[data-contrast="high"] .message.self {
    background: #003344 !important;
    border: 1px solid #00e5ff !important;
}
html[data-contrast="high"] .message.other {
    background: #111111 !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
}
html[data-contrast="high"] .chat-input-area {
    background: #000000 !important;
    border-top: 1px solid #ffffff !important;
}
html[data-contrast="high"] #chat-input {
    background: #111111 !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
}

/* ---- Toasts / messages ---- */
html[data-contrast="high"] .lvm-toast {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
}

/* ---- Account / Dashboard ---- */
html[data-contrast="high"] .dash-sidebar {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
}
html[data-contrast="high"] .nav-tab-btn {
    color: #ffffff !important;
}
html[data-contrast="high"] .nav-tab-btn.active,
html[data-contrast="high"] .nav-tab-btn:hover {
    background: #111111 !important;
    border-color: #00e5ff !important;
    color: #00e5ff !important;
}

/* ---- Footer ---- */
html[data-contrast="high"] .footer-content {
    background: #000000 !important;
    border-top: 1px solid #ffffff !important;
}
html[data-contrast="high"] .footer-legend-block {
    border-color: rgba(255,255,255,0.4) !important;
}

/* ---- Panel admin ---- */
html[data-contrast="high"] .panel-container,
html[data-contrast="high"] .phenom-summary-header {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
}

/* ---- Widget accessibilité lui-même ---- */
html[data-contrast="high"] #a11y-panel {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
}
html[data-contrast="high"] .a11y-pill {
    background: #000000 !important;
    border-color: rgba(255,255,255,0.5) !important;
    color: #ffffff !important;
}
html[data-contrast="high"] .a11y-pill[aria-pressed="true"] {
    background: #003344 !important;
    border-color: #00e5ff !important;
    color: #00e5ff !important;
}
html[data-contrast="high"] .a11y-font-btn {
    background: #000000 !important;
    border-color: rgba(255,255,255,0.5) !important;
    color: #ffffff !important;
}

/* ---- News ---- */
html[data-contrast="high"] .news-card-image,
html[data-contrast="high"] .news-modal-container::-webkit-scrollbar-track {
    background: #000000 !important;
}
html[data-contrast="high"] .news-modal-header-img::after {
    background: linear-gradient(to top, #000000, transparent) !important;
}
html[data-contrast="high"] .news-modal-text,
html[data-contrast="high"] .news-title {
    color: #ffffff !important;
}
html[data-contrast="high"] .cat-previsions,
html[data-contrast="high"] .news-modal-tag.previsions { color: #00e5ff !important; }
html[data-contrast="high"] .cat-suivi,
html[data-contrast="high"] .news-modal-tag.suivi      { color: #ff6b6b !important; }
html[data-contrast="high"] .cat-bilan,
html[data-contrast="high"] .news-modal-tag.bilan      { color: #d0b4fe !important; }
html[data-contrast="high"] .cat-infos,
html[data-contrast="high"] .news-modal-tag.infos      { color: #6ee7b7 !important; }
html[data-contrast="high"] .news-modal-close {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
}

/* ---- Observations ---- */
html[data-contrast="high"] .obs-details-btn {
    background: #000000 !important;
    border: 1px solid #00e5ff !important;
    color: #00e5ff !important;
}
html[data-contrast="high"] .modal-image-col {
    background: #000000 !important;
}
html[data-contrast="high"] .comment-avatar-box {
    background: #111111 !important;
    border: 1px solid #ffffff !important;
}
html[data-contrast="high"] .comment-body {
    background: #111111 !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
}
html[data-contrast="high"] .login-warning-content {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
}
html[data-contrast="high"] .submission-message.success {
    background: #001a0d !important;
    border-color: #00cc44 !important;
    color: #00cc44 !important;
}
html[data-contrast="high"] .submission-message.error {
    background: #1a0000 !important;
    border-color: #ff4444 !important;
    color: #ff4444 !important;
}
html[data-contrast="high"] .leaflet-popup-content-wrapper,
html[data-contrast="high"] .leaflet-popup-tip {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
}
html[data-contrast="high"] .suggestions-dropdown {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
}
html[data-contrast="high"] .suggestion-item {
    color: #ffffff !important;
}
html[data-contrast="high"] .suggestion-item:hover {
    background: #111111 !important;
}

/* ---- Chat ---- */
html[data-contrast="high"] #chat-toggle-btn {
    background: #000000 !important;
    border: 2px solid #00e5ff !important;
    color: #00e5ff !important;
}
html[data-contrast="high"] .chat-status-dot {
    background: #00cc44 !important;
    box-shadow: 0 0 4px #00cc44 !important;
}
/* Le halo pulsé vit désormais dans un pseudo-élément (chat.css) : le
   `box-shadow !important` ci-dessus ne l'atteint plus, il faut le retirer
   explicitement pour garder le rendu net du mode contraste élevé. */
html[data-contrast="high"] .chat-status-dot::after {
    display: none !important;
}
html[data-contrast="high"] .message.admin {
    background: #1a0010 !important;
    border: 1px solid #ff6b6b !important;
}
html[data-contrast="high"] .message.admin .message-author {
    color: #ff6b6b !important;
}
html[data-contrast="high"] .support-banner {
    background: #001a22 !important;
    border: 1px solid #00e5ff !important;
    color: #00e5ff !important;
}
html[data-contrast="high"] .chat-channels {
    background: #000000 !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
}
html[data-contrast="high"] .channel-btn {
    color: #ffffff !important;
}
html[data-contrast="high"] .channel-btn.active {
    background: #111111 !important;
    border-color: #00e5ff !important;
    color: #00e5ff !important;
}
html[data-contrast="high"] .chat-notification-badge {
    background: #ff4444 !important;
    border: 1px solid #ffffff !important;
}

/* ---- Toasts / ui-kit ---- */
html[data-contrast="high"] .lvm-toast.success { border-left-color: #00cc44 !important; }
html[data-contrast="high"] .lvm-toast.error   { border-left-color: #ff4444 !important; }
html[data-contrast="high"] .lvm-toast.warning { border-left-color: #ffcc00 !important; }
html[data-contrast="high"] .lvm-toast.info    { border-left-color: #00e5ff !important; }
html[data-contrast="high"] .lvm-btn-cancel {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
}
html[data-contrast="high"] .lvm-btn-danger {
    background: #1a0000 !important;
    border: 1px solid #ff4444 !important;
    color: #ff4444 !important;
}

/* ---- Account / Dashboard ---- */
html[data-contrast="high"] .hero-banner {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
}
html[data-contrast="high"] .stat-cliches .stat-icon  { color: #00e5ff !important; }
html[data-contrast="high"] .stat-reactions .stat-icon { color: #ff6b6b !important; }
html[data-contrast="high"] .stat-messages .stat-icon  { color: #ffcc00 !important; }
html[data-contrast="high"] .lvm-usage-badge { color: #ffcc00 !important; }
html[data-contrast="high"] .logout-btn {
    background: #1a0000 !important;
    border-color: #ff4444 !important;
    color: #ff4444 !important;
}

/* ---- Panel admin — badges statut ---- */
html[data-contrast="high"] .obs-status-badge.pending {
    background: #332200 !important;
    color: #ffcc00 !important;
    border: 1px solid #ffcc00 !important;
}
html[data-contrast="high"] .obs-status-badge.approved {
    background: #001a0d !important;
    color: #00cc44 !important;
    border: 1px solid #00cc44 !important;
}
html[data-contrast="high"] .obs-admin-desc { color: #cccccc !important; }
html[data-contrast="high"] .obs-admin-user { color: #00e5ff !important; }

/* ---- Commentaires ---- */
html[data-contrast="high"] .global-commentary {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
}
html[data-contrast="high"] .risk-commentary {
    background: #111111 !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    color: #ffffff !important;
}
html[data-contrast="high"] .commentary-text {
    color: #ffffff !important;
}
html[data-contrast="high"] .phenom-comment-text {
    color: #ffffff !important;
    border-left-color: rgba(255,255,255,0.6) !important;
}
html[data-contrast="high"] .popup-phenom-comment {
    color: #cccccc !important;
    border-top-color: rgba(255,255,255,0.3) !important;
}

/* ---- Footer ---- */
html[data-contrast="high"] footer {
    background: #000000 !important;
    border-top: 1px solid #ffffff !important;
}
html[data-contrast="high"] .footer-bottom-bar {
    border-top-color: rgba(255,255,255,0.4) !important;
}
html[data-contrast="high"] .footer-visitor-counter {
    background: #111111 !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    color: #ffffff !important;
}
html[data-contrast="high"] .footer-visitor-counter .v-sep {
    opacity: 0.7 !important;
}
html[data-contrast="high"] .footer-observations {
    background: #001a22 !important;
    border: 1px solid #00e5ff !important;
}
html[data-contrast="high"] .stat-bubble {
    background: #111111 !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
}
html[data-contrast="high"] .stat-bubble i {
    background: rgba(0,229,255,0.15) !important;
}
html[data-contrast="high"] .footer-legal-links a {
    color: #cccccc !important;
}
html[data-contrast="high"] .footer-legal-links a:hover {
    color: #00e5ff !important;
}
html[data-contrast="high"] .footer-legal-links .sep {
    opacity: 0.6 !important;
}
html[data-contrast="high"] footer h3 {
    color: #ffffff !important;
    border-bottom-color: #00e5ff !important;
}

/* ---- Éléments style.css résiduels ---- */
html[data-contrast="high"] .map-tooltip {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
}
html[data-contrast="high"] .quick-access-bar {
    background: #000000 !important;
    border-bottom: 1px solid rgba(255,255,255,0.3) !important;
}
html[data-contrast="high"] .no-map-message {
    background: #111111 !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    color: #cccccc !important;
}
html[data-contrast="high"] .site-notification,
html[data-contrast="high"] #site-notification {
    background: #000000 !important;
    border: 2px solid #00e5ff !important;
    color: #ffffff !important;
}

/* ---- DYSLEXIA FONT ---- */
html[data-dyslexia="on"] body {
    font-family: 'Atkinson Hyperlegible', 'Lexend', 'Poppins', sans-serif;
    letter-spacing: 0.02em;
    word-spacing: 0.05em;
    line-height: 1.75;
}

/* ---- REDUCED MOTION ---- */
html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
}

/* ---- DALTONIEN PATTERNS (SVG map) ---- */
html[data-patterns="on"] .vig-moderee-fill {
    fill: url(#pattern-moderee) !important;
}
html[data-patterns="on"] .vig-renforcee-fill {
    fill: url(#pattern-renforcee) !important;
}
html[data-patterns="on"] .vig-absolue-fill {
    fill: url(#pattern-absolue) !important;
}

/* ---- A11Y WIDGET BUTTON ---- */
#a11y-toggle-btn {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 2100000;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 2px solid rgba(56, 217, 239, 0.5);
    color: var(--accent);
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), 0 0 12px rgba(56, 217, 239, 0.2);
    transition: background 0.2s, transform 0.2s;
}
#a11y-toggle-btn:hover {
    background: rgba(56, 217, 239, 0.15);
    transform: scale(1.08);
}

/* ---- A11Y PANEL ---- */
#a11y-panel {
    position: fixed;
    bottom: 84px;
    left: 24px;
    z-index: 2100000;
    width: 300px;
    background: var(--surface-2);
    border: 1px solid rgba(56, 217, 239, 0.3);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
    display: none;
}
#a11y-panel.open {
    display: block;
}

#a11y-panel h3 {
    margin: 0 0 16px;
    font-size: 0.95rem;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 8px;
}

.a11y-section {
    margin-bottom: 14px;
}
.a11y-section label {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

.a11y-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.a11y-pill {
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid var(--surface-border);
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
}
.a11y-pill[aria-pressed="true"] {
    background: rgba(56, 217, 239, 0.18);
    border-color: var(--accent);
    color: var(--accent);
}
.a11y-pill:hover {
    background: rgba(56, 217, 239, 0.1);
    border-color: rgba(56, 217, 239, 0.4);
}

.a11y-font-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.a11y-font-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--surface-border);
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.a11y-font-btn:hover {
    background: rgba(56, 217, 239, 0.1);
    border-color: var(--accent);
    color: var(--accent);
}
.a11y-font-scale-display {
    font-size: 0.82rem;
    color: #94a3b8;
    min-width: 42px;
    text-align: center;
}

.a11y-reset-btn {
    width: 100%;
    margin-top: 8px;
    padding: 7px;
    border-radius: 8px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.08);
    color: #f87171;
    font-size: 0.82rem;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.a11y-reset-btn:hover {
    background: rgba(239, 68, 68, 0.18);
}

/* Navbar a11y button */
.a11y-nav-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(56, 217, 239, 0.3);
    background: rgba(56, 217, 239, 0.05);
    color: var(--accent);
    font-size: 0.82rem;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
    margin-right: 8px;
}
.a11y-nav-btn:hover {
    background: rgba(56, 217, 239, 0.15);
}

/* ============================================================
   PRÉFÉRENCES UTILISATEUR
   ------------------------------------------------------------
   Ces deux règles ne vivaient que dans un <style> en ligne de
   base.html, qui ne sert que 4 pages héritées. Sur le site
   principal (spa.html), la classe « réduire les animations »
   était donc posée sans rien styler : la préférence était sans
   effet, et le masquage du chat était perdu à chaque
   rechargement. Rapatriées ici, elles valent partout.
   ============================================================ */

/* Réduire les animations — préférence explicite de l'utilisateur */
.lvm-reduce-motion *,
.lvm-reduce-motion *::before,
.lvm-reduce-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/* Réglage système : même traitement, sans réglage à faire */
@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;
    }
}

/* Masquer la bulle de chat */
.lvm-pref-no-chat #chat-toggle-btn,
.lvm-pref-no-chat #chat-widget { display: none !important; }