/* Styles extraits de resources/views/theme/recruitment/index.blade.php
   (audit 2026-09, T-42 : CSS mis en cache par le navigateur). */
.recruitment-page-redesign {
    --p: #0037CA;
    --pd: #00218A;
    --ink: #0f172a;
    --muted: #52607a;
    --line: rgba(15, 23, 42, 0.1);
    --soft: #f5f7ff;
    --blue: #ecf4ff;
    font-family: var(--font-primary);
    background: linear-gradient(180deg, #fff 0%, #f7f9ff 44%, #fff 100%);
    overflow-x: clip;
}

.recruitment-page-redesign main {
    overflow-x: clip;
}

.recruitment-page-redesign .container {
    position: relative;
    z-index: 1;
}

.recruitment-hero {
    position: relative;
    padding: 42px 0 120px;
    background:
        linear-gradient(135deg, rgba(17, 41, 112, 0.94), rgba(0, 55, 202, 0.82)),
        url('../../images/presentiel-doc/hero-group.png') center/cover no-repeat;
    overflow: hidden;
}

.recruitment-hero::before,
.recruitment-hero::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    opacity: 0.5;
}

.recruitment-hero::before {
    top: -80px;
    right: -40px;
    width: 320px;
    height: 320px;
    background: rgba(255, 255, 255, 0.16);
}

.recruitment-hero::after {
    bottom: -80px;
    left: -20px;
    width: 240px;
    height: 240px;
    background: rgba(255, 198, 0, 0.18);
}

.recruitment-hero__content {
    position: relative;
    z-index: 3;
    max-width: 700px;
    margin: 0 auto;
    color: #fff;
    text-align: center;
}

.recruitment-eyebrow {
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.76);
}

.recruitment-eyebrow--blue {
    color: var(--pd);
}

.recruitment-hero__content h1 {
    margin: 12px 0 14px;
    font-size: clamp(2rem, 3.2vw, 3.35rem);
    line-height: 1.06;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.recruitment-hero__content p {
    max-width: 580px;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
}

.recruitment-hero__actions {
    position: relative;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
}

.recruitment-pill-btn,
.recruitment-outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 28px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    transition: 0.25s ease;
}

.recruitment-pill-btn {
    color: #fff;
    background: #0037CA;
    border: 1px solid #0037CA;

}
.recruitment-pill-btn-1 {
    color: #fff;
    background: transparent;
    border: 1px solid white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 28px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    transition: 0.25s ease;
}

.recruitment-outline-btn {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
}

.recruitment-pill-btn:hover,
.recruitment-outline-btn:hover {
    transform: translateY(-1px);
}

.recruitment-pill-btn--small {
    min-height: 46px;
    padding: 0 22px;
    font-size: 14px;
}

.recruitment-overlap-shell {
    position: relative;
    z-index: 1;
    margin-top: -95px;
    padding-bottom: 24px;
}

.recruitment-mission-card
/* .recruitment-proof-panel*/ {
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.1);
}

.recruitment-mission-card {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    width: min(100%, calc(100% - (var(--content-gutter) * 2)));
    max-width: 1120px;
    margin: 0 auto;
    overflow: hidden;
    /* border-radius: 28px; */
}

.recruitment-mission-card__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px 30px 26px;
}

.recruitment-mission-card__copy h2,
.recruitment-section-head h2 {
    margin: 12px 0;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.08;
}

.title-decorated {
    position: relative;
    display: inline-block;
}

.title-decorated::before {
    content: "";
    position: absolute;
    left: -10px;
    top: -3px;
    background-image: url(../../../images/title-bg.svg);
    width: 24px;
    height: 35px;
    background-repeat: no-repeat;
    /* background-size: contain; */
    z-index: -1;
}

.recruitment-mission-card__copy h2 {
    font-size: 32px;
}

.recruitment-mission-card__copy p,
.recruitment-featured-card__body p,
.recruitment-opportunity-card p,
.recruitment-empty-state p,
.recruitment-faq-item__answer {
    color: var(--muted);
    line-height: 1.8;
}

.recruitment-mission-card__media {
    background: linear-gradient(145deg, rgba(32, 54, 180, 0.08), rgba(0, 55, 202, 0.18));
}

.recruitment-mission-card__media video {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 250px;
    object-fit: cover;
}

.recruitment-video-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(0, 55, 202, 0.1);
    color: var(--pd);
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.4;
}

.recruitment-video-note i {
    font-size: 1.15rem;
}

.recruitment-video-note strong {
    color: var(--pd);
}


.recruitment-opportunities {
    width: min(100%, calc(100% - (var(--content-gutter) * 2)));
    max-width: 1120px;
    margin-inline: auto;
    padding-top: 42px;
}

.recruitment-section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 18px;
    margin-bottom: 26px;
}

.recruitment-section-head--compact {
    margin-bottom: 24px;
}

.recruitment-section-head h2 {
    margin-top: 12px;
    font-size: 32px;
}

.recruitment-featured-stack {
    position: relative;
    padding-bottom: 34px;
}

/* .recruitment-featured-stack__shadow {
    position: absolute;
    inset: auto 36px 0;
    height: calc(100% - 12px);
    border-radius: 30px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    background: rgba(255, 255, 255, 0.82);
    pointer-events: none;
}

.recruitment-featured-stack__shadow--one {
    transform: translateY(16px);
    opacity: 0.7;
}

.recruitment-featured-stack__shadow--two {
    inset-inline: 18px;
    transform: translateY(30px);
    opacity: 0.42;
} */

.recruitment-featured-card {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon body actions";
    gap: 28px;
    align-items: center;
    padding: 34px;
    /* border: 1px solid var(--line); */
    /* border-radius: 30px; */
    /* background: #fff;
    box-shadow: 0 26px 55px rgba(15, 23, 42, 0.08);*/
}

.recruitment-featured-card__icon,
.recruitment-opportunity-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    color: var(--pd);
    background: linear-gradient(145deg, rgba(0, 55, 202, 0.14), rgba(0, 55, 202, 0.05));
}

