@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Pacifico&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

html,body{
    margin: 0;
    padding: 0;
    background-color: var(--primary-color);
    overflow-x: hidden;

}

/*body{*/
/*    padding-top: 150px*/
/*}*/

main{
    display: flex;
    flex-direction: column;
}


:root{

    /* Colors */
    --white-color: #ffffff;
    --black-color: #000000;
    --primary-color: #072638;
    --secondary-color: #efb963;
    --medium-gray-color: #707070;

    /* Font Size */
    --font-size-xxxs: 12px;
    --font-size-xxs: 14px;
    --font-size-xs: 16px;
    --font-size-s: 18px;
    --font-size-m: 20px;
    --font-size-l: 36px;
    --font-size-xl: 40px;
    --font-size-xxl: 48px;
    --font-size-xxxl: 60px;
    --font-size-huge: 70px;



    /* Font weight */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* Border radius */
    --border-radius-s: 10px;
    --border-radius-m: 15px;
    --border-radius-l: 20px;
    --border-radius-xl: 25px;

}

/*body{*/
/*    min-height: 100vh;*/
/*    background: url('laptop.jpg');*/
/*    background-size: cover;*/
/*    background-repeat: no-repeat;*/
/*    background-position: center;*/
/*    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
/*}*/

/* Nav - Bar */

svg.x path{
    fill: var(--white-color)
}

nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: var(--primary-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);

}

@media screen and (min-width: 1621px) and (max-width: 4000px){
    nav.navbar{
        padding: 25px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1621px){
    nav.navbar{
        padding: 15px;
    }
}

@media screen and (min-width: 425px) and (max-width: 768px){
    nav.navbar{
        padding: 10px;
    }
}

@media screen and (min-width: 300px) and (max-width: 425px){
    nav.navbar{
        padding: 5px;
    }
}

.nav-container {
    display: flex;
    width: 100%;
    padding: 0 10%;

}

nav ul.no-sidebar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 53px;
    list-style: none;
}

@media screen and (min-width:1024px ) and (max-width: 4000px) {
    nav ul.no-sidebar{
        gap: 50px;
    }
}

@media screen and (min-width:768px ) and (max-width: 1024px) {
    nav ul.no-sidebar{
        gap: 25px;
    }
}


nav a{
    height: 100%;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: roboto mono, sans-serif;
}

@media screen and (min-width:1900px) and (max-width: 4000px) {
    nav a{
        font-size: 16px;
    }
}

@media screen and (min-width:1621px) and (max-width: 1900px) {
    nav a{
        font-size: var(--font-size-s);
    }
}

@media screen and (min-width:300px) and (max-width: 1621px) {
    nav a{
        font-size: var(--font-size-xxs);
    }
}

nav a.active{
    color:var(--secondary-color);
}

nav a.no-active{
    color:var(--white-color);
}

nav a.no-active:hover{
    color:var(--secondary-color);
    transition: ease-in-out 0.2s;
}




a.sidebar-link.accueil{
    opacity: 0;
    transform: translateY(-50px);
    animation: slideUpAccueil 1s ease-out forwards;
    animation-delay: 0.5s;
}

@keyframes slideUpAccueil {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



a.sidebar-link.a_propos{
    opacity: 0;
    transform: translateY(-50px);
    animation: slideUpA_propos 1s ease-out forwards;
    animation-delay: 0.7s;
}

@keyframes slideUpA_propos {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


a.sidebar-link.realisation{
    opacity: 0;
    transform: translateY(-50px);
    animation: slideUpRealisation 1s ease-out forwards;
    animation-delay: 0.9s;
}

@keyframes slideUpRealisation{
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

a.sidebar-link.contact{
    opacity: 0;
    transform: translateY(-50px);
    animation: slideUpContact 1s ease-out forwards;
    animation-delay: 0.9s;
}

@keyframes slideUpContact{
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



.close-sidebar{
    background: none;
    border: none;
    outline: none;
}

button.close-sidebar{
    margin: 15px 0 20px 15px;

}

nav li:first-child{
    margin-right: auto;
}

img.logoMQ{
    font-family: pacifico, sans-serif;
    color: var(--white-color);
    opacity: 0;
    transform: translateX(-100px);
    animation: slideDown 1s ease-out forwards;
}

@keyframes slideDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (min-width:1900px ) and (max-width: 4000px) {
    img.logoMQ{
        width: 100px;
        height: auto;
        border-radius: 50%;
    }
}

@media screen and (min-width:1621px ) and (max-width: 1900px) {
    img.logoMQ{
        width: 100px;
        height: auto;
        border-radius: 50%;
    }
}

@media screen and (min-width:1024px ) and (max-width: 1621px) {
    img.logoMQ{
        width: 75px;
        height: auto;
        border-radius: 100%;
    }
}

@media screen and (min-width:768px ) and (max-width: 1024px) {
    img.logoMQ{
        width: 75px;
        height: auto;
        border-radius: 100%;
    }
}

@media screen and (min-width:425px) and (max-width: 768px) {
    img.logoMQ{
        width: 60px;
        height: auto;
        border-radius: 100%;
    }
}

@media screen and (min-width:300px) and (max-width: 425px) {
    img.logoMQ{
        width: 55px;
        height:auto;
        border-radius: 100%;
    }
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 50;
}

.hidden {
    display: none;
}

.sidebar{
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 250px;
    background-color: var(--primary-color);
    backdrop-filter: blur(1000px);
    box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
    list-style: none;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 1000;
    gap: 25px;
}
.sidebar li{

    width: 100%;
    margin-left: 15px;
}
.sidebar a{
    width: 100%;
}

.menu-button{
    display: none;
    opacity: 0;
    transform: translateX(100px);
    animation: slideRightMenuBtn 1.5s ease-out forwards;
}

@keyframes slideRightMenuBtn {
    to {
        opacity: 1;
        transform: translateY(0);
    }

}
@media(max-width: 800px){
    .hideOnMobile{
        display: none;
    }
    .menu-button{
        display: block;
    }
}
@media(max-width: 400px){
    .sidebar{
        width: 100%;
    }
}

/* Accueil Container*/

.accueil_container{
    display: inline-flex;
    flex-direction: row;
    margin-left: 10%;
    margin-right: 10%;
}

.accueil_element{
    display: flex;
    flex-direction: column;
}
img.pp{
    width: 400px;
    height: 650px;
    border-radius: 100%;
}

.titre__container{
    /*margin-top: 50px;*/
}

h1.titreh1{
    display: flex;
    margin-bottom: 5px;
    color: var(--white-color);
    font-family: IBM Plex Mono, sans-serif;
    font-weight: var(--font-weight-bold);
    opacity: 0;
    transform: translateY(-100px);
    animation: slideDown 1.5s ease-out forwards;
    animation-delay: 1.5s;
}

@keyframes slideDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@media screen and (min-width:1900px) and (max-width: 4000px) {
    h1.titreh1{
        font-size: var(--font-size-xxxl);
        margin-top: 300px;

    }
}

@media screen and (min-width:1621px) and (max-width: 1900px) {
    h1.titreh1{
        font-size: var(--font-size-xxxl);
        margin-top: 250px;

    }
}

@media screen and (min-width:1300px) and (max-width: 1621px) {
    h1.titreh1{
        font-size: var(--font-size-xxxl);
        margin-top: 250px;

    }
}

@media screen and (min-width:1043px) and (max-width: 1300px) {
    h1.titreh1{
        font-size: var(--font-size-xxxl);
        margin-top: 200px;

    }
}

@media screen and (min-width:768px) and (max-width: 1043px) {
    h1.titreh1{
        font-size: var(--font-size-xl);
        margin-top: 300px;

    }
}

@media screen and (min-width:600px) and (max-width: 768px) {
    h1.titreh1{
        font-size: var(--font-size-xl);
        margin-top: 225px;
    }
}

@media screen and (min-width:424px) and (max-width: 600px) {
    h1.titreh1{
        font-size: var(--font-size-xl);
        margin-top: 180px;
    }
}

@media screen and (min-width:378px) and (max-width: 424px) {
    h1.titreh1{
        font-size: var(--font-size-l);
        margin-top: 200px;
    }
}

@media screen and (min-width:300px) and (max-width: 378px) {
    h1.titreh1{
        font-size: 28px;
        margin-top: 200px;
    }
}


h2.titreh2 {
    display: flex;
    color: var(--secondary-color);
    font-family: "Roboto", sans-serif;
    font-weight: var(--font-weight-black);
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    position: relative;
}

@media screen and (min-width:900px) and (max-width: 4000px) {
    h2.titreh2 {
        animation-name: typingH2;
        animation-duration: 3s;
        animation-timing-function: steps(40, end);
        animation-fill-mode: forwards;
        animation-delay: 1.3s;
    }
        @keyframes typingH2 {
            from { width: 0; }
            to { width: 10.5ch;}
        }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }
    }

@media screen and (min-width:300px) and (max-width: 900px) {
    h2.titreh2 {
        animation-name: typingH2;
        animation-duration: 3s;
        animation-timing-function: steps(40, end);
        animation-fill-mode: forwards;
        animation-delay: 1.3s;
    }
    @keyframes typingH2 {
        from { width: 0; }
        to { width: 11ch;}
    }

    @keyframes blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0; }
    }
}

h2.titreh2::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--secondary-color);
    animation: blink 0.7s step-end infinite;
    animation-delay: 1.5s;
    opacity: 1;
}

