/* ============================================================
   CHARTE GRAPHIQUE — Clinique Saint-Luc Bouge (SLBO)
   Version 3.0.0 — 2026-05-25
   Source : BRAND-SLBO.md v3.0.0
   Reconstruction sur codes officiels (charte HARMONIE Déc. 2024
   par Jérémie Philippe / Double Cheese) + SVG logos officiels.
   ============================================================ */

:root {
  /* --- IDENTITAIRES LOGO SLBO (officiels SVG) --- */
  --slbo-primary:        #005E62;  /* vert foncé : texte, headers (Pantone 5473 C) */
  --slbo-primary-hover:  #004448;
  --slbo-primary-accent: #4BB8A9;  /* turquoise logo (Pantone 563 C, = axe Interconnexion HARMONIE) */
  --slbo-noir:           #30302F;  /* noir officiel du logo (pas noir pur) */
  --slbo-bg:             #FFFFFF;
  --slbo-soft-bg:        #E6F5F3;
  --slbo-ink:            #1A1A1A;
  --slbo-ink-secondary:  #4A5256;
  --slbo-border:         #E0EBEB;
  --slbo-surface:        #F4F8F8;
  --slbo-muted:          #93D9C6;
  --slbo-field-bg:       #FFFFFF;
  --slbo-shadow:         0 1px 2px rgba(0,0,0,.05), 0 6px 16px rgba(0,0,0,.06);
  --slbo-overlay:        rgba(26, 26, 26, .45);

  /* Couleur de MARQUE (fonds de boutons, bandeaux) vs couleur d'ACCENT TEXTE
     (titres, liens). En mode sombre la première reste foncée — le texte blanc
     dessus doit rester lisible — tandis que la seconde s'éclaircit. Les
     confondre donne soit des boutons illisibles, soit des titres invisibles. */
  --slbo-accent-text:       var(--slbo-primary);
  --slbo-accent-text-hover: var(--slbo-primary-hover);

  /* Confort de lecture — piloté par les boutons A− / A+ (js/ui.js) */
  --text-scale: 1;

  /* --- PALETTE HARMONIE 2024 (charte officielle Double Cheese) --- */
  --harmonie-humanisme:        #3565AE;  /* H — bleu institutionnel */
  --harmonie-accessibilite:    #71CBF3;  /* A — cyan */
  --harmonie-reconnaissance:   #695BA4;  /* R — violet */
  --harmonie-modernite:        #E9486F;  /* M — rose fuchsia */
  --harmonie-optimisation:     #F08104;  /* O — orange */
  --harmonie-neutralite:       #FFD700;  /* N — jaune or */
  --harmonie-interconnexion:   #4BB8A9;  /* I — turquoise (= --slbo-primary-accent) */
  --harmonie-engagement:       #015E63;  /* E — teal foncé (≈ --slbo-primary) */

  /* Texte WCAG-AA strict sur axes clairs (tous validés ≥ 4.5:1 sur fond officiel) */
  --harmonie-accessibilite-text:  #1A1A1A;  /* 9.56:1 */
  --harmonie-optimisation-text:   #1A1A1A;  /* 6.50:1 */
  --harmonie-neutralite-text:     #1A1A1A;  /* 12.41:1 */
  --harmonie-interconnexion-text: #1A1A1A;  /* 7.23:1 */
  --harmonie-modernite-text:      #1A1A1A;  /* 4.66:1 — passe AA strict avec les codes officiels */

  /* --- SOUS-MARQUE PATIENT PARTENAIRE --- */
  --pp-violet:   #44277E;
  --pp-fuchsia:  #E7305E;
  --pp-saumon:   #F28F5F;
  /* (vert + turquoise = identiques à --slbo-primary / --slbo-primary-accent) */

  /* --- COULEURS LEGACY (charte 2016) --- */
  --slbo-legacy-yellow: #EEC857;
  --slbo-legacy-orange: #F38630;
  --slbo-legacy-red:    #DD4A4D;

  /* --- COULEURS DE STATUT (ratios WCAG mesurés sur blanc) --- */
  --slbo-success:    #15803D;  /* 5.02:1 sur blanc, 4.42:1 sur bg (AA-large) */
  --slbo-success-bg: #D1FAE5;
  /* Fond du bouton « Vérifier et envoyer » : un vert qui reste FONCÉ en mode
     sombre (texte blanc dessus), à ne pas confondre avec --slbo-success qui,
     lui, s'éclaircit pour rester lisible comme couleur de texte. */
  --slbo-send-bg:       #15803D;
  --slbo-send-bg-hover: #116631;
  --slbo-on-primary:    #FFFFFF;   /* texte posé sur un fond de marque */
  --slbo-warning:    #B45309;  /* 5.02:1 sur blanc, 4.51:1 sur bg ✓ AA */
  --slbo-warning-bg: #FEF3C7;
  --slbo-danger:     #B91C1C;  /* 6.47:1 sur blanc, 5.30:1 sur bg ✓ AA */
  --slbo-danger-bg:  #FEE2E2;
  --slbo-info:       #3565AE;  /* 5.79:1 = Humanisme officiel */
  --slbo-info-bg:    #DBEAFE;  /* 4.78:1 sur bg ✓ AA */

  /* --- DATA VIZ COCKPIT (dérogation Option C — usage strict data viz) --- */
  --slbo-dataviz-teal:             #35BFAE;  /* 2.28:1 sur blanc — fonds/décor uniquement */
  --slbo-dataviz-teal-text:        #0E8A7A;  /* 4.26:1 — AA-large (KPI labels ≥14pt bold) */
  --slbo-dataviz-teal-text-strong: #0C7E70;  /* 4.96:1 ✓ AA si texte fin requis */
  --slbo-dataviz-teal-text-dark:   #5AD4C0;  /* 9.62:1 sur ink — text-safe dark mode */

  /* --- TYPOGRAPHIE --- */
  --slbo-font: 'Century Gothic', 'CenturyGothic', 'AppleGothic',
               'URW Gothic', 'ITC Avant Garde Gothic',
               -apple-system, 'Segoe UI', sans-serif;
  --slbo-font-display:  'Jost', 'Outfit', var(--slbo-font);
  --slbo-font-harmonie: 'FinalSix Black', var(--slbo-font-display);
  --slbo-font-mono:     'JetBrains Mono', 'Fira Code', 'Source Code Pro',
                        'SF Mono', Consolas, Menlo, monospace;

  --slbo-fs-h1:    48px;
  --slbo-fs-h2:    30px;
  --slbo-fs-h3:    0.875rem;
  --slbo-fs-body:  1rem;
  --slbo-fs-dense: 0.75rem;
  --slbo-fs-small: 0.6875rem;

  --slbo-fw-regular:  400;
  --slbo-fw-semibold: 600;
  --slbo-fw-bold:     700;
  --slbo-fw-extra:    800;

  /* --- GRILLE D'ESPACEMENT 8 PT --- */
  --space-0: 0;    --space-1: 4px;  --space-2: 8px;   --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;  --space-7: 48px; --space-8: 64px;

  /* --- RAYONS --- */
  --radius-0: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px;

  /* Aliases legacy */
  --slbo-radius:             var(--radius-sm);
  --slbo-radius-lg:          var(--radius-md);
  --slbo-gap:                var(--space-4);
  --slbo-gap-lg:             var(--space-5);
  --slbo-border-thin:        1px;
  --slbo-page-margin-print:  18mm;
  --slbo-section-bar-height: 48px;
  --slbo-logo-clearspace:    10mm;
  --slbo-logo-min-w:         40mm;
  --slbo-logo-min-h:         9.6mm;
  --harmonie-logo-min:       20mm;  /* tailles min officielles charte HARMONIE */
}

