/********** ALL **********/

body {
    overflow-x: hidden;
}

* {
    font-family: Roboto, serif;
    font-style: normal;
    padding: 0;
    margin: 0;
}

header {
    display: grid;
    position: fixed;
    z-index: 9997;
    top: 0;
    width: 100%;

    transition: all 0.5s ease-in-out;
}

@media all and ( min-width: 1301px ) {
    header {
        grid-template-columns: 20vw 60vw 20vw;
    }
}

@media all and ( max-width: 1300px ) {
    header {
        grid-template-columns: repeat(2, 50%);
    }
}

footer {
    position: relative;
    overflow: hidden;
}

h1 {
    font-weight: bold;
}

h2 {
    font-weight: bold;
}

h3 {
    font-size: 95%;
    letter-spacing: 0.03em;
}

.bold {
    font-weight: 900;
    justify-self: center;
    align-self: center;
}


/********** GRID **********/

.grid-col-1-2 {
    grid-column: 1 / 2;
}

.grid-col-2-3 {
    grid-column: 2 / 3;
}

.grid-col-3-4 {
    grid-column: 3 / 4;
}

.grid-col-4-5 {
    grid-column: 4 / 5;
}

.grid-col-5-6 {
    grid-column: 5 / 6;
}

.grid-col-6-7 {
    grid-column: 6 / 7;
}

.grid-col-7-8 {
    grid-column: 7 / 8;
}

.grid-col-8-9 {
    grid-column: 8 / 9;
}

.grid-col-9-10 {
    grid-column: 9 / 10;
}

.grid-row-1-2 {
    grid-row: 1 / 2;
}

.grid-row-2-3 {
    grid-row: 2 / 3;
}

.grid-row-3-4 {
    grid-row: 3 / 4;
}

.grid-row-4-5 {
    grid-row: 4 / 5;
}

.grid-row-5-6 {
    grid-row: 5 / 6;
}

.grid-row-6-7 {
    grid-row: 6 / 7;
}

.grid-row-7-8 {
    grid-row: 7 / 8;
}

.grid-row-8-9 {
    grid-row: 8 / 9;
}

.grid-row-9-10 {
    grid-row: 9 / 10;
}

.grid-row-10-11 {
    grid-row: 10 / 11;
}

.grid-row-11-12 {
    grid-row: 11 / 12;
}

.grid-row-12-13 {
    grid-row: 12 / 13;
}

.grid-row-13-14 {
    grid-row: 13 / 14;
}

.grid-row-14-15 {
    grid-row: 14 / 15;
}

/********** COOKIE **********/

#div-container-cookie-plus {
    z-index: -10;
    display: flex;
    justify-content: center;
    visibility: hidden;
    position: fixed;
    top: 0;
}

#div-background-cookie {
    height: 100%;
    width: 100%;
    background: #2E1572;
    opacity: 0;
    position: fixed;
    z-index: 2;
}

#div-cookie {
    justify-items: center;
    background: #e7dfff;
    z-index: 3;
    overflow-y: hidden;
    overflow-x: hidden;
    position: relative;
    display: flex;
}

#div-cookie::-webkit-scrollbar-thumb {
    background: #546BFF;
    border-radius: 10px;
}

#div-cookie::-webkit-scrollbar-track-piece {
    margin: 30px;
}

#div-cookie::-webkit-scrollbar-thumb:hover {
    background: #2E1572;
}

#presentation-cookie {
    display: grid;
    position: fixed;
    bottom: -100%;
    width: 92%;
    padding: 1% 4%;
    background-color: #e7dfff;
    z-index: 2;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);

    transition: all 1s ease-in-out;
}

.div-container-cookie-plus {
    display: grid;
    grid-template-rows: repeat(3, auto);
    height: 100%;
}

.p-cookie-title {
    font-weight: bold;
    color: #2e1572;
    align-self: center;
}

#p-cookie-plus-title {
    text-align: center;
    line-height: 150%;
}

.p-cookie-sous-title {
    font-weight: bold;
    color: #546BFF;
    margin: 5% 2% 2% 10%;
    font-size: 130%;
}

.p-cookie {
    color: #2e1572;
    line-height: 175%;
    align-self: center;
}

.p-cookie-plus {
    color: #2e1572;
    line-height: 175%;
    text-align: justify;
}

#div-input-cookie-plus {
    grid-row : 3 / 4;
    grid-column : 1 / 2;
    display: grid;
    grid-template-columns: repeat(2, 50%);
}

#div-input-cookie {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    width: 100%;
    height: 100%;
}

.input-cookie {
    font-weight: bold;
    align-self: center;
    cursor: pointer;

    transition: background 0.5s, border 0.5s, color 0.5s;
}

.input-cookie-plus {
    font-weight: bold;
    align-self: center;
    cursor: pointer;

    transition: background 0.5s, border 0.5s, color 0.5s;
}

.input-cookie-1 {
    color: #e7dfff;
    background: #2e1572;
    justify-self: end;
    margin-right: 10%;
    -webkit-appearance: none;
}

.input-cookie-1:hover {
    background: #5271FF;
}

.input-cookie-2 {
    color: #2e1572;
    background: transparent;
    justify-self: start;
    margin-left: 10%;
}

.input-cookie-2:hover {
    color: #5271FF;
}

#div-plus-cookie {
    opacity: 0;
    position: relative;

    transition: opacity 0.5s;
}

.a-cookie {
    text-decoration: none;

    transition: color 0.5s;
}

.a-cookie:hover {
    color: #2E1572;
}

#a-cookie-mail {
    font-style: italic;
}

@media all and ( min-width: 1301px ) {

    #presentation-cookie {
        grid-template-rows: repeat(2, auto);
        grid-template-columns: auto 30%;
    }

    #div-input-cookie {
        grid-row : 1 / 3;
        grid-column : 2 / 3;
    }

    .div-input-cookie {
        height: 100px;
    }

    #div-cookie {
        border-radius: 30px;
        height: 300px;
        margin-top: 15%;
        width: 65%;
        padding: 1%;
    }

    #p-cookie-plus-title {
        font-size: 150%;
        margin: 1% 4% 4% 4%;
    }

    #p-cookie-title {
        font-size: 110%;
        margin-top: 1%;
    }

    .p-cookie-plus {
        margin: 2% 5% 2% 5%;
        font-size: 110%;
    }

    .p-cookie {
        margin-top: 1%;
        font-size: 90%;
    }

    .input-cookie {
        padding: 3% 0 3% 0;
        font-size: 120%;
        border-radius: 20px;
        width: 70%;
    }

    .input-cookie-plus {
        padding: 3% 0 3% 0;
        font-size: 120%;
        border-radius: 20px;
        width: 31%;
    }

    .input-cookie-1 {
        border: #2e1572 solid 3px;
    }

    .input-cookie-1:hover {
        border: #5271FF solid 3px;
    }

    .input-cookie-2 {
        border: #2e1572 solid 3px;
    }

    .input-cookie-2:hover {
        border: #5271FF solid 3px;
    }

}

@media all and ( min-width: 801px ) and ( max-width: 1300px ) {

    #presentation-cookie {
        grid-template-rows: repeat(2, auto);
        grid-template-columns: auto 35%;
    }

    #div-input-cookie {
        grid-row : 1 / 3;
        grid-column : 2 / 3;
    }

    .div-input-cookie {
        height: 75px;
    }

    #div-cookie {
        border-radius: 25px;
        height: 290px;
        margin-top: 22%;
        width: 65%;
        padding: 3%;
    }

    #p-cookie-title {
        font-size: 110%;
        margin: 2% 0;
    }

    #p-cookie-plus-title {
        font-size: 130%;
        margin: 1% 4% 4% 4%;
    }

    .p-cookie {
        margin: 2% 0;
        font-size: 100%;
    }

    .input-cookie {
        padding: 4% 0 4% 0;
        font-size: 100%;
        border-radius: 15px;
        width: 90%;
    }

    .input-cookie-plus {
        padding: 4% 0 4% 0;
        font-size: 110%;
        border-radius: 15px;
        width: 45%;
    }

    .input-cookie-1 {
        border: #2e1572 solid 3px;
    }

    .input-cookie-1:hover {
        border: #5271FF solid 3px;
    }

    .input-cookie-2 {
        border: #2e1572 solid 3px;
    }

    .input-cookie-2:hover {
        border: #5271FF solid 3px;
    }

}

@media all and ( min-width: 501px ) and ( max-width: 800px ) {

    #presentation-cookie {
        grid-template-rows: repeat(3, auto);
    }

    #div-input-cookie {
        grid-row : 3 / 4;
        grid-column : 1 / 2;
    }

    .div-input-cookie {
        height: 75px;
    }

    #div-cookie {
        border-radius: 25px;
        height: 293px;
        margin-top: 40%;
        width: 85%;
    }

    #p-cookie-plus-title {
        font-size: 120%;
        margin: 3% 4% 4% 4%;
    }

    #p-cookie-title {
        font-size: 120%;
        text-align: center;
        margin-top: 4%;
    }

    .p-cookie-plus {
        margin: 2% 5% 2% 5%;
        font-size: 90%;
    }

    .p-cookie {
        margin: 4% 0;
        font-size: 90%;
        text-align: center;
    }

    .input-cookie-plus {
        padding: 3% 0 3% 0;
        font-size: 110%;
        border-radius: 15px;
        width: 50%;
    }

    .input-cookie {
        padding: 3% 0 3% 0;
        font-size: 80%;
        border-radius: 15px;
        width: 50%;
    }

    .input-cookie-1 {
        border: #2e1572 solid 3px;
    }

    .input-cookie-1:hover {
        border: #5271FF solid 3px;
    }

    .input-cookie-2 {
        border: #2e1572 solid 3px;
    }

    .input-cookie-2:hover {
        border: #5271FF solid 3px;
    }

}

@media all and ( max-width: 500px ) {

    #presentation-cookie {
        grid-template-rows: repeat(3, auto);
    }

    #div-input-cookie {
        grid-row : 3 / 4;
        grid-column : 1 / 2;
    }

    .div-input-cookie {
        height: 75px;
    }

    #div-cookie {
        border-radius: 20px;
        height: 285px;
        margin-top: 50%;
        width: 90%;
    }

    #p-cookie-plus-title {
        font-size: 120%;
        margin: 3% 4% 4% 4%;
    }

    #p-cookie-title {
        font-size: 90%;
        text-align: center;
        margin-top: 4%;
    }

    .p-cookie-plus {
        margin: 3% 5% 2% 5%;
        font-size: 85%;
    }

    .p-cookie {
        margin: 4% 0 6% 0;
        font-size: 70%;
        text-align: center;
    }

    .input-cookie-plus {
        padding: 5% 0 5% 0;
        font-size: 90%;
        border-radius: 13px;
        width: 70%;
    }

    .input-cookie {
        padding: 3% 0 3% 0;
        font-size: 90%;
        border-radius: 15px;
        width: 70%;
    }

    .input-cookie-1 {
        border: #2e1572 solid 2px;
    }

    .input-cookie-2:hover {
        border: #5271FF solid 2px;
    }

    .input-cookie-2 {
        border: #2e1572 solid 2px;
    }

    .input-cookie-2:hover {
        border: #5271FF solid 2px;
    }

}

/********** MENU **********/

#div-menu {
    height: 100%;
    width: 100%;
    position: fixed;
    display: grid;
    z-index: 3;
    top: 0;
    left: -100%;
    overflow-x: hidden;

    transition: all 1s;
}

#div-nav-menu {
    display: grid;
    grid-template-rows: 10% repeat(2, auto);
    background: #2E1572;
    opacity: 0.9;
    z-index: 4;
}

#div-close-menu {
    background: transparent;
    z-index: 4;
    overflow-x: hidden;
}

.nav-sous-menu {
    grid-template-rows: repeat(3, 15%) auto repeat(2, 15%) !important;
}

.div-menu {
    display: grid;
    grid-template-columns: 20% auto;
    cursor: pointer;
    height: auto;
}

.show-sous-menu {
    height: 100% !important;
}

#div-sous-menu {
    display: grid;
    grid-template-rows: repeat(2, 50%);
    background: #5271FF;
    opacity: 0.9;
    height: 0;

    transition: all 0.5s ease-in-out;
}

.div-sous-menu {
    display: grid;
    grid-template-columns: 20% auto;
    cursor: pointer;
}

.img-menu {
    justify-self: center;
    align-self: center;
}

.span-menu {
    font-weight: bold;
    color: #FFFFFF;
    align-self: center;
    margin-left: 5%;

    transition: opacity 0.5s;
}

#nav-menu {
    display: grid;
    width: 100%;
    text-align: start;
}

#button-close-menu {
    justify-self: end;
    align-self: center;
    color: #FFFFFF;
    text-decoration: none;
    margin-right: 5%;
    cursor: pointer;
}

.span-sous-menu {
    font-weight: bold;
    color: #FFFFFF;
    align-self: center;
    margin-left: 5%;
    opacity: 0;

    transition: opacity 0.5s;
}

.img-sous-menu {
    justify-self: center;
    align-self: center;
    opacity: 0;

    transition: opacity 0.5s;
}

@media all and ( min-width: 801px ) and ( max-width: 1300px ) {

    .img-menu {
        width: 20px;
    }

    #img-services {
        width: 7px;
    }

    .span-menu {
        font-size: 17px;
    }

    #nav-menu {
        grid-template-rows: repeat(3, 70px) 0 repeat(2, 70px);
    }

    #button-close-menu {
        width: 15px;
    }

    .span-sous-menu {
        font-size: 17px;
    }

    .img-sous-menu {
        width: 20px;
    }

}

@media all and ( min-width: 501px ) and ( max-width: 800px ) {

    .img-menu {
        width: 25px;
    }

    #img-services {
        width: 8px;
    }

    .span-menu {
        font-size: 25px;
    }

    #nav-menu {
        grid-template-rows: repeat(3, 17%) 0 repeat(2, 17%);
    }

    #button-close-menu {
        width: 20px;
    }

    .span-sous-menu {
        font-size: 20px;
    }

    .img-sous-menu {
        width: 25px;
    }

}

@media all and ( max-width: 500px ) {

    .img-menu {
        width: 20px;
    }

    #img-services {
        width: 7px;
    }

    .span-menu {
        font-size: 20px;
    }

    #nav-menu {
        grid-template-rows: repeat(3, 15%) 0 repeat(2, 15%);
    }

    #button-close-menu {
        width: 12px;
    }

    .span-sous-menu {
        font-size: 18px;
    }

    .img-sous-menu {
        width: 20px;
    }

}

/* -------------- ACCUEIL -------------- */

/********** HEADER **********/

#gradient-header-accueil {
    background: linear-gradient(180deg, #5271FF 0%, #EBEEFF 100%);
    filter: blur(20px);
    -webkit-filter: blur(20px);
    position: absolute;
    width: 120%;
    height: 100%;
    top: -10%;
    left: -10%;
}

.color {
    background: #5271FF !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

#button-rejoindre-header {
    background: #2E1572;
    color: #FFFFFF;
    cursor: pointer;
    opacity: 0;

    transition: background-color 0.3s, border 0.3s, opacity 1s;
}

#button-rejoindre-header:hover {
    background: #230b4f;
    border: 4px solid #230b4f;
}

#button-contacter-header {
    background: transparent;
    color: #2E1572;
    cursor: pointer;
    opacity: 0;

    transition: background-color 0.3s, opacity 1s;
}

#button-contacter-header:hover {
    background: #c5cfff;
}

#div-header-accueil {
    display: grid;
    position: relative;
}

#div-gradient {
    position: absolute;
    overflow: hidden;
    width: 100%;
    z-index: -3;
    height: 115%;
}

#adriz-header {
    cursor: pointer;
}