.recruitment-featured-card__icon {
    grid-area: icon;
    width: 86px;
    height: 86px;
    font-size: 34px;
}

.recruitment-featured-card__body {
    grid-area: body;
    min-width: 0;
}

.recruitment-featured-card__meta,
.recruitment-featured-card__footer,
.recruitment-opportunity-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.recruitment-featured-card__body h3,
.recruitment-opportunity-card h3 {
    margin: 14px 0 12px;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.recruitment-tag {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    color: var(--pd);
    background: #eef2ff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.recruitment-tag--ghost {
    background: rgba(32, 54, 180, 0.08);
}

.recruitment-tag--mobile-only {
    display: none;
}

.recruitment-featured-card__actions {
    grid-area: actions;
    display: grid;
    gap: 18px;
    justify-items: end;
}

.recruitment-deadline-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: end;
    gap: 4px;
    padding: 16px 18px;
    border-radius: 22px;
    /* background: var(--soft); */
    text-align: right;
}

.recruitment-deadline-badge strong {
    font-size: 1rem;
    font-weight: 900;
}

.recruitment-deadline-badge small {
    color: var(--muted);
    font-size: 12px;
}

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

.recruitment-opportunity-card {
    display: grid;
    gap: 18px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

.recruitment-opportunity-card__top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
}

.recruitment-opportunity-card__badge {
    width: 64px;
    height: 64px;
    font-size: 26px;
}

.recruitment-opportunity-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.recruitment-opportunity-card__hint {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.recruitment-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--pd);
    font-weight: 800;
    white-space: nowrap;
}

.recruitment-empty-state {
    padding: 42px 30px;
    border: 1px dashed rgba(15, 23, 42, 0.16);
    border-radius: 28px;
    background: #fff;
    text-align: center;
}

.recruitment-empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin-bottom: 18px;
    border-radius: 999px;
    color: var(--pd);
    background: var(--soft);
    font-size: 30px;
}

.recruitment-empty-state h3 {
    font-size: 1.5rem;
    font-weight: 900;
}

.recruitment-pagination {
    margin-top: 26px;
}

.recruitment-proof-panel {
    width: min(100%, calc(100% - (var(--content-gutter) * 2)));
    max-width: 1120px;
    margin-inline: auto;
    margin-top: 54px;
    padding: 34px;
    /* border-radius: 34px; */
    /* background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.98)),
        url('/images/fond.jpg') center/cover no-repeat; */
}

/* .recruitment-proof-panel__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: 38px;
    align-items: start;
} */

.recruitment-testimonials {
    display: grid;
    gap: 30px;
    padding: 8px 8px 18px;
}

.recruitment-faq-panel {
    padding: 28px;
    /* border: 1px solid rgba(0, 55, 202, 0.14); */
    /* border-radius: 28px;
    background: var(--blue); */
}

.recruitment-slider-controls {
    display: flex;
    gap: 10px;
}

.recruitment-slider-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    color: var(--pd);
    background: #fff;
    /* L'ombre suffit à les faire lire comme des boutons, sans liseré. */
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
    font-size: 22px;
}

.recruitment-slider {
    display: grid;
    gap: 28px;
}

.recruitment-slider__viewport {
    overflow: hidden;
    padding: 6px 6px 14px;
    margin-inline: -6px;
}

.recruitment-slider__track {
    display: flex;
    transition: transform 0.45s ease;
    will-change: transform;
}

.recruitment-slider__slide {
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
    padding-bottom: 12px;
}

.recruitment-quote-card {
    display: grid;
    justify-items: center;
    gap: 18px;
    text-align: center;
}

.recruitment-quote-card__bubble {
    position: relative;
    width: 100%;
    min-height: 184px;
    padding: 28px 24px;
    line-height: 1.75;
}

.recruitment-quote-card__author {
    display: grid;
    justify-items: center;
    gap: 12px;
    margin-top: 14px;
}

.recruitment-quote-card__avatar {
    width: 104px;
    height: 104px;
    padding: 4px;
    border-radius: 999px;
    background: linear-gradient(135deg, #0037CA, #4C74F2);
    box-shadow: 0 10px 22px rgba(0, 55, 202, 0.25);
}

.recruitment-quote-card__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: #fff;
    object-fit: cover;
    object-position: center top;
}

.recruitment-quote-card__author strong {
    display: block;
    font-size: 16px;
    font-weight: 900;
}

.recruitment-quote-card__author span {
    color: var(--muted);
    font-size: 14px;
}

.recruitment-slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}

.recruitment-slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.16);
    transition: 0.25s ease;
}

.recruitment-slider-dot.is-active {
    width: 28px;
    background: var(--p);
}

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

.recruitment-faq-item {
    overflow: hidden;
}

.recruitment-faq-item summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    cursor: pointer;
    list-style: none;
}

.recruitment-faq-item summary::-webkit-details-marker {
    display: none;
}

.recruitment-faq-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    color: var(--pd);
    background: rgba(0, 55, 202, 0.14);
    font-weight: 900;
}

.recruitment-faq-item__title {
    font-weight: 700;
    line-height: 1.55;
}

.recruitment-faq-item__toggle {
    position: relative;
    width: 18px;
    height: 18px;
}

.recruitment-faq-item__toggle::before,
.recruitment-faq-item__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: var(--pd);
    transform: translate(-50%, -50%);
}

.recruitment-faq-item__toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
    transition: 0.2s ease;
}

.recruitment-faq-item[open] .recruitment-faq-item__toggle::after {
    transform: translate(-50%, -50%) rotate(0);
}

.recruitment-faq-item__answer {
    padding: 0 20px 18px 66px;
}

