/* Fiche formation My GENYSIS — design/Fiche-formation.html */
.page-course-detail {
    --mg-teal: #0081e5;
    --mg-teal-dark: #006bbf;
    --mg-teal-soft: #005a9e;
    --mg-ink: #0f1f2b;
    --mg-muted: #6b7683;
    --mg-body: #4a5566;
    --mg-nav: #3d4757;
    --mg-border: #eef1f4;
    --mg-border-card: #e6eaef;
    --mg-border-btn: #cdd8d5;
    --mg-bg-soft: #f5f9fc;
    --mg-bg-mint: #f0f6fc;
    --mg-placeholder: #eef3f8;
    --mg-placeholder-alt: #e6eef5;
    --mg-font: 'Space Grotesk', system-ui, sans-serif;
}

.cd {
    font-family: var(--mg-font);
    color: var(--mg-ink);
    background: #fff;
}

.cd a { text-decoration: none; }

/* Hero */
.cd-hero {
    background: var(--mg-bg-soft);
    border-bottom: 1px solid var(--mg-border);
    padding: 40px 24px 48px;
}

.cd-hero__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.cd-breadcrumb {
    font-size: 13px;
    color: var(--mg-muted);
    margin-bottom: 18px;
}

.cd-breadcrumb a {
    color: var(--mg-teal);
}

.cd-breadcrumb a:hover {
    color: var(--mg-teal-dark);
}

.cd-hero__badge {
    display: inline-block;
    background: rgba(0, 129, 229, 0.12);
    color: var(--mg-teal-dark);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 100px;
    margin-bottom: 16px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.cd-hero__title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    letter-spacing: -0.02em;
    margin: 0 0 14px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--mg-ink);
    max-width: 720px;
}

.cd-hero__lead {
    font-size: 18px;
    color: var(--mg-body);
    margin: 0 0 18px;
    line-height: 1.6;
    max-width: 680px;
}

.cd-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
    font-size: 14px;
    color: var(--mg-nav);
}

.cd-hero__stars {
    color: #f59e0b;
    letter-spacing: 0.04em;
}

.cd-hero__meta strong {
    color: var(--mg-ink);
}

.cd-hero__dot {
    width: 4px;
    height: 4px;
    background: #c3ccd6;
    border-radius: 50%;
}

/* Body */
.cd-body {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px 72px;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: start;
}

/* Media */
.cd-media {
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    background: repeating-linear-gradient(
        135deg,
        var(--mg-placeholder),
        var(--mg-placeholder) 12px,
        var(--mg-placeholder-alt) 12px,
        var(--mg-placeholder-alt) 24px
    );
    border: 1px solid #dbe6e3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 36px;
    position: relative;
    overflow: hidden;
}

.cd-media img,
.cd-media iframe,
.cd-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}

.cd-media__play {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--mg-teal);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    z-index: 1;
    border: 0;
    cursor: pointer;
    box-shadow: 0 10px 24px -8px rgba(0, 129, 229, 0.55);
}

.cd-media__play:hover {
    background: var(--mg-teal-dark);
}

.cd-media__label {
    position: absolute;
    bottom: 14px;
    left: 14px;
    font-family: ui-monospace, monospace;
    font-size: 11px;
    color: #8a9c98;
    background: #fff;
    padding: 4px 8px;
    border-radius: 5px;
    z-index: 1;
}

/* Tabs */
.cd-tabs {
    display: flex;
    gap: 28px;
    border-bottom: 1px solid var(--mg-border);
    margin-bottom: 28px;
    font-weight: 600;
    font-size: 15px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
}

.cd-tabs::-webkit-scrollbar {
    display: none;
}

.cd-tab {
    flex-shrink: 0;
    padding-bottom: 14px;
    color: var(--mg-muted);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
}

.cd-tab--active {
    color: var(--mg-teal);
    border-bottom-color: var(--mg-teal);
}

.cd-panel[hidden] {
    display: none !important;
}

.cd-section-title {
    font-size: 24px;
    margin: 0 0 8px;
    font-weight: 700;
    color: var(--mg-ink);
}

.cd-section-lead {
    color: var(--mg-body);
    margin: 0 0 24px;
    line-height: 1.65;
}

.cd-modules {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 36px;
}

.cd-module {
    border: 1px solid var(--mg-border-card);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
}

