body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f5f7fb;
    color: #1f2937;
}

header {
    background: white;
    padding: 20px 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

header h1 {
    margin: 0;
    color: #2563eb;
}

nav a {
    text-decoration: none;
    color: #1f2937;
    margin-left: 20px;
    font-weight: 600;
}

nav a:hover {
    color: #2563eb;
}

main {
    width: 85%;
    margin: auto;
}

.hero {
    padding: 100px 0;
    text-align: center;
}

.hero h2 {
    font-size: 48px;
    margin-bottom: 20px;
}

.hero p {
    font-size: 20px;
    color: #6b7280;
}

.buttons {
    margin-top: 30px;
}

.btn {
    display: inline-block;
    padding: 14px 24px;
    margin: 5px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
}

.btn-primary {
    background: #2563eb;
    color: white;
}

.btn-secondary {
    background: white;
    color: #2563eb;
    border: 2px solid #2563eb;
}

.services {
    padding: 60px 0;
}

.services h2 {
    text-align: center;
    font-size: 34px;
}

.cards {
    display: flex;
    gap: 25px;
    margin-top: 40px;
}

.card {
    background: white;
    padding: 30px;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    flex: 1;
}

.card h3 {
    font-size: 22px;
}

.resources {
    background: #eaf0ff;
    margin-top: 60px;
    padding: 60px;
    border-radius: 20px;
    text-align: center;
}

footer {
    margin-top: 80px;
    padding: 30px;
    text-align: center;
    background: #111827;
    color: white;
}
.confirmation {
    background: #dcfce7;
    border: 1px solid #86efac;
    padding: 16px;
    border-radius: 8px;
    margin: 20px 0;
    font-weight: bold;
}




/* =========================
   ESPACE CLIENT
========================= */

.auth-section {
    min-height: 75vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
}

.auth-card {
    width: 100%;
    max-width: 480px;
    background: white;
    padding: 45px;
    border-radius: 18px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
}

.auth-card h1 {
    text-align: center;
    font-size: 36px;
    margin: 0 0 12px;
    color: #1f2937;
}

.auth-intro {
    text-align: center;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 35px;
}

.form-group {
    margin-bottom: 22px;
}

.form-group label {
    display: block;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.form-group input {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 16px;
}

.form-group input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.form-group small {
    display: block;
    margin-top: 7px;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.4;
}

.auth-button {
    width: 100%;
    margin-top: 8px;
    padding: 14px;
    cursor: pointer;
}

.auth-footer {
    text-align: center;
    margin-top: 25px;
    color: #6b7280;
}

.auth-footer a {
    color: #2563eb;
    font-weight: 600;
}

.form-errors,
.field-error {
    color: #dc2626;
}

.form-errors {
    background: #fef2f2;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.field-error {
    font-size: 13px;
    margin-top: 6px;
}


.achat-card {
    padding: 22px 0;
    border-bottom: 1px solid #e5e7eb;
}

.achat-card:last-child {
    border-bottom: none;
}

.achat-card h3 {
    margin: 0 0 8px;
    color: #1f2937;
}

.achat-card p {
    color: #6b7280;
    margin-bottom: 18px;
}

.aucun-achat {
    text-align: center;
    color: #6b7280;
    margin-bottom: 25px;
}

/* =========================
   TARIFS
========================= */

.tarifs-section {
    max-width: 1050px;
    margin: 0 auto;
    padding: 60px 20px;
}

.tarifs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 45px;
}

.tarif-card {
    background: white;
    padding: 35px;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.tarif-card h3 {
    font-size: 26px;
    margin-top: 0;
    margin-bottom: 30px;
}

.tarif-ligne {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid #e5e7eb;
}

.tarif-ligne strong {
    font-size: 20px;
    color: #2563eb;
}

.tarif-description {
    color: #6b7280;
    line-height: 1.7;
    margin: 25px 0;
}

.sap-card {
    display: flex;
    gap: 25px;
    background: #eff6ff;
    border-radius: 18px;
    padding: 35px;
}

.sap-icon {
    font-size: 40px;
}

.sap-card h3 {
    margin-top: 0;
}

.sap-card p {
    line-height: 1.7;
}

.sap-note {
    font-size: 14px;
    color: #6b7280;
}

@media (max-width: 750px) {

    .tarifs-grid {
        grid-template-columns: 1fr;
    }

    .sap-card {
        flex-direction: column;
    }
}
/* =========================
   STATUTS RESERVATIONS
========================= */

.statut {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 20px;
    font-weight: 600;
    margin-top: 10px;
}

.statut-attente {
    background: #fff7ed;
    color: #c2410c;
}

.statut-confirmee {
    background: #ecfdf5;
    color: #047857;
}

.statut-refusee,
.statut-annulee {
    background: #fef2f2;
    color: #b91c1c;
}
/* =========================
   MON ESPACE
========================= */

.espace-section {
    max-width: 1050px;
    margin: 0 auto;
    padding: 70px 20px;
}

.espace-header {
    margin-bottom: 40px;
}

.espace-header h1 {
    font-size: 38px;
    margin: 8px 0;
}

.espace-header p {
    color: #64748b;
}

.espace-label {
    color: #2563eb !important;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.5px;
}

.espace-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.espace-card {
    background: white;
    border-radius: 18px;
    padding: 35px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
}

.espace-card h2 {
    margin: 10px 0;
}

.espace-icon {
    font-size: 35px;
}

.espace-number {
    font-size: 38px;
    font-weight: 700;
    color: #2563eb !important;
    margin: 20px 0 0;
}

.espace-achats {
    margin-top: 25px;
}

.achat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    padding: 15px 0;
    border-top: 1px solid #e5e7eb;
}

.achat-item a {
    color: #2563eb;
    font-weight: 600;
}

.espace-actions {
    margin-top: 35px;
}
/* =========================
   PROCHAIN COURS
========================= */

.prochain-cours-card {
    background: white;
    border-radius: 18px;
    padding: 30px 35px;
    margin-bottom: 30px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.prochain-cours-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 25px;
}

.prochain-cours-top h2 {
    margin: 8px 0 0;
    font-size: 27px;
}

.cours-confirme-badge {
    background: #ecfdf5;
    color: #15803d;
    font-size: 14px;
    font-weight: 700;
    padding: 9px 14px;
    border-radius: 999px;
    white-space: nowrap;
}

.prochain-cours-infos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.prochain-info {
    background: #f8fafc;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.prochain-icon {
    font-size: 24px;
}

.prochain-info div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.prochain-info small {
    color: #64748b;
    font-size: 12px;
}

.prochain-info strong {
    color: #1e293b;
    font-size: 14px;
}

.prochain-cours-footer {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.prochain-cours-link {
    color: #2563eb;
    font-weight: 700;
    text-decoration: none;
}

.prochain-cours-link:hover {
    text-decoration: underline;
}
@media (max-width: 750px) {
    .prochain-cours-card {
        padding: 25px 20px;
    }

    .prochain-cours-top {
        flex-direction: column;
        gap: 15px;
    }

    .prochain-cours-infos {
        grid-template-columns: 1fr;
    }

    .prochain-cours-top h2 {
        font-size: 24px;
    }

    .espace-grid {
        grid-template-columns: 1fr;
    }

    .espace-header h1 {
        font-size: 30px;
    }

    .achat-item {
        flex-direction: column;
        align-items: flex-start;
    }
}

.btn-annuler {
    display: inline-block;
    margin-top: 15px;
    padding: 11px 18px;
    border-radius: 8px;
    background: #fee2e2;
    color: #b91c1c;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid #fecaca;
}

.btn-annuler:hover {
    background: #fecaca;
}
.annulation-fermee {
    margin-top: 15px;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
}
/* =========================
   RESERVATION - CRENEAUX
========================= */

.reservation-intro {
    margin-bottom: 30px;
}

.reservation-intro h2 {
    margin-bottom: 8px;
}

.reservation-intro p {
    color: #64748b;
}

.creneaux-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.creneau-card {
    position: relative;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.creneau-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.09);
}

.creneau-date {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
}

.creneau-calendar {
    font-size: 26px;
}

.creneau-date div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.creneau-date small {
    color: #64748b;
    font-size: 12px;
}

.creneau-date strong {
    color: #1e293b;
}

.creneau-horaire {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 18px;
}

.creneau-disponible {
    display: inline-block;
    background: #ecfdf5;
    color: #15803d;
    font-size: 13px;
    font-weight: 700;
    padding: 7px 11px;
    border-radius: 999px;
    margin-bottom: 20px;
}

.creneau-btn {
    display: block;
    text-align: center;
}

.aucun-creneau {
    background: white;
    border-radius: 18px;
    padding: 50px 30px;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.aucun-creneau-icon {
    font-size: 40px;
}

@media (max-width: 900px) {

    .creneaux-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {

    .creneaux-grid {
        grid-template-columns: 1fr;
    }
}

.jours-creneaux {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.jour-creneaux {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 18px;
    padding: 25px;
}

.jour-creneaux-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.jour-creneaux-header h3 {
    margin: 0;
    font-size: 21px;
    color: #1e293b;
}

.jour-creneaux .creneaux-grid {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
    .jour-creneaux .creneaux-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    .jour-creneaux .creneaux-grid {
        grid-template-columns: 1fr;
    }

    .jour-creneaux {
        padding: 18px;
    }
}

/* =========================
   FORMULAIRE RESERVATION
========================= */

.reservation-form-card {
    max-width: 650px;
}

.reservation-summary {
    display: flex;
    gap: 15px;
    margin: 25px 0 30px;
}

.reservation-summary > div {
    flex: 1;
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 7px;
}

.form-control {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    padding: 12px 14px;
    font-size: 15px;
    background: white;
}

.form-control:focus {
    outline: none;
    border-color: #2563eb;
}

.form-group ul.errorlist {
    margin: 7px 0 0;
    padding: 0;
    list-style: none;
    color: #b91c1c;
    font-size: 13px;
}

.adresse-domicile {
    display: none;
}

@media (max-width: 650px) {

    .reservation-summary {
        flex-direction: column;
    }
}
/* =========================
   LIEN PROFIL
========================= */

.profil-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
}

.profil-link:hover {
    text-decoration: underline;
}

/* =========================
   CONFIRMATION RESERVATION
========================= */

.reservation-success-card {
    max-width: 650px;
    text-align: center;
}

.reservation-success-icon {
    width: 65px;
    height: 65px;
    margin: 0 auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ecfdf5;
    color: #15803d;

    font-size: 30px;
    font-weight: 700;
}

.reservation-success-info {
    margin: 30px 0;

    padding: 22px;

    background: #f8fafc;

    border-radius: 12px;

    text-align: left;
}

.reservation-success-info p {
    margin: 10px 0;
    color: #475569;
}

.reservation-success-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.reservation-secondary-btn {
    background: #f1f5f9;
    color: #334155;
}

.reservation-secondary-btn:hover {
    background: #e2e8f0;
}

@media (max-width: 650px) {

    .reservation-success-actions {
        flex-direction: column;
    }

    .reservation-success-actions .btn {
        width: 100%;
        box-sizing: border-box;
    }
}

/* =========================
   HEADER MATHENOVA
========================= */

.site-header {
    background: white;
    border-bottom: 1px solid #e5eaf2;
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0;
}

.header-container {
    max-width: 1380px;
    min-height: 92px;
    margin: auto;
    padding: 0 32px;

    display: flex;
    align-items: center;
    gap: 35px;
}

.brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.brand-logo {
    width: 220px;
    height: auto;
    display: block;
    object-fit: contain;
}


.main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 27px;
    flex: 1;
}

.main-nav a {
    margin: 0;
    color: #172033;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.main-nav a:hover {
    color: #1466e8;
}

.header-account {
    display: flex;
    align-items: center;
    gap: 14px;
}

.account-link {
    text-decoration: none;
    color: #1466e8;
    font-weight: 700;
    white-space: nowrap;
}

.header-login-btn {
    text-decoration: none;
    background: #1466e8;
    color: white;
    padding: 12px 18px;
    border-radius: 10px;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 1100px) {

    .main-nav {
        gap: 14px;
    }

    .main-nav a {
        font-size: 13px;
    }
}

@media (max-width: 800px) {

    .header-container {
        flex-wrap: wrap;
    }

    .main-nav {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 12px;
    }

    .header-account {
        margin-left: auto;
    }

    .brand-logo {
        width: 165px;
    }
}
/* =====================================================
   NOUVEL ACCUEIL MATHENOVA
===================================================== */

:root {
    --mn-blue: #075ce5;
    --mn-dark: #071b4d;
    --mn-text: #172033;
    --mn-muted: #667085;
    --mn-border: #e3e9f2;
    --mn-light: #f6f9ff;
}


/* HERO */

.mn-hero {
    width: 100%;
    min-height: 425px;

    display: grid;
    grid-template-columns: 52% 48%;

    background:
        linear-gradient(
            110deg,
            #ffffff 0%,
            #f8fbff 52%,
            #eef5ff 100%
        );

    overflow: hidden;
}

.mn-hero-left {
    padding:
        45px
        30px
        30px
        max(6%, calc((100vw - 1400px) / 2));
}

.mn-badge {
    display: inline-block;

    padding: 8px 15px;

    background: #e7f0ff;

    color: #064fc7;

    border-radius: 30px;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: .3px;
}

.mn-hero h1 {
    margin: 15px 0 10px;

    color: var(--mn-dark);

    font-size: clamp(45px, 4.3vw, 67px);

    line-height: .98;

    letter-spacing: -2.5px;
}

.mn-hero h1 span {
    color: var(--mn-blue);
}

.mn-hero-description {
    max-width: 610px;

    margin: 18px 0;

    color: #374151;

    font-size: 16px;

    line-height: 1.6;
}

.mn-hero-buttons {
    display: flex;
    gap: 14px;

    margin-top: 20px;
}

.mn-primary-button,
.mn-outline-button {
    min-height: 48px;

    padding: 0 22px;

    display: inline-flex;
    align-items: center;
    gap: 15px;

    border-radius: 9px;

    text-decoration: none;

    font-weight: 750;
}

.mn-primary-button {
    background: var(--mn-blue);
    color: white;

    box-shadow:
        0 8px 22px rgba(7,92,229,.20);
}

.mn-primary-button span {
    font-size: 22px;
}

.mn-outline-button {
    background: white;

    color: var(--mn-blue);

    border: 1.5px solid var(--mn-blue);
}

.mn-primary-button:hover {
    transform: translateY(-2px);
}

.mn-outline-button:hover {
    background: #f4f8ff;
}


/* HERO IMAGE */

.mn-hero-right {
    position: relative;

    min-height: 425px;

    overflow: hidden;
}

.mn-hero-image {
    position: absolute;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;
}


/* HERO BENEFITS */

.mn-hero-benefits {
    display: flex;

    gap: 34px;

    margin-top: 24px;
}

.mn-benefit {
    display: flex;
    align-items: center;

    gap: 10px;
}

.mn-benefit-icon {
    font-size: 24px;
}

.mn-benefit strong {
    display: block;

    color: var(--mn-dark);

    font-size: 13px;
}

.mn-benefit small {
    color: #475569;

    font-size: 12px;
}


/* =========================
   NIVEAUX
========================= */

.mn-levels {
    max-width: 1400px;

    margin: auto;

    padding: 18px 35px 22px;
}

.mn-section-title {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 20px;

    margin-bottom: 16px;
}

.mn-section-title h2 {
    margin: 0;

    color: var(--mn-dark);

    font-size: 23px;
}

.mn-section-title span {
    color: var(--mn-blue);
}

.mn-level-list {
    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    gap: 18px;
}

.mn-level {
    min-height: 70px;

    background: white;

    border: 1px solid var(--mn-border);

    border-radius: 10px;

    box-shadow:
        0 4px 15px rgba(15,23,42,.05);

    text-decoration: none;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    transition: .2s ease;
}

.mn-level strong {
    color: var(--mn-dark);

    font-size: 25px;
}

.mn-level span {
    color: #475569;

    font-size: 12px;
}

.mn-level:hover {
    border: 2px solid var(--mn-blue);
    transform: translateY(-3px);
    position: relative;
}

.mn-level:hover strong,
.mn-level:hover span {
    color: var(--mn-blue);
}

.mn-level:hover::after {
    content: "";

    position: absolute;

    bottom: -8px;
    left: 50%;

    width: 13px;
    height: 13px;

    background: var(--mn-blue);

    transform:
        translateX(-50%)
        rotate(45deg);
}



/* =========================
   OUTILS + COURS
========================= */

.mn-learning {
    max-width: 1400px;

    margin: auto;

    padding: 5px 35px 25px;

    display: grid;

    grid-template-columns: 48% 52%;

    gap: 25px;
}

.mn-learning-left h2 {
    color: var(--mn-dark);

    font-size: 21px;

    margin: 0 0 17px;
}

.mn-learning-left h2 span {
    color: var(--mn-blue);
}

.mn-tools {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 12px;
}

.mn-tool-card {
    min-height: 160px;

    background: white;

    border: 1px solid var(--mn-border);

    border-radius: 11px;

    padding: 18px 13px;

    box-shadow:
        0 5px 18px rgba(15,23,42,.05);
}

.mn-tool-icon {
    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eaf2ff;

    border-radius: 10px;

    font-size: 21px;
}

.mn-tool-card h3 {
    margin: 14px 0 8px;

    color: var(--mn-dark);

    font-size: 14px;
}

.mn-tool-card p {
    margin: 0;

    color: #475569;

    font-size: 12px;

    line-height: 1.5;
}


/* =========================
   APERCU COURS
========================= */

.mn-course-preview {
    margin-top: 37px;

    min-height: 235px;

    display: grid;

    grid-template-columns: 185px 1fr;

    background: white;

    border: 1px solid #dce5f1;

    border-radius: 10px;

    overflow: hidden;

    box-shadow:
        0 6px 20px rgba(15,23,42,.05);
}

.mn-course-menu {
    border-right: 1px solid #dce5f1;
}

.mn-course-menu-header {
    background: var(--mn-blue);

    color: white;

    padding: 10px 12px;

    display: flex;
    justify-content: space-between;

    font-size: 12px;
}

.mn-course-category {
    padding: 9px 12px;

    border-bottom: 1px solid #edf1f6;

    color: var(--mn-dark);

    font-size: 11px;
}

.mn-course-category strong {
    display: block;

    margin-bottom: 8px;
}

.mn-course-category div {
    padding: 5px;

    color: #475569;
}

.mn-current-course {
    background: #eaf2ff;

    color: var(--mn-blue) !important;

    border-radius: 5px;
}

.mn-course-content {
    min-width: 0;
}

.mn-course-heading {
    padding: 15px 18px 8px;

    display: flex;
    justify-content: space-between;
}

.mn-course-heading h3 {
    margin: 0;

    color: var(--mn-dark);

    font-size: 19px;
}

.mn-course-heading span {
    color: #1590a8;

    font-size: 11px;
}

.mn-progress {
    width: 42px;
    height: 42px;

    border: 4px solid var(--mn-blue);

    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

    color: var(--mn-dark);

    font-size: 10px;
    font-weight: bold;
}

.mn-course-tabs {
    display: flex;

    gap: 25px;

    padding: 8px 18px;

    border-bottom: 1px solid #e5eaf2;

    font-size: 10px;

    color: #475569;
}

.mn-course-tabs .active {
    color: var(--mn-blue);

    border-bottom: 2px solid var(--mn-blue);

    padding-bottom: 8px;
}

.mn-course-body {
    padding: 12px 18px;

    display: grid;

    grid-template-columns: 1fr 180px;

    gap: 20px;
}

.mn-course-body h4 {
    margin: 0 0 7px;

    color: var(--mn-dark);
}

.mn-course-body p {
    color: #475569;

    font-size: 10px;

    line-height: 1.5;
}

.mn-small-button {
    display: inline-block;

    background: var(--mn-blue);

    color: white;

    padding: 8px 12px;

    border-radius: 5px;

    text-decoration: none;

    font-size: 10px;
}

.mn-thales {
    display: flex;

    align-items: center;

    gap: 15px;

    color: var(--mn-dark);

    font-size: 11px;
}

.triangle {
    font-size: 70px;

    font-weight: 200;
}


/* =========================
   BANDEAU FINAL
========================= */

.mn-trust {
    max-width: 1340px;

    margin: 0 auto 25px;

    padding: 17px 25px;

    background:
        linear-gradient(
            90deg,
            #f2f6ff,
            #f7faff
        );

    border-radius: 10px;

    display: grid;

    grid-template-columns:
        1fr 1fr 1fr 1.5fr;

    gap: 20px;
}

.mn-trust > div {
    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--mn-blue);
}

.mn-trust span {
    color: var(--mn-dark);

    font-size: 12px;
}

.mn-trust-message {
    font-weight: 700;

    line-height: 1.5;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1100px) {

    .mn-hero {
        grid-template-columns: 1fr;
    }

    .mn-hero-right {
        min-height: 450px;
    }

    .mn-level-list {
        grid-template-columns:
            repeat(4, 1fr);
    }

    .mn-learning {
        grid-template-columns: 1fr;
    }

    .mn-course-preview {
        margin-top: 10px;
    }

}


@media (max-width: 700px) {

    .mn-hero-left {
        padding: 35px 22px;
    }

    .mn-hero h1 {
        font-size: 43px;
    }

    .mn-hero-buttons,
    .mn-hero-benefits {
        flex-direction: column;
    }

    .mn-hero-right {
        min-height: 330px;
    }

    .mn-level-list {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .mn-tools {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .mn-course-preview {
        grid-template-columns: 1fr;
    }

    .mn-course-menu {
        display: none;
    }

    .mn-course-tabs {
        overflow-x: auto;
    }

    .mn-course-body {
        grid-template-columns: 1fr;
    }

    .mn-trust {
        margin: 15px;

        grid-template-columns:
            1fr 1fr;
    }

}

/* =========================
   PAGE COURS
========================= */

.cours-page {
    max-width: 1250px;
    margin: 0 auto;
    padding: 60px 30px 80px;
}

.cours-header {
    margin-bottom: 30px;
}

.cours-header h1 {
    margin: 8px 0 10px;
    font-size: 42px;
    color: #071b4d;
}

.cours-header p {
    color: #64748b;
}

.cours-matieres {
    display: flex;
    gap: 12px;
    margin-bottom: 30px;
}

.cours-matiere {
    padding: 12px 18px;
    border-radius: 10px;
    border: 1px solid #dbe3ef;
    background: white;
    color: #172033;
    text-decoration: none;
    font-weight: 700;
}

.cours-matiere:hover,
.cours-matiere.active {
    background: #075ce5;
    color: white;
    border-color: #075ce5;
}

.themes-grid {
    display: grid;
    gap: 25px;
}

.theme-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.05);
}

.theme-card-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
}

