@font-face {
  font-family: "Public Sans";
  src: url("../assets/fonts/PublicSans-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("../assets/fonts/PublicSans-Italic-Variable.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

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

[hidden] {
  display: none !important;
}

html {
  min-width: 320px;
  height: 100%;
  background: var(--bs-color-surface-backdrop);
  color: var(--bs-color-text-primary);
  font-family: var(--bs-font-family-sans);
  scroll-behavior: smooth;
}

/* L'enceinte applicative : le produit vit dans une carte arrondie posée sur
   le fond. En mode application, la page ne défile jamais · le contenu défile
   à l'intérieur de la carte. Les vues publiques (connexion, onboarding)
   gardent un défilement de page classique sur le même fond. */
body {
  min-width: 320px;
  height: 100%;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
}

#app {
  height: 100%;
  height: 100dvh;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: var(--bs-space-2);
  left: var(--bs-space-2);
  padding: var(--bs-space-2) var(--bs-space-3);
  border-radius: var(--bs-radius-control);
  background: var(--bs-color-brand-900);
  color: var(--bs-color-text-on-brand);
  font-size: var(--bs-font-size-ui);
  font-weight: var(--bs-font-weight-semibold);
  text-decoration: none;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

#app.mode-public {
  overflow: hidden auto;
}

#app.mode-app {
  display: flex;
  flex-direction: column;
  padding: var(--bs-space-5) var(--bs-space-4) var(--bs-space-6);
}

button,
input,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--bs-color-brand-600);
}

img {
  max-width: 100%;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

/* Indices et exposants mathématiques (u_n rendu par notation.js) :
   taille réduite sans casser l'interligne. */
sub,
sup {
  font-size: 0.72em;
  line-height: 0;
}

/* ============================================================
   Lois typographiques (ADR-0006)
   1 · Un seul h1 par écran : 27 px gras. Rien d'autre n'est à la
       fois plus grand que 18 px et gras.
   2 · Titre de section/carte : 18 px demi-gras.
   3 · Titre de ligne (liste, objectif, unité) : 16 px demi-gras.
   4 · Le surtitre en capitales existe à deux niveaux au plus :
       page et carte. Dans une ligne, le contexte est un méta
       discret en bas de casse.
   5 · Le gras (700) est réservé au h1, aux chiffres clés et aux
       états actifs. L'emphase courante est le demi-gras (600).
   6 · Les chiffres clés : 22 px gras maximum, chiffres tabulaires.
   7 · Boutons et libellés d'interface : 14 px demi-gras.
   ============================================================ */
h1,
h2,
h3 {
  letter-spacing: var(--bs-tracking-heading);
  line-height: var(--bs-line-height-tight);
}

h1 {
  margin-bottom: var(--bs-space-4);
  font-size: clamp(22px, 3vw, var(--bs-font-size-h1));
}

h2 {
  margin-bottom: var(--bs-space-2);
  font-size: var(--bs-font-size-h3);
  font-weight: var(--bs-font-weight-semibold);
}

h3 {
  margin-bottom: var(--bs-space-2);
  font-size: var(--bs-font-size-md);
  font-weight: var(--bs-font-weight-semibold);
}

.app-header {
  width: min(100% - 32px, var(--bs-layout-content-max));
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bs-space-4);
  margin: 0 auto;
}

.brand-link {
  display: inline-flex;
  align-items: center;
}

.brand-link img {
  width: 196px;
  height: auto;
}

.header-context {
  color: var(--bs-color-text-muted);
  font-size: var(--bs-font-size-sm);
  font-weight: var(--bs-font-weight-semibold);
}

.quiet-link,
.back-link {
  min-height: var(--bs-layout-tap-min);
  display: inline-flex;
  align-items: center;
  color: var(--bs-color-brand-700);
  font-size: var(--bs-font-size-ui);
  font-weight: var(--bs-font-weight-semibold);
  text-decoration: none;
}

.back-link {
  margin-bottom: var(--bs-space-4);
}

.auth-shell {
  width: min(100% - 32px, 760px);
  margin: clamp(var(--bs-space-4), 5vh, var(--bs-space-10)) auto var(--bs-space-10);
}

.auth-panel,
.onboarding-panel,
.next-action,
.dashboard-section,
.profile-section {
  background: var(--bs-color-surface-panel);
  border-radius: var(--bs-radius-panel);
  box-shadow: var(--bs-shadow-card);
}

.auth-panel,
.onboarding-panel {
  padding: clamp(var(--bs-space-5), 4vw, var(--bs-space-8));
}

.auth-panel {
  max-width: 580px;
  margin-inline: auto;
}

/* Loi de couleur : l'encre et le gris portent la structure; le bleu
   signale une action possible; le marine porte le héros unique; les
   fonds teintés sont réservés aux messages sémantiques. Un texte bleu
   non cliquable est un écart. */
.eyebrow {
  margin-bottom: var(--bs-space-3);
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-xs);
  font-weight: var(--bs-font-weight-bold);
  letter-spacing: var(--bs-tracking-eyebrow);
  text-transform: uppercase;
}

.lede {
  max-width: 62ch;
  margin-bottom: var(--bs-space-5);
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-md);
  line-height: var(--bs-line-height-body);
}

.field {
  display: grid;
  gap: var(--bs-space-2);
  margin-bottom: var(--bs-space-6);
}

.field--medium {
  max-width: 340px;
}

.field label,
.choice-fieldset legend {
  font-size: var(--bs-font-size-ui);
  font-weight: var(--bs-font-weight-semibold);
}

input:not([type="checkbox"]):not([type="radio"]),
select {
  width: 100%;
  min-height: var(--bs-size-control-lg);
  padding: 0 var(--bs-space-3);
  border: 1px solid var(--bs-color-border-default);
  border-radius: var(--bs-radius-control);
  background: var(--bs-color-surface-panel);
  color: var(--bs-color-text-primary);
}

input:hover,
select:hover {
  border-color: var(--bs-color-border-hover);
}

input:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: var(--bs-focus-ring);
}

input[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--bs-color-danger);
}

.field-help,
.microcopy {
  margin: 0;
  color: var(--bs-color-text-muted);
  font-size: var(--bs-font-size-sm);
  line-height: var(--bs-line-height-body);
}

.microcopy {
  margin-top: var(--bs-space-4);
}

.field-error {
  margin: 0;
  color: var(--bs-color-danger-strong);
  font-size: var(--bs-font-size-sm);
  font-weight: var(--bs-font-weight-semibold);
}

.form-alert {
  margin-bottom: var(--bs-space-6);
  padding: var(--bs-space-4);
  border-radius: var(--bs-radius-control);
  background: var(--bs-color-danger-soft);
  color: var(--bs-color-danger-strong);
  font-size: var(--bs-font-size-ui);
}

.form-alert--success {
  background: var(--bs-color-success-soft);
  color: var(--bs-color-success-strong);
}

.form-alert--warning {
  background: var(--bs-color-warning-soft);
  color: var(--bs-color-warning-strong);
}

.button {
  min-height: var(--bs-layout-tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bs-space-2);
  padding: 0 var(--bs-space-5);
  border: none;
  border-radius: var(--bs-radius-control);
  font-size: var(--bs-font-size-ui);
  font-weight: var(--bs-font-weight-semibold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.button--large {
  min-height: var(--bs-size-control-lg);
  padding-inline: var(--bs-space-6);
}

.button--primary {
  background: var(--bs-color-brand-600);
  color: var(--bs-color-text-on-brand);
}

.button--primary:hover {
  background: var(--bs-color-brand-700);
}

.button--secondary {
  background: var(--bs-color-brand-50);
  color: var(--bs-color-brand-700);
}

.button--quiet {
  background: transparent;
  color: var(--bs-color-brand-700);
}

.button--danger {
  background: var(--bs-color-danger-soft);
  color: var(--bs-color-danger-strong);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--bs-space-6);
}

/* Notes informatives : neutres et calmes. Les fonds teintés restent
   réservés au succès, à l'avertissement et à l'erreur. */
.development-note,
.development-code,
.calm-notice {
  margin-top: var(--bs-space-6);
  padding: var(--bs-space-4);
  border: var(--bs-border-hairline);
  border-radius: var(--bs-radius-control);
  background: var(--bs-color-surface-tonal);
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-sm);
  line-height: var(--bs-line-height-body);
}

.development-note strong,
.development-code strong,
.calm-notice strong {
  color: var(--bs-color-text-primary);
}

.development-note strong {
  display: block;
}

.development-code {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--bs-space-2) var(--bs-space-4);
}

.development-code strong {
  font-family: var(--bs-font-family-mono);
  font-size: var(--bs-font-size-h2);
  letter-spacing: 0.12em;
}

.development-code small {
  grid-column: 1 / -1;
}

.code-input {
  max-width: 240px;
  font-family: var(--bs-font-family-mono);
  font-size: var(--bs-font-size-h2) !important;
  letter-spacing: 0.16em;
}

.stepper {
  margin: 0 0 var(--bs-space-10);
}

.stepper ol {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stepper li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--bs-space-2);
  color: var(--bs-color-text-muted);
  font-size: var(--bs-font-size-xs);
  font-style: normal;
  text-align: center;
}

.stepper li::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 15px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--bs-color-divider);
  transform: translateX(-50%);
}

.stepper li:first-child::before {
  display: none;
}

.stepper li span {
  z-index: 1;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bs-color-surface-sunken);
  font-weight: var(--bs-font-weight-bold);
}

.stepper li em {
  font-style: normal;
}

.stepper li.is-current,
.stepper li.is-complete {
  color: var(--bs-color-brand-700);
  font-weight: var(--bs-font-weight-semibold);
}

.stepper li.is-current span {
  background: var(--bs-color-brand-600);
  color: var(--bs-color-text-on-brand);
}

.stepper li.is-complete span {
  background: var(--bs-color-success-soft);
  color: var(--bs-color-success-strong);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bs-space-4);
}

.choice-fieldset {
  margin: 0 0 var(--bs-space-8);
  padding: 0;
  border: none;
}

.choice-fieldset legend {
  margin-bottom: var(--bs-space-2);
}

