/* ==========================================================================
   STAND-UP ACADEMY — Homepage 1:1 reproduction du Figma
   File: home-figma.css
   Note: Self-contained styles for the new homepage. Do NOT import style.css.
   Reference Figma: ZoVLyHTGe31oZGn7rbEoq0 (node 429:5)
   ========================================================================== */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&family=Playfair+Display:ital@0;1&display=swap');

/* ---------- Tokens ---------- */
:root {
    --orange: #f07a1a;
    --orange-1: #f1951b;
    --orange-2: #f14000;
    --orange-grad: linear-gradient(90deg, #f1951b 0%, #f14000 100%);
    --orange-soft: rgba(240, 122, 26, 0.08);
    --orange-border: rgba(240, 122, 26, 0.3);
    --orange-border-2: rgba(240, 122, 26, 0.2);
    --orange-border-soft: rgba(240, 122, 26, 0.25);

    --brown: #622f00;
    --brown-deep: #2b1200;
    --brown-darker: #1a0a00;

    --black: #0c0c0c;
    --night: #100e16;
    --white: #ffffff;
    --cream: #f0ece4;
    --gray-text: #bebebe;

    --purple-tag: #d876ff;
    --purple-tag-bg: rgba(216, 118, 255, 0.12);
    --purple-tag-border: rgba(216, 118, 255, 0.25);
    --red-tag: #ff3131;
    --red-tag-bg: rgba(255, 49, 49, 0.12);
    --red-tag-border: rgba(255, 49, 49, 0.25);
    --yellow-tag: #f0c51a;
    --yellow-tag-bg: rgba(240, 197, 26, 0.12);
    --yellow-tag-border: rgba(240, 197, 26, 0.25);

    --glass-bg: linear-gradient(168deg, rgba(170, 78, 0, 0.2) 0%, rgba(85, 35, 0, 0.2) 100%);
    --glass-blur: 11.5px;
    --glass-shadow: 5px 9px 19px rgba(0, 0, 0, 0.16);
    --glass-shadow-deep: 5px 9px 19px 3px rgba(0, 0, 0, 0.16);

    --orange-glow: 0 0 13.2px rgba(240, 122, 26, 0.55);
    --orange-glow-soft: 0 0 40.26px 5.67px rgba(240, 122, 26, 0.29);
    --white-glow: 0 0 13.2px rgba(255, 255, 255, 0.55);
    --text-shadow: 6px 6px 12.7px rgba(0, 0, 0, 0.3);

    --section-bg-1: linear-gradient(-42deg, #1a0a00 40%, #2b1200 100%);
    --section-bg-2: linear-gradient(134deg, #2b1200 0%, #1a0a00 60%);
    --section-bg-3: linear-gradient(119deg, #2b1200 0%, #1a0a00 60%);
    --section-bg-4: linear-gradient(192deg, #2b1200 3%, #1a0a00 59%);
    --section-bg-5: linear-gradient(127deg, #2b1200 0%, #1a0a00 60%);
    --section-bg-6: linear-gradient(140deg, #2b1200 0%, #1a0a00 60%);

    --container-max: 1152px;
    --gutter: 384px;
}

/* ---------- Reset & base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--brown);
    color: var(--cream);
    overflow-x: hidden;
    line-height: 1.5;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

/* ---------- Utilities ---------- */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   SCROLL ANIMATIONS — fade-up reveal, parallax orbs, toggle swap
   ========================================================================== */
[data-reveal] {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 0.85s cubic-bezier(0.2, 0.7, 0.2, 1),
                transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: opacity, transform;
}

[data-reveal="fade"] {
    transform: none;
}

[data-reveal="left"] {
    transform: translateX(-48px);
}

[data-reveal="right"] {
    transform: translateX(48px);
}

[data-reveal="zoom"] {
    transform: scale(0.92);
}

[data-reveal].is-revealed {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

[data-reveal-delay="100"] { transition-delay: 0.1s; }
[data-reveal-delay="200"] { transition-delay: 0.2s; }
[data-reveal-delay="300"] { transition-delay: 0.3s; }
[data-reveal-delay="400"] { transition-delay: 0.4s; }
[data-reveal-delay="500"] { transition-delay: 0.5s; }
[data-reveal-delay="600"] { transition-delay: 0.6s; }

/* Section orbs parallax — uses CSS variable updated by JS */
section::before,
section::after {
    --orb-offset: 0px;
    transition: filter 0.4s ease, opacity 0.4s ease;
}

.section-intro::before,
.section-philo::before,
.section-formations::before,
.section-cocon::before,
.section-atelier::before,
.section-modules::before,
.section-masterclass::before,
.section-contact::before {
    transform: translate(-50%, calc(-50% + var(--orb-offset, 0px))) !important;
}

.section-intro::after,
.section-philo::after,
.section-formations::after,
.section-cocon::after,
.section-atelier::after,
.section-modules::after,
.section-masterclass::after,
.section-contact::after {
    transform: translate(-50%, calc(-50% + var(--orb-offset, 0px) * 0.6)) !important;
}

/* Toggle swap → cards never bounce; only inner views crossfade.
   Subtle stagger on each card's view via transition-delay. */
.formations-cards .formation-card:nth-child(2) .formation-view {
    transition-delay: 0.04s;
}
.formations-cards .formation-card:nth-child(3) .formation-view {
    transition-delay: 0.08s;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    [data-reveal],
    [data-reveal].is-revealed,
    .hero-image,
    .hero-orb,
    section::before,
    section::after {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        opacity: 1;
    }
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    height: 29px;
    padding: 0 16px;
    border-radius: 20px;
    background: var(--orange-grad);
    color: var(--black);
    font-weight: 700;
    font-size: 11.2px;
    letter-spacing: 4px;
    text-transform: uppercase;
    line-height: 1;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1;
    padding: 18px 32px;
    font-size: 14.4px;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    border: none;
}

.btn-orange {
    background: var(--orange);
    color: var(--white);
    box-shadow: var(--orange-glow-soft);
}

.btn-orange:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 50px 8px rgba(240, 122, 26, 0.45);
}

.btn-outline-white {
    border: 2px solid var(--white);
    color: var(--cream);
    background: transparent;
    padding: 16px 30px;
}

.btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.08);
}

.btn-white {
    background: var(--white);
    color: var(--night);
    box-shadow: var(--white-glow);
}

.btn-white:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.7);
}

.btn-orange-glow {
    background: var(--orange);
    color: var(--white);
    box-shadow: var(--orange-glow);
}

.btn-orange-glow:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 24px rgba(240, 122, 26, 0.75);
}

.section-kicker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    text-align: center;
    margin-bottom: 64px;
}

.h-display {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    color: var(--cream);
    letter-spacing: 2px;
    line-height: 1.1;
    margin: 0;
}

.h2-display {
    font-size: clamp(2.4rem, 4.4vw, 56px);
}

.text-orange {
    color: var(--orange);
}

.section-desc {
    font-size: 16.8px;
    line-height: 1.7;
    color: var(--gray-text);
    max-width: 760px;
}

/* glass card primitive */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--orange-border);
    border-radius: 20px;
    box-shadow: var(--glass-shadow);
}

.glass-deep {
    box-shadow: var(--glass-shadow-deep);
}

/* radial glow positioned helpers */
.glow-orange {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    z-index: 0;
}

/* ==========================================================================
   NAV — header
   Reproduces Figma: glass pill 75px tall, rounded 40px, orange border,
   drop-shadow 0 20px 20px rgba(0,0,0,0.5), logo 56px tall on the left.
   ========================================================================== */
.nav {
    position: fixed;
    top: 18px;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 56px;
    height: 56px;
    pointer-events: none;
    transition: top 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.nav > * {
    pointer-events: auto;
}

/* On scroll: pill stays floating with breathing room above & below */
.nav.is-scrolled {
    top: 16px;
}

.nav.is-scrolled::before { display: none; }

@keyframes navBandIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.nav-logo {
    display: inline-flex;
    align-items: center;
    height: 56px;
    transition: transform 0.2s ease;
}

.nav-logo:hover {
    transform: scale(1.04);
}

.nav-logo img {
    height: 56px;
    width: auto;
    display: block;
}

/* Glass pill containing all menu items — slimmer, more elegant */
.nav-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px 4px 18px;
    height: 56px;
    border-radius: 40px;
    background:
        linear-gradient(180deg, rgba(40, 22, 8, 0.78) 0%, rgba(20, 10, 4, 0.82) 100%);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 122, 47, 0.22);
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.02) inset,
        0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    height: 40px;
    margin: 0 1px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12.6px;
    letter-spacing: 0.3px;
    color: var(--gray-text);
    padding: 0 16px;
    line-height: 1;
    white-space: nowrap;
    position: relative;
    border-radius: 100px;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 14px;
    height: 2px;
    background: var(--orange-grad, linear-gradient(135deg, #ff7a2f 0%, #ff9d5a 100%));
    border-radius: 2px;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
    box-shadow: 0 0 10px rgba(255, 122, 47, 0.5);
}

.nav-link:hover {
    color: var(--cream);
    background: rgba(255, 122, 47, 0.06);
}

.nav-link:hover::after,
.nav-link.is-active::after {
    transform: translateX(-50%) scaleX(1);
}

.nav-link.is-active {
    color: var(--orange);
    background: rgba(255, 122, 47, 0.10);
}

/* ----- Dropdown "Formations" --------------------------------------- */
.nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
}
.nav-dropdown > .nav-link {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.nav-dropdown > .nav-link:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 4px;
    border-radius: 4px;
}
/* Vrai SVG injecté par nav-dropdown.js — propre, aligné, visible */
.nav-dropdown-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    flex-shrink: 0;
    color: currentColor;
    opacity: 0.75;
    transition:
        transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1),
        opacity 0.2s ease;
    pointer-events: none;
}
.nav-dropdown-arrow svg {
    width: 100%;
    height: 100%;
    display: block;
}
.nav-dropdown:hover > .nav-link .nav-dropdown-arrow,
.nav-dropdown.is-open > .nav-link .nav-dropdown-arrow {
    opacity: 1;
}
.nav-dropdown.is-open > .nav-link .nav-dropdown-arrow {
    transform: rotate(180deg);
}
.nav-dropdown-panel {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 280px;
    padding: 8px;
    background:
        linear-gradient(168deg, rgba(40, 18, 5, 0.96) 0%, rgba(20, 9, 0, 0.97) 100%);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255, 122, 47, 0.22);
    border-radius: 18px;
    box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 122, 47, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.05) inset;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.22s ease,
        transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1),
        visibility 0s linear 0.22s;
    z-index: 1000;
    display: grid;
    gap: 2px;
}
/* Pont invisible étendu : couvre la totalité du gap entre le trigger et le panel
   pour éviter que la souris ne perde le hover en passant entre les deux. */
.nav-dropdown-panel::before {
    content: "";
    position: absolute;
    top: -22px;
    left: -12px;
    right: -12px;
    height: 24px;
    background: transparent;
}
.nav-dropdown.is-open > .nav-dropdown-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition:
        opacity 0.22s ease,
        transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.nav-dropdown-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 16px 12px 18px;
    border-radius: 12px;
    color: var(--cream);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        padding-left 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.nav-dropdown-item::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    width: 3px;
    height: 0;
    background: var(--orange-grad, linear-gradient(135deg, #ff7a2f 0%, #ff9d5a 100%));
    border-radius: 3px;
    transform: translateY(-50%);
    transition: height 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
    box-shadow: 0 0 12px rgba(255, 122, 47, 0.6);
}
.nav-dropdown-item small {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--gray-text);
    letter-spacing: 0.2px;
    line-height: 1.35;
}
.nav-dropdown-tag {
    align-self: flex-start;
    margin-bottom: 2px;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 122, 47, 0.32);
    background: rgba(255, 122, 47, 0.1);
    color: var(--orange, #ff7a2f);
    font-family: 'Inter', sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.1;
}
.nav-dropdown-item:hover .nav-dropdown-tag,
.nav-dropdown-item.is-active .nav-dropdown-tag {
    background: rgba(255, 122, 47, 0.2);
    border-color: rgba(255, 122, 47, 0.55);
}
.nav-dropdown-item:hover {
    background: rgba(255, 122, 47, 0.10);
    padding-left: 22px;
}
.nav-dropdown-item:hover::before {
    height: 24px;
}
.nav-dropdown-item.is-active {
    background: rgba(255, 122, 47, 0.18);
    color: var(--orange);
}
.nav-dropdown-item.is-active::before {
    height: 28px;
}
.nav-dropdown-item.is-active small {
    color: rgba(255, 200, 160, 0.85);
}
.nav-dropdown-item-divider {
    position: relative;
    height: 1px;
    margin: 14px 18px 10px;
    background: linear-gradient(
        90deg,
        rgba(240, 122, 26, 0) 0%,
        rgba(240, 122, 26, 0.45) 50%,
        rgba(240, 122, 26, 0) 100%
    );
}
.nav-dropdown-item-divider[data-label]::after {
    content: attr(data-label);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 0 10px;
    background: #1c0c02;
    color: rgba(240, 122, 26, 0.75);
    font-family: 'Inter', sans-serif;
    font-size: 9.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Right-side cluster: pill + standalone S'inscrire CTA */
.nav-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* "Entreprise" outline button — lives INSIDE the pill */
.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 18px;
    margin-left: 6px;
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 12.2px;
    font-weight: 600;
    letter-spacing: 0.6px;
    line-height: 1;
    white-space: nowrap;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
    align-self: center;
}

.nav-btn-outline {
    border: 1px solid rgba(255, 122, 47, 0.32);
    color: var(--cream);
    background: rgba(255, 122, 47, 0.04);
    position: relative;
}

.nav-btn-outline:hover {
    background: rgba(255, 122, 47, 0.12);
    border-color: rgba(255, 122, 47, 0.6);
    color: var(--orange);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -8px rgba(255, 122, 47, 0.5);
}

/* Standalone "S'inscrire" CTA — lives OUTSIDE the pill, on the right */
.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 24px;
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 12.4px;
    font-weight: 700;
    letter-spacing: 1.1px;
    line-height: 1;
    white-space: nowrap;
    color: #1a0e08;
    background: linear-gradient(135deg, #ffb15a 0%, #ff7a2f 55%, #ff9d5a 100%);
    background-size: 200% 200%;
    background-position: 0% 50%;
    border: 1px solid rgba(255, 200, 140, 0.4);
    box-shadow:
        0 6px 18px -4px rgba(255, 122, 47, 0.55),
        0 0 0 1px rgba(255, 122, 47, 0.2),
        0 1px 0 rgba(255, 255, 255, 0.35) inset;
    transition:
        background-position 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 0.2s ease,
        box-shadow 0.25s ease;
}

.nav-cta:hover {
    background-position: 100% 50%;
    transform: translateY(-1px);
    box-shadow:
        0 10px 24px -4px rgba(255, 122, 47, 0.7),
        0 0 28px rgba(255, 122, 47, 0.4),
        0 1px 0 rgba(255, 255, 255, 0.45) inset;
}

.nav-cta:active {
    transform: translateY(0);
}

/* Mobile burger toggle */
.nav-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--orange-border);
    color: var(--cream);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.nav-burger:hover {
    transform: scale(1.05);
}

.nav-burger svg {
    width: 22px;
    height: 22px;
}

/* Tablet — drop the secondary links from the pill, keep CTAs */
@media (max-width: 1180px) {
    .nav {
        padding: 0 32px;
    }
    .nav-pill {
        padding: 4px 6px 4px 14px;
        gap: 0;
    }
    .nav-link {
        padding: 0 10px;
        font-size: 12px;
    }
    .nav-cta {
        height: 40px;
        padding: 0 18px;
        font-size: 11.8px;
    }
}

@media (max-width: 1024px) {
    .nav-pill .nav-link {
        display: none;
    }
    .nav-pill {
        padding: 5px 8px;
    }
    .nav-btn-outline {
        margin-left: 4px;
    }
}

/* Mobile — replace the pill by a burger menu */
@media (max-width: 720px) {
    .nav {
        padding: 0 16px;
        height: 64px;
        top: 12px;
    }
    .nav-logo,
    .nav-logo img {
        height: 44px;
    }
    .nav-right {
        display: none;
    }
    .nav-burger {
        display: inline-flex;
    }
}

/* Mobile drawer (opened by burger) */
.nav-drawer {
    position: fixed;
    inset: 0;
    background: rgba(16, 14, 22, 0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 200;
    display: none;
    flex-direction: column;
    padding: 90px 32px 40px;
    overflow-y: auto;
}

.nav-drawer.is-open {
    display: flex;
}

.nav-drawer .nav-drawer-close {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--glass-bg);
    border: 1px solid var(--orange-border);
    color: var(--cream);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.nav-drawer a {
    display: block;
    padding: 18px 4px;
    border-bottom: 1px solid rgba(240, 122, 26, 0.15);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    letter-spacing: 1.5px;
    color: var(--cream);
}

.nav-drawer a:hover {
    color: var(--orange);
}

.nav-drawer .drawer-cta {
    margin-top: 32px;
    border-bottom: none;
    background: var(--orange);
    color: var(--night);
    border-radius: 100px;
    text-align: center;
    padding: 18px;
}

/* ==========================================================================
   SECTION ORBS — each section has 2 concentric Figma "Ellipse" SVGs as
   pseudo-elements (::before = big dim outer, ::after = smaller bright inner)
   ========================================================================== */

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
    position: relative;
    min-height: 820px;
    height: 100vh;
    max-height: 1100px;
    overflow: hidden;
    background: var(--night);
}

.hero-bg-gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 660px 380px at 80% 20%, rgba(108, 63, 199, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 660px 240px at 20% 50%, rgba(212, 168, 83, 0.04) 0%, transparent 60%);
    z-index: 0;
}

.hero-image {
    position: absolute;
    bottom: 0;
    left: 50%;
    --tilt-x: 0px;
    --tilt-y: 0px;
    --hero-scroll-y: 0px;
    --hero-scale: 1;
    --hero-rotate: 0deg;
    transform:
        translateX(calc(-50% + var(--tilt-x)))
        translateY(calc(var(--tilt-y) + var(--hero-scroll-y)))
        scale(var(--hero-scale))
        rotate(var(--hero-rotate));
    transform-origin: bottom center;
    width: auto;
    height: 92%;
    max-height: 1000px;
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 0 100px rgba(240, 122, 26, 0.35));
    object-fit: contain;
    object-position: bottom center;
    transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: transform;
}

/* ----------------------------------------------------------------
   Hero "stage" — 4 concentric orange ellipses anchored bottom-center
   (positions and sizes computed from Figma 1920×1200 reference,
   nodes 258:834 / 258:835 / 258:836 / 258:837)
   ---------------------------------------------------------------- */
.hero-orb {
    position: absolute;
    pointer-events: none;
    aspect-ratio: 1;
    left: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 1;
    --hero-orb-y: 0px;
    --hero-orb-x: 0px;
    --hero-orb-scale: 1;
    --hero-orb-rotate: 0deg;
    transform:
        translate(calc(-50% + var(--hero-orb-x)), calc(-50% + var(--hero-orb-y)))
        scale(var(--hero-orb-scale))
        rotate(var(--hero-orb-rotate));
    transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: transform;
}

/* Ellipse 29 — outermost ring */
.hero-orb-29 {
    background-image: url('assets/figma/hero-ellipse-29.svg');
    width: 167%;
    top: 100%;
    animation: orbBreathe 14s ease-in-out infinite;
}

/* Ellipse 27 — second ring */
.hero-orb-27 {
    background-image: url('assets/figma/hero-ellipse-27.svg');
    width: 107%;
    top: 112%;
    animation: orbBreathe 11s ease-in-out infinite reverse;
}

/* Ellipse 26 — middle bright ring */
.hero-orb-26 {
    background-image: url('assets/figma/hero-ellipse-26.svg');
    width: 77%;
    top: 108.5%;
    animation: orbBreathe 9s ease-in-out infinite;
    animation-delay: -3s;
}

/* Ellipse 28 — innermost peach pool */
.hero-orb-28 {
    background-image: url('assets/figma/hero-ellipse-28.svg');
    width: 40%;
    top: 104.5%;
    animation: orbBreathe 7s ease-in-out infinite reverse;
    animation-delay: -1.5s;
}

/* Subtle continuous breathing — opacity + scale shift */
@keyframes orbBreathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.78; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-orb { animation: none !important; }
}

.hero-content {
    position: relative;
    z-index: 3;
    height: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 130px 24px 110px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 32px 40px;
}

/* Kevin Razi card — top right, like Figma reference */
.hero-card-kevin {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    margin-top: 40px;
}

/* Hero text — bottom left, largeur bornée pour ne pas empiéter sur la colonne visuelle */
.hero-text {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: end;
    max-width: min(100%, 520px);
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 48px;
    padding: 0 22px;
    border-radius: 22px;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--orange);
    color: var(--white);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    line-height: 1;
    margin-bottom: 36px;
}

.hero-badge::before {
    content: "★";
    color: var(--orange);
    font-size: 18px;
    line-height: 1;
}

.hero-title {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: clamp(64px, 9vw, 144px);
    line-height: 0.92;
    letter-spacing: -0.005em;
    color: var(--white);
    text-shadow: 0 4px 40px rgba(0, 0, 0, 0.55);
    margin: 0 0 28px;
    text-wrap: balance;
}

.hero-title .line-1,
.hero-title .line-2 {
    display: block;
}

/* Credit line — signature élégante sous le titre */
.hero-credit {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 28px;
    padding: 6px 0 0;
    font-family: 'Inter', sans-serif;
}
.hero-credit-mark {
    color: var(--orange);
    font-size: 13px;
    line-height: 1;
}
.hero-credit-pre,
.hero-credit-post {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(15px, 1.4vw, 19px);
    background: linear-gradient(110deg, #fff5e8 0%, #ffd4a8 35%, #ffb079 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.45));
}
.hero-credit-sep {
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 212, 168, 0.7), rgba(255, 212, 168, 0));
}

.hero-subtitle {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(1.5rem, 2.2vw, 32px);
    color: var(--white);
    line-height: 1.22;
    margin: 0 0 28px;
    letter-spacing: 0.5px;
    display: block;
}

.hero-subtitle-line {
    display: inline;
}

.hero-subtitle-line--accent {
    font-size: clamp(1.35rem, 2.05vw, 30px);
    letter-spacing: 0.08em;
    color: var(--orange);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

.hero-desc {
    font-size: 16px;
    line-height: 1.45;
    color: var(--white);
    max-width: 555px;
    margin: 0 0 36px;
}

.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-actions .btn {
    padding: 18px 36px;
    font-size: 14.4px;
}

/* (Anciens styles .hero-card-kevin remplacés par .kevin-bubble plus bas.
   On conserve uniquement le placement dans la grille hero.) */
.hero-card-kevin {
    width: 100%;
    max-width: 446px;
}

.hero-scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.hero-scroll span {
    font-size: 10.4px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--white);
    font-weight: 400;
}

.hero-scroll-line {
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg, var(--white) 0%, transparent 100%);
}

/* ------------------------------------------------------------------
   Qualiopi badge — colonne 2 / rangée 2 du grid hero-content,
   donc sous la bulle Kevin et à la hauteur des boutons (gauche).
   ------------------------------------------------------------------ */
.hero-qualiopi {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    justify-self: end;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    box-shadow:
        0 14px 32px -10px rgba(0, 0, 0, 0.55),
        0 2px 6px -2px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.hero-qualiopi:hover,
.hero-qualiopi:focus-visible {
    transform: translateY(-2px);
    background: #ffffff;
    box-shadow:
        0 20px 42px -10px rgba(0, 0, 0, 0.65),
        0 4px 10px -2px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.hero-qualiopi:focus-visible {
    outline: 2px solid rgba(255, 138, 58, 0.85);
    outline-offset: 3px;
}

.hero-qualiopi img {
    display: block;
    width: clamp(78px, 8vw, 110px);
    height: auto;
}

@media (max-width: 980px) {
    .hero-qualiopi {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
        padding: 8px 12px;
        border-radius: 10px;
    }
    .hero-qualiopi img {
        width: 70px;
    }
}

@media (max-width: 560px) {
    .hero-qualiopi {
        padding: 7px 10px;
    }
    .hero-qualiopi img {
        width: 60px;
    }
}

@media (max-width: 980px) {
    .hero {
        height: auto;
        min-height: 100vh;
        padding-bottom: 60px;
    }
    .hero-content {
        grid-template-columns: 1fr;
        padding-top: 140px;
        padding-bottom: 140px;
    }
    .hero-image {
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 70%;
        opacity: 0.4;
    }
    .hero-card-kevin {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
        margin-top: 0;
    }
    .hero-text {
        grid-column: 1;
        grid-row: auto;
    }
}

/* ==========================================================================
   SECTION INTRO (L'école)
   ========================================================================== */
.section-intro {
    position: relative;
    padding: 100px 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    background: var(--section-bg-1);
    border-top: 1px solid var(--orange-border);
    border-bottom: 1px solid var(--orange-border);
    overflow: hidden;
}
.section-intro::before,
.section-intro::after {
    content: "";
    position: absolute;
    pointer-events: none;
    aspect-ratio: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 0;
    transform: translate(-50%, -50%);
}
.section-intro::before {
    background-image: url('assets/figma/sec-ellipse-30.svg');
    width: 160%;
    left: 100%;
    top: 15%;
}
.section-intro::after {
    background-image: url('assets/figma/sec-ellipse-31.svg');
    width: 80%;
    left: 95%;
    top: 18%;
}

.intro-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 80px;
    align-items: start;
}

.intro-left {
    padding-top: 40px;
}

.intro-left .tag-pill {
    margin-bottom: 30px;
}

.intro-left h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.4rem, 4.4vw, 56px);
    line-height: 1.1;
    letter-spacing: 2px;
    color: var(--cream);
    margin: 0 0 32px;
}

.intro-left h2 .accent {
    color: var(--orange);
}

.intro-left .desc {
    font-size: 16.8px;
    line-height: 1.8;
    color: var(--gray-text);
}

.intro-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    perspective: 1400px;
}

.intro-card {
    position: relative;
    padding: 95px 30px 30px;
    border-radius: 12px;
    background: var(--glass-bg);
    backdrop-filter: blur(11.5px);
    -webkit-backdrop-filter: blur(11.5px);
    border: 1px solid var(--orange-border);
    box-shadow: var(--glass-shadow);
    min-height: 320px;
    --card-rx: 0deg;
    --card-ry: 0deg;
    --card-mx: 0px;
    --card-my: 0px;
    --card-scroll: 0px;
    transform:
        translate3d(var(--card-mx), calc(var(--card-my) + var(--card-scroll)), 0)
        rotateX(var(--card-rx))
        rotateY(var(--card-ry));
    transform-style: preserve-3d;
    transition:
        transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 0.4s ease,
        border-color 0.4s ease;
    will-change: transform;
}

/* Glossy highlight that follows the cursor — adds depth */
.intro-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(
        circle 220px at var(--card-mouse-x, 50%) var(--card-mouse-y, 50%),
        rgba(240, 122, 26, 0.18) 0%,
        rgba(240, 122, 26, 0) 60%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.intro-card.is-hover::after {
    opacity: 1;
}

.intro-card.is-hover {
    border-color: var(--orange);
    box-shadow:
        0 18px 40px -12px rgba(240, 122, 26, 0.35),
        0 8px 22px rgba(0, 0, 0, 0.45);
}

.intro-card > * {
    position: relative;
    z-index: 2;
}

/* Icon gets a depth lift on hover (translateZ via parent's perspective) */
.intro-card .intro-card-icon {
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s ease;
}

.intro-card.is-hover .intro-card-icon {
    transform: translateZ(40px) scale(1.08);
    box-shadow:
        0 12px 28px rgba(240, 122, 26, 0.45),
        0 0 36px rgba(240, 122, 26, 0.55);
}

/* Composed transform must persist after data-reveal finishes */
.intro-card[data-reveal].is-revealed {
    transform:
        translate3d(var(--card-mx), calc(var(--card-my) + var(--card-scroll)), 0)
        rotateX(var(--card-rx))
        rotateY(var(--card-ry));
}

@media (prefers-reduced-motion: reduce) {
    .intro-card,
    .intro-card .intro-card-icon { transition: none !important; transform: none !important; }
}

.intro-card-icon {
    position: absolute;
    top: -11px;
    left: -13px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: var(--orange-grad);
    border: 2px solid var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    box-shadow: 0 0 24px rgba(240, 122, 26, 0.5);
}

.intro-card-icon img,
.intro-card-icon svg {
    width: 28px;
    height: 28px;
    filter: brightness(0) invert(1);
}

.intro-card h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: 19.2px;
    line-height: 1.4;
    letter-spacing: 1px;
    color: var(--cream);
    margin: 0 0 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--orange-border);
}

.intro-card p {
    font-size: 13.6px;
    line-height: 1.5;
    color: var(--white);
    margin: 0;
}