.theme-card-header h2 {
    margin: 0;
    color: #071b4d;
}

.theme-card-header span {
    color: #64748b;
    font-size: 13px;
}

.chapitres-list {
    display: grid;
    gap: 12px;
}

.chapitre-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    padding: 18px;

    background: #f8fafc;
    border: 1px solid #e5eaf2;
    border-radius: 12px;

    text-decoration: none;
    color: #172033;

    transition: 0.2s ease;
}

.chapitre-item:hover {
    border-color: #075ce5;
    transform: translateY(-2px);
    background: #f4f8ff;
}

.chapitre-item strong {
    color: #071b4d;
    font-size: 16px;
}

.chapitre-item p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 13px;
}

.chapitre-item > span {
    color: #075ce5;
    font-size: 22px;
}

@media (max-width: 700px) {

    .cours-page {
        padding: 40px 20px;
    }

    .cours-header h1 {
        font-size: 32px;
    }

    .cours-matieres {
        flex-direction: column;
    }

    .theme-card-header {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* =====================================================
   PAGE CHAPITRE MATHENOVA
===================================================== */

.chapitre-page {
    max-width: 1380px;
    margin: 0 auto;
    padding: 45px 40px 80px;
}

.chapitre-breadcrumb {
    display: flex;
    gap: 8px;
    align-items: center;

    margin-bottom: 28px;

    color: #64748b;
    font-size: 13px;
}

.chapitre-breadcrumb a {
    color: #075ce5;
    text-decoration: none;
}


/* HEADER */

.chapitre-header {
    display: grid;
    grid-template-columns: minmax(0, 650px) auto;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    margin-bottom: 30px;
}
.chapitre-header > div:first-child {
    min-width: 0;
}

.chapitre-header h1 {
    max-width: 650px;
}

.chapitre-header h1 {
    margin: 8px 0 10px;

    color: #071b4d;

    font-size: 44px;
    line-height: 1.1;
}

.chapitre-header > div:first-child > p:last-child {
    max-width: 700px;

    color: #64748b;

    line-height: 1.6;
}


.chapitre-progress {
    --progress: 0;

    width: 105px;
    height: 105px;

    flex-shrink: 0;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        conic-gradient(
            #075ce5 calc(var(--progress) * 1%),
            #e2e8f0 0
        );
}

.chapitre-progress-inner {
    width: 89px;
    height: 89px;

    border-radius: 50%;

    background: #f5f7fb;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.chapitre-progress strong {
    color: #071b4d;

    font-size: 24px;
}

.chapitre-progress span {
    color: #64748b;

    font-size: 10px;
}


/* TABS */

.chapitre-tabs {
    display: flex;

    border-bottom: 1px solid #dfe6ef;

    margin-bottom: 30px;

    overflow-x: auto;
}

.chapitre-tab {
    padding: 14px 20px;

    background: transparent;

    border: none;
    border-bottom: 3px solid transparent;

    color: #64748b;

    font-weight: 700;

    cursor: pointer;

    white-space: nowrap;
}

.chapitre-tab.active {
    color: #075ce5;

    border-bottom-color: #075ce5;
}


/* LAYOUT */

.chapitre-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 35px;
}


/* SOMMAIRE */

.chapitre-sommaire {
    position: sticky;
    top: 120px;

    align-self: start;

    background: white;

    border: 1px solid #e2e8f0;

    border-radius: 15px;

    padding: 20px;

    box-shadow:
        0 6px 20px rgba(15,23,42,.05);
}

.chapitre-sommaire-title {
    color: #64748b;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1px;
}

.chapitre-sommaire a {
    display: block;

    padding: 10px 8px;

    color: #334155;

    text-decoration: none;

    font-size: 13px;

    border-radius: 7px;
}

.chapitre-sommaire a:hover {
    background: #eef5ff;

    color: #075ce5;
}


/* CONTENU */

.chapitre-content {
    background: white;

    border: 1px solid #e2e8f0;

    border-radius: 18px;

    padding: 40px 45px;

    box-shadow:
        0 8px 30px rgba(15,23,42,.05);
}

.chapitre-content section {
    margin-bottom: 55px;

    scroll-margin-top: 130px;
}

.chapitre-content h2 {
    margin: 8px 0 20px;

    color: #071b4d;

    font-size: 27px;
}

.chapitre-content p {
    color: #475569;

    line-height: 1.8;
}


.chapitre-number {
    display: inline-block;

    color: #075ce5;

    font-size: 12px;
    font-weight: 800;
}


/* INFO */

.chapitre-info {
    display: flex;

    gap: 15px;

    margin-top: 25px;

    padding: 20px;

    background: #eff6ff;

    border-left: 4px solid #075ce5;

    border-radius: 10px;
}

.chapitre-info p {
    margin: 5px 0 0;
}


/* THALES */

.thalès-schema {
    padding: 30px;

    background: #f8fafc;

    border-radius: 14px;

    display: flex;

    justify-content: center;
    align-items: center;

    gap: 60px;
}

.thalès-triangle {
    font-size: 110px;

    color: #071b4d;
}

.thalès-formule {
    color: #071b4d;

    font-size: 20px;
}


/* METHODE */

.methode-steps {
    display: grid;

    gap: 12px;
}

.methode-steps > div {
    padding: 17px;

    background: #f8fafc;

    border-radius: 10px;

    display: flex;
    align-items: center;

    gap: 15px;
}

.methode-steps strong {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #075ce5;

    color: white;

    border-radius: 50%;

    flex-shrink: 0;
}


/* EXEMPLE */

.chapitre-example {
    padding: 25px;

    background: #fafcff;

    border: 1px solid #e2e8f0;

    border-radius: 14px;
}

.formula-box {
    margin-top: 20px;

    padding: 25px;

    background: #071b4d;

    color: white;

    border-radius: 10px;

    text-align: center;

    font-size: 18px;

    line-height: 1.7;
}


/* A RETENIR */

.chapitre-retention {
    padding: 25px;

    background: #ecfdf5;

    border-radius: 12px;

    color: #166534;

    line-height: 2;
}


/* NEXT */

.chapitre-next {
    margin-top: 40px;

    padding-top: 25px;

    border-top: 1px solid #e2e8f0;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;
}

.chapitre-next small {
    display: block;

    color: #64748b;

    margin-bottom: 5px;
}

.chapitre-next strong {
    color: #071b4d;
}


/* MOBILE */

@media (max-width: 800px) {

    .chapitre-header {
        align-items: flex-start;
    }

    .chapitre-header h1 {
        font-size: 34px;
    }

    .chapitre-layout {
        grid-template-columns: 1fr;
    }

    .chapitre-sommaire {
        position: static;
    }

    .chapitre-content {
        padding: 28px 20px;
    }

    .thalès-schema {
        flex-direction: column;

        gap: 20px;
    }

    .chapitre-next {
        flex-direction: column;

        align-items: flex-start;
    }
}


/* =========================
   SCHEMA DE THALES
========================= */

.thalès-dynamic {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 30px;
    align-items: center;
    width: 100%;
}

.thalès-svg {
    width: 100%;
    max-width: 520px;
    background: #f8fbff;
    border-radius: 14px;
    padding: 10px;
}

.geo-line {
    stroke: #0f172a;
    stroke-width: 3;
}

.geo-parallel {
    stroke: #075ce5;
    stroke-width: 4;
}

.geo-point {
    fill: #075ce5;
}

.geo-label {
    fill: #071b4d;
    font-size: 18px;
    font-weight: 700;
}

.thalès-dynamic-text {
    color: #334155;
}

.thalès-dynamic-text strong {
    display: block;
    color: #071b4d;
    font-size: 18px;
    margin-bottom: 10px;
}

.thalès-dynamic-text p {
    line-height: 1.7;
}

.thalès-formule-live {
    margin-top: 20px;
    padding: 16px;
    background: white;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    text-align: center;
}

@media (max-width: 800px) {

    .thalès-dynamic {
        grid-template-columns: 1fr;
    }

    .thalès-svg {
        max-width: 100%;
    }
}

/* =========================
   SCHEMA DE THALES
========================= */

.thales-dynamic {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 30px;
    align-items: center;
    width: 100%;
}

.thales-svg {
    width: 100%;
    max-width: 520px;
    display: block;
    background: #f8fbff;
    border-radius: 14px;
    padding: 12px;
}

.geo-line {
    stroke: #0f172a;
    stroke-width: 3;
}

.geo-parallel {
    stroke: #075ce5;
    stroke-width: 4;
}

.geo-point {
    fill: #075ce5;
}

.geo-label {
    fill: #071b4d;
    font-size: 19px;
    font-weight: 700;
}

.thales-dynamic-text {
    color: #334155;
}

.thales-dynamic-text > strong {
    display: block;
    color: #071b4d;
    font-size: 18px;
    margin-bottom: 12px;
}

.thales-dynamic-text p {
    line-height: 1.7;
}

@media (max-width: 800px) {

    .thales-dynamic {
        grid-template-columns: 1fr;
    }
}

/* =========================
   METHODE DU COURS
========================= */

.methode-steps {
    display: grid;
    gap: 12px;
}

.methode-step {
    display: flex;
    align-items: center;
    gap: 16px;

    padding: 17px 20px;

    background: #f8fafc;
    border: 1px solid #eef2f7;
    border-radius: 11px;
}

.methode-step strong {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: #075ce5;
    color: white;

    font-size: 15px;
}

.methode-step span {
    color: #334155;
    line-height: 1.5;
}


/* =========================
   A RETENIR
========================= */

.chapitre-retention {
    display: grid;
    gap: 12px;

    padding: 24px;

    background: #ecfdf5;
    border-radius: 13px;
}

.retenir-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    color: #166534;
    line-height: 1.6;
}