.choice-fieldset > .field-help {
  margin-bottom: var(--bs-space-4);
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bs-space-2);
}

.choice-card,
.day-choice,
.segmented-options label {
  position: relative;
  cursor: pointer;
}

.choice-card input,
.day-choice input,
.segmented-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.choice-card span {
  min-height: var(--bs-layout-tap-min);
  display: flex;
  align-items: center;
  padding: var(--bs-space-3) var(--bs-space-4);
  border-radius: var(--bs-radius-control);
  background: var(--bs-color-surface-tonal);
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-ui);
  font-weight: var(--bs-font-weight-medium);
}

.choice-card input:checked + span {
  background: var(--bs-color-brand-50);
  color: var(--bs-color-brand-700);
  box-shadow: inset 0 0 0 2px var(--bs-color-brand-600);
  font-weight: var(--bs-font-weight-bold);
}

.choice-card input:focus-visible + span,
.day-choice input:focus-visible + span,
.segmented-options input:focus-visible + span {
  box-shadow: var(--bs-focus-ring);
}

.day-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--bs-space-2);
  margin-top: var(--bs-space-3);
}

.day-choice span {
  min-height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--bs-radius-control);
  background: var(--bs-color-surface-tonal);
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-sm);
  font-weight: var(--bs-font-weight-semibold);
}

.day-choice em {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.day-choice input:checked + span {
  background: var(--bs-color-brand-600);
  color: var(--bs-color-text-on-brand);
}

.segmented-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bs-space-2);
  margin-top: var(--bs-space-3);
}

.segmented-options span {
  min-height: var(--bs-layout-tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--bs-space-4);
  border-radius: var(--bs-radius-pill);
  background: var(--bs-color-surface-sunken);
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-ui);
  font-weight: var(--bs-font-weight-semibold);
}

.segmented-options input:checked + span {
  background: var(--bs-color-brand-600);
  color: var(--bs-color-text-on-brand);
}

.segmented-options--wide span {
  border-radius: var(--bs-radius-control);
}

.conditional-fields {
  margin-top: var(--bs-space-8);
  padding: var(--bs-space-6);
  border-radius: var(--bs-radius-card);
  background: var(--bs-color-surface-tonal);
}

.check-row {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: var(--bs-space-3);
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-ui);
  line-height: var(--bs-line-height-body);
  cursor: pointer;
}

.check-row input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--bs-color-brand-600);
}

.check-row--disclosure {
  margin-top: var(--bs-space-8);
  padding: var(--bs-space-4);
  border-radius: var(--bs-radius-control);
  background: var(--bs-color-info-soft);
  color: var(--bs-color-info-strong);
}

.review-list {
  margin: 0;
}

.review-list > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.65fr) 1.35fr;
  gap: var(--bs-space-4);
  padding: var(--bs-space-4) 0;
  border-top: var(--bs-border-hairline);
}

.review-list dt {
  color: var(--bs-color-text-muted);
  font-size: var(--bs-font-size-sm);
}

.review-list dd {
  margin: 0;
  font-size: var(--bs-font-size-ui);
  font-weight: var(--bs-font-weight-semibold);
}

.review-list dd small {
  display: block;
  margin-top: var(--bs-space-1);
  color: var(--bs-color-text-muted);
  font-weight: var(--bs-font-weight-regular);
  line-height: var(--bs-line-height-body);
}

/* ============================================================
   Enceinte applicative : carte, panneau latéral persistant,
   barre basse persistante. Les icônes héritent de currentColor.
   ============================================================ */
.icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: inherit;
}
.icon--sm { width: 15px; height: 15px; }
.icon--lg { width: 22px; height: 22px; }

.shell {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  width: min(var(--bs-layout-shell-max), 100%);
  margin: 0 auto;
  border: var(--bs-border-hairline);
  border-radius: var(--bs-radius-shell);
  background: var(--bs-color-surface-page);
  box-shadow: var(--bs-shadow-card);
  overflow: hidden;
}

.sidebar {
  width: var(--bs-layout-sidebar-width);
  flex: 0 0 var(--bs-layout-sidebar-width);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bs-color-surface-panel);
}

.sidebar__brand {
  padding: var(--bs-space-4) var(--bs-space-4) var(--bs-space-3);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: var(--bs-space-2);
  text-decoration: none;
}

.brand-lockup__name {
  display: block;
  color: var(--bs-color-text-primary);
  font-size: var(--bs-font-size-md);
  font-weight: var(--bs-font-weight-bold);
  letter-spacing: var(--bs-tracking-heading);
  line-height: 1.1;
}

.brand-lockup__sub {
  display: block;
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-xs);
  font-weight: var(--bs-font-weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--bs-space-3) var(--bs-space-3);
}

.sidebar__nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.side-nav__link {
  display: flex;
  align-items: center;
  gap: var(--bs-space-3);
  min-height: var(--bs-layout-tap-min);
  padding: var(--bs-space-2) var(--bs-space-3);
  border-radius: var(--bs-radius-control);
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-sm);
  font-weight: var(--bs-font-weight-medium);
  text-decoration: none;
}

a.side-nav__link:hover {
  background: var(--bs-color-surface-sunken);
  color: var(--bs-color-text-primary);
}

.side-nav__link[aria-current="page"] {
  background: var(--bs-color-brand-50);
  color: var(--bs-color-brand-700);
  font-weight: var(--bs-font-weight-semibold);
}

.side-nav__link[aria-disabled="true"] {
  opacity: 0.45;
}

.notification-badge {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  margin-left: auto;
  padding: 0 var(--bs-space-1);
  border-radius: var(--bs-radius-pill);
  background: var(--bs-color-brand-700);
  color: var(--bs-color-text-inverse);
  font-size: var(--bs-font-size-xs);
  font-weight: var(--bs-font-weight-bold);
  line-height: 1;
}

.sidebar__footer {
  display: flex;
  align-items: center;
  gap: var(--bs-space-2);
  padding: var(--bs-space-3);
  border-top: var(--bs-border-hairline);
}

.sidebar__account {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--bs-space-2);
  min-height: var(--bs-layout-tap-min);
  padding: 0 var(--bs-space-2);
  border-radius: var(--bs-radius-control);
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-sm);
  font-weight: var(--bs-font-weight-semibold);
  text-decoration: none;
}

.sidebar__account:hover {
  background: var(--bs-color-surface-sunken);
  color: var(--bs-color-text-primary);
}

.sidebar__who {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sidebar__logout {
  display: grid;
  place-items: center;
  width: var(--bs-layout-tap-min);
  height: var(--bs-layout-tap-min);
  border: 1px solid var(--bs-color-border-strong);
  border-radius: var(--bs-radius-control);
  background: var(--bs-color-surface-panel);
  color: var(--bs-color-text-secondary);
  cursor: pointer;
}

.sidebar__logout:hover {
  border-color: var(--bs-color-border-hover);
  color: var(--bs-color-text-primary);
}

.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.main__scroll {
  flex: 1;
  min-height: 0;
  overflow: hidden auto;
}

.topbar {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--bs-space-3);
  padding: var(--bs-space-2) var(--bs-space-4);
  background: var(--bs-color-surface-panel);
  border-bottom: var(--bs-border-hairline);
}

.topbar__title {
  flex: 1;
  font-size: var(--bs-font-size-body);
  font-weight: var(--bs-font-weight-bold);
  letter-spacing: var(--bs-tracking-heading);
}

.topbar__notification {
  min-height: var(--bs-layout-tap-min);
  display: inline-flex;
  align-items: center;
  gap: var(--bs-space-1);
  color: var(--bs-color-brand-700);
  font-size: var(--bs-font-size-sm);
  font-weight: var(--bs-font-weight-semibold);
  text-decoration: none;
}

.topbar__institution {
  min-height: var(--bs-layout-tap-min);
  display: inline-flex;
  align-items: center;
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-sm);
  font-weight: var(--bs-font-weight-semibold);
  text-decoration: none;
}

.topbar__institution:hover {
  color: var(--bs-color-brand-700);
}

.topbar__notification .notification-badge {
  margin-left: 0;
}

/* Institutional slice: surfaces remain borderless; school provenance uses
   the dedicated source colour and never replaces status semantics. */
.institution-workspace-heading {
  margin-bottom: var(--bs-space-6);
  padding: clamp(var(--bs-space-5), 3vw, var(--bs-space-8));
  border-radius: var(--bs-radius-panel);
  background: var(--bs-school-accent-soft, var(--bs-color-source-school-soft));
}

.institution-workspace-heading h1,
.institution-card h2,
.institution-class h3 {
  margin-bottom: var(--bs-space-2);
}

.institution-workspace-heading p:last-child,
.institution-card > p:last-of-type,
.institution-class p {
  margin-bottom: 0;
  color: var(--bs-color-text-secondary);
}

.institution-section {
  margin-top: var(--bs-space-6);
  padding: clamp(var(--bs-space-5), 3vw, var(--bs-space-6));
}

.institution-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bs-space-4);
}

.institution-card,
.institution-empty,
.institution-independence {
  padding: var(--bs-space-5);
  border-radius: var(--bs-radius-card);
  background: var(--bs-color-surface-panel);
  box-shadow: var(--bs-shadow-card);
}

.institution-card[data-school-accent] {
  background: linear-gradient(145deg, var(--bs-school-accent-soft), var(--bs-color-surface-panel) 72%);
}

.institution-list {
  display: grid;
}

.institution-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--bs-space-5);
  min-height: 76px;
  padding: var(--bs-space-4) 0;
  border-top: var(--bs-border-hairline);
}

.institution-row > div {
  min-width: 0;
  display: grid;
  gap: var(--bs-space-1);
}

.institution-row strong {
  color: var(--bs-color-text-primary);
}

.institution-row span {
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-sm);
}

.institution-row .provenance-label {
  color: var(--bs-color-source-school-strong);
  font-weight: var(--bs-font-weight-semibold);
}

.institution-class {
  padding: var(--bs-space-5) 0;
  border-top: var(--bs-border-hairline);
}

.institution-class__heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--bs-space-4);
}

.institution-class__forms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bs-space-4);
  margin-top: var(--bs-space-4);
}

