@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Caveat:wght@700&display=swap');

:root {
    --orange: #F27430;
    --orange-dark: #e06817;
    --orange-light: #fff0e8;
    --teal: #007367;
    --teal-dark: #005a50;
    --teal-light: #e0f2ee;
    --night: #121a29;
    --background-grey: #f8f9fa;
}

* { font-family: 'Nunito', sans-serif; }
body { background-color: var(--background-grey); }

/* ── NAVBAR ──────────────────────────────────────── */
.navbar-elearning { background: #fff; border-bottom: 1px solid #e9ecef; height: 56px; }
.navbar-brand-logo { font-size: 1.35rem; font-weight: 800; color: var(--orange) !important; letter-spacing: -0.3px; }
.navbar-brand-separator { border-left: 1px solid #dee2e6; padding-left: .75rem; margin-left: .5rem; font-size: .75rem; color: #6c757d; font-weight: 500; }
.navbar-nav .nav-link { color: #6c757d; font-weight: 500; border-radius: 6px; padding: .4rem .75rem; transition: all .15s; }
.navbar-nav .nav-link:hover { background: var(--background-grey); color: var(--orange); }
.navbar-nav .nav-link.active { color: var(--orange); font-weight: 700; }

/* ── BUTTONS ─────────────────────────────────────── */
.btn-primary { background-color: var(--orange) !important; border-color: var(--orange) !important; color: #fff !important; }
.btn-primary i, .btn-primary .bi { color: #fff !important; }
.btn-primary:hover { background-color: var(--orange-dark) !important; border-color: var(--orange-dark) !important; }
.btn-primary:active { background-color: #c85b10 !important; }
.btn-outline-primary { color: var(--orange) !important; border-color: var(--orange) !important; }
.btn-outline-primary:hover { background-color: var(--orange) !important; color: #fff !important; }
.btn-success { background-color: var(--teal) !important; border-color: var(--teal) !important; }
.btn-success:hover { background-color: var(--teal-dark) !important; }

/* ── CARDS ───────────────────────────────────────── */
.info-card { background: #fff; border: 1px solid #e9ecef; border-radius: 8px; overflow: hidden; transition: all .2s; }
.info-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.07); }
.info-card-header { padding: .75rem 1rem; border-bottom: 2px solid #f0f0f0; display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .9rem; color: #333; }
.info-card-header i { color: var(--orange); }
.card-section { border-left: 4px solid var(--orange); transition: transform .2s, box-shadow .2s; cursor: pointer; }
.card-section:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }

/* ── PAGE TITLE ──────────────────────────────────── */
.page-title { font-size: 1.4rem; font-weight: 800; color: #212529; border-bottom: 2px solid var(--orange); padding-bottom: .6rem; margin-bottom: 1.25rem; }
.page-title i { color: var(--orange); }

/* ── COURSE HERO ─────────────────────────────────── */
.course-hero { border-radius: 12px; border-left: 5px solid; padding: 2rem 2.5rem; }

/* ── THEME BADGES ─────────────────────────────────── */
.badge-theme { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: .25rem .65rem; border-radius: 20px; }
.badge-rse        { background: #e3f4fb; color: #0077a0; }
.badge-management { background: var(--orange-light); color: #c85b10; }
.badge-ethique    { background: #f4e8f4; color: #7a2569; }
.badge-qvct       { background: #fde8ee; color: #c0375a; }
.badge-qse        { background: #f5f7d8; color: #5a6000; }
.badge-diversite  { background: #f4e8f4; color: #7a2569; }

/* ── MODULE ITEMS ─────────────────────────────────── */
.module-item { background: #fff; border: 1px solid #e9ecef; border-radius: 8px; padding: .75rem 1rem; display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; transition: all .2s; }
.module-item:hover { border-color: var(--orange); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(242,116,48,.1); }
.module-item.done    { border-left: 3px solid var(--teal); }
.module-item.current { border-left: 3px solid var(--orange); }
.module-item.locked  { opacity: .55; cursor: default; }
.module-item.locked:hover { transform: none; box-shadow: none; border-color: #e9ecef; }
.module-num { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; flex-shrink: 0; }
.module-num.done    { background: var(--teal); color: #fff; }
.module-num.current { background: var(--orange); color: #fff; }
.module-num.todo    { background: #e9ecef; color: #6c757d; }
.module-num.locked  { background: #e9ecef; color: #adb5bd; }

/* ── KPI CARDS ───────────────────────────────────── */
.kpi-card { background: #fff; border: 1px solid #e9ecef; border-radius: 8px; padding: .85rem 1rem; }
.kpi-label { font-size: .7rem; color: #6c757d; margin-bottom: .2rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.kpi-value { font-size: 1.6rem; font-weight: 800; color: #212529; line-height: 1; }
.kpi-sub   { font-size: .7rem; color: #adb5bd; margin-top: .2rem; }
.kpi-orange { color: var(--orange); }
.kpi-teal   { color: var(--teal); }

/* ── FORMS ───────────────────────────────────────── */
.form-control:focus, .form-select:focus { border-color: var(--orange); box-shadow: 0 0 0 .25rem rgba(242,116,48,.25); }
.form-label { font-weight: 600; font-size: .875rem; }

/* ── ALERTS ──────────────────────────────────────── */
.alert-orange { background: var(--orange-light); border: 1px solid #fcd7c0; border-radius: 6px; color: #c85b10; }

/* ── SCORE COLORS ─────────────────────────────────── */
.score-good { color: var(--teal); font-weight: 700; }
.score-mid  { color: var(--orange); font-weight: 700; }
.score-bad  { color: #dc3545; font-weight: 700; }
.score-none { color: #adb5bd; }

/* ── AVATAR ──────────────────────────────────────── */
.avatar-initiales { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; color: #fff; flex-shrink: 0; }

/* ── PLAYER SIDEBAR ──────────────────────────────── */
.player-sidebar { background: #fff; border-right: 1px solid #e9ecef; }
.mod-nav-item { display: flex; align-items: flex-start; gap: .6rem; padding: .6rem .75rem; border-radius: 6px; border-left: 3px solid transparent; cursor: pointer; margin-bottom: 2px; transition: all .1s; }
.mod-nav-item:hover { background: var(--background-grey); }
.mod-nav-item.active { background: var(--orange-light); border-left-color: var(--orange); }
.mod-nav-item.done   { border-left-color: var(--teal); }
.mod-nav-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #dee2e6; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .6rem; }
.mod-nav-dot.done    { background: var(--teal); border-color: var(--teal); color: #fff; }
.mod-nav-dot.current { background: var(--orange); border-color: var(--orange); color: #fff; }

/* ── PLAYER CONTENT ──────────────────────────────── */
.bg-player { background: #1a1a2e; color: #e0e0e0; }
.player-bar { background: #fff; }
.player-min-h { min-height: calc(100vh - 56px); }

/* ── TEXT COLORS ─────────────────────────────────── */
.text-orange { color: var(--orange); }
.text-teal   { color: var(--teal); }

/* ── FONT SIZE SCALE (sub-rem, complète Bootstrap fs-1..6) ─── */
.text-2xs { font-size: .68rem; }
.text-xs  { font-size: .75rem; }
.text-sm  { font-size: .8rem; }
/* .875rem = Bootstrap .small  |  1rem = Bootstrap base */

/* ── AVATAR ──────────────────────────────────────── */
.avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; flex-shrink: 0; }
.avatar-sm { width: 34px; height: 34px; font-size: .7rem; }
.avatar-md { width: 56px; height: 56px; font-size: 1.1rem; }
.avatar-lg { width: 72px; height: 72px; font-size: 1.3rem; }
.avatar-teal   { background-color: var(--teal); }
.avatar-orange { background-color: var(--orange); }

/* ── COURSE HERO ─────────────────────────────────── */
.course-title       { font-size: 2.2rem; font-weight: 800; font-family: 'Nunito', sans-serif; line-height: 1.15; }
.course-subtitle    { font-family: 'Caveat', cursive; font-size: 1.4rem; font-weight: 700; color: #1a1a1a; }
.course-description { font-size: .95rem; color: #1a1a1a; }

/* ── LABELS & META ───────────────────────────────── */
.label-overline { font-size: .7rem; text-transform: uppercase; letter-spacing: .5px; }
.meta-text      { font-size: .75rem; color: #6c757d; }
.navbar-user-label { font-size: .85rem; }

/* ── BADGES STATUT QUIZ ──────────────────────────── */
.badge-validated     { background: var(--teal-light); color: var(--teal); }
.badge-not-validated { background: #fce8e8; color: #a32d2d; }

/* ── CARD FOOTER ─────────────────────────────────── */
.card-footer-actions { background: #fafafa; border-top: 1px solid #e9ecef; }

/* ── PROGRESS ────────────────────────────────────── */
.progress-bar-teal   { background-color: var(--teal); }
.progress-bar-orange { background-color: var(--orange); }

/* ── UTILITIES ───────────────────────────────────── */
.cursor-pointer { cursor: pointer; }
.btn-outline-orange { color: var(--orange); border: 1px solid var(--orange); background: transparent; }
.btn-outline-orange:hover { background: var(--orange); color: #fff; }
.btn-outline-teal { color: var(--teal); border: 1px solid var(--teal); background: transparent; }
.btn-outline-teal:hover { background: var(--teal); color: #fff; }
.min-h-player { min-height: 400px; }
.login-app-label { font-size: .8rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.player-wrapper { min-height: calc(100vh - 56px); }
.sidebar-module { width: 260px; }

/* ── LECTEUR VIDÉO ────────────────────────────────
   Borne la taille du média pour qu'il tienne dans la fenêtre
   (navbar 56px + topbar) sans provoquer de scroll de page. */
.media-stage { overflow: hidden; }
.media-fit { max-width: 100%; max-height: calc(100vh - 120px); object-fit: contain; }
/* Conserve le ratio 16:9 tout en limitant la hauteur à la fenêtre. */
.media-ratio { width: 100%; max-width: calc((100vh - 120px) * 16 / 9); }

/* ── DROPZONE VIDÉO ──────────────────────────────── */
.dropzone { border: 2px dashed #dee2e6; border-radius: 8px; padding: 2.5rem 1.5rem; text-align: center; cursor: pointer; transition: all .2s; position: relative; background: #fff; }
.dropzone:hover, .dropzone.drag-over { border-color: var(--orange); background: var(--orange-light); }
.dropzone-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.dropzone-icon { font-size: 2.5rem; color: #adb5bd; display: block; margin-bottom: .75rem; transition: color .2s; }
.dropzone:hover .dropzone-icon, .dropzone.drag-over .dropzone-icon { color: var(--orange); }
.dropzone-text { font-weight: 700; font-size: .95rem; }
.dropzone-subtext { font-size: .875rem; color: #6c757d; margin-top: .25rem; }
.dropzone-formats { font-size: .72rem; color: #adb5bd; margin-top: .5rem; }
.dropzone-preview { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; background: var(--teal-light); border-radius: 8px; border: 1px solid #b5e0d7; }
.dropzone-preview-name { font-size: .875rem; font-weight: 600; color: var(--teal); flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone-preview-remove { background: none; border: none; padding: 0; color: #6c757d; cursor: pointer; font-size: 1.1rem; line-height: 1; flex-shrink: 0; }
.dropzone-preview-remove:hover { color: #dc3545; }
.video-source-btn.active { background: var(--orange) !important; border-color: var(--orange) !important; color: #fff !important; }

/* ── QUIZ CHOICES ────────────────────────────────── */
.choice-label { cursor: pointer; transition: all .15s; }
.choice-label:hover { border-color: var(--orange) !important; background: var(--orange-light) !important; }

/* ── BADGE STATUTS ───────────────────────────────── */
.badge-in-progress { background: var(--orange-light); color: var(--orange); }
.badge-question    { background: var(--orange); color: #fff; }

/* ── FORM ACCENT ─────────────────────────────────── */
.accent-orange { accent-color: var(--orange); }

/* ── PLAYER CONTENT ──────────────────────────────── */
.player-content-text { font-size: 1rem; line-height: 1.8; max-width: 760px; }

/* ── ICON SIZES ──────────────────────────────────── */
.icon-hero { font-size: 3rem; }
.icon-xl   { font-size: 2.5rem; }
.icon-lg   { font-size: 2rem; }

/* ── DRAG & DROP PAGES ───────────────────────────── */
.page-row[draggable="true"] { cursor: grab; }
.page-row.drag-over-row { outline: 2px dashed var(--orange); background: var(--orange-light); }

/* ── PROMO AUTOCOMPLETE ──────────────────────────── */
.promo-ac-list { border-color: #dee2e6; }
.promo-ac-item { cursor: pointer; transition: background .12s; }
.promo-ac-item:hover, .promo-ac-item.ac-active { background: var(--orange-light); color: var(--orange-dark); }

/* ── EXERCICE « RELIER LES ÉLÉMENTS » (lecteur apprenant) ──────────── */
.matching-left {
    display: flex; align-items: center;
    min-width: 40%; padding: .6rem .9rem;
    background: rgba(255,255,255,.1); color: #fff; font-weight: 600;
    border-radius: 8px;
}
.matching-slot {
    display: flex; align-items: center; min-height: 46px; padding: .35rem;
    border: 2px dashed rgba(255,255,255,.35); border-radius: 8px;
    transition: border-color .15s, background .15s;
}
.matching-slot:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.matching-slot.filled { border-style: solid; border-color: rgba(255,255,255,.5); }
.matching-slot.correct   { border-color: var(--teal);  background: rgba(0,115,103,.25); border-style: solid; }
.matching-slot.incorrect { border-color: #dc3545;      background: rgba(220,53,69,.2);  border-style: solid; }

.matching-bank {
    display: flex; flex-direction: column; gap: .5rem;
    padding: .75rem; min-height: 46px;
    background: rgba(255,255,255,.04); border-radius: 8px;
}
.matching-chip {
    padding: .5rem .8rem; width: 100%;
    background: #fff; color: #212529; border-radius: 8px;
    cursor: grab; user-select: none; transition: box-shadow .15s, transform .1s;
}
.matching-slot .matching-chip { width: 100%; }
.matching-chip:hover { box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.matching-chip:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.matching-chip.dragging { opacity: .5; }
.matching-chip.selected { outline: 2px solid var(--orange); box-shadow: 0 0 0 .2rem rgba(242,116,48,.35); }

.matching-result { font-weight: 700; }
.matching-result.success { color: #58d6a8; }
.matching-result.partial { color: var(--orange); }
.promo-ac-item[data-id="0"] { border-bottom: 1px solid #f0f0f0; }