.definit {
    padding-block:6rem 4rem;display: grid;
    grid-template-columns: 1fr 1fr 1fr
}

.definit .inner {
    padding-inline:6rem;margin-block:2rem;height: 200px
}

@media screen and (max-width: 1800px) {
    .definit .inner {
        padding-inline:4rem
    }
}

@media screen and (max-width: 1440px) {
    .definit .inner {
        padding-inline:2rem
    }
}

.definit div:nth-child(1)>div,.definit div:nth-child(4)>div {
    padding-left: 0
}

@media screen and (max-width: 998px) {
    .definit div:nth-child(4)>div {
        padding-left:2rem
    }

    .definit div:nth-child(3)>div,.definit div:nth-child(5)>div {
        padding-left: 0
    }
}

@media screen and (max-width: 480px) {
    .definit div:nth-child(1)>div,.definit div:nth-child(3)>div,.definit div:nth-child(5)>div {
        padding-left:2rem
    }
}

.definit .outer:not(:nth-last-child(-n+3)) {
    border-bottom: 1px solid #fff
}

.definit div:not(:nth-child(3n))>div {
    border-right: 1px solid #fff
}

@media screen and (max-width: 998px) {
    .definit {
        grid-template-columns:1fr 1fr
    }

    .definit .inner {
        height: 170px
    }

    .definit div:not(:nth-last-child(-n+2)) {
        border-bottom: 1px solid #fff
    }

    .definit div:nth-child(2n)>div {
        border-right: none
    }

    .definit div:not(:nth-child(2n))>div {
        border-right: 1px solid #fff
    }
}

@media screen and (max-width: 480px) {
    .definit {
        grid-template-columns:1fr
    }

    .definit .outer:not(:last-child) {
        border-bottom: 1px solid #fff
    }

    .definit div:nth-child(n)>div {
        border-right: none
    }

    .definit .inner {
        height: auto
    }
}

.gallery1,.gallery2 {
    padding-block:3rem;display: grid;
    grid-template-columns: 1fr 1fr 1fr
}

@media screen and (max-width: 767px) {
    .gallery1,.gallery2 {
        grid-template-columns:1fr 1fr
    }
}

.gallery1 a,.gallery2 a {
    width: 100%;
    height: auto;
    margin-bottom: -6.5px
}

.gallery1 a img,.gallery2 a img {
    width: 100%;
    height: auto
}

.gallery1 a figure,.gallery2 a figure {
    width: 100%;
    height: auto;
    position: relative;
    display: inline-block
}

.gallery1 a figure .play-video,.gallery2 a figure .play-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 60px
}

.avantages {
    padding-top: 5rem;
    padding-bottom: 18rem
}

@media screen and (max-width: 480px) {
    .avantages {
        padding-bottom:15rem
    }
}

.avantages ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-left: 10px solid #fdd400;
    padding-left: 2rem;
    margin-block:2rem}

@media screen and (max-width: 998px) {
    .avantages ul {
        grid-template-columns:1fr
    }
}

.avantages ul li {
    text-transform: uppercase
}

.avantages ul li:not(:nth-child(1),:nth-child(2)) {
    margin-top: 1rem
}

@media screen and (max-width: 998px) {
    .avantages ul li:nth-child(2) {
        margin-top:1rem
    }
}

.avantages p {
    max-width: 800px;
    margin-bottom: 2rem
}

.avantages img {
    max-width: 800px;
    width: 50%;
    min-width: 550px;
    position: absolute;
    right: 0;
    margin-top: 3rem
}

@media screen and (max-width: 840px) {
    .avantages img {
        width:80%;
        min-width: 350px
    }
}

@media screen and (max-width: 600px) {
    .avantages img {
        width:100%;
        min-width: 0;
        padding-left: 1rem
    }
}