.institution-class__forms form,
.institution-form {
  display: grid;
  align-content: start;
  gap: var(--bs-space-3);
}

.institution-class__forms form {
  padding: var(--bs-space-4);
  border-radius: var(--bs-radius-control);
  background: var(--bs-color-surface-tonal);
}

.institution-form--assignment {
  margin-top: var(--bs-space-5);
  padding: var(--bs-space-5);
  border-radius: var(--bs-radius-card);
  background: var(--bs-color-source-school-soft);
}

.institution-empty-copy {
  margin: 0;
  padding: var(--bs-space-5) 0;
  color: var(--bs-color-text-secondary);
}

.institution-independence {
  margin-top: var(--bs-space-5);
  background: var(--bs-color-source-boussole-soft);
  color: var(--bs-color-success-strong);
}

.institution-independence p {
  margin: var(--bs-space-2) 0 0;
}

@media (max-width: 680px) {
  .institution-grid,
  .institution-class__forms,
  .institution-form .form-grid {
    grid-template-columns: 1fr;
  }

  .institution-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .institution-row .button {
    width: 100%;
  }

  .institution-class__heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar__institution {
    font-size: var(--bs-font-size-xs);
  }
}

.sync-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin: 0 var(--bs-space-3) var(--bs-space-2);
  padding: 0 var(--bs-space-2);
  border-radius: var(--bs-radius-pill);
  background: var(--bs-color-info-soft);
  color: var(--bs-color-info-strong);
  font-size: var(--bs-font-size-xs);
  font-weight: var(--bs-font-weight-semibold);
}

.sync-status.is-synchronized {
  background: var(--bs-color-success-soft);
  color: var(--bs-color-success-strong);
}

.sync-status.is-offline,
.sync-status.is-conflict,
.sync-status.is-retry-required,
.sync-status.is-server-unavailable {
  background: var(--bs-color-warning-soft);
  color: var(--bs-color-warning-strong);
}

.topbar .sync-status {
  margin: 0;
  white-space: nowrap;
}

/* Enfant de la carte, sous la zone de défilement : la barre appartient à
   l'application, pas au navigateur. */
.bottom-nav {
  display: none;
  flex: 0 0 auto;
  background: var(--bs-color-surface-panel);
  border-top: var(--bs-border-hairline);
  padding: var(--bs-space-1) 0 calc(var(--bs-space-2) + env(safe-area-inset-bottom, 0px));
}

.bottom-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.bottom-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 52px;
  padding: var(--bs-space-1);
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-xs);
  font-weight: var(--bs-font-weight-medium);
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
}

.bottom-nav__link[aria-current="page"] {
  color: var(--bs-color-brand-700);
  font-weight: var(--bs-font-weight-semibold);
}

.bottom-nav__link[aria-disabled="true"] {
  opacity: 0.45;
}

.student-shell {
  width: 100%;
  max-width: var(--bs-layout-content-max);
  margin: 0 auto;
  padding: var(--bs-space-5) var(--bs-space-6) var(--bs-space-8);
}

@media (max-width: 899px) {
  #app.mode-app {
    padding: var(--bs-space-3) var(--bs-space-2) var(--bs-space-3);
  }

  .shell {
    border-radius: var(--bs-radius-panel);
  }

  .sidebar {
    display: none;
  }

  .topbar {
    display: flex;
  }

  .bottom-nav {
    display: block;
  }

  .student-shell {
    padding: var(--bs-space-4) var(--bs-space-4) var(--bs-space-6);
  }
}

.dashboard-heading,
.page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bs-space-6);
  margin-bottom: var(--bs-space-6);
}

.dashboard-heading h1,
.page-heading h1 {
  margin-bottom: var(--bs-space-2);
}

.dashboard-heading p:last-child,
.page-heading > p:last-child {
  margin: 0;
  color: var(--bs-color-text-secondary);
}

.status-chip {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--bs-space-3);
  border-radius: var(--bs-radius-pill);
  font-size: var(--bs-font-size-sm);
  font-weight: var(--bs-font-weight-semibold);
  white-space: nowrap;
  text-decoration: none;
}

.status-chip--success {
  background: var(--bs-color-success-soft);
  color: var(--bs-color-success-strong);
}

.status-chip--warning {
  background: var(--bs-color-warning-soft);
  color: var(--bs-color-warning-strong);
}

/* Repère de l'année scolaire · ligne cliquable entière (loi d'affordance). */
.year-marker {
  display: flex;
  align-items: center;
  gap: var(--bs-space-3);
  margin-bottom: var(--bs-space-5);
  padding: var(--bs-space-3) var(--bs-space-4);
  border: var(--bs-border-hairline);
  border-radius: var(--bs-radius-control);
  background: var(--bs-color-surface-panel);
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-sm);
  text-decoration: none;
  transition: background var(--bs-motion-fast) var(--bs-motion-ease), border-color var(--bs-motion-fast) var(--bs-motion-ease);
}

.year-marker:hover { border-color: var(--bs-color-border-hover); background: var(--bs-color-surface-tonal); }
.year-marker svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--bs-color-source-menfp); }
.year-marker span:first-of-type { min-width: 0; }
.year-marker strong { color: var(--bs-color-text-primary); font-weight: var(--bs-font-weight-semibold); }
.year-marker__cue { margin-left: auto; color: var(--bs-color-text-muted); font-size: 16px; line-height: 1; }

.next-action {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--bs-space-8);
  padding: clamp(var(--bs-space-5), 3vw, var(--bs-space-6));
  background: var(--bs-color-brand-900);
  color: var(--bs-color-text-on-brand);
}

.next-action .eyebrow {
  color: var(--bs-color-brand-200);
}

.next-action p:last-child {
  max-width: 62ch;
  margin: 0;
  color: var(--bs-color-brand-100);
  line-height: var(--bs-line-height-body);
}

/* Sur un héros marine, l'action s'inverse : bouton clair, texte marine. */
.next-action .button--primary,
.course-hero .button--primary,
.lesson-header .button--primary {
  background: var(--bs-color-surface-panel);
  color: var(--bs-color-brand-900);
}

.dashboard-section,
.profile-section {
  margin-top: var(--bs-space-6);
  padding: clamp(var(--bs-space-5), 3vw, var(--bs-space-6));
}

.section-heading {
  margin-bottom: var(--bs-space-4);
}

.detail-list > div {
  display: grid;
  grid-template-columns: 0.55fr 1fr 1.5fr;
  gap: var(--bs-space-4);
  padding: var(--bs-space-4) 0;
  border-top: var(--bs-border-hairline);
}

.detail-list span,
.detail-list small {
  color: var(--bs-color-text-muted);
  font-size: var(--bs-font-size-sm);
  line-height: var(--bs-line-height-body);
}

.detail-list strong {
  font-size: var(--bs-font-size-ui);
  font-weight: var(--bs-font-weight-semibold);
}

.calm-notice {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--bs-space-3);
}

.calm-notice img {
  width: 20px;
}

.calm-notice p {
  margin: var(--bs-space-1) 0 0;
}

.page-heading {
  display: block;
}

.profile-section h2 {
  margin-bottom: var(--bs-space-5);
}

.privacy-controls > p {
  max-width: 70ch;
}

.deletion-request {
  margin-top: var(--bs-space-5);
  padding: var(--bs-space-4);
  border-radius: var(--bs-radius-control);
  background: var(--bs-color-danger-soft);
  color: var(--bs-color-danger-strong);
}

.deletion-request summary,
.deletion-request h3 {
  font-weight: var(--bs-font-weight-semibold);
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bs-space-3);
  margin-top: var(--bs-space-6);
}

.development-tools {
  margin-top: var(--bs-space-8);
  padding: var(--bs-space-4);
  border-radius: var(--bs-radius-control);
  background: var(--bs-color-surface-sunken);
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-sm);
}

.development-tools summary {
  min-height: var(--bs-layout-tap-min);
  display: flex;
  align-items: center;
  font-weight: var(--bs-font-weight-semibold);
  cursor: pointer;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.evidence-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bs-space-2);
  margin-top: var(--bs-space-3);
}

.evidence-line span {
  padding: var(--bs-space-1) var(--bs-space-2);
  border-radius: var(--bs-radius-pill);
  background: var(--bs-color-surface-sunken);
  color: var(--bs-color-text-muted);
  font-size: var(--bs-font-size-xs);
  font-weight: var(--bs-font-weight-semibold);
}

.evidence-line span.is-complete {
  background: var(--bs-color-success-soft);
  color: var(--bs-color-success-strong);
}

.evidence-line span.needs-review {
  background: var(--bs-color-warning-soft);
  color: var(--bs-color-warning-strong);
}

.mastery-overview,
.diagnostic-card,
.practice-objective,
.practice-shell,
.result-panel,
.result-detail {
  border-radius: var(--bs-radius-panel);
  background: var(--bs-color-surface-panel);
  box-shadow: var(--bs-shadow-card);
}

.diagnostic-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--bs-space-6);
  margin-bottom: var(--bs-space-4);
  padding: clamp(var(--bs-space-5), 3vw, var(--bs-space-6));
  background: var(--bs-color-surface-tonal);
  box-shadow: none;
}

.diagnostic-card h2,
.diagnostic-card p {
  margin-bottom: var(--bs-space-2);
}

.diagnostic-card p:last-child {
  max-width: 66ch;
  margin-bottom: 0;
  color: var(--bs-color-text-secondary);
  line-height: var(--bs-line-height-body);
}

.assessment-entry {
  background: var(--bs-color-info-soft);
}

.assessment-list,
.assessment-objectives,
.assessment-answers {
  display: grid;
  gap: var(--bs-space-3);
}

.assessment-card,
.assessment-objective {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--bs-space-5);
  padding: clamp(var(--bs-space-4), 2.5vw, var(--bs-space-5));
  border-radius: var(--bs-radius-card);
  background: var(--bs-color-surface-panel);
  box-shadow: var(--bs-shadow-card);
}

.assessment-card h2,
.assessment-card p,
.assessment-objective h2,
.assessment-objective p {
  margin-bottom: var(--bs-space-1);
}

.assessment-card p:last-child,
.assessment-objective p:last-child {
  color: var(--bs-color-text-secondary);
  line-height: var(--bs-line-height-body);
}