.cd-module__num {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--mg-bg-mint);
    color: var(--mg-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.cd-module__title {
    font-weight: 600;
    color: var(--mg-ink);
    margin-bottom: 2px;
}

.cd-module__meta {
    font-size: 13px;
    color: var(--mg-muted);
}

.cd-objectives {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    color: var(--mg-nav);
    font-size: 15px;
    line-height: 1.5;
}

.cd-objective {
    display: flex;
    gap: 10px;
}

.cd-objective__check {
    color: var(--mg-teal);
    font-weight: 700;
    flex-shrink: 0;
}

.cd-text {
    color: var(--mg-body);
    line-height: 1.65;
    font-size: 15px;
}

.cd-text p { margin: 0 0 12px; }
.cd-text ul { margin: 0 0 12px; padding-left: 1.2em; }

.cd-financing-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cd-financing-item {
    border: 1px solid var(--mg-border-card);
    border-radius: 12px;
    padding: 16px 18px;
}

.cd-financing-item strong {
    display: block;
    margin-bottom: 4px;
    color: var(--mg-ink);
}

.cd-financing-item span {
    font-size: 14px;
    color: var(--mg-muted);
}

/* Sidebar */
.cd-sidebar {
    position: sticky;
    top: 88px;
}

.cd-card {
    border: 1px solid var(--mg-border-card);
    border-radius: 18px;
    padding: 26px;
    box-shadow: 0 20px 44px -26px rgba(0, 129, 229, 0.4);
    background: #fff;
}

.cd-card__badges {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.cd-card__badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 100px;
}

.cd-card__badge--format {
    background: var(--mg-teal);
    color: #fff;
}

.cd-card__badge--dpc {
    background: #dcfaf3;
    color: var(--mg-teal-soft);
}

.cd-card__badge--finance {
    background: #eef2ff;
    color: #4338ca;
}

.cd-card__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}

.cd-card__amount {
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
    color: var(--mg-ink);
}

.cd-card__ttc {
    color: var(--mg-muted);
    font-size: 14px;
}

.cd-card__finance {
    font-size: 13px;
    color: var(--mg-teal-soft);
    background: #dcfaf3;
    padding: 6px 10px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: inline-block;
    font-weight: 600;
}

.cd-card__rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 14px;
    color: var(--mg-nav);
    margin-bottom: 22px;
}

.cd-card__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.cd-card__row span:first-child {
    color: var(--mg-muted);
}

.cd-card__row span:last-child {
    font-weight: 600;
    text-align: right;
}