@media (max-width: 1199px) {
    .recruitment-featured-card {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "icon body"
            "actions actions";
        align-items: start;
    }

    .recruitment-featured-card__actions {
        grid-column: 1 / -1;
        grid-auto-flow: column;
        justify-content: space-between;
        justify-items: start;
    }

    .recruitment-proof-panel__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    .recruitment-hero {
        padding: 38px 0 108px;
    }

    .recruitment-hero__content h1 {
        font-size: clamp(1.85rem, 4vw, 2.8rem);
    }

    .recruitment-hero__content p {
        font-size: 0.96rem;
        line-height: 1.6;
    }

    .recruitment-overlap-shell {
        margin-top: -138px;
    }

    .recruitment-mission-card,
    .recruitment-opportunity-grid,
    .recruitment-slider__slide {
        grid-template-columns: 1fr;
    }

    .recruitment-mission-card {
        max-width: 100%;
    }

    /* Mobile : vidéo de la mission remontée AU-DESSUS du texte. */
    .recruitment-mission-card__media {
        order: -1;
    }

    .recruitment-mission-card__copy,
    .recruitment-proof-panel {
        padding-inline: 24px;
    }

    .recruitment-testimonials {
        padding: 4px 0 14px;
    }

    .recruitment-mission-card__copy {
        padding-block: 24px;
    }

    .recruitment-mission-card__media video {
        min-height: 240px;
    }

    .recruitment-featured-card__icon,
    .recruitment-featured-card__actions {
        justify-self: start;
    }

    .recruitment-featured-card {
        gap: 20px;
    }

    .recruitment-opportunity-card__footer {
        flex-direction: column;
        align-items: start;
    }
}

@media (max-width: 767px) {
    .recruitment-hero {
        padding: 30px 0 86px;
        background-position: center right 24%;
    }

    .recruitment-hero__content {
        display: grid;
        justify-items: center;
        row-gap: 14px;
        max-width: 34rem;
        margin-inline: auto;
        text-align: center;
    }

    .recruitment-eyebrow {
        justify-content: center;
        margin-inline: auto;
    }

    .recruitment-hero > .container,
    .recruitment-overlap-shell > .container {
        padding-inline: 18px;
    }

    .recruitment-overlap-shell {
        margin-top: 20px;
    }

    .recruitment-mission-card,
    .recruitment-opportunities,
    .recruitment-proof-panel {
        width: 100%;
        max-width: none;
    }

    .recruitment-hero__content h1 {
        font-size: clamp(1.7rem, 8vw, 2.3rem);
        max-width: 12ch;
        margin: 0 auto;
        line-height: 1.18;
        letter-spacing: -0.03em;
    }

    .recruitment-hero__content p {
        max-width: 34ch;
        margin: 0 auto;
        font-size: 0.96rem;
        line-height: 1.72;
    }

    .recruitment-hero__actions {
        width: min(100%, 23rem);
        margin: 8px auto 0;
        justify-content: center;
        align-items: center;
    }

    .recruitment-section-head {
        flex-direction: column;
        align-items: stretch;
    }

    .recruitment-featured-card,
    .recruitment-opportunity-card,
    .recruitment-proof-panel {
        border-radius: 24px;
    }

    .recruitment-featured-stack__shadow {
        inset-inline: 14px;
    }

    .recruitment-featured-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "icon"
            "body"
            "actions";
        gap: 18px;
        padding: 24px;
    }

    .recruitment-featured-card__icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        font-size: 20px;
    }

    .recruitment-featured-card__body {
        display: flex;
        flex-direction: column;
    }

    @media (min-width: 640px) {
        .hero-content-box {
            padding: 20px;
            border-radius: 20px;
        }
    }

    @media (min-width: 768px) {
        .hero-content-box {
            padding: 24px;
        }
    }

    @media (min-width: 1024px) {
        .hero-content-box {
            padding: 28px;
            margin-top: 0;
            margin-bottom: 0;
            background: rgba(255, 255, 255, 0.98) !important;
        }
    }

    /* Section Title - Responsive */
    .section-title-wrapper {
        position: relative;
    }

    .section-title {
        position: relative;
        z-index: 2;
        font-family: var(--font-primary) !important;
        font-style: normal !important;
        font-weight: 800 !important;
        font-size: 24px !important;
        line-height: 32px !important;
        color: var(--color-heading, #0B0A07) !important;
        margin: 0 !important;
        text-align: left !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    @media (min-width: 640px) {
        .section-title {
            font-size: 28px !important;
            line-height: 36px !important;
        }
    }

    @media (min-width: 768px) {
        .section-title {
            font-size: 32px !important;
            line-height: 40px !important;
            width: auto !important;
            max-width: 811px !important;
        }
    }

    /* SVG décoratif responsive */
    .section-title-decoration {
        position: absolute;
        left: 0;
        top: -50px;
        z-index: 1;
        width: 18px;
        height: 36px;
        gap: -10px !important;
    }

    @media (min-width: 640px) {
        .section-title-decoration {
            width: 20px;
            height: 40px;
        }
    }

    @media (min-width: 768px) {
        .section-title-decoration {
            width: 24px;
            height: 48px;
        }
    }

    /* Styles pour la grille des offres */
    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Hover effects */
    .group:hover .group-hover\:scale-105 {
        transform: scale(1.05);
    }

    .group:hover .group-hover\:text-primary-500 {
        color: var(--primary-color);
    }

    /* Grille de la section hero pour placer le texte et la vidéo */
    .hero-grid {
        display: grid;
        grid-template-areas:
            "content"
            "video";
        grid-template-columns: 1fr;
        gap: 24px;
        min-width: 0;
    }

    .hero-content {
        grid-area: content;
    }

    .hero-video-area {
        grid-area: video;
        width: 100%;
        align-self: stretch;
        display: none;
    }

    .recruitment-tag--mobile-only {
        display: inline-flex;
    }

    .recruitment-featured-card__meta,
    .recruitment-featured-card__footer,
    .recruitment-opportunity-card__meta {
        gap: 8px;
    }

    .recruitment-featured-card__footer {
        order: 1;
        margin-bottom: 12px;
    }

    .recruitment-featured-card__body h3 {
        order: 2;
        margin: 0 0 12px;
    }

    .recruitment-featured-card__body p {
        order: 3;
        margin: 0;
    }

    .recruitment-tag {
        min-height: 34px;
        padding: 0 12px;
        font-size: 12px;
    }

    .recruitment-mission-card {
        border-radius: 24px;
    }

    .recruitment-mission-card__copy {
        padding: 24px 22px;
    }

    .recruitment-proof-panel {
        padding: 24px;
    }

    .recruitment-featured-card,
    .recruitment-opportunity-card,
    .recruitment-faq-panel {
        padding-inline: 22px;
    }

    .recruitment-testimonials {
        gap: 24px;
        padding: 0 0 10px;
    }

    .recruitment-faq-panel {
        padding: 22px;
    }

    .recruitment-slider-controls {
        display: none;
    }

    .recruitment-slider__slide {
        gap: 24px;
    }

    .recruitment-quote-card__bubble {
        min-height: 0;
    }

    .recruitment-faq-item__answer {
        padding-left: 20px;
    }

    .recruitment-deadline-badge {
        display: none;
    }

    .recruitment-featured-card__actions {
        grid-auto-flow: row;
        justify-content: center;
        justify-items: center;
        gap: 14px;
        width: 100%;
    }

    .recruitment-featured-card__actions .recruitment-pill-btn--small {
        width: auto;
        min-width: 148px;
    }
}

@media (max-width: 575px) {
    .recruitment-hero > .container,
    .recruitment-overlap-shell > .container {
        padding-inline: 16px;
    }

    .recruitment-hero__content {
        row-gap: 16px;
    }

    .recruitment-hero__content h1 {
        max-width: 11ch;
        line-height: 1.2;
    }

    .recruitment-hero__content p {
        max-width: 30ch;
        font-size: 0.98rem;
        line-height: 1.78;
    }

    .recruitment-overlap-shell {
        margin-top: 16px;
    }

    .recruitment-pill-btn,
    .recruitment-outline-btn,
    .recruitement-pill-btn-1 {
        width: 100% !important;
    }

    .recruitment-hero__actions {
        gap: 12px;
    }

    .recruitment-mission-card__copy,
    .recruitment-featured-card,
    .recruitment-opportunity-card,
    .recruitment-proof-panel,
    .recruitment-faq-panel {
        padding-inline: 20px;
    }

    .recruitment-opportunities {
        padding-top: 42px;
    }

    .recruitment-featured-stack {
        padding-bottom: 24px;
    }

    .recruitment-featured-stack__shadow--one {
        transform: translateY(12px);
    }

    .recruitment-featured-stack__shadow--two {
        transform: translateY(22px);
    }

    .recruitment-featured-card {
        gap: 16px;
    }

    .recruitment-featured-card__icon {
        width: 40px;
        height: 40px;
        border-radius: 14px;
        font-size: 18px;
    }

    .recruitment-featured-card__footer {
        display: flex;
        gap: 16px;
    }

    .recruitment-hero__actions {
        flex-direction: column;
        width: 100%;
    }

    .recruitment-hero__actions a {
        width: 100%;
    }
}
/* ══════════════════════════════════════════════════════════════════════════
   SCÈNE VIDÉO PLEIN ÉCRAN - « regarder puis postuler »
══════════════════════════════════════════════════════════════════════════ */
.rcx-cine {
    position: relative;
    overflow: hidden;
    height: calc(100svh - 90px);
    min-height: 520px;
    max-height: 1100px;
    background: #040b28;
    color: #fff;
}

.rcx-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* contain : la vidéo entière est visible (aucun recadrage), desktop comme
       mobile. Le fond sombre de .rcx-cine sert de letterbox. */
    object-fit: contain;
    background: #040b28;
}

