/* ================================================
   COMMON.CSS — Variables, Reset, Styles partagés
   Plateforme de révision — Annales de médecine
   ================================================ */

:root {
  --bg-page: #FAFAFA;
  --bg-card: #FFFFFF;
  --bg-subtle: #F5F7FA;
  --bg-sidebar: #FFFFFF;
  --bg-overlay: rgba(15, 23, 42, 0.5);

  --border: #E5E9EF;
  --border-strong: #CBD5E1;

  --primary-blue: #2C5F8D;
  --primary-blue-hover: #1E4A70;
  --primary-blue-light: #E8F0F7;
  --primary-blue-soft: #DCE9F4;

  --success-green: #2D8659;
  --success-green-hover: #226944;
  --success-green-light: #E3F4EB;
  --success-green-soft: #C8EAD7;

  --warning-orange: #D97706;
  --warning-orange-light: #FEF3E2;
  --warning-orange-soft: #FBE2C0;

  --error-red: #C73E3E;
  --error-red-light: #FCE8E8;

  --neutral-grey: #94A3B8;
  --neutral-grey-light: #E2E8F0;
  --text-primary: #1F2937;
  --text-secondary: #4B5563;
  --text-muted: #94A3B8;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

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

/* ====== THÈME SOMBRE (Patch v1.1) ====== */
[data-theme="dark"] {
  /* Fonds */
  --bg-page: #0F172A;
  --bg-card: #1E293B;
  --bg-subtle: #1E293B;
  --bg-sidebar: #1A2536;
  --bg-overlay: rgba(0, 0, 0, 0.7);

  /* Bordures */
  --border: #334155;
  --border-strong: #475569;

  /* Bleu */
  --primary-blue: #5B9FD8;
  --primary-blue-hover: #7BB5E5;
  --primary-blue-light: #1E3A5F;
  --primary-blue-soft: #234870;

  /* Vert */
  --success-green: #4ADE80;
  --success-green-hover: #6EE7A1;
  --success-green-light: #14532D;
  --success-green-soft: #166534;

  /* Orange */
  --warning-orange: #FB923C;
  --warning-orange-light: #431407;
  --warning-orange-soft: #7C2D12;

  /* Rouge */
  --error-red: #F87171;
  --error-red-light: #450A0A;

  /* Gris / texte */
  --neutral-grey: #94A3B8;
  --neutral-grey-light: #334155;
  --text-primary: #F1F5F9;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;

  /* Ombres adaptées */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* Transition fluide de toutes les couleurs lors du changement de thème */
*, *::before, *::after {
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease,
              box-shadow 300ms ease;
}

/* Éviter les transitions sur les animations existantes */
.spinner, .chrono-dot, .progress-bar-fill, .pill,
.question-card, .item-label, .btn {
  transition: unset;
}
.spinner { animation: spin 0.7s linear infinite; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  background-color: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

/* ====== BOUTONS ====== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all var(--transition-base);
  cursor: pointer;
  border: none;
  min-height: 44px;
  white-space: nowrap;
  line-height: 1;
}

.btn:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.btn-primary {
  background: var(--primary-blue);
  color: white;
}
.btn-primary:hover:not(:disabled) {
  background: var(--primary-blue-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); }

.btn-success {
  background: var(--success-green);
  color: white;
}
.btn-success:hover:not(:disabled) {
  background: var(--success-green-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-success:active:not(:disabled) { transform: translateY(0); }

.btn-secondary {
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--neutral-grey-light);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--bg-subtle);
  transform: translateY(-1px);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.8rem;
  min-height: 36px;
}

.btn-lg {
  padding: 14px 24px;
  font-size: 1rem;
  min-height: 52px;
}

.btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius);
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ====== BADGES ====== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}
.badge-grey { background: var(--neutral-grey-light); color: var(--text-secondary); }
.badge-orange { background: var(--warning-orange-light); color: var(--warning-orange); border: 1px solid var(--warning-orange-soft); }
.badge-green { background: var(--success-green-light); color: var(--success-green); border: 1px solid var(--success-green-soft); }
.badge-blue { background: var(--primary-blue-light); color: var(--primary-blue); border: 1px solid var(--primary-blue-soft); }

/* ====== MODAL ====== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn var(--transition-base) ease-out;
}

.modal-card {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 520px;
  animation: scaleIn var(--transition-base) ease-out;
  overflow: hidden;
}

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

.modal-header h2 { font-size: 1.1rem; }

.modal-body { padding: 20px 24px; }

.modal-footer {
  padding: 16px 24px 20px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  border-top: 1px solid var(--border);
}

.modal-card-sm { max-width: 460px; }
/* Au-dessus du tiroir des notes communautaires (z-index 1100). */
.modal-backdrop.omega-dialog { z-index: 1200; }
.dialog-message { white-space: pre-line; line-height: 1.55; font-size: 0.92rem; margin: 0; }

.btn-danger {
  background: var(--error-red);
  color: #fff;
  border: 1px solid var(--error-red);
}
.btn-danger:hover:not(:disabled) { filter: brightness(0.92); }

/* ====== BANDEAU D'ALERTE (js/dialog.js) ====== */
.omega-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 10px 16px;
  font-size: 0.88rem;
  line-height: 1.4;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.omega-banner-warning { background: var(--warning-orange-light); color: var(--text-primary); border-bottom: 1px solid var(--warning-orange-soft); }
.omega-banner-info { background: var(--primary-blue-light); color: var(--text-primary); border-bottom: 1px solid var(--primary-blue-soft); }
.omega-banner .btn { background: var(--bg-card); border: 1px solid var(--border-strong); color: var(--text-primary); }
.omega-banner-bottom {
  top: auto; bottom: 16px; left: 50%; right: auto;
  transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 32px);
  border-radius: var(--radius);
  border: 1px solid var(--primary-blue-soft);
}
.omega-banner-close {
  background: none; border: 0; cursor: pointer;
  color: var(--text-secondary); font-size: 0.9rem; padding: 2px 4px;
}

/* ====== BARRE DE PROGRESSION ====== */
.progress-bar-track {
  width: 100%;
  height: 6px;
  background: var(--neutral-grey-light);
  border-radius: 99px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-blue), var(--success-green));
  border-radius: 99px;
  transition: width var(--transition-slow) ease-out;
  min-width: 0;
}

