/**
 * UNIVGA PWA — Interface de leçon (mode app installé)
 * Reskin de lesson-interface.php quand l'app tourne en standalone :
 * barre d'app fixe avec retour, en-tête épuré, onglets en pilules scrollables,
 * boutons d'action (PDF / audio / plein écran) en rangée app, pleine largeur.
 * Tout est neutralisé hors standalone (classe ajoutée par app-shell.js).
 */

:root {
  --uvgl-blue: #0B4F8C;
  --uvgl-blue-2: #1565C0;
  --uvgl-ink: #16263a;
  --uvgl-bar-h: 56px;
}

/* ───────────────────────── Barre d'app fixe ───────────────────────── */
.univga-lessonbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  gap: 12px;
  height: calc(var(--uvgl-bar-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 14px 0;
  background: linear-gradient(135deg, var(--uvgl-blue) 0%, var(--uvgl-blue-2) 100%);
  color: #fff;
  box-shadow: 0 4px 18px rgba(11, 79, 140, 0.28);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.univga-lessonbar__back {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.univga-lessonbar__back:active {
  background: rgba(255, 255, 255, 0.32);
  transform: scale(0.92);
}

.univga-lessonbar__titles {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
}
.univga-lessonbar__title {
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.univga-lessonbar__sub {
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.82;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.univga-lessonbar__pct {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}

/* ───────────────── Décalage du contenu sous la barre ───────────────── */
html.univga-pwa-lesson body {
  padding-top: calc(var(--uvgl-bar-h) + env(safe-area-inset-top, 0px)) !important;
  background: #eef2f7 !important;
}

/* Masquer la salutation « Bonjour … » (déjà présente sur l'accueil de l'app) */
html.univga-pwa-lesson .welcome-user-section {
  display: none !important;
}

/* Conteneur pleine largeur, sans marges arrondies façon « page web » */
html.univga-pwa-lesson .univga-lesson-container,
html.univga-pwa-lesson #lesson-content-wrapper {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* En-tête lourd du site (carte info + salutation + carte « déverrouiller ») :
   entièrement masqué en app. La progression et le titre sont repris dans la
   barre d'app → interface épurée. */
html.univga-pwa-lesson .univga-header-modern {
  display: none !important;
}

/* Colonne unique, pleine largeur (pas de mise en page « web » à 2 colonnes).
   Flex en colonne : le CONTENU d'abord, la sidebar ensuite (ordre forcé car
   la sidebar précède le contenu dans le DOM). */
html.univga-pwa-lesson .univga-main-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
html.univga-pwa-lesson .univga-content {
  order: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-top: 6px !important;
}

/* Sidebar (Programme + Assistante Virtuelle Auria) : pleine largeur, repliée,
   placée SOUS le contenu — accessible mais discrète. */
html.univga-pwa-lesson .univga-sidebar {
  order: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 16px 0 0 !important;
}

/* ───────────────────────── Onglets en pilules ───────────────────────── */
html.univga-pwa-lesson .univga-tabs-list {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  list-style: none !important;
  position: sticky;
  top: calc(var(--uvgl-bar-h) + env(safe-area-inset-top, 0px));
  z-index: 60;
  background: #ffffff;
  border-bottom: 1px solid #eef2f7;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
html.univga-pwa-lesson .univga-tabs-list::-webkit-scrollbar {
  display: none;
}
html.univga-pwa-lesson .univga-tabs-list li {
  flex: 0 0 auto !important;
  margin: 0 !important;
}
html.univga-pwa-lesson .univga-tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  border: 1px solid #e6ecf3 !important;
  border-radius: 999px !important;
  padding: 9px 15px !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: var(--uvgl-ink) !important;
  background: #f5f8fc !important;
  box-shadow: none !important;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
html.univga-pwa-lesson .univga-tab-btn.active {
  background: linear-gradient(135deg, var(--uvgl-blue), var(--uvgl-blue-2)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(11, 79, 140, 0.28) !important;
}
html.univga-pwa-lesson .univga-tab-btn:active {
  transform: scale(0.96);
}

/* ─────────────── Boutons d'action (PDF / audio / plein écran) ─────────────── */
html.univga-pwa-lesson .univga-lesson-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
html.univga-pwa-lesson .univga-lesson-actions::-webkit-scrollbar {
  display: none;
}
html.univga-pwa-lesson .univga-action-btn {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--uvgl-blue) !important;
  background: #e9f0f8 !important;
  box-shadow: none !important;
}
html.univga-pwa-lesson .univga-action-btn:active {
  background: #d9e6f4 !important;
}

/* Sélecteur de langue : compact */
html.univga-pwa-lesson .univga-lang-select {
  border-radius: 12px !important;
  padding: 9px 12px !important;
}

/* Confort de lecture du contenu Essentiel */
html.univga-pwa-lesson .univga-lesson-content {
  padding-left: 16px !important;
  padding-right: 16px !important;
}