/**
 * ============================================================================
 *  FEUILLE DE STYLES PRINCIPALE - COURS DE CORÉEN
 * ============================================================================
 *  Palette inspirée du drapeau coréen (rouge, bleu, blanc, noir)
 *  Sections commentées pour retrouver rapidement chaque bloc visuel
 * ============================================================================
 */

/* ============================================================================
   VARIABLES CSS - PALETTE DE COULEURS
   ============================================================================
   Variables globales utilisées dans tout le site
   ============================================================================ */
:root {
    --white: #ffffff;
    --red: #cd2e3a;        /* Rouge du drapeau coréen */
    --blue: #0047a0;        /* Bleu du drapeau coréen */
    --purple: #7c2d8c;      /* Violet accent */
    --black: #010101;       /* Noir principal */
    --light-blue: #b3c7e3;  /* Bleu clair */
    --light-red: #f8d7da;   /* Rouge clair */
    --primary: var(--black);
    --secondary: var(--red);
    --accent: var(--blue);
    --light: var(--white);
    --dark: #343a40;
}

/* ============================================================================
   RESET & BASE
   ============================================================================ */
* {
    box-sizing: border-box;
}

body {
    font-family: "Montserrat", sans-serif;  /* Police principale pour le texte */
    color: var(--dark);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: #f8f9fa;
}

/* Titres avec police coréenne */
h1,
h2,
h3,
h4,
h5 {
    font-family: "Noto Sans KR", sans-serif;  /* Police coréenne pour les titres */
    font-weight: 700;
}

/* ============================================================================
   NAVBAR - Barre de navigation principale
   ============================================================================ */
.navbar {
    background-color: var(--primary) !important;
    padding: 1rem 0;
    transition: all 0.3s ease;
}
.navbar.scrolled {
    padding: 0.6rem 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: -0.5px;
    color: var(--white) !important;
}
.navbar-brand__logo-shell {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.96);
    padding: 0;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.navbar-brand__logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.16);
    transform-origin: center;
}
.navbar-brand__text {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    color: var(--white) !important;
}
.navbar-brand__text > span {
    color: var(--secondary) !important;
}
.nav-link {
    color: var(--white) !important;
    margin: 0 0.5rem;
    position: relative;
    transition: color 0.3s;
    font-weight: 500;
}
.nav-link::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent);
    transition: width 0.3s;
}
.nav-link:hover {
    color: var(--accent) !important;
}
.nav-link:hover::after {
    width: 100%;
}
.navbar-actions {
    align-items: center;
    gap: 0.6rem;
}
.navbar-actions .nav-link {
    margin: 0;
}
.nav-link-button {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
}
.nav-logout-form {
    margin: 0;
}
.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 1.2rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--red), var(--blue));
    color: var(--white) !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: none;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
    color: var(--white) !important;
}
/* Offset pour compenser la navbar fixe */
.section-offset {
    padding-top: 130px;
}
@media (max-width: 992px) {
    .section-offset {
        padding-top: 110px;
    }
    .navbar-brand {
        font-size: 1.3rem;
        gap: 0.55rem;
    }
    .navbar-brand__logo-shell {
        width: 34px;
        height: 34px;
    }
    .navbar-actions {
        margin-top: 0.75rem;
        align-items: flex-start;
    }
    .navbar-actions .nav-cta {
        width: 100%;
    }
}

/* ============================================================================
   PAGES AUTH - Login / Register
   ============================================================================
   Styles pour les pages de connexion et d'inscription
   ============================================================================ */
.auth-section {
    padding-bottom: 90px;
    background: linear-gradient(180deg, rgba(0, 71, 160, 0.04), rgba(205, 46, 58, 0.02));
}
.auth-card {
    position: relative;
    border-radius: 26px;
    border: 2px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, var(--red), var(--purple), var(--blue)) border-box;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.auth-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.22);
}
.auth-card::before {
    content: "";
    position: absolute;
    inset: -14px -18px -20px;
    background: radial-gradient(circle at top, rgba(205, 46, 58, 0.25), transparent 55%), radial-gradient(circle at bottom, rgba(0, 71, 160, 0.2), transparent 60%);
    filter: blur(30px);
    z-index: -1;
}
.auth-card .card-body {
    background-color: #fff;
}
.auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--accent);
    background: rgba(0, 71, 160, 0.08);
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
}
.auth-title {
    font-weight: 700;
    font-size: 2rem;
    margin-top: 0.8rem;
}
.auth-subtitle {
    color: #6b7280;
    max-width: 320px;
    margin: 0 auto;
}
.auth-divider {
    display: block;
    width: 72px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--purple), var(--secondary));
    border-radius: 50px;
    margin: 1.5rem auto 2rem;
}
.auth-perks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 1.5rem;
    color: #6b7280;
}
.auth-perks li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95rem;
}
.auth-perks li::before {
    content: "•";
    color: var(--purple);
    font-size: 1.4rem;
    line-height: 0.5;
}
.auth-secondary-text {
    font-size: 0.9rem;
    color: #6b7280;
}
.dropdown-menu-dark {
    background-color: rgba(1, 1, 1, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    min-width: 12rem;
}
.dropdown-menu-dark .dropdown-item {
    color: var(--white);
    font-weight: 500;
}
.dropdown-menu-dark .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: var(--accent);
}
.dropdown-divider {
    border-color: rgba(255, 255, 255, 0.15);
}

/* ============================================================================
   HERO PRINCIPAL - Page d'accueil
   ============================================================================
   Section hero avec gradient rouge/bleu et lettres coréennes animées
   ============================================================================ */
.hero {
    position: relative;
    min-height: min(52vh, 520px);
    max-height: 560px;
    padding-top: 110px;
    padding-bottom: 2.25rem;
    background: linear-gradient(135deg, var(--red), var(--blue));
    display: flex;
    align-items: center;
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
            circle at 90% 10%,
            rgba(255, 255, 255, 0.2) 0%,
            transparent 20%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(255, 255, 255, 0.1) 0%,
            transparent 25%
        );
}
.hero .container {
    position: relative;
    z-index: 2;
}
.hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(250px, 320px);
    align-items: center;
    gap: 2.5rem;
    max-width: 1100px;
    margin: 0 auto;
}
.hero-content {
    max-width: none;
    padding: 0;
    text-align: left;
    margin: 0;
}
.hero h1 {
    font-size: clamp(1.65rem, 3.8vw, 2.35rem);
    line-height: 1.22;
    margin-bottom: 0.85rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    color: var(--white);
}
.hero .highlight {
    color: var(--white);
    position: relative;
    display: inline-block;
    padding-bottom: 0.9rem;
}
.hero .highlight::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background-color: var(--white);
    border-radius: 2px;
}
.hero p {
    font-size: clamp(0.95rem, 1.6vw, 1.1rem);
    line-height: 1.55;
    margin-bottom: 1.35rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 40rem;
    margin-left: 0;
    margin-right: 0;
}
.hero-buttons {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}
.hero-visual {
    display: flex;
    justify-content: center;
}
.hero-portrait-card {
    width: min(100%, 320px);
    padding: 1rem 1rem 1.15rem;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.24);
    text-align: center;
}
.hero-portrait-card__image {
    display: block;
    width: min(100%, 250px);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 0 auto 0.9rem;
    border-radius: 24px;
    border: 3px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
}
.hero-portrait-card__image:only-child {
    margin-bottom: 0;
}
.hero-portrait-card__name {
    font-family: "Noto Sans KR", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--white);
}
.hero-portrait-card__meta {
    color: rgba(255, 255, 255, 0.86);
    font-weight: 500;
}
.hero-buttons .btn {
    padding: 0.65rem 1.65rem;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.btn-primary {
    background-color: var(--white);
    border: none;
    color: var(--blue);
}
.btn-primary:hover {
    background-color: var(--blue);
    color: var(--white);
    transform: translateY(-3px);
}

/* Hover vert pour le bouton de sauvegarde de progression */
.save-progress-btn:hover:not(:disabled) {
    background-color: #10b981 !important; /* Vert émeraude */
    color: var(--white) !important;
    transform: translateY(-3px);
}
.btn-secondary {
    background: transparent;
    border: 2px solid var(--white);
    color: var(--white);
}
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
}

/* Bandeaux intérieurs (/cours, /articles, /offres, /a-propos, etc.) : hauteur et typo unifiées */
.page-hero {
    position: relative;
    min-height: min(36vh, 360px);
    padding-top: 100px;
    padding-bottom: 2rem;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.4), transparent 45%), radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.25), transparent 50%);
    opacity: 0.25;
    pointer-events: none;
}
.page-hero .container {
    position: relative;
    z-index: 2;
}
.page-hero--primary {
    background: linear-gradient(135deg, var(--red), var(--purple), var(--blue));
    color: var(--white);
}
.page-hero--airy {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(244, 247, 255, 0.84)),
        linear-gradient(135deg, rgba(205, 46, 59, 0.38), rgba(124, 45, 140, 0.42), rgba(0, 72, 160, 0.36));
    color: var(--primary);
}
.page-hero--airy h1,
.page-hero--airy h2,
.page-hero--airy h3 {
    color: var(--primary);
}
.page-hero--airy p,
.page-hero--airy .lead {
    color: #4c5160;
}
.page-hero--airy .hero-badge {
    color: var(--accent);
    background: rgba(0, 71, 160, 0.12);
    border: 1px solid rgba(0, 71, 160, 0.14);
}
.page-hero--airy .hero-divider {
    background: linear-gradient(90deg, rgba(205, 46, 58, 0.8), rgba(0, 71, 160, 0.7));
}
.page-hero--offers {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #fff;
    min-height: min(36vh, 360px);
    padding-top: 100px;
    padding-bottom: 2rem;
    align-items: center;
}
.page-hero--offers::after {
    background: radial-gradient(ellipse at 70% 30%, rgba(99, 102, 241, 0.2) 0%, transparent 50%),
                radial-gradient(ellipse at 90% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 50%);
    opacity: 1;
}
.page-hero--offers .hero-badge {
    display: inline-block;
    padding: 0.4rem 1rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3));
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.page-hero--offers h1 {
    color: #fff;
}
.page-hero--offers .hero-divider {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.8), rgba(139, 92, 246, 0.8));
}
.page-hero--offers .lead {
    color: rgba(255, 255, 255, 0.75);
    font-size: clamp(0.95rem, 1.5vw, 1.05rem);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}
.page-hero--offers .articles-pillars li {
    font-size: 0.9rem;
    margin-bottom: 0.55rem;
    color: rgba(255, 255, 255, 0.75);
}
.page-hero--offers .lesson-list--hero li {
    font-size: 0.9rem;
    padding: 0.3rem 0;
    color: rgba(255, 255, 255, 0.75);
}
.page-hero--offers .module-card {
    padding: 1.25rem 1.35rem;
}
.page-hero--offers .module-card .lesson-list li {
    font-size: 0.88rem;
    padding: 0.28rem 0;
}
.about-hero-portrait {
    margin-bottom: 1.25rem;
}
.about-hero-portrait__image {
    display: block;
    width: min(100%, 240px);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 0 auto 0.9rem;
    border-radius: 24px;
    border: 3px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.22);
}
.about-hero-portrait__name {
    font-family: "Noto Sans KR", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
}
.about-hero-portrait__role {
    font-size: 0.95rem;
    color: #667085;
}
.page-hero--offers .articles-pillars li span {
    color: #fff;
}
.page-hero--offers .lesson-list--hero li::before {
    color: rgba(255, 255, 255, 0.6);
}
.btn-airy-primary {
    background: linear-gradient(135deg, var(--red), var(--blue));
    color: var(--white);
    border: none;
    border-radius: 999px;
    padding: 0.85rem 1.9rem;
    box-shadow: 0 12px 28px rgba(0, 71, 160, 0.2);
}
.btn-airy-primary:hover {
    color: var(--white);
    opacity: 0.92;
}
.btn-airy-outline {
    border-radius: 999px;
    border: 2px solid rgba(0, 71, 160, 0.45);
    color: var(--accent);
    padding: 0.82rem 1.8rem;
}
.btn-airy-outline:hover {
    background: rgba(0, 71, 160, 0.08);
    color: var(--accent);
}

.page-hero--soft {
    background: linear-gradient(135deg, rgba(205, 46, 58, 0.09), rgba(124, 45, 140, 0.1), rgba(0, 71, 160, 0.08));
}
.page-hero .hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.85rem;
}
.page-hero--soft .hero-eyebrow {
    color: var(--accent);
}
.page-hero h1 {
    font-size: clamp(1.55rem, 3.2vw, 2.05rem);
    font-weight: 700;
    line-height: 1.2;
}
.page-hero .hero-divider {
    width: 72px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--red), var(--blue));
    margin: 1rem 0 1.1rem;
}
.page-hero--soft .hero-divider {
    background: linear-gradient(90deg, rgba(205, 46, 58, 0.7), rgba(0, 71, 160, 0.7));
}
.page-hero p {
    max-width: 560px;
    color: rgba(255, 255, 255, 0.9);
}
.page-hero .lead {
    font-size: clamp(0.98rem, 1.55vw, 1.08rem);
    line-height: 1.55;
    margin-bottom: 0.65rem;
}
.page-hero--soft p {
    color: #5d6575;
}
.page-hero--airy .hero-eyebrow {
    color: var(--accent);
}
.page-hero--airy p,
.page-hero--airy .lead,
.page-hero--airy .text-secondary,
.page-hero--airy .text-muted {
    color: #4c5160 !important;
}
.page-hero--airy .lesson-list li {
    color: #4d5562;
}

/* ============================================================================
   ANIMATION LETTRES CORÉENNES
   ============================================================================
   Lettres coréennes qui flottent en arrière-plan du hero
   ============================================================================ */
.korean-letters {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}
.korean-letter {
    position: absolute;
    font-family: "Noto Sans KR", sans-serif;
    font-size: 2.5rem;
    opacity: 0.15;
    color: var(--white);
    animation: float 15s infinite linear;
}
@keyframes float {
    0% {
        transform: translateY(100vh) rotate(0deg);
    }
    100% {
        transform: translateY(-100px) rotate(360deg);
    }
}

/* ============================================================================
   CARDS COURS - Plan de formation
   ============================================================================
   Styles pour les cartes de cours (Débutant, Intermédiaire, Avancé)
   ============================================================================ */
#courses {
    padding: 6rem 0;
    background-color: var(--white);
}
.course-card {
    border: none;
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.4s ease;
    height: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    background: var(--white);
}
.course-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.card-img-top {
    height: 220px;
    object-fit: cover;
}
.card-body {
    padding: 1.8rem;
}
.card-body h3 {
    color: var(--primary);
    margin-bottom: 1rem;
}
.card-body p {
    color: #666;
    margin-bottom: 1.8rem;
    min-height: 60px;
}
.btn-outline-dark {
    border: 2px solid var(--blue);
    color: var(--blue);
    font-weight: 600;
    border-radius: 50px;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s;
}
.btn-outline-dark:hover {
    background: var(--blue);
    color: var(--white);
}

.course-modules {
    padding: 4rem 0 5rem;
    background: linear-gradient(180deg, #ffffff, #f7f8fb);
}
.module-card {
    background: #fff;
    border-radius: 18px;
    padding: 1.8rem;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.04);
    height: 100%;
}
.module-card--accent {
    border: 2px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, rgba(205, 46, 58, 0.6), rgba(0, 71, 160, 0.7)) border-box;
}
.module-card--focus {
    border: 2px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, rgba(205, 46, 58, 0.6), rgba(0, 71, 160, 0.7)) border-box;
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.12);
}
.module-card--focus .module-title,
.module-card--focus .text-secondary {
    color: var(--primary);
    letter-spacing: 0.08em;
}
.module-title {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}
.lesson-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
.lesson-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
    font-size: 0.95rem;
    color: #4d5562;
}
/* Puces pour les listes type « Ce que je vous propose » (hero /cours, etc.) */
.lesson-list li::before {
    content: "▹";
    color: var(--accent);
    font-size: 1rem;
}
.module-card--focus .lesson-list li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--red), var(--blue));
    margin-right: 0.2rem;
}

/* ============================================================================
   OFFRES - NOUVEAU DESIGN
   ============================================================================
   Design moderne et aéré pour la page d'offres (/offres)
   
   Structure :
   - Hero sombre en haut de page
   - Bannière horizontale pour l'offre gratuite
   - Grille de 3 cartes pour les offres payantes
   - Section de confiance (badges sécurité)
   
   Palette de couleurs :
   - Indigo #6366f1 / #4f46e5 : couleur d'accent principale
   - Violet #8b5cf6 : touches dans les dégradés
   - Émeraude #10b981 : badges "gratuit" et icônes de validation
   - Slate #0f172a, #1e293b, #64748b : textes et fonds sombres
   ============================================================================ */


/* ----------------------------------------------------------------------------
   HERO - Section d'en-tête sombre
   ---------------------------------------------------------------------------- */

/* Contenu centré du hero, au-dessus de la décoration */
.offers-hero__content {
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Petit badge "Tarifs membres fondateurs" en haut */
.offers-hero__eyebrow {
    display: inline-block;
    padding: 0.4rem 1rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3)); /* Dégradé indigo/violet translucide */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px; /* Pill shape */
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

/* Titre principal du hero - taille responsive avec clamp() */
.offers-hero__title {
    font-size: clamp(1.6rem, 3.4vw, 2.25rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 0.65rem;
}

/* Sous-titre du hero */
.offers-hero__subtitle {
    font-size: clamp(0.95rem, 1.5vw, 1.05rem);
    color: rgba(255, 255, 255, 0.7); /* Blanc semi-transparent */
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Décoration de fond : halos lumineux indigo/violet */
.offers-hero__decoration {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: radial-gradient(ellipse at 70% 30%, rgba(99, 102, 241, 0.2) 0%, transparent 50%),
                radial-gradient(ellipse at 90% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 50%);
    pointer-events: none; /* Ne bloque pas les clics */
}


/* ----------------------------------------------------------------------------
   GRILLE PRINCIPALE - Conteneur des offres
   ---------------------------------------------------------------------------- */

.offers-grid {
    padding: 4rem 0 5rem;
    background: #f8fafc; /* Gris très clair */
}


/* ----------------------------------------------------------------------------
   BANNIÈRE OFFRE GRATUITE - Layout horizontal
   ---------------------------------------------------------------------------- */

/* Carte horizontale pour l'offre "Découverte" gratuite */
.offers-free-banner {
    background: #fff;
    border-radius: 16px;
    padding: 2rem 2.5rem;
    margin-bottom: 4rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); /* Ombre très subtile */
    border: 1px solid #e2e8f0;
}

/* Layout flex : info | features | bouton CTA */
.offers-free-banner__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap; /* Passe en colonne sur mobile */
}

/* Colonne d'informations (badge + titre + description) */
.offers-free-banner__info {
    flex: 1;
    min-width: 200px;
}

/* Badge vert "Gratuit" */
.offers-free-banner__badge {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    background: linear-gradient(135deg, #10b981, #059669); /* Dégradé émeraude */
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

/* Titre "Découverte" */
.offers-free-banner__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.25rem;
}

/* Description de l'offre gratuite */
.offers-free-banner__desc {
    color: #64748b;
    margin: 0;
    font-size: 0.95rem;
}

/* Liste des features incluses (affichées horizontalement) */
.offers-free-banner__features {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    flex: 2;
    justify-content: center;
}

/* Chaque feature avec son icône check */
.offers-free-banner__feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #475569;
    font-size: 0.9rem;
}

/* Icône check verte */
.offers-free-banner__feature i {
    color: #10b981; /* Émeraude */
    font-size: 0.85rem;
}

/* Conteneur du bouton CTA */
.offers-free-banner__cta {
    flex-shrink: 0;
}

/* Style du bouton dans la bannière gratuite */
.offers-free-banner__cta .btn {
    padding: 0.75rem 1.75rem;
    font-weight: 600;
    border-radius: 10px;
}

/* ----------------------------------------------------------------------------
   SECTION OFFRES PAYANTES - Titre + grille de cartes
   ---------------------------------------------------------------------------- */

/* Conteneur de la section payante */
.offers-paid {
    margin-bottom: 3rem;
}

/* En-tête centré "Passez au niveau supérieur" */
.offers-paid__header {
    text-align: center;
    margin-bottom: 3rem;
}

.offers-paid__title {
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.5rem;
}

.offers-paid__subtitle {
    color: #64748b;
    font-size: 1.05rem;
    margin: 0;
}

/* Formulaire code promo */
.promo-form {
    max-width: 480px;
    margin: 0 auto;
}

.promo-form__wrapper {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px solid #e2e8f0;
    border-radius: 50px;
    padding: 6px 6px 6px 20px;
    gap: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.promo-form__wrapper:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1), 0 4px 12px rgba(0, 0, 0, 0.08);
    background: #fff;
}

.promo-form__icon {
    color: #94a3b8;
    font-size: 1rem;
    flex-shrink: 0;
    transition: color 0.3s ease;
}

.promo-form__wrapper:focus-within .promo-form__icon {
    color: #3b82f6;
}

.promo-form__input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1rem;
    color: #1e293b;
    padding: 10px 0;
    outline: none;
    min-width: 0;
}

.promo-form__input::placeholder {
    color: #94a3b8;
}

.promo-form__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 12px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.promo-form__btn:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateX(2px);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
}

.promo-form__btn i {
    font-size: 0.85rem;
    transition: transform 0.3s ease;
}

.promo-form__btn:hover i {
    transform: translateX(3px);
}

.promo-form__message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    animation: promo-slide-in 0.3s ease;
}

@keyframes promo-slide-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.promo-form__message--success {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    color: #047857;
    border: 1px solid #a7f3d0;
}

.promo-form__message--error {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #dc2626;
    border: 1px solid #fecaca;
}

.promo-form__message i {
    font-size: 1.1rem;
}

/* Responsive mobile */
@media (max-width: 480px) {
    .promo-form__wrapper {
        flex-direction: column;
        border-radius: 16px;
        padding: 16px;
        gap: 12px;
    }
    
    .promo-form__icon {
        display: none;
    }
    
    .promo-form__input {
        width: 100%;
        text-align: center;
        padding: 8px 0;
    }
    
    .promo-form__btn {
        width: 100%;
        justify-content: center;
    }
}

/* Grille CSS Grid pour les cartes */
.offers-paid__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes par défaut */
    gap: 1.5rem;
    align-items: stretch; /* Toutes les cartes font la même hauteur */
}

/* Grille à 4 colonnes (toutes les offres) */
.offers-paid__grid--4cols {
    grid-template-columns: repeat(4, 1fr);
}

/* Responsive : 2 colonnes sur tablette */
@media (max-width: 1200px) {
    .offers-paid__grid--4cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive : empiler les cartes sur mobile */
@media (max-width: 768px) {
    .offers-paid__grid,
    .offers-paid__grid--4cols {
        grid-template-columns: 1fr; /* Une seule colonne */
        max-width: 450px;
        margin: 0 auto;
    }
}


/* ----------------------------------------------------------------------------
   CARTES D'OFFRES - Style de base
   ---------------------------------------------------------------------------- */

/* Carte d'offre standard */
.offer-card {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e8f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animation au survol */
}

/* Effet de survol : légère élévation + ombre */
.offer-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}


