/* -------------------------- ALL -------------------------- */
body {
    overflow-x: hidden;
    transition: all .2s ease;
}

body.colorchange {
    background-color: var(--color-primary);
    transition: all .2s ease;
}

body *:not(.btn) {
    transition: all .2s ease;
}

body.colorchange *:not(.btn):not(.menu a):not(#contact input[type="submit"]):not(.btn span) {
    color: var(--color-white)!important;
    transition: all .2s ease;
}

body.colorchange > .numbers {
    border-color: var(--color-white)!important;
    transition: all .2s ease;
}

body.colorchange *.btn--tag {
    background-color: var(--color-white)!important;
    color: var(--color-primary)!important;
    border-color: var(--color-primary)!important;
    transition: all .2s ease;
}

.title {
    font-size: 1.875rem;
}

.title--hero {
    font-size: 2.75rem;
    color: var(--color-primary);
    line-height: normal;
}

.content,
.content * {
    font-size: 1rem;
    line-height: 1.5rem;
    font-family: var(--ffMRe);
    color: var(--color-black);
}

.content--introduction,
.content--introduction * {
    font-size: 1.25rem;
    line-height: 2rem;
}

.link {
    text-decoration: underline;
    color: var(--color-primary);
    font-size: 1.125rem;
    line-height: 1.5rem;
    display: flex;
    gap: 9px;
    align-items: center;
    position: relative;
    width: fit-content;
    font-family: var(--ffMRe);
}

.link:hover {
    text-decoration: underline;
}