#h1-accueil {
    line-height: 150%;
    color: #2E1572;
    text-align: center;
    align-self: end;
    opacity: 0;

    transition: opacity 1s;
}

#adriz-presentation {
    font-weight: bold;
    line-height: 200%;
    color: #2E1572;
    text-align: center;
    align-self: center;
    opacity: 0;

    transition: opacity 1s;
}

#digital-img {
    position: absolute;
    opacity: 0;

    transition: opacity 1s;
}

#div-button {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    align-self: start;
}

.header-button {
    font-weight: bold;
    margin: auto;
    -webkit-appearance: none;
}

.smma-presentation {
    font-weight: 500;
    line-height: 150%;
    letter-spacing: 0.03em;
    color: #2E1572;
    text-align: center;
}

#div-smma-presentation {
    display: grid;
    align-self: center;
}

#smma-definition {
    align-self: center;
    justify-self: center;
    opacity: 0;

    transition: opacity 1s;
}

#smma-role {
    justify-self: center;
    align-self: center;
    opacity: 0;

    transition: opacity 1s;
}

.cursor {
    cursor: pointer;
}

@media all and ( min-width: 1301px ) {

    #div-header-accueil {
        grid-template-rows: 40vh repeat(2, 30vh) 500px;
        grid-template-columns: repeat(2, 50%);
    }

    .reduce-adriz {
        width: 100px !important;
    }

    #menu {
        display: none;
    }

    #div-menu {
        display: none;
    }

    #div-nav-header {
        display: grid;
        grid-template-columns: repeat(5, 12vw);
    }

    .nav-header {
        display: flex;
        width: 100%;
        height: 100%;
        cursor: pointer;
        justify-content: center;

        transition: all 0.3s ease-in-out;
    }

    .nav-header:hover {
        background: #2E1572;
    }

    #nav-adriz {
        cursor: default !important;
    }

    #nav-adriz:hover #nav-sous-adriz {
        height: 130px;
    }

    #nav-adriz:hover .span-sous-adriz {
        opacity: 1;
    }

    .margin {
        margin-top: 4.2% !important;
    }

    #nav-sous-adriz {
        position: absolute;
        display: grid;
        grid-template-rows: repeat(2, 50%);
        width: 12vw;
        height: 0;
        background: #2E1572;
        margin-top: 92px;

        transition: all 0.3s;
    }

    .div-sous-adriz {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;

        transition: background 0.3s, color 0.3s;
    }

    .div-sous-adriz:hover {
        background: #546BFF;
        color: #2E1572;
    }

    .span-sous-adriz {
        font-size: 120%;
        font-weight: bold;
        color: #fff;
        margin-left: 15%;
        opacity: 0;

        transition: opacity 0.3s, color 0.3s;
    }

    .span-header {
        color: white;
        font-size: 130%;
        font-weight: bold;
        align-self: center;
    }

    #adriz-header {
        width: 120px;
        margin: 10px 0 10px 30px;
        grid-column: 1 / 2;

        transition: all 0.5s ease-in-out;
    }

    #h1-accueil {
        font-size: 350%;
        margin-left: 15%;
    }

    #adriz-presentation {
        font-size: 170%;
        margin-left: 15%;
    }

    #digital-img {
        right: 3%;
        width: 40%;
        z-index: -2;
        animation-name: move;
        animation-duration: 5s;
        animation-iteration-count: infinite;
    }

    @keyframes move {
        0% {
            top: 150px;
        }
        50% {
            top: 170px;
        }
        100% {
            top: 150px;
        }
    }

    #div-button {
        margin-left: 15%;
    }

    .header-button {
        border: 4px solid #2E1572;
        border-radius: 25px;
        font-size: 150%;
        padding: 5% 12% 5% 12%;
    }

    .smma-presentation {
        font-size: 180%;
    }

    #div-smma-presentation {
        margin: 0 20% 0 20%;
        grid-column: 1 / 3;
        grid-template-rows: repeat(2, 150px);
    }

}

@media all and ( min-width: 801px ) and ( max-width: 1300px ) {

    #div-header-accueil {
        grid-template-rows: 40vh repeat(2, 30vh) 500px;
    }

    #gradient-header-accueil {
        background: linear-gradient(180deg, #5271FF 0%, #EBEEFF 100%);
        filter: blur(20px);
        -webkit-filter: blur(20px);
        position: absolute;
        width: 120%;
        height: 100%;
        top: -10%;
        left: -10%;
    }

    .reduce-adriz {
        width: 110px !important;
    }

    .reduce-menu {
        width: 45px !important;
    }

    #menu {
        width: 60px;
        align-self: center;
        margin: 5% 0 5% 10%;
        cursor: pointer;

        transition: all 0.5s ease-in-out;
    }

    #div-menu {
        grid-template-columns: 35% 65%;
    }

    .nav-header {
        display: none;
    }

    #adriz-header {
        width: 130px;
        align-self: center;
        justify-self: end;
        margin: 10px 40px 10px 0;
        grid-column: 2 / 3;

        transition: all 0.5s ease-in-out;
    }

    #h1-accueil {
        font-size: 350%;
        margin: 0 7% 0 7%;
    }

    #adriz-presentation {
        font-size: 170%;
        margin: 0 7% 0 7%;
    }

    #digital-img {
        left: -30%;
        top: 300px;
        width: 75%;
        z-index: -2;
    }

    #div-button {
        padding: 5%;
    }

    .header-button {
        border: 3px solid #2E1572;
        border-radius: 25px;
        font-size: 150%;
        padding: 5% 10% 5% 10%;
    }

    .smma-presentation {
        font-size: 180%;
    }

    #div-smma-presentation {
        margin: 0 10% 0 10%;
        grid-template-rows: repeat(2, 200px);
    }

}

@media all and ( min-width: 501px ) and ( max-width: 800px ) {

    #div-header-accueil {
        grid-template-rows: 40vh repeat(2, 30vh) 500px;
    }

    #gradient-header-accueil {
        background: linear-gradient(180deg, #5271FF 0%, #EBEEFF 100%);
        filter: blur(20px);
        -webkit-filter: blur(20px);
        position: absolute;
        width: 120%;
        height: 100%;
        top: -10%;
        left: -10%;
    }

    .reduce-adriz {
        width: 90px !important;
    }

    .reduce-menu {
        width: 35px !important;
    }

    #menu {
        width: 50px;
        align-self: center;
        margin: 5% 0 5% 10%;
        cursor: pointer;

        transition: all 0.5s ease-in-out;
    }

    #div-menu {
        grid-template-columns: 45% 55%;
    }

    .nav-header {
        display: none;
    }

    #adriz-header {
        width: 110px;
        align-self: center;
        justify-self: end;
        margin: 10px 30px 10px 0;
        grid-column: 2 / 3;

        transition: all 0.5s ease-in-out;
    }

    #h1-accueil {
        font-size: 350%;
        margin: 0 7% 0 7%;
    }

    #adriz-presentation {
        font-size: 170%;
        margin: 0 7% 0 7%;
    }

    #digital-img {
        left: -40%;
        top: 480px;
        width: 90%;
        z-index: -2;
    }

    #div-button {
        padding: 5%;
    }

    .header-button {
        border: 4px solid #2E1572;
        border-radius: 25px;
        font-size: 150%;
        padding: 5% 10% 5% 10%;
    }

    .smma-presentation {
        font-size: 180%;
    }

    #div-smma-presentation {
        margin: 0 7% 0 7%;
        grid-template-rows: repeat(2, 200px);
    }

}

@media all and ( max-width: 500px) {

    #div-header-accueil {
        grid-template-rows: 40vh repeat(2, 27.5vh) 300px
    }

    #gradient-header-accueil {
        background: linear-gradient(180deg, #5271FF 0%, #EBEEFF 100%);
        filter: blur(20px);
        -webkit-filter: blur(20px);
        position: absolute;
        width: 120%;
        height: 100%;
        top: -10%;
        left: -10%;
    }

    .reduce-adriz {
        width: 80px !important;
    }

    .reduce-menu {
        width: 35px !important;
    }

    #menu {
        width: 45px;
        align-self: center;
        margin: 5% 0 5% 10%;
        cursor: pointer;

        transition: all 0.5s ease-in-out;
    }

    .nav-header {
        display: none;
    }

    #adriz-header {
        width: 100px;
        align-self: center;
        justify-self: end;
        margin: 5% 10% 5% 0;
        grid-column: 2 / 3;

        transition: all 0.5s ease-in-out;
    }

    #h1-accueil {
        font-size: 200%;
        margin: 0 7% 0 7%;
    }

    #adriz-presentation {
        font-size: 100%;
        margin: 0 7% 0 7%;
        grid-column: 1 / 2;
    }

    #digital-img {
        left: -45%;
        top: 320px;
        width: 100%;
        z-index: -2;
    }

    #div-button {
        padding: 5%;
        grid-column: 1 / 2;
    }

    .header-button {
        border: 2px solid #2E1572;
        border-radius: 15px;
        font-size: 110%;
        padding: 5% 10% 5% 10%;
    }

    .smma-presentation {
        font-size: 110%;
    }

    #div-smma-presentation {
        margin: 0 7% 0 7%;
        grid-template-rows: repeat(2, 150px);
    }

}

/********** SERVICES **********/

#div-description-service-1 {
    background: linear-gradient(90.1deg, #5269FF 0.05%, #A8AEFF 99.96%);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    display: grid;
    grid-template-rows: repeat(4, 25%);
    grid-template-columns: 10% 90%;
    grid-column: 1 / 3;
    grid-row: 2 / 4;
    padding: 5% 0 5% 0;
}

.icon-service-1 {
    width: 55%;
    margin-left: 50%;
    align-self: center;
}

.p-service-1 {
    color: #FFFFFF;
}

#img-service-2 {
    height: 100%;
    position: absolute;
}

#div-description-service-2 {
    background: #FFFFFF;
    border: 2px solid #5271FF;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    border-radius: 30px;
    display: grid;
    grid-template-rows: repeat(4, 25%);
    grid-template-columns: 10% 90%;
    grid-column: 2 / 4;
    grid-row: 2 / 4;
    padding: 5% 0 5% 0;
}

.icon-service-2 {
    width: 55%;
    margin-left: 50%;
    align-self: center;
}

.p-service-2 {
    color: #5271FF;
}

#div-service-1 {
    display: grid;
    grid-template-columns: repeat(2, 40%) auto;
}

#h2-service-1 {
    align-self: center;
    text-align: center;
    letter-spacing: 0.03em;
    color: #2E1572;
}

#img-service-1 {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    grid-column: 2 / 4;
    grid-row: 1 / 3;
    z-index: 1;
}

.p-service {
    font-weight: bold;
    line-height: 110%;
    margin: 5%;
    align-self: center;
    letter-spacing: 0.03em;
}

#div-service-2 {
    display: grid;
    grid-template-columns: auto repeat(2, 40%);
}

#h2-service-2 {
    margin: 25% 0 25% 0;
    align-self: center;
    text-align: center;
    letter-spacing: 0.03em;
    color: #2E1572;
}

#div-img-service-2 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

@media all and ( min-width: 1301px ) {

    #div-service-1 {
        margin: 20% 25% 0 25%;
        grid-template-rows: auto 35px auto;
    }

    #h2-service-1 {
        font-size: 250%;
    }

    #img-service-1 {
        width: 85%;
    }

    .p-service {
        font-size: 150%;
    }

    #div-service-2 {
        margin: 15% 25% 0 25%;
        grid-template-rows: auto 35px auto;
    }

    #h2-service-2 {
        font-size: 250%;
    }

}

@media all and ( min-width: 801px ) and ( max-width: 1300px ) {

    #div-service-1 {
        margin: 20% 10% 0 10%;
        grid-template-rows: auto 35px auto;
    }

    #h2-service-1 {
        font-size: 250%;
    }

    #img-service-1 {
        width: 85%;
    }

    .p-service {
        font-size: 150%;
    }

    #div-service-2 {
        margin: 20% 10% 0 10%;
        grid-template-rows: auto 35px auto;
    }

    #h2-service-2 {
        font-size: 250%;
    }

}

@media all and ( min-width: 501px ) and ( max-width: 800px ) {

    #div-service-1 {
        margin: 30% 7% 0 7%;
        grid-template-rows: auto 30px auto;
    }

    #h2-service-1 {
        font-size: 200%;
    }

    #img-service-1 {
        width: 87%;
    }

    .p-service {
        font-size: 135%;
    }

    #div-service-2 {
        margin: 20% 7% 0 7%;
        grid-template-rows: auto 30px auto;
    }

    #h2-service-2 {
        font-size: 200%;
    }

}

@media all and ( max-width: 500px) {

    #div-service-1 {
        margin: 40% 7% 25% 7%;
        grid-template-rows: auto 15px auto;
    }

    #h2-service-1 {
        font-size: 120%;
    }

    #img-service-1 {
        width: 92%;
    }

    .p-service {
        font-size: 80%;
    }

    #div-service-2 {
        margin: 25% 7% 0 7%;
        grid-template-rows: auto 15px auto;
    }

    #h2-service-2 {
        font-size: 120%;
    }

}

/********** NOUS CONTACTER **********/

#div-contact {
    display: grid;
    grid-template-columns: repeat(2, 50%);
}

#h2-question {
    align-self: center;
    justify-self: center;
    display: flex;
    align-items: center;
    text-align: justify;
    letter-spacing: 0.03em;
    color: #2E1572;
}

#input-contact {
    font-weight: bold;
    background: linear-gradient(90.25deg, #546BFF 0.05%, #A6ACFF 99.95%);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    padding: 7%;
    text-align: center;
    align-self: center;
    justify-self: center;
    letter-spacing: 0.03em;
    color: #FFFFFF;
    border: none;
    cursor: pointer;

    transition: all 0.3s ease-in-out;
}

#input-contact:hover {
    padding: 6.5%;
    font-size: 190%;
}

@media all and ( min-width: 1301px ) {

    #div-contact {
        margin: 15% 25% 0 25%;
        height: 200px;
    }

    #h2-question {
        font-size: 250%;
    }

    #input-contact {
        font-size: 200%;
        border-radius: 20px;
    }

}

@media all and ( min-width: 801px ) and ( max-width: 1300px ) {

    #div-contact {
        margin: 20% 15% 0 15%;
    }

    #h2-question {
        font-size: 220%;
    }

    #input-contact {
        font-size: 170%;
        border-radius: 20px;
    }

}

@media all and ( min-width: 501px ) and ( max-width: 800px ) {

    #div-contact {
        margin: 20% 10% 0 10%;
    }

    #h2-question {
        font-size: 200%;
    }

    #input-contact {
        font-size: 150%;
        border-radius: 15px;
    }

}

@media all and ( max-width: 500px) {

    #div-contact {
        margin: 30% 7% 0 7%;
    }

    #h2-question {
        font-size: 120%;
    }

    #input-contact {
        font-size: 100%;
        border-radius: 10px;
    }

}

/********** RESEAUX SOCIAUX **********/

.img-reseaux-sociaux {
    width: 35%;
    grid-row: 1 / 3;
    z-index: 1;
    margin-left: 7%;
}

.hr-reseaux-sociaux {
    width: 20%;
    height: 100%;
    border: none;
    border-radius: 10px;
    margin-left: 5%;
}

#div-description-facebook {
    display: grid;
    background: #FFFFFF;
    border: 2px solid #5271FF;
}

#h3-facebook-ads {
    color: #2E1572;
}

#hr-facebook-ads {
    background-color: #2E1572;
}

#p-facebook-ads {
    color: #2E1572;
}

#div-description-youtube {
    display: grid;
    background: #5271FF;
}

#h3-youtube-advertising {
    color: #FFFFFF;
}