@media (max-width: 980px) {
    .intro-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .intro-cards {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   SECTION 2 — Philosophie + 1h spectacle banner
   ========================================================================== */
.section-philo {
    position: relative;
    padding: 100px 0 120px;
    background: var(--section-bg-2);
    border-top: 1px solid var(--orange-border);
    overflow: hidden;
}
.section-philo::before,
.section-philo::after {
    content: "";
    position: absolute;
    pointer-events: none;
    aspect-ratio: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 0;
    transform: translate(-50%, -50%);
}
.section-philo::before {
    background-image: url('assets/figma/sec-ellipse-32.svg');
    width: 150%;
    left: 92%;
    top: 105%;
}
.section-philo::after {
    background-image: url('assets/figma/sec-ellipse-33.svg');
    width: 75%;
    left: 88%;
    top: 100%;
}

/* ==========================================================================
   SPECTACLE BANNER — 9 mois pour aller chercher 1h de spectacle
   Slide signature, typographie monumentale
   ========================================================================== */
.spectacle-banner {
    position: relative;
    z-index: 1;
    border-radius: 24px;
    background:
        radial-gradient(ellipse 600px 400px at 95% 10%, rgba(240, 122, 26, 0.12) 0%, transparent 65%),
        radial-gradient(ellipse 500px 380px at 5% 90%, rgba(240, 122, 26, 0.08) 0%, transparent 65%),
        var(--glass-bg);
    backdrop-filter: blur(11.5px);
    -webkit-backdrop-filter: blur(11.5px);
    border: 1px solid var(--orange-border);
    box-shadow: var(--glass-shadow-deep);
    padding: 80px 70px;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 460px;
    gap: 64px;
    align-items: center;
}

.spectacle-banner::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    top: -180px;
    left: -180px;
    background: radial-gradient(circle, rgba(240, 122, 26, 0.16) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.spectacle-banner::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    top: -100px;
    right: -100px;
    background: radial-gradient(circle, rgba(240, 122, 26, 0.18) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.spectacle-text {
    position: relative;
    z-index: 1;
}

/* Kicker avec ligne orange — éditorial */
.spectacle-kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 36px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3.4px;
    text-transform: uppercase;
    color: var(--orange);
}

.spectacle-kicker-line {
    width: 48px;
    height: 1px;
    background: var(--orange);
    box-shadow: 0 0 12px rgba(240, 122, 26, 0.6);
}

/* Titre monumental — stat "9 mois" + reste de la phrase */
.spectacle-title {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    color: var(--cream);
    margin: 0 0 32px;
    line-height: 1;
    letter-spacing: 1.5px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 28px;
}

.spectacle-stat {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding-right: 28px;
    border-right: 2px solid var(--orange-border);
}

.spectacle-stat-num {
    font-size: clamp(96px, 12vw, 152px);
    line-height: 0.85;
    color: var(--orange);
    text-shadow:
        0 0 40px rgba(240, 122, 26, 0.55),
        0 0 90px rgba(240, 122, 26, 0.25);
    letter-spacing: -2px;
}

.spectacle-stat-unit {
    font-size: clamp(28px, 3.5vw, 44px);
    color: var(--cream);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.spectacle-title-rest {
    font-size: clamp(34px, 3.6vw, 48px);
    line-height: 1.05;
    letter-spacing: 1.5px;
    flex: 1;
    min-width: 280px;
}

.spectacle-title-rest .accent {
    color: var(--orange);
    text-shadow: 0 0 28px rgba(240, 122, 26, 0.45);
    white-space: nowrap;
}

.spectacle-desc {
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--gray-text);
    margin: 0 0 38px;
    max-width: 620px;
}

.spectacle-desc strong {
    color: var(--white);
    font-weight: 600;
}

.spectacle-cta-row {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.spectacle-cta {
    padding: 18px 32px;
    font-size: 13.5px;
}

.spectacle-cta-meta {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--gray-text);
    opacity: 0.9;
}

/* Photo — frame premium avec chip et glow */
.spectacle-image {
    position: relative;
    height: 520px;
    border-radius: 22px;
    border: 1px solid var(--orange);
    overflow: hidden;
    z-index: 1;
    box-shadow:
        0 30px 80px -20px rgba(240, 122, 26, 0.35),
        0 12px 40px rgba(0, 0, 0, 0.45);
}

.spectacle-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    transform: scale(1.04);
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.spectacle-image:hover img {
    transform: scale(1.08);
}

.spectacle-image-chip {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border-radius: 100px;
    background: rgba(8, 8, 8, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(240, 122, 26, 0.5);
    color: var(--orange);
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.spectacle-image-glow {
    position: absolute;
    inset: -1px;
    pointer-events: none;
    border-radius: 22px;
    box-shadow: inset 0 0 80px rgba(240, 122, 26, 0.18);
}

@media (max-width: 1100px) {
    .spectacle-banner {
        grid-template-columns: minmax(0, 1fr) 380px;
        padding: 60px 48px;
        gap: 44px;
    }
    .spectacle-image {
        height: 460px;
    }
}

@media (max-width: 880px) {
    .spectacle-banner {
        grid-template-columns: 1fr;
        padding: 48px 28px;
        gap: 40px;
    }
    .spectacle-stat {
        padding-right: 22px;
    }
    .spectacle-image {
        height: 320px;
    }
}

@media (max-width: 560px) {
    .spectacle-title {
        gap: 18px;
    }
    .spectacle-stat {
        border-right: none;
        padding-right: 0;
    }
}

/* ==========================================================================
   SECTION FORMATIONS A / B / C
   ========================================================================== */
.section-formations {
    position: relative;
    padding: 120px 0 140px;
    background: var(--section-bg-3);
    border-top: 1px solid var(--orange-border);
    overflow: hidden;
}
.section-formations::before,
.section-formations::after {
    content: "";
    position: absolute;
    pointer-events: none;
    aspect-ratio: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 0;
    transform: translate(-50%, -50%);
}
.section-formations::before {
    background-image: url('assets/figma/sec-ellipse-34.svg');
    width: 110%;
    left: -8%;
    top: 75%;
}
.section-formations::after {
    background-image: url('assets/figma/sec-ellipse-35.svg');
    width: 55%;
    left: -2%;
    top: 78%;
}

/* Toggle pill — Les formations / Voir les tarifs */
.formations-toggle {
    position: relative;
    z-index: 2;
    margin: 50px auto 40px;
    width: max-content;
    height: 56px;
    border-radius: 100px;
    background: var(--glass-bg);
    backdrop-filter: blur(11.5px);
    -webkit-backdrop-filter: blur(11.5px);
    border: 1px solid var(--orange-border);
    padding: 5px;
    display: grid;
    grid-template-columns: repeat(2, 200px);
    gap: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.ftoggle-btn {
    border-radius: 100px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 15px;
    letter-spacing: 1.6px;
    color: var(--white);
    cursor: pointer;
    background: transparent;
    border: none;
    transition: color 0.25s ease;
    z-index: 1;
    position: relative;
}

.ftoggle-btn.is-active {
    color: var(--night);
}

.ftoggle-btn:hover:not(.is-active) {
    color: var(--orange);
}

.ftoggle-indicator {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    width: calc(50% - 5px);
    border-radius: 100px;
    background: var(--orange);
    box-shadow: 0 0 30px rgba(240, 122, 26, 0.5);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    pointer-events: none;
}

.formations-toggle[data-view="tarif"] .ftoggle-indicator,
.formations-cards[data-view="tarif"] ~ .formations-toggle .ftoggle-indicator {
    transform: translateX(100%);
}

/* Card grid — Pro takes more width to feel premium */
.formations-cards {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.18fr 1fr 1fr;
    gap: 28px;
    margin-top: 60px;
    align-items: stretch;
}

.formation-card {
    position: relative;
    padding: 56px 32px 36px;
    border-radius: 20px;
    background: var(--glass-bg);
    backdrop-filter: blur(11.5px);
    -webkit-backdrop-filter: blur(11.5px);
    border: 1px solid var(--orange-border);
    box-shadow: var(--glass-shadow);
    display: flex;
    flex-direction: column;
    min-height: 560px;
    overflow: visible;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* PRO featured — wider, taller, brighter glow, lifted up */
.formation-card-featured {
    padding: 72px 38px 42px;
    min-height: 640px;
    background:
        radial-gradient(ellipse 100% 60% at 50% 0%, rgba(255, 180, 80, 0.18) 0%, transparent 60%),
        linear-gradient(180deg, rgba(240, 122, 26, 0.1) 0%, rgba(240, 122, 26, 0.86) 100%);
    border: 1.5px solid var(--orange);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 0 60px rgba(240, 122, 26, 0.45),
        0 24px 60px -12px rgba(240, 122, 26, 0.5),
        0 4px 18px rgba(0, 0, 0, 0.35);
    transform: translateY(-26px);
    z-index: 2;
}

.formation-card-featured:hover {
    transform: translateY(-22px);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 0 80px rgba(240, 122, 26, 0.55),
        0 30px 70px -12px rgba(240, 122, 26, 0.6),
        0 6px 22px rgba(0, 0, 0, 0.4);
}

.formation-card-featured h3 {
    font-size: 32px;
    letter-spacing: 1.5px;
}

.formation-card-featured .formation-tag {
    height: 36px;
    font-size: 12.5px;
    padding: 0 22px;
    background: var(--white);
    color: var(--orange-2);
    border: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

/* "Le cursus complet · Recommandé" floating ribbon */
.formation-ribbon {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 32px;
    padding: 0 18px;
    border-radius: 100px;
    background: linear-gradient(135deg, #fff5d4 0%, #ffd17a 100%);
    color: #5a2700;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.3),
        0 0 24px rgba(255, 200, 100, 0.55);
    z-index: 3;
}

.formation-ribbon-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f14000;
    box-shadow: 0 0 8px rgba(241, 64, 0, 0.8);
    animation: ribbonPulse 1.8s ease-in-out infinite;
}

@keyframes ribbonPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(241, 64, 0, 0.8); transform: scale(1); }
    50% { box-shadow: 0 0 14px rgba(241, 64, 0, 1); transform: scale(1.2); }
}

/* Two views per card stacked in same grid cell → card height stable */
.formation-views {
    position: relative;
    flex: 1;
    display: grid;
    grid-template-areas: "stack";
    width: 100%;
}

.formation-view {
    grid-area: stack;
    display: flex;
    flex-direction: column;
    width: 100%;
    transition: opacity 0.42s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.42s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: opacity, transform;
}

/* default visible: info — tarif hidden */
.formation-view-info {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.formation-view-tarif {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}

.formations-cards[data-view="tarif"] .formation-view-info {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

.formations-cards[data-view="tarif"] .formation-view-tarif {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.formation-tag {
    margin: 0 auto 24px;
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 20px;
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    line-height: 1;
}

/* Tags formations — palette unifiée, 3 niveaux d'intensité orange/cream du site */
.tag-decouverte {
    background: rgba(244, 240, 232, 0.06);
    border: 1px solid rgba(244, 240, 232, 0.22);
    color: var(--cream);
}

.tag-semipro {
    background: var(--orange-soft);
    border: 1px solid var(--orange-border);
    color: var(--orange);
}

.tag-pro {
    background: var(--orange);
    border: 1px solid var(--orange);
    color: var(--night);
}

.formation-card h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: 1px;
    color: var(--cream);
    margin: 0 0 20px;
    text-align: center;
}

.formation-card .divider {
    height: 1px;
    width: 200px;
    background: var(--orange-border);
    margin: 8px auto 24px;
}

.formation-card p.desc {
    font-size: 14.4px;
    line-height: 1.7;
    color: var(--gray-text);
    margin: 0 0 32px;
    flex: 1;
    text-align: left;
}

.formation-card-featured h3,
.formation-card-featured .divider {
    color: var(--cream);
}

.formation-card-featured p.desc {
    color: var(--white);
}

.formation-card .btn {
    width: 100%;
    padding: 18px 24px;
}

/* Qualiopi badge — premium look with check icon + label */
.qualiopi-badge {
    margin: 18px 0 0;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(170, 78, 0, 0.12) 100%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.qualiopi-check {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 8px;
    border-radius: 50%;
    background: var(--white);
    color: var(--orange-2);
    box-shadow: 0 0 16px rgba(240, 122, 26, 0.35);
}

.qualiopi-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.qualiopi-text strong {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    letter-spacing: 1.2px;
    color: var(--white);
    line-height: 1.1;
}

.qualiopi-text span {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.3;
}

.qualiopi-text em {
    font-style: normal;
    font-weight: 700;
    color: var(--white);
    letter-spacing: 0.4px;
}

/* ==========================================================================
   TARIF VIEW — design haut de gamme, parfaitement aligné avec l'info view
   ========================================================================== */
.formation-view-tarif {
    text-align: left;
}

/* The h3 inside tarif view is the offer label ("Spectacle 1 h", "Scène"...) */
.formation-view-tarif h3 {
    text-align: center;
}

/* Entry banner — pill mode d'admission, identique en vue info & tarif */
.entry-banner {
    align-self: center;
    margin: 0 auto 28px;
    padding: 7px 14px 7px 28px;
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    width: fit-content;
    line-height: 1;
    position: relative;
    white-space: nowrap;
}

.entry-banner::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

/* Variante "concours d'entrée" — orange */
.entry-banner-selection {
    color: var(--orange);
    background: rgba(240, 122, 26, 0.12);
    border: 1px solid rgba(240, 122, 26, 0.32);
}

.entry-banner-selection::before {
    background: var(--orange);
    box-shadow: 0 0 8px rgba(240, 122, 26, 0.7);
    animation: entryDotPulse 2.4s ease-in-out infinite;
}

/* Variante "entrée continue" — vert / sain */
.entry-banner-open {
    color: #7be3a4;
    background: rgba(123, 227, 164, 0.1);
    border: 1px solid rgba(123, 227, 164, 0.32);
}

.entry-banner-open::before {
    background: #7be3a4;
    box-shadow: 0 0 8px rgba(123, 227, 164, 0.7);
}

/* Sur la card Pro (fond orange) → variante claire pour rester lisible */
.formation-card-featured .entry-banner-selection {
    color: var(--white);
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.5);
}

.formation-card-featured .entry-banner-selection::before {
    background: var(--white);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

@keyframes entryDotPulse {
    0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
    50% { opacity: 0.5; transform: translateY(-50%) scale(0.8); }
}

/* Tarif title — séparation claire avec le banner d'admission */
.formation-view-tarif .tarif-title {
    margin-top: 4px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.formation-card-featured .formation-view-tarif .tarif-title {
    border-top-color: rgba(255, 255, 255, 0.18);
}

/* Price block — plus de présence + séparateur sous le prix */
.formation-view-tarif .tarif-price {
    margin: 6px 0 24px;
    padding: 0 0 22px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.formation-view-tarif .tarif-price strong {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 48px;
    line-height: 1;
    color: var(--orange);
    letter-spacing: 1px;
    text-shadow: 0 0 30px rgba(240, 122, 26, 0.25);
}

.formation-view-tarif .tarif-price small {
    display: block;
    margin-top: 10px;
    font-size: 12.5px;
    letter-spacing: 0.4px;
    color: var(--gray-text);
}

.formation-card-featured .formation-view-tarif .tarif-price {
    border-bottom-color: rgba(255, 255, 255, 0.22);
}

.formation-card-featured .formation-view-tarif .tarif-price strong {
    color: var(--white);
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}

.formation-card-featured .formation-view-tarif .tarif-price small {
    color: rgba(255, 255, 255, 0.88);
}

/* List — séparateurs subtils, check rond, padding généreux */
.formation-view-tarif .tarif-list {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
    text-align: left;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.formation-view-tarif .tarif-list li {
    position: relative;
    padding: 11px 0 11px 32px;
    font-size: 13.4px;
    line-height: 1.5;
    color: var(--gray-text);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.formation-view-tarif .tarif-list li:first-child {
    padding-top: 4px;
}

.formation-view-tarif .tarif-list li:last-child {
    border-bottom: none;
    padding-bottom: 4px;
}

.formation-view-tarif .tarif-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 4px rgba(240, 122, 26, 0.12), 0 0 14px rgba(240, 122, 26, 0.4);
}

.formation-view-tarif .tarif-list li::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 19px;
    width: 8px;
    height: 4px;
    border-left: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
    transform: rotate(-45deg);
}

.formation-view-tarif .tarif-list li:first-child::before { top: 8px; }
.formation-view-tarif .tarif-list li:first-child::after { top: 13px; }

.formation-card-featured .formation-view-tarif .tarif-list li {
    color: rgba(255, 255, 255, 0.94);
    border-bottom-color: rgba(255, 255, 255, 0.14);
}

.formation-card-featured .formation-view-tarif .tarif-list li::before {
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15), 0 0 14px rgba(255, 255, 255, 0.35);
}

.formation-card-featured .formation-view-tarif .tarif-list li::after {
    border-left-color: var(--orange-2);
    border-bottom-color: var(--orange-2);
}

/* CTA aligned to bottom */
.formation-view-tarif > .btn {
    margin-top: auto;
}

.kevin-quote-card {
    margin: 60px auto 0;
    max-width: 700px;
    padding: 30px 30px 30px 145px;
    border-radius: 22px;
    background: var(--glass-bg);
    backdrop-filter: blur(11.5px);
    -webkit-backdrop-filter: blur(11.5px);
    border: 1px solid var(--orange-border);
    box-shadow: var(--glass-shadow);
    position: relative;
    z-index: 1;
}

.kevin-quote-card .kevin-photo {
    position: absolute;
    left: 15px;
    top: 18px;
    width: 116px;
    height: 116px;
    overflow: hidden;
}

.kevin-quote-card .kevin-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kevin-quote-card h5 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18.28px;
    line-height: 1.16;
    color: var(--white);
    margin: 0 0 14px;
    letter-spacing: 0.5px;
}

.kevin-quote-card h5 span {
    display: block;
    color: var(--orange);
}

.kevin-quote-card blockquote {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: 19.2px;
    line-height: 1.8;
    color: var(--cream);
}

@media (max-width: 980px) {
    .formations-cards {
        grid-template-columns: 1fr;
    }
    .formation-card-featured {
        transform: none;
    }
    .formation-card-featured:hover {
        transform: translateY(-4px);
    }
    .formation-tabs {
        grid-template-columns: 1fr;
        height: auto;
        padding: 8px;
        gap: 8px;
    }
    .formation-tab {
        height: 44px;
    }
    .kevin-quote-card {
        padding: 145px 24px 24px;
    }
    .kevin-quote-card .kevin-photo {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ==========================================================================
   COCOON — palette bleu nuit "secret club", accents steel-blue
   ========================================================================== */
.section-cocon {
    /* Override orange palette → champagne / bronze (aligné sur cocon.html) */
    --orange: #e8c98a;
    --orange-2: #f4dba2;
    --orange-3: #8e6c2c;
    --orange-border: rgba(232, 201, 138, 0.22);
    --orange-border-soft: rgba(232, 201, 138, 0.14);
    --orange-soft: rgba(232, 201, 138, 0.07);
    --orange-grad: linear-gradient(135deg, #f4dba2 0%, #e8c98a 50%, #b29f80 100%);
    --orange-text-glow: rgba(232, 201, 138, 0.4);
    --glass-bg: linear-gradient(160deg, rgba(40, 25, 8, 0.55) 0%, rgba(20, 10, 4, 0.75) 100%);
    --glass-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
    --glass-shadow-deep: 0 14px 48px rgba(20, 10, 4, 0.65);

    /* Polices premium — accents champagne / bronze (système cocon page) */
    --champagne: #e8c98a;
    --champagne-bright: #f4dba2;
    --champagne-deep: #8e6c2c;
    --champagne-border: rgba(232, 201, 138, 0.32);
    --champagne-border-soft: rgba(232, 201, 138, 0.18);
    --champagne-soft: rgba(232, 201, 138, 0.08);
    --champagne-glow: rgba(232, 201, 138, 0.45);

    position: relative;
    padding: 120px 0 140px;
    background:
        radial-gradient(ellipse 1200px 700px at 88% 28%, rgba(255, 176, 121, 0.10) 0%, transparent 65%),
        radial-gradient(ellipse 800px 600px at 10% 82%, rgba(232, 201, 138, 0.08) 0%, transparent 65%),
        linear-gradient(180deg, #1a0a00 0%, #2b1200 50%, #1a0a00 100%);
    border-top: 1px solid rgba(232, 201, 138, 0.18);
    border-bottom: 1px solid rgba(232, 201, 138, 0.12);
    overflow: hidden;
}

/* Accent text en champagne lumineux — comme sur cocon.html */
.section-cocon .text-orange {
    color: #f4dba2 !important;
    text-shadow: 0 0 30px rgba(232, 201, 138, 0.4);
}

/* Tag pill : gradient champagne posé sur fond chaud */
.section-cocon .tag-pill {
    background: linear-gradient(135deg, #f4dba2 0%, #b29f80 100%);
    color: #1a0a00;
    border: none;
}

.section-cocon::before,
.section-cocon::after {
    content: none;
}

/* ==========================================================================
   COCON BANNER — design language Atelier, palette steel-blue
   Texte à gauche, image à droite (miroir de l'Atelier)
   ========================================================================== */
.cocon-banner {
    position: relative;
    z-index: 1;
    border-radius: 24px;
    background:
        radial-gradient(ellipse 600px 400px at 6% 12%, rgba(150, 180, 230, 0.12) 0%, transparent 65%),
        radial-gradient(ellipse 500px 380px at 96% 88%, rgba(150, 180, 230, 0.08) 0%, transparent 65%),
        linear-gradient(160deg, rgba(20, 32, 58, 0.62) 0%, rgba(8, 14, 28, 0.82) 100%);
    backdrop-filter: blur(11.5px);
    -webkit-backdrop-filter: blur(11.5px);
    border: 1px solid rgba(150, 180, 230, 0.22);
    box-shadow:
        0 14px 48px rgba(4, 8, 18, 0.7),
        inset 0 1px 0 rgba(180, 200, 230, 0.08);
    padding: 80px 70px;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 460px;
    gap: 64px;
    align-items: center;
    margin-top: 0;
}

.cocon-text {
    position: relative;
    z-index: 1;
}

/* Kicker — typographie or champagne sur ambiance bleu */
.cocon-kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 32px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3.4px;
    text-transform: uppercase;
    color: var(--champagne);
}

.cocon-kicker-line {
    width: 48px;
    height: 1px;
    background: var(--champagne);
    box-shadow: 0 0 12px var(--champagne-glow);
}

/* Titre monumental — stat "03" + suite éditoriale en Playfair italic */
.cocon-title {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    color: var(--cream);
    margin: 0 0 30px;
    line-height: 1;
    letter-spacing: 1.2px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 26px;
}

.cocon-stat {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    padding-right: 26px;
    border-right: 2px solid var(--champagne-border-soft);
}

/* Stat "03" — dégradé champagne tri-tons (signature premium) sur halo bleu */
.cocon-stat-num {
    font-size: clamp(96px, 11.5vw, 148px);
    line-height: 0.85;
    letter-spacing: -3px;
    background: linear-gradient(180deg, var(--champagne-bright) 0%, var(--champagne) 50%, var(--champagne-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0 0 36px var(--champagne-glow),
        0 0 80px rgba(232, 201, 138, 0.22);
}

.cocon-stat-unit {
    font-size: clamp(14px, 1.4vw, 18px);
    color: var(--cream);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    line-height: 1.2;
    opacity: 0.88;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

.cocon-title-rest {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.18;
    letter-spacing: 0;
    color: var(--cream);
    flex: 1;
    min-width: 280px;
}

.cocon-title-rest em {
    font-style: italic;
    color: rgba(244, 240, 232, 0.78);
    font-weight: 400;
}

.cocon-title-rest .accent {
    font-style: italic;
    color: var(--champagne);
    text-shadow: 0 0 26px var(--champagne-glow);
    font-weight: 600;
}

.cocon-desc {
    font-size: 16.2px;
    line-height: 1.78;
    color: var(--gray-text);
    margin: 0 0 36px;
    max-width: 620px;
}

.cocon-desc strong {
    color: var(--champagne-bright);
    font-weight: 600;
}

/* 4 piliers numérotés — éditorial, hairline champagne en haut */
.cocon-pillars {
    list-style: none;
    margin: 0 0 40px;
    padding: 28px 0 0;
    border-top: 1px solid var(--champagne-border-soft);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 36px;
    row-gap: 28px;
}

.cocon-pillar {
    position: relative;
    padding-left: 0;
}

.cocon-pillar-num {
    display: block;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 1px;
    color: var(--champagne);
    margin-bottom: 8px;
    opacity: 0.95;
}

.cocon-pillar h6 {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: 17px;
    letter-spacing: 1.4px;
    color: var(--cream);
    margin: 0 0 8px;
    text-transform: uppercase;
    line-height: 1.2;
}

.cocon-pillar p {
    font-size: 13.4px;
    line-height: 1.55;
    color: var(--gray-text);
    margin: 0;
}

/* Price row — uniquement le tag prix dans la colonne texte */
.cocon-price-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.cocon-price-row .cocon-cta {
    align-self: flex-start;
}

.cocon-price-tag {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px 22px;
    background: var(--champagne-soft);
    border: 1px solid var(--champagne-border);
    border-radius: 12px;
}

.cocon-price-tag .cocon-price-prefix {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: rgba(244, 240, 232, 0.72);
    text-transform: uppercase;
}

.cocon-price-tag strong {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 36px;
    line-height: 1;
    color: var(--champagne);
    letter-spacing: 1px;
    text-shadow: 0 0 20px rgba(232, 201, 138, 0.3);
}

.cocon-price-tag span {
    font-size: 12.8px;
    letter-spacing: 0.4px;
    color: var(--gray-text);
}

/* CTA bouton — dégradé champagne tri-tons sur ink-bleu (texte noir-bleuté pour lisibilité) */
.cocon-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 30px;
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 13.2px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #1a1108;
    background: linear-gradient(135deg, var(--champagne-bright) 0%, var(--champagne) 50%, var(--champagne-deep) 100%);
    border: 1px solid rgba(244, 219, 162, 0.6);
    box-shadow:
        0 4px 14px rgba(232, 201, 138, 0.28),
        0 0 22px rgba(232, 201, 138, 0.32);
    transition: all 0.25s ease;
}

.cocon-cta:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 24px rgba(232, 201, 138, 0.4),
        0 0 32px rgba(232, 201, 138, 0.5);
}

/* Colonne droite — frame photo + bouton CTA empilés */
.cocon-image {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 38px;
}

.cocon-image-frame {
    position: relative;
    width: 100%;
    border-radius: 6px;
    overflow: visible;
    box-shadow:
        0 30px 80px -20px rgba(120, 160, 220, 0.18),
        0 12px 40px rgba(0, 0, 0, 0.55);
}

.cocon-image-frame img {
    display: block;
    width: 100%;
    height: 580px;
    object-fit: cover;
    object-position: center 35%;
    border-radius: 6px;
    border: 1px solid var(--orange-border);
    filter: saturate(0.92) contrast(1.05) hue-rotate(-5deg);
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.4s ease;
}

.cocon-image-frame:hover img {
    transform: scale(1.03);
    filter: saturate(1) contrast(1.08);
}

.cocon-image-corner {
    position: absolute;
    width: 38px;
    height: 38px;
    pointer-events: none;
    z-index: 2;
}

.cocon-image-corner-tl {
    top: -10px;
    left: -10px;
    border-top: 2px solid var(--champagne);
    border-left: 2px solid var(--champagne);
    box-shadow: -1px -1px 12px rgba(232, 201, 138, 0.35);
}

.cocon-image-corner-br {
    bottom: -10px;
    right: -10px;
    border-bottom: 2px solid var(--champagne);
    border-right: 2px solid var(--champagne);
    box-shadow: 1px 1px 12px rgba(232, 201, 138, 0.35);
}

.cocon-image-chip {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border-radius: 100px;
    background: rgba(8, 14, 30, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--champagne-border);
    color: var(--champagne);
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.cocon-image-stamp {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%) rotate(-1.5deg);
    z-index: 3;
    padding: 8px 18px;
    background: rgba(8, 14, 30, 0.96);
    border: 1px dashed var(--champagne);
    color: var(--champagne-bright);
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 11.5px;
    line-height: 1.3;
    letter-spacing: 0.8px;
    max-width: 92%;
    text-align: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

@media (max-width: 1100px) {
    .cocon-banner {
        grid-template-columns: minmax(0, 1fr) 380px;
        padding: 60px 48px;
        gap: 44px;
    }
    .cocon-image img { height: 500px; }
    .cocon-pillars { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

@media (max-width: 880px) {
    .cocon-banner {
        grid-template-columns: 1fr;
        padding: 48px 28px;
        gap: 40px;
    }
    .cocon-image img { height: 360px; }
    .cocon-stat { padding-right: 22px; }
}

@media (max-width: 560px) {
    .cocon-title { gap: 16px; }
    .cocon-stat {
        border-right: none;
        padding-right: 0;
    }
    .cocon-pillars { grid-template-columns: 1fr; gap: 18px; }
}

/* ==========================================================================
   ATELIER D'ÉCRITURE HAUT DE GAMME (dedicated slide)
   ========================================================================== */
.section-atelier {
    /* Scoped palette — champagne / bronze on deep ink-brown
       Aligné sur modules.html .md-premium (noir profond + champagne) */
    --champagne: #e8c98a;
    --champagne-bright: #f4dba2;
    --champagne-deep: #8e6c2c;
    --champagne-soft: rgba(232, 201, 138, 0.08);
    --champagne-border: rgba(232, 201, 138, 0.22);
    --champagne-border-soft: rgba(232, 201, 138, 0.12);
    --ink-bg: linear-gradient(160deg, rgba(26, 13, 4, 0.55) 0%, rgba(15, 6, 0, 0.78) 100%);

    position: relative;
    padding: 120px 0 140px;
    background:
        radial-gradient(ellipse 1100px 700px at 80% 0%, rgba(232, 201, 138, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 700px 500px at 20% 100%, rgba(255, 122, 47, 0.08) 0%, transparent 55%),
        linear-gradient(160deg, #1a0d04 0%, #0f0600 100%);
    border-top: 1px solid var(--champagne-border-soft);
    overflow: hidden;
}
/* Filet hairline champagne en haut de la section — signature md-premium */
.section-atelier::after {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(244, 219, 162, 0.6) 30%,
        rgba(244, 219, 162, 0.9) 50%,
        rgba(244, 219, 162, 0.6) 70%,
        transparent 100%);
    pointer-events: none;
    z-index: 2;
}
.section-atelier::before,
.section-atelier::after {
    content: none;
}

/* ==========================================================================
   MODULES D
   ========================================================================== */
.section-modules {
    /* Palette orange standard du site — alias mint→orange pour compat avec le reste */
    --mint: var(--orange);
    --mint-bright: #ff9a3d;
    --mint-deep: #aa4e00;
    --mint-soft: var(--orange-soft);
    --mint-border: var(--orange-border);
    --mint-border-soft: var(--orange-border-soft);
    --mint-grad: var(--orange-grad);
    --mint-text-glow: rgba(240, 122, 26, 0.4);

    position: relative;
    padding: 120px 0 100px;
    background: linear-gradient(180deg, #1a0a00 0%, #2b1200 100%);
    border-top: 1px solid var(--orange-border);
    overflow: hidden;
}

/* No accent override — keep the standard orange brand color for "complémentaires" */
.section-modules .text-orange {
    color: var(--orange) !important;
    text-shadow: 0 0 30px var(--orange-text-glow);
}

/* Section orbs back to native orange */
.section-modules::before,
.section-modules::after {
    filter: none;
    opacity: 1;
}
.section-modules::before,
.section-modules::after {
    content: "";
    position: absolute;
    pointer-events: none;
    aspect-ratio: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 0;
    transform: translate(-50%, -50%);
}
.section-modules::before {
    background-image: url('assets/figma/sec-ellipse-42.svg');
    width: 130%;
    left: -10%;
    top: 35%;
}
.section-modules::after {
    background-image: url('assets/figma/sec-ellipse-43.svg');
    width: 65%;
    left: -3%;
    top: 32%;
}

.modules-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 60px;
}

.module-card {
    position: relative;
    padding: 28px 22px;
    border-radius: 20px;
    background: var(--glass-bg);
    backdrop-filter: blur(11.5px);
    -webkit-backdrop-filter: blur(11.5px);
    border: 1px solid var(--mint-border);
    box-shadow: var(--glass-shadow);
    min-height: 200px;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.module-card:hover {
    transform: translateY(-4px);
    border-color: var(--orange);
    box-shadow:
        0 16px 40px -12px rgba(240, 122, 26, 0.32),
        0 8px 22px rgba(0, 0, 0, 0.4);
}

.module-num {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 1.6px;
    color: var(--mint);
    background: var(--mint-soft);
    border: 1px solid var(--mint-border);
    margin-bottom: 18px;
}

.module-card h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--cream);
    line-height: 1.3;
    margin: 0 0 16px;
}

.module-card p {
    font-size: 13.4px;
    line-height: 1.55;
    color: var(--gray-text);
    margin: 0 0 16px;
}

.module-card .module-meta {
    font-size: 12.8px;
    line-height: 1.45;
    color: var(--mint);
    opacity: 0.92;
    letter-spacing: 0.3px;
    border-top: 1px solid var(--mint-border-soft);
    padding-top: 12px;
}

.modules-row-2 {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 22px;
}

.modules-cta {
    text-align: center;
    margin-top: 56px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

/* Bouton CTA scopé à la section : retour à l'orange standard du site */
.modules-cta .btn {
    padding: 18px 42px;
    background: var(--orange);
    color: var(--night);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        0 2px 6px rgba(212, 168, 83, 0.22),
        0 0 14px rgba(240, 122, 26, 0.3);
}

.modules-cta .btn:hover {
    transform: translateY(-2px);
    background: #ff8a2d;
    box-shadow:
        0 4px 14px rgba(240, 122, 26, 0.4),
        0 0 22px rgba(240, 122, 26, 0.5);
}

/* Badge "Financement bientôt disponible" — orange, cohérent avec la slide */
.modules-funding-badge {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-radius: 14px;
    background: var(--orange-soft);
    border: 1px solid var(--orange-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.modules-funding-check {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    padding: 7px;
    border-radius: 50%;
    background: var(--orange);
    color: var(--night);
    box-shadow: 0 0 14px rgba(240, 122, 26, 0.5);
}

.modules-funding-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.modules-funding-text strong {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    letter-spacing: 1.2px;
    color: var(--cream);
    line-height: 1.1;
}

.modules-funding-text span {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.3;
}

.modules-funding-text em {
    font-style: normal;
    font-weight: 700;
    color: var(--mint);
    letter-spacing: 0.4px;
}

@media (max-width: 980px) {
    .modules-grid,
    .modules-row-2 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .modules-grid,
    .modules-row-2 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   MASTERCLASSES & RENCONTRES — formats à la carte
   Section "théâtre" : projecteurs qui balayent, marquee de noms,
   tickets flottants, rideau cinéma sur les images, tilt 3D des cartes.
   Le tout est piloté par --mp (masterclass progress, 0→1) calculé
   dans la boucle rAF de index.html.
   ========================================================================== */
.section-masterclass {
    position: relative;
    padding: 120px 0 140px;
    background: linear-gradient(180deg, #2b1200 0%, #1a0a00 100%);
    overflow: hidden;
    /* --mp (raw, 0→1), --mp-in (0→1 sur la 1ère moitié), --mp-peak (parabole)
       sont calculés et injectés par index.html (boucle rAF). */
    --mp: 0;
    --mp-in: 0;
    --mp-peak: 0;
}
.section-masterclass::before,
.section-masterclass::after {
    content: "";
    position: absolute;
    pointer-events: none;
    aspect-ratio: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 0;
    transform: translate(-50%, -50%);
}
.section-masterclass::before {
    background-image: url('assets/figma/sec-ellipse-40.svg');
    width: 135%;
    left: -10%;
    top: 50%;
}
.section-masterclass::after {
    background-image: url('assets/figma/sec-ellipse-41.svg');
    width: 65%;
    left: -3%;
    top: 47%;
}

/* ====== mr-stage : couche décor (projecteurs, grain, tickets) ====== */
.mr-stage {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Faisceaux lumineux qui balayent diagonalement avec le scroll */
.mr-stage-beam {
    position: absolute;
    width: 80vw;
    height: 220vh;
    top: -60vh;
    transform-origin: 50% 50%;
    pointer-events: none;
    will-change: transform, opacity;
    mix-blend-mode: screen;
}
.mr-stage-beam-1 {
    left: -20%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 138, 58, 0.0) 30%,
        rgba(255, 138, 58, 0.18) 50%,
        rgba(255, 200, 130, 0.05) 70%,
        transparent 100%);
    /* tilte + suit le scroll vers la droite */
    transform: rotate(18deg) translate3d(calc(var(--mp) * 60vw - 10vw), 0, 0);
    opacity: calc(0.3 + var(--mp-peak) * 0.6);
}
.mr-stage-beam-2 {
    right: -20%;
    background: linear-gradient(270deg,
        transparent 0%,
        rgba(255, 122, 47, 0.06) 30%,
        rgba(255, 209, 174, 0.15) 50%,
        rgba(120, 200, 150, 0.04) 70%,
        transparent 100%);
    transform: rotate(-22deg) translate3d(calc(var(--mp) * -50vw + 10vw), 0, 0);
    opacity: calc(0.25 + var(--mp-peak) * 0.55);
}

.mr-stage-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 50% 0%, transparent 0%, rgba(15, 5, 0, 0.45) 100%),
        radial-gradient(ellipse 60% 40% at 50% 100%, transparent 0%, rgba(15, 5, 0, 0.55) 100%);
    pointer-events: none;
}

/* Stickers / tickets flottants */
.mr-sticker {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 8px;
    background: linear-gradient(160deg, rgba(28, 18, 8, 0.85) 0%, rgba(14, 8, 5, 0.92) 100%);
    border: 1px solid rgba(255, 209, 174, 0.32);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 122, 47, 0.18) inset;
    color: #ffd1ae;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    will-change: transform, opacity;
    /* fade-in + lift selon le scroll */
    opacity: var(--mp-in);
}
.mr-sticker-num {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: -0.01em;
    font-size: 14px;
    background: linear-gradient(135deg, #ffd1ae, #ffb079, #f07a1a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.mr-sticker-mark {
    color: #ff7a2f;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
}
.mr-sticker-perf {
    width: 1px;
    height: 14px;
    background: rgba(255, 209, 174, 0.35);
}

.mr-sticker-1 {
    top: 14%;
    left: 4%;
    transform: rotate(-7deg) translate3d(0, calc(-30px + var(--mp) * 80px), 0);
}
.mr-sticker-2 {
    top: 22%;
    right: 6%;
    transform: rotate(6deg) translate3d(0, calc(-50px + var(--mp) * 110px), 0);
}
.mr-sticker-3 {
    bottom: 18%;
    left: 7%;
    transform: rotate(4deg) translate3d(0, calc(40px - var(--mp) * 110px), 0);
}
.mr-sticker-4 {
    bottom: 12%;
    right: 4%;
    transform: rotate(-5deg) translate3d(0, calc(60px - var(--mp) * 130px), 0);
}
/* Sticker décoratif Backstage : bas-gauche, légèrement penché, plus discret */
.mr-sticker-backstage {
    bottom: 5%;
    left: 5%;
    transform: rotate(-4deg) translate3d(0, calc(40px - var(--mp) * 90px), 0);
}

/* ====== Marquee : noms d'humoristes ====== */
.mr-marquee {
    position: relative;
    z-index: 2;
    margin: 40px 0 28px;
    padding: 18px 0;
    overflow: hidden;
    border-top: 1px solid rgba(255, 209, 174, 0.18);
    border-bottom: 1px solid rgba(255, 209, 174, 0.18);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.mr-marquee-track {
    display: flex;
    align-items: center;
    gap: 28px;
    width: max-content;
    animation: mr-marquee-scroll 38s linear infinite;
    will-change: transform;
}
.mr-marquee-item {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px;
    line-height: 1;
    letter-spacing: 0.005em;
    color: #fff5e8;
    white-space: nowrap;
    text-shadow: 0 0 18px rgba(255, 122, 47, 0.18);
}
.mr-marquee-item:nth-child(4n+2) {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    background: linear-gradient(135deg, #ffd1ae, #ffb079, #f07a1a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none;
}
.mr-marquee-sep {
    color: rgba(255, 122, 47, 0.55);
    font-size: 12px;
    line-height: 1;
}

@keyframes mr-marquee-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* ==========================================================================
   Masterclass + Rencontres — cartes visuelles avec image cover
   ========================================================================== */
.mr-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 60px;
}

.mr-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: var(--glass-bg);
    backdrop-filter: blur(11.5px);
    -webkit-backdrop-filter: blur(11.5px);
    border: 1px solid var(--orange-border);
    box-shadow:
        0 18px 56px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    transition:
        transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 0.45s ease,
        border-color 0.45s ease;
}
.mr-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ----- Variante featured (orange premium) ------------------------------- */
.mr-card-featured {
    background:
        linear-gradient(180deg, rgba(240, 122, 26, 0.10) 0%, rgba(170, 78, 0, 0.18) 100%),
        var(--glass-bg);
    border: 1px solid rgba(240, 122, 26, 0.45);
    box-shadow:
        0 18px 56px rgba(0, 0, 0, 0.55),
        0 0 48px rgba(240, 122, 26, 0.18),
        inset 0 1px 0 rgba(240, 122, 26, 0.10);
}
.mr-card-featured:hover {
    border-color: var(--orange);
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.65),
        0 0 64px rgba(240, 122, 26, 0.32);
}

/* ----- Variante rencontre (champagne/vert sobre) ----------------------- */
.mr-card-rencontre {
    background:
        linear-gradient(180deg, rgba(120, 200, 150, 0.05) 0%, rgba(40, 30, 18, 0.20) 100%),
        var(--glass-bg);
    border: 1px solid rgba(120, 200, 150, 0.22);
}
.mr-card-rencontre:hover {
    border-color: rgba(120, 200, 150, 0.50);
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.65),
        0 0 48px rgba(120, 200, 150, 0.16);
}

/* ----- Animations scroll-driven : 3D tilt des cartes ------------------- */
.section-masterclass .mr-grid {
    perspective: 1600px;
}
.section-masterclass .mr-card {
    transform-style: preserve-3d;
    /* La featured tilte un peu vers la droite, la rencontre vers la gauche.
       L'amplitude varie de 4° à 0° au passage central. */
    will-change: transform;
    /* Transitions courtes pour ne pas "trainer" pendant le scroll, mais
       garder un retour smooth quand on quitte le hover. */
    transition: transform 0.18s linear, box-shadow 0.45s ease, border-color 0.45s ease;
}
.section-masterclass .mr-card-featured {
    transform:
        translate3d(0, calc((var(--mp) - 0.5) * -20px), 0)
        rotateY(calc((0.5 - var(--mp)) * 8deg))
        rotateX(calc((var(--mp) - 0.5) * 3deg));
}
.section-masterclass .mr-card-rencontre {
    transform:
        translate3d(0, calc((var(--mp) - 0.5) * 20px), 0)
        rotateY(calc((var(--mp) - 0.5) * 8deg))
        rotateX(calc((0.5 - var(--mp)) * 3deg));
}
.section-masterclass .mr-card:hover {
    transform: translate3d(0, -8px, 30px);
}

/* ----- Image cover ----------------------------------------------------- */
.mr-media {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mr-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mr-card:hover .mr-media img {
    transform: scale(1.06);
}

/* Ken-Burns zoom + Y parallax piloté par --mp (overrides hover transition) */
.section-masterclass .mr-media img {
    transform:
        scale(calc(1.04 + var(--mp) * 0.10))
        translate3d(0, calc((var(--mp) - 0.5) * 24px), 0);
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: transform;
}
.section-masterclass .mr-card:hover .mr-media img {
    transform:
        scale(calc(1.10 + var(--mp) * 0.10))
        translate3d(0, calc((var(--mp) - 0.5) * 24px), 0);
}

/* ----- Rideau cinéma : 2 panneaux qui s'écartent au scroll ----------- */
.mr-media-curtain {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 52%;
    background: linear-gradient(180deg, #1a0a00 0%, #0e0805 100%);
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.4);
    will-change: transform;
    /* Petit lissage en plus du contrôle scroll-driven --mp-in : même si la
       valeur saute (ex : ré-injection SPA, resize), le rideau s'ouvre/ferme
       en douceur plutôt qu'instantanément. */
    transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mr-media-curtain::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(180deg,
        rgba(255, 209, 174, 0.0) 0%,
        rgba(255, 209, 174, 0.45) 50%,
        rgba(255, 209, 174, 0.0) 100%);
    box-shadow: 0 0 18px rgba(255, 122, 47, 0.4);
}
.mr-media-curtain-l {
    left: 0;
    transform: translate3d(calc(var(--mp-in) * -100%), 0, 0);
}
.mr-media-curtain-l::before {
    right: 0;
}
.mr-media-curtain-r {
    right: 0;
    transform: translate3d(calc(var(--mp-in) * 100%), 0, 0);
}
.mr-media-curtain-r::before {
    left: 0;
}
/* Au survol de la carte, on garantit l'ouverture complète des rideaux,
   indépendamment de la progression scroll : la photo se révèle entièrement. */
.mr-card:hover .mr-media-curtain-l {
    transform: translate3d(-100%, 0, 0);
}
.mr-card:hover .mr-media-curtain-r {
    transform: translate3d(100%, 0, 0);
}
.mr-media-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(10, 10, 15, 0) 35%, rgba(10, 10, 15, 0.68) 100%),
        linear-gradient(180deg, rgba(10, 10, 15, 0.20) 0%, rgba(10, 10, 15, 0) 40%);
    pointer-events: none;
}
.mr-card-featured .mr-media-overlay {
    background:
        linear-gradient(180deg, rgba(40, 14, 0, 0) 35%, rgba(20, 8, 0, 0.78) 100%),
        linear-gradient(180deg, rgba(240, 122, 26, 0.06) 0%, rgba(0, 0, 0, 0) 35%);
}

/* Petit tampon "Confidentiel..." en haut à gauche de l'image */
.mr-media-stamp {
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 7px 14px;
    border-radius: 100px;
    background: rgba(20, 12, 4, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--cream);
    z-index: 2;
}
.mr-media-stamp-free {
    border-color: rgba(120, 200, 150, 0.30);
    color: #b8e8c8;
}

/* Pill posée sur l'image (en bas à gauche) */
.mr-pill-on-media {
    position: absolute !important;
    bottom: 18px;
    left: 18px;
    margin: 0 !important;
    z-index: 2;
}

/* Pills (génériques + free) */
.mr-pill {
    align-self: flex-start;
    padding: 8px 18px;
    border-radius: 100px;
    background: var(--orange);
    color: #1a0a00;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(240, 122, 26, 0.45);
}
.mr-pill-free {
    background: rgba(120, 220, 160, 0.18);
    color: #7adca0;
    border: 1px solid rgba(120, 220, 160, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* ----- Body --------------------------------------------------------------- */
.mr-body {
    padding: 24px 30px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.mr-card h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: 1.2px;
    color: var(--cream);
    margin: 0 0 10px;
}
.mr-card p {
    font-size: 13.6px;
    line-height: 1.6;
    color: var(--gray-text);
    margin: 0 0 16px;
}
.mr-card p strong {
    color: var(--cream);
    font-weight: 600;
}
.mr-card-featured .mr-card p strong,
.mr-card-featured p strong {
    color: var(--orange);
}

/* ----- Liste avec icônes -------------------------------------------------- */
.mr-list {
    list-style: none;
    padding: 0;
    margin: auto 0 0;
    display: grid;
    gap: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 16px;
}
.mr-list li {
    position: relative;
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    font-family: 'Inter', sans-serif;
    font-size: 13.6px;
    line-height: 1.45;
    color: var(--gray-text);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.mr-list li:last-child { border-bottom: 0; }
.mr-list li::before { content: none; }
.mr-list li strong {
    color: var(--cream);
    font-weight: 600;
}
.mr-card-featured .mr-list li strong {
    color: var(--orange);
}
.mr-list-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(240, 122, 26, 0.10);
    border: 1px solid rgba(240, 122, 26, 0.22);
    color: var(--orange);
}
.mr-list-icon svg { width: 15px; height: 15px; }
.mr-card-rencontre .mr-list-icon {
    background: rgba(120, 200, 150, 0.10);
    border-color: rgba(120, 200, 150, 0.28);
    color: #8be0a4;
}

/* ─── Wrapper dynamique : laisse la grille gérer la disposition ─── */
[data-modules-spotlight] {
    display: contents;
}

/* ─── Calendrier des prochaines dates dans la card ─── */
.mr-sessions {
    margin: auto 0 14px;
    padding: 12px 14px 11px;
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%),
        rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.mr-sessions.is-compact {
    padding: 10px 12px 9px;
}
.mr-card-featured .mr-sessions {
    background:
        linear-gradient(180deg, rgba(240, 122, 26, 0.08) 0%, rgba(240, 122, 26, 0.02) 100%),
        rgba(0, 0, 0, 0.22);
    border-color: rgba(240, 122, 26, 0.28);
}
.mr-card-rencontre .mr-sessions {
    background:
        linear-gradient(180deg, rgba(120, 200, 150, 0.06) 0%, rgba(120, 200, 150, 0.01) 100%),
        rgba(0, 0, 0, 0.22);
    border-color: rgba(120, 200, 150, 0.22);
}
.mr-sessions-head {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 9px;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--cream);
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.mr-sessions.is-compact .mr-sessions-head {
    margin-bottom: 6px;
}

/* Compteur "1/3" — affiché à côté du label "Dates à venir" */
.mr-sessions-count {
    margin-left: 6px;
    padding-left: 7px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 500;
    color: var(--gray-text);
    letter-spacing: 0.4px;
    text-transform: none;
}
.mr-sessions-count strong {
    color: var(--cream);
    font-weight: 700;
}
.mr-card-featured .mr-sessions-count strong {
    color: var(--orange);
}
.mr-card-rencontre .mr-sessions-count strong {
    color: #8be0a4;
}
.mr-card-featured .mr-sessions-head {
    color: var(--orange);
}
.mr-card-rencontre .mr-sessions-head {
    color: #8be0a4;
}
.mr-sessions-head svg {
    flex-shrink: 0;
}
.mr-sessions-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Conteneur ligne : [arrow] [date+lieu] [arrow] */
.mr-sessions-body {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
}

/* Flèches de navigation */
.mr-sessions-arrow {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--cream);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.mr-sessions-arrow:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}
.mr-sessions-arrow:active {
    transform: scale(0.92);
}
.mr-sessions-arrow:focus-visible {
    outline: 2px solid var(--orange, #f07a1a);
    outline-offset: 2px;
}
.mr-card-featured .mr-sessions-arrow {
    background: rgba(240, 122, 26, 0.10);
    border-color: rgba(240, 122, 26, 0.32);
    color: var(--orange);
}
.mr-card-featured .mr-sessions-arrow:hover {
    background: rgba(240, 122, 26, 0.20);
    border-color: rgba(240, 122, 26, 0.55);
}
.mr-card-rencontre .mr-sessions-arrow {
    background: rgba(120, 200, 150, 0.10);
    border-color: rgba(120, 200, 150, 0.32);
    color: #8be0a4;
}
.mr-card-rencontre .mr-sessions-arrow:hover {
    background: rgba(120, 200, 150, 0.20);
    border-color: rgba(120, 200, 150, 0.55);
}

.mr-session {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.2s ease, border-color 0.2s ease;
}
.mr-session:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}
/* Variante "solo" : la date affichée seule au centre, dense */
.mr-session-solo {
    flex: 1;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    transition: opacity 0.14s ease, transform 0.14s ease;
}
.mr-session-solo:hover {
    background: transparent;
    border: 0;
}
/* Animation slide gauche/droite — sortie + entrée */
.mr-session-solo.is-leaving-left {
    opacity: 0;
    transform: translateX(14px);
}
.mr-session-solo.is-leaving-right {
    opacity: 0;
    transform: translateX(-14px);
}
.mr-session-solo.is-entering-left {
    opacity: 0;
    transform: translateX(-14px);
}
.mr-session-solo.is-entering-right {
    opacity: 0;
    transform: translateX(14px);
}
@media (prefers-reduced-motion: reduce) {
    .mr-session-solo,
    .mr-session-solo.is-leaving-left,
    .mr-session-solo.is-leaving-right,
    .mr-session-solo.is-entering-left,
    .mr-session-solo.is-entering-right {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}
.mr-session-date {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cream);
    letter-spacing: 0.2px;
    text-transform: capitalize;
}
.mr-session-loc {
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    color: var(--gray-text);
    opacity: 0.8;
    text-align: right;
}

/* ─── Méta-chips (durée, places, tarif) ─── */
.mr-meta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.mr-meta-chips span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    color: var(--gray-text);
    letter-spacing: 0.2px;
}
.mr-meta-chips span strong {
    color: var(--cream);
    font-weight: 600;
}
.mr-meta-chips .mr-price strong {
    color: var(--orange);
}
.mr-meta-chips .mr-price.is-free strong {
    color: #8be0a4;
}

/* ─── CTA dans la card d'accueil ─── */
.mr-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 24px;
    border-radius: 100px;
    background: linear-gradient(135deg, var(--orange, #f07a1a), #ff9a3c);
    color: #0a0400;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(240, 122, 26, 0.32);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mr-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(240, 122, 26, 0.45);
}
.mr-card-rencontre .mr-cta {
    background: linear-gradient(135deg, #6dc5b0, #8be0a4);
    box-shadow: 0 8px 24px rgba(120, 200, 150, 0.30);
}
.mr-card-rencontre .mr-cta:hover {
    box-shadow: 0 14px 36px rgba(120, 200, 150, 0.45);
}

/* ══════════════════════════════════════════════════════════════════════════
   AGENDA — carrousel horizontal des prochains événements
   (masterclasses + rencontres, triés par date)
   ══════════════════════════════════════════════════════════════════════════ */

.mr-agenda {
    position: relative;
    margin: 56px auto 0;
    max-width: 1280px;
    width: 100%;
}

.mr-agenda-empty {
    text-align: center;
    color: rgba(245, 232, 218, 0.65);
    font-family: 'Inter', sans-serif;
    font-style: italic;
    padding: 60px 20px;
}

/* Header : label + compteur + flèches */
.mr-agenda-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 0 8px 22px;
    border-bottom: 1px solid rgba(255, 175, 110, 0.18);
    margin-bottom: 28px;
}
.mr-agenda-meta {
    display: flex;
    align-items: baseline;
    gap: 18px;
    flex-wrap: wrap;
}
.mr-agenda-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #ffb079;
}
.mr-agenda-label svg { flex-shrink: 0; }
.mr-agenda-count {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    letter-spacing: 0.12em;
    color: rgba(245, 232, 218, 0.7);
}
.mr-agenda-count strong {
    color: #f5e8da;
    font-weight: 700;
    font-size: 14px;
}

/* Flèches de navigation */
.mr-agenda-arrows {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
.mr-agenda-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 175, 110, 0.45);
    background: rgba(255, 122, 47, 0.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffb079;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        opacity 0.25s ease;
}
.mr-agenda-arrow:hover {
    background: rgba(255, 122, 47, 0.25);
    border-color: rgba(255, 175, 110, 0.8);
    transform: translateY(-2px);
}
.mr-agenda-arrow:disabled {
    opacity: 0.32;
    cursor: not-allowed;
    transform: none;
}

/* Track : carrousel scrollable horizontalement, scroll-snap par card */
.mr-agenda-viewport {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}
.mr-agenda-track {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.mr-agenda-track::-webkit-scrollbar { display: none; }

/* ─── Card événement ─── */
.mr-event {
    position: relative;
    flex: 0 0 calc((100% - 22px) / 2); /* 2 cards visibles desktop pour laisser respirer le titre */
    min-width: 0;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 175, 110, 0.22);
    border-radius: 16px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
        transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}
.mr-event:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 175, 110, 0.55);
    box-shadow: 0 24px 50px -20px rgba(255, 122, 47, 0.35);
}
.mr-event.is-free:hover {
    border-color: rgba(139, 224, 164, 0.55);
    box-shadow: 0 24px 50px -20px rgba(120, 200, 150, 0.35);
}

.mr-event-media {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #0a0604;
}
.mr-event-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mr-event:hover .mr-event-media img { transform: scale(1.05); }

.mr-event-pill {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff7a2f 0%, #ffb079 100%);
    color: #1a0a00;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow: 0 6px 18px -6px rgba(255, 122, 47, 0.6);
}
.mr-event-pill.is-free {
    background: linear-gradient(135deg, #6dc5b0 0%, #8be0a4 100%);
    color: #04120a;
    box-shadow: 0 6px 18px -6px rgba(120, 200, 150, 0.6);
}

.mr-event-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 22px 24px;
}

.mr-event-date {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffb079;
}
.mr-event.is-free .mr-event-date { color: #8be0a4; }
.mr-event-date strong { font-weight: 700; }
.mr-event-time {
    color: rgba(245, 232, 218, 0.7);
    letter-spacing: 0.1em;
    text-transform: none;
    font-weight: 500;
}

.mr-event-title {
    margin: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(22px, 1.9vw, 30px);
    line-height: 1.05;
    letter-spacing: 0.005em;
    color: #f5e8da;
}

.mr-event-loc {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    color: rgba(245, 232, 218, 0.65);
}
.mr-event-loc svg { flex-shrink: 0; opacity: 0.7; }

.mr-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.mr-event-chip {
    display: inline-block;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid rgba(255, 175, 110, 0.28);
    background: rgba(255, 255, 255, 0.025);
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(245, 232, 218, 0.85);
}
.mr-event-chip.is-price {
    border-color: rgba(255, 175, 110, 0.5);
    color: #ffd0a8;
}
.mr-event-chip.is-free {
    border-color: rgba(139, 224, 164, 0.55);
    background: rgba(120, 200, 150, 0.12);
    color: #c8f1d4;
}

.mr-event-cta {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 999px;
    border: 1px solid rgba(255, 175, 110, 0.55);
    background: rgba(255, 122, 47, 0.10);
    color: #ffb079;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}
.mr-event-cta:hover {
    background: rgba(255, 122, 47, 0.25);
    border-color: rgba(255, 175, 110, 0.85);
    color: #fff5e8;
    transform: translateY(-2px);
}
.mr-event.is-free .mr-event-cta {
    border-color: rgba(139, 224, 164, 0.55);
    background: rgba(120, 200, 150, 0.10);
    color: #8be0a4;
}
.mr-event.is-free .mr-event-cta:hover {
    background: rgba(120, 200, 150, 0.25);
    border-color: rgba(139, 224, 164, 0.85);
    color: #e5f9eb;
}

/* Responsive : 2 cards visibles sur tablette, 1 sur mobile */
@media (max-width: 960px) {
    .mr-event {
        flex-basis: calc((100% - 22px) / 2);
    }
    .mr-agenda-head { padding: 0 4px 18px; }
}
@media (max-width: 640px) {
    .mr-event {
        flex-basis: 86%;
    }
    .mr-agenda-track { gap: 14px; }
    .mr-event { flex-basis: calc(100% - 40px); }
    .mr-event-title { font-size: 22px; }
    .mr-agenda-head { flex-direction: column; align-items: stretch; gap: 14px; }
    .mr-agenda-arrows { justify-content: flex-end; }
}


@media (max-width: 980px) {
    .mr-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .mr-body { padding: 28px 24px 30px; }
    .mr-card h3 { font-size: 26px; }
    /* Sur mobile : on désactive le tilt 3D + on cache les stickers latéraux */
    .section-masterclass .mr-card-featured,
    .section-masterclass .mr-card-rencontre {
        transform: none !important;
    }
    .mr-sticker-1,
    .mr-sticker-3 {
        display: none;
    }
    .mr-sticker-2,
    .mr-sticker-4 {
        font-size: 9.5px;
        padding: 6px 10px;
    }
    .mr-marquee-item { font-size: 22px; }
    .mr-stage-beam { opacity: 0.4 !important; }
}

@media (prefers-reduced-motion: reduce) {
    .mr-stage-beam,
    .mr-sticker,
    .mr-marquee-track,
    .section-masterclass .mr-card-featured,
    .section-masterclass .mr-card-rencontre,
    .section-masterclass .mr-media img,
    .mr-media-curtain {
        transform: none !important;
        animation: none !important;
    }
    .mr-media-curtain { display: none; }
}

/* ==========================================================================
   ATELIER BANNER — identité champagne / salon d'écriture privé
   Layout miroir du spectacle banner (image à gauche), Playfair italic editorial
   ========================================================================== */
.atelier-banner {
    position: relative;
    z-index: 1;
    border-radius: 24px;
    background:
        radial-gradient(ellipse 600px 400px at 6% 12%, rgba(232, 201, 138, 0.1) 0%, transparent 65%),
        radial-gradient(ellipse 500px 380px at 96% 88%, rgba(232, 201, 138, 0.07) 0%, transparent 65%),
        var(--ink-bg);
    backdrop-filter: blur(11.5px);
    -webkit-backdrop-filter: blur(11.5px);
    border: 1px solid var(--champagne-border);
    box-shadow:
        0 14px 48px rgba(8, 6, 2, 0.7),
        inset 0 1px 0 rgba(232, 201, 138, 0.08);
    padding: 80px 70px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 460px minmax(0, 1fr); /* image à gauche, texte à droite */
    gap: 64px;
    align-items: center;
    margin-top: 60px;
}

.atelier-banner::before {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    top: -160px;
    right: -140px;
    background: radial-gradient(circle, rgba(232, 201, 138, 0.13) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.atelier-banner::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    bottom: -120px;
    left: -100px;
    background: radial-gradient(circle, rgba(232, 201, 138, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Image — portrait avec coins ornementaux et tampon éditorial */
.atelier-image {
    position: relative;
    z-index: 1;
    border-radius: 6px;
    overflow: visible;
    box-shadow:
        0 30px 80px -20px rgba(232, 201, 138, 0.18),
        0 12px 40px rgba(0, 0, 0, 0.55);
}

.atelier-image img {
    display: block;
    width: 100%;
    height: 580px;
    object-fit: cover;
    object-position: center 35%;
    border-radius: 6px;
    border: 1px solid var(--champagne-border);
    filter: saturate(0.92) contrast(1.05);
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.4s ease;
}

.atelier-image:hover img {
    transform: scale(1.03);
    filter: saturate(1) contrast(1.08);
}

/* Coins dorés ornementaux (top-left + bottom-right) */
.atelier-image-corner {
    position: absolute;
    width: 38px;
    height: 38px;
    pointer-events: none;
    z-index: 2;
}

.atelier-image-corner-tl {
    top: -10px;
    left: -10px;
    border-top: 2px solid var(--champagne);
    border-left: 2px solid var(--champagne);
    box-shadow: -1px -1px 12px rgba(232, 201, 138, 0.35);
}

.atelier-image-corner-br {
    bottom: -10px;
    right: -10px;
    border-bottom: 2px solid var(--champagne);
    border-right: 2px solid var(--champagne);
    box-shadow: 1px 1px 12px rgba(232, 201, 138, 0.35);
}

.atelier-image-chip {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border-radius: 100px;
    background: rgba(8, 6, 2, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--champagne-border);
    color: var(--champagne);
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.atelier-image-stamp {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    z-index: 3;
    padding: 7px 16px;
    background: rgba(14, 10, 6, 0.96);
    border: 1px dashed var(--champagne);
    color: var(--champagne-bright);
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 11.5px;
    letter-spacing: 1.5px;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.atelier-text {
    position: relative;
    z-index: 1;
}

/* Kicker — ligne champagne au lieu d'orange */
.atelier-kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 32px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3.4px;
    text-transform: uppercase;
    color: var(--champagne);
}

.atelier-kicker-line {
    width: 48px;
    height: 1px;
    background: var(--champagne);
    box-shadow: 0 0 12px rgba(232, 201, 138, 0.55);
}

/* Titre monumental — stat "08" + suite éditoriale en Playfair italic */
.atelier-title {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    color: var(--cream);
    margin: 0 0 30px;
    line-height: 1;
    letter-spacing: 1.2px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 26px;
}

.atelier-stat {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    padding-right: 26px;
    border-right: 2px solid var(--champagne-border);
}

.atelier-stat-num {
    font-size: clamp(96px, 11.5vw, 148px);
    line-height: 0.85;
    color: var(--champagne);
    text-shadow:
        0 0 36px rgba(232, 201, 138, 0.5),
        0 0 80px rgba(232, 201, 138, 0.22);
    letter-spacing: -3px;
    background: linear-gradient(180deg, var(--champagne-bright) 0%, var(--champagne) 50%, var(--champagne-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.atelier-stat-unit {
    font-size: clamp(14px, 1.4vw, 18px);
    color: var(--cream);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    line-height: 1.2;
    opacity: 0.88;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

/* "pour faire éclore [italic] ce qu'il y a de [italic] meilleur [italic] en vous" */
.atelier-title-rest {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.18;
    letter-spacing: 0;
    color: var(--cream);
    flex: 1;
    min-width: 280px;
}

.atelier-title-rest em {
    font-style: italic;
    color: rgba(244, 240, 232, 0.78);
    font-weight: 400;
}

.atelier-title-rest .accent {
    font-style: italic;
    color: var(--champagne);
    text-shadow: 0 0 26px rgba(232, 201, 138, 0.45);
    font-weight: 600;
}

.atelier-desc {
    font-size: 16.2px;
    line-height: 1.78;
    color: var(--gray-text);
    margin: 0 0 36px;
    max-width: 620px;
}

.atelier-desc strong {
    color: var(--champagne-bright);
    font-weight: 600;
}

/* 3 piliers numérotés — éditorial, hairline en haut */
.atelier-pillars {
    list-style: none;
    margin: 0 0 40px;
    padding: 28px 0 0;
    border-top: 1px solid var(--champagne-border-soft);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.atelier-pillars-2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 36px;
}

.atelier-pillar {
    position: relative;
    padding-left: 0;
}

.atelier-pillar-num {
    display: block;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 1px;
    color: var(--champagne);
    margin-bottom: 8px;
    opacity: 0.9;
}

.atelier-pillar h6 {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 1.6px;
    color: var(--cream);
    margin: 0 0 10px;
    text-transform: uppercase;
}

.atelier-pillar p {
    font-size: 13.6px;
    line-height: 1.55;
    color: var(--gray-text);
    margin: 0;
}

/* CTA row — price tag champagne + bouton outline élégant */
.atelier-cta-row {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.atelier-price-tag {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    padding: 14px 22px;
    background: var(--champagne-soft);
    border: 1px solid var(--champagne-border);
    border-radius: 12px;
}

.atelier-price-tag strong {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 36px;
    line-height: 1;
    color: var(--champagne);
    letter-spacing: 1px;
    text-shadow: 0 0 20px rgba(232, 201, 138, 0.3);
}

.atelier-price-tag span {
    font-size: 12.8px;
    letter-spacing: 0.4px;
    color: var(--gray-text);
}

.atelier-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 30px;
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 13.2px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #1a1108;
    background: linear-gradient(135deg, var(--champagne-bright) 0%, var(--champagne) 50%, var(--champagne-deep) 100%);
    border: 1px solid rgba(244, 219, 162, 0.6);
    box-shadow:
        0 4px 14px rgba(232, 201, 138, 0.28),
        0 0 22px rgba(232, 201, 138, 0.32);
    transition: all 0.25s ease;
}

.atelier-cta:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 24px rgba(232, 201, 138, 0.4),
        0 0 32px rgba(232, 201, 138, 0.5);
}

@media (max-width: 1100px) {
    .atelier-banner {
        grid-template-columns: 380px minmax(0, 1fr);
        padding: 60px 48px;
        gap: 44px;
    }
    .atelier-image img { height: 500px; }
    .atelier-pillars { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 880px) {
    .atelier-banner {
        grid-template-columns: 1fr;
        padding: 48px 28px;
        gap: 40px;
    }
    .atelier-image img { height: 360px; }
    .atelier-stat { padding-right: 22px; }
}

@media (max-width: 560px) {
    .atelier-title { gap: 16px; }
    .atelier-stat {
        border-right: none;
        padding-right: 0;
    }
}

/* ==========================================================================
   TARIFS RECAP
   ========================================================================== */
.section-tarifs {
    position: relative;
    padding: 120px 0 140px;
    background: var(--section-bg-5);
    border-top: 1px solid var(--orange-border);
    overflow: hidden;
}
.section-tarifs::before,
.section-tarifs::after {
    content: "";
    position: absolute;
    pointer-events: none;
    aspect-ratio: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 0;
    transform: translate(-50%, -50%);
}
.section-tarifs::before {
    background-image: url('assets/figma/sec-ellipse-40.svg');
    width: 135%;
    left: -10%;
    top: 35%;
}
.section-tarifs::after {
    background-image: url('assets/figma/sec-ellipse-41.svg');
    width: 65%;
    left: -3%;
    top: 32%;
}

.tarifs-cards {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 80px;
    align-items: stretch;
}

.tarif-card {
    position: relative;
    padding: 60px 32px 32px;
    border-radius: 20px;
    background: var(--glass-bg);
    backdrop-filter: blur(11.5px);
    -webkit-backdrop-filter: blur(11.5px);
    border: 1px solid var(--orange-border);
    box-shadow: var(--glass-shadow);
    display: flex;
    flex-direction: column;
}

.tarif-card-featured {
    background: linear-gradient(180deg, rgba(240, 122, 26, 0.06) 0%, rgba(240, 122, 26, 0.84) 100%);
    border: 1px solid var(--orange);
    box-shadow: 0 0 42px rgba(240, 122, 26, 0.29);
}

.tarif-banner {
    position: absolute;
    top: -12px;
    left: 5%;
    right: 5%;
    height: 26px;
    border-radius: 100px;
    background: var(--orange-grad);
    color: var(--night);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 10.4px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.tarif-tag {
    margin: 0 0 24px;
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 18px;
    border-radius: 100px;
    font-size: 10.4px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.tarif-card h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: 2px;
    color: var(--cream);
    margin: 0 0 14px;
    text-align: center;
}

.tarif-price {
    text-align: center;
    margin-bottom: 18px;
}

.tarif-price strong {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 48px;
    color: var(--orange);
    line-height: 1;
}

.tarif-price small {
    display: block;
    margin-top: 8px;
    font-size: 13.6px;
    color: var(--gray-text);
}

.tarif-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    flex: 1;
}

.tarif-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    font-size: 14.4px;
    line-height: 1.55;
    color: var(--white);
    border-bottom: 1px solid var(--orange-border);
}

.tarif-list li:last-child {
    border-bottom: none;
}

.tarif-list li::before {
    content: "✓";
    color: var(--orange);
    font-weight: 700;
    font-size: 14.4px;
    flex-shrink: 0;
    margin-top: 2px;
}

.tarif-card-featured .tarif-list li {
    color: var(--white);
}

.tarif-card .btn {
    width: 100%;
    padding: 18px 24px;
}

@media (max-width: 980px) {
    .tarifs-cards {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   CONTACT + FOOTER
   ========================================================================== */
.section-contact {
    position: relative;
    padding: 100px 0 60px;
    background: var(--section-bg-6);
    border-top: 1px solid #221e2c;
    overflow: hidden;
}
.section-contact::before,
.section-contact::after {
    content: "";
    position: absolute;
    pointer-events: none;
    aspect-ratio: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 0;
    transform: translate(-50%, -50%);
}
.section-contact::before {
    background-image: url('assets/figma/sec-ellipse-36.svg');
    width: 120%;
    left: -8%;
    top: 50%;
}
.section-contact::after {
    background-image: url('assets/figma/sec-ellipse-37.svg');
    width: 58%;
    left: -2%;
    top: 50%;
}

.contact-card {
    position: relative;
    z-index: 1;
    padding: 50px 60px 60px;
    border-radius: 20px;
    background: var(--glass-bg);
    backdrop-filter: blur(11.5px);
    -webkit-backdrop-filter: blur(11.5px);
    border: 1px solid var(--orange-border);
    box-shadow: var(--glass-shadow);
    text-align: center;
    margin-bottom: 60px;
}

.contact-card .tag-pill {
    margin-bottom: 30px;
    background: var(--orange-grad);
}

.contact-card h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: clamp(2.4rem, 4.4vw, 56px);
    line-height: 1.1;
    letter-spacing: 2px;
    color: var(--cream);
    margin: 0 0 22px;
}

.contact-card p {
    font-size: 16.8px;
    line-height: 1.7;
    color: var(--gray-text);
    margin: 0 auto 32px;
    max-width: 800px;
}

.contact-card .btn {
    padding: 18px 50px;
}

.contact-card .by-tagline {
    margin-top: 32px;
    font-size: 15.2px;
    color: var(--gray-text);
}

.footer {
    position: relative;
    z-index: 1;
    text-align: center;
    padding-top: 40px;
}

.footer-logo img {
    height: 75px;
    margin: 0 auto 14px;
}

.footer-by {
    font-size: 12px;
    color: var(--gray-text);
    margin: 0 0 20px;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.footer-links a {
    font-size: 13.6px;
    color: var(--gray-text);
    transition: color 0.15s;
}

.footer-links a:hover {
    color: var(--cream);
}

.footer-links .footer-link-admin {
    margin-left: 8px;
    padding: 2px 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    font-size: 11.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(240, 122, 26, 0.7);
    opacity: 0.8;
    transition: all 0.2s ease;
}
.footer-links .footer-link-admin::before {
    content: "•";
    margin-right: 5px;
    color: rgba(240, 122, 26, 0.6);
}
.footer-links .footer-link-admin:hover {
    color: #fbb56a;
    border-color: rgba(240, 122, 26, 0.5);
    background: rgba(240, 122, 26, 0.08);
    opacity: 1;
}

.footer-copy {
    font-size: 12px;
    color: var(--gray-text);
}

@media (max-width: 980px) {
    .contact-card {
        padding: 40px 24px;
    }
}


/* Parcours grid — 3 colonnes, calé sur le .container (largeur standard) */
.parcours-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 56px;
    z-index: 2;
}

.parcours-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(28, 22, 18, 0.92) 0%, rgba(20, 16, 14, 0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.3s ease;
}

.parcours-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 122, 47, 0.45);
    box-shadow: 0 40px 90px -30px rgba(255, 122, 47, 0.35);
}

.parcours-card-featured {
    border-color: rgba(255, 122, 47, 0.55);
    box-shadow: 0 30px 60px -30px rgba(255, 122, 47, 0.4), 0 0 0 1px rgba(255, 122, 47, 0.18);
    background:
        radial-gradient(120% 60% at 50% -10%, rgba(255, 122, 47, 0.18) 0%, transparent 60%),
        linear-gradient(180deg, rgba(34, 22, 16, 0.96) 0%, rgba(20, 14, 12, 0.98) 100%);
}

.parcours-card-link {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    text-indent: -9999px;
    color: transparent;
    background: transparent;
}

.parcours-media {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 11;
    overflow: hidden;
}

.parcours-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    filter: saturate(1.05) contrast(1.02);
}

.parcours-card:hover .parcours-media img {
    transform: scale(1.05);
}

.parcours-media-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(20, 14, 12, 0) 35%, rgba(20, 14, 12, 0.85) 100%),
        linear-gradient(0deg, rgba(20, 14, 12, 0.15) 0%, rgba(20, 14, 12, 0) 60%);
    pointer-events: none;
}

.parcours-badge {
    position: absolute;
    left: 18px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cream);
    background: rgba(28, 22, 18, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.parcours-card-featured .parcours-badge {
    background: linear-gradient(120deg, #ff7a2f 0%, #ff9d5a 100%);
    color: #1a0e08;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 10px 30px -10px rgba(255, 122, 47, 0.6);
}

.parcours-ribbon {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cream);
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 122, 47, 0.55);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.parcours-ribbon-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff7a2f;
    box-shadow: 0 0 0 4px rgba(255, 122, 47, 0.25);
    animation: parcoursPulse 2s ease-in-out infinite;
}

@keyframes parcoursPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255, 122, 47, 0.25); }
    50%      { box-shadow: 0 0 0 8px rgba(255, 122, 47, 0); }
}

.parcours-body {
    position: relative;
    z-index: 1;
    padding: 32px 30px 34px;
    display: flex;
    flex-direction: column;
    flex: 1;
    color: var(--cream);
}

.parcours-title {
    font-family: var(--font-display, 'Playfair Display', serif);
    font-weight: 500;
    font-size: clamp(36px, 3.4vw, 46px);
    line-height: 1.02;
    letter-spacing: -0.01em;
    margin: 0 0 16px;
    color: var(--cream);
}

.parcours-title .accent {
    color: #ff7a2f;
    font-style: italic;
    font-weight: 500;
}

.parcours-card-featured .parcours-title .accent {
    color: #ffb27a;
}

.parcours-desc {
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(244, 234, 224, 0.78);
    margin: 0 0 22px;
}

.parcours-desc strong {
    color: var(--cream);
    font-weight: 600;
}

.parcours-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 0 0 22px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
}

.parcours-stats > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.parcours-stats dt {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 122, 47, 0.85);
}

.parcours-stats dd {
    margin: 0;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--cream);
}

.parcours-tags {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.parcours-tags li {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(244, 234, 224, 0.78);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
}

.parcours-tags li.is-strong {
    color: var(--cream);
    background: rgba(255, 122, 47, 0.12);
    border-color: rgba(255, 122, 47, 0.35);
}

.parcours-tags li.is-warn {
    color: #ffd9b8;
    background: rgba(255, 122, 47, 0.05);
    border-color: rgba(255, 122, 47, 0.22);
}

.parcours-tags li.is-soft {
    color: rgba(244, 234, 224, 0.55);
    background: rgba(255, 255, 255, 0.02);
    border-style: dashed;
}

.parcours-cta {
    position: relative;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    margin-top: auto;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--cream);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease, color 0.3s ease;
}

.parcours-cta::after {
    content: "→";
    transition: transform 0.3s ease;
}

.parcours-cta:hover {
    background: rgba(255, 122, 47, 0.16);
    border-color: rgba(255, 122, 47, 0.55);
    color: #ffd9b8;
}

.parcours-cta:hover::after {
    transform: translateX(4px);
}

.parcours-cta-primary {
    background: linear-gradient(120deg, #ff7a2f 0%, #ff9d5a 100%);
    border-color: transparent;
    color: #1a0e08;
    box-shadow: 0 16px 40px -14px rgba(255, 122, 47, 0.6);
}

.parcours-cta-primary:hover {
    background: linear-gradient(120deg, #ff8a44 0%, #ffb27a 100%);
    color: #1a0e08;
    transform: translateY(-1px);
    box-shadow: 0 22px 50px -14px rgba(255, 122, 47, 0.75);
}

.parcours-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    font-size: 12px;
    color: rgba(244, 234, 224, 0.65);
    line-height: 1.45;
}

.parcours-foot svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #ff7a2f;
}

.parcours-foot em {
    font-style: normal;
    color: var(--cream);
}

/* Bandeau Admissions */
.parcours-admission {
    position: relative;
    z-index: 2;
    margin-top: 40px;
    padding: 32px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(255, 122, 47, 0.18) 0%, transparent 65%),
        linear-gradient(120deg, rgba(28, 22, 18, 0.92) 0%, rgba(20, 16, 14, 0.96) 100%);
    border: 1px solid rgba(255, 122, 47, 0.32);
    border-radius: 24px;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.parcours-admission::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 122, 47, 0.22) 0%, transparent 65%);
    pointer-events: none;
}

.parcours-admission-text {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}

.parcours-admission-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ff9d5a;
    background: rgba(255, 122, 47, 0.12);
    border: 1px solid rgba(255, 122, 47, 0.4);
    border-radius: 999px;
}

.parcours-admission-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff7a2f;
    box-shadow: 0 0 0 4px rgba(255, 122, 47, 0.25);
}

.parcours-admission h4 {
    font-family: var(--font-display, 'Playfair Display', serif);
    font-weight: 500;
    font-size: clamp(26px, 2.6vw, 34px);
    line-height: 1.1;
    margin: 0 0 8px;
    color: var(--cream);
}

.parcours-admission p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(244, 234, 224, 0.7);
    max-width: 640px;
}

.parcours-admission-cta {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    padding: 16px 30px;
    font-size: 14px;
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 1100px) {
    .parcours-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 0 24px;
    }
    .parcours-media {
        aspect-ratio: 16 / 9;
    }
    .parcours-admission {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px;
    }
    .parcours-admission-cta {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .parcours-body {
        padding: 26px 22px 28px;
    }
    .parcours-stats {
        grid-template-columns: 1fr;
    }
    .parcours-ribbon {
        font-size: 10px;
        padding: 6px 10px;
    }
}

/* ============================================================
   AXES MATRIX — Tableau hybride :
   - Une colonne "rail" à gauche pour les noms d'axes (sans répétition)
   - 5 colonnes-cartes parcours (A · B · C · D · E)
   Les lignes de cellules sont alignées entre le rail et les cartes
   grâce à une hauteur fixe (--axe-row-h).
   ============================================================ */
.axes-matrix {
    --axe-row-h: 46px;
    --axe-head-h: 44px;
    --axe-gap: 8px;
    display: grid;
    grid-template-columns: minmax(170px, 1.2fr) repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
    margin-top: 96px;
    position: relative;
    z-index: 2;
    overflow: visible;
}

/* — Rail des axes (colonne 1) — */
.axes-rail {
    display: flex;
    flex-direction: column;
    gap: var(--axe-gap);
}

.axes-rail-head {
    height: var(--axe-head-h);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 122, 47, 0.7);
    border-bottom: 1px dashed rgba(255, 122, 47, 0.25);
}

.axes-rail-row {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--axe-row-h);
    padding: 0 6px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--cream, #fff5e8);
}

.axes-rail-num {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 122, 47, 0.12);
    border: 1px solid rgba(255, 122, 47, 0.28);
    font-family: var(--font-display, 'Playfair Display', serif);
    font-size: 13px;
    font-weight: 700;
    color: #ff9d5a;
}

.axes-rail .ecole-star {
    color: #ff7a2f;
    font-size: 11px;
    margin-left: 2px;
}

/* — Cartes parcours (colonnes 2 → 5) — */
.axes-matrix .axes-card {
    border-radius: 18px;
    overflow: visible;
    position: relative;
}

.axes-matrix .axes-media {
    height: var(--axe-head-h);
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(255, 122, 47, 0.18) 0%, transparent 60%),
        linear-gradient(160deg, rgba(38, 26, 20, 0.95) 0%, rgba(20, 14, 12, 0.98) 100%);
}

.axes-matrix .axes-card.parcours-card-featured .axes-media {
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(255, 122, 47, 0.4) 0%, transparent 60%),
        linear-gradient(160deg, rgba(54, 32, 18, 0.96) 0%, rgba(28, 18, 12, 0.98) 100%);
}

.axes-matrix .axes-letter {
    font-family: var(--font-display, 'Playfair Display', serif);
    font-size: clamp(48px, 5vw, 70px);
    font-weight: 500;
    color: rgba(255, 122, 47, 0.65);
    line-height: 1;
    letter-spacing: -0.02em;
    text-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}

.axes-matrix .axes-card.parcours-card-featured .axes-letter {
    color: rgba(255, 215, 180, 0.95);
}

.axes-matrix .axes-media .parcours-badge {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    font-size: 9.5px;
    letter-spacing: 0.14em;
    padding: 4px 10px;
}

.axes-matrix .axes-card .parcours-ribbon {
    position: absolute;
    top: -56px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    z-index: 10;
    gap: 5px;
    padding: 5px 12px;
    font-size: 9px;
    letter-spacing: 0.14em;
    white-space: nowrap;
    color: #2b1a06;
    background: linear-gradient(120deg, #f8e3a5 0%, #e8c87a 35%, #c9a04c 70%, #f4dba2 100%);
    border: 1px solid rgba(255, 235, 195, 0.7);
    border-radius: 999px;
    box-shadow:
        0 12px 24px -8px rgba(201, 160, 76, 0.6),
        0 2px 6px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 250, 230, 0.55);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-shadow: 0 1px 0 rgba(255, 250, 230, 0.45);
}

.axes-matrix .axes-card .parcours-ribbon .parcours-ribbon-dot {
    width: 5px;
    height: 5px;
    background: #4a2e08;
    box-shadow: 0 0 0 3px rgba(74, 46, 8, 0.18);
    animation: none;
}

.axes-cells {
    display: flex;
    flex-direction: column;
    gap: var(--axe-gap);
    padding: var(--axe-gap) 10px 14px;
}

.axe-cell {
    box-sizing: border-box;
    height: var(--axe-row-h);
    padding: 4px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    transition: transform 0.25s ease;
}

.axes-card.parcours-card-featured .axe-cell.ecole-cell-empty,
.axes-card.parcours-card-featured .axe-cell.ecole-cell-1,
.axes-card.parcours-card-featured .axe-cell.ecole-cell-2,
.axes-card.parcours-card-featured .axe-cell.ecole-cell-ref {
    background: rgba(255, 122, 47, 0.06);
    border-color: rgba(255, 122, 47, 0.18);
}

.axe-cell.ecole-cell-empty {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 240, 220, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.axe-cell.ecole-cell-1 {
    background: rgba(255, 215, 180, 0.1);
    color: #f0c79d;
    border: 1px solid rgba(255, 215, 180, 0.22);
}

.axe-cell.ecole-cell-2 {
    background: rgba(255, 156, 89, 0.16);
    color: #ffb380;
    border: 1px solid rgba(255, 156, 89, 0.3);
}

.axe-cell.ecole-cell-3 {
    background: linear-gradient(120deg, #ff7a2f 0%, #ff9d5a 100%);
    color: #1a0e08;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 6px 16px -6px rgba(255, 122, 47, 0.6);
}

.axe-cell.ecole-cell-ref {
    background: rgba(120, 200, 255, 0.1);
    color: #9ad3ff;
    border: 1px solid rgba(120, 200, 255, 0.24);
    font-family: var(--font-mono, ui-monospace, 'SF Mono', monospace);
    font-size: 10.5px;
    letter-spacing: 0.02em;
    line-height: 1;
    padding: 0;
    display: grid;
    place-items: center;
    place-content: center;
    white-space: nowrap;
}

.axes-card:hover .axe-cell {
    transform: translateY(-1px);
}

/* — Légende — */
.axes-legend {
    margin: 24px auto 0;
    max-width: 880px;
    text-align: center;
    color: rgba(255, 240, 220, 0.68);
    font-size: 13px;
    line-height: 1.6;
}

.axes-legend strong {
    color: var(--cream, #fff5e8);
    font-weight: 700;
}

/* — Responsive — */
@media (max-width: 1100px) {
    .axes-matrix {
        --axe-row-h: 42px;
        --axe-head-h: 40px;
        grid-template-columns: minmax(150px, 1.1fr) repeat(4, minmax(0, 1fr));
        gap: 10px;
    }
    .axes-rail-row {
        font-size: 12.5px;
    }
    .axes-matrix .axes-letter {
        font-size: 44px;
    }
    .axes-matrix .axes-media .parcours-badge {
        font-size: 8.5px;
        padding: 4px 8px;
    }
}

@media (max-width: 760px) {
    .axes-matrix {
        --axe-row-h: 40px;
        --axe-head-h: 30px;
        grid-template-columns: minmax(120px, 1fr) repeat(4, minmax(38px, 1fr));
        gap: 6px;
    }
    .axes-rail-row {
        font-size: 11.5px;
        padding: 0 2px;
        gap: 6px;
    }
    .axes-rail-num {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }
    .axes-matrix .axes-letter {
        font-size: 32px;
    }
    .axes-matrix .axes-media .parcours-badge {
        display: none;
    }
    .axes-matrix .axes-card .parcours-ribbon {
        display: none;
    }
    .axe-cell {
        font-size: 10.5px;
        border-radius: 8px;
    }
    .axe-cell.ecole-cell-ref {
        font-size: 9.5px;
        padding: 0 4px;
        line-height: 1;
        white-space: normal;
        overflow: visible;
    }
    .axes-cells {
        padding: 6px 4px 10px;
    }
}

/* ============================================================
   KEVIN BUBBLE — Composant unifié (hero + section formations)
   ============================================================ */
.kevin-bubble {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    max-width: 480px;
}

.kevin-bubble-photo {
    flex-shrink: 0;
    width: 110px;
    aspect-ratio: 4 / 5;
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        0 14px 30px -10px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 122, 47, 0.22);
    transform: rotate(-2.5deg);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.kevin-bubble:hover .kevin-bubble-photo {
    transform: rotate(-1deg) translateY(-2px);
}

.kevin-bubble-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    display: block;
    filter: saturate(1.05) contrast(1.02);
}

.kevin-bubble-text {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: 16px 20px;
    background:
        linear-gradient(160deg, rgba(255, 122, 47, 0.12) 0%, rgba(20, 12, 6, 0.55) 100%),
        rgba(14, 8, 5, 0.55);
    color: #f0ece4;
    border-radius: 18px;
    border: 1px solid rgba(255, 122, 47, 0.32);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 24px 48px -16px rgba(0, 0, 0, 0.65),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.kevin-bubble:hover .kevin-bubble-text {
    transform: translateY(-2px);
}

.kevin-bubble-tail {
    position: absolute;
    top: 30%;
    left: -8px;
    width: 18px;
    height: 18px;
    background:
        linear-gradient(135deg, rgba(255, 122, 47, 0.18) 0%, rgba(20, 12, 6, 0.55) 100%),
        rgba(14, 8, 5, 0.55);
    border-left: 1px solid rgba(255, 122, 47, 0.32);
    border-bottom: 1px solid rgba(255, 122, 47, 0.32);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transform: rotate(45deg);
    border-radius: 4px 0 0 0;
}

.kevin-bubble-tail::before {
    content: "";
    position: absolute;
    top: -16px;
    left: -8px;
    width: 9px;
    height: 9px;
    background: rgba(14, 8, 5, 0.85);
    border: 1px solid rgba(255, 122, 47, 0.32);
    border-radius: 50%;
    transform: rotate(-45deg);
}

.kevin-bubble-text > header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 8px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(240, 236, 228, 0.92);
}

.kevin-bubble-text > header strong {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #f0ece4;
}

.kevin-bubble-text > header span {
    color: #ffb079;
    font-weight: 600;
}

.kevin-bubble-text p {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(240, 236, 228, 0.92);
    letter-spacing: -0.005em;
}

.kevin-bubble-text p em {
    font-style: italic;
    background: linear-gradient(110deg, #ffb079 0%, #f07a1a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 500;
}

.kevin-bubble-text p strong {
    font-style: normal;
    font-weight: 600;
    color: #fff5e8;
    background: linear-gradient(180deg, transparent 65%, rgba(255, 122, 47, 0.45) 65%);
    padding: 0 2px;
}

/* Variante "hero" — empilement vertical (photo en médaillon au-dessus
   de la bulle) pour ne pas chevaucher l'homme de dos en photo. */
.kevin-bubble-hero {
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    max-width: 440px;
}

.kevin-bubble-hero .kevin-bubble-text p {
    font-size: 17.5px;
    line-height: 1.6;
}

@media (max-width: 560px) {
    .kevin-bubble-hero .kevin-bubble-text p {
        font-size: 15.5px;
        line-height: 1.55;
    }
}

.kevin-bubble-hero .kevin-bubble-photo {
    width: 64px;
    height: 64px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    margin-right: 20px;
    margin-bottom: -16px;
    transform: rotate(4deg);
    z-index: 2;
    box-shadow:
        0 10px 24px -6px rgba(0, 0, 0, 0.55),
        0 0 0 3px rgba(20, 14, 12, 0.92),
        0 0 0 4px rgba(255, 122, 47, 0.45);
}

.kevin-bubble-hero:hover .kevin-bubble-photo {
    transform: rotate(2deg) translateY(-2px);
}

.kevin-bubble-hero .kevin-bubble-text {
    width: 100%;
    padding: 24px 18px 14px;
    border-radius: 18px;
}

.kevin-bubble-hero .kevin-bubble-tail {
    display: none;
}

.kevin-bubble-hero .kevin-bubble-text > header {
    margin-top: 4px;
}

/* Variante "section formations" — légèrement plus grande, décalée à gauche */
.kevin-bubble-section {
    margin: 40px 0 0 4%;
    max-width: 720px;
    align-self: flex-start;
}

.kevin-bubble-section .kevin-bubble-photo {
    width: 110px;
    height: 110px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    box-shadow:
        0 14px 30px -10px rgba(0, 0, 0, 0.45),
        0 0 0 3px rgba(20, 14, 12, 0.92),
        0 0 0 4px rgba(255, 122, 47, 0.45);
}

.kevin-bubble-section .kevin-bubble-photo img {
    object-position: center 22%;
}

.kevin-bubble-section .kevin-bubble-text {
    padding: 18px 24px;
    border-radius: 22px;
}

.kevin-bubble-section .kevin-bubble-text > header {
    font-size: 11px;
}

.kevin-bubble-section .kevin-bubble-text p {
    font-size: 14.5px;
    line-height: 1.55;
}

/* Responsive */
@media (max-width: 720px) {
    .kevin-bubble-section {
        margin-left: 0;
    }
}

@media (max-width: 560px) {
    .kevin-bubble {
        gap: 10px;
    }
    .kevin-bubble-photo {
        width: 90px;
    }
    .kevin-bubble-section .kevin-bubble-photo {
        width: 90px;
        height: 90px;
    }
    .kevin-bubble-text {
        padding: 12px 14px;
    }
    .kevin-bubble-text p {
        font-size: 12.5px;
    }
    .kevin-bubble-section .kevin-bubble-text p {
        font-size: 13.5px;
    }
}

/* ============================================================
   HARMONISATION — sections intro / parcours / masterclass / contact
   converties au design ecole-section (titres + bg + glow unifiés).
   On neutralise les ::before/::after legacy + padding spécifiques.
   ============================================================ */
.section-intro.ecole-section,
.section-formations.ecole-section,
.section-masterclass.ecole-section,
.section-contact.ecole-section {
    border-top: 1px solid var(--orange-border-2, rgba(255, 122, 47, 0.18));
    border-bottom: none;
}

.section-intro.ecole-section::before,
.section-intro.ecole-section::after,
.section-formations.ecole-section::before,
.section-formations.ecole-section::after,
.section-masterclass.ecole-section::before,
.section-masterclass.ecole-section::after,
.section-contact.ecole-section::before,
.section-contact.ecole-section::after {
    content: none;
}

/* — INTRO : grille de 4 cartes alignée sous le header centré */
.section-intro .intro-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    perspective: 1400px;
    position: relative;
    z-index: 1;
}

/* Cartes intro plus compactes : on enlève la grosse marge haute et le
   min-height forcé pour que la hauteur suive le contenu réel. */
.section-intro .intro-card {
    padding: 56px 24px 26px;
    min-height: 0;
}

.section-intro .intro-card h3 {
    margin: 0 0 14px;
    padding-bottom: 14px;
}

@media (max-width: 1100px) {
    .section-intro .intro-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .section-intro .intro-cards-grid {
        grid-template-columns: 1fr;
    }
    .section-intro .intro-card {
        padding: 50px 22px 24px;
    }
}

/* — FORMATIONS : on aligne la bulle Kevin sous le titre central, et la
   grille en pleine largeur sous, sans le décalage hérité de l'ancien
   .section-kicker. */
.section-formations.ecole-section .kevin-bubble-section {
    margin: 0 auto 36px;
    max-width: 720px;
}

@media (max-width: 760px) {
    .section-formations.ecole-section .kevin-bubble-section {
        margin: 0 0 28px;
    }
}

/* — CONTACT : carte flat (juste CTA + tagline, le titre est dans le header) */
.contact-card-flat {
    position: relative;
    z-index: 2;
    text-align: center;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.contact-card-flat .btn {
    padding: 18px 50px;
}

.contact-card-flat .by-tagline {
    margin-top: 28px;
    font-size: 15.2px;
    color: var(--gray-text);
}

.home-footer-section .footer {
    margin-top: 0;
}

/* — COCON & ATELIER : header standard ecole-section + palette scopée */
.section-cocon .ecole-section-header,
.section-atelier .ecole-section-header {
    max-width: 760px;
    margin: 0 auto 64px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.section-cocon .ecole-pill-tag {
    background: rgba(150, 180, 230, 0.08);
    border-color: rgba(150, 180, 230, 0.28);
    color: #b9c8e6;
}

.section-cocon .ecole-section-title .accent {
    background: linear-gradient(135deg, #c8d8f2 0%, #6a82ad 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.section-atelier .ecole-pill-tag {
    background: rgba(232, 201, 138, 0.08);
    border-color: rgba(232, 201, 138, 0.28);
    color: #e8c98a;
}

.section-atelier .ecole-section-title .accent {
    background: linear-gradient(135deg, #f4dba2 0%, #8e6c2c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

@media (max-width: 768px) {
    .section-cocon .ecole-section-header,
    .section-atelier .ecole-section-header {
        margin-bottom: 44px;
    }
}

/* ============================================================
   CURTAIN CINEMA — Reveal multi-calques cinématique
   --cp (curtain progress) : 0 quand le bas de la section
   touche le bas du viewport, 1 quand le haut est sorti par
   le haut du viewport. Calculé par index.html (rAF + scroll).
   Chaque calque a une vitesse / amplitude différente pour
   créer une vraie profondeur et un effet "pinned cinema".
   ============================================================ */
.curtain-cinema {
    position: relative;
    /* 400vh total = 100vh overlap-in (prev slides up) + 100vh plateau image
       + 100vh overlap-out (next slides over) + 100vh sticky pin height       Pin range = 300vh (cf. JS calcul de --cp) */
    height: 400vh;
    width: 100%;
    /* Le curtain "remonte" sous la slide précédente sur ses 100 derniers vh,
       et la slide suivante "remonte" sur les 100 derniers vh du curtain.       → Effet : la slide précédente glisse, dévoile l'image, puis la slide
       suivante glisse par-dessus pour la recouvrir. */
    margin-top: -100vh;
    margin-bottom: 0;
    background: #060200;
    z-index: 0;
    --cp: 0;
    /* progress already clamped 0→1 by JS */
    --cp-c: var(--cp);
    /* normalised "around 0.5" : -1 → 0 → +1 */
    --cp-mid: calc((var(--cp) - 0.5) * 2);
    /* "plateau curve" : peak 1 au milieu, 0 aux extrêmes */
    --cp-peak: calc(4 * var(--cp) * (1 - var(--cp)));
}

/* La slide JUSTE AVANT un curtain doit peindre au-dessus pendant l'overlap-in
   (sinon l'image apparaîtrait d'un coup au lieu d'être dévoilée par le glissement). */
*:has(+ .curtain-cinema) {
    position: relative;
    z-index: 2;
}

/* La slide JUSTE APRÈS un curtain remonte de 100vh pour glisser par-dessus
   l'image fixée et la masquer progressivement. */
.curtain-cinema + * {
    position: relative;
    z-index: 2;
    margin-top: -100vh;
}

.curtain-cinema-pin {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    isolation: isolate;
}

/* Layer 1 — Backdrop image très flouté, fade out en fin de scroll */
.curtain-cinema-back {
    position: absolute;
    inset: -8%;
    background-size: cover;
    background-position: center;
    filter: blur(40px) saturate(1.1) brightness(0.55);
    transform: scale(calc(1.25 - 0.05 * var(--cp)));
    opacity: calc(0.85 - 0.55 * var(--cp));
    will-change: transform, opacity;
    z-index: 0;
}

/* Layer 2 — Image principale, parallax zoom + Y */
.curtain-cinema-main {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
}
.curtain-cinema-main img {
    position: absolute;
    inset: -6%;
    width: 112%;
    height: 112%;
    object-fit: cover;
    transform:
        scale(calc(1.18 - 0.18 * var(--cp)))
        translate3d(0, calc(var(--cp-mid) * 4%), 0);
    will-change: transform;
}

/* Layer 3 — Vignette (haut + bas) + halo orange */
.curtain-cinema-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background:
        linear-gradient(180deg,
            rgba(6, 2, 0, 0.7) 0%,
            rgba(6, 2, 0, 0.05) 22%,
            rgba(6, 2, 0, 0) 50%,
            rgba(6, 2, 0, 0.25) 75%,
            rgba(6, 2, 0, 0.85) 100%),
        radial-gradient(ellipse 75% 55% at 50% 105%,
            rgba(255, 122, 47, 0.28) 0%,
            transparent 65%);
}

/* Layer 4 — Grain pellicule */
.curtain-cinema-grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
    opacity: 0.06;
    mix-blend-mode: overlay;
}

/* Layer 5 — Frame brackets aux 4 coins */
.curtain-cinema-frame {
    position: absolute;
    inset: 36px;
    pointer-events: none;
    z-index: 4;
    opacity: calc(var(--cp-peak) * 0.9);
    transform: scale(calc(0.96 + 0.04 * var(--cp-peak)));
    transition: none;
}
.curtain-cinema-frame::before,
.curtain-cinema-frame::after,
.curtain-cinema-frame > span {
    position: absolute;
    width: 36px;
    height: 36px;
    border: 1.5px solid rgba(255, 209, 174, 0.55);
    content: "";
}
.curtain-cinema-frame::before {
    top: 0; left: 0;
    border-right: none; border-bottom: none;
}
.curtain-cinema-frame::after {
    top: 0; right: 0;
    border-left: none; border-bottom: none;
}
.curtain-cinema-frame > span.bl {
    bottom: 0; left: 0;
    border-right: none; border-top: none;
}
.curtain-cinema-frame > span.br {
    bottom: 0; right: 0;
    border-left: none; border-top: none;
}

/* Layer 6 — Chapter meta (top-left vertical) */
.curtain-cinema-meta {
    position: absolute;
    top: 60px;
    left: 60px;
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 5;
    color: rgba(255, 245, 232, 0.75);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    transform: translate3d(calc(-30px + var(--cp-peak) * 30px), 0, 0);
    opacity: var(--cp-peak);
}
.curtain-cinema-meta-num {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 38px;
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: none;
    background: linear-gradient(110deg, #ffd1ae 0%, #ffb079 50%, #f07a1a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.curtain-cinema-meta-line {
    width: 38px;
    height: 1px;
    background: rgba(255, 209, 174, 0.4);
}

/* Layer 7 — Scroll hint (bottom right) */
.curtain-cinema-hint {
    position: absolute;
    bottom: 60px;
    right: 60px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 245, 232, 0.7);
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    opacity: var(--cp-peak);
}
.curtain-cinema-hint-bar {
    width: 56px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 122, 47, 0.6), rgba(255, 209, 174, 0));
}

/* Layer 8 — Content (titre + caption + tag) */
.curtain-cinema-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 6;
    padding: 0 40px;
    text-align: center;
    transform: translate3d(0, calc(-50% + var(--cp-mid) * -28px), 0);
}
.curtain-cinema-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    margin-bottom: 24px;
    border-radius: 999px;
    border: 1px solid rgba(255, 122, 47, 0.45);
    background: rgba(14, 8, 5, 0.55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #ffd1ae;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transform: translate3d(0, calc(40px - var(--cp-peak) * 40px), 0);
    opacity: var(--cp-peak);
}
.curtain-cinema-title {
    margin: 0 auto;
    max-width: 1080px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(40px, 6.4vw, 96px);
    line-height: 0.94;
    letter-spacing: -0.005em;
    color: #fff5e8;
    text-wrap: balance;
    filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.6));
    transform: scale(calc(0.92 + 0.10 * var(--cp-peak)));
    opacity: calc(0.15 + 0.85 * var(--cp-peak));
}
.curtain-cinema-title em {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    background: linear-gradient(110deg, #ffd1ae 0%, #ffb079 45%, #f07a1a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.curtain-cinema-caption {
    margin: 18px auto 0;
    max-width: 620px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    letter-spacing: 0.02em;
    color: rgba(255, 245, 232, 0.78);
    transform: translate3d(0, calc(30px - var(--cp-peak) * 30px), 0);
    opacity: var(--cp-peak);
}

/* Layer 9 — Top progress bar (orange) */
.curtain-cinema-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    width: calc(var(--cp-c) * 100%);
    background: linear-gradient(90deg, transparent, #ffb079 30%, #ff7a2f 100%);
    z-index: 7;
    box-shadow: 0 0 18px rgba(255, 122, 47, 0.45);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .curtain-cinema-back,
    .curtain-cinema-main img,
    .curtain-cinema-content,
    .curtain-cinema-title,
    .curtain-cinema-tag,
    .curtain-cinema-caption,
    .curtain-cinema-meta,
    .curtain-cinema-frame {
        transform: none !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* Garde 400vh de hauteur pour conserver les 3 phases (reveal/plateau/cover).
       Sur mobile, on aura un scroll plus long mais l'effet cinéma reste lisible. */
    .curtain-cinema-frame {
        inset: 18px;
    }
    .curtain-cinema-frame::before,
    .curtain-cinema-frame::after,
    .curtain-cinema-frame > span {
        width: 22px;
        height: 22px;
    }
    .curtain-cinema-meta {
        top: 28px;
        left: 28px;
        font-size: 10px;
    }
    .curtain-cinema-meta-num {
        font-size: 28px;
    }
    .curtain-cinema-meta-line {
        width: 22px;
    }
    .curtain-cinema-hint {
        bottom: 28px;
        right: 28px;
        font-size: 9.5px;
    }
    .curtain-cinema-hint-bar {
        width: 32px;
    }
    .curtain-cinema-content {
        padding: 0 22px;
    }
    .curtain-cinema-caption {
        font-size: 13px;
    }
}

/* ============================================================
   HOME FINALE — Section contact cinématique (style fm-finale).
   Aligne le finale de l'accueil sur les pages formation :
   image plein écran assombrie + halo orange, pill "Inscriptions
   ouvertes", titre Bebas + accent Playfair italique orange,
   double CTA (primary + ghost), signature Playfair en dessous.
   ============================================================ */
.home-finale {
    position: relative;
    padding: 120px 56px;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.home-finale-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}
.home-finale-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    filter: brightness(0.55) saturate(1.15);
}
.home-finale-bg-grade {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 50%,
            rgba(15, 5, 0, 0.5) 0%,
            rgba(15, 5, 0, 0.88) 70%,
            rgba(8, 2, 0, 0.98) 100%),
        linear-gradient(135deg,
            rgba(255, 122, 47, 0.18) 0%,
            transparent 40%,
            rgba(8, 2, 0, 0.6) 100%);
}
.home-finale-bg-grain {
    position: absolute;
    inset: 0;
    opacity: 0.16;
    mix-blend-mode: overlay;
    background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1px);
    background-size: 3px 3px;
    pointer-events: none;
}

.home-finale-content {
    max-width: 820px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.home-finale-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 122, 47, 0.45);
    background: rgba(255, 122, 47, 0.10);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #ffb079;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.home-finale-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff7a2f;
    box-shadow: 0 0 10px rgba(255, 122, 47, 0.7);
}

.home-finale-title {
    margin: 28px 0 24px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(50px, 7.5vw, 120px);
    line-height: 0.9;
    letter-spacing: 0;
    color: #f0ece4;
    text-shadow: 0 4px 40px rgba(0, 0, 0, 0.55);
    text-wrap: balance;
}
.home-finale-title em {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    background: linear-gradient(110deg, #ffd1ae 0%, #ffb079 45%, #f07a1a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.home-finale-deck {
    margin: 0 auto 36px;
    max-width: 580px;
    font-family: 'Inter', sans-serif;
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.75;
    color: rgba(240, 236, 228, 0.78);
}
.home-finale-deck strong {
    color: #f0ece4;
    font-weight: 600;
}

.home-finale-cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.home-finale-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 32px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    cursor: pointer;
    border: 1px solid transparent;
}
.home-finale-cta svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}
.home-finale-cta-primary {
    background: linear-gradient(135deg, #ff7a2f 0%, #ff9447 50%, #ffb079 100%);
    color: #1a0d04;
    box-shadow: 0 18px 38px rgba(255, 122, 47, 0.35), 0 0 0 1px rgba(255, 176, 121, 0.4) inset;
}
.home-finale-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 48px rgba(255, 122, 47, 0.5), 0 0 0 1px rgba(255, 176, 121, 0.55) inset;
}
.home-finale-cta-primary:hover svg {
    transform: translateX(4px);
}
.home-finale-cta-ghost {
    background: rgba(15, 5, 0, 0.4);
    color: #f0ece4;
    border-color: rgba(240, 236, 228, 0.32);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.home-finale-cta-ghost:hover {
    background: rgba(255, 122, 47, 0.12);
    border-color: rgba(255, 122, 47, 0.55);
    color: #ffd1ae;
}

.home-finale-foot {
    margin: 36px 0 0;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 14px;
    color: rgba(240, 236, 228, 0.55);
    letter-spacing: 0.04em;
}

@media (max-width: 720px) {
    .home-finale {
        padding: 120px 24px;
    }
    .home-finale-cta-row {
        flex-direction: column;
        align-items: stretch;
    }
    .home-finale-cta {
        justify-content: center;
    }
}

/* Footer dans une section dédiée, fond ink-2 plus clair pour rythme. */
.home-footer-section {
    position: relative;
    padding: 80px 0 60px;
    background: #1a0f08;
    border-top: 1px solid rgba(255, 122, 47, 0.12);
}

/* ============================================================
   PARCOURS STACK CINEMA — 4 slides empilées qui s'envolent
   vers la caméra (zoom-forward + blur + Y) au scroll, avec
   letterbox cinéma qui s'ouvre à l'entrée et se ferme à la sortie.

   Section 400vh totale, pin sticky de 100vh, --pcp (0→1) pilote
   tout via la boucle rAF de index.html.
   ============================================================ */
.parcours-cinema {
    position: relative;
    height: 400vh;
    background: #060200;
    --pcp: 0;
    /* "lb" : letterbox progress (1 = ouvert grand). Animée en JS */
    --pcp-lb: 0;
}

.parcours-cinema-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse 90% 60% at 50% 100%, rgba(255, 122, 47, 0.10) 0%, transparent 65%),
        radial-gradient(ellipse 60% 70% at 100% 0%, rgba(255, 138, 58, 0.06) 0%, transparent 55%),
        linear-gradient(180deg, #0e0805 0%, #060200 100%);
}