/* ----------------------------------------------------------------------------
   CARTE MISE EN AVANT (Autonomie) - Style spécial
   ---------------------------------------------------------------------------- */

/* Carte "featured" avec bordure indigo et légère mise à l'échelle */
.offer-card--featured {
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    border: 2px solid #6366f1; /* Bordure indigo */
    box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.2); /* Ombre indigo */
    transform: scale(1.02); /* Légèrement plus grande */
    z-index: 2; /* Au-dessus des autres cartes */
}

/* Hover de la carte featured : combine scale + translateY */
.offer-card--featured:hover {
    transform: scale(1.02) translateY(-4px);
}

/* Sur mobile : pas de scale, carte en premier (order: -1) */
@media (max-width: 1024px) {
    .offer-card--featured {
        transform: none;
        order: -1; /* Affichée en premier */
    }
    .offer-card--featured:hover {
        transform: translateY(-4px);
    }
}


/* ----------------------------------------------------------------------------
   RUBAN - Badge en haut de carte (Populaire / Abonnement actuel)
   ---------------------------------------------------------------------------- */

.offer-card__ribbon {
    position: absolute;
    top: -1px; /* Collé au bord supérieur */
    left: 50%;
    transform: translateX(-50%); /* Centré horizontalement */
    background: linear-gradient(135deg, #6366f1, #4f46e5); /* Dégradé indigo */
    color: #fff;
    padding: 0.4rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 0 0 10px 10px; /* Coins arrondis en bas seulement */
}

/* Ruban "Abonnement actuel" (vert émeraude) */
.offer-card__ribbon--current {
    background: linear-gradient(135deg, #10b981, #059669);
}


/* ----------------------------------------------------------------------------
   CARTE ABONNEMENT ACTUEL - Style spécial
   ---------------------------------------------------------------------------- */

.offer-card--current {
    border: 2px solid #10b981; /* Bordure verte */
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.15);
}


/* ----------------------------------------------------------------------------
   CARTE GRATUITE - Légèrement différenciée
   ---------------------------------------------------------------------------- */

.offer-card--free {
    background: linear-gradient(180deg, #fff 0%, #f0fdf4 100%); /* Teinte verte très légère */
}


/* ----------------------------------------------------------------------------
   EN-TÊTE DE CARTE - Nom + description
   ---------------------------------------------------------------------------- */

.offer-card__header {
    margin-bottom: 1.5rem;
    padding-top: 0.5rem;
}

/* Plus d'espace en haut pour les cartes avec ruban */
.offer-card--featured .offer-card__header,
.offer-card--current .offer-card__header,
.offer-card__header--with-ribbon {
    padding-top: 1.5rem;
}

/* Ligne titre + badge côte à côte */
.offer-card__title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

/* Nom de l'offre (ex: "Autonomie") */
.offer-card__name {
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0;
}

/* Badge à côté du titre (ex: "Membres fondateurs") */
.offer-card__badge {
    padding: 0.2rem 0.6rem;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 6px;
    color: #6366f1;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* Badge vert pour l'offre gratuite */
.offer-card__badge--free {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    color: #fff;
}

/* Description courte de l'offre */
.offer-card__tagline {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}

/* ----------------------------------------------------------------------------
   SECTION PRIX - Affichage du tarif
   ---------------------------------------------------------------------------- */

/* Conteneur du prix avec ligne de séparation en bas */
.offer-card__pricing {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    position: relative;
}

/* Badge promo (-X%) */
.offer-card__promo-badge {
    display: inline-block;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    margin-top: 8px;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

/* Prix barré (tarif normal avant réduction early bird) */
.offer-card__price-old {
    display: block;
    color: #94a3b8;
    font-size: 0.9rem;
    text-decoration: line-through;
    margin-bottom: 0.25rem;
}

/* Conteneur flex pour aligner prix + € + /mois */
.offer-card__price-main {
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
}

/* Valeur du prix (ex: "7,90") */
.offer-card__price-value {
    font-size: 2.75rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}

/* Prix en indigo pour la carte featured */
.offer-card--featured .offer-card__price-value {
    color: #6366f1;
}

/* Symbole € */
.offer-card__price-currency {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
}

/* € en indigo pour la carte featured */
.offer-card--featured .offer-card__price-currency {
    color: #6366f1;
}

/* Période "/mois" */
.offer-card__price-period {
    color: #64748b;
    font-size: 0.95rem;
    margin-left: 0.25rem;
}


/* ----------------------------------------------------------------------------
   BARRE DE PLACES RESTANTES - Indicateur visuel
   ---------------------------------------------------------------------------- */

.offer-card__seats {
    margin-bottom: 1.25rem;
}

/* Barre de fond grise */
.offer-card__seats-bar {
    height: 6px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

/* Remplissage de la barre (largeur définie inline via style="width: X%") */
.offer-card__seats-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6); /* Dégradé indigo → violet */
    border-radius: 999px;
    transition: width 0.5s ease; /* Animation fluide */
}

/* Texte "X places restantes" */
.offer-card__seats-text {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}


/* ----------------------------------------------------------------------------
   HIGHLIGHT - Badge temps inclus (ex: "30 min / mois")
   ---------------------------------------------------------------------------- */

.offer-card__highlight {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: rgba(0, 71, 160, 0.08); /* Bleu très léger */
    border-radius: 10px;
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

/* Icône horloge */
.offer-card__highlight i {
    font-size: 0.9rem;
}

/* ----------------------------------------------------------------------------
   LISTE DES FEATURES - Avantages inclus dans l'offre
   ---------------------------------------------------------------------------- */

/* Liste sans puces */
.offer-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    flex: 1; /* Prend l'espace disponible pour aligner les footers */
}

/* Chaque feature avec icône + texte */
.offer-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #f8fafc; /* Séparateur très léger */
    font-size: 0.9rem;
    color: #334155;
}

/* Pas de bordure sur le dernier élément */
.offer-card__features li:last-child {
    border-bottom: none;
}

/* Icône check verte */
.offer-card__features li i {
    margin-top: 0.15rem; /* Alignement vertical avec le texte */
    font-size: 0.8rem;
    color: #10b981; /* Émeraude */
    flex-shrink: 0;
}

/* Feature "grisée" (non incluse dans l'offre) */
.offer-card__feature--muted {
    color: #94a3b8 !important;
}

/* Icône X grise pour les features non incluses */
.offer-card__feature--muted i {
    color: #cbd5e1 !important;
}

/* ----------------------------------------------------------------------------
   FOOTER DE CARTE - Note + bouton CTA
   ---------------------------------------------------------------------------- */

/* Conteneur du footer, collé en bas grâce à margin-top: auto */
.offer-card__footer {
    margin-top: auto;
}

/* Note en italique (ex: "Tarif garanti tant que l'abonnement reste actif") */
.offer-card__note {
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 0.75rem;
    text-align: center;
    font-style: italic;
}


/* ----------------------------------------------------------------------------
   BOUTONS CTA - Styles des boutons d'action
   ---------------------------------------------------------------------------- */

/* Style de base commun à tous les boutons */
.offer-card__btn {
    width: 100%;
    padding: 0.9rem 1.5rem;
    font-weight: 600;
    border-radius: 12px;
    font-size: 0.95rem;
    transition: all 0.2s ease; /* Animation fluide au survol */
}

/* Bouton principal (carte featured) - fond blanc, bordure indigo */
.offer-card__btn.btn-primary {
    background: #fff;
    border: 2px solid #6366f1;
    color: #4f46e5;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
}

/* Hover du bouton principal : se remplit en indigo */
.offer-card__btn.btn-primary:hover {
    transform: translateY(-2px); /* Légère élévation */
    background: #6366f1;
    color: #fff;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3);
}

/* Bouton secondaire (autres cartes) - même style que primary pour cohérence */
.offer-card__btn.btn-outline-primary {
    border: 2px solid #6366f1;
    color: #4f46e5;
    background: #fff;
}

/* Hover du bouton secondaire : même effet de remplissage */
.offer-card__btn.btn-outline-primary:hover {
    transform: translateY(-2px);
    background: #6366f1;
    color: #fff;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3);
}

/* Bouton "Gérer mon abonnement" (carte actuelle) - vert émeraude */
.offer-card__btn--current {
    border: 2px solid #10b981;
    color: #059669;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.offer-card__btn--current:hover {
    transform: translateY(-2px);
    background: #10b981;
    color: #fff;
    border-color: #10b981;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
}

.offer-card__btn--current i {
    font-size: 0.9rem;
}


/* ----------------------------------------------------------------------------
   SECTION DE CONFIANCE - Badges de réassurance
   ---------------------------------------------------------------------------- */

/* Conteneur flex centré */
.offers-trust {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    padding-top: 2rem;
    border-top: 1px solid #e2e8f0;
}

/* Chaque badge (icône + texte) */
.offers-trust__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #64748b;
    font-size: 0.9rem;
}

/* Icône verte */
.offers-trust__item i {
    color: #10b981; /* Émeraude */
    font-size: 1.1rem;
}


/* ----------------------------------------------------------------------------
   RESPONSIVE - Adaptations mobile
   ---------------------------------------------------------------------------- */

@media (max-width: 768px) {
    /* Bannière gratuite : passage en colonne */
    .offers-free-banner__content {
        flex-direction: column;
        text-align: center;
    }
    
    .offers-free-banner__features {
        justify-content: center;
    }
    
    /* Moins d'espace entre les badges de confiance */
    .offers-trust {
        gap: 1.5rem;
    }
}

/* Badges de statut (brouillon / publié…) : espace membre, /cours (mode admin), accordéon leçons */
.course-status-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(15, 23, 42, 0.04);
    color: #374151;
    text-transform: uppercase;
}
.course-status-badge--draft {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.25);
    color: #1d4ed8;
}
/* Statut publié : utile dans la liste admin des leçons (dashboard) et sur /cours en mode admin */
.course-status-badge--published {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.28);
    color: #15803d;
}
.course-status-badge--archived {
    background: rgba(17, 24, 39, 0.08);
    border-color: rgba(17, 24, 39, 0.18);
    color: #111827;
}

/* ============================================================================
   COURS - PROGRAMME (/cours) : accordéon niveaux / unités / leçons
   (police = héritée du site, pas Nunito)
   ============================================================================ */
.course-program {
    padding-bottom: 5rem;
}
.course-program.course-program--member-progress {
    padding-bottom: 0;
}
.course-program__page-title {
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--primary, #1a1a2e);
}
.course-program .levels-list {
    max-width: 740px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.course-program .level-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    border: 1.5px solid #e8e8f0;
    transition: box-shadow 0.2s;
}
.course-program .level-card:hover {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.11);
}
.course-program .level-card.accent-pink {
    border-left: 4px solid #e85d75;
}
.course-program .level-card.accent-blue {
    border-left: 4px solid #3b82f6;
}
.course-program .level-card.accent-teal {
    border-left: 4px solid #0d9488;
}
.course-program .level-card.accent-indigo {
    border-left: 4px solid #6366f1;
}
.course-program .level-card.accent-amber {
    border-left: 4px solid #f59e0b;
}
.course-program .level-card.accent-rose {
    border-left: 4px solid #f43f5e;
}
.course-program .level-header {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 18px 20px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    border: none;
    background: transparent;
    text-align: left;
    font: inherit;
    color: inherit;
}
.course-program .level-badge {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}
.course-program .accent-pink .level-badge {
    background: #fde8ec;
    color: #e85d75;
}
.course-program .accent-blue .level-badge {
    background: #dbeafe;
    color: #3b82f6;
}
.course-program .accent-teal .level-badge {
    background: #ccfbf1;
    color: #0d9488;
}
.course-program .accent-indigo .level-badge {
    background: #e0e7ff;
    color: #6366f1;
}
.course-program .accent-amber .level-badge {
    background: #fef3c7;
    color: #f59e0b;
}
.course-program .accent-rose .level-badge {
    background: #ffe4e6;
    color: #f43f5e;
}
.course-program .level-info {
    flex: 1;
    min-width: 0;
}
.course-program .level-title {
    font-size: 1rem;
    font-weight: 800;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.course-program .level-subtitle {
    font-size: 0.78rem;
    color: #888;
    margin-top: 2px;
}
.course-program .level-progress-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.course-program .progress-bar-bg {
    width: 90px;
    height: 6px;
    background: #e8e8f0;
    border-radius: 99px;
    overflow: hidden;
}
.course-program .progress-bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.5s ease;
}
.course-program .accent-pink .progress-bar-fill {
    background: #e85d75;
}
.course-program .accent-blue .progress-bar-fill {
    background: #3b82f6;
}
.course-program .accent-teal .progress-bar-fill {
    background: #0d9488;
}
.course-program .accent-indigo .progress-bar-fill {
    background: #6366f1;
}
.course-program .accent-amber .progress-bar-fill {
    background: #f59e0b;
}
.course-program .accent-rose .progress-bar-fill {
    background: #f43f5e;
}
.course-program .pct-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #3b82f6;
    min-width: 34px;
    text-align: right;
}
.course-program .accent-pink .pct-label {
    color: #e85d75;
}
.course-program .accent-teal .pct-label {
    color: #0d9488;
}
.course-program .accent-indigo .pct-label {
    color: #6366f1;
}
.course-program .accent-amber .pct-label {
    color: #f59e0b;
}
.course-program .accent-rose .pct-label {
    color: #f43f5e;
}
.course-program .chevron {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #bbb;
    transform: rotate(-90deg);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.course-program .level-card.open > .level-header .chevron {
    transform: rotate(0deg);
}
.course-program .level-desc {
    font-size: 0.82rem;
    color: #666;
    line-height: 1.55;
    padding: 0 20px 16px 78px;
    margin: 0;
}
.course-program .units-container {
    border-top: 1px solid #f0f0f6;
    overflow: hidden;
    display: none;
}
.course-program .units-inner {
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.course-program .unit-item {
    background: #f9f9fc;
    border-radius: 12px;
    border: 1.5px solid #ebebf5;
    overflow: hidden;
    transition: border-color 0.2s;
}
.course-program .unit-item.is-expanded {
    border-color: #c7d7fd;
}
.course-program .unit-item--locked {
    opacity: 0.92;
}
.course-program .unit-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.course-program .unit-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #e8edfb;
    color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
}
.course-program .accent-pink .unit-icon {
    background: #fde8ec;
    color: #e85d75;
}
.course-program .accent-teal .unit-icon {
    background: #ccfbf1;
    color: #0d9488;
}
.course-program .accent-indigo .unit-icon {
    background: #e0e7ff;
    color: #6366f1;
}
.course-program .accent-amber .unit-icon {
    background: #fef3c7;
    color: #d97706;
}
.course-program .accent-rose .unit-icon {
    background: #ffe4e6;
    color: #f43f5e;
}
.course-program .unit-info {
    flex: 1;
    min-width: 0;
}
.course-program .unit-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    vertical-align: top;
}
.course-program .unit-name:hover {
    color: var(--blue, #0047a0);
    text-decoration: underline;
}
.course-program .unit-count {
    font-size: 0.72rem;
    color: #aaa;
    margin-top: 1px;
}
.course-program .unit-progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    cursor: default;
}
.course-program .unit-bar-bg {
    width: 60px;
    height: 5px;
    background: #e0e0eb;
    border-radius: 99px;
    overflow: hidden;
}
.course-program .unit-bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.4s;
    background: #3b82f6;
}
.course-program .accent-pink .unit-bar-fill {
    background: #e85d75;
}
.course-program .accent-teal .unit-bar-fill {
    background: #0d9488;
}
.course-program .accent-indigo .unit-bar-fill {
    background: #6366f1;
}
.course-program .accent-amber .unit-bar-fill {
    background: #f59e0b;
}
.course-program .accent-rose .unit-bar-fill {
    background: #f43f5e;
}
.course-program .unit-pct {
    font-size: 0.75rem;
    font-weight: 700;
    color: #3b82f6;
    min-width: 30px;
    text-align: right;
}
.course-program .accent-pink .unit-pct {
    color: #e85d75;
}
.course-program .accent-teal .unit-pct {
    color: #0d9488;
}
.course-program .accent-indigo .unit-pct {
    color: #6366f1;
}
.course-program .accent-amber .unit-pct {
    color: #f59e0b;
}
.course-program .accent-rose .unit-pct {
    color: #f43f5e;
}
/* Deux glyphes FA ; !important pour passer outre les règles .fas / Bootstrap */
.course-program .unit-chevron-slot {
    flex-shrink: 0;
    width: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    font-size: 0.75rem;
    line-height: 1;
}
.course-program .unit-chevron-icon--closed {
    display: inline-block !important;
}
.course-program .unit-chevron-icon--open {
    display: none !important;
}
.course-program .unit-item.is-expanded .unit-chevron-icon--closed,
.course-program .unit-header[aria-expanded="true"] .unit-chevron-icon--closed {
    display: none !important;
}
.course-program .unit-item.is-expanded .unit-chevron-icon--open,
.course-program .unit-header[aria-expanded="true"] .unit-chevron-icon--open {
    display: inline-block !important;
}
.course-program .lessons-container {
    overflow: hidden;
    display: none;
    background: #fff;
    border-top: 1px solid #ebebf5;
}
.course-program .lessons-inner {
    padding: 8px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.course-program .lesson-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
    border: none;
    background: transparent;
    font: inherit;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}