.retenir-check {
    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    background: #dcfce7;
    border-radius: 50%;

    color: #15803d;
    font-weight: 800;
}

/* =========================
   EXERCICES
========================= */

.exercices-page {
    max-width: 1050px;
    margin: 0 auto;
    padding: 45px 0 80px;
}

.exercices-header {
    margin: 35px 0 40px;
}

.exercices-header h1 {
    margin: 8px 0 10px;
    font-size: 40px;
    color: #071b4d;
}

.exercices-header > p:last-child {
    color: #64748b;
}

.exercices-list {
    display: grid;
    gap: 25px;
}

.exercice-card {
    background: white;
    border: 1px solid #dbe3ef;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.04);
}

.exercice-card-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
}

.exercice-number {
    color: #075ce5;
    font-size: 12px;
    font-weight: 800;
}

.exercice-card h2 {
    color: #071b4d;
    margin: 8px 0 0;
}

.difficulty {
    padding: 7px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
}

.difficulty-facile {
    background: #dcfce7;
    color: #166534;
}

.difficulty-moyen {
    background: #fef3c7;
    color: #92400e;
}

.difficulty-difficile {
    background: #fee2e2;
    color: #991b1b;
}

.exercice-enonce {
    margin: 25px 0;
    padding: 20px;
    background: #f8fafc;
    border-radius: 10px;
    color: #334155;
    line-height: 1.7;
}