.assessment-objective.is-needs-remediation {
  background: var(--bs-color-warning-soft);
}

.assessment-objective.is-secure {
  background: var(--bs-color-success-soft);
}

.assessment-answer {
  border-bottom: var(--bs-border-hairline);
}

.assessment-answer summary {
  min-height: var(--bs-layout-tap-min);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--bs-space-3);
  padding-block: var(--bs-space-2);
  color: var(--bs-color-text-primary);
  font-weight: var(--bs-font-weight-semibold);
  cursor: pointer;
}

.assessment-answer summary span {
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-sm);
}

.assessment-answer p {
  margin: 0 0 var(--bs-space-2);
  color: var(--bs-color-text-secondary);
  line-height: var(--bs-line-height-body);
}

.assessment-answer small {
  display: block;
  margin-bottom: var(--bs-space-3);
  color: var(--bs-color-text-muted);
}

.mastery-overview {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: var(--bs-space-8);
  padding: clamp(var(--bs-space-5), 3vw, var(--bs-space-6));
}

.mastery-overview > div {
  display: grid;
  gap: var(--bs-space-1);
}

.mastery-overview span {
  color: var(--bs-color-text-muted);
  font-size: var(--bs-font-size-sm);
}

.mastery-overview strong {
  font-size: var(--bs-font-size-h2);
}

.mastery-overview p {
  margin: 0;
  color: var(--bs-color-text-secondary);
  line-height: var(--bs-line-height-body);
}

.practice-objective-list {
  display: grid;
  gap: var(--bs-space-3);
  margin-top: var(--bs-space-6);
}

.practice-objective {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: var(--bs-space-5);
  padding: clamp(var(--bs-space-4), 2.5vw, var(--bs-space-5));
}

.practice-objective.is-locked {
  background: var(--bs-color-surface-tonal);
  box-shadow: none;
}

.practice-objective__index {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bs-color-brand-50);
  color: var(--bs-color-brand-700);
  font-weight: var(--bs-font-weight-bold);
}

.practice-objective h2,
.practice-objective p {
  margin-bottom: var(--bs-space-1);
}

/* Loi 3 · titres de ligne : 16 px demi-gras. */
.practice-objective h2,
.learning-row h2,
.lesson-row h2,
.lesson-row h3 {
  font-size: var(--bs-font-size-md);
  font-weight: var(--bs-font-weight-semibold);
}

/* Loi 4 · dans une ligne, le contexte est un méta discret,
   jamais un surtitre en capitales. */
.practice-objective .eyebrow,
.learning-row .eyebrow,
.lesson-row .eyebrow {
  margin-bottom: var(--bs-space-1);
  color: var(--bs-color-text-muted);
  font-size: var(--bs-font-size-xs);
  font-weight: var(--bs-font-weight-semibold);
  letter-spacing: 0.01em;
  text-transform: none;
}

.row-meta {
  margin-bottom: var(--bs-space-1) !important;
  color: var(--bs-color-text-muted) !important;
  font-size: var(--bs-font-size-xs);
  font-weight: var(--bs-font-weight-semibold);
  letter-spacing: 0.01em;
  text-transform: none;
}

/* Loi d'affordance : toute la ligne est cliquable et réagit doucement. */
.learning-row:not(.is-locked),
.lesson-row:not(.is-locked),
.practice-objective:not(.is-locked),
.programme-unit.is-published {
  cursor: pointer;
  transition: background var(--bs-motion-fast) var(--bs-motion-ease);
}

.learning-row:not(.is-locked):hover,
.lesson-row:not(.is-locked):hover,
.practice-objective:not(.is-locked):hover,
.programme-unit.is-published:hover {
  background: var(--bs-color-surface-tonal);
}

.learning-row:not(.is-locked):hover .button--secondary,
.lesson-row:not(.is-locked):hover .button--secondary,
.practice-objective:not(.is-locked):hover .button--secondary {
  background: var(--bs-color-brand-100);
}

.practice-objective p:not(.provenance-label) {
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-sm);
}

.practice-shell {
  max-width: 820px;
  margin-inline: auto;
  overflow: hidden;
}

/* Compact et calme : pendant une session, l'en-tête est un simple bandeau
   utilitaire, pas un aplat de marque. L'écran de pratique doit tenir dans
   la fenêtre, question, réponses et explication comprises. */
.practice-header {
  padding: var(--bs-space-3) clamp(var(--bs-space-5), 3vw, var(--bs-space-6)) var(--bs-space-4);
  background: var(--bs-color-surface-tonal);
  border-bottom: var(--bs-border-hairline);
}

.practice-header .back-link {
  margin-bottom: var(--bs-space-1);
}

.practice-header > p:last-child {
  max-width: 68ch;
  margin: var(--bs-space-2) 0 0;
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-sm);
  line-height: var(--bs-line-height-body);
}

.practice-progress-copy {
  display: flex;
  justify-content: space-between;
  gap: var(--bs-space-4);
  margin-bottom: var(--bs-space-2);
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-sm);
}

.question-panel {
  padding: var(--bs-space-5) clamp(var(--bs-space-5), 3vw, var(--bs-space-6));
}

/* L'énoncé est un contenu à lire, pas un titre de page : corps de
   lecture demi-gras, jamais gras ni plus grand que 18 px (loi 1). */
.question-panel h1 {
  max-width: 60ch;
  margin-bottom: var(--bs-space-5);
  font-size: var(--bs-font-size-h3);
  font-weight: var(--bs-font-weight-semibold);
  line-height: 1.5;
}

.question-meta {
  display: flex;
  align-items: center;
  gap: var(--bs-space-2);
  margin-bottom: var(--bs-space-3);
  color: var(--bs-color-text-muted);
  font-size: var(--bs-font-size-sm);
  font-weight: var(--bs-font-weight-semibold);
}

/* Jauge de difficulté : trois segments qui se remplissent. */
.difficulty-gauge {
  display: inline-flex;
  gap: 3px;
}

.difficulty-gauge i {
  width: 14px;
  height: 6px;
  border-radius: var(--bs-radius-pill);
  background: var(--bs-color-surface-sunken);
}

.difficulty-gauge i.is-on {
  background: var(--bs-color-brand-600);
}

.answer-choices {
  display: grid;
  gap: var(--bs-space-2);
  margin: 0 0 var(--bs-space-5);
  padding: 0;
  border: none;
}

.answer-choices--binary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.answer-choices label {
  position: relative;
  cursor: pointer;
}

.answer-choices input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.answer-choices label span {
  min-height: var(--bs-size-control-lg);
  display: flex;
  align-items: center;
  gap: var(--bs-space-3);
  padding: var(--bs-space-2) var(--bs-space-3);
  border-radius: var(--bs-radius-control);
  background: var(--bs-color-surface-tonal);
  color: var(--bs-color-text-secondary);
  line-height: var(--bs-line-height-body);
}

.answer-choices label b {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bs-color-surface-sunken);
  color: var(--bs-color-text-primary);
  font-size: var(--bs-font-size-sm);
}

.answer-choices input:checked + span {
  background: var(--bs-color-brand-50);
  color: var(--bs-color-brand-700);
  box-shadow: inset 0 0 0 2px var(--bs-color-brand-600);
  font-weight: var(--bs-font-weight-semibold);
}

.answer-choices input:focus-visible + span {
  box-shadow: var(--bs-focus-ring);
}

.answer-choices input:disabled + span,
.answer-field input:disabled {
  cursor: default;
  opacity: 0.82;
}

.answer-field {
  max-width: 380px;
  margin-bottom: var(--bs-space-5);
}

.answer-feedback {
  margin: 0 clamp(var(--bs-space-5), 3vw, var(--bs-space-6)) var(--bs-space-5);
  padding: var(--bs-space-4) var(--bs-space-5);
  border-radius: var(--bs-radius-card);
}

.answer-feedback.is-correct {
  background: var(--bs-color-success-soft);
  color: var(--bs-color-success-strong);
}

.answer-feedback.is-incorrect {
  background: var(--bs-color-warning-soft);
  color: var(--bs-color-warning-strong);
}

.answer-feedback h2 {
  margin-bottom: var(--bs-space-2);
}

.answer-feedback p:not(.eyebrow) {
  max-width: 66ch;
  line-height: var(--bs-line-height-body);
}

.answer-feedback small {
  display: block;
  margin-bottom: var(--bs-space-5);
}

.answer-feedback code,
.decision-reason code {
  font-family: var(--bs-font-family-mono);
}

.question-provenance {
  padding: var(--bs-space-3) clamp(var(--bs-space-5), 3vw, var(--bs-space-6));
  background: var(--bs-color-surface-sunken);
  color: var(--bs-color-text-muted);
  font-size: var(--bs-font-size-xs);
  line-height: var(--bs-line-height-body);
}

.result-panel,
.result-detail {
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(var(--bs-space-5), 3vw, var(--bs-space-6));
}

.result-panel.is-success {
  background: var(--bs-color-success-soft);
}

.result-panel.needs-review {
  background: var(--bs-color-warning-soft);
}

.result-panel > p:not(.eyebrow) {
  max-width: 62ch;
  color: var(--bs-color-text-secondary);
  line-height: var(--bs-line-height-body);
}

.result-score {
  display: grid;
  justify-items: start;
  margin: var(--bs-space-5) 0;
}

.result-score strong {
  font-size: clamp(32px, 5vw, 44px);
  letter-spacing: var(--bs-tracking-heading);
  line-height: 1;
}

.result-score span {
  margin-top: var(--bs-space-2);
  color: var(--bs-color-text-secondary);
}

.decision-reason {
  display: grid;
  gap: var(--bs-space-1);
  max-width: 520px;
  margin: var(--bs-space-6) 0;
  padding: var(--bs-space-4);
  border-radius: var(--bs-radius-control);
  background: var(--bs-color-surface-frost);
}

.decision-reason span,
.decision-reason small {
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-xs);
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bs-space-3);
}

.result-detail {
  margin-top: var(--bs-space-6);
}

.result-detail > p {
  color: var(--bs-color-text-secondary);
  line-height: var(--bs-line-height-body);
}

