/* ================== Variables ================== */
:root {
    --bg: #f7f7f7;
    --ink: #1a2a40;
    --ink-2: #21324f;
    --text-on-ink: #f7f7f7;
    --radius: 14px;
    --pad: clamp(14px, 2.5vw, 20px);
    --maxw: 820px;
    --shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 24px rgba(0,0,0,.06);
    --rail-w: 260px; /* largeur de la sidebar catalogue (desktop) */
}

/* ================== Base ================== */
html, body {
    height: 100%;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 500 16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

*, *::before, *::after {
    box-sizing: border-box;
}

img, svg {
    max-width: 100%;
    height: auto;
}

[hidden] {
    display: none !important;
}

/* ================== Layout ================== */
.wrap {
    max-width: var(--maxw);
    margin-inline: auto;
    padding: clamp(18px, 3vw, 28px);
}

header {
    text-align: center;
    margin: 12px 0 18px;
}

.site-logo {
    display: block;
    margin: 0 auto 12px;
    max-width: clamp(120px, 20vw, 240px);
    height: auto;
}

.site-title {
    font-size: clamp(22px, 3.5vw, 32px);
    margin: 0 0 6px;
    letter-spacing: .2px;
    font-weight: 700;
}

.site-tagline {
    margin: 0;
    font-weight: 500;
    opacity: .9;
}

/* ================== NAV FIXE CATALOGUE ================== */
body.page--catalogue .catalogue-nav {
    position: fixed;
    left: 16px;
    top: 16px;
    bottom: 16px;
    width: var(--rail-w);
    background: #fff;
    color: var(--ink);
    border-radius: 14px;
    box-shadow: 0 8px 26px rgba(0,0,0,.08);
    padding: 14px;
    z-index: 2147483000;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.page--catalogue .catalogue-nav__list,
body.page--catalogue .catalogue-nav__meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

body.page--catalogue .catalogue-nav a {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
}

    body.page--catalogue .catalogue-nav a:hover {
        background: #f3f5f9;
    }

body.page--catalogue .catalogue-nav__sep {
    border: 0;
    height: 1px;
    background: rgba(0,0,0,.08);
    margin: 6px 0;
}

body.page--catalogue .catalogue-nav__contact {
    font-size: 14px;
    line-height: 1.45;
    margin-top: 6px;
}

    body.page--catalogue .catalogue-nav__contact a {
        color: var(--ink);
        text-decoration: underline;
    }

/* Décale le contenu pour ne pas passer sous la sidebar */
@media (min-width: 1024px) {
    body.page--catalogue .wrap {
        margin-left: calc(var(--rail-w) + 24px);
    }
}

/* Variante mobile : barre fixe en haut */
@media (max-width: 1023.98px) {
    body.page--catalogue .catalogue-nav {
        left: 0;
        right: 0;
        top: 0;
        bottom: auto;
        width: auto;
        border-radius: 0 0 12px 12px;
        padding: 8px 10px;
        display: grid;
        gap: 6px;
    }

    body.page--catalogue .catalogue-nav__group {
        overflow: hidden;
    }

    body.page--catalogue .catalogue-nav__list {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: thin;
        padding-bottom: 2px;
    }

        body.page--catalogue .catalogue-nav__list a {
            white-space: nowrap;
            background: #eef2f8;
        }

    body.page--catalogue .catalogue-nav__group--meta {
        display: none;
    }
    /* on allège sur mobile */
    body.page--catalogue .wrap {
        margin-left: 0;
        padding-top: 64px;
    }
    /* place pour la barre */
}

/* ================== Cartes / Contenu ================== */
.site-header {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(16px, 4vw, 32px);
    margin: 0 auto 24px;
    text-align: center;
}

.header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

details.category {
    margin: 16px 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: var(--ink);
    overflow: hidden;
}

summary.category__summary {
    list-style: none;
    background: var(--ink);
    color: var(--text-on-ink);
    padding: clamp(16px, 3.2vw, 22px);
    cursor: pointer;
    font-size: clamp(18px, 2.8vw, 22px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    outline: none;
    text-align: center;
}

    summary.category__summary::after {
        content: "▾";
        font-size: 1.1em;
        opacity: .9;
        margin-left: auto;
        transition: transform .2s ease;
        transform: rotate(-90deg);
    }

details[open] > summary.category__summary::after {
    transform: rotate(0deg);
}

summary.category__summary:hover {
    background: var(--ink-2);
}

summary.category__summary:focus-visible {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ink-2);
    border-radius: var(--radius);
}

.category__icon {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    opacity: .85;
    transition: transform .2s ease, opacity .2s ease;
}

summary.category__summary:hover .category__icon {
    transform: scale(1.1);
    opacity: 1;
}

.category__content {
    background: var(--bg);
    color: var(--ink);
    padding: var(--pad);
    border-top: 1px solid rgba(0,0,0,.06);
}

.course {
    background: #fff;
    border-radius: 12px;
    padding: clamp(14px, 2.4vw, 18px);
    box-shadow: var(--shadow);
    margin: 12px 0;
    display: grid;
    gap: 8px 14px;
    overflow: hidden;
}

.course__title {
    margin: 0;
    font-size: clamp(16px, 2.4vw, 20px);
}

.course > p {
    overflow-wrap: anywhere;
}

.course__illustration {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 8px 0 12px;
}

    .course__illustration img {
        height: clamp(96px,14vw,160px);
        width: auto;
        display: block;
        object-fit: contain;
        opacity: .95;
        transition: transform .2s ease;
    }

        .course__illustration img:hover {
            transform: scale(1.05);
        }

.meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    font-size: 14px;
    opacity: .9;
}

.meta__pill {
    background: #eef2f8;
    color: var(--ink);
    border-radius: 999px;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.sessions {
    display: grid;
    gap: 10px;
    margin-top: 6px;
}

.session {
    border: 1px solid rgba(0,0,0,.06);
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px 14px;
    width: 100%;
}

.session__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 240px;
    flex: 1 1 200px;
    min-width: 0;
}

.session__title {
    font-weight: 600;
    margin: 0;
    font-size: 15px;
}

.session__sub {
    font-size: 14px;
    opacity: .9;
}

.session__actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

    .session__actions .cta {
        order: -1;
    }

.btn--link {
    background: none;
    border: none;
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

    .btn--link:hover {
        text-decoration: none;
    }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
}

.btn--secondary {
    background: #eef2f8;
    color: var(--ink);
    border-color: rgba(0,0,0,.08);
}

.cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 16px;
    border: none;
    border-radius: 10px;
    background: var(--ink);
    color: var(--text-on-ink);
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow);
}

    .cta[aria-disabled="true"] {
        background: #aab3c2;
        cursor: not-allowed;
    }

    .cta:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ink-2);
    }

