@charset "UTF-8";

.jobs-page, .jobs-page .jobs-main, .jobs-page .jobs-section { float: left; width: 100%; }
.jobs-page #main.jobs-main { margin: 0; padding: 0; overflow: hidden; background: #fff; }
.jobs-page .jobs-inner { width: 100%; max-width: 78em; margin: 0 auto; padding: 0 6em; }
.jobs-page .jobs-narrow { max-width: 66em; }
.jobs-page .jobs-section { padding: 5em 0; }
.jobs-page .jobs-section p { line-height: 1.55; }
.jobs-page .jobs-centered { margin: 2.5em 0 0; text-align: center !important; }

.jobs-hero { float: left; width: 100%; min-height: 34em; margin: -5% 0 0; position: relative; overflow: hidden; background: #222626; z-index: 1; }
.jobs-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jobs-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(34,38,38,.88) 0%, rgba(34,38,38,.62) 48%, rgba(34,38,38,.18) 100%); }
.jobs-hero-content { position: relative; z-index: 1; width: 70%; max-width: 52em; padding: 12em 6em 8em; color: #fff; }
.jobs-hero-content .jobs-eyebrow { margin-bottom: 1em; color: #fbb900; font-weight: bold; letter-spacing: .12em; text-transform: uppercase; }
.jobs-hero-content h1 { margin-bottom: .85em; font-size: 3em; font-weight: bold; line-height: 1.05; text-transform: uppercase; }

.ctnr .jobs-button, .jobs-page #main .jobs-button { border: 1px solid #fbb900; border-radius: .5em; background: #fbb900; color: #222626; font-weight: bold; text-align: center; }
.ctnr .jobs-button:hover, .jobs-page #main .jobs-button:hover { border-color: #fff; background: #fff; color: #222626; text-decoration: none; }
.ctnr .jobs-button-dark:hover, .jobs-page #main .jobs-button-dark:hover { border-color: #222626; background: #222626; color: #fff; }

.jobs-section-title { display: flex; align-items: flex-start; gap: 1em; margin-bottom: 2.5em; }
.jobs-section-title h2 { color: #222626; font-size: 2em; font-weight: bold; line-height: 1.12; text-transform: uppercase; }
.jobs-section-title > div > p { margin: .8em 0 0 !important; color: #68686e; }
.jobs-title-arrow { flex: 0 0 1.45em; width: 1.45em; height: 1.45em; border-radius: 50%; background: #fbb900; color: #222626; font-size: 1.45em; font-weight: bold; line-height: 1.28; text-align: center; margin-top: 3px}

.jobs-quote-section { background: #f2f2f2; }
.jobs-quote { display: grid; grid-template-columns: minmax(16em, 2fr) minmax(20em, 3fr); align-items: center; gap: 4em; }
.jobs-quote figure { overflow: hidden; position: relative; }
.jobs-quote figure::after { content: ""; position: absolute; right: -5em; bottom: -5em; width: 9em; height: 9em; transform: rotate(45deg); background: #fbb900; }
.jobs-quote img { display: block; width: 100%; height: auto; }
.jobs-quote blockquote { position: relative; color: #222626; font-size: 1.25em; line-height: 1.5; }
.jobs-quote blockquote > p { margin-bottom: 1.4em !important; text-align: left !important; }
.jobs-quote-mark { display: block; height: .72em; color: #fbb900; font-size: 5em; font-weight: bold; line-height: 1; }
.jobs-quote footer strong, .jobs-quote footer span { display: block; }
.jobs-quote footer span { margin-top: .35em; color: #68686e; font-size: .8em; }

.jobs-domains {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2em;
}

.jobs-domain {
    grid-column: span 2;
}

.jobs-domain:first-child:nth-last-child(2) {
    grid-column: 2 / span 2;
}
.jobs-domain { background: #f2f2f2; overflow: hidden; }
.jobs-domain-image { display: block; height: 15em; position: relative; overflow: hidden; }
.jobs-domain-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.jobs-domain-image span { position: absolute; right: 0; bottom: 0; left: 0; padding: .8em 1em; background: rgba(34,38,38,.88); color: #fff; font-size: 1.2em; font-weight: bold; text-transform: uppercase; }
.jobs-domain:hover .jobs-domain-image img { transform: scale(1.06); }
.jobs-domain h3 { padding: 1.3em; font-size: 1em; line-height: 1.35; text-align: center}
.jobs-page #main .jobs-domain h3 a { color: #222626; }
.jobs-page #main .jobs-domain h3 a:hover { color: #fbb900; text-decoration: none; }

.jobs-training { background: #f7f7f7; text-align: center; }
.jobs-training .jobs-section-title { justify-content: center; text-align: left; }
.jobs-training > .jobs-inner > p:not(.jobs-centered) { font-size: 1.2em; text-align: center !important; }

.jobs-values-section { background: #222626; color: #fff; }
.jobs-section-title-light h2 { color: #fff; }
.jobs-section-title-light > div > p { color: #ccc; }
.jobs-values { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid #4a4d4d; border-left: 1px solid #4a4d4d; }
.jobs-values article { padding: 2em; border-right: 1px solid #4a4d4d; border-bottom: 1px solid #4a4d4d; }
.jobs-value-title {
    display: flex;
    align-items: center;
    gap: 1.2em;
    margin-bottom: 1.2em;
}

.jobs-value-title img {
    display: block;
    flex: 0 0 5em;
    width: 5em;
    height: 3.5em;
    object-fit: contain;
}

.jobs-values h3 {
    margin: 0;
    color: #fbb900;
    font-size: 1.25em;
    font-weight: bold;
}
.jobs-value-icon {
    display: block;
    flex: 0 0 5em;
    width: 5em;
    height: 3.5em;

    background: #fbb900;

    -webkit-mask-image: var(--value-icon);
    mask-image: var(--value-icon);

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;
}
.jobs-values p { color: #fff; text-align: left !important; }

.jobs-benefits-section { background: #f7f7f7; }
.jobs-benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5em 3em; }
.jobs-benefits article { display: grid; grid-template-columns: 6em 1fr; gap: 1.4em; align-items: start; padding: 1.5em 0; border-top: 1px solid #d7d7d7; }
.jobs-benefits img { display: block; width: 6em; height: 6em; object-fit: contain; }
.jobs-benefits h3 { margin-bottom: .55em; color: #222626; font-size: 1.1em; font-weight: bold; text-transform: uppercase; }
.jobs-benefits p { margin: 0 !important; text-align: left !important; }

.jobs-process-intro { max-width: 54em; margin: 0 auto 3em !important; text-align: center !important; }
.jobs-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2em; counter-reset: jobs-step; }
.jobs-steps li { position: relative; text-align: center; }
.jobs-steps img { display: block; width: 100%; height: auto; margin-bottom: 1.25em; }
.jobs-steps p { margin: 0 !important; font-size: .94em; text-align: center !important; }
.jobs-step-number { display: flex; align-items: center; justify-content: center; position: absolute; top: -.55em; left: -.35em; z-index: 1; width: 2.2em; height: 2.2em; border-radius: 50%; background: #fbb900; color: #222626; font-weight: bold; }

.jobs-final-cta { background: #68686e; color: #fff; text-align: center; }
.jobs-final-cta h2 { margin-bottom: .5em; color: #fff; font-size: 2em; font-weight: bold; line-height: 1.15; text-transform: uppercase; }
.jobs-final-cta p { margin-bottom: 2em !important; text-align: center !important; }
.jobs-extra { padding-top: 2em !important; padding-bottom: 2em !important; }

@media screen and (max-width: 70em) {
    .jobs-page .jobs-inner, .jobs-hero-content { padding-left: 4em; padding-right: 4em; }
    .jobs-hero-content { width: 78%; }
}

@media screen and (max-width: 60em) {
    .jobs-page .jobs-inner, .jobs-hero-content { padding-left: 2em; padding-right: 2em; }
    .jobs-hero-content { width: 85%; }
    .jobs-hero-content h1 { font-size: 2.5em; }
    .jobs-domains { gap: 1.25em; }
    .jobs-benefits { gap: 1em 2em; }
    .jobs-steps { grid-template-columns: repeat(3, 1fr); gap: 2em; }
}

@media screen and (max-width: 45em) {
    .jobs-page .jobs-inner, .jobs-hero-content { padding-left: 1em; padding-right: 1em; }
    .jobs-page .jobs-section { padding: 3.5em 0; }
    .jobs-hero { min-height: 31em; }
    .jobs-hero-content { width: 100%; padding-top: 10em; padding-bottom: 5em; }
    .jobs-hero-content h1 { font-size: 2em; }
    .jobs-hero-overlay { background: rgba(34,38,38,.7); }
    .jobs-section-title { gap: .7em; margin-bottom: 2em; }
    .jobs-section-title h2, .jobs-final-cta h2 { font-size: 1.5em; }
    .jobs-title-arrow { flex-basis: 1.35em; width: 1.35em; height: 1.35em; font-size: 1.25em; }
    .jobs-quote { grid-template-columns: 1fr; gap: 2em; }
    .jobs-quote figure { max-width: 26em; margin: 0 auto; }
    .jobs-quote blockquote { font-size: 1.1em; }
    .jobs-domains { grid-template-columns: repeat(2, 1fr); }
    .jobs-values, .jobs-benefits { grid-template-columns: 1fr; }
    .jobs-benefits { gap: 0; }
    .jobs-steps { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 30em) {
    .jobs-domains, .jobs-steps { grid-template-columns: 1fr; }
    .jobs-domain-image { height: 13em; }
    .jobs-benefits article { grid-template-columns: 4.5em 1fr; gap: 1em; }
    .jobs-benefits img { width: 4.5em; height: 4.5em; }
    .ctnr .jobs-button { width: 100%; padding-left: 1em; padding-right: 1em; }
}
/* Métiers & formations */

.jobs-metiers-intro { background: #fff; }
.jobs-intro-lead { margin-bottom: 1.6em !important; color: #222626; font-size: 1.3em; line-height: 1.45 !important; }

.jobs-expertise-section { background: #f2f2f2; }
.jobs-expertise-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(20em, 2fr); gap: 3em; align-items: start; }
.jobs-brand-video { position: relative; overflow: hidden; background: #222626; }
.jobs-brand-video video { display: block; width: 100%; height: auto; }
.jobs-expertise-copy { font-size: .95em; }
.jobs-expertise-copy p:first-child { margin-top: 0 !important; }

.jobs-formations-section { background: #fff; }
.jobs-formations-intro { max-width: 66em; margin-bottom: 3em; }
.jobs-formations-intro h3 { margin: 2.2em 0 .8em; color: #222626; font-size: 1.25em; font-weight: bold; }

.jobs-bullet-list { margin: 1.2em 0 1.8em 1.2em; padding: 0; list-style: none; }
.jobs-bullet-list li { position: relative; margin-bottom: .7em; padding-left: 1.25em; line-height: 1.55; }
.jobs-bullet-list li::before { content: ""; position: absolute; top: .7em; left: 0; width: .42em; height: .42em; border-radius: 50%; background: #fbb900; }

.jobs-training-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2em; align-items: stretch; }
.jobs-training-card { padding: 2.5em; border-top: .35em solid #fbb900; background: #f2f2f2; }
.jobs-training-card > h3 { margin-bottom: 1.5em; color: #222626; font-size: 1.35em; font-weight: bold; text-transform: uppercase; }
.jobs-training-card > p { margin-bottom: 1.5em !important; text-align: left !important; }
.jobs-training-list { margin: 0; }
.jobs-training-list li { margin-bottom: 1.5em; }
.jobs-training-list li:last-child { margin-bottom: 0; }
.jobs-training-list strong, .jobs-training-list span { display: block; }
.jobs-training-list strong { margin-bottom: .25em; color: #222626; }

@media screen and (max-width: 60em) {
    .jobs-expertise-grid { grid-template-columns: 1fr; gap: 2em; }
    .jobs-expertise-copy { font-size: 1em; }
}

@media screen and (max-width: 45em) {
    .jobs-intro-lead { font-size: 1.15em; }
    .jobs-training-cards { grid-template-columns: 1fr; }
    .jobs-training-card { padding: 2em; }
}

@media screen and (max-width: 30em) {
    .jobs-training-card { padding: 1.5em; }
}
/* Apprentissages & stages */

.jobs-intro-content h3 { margin: 2em 0 .8em; color: #222626; font-size: 1.25em; font-weight: bold; }
.jobs-intro-content h3:first-child { margin-top: 0; }

.jobs-quote-landscape { grid-template-columns: minmax(20em, 2fr) minmax(20em, 3fr); }
.jobs-quote-landscape figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.jobs-perspectives-section { background: #f7f7f7; }

.jobs-bullet-list { margin: 1.4em 0 1.8em 1em; padding: 0; list-style: none; }
.jobs-bullet-list li { position: relative; margin-bottom: .7em; padding-left: 1.3em; line-height: 1.55; }
.jobs-bullet-list li::before { content: ""; position: absolute; top: .65em; left: 0; width: .45em; height: .45em; border-radius: 50%; background: #fbb900; }

.jobs-careers-section { background: #fff; }
.jobs-career-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2em; }
.jobs-career-cards-stages { grid-template-columns: repeat(3, 1fr); }

.jobs-events-section { background: #222626; color: #fff; }
.jobs-events-section .jobs-section-title h2 { color: #fff; }

.jobs-events { position: relative; max-width: 54em; margin: 0 auto; }
.jobs-events::before { content: ""; position: absolute; top: 0; bottom: 0; left: 7em; width: 2px; background: #fbb900; }
.jobs-events article { display: grid; grid-template-columns: 7em 1fr; gap: 2em; position: relative; padding: 0 0 3em; }
.jobs-events article:last-child { padding-bottom: 0; }

.jobs-event-date { position: relative; padding-top: .35em; color: #fbb900; font-weight: bold; text-transform: uppercase; }
.jobs-event-date::after { content: ""; position: absolute; top: .45em; right: -.48em; width: .9em; height: .9em; border: .2em solid #222626; border-radius: 50%; background: #fbb900; }

.jobs-event-content { padding: 1.5em 2em; background: #343838; }
.jobs-event-content h3 { margin-bottom: .7em; color: #fbb900; font-size: 1.2em; font-weight: bold; }
.jobs-event-content p { margin-bottom: .8em !important; color: #fff; text-align: left !important; }
.jobs-event-content p:last-child { margin-bottom: 0 !important; }
.jobs-page #main .jobs-event-content a { color: #fbb900; font-weight: bold; }
.jobs-page #main .jobs-event-content a:hover { color: #fff; }

.jobs-internships-intro { background: #fff; }

@media screen and (max-width: 60em) {
    .jobs-career-cards { gap: 1.25em; }
}

@media screen and (max-width: 45em) {
    .jobs-quote-landscape { grid-template-columns: 1fr; }
    .jobs-career-cards { grid-template-columns: repeat(2, 1fr); }
    .jobs-career-cards-stages { grid-template-columns: 1fr; }
    .jobs-events::before { left: 0; }
    .jobs-events article { display: block; padding: 0 0 2em 2em; }
    .jobs-event-date { margin-bottom: .7em; }
    .jobs-event-date::after { top: .4em; right: auto; left: -2.4em; }
}

@media screen and (max-width: 30em) {
    .jobs-career-cards { grid-template-columns: 1fr; }
}
@media screen and (max-width: 45em) {
    .jobs-domains {
        grid-template-columns: repeat(2, 1fr);
    }

    .jobs-domain,
    .jobs-domain:first-child:nth-last-child(2) {
        grid-column: auto;
    }
}

@media screen and (max-width: 30em) {
    .jobs-domains {
        grid-template-columns: 1fr;
    }
}