/* ====== ÉTAT VIDE ====== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
  gap: 12px;
  color: var(--text-muted);
}
.empty-state .empty-icon { font-size: 3rem; }
.empty-state h2 { color: var(--text-primary); font-size: 1.2rem; }
.empty-state p { max-width: 440px; font-size: 0.9rem; }
.empty-state code {
  background: var(--bg-subtle);
  padding: 10px 16px;
  border-radius: var(--radius);
  font-family: monospace;
  font-size: 0.85rem;
  border: 1px solid var(--border);
  margin-top: 8px;
  display: block;
  color: var(--text-primary);
}

/* ====== ERREUR ====== */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
  gap: 12px;
}
.error-state .error-icon { font-size: 2.5rem; }
.error-state h2 { color: var(--error-red); }
.error-state p { color: var(--text-secondary); max-width: 500px; }
.error-state code {
  background: var(--bg-subtle);
  padding: 10px 16px;
  border-radius: var(--radius);
  font-family: monospace;
  font-size: 0.85rem;
  border: 1px solid var(--border);
  display: block;
}

/* ====== SPINNER ====== */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  gap: 12px;
  color: var(--text-muted);
}
.spinner {
  width: 22px;
  height: 22px;
  border: 3px solid var(--neutral-grey-light);
  border-top-color: var(--primary-blue);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* ====== ANIMATIONS ====== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes flashGreen {
  0% { box-shadow: none; }
  40% { box-shadow: 0 0 0 4px var(--success-green-soft); }
  100% { box-shadow: none; }
}

/* ====== UTILITAIRES ====== */
.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success-green); }
.text-error { color: var(--error-red); }
.text-warning { color: var(--warning-orange); }

/* ====== DISCLAIMER ANNALE (IA) ====== */
.annale-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 16px 0;
  padding: 10px 14px;
  background: var(--warning-orange-light);
  border: 1px solid var(--warning-orange-soft);
  border-left: 4px solid var(--warning-orange);
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-secondary);
}
.annale-disclaimer-icon { flex: 0 0 auto; }

