/* ===== variables.css ===== */
/* ========================================
   Astralis — Thème nuit
   ======================================== */

/* ---- Splash screen ---- */

.splash-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 10, 15, 0.97);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.splash-content {
    max-width: 420px;
    text-align: center;
}

.splash-logo {
    width: 140px;
    height: 140px;
    border-radius: 20px;
    margin-bottom: 16px;
    object-fit: contain;
}

.splash-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 4px;
}

.splash-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 24px;
}

.splash-text {
    text-align: left;
    color: var(--text-primary);
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 24px;
}

.splash-text p {
    margin-bottom: 10px;
}

.splash-btn {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
}

/* ---- Cookie banner ---- */

#cookie-banner {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 400;
    background: var(--bg-card);
    border-top: 1px solid var(--border-subtle);
    padding: var(--space-3) var(--space-4);
    display: flex;
    justify-content: center;
}

.cookie-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.cookie-btn {
    flex-shrink: 0;
    padding: 6px 16px;
    font-size: 0.78rem;
}

@font-face {
    font-family: 'Orbitron';
    font-weight: 700;
    font-display: swap;
    src: url('orbitron-700.woff2') format('woff2'), url('orbitron-700.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-weight: 400;
    font-display: swap;
    src: url('inter-400.woff2') format('woff2'), url('inter-400.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-weight: 500;
    font-display: swap;
    src: url('inter-500.woff2') format('woff2'), url('inter-500.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-weight: 600;
    font-display: swap;
    src: url('inter-600.woff2') format('woff2'), url('inter-600.ttf') format('truetype');
}

:root {
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-card: #1a1a26;
    --bg-input: rgba(0, 0, 0, 0.3);
    --border: transparent;
    --border-subtle: rgba(255, 255, 255, 0.06);
    --text-primary: #d0d0dd;
    --text-secondary: #8888aa;
    --text-muted: #7a7a8e;
    --accent: #7B5FE7;
    --accent-hover: #8E75EF;
    --accent-rgb: 123, 95, 231;
    --accent-bg: rgba(var(--accent-rgb), 0.08);
    --accent-bg-strong: rgba(var(--accent-rgb), 0.15);
    --accent-border: rgba(var(--accent-rgb), 0.15);
    --accent-border-strong: rgba(var(--accent-rgb), 0.3);
    --accent-glow: rgba(var(--accent-rgb), 0.4);
    --accent-glow-strong: rgba(var(--accent-rgb), 0.6);
    --logo-filter: none;
    --emoji-hue: 220deg;
    --tw-day: #3b2d7a;
    --tw-civil: #2a1e60;
    --tw-nautical: #1c1348;
    --tw-astro: #110a30;
    --tw-night: #08051a;
    --danger: #d94a4a;
    --success: #4ad97a;
    --warning: #d9a84a;
    --score-high: #4ad97a;
    --score-medium: #d9a84a;
    --score-low: #d94a4a;
    --moon-lit: #e8e4d4;
    --moon-curve: rgb(255, 220, 100);
    --moon-dark: #2a2a36;
    --moon-rim: #555;

    /* Couleurs raies spectrales — utilisées par strategy-badge, comp-bars, channel-tint */
    /* Centralisé 2026-04-28 (single source of truth, plus de hardcoding) */
    --color-ha:   #e05050;
    --color-oiii: #50b0e0;
    --color-sii:  #e6932c;
    --color-nii:  #c080e0;
    --color-hb:   #5080e0;
    --color-heii: #4ac8e8;
    --color-hei:  #c5b3e0;
    --color-lum:  #c9d1d9;
    --color-rgb-r: #e05050;
    --color-rgb-g: #50e080;
    --color-rgb-b: #5080e0;

    /* Espacements (échelle 4 px) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* Rayons — 28-04 : design system rectangle 3px (cohérent famille badges) */
    --radius-sm: 3px;
    --radius: 3px;
    --radius-md: 3px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    /* Ombres */
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);

    /* Taille minimale des touch targets (WCAG) */
    --touch-target: 44px;
}

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    background: var(--bg-primary);
}

body {
    height: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
}


/* ===== layout.css ===== */
/* ========== Navigation ========== */

/* Top bar */
#topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 max(16px, calc((100vw - 768px) / 2));
    z-index: 100;
}

#topbar::before,
#topbar::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: max(0px, calc((100vw - 768px) / 2));
    pointer-events: none;
}

#topbar::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-primary), var(--bg-secondary));
}

#topbar::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-primary), var(--bg-secondary));
}

/* Desktop nav links in topbar */
.nav-links-desktop {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.nav-links-desktop .tab-link {
    color: var(--text-secondary);
    text-decoration: none;
    padding: var(--space-2);
    border-radius: var(--radius);
    transition: color 0.2s, background 0.2s;
    display: flex;
    align-items: center;
}

.nav-links-desktop .tab-icon-svg {
    width: 20px;
    height: 20px;
}

.nav-links-desktop .tab-link:hover {
    color: var(--text-primary);
    background: var(--bg-card);
}

.nav-links-desktop .tab-link.active {
    color: var(--accent);
    background: var(--accent-bg-strong);
}

/* Divider nav / date */
.nav-divider {
    width: 1px;
    height: 24px;
    background: linear-gradient(180deg, transparent, var(--accent), transparent);
    opacity: 0.3;
    margin: 0 10px;
}

/* Date in topbar */
.nav-date {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 0;
    margin-right: 8px;
    position: relative;
}

#nav-date-label {
    font-size: 0.85rem;
    color: var(--accent);
    white-space: nowrap;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.nav-date-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.nav-date-btn:hover {
    color: var(--accent);
}

.hidden-date-input {
    position: absolute;
    right: 0;
    top: 100%;
    opacity: 0;
    width: 0;
    height: 0;
    border: none;
    pointer-events: none;
}

/* Mobile night toggle (hidden on desktop) */
.mobile-only {
    display: none;
}

/* Bottom bar (hidden on desktop) */
#bottombar {
    display: none;
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
    #topbar {
        height: calc(56px + env(safe-area-inset-top));
        padding-top: env(safe-area-inset-top);
    }

    .nav-links-desktop {
        display: none;
    }

    .nav-divider {
        display: none;
    }

    /* !important nécessaire : classe utilitaire de forçage qui doit surclasser tout display défini */
    .twi-hide-mobile {
        display: none !important;
    }

    .mobile-only {
        display: block;
    }

    .nav-date {
        margin-left: auto;
        margin-right: 6px;
    }

    #nav-date-label {
        font-size: 0.78rem;
    }

    .nav-date-btn svg {
        width: 16px;
        height: 16px;
    }

    /* Bandeau cookies mobile : meme hauteur que la bottombar, contenu centre */
    #cookie-banner {
        height: calc(56px + env(safe-area-inset-bottom));
        padding: 0 var(--space-4) env(safe-area-inset-bottom);
        box-sizing: border-box;
    }
    .cookie-content {
        width: 100%;
        height: 100%;
        font-size: 0.72rem;
        gap: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin: 0;
    }
    .cookie-content span {
        flex: 1;
        min-width: 0;
        line-height: 1.25;
        display: flex;
        align-items: center;
    }
    .cookie-btn {
        padding: 6px 14px;
        font-size: 0.75rem;
        align-self: center;
    }

    #bottombar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(56px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--bg-secondary);
        border-top: 1px solid var(--border-subtle);
        display: flex;
        align-items: center;
        justify-content: space-around;
        z-index: 100;
    }

    #app {
        padding-bottom: calc(60px + env(safe-area-inset-bottom));
    }

    .home-controls {
        flex-wrap: nowrap;
        gap: 6px;
    }

    .home-controls .form-group.inline {
        flex: 2 1 0;
        min-width: 0;
    }
    .home-controls .form-group.inline.filter-group {
        flex: 1 1 0;
        max-width: 28%;
    }

    .home-controls .form-group.inline select {
        font-size: 0.78rem;
        padding: 7px 6px;
        width: 100%;
    }

    .home-controls .form-group.inline label {
        font-size: 0.68rem;
    }

    .home-controls .select-icon {
        display: none;
    }

    .screen-header h1 {
        font-size: 1.3rem;
    }

    .screen-header p {
        font-size: 0.75rem;
    }

    .site-coords {
        font-size: 0.65rem;
        white-space: nowrap;
    }
}

/* Tab links (bottom bar mobile) */
#bottombar .tab-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.65rem;
    padding: 6px 8px;
    border-radius: 3px;
    transition: color 0.2s;
}

#bottombar .tab-link.active {
    color: var(--accent);
}

.tab-icon {
    font-size: 1.2rem;
    line-height: 1;
}

.tab-icon-svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
}

.tab-label {
    font-weight: 500;
}

.nav-brand {
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.brand-name {
    font-family: 'Orbitron', sans-serif;
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent-glow-strong), 0 0 16px var(--accent-border-strong);
    -webkit-text-stroke: 0.5px rgba(0,0,0,0.3);
}


.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: 0.85rem;
    transition: color 0.2s, background 0.2s;
}

.nav-link:hover {
    color: var(--text-primary);
    background: var(--bg-card);
}

.nav-link.active {
    color: var(--accent);
    background: rgba(74, 144, 217, 0.1);
}

/* ========== Main content ========== */

#app {
    padding-top: 56px;
    min-height: 100dvh;
}

.screen {
    display: none;
    padding: var(--space-4);
    max-width: 800px;
    margin: 0 auto;
}

.screen.active {
    display: block;
}

.screen.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    z-index: 200;
    overflow-y: auto;
    padding: 40px 20px;
    max-width: 100%;
}

.screen.overlay.active {
    display: block;
}

.screen.overlay .overlay-header {
    max-width: 800px;
    margin: 0 auto;
}

.screen.overlay #detail-content {
    background: var(--bg-primary);
    border: 1px solid var(--border-color, rgba(255,255,255,0.1));
    border-radius: 3px;
    padding: 24px;
    max-width: 800px;
    margin: 0 auto;
}

.screen-header {
    margin-bottom: 20px;
}

#screen-setups .screen-header,
#screen-checklist .screen-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

/* Header sous-section Planètes (dans #solar-content) */
.solar-planets-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

/* Bulle d'aide Planètes : encadré lilas comme .sampling-info-panel */
#plan-info-bubble {
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin: 0 0 14px 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-secondary);
    font-style: normal;
    text-align: left;
}
#plan-info-bubble strong {
    color: var(--text-primary);
}

.screen-header h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.screen-header h2 {
    font-size: 1.1rem;
    color: var(--text-secondary);
}


/* ===== home.css ===== */
/* ========== Barre de recherche ========== */

.search-bar {
    position: relative;
    margin-bottom: 12px;
}

#search-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    box-sizing: border-box;
}

#search-input:focus {
    border-color: var(--accent);
}

#search-input::placeholder {
    color: var(--text-muted);
}

.search-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 0 0 var(--radius) var(--radius);
    max-height: 300px;
    overflow-y: auto;
    z-index: 200;
}

.search-dropdown.visible {
    display: block;
}

.search-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-subtle);
    transition: background 0.15s;
}

.search-item:last-child {
    border-bottom: none;
}

.search-item:hover {
    background: var(--accent-bg-strong);
}

.search-item.empty {
    color: var(--text-muted);
    cursor: default;
    justify-content: center;
}

.search-item-name {
    font-size: 0.88rem;
    font-weight: 500;
}

.search-item-type {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ========== Logo décoratif ========== */

.search-launcher {
    display: flex;
    justify-content: center;
    padding: 0;
    opacity: 0.3;
}

.search-launcher.hidden {
    display: none;
}

.search-launcher-logo {
    width: 180px;
    height: 180px;
    object-fit: contain;
    filter: drop-shadow(0 0 20px var(--accent-glow));
}

/* ========== Sort controls ========== */

.sort-controls {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    margin-bottom: 14px;
}



.sort-label {
    display: flex;
    align-items: center;
    font-size: 0.6rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin-right: 2px;
}

.sort-btn {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    padding: 6px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.sort-btn:hover {
    border-color: var(--text-muted);
}

.sort-btn.active[data-group="mag"] {
    border-color: #e8c84a;
    background: rgba(232, 200, 74, 0.08);
}

.sort-btn.active[data-group="dur"] {
    border-color: #4ac8e8;
    background: rgba(74, 200, 232, 0.08);
}

.sort-btn.active[data-group="ang"] {
    border-color: #4ae84a;
    background: rgba(74, 232, 74, 0.08);
}

/* Flipped state (inversé) */
.sort-btn.flipped[data-group="mag"] {
    border-color: #e8c84a;
    background: rgba(232, 200, 74, 0.08);
}

.sort-btn.flipped[data-group="dur"] {
    border-color: #4ac8e8;
    background: rgba(74, 200, 232, 0.08);
}

.sort-btn.flipped[data-group="ang"] {
    border-color: #4ae84a;
    background: rgba(74, 232, 74, 0.08);
}

/* ========== Title + Moon row ========== */

.title-moon-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.title-block {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.title-block h1 {
    margin: 0;
}

.site-coords {
    font-size: 0.75rem;
    color: var(--accent);
    opacity: 0.6;
    margin: 2px 0 0 0;
}

/* Decorative divider */
.section-divider {
    display: flex;
    align-items: center;
    margin: 12px 0;
}

.section-divider span {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.3;
}



/* Moon visual */

.moon-visual {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.moon-icon-wrap {
    position: relative;
    width: 48px;
    height: 48px;
}

.moon-phase-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 50%;
}

.moon-zoom-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.moon-zoom-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.moon-zoom-img {
    width: 280px;
    height: 280px;
    object-fit: contain;
    border-radius: 50%;
}

.moon-zoom-label {
    font-size: 1.1rem;
    color: var(--text-primary);
    font-weight: 600;
}

.moon-new-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #000;
    border: 1px solid #222;
}

.moon-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 12px rgba(200, 200, 160, 0.15);
}

.moon-light {
    position: absolute;
    top: 0;
    bottom: 0;
    background: #e8e4d4;
    transition: width 0.3s;
}

.moon-dark {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--bg-card);
    transition: width 0.3s;
}

.moon-info {
    text-align: right;
}

.moon-phase-pct {
    font-size: 1.5rem;
    font-weight: 700;
    color: #e8e4d4;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.moon-trend {
    font-size: 1.1rem;
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent-glow-strong), 0 0 16px var(--accent-border-strong);
}

.moon-rise-set {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
    display: flex;
    gap: 6px;
}

.moon-event {
    white-space: nowrap;
    font-size: 0.72rem;
}

@media (max-width: 768px) {
    .moon-rise-set {
        flex-direction: column;
        gap: 0;
        line-height: 1.3;
    }
}

/* ========== Night summary ========== */

.night-summary {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-top: 12px;
    margin-bottom: 4px;
}

.night-summary-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 10px;
}

/* Wrapper du titre + badge météo (placé à droite). Le margin-bottom est porté
   par le wrapper, le titre interne le neutralise pour rester aligné au badge.
   margin-right: auto sur le titre pousse badge + chevron à l'extrême droite,
   collés ensemble (pas de space-between qui répartirait en 3 colonnes). */
.night-summary-titlebar {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    gap: 6px;
}
.night-summary-titlebar .night-summary-title {
    margin-bottom: 0;
    margin-right: auto;
}

/* Mode plié (accordéon multi-nuits) : on garde titlebar + times + reco-note,
   on cache les poses + slider + warnings inline. Padding-bottom préservé pour
   un espace propre sous la reco-note. Titlebar cliquable (curseur pointer). */
.night-summary.night-summary--collapsed {
    padding-bottom: 16px;
    cursor: pointer;
}
.night-summary--collapsed .night-summary-poses,
.night-summary--collapsed .osc-ratio-slider,
.night-summary--collapsed .mono-degraded-hint,
.night-summary--collapsed .osc-moon-warn-above,
.night-summary--collapsed .osc-session-info-panel {
    display: none !important;
}
.night-summary--clickable .night-summary-titlebar {
    cursor: pointer;
}

/* Bouton chevron du titlebar — actif uniquement quand multi-nuits actif.
   Reprend le pattern SVG des details.section-block du mockup détail v2 :
   chevron vers le bas si déplié, vers la droite (rotate -90°) si plié. */
.night-collapse-toggle {
    background: transparent;
    border: none;
    padding: 4px;
    margin: 0;
    width: 22px;
    height: 22px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 4px;
    transition: background 0.15s, opacity 0.15s;
    opacity: 0.7;
}
.night-collapse-toggle:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.04);
}
.night-summary--clickable .night-collapse-toggle {
    display: inline-flex;
}

/* Mode "ajouter" (count===1 sur stratégie multi-filtre) : un vrai + accent
   au lieu du chevron, pour inviter à activer la 2ème nuit. */
.night-collapse-toggle--add { display: inline-flex; }
.night-collapse-toggle .add-icon {
    color: var(--accent);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
}
.night-collapse-toggle:hover .add-icon {
    transform: scale(1.15);
    transition: transform 0.15s;
}
.night-collapse-toggle .chevron {
    /* Pattern identique aux chevrons des details.detail-section (cf detail.css:885) :
       2 bordures en var(--accent) tournées → suit le thème automatiquement.
       Convention : déplié = ▴ (vers haut, "ouvert"), plié = ▾ (vers bas, "à ouvrir"). */
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(-135deg);
    transition: transform 0.2s;
    margin-top: 3px;
}
.night-summary--collapsed .night-collapse-toggle .chevron {
    transform: rotate(45deg);
    margin-top: -3px;
}

/* Multi-nuits : bouton "+ Ajouter la nuit suivante" sous le bloc J,
   visible uniquement pour les stratégies multi-filtre (OSC SHO + tous MONO). */
.add-night-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 9px 12px;
    background: transparent;
    border: 1px dashed var(--accent-border-strong);
    border-radius: var(--radius);
    color: var(--accent);
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-style 0.15s;
}
.add-night-btn:hover {
    background: var(--accent-bg);
    border-style: solid;
}
.add-night-btn .plus {
    margin-right: 6px;
    font-weight: 700;
    color: var(--accent);
}

/* Header du bloc nuit additionnelle (J+1, J+2…) : date relative + bouton retrait.
   Marge top pour bien séparer des cards J au-dessus. */