/* Vidéo mobile portrait fournie : plein cadre (aucune bande sombre). */
.rcx-video.rcx-video--cover {
    object-fit: cover;
}

/* ── Ordinateur : cadre au format 16:9 de la vidéo (source 1920×1080) ──────
   Sur grand écran, la scène occupait toute la largeur pour une hauteur limitée
   à la fenêtre (ratio ~2:1 ou plus) : la vidéo 16:9 en `contain` était alors
   encadrée de larges bandes sombres à gauche et à droite, ce qui la faisait
   paraître « carrée ». On borne désormais la hauteur au 16:9 exact de la
   largeur d'écran et la vidéo remplit le cadre (`cover`).
   La largeur de la vidéo est plafonnée à un ratio 2:1 pour que le recadrage
   vertical reste léger (~5 % en haut et en bas) sur les écrans très larges :
   le logo et les sous-titres incrustés restent visibles. */
@media (min-width: 992px) {
    /* Le menu s'efface tant qu'on est sur la vidéo (cf. plus bas) : la scène
       dispose donc de toute la hauteur de la fenêtre, d'où `100svh` et non
       `100svh - hauteur du header`. */
    .rcx-cine {
        --rcx-stage-h: min(calc(100vw * 9 / 16), 100svh);
        height: var(--rcx-stage-h);
        min-height: 0;
        max-height: none;
    }

    .rcx-video {
        object-fit: cover;
        width: min(100%, calc(var(--rcx-stage-h) * 2));
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    /* ── Menu escamotable pendant la vidéo ────────────────────────────────
       Le header passe en `fixed` (et non `sticky`) uniquement sur cette page :
       il sort du flux, la vidéo démarre donc tout en haut de l'écran et occupe
       les 100svh. Le JS pose `rcx-nav-off` sur le body tant que la vidéo tient
       le haut de l'écran ; le menu réapparaît dès qu'on défile au-delà. */
    /* `bottom: auto` est INDISPENSABLE : au défilement, le JS du thème ajoute
       les classes Tailwind `sticky inset-0` au header, et `inset-0` pose
       `bottom: 0`. Sans effet en `sticky`, mais avec notre `position: fixed`,
       `top: 0` + `bottom: 0` étirent le header sur toute la hauteur de la
       fenêtre : son fond blanc recouvrait alors toute la page.
       Pas de `will-change` non plus : laisser un élément promu en couche GPU
       en permanence est déconseillé et inutile pour une transition de 350ms. */
    body.recruitment-page-redesign > header.imdf-header {
        position: fixed;
        top: 0;
        bottom: auto;
        left: 0;
        right: 0;
        transition: transform .35s ease;
    }

    body.recruitment-page-redesign.rcx-nav-off > header.imdf-header {
        transform: translateY(-100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.recruitment-page-redesign > header.imdf-header {
        transition: none;
    }
}

.rcx-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(3, 8, 28, .5) 0%, rgba(3, 8, 28, 0) 24%),
        linear-gradient(0deg, rgba(3, 8, 28, .9) 0%, rgba(3, 8, 28, .32) 30%, rgba(3, 8, 28, 0) 55%);
}

/* Plus de classe `.rcx-glass` : chrono, bouton son et parcours n'ont ni fond,
   ni flou, ni liseré. Le dégradé de `.rcx-vignette` (haut et bas de la scène)
   assure la lisibilité du texte blanc sur la vidéo. */

.rcx-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px clamp(16px, 3vw, 28px);
}