/* ====== ICÔNES AU TRAIT (js/icons.js) — épreuve et correction ======
   Remplacent les emojis : un glyphe de 1em, à la couleur du texte
   qui l'entoure, sauf dans les encadrés d'avertissement. */
.ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ico svg {
  width: 1em;
  height: 1em;
}
.annale-disclaimer-icon .ico,
.zone-image-error .ico {
  color: var(--warning-orange);
  font-size: 1.1em;
}
.zone-image-error .ico { vertical-align: -0.2em; }
.error-state .error-icon .ico { color: var(--error-red); }

/* ====== RESPONSIVE ====== */
@media (max-width: 768px) {
  .modal-footer {
    flex-direction: column-reverse;
  }
  .modal-footer .btn {
    width: 100%;
  }

  /* Safari iOS zoome automatiquement sur tout champ dont la police
     descend sous 16 px, dès qu'on le touche — et ne dézoome pas en
     sortant. L'utilisateur doit pincer pour revenir.

     Concerné : les champs de connexion et de compte (`.field input`,
     14,72 px) et la recherche (`.search-input`, 14 px). Les champs
     de réponse QROC/NUM ne le sont PAS : epreuve.js leur pose un
     style en ligne `font-size: 1rem`, ils sont déjà à 16 px.

     16 px est le seuil exact d'iOS : en dessous il zoome, à partir
     de 16 il ne fait rien. On ne touche qu'au mobile.

     Le préfixe `html` n'est pas décoratif : `.field input`
     (auth.css) a exactement la même spécificité que
     `input[type=...]`, et auth.css est chargé APRÈS common.css sur
     toutes les pages — il gagnait donc à l'ancienneté. `html` fait
     passer le sélecteur devant sans recourir à `!important`. */
  html input[type="text"],
  html input[type="email"],
  html input[type="password"],
  html input[type="number"],
  html input[type="search"],
  html input:not([type]),
  html textarea,
  html select {
    font-size: 16px;
  }
}

/* ================================================
   QUESTIONS ZONE — overlay SVG sur image
   ================================================ */

/* Palette déterministe : A-J → couleurs distinctes */
:root {
  --zone-a: #DC2626; --zone-a-soft: rgba(220, 38, 38, 0.35);
  --zone-b: #2563EB; --zone-b-soft: rgba(37, 99, 235, 0.35);
  --zone-c: #F59E0B; --zone-c-soft: rgba(245, 158, 11, 0.40);
  --zone-d: #16A34A; --zone-d-soft: rgba(22, 163, 74, 0.35);
  --zone-e: #9333EA; --zone-e-soft: rgba(147, 51, 234, 0.35);
  --zone-f: #DB2777; --zone-f-soft: rgba(219, 39, 119, 0.35);
  --zone-g: #0891B2; --zone-g-soft: rgba(8, 145, 178, 0.35);
  --zone-h: #65A30D; --zone-h-soft: rgba(101, 163, 13, 0.35);
  --zone-i: #C2410C; --zone-i-soft: rgba(194, 65, 12, 0.35);
  --zone-j: #4338CA; --zone-j-soft: rgba(67, 56, 202, 0.35);
}

.zone-stage {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  user-select: none;
  -webkit-user-drag: none;
}
.zone-stage img.zone-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.zone-stage svg.zone-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.zone-stage.placement-mode {
  cursor: crosshair;
}

/* Couche des marqueurs et labels : posée sur l'image, en HTML.
   Contrairement à l'overlay SVG (étiré pour épouser l'image, ce qui est
   voulu pour les FORMES normalisées), les éléments HTML positionnés en %
   gardent une taille fixe en px : pastilles rondes, lettres nettes,
   quel que soit le ratio de l'image. */
.zone-marker-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;   /* seuls les marqueurs interactifs re-captent */
}

