/* Lexio — thème par-dessus Bootstrap 5.
   Tout le reste est du Bootstrap de base (grille, cartes, alertes, badges, listes, navbar,
   formulaires, utilitaires) : ce fichier ne porte que ce que Bootstrap n'a pas —
   les couleurs et polices de la marque, la réglette de fréquence, l'absence d'animation
   et l'impression. */

/* ---------- thème : variables Bootstrap ---------- */
:root, [data-bs-theme="light"] {
  --bs-primary: #4B3FD9;
  --bs-primary-rgb: 75, 63, 217;
  --bs-primary-bg-subtle: #ECEAFE;
  --bs-primary-border-subtle: #C9C3FA;
  --bs-primary-text-emphasis: #3A30B0;
  --bs-link-color: #4B3FD9;
  --bs-link-color-rgb: 75, 63, 217;
  --bs-link-hover-color: #3A30B0;
  --bs-link-hover-color-rgb: 58, 48, 176;
  --bs-body-color: #1B1F3B;
  --bs-body-color-rgb: 27, 31, 59;
  --bs-emphasis-color: #11142B;
  --bs-secondary-color: rgba(27, 31, 59, .68);
  --bs-tertiary-bg: #F4F5FA;
  --bs-tertiary-bg-rgb: 244, 245, 250;
  --bs-border-color: #E3E6EF;
  --bs-focus-ring-color: rgba(75, 63, 217, .25);
  --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-font-monospace: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --lx-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --lx-band: #DCD8FB;
}

[data-bs-theme="dark"] {
  --bs-primary: #8C82FF;
  --bs-primary-rgb: 140, 130, 255;
  --bs-primary-bg-subtle: #25234A;
  --bs-primary-border-subtle: #3B3775;
  --bs-primary-text-emphasis: #B8B1FF;
  --bs-link-color: #8C82FF;
  --bs-link-color-rgb: 140, 130, 255;
  --bs-link-hover-color: #B0A9FF;
  --bs-link-hover-color-rgb: 176, 169, 255;
  --bs-body-bg: #171B31;
  --bs-body-bg-rgb: 23, 27, 49;
  --bs-body-color: #E7E9F5;
  --bs-body-color-rgb: 231, 233, 245;
  /* À redéfinir ici : `:root` vaut aussi en sombre, et sa valeur claire (quasi noire)
     l'emporterait sur celle de Bootstrap — les tableaux prennent leur texte là. */
  --bs-emphasis-color: #FFFFFF;
  --bs-secondary-color: rgba(231, 233, 245, .68);
  --bs-tertiary-bg: #0F1222;
  --bs-tertiary-bg-rgb: 15, 18, 34;
  --bs-border-color: #272C48;
  --lx-band: #2E2A63;
}

/* Bootstrap compile ses boutons et contrôles avec des couleurs fixes : on les rebranche sur la marque. */
.btn-primary {
  --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary-text-emphasis); --bs-btn-hover-border-color: var(--bs-primary-text-emphasis);
  --bs-btn-active-bg: var(--bs-primary-text-emphasis); --bs-btn-active-border-color: var(--bs-primary-text-emphasis);
  --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary);
}
/* `.table-light` est une variante à couleurs fixes, claire quel que soit le thème : en sombre,
   l'en-tête restait blanc sous des liens de tri pâles, illisibles. On la rebranche sur le thème. */
[data-bs-theme="dark"] .table-light {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: var(--bs-tertiary-bg);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-striped-bg: var(--bs-tertiary-bg);
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-active-bg: var(--bs-tertiary-bg);
  --bs-table-active-color: var(--bs-body-color);
  --bs-table-hover-bg: var(--bs-tertiary-bg);
  --bs-table-hover-color: var(--bs-body-color);
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

/* Colonne d'adresse dans un tableau à défilement horizontal : sur mobile, elle se serait
   coupée lettre à lettre ; mieux vaut faire défiler le tableau. */
.lx-col-url { min-width: 16rem; }

[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #0F1222; --bs-btn-hover-color: #0F1222; --bs-btn-active-color: #0F1222; }
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary);
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--bs-primary); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--bs-primary-border-subtle); }
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }

