/* Thème partagé Heure Suisse — outils */

/* =========================
   SOMBRE — défaut
   ========================= */

html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="dark"] body {
    background: #08111d !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] main,
html[data-theme="dark"] section,
html[data-theme="dark"] article {
    color: inherit;
}

/* =========================
   CLAIR
   ========================= */

html[data-theme="light"] {
    color-scheme: light;
}

html[data-theme="light"] body {
    background: #eef2f6 !important;
    color: #0f172a !important;
}

html[data-theme="light"] main,
html[data-theme="light"] section,
html[data-theme="light"] article {
    color: inherit;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] button {
    color: #0f172a;
}

/* ==========================================
   OUTILS — harmonisation mode clair
   ========================================== */

html[data-theme="light"] main,
body[data-theme="light"] main,
[data-theme="light"] main {
    color: #0f172a !important;
}

/* grands panneaux / cartes outils */
html[data-theme="light"] main .panel,
html[data-theme="light"] main .card,
html[data-theme="light"] main .timer-card,
html[data-theme="light"] main .countdown-card,
html[data-theme="light"] main .stopwatch-card,
html[data-theme="light"] main .school-card,
html[data-theme="light"] main .sports-card,
html[data-theme="light"] main .timer-panel,
html[data-theme="light"] main .countdown-panel,
html[data-theme="light"] main .stopwatch-panel,
html[data-theme="light"] main .school-panel,
html[data-theme="light"] main .sports-panel,
html[data-theme="light"] main .app-card,
html[data-theme="light"] main .app-panel,
html[data-theme="light"] main article,
[data-theme="light"] main .panel,
[data-theme="light"] main .card,
[data-theme="light"] main .timer-card,
[data-theme="light"] main .countdown-card,
[data-theme="light"] main .stopwatch-card,
[data-theme="light"] main .school-card,
[data-theme="light"] main .sports-card,
[data-theme="light"] main .timer-panel,
[data-theme="light"] main .countdown-panel,
[data-theme="light"] main .stopwatch-panel,
[data-theme="light"] main .school-panel,
[data-theme="light"] main .sports-panel,
[data-theme="light"] main .app-card,
[data-theme="light"] main .app-panel,
[data-theme="light"] main article {
    background: #e9eef3 !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
}

/* titres et gros chiffres */
html[data-theme="light"] main h1,
html[data-theme="light"] main h2,
html[data-theme="light"] main h3,
html[data-theme="light"] main .digital-time,
html[data-theme="light"] main .timer-display,
html[data-theme="light"] main .countdown-display,
html[data-theme="light"] main .stopwatch-display,
[data-theme="light"] main h1,
[data-theme="light"] main h2,
[data-theme="light"] main h3,
[data-theme="light"] main .digital-time,
[data-theme="light"] main .timer-display,
[data-theme="light"] main .countdown-display,
[data-theme="light"] main .stopwatch-display {
    color: #0f172a !important;
}

/* texte secondaire */
html[data-theme="light"] main p,
html[data-theme="light"] main label,
html[data-theme="light"] main small,
html[data-theme="light"] main .muted,
html[data-theme="light"] main .hint,
html[data-theme="light"] main .subtle,
html[data-theme="light"] main .status,
[data-theme="light"] main p,
[data-theme="light"] main label,
[data-theme="light"] main small,
[data-theme="light"] main .muted,
[data-theme="light"] main .hint,
[data-theme="light"] main .subtle,
[data-theme="light"] main .status {
    color: #475569 !important;
}

/* champs */
html[data-theme="light"] main input,
html[data-theme="light"] main select,
html[data-theme="light"] main textarea,
[data-theme="light"] main input,
[data-theme="light"] main select,
[data-theme="light"] main textarea {
    background: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

/* boutons neutres */
html[data-theme="light"] main button,
[data-theme="light"] main button {
    border-color: #cbd5e1 !important;
}

/* boutons secondaires */
html[data-theme="light"] main button.secondary,
[data-theme="light"] main button.secondary {
    background: #f8fafc !important;
    color: #1e293b !important;
}

/* état désactivé */
html[data-theme="light"] main button:disabled,
[data-theme="light"] main button:disabled {
    opacity: 0.55 !important;
}

/* navigation outils : on la garde sombre */
html[data-theme="light"] .heure-tools-nav,
[data-theme="light"] .heure-tools-nav {
    background: rgba(8, 17, 29, 0.92) !important;
    color: #f8fafc !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* =========================================================
   HEURE SUISSE — coque commune des pages outils
   ========================================================= */

:root {
    --swiss-red: #FF0000;
    --hs-navy: #07111E;
    --hs-navy-2: #0B1726;
    --hs-light-bg: #EEF2F6;
    --hs-light-card: #E7EDF3;
    --hs-light-inner: #F7F9FB;
    --hs-light-border: #C9D3DE;
}

/* ---------- En-tête commun ---------- */

.tools-header,
.tool-header,
.site-header,
header {
    background: var(--hs-navy) !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

header a,
.tools-header a,
.tool-header a,
.site-header a {
    color: rgba(255,255,255,.70) !important;
}

header a:hover,
.tools-header a:hover,
.tool-header a:hover,
.site-header a:hover {
    color: #ffffff !important;
}

header strong,
.tools-header strong,
.tool-header strong,
.site-header strong,
header .brand,
.tools-header .brand,
.tool-header .brand {
    color: var(--swiss-red) !important;
}

/* réduit l'impression de grand vide sous la barre */
main {
    padding-top: 54px !important;
}

main > .eyebrow,
main > .kicker,
main > .subtitle-label {
    margin-top: 0 !important;
}

/* ---------- MODE CLAIR ---------- */

html[data-theme="light"] body {
    background: var(--hs-light-bg) !important;
    color: #0F172A !important;
}

/* panneaux principaux d'outils */
html[data-theme="light"] main .panel,
html[data-theme="light"] main .card,
html[data-theme="light"] main article,
html[data-theme="light"] main .timer-panel,
html[data-theme="light"] main .timer-card,
html[data-theme="light"] main .countdown-panel,
html[data-theme="light"] main .countdown-card,
html[data-theme="light"] main .stopwatch-panel,
html[data-theme="light"] main .stopwatch-card,
html[data-theme="light"] main .school-panel,
html[data-theme="light"] main .school-card,
html[data-theme="light"] main .sports-panel,
html[data-theme="light"] main .sports-card,
html[data-theme="light"] main .app-panel,
html[data-theme="light"] main .app-card {
    background: var(--hs-light-card) !important;
    color: #0F172A !important;
    border: 1px solid var(--hs-light-border) !important;
    box-shadow: 0 12px 28px rgba(15,23,42,.07) !important;
}

/* sous-cartes et lignes */
html[data-theme="light"] main .row,
html[data-theme="light"] main .item,
html[data-theme="light"] main .period,
html[data-theme="light"] main .exercise,
html[data-theme="light"] main .lap,
html[data-theme="light"] main .preset,
html[data-theme="light"] main .control-group {
    background: var(--hs-light-inner) !important;
    color: #0F172A !important;
    border-color: var(--hs-light-border) !important;
}

/* titres, valeurs et compteurs */
html[data-theme="light"] main h1,
html[data-theme="light"] main h2,
html[data-theme="light"] main h3,
html[data-theme="light"] main strong,
html[data-theme="light"] main .timer-display,
html[data-theme="light"] main .stopwatch-display,
html[data-theme="light"] main .countdown-display,
html[data-theme="light"] main .digital-time {
    color: #0F172A !important;
}

/* texte secondaire */
html[data-theme="light"] main p,
html[data-theme="light"] main label,
html[data-theme="light"] main small,
html[data-theme="light"] main .muted,
html[data-theme="light"] main .status,
html[data-theme="light"] main .hint {
    color: #475569 !important;
}

/* formulaires */
html[data-theme="light"] main input,
html[data-theme="light"] main select,
html[data-theme="light"] main textarea {
    background: #FFFFFF !important;
    color: #0F172A !important;
    border: 1px solid #B8C4D1 !important;
}

/* boutons secondaires */
html[data-theme="light"] main button:not(.primary):not([class*="start"]) {
    background: #F8FAFC;
    color: #1E293B;
    border-color: #C7D1DC;
}