#hr-youtube-advertising {
    background-color: #FFFFFF;
}

#p-youtube-advertising {
    color: #FFFFFF;
}

#div-description-instagram {
    display: grid;
    background: #2E1572;
}

#h3-instagram-business {
    color: #FFFFFF;
}

#hr-instagram-business {
    background-color: #FFFFFF;
}

#p-instagram-business {
    color: #FFFFFF;
}

#div-description-linkedin {
    display: grid;
    background: #FFFFFF;
    border: 2px solid #5271FF;
}

#h3-linkedin-ads {
    color: #2E1572;
}

#hr-linkedin-ads {
    background-color: #2E1572;
}

#p-linkedin-ads {
    color: #2E1572;
}

#div-description-google {
    display: grid;
    background: #5271FF;
}

#h3-google-ads {
    color: #FFFFFF;
}

#hr-google-ads {
    background-color: #FFFFFF;
}

#p-google-ads {
    color: #FFFFFF;
}

#div-description-email {
    display: grid;
    background: #2E1572;
}

#h3-email-marketing {
    color: #FFFFFF;
}

#hr-email-marketing {
    background-color: #FFFFFF;
}

#p-email-marketing {
    color: #FFFFFF;
}

#div-reseaux-sociaux {
    display: grid;
    height: auto;
}

.div-reseaux-content {
    display: grid;
    grid-template-rows: repeat(2, 10%) auto;
}

.p-reseaux-sociaux {
    margin: 7% 5% 5% 5%;
    letter-spacing: 0.03em;
}

.h3-reseaux-sociaux {
    margin: 0 5% 7% 5%;
    align-self: end;
}

#div-linkedin-ads {
    grid-row: 2 / 3;
}

.div-description-reseaux {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    width: 100%;
    display: grid;
    grid-template-rows: 30% 2% auto;
    grid-row: 2 / 4;
}

#input-more-info {
    background: transparent;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.03em;
    font-weight: bold;
    color: #2E1572;
    cursor: pointer;
    width: 15%;

    transition: all 0.3s;
}

#input-more-info:hover {
    background: #c5cfff;
}

#div-more-info {
    display: flex;
    justify-content: center;
    width: 100%;
}

@media all and ( min-width: 1301px) {

    #div-reseaux-sociaux {
        grid-template-columns: repeat(3, 33%);
        grid-template-rows: repeat(2, 50%);
        margin: 15% 23% 0 23%;
    }

    .div-reseaux-content {
        margin: 10%;
    }

    .p-reseaux-sociaux {
        font-size: 115%;
        line-height: 150%;
    }

    .h3-reseaux-sociaux {
        font-size: 135%;
    }

    #div-youtube-advertising {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    #div-facebook-ads {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
    }

    #div-email-marketing {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    #div-google-ads {
        grid-column: 3 / 4;
        grid-row: 2 / 3;
    }

    #div-linkedin-ads {
        grid-column: 2 / 3;
    }

    #div-instagram-business {
        grid-row: 1 / 2;
        grid-column: 2 / 3;
    }

    .div-description-reseaux {
        height: 350px;
        margin-top: 2%;
    }

    #input-more-info {
        border: 4px solid #2E1572;
        border-radius: 25px;
        font-size: 130%;
        padding: 1.5% 0 1.5% 0;
    }

    #div-more-info {
        margin-top: 5%;
    }

}

@media all and ( min-width: 801px ) and ( max-width: 1300px ) {

    #div-reseaux-sociaux {
        grid-template-columns: repeat(3, 33%);
        grid-template-rows: repeat(2, 50%);
        margin: 15% 5% 0 5%;
    }

    .div-reseaux-content {
        margin: 10%;
    }

    .h3-reseaux-sociaux {
        font-size: 120%;
    }

    .p-reseaux-sociaux {
        font-size: 100%;
        line-height: 140%
    }

    #div-youtube-advertising {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    #div-facebook-ads {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
    }

    #div-email-marketing {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    #div-google-ads {
        grid-column: 3 / 4;
        grid-row: 2 / 3;
    }

    #div-linkedin-ads {
        grid-column: 2 / 3;
    }

    #div-instagram-business {
        grid-row: 1 / 2;
        grid-column: 2 / 3;
    }

    .div-description-reseaux {
        height: 320px;
        margin-top: 2%;
    }

    #input-more-info {
        border: 4px solid #2E1572;
        border-radius: 25px;
        font-size: 140%;
        padding: 2% 0 2% 0;
        width: 25%;
    }

    #div-more-info {
        margin-top: 5%;
    }

}

@media all and ( min-width: 501px ) and ( max-width: 800px ) {

    #div-reseaux-sociaux {
        grid-template-columns: repeat(2, 50%);
        grid-template-rows: repeat(3, 33%);
        margin: 15% 13% 0 13%;
    }

    .div-reseaux-content {
        margin: 10%;
    }

    .h3-reseaux-sociaux {
        font-size: 120%;
    }

    .p-reseaux-sociaux {
        font-size: 100%;
        line-height: 140%;
    }

    #div-youtube-advertising {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    #div-facebook-ads {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    #div-email-marketing {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
    }

    #div-google-ads {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }

    #div-linkedin-ads {
        grid-column: 2 / 3;
    }

    #div-instagram-business {
        grid-row: 2 / 3;
        grid-column: 1 / 2;
    }

    .div-description-reseaux {
        height: 320px;
        margin-top: 3%;
    }

    #input-more-info {
        border: 4px solid #2E1572;
        border-radius: 25px;
        font-size: 150%;
        padding: 3% 0 3% 0;
        width: 35%;
    }

    #div-more-info {
        margin-top: 5%;
    }

}

@media all and ( max-width: 500px) {

    #div-reseaux-sociaux {
        grid-template-columns: repeat(2, 50%);
        grid-template-rows: repeat(3, 33%);
        margin-top: 15%;
    }

    .div-reseaux-content {
        margin: 5%;
    }

    .h3-reseaux-sociaux {
        font-size: 90%;
    }

    .p-reseaux-sociaux {
        font-size: 80%;
        line-height: 130%;
    }

    #div-youtube-advertising {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    #div-facebook-ads {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    #div-email-marketing {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
    }

    #div-google-ads {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }

    #div-linkedin-ads {
        grid-column: 2 / 3;
    }

    #div-instagram-business {
        grid-row: 2 / 3;
        grid-column: 1 / 2;
    }

    .div-description-reseaux {
        height: 250px;
        grid-row: 2 / 4;
    }

    #input-more-info {
        border: 3px solid #2E1572;
        border-radius: 15px;
        font-size: 100%;
        padding: 3% 0 3% 0;
        width: 45%;
    }

    #div-more-info {
        margin-top: 10%;
    }

}

/********** NEWSLETTER **********/

#input-email-newsletter {
    background: #FFFFFF;
    border: 2px solid #5269FF;
    box-sizing: border-box;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 3%;
    margin: 5% 5% 5% 0;

    transition: border 0.5s ease-in-out;
}

#input-email-newsletter:hover {
    border: 2px solid #2E1572;
}

#form-newsletter {
    display: grid;
    grid-template-rows: repeat(2, auto) 20px;
    grid-template-columns: 70% 30%;
}

#label-newsletter {
    grid-column: 1 / 3;
    align-self: center;
    text-align: justify;
    letter-spacing: 0.03em;
    color: #2E1572;
}

#input-send-newsletter {
    font-weight: bold;
    background: #5269FF;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    padding: 3%;
    margin: 10% 0 10% 5%;
    border: none;
    cursor: pointer;
    -webkit-appearance: none;

    transition: background 0.3s;
}

#input-send-newsletter:hover {
    background: #2E1572;
}

.show {
    opacity: 1 !important;
}

#validation-newsletter {
    color: #5269FF;
    grid-column: 1 / 3;
    justify-self: center;
    align-self: center;
    opacity: 0;

    transition: opacity 0.5s;
}

.error-newsletter {
    color: red;
    grid-column: 1 / 3;
    justify-self: center;
    text-align: center;
    opacity: 0;

    transition: opacity 0.5s;
}

@media all and ( min-width: 1301px ) {

    #form-newsletter {
        margin: 15% 25% 0 25%;
    }

    #label-newsletter {
        font-size: 140%;
        line-height: 150%;
        margin: 5% 0 2% 0;
    }

    #input-send-newsletter {
        border-radius: 15px;
        font-size: 150%;
    }

    #validation-newsletter {
        font-size: 100%;
        margin: 3%;
    }

    .error-newsletter {
        font-size: 100%;
        margin: 3%;
    }

}

@media all and ( min-width: 801px ) and ( max-width: 1300px ) {

    #form-newsletter {
        margin: 20% 15% 0 15%;
    }

    #label-newsletter {
        font-size: 130%;
        line-height: 150%;
        margin: 5% 0 3% 0;
    }

    #input-send-newsletter {
        border-radius: 10px;
        font-size: 130%;
    }

    #validation-newsletter {
        font-size: 80%;
        margin: 5%;
    }

    .error-newsletter {
        font-size: 100%;
        margin: 5%;
    }

}

@media all and ( min-width: 501px ) and ( max-width: 800px ) {

    #form-newsletter {
        margin: 20% 10% 0 10%;
    }

    #label-newsletter {
        font-size: 130%;
        line-height: 150%;
        margin: 5% 0 3% 0;
    }

    #input-send-newsletter {
        border-radius: 10px;
        font-size: 130%;
    }

    #validation-newsletter {
        font-size: 90%;
        margin: 3%;
    }

    .error-newsletter {
        font-size: 90%;
        margin: 3%;
    }

}

@media all and ( max-width: 500px) {

    #form-newsletter {
        margin: 20% 7% 0 7%;
    }

    #label-newsletter {
        font-size: 95%;
        line-height: 130%;
        margin: 5% 0 5% 0;
    }

    #input-send-newsletter {
        border-radius: 10px;
        font-size: 100%;
    }

    #validation-newsletter {
        font-size: 80%;
        margin: 5%;
    }

    .error-newsletter {
        font-size: 80%;
        margin: 5%;
    }

}

/********** NOUS REJOINDRE **********/

#div-join-us {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#input-join-us {
    background: linear-gradient(90.38deg, #0E284F 0.05%, #2D4374 99.95%);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    font-weight: bold;
    letter-spacing: 0.03em;
    color: #FFFFFF;
    width: 100%;
    border: none;
    cursor: pointer;

    transition: all 0.3s ease-in-out;
}

#input-join-us:hover {
    padding: 3.5% 0 3.5% 0;
    font-size: 142%;
    margin: 1%;
}

@media all and ( min-width: 1301px ) {

    #div-join-us {
        margin: 15% 30% 0 30%;
        height: 100px;
    }

    #input-join-us {
        border-radius: 20px;
        font-size: 150%;
        padding: 4%;
    }

}

@media all and ( min-width: 801px ) and ( max-width: 1300px ) {

    #div-join-us {
        margin: 15% 20% 0 20%;
    }

    #input-join-us {
        border-radius: 20px;
        font-size: 150%;
        padding: 5%;
    }

}

@media all and ( min-width: 501px ) and ( max-width: 800px ) {

    #div-join-us {
        margin: 15% 15% 0 15%;
    }

    #input-join-us {
        border-radius: 20px;
        font-size: 150%;
        padding: 5%;
    }

}

@media all and ( max-width: 500px) {

    #div-join-us {
        margin: 20% 7% 20% 7%;
    }

    #input-join-us {
        border-radius: 15px;
        font-size: 100%;
        padding: 5%;
    }

}

/* -------------- NOS SERVICES -------------- */

/********** HEADER **********/

#header-service {
    position: relative;
    overflow: hidden;
    height: 100vh;
    display: flex;
    justify-content: center;
}

#h1-services {
    text-align: center;
    color: #FFFFFF;
    position: relative;
    background: rgba(46, 21, 114, 0.8);
    align-self: center;
    opacity: 0;

    transition: opacity 1s;
}

#img-header-service {
    position: absolute;
    align-self: center;
}

@media all and ( min-width: 1301px ) {

    #h1-services {
        border-radius: 15px;
        padding: 3%;
        font-size: 300%;
    }

    #img-header-service {
        width: 80%;
    }

}

@media all and ( min-width: 801px ) and ( max-width: 1300px ) {

    #header-service {
        margin-top: 7%;
    }

    #h1-services {
        border-radius: 15px;
        padding: 5%;
        font-size: 300%;
    }

    #img-header-service {
        width: 110%;
    }

}

@media all and ( min-width: 501px ) and ( max-width: 800px ) {

    #h1-services {
        border-radius: 15px;
        padding: 6%;
        font-size: 300%;
    }

    #img-header-service {
        width: 150%;
    }

}

@media all and ( max-width: 500px ) {

    #h1-services {
        border-radius: 10px;
        padding: 7%;
    }

    #img-header-service {
        width: 150%;
    }

}

/********** STRATÉGIE **********/

#div-container-strategie {
    display: grid;
    grid-template-rows: repeat(4, auto);
    position: relative;
    overflow-x: hidden;
    z-index: 1;
}

.cercle-strategie-gauche {
    margin: 5% 20% 5% 15%;
}

.cercle-strategie-droit {
    margin: 5% 15% 5% 20%;
}

.icon-strategie-gauche {
    margin: 5% 20% 5% 15%;
}

.icon-strategie-droit {
    margin: 5% 15% 5% 20%;
}

#img-faiblesses {
    margin-top: 10%;
}

.p-strategie-gauche {
    color: #2E1572;
    margin-right: 5%;
}

.p-strategie-droit {
    color: #5271FF;
    margin-left: 5%;
}

#div-strategie {
    display: grid;
}

.h2-services {
    color: #2E1572;
    background: #FFFFFF;
    text-align: center;
    grid-row: 1 / 3;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    align-self: center;
    z-index: 3;
}

#div-texte-strategie {
    grid-row: 2 / 4;
    background: #5271FF;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    z-index: 2;
    display: flex;
    align-items: center;
}

#p-strategie {
    font-weight: 500;
    text-align: justify;
    letter-spacing: 0.03em;
    color: #FFFFFF;
}

#img-strategie {
    position: absolute;
    height: 100%;
}

.icon-strategie {
    justify-self: center;
    align-self: center;
}

.p-strategie {
    text-align: justify;
    align-self: center;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.div-strategie {
    display: grid;
    position: relative;
    background-color: rgba(255, 255, 255, 0.9);
}

.cercle-strategie {
    justify-self: center;
    align-self: center;
}

#img-pack {
    margin: 4% 20% 5% 17%;
}

@media all and ( min-width: 1301px ) {

    #div-strategie {
        height: 1700px;
        grid-template-rows: 10% 50px 11% auto;
    }

    .h2-services {
        border-radius: 25px;
        padding: 3%;
        margin: 0 30% 0 30%;
        font-size: 200%;
        line-height: 40px;
    }

    #div-texte-strategie {
        padding: 0 20% 0 20%;
    }

    #p-strategie {
        line-height: 45px;
        font-size: 150%;
    }

    #img-pack {
        width: 20%;
    }

    .icon-strategie {
        width: 25%;
    }

    .div-strategie-gauche {
        grid-template-columns: 25% auto;
    }

    .div-strategie-droit {
        grid-template-columns: auto 25%;
    }

    .p-strategie {
        font-size: 150%;
        line-height: 45px;
    }

    #div-objectifs {
        margin-top: 6%;
    }

    #div-amelioration {
        margin-bottom: 6%;
    }

    .div-strategie {
        margin: 2% 20% 2% 20%;
        border-radius: 25px;
    }

    .cercle-strategie {
        width: 45%;
    }

}