.exercice-answer label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: #071b4d;
}

.exercice-answer-row {
    display: flex;
    gap: 10px;
}

.exercice-input {
    flex: 1;
    padding: 13px 15px;
    border: 2px solid #dbe3ef;
    border-radius: 9px;
    font-size: 16px;
    outline: none;
}

.exercice-input:focus {
    border-color: #075ce5;
}

.answer-success {
    border-color: #16a34a;
}

.answer-error {
    border-color: #dc2626;
}

.exercice-feedback {
    margin-top: 12px;
    font-weight: 700;
}

.feedback-success {
    color: #15803d;
}

.feedback-error {
    color: #dc2626;
}

.feedback-warning {
    color: #b45309;
}

.exercice-correction {
    margin-top: 20px;
}

.voir-correction {
    border: 0;
    background: transparent;
    color: #075ce5;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

.correction-content {
    display: none;
    margin-top: 15px;
    padding: 20px;
    background: #eff6ff;
    border-left: 4px solid #075ce5;
    border-radius: 8px;
    line-height: 1.7;
}

.correction-content.visible {
    display: block;
}

@media (max-width: 700px) {

    .exercice-answer-row {
        flex-direction: column;
    }

    .exercice-card-header {
        flex-direction: column;
    }

    .exercices-header h1 {
        font-size: 32px;
    }
}

/* =========================
   PROGRESSION EXERCICES
========================= */

.exercise-progress-card {
    margin-bottom: 30px;
    padding: 22px 25px;

    background: white;

    border: 1px solid #dbe3ef;
    border-radius: 14px;

    box-shadow:
        0 6px 20px rgba(15, 23, 42, 0.04);
}

.exercise-progress-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 20px;

    margin-bottom: 14px;
}

.exercise-progress-top > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.exercise-progress-top span {
    color: #64748b;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1px;
}

.exercise-progress-top strong {
    color: #071b4d;
}

#progress-percent {
    color: #075ce5;

    font-size: 22px;
}

.exercise-progress-bar {
    width: 100%;
    height: 9px;

    overflow: hidden;

    background: #e8edf5;

    border-radius: 50px;
}

.exercise-progress-value {
    height: 100%;

    background: #075ce5;

    border-radius: 50px;

    transition: width 0.45s ease;
}


/* EXERCICE RÉUSSI */

.exercice-card.exercice-reussi {
    border-color: #86efac;
}

.already-success {
    display: inline-block;

    margin-top: 9px;

    padding: 5px 9px;

    background: #dcfce7;
    color: #166534;

    border-radius: 20px;

    font-size: 11px;
    font-weight: 800;
}
.chapitre-progress-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.chapitre-progress-wrapper small {
    color: #64748b;
    font-size: 11px;
    white-space: nowrap;
}
/* =====================================================
   CORRECTION FINALE PAGE CHAPITRE - DESKTOP
===================================================== */

@media (min-width: 801px) {

    .chapitre-page {
        max-width: 1280px;
        margin: 0 auto;
        padding: 38px 32px 70px;
    }

    .chapitre-header {
        display: grid;
        grid-template-columns: minmax(0, 760px) auto;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
        margin-bottom: 22px;
    }

    .chapitre-header h1 {
        max-width: none;
        margin: 8px 0 10px;
        font-size: 42px;
        line-height: 1.08;
    }

    .chapitre-progress-wrapper {
        justify-self: end;
    }

    .chapitre-tabs {
        width: 100%;
        margin-bottom: 28px;
    }

    .chapitre-layout {
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 28px;
        align-items: start;
        width: 100%;
    }

    .chapitre-sommaire {
        width: auto;
        position: sticky;
        top: 110px;
    }

    .chapitre-content {
        width: auto;
        min-width: 0;
        padding: 34px 38px;
    }
}

@media (min-width: 801px) {

    .brand-logo {
        width: 190px;
        height: auto;
    }

    .header-container {
        min-height: 76px;
        padding-top: 4px;
        padding-bottom: 4px;
    }
}
/* =========================
   CORRIGES
========================= */

.corriges-page {
    max-width: 1050px;
    margin: 0 auto;
    padding: 45px 30px 80px;
}

.corriges-header {
    margin: 35px 0 40px;
}

.corriges-header h1 {
    margin: 8px 0 10px;
    font-size: 40px;
    color: #071b4d;
}

.corriges-header > p:last-child {
    color: #64748b;
}

.corriges-list {
    display: grid;
    gap: 25px;
}