/* ====== LETTERBOX (rideau cinéma haut + bas) ====== */
.parcours-letterbox {
    position: absolute;
    left: 0;
    right: 0;
    background: #050200;
    z-index: 30;
    pointer-events: none;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
    will-change: height;
}
.parcours-letterbox-top {
    top: 0;
    /* lb=0 (entrée/sortie) : 50vh — couvre la moitié haute
       lb=1 (cinéma actif) : 4vh — fine bande noire en haut */
    height: calc(50vh - var(--pcp-lb) * 46vh);
}
.parcours-letterbox-bottom {
    bottom: 0;
    height: calc(50vh - var(--pcp-lb) * 46vh);
}
/* Filet champagne qui souligne le bord intérieur des bandes noires */
.parcours-letterbox::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 209, 174, 0.45) 50%,
        transparent 100%);
    opacity: var(--pcp-lb);
}
.parcours-letterbox-top::after { bottom: 0; }
.parcours-letterbox-bottom::after { top: 0; }

/* ====== Halo + grain ambiance ====== */
.parcours-cinema-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(ellipse 70% 40% at 50% 50%,
            rgba(255, 122, 47, 0.06) 0%,
            transparent 60%);
}
.parcours-cinema-grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
    opacity: 0.05;
    mix-blend-mode: overlay;
}

