/* ============================================================
   BALANCE NOTION — Custom Tutor LMS Course Page
   Fichier : /wp-content/themes/YOUR-THEME/assets/css/course-single.css

   Conventions :
   - Gris de surface     : #f8f9fb
   - Noir                : #000 / #1a1a1a (texte foncé : #121212)
   - "Bordures" grises    : rendues via box-shadow
       • 4 côtés         : box-shadow: 0 0 0 1px rgba(0,0,0,0.1)
       • séparateur haut : box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.1)
       • ligne sous titre: box-shadow: 0 1px 0 0 rgba(0,0,0,0.1)
   ============================================================ */

:root {
    --bn-black:   #0a0a0a;
    --bn-white:   #ffffff;
    --bn-accent:  #c8f0e6;   /* vert menthe clair */
    --bn-accent2: #7dd4c0;   /* teal medium */
    --bn-muted:   rgba(255,255,255,0.55);
    --bn-border:  rgba(255,255,255,0.12);
    --bn-line:    rgba(0,0,0,0.1);   /* fine ligne grise (shadow) */
    --bn-radius:  4px;
    --bn-font:    'Helvetica Neue', Helvetica, Arial, sans-serif;
}

:root {
    --tutor-color-primary: #1a1a1a;
    --tutor-color-primary-rgb: 26, 26, 26;
    --tutor-color-primary-hover: #000000;
}

/* — Hover gris UNIQUEMENT sur les items non-actifs — */
.tutor-dashboard-menu-item:not(.active) a:hover,
.tutor-dashboard-permalinks li:not(.active) a:hover {
    background-color: #f8f9fb !important;
}

/* — Item actif : toujours noir, texte blanc — */
.tutor-dashboard-menu-item.active a,
.tutor-dashboard-permalinks li.active a,
.tutor-dashboard-menu-item.active a:hover,
.tutor-dashboard-permalinks li.active a:hover {
    background-color: #1a1a1a !important;
    color: #fff !important;
}

/* — Boutons Previous / Next de leçon en gris #f8f9fb — */
.tutor-single-course-content-prev .tutor-btn,
.tutor-single-course-content-next .tutor-btn {
    background-color: #f8f9fb !important;
    color: #121212 !important;
    box-shadow: 0 0 0 1px var(--bn-line) !important;
    border: none !important;
}

.tutor-single-course-content-prev .tutor-btn:hover,
.tutor-single-course-content-next .tutor-btn:hover {
    background-color: #1a1a1a !important;
    color: #fff !important;
    box-shadow: none !important;
}

.bn-course-hero *,
.bn-course-body * {
    box-sizing: border-box;
}


/* ============================================================
   1. HERO
   ============================================================ */
.bn-course-hero {
    position: relative;
    min-height: 700px;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    padding: 0;
}

/* Image de fond — Handstand Press (desktop) */
body.postid-39519 .bn-course-hero {
    background-image: url('https://balancenotion.com/wp-content/uploads/2026/06/Teachers-Balance-Notion-Course-06.png') !important;
}

.bn-course-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.bn-course-hero__inner {
    position: relative;
    z-index: 2;
    width: 80%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 80px 40px 64px;
}

/* Ligne séparatrice verticale sous le hero */
.bn-course-hero::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -25px;
    transform: translateX(-50%);
    width: 3px;
    height: 50px;
    background-color: #111;
    z-index: 999;
}

.bn-course-hero__category {
    font-family: 'Raleway', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 300 !important;
    text-transform: uppercase;
    color: #000000 !important;
    font-size: 50px;
    letter-spacing: 2px;
    line-height: 1.1em;
    text-align: left;
    max-width: 395px;
    padding-bottom: 0px;
}

.bn-course-hero__title {
    font-family: 'Raleway', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 700 !important;
    text-transform: uppercase;
    color: #000000 !important;
    font-size: 50px;
    letter-spacing: 2px;
    line-height: 1.1em;
    text-align: left;
    max-width: 395px;
	padding-bottom: 20px;
}