.corrige-card {
    background: white;
    border: 1px solid #dbe3ef;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.04);
}

.corrige-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.corrige-number {
    color: #075ce5;
    font-size: 12px;
    font-weight: 800;
}

.corrige-card h2 {
    margin: 8px 0 0;
    color: #071b4d;
}

.corrige-enonce {
    margin: 25px 0;
    padding: 20px;
    background: #f8fafc;
    border-radius: 10px;
    color: #334155;
    line-height: 1.7;
}

.corrige-enonce strong {
    display: block;
    margin-bottom: 8px;
    color: #071b4d;
}

.corrige-solution {
    padding: 22px;
    background: #eff6ff;
    border-left: 4px solid #075ce5;
    border-radius: 10px;
}

.corrige-solution-title {
    margin-bottom: 15px;
    color: #071b4d;
    font-weight: 800;
}

.corrige-contenu {
    color: #334155;
    line-height: 1.8;
}

.corrige-indisponible {
    padding: 20px;
    background: #f8fafc;
    border-radius: 10px;
    color: #64748b;
}

.corriges-actions {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 35px;
}

@media (max-width: 700px) {

    .corriges-page {
        padding: 40px 20px;
    }

    .corrige-card-header {
        flex-direction: column;
    }

    .corriges-actions {
        flex-direction: column;
    }
}


/* =========================
   QUIZ
========================= */

.quiz-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 45px 30px 80px;
}

.quiz-header {
    margin: 35px 0 30px;
}

.quiz-header h1 {
    margin: 8px 0 10px;
    color: #071b4d;
    font-size: 40px;
}

.quiz-header > p:last-child {
    color: #64748b;
}

.quiz-progress-box {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 25px;
    padding: 18px 22px;

    background: white;
    border: 1px solid #dbe3ef;
    border-radius: 14px;
}

.quiz-progress-box > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quiz-progress-box span {
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.quiz-progress-box strong {
    color: #071b4d;
    font-size: 18px;
}

.quiz-card {
    padding: 32px;

    background: white;

    border: 1px solid #dbe3ef;
    border-radius: 17px;

    box-shadow:
        0 8px 25px rgba(15, 23, 42, .04);
}

.quiz-question-number {
    color: #075ce5;
    font-size: 12px;
    font-weight: 800;
}

.quiz-card h2 {
    margin: 10px 0 25px;

    color: #071b4d;
    line-height: 1.35;
}

.quiz-options {
    display: grid;
    gap: 12px;
}

.quiz-option {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 15px;

    padding: 15px 18px;

    background: #f8fafc;

    border: 2px solid #e2e8f0;
    border-radius: 11px;

    color: #334155;

    font-size: 15px;
    text-align: left;

    cursor: pointer;

    transition: .15s ease;
}

.quiz-option:hover:not(:disabled) {
    border-color: #075ce5;
    background: #f3f7ff;
}

.quiz-option > span {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: #e8f0ff;

    color: #075ce5;

    font-weight: 800;
}

.quiz-option.quiz-correct {
    border-color: #22c55e;
    background: #f0fdf4;
}

.quiz-option.quiz-wrong {
    border-color: #ef4444;
    background: #fef2f2;
}

.quiz-feedback {
    margin-top: 18px;
    font-weight: 800;
}

.quiz-feedback-success {
    color: #15803d;
}

.quiz-feedback-error {
    color: #dc2626;
}

.quiz-explication {
    display: none;

    margin-top: 18px;
    padding: 18px;

    background: #eff6ff;

    border-left: 4px solid #075ce5;
    border-radius: 9px;

    color: #334155;
    line-height: 1.7;
}

.quiz-explication.visible {
    display: block;
}

.quiz-next {
    margin-top: 22px;
    border: 0;
    cursor: pointer;
}

.quiz-next:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.quiz-hidden {
    display: none;
}

.quiz-result {
    padding: 45px;

    background: white;

    border: 1px solid #dbe3ef;
    border-radius: 18px;

    text-align: center;

    box-shadow:
        0 8px 25px rgba(15, 23, 42, .04);
}

.quiz-result-icon {
    display: block;
    font-size: 45px;
}

.quiz-result h2 {
    color: #071b4d;
    font-size: 30px;
}

#quiz-final-score {
    display: block;

    margin: 15px 0 30px;

    color: #075ce5;

    font-size: 42px;
}

.quiz-result-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

@media (max-width: 700px) {

    .quiz-page {
        padding: 40px 20px;
    }

    .quiz-header h1 {
        font-size: 32px;
    }

    .quiz-result-actions {
        flex-direction: column;
    }
}

/* =========================
   HISTORIQUE QUIZ
========================= */

.quiz-history {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;

    margin-bottom: 25px;
}

.quiz-history > div {
    background: white;

    border: 1px solid #dbe3ef;
    border-radius: 12px;

    padding: 18px;

    text-align: center;

    box-shadow:
        0 5px 18px rgba(15, 23, 42, 0.04);
}

.quiz-history span {
    display: block;

    color: #64748b;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 7px;
}

.quiz-history strong {
    color: #075ce5;

    font-size: 23px;
}

@media (max-width: 650px) {

    .quiz-history {
        grid-template-columns: 1fr;
    }
}


/* =====================================================
   TABLEAU DE BORD PEDAGOGIQUE
===================================================== */

.dashboard-learning {
    margin: 35px 0 45px;
}

.dashboard-learning-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 25px;

    margin-bottom: 24px;
}

.dashboard-learning-header h2 {
    margin: 6px 0 8px;

    color: #071b4d;

    font-size: 28px;
}

.dashboard-learning-header p {
    margin: 0;

    color: #64748b;
}

.dashboard-mastered {
    padding: 10px 14px;

    background: #ecfdf5;

    color: #166534;

    border-radius: 50px;

    font-size: 13px;
    font-weight: 800;
}


/* STATS */

.dashboard-stats {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;

    margin-bottom: 30px;
}

.dashboard-stat {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 20px;

    background: white;

    border: 1px solid #e2e8f0;
    border-radius: 14px;

    box-shadow:
        0 6px 20px rgba(15, 23, 42, .04);
}

.dashboard-stat-icon {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    background: #eef5ff;

    border-radius: 12px;

    font-size: 21px;
}

.dashboard-stat strong {
    display: block;

    color: #071b4d;

    font-size: 24px;
}

.dashboard-stat span {
    color: #64748b;

    font-size: 12px;
}


/* CHAPITRES */

.dashboard-chapitres {
    margin-top: 15px;
}

.dashboard-chapitres-title {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 20px;

    margin-bottom: 16px;
}

.dashboard-chapitres-title h3 {
    margin: 0;

    color: #071b4d;

    font-size: 21px;
}

.dashboard-chapitres-title a {
    color: #075ce5;

    text-decoration: none;

    font-weight: 700;

    font-size: 13px;
}

.dashboard-chapitres-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.dashboard-chapitre-card {
    background: white;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    padding: 22px;

    box-shadow:
        0 7px 22px rgba(15, 23, 42, .045);
}

.dashboard-chapitre-top {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;
}

.dashboard-chapitre-level {
    color: #075ce5;

    font-size: 11px;
    font-weight: 800;

    text-transform: uppercase;
}

.dashboard-chapitre-card h3 {
    margin: 6px 0 5px;

    color: #071b4d;

    font-size: 18px;
}

.dashboard-chapitre-card p {
    margin: 0;

    color: #64748b;

    font-size: 12px;
}


/* CERCLE */

.dashboard-circle {
    --progress: 0;

    width: 62px;
    height: 62px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        conic-gradient(
            #075ce5 calc(var(--progress) * 1%),
            #e2e8f0 0
        );
}

.dashboard-circle > div {
    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: white;

    border-radius: 50%;
}

.dashboard-circle strong {
    color: #071b4d;

    font-size: 12px;
}


/* BARRE */

.dashboard-progress-bar {
    height: 7px;

    margin: 18px 0;

    overflow: hidden;

    background: #e8edf5;

    border-radius: 50px;
}

.dashboard-progress-bar > div {
    height: 100%;

    background: #075ce5;

    border-radius: 50px;
}


/* RESULTATS */

.dashboard-chapitre-results {
    display: flex;

    gap: 18px;

    color: #475569;

    font-size: 12px;
}

.dashboard-chapitre-footer {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 15px;

    margin-top: 20px;

    padding-top: 15px;

    border-top: 1px solid #edf1f6;
}

.dashboard-chapitre-footer a {
    color: #075ce5;

    text-decoration: none;

    font-weight: 800;

    font-size: 13px;
}

.dashboard-success {
    color: #15803d;

    font-size: 12px;
    font-weight: 800;
}

.dashboard-in-progress {
    color: #b45309;

    font-size: 12px;
    font-weight: 800;
}


/* PAS ENCORE DE COURS */

.dashboard-empty {
    padding: 45px 25px;

    background: white;

    border: 1px solid #e2e8f0;
    border-radius: 16px;

    text-align: center;
}

.dashboard-empty > div {
    font-size: 38px;
}

.dashboard-empty h3 {
    color: #071b4d;
}

.dashboard-empty p {
    color: #64748b;
}


/* RESPONSIVE */