.rcx-top-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rcx-timer[hidden] {
    display: none;
}

.rcx-timer {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    font-weight: 800;
    padding: 8px 14px;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.rcx-sound {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    font-weight: 800;
    color: #fff;
    padding: 8px 15px;
    cursor: pointer;
    transition: opacity .2s ease;
}

/* Survol sans fond : une simple variation d'opacité, sinon un bloc
   réapparaîtrait au passage du curseur. */
.rcx-sound:hover {
    opacity: .75;
}

.rcx-ended {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    padding: 0 24px;
    background: rgba(3, 8, 28, .55);
}

.rcx-ended.is-visible {
    display: flex;
}

.rcx-ended b {
    font-size: clamp(1.25rem, 3vw, 1.8rem);
    font-weight: 900;
    letter-spacing: -.02em;
}

.rcx-ended-sub {
    color: rgba(255, 255, 255, .78);
    font-size: .95rem;
}

.rcx-replay {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    font-weight: 800;
    color: rgba(255, 255, 255, .88);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .32);
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: .2s ease;
}

.rcx-replay:hover {
    background: rgba(255, 255, 255, .15);
}

.rcx-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    padding: 0 16px calc(18px + env(safe-area-inset-bottom, 0px));
}

/* Sur ordinateur, le bloc flottait un peu haut au-dessus du bas de la vidéo :
   marge basse ramenée de 18 à 6px, soit 12px plus bas. Le mobile garde ses
   18px, qui éloignent aussi le bouton du bord de l'écran.
   Règle placée APRÈS la précédente : à spécificité égale c'est la dernière
   qui gagne, une media query n'ajoutant aucune priorité. */
@media (min-width: 992px) {
    .rcx-panel {
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    }
}

.rcx-card {
    width: min(100%, 470px);
    margin-inline: auto;
    padding: 12px 18px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.rcx-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.rcx-steps > i {
    color: rgba(255, 255, 255, .55);
}

/* Repères d'étape, PAS des boutons. Le fond clair et la bordure — et surtout
   la pastille blanche de l'étape active — leur donnaient l'apparence
   d'éléments cliquables. Il ne reste qu'un voile sombre, juste assez pour que
   le texte blanc reste lisible quel que soit le plan de la vidéo.
   `cursor: default` et `user-select: none` retirent les derniers indices
   d'interactivité au survol et au double-clic. */
.rcx-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .74rem;
    font-weight: 800;
    padding: 0;
    background: none;
    color: rgba(255, 255, 255, .82);
    /* Sans fond, c'est l'ombre portée qui garantit la lisibilité du texte
       blanc quand un plan clair de la vidéo passe derrière. */
    text-shadow: 0 1px 4px rgba(3, 8, 28, .75);
    cursor: default;
    user-select: none;
    transition: .3s ease;
}

.rcx-num {
    width: 17px;
    height: 17px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .66rem;
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* Étape en cours : simplement du texte blanc plein, sans fond. */
.rcx-chip.is-on {
    color: #fff;
}

.rcx-chip.is-on .rcx-num {
    background: rgba(255, 255, 255, .3);
    color: #fff;
}

.rcx-progress {
    display: flex;
    gap: 6px;
    width: 100%;
}

.rcx-seg {
    position: relative;
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    overflow: hidden;
}

.rcx-seg b {
    position: absolute;
    inset: 0;
    width: 0;
    background: #fff;
    border-radius: 999px;
    transition: width .2s linear;
}

.rcx-hint {
    font-size: .78rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .85);
    font-variant-numeric: tabular-nums;
    margin: 0;
}

.rcx-hint.is-ok {
    color: #a7f3cd;
}

.rcx-shake {
    animation: rcx-shake .4s;
}

@keyframes rcx-shake {
    0%, 100% { transform: translateX(0) }
    25% { transform: translateX(-5px) }
    75% { transform: translateX(5px) }
}

.rcx-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 26px;
    border-radius: 999px;
    overflow: hidden;
    font-size: .88rem;
    font-weight: 800;
    width: min(100%, 300px);
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .72);
    border: 1px solid rgba(255, 255, 255, .26);
    cursor: pointer;
    transition: .3s ease;
}

.rcx-cta.is-ready {
    background: #fff;
    color: #0037CA;
    border-color: #fff;
    box-shadow: 0 18px 46px rgba(2, 8, 30, .55);
    animation: rcx-ring 2.2s ease-out infinite;
}

@keyframes rcx-ring {
    0% { box-shadow: 0 18px 46px rgba(2, 8, 30, .55), 0 0 0 0 rgba(255, 255, 255, .5) }
    70% { box-shadow: 0 18px 46px rgba(2, 8, 30, .55), 0 0 0 16px rgba(255, 255, 255, 0) }
    100% { box-shadow: 0 18px 46px rgba(2, 8, 30, .55), 0 0 0 0 rgba(255, 255, 255, 0) }
}

.rcx-cta.is-ready:hover {
    transform: translateY(-2px);
}

