/* ==========================================================================
   quality.css — Wave 7 front-end quality layer (a11y / mobile / PWA / contrast)
   Loaded AFTER the page stylesheet so these rules can override conservatively.
   Brand palette: navy #053685, gold #C9A227.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Skip link (#43 a11y) — visually hidden until focused, then visible.
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 20px;
  background: #053685;
  color: #fff;
  font-weight: 700;
  font-family: inherit;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.skip-link:focus,
.skip-link:focus-visible {
  left: env(safe-area-inset-left, 0);
  top: env(safe-area-inset-top, 0);
  outline: 3px solid #C9A227;
  outline-offset: 2px;
}

/* Generic visually-hidden utility (available for any icon-only labels). */
.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   2. Focus-visible styles (#43 a11y) — keyboard users get a clear ring,
      mouse users are not disturbed (focus-visible only).
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="link"]:focus-visible {
  outline: 3px solid #C9A227;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Make programmatic focus targets (e.g. #main) not show a stray ring. */
[tabindex="-1"]:focus {
  outline: none;
}

/* --------------------------------------------------------------------------
   3. Reduced motion (#43 a11y) — honor the user preference.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   4. Mobile / safe-area (#44) — notch & rounded-corner support.
      viewport-fit=cover is set on each page; these consume the insets.
   -------------------------------------------------------------------------- */

/* Anchor jump offset so hash links / skip link don't hide under fixed
   headers. Header heights observed: LMS app ~64px, marketing pages vary; a
   generous value works for all and only affects scroll landing position. */
html {
  scroll-padding-top: 72px;
}

/* Pad the body's bottom for devices with a home indicator. */
body {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Fixed / sticky page headers must clear the notch on landscape phones. */
.lms-header,
header.header,
section.header,
.top {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* Fixed bottom banners (RGPD cookie bar) must clear the home indicator. */
#rgpdBanner {
  padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
}

/* --------------------------------------------------------------------------
   5. Touch targets (#44) — ensure interactive controls are >= 44x44px
      where reasonable. Inline-text links inside paragraphs are exempted so
      we don't blow up body copy line spacing.
   -------------------------------------------------------------------------- */
button,
a.btn,
.btn,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"],
.lms-theme-toggle,
#themeToggle,
#themeBtn {
  min-height: 44px;
  min-width: 44px;
}

/* Keep icon-only toggle buttons centered once they get a min size. */
.lms-theme-toggle,
#themeToggle,
#themeBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   6. Contrast nudges (#45) — only lift clearly-too-light greys toward the
      ~4.5:1 WCAG AA threshold. Brand navy/gold are left untouched.
      Common too-light greys in the codebase: #94a3b8, #718096, #A0AEC0.
   -------------------------------------------------------------------------- */

/* Light backgrounds: nudge muted greys darker for body-size text. */
.trust-bar p,
.stat .label,
.course-card p,
.preview-card p,
.test-card .role,
.price-note,
.pricing-box .sub {
  color: #5b6675; /* ~5.3:1 on white, was #94a3b8 (~2.6:1) */
}

/* Footer muted copyright line on very dark footer — lift for legibility. */
footer p {
  color: rgba(255, 255, 255, 0.62);
}

/* Dark theme: muted greys (#718096 ~ borderline) lifted slightly. */
[data-theme="dark"] .trust-bar p,
[data-theme="dark"] .stat .label,
[data-theme="dark"] .test-card .role,
[data-theme="dark"] .price-note {
  color: #9aa6b8;
}

/* --------------------------------------------------------------------------
   7. Form fields — 16px minimum (#24) to prevent iOS auto-zoom on focus.
   -------------------------------------------------------------------------- */
input,
textarea,
select {
  font-size: max(16px, 1rem);
}

/* --------------------------------------------------------------------------
   8. Very small screens ≤360px (#25) — trim padding of the main cards /
      sections so content doesn't feel cramped against the edges.
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  .lms-content__inner { padding: 16px 10px 48px; }
  .lms-container { padding-left: 12px; padding-right: 12px; }
  .lms-profile-page { padding-left: 12px; padding-right: 12px; }
  .lms-profile-page__section { padding: 14px; }
  .lms-card,
  .card,
  .lms-modal__card { padding: 16px; }
}

/* --------------------------------------------------------------------------
   9. Skeletons de chargement (#50) — dégradé animé qui balaie de gauche à
      droite. Utilisé par renderSkeleton() (app.js). Respecte prefers-reduced-motion
      via la règle globale plus haut.
   -------------------------------------------------------------------------- */
.lms-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--gray-lighter, #eef1f5);
  border-radius: 8px;
}
.lms-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: lmsSkeletonSweep 1.3s ease-in-out infinite;
}
[data-theme="dark"] .lms-skeleton { background: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .lms-skeleton::after {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}
.lms-skeleton-block { padding: 24px 16px; }
.lms-skeleton__title { height: 26px; width: 45%; margin-bottom: 18px; }
.lms-skeleton__line { height: 14px; margin-bottom: 12px; }
@keyframes lmsSkeletonSweep {
  100% { transform: translateX(100%); }
}

/* =====================================================================
   Lot A (test navigateur réel) — chevauchements & lisibilité
   ===================================================================== */

/* #3/#8/#64 : pendant le lecteur plein écran, l'onboarding ou le panneau
   Merlin, les boutons flottants ne doivent NI chevaucher NI intercepter. */
body:has(.gd-player) .merlin-fab,
body:has(.gd-player) .bug-reporter,
body:has(.gd-player) .lms-scrolltop,
body:has(.gd-player) #scrollTopBtn,
body:has(.lms-onboarding) .merlin-fab,
body:has(.lms-onboarding) .bug-reporter,
body:has(.lms-onboarding) .lms-scrolltop,
body:has(.lms-onboarding) #scrollTopBtn,
body:has(.merlin-panel) .bug-reporter { display: none !important; }

/* #4 : menus déroulants TOUJOURS quasi opaques — le glassmorphism rendait
   « Mon profil » illisible sur le hero sombre. */
.lms-user-menu__dropdown {
  background: rgba(255, 255, 255, 0.97) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(5, 54, 133, 0.14);
}
[data-theme="dark"] .lms-user-menu__dropdown {
  background: rgba(17, 23, 32, 0.97) !important;
  border-color: rgba(255, 255, 255, 0.12);
}
/* CORRECTIF EMPILEMENT (scan tous thèmes) : sur les skins qui posent un
   backdrop-filter sur le dropdown (glassmorphism, fortnite, cyberpunk, arcade,
   scifi), ce filtre casse la dominance du menu → le fil d'ariane, le contenu et
   la barre de progression passaient AU-DESSUS du menu ouvert. À l'ouverture on
   retire le filtre, on rend le fond 100 % opaque et on hisse le menu au-dessus
   de TOUT flottant. */
.lms-user-menu__dropdown--open {
  z-index: 100050 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: #ffffff !important;
}
[data-theme="dark"] .lms-user-menu__dropdown--open {
  background: #0f1620 !important;
}
/* Menu ouvert : on masque les contrôles flottants de droite (Sommaire, Merlin,
   pastille bug, retour-haut, invite aventure) — ils ne doivent jamais chevaucher
   ni percer le menu, quel que soit le thème. */
body:has(.lms-user-menu__dropdown--open) .lms-toc-btn,
body:has(.lms-user-menu__dropdown--open) .merlin-fab,
body:has(.lms-user-menu__dropdown--open) .bug-reporter,
body:has(.lms-user-menu__dropdown--open) .scroll-top,
body:has(.lms-user-menu__dropdown--open) .lms-adventure-hint {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* #17 : zone réservée aux flottants en bas des pages longues (mobile) —
   plus aucun contenu ne finit caché sous Merlin / la pastille bug. */
@media (max-width: 768px) {
  .lms-content, .lms-chapter, .lms-profile-page, .lms-catalog { padding-bottom: 150px; }
}

/* =====================================================================
   Lot B (UX globale : header / profil / onboarding / LMS)
   Chargé en dernier : ces règles peuvent surclasser style.css, le thème
   steel (button { border-radius:0 }) et les skins (spécificité html[data-skin]).
   ===================================================================== */

/* ------------------------------------------------------------------
   #23 — Header : fond nettement plus opaque + blur. Fini le texte qui
   transperce sous le hero sombre (le skin glassmorphism était à .55).
   ------------------------------------------------------------------ */
.lms-header {
  background: rgba(255, 255, 255, 0.92) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
[data-theme="dark"] .lms-header {
  background: rgba(15, 20, 28, 0.92) !important;
}

/* ------------------------------------------------------------------
   #22 — Toggle sombre : bouton fantôme ROND 40px (plus de tuile blanche).
   Le sélecteur #themeToggle (id) bat les skins html[data-skin] .lms-theme-toggle.
   ------------------------------------------------------------------ */
.lms-theme-toggle,
#themeToggle {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}
.lms-theme-toggle:hover,
#themeToggle:hover {
  background: rgba(5, 54, 133, 0.08) !important;
  transform: none;
}
[data-theme="dark"] .lms-theme-toggle:hover,
[data-theme="dark"] #themeToggle:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* ------------------------------------------------------------------
   #14 — Hamburger sidebar : bouton rond fantôme ☰ dans le header, à
   GAUCHE du logo. Rendu par cours.html, affiché par showChapter() (JS),
   masqué sur desktop (la sidebar y est déjà visible).
   ------------------------------------------------------------------ */
.lms-header__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  margin-right: 10px;
  padding: 0;
  flex-shrink: 0;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  color: var(--dark, #0A0F1A);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.lms-header__menu:hover { background: rgba(5, 54, 133, 0.08) !important; }
[data-theme="dark"] .lms-header__menu:hover { background: rgba(255, 255, 255, 0.12) !important; }
@media (min-width: 1025px) {
  .lms-header__menu { display: none !important; }
}
/* L'ancien bouton flottant bas-gauche n'est plus rendu ; ceinture-bretelles. */
.lms-sidebar-toggle { display: none !important; }

/* ------------------------------------------------------------------
   #21 — « Reprendre » : rond 40px, icône ▶ seule en mobile ;
   le desktop garde le libellé (règle style.css inchangée).
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .lms-header-resume {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 50% !important;
  }
  .lms-header-resume__label { display: none; }
}

/* ------------------------------------------------------------------
   #19/#24 — Header mobile ≤480px : icône seule (texte du logo masqué),
   hauteur fixe 56px, alignements verticaux propres.
   ------------------------------------------------------------------ */
@media (max-width: 480px) {
  :root { --header-height: 56px; }
  .lms-header { height: 56px; }
  .lms-header__logo span { display: none; }
  .lms-header__logo { gap: 0; font-size: 1rem; }
  .lms-header__menu { margin-right: 4px; }
  .lms-header__nav { gap: 8px; }
  html { scroll-padding-top: 64px; }
}

/* ------------------------------------------------------------------
   #26 — Vue chapitre mobile : breadcrumb réduit à « ‹ {module} » sur
   UNE ligne. Le fil complet + actions restent en desktop.
   ------------------------------------------------------------------ */
.lms-breadcrumb__mobile { display: none; }
@media (max-width: 768px) {
  .lms-breadcrumb--chapter .lms-breadcrumb__path,
  .lms-breadcrumb--chapter .lms-breadcrumb__actions { display: none !important; }
  .lms-breadcrumb--chapter { padding: 10px 16px !important; flex-wrap: nowrap !important; }
  /* Audit WCAG — pastille auto-portée : fond carte + texte sombre du thème,
     le contraste tient sur tous les skins (fini le lien bleu sur bandeau bleu). */
  .lms-breadcrumb--chapter .lms-breadcrumb__mobile {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.9rem;
    background: var(--card-bg, #fff);
    color: var(--dark, #1c2733) !important;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 99px;
    padding: 5px 12px;
    text-decoration: none;
  }
}

/* ------------------------------------------------------------------
   #71/#56 — Widget XP : layout flex robuste (fini « 0/500 XP » collé) ;
   la variante « content » disparaît dès que la sidebar est visible.
   ------------------------------------------------------------------ */
.lms-xpbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #D8DFE9);
  border-radius: 8px;
  font-size: 0.85rem;
}
.lms-xpbar__level { font-weight: 700; color: var(--primary, #053685); white-space: nowrap; flex-shrink: 0; }
.lms-xpbar__track-wrap { flex: 1 1 auto; min-width: 0; }
.lms-xpbar__track { height: 8px; background: var(--gray-light, #D8DFE9); border-radius: 4px; overflow: hidden; }
.lms-xpbar__fill { height: 100%; background: var(--primary, #053685); border-radius: 4px; transition: width 0.5s; }
.lms-xpbar__meta { font-size: 0.75rem; color: var(--dark-soft, #3D4555); margin-top: 3px; white-space: nowrap; }
.lms-xpbar__total,
.lms-xpbar__streak { font-size: 0.75rem; color: var(--dark-soft, #3D4555); white-space: nowrap; flex-shrink: 0; }
.lms-xpbar__streak { color: var(--accent, #C9A227); }
@media (max-width: 480px) {
  .lms-xpbar { gap: 10px; padding: 10px 12px; flex-wrap: wrap; }
  .lms-xpbar__track-wrap { flex-basis: 130px; }
}
/* Sidebar visible (≥1025px) : elle porte déjà le widget → pas de doublon. */
@media (min-width: 1025px) {
  .lms-course .lms-xpbar--content { display: none; }
}
/* Dans la sidebar, le widget colle mieux sans marge externe débordante. */
.lms-sidebar .lms-xpbar { margin: 12px 12px 0; }

/* ------------------------------------------------------------------
   #58 — Badges verrouillés repliés dans <details> « 🔒 À débloquer (N) ».
   ------------------------------------------------------------------ */
.lms-badges__locked { margin-top: 14px; }
.lms-badges__locked > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--gray-lighter, #EEF1F6);
  border: 1px solid var(--border, #D8DFE9);
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dark-soft, #3D4555);
  user-select: none;
}
.lms-badges__locked > summary::-webkit-details-marker { display: none; }
.lms-badges__locked > summary::after { content: "▾"; font-size: 0.8em; transition: transform 0.2s; }
.lms-badges__locked[open] > summary::after { transform: rotate(180deg); }
.lms-badges__locked > summary:hover { background: var(--primary-bg, #E8EEF7); color: var(--primary, #053685); }

/* ------------------------------------------------------------------
   #59 — Vignettes de thèmes : fond skeleton derrière chaque <img>.
   L'image passe AU-DESSUS du reflet animé une fois chargée (z-index).
   ------------------------------------------------------------------ */
.lms-skin-card__thumbwrap {
  display: block;
  position: relative;
  width: 100%;
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
}
.lms-skin-card__thumbwrap .lms-skin-card__thumb {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
}

/* ------------------------------------------------------------------
   #60 — Le sommaire du profil devient sticky sous le header.
   ------------------------------------------------------------------ */
.lms-profile-page__toc {
  position: sticky;
  top: var(--header-height, 64px);
  z-index: 900; /* sous le header (1000), au-dessus du contenu */
  padding: 10px 0;
  margin-top: -10px;
  background: var(--bg, #F5F7FA);
}
[data-theme="dark"] .lms-profile-page__toc { background: var(--bg, #020617); }

/* ------------------------------------------------------------------
   #65 — Icônes métiers (onboarding) : pastille ronde 56px uniforme,
   img 32px en contain → plus de damiers ni de tailles hétérogènes.
   ------------------------------------------------------------------ */
.lms-onboarding__option--grid .lms-onboarding__option-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  overflow: hidden;
  font-size: 1.4rem; /* icônes emoji éventuelles */
}
.lms-onboarding__option--grid .lms-onboarding__option-icon img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain;
  border-radius: 0;
}

/* ------------------------------------------------------------------
   #66 — Grille métiers ≤480px : 3 colonnes compactes, labels .78rem.
   (« Juste curieux » est déjà rendu en dernière position par app.js.)
   ------------------------------------------------------------------ */
@media (max-width: 480px) {
  .lms-onboarding__option-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .lms-onboarding__option--grid { padding: 8px 4px !important; }
  .lms-onboarding__option--grid .lms-onboarding__option-label {
    font-size: 0.78rem !important;
    line-height: 1.15;
  }
  .lms-onboarding__option--grid .lms-onboarding__option-icon { width: 44px; height: 44px; }
  .lms-onboarding__option--grid .lms-onboarding__option-icon img {
    width: 26px !important;
    height: 26px !important;
  }
}

/* ------------------------------------------------------------------
   #67 — Boutons d'onboarding : or de marque (#C9A227, texte marine),
   hover assombri — fini le vert/violet hors palette.
   ------------------------------------------------------------------ */
.lms-onboarding__continue,
.lms-onboarding__continue--big,
.lms-onboarding__start-btn {
  background: #C9A227;
  color: #053685;
}
.lms-onboarding__continue:hover,
.lms-onboarding__continue--big:hover,
.lms-onboarding__start-btn:hover {
  background: #B08E1F;
  color: #053685;
  box-shadow: 0 6px 20px rgba(201, 162, 39, 0.4);
}
.lms-onboarding__continue:disabled,
.lms-onboarding__continue--disabled { background: #C9A227; opacity: 0.4; }

/* ------------------------------------------------------------------
   #68 — Étape thème : le thème actuel est présélectionné, bordure or.
   ------------------------------------------------------------------ */
.lms-skin-grid--onboarding .lms-skin-card--active {
  border-color: #C9A227 !important;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.35) !important;
}
.lms-skin-grid--onboarding .lms-skin-card--active .lms-skin-card__badge {
  background: #C9A227;
  color: #053685;
}
.lms-skin-grid--onboarding .lms-skin-card--active .lms-skin-card__badge img { filter: none; }

/* ------------------------------------------------------------------
   #76 — Accordéons : fond homogène var(--card-bg), chevron 22px,
   padding identique ouvert/fermé.
   ------------------------------------------------------------------ */
.block-accordion__item { background: var(--card-bg, #fff); }
.block-accordion__header { background: var(--card-bg, #fff); padding: 14px 18px; }
.block-accordion__content { background: var(--card-bg, #fff); padding: 14px 18px; }
.block-accordion__arrow {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

/* ------------------------------------------------------------------
   #79 — Fin de chapitre mobile : barre Précédent / Terminer / Suivant
   sticky en bas, fond opaque, SOUS les FABs (z-index inférieur).
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .lms-content .lms-chapter-nav {
    position: sticky;
    bottom: 0;
    z-index: 40; /* sous Merlin (8000) et la pastille bug (99990) */
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 40px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    margin-left: -16px;
    margin-right: -16px;
    background: var(--bg, #F5F7FA);
    border-top: 1px solid var(--border, #D8DFE9);
    box-shadow: 0 -6px 18px rgba(10, 15, 26, 0.08);
  }
  [data-theme="dark"] .lms-content .lms-chapter-nav { background: var(--bg, #020617); }
  .lms-content .lms-chapter-nav__btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    padding: 10px 12px;
    font-size: 0.82rem;
  }
  /* Audit WCAG — CTA principaux de la barre : texte plus grand et vert
     assombri (#00795f : blanc 5,3:1 — le vert clair des skins ne tient pas). */
  .lms-content .lms-chapter-nav__btn--complete,
  .lms-content .lms-chapter-nav__btn--next {
    background: #00795f !important;
    color: #fff !important;
    font-size: 1.02rem;
    font-weight: 800;
  }
  /* Le bouton « Vérifier » d'un quiz ne doit pas finir caché sous la barre. */
  html { scroll-padding-bottom: 96px; }
}
/* ≤360px : le padding du contenu passe à 10px (§8) — la barre suit. */
@media (max-width: 360px) {
  .lms-content .lms-chapter-nav { margin-left: -10px; margin-right: -10px; }
}

/* ------------------------------------------------------------------
   #89 — État d'erreur générique : mascotte + message + « Réessayer ».
   ------------------------------------------------------------------ */
.lms-error-state {
  max-width: 420px;
  margin: 48px auto;
  padding: 32px 24px;
  text-align: center;
}
.lms-error-state__img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin: 0 auto 16px;
  display: block;
}
.lms-error-state__msg {
  font-size: 1rem;
  font-weight: 600;
  color: var(--dark, #0A0F1A);
  margin: 0 0 18px;
}

/* ------------------------------------------------------------------
   #93 — Typo mobile ≤480px : h1 de hero 1.5rem, titres de section 1.15rem.
   ------------------------------------------------------------------ */
@media (max-width: 480px) {
  .lms-hero h1 { font-size: 1.5rem !important; }
  .lms-hero p { font-size: 0.95rem; }
  .block-heading h2,
  .lms-profile-page__section h2 { font-size: 1.15rem !important; }
}

/* ------------------------------------------------------------------
   #99 — Toasts : conteneur empilé (max 2), top-centre en mobile,
   z-index au-dessus de tout, jamais sous le header.
   ------------------------------------------------------------------ */
.lms-toast-stack {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 24px;
  z-index: 100001; /* > header 1000, > bug-reporter 99990 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  max-width: min(92vw, 480px);
}
.lms-toast-stack .lms-toast {
  position: static;
  left: auto;
  bottom: auto;
  transform: translateY(10px);
  max-width: 100%;
}
.lms-toast-stack .lms-toast--visible { transform: translateY(0); }
@media (max-width: 768px) {
  .lms-toast-stack {
    bottom: auto;
    top: calc(var(--header-height, 64px) + 10px + env(safe-area-inset-top, 0px));
  }
  .lms-toast-stack .lms-toast { transform: translateY(-10px); }
  .lms-toast-stack .lms-toast--visible { transform: translateY(0); }
}

/* ------------------------------------------------------------------
   #16 — Bandeau cookies mobile : compact, texte .82rem, boutons côte à
   côte. (La mémorisation accept/refus est gérée dans cours.html.)
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
  #rgpdBanner {
    padding: 10px 12px max(10px, env(safe-area-inset-bottom)) !important;
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
  }
  #rgpdBanner > div { gap: 8px !important; }
  #rgpdBanner > div > div:first-child { min-width: 0 !important; flex-basis: 100%; }
  #rgpdBanner button { padding: 8px 14px !important; font-size: 0.82rem !important; }
}

/* La pastille bug ne doit jamais chevaucher la barre sticky de fin de
   chapitre (pleine largeur) : on la remonte au-dessus quand la barre existe. */
@media (max-width: 768px) {
  body:has(.lms-chapter-nav) .bug-reporter {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}