/* ============================================================ MODE SOMBRE
   Activé UNIQUEMENT par [data-theme="dark"] posé sur <html> (js/ui.js).
   Jamais via prefers-color-scheme : le site s'ouvre toujours en mode clair,
   quel que soit le réglage du système.
   ============================================================ */

:root[data-theme="dark"] {
  --slbo-bg:            #121A1B;
  --slbo-surface:       #1A2426;
  --slbo-soft-bg:       #16302E;
  --slbo-ink:           #E9F1F1;
  --slbo-ink-secondary: #A6BCBD;
  --slbo-border:        #2C3B3D;
  --slbo-field-bg:      #101819;
  --slbo-shadow:        0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.45);
  --slbo-overlay:       rgba(0, 0, 0, .6);

  --slbo-accent-text:       #5AD4C0;
  --slbo-accent-text-hover: #8AE3D3;

  /* Statuts : fonds assombris, textes éclaircis (contrastes revérifiés) */
  --slbo-success:    #6EE7A8;  --slbo-success-bg: #10291C;
  --slbo-warning:    #F0B357;  --slbo-warning-bg: #2E2214;
  --slbo-danger:     #FF9A9A;  --slbo-danger-bg:  #2E1616;
  --slbo-info:       #8FB6F0;  --slbo-info-bg:    #16233A;
}