@media all and ( min-width: 801px ) and ( max-width: 1300px ) {

    #div-strategie {
        height: 1250px;
        grid-template-rows: 10% 50px 11% auto;
    }

    .h2-services {
        border-radius: 20px;
        padding: 5%;
        margin: 0 20% 0 20%;
        line-height: 35px;
    }

    #div-texte-strategie {
        padding: 0 10% 0 10%;
    }

    #p-strategie {
        line-height: 35px;
        font-size: 130%;
        margin-top: 3%;
    }

    #img-strategie {
        left: -15%;
    }

    #img-pack {
        width: 30%;
    }

    .icon-strategie {
        width: 35%;
    }

    .div-strategie-gauche {
        grid-template-columns: 25% auto;
    }

    .div-strategie-droit {
        grid-template-columns: auto 25%;
    }

    .p-strategie {
        font-size: 130%;
        line-height: 35px;
    }

    #div-objectifs {
        margin-top: 6%;
    }

    #div-amelioration {
        margin-bottom: 6%;
    }

    .div-strategie {
        margin: 2% 10% 2% 10%;
        border-radius: 20px;
    }

    .cercle-strategie {
        width: 60%;
    }

}

@media all and ( min-width: 501px ) and ( max-width: 800px ) {

    #div-strategie {
        height: 1300px;
        grid-template-rows: 10% 50px 15% auto;
    }

    .h2-services {
        border-radius: 20px;
        padding: 5%;
        margin: 0 18% 0 18%;
        line-height: 35px;
    }

    #div-texte-strategie {
        padding: 0 10% 0 10%;
    }

    #p-strategie {
        line-height: 35px;
        font-size: 130%;
        margin-top: 5%;
    }

    #img-strategie {
        left: -20%
    }

    #img-pack {
        width: 30%;
    }

    .icon-strategie {
        width: 35%;
    }

    .div-strategie-gauche {
        grid-template-columns: 25% auto;
    }

    .div-strategie-droit {
        grid-template-columns: auto 25%;
    }

    .p-strategie {
        line-height: 35px;
        font-size: 130%;
    }

    #div-objectifs {
        margin-top: 8%;
    }

    #div-amelioration {
        margin-bottom: 8%;
    }

    .div-strategie {
        margin: 3% 5% 3% 5%;
        border-radius: 20px;
    }

    .cercle-strategie {
        width: 65%;
    }

}

@media all and ( max-width: 500px ) {

    #div-strategie {
        height: 900px;
        grid-template-rows: 10% 50px 20% 60%;
    }

    .h2-services {
        border-radius: 10px;
        padding: 5%;
        margin: 0 6% 0 6%;
    }

    #div-texte-strategie {
        padding: 0 7% 0 7%;
    }

    #p-strategie {
        line-height: 25px;
        margin-top: 5%;
    }

    #img-strategie {
        left: -50%
    }

    #img-pack {
        width: 30%;
    }

    .icon-strategie {
        width: 35%;
    }

    .div-strategie-gauche {
        grid-template-columns: 30% auto;
    }

    .div-strategie-droit {
        grid-template-columns: auto 30%;
    }

    .p-strategie {
        font-size: 90%;
        line-height: 23px;
    }

    #div-objectifs {
        margin-top: 8%;
    }

    #div-amelioration {
        margin-bottom: 8%;
    }

    .div-strategie {
        margin: 3% 5% 3% 5%;
        border-radius: 10px;
    }

    .cercle-strategie {
        width: 65%;
    }

}

/********** ANALYSE **********/

#p-analyse {
    color: #2E1572;
    font-weight: bold;
    text-align: center;
    align-self: center;
    letter-spacing: 0.03em;
    margin: 5%;
}

#div-analyse {
    display: grid;
    grid-template-rows: 50% 50%;
}

#input-analyse {
    background: transparent;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    color: #2E1572;
    font-weight: bold;
    align-self: center;
    justify-self: center;
    cursor: pointer;

    transition: background 0.3s;
}

#input-analyse:hover {
    background: #c5cfff;
}

@media all and ( min-width: 1301px ) {

    #p-analyse {
        line-height: 20px;
        font-size: 200%;
    }

    #div-analyse {
        margin: 10% 5% 0 5%;
    }

    #input-analyse {
        border-radius: 25px;
        border: #2E1572 solid 4px;
        font-size: 200%;
        padding: 2% 5% 2% 5%;
        width: 25%;
    }

}

@media all and ( min-width: 801px ) and ( max-width: 1301px ) {

    #p-analyse {
        line-height: 20px;
        font-size: 150%;
    }

    #div-analyse {
        margin: 15% 5% 0 5%;
    }

    #input-analyse {
        border-radius: 20px;
        border: #2E1572 solid 4px;
        font-size: 150%;
        padding: 3% 7% 3% 7%;
        margin-top: 2%;
        width: 30%;
    }

}

@media all and ( min-width: 501px ) and ( max-width: 800px ) {

    #p-analyse {
        line-height: 20px;
        font-size: 150%;
    }

    #div-analyse {
        margin: 15% 5% 0 5%;
    }

    #input-analyse {
        border-radius: 20px;
        border: #2E1572 solid 4px;
        font-size: 150%;
        padding: 4% 8% 4% 8%;
        margin-top: 2%;
        width: 35%;
    }

}

@media all and ( max-width: 500px ) {

    #p-analyse {
        line-height: 25px;
        font-size: 120%;
    }

    #div-analyse {
        margin: 15% 5% 0 5%;
    }

    #input-analyse {
        border-radius: 15px;
        border: #2E1572 solid 3px;
        font-size: 120%;
        padding: 5% 10% 5% 10%;
        margin-top: 5%;
        width: 55%;
    }

}

/********** CAMPAGNE **********/

#div-container-campagne {
    display: grid;
    grid-template-rows: repeat(4, auto);
    position: relative;
    overflow-x: hidden;
    z-index: 1;
}

.cercle-campagne-gauche {
    margin: 5% 20% 5% 15%;
}

.cercle-campagne-droit {
    margin: 5% 15% 5% 20%;
}

.icon-campagne-gauche {
    margin: 5% 20% 5% 15%;
}

.icon-campagne-droit {
    margin: 5% 15% 5% 20%;
}

#img-faiblesses {
    margin-top: 10%;
}

.p-campagne-gauche {
    color: #5271FF;
    margin-right: 5%;
}

.p-campagne-droit {
    color: #2E1572;
    margin-left: 5%;
}

#div-campagne {
    display: grid;
}

#p-campagne {
    font-weight: 500;
    text-align: justify;
    letter-spacing: 0.03em;
    color: #FFFFFF;
}

.p-campagne {
    text-align: justify;
    align-self: center;
    font-weight: 500;
    letter-spacing: 0.03em;
}

#img-campagne {
    position: absolute;
    height: 100%;
}

#div-texte-campagne {
    grid-row: 2 / 4;
    background: #2E1572;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    z-index: 2;
    display: flex;
    align-items: center;
}

.div-campagne {
    display: grid;
    position: relative;
    background-color: rgba(255, 255, 255, 0.9);
}

.cercle-campagne {
    justify-self: center;
    align-self: center;
}

.icon-campagne {
    justify-self: center;
    align-self: center;
}

@media all and ( min-width: 1301px ) {

    #div-campagne {
        height: 1700px;
        grid-template-rows: 10% 50px 11% auto;
        margin-top: 15%;
    }

    #p-campagne {
        line-height: 40px;
        font-size: 150%;
    }

    .p-campagne {
        font-size: 150%;
        line-height: 40px;
    }

    #div-texte-campagne {
        padding: 0 20% 0 20%;
    }

    .div-campagne {
        margin: 2% 20% 2% 20%;
        border-radius: 25px;
    }

    .div-campagne-gauche {
        grid-template-columns: 25% auto;
    }

    .div-campagne-droit {
        grid-template-columns: auto 25%;
    }

    #div-segmentation {
        margin-top: 6%;
    }

    #div-performance {
        margin-bottom: 6%;
    }

    .cercle-campagne {
        width: 45%;
    }

    .icon-campagne {
        width: 25%;
    }

}

@media all and ( min-width: 801px ) and ( max-width: 1300px ) {

    #div-campagne {
        height: 1200px;
        grid-template-rows: 10% 50px 13% auto;
        margin-top: 15%;
    }

    #p-campagne {
        line-height: 35px;
        font-size: 130%;
        margin-top: 3%;
    }

    .p-campagne {
        font-size: 130%;
        line-height: 35px;
    }

    #img-campagne {
        left: -16%
    }

    #div-texte-campagne {
        padding: 0 10% 0 10%;
    }

    .div-campagne {
        margin: 2% 10% 2% 10%;
        border-radius: 20px;
    }

    .div-campagne-gauche {
        grid-template-columns: 25% auto;
    }

    .div-campagne-droit {
        grid-template-columns: auto 25%;
    }

    #div-segmentation {
        margin-top: 6%;
    }

    #div-performance {
        margin-bottom: 6%;
    }

    .cercle-campagne {
        width: 60%;
    }

    .icon-campagne {
        width: 35%;
    }

}

@media all and ( min-width: 501px ) and ( max-width: 800px ) {

    #div-campagne {
        height: 1300px;
        grid-template-rows: 10% 50px 15% auto;
        margin-top: 15%;
    }

    #p-campagne {
        line-height: 35px;
        font-size: 130%;
        margin-top: 5%;
    }

    .p-campagne {
        font-size: 130%;
        line-height: 35px;
    }

    #img-campagne {
        left: -50%
    }

    #div-texte-campagne {
        padding: 0 10% 0 10%;
    }

    .div-campagne {
        margin: 3% 5% 3% 5%;
        border-radius: 20px;
    }

    .div-campagne-gauche {
        grid-template-columns: 25% auto;
    }

    .div-campagne-droit {
        grid-template-columns: auto 25%;
    }

    #div-segmentation {
        margin-top: 8%;
    }

    #div-performance {
        margin-bottom: 8%;
    }

    .cercle-campagne {
        width: 65%;
    }

    .icon-campagne {
        width: 35%;
    }

}

@media all and ( max-width: 500px ) {

    #div-campagne {
        height: 900px;
        grid-template-rows: 10% 50px 20% 60%;
        margin-top: 20%;
    }

    #p-campagne {
        line-height: 25px;
        margin-top: 5%;
    }

    .p-campagne {
        font-size: 90%;
        line-height: 23px;
    }

    #img-campagne {
        left: -50%
    }

    #div-texte-campagne {
        padding: 0 7% 0 7%;
    }

    .div-campagne {
        margin: 3% 5% 3% 5%;
        border-radius: 10px;
    }

    .div-campagne-gauche {
        grid-template-columns: 30% auto;
    }

    .div-campagne-droit {
        grid-template-columns: auto 30%;
    }

    #div-segmentation {
        margin-top: 8%;
    }

    #div-performance {
        margin-bottom: 8%;
    }

    .cercle-campagne {
        width: 65%;
    }

    .icon-campagne {
        width: 35%;
    }

}

/********** INBOUND **********/

#div-inbound {
    display: flex;
    align-content: center;
    justify-content: center;
    margin-top: 15%;
}

#div-gif-inbound {
    background: #DDDFFF;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    align-items: center;
    display: flex;
    justify-content: center;
}

@media all and ( min-width: 1301px ) {

    #div-gif-inbound {
        border-radius: 30px;
        height: 550px;
    }

    #video-inbound {
        max-width: 90%;
        max-height: 90%;
    }

}

@media all and ( min-width: 801px ) and ( max-width: 1300px ) {

    #div-gif-inbound {
        border-radius: 25px;
        height: 450px;
    }

    #video-inbound {
        max-width: 90%;
        max-height: 90%;
    }

}

@media all and ( min-width: 501px ) and ( max-width: 800px ) {

    #div-gif-inbound {
        border-radius: 20px;
        height: 350px;
        padding: 3%;
    }

    #video-inbound {
        max-width: 100%;
        max-height: 100%;
    }

}

@media all and ( max-width: 500px ) {

    #div-gif-inbound {
        border-radius: 10px;
        height: 200px;
    }

    #video-inbound {
        max-width: 90%;
        max-height: 95%;
    }

}

/********** AUTOMATISATION **********/

#div-automatisation {
    display: grid;
}

#div-texte-automatisation {
    grid-row: 2 / 4;
    background: #5271FF;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

#p-automatisation {
    font-weight: 500;
    text-align: justify;
    letter-spacing: 0.03em;
    color: #FFFFFF;
}

@media all and ( min-width: 1301px ) {

    #div-automatisation {
        height: 500px;
        grid-template-rows: 15% 50px auto;
        margin-top: 15%;
    }

    #div-texte-automatisation {
        padding: 6.5% 20% 0 20%;
    }

    #p-automatisation {
        line-height: 40px;
        font-size: 150%;
    }

}

@media all and ( min-width: 801px ) and ( max-width: 1300px ) {

    #div-automatisation {
        height: 450px;
        grid-template-rows: 15% 50px auto;
        margin-top: 15%;
    }

    #div-texte-automatisation {
        padding: 9.5% 10% 0 10%;
    }

    #p-automatisation {
        line-height: 35px;
        font-size: 130%;
    }

}

@media all and ( min-width: 501px ) and ( max-width: 800px ) {

    #div-automatisation {
        height: 550px;
        grid-template-rows: 15% 50px auto;
        margin-top: 15%;
    }

    #div-texte-automatisation {
        padding: 11% 10% 0 10%;
    }

    #p-automatisation {
        line-height: 35px;
        font-size: 130%;
    }

}

@media all and ( max-width: 500px ) {

    #div-automatisation {
        height: 450px;
        grid-template-rows: 15% 50px 70%;
        margin-top: 20%;
    }

    #div-texte-automatisation {
        padding: 15% 7% 15% 7%;
    }

    #p-automatisation {
        line-height: 22px;
    }

}

/********** CONTACT **********/

#div-question {
    display: grid;
    grid-template-columns: repeat(2, 50%);
}

#p-question {
    align-self: center;
    justify-self: center;
    font-weight: bold;
    text-align: justify;
    letter-spacing: 0.03em;
    color: #2E1572;
}

#input-question {
    font-weight: bold;
    background: linear-gradient(90.25deg, #546BFF 0.05%, #A6ACFF 99.95%);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    padding: 7%;
    text-align: center;
    align-self: center;
    justify-self: center;
    letter-spacing: 0.03em;
    color: #FFFFFF;
    border: none;
    cursor: pointer;

    transition: font-size 0.3s, padding 0.3s;
}

#input-question:hover {
    font-size: 190%;
    padding: 6.5%;
}

@media all and ( min-width: 1301px ) {

    #div-question {
        margin: 15% 30% 0 30%;
    }

    #p-question {
        font-size: 250%;
    }

    #input-question {
        font-size: 200%;
        border-radius: 20px;
    }

}

@media all and ( min-width: 801px ) and ( max-width: 1300px ) {

    #div-question {
        margin: 15% 15% 5% 15%;
    }

    #p-question {
        font-size: 225%;
    }

    #input-question {
        font-size: 175%;
        border-radius: 15px;
    }

}

@media all and ( min-width: 501px ) and ( max-width: 800px) {

    #div-question {
        margin: 15% 15% 10% 15%;
    }

    #p-question {
        font-size: 200%;
    }

    #input-question {
        font-size: 150%;
        border-radius: 15px;
    }

}

@media all and ( max-width: 500px ) {

    #div-question {
        margin: 30% 7% 30% 7%;
    }

    #p-question {
        font-size: 120%;
    }

    #input-question {
        font-size: 100%;
        border-radius: 10px;
    }

}

/* -------------- AGENCE -------------- */

/********** HEADER **********/

#div-blue-meeting {
    position: absolute;
    background: #2E1572;
    opacity: 0.4;
    z-index: 1;
    width: 100%;
    height: 100%;


}