.badges {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.badge {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef2f8;
    color: var(--ink);
}

.badge--full {
    background: #ffe2e2;
    color: #8a1f1f;
}

.badge--open {
    background: #e6f7ee;
    color: #1e7a46;
}

.badge--cancel {
    background: #ffe9d6;
    color: #7a3b00;
}

/* ================== Variantes page cours ================== */
.course-page .session {
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px 18px;
    padding: 12px 14px;
}

.course-page .session__info {
    min-width: 0;
}

.course-page .session__actions {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    border: 0;
    padding: 0;
}

/* ================== Responsive ================== */
@media (max-width: 560px) {
    .session {
        flex-direction: column;
    }

    .session__actions {
        width: 100%;
        justify-content: flex-end;
        gap: 8px;
    }

    .cta, .btn--secondary {
        height: 42px;
    }

    .course-page .session {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .course-page .session__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 420px) {
    .course__illustration img {
        height: clamp(72px, 22vw, 110px);
    }

    .course__title, .course > p, .meta {
        text-align: left;
    }
}

/* ================== Divers ================== */
.badge--intra {
    background: #fff1d6;
    color: #754b00;
    border: 1px solid rgba(0,0,0,.06);
}

footer {
    text-align: center;
    opacity: .8;
    font-size: 14px;
    margin: 26px 0 12px;
}
/* ====== HAMBURGER — AJOUT SPÉCIFIQUE CATALOGUE (sans casser l'existant) ====== */
.hamburger {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 26px rgba(0,0,0,.22);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    z-index: 10010;
}

.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.25);
    backdrop-filter: saturate(120%) blur(2px);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

    .menu-overlay.is-open {
        opacity: 1;
        pointer-events: auto;
    }

.menu-panel {
    position: fixed;
    right: 16px;
    top: 72px;
    min-width: 280px;
    max-width: min(92vw, 420px);
    padding: 12px;
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 16px 40px rgba(0,0,0,.28);
    z-index: 10005;
    transform: translateY(-6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

    .menu-panel.is-open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

.menu-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.menu-panel a {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
}

    .menu-panel a:hover {
        background: #f3f5f9;
    }

.menu-sep {
    margin: 8px 0;
    border: 0;
    border-top: 1px solid rgba(0,0,0,.08);
}

.menu-contact {
    background: #f6f8fc;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.45;
}

    .menu-contact a {
        color: var(--ink);
        text-decoration: underline;
    }

body.menu-open {
    overflow: hidden;
}