/* ============================================================ CONFORT DE LECTURE */

html {
  font-size: calc(16px * var(--text-scale));
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }

/* ============================================================ BASE */

body, body.slbo-theme {
  margin: 0;
  font-family: var(--slbo-font);
  color: var(--slbo-ink);
  background: var(--slbo-bg);
  font-size: var(--slbo-fs-body);
  line-height: 1.5;
}

h1, .slbo-h1, .slbo-title-1 {
  font-family: var(--slbo-font);
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.05;
  color: var(--slbo-accent-text);
  font-weight: 400;
  margin: 0 0 1rem;
}
h2, .slbo-h2, .slbo-title-2 {
  font-family: var(--slbo-font);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.1;
  color: var(--slbo-accent-text);
  font-weight: 400;
  margin: 1.5rem 0 .75rem;
}
h3, .slbo-h3, .slbo-title-3 {
  font-family: var(--slbo-font);
  font-size: var(--slbo-fs-h3);
  color: var(--slbo-accent-text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 1.25rem 0 .5rem;
}

/* Titre HARMONIE (FinalSix Black) */
.harmonie-logo {
  font-family: var(--slbo-font-harmonie);
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--slbo-primary);
}

a {
  color: var(--slbo-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--slbo-accent-text-hover); }

/* ============================================================ PATTERN SIGNATURE : titre à mot accentué */

.slbo-title-highlight {
  color: var(--slbo-primary-accent);
  font-weight: 700;
}
.slbo-title-highlight--humanisme      { color: var(--harmonie-humanisme); }
.slbo-title-highlight--accessibilite  { color: var(--harmonie-accessibilite); }
.slbo-title-highlight--reconnaissance { color: var(--harmonie-reconnaissance); }
.slbo-title-highlight--modernite      { color: var(--harmonie-modernite); }
.slbo-title-highlight--optimisation   { color: var(--harmonie-optimisation); }
.slbo-title-highlight--neutralite     { color: var(--harmonie-neutralite); }
.slbo-title-highlight--interconnexion { color: var(--harmonie-interconnexion); }
.slbo-title-highlight--engagement     { color: var(--harmonie-engagement); }

/* ============================================================ BOUTONS */

.btn-slbo {
  font-family: var(--slbo-font);
  font-weight: 700;
  letter-spacing: .02em;
  font-size: var(--slbo-fs-dense);
  background: var(--slbo-primary);
  color: #fff;
  padding: .75rem 1.5rem;
  border: 0;
  border-radius: var(--slbo-radius);
  cursor: pointer;
  transition: background .15s ease;
}
.btn-slbo:hover  { background: var(--slbo-primary-hover); }
.btn-slbo--alt   { background: var(--slbo-primary-accent); color: var(--slbo-primary); }
.btn-slbo--ghost { background: transparent; color: var(--slbo-accent-text); border: 2px solid currentColor; }

