/* ==========================================================================
   E-Driver — feuille de style (mobile first)
   Palette inspirée de la signalisation routière : bleu nuit, jaune « route prioritaire », rouge « stop ».
   ========================================================================== */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../lib/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("../lib/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../lib/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("../lib/fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("../lib/fonts/poppins-latin-700-normal.woff2") format("woff2"); }

:root {
  --ed-navy: #0f2a4a;
  --ed-navy-2: #1b3d66;
  --ed-yellow: #ffc72c;
  --ed-yellow-soft: #fff4d1;
  --ed-red: #d62828;
  --ed-green: #1f9d6b;
  --ed-green-soft: #e3f6ee;
  --ed-red-soft: #fde8e8;
  --ed-bg: #f4f6f9;
  --ed-card: #ffffff;
  --ed-text: #1d2733;
  --ed-muted: #677487;
  --ed-border: #e3e8ef;
  --ed-radius: 16px;
  --ed-shadow: 0 1px 2px rgba(15, 42, 74, .06), 0 4px 16px rgba(15, 42, 74, .06);
  --bs-primary: var(--ed-navy);
  --bs-primary-rgb: 15, 42, 74;
  --bs-link-color: var(--ed-navy-2);
  --bs-link-color-rgb: 27, 61, 102;
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-bg: var(--ed-bg);
  --bs-body-color: var(--ed-text);
  --bs-border-radius: 12px;
}