/* Marqueur utilisateur (pastille ronde avec lettre) */
.zone-mark {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 26px; height: 26px;
  padding: 0;
  display: grid; place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  font-family: var(--font-sans, sans-serif);
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.zone-mark:hover { transform: translate(-50%, -50%) scale(1.18); }
.zone-mark:focus-visible { outline: 2px solid var(--primary-blue); outline-offset: 2px; }
.zone-mark-static { pointer-events: none; cursor: default; }
/* Indicateur dans/hors zone en correction */
.zone-mark.in-zone  { border-color: #16A34A; box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.45), 0 1px 4px rgba(0,0,0,0.45); }
.zone-mark.out-zone { border-color: #DC2626; box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.45), 0 1px 4px rgba(0,0,0,0.45); }

/* Label d'une zone correcte (lettre au centroïde, non interactif) */
.zone-zlabel {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 20px; height: 20px;
  padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  color: #fff;
  font-weight: 700;
  font-size: 0.72rem;
  font-family: var(--font-sans, sans-serif);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  opacity: 0.92;
}

/* Image de zonage introuvable */
.zone-image-error {
  padding: 16px;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  background: var(--warning-orange-light);
  color: var(--text-primary);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* Zone correcte (overlay translucide) */
/* Teinte légère de la couleur de la zone + contour net. L'overlay est étiré
   (preserveAspectRatio="none") : `non-scaling-stroke` garde un trait de 2 px
   quel que soit le ratio de l'image. */
.zone-correct {
  fill-opacity: 0.22;
  stroke-width: 2px;
  stroke-opacity: 0.95;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.zone-correct-label {
  fill: white;
  stroke: rgba(0,0,0,0.5);
  stroke-width: 0.4;
  paint-order: stroke;
  font-weight: 700;
  font-size: 4.5px;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

/* Liste de pastilles A-E sous l'image */
.zone-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  background: var(--bg-subtle);
  border-radius: 8px;
}
.zone-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 7px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.zone-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.zone-chip[data-active="true"] {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px var(--primary-blue-light);
}
.zone-chip[data-placed="true"] {
  background: var(--success-green-light);
  border-color: var(--success-green);
}
/* Statut pendant le placement (CSS). Masqué en correction : le texte est posé par JS. */
.zone-chip[data-placed="true"]  .zone-chip-status::before { content: '● placé'; color: var(--success-green); font-weight: 600; }
.zone-chip[data-placed="false"] .zone-chip-status::before { content: 'à placer'; color: var(--text-muted); font-style: italic; }
.zone-chip.chip-correct .zone-chip-status::before,
.zone-chip.chip-wrong   .zone-chip-status::before,
.zone-chip.chip-missing .zone-chip-status::before { content: none; }

.zone-chip-letter {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 800;
  font-size: 0.8rem;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35);
}
.zone-chip-text { flex: 1; line-height: 1.2; }
.zone-chip-status { font-size: 0.72rem; white-space: nowrap; }
.zone-chip[disabled] { cursor: default; }
.zone-chip[disabled]:not(.chip-correct):not(.chip-wrong):not(.chip-missing) { opacity: 0.55; }
.zone-chip[disabled]:hover { transform: none; }

/* ── Statut de correction (entraînement + correction) ── */
.zone-chip.chip-correct { opacity: 1; border-color: var(--success-green); background: var(--success-green-light); }
.zone-chip.chip-correct .zone-chip-status { color: var(--success-green); font-weight: 700; }
.zone-chip.chip-wrong   { opacity: 1; border-color: #DC2626; background: rgba(220, 38, 38, 0.08); }
.zone-chip.chip-wrong   .zone-chip-status { color: #DC2626; font-weight: 700; }
.zone-chip.chip-missing { opacity: 1; border-color: var(--border-strong); background: var(--bg-subtle); }
.zone-chip.chip-missing .zone-chip-status { color: var(--text-muted); font-style: italic; }

.zone-helper {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Logo Neuronnale ──
   Le logo fourni (identite/logo-neuronnale.png), en deux versions à fond
   transparent : trait bleu marine pour le thème clair, trait clair pour le
   thème sombre (le bleu disparaîtrait sur fond noir). Les deux <img> sont
   dans chaque en-tête ; le thème choisit laquelle s'affiche. */
.brand-logo { display: block; height: 40px; width: auto; }
.brand-logo-lg { height: 56px; margin: 0 auto; }
.brand-logo-sm { height: 26px; }
.brand-logo-sombre { display: none; }
[data-theme="dark"] .brand-logo { display: none; }
[data-theme="dark"] .brand-logo-sombre { display: block; }