/* ============================================================ CARDS / SURFACES / PANELS */

.slbo-card {
  background: var(--slbo-bg);
  border: var(--slbo-border-thin) solid var(--slbo-border);
  border-radius: var(--slbo-radius-lg);
  padding: 1.25rem;
}
.slbo-card--surface { background: var(--slbo-surface); border-color: transparent; }
.slbo-panel {
  background: var(--slbo-bg);
  border: var(--slbo-border-thin) solid var(--slbo-border);
  padding: 1.25rem;
}

/* ============================================================ BANDEAUX DE SECTION */

.slbo-section-bar {
  min-height: var(--slbo-section-bar-height);
  display: flex; align-items: center;
  padding-inline: 1rem;
  background: var(--slbo-primary-accent);
  color: var(--slbo-primary);
  font-family: var(--slbo-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.slbo-section-bar--dark { background: var(--slbo-primary); color: #fff; }

/* ============================================================ ZONE LOGO */

.slbo-logo-safe-zone {
  display: inline-block;
  padding: var(--slbo-logo-clearspace);
  background: var(--slbo-bg);
}
.slbo-logo-safe-zone img {
  min-width: var(--slbo-logo-min-w);
  min-height: var(--slbo-logo-min-h);
  display: block;
}
.harmonie-logo-safe-zone {
  display: inline-block;
  padding: var(--slbo-logo-clearspace);
  background: var(--slbo-bg);
}
.harmonie-logo-safe-zone img {
  min-width: var(--harmonie-logo-min);
  min-height: var(--harmonie-logo-min);
  display: block;
}

/* ============================================================ BANDEAUX HARMONIE
   Usage : <div class="harmonie-band" data-axis="humanisme">…</div>
   ============================================================ */

.harmonie-band {
  display: flex; align-items: stretch;
  font-family: var(--slbo-font);
  color: #fff;
  border-radius: var(--slbo-radius);
  overflow: hidden;
}
.harmonie-band__letter {
  background: rgba(0, 0, 0, .12);
  padding: .5rem 1.25rem;
  font-size: 2.5rem; font-weight: 700;
  display: grid; place-items: center;
  min-width: 4rem;
}
.harmonie-band__body { padding: .75rem 1.25rem; flex: 1; }
.harmonie-band__title {
  margin: 0;
  font-size: 1.125rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: inherit;
}
.harmonie-band__sub { margin: .25rem 0 0; font-size: .9rem; opacity: .95; }

/* Backgrounds + text colors par axe (tous WCAG AA strict avec codes officiels) */
.harmonie-band[data-axis="humanisme"]      { background: var(--harmonie-humanisme); }
.harmonie-band[data-axis="accessibilite"]  { background: var(--harmonie-accessibilite); color: var(--harmonie-accessibilite-text); }
.harmonie-band[data-axis="reconnaissance"] { background: var(--harmonie-reconnaissance); }
.harmonie-band[data-axis="modernite"]      { background: var(--harmonie-modernite); color: var(--harmonie-modernite-text); }
.harmonie-band[data-axis="optimisation"]   { background: var(--harmonie-optimisation); color: var(--harmonie-optimisation-text); }
.harmonie-band[data-axis="neutralite"]     { background: var(--harmonie-neutralite); color: var(--harmonie-neutralite-text); }
.harmonie-band[data-axis="interconnexion"] { background: var(--harmonie-interconnexion); color: var(--harmonie-interconnexion-text); }
.harmonie-band[data-axis="engagement"]     { background: var(--harmonie-engagement); }

/* ============================================================ AXIS COLOR VARIABLES (variante avec liseré) */

.axis-humanisme       { --axis-color: var(--harmonie-humanisme); }
.axis-accessibilite   { --axis-color: var(--harmonie-accessibilite); }
.axis-reconnaissance  { --axis-color: var(--harmonie-reconnaissance); }
.axis-modernite       { --axis-color: var(--harmonie-modernite); }
.axis-optimisation    { --axis-color: var(--harmonie-optimisation); }
.axis-neutralite      { --axis-color: var(--harmonie-neutralite); }
.axis-interconnexion  { --axis-color: var(--harmonie-interconnexion); }
.axis-engagement      { --axis-color: var(--harmonie-engagement); }

.harmonie-row {
  border-top: 8px solid var(--axis-color);
  background: var(--slbo-bg);
  display: grid;
  grid-template-columns: minmax(160px, 1.2fr) repeat(2, minmax(180px, 1fr));
  gap: var(--slbo-gap);
  padding: .75rem 1rem 1rem;
  font-family: var(--slbo-font);
  color: var(--slbo-primary);
}
.harmonie-row h3 {
  margin: 0 0 .35rem;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--slbo-primary);
  font-weight: 700;
}
.harmonie-row ul { margin: 0; padding-left: 1.1rem; }

/* ============================================================ PASTILLES / BADGES d'axe */

.harmonie-dot {
  display: inline-block;
  width: .75rem; height: .75rem;
  border-radius: 50%; vertical-align: middle; margin-right: .35rem;
}
.harmonie-dot[data-axis="humanisme"]      { background: var(--harmonie-humanisme); }
.harmonie-dot[data-axis="accessibilite"]  { background: var(--harmonie-accessibilite); }
.harmonie-dot[data-axis="reconnaissance"] { background: var(--harmonie-reconnaissance); }
.harmonie-dot[data-axis="modernite"]      { background: var(--harmonie-modernite); }
.harmonie-dot[data-axis="optimisation"]   { background: var(--harmonie-optimisation); }
.harmonie-dot[data-axis="neutralite"]     { background: var(--harmonie-neutralite); }
.harmonie-dot[data-axis="interconnexion"] { background: var(--harmonie-interconnexion); }
.harmonie-dot[data-axis="engagement"]     { background: var(--harmonie-engagement); }

/* ============================================================ RUBANS / VAGUES HARMONIE
   Usage : <section class="slbo-wave-background">…</section>
   ============================================================ */

.slbo-wave-background { position: relative; overflow: hidden; }
.slbo-wave-background > * { position: relative; z-index: 1; }

.slbo-wave-background::before {
  content: "";
  position: absolute;
  inset: auto -10% -20% -10%;
  height: 160px;
  opacity: .18;
  background: repeating-linear-gradient(
    12deg,
    var(--harmonie-humanisme)      0     6px, transparent 6px   16px,
    var(--harmonie-accessibilite)  16px  22px, transparent 22px 32px,
    var(--harmonie-reconnaissance) 32px  38px, transparent 38px 48px,
    var(--harmonie-modernite)      48px  54px, transparent 54px 64px,
    var(--harmonie-optimisation)   64px  70px, transparent 70px 80px,
    var(--harmonie-neutralite)     80px  86px, transparent 86px 96px,
    var(--harmonie-interconnexion) 96px  102px, transparent 102px 112px,
    var(--harmonie-engagement)     112px 118px, transparent 118px 128px
  );
  pointer-events: none;
}
.slbo-wave-background--soft::before { opacity: .10; height: 80px; }

/* ============================================================ BADGES DE STATUT */

.slbo-badge {
  display: inline-flex; align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--slbo-font);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
}
.slbo-badge--success { background: var(--slbo-success-bg); color: var(--slbo-success); }
.slbo-badge--warning { background: var(--slbo-warning-bg); color: var(--slbo-warning); }
.slbo-badge--danger  { background: var(--slbo-danger-bg);  color: var(--slbo-danger);  }
.slbo-badge--info    { background: var(--slbo-info-bg);    color: var(--slbo-info);    }

/* Icônes CSS — décoratives uniquement. Le DOM doit porter le sens
   (libellé visible OU aria-label). Voir BRAND-SLBO.md § 13.7bis. */
.slbo-badge--success::before { content: "✓ "; speak: none; }
.slbo-badge--warning::before { content: "⚠ "; speak: none; }
.slbo-badge--danger::before  { content: "✗ "; speak: none; }
.slbo-badge--info::before    { content: "ℹ ";  speak: none; }

/* ============================================================ TABLEAUX */

.slbo-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--slbo-font);
  font-size: var(--slbo-fs-dense);
  line-height: 1.4;
}
.slbo-table th {
  background: var(--slbo-primary);
  color: #fff;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; font-size: 11px;
  border-bottom: 2px solid var(--slbo-primary-hover);
}
.slbo-table td {
  padding: 10px var(--space-4);
  border-bottom: 1px solid var(--slbo-border);
  vertical-align: top;
}
.slbo-table tbody tr:nth-child(even) { background: var(--slbo-surface); }
.slbo-table tbody tr:hover           { background: var(--slbo-soft-bg); }
.slbo-table td.num, .slbo-table th.num {
  text-align: right;
  font-family: var(--slbo-font-mono);
  font-variant-numeric: tabular-nums;
}
.slbo-table tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--slbo-primary);
  background: var(--slbo-surface);
}
.slbo-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--slbo-font);
  font-weight: 700;
  color: var(--slbo-primary);
  padding-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
}