.loading-shell {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--bs-space-4);
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-ui);
}

.loading-mark {
  width: 34px;
  height: 34px;
  border: 4px solid var(--bs-color-brand-100);
  border-top-color: var(--bs-color-brand-600);
  border-radius: 50%;
  animation: loading-spin 800ms linear infinite;
}

@keyframes loading-spin {
  to { transform: rotate(360deg); }
}

.catalogue-unavailable,
.course-hero,
.course-progress-panel,
.learning-list,
.source-note,
.lesson-reader,
.reader-sidebar {
  border-radius: var(--bs-radius-panel);
  background: var(--bs-color-surface-panel);
  box-shadow: var(--bs-shadow-card);
}

.catalogue-unavailable {
  max-width: 720px;
  padding: clamp(var(--bs-space-5), 3vw, var(--bs-space-6));
}

.catalogue-unavailable p:not(.eyebrow) {
  max-width: 60ch;
  color: var(--bs-color-text-secondary);
  line-height: var(--bs-line-height-body);
}

.offline-notice {
  margin: 0 0 var(--bs-space-6);
  padding: var(--bs-space-3) var(--bs-space-4);
  border-radius: var(--bs-radius-control);
  background: var(--bs-color-warning-soft);
  color: var(--bs-color-warning-strong);
  font-size: var(--bs-font-size-sm);
  line-height: var(--bs-line-height-body);
}

.progress-track {
  display: block;
  appearance: none;
  width: 100%;
  height: 7px;
  overflow: hidden;
  border: 0;
  border-radius: var(--bs-radius-pill);
  background: var(--bs-color-surface-sunken);
  color: var(--bs-color-brand-600);
}

.progress-track::-webkit-progress-bar {
  border-radius: inherit;
  background: var(--bs-color-surface-sunken);
}

.progress-track::-webkit-progress-value,
.progress-track::-moz-progress-bar {
  border-radius: inherit;
  background: var(--bs-color-brand-600);
  transition: width var(--bs-motion-normal) var(--bs-motion-ease);
}

.section-heading--split {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--bs-space-4);
}

.section-heading--split h2,
.section-heading--split p:not(.eyebrow) {
  margin-bottom: 0;
}

/* Un surtitre garde toujours son air au-dessus du titre qu'il annonce. */
.section-heading--split .eyebrow {
  margin-bottom: var(--bs-space-2);
}

/* Loi 6 · chiffres clés : 22 px gras maximum, chiffres tabulaires. */
.section-heading--split > strong,
.mastery-overview strong,
.result-score strong,
.progress-summary strong {
  font-variant-numeric: tabular-nums;
}

.section-heading--split > strong {
  color: var(--bs-color-text-primary);
  font-size: var(--bs-font-size-h2);
}

.section-heading--split > span,
.section-note,
.learning-row p,
.course-hero p,
.lesson-row p,
.lesson-row small,
.source-note p {
  color: var(--bs-color-text-secondary);
  line-height: var(--bs-line-height-body);
}

.section-note {
  margin: var(--bs-space-3) 0;
  font-size: var(--bs-font-size-sm);
}

.text-action,
.save-position {
  min-height: var(--bs-layout-tap-min);
  display: inline-flex;
  align-items: center;
  border: none;
  background: transparent;
  color: var(--bs-color-brand-700);
  font-size: var(--bs-font-size-ui);
  font-weight: var(--bs-font-weight-bold);
  text-decoration: none;
  cursor: pointer;
}

.course-hero {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--bs-space-8);
  padding: clamp(var(--bs-space-5), 3vw, var(--bs-space-6));
  background: var(--bs-color-brand-900);
  color: var(--bs-color-text-on-brand);
}

.course-hero .eyebrow {
  color: var(--bs-color-brand-200);
}

/* Exception de héros (loi 1) : la seule action dominante de l'écran
   peut porter 22 px gras. Une seule par écran. */
.course-hero h2,
.next-action h2 {
  margin-bottom: var(--bs-space-1);
  font-size: var(--bs-font-size-h2);
  font-weight: var(--bs-font-weight-bold);
}

.course-hero p:last-child {
  margin-bottom: 0;
  color: var(--bs-color-brand-100);
}

.progress-summary {
  display: grid;
  justify-items: end;
  row-gap: var(--bs-space-1);
}

.progress-summary strong {
  font-size: var(--bs-font-size-h2);
}

.progress-summary span {
  color: var(--bs-color-brand-200);
  font-size: var(--bs-font-size-sm);
}

.learning-list,
.course-progress-panel,
.source-note {
  margin-top: var(--bs-space-6);
  padding: clamp(var(--bs-space-5), 3vw, var(--bs-space-6));
}

.learning-row {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: var(--bs-space-5);
  padding: var(--bs-space-5) var(--bs-space-4);
  border-top: var(--bs-border-hairline);
  border-radius: var(--bs-radius-control);
}

.learning-row__number,
.lesson-row__marker {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bs-color-brand-50);
  color: var(--bs-color-brand-700);
  font-weight: var(--bs-font-weight-bold);
}

.learning-row h2,
.learning-row p {
  margin-bottom: var(--bs-space-2);
}

.learning-row .progress-track {
  max-width: 400px;
}

/* Signal de provenance : la couleur institutionnelle reste, mais le
   libellé suit la loi 4 · méta discret, pas un surtitre. */
.provenance-label {
  margin-bottom: var(--bs-space-1) !important;
  color: var(--bs-color-source-menfp) !important;
  font-size: var(--bs-font-size-xs);
  font-weight: var(--bs-font-weight-semibold);
  letter-spacing: 0.01em;
  text-transform: none;
}

.course-progress-panel {
  display: grid;
  gap: var(--bs-space-5);
}

.course-progress-panel .button {
  justify-self: start;
}

.completion-message {
  margin: 0;
  color: var(--bs-color-success-strong);
  font-weight: var(--bs-font-weight-semibold);
}

.source-note {
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-sm);
}

.source-note p {
  max-width: 78ch;
  margin: var(--bs-space-1) 0 0;
}

.unit-progress {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--bs-space-4);
  margin-bottom: var(--bs-space-6);
}

.unit-progress span {
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-sm);
  font-weight: var(--bs-font-weight-semibold);
}

.lesson-list {
  display: grid;
  gap: var(--bs-space-3);
}

.lesson-row {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: var(--bs-space-5);
  padding: clamp(var(--bs-space-4), 2.5vw, var(--bs-space-5));
  border-radius: var(--bs-radius-card);
  background: var(--bs-color-surface-panel);
  box-shadow: var(--bs-shadow-card);
}

.lesson-row h3 {
  margin-bottom: var(--bs-space-2);
}

.lesson-row p {
  max-width: 72ch;
  margin-bottom: var(--bs-space-2);
}

.lesson-row.is-locked {
  background: var(--bs-color-surface-tonal);
  box-shadow: none;
}

.lesson-row.is-locked .lesson-row__marker {
  background: var(--bs-color-surface-sunken);
  color: var(--bs-color-text-muted);
}

.locked-label {
  color: var(--bs-color-text-muted);
  font-size: var(--bs-font-size-sm);
  font-weight: var(--bs-font-weight-semibold);
}

.reader-layout {
  display: grid;
  grid-template-columns: minmax(220px, var(--bs-layout-sidebar-width)) minmax(0, 760px);
  align-items: start;
  justify-content: center;
  gap: var(--bs-space-6);
}

.reader-sidebar {
  position: sticky;
  top: var(--bs-space-4);
  padding: var(--bs-space-5);
}

.reader-sidebar .back-link {
  margin-bottom: var(--bs-space-5);
}

.reader-toc {
  display: grid;
  gap: var(--bs-space-1);
}

.reader-toc button {
  min-height: var(--bs-layout-tap-min);
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: var(--bs-space-2);
  padding: var(--bs-space-2);
  border: none;
  border-radius: var(--bs-radius-control);
  background: transparent;
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-sm);
  text-align: left;
  cursor: pointer;
}

.reader-toc button:hover,
.reader-toc button[aria-current="location"] {
  background: var(--bs-color-brand-50);
  color: var(--bs-color-brand-700);
}

.reader-toc button span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bs-color-surface-sunken);
  font-size: var(--bs-font-size-xs);
  font-weight: var(--bs-font-weight-bold);
}

.reader-progress {
  display: grid;
  gap: var(--bs-space-2);
  margin-top: var(--bs-space-6);
}

.reader-progress span {
  color: var(--bs-color-text-muted);
  font-size: var(--bs-font-size-xs);
}

.lesson-reader {
  overflow: hidden;
}

.lesson-header,
.lesson-section,
.lesson-summary,
.lesson-completion {
  padding: clamp(var(--bs-space-5), 3vw, var(--bs-space-6));
}

.lesson-header {
  padding-bottom: var(--bs-space-6);
  background: var(--bs-color-brand-900);
  color: var(--bs-color-text-on-brand);
}

.lesson-header .eyebrow {
  color: var(--bs-color-brand-200);
}

.lesson-header p:last-child {
  margin-bottom: 0;
  color: var(--bs-color-brand-100);
}

.audio-fallback {
  display: grid;
  gap: var(--bs-space-1);
  margin: var(--bs-space-6) clamp(var(--bs-space-5), 3vw, var(--bs-space-6)) 0;
  padding: var(--bs-space-4);
  border-radius: var(--bs-radius-control);
  background: var(--bs-color-info-soft);
  color: var(--bs-color-info-strong);
  font-size: var(--bs-font-size-sm);
  line-height: var(--bs-line-height-body);
}

/* ============================================================
   Lecteur audio de leçon · barre standard, calme et complète :
   reculer 10 s, lecture/pause, avancer 10 s, position, durée,
   et la seule vitesse alternative autorisée : 0,8×.
   Surface neutre (loi de couleur : le teinté reste sémantique).
   ============================================================ */
.lesson-audio {
  display: grid;
  gap: var(--bs-space-3);
  margin: var(--bs-space-6) clamp(var(--bs-space-5), 3vw, var(--bs-space-6)) 0;
  padding: var(--bs-space-4) var(--bs-space-5);
  border: var(--bs-border-hairline);
  border-radius: var(--bs-radius-card);
  background: var(--bs-color-surface-tonal);
}

