/* ABC DANSE - description détaillée d'un cours */
.course-detail-page{background:var(--home-paper)}
.course-detail-page.course-purple{--course-color:var(--home-purple);--course-color-dark:var(--home-purple-dark);--course-soft:#fbf2f8}
.course-detail-page.course-orange{--course-color:var(--home-orange);--course-color-dark:#c86510;--course-soft:#fff6ec}
.course-detail-page.course-blue{--course-color:var(--home-blue);--course-color-dark:#107685;--course-soft:#effafb}
.course-detail-page.course-neutral{--course-color:#666;--course-color-dark:#333;--course-soft:#f4f4f4}
.course-detail-hero{padding:62px 0 68px;background:radial-gradient(circle at 90% 20%,rgba(255,255,255,.08),transparent 28%),linear-gradient(135deg,#211126,#52163f);color:#fff}
.course-detail-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.course-back-link{display:inline-flex;align-items:center;gap:7px;margin-bottom:22px;color:rgba(255,255,255,.72)!important;text-decoration:none;font-size:.9rem}
.course-detail-badge{display:inline-block;margin-bottom:12px;color:#ff92be;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.course-detail-copy h1{margin:0 0 24px;color:#fff;font-size:clamp(2.8rem,5.5vw,5rem);line-height:.98;letter-spacing:-.04em;text-transform:none}
.course-detail-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0}
.course-meta-item{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;padding:14px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10)}
.course-meta-item i{color:#ff87b8;font-size:1.2rem}
.course-meta-item span,.course-meta-item strong{display:block}
.course-meta-item span{margin-bottom:2px;color:rgba(255,255,255,.58);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.course-meta-item strong{color:#fff;font-size:.94rem}
.course-detail-information{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:15px 17px;border-radius:14px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.86);line-height:1.5}
.course-detail-information i{margin-top:3px;color:#ff87b8}
.course-detail-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.course-detail-page .course-trial-button{background:var(--course-color)}
.course-detail-page .course-trial-button:hover{background:var(--course-color-dark)}
.course-planning-button{color:#fff!important;border-color:rgba(255,255,255,.45)!important}
.course-detail-visual{overflow:hidden;border-radius:26px;box-shadow:0 24px 60px rgba(0,0,0,.28);background:#fff}
.course-detail-visual img{position:static!important;display:block;width:100%!important;height:auto!important;max-height:620px;object-fit:contain!important}
.course-description-section{background:#fff}
.course-description-heading{margin-bottom:26px}
.course-description-card{padding:40px;border-radius:24px;background:var(--course-soft);border:1px solid rgba(25,20,33,.06);box-shadow:0 12px 34px rgba(31,18,39,.07);color:#403a43;line-height:1.7}
.course-description-card blockquote{margin-left:0!important;padding-left:20px!important;border-left:3px solid var(--course-color)!important}
.course-description-card ul{margin:12px 0 18px 24px;list-style:disc}
.course-description-card li{margin:4px 0}
.course-description-card a{color:var(--course-color)}
.course-description-card span[style*="background-color: rgb(255, 255, 0)"]{background:#fff0a8!important;padding:2px 4px;border-radius:4px}
.course-detail-bottom{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;margin-top:30px;padding:28px;border-radius:22px;background:#fff;border:1px solid rgba(25,20,33,.07);box-shadow:0 10px 28px rgba(31,18,39,.06)}
.course-detail-bottom-copy h3{margin:4px 0 8px;font-size:1.25rem;text-transform:none}
.course-detail-bottom-copy p{margin:0;color:var(--home-muted)}
.course-detail-bottom-actions{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:980px){.course-detail-hero-grid{grid-template-columns:1fr}.course-detail-meta{grid-template-columns:1fr 1fr 1fr}.course-detail-visual{max-width:640px}}
@media(max-width:736px){.course-detail-hero{padding:46px 0 50px}.course-detail-copy h1{font-size:clamp(2.5rem,13vw,4rem)}.course-detail-meta{grid-template-columns:1fr}.course-detail-actions{flex-direction:column}.course-detail-actions .home-btn{width:100%}.course-description-card{padding:24px 20px}.course-description-card blockquote{padding-left:14px!important}.course-detail-bottom{grid-template-columns:1fr}.course-detail-bottom-actions{flex-direction:column}.course-detail-bottom-actions .home-btn{width:100%}.course-detail-actions{
    grid-template-columns:1fr;
}

.course-trial-button,
.course-planning-button,
.course-description-button{
    grid-column:auto;
    width:100%;
}}


/* ==========================================================================
   CORRECTIONS HERO - version 2
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

/* Image à gauche sur PC */
.course-detail-hero-grid {
    grid-template-columns: .90fr 1.10fr !important;
    gap: 52px;
    align-items: center;
}

/* Suppression des bandes blanches autour de l'affiche */
.course-detail-visual {
    background: transparent !important;
    overflow: hidden;
    line-height: 0;
}

.course-detail-visual img {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    margin: 0 !important;
}

/* Séparation nette entre retour planning et discipline */
.course-back-link {
    display: inline-flex !important;
    width: fit-content;
    margin-bottom: 34px !important;
}

/* La discipline est désormais plus visible que le niveau */
.course-detail-discipline {
    display: block;
    margin-bottom: 7px;
    color: #ff92be;
    font-size: clamp(1.9rem, 3vw, 2.8rem);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -.02em;
    text-transform: uppercase;
}

.course-detail-copy h1.course-detail-level {
    margin: 0 0 26px !important;
    color: #fff;
    font-size: clamp(2rem, 3.4vw, 3.2rem) !important;
    line-height: 1 !important;
    font-weight: 400;
    letter-spacing: -.02em;
    text-transform: none;
}

/* Boutons secondaires : texte toujours blanc */
.course-planning-button,
.course-description-button {
    color: #fff !important;
    border-color: rgba(255,255,255,.55) !important;
    background: transparent !important;
}

.course-planning-button:hover,
.course-description-button:hover {
    color: #fff !important;
    border-color: #fff !important;
    background: rgba(255,255,255,.08) !important;
}

.course-description-button {
    border-color: var(--course-color) !important;
}

.course-description-button i {
    margin-right: 6px;
}

#descriptif-cours {
    scroll-margin-top: 20px;
}


/* TABLETTE */
@media screen and (max-width: 980px) {

    .course-detail-hero-grid {
        grid-template-columns: 1fr !important;
    }

    /* L'image est le premier élément du HTML : elle reste donc en premier */
    .course-detail-visual {
        max-width: 640px;
        margin: 0 auto;
    }
}


/* SMARTPHONE */
@media screen and (max-width: 736px) {

    .course-detail-hero-grid {
        gap: 28px;
    }

    .course-detail-visual {
        width: 100%;
        max-width: none;
    }

    .course-detail-discipline {
        font-size: clamp(1.7rem, 8vw, 2.2rem);
    }

    .course-detail-copy h1.course-detail-level {
        font-size: clamp(1.55rem, 7vw, 2rem) !important;
        margin-bottom: 18px !important;
    }

    /* L'affiche comporte déjà jour / heure.
       On allège donc le haut de page sur mobile. */
    .course-detail-meta {
        display: none !important;
    }

    .course-detail-actions {
        margin-top: 22px;
    }

    .course-detail-actions .home-btn {
        width: 100%;
        justify-content: center;
    }
}
/* ============================================================
   BOUTONS DU HERO
   ============================================================ */

.course-detail-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

/* Le bouton d'essai prend toute la largeur */
.course-trial-button{
    grid-column:1 / -1;
    width:100%;
}

/* Les deux boutons du dessous se partagent la largeur */
.course-planning-button,
.course-description-button{
    width:100%;
    color:#fff !important;
    border-color:rgba(255,255,255,.65) !important;
    background:transparent !important;
}

.course-planning-button:hover,
.course-description-button:hover{
    color:#fff !important;
    border-color:#fff !important;
    background:rgba(255,255,255,.08) !important;
}