/* ============================================================ TOC */

.slbo-toc { font-family: var(--slbo-font); font-size: var(--slbo-fs-dense); }
.slbo-toc__item {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: 6px 0;
}
.slbo-toc__title    { color: var(--slbo-accent-text); font-weight: 700; }
.slbo-toc__dots     { flex: 1; border-bottom: 1px dotted var(--slbo-ink-secondary); transform: translateY(-4px); }
.slbo-toc__page     { color: var(--slbo-ink); font-variant-numeric: tabular-nums; }
.slbo-toc__item--h2 { padding-left: var(--space-4); }
.slbo-toc__item--h2 .slbo-toc__title { color: var(--slbo-ink); font-weight: 400; }

/* ============================================================ PRINT A4 */

@media print {
  /* L'impression force le mode clair et la taille de texte d'origine :
     sans cela, un PDF « Imprimer vers fichier » sort aux couleurs du mode
     sombre. Corollaire : ne jamais poser une couleur calculée en
     element.style.color — un style en ligne l'emporterait sur ces règles.
     Passer par une variable CSS. */
  :root, :root[data-theme="dark"] {
    --text-scale: 1;
    --slbo-bg: #FFFFFF;  --slbo-surface: #F4F8F8;  --slbo-soft-bg: #E6F5F3;
    --slbo-ink: #1A1A1A; --slbo-ink-secondary: #4A5256;
    --slbo-border: #E0EBEB; --slbo-field-bg: #FFFFFF;
    --slbo-accent-text: #005E62; --slbo-accent-text-hover: #004448;
    --slbo-success: #15803D; --slbo-success-bg: #D1FAE5;
    --slbo-warning: #B45309; --slbo-warning-bg: #FEF3C7;
    --slbo-danger:  #B91C1C; --slbo-danger-bg:  #FEE2E2;
    --slbo-info:    #3565AE; --slbo-info-bg:    #DBEAFE;
    --slbo-shadow: none;
  }
  @page { size: A4 portrait; margin: 25mm 18mm 25mm 22mm; }
  body { font-size: 11pt; line-height: 1.45; background: #fff; }
  h1   { font-size: 28pt; } h2 { font-size: 18pt; } h3 { font-size: 12pt; }
  .slbo-no-print { display: none !important; }
  .slbo-page-break { page-break-before: always; }
}

.slbo-page-header, .slbo-page-footer {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 9pt; color: var(--slbo-ink-secondary);
  font-family: var(--slbo-font);
}
.slbo-page-header { border-bottom: 1px solid var(--slbo-border); padding-bottom: var(--space-2); margin-bottom: var(--space-5); }
.slbo-page-footer { border-top:    1px solid var(--slbo-border); padding-top:    var(--space-2); margin-top:    var(--space-5); }
.slbo-page-footer__page { font-variant-numeric: tabular-nums; }

/* ============================================================ TEST MODE N&B */

.slbo-gscale-test { filter: grayscale(1); }