/* ── Feuille blanche qui recouvre le bas de la vidéo ── */
.recruitment-overlap-shell.rcx-sheet {
    position: relative;
    z-index: 9;
    margin-top: -26px;
    background: linear-gradient(180deg, #fff 0%, #f7f9ff 60%, #fff 100%);
    border-radius: 30px 30px 0 0;
    padding-top: 4px;
}

/* Sur ordinateur la vidéo occupe le premier écran en entier : la feuille ne
   doit plus mordre dessus, sinon une bande blanche (avec sa poignée) reste
   collée en bas de l'écran. Elle démarre donc exactement sous la vidéo.
   Règle placée APRÈS la précédente : à spécificité égale, c'est la dernière
   qui gagne, une media query n'ajoute aucune priorité. */
@media (min-width: 992px) {
    .recruitment-overlap-shell.rcx-sheet {
        margin-top: 0;
    }
}

/* Même logique en mode « fit » (petit écran, vidéo paysage) : sans cela la
   feuille recouvrait le bas du bouton « Postuler ». */
@media (max-width: 991px) {
    .rcx-cine--fit + .recruitment-overlap-shell.rcx-sheet {
        margin-top: 0;
    }
}

.rcx-grip {
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: #dbe3f2;
    margin: 12px auto 26px;
}

.rcx-mission {
    max-width: 760px;
    margin: 0 auto 26px;
    text-align: center;
}

.rcx-mission p {
    color: var(--muted);
    margin-top: 10px;
    line-height: 1.8;
}

.rcx-points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
    width: min(100%, 940px);
    margin-inline: auto;
}

/* Plus de carte : le contenu est posé directement sur la page, sans fond,
   sans coins arrondis et sans réaction au survol. */