.lesson-audio__heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--bs-space-4);
}

.lesson-audio__heading h2,
.lesson-audio__heading p,
.lesson-audio > p {
  margin: 0;
}

.lesson-audio__heading span,
.lesson-audio > p {
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-sm);
}

.lesson-audio audio {
  display: none;
}

.audio-player {
  display: flex;
  align-items: center;
  gap: var(--bs-space-2);
  flex-wrap: wrap;
  min-height: var(--bs-size-control-lg);
  padding: var(--bs-space-2) var(--bs-space-3);
  border: var(--bs-border-hairline);
  border-radius: var(--bs-radius-pill);
  background: var(--bs-color-surface-panel);
}

.audio-player__play,
.audio-player__jump,
.audio-player__rate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: none;
  background: transparent;
  cursor: pointer;
}

.audio-player__play {
  width: var(--bs-layout-tap-min);
  height: var(--bs-layout-tap-min);
  border-radius: 50%;
  background: var(--bs-color-brand-600);
  color: var(--bs-color-text-on-brand);
}

.audio-player__play:hover {
  background: var(--bs-color-brand-700);
}

.audio-player__play .icon {
  width: 20px;
  height: 20px;
}

.audio-player__jump {
  gap: 2px;
  width: var(--bs-size-control-sm);
  height: var(--bs-size-control-sm);
  border-radius: 50%;
  color: var(--bs-color-text-secondary);
}

.audio-player__jump:hover {
  background: var(--bs-color-surface-sunken);
  color: var(--bs-color-text-primary);
}

.audio-player__jump .icon {
  width: 16px;
  height: 16px;
}

.audio-player__jump-label {
  font-size: 10px;
  font-weight: var(--bs-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.audio-player__time {
  flex: 0 0 auto;
  min-width: 40px;
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-sm);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.audio-player__seek {
  flex: 1 1 120px;
  min-width: 80px;
  height: var(--bs-size-control-sm);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  accent-color: var(--bs-color-brand-600);
  cursor: pointer;
}

/* La tortue : l'unique vitesse alternative (0,8×), en bascule. */
.audio-player__rate {
  width: var(--bs-size-control-sm);
  height: var(--bs-size-control-sm);
  border: 1px solid var(--bs-color-border-strong);
  border-radius: 50%;
  color: var(--bs-color-text-secondary);
}

.audio-player__rate .icon {
  width: 18px;
  height: 18px;
}

.audio-player__rate:hover {
  border-color: var(--bs-color-border-hover);
  color: var(--bs-color-text-primary);
}

.audio-player__rate[aria-pressed="true"] {
  border-color: var(--bs-color-brand-700);
  background: var(--bs-color-brand-600);
  color: var(--bs-color-text-on-brand);
}

.audio-error {
  color: var(--bs-color-danger-strong);
  font-weight: var(--bs-font-weight-semibold);
}

.lesson-section {
  scroll-margin-top: var(--bs-space-4);
  border-bottom: var(--bs-border-hairline);
}

.lesson-section.is-saved {
  background: var(--bs-color-surface-tonal);
}

.lesson-section__heading span {
  display: block;
  margin-bottom: var(--bs-space-2);
  color: var(--bs-color-text-muted);
  font-size: var(--bs-font-size-xs);
  font-weight: var(--bs-font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lesson-section > p {
  max-width: 66ch;
  margin-bottom: var(--bs-space-4);
  font-size: clamp(16px, 2vw, 18px);
  line-height: var(--bs-line-height-read);
}

.lesson-figure {
  max-width: 760px;
  margin: var(--bs-space-6) 0 var(--bs-space-4);
}

.lesson-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--bs-radius-card);
  background: var(--bs-color-surface-sunken);
}

.lesson-figure figcaption {
  max-width: 66ch;
  margin-top: var(--bs-space-2);
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-sm);
  line-height: var(--bs-line-height-body);
}

.lesson-summary {
  background: var(--bs-color-brand-50);
}

.lesson-summary ul {
  display: grid;
  gap: var(--bs-space-3);
  margin-bottom: 0;
  padding-left: var(--bs-space-6);
  line-height: var(--bs-line-height-body);
}

.lesson-completion {
  display: grid;
  justify-items: start;
  gap: var(--bs-space-4);
}

.lesson-completion p {
  max-width: 60ch;
  margin: 0;
  color: var(--bs-color-text-secondary);
  line-height: var(--bs-line-height-body);
}

.lesson-provenance {
  margin: 0;
  padding: var(--bs-space-4) clamp(var(--bs-space-5), 3vw, var(--bs-space-6));
  background: var(--bs-color-surface-sunken);
  color: var(--bs-color-text-muted);
  font-size: var(--bs-font-size-xs);
  line-height: var(--bs-line-height-body);
}

/* Sprint 5 · tuteur autonome, activité d'application et couverture. */
.page-heading.page-heading--actions {
  display: flex;
}

.section-heading__actions {
  display: grid;
  justify-items: end;
  gap: var(--bs-space-1);
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-sm);
}

.section-heading__actions .text-action {
  min-height: auto;
  font-size: var(--bs-font-size-sm);
}

.week-summary,
.projection-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bs-space-6);
}

/* Note calendaire du tuteur · descriptive, jamais culpabilisante. */
.tutor-year-note {
  display: flex;
  align-items: flex-start;
  gap: var(--bs-space-3);
  margin: 0 0 var(--bs-space-5);
  padding: var(--bs-space-3) var(--bs-space-4);
  border: var(--bs-border-hairline);
  border-radius: var(--bs-radius-control);
  background: var(--bs-color-surface-tonal);
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-sm);
  line-height: var(--bs-line-height-body);
}

.tutor-year-note svg { flex: 0 0 auto; margin-top: 2px; color: var(--bs-color-source-menfp); }

.week-summary {
  margin-top: var(--bs-space-6);
  padding: var(--bs-space-5) var(--bs-space-6);
  border-radius: var(--bs-radius-panel);
  background: var(--bs-color-surface-panel);
  box-shadow: var(--bs-shadow-card);
}

.week-summary > div,
.projection-metrics > div {
  display: grid;
  gap: var(--bs-space-1);
}

.week-summary span,
.week-summary small,
.projection-metrics dt {
  color: var(--bs-color-text-muted);
  font-size: var(--bs-font-size-sm);
}

.week-summary strong,
.projection-metrics dd {
  margin: 0;
  font-size: var(--bs-font-size-h2);
  font-weight: var(--bs-font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.plan-days {
  display: grid;
  gap: var(--bs-space-5);
  margin-top: var(--bs-space-6);
}

.plan-day,
.projection-panel,
.plan-history,
.planning-form,
.activity-panel,
.activity-completion,
.programme-map,
.empty-state {
  border-radius: var(--bs-radius-panel);
  background: var(--bs-color-surface-panel);
  box-shadow: var(--bs-shadow-card);
}

.plan-day {
  padding: var(--bs-space-2) var(--bs-space-5);
}

.plan-day__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bs-space-4);
  padding: var(--bs-space-4) 0;
}

.plan-day__heading h2 {
  margin: 0;
  text-transform: capitalize;
}

.plan-day__heading span {
  color: var(--bs-color-text-muted);
  font-size: var(--bs-font-size-sm);
}

.plan-item,
.programme-unit {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--bs-space-4);
  padding: var(--bs-space-4) 0;
  border-top: var(--bs-border-hairline);
}

.plan-item h3,
.plan-item p,
.programme-unit h3,
.programme-unit p {
  margin-bottom: var(--bs-space-1);
}

.plan-item p:not(.row-meta),
.programme-unit p:not(.row-meta) {
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-sm);
  line-height: var(--bs-line-height-body);
}

.plan-item__marker,
.programme-unit__number {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bs-color-brand-50);
  color: var(--bs-color-brand-700);
  font-weight: var(--bs-font-weight-bold);
}

.plan-item.is-completed .plan-item__marker {
  background: var(--bs-color-success-soft);
  color: var(--bs-color-success-strong);
}

.plan-item__actions {
  display: flex;
  align-items: center;
  gap: var(--bs-space-2);
}

.plan-item__status {
  color: var(--bs-color-text-muted);
  font-size: var(--bs-font-size-sm);
  font-weight: var(--bs-font-weight-semibold);
}

.plan-item__status.is-completed {
  color: var(--bs-color-success-strong);
}

.recovery-notice {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--bs-space-3);
  margin-bottom: var(--bs-space-6);
  padding: var(--bs-space-4);
  border-radius: var(--bs-radius-control);
  background: var(--bs-color-warning-soft);
  color: var(--bs-color-warning-strong);
}

.recovery-notice p {
  margin: var(--bs-space-1) 0 0;
  line-height: var(--bs-line-height-body);
}

.projection-panel {
  margin-top: var(--bs-space-6);
  padding: clamp(var(--bs-space-5), 3vw, var(--bs-space-6));
}

.projection-panel > p {
  color: var(--bs-color-text-secondary);
  line-height: var(--bs-line-height-body);
}

.projection-metrics {
  margin: var(--bs-space-5) 0;
}

.projection-caveat {
  padding: var(--bs-space-3) var(--bs-space-4);
  border: var(--bs-border-hairline);
  border-radius: var(--bs-radius-control);
  background: var(--bs-color-surface-tonal);
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-sm);
  line-height: var(--bs-line-height-body);
}

.plan-history {
  margin-top: var(--bs-space-6);
  padding: var(--bs-space-4) var(--bs-space-5);
}

.plan-history summary {
  min-height: var(--bs-layout-tap-min);
  display: flex;
  align-items: center;
  font-size: var(--bs-font-size-ui);
  font-weight: var(--bs-font-weight-semibold);
  cursor: pointer;
}

.planning-form,
.activity-panel,
.activity-completion,
.empty-state {
  padding: clamp(var(--bs-space-5), 3vw, var(--bs-space-6));
}

.activity-panel h2 {
  margin-top: var(--bs-space-6);
}

.activity-panel > h2:first-child {
  margin-top: 0;
}