.chiffres {
    padding-block:4rem;background: linear-gradient(270deg,#000 0%,#000 5vw,#fff 5vw,#FFF 5vw,#FFF 100%)
}

@media screen and (max-width: 840px) {
    .chiffres {
        padding-top:20vw
    }
}

.chiffres h2 {
    white-space: pre-wrap
}

.chiffres ul {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: center
}

@media screen and (max-width: 660px) {
    .chiffres ul {
        margin-top:1rem;
        grid-template-columns: 1fr 1fr;
        gap: 1rem
    }
}

.chiffres ul li {
    place-self: center
}

@media screen and (max-width: 660px) {
    .chiffres ul li {
        place-self:start
    }
}

.chiffres ul li div {
    font-size: 4rem;
    white-space: nowrap;
    line-height: 3.5rem
}

@media screen and (max-width: 840px) {
    .chiffres ul li div {
        font-size:3.5rem
    }
}

@media screen and (max-width: 767px) {
    .chiffres ul li div {
        font-size:3rem
    }
}

.chiffres ul li p {
    white-space: nowrap
}

.testimonials {
    padding-block:4rem;text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.testimonials i {
    cursor: pointer
}

.testimonials i svg {
    width: 25px
}

@media screen and (max-width: 767px) {
    .testimonials i svg {
        width:15px
    }
}

@media screen and (max-width: 767px) {
    .testimonials .text {
        padding-inline:.5rem
    }
}

.testimonials i:hover {
    filter: invert(27%)sepia(91%)saturate(4466%)hue-rotate(197deg)brightness(80%)contrast(101%)
}

.slideshow-container {
    min-height: 300px;
    display: flex;
    align-items: center;
}

.testimonials .slideshow-container .slide .slide-grid {
    max-width: 800px
}

.testimonials .slideshow-container .slide .slide-grid img {
    width: 200px;
    max-width: 50vw;
    margin-bottom: 2rem
}

.testimonials .slideshow-container .slide .slide-grid .name {
    color: #fdd400;
    margin-top: 1.8rem
}

.testimonials .slideshow-container .slide .slide-grid .name,.testimonials .slideshow-container .slide .slide-grid .text {
    font-size: 1.5rem;
    line-height: 1.6rem
}

.testimonials .slideshow-container .slide .slide-grid .job {
    max-width: 255px;
    margin-inline:auto;font-size: .9rem
}

#jobs {
    padding-block:4rem}

#jobs .checkbox-comble {
    margin-top: 1rem
}

#jobs .checkbox-comble label {
    font-size: .9rem;
    color: #fff;
    cursor: pointer;
    margin-left: .5rem
}

#jobs nav ul {
    gap: 1rem;
    display: flex
}

@media screen and (max-width: 767px) {
    #jobs nav ul {
        margin-bottom:2rem
    }
}

#jobs nav button {
    all: unset;
    cursor: pointer;
    padding-bottom: .3rem;
    border-bottom: 1px solid transparent;
    transition: border-bottom .3s ease
}

#jobs nav button:hover,#jobs nav button.active {
    border-bottom: 1px solid #fdd400
}

#jobs h2 {
    border-bottom: 1px solid #fdd400;
    padding-bottom: 2rem
}

#jobs .job {
    border-bottom: 1px solid #fdd400;
    display: none
}

#jobs .job.active {
    display: block
}

#jobs .job h4 {
    margin-block:2rem 0}

@media screen and (max-width: 767px) {
    #jobs .job h4 {
        margin-bottom:2rem;
        font-size: 1.2rem
    }
}

#jobs .job .horaire {
    color: #555;
    font-size: .9rem;
    margin-bottom: .3rem;
    position: relative
}

@media screen and (max-width: 767px) {
    #jobs .job .horaire {
        font-size:1rem;
        margin-bottom: 1rem
    }
}

#jobs .job .horaire i {
    margin-right: 10px
}

@media screen and (max-width: 767px) {
    #jobs .job .horaire i {
        position:absolute;
        left: 0;
        top: 6px
    }
}

@media screen and (max-width: 767px) {
    #jobs .job .horaire span {
        margin-left:2rem;
        display: block
    }
}

#jobs .job .horaire.open {
    color: #fff
}

#jobs .job .horaire.open i {
    color: #fdd400
}

#jobs .job .flex {
    display: flex;
    align-items: baseline;
    margin-bottom: 1rem;
    flex-wrap: wrap
}

@media screen and (max-width: 767px) {
    #jobs .job .flex {
        flex-direction:column
    }
}

#jobs .job button {
    display: block;
    margin-inline:auto 0;margin-bottom: 0
}

@media screen and (max-width: 480px) {
    #jobs .job button {
        margin-top:2rem
    }
}

.spontanee {
    padding-block:4rem;display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem
}

@media screen and (max-width: 767px) {
    .spontanee {
        grid-template-columns:1fr
    }
}

.spontanee div p {
    max-width: 420px;
    margin-bottom: 2rem
}

.spontanee div>a {
    display: block;
    margin-bottom: 1rem;
    width: fit-content;
    font-weight: 700
}

.spontanee div>a:hover {
    color: #fdd400
}

.spontanee div p:last-of-type {
    border-left: 10px solid #fdd400;
    padding-left: 1rem;
    margin-top: 3rem
}

.spontanee form {
    margin-top: 2.5rem
}