h1.bn-course-hero__title strong {
    font-weight: 700 !important;
}

.bn-course-hero__excerpt {
    font-family: var(--bn-font);
    font-size: 17px;
    color: #000000;
    line-height: 1.6;
    max-width: 395px;
    margin: 0 0 28px;
}

.bn-course-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
}

.bn-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--bn-font);
    font-size: 13px;
    color: var(--bn-white);
    background: rgba(255,255,255,0.1);
    border: 1px solid var(--bn-border);
    padding: 7px 14px;
    border-radius: 100px;
    backdrop-filter: blur(6px);
}

/* Prix du cours */
.bn-course-price {
    font-family: 'Raleway', Helvetica, Arial, sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--bn-black);
    margin-bottom: 20px;
}

.bn-course-price ins { text-decoration: none; }

.bn-course-price del {
    font-size: 18px;
    color: #aaa;
    font-weight: 400;
    margin-right: 8px;
}

/* Barre de progression hero */
.bn-course-hero__progress-bar-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    max-width: 400px;
}

.bn-course-hero__progress-bar {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    overflow: hidden;
}

.bn-course-hero__progress-fill {
    height: 100%;
    background: var(--bn-accent2);
    border-radius: 2px;
    transition: width 0.6s ease;
}

.bn-course-hero__progress-label {
    font-size: 12px;
    color: var(--bn-muted);
    white-space: nowrap;
    font-family: var(--bn-font);
}


/* ============================================================
   2. BOUTONS
   ============================================================ */
.bn-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--bn-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    padding: 14px 28px;
    border-radius: var(--bn-radius);
    transition: all 0.25s ease;
    line-height: 1;
}

.bn-btn--primary {
    background-color: #000000 !important;
    font-family: 'Raleway', Helvetica, Arial, Lucida, sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    font-size: 15px !important;
    letter-spacing: 1px !important;
    border-radius: 100px !important;
    padding: 20px 30px;
    border: 2px solid #000000 !important;
    transition: all 300ms ease !important;
}

.bn-btn--primary:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}

.bn-btn--block {
    width: 100%;
    justify-content: center;
}


/* ============================================================
   3. BODY — Layout 2 colonnes
   ============================================================ */
.bn-course-body {
    min-height: 400px;
}

.bn-course-body__inner {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 40px;
    max-width: 1160px;
    margin: 0 auto;
    padding: 48px 40px 80px;
}

/* La description prend toute la largeur, au-dessus des 2 colonnes */
.bn-course-main {
    display: contents;
}

/* Vidéo */
.bn-video-wrap {
    position: relative;
    padding-top: 56.25%;
    background: #000;
    border-radius: var(--bn-radius);
    overflow: hidden;
    margin-bottom: 40px;
}

.bn-video-wrap iframe,
.bn-video-wrap video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}


/* ============================================================
   4. TITRES DE SECTION
   ============================================================ */
.bn-section-title {
    font-family: var(--et_global_heading_font);
    font-size: 25px;
    font-weight: 400 !important;
    text-transform: uppercase;
    color: var(--bn-black);
    letter-spacing: 1px;
    padding-bottom: 0px;
    margin-bottom: 50px;
    box-shadow: 0 1px 0 0 var(--bn-line);
}

h2.bn-section-title strong {
    font-weight: 700;
}


/* ============================================================
   5. DESCRIPTION
   ============================================================ */
.bn-course-description {
    text-align: center;
    grid-column: 1 / -1;
}

.bn-course-description__content {
    font-family: 'Raleway', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 500;
    color: #000000 !important;
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 1.6em;
    margin-bottom: 50px;
}

.bn-course-description__content p:first-child strong {
    font-weight: 700;
}

/* Titre de la description (style propre, sans ligne) */
.bn-course-description .bn-section-title {
    text-align: center;
    text-transform: uppercase;
    font-size: 30px;
    font-family: var(--et_global_heading_font);
    border-bottom: none !important;
    box-shadow: none;
    margin-bottom: 24px !important;
}


/* ============================================================
   6. CURRICULUM — Topics + Leçons
   ============================================================ */