.activity-steps {
  display: grid;
  gap: var(--bs-space-3);
  padding-left: var(--bs-space-6);
  line-height: var(--bs-line-height-body);
}

.activity-evidence {
  padding: var(--bs-space-4);
  border-radius: var(--bs-radius-control);
  background: var(--bs-color-surface-tonal);
}

.activity-evidence p {
  margin: 0;
  line-height: var(--bs-line-height-body);
}

.activity-completion {
  display: grid;
  justify-items: start;
  gap: var(--bs-space-4);
  margin-top: var(--bs-space-5);
}

.model-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bs-space-2);
  padding: var(--bs-space-3) var(--bs-space-4);
  border-radius: var(--bs-radius-control);
  background: var(--bs-color-surface-tonal);
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-sm);
  font-weight: var(--bs-font-weight-semibold);
}

.programme-map {
  margin-top: var(--bs-space-6);
  padding: var(--bs-space-2) var(--bs-space-5);
}

.programme-unit.is-structured {
  color: var(--bs-color-text-secondary);
}

.programme-unit.is-structured .programme-unit__number {
  background: var(--bs-color-surface-sunken);
  color: var(--bs-color-text-muted);
}

/* Sprint 6 · notifications, préférences et livraison multicanal. */
.heading-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--bs-space-2);
}

.notification-list,
.notification-settings,
.delivery-history,
.unsubscribe-panel {
  border-radius: var(--bs-radius-panel);
  background: var(--bs-color-surface-panel);
  box-shadow: var(--bs-shadow-card);
}

.notification-list {
  overflow: hidden;
}

.notification-list > .empty-state {
  box-shadow: none;
}

.notification-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--bs-space-4);
  padding: var(--bs-space-5);
  border-top: var(--bs-border-hairline);
}

.notification-item:first-child {
  border-top: 0;
}

.notification-item:hover {
  background: var(--bs-color-surface-tonal);
}

.notification-item h2,
.notification-item p {
  margin-bottom: var(--bs-space-1);
}

.notification-item p:not(.row-meta) {
  max-width: 68ch;
  color: var(--bs-color-text-secondary);
  line-height: var(--bs-line-height-body);
}

.notification-item__marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bs-color-surface-sunken);
}

.notification-item.is-unread .notification-item__marker {
  background: var(--bs-color-brand-600);
}

.notification-item.is-unread h2 {
  font-weight: var(--bs-font-weight-bold);
}

.delivery-history {
  margin-top: var(--bs-space-6);
  padding: var(--bs-space-4) var(--bs-space-5);
}

.delivery-history summary {
  min-height: var(--bs-layout-tap-min);
  display: flex;
  align-items: center;
  font-weight: var(--bs-font-weight-semibold);
  cursor: pointer;
}

.text-button {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bs-color-brand-700);
  font: inherit;
  font-weight: var(--bs-font-weight-semibold);
  cursor: pointer;
}

.notification-settings {
  overflow: hidden;
}

.notification-settings > section {
  padding: clamp(var(--bs-space-5), 3vw, var(--bs-space-6));
  border-top: var(--bs-border-hairline);
}

.notification-settings > section:first-of-type {
  border-top: 0;
}

.notification-settings > .field-error {
  margin: var(--bs-space-4) var(--bs-space-6) 0;
}

.notification-settings > .form-actions {
  padding: var(--bs-space-5) clamp(var(--bs-space-5), 3vw, var(--bs-space-6));
  background: var(--bs-color-surface-tonal);
}

.preference-row {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bs-space-5);
  padding: var(--bs-space-3) 0;
  border-top: var(--bs-border-hairline);
}

.notification-settings h2 + .preference-row {
  border-top: 0;
}

.preference-row span {
  display: grid;
  gap: var(--bs-space-1);
}

.preference-row small {
  max-width: 64ch;
  color: var(--bs-color-text-secondary);
  line-height: var(--bs-line-height-body);
}

.preference-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  accent-color: var(--bs-color-brand-700);
}

.quiet-hours-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: var(--bs-space-4);
  margin-top: var(--bs-space-4);
}

.quiet-hours-grid .field {
  margin-bottom: 0;
}

.unsubscribe-panel {
  max-width: 720px;
  padding: clamp(var(--bs-space-5), 4vw, var(--bs-space-8));
}

.unsubscribe-panel > p:not(.eyebrow) {
  max-width: 62ch;
  color: var(--bs-color-text-secondary);
  line-height: var(--bs-line-height-body);
}

/* Sprint 7 · facturation personnelle et prise en charge scolaire. */
.billing-status,
.billing-checkout,
.billing-history,
.school-payment-note {
  border-radius: var(--bs-radius-panel);
  background: var(--bs-color-surface-panel);
  box-shadow: var(--bs-shadow-card);
}

.billing-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--bs-space-8);
  padding: clamp(var(--bs-space-5), 3vw, var(--bs-space-6));
}

.billing-status.is-accessible {
  background: var(--bs-color-success-soft);
  color: var(--bs-color-success-strong);
}

.billing-status.is-restricted {
  background: var(--bs-color-warning-soft);
  color: var(--bs-color-warning-strong);
}

.billing-status h2,
.billing-status p,
.billing-offer h2,
.billing-offer p,
.payment-form h2,
.payment-pending h2,
.payment-pending p,
.billing-history h2,
.school-payment-note h2,
.school-payment-note p {
  margin-bottom: var(--bs-space-2);
}

.billing-status p:last-child,
.billing-offer p:last-child,
.payment-pending p:last-child,
.school-payment-note p:last-child {
  margin-bottom: 0;
}

.billing-status__date {
  display: grid;
  justify-items: end;
  gap: var(--bs-space-1);
  text-align: right;
}

.billing-status__date span {
  font-size: var(--bs-font-size-sm);
}

.billing-status__date strong,
.billing-offer > strong {
  font-size: var(--bs-font-size-h2);
}

.billing-checkout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
  gap: var(--bs-space-8);
  margin-top: var(--bs-space-6);
  padding: clamp(var(--bs-space-5), 3vw, var(--bs-space-8));
}

.billing-offer {
  align-self: start;
  padding-right: var(--bs-space-6);
}

.billing-offer > strong {
  display: block;
  margin: var(--bs-space-4) 0;
  color: var(--bs-color-brand-700);
}

.billing-offer p,
.billing-offer li,
.form-intro,
.payment-pending p,
.payment-pending small,
.billing-history > p,
.school-payment-note > p {
  color: var(--bs-color-text-secondary);
  line-height: var(--bs-line-height-body);
}

.billing-offer ul {
  display: grid;
  gap: var(--bs-space-2);
  padding-left: var(--bs-space-5);
}

.payment-form,
.payment-pending {
  padding: var(--bs-space-6);
  border-radius: var(--bs-radius-card);
  background: var(--bs-color-surface-tonal);
}

.payment-pending {
  align-self: start;
  background: var(--bs-color-info-soft);
  color: var(--bs-color-info-strong);
}

.payment-form .field:last-of-type {
  margin-bottom: var(--bs-space-5);
}

.payment-form label span {
  color: var(--bs-color-text-muted);
  font-weight: var(--bs-font-weight-regular);
}

.billing-history {
  margin-top: var(--bs-space-6);
  padding: clamp(var(--bs-space-5), 3vw, var(--bs-space-6));
}

.billing-history__row {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bs-space-4);
  padding: var(--bs-space-3) 0;
  border-top: var(--bs-border-hairline);
}

.billing-history h2 + .billing-history__row {
  margin-top: var(--bs-space-4);
}

.billing-history__row > div {
  display: grid;
  gap: var(--bs-space-1);
}

.billing-history__row span {
  color: var(--bs-color-text-muted);
  font-size: var(--bs-font-size-sm);
}

.payment-state {
  padding: var(--bs-space-1) var(--bs-space-2);
  border-radius: var(--bs-radius-pill);
  background: var(--bs-color-surface-sunken);
  font-weight: var(--bs-font-weight-semibold);
  white-space: nowrap;
}

.payment-state.is-paid {
  background: var(--bs-color-success-soft);
  color: var(--bs-color-success-strong);
}

.payment-state.is-pending {
  background: var(--bs-color-warning-soft);
  color: var(--bs-color-warning-strong);
}

.payment-state.is-failed,
.payment-state.is-refunded {
  background: var(--bs-color-danger-soft);
  color: var(--bs-color-danger-strong);
}

.school-payment-note {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
  gap: var(--bs-space-8);
  margin-top: var(--bs-space-6);
  padding: clamp(var(--bs-space-5), 3vw, var(--bs-space-6));
}

.billing-simulator .inline-actions {
  margin-top: var(--bs-space-4);
}