.course-program a.lesson-row:hover {
    background: #f0f4ff;
}
.course-program .lesson-row--locked {
    cursor: default;
}
.course-program .lesson-row--locked:hover {
    background: rgba(15, 23, 42, 0.03);
}
.course-program .lesson-dot {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #d1d5e0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition:
        border-color 0.2s,
        background 0.2s;
}
.course-program .lesson-row.done .lesson-dot {
    background: #3b82f6;
    border-color: #3b82f6;
}
.course-program .accent-pink .lesson-row.done .lesson-dot {
    background: #e85d75;
    border-color: #e85d75;
}
.course-program .accent-teal .lesson-row.done .lesson-dot {
    background: #0d9488;
    border-color: #0d9488;
}
.course-program .accent-indigo .lesson-row.done .lesson-dot {
    background: #6366f1;
    border-color: #6366f1;
}
.course-program .accent-amber .lesson-row.done .lesson-dot {
    background: #f59e0b;
    border-color: #f59e0b;
}
.course-program .accent-rose .lesson-row.done .lesson-dot {
    background: #f43f5e;
    border-color: #f43f5e;
}
.course-program .lesson-row.done .lesson-dot::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}
.course-program .lesson-label {
    flex: 1;
    font-size: 0.83rem;
    color: #333;
    line-height: 1.35;
    min-width: 0;
}
.course-program .lesson-row.done .lesson-label {
    color: #999;
    text-decoration: line-through;
    text-decoration-color: #bbb;
}
.course-program .lesson-type {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.course-program .tag-lecon {
    background: #dbeafe;
    color: #3b82f6;
}
.course-program .tag-grammar {
    background: #fef3c7;
    color: #d97706;
}
.course-program .tag-exo {
    background: #dcfce7;
    color: #16a34a;
}
.course-program .tag-plus-loin {
    background: #ede9fe;
    color: #6d28d9;
}
.course-program .tag-topik {
    background: #fce7f3;
    color: #be185d;
}
.course-program .tag-premium {
    background: #fef3c7;
    color: #92400e;
}
.course-program .empty-state {
    text-align: center;
    padding: 20px;
    color: #bbb;
    font-size: 0.82rem;
}
@media (max-width: 500px) {
    .course-program .progress-bar-bg {
        width: 60px;
    }
    .course-program .level-desc {
        padding-left: 20px;
    }
}

/* ============================================================================
   COURS /cours : onglets Parcours vs thématiques (hors niveaux)
   ============================================================================ */
.course-page-tabs {
    max-width: 920px;
    margin: 0 auto;
}
.course-page-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.85rem;
    padding: 0.45rem 0.5rem;
    border-radius: 999px;
    background: linear-gradient(165deg, #f8fafc 0%, #eef2f7 55%, #e8edf5 100%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.75) inset,
        0 8px 32px rgba(15, 23, 42, 0.06),
        0 2px 8px rgba(15, 23, 42, 0.04);
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.course-page-tab {
    position: relative;
    border: 1px solid transparent;
    background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
    color: #5c6578;
    padding: 0.62rem 1.2rem;
    min-height: 2.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    cursor: pointer;
    font-family: inherit;
    transition:
        transform 0.2s cubic-bezier(0.34, 1.2, 0.64, 1),
        box-shadow 0.22s ease,
        background 0.22s ease,
        color 0.22s ease,
        border-color 0.22s ease;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
.course-page-tab:hover:not(.is-active) {
    transform: translateY(-1px);
    color: #334155;
    border-color: rgba(148, 163, 184, 0.35);
    box-shadow:
        0 4px 16px rgba(15, 23, 42, 0.07),
        0 1px 0 rgba(255, 255, 255, 0.95) inset;
}
.course-page-tab:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(0, 71, 160, 0.2),
        0 4px 16px rgba(15, 23, 42, 0.08);
}
.course-page-tab.is-active {
    transform: translateY(-1px);
    font-weight: 800;
}
.course-page-tab.is-active[data-tab-tone="parcours"] {
    background: linear-gradient(180deg, #f0f7ff 0%, #dbeafe 45%, #cfe4ff 100%);
    color: #1e3a8a;
    border-color: rgba(59, 130, 246, 0.42);
    box-shadow:
        0 6px 20px rgba(37, 99, 235, 0.2),
        0 1px 0 rgba(255, 255, 255, 0.65) inset;
}
.course-page-tab.is-active[data-tab-tone="vocabulary"] {
    background: linear-gradient(180deg, #f0fdf6 0%, #dcfce7 45%, #ccf7dc 100%);
    color: #14532d;
    border-color: rgba(34, 197, 94, 0.4);
    box-shadow:
        0 6px 20px rgba(22, 163, 74, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.65) inset;
}
.course-page-tab.is-active[data-tab-tone="conjugation"] {
    background: linear-gradient(180deg, #f5f3ff 0%, #ede9fe 45%, #e4dcff 100%);
    color: #4c1d95;
    border-color: rgba(124, 58, 237, 0.4);
    box-shadow:
        0 6px 20px rgba(124, 58, 237, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.65) inset;
}
.course-page-tab.is-active[data-tab-tone="expressions"] {
    background: linear-gradient(180deg, #fffbeb 0%, #ffedd5 45%, #ffe4c2 100%);
    color: #9a3412;
    border-color: rgba(234, 88, 12, 0.38);
    box-shadow:
        0 6px 20px rgba(234, 88, 12, 0.16),
        0 1px 0 rgba(255, 255, 255, 0.65) inset;
}
.course-page-tab.is-active[data-tab-tone="proverbs"] {
    background: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 45%, #ffd6dc 100%);
    color: #9f1239;
    border-color: rgba(225, 29, 72, 0.38);
    box-shadow:
        0 6px 20px rgba(225, 29, 72, 0.16),
        0 1px 0 rgba(255, 255, 255, 0.65) inset;
}
@media (max-width: 640px) {
    .course-page-tablist {
        border-radius: 22px;
        max-width: 100%;
        padding: 0.5rem 0.45rem;
    }
    .course-page-tab {
        padding: 0.52rem 0.95rem;
        font-size: 0.76rem;
    }
}
.course-page-panel {
    padding-bottom: 0.5rem;
}
.course-page-panel-intro {
    max-width: 36rem;
    margin: 0 auto 1.25rem;
}
.course-resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    max-width: 920px;
    margin: 0 auto;
}
.course-resource-card {
    background: #fff;
    border: 1.5px solid #e8e8f0;
    border-radius: 16px;
    padding: 1.1rem 1.15rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
    position: relative;
    overflow: hidden;
}
.course-resource-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--course-resource-accent, #3b82f6);
}
.course-resource-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}
.course-resource-card--link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.course-resource-card--voc {
    --course-resource-accent: #16a34a;
}
.course-resource-card--premium {
    --course-resource-accent: #d4a017;
}
.course-resource-card--conj {
    --course-resource-accent: #7c3aed;
}
.course-resource-card--conj .course-resource-card__title {
    margin-bottom: 0;
}
.course-resource-card--expr {
    --course-resource-accent: #ea580c;
}
.course-resource-card__head {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 0.65rem;
}
.course-resource-card__icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    background: color-mix(in srgb, var(--course-resource-accent) 14%, #fff);
    color: var(--course-resource-accent);
}
.course-resource-card__title {
    font-size: 0.95rem;
    font-weight: 800;
    margin: 0 0 0.2rem;
    color: #1a1a2e;
    line-height: 1.25;
}
.course-resource-card__subtitle {
    font-size: 0.78rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}
.course-resource-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.course-resource-chip {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
}
.course-resource-chip--draft {
    background: #fff7ed;
    color: #9a3412;
}
.course-resource-soon {
    text-align: center;
    padding: 2rem 1.25rem;
    border-radius: 16px;
    border: 1.5px dashed #cfd8e8;
    background: #fafbfc;
    max-width: 520px;
    margin: 0 auto;
}

/* ============================================================================
   COURS - LECTURE (page unité -> leçons + blocks)
   ============================================================================
   Design inspiré de la maquette fournie (menu latéral + contenu).
   ATTENTION : ne pas confondre avec le builder admin (classes .lesson-*)
   NOTE :
   - Les valeurs d’offset (top / scroll-margin-top) sont alignées avec
     `public/js/course_reader.js` qui calcule le scroll en tenant compte
     de la navbar.
   ============================================================================ */
.course-reader {
    padding: 170px 0 80px;
    background:
        radial-gradient(circle at top left, #e5f2ff 0, transparent 55%),
        radial-gradient(circle at bottom right, #fee2e2 0, transparent 55%),
        #f7f8fb;
    min-height: 100vh;
}
.course-reader-container {
    max-width: 1200px;
}
.course-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.92rem;
    color: #6b7280;
    margin-bottom: 0.35rem;
}
.course-breadcrumb a {
    color: var(--blue);
    font-weight: 700;
}
.course-breadcrumb a:hover {
    text-decoration: underline;
}
.course-breadcrumb__sep {
    color: #cbd5e1;
}
.course-breadcrumb__current {
    color: #111827;
    font-weight: 700;
}
.course-reader-title h1 {
    color: var(--primary);
    margin: 0.2rem 0 0.6rem;
    letter-spacing: -0.02em;
}

.course-reader-layout {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.2rem 0 0;
}

.course-lesson-nav {
    position: sticky;
    top: 110px;
    flex: 0 0 260px;
    align-self: flex-start;
}
.course-lesson-nav__inner {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(249, 250, 251, 0.95);
    border: 1px solid rgba(209, 213, 219, 0.8);
    border-radius: 18px;
    position: relative;
    padding: 0.9rem 0.85rem 0.85rem;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}
.course-lesson-nav__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #9ca3af;
    margin-bottom: 0.45rem;
}
.course-lesson-nav__list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    padding: 0;
    margin: 0;
    list-style: none;
}
.course-lesson-nav__link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    font-size: 0.92rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    color: #4b5563;
    border: 1px solid transparent;
    background: transparent;
    transition: all 0.25s ease;
    width: 100%;
}
.course-lesson-nav__link:hover {
    border-color: rgba(148, 163, 184, 0.7);
    background: #e5f0ff;
    color: #1f2937;
}
.course-lesson-nav__link.is-active {
    background: #111827;
    color: #f9fafb;
    border-color: #111827;
    font-weight: 700;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}
.course-lesson-nav__index {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    background: rgba(15, 23, 42, 0.06);
    flex: 0 0 28px;
}
.course-lesson-nav__link.is-active .course-lesson-nav__index {
    background: rgba(255, 255, 255, 0.14);
}

/* -------------------- Nouveau menu de navigation (lesson-nav) -------------------- */
.lesson-nav {
    --bg: #f4f7ff;
    --panel: #ffffff;
    --ink: #101828;
    --muted: #667085;
    --line: #d9e2ff;
    --soft: #edf2ff;
    --active: #0b1220;
    --activeText: #ffffff;
    --badge: #2f6bff;

    position: sticky;
    top: 110px;
    flex: 0 0 280px;
    align-self: flex-start;
    width: 280px;
    background: var(--bg);
    border: 1px solid rgba(16, 24, 40, 0.08);
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 14px 30px rgba(16, 24, 40, 0.10);
}

.lesson-nav__head {
    padding: 6px 6px 12px 6px;
}
.lesson-nav__level {
    font: 600 12px/1.2 "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--muted);
    letter-spacing: 0.06em;
}
.lesson-nav__title {
    margin-top: 4px;
    font: 800 12px/1.2 "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: rgba(16, 24, 40, 0.55);
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.conjugation-main-items,
.conjugation-section__items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.conjugation-section {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 20px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}
.conjugation-section--group {
    border-left: 5px solid #0f766e;
}
.conjugation-section--entry {
    border-left: 5px solid #1d4ed8;
}
.conjugation-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.conjugation-group__header {
    padding: 0.2rem 0.1rem 0;
}
.conjugation-group__eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0f766e;
}
.conjugation-group__title {
    margin: 0;
    font-size: clamp(1.45rem, 2vw, 1.85rem);
    font-weight: 900;
    line-height: 1.1;
    color: #0f172a;
}
.conjugation-group__description {
    margin: 0.55rem 0 0;
    color: #475569;
}
.conjugation-section__summary {
    list-style: none;
    cursor: pointer;
}
.conjugation-section__summary::-webkit-details-marker {
    display: none;
}
.conjugation-section__summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
}
.conjugation-section__summary-copy {
    min-width: 0;
}
.conjugation-section__eyebrow {
    display: inline-block;
    margin-bottom: 0.4rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}
.conjugation-section__title {
    margin: 0;
    font-size: 1.08rem;
    color: #0f172a;
}
.conjugation-section__description {
    margin: 0.45rem 0 0;
    color: #475569;
}
.conjugation-section__summary-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.conjugation-section__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.8rem;
    font-weight: 700;
}
.conjugation-section__caret {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef2ff;
    color: #334155;
    transition: transform 0.2s ease;
}
.conjugation-section[open] > .conjugation-section__summary .conjugation-section__caret {
    transform: rotate(180deg);
}
.conjugation-section__panel {
    padding: 0 1.2rem 1.2rem;
}
.conjugation-block {
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 16px;
    background: #f8fafc;
    overflow: hidden;
}
.conjugation-block__panel {
    padding: 1rem;
}
.conjugation-block__title {
    margin: 0 0 0.85rem;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}
.conjugation-block-note {
    margin: 0;
}
.conjugation-block-warning {
    margin: 0;
}
.conjugation-richcontent {
    color: #334155;
}
.conjugation-richcontent__paragraph {
    margin: 0 0 0.8rem;
    line-height: 1.75;
}
.conjugation-richcontent__paragraph:last-child {
    margin-bottom: 0;
}
.conjugation-richcontent__list {
    margin: 0 0 0.9rem 1.1rem;
    padding-left: 1rem;
}
.conjugation-richcontent__list:last-child {
    margin-bottom: 0;
}
.conjugation-richcontent__list-item {
    margin-bottom: 0.55rem;
    line-height: 1.75;
}
.conjugation-richcontent__list-item:last-child {
    margin-bottom: 0;
}
.conjugation-richcontent__paragraph--accent,
.conjugation-richcontent__list-item--accent {
    color: #dc2626;
    font-weight: 800;
}
.conjugation-richcontent__paragraph--emphasis,
.conjugation-richcontent__list-item--emphasis {
    color: #0f172a;
    font-weight: 700;
}
.conjugation-richcontent__paragraph--warning,
.conjugation-richcontent__list-item--warning {
    color: #b91c1c;
    font-weight: 800;
}
.conjugation-richtext {
    padding: 0.15rem 0.1rem;
    color: #334155;
}
.conjugation-richtext__title {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    color: #0f172a;
}
.lesson-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.lesson-step {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 10px;
    align-items: start;
    position: relative;
    padding: 6px 0;
}

/* ligne verticale (timeline) */
.lesson-step::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--line);
}
.lesson-step:first-child::before {
    top: 20px;
}
.lesson-step:last-child::before {
    bottom: 20px;
}

.lesson-step__dot {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--soft);
    color: var(--muted);
    font: 700 12px/1 "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    border: 1px solid rgba(16, 24, 40, 0.08);
    position: relative;
    z-index: 1;
}

.lesson-step__card {
    background: var(--panel);
    border: 1px solid rgba(16, 24, 40, 0.08);
    border-radius: 16px;
    padding: 12px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.lesson-step__card:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(16, 24, 40, 0.10);
    border-color: rgba(47, 107, 255, 0.25);
}

.lesson-step__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.lesson-step__kicker {
    font: 700 12px/1.1 "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: rgba(16, 24, 40, 0.70);
}
.lesson-step__name {
    font: 700 14px/1.2 "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--ink);
    white-space: normal;
    word-break: break-word;
}

/* Badge (DRAFT, etc.) */
.lesson-badge {
    flex: 0 0 auto;
    font: 800 11px/1 "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    padding: 6px 10px;
    border-radius: 999px;
    letter-spacing: 0.04em;
}
.lesson-badge.is-draft {
    color: var(--badge);
    background: rgba(47, 107, 255, 0.10);
    border: 1px solid rgba(47, 107, 255, 0.25);
}

/* état actif */
.lesson-step.is-active .lesson-step__dot {
    background: rgba(11, 18, 32, 0.12);
    color: rgba(11, 18, 32, 0.85);
    border-color: rgba(11, 18, 32, 0.18);
}

.lesson-step.is-active .lesson-step__card {
    background: var(--active);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 30px rgba(11, 18, 32, 0.25);
}

.lesson-step.is-active .lesson-step__kicker,
.lesson-step.is-active .lesson-step__name {
    color: var(--activeText);
}

.lesson-step.is-active .lesson-badge.is-draft {
    color: #a9c2ff;
    background: rgba(47, 107, 255, 0.16);
    border-color: rgba(169, 194, 255, 0.25);
}

.course-lesson-main {
    flex: 1;
    min-width: 0;
}
.course-lesson {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
    padding: 1.8rem 1.6rem 2rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(209, 213, 219, 0.7);
    scroll-margin-top: 110px;
}
.course-lesson-header h2 {
    color: #111827;
    border-bottom: 1px solid rgba(209, 213, 219, 0.9);
    padding-bottom: 0.55rem;
    margin-bottom: 0.5rem;
    font-size: 1.55rem;
    letter-spacing: -0.02em;
}
.course-lesson-subtitle {
    font-size: 0.95rem;
    color: #6b7280;
    margin-bottom: 0.8rem;
}
.course-lesson-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1rem;
    font-size: 0.9rem;
    color: #6b7280;
}
.course-lesson-meta__item i {
    color: var(--blue);
    margin-right: 0.35rem;
}
.course-lesson-content {
    margin-top: 1.4rem;
}

.course-lesson--questions {
    border-style: dashed;
}

.course-question-form {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 1rem;
    margin-bottom: 0;
}

.course-question-search__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
}

.course-question-search__input.form-control {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    height: 2.5rem;
    padding: 0.5rem 0.85rem;
    font-size: 0.9375rem;
    border: 2px solid #94a3b8 !important;
    border-radius: 10px;
    background-color: #e2e8f0 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.course-question-search__input.form-control::placeholder {
    color: #64748b;
}

.course-question-search__input.form-control:focus {
    border-color: var(--accent) !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(0, 71, 160, 0.15);
    outline: none;
}

.course-question-search__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.35rem;
}

.course-question-search__btn {
    height: 2.5rem;
    padding: 0 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.course-question-search__btn.btn-primary {
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
}

.course-question-search__btn.btn-primary:hover {
    border-color: #003a82;
    background: #003a82;
    color: #fff;
}

.course-question-search__btn.btn-outline-secondary {
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: #4b5563;
}

.course-question-search__btn.btn-outline-secondary:hover {
    background: #f3f4f6;
    border-color: rgba(0, 0, 0, 0.2);
    color: #1f2937;
}

.course-question-results {
    margin-top: 0.4rem;
}

.course-question-list {
    display: grid;
    gap: 1.75rem;
}

.course-question-item {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.25rem 1.35rem;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.course-question-item__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #eef2f7;
}

.course-question-item__author {
    font-weight: 700;
    color: #111827;
}

.course-question-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    align-items: center;
}

.course-question-item__question {
    margin: 0;
    color: #1f2937;
    line-height: 1.65;
}

.course-question-item__question-block {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.85rem;
}

.course-question-item__label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #4b5563;
    margin-bottom: 0.35rem;
}

.course-question-item__answer {
    background: #f8fafc;
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    margin-top: 0.5rem;
    padding: 0.9rem 1rem;
    color: #111827;
}

.course-question-item__answer-body {
    border-top: 1px solid #e0e7ff;
    margin-top: 0.5rem;
    padding-top: 0.6rem;
}

.course-question-item__answer-complement {
    margin-top: 1rem;
    padding: 0.75rem 0.9rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    border-left: 3px solid #94a3b8;
}

.course-question-item__answer-complement-label {
    display: block;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 0.35rem;
}

.course-question-item__answer-complement-body {
    color: #334155;
    line-height: 1.6;
}

.course-question-item__answer-credit {
    font-size: 0.83rem;
    color: #475569;
    margin-top: 0.1rem;
    margin-bottom: 0.3rem;
}

.course-question-proposal-form {
    background: #f8fafc;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    padding: 0.7rem;
}

.course-question-proposal-submit {
    font-weight: 700;
    padding: 0.38rem 0.95rem;
    border-color: #198754;
    background: #198754;
    color: #ffffff;
}

.course-question-proposal-submit:hover,
.course-question-proposal-submit:focus {
    border-color: #157347;
    background: #157347;
    color: #ffffff;
}

.course-question-ask-toggle {
    border-radius: 999px;
    padding-inline: 1rem;
    font-weight: 700;
}

.course-question-ask .collapse.show {
    animation: questionAskReveal 0.2s ease-out;
}

@keyframes questionAskReveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.unit-question-admin-filters {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    background: linear-gradient(180deg, #f8f9ff 0%, #eef2ff 100%);
    border: 1px solid #dbe3ff;
    border-radius: 999px;
    padding: 0.35rem;
}

.unit-question-admin-filter {
    color: #1d4ed8;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.88rem;
    border-radius: 999px;
    padding: 0.4rem 0.8rem;
    border: 1px solid transparent;
    transition: all 0.14s ease;
}

.unit-question-admin-filter:hover {
    background: #ffffff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.unit-question-admin-filter.is-active {
    background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
    border-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.25);
}

/* ============================================================================
   ADMIN QUESTIONS / RÉPONSES (unit_questions) – design allégé, cartes aérées
   ============================================================================ */
.uq-admin-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.uq-admin-filters {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.uq-admin-filter {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(0, 71, 160, 0.2);
    background: #fff;
    transition: all 0.2s ease;
}

.uq-admin-filter:hover {
    background: rgba(0, 71, 160, 0.06);
    border-color: var(--accent);
    color: var(--accent);
}

.uq-admin-filter.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.uq-admin-count {
    font-size: 0.9rem;
    color: #6b7280;
}

.uq-contrib-card {
    padding: 1.5rem 1.75rem;
}

.uq-contrib-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.uq-contrib-form {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.uq-contrib-form__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.uq-contrib-form__input {
    min-width: 160px;
    padding: 0.45rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    background: #fff;
}

.uq-contrib-form__input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 71, 160, 0.1);
    outline: none;
}

.uq-contrib-form__btn {
    border-radius: 10px;
    padding: 0.45rem 1rem;
    font-weight: 600;
}

.uq-contrib-help {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0;
    max-width: 420px;
}

.uq-contrib-empty {
    text-align: center;
    padding: 2.5rem 1.5rem;
    color: #6b7280;
}

.uq-contrib-empty__icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.75rem;
    opacity: 0.6;
}

.uq-contrib-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.uq-contrib-item {
    display: flex;
    align-items: center;
    gap: 1rem 1.25rem;
    padding: 0.85rem 1rem;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.uq-contrib-item__rank {
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #9ca3af;
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.uq-contrib-item__user {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.uq-contrib-item__avatar {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent);
    background: rgba(0, 71, 160, 0.1);
    border-radius: 50%;
}

.uq-contrib-item__name {
    font-weight: 600;
    color: #1f2937;
}

.uq-contrib-item__stats {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.uq-contrib-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 8px;
}

.uq-contrib-badge--total {
    background: #d1fae5;
    color: #065f46;
}

.uq-contrib-badge--month {
    background: #dbeafe;
    color: #1e40af;
}

.uq-banned-item__reason {
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
    color: #4b5563;
    line-height: 1.4;
}

.uq-banned-item__actions {
    flex-shrink: 0;
}

.uq-empty {
    padding: 2.5rem;
    text-align: center;
}

.uq-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.uq-card {
    padding: 1.5rem 1.75rem;
    border-radius: 20px;
}

.uq-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.uq-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.uq-card__author {
    font-weight: 600;
    color: var(--dark);
}

.uq-card__date {
    font-size: 0.875rem;
    color: #6b7280;
}

.uq-card__block-reason {
    font-size: 0.8rem;
    color: #9ca3af;
    font-style: italic;
}

.uq-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.uq-badge--pending {
    background: #fef3c7;
    color: #92400e;
}

.uq-badge--approved {
    background: #d1fae5;
    color: #065f46;
}

.uq-badge--spam {
    background: #fee2e2;
    color: #991b1b;
}

.uq-badge--rejected {
    background: #e5e7eb;
    color: #374151;
}

.uq-badge--blocked {
    background: #fecaca;
    color: #b91c1c;
}

.uq-card__context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    font-size: 0.875rem;
}

.uq-card__unit {
    font-weight: 600;
    color: var(--dark);
}

.uq-card__lesson {
    color: #6b7280;
}

.uq-card__link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.uq-card__link:hover {
    text-decoration: underline;
}

.uq-card__body {
    margin-bottom: 1.25rem;
}

.uq-card__question {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #374151;
    max-width: 72ch;
}

.uq-card__reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.75rem;
}

.uq-card__proposals {
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.uq-card__proposals-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
}

.uq-proposal {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.uq-proposal:last-of-type {
    border-bottom: none;
}

.uq-proposal__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.35rem;
}

.uq-proposal__author {
    font-weight: 600;
    font-size: 0.875rem;
}

.uq-proposal__date {
    font-size: 0.8rem;
    color: #9ca3af;
}

.uq-proposal__text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #4b5563;
    margin: 0 0 0.5rem 0;
}

.uq-proposal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.uq-proposal__append {
    flex: 1 1 100%;
    margin-bottom: 0.4rem;
}

.uq-proposal__append .form-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
}

.uq-card__actions {
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.uq-card__reply {
    margin-bottom: 1rem;
}

.uq-card__reply-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 0.35rem;
}

.uq-card__reply textarea {
    margin-bottom: 0.6rem;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 0.9rem;
    min-height: 11rem;
}

.uq-card__reply-textarea {
    min-height: 11rem;
}