.spontanee form .form-content {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem
}

@media screen and (max-width: 767px) {
    .spontanee form {
        margin-top:0
    }
}

.spontanee form input,.spontanee form textarea,.spontanee form select {
    border: 1px solid #000;
    background-color: #fff;
    padding: .8rem;
    font-family: sofia-pro,sans-serif;
    font-size: 1rem;
    color: #000;
    resize: none
}

.spontanee form .file-upload {
    margin-inline:auto 0;width: 100%;
    text-align: end
}

.spontanee form #attach-file {
    cursor: pointer
}

.spontanee form #attach-file:hover {
    color: #fdd400
}

.spontanee form button {
    margin-inline:auto 0;margin-top: 0
}

.spontanee form .half {
    width: calc(50% - 1rem)
}

@media screen and (max-width: 998px) {
    .spontanee form .half {
        width:100%
    }
}

.spontanee form .full {
    width: 100%
}

.intro-single {
    padding-top: 3rem;
    display: grid;
    grid-template-columns: 50% 50%
}

@media screen and (max-width: 480px) {
    .intro-single {
        padding-top:0;
        grid-template-columns: 100%
    }

    .intro-single figure {
        max-width: 280px;
        margin-inline:auto 0;transform: translateX(16px)
    }
}

.intro-single .type {
    text-transform: uppercase;
    font-weight: 700
}

.intro-single .card {
    width: fit-content;
    padding: 2rem 4rem 2rem 1000px;
    transform: translateX(-1000px);
    margin-top: 3rem;
    margin-bottom: 2rem;
    z-index: 999;
    min-width: 1600px
}

@media screen and (max-width: 1440px) {
    .intro-single .card {
        min-width:1500px
    }
}

@media screen and (max-width: 998px) {
    .intro-single .card {
        min-width:1400px
    }
}

@media screen and (max-width: 480px) {
    .intro-single .card {
        min-width:none;
        width: 100%
    }
}

.intro-single .card h1 {
    font-size: 2.2rem;
    margin-bottom: 1rem
}

.intro-single .card .horaire {
    margin-bottom: .5rem
}

.intro-single .card .horaire:not(.open) {
    color: #999
}

.intro-single .card .js-filled {
    font-style: italic;
    background-color: #fdd401;
    padding: .5rem 1rem
}

.intro-single .card .salary {
    margin-bottom: 1rem
}

.intro-single .card .horaire span {
    color: #999
}

.intro-single .card .horaire i {
    margin-right: 1rem
}

.intro-single .card .horaire.open span {
    color: #fff
}

.intro-single .external {
    display: block;
    color: #fdd400;
    margin-bottom: 1rem
}

.intro-single .external:hover {
    color: #fff;
    text-decoration: underline
}

.intro-single figure {
    margin-bottom: -9rem
}

.intro-single figure img {
    width: 100%;
    max-width: 560px;
    height: auto;
    margin-inline:auto 0}

.description li,.avantages li {
    padding-left: 2rem;
    position: relative
}

.description li::before,.avantages li::before {
    content: '';
    position: absolute;
    height: 4px;
    left: 0;
    top: 50%;
    width: 1rem;
    background-color: #fdd400;
    transform: translateY(-50%)
}

.description {
    padding-block:9rem 3rem}

.description h4:not(:first-of-type) {
    border-bottom: 2px solid #fdd400;
    padding-bottom: 1rem;
    margin-top: 2rem
}

.description p {
    margin-block:-.5rem .5rem}

.description li {
    margin-bottom: .5rem
}

#img-container {
    max-height: 600px;
    overflow: hidden;
    padding-inline:0;display: flex;
    align-items: center
}

#img-container img {
    width: 100vw
}

#form {
    padding-block:3rem}

#form form {
    margin-top: 2.5rem
}

#form form .form-content {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem
}

@media screen and (max-width: 767px) {
    #form form {
        margin-top:0
    }
}

#form form input,#form form textarea,#form form select {
    border: 1px solid #000;
    background-color: #fff;
    padding: .8rem;
    font-family: sofia-pro,sans-serif;
    font-size: 1rem;
    color: #000;
    resize: none
}

#form form .file-upload {
    margin-inline:auto 0;width: 100%
}

#form form #attach-file {
    cursor: pointer
}

#form form #attach-file:hover {
    color: #fdd400
}

#form form button {
    margin-top: 0
}

#form form .half {
    width: calc(50% - 1rem)
}

@media screen and (max-width: 998px) {
    #form form .half {
        width:100%
    }
}

#form form .full {
    width: 100%
}