/* 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);
  /* System faces only, Segoe UI first (Dylan's choice): nothing to download, native rendering
     on Windows; San Francisco on Apple devices, the system sans elsewhere. Figures use the
     matching system monospace (Cascadia on Windows). Headings get their weight from Segoe UI
     Semibold (600) and tight tracking, not from a display face. */
  --bs-font-sans-serif: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --bs-font-monospace: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "SFMono-Regular", Menlo, monospace;
  --lx-display: var(--bs-font-sans-serif);
  --bs-body-line-height: 1.6;
  --bs-border-radius: .5rem;
  --bs-border-radius-lg: .75rem;
  --bs-box-shadow-sm: 0 1px 2px rgba(27, 31, 59, .06);
  --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); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }

/* ---------- typographie ----------
   Échelle resserrée pour un outil dense (quarte, 1.2) : un titre de page ne crie pas plus fort
   que les données qu'il annonce. Graisse unique 600 (Segoe UI Semibold) pour tous les titres,
   `fw-bold` compris (Bootstrap le passe en 700 avec !important : trop lourd pour un outil). */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--lx-display); font-weight: 600; line-height: 1.2; color: var(--bs-emphasis-color);
}
h1, .h1 { font-size: calc(1.3rem + .6vw); letter-spacing: -.022em; }
h2, .h2 { font-size: calc(1.25rem + .3vw); letter-spacing: -.018em; }
h3, .h3 { font-size: 1.3rem; letter-spacing: -.01em; }
h4, .h4 { font-size: 1.2rem; letter-spacing: -.01em; }
h5, .h5 { font-size: 1.05rem; }
h6, .h6 { font-size: .95rem; }
@media (min-width: 1200px) { h1, .h1 { font-size: 2rem; } h2, .h2 { font-size: 1.6rem; } }
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6).fw-bold { font-weight: 600 !important; }
.lead { font-weight: 400; color: var(--bs-secondary-color); }
/* Labels are written in sentence case: the theme turns Bootstrap's capitals utility into a
   quiet label (the markup keeps the class, used on column headers and card labels). */
.text-uppercase { text-transform: none !important; letter-spacing: normal !important; font-weight: 600; }
/* Chiffres : chasse fixe, alignés. */
.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 et navigation ---------- */
.navbar-brand { font-family: var(--lx-display); font-weight: 700; font-size: 1.45rem; letter-spacing: -.04em; }
.navbar-brand .dot { color: var(--bs-primary); }
.navbar .nav-link { font-weight: 500; }
/* Rubrique active : un trait sous le lien (grand écran), la couleur de marque partout. */
.navbar .nav-link.active { color: var(--bs-primary); }
@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .nav-link.active { box-shadow: inset 0 -2px 0 var(--bs-primary); }
}

/* ---------- composants ---------- */
.btn { font-weight: 600; }
.badge { font-weight: 600; border-radius: .375rem; }
.card { --bs-card-border-color: var(--bs-border-color); }
.card-header { font-weight: 500; }
.list-group-item strong, .card strong { font-weight: 600; }
/* En-têtes de tableau : plus discrets que les données, jamais en capitales. */
.table > thead th, .table > thead .btn.lx-sort { font-weight: 600; color: var(--bs-secondary-color); }
.table > thead th { font-size: .8125rem; }
/* Focus clavier toujours visible (aucun effet, un simple contour). */
:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline: none; }

/* ---------- 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; }

/* ---------- app shell: page head, site identity, lists, states ----------
   One distinctive device: every site has a monogram tinted with its own hue (--lx-hue, set
   from the site id), repeated in the switcher, the site list and the site header, so the
   site-centric model is visible at a glance. Everything around it stays quiet. */
.lx-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem;
  padding-bottom: 1.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--bs-border-color); }
.lx-page-head h1 { margin: 0; }
.lx-page-head .lx-lede { color: var(--bs-secondary-color); margin: .375rem 0 0; max-width: 70ch; }
.lx-crumbs { display: flex; flex-wrap: wrap; gap: .25rem .5rem; font-size: .8125rem; margin-bottom: .5rem; color: var(--bs-secondary-color); }
.lx-crumbs a { color: var(--bs-secondary-color); text-decoration: none; }
.lx-crumbs a:hover { color: var(--bs-primary); text-decoration: underline; }
.lx-crumbs > * + *::before { content: "/"; margin-right: .5rem; color: var(--bs-border-color); }
.lx-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .875rem; color: var(--bs-secondary-color); margin-top: .375rem; }
.lx-meta > span { display: inline-flex; align-items: center; gap: .375rem; }

.lx-mono { --lx-hue: 248; display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: .5rem;
  font-weight: 700; font-size: .9375rem; line-height: 1; letter-spacing: -.02em;
  background: hsl(var(--lx-hue) 70% 93%); color: hsl(var(--lx-hue) 55% 32%); box-shadow: inset 0 0 0 1px hsl(var(--lx-hue) 50% 84%); }