.bn-topic {
    border-radius: 0px;
    margin-bottom: 12px;
    overflow: hidden;
}

.bn-topic__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #f8f9fb;
    border: none;
    cursor: pointer;
    padding: 20px 25px;
    gap: 12px;
    text-align: left;
    transition: background 0.2s;
}

.bn-topic__title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    font-family: 'Raleway', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 1.7em;
    color: var(--bn-black);
}

.bn-topic__number {
    font-weight: 300 !important;
    font-size: 48px;
    letter-spacing: 1px;
    line-height: 1;
    transform: translateY(-5px);
}

.bn-topic__count {
    font-family: var(--bn-font);
    font-size: 18px;
    letter-spacing: 1px;
    color: #222;
    line-height: 1.4;
    margin-left: auto;
}

.bn-topic__chevron {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--bn-black);
    transition: transform 0.25s ease;
}

.bn-topic__header[aria-expanded="false"] .bn-topic__chevron {
    transform: rotate(-90deg);
}

.bn-topic__body {
    overflow: hidden;
}

.bn-topic__header[aria-expanded="false"] + .bn-topic__body {
    display: none;
}

/* Liste de leçons */
.bn-lesson-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bn-lesson {
    border-top: none;
    box-shadow: 0 1px 0 0 var(--bn-line);
}

.bn-lesson:hover,
.bn-lesson__link:hover,
.bn-lesson:hover .bn-lesson__link {
    background: #f8f9fb !important;
}

.bn-lesson__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 25px;
    text-decoration: none;
    transition: background 0.15s;
}

.bn-lesson__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bn-lesson__icon--play {
    background-image: url('https://balancenotion.com/wp-content/uploads/2025/09/play-button-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    width: 32px;
    height: 32px;
}

.bn-lesson__icon--play svg { display: none; }

.bn-lesson__icon--lock {
    background: #e8e5de;
    color: #999;
}

.bn-lesson__icon--check {
    background: #000;
    color: var(--bn-white);
}

.bn-lesson__title {
    flex: 1;
    font-family: var(--bn-font);
    font-size: 18px;
    letter-spacing: 1px;
    color: #222;
    line-height: 1.4;
}

.bn-lesson--done .bn-lesson__title {
    color: #888;
    text-decoration: line-through;
	text-decoration-color: #000;
}

.bn-lesson__duration {
    font-size: 12px;
    color: #aaa;
    white-space: nowrap;
    font-family: var(--bn-font);
}

/* Encadré notice */
.bn-lesson-notice {
    margin: 0px;
    padding: 30px 30px;
    background: #f8f9fb;
    border: none;
    box-shadow: 0 0 0 1px var(--bn-line);
    border-radius: 4px;
    color: #121212;
    line-height: 1.65;
}

.tutor-round-box {
    width: 60px;
    height: 60px;
    color: #121212;
    background: #f8f9fb;
    border-radius: 80px;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    display: inline-flex;
    overflow: hidden;
}


/* ============================================================
   7. SIDEBAR
   ============================================================ */
.bn-course-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bn-sidebar-card {
    background: #f8f9fb !important;
    padding: 50px !important;
    border: 0;
}

/* Carte du bouton (1er enfant) : pas de fond, pas de padding, placée en bas */
.bn-course-sidebar .bn-sidebar-card:first-child {
    order: 99;
    background: transparent !important;
    padding: 0 !important;
}

.bn-sidebar-card__title {
    font-family: 'Raleway', Helvetica, Arial, Lucida, sans-serif;
    font-size: 25px;
    font-weight: 600 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--bn-black);
    border-bottom: none;
    margin: 0 0 50px;
    text-align: center;
}

/* Progress sidebar */
.bn-sidebar-progress__bar {
    height: 4px;
    background: #e8e5de;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 8px;
}

.bn-sidebar-progress__fill {
    height: 100%;
    background: var(--bn-accent2);
    border-radius: 2px;
    transition: width 0.6s ease;
}