.rcx-point {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.rcx-point-ic {
    width: 46px;
    height: 46px;
    color: #0037CA;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.rcx-point b {
    font-size: 1.02rem;
    font-weight: 800;
}

.rcx-point > span:last-child {
    font-size: .9rem;
    color: var(--muted);
    line-height: 1.65;
}

.rcx-after-head {
    max-width: 760px;
    margin: 48px auto 22px;
    text-align: center;
}

.rcx-after {
    width: min(100%, 940px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    counter-reset: rcxstep;
}

.rcx-after-step {
    position: relative;
    padding: 10px 26px 10px 0;
}

.rcx-after-step::before {
    counter-increment: rcxstep;
    content: counter(rcxstep, decimal-leading-zero);
    font-size: .8rem;
    font-weight: 900;
    color: #0037CA;
    letter-spacing: .08em;
}

.rcx-after-step::after {
    content: "";
    position: absolute;
    top: 19px;
    left: 34px;
    right: 10px;
    height: 2px;
    background: linear-gradient(90deg, #0037CA 0 8px, rgba(4, 52, 196, .18) 8px);
}

.rcx-after-step:last-child::after {
    display: none;
}

.rcx-after-step b {
    display: block;
    margin-top: 10px;
    font-size: .98rem;
    font-weight: 800;
}

.rcx-after-step span {
    font-size: .88rem;
    color: var(--muted);
    line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════════════════
   MISE EN FORME DU CONTENU SOUS LA VIDÉO
   Regroupé ici, après les règles de base, pour rester lisible et gagner la
   cascade sans avoir à empiler des sélecteurs.
══════════════════════════════════════════════════════════════════════════ */

/* ── Titres de section ────────────────────────────────────────────────────
   Le décor jaune reprend exactement la géométrie de la page d'accueil
   (« Nos Parcours diplômants ») : 24×35px calés à -10px sur un titre de 32px,
   soit .75em × 1.09em à -.3125em. Exprimé en `em`, il reste proportionnel
   quelle que soit la taille du titre — en pixels fixes il débordait sur la
   première lettre des titres plus petits.
   `position: relative; z-index: 2` comme sur l'accueil : le décor (z-index
   -1) reste ainsi DERRIÈRE le texte mais au-dessus du fond de la section.
   Les titres eux-mêmes sont harmonisés : même taille, même graisse, même
   interlettrage d'une section à l'autre. */
.rcx-sheet .section-title {
    font-size: clamp(1.4rem, 2.3vw, 1.9rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
    margin: 0;
    position: relative;
    z-index: 2;
}

/* Décor placé DANS le flux du texte, et non en absolu sur la boîte du titre.
   En absolu, un titre qui se replie sur deux lignes pose problème : sa boîte
   occupe alors toute la largeur disponible alors que la première ligne,
   centrée, commence plus à droite — le décor restait collé au bord de la
   boîte, détaché du texte (cas « La mission IMDF… »).
   Dans le flux, il suit la première lettre quel que soit le repli.
   Les marges négatives s'annulent (-.3125 + .75 - .4375 = 0) : l'avance est
   nulle, donc le texte n'est pas décalé et le centrage reste identique. Le
   décor déborde de .3125em à gauche et passe .4375em sous la première lettre,
   soit exactement le recouvrement de 13px de la page d'accueil. */
.rcx-sheet .title-decorated::before {
    position: static;
    display: inline-block;
    left: auto;
    top: auto;
    width: .75em;
    height: 1.09em;
    margin-left: -.3125em;
    margin-right: -.4375em;
    vertical-align: -.16em;
    background-size: contain;
    background-position: left top;
}

/* ── Intro de la mission ─────────────────────────────────────────────────── */
/* ── Une seule colonne de contenu ─────────────────────────────────────────
   La page empilait trois largeurs différentes : 1120px pour les témoignages
   et la FAQ, 940px pour les étapes, et pleine largeur pour la mission — donc
   autant de bords gauches différents. Toutes les sections partagent désormais
   la colonne du panneau témoignages, ce qui donne un bord unique sans que ces
   sections-là ne bougent. Le retrait de 34px évite que le texte ne touche le
   bord de la fenêtre une fois le contenu aligné à gauche. */
.rcx-sheet > .container {
    width: min(100%, 1120px);
    margin-inline: auto;
    padding-inline: 34px;
}

.rcx-sheet .recruitment-proof-panel,
/* `.recruitment-testimonials` portait 8px de retrait, qui decalait le titre
   « Pourquoi les experts » et tout le carrousel par rapport aux autres
   sections. */
.rcx-sheet .recruitment-testimonials {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

.rcx-mission {
    max-width: 720px;
    margin: 0 0 40px;
    text-align: left;
}

.rcx-mission p {
    margin-top: 14px;
    font-size: 1rem;
}

/* ── Les trois arguments ──────────────────────────────────────────────────
   Centrés sous une intro elle-même centrée : l'icône, le titre et le texte
   partagent le même axe, au lieu d'un bloc de texte à gauche et d'une icône
   isolée en haut. Marges internes réduites : sans fond, un `padding: 24px`
   ne creusait que du vide. */
.rcx-points {
    gap: 30px 24px;
    /* Pleine largeur : les trois colonnes s'appuient sur les mêmes bords que
       les autres sections, au lieu d'un bloc de 880px centré. */
    width: 100%;
    margin-inline: 0;
}

.rcx-point {
    align-items: flex-start;
    text-align: left;
    padding: 0;
    gap: 10px;
}

.rcx-point-ic {
    width: auto;
    height: auto;
    font-size: 30px;
}

.rcx-point b {
    font-size: 1.05rem;
}

.rcx-point > span:last-child {
    max-width: 34ch;
}

/* ── Étapes « Après votre candidature » ──────────────────────────────────── */
.rcx-after-head {
    margin: 58px 0 28px;
    text-align: left;
}

.rcx-after {
    gap: 4px;
    width: 100%;
    margin-inline: 0;
}

/* ── Témoignages ──────────────────────────────────────────────────────────
   `min-height: 184px` était la hauteur de l'ancienne bulle : une fois le fond
   retiré, elle laissait la citation suspendue très loin de son auteur. La
   citation et la personne qui la signe forment de nouveau un seul bloc. */
/* Exception assumée : le reste de la page est aligné à gauche, mais une
   citation et le portrait de son auteur se lisent mieux centrés. */
.recruitment-quote-card {
    gap: 18px;
    justify-items: center;
    text-align: center;
}

.recruitment-quote-card__author {
    justify-items: center;
    text-align: center;
}

.recruitment-quote-card__bubble {
    min-height: 0;
    padding: 0;
    font-size: 1rem;
}

.recruitment-quote-card__author {
    margin-top: 0;
    gap: 10px;
}

/* ── FAQ ──────────────────────────────────────────────────────────────────
   Sans cadre ni fond, ce sont l'espacement et l'alignement qui structurent la
   liste : questions plus aérées, réponse alignée sur la question (et non sur
   la pastille), pastille allégée. */
.recruitment-faq-panel {
    padding: 28px 0 0;
}

.recruitment-faq-list {
    gap: 2px;
}

.recruitment-faq-item summary {
    /* Aucun retrait horizontal : la pastille « ? » se cale exactement sur le
       bord gauche commun aux autres sections. */
    padding: 16px 0;
    gap: 12px;
}

.recruitment-faq-item__icon {
    width: 26px;
    height: 26px;
    font-size: .8rem;
    background: rgba(0, 55, 202, 0.1);
}

.recruitment-faq-item__answer {
    padding: 0 0 18px 38px;
    margin: 0;
}

/* ── Mobile : un seul bord gauche, et de l'air sur les côtés ───────────────
   Trois défauts constatés sur un écran de 393px :
   1. deux bords gauches différents — 16px pour la mission et les étapes, 36px
      pour les témoignages et la FAQ, car `.recruitment-proof-panel` ajoute
      20px de marge interne et contient aussi le panneau FAQ ;
   2. le décor des titres, qui déborde de .3125em à gauche du texte, arrivait
      à 9px du bord de l'écran ;
   3. le thème force `text-align: left` sur les titres de section en dessous
      de 768px, alors que le corps de texte restait centré : l'alignement
      changeait d'un élément à l'autre à l'intérieur d'une même section.
   Tout le contenu est donc aligné à gauche sur un bord unique. */
@media (max-width: 767px) {
    .recruitment-overlap-shell > .container {
        padding-inline: 22px;
    }

    .rcx-sheet .recruitment-proof-panel {
        padding-inline: 0;
    }

    /* L'alignement à gauche est désormais commun à toutes les tailles d'écran
       (voir plus haut) ; il ne reste ici que les ajustements propres au mobile. */
    .rcx-points {
        gap: 26px;
    }

    .rcx-point > span:last-child {
        max-width: none;
    }

    .recruitment-quote-card__bubble {
        padding: 0;
    }
}

@media (max-width: 991px) {
    .rcx-cine {
        height: calc(100svh - 72px);
    }

    /* ── Pas de vidéo mobile (portrait) configurée ────────────────────────
       On joue alors la vidéo paysage 16:9 sur petit écran. Le cadre prenait
       toute la hauteur de l'écran : la vidéo, très plate, se retrouvait
       perdue au milieu d'immenses zones sombres vides. En mode « fit », la
       scène se règle sur la hauteur réelle de la vidéo et la carte
       « Regardez → Postulez » vient se placer juste en dessous.
       (classe posée par le JS quand la source paysage est utilisée) */
    .rcx-cine--fit {
        height: auto;
        min-height: 0;
        max-height: none;
    }

    .rcx-cine--fit .rcx-video {
        position: relative;
        inset: auto;
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .rcx-cine--fit .rcx-panel {
        position: relative;
        inset: auto;
        padding-top: 14px;
    }

    /* Vignette et écran de fin restent cantonnés à la zone vidéo, sinon ils
       assombrissent la carte placée en dessous. */
    .rcx-cine--fit .rcx-vignette,
    .rcx-cine--fit .rcx-ended {
        bottom: auto;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 640px) {
    /* `:not(.rcx-cine--fit)` : en mode « fit » la hauteur suit la vidéo, un
       plancher de 480px y réintroduirait du vide. */
    .rcx-cine:not(.rcx-cine--fit) {
        min-height: 480px;
    }

    .rcx-card {
        padding: 14px 16px 13px;
    }

    .rcx-sound span {
        display: none;
    }

    /* Écran de fin : textes resserrés, il tenait trop de place sur mobile. */
    .rcx-ended {
        gap: 8px;
        padding: 0 18px;
    }

    .rcx-ended b {
        font-size: 1.1rem;
        line-height: 1.3;
    }

    .rcx-ended-sub {
        font-size: .82rem;
        line-height: 1.45;
        max-width: 30ch;
    }

    .rcx-replay {
        font-size: .74rem;
        padding: 6px 13px;
    }

    .rcx-after {
        gap: 14px;
    }

    .rcx-after-step::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rcx-cta.is-ready {
        animation: none;
    }
}

/* ── P21 : modal de candidature ─────────────────────────────────────────── */
.apply-modal {
    position: fixed;
    inset: 0;
    /* Au-dessus du menu du site (sticky/fixed en z-index 99999/999999). */
    z-index: 1000001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.apply-modal.hidden {
    display: none;
}

.apply-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(2px);
}

.apply-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 540px);
    max-height: min(90vh, 760px);
    /* auto : la barre n'apparaît que si le contenu déborde vraiment. */
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border-radius: 22px;
    padding: 32px 28px 26px;
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.28);
    /* Firefox : barre fine et discrète. */
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.2) transparent;
}

/* WebKit/Chromium : barre fine, arrondie, en overlay léger, qui n'empiète
   pas sur les angles arrondis du modal. */
.apply-modal__dialog::-webkit-scrollbar {
    width: 10px;
}

.apply-modal__dialog::-webkit-scrollbar-track {
    background: transparent;
    margin: 12px 0;
}

.apply-modal__dialog::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.18);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

.apply-modal__dialog::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.32);
    background-clip: padding-box;
}

.apply-modal__dialog:not(:hover)::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.12);
    background-clip: padding-box;
}