.span-titre-agence {
    letter-spacing: 0.2em;
    justify-self: center;
    align-self: end;
    font-weight: bold;
}

.h1-sous-titre {
    justify-self: center;
    align-self: end;
}

#header-agence {
    position: relative;
    overflow: hidden;
    z-index: -1;
}

#video-meeting {
    position: absolute;
}

#div-meeting-content {
    position: relative;
    display: grid;
    z-index: 2;
}

#div-titre-agence {
    display: grid;
}

.h1-agence {
    color: #FFFFFF;
    align-self: end;
    justify-self: center;
    opacity: 0;

    transition: opacity 1s;
}

#span-its {
    color: #FFFFFF;
    justify-self: center;
    align-self: end;
    opacity: 0;

    transition: opacity 1s;
}

.span-titre-switch {
    color: #A8AEFF;
    opacity: 0;

    transition: opacity 1s;
}

#hr-titre-agence {
    background: #A8AEFF;
    justify-self: center;
    border: none;
    border-radius: 10px;
    opacity: 0;

    transition: opacity 1s;
}

#div-sous-titre {
    display: grid;
}

.animation1 {
    animation-name: animation1;
    animation-duration: 12s;
    animation-iteration-count: infinite;
}

.animation2 {
    animation-name: animation2;
    animation-duration: 12s;
    animation-iteration-count: infinite;
}

@keyframes animation1 {
    0% {
        opacity: 1;
    }
    16.5% {
        opacity: 1;
    }
    33% {
        opacity: 0;
    }
    88.5% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes animation2 {
    0% {
        opacity: 0;
    }
    33% {
        opacity: 0
    }
    49.5% {
        opacity: 1;
    }
    66% {
        opacity: 1;
    }
    88.5% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.span-sous-titre {
    letter-spacing: 0.2em;
    align-self: end;
    font-weight: bold;
    color: #A8AEFF;
    opacity: 0;

    transition: opacity 1s;
}

@media all and ( min-width: 1301px ) {

    #header-agence {
        height: 700px;
        margin-top: 65px;
    }

    #video-meeting {
        width: 100%;
    }

    #div-meeting-content {
        grid-template-rows: repeat(2, auto);
        margin: 1% 33% 0 28%;
    }

    #div-titre-agence {
        grid-template-columns: repeat(2, auto) 30%;
        padding: 5% 0 4% 0;
    }

    .h1-agence {
        font-size: 500%;
        margin: 7%;
    }

    #span-its {
        font-size: 400%;
        margin: 0 5% 12% 5%;
    }

    .span-titre-switch {
        font-size: 420%;
        margin-bottom: 10.5%;
    }

    #hr-titre-agence {
        width: 30%;
        height: 7px;
    }

    #div-sous-titre {
        grid-template-rows: repeat(4, auto);
        grid-template-columns: 25% auto 65%;
    }

    .span-sous-titre {
        margin: 0 0 1.5% 7%;
        font-size: 400%;
    }

}

@media all and ( min-width: 801px ) and ( max-width: 1300px ) {

    #header-agence {
        height: 650px;
        margin-top: 75px;
    }

    #video-meeting {
        height: 100%;
    }

    #div-meeting-content {
        grid-template-rows: repeat(2, auto);
        margin: 2% 20% 0 14%;
    }

    #div-titre-agence {
        grid-template-columns: repeat(2, auto) 30%;
        padding: 5% 0 5% 0;
    }

    .h1-agence {
        font-size: 450%;
        margin: 7%;
    }

    #span-its {
        font-size: 350%;
        margin: 0 5% 12% 5%;
    }

    .span-titre-switch {
        font-size: 370%;
        margin-bottom: 10.5%;
    }

    #hr-titre-agence {
        width: 50%;
        height: 6px;
    }

    #div-sous-titre {
        grid-template-rows: repeat(4, auto);
        grid-template-columns: 25% auto 65%;
    }

    .span-sous-titre {
        margin: 0 0 1.5% 7%;
        font-size: 350%;
    }

}

@media all and ( min-width: 501px ) and ( max-width: 800px ) {

    #header-agence {
        height: 600px;
        margin-top: 60px;
    }

    #video-meeting {
        left: -16%;
        height: 100%;
    }

    #div-meeting-content {
        grid-template-rows: repeat(2, auto);
        margin: 4% 12% 0 7%;
    }

    #div-titre-agence {
        grid-template-columns: repeat(2, auto) 30%;
        padding: 5% 0 5% 0;
    }

    .h1-agence {
        font-size: 400%;
        margin: 7%;
    }

    #span-its {
        font-size: 300%;
        margin: 0 5% 12% 5%;
    }

    .span-titre-switch {
        font-size: 320%;
        margin-bottom: 10.5%;
    }

    #hr-titre-agence {
        width: 40%;
        height: 5px;
    }

    #div-sous-titre {
        grid-template-rows: repeat(4, auto);
        grid-template-columns: 25% auto 65%;
    }

    .span-sous-titre {
        margin: 0 0 1.5% 7%;
        font-size: 300%;
    }

}

@media all and ( max-width: 500px ) {

    #header-agence {
        height: 400px;
        margin-top: 50px;
    }

    #video-meeting {
        left: -30%;
        height: 100%;
    }

    #div-meeting-content {
        grid-template-rows: 32% 60%;
        width: 100%;
        height: 100%;
    }

    #div-titre-agence {
        grid-template-columns: 40% 20% 40%;
        margin: 0 4% 5% 7%;
        align-self: end;
    }

    .h1-agence {
        font-size: 300%;
    }

    #span-its {
        font-size: 200%;
        margin-bottom: 6%;
        margin-left: 25%;
    }

    .span-titre-switch {
        font-size: 220%;
        margin-bottom: 2%;
    }

    #hr-titre-agence {
        width: 50%;
        height: 3px;
    }

    #div-sous-titre {
        grid-template-rows: repeat(4, 25%);
        grid-template-columns: 15% 10% 75%;
    }

    .span-sous-titre {
        margin: 0 0 1% 7%;
        letter-spacing: 0.2em;
        align-self: end;
        font-size: 200%;
        font-weight: bold;
        color: #A8AEFF;
    }

}

/********** BODY **********/

#presentation-service-1 {
    display: grid;
}

#video-travail {
    height: 100%;
}

#presentation-service-4 {
    display: grid;
}

#video-valeur {
    height: 100%;
    position: absolute;
}

#div-digital {
    overflow: hidden;
    grid-row: 1 / 3;
    grid-column: 1 / 4;
    position: relative;
    display: flex;
    align-items: center;
}

#video-digital {
    position: absolute;
    width: 100%;
}

#p-digital {
    font-weight: 500;
    color: #2E1572;
    z-index: 2;
    text-align: center;
}

#div-internet {
    grid-column: 1 / 3;
    grid-row: 2 / 6;
    overflow: hidden;
    z-index: 2;
    position: relative;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

#video-internet {
    height: 100%;
    position: absolute;
}

#div-texte-internet {
    grid-column: 2 / 4;
    overflow: hidden;
    z-index: 2;
    position: relative;
    background: linear-gradient(90deg, #5269FF 0%, #A8AEFF 100%);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

#p-internet {
    font-weight: 500;
    text-align: center;
    color: #FFFFFF;
}

#presentation-service-2 {
    display: grid;
}

#div-texte-reseaux {
    grid-row: 1 / 3;
    grid-column: 1 / 3;
    background: #FFFFFF;
    border: 2px solid #5271FF;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

#p-reseaux {
    font-weight: 500;
    text-align: center;
    color: #5271FF;
}

#div-gif-reseaux {
    grid-row: 2 / 4;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

#video-reseaux {
    position: absolute;
}

#presentation-service-3 {
    display: grid;
}

#div-gif-travail {
    grid-row: 1 / 3;
    grid-column: 1 / 3;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

#div-texte-travail {
    grid-row: 2 / 4;
    grid-column: 2 / 4;
    background: linear-gradient(270deg, #5269FF 0%, #A8AEFF 100%);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    z-index: 3;
    display: flex;
    align-items: center;
    position: relative;
}

#p-travail {
    font-weight: 500;
    text-align: center;
    color: #FFFFFF;
}

#div-revolution {
    grid-column: 1 / 4;
    grid-row: 1 / 3;
    position: relative;
    overflow: hidden;
    z-index: 1;
    display: flex;
    align-items: center;
}

#video-revolution {
    width: 100%;
    position: absolute;
}

#p-revolution {
    position: relative;
    font-weight: 500;
    text-align: center;
    color: #FFFFFF;
}

#div-gif-valeur {
    grid-column: 2 / 4;
    grid-row: 2 / 5;
    position: relative;
    overflow: hidden;
    align-self: end;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    z-index: 2;
    height: 100%;
}

#div-texte-valeur {
    background: #FFFFFF;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    grid-column: 1 / 3;
    grid-row: 4 / 6;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-self: end;
}

#p-valeur {
    font-weight: 500;
    text-align: center;
    color: #2E1572;
}

#presentation-service-5 {
    overflow: hidden;
    position: relative;
}

#video-adriz {
    position: absolute;
}

#div-texte-adriz {
    background: rgba(82, 113, 255, 0.4);
    position: relative;
}

#p-adriz {
    font-weight: 500;
    text-align: center;
    color: #FFFFFF;
}

#service-rejoindre {
    display: grid;
}

#p-rejoindre {
    color: #5269FF;
    font-weight: bold;
    text-align: center;
    align-self: center;
}

#hr-service-adriz {
    border-radius: 10px;
    background: #2E1572;
    justify-self: center;
    border: none;
}

#input-rejoindre {
    background: linear-gradient(270deg, #5269FF 0%, #A8AEFF 100%);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    font-weight: bold;
    letter-spacing: 0.03em;
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    align-self: center;

    transition: font-size 0.3s, padding 0.3s, margin 0.3s;
}

#input-rejoindre:hover {
    font-size: 195%;
    padding: 2.3%;
}

@media all and ( min-width: 1301px ) {

    #presentation-service-1 {
        grid-template-columns: 45% 10% 45%;
        grid-template-rows: 200px 30px 40px repeat(2, auto);
    }

    #div-digital {
        height: 230px;
    }

    #video-digital {
        top: 0;
    }

    #p-digital {
        font-size: 160%;
        line-height: 200%;
        margin: 0 30% 0 30%;
    }

    #div-internet {
        height: 380px;
        width: 60%;
        border-radius: 25px;
        justify-self: end;
    }

    #div-texte-internet {
        border-radius: 20px;
        padding: 5% 3% 5% 3%;
        width: 35%;
    }

    #p-internet {
        font-size: 160%;
        line-height: 200%;
    }

    #presentation-service-2 {
        margin-top: 10%;
        grid-template-rows: 300px 50px 250px;
        grid-template-columns: 45% 20% 35%;
    }

    #div-texte-reseaux {
        padding: 0 4% 0 4%;
        border-radius: 25px;
        display: flex;
        align-items: center;
        width: 64%;
        justify-self: end;
    }

    #p-reseaux {
        line-height: 200%;
        font-size: 160%;
    }

    #div-gif-reseaux {
        width: 65%;
        border-radius: 25px;
        grid-column: 2 / 4;
    }

    #video-reseaux {
        width: 100%;
    }

    #presentation-service-3 {
        margin-top: 10%;
        grid-template-columns: 40% 10% 50%;
        grid-template-rows: repeat(2, 150px) 200px;
    }

    #div-gif-travail {
        border-radius: 25px;
        width: 50%;
        justify-self: end;
    }

    #div-texte-travail {
        border-radius: 25px;
        padding: 0 7% 0 7%;
        width: 60%;
    }

    #p-travail {
        line-height: 200%;
        font-size: 160%;
    }

    #presentation-service-4 {
        grid-template-rows: 475px 125px 200px 50px 200px;
        grid-template-columns: 50% repeat(2, 25%);
        margin-top: 10%;
    }

    #video-revolution {
        top: -55%;
    }

    #p-revolution {
        line-height: 200%;
        font-size: 160%;
        margin: 0 30% 0 30%;
    }

    #div-gif-valeur {
        border-radius: 25px;
        width: 60%;
    }

    #video-valeur {
        right: -10%;
    }

    #div-texte-valeur {
        border-radius: 25px;
        padding: 0 5% 0 5%;
        width: 60%;
    }

    #p-valeur {
        line-height: 200%;
        font-size: 160%;
    }

    #presentation-service-5 {
        margin-top: 10%;
    }

    #video-adriz {
        width: 110%;
    }

    #div-texte-adriz {
        border-radius: 25px;
        margin: 3% 25% 3% 25%;
        padding: 5% 7% 5% 7%;
    }

    #p-adriz {
        line-height: 200%;
        font-size: 160%;
    }

    #service-rejoindre {
        margin-top: 10%;
        grid-template-rows: 250px auto 300px;
        padding: 0 5% 0 5%;
    }

    #p-rejoindre {
        font-size: 200%;
    }

    #hr-service-adriz {
        height: 7px;
        width: 10%;
    }

    #input-rejoindre {
        border-radius: 20px;
        font-size: 200%;
        padding: 2.5%;
        margin: 0 38% 0 38%;
    }

}

@media all and ( min-width: 801px ) and ( max-width: 1300px ) {

    #presentation-service-1 {
        grid-template-columns: 45% 10% 45%;
        grid-template-rows: 170px 30px 30px repeat(2, auto);
    }

    #div-digital {
        height: 200px;
    }

    #video-digital {
        top: 0;
    }

    #p-digital {
        font-size: 140%;
        line-height: 180%;
        margin: 0 15% 0 15%;
    }

    #div-internet {
        height: 328px;
        width: 75%;
        border-radius: 20px;
        justify-self: end;
    }

    #video-internet {
        left: -10%;
    }

    #div-texte-internet {
        border-radius: 20px;
        padding: 8% 3% 8% 3%;
        width: 60%;
    }

    #p-internet {
        font-size: 140%;
        line-height: 180%;
    }

    #presentation-service-2 {
        margin-top: 15%;
        grid-template-rows: 230px 30px 250px;
        grid-template-columns: repeat(2, 40%) 20%;
    }

    #div-texte-reseaux {
        padding: 0 5% 0 5%;
        border-radius: 20px;
        display: flex;
        align-items: center;
        width: 64%;
        justify-self: end;
    }

    #p-reseaux {
        line-height: 180%;
        font-size: 140%;
    }

    #div-gif-reseaux {
        width: 80%;
        border-radius: 20px;
        grid-column: 2 / 4;
    }

    #video-reseaux {
        height: 120%;
        right: -5%;
    }

    #presentation-service-3 {
        margin-top: 10%;
        grid-template-columns: 45% 10% 45%;
        grid-template-rows: 125px 150px 200px;
    }

    #div-gif-travail {
        border-radius: 20px;
        width: 75%;
        justify-self: end;
        max-height: 100%;
    }

    #div-texte-travail {
        border-radius: 20px;
        padding: 0 7% 0 7%;
        width: 70%;
    }

    #p-travail {
        line-height: 180%;
        font-size: 140%;
    }

    #presentation-service-4 {
        grid-template-rows: 400px 100px 200px 40px 200px;
        grid-template-columns: 40% 35% 25%;
        margin-top: 10%;
    }

    #video-revolution {
        top: -20%;
    }

    #p-revolution {
        line-height: 180%;
        font-size: 140%;
        margin: 0 15% 0 15%;
    }

    #div-gif-valeur {
        border-radius: 20px;
        width: 90%;
    }

    #video-valeur {
        right: -5%;
    }

    #div-texte-valeur {
        border-radius: 20px;
        padding: 0 10% 0 10%;
        width: 70%;
    }

    #p-valeur {
        line-height: 200%;
        font-size: 140%;
    }

    #presentation-service-5 {
        margin-top: 15%;
    }

    #video-adriz {
        width: 110%;
    }

    #div-texte-adriz {
        border-radius: 25px;
        margin: 7% 15% 7% 15%;
        padding: 7% 10% 7% 10%;
    }

    #p-adriz {
        line-height: 180%;
        font-size: 140%;
    }

    #service-rejoindre {
        margin-top: 10%;
        grid-template-rows: 200px auto 275px;
        padding: 0 5% 0 5%;
    }

    #p-rejoindre {
        font-size: 180%;
    }

    #hr-service-adriz {
        height: 5px;
        width: 15%;
    }

    #input-rejoindre {
        border-radius: 15px;
        font-size: 180%;
        padding: 4%;
        margin: 0 30% 0 30%;
    }

}