.link::before{
  content: "";
  display: block;
  aspect-ratio: 15/21;
  width: 15px;
  height: auto;
  background-image: url(../img/icons/arrowDown.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

@media (width > 991px) {
    .title {
        font-size: 3rem;
    }

    .title--hero {
        font-size: 4rem;
    }

    .content--introduction, 
    .content--introduction * {
        font-size: 1.875rem;
        line-height: 2.625rem;
    }
}

@media (width > 1499px) {
    body > * {
        padding-inline: unset!important;
        margin-inline: auto;
        max-width: 1440px;
        width: 100%;
    }
}

/* -- -- -- -- -- HERO - SECTION - DÉBUT -- -- -- -- -- */

.hero > .illustration {
    display: none;
}

.hero .description .title .iframe__container {
    aspect-ratio: 107/45;
    display: inline-block;
    position: relative;
    max-width: 107px;
    width: 100%;
    object-fit: cover;
    max-height: 45px;
    margin-bottom: -10px;
    border-radius: 50px;
}

.hero .description .content,
.hero .description .btn,
.hero .description .link {
    margin-left: 43px;
}

.hero .description .content {
    margin-top: 25px;
}

.hero .description .btn {
    margin-top: 16px;
}

.hero .description .link {
    margin-top: 32px;
}

@media (width > 767px) {
    .hero {
        display: flex;
        gap: 64px;
        align-items: center;
    }

    .hero .description .content,
    .hero .description .btn,
    .hero .description .link {
        margin-left: unset;
    }

    .hero > .illustration {
        display: block;
        width: 25%;
    }

    .hero .description .title .iframe__container {
        margin-bottom: -10px;
    }
}

@media (width > 991px) {
    .hero {
        justify-content: space-around;
        height: 100vh;
        align-items: center;
    }

    .hero > .illustration {
        width: 28%;
    }

    .hero > .description {
        width: 41%;
    }

    .hero .description .content {
        margin-top: 46px;
    }

    .hero .description .btn,
    .hero .description .link {
        margin-top: 24px;
    }

    .hero .description .title .iframe__container {
        aspect-ratio: 159/64;
        max-width: 159px;
        margin-bottom: -6px;
    }
}

@media (width > 1199px) {
    .hero > .illustration {
        aspect-ratio: 315/572;
        width: 22%;
    }
}

@media (width > 1499px) {
    .hero {
        height: fit-content;
        padding-block: 10%;
    }
}

/* -- -- -- -- -- HERO - SECTION - FIN -- -- -- -- -- */


/* -- -- -- -- -- CAROUSSEL - SECTION - FIN -- -- -- -- -- */

.caroussel {
    margin-top: 40px;
    padding-inline: 30px;
}

.caroussel .swiper-wrapper {
    align-items: center;
}

.caroussel .logo {
    max-height: 75px;
    max-width: 138px;
    object-fit: contain;
}

@media (width > 767px) {
    .caroussel {
        margin-top: 64px;
    }
}

/* -- -- -- -- -- CAROUSSEL - SECTION - DÉBUT -- -- -- -- -- */


/* -- -- -- -- -- CERTIFICATIONS - SECTION - FIN -- -- -- -- -- */

.certifications {
    margin-top: 40px;
}

.certifications .part {
    display: grid;
    gap: 40px;
}

.certifications .btn {
    grid-area: 4/1/5/2;
}

.certifications .icon__container {
    display: grid;
    gap: 16px 28px;
    grid-template-columns: repeat(2, 1fr);
}

.icon__container .content {
    text-align: center;
}

.icon__container .icon {
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.icon__container .icon:last-child {
    align-self: self-end;
}

.certifications .logo {
    max-width: 150px;
    max-height: 80px;
    object-fit: contain;
}

.certifications .illustration__container {
    margin-top: 56px;
    display: block;
}

.certifications .illustration {
    border-radius: 11.75px;
    aspect-ratio: 329/308;
    width: 100%;
}

@media (width > 767px) {
    .certifications {
        margin-top: 64px;
        display: flex;
        align-items: center;
        gap: 48px;
        padding-right: 45%;
        position: relative;
    }

    .certifications .illustration__container {
        width: calc(40% - 30px);
        margin-top: unset;
        position: absolute;
        height: 100%;
        right: 0;
        margin-right: 30px;
    }

    .certifications .illustration {
        width: 100%;
        position: absolute;
        height: 100%;
    }

    .certifications .btn {
        grid-area: 3/1/4/2;
    }

    .certifications .icon__container {
        grid-area: 4/1/5/2;
    }
}

@media (width > 991px) {
    .certifications {
        padding-right: unset;
    }

    .certifications .btn {
        margin-top: -16px;
    }

    .certifications .part {
        width: 40%;
    }

    .certifications .illustration__container {
        width: 49%;
    }

    .certifications .icon__container {
        width: 77%;
    }

    .certifications > .part > .title {
        max-width: 400px;
        width: 100%;
    }
}

@media (width > 1199px) {
    .certifications .illustration {
        margin-block: 24px;
        height: calc(100% - 48px);
    }
}

@media (width > 1499px) {
    .certifications .illustration__container {
        aspect-ratio: 560/524;
        width: auto;
        height: 100%;
    }
}

/* -- -- -- -- -- CERTIFICATIONS - SECTION - DÉBUT -- -- -- -- -- */


/* -- -- -- -- -- CHIFFRES - SECTION - FIN -- -- -- -- -- */

body > .numbers {
    margin-top: 40px;
    padding-inline: unset!important;
}

.numbers > .title {
    margin-bottom: 30px;
    padding-inline: 30px;
}

.numbers .number__container {
    display: flex;
    gap: 24px;
    overflow: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-left: 30px;
}

.numbers .number__container::-webkit-scrollbar {
    display: none;
}

.numbers .number {
    flex-shrink: 0;
    max-width: 201px;
    width: 100%;
    padding: 10px;
}

.numbers .statistic {
    font-size: 1.875rem;
    padding: 0 10px 10px 10px;
    font-family: var(--ffMRe);
    margin-bottom: 12px;
}

@media (width > 767px) {
    body > .numbers {
        margin-top: 80px;
        justify-content: space-between;
    }

    .numbers > .title {
        padding-top: 40px;
        padding-left: unset;
        margin-inline: 30px;
        border-top: 1px dashed var(--color-black);
    }

    .numbers .number {
        padding: unset;
    }

    .numbers .content * {
        text-align: center;
    }
}

@media (width > 991px) {
    .numbers {
        display: flex;
        padding-top: 40px;
        padding-left: unset;
        border-top: 1px dashed var(--color-black);
        margin-inline: 30px;
    }

    .numbers .number {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: fit-content;
    }

    .numbers .number__container {
        padding-left: unset;
    }
    
    .numbers > .title {
        padding-top: unset;
        margin-inline: unset;
        border-top: none;
        width: 30%;
        margin-bottom: unset;
    }

    .numbers .statistic {
        font-size: 2rem;
        margin-bottom: unset;
        width: 265px;
        text-align: center;
    }

    .numbers > .content {
        width: 215px;
        text-align: center;
    }
}

@media (width > 1199px) {
    .numbers > .title {
        width: 22%;
        padding-right: unset;
    }

    .numbers .number__container {
        gap: 50px;
    }

    .numbers .statistic {
        font-size: 2.25rem;
    }
}

@media (width > 1399px) {
    .numbers .statistic {
        font-size: 3rem;
    }

    .numbers .number {
        max-width: 275px;
    }
}

@media (width > 1499px) {
    body > .numbers {
        margin-inline: auto!important;
        padding-inline: unset!important;
    }
}

/* -- -- -- -- -- CHIFFRES - SECTION - DÉBUT -- -- -- -- -- */


/* -- -- -- -- -- ENTREPRISE - SECTION - FIN -- -- -- -- -- */

.corporation {
    margin-top: 46px;
    background-color: var(--color-primary);
    padding-top: 73px;
    padding-inline: unset!important;
}

.corporation * {
    color: var(--color-white);
}

.corporation > .title {
    width: 80%;
}

.corporation > *:not(.btn) {
    padding-inline: 30px;
}

.corporation > .btn {
    margin-left: 30px;
    margin-top: 38px;
}

.corporation > .content {
    margin-top: 32px;
}

.corporation > .content .iframe__container {
    aspect-ratio: 101/36;
    max-width: 101px;
    width: 100%;
    object-fit: cover;
    border-radius: 50px;
    height: auto;
    display: inline-block;
    margin-bottom: -14px;
    margin-inline: 4px;
}

.corporation > .content iframe {
    margin-bottom: -3px;
    zoom: 4;
}

.corporation > .content > * {
    display: inline;
    font-family: var(--ffMLi);
}fi

.corporation > .content + .btn {
    margin-top: 32px;
}

.corporation > .content + .btn > span {
    color: var(--color-primary);
    transition: all .3s ease;
}

.assets {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px dashed var(--color-white);
    overflow: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.assets__container {
    position: relative;
    overflow: visible;
    padding-inline: unset!important;
}

.assets__container::before,
.assets__container::after {
    content: "";
    width: 30px;
    height: 1px;
    background-color: var(--color-primary);
    position: absolute;
    top: 0;
    display: block;
    left: 0;
}

.assets__container::after {
    left: unset;
    right: 0;
}

.assets::-webkit-scrollbar {
    display: none;
}

.assets > .asset:first-child {
    margin-left: 30px;
}

.assets > .asset li {
    margin-left: 15px;
}

.assets > .asset:last-child {
    margin-right: 30px;
}

.assets > .asset ul {
    margin-top: 8px;
}

.asset {
    flex-shrink: 0;
    max-width: 270px;
    width: 100%;
}

.asset .icon {
    aspect-ratio: 1/1;
    width: 40px;
    height: auto;
    object-fit: contain;
}

.asset .name {
    margin-top: 32px;
    font-family: var(--ffMMe);
    font-size: 1.25rem;
    line-height: 140%;
}

.asset .content {
    margin-top: 12px;
    opacity: .64;
}

@media (width > 767px) {
    .corporation {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 24px;
        margin-top: 64px;
        padding-top: 83px;
    }

    .corporation > .content--introduction {
        grid-area: 2/1/3/2;
    }

    .corporation > .content + .btn {
        grid-area: 2/2/3/3;
        margin: unset;
        white-space: nowrap;
        height: 42px;
        align-self: self-end;
        margin-right: 30px;
    }

    .assets__container {
        grid-area: 3/1/4/3;
    }

    .assets {
        margin-inline: 30px;
    }

    .assets > .asset:first-child {
        margin-left: unset;
    }

    .assets > .asset:last-child {
        margin-right: unset;
    }
}

@media (width > 991px) {
    .corporation *.title {
        max-width: 450px;
        width: 100%;
    }

    .assets > .asset li {
        margin-left: 18px;
    }

    .corporation {
        padding-inline: 30px!important;
    }

    .corporation > *:not(.btn) {
        padding-inline: unset;
    }

    .corporation > .content--introduction {
        max-width: 743px;
    }

    .corporation > .content + .btn {
        justify-self: self-end;
        margin-right: unset;
    }

    .assets {
        margin-top: 48px;
        padding-top: 48px;
        margin-inline: unset;
    }

    .corporation > .content + .btn {
        height: 42px;
    }

    .corporation > .content .iframe__container {
        aspect-ratio: 101/42;
    }
}

@media (width > 1499px) {
    .corporation {
        position: relative;
        padding-inline: unset!important;
    }

    .corporation::before {
        content: "";
        background-color: var(--color-primary);
        height: 100%;
        left: -50%;
        width: 200%;
        display: block;
        position: absolute;
        z-index: -1;
    }
}

@media (pointer: fine) {
    .corporation > .content + .btn--rotate {
        width: 200px;
    }
    
    .corporation > .content + .btn--rotate:hover {
        color: var(--color-primary)!important;
        background-color: var(--color-white)!important;
    }
}

/* -- -- -- -- -- ENTREPRISE - SECTION - DÉBUT -- -- -- -- -- */


/* -- -- -- -- -- FORMATIONS - SECTION - DÉBUT -- -- -- -- -- */

.formations {
    background-color: var(--color-primary);
    padding-block: 88px 73px;
}

.formations * {
    color: var(--color-white);
}

.formations .top {
    display: grid;
    gap: 31px;
}

.formations > .top > .content > * {
    font-size: 1.25rem;
    line-height: 2rem;
    font-family: var(--ffMLi);
}

.formations .top .btn {
    margin-top: -1px;
    grid-area: 3/1/4/2;
    padding-block: 10px;
}

.formations__container {
    margin-top: 24px;
    display: grid;
    gap: 14px;
}

.formations .text {
    display: flex;
    gap: 13px;
    align-items: center;
}

.formations .item:first-child .text {
    margin-bottom: -20px;
}

.formations__container .item {
    display: flex;
    align-items: center;
    min-height: 102px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--color-white);
    gap: 13px;
}

.formations__container .illustration {
    display: none;
}

.formations__container .number {
    font-family: var(--ffMRe);
    font-size: 1rem;
    line-height: 1.5rem;
}

.formations__container .name {
    font-size: 1.5rem;
    font-family: var(--ffMRe);
}

@media (width > 767px) {
    .formations .top {
        grid-template-columns: 35% 58%;
        gap: 0;
        justify-content: space-between;
    }

    .formations .top .btn {
        margin-top: 30px;
    }
}


@media (width > 991px) {
    .formations {
        padding-top: 96px;
    }
    
    .formations .top {
        grid-template-columns: 30% 58%;
    }

    .formations > .top > .btn {
        margin-top: 40px;
    }

    .formations .top > .content * {
        font-size: 1.875rem;
        line-height: 2.625rem;
    }

    .formations__container {
        margin-top: 64px;
    }

    .formations__container .item {
        min-height: 85px;
        justify-content: space-between;
    }

    .formations .item:first-child .text {
        margin-top: unset;
    }

    .formations__container .name {
        font-size: 2rem;
    }

    .formations__container .item > .text > .number,
    .formations__container .item > .text > .name {
        opacity: .5;
        transition: all .3s ease;
    }

    .formations__container .illustration {
        display: block;
        width: 100%;
        max-width: 40%;
        border-radius: 50vw;
        aspect-ratio: 463 / 85;
        opacity: 0;
        transition: all .3s ease;
    }
}

@media (width > 1199px) {
    .formations > .top > .content {
        max-width: 657px;
        justify-self: self-end;
    }
}

@media (width > 1499px) {
    .formations {
        position: relative;
    }

    .formations::before {
        content: "";
        background-color: var(--color-primary);
        height: 100%;
        top: 0px;
        left: -50%;
        width: 200%;
        display: block;
        position: absolute;
        z-index: -1;
    }
}

@media (pointer: fine) {
    .formations__container .item:hover > .text > .number,
    .formations__container .item:hover > .text > .name  {
        opacity: 1;
        transition: all .3s ease;
    }

    .formations__container .item:hover > .illustration {
        opacity: 1;
        transition: all .3s ease;
    }
}

/* -- -- -- -- -- FORMATIONS - SECTION - FIN -- -- -- -- -- */


/* -- -- -- -- -- PERMIS - SECTION - DÉBUT -- -- -- -- -- */
@media (width > 991px) {
    .help.help--license {
        flex-direction: row-reverse;
    }
}

/* -- -- -- -- -- PERMIS - SECTION - FIN -- -- -- -- -- */


/* -- -- -- -- -- CIBLE - SECTION - DÉBUT -- -- -- -- -- */

.target {
    padding-top: 73px;
}

.target .top,
.target .top > .part {
    display: grid;
    gap: 32px;
}

.target .top > .part > .title {
    width: 80%;
}

.tags {    
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: calc(100vw - 60px);
}

.btn--tag {
    flex-shrink: 0;
    flex-grow: 0;
}

.target .bottom {
    display: grid;
    gap: 20px;
}

.target .bottom > .content {
    opacity: .64;
}

.target .bottom > .content * {
    font-size: 1.125rem;
    line-height: 140%;
}

.target > .illustration {
    margin-top: 40px;
    border-radius: 20px;
    aspect-ratio: 329/314;
    object-fit: cover;
    width: 100%;
}

@media (width > 767px) {
    .target {
        padding-top: 64px;
    }
    
    .target .top {
        grid-template-columns: 40% 50%;
        justify-content: space-between;
    }

    .target .top .btn {
        height: fit-content;
    }
    
    .target .bottom {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        max-width: 100%;
        gap: 24px;
    }

    .target .top > .part {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .tags {
        width: auto;
    }

    .target > .illustration {
        margin-top: 55px;
        aspect-ratio: 1141/524;
    }
}

@media (width > 991px) {
    .target .bottom > .content * {
        font-size: 1.125rem;
        line-height: 140%;
    }
}

@media (width > 1199px) {
    .target .bottom {
        max-width: 512px;
        justify-self: self-end;
    }
}

/* -- -- -- -- -- CIBLE - SECTION - FIN -- -- -- -- -- */


/* -- -- -- -- -- ACCOMPAGNEMENT - SECTION - DÉBUT -- -- -- -- -- */

.help {
    margin-top: 64px;
    display: flex;
    flex-direction: column-reverse;
    padding-inline: unset!important;
}

.help > .description > *:not(.assets__container) {
    padding-inline: 30px;
}

.help > .illustration {
    margin-inline: 30px;
    width: calc(100% - 60px);
}

.help > .description > *.btn {
    margin-left: 30px;
}

.help > .description > .title > * {
    font-family: var(--ffMRe);
    font-size: 1.875rem;
}

.help > .description > .title .iframe__container {
    aspect-ratio: 156/53;
    max-width: 156px;
    width: 100%;
    object-fit: cover;
    border-radius: 50px;
    height: auto;
    display: inline-block;
    margin-block: 12px -5px;
    margin-inline: -1px;
}

.help .assets__container::before,
.help .assets__container::after {
    display: none;
}

.help .assets {
    margin-top: unset;
}

@media (width > 389px) {
    .help > .description > .title .iframe__container {
        margin-block: 12px -20px;
    }
}

.help > .description > .title iframe {
    margin-bottom: -3px;
    zoom: 6;
}

.help > .description > .title > * {
    display: inline;
}

.help > .description > .content,
.help > .description > .btn,
.help > .illustration {
    margin-top: 40px;
}

.help > .description > .content > * {
    font-size: 1.125rem;
    line-height: 140%;
}

.help > .illustration {
    border-radius: 20px;
    aspect-ratio: 329/307;
    object-fit: cover;
    width: calc(100% - 60px);
}

@media (width > 575px) {
    .help > .description > .title .iframe__container {
        margin-bottom: -15px;
    }
}

@media (width > 767px) {
    
}

@media (width > 991px) {
    .help {
        margin-top: 120px;
        flex-direction: row;
        gap: 64px;
        margin-inline: 30px;
    }

    .help > .illustration {
        width: 40%;
        height: auto;
        aspect-ratio: unset;
        margin-top: unset;
        margin-inline: unset;
    }

    .help > .description > *:not(.assets__container):not(.btn) {
        padding-inline: unset;
    }

    .help > .description > .title > * {
        font-size: 3rem;
    }

    .help > .description > .title .iframe__container {
        aspect-ratio: 182/53;
        max-width: 182px;
        margin-bottom: -15px;
    }

    .help .assets__container {
        margin-inline: unset;
    }

    .help > .description > *.btn {
        margin-left: unset;
    }

    .help > .description > .content,
    .help > .description > .btn,
    .help > .illustration {
        margin-top: 24px;
    }

    .help .assets {
        padding-top: 24px;
        gap: 32px;
    }

    .help .asset .name {
        margin-top: 16px;
    }
}

@media (width > 1199px) {    
    .help {
        align-items: center;
        gap: 119px;
        margin-inline: 30px;
    }

    .help > .illustration {
        aspect-ratio: 560 / 524;
        width: 45%;
        height: auto;
    }
}

@media (width > 1499px) {
    .help {
        margin-inline: auto;
    }
}

/* -- -- -- -- -- ACCOMPAGNEMENT - SECTION - FIN -- -- -- -- -- */


/* -- -- -- -- -- MANTRA - SECTION - DÉBUT -- -- -- -- -- */

body > *.mantra {
    padding-block: 70px;
    text-align: center;
    padding-inline: 25px;
}

.mantra > * {
    font-family: var(--ffMRe);
    font-size: 2rem;
    line-height: 3.5rem;
}

.mantra iframe,
.mantra .illustration {
    aspect-ratio: 113/40;
    max-width: 113px;
    width: 100%;
    object-fit: cover;
    border-radius: 50px;
    height: auto;
    margin-bottom: -10px;
}

.mantra > * {
    display: inline;
}

.mantra > *.title--mobile,
.mantra > *.illustration--mobile {
    display: inline;
}

.mantra > *.title--desktop,
.mantra > *.illustration--desktop {
    display: none;
}

@media (width > 768px) {
    body > *.mantra {
        padding-block: 120px;
        max-width: 700px;
        margin-inline: auto;
        padding-inline: unset!important;
    }
}

@media (width > 991px) {
    .mantra > * {
        font-size: 3.5rem;
        line-height: 5rem;
    }

    .mantra iframe, .mantra .illustration {
        aspect-ratio: 163/58;
        max-width: 163px;
        margin-block: 15px -14px;
    }

    .mantra > *.title--mobile,
    .mantra > *.illustration--mobile {
        display: none;
    }

    .mantra > *.title--desktop,
    .mantra > *.illustration--desktop {
        display: inline;
    }
}

/* -- -- -- -- -- MANTRA - SECTION - FIN -- -- -- -- -- */


/* -- -- -- -- -- CONTACT - SECTION - DÉBUT -- -- -- -- -- */

#contact {
    padding-block: 88px 16px;
    background-color: var(--color-primary);
}

#contact * {
    color: var(--color-white);
}

#contact *.title {
    width: 100%;
}

@media (width > 579px) {
    #contact *.title {
        width: 80%;
    }
}