.lx-mono-sm { width: 1.5rem; height: 1.5rem; font-size: .75rem; border-radius: .375rem; }
.lx-mono-lg { width: 3rem; height: 3rem; font-size: 1.375rem; border-radius: .75rem; }
[data-bs-theme="dark"] .lx-mono { background: hsl(var(--lx-hue) 35% 22%); color: hsl(var(--lx-hue) 80% 82%); box-shadow: inset 0 0 0 1px hsl(var(--lx-hue) 30% 32%); }
/* the site's own favicon: on white in both themes (icons are drawn for light browser tabs) */
.lx-mono-icon, [data-bs-theme="dark"] .lx-mono-icon { background: #fff; box-shadow: inset 0 0 0 1px var(--bs-border-color); }
.lx-mono-icon img { width: 66%; height: 66%; object-fit: contain; }

/* site switcher: the current site, named, next to the brand */
.lx-switch { display: inline-flex; align-items: center; gap: .5rem; max-width: 18rem; }
.lx-switch .lx-switch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--bs-emphasis-color); }
.lx-switch-menu { min-width: 16rem; }
.lx-switch-item { display: flex; align-items: center; gap: .625rem; }

/* site sub-navigation: underlined tabs, not pills */
.lx-subnav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; border-bottom: 1px solid var(--bs-border-color); margin: -.25rem 0 1.5rem; }
.lx-subnav a { padding: .625rem 0; font-weight: 500; color: var(--bs-secondary-color); text-decoration: none; box-shadow: inset 0 -2px 0 transparent; }
.lx-subnav a:hover { color: var(--bs-emphasis-color); }
.lx-subnav a.active, .lx-subnav a[aria-current="page"] { color: var(--bs-primary); box-shadow: inset 0 -2px 0 var(--bs-primary); }

/* section title inside a page, with its explanation */
.lx-section-head { margin-bottom: .875rem; }
.lx-section-head h2 { font-size: 1.125rem; margin: 0; }
.lx-section-head p { color: var(--bs-secondary-color); margin: .25rem 0 0; max-width: 72ch; font-size: .9375rem; }

/* one surface per list (rows separated by rules, no card per row) */
.lx-surface { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); overflow: hidden; }
.lx-surface strong, .lx-fieldset > h2, .lx-section-head h2 { color: var(--bs-emphasis-color); }
.lx-figure { font-size: .8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lx-surface > .list-group-flush > .list-group-item:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.lx-surface .table { margin: 0; }
.lx-surface .table > :not(caption) > * > * { padding: .75rem 1rem; }
.lx-surface .table > thead th { background: var(--bs-tertiary-bg); border-bottom-color: var(--bs-border-color); }
.lx-surface .table > tbody > tr:last-child > * { border-bottom: 0; }
.lx-row-link { color: inherit; text-decoration: none; }
.min-w-0 { min-width: 0; }
.flex-none { flex: none; }

/* empty states: an invitation to act */
.lx-empty { border: 1px dashed var(--bs-border-color); border-radius: var(--bs-border-radius-lg); padding: 2rem 1.5rem; text-align: center;
  background: var(--bs-body-bg); color: var(--bs-secondary-color); }
.lx-empty strong { display: block; color: var(--bs-emphasis-color); margin-bottom: .25rem; }

/* states of work (calendar, drafts, studies): a dot and a word, one palette everywhere */
.lx-status { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; font-weight: 600; white-space: nowrap;
  padding: .1875rem .5rem; border-radius: 99px; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.lx-status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.lx-status-wait { color: var(--bs-secondary-color); }
.lx-status-busy { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.lx-status-review { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.lx-status-planned { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
.lx-status-done { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.lx-status-failed { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.lx-status-off { background: transparent; color: var(--bs-secondary-color); text-decoration: line-through; }

/* calendar: each row starts with its date */
.lx-date { display: grid; justify-items: center; width: 3.25rem; padding: .25rem 0; border-radius: .5rem; border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg); line-height: 1.1; }
.lx-date .d { font-size: 1.25rem; font-weight: 700; color: var(--bs-emphasis-color); font-variant-numeric: tabular-nums; }
.lx-date .m { font-size: .6875rem; font-weight: 600; color: var(--bs-secondary-color); }
.lx-date .h { font-size: .6875rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.lx-date.is-past { background: var(--bs-tertiary-bg); }

/* forms in settings: grouped fieldsets with a title and a short explanation */
.lx-fieldset { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); padding: 1.25rem 1.25rem .5rem; }
.lx-fieldset > h2 { font-size: 1rem; margin: 0 0 .25rem; }
.lx-fieldset > .lx-help { color: var(--bs-secondary-color); font-size: .875rem; margin: 0 0 1rem; }

/* sign-in */
.lx-auth { max-width: 26rem; margin: 6vh auto 0; }
.lx-auth .navbar-brand { font-size: 2.25rem; }

/* a draft: the page as it will read */
.lx-draft { font-size: 1rem; line-height: 1.7; max-width: 72ch; }
.lx-draft h3 { font-size: 1.05rem; margin-top: 1.25rem; }
.lx-review { list-style: none; padding: .75rem 1rem; margin: 0 0 1rem; border-radius: .5rem; background: var(--bs-tertiary-bg); font-size: .875rem; }
.lx-review li + li { margin-top: .25rem; }
/* updater: a change word by word */
.lx-diff del { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); text-decoration: line-through; }
.lx-diff ins { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); text-decoration: none; }
.lx-image-slot { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; align-items: start; padding: 1rem;
  border: 1px dashed var(--bs-border-color); border-radius: .5rem; background: var(--bs-tertiary-bg); margin-bottom: 1rem; font-size: .875rem; }
.lx-image-slot .lx-frame { grid-row: span 3; width: 5.5rem; aspect-ratio: 4 / 3; border-radius: .375rem;
  background: repeating-linear-gradient(135deg, var(--bs-border-color) 0 1px, transparent 1px 10px); border: 1px solid var(--bs-border-color); }

/* ---------- 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; }
}