/* ====== STACK : 4 slides empilées en absolu ====== */
.parcours-stack {
    position: absolute;
    inset: 0;
    z-index: 5;
}

.parcours-stack-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 88px;
    /* Variables réglées par JS via --ps-scale, --ps-y, --ps-blur, --ps-opacity.
       Past slide → scale > 1 + blur + Y up + opacity 0 (zoome vers la caméra)
       Future slide → scale < 1 + Y down + opacity 0 (attend derrière) */
    transform:
        scale(var(--ps-scale, 1))
        translate3d(0, var(--ps-y, 0px), 0);
    opacity: var(--ps-opacity, 1);
    filter: blur(var(--ps-blur, 0px));
    will-change: transform, opacity, filter;
    /* z-index décroissant : 1ère slide au-dessus → elle "passe par-dessus"
       en s'envolant et révèle la 2ème en-dessous. */
}
.parcours-stack-slide:nth-child(1) { z-index: 4; }
.parcours-stack-slide:nth-child(2) { z-index: 3; }
.parcours-stack-slide:nth-child(3) { z-index: 2; }
.parcours-stack-slide:nth-child(4) { z-index: 1; }

/* ====== GRID INTERNE (layout des slides) ====== */
.parcours-stack-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 64px;
    width: 100%;
    max-width: 1320px;
}
.is-intro .parcours-stack-grid {
    grid-template-columns: 1.1fr 1fr;
}