@media all and ( min-width: 501px ) and ( max-width: 800px ) {

    #presentation-service-1 {
        grid-template-columns: 45% 10% 45%;
        grid-template-rows: 130px 20px 30px repeat(2, auto);
    }

    #div-digital {
        height: 150px;
    }

    #video-digital {
        top: 0;
    }

    #p-digital {
        font-size: 120%;
        line-height: 180%;
        margin: 0 7% 0 7%;
    }

    #div-internet {
        height: 250px;
        width: 80%;
        border-radius: 20px;
        justify-self: end;
    }

    #video-internet {
        left: -15%;
    }

    #div-texte-internet {
        border-radius: 20px;
        padding: 8%;
        width: 60%;
    }

    #p-internet {
        font-size: 120%;
        line-height: 180%;
    }

    #presentation-service-2 {
        margin-top: 15%;
        grid-template-rows: 225px 20px 250px;
        grid-template-columns: repeat(2, 40%) 20%;
    }

    #div-texte-reseaux {
        padding: 0 5% 0 5%;
        border-radius: 20px;
        display: flex;
        align-items: center;
        width: 75%;
        justify-self: end;
    }

    #p-reseaux {
        line-height: 180%;
        font-size: 120%;
    }

    #div-gif-reseaux {
        width: 85%;
        border-radius: 20px;
        grid-column: 2 / 4;
    }

    #video-reseaux {
        height: 100%;
        right: -20%;
    }

    #presentation-service-3 {
        margin-top: 15%;
        grid-template-columns: 45% 10% 45%;
        grid-template-rows: 100px 50px 225px;
    }

    #div-gif-travail {
        border-radius: 20px;
        height: 250px;
        width: 80%;
        justify-self: end;
    }

    #div-texte-travail {
        border-radius: 20px;
        padding: 0 7% 0 7%;
        width: 75%;
    }

    #p-travail {
        line-height: 180%;
        font-size: 120%;
    }

    #presentation-service-4 {
        grid-template-rows: 325px 100px 150px 35px 150px;
        grid-template-columns: 40% 30% 30%;
        margin-top: 15%;
    }

    #video-revolution {
        top: -15%;
    }

    #p-revolution {
        line-height: 180%;
        font-size: 120%;
        margin: 0 15% 0 15%;
    }

    #div-gif-valeur {
        border-radius: 20px;
        width: 90%;
    }

    #video-valeur {
        right: -15%;
    }

    #div-texte-valeur {
        border-radius: 20px;
        padding: 0 10% 0 10%;
        width: 70%;
    }

    #p-valeur {
        line-height: 180%;
        font-size: 120%;
    }

    #presentation-service-5 {
        margin-top: 15%;
    }

    #video-adriz {
        width: 110%;
    }

    #div-texte-adriz {
        border-radius: 20px;
        margin: 7%;
        padding: 7%;
    }

    #p-adriz {
        line-height: 180%;
        font-size: 120%;
    }

    #service-rejoindre {
        margin-top: 15%;
        grid-template-rows: 150px auto 200px;
        padding: 0 5% 0 5%;
    }

    #p-rejoindre {
        font-size: 160%;
    }

    #hr-service-adriz {
        height: 5px;
        width: 20%;
    }

    #input-rejoindre {
        border-radius: 15px;
        font-size: 160%;
        padding: 4%;
        margin: 0 25% 0 25%;
    }

}

@media all and ( max-width: 500px ) {

    #presentation-service-1 {
        grid-template-columns: 45% 20% 35%;
        grid-template-rows: 130px 20px 30px repeat(2, auto);
    }

    #div-digital {
        height: 150px;
    }

    #video-digital {
        top: -10%;
    }

    #p-digital {
        font-size: 90%;
        line-height: 150%;
        margin: 0 7% 0 7%;
    }

    #div-internet {
        height: 200px;
        width: 90%;
        border-radius: 10px;
        justify-self: end;
    }

    #video-internet {
        left: -15%;
    }

    #div-texte-internet {
        border-radius: 10px;
        padding: 7%;
        width: 75%;
    }

    #p-internet {
        font-size: 90%;
        line-height: 150%;
    }

    #presentation-service-2 {
        margin-top: 15%;
        grid-template-rows: 200px 10px 150px;
        grid-template-columns: repeat(2, 40%) 20%;
    }

    #div-texte-reseaux {
        padding: 0 5% 0 5%;
        border-radius: 10px;
        display: flex;
        align-items: center;
        width: 75%;
        justify-self: end;
    }

    #p-reseaux {
        line-height: 150%;
        font-size: 90%;
    }

    #div-gif-reseaux {
        width: 90%;
        border-radius: 10px;
        grid-column: 2 / 4;
    }

    #video-reseaux {
        height: 100%;
        right: -20%;
    }

    #presentation-service-3 {
        margin-top: 15%;
        grid-template-columns: repeat(2, 30%) 40%;
        grid-template-rows: 100px 50px 150px;
    }

    #div-gif-travail {
        justify-self: end;
        border-radius: 10px;
        width: 80%;
    }

    #div-texte-travail {
        border-radius: 10px;
        padding: 0 7% 0 7%;
        width: 70%;
    }

    #p-travail {
        line-height: 150%;
        font-size: 90%;
    }

    #presentation-service-4 {
        grid-template-rows: 175px 50px 75px 20px 150px;
        grid-template-columns: 35% 35% 30%;
        margin-top: 15%;
    }

    #p-revolution {
        line-height: 150%;
        font-size: 90%;
        margin: 0 10% 0 10%;
    }

    #div-gif-valeur {
        border-radius: 10px;
        width: 85%;
    }

    #video-valeur {
        right: -10%;
    }

    #div-texte-valeur {
        border-radius: 10px;
        padding: 0 10% 0 10%;
        width: 70%;
    }

    #p-valeur {
        line-height: 150%;
        font-size: 90%;
    }

    #presentation-service-5 {
        margin-top: 15%;
    }

    #video-adriz {
        height: 110%;
    }

    #div-texte-adriz {
        border-radius: 10px;
        margin: 7%;
        padding: 7%;
    }

    #p-adriz {
        line-height: 150%;
        font-size: 90%;
    }

    #service-rejoindre {
        margin: 15% 0 15% 0;
        grid-template-rows: 100px auto 125px;
        padding: 0 5% 0 5%;
    }

    #p-rejoindre {
        font-size: 150%;
    }

    #hr-service-adriz {
        height: 4px;
        width: 20%;
    }

    #input-rejoindre {
        border-radius: 15px;
        font-size: 130%;
        padding: 5%;
        margin: 0 20% 0 20%;
    }

}

/* -------------- ÉQUIPE -------------- */

/********** CRÉATION **********/

#div-confiance {
    display: grid;
    grid-template-columns: 40% auto;
    z-index: 7;
    background: #2E1572;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    top: -2px;
    position: relative;
}

#div-img-confiance {
    position: relative;
    overflow: hidden;
}

#div-competence {
    background: #FFFFFF;
    border: 2px solid #5271FF;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    position: relative;
    top: -2px;
    left: -2px;
    z-index: 6;
    height: 100%;
    width: 101%;
    display: flex;
    align-items: center;
}

#equipe-container {
    display: grid;
    overflow-x: hidden;
    position: relative;
    grid-template-rows: repeat(10, auto);
}

#header-creation {
    position: relative;
    overflow: hidden;
    z-index: 10;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

#img-creation {
    position: absolute;
}

#h1-creation {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.03em;
    color: #2E1572;
    z-index: 20;
    opacity: 0;

    transition: opacity 1s;
}

#h2-creation {
    position: relative;
    background: rgba(46, 21, 114, 0.8);
    letter-spacing: 0.03em;
    color: #FFFFFF;
    z-index: 19;
    opacity: 0;

    transition: opacity 1s;
}

#div-rennes {
    display: grid;
    background: #5271FF;
    border: 2px solid #5271FF;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    z-index: 9;
}

#p-rennes {
    font-weight: 500;
    letter-spacing: 0.03em;
    text-align: center;
    align-self: center;
    color: #FFFFFF;
}

#div-img-rennes {
    position: relative;
}

#img-rennes {
    position: absolute;
    top: -2px;
}

#div-etudes {
    background: #FFFFFF;
    border: 2px solid #2E1572;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    position: relative;
    top: -2px;
    left: -2px;
    z-index: 8;
    height: 100%;
    width: 101%;
    display: grid;
    align-items: center;
}

#p-etudes {
    font-weight: 500;
    letter-spacing: 0.03em;
    text-align: justify;
    color: #2E1572;
}

#img-confiance {
    position: absolute;
}

#p-confiance {
    font-weight: 500;
    letter-spacing: 0.03em;
    text-align: center;
    align-self: center;
    color: #FFFFFF;
}

#p-competence {
    font-weight: 500;
    letter-spacing: 0.03em;
    text-align: center;
    color: #5271FF;
}

@media all and ( min-width: 1301px ) {

    #equipe-container {
        margin-top: 3%;
    }

    #header-creation {
        height: 700px
    }

    #img-creation {
        width: 100%;
    }

    #h1-creation {
        top: 37%;
        left: -6%;
        padding: 2% 5% 2% 41%;
        border-radius: 100px;
        font-size: 250%;
    }

    #h2-creation {
        top: 52%;
        left: 44%;
        padding: 1.5% 10% 1.5% 5%;
        border-radius: 80px;
        font-size: 230%;
    }

    #div-rennes {
        grid-template-columns: 74% auto;
        height: 370px;
    }

    #p-rennes {
        padding: 0 20% 0 20%;
        font-size: 160%;
        line-height: 45px;
    }

    #img-rennes {
        height: 100%;
    }

    #div-etudes {
        height: 300px;
    }

    #p-etudes {
        padding: 0 25% 0 25%;
        font-size: 160%;
        line-height: 45px;
    }

    #img-confiance {
        height: 140%;
        left: -40px;
    }

    #div-confiance {
        height: 250px;
    }

    #p-confiance {
        padding: 0 10% 0 10%;
        font-size: 150%;
        line-height: 45px;
    }

    #div-competence {
        height: 230px;
    }

    #p-competence {
        padding: 0 20% 0 20%;
        font-size: 150%;
        line-height: 45px;
    }

}

@media all and ( min-width: 801px ) and ( max-width: 1300px ) {

    #equipe-container {
        margin-top: 7%;
    }

    #header-creation {
        height: 500px;
    }

    #img-creation {
        width: 100%;
    }

    #h1-creation {
        top: 37%;
        left: -6%;
        padding: 3% 5% 3% 35%;
        border-radius: 50px;
        font-size: 220%;
    }

    #h2-creation {
        top: 55%;
        left: 44%;
        padding: 2% 10% 2% 5%;
        border-radius: 45px;
        font-size: 200%;
    }

    #div-rennes {
        grid-template-columns: 68% auto;
        height: 250px;
    }

    #p-rennes {
        padding: 0 15% 0 15%;
        font-size: 150%;
        line-height: 35px;
    }

    #img-rennes {
        height: 101%;
    }

    #div-etudes {
        height: 250px;
    }

    #p-etudes {
        padding: 0 10% 0 10%;
        font-size: 150%;
        line-height: 35px;
    }

    #img-confiance {
        height: 130%;
        left: -70px;
    }

    #div-confiance {
        height: 200px;
    }

    #p-confiance {
        padding: 0 5% 0 5%;
        font-size: 140%;
        line-height: 30px;
    }

    #div-competence {
        height: 180px;
    }

    #p-competence {
        padding: 0 10% 0 10%;
        font-size: 140%;
        line-height: 35px;
    }

}

@media all and ( min-width: 501px ) and ( max-width: 800px ) {

    #equipe-container {
        margin-top: 7%;
    }

    #header-creation {
        height: 400px;
    }

    #img-creation {
        width: 100%;
    }

    #h1-creation {
        top: 37%;
        left: -6%;
        padding: 3% 5% 3% 35%;
        border-radius: 50px;
        font-size: 200%;
    }

    #h2-creation {
        top: 56%;
        left: 46%;
        padding: 2% 10% 2% 5%;
        border-radius: 45px;
        font-size: 180%;
    }

    #div-rennes {
        grid-template-columns: 67% auto;
        height: 200px;
    }

    #p-rennes {
        padding: 0 15% 0 15%;
        font-size: 140%;
        line-height: 30px;
    }

    #img-rennes {
        height: 101%;
    }

    #div-etudes {
        height: 250px;
    }

    #p-etudes {
        padding: 0 7% 0 7%;
        font-size: 140%;
        line-height: 30px;
    }

    #img-confiance {
        height: 130%;
        left: -70px;
    }

    #div-confiance {
        height: 200px;
    }

    #p-confiance {
        padding: 0 5% 0 5%;
        font-size: 140%;
        line-height: 30px;
    }

    #div-competence {
        height: 200px;
    }

    #p-competence {
        padding: 0 10% 0 10%;
        font-size: 130%;
        line-height: 30px;
    }

}

@media all and ( max-width: 500px ) {

    #equipe-container {
        margin-top: 5%;
    }

    #header-creation {
        height: 350px;
    }

    #img-creation {
        height: 100%;
        bottom: -35px;
    }

    #h1-creation {
        top: 47%;
        left: -30px;
        padding: 10px 30px 10px 80px;
        border-radius: 30px;
        font-size: 150%;
    }

    #h2-creation {
        top: 60%;
        right: -170px;
        padding: 7px 80px 7px 40px;
        border-radius: 30px;
        font-size: 130%;
    }

    #div-rennes {
        grid-template-columns: 40% auto;
        height: 200px;
    }

    #p-rennes {
        padding: 0 5% 0 5%;
        font-size: 95%;
        line-height: 20px;
    }

    #img-rennes {
        height: 101%;
    }

    #div-etudes {
        height: 200px;
    }

    #p-etudes {
        padding: 0 5% 0 5%;
        font-size: 95%;
        line-height: 20px;
    }

    #img-confiance {
        height: 120%;
        left: -70px;
    }

    #div-confiance {
        height: 150px;
    }

    #p-confiance {
        padding: 0 5% 0 5%;
        font-size: 95%;
        line-height: 20px;
    }

    #div-competence {
        height: 130px;
    }

    #p-competence {
        padding: 0 5% 0 5%;
        font-size: 95%;
        line-height: 20px;
    }

}

/********** ÉQUIPE **********/

.a-linkedin {
    justify-self: center;
    align-self: end;
    position: relative;
    cursor: pointer;
}

.a-linkedin:hover img:first-child {
    opacity: 0;
}

#div-img-lucas {
    position: relative;
    overflow: hidden;
}

#div-img-julien {
    position: relative;
    overflow: hidden;
}

#header-presentation {
    position: relative;
    overflow: hidden;
    z-index: 5;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    top: -2px;
}

#img-presentation {
    left: -5%;
    position: absolute;
}

#h1-presentation {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.03em;
    color: #5271FF;
}