.uq-card__reply-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.uq-card__moderate {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.uq-card__ban {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.uq-card__ban .form-control {
    min-width: 180px;
    max-width: 240px;
    font-size: 0.875rem;
}

.uq-card__reviewed {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
}

.uq-pagination {
    margin-top: 2rem;
}

.uq-pagination .pagination {
    gap: 0.25rem;
}

/* -------------------- Typo et blocks -------------------- */
.course-heading {
    color: #111827;
    margin: 1.4rem 0 0.85rem;
}
/* Espace avant chaque titre (h2/h3/h4) dans le contenu de leçon : sélecteur ciblé pour primer sur les resets */
.course-lesson-content .course-heading,
.course-lesson-content h3.course-heading,
.course-lesson-content h4.course-heading,
.course-lesson-content h5.course-heading {
    margin-top: 2.25rem;
    margin-bottom: 0.85rem;
}
.course-lesson-content .course-heading:first-child {
    margin-top: 0.5rem;
}
.course-heading--h2 {
    font-size: 1.25rem;
}
.course-heading--h3 {
    font-size: 1.1rem;
}
.course-heading--h4 {
    font-size: 1rem;
}
.course-paragraph {
    color: #374151;
    font-size: 0.98rem;
    line-height: 1.7;
}
/* Passage à la ligne = deux <p> consécutifs : espace minimal (proche du mode édition) */
.course-paragraph p {
    margin-top: 0;
    margin-bottom: 0.02em;
}
.course-paragraph p:last-child {
    margin-bottom: 0;
}
/* <br> seul dans un paragraphe = pas d’espace ajouté (l’interligne suffit) */
.course-paragraph br {
    display: block;
    margin: 0;
    line-height: 0.4;
}
/* Saut de ligne = <p><br></p> : espace visible (padding pour éviter tout collapse), bien distinct du passage à la ligne */
.course-paragraph p:has(> br:only-child) {
    margin: 0;
    padding: 0.6em 0;
    line-height: 0;
    min-height: 0;
}
.course-paragraph p:has(> br:only-child) br {
    display: block;
    height: 0;
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
}
/* Listes (ul/ol et listes Quill .bulleted-list dans .indented) : espacement serré, cohérent avec les paragraphes */
.course-paragraph ol,
.course-paragraph ul,
.course-paragraph .indented ul,
.course-paragraph .bulleted-list {
    margin: 0.15em 0;
    padding-left: 1.5em;
}
.course-paragraph li {
    margin-bottom: 0.12em;
}
.course-paragraph ol ol,
.course-paragraph ul ul,
.course-paragraph ol ul,
.course-paragraph ul ol,
.course-paragraph .indented ul ul,
.course-paragraph .bulleted-list .bulleted-list {
    margin: 0.12em 0;
}
/* Listes ordonnées imbriquées (HTML standard) */
.course-paragraph ol { list-style-type: decimal; }
.course-paragraph ol ol { list-style-type: upper-alpha; }
.course-paragraph ol ol ol { list-style-type: lower-alpha; }
.course-paragraph ol ol ol ol { list-style-type: lower-roman; }
/* Indentation Quill */
.course-paragraph .ql-indent-1 { padding-left: 2em; }
.course-paragraph .ql-indent-2 { padding-left: 4em; }
.course-paragraph .ql-indent-3 { padding-left: 6em; }
.course-paragraph .ql-indent-4 { padding-left: 8em; }
.course-paragraph .ql-indent-5 { padding-left: 10em; }
.course-paragraph li[data-list="bullet"].ql-indent-1,
.course-paragraph ul > li.ql-indent-1 {
    margin-left: 2em;
    padding-left: 0;
}
.course-paragraph li[data-list="bullet"].ql-indent-2,
.course-paragraph ul > li.ql-indent-2 {
    margin-left: 4em;
    padding-left: 0;
}
.course-paragraph li[data-list="bullet"].ql-indent-3,
.course-paragraph ul > li.ql-indent-3 {
    margin-left: 6em;
    padding-left: 0;
}
.course-paragraph li[data-list="bullet"].ql-indent-4,
.course-paragraph ul > li.ql-indent-4 {
    margin-left: 8em;
    padding-left: 0;
}
.course-paragraph li[data-list="bullet"].ql-indent-5,
.course-paragraph ul > li.ql-indent-5 {
    margin-left: 10em;
    padding-left: 0;
}

/* Listes ordonnées multi-niveaux (1 → A → a → i) */
.course-paragraph ol:has(> li[class*="ql-indent-"]):is(:has(> li[data-list="ordered"]), :not(:has(> li[data-list]))) {
    counter-reset: ko-l0 ko-l1 ko-l2 ko-l3;
    list-style: none;
    padding-left: 0;
}
.course-paragraph ol:has(> li[class*="ql-indent-"]):is(:has(> li[data-list="ordered"]), :not(:has(> li[data-list]))) > li > .ql-ui {
    display: none;
}
.course-paragraph ol:has(> li[class*="ql-indent-"]):is(:has(> li[data-list="ordered"]), :not(:has(> li[data-list]))) > li[data-list="ordered"],
.course-paragraph ol:has(> li[class*="ql-indent-"]):is(:has(> li[data-list="ordered"]), :not(:has(> li[data-list]))) > li:not([data-list]) {
    padding-left: 2.2em;
}
.course-paragraph ol:has(> li[class*="ql-indent-"]):is(:has(> li[data-list="ordered"]), :not(:has(> li[data-list]))) > li.ql-indent-1 {
    margin-left: 2em;
    padding-left: 2.2em;
}
.course-paragraph ol:has(> li[class*="ql-indent-"]):is(:has(> li[data-list="ordered"]), :not(:has(> li[data-list]))) > li.ql-indent-2 {
    margin-left: 4em;
    padding-left: 2.2em;
}
.course-paragraph ol:has(> li[class*="ql-indent-"]):is(:has(> li[data-list="ordered"]), :not(:has(> li[data-list]))) > li.ql-indent-3 {
    margin-left: 6em;
    padding-left: 2.2em;
}
.course-paragraph ol:has(> li[class*="ql-indent-"]):is(:has(> li[data-list="ordered"]), :not(:has(> li[data-list]))) > li[data-list="ordered"]::before,
.course-paragraph ol:has(> li[class*="ql-indent-"]):is(:has(> li[data-list="ordered"]), :not(:has(> li[data-list]))) > li:not([data-list])::before {
    display: inline-block;
    width: 1.8em;
    margin-left: -2.2em;
    margin-right: 0.4em;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #6b7280;
    font-weight: 700;
}
.course-paragraph ol:has(> li[class*="ql-indent-"]):is(:has(> li[data-list="ordered"]), :not(:has(> li[data-list])))
  > li[data-list="ordered"]:not([class*="ql-indent-"]),
.course-paragraph ol:has(> li[class*="ql-indent-"]):is(:has(> li[data-list="ordered"]), :not(:has(> li[data-list])))
  > li:not([data-list]):not([class*="ql-indent-"]) {
    counter-increment: ko-l0;
    counter-reset: ko-l1 ko-l2 ko-l3;
}
.course-paragraph ol:has(> li[class*="ql-indent-"]):is(:has(> li[data-list="ordered"]), :not(:has(> li[data-list])))
  > li[data-list="ordered"].ql-indent-1,
.course-paragraph ol:has(> li[class*="ql-indent-"]):is(:has(> li[data-list="ordered"]), :not(:has(> li[data-list])))
  > li:not([data-list]).ql-indent-1 {
    counter-increment: ko-l1;
    counter-reset: ko-l2 ko-l3;
}
.course-paragraph ol:has(> li[class*="ql-indent-"]):is(:has(> li[data-list="ordered"]), :not(:has(> li[data-list])))
  > li[data-list="ordered"].ql-indent-2,
.course-paragraph ol:has(> li[class*="ql-indent-"]):is(:has(> li[data-list="ordered"]), :not(:has(> li[data-list])))
  > li:not([data-list]).ql-indent-2 {
    counter-increment: ko-l2;
    counter-reset: ko-l3;
}
.course-paragraph ol:has(> li[class*="ql-indent-"]):is(:has(> li[data-list="ordered"]), :not(:has(> li[data-list])))
  > li[data-list="ordered"].ql-indent-3,
.course-paragraph ol:has(> li[class*="ql-indent-"]):is(:has(> li[data-list="ordered"]), :not(:has(> li[data-list])))
  > li:not([data-list]).ql-indent-3 {
    counter-increment: ko-l3;
}
.course-paragraph ol:has(> li[class*="ql-indent-"]):is(:has(> li[data-list="ordered"]), :not(:has(> li[data-list])))
  > li[data-list="ordered"]:not([class*="ql-indent-"])::before,
.course-paragraph ol:has(> li[class*="ql-indent-"]):is(:has(> li[data-list="ordered"]), :not(:has(> li[data-list])))
  > li:not([data-list]):not([class*="ql-indent-"])::before {
    content: counter(ko-l0, decimal) ".";
}
.course-paragraph ol:has(> li[class*="ql-indent-"]):is(:has(> li[data-list="ordered"]), :not(:has(> li[data-list])))
  > li[data-list="ordered"].ql-indent-1::before,
.course-paragraph ol:has(> li[class*="ql-indent-"]):is(:has(> li[data-list="ordered"]), :not(:has(> li[data-list])))
  > li:not([data-list]).ql-indent-1::before {
    content: counter(ko-l1, upper-alpha) ".";
}
.course-paragraph ol:has(> li[class*="ql-indent-"]):is(:has(> li[data-list="ordered"]), :not(:has(> li[data-list])))
  > li[data-list="ordered"].ql-indent-2::before,
.course-paragraph ol:has(> li[class*="ql-indent-"]):is(:has(> li[data-list="ordered"]), :not(:has(> li[data-list])))
  > li:not([data-list]).ql-indent-2::before {
    content: counter(ko-l2, lower-alpha) ".";
}
.course-paragraph ol:has(> li[class*="ql-indent-"]):is(:has(> li[data-list="ordered"]), :not(:has(> li[data-list])))
  > li[data-list="ordered"].ql-indent-3::before,
.course-paragraph ol:has(> li[class*="ql-indent-"]):is(:has(> li[data-list="ordered"]), :not(:has(> li[data-list])))
  > li:not([data-list]).ql-indent-3::before {
    content: counter(ko-l3, lower-roman) ".";
}

/* Lignes "Coréen" / "Traduction" (Quill: line_role) */
.course-paragraph .course-line-korean {
    font-weight: 800;
    color: #111827;
    margin-bottom: 0.15em;
}
.course-paragraph .course-line-translation {
    color: #6b7280;
    font-style: italic;
}
.lesson-builder .ql-editor .course-line-korean {
    font-weight: 800;
    color: #111827;
    margin-bottom: 0.15em;
}
.lesson-builder .ql-editor .course-line-translation {
    color: #6b7280;
    font-style: italic;
}

/* Petit séparateur inline (Quill: divider) */
.course-paragraph .course-inline-divider {
    border: 0;
    height: 2px;
    width: 42%;
    margin: 0.9em auto;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(0, 71, 160, 0), rgba(0, 71, 160, 0.4), rgba(205, 46, 58, 0.4), rgba(205, 46, 58, 0));
}
.lesson-builder .ql-editor .course-inline-divider {
    border: 0;
    height: 2px;
    width: 42%;
    margin: 0.9em auto;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(0, 71, 160, 0), rgba(0, 71, 160, 0.4), rgba(205, 46, 58, 0.4), rgba(205, 46, 58, 0));
}
.lesson-builder .ql-toolbar button.ql-divider {
    width: 28px;
}
.lesson-builder .ql-toolbar button.ql-divider::before {
    content: "";
    display: block;
    height: 2px;
    width: 16px;
    margin: 0 auto;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.8;
}
/* Blockquote dans paragraphe */
.course-paragraph blockquote {
    border-left: 4px solid rgba(0, 71, 160, 0.5);
    padding-left: 1em;
    margin: 0.75em 0;
    color: #4b5563;
    font-style: italic;
}
/* Tailles de texte Quill */
.course-paragraph .ql-size-small { font-size: 0.85em; }
.course-paragraph .ql-size-large { font-size: 1.15em; }
.course-paragraph .ql-size-huge { font-size: 1.4em; }
.course-quote {
    margin: 1.1rem 0;
    padding: 1rem 1.1rem;
    border-left: 4px solid rgba(0, 71, 160, 0.75);
    background: rgba(239, 246, 255, 0.85);
    border-radius: 14px;
    font-style: italic;
    color: #1f2937;
}
.course-separator {
    border: 0;
    height: 1px;
    background: rgba(15, 23, 42, 0.12);
    margin: 1.4rem 0;
}
/* Variantes de séparateurs */
.course-separator--light {
    height: 1px;
    background: rgba(15, 23, 42, 0.08);
    margin: 1rem 0;
}
.course-separator--medium {
    height: 2px;
    background: rgba(15, 23, 42, 0.18);
    margin: 1rem 0;
}
.course-separator--heavy {
    height: 3px;
    background: rgba(15, 23, 42, 0.28);
    margin: 1rem 0;
}
.course-separator--light-spaced {
    height: 1px;
    background: rgba(15, 23, 42, 0.08);
    margin: 2.5rem 0;
}
.course-separator--medium-spaced {
    height: 2px;
    background: rgba(15, 23, 42, 0.18);
    margin: 2.5rem 0;
}
.course-separator--heavy-spaced {
    height: 3px;
    background: rgba(15, 23, 42, 0.28);
    margin: 2.5rem 0;
}
.course-note-inline {
    padding: 0.9rem 1rem;
    border-radius: 14px;
    background: rgba(17, 24, 39, 0.04);
    border: 1px dashed rgba(17, 24, 39, 0.18);
    color: #374151;
    font-size: 0.95rem;
}

/* -------------------- Callouts (tip/info/warning/note) -------------------- */
.course-callout {
    padding: 1.1rem 1.15rem;
    margin: 1.1rem 0;
    border-radius: 14px;
    border: 1px solid transparent;
    font-size: 0.95rem;
}
.course-callout__title {
    font-weight: 800;
    margin-bottom: 0.35rem;
    font-size: 0.98rem;
}
.course-callout__content {
    line-height: 1.7;
}
.course-callout__content p {
    margin-top: 0;
    margin-bottom: 0.5em;
}
.course-callout__content p:last-child {
    margin-bottom: 0;
}
.course-callout--info {
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
}
.course-callout--warning {
    background: #fef2f2;
    border-left: 4px solid var(--red);
}
.course-callout--tips {
    background: #fffbeb;
    border-left: 4px solid #facc15;
}
.course-callout--note {
    background: #ecfeff;
    border-left: 4px solid #06b6d4;
}
.course-callout--remarque {
    background: #faf5ff;
    border-left: 4px solid #a855f7;
}
.course-callout--structure {
    background: #f0fdf4;
    border-left: 4px solid #22c55e;
}

/* -------------------- Mots-clés -------------------- */
.course-keywords {
    background: #f8fafc;
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    margin: 1.1rem 0;
    border: 1px solid rgba(15, 23, 42, 0.08);
}
.course-keywords__title {
    font-weight: 800;
    font-size: 0.98rem;
    margin-bottom: 0.75rem;
    color: #111827;
}
.course-keywords__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.course-keywords__item {
    padding: 0.5rem 0;
    border-bottom: 1px dashed rgba(15, 23, 42, 0.1);
    font-size: 0.95rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
}
.course-keywords__item:last-child {
    border-bottom: none;
}
.course-keywords__korean {
    font-weight: 700;
    color: var(--blue);
    font-family: "Noto Sans KR", sans-serif;
}
.course-keywords__arrow {
    color: #9ca3af;
    font-size: 0.85rem;
}
.course-keywords__translation {
    color: #374151;
}
.course-keywords__note {
    font-size: 0.85rem;
    color: #6b7280;
    font-style: italic;
}
.course-callout__chips {
    margin-top: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* -------------------- Tables -------------------- */
.course-table-wrapper {
    margin: 1.2rem 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(209, 213, 219, 0.8);
    background: #fff;
}
.course-table-wrapper--conjugation { /* Wrapper spécifique aux tableaux de conjugaison sur desktop : sert de conteneur pour les indices visuels de scroll horizontal. */
    position: relative;
    --conjugation-scroll-hint-top: 0; /* Décale verticalement le fondu si on veut un jour l'aligner sous un header ou un titre. */
    --conjugation-scroll-hint-width: 18px; /* Largeur du voile latéral qui suggère qu'il y a encore du contenu hors écran. */
    --conjugation-scroll-hint-color: rgba(248, 250, 252, 0.72); /* Couleur douce pour ne pas "salir" la lecture du tableau. */
}
.course-table-wrapper--conjugation::before,
.course-table-wrapper--conjugation::after { /* Deux pseudo-éléments utilisés comme dégradés latéraux gauche/droite pour signaler le scroll. */
    content: "";
    position: absolute;
    top: var(--conjugation-scroll-hint-top);
    bottom: 0;
    width: var(--conjugation-scroll-hint-width);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1;
}
.course-table-wrapper--conjugation::before { /* Fondu côté gauche : visible quand on n'est plus au tout début du scroll. */
    left: 0;
    background: linear-gradient(90deg, var(--conjugation-scroll-hint-color) 0%, rgba(248, 250, 252, 0) 100%);
}
.course-table-wrapper--conjugation::after { /* Fondu côté droit : visible tant qu'il reste du tableau à découvrir. */
    right: 0;
    background: linear-gradient(270deg, var(--conjugation-scroll-hint-color) 0%, rgba(248, 250, 252, 0) 100%);
}
.course-table-wrapper--conjugation.is-scrollable:not(.is-scroll-start)::before { /* Active le fondu gauche uniquement si le tableau déborde et qu'on a déjà scrollé. */
    opacity: 1;
}
.course-table-wrapper--conjugation.is-scrollable:not(.is-scroll-end)::after { /* Active le fondu droit uniquement si le tableau déborde encore vers la droite. */
    opacity: 1;
}
.course-table-title {
    padding: 0.85rem 1rem 0;
    font-weight: 800;
    color: #111827;
}
.course-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.course-table thead {
    background: #111827;
    color: #e5e7eb;
}
.course-table th {
    padding: 0.85rem 1rem;
    text-align: left;
    font-weight: 700;
}
.course-table td {
    padding: 0.75rem 1rem;
    border-top: 1px solid #e5e7eb;
    vertical-align: top;
}
/* Support formatage riche dans les cellules */
.course-table td p,
.course-table th p {
    margin: 0;
}
.course-table td p:last-child,
.course-table th p:last-child {
    margin-bottom: 0;
}
.course-table-cell-lines { /* Petit conteneur vertical commun à toutes les cellules découpées ligne par ligne. */
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
}
.course-table--conjugation td[data-desktop-strong="1"] { /* Mise en avant desktop des cellules "clés" : temps, participe ou terminaison selon le tableau. */
    font-weight: 700;
    color: #111827;
}
.course-table--conjugation td[data-desktop-list="1"] .course-table-cell-line { /* Prépare un retrait pour afficher une puce devant chaque ligne utile sur desktop. */
    position: relative;
    padding-left: 0.85rem;
}
.course-table--conjugation td[data-desktop-list="1"] .course-table-cell-line::before { /* Puce desktop générique utilisée pour les colonnes multi-lignes. */
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: #64748b;
    font-weight: 800;
}
.course-table--conjugation[data-conjugation-kind="participial"] td[data-column-key="terminaison"][data-desktop-list="1"] .course-table-cell-line:nth-child(1)::before,
.course-table--conjugation[data-conjugation-kind="participial"] td[data-column-key*="conjugaison"][data-desktop-list="1"] .course-table-cell-line:nth-child(1)::before,
.course-table--conjugation[data-conjugation-kind="participial"] td[data-column-key*="conjugation"][data-desktop-list="1"] .course-table-cell-line:nth-child(1)::before { /* Couleur de correspondance n°1 pour faire le lien entre Terminaison et Conjugaison. */
    color: #0f766e;
}
.course-table--conjugation[data-conjugation-kind="participial"] td[data-column-key="terminaison"][data-desktop-list="1"] .course-table-cell-line:nth-child(2)::before,
.course-table--conjugation[data-conjugation-kind="participial"] td[data-column-key*="conjugaison"][data-desktop-list="1"] .course-table-cell-line:nth-child(2)::before,
.course-table--conjugation[data-conjugation-kind="participial"] td[data-column-key*="conjugation"][data-desktop-list="1"] .course-table-cell-line:nth-child(2)::before { /* Couleur de correspondance n°2. */
    color: #1d4ed8;
}
.course-table--conjugation[data-conjugation-kind="participial"] td[data-column-key="terminaison"][data-desktop-list="1"] .course-table-cell-line:nth-child(3)::before,
.course-table--conjugation[data-conjugation-kind="participial"] td[data-column-key*="conjugaison"][data-desktop-list="1"] .course-table-cell-line:nth-child(3)::before,
.course-table--conjugation[data-conjugation-kind="participial"] td[data-column-key*="conjugation"][data-desktop-list="1"] .course-table-cell-line:nth-child(3)::before { /* Couleur de correspondance n°3. */
    color: #d97706;
}
.course-table--conjugation[data-conjugation-kind="participial"] td[data-column-key="terminaison"][data-desktop-list="1"] .course-table-cell-line:nth-child(4)::before,
.course-table--conjugation[data-conjugation-kind="participial"] td[data-column-key*="conjugaison"][data-desktop-list="1"] .course-table-cell-line:nth-child(4)::before,
.course-table--conjugation[data-conjugation-kind="participial"] td[data-column-key*="conjugation"][data-desktop-list="1"] .course-table-cell-line:nth-child(4)::before { /* Couleur de correspondance n°4. */
    color: #7c3aed;
}
.course-table-cell-line { /* Chaque ligne interne est un bloc indépendant pour gérer puces, espacements et retours à la ligne proprement. */
    display: block;
}

/* Éditeur Quill inline pour les tableaux (mode bubble) */
.table-cell-editor {
    min-height: 32px;
}
.table-cell-editor .ql-editor {
    padding: 0.25rem;
    min-height: 32px;
    font-size: 0.92rem;
}
.table-cell-editor .ql-editor p {
    margin: 0;
}
.table-cell-editor .ql-editor.ql-blank::before {
    font-style: normal;
    color: #9ca3af;
    left: 0.25rem;
}
.course-table tbody tr:nth-child(even) {
    background: #f9fafb;
}
.course-table tbody tr:hover {
    background: #eef2ff;
}
.course-table--vocab .course-korean {
    font-weight: 700;
    color: #111827;
}
.course-table--conjugation td {
    vertical-align: middle;
    min-height: 70px;
    height: 70px;
}
.course-table--conjugation td > * {
    margin-top: 0;
    margin-bottom: 0;
}
.course-conjugation-table__value {
    min-height: 56px;
    display: flex;
    align-items: center;
}
.course-romanization {
    color: #6b7280;
    font-style: italic;
}

/* -------------------- Dialogue -------------------- */
.course-dialogue {
    background: linear-gradient(135deg, #f3f4ff, #f9fafb);
    border-radius: 16px;
    border: 1px solid rgba(199, 210, 254, 0.9);
    padding: 1.2rem 1.2rem 1rem;
    margin: 1rem 0 1.2rem;
    position: relative;
    overflow: hidden;
}
.course-dialogue::before {
    content: "DIALOGUE";
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #6366f1;
    background: rgba(255, 255, 255, 0.7);
    padding: 3px 7px;
    border-radius: 999px;
}
.course-dialogue__title {
    font-weight: 800;
    margin-bottom: 0.6rem;
    color: #111827;
}
.course-dialogue__line {
    padding: 0.65rem 0;
    border-bottom: 1px dashed rgba(99, 102, 241, 0.22);
}
.course-dialogue__line:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.course-dialogue__speaker {
    font-weight: 800;
    color: #4338ca;
    margin-bottom: 0.2rem;
}
.course-dialogue__korean {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #111827;
}
.course-dialogue__translation {
    color: #6b7280;
    font-style: italic;
    font-size: 0.95rem;
}

/* -------------------- Media (audio/video) -------------------- */
.course-media {
    margin: 0.6rem 0 0.8rem;
}
.course-audio {
    width: 100%;
}
.course-video {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(209, 213, 219, 0.8);
    background: #111827;
}
.course-video-embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(209, 213, 219, 0.8);
    background: #111827;
}
.course-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.course-media-caption {
    margin-top: 0.4rem;
    font-size: 0.9rem;
    color: #6b7280;
}

/* -------------------- Construction / Prononciation / Cartes -------------------- */
.course-construction {
    border: 1px solid rgba(148, 163, 184, 0.5);
    border-radius: 16px;
    background: #ffffff;
    padding: 1rem 1rem 1.1rem;
    margin: 1.1rem 0;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}
.course-construction__title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #6b7280;
    font-weight: 800;
}
.course-construction__example {
    font-weight: 800;
    color: #111827;
    margin-top: 0.25rem;
}
.course-construction__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-top: 0.9rem;
}
.course-construction__part {
    background: rgba(0, 71, 160, 0.05);
    border: 1px solid rgba(0, 71, 160, 0.12);
    border-radius: 14px;
    padding: 0.75rem 0.8rem;
}
.course-construction__label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #6b7280;
    margin-bottom: 0.25rem;
}
.course-construction__value {
    font-weight: 800;
    color: #111827;
}