.apply-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease;
}

.apply-modal__close:hover {
    background: #e2e8f0;
}

.apply-modal__title {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--ink, #0f172a);
    margin: 0 0 18px;
    letter-spacing: -0.02em;
}

.apply-steps {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
}

.apply-step-dot {
    height: 6px;
    flex: 1;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.12);
    transition: background 0.25s ease;
}

.apply-step-dot.is-active {
    background: var(--pd, #00218A);
}

.apply-field {
    margin-bottom: 16px;
}

.apply-field label {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
}

.apply-opt {
    font-weight: 500;
    font-size: 0.8rem;
    color: #94a3b8;
}

.apply-draft-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(0, 55, 202, 0.1);
    color: var(--pd, #00218A);
    font-size: 0.85rem;
    font-weight: 600;
}

.apply-draft-notice button {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(0, 55, 202, 0.3);
    color: var(--pd, #00218A);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.apply-field input,
.apply-field select,
.apply-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    font-size: 0.98rem;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.apply-field textarea {
    resize: vertical;
    min-height: 80px;
}

/* ── Champ à suggestions (domaine, filière) ───────────────────────────────
   Menu maison : `<datalist>` n'est pas stylable et son rendu varie selon le
   navigateur. Ici la liste reprend l'habillage du formulaire. */
.apply-combo {
    position: relative;
}

.apply-combo input {
    padding-right: 40px;
}

.apply-combo input:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

.apply-combo__toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 20px;
    cursor: pointer;
}

.apply-combo input:disabled ~ .apply-combo__toggle {
    color: #cbd5e1;
    cursor: not-allowed;
}

.apply-combo.is-open .apply-combo__toggle {
    transform: rotate(180deg);
}

.apply-combo__list {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 232px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
}

.apply-combo__option {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: .95rem;
    line-height: 1.35;
    color: #0f172a;
    cursor: pointer;
}

/* `is-active` suit le clavier (flèches), `:hover` la souris. */
.apply-combo__option:hover,
.apply-combo__option.is-active {
    background: rgba(0, 55, 202, .12);
}

.apply-combo__empty {
    padding: 10px 12px;
    font-size: .88rem;
    color: #64748b;
}

.apply-field input:focus,
.apply-field select:focus,
.apply-field textarea:focus {
    outline: none;
    border-color: var(--p, #0037CA);
    box-shadow: 0 0 0 3px rgba(0, 55, 202, 0.15);
}

.apply-field input.is-invalid,
.apply-field select.is-invalid,
.apply-field textarea.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.apply-field small {
    display: block;
    margin-top: 4px;
    color: #94a3b8;
    font-size: 0.78rem;
}

.apply-modal__feedback {
    min-height: 20px;
    margin: 6px 0 12px;
    font-size: 0.9rem;
    font-weight: 600;
}

.apply-modal__feedback.is-error {
    color: #dc2626;
}

/* Après envoi, ce message reste seul dans le modal (les étapes et les boutons
   sont masqués) : il mérite d'être lisible plutôt que réduit à une ligne de
   statut. */
.apply-modal__feedback.is-success {
    color: #15803d;
    font-size: 1rem;
    line-height: 1.7;
    padding: 16px 18px;
    border-radius: 16px;
    background: rgba(22, 163, 74, .08);
}

.apply-modal__actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 8px;
}

.apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    transition: 0.2s ease;
}

.apply-btn--primary {
    background: #0037CA;
    color: #fff;
    border: 1px solid #0037CA;
}

.apply-btn--primary:hover {
    transform: translateY(-1px);
}

.apply-btn--primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.apply-btn--ghost {
    background: #fff;
    color: #334155;
    border: 1px solid #cbd5e1;
    margin-right: auto;
}

.apply-btn.hidden,
.apply-step.hidden {
    display: none;
}

@media (prefers-color-scheme: dark) {
    .apply-modal__dialog {
        background: #111827;
    }
    .apply-modal__title {
        color: #f8fafc;
    }
    .apply-field label {
        color: #cbd5e1;
    }
    .apply-field input,
    .apply-field select,
    .apply-field textarea {
        background: #0b1220;
        border-color: #334155;
        color: #f8fafc;
    }
    .apply-modal__close {
        background: #1f2937;
        color: #cbd5e1;
    }
    .apply-btn--ghost {
        background: #111827;
        color: #cbd5e1;
        border-color: #334155;
    }
}