/* ===== Slide 01 — Intro ===== */
.parcours-stack-title {
    margin: 16px 0 28px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(54px, 6.6vw, 110px);
    line-height: 0.92;
    letter-spacing: -0.005em;
    color: #fff5e8;
    text-wrap: balance;
}
.parcours-stack-title em {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    background: linear-gradient(110deg, #ffd1ae 0%, #ffb079 45%, #f07a1a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.is-intro-title {
    font-size: clamp(60px, 7.5vw, 130px);
}

.parcours-stack-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 122, 47, 0.45);
    background: rgba(255, 122, 47, 0.10);
    color: #ffb079;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.parcours-stack-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff7a2f;
    box-shadow: 0 0 10px rgba(255, 122, 47, 0.7);
}

.parcours-stack-trio {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.parcours-stack-trio li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 12px;
    border-radius: 12px;
    background: rgba(14, 8, 5, 0.55);
    border: 1px solid rgba(255, 209, 174, 0.22);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: rgba(255, 245, 232, 0.85);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.parcours-stack-trio li span {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 18px;
    background: linear-gradient(135deg, #ffd1ae, #ffb079, #f07a1a);
    color: #1a0d04;
    font-weight: 400;
}

/* ===== Kevin Razi card (slide 1) ===== */
.parcours-stack-quote {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 28px;
    align-items: center;
}
.parcours-stack-quote-photo {
    position: relative;
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 122, 47, 0.18) inset;
}
.parcours-stack-quote-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    filter: brightness(0.92) saturate(1.08);
}
.parcours-stack-quote-stamp {
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(14, 8, 5, 0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #ffd1ae;
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 209, 174, 0.4);
}
.parcours-stack-quote-body {
    color: #fff5e8;
    font-family: 'Inter', sans-serif;
}
.parcours-stack-quote-body header {
    margin-bottom: 14px;
}
.parcours-stack-quote-body header strong {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 1;
    letter-spacing: 0.005em;
    color: #fff5e8;
}
.parcours-stack-quote-body header span {
    display: block;
    margin-top: 4px;
    color: #ffb079;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.parcours-stack-quote-body p {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.65;
    color: rgba(255, 245, 232, 0.85);
}
.parcours-stack-quote-body p em {
    color: #ffd1ae;
}
.parcours-stack-quote-body p strong {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    color: #fff5e8;
    text-decoration: underline;
    text-decoration-color: rgba(255, 122, 47, 0.5);
    text-underline-offset: 4px;
}

/* ===== Slides 02-04 — Formation (image + text) ===== */
.parcours-stack-letter {
    position: absolute;
    top: 4%;
    right: 5%;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(280px, 36vw, 540px);
    line-height: 0.85;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, rgba(255, 209, 174, 0.18) 0%, rgba(255, 122, 47, 0.08) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    pointer-events: none;
    z-index: 0;
}

.parcours-stack-figure {
    position: relative;
    margin: 0;
    height: 70vh;
    max-height: 620px;
    border-radius: 22px;
    overflow: hidden;
    box-shadow:
        0 32px 84px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 122, 47, 0.18) inset;
    z-index: 1;
}
.parcours-stack-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    transform: scale(1.04);
    filter: brightness(0.85) saturate(1.08);
}
.parcours-stack-figure-grade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 35%, rgba(6, 2, 0, 0.55) 100%),
        linear-gradient(135deg, rgba(255, 122, 47, 0.10) 0%, transparent 45%);
    pointer-events: none;
}
.parcours-stack-figure-stamp {
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(14, 8, 5, 0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #ffd1ae;
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 209, 174, 0.32);
}
.parcours-stack-figure-ribbon {
    position: absolute;
    bottom: 18px;
    left: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff7a2f 0%, #ff9447 50%, #ffb079 100%);
    color: #1a0d04;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    box-shadow: 0 12px 28px rgba(255, 122, 47, 0.35);
}
.parcours-stack-figure-ribbon .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1a0d04;
}
.parcours-stack-frame {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 1.5px solid rgba(255, 209, 174, 0.55);
    pointer-events: none;
}
.parcours-stack-frame.frame-tl { top: 16px; left: 16px; border-right: none; border-bottom: none; }
.parcours-stack-frame.frame-br { bottom: 16px; right: 16px; border-left: none; border-top: none; }

/* ===== Texte des slides formation ===== */
.parcours-stack-text {
    position: relative;
    z-index: 1;
    color: #fff5e8;
    max-width: 540px;
}
.parcours-stack-deck {
    margin: 0 0 26px;
    font-family: 'Inter', sans-serif;
    font-size: clamp(15px, 1.18vw, 17px);
    line-height: 1.65;
    color: rgba(255, 245, 232, 0.78);
}
.parcours-stack-deck strong {
    color: #fff5e8;
    font-weight: 600;
}

.parcours-stack-stats {
    margin: 0 0 22px;
    padding: 18px 22px;
    border-radius: 16px;
    background: rgba(14, 8, 5, 0.55);
    border: 1px solid rgba(255, 209, 174, 0.18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px 14px;
}
.parcours-stack-stats > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.parcours-stack-stats dt {
    font-family: 'Inter', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #ffb079;
}
.parcours-stack-stats dd {
    margin: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    line-height: 1.05;
    letter-spacing: 0.005em;
    color: #fff5e8;
}

.parcours-stack-tags {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}
.parcours-stack-tags li {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 245, 232, 0.18);
    background: rgba(255, 245, 232, 0.04);
    color: rgba(255, 245, 232, 0.82);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
}
.parcours-stack-tags li.is-soft {
    color: rgba(255, 245, 232, 0.55);
}
.parcours-stack-tags li.is-warn {
    border-color: rgba(255, 122, 47, 0.45);
    background: rgba(255, 122, 47, 0.10);
    color: #ffb079;
}
.parcours-stack-tags li.is-strong {
    border-color: rgba(255, 209, 174, 0.55);
    background: rgba(255, 209, 174, 0.10);
    color: #ffd1ae;
    font-weight: 600;
}

.parcours-stack-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 999px;
    background: rgba(255, 122, 47, 0.10);
    border: 1px solid rgba(255, 122, 47, 0.45);
    color: #ffd1ae;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.parcours-stack-cta svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}