.course-pronunciation {
    border: 1px solid rgba(0, 71, 160, 0.14);
    background: rgba(239, 246, 255, 0.6);
    border-radius: 16px;
    padding: 1rem 1rem 1.1rem;
    margin: 1.1rem 0;
}
.course-pronunciation__korean {
    font-weight: 900;
    font-size: 1.35rem;
    color: #111827;
}
.course-pronunciation__romanization {
    color: #6b7280;
    font-style: italic;
}
.course-pronunciation__ipa {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    color: #374151;
    margin-top: 0.3rem;
}
.course-pronunciation__tips {
    margin-top: 0.6rem;
    color: #374151;
}

.course-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    background: rgba(15, 23, 42, 0.04);
    font-weight: 700;
    font-size: 1rem;
    color: #111827;
}

.course-example {
    border: 1px solid rgba(99, 102, 241, 0.18);
    background: rgba(99, 102, 241, 0.06);
    border-radius: 16px;
    padding: 0.9rem 1rem;
    margin: 1rem 0;
}
.course-example__korean {
    font-weight: 800;
    color: #111827;
    margin-bottom: 0.25rem;
}
.course-example__translation {
    color: #6b7280;
    font-style: italic;
}
.course-example-block__title {
    font-weight: 900;
    color: #111827;
    margin-bottom: 0.6rem;
}

/* -------------------- Gestionnaire particule -------------------- */
.course-particle-card {
    --particle-border: #e4e6ed;
    --particle-muted: #6b7280;
    --particle-n: var(--red);
    --particle-pt: var(--blue);
    --particle-ps: #16a34a;
    --particle-v: #f59e0b;
    --particle-s: var(--purple);
    --particle-c: #6b7280;
    --particle-vc: #8b5cf6;
    --particle-cd: #ef4444;
    --particle-cf: #10b981;
    --particle-s-shift: 2px;
    background: #fff;
    border: 1px solid var(--particle-border);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 10px 30px rgba(31, 56, 93, 0.06);
    color: #1f2937;
}
.course-particle-list {
    display: grid;
    gap: 12px;
}
.course-particle-empty {
    padding: 12px;
    border: 1px dashed var(--particle-border);
    border-radius: 12px;
    font-size: 0.9rem;
    color: var(--particle-muted);
}
.course-particle-example {
    border: 1px solid var(--particle-border);
    border-radius: 14px;
    padding: 12px 14px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    display: grid;
    gap: 10px;
}
.course-particle-example--warn {
    border-color: rgba(205, 46, 58, 0.35);
    background: linear-gradient(180deg, rgba(205, 46, 58, 0.08), #ffffff);
}
.course-particle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--particle-muted);
    font-size: 0.82rem;
    font-weight: 700;
}
.course-particle-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--particle-border);
    background: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--particle-muted);
}
.course-particle-status--bad {
    border-color: rgba(205, 46, 58, 0.4);
    color: #b91c1c;
}
.course-particle-status--ok {
    border-color: rgba(22, 163, 74, 0.35);
    color: #15803d;
}
.course-particle-parse {
    display: grid;
    justify-content: center;
    align-items: end;
    margin: 0 auto;
    row-gap: 6px;
}
.course-particle-parse--2 { grid-template-columns: repeat(2, max-content); }
.course-particle-parse--3 { grid-template-columns: repeat(3, max-content); }
.course-particle-parse--compact { column-gap: 12px; }
.course-particle-parse--tight { column-gap: 6px; }
.course-particle-parse--3.course-particle-parse--compact {
    column-gap: 0;
    --particle-token-gap: 12px;
}
.course-particle-parse--3.course-particle-parse--tight {
    column-gap: 0;
    --particle-token-gap: 6px;
}
.course-particle-parse--3 .course-particle-token:nth-child(3) {
    padding-left: var(--particle-token-gap, 0);
}
.course-particle-token {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.course-particle-syl {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-align: center;
    font-family: "Noto Sans KR", "Montserrat", sans-serif;
}
.course-particle-syl.n, .course-particle-lbl.n { color: var(--particle-n); }
.course-particle-syl.pt, .course-particle-lbl.pt { color: var(--particle-pt); }
.course-particle-syl.ps, .course-particle-lbl.ps { color: var(--particle-ps); }
.course-particle-syl.v, .course-particle-lbl.v { color: var(--particle-v); }
.course-particle-lbl {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "JetBrains Mono", monospace;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.course-particle-sline {
    grid-column: 1 / span 2;
    height: 2px;
    width: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(124, 45, 140, 0.8) 0%, rgba(124, 45, 140, 0.4) 70%, transparent 100%);
    transform: translateX(var(--particle-s-shift));
}
.course-particle-slabel {
    grid-column: 1 / span 2;
    justify-self: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "JetBrains Mono", monospace;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    color: var(--particle-s);
}
.course-particle-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #4b5563;
}
.course-particle-note-arrow {
    color: var(--particle-pt);
    font-weight: 900;
}
.course-particle-legend {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--particle-border);
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: center;
    justify-content: space-between;
}
.course-particle-legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
}
.course-particle-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--particle-muted);
}
.course-particle-legend-item::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--c);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

/* Styles pour les syllabes Hangeul (format A+B=C) */
.course-particle-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.course-particle-group-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1f2937;
    text-align: center;
    margin-bottom: 4px;
    font-family: "Noto Sans KR", "Montserrat", sans-serif;
}

.course-particle-group > .course-particle-example--syllable:first-of-type {
    margin-top: 0;
}

.course-particle-group-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: nowrap;
    justify-content: center;
}

.course-particle-group .course-particle-example--syllable {
    flex: 0 0 auto;
    min-width: 0;
}

.course-particle-example--syllable {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Override les styles grid de course-particle-parse pour les syllabes */
.course-particle-syllable {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
    grid-template-columns: none !important;
    row-gap: 0 !important;
    column-gap: 8px !important;
}

.course-particle-syllable .course-particle-token {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.course-particle-plus,
.course-particle-equals {
    font-size: 1.2rem;
    font-weight: 700;
    color: #6b7280;
    margin: 0 4px;
    line-height: 1;
    flex-shrink: 0;
    display: inline-block;
}

.course-particle-result {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-align: center;
    font-family: "Noto Sans KR", "Montserrat", sans-serif;
    color: #1f2937;
    margin-left: 4px;
    flex-shrink: 0;
}

/* Couleurs pour les nouveaux rôles (C, VC, CD, CF) */
.course-particle-syl.c, .course-particle-lbl.c { 
    color: #6b7280; 
}
.course-particle-syl.vc, .course-particle-lbl.vc { 
    color: #8b5cf6; 
}
.course-particle-syl.cd, .course-particle-lbl.cd { 
    color: #ef4444; 
}
.course-particle-syl.cf, .course-particle-lbl.cf { 
    color: #10b981; 
}

/* ========================================================================
   Styles pour le bloc "Texte annoté"
   ========================================================================
   Permet d'afficher un texte avec des segments annotés (soulignés en bleu)
   et des lettres/chiffres alignés précisément en dessous de chaque segment.
   ======================================================================== */

/* Conteneur principal du bloc */
.course-annotated-text {
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid #e4e6ed;
    border-radius: 12px;
}

/* Zone d'affichage du texte annoté */
.annotated-text-display {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #1f2937;
    word-wrap: break-word;
    position: relative;
    font-family: "Montserrat", sans-serif;
    display: inline-block;
    width: 100%;
}

/* Texte non annoté (sans soulignement) */
.annotated-text-plain {
    display: inline;
    white-space: pre-wrap; /* Préserver les espaces et retours à la ligne */
}

/* Wrapper pour un segment annoté + sa lettre
   Permet d'aligner précisément la lettre sous le segment */
.annotated-segment-wrapper {
    display: inline-block;
    position: relative;
    vertical-align: top; /* Alignement en haut pour éviter les décalages */
}

/* Segment de texte annoté (souligné en bleu) */
.annotated-segment {
    display: inline-block;
    text-decoration: underline;
    text-decoration-style: solid; /* Soulignement droit (pas ondulé) */
    text-decoration-color: #0047a0; /* Bleu */
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    color: #1f2937;
    white-space: pre-wrap; /* Préserver les espaces et retours à la ligne */
}

/* Badge avec la lettre/chiffre aligné sous le segment annoté */
.annotated-label {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 0.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: 0.85rem;
    font-weight: 800;
    color: #0047a0; /* Bleu pour correspondre au soulignement */
    background: rgba(0, 71, 160, 0.1); /* Fond bleu clair */
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "JetBrains Mono", monospace;
}

/* ========================================================================
   Styles pour le bloc "Caractères (img)"
   ========================================================================
   Bloc permettant d'afficher une image de caractère(s) coréen(s) centrée,
   avec un texte formaté en dessous (couleur, gras, souligné, etc.).
   ======================================================================== */

/* Conteneur principal du bloc */
.course-character-image {
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid #e4e6ed;
    border-radius: 12px;
}

/* Wrapper pour l'image (centrage) */
.character-image-wrapper {
    text-align: center;
    margin-bottom: 1rem;
}

/* Image du caractère(s)
   - Hauteur max : 300px (pour éviter les images trop grandes)
   - Largeur : auto (s'adapte au ratio, peut être carrée ou large)
   - Centrée horizontalement
   - Border-radius pour un rendu plus doux
   - Bordure noire pour délimiter l'image
*/
.character-image-img {
    max-height: 300px;
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 2px solid #000;
    display: inline-block;
}

/* Texte formaté en dessous de l'image */
.character-image-text {
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.6;
    color: #1f2937;
    word-wrap: break-word;
}

/* Styles pour l'aperçu dans le builder */
.character-image-preview-img-wrapper {
    text-align: center;
    margin-bottom: 1rem;
}

.character-image-preview-text {
    margin-top: 1rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.course-word-card {
    border: 1px solid rgba(205, 46, 58, 0.18);
    background: rgba(205, 46, 58, 0.06);
    border-radius: 16px;
    padding: 1rem 1rem 1.1rem;
    margin: 1rem 0;
}
.course-word-card__korean {
    font-weight: 900;
    font-size: 1.25rem;
    color: #111827;
}
.course-word-card__romanization {
    color: #6b7280;
    font-style: italic;
}
.course-word-card__french {
    margin-top: 0.25rem;
    color: #374151;
}

.course-image {
    width: var(--course-image-width, 100%);
    max-width: 100%;
    margin: 1.1rem auto;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(209, 213, 219, 0.8);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
    background: #fff;
}
.course-image img {
    width: 100%;
    height: auto;
    display: block;
}
.course-image figcaption {
    padding: 0.8rem 1rem;
    color: #6b7280;
    font-size: 0.92rem;
}

.course-cultural {
    border-radius: 16px;
    border: 1px solid rgba(245, 158, 11, 0.2);
    background: rgba(255, 251, 235, 0.75);
    padding: 1rem 1rem 1.1rem;
    margin: 1.1rem 0;
}
.course-cultural__title {
    font-weight: 900;
    color: #111827;
    margin-bottom: 0.4rem;
}
.course-cultural__icon {
    display: inline-flex;
    margin-right: 0.35rem;
    color: #f59e0b;
}
.course-cultural__content {
    color: #374151;
}

.course-character {
    border-radius: 16px;
    border: 1px solid rgba(17, 24, 39, 0.12);
    background: #fff;
    padding: 1rem 1rem 1.1rem;
    margin: 1.1rem 0;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}
.course-character__top {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.course-character__glyph {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    font-weight: 900;
    color: #111827;
    background: rgba(0, 71, 160, 0.06);
    border: 1px solid rgba(0, 71, 160, 0.12);
}
.course-character__name {
    font-weight: 900;
    color: #111827;
}
.course-character__sound {
    color: #6b7280;
    font-style: italic;
}
.course-character__stroke img {
    width: 100%;
    max-width: 340px;
    border-radius: 14px;
    border: 1px solid rgba(209, 213, 219, 0.8);
    margin-top: 0.9rem;
}
.course-character__examples {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.9rem;
}

.course-definition {
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    background: rgba(248, 250, 252, 0.9);
    padding: 1rem 1rem 1.1rem;
    margin: 1.1rem 0;
}
.course-definition__term {
    font-weight: 900;
    color: #111827;
    margin-bottom: 0.35rem;
}
.course-definition__meaning {
    color: #374151;
}
.course-definition__example {
    margin-top: 0.8rem;
}

.course-hangul {
    border-radius: 16px;
    border: 1px solid rgba(0, 71, 160, 0.14);
    background: rgba(239, 246, 255, 0.55);
    padding: 1rem 1rem 1.1rem;
    margin: 1.1rem 0;
}
.course-hangul__parts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.course-hangul__piece {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.course-hangul__piece-label {
    font-size: 0.85rem;
    color: #6b7280;
    font-style: italic;
}
.course-hangul__plus {
    font-weight: 900;
    color: #000000;
    opacity: 0.85;
}
.course-hangul__equals {
    font-weight: 900;
    color: #000000;
}
.course-hangul__result {
    font-size: 1.5rem;
    font-weight: 900;
    color: #111827;
    margin-left: 0.2rem;
}

.course-empty {
    padding: 1rem 1.1rem;
    border-radius: 16px;
    border: 1px dashed rgba(17, 24, 39, 0.18);
    background: rgba(17, 24, 39, 0.04);
}
.course-unknown {
    padding: 0.9rem 1rem;
    border-radius: 14px;
    border: 1px dashed rgba(205, 46, 58, 0.35);
    background: rgba(205, 46, 58, 0.06);
    color: #7f1d1d;
}

/* -------------------- Exercices -------------------- */
.course-exercise {
    border-radius: 18px;
    border: 1px solid rgba(209, 213, 219, 0.8);
    background: #fff;
    padding: 1.1rem 1.1rem 1rem;
    margin: 1.2rem 0;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}
.course-exercise__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.75rem;
}
.course-exercise__title {
    font-weight: 900;
    color: #111827;
}
.course-exercise__badge {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 71, 160, 0.18);
    background: rgba(0, 71, 160, 0.06);
    color: var(--blue);
}
.course-exercise__instructions {
    color: #374151;
    margin-bottom: 0.8rem;
}
.course-exercise__sentence {
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.7rem;
}
.course-exercise__fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.7rem;
    margin: 0.7rem 0 0.4rem;
}
.course-exercise__label {
    font-size: 0.85rem;
    font-weight: 800;
    color: #6b7280;
    margin-bottom: 0.25rem;
}
.course-exercise__translation {
    color: #6b7280;
    font-style: italic;
    margin-top: 0.7rem;
}
.course-exercise__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-top: 0.9rem;
}
.course-exercise__result {
    font-weight: 800;
    color: #111827;
}
.course-exercise__select.is-correct,
.course-match__select.is-correct,
.course-translation__select.is-correct,
.course-error-correction__input.is-correct,
.course-conjugation-table__input.is-correct {
    border-color: rgba(34, 197, 94, 0.6);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}
.course-exercise__select.is-wrong,
.course-match__select.is-wrong,
.course-translation__select.is-wrong,
.course-error-correction__input.is-wrong,
.course-conjugation-table__input.is-wrong {
    border-color: rgba(239, 68, 68, 0.6);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.course-conjugation-table__input {
    min-width: 140px;
    height: 56px;
    border: 1px solid rgba(17, 24, 39, 0.45);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
}

.course-conjugation-table__input:focus {
    border-color: rgba(59, 130, 246, 0.7);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.course-conjugation-table__input::placeholder {
    color: #6b7280;
    opacity: 1;
}

.course-match {
    display: grid;
    gap: 0.6rem;
}
.course-match__row {
    display: grid;
    grid-template-columns: 1fr minmax(180px, 220px);
    gap: 0.75rem;
    align-items: center;
    padding: 0.65rem 0.75rem;
    border-radius: 14px;
    border: 1px solid rgba(209, 213, 219, 0.7);
    background: rgba(249, 250, 251, 0.8);
}
.course-match__left {
    font-weight: 800;
    color: #111827;
}

.course-translation {
    display: grid;
    gap: 0.6rem;
}
.course-translation__row {
    display: grid;
    grid-template-columns: 1fr minmax(220px, 280px);
    gap: 0.75rem;
    align-items: center;
    padding: 0.65rem 0.75rem;
    border-radius: 14px;
    border: 1px solid rgba(209, 213, 219, 0.7);
    background: rgba(249, 250, 251, 0.8);
}
.course-translation__left {
    font-weight: 800;
    color: #111827;
}

.course-error-correction {
    display: grid;
    gap: 0.7rem;
    margin-top: 0.7rem;
}
.course-exercise .course-error-correction__input.form-control {
    display: block;
    width: 100%;
    min-height: 120px;
    margin: 0;
    padding: 0.95rem 1rem;
    border: 2px solid #cbd5e1;
    border-radius: 14px;
    background: #ffffff;
    color: #111827;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
    resize: vertical;
}
.course-exercise .course-error-correction__input.form-control::placeholder {
    color: #6b7280;
    opacity: 1;
}
.course-exercise .course-error-correction__input.form-control:focus {
    outline: none;
    border-color: #3b82f6;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
}
.course-error-correction__help {
    border-radius: 14px;
    border: 1px solid rgba(251, 191, 36, 0.35);
    background: rgba(254, 249, 195, 0.65);
    padding: 0.8rem 0.9rem;
}
.course-error-correction__answers {
    margin: 0;
    padding-left: 1.1rem;
}
.course-error-correction__answer-label {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #92400e;
    margin-bottom: 0.35rem;
}
.course-error-correction__answer {
    font-weight: 800;
    color: #111827;
}
.course-error-correction__explanation {
    margin-top: 0.55rem;
    color: #4b5563;
}
.course-error-correction__explanation p,
.course-error-correction__context p {
    margin-bottom: 0.45rem;
}
.course-error-correction__explanation p:last-child,
.course-error-correction__context p:last-child {
    margin-bottom: 0;
}

.course-word-order {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.65rem;
}
.course-word-order__bank,
.course-word-order__answer {
    min-height: 56px;
    border-radius: 14px;
    border: 1px dashed rgba(148, 163, 184, 0.7);
    background: rgba(249, 250, 251, 0.9);
    padding: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.course-word-chip {
    cursor: pointer;
    user-select: none;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 71, 160, 0.18);
    background: rgba(0, 71, 160, 0.06);
    font-weight: 800;
    color: #111827;
    transition: all 0.2s ease;
}
.course-word-chip:hover {
    transform: translateY(-1px);
    background: rgba(0, 71, 160, 0.1);
}

.course-quiz__question {
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    border: 1px solid rgba(209, 213, 219, 0.7);
    background: rgba(249, 250, 251, 0.8);
    margin-top: 0.75rem;
}
.course-quiz__text {
    font-weight: 800;
    color: #111827;
    margin-bottom: 0.45rem;
}
.course-quiz__options {
    display: grid;
    gap: 0.4rem;
}
.course-quiz__option {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    color: #374151;
}
.course-quiz__option input {
    margin-top: 0.2rem;
}
.course-quiz__question.is-correct {
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.06);
}
.course-quiz__question.is-wrong {
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.05);
}

.course-record {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.8rem;
}
.course-record__status {
    font-weight: 800;
    color: #6b7280;
}
.course-record__playback {
    width: 100%;
    margin-top: 0.5rem;
}

/* -------------------- Responsive -------------------- */
@media (max-width: 768px) {
    .course-reader-layout {
        flex-direction: column;
    }
    .course-lesson-nav,
    .lesson-nav {
        position: static;
        flex: 0 0 auto;
        width: 100%;
    }
    .course-lesson-main {
        width: 100%;
        overflow: hidden;
    }
    .course-lesson-nav__list {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 0.3rem;
    }
    .course-lesson-nav__link {
        width: auto;
        white-space: nowrap;
    }
    /* Responsive lesson-nav */
    .lesson-steps {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 0.5rem;
        max-width: 100%;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }
    .lesson-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 0 0 auto;
        width: min(76vw, 320px);
        min-width: min(76vw, 320px);
        max-width: min(76vw, 320px);
        padding: 6px;
    }
    .lesson-step::before {
        display: none;
    }
    .lesson-step__card {
        flex-direction: column;
        text-align: center;
        padding: 10px;
        width: 100%;
        min-width: 0;
    }
    .lesson-step__text {
        align-items: center;
        width: 100%;
    }
    .lesson-step__name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .course-lesson {
        padding: 1.5rem 1.2rem 1.7rem;
    }
    .course-dialogue {
        padding: 1rem 0.9rem 0.9rem;
    }
    .course-table-wrapper {
        border-radius: 10px;
    }
    /* -- Conjugation table → card layout on mobile -- */
    .course-table-wrapper--conjugation { /* En mobile le wrapper n'a plus besoin d'encadrer un scroll horizontal : on passe en cartes verticales. */
        overflow: visible;
        border: none;
        box-shadow: none;
        background: transparent;
        border-radius: 0;
    }
    .course-table-wrapper--conjugation::before,
    .course-table-wrapper--conjugation::after { /* On coupe les fades desktop, car ils n'ont plus de sens une fois le tableau transformé en cartes. */
        display: none;
    }
    .course-table--conjugation { /* Le tableau devient un simple conteneur de cartes mobile, sans contrainte de largeur de table classique. */
        display: block;
        min-width: 0;
        border: none;
        background: transparent;
    }
    .course-table--conjugation thead { /* L'en-tête tabulaire disparaît : les libellés seront réinjectés dans chaque cellule via td::before. */
        display: none;
    }
    .course-table--conjugation tbody { /* Empile les lignes du tableau comme une liste de cartes indépendantes. */
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
    }
    .course-table--conjugation tbody tr { /* Chaque ancienne ligne de tableau devient une carte mobile avec ombre, bordure et badge. */
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
        border: 1px solid #e2e8f0;
        padding: 0.7rem 0.85rem 0.85rem;
        position: relative;
        --conjugation-group-chip-bg: #eef2ff;
        --conjugation-group-chip-color: #3b5998;
    }
    .course-table--conjugation tbody tr::before { /* Badge en haut de carte : reprend le groupe courant (Présent, Passé, Futur, Participe présent...). */
        content: attr(data-group-label);
        display: inline-block;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        color: var(--conjugation-group-chip-color);
        background: var(--conjugation-group-chip-bg);
        padding: 0.15rem 0.55rem;
        border-radius: 4px;
        margin-bottom: 0.45rem;
        align-self: center;
        text-align: center;
    }
    .course-table--conjugation tbody tr[data-group-tone="present"] { /* Couleur dédiée au présent. */
        --conjugation-group-chip-bg: #ecfeff;
        --conjugation-group-chip-color: #0f766e;
    }
    .course-table--conjugation tbody tr[data-group-tone="passe"] { /* Couleur dédiée au passé. */
        --conjugation-group-chip-bg: #fff7ed;
        --conjugation-group-chip-color: #c2410c;
    }
    .course-table--conjugation tbody tr[data-group-tone="futur"] { /* Couleur dédiée au futur. */
        --conjugation-group-chip-bg: #eff6ff;
        --conjugation-group-chip-color: #1d4ed8;
    }
    .course-table--conjugation tbody tr[data-group-label=""]::before { /* Si un groupe n'existe pas, on n'affiche surtout pas de badge vide. */
        display: none;
    }
    .course-table--conjugation tbody tr:hover { /* Neutralise le hover desktop pour éviter un feedback inutile sur mobile. */
        background: #fff;
    }
    .course-table--conjugation td { /* Chaque cellule mobile devient une mini-ligne "label à gauche / valeur à droite". */
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.28rem 0;
        border: none;
        min-height: 0;
        height: auto;
        background: transparent !important;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.4;
        font-size: 0.95rem;
        color: #1f2937;
    }
    .course-table--conjugation td::before { /* Réinjecte le nom de la colonne dans la carte mobile : Terminaison, Conjugaison, Exemple, etc. */
        content: attr(data-label);
        flex: 0 0 6.2rem;
        font-size: 0.74rem;
        font-weight: 800;
        color: black;
        padding-top: 0.05rem;
    }
    .course-table--conjugation .course-table-cell-lines { /* Aère légèrement les lignes internes sur mobile pour garder la lecture confortable. */
        gap: 0.28rem;
    }
    .course-table--conjugation .course-table-cell-line { /* Prépare l'indentation nécessaire pour les puces affichées sur mobile. */
        position: relative;
        padding-left: 0.85rem;
    }
    .course-table--conjugation .course-table-cell-line::before { /* Puce générique mobile : on l'affiche partout pour homogénéiser les listes. */
        content: "•";
        position: absolute;
        left: 0;
        top: 0;
        color: #64748b;
        font-weight: 800;
    }
    .course-table--conjugation[data-conjugation-kind="participial"] td[data-column-key="terminaison"] .course-table-cell-line:nth-child(1)::before,
    .course-table--conjugation[data-conjugation-kind="participial"] td[data-column-key*="conjugaison"] .course-table-cell-line:nth-child(1)::before,
    .course-table--conjugation[data-conjugation-kind="participial"] td[data-column-key*="conjugation"] .course-table-cell-line:nth-child(1)::before { /* Couleur n°1 pour associer visuellement Terminaison et Conjugaison dans les participes. */
        color: #0f766e;
    }
    .course-table--conjugation[data-conjugation-kind="participial"] td[data-column-key="terminaison"] .course-table-cell-line:nth-child(2)::before,
    .course-table--conjugation[data-conjugation-kind="participial"] td[data-column-key*="conjugaison"] .course-table-cell-line:nth-child(2)::before,
    .course-table--conjugation[data-conjugation-kind="participial"] td[data-column-key*="conjugation"] .course-table-cell-line:nth-child(2)::before { /* Couleur n°2 pour la deuxième paire. */
        color: #1d4ed8;
    }
    .course-table--conjugation[data-conjugation-kind="participial"] td[data-column-key="terminaison"] .course-table-cell-line:nth-child(3)::before,
    .course-table--conjugation[data-conjugation-kind="participial"] td[data-column-key*="conjugaison"] .course-table-cell-line:nth-child(3)::before,
    .course-table--conjugation[data-conjugation-kind="participial"] td[data-column-key*="conjugation"] .course-table-cell-line:nth-child(3)::before { /* Couleur n°3 pour la troisième paire. */
        color: #d97706;
    }
    .course-table--conjugation[data-conjugation-kind="participial"] td[data-column-key="terminaison"] .course-table-cell-line:nth-child(4)::before,
    .course-table--conjugation[data-conjugation-kind="participial"] td[data-column-key*="conjugaison"] .course-table-cell-line:nth-child(4)::before,
    .course-table--conjugation[data-conjugation-kind="participial"] td[data-column-key*="conjugation"] .course-table-cell-line:nth-child(4)::before { /* Couleur n°4 pour la quatrième paire. */
        color: #7c3aed;
    }
    .course-table--conjugation td[data-is-group-key="1"] { /* On masque la première colonne en mobile car son contenu est déjà résumé par le badge de carte. */
        display: none;
    }
    .course-table--conjugation td[data-column-key="exemple"] { /* Séparateur léger avant les exemples pour les faire respirer et les rendre secondaires visuellement. */
        border-top: 1px solid #f1f5f9;
        padding-top: 0.4rem;
        margin-top: 0.15rem;
    }
    .conjugation-section__summary {
        flex-direction: column;
        align-items: flex-start;
    }
    .conjugation-section__summary-meta {
        width: 100%;
        justify-content: space-between;
    }
}