/* Titres : la seule police de caractère. Chiffres : chasse fixe, alignés. */
h1, h2, h3, .h1, .h2, .h3, .navbar-brand { font-family: var(--lx-display); letter-spacing: -.015em; }
.font-monospace, .tabular { font-variant-numeric: tabular-nums; }
.lx-label { font-family: var(--bs-font-sans-serif); } /* libellé mobile dans une cellule en chasse fixe */

/* ---------- aucune animation, nulle part (transitions, fondus, défilement fluide) ---------- */
html { scroll-behavior: auto !important; }
*, *::before, *::after { transition: none !important; animation: none !important; }
.fade:not(.show) { opacity: 0; }

/* ---------- marque ---------- */
.navbar-brand { font-weight: 700; font-size: 1.45rem; letter-spacing: -.03em; }
.navbar-brand .dot { color: var(--bs-primary); }

/* ---------- la réglette de fréquence : fourchette, cible, compte actuel ---------- */
.lx-ruler { position: relative; height: 22px; }
.lx-ruler::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--bs-border-color); border-radius: 2px; }
.lx-ruler .band { position: absolute; top: 5px; height: 12px; background: var(--lx-band); border-radius: 3px; }
.lx-ruler .tgt { position: absolute; top: 3px; width: 2px; height: 16px; background: var(--bs-primary); transform: translateX(-1px); }
.lx-ruler .cur { position: absolute; top: 5px; width: 12px; height: 12px; border-radius: 50%; transform: translateX(-6px);
  border: 2px solid var(--bs-body-bg); box-shadow: 0 0 0 1px currentColor; background: currentColor; }
.lx-ruler .cur.is-missing { color: var(--bs-danger); }
.lx-ruler .cur.is-under { color: var(--bs-warning); }
.lx-ruler .cur.is-ok { color: var(--bs-success); }
.lx-ruler .cur.is-over { color: var(--bs-purple); }
.text-over { color: var(--bs-purple) !important; }

/* Jauge compacte des outils (comparaison, rédaction) : même lecture que la réglette. */
.lx-gauge { position: relative; height: 12px; background: var(--bs-tertiary-bg); border-radius: 99px; }
.lx-gauge .zone { position: absolute; top: 0; bottom: 0; background: var(--lx-band); border-radius: 99px; }
.lx-gauge .cur { position: absolute; top: -3px; width: 3px; height: 18px; border-radius: 2px; transform: translateX(-50%); }

/* En-tête de colonne triable en bouton (composants live) : même allure qu'un titre de colonne. */
.btn.lx-sort { --bs-btn-color: var(--bs-emphasis-color); --bs-btn-hover-color: var(--bs-primary); --bs-btn-active-color: var(--bs-emphasis-color);
  --bs-btn-padding-x: 0; --bs-btn-padding-y: 0; --bs-btn-border-width: 0; font: inherit; font-weight: 600; text-decoration: none; vertical-align: baseline; }

/* Tableaux : tout le contenu (mots-clés, URLs, nombres, en-têtes) à la taille du texte
   explicatif qui les entoure (.small = 14 px), sans réduction supplémentaire des cellules .small. */
.table { font-size: .875rem; }
.table .small, .table small { font-size: 1em; }

/* Tuile cliquable (sélecteur de mesure) : une carte, pas un bouton gris. */
.lx-tile { color: inherit; background: var(--bs-body-bg); }
.lx-tile:hover { border-color: var(--bs-primary-border-subtle); }

/* Nombres des tableaux (volumes, positions) : jamais coupés en deux lignes. */
td.text-end.font-monospace { white-space: nowrap; }

/* ---------- impression / PDF ---------- */
@media print {
  @page { margin: 14mm 12mm; }
  body { background: #fff !important; font-size: 10.5pt; }
  .card { box-shadow: none !important; }
  .lx-term-row { break-inside: avoid; }
  .lx-page-break { break-before: page; }
  [hidden].lx-term-row { display: block !important; }
  .collapse:not(.show) { display: none !important; }
  a { color: inherit !important; text-decoration: none !important; }
}