.bn-sidebar-progress__labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #888;
    font-family: var(--bn-font);
    margin-bottom: 20px;
}

/* Meta list */
.bn-course-meta-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bn-course-meta-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--bn-font);
    font-size: 14px;
    color: #333;
}

.bn-course-meta-list svg {
    flex-shrink: 0;
    color: var(--bn-accent2);
}

/* Instructeurs côte à côte, centrés */
.bn-instructors-list {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 30px;
}

.bn-instructor {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.bn-instructor__avatar {
    width: 80px;
    height: 80px;
    border-radius: 100%;
    object-fit: cover;
    border: 0;
    margin-bottom: 0px;
}

.bn-instructor__info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bn-instructor__info strong {
    font-family: var(--bn-font);
    font-size: 18px;
    color: var(--bn-black);
    font-weight: 500;
    letter-spacing: 1px;
}

/* Masquer le label "Instructor" sous le nom */
.bn-instructor__info span {
    display: none;
}

/* Override bouton Tutor dans sidebar */
.bn-sidebar-card .tutor-btn-primary,
.bn-sidebar-card .tutor-btn-block {
    background: var(--bn-black) !important;
    color: var(--bn-white) !important;
    border-radius: var(--bn-radius) !important;
    font-family: var(--bn-font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 14px 24px !important;
    border: none !important;
    width: 100%;
    display: block;
    text-align: center;
    transition: background 0.2s !important;
}

.bn-sidebar-card .tutor-btn-primary:hover {
    background: var(--bn-accent2) !important;
    color: var(--bn-black) !important;
}

/* Override bouton Enroll Tutor LMS */
.bn-sidebar-card .tutor-course-enroll-wrap .tutor-btn,
.bn-sidebar-card .tutor-course-enroll-wrap button,
.bn-sidebar-card .tutor-enrollment-box .tutor-btn,
.bn-sidebar-card .tutor-enrollment-box button,
.bn-sidebar-card form.cart .single_add_to_cart_button,
.bn-sidebar-card .tutor-enroll-btn,
.bn-sidebar-card [class*="enroll"] button,
.bn-sidebar-card [class*="enroll"] a {
    background: #000000 !important;
    color: #ffffff !important;
    border-radius: 100px !important;
    font-family: 'Raleway', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 20px 30px !important;
    border: 2px solid #000000 !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 300ms ease !important;
    text-decoration: none !important;
}

.bn-sidebar-card .tutor-course-enroll-wrap .tutor-btn:hover,
.bn-sidebar-card .tutor-enrollment-box .tutor-btn:hover,
.bn-sidebar-card .tutor-enroll-btn:hover,
.bn-sidebar-card [class*="enroll"] button:hover,
.bn-sidebar-card [class*="enroll"] a:hover {
    background: #ffffff !important;
    color: #000000 !important;
}


/* ============================================================
   8. EXERCICES / VIDEO LIBRARY / BADGES / MODAL
   ============================================================ */
/* Cartes exercices — bordure via shadow */
.bn-ex-card {
    border: none;
    box-shadow: 0 0 0 1px var(--bn-line);
}

.bn-ex-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.bn-ex-card__media {
    background: #f8f9fb center / cover no-repeat;
}

.bn-ex-card__play {
    background: rgba(0, 0, 0, 0.85);
    box-shadow: none;
}

.bn-ex-card__play:hover {
    background: rgba(0, 0, 0, 1);
}

/* Player vidéo */
.tutor-video-player-wrapper,
.tutor-video-player {
    background: #000 !important;
}

/* Dossiers Video Library — bordure via shadow */
.bn-dl-folder {
    border: none;
    box-shadow: 0 0 0 1px var(--bn-line);
}

.bn-dl-folder:hover {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.bn-dl-folder__tag {
    background: rgba(0, 0, 0, 0.85);
}

.bn-dl-folder__meta {
    color: #777;
}

/* Badges */
.bn-badge--level {
    background: #1a1a1a;
    color: #fff;
}

.bn-badge--mat {
    color: #444;
    border: none;
    box-shadow: 0 0 0 1px var(--bn-line);
}

/* Bouton "Back to Video Library" — bordure via shadow */
.bn-dl-back {
    color: #1a1a1a;
    border: none;
    box-shadow: 0 0 0 1px var(--bn-line);
}

.bn-dl-back:hover {
    background: #1a1a1a;
    color: #fff;
    box-shadow: none;
}

/* Bouton X de fermeture du popup */
.bn-ex-modal__close {
    color: #1a1a1a;
}

/* Couverture du dashboard (remplace le violet par défaut) */
.tutor-dashboard #tutor_cover_area {
    background-image: url('https://balancenotion.com/wp-content/uploads/2026/06/user-bg.png') !important;
    background-size: cover !important;
    background-position: center !important;
}


/* ============================================================
   9. PAGE LEÇON (single-lesson.php)
   ============================================================ */
.bn-lesson-page {
    font-family: var(--bn-font);
}

.bn-lesson-head {
    background: #000;
    padding: 0;
}

.bn-lesson-head__inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 48px 40px 36px;
}

.bn-lesson-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    margin-bottom: 16px;
    transition: color 0.2s;
}