/* ============================================================================
   À PROPOS - Section présentation
   ============================================================================
   Styles pour la page À propos avec feature-box
   ============================================================================ */
#about {
    padding: 6rem 0;
    background: linear-gradient(to bottom, #f8f9fa, #ffffff);
}
.about-img {
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
    border: 3px solid var(--white);
    box-shadow: 0 0 0 4px var(--red);
}
.about-img:hover {
    transform: scale(1.02);
}
#about h2 {
    margin-bottom: 1.8rem;
    color: var(--primary);
}
#about ul {
    padding-left: 0;
}
#about li {
    list-style: none;
    margin-bottom: 1.2rem;
    font-size: 1.1rem;
    display: flex;
    align-items: flex-start;
}
#about li i {
    color: var(--red);
    font-size: 1.3rem;
    margin-right: 0.8rem;
    margin-top: 0.2rem;
}
.feature-box {
    background: var(--white);
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    margin-top: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid var(--light-blue);
}
.feature-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
.feature-box i {
    font-size: 3rem;
    color: var(--blue);
    margin-bottom: 1.5rem;
}
.feature-box h4 {
    color: var(--primary);
    margin-bottom: 1rem;
}

/* ============================================================================
   TÉMOIGNAGES - Carousel d'avis élèves
   ============================================================================
   Styles pour le carousel de témoignages sur la page cours particuliers
   ============================================================================ */
#testimonials {
    padding: 6rem 0;
    background: linear-gradient(to bottom, #ffffff, #f8f9fa);
}
.testimonial-card {
    border-radius: 15px;
    padding: 2rem;
    height: 100%;
    background: var(--white);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-top: 4px solid var(--blue);
    transition: all 0.3s ease;
}
.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
.testimonial-card p {
    font-style: italic;
    color: #555;
    margin-bottom: 1.5rem;
}
.testimonial-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 3px solid var(--red);
}
.carousel-control-prev,
.carousel-control-next {
    width: 50px;
    height: 50px;
    background: var(--blue);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.8;
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
    background: var(--red);
}

/* ============================================================================
   CONTACT - Formulaire de contact
   ============================================================================
   Section avec formulaire de contact (fond gradient rouge/bleu)
   ============================================================================ */
.contact-section {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--red), var(--blue));
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.contact-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
            circle at 10% 20%,
            rgba(255, 255, 255, 0.1) 0%,
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(255, 255, 255, 0.1) 0%,
            transparent 30%
        );
    pointer-events: none;
}
.contact-section .section-title::after {
    background: var(--white);
}
.form-control {
    padding: 1rem;
    border-radius: 10px;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5rem;
    transition: all 0.3s;
}
.form-control:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
    background: var(--white);
}

.auth-form label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: #6b7280;
}
.auth-form .form-control {
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    margin-bottom: 1.2rem;
    padding: 0.95rem 1.15rem;
    font-size: 1rem;
    color: var(--dark);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}
.auth-form .form-select {
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background-color: #fff;
    margin-bottom: 1.2rem;
    padding: 0.95rem 3rem 0.95rem 1.15rem;
    font-size: 1rem;
    color: var(--dark);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}
.auth-form .form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.25rem rgba(0, 71, 160, 0.15);
}
.auth-form .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.25rem rgba(0, 71, 160, 0.15);
}
.auth-form .form-control::placeholder {
    color: #a0a7b4;
}
.auth-form textarea.form-control {
    min-height: 220px;
    resize: vertical;
}
.auth-form .btn-primary {
    border-radius: 18px;
    padding: 0.95rem 1rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    box-shadow: 0 15px 35px rgba(0, 71, 160, 0.25);
}
.auth-form .btn-outline-light {
    border-radius: 18px;
    padding: 0.95rem 1rem;
    font-weight: 600;
}

/* ============================================================================
   PAGE DE SIGNALEMENT DE CONTENU (DSA)
   ============================================================================
   Variante légère basée sur dashboard-card + auth-form
   ============================================================================ */
.content-report-card {
    overflow: hidden;
}
.content-report-card__header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}
.content-report-card__title {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1rem;
}
.content-report-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--red), var(--blue));
    color: var(--white);
    box-shadow: 0 14px 28px rgba(0, 71, 160, 0.18);
    flex-shrink: 0;
}
.content-report-card__title h2 {
    margin: 0.65rem 0 0;
    color: var(--primary);
    font-size: 1.55rem;
}
.content-report-card__lead {
    margin: 0;
    color: #5f6778;
    line-height: 1.65;
}
.content-report-meta__item {
    padding: 1.1rem 1.2rem;
}
.content-report-meta__label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
}
.content-report-meta__value {
    color: var(--primary);
    font-weight: 600;
    line-height: 1.55;
}
.content-report-meta__value a,
.content-report-target__link {
    color: var(--accent);
    text-decoration: none;
}
.content-report-meta__value a:hover,
.content-report-target__link:hover {
    text-decoration: underline;
}
.content-report-contest {
    background: linear-gradient(180deg, #fffdf6 0%, #fff8e8 100%);
    border-color: rgba(205, 46, 58, 0.08);
}
.content-report-target__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
}
.content-report-target__excerpt {
    margin: 1rem 0;
    padding: 1rem 1.1rem;
    border-left: 4px solid var(--accent);
    border-radius: 0 16px 16px 0;
    background: rgba(0, 71, 160, 0.05);
    color: #263247;
    line-height: 1.7;
}
.content-report-form .form-label {
    margin-bottom: 0.55rem;
    color: #1f2937;
    font-weight: 700;
}
.content-report-form .form-text {
    margin-top: 0.25rem;
    color: #6b7280;
    line-height: 1.55;
}
.content-report-form ul {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
    color: var(--secondary);
    font-size: 0.92rem;
    font-weight: 600;
}
.content-report-consent .form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.content-report-consent .form-check-input {
    margin-top: 0.18rem;
    flex-shrink: 0;
}
.content-report-consent .form-check-label {
    color: #334155;
    line-height: 1.55;
}
.content-report-submit-hint {
    max-width: 40rem;
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.55;
}
.auth-form .btn.content-report-submit-btn {
    min-width: 260px;
    padding-inline: 1.5rem;
}
@media (max-width: 767.98px) {
    .content-report-card__title {
        align-items: center;
    }
    .content-report-card__title h2 {
        margin-top: 0;
        font-size: 1.3rem;
    }
    .auth-form .btn.content-report-submit-btn {
        width: 100%;
        min-width: 0;
    }
}

/********************************/
/*** GESTION DES ARTICLES ***/
/********************************/
/*
 * ============================================================================
 *  SECTION COMPLÈTE : CRÉATION, AFFICHAGE ET GESTION DES ARTICLES
 * ============================================================================
 * 
 * Cette section regroupe TOUS les styles CSS liés aux articles :
 * 
 * 1. AFFICHAGE PUBLIC
 *    - Liste des articles (page /articles)
 *    - Page de lecture d'un article (détail)
 *    - Cartes d'articles, focus du mois, recherche
 * 
 * 2. CRÉATION / ÉDITION (Espace membre)
 *    - Page de création d'article (builder)
 *    - Éditeur Quill (WYSIWYG)
 *    - Formulaire de saisie, hashtags, preview
 * 
 * 3. STYLES DE CONTENU
 *    - Typographie (titres, paragraphes, listes)
 *    - Citations (blockquote)
 *    - Code (blocs de code, code inline)
 *    - Images principales
 * 
 * ============================================================================
 */
/* ----------------------------------------------------------------------------
   SOUS-SECTION : AFFICHAGE PUBLIC - LISTE DES ARTICLES
   ----------------------------------------------------------------------------
   Styles pour la page de liste des articles (/articles)
   - Hero avec focus du mois
   - Barre de recherche
   - Grille de cartes d'articles
   ---------------------------------------------------------------------------- */

.articles-badge,
.hero-badge {
    display: inline-block;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--accent);
    background: rgba(0, 71, 160, 0.1);
    padding: 0.4rem 1.2rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
}
.hero-badge--centered {
    display: table;
    margin-left: auto;
    margin-right: auto;
}
.page-hero--primary .hero-badge {
    color: var(--white);
    background: rgba(255, 255, 255, 0.2);
}
.articles-hero h1 {
    font-weight: 700;
    margin-bottom: 0.85rem;
}
.articles-pillars li {
    margin-bottom: 0.85rem;
    color: #4d5562;
    display: flex;
    gap: 0.6rem;
}
.articles-pillars li span {
    font-weight: 700;
    color: var(--primary);
}
.articles-hero-card {
    border-radius: 20px;
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
    color: var(--primary);
}
.articles-hero-card .eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
    color: var(--purple);
    font-weight: 700;
}
.articles-hero-card h2 {
    color: var(--primary);
    font-size: 1.45rem;
    margin-bottom: 0;
}
.articles-hero-card p {
    color: #4c5160;
}
.articles-hero-card__content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.articles-hero-card__headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}
.articles-hero-card__media {
    flex: 0 0 auto;
}
.articles-hero-card__media img {
    max-height: 72px;
    width: auto;
    object-fit: contain;
}
.articles-hero-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem 1rem;
    margin-top: 0.6rem;
}
.articles-hero-card .eyebrow--centered {
    display: table;
    margin: 0 auto 0.9rem;
    text-align: center;
}
@media (max-width: 991.98px) {
    .articles-hero-card__headline {
        flex-direction: column;
        align-items: flex-start;
    }
    .articles-hero-card__media {
        width: 100%;
        text-align: center;
    }
}
.articles-hero-card .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 0;
}

/* ============================================================================
   SECTION ARTICLES - NOUVELLE STRUCTURE AVEC SIDEBAR
   ============================================================================ */
.articles-content {
    background: linear-gradient(180deg, #fff, #f7f8fb);
}

/* Sidebar des filtres (gauche) */
.articles-sidebar {
    position: relative;
}

.articles-filters-wrapper {
    background: #fff;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.articles-filters-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
}

/* Sticky sur desktop uniquement */
@media (min-width: 992px) {
    .articles-filters-wrapper {
        position: sticky;
        top: 100px; /* Ajustez selon la hauteur de votre navbar */
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }
}

/* Zone principale des articles (droite) */
.articles-main {
    min-height: 400px;
}

.articles-search-form .form-control {
    border-radius: 14px 0 0 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    height: 42px;
}

.articles-search-form .input-group-text {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-right: none;
    background: transparent;
    height: 42px;
    display: flex;
    align-items: center;
}

.articles-search-form .btn {
    border-radius: 14px;
}
.theme-card {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f5f7fb);
    border: 1px solid rgba(0, 0, 0, 0.05);
    height: 100%;
}
.theme-chips {
    background: linear-gradient(180deg, #ffffff, #f5f7fb);
    border-radius: 20px;
    padding: 1.2rem;
    border: 1px solid rgba(0, 0, 0, 0.04);
}
.theme-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.theme-chip-pill {
    position: relative;
}
.theme-chip-pill input {
    opacity: 0;
    position: absolute;
}
.theme-chip-pill label {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 1.2rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 71, 160, 0.2);
    color: var(--accent);
    font-weight: 600;
    font-size: 0.9rem;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}
.theme-chip-pill input:checked + label {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(135deg, var(--red), var(--blue));
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Styles pour les liens de thème (approche HTML native) */
.theme-chip-link {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 1.2rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 71, 160, 0.2);
    color: var(--accent);
    font-weight: 600;
    font-size: 0.9rem;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.theme-chip-link:hover {
    background-color: rgba(0, 71, 160, 0.05);
    border-color: rgba(0, 71, 160, 0.3);
    color: var(--accent);
    text-decoration: none;
}

.theme-chip-link.active {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(135deg, var(--red), var(--blue));
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.theme-chip-link.active:hover {
    background: linear-gradient(135deg, var(--red), var(--blue));
    opacity: 0.9;
    text-decoration: none;
}
.theme-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(0, 71, 160, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 1.2rem;
}
.theme-label {
    font-weight: 700;
    margin-bottom: 0.2rem;
}
.theme-description {
    margin-bottom: 0.3rem;
    color: #6b7280;
    font-size: 0.9rem;
}
.theme-chip {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--purple);
    border: 1px solid rgba(124, 45, 140, 0.3);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}

.section-heading .eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
    color: var(--accent);
    font-weight: 700;
}

/* Ancienne classe pour compatibilité - maintenant intégrée dans articles-content */
.articles-list {
    background: linear-gradient(180deg, #fff, #f7f8fb);
}

/* Cartes d'articles - taille réduite pour la nouvelle mise en page */
.article-card {
    background: #fff;
    border-radius: 20px;
    padding: 1.5rem;
    height: 100%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.article-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.article-card--accent {
    border: 2px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, rgba(205, 46, 58, 0.6), rgba(0, 71, 160, 0.7)) border-box;
}
.article-card .article-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--purple);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
}
.article-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}
.article-card p {
    color: #4d5562;
}
.article-card .article-details {
    margin: 1rem 0 1.5rem;
    color: #6b7280;
    font-size: 0.9rem;
}
.article-card .article-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.article-card .author span {
    font-weight: 700;
    display: block;
}
.article-card .author small {
    color: #6b7280;
}
.article-card .btn.disabled {
    pointer-events: none;
    opacity: 0.7;
}

/* Responsive pour les articles */
@media (max-width: 991.98px) {
    /* Sur mobile/tablette, les filtres ne sont pas sticky */
    .articles-filters-wrapper {
        position: static;
        max-height: none;
        overflow-y: visible;
        margin-bottom: 2rem;
    }
    
    .articles-filters-header {
        text-align: center;
    }
    
    .articles-main .section-heading {
        text-align: center;
    }
    
    /* Sur tablette, on peut garder 2 colonnes */
    @media (min-width: 768px) and (max-width: 991.98px) {
        .articles-main .row .col-md-6 {
            flex: 0 0 50%;
            max-width: 50%;
        }
    }
}

@media (max-width: 767.98px) {
    /* Sur mobile, une seule colonne */
    .articles-main .row .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .article-card {
        padding: 1.25rem;
    }
    
    .article-card h3 {
        font-size: 1.1rem;
    }
}

/* Styles pour la pagination des articles */
.articles-main .pagination {
    margin-top: 2rem;
}

.articles-main .pagination .page-link {
    color: var(--accent);
    border-color: rgba(0, 71, 160, 0.2);
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
}

.articles-main .pagination .page-link:hover {
    background-color: rgba(0, 71, 160, 0.1);
    border-color: var(--accent);
    color: var(--accent);
}

.articles-main .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--red), var(--blue));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.articles-main .pagination .page-item.disabled .page-link {
    color: #6b7280;
    background-color: #f9fafb;
    border-color: rgba(0, 0, 0, 0.1);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Indicateur de chargement AJAX */
#articles-content .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
}

/* ----------------------------------------------------------------------------
   SOUS-SECTION : AFFICHAGE PUBLIC - PAGE DE LECTURE D'ARTICLE
   ----------------------------------------------------------------------------
   Styles pour la page de détail d'un article (/articles/{slug})
   ---------------------------------------------------------------------------- */
.article-show {
    background: linear-gradient(180deg, rgba(0, 71, 160, 0.03), rgba(205, 46, 58, 0.05));
    padding-bottom: 80px;
}
.breadcrumb-nav {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    color: #6b7280;
}
.breadcrumb-nav a {
    color: var(--accent);
    text-decoration: none;
}
.show-hero {
    background: #fff;
    border-radius: 28px;
    padding: 2.5rem;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
}
.show-hero .eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.75rem;
    color: var(--purple);
    font-weight: 700;
}
.show-hero h1 {
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0.6rem 0;
}
.show-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    color: #6b7280;
    font-size: 0.95rem;
}
.show-content {
    background: #fff;
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

/* Séparateur décoratif uniquement après les paragraphes contenant <br> */
.show-content p:has(br:only-child)::after,
.show-content p:has(> br)::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), transparent);
    margin: 1.5rem auto 0;
    border-radius: 2px;
    opacity: 0.3;
}

/* Fallback pour les navigateurs qui ne supportent pas :has() */
.show-content p br + br::before {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), transparent);
    margin: 1.5rem auto 0;
    border-radius: 2px;
    opacity: 0.3;
}

.show-content section + section {
    margin-top: 1.5rem;
}

/* Image principale de l'article (affichée dans la page de lecture) */
.article-featured-image {
    position: relative;
    margin: 2rem 0;
    overflow: hidden;
    text-align: center;
}

.article-featured-image img {
    max-height: 400px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-featured-image:hover img {
    transform: scale(1.02);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.15);
}

/* Responsive : ajustement pour mobile */
@media (max-width: 768px) {
    .show-hero {
        border-radius: 20px;
        padding: 1.5rem 1.25rem;
    }

    .show-hero h1 {
        font-size: clamp(1.8rem, 8vw, 2.15rem);
        line-height: 1.15;
        margin: 0.55rem 0 0.85rem;
        overflow-wrap: anywhere;
    }

    .show-hero .lead {
        font-size: 1rem;
        line-height: 1.55;
    }

    .show-meta {
        gap: 0.7rem 1rem;
        font-size: 0.9rem;
    }

    .show-content {
        border-radius: 20px;
        padding: 1.5rem 1.25rem;
    }

    .article-featured-image img {
        max-height: 250px;
        max-width: 100%;
        border-radius: 4px;
    }
}

/* ----------------------------------------------------------------------------
   SOUS-SECTION : TYPOGRAPHIE ET CONTENU DES ARTICLES
   ----------------------------------------------------------------------------
   Styles pour le contenu HTML généré par Quill (titres, citations, code, etc.)
   ---------------------------------------------------------------------------- */

/* Citations stylisées (blockquote) */
.show-content blockquote {
    position: relative;
    padding: 1.5rem 2rem 1.5rem 3.5rem;
    margin: 2.5rem 0;
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.8;
    color: #555;
    background: linear-gradient(135deg, rgba(0, 71, 160, 0.05), rgba(205, 46, 58, 0.05));
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.show-content blockquote::before {
    content: '"';
    position: absolute;
    left: 1rem;
    top: 0.5rem;
    font-size: 4rem;
    color: var(--accent);
    opacity: 0.3;
    font-family: Georgia, serif;
    line-height: 1;
}

/* Titres avec barres colorées (H1, H2, H3) */
.show-content h1 {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 3rem 0 2rem 0;
    color: var(--primary);
    position: relative;
    padding-left: 2rem;
    padding-bottom: 1rem;
    border-bottom: 3px solid var(--accent);
}

.show-content h1::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, var(--accent), var(--secondary));
    border-radius: 3px;
}