@media (max-width: 680px) {
  .app-header {
    min-height: 64px;
  }

  .brand-link img {
    width: 168px;
  }

  .header-context {
    display: none;
  }

  .auth-shell {
    width: 100%;
    margin: 0;
  }

  .auth-panel,
  .onboarding-panel {
    min-height: calc(100vh - 64px);
    border-radius: 0;
    box-shadow: none;
  }

  .stepper li em {
    display: none;
  }

  .form-grid,
  .choice-grid,
  .review-list > div,
  .detail-list > div,
  .next-action,
  .course-hero,
  .learning-row,
  .lesson-row,
  .reader-layout,
  .mastery-overview,
  .diagnostic-card,
  .practice-objective,
  .billing-status,
  .billing-checkout,
  .school-payment-note,
  .assessment-card,
  .assessment-objective {
    grid-template-columns: 1fr;
  }

  .plan-item,
  .programme-unit,
  .notification-item,
  .week-summary,
  .projection-metrics {
    grid-template-columns: 1fr;
  }

  .day-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .form-actions,
  .form-actions .button,
  .next-action .button {
    width: 100%;
  }

  .next-action {
    align-items: start;
  }

  .heading-actions,
  .notification-item {
    align-items: stretch;
  }

  .heading-actions,
  .notification-item,
  .quiet-hours-grid {
    grid-template-columns: 1fr;
  }

  .heading-actions {
    width: 100%;
  }

  .heading-actions .button,
  .notification-item .button {
    width: 100%;
  }

  .course-hero,
  .learning-row,
  .lesson-row,
  .practice-objective {
    align-items: start;
  }

  .course-hero .button,
  .learning-row .button,
  .lesson-row .button,
  .practice-objective .button,
  .result-actions .button {
    width: 100%;
  }

  .plan-item .button,
  .programme-unit .button,
  .page-heading--actions .button,
  .plan-item__actions {
    width: 100%;
  }

  .plan-item__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .page-heading.page-heading--actions,
  .section-heading--split {
    align-items: stretch;
    flex-direction: column;
  }

  .section-heading__actions {
    justify-items: start;
  }

  .progress-summary {
    justify-items: start;
  }

  .learning-row__number,
  .lesson-row__marker {
    width: 32px;
    height: 32px;
  }

  .reader-sidebar {
    position: static;
  }

  /* Le lecteur audio garde une seule barre : la piste passe en dessous
     des commandes quand la largeur manque. */
  .audio-player__seek {
    order: 10;
    flex-basis: 100%;
  }

  .reader-toc {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .reader-toc button {
    grid-template-columns: 1fr;
    justify-items: center;
    font-size: 0;
  }

  .dashboard-heading {
    align-items: center;
  }

  .billing-status__date {
    justify-items: start;
    text-align: left;
  }

  .billing-offer {
    padding-right: 0;
  }

  .billing-history__row {
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .topbar__title {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ============================================================
   Calendrier officiel · trois vues adaptatives (mois, trimestre,
   année) + panneau persistant. Couleur = provenance uniquement.
   Sans filets : cartes calmes, pastilles et puces colorées.
   ============================================================ */
.page-heading--calendar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--bs-space-4);
  flex-wrap: wrap;
}

.cal-views {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--bs-radius-control);
  background: var(--bs-color-surface-sunken);
}

.cal-views button {
  min-height: var(--bs-size-control-sm);
  padding: 0 var(--bs-space-3);
  border: none;
  border-radius: var(--bs-radius-sm);
  background: transparent;
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-sm);
  font-weight: var(--bs-font-weight-semibold);
  cursor: pointer;
}

.cal-views button[aria-pressed="true"] {
  background: var(--bs-color-surface-panel);
  color: var(--bs-color-brand-700);
  box-shadow: var(--bs-shadow-card);
}

.cal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--bs-space-5);
  align-items: start;
  margin-top: var(--bs-space-5);
}

.cal-main {
  padding: var(--bs-space-4) var(--bs-space-5) var(--bs-space-5);
  border-radius: var(--bs-radius-panel);
  background: var(--bs-color-surface-panel);
  box-shadow: var(--bs-shadow-card);
}

.cal-toolbar {
  display: flex;
  align-items: center;
  gap: var(--bs-space-2);
  margin-bottom: var(--bs-space-4);
}

.cal-toolbar h2 {
  flex: 1;
  margin: 0;
  text-align: center;
  text-transform: capitalize;
}

.cal-toolbar__nav {
  display: grid;
  place-items: center;
  width: var(--bs-size-control-sm);
  height: var(--bs-size-control-sm);
  border: 1px solid var(--bs-color-border-default);
  border-radius: var(--bs-radius-control);
  background: var(--bs-color-surface-panel);
  color: var(--bs-color-text-secondary);
  cursor: pointer;
}

.cal-toolbar__today {
  min-height: var(--bs-size-control-sm);
  padding: 0 var(--bs-space-3);
  border: 1px solid var(--bs-color-border-default);
  border-radius: var(--bs-radius-control);
  background: var(--bs-color-surface-panel);
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-sm);
  font-weight: var(--bs-font-weight-semibold);
  cursor: pointer;
}

.cal-toolbar__nav:hover,
.cal-toolbar__today:hover {
  border-color: var(--bs-color-border-hover);
  color: var(--bs-color-text-primary);
}

.icon--flip { transform: scaleX(-1); }

/* ---- Vue mois : agenda ---- */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.cal-grid__head {
  padding: var(--bs-space-1) 0 var(--bs-space-2);
  color: var(--bs-color-text-muted);
  font-size: var(--bs-font-size-xs);
  font-weight: var(--bs-font-weight-semibold);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cal-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-height: 84px;
  padding: var(--bs-space-1);
  border: 1px solid transparent;
  border-radius: var(--bs-radius-control);
  background: var(--bs-color-surface-tonal);
  color: var(--bs-color-text-primary);
  text-align: left;
  cursor: pointer;
}

.cal-cell:hover { background: var(--bs-color-surface-sunken); }

.cal-cell__num {
  align-self: flex-end;
  min-width: 22px;
  padding: 1px 4px;
  border-radius: var(--bs-radius-pill);
  font-size: var(--bs-font-size-sm);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.cal-cell.is-today .cal-cell__num {
  background: var(--bs-color-brand-600);
  color: var(--bs-color-text-on-brand);
  font-weight: var(--bs-font-weight-bold);
}

.cal-cell.is-selected {
  border-color: var(--bs-color-brand-600);
  background: var(--bs-color-brand-50);
}

.cal-chip {
  overflow: hidden;
  padding: 1px var(--bs-space-1);
  border-radius: var(--bs-radius-sm);
  font-size: var(--bs-font-size-xs);
  font-weight: var(--bs-font-weight-semibold);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cal-chip.is-menfp { background: var(--bs-color-source-menfp-soft); color: var(--bs-color-source-menfp); }
.cal-chip.is-civil { background: var(--bs-color-source-boussole-soft); color: var(--bs-color-source-boussole); }
.cal-chip.is-school { background: var(--bs-color-source-school-soft); color: var(--bs-color-source-school); }
.cal-chip.is-more { color: var(--bs-color-text-muted); }

/* ---- Mini-mois (trimestre, année) ---- */
.cal-quarter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bs-space-4);
}

.cal-year {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bs-space-4);
}

.cal-mini__title {
  margin: 0 0 var(--bs-space-1);
  border: none;
  background: none;
  padding: 2px var(--bs-space-1);
  border-radius: var(--bs-radius-sm);
  color: var(--bs-color-text-primary);
  font-size: var(--bs-font-size-sm);
  font-weight: var(--bs-font-weight-semibold);
  text-transform: capitalize;
}

button.cal-mini__title { cursor: pointer; color: var(--bs-color-brand-700); }
button.cal-mini__title:hover { background: var(--bs-color-brand-50); }

.cal-mini__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
}

.cal-mini__head {
  color: var(--bs-color-text-muted);
  font-size: 10px;
  text-align: center;
}

.cal-mini__day {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 26px;
  border: none;
  border-radius: var(--bs-radius-sm);
  background: transparent;
  color: var(--bs-color-text-secondary);
  font-size: var(--bs-font-size-xs);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.cal-mini__day:hover { background: var(--bs-color-surface-sunken); }
.cal-mini__day.is-today { outline: 1px solid var(--bs-color-brand-600); font-weight: var(--bs-font-weight-bold); color: var(--bs-color-text-primary); }
.cal-mini__day.is-selected { background: var(--bs-color-brand-600); color: var(--bs-color-text-on-brand); }
.cal-mini__day.has-menfp { box-shadow: inset 0 -2px 0 var(--bs-color-source-menfp); }
.cal-mini__day.has-civil { box-shadow: inset 0 -2px 0 var(--bs-color-source-boussole); }
.cal-mini__day.has-school { box-shadow: inset 0 -2px 0 var(--bs-color-source-school); }

/* ---- Panneau persistant ---- */
.cal-aside {
  display: grid;
  gap: var(--bs-space-3);
  position: sticky;
  top: 0;
}

.cal-aside__card {
  padding: var(--bs-space-4) var(--bs-space-5);
  border-radius: var(--bs-radius-panel);
  background: var(--bs-color-surface-panel);
  box-shadow: var(--bs-shadow-card);
}

.cal-aside__card--pending { background: var(--bs-color-surface-tonal); box-shadow: none; }

.cal-aside__card h2 { margin-bottom: var(--bs-space-3); }

.cal-aside__event {
  display: flex;
  gap: var(--bs-space-2);
  margin: 0 0 var(--bs-space-3);
  font-size: var(--bs-font-size-sm);
  color: var(--bs-color-text-secondary);
}

.cal-aside__event:last-child { margin-bottom: 0; }
.cal-aside__event strong { color: var(--bs-color-text-primary); }

.cal-aside__quiet { margin: 0; color: var(--bs-color-text-muted); font-size: var(--bs-font-size-sm); }

.cal-aside__row {
  display: flex;
  align-items: center;
  gap: var(--bs-space-2);
  width: 100%;
  min-height: var(--bs-size-control-sm);
  padding: var(--bs-space-1) var(--bs-space-2);
  margin: 0 calc(-1 * var(--bs-space-2));
  border: none;
  border-radius: var(--bs-radius-control);
  background: transparent;
  color: var(--bs-color-text-primary);
  font-size: var(--bs-font-size-sm);
  text-align: left;
  cursor: pointer;
}

.cal-aside__row:hover { background: var(--bs-color-surface-tonal); }
.cal-aside__row span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-aside__row time { color: var(--bs-color-text-muted); font-size: var(--bs-font-size-xs); font-variant-numeric: tabular-nums; }

.cal-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--bs-color-border-strong);
}

.cal-aside__row .cal-dot { margin-top: 0; }
.cal-dot.is-menfp { background: var(--bs-color-source-menfp); }
.cal-dot.is-civil { background: var(--bs-color-source-boussole); }
.cal-dot.is-school { background: var(--bs-color-source-school); }

.cal-legend {
  display: flex;
  gap: var(--bs-space-4);
  margin: 0;
  padding: 0 var(--bs-space-2);
  color: var(--bs-color-text-muted);
  font-size: var(--bs-font-size-xs);
}

.cal-legend span { display: inline-flex; align-items: center; gap: var(--bs-space-1); }
.cal-legend .cal-dot { margin-top: 0; }

@media (max-width: 899px) {
  .cal-layout { grid-template-columns: 1fr; }
  .cal-aside { position: static; }
  .cal-cell { min-height: 56px; }
  .cal-chip { display: none; }
  .cal-cell__num { align-self: center; }
  .cal-year { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cal-quarter { grid-template-columns: 1fr; }
}