.cd-btn {
    display: block;
    text-align: center;
    font-weight: 600;
    border-radius: 11px;
    padding: 15px;
    font-family: inherit;
    border: 0;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.cd-btn--primary {
    font-size: 16px;
    color: #fff;
    background: var(--mg-teal);
    margin-bottom: 10px;
}

.cd-btn--primary:hover {
    background: var(--mg-teal-dark);
    color: #fff;
}

.cd-btn--secondary {
    font-size: 15px;
    color: var(--mg-ink);
    background: #fff;
    border: 1px solid var(--mg-border-btn);
}

.cd-btn--secondary:hover {
    border-color: var(--mg-teal);
    color: var(--mg-ink);
}

.cd-btn--disabled {
    background: #c5d0cd;
    color: #fff;
    cursor: not-allowed;
    margin-bottom: 10px;
}

.cd-card__note {
    text-align: center;
    font-size: 12px;
    color: #8a95a3;
    margin-top: 14px;
}

.cd-card__access {
    background: var(--mg-bg-mint);
    border: 1px solid #d7e5f0;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    font-size: 13px;
    color: var(--mg-teal-dark);
    margin-bottom: 14px;
    font-weight: 600;
}

/* Related */
.cd-related {
    background: var(--mg-bg-soft);
    border-top: 1px solid var(--mg-border);
    padding: 56px 24px;
}

.cd-related__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.cd-related__title {
    font-size: 30px;
    margin: 0 0 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.cd-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.cd-related-card {
    background: #fff;
    border: 1px solid var(--mg-border-card);
    border-radius: 16px;
    overflow: hidden;
    display: block;
    transition: transform 0.15s, box-shadow 0.15s;
}

.cd-related-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -18px rgba(15, 43, 40, 0.3);
}

.cd-related-card__media {
    aspect-ratio: 16 / 10;
    background: repeating-linear-gradient(
        135deg,
        var(--mg-placeholder),
        var(--mg-placeholder) 10px,
        var(--mg-placeholder-alt) 10px,
        var(--mg-placeholder-alt) 20px
    );
    position: relative;
    overflow: hidden;
}

.cd-related-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cd-related-card__body {
    padding: 18px;
}

.cd-related-card__meta {
    color: var(--mg-teal);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.cd-related-card__title {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.3;
    color: var(--mg-ink);
}

@media (max-width: 1024px) {
    .cd-body {
        grid-template-columns: 1fr;
    }

    .cd-sidebar {
        position: static;
        order: -1;
    }

    .cd-objectives {
        grid-template-columns: 1fr;
    }

    .cd-related__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .cd-related__grid {
        grid-template-columns: 1fr;
    }

    .cd-hero {
        padding: 28px 16px 32px;
    }

    .cd-body {
        padding: 28px 16px 56px;
        min-width: 0;
    }

    .cd-main {
        min-width: 0;
        max-width: 100%;
    }

    .cd-tabs {
        gap: 18px;
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
        width: calc(100% + 32px);
        max-width: none;
    }

    .cd-card__amount {
        font-size: 32px;
    }

    .cd-hero__title {
        font-size: clamp(1.5rem, 7vw, 2rem);
        line-height: 1.2;
    }
}

/* Mode sombre (?theme=dark) — fiches formation uniquement */
body.page-course-detail--dark.page-course-detail {
    --mg-teal: #3ba0f0;
    --mg-teal-dark: #5bb4f5;
    --mg-teal-soft: #7ec8f5;
    --mg-ink: #e8eef4;
    --mg-muted: #9aa6b2;
    --mg-body: #b8c2cc;
    --mg-nav: #c5ced6;
    --mg-border: #243040;
    --mg-border-card: #2a3848;
    --mg-border-btn: #3d4f5f;
    --mg-bg-soft: #121a22;
    --mg-bg-mint: #1a2834;
    --mg-placeholder: #1c2834;
    --mg-placeholder-alt: #243240;
}

body.page-course-detail--dark .cd {
    background: #0f1419;
    color: var(--mg-ink);
}

body.page-course-detail--dark .cd-hero__dot {
    background: #3d4f5f;
}

body.page-course-detail--dark .cd-media {
    border-color: #2a3848;
}

body.page-course-detail--dark .cd-media__label {
    color: #9aa6b2;
    background: #1a2834;
}

body.page-course-detail--dark .cd-module,
body.page-course-detail--dark .cd-financing-item,
body.page-course-detail--dark .cd-card,
body.page-course-detail--dark .cd-related-card {
    background: #161e28;
}

body.page-course-detail--dark .cd-btn--secondary {
    background: #161e28;
    color: var(--mg-ink);
}

body.page-course-detail--dark .cd-btn--secondary:hover {
    border-color: var(--mg-teal);
    color: var(--mg-ink);
}

body.page-course-detail--dark .cd-btn--disabled {
    background: #3d4f5f;
    color: #9aa6b2;
}

body.page-course-detail--dark .cd-card__badge--dpc,
body.page-course-detail--dark .cd-card__badge--finance,
body.page-course-detail--dark .cd-card__finance {
    background: rgba(0, 129, 229, 0.18);
    color: var(--mg-teal-soft);
}

body.page-course-detail--dark .cd-card__access {
    background: var(--mg-bg-mint);
    border-color: #2a3848;
    color: var(--mg-teal-soft);
}

body.page-course-detail--dark .cd-card__note {
    color: #8a95a3;
}

body.page-course-detail--dark .cd-related-card:hover {
    box-shadow: 0 14px 28px -18px rgba(0, 0, 0, 0.55);
}

/* Chrome (nav) aligné au sombre sur cette page uniquement */
body.page-course-detail--dark.page-home .theme-nav {
    background: rgba(0, 0, 0, 0.94) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.page-course-detail--dark.page-home .theme-nav .theme-link,
body.page-course-detail--dark.page-home .theme-nav a.theme-link {
    color: #d1d5db !important;
}

body.page-course-detail--dark.page-home .theme-nav .theme-link:hover,
body.page-course-detail--dark.page-home .theme-nav a.theme-link:hover {
    color: #ffffff !important;
}

body.page-course-detail--dark.page-home .theme-nav a[aria-current="page"] {
    color: #ffffff !important;
}

body.page-course-detail--dark.page-home .theme-logo-text {
    color: #ffffff !important;
}

body.page-course-detail--dark.page-home .theme-logo-image {
    filter: none;
}

body.page-course-detail--dark.page-home a.btn-nav-login,
body.page-course-detail--dark.page-home .btn-nav-login {
    background: #0081e5 !important;
    color: #ffffff !important;
}