/* Audire — Thématisation (EF-70..72, ADR)
   Trois thèmes découplés des vues via variables CSS.
   Appliqué par [data-theme] sur <html>, posé côté serveur (pas de flash). */

:root,
[data-theme="light"] {
    color-scheme: light;
    --surface: #ffffff;
    --surface-alt: #f7f7f7;
    --surface-raised: #ffffff;
    --text: #1b1b1b;
    --text-muted: #5f6368;
    --accent: #1b6ec2;
    --accent-contrast: #ffffff;
    --accent-hover: #155a9c;
    --link: #0071c1;
    --border: #d6d5d5;
    --sidebar-start: rgb(5, 39, 103);
    --sidebar-end: #3a0647;
    --sidebar-text: #d7d7d7;
    --sidebar-text-active: #ffffff;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.1);
    --danger: #b32121;
    --danger-contrast: #ffffff;
    --focus-ring: #258cfb;
    --valid-outline: #26b050;
    --invalid-outline: #e50000;
}

[data-theme="dark"] {
    color-scheme: dark;
    --surface: #1e1e1e;
    --surface-alt: #2a2a2a;
    --surface-raised: #2d2d30;
    --text: #e6e6e6;
    --text-muted: #a0a0a0;
    --accent: #3f8fd9;
    --accent-contrast: #101010;
    --accent-hover: #63a7e4;
    --link: #6cb8ff;
    --border: #444444;
    --sidebar-start: #0b1626;
    --sidebar-end: #1d0323;
    --sidebar-text: #c2c2c2;
    --sidebar-text-active: #ffffff;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --danger: #ff6b6b;
    --danger-contrast: #101010;
    --focus-ring: #7ab8ff;
    --valid-outline: #3ddc74;
    --invalid-outline: #ff5252;
}

/* Thème accessible : contraste élevé (WCAG AA/AAA), focus renforcé. */
[data-theme="accessible"] {
    color-scheme: light;
    --surface: #ffffff;
    --surface-alt: #ffffff;
    --surface-raised: #ffffff;
    --text: #000000;
    --text-muted: #333333;
    --accent: #003d99;
    --accent-contrast: #ffffff;
    --accent-hover: #002966;
    --link: #0000cc;
    --border: #000000;
    --sidebar-start: #000000;
    --sidebar-end: #000000;
    --sidebar-text: #ffffff;
    --sidebar-text-active: #ffff00;
    --sidebar-hover-bg: #333333;
    --danger: #990000;
    --danger-contrast: #ffffff;
    --focus-ring: #ff8c00;
    --valid-outline: #006600;
    --invalid-outline: #cc0000;
}

[data-theme="accessible"] *:focus {
    outline: 3px solid var(--focus-ring) !important;
    outline-offset: 2px;
}

[data-theme="accessible"] a {
    text-decoration: underline;
}

/* Application des variables aux éléments de base. */
body {
    background-color: var(--surface);
    color: var(--text);
}

a, .btn-link {
    color: var(--link);
}

.btn-primary {
    color: var(--accent-contrast);
    background-color: var(--accent);
    border-color: var(--accent);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

.content {
    background-color: var(--surface);
    color: var(--text);
}

.form-control {
    background-color: var(--surface-raised);
    color: var(--text);
    border-color: var(--border);
}

/* Composants Bootstrap thématisés (cartes, tables, selects, badges). */
.card {
    background-color: var(--surface-raised);
    color: var(--text);
    border-color: var(--border);
}

.card-header {
    background-color: var(--surface-alt);
    color: var(--text);
    border-bottom-color: var(--border);
}

.form-select,
.input-group-text {
    background-color: var(--surface-raised);
    color: var(--text);
    border-color: var(--border);
}

.form-control::placeholder {
    color: var(--text-muted);
}

.table {
    --bs-table-bg: var(--surface);
    --bs-table-color: var(--text);
    --bs-table-striped-bg: var(--surface-alt);
    --bs-table-striped-color: var(--text);
    border-color: var(--border);
}

.text-muted {
    color: var(--text-muted) !important;
}

.form-text,
.form-check-label,
.form-label {
    color: var(--text);
}

.form-text {
    color: var(--text-muted);
}

.border {
    border-color: var(--border) !important;
}

.badge.text-bg-light {
    background-color: var(--surface-alt) !important;
    color: var(--text) !important;
}

.breadcrumb-item.active {
    color: var(--text-muted);
}

.progress {
    background-color: var(--surface-alt);
}

/* Question obligatoire : visuel frappant (bordure + pastille). */
.question-card.mandatory {
    border-left: 4px solid var(--danger);
}

.mandatory-chip {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background-color: var(--danger);
    color: var(--danger-contrast);
    vertical-align: middle;
}

/* Obligatoire répondu : la pastille et la bordure passent au vert. */
.mandatory-chip.answered {
    background-color: var(--valid-outline);
    color: #ffffff;
}

.question-card.mandatory.answered {
    border-left-color: var(--valid-outline);
}


/* Résultats en direct (EF-50) : pastille clignotante dans le badge « En direct ». */
.live-dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background-color: currentColor;
    vertical-align: middle;
    animation: live-pulse 1.5s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
    .live-dot { animation: none; }
}