#h2-presentation {
    position: relative;
    background: rgba(46, 21, 114, 0.8);
    letter-spacing: 0.03em;
    color: #FFFFFF;
    text-align: end;
}

#div-lucas {
    display: grid;
    background: #FFFFFF;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    z-index: 4;
}

#presentation-lucas {
    display: grid;
    grid-template-rows: 25% 20% auto 20% 25%;
}

#h3-lucas {
    font-weight: bold;
    letter-spacing: 0.03em;
    color: #2E1572;
    align-self: end;
}

#h4-lucas {
    font-weight: 500;
    letter-spacing: 0.03em;
    color: #2E1572;
    align-self: center;
}

#h5-lucas {
    font-weight: 500;
    letter-spacing: 0.03em;
    color: #2E1572;
    align-self: center;
}

.linkedin-fonce {
    position: absolute;

    transition: opacity 0.3s;
}

.linkedin-claire {
    z-index: -1;
}

#img-lucas {
    position: absolute;
}

#div-julien {
    display: grid;
    background: #FFFFFF;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    z-index: 3;
}

#presentation-julien {
    display: grid;
    grid-template-rows: 25% 20% auto 20% 25%;
}

#h3-julien {
    font-weight: bold;
    letter-spacing: 0.03em;
    color: #2E1572;
    align-self: end;
}

#h4-julien {
    font-weight: 500;
    letter-spacing: 0.03em;
    color: #2E1572;
    align-self: center;
}

#h5-julien {
    font-weight: 500;
    letter-spacing: 0.03em;
    color: #2E1572;
    align-self: center;
}

#img-julien {
    width: 130%;
    position: absolute;
    left: -10%;
}

#video-equipe {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

#div-contacter {
    display: grid;
    grid-template-rows: 50% 50%;
}

#p-contact {
    color: #2E1572;
    font-weight: 500;
    align-self: center;
    text-align: center;
}

#button-contact {
    background: linear-gradient(180deg, #5271FF 0%, #A8AEFF 100%);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    border: none;
    color: #FFFFFF;
    font-weight: bold;
    align-self: center;
    cursor: pointer;

    transition: font-size 0.3s, padding 0.3s, margin 0.3s;
}

#button-contact:hover {
    font-size: 191%;
    padding: 1.8%;
}

@media all and ( min-width: 1301px ) {

    #header-presentation {
        height: 700px;
    }

    #img-presentation {
        width: 110%;
        top: -58%;
    }

    #h1-presentation {
        top: 36%;
        right: -9%;
        padding: 2% 41% 2% 5%;
        border-radius: 100px;
        font-size: 250%;
    }

    #h2-presentation {
        top: 52%;
        left: -40%;
        padding: 1.5% 5% 1.5% 10%;
        border-radius: 80px;
        font-size: 200%;
    }

    #div-lucas {
        grid-template-columns: auto 20%;
        height: 450px;
    }

    #presentation-lucas {
        padding: 5% 38% 5% 38%;
    }

    #h3-lucas {
        font-size: 200%;
        margin: 2% 0 2% 0;
    }

    #h4-lucas {
        font-size: 175%;
        margin: 2% 0 2% 0;
    }

    #h5-lucas {
        font-size: 165%;
        margin: 2% 0 2% 0;
    }

    .linkedin-fonce {
        height: 40px;
    }

    .linkedin-claire {
        height: 39px;
    }

    #img-lucas {
        width: 115%;
    }

    #div-julien {
        grid-template-columns: 20% auto;
        height: 450px;
    }

    #presentation-julien {
        padding: 5% 38% 5% 38%;
    }

    #h3-julien {
        font-size: 200%;
        margin: 2% 0 2% 0;
    }

    #h4-julien {
        font-size: 175%;
        margin: 2% 0 2% 0;
    }

    #h5-julien {
        font-size: 165%;
        margin: 2% 0 2% 0;
    }

    #div-gif-presentation {
        display: flex;
        justify-content: center;
    }

    #video-equipe {
        width: 70%;
    }

    #div-contacter {
        margin: 15% 0 5% 0;
        height: 500px;
    }

    #p-contact {
        font-size: 200%;
        margin: 0 32% 0 32%;
        line-height: 50px;
    }

    #button-contact {
        border-radius: 30px;
        font-size: 200%;
        padding: 2%;
        margin: 0 40% 0 40%;
    }

}

@media all and ( min-width: 801px ) and ( max-width: 1300px ) {

    #header-presentation {
        height: 500px;
    }

    #img-presentation {
        width: 110%;
        top: -30%;
    }

    #h1-presentation {
        top: 35%;
        right: -10%;
        padding: 3% 35% 3% 5%;
        border-radius: 50px;
        font-size: 220%;
    }

    #h2-presentation {
        top: 54%;
        left: -33%;
        padding: 2% 5% 2% 10%;
        border-radius: 45px;
        font-size: 200%;
    }

    #div-lucas {
        grid-template-columns: auto 29%;
        height: 350px;
    }

    #presentation-lucas {
        padding: 5% 30% 5% 30%;
    }

    #h3-lucas {
        font-size: 170%;
    }

    #h4-lucas {
        font-size: 150%;
    }

    #h5-lucas {
        font-size: 125%;
    }

    .linkedin-fonce {
        height: 35px;
    }

    .linkedin-claire {
        height: 34px;
    }

    #img-lucas {
        width: 115%;
    }

    #div-julien {
        grid-template-columns: 29% auto;
        height: 350px;
    }

    #presentation-julien {
        padding: 5% 30% 5% 30%;
    }

    #h3-julien {
        font-size: 170%;
    }

    #h4-julien {
        font-size: 150%;
    }

    #h5-julien {
        font-size: 125%;
    }

    #video-equipe {
        width: 100%;
    }

    #div-contacter {
        margin: 15% 0 15% 0;
        height: 350px;
    }

    #p-contact {
        font-size: 170%;
        margin: 0 20% 0 20%;
    }

    #button-contact {
        border-radius: 25px;
        font-size: 170%;
        padding: 3%;
        margin: 0 35% 0 35%;
    }

}

@media all and ( min-width: 501px ) and ( max-width: 800px ) {

    #header-presentation {
        height: 400px;
    }

    #img-presentation {
        width: 120%;
        top: -20%;
    }

    #h1-presentation {
        top: 35%;
        right: -10%;
        padding: 3% 35% 3% 5%;
        border-radius: 50px;
        font-size: 200%;
    }

    #h2-presentation {
        top: 54%;
        left: -33%;
        padding: 2% 5% 2% 10%;
        border-radius: 45px;
        font-size: 180%;
    }

    #div-lucas {
        grid-template-columns: auto 29%;
        height: 300px;
    }

    #presentation-lucas {
        padding: 7% 28% 7% 28%;
    }

    #h3-lucas {
        font-size: 150%;
    }

    #h4-lucas {
        font-size: 130%;
    }

    #h5-lucas {
        font-size: 115%;
    }

    .linkedin-fonce {
        height: 30px;
    }

    .linkedin-claire {
        height: 29px;
    }

    #img-lucas {
        width: 115%;
    }

    #div-julien {
        grid-template-columns: 29% auto;
        height: 300px;
    }

    #presentation-julien {
        padding: 7% 28% 7% 28%;
    }

    #h3-julien {
        font-size: 150%;
    }

    #h4-julien {
        font-size: 130%;
    }

    #h5-julien {
        font-size: 115%;
    }

    #video-equipe {
        width: 100%;
    }

    #div-contacter {
        margin: 15% 0 15% 0;
        height: 350px;
    }

    #p-contact {
        font-size: 150%;
        margin: 0 15% 0 15%;
    }

    #button-contact {
        border-radius: 20px;
        font-size: 150%;
        padding: 4%;
        margin: 0 33% 0 33%;
    }

}

@media all and ( max-width: 500px ) {

    #header-presentation {
        height: 250px;
    }

    #img-presentation {
        height: 120%;
        top: -10%;
    }

    #h1-presentation {
        top: 36%;
        right: -30px;
        padding: 10px 80px 10px 25px;
        border-radius: 30px;
        font-size: 150%;
    }

    #h2-presentation {
        top: 53%;
        left: -100px;
        padding: 10px 30px 10px 60px;
        border-radius: 30px;
        font-size: 130%;
    }

    #div-lucas {
        grid-template-columns: auto 40%;
        height: 180px;
    }

    #presentation-lucas {
        padding: 8%;
    }

    #h3-lucas {
        font-size: 120%;
        line-height: 21px;
    }

    #h4-lucas {
        font-size: 100%;
        line-height: 21px;
    }

    #h5-lucas {
        font-size: 85%;
        line-height: 21px;
    }

    .linkedin-fonce {
        height: 20px;
    }

    .linkedin-claire {
        height: 19px;
    }

    #img-lucas {
        width: 100%;
    }

    #div-julien {
        grid-template-columns: 40% auto;
        height: 180px;
    }

    #presentation-julien {
        padding: 8%;
    }

    #h3-julien {
        font-size: 120%;
        line-height: 21px;
    }

    #h4-julien {
        font-size: 100%;
        line-height: 21px;
    }

    #h5-julien {
        font-size: 85%;
        line-height: 21px;
    }

    #video-equipe {
        width: 100%;
    }

    #div-contacter {
        margin: 20% 0 20% 0;
        height: 250px;
    }

    #p-contact {
        font-size: 120%;
        margin: 0 7% 0 7%;
    }

    #button-contact {
        border-radius: 10px;
        font-size: 120%;
        padding: 5%;
        margin: 0 25% 0 25%;
    }

}

/* -------------- CONTACT -------------- */

.color-header {
    background: #5271FF !important;
    filter: blur(0) !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

#gradient-header-contact {
    background: linear-gradient(180deg, #5271FF 0%, #A8AEFF 100%);
    filter: blur(10px);
    -webkit-filter: blur(10px);
    position: absolute;
    width: 120%;
    height: 120%;
    z-index: -3;
    top: -20%;
    left: -10%;
}

.div-contact {
    display: grid;
    grid-template-rows: 35% 40% 25%;
}

#div-contact-message {
    display: grid;
    grid-template-rows: 15% 70% 15%;
}

#text-message {
    height: 100%;
}

#error-formulaire-contact {
    font-size: 85%;
    color: red;
    justify-self: center;
    text-align: center;
    margin-top: 3%;
    opacity: 0;
    position: absolute;

    transition: opacity 0.5s;
}

#validation-formulaire-contact {
    font-size: 80%;
    color: #5269FF;
    align-self: center;
    text-align: center;
    opacity: 0;
    position: relative;

    transition: opacity 0.5s;
}

#h1-contact {
    line-height: 150%;
    color: #2E1572;
    text-align: center;
}

#form-contact {
    display: grid;
    grid-template-rows: repeat(3, 17%) auto 10% 5%;
    position: relative;
}

.label-form-contact {
    font-weight: bold;
    color: #2E1572;
    align-self: end;
}

.input-form-contact {
    background: #FFFFFF;
    border: 2px solid #5269FF;
    box-sizing: border-box;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    padding: 3%;

    transition: border 0.3s;
}

.input-form-contact:hover {
    border: 2px solid #2E1572;
}

#input-form-submit {
    font-weight: bold;
    background: #5269FF;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    text-align: center;
    align-self: center;
    -webkit-appearance: none;
}

#input-form-submit:hover {
    background: #2E1572;

    transition: background 0.3s;
}

@media all and ( min-width: 1301px ) {

    #h1-contact {
        font-size: 300%;
        margin: 15% 0 7% 0;
    }

    #form-contact {
        margin: 0 25% 0 25%;
        height: 1200px;
    }

    .label-form-contact {
        font-size: 220%;
        margin-bottom: 2%;
    }

    .input-form-contact {
        border-radius: 20px;
        font-size: 120%;
    }

    #input-form-submit {
        border-radius: 20px;
        padding: 3%;
        margin: 0 35% 0 35%;
        font-size: 220%;
    }

}

@media all and ( min-width: 801px ) and ( max-width: 1300px ) {

    #h1-contact {
        font-size: 280%;
        margin: 25% 0 10% 0;
    }

    #form-contact {
        margin: 0 15% 0 15%;
        height: 1000px;
    }

    .label-form-contact {
        font-size: 200%;
        margin-bottom: 2%;
    }

    .input-form-contact {
        border-radius: 15px;
        font-size: 100%;
    }

    #input-form-submit {
        border-radius: 20px;
        padding: 3%;
        margin: 0 33% 0 33%;
        font-size: 200%;
    }

}

@media all and ( min-width: 501px ) and ( max-width: 800px ) {

    #h1-contact {
        font-size: 250%;
        margin: 30% 0 10% 0;
    }

    #form-contact {
        margin: 0 10% 0 10%;
        height: 900px;
    }

    .label-form-contact {
        font-size: 170%;
        margin-bottom: 2%;
    }

    .input-form-contact {
        border-radius: 15px;
        font-size: 100%;
    }

    #input-form-submit {
        border-radius: 20px;
        padding: 4%;
        margin: 0 30% 0 30%;
        font-size: 170%;
    }

}

@media all and ( max-width: 500px ) {

    #h1-contact {
        font-size: 200%;
        margin: 40% 0 10% 0;
    }

    #form-contact {
        margin: 0 10% 10% 10%;
        height: 700px;
    }

    .label-form-contact {
        font-size: 120%;
        margin-bottom: 3%;
    }

    .input-form-contact {
        border-radius: 10px;
        font-size: 80%;
    }

    #input-form-submit {
        border-radius: 10px;
        padding: 5%;
        margin: 0 20% 0 20%;
        font-size: 120%;
    }

}

/********** NOUS REJOINDRE **********/

#div-contact-a-venir {
    display: grid;
    grid-template-rows: repeat(2, 50%);
    margin-top: 15%;
}

#div-a-venir {
    display: grid;
    grid-template-rows: repeat(4, auto);
}

#h1-a-venir {
    color: #2E1572;
    text-align: center;
    align-self: center;
    letter-spacing: 0.03em;
}

#p-a-venir {
    color: #2E1572;
    font-weight: bold;
    text-align: justify;
    align-self: center;
    letter-spacing: 0.03em;
}

#label-newsletter-a-venir {
    grid-column: 1 / 3;
    align-self: center;
    text-align: justify;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: #2E1572;
}

#input-email-newsletter-a-venir {
    background: #FFFFFF;
    border: 2px solid #5269FF;
    box-sizing: border-box;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    padding: 3%;

    transition: border 0.5s;
}

#input-send-newsletter-a-venir {
    font-weight: bold;
    background: #5269FF;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    padding: 3%;
    border: none;
    cursor: pointer;
    -webkit-appearance: none;

    transition: background 0.5s;
}

#label-contact-a-venir {
    align-self: center;
    text-align: justify;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: #2E1572;
}

#input-contact-a-venir {
    background: transparent;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    color: #2E1572;
    font-weight: bold;
    align-self: center;
    text-align: center;
    cursor: pointer;
    justify-self: center;

    transition: background 0.3s;
}

#input-contact-a-venir:hover {
    background: #c5cfff;
}

#validation-newsletter-a-venir {
    color: #5269FF;
    grid-column: 1 / 3;
    margin: 5%;
    justify-self: center;
    align-self: center;
    opacity: 0;

    transition: opacity 0.5s;
}

#form-newsletter-a-venir {
    display: grid;
    grid-template-columns: 70% 30%;
}

#input-email-newsletter-a-venir:hover {
    border: 2px solid #2E1572;
}

#input-send-newsletter-a-venir:hover {
    background: #2E1572;
}