.night-summary-extra-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 13px;
    margin-bottom: 8px;
    padding: 0 4px;
}
.night-summary-extra-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
}
.night-summary-extra-label .date-rel {
    color: var(--accent);
    line-height: 1;
}
.night-summary-extra-label .date-abs {
    color: var(--text-muted);
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    line-height: 1;
}
.remove-night-btn {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.remove-night-btn:hover {
    border-color: var(--danger);
    color: var(--danger);
}

.night-summary-times {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.night-summary-block {
    text-align: center;
}

.night-summary-block .time {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
}

.night-summary-block .label {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.night-summary-duration {
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent);
    padding: 6px 0;
    flex: 1;
    background: linear-gradient(90deg, transparent, var(--accent-border), transparent);
}

.night-summary-poses {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: relative;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.night-summary-poses.dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.night-summary-poses::-webkit-scrollbar { display: none; }

.night-summary-pose {
    flex: 0 0 calc((100% - 4 * var(--space-2)) / 5);
    min-width: 0;
    scroll-snap-align: start;
    text-align: center;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    padding: 8px 4px;
}

/* Mobile : 4 visibles, scroll pour le reste, pas de flèches */
@media (max-width: 768px) {
    .night-summary-pose {
        flex: 0 0 23%;
    }
}


.night-summary-pose .pose-count {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.night-summary-pose .pose-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.night-summary-pose.recommended {
    border: 2px solid #4caf50;
    background: rgba(76, 175, 80, 0.1);
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
}

.night-summary-pose .pose-recommended.pose-estimated {
    color: var(--accent);
}

.night-summary-pose.recommended-bortle {
    border: 1px solid var(--accent);
    background: var(--accent-bg);
}

.night-summary-pose .pose-recommended {
    font-size: 0.6rem;
    color: #4caf50;
    font-weight: 600;
    margin-top: 2px;
    text-transform: uppercase;
}
.night-summary-pose .pose-topt {
    font-size: 0.55rem;
    color: #4caf50;
    font-weight: 400;
    text-transform: none;
}

.night-summary-reco-note {
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 2px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 6px;
}

.reco-part { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; line-height: 1; }
.reco-part > * { display: inline-flex; align-items: center; line-height: 1; }
.reco-sep { color: var(--text-muted); margin: 0 2px; }
.moon-glyph {
    font-style: normal;
    display: inline-block;
}
@media (max-width: 480px) {
    .night-summary-reco-note { font-size: 0.68rem; }
}
/* ========== Home controls ========== */

.home-controls {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.home-controls .form-group.inline {
    flex: 1;
    margin-bottom: 0;
}

.home-controls .form-group.inline label {
    font-size: 0.75rem;
    margin-bottom: 2px;
}

.home-controls .form-group.inline select {
    padding: 8px 10px;
    font-size: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.home-controls .form-group.inline select:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: none;
}

/* Seeing bar */
.seeing-bar {
    margin: 2px 0;
}

.seeing-loading {
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.5;
}

.seeing-mode-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    opacity: 0.5;
    margin-bottom: 4px;
    text-align: center;
    width: 100%;
}
.seeing-row-top {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-bottom: 6px;
    margin-bottom: 2px;
}
.seeing-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--text-secondary);
    padding: 5px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    cursor: pointer;
}
.seeing-btn:hover {
    background: rgba(255,255,255,0.15);
    color: var(--text-primary);
}
.seeing-btn-inline {
    display: flex;
    align-items: center;
}
.seeing-btn-refresh {
    padding: 2px 6px;
    font-size: 0.7rem;
    border: none;
    background: none;
    filter: grayscale(1) brightness(0.6) sepia(1) hue-rotate(var(--emoji-hue, 220deg)) saturate(3) brightness(1.2);
}
.seeing-refresh {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.seeing-ago {
    font-size: 0.6rem;
    color: var(--text-muted);
    opacity: 0.6;
}
.seeing-cloud-toggle {
    cursor: pointer;
}
.seeing-cloud-toggle:hover .seeing-label {
    color: var(--text-primary);
}
.cloud-detail {
    display: none;
    gap: 14px;
}
.cloud-detail-open {
    display: contents;
}

.seeing-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 8px 0;
    font-size: 0.8rem;
    flex-wrap: wrap;
}
@media (min-width: 768px) {
    .seeing-row-top {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .seeing-row-top,
    .seeing-row-meteo {
        display: contents;
    }
    .seeing-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 14px;
        padding: 8px 0;
        font-size: 0.8rem;
    }
}

.seeing-sub-item .seeing-label {
    font-size: 0.58rem;
    opacity: 0.7;
}

.seeing-sub-item .seeing-value {
    font-size: 0.75rem;
    font-weight: 600;
}

.seeing-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.seeing-main {
    flex-shrink: 0;
}

.seeing-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.seeing-value {
    font-weight: 700;
    font-size: 0.85rem;
}

.seeing-dots {
    display: flex;
    gap: 3px;
}

.seeing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.seeing-sub {
    font-size: 0.65rem;
    color: var(--text-secondary);
    opacity: 0.6;
}

.seeing-warn .seeing-value {
    color: #ff8c42;
}

.seeing-warn .seeing-label {
    color: #ff8c42;
}

.controls-label {
    width: 100%;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

.controls-info {
    margin-left: auto;
    opacity: 0.4;
    cursor: help;
}

.select-icon-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    vertical-align: middle;
}

.select-with-icon {
    display: flex;
    align-items: center;
    gap: 6px;
}

.select-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.select-with-icon select {
    flex: 1;
    min-width: 0;
}

/* ========== Favoris ========== */

.card-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ========== Cards (liste de cibles) ========== */

.card-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.card {
    background: var(--bg-card);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    border-radius: var(--radius);
    padding: 14px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
    box-shadow: 0 0 0 rgba(123, 95, 231, 0);
}

.card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 12px rgba(123, 95, 231, 0.18);
    transform: translateY(-1px);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    gap: 10px;
}

/* Groupe titre + badges titre (OSC / K&S / INT) */
.card-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.title-badges {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

/* Mobile : badges sous le titre, fav/score restent alignés avec le titre */
@media (max-width: 600px) {
    .card-title-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

.overlay-header h1 {
    font-family: 'Orbitron', sans-serif;
}



.card-title {
    font-size: 1.05rem;
    font-weight: 600;
}

.card-meta {
    font-size: 0.82rem;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
}

/* V8 : ligne 1 = identité objet + visibilité nuit + séparation lune */
.card-meta-main {
    font-size: 0.82rem;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    margin-bottom: 4px;
    line-height: 1.4;
}
.card-meta-main strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* V8 : ligne 2 = indicateurs MAG. / OBS. / DIM. avec labels (comme les boutons de tri) */
.card-meta-indicators {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
}
.card-meta-indicators strong {
    color: var(--text-primary);
    font-weight: 600;
}
.indicator-group {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.indicator-label {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.card-indicator {
    display: inline-flex;
    align-items: center;
}

.season-bar-wrap {
    padding: 10px 12px 6px;
    margin-top: 8px;
}

.season-bar {
    display: block;
    width: 100%;
}


/* ========== Top Picks ========== */

.top-picks {
    margin-bottom: 20px;
}

.top-picks-header,
.discoveries-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.top-picks-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--score-high);
    padding-left: 4px;
    letter-spacing: 0.3px;
}

.shuffle-btn {
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.shuffle-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}

body.night-red .shuffle-btn:hover {
    color: #cc3333;
    border-color: #cc3333;
}

.top-picks-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.card.top-pick {
    border: 1.5px solid color-mix(in srgb, var(--score-high) 28%, transparent);
    box-shadow: 0 0 8px rgba(74, 217, 122, 0.05);
}

.card.top-pick:hover {
    border-color: var(--score-high);
    box-shadow: 0 0 14px rgba(74, 217, 122, 0.25);
}

body.night-red .card.top-pick {
    border-color: rgba(136, 51, 34, 0.5);
    box-shadow: 0 0 8px rgba(136, 51, 34, 0.1);
}
body.night-red .card.top-pick:hover {
    border-color: #883322;
    box-shadow: 0 0 14px rgba(136, 51, 34, 0.25);
}

/* Discoveries */

.discoveries {
    margin-bottom: 20px;
}

.discoveries-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--score-medium);
    padding-left: 4px;
    letter-spacing: 0.3px;
}

.discoveries-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.card.discovery {
    border: 1.5px solid color-mix(in srgb, var(--score-medium) 28%, transparent);
    box-shadow: 0 0 8px rgba(217, 168, 74, 0.05);
}

.card.discovery:hover {
    border-color: var(--score-medium);
    box-shadow: 0 0 14px rgba(217, 168, 74, 0.25);
}

body.night-red .card.discovery {
    border-color: rgba(102, 68, 34, 0.5);
    box-shadow: 0 0 8px rgba(102, 68, 34, 0.1);
}
body.night-red .card.discovery:hover {
    border-color: #664422;
    box-shadow: 0 0 14px rgba(102, 68, 34, 0.25);
}

/* Card body layout */

.card-body {
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-info {
    flex: 1;
    min-width: 0;
}

.card-framing {
    flex-shrink: 0;
    background: rgba(10, 10, 15, 0.5);
    border-radius: 3px;
    padding: 2px;
    border: 1px solid var(--border);
}

.card-framing svg {
    display: block;
}

.framing-preview-large {
    display: flex;
    justify-content: center;
    background: rgba(5, 5, 10, 0.6);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-2);
    margin-bottom: 16px;
}

.framing-preview-large svg {
    display: block;
}

.score-framing-section {
    margin-bottom: 4px;
}





/* ===== components.css ===== */
/* ========== Forms ========== */

.form-group {
    margin-bottom: 14px;
}

.form-group label,
.form-group .form-label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.form-group label.toggle-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-group label.toggle-label input[type="checkbox"] {
    width: auto;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus {
    border-color: var(--accent-border);
}

select,
.form-group select,
.home-controls select,
.gear-form select {
    color-scheme: dark;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 32px;
    --_arrow: var(--accent);
    background-image: linear-gradient(45deg, transparent 50%, var(--_arrow) 50%),
                      linear-gradient(135deg, var(--_arrow) 50%, transparent 50%);
    background-position: right 14px center, right 8px center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}
@media (max-width: 600px) {
    select,
    .form-group select,
    .home-controls select,
    .gear-form select {
        padding-right: 10px;
        background-image: none;
    }
}

select option {
    background: var(--bg-card);
    color: var(--text-primary);
}

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

/* ========== Buttons ========== */

.btn {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
}

.btn-primary:hover {
    background: var(--accent-hover);
}

.btn-secondary {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--bg-input);
}

.btn-icon {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 4px 8px;
}

.btn-danger {
    background: var(--danger);
    color: #fff;
}

/* ========== Dialog (Utils.confirm / Utils.alert) ========== */
.dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.dialog-box {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 3px;
    padding: 24px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.dialog-message {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-primary);
    margin-bottom: 20px;
}
.dialog-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.dialog-actions .btn {
    min-width: 80px;
}



/* ===== settings.css ===== */
/* ========== Settings sections ========== */

.settings-section {
    background: linear-gradient(135deg, var(--bg-secondary), rgba(0, 0, 0, 0.2));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-bottom: 20px;
}

.settings-section h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 14px;
}

/* Accordion paramètres */
.settings-accordion {
    cursor: pointer;
}
.settings-accordion.open {
    cursor: default;
}
.settings-accordion-header {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.settings-accordion-header h2 {
    margin-bottom: 0;
    flex: 1;
}
.settings-accordion-toggle {
    color: var(--accent);
    font-size: 1.1rem;
    font-weight: 700;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.settings-accordion-preview {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 6px;
    cursor: pointer;
    line-height: 1.5;
    padding-left: 30px;
}
.settings-accordion-body {
    display: none;
    margin-top: 14px;
    background: inherit;
    -webkit-tap-highlight-color: transparent;
}
.settings-accordion.open > .settings-accordion-body {
    display: block;
}
.settings-accordion.open > .settings-models-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.settings-accordion.open > .settings-accordion-preview {
    display: none;
}
.settings-accordion.open > .settings-accordion-header .settings-accordion-toggle {
    color: var(--success);
}


.sites-list {
    margin-bottom: 14px;
}

.site-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 6px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.site-item.active {
    border-color: var(--accent);
    border-width: 2px;
    background: var(--accent-bg);
}
.site-item.active.cal-border-0 { border-color: #4caf50; border-width: 2px; }
.site-item.active.cal-border-1 { border-color: #e91e90; border-width: 2px; }
.site-item.active.cal-border-2 { border-color: #ff9800; border-width: 2px; }
.site-item.active.cal-border-3 { border-color: #00bcd4; border-width: 2px; }
.site-item.active.cal-border-4 { border-color: #fdd835; border-width: 2px; }

.site-item-info {
    flex: 1;
}

.site-item-name {
    font-weight: 600;
    font-size: 0.85rem;
}

.site-item-detail {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.site-item-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.sensor-type-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}
.site-item.cal-border-0 { border-color: #4caf50; }
.site-item.cal-border-1 { border-color: #e91e90; }
.site-item.cal-border-2 { border-color: #ff9800; }
.site-item.cal-border-3 { border-color: #00bcd4; }
.site-item.cal-border-4 { border-color: #fdd835; }

.btn-icon-small {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
    min-width: var(--touch-target);
    min-height: var(--touch-target);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.btn-icon-small:hover {
    opacity: 1;
}

/* ========== Setup list ========== */

.setup-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-3);
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.setup-item-info {
    flex: 1;
}

.setup-item-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.setup-item-detail {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.setup-item-actions {
    display: flex;
    gap: var(--space-2);
}

/* ========== Meteoblue settings ========== */

.meteoblue-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.meteoblue-key-input {
    flex: 1;
    font-size: 0.8rem;
}
.meteoblue-toggle {
    margin-top: 6px;
}
.meteoblue-toggle input {
    width: auto;
    display: inline;
    margin-right: 6px;
}
.meteoblue-status {
    display: block;
    font-size: 0.8rem;
    margin-top: 4px;
    min-height: 1em;
    color: var(--text-muted);
}
.meteoblue-status.ok { color: #4caf50; }
.meteoblue-status.error { color: #f44336; }
.meteoblue-status.info { color: var(--accent); }

/* Bandeau d'erreur global (catalog load fail, localStorage quota...) */
.global-error-banner {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #b33;
    color: white;
    padding: 10px 16px;
    display: none;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.88rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.global-error-text { flex: 1; }
.global-error-close {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0 4px;
}

/* Bandeau "nouvelle version disponible" */
.update-banner {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9998;
    background: var(--bg-card);
    border: 1px solid var(--accent);
    color: var(--text-primary);
    padding: 10px 14px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.88rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.update-banner-btn {
    background: var(--accent);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.85rem;
}
.update-banner-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0 4px;
}

/* ========== Catalog toggles ========== */

.catalog-toggle-row {
    display: grid;
    grid-template-columns: 18px 38px 1fr 48px;
    align-items: center;
    gap: 6px;
    padding: 5px 0;
    cursor: pointer;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--border-subtle);
}
.catalog-toggle-row:last-of-type { border-bottom: none; }
.catalog-toggle-row input[type="checkbox"] {
    accent-color: var(--accent);
    width: 15px;
    height: 15px;
    margin: 0;
}
.catalog-toggle-label {
    font-weight: 600;
    color: var(--text-primary);
}
.catalog-toggle-label::after {
    content: attr(data-desc);
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-left: 6px;
}
.catalog-toggle-count {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    color: var(--accent);
    text-align: right;
}
@media (max-width: 480px) {
    .catalog-toggle-label::after { display: none; }
}
.catalog-total {
    margin-top: 10px;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.82rem;
    color: var(--accent);
    padding: 6px 0;
}

/* ========== Placeholder ========== */

.placeholder {
    text-align: center;
    color: var(--text-muted);
    padding: 10px;
    font-size: 0.9rem;
}
.spinner-dots {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
}
.spinner-dots .dot {
    width: 8px;
    height: 8px;
    margin: 0 2.5px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.3;
    transform: scale(0.4);
}
.spinner-dots .dot:nth-child(1) { animation: dot1 1.2s ease-in-out infinite; }
.spinner-dots .dot:nth-child(2) { animation: dot2 1.2s ease-in-out infinite; }
.spinner-dots .dot:nth-child(3) { animation: dot3 1.2s ease-in-out infinite; }
.spinner-dots .dot:nth-child(4) { animation: dot4 1.2s ease-in-out infinite; }
.spinner-dots .dot:nth-child(5) { animation: dot5 1.2s ease-in-out infinite; }
@keyframes dot1 {
    0%, 60%, 100% { transform: scale(0.4); opacity: 0.3; }
    30% { transform: scale(1); opacity: 1; }
}
@keyframes dot2 {
    0%, 8%, 68%, 100% { transform: scale(0.4); opacity: 0.3; }
    38% { transform: scale(1); opacity: 1; }
}
@keyframes dot3 {
    0%, 17%, 77%, 100% { transform: scale(0.4); opacity: 0.3; }
    47% { transform: scale(1); opacity: 1; }
}
@keyframes dot4 {
    0%, 25%, 85%, 100% { transform: scale(0.4); opacity: 0.3; }
    55% { transform: scale(1); opacity: 1; }
}
@keyframes dot5 {
    0%, 33%, 93%, 100% { transform: scale(0.4); opacity: 0.3; }
    63% { transform: scale(1); opacity: 1; }
}

/* ========== Info bulle ========== */

.info-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    font-style: normal;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 4px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    /* Zone de clic étendue pour le doigt (padding invisible) */
    position: relative;
}
.info-toggle::before {
    content: '';
    position: absolute;
    inset: -13px;
    min-width: var(--touch-target);
    min-height: var(--touch-target);
}
.info-toggle:active,
.info-toggle.active {
    border-color: var(--accent);
    color: var(--accent);
}
.info-bubble {
    display: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 6px 0;
    font-size: 0.62rem;
    line-height: 1.2;
    color: var(--text-muted);
    font-style: normal;
    text-align: center;
    width: 100%;
    flex-basis: 100%;
}
.info-bubble.visible {
    display: block;
}

/* ========== Responsive ========== */

@media (max-width: 480px) {

    .detail-grid {
        grid-template-columns: auto 1fr;
        font-size: 0.82rem;
    }

    .cl-flag-cycle {
        width: 28px;
        height: 28px;
    }
    .cl-arrows .btn-icon-sm {
        width: 26px;
        height: 20px;
        font-size: 0.55rem;
    }
    .cl-arrow-placeholder {
        width: 22px;
        height: 13px;
    }
    .checklist-edit-item .cl-delete-item {
        width: 28px;
        height: 28px;
    }
    .checklist-legend-row {
        flex-wrap: nowrap;
    }
    .checklist-legend-title {
        font-size: 0.75rem;
    }
    .cl-legend-item {
        min-width: unset;
        padding: 3px 8px;
        font-size: 0.72rem;
    }
}

/* ========== Setup detail cards ========== */

.setup-detail-sensor {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-bottom: 16px;
}


.setup-photo {
    display: block;
    width: 140px;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-sm);
    margin: 12px auto 0;
}

.setup-inline-photo {
    width: 80px;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-sm);
    margin-top: 4px;
}

.setup-detail-sensor h2 {
    font-size: 1rem;
    color: var(--accent);
    margin-bottom: 10px;
}

.setup-detail-card {
    background: linear-gradient(135deg, var(--bg-secondary), rgba(0, 0, 0, 0.2));
    border: 1px solid transparent;
    border-radius: var(--radius);
    margin-bottom: 8px;
    overflow: hidden;
    transition: border-color 0.15s;
}

.setup-detail-card:hover {
    border-color: var(--accent-border-strong);
}

.gear-editing .setup-detail-card:hover {
    border-color: var(--warning);
}

/* Collapsed header */
.setup-card-header {
    padding: 12px 16px;
    cursor: pointer;
}

.setup-card-title-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.setup-card-toggle {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.setup-detail-card.open .setup-card-toggle {
    color: var(--success);
}

.setup-card-header h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    flex: 1;
    min-width: 0;
}

.setup-card-header-content {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 10px;
}

.setup-card-photo {
    display: block;
    width: 140px;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    transition: width 0.2s;
}

.setup-detail-card.open .setup-card-photo {
    width: 100px;
}

.setup-card-preview {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 2px;
}

.preview-spec {
    font-size: 0.72rem;
    color: var(--text-secondary, rgba(255,255,255,0.5));
    line-height: 1.4;
}

.setup-detail-card.open .setup-card-preview {
    display: none;
}

/* Body hidden by default */
.setup-card-body {
    display: none;
    padding: 0 16px 16px;
}

.setup-detail-card.open .setup-card-body {
    display: block;
}

/* Legacy compat */
.setup-detail-header {
    margin-bottom: 14px;
    padding-bottom: 10px;
}

.setup-detail-section {
    margin-bottom: 12px;
}

.setup-dual-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.82rem;
}

.setup-dual-table th {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent);
    text-align: center;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-subtle);
}

.setup-dual-table th:first-child {
    text-align: left;
}

.setup-dual-table td {
    padding: 5px 8px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle);
}

.setup-dual-table td:first-child {
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.setup-dual-table td:nth-child(2),
.setup-dual-table td:nth-child(3) {
    text-align: center;
    font-weight: 600;
    color: var(--text-primary);
}

.setup-detail-section h3 {
    font-size: 0.85rem;
    color: var(--accent);
    margin-bottom: 6px;
    font-weight: 600;
}

.setup-detail-targets,
.setup-detail-notes {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.setup-detail-filter-note {
    font-size: 0.8rem;
    color: var(--warning);
    margin-top: 4px;
    font-style: italic;
}

/* ========== Setup filter rows ========== */

.setup-filter-row {
    padding: 10px 0;
    border-bottom: 1px solid rgba(42, 42, 58, 0.5);
}

.setup-filter-row:last-child {
    border-bottom: none;
}

/* Header de filtre : nom à gauche, badges CAL à droite (cohérent avec .sensor-cal-badges) */
.setup-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.setup-filter-name {
    font-weight: 600;
    font-size: 0.92rem;
}

.setup-filter-cal {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.setup-filter-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.setup-filter-channels {
    color: var(--accent);
    font-weight: 500;
}

.setup-filter-bandpass {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-style: italic;
}

.setup-filter-combo {
    font-size: 0.78rem;
    color: var(--warning);
    margin-top: 3px;
    font-style: italic;
}

/* ========== Modal ========== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    max-width: 520px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 20px;
}
.modal.modal-compact {
    max-width: 320px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
}

.modal-header h2 {
    font-size: 1.1rem;
    color: var(--text-primary);
    flex: 1;
}

.modal-header .btn-icon {
    font-size: 1.6rem;
    color: var(--text-secondary);
}

/* Score modal header */

.score-modal-header {
    align-items: flex-start;
}
.score-modal-header h2 {
    font-size: 1rem;
    line-height: 1.2;
}
.score-modal-id {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.4em;
    font-weight: 700;
    color: var(--text-primary);
}
.score-modal-catalog {
    font-size: 0.75em;
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 2px;
}
.score-modal-subtitle {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 4px;
    line-height: 1.4;
}
.score-modal-subtitle em {
    font-style: italic;
    color: var(--text-muted);
}

/* Score breakdown */

.score-profile {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
}

.score-total {
    text-align: center;
    margin-bottom: 18px;
}

.score-total-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
}

.score-total-value.high { color: var(--score-high); }
.score-total-value.medium { color: var(--score-medium); }
.score-total-value.low { color: var(--score-low); }

.score-total-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.score-row {
    margin-bottom: 12px;
}

.score-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.score-row-label {
    font-size: 0.85rem;
    color: var(--text-primary);
}

.score-row-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.score-bar {
    height: 6px;
    background: var(--bg-card);
    border-radius: 3px;
    overflow: hidden;
}

.score-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

.score-bar-fill.high { background: var(--score-high); }
.score-bar-fill.medium { background: var(--score-medium); }
.score-bar-fill.low { background: var(--score-low); }

.score-row-detail {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 3px;
}

/* Tips */

.score-tips {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.score-tips h3 {
    font-size: 0.85rem;
    color: var(--accent);
    margin-bottom: 8px;
}

.score-tip {
    font-size: 0.82rem;
    color: var(--text-secondary);
    padding: 6px 10px;
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-sm);
    background: var(--accent-bg);
    margin-bottom: 6px;
}

.score-warnings {
    margin-top: 12px;
}

.score-warning {
    font-size: 0.82rem;
    color: var(--warning);
    padding: 6px 10px;
    border: 1px solid rgba(217, 168, 74, 0.25);
    border-radius: var(--radius-sm);
    background: rgba(217, 168, 74, 0.06);
    margin-bottom: 6px;
}


/* ===== checklist.css ===== */
/* ========== Checklist ========== */

.checklist-group {
    margin-bottom: 16px;
}

.checklist-group-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(42, 42, 58, 0.5);
}

.checklist-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}

.checklist-item.checked label {
    color: var(--text-muted);
    text-decoration: line-through;
}

.checklist-item label {
    font-size: 0.9rem;
    cursor: pointer;
    flex: 1;
}

.checklist-item .required {
    color: var(--warning);
    font-size: 0.75rem;
    font-weight: 600;
}

.checklist-item.important {
    background: rgba(255, 170, 0, 0.1);
    border: 1px solid rgba(255, 170, 0, 0.4);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

.checklist-item.important label {
    color: #ffaa00;
    font-weight: 600;
}

.checklist-item.important.checked label {
    color: var(--text-muted);
}

.checklist-item.critical {
    background: rgba(220, 40, 40, 0.1);
    border: 1px solid rgba(220, 40, 40, 0.4);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

.checklist-item.critical label {
    color: #dc2828;
    font-weight: 600;
}

.checklist-item.critical.checked label {
    color: var(--text-muted);
}

.checklist-progress {
    margin-bottom: 16px;
}

.checklist-progress-bar {
    height: 8px;
    background: var(--bg-card);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.checklist-progress-fill {
    height: 100%;
    background: linear-gradient(to right, var(--accent), var(--success));
    border-radius: 3px;
    transition: width 0.3s;
}

.checklist-progress-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.checklist-empty {
    text-align: center;
    padding: 48px 24px;
    background: var(--bg-input);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-md);
    margin-top: 16px;
}
.checklist-empty p {
    color: var(--text-muted);
    margin: 0 0 16px 0;
    font-size: 0.9rem;
}

.gear-empty {
    text-align: center;
    padding: 48px 24px;
    background: var(--bg-input);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-md);
    margin: 16px 0;
}
.gear-empty p {
    color: var(--text-primary);
    margin: 0 0 8px 0;
    font-size: 0.95rem;
    line-height: 1.5;
}
.gear-empty .gear-empty-sub {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 8px;
}

.checklist-group-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
}

.checklist-group.done .checklist-group-title {
    color: #4caf50;
}

/* ---- Mode édition checklist ---- */

.checklist-edit-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.checklist-edit-section-title {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--accent);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 6px 10px;
    outline: none;
}

.checklist-edit-section-title:focus {
    border-color: var(--accent);
}

.checklist-edit-btns {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.btn-icon-sm {
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: 3px;
    color: var(--text-secondary);
    font-size: 0.7rem;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.btn-icon-sm:hover {
    background: var(--accent-bg-strong);
    color: var(--accent);
}

/* Spécificité (0,3,1) — surclasse .btn-icon-sm:hover (0,2,1) sans !important */
.checklist-edit-btns .cl-delete-section:hover,
.checklist-edit-btns .cl-delete-item:hover {
    background: rgba(217, 74, 74, 0.15);
    color: var(--danger);
}

.checklist-edit-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px; /* pas de conflit : propriété non définie par .checklist-item */
}

.checklist-edit-label {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 0.82rem;
    padding: 6px 10px;
    outline: none;
    min-width: 0;
}

.checklist-edit-label:focus {
    border-color: var(--accent);
}

.cl-flag-cycle {
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: 3px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    opacity: 0.4;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.cl-flag-cycle:hover { opacity: 0.7; }
.cl-flag-cycle.state-critical {
    opacity: 1;
    color: var(--danger);
    background: rgba(217, 74, 74, 0.15);
    border-color: var(--danger);
}
.cl-flag-cycle.state-important {
    opacity: 1;
    color: var(--warning);
    background: rgba(217, 168, 74, 0.15);
    border-color: var(--warning);
}

.cl-arrows {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-shrink: 0;
}
.cl-arrows .btn-icon-sm {
    width: 28px;
    height: 22px;
    font-size: 0.65rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cl-arrow-placeholder {
    width: 24px;
    height: 14px;
    display: block;
}

.cl-flag {
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: 3px;
    font-size: 0.75rem;
    width: 28px;
    height: 28px;
    cursor: pointer;
    opacity: 0.3;
    transition: opacity 0.15s;
}

.cl-flag:hover {
    opacity: 0.7;
}

.cl-flag.active {
    opacity: 1;
}

.cl-flag-critical {
    color: var(--danger);
}

.cl-flag-critical.active {
    background: rgba(217, 74, 74, 0.15);
    border-color: var(--danger);
}

.cl-flag-important {
    color: var(--warning);
}

.cl-flag-important.active {
    background: rgba(217, 168, 74, 0.15);
    border-color: var(--warning);
}

/* Spécificité (0,2,0) — surclasse .btn (0,1,0) sans !important */
.btn.cl-add-item {
    margin: 4px 0 0;
    font-size: 0.8rem;
    padding: 6px 12px;
    width: 100%;
}

#checklist-edit-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: 4px;
}

.checklist-edit-hint {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-style: italic;
    text-align: center;
    padding: var(--space-4) var(--space-3);
    margin: 0;
}

#checklist-add-section {
    width: 100%;
}

#checklist-edit-toggle {
    font-size: 1.2rem;
    padding: 4px 8px;
}

#gear-edit-toggle,
#checklist-edit-toggle {
    border-radius: var(--radius);
    transition: background 0.15s;
}

#gear-edit-toggle:hover,
#checklist-edit-toggle:hover {
    background: rgba(138, 104, 255, 0.08);
}

.checklist-legend {
    background: rgba(138, 104, 255, 0.06);
    border: 1px solid rgba(138, 104, 255, 0.2);
    border-radius: var(--radius);
    padding: var(--space-3);
    font-size: 0.82rem;
}

.checklist-legend-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 4px;
}

.checklist-legend-title {
    color: var(--text-secondary);
    font-weight: 500;
}

.cl-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 100px;
    justify-content: flex-start;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.2;
    box-sizing: border-box;
}

.cl-legend-icon {
    display: inline-block;
    width: 1.1em;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1;
}

.cl-legend-critical {
    background: rgba(231, 76, 60, 0.12);
    color: var(--danger);
    border: 1px solid rgba(231, 76, 60, 0.35);
}

.cl-legend-important {
    background: rgba(217, 168, 74, 0.12);
    color: var(--warning);
    border: 1px solid rgba(217, 168, 74, 0.35);
}

.checklist-legend-hint {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-style: italic;
}

.checklist-restore-btn {
    width: 100%;
    background: rgba(217, 168, 74, 0.1);
    color: var(--warning);
    border: 1px solid var(--warning);
    font-weight: 500;
}

.checklist-restore-btn:hover {
    background: rgba(217, 168, 74, 0.2);
}

.btn-link {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.82rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    padding: 4px 8px;
    font-family: inherit;
}

.btn-link:hover {
    color: var(--accent);
}

.checklist-progress-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    margin-top: 4px;
    flex-wrap: wrap;
}

#cl-new-session {
    font-size: 0.78rem;
}


/* ===== skymap.css ===== */
/* ========== Système solaire ========== */

.solar-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.solar-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.solar-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
}