.parcours-stack-cta:hover {
    transform: translateY(-2px);
    background: rgba(255, 122, 47, 0.18);
    box-shadow: 0 14px 30px rgba(255, 122, 47, 0.25);
}
.parcours-stack-cta:hover svg {
    transform: translateX(4px);
}
.parcours-stack-cta.is-primary {
    background: linear-gradient(135deg, #ff7a2f 0%, #ff9447 50%, #ffb079 100%);
    color: #1a0d04;
    border: none;
    box-shadow: 0 18px 38px rgba(255, 122, 47, 0.35), 0 0 0 1px rgba(255, 176, 121, 0.4) inset;
    padding: 16px 26px;
    font-size: 15px;
}
.parcours-stack-cta.is-primary:hover {
    box-shadow: 0 22px 48px rgba(255, 122, 47, 0.5), 0 0 0 1px rgba(255, 176, 121, 0.55) inset;
}

.parcours-stack-foot {
    margin: 14px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(240, 236, 228, 0.62);
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    letter-spacing: 0.02em;
}
.parcours-stack-foot svg {
    width: 14px;
    height: 14px;
    color: #ffb079;
}
.parcours-stack-foot em {
    font-style: italic;
    color: #ffd1ae;
}

/* ====== PROGRESS UI (en bas-centre) ====== */
.parcours-cinema-progress {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 18px;
    z-index: 40;
    color: #fff5e8;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.parcours-cinema-progress-num {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 24px;
    line-height: 1;
    text-transform: none;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #ffd1ae, #ffb079, #f07a1a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.parcours-cinema-progress-dots {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
    align-items: center;
}
.parcours-cinema-progress-dots li {
    width: 28px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 245, 232, 0.14);
    overflow: hidden;
    position: relative;
}
.parcours-cinema-progress-dots li span {
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #ffb079, #ff7a2f);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
    box-shadow: 0 0 12px rgba(255, 122, 47, 0.5);
}
.parcours-cinema-progress-dots li.is-done span { transform: scaleX(1); }
.parcours-cinema-progress-dots li.is-active span { transform: scaleX(1); }
.parcours-cinema-progress-total {
    color: rgba(255, 245, 232, 0.55);
}

/* ====== RESPONSIVE ====== */
@media (max-width: 1100px) {
    .parcours-stack-slide {
        padding: 70px 36px;
    }
    .parcours-stack-grid {
        grid-template-columns: 1fr !important;
        gap: 28px;
    }
    .parcours-stack-figure {
        height: 36vh;
        max-height: 320px;
        order: 2;
    }
    .parcours-stack-text {
        order: 1;
    }
    .parcours-stack-letter {
        font-size: clamp(180px, 24vw, 320px);
        top: 2%;
        right: 3%;
    }
    .parcours-stack-quote {
        grid-template-columns: 100px 1fr;
        gap: 18px;
    }
}

/* Mobile : on désactive le pin, stack vertical classique */
@media (max-width: 768px) {
    .parcours-cinema {
        height: auto;
    }
    .parcours-cinema-pin {
        position: relative;
        top: auto;
        height: auto;
    }
    .parcours-letterbox { display: none; }
    .parcours-cinema-progress { display: none; }
    .parcours-stack {
        position: relative;
        inset: auto;
    }
    .parcours-stack-slide {
        position: relative;
        inset: auto;
        min-height: 90vh;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        padding: 70px 24px;
    }
    .parcours-stack-letter {
        font-size: 160px;
        top: 4%;
    }
    .parcours-stack-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .parcours-stack-slide {
        transform: none !important;
        filter: none !important;
    }
    .parcours-letterbox {
        height: 4vh !important;
    }
}

/* ============================================================
   AXES SLIDE — Variantes : tableau de profondeur (slide 06) et
   finale (slide 07 · « Renforcez vos compétences »). Ces deux
   slides s'intègrent au track horizontal d'axes-cinema pour
   garder un flow continu vers la droite (au lieu de remonter
   en vertical entre des sections).
   ============================================================ */

/* ===== Slide 06 — Tableau de profondeur (matrice 5×5) ===== */
.axes-slide.is-tableau {
    grid-template-columns: 1fr;
    padding: 70px 60px 90px;
}
.axes-tableau-wrap {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 26px;
    width: 100%;
    height: 100%;
    max-width: 1400px;
    margin: 0 auto;
    align-content: start;
}
.axes-tableau-head {
    color: #fff5e8;
}
.axes-tableau-title {
    margin: 14px 0 8px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(40px, 4.4vw, 64px);
    line-height: 0.96;
    letter-spacing: -0.005em;
    color: #fff5e8;
}
.axes-tableau-title em {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    background: linear-gradient(110deg, #ffd1ae 0%, #ffb079 45%, #f07a1a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.axes-tableau-deck {
    margin: 0;
    max-width: 880px;
    font-family: 'Inter', sans-serif;
    font-size: clamp(13px, 1vw, 14.5px);
    line-height: 1.6;
    color: rgba(255, 245, 232, 0.7);
}
.axes-tableau-deck strong { color: #ffd1ae; font-weight: 600; }

/* ===== Matrix grid : 1 rail (5 axes) + 5 colonnes parcours ===== */
.axes-slide.is-tableau .axes-matrix {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) repeat(5, minmax(170px, 1fr));
    gap: 10px;
    padding: 22px;
    border-radius: 18px;
    background: rgba(14, 8, 5, 0.62);
    border: 1px solid rgba(255, 209, 174, 0.15);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45);
}
.axes-slide.is-tableau .axes-rail {
    display: grid;
    grid-template-rows: auto repeat(5, 1fr);
    gap: 10px;
}
.axes-slide.is-tableau .axes-rail-head {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 245, 232, 0.45);
    padding: 8px 4px;
    border-bottom: 1px solid rgba(255, 245, 232, 0.06);
}
.axes-slide.is-tableau .axes-rail-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 6px;
    color: #fff5e8;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.005em;
    border-bottom: 1px solid rgba(255, 245, 232, 0.04);
}
.axes-slide.is-tableau .axes-rail-row:last-child { border-bottom: none; }
.axes-slide.is-tableau .axes-rail-num {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(255, 122, 47, 0.10);
    border: 1px solid rgba(255, 122, 47, 0.32);
    color: #ffb079;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 14px;
    font-weight: 400;
}
.axes-slide.is-tableau .ecole-star { color: #ffb079; margin-left: 4px; }

/* ===== Colonne parcours (A/B/C/D/E) ===== */
.axes-slide.is-tableau .axes-mat-col {
    display: grid;
    grid-template-rows: auto repeat(5, 1fr);
    gap: 10px;
    padding: 14px 12px;
    border-radius: 14px;
    background: rgba(255, 245, 232, 0.025);
    border: 1px solid rgba(255, 245, 232, 0.08);
}
.axes-slide.is-tableau .axes-mat-col.is-featured {
    background: linear-gradient(180deg, rgba(255, 122, 47, 0.10) 0%, rgba(255, 122, 47, 0.04) 100%);
    border-color: rgba(255, 122, 47, 0.4);
    box-shadow: 0 16px 36px rgba(255, 122, 47, 0.15);
}
.axes-slide.is-tableau .axes-mat-col-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 0 12px;
    border-bottom: 1px solid rgba(255, 245, 232, 0.08);
}
.axes-slide.is-tableau .axes-mat-letter {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, #ffd1ae, #ffb079, #f07a1a);
    color: #1a0d04;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    line-height: 1;
}
.axes-slide.is-tableau .is-featured .axes-mat-letter {
    box-shadow: 0 0 0 2px rgba(255, 209, 174, 0.4), 0 8px 20px rgba(255, 122, 47, 0.4);
}
.axes-slide.is-tableau .axes-mat-tag {
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 209, 174, 0.85);
    text-align: center;
}
.axes-slide.is-tableau .is-featured .axes-mat-tag { color: #ffd1ae; }
.axes-slide.is-tableau .axes-mat-cells {
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    gap: 10px;
}
.axes-slide.is-tableau .axe-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 6px;
    border-radius: 8px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.02em;
    color: rgba(255, 245, 232, 0.8);
    background: rgba(255, 245, 232, 0.04);
    border: 1px solid rgba(255, 245, 232, 0.06);
}
.axes-slide.is-tableau .ecole-cell-empty {
    color: rgba(255, 245, 232, 0.3);
    font-size: 18px;
}
.axes-slide.is-tableau .ecole-cell-1 {
    background: rgba(255, 122, 47, 0.08);
    border-color: rgba(255, 122, 47, 0.25);
    color: #ffb079;
}
.axes-slide.is-tableau .ecole-cell-2 {
    background: rgba(255, 122, 47, 0.16);
    border-color: rgba(255, 122, 47, 0.45);
    color: #ffd1ae;
    font-weight: 500;
}
.axes-slide.is-tableau .ecole-cell-3 {
    background: linear-gradient(135deg, rgba(255, 122, 47, 0.32), rgba(255, 138, 58, 0.18));
    border-color: rgba(255, 209, 174, 0.65);
    color: #fff5e8;
    box-shadow: 0 6px 16px rgba(255, 122, 47, 0.25), inset 0 0 0 1px rgba(255, 209, 174, 0.2);
}
.axes-slide.is-tableau .ecole-cell-ref {
    background: rgba(255, 122, 47, 0.08);
    border-color: rgba(255, 122, 47, 0.32);
    color: #ffb079;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 8px 6px;
}

/* ===== Slide 07 — Finale « Renforcez vos compétences » ===== */
.axes-slide.is-finale {
    grid-template-columns: 1fr;
    padding: 0;
    overflow: hidden;
    border-radius: 0;
}
.axes-finale-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.axes-finale-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    /* Blur fort quand la slide arrive (depuis la droite), net une fois centrée */
    filter: blur(calc((1 - var(--prox, 1)) * 22px)) brightness(0.55) saturate(1.1);
    transform: scale(calc(1.04 + (1 - var(--prox, 1)) * 0.05));
    will-change: filter, transform;
}
.axes-finale-grade {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 80% at 50% 50%, transparent 30%, rgba(6, 2, 0, 0.55) 100%),
        linear-gradient(180deg, rgba(6, 2, 0, 0.5) 0%, transparent 35%, transparent 65%, rgba(6, 2, 0, 0.65) 100%);
}
.axes-finale-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 60px;
    color: #fff5e8;
}
.axes-finale-title {
    margin: 22px 0 22px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(60px, 7.4vw, 130px);
    line-height: 0.92;
    letter-spacing: -0.005em;
    color: #fff5e8;
    text-wrap: balance;
    filter: drop-shadow(0 18px 50px rgba(0, 0, 0, 0.55));
}
.axes-finale-title em {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    background: linear-gradient(110deg, #ffd1ae 0%, #ffb079 45%, #f07a1a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.axes-finale-deck {
    margin: 0 0 28px;
    max-width: 640px;
    font-family: 'Inter', sans-serif;
    font-size: clamp(15px, 1.18vw, 17px);
    line-height: 1.65;
    color: rgba(255, 245, 232, 0.78);
}
.axes-finale-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 999px;
    background: rgba(14, 8, 5, 0.5);
    border: 1px solid rgba(255, 209, 174, 0.22);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #ffd1ae;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.axes-finale-arrow svg { width: 16px; height: 16px; color: #ffb079; }

/* ===== Responsive tableau & finale ===== */
@media (max-width: 1100px) {
    .axes-slide.is-tableau .axes-matrix {
        grid-template-columns: minmax(160px, 1fr) repeat(5, minmax(120px, 1fr));
        gap: 6px;
        padding: 14px;
    }
    .axes-slide.is-tableau .axes-rail-row { font-size: 13px; }
    .axes-slide.is-tableau .axe-cell { padding: 6px 4px; font-size: 14px; }
}
@media (max-width: 768px) {
    .axes-slide.is-tableau,
    .axes-slide.is-finale { padding: 60px 24px; }
    .axes-slide.is-tableau .axes-matrix {
        grid-template-columns: 1fr;
        max-height: 65vh;
        overflow-y: auto;
    }
}

/* ============================================================
   BLUR INTERLUDE — Transition floue (remplace l'ancien curtain-cinema)
   Une photo de scène floue → nette au peak du pin → floue à nouveau.
   Section auto-portée 200vh, pin 100vh. --bcp 0→1 + --bcp-peak parabole.
   ============================================================ */
.blur-interlude {
    position: relative;
    height: 200vh;
    background: #060200;
    --bcp: 0;
    --bcp-peak: 0;
}
.blur-interlude-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
}
.blur-interlude-image {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.blur-interlude-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    /* Blur intense aux bords, net au peak. Brightness/saturation suit. */
    filter:
        blur(calc((1 - var(--bcp-peak)) * 32px + 2px))
        brightness(calc(0.45 + var(--bcp-peak) * 0.35))
        saturate(calc(0.9 + var(--bcp-peak) * 0.25));
    transform: scale(calc(1.08 + (1 - var(--bcp-peak)) * 0.06));
    will-change: filter, transform;
}
.blur-interlude-grade {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 75% 80% at 50% 50%, transparent 25%, rgba(6, 2, 0, 0.55) 100%),
        linear-gradient(180deg, rgba(6, 2, 0, 0.55) 0%, transparent 30%, transparent 70%, rgba(6, 2, 0, 0.65) 100%);
}
.blur-interlude-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 80px;
    /* L'apparition du contenu suit la même parabola que le defocus */
    opacity: var(--bcp-peak);
    will-change: opacity, transform;
}
.blur-interlude-meta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #ffd1ae;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.blur-interlude-meta-num {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    text-transform: none;
    letter-spacing: -0.02em;
}
.blur-interlude-meta-line {
    width: 36px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ffb079, transparent);
}
.blur-interlude-title {
    margin: 22px 0 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(56px, 6.8vw, 120px);
    line-height: 0.94;
    letter-spacing: -0.005em;
    color: #fff5e8;
    text-wrap: balance;
    transform: translate3d(0, calc((1 - var(--bcp-peak)) * 26px), 0);
    filter: drop-shadow(0 18px 50px rgba(0, 0, 0, 0.6));
}
.blur-interlude-title em {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    background: linear-gradient(110deg, #ffd1ae 0%, #ffb079 45%, #f07a1a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.blur-interlude-caption {
    margin: 18px 0 0;
    max-width: 580px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.65;
    color: rgba(255, 245, 232, 0.75);
}

@media (max-width: 768px) {
    .blur-interlude { height: 100vh; }
    .blur-interlude-pin { position: relative; top: auto; }
    .blur-interlude-content { opacity: 1 !important; }
    .blur-interlude-title { transform: none !important; }
    .blur-interlude-image img { filter: blur(2px) brightness(0.6) !important; transform: scale(1.05) !important; }
}
@media (prefers-reduced-motion: reduce) {
    .blur-interlude-image img,
    .blur-interlude-content,
    .blur-interlude-title { transform: none !important; }
}

/* ============================================================
   PROFONDEUR CINEMA — [DEPRECATED] supprimé. Voir slide is-tableau
   et is-finale dans axes-cinema. Section auto-portée 700vh, pin
   sticky 100vh, track 600vw qui translateX selon --pp (0→1)
   avec buffers d'entrée et de sortie. (anciennement utilisé)
   ============================================================ */
.profondeur-cinema {
    position: relative;
    height: 700vh;
    background: linear-gradient(180deg, #0e0805 0%, #060200 100%);
    --pp: 0;
}
.profondeur-cinema-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse 70% 50% at 80% 20%, rgba(255, 138, 58, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 20% 80%, rgba(255, 122, 47, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, #0e0805 0%, #060200 100%);
}
.profondeur-cinema-track {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 600vw; /* 6 slides × 100vw */
    display: flex;
    /* Buffer entrée +50vw → sortie -550vw (60×100vw - 50vw = -550vw) */
    transform: translate3d(calc(50vw - var(--pp) * 600vw), 0, 0);
    will-change: transform;
}
.profondeur-slide {
    flex: 0 0 100vw;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 90px 88px;
    /* Per-slide proximity 0→1 (1=centrée). Réglée en JS via --pprox */
    --pprox: 1;
    will-change: transform, opacity;
    transform: scale(calc(0.94 + var(--pprox) * 0.06));
    opacity: calc(0.35 + var(--pprox) * 0.65);
}
.profondeur-slide-inner {
    width: 100%;
    max-width: 1200px;
    position: relative;
    z-index: 2;
    transform: translate3d(calc((1 - var(--pprox)) * -32px), 0, 0);
    will-change: transform;
}

/* ===== Pill, title, deck communs ===== */
.profondeur-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 122, 47, 0.45);
    background: rgba(255, 122, 47, 0.10);
    color: #ffb079;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.profondeur-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff7a2f;
    box-shadow: 0 0 10px rgba(255, 122, 47, 0.7);
}
.profondeur-pill.is-strong {
    background: linear-gradient(135deg, #ff7a2f 0%, #ff9447 60%, #ffb079 100%);
    color: #1a0d04;
    border-color: rgba(255, 209, 174, 0.6);
}
.profondeur-pill.is-strong .dot { background: #1a0d04; box-shadow: none; }

.profondeur-title {
    margin: 16px 0 18px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(56px, 6.6vw, 110px);
    line-height: 0.92;
    letter-spacing: -0.005em;
    color: #fff5e8;
}
.profondeur-title em {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    background: linear-gradient(110deg, #ffd1ae 0%, #ffb079 45%, #f07a1a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.is-intro-title {
    font-size: clamp(58px, 7vw, 120px);
}

.profondeur-deck {
    margin: 0 0 28px;
    max-width: 580px;
    font-family: 'Inter', sans-serif;
    font-size: clamp(15px, 1.18vw, 17px);
    line-height: 1.65;
    color: rgba(255, 245, 232, 0.78);
}
.profondeur-deck strong { color: #ffd1ae; font-weight: 600; }
.profondeur-tag {
    margin: 6px 0 0;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(18px, 1.4vw, 22px);
    color: rgba(255, 209, 174, 0.78);
}

/* ===== Slide intro (key + hint) ===== */
.profondeur-slide.is-intro .profondeur-slide-inner {
    max-width: 880px;
    text-align: left;
}
.profondeur-key {
    list-style: none;
    margin: 24px 0 28px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 36px;
    max-width: 720px;
}
.profondeur-key li {
    display: flex;
    align-items: center;
    gap: 14px;
    color: rgba(255, 245, 232, 0.82);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
}
.profondeur-hint {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 0;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(14, 8, 5, 0.5);
    border: 1px solid rgba(255, 209, 174, 0.18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #ffd1ae;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
}
.profondeur-hint svg { width: 14px; height: 14px; }

/* ===== Slides parcours (lettre géante + 5 axes) ===== */
.profondeur-letter {
    position: absolute;
    bottom: -8%;
    left: -2%;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(380px, 56vw, 880px);
    line-height: 0.85;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, rgba(255, 209, 174, 0.15) 0%, rgba(255, 122, 47, 0.05) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    pointer-events: none;
    z-index: 0;
}
.is-featured .profondeur-letter {
    background: linear-gradient(135deg, rgba(255, 209, 174, 0.32) 0%, rgba(255, 122, 47, 0.16) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.is-parcours .profondeur-slide-inner {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 64px;
    align-items: center;
    max-width: 1300px;
}
.profondeur-slide-head {
    color: #fff5e8;
}
.profondeur-slide-head .profondeur-title {
    margin: 12px 0 8px;
    font-size: clamp(72px, 8.5vw, 140px);
    background: linear-gradient(110deg, #ffd1ae 0%, #ffb079 45%, #f07a1a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ===== Liste 5 axes ===== */
.profondeur-axes {
    list-style: none;
    margin: 0;
    padding: 22px 28px;
    border-radius: 18px;
    background: rgba(14, 8, 5, 0.62);
    border: 1px solid rgba(255, 209, 174, 0.15);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45);
}
.profondeur-axes li {
    display: grid;
    grid-template-columns: 44px 1fr 130px 130px;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 245, 232, 0.06);
    color: #fff5e8;
}
.profondeur-axes li:last-child { border-bottom: none; }
.profondeur-axes .num {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 22px;
    background: linear-gradient(135deg, #ffd1ae, #ffb079, #f07a1a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.profondeur-axes .lbl {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    line-height: 1.05;
    letter-spacing: 0.005em;
    color: #fff5e8;
}
.profondeur-axes .vlbl {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 245, 232, 0.55);
    text-align: right;
}
.profondeur-axes li.lvl-0 .vlbl { color: rgba(255, 245, 232, 0.4); }
.profondeur-axes li.lvl-1 .vlbl { color: rgba(255, 209, 174, 0.7); }
.profondeur-axes li.lvl-2 .vlbl { color: #ffd1ae; }
.profondeur-axes li.lvl-3 .vlbl { color: #ff9447; font-weight: 600; }

/* ===== Meter (3 barres) ===== */
.profondeur-meter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
}
.profondeur-meter i {
    display: block;
    width: 28px;
    height: 8px;
    border-radius: 2px;
    background: rgba(255, 245, 232, 0.08);
    border: 1px solid rgba(255, 245, 232, 0.10);
}
.profondeur-meter.is-1 i:nth-child(1),
.profondeur-meter.is-2 i:nth-child(1),
.profondeur-meter.is-2 i:nth-child(2),
.profondeur-meter.is-3 i:nth-child(1),
.profondeur-meter.is-3 i:nth-child(2),
.profondeur-meter.is-3 i:nth-child(3) {
    background: linear-gradient(90deg, #ffb079, #ff7a2f);
    border-color: rgba(255, 122, 47, 0.55);
    box-shadow: 0 0 10px rgba(255, 122, 47, 0.45);
}
.profondeur-meter.is-3 i {
    background: linear-gradient(90deg, #ffd1ae, #ffb079, #f07a1a);
    border-color: rgba(255, 209, 174, 0.65);
    box-shadow: 0 0 14px rgba(255, 122, 47, 0.6);
}

/* ===== Refs (modules / entreprise) ===== */
.profondeur-refs {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}
.profondeur-refs b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 26px;
    padding: 0 8px;
    border-radius: 8px;
    background: rgba(255, 122, 47, 0.12);
    border: 1px solid rgba(255, 122, 47, 0.4);
    color: #ffb079;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.04em;
}

/* ===== Progress UI + scroll hint ===== */
.profondeur-cinema-progress {
    position: absolute;
    bottom: 36px;
    left: 60px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 30;
    color: #fff5e8;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.profondeur-cinema-progress-current {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: none;
    background: linear-gradient(135deg, #ffd1ae, #ffb079, #f07a1a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.profondeur-cinema-progress-sep {
    color: rgba(255, 245, 232, 0.3);
    font-size: 16px;
}
.profondeur-cinema-progress-total {
    color: rgba(255, 245, 232, 0.55);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
}
.profondeur-cinema-progress-label {
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid rgba(255, 245, 232, 0.18);
    color: rgba(255, 245, 232, 0.72);
}

.profondeur-cinema-hint {
    position: absolute;
    bottom: 36px;
    right: 60px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 30;
    color: rgba(255, 245, 232, 0.6);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.profondeur-cinema-hint-bar {
    width: 36px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ffb079, transparent);
}
.profondeur-cinema-hint svg {
    width: 16px;
    height: 16px;
    color: #ffb079;
}

/* ===== Responsive ===== */
@media (max-width: 1100px) {
    .profondeur-slide { padding: 80px 36px; }
    .is-parcours .profondeur-slide-inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .profondeur-axes li {
        grid-template-columns: 32px 1fr 110px;
        gap: 10px;
    }
    .profondeur-axes .vlbl { display: none; }
    .profondeur-letter { font-size: clamp(260px, 40vw, 480px); }
}
@media (max-width: 768px) {
    .profondeur-cinema { height: auto; }
    .profondeur-cinema-pin {
        position: relative;
        top: auto;
        height: auto;
    }
    .profondeur-cinema-track {
        position: relative;
        width: 100%;
        flex-direction: column;
        transform: none;
    }
    .profondeur-slide {
        flex: 0 0 auto;
        width: 100%;
        min-height: 90vh;
        padding: 70px 24px;
        opacity: 1 !important;
        transform: none !important;
    }
    .profondeur-cinema-progress,
    .profondeur-cinema-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .profondeur-cinema-track,
    .profondeur-slide,
    .profondeur-slide-inner {
        transform: none !important;
    }
}

/* ============================================================
   CURTAIN HORIZONTAL #2 — Aller plus loin
   Stage curtain : deux panneaux qui s'écartent latéralement,
   image plein écran révélée au centre, puis panneaux qui
   reviennent depuis l'extérieur. Section auto-portée.
   --chp 0→1 pilote toute la chorégraphie.
   ============================================================ */
.curtain-h-cinema {
    position: relative;
    height: 350vh;
    background: #060200;
    --chp: 0;
    /* Phases dérivées (calc en JS) */
    --chp-open: 0;   /* 0→1 sur la première moitié (panneaux s'écartent) */
    --chp-close: 0;  /* 0→1 sur la deuxième moitié (panneaux se referment) */
    --chp-peak: 0;   /* parabole : 1 au centre du pin */
}
.curtain-h-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    background: #060200;
}

/* ===== Image plein écran (sticky derrière) ===== */
.curtain-h-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}
.curtain-h-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Léger Ken-Burns inverse synchro sur le peak */
    transform: scale(calc(1.08 + var(--chp-peak) * 0.04));
    filter: brightness(calc(0.7 + var(--chp-peak) * 0.18)) saturate(1.08);
    will-change: transform, filter;
}
.curtain-h-image-grade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(6, 2, 0, 0.45) 0%, transparent 35%, transparent 65%, rgba(6, 2, 0, 0.65) 100%),
        radial-gradient(ellipse 70% 80% at 50% 50%, transparent 30%, rgba(6, 2, 0, 0.55) 100%);
    pointer-events: none;
}
.curtain-h-image-grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
    opacity: 0.07;
    mix-blend-mode: overlay;
}

/* ===== Title + meta (au centre, visibles pendant le plateau) ===== */
.curtain-h-meta {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 12;
    color: #ffd1ae;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: var(--chp-peak);
}
.curtain-h-meta-num {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    text-transform: none;
    letter-spacing: -0.02em;
}
.curtain-h-meta-line {
    width: 36px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ffb079, transparent);
}

.curtain-h-content {
    position: absolute;
    inset: 0;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    pointer-events: none;
}
.curtain-h-title {
    margin: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(58px, 7.2vw, 130px);
    line-height: 0.92;
    letter-spacing: -0.005em;
    color: #fff5e8;
    text-align: center;
    max-width: 1100px;
    text-wrap: balance;
    /* Apparition synchro au peak */
    opacity: var(--chp-peak);
    transform: translate3d(0, calc((1 - var(--chp-peak)) * 28px), 0);
    filter: drop-shadow(0 18px 50px rgba(0, 0, 0, 0.55));
    will-change: opacity, transform;
}
.curtain-h-title em {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    background: linear-gradient(110deg, #ffd1ae 0%, #ffb079 45%, #f07a1a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ===== Panneaux gauche / droite (rideaux de scène) ===== */
.curtain-h-panel {
    position: absolute;
    top: 0;
    width: 52vw; /* léger overlap au centre pour cacher le filet */
    height: 100%;
    z-index: 20;
    background:
        radial-gradient(ellipse 60% 100% at 50% 50%, rgba(255, 122, 47, 0.05) 0%, transparent 70%),
        linear-gradient(180deg, #1a0d04 0%, #0e0805 50%, #060200 100%);
    will-change: transform;
}
.curtain-h-panel-left {
    left: 0;
    /* Ouverture : --chp-open 0→1 → translate 0 → -110% (sort par la gauche)
       Fermeture : --chp-close 0→1 → ajoute +110% → revient à 0 (couvre à nouveau) */
    transform: translate3d(calc(var(--chp-open) * -110% + var(--chp-close) * 110%), 0, 0);
}
.curtain-h-panel-right {
    right: 0;
    /* Symétrique : sort par la droite puis revient */
    transform: translate3d(calc(var(--chp-open) * 110% + var(--chp-close) * -110%), 0, 0);
}
/* Filet champagne sur le bord intérieur des panneaux */
.curtain-h-panel-edge {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(255, 209, 174, 0.55) 30%,
        rgba(255, 122, 47, 0.7) 50%,
        rgba(255, 209, 174, 0.55) 70%,
        transparent 100%);
    box-shadow: 0 0 20px rgba(255, 122, 47, 0.4);
}
.curtain-h-panel-left .curtain-h-panel-edge { right: 0; }
.curtain-h-panel-right .curtain-h-panel-edge { left: 0; }

/* Tag vertical sur chaque panneau (côté Profondeur / côté À la carte) */
.curtain-h-panel-tag {
    position: absolute;
    top: 50%;
    writing-mode: vertical-rl;
    transform: rotate(180deg) translateX(50%);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(255, 209, 174, 0.55);
    white-space: nowrap;
}
.curtain-h-panel-left .curtain-h-panel-tag {
    right: 28px;
}
.curtain-h-panel-right .curtain-h-panel-tag {
    left: 28px;
}

/* ===== Frame coins + progress bar ===== */
.curtain-h-frame {
    position: absolute;
    inset: 30px;
    pointer-events: none;
    z-index: 14;
    opacity: var(--chp-peak);
}
.curtain-h-frame span {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 1.5px solid rgba(255, 209, 174, 0.5);
}
.curtain-h-frame .tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.curtain-h-frame .tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.curtain-h-frame .bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.curtain-h-frame .br { bottom: 0; right: 0; border-left: none; border-top: none; }

.curtain-h-progress {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(180px, 28vw, 360px);
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 245, 232, 0.12);
    overflow: hidden;
    z-index: 14;
}
.curtain-h-progress-bar {
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #ffd1ae, #ff7a2f);
    transform: scaleX(var(--chp));
    transform-origin: left center;
    box-shadow: 0 0 12px rgba(255, 122, 47, 0.55);
}

/* ===== Responsive ===== */
@media (max-width: 1100px) {
    .curtain-h-panel { width: 56vw; }
}
@media (max-width: 768px) {
    .curtain-h-cinema { height: 100vh; }
    .curtain-h-pin {
        position: relative;
        top: auto;
    }
    .curtain-h-panel { display: none; }
    .curtain-h-progress { display: none; }
    .curtain-h-meta,
    .curtain-h-title {
        opacity: 1 !important;
        transform: none !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .curtain-h-panel-left {
        transform: translate3d(-110%, 0, 0);
    }
    .curtain-h-panel-right {
        transform: translate3d(110%, 0, 0);
    }
    .curtain-h-image img { transform: none; filter: none; }
}

/* ============================================================
   AXES CINEMA — Défilement horizontal pinned des 5 axes
   La section a une hauteur de 600vh. À l'intérieur, un pin
   sticky de 100vh contient une track en flex de 5 panneaux
   (chacun 100vw). Le scroll vertical pilote le translate-X
   de la track via --axp (0→1) :
   - axp ∈ [0, 0.1]    → entrée : la 1ère slide arrive depuis la droite
   - axp ∈ [0.1, 0.9]  → cinéma : les 5 slides passent
   - axp ∈ [0.9, 1]    → sortie : la 5ème slide quitte vers la gauche
   Sur mobile, on tombe en stack vertical (pas de pin).
   ============================================================ */
.axes-cinema {
    position: relative;
    height: 800vh;
    background: #060200;
    --axp: 0;
}

.axes-cinema-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(255, 122, 47, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse 60% 60% at 100% 0%, rgba(255, 138, 58, 0.06) 0%, transparent 55%),
        linear-gradient(180deg, #0e0805 0%, #060200 100%);
}

.axes-cinema-track {
    display: flex;
    height: 100%;
    width: 700vw;
    /* 7 slides : buffer 50vw d'entrée (slide 1 part de +50vw → 0) et
       50vw de sortie (slide 7 part de -600vw → -650vw).
       Total horizontal travel = 700vw. */
    transform: translate3d(calc(50vw + var(--axp) * -700vw), 0, 0);
    will-change: transform;
}

/* ====== UN PANNEAU AXE ====== */
.axes-slide {
    flex: 0 0 100vw;
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: 64px;
    padding: 80px 88px;
    position: relative;
    /* --prox : proximité au centre du viewport (0 = loin, 1 = centré).
       Calculé par JS pour chaque slide. Permet un fondu opacité/scale
       qui adoucit l'arrivée et la sortie de chaque slide. */
    --prox: 1;
    will-change: transform, opacity;
}
.axes-slide-image {
    opacity: calc(0.55 + var(--prox) * 0.45);
    transform: scale(calc(0.94 + var(--prox) * 0.06));
}
.axes-slide-content {
    opacity: calc(0.35 + var(--prox) * 0.65);
    transform: translate3d(calc((1 - var(--prox)) * -32px), 0, 0);
}

.axes-slide-image {
    position: relative;
    height: 78vh;
    max-height: 700px;
    border-radius: 22px;
    overflow: hidden;
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 122, 47, 0.18) inset;
}
.axes-slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    transform: scale(1.06);
    filter: brightness(0.78) saturate(1.1);
}
.axes-slide-image-grade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(6, 2, 0, 0.0) 30%, rgba(6, 2, 0, 0.55) 100%),
        linear-gradient(135deg, rgba(255, 122, 47, 0.10) 0%, transparent 45%);
    pointer-events: none;
}
.axes-slide-frame {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 1.5px solid rgba(255, 209, 174, 0.55);
    pointer-events: none;
}
.axes-slide-frame.frame-tl { top: 16px; left: 16px; border-right: none; border-bottom: none; }
.axes-slide-frame.frame-br { bottom: 16px; right: 16px; border-left: none; border-top: none; }
.axes-slide-stamp {
    position: absolute;
    bottom: 22px;
    left: 22px;
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 245, 232, 0.78);
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 209, 174, 0.32);
    background: rgba(14, 8, 5, 0.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* ====== CONTENU TEXTE DU PANNEAU ====== */
.axes-slide-content {
    position: relative;
    max-width: 560px;
    color: #fff5e8;
}

.axes-slide-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 122, 47, 0.45);
    background: rgba(255, 122, 47, 0.10);
    color: #ffb079;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.axes-slide-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff7a2f;
    box-shadow: 0 0 10px rgba(255, 122, 47, 0.7);
}
.axes-slide-pill.is-diff-pill {
    border-color: rgba(255, 209, 174, 0.55);
    background: rgba(255, 209, 174, 0.10);
    color: #ffd1ae;
}
.axes-slide-pill.is-diff-pill .dot {
    background: #ffd1ae;
    box-shadow: 0 0 12px rgba(255, 209, 174, 0.8);
}

