/* =====================================================================
   custom.css — Academy Bel Rive
   Surcouche premium par-dessus Tailwind CDN.
   Charte : rouge #D74232 · noir #040404
   ===================================================================== */

:root {
  --br-red: #D74232;
  --br-red-dark: #b8362a;
  --br-black: #040404;
  --br-ink: #15140f;
  --br-paper: #f7f5f1;
  --br-paper-2: #efece5;
  --br-line: #e2ded5;
  --br-muted: #8a857b;
  --br-green: #2f9e5e;
}

* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--br-paper);
  color: var(--br-ink);
}

.font-serif-br {
  font-family: "Cormorant Garamond", Georgia, serif;
  letter-spacing: 0.01em;
}

/* --- Accents --------------------------------------------------------- */
.text-br-red { color: var(--br-red); }
.bg-br-red { background-color: var(--br-red); }
.bg-br-black { background-color: var(--br-black); }
.border-br-red { border-color: var(--br-red); }

.btn-br {
  background: var(--br-red);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: background .18s ease, transform .05s ease, opacity .18s ease;
}
.btn-br:hover:not(:disabled) { background: var(--br-red-dark); }
.btn-br:active:not(:disabled) { transform: translateY(1px); }
.btn-br:disabled { opacity: .35; cursor: not-allowed; }

.btn-ghost {
  border: 1px solid var(--br-line);
  color: var(--br-ink);
  background: transparent;
  transition: border-color .18s ease, background .18s ease;
}
.btn-ghost:hover:not(:disabled) { border-color: var(--br-red); color: var(--br-red); }
.btn-ghost:disabled { opacity: .35; cursor: not-allowed; }

/* --- Sidebar --------------------------------------------------------- */
.nav-video {
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  border-left: 2px solid transparent;
}
.nav-video:hover { background: rgba(255,255,255,0.04); }
.nav-video.is-active {
  background: rgba(215,66,50,0.12);
  border-left-color: var(--br-red);
  font-weight: 600;
}
.nav-video.is-seen .nav-check { color: var(--br-green); }
.nav-video.is-locked { opacity: .4; cursor: not-allowed; pointer-events: none; }

.chapter-locked { opacity: .4; pointer-events: none; }

/* --- Video frame ----------------------------------------------------- */
.video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Progress bar under video --------------------------------------- */
.vid-progress-track { height: 4px; background: var(--br-line); border-radius: 99px; overflow: hidden; }
.vid-progress-fill { height: 100%; width: 0; background: var(--br-red); transition: width .3s ease; }

/* --- Custom checkbox ------------------------------------------------- */
.br-check {
  appearance: none;
  width: 22px; height: 22px;
  border: 2px solid var(--br-line);
  border-radius: 5px;
  display: inline-grid; place-content: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  flex: 0 0 auto;
}
.br-check:disabled { opacity: .4; cursor: not-allowed; }
.br-check:checked { background: var(--br-green); border-color: var(--br-green); }
.br-check:checked::after {
  content: "";
  width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-1px);
}

/* --- Modal ----------------------------------------------------------- */
.br-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(4,4,4,0.82);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; z-index: 50;
}
.br-modal {
  background: #fff;
  max-width: 620px; width: 100%;
  border-radius: 12px;
  border-top: 4px solid var(--br-red);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  max-height: 92vh; overflow-y: auto;
}

/* --- QCM ------------------------------------------------------------- */
.qcm-option {
  border: 1px solid var(--br-line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.qcm-option:hover { border-color: var(--br-red); }
.qcm-option.is-selected { border-color: var(--br-red); background: rgba(215,66,50,0.06); }
.qcm-radio {
  width: 18px; height: 18px; border-radius: 99px;
  border: 2px solid var(--br-muted);
  flex: 0 0 auto; display: inline-grid; place-content: center;
}
.qcm-option.is-selected .qcm-radio { border-color: var(--br-red); }
.qcm-option.is-selected .qcm-radio::after {
  content: ""; width: 9px; height: 9px; border-radius: 99px; background: var(--br-red);
}

/* --- Utility --------------------------------------------------------- */
.hidden-br { display: none !important; }
.fade-in { animation: brFade .35s ease; }
@keyframes brFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.scrollbar-thin::-webkit-scrollbar { width: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 99px; }