.solar-card.high {
    border-color: rgba(76, 175, 80, 0.5);
}

.solar-card.medium {
    border-color: rgba(255, 170, 0, 0.5);
}

.solar-card.low {
    border-color: rgba(255, 85, 85, 0.5);
}

.solar-card.hidden {
    opacity: 0.5;
}

.solar-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 8px;
}

.solar-emoji {
    font-size: 1.3rem;
}

.solar-name {
    font-weight: 600;
    font-size: 1rem;
    flex: 1;
}

.solar-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
}

.solar-status.high {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
}

.solar-status.medium {
    background: rgba(255, 170, 0, 0.15);
    color: #ffaa00;
}

.solar-status.low {
    background: rgba(255, 85, 85, 0.15);
    color: #ff5555;
}

.solar-status.hidden {
    background: rgba(128, 128, 128, 0.1);
    color: var(--text-muted);
}

.solar-card-body {
    padding-top: 4px;
}

.solar-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 12px;
    font-size: 0.85rem;
}

.solar-dl dt {
    color: var(--text-secondary);
}

.solar-dl dd {
    color: var(--text-primary);
}

.solar-extra {
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--accent);
    font-weight: 500;
}

.solar-extra.warning {
    color: #ff5555;
}

.solar-constellation {
    font-size: 0.7rem;
    color: var(--accent);
    opacity: 0.7;
    font-style: italic;
}

.altitude-curve {
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 6px;
}

.altitude-curve-svg {
    width: 100%;
    height: auto;
}

.solar-section {
    margin-bottom: 24px;
}

.solar-section h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.95rem;
    color: var(--accent);
    margin-bottom: 12px;
}

/* Calendrier lunaire (ligne) */

.moon-calendar-line {
    margin-top: 12px;
    padding: 4px 0;
}

.moon-calendar-title {
    text-align: center;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-primary);
    margin-bottom: 6px;
    text-transform: capitalize;
}

.moon-cal-strip {
    display: flex;
    justify-content: space-between;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.moon-cal-strip::-webkit-scrollbar {
    display: none;
}

.moon-cal-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: default;
    border-radius: 3px;
    padding: 2px 1px;
}

.moon-cal-cell.active {
    background: none;
}
.moon-cal-cell.active .moon-cal-num {
    font-weight: 700;
    color: var(--accent);
}


.moon-cal-num {
    font-size: 0.55rem;
    color: var(--text-muted);
    line-height: 1;
}

.moon-cal-emoji {
    font-size: 0.7rem;
    line-height: 1;
}

/* Événements lunaires */

.moon-events {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: 8px;
}

/* ========== Sky Map ========== */

.skymap-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.skymap-header h1 { flex-shrink: 0; }
.skymap-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.skymap-svg {
    width: 100%;
    max-width: 600px;
    height: auto;
    touch-action: none;
}
/* Toolbar skymap : inline dans le header */
.skymap-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-size: 0.75rem;
}
.skymap-cat-toggles {
    display: flex;
    gap: 4px;
}
/* Toggle behavior — visuel délégué à .cat-badge (badges.css) */
.skymap-cat-toggle {
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.15s;
    border: none;
    font-family: inherit;
}
.skymap-cat-toggle.active {
    opacity: 1;
}
.skymap-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}
.skymap-nav-btn {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    opacity: 0.8;
}
.skymap-nav-btn:active {
    opacity: 1;
}
.skymap-nav-counter {
    color: var(--text-muted);
    font-size: 0.72rem;
    min-width: 32px;
    text-align: center;
}
.skymap-time-select {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-muted);
    font-size: 0.7rem;
    padding: 2px 4px;
    cursor: pointer;
}
@media (max-width: 767px) {
    section#screen-skymap.screen.active {
        display: flex; /* spécificité id+tag+2classes > .screen.active — pas besoin de !important */
        flex-direction: column;
        height: calc(100dvh - 56px - 56px - env(safe-area-inset-bottom));
        box-sizing: border-box;
        padding-bottom: 0;
    }
    #skymap-container {
        flex: 1;
        min-height: 0;
        margin: 0 -16px;
        overflow: hidden;
        touch-action: none;
    }
    .skymap-wrap {
        width: 100%;
        height: 100%;
    }
    .skymap-svg {
        width: 100%;
        height: 100%;
    }
}

.skymap-target-label {
    font-family: 'Inter', sans-serif;
}
.skymap-selected-label {
    cursor: pointer;
}
.skymap-star-label,
.skymap-astro-label {
    font-family: 'Inter', sans-serif;
    font-style: italic;
}
.skymap-dot {
    cursor: pointer;
}
.skymap-halo {
    animation: skymap-pulse 2s ease-in-out infinite;
}
@keyframes skymap-pulse {
    0%, 100% { opacity: 0.4; r: 12; }
    50% { opacity: 0.15; r: 16; }
}


/* ===== detail.css ===== */
/* ========== Overlay detail ========== */

.overlay-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: 16px;
    justify-content: space-between;
}

.overlay-close {
    font-size: 1.5rem;
    line-height: 1;
    padding: 4px 10px;
    min-width: var(--touch-target, 44px);
    min-height: var(--touch-target, 44px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.overlay-header h1 {
    font-size: 1.15rem;
}

#detail-content {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: var(--space-4);
}

/* Sections en cadres séparés (mockup style : bg + border + radius + padding) */
.detail-section {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 3px;
    margin-bottom: 8px;
    padding: 14px 16px;
    overflow: hidden;
}
.detail-section:last-child {
    margin-bottom: 0;
}

/* Data rows (Informations détaillées : key gauche / value droite, border bottoms) */
.data-rows { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; }
.data-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    font-size: 0.78rem;
}
.data-row:last-child { border-bottom: none; }
.data-key { color: var(--text-muted); flex-shrink: 0; }
.data-val { color: var(--text-primary); font-weight: 500; text-align: right; }

/* Détail du calcul de pose (K&S + Winkler) — diagnostic */
#detail-engine-calc > summary {
    flex-wrap: wrap;
}
.engine-calc-title {
    flex: 1;
    min-width: 0;
}
.engine-calc-preview-badges {
    display: flex;
    gap: 5px;
    flex-basis: 100%;
    margin-top: 6px;
    flex-wrap: wrap;
}
#detail-engine-calc[open] .engine-calc-preview-badges {
    display: none;
}
.engine-calc-section {
    margin-top: 12px;
    padding: 4px 0 2px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(138, 74, 217, 0.15);
}
.engine-calc-section:first-child { margin-top: 0; }
.engine-calc-lecture {
    margin-top: 14px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 3px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
.engine-calc-lecture strong { color: var(--text-primary); font-weight: 600; }
.engine-calc-msg {
    margin: 8px 0;
    padding: 8px 10px;
    font-size: 0.82rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Saison caption (sous la SVG) */
.season-caption {
    margin-top: 12px;
    padding-top: 8px;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Description : typo cohérente avec data-val (Informations détaillées) */
.detail-description-text {
    font-size: 0.78rem;
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.6;
    margin: 0 0 8px;
}
.detail-description-text:last-of-type {
    margin-bottom: 0;
}
.detail-description-source {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-style: italic;
    margin: 8px 0 0;
}
/* Tonight-section garde son gradient violet (override) */
details.detail-section.tonight-section {
    padding: 14px 16px;
    margin-bottom: 8px;
}

.detail-section h2 {
    font-size: 0.95rem;
    color: var(--accent);
    margin-bottom: 8px;
}

/* Header de section avec badges à droite (ex: CHAMP & ORIENTATION + Aladin/DSS2) */
.detail-section-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.detail-section-title-row > span:first-child {
    flex: 1;
}

/* ========== Fiche détail v2 — Hero stylisé (mockup mockup-detail-briefing-v2-m27) ========== */
/* Override le legacy .screen.overlay (padding+max-width+bg+blur) — spécificité doublée */
.screen.overlay.screen-detail-v2 {
    padding: 0;
    max-width: 100%;
    background: rgba(10, 10, 15, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
/* Cacher le topbar quand la fiche détail est ouverte (mockup = pas de topbar visible) */
body:has(.screen.overlay.screen-detail-v2.active) #topbar,
body:has(.screen.overlay.screen-detail-v2.active) #bottombar {
    display: none;
}
/* Override le legacy .screen.overlay #detail-content (bg+border+padding+max-width 800px → 630px) */
.screen.overlay.screen-detail-v2 #detail-content {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 14px 80px;
    max-width: 630px;
    margin: 0 auto;
}
@media (min-width: 600px) {
    .screen.overlay.screen-detail-v2 #detail-content {
        padding: 0 20px 80px;
    }
}

/* Hero — bandeau titre, fond noir astro dégradé vers transparent */
.hero {
    position: relative;
    background: linear-gradient(to bottom, var(--bg-primary) 0%, transparent 100%);
}
.hero-bg {
    display: none;
}
.hero-stars {
    display: none;
}
.hero-overlay {
    display: none;
}
.hero-close {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.6);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    padding: 0;
    margin-left: auto;
    margin-right: 14px;
    flex-shrink: 0;
}
@media (min-width: 600px) {
    .hero-close { margin-right: 20px; }
}
.hero-close:hover { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.25); }
.hero-close svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }

.hero-content {
    position: relative;
    padding: 32px 14px 12px;
    z-index: 10;
}
.hero-content-inner {
    max-width: 630px;
    margin: 0 auto;
    padding: 0 0 0 24px;
}
@media (max-width: 600px) {
    .hero-content {
        padding: 24px 10px 10px;
    }
    .hero-content-inner {
        padding: 0 0 0 8px;
    }
}
.hero-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}
.hero-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.3rem, 5vw, 1.9rem);
    font-weight: 700;
    color: var(--accent);
    line-height: 1.1;
    margin: 0;
    text-shadow: 0 2px 16px var(--accent-glow);
    letter-spacing: 0.02em;
}
.hero-fav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.2s, transform 0.15s, filter 0.2s;
    flex-shrink: 0;
}
.hero-fav:hover { color: var(--accent); transform: scale(1.12); }
.hero-fav[data-fav="true"] {
    color: var(--accent);
    filter: drop-shadow(0 0 6px var(--accent-glow-strong));
}
.hero-fav svg { width: 26px; height: 26px; }
.hero-subtitle {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
    margin: 0 0 8px;
    letter-spacing: 0.01em;
    line-height: 1.4;
}
@media (max-width: 600px) {
    .hero-subtitle { font-size: 0.72rem; margin: 0 0 6px; }
}
.hero-subtitle:empty { display: none; }
.hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

@media (min-width: 600px) {
    .hero-content { padding: 32px 20px 20px; }
    .hero-title { font-size: 2em; }
    .detail-content-wrap { padding: 0 20px 80px; }
}

/* ========== Section CE SOIR (mockup-style) ========== */
/* Tonight-section : gradient violet + box-shadow (signature visuelle) */
details.detail-section.tonight-section {
    background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-primary) 100%);
    border: 1px solid var(--accent-border);
    border-radius: 3px;
    padding: 12px 18px;
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.45);
    position: relative;
    overflow: hidden;
    margin-bottom: 14px;
}
details.detail-section.tonight-section::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, var(--accent-bg) 0%, transparent 70%);
    pointer-events: none;
}
details.detail-section.tonight-section > summary {
    color: var(--accent);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
/* tonight-section chevron inherits the border-based chevron from detail-section > summary::after */
@media (max-width: 600px) {
    details.detail-section.tonight-section {
        padding: 10px 12px;
        margin-bottom: 8px;
    }
    details.detail-section.tonight-section > summary {
        font-size: 0.55rem;
        padding: 0 0 8px;
    }
}

.tonight-row {
    display: grid;
    grid-template-columns: 0.7fr 1fr 1fr 1fr 1.5fr;
    gap: 8px;
    align-items: stretch;
}
.tonight-row.no-cadrage {
    grid-template-columns: repeat(4, 1fr);
    max-width: 480px;
    margin: 0 auto;
}
@media (max-width: 600px) {
    .tonight-row {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 5px;
        padding-bottom: 4px;
    }
    .tonight-row::-webkit-scrollbar { display: none; }
    .tonight-row > .ts-card,
    .tonight-row > .score-card {
        flex: 0 0 clamp(70px, 22vw, 100px);
        scroll-snap-align: start;
    }
    .tonight-row.no-cadrage {
        max-width: none;
    }
    .ts-card {
        padding: 8px 4px;
        min-height: 80px;
    }
    .ts-event {
        font-size: 0.5rem;
        margin-bottom: 2px;
    }
    .ts-time {
        font-size: 0.7rem;
    }
    .ts-sub {
        font-size: 0.5rem;
        margin-top: 1px;
    }
    .score-big {
        font-size: 1.7rem;
    }
    .score-card .score-hint {
        font-size: 0.48rem;
    }
    .cadrage-card-inner {
        flex-direction: column;
        gap: 2px;
    }
    .cadrage-card-inner svg {
        width: 56px;
        height: 38px;
    }
    .cadrage-card-inner .ts-time {
        order: 1;
        font-size: 0.62rem;
    }
}

.ts-card {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--border-subtle);
    border-radius: 3px;
    padding: 10px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100px;
}
/* Pattern mockup verbatim : ts-event en haut, dernier en bas-milieu, ts-time aligné par margin auto */
.ts-card > *:nth-child(2) { margin-top: auto; }
.ts-card > *:last-child { margin-bottom: auto; }

.ts-event {
    font-size: 0.58rem;
    color: var(--text-muted);
    letter-spacing: 0.07em;
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.ts-time {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.ts-sub {
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.2;
}

.dur-bars-row { margin: 4px 0 2px; line-height: 1; }
.dur-bars-row .dur-bars { margin-left: 0; }

/* Score card avec gros chiffre central */
.score-card {
    cursor: pointer;
    transition: background 0.15s;
}
.score-card:hover { background: rgba(255, 255, 255, 0.04); }
.score-big {
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    margin-top: 2px;
}
.score-card .score-hint {
    margin-top: 4px;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
}

/* Cadrage card avec % + mini SVG cible-cadre */
.cadrage-card-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 2px;
}
.cadrage-card-inner svg { flex-shrink: 0; }

/* Moon strip compact sous les 5 cards */
.moon-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 4px 4px 0;
}
.moon-strip-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.moon-strip-data {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 14px;
}
@media (max-width: 600px) {
    .moon-strip {
        gap: 10px;
        margin-top: 10px;
        padding: 4px 4px 0;
    }
    .moon-strip-icon svg {
        width: 36px;
        height: 36px;
    }
    .moon-strip-data {
        grid-template-columns: repeat(3, 1fr);
        gap: 3px 10px;
    }
    .moon-strip-label {
        font-size: 0.58rem;
    }
    .moon-strip-value {
        font-size: 0.62rem;
    }
}
.moon-strip-cell {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.moon-strip-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}
.moon-strip-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