@media all and ( min-width: 1301px ) {

    #div-a-venir {
        padding: 0 25% 0 25%;
        height: 1500px;
    }

    #h1-a-venir {
        margin-top: 20%;
        font-size: 340%;
    }

    #p-a-venir {
        margin-top: 20%;
        font-size: 190%;
        line-height: 55px;
    }

    #label-newsletter-a-venir {
        font-size: 185%;
        line-height: 50px;
    }

    #input-email-newsletter-a-venir {
        border-radius: 20px;
        margin: 2% 5% 2% 0;
        font-size: 110%;

        transition: border 0.3s;
    }

    #input-send-newsletter-a-venir {
        border-radius: 20px;
        margin: 4% 0 4% 5%;
        font-size: 190%;
    }

    #label-contact-a-venir {
        font-size: 185%;
        line-height: 50px;
    }

    #input-contact-a-venir {
        border-radius: 30px;
        border: #2E1572 solid 4px;
        font-size: 190%;
        padding: 3% 7% 3% 7%;
        width: 30%;
    }

    #validation-newsletter-a-venir {
        font-size: 100%;
    }

    #form-newsletter-a-venir {
        margin-top: 20%;
        grid-template-rows: 125px 100px 20px;
    }

}

@media all and ( min-width: 801px ) and ( max-width: 1300px ) {

    #div-a-venir {
        padding: 7% 15% 7% 15%;
        height: 1300px;
    }

    #h1-a-venir {
        margin-top: 20%;
        font-size: 320%;
    }

    #p-a-venir {
        margin-top: 20%;
        font-size: 170%;
        line-height: 50px;
    }

    #label-newsletter-a-venir {
        font-size: 165%;
        line-height: 45px;
    }

    #input-email-newsletter-a-venir {
        border-radius: 15px;
        margin: 2% 5% 2% 0;
        font-size: 100%;
    }

    #input-send-newsletter-a-venir {
        border-radius: 15px;
        margin: 4% 0 4% 5%;
        font-size: 170%;
    }

    #label-contact-a-venir {
        font-size: 165%;
        line-height: 45px;
    }

    #input-contact-a-venir {
        border-radius: 25px;
        border: #2E1572 solid 4px;
        font-size: 190%;
        padding: 4% 10% 4% 10%;
        width: 40%;
    }

    #validation-newsletter-a-venir {
        font-size: 100%;
    }

    #form-newsletter-a-venir {
        margin-top: 20%;
        grid-template-rows: 125px 80px 20px;
    }

}

@media all and ( min-width: 501px ) and ( max-width: 800px ) {

    #div-a-venir {
        padding: 7%;
        height: 1200px;
    }

    #h1-a-venir {
        margin-top: 15%;
        font-size: 300%;
    }

    #p-a-venir {
        margin-top: 15%;
        font-size: 150%;
        line-height: 45px;
    }

    #label-newsletter-a-venir {
        font-size: 145%;
        line-height: 40px;
    }

    #input-email-newsletter-a-venir {
        border-radius: 15px;
        margin: 2% 5% 2% 0;
        font-size: 100%;
    }

    #input-send-newsletter-a-venir {
        border-radius: 15px;
        margin: 4% 0 4% 5%;
        font-size: 150%;
    }

    #label-contact-a-venir {
        font-size: 145%;
        line-height: 40px;
    }

    #input-contact-a-venir {
        border-radius: 20px;
        border: #2E1572 solid 4px;
        font-size: 170%;
        padding: 4% 10% 4% 10%;
        width: 40%;
    }

    #validation-newsletter-a-venir {
        font-size: 100%;
    }

    #form-newsletter-a-venir {
        margin-top: 15%;
        grid-template-rows: 125px 80px 20px;
    }

}

@media all and ( max-width: 500px ) {

    #div-a-venir {
        margin-top: 15%;
        padding: 7%;
        height: 800px;
    }

    #h1-a-venir {
        margin-top: 15%;
        font-size: 250%;
    }

    #p-a-venir {
        margin-top: 15%;
        font-size: 100%;
        line-height: 30px;
    }

    #label-newsletter-a-venir {
        font-size: 95%;
        line-height: 130%;
    }

    #input-email-newsletter-a-venir {
        border-radius: 10px;
        margin: 5% 5% 5% 0;
    }

    #input-send-newsletter-a-venir {
        border-radius: 10px;
        margin: 10% 0 10% 5%;
        font-size: 100%;
    }

    #label-contact-a-venir {
        font-size: 95%;
        line-height: 130%;
    }

    #input-contact-a-venir {
        border-radius: 10px;
        border: #2E1572 solid 3px;
        font-size: 120%;
        padding: 5% 10% 5% 10%;
        width: 50%;
    }

    #validation-newsletter-a-venir {
        font-size: 80%;
    }

    #form-newsletter-a-venir {
        margin-top: 15%;
        grid-template-rows: 100px 60px 20px;
    }

}

/********** MENTIONS LÉGALES **********/

#h1-mentions {
    color: #2E1572;
    text-align: center;
}

#div-container-mention {
    background: #e1e6fd;
    border-radius: 40px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.h2-mention {
    line-height: 150%;
    margin-left: 2%;
    color: #2E1572;
}

.p-mention {
    line-height: 150%;
    text-align: justify;
}

.li-mention {
    margin-left: 10%;
}

.p-presentation-mention {
    color: #2E1572;
}

.a-mention {
    text-decoration: none;

    transition: color 0.5s;
}

.a-mention:hover {
    color: #2E1572;
}

#a-mention-mail {
    font-style: italic;
}

@media all and ( min-width: 1301px) {

    #h1-mentions {
        margin-top: 15%;
        font-size: 300%;
    }

    .p-presentation-mention {
        margin: 5% 25% 0 25%;
    }

    #div-container-mention {
        margin: 10% 20% 0 20%;
        padding: 5%;
    }

    .h2-mention {
        font-size: 200%;
    }

    .p-mention {
        font-size: 120%;
    }

    .li-mention {
        font-size: 120%;
    }

    .p-article-mention {
        margin-top: 3%;
    }

    .h2-margin {
        margin-top: 10%;
    }

}

@media all and ( min-width: 501px ) and ( max-width: 1300px ) {

    #h1-mentions {
        margin-top: 25%;
        font-size: 250%;
    }

    .p-presentation-mention {
        margin: 10% 5% 0 5%;
    }

    #div-container-mention {
        margin: 10% 5% 0 5%;
        padding: 10% 5% 10% 5%;
        border-radius: 35px;
    }

    .h2-mention {
        font-size: 150%;
    }

    .p-mention {
        font-size: 100%;
    }

    .li-mention {
        font-size: 100%;
    }

    .p-article-mention {
        margin-top: 5%;
    }

    .h2-margin {
        margin-top: 10%;
    }

}

@media all and ( max-width: 500px) {

    #h1-mentions {
        margin-top: 40%;
        font-size: 180%;
    }

    .p-presentation-mention {
        margin: 15% 5% 0 5%;
    }

    #div-container-mention {
        margin: 10% 5% 0 5%;
        padding: 15% 5% 15% 5%;
        border-radius: 25px;
    }

    .h2-mention {
        font-size: 120%;
    }

    .p-mention {
        font-size: 90%;
    }

    .li-mention {
        font-size: 90%;
    }

    .p-article-mention {
        margin-top: 8%;
    }

    .h2-margin {
        margin-top: 15%;
    }

}

/********** FOOTER **********/

#div-footer {
    display: grid;
    grid-template-rows: repeat(3, auto);
    padding-top: 25%;
}

#div-suivre {
    display: grid;
    grid-template-rows: repeat(3, auto);
}

.img-reseaux {
    align-self: center;
    justify-self: center;
}

.img-reseaux-youtube {
    margin: 1% 0 0 10%;
    width: 35%;
    position: absolute;
}

.img-reseaux-facebook {
    width: 28%;
    position: absolute;
}

.img-reseaux-linkedin {
    width: 55%;
    position: absolute;
}

.img-reseaux-twitter {
    width: 65%;
    position: absolute;
}

.img-reseaux-instagram {
    width: 70%;
    position: absolute;
}

#div-nav-site {
    display: grid;
    grid-template-rows: repeat(3, auto);
}

.nav-site-gauche {
    margin-left: 35% !important;
    cursor: pointer;

    transition: all 0.3s;
}

.nav-site-gauche:hover {
    color: #2E1572;
}

#footer-rejoindre {
    transition: all 0.3s;
    cursor: pointer;
}

#footer-rejoindre:hover {
    color: #2E1572;
}

.nav-site-droite {
    margin-left: 20% !important;
}

.a-sous-site::before {
    content: '●';
    color: #FFF;
    margin-right: 5%;

    transition: all 0.3s;
}

#footer-services {
    grid-row: 2 / 4;
}

#hr-footer {
    width: 100%;
    height: 1px;
    background-color: #FFFFFF;
    border: none;
}

#div-copyrigth {
    display: grid;
    grid-template-columns: repeat(3, 33%);
    margin: 0 7% 0 7%;
    position: relative;
}

#gradient-footer {
    background: linear-gradient(360deg, #5271FF 45.3%, #E4F4FE 100%);
    filter: blur(20px);
    -webkit-filter: blur(20px);
    position: absolute;
    width: 120%;
    z-index: -3;
    left: -10%;
    bottom: -10%;
    margin-top: 15%;
}

#h3-footer {
    font-weight: bold;
    align-self: end;
    justify-self: center;
    letter-spacing: 0.03em;
    color: #2E1572;
    margin: 0 7% 0 7%;
}

#hr-suivre {
    background: #2E1572;
    border: none;
    border-radius: 10px;
    align-self: center;
    justify-self: center;
}

#nav-reseaux-sociaux {
    display: grid;
    grid-template-columns: repeat(5, 20%);
}

.a-reseaux {
    align-self: center;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    position: relative;

    transition: border 0.3s;
}

.a-reseaux:hover {
    border: 4px solid #2E1572;
}

.img-reseaux-white {
    transition: opacity 0.3s;
}

.a-reseaux:hover img:first-child {
    opacity: 0;
}

.img-reseaux-blue {
    z-index: -1;
}

#h3-nav-site {
    font-weight: bold;
    align-self: end;
    justify-self: center;
    letter-spacing: 0.03em;
    color: #2E1572;
}

#hr-nav-site {
    background: #2E1572;
    border: none;
    border-radius: 10px;
    align-self: center;
    justify-self: center;
}

#nav-site {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-template-rows: 30% 15% 15% 30%;
}

.a-site {
    font-weight: bold;
    text-decoration: none;
    align-self: center;
    letter-spacing: 0.03em;
    color: #FFFFFF;
    margin: 7% 0 7% 0;
}

.a-sous-site {
    font-weight: bold;
    text-decoration: none;
    align-self: center;
    letter-spacing: 0.03em;
    color: #FFF;
    margin: 10% 0 10% 35%;
    cursor: pointer;

    transition: all 0.3s;
}

.a-sous-site:hover {
    color: #2E1572;
}

.a-sous-site:hover::before {
    color: #2E1572;
}

#p-copyright {
    justify-self: start;
    align-self: center;
    letter-spacing: 0.03em;
    color: #FFFFFF;
    position: relative;
    width: 100%;
}

#a-mentions {
    position: relative;
    align-self: center;
    letter-spacing: 0.03em;
    color: #FFFFFF;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
    display: flex;
    justify-content: center;

    transition: color 0.3s;
}

#a-mentions:hover {
    color: #2E1572;
}

#adriz-footer {
    align-self: center;
    justify-self: end;
    cursor: pointer;
}

@media all and ( min-width: 1301px) {

    #gradient-footer {
        height: 90%;
    }

    #h3-footer {
        font-size: 150%;
    }

    #hr-suivre {
        height: 4px;
        width: 5%;
        margin-top: 2%;
    }

    #nav-reseaux-sociaux {
        margin: 4% 35% 0 35%;
    }

    .a-reseaux {
        border: 4px solid #FFF;
        width: 40px;
        height: 40px;
        border-radius: 15px;
    }

    .img-reseaux-white {
        z-index: 0;
    }

    #h3-nav-site {
        font-size: 150%;
        margin: 6% 7% 0 7%;
    }

    #hr-nav-site {
        height: 4px;
        width: 5%;
        margin-top: 2%;
    }

    #nav-site {
        margin: 4% 20% 2% 25%;
    }

    .a-site {
        font-size: 120%;
    }

    .a-sous-site {
        font-size: 100%;
    }

    #p-copyright {
        font-size: 80%;
    }

    #a-mentions {
        font-size: 80%;
    }

    #adriz-footer {
        width: 15%;
        margin: 2% 0 2% 0;
    }

}

@media all and ( min-width: 801px) and ( max-width: 1300px ) {

    #gradient-footer {
        height: 100%;
    }

    #h3-footer {
        font-size: 150%;
    }

    #hr-suivre {
        height: 4px;
        width: 5%;
        margin-top: 3%;
    }

    #nav-reseaux-sociaux {
        margin: 5% 30% 0 30%;
    }

    .a-reseaux {
        border: 4px solid #FFF;
        width: 40px;
        height: 40px;
        border-radius: 15px;
    }

    #h3-nav-site {
        font-size: 150%;
        margin: 10% 7% 0 7%;
    }

    #hr-nav-site {
        height: 4px;
        width: 5%;
        margin-top: 3%;
    }

    #nav-site {
        margin: 7% 5% 5% 5%;
    }

    .a-site {
        font-size: 100%;
    }

    .a-sous-site {
        font-size: 85%;
    }

    #p-copyright {
        font-size: 80%;
    }

    #a-mentions {
        font-size: 80%;
    }

    #adriz-footer {
        width: 25%;
        margin: 5% 0 5% 0;
    }

}

@media all and ( min-width: 501px) and ( max-width: 800px ) {

    #gradient-footer {
        height: 100%;
    }

    #h3-footer {
        font-size: 150%;
    }

    #hr-suivre {
        height: 4px;
        width: 13%;
        margin-top: 5%;
    }

    #nav-reseaux-sociaux {
        margin: 7% 20% 0 20%;
    }

    .a-reseaux {
        border: 4px solid #FFF;
        width: 40px;
        height: 40px;
        border-radius: 15px;
    }

    #h3-nav-site {
        font-size: 150%;
        margin: 10% 7% 0 7%;
    }

    #hr-nav-site {
        height: 4px;
        width: 13%;
        margin-top: 5%;
    }

    #nav-site {
        margin: 7% 5% 5% 5%;
    }

    .a-site {
        font-size: 100%;
    }

    .a-sous-site {
        font-size: 85%;
    }

    #p-copyright {
        font-size: 80%;
    }

    #a-mentions {
        font-size: 80%;
    }

    #adriz-footer {
        width: 30%;
        margin: 5% 0 5% 0;
    }

}

@media all and ( max-width: 500px) {

    #gradient-footer {
        height: 100%;
    }

    #h3-footer {
        font-size: 120%;
    }

    #hr-suivre {
        height: 3px;
        width: 13%;
        margin-top: 5%;
    }

    #nav-reseaux-sociaux {
        margin: 12% 15% 0 15%;
    }

    .a-reseaux {
        border: 3px solid #FFFFFF;
        width: 25px;
        height: 25px;
        border-radius: 8px;
    }

    #h3-nav-site {
        font-size: 120%;
        margin: 10% 7% 0 7%;
    }

    #hr-nav-site {
        height: 3px;
        width: 13%;
        margin-top: 5%;
    }

    #nav-site {
        margin: 10% 5% 5% 5%;
    }

    .a-site {
        font-size: 85%;
    }

    .a-sous-site {
        font-size: 70%;
    }

    #p-copyright {
        font-size: 60%;
    }

    #a-mentions {
        font-size: 60%;
    }

    #adriz-footer {
        width: 40%;
        margin: 5% 0 5% 0;
    }

}