/* ==========================================================================
   Plateforme LSF — feuille de styles (Mobile First, contraste élevé)
   ========================================================================== */
:root {
  --lsf-primary: #0b5cad;
  --lsf-primary-dark: #073f78;
  --lsf-accent: #ffc233;
  --lsf-stage-bg: #0d1b2a;
  --lsf-stage-fg: #ffffff;
  --lsf-highlight: #ffd84d;
  --lsf-radius: 1rem;
  --lsf-fade-ms: 180ms;
}

body { display: flex; flex-direction: column; min-height: 100vh; font-size: 1.05rem; }
main { flex: 1 0 auto; }
a { text-underline-offset: .15em; }
:focus-visible { outline: 3px solid var(--lsf-accent) !important; outline-offset: 2px; }

.navbar-brand .brand-mark {
  display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: .6rem;
  background: var(--lsf-accent); color: #111; font-weight: 800; margin-right: .5rem;
}
.bg-lsf { background: linear-gradient(135deg, var(--lsf-primary-dark), var(--lsf-primary)); }

.hero { color: #fff; border-radius: var(--lsf-radius); padding: 2.5rem 1.5rem; }
.hero h1 { font-weight: 800; }
@media (min-width: 992px) { .hero { padding: 4rem 3rem; } }

.stat-card { border: 0; border-radius: var(--lsf-radius); box-shadow: 0 .25rem 1rem rgba(0,0,0,.06); }
.stat-card .display-6 { font-weight: 700; }
.course-cover { aspect-ratio: 16/9; object-fit: cover; background: #e9eef5; }
.course-cover-placeholder { aspect-ratio: 16/9; display: grid; place-items: center; background: #e9eef5; color: var(--lsf-primary); font-size: 3rem; }
.sign-thumb { width: 64px; height: 64px; object-fit: contain; background: #fff; border: 1px solid #dee2e6; border-radius: .5rem; }
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #dee2e6; }
.avatar-lg { width: 96px; height: 96px; }
.admin-nav .nav-link { color: #333; border-radius: .5rem; }
.admin-nav .nav-link.active { background: var(--lsf-primary); color: #fff; }
.lesson-content { white-space: pre-line; font-size: 1.15rem; line-height: 1.7; }
.credentials-box { font-family: ui-monospace, monospace; user-select: all; }

/* ---------------------------------------------------------------- Scène LSF */
.lsf-stage {
  position: relative; background: var(--lsf-stage-bg); color: var(--lsf-stage-fg);
  border-radius: var(--lsf-radius); overflow: hidden; display: flex; flex-direction: column;
  min-height: 70vh;
}
.lsf-stage-header {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .75rem 1rem; background: rgba(255,255,255,.06);
}
.lsf-stage-title { font-weight: 700; letter-spacing: .02em; }
.lsf-badge {
  min-width: 3.2rem; height: 3.2rem; padding: 0 .6rem; border-radius: .8rem; display: grid; place-items: center;
  background: var(--lsf-accent); color: #111; font-weight: 800; font-size: 1.6rem;
}
.lsf-progress { height: .45rem; background: rgba(255,255,255,.15); }
.lsf-progress > div { height: 100%; width: 0; background: var(--lsf-highlight); transition: width .2s linear; }

.lsf-sign-area { flex: 1 1 auto; display: grid; place-items: center; padding: 1rem; min-height: 40vh; }
.lsf-sign-frame {
  width: min(78vw, 52vh); aspect-ratio: 1; background: #fff; border-radius: 1.25rem;
  display: grid; place-items: center; overflow: hidden; box-shadow: 0 .5rem 2rem rgba(0,0,0,.35);
}
.lsf-sign-frame img { width: 100%; height: 100%; object-fit: contain; transition: opacity var(--lsf-fade-ms) ease, transform var(--lsf-fade-ms) ease; }
.lsf-sign-frame img.is-hidden { opacity: 0; transform: scale(.96); }
.lsf-sign-text {
  color: #0d1b2a; font-weight: 800; font-size: clamp(2rem, 8vw, 5rem); text-align: center; padding: 1rem;
  word-break: break-word;
}
.lsf-idle { color: #6c7a89; text-align: center; padding: 1rem; font-size: 1.2rem; }

.lsf-subtitle {
  min-height: 4.5rem; padding: .75rem 1rem; text-align: center; background: rgba(0,0,0,.45);
  font-size: clamp(1.4rem, 4.5vw, 2.6rem); font-weight: 600; line-height: 1.3;
}
.lsf-subtitle .w { padding: 0 .12em; border-radius: .25em; transition: background .15s, color .15s; }
.lsf-subtitle .w.done { color: #b9c3cf; }
.lsf-subtitle .w.active { background: var(--lsf-highlight); color: #111; }
.lsf-subtitle .interim { color: #9fb3c8; font-style: italic; }
.lsf-status { padding: .5rem 1rem; font-size: 1.05rem; color: #cfd8e3; display: flex; flex-wrap: wrap; gap: .25rem 1rem; justify-content: space-between; }
.lsf-status strong { color: #fff; }

.lsf-mic-indicator { display: inline-flex; align-items: center; gap: .4rem; font-size: .95rem; }
.lsf-mic-indicator .dot { width: .8rem; height: .8rem; border-radius: 50%; background: #6c757d; }
.lsf-mic-indicator.listening .dot { background: #ff4d4f; animation: lsf-pulse 1.2s infinite; }
@keyframes lsf-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,77,79,.7); } 50% { box-shadow: 0 0 0 .5rem rgba(255,77,79,0); } }

.lsf-controls .btn { min-height: 3rem; }
.btn-mic { font-size: 1.2rem; font-weight: 700; }

/* Plein écran / mode salle de classe (TV ≥ 42", vidéoprojecteur) */
.lsf-stage:fullscreen, .lsf-stage.is-classroom { border-radius: 0; min-height: 100vh; width: 100%; }
.lsf-stage:fullscreen .lsf-sign-frame, .lsf-stage.is-classroom .lsf-sign-frame { width: min(70vw, 62vh); }
.lsf-stage:fullscreen .lsf-subtitle, .lsf-stage.is-classroom .lsf-subtitle { font-size: clamp(2rem, 4vw, 4rem); }
.lsf-stage:fullscreen .lsf-status, .lsf-stage.is-classroom .lsf-status { font-size: clamp(1.1rem, 1.8vw, 1.8rem); }
.lsf-stage:fullscreen .lsf-badge, .lsf-stage.is-classroom .lsf-badge { min-width: 5rem; height: 5rem; font-size: 2.8rem; }
body.display-mode { background: var(--lsf-stage-bg); }
body.display-mode .lsf-stage { min-height: 100vh; border-radius: 0; }

@media (prefers-reduced-motion: reduce) {
  .lsf-sign-frame img, .lsf-progress > div { transition: none; }
  .lsf-mic-indicator.listening .dot { animation: none; }
}
body.display-mode .lsf-stage { padding-bottom: 2.5rem; }