/* Summary CE SOIR : titre + card-int badge à droite */
.summary-title-row {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}

/* ========== Stratégie de poses (pose-line LRGB/SHO) ========== */
.strategy-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.pose-lines { display: flex; flex-direction: column; gap: 5px; }
.pose-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    border: 1px solid var(--border-subtle);
}
.ch-label {
    font-weight: 700;
    font-size: 0.7rem;
    font-family: 'Orbitron', sans-serif;
    min-width: 36px;
}
.ch-lum { color: #d8d4c8; }
.ch-r   { color: #d86060; }
.ch-g   { color: #60c860; }
.ch-b   { color: #6090d8; }
.ch-ha  { color: var(--color-ha); }
.ch-oiii{ color: var(--color-oiii); }
.ch-sii { color: var(--color-sii); }
.pose-count {
    font-size: 0.75rem;
    color: var(--text-primary);
    font-family: 'Orbitron', sans-serif;
    white-space: nowrap;
}
.pose-bar-wrap {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
}
.pose-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.pose-bar-lum  { background: rgba(210, 200, 180, 0.8); }
.pose-bar-r    { background: rgba(216, 96, 96, 0.8); }
.pose-bar-g    { background: rgba(96, 200, 96, 0.8); }
.pose-bar-b    { background: rgba(96, 144, 216, 0.8); }
.pose-bar-ha   { background: var(--color-ha); opacity: 0.85; }
.pose-bar-oiii { background: var(--color-oiii); opacity: 0.85; }
.pose-bar-sii  { background: var(--color-sii); opacity: 0.85; }
.pose-total {
    font-size: 0.65rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.strategy-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* Multi-nuits (étape 5) — sous-titre date au-dessus d'un sous-bloc stratégie */
.strategy-night-subtitle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--border-subtle);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
    line-height: 1;
}
.strategy-night-subtitle .date-rel { color: var(--accent); line-height: 1; }
.strategy-night-subtitle .date-abs {
    color: var(--text-muted);
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    line-height: 1;
}

/* Récap cumul des nuits (intégration totale sur 2+ nuits) */
.strategy-cumul-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 2px solid var(--accent-border-strong);
    font-size: 0.78rem;
    color: var(--text-primary);
}
.strategy-cumul-row strong {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent);
}

/* ========== Composition spectrale (source header + emission-lines + sources légende) ========== */
.comp-source-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 12px;
    background: rgba(217, 168, 74, 0.06);
    border: 1px solid rgba(217, 168, 74, 0.22);
    border-radius: 3px;
}
.comp-source-header.source-acker { background: rgba(62, 207, 142, 0.06); border-color: rgba(62, 207, 142, 0.22); }
.comp-source-badge-big {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #5a5a7a;
    border-radius: 50%;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: #c0c0d0;
}
.comp-source-header.source-acker .comp-source-badge-big {
    background: #3ecf8e;
    color: #0a1a0f;
    box-shadow: 0 0 10px rgba(62, 207, 142, 0.4);
}
.comp-source-info { flex: 1; min-width: 0; }
.comp-source-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--warning);
    margin-bottom: 2px;
}
.comp-source-header.source-acker .comp-source-title { color: #3ecf8e; }
.comp-source-sub { font-size: 0.68rem; color: var(--text-muted); }

.comp-data-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(217, 168, 74, 0.06);
    border: 1px solid rgba(217, 168, 74, 0.15);
    border-radius: 3px;
    margin-bottom: 12px;
    font-size: 0.72rem;
    color: var(--warning);
}
.comp-data-alert-icon {
    font-size: 1rem;
    flex-shrink: 0;
    line-height: 1;
}

.emission-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}
.emission-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.04);
}
.em-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    min-width: 40px;
}
.em-wavelength {
    font-size: 0.65rem;
    color: var(--text-muted);
}
.em-source-badge {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: help;
    position: relative;
}
.source-pip {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    transition: transform 0.15s;
}
.source-pip:hover { transform: scale(1.15); }
.source-pip-acker { background: #3ecf8e; color: #0a1a0f; }
.source-pip-mrao  { background: var(--danger); color: #fff; }
.source-pip-mash  { background: #8a4ad9; color: #fff; }
.source-pip-shar  { background: var(--warning); color: var(--bg-primary); }
.source-pip-wiki  { background: #4a4a5a; color: #9090a8; border: 1px solid rgba(255, 255, 255, 0.08); }
.source-label {
    font-size: 0.63rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.comp-enrich-invite {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.comp-legend {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
}
.comp-legend-explain {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--accent-bg);
    border-radius: 3px;
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--text-secondary);
}
.comp-legend-explain p {
    margin: 6px 0;
}
.comp-legend-explain ul {
    margin: 6px 0;
    padding-left: 18px;
}
.comp-legend-explain li {
    margin: 3px 0;
}
.comp-legend-title {
    font-size: 0.6rem;
    font-family: 'Orbitron', sans-serif;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.legend-items { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.63rem;
    color: var(--text-muted);
}
.legend-pip {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.52rem;
    font-weight: 700;
}

/* ========== Liens externes (footer fiche détail) ========== */
.external-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
    padding: 0 4px;
}
.ext-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 500;
    padding: 5px 11px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ext-link:hover {
    background: var(--accent-bg-strong);
    color: var(--accent-hover);
    border-color: var(--accent-border-strong);
}

/* Sections fiche détail en accordéon (open par défaut) */
details.detail-section > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 12px;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.15s;
}
details.detail-section > summary::-webkit-details-marker { display: none; }
details.detail-section > summary:hover { opacity: 0.85; }
details.detail-section > summary::after {
    content: '';
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(45deg);
    transition: transform 0.2s;
    flex-shrink: 0;
}
details.detail-section[open] > summary::after { transform: rotate(-135deg); }
/* Summary qui contient un title-row (badges Aladin/DSS2 etc.) garde son flex naturel */
details.detail-section > summary.detail-section-title-row > span:first-child,
details.detail-section > summary > .summary-title-row > span:first-child {
    flex: 1;
}

.detail-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px var(--space-3);
    font-size: 0.88rem;
}

.detail-grid dt {
    color: var(--text-secondary);
}

.detail-grid dd {
    color: var(--text-primary);
    font-weight: 500;
}

/* Courbe d'altitude */

.alt-curve-wrap {
    margin-bottom: 10px;
}

.alt-curve-svg {
    width: 100%;
    height: auto;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
}

.alt-curve-legend {
    display: flex;
    justify-content: center;
    gap: 14px;
    font-size: 0.68rem;
    color: var(--text-muted);
}

.alt-legend-green {
    color: #4caf50;
}

.alt-legend-red {
    color: #ff5555;
}

.alt-legend-line {
    color: var(--accent);
}

.alt-legend-moon {
    color: #ffdc64;
}

#aladin-container {
    width: 100%;
    height: 300px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
}

/* Masquer par défaut le box des coordonnées Aladin (trop encombrant) */
/* !important nécessaire : override du style inline display:block injecté par la librairie Aladin */
#aladin-container .aladin-location {
    display: none !important;
}

/* Section "Guidage intégré" (formulaire capteur — accordéon) */
.guide-section {
    margin-top: 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 0;
    background: rgba(255, 255, 255, 0.02);
}
.guide-section[open] {
    padding-bottom: 10px;
}
.guide-section-summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    position: relative;
    user-select: none;
}
.guide-section-summary::-webkit-details-marker {
    display: none;
}
.guide-section-summary::before {
    content: '▶';
    font-size: 0.7rem;
    margin-right: 8px;
    transition: transform 0.2s;
    display: inline-block;
    color: var(--accent);
}
.guide-section[open] .guide-section-summary::before {
    transform: rotate(90deg);
}
.guide-section-body {
    padding: 0 14px;
}
/* !important nécessaire : override du style inline background appliqué par le composant de guidage */
.guide-section-body input[readonly] {
    opacity: 0.55;
    cursor: default;
    background: rgba(255, 255, 255, 0.02) !important;
}
/* !important nécessaire : override de .form-group input:focus { border-color: var(--accent-border) } */
.guide-section-body .guide-editable select,
.guide-section-body .guide-editable input {
    border-color: var(--accent) !important;
}
.guide-edit-hint {
    font-weight: 400;
    font-size: 0.7rem;
    color: var(--accent);
    margin-left: 4px;
}

/* Masquer les contrôles Aladin non voulus */
/* !important nécessaire : override des styles inline display:block/flex injectés par la librairie Aladin */
#aladin-container .aladin-fov,
#aladin-container .aladin-fovDiv,
#aladin-container .aladin-zoomControl,
#aladin-container .aladin-projection-control,
#aladin-container .aladin-stack-control,
#aladin-container .aladin-layersControl-container,
#aladin-container .aladin-simbadPointerControl,
#aladin-container .aladin-cooGridControl {
    display: none !important;
}
/* Bouton fullscreen custom (accent theme) */
.aladin-fs-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid var(--accent);
    border-radius: 6px;
    color: var(--accent);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}
.aladin-fs-btn svg { width: 18px; height: 18px; }
.aladin-fs-btn:hover {
    background: var(--accent);
    color: #fff;
}

.aladin-viewer-wrap {
    position: relative;
    margin-bottom: 0;
}
.aladin-viewer-wrap:fullscreen {
    background: #000;
}
.aladin-viewer-wrap:fullscreen #aladin-container {
    width: 100vw;
    height: 100vh;
}
.aladin-viewer-wrap:fullscreen .aladin-fov-label {
    bottom: 12px;
}

/* Rotation Aladin : barre HORIZONTALE 0-180° sous la preview, avec viseur recenter à gauche */
.aladin-rotation-control {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 0;
}
.aladin-rotation-label-block {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
    flex-shrink: 0;
}
.aladin-rotation-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
}
.aladin-rotation-sub {
    font-size: 0.62rem;
    color: var(--text-muted);
    font-style: italic;
}
.aladin-rotation-slider {
    flex: 1;
    height: 4px;
    accent-color: var(--accent);
    cursor: ew-resize;
    margin: 0;
}
.aladin-rotation-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    min-width: 50px;
    text-align: right;
    flex-shrink: 0;
}
/* Override : .aladin-recenter-btn n'est plus en absolute, c'est inline dans la rotation-control */
.aladin-rotation-control .aladin-recenter-btn {
    position: static;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.aladin-fov-label {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.6);
    color: var(--accent);
    border-radius: 3px;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    backdrop-filter: blur(4px);
    pointer-events: none;
    z-index: 10;
    max-width: calc(100% - 50px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aladin-recenter-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: var(--accent);
    border: 1px solid var(--accent);
    backdrop-filter: blur(4px);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.15s;
}
.aladin-recenter-btn:hover {
    background: rgba(168, 85, 247, 0.25);
}


/* ===== themes.css ===== */
/* ========== Night mode toggle ========== */

.night-mode-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    padding: 4px;
}

.night-mode-btn svg {
    width: 22px;
    height: 22px;
}

.night-mode-btn:hover {
    color: var(--accent);
}

body.night-red .night-mode-btn {
    color: #cc3333;
}

@media (max-width: 767px) {
    .night-mode-btn svg {
        width: 18px;
        height: 18px;
    }
}

/* ========== Sélecteur de thème ========== */

.theme-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
}
@media (min-width: 768px) {
    .theme-picker {
        grid-template-columns: repeat(9, 1fr);
    }
}
/* ========== Thèmes planétaires ========== */

/* Astralis (défaut) = :root — violet #7B5FE7 */

/* Dérivées accent calculées une seule fois depuis --accent-rgb */
body[class*="theme-"] {
    --accent-bg:            rgba(var(--accent-rgb), 0.08);
    --accent-bg-strong:     rgba(var(--accent-rgb), 0.15);
    --accent-border:        rgba(var(--accent-rgb), 0.15);
    --accent-border-strong: rgba(var(--accent-rgb), 0.3);
    --accent-glow:          rgba(var(--accent-rgb), 0.4);
    --accent-glow-strong:   rgba(var(--accent-rgb), 0.6);
    --logo-filter: none;
}

body.theme-mars {
    --emoji-hue: 0deg;
    --accent: #e06830;       --accent-hover: #e87840;    --accent-rgb: 224, 104, 48;
    --tw-day: #7a3b1a; --tw-civil: #60280e; --tw-nautical: #481808; --tw-astro: #301004; --tw-night: #1a0802;
}

body.theme-venus {
    --emoji-hue: 10deg;
    --accent: #d4a830;       --accent-hover: #ddb840;    --accent-rgb: 212, 168, 48;
    --tw-day: #7a6a1a; --tw-civil: #604e0e; --tw-nautical: #483808; --tw-astro: #302404; --tw-night: #1a1402;
}

body.theme-terre {
    --emoji-hue: 180deg;
    --accent: #3a7bd5;       --accent-hover: #4a8be5;    --accent-rgb: 58, 123, 213;
    --tw-day: #1a3b7a; --tw-civil: #0e2860; --tw-nautical: #081848; --tw-astro: #041030; --tw-night: #02081a;
}

body.theme-neptune {
    --emoji-hue: 150deg;
    --accent: #2090c0;       --accent-hover: #30a0d0;    --accent-rgb: 32, 144, 192;
    --tw-day: #1a5a7a; --tw-civil: #0e4060; --tw-nautical: #082e48; --tw-astro: #041e30; --tw-night: #02101a;
}

body.theme-titan {
    --emoji-hue: 80deg;
    --accent: #4a9050;       --accent-hover: #5aa060;    --accent-rgb: 74, 144, 80;
    --tw-day: #2a5a2a; --tw-civil: #1e401e; --tw-nautical: #142e14; --tw-astro: #0a1e0a; --tw-night: #041004;
}

body.theme-encelade {
    --emoji-hue: 200deg;
    --accent: #8090a8;       --accent-hover: #90a0b8;    --accent-rgb: 128, 144, 168;
    --tw-day: #3a3a44; --tw-civil: #2a2a32; --tw-nautical: #1c1c22; --tw-astro: #101014; --tw-night: #08080a;
}

body.theme-orion {
    --emoji-hue: 290deg;
    --accent: #d94080;       --accent-hover: #e05090;    --accent-rgb: 217, 64, 128;
    --tw-day: #5a1a3a; --tw-civil: #400e28; --tw-nautical: #2e081c; --tw-astro: #1e0410; --tw-night: #100208;
}

body.theme-antares {
    --emoji-hue: 350deg;
    --accent: #b02828;       --accent-hover: #c83030;    --accent-rgb: 176, 40, 40;
    --tw-day: #5a1a1a; --tw-civil: #400e0e; --tw-nautical: #2e0808; --tw-astro: #1e0404; --tw-night: #100202;
}

/* ========== Night red mode ========== */

body.night-red {
    --bg-primary: #0a0000;
    --bg-secondary: #120000;
    --bg-card: #1a0505;
    --bg-input: rgba(10, 0, 0, 0.3);
    --border: transparent;
    --border-subtle: rgba(204, 51, 51, 0.2);
    --moon-lit: #d07070;
    --moon-dark: #1a0505;
    --moon-rim: #772222;
    /* Contraste boosté (avant : 1.4:1 — maintenant AA Large ≥ 3:1) */
    --text-primary: #e86666;       /* ~5.5:1 sur #0a0000 */
    --text-secondary: #c25050;     /* ~4:1 */
    --text-muted: #a04242;         /* ~3:1 (AA Large) */
    --accent: #e04444;
    --accent-hover: #e85555;
    --accent-bg: rgba(204, 51, 51, 0.06);
    --accent-bg-strong: rgba(204, 51, 51, 0.12);
    --accent-border: rgba(204, 51, 51, 0.15);
    --accent-border-strong: rgba(204, 51, 51, 0.25);
    --accent-glow: rgba(204, 51, 51, 0.4);
    --accent-glow-strong: rgba(204, 51, 51, 0.6);
    --score-high: #e06666;
    --score-medium: #c25050;
    --score-low: #7a2222;
    --warning: #c24a22;
    --success: #a04422;
}

body.night-red .brand-name {
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent-glow);
}

body.night-red .sort-btn.active,
body.night-red .sort-btn.flipped {
    border-color: #cc4444;
    background: rgba(204, 68, 68, 0.08);
}

body.night-red .season-bar-wrap {
    border-color: rgba(204, 68, 68, 0.2);
}

body.night-red .moon-phase-pct {
    color: #cc4444;
}

body.night-red .moon-trend {
    color: #cc3333;
    text-shadow: 0 0 8px rgba(204, 51, 51, 0.5), 0 0 16px rgba(204, 51, 51, 0.3);
}