.bn-lesson-back:hover {
    color: var(--bn-accent2);
}

.bn-lesson-title {
    font-family: 'Raleway', Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    font-size: 38px;
    letter-spacing: 1px;
    line-height: 1.1;
    margin: 0;
}

.bn-lesson-body__inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 40px 40px 80px;
}

.bn-lesson-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--bn-radius);
    overflow: hidden;
    margin-bottom: 32px;
}

.bn-lesson-video iframe,
.bn-lesson-video video,
.bn-lesson-video .tutor-video-player {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

.bn-lesson-content {
    line-height: 1.7;
    color: #333;
    margin: 24px 0;
}

/* Fichiers téléchargeables */
.bn-lesson-files {
    margin: 32px 0;
}

.bn-lesson-files__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--bn-black);
    margin: 0 0 14px;
}

.bn-files-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bn-file a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border: none;
    box-shadow: 0 0 0 1px var(--bn-line);
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    color: #222;
    transition: box-shadow 0.15s, background 0.15s;
}

.bn-file a:hover {
    box-shadow: 0 0 0 1px var(--bn-accent2);
    background: #f8f9fb;
}

.bn-file__icon {
    flex: 0 0 auto;
    color: var(--bn-accent2);
    display: flex;
    align-items: center;
}

.bn-file__name {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 600;
}

.bn-file__size {
    flex: 0 0 auto;
    font-size: 12px;
    color: #aaa;
}

/* Actions (séparateur du haut via shadow) */
.bn-lesson-actions {
    margin-top: 40px;
    padding-top: 28px;
    box-shadow: inset 0 1px 0 0 var(--bn-line);
}


/* ============================================================
   10. BIBLIOTHÈQUE D'EXERCICES (bas du cours)
   ============================================================ */
.bn-course-library {
    background: #f8f9fb;
    box-shadow: inset 0 1px 0 0 var(--bn-line);
}

.bn-course-library__inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 56px 40px 72px;
}

/* — Footer de leçon Tutor : enlève le rose — */
#tutor-single-entry-content .tutor-course-topic-single-footer {
    border-top: 1px solid var(--bn-line) !important;
    background-color: #ffffff !important;
}

/* — Hover du menu dashboard Tutor en gris #f8f9fb — */
.tutor-dashboard-menu-item a:hover,
.tutor-dashboard-permalinks a:hover {
    background-color: #f8f9fb !important;
}

/* ============================================================
   11. RESPONSIVE  (du plus large au plus étroit)
   ============================================================ */

/* ── Tablette ≤ 1024px : layout en pleine largeur ── */
@media (max-width: 1024px) {
    .bn-course-body__inner {
        display: block;
        padding: 32px 24px 60px;
    }

    .bn-course-main {
        display: block;
    }

    .bn-section-title {
        padding-top: 24px;
    }

    .bn-sidebar-card__title {
        padding-top: 50px;
    }
}