#contact > .content {
    margin-top: 32px;
}

#contact > .form {
    margin-top: 40px;
}

#contact > .map {
    margin-top: 48px;
    max-width: 72%;
    width: 100%;
}

#contact > .map > iframe {
    aspect-ratio: 244/119;
    width: 100%;
    height: auto;
    border-radius: 20vw;
    zoom: 0;
}

#contact > .infos {
    margin-top: 56px;
}

#contact > .infos > .name {
    font-family: var(--ffMMe);
    font-size: 1.5rem;
    line-height: 30px;
}

#contact > .infos > .address,
#contact > .infos > .contact__details {
    margin-top: 24px;
}

@media (width > 767px) {
    #contact {
        padding-block: 80px 56px;
        display: grid;
        grid-template-columns: 23% 21% auto;
    }

    #contact .title {
        grid-area: 1/1/2/3;
    }

    #contact .content {
        grid-area: 1/3/2/4;
        margin-top: 8px;
    }

    #contact .form {
        grid-area: 2/1/3/4;
    }

    #contact .map {
        margin-top: 56px;
        grid-area: 3/1/4/3;
    }

    #contact .infos {
        margin-top: 56px;
        grid-area: 3/3/4/4;
    }
}

@media (width > 991px) {
    #contact {
        column-gap: 56px;
    }

    #contact .map {
        grid-area: 3/1/4/2;
        max-width: 100%;
    }

    #contact .infos {
        grid-area: 3/2/4/3;
    }

    #contact > .form {
        margin-top: 101px;
    }

    #contact > *.title {
        width: 90%;
        max-width: 410px;
    }
}

@media (width > 1199px) {
    #contact {
        grid-template-columns: 21% 17% auto;
    }

    #contact > .content {
        justify-self: self-end;
        max-width: 375px;
    }
}


@media (width > 1499px) {
    #contact {
        position: relative;
    }

    #contact::before {
        content: "";
        background-color: var(--color-primary);
        height: 100%;
        left: -50%;
        width: 200%;
        display: block;
        position: absolute;
        z-index: -1;
    }

    #contact > .content {
        width: 50%;
        justify-self: self-end;
    }
}

/* -- -- -- -- -- CONTACT - SECTION - FIN -- -- -- -- -- */