@media (max-width: 950px) {

    .dashboard-stats {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .dashboard-chapitres-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {

    .dashboard-learning-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-stats {
        grid-template-columns: 1fr;
    }

    .dashboard-chapitre-results {
        flex-direction: column;
        gap: 7px;
    }

    .dashboard-chapitre-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =====================================================
   HARMONISATION MON ESPACE
===================================================== */

.espace-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 30px;
}

.espace-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;

    box-shadow:
        0 7px 22px rgba(15, 23, 42, 0.045);
}

.espace-card h2 {
    margin: 8px 0 4px;

    color: #071b4d;
    font-size: 20px;
}

.espace-icon {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eef5ff;
    border-radius: 12px;

    font-size: 22px;
}

.espace-number {
    margin: 18px 0 2px;

    color: #075ce5 !important;

    font-size: 30px;
    font-weight: 800;
}

.espace-card > p:not(.espace-number) {
    margin-top: 4px;

    color: #64748b;
    font-size: 13px;
}

.espace-card .btn {
    margin-top: 15px;
}

.espace-actions {
    margin-top: 20px;
}

.espace-actions .btn {
    margin: 0;

    padding: 13px 18px;
}


/* Achats */

.espace-achats {
    margin-top: 18px;
}

.achat-item {
    padding: 12px 0;

    border-top: 1px solid #edf1f6;
}

.achat-item strong {
    color: #334155;
}

.achat-item a {
    color: #075ce5;

    text-decoration: none;
    font-weight: 700;
}


/* Responsive */

@media (max-width: 750px) {

    .espace-grid {
        grid-template-columns: 1fr;
    }

    .espace-card {
        padding: 20px;
    }
}

/* =====================================================
   PROGRESSION PAR NIVEAU
===================================================== */

.dashboard-levels {
    margin-top: 35px;
}

.dashboard-levels-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.dashboard-level-card {
    padding: 22px;

    background: white;

    border: 1px solid #e2e8f0;
    border-radius: 16px;

    box-shadow:
        0 7px 22px rgba(15, 23, 42, 0.045);
}

.dashboard-level-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;
}

.dashboard-level-card h3 {
    margin: 6px 0 4px;

    color: #071b4d;

    font-size: 19px;
}

.dashboard-level-card p {
    margin: 0;

    color: #64748b;

    font-size: 12px;
}

.dashboard-level-percent {
    color: #075ce5;

    font-size: 24px;
    font-weight: 800;
}

@media (max-width: 750px) {

    .dashboard-levels-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   PROGRESSION PAR THEME
===================================================== */

.dashboard-themes {
    margin-top: 35px;
}

.dashboard-themes-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.dashboard-theme-card {
    padding: 22px;

    background: white;

    border: 1px solid #e2e8f0;
    border-radius: 16px;

    box-shadow:
        0 7px 22px rgba(15, 23, 42, 0.045);
}

.dashboard-theme-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;
}

.dashboard-theme-card h3 {
    margin: 6px 0 4px;

    color: #071b4d;

    font-size: 19px;
}

.dashboard-theme-card p {
    margin: 0;

    color: #64748b;

    font-size: 12px;
}

.dashboard-theme-percent {
    color: #075ce5;

    font-size: 24px;
    font-weight: 800;
}

@media (max-width: 750px) {

    .dashboard-themes-grid {
        grid-template-columns: 1fr;
    }
}
/* =====================================================
   STATUT PROGRESSION THEMES
===================================================== */

.dashboard-theme-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
}

.theme-badge {
    display: inline-flex;
    align-items: center;

    padding: 5px 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}

.theme-mastered {
    background: #ecfdf5;
    color: #15803d;
}

.theme-progress {
    background: #eff6ff;
    color: #075ce5;
}

.theme-not-started {
    background: #f1f5f9;
    color: #64748b;
}
/* =========================================
   PAGE SUCCES PAIEMENT
========================================= */

.payment-success-page {
    min-height: 70vh;
    padding: 80px 20px;
    background: #f5f8ff;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.payment-success-card {
    width: 100%;
    max-width: 760px;
    background: #ffffff;
    border-radius: 24px;
    padding: 50px;
    text-align: center;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}

.payment-success-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dcfce7;
    color: #15803d;
    font-size: 38px;
    font-weight: 800;
}

.payment-success-label {
    color: #2563eb;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.payment-success-card h1 {
    font-size: 36px;
    color: #1e293b;
    margin-bottom: 14px;
}

.payment-success-intro {
    color: #64748b;
    font-size: 17px;
    line-height: 1.6;
    max-width: 580px;
    margin: 0 auto 30px;
}

.payment-success-product {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 28px;
}

.payment-success-product span {
    display: block;
    color: #64748b;
    font-size: 14px;
    margin-bottom: 8px;
}

.payment-success-product h2 {
    color: #1e3a8a;
    font-size: 21px;
    margin-bottom: 8px;
}

.payment-success-product p {
    color: #475569;
    margin: 0;
}

.payment-download-btn {
    display: inline-block;
    font-size: 17px;
    padding: 15px 28px;
    margin-bottom: 25px;
}

.payment-success-info {
    display: flex;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    color: #475569;
    font-size: 14px;
}

.payment-success-help {
    color: #64748b;
    font-size: 14px;
    margin-bottom: 24px;
}

.payment-success-links {
    border-top: 1px solid #e2e8f0;
    padding-top: 22px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.payment-success-links a {
    color: #2563eb;
    font-weight: 700;
    text-decoration: none;
}

.payment-pending-icon {
    font-size: 50px;
    margin-bottom: 20px;
}

@media (max-width: 700px) {

    .payment-success-page {
        padding: 40px 15px;
    }

    .payment-success-card {
        padding: 32px 20px;
    }

    .payment-success-card h1 {
        font-size: 28px;
    }

    .payment-success-links {
        flex-direction: column;
    }
}

/* =========================================
   MES ACHATS - MON ESPACE
========================================= */

.espace-achats {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 20px;
}

.achat-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.achat-item-content {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.achat-item-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.achat-item-infos {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.achat-item-infos strong {
    color: #1e293b;
    font-size: 15px;
}

.achat-item-infos span {
    color: #475569;
    font-size: 13px;
}

.achat-item-infos small {
    color: #94a3b8;
    font-size: 12px;
}

.achat-download-btn {
    background: #2563eb;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 10px;
    white-space: nowrap;
}

.achat-download-btn:hover {
    background: #1d4ed8;
}

@media (max-width: 700px) {

    .achat-item {
        flex-direction: column;
        align-items: stretch;
    }

    .achat-download-btn {
        text-align: center;
        width: 100%;
    }
}

/* =========================================
   CORRECTION CARTE MES RESSOURCES
========================================= */

.espace-card .achat-item {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
}

.espace-card .achat-item-content {
    width: 100%;
    align-items: flex-start;
}

.espace-card .achat-item-infos {
    flex: 1;
}

.espace-card .achat-item-infos strong {
    line-height: 1.25;
}

.espace-card .achat-download-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    color: #ffffff;
    padding: 11px 14px;
}


/* =========================================
   BOUTIQUE RESSOURCES
========================================= */

.resources-shop {
    max-width: 1180px;
    margin: 0 auto;
    padding: 15px 20px 90px;
}

.resources-shop-header {
    text-align: center;
    margin-bottom: 42px;
}

.resources-shop-header h2 {
    margin: 8px 0 10px;
    font-size: 34px;
    color: #1e293b;
}

.resources-shop-header > p:last-child {
    max-width: 650px;
    margin: 0 auto;
    color: #64748b;
    line-height: 1.6;
}


.resource-shop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.resource-shop-grid > .resource-product-card:only-child {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 680px;
    justify-self: center;
}

.resource-product-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    min-height: 390px;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.06);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.resource-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
}


.resource-product-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.resource-product-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}


.resource-product-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.resource-badge {
    background: #2563eb;
    color: #ffffff;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.resource-badge-light {
    background: #eff6ff;
    color: #1d4ed8;
}


.resource-product-content {
    flex: 1;
}

.resource-product-type {
    color: #2563eb;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
}

.resource-product-content h3 {
    font-size: 22px;
    line-height: 1.25;
    color: #1e293b;
    margin-bottom: 14px;
}

.resource-product-description {
    color: #64748b;
    line-height: 1.6;
    font-size: 15px;
}


.resource-product-footer {
    border-top: 1px solid #e2e8f0;
    margin-top: 24px;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
}

