/*
 * 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: #4ad97a; }
.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;
}
.card-ks .moon-glyph { font-style: normal; }


/* ============================================================ */
/* 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: #4ad97a; }
.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: #d9a84a; }
.card-int.card-int-red   { background: rgba(217, 74, 74, 0.12);   border-color: rgba(217, 74, 74, 0.40);   color: #d94a4a; }
.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; }

/* 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: #4ad97a; border: 1px solid rgba(74,217,122,0.3); background: rgba(74,217,122,0.06); }
.conf-physique::before     { background: #4ad97a; }
.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: #4ad97a; }
.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: #4ad97a; border: 1px solid rgba(74,217,122,0.3); background: rgba(74,217,122,0.06); }
.cs-phy::before  { background: #4ad97a; }
.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;
}