/* ── Tablette ≤ 980px : hero vertical + contenu centré ── */
@media (max-width: 980px) {
    body.postid-39519 .bn-course-hero {
        background-image: url('https://balancenotion.com/wp-content/uploads/2026/06/Teachers-Balance-Notion-Course-Vertical-Mode.png') !important;
        background-position: bottom !important;
    }

    .bn-course-hero {
        text-align: center;
    }

    .bn-course-hero__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 40px 0px 250px !important;
    }

    .bn-course-hero__title,
    .bn-course-hero__excerpt {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .bn-course-description .bn-section-title {
        font-size: 25px !important;
    }
}

/* ── Mobile ≤ 768px ── */
@media (max-width: 768px) {
    .bn-course-hero {
        min-height: 420px;
    }

    .bn-course-hero__overlay {
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.45) 0%,
            rgba(0, 0, 0, 0.15) 40%,
            rgba(0, 0, 0, 0) 60%
        );
    }

    .bn-course-hero__title {
        font-size: 32px;
    }

    .bn-course-hero__excerpt {
        font-size: 15px;
    }

    .bn-curriculum {
        padding: 20px;
    }

    .bn-course-body__inner {
        padding: 24px 16px 48px;
    }

    .bn-lesson-head__inner {
        padding: 36px 20px 28px;
    }

    .bn-lesson-title {
        font-size: 26px;
    }

    .bn-lesson-body__inner {
        padding: 28px 16px 60px;
    }

    .bn-course-library__inner {
        padding: 36px 16px 48px;
    }
}

/* ── Petit mobile ≤ 480px ── */
@media (max-width: 480px) {
    .bn-course-hero__title {
        font-size: 26px;
    }

    .bn-meta-pill {
        font-size: 12px;
        padding: 6px 11px;
    }
}

/* — Masquer la colonne "Rating" du tableau My Courses — */
.tutor-table.table-popular-courses th:last-child,
.tutor-table.table-popular-courses td:last-child {
    display: none !important;
}

/* — Masquer le badge LEVEL sur les cartes exercices — */
.bn-ex-badges .bn-badge--level {
    display: none !important;
}

/* — Masquer l'onglet "Exercise Files" — */
.tutor-nav-item a[data-tutor-query-value="files"] {
    display: none !important;
}

/* — Notice affichée avant le texte de la leçon — */
.tutor-lesson-wrapper {
    display: flex;
    flex-direction: column;
	margin-bottom: 50px;
}

.tutor-lesson-wrapper .bn-lesson-notice {
    order: -1;
}


.bn-dl-section-title {
    font-family: 'Raleway', Helvetica, Arial, Lucida, sans-serif;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--bn-black);
    margin: 32px 0 4px;
}

.bn-lesson__thumb {
    display: inline-block;
    width: 64px;
    height: 40px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    background-color: #1a1a1a;
    flex-shrink: 0;
    margin-right: 12px;
}

/* Bundle */

/* — Bundle : les 3 Levels — */
.bn-bundle-levels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 8px;
}
.bn-bundle-level {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
    transition: transform .15s, box-shadow .15s;
}
.bn-bundle-level:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.14);
}
.bn-bundle-level__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #1a1a1a center/cover no-repeat;
}
.bn-bundle-level__title {
    display: block;
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 700;
    color: #121212;
    line-height: 1.3;
}
@media (max-width: 980px) { .bn-bundle-levels { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bn-bundle-levels { grid-template-columns: 1fr; } }

.bn-dl-section { margin-bottom: 2.5rem; }
.bn-dl-cat-title {
    font-size: 1.25rem;
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    box-shadow: inset 0 -1px 0 var(--bn-line, rgba(0,0,0,.12));
}

.bn-topic__desc {
    padding: 16px 18px 4px;
    margin-top: 4px;
    box-shadow: inset 0 1px 0 var(--bn-line, rgba(0,0,0,.08));
    color: #4a4a4a;
    line-height: 1.6;
    font-size: 15px;
}
.bn-topic__desc p:last-child { margin-bottom: 0; }