/**
 * Course Detail — d314.io v5
 * Tokens dashboard indigo | Remplace palette Vercel bleue
 */

/* ============================================================
   MASQUER LE DESIGN TUTOR LMS PAR DÉFAUT
   ============================================================ */
.single-courses .tutor-wrap.tutor-full-width-course-top { display:none !important; }
.single-courses .tutor-course-details-page { background:transparent !important; padding:0 !important; }

/* Cache le contenu natif immédiatement — remplacé par le JS */
.single-courses .tutor-wrap {
    opacity: 0 !important;
    min-height: 80vh;
    background: #0f1014;
    transition: none !important;
}

/* ============================================================
   OVERRIDE BOUTONS NATIFS TUTOR LMS
   ============================================================ */
.single-courses .tutor-btn,
.single-courses [class*="tutor-btn"],
.single-courses .tutor-course-enroll-btn,
.single-courses .tutor-enrollment-box button,
.single-courses .tutor-course-enrollment-box .tutor-btn {
    border-radius:6px !important;
    color: #ececef !important;
    background: #e2a94a !important;
    border: 1px solid rgba(226, 169, 74,.5) !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

/* ============================================================
   TOKENS V5
   ============================================================ */
.single-courses {
    --bg0:#0f1014; --bg1:#16171c; --bg2:#1b1c22; --bg3:#1b1c22;
    --b0:rgba(255,255,255,.055); --b1:rgba(255,255,255,.03);
    --t0:#ececef; --t1:#9b9ca6; --t2:#5c5d68; --t3:#24252e;
    --math:#e2a94a; --math-b:rgba(226, 169, 74,.13); --math-d:rgba(226, 169, 74,.35);
    --cyan:#22d3ee; --grn:#10b981; --grn-b:rgba(16,185,129,.12); --grn-d:rgba(16,185,129,.3);
    --amb:#f59e0b;
    --r:6px;  /* etait 10px : la direction Instrument tient les angles a 5-6 px */
    --sans:'Plus Jakarta Sans',system-ui,sans-serif;
    --mono:'JetBrains Mono',monospace;
    --transition-fast:0.15s cubic-bezier(.4,0,.2,1);
    --transition-medium:0.3s cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   BACKGROUND GLOBAL
   ============================================================ */
.single-courses body {
    background:#0f1014 !important;
    color:#ececef !important;
    font-family:'Plus Jakarta Sans',system-ui,sans-serif !important;
    overflow-x:hidden;
}
html { overflow-x:hidden; }

.modern-lms-background {
    position:fixed; top:0; left:0; width:100%; height:100%;
    z-index:-1; background:#0f1014;
    pointer-events:none;
}
/* Le halo ambre de 600 px de haut, ancre en haut au centre, a saute. C'etait la
   lueur encore visible apres le retrait des autres : elle vivait sur un
   pseudo-element d'un calque fixe en z-index -1, donc invisible a un scan qui ne
   regarde que les elements eux-memes. La direction Instrument est plate : le fond
   est un aplat, point. */

/* ============================================================
   CONTAINER PRINCIPAL
   ============================================================ */
.modern-course-container {
    max-width:1200px; margin:0 auto;
    padding:100px 20px 60px;
    position:relative; z-index:10;
    width:100%; box-sizing:border-box; overflow-x:hidden;
}

/* ============================================================
   HEADER DU COURS
   ============================================================ */
.modern-course-header {
    background:transparent; border:0;
    border-bottom:1px solid var(--b0);
    border-radius:0; padding:0 0 32px;
    margin-bottom:36px; text-align:left;
    position:relative;
}
/* Le halo radial ambre qui couvrait tout l'en-tête a sauté : la direction est
   plate, et un voile chaud sur fond sombre se lit comme une lueur. */

.modern-course-title {
    font-family:var(--sans);
    font-size:clamp(28px,5vw,48px);
    font-weight:800; line-height:1.1; letter-spacing:-.03em;
    color:var(--t0) !important; margin-bottom:16px;
    background:none !important; -webkit-text-fill-color:var(--t0) !important;
    position:relative; z-index:1;
}
.modern-course-subtitle {
    color:var(--t1); font-size:14px; margin-bottom:24px;
    line-height:1.65; position:relative; z-index:1;
}

.modern-course-meta { justify-content:flex-start !important; }
.modern-course-actions { justify-content:flex-start !important; }
.modern-course-meta {
    display:flex; justify-content:center; gap:24px;
    margin-bottom:32px; flex-wrap:wrap;
    position:relative; z-index:1;
}
.meta-item { display:flex; align-items:center; gap:8px; color:var(--t1); font-size:12.5px; font-weight:500; }
.meta-icon { color:var(--math); font-size:14px; }

.modern-course-actions {
    display:flex; justify-content:center; gap:10px;
    flex-wrap:wrap; position:relative; z-index:1;
}

/* Boutons */
.modern-btn {
    all:unset; cursor:pointer; box-sizing:border-box;
    padding:10px 20px; border-radius:6px;
    font-family:var(--mono); font-size:12px; font-weight:700;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast);
    text-decoration:none; display:inline-flex; align-items:center; gap:7px;
}
.single-courses .btn-primary {
    color:#ececef !important; background:var(--math) !important;
    border:1px solid rgba(226, 169, 74,.5) !important;
    border-radius:6px !important;
}
.single-courses .btn-primary:hover { background:#d69a3f !important; transform:translateY(-1px); box-shadow:0 6px 20px rgba(226, 169, 74,.3); }
.single-courses .btn-secondary {
    color:var(--t1) !important; background:transparent !important;
    border:1px solid var(--b0) !important; border-radius:6px !important;
}
.single-courses .btn-secondary:hover { color:var(--t0) !important; border-color:rgba(255,255,255,.15) !important; background:rgba(255,255,255,.04) !important; }

/* ============================================================
   CONTENU PRINCIPAL
   ============================================================ */
.modern-course-content {
    display:grid; grid-template-columns:minmax(0,1fr) 380px;
    gap:24px; align-items:flex-start;
    width:100%; box-sizing:border-box; overflow:hidden;
}

/* ============================================================
   SECTION PRINCIPALE
   ============================================================ */
.course-main {
    background:transparent; border:0;
    border-radius:0; padding:0;
    min-height:0; position:relative;
    width:100%; min-width:0; box-sizing:border-box; overflow:hidden;
}

/* ============================================================
   ONGLETS
   ============================================================ */
.course-nav {
    background:transparent; border:0; border-bottom:1px solid var(--b0);
    border-radius:0; padding:0;
    display:flex; gap:4px; margin-bottom:28px; width:100%;
}
.nav-link {
    all:unset !important; cursor:pointer !important; box-sizing:border-box !important;
    padding:9px 16px !important; border-radius:6px !important;
    color:var(--t1) !important; text-decoration:none !important;
    font-family:var(--mono) !important; font-weight:600 !important; font-size:11.5px !important;
    transition: background var(--transition-fast) !important, border-color var(--transition-fast) !important, color var(--transition-fast) !important, transform var(--transition-fast) !important, opacity var(--transition-fast) !important, box-shadow var(--transition-fast) !important;
    flex:1 !important; text-align:center !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:6px !important;
}
.nav-link:hover  { background:rgba(255,255,255,.05) !important; color:var(--t0) !important; }
.nav-link.active { background:var(--math) !important; color:#171208 !important; }
.nav-link::before,.nav-link::after { display:none !important; content:none !important; }

/* ============================================================
   BARRE DE PROGRESSION
   ============================================================ */
.progress-card {
    background:var(--math-b); border:1px solid var(--math-d);
    border-radius:6px; padding:20px; margin-bottom:28px;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast);
}
.progress-card:hover { background:rgba(226, 169, 74,.18); }
.progress-info {
    display:flex; justify-content:space-between; margin-bottom:10px;
    color:var(--t1); font-family:var(--mono); font-size:10.5px; font-weight:600;
}
.progress-bar-container {
    height:4px; background:rgba(255,255,255,.06);
    border-radius:2px; overflow:hidden;
}
.progress-bar-fill {
    height:100%; background:linear-gradient(90deg,var(--math),var(--cyan));
    border-radius:2px; transition:width .5s ease;
}

/* ============================================================
   ÉTAT D'INSCRIPTION
   ============================================================ */
.enrollment-status {
    background:var(--math-b); border:1px solid var(--math-d);
    border-radius:6px; padding:14px 16px; margin-bottom:18px;
    display:flex; align-items:center; gap:10px;
    color:var(--math); font-family:var(--mono); font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:.06em;
}
.status-icon { font-size:16px; }

.course-content-title {
    font-size:clamp(18px,3vw,24px); font-weight:800;
    color:var(--t0); margin-bottom:24px; letter-spacing:-.015em;
}

/* ============================================================
   ACCORDÉON
   ============================================================ */
.modern-accordion { display:flex; flex-direction:column; gap:8px; width:100%; }

.accordion-item {
    background:var(--bg3); border:1px solid var(--b0);
    border-radius:var(--r); overflow:hidden;
    transition:border-color var(--transition-fast);
}
.accordion-item:hover { border-color:var(--math-d); }

.accordion-header {
    all:unset !important; cursor:pointer !important; box-sizing:border-box !important;
    padding:16px 20px !important; width:100% !important;
    font-family:var(--sans) !important; font-size:13.5px !important; font-weight:700 !important;
    color:var(--t0) !important; text-align:left !important;
    display:flex !important; justify-content:space-between !important; align-items:center !important;
    background:rgba(255,255,255,.02) !important;
    transition:background var(--transition-fast) !important;
}
.accordion-header:hover { background:rgba(226, 169, 74,.06) !important; }
.accordion-header::after {
    content:'' !important;
    display:inline-block !important;
    width:16px !important; height:16px !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e2a94a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:contain !important;
    flex-shrink:0 !important;
    transition:transform var(--transition-medium) !important;
}
.accordion-header.active::after { transform:rotate(180deg) !important; }

.lesson-count {
    font-family:var(--mono); font-size:9.5px; font-weight:700;
    color:var(--t2); background:rgba(255,255,255,.04);
    padding:3px 9px; border-radius:4px;
    margin-left:auto; margin-right:12px;
    border:1px solid var(--b0);
}

.accordion-content { padding:0 20px 16px; display:none; }
.accordion-content.active { display:block; animation:cd-slide .3s ease; }
@keyframes cd-slide { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

/* ============================================================
   LISTE DES LEÇONS
   ============================================================ */
.lesson-list { list-style:none; margin:0; padding:0; }

.lesson-item {
    padding:12px 0; border-bottom:1px solid var(--b1);
    display:flex; align-items:center; justify-content:space-between;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast);
}
.lesson-item:last-child { border-bottom:none; }
.lesson-item:hover { padding-left:8px; background:rgba(226, 169, 74,.04); border-radius:6px; }
.lesson-item.completed { background:rgba(16,185,129,.03); }
.lesson-item.completed:hover { background:rgba(16,185,129,.06); }
.lesson-item.completed .lesson-icon  { color:var(--grn); }
.lesson-item.completed .lesson-title { color:var(--t2); text-decoration:line-through; }
.lesson-item.completed .lesson-status { color:var(--grn); }
.lesson-item.locked { opacity:.45; }
.lesson-item.locked .lesson-title { color:var(--t2); }

.lesson-info { display:flex; align-items:center; gap:10px; }
.lesson-icon  { color:var(--math); font-size:13px; }
.lesson-title {
    color:var(--t1); text-decoration:none; font-weight:600;
    font-size:12.5px; transition:color var(--transition-fast);
}
.lesson-title.disabled { cursor:not-allowed; color:var(--t2) !important; pointer-events:none; }
.lesson-item:hover .lesson-title:not(.disabled) { color:var(--math); }
.lesson-status { color:var(--math); font-size:14px; min-width:18px; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.course-sidebar {
    display:flex; flex-direction:column; gap:16px;
    position:sticky; top:24px;
    max-height:calc(100vh - 48px); overflow-y:auto; overflow-x:hidden;
    width:380px; min-width:380px; max-width:380px;
    flex-shrink:0; box-sizing:border-box;
}
.course-sidebar::-webkit-scrollbar { width:4px; }
.course-sidebar::-webkit-scrollbar-track { background:transparent; }
.course-sidebar::-webkit-scrollbar-thumb { background:rgba(226, 169, 74,.3); border-radius:2px; }

.sidebar-card {
    background:var(--bg2); border:1px solid var(--b0);
    border-radius:var(--r); overflow:hidden;
    transition:border-color var(--transition-fast);
}
.sidebar-card:hover { border-color:var(--math-d); }

.card-body { padding:24px; }

.price-section { text-align:center; margin-bottom:20px; }
.price {
    font-family:var(--mono); font-size:clamp(28px,4vw,36px);
    font-weight:800; color:var(--math); letter-spacing:-1px;
}

.enroll-btn {
    all:unset !important; cursor:pointer !important; box-sizing:border-box !important;
    width:100% !important; display:block !important; text-align:center !important;
    padding:13px !important; border-radius:6px !important; margin-bottom:12px !important;
    font-family:var(--mono) !important; font-size:12px !important; font-weight:700 !important;
    color:#171208 !important; background:var(--math) !important;
    border:1px solid var(--math) !important;
    box-shadow:none !important;
    transition:background .13s !important;
}
.enroll-btn:hover { background:#efbc63 !important; }

.access-note { text-align:center; color:var(--t2); font-family:var(--mono); font-size:10px; }

.card-footer {
    background:rgba(255,255,255,.02); border-top:1px solid var(--b0);
    padding:20px 24px;
}
.info-list { list-style:none; margin:0; padding:0; }
.info-item {
    padding:7px 0; color:var(--t1); font-size:12px;
    display:flex; align-items:center; gap:9px;
    border-bottom:1px solid var(--b1);
}
.info-item:last-child { border-bottom:none; }
.info-icon { color:var(--math); font-size:13px; }

/* ============================================================
   INSTRUCTEUR
   ============================================================ */
.instructor-card { padding:20px; }
.instructor-title {
    font-family:var(--mono); font-size:9.5px; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase; color:var(--t2);
    margin-bottom:14px; display:flex; align-items:center; gap:8px;
}
.instructor-title::after { content:''; flex:1; height:1px; background:var(--b1); }
.instructor-info { display:flex; align-items:center; gap:12px; }
.instructor-avatar {
    width:40px; height:40px; background:var(--math); border-radius:6px;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-family:var(--mono); font-weight:700; font-size:14px; flex-shrink:0;
}
.instructor-name {
    color:var(--math); text-decoration:none; font-weight:700;
    font-size:13px; transition:color var(--transition-fast);
}
.instructor-name:hover { color:#f0c56f; }

/* ============================================================
   ONGLETS CONTENU
   ============================================================ */
.tab-content-wrapper { min-height:700px; position:relative; }
.tab-content { display:none; animation:cd-fade .3s ease; }
.tab-content.active { display:block; }
@keyframes cd-fade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ============================================================
   ANIMATIONS
   ============================================================ */
.fade-in { opacity:0; transform:translateY(16px); animation:cd-fadein .6s ease forwards; }
@keyframes cd-fadein { to{opacity:1;transform:translateY(0)} }
.fade-in-delay-1 { animation-delay:.1s; }
.fade-in-delay-2 { animation-delay:.2s; }
.fade-in-delay-3 { animation-delay:.3s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px) {
    .modern-course-content { grid-template-columns:1fr; }
    .course-sidebar { position:static; max-height:none; width:100%; min-width:100%; max-width:100%; }
}
@media (max-width:768px) {
    .modern-course-container { padding:80px 16px 48px; }
    .modern-course-header { padding:28px 20px; }
    .modern-course-meta { flex-direction:column; gap:10px; }
    .modern-course-actions { flex-direction:column; }
    .modern-btn { width:100%; justify-content:center; }
    .accordion-header { padding:14px 16px !important; }
    .course-main { padding:20px 16px; }
}
@media (max-width:480px) {
    .modern-course-container { padding:60px 12px 40px; }
    .nav-link { padding:8px 10px !important; font-size:10.5px !important; }
    .lesson-count { display:none; }
}

/* ============================================================
   ÉLÉMENTS DYNAMIQUES JS
   ============================================================ */

/* Onglet détails */
.cd-section-label {
    font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase; color:#5c5d68;
    margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
.cd-section-label::after { content:''; flex:1; height:1px; background:rgba(255,255,255,.03); }

.cd-info-list { list-style:none; margin:0; padding:0; }
.cd-info-list li {
    display:flex; justify-content:space-between; align-items:center;
    padding:9px 0; border-bottom:1px solid rgba(255,255,255,.03);
    font-size:12.5px;
}
.cd-info-list li:last-child { border-bottom:none; }
.cd-info-list li span:first-child { color:#9b9ca6; }
.cd-info-list li span:last-child  { color:#ececef; font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; }

.cd-prereq-box {
    background:#1b1c22; border:1px solid rgba(255,255,255,.055);
    border-left:3px solid #e2a94a; border-radius:6px;
    padding:14px 16px; color:#9b9ca6; font-size:12.5px; line-height:1.6;
    word-wrap:break-word; overflow-wrap:break-word;
}

.cd-tags { display:flex; gap:6px; flex-wrap:wrap; }
.cd-tag {
    background:rgba(226, 169, 74,.13); border:1px solid rgba(226, 169, 74,.35);
    color:#f0c56f; padding:4px 12px; border-radius:6px;
    font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:700;
}

/* État vide (avis) */
.cd-empty-state { text-align:center; padding:60px 20px; }
.cd-empty-ico   { font-size:40px; margin-bottom:14px; }
.cd-empty-title { font-size:15px; font-weight:700; color:#ececef; margin-bottom:6px; }
.cd-empty-sub   { font-size:12.5px; color:#5c5d68; }

/* Toast */
@keyframes cd-toast-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
/* ── Accès freemium ── */
.chapter-free-badge {
    font-family: var(--font-family-mono, monospace);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius:6px;
    background: rgba(16,185,129,.12);
    border: 1px solid rgba(16,185,129,.30);
    color: var(--math);
    margin-left: auto;
    margin-right: 8px;
}

.chapter-lock-icon {
    color: var(--t3, #5c5d68);
}

.accordion-item--locked .accordion-header {
    opacity: .6;
}

.chapter-locked-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin: 8px 0 4px;
    background: rgba(226, 169, 74,.06);
    border: 1px solid rgba(226, 169, 74,.18);
    border-radius:6px;
    font-size: 12px;
    color: var(--t2, #9b9ca6);
}

.chapter-locked-cta a {
    color: #e2a94a;
    text-decoration: none;
    font-weight: 600;
    transition: color .15s ease;
}
.chapter-locked-cta a:hover { color: #f0c56f; }

.accordion-item--free .accordion-header { border-left: 2px solid var(--math); }

/* ── Description cours ── */
.course-description {
    color: var(--t2, #9b9ca6);
    font-size: 14px;
    line-height: 1.7;
}
.course-description h1,.course-description h2,.course-description h3,
.course-description h4,.course-description h5 {
    color: var(--t1, #ececef);
    font-weight: 700;
    margin: 20px 0 8px;
    line-height: 1.3;
}
.course-description h2 { font-size: 16px; }
.course-description h3 { font-size: 14px; }
.course-description p  { margin: 0 0 12px; }
.course-description ul,.course-description ol {
    padding-left: 20px;
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.course-description strong { color: var(--t1, #ececef); font-weight: 600; }
.course-description a { color: #e2a94a; text-decoration: none; }
.course-description a:hover { text-decoration: underline; }


/* ════════════════════════════════════════════════════════════
   BOUTON SECONDAIRE

   « Voir les abonnements » n'est pas l'action principale : c'est le repli quand
   le chapitre offert ne suffit plus. Il doit se lire comme tel.
   ════════════════════════════════════════════════════════════ */
.enroll-btn--ghost {
    background: transparent !important;
    border: 1px solid var(--b1, rgba(255,255,255,.10)) !important;
    color: var(--t1) !important;
}
.enroll-btn--ghost:hover {
    background: transparent !important;
    border-color: var(--math-d) !important;
    color: var(--math) !important;
}