:root{--ink:#123b42;--teal:#005362;--paper:#f6f3ec;--clay:#b86440;--muted:#888;--border:#eee;--line:#eee}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 'Segoe UI',sans-serif}
aside.site-sidebar{position:fixed;width:245px;inset:0 auto 0 0;background:#063b43;color:white;padding:35px 24px}
.brand{font-size:36px;font-weight:700;color:white;text-decoration:none}.brand span{font-size:47px;vertical-align:middle}
.tagline{font-family:"Segoe Script",cursive;font-size:18px;color:#efd2ac;margin-top:10px}
nav.site-nav{margin-top:48px}
nav.site-nav a{display:block;color:white;text-decoration:none;padding:12px 18px;border-radius:9px;margin:8px 0}
nav.site-nav a:hover, nav.site-nav .active{background:#28565e}
main{margin-left:245px;padding:36px 5%;max-width:1550px}
.card{background:#fffdf9;border:1px solid #e5e1d8;border-radius:18px;padding:30px;box-shadow:0 5px 20px rgba(0,0,0,0.05)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;color:var(--clay);text-transform:uppercase}
button, .button{border:0;border-radius:9px;background:var(--teal);color:white;padding:12px 22px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block}
.button.secondary{background:#efece5;color:var(--ink)}

/* Interface Scribe - Navigation Arborescente & Fil d'Ariane */
body:has(.lesson-layout) .site-sidebar { display: none; }
body:has(.lesson-layout) main { margin-left: 0; padding: 0; max-width: none; }

.lesson-layout { display: flex; min-height: 100vh; background: #fafafa; }
.lesson-sidebar { width: 320px; background: #fcfcfc; border-right: 1px solid #eee; padding: 40px 0; overflow-y: auto; position: sticky; top: 0; height: 100vh; flex-shrink: 0; }
.sidebar-level-label { padding: 0 30px 20px; color: #888; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; }

.sidebar-unit { margin-bottom: 2px; }
.sidebar-unit-header { display: flex; align-items: center; padding: 12px 30px; cursor: pointer; transition: background 0.2s; gap: 10px; }
.sidebar-unit-header:hover { background: #f5f5f5; }
.sidebar-unit-header .chevron { color: #ccc; transition: transform 0.3s; font-size: 12px; }
.sidebar-unit.active .sidebar-unit-header .chevron { transform: rotate(90deg); color: #333; }
.sidebar-unit-header .status-icon { font-size: 18px; }
.sidebar-unit-header .title { font-size: 16px; color: #444; font-weight: 500; flex: 1; }
.sidebar-unit.active .sidebar-unit-header .title { font-weight: 700; color: #000; }

.sidebar-lessons-list { padding: 5px 0 10px 60px; display: none; }
.sidebar-unit.active .sidebar-lessons-list { display: block; }

.sidebar-lesson-link { display: flex; align-items: center; padding: 8px 15px; color: #777; text-decoration: none; font-size: 14.5px; border-radius: 8px 0 0 8px; margin: 2px 0; transition: all 0.2s; gap: 8px; }
.sidebar-lesson-link:hover { color: var(--teal); background: #f9f9f9; }
.sidebar-lesson-link.active { background: #f0f4f4; color: var(--teal); font-weight: 700; border-right: 3px solid var(--teal); }
.sidebar-lesson-link.completed { color: #2ecc71; }
.sidebar-lesson-link.locked { color: #bbb; cursor: default; pointer-events: none; }

.lesson-main { flex: 1; padding: 40px 5%; display: flex; flex-direction: column; align-items: center; }
.breadcrumb-nav { width: 100%; max-width: 900px; display: flex; align-items: center; gap: 12px; color: #999; font-size: 14px; margin-bottom: 40px; }
.breadcrumb-nav .sep { font-size: 12px; color: #ddd; }
.breadcrumb-nav .current { color: #333; font-weight: 600; }

.lesson-card-ui { background: white; border: 1px solid #f0f0f0; border-radius: 24px; padding: 70px 50px; box-shadow: 0 4px 25px rgba(0,0,0,0.02); width: 100%; max-width: 900px; min-height: 480px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.lesson-card-ui h2 { font-size: 20px; color: #666; margin-bottom: 40px; font-weight: 500; text-align: center; }

/* Locked View */
.locked-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 20px; color: #888; }
.locked-card .icon-padlock { font-size: 80px; color: #eee; margin-bottom: 10px; }
.locked-card h3 { color: #444; margin: 0; }

.nav-controls { width: 100%; max-width: 900px; margin: 30px auto 0; display: flex; justify-content: center; }
.nav-btn-next { min-width: 160px; height: 50px; padding: 0 30px; border-radius: 12px; background: white; border: 1px solid #eee; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,0.06); transition: all 0.2s; text-decoration: none; color: #444; font-weight: 600; }
.nav-btn-next:hover { transform: translateY(-2px); box-shadow: 0 5px 18px rgba(0,0,0,0.1); border-color: var(--teal); color: var(--teal); }

.audio-btn { background: #f8f9fa; border: 1px solid #ddd; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; color: var(--teal); }

@media(max-width: 900px) {
    .lesson-sidebar { display: none; }
    .lesson-main { padding: 20px; }
}