.resource-product-price {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.resource-product-price span {
    color: #94a3b8;
    font-size: 12px;
}

.resource-product-price strong {
    font-size: 25px;
    color: #0f172a;
}

.resource-product-button {
    white-space: nowrap;
}


.resources-empty {
    grid-column: 1 / -1;
    text-align: center;
    background: #ffffff;
    border-radius: 20px;
    padding: 50px;
}


@media (max-width: 800px) {

    .resource-shop-grid {
        grid-template-columns: 1fr;
    }

    .resource-product-card {
        min-height: auto;
    }

}


@media (max-width: 520px) {

    .resources-shop {
        padding: 45px 15px 70px;
    }

    .resources-shop-header h2 {
        font-size: 28px;
    }

    .resource-product-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .resource-product-button {
        text-align: center;
        width: 100%;
    }

}
.resource-product-card {
    position: relative;
}

.resource-featured-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.resource-product-card:has(.resource-featured-badge) {
    border-color: #bfdbfe;
    box-shadow: 0 18px 45px rgba(37, 99, 235, 0.10);
}

.resource-product-card:has(.resource-featured-badge) .resource-product-top {
    padding-top: 28px;
}
/* =========================================================
   MATHENOVA - ACCUEIL V2
   Lancement rentrée 2026
========================================================= */

:root {
    --mn-blue: #075ce5;
    --mn-blue-dark: #0649b8;
    --mn-dark: #071b4d;
    --mn-text: #172033;
    --mn-muted: #667085;
    --mn-border: #e3e9f2;
    --mn-light: #f6f9ff;
    --mn-green: #16a34a;
}

/* =========================================================
   TITRES DE SECTIONS
========================================================= */

.mn-section-heading {
    max-width: 720px;
    margin: 0 auto 38px;
    text-align: center;
}

.mn-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--mn-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.mn-section-heading h2 {
    margin: 0 0 12px;
    color: var(--mn-dark);
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.1;
    letter-spacing: -1.2px;
}

.mn-section-heading p {
    max-width: 620px;
    margin: auto;
    color: var(--mn-muted);
    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   HERO
========================================================= */

.mn-hero {
    width: 100%;
    min-height: 570px;
    display: grid;
    grid-template-columns: 54% 46%;
    background:
        linear-gradient(
            110deg,
            #ffffff 0%,
            #f8fbff 52%,
            #eef5ff 100%
        );
    overflow: hidden;
}

.mn-hero-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:
        65px
        45px
        65px
        max(6%, calc((100vw - 1400px) / 2));
}

.mn-badge {
    align-self: flex-start;
    padding: 8px 15px;
    background: #e7f0ff;
    color: #064fc7;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .5px;
}

.mn-hero h1 {
    margin: 20px 0 18px;
    color: var(--mn-dark);
    font-size: clamp(46px, 4.2vw, 66px);
    line-height: 1.02;
    letter-spacing: -2.5px;
}

.mn-hero h1 span {
    color: var(--mn-blue);
}

.mn-hero-description {
    max-width: 620px;
    margin: 0;
    color: #475569;
    font-size: 17px;
    line-height: 1.7;
}

.mn-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.mn-primary-button,
.mn-outline-button {
    min-height: 52px;
    padding: 0 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    transition: .2s ease;
}

.mn-primary-button {
    background: var(--mn-blue);
    color: #fff;
    box-shadow: 0 10px 25px rgba(7, 92, 229, .20);
}

.mn-primary-button:hover {
    background: var(--mn-blue-dark);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(7, 92, 229, .25);
}

.mn-primary-button span {
    font-size: 20px;
}

.mn-outline-button {
    background: #fff;
    color: var(--mn-blue);
    border: 1.5px solid var(--mn-blue);
}

.mn-outline-button:hover {
    background: #f1f6ff;
    transform: translateY(-2px);
}


/* HERO IMAGE */

.mn-hero-right {
    position: relative;
    min-height: 570px;
    overflow: hidden;
}

.mn-hero-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/* HERO BENEFITS */

.mn-hero-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 32px;
}

.mn-benefit {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mn-benefit-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    background: #e8f7ed;
    color: var(--mn-green);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 900;
}

.mn-benefit strong {
    display: block;
    color: var(--mn-dark);
    font-size: 13px;
}

.mn-benefit small {
    display: block;
    margin-top: 2px;
    color: var(--mn-muted);
    font-size: 11px;
}


/* =========================================================
   NIVEAUX
========================================================= */

.mn-levels {
    max-width: 1400px;
    margin: auto;
    padding: 75px 35px;
}

.mn-level-list {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 16px;
}

.mn-level {
    position: relative;
    min-height: 125px;
    padding: 20px 10px;
    background: #fff;
    border: 1px solid var(--mn-border);
    border-radius: 14px;
    box-shadow: 0 7px 22px rgba(15, 23, 42, .05);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: .2s ease;
}

.mn-level strong {
    color: var(--mn-dark);
    font-size: 28px;
}

.mn-level > span:not(.mn-level-badge) {
    margin-top: 3px;
    color: #475569;
    font-size: 13px;
}

.mn-level small {
    margin-top: 12px;
    color: var(--mn-blue);
    font-size: 10px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(5px);
    transition: .2s ease;
}

.mn-level:hover {
    border-color: var(--mn-blue);
    transform: translateY(-5px);
    box-shadow: 0 13px 30px rgba(7, 92, 229, .12);
}

.mn-level:hover strong,
.mn-level:hover > span:not(.mn-level-badge) {
    color: var(--mn-blue);
}

.mn-level:hover small {
    opacity: 1;
    transform: translateY(0);
}

.mn-level-featured {
    border: 2px solid #8bb7ff;
    background: #f8fbff;
}

.mn-level-badge {
    position: absolute;
    top: -11px;
    padding: 5px 11px;
    background: var(--mn-blue);
    color: #fff;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
}


/* =========================================================
   MÉTHODE
========================================================= */

.mn-method {
    padding: 80px max(35px, calc((100vw - 1330px) / 2));
    background: var(--mn-light);
}

.mn-method-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.mn-method-card {
    position: relative;
    min-height: 275px;
    padding: 28px 24px;
    background: #fff;
    border: 1px solid var(--mn-border);
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(15, 23, 42, .05);
    text-decoration: none;
    transition: .25s ease;
}

.mn-method-card:hover {
    transform: translateY(-6px);
    border-color: #a8c7fb;
    box-shadow: 0 16px 35px rgba(7, 92, 229, .10);
}

.mn-method-number {
    position: absolute;
    top: 22px;
    right: 22px;
    color: #dce8fb;
    font-size: 30px;
    font-weight: 900;
}

.mn-method-card .mn-tool-icon {
    width: 50px;
    height: 50px;
    background: #eaf2ff;
    border-radius: 12px;
    font-size: 23px;
}

.mn-method-card h3 {
    margin: 20px 0 10px;
    color: var(--mn-dark);
    font-size: 19px;
}

.mn-method-card p {
    margin: 0 0 22px;
    color: var(--mn-muted);
    font-size: 14px;
    line-height: 1.65;
}

.mn-method-card > span {
    color: var(--mn-blue);
    font-size: 12px;
    font-weight: 800;
}


/* =========================================================
   APERÇU PLATEFORME
========================================================= */

.mn-platform {
    max-width: 1400px;
    margin: auto;
    padding: 90px 35px;
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 65px;
    align-items: center;
}

.mn-platform-intro h2 {
    margin: 5px 0 18px;
    color: var(--mn-dark);
    font-size: clamp(32px, 3vw, 45px);
    line-height: 1.1;
    letter-spacing: -1.4px;
}

.mn-platform-intro h2 span {
    color: var(--mn-blue);
}

.mn-platform-intro > p {
    color: var(--mn-muted);
    font-size: 15px;
    line-height: 1.75;
}

.mn-check-list {
    padding: 0;
    margin: 25px 0 30px;
    list-style: none;
}

.mn-check-list li {
    position: relative;
    padding: 8px 0 8px 30px;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
}

.mn-check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f7ed;
    color: var(--mn-green);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 900;
}


/* COURSE PREVIEW */

.mn-platform .mn-course-preview {
    width: 100%;
    margin: 0;
    min-height: 390px;
    grid-template-columns: 205px 1fr;
    border-radius: 15px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .10);
}

.mn-platform .mn-course-menu-header {
    padding: 17px 14px;
    font-size: 12px;
}

.mn-platform .mn-course-category {
    padding: 14px;
    font-size: 11px;
}

.mn-platform .mn-course-category div {
    padding: 7px;
}

.mn-platform .mn-course-heading {
    padding: 25px 25px 15px;
}

.mn-course-label {
    display: block;
    margin-bottom: 5px;
    color: var(--mn-blue) !important;
    font-size: 10px !important;
    font-weight: 800;
    letter-spacing: .8px;
}

.mn-platform .mn-course-heading h3 {
    font-size: 23px;
}

.mn-platform .mn-progress {
    width: 50px;
    height: 50px;
    font-size: 11px;
}

.mn-platform .mn-course-tabs {
    padding: 10px 25px;
    gap: 25px;
    font-size: 11px;
    overflow-x: auto;
}

.mn-platform .mn-course-body {
    padding: 25px;
    grid-template-columns: 1fr 210px;
    align-items: center;
}

.mn-platform .mn-course-body h4 {
    font-size: 17px;
}

.mn-platform .mn-course-body p {
    max-width: 420px;
    font-size: 13px;
    line-height: 1.65;
}

.mn-platform .mn-small-button {
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 7px;
    font-size: 11px;
}

.mn-platform .mn-thales {
    padding: 18px;
    background: #f7faff;
    border-radius: 12px;
    font-size: 11px;
}


/* =========================================================
   PACK RENTRÉE
========================================================= */

.mn-pack-section {
    padding: 30px 35px 90px;
}

.mn-pack-card {
    max-width: 1330px;
    margin: auto;
    min-height: 470px;
    display: grid;
    grid-template-columns: 58% 42%;
    background:
        linear-gradient(
            125deg,
            #071b4d 0%,
            #073582 60%,
            #075ce5 100%
        );
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 55px rgba(7, 27, 77, .20);
}

.mn-pack-content {
    padding: 60px;
}

.mn-pack-topline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

.mn-pack-badge {
    padding: 7px 12px;
    background: #fff;
    color: var(--mn-blue);
    border-radius: 20px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .7px;
}

.mn-pack-level {
    color: #bfdbfe;
    font-size: 12px;
    font-weight: 700;
}

.mn-pack-content h2 {
    margin: 22px 0 18px;
    color: #fff;
    font-size: clamp(34px, 3.5vw, 48px);
    line-height: 1.08;
    letter-spacing: -1.5px;
}

.mn-pack-content h2 span {
    color: #93c5fd;
}

.mn-pack-description {
    max-width: 650px;
    color: #dbeafe;
    font-size: 15px;
    line-height: 1.7;
}

.mn-pack-points {
    margin: 25px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.mn-pack-actions {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 30px;
}

.mn-pack-button {
    min-height: 52px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    color: var(--mn-blue);
    border-radius: 10px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 900;
    transition: .2s ease;
}

.mn-pack-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
}

.mn-pack-price small {
    display: block;
    color: #bfdbfe;
    font-size: 10px;
}

.mn-pack-price strong {
    color: #fff;
    font-size: 27px;
}


