:root { --brand: #1f4f7a; }
.bg-primary { background-color: var(--brand) !important; }
.btn-primary { background-color: var(--brand); border-color: var(--brand); }
.brand-link { display: inline-flex; align-items: center; margin-right: 1rem; }
.brand-logo { display: block; width: clamp(9rem, 13vw, 11.25rem); max-width: 42vw; height: auto; }
.navbar.bg-primary { background-color: #fff !important; border-bottom: 4px solid var(--brand); }
.navbar .nav-link,
.navbar .navbar-text { color: #173a5a; }
.navbar .nav-link:hover,
.navbar .nav-link:focus { color: var(--brand); }
.metric-card { border: 0; box-shadow: 0 .125rem .5rem rgba(0,0,0,.06); }
.card { border-color: #dce2e8; }
form > div:has(> label) { margin-bottom: 1rem; }
.errorlist { color: #b42318; margin-bottom: .3rem; }
.markdown-preview { min-height: 8rem; padding: 1rem; border: 1px solid #dee2e6; border-radius: .375rem; background: #fff; }
.sticky-save { position: sticky; bottom: 0; padding: 1rem; background: rgba(248,249,250,.95); border-top: 1px solid #dee2e6; z-index: 10; }
.qr { max-width: 220px; width: 100%; }
.chat-transcript { max-width: 900px; }
.message { background: white; border: 1px solid #dee2e6; border-radius: .75rem; padding: 1rem; margin-bottom: 1rem; }
.message-assistant { background: #f2f7fc; border-left: 5px solid #1f4f7a; }
.message-user { background: #f1faf5; border-left: 5px solid #198754; }
.message-system_event { background: #fff9e8; border-left: 5px solid #ffc107; }
.source-preview { white-space: pre-wrap; max-height: 70vh; overflow: auto; }
.card form input[type="password"] { display: block; width: 100%; padding: .375rem .75rem; border: 1px solid #dee2e6; border-radius: .375rem; }
.session-table { overflow: visible; }
.scenario-table { min-width: 0; max-width: 100%; overflow: visible; }
.scenario-table .table { max-width: 100%; }
.scenario-table th, .scenario-table td { padding: .85rem 1rem; vertical-align: middle; }
/* More specific than theme-wide link rules, including visited links. Titles are
   navigation labels, not generic web links; underline only on interaction. */
:root .scenario-table a.scenario-title,
:root .scenario-table a.scenario-title:visited { color: var(--scenario-title-color, var(--bs-body-color)); text-decoration: none; }
:root .scenario-table a.scenario-title:hover,
:root .scenario-table a.scenario-title:focus-visible { color: var(--scenario-title-color, var(--bs-body-color)); text-decoration: underline; text-underline-offset: .2em; }
:root .scenario-table a.scenario-title:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: .15rem; }
:root[data-ui-theme="bsb"] { --scenario-title-color: var(--bsb-ink); }
:root[data-ui-theme="dark"] { --scenario-title-color: var(--dark-heading); }
.scenario-description { max-width: 38rem; margin-top: .3rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.context-count { max-width: 8rem; }
.cursor-pointer { cursor: pointer; }
@media (max-width: 767.98px) {
  .session-table { overflow-x: auto; }
  /* The table is intentionally wider than a phone viewport. Keep that scrollable
     overflow inside its card, otherwise it propagates to the document despite the
     table-responsive wrapper. The action menu uses Popper's fixed strategy, so it
     remains available above this clipping boundary. */
  .scenario-list-card { overflow: clip; }
  .scenario-table {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
  }
  .scenario-table .table { width: max-content; min-width: 100%; }
  .scenario-table th:first-child,
  .scenario-table td:first-child {
    min-width: 12rem;
    max-width: 16rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .navbar > .container-fluid { align-items: flex-start; }
  .navbar:not(:has(.navbar-toggler)) > .container-fluid { gap: .75rem; }
  .navbar:not(:has(.navbar-toggler)) .language-selector,
  .navbar:not(:has(.navbar-toggler)) .theme-selector { margin-right: 0 !important; }
}

/* Téléphone (< 576 px) : les tableaux .table-stack deviennent des cartes empilées,
   sans défilement horizontal. Le libellé de chaque cellule vient de data-label. */
@media (max-width: 575.98px) {
  .table-responsive:has(> .table-stack), .session-table, .scenario-table { overflow-x: visible; width: 100%; }
  .scenario-table .table-stack { width: 100%; min-width: 0; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .table-stack tr { padding: .75rem 1rem; border-bottom: 1px solid var(--bs-border-color); }
  .table-stack tr:last-child { border-bottom: 0; }
  .table-stack td, .table-stack th { border: 0; padding: .2rem 0; background: transparent; box-shadow: none; }
  .table-stack td[data-label] { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; text-align: right; }
  .table-stack td[data-label]::before { content: attr(data-label); color: var(--bs-secondary-color); font-size: .85rem; text-align: left; flex: none; }
  .table-stack td.cell-title, .scenario-table td.cell-title:first-child { max-width: none; min-width: 0; font-size: 1.05rem; overflow-wrap: anywhere; white-space: normal; }
  .table-stack td.cell-action { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .5rem; padding-top: .5rem; }
  .table-stack td.cell-action .btn-sm { min-height: 2.25rem; }
  .table-stack tr.empty-row td { display: block; text-align: center; }
  .session-name-link { text-decoration: none; }
}

/* Menu « compte » : e-mail tronqué, réglages empilés en pleine largeur. */
.account-email { display: inline-block; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.account-menu { min-width: 15rem; }
.account-settings, .account-logout { display: grid; gap: .5rem; padding: .25rem 1rem; }
.account-menu .language-selector, .account-menu .theme-selector { margin-right: 0 !important; }
.account-menu .form-select { width: 100% !important; }
/* Entre 992 et 1200 px, liens resserrés pour tenir sur une ligne. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar .main-nav .nav-link { padding-left: .45rem; padding-right: .45rem; font-size: .95rem; }
  .navbar .brand-logo { width: 150px; height: auto; }
  .account-email { max-width: 9rem; }
}
/* Menu replié (téléphone, tablette) : liens sur deux colonnes, compte séparé. */
@media (max-width: 991.98px) {
  .navbar .main-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; padding-top: .5rem; }
  .navbar .account-nav { border-top: 1px solid rgba(0, 0, 0, .1); margin-top: .5rem; padding-top: .25rem; }
  .account-email { max-width: 100%; }
}

/* Scenario creation: show actual form requirements, including the conditional group size. */
.scenario-create-form .scenario-required > label::after,
.scenario-create-form .scenario-required > fieldset > legend::after,
.scenario-create-form .scenario-group-required > label::after {
  content: " *";
  color: #b42318;
  font-weight: 700;
}
.scenario-create-form .scenario-required-mark { color: #b42318; font-weight: 700; }
.scenario-create-form .scenario-form-section > h2 { margin-bottom: 1.25rem; }
.scenario-create-form .scenario-form-section > div:has(> label),
.scenario-create-form .scenario-form-section > div:has(> fieldset) { margin-bottom: 1.25rem; }
.scenario-create-form .helptext { color: #626d78; font-size: .875rem; margin-bottom: .35rem; }

.scenario-create-form [data-group-size-field].scenario-group-required > label::after {
  content: " *"; color: #b42318; font-weight: 700;
}
.scenario-create-form input::placeholder,
.scenario-create-form textarea::placeholder { color: #77818a; font-style: italic; opacity: 1; }
.scenario-create-form .scenario-create-settings { border: 1px solid #dce2e8; border-radius: .375rem; padding: 1rem; }
.scenario-create-form .scenario-create-settings > summary { cursor: pointer; }
.scenario-create-form .scenario-create-settings > div > div { margin-bottom: 1.25rem; }

.scenario-create-form .scenario-create-version > summary { cursor: pointer; }
.scenario-create-form .scenario-create-version > summary h2 { display: inline; }
.scenario-create-form input::placeholder,
.scenario-create-form textarea::placeholder { font-size: .875rem; }
.scenario-create-form .scenario-interaction-choices { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.scenario-create-form .scenario-interaction-choices > div { margin: 0; }
.scenario-create-form .scenario-interaction-choices label { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border: 1px solid #dce2e8; border-radius: .375rem; cursor: pointer; }
.scenario-create-form .scenario-interaction-choices label:has(input:checked) { border-color: var(--brand); background: var(--bs-tertiary-bg); }

.scenario-create-form .scenario-settings-grid > div > div { margin-bottom: 0; }
.scenario-create-form .scenario-settings-grid .form-control,
.scenario-create-form .scenario-settings-grid .form-select { width: 100%; }
.teacher-picker-options { max-height: 12rem; overflow: auto; }
.teacher-picker-options label { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; }
.teacher-picker-options input[type="checkbox"] { flex: 0 0 auto; width: 1rem; height: 1rem; }
.compact-field { position: relative; }
.field-help { flex: 0 0 auto; }
.field-help > summary { list-style: none; cursor: pointer; border: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); border-radius: 50%; width: 1.3rem; height: 1.3rem; text-align: center; font-size: .8rem; line-height: 1.2rem; }
.field-help > summary::-webkit-details-marker { display: none; }
.field-help-content { position: absolute; left: 0; top: 1.7rem; z-index: 20; width: min(19rem, 100%); padding: .75rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-body-bg); color: var(--bs-body-color); box-shadow: 0 .25rem .75rem #0002; font-size: .85rem; }
.compact-field label { margin-bottom: .35rem; }
.student-scenario-preview { width: min(1100px, calc(100vw - 2rem)); max-height: 90dvh; overflow: auto; padding: 1.5rem; border: 1px solid var(--bs-border-color); border-radius: .75rem; color: var(--bs-body-color); background: var(--bs-body-bg); }
.student-scenario-preview::backdrop { background: #0006; }
.student-preview-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; }
.student-preview-grid.without-info { grid-template-columns: minmax(0, 1fr); }
.student-preview-grid > *, [data-student-preview-briefing] { min-width: 0; overflow-wrap: anywhere; }
.student-preview-opening { white-space: pre-wrap; padding: 1rem; background: var(--bs-tertiary-bg); border-left: 3px solid var(--brand); border-radius: .5rem; }
[data-student-preview-context] dd { white-space: pre-wrap; }
@media (max-width: 767px) { .student-preview-grid { grid-template-columns: 1fr; } .student-scenario-preview { padding: 1rem; } }

/* The local student preview mirrors the scenario's bounded chat presets. */
.student-preview-grid[data-chat-background="dots"] > section {
  background-image: radial-gradient(circle, #8a99aa55 1px, transparent 1.5px);
  background-size: 24px 24px;
}
.student-preview-grid[data-chat-background="grid"] > section {
  background-image: linear-gradient(#8a99aa33 1px, transparent 1px), linear-gradient(90deg, #8a99aa33 1px, transparent 1px);
  background-size: 28px 28px;
}
.student-preview-grid .student-preview-opening { max-width: 85%; padding: .75rem 1rem; border: 1px solid #ddd; border-left: 4px solid #1f4f7a; border-radius: 1rem; background: #fff; white-space: pre-wrap; }
.student-preview-grid[data-chat-palette="ocean"] .student-preview-opening { background: #f5fbff; border-color: #c7e4f4; border-left-color: #176b91; color: #17344a; }
.student-preview-grid[data-chat-palette="warm"] .student-preview-opening { background: #fffaf4; border-color: #ead8c6; border-left-color: #b15b42; color: #3e3028; }