@media screen and (min-width:1900px) and (max-width: 4000px) {
    h2.titreh2{
        font-size: var(--font-size-xxl);
    }
}

@media screen and (min-width:1621px) and (max-width: 1900px) {
    h2.titreh2{
        font-size: 55px;

    }
}

@media screen and (min-width:1043px) and (max-width: 1621px) {
    h2.titreh2{
        font-size: var(--font-size-xl);

    }
}

@media screen and (min-width:869px) and (max-width: 1043px) {
    h2.titreh2{
        font-size: var(--font-size-l);
    }
}

@media screen and (min-width:683px) and (max-width: 869px) {
    h2.titreh2{
        font-size: 30px;
        margin-top: 10px;
    }
}

@media screen and (min-width:503px) and (max-width: 683px) {
    h2.titreh2{
        font-size: 30px;
        margin-top: 5px;
    }
}

@media screen and (min-width:300px) and (max-width: 503px) {
    h2.titreh2{
        font-size: 25px;
        margin-top: 7px;
    }
}

p.paragraphe-principal{
    display: flex;
    color: var(--white-color);
    font-family: "Roboto", sans-serif;
    opacity: 0;
    transform: translateY(100px);
    animation: slideDownP 1.5s ease-out forwards;
    animation-delay: 1.7s;
}