.show-content h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 2.5rem 0 1.5rem 0;
    color: var(--primary);
    position: relative;
    padding-left: 1.5rem;
    padding-bottom: 0.75rem;
}

.show-content h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--accent), var(--secondary));
    border-radius: 2px;
}

.show-content h3 {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 2rem 0 1rem 0;
    color: #34495e;
    padding-left: 1rem;
    border-left: 3px solid rgba(0, 71, 160, 0.3);
}

/* Indentation (classes générées par Quill) */
.show-content .ql-indent-1 {
    padding-left: 3em;
}
.show-content .ql-indent-2 {
    padding-left: 6em;
}
.show-content .ql-indent-3 {
    padding-left: 9em;
}
.show-content .ql-indent-4 {
    padding-left: 12em;
}
.show-content .ql-indent-5 {
    padding-left: 15em;
}
.show-content .ql-indent-6 {
    padding-left: 18em;
}
.show-content .ql-indent-7 {
    padding-left: 21em;
}
.show-content .ql-indent-8 {
    padding-left: 24em;
}

/* Blocs de code (pre, code-block) */
.show-content pre,
.show-content .ql-syntax {
    background: #2d2d2d;
    color: #f8f8f2;
    padding: 1.5rem;
    border-radius: 8px;
    overflow-x: auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 2rem 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.show-content code {
    background: #f4f4f4;
    color: #e83e8c;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
}

.show-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
}

/* Listes améliorées (point 6) */
.show-content ul,
.show-content ol {
    margin: 2rem 0;
    padding-left: 2rem;
}

.show-content li {
    margin-bottom: 1rem;
    line-height: 1.8;
    position: relative;
    padding-left: 0.5rem;
}

.show-content ul li::marker {
    color: var(--accent);
    font-weight: 700;
}

/* Responsive */
@media (max-width: 768px) {
    .show-content blockquote {
        padding: 1.1rem 1rem 1.1rem 1.25rem;
        font-size: 1rem;
        line-height: 1.65;
    }

    .show-content blockquote::before {
        display: none;
    }

    .show-content h1 {
        font-size: 1.8rem;
        padding-left: 1.5rem;
    }
    
    .show-content h1::before {
        width: 4px;
    }
    
    .show-content h2 {
        font-size: 1.5rem;
        padding-left: 1rem;
    }
    
    .show-content h2::before {
        width: 3px;
    }
    
    .show-content h3 {
        font-size: 1.3rem;
    }

    .show-content ul,
    .show-content ol {
        padding-left: 1.35rem;
    }

    .show-content .ql-indent-1 {
        padding-left: 1rem;
    }

    .show-content .ql-indent-2 {
        padding-left: 1.5rem;
    }

    .show-content .ql-indent-3 {
        padding-left: 2rem;
    }

    .show-content .ql-indent-4 {
        padding-left: 2.5rem;
    }

    .show-content .ql-indent-5,
    .show-content .ql-indent-6,
    .show-content .ql-indent-7,
    .show-content .ql-indent-8 {
        padding-left: 3rem;
    }
}
.show-footer {
    text-align: center;
    margin-top: 2.5rem;
}
.show-footer p {
    margin-bottom: 1rem;
    font-size: 1.05rem;
}

/* ============================================================================
   FOOTER - Pied de page
   ============================================================================
   Footer avec copyright, réseaux sociaux et slogan
   ============================================================================ */
footer {
    padding: 3rem 0 2rem;
    background: var(--primary);
    font-size: 0.9rem;
}
footer p {
    margin-bottom: 1.5rem;
    color: var(--white);
}
.social-icons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--white);
    font-size: 1.2rem;
    transition: all 0.3s;
}
.social-icons a:hover {
    background: var(--red);
    transform: translateY(-5px);
}

/* Liens du footer */
.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.footer-link {
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: var(--accent);
    text-decoration: underline;
}

.footer-separator {
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0.5rem;
}

/* ============================================================================
   FAQ - Questions fréquentes
   ============================================================================ */
.faq-section {
    background: linear-gradient(180deg, rgba(0, 71, 160, 0.04), rgba(205, 46, 58, 0.02));
    padding-bottom: 90px;
}

.faq-header {
    margin-top: 2rem;
    padding-top: 1.5rem;
}

.faq-category {
    margin-bottom: 3rem;
}

.faq-category-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(0, 71, 160, 0.1);
}

.faq-category-title i {
    color: var(--accent);
    margin-right: 0.75rem;
}

.faq-section .accordion-item {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
}

.faq-section .accordion-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.faq-section .accordion-button {
    background: #fff;
    color: var(--primary);
    font-weight: 600;
    font-size: 1.05rem;
    padding: 1.25rem 1.5rem;
    border: none;
    box-shadow: none;
}

.faq-section .accordion-button:not(.collapsed) {
    background: linear-gradient(180deg, rgba(0, 71, 160, 0.05), #fff);
    color: var(--accent);
}

.faq-section .accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 71, 160, 0.15);
    border-color: transparent;
}

.faq-section .accordion-body {
    padding: 1.5rem;
    color: #4d5562;
    line-height: 1.7;
    background: #fff;
}

.faq-contact-card {
    background: linear-gradient(135deg, rgba(0, 71, 160, 0.05), rgba(205, 46, 58, 0.05));
    border: 2px solid rgba(0, 71, 160, 0.1);
    margin-top: 3rem;
}

.faq-contact-card h3 {
    color: var(--primary);
    font-weight: 700;
}

.faq-contact-card .btn {
    margin-top: 0.5rem;
}

/* Section CTA FAQ sur la page d'accueil */
.faq-cta-section {
    background: linear-gradient(180deg, rgba(0, 71, 160, 0.03), rgba(205, 46, 58, 0.02));
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.faq-cta-section a {
    color: var(--accent);
    transition: color 0.2s ease;
}

.faq-cta-section a:hover {
    color: var(--red);
    text-decoration: underline !important;
}

/* ============================================================================
   DASHBOARD - Tableau de bord espace membre
   ============================================================================
   Styles pour l'espace membre avec navigation par onglets
   Design cohérent avec la page de connexion (auth-card)
   ============================================================================ */
.dashboard-section {
    padding-bottom: 90px;
    background: linear-gradient(180deg, rgba(0, 71, 160, 0.04), rgba(205, 46, 58, 0.02));
}
.dashboard-card {
    background: #fff;
    border-radius: 26px;
    border: 2px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, var(--red), var(--purple), var(--blue)) border-box;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}
.member-visio-card {
    position: relative;
    border-radius: 28px;
    padding: 1.6rem;
    border: 1px solid rgba(74, 102, 200, 0.16);
    background:
        radial-gradient(circle at top right, rgba(124, 45, 140, 0.16), transparent 32%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 243, 255, 0.96));
    box-shadow: 0 22px 45px rgba(46, 27, 86, 0.12);
}
.member-visio-card::after {
    content: "";
    position: absolute;
    inset: auto -40px -55px auto;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 71, 160, 0.12), transparent 68%);
    pointer-events: none;
}
.member-visio-card__body {
    position: relative;
    z-index: 1;
    display: grid;
    /* Deux bandes flexibles : la colonne droite n’est plus « auto » (min-content),
       sinon le CTA reste collé au bloc de gauche alors qu’il reste de la place à droite */
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
}
.member-visio-card__content {
    min-width: 0;
}
.member-visio-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.7rem;
    margin-bottom: 0.9rem;
    border-radius: 999px;
    background: rgba(74, 102, 200, 0.08);
    color: #615381;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.member-visio-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}
.member-visio-card__title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
    color: #241245;
}
.member-visio-card__description {
    margin: 0.55rem 0 0;
    max-width: 48rem;
    color: #665b82;
    line-height: 1.6;
}
.member-visio-card__remaining {
    flex-shrink: 0;
    min-width: 168px;
    padding: 0.9rem 1rem;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(237, 243, 255, 0.98));
    border: 1px solid rgba(74, 102, 200, 0.14);
    box-shadow: 0 12px 30px rgba(0, 71, 160, 0.08);
    text-align: center;
}
.member-visio-card__remaining-value {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    color: #1f376f;
}
.member-visio-card__remaining-label {
    display: block;
    margin-top: 0.2rem;
    color: #5d6680;
    font-weight: 700;
}
.member-visio-card__progress {
    margin-top: 1.2rem;
}
.member-visio-card__progress-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #53476e;
}
.member-visio-card__progress-track {
    height: 12px;
    border-radius: 999px;
    background: rgba(74, 102, 200, 0.1);
    overflow: hidden;
}
.member-visio-card__progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--red), var(--purple), var(--blue));
}
.member-visio-card__aside {
    position: relative;
    z-index: 1;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}
/* Tout le bloc latéral (CTA + note) centré ; sélecteur sous aside pour surcharger .btn */
.member-visio-card__aside .btn.member-visio-card__cta {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: auto;
    max-width: 100%;
    border-radius: 16px;
    padding: 0.9rem 1.35rem;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 16px 32px rgba(0, 71, 160, 0.16);
}
.member-visio-card__aside .member-visio-card__note {
    color: #6b7280;
    font-size: 0.92rem;
    line-height: 1.5;
    width: 100%;
}
.member-visio-card__footer {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 1.35rem;
}
.member-visio-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    padding: 0.95rem 1rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(89, 78, 163, 0.1);
}
.member-visio-card__meta-label {
    color: #7b7192;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.member-visio-card__meta strong {
    color: #241245;
    font-size: 1rem;
}
.member-visio-card__meta a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}
.member-visio-card__meta a:hover {
    text-decoration: underline;
}
@media (max-width: 991.98px) {
    .member-visio-card {
        padding: 1.35rem;
    }
    .member-visio-card__body {
        grid-template-columns: 1fr;
    }
    .member-visio-card__header {
        flex-direction: column;
    }
    .member-visio-card__remaining {
        min-width: 0;
        width: 100%;
        text-align: left;
    }
    .member-visio-card__aside {
        width: 100%;
    }
    .member-visio-card__footer {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 575.98px) {
    .member-visio-card {
        padding: 1.15rem;
    }
    .member-visio-card__title {
        font-size: 1.15rem;
    }
    .member-visio-card__description {
        font-size: 0.95rem;
    }
    .member-visio-card__remaining-value {
        font-size: 1.35rem;
    }
}
.dashboard-tabs {
    border-bottom: 2px solid rgba(0, 0, 0, 0.08);
    padding: 0 1.5rem;
    background: linear-gradient(180deg, #f8f9fa, #fff);
}
.dashboard-tabs .nav-link {
    color: #6b7280 !important;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 1rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    background: transparent;
    margin-bottom: -2px;
}
.dashboard-tabs .nav-link i {
    color: inherit;
}
.dashboard-tabs .nav-link:hover {
    color: var(--accent) !important;
    background: rgba(0, 71, 160, 0.05);
    border-bottom-color: rgba(0, 71, 160, 0.3);
}
.dashboard-tabs .nav-link.active {
    color: var(--accent) !important;
    background: transparent;
    border-bottom-color: var(--accent);
    font-weight: 700;
}
.dashboard-content {
    min-height: 400px;
}
.dashboard-card .form-control {
    /* Inputs visibles dans le dashboard (fond blanc + bordure) */
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}
.dashboard-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}
.dashboard-subsection {
    background: linear-gradient(180deg, #f8f9fa, #fff);
    border-radius: 18px;
    padding: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 1.5rem;
}
.subsection-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}
.user-admin-search__controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: 0.5rem;
    align-items: stretch;
}
.user-admin-search__input.form-control {
    margin-bottom: 0;
}
.user-admin-search__controls .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    .user-admin-search__controls {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   COURSE ADMIN ACTIONS - Gestion des cours (Espace membre)
   ============================================================================
   Deux cartes d'actions ("Créer une leçon" / "Gérer niveaux & unités").
   Objectif : rendre la zone d'actions plus lisible que 2 gros boutons.
   ============================================================================ */
.course-admin-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.course-admin-action {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    min-height: 84px;
    border-radius: 18px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: linear-gradient(180deg, #f8f9fa, #fff);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
    color: var(--primary);
    text-decoration: none;
    transition: all 0.25s ease;
}
.course-admin-action:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
    border-color: rgba(0, 71, 160, 0.25);
}
.course-admin-action:focus-visible {
    outline: 3px solid rgba(0, 71, 160, 0.25);
    outline-offset: 3px;
}
.course-admin-action__icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.10);
}
.course-admin-action--create .course-admin-action__icon {
    background: linear-gradient(135deg, var(--blue), rgba(0, 71, 160, 0.8));
}
.course-admin-action--manage .course-admin-action__icon {
    background: linear-gradient(135deg, var(--purple), rgba(124, 45, 140, 0.85));
}
.course-admin-action__content {
    flex: 1;
    min-width: 0;
}
.course-admin-action__title {
    display: block;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.15rem;
}
.course-admin-action__text {
    display: block;
    font-size: 0.92rem;
    color: #6b7280;
    line-height: 1.35;
}
.course-admin-action__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    color: #9ca3af;
    background: rgba(0, 0, 0, 0.03);
    flex-shrink: 0;
    transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.course-admin-action:hover .course-admin-action__chevron {
    transform: translateX(3px);
    background: rgba(0, 71, 160, 0.08);
    color: var(--accent);
}

/* ============================================================================
   COURSE LESSONS ACCORDION - Liste des leçons (Espace membre > Cours)
   ============================================================================
   Accordéon niveaux → unités → leçons, avec espacements pour éviter chevauchement.
   ============================================================================ */
.course-lessons-accordion .accordion-item {
    background: #fff;
}
.course-lessons-accordion__level-btn {
    padding: 1rem 1.25rem !important;
    font-size: 1.05rem;
}
.course-lessons-accordion__level-btn .badge {
    font-weight: 500;
    padding: 0.35em 0.65em;
}
/* Corps du niveau : espace au-dessus des unités pour ne pas coller au header */
.course-lessons-accordion__level-body {
    padding-top: 0.5rem !important;
}
/* Conteneur des unités : espace entre chaque bloc unité */
.course-lessons-accordion__units .accordion-item {
    margin-bottom: 0;
}
.course-lessons-accordion__unit-item {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.06) !important;
    margin-bottom: 1rem;
}
.course-lessons-accordion__unit-item:last-child {
    margin-bottom: 0;
}
/* Contenu développé d'une unité : marge en bas pour bien séparer du bloc suivant */
.course-lessons-accordion__unit-body {
    margin-bottom: 0;
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.course-lessons-accordion__unit-btn {
    padding: 0.85rem 1.1rem !important;
    font-size: 0.98rem;
}
.course-lessons-accordion__unit-btn .unit-title {
    font-weight: 600;
}
.course-lessons-accordion__unit-btn .badge {
    font-weight: 500;
    padding: 0.3em 0.55em;
}
/* Switcher accès unité dans l'en-tête : ne pas rétrécir, éviter le collapse au clic */
.course-lessons-accordion__unit-item .accordion-header .accordion-button {
    min-width: 0;
}
.unit-access-switcher {
    flex-shrink: 0;
}
.unit-access-switcher .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}
.lesson-access-switcher .btn-sm {
    padding: 0.2rem 0.45rem;
    font-size: 0.75rem;
}
.course-lessons-accordion__table thead th {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.course-lessons-accordion__lesson-row td {
    font-size: 0.95rem;
    vertical-align: middle;
}
.course-lessons-accordion__table .course-status-badge {
    padding: 0.35em 0.65em;
    font-size: 0.8rem;
}
.course-lessons-accordion__table .btn-group .btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
}

/* ============================================================================
   STAT CARDS - Cartes de statistiques
   ============================================================================
   Cartes affichant des statistiques avec icônes colorées
   ============================================================================ */
.stat-card {
    background: #fff;
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
    height: 100%;
}
.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    flex-shrink: 0;
}
.stat-icon-blue {
    background: linear-gradient(135deg, var(--blue), rgba(0, 71, 160, 0.8));
}
.stat-icon-red {
    background: linear-gradient(135deg, var(--red), rgba(205, 46, 58, 0.8));
}
.stat-icon-purple {
    background: linear-gradient(135deg, var(--purple), rgba(124, 45, 140, 0.8));
}
.stat-icon-green {
    background: linear-gradient(135deg, #10b981, #059669);
}
.stat-content {
    flex: 1;
}
.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.2;
}
.stat-label {
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 600;
    margin-top: 0.25rem;
}

/* ============================================================================
   ACTION CARDS - Cartes d'actions rapides
   ============================================================================
   Cartes pour les actions rapides de l'éditeur (articles, commentaires, etc.)
   ============================================================================ */
.action-card {
    background: #fff;
    border-radius: 20px;
    padding: 1.75rem;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
}
.action-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
}
.action-icon {
    width: 70px;
    height: 70px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #fff;
    margin: 0 auto 1rem;
}
.action-icon-blue {
    background: linear-gradient(135deg, var(--blue), rgba(0, 71, 160, 0.8));
}
.action-icon-red {
    background: linear-gradient(135deg, var(--red), rgba(205, 46, 58, 0.8));
}
.action-icon-green {
    background: linear-gradient(135deg, #10b981, #059669);
}
.action-icon-orange {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}
.action-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.75rem;
}
.action-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.5rem;
}
.action-description {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 0;
}

/* ============================================================================
   DASHBOARD ACTIONS - Zone d'actions
   ============================================================================
   Zone contenant les boutons d'actions (créer, modifier, etc.)
   ============================================================================ */
.dashboard-actions {
    background: linear-gradient(180deg, #f8f9fa, #fff);
    border-radius: 18px;
    padding: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
}
.dashboard-actions .btn {
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
}
.dashboard-actions .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* ============================================================================
   RESPONSIVE - Media queries
   ============================================================================
   Adaptations pour tablettes et mobiles
   ============================================================================ */
@media (max-width: 991.98px) {
    .hero-layout {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
    .hero-content {
        text-align: center;
    }
    .hero h1 {
        font-size: 2.8rem;
    }
    .hero p {
        font-size: 1.1rem;
        margin-left: auto;
        margin-right: auto;
    }
    .hero-buttons {
        justify-content: center;
    }
    .korean-letter {
        font-size: 2rem;
    }
}

@media (max-width: 767.98px) {
    .hero {
        height: auto;
        min-height: auto;
        max-height: none;
        padding-top: 8.5rem;
        padding-bottom: 3rem;
        align-items: flex-start;
    }
    .hero-content {
        max-width: 100%;
        padding: 0 0.5rem;
    }
    .hero h1 {
        font-size: clamp(2rem, 9vw, 2.6rem);
        line-height: 1.15;
    }
    .hero p {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 1.5rem;
    }
    .hero-buttons {
        gap: 0.8rem;
    }
    .hero-buttons .btn {
        width: 100%;
        margin-bottom: 0.8rem;
        padding: 0.9rem 1.25rem;
    }
    .korean-letter {
        font-size: 1.5rem;
    }
    .section-title {
        font-size: 1.8rem;
    }
    /* Dashboard responsive */
    .dashboard-tabs {
        padding: 0 0.5rem;
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    .dashboard-tabs .nav-link {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
        white-space: nowrap;
    }
    .dashboard-tabs .nav-link i {
        display: none;
    }
    .dashboard-section-title {
        font-size: 1.3rem;
    }
    .stat-card {
        flex-direction: column;
        text-align: center;
    }
    .stat-icon {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
    }
    .stat-value {
        font-size: 1.75rem;
    }
    .action-card {
        margin-bottom: 1rem;
    }
    .dashboard-actions .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    .course-admin-actions {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------------------------------
   SOUS-SECTION : CRÉATION D'ARTICLES (Espace membre - Éditeur/Admin)
   ----------------------------------------------------------------------------
   Styles pour la page de création/édition d'article dans l'espace membre
   ---------------------------------------------------------------------------- */
.article-builder-card {
    background: #fff;
    border-radius: 26px;
    border: 2px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, var(--red), var(--purple), var(--blue)) border-box;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18);
    padding: 2rem;
}
.article-form-panel,
.article-preview-panel {
    background: #fff;
    border-radius: 20px;
    padding: 1.5rem;
}
.article-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.article-panel-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
}
.article-panel-subtitle {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0;
}
.article-admin-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    background: rgba(0, 71, 160, 0.06);
}
.article-admin-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}
.article-admin-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
}
.article-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e5e7eb;
}

/* Formulaire de création - Champs de saisie */
.article-form .form-control,
.article-form .form-select {
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    padding: 0.75rem 0.9rem;
}
.article-form .form-control:focus,
.article-form .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.18rem rgba(0, 71, 160, 0.18);
    background-color: #ffffff;
}
.article-form .form-text {
    font-size: 0.85rem;
    color: #6b7280;
}

/* Formulaire de création - Gestion des hashtags */
.hashtags-input {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    min-height: 44px;
    align-items: center;
    background: #f9fafb;
}
.hashtag {
    background-color: #e5edff;
    color: #1e3a8a;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
}
.hashtag-remove {
    cursor: pointer;
    color: #b91c1c;
    font-weight: 700;
}
.hashtag-input {
    border: none;
    outline: none;
    flex: 1;
    min-width: 120px;
    background: transparent;
}

/* Éditeur Quill (WYSIWYG) - Indentation */
.article-quill-editor .ql-editor .ql-indent-1 {
    padding-left: 3em;
}
.article-quill-editor .ql-editor .ql-indent-2 {
    padding-left: 6em;
}
.article-quill-editor .ql-editor .ql-indent-3 {
    padding-left: 9em;
}
.article-quill-editor .ql-editor .ql-indent-4 {
    padding-left: 12em;
}
.article-quill-editor .ql-editor .ql-indent-5 {
    padding-left: 15em;
}
.article-quill-editor .ql-editor .ql-indent-6 {
    padding-left: 18em;
}
.article-quill-editor .ql-editor .ql-indent-7 {
    padding-left: 21em;
}
.article-quill-editor .ql-editor .ql-indent-8 {
    padding-left: 24em;
}

/* Blocs de code dans l'éditeur Quill */
.article-quill-editor .ql-editor pre.ql-syntax {
    background: #2d2d2d;
    color: #f8f8f2;
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 1rem 0;
}

.article-quill-editor .ql-toolbar {
    border-radius: 14px 14px 0 0;
}
.article-quill-editor .ql-container {
    border-radius: 0 0 14px 14px;
    min-height: 220px;
}

/* Formulaire de création - Sections SEO et dates */
.seo-section {
    background-color: #f9fafb;
    padding: 1rem;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
}
.dates-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

/* Formulaire de création - Aperçu en temps réel */
.article-preview-card {
    border-radius: 20px;
    padding: 1.5rem;
    background: linear-gradient(180deg, #ffffff, #f9fafb);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.04);
}
.preview-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--primary);
}
.preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: #6b7280;
}
.preview-image {
    width: 100%;
    height: 190px;
    background-color: #e5e7eb;
    margin-bottom: 1rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 0.9rem;
}