html { -webkit-tap-highlight-color: transparent; }
body { min-height: 100vh; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
@media (min-width: 992px) { body { padding-bottom: 0; } }
h1, h2, h3, .ed-display { font-family: "Poppins", var(--bs-body-font-family); font-weight: 700; letter-spacing: -.01em; }
h4, h5, h6 { font-weight: 600; }
.h-section { font-size: 1.05rem; font-weight: 600; color: var(--ed-navy); margin: 1.5rem 0 .75rem; display: flex; align-items: center; gap: .5rem; }

/* ---------- Boutons */
.btn { border-radius: 12px; font-weight: 500; padding: .6rem 1.1rem; }
.btn-lg { padding: .8rem 1.4rem; border-radius: 14px; }
.btn-primary { --bs-btn-bg: var(--ed-navy); --bs-btn-border-color: var(--ed-navy); --bs-btn-hover-bg: var(--ed-navy-2); --bs-btn-hover-border-color: var(--ed-navy-2); --bs-btn-active-bg: #0a1f38; }
.btn-warning, .btn-accent { --bs-btn-bg: var(--ed-yellow); --bs-btn-border-color: var(--ed-yellow); --bs-btn-color: var(--ed-navy); --bs-btn-hover-bg: #f4b800; --bs-btn-hover-border-color: #f4b800; --bs-btn-hover-color: var(--ed-navy); font-weight: 600; }
.btn-outline-primary { --bs-btn-color: var(--ed-navy); --bs-btn-border-color: var(--ed-navy); --bs-btn-hover-bg: var(--ed-navy); --bs-btn-hover-border-color: var(--ed-navy); }
.form-control, .form-select { border-radius: 12px; padding: .65rem .9rem; border-color: var(--ed-border); }
.form-control:focus, .form-select:focus { border-color: var(--ed-navy-2); box-shadow: 0 0 0 .2rem rgba(255, 199, 44, .35); }

/* ---------- Barre supérieure */
.ed-topbar { background: var(--ed-navy); color: #fff; position: sticky; top: 0; z-index: 1030; padding-top: env(safe-area-inset-top); }
.ed-topbar .navbar-brand { color: #fff; font-family: "Poppins"; font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.ed-topbar .navbar-brand img { width: 32px; height: 32px; border-radius: 8px; }
.ed-topbar .nav-link { color: rgba(255,255,255,.78); font-weight: 500; border-radius: 10px; padding: .45rem .8rem !important; }
.ed-topbar .nav-link:hover, .ed-topbar .nav-link.active { color: #fff; background: rgba(255,255,255,.1); }
.ed-topbar .nav-link.active { box-shadow: inset 0 -3px 0 var(--ed-yellow); }
.ed-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; padding: .3rem .65rem; border-radius: 999px; background: rgba(255,199,44,.18); color: var(--ed-yellow); white-space: nowrap; }
.ed-chip.danger { background: rgba(214,40,40,.2); color: #ffb4b4; }
.ed-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--ed-yellow); color: var(--ed-navy); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; }

/* ---------- Barre de navigation inférieure (mobile) */
.ed-bottomnav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030; background: #fff; border-top: 1px solid var(--ed-border); display: flex; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 20px rgba(15,42,74,.06); }
.ed-bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .55rem 0 .5rem; color: var(--ed-muted); text-decoration: none; font-size: .72rem; font-weight: 500; }
.ed-bottomnav a i { font-size: 1.3rem; line-height: 1; }
.ed-bottomnav a.active { color: var(--ed-navy); }
.ed-bottomnav a.active i { color: var(--ed-navy); }
.ed-bottomnav a.active::before { content: ""; position: absolute; top: 0; width: 36px; height: 3px; border-radius: 0 0 3px 3px; background: var(--ed-yellow); }
.ed-bottomnav a { position: relative; }

/* ---------- Cartes */
.ed-card { background: var(--ed-card); border-radius: var(--ed-radius); box-shadow: var(--ed-shadow); border: 1px solid var(--ed-border); }
.ed-card-body { padding: 1.1rem 1.15rem; }
@media (min-width: 768px) { .ed-card-body { padding: 1.4rem 1.5rem; } }
a.ed-card { display: block; color: inherit; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
a.ed-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(15,42,74,.12); }
.ed-hero { background: linear-gradient(135deg, var(--ed-navy) 0%, var(--ed-navy-2) 100%); color: #fff; border-radius: var(--ed-radius); position: relative; overflow: hidden; }
.ed-hero::after { content: ""; position: absolute; right: -70px; bottom: -80px; width: 160px; height: 160px; transform: rotate(45deg); border: 14px solid rgba(255,199,44,.25); border-radius: 18px; }
.ed-hero .text-muted-light { color: rgba(255,255,255,.72); }
.ed-stat { display: flex; align-items: center; gap: .85rem; }
.ed-stat .ico { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.ed-stat .val { font-family: "Poppins"; font-weight: 700; font-size: 1.35rem; line-height: 1.1; }
.ed-stat .lbl { font-size: .8rem; color: var(--ed-muted); }
.bg-navy-soft { background: #e7edf5; color: var(--ed-navy); }
.bg-yellow-soft { background: var(--ed-yellow-soft); color: #9a6b00; }
.bg-green-soft { background: var(--ed-green-soft); color: var(--ed-green); }
.bg-red-soft { background: var(--ed-red-soft); color: var(--ed-red); }
.ed-icon-tile { width: 48px; height: 48px; border-radius: 14px; background: #e7edf5; color: var(--ed-navy); display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0; }
.ed-icon-tile.done { background: var(--ed-green-soft); color: var(--ed-green); }

.progress { height: 8px; border-radius: 99px; background: #e8edf3; }
.progress-bar { background: var(--ed-yellow); border-radius: 99px; }
.progress-bar.bg-success { background: var(--ed-green) !important; }

/* ---------- Liste de leçons */
.ed-lesson-list { list-style: none; padding: 0; margin: 0; }
.ed-lesson-list li + li { border-top: 1px solid var(--ed-border); }
.ed-lesson-list a { display: flex; align-items: center; gap: .85rem; padding: .9rem 1.1rem; color: inherit; text-decoration: none; }
.ed-lesson-list a:hover { background: #f8fafc; }
.ed-step { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--ed-border); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .85rem; color: var(--ed-muted); flex-shrink: 0; }
.ed-step.done { background: var(--ed-green); border-color: var(--ed-green); color: #fff; }

/* ---------- Contenu de leçon */
.ed-lesson { font-size: 1.02rem; line-height: 1.7; }
.ed-lesson h3 { font-size: 1.2rem; margin: 1.75rem 0 .75rem; color: var(--ed-navy); padding-left: .75rem; border-left: 4px solid var(--ed-yellow); }
.ed-lesson h4 { font-size: 1.02rem; margin: 1.4rem 0 .6rem; color: var(--ed-navy-2); }
.ed-lesson ul, .ed-lesson ol { padding-left: 1.25rem; }
.ed-lesson li { margin-bottom: .35rem; }
.ed-lesson .table { font-size: .92rem; background: #fff; }
.ed-lesson .table thead th { background: var(--ed-navy); color: #fff; font-weight: 600; border-color: var(--ed-navy); }
.ed-note { background: var(--ed-yellow-soft); border-left: 4px solid var(--ed-yellow); border-radius: 0 12px 12px 0; padding: .8rem 1rem; margin: 1rem 0; }
.ed-key { background: #e7edf5; border-left: 4px solid var(--ed-navy); border-radius: 0 12px 12px 0; padding: .8rem 1rem; margin: 1rem 0; }
.ed-gallery { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; justify-content: center; }
.ed-gallery .ed-fig { margin: 0; background: #fff; border: 1px solid var(--ed-border); border-radius: 12px; padding: .5rem; display: flex; align-items: center; justify-content: center; }
.ed-gallery img { max-width: 100%; max-height: 170px; object-fit: contain; cursor: zoom-in; }
.ed-caption { text-align: center; color: var(--ed-muted); font-size: .85rem; }
.ed-signs { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-bottom: 1.25rem; }
@media (min-width: 576px) { .ed-signs { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .ed-signs { grid-template-columns: repeat(4, 1fr); } }
.ed-signs figure { margin: 0; background: #fff; border: 1px solid var(--ed-border); border-radius: 12px; padding: .75rem .6rem; text-align: center; }
.ed-signs img { height: 86px; max-width: 100%; object-fit: contain; cursor: zoom-in; }
.ed-signs figcaption { font-size: .8rem; line-height: 1.35; margin-top: .5rem; color: var(--ed-text); }
.ed-support img { width: 100%; border-radius: 10px; border: 1px solid var(--ed-border); margin-bottom: .75rem; }

/* ---------- Épreuve QCM */
.ed-exam-bar { position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 1020; background: rgba(244,246,249,.96); backdrop-filter: blur(6px); padding: .6rem 0; border-bottom: 1px solid var(--ed-border); }
.ed-timer { font-family: "Poppins"; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--ed-navy); color: #fff; padding: .35rem .8rem; border-radius: 10px; display: inline-flex; align-items: center; gap: .4rem; }
.ed-timer.warn { background: var(--ed-red); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .75; } }
.ed-question { display: none; }
.ed-question.active { display: block; animation: fadein .18s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ed-qnum { font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ed-muted); }
.ed-qtext { font-size: 1.15rem; font-weight: 600; line-height: 1.45; margin: .35rem 0 1rem; }
.ed-qimg { display: block; margin: 0 auto 1.1rem; max-height: 230px; max-width: 100%; object-fit: contain; border-radius: 12px; background: #fff; padding: .5rem; border: 1px solid var(--ed-border); }
.ed-choice { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border: 2px solid var(--ed-border); border-radius: 14px; background: #fff; margin-bottom: .65rem; cursor: pointer; transition: border-color .1s, background .1s; user-select: none; }
.ed-choice:hover { border-color: #c4cfdc; }
.ed-choice input { position: absolute; opacity: 0; pointer-events: none; }
.ed-choice .letter { width: 34px; height: 34px; border-radius: 10px; background: #eef2f7; color: var(--ed-navy); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ed-choice:has(input:checked) { border-color: var(--ed-navy); background: #f1f5fb; }
.ed-choice:has(input:checked) .letter { background: var(--ed-yellow); }
.ed-choice:has(input:focus-visible) { outline: 3px solid rgba(255,199,44,.6); }
.ed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: .4rem; }
.ed-grid button { aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--ed-border); background: #fff; font-weight: 600; font-size: .85rem; color: var(--ed-muted); }
.ed-grid button.answered { background: var(--ed-navy); border-color: var(--ed-navy); color: #fff; }
.ed-grid button.current { outline: 3px solid var(--ed-yellow); outline-offset: 1px; }

/* ---------- Résultats */
.ed-score-ring { --p: 0; --c: var(--ed-green); width: 150px; height: 150px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), #e8edf3 0); display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.ed-score-ring > div { width: 118px; height: 118px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ed-score-ring .pct { font-family: "Poppins"; font-weight: 700; font-size: 1.9rem; line-height: 1; }
.ed-corr { border-left: 4px solid var(--ed-border); }
.ed-corr.ok { border-left-color: var(--ed-green); }
.ed-corr.ko { border-left-color: var(--ed-red); }
.ed-corr-choice { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem .65rem; border-radius: 10px; margin-bottom: .3rem; font-size: .95rem; }
.ed-corr-choice.good { background: var(--ed-green-soft); }
.ed-corr-choice.bad { background: var(--ed-red-soft); }
.ed-corr-choice .letter { font-weight: 700; width: 1.4rem; flex-shrink: 0; }

/* ---------- Connexion */
.ed-login { min-height: 100vh; display: flex; flex-direction: column; background: var(--ed-navy); background-image: radial-gradient(circle at 15% 10%, rgba(255,199,44,.18), transparent 40%), radial-gradient(circle at 90% 90%, rgba(255,255,255,.08), transparent 45%); }
.ed-login-road { height: 10px; background: repeating-linear-gradient(90deg, var(--ed-yellow) 0 36px, transparent 36px 60px); opacity: .9; }
.ed-login .ed-card { border: 0; }

/* ---------- Divers */
.badge-soft { font-weight: 600; padding: .4em .7em; border-radius: 8px; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--ed-muted); }
.empty-state i { font-size: 2.5rem; color: #b9c4d2; }
.table > :not(caption) > * > * { padding: .7rem .75rem; }
.ed-lightbox { position: fixed; inset: 0; background: rgba(10, 20, 35, .88); z-index: 2000; display: none; align-items: center; justify-content: center; padding: 1rem; cursor: zoom-out; }
.ed-lightbox.show { display: flex; }
.ed-lightbox img { max-width: 100%; max-height: 92vh; background: #fff; border-radius: 12px; padding: .5rem; }
.ed-install { display: none; }
.ed-install.show { display: flex; }
.ed-offline { display: none; background: var(--ed-red); color: #fff; text-align: center; font-size: .85rem; padding: .35rem; }
body.is-offline .ed-offline { display: block; }

/* ---------- Administration */
.ed-admin-side { background: var(--ed-navy); min-height: 100vh; width: 250px; position: fixed; top: 0; left: 0; color: #fff; padding: 1rem .75rem; overflow-y: auto; }
.ed-admin-side .nav-link { color: rgba(255,255,255,.75); border-radius: 10px; padding: .6rem .8rem; display: flex; align-items: center; gap: .65rem; font-weight: 500; }
.ed-admin-side .nav-link:hover, .ed-admin-side .nav-link.active { background: rgba(255,255,255,.1); color: #fff; }
.ed-admin-side .nav-link.active { box-shadow: inset 3px 0 0 var(--ed-yellow); }
.ed-admin-main { padding: 1rem; }
@media (min-width: 992px) { .ed-admin-main { margin-left: 250px; padding: 1.75rem 2rem; } }
.ed-admin-side .side-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.45); margin: 1.1rem .8rem .35rem; }
.table-ed { background: #fff; border-radius: var(--ed-radius); overflow: hidden; }
.table-ed thead th { background: #f0f3f8; color: var(--ed-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; border-bottom: 0; }
.ed-html-editor { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; min-height: 360px; }
.ed-preview { max-height: 520px; overflow: auto; }
.student-pick { max-height: 360px; overflow: auto; }
.student-pick label { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; border-radius: 10px; cursor: pointer; }
.student-pick label:hover { background: #f4f6f9; }
.min-w-0 { min-width: 0; }
body.no-nav { padding-bottom: 0; }