body.night-red .twilight-segment.day     { background: #3a1515; }
body.night-red .twilight-segment.civil   { background: #2a0e0e; }
body.night-red .twilight-segment.nautical { background: #1a0808; }
body.night-red .twilight-segment.astro   { background: #100404; }
body.night-red .twilight-segment.night   { background: #080202; }
body.night-red .twilight-segment         { color: #883333; }
body.night-red .twilight-label           { color: #883333; }
/* !important nécessaire : surclasse .twilight-dot.sunset/.civil/etc (0,2,0) — même spécificité */
body.night-red .twilight-dot             { background: #662222 !important; }

body.night-red .score-bar-fill.high   { background: #cc4444; }
body.night-red .score-bar-fill.medium { background: #aa3333; }
body.night-red .score-bar-fill.low    { background: #662222; }

body.night-red .night-summary-title     { color: #cc4444; }
body.night-red .night-summary-block .time { color: #cc4444; }
body.night-red .night-summary-block .label { color: #883333; }
body.night-red .night-summary-duration  { color: #cc4444; }
body.night-red .night-summary-reco-note { color: #883333; }
body.night-red .night-summary-pose      { border-color: #331111; }
body.night-red .night-summary-pose .pose-count { color: #cc4444; }
body.night-red .night-summary-pose .pose-label { color: #883333; }
body.night-red .night-summary-pose.recommended {
    border-color: #cc3333;
    background: rgba(204, 51, 51, 0.08);
}

body.night-red img {
    filter: saturate(0) brightness(0.6) sepia(1) hue-rotate(-30deg);
}

/* !important nécessaire : surclasse les styles inline background injectés par JS pour les dots seeing */
body.night-red .seeing-dot {
    background: #883333 !important;
}

body.night-red .seeing-dot:first-child {
    background: #cc4444 !important;
}

/* !important nécessaire : surclasse .seeing-warn .seeing-value (0,2,0) — même spécificité */
body.night-red .seeing-value {
    color: #cc4444 !important;
}

body.night-red .nav-divider,
body.night-red .section-divider span {
    background: linear-gradient(90deg, transparent, #cc3333, transparent);
}

body.night-red #nav-date-label {
    color: #883333;
}

body.night-red .spinner-dots .dot {
    background: var(--accent);
}

body.night-red .skymap-svg circle,
body.night-red .skymap-svg line {
    opacity: 0.7;
}

body.night-red .skymap-svg text {
    fill: #cc4444;
    opacity: 0.6;
}

/* --- Night-red: formulaires, modales, boutons, gear --- */

/* !important nécessaire : surclasse .gear-form input.field-required (0,2,1) — spécificité supérieure */
body.night-red .field-required {
    border-color: #993333 !important;
    box-shadow: 0 0 0 1px rgba(153, 51, 51, 0.3);
}
body.night-red .field-required.field-ok,
body.night-red .gear-form .field-required.field-ok {
    border-color: #cc4444 !important;
    box-shadow: 0 0 0 1px rgba(204, 68, 68, 0.3);
}
body.night-red .form-group.gear-link {
    border-color: rgba(204, 68, 68, 0.25);
    background: rgba(204, 68, 68, 0.04);
}
body.night-red .form-group.gear-link label {
    color: #cc4444;
}
body.night-red .form-group.gear-link select {
    border-color: rgba(204, 68, 68, 0.3);
}
body.night-red .gear-reducer-section {
    border-color: rgba(204, 68, 68, 0.15);
}
/* !important nécessaires : fieldset/legend ont des styles agents (user-agent stylesheet) forts */
body.night-red fieldset {
    border-color: rgba(204, 68, 68, 0.2) !important;
}
body.night-red legend {
    color: #cc4444 !important;
}

/* --- Night-red: couleurs calibration → nuances de rouge --- */

body.night-red .site-item.active.cal-border-0 { border-color: #cc4444; }
body.night-red .site-item.active.cal-border-1 { border-color: #aa3333; }
body.night-red .site-item.active.cal-border-2 { border-color: #993322; }
body.night-red .site-item.active.cal-border-3 { border-color: #884444; }

body.night-red .site-item.cal-border-0 { border-color: #cc4444; }
body.night-red .site-item.cal-border-1 { border-color: #aa3333; }
body.night-red .site-item.cal-border-2 { border-color: #993322; }
body.night-red .site-item.cal-border-3 { border-color: #884444; }

body.night-red .cal-status-ok.cal-color-0 { color: #cc4444; border-color: rgba(204, 68, 68, 0.3); background: rgba(204, 68, 68, 0.06); }
body.night-red .cal-status-ok.cal-color-1 { color: #aa3333; border-color: rgba(170, 51, 51, 0.3); background: rgba(170, 51, 51, 0.06); }
body.night-red .cal-status-ok.cal-color-2 { color: #993322; border-color: rgba(153, 51, 34, 0.3); background: rgba(153, 51, 34, 0.06); }
body.night-red .cal-status-ok.cal-color-3 { color: #884444; border-color: rgba(136, 68, 68, 0.3); background: rgba(136, 68, 68, 0.06); }

/* --- Night-red: statuts, badges, indicateurs verts/oranges --- */

body.night-red .meteoblue-status.ok { color: #cc4444; }
body.night-red .sampling-ok { color: #cc4444; }
body.night-red .sampling-warn { color: #993322; }

/* --- Night-red: poses recommandées --- */

body.night-red .night-summary-pose.recommended {
    border-color: #cc3333;
    background: rgba(204, 51, 51, 0.08);
}
body.night-red .night-summary-pose .pose-recommended,
body.night-red .night-summary-pose .pose-topt {
    color: #cc4444;
}

/* --- Night-red: checklist, solar, altitude, sampling --- */

body.night-red .checklist-group.done .checklist-group-title { color: #cc4444; }
body.night-red .solar-card.high { border-color: rgba(204, 68, 68, 0.5); }
body.night-red .solar-status.high { background: rgba(204, 68, 68, 0.15); color: #cc4444; }
body.night-red .alt-legend-green { color: #cc4444; }
body.night-red .sampling-quality.ideal { color: #cc4444; }
body.night-red .sampling-quality.warn { color: #993322; }

/* --- Night-red: recommandations --- */

body.night-red .reco-dot {
    background: #cc3333;
}



/* ===== mono-components.css ===== */
/* ========== MONO — Composants réutilisables (M1→M6) ========== */
/* (Channel colors/backgrounds → badges.css single source) */

/* ---- Modale Set de filtres (M1) ---- */
/* align-items: center non défini par .gear-form .form-row — pas de conflit de spécificité */
/* flex-direction row et gap var(--space-2) : valeurs identiques à .gear-form .form-row, inoffensives */
.gear-form .filterset-slot {
    align-items: center;
    flex-direction: row;
    gap: var(--space-2);
}
.filterset-slot .filterset-channel-label {
    font-weight: 700;
    text-align: center;
    font-size: 0.95rem;
}

/* ---- Cards canaux (M3 : fiche détail multi-canal) ---- */
/* À réutiliser pour les blocs "pose par canal" sur la page Cibles et la fiche */
.channel-name {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}
.channel-detail {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-top: 2px;
}
/* FWHM dual-band OSC : affiché sous le label Ha+OIII / SII+OIII */
.osc-bandwidth {
    font-size: 0.62rem;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    margin-top: -2px;
    margin-bottom: 2px;
}

/* Warning lune excessive OSC SHO */
.osc-moon-warn {
    font-size: 0.72rem;
    color: var(--warning);
}

/* Slider OSC SHO dual-band V2 — barre split custom (accueil, sous les blocs poses) */
.osc-ratio-slider {
    margin-top: 10px;
    padding: 0 2px;
}

/* Barre custom (remplace input[type=range]) : 2 zones colorees + poignee draggable */
.osc-bar {
    position: relative;
    height: 6px;
    border-radius: 3px;
    overflow: visible;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    touch-action: none;
    user-select: none;
    margin-top: 2px;
}
.osc-zone-ha {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        rgba(224, 80, 80, 0.35),
        rgba(80, 176, 224, 0.25)
    );
    border-radius: 3px 0 0 3px;
    pointer-events: none;
}
.osc-zone-sii {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(
        90deg,
        rgba(230, 147, 44, 0.3),
        rgba(80, 176, 224, 0.25)
    );
    border-radius: 0 3px 3px 0;
    pointer-events: none;
}
/* Poignee : petit cercle + glow (V-H) */
.osc-handle {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px var(--handle-glow, rgba(255, 220, 100, 0.8)), 0 0 2px var(--handle-glow-strong, rgba(255, 220, 100, 1));
    cursor: grab;
    background: var(--handle-color, #ffdc64);
}
.osc-handle.dragging {
    cursor: grabbing;
}
.osc-handle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
@media (min-width: 768px) {
    .osc-bar {
        height: 8px;
        border-radius: 3px;
    }
    .osc-zone-ha {
        border-radius: 4px 0 0 4px;
    }
    .osc-zone-sii {
        border-radius: 0 4px 4px 0;
    }
    .osc-handle {
        width: 12px;
        height: 12px;
    }
}

/* Ligne labels sous la barre : [Ha+OIII X%] [Recommande/reset/info] [X% SII+OIII] */
.osc-slider-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.66rem;
    color: var(--text-muted);
    line-height: 1.2rem;
    flex-wrap: nowrap;
}
.osc-slider-row .osc-label-left,
.osc-slider-row .osc-label-right {
    flex: 0 0 auto;
    white-space: nowrap;
}
.osc-pct-label {
    font-weight: 600;
}
/* Warning lune au-dessus du slider (mobile) */
.osc-moon-warn-above {
    text-align: center;
    margin-bottom: 6px;
}
@media (min-width: 768px) {
    .osc-slider-row {
        font-size: 0.7rem;
        gap: 10px;
        margin-top: 5px;
        line-height: 1.25rem;
    }
}

/* Slot central : Suggestion, warning lune, ou reset ♻ */
.osc-suggest-line {
    flex: 1 1 auto;
    text-align: center;
    white-space: nowrap;
    min-width: 60px;
}
.osc-suggest-note {
    color: #ffdc64;
    font-weight: 600;
}
.osc-moon-warn-inline {
    color: var(--warning);
    font-weight: 600;
    font-size: 0.72rem;
}
/* Harmonise la taille des infobulles OSC (slider + badge session) : plus petites que .info-toggle par defaut */
.osc-suggest-line .info-toggle,
.osc-session-info-btn {
    width: 14px;
    height: 14px;
    font-size: 0.68rem;
    line-height: 1;
    margin-left: 2px;
    vertical-align: middle;
}
.osc-reset-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 4px;
    font-size: 0.7rem;
    line-height: 1;
    color: #ffdc64;
    vertical-align: middle;
    filter: grayscale(1) brightness(0.7) sepia(1) hue-rotate(10deg) saturate(4) brightness(1.3);
}
.osc-reset-btn:hover {
    opacity: 0.8;
}
.osc-reset-btn:focus-visible {
    outline: 2px solid #ffdc64;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Panneau info session OSC (explication schedule lune) */
.osc-session-info-panel {
    margin: 6px 0;
    padding: 8px 10px;
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--text-secondary);
    background: rgba(255, 220, 100, 0.06);
    border-radius: var(--radius-sm);
    text-align: center;
    font-style: normal;
}
.osc-session-info-panel p {
    margin: 0;
}

.osc-hint-second-night {
    color: var(--text-muted);
    font-weight: 400;
    font-style: italic;
}

/* ---- Blocs de poses mono sur l'accueil (M3) ---- */
/* Structure équivalente à .night-summary-pose existant, mais dédiée au mono */
.mono-pose-block {
    flex: 1 1 0;
    text-align: center;
    background: var(--bg-primary);
    border-radius: 3px;
    padding: 8px 4px;
    border: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.mono-pose-block .pose-count {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}
.mono-pose-block .pose-label {
    font-size: 0.65rem;
    color: var(--text-secondary);
}
/* Flex uniforme : chaque bloc (canaux + total) prend la même largeur et remplit le conteneur */
.mono-poses-2 .mono-pose-block,
.mono-poses-3 .mono-pose-block,
.mono-poses-4 .mono-pose-block,
.mono-poses-5 .mono-pose-block {
    flex: 1 1 0;
    min-width: 0;
}

/* Mobile : typo réduite pour que 4-5 canaux + total tiennent sans déborder */
@media (max-width: 600px) {
    .mono-poses-4 .mono-pose-block .pose-count,
    .mono-poses-5 .mono-pose-block .pose-count,
    .mono-poses-6 .mono-pose-block .pose-count {
        font-size: 0.95rem;
    }
    .mono-poses-4 .mono-pose-block .channel-detail,
    .mono-poses-5 .mono-pose-block .channel-detail,
    .mono-poses-6 .mono-pose-block .channel-detail {
        font-size: 0.6rem;
    }
    .mono-poses-4 .mono-pose-block,
    .mono-poses-5 .mono-pose-block,
    .mono-poses-6 .mono-pose-block {
        padding: 6px 2px;
    }
}

/* Total (M3) : bloc en pointillés, accent — même largeur que les canaux */
.mono-pose-block.mono-pose-total {
    background: var(--bg-primary);
    border: 1px dashed rgba(255, 255, 255, 0.08);
}
.mono-pose-block.mono-pose-total .pose-count,
.mono-pose-block.mono-pose-total .channel-detail {
    color: var(--accent);
}

/* Dégradé (M4 : canal sous Lune forte) — warning dans la couleur du canal */
.mono-degraded-hint {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--warning);
    text-align: center;
    margin-top: 8px;
}

/* ---- Tableau multi-canal fiche détail (M3) ---- */
.mono-channel-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    margin: 8px 0;
}
.mono-channel-table th,
.mono-channel-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-subtle);
    text-align: left;
}
.mono-channel-table th {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mono-channel-table td.channel-cell {
    font-weight: 700;
    width: 60px;
}
.mono-channel-table td.status-cell {
    text-align: center;
}
.mono-channel-table .status-ok {
    color: var(--success);
}
.mono-channel-table .status-warn {
    color: #e09050;
}
.mono-channel-table .status-danger {
    color: var(--danger);
}

/* ---- Badge type de set (SHO/LRGB/HOO/RGB/LRGBHa) ---- */
.set-type-badge {
    display: inline-flex;
    align-items: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    font-style: normal;
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid rgba(160, 160, 160, 0.4);
    background: transparent;
    color: var(--accent);
    letter-spacing: 0.8px;
    vertical-align: middle;
    line-height: 1;
    white-space: nowrap;
}

/* ========== Multi-nuits — drawer "Personnaliser cette nuit" (étape 5c.2) ==========
   Affiché sous la reco-note quand on clique sur l'engrenage ⚙ (mono uniquement,
   multi-nuits actif). Layout horizontal : 1 colonne par canal. */

/* Engrenage ⚙ — span sans cercle, centré verticalement avec le badge stratégie */
.mono-ratios-gear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    margin-left: 4px;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    transition: color 0.15s, transform 0.2s;
}
.mono-ratios-gear-btn:hover {
    color: var(--accent);
    transform: rotate(30deg);
}
.mono-ratios-gear-btn:focus { outline: none; color: var(--accent); }

/* Drawer caché par défaut, affiché uniquement avec la classe .is-open */
.mono-ratios-drawer {
    display: none;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 10px 12px;
    margin: 6px 0 4px;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
}
.mono-ratios-drawer.is-open { display: block; }

.mono-ratios-drawer .drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.mono-ratios-drawer .drawer-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.mono-ratios-drawer .drawer-overridden {
    color: var(--accent);
    font-weight: 500;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
}
.mono-ratios-drawer .drawer-close {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.85rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mono-ratios-drawer .drawer-close:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Layout : 3 colonnes (1 par canal). Forcé même sur mobile (jamais de wrap).
   Dans chaque colonne : ligne du haut = label + input% côte à côte, slider en dessous. */
.mono-ratios-drawer .drawer-rows {
    display: grid;
    /* Une colonne par canal (--cols passé inline). Forcé sur tous écrans : pas de wrap. */
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: 6px;
}
.mono-ratios-drawer .drawer-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 6px 4px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    min-width: 0;
}
.mono-ratios-drawer .drawer-row .ch-label {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    line-height: 1;
}

/* Slider — accent color, fin et discret */
.mono-ratios-drawer .drawer-slider {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    margin: 0;
}
.mono-ratios-drawer .drawer-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--thumb-color, var(--accent));
    cursor: grab;
    border: none;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.3);
    transition: transform 0.15s;
}
.mono-ratios-drawer .drawer-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.2); }
.mono-ratios-drawer .drawer-slider::-moz-range-thumb {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--thumb-color, var(--accent));
    cursor: grab;
    border: none;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.3);
}
.mono-ratios-drawer .drawer-slider:focus { outline: none; }

.mono-ratios-drawer .drawer-input-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}
.mono-ratios-drawer .drawer-input {
    width: 38px;
    padding: 2px 5px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.62rem;
    text-align: right;
    -moz-appearance: textfield;
    appearance: textfield;
}
.mono-ratios-drawer .drawer-input::-webkit-inner-spin-button,
.mono-ratios-drawer .drawer-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
.mono-ratios-drawer .drawer-input:focus {
    outline: none;
    border-color: var(--accent);
}
.mono-ratios-drawer .drawer-pct {
    color: var(--text-muted);
    font-size: 0.72rem;
}
.mono-ratios-drawer .drawer-poses-info {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.mono-ratios-drawer .drawer-poses-info strong {
    color: var(--text-primary);
    font-weight: 700;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
}
.mono-ratios-drawer .drawer-time-info {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: 'Orbitron', sans-serif;
}

.mono-ratios-drawer .drawer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border-subtle);
}
.mono-ratios-drawer .drawer-sum {
    font-size: 0.72rem;
    color: var(--text-muted);
}
.mono-ratios-drawer .drawer-sum-val {
    color: var(--text-primary);
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}
.mono-ratios-drawer .drawer-reset {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    cursor: pointer;
    padding: 3px 9px;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
}
.mono-ratios-drawer .drawer-reset:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}
.mono-ratios-drawer .drawer-reset:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.mono-ratios-drawer .drawer-hint {
    margin: 0;
    font-size: 0.6rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}
.mono-ratios-drawer .drawer-sum {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.mono-ratios-drawer .drawer-sum-val {
    color: var(--success);
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    transition: color 0.15s;
}

/* Mobile : sliders empilés (1 par ligne), label + slider + input% sur même ligne */
@media (max-width: 600px) {
    .mono-ratios-drawer .drawer-rows {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .mono-ratios-drawer .drawer-row {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 6px 8px;
    }
    .mono-ratios-drawer .drawer-row .ch-label {
        min-width: 32px;
        text-align: left;
    }
    .mono-ratios-drawer .drawer-row .drawer-slider {
        flex: 1;
    }
    .mono-ratios-drawer .drawer-row .drawer-input-wrap {
        flex-shrink: 0;
    }
    /* Hint sous la ligne Total + Réinitialiser (au lieu de tout sur 1 ligne) */
    .mono-ratios-drawer .drawer-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .mono-ratios-drawer .drawer-hint {
        flex-basis: 100%;
        order: 2;
        margin-top: 8px;
    }
}


/* ===== account.css ===== */
/* ========================================
   Compte (auth + sync)
   ======================================== */

.account-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 14px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
}

.account-tab {
    flex: 1;
    padding: 8px 0;
    background: var(--bg-card);
    border: none;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition:
        background 0.2s,
        color 0.2s;
}

.account-tab.active {
    background: var(--accent);
    color: #fff;
}

.account-tab-content {
    display: none;
}

.account-tab-content.active {
    display: block;
}

.account-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}

.account-username {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
}

.account-sync {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.account-actions .btn {
    flex: 1;
    min-width: 120px;
    font-size: 0.82rem;
    padding: 8px 12px;
}

/* Spécificité (0,2,0) — surclasse .btn-secondary (0,1,0) sans !important */
.btn.btn-danger-text {
    color: var(--danger);
    border-color: rgba(217, 74, 74, 0.3);
}

.btn.btn-danger-text:hover {
    background: rgba(217, 74, 74, 0.1);
}

.account-message {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: 0.82rem;
    display: none;
}

.account-message.success {
    display: block;
    background: rgba(74, 217, 122, 0.1);
    color: var(--success);
    border: 1px solid rgba(74, 217, 122, 0.2);
}

.account-message.error {
    display: block;
    background: rgba(217, 74, 74, 0.1);
    color: var(--danger);
    border: 1px solid rgba(217, 74, 74, 0.2);
}

.account-message.info {
    display: block;
    background: var(--accent-bg-strong);
    color: var(--accent);
    border: 1px solid var(--accent-border);
}


/* ===== gear-forms.css ===== */
/* ========================================
   Gear edit forms
   ======================================== */

.gear-form .form-group {
    margin-bottom: 10px;
}

.gear-form label {
    display: block;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 3px;
}

/* ---- Engrenage édition rapide (visible quand card ouverte) ---- */
.btn-icon-edit {
    display: none;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    vertical-align: middle;
    transition: color 0.15s;
}
.btn-icon-edit:hover {
    color: var(--accent);
}
.setup-detail-card.open .btn-icon-edit {
    display: inline-block;
}
/* État actif : mode édition global en cours, signaler que clic = sortir */
/* Cible uniquement les engrenages qui toggle le mode édition */
#setups-cards.gear-editing .setup-detail-card.open .btn-icon-edit[data-action="toggle-edit-mode"] {
    color: var(--accent);
}

.gear-form input,
.gear-form select,
.gear-form textarea {
    width: 100%;
    padding: 8px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 0.85rem;
    outline: none;
}

/* Neutre (par défaut) : bordure subtle, focus = accent clair, zéro outline halo */
.gear-form input:focus,
.gear-form select:focus,
.gear-form textarea:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: none;
}
/* Désactive le halo :focus-visible global à l'intérieur des modales gear */
.gear-form input:focus-visible,
.gear-form select:focus-visible,
.gear-form textarea:focus-visible {
    outline: none;
    outline-offset: 0;
}

.gear-form textarea {
    resize: vertical;
    font-family: inherit;
}

.gear-form .form-row {
    display: flex;
    gap: var(--space-2);
}

.gear-form .form-row .form-group {
    flex: 1;
}

.gear-form .form-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-4);
}
@media (max-width: 520px) {
    .gear-form .form-columns {
        grid-template-columns: 1fr;
    }
    .gear-form .form-row {
        flex-direction: column;
        gap: 0;
    }
    .modal {
        max-width: 100%;
        max-height: 95vh;
        padding: 14px;
        border-radius: var(--radius);
    }
    .modal-overlay {
        padding: var(--space-2);
    }
    .modal-header h2 {
        font-size: 0.95rem;
    }
    .gear-form input,
    .gear-form select,
    .gear-form textarea {
        font-size: 16px; /* empêche le zoom auto iOS */
    }
}
.gear-form .form-col-title {
    color: var(--accent);
    font-size: 0.78rem;
    margin: 8px 0 4px;
    font-weight: 600;
}

.gear-form-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 8px;
}

/* Requis vide : orange atténué par défaut, orange franc au focus (1px, zéro halo) */
/* Spécificité (0,2,1) — surclasse .form-group input (0,2,1) et .form-group select (0,2,1) */
.gear-form input.field-required,
.gear-form select.field-required {
    border-color: color-mix(in srgb, #e67e22 35%, transparent);
    box-shadow: none;
}
.gear-form input.field-required:focus,
.gear-form select.field-required:focus {
    border-color: #e67e22;
}
/* Rempli valide : vert atténué par défaut, vert franc au focus */
.gear-form input.field-required.field-ok,
.gear-form select.field-required.field-ok {
    border-color: color-mix(in srgb, #4caf50 35%, transparent);
    box-shadow: none;
}
.gear-form input.field-required.field-ok:focus,
.gear-form select.field-required.field-ok:focus {
    border-color: #4caf50;
}

.gear-spec-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
}

.gear-spec-row input {
    flex: 1;
    min-width: 0;
}

.setup-speed-note {
    font-style: italic;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: var(--space-2) 0 0;
    line-height: 1.4;
}

.gear-reducer-section {
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius);
    padding: var(--space-3);
    margin: var(--space-2) 0;
}
.gear-reducer-info {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-3);
}
.gear-edit-row {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
    align-items: center;
}

.gear-edit-row .btn {
    flex: 1;
    font-size: 0.8rem;
    padding: 6px 10px;
}
.gear-move-btns {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: auto;
}

.gear-quick-add {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0;
}

/* Spécificité (0,2,0) — surclasse .btn (0,1,0) sans !important */
.gear-quick-add .gear-quick-btn {
    font-size: 0.75rem;
    padding: 5px 10px;
    flex: 0 0 auto;
}

/* Bandeau résolution imagerie */
.sampling-banner {
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 16px;
    font-size: 0.82rem;
    line-height: 1.5;
    cursor: pointer;
}
.sampling-title {
    font-family: "Orbitron", sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.sampling-title .info-toggle {
    margin-left: auto;
}
.sampling-subtitle {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sampling-sensor-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}
@media (max-width: 480px) {
    .sampling-brand {
        display: none;
    }
}
.sampling-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 0;
}
.sampling-row + .sampling-row:not(.sampling-guide) {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--accent-bg-strong);
}
.sampling-expanded .sampling-toggle {
    color: var(--success);
}
.sampling-toggle {
    color: var(--accent);
    font-family: "Orbitron", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    width: 18px;
    display: inline-block;
    text-align: center;
    margin-right: 4px;
    user-select: none;
}
.sampling-bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent);
    flex-shrink: 0;
}
.sampling-accent {
    color: var(--accent);
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.sampling-config {
    color: var(--text-primary);
    font-size: 0.82rem;
}
.sampling-result {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.sampling-value {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary);
    text-align: right;
}
.sampling-quality {
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
    cursor: default;
}
.sampling-quality.ideal {
    color: #4caf50;
}
.sampling-quality.warn {
    color: #ff9800;
}
.sampling-row.sampling-guide {
    padding-left: 0;
    padding-top: 2px;
    margin-top: 0;
}
.sampling-guide-arrow {
    color: var(--text-muted);
    font-size: 0.8rem;
    flex-shrink: 0;
    width: 6px;
    text-align: center;
}
.sampling-row.sampling-guide .sampling-config {
    color: var(--text-muted);
    font-size: 0.78rem;
}
.sampling-row.sampling-guide .sampling-value {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.sampling-info-panel {
    display: none;
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-top: 10px;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
.sampling-info-panel.visible {
    display: block;
    margin-bottom: 10px;
}
.sampling-info-panel strong {
    color: var(--text-primary);
}
.sampling-info-panel code {
    color: var(--accent);
    font-size: 0.72rem;
}
.sampling-tips {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--accent-border);
}
.sampling-tip {
    font-size: 0.65rem;
    color: var(--accent);
    padding: 1px 0 1px 8px;
    font-style: italic;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sampling-expandable {
    display: none;
}
.sampling-expanded .sampling-expandable {
    display: flex;
}
.sampling-expandable.sampling-tips {
    display: none;
}
.sampling-expanded .sampling-expandable.sampling-tips {
    display: block;
}
.sampling-tips-toggle {
    font-size: 0.68rem;
    color: var(--text-muted);
    cursor: pointer;
    margin-top: 6px;
    text-align: right;
}
.sampling-tips-toggle:hover {
    color: var(--accent);
}
.sampling-tip::before {
    content: "\2013";
    color: var(--accent);
    font-size: 0.65rem;
    flex-shrink: 0;
}

/* Champs de liaison entre équipements */
.form-group.gear-link {
    border: 1px solid var(--accent-border-strong);
    border-radius: var(--radius);
    padding: 8px 10px;
    background: var(--accent-bg);
}
.form-group.gear-link label {
    color: var(--accent);
    font-weight: 600;
}
.form-group.gear-link select {
    border-color: var(--accent-border-strong);
}

.gear-demo-banner {
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 16px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    text-align: center;
}

.gear-demo-banner strong {
    color: var(--accent);
}

.gear-demo-banner a {
    color: var(--accent);
    text-decoration: underline;
}

.gear-form-preview {
    display: block;
    max-width: 120px;
    max-height: 80px;
    border-radius: var(--radius);
    margin-bottom: 6px;
    border: 1px solid var(--border-subtle);
}

.gear-file-input {
    width: 100%;
    padding: 6px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 0.82rem;
}

.gear-file-input::file-selector-button {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 4px 10px;
    font-size: 0.78rem;
    cursor: pointer;
    margin-right: 8px;
}


/* ===== calibration.css ===== */
/* ---- Résumé calibration (paramètres) ---- */
.dither-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}
@media (max-width: 768px) {
    .dither-table {
        grid-template-columns: 1fr;
    }
}
.dither-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.dither-label {
    min-width: 50px;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.78rem;
}
.dither-sep {
    color: var(--text-muted);
    font-size: 0.78rem;
}
.dither-select {
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: 3px 6px;
    font-size: 0.82rem;
    width: 50px;
    text-align: center;
}
.dither-unit {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.cal-status-warning {
    background: rgba(217, 168, 74, 0.08);
    border: 1px solid rgba(217, 168, 74, 0.25);
    padding: 8px 12px;
    margin-bottom: 4px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    color: var(--warning);
}

.cal-status-ok {
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    border: 1px solid transparent;
}
.cal-status-ok.cal-color-0 {
    color: #4caf50;
    border-color: rgba(76, 175, 80, 0.3);
    background: rgba(74, 217, 122, 0.06);
}
.cal-status-ok.cal-color-1 {
    color: #e91e90;
    border-color: rgba(233, 30, 144, 0.3);
    background: rgba(233, 30, 144, 0.06);
}
.cal-status-ok.cal-color-2 {
    color: #ff9800;
    border-color: rgba(255, 152, 0, 0.3);
    background: rgba(255, 152, 0, 0.06);
}
.cal-status-ok.cal-color-3 {
    color: #00bcd4;
    border-color: rgba(0, 188, 212, 0.3);
    background: rgba(0, 188, 212, 0.06);
}
.cal-status-ok.cal-color-4 {
    color: #fdd835;
    border-color: rgba(253, 216, 53, 0.3);
    background: rgba(253, 216, 53, 0.06);
}

.cal-preview {
    margin-bottom: 10px;
}
.cal-preview + .cal-preview {
    border-top: 1px solid var(--border-subtle);
    padding-top: 10px;
}
.cal-preview-sensor {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    color: var(--text-primary);
    font-size: 0.92rem;
}
.cal-preview-other .cal-preview-sensor {
    color: var(--text-secondary);
}
.cal-preview-empty {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-style: italic;
    padding: 4px 0 6px;
}
.cal-preview-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.cal-tag {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.cal-tag strong {
    color: var(--text-primary);
}
.cal-tag-muted {
    background: none;
    padding: 4px 6px;
    font-size: 0.72rem;
    color: var(--text-muted);
    align-self: center;
}

.cal-preview-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cal-grid-header {
    display: grid;
    grid-template-columns: 1fr 80px 55px;
    gap: 8px;
    padding: 2px 8px;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.cal-grid-header span:nth-child(2),
.cal-grid-header span:nth-child(3) {
    text-align: right;
}
.cal-grid-row {
    display: grid;
    grid-template-columns: 1fr 80px 55px;
    gap: 8px;
    align-items: center;
    padding: 4px 8px;
    background: var(--bg-card);
    border-radius: 3px;
    font-size: 0.8rem;
}
.cal-grid-filter {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cal-grid-flux {
    color: var(--text-secondary);
    font-family: "Courier New", monospace;
    font-size: 0.75rem;
    text-align: right;
}
.cal-grid-topt {
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 500;
    text-align: right;
}

/* ---- Calibration : form-row toujours en ligne (champs étroits) ---- */
@media (max-width: 520px) {
    .gear-form .form-row:has(#gf-cal-gain),
    .gear-form .form-row:has(#gf-cal-dark) {
        flex-direction: row;
        gap: var(--space-2);
    }
}

/* ---- Formulaire calibration grille ---- */
.gear-cal-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.gear-cal-header {
    display: grid;
    grid-template-columns: 1fr 110px 80px;
    gap: 8px;
    padding: 2px 0;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.gear-cal-header span:nth-child(2),
.gear-cal-header span:nth-child(3) {
    text-align: right;
}
.gear-cal-row {
    display: grid;
    grid-template-columns: 1fr 110px 80px;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
}
.gear-cal-label {
    font-size: 0.8rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gear-cal-row input {
    width: 100%;
}

@media (max-width: 400px) {
    .cal-grid-header,
    .cal-grid-row {
        grid-template-columns: 1fr 85px 50px;
    }
    .cal-grid-flux {
        font-size: 0.68rem;
        white-space: nowrap;
    }
    .cal-grid-topt {
        font-size: 0.68rem;
        white-space: nowrap;
    }
    .gear-cal-header,
    .gear-cal-row {
        grid-template-columns: 1fr 90px 65px;
    }
    .cal-grid-filter,
    .gear-cal-label {
        font-size: 0.72rem;
    }
}

.settings-note-important {
    background: rgba(74, 217, 122, 0.06);
    border: 1px solid rgba(74, 217, 122, 0.25);
    padding: 8px 12px;
    margin-bottom: 12px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.settings-help {
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.5;
    margin: 0 0 10px;
    padding: 8px 10px;
    background: var(--accent-bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--accent-border);
}
/* Espacement et labels dans les sections paramètres */
.settings-accordion-body > .form-group {
    margin-bottom: 16px;
}
.settings-accordion-body > .form-row {
    margin-bottom: 12px;
}
.settings-accordion-body > .form-group > label,
.settings-accordion-body > .form-row > .form-group > label {
    font-weight: 600;
}
.settings-accordion-body label.sub-label,
.settings-accordion-body .form-label.sub-label {
    color: color-mix(in srgb, var(--accent) 75%, white);
}
/* Selects et inputs dans les paramètres — bordure discrète, accent au focus */
.settings-accordion-body select,
.settings-accordion-body input[type="number"] {
    border: 1px solid var(--border);
}
.settings-accordion-body select,
.settings-accordion-body input[type="number"] {
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.settings-accordion-body select:focus,
.settings-accordion-body input[type="number"]:focus {
    border-color: var(--accent);
    outline: none;
}
/* Panneau info bulle dans les paramètres */
.settings-accordion-body .info-panel {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--accent-bg);
    border-radius: 3px;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-secondary);
}
.settings-accordion-body .info-panel p {
    margin: 6px 0;
}
.settings-accordion-body .info-panel em {
    color: var(--accent);
    font-style: normal;
    font-size: 0.78rem;
}

/* Scoring stats (Tony Hawk style) */
.sw-budget {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    background: var(--accent-bg-strong);
    border-radius: var(--radius-sm);
}
.sw-budget-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.sw-budget-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent);
    transition: color 0.2s;
}
.sw-budget-value.empty {
    color: var(--text-muted);
}
.sw-budget-value.over {
    color: #f44336;
}

.sw-stat {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.sw-stat-name {
    flex: 1;
    font-size: 0.88rem;
}
.sw-stat-val {
    min-width: 32px;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.sw-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.sw-btn:active {
    background: var(--accent-border-strong);
}
.sw-btn:disabled {
    opacity: 0.2;
    cursor: default;
}
.sw-btn.sw-minus {
    color: #f44336;
}
.sw-btn.sw-plus {
    color: var(--success);
}
.sw-stat-flash {
    animation: sw-flash 0.4s ease;
}
@keyframes sw-flash {
    0% {
        color: #fff;
        transform: scale(1.3);
    }
    100% {
        color: var(--accent);
        transform: scale(1);
    }
}

#gear-edit-toggle,
#checklist-edit-toggle {
    font-size: 0.85rem;
    padding: 6px 14px;
    white-space: nowrap;
    color: var(--accent);
}

.gear-edit-intro {
    color: var(--text-secondary);
    font-size: 0.82rem;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--accent-bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--accent-border);
}

.setup-detail-notes {
    font-style: italic;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.5;
    margin: 8px 0;
    padding: 6px 10px;
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-sm);
}

.setup-detail-notes::before {
    content: "📌 ";
}

.placeholder {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
    padding: 16px 0;
}


/* ===== doc-modal.css ===== */
/* ========================================
   Documentation modal — strip linéaire + panel unique
   ======================================== */

.modal-doc {
    max-width: 800px;
    max-height: 90vh;
}

/* Subtitle inline sous "Documentation" dans le modal-header */
.modal-doc .modal-header h2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.15;
}

.doc-modal-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    font-style: italic;
    color: var(--text-muted);
    letter-spacing: 0;
    text-transform: none;
}

/* ---- Strip linéaire de rubriques ---- */
.doc-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
}

.doc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: var(--text-secondary);
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    user-select: none;
    white-space: nowrap;
}

.doc-chip:hover {
    background: var(--accent-bg);
    border-color: var(--accent-border);
    color: var(--text-primary);
}

.doc-chip.active {
    background: var(--accent-bg-strong);
    border-color: var(--accent-border-strong);
    color: var(--text-primary);
    font-weight: 500;
}

.doc-chip-icon {
    font-size: 0.95rem;
    line-height: 1;
    flex-shrink: 0;
}

.doc-chip-title {
    font-size: 0.78rem;
}

/* Mobile : chips plus compacts pour tenir 3-4 par ligne */
@media (max-width: 600px) {
    .doc-strip {
        gap: 4px;
        margin-bottom: 12px;
        padding-bottom: 10px;
    }
    .doc-chip {
        padding: 4px 7px;
        gap: 4px;
        font-size: 0.7rem;
    }
    .doc-chip-icon {
        font-size: 0.8rem;
    }
    .doc-chip-title {
        font-size: 0.7rem;
    }
    /* Strategy badges (SHO/OSC) plus petits aussi dans le strip mobile */
    .doc-chip .strategy-badge {
        font-size: 0.5rem;
        padding: 1px 4px;
    }
}

/* ---- Panel unique : contenu de la rubrique active ---- */
.doc-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.doc-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.doc-panel-icon {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
}

.doc-panel-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.02em;
    margin: 0;
}

.doc-panel-body {
    padding: 14px 16px 16px;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ---- Sous-sections h4 collapsibles (pattern + violet / − vert) ---- */
.doc-panel-body h4 {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 16px 0 8px;
    padding: 6px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.15s;
    letter-spacing: 0.01em;
}

.doc-panel-body h4:first-child {
    margin-top: 0;
}

.doc-panel-body h4:hover {
    color: var(--accent);
}

.doc-panel-body h4::before {
    content: '+';
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent);
    width: 16px;
    text-align: center;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
}

.doc-panel-body h4.doc-sub-open::before {
    content: '\2212'; /* signe moins (U+2212) */
    color: var(--success);
}

.doc-sub-content {
    display: none;
    padding: 0 0 4px 26px;
}

.doc-sub-content.doc-sub-visible {
    display: block;
}

/* ---- Contenu du panel ---- */
.doc-panel-body p {
    margin: 0 0 8px;
}
.doc-panel-body p:last-child {
    margin-bottom: 0;
}

.doc-panel-body ul,
.doc-panel-body ol {
    margin: 4px 0 10px;
    padding-left: 18px;
}

.doc-panel-body li {
    margin-bottom: 4px;
}

.doc-panel-body code {
    background: var(--accent-border);
    color: var(--accent);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-family: "Courier New", monospace;
}

.doc-panel-body .doc-formula {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin: 8px 0;
    font-family: "Courier New", monospace;
    font-size: 0.8rem;
    color: var(--accent);
    overflow-x: auto;
}

.doc-panel-body .doc-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 0.78rem;
}

.doc-panel-body .doc-table th,
.doc-panel-body .doc-table td {
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
}

.doc-panel-body .doc-table th {
    color: var(--accent);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.doc-panel-body .doc-note {
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    padding: 10px 12px;
    margin: 10px 0;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* ---- Niveaux de confiance — popover (clic sur badge) ---- */
.conf-popover { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 200; width: 260px; padding: 10px 12px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 4px 16px rgba(0,0,0,0.4); font-size: 0.75rem; color: var(--text-primary); line-height: 1.5; }
.conf-popover.show { display: block; }
.conf-popover-title { font-weight: 700; margin-bottom: 4px; }
.conf-popover-body { color: var(--text-muted); }
.conf-popover-link { color: var(--accent); text-decoration: none; font-size: 0.7rem; margin-top: 6px; display: inline-block; }


/* ===== a11y.css ===== */
/* ========== Scrollbar ========== */

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

/* ========== A11y : skip link ========== */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--accent);
    color: #fff;
    padding: 8px 16px;
    z-index: 10000;
    font-size: 0.9rem;
    text-decoration: none;
    border-radius: 0 0 6px 0;
}
.skip-link:focus {
    top: 0;
}

/* ========== A11y : focus visible en navigation clavier ========== */
/* Override global des 'outline: none' sur inputs — ne s'active qu'au
   tab/clavier via :focus-visible (pas au clic souris). */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* Pas d'outline sur les éléments qui ont déjà un feedback visuel (hover/glow) */
.card-score:focus-visible,
.btn-fav:focus-visible,
.splash-btn:focus-visible,
.splash-btn:focus,
.splash-btn:active {
    outline: none;
}

/* Réduction des animations si l'utilisateur l'a demandé au niveau OS */
/* !important nécessaires : pattern WCAG obligatoire pour forcer l'arrêt des animations
   sur tous les éléments quel que soit leur spécificité (sélecteur universel * ne peut
   pas gagner autrement contre des sélecteurs plus spécifiques) */
@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;
    }
}


/* ===== badges.css ===== */
/*
 * Astralis — Design System Badges (single source of truth)
 * ─────────────────────────────────────────────────────────────
 * Centralisation des badges/pills/tags/dots utilisés dans toute l'app.
 * Créé 2026-04-28 suite à l'audit docs/audit-badges-2026-04-27.md.
 *
 * Convention : ce fichier ne contient QUE des badges visuels.
 * Toute nouvelle classe badge va ici. Plus de duplications dans home.css/pages.css.
 *
 * Workflow : valider section par section via mockup-design-system-badges.html,
 * puis migrer ici, puis nettoyer les anciens emplacements.
 */


/* ============================================================ */
/* 1. CATALOG BADGES — validé 2026-04-28 (Décision A)            */
/* ============================================================ */
/* Usages : Cards résultats, Page Paramètres, Skymap, Browser    */
/* Migré depuis : home.css:1316-1347                             */
/* Fixes : ajout .cat-caldwell + .cat-other inclus night-red    */

.cat-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.3px;
}

.cat-messier  { background: rgba(74, 217, 122, 0.2); color: var(--success); }
.cat-ngc      { background: rgba(74, 144, 217, 0.2); color: #4a90d9; }
.cat-caldwell { background: rgba(93, 212, 197, 0.2); color: #5dd4c5; } /* NEW — avant fallback sur cat-ngc */
.cat-ic       { background: rgba(138, 74, 217, 0.2); color: #b88adb; }
.cat-sh2      { background: rgba(217, 74, 74, 0.2); color: #d97a7a; }
.cat-barnard  { background: rgba(160, 140, 100, 0.2); color: #a08c64; }
.cat-vdb      { background: rgba(100, 180, 220, 0.2); color: #64b4dc; }
.cat-ldn      { background: rgba(120, 100, 80, 0.2); color: #8c7850; }
.cat-lbn      { background: rgba(220, 180, 80, 0.2); color: #dcb450; }
.cat-rcw      { background: rgba(220, 100, 120, 0.2); color: #dc6478; }
.cat-other    { background: rgba(100, 100, 100, 0.2); color: #888; }

/* Night-red mode — toutes variantes (FIX 28-04 : .cat-other + .cat-caldwell maintenant inclus) */
body.night-red .cat-messier,
body.night-red .cat-ngc,
body.night-red .cat-caldwell,
body.night-red .cat-ic,
body.night-red .cat-sh2,
body.night-red .cat-barnard,
body.night-red .cat-vdb,
body.night-red .cat-ldn,
body.night-red .cat-lbn,
body.night-red .cat-rcw,
body.night-red .cat-other {
    background: rgba(120, 40, 40, 0.2);
    color: #aa4444;
}


/* ============================================================ */
/* 2. STRATEGY BADGES — validé 2026-04-28 (Décision A)           */
/* ============================================================ */
/* Usages : Cards résultats (titre), Page nuit (header)         */
/* Migré depuis : home.css:1074-1088                            */
/* Fixes : suppression .strategy-chip fantôme + couleurs raies  */
/*         déplacées dans variables.css (--color-ha/oiii/sii)   */
/* TODO : refacto js/ui-strategy-badge.js _STRATEGY_BADGE map   */
/*        pour utiliser var(--color-*) au lieu de hex hardcodés */
/* DROP : .set-type-badge (utilities.css:358) = doublon visuel  */
/*        → refacto JS (ui-night.js:431,469, ui-setups.js:456,  */
/*           ui-detail.js:416,493) pour utiliser .strategy-badge */

.strategy-badge {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    border: 1px solid rgba(160, 160, 160, 0.4);
    border-radius: 3px;
    padding: 2px 7px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.6px;
    line-height: 1;
    white-space: nowrap;
}

/* Variante "stratégie custom" : couleur accent unie (au lieu de lettres colorées) */
.strategy-badge-custom { color: var(--accent); }


/* ============================================================ */
/* 4. K&S BADGE — validé 2026-04-28 (Décision A)                 */
/* ============================================================ */
/* Usages : Cards résultats (à côté du badge stratégie)         */
/* Migré depuis : home.css:1090 (def 1, intention originale)    */
/* CRITICAL FIX : home.css:1123-1135 (def 2 doublon italic)     */
/*                à SUPPRIMER lors du cleanup home.css           */

.card-ks {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    font-size: 0.6rem;
    border: 1px solid rgba(255, 220, 100, 0.55);
    color: rgba(255, 220, 100, 0.9);
    padding: 2px 7px;
    border-radius: 3px;
    letter-spacing: 0.6px;
    line-height: 1;
    white-space: nowrap;
    cursor: help;
}
.wk-unit {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.5rem;
    text-transform: lowercase;
}
.card-ks .moon-glyph {
    font-style: normal;
    color: #ffdc64;
    vertical-align: middle;
    line-height: 1;
    position: relative;
    top: -1px;
}


/* ============================================================ */
/* 5. INTEGRATION BADGE — validé 2026-04-28 (Décision A)         */
/* ============================================================ */
/* Usages : Cards résultats (titre, durée totale intégrée)      */
/* Migré depuis : home.css:1107-1121                            */
/* DROP : .integ-badge (mockup détail v2) = variante incompat.  */
/*        → mockup détail v2 doit s'aligner sur .card-int       */
/* TODO night-red : aucun override existant — à évaluer si      */
/*        le bleu clair pose souci en mode nuit                 */

.card-int {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    font-size: 0.6rem;
    border: 1px solid rgba(160, 210, 255, 0.45);
    color: rgba(160, 210, 255, 0.9);
    padding: 2px 7px;
    border-radius: 3px;
    letter-spacing: 0.6px;
    line-height: 1;
    white-space: nowrap;
}
/* Variants couleur — utilisés sur fiche détail (qualité volume d'intégration, sources data) */
.card-int.card-int-green { background: rgba(74, 217, 122, 0.12);  border-color: rgba(74, 217, 122, 0.40);  color: var(--success); }
.card-int.card-int-blue  { background: rgba(74, 200, 232, 0.12);  border-color: rgba(74, 200, 232, 0.40);  color: #4ac8e8; }
.card-int.card-int-amber { background: rgba(217, 168, 74, 0.12);  border-color: rgba(217, 168, 74, 0.40);  color: var(--warning); }
.card-int.card-int-red   { background: rgba(217, 74, 74, 0.12);   border-color: rgba(217, 74, 74, 0.40);   color: var(--danger); }
.card-int.card-int-gray  { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.18); color: var(--text-secondary); }
.card-int .pkg-icon { font-size: 0.95em; line-height: 1; }
.card-int svg { width: 10px; height: 10px; flex-shrink: 0; }

/* Multi-nuits : badge accent quand intégration cumulée sur 2 nuits */
.card-int.card-int-cumul {
    background: rgba(123, 95, 231, 0.15);
    border-color: rgba(123, 95, 231, 0.45);
    color: var(--accent);
}
.card-int .card-int-multi {
    margin-left: 5px;
    padding: 0 4px;
    background: var(--accent);
    color: #fff;
    border-radius: 2px;
    font-weight: 700;
    font-size: 0.55rem;
    letter-spacing: 0.4px;
}
body.night-red .card-int.card-int-cumul {
    background: rgba(120, 40, 40, 0.20);
    color: #aa4444;
    border-color: rgba(170, 68, 68, 0.45);
}
body.night-red .card-int .card-int-multi {
    background: #aa4444;
    color: #fff;
}

/* Night-red — tous variants couleur basculent en nuances rouge */
body.night-red .card-int.card-int-green,
body.night-red .card-int.card-int-blue,
body.night-red .card-int.card-int-amber,
body.night-red .card-int.card-int-red,
body.night-red .card-int.card-int-gray {
    background: rgba(120, 40, 40, 0.20);
    color: #aa4444;
    border-color: rgba(170, 68, 68, 0.45);
}


/* ============================================================ */
/* 6. SCORE BADGE — validé 2026-04-28 (Uniformisation cadre)     */
/* ============================================================ */
/* Usages : Cards résultats (haut droite)                        */
/* Migré depuis : home.css:983-1016                              */
/* CHANGES vs prod : font 0.85rem→0.7rem, radius 12px→3px,       */
/*   ajout Orbitron + border 1px, padding 2px 8px→2px 7px        */
/*   font-weight 700 conservé (emphase chiffre)                  */
/* But : uniformisation cadre tous badges → 1 seul point tweak   */
/* TODO : score-bar-fill (pages.css:1952) réutilise .high/.medium */
/*   /.low — vérifier rendu après ce refacto                     */

.card-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid;
    letter-spacing: 0.6px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.card-score:hover { transform: scale(1.15); }
.card-score.high:hover   { box-shadow: 0 0 8px rgba(74, 217, 122, 0.4); }
.card-score.medium:hover { box-shadow: 0 0 8px rgba(217, 168, 74, 0.4); }
.card-score.low:hover    { box-shadow: 0 0 8px rgba(217, 74, 74, 0.4); }

.card-score.high   { background: rgba(74, 217, 122, 0.15); color: var(--score-high);   border-color: rgba(74, 217, 122, 0.45); }
.card-score.medium { background: rgba(217, 168, 74, 0.15); color: var(--score-medium); border-color: rgba(217, 168, 74, 0.45); }
.card-score.low    { background: rgba(217, 74, 74, 0.15);  color: var(--score-low);    border-color: rgba(217, 74, 74, 0.45); }

/* Night-red — toutes variantes */
body.night-red .card-score.high   { background: rgba(204, 68, 68, 0.15); color: #cc4444; border-color: rgba(204, 68, 68, 0.45); }
body.night-red .card-score.medium { background: rgba(170, 51, 51, 0.15); color: #aa3333; border-color: rgba(170, 51, 51, 0.45); }
body.night-red .card-score.low    { background: rgba(102, 34, 34, 0.15); color: #662222; border-color: rgba(102, 34, 34, 0.45); }


/* ============================================================ */
/* 7. FAVORI — validé 2026-04-28 (Décision A : étoile + accent)  */
/* ============================================================ */
/* Usages : Cards résultats (haut droite, à côté du score)       */
/* Migré depuis : home.css:894-912                               */
/* CHANGES vs prod :                                             */
/*   - symbole ♥ (rouge #e74c6f) → ★ (var(--accent) violet)      */
/*   - night-red géré automatiquement via var(--accent)          */
/* TODO JS : ui-targets.js:437 → remplacer "♥" par "★" dans le   */
/*   template HTML du bouton                                     */
/* TODO : .hero-fav, .tonight-fav (mockup détail v2) doivent     */
/*   s'aligner sur .btn-fav, ou être supprimés si inutilisés    */

.btn-fav {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s, transform 0.2s;
    line-height: 1;
}
.btn-fav:hover         { color: var(--accent); transform: scale(1.2); }
.btn-fav.active        { color: var(--accent); }


/* ============================================================ */
/* 8a. FILTER TYPE BADGES — validé 2026-04-28 (Décision A)        */
/* ============================================================ */
/* Usages : Page Settings / Équipements (liste filtres)          */
/* Migré depuis : pages.css:1792-1816 + 7 channel-tint variants  */
/* CHANGES vs prod :                                             */
/*   - pill 10px → rectangle 3px (uniformisation cadre)         */
/*   - 0.75rem font system → Orbitron 0.7rem (uniformisation)   */
/*   - ajout border 1px sur tous variants                       */
/*   - couleurs hardcodées → var(--color-*) (single source)     */
/*   - night-red ajouté sur les 9 variants (manquait sur 7)     */
/* TODO JS : drop des inline styles dans                        */
/*   ui-setups.js:445, gear-calibration.js:106,                  */
/*   app-settings.js:662 (border-radius 3px + padding inline)   */
/* TODO : décider sort de --compact / --mini (drop ou CSS)      */

.setup-filter-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid;
    letter-spacing: 0.6px;
    line-height: 1;
    white-space: nowrap;
}

/* Catégories large bande / bande étroite */
.setup-filter-type.narrowband { background: rgba(138, 74, 217, 0.15); color: #b88adb;          border-color: rgba(138, 74, 217, 0.45); }
.setup-filter-type.broadband  { background: rgba(74, 217, 176, 0.15); color: #6ad9b0;          border-color: rgba(74, 217, 176, 0.45); }

/* Channel-tint (raies + RGB) — couleurs depuis variables.css */
.setup-filter-type.channel-tint-ha   { background: rgba(224, 80, 80, 0.15);  color: var(--color-ha);    border-color: rgba(224, 80, 80, 0.45); }
.setup-filter-type.channel-tint-oiii { background: rgba(80, 176, 224, 0.15); color: var(--color-oiii);  border-color: rgba(80, 176, 224, 0.45); }
.setup-filter-type.channel-tint-sii  { background: rgba(230, 147, 44, 0.15); color: var(--color-sii);   border-color: rgba(230, 147, 44, 0.45); }
.setup-filter-type.channel-tint-nii  { background: rgba(192, 128, 224, 0.15);color: var(--color-nii);   border-color: rgba(192, 128, 224, 0.45); }
.setup-filter-type.channel-tint-heii { background: rgba(74, 200, 232, 0.15); color: var(--color-heii);  border-color: rgba(74, 200, 232, 0.45); }
.setup-filter-type.channel-tint-hb   { background: rgba(80, 128, 224, 0.15); color: var(--color-hb);    border-color: rgba(80, 128, 224, 0.45); }
.setup-filter-type.channel-tint-l    { background: rgba(201, 209, 217, 0.12);color: var(--color-lum);   border-color: rgba(201, 209, 217, 0.45); }
.setup-filter-type.channel-tint-r    { background: rgba(224, 80, 80, 0.15);  color: var(--color-rgb-r); border-color: rgba(224, 80, 80, 0.45); }
.setup-filter-type.channel-tint-g    { background: rgba(80, 224, 128, 0.15); color: var(--color-rgb-g); border-color: rgba(80, 224, 128, 0.45); }
.setup-filter-type.channel-tint-b    { background: rgba(80, 128, 224, 0.15); color: var(--color-rgb-b); border-color: rgba(80, 128, 224, 0.45); }

/* Night-red — tous les variants (FIX 28-04 : les 9 channel-tint étaient sans override) */
body.night-red .setup-filter-type.narrowband,
body.night-red .setup-filter-type.broadband,
body.night-red .setup-filter-type[class*="channel-tint-"] {
    background: rgba(120, 40, 40, 0.2);
    color: #aa4444;
    border-color: rgba(170, 68, 68, 0.45);
}


/* ============================================================ */
/* 8b. CHANNEL INLINE TAGS — créé 2026-04-28 (Uniformisation)    */
/* ============================================================ */
/* Usages : mentions inline "Hα / OIII / SII / NII / HeII…"     */
/*   dans texte, headers, listes, descriptions                   */
/* Migré depuis : utilities.css:3-50 (.channel-ha/oiii/sii/L/R/G/B) */
/* CHANGES vs prod :                                             */
/*   - ajout Orbitron + font-weight 600 + letter-spacing 0.5px  */
/*   - couleurs hardcodées → var(--color-*) (single source)     */
/*   - ajout variants manquants : NII, HeII, HeI, Hβ            */
/*   - PAS de border, PAS de background (texte stylé pur)       */
/* Convention : inherit font-size (s'adapte au contexte)        */
/* TODO JS : js/ui-detail.js:602, js/app-mono.js:28+100 ont      */
/*   des hex hardcodés en JS → utiliser ces classes CSS         */

.channel-ha,
.channel-oiii,
.channel-sii,
.channel-nii,
.channel-heii,
.channel-hei,
.channel-hb,
.channel-l,
.channel-r,
.channel-g,
.channel-b {
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
    vertical-align: baseline;
}

.channel-ha   { color: var(--color-ha); }
.channel-oiii { color: var(--color-oiii); }
.channel-sii  { color: var(--color-sii); }
.channel-nii  { color: var(--color-nii); }
.channel-heii { color: var(--color-heii); }
.channel-hei  { color: var(--color-hei); }
.channel-hb   { color: var(--color-hb); }
.channel-l    { color: var(--color-lum); }
.channel-r    { color: var(--color-rgb-r); }
.channel-g    { color: var(--color-rgb-g); }
.channel-b    { color: var(--color-rgb-b); }

/* Backgrounds discrets (cards canaux M3) — usage optionnel */
.channel-bg-ha   { background: rgba(224, 80, 80, 0.12); }
.channel-bg-oiii { background: rgba(80, 176, 224, 0.12); }
.channel-bg-sii  { background: rgba(230, 147, 44, 0.12); }
.channel-bg-l    { background: rgba(201, 209, 217, 0.10); }
.channel-bg-r    { background: rgba(224, 80, 80, 0.12); }
.channel-bg-g    { background: rgba(80, 224, 128, 0.12); }
.channel-bg-b    { background: rgba(80, 128, 224, 0.12); }

/* Night-red — toutes les mentions inline */
body.night-red .channel-ha,
body.night-red .channel-oiii,
body.night-red .channel-sii,
body.night-red .channel-nii,
body.night-red .channel-heii,
body.night-red .channel-hei,
body.night-red .channel-hb,
body.night-red .channel-l,
body.night-red .channel-r,
body.night-red .channel-g,
body.night-red .channel-b {
    color: #aa4444;
}


/* ============================================================ */
/* 9. CAL BADGE — validé 2026-04-28 (Décision A : fusion)        */
/* ============================================================ */
/* Usages : Page Nuit (header session) + Settings/Gear/Setups   */
/* Migré depuis : home.css:569-586 (.cal-active-badge = canonical) */
/* DROP : pages.css:122-156 (.site-cal-badge — quasi-doublon)    */
/*        → refacto JS : ui-setups.js:344+417, app-settings.js:717,*/
/*          gear-calibration.js:33 utilisent .site-cal-badge      */
/* CHANGES vs prod :                                             */
/*   - ajout font-family Orbitron + font-weight 700              */
/*   - font 0.55rem→0.5rem (compact)                             */
/*   - letter-spacing 0.5px→0.3px (compact)                      */
/*   - padding 1px 4px→1px 3px (compact)                         */
/*   - drop position:relative + top:-1px (hack ligne-height)     */
/*   - night-red étendu à cal-color-4 (manquait sur les 2 classes)*/
/*   - night-red : border-color suit color (était bug avant)     */

.cal-active-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.5rem;
    font-weight: 700;
    padding: 1px 3px;
    border-radius: 3px;
    border: 1px solid;
    letter-spacing: 0.3px;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}

.cal-active-badge.cal-color-0 { color: #4caf50; border-color: #4caf50; }
.cal-active-badge.cal-color-1 { color: #e91e90; border-color: #e91e90; }
.cal-active-badge.cal-color-2 { color: #ff9800; border-color: #ff9800; }
.cal-active-badge.cal-color-3 { color: #00bcd4; border-color: #00bcd4; }
.cal-active-badge.cal-color-4 { color: #fdd835; border-color: #fdd835; }

/* Night-red — 5 variants (cal-color-4 ajouté + border suit color) */
body.night-red .cal-active-badge.cal-color-0 { color: #cc4444; border-color: #cc4444; }
body.night-red .cal-active-badge.cal-color-1 { color: #aa3333; border-color: #aa3333; }
body.night-red .cal-active-badge.cal-color-2 { color: #993322; border-color: #993322; }
body.night-red .cal-active-badge.cal-color-3 { color: #884444; border-color: #884444; }
body.night-red .cal-active-badge.cal-color-4 { color: #aa6644; border-color: #aa6644; }

/* Wrapper plusieurs sites sur même capteur (pages.css:146-151) */
.sensor-cal-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}


/* ============================================================ */
/* 10. CAL SENSOR ACTIVE TAG — validé 2026-04-28 (= style CAL)   */
/* ============================================================ */
/* Usages : Page Settings / Gear (fiche capteur, état "ACTIF")  */
/* Migré depuis : utilities.css:1087-1100                        */
/* CHANGES vs prod :                                             */
/*   - reprend strictement le style de .cal-active-badge         */
/*     (Orbitron 0.5rem padding 1px 3px letter-spacing 0.3px)    */
/*   - couleur = couleur du site actif (cal-color-0..4)          */
/*     au lieu de var(--accent) fixe                             */
/* TODO JS : app-settings.js:623 doit ajouter .cal-color-N       */
/*   selon le site de calibration actif                          */
/* NOTE : .cal-tag + .cal-tag-muted (utilities.css:1112-1128)    */
/*   restent inchangés — info pills data, hors famille badges    */

.cal-sensor-active-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.5rem;
    font-weight: 700;
    padding: 1px 3px;
    border-radius: 3px;
    border: 1px solid;
    letter-spacing: 0.3px;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
    vertical-align: middle;
}

/* Couleur = couleur du site de calibration actif */
.cal-sensor-active-tag.cal-color-0 { color: #4caf50; border-color: #4caf50; }
.cal-sensor-active-tag.cal-color-1 { color: #e91e90; border-color: #e91e90; }
.cal-sensor-active-tag.cal-color-2 { color: #ff9800; border-color: #ff9800; }
.cal-sensor-active-tag.cal-color-3 { color: #00bcd4; border-color: #00bcd4; }
.cal-sensor-active-tag.cal-color-4 { color: #fdd835; border-color: #fdd835; }

/* Fallback (pas de cal-color-* spécifié) → accent */
.cal-sensor-active-tag:not([class*="cal-color-"]) {
    color: var(--accent);
    border-color: var(--accent);
}

/* Night-red — 5 variants */
body.night-red .cal-sensor-active-tag.cal-color-0 { color: #cc4444; border-color: #cc4444; }
body.night-red .cal-sensor-active-tag.cal-color-1 { color: #aa3333; border-color: #aa3333; }
body.night-red .cal-sensor-active-tag.cal-color-2 { color: #993322; border-color: #993322; }
body.night-red .cal-sensor-active-tag.cal-color-3 { color: #884444; border-color: #884444; }
body.night-red .cal-sensor-active-tag.cal-color-4 { color: #aa6644; border-color: #aa6644; }


/* ============================================================ */
/* 11. DUR-BARS — validé 2026-04-28 (migration sans changement)  */
/* ============================================================ */
/* Usages : Cards résultats (indicateur durée obs.) + tri        */
/* Migré depuis : home.css:151-184 + themes.css:262, 282         */
/* CHANGES vs prod : aucun (système cohérent, juste centralisé) */
/* Type : indicateur visuel (3 barres montantes), PAS un badge   */
/*   texte → ne suit pas la base commune Orbitron/border         */
/* Décision : inclus dans badges.css comme "marqueur visuel      */
/*   d'identification cible" (single source of truth élargi)    */

.dur-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
}

.dur-bar {
    display: inline-block;
    width: 4px;
    border-radius: 1px;
    background: var(--border-subtle);
    transition: background 0.2s;
}

.dur-bar.h1 { height: 6px; }
.dur-bar.h2 { height: 10px; }
.dur-bar.h3 { height: 14px; }

.dur-bar.on {
    background: #4ac8e8;
    opacity: 0.35;
}

.dur-bars-inline {
    vertical-align: middle;
    margin-right: 2px;
}
.dur-bars-inline .dur-bar.on { opacity: 0.7; }

.sort-btn.active .dur-bar.on { opacity: 1; }

/* Night-red */
body.night-red .dur-bar { background: #cc4444; }
body.night-red .dur-bars-inline .dur-bar.on { background: #cc4444; }


/* ============================================================ */
/* 12. ANG-DOTS — validé 2026-04-28 (B1 : drop !important)       */
/* ============================================================ */
/* Usages : Cards résultats (indicateur taille angulaire) + tri  */
/* Migré depuis : home.css:191-224 + 1144-1149 + themes.css:273-280 */
/* CHANGES vs prod :                                             */
/*   - drop des !important sur s1 (rendu identique via source     */
/*     order — s1 déclaré APRÈS .on pour gagner la cascade)      */
/* Note : s1 = jaune permanent (repère "très petite cible",      */
/*   écho au SVG de cadrage). Comportement intentionnel.         */
/* Type : indicateur visuel (3 dots croissants), PAS un badge    */

.ang-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.ang-dot {
    display: inline-block;
    border-radius: 50%;
    background: var(--border-subtle);
    transition: background 0.2s;
}

.ang-dot.s2 { width: 8px;  height: 8px; }
.ang-dot.s3 { width: 11px; height: 11px; }

.ang-dot.on {
    background: rgba(74, 232, 74, 0.15);
    border: 1.5px solid #4ae84a;
    opacity: 0.5;
}

/* s1 = jaune permanent (déclaré APRÈS .on pour gagner via source order) */
.ang-dot.s1 {
    width: 5px;
    height: 5px;
    background: rgba(232, 200, 74, 0.15);
    border-color: #e8c84a;
}

/* Variants */
.ang-dots-inline { vertical-align: middle; }
.ang-dots-inline .ang-dot.on { opacity: 0.7; }
.sort-btn.active .ang-dot.on { opacity: 1; }

/* Night-red — s1 déclaré après .on (cascade order) */
body.night-red .ang-dot.on {
    background: rgba(204, 68, 68, 0.15);
    border-color: #cc4444;
}
body.night-red .ang-dot.s1 {
    background: rgba(204, 68, 68, 0.15);
    border-color: #cc4444;
}


/* ============================================================ */
/* 13. MAG-DOTS — validé 2026-04-28 (migration sans changement)  */
/* ============================================================ */
/* Usages : Cards résultats (indicateur magnitude) + tri         */
/* Migré depuis : home.css:146-148 + 186-188 + 1351-1372         */
/*                + themes.css:257                                */
/* CHANGES vs prod : aucun (système propre, juste centralisé)   */
/* Type : indicateur visuel (5 dots magnitude), PAS un badge     */

.mag-dots {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.mag-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.mag-dot.filled {
    background: #e8c84a;
    box-shadow: 0 0 3px rgba(232, 200, 74, 0.5);
}

.mag-dot.empty {
    background: var(--bg-input);
    border: 1px solid var(--border);
}

/* Variant boutons de tri : dots plus petits + atténués si inactif */
.sort-btn .mag-dot { width: 6px; height: 6px; }
.sort-btn:not(.active) .mag-dot.filled { opacity: 0.4; }

/* Night-red */
body.night-red .mag-dot.filled {
    background: #cc4444;
    box-shadow: 0 0 3px rgba(204, 68, 68, 0.4);
}


/* ============================================================ */
/* 14. COMP-BARS — validé 2026-04-28 (Décision C : étendu raies) */
/* ============================================================ */
/* Usages : Cards résultats (mini-barres composition spectrale) */
/* Migré depuis : home.css:1152-1159                             */
/* CHANGES vs prod :                                             */
/*   - hex hardcodés → var(--color-*) (single source of truth)  */
/*   - ajout variants NII, HeII, HeI, Hβ (présents en VizieR)   */
/*   - ajout night-red override (manquait totalement)           */
/* TODO JS : ui-targets.js:473 doit étendre la map css :         */
/*   { Ha:'comp-bar-ha', OIII:'comp-bar-oiii', SII:'comp-bar-sii',*/
/*     NII:'comp-bar-nii', HeII:'comp-bar-heii',                  */
/*     HeI:'comp-bar-hei', Hb:'comp-bar-hb' }                     */
/* Type : indicateur visuel (mini barres), PAS un badge          */

.comp-bars {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    height: 16px;
    min-width: 24px;
    padding: 2px 4px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 3px;
    vertical-align: middle;
    cursor: help;
}

/* Night-red : fond légèrement teinté */
body.night-red .comp-bars {
    background: rgba(204, 68, 68, 0.06);
}


/* ============================================================ */
/* 15. CONFIDENCE BADGES — validé 2026-04-28 (migration as-is)   */
/* ============================================================ */
/* Usages : Page Documentation (légende) + Page Settings (compact) */
/* Migré depuis : utilities.css:1628-1664                         */
/* CHANGES vs prod : aucun (système bien structuré)              */
/* 3 sous-composants : .conf-badge (long), .conf-short (compact), */
/*   .dot-* (inline prose markers)                                */

/* Version longue */
.conf-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.6rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.4px; padding: 1px 5px; border-radius: 3px;
    vertical-align: middle; margin-left: 4px;
}
.conf-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.conf-physique     { color: var(--success); border: 1px solid rgba(74,217,122,0.3); background: rgba(74,217,122,0.06); }
.conf-physique::before     { background: var(--success); }
.conf-modele       { color: #4a90d9; border: 1px solid rgba(74,144,217,0.3); background: rgba(74,144,217,0.06); }
.conf-modele::before       { background: #4a90d9; }
.conf-heuristique  { color: #e8c44a; border: 1px solid rgba(232,196,74,0.3); background: rgba(232,196,74,0.06); }
.conf-heuristique::before  { background: #e8c44a; }
.conf-preference   { color: #b88adb; border: 1px solid rgba(184,138,219,0.3); background: rgba(184,138,219,0.06); }
.conf-preference::before   { background: #b88adb; }

/* Dots inline (prose markers dans la doc) */
.dot-physique, .dot-modele, .dot-heuristique, .dot-preference {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    vertical-align: middle; margin: 0 2px;
}
.dot-physique    { background: var(--success); }
.dot-modele      { background: #4a90d9; }
.dot-heuristique { background: #e8c44a; }
.dot-preference  { background: #b88adb; }

/* Version courte (Settings) */
.conf-short {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 0.55rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.4px; padding: 1px 4px; border-radius: 2px;
    vertical-align: middle; margin-left: 4px; cursor: pointer;
}
.conf-short::before { content: ""; width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0; }
.cs-phy  { color: var(--success); border: 1px solid rgba(74,217,122,0.3); background: rgba(74,217,122,0.06); }
.cs-phy::before  { background: var(--success); }
.cs-mod  { color: #4a90d9; border: 1px solid rgba(74,144,217,0.3); background: rgba(74,144,217,0.06); }
.cs-mod::before  { background: #4a90d9; }
.cs-heur { color: #e8c44a; border: 1px solid rgba(232,196,74,0.3); background: rgba(232,196,74,0.06); }
.cs-heur::before { background: #e8c44a; }
.cs-pref { color: #b88adb; border: 1px solid rgba(184,138,219,0.3); background: rgba(184,138,219,0.06); }
.cs-pref::before { background: #b88adb; }


/* ============================================================ */
/* 17. TWILIGHT — validé 2026-04-28 (migration as-is)            */
/* ============================================================ */
/* Usages : Barre crépusculaire home (sous header)               */
/* Migré depuis : home.css:590-650                                */
/* CHANGES vs prod : aucun. Night-red déjà géré (themes.css:316) */
/* Couleurs depuis variables.css : --tw-day/civil/nautical/astro/night */

.twilight-bar {
    margin-top: 10px;
    margin-bottom: 4px;
}

.twilight-strip {
    display: flex;
    height: 28px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 6px;
    border: 1px solid var(--border);
}

.twilight-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}

.twilight-segment.day      { background: var(--tw-day); }
.twilight-segment.civil    { background: var(--tw-civil); }
.twilight-segment.nautical { background: var(--tw-nautical); }
.twilight-segment.astro    { background: var(--tw-astro); }
.twilight-segment.night    { background: var(--tw-night); }

.twilight-labels {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.twilight-label {
    display: flex;
    align-items: center;
    gap: 4px;
}

.twilight-group {
    display: flex;
    gap: 6px 14px;
}

.twilight-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.twilight-dot.sunset   { background: var(--tw-day); }
.twilight-dot.civil    { background: var(--tw-civil); }
.twilight-dot.nautical { background: var(--tw-nautical); }
.twilight-dot.astro    { background: var(--tw-astro); }


/* ============================================================ */
/* 19. AUTH STATUS DOTS — validé 2026-04-28 (migration as-is)    */
/* ============================================================ */
/* Usages : Nav bottom (icône compte) + Section Compte inline    */
/* Migré depuis : utilities.css:1776-1802                         */
/* CHANGES vs prod : aucun                                        */
/* Pas de night-red override : rouge/vert restent en mode nuit   */
/*   (intentionnel : indicateur état critique)                   */

.auth-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e74c3c;
    border: 2px solid var(--bg-primary, #0e0e1a);
    pointer-events: none;
}
.nav-links-desktop .auth-dot {
    top: 6px;
    right: 6px;
}
.auth-dot.connected { background: #2ecc71; }

.auth-dot-inline {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e74c3c;
    vertical-align: middle;
    margin-right: 6px;
}
.auth-dot-inline.connected { background: #2ecc71; }


/* ============================================================ */
/* 20. SITE PINS SVG — validé 2026-04-28 (migration as-is)       */
/* ============================================================ */
/* Usages : Header accordéon Sites (topbar)                      */
/* Migré depuis : utilities.css:1804-1823                         */
/* CHANGES vs prod : aucun                                        */
/* Note : 5 couleurs identiques aux cal-color-0..4 (sites unifiés)*/

.sites-pins {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    margin-left: auto;
}
.sites-pins svg {
    width: 14px;
    height: 14px;
    opacity: 0.3;
    flex-shrink: 0;
}
.sites-pins svg.active { opacity: 1; }
.sites-pins .sites-pin-name {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-left: 3px;
    font-weight: 400;
}


/* ============================================================ */
/* 21. TAG BADGES — validé 2026-04-28 (Décision B : uniformisé) */
/* ============================================================ */
/* Usages : docs/todo.html (priorités tâches)                    */
/* Migré depuis : docs/todo.html:58-72 (styles inline)           */
/* CHANGES vs prod :                                             */
/*   - pill 10px → rectangle 3px (uniformisation famille badges) */
/*   - font 0.68rem → 0.7rem Orbitron (uniformisation)          */
/*   - padding 2px 8px → 2px 7px (uniformisation)               */
/*   - ajout border 1px (cohérence visuelle)                    */
/* TODO : docs/todo.html peut maintenant utiliser ces classes    */
/*   (drop des styles inline) — non urgent, page interne         */

.tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid;
    letter-spacing: 0.6px;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: 6px;
}
.tag-urgent { background: rgba(217, 74, 74, 0.15);  color: var(--danger);     border-color: rgba(217, 74, 74, 0.45); }
.tag-medium { background: rgba(217, 168, 74, 0.15); color: var(--warning);    border-color: rgba(217, 168, 74, 0.45); }
.tag-low    { background: rgba(123, 95, 231, 0.15); color: var(--accent);     border-color: rgba(123, 95, 231, 0.45); }
.tag-later  { background: rgba(85, 85, 102, 0.2);   color: var(--text-muted); border-color: rgba(85, 85, 102, 0.45); }


/* ============================================================ */
/* 16. EXPOSURE STEP TAGS — validé 2026-04-28 (Décision B)       */
/* ============================================================ */
/* Usages : Page Settings (paliers d'exposition cliquables)      */
/* Migré depuis : utilities.css:1695-1727                         */
/* CHANGES vs prod :                                             */
/*   - pill 14px → rectangle 3px (uniformisation famille badges) */
/*   - font 0.8rem system → Orbitron 0.7rem (uniformisation)    */
/*   - padding 4px 12px → 2px 7px (uniformisation)              */
/*   - rgba accent 0.2 → 0.15 (cohérent avec autres .active)    */

.exposure-steps-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    margin-bottom: 10px;
}

.exposure-step-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid;
    letter-spacing: 0.6px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
    background: var(--bg-card);
    color: var(--text-muted);
    border-color: var(--border-subtle);
    opacity: 0.5;
    user-select: none;
}
.exposure-step-tag.active {
    background: var(--accent-bg-strong);
    color: var(--accent);
    border-color: var(--accent-border-strong);
    opacity: 1;
}
.exposure-step-tag:hover { opacity: 0.85; }


/* ============================================================ */
/* 22. CHANNEL DOTS — validé 2026-04-28 (Décision A)             */
/* ============================================================ */
/* Usages : ⚠ DEAD CODE — non utilisé en prod (ni JS, ni HTML)  */
/*   Conservé pour usage futur potentiel (lignes tri-canal SHO) */
/* Migré depuis : utilities.css:375-388                          */
/* CHANGES vs prod :                                             */
/*   - ajout classes CSS scopées .ha/.oiii/.sii/etc.            */
/*   - couleurs depuis var(--color-*) (single source of truth)  */
/*   - drop des inline styles hex hardcodés                     */
/* TODO : si confirmé inutilisé après cleanup → supprimer        */

.channel-dots {
    display: inline-flex;
    gap: 3px;
    vertical-align: middle;
}
.channel-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

/* Variants raies (scopés sous .channel-dots pour ne pas conflit avec .spinner-dots .dot) */
.channel-dots .dot.ha   { background: var(--color-ha); }
.channel-dots .dot.oiii { background: var(--color-oiii); }
.channel-dots .dot.sii  { background: var(--color-sii); }
.channel-dots .dot.nii  { background: var(--color-nii); }
.channel-dots .dot.heii { background: var(--color-heii); }
.channel-dots .dot.hei  { background: var(--color-hei); }
.channel-dots .dot.hb   { background: var(--color-hb); }
.channel-dots .dot.l    { background: var(--color-lum); }
.channel-dots .dot.r    { background: var(--color-rgb-r); }
.channel-dots .dot.g    { background: var(--color-rgb-g); }
.channel-dots .dot.b    { background: var(--color-rgb-b); }

/* Night-red */
body.night-red .channel-dots .dot { background: #cc4444; }


/* ============================================================ */
/* 23. SETUP DETAIL TYPE — validé 2026-04-28 (rectangle Orbitron)*/
/* ============================================================ */
/* Usages : Page Settings/Gear (fiche setup ouverte, header)    */
/* Migré depuis : pages.css:1694 + pages.css:135                  */
/* CHANGES vs prod :                                             */
/*   - radius var(--radius-md) (12px pill) → 3px (rectangle)    */
/*   - font 0.78rem system → Orbitron 0.7rem (uniformisation)   */
/*   - padding 3px 10px → 2px 7px (compact uniformisé)          */
/*   - ajout border 1px (cohérent famille badges)               */
/*   - bg bleu conservé (identité visuelle "type setup")        */

.setup-detail-type,
.sensor-type-col .setup-detail-type-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 3px;
    background: rgba(74, 144, 217, 0.12);
    color: var(--accent);
    letter-spacing: 0.6px;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
}

/* Override : quand setup-detail-type wrappe un sensor-type-col, drop le styling */
.setup-detail-type:has(.sensor-type-col) {
    background: none;
    padding: 0;
}


/* ============================================================ */
/* 25. THEME SWATCHES — validé 2026-04-28 (migration as-is)      */
/* ============================================================ */
/* Usages : Page Settings (sélecteur de thème planétaire)        */
/* Migré depuis : themes.css:48-89                                */
/* CHANGES vs prod : aucun (visuel validé)                       */
/* Note : --swatch est défini par chaque body.theme-* (mars,     */
/*   jupiter, ...) dans themes.css — non touché ici              */

.theme-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px 10px;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.25s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.theme-swatch .swatch-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.3);
    transition: all 0.25s ease;
}
.theme-swatch:hover {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
}
.theme-swatch:hover .swatch-dot {
    box-shadow: 0 0 0 3px rgba(0,0,0,0.3), 0 0 12px var(--swatch);
    transform: scale(1.1);
}
.theme-swatch.active {
    border-color: var(--swatch);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    font-weight: 600;
}
.theme-swatch.active .swatch-dot {
    box-shadow: 0 0 0 3px rgba(0,0,0,0.2), 0 0 16px var(--swatch), 0 0 32px var(--swatch);
}

.comp-bar {
    width: 3px;
    border-radius: 1px;
    pointer-events: none;
}

/* Hauteurs selon force d'émission */
.comp-bar.fort   { height: 10px; }
.comp-bar.moyen  { height: 6px; }
.comp-bar.faible { height: 3px; }

/* Couleurs raies — depuis variables.css (single source of truth) */
.comp-bar-ha   { background: var(--color-ha); }
.comp-bar-oiii { background: var(--color-oiii); }
.comp-bar-sii  { background: var(--color-sii); }
.comp-bar-nii  { background: var(--color-nii); }
.comp-bar-heii { background: var(--color-heii); }
.comp-bar-hei  { background: var(--color-hei); }
.comp-bar-hb   { background: var(--color-hb); }

/* Night-red — toutes les raies basculent en rouge */
body.night-red .comp-bar-ha,
body.night-red .comp-bar-oiii,
body.night-red .comp-bar-sii,
body.night-red .comp-bar-nii,
body.night-red .comp-bar-heii,
body.night-red .comp-bar-hei,
body.night-red .comp-bar-hb {
    background: #cc4444;
}


/* ============================================================ */
/* 26. INFO CHIPS — créé 2026-04-28 (header objet fiche détail) */
/* ============================================================ */
/* Usages : Hero fiche détail (chips info objet sous le titre)   */
/* Migré depuis : docs/mockup/mockup-detail-briefing-v2-*.html   */
/* CHANGES vs mockup : pill 20px Inter → rectangle 3px Orbitron  */
/*   (cohérent famille badges design system)                     */
/* Pattern : strategy-badge / card-int / tag                      */

.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid;
    letter-spacing: 0.6px;
    line-height: 1;
    white-space: nowrap;
}

.chip-type    { background: rgba(138, 74, 217, 0.18); border-color: rgba(138, 74, 217, 0.28); color: #b088db; }
.chip-type-nb { background: rgba(80, 176, 224, 0.12); border-color: rgba(80, 176, 224, 0.22); color: #80c8e8; }
.chip-const   { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.10); color: var(--text-secondary); }
.chip-mag     { background: rgba(200, 180, 100, 0.10); border-color: rgba(200, 180, 100, 0.18); color: #c8b478; }
.chip-dist    { background: rgba(100, 180, 150, 0.08); border-color: rgba(100, 180, 150, 0.16); color: #80b8a0; }
.chip-size    { background: rgba(150, 150, 180, 0.08); border-color: rgba(150, 150, 180, 0.18); color: #aaa; }
.chip-hemi    { background: rgba(100, 180, 150, 0.08); border-color: rgba(100, 180, 150, 0.18); color: #80c5a0; }

/* .chip-comp = wrapper transparent pour héberger comp-bars dans le subtitle */
.chip-comp {
    background: transparent;
    border: none;
    padding: 0 4px;
    vertical-align: baseline;
}
.chip-comp .comp-bars { padding: 0; }

/* Night-red — tous les variants info-objet basculent en rouge */
body.night-red .chip-type,
body.night-red .chip-type-nb,
body.night-red .chip-const,
body.night-red .chip-mag,
body.night-red .chip-dist,
body.night-red .chip-size,
body.night-red .chip-hemi {
    background: rgba(120, 40, 40, 0.20);
    color: #aa4444;
    border-color: rgba(170, 68, 68, 0.45);
}


/* ============================================================ */
/* 27. STRENGTH BARS — créé 2026-04-28 (force d'émission raie)  */
/* ============================================================ */
/* Usages : Fiche détail section COMPOSITION SPECTRALE          */
/*   indicateur compact 3 barres montantes (style signal/wifi)  */
/*   pour faible / moyen / fort par raie d'émission             */
/* Pattern : 3 barres verticales hauteurs croissantes 4/7/10px  */
/*   couleur active = --em-color (à override par raie)          */
/* Usage HTML :                                                  */
/*   <span class="em-strength lvl-3" style="--em-color: var(--color-ha)" title="Fort"> */
/*     <span class="em-bar"></span><span class="em-bar"></span><span class="em-bar"></span> */
/*   </span>                                                     */

.em-strength {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 10px;
    vertical-align: middle;
}

.em-bar {
    width: 3px;
    border-radius: 1px;
    background: var(--border-subtle);
    transition: background 0.15s;
}

.em-bar:nth-child(1) { height: 4px; }
.em-bar:nth-child(2) { height: 7px; }
.em-bar:nth-child(3) { height: 10px; }

/* Activation par niveau : 1 / 2 / 3 barres "on" */
.em-strength.lvl-1 .em-bar:nth-child(1),
.em-strength.lvl-2 .em-bar:nth-child(-n+2),
.em-strength.lvl-3 .em-bar {
    background: var(--em-color, var(--text-secondary));
}

/* Night-red — toutes barres actives basculent en rouge */
body.night-red .em-strength.lvl-1 .em-bar:nth-child(1),
body.night-red .em-strength.lvl-2 .em-bar:nth-child(-n+2),
body.night-red .em-strength.lvl-3 .em-bar {
    background: #cc4444;
}

/* ========== 28. Badges redshift / blueshift ========== */
.rv-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    vertical-align: middle;
    margin-right: 4px;
    cursor: help;
}
.rv-red {
    background: rgba(224, 80, 80, 0.15);
    color: #e05050;
    border: 1px solid rgba(224, 80, 80, 0.3);
}
.rv-blue {
    background: rgba(74, 200, 232, 0.15);
    color: #4ac8e8;
    border: 1px solid rgba(74, 200, 232, 0.3);
}


/* ============================================================ */
/* 29. METEO BADGE — créé 2026-05-05 (multi-nuits)                */
/* ============================================================ */
/* Usages : Reco multi-nuits (titre "Fenêtre de captation",       */
/*   accueil + fiche détail rubrique stratégie de poses)          */
/* Spec validée via mockup-design-system-badges.html (variante J).*/
/*                                                                  */
/* 2 dimensions strictement séparées (résout la dissonance         */
/*   "Nuageux en vert" qu'avait la variante I) :                  */
/*   - Emoji = état météo prévu (Open-Meteo weather_code, 7 états)*/
/*       ☀ Clair · 🌤 Voilé · ⛅ Nuageux · ☁ Couvert · 🌫 Brumeux · 🌧 Pluie · ⛈ Orage */
/*       Mapping WMO suggéré : 0→☀  1→🌤  2→⛅  3→☁                */
/*         45,48→🌫  51-67,80-82→🌧  95-99→⛈                       */
/*   - Texte = label de l'état, couleur var(--text-muted)         */
/*       (cohérent avec le reste de l'app, pas de couleur sur le  */
/*        texte → pas de dissonance avec l'emoji)                 */
/*   - Jauge verticale .conf-gauge = predictability Meteoblue     */
/*       (5 niveaux : conf-1 très basse → conf-5 très haute)      */
/*       Hauteur + couleur graduées vert→rouge.                   */
/*       Tooltip "Indice de confiance : XX% (label)" via title.   */
/*                                                                  */
/* IMPORTANT : l'emoji garde son aspect natif coloré (jamais       */
/*   teinté). font-variant-emoji + font-family fallback assurent  */
/*   le rendu cross-platform (Apple/Segoe/Noto/Twemoji).          */

.meteo-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1;
    color: var(--text-muted);
}
.meteo-badge .emoji {
    font-size: 1rem;
    line-height: 1;
    /* Force le rendu emoji natif (pas teinté par color du parent) */
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif;
    font-variant-emoji: emoji;
}

/* Jauge verticale de confiance Meteoblue. Curseur "help" pour signaler */
/* la disponibilité d'un tooltip (title attribut HTML).                  */
.conf-gauge {
    display: inline-block;
    width: 4px;
    height: 16px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    cursor: help;
}
.conf-gauge::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    border-radius: 2px;
    background: var(--gauge-color, var(--success));
    height: var(--gauge-height, 100%);
    transition: height 0.3s, background 0.3s;
}
.conf-gauge.conf-5 { --gauge-height: 100%; --gauge-color: var(--success); }  /* 80–100% */
.conf-gauge.conf-4 { --gauge-height: 78%;  --gauge-color: #a3d966; }         /* 60–80%  */
.conf-gauge.conf-3 { --gauge-height: 56%;  --gauge-color: var(--warning); }  /* 40–60%  */
.conf-gauge.conf-2 { --gauge-height: 34%;  --gauge-color: #ff8c42; }         /* 20–40%  */
.conf-gauge.conf-1 { --gauge-height: 18%;  --gauge-color: var(--danger); }   /* 0–20%   */

/* Night-red — jauge en rouge atténué uniforme (l'emoji reste natif) */
body.night-red .conf-gauge::after {
    background: #aa4444;
}