/* Formulaire de création - Debug JSON */
.json-preview {
    background-color: #0f172a;
    color: #e5e7eb;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    font-family: "Courier New", monospace;
    font-size: 0.8rem;
    white-space: pre-wrap;
    max-height: 300px;
    overflow: auto;
}

/* Badges de statut (publié, brouillon, archivé) */
.status-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}
.status-published {
    background-color: #16a34a;
    color: #fff;
}
.status-draft {
    background-color: #f59e0b;
    color: #fff;
}
.status-archived {
    background-color: #4b5563;
    color: #fff;
}

/* Notifications flottantes (succès/erreur) */
.notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 0.9rem 1.2rem;
    border-radius: 999px;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s;
    z-index: 1050;
}
.notification.show {
    opacity: 1;
    transform: translateY(0);
}
.notification-success {
    background-color: #16a34a;
}
.notification-error {
    background-color: #dc2626;
}

/***********************************************************************
 * SECTION : Builder de cours (page /espace-membre/cours/creer)
 * - Styles spécifiques au builder JSON de leçon (admin)
 * - Padding top élevé pour éviter le chevauchement de la navbar
 **********************************************************************/
.lesson-layout {
    background: #f7f8fb;
    min-height: 100vh;
    padding: 190px 0 80px;
}
.lesson-container {
    max-width: 1500px;
    width: 98%;
}
.lesson-card {
    border: 1px solid #e4e6ed;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 40px rgba(31, 56, 93, 0.06);
}
.lesson-card-header {
    padding: 22px 24px;
    border-bottom: 1px solid #e4e6ed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.lesson-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(42, 75, 124, 0.08);
    color: #2a4b7c;
    padding: 8px 12px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.9rem;
}
.lesson-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.lesson-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 6px;
}
.lesson-label-hint {
    font-weight: 500;
    color: #6b7280;
    font-size: 0.8rem;
}
.lesson-sidebar {
    position: sticky;
    top: 90px;
    padding: 20px;
    border-right: 1px solid #e4e6ed;
    height: calc(100vh - 160px);
    overflow-y: auto;
}
.lesson-block-category {
    margin-bottom: 18px;
}
.lesson-category-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #2a4b7c;
    margin-bottom: 10px;
}
.lesson-block-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}
.lesson-block-item {
    border: 1px dashed #e4e6ed;
    padding: 10px;
    border-radius: 10px;
    background: #fff;
    cursor: grab;
    transition: all 0.2s;
    text-align: center;
    font-size: 0.9rem;
}
.lesson-block-item:hover {
    border-color: #2a4b7c;
    box-shadow: 0 4px 12px rgba(42, 75, 124, 0.1);
    transform: translateY(-2px);
}
.lesson-builder {
    padding: 22px;
}
.lesson-block {
    border: 1px solid #e4e6ed;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.lesson-block.dragging {
    opacity: 0.6;
}
.lesson-block:hover {
    border-color: #2a4b7c;
    box-shadow: 0 6px 18px rgba(42, 75, 124, 0.08);
}
.lesson-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e4e6ed;
    padding-bottom: 8px;
    margin-bottom: 8px;
}
.lesson-block-title {
    font-weight: 700;
    color: #2a4b7c;
    font-size: 0.95rem;
}
.btn-icon {
    border: none;
    background: transparent;
    color: #5d6b78;
    padding: 4px 6px;
    border-radius: 6px;
}
.btn-icon:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #2a4b7c;
}
.drag-placeholder {
    height: 50px;
    border: 2px dashed #2a4b7c;
    border-radius: 10px;
    margin: 8px 0;
    background: rgba(42, 75, 124, 0.04);
}
.lesson-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid #e4e6ed;
}
.empty-state {
    text-align: center;
    padding: 30px 10px;
    color: #6c757d;
}
.badge-helper {
    background: rgba(243, 156, 18, 0.15);
    color: #c27c0e;
    padding: 6px 10px;
    border-radius: 16px;
    font-weight: 600;
    font-size: 0.85rem;
}
.lesson-builder input[type="text"],
.lesson-builder input[type="number"],
.lesson-builder select,
.lesson-builder textarea {
    background-color: #fff;
    color: #1f2937;
    border: 1px solid #e4e6ed;
    box-shadow: none;
}
.lesson-builder input::placeholder,
.lesson-builder textarea::placeholder {
    color: #6c757d;
    opacity: 1;
}

/* Gestionnaire particule (builder) */
.pm-builder {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
@media (max-width: 1100px) {
    .pm-builder {
        grid-template-columns: 1fr;
    }
}
.pm-panel {
    background: #f8fafc;
    border: 1px solid #e4e6ed;
    border-radius: 14px;
    padding: 14px;
}
.pm-panel--preview {
    background: #fff;
}
.pm-panel-title {
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #2a4b7c;
    margin-bottom: 10px;
}
.pm-section-title {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #2a4b7c;
    margin-bottom: 8px;
}
.pm-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.pm-actions--secondary {
    margin-top: 8px;
}
.pm-list {
    display: grid;
    gap: 10px;
}
.pm-item {
    background: #fff;
    border: 1px solid #e4e6ed;
    border-radius: 12px;
    padding: 10px;
    display: grid;
    gap: 10px;
}
.pm-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.pm-item-title {
    font-weight: 700;
    color: #1f2937;
    font-size: 0.9rem;
}
.pm-mini-actions {
    display: flex;
    gap: 6px;
}
.pm-mini-btn {
    color: #4b5563;
}
.pm-mini-btn--danger {
    color: #b91c1c;
}
.pm-grid {
    display: grid;
    gap: 10px;
}
.pm-grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.pm-field {
    margin: 0;
}
.pm-output {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "JetBrains Mono", monospace;
    font-size: 0.82rem;
    line-height: 1.4;
}
.pm-hint {
    font-size: 0.82rem;
    color: #6b7280;
    margin-top: 8px;
    line-height: 1.4;
}
.pm-preview {
    min-height: 120px;
}

/***********************************************************************
 * SECTION : Gestion Niveaux / Unités (page /espace-membre/pedagogie)
 * - Mise en forme des cartes admin et des lignes
 * - Badges pour code/slug et survol souligné
 **********************************************************************/
.pedago-card {
    border: 1px solid #e4e6ed;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}
.pedago-row {
    border-left: 4px solid transparent;
    transition: background-color 0.2s, border-color 0.2s;
}
.pedago-row:nth-child(odd) {
    background-color: #fafbff;
}
.pedago-row:hover {
    background-color: #f2f5ff;
    border-color: #3b5bdb;
}
.pedago-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 8px;
    background: #eef2ff;
    color: #3b5bdb;
    font-weight: 700;
    font-size: 0.85rem;
}
.pedago-badge-unit {
    background: #e7f5ff;
    color: #1c7ed6;
}
.pedago-desc {
    color: #6c757d;
    font-size: 0.9rem;
    margin: 6px 0 0;
}
.pedago-divider {
    border-top: 1px dashed #d7dce7;
    margin: 0.25rem 0;
}

/* ----------------------------------------------------------------------------
   RESPONSIVE - GESTION DES ARTICLES
   ----------------------------------------------------------------------------
   Ajustements pour tablettes et mobiles
   ---------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .article-builder-card {
        padding: 1.25rem;
    }
}
@media (max-width: 767.98px) {
    .dates-section {
        grid-template-columns: 1fr;
    }
    .article-form-actions .btn {
        width: 100%;
    }
}

/* ============================================================================
   HONEYPOT - Champ caché pour la protection anti-spam
   ============================================================================ */
.hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ============================================================================
   VISIO - Réservation élève + planning admin
   ============================================================================ */
.visio-page {
    padding-bottom: 4rem;
}
.visio-page__hero {
    text-align: center;
    margin-bottom: 2rem;
}
.visio-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.visio-summary-card,
.visio-dashboard-card {
    border: 1px solid rgba(89, 78, 163, 0.12);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(249, 247, 255, 0.92));
    box-shadow: 0 18px 50px rgba(44, 25, 88, 0.08);
}
.visio-summary-card {
    padding: 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.visio-summary-card__label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7a6f9b;
}
.visio-summary-card__value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #2c1958;
}
.visio-summary-card__meta,
.visio-summary-card__meta a {
    color: #665b82;
    font-size: 0.95rem;
    text-decoration: none;
}
.visio-settings-card {
    margin-bottom: 1.5rem;
}
.visio-settings-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}
.visio-settings-card__state {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.38rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
}
.visio-settings-card__state.is-manual {
    background: #ffe7a1;
    color: #886000;
}
.visio-settings-card__state.is-auto {
    background: #daf8e8;
    color: #16755b;
}
.visio-settings-card__form {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.visio-settings-card__switch {
    margin: 0;
}
.visio-settings-card__switch .form-check-input {
    cursor: pointer;
}
.visio-settings-card__switch .form-check-label {
    color: #35235b;
    font-weight: 700;
    cursor: pointer;
}
.visio-settings-card__hint {
    color: #756c8f;
    font-size: 0.92rem;
    line-height: 1.45;
}
.visio-dashboard-card {
    padding: 1.5rem;
}
.visio-dashboard-card--compact {
    padding: 1.25rem;
}
.visio-dashboard-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.visio-dashboard-card__title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #2b174f;
    margin: 0;
}
.visio-dashboard-card__subtitle {
    margin: 0.35rem 0 0;
    color: #6f6688;
}
.visio-week-tabs {
    gap: 0.75rem;
}
.visio-week-tabs .nav-link {
    border: 1px solid rgba(89, 78, 163, 0.18);
    border-radius: 999px;
    color: #4f3c82 !important;
    background: linear-gradient(180deg, rgba(244, 240, 255, 0.96), rgba(255, 255, 255, 0.98));
    font-weight: 700;
    padding: 0.7rem 1.1rem;
    box-shadow: 0 10px 22px rgba(74, 102, 200, 0.08);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.visio-week-tabs .nav-link:hover {
    color: #2f2154 !important;
    border-color: rgba(74, 102, 200, 0.34);
    background: linear-gradient(180deg, rgba(235, 243, 255, 0.98), rgba(245, 241, 255, 0.98));
    box-shadow: 0 14px 30px rgba(74, 102, 200, 0.14);
    transform: translateY(-1px);
}
.visio-week-tabs .nav-link span {
    display: inline-block;
    margin-left: 0.45rem;
    color: inherit;
    opacity: 0.78;
    font-weight: 600;
}
.visio-week-tabs .nav-link.active {
    background: linear-gradient(135deg, #6c4ab6, #4a66c8);
    border-color: transparent;
    color: #fff !important;
    box-shadow: 0 16px 34px rgba(76, 87, 188, 0.24);
}
.visio-week-tabs .nav-link.active:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #5f3fb0, #3f5fc3);
    box-shadow: 0 18px 36px rgba(76, 87, 188, 0.3);
}
.visio-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.9rem;
}
.visio-day-column {
    border: 1px solid rgba(89, 78, 163, 0.12);
    border-radius: 18px;
    background: #fff;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.visio-day-column--admin {
    min-height: 340px;
}
.visio-day-column__head {
    padding: 0.95rem 1rem 0.8rem;
    border-bottom: 1px solid rgba(89, 78, 163, 0.1);
    background: linear-gradient(180deg, rgba(247, 244, 255, 0.95), rgba(255, 255, 255, 0.96));
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}
.visio-day-column__title {
    font-size: 1rem;
    font-weight: 800;
    color: #2b174f;
}
.visio-day-column__date {
    color: #7b7198;
    font-size: 0.92rem;
    font-weight: 700;
}
.visio-day-column__body {
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.visio-empty-state {
    border: 1px dashed rgba(106, 93, 160, 0.25);
    border-radius: 14px;
    padding: 1rem;
    text-align: center;
    color: #8a809f;
    font-size: 0.95rem;
    background: rgba(248, 246, 255, 0.7);
}
.visio-slot {
    width: 100%;
    border: 1px solid rgba(89, 78, 163, 0.12);
    border-radius: 16px;
    padding: 0.8rem 0.9rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    text-align: left;
}
button.visio-slot {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
button.visio-slot:hover {
    transform: translateY(-1px);
}
.visio-slot__time {
    font-weight: 800;
    color: #251548;
}
.visio-slot__status {
    font-size: 0.88rem;
    color: #6f6688;
}
.visio-slot--available {
    border-color: rgba(51, 155, 126, 0.28);
    background: linear-gradient(180deg, rgba(238, 253, 248, 0.96), rgba(255, 255, 255, 0.98));
    box-shadow: 0 10px 24px rgba(37, 147, 116, 0.08);
}
.visio-slot--available .visio-slot__status {
    color: #16755b;
    font-weight: 700;
}
.visio-slot--pending,
.visio-slot--booked,
.visio-slot--blocked,
.visio-slot--cancelled {
    opacity: 0.92;
}
.visio-slot--pending {
    background: #fff6df;
}
.visio-slot--booked {
    background: #f1eeff;
}
.visio-slot--blocked,
.visio-slot--cancelled {
    background: #f7f5fb;
}
.visio-booking-list {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.visio-booking-card {
    border: 1px solid rgba(89, 78, 163, 0.14);
    border-radius: 18px;
    padding: 1rem;
    background: #fff;
}
.visio-booking-card--pending {
    border-color: rgba(215, 162, 0, 0.28);
    background: linear-gradient(180deg, rgba(255, 249, 228, 0.95), #fff);
}
.visio-booking-card--confirmed {
    border-color: rgba(51, 155, 126, 0.22);
    background: linear-gradient(180deg, rgba(239, 253, 246, 0.95), #fff);
}
.visio-booking-card--history {
    background: linear-gradient(180deg, rgba(247, 244, 255, 0.9), #fff);
}
.visio-booking-card--admin {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.9rem;
    box-shadow: 0 10px 28px rgba(44, 25, 88, 0.06);
}
.visio-booking-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
    font-size: 0.9rem;
    color: #6f6688;
}
.visio-booking-card__badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.28rem 0.65rem;
    background: #ece7ff;
    color: #5f49b3;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.visio-booking-card__badge--pending {
    background: #ffe7a1;
    color: #886000;
}
.visio-booking-card__badge--confirmed {
    background: #daf8e8;
    color: #16755b;
}
.visio-booking-card__badge--completed {
    background: #def2ff;
    color: #225ea8;
}
.visio-booking-card__badge--warning {
    background: #ffe1bf;
    color: #a35d14;
}
.visio-booking-card__badge--muted {
    background: #eceaf4;
    color: #756c8f;
}
.visio-booking-card__title {
    font-size: 0.98rem;
    font-weight: 800;
    color: #2b174f;
    line-height: 1.3;
    margin: 0;
}
.visio-booking-card__time {
    margin: 0;
    font-size: 0.96rem;
    font-weight: 800;
    color: #453371;
}
.visio-booking-card__text,
.visio-booking-card__footnote,
.visio-booking-card__note {
    color: #665d80;
    font-size: 0.9rem;
    line-height: 1.45;
    margin: 0;
}
.visio-booking-card__note {
    border-left: 3px solid rgba(108, 74, 182, 0.22);
    padding-left: 0.75rem;
}
.visio-booking-card__section {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(89, 78, 163, 0.1);
}
.visio-booking-card__label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #7a7196;
}
.visio-booking-card__link {
    color: #2456b8;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    word-break: break-word;
}
.visio-booking-card__link:hover {
    text-decoration: underline;
}
.visio-admin-actions {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.8rem;
}
.visio-admin-actions form,
.visio-admin-actions__stack {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.visio-admin-actions .btn,
.visio-admin-actions__stack .btn {
    width: 100%;
}
.visio-slot-admin {
    border: 1px solid rgba(89, 78, 163, 0.12);
    border-radius: 16px;
    padding: 0.85rem 0.9rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    background: #fff;
}
.visio-slot-admin form {
    width: 100%;
}
.visio-slot-admin .btn {
    width: 100%;
}
.visio-slot-admin--available {
    background: #f6fffb;
}
.visio-slot-admin--blocked {
    background: #f8f6fb;
}
.visio-slot-admin > div {
    min-width: 0;
}
.visio-slot-admin__meta {
    color: #6f6688;
    font-size: 0.9rem;
}
.visio-pending-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.visio-pending-chip {
    flex: 1 1 280px;
    border: 1px solid rgba(232, 177, 0, 0.22);
    border-radius: 16px;
    padding: 0.85rem 1rem;
    background: linear-gradient(180deg, rgba(255, 248, 218, 0.96), rgba(255, 255, 255, 0.98));
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.visio-pending-chip strong {
    display: block;
    color: #33204f;
}
.visio-pending-chip span {
    color: #6f6688;
    font-size: 0.92rem;
}
.visio-pending-chip__hint {
    color: #7f739b;
    font-size: 0.85rem;
    font-weight: 700;
}
.visio-duration-options {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.visio-duration-option {
    border: 1px solid rgba(89, 78, 163, 0.14);
    border-radius: 14px;
    padding: 0.85rem 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-weight: 700;
    color: #412c6e;
    background: #fff;
}
.visio-duration-option input {
    accent-color: #6c4ab6;
}
.visio-rule-form .form-label {
    font-weight: 700;
    color: #574d74;
}
.visio-rule-day-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1rem;
}
.visio-rule-day-card {
    border: 1px solid rgba(89, 78, 163, 0.12);
    border-radius: 22px;
    padding: 1.15rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 247, 255, 0.94));
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 14px 38px rgba(44, 25, 88, 0.06);
}
.visio-rule-day-card--empty {
    background: linear-gradient(180deg, rgba(250, 249, 255, 0.96), rgba(255, 255, 255, 0.98));
}
.visio-rule-day-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}
.visio-rule-day-card__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #2b174f;
}
.visio-rule-day-card__subtitle {
    margin: 0.25rem 0 0;
    color: #6f6688;
    line-height: 1.45;
}
.visio-rule-day-card__counters {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}
.visio-rule-day-card__counter {
    border-radius: 999px;
    padding: 0.34rem 0.72rem;
    background: #def2ff;
    color: #225ea8;
    font-size: 0.78rem;
    font-weight: 800;
}
.visio-rule-day-card__counter.is-muted {
    background: #eceaf4;
    color: #756c8f;
}
.visio-rule-day-card__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}
.visio-rule-range-chip {
    min-width: 140px;
    padding: 0.75rem 0.9rem;
    border-radius: 16px;
    border: 1px solid rgba(51, 155, 126, 0.16);
    background: linear-gradient(180deg, rgba(239, 253, 246, 0.95), rgba(255, 255, 255, 0.98));
}
.visio-rule-range-chip strong {
    display: block;
    color: #1f2d55;
    font-size: 1rem;
}
.visio-rule-range-chip span {
    display: block;
    margin-top: 0.2rem;
    color: #5f6a86;
    font-size: 0.88rem;
}
.visio-rule-day-card__empty-state,
.visio-rule-day-card__muted {
    border: 1px dashed rgba(106, 93, 160, 0.24);
    border-radius: 16px;
    padding: 0.8rem 0.9rem;
    color: #7e7597;
    background: rgba(250, 248, 255, 0.72);
    font-size: 0.92rem;
}
.visio-rule-day-card__section {
    border-top: 1px solid rgba(89, 78, 163, 0.1);
    padding-top: 1rem;
}
.visio-rule-day-card__section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.visio-rule-day-card__section-head h4 {
    margin: 0;
    color: #46386d;
    font-size: 0.98rem;
    font-weight: 800;
}
.visio-rule-day-card__section-head span {
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    background: rgba(89, 78, 163, 0.08);
    color: #685b89;
    font-size: 0.8rem;
    font-weight: 800;
}
.visio-rule-day-card__hint {
    margin-top: 0.75rem;
    color: #756c8f;
    font-size: 0.88rem;
    line-height: 1.45;
}
.visio-rule-item-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.visio-rule-item {
    border: 1px solid rgba(89, 78, 163, 0.12);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
}
.visio-rule-item--inactive {
    background: #faf8fd;
}
.visio-rule-item[open] {
    box-shadow: 0 14px 30px rgba(44, 25, 88, 0.08);
    border-color: rgba(89, 78, 163, 0.18);
}
.visio-rule-item__summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.9rem 1rem;
    cursor: pointer;
}
.visio-rule-item__summary::-webkit-details-marker {
    display: none;
}
.visio-rule-item__summary-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.visio-rule-item__summary-content strong {
    color: #241245;
}
.visio-rule-item__summary-content span {
    color: #6f6688;
    font-size: 0.9rem;
}
.visio-rule-item__body {
    padding: 0 1rem 1rem;
    border-top: 1px solid rgba(89, 78, 163, 0.08);
}
.visio-rule-form--day-card {
    padding-top: 0.95rem;
}
.visio-rule-item__actions {
    display: flex;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-top: 0.85rem;
}
.visio-rule-item__toggle {
    margin-top: 0.7rem;
}
.visio-manual-entry-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.65rem;
}
.visio-manual-entry {
    border: 1px solid rgba(51, 155, 126, 0.16);
    border-radius: 16px;
    padding: 0.8rem 0.9rem;
    background: linear-gradient(180deg, rgba(239, 253, 246, 0.95), rgba(255, 255, 255, 0.98));
}
.visio-manual-entry--blocked {
    border-color: rgba(89, 78, 163, 0.12);
    background: linear-gradient(180deg, rgba(248, 246, 251, 0.96), rgba(255, 255, 255, 0.98));
}
.visio-manual-entry--cancelled {
    border-color: rgba(125, 125, 155, 0.14);
    background: linear-gradient(180deg, rgba(246, 246, 250, 0.96), rgba(255, 255, 255, 0.98));
}
.visio-manual-entry__top {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
}
.visio-manual-entry__top strong {
    color: #2b174f;
    font-size: 0.9rem;
}
.visio-manual-entry__top span {
    color: #64708c;
    font-size: 0.82rem;
    font-weight: 700;
}
.visio-manual-entry__time {
    margin-top: 0.35rem;
    color: #1f2d55;
    font-weight: 800;
}
.visio-manual-entry__note {
    margin-top: 0.4rem;
    color: #726983;
    font-size: 0.85rem;
}
.visio-rule-card__badge {
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 800;
}
.visio-rule-card__badge.is-active {
    background: #daf8e8;
    color: #16755b;
}
.visio-rule-card__badge.is-inactive {
    background: #eceaf4;
    color: #756c8f;
}
@media (max-width: 1199.98px) {
    .visio-week-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .visio-summary {
        grid-template-columns: 1fr;
    }
    .visio-settings-card__head {
        flex-direction: column;
        align-items: stretch;
    }
    .visio-week-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .visio-dashboard-card__head,
    .visio-pending-chip,
    .visio-slot-admin,
    .visio-rule-day-card__head,
    .visio-rule-item__summary {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 767.98px) {
    .visio-week-grid {
        grid-template-columns: 1fr;
    }
    .visio-rule-day-grid,
    .visio-manual-entry-list {
        grid-template-columns: 1fr;
    }
    .visio-week-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.25rem;
    }
    .visio-week-tabs .nav-link {
        white-space: nowrap;
    }
}