/* VISUEL PACK */

.mn-pack-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 45px;
    background: rgba(255, 255, 255, .05);
}

.mn-pack-paper {
    width: 290px;
    min-height: 355px;
    padding: 35px 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, .25);
    transform: rotate(3deg);
}

.mn-pack-paper > span {
    display: block;
    color: var(--mn-blue);
    font-size: 19px;
    font-weight: 900;
}

.mn-pack-paper small {
    display: block;
    margin-top: 25px;
    color: var(--mn-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.mn-pack-paper > strong {
    display: block;
    margin-top: 10px;
    color: var(--mn-dark);
    font-size: 23px;
    line-height: 1.15;
}

.mn-pack-class {
    width: 70px;
    height: 70px;
    margin: 25px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mn-blue);
    color: #fff;
    border-radius: 50%;
    font-size: 28px;
    font-weight: 900;
}

.mn-pack-paper p {
    color: var(--mn-muted);
    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   COURS PARTICULIERS
========================================================= */

.mn-coaching {
    max-width: 1400px;
    margin: auto;
    padding: 0 35px 90px;
}

.mn-coaching-card {
    padding: 40px 45px;
    display: grid;
    grid-template-columns: 75px 1fr auto;
    gap: 30px;
    align-items: center;
    background: #f7faff;
    border: 1px solid #dce8fb;
    border-radius: 18px;
}

.mn-coaching-icon {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e7f0ff;
    border-radius: 15px;
    font-size: 30px;
}

.mn-coaching-content h2 {
    max-width: 650px;
    margin: 3px 0 10px;
    color: var(--mn-dark);
    font-size: 28px;
    line-height: 1.2;
}

.mn-coaching-content p {
    max-width: 750px;
    margin: 0;
    color: var(--mn-muted);
    font-size: 14px;
    line-height: 1.65;
}

.mn-coaching-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
}

.mn-coaching-action small {
    color: var(--mn-muted);
    font-size: 10px;
}


/* =========================================================
   POURQUOI MATHENOVA
========================================================= */

.mn-why {
    padding: 80px max(35px, calc((100vw - 1330px) / 2));
    background: #fff;
}

.mn-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.mn-why-card {
    padding: 30px 25px;
    border-top: 3px solid #dce8fb;
}

.mn-why-card > span {
    color: var(--mn-blue);
    font-size: 12px;
    font-weight: 900;
}

.mn-why-card h3 {
    margin: 10px 0;
    color: var(--mn-dark);
    font-size: 21px;
}

.mn-why-card p {
    margin: 0;
    color: var(--mn-muted);
    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   CTA FINAL
========================================================= */

.mn-final-cta {
    max-width: 1330px;
    margin: 0 auto 60px;
    padding: 55px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    background:
        linear-gradient(
            110deg,
            #075ce5,
            #0649b8
        );
    border-radius: 22px;
}

.mn-final-cta > div > span {
    color: #bfdbfe;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.mn-final-cta h2 {
    margin: 8px 0 10px;
    color: #fff;
    font-size: 34px;
    line-height: 1.15;
}

.mn-final-cta p {
    margin: 0;
    color: #dbeafe;
    font-size: 14px;
}

.mn-final-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.mn-final-primary,
.mn-final-secondary {
    min-height: 50px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
}

.mn-final-primary {
    background: #fff;
    color: var(--mn-blue);
}

.mn-final-secondary {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .6);
}


/* =========================================================
   RESPONSIVE TABLETTE
========================================================= */

@media (max-width: 1100px) {

    .mn-hero {
        grid-template-columns: 1fr 1fr;
    }

    .mn-hero-left {
        padding: 55px 35px;
    }

    .mn-hero h1 {
        font-size: 45px;
    }

    .mn-level-list {
        grid-template-columns: repeat(4, 1fr);
    }

    .mn-method-grid,
    .mn-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mn-platform {
        grid-template-columns: 1fr;
    }

    .mn-platform-intro {
        max-width: 700px;
    }

    .mn-pack-card {
        grid-template-columns: 1fr 380px;
    }

    .mn-pack-content {
        padding: 45px;
    }

    .mn-coaching-card {
        grid-template-columns: 65px 1fr;
    }

    .mn-coaching-action {
        grid-column: 2;
        align-items: flex-start;
    }

    .mn-final-cta {
        margin-left: 30px;
        margin-right: 30px;
    }
}


/* =========================================================
   RESPONSIVE MOBILE
========================================================= */

@media (max-width: 700px) {

    .mn-section-heading {
        margin-bottom: 28px;
    }

    .mn-section-heading h2 {
        font-size: 30px;
    }

    .mn-section-heading p {
        font-size: 14px;
    }


    /* HERO */

    .mn-hero {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }

    .mn-hero-left {
        order: 1;
        padding: 42px 22px 38px;
    }

    .mn-hero-right {
        order: 2;
        min-height: 300px;
    }

    .mn-hero h1 {
        margin-top: 18px;
        font-size: 39px;
        line-height: 1.04;
        letter-spacing: -1.6px;
    }

    .mn-hero-description {
        font-size: 15px;
    }

    .mn-hero-buttons {
        flex-direction: column;
    }

    .mn-primary-button,
    .mn-outline-button {
        width: 100%;
    }

    .mn-hero-benefits {
        flex-direction: column;
        gap: 15px;
    }


    /* NIVEAUX */

    .mn-levels {
        padding: 55px 20px;
    }

    .mn-level-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .mn-level {
        min-height: 110px;
    }

    .mn-level small {
        opacity: 1;
        transform: none;
    }


    /* METHODE */

    .mn-method {
        padding: 55px 20px;
    }

    .mn-method-grid {
        grid-template-columns: 1fr;
    }

    .mn-method-card {
        min-height: auto;
    }


    /* PLATEFORME */

    .mn-platform {
        padding: 60px 20px;
        gap: 40px;
    }

    .mn-platform .mn-course-preview {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .mn-platform .mn-course-menu {
        display: none;
    }

    .mn-platform .mn-course-body {
        grid-template-columns: 1fr;
    }

    .mn-platform .mn-thales {
        margin-top: 10px;
    }

    .mn-platform .mn-course-tabs {
        gap: 18px;
    }


    /* PACK */

    .mn-pack-section {
        padding: 10px 20px 60px;
    }

    .mn-pack-card {
        grid-template-columns: 1fr;
    }

    .mn-pack-content {
        padding: 38px 25px;
    }

    .mn-pack-content h2 {
        font-size: 34px;
    }

    .mn-pack-points {
        grid-template-columns: 1fr;
    }

    .mn-pack-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .mn-pack-visual {
        padding: 40px 20px;
    }

    .mn-pack-paper {
        width: min(290px, 90%);
    }


    /* COACHING */

    .mn-coaching {
        padding: 0 20px 60px;
    }

    .mn-coaching-card {
        padding: 30px 25px;
        grid-template-columns: 1fr;
    }

    .mn-coaching-action {
        grid-column: auto;
        width: 100%;
        align-items: flex-start;
    }


    /* POURQUOI */

    .mn-why {
        padding: 55px 20px;
    }

    .mn-why-grid {
        grid-template-columns: 1fr;
    }


    /* CTA */

    .mn-final-cta {
        margin: 0 20px 40px;
        padding: 40px 25px;
        flex-direction: column;
        align-items: flex-start;
    }

    .mn-final-cta h2 {
        font-size: 30px;
    }

    .mn-final-actions {
        width: 100%;
        flex-direction: column;
    }

    .mn-final-primary,
    .mn-final-secondary {
        width: 100%;
    }
}
/* =========================================================
   HERO - CADRAGE COMPLET IMAGE
========================================================= */

@media (min-width: 1101px) {

    .mn-hero {
        grid-template-columns: 48% 52%;
        min-height: 565px;
        align-items: stretch;
    }

    .mn-hero-left {
        padding-top: 55px;
        padding-bottom: 55px;
    }

    .mn-hero-right {
        min-height: 565px;
        background: #eef5ff;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .mn-hero-image {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center center;
        display: block;
    }
}
/* =========================================================
   HERO - CADRAGE FINAL DESKTOP
========================================================= */

@media (min-width: 1101px) {

    .mn-hero {
        grid-template-columns: 48% 52%;
        min-height: 0;
        align-items: stretch;
        background: #f8fbff;
    }

    .mn-hero-left {
        min-height: 520px;
        padding:
            48px
            38px
            48px
            max(6%, calc((100vw - 1400px) / 2));

        justify-content: center;
    }

    .mn-hero h1 {
        font-size: clamp(44px, 3.7vw, 58px);
        line-height: 1.02;
        letter-spacing: -2px;
    }

    .mn-hero-right {
        min-height: 520px;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #eef5ff;
        overflow: hidden;
    }

    .mn-hero-image {
        position: static;
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: initial;
        display: block;
    }
}
/* =========================================================
   HERO - AJUSTEMENT VISUEL FINAL
========================================================= */

@media (min-width: 1101px) {

    .mn-hero {
        grid-template-columns: 47% 53%;
        min-height: 520px;
        overflow: hidden;
    }

    .mn-hero-left {
        min-height: 520px;
        padding-top: 42px;
        padding-bottom: 42px;
    }

    .mn-hero h1 {
        font-size: clamp(42px, 3.45vw, 55px);
        line-height: 1.02;
    }

    .mn-hero-right {
        position: relative;
        min-height: 520px;
        overflow: hidden;
        background: #eef5ff;
    }

    .mn-hero-image {
        position: absolute;

        width: 126%;
        height: auto;

        max-width: none;

        left: 50%;
        top: 50%;

        transform: translate(-50%, -50%);

        object-fit: initial;
    }
}