.axes-slide-letter {
    display: block;
    margin: 28px 0 -18px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(180px, 22vw, 320px);
    line-height: 0.85;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, #ffd1ae 0%, #ffb079 45%, #f07a1a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 12px 28px rgba(255, 122, 47, 0.25));
}

.axes-slide-title {
    margin: 0 0 22px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(46px, 5.6vw, 84px);
    line-height: 0.95;
    letter-spacing: -0.005em;
    color: #fff5e8;
    text-wrap: balance;
}
.axes-slide-title .axes-star {
    color: #ffd1ae;
    font-size: 0.5em;
    vertical-align: 0.25em;
    margin-left: 6px;
    filter: drop-shadow(0 0 8px rgba(255, 209, 174, 0.6));
}

.axes-slide-deck {
    margin: 0 0 28px;
    font-family: 'Inter', sans-serif;
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.65;
    color: rgba(255, 245, 232, 0.78);
    max-width: 480px;
}
.axes-slide-deck strong {
    color: #fff5e8;
    font-weight: 600;
}
.axes-slide-deck em {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: #ffd1ae;
}

.axes-slide-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}
.axes-slide-tags li {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 245, 232, 0.18);
    background: rgba(255, 245, 232, 0.04);
    color: rgba(255, 245, 232, 0.82);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
}
.axes-slide.is-diff .axes-slide-tags li:last-child {
    border-color: rgba(255, 209, 174, 0.45);
    background: rgba(255, 209, 174, 0.10);
    color: #ffd1ae;
    font-weight: 600;
}

/* ====== PROGRESS UI ======
   Placée en bas-gauche pour ne pas être cachée par le nav-pill fixé
   en haut-centre du viewport. Mirror visuel du hint "Scrollez" à droite. */
.axes-cinema-progress {
    position: absolute;
    bottom: 36px;
    left: 60px;
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 10;
    color: #fff5e8;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.axes-cinema-progress-current {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 26px;
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: none;
    background: linear-gradient(135deg, #ffd1ae 0%, #ffb079 50%, #f07a1a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transition: transform 0.25s ease;
    transform: translateY(calc(var(--axp-step, 0) * 1px));
}
.axes-cinema-progress-bar {
    width: 220px;
    height: 2px;
    background: rgba(255, 245, 232, 0.14);
    border-radius: 2px;
    overflow: hidden;
}
.axes-cinema-progress-fill {
    display: block;
    height: 100%;
    width: calc(var(--axp) * 100%);
    background: linear-gradient(90deg, #ffb079, #ff7a2f);
    box-shadow: 0 0 14px rgba(255, 122, 47, 0.5);
}
.axes-cinema-progress-total {
    color: rgba(255, 245, 232, 0.55);
}

.axes-cinema-hint {
    position: absolute;
    bottom: 36px;
    right: 60px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 245, 232, 0.6);
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    /* fade out vers la fin */
    opacity: calc(1 - var(--axp));
}
.axes-cinema-hint-bar {
    width: 56px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 122, 47, 0), rgba(255, 122, 47, 0.6));
}

/* ====== RESPONSIVE ====== */
@media (max-width: 1100px) {
    .axes-slide {
        grid-template-columns: 1fr;
        padding: 60px 40px;
        gap: 28px;
    }
    .axes-slide-image {
        height: 36vh;
        order: 2;
    }
    .axes-slide-letter {
        font-size: clamp(120px, 18vw, 200px);
        margin: 16px 0 -10px;
    }
    .axes-slide-content {
        order: 1;
    }
    .axes-cinema-progress {
        bottom: 22px;
        left: 28px;
    }
    .axes-cinema-progress-bar {
        width: 140px;
    }
    .axes-cinema-hint {
        bottom: 22px;
        right: 28px;
    }
}

/* Mobile : on désactive le pin et on stack verticalement */
@media (max-width: 768px) {
    .axes-cinema {
        height: auto;
    }
    .axes-cinema-pin {
        position: relative;
        top: auto;
        height: auto;
        background: linear-gradient(180deg, #0e0805 0%, #060200 100%);
    }
    .axes-cinema-track {
        flex-direction: column;
        width: 100%;
        height: auto;
        transform: none !important;
    }
    .axes-slide {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        min-height: 90vh;
        padding: 80px 24px 100px;
        gap: 24px;
    }
    .axes-slide-image {
        height: 36vh;
        max-height: 320px;
    }
    .axes-slide-letter {
        font-size: 140px;
        margin: 12px 0 -6px;
    }
    .axes-slide-title {
        font-size: clamp(38px, 9vw, 56px);
    }
    .axes-cinema-progress,
    .axes-cinema-hint {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .axes-cinema-track {
        transform: none !important;
    }
}

/* ============================================================
   FOOTER UNIFIÉ — Toutes les pages utilisent le noir profond
   #1a0f08 (identique au footer de l'accueil) pour la section qui
   enveloppe le footer. La répétition de classe sert à booster la
   spécificité afin de battre les règles page-spécifiques avec
   !important (ex. body.modules-page .fm-section.is-bg-2).
   ============================================================ */
.site-footer-wrap.site-footer-wrap.site-footer-wrap.site-footer-wrap {
    background: #1a0f08 !important;
    background-image: none !important;
    padding: 80px 0 60px !important;
    border-top: 1px solid rgba(255, 122, 47, 0.12) !important;
}
.site-footer-wrap.site-footer-wrap.site-footer-wrap::before,
.site-footer-wrap.site-footer-wrap.site-footer-wrap::after {
    display: none !important;
    content: none !important;
}

/* Pages avec footer "nu" sans section enveloppante
   (calendrier, professeurs, inscription, concours-entree) */
.footer.site-footer {
    background: #1a0f08;
    border-top: 1px solid rgba(255, 122, 47, 0.12);
}

/* ============================================================
   PARCOURS — Découpage en 4 slides plein écran
   1) parcours-intro       (titre + mot du parrain Kevin Razi)
   2) parcours-slide A     (Découverte)  — image à droite, contenu à gauche
   3) parcours-slide B     (Semi Pro)    — image à gauche, contenu à droite (mirroir)
   4) parcours-slide C     (Pro)         — image plein écran, contenu centré, ribbon
   ============================================================ */

/* ── 1) Slide intro ─────────────────────────────────────── */
.parcours-intro {
    min-height: 100vh;
    padding: 120px 0 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.parcours-intro-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
}
.parcours-intro-head {
    margin-bottom: 0 !important;
    text-align: center;
    max-width: 880px;
}
.parcours-intro-quote {
    margin: 0 !important;
    align-self: center !important;
    max-width: 880px;
    width: 100%;
}
.parcours-intro-quote .kevin-bubble-text p {
    font-size: 17.5px;
    line-height: 1.6;
}
@media (max-width: 560px) {
    .parcours-intro-quote .kevin-bubble-text p {
        font-size: 15.5px;
        line-height: 1.55;
    }
}
.parcours-intro-trio {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 12px;
}
.parcours-intro-step {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border-radius: 999px;
    border: 1px solid rgba(255, 122, 47, 0.28);
    background: rgba(12, 8, 4, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}
.parcours-intro-step::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(110deg, rgba(255, 175, 110, 0) 0%, rgba(255, 175, 110, 0.18) 45%, rgba(255, 122, 47, 0.32) 100%);
    transform: translateX(-110%);
    transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: -1;
}
.parcours-intro-step:hover,
.parcours-intro-step:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(255, 175, 110, 0.6);
    box-shadow: 0 14px 36px -10px rgba(255, 122, 47, 0.45);
    outline: none;
}
.parcours-intro-step:hover::before,
.parcours-intro-step:focus-visible::before {
    transform: translateX(0);
}
.parcours-intro-step:active {
    transform: translateY(0);
}

/* Petite mise en lumière de la slide cible quand on arrive via l'ancre */
@keyframes parcoursTargetGlow {
    0%   { box-shadow: inset 0 0 0 0 rgba(255, 175, 110, 0); }
    18%  { box-shadow: inset 0 0 0 4px rgba(255, 175, 110, 0.45); }
    100% { box-shadow: inset 0 0 0 0 rgba(255, 175, 110, 0); }
}
.parcours-slide:target {
    scroll-margin-top: 80px;
    animation: parcoursTargetGlow 1.4s ease-out 0.15s 1;
}
@media (prefers-reduced-motion: reduce) {
    .parcours-intro-step,
    .parcours-intro-step::before {
        transition: none;
    }
    .parcours-slide:target {
        animation: none;
    }
}
.parcours-intro-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0.05em;
    color: rgba(255, 218, 180, 0.92);
    background: rgba(255, 122, 47, 0.16);
    border: 1px solid rgba(255, 175, 110, 0.32);
    box-shadow: none;
    text-shadow: none;
}
.parcours-intro-label {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 0.06em;
    line-height: 1;
    color: #fffaf4;
    text-transform: uppercase;
    font-style: normal;
}
.parcours-intro-step.is-featured {
    border-color: rgba(255, 175, 110, 0.5);
    background: linear-gradient(135deg, rgba(255, 122, 47, 0.22), rgba(80, 30, 10, 0.45));
    box-shadow: 0 10px 36px -12px rgba(255, 122, 47, 0.45);
}
.parcours-intro-step.is-featured .parcours-intro-letter {
    color: #fffaf4;
    background: rgba(255, 122, 47, 0.32);
    border-color: rgba(255, 195, 140, 0.55);
}
.parcours-intro-step.is-featured .parcours-intro-label {
    color: #ffd4ad;
    text-shadow: 0 2px 12px rgba(255, 122, 47, 0.3);
}
.parcours-intro-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 200, 170, 0.6);
    flex-shrink: 0;
    opacity: 0.9;
}
.parcours-intro-arrow svg {
    display: block;
    vertical-align: middle;
}
.parcours-intro-scrollcue {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: rgba(245, 232, 218, 0.55);
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 12px;
}
.parcours-intro-scrollcue-bar {
    display: inline-block;
    width: 64px;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(255, 175, 110, 0) 0%,
        rgba(255, 175, 110, 0.65) 100%
    );
    animation: parcours-intro-scrollcue 2.4s ease-in-out infinite;
}
@keyframes parcours-intro-scrollcue {
    0%, 100% { transform: scaleX(1); transform-origin: left; opacity: 0.4; }
    50%      { transform: scaleX(0.4); transform-origin: left; opacity: 1; }
}

/* ── 2-4) Slides A / B / C — visuel plein écran ─────────── */
.parcours-slide {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    isolation: isolate;
    background: #0a0500;
    padding: 80px 6vw;
}
.parcours-slide-link {
    position: absolute;
    inset: 0;
    z-index: 4;
}
.parcours-slide-link:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: -8px;
}

.parcours-slide-bg {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
    transform: scale(1.04);
    transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: transform;
}
.parcours-slide:hover .parcours-slide-bg {
    transform: scale(1.08);
}

.parcours-slide-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(8, 4, 0, 0.92) 0%, rgba(8, 4, 0, 0.78) 38%, rgba(8, 4, 0, 0.25) 70%, rgba(8, 4, 0, 0) 100%),
        linear-gradient(180deg, rgba(8, 4, 0, 0.55) 0%, rgba(8, 4, 0, 0.15) 30%, rgba(8, 4, 0, 0.45) 100%);
}
.parcours-slide.is-mirrored .parcours-slide-veil {
    background:
        linear-gradient(270deg, rgba(8, 4, 0, 0.92) 0%, rgba(8, 4, 0, 0.78) 38%, rgba(8, 4, 0, 0.25) 70%, rgba(8, 4, 0, 0) 100%),
        linear-gradient(180deg, rgba(8, 4, 0, 0.55) 0%, rgba(8, 4, 0, 0.15) 30%, rgba(8, 4, 0, 0.45) 100%);
}
.parcours-slide.is-featured .parcours-slide-veil {
    background:
        radial-gradient(ellipse 80% 70% at 50% 60%, rgba(8, 4, 0, 0.35) 0%, rgba(8, 4, 0, 0.85) 100%),
        linear-gradient(180deg, rgba(8, 4, 0, 0.5) 0%, rgba(8, 4, 0, 0.65) 100%);
}

.parcours-slide-letter {
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(280px, 38vw, 620px);
    line-height: 0.78;
    letter-spacing: -0.02em;
    color: rgba(255, 175, 110, 0.08);
    text-shadow: 0 0 80px rgba(255, 122, 47, 0.05);
    pointer-events: none;
    user-select: none;
}
.parcours-slide-a .parcours-slide-letter { right: -3vw; }
.parcours-slide-b.is-mirrored .parcours-slide-letter { left: -3vw; right: auto; }
.parcours-slide-c.is-featured .parcours-slide-letter {
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 175, 110, 0.06);
    font-size: clamp(360px, 45vw, 760px);
}
.parcours-slide-d-modules .parcours-slide-letter { right: -3vw; }
.parcours-slide-e-modules.is-mirrored .parcours-slide-letter { left: -3vw; right: auto; }

.parcours-slide-content {
    position: relative;
    z-index: 3;
    max-width: 560px;
    color: var(--cream);
}
.parcours-slide.is-mirrored .parcours-slide-content {
    margin-left: auto;
    text-align: right;
}
.parcours-slide.is-featured .parcours-slide-content {
    margin: 0 auto;
    text-align: center;
    max-width: 720px;
}

.parcours-slide-badge {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 175, 110, 0.45);
    background: rgba(255, 122, 47, 0.08);
    color: var(--orange-2, #ffb37a);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    margin-bottom: 22px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.parcours-slide-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(56px, 7vw, 108px);
    line-height: 0.92;
    letter-spacing: 0.01em;
    margin: 0 0 20px;
    color: var(--cream);
}

/* Alignement des titres des sections intro/résumé sur la taille des slides
   Parcours (clamp(56px, 7vw, 108px)).
   Toutes résolutions, pour rester cohérent avec le rythme des slides A/B/C/D. */
#parcours .ecole-section-title,
#tableau .ecole-section-title,
.section-masterclass .ecole-section-title {
    font-size: clamp(56px, 7vw, 108px);
    line-height: 0.92;
    letter-spacing: 0.01em;
}
.parcours-slide-title .accent {
    background: linear-gradient(135deg, #ffb37a 0%, #ff7a2f 50%, #ffb37a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 400;
}

.parcours-slide-desc {
    font-family: 'Playfair Display', serif;
    font-size: clamp(15.5px, 1.3vw, 18px);
    line-height: 1.65;
    color: rgba(245, 232, 218, 0.88);
    margin: 0 0 28px;
}
.parcours-slide-desc strong {
    color: var(--cream);
    font-weight: 700;
    font-style: normal;
}

.parcours-slide-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    margin: 0 0 24px;
    padding: 22px 0;
    border-top: 1px solid rgba(255, 175, 110, 0.18);
    border-bottom: 1px solid rgba(255, 175, 110, 0.18);
}
.parcours-slide-stats > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.parcours-slide-stats dt {
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: rgba(255, 175, 110, 0.7);
    margin: 0;
}
.parcours-slide-stats dd {
    font-family: 'Inter', sans-serif;
    font-size: 13.6px;
    font-weight: 500;
    color: var(--cream);
    margin: 0;
    line-height: 1.4;
}

.parcours-slide-tags {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.parcours-slide.is-mirrored .parcours-slide-tags { justify-content: flex-end; }
.parcours-slide.is-featured .parcours-slide-tags { justify-content: center; }
.parcours-slide-tags li {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 175, 110, 0.25);
    background: rgba(20, 12, 4, 0.45);
    color: rgba(245, 232, 218, 0.85);
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    letter-spacing: 0.8px;
}
.parcours-slide-tags li.is-soft {
    color: rgba(245, 232, 218, 0.55);
    border-color: rgba(255, 175, 110, 0.15);
}
.parcours-slide-tags li.is-warn {
    color: #ffd17a;
    border-color: rgba(255, 209, 122, 0.45);
    background: rgba(255, 209, 122, 0.08);
}
.parcours-slide-tags li.is-strong {
    color: var(--cream);
    border-color: rgba(255, 175, 110, 0.55);
    background: rgba(255, 122, 47, 0.18);
    font-weight: 600;
}