@keyframes slideDownP {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (min-width:1900px) and (max-width: 4000px) {
    p.paragraphe-principal{
        font-size: 19px;
        max-width: 60%;
        line-height: 38px;
        margin-bottom: 35px;
        margin-top: 35px;
    }
}

@media screen and (min-width:1622px) and (max-width: 1900px) {
    p.paragraphe-principal{
        font-size: var(--font-size-m);
        max-width: 60%;
        line-height: 38px;
        margin-bottom: 40px;
        margin-top: 40px;
    }
}

@media screen and (min-width:1043px) and (max-width: 1621px) {
    p.paragraphe-principal{
        font-size: var(--font-size-xs);
        max-width: 75%;
        line-height: 30px;
        margin-bottom: 30px;
        margin-top: 30px;

    }
}

@media screen and (min-width:869px) and (max-width: 1043px) {
    p.paragraphe-principal{
        font-size: var(--font-size-xxs);
        max-width: 90%;
        line-height: 28px;
        margin-bottom: 20px;
        margin-top: 20px;
    }
}

@media screen and (min-width:683px) and (max-width: 869px) {
    p.paragraphe-principal{
        font-size: var(--font-size-xxxs);
        max-width: 90%;
        line-height: 25px;
        margin-bottom: 20px;
        margin-top: 20px;
    }
}

@media screen and (min-width:503px) and (max-width: 683px) {
    p.paragraphe-principal{
        font-size: var(--font-size-xxxs);
        max-width: 84%;
        line-height: 25px;
        margin-bottom: 20px;
        margin-top: 20px;
    }
}

@media screen and (min-width:300px) and (max-width: 503px) {
    p.paragraphe-principal{
        font-size: var(--font-size-xxxs);
        max-width: 100%;
        line-height: 22px;
        margin-bottom: 15px;
        margin-top: 15px;
    }
}


.bouton-menu__container{
    display: flex;
    gap: 50px;
    width: 100%;
    height: 100%;
    margin-bottom: 50px;
}

.bouton-menu{
    display: flex;
    height: 100%;
}

a.btn-realisation {
    appearance: none;
    background-color: var(--secondary-color);
    color: var(--black-color);
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    line-height: normal;
    margin: 0;
    outline: none;
    font-family: "Roboto", sans-serif;
    text-align: center;
    text-decoration: none;
    transition: all 800ms cubic-bezier(.23, 1, 0.32, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    will-change: transform;
    opacity: 0;
    transform: translateX(-100px);
    animation: slideLeftBtn 1s ease-out forwards;
    animation-delay: 2.5s;
}

@keyframes slideLeftBtn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (min-width:1900px) and (max-width: 4000px) {
    a.btn-realisation{
        border: 2px solid transparent;
        border-radius: var(--border-radius-s);
        padding: 15px 25px 15px 25px;
        font-size: 20px;
    }
}

@media screen and (min-width:1621px) and (max-width: 1900px) {
    a.btn-realisation{
        border: 2px solid transparent;
        border-radius: var(--border-radius-s);
        padding: 15px 25px 15px 25px;
        font-size: 25px;
    }
}

@media screen and (min-width:1043px) and (max-width: 1621px) {
    a.btn-realisation{
        border: 2px solid transparent;
        border-radius: var(--border-radius-s);
        padding: 15px 25px 15px 25px;
        font-size: 18px;

    }
}

@media screen and (min-width:786px) and (max-width: 1043px) {
    a.btn-realisation{
        border: 2px solid transparent;
        border-radius: var(--border-radius-s);
        padding: 15px 25px 15px 25px;
        font-size: 18px;
    }
}

@media screen and (min-width:683px) and (max-width: 786px) {
    a.btn-realisation{
        border: 2px solid transparent;
        border-radius: var(--border-radius-s);
        padding: 10px 20px 10px 20px;
        font-size: 18px;
    }
}

@media screen and (min-width:503px) and (max-width: 683px) {
    a.btn-realisation{
        border: 2px solid transparent;
        border-radius: var(--border-radius-s);
        padding: 10px 20px 10px 20px;
        font-size: 18px;
    }
}

@media screen and (min-width:375px) and (max-width: 503px) {
    a.btn-realisation{
        border: 2px solid transparent;
        border-radius: var(--border-radius-s);
        padding: 10px 20px 10px 20px;
        font-size: 18px;
    }
}

@media screen and (min-width:300px) and (max-width:375px) {
    a.btn-realisation{
        border: 2px solid transparent;
        border-radius: var(--border-radius-s);
        padding: 10px 20px 10px 20px;
        font-size: 15px;
    }
}

a.btn-realisation:disabled{
    pointer-events: none;
}

a.btn-realisation:active {
    box-shadow: none;
    transform: translateY(0);
}

a.btn-realisation:hover{
    color: var(--secondary-color);
    background-color: var(--primary-color);
    box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
    transform: translateY(-3px);
    border: solid var(--secondary-color);
}

@media screen and (min-width:1900px) and (max-width: 4000px) {
    a.btn-realisation:hover{
        border: 2px solid var(--secondary-color);
    }
}

@media screen and (min-width:1621px) and (max-width: 1900px) {
    a.btn-realisation:hover{
        border: 2px solid var(--secondary-color);
    }
}

@media screen and (min-width:1043px) and (max-width: 1621px) {
    a.btn-realisation:hover{
        border: 2px solid var(--secondary-color);
    }
}

@media screen and (min-width:786px) and (max-width: 1043px) {
    a.btn-realisation:hover{
        border: 2px solid var(--secondary-color);
    }
}

@media screen and (min-width:683px) and (max-width: 786px) {
    a.btn-realisation:hover{
        border: 2px solid var(--secondary-color);
    }
}

@media screen and (min-width:503px) and (max-width: 683px) {
    a.btn-realisation:hover{
        border: 2px solid var(--secondary-color);
    }
}

@media screen and (min-width:375px) and (max-width: 503px) {
    a.btn-realisation:hover{
        border: 2px solid var(--secondary-color);
    }
}

@media screen and (min-width:300px) and (max-width:375px) {
    a.btn-realisation:hover{
        border: 2px solid var(--secondary-color);
    }
}

a.btn-contact{
    appearance: none;
    background-color: var(--primary-color);
    box-sizing: border-box;
    color: var(--secondary-color);
    cursor: pointer;
    display: inline-block;
    font-family: "Roboto", sans-serif;
    line-height: normal;
    outline: none;
    text-align: center;
    text-decoration: none;
    transition: all 800ms cubic-bezier(.23, 1, 0.32, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    will-change: transform;
    opacity: 0;
    transform: translateX(-50px);
    animation: slideLeftBtn 1s ease-out forwards;
    animation-delay: 3.2s;
}

@keyframes slideLeftBtn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (min-width:1900px) and (max-width: 4000px) {
    a.btn-contact{
        border: 2px solid var(--secondary-color);
        border-radius: var(--border-radius-s);
        padding: 15px 25px 15px 25px;
        font-size: 20px;
    }
}

@media screen and (min-width:1621px) and (max-width: 1900px) {
    a.btn-contact{
        border: 2px solid var(--secondary-color);
        border-radius: var(--border-radius-s);
        padding: 15px 25px 15px 25px;
        font-size: 25px;
    }
}

@media screen and (min-width:1043px) and (max-width: 1621px) {
    a.btn-contact{
        border: 2px solid var(--secondary-color);
        border-radius: var(--border-radius-s);
        padding: 15px 25px 15px 25px;
        font-size: 18px;

    }
}

@media screen and (min-width:786px) and (max-width: 1043px) {
    a.btn-contact{
        border: 2px solid var(--secondary-color);
        border-radius: var(--border-radius-s);
        padding: 15px 25px 15px 25px;
        font-size: 18px;
    }
}

@media screen and (min-width:683px) and (max-width: 786px) {
    a.btn-contact{
        border: 1px solid var(--secondary-color);
        border-radius: var(--border-radius-s);
        padding: 10px 20px 10px 20px;
        font-size: 18px;
    }
}

@media screen and (min-width:503px) and (max-width: 683px) {
    a.btn-contact{
        border: 1px solid var(--secondary-color);
        border-radius: var(--border-radius-s);
        padding: 10px 20px 10px 20px;
        font-size: 18px;
    }
}

@media screen and (min-width:375px) and (max-width: 503px) {
    a.btn-contact{
        border: 1px solid var(--secondary-color);
        border-radius: var(--border-radius-s);
        padding: 10px 20px 10px 20px;
        font-size: 18px;
    }
}

@media screen and (min-width:300px) and (max-width:375px) {
    a.btn-contact{
        border: 1px solid var(--secondary-color);
        border-radius: var(--border-radius-s);
        padding: 10px 20px 10px 20px;
        font-size: 15px;
    }
}

a.btn-contact:disabled{
    pointer-events: none;
}

a.btn-contact:active {
    box-shadow: none;
    transform: translateY(0);
}

a.btn-contact:hover{
    color: var(--black-color);
    background-color: var(--secondary-color);
    box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
    transform: translateY(-3px);
    border:none ;
}

@media screen and (min-width:1900px) and (max-width: 4000px) {
    a.btn-contact:hover{
        border: 2px solid var(--secondary-color);
    }
}

@media screen and (min-width:1621px) and (max-width: 1900px) {
    a.btn-contact:hover{
        border: 2px solid var(--secondary-color);
    }
}

@media screen and (min-width:1043px) and (max-width: 1621px) {
    a.btn-contact:hover{
        border: 2px solid var(--secondary-color);
    }
}

@media screen and (min-width:786px) and (max-width: 1043px) {
    a.btn-contact:hover{
        border: 2px solid var(--secondary-color);
    }
}

@media screen and (min-width:683px) and (max-width: 786px) {
    a.btn-contact:hover{
        border: 2px solid var(--secondary-color);
    }
}

@media screen and (min-width:503px) and (max-width: 683px) {
    a.btn-contact:hover{
        border: 2px solid var(--secondary-color);
    }
}

@media screen and (min-width:375px) and (max-width: 503px) {
    a.btn-contact:hover{
        border: 2px solid var(--secondary-color);
    }
}

@media screen and (min-width:300px) and (max-width:375px) {
    a.btn-contact:hover{
        border: 2px solid var(--secondary-color);
    }
}

.reseaux_container {
    display: flex;
}

@media screen and (min-width:1900px) and (max-width: 4000px){
    .reseaux_container {
        margin-top: 50px;
        margin-bottom: 357px;
    }
}

@media screen and (min-width:1621px) and (max-width: 1900px){
    .reseaux_container{
        margin-top: 100px;
        margin-bottom: 340px;
    }
}

@media screen and (min-width:1300px) and (max-width: 1621px){
    .reseaux_container{
        margin-top: 100px;
        margin-bottom: 248px;
    }
}

@media screen and (min-width:1024px) and (max-width: 1300px){
    .reseaux_container{
        margin-top: 50px;
        margin-bottom: 248px;
    }
}
@media screen and (min-width:768px) and (max-width: 1024px){
    .reseaux_container{
        margin-bottom: 275px;
        margin-top: 125px;
    }
}

@media screen and (min-width:600px) and (max-width: 768px){
    .reseaux_container{
        margin-bottom: 300px;
        margin-top: 75px;
    }
}

@media screen and (min-width:425px) and (max-width: 600px){
    .reseaux_container{
        margin-bottom: 300px;
        margin-top: 35px;
    }
}

@media screen and (min-width:300px) and (max-width: 425px){
    .reseaux_container{
        margin-bottom: 257px;
        margin-top: 50px;
    }
}

.reseaux{
    display: flex;
    width: 100%;
    height: 100%;
    gap: 25px;
}

a.reseaux_element{
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: var(--secondary-color);
    cursor: pointer;
    transition: all 0.5s ease;
}

a.reseaux_element:hover:first-child{
    color:#ee2a7b;
    border: solid #ee2a7b;
    box-shadow: 0 0 25px #ee2a7b;
}

a.reseaux_element:hover:nth-child(2){
    color: #000000;
    border: solid #000000;
    box-shadow: 0 0 25px #000000;
}

a.reseaux_element:hover:nth-child(3){
    color: #1c6df8;
    border: solid #1c6df8;
    box-shadow: 0 0 25px #1c6df8;
}

@media screen and (min-width:1900px) and (max-width: 4000px){
    a.reseaux_element{
        padding: 10px;
        border-radius: 100%;
        font-size: 22px;
        border: 2px solid var(--secondary-color);
    }
}

@media screen and (min-width:1621px) and (max-width: 1900px){
    a.reseaux_element{
        padding: 12px;
        border-radius: 100%;
        font-size: 27px;
        border: 2px solid var(--secondary-color);
    }
}

@media screen and (min-width:1024px) and (max-width: 1621px){
    a.reseaux_element{
        padding: 12px;
        border-radius: 100%;
        font-size: var(--font-size-m);
        border: 2px solid var(--secondary-color);
    }
}
@media screen and (min-width:768px) and (max-width: 1024px){
    a.reseaux_element{
        padding: 10px;
        border-radius: 100%;
        font-size: var(--font-size-s);
        border: 2px solid var(--secondary-color);
    }
}

@media screen and (min-width:425px) and (max-width: 768px){
    a.reseaux_element{
        padding: 8px;
        border-radius: 100%;
        font-size: var(--font-size-xs);
        border: 1px solid var(--secondary-color);
    }
}

@media screen and (min-width:300px) and (max-width: 425px){
    a.reseaux_element{
        padding: 7px;
        border-radius: 100%;
        font-size: var(--font-size-xxs);
        border: 1px solid var(--secondary-color);
    }
}

a.reseaux_element.insta{
    opacity: 0;
    transform: translateY(100px);
    animation: slideUpReseau 1s ease-out forwards;
    animation-delay: 3.4s;
}

@keyframes slideUpReseau {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

a.reseaux_element.tiktok{
    opacity: 0;
    transform: translateY(100px);
    animation: slideUpReseau 1s ease-out forwards;
    animation-delay: 3.6s;
}

@keyframes slideUpReseau {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

a.reseaux_element.linkedin{
    opacity: 0;
    transform: translateY(100px);
    animation: slideUpReseau 1s ease-out forwards;
    animation-delay: 3.8s;
}

@keyframes slideUpReseau{
    to {
        opacity: 1;
        transform: translateY(0);
    }
}





@media screen and (min-width:1900px) and (max-width: 4000px){
    a.reseaux_element:hover:first-child,
    a.reseaux_element:hover:nth-child(2),
    a.reseaux_element:hover:nth-child(3){
        border: 2px solid ;
    }
}

@media screen and (min-width:1621px) and (max-width: 1900px){
    a.reseaux_element:hover:first-child,
    a.reseaux_element:hover:nth-child(2),
    a.reseaux_element:hover:nth-child(3){
        border: 2px solid ;
    }
}

@media screen and (min-width:1024px) and (max-width: 1621px){
    a.reseaux_element:hover:first-child,
    a.reseaux_element:hover:nth-child(2),
    a.reseaux_element:hover:nth-child(3){
        border: 2px solid ;
    }
}
@media screen and (min-width:768px) and (max-width: 1024px){
    a.reseaux_element:hover:first-child,
    a.reseaux_element:hover:nth-child(2),
    a.reseaux_element:hover:nth-child(3){
        border: 2px solid ;
    }
}

@media screen and (min-width:425px) and (max-width: 768px){
    a.reseaux_element:hover:first-child,
    a.reseaux_element:hover:nth-child(2),
    a.reseaux_element:hover:nth-child(3){
        border: 1px solid ;
    }
}

@media screen and (min-width:300px) and (max-width: 425px){
    a.reseaux_element:hover:first-child,
    a.reseaux_element:hover:nth-child(2),
    a.reseaux_element:hover:nth-child(3){
        border: 1px solid ;
    }
}

/* A Propos */

.apropos-container{
    display: flex;
    flex-direction: column;
    scroll-margin-top: 100px;
}

h2.titre_section.apropos-title,
h2.titre_section.realisation-title,
h2.titre_section.contact-title{
    display: flex;
    justify-content: center;
    width: 100%;
    color: var(--secondary-color);
    font-family: "Roboto", sans-serif;
    font-weight: var(--font-weight-black);
    margin-bottom: 50px;
    padding-top: 50px;
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

h2.titre_section.apropos-title.visible,
h2.titre_section.realisation-title.visible,
h2.titre_section.contact-title.visible {
    opacity: 1;
    transform: scale(1);
}

@media screen and (min-width:1900px) and (max-width: 4000px) {
    h2.titre_section{
        font-size: var(--font-size-xxl);
    }
}

@media screen and (min-width:1621px) and (max-width: 1900px) {
    h2.titre_section{
        font-size: 55px;

    }
}

@media screen and (min-width:1043px) and (max-width: 1621px) {
    h2.titre_section{
        font-size: var(--font-size-xl);

    }
}

@media screen and (min-width:869px) and (max-width: 1043px) {
    h2.titre_section{
        font-size: var(--font-size-l);
    }
}

@media screen and (min-width:683px) and (max-width: 869px) {
    h2.titre_section{
        font-size: 30px;
        margin-top: 10px;
    }
}

@media screen and (min-width:503px) and (max-width: 683px) {
    h2.titre_section{
        font-size: 30px;
        margin-top: 5px;
    }
}

@media screen and (min-width:300px) and (max-width: 503px) {
    h2.titre_section{
        font-size: 25px;
        margin-top: 7px;
    }
}


.apropos{
    display: flex;
    flex-direction: column;
    gap: 50px;
    /*width: 100%;*/
    /*height: 100%;*/
    margin-left: 10%;
    margin-right: 10%;
}

@media screen and (min-width:1900px) and (max-width: 4000px){
    .apropos{
        margin-bottom: 250px;
    }
}

@media screen and (min-width:1621px) and (max-width: 1900px){
    .apropos{
        margin-bottom: 125px;
    }
}

@media screen and (min-width:1024px) and (max-width: 1621px){
    .apropos{
        margin-bottom: 125px;
    }
}
@media screen and (min-width:768px) and (max-width: 1024px){
    .apropos{
        margin-bottom: 125px;
    }
}

@media screen and (min-width:425px) and (max-width: 768px){
    .apropos{
        margin-bottom: 125px;
    }
}

@media screen and (min-width:300px) and (max-width: 425px){
    .apropos{
        margin-bottom: 125px;
    }
}


.titre-section{
    display: flex;
    justify-content: center;
    align-items: center;
}
.texte1-container,.texte2-container{
    display: flex;
}

@media screen and (min-width:300px) and (max-width: 4000px){
    .texte1-container{
        flex-direction: row-reverse;
    }
}

@media screen and (min-width:1025px) and (max-width: 4000px){
    .texte1-container,.texte2-container{
        display: flex;
    }
}

@media screen and (min-width:300px) and (max-width: 1025px){
    .texte1-container,.texte2-container{
        flex-wrap: wrap;
        justify-content: center;
    }
}


p.texte-apropos1,p.texte-apropos2{
    color: var(--white-color);
    font-family: "Roboto", sans-serif;
}


@media screen and (min-width:1900px) and (max-width: 4000px){
    p.texte-apropos1,p.texte-apropos2{
        font-size: 16px;
        line-height: 37px;
        margin-top: 100px;
    }
}

@media screen and (min-width:1621px) and (max-width: 1900px){
    p.texte-apropos1,p.texte-apropos2{
        font-size: var(--font-size-s);
        line-height: 35px;
    }
}

@media screen and (min-width:1024px) and (max-width: 1621px){
    p.texte-apropos1,p.texte-apropos2{
        font-size: var(--font-size-s);
        line-height: 35px;
    }
}

@media screen and (min-width:768px) and (max-width: 1024px){
    p.texte-apropos1,p.texte-apropos2{
        font-size: var(--font-size-xs);
        line-height: 35px;
    }
}

@media screen and (min-width:425px) and (max-width: 768px){
    p.texte-apropos1,p.texte-apropos2{
        font-size: var(--font-size-xxs);
        line-height: 35px;
    }
}

@media screen and (min-width:300px) and (max-width: 425px){
    p.texte-apropos1,p.texte-apropos2{
        font-size: var(--font-size-xxxs);
        line-height: 23px;

    }
}




@media screen and (min-width:1900px) and (max-width: 4000px){
    p.texte-apropos1{
        margin-right: 25px;
        /*margin-top: 15px;*/
    }
}

@media screen and (min-width:1621px) and (max-width: 1900px){
    p.texte-apropos1{
        margin-right: 25px;
        /*margin-top: 15px;*/
    }
}

@media screen and (min-width:1024px) and (max-width: 1621px){
    p.texte-apropos1{
        margin-right: 25px;
        /*margin-top: 15px;*/
    }
}

@media screen and (min-width:768px) and (max-width: 1024px){
    p.texte-apropos1{
        /*margin-right: 25px;*/
        margin-top: 15px;
    }
}

@media screen and (min-width:425px) and (max-width: 768px){
    p.texte-apropos1{
        /*margin-right: 25px;*/
        margin-top: 15px;
    }
}

@media screen and (min-width:300px) and (max-width: 425px){
    p.texte-apropos1{
        /*margin-right: 25px;*/
        margin-top: 15px;

    }
}


@media screen and (min-width:1900px) and (max-width: 4000px){
    p.texte-apropos2{
        margin-left: 25px;
        /*margin-top: 15px;*/
    }
}

@media screen and (min-width:1621px) and (max-width: 1900px){
    p.texte-apropos2{
        margin-left: 25px;
        /*margin-top: 15px;*/
    }
}

@media screen and (min-width:1026px) and (max-width: 1621px){
    p.texte-apropos2{
        margin-left: 25px;
        /*margin-top: 15px;*/
    }
}

@media screen and (min-width:768px) and (max-width: 1026px){
    p.texte-apropos2{
        /*margin-left: 25px;*/
        margin-top: 15px;
    }
}

@media screen and (min-width:425px) and (max-width: 768px){
    p.texte-apropos2{
        /*margin-left: 25px;*/
        margin-top: 15px;
    }
}

@media screen and (min-width:300px) and (max-width: 425px){
    p.texte-apropos2{
        /*margin-right: 25px;*/
        margin-top: 15px;

    }
}


img.image-apropos1,img.image-apropos2{
    object-fit: cover;
    object-position: center;
    border-radius: var(--border-radius-xl);
}

@media screen and (min-width:1900px) and (max-width: 4000px){
    img.image-apropos1,img.image-apropos2{
        width: 500px;
        height: 400px;
    }
}

@media screen and (min-width:1621px) and (max-width: 1900px){
    img.image-apropos1,img.image-apropos2{
        width: 500px;
        height: 400px;
    }
}

@media screen and (min-width:1024px) and (max-width: 1621px){
    img.image-apropos1,img.image-apropos2{
        width: 400px;
        /*height: 300px;*/
    }
}

@media screen and (min-width:768px) and (max-width: 1024px){
    img.image-apropos1,img.image-apropos2{
        width: 350px;
        /*height: 250px;*/
    }
}

@media screen and (min-width:425px) and (max-width: 768px){
    img.image-apropos1,img.image-apropos2{
        width: 200px;
        /*height: 235px;*/
    }
}

@media screen and (min-width:300px) and (max-width: 425px){
    img.image-apropos1,img.image-apropos2{
        width: 100px;
        /*height: 180px;*/
    }
}


.image-apropos1,
.texte-apropos2{
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.8s ease;
    transition-delay: 0.5s;
}

.image-apropos2,
.texte-apropos1{
    opacity: 0;
    transform: translateX(-100px);
    transition: all 0.8s ease;
    transition-delay: 0.5s;
}

.image-apropos1.visible,
.texte-apropos2.visible{
    opacity: 1;
    transform: translateX(0);
}

.image-apropos2.visible,
.texte-apropos1.visible{
    opacity: 1;
    transform: translateX(0);
}

/*  Réalisation  */

.realisation-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #303030;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    scroll-margin-top: 100px;
}

@media screen and (min-width:1900px) and (max-width: 4000px){
    .realisation-container{
        margin-bottom: 250px;
    }
}

@media screen and (min-width:769px) and (max-width: 1900px){
    .realisation-container{
        margin-bottom: 300px;
    }
}

@media screen and (min-width:425px) and (max-width: 768px){
    .realisation-container{
        margin-bottom: 150px;
    }
}

@media screen and (min-width:375px) and (max-width: 425px){
    .realisation-container{
        margin-bottom: 50px;
    }
}

@media screen and (min-width:300px) and (max-width: 375px){
    .realisation-container{
        margin-bottom: 50px;
    }
}

.realisation_block{
    margin-top: 50px;
    margin-bottom: 75px;
    margin-left: 10%;
    margin-right: 10%;
    align-items: center;
}

.realisation{
    display: flex;
    justify-content: center;
    width: 100%;
}

@media screen and (min-width:2135px) and (max-width: 4000px){
    .realisation{
        display: flex;
        flex-direction: row;
        gap: 100px;
    }
}

@media screen and (min-width:1500px) and (max-width: 2134px){
    .realisation{
        flex-wrap: wrap;
        gap: 100px;
    }
}

@media screen and (min-width:300px) and (max-width: 1500px){
    .realisation{
        flex-wrap: wrap;
        gap: 100px;
    }
}


.galerie1,
.galerie2,
.galerie3{
    height: auto;
    object-fit: cover;
    cursor: pointer;
    max-width: 100%;
}


img.trigger-image.galerie1.visible,
img.trigger-image.galerie2.visible,
img.trigger-image.galerie3.visible{
    display: flex;
    transition: transform 0.6s ease-in-out;

}

img.trigger-image.galerie1.visible:hover,
img.trigger-image.galerie2.visible:hover,
img.trigger-image.galerie3.visible:hover{
    transform: scale(1.2);
}



.realisation_content1,
.realisation_content2,
.realisation_content3{
    display: flex;
    flex-direction: column;
    gap: 15px;
}


.titre_realisation_content{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    color: var(--secondary-color);
    font-family: "pacifico", sans-serif;

}

@media screen and (min-width:1900px) and (max-width: 4000px){
    p.titre_realisation_content{
        font-size: var(--font-size-xl) ;
    }
}

@media screen and (min-width:769px) and (max-width: 1900px){
    p.titre_realisation_content{
        font-size: var(--font-size-l) ;
    }
}

@media screen and (min-width:425px) and (max-width: 768px){
    p.titre_realisation_content{
        font-size: 25px ;
    }
}

@media screen and (min-width:375px) and (max-width: 425px){
    p.titre_realisation_content{
        font-size: var(--font-size-m) ;
    }
}

@media screen and (min-width:300px) and (max-width: 375px){
    p.titre_realisation_content{
        font-size: var(--font-size-xs) ;
    }
}


.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 9999;

    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.show {
    display: flex;
    visibility: visible;
    opacity: 1;
}

.modal-content {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    cursor: default;
}




@media screen and (min-width:2135px) and (max-width: 4000px){
    img.galerie1 {
        opacity: 0;
        transform: translateX(-100px);
        transition: all 0.8s ease;
        transition-delay: 0.5s;
    }

    img.galerie1.visible {
        opacity: 1;
        transform: translateX(0);
    }
}

@media screen and (min-width:1762px) and (max-width: 2135px){
    img.galerie1 {
        opacity: 0;
        transform: translateX(-100px);
        transition: all 0.8s ease;
        transition-delay: 0.5s;
    }

    img.galerie1.visible {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (min-width:300px) and (max-width: 1762px){
    img.galerie1 {
        opacity: 0;
        transform: translateX(-100px);
        transition: all 0.8s ease;
        transition-delay: 0.5s;
    }

    img.galerie1.visible {
        opacity: 1;
        transform: translateX(0);
    }
}

@media screen and (min-width:2135px) and (max-width: 4000px){
    .titre_realisation_content.titre1 {
        opacity: 0;
        transform: translateY(100px);
        transition: all 0.8s ease;
        transition-delay: 0.5s;
    }

    .titre_realisation_content.titre1.visible {
        opacity: 1;
        transform: translatey(0);
    }
}

@media screen and (min-width:1762px) and (max-width: 2135px){
    .titre_realisation_content.titre1 {
        opacity: 0;
        transform: translateY(100px);
        transition: all 0.8s ease;
        transition-delay: 0.7s;
    }

    .titre_realisation_content.titre1.visible {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (min-width:300px) and (max-width: 1762px){
    .titre_realisation_content.titre1 {
        opacity: 0;
        transform: translateY(100px);
        transition: all 0.8s ease;
        transition-delay: 0.5s;
    }

    .titre_realisation_content.titre1.visible {
        opacity: 1;
        transform: translateY(0);
    }
}


@media screen and (min-width:2135px) and (max-width: 4000px){
    img.galerie2 {
        opacity: 0;
        transform: translateY(-100px);
        transition: all 0.8s ease;
        transition-delay: 0.5s;
    }

    img.galerie2.visible {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (min-width:1762px) and (max-width: 2135px){
    img.galerie2 {
        opacity: 0;
        transform: translateX(100px);
        transition: all 0.8s ease;
        transition-delay: 0.5s;
    }

    img.galerie2.visible {
        opacity: 1;
        transform: translateX(0);
    }
}

@media screen and (min-width:300px) and (max-width: 1762px){
    img.galerie2 {
        opacity: 0;
        transform: translateX(100px);
        transition: all 0.8s ease;
        transition-delay: 0.5s;
    }

    img.galerie2.visible {
        opacity: 1;
        transform: translateX(0);
    }
}

@media screen and (min-width:2135px) and (max-width: 4000px){
    .titre_realisation_content.titre2 {
        opacity: 0;
        transform: translateY(100px);
        transition: all 0.8s ease;
        transition-delay: 0.7s;
    }

    .titre_realisation_content.titre2.visible {
        opacity: 1;
        transform: translatey(0);
    }
}

@media screen and (min-width:1762px) and (max-width: 2135px){
    .titre_realisation_content.titre2 {
        opacity: 0;
        transform: translateY(100px);
        transition: all 0.8s ease;
        transition-delay: 0.5s;
    }

    .titre_realisation_content.titre2.visible {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (min-width:300px) and (max-width: 1762px){
    .titre_realisation_content.titre2 {
        opacity: 0;
        transform: translateY(100px);
        transition: all 0.8s ease;
        transition-delay: 0.5s;
    }

    .titre_realisation_content.titre2.visible {
        opacity: 1;
        transform: translateY(0);
    }
}





@media screen and (min-width:2135px) and (max-width: 4000px){
    img.galerie3 {
        opacity: 0;
        transform: translateX(100px);
        transition: all 0.8s ease;
        transition-delay: 0.5s;
    }

    img.galerie3.visible {
        opacity: 1;
        transform: translateX(0);
    }
}

@media screen and (min-width:1762px) and (max-width: 2135px){
    img.galerie3 {
        opacity: 0;
        transform: translateY(100px);
        transition: all 0.8s ease;
        transition-delay: 0.5s;
    }

    img.galerie3.visible {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (min-width:300px) and (max-width: 1762px){
    img.galerie3 {
        opacity: 0;
        transform: translateX(-100px);
        transition: all 0.8s ease;
        transition-delay: 0.5s;
    }

    img.galerie3.visible {
        opacity: 1;
        transform: translateX(0);
    }
}

@media screen and (min-width:2135px) and (max-width: 4000px){
    .titre_realisation_content.titre3 {
        opacity: 0;
        transform: translateY(100px);
        transition: all 0.8s ease;
        transition-delay: 0.5s;
    }

    .titre_realisation_content.titre3.visible {
        opacity: 1;
        transform: translatey(0);
    }
}

@media screen and (min-width:1762px) and (max-width: 2135px){
    .titre_realisation_content.titre3 {
        opacity: 0;
        transform: translateY(100px);
        transition: all 0.8s ease;
        transition-delay: 0.7s;
    }

    .titre_realisation_content.titre3.visible {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (min-width:300px) and (max-width: 1762px){
    .titre_realisation_content.titre3 {
        opacity: 0;
        transform: translateY(100px);
        transition: all 0.8s ease;
        transition-delay: 0.5s;
    }

    .titre_realisation_content.titre3.visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/*  Contact  */

.contact_container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    scroll-margin-top: 100px;
}

@media screen and (min-width:1900px) and (max-width: 4000px){
    .contact_container{
        margin-bottom: 250px;
    }
}

@media screen and (min-width:769px) and (max-width: 1900px){
    .contact_container{
        margin-bottom: 250px;
    }
}

@media screen and (min-width:425px) and (max-width: 768px){
    .contact_container{
        margin-bottom: 250px;
    }
}

@media screen and (min-width:375px) and (max-width: 425px){
    .contact_container{
        margin-bottom: 150px;
    }
}

@media screen and (min-width:300px) and (max-width: 375px){
    .contact_container{
        margin-bottom: 150px;
    }
}

.titre_contact{
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

form{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media screen and (min-width:1500px) and (max-width: 4000px){
    form{
        width: 1000px;
        gap: 20px;
    }
}

@media screen and (min-width:1024px) and (max-width: 1500px){
    form{
        width: 600px;
        gap: 20px;
    }
}
@media screen and (min-width:768px) and (max-width: 1024px){
    form{
        width: 350px;
        gap: 20px;
    }
}
@media screen and (min-width:425px) and (max-width: 768px){
    form{
        width: 300px;
        gap: 20px;
    }
}
@media screen and (min-width:300px) and (max-width: 425px){
    form{
        width: 200px;
        gap: 15px;
    }
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
    margin-top: 5px;
    border: 2px solid #ccc;
    border-radius: var(--border-radius-m);
    background-color: var(--white-color);
    box-sizing: border-box;
}

@media screen and (min-width:1500px) and (max-width: 4000px){
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        padding: 10px;
    }
}

@media screen and (min-width:1024px) and (max-width: 1500px){
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        padding: 10px;
    }
}
@media screen and (min-width:768px) and (max-width: 1024px){
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        padding: 7px;
    }
}
@media screen and (min-width:425px) and (max-width: 768px){
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        padding: 7px;
    }
}
@media screen and (min-width:300px) and (max-width: 425px){
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        padding: 7px 10px;
    }
}


@media screen and (min-width:1500px) and (max-width: 4000px){
    .champs{
        font-size: var(--font-size-m);
        font-family: "Roboto", sans-serif;
    }
}

@media screen and (min-width:1024px) and (max-width: 1500px){
    .champs{
        font-size: var(--font-size-xs);
        font-family: "Roboto", sans-serif;
    }
}
@media screen and (min-width:768px) and (max-width: 1024px){
    .champs{
        font-size: var(--font-size-xs);
        font-family: "Roboto", sans-serif;
    }
}
@media screen and (min-width:425px) and (max-width: 768px){
    .champs{
        font-size: var(--font-size-xxs);
        font-family: "Roboto", sans-serif;
    }
}
@media screen and (min-width:300px) and (max-width: 425px){
    .champs{
        font-size: var(--font-size-xxxs);
        font-family: "Roboto", sans-serif;
    }
}

.champs:focus::placeholder{
    color:transparent;
}

input::placeholder,
textarea::placeholder {
    color: var(--black-color);
    font-family: "Roboto", sans-serif;
}

@media screen and (min-width:1500px) and (max-width: 4000px){
    input::placeholder,
    textarea::placeholder{
        font-size: 16px;
    }
}

@media screen and (min-width:1024px) and (max-width: 1500px){
    input::placeholder,
    textarea::placeholder{
        font-size: 14px;
    }
}
@media screen and (min-width:768px) and (max-width: 1024px){
    input::placeholder,
    textarea::placeholder{
        font-size: 14px;
    }
}
@media screen and (min-width:425px) and (max-width: 768px){
    input::placeholder,
    textarea::placeholder{
        font-size: 12px;
    }
}
@media screen and (min-width:300px) and (max-width: 425px){
    input::placeholder,
    textarea::placeholder{
        font-size: 10px;
    }
}

textarea {
    resize: vertical;
    height: 200px;
    margin-bottom: 25px;
}

button.btn-contact2{
    appearance: none;
    background-color: var(--primary-color);
    border-radius: var(--border-radius-s);
    box-sizing: border-box;
    color: var(--secondary-color);
    cursor: pointer;
    display: inline-block;
    font-family: "Roboto", sans-serif;
    line-height: normal;
    outline: none;
    text-align: center;
    text-decoration: none;
    transition: all 800ms cubic-bezier(.23, 1, 0.32, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    will-change: transform;
}

@media screen and (min-width:1500px) and (max-width: 4000px) {
    button.btn-contact2{
        border: 2px solid var(--secondary-color);
        padding: 10px 125px 10px 125px;
        font-size: 25px;
    }
}

@media screen and (min-width:1024px) and (max-width: 1500px) {
    button.btn-contact2{
        border: 2px solid var(--secondary-color);
        padding: 10px 125px 10px 125px;
        font-size: 20px;

    }
}

@media screen and (min-width:768px) and (max-width: 1024px) {
    button.btn-contact2{
        border: 2px solid var(--secondary-color);
        padding: 10px 75px 10px 75px;
        font-size: 18px;
    }
}

@media screen and (min-width:425px) and (max-width: 768px) {
    button.btn-contact2{
        border: 2px solid var(--secondary-color);
        padding: 10px 50px 10px 50px;
        font-size: 18px;
    }
}

@media screen and (min-width:300px) and (max-width: 425px) {
    button.btn-contact2{
        border: 1px solid var(--secondary-color);
        padding: 10px 20px 10px 20px;
        font-size: 15px;
    }
}


button.btn-contact2:disabled{
    pointer-events: none;
}

button.btn-contact2:active {
    box-shadow: none;
    transform: translateY(0);
}

button.btn-contact2:hover{
    color: var(--black-color);
    background-color: var(--secondary-color);
    box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
    transform: translateY(-3px);
    border:none ;
}

@media screen and (min-width:1900px) and (max-width: 4000px) {
    button.btn-contact2:hover{
        border: 2px solid var(--secondary-color);
    }
}

@media screen and (min-width:1621px) and (max-width: 1900px) {
    button.btn-contact2:hover{
        border: 2px solid var(--secondary-color);
    }
}

@media screen and (min-width:1043px) and (max-width: 1621px) {
    button.btn-contact2:hover{
        border: 2px solid var(--secondary-color);
    }
}

@media screen and (min-width:786px) and (max-width: 1043px) {
    button.btn-contact2:hover{
        border: 2px solid var(--secondary-color);
    }
}

@media screen and (min-width:683px) and (max-width: 786px) {
    button.btn-contact2:hover{
        border: 2px solid var(--secondary-color);
    }
}

@media screen and (min-width:503px) and (max-width: 683px) {
    button.btn-contact2:hover{
        border: 2px solid var(--secondary-color);
    }
}

@media screen and (min-width:375px) and (max-width: 503px) {
    button.btn-contact2:hover{
        border: 2px solid var(--secondary-color);
    }
}

@media screen and (min-width:300px) and (max-width:375px) {
    button.btn-contact2:hover{
        border: 2px solid var(--secondary-color);
    }
}

#notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #4CAF50;
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    max-width: 300px;
    font-family: Arial, sans-serif;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

#notification.error {
    background: #f44336;
    color: white;
}

#notification.show {
    opacity: 1;
    transform: translateY(0);
}
.hidden {
    display: none;
}
#notification h4 {
    margin: 0 0 5px 0;
    font-size: 16px;
}
#notification p {
    margin: 0;
    font-size: 14px;
}

/*  Footer  */

footer{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/*@media screen and (min-width:1500px) and (max-width: 4000px) {*/
/*    footer{*/
/*        height: 75px;*/
/*    }*/
/*}*/
/*@media screen and (min-width:1024px) and (max-width: 1500px) {*/
/*    footer{*/
/*        height: 50px;*/
/*    }*/
/*}*/
/*@media screen and (min-width:768px) and (max-width: 1024px) {*/
/*    footer{*/
/*        height: 50px;*/
/*    }*/
/*}*/
/*@media screen and (min-width:425px) and (max-width: 768px) {*/
/*    footer{*/
/*        height: 50px;*/
/*    }*/
/*}*/
/*@media screen and (min-width:300px) and (max-width: 425px) {*/
/*    footer{*/
/*        height: 40px;*/
/*    }*/
/*}*/

.baspage_container{
    display: flex;
    flex-direction: column;
    width: 100%;
}

@media screen and (min-width:1900px) and (max-width: 4000px) {
    .baspage_container{
        padding: 20px 0 0 0;
    }
}

@media screen and (min-width:1621px) and (max-width: 1900px) {
    .baspage_container{
        padding: 15px 0 0 0;
    }
}

@media screen and (min-width:1024px) and (max-width: 1621px) {
    .baspage_container{
        padding: 15px 0 0 0;
    }
}

@media screen and (min-width:768px) and (max-width: 1024px) {
    .baspage_container{
        padding: 10px 0 0 0;
    }
}

@media screen and (min-width:425px) and (max-width: 768px) {
    .baspage_container{
        padding: 10px 0 0 0;
    }
}

@media screen and (min-width:300px) and (max-width: 425px) {
    .baspage_container{
        padding: 10px 0 0 0;
    }
}

.baspage{
    background-color: #031d2c;
    gap: 15px;
    padding: 15px 0 15px 0;
}

@media screen and (min-width:637px) and (max-width: 4000px) {
    .baspage {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        justify-content: center;
        align-items: center;
        flex-direction: row;
    }
}

@media screen and (min-width:300px) and (max-width: 637px){
    .baspage {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
}

.logo_footer{
    display: flex;
}

@media screen and (min-width:637px) and (max-width: 4000px){
    .logo_footer{
        margin-left: 15%;
        width: 100%;
    }
}

@media screen and (min-width:300px) and (max-width: 637px){
    .logo_footer{
        width: 85%;
    }
}

img.logo_footer{
    border-radius: 50%;

}

@media screen and (min-width:637px) and (max-width: 4000px){
    img.logo_footer{
        width: 50px;
        height: auto;
    }
}

@media screen and (min-width:300px) and (max-width: 637px){
    img.logo_footer{
        width: 40px;
        height: auto;
    }
}

.footer_onglet_container{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 15px;
}

.copyright_container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    background-color: #01121c;
    padding:15px 0 20px 0;
    gap: 10px;
}

.contact_footer{
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
}

@media screen and (min-width:300px) and (max-width: 637px) {
    .contact_footer{
        margin-top: 15px;
    }
}

h3.contact_footer_title{
    display: flex;
    justify-content: flex-start;
    color: var(--secondary-color);
    font-family: "Roboto", sans-serif;
}

@media screen and (min-width:1900px) and (max-width: 4000px) {
    h3.contact_footer_title{
        font-size: 25px;
    }
}

@media screen and (min-width:1621px) and (max-width: 1900px) {
    h3.contact_footer_title{
        font-size: 20px;
    }
}

@media screen and (min-width:1024px) and (max-width: 1621px) {
    h3.contact_footer_title{
        font-size: 15px;

    }
}

@media screen and (min-width:768px) and (max-width: 1024px) {
    h3.contact_footer_title{
        font-size: 15px;
    }
}

@media screen and (min-width:425px) and (max-width: 768px) {
    h3.contact_footer_title{
        font-size: 15px;
    }
}

@media screen and (min-width:300px) and (max-width: 425px) {
    h3.contact_footer_title{
        font-size: 12px;
    }
}

p.horaire{
    display: flex;
    justify-content: flex-start;
    color: #838383;
    font-family: "Roboto", sans-serif;
    font-size: var(--font-size-xxxs);
}

@media screen and (min-width:1900px) and (max-width: 4000px) {
    p.horaire{
        font-size: 12px;
    }
}

@media screen and (min-width:1621px) and (max-width: 1900px) {
    p.horaire{
        font-size: 12px;
    }
}

@media screen and (min-width:1024px) and (max-width: 1621px) {
    p.horaire{
        font-size: 10px;

    }
}

@media screen and (min-width:768px) and (max-width: 1024px) {
    p.horaire{
        font-size: 8px;
    }
}

@media screen and (min-width:425px) and (max-width: 768px) {
    p.horaire{
        font-size: 8px;
    }
}

@media screen and (min-width:300px) and (max-width: 425px) {
    p.horaire{
        font-size: 6px;
    }
}

a.mailto{
    display: flex;
    justify-content: flex-start;
    color: #c5c5c5;
    font-family: "Roboto", sans-serif;
    margin-top: 20px;
    gap: 5px;
    text-decoration: none;
    transition: 0.2s ease-in-out;
}

@media screen and (min-width:1900px) and (max-width: 4000px) {
    a.mailto{
        font-size: 12px;
    }
}

@media screen and (min-width:1621px) and (max-width: 1900px) {
    a.mailto{
        font-size: 12px;
    }
}

@media screen and (min-width:1024px) and (max-width: 1621px) {
    a.mailto{
        font-size: 10px;

    }
}

@media screen and (min-width:768px) and (max-width: 1024px) {
    a.mailto{
        font-size: 8px;
    }
}

@media screen and (min-width:425px) and (max-width: 768px) {
    a.mailto{
        font-size: 8px;
    }
}

@media screen and (min-width:300px) and (max-width: 425px) {
    a.mailto{
        font-size: 6px;
    }
}

a.mailto:hover{
    color: var(--secondary-color);
}

p.copyright{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    color:#c5c5c5;
    font-family: "Roboto", sans-serif;
    padding: 10px 0 10px 0;
}

a.footer_onglet{
    text-decoration: none;
    color: #c5c5c5;
    font-family: "Roboto", sans-serif;
    font-size: var(--font-size-s);
    background-color:#031d2c;
    white-space: nowrap;
    transition: 0.2s ease-in-out ;
}

a.footer_onglet:hover{
    color: var(--secondary-color);
}

.reseaux_footer{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 100%;
    gap: 15px;
}

a.insta_footer,
a.tiktok_footer,
a.linkedin_footer{
    font-size: 20px;
    transition: transform 0.3s ease-in-out;
}

.reseaux_footer_image,
.reseaux_footer_image_tiktok{
    display: flex;
    width: 25px;
    height: 25px;
}

@media screen and (min-width:637px) and (max-width: 4000px){
    .reseaux_footer_image{
        width: 25px;
        height: 25px;
    }
}

@media screen and (min-width:300px) and (max-width: 637px){
    .reseaux_footer_image{
        width: 17px;
        height: 17px;
    }
}

.reseaux_footer_image_tiktok{
    display: flex;

}

@media screen and (min-width:637px) and (max-width: 4000px){
    .reseaux_footer_image_tiktok{
        width: 33px;
        height: 33px;
    }
}

@media screen and (min-width:300px) and (max-width: 637px){
    .reseaux_footer_image_tiktok{
        width: 25px;
        height: 25px;
    }
}

a.insta_footer:hover,
a.tiktok_footer:hover,
a.linkedin_footer:hover{
    transform: translateY(-5px);
}


@media screen and (min-width:1900px) and (max-width: 4000px) {
    p.copyright,
    a.footer_onglet{
        font-size: 15px;
    }
}

@media screen and (min-width:1621px) and (max-width: 1900px) {
    p.copyright,
    a.footer_onglet {
        font-size: 15px;
    }
}

@media screen and (min-width:1024px) and (max-width: 1621px) {
    p.copyright,
    a.footer_onglet{

        font-size: 12px;

    }
}

@media screen and (min-width:768px) and (max-width: 1024px) {
    p.copyright,
    a.footer_onglet {

        font-size: 10px;
    }
}

@media screen and (min-width:425px) and (max-width: 768px) {
    p.copyright,
    a.footer_onglet {

        font-size: 10px;
    }
}

@media screen and (min-width:300px) and (max-width: 425px) {
    p.copyright,
    a.footer_onglet {
        font-size: 8px;
    }
}