.parcours-slide-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    border-radius: 999px;
    border: 1px solid rgba(255, 175, 110, 0.55);
    background: rgba(20, 12, 4, 0.55);
    color: var(--cream);
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    position: relative;
    z-index: 5;
}
.parcours-slide-cta::after {
    content: "→";
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    transition: transform 0.3s ease;
}
.parcours-slide-cta:hover {
    background: rgba(255, 122, 47, 0.18);
    border-color: rgba(255, 175, 110, 0.85);
    transform: translateY(-2px);
}
.parcours-slide-cta:hover::after {
    transform: translateX(4px);
}
.parcours-slide-cta-primary {
    background: linear-gradient(135deg, #ff7a2f 0%, #ffb37a 100%);
    color: #1a0a00;
    border-color: transparent;
    box-shadow: 0 14px 36px -12px rgba(255, 122, 47, 0.65);
}
.parcours-slide-cta-primary:hover {
    background: linear-gradient(135deg, #ffb37a 0%, #ff7a2f 100%);
    color: #1a0a00;
    transform: translateY(-2px);
    border-color: transparent;
}

/* Badge infos financement / Qualiopi (slide Pro uniquement dans le markup) */
.parcours-slide-announce-badge {
    margin-top: 22px;
    display: inline-block;
    max-width: min(640px, 100%);
    width: fit-content;
    padding: 12px 20px;
    border-radius: 999px;
    border: 1px solid rgba(255, 175, 110, 0.42);
    background:
        linear-gradient(135deg, rgba(255, 122, 47, 0.22) 0%, rgba(255, 140, 80, 0.08) 100%),
        rgba(12, 6, 0, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 12px 40px -14px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-sizing: border-box;
}
.parcours-slide-announce-text {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: clamp(11px, 1.95vw, 12.5px);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.45;
    text-transform: uppercase;
    text-align: center;
    color: rgba(245, 232, 218, 0.95);
    text-wrap: balance;
}
.parcours-slide-announce-sep {
    display: inline-block;
    padding: 0 0.25em;
    color: rgba(255, 175, 110, 0.5);
    font-weight: 700;
}
.parcours-slide-announce-em {
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #ffd1ae;
}

.parcours-slide-foot {
    margin: 18px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(245, 232, 218, 0.65);
    font-family: 'Inter', sans-serif;
    font-size: 12.4px;
    letter-spacing: 0.4px;
}
.parcours-slide-foot svg {
    width: 14px;
    height: 14px;
    color: var(--orange-2, #ffb37a);
    flex-shrink: 0;
}
.parcours-slide-foot em {
    font-style: italic;
    color: rgba(255, 175, 110, 0.85);
}

.parcours-slide-ribbon {
    position: absolute;
    top: 60px;
    right: 6vw;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff7a2f 0%, #ffb37a 100%);
    color: #1a0a00;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 14px 36px -12px rgba(255, 122, 47, 0.7);
}
.parcours-slide-ribbon-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1a0a00;
    box-shadow: 0 0 0 3px rgba(26, 10, 0, 0.3);
}

/* Reveal — chaque slide se révèle quand elle entre dans le viewport
   (l'observer global d'index.html ajoute .is-revealed sur [data-reveal]) */
.parcours-slide[data-reveal] .parcours-slide-content,
.parcours-slide[data-reveal] .parcours-slide-letter {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.parcours-slide[data-reveal] .parcours-slide-letter {
    transform: translateY(-50%) scale(0.92);
}
.parcours-slide.parcours-slide-c[data-reveal] .parcours-slide-letter {
    transform: translate(-50%, -50%) scale(0.92);
}
.parcours-slide.is-revealed .parcours-slide-content {
    opacity: 1;
    transform: translateY(0);
}
.parcours-slide.is-revealed .parcours-slide-letter {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}
.parcours-slide.parcours-slide-c.is-revealed .parcours-slide-letter {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ──────────────────────────────────────────────────────── */
/* ── Slide D · Coaching Premium / Atelier 8 places ────── */
/* Palette : doré / champagne · ambiance "salon privé"      */
/* ──────────────────────────────────────────────────────── */
.parcours-slide-d.is-premium {
    background: #100802;
}
.parcours-slide-d.is-premium .parcours-slide-veil {
    /* Voile orienté à droite (contenu à droite, filigrane "8" à gauche) */
    background:
        linear-gradient(270deg, rgba(8, 4, 0, 0.94) 0%, rgba(8, 4, 0, 0.82) 38%, rgba(8, 4, 0, 0.32) 70%, rgba(8, 4, 0, 0) 100%),
        linear-gradient(180deg, rgba(40, 20, 4, 0.45) 0%, rgba(8, 4, 0, 0.18) 30%, rgba(8, 4, 0, 0.55) 100%);
}
.parcours-slide-d.is-premium .parcours-slide-letter {
    left: -3vw;
    right: auto;
    color: rgba(255, 209, 122, 0.10);
    font-size: clamp(360px, 48vw, 760px);
    text-shadow: 0 0 100px rgba(255, 209, 122, 0.08);
}
.parcours-slide-d.is-premium .parcours-slide-ribbon {
    left: 6vw;
    right: auto;
}
.parcours-slide-d.is-premium .parcours-slide-badge {
    border-color: rgba(255, 209, 122, 0.45);
    background: rgba(255, 209, 122, 0.08);
    color: #ffd17a;
}
.parcours-slide-d.is-premium .parcours-slide-title .accent {
    background: linear-gradient(135deg, #ffd17a 0%, #f0c51a 50%, #ffd17a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.parcours-slide-d.is-premium .parcours-slide-stats {
    border-top-color: rgba(255, 209, 122, 0.18);
    border-bottom-color: rgba(255, 209, 122, 0.18);
}
.parcours-slide-d.is-premium .parcours-slide-stats dt {
    color: rgba(255, 209, 122, 0.7);
}
.parcours-slide-d.is-premium .parcours-slide-tags li {
    border-color: rgba(255, 209, 122, 0.25);
}
.parcours-slide-d.is-premium .parcours-slide-tags li.is-strong {
    border-color: rgba(255, 209, 122, 0.55);
    background: rgba(255, 209, 122, 0.18);
    color: #fff8e7;
}
.parcours-slide-d.is-premium .parcours-slide-cta {
    border-color: rgba(255, 209, 122, 0.55);
}
.parcours-slide-d.is-premium .parcours-slide-cta:hover {
    background: rgba(255, 209, 122, 0.18);
    border-color: rgba(255, 209, 122, 0.85);
}
.parcours-slide-d.is-premium .parcours-slide-cta-primary {
    background: linear-gradient(135deg, #f0c51a 0%, #ffd17a 100%);
    color: #1a0a00;
    box-shadow: 0 14px 36px -12px rgba(240, 197, 26, 0.65);
}
.parcours-slide-d.is-premium .parcours-slide-cta-primary:hover {
    background: linear-gradient(135deg, #ffd17a 0%, #f0c51a 100%);
    color: #1a0a00;
}
.parcours-slide-d.is-premium .parcours-slide-foot svg {
    color: #ffd17a;
}
.parcours-slide-d.is-premium .parcours-slide-foot em {
    color: rgba(255, 209, 122, 0.85);
}
.parcours-slide-d.is-premium .parcours-slide-ribbon {
    background: linear-gradient(135deg, #f0c51a 0%, #ffd17a 100%);
    box-shadow: 0 14px 36px -12px rgba(240, 197, 26, 0.65);
}

/* Reveal slide D — la lettre filigrane animée arrive de la gauche */
.parcours-slide-d[data-reveal] .parcours-slide-letter {
    transform: translateY(-50%) scale(0.92);
}
.parcours-slide-d.is-revealed .parcours-slide-letter {
    transform: translateY(-50%) scale(1);
}

/* ──────────────────────────────────────────────────────── */
/* ── Slide E · Le QG (club d'écriture privé) ───────── */
/* Palette : bleu nuit + or champagne — alignée avec        */
/* la page /cocon.html (cocon.css : --cocon-bg-deep + or)   */
/* ──────────────────────────────────────────────────────── */
.parcours-slide-e.is-cocon {
    background: #02001a;
}
.parcours-slide-e.is-cocon .parcours-slide-veil {
    background:
        linear-gradient(90deg, rgba(2, 0, 26, 0.94) 0%, rgba(3, 0, 43, 0.80) 38%, rgba(5, 0, 25, 0.30) 70%, rgba(5, 0, 25, 0) 100%),
        linear-gradient(180deg, rgba(2, 0, 26, 0.55) 0%, rgba(3, 0, 43, 0.15) 30%, rgba(2, 0, 26, 0.55) 100%);
}
.parcours-slide-e.is-cocon .parcours-slide-letter {
    right: -3vw;
    left: auto;
    color: rgba(232, 201, 138, 0.10);
    font-size: clamp(280px, 38vw, 580px);
    line-height: 0.85;
    text-shadow: 0 0 80px rgba(232, 201, 138, 0.08);
}
.parcours-slide-e.is-cocon .parcours-slide-badge {
    border-color: rgba(232, 201, 138, 0.45);
    background: rgba(232, 201, 138, 0.10);
    color: #e8c98a;
}
.parcours-slide-e.is-cocon .parcours-slide-title .accent {
    background: linear-gradient(135deg, #f4dba2 0%, #e8b96a 50%, #f4dba2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.parcours-slide-e.is-cocon .parcours-slide-stats {
    border-top-color: rgba(232, 201, 138, 0.20);
    border-bottom-color: rgba(232, 201, 138, 0.20);
}
.parcours-slide-e.is-cocon .parcours-slide-stats dt {
    color: rgba(244, 219, 162, 0.78);
}
.parcours-slide-e.is-cocon .parcours-slide-tags li {
    border-color: rgba(232, 201, 138, 0.28);
}
.parcours-slide-e.is-cocon .parcours-slide-tags li.is-strong {
    border-color: rgba(232, 201, 138, 0.60);
    background: rgba(232, 201, 138, 0.18);
    color: #f4dba2;
}
.parcours-slide-e.is-cocon .parcours-slide-cta {
    border-color: rgba(232, 201, 138, 0.55);
}
.parcours-slide-e.is-cocon .parcours-slide-cta:hover {
    background: rgba(232, 201, 138, 0.18);
    border-color: rgba(244, 219, 162, 0.85);
}
.parcours-slide-e.is-cocon .parcours-slide-cta-primary {
    background: linear-gradient(135deg, #e8b96a 0%, #f4dba2 100%);
    color: #02001a;
    box-shadow: 0 14px 36px -12px rgba(232, 185, 106, 0.65);
}
.parcours-slide-e.is-cocon .parcours-slide-cta-primary:hover {
    background: linear-gradient(135deg, #f4dba2 0%, #e8b96a 100%);
    color: #02001a;
}
.parcours-slide-e.is-cocon .parcours-slide-foot svg {
    color: #f4dba2;
}
.parcours-slide-e.is-cocon .parcours-slide-foot em {
    color: rgba(244, 219, 162, 0.92);
}
.parcours-slide-e.is-cocon .parcours-slide-ribbon {
    background: linear-gradient(135deg, #e8b96a 0%, #f4dba2 100%);
    color: #02001a;
    box-shadow: 0 14px 36px -12px rgba(232, 185, 106, 0.65);
}
.parcours-slide-e.is-cocon .parcours-slide-ribbon-dot {
    background: #02001a;
    box-shadow: 0 0 0 3px rgba(2, 0, 26, 0.3);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
    .parcours-slide {
        padding: 100px 24px 80px;
        align-items: flex-end;
    }
    .parcours-slide.is-mirrored .parcours-slide-content {
        margin-left: 0;
        text-align: left;
    }
    .parcours-slide.is-featured .parcours-slide-content {
        text-align: left;
    }
    .parcours-slide.is-featured .parcours-slide-announce-badge {
        width: 100%;
        max-width: 100%;
    }
    .parcours-slide.is-featured .parcours-slide-announce-text {
        text-align: left;
    }
    .parcours-slide-letter {
        font-size: clamp(220px, 60vw, 360px) !important;
        opacity: 0.7;
        right: -10vw !important;
        left: auto !important;
        transform: translateY(-50%) !important;
    }
    .parcours-slide-veil {
        background:
            linear-gradient(180deg, rgba(8, 4, 0, 0.55) 0%, rgba(8, 4, 0, 0.92) 70%) !important;
    }
    .parcours-slide-tags,
    .parcours-slide.is-featured .parcours-slide-tags {
        justify-content: flex-start !important;
    }
    .parcours-slide-ribbon {
        top: 24px;
        right: 24px;
    }
    .parcours-intro-trio {
        gap: 8px;
    }
    .parcours-intro-step {
        padding: 8px 16px 8px 10px;
        gap: 8px;
    }
    .parcours-intro-letter {
        width: 22px;
        height: 22px;
        font-size: 12px;
    }
    .parcours-intro-label {
        font-size: 17px;
    }
    .parcours-intro-arrow svg {
        width: 16px;
        height: 10px;
    }
}
@media (max-width: 600px) {
    .parcours-slide-stats {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* ============================================================
   SLIDES PLEIN ÉCRAN — Refonte éditoriale
   3 sections accueil retravaillées pour tenir chacune sur 100vh
   avec une signature visuelle propre :
   ─ Slide 1 · Masterclasses & Rencontres → Split éditorial + cartes horizontales
   ─ Slide 2 · Atelier 8 places            → Filigrane "8" géant + banner 3 colonnes
   ─ Slide 3 · QG 3 après-midis         → Carte hebdomadaire L·M·M + piliers en frise
   ============================================================ */

@media (min-width: 1100px) and (min-height: 780px) {

    /* ── Communs aux 3 slides ───────────────────────────── */
    .section-masterclass,
    .section-atelier,
    .section-cocon {
        min-height: 100vh;
        padding-top: 60px !important;
        padding-bottom: 60px !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
    }
    .section-masterclass > .ecole-container,
    .section-atelier > .container,
    .section-cocon > .container {
        width: 100%;
        position: relative;
        z-index: 2;
    }

    /* ════════════════════════════════════════════════════════════
       SLIDE 1 — MASTERCLASSES & RENCONTRES
       Split éditorial : header massif à gauche, cartes horizontales à droite
       Marquee placé comme bandeau au-dessus des cartes (col 2)
       ════════════════════════════════════════════════════════════ */
    .section-masterclass > .ecole-container {
        display: grid;
        /* Header (col 1) un peu plus large que les cards (col 2) pour
           laisser respirer le titre « Masterclasses » qui débordait. */
        grid-template-columns: minmax(460px, 1.2fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 56px;
        row-gap: 18px;
        align-items: stretch;
        min-height: calc(100vh - 160px);
    }
    .section-masterclass .ecole-section-header {
        grid-column: 1;
        grid-row: 1 / span 2;
        text-align: left !important;
        max-width: none !important;
        margin: 0 !important;
        align-self: center;
        position: relative;
        min-width: 0;
    }
    .section-masterclass .ecole-pill-tag {
        margin-bottom: 18px;
    }
    .section-masterclass .ecole-section-title {
        font-size: clamp(56px, 7vw, 108px) !important;
        line-height: 0.92 !important;
        letter-spacing: 0.01em;
        margin: 0 0 22px !important;
        text-wrap: balance;
    }
    .section-masterclass .ecole-section-desc {
        font-size: clamp(15.5px, 1.3vw, 18px);
        font-family: 'Playfair Display', serif;
        line-height: 1.65;
        max-width: 520px;
        margin: 0;
    }

    /* Marquee : bandeau supérieur côté droit */
    .section-masterclass .mr-marquee {
        grid-column: 2;
        grid-row: 1;
        margin: 0 !important;
    }
    .section-masterclass .mr-marquee-item {
        font-size: 20px;
    }

    /* Grid des cartes : col 2, deux lignes */
    .section-masterclass .mr-grid {
        grid-column: 2;
        grid-row: 2;
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr 1fr !important;
        gap: 18px !important;
    }
    /* Cartes en mode horizontal — image à gauche, contenu à droite */
    .section-masterclass .mr-card {
        display: grid !important;
        grid-template-columns: 220px minmax(0, 1fr);
        grid-template-rows: 1fr;
    }
    .section-masterclass .mr-media {
        aspect-ratio: auto !important;
        height: 100%;
        min-height: 0;
        border-bottom: none !important;
        border-right: 1px solid rgba(255, 255, 255, 0.06);
    }
    .section-masterclass .mr-body {
        padding: 18px 22px !important;
    }
    .section-masterclass .mr-card h3 {
        font-size: 21px !important;
        line-height: 1.1 !important;
        margin: 0 0 6px !important;
        letter-spacing: 1px !important;
    }
    .section-masterclass .mr-card p {
        font-size: 12.8px !important;
        line-height: 1.5 !important;
        margin: 0 0 10px !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* Sur la slide plein écran : agenda + chips + CTA bien compacts */
    .section-masterclass .mr-sessions {
        margin: 0 0 8px !important;
        padding: 8px 11px 7px !important;
    }
    .section-masterclass .mr-sessions-head {
        margin-bottom: 4px !important;
        font-size: 9.5px !important;
        padding: 2px 8px !important;
    }
    .section-masterclass .mr-sessions-count {
        font-size: 9px !important;
    }
    .section-masterclass .mr-sessions-body {
        min-height: 26px !important;
        gap: 6px !important;
    }
    .section-masterclass .mr-sessions-arrow {
        width: 24px !important;
        height: 24px !important;
    }
    .section-masterclass .mr-sessions-arrow svg {
        width: 11px !important;
        height: 11px !important;
    }
    .section-masterclass .mr-session-date {
        font-size: 12.2px !important;
    }
    .section-masterclass .mr-session-loc {
        font-size: 10.5px !important;
    }
    .section-masterclass .mr-meta-chips {
        margin-bottom: 10px !important;
        gap: 5px !important;
    }
    .section-masterclass .mr-meta-chips span {
        padding: 4px 9px !important;
        font-size: 10.6px !important;
    }
    .section-masterclass .mr-cta {
        margin-top: auto;
        padding: 9px 18px !important;
        font-size: 11.5px !important;
        letter-spacing: 0.3px !important;
    }
    .section-masterclass .mr-list {
        gap: 2px !important;
        margin-top: auto !important;
    }
    .section-masterclass .mr-list li {
        font-size: 12.4px !important;
        padding: 5px 0 !important;
    }
    .section-masterclass .mr-list-icon {
        width: 24px !important;
        height: 24px !important;
    }
    .section-masterclass .mr-list-icon svg {
        width: 12px !important;
        height: 12px !important;
    }
    /* Watermark "★" géant en filigrane à gauche du header */
    .mr-watermark {
        position: absolute;
        top: 50%;
        left: -2vw;
        transform: translateY(-50%) rotate(-12deg);
        font-family: 'Bebas Neue', sans-serif;
        font-size: clamp(380px, 64vh, 780px);
        line-height: 0.78;
        color: transparent;
        background: linear-gradient(180deg, rgba(255, 175, 110, 0.10) 0%, rgba(255, 175, 110, 0.02) 70%, rgba(255, 175, 110, 0) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        z-index: 0;
        pointer-events: none;
        user-select: none;
    }
    /* Atténuer / masquer les stickers parasites pour cette mise en page */
    .section-masterclass .mr-stage-beam {
        opacity: 0.28 !important;
    }
    .section-masterclass .mr-sticker-3,
    .section-masterclass .mr-sticker-4 {
        display: none !important;
    }

    /* ════════════════════════════════════════════════════════════
       SLIDE 2 — ATELIER "Le 8 lumineux"
       Filigrane "8" géant en background.
       Banner 3 colonnes : image | piliers | prix/CTA (panneau à part)
       ════════════════════════════════════════════════════════════ */
    .atelier-watermark {
        position: absolute;
        top: 50%;
        right: -4vw;
        transform: translateY(-50%);
        font-family: 'Bebas Neue', sans-serif;
        font-size: clamp(420px, 78vh, 920px);
        line-height: 0.78;
        letter-spacing: -0.04em;
        color: transparent;
        background: linear-gradient(180deg, rgba(232, 201, 138, 0.16) 0%, rgba(232, 201, 138, 0.04) 60%, rgba(232, 201, 138, 0) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        z-index: 0;
        pointer-events: none;
        user-select: none;
    }
    .section-atelier .ecole-section-header {
        margin: 0 auto 26px !important;
        max-width: 740px !important;
    }
    .section-atelier .ecole-section-title {
        font-size: clamp(38px, 4.4vw, 60px) !important;
        line-height: 0.98 !important;
        margin-bottom: 14px !important;
    }
    .section-atelier .ecole-section-desc {
        font-size: 14px;
        line-height: 1.6;
    }
    /* Banner — passe à 3 colonnes en utilisant display:contents sur .atelier-text */
    .section-atelier .atelier-banner {
        padding: 32px 36px !important;
        column-gap: 40px !important;
        row-gap: 0 !important;
        grid-template-columns: 280px minmax(0, 1fr) 230px !important;
        grid-template-areas: "image pillars price" !important;
        align-items: center !important;
        margin-top: 0 !important;
    }
    .section-atelier .atelier-image {
        grid-area: image;
        aspect-ratio: 4 / 5 !important;
        margin: 0;
    }
    .section-atelier .atelier-text {
        display: contents;
    }
    .section-atelier .atelier-pillars {
        grid-area: pillars;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        gap: 14px 28px !important;
    }
    .section-atelier .atelier-pillar h6 {
        font-size: 14.5px;
        margin: 0 0 4px;
    }
    .section-atelier .atelier-pillar p {
        font-size: 12.6px;
        line-height: 1.5;
    }
    .section-atelier .atelier-pillar-num {
        font-size: 13px;
        margin-bottom: 6px;
    }
    /* Colonne prix : panneau distinct vertical avec CTA pleine largeur */
    .section-atelier .atelier-cta-row {
        grid-area: price;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        margin: 0 !important;
        padding: 20px 20px;
        border-radius: 18px;
        border: 1px solid rgba(232, 201, 138, 0.22);
        background:
            linear-gradient(160deg, rgba(40, 25, 8, 0.55) 0%, rgba(20, 10, 4, 0.78) 100%);
    }
    .section-atelier .atelier-price-tag {
        text-align: center;
    }
    .section-atelier .atelier-price-tag strong {
        font-size: 30px !important;
    }
    .section-atelier .atelier-cta {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* ════════════════════════════════════════════════════════════
       SLIDE 3 — COCON "Carte hebdomadaire"
       Bande L · M · M en haut, piliers en frise horizontale,
       image qui épouse la hauteur du panneau de gauche.
       ════════════════════════════════════════════════════════════ */
    .section-cocon .ecole-section-header {
        margin: 0 auto 32px !important;
        max-width: 800px !important;
    }
    .section-cocon .ecole-section-title {
        font-size: clamp(42px, 5vw, 68px) !important;
        line-height: 0.96 !important;
        margin-bottom: 16px !important;
    }
    .section-cocon .ecole-section-desc {
        font-size: 14.5px;
        line-height: 1.65;
    }
    /* Banner sans son fond global — chaque demi reçoit son propre traitement */
    .section-cocon .cocon-banner {
        padding: 0 !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
        background: none !important;
        border: 0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        grid-template-columns: minmax(0, 1fr) 360px !important;
        align-items: stretch !important;
        margin-top: 0 !important;
    }
    .section-cocon .cocon-text {
        padding: 36px 42px;
        border-radius: 24px 0 0 24px;
        background:
            radial-gradient(ellipse 600px 400px at 6% 12%, rgba(150, 180, 230, 0.12) 0%, transparent 65%),
            linear-gradient(160deg, rgba(20, 32, 58, 0.62) 0%, rgba(8, 14, 28, 0.82) 100%);
        backdrop-filter: blur(11.5px);
        -webkit-backdrop-filter: blur(11.5px);
        border: 1px solid rgba(150, 180, 230, 0.22);
        border-right: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 20px;
    }
    /* Bandeau L · M · M : 3 cartes-jour, identité forte */
    .cocon-week-strip {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .cocon-week-strip-day {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 14px 0 12px;
        border-radius: 14px;
        border: 1px solid rgba(232, 201, 138, 0.22);
        background:
            linear-gradient(160deg, rgba(232, 201, 138, 0.06) 0%, rgba(232, 201, 138, 0.02) 100%),
            rgba(20, 32, 58, 0.42);
        position: relative;
        overflow: hidden;
    }
    .cocon-week-strip-day::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 12%;
        right: 12%;
        height: 2px;
        border-radius: 1px;
        background: linear-gradient(90deg, transparent 0%, rgba(232, 201, 138, 0.55) 50%, transparent 100%);
    }
    .cocon-week-strip-day em {
        font-family: 'Bebas Neue', sans-serif;
        font-style: normal;
        font-size: 22px;
        line-height: 1;
        color: var(--champagne, #e8c98a);
        letter-spacing: 1.4px;
        text-transform: uppercase;
    }
    .cocon-week-strip-day span {
        font-family: 'Inter', sans-serif;
        font-size: 11px;
        color: rgba(245, 232, 218, 0.7);
        letter-spacing: 1.6px;
        text-transform: uppercase;
    }
    /* Piliers : frise horizontale séparée par lignes verticales */
    .section-cocon .cocon-pillars {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
        gap: 0 !important;
    }
    .section-cocon .cocon-pillar {
        padding: 0 18px !important;
        border-left: 1px solid rgba(232, 201, 138, 0.16);
    }
    .section-cocon .cocon-pillar:first-child {
        padding-left: 0 !important;
        border-left: 0;
    }
    .section-cocon .cocon-pillar h6 {
        font-size: 13.8px;
        margin: 0 0 4px;
    }
    .section-cocon .cocon-pillar p {
        font-size: 12.4px;
        line-height: 1.5;
    }
    .section-cocon .cocon-pillar-num {
        font-size: 13px;
        margin-bottom: 6px;
    }
    .section-cocon .cocon-price-row {
        margin: 0 !important;
        padding-top: 18px;
        border-top: 1px solid rgba(232, 201, 138, 0.18);
    }
    .section-cocon .cocon-price-tag strong {
        font-size: 30px !important;
    }
    .section-cocon .cocon-image {
        margin: 0 !important;
        height: 100%;
    }
    .section-cocon .cocon-image-frame {
        height: 100%;
        aspect-ratio: auto !important;
        border-radius: 0 24px 24px 0;
        overflow: visible;
    }
    .section-cocon .cocon-image-frame img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 0 24px 24px 0;
    }
    /* Le tampon "Le QG, c'est l'endroit..." doit rester entièrement visible
       au-dessus de l'image (et déborder légèrement vers le bas pour l'effet sticker) */
    .section-cocon .cocon-image-stamp {
        bottom: 14px !important;
        z-index: 5;
        max-width: calc(100% - 24px);
    }
}

/* Sur écrans très hauts (≥ 1100px), respiration */
@media (min-width: 1100px) and (min-height: 1100px) {
    .section-masterclass,
    .section-atelier,
    .section-cocon {
        padding-top: 100px !important;
        padding-bottom: 100px !important;
    }
}

/* Sous le breakpoint 1100px ou 780px de hauteur, on cache le strip
   et les filigranes pour ne pas perturber le layout natif mobile */
@media (max-width: 1099px), (max-height: 779px) {
    .cocon-week-strip,
    .mr-watermark,
    .atelier-watermark {
        display: none !important;
    }
}

/* ---------------------------------------------------------------------------
   ACCUEIL — blocs Modules & Entreprise (réutilisation md-hero-cine / en-hero)
   Hauteur léger sous les pages dédiées 100vh, tout en gardant deux « slides » héro pleines.
   ---------------------------------------------------------------------------- */
/* ══════════════════════════════════════════════════════════════════════════
   ACCUEIL · spotlights Modules & Entreprise (`.hps-*`)
   --------------------------------------------------------------------------
   Deux teasers visuels propres à la home (≠ heros des pages dédiées).
   - Modules    : marquise comedy club + chips défilantes
   - Entreprise : billet d'invitation backstage en perspective
   ══════════════════════════════════════════════════════════════════════════ */

.hps {
    position: relative;
    min-height: min(94vh, 920px);
    padding: 140px 6vw 120px;
    background: radial-gradient(ellipse at 18% 0%,
                    rgba(255, 122, 47, 0.18) 0%, transparent 55%),
                linear-gradient(180deg, #0d0805 0%, #050302 60%, #060200 100%);
    overflow: hidden;
    isolation: isolate;
    color: var(--cream, #f5e8da);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─── Décor commun (spots / grain) */
.hps-stage {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.hps-spot {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    mix-blend-mode: screen;
}
.hps-spot-a {
    top: -10%; left: 8%;
    width: 50vw; height: 50vw;
    background: radial-gradient(circle, rgba(255, 179, 122, 0.55), transparent 70%);
}
.hps-spot-b {
    bottom: -20%; right: -10%;
    width: 55vw; height: 55vw;
    background: radial-gradient(circle, rgba(255, 122, 47, 0.45), transparent 70%);
    opacity: 0.4;
}
.hps-spot-warm {
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw; height: 80vw;
    background: radial-gradient(circle, rgba(255, 175, 110, 0.32), transparent 65%);
    filter: blur(100px);
    opacity: 0.55;
}
.hps-grain {
    position: absolute;
    inset: 0;
    opacity: 0.16;
    mix-blend-mode: overlay;
    background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1px);
    background-size: 3px 3px;
}

/* ─── Lettre géante en filigrane (D pour Modules · E pour Entreprise)
       Même esthétique que `.parcours-slide-letter` (le « 8 » de l'Atelier).
       Par défaut : positionnée à GAUCHE. `.hps-letter-right` la place à droite. */
.hps-letter {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: -3vw;
    transform: translateY(-50%);
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(280px, 38vw, 620px);
    line-height: 0.78;
    letter-spacing: -0.02em;
    color: rgba(255, 175, 110, 0.10);
    text-shadow: 0 0 80px rgba(255, 122, 47, 0.05);
    pointer-events: none;
    user-select: none;
}
.hps-letter-right {
    left: auto;
    right: -3vw;
}
/* La slide Entreprise — le ticket occupe le centre-droit, on cale donc
   le E dans le coin BAS-DROITE, plus gros et plus contrasté, pour qu'il
   déborde joliment autour du ticket sans être masqué. */
.hps-entreprise .hps-letter {
    top: auto;
    bottom: -12%;
    right: -5vw;
    left: auto;
    transform: none;
    font-size: clamp(340px, 46vw, 760px);
    color: rgba(255, 200, 150, 0.18);
    text-shadow: 0 0 120px rgba(255, 122, 47, 0.22);
}
/* Reveal recalculé pour le E bas-droite (slide entreprise) */
.hps-entreprise[data-reveal] .hps-letter {
    transform: translateX(40px);
}
.hps-entreprise.is-revealed .hps-letter {
    transform: translateX(0);
}

/* ─── Wrapper de contenu (au-dessus du décor) */
.hps-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

/* ─── Head (eyebrow + title + deck) */
.hps-head {
    max-width: 820px;
}
.hps-head-center {
    text-align: center;
    margin: 0 auto;
}

.hps-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 175, 110, 0.42);
    background: rgba(255, 122, 47, 0.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffb079;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.hps-eyebrow-light {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 175, 110, 0.5);
    color: #ffd0a8;
}
.hps-eyebrow-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #ff7a2f;
    box-shadow: 0 0 12px rgba(255, 122, 47, 0.9);
    animation: hps-pulse 2.2s ease-in-out infinite;
}
@keyframes hps-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.4); }
}

.hps-title {
    margin: 24px 0 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(54px, 8.4vw, 138px);
    line-height: 0.92;
    letter-spacing: 0.002em;
    color: #f5e8da;
    text-shadow: 0 4px 40px rgba(0, 0, 0, 0.55);
    text-wrap: balance;
}
.hps-title em {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    background: linear-gradient(110deg, #ffd0a8 0%, #ffb079 50%, #ff7a2f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hps-title-light em {
    background: linear-gradient(110deg, #ffe6cf 0%, #ffb079 60%, #ff7a2f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hps-deck {
    margin: 24px 0 0;
    font-family: 'Inter', sans-serif;
    font-size: clamp(15px, 1.25vw, 17.5px);
    line-height: 1.7;
    color: rgba(245, 232, 218, 0.78);
    max-width: 620px;
}
.hps-head-center .hps-deck {
    margin-left: auto;
    margin-right: auto;
}
.hps-deck strong { color: #f5e8da; font-weight: 600; }
.hps-deck-light { color: rgba(245, 232, 218, 0.86); }

/* ─── CTA (bouton primary + hint) */
.hps-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    margin-top: 12px;
}
.hps-head-center + .hps-cta-row { justify-content: center; }

.hps-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 30px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition:
        transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 0.35s ease,
        background 0.35s ease;
}
.hps-cta svg { width: 18px; height: 18px; transition: transform 0.35s ease; }
.hps-cta-primary {
    background: linear-gradient(135deg, #ffb079 0%, #ff7a2f 100%);
    color: #1a0a00;
    box-shadow: 0 22px 48px -18px rgba(255, 122, 47, 0.65),
                0 0 0 1px rgba(255, 122, 47, 0.35) inset;
}
.hps-cta-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 60px -18px rgba(255, 122, 47, 0.85),
                0 0 0 1px rgba(255, 122, 47, 0.55) inset;
}
.hps-cta-primary:hover svg { transform: translateX(4px); }

.hps-cta-hint {
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(245, 232, 218, 0.55);
}

/* ══════════════════════════════════════════════════════════════════════════
   MODULES — marquise de thèmes qui défile
   ══════════════════════════════════════════════════════════════════════════ */

.hps-marquee {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    position: relative;
    overflow: hidden;
    padding: 22px 0;
    border-top: 1px solid rgba(255, 175, 110, 0.18);
    border-bottom: 1px solid rgba(255, 175, 110, 0.18);
    background:
        linear-gradient(180deg, rgba(255, 122, 47, 0.04), rgba(255, 122, 47, 0)),
        rgba(255, 255, 255, 0.015);
    mask-image: linear-gradient(90deg,
        transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.hps-marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    white-space: nowrap;
    animation: hps-marquee-slide 38s linear infinite;
    will-change: transform;
}
@keyframes hps-marquee-slide {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.hps-chip {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 999px;
    border: 1px solid rgba(255, 175, 110, 0.32);
    background: rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(245, 232, 218, 0.92);
    text-transform: none;
}
.hps-chip-sep {
    color: rgba(255, 175, 110, 0.5);
    font-size: 11px;
}

/* ══════════════════════════════════════════════════════════════════════════
   ENTREPRISE — billet d'invitation backstage
   ══════════════════════════════════════════════════════════════════════════ */

.hps-entreprise {
    background: linear-gradient(180deg, #0a0604 0%, #050302 100%);
}
.hps-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hps-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    filter: brightness(0.45) saturate(1.05) hue-rotate(-3deg);
}
.hps-photo-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(8, 4, 0, 0.55) 0%,
            rgba(8, 4, 0, 0.75) 50%,
            rgba(6, 2, 0, 0.92) 100%),
        radial-gradient(ellipse at 28% 60%,
            rgba(255, 122, 47, 0.22) 0%, transparent 60%);
}
.hps-photo-grain {
    position: absolute;
    inset: 0;
    opacity: 0.14;
    mix-blend-mode: overlay;
    background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1px);
    background-size: 3px 3px;
}

.hps-inner-en {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
}

.hps-en-text { max-width: 560px; }

/* Le ticket */
.hps-ticket {
    perspective: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hps-ticket-card {
    position: relative;
    width: min(420px, 90%);
    padding: 38px 36px 30px;
    background:
        linear-gradient(160deg, #fff7ec 0%, #ffe9cf 55%, #ffd9ad 100%);
    color: #1a0a00;
    border-radius: 20px;
    box-shadow:
        0 36px 80px -20px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(0, 0, 0, 0.08) inset,
        0 0 80px -20px rgba(255, 122, 47, 0.45);
    transform: rotateY(-9deg) rotateX(4deg) rotateZ(-2.5deg);
    transform-origin: center;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hps-ticket-card::before,
.hps-ticket-card::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    background: #0a0604;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 0 4px rgba(255, 175, 110, 0.2);
}
.hps-ticket-card::before { left: -11px; }
.hps-ticket-card::after  { right: -11px; }
.hps-ticket:hover .hps-ticket-card {
    transform: rotateY(-4deg) rotateX(2deg) rotateZ(-1deg) translateY(-6px);
}

.hps-ticket-edge {
    position: absolute;
    top: 16px;
    bottom: 16px;
    width: 1px;
    background: repeating-linear-gradient(180deg,
        rgba(0, 0, 0, 0.18) 0, rgba(0, 0, 0, 0.18) 4px,
        transparent 4px, transparent 9px);
}
.hps-ticket-edge-left  { left: 14px; }
.hps-ticket-edge-right { right: 14px; }

.hps-ticket-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(26, 10, 0, 0.55);
    padding-bottom: 16px;
    border-bottom: 1px dashed rgba(26, 10, 0, 0.18);
}
.hps-ticket-stamp {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff7a2f, #ffb079);
    color: #1a0a00;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.hps-ticket-body {
    padding: 26px 0;
}
.hps-ticket-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(26, 10, 0, 0.55);
    margin-bottom: 8px;
}
.hps-ticket-line {
    margin: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(38px, 4.4vw, 58px);
    line-height: 0.94;
    letter-spacing: 0.005em;
    color: #1a0a00;
}
.hps-ticket-line em {
    display: inline-block;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    color: #ff7a2f;
}

.hps-ticket-perforation {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    border-top: 1px dashed rgba(26, 10, 0, 0.22);
}
.hps-ticket-perforation span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(26, 10, 0, 0.18);
}

.hps-ticket-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(26, 10, 0, 0.6);
}
.hps-ticket-foot strong {
    font-weight: 700;
    color: #1a0a00;
    letter-spacing: 0.12em;
}

/* ─── Reveal au scroll : le bloc soulève proprement */
.hps[data-reveal] .hps-inner {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 1s cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hps.is-revealed .hps-inner {
    opacity: 1;
    transform: translateY(0);
}
.hps[data-reveal] .hps-letter {
    opacity: 0;
    transform: translateY(-50%) translateX(-40px);
    transition:
        opacity 1.1s cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: 0.15s;
}
.hps[data-reveal] .hps-letter-right {
    transform: translateY(-50%) translateX(40px);
}
.hps.is-revealed .hps-letter {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
.hps[data-reveal] .hps-ticket-card {
    opacity: 0;
    transform: rotateY(-22deg) rotateX(6deg) rotateZ(-4deg) translateX(40px);
    transition:
        opacity 1.2s cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: 0.2s;
}
.hps.is-revealed .hps-ticket-card {
    opacity: 1;
    transform: rotateY(-9deg) rotateX(4deg) rotateZ(-2.5deg);
}

/* ─── Responsive */
@media (max-width: 960px) {
    .hps { padding: 110px 5vw 90px; min-height: auto; }
    .hps-inner-en {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .hps-en-text { max-width: 100%; }
    .hps-letter {
        font-size: clamp(220px, 60vw, 360px);
        opacity: 0.7;
        left: -8vw;
    }
    .hps-letter-right { left: auto; right: -8vw; }
    .hps-ticket-card {
        transform: rotateY(-4deg) rotateZ(-1.5deg);
        margin: 0 auto;
    }
}
@media (max-width: 600px) {
    .hps-title { font-size: clamp(46px, 12vw, 78px); }
    .hps-cta { padding: 16px 24px; font-size: 13px; }
    .hps-cta-row { gap: 14px; }
    .hps-cta-hint { font-size: 10.5px; letter-spacing: 0.12em; }
    .hps-chip { padding: 8px 16px; font-size: 12.5px; }
}

/* Les slides Modules D et Modules E de la page d'accueil utilisent désormais
   directement la signature `.parcours-slide` (A/B/C) — aucune règle dédiée
   n'est nécessaire ici en dehors du positionnement de la lettre filigrane,
   géré plus haut dans la section `.parcours-slide-letter`. */