@media only screen and (max-width: 500px) {
    .corps-modal {
        flex-direction: column;
        justify-content: center;
    }

    .partie-gauche {
        flex-direction: row !important;
        width: 100% !important;
        justify-content: space-around;
    }

    .partie-droite {
        width: 100% !important;
    }

    .partie-gauche > button {
        width: 45% !important;
    }
}

@media only screen and (max-width: 900px) {
    .box-top-header {
        background-color: transparent;
        width: 90%;
        margin: 15px;
        border: none;
    }

    .logo-header {
        background-color: rgba(128, 128, 128, 0.512);
        border-radius: 25px;
        z-index: 100 !important;
        width: 50px;
        height: 50px;
    }

    .image-accueil {
        height: 80%;
        padding-top: 4px;
    }

    #cercle {
        display: none !important;
    }

    .navbar {
        display: none !important;
    }

    .login-user {
        display: none;
    }

    .box-realisation > h3 {
        font-size: xx-large !important;
    }

    .container-center-header {
        align-items: center !important;
        height: auto !important;
        margin-bottom: 60px;
        padding-top: 50px !important;
    }
    .container-center-header > h2 {
        font-size: 2rem !important;
        padding: 30px 0 10px 0;
        text-transform: uppercase;
        text-align: center;
    }

    .box-text-header {
        margin-bottom: 50px;
        justify-content: center;
        align-items: center;
        width: 90% !important;
    }

    .menu-header {
        position: initial !important;
    }

    .box-titre {
        height: auto !important;
        padding-bottom: 50px;
    }

    .box-text-header > p {
        font-size: 1rem;
        width: 90%;
    }

    .menu-header {
        width: 30%;
        font-size: small;
        margin-top: 10px !important;
        margin-left: 37% !important;
    }

    .menu-derouleur {
        width: 20%;
    }

    .menu-derouleur > h2 {
        font-size: x-small;
        text-align: center;
        margin-bottom: 5px;
    }

    .menu-derouleur > p {
        font-size: xx-small;
    }

    .box-titre {
        min-height: 600px !important;
        flex-direction: column;
        justify-content: center;
    }

    .box-left > h3 {
        font-size: xx-large !important;
        position: relative !important;
        left: -10px !important;
        width: 370px !important;
        text-align: center;
    }

    .box-left {
        display: flex;
        width: 100% !important;
        flex-direction: column;
        justify-content: center;
    }

    .box-left > h4 {
        font-size: medium !important;
        margin-left: 10px !important;
        margin-top: 20px !important;
    }

    .box-left > p {
        font-size: small !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
    }

    .right {
        flex-direction: column !important;
        height: 550px !important;
        width: 100% !important;
        justify-content: start !important;
    }

    .center-box-1 {
        margin-top: 2%;
    }

    .center-box-2 {
        margin-top: 20%;
    }

    .box-right {
        height: 80% !important;
        width: 80% !important;
        position: absolute !important;
    }

    .box-right {
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }

    .text-box {
        height: 200px !important;
    }
    
    .box-right.visible {
        opacity: 1 !important;
    }

    .box-img-text > h3 {
        font-size: large !important;
        text-align: center;
    }

    .text-left > h3 {
        font-size: xx-large !important;
        padding: 0 !important;
        position: relative !important;
        width: 370px !important;
        text-align: center;
    }

    .text-left > h4 {
        font-size: medium !important;
        padding: 0 !important;
    }

    .text-left > p {
        font-size: small !important;
        padding: 0 !important;
    }

    .box-img-text > p {
        font-size: x-small !important;
        width: 60%;
    }

    .box-img-text > a {
        margin: 0 !important;
        top: 10px !important;
        position: relative !important;
        font-size: small !important;
    }

    .border-top-orange {
        border-top: solid 8px #E37611 !important;
    }

    .no-border-top-orange {
        border-bottom: none !important;
    }

    .input-submit {
        align-items: center !important;
    }

    .formulaire {
        width: 90% !important;
        margin-left: 0 !important;
    }

    .display-column {
        justify-content: center;
        align-items: center;
        width: 100% !important;
    }

    .box-titre > h3 {
        font-size: xx-large !important;
    }

    .box-imput {
        flex-direction: column;
        height: 60px !important;
    }

    .box-imput > label {
        font-size: large !important;
        width: 90% !important;
    }

    .box-imput > input {
        width: 95% !important;
        font-size: large !important;
    }

    .box-imput > select {
        font-size: medium !important;
        width: 95% !important;
    }

    .box-imput > textarea  {
        font-size: small !important;
        width: 95% !important;
    }

    .box-center {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .box-center > h5 {
        margin-left: 0 !important;
    }

    .box-center > p {
        margin-left: 0 !important;
    }

    .example-wrapper > form {
        z-index: 90 !important;
    }

    .menu-none {
        display: none !important;
    }

    .footer {
        width: 90% !important;
        z-index: 90 !important;
    }

    .footer > div {
        width: 23% !important;
    }

    .footer > div > a {
        font-size: medium !important;
    }

    .modal-cookies {
        height: 35% !important;
    }

    .partie-gauche {
        margin: 0 !important;
        font-size: x-small !important;
        width: 70px;
    }

    .partie-droite > p {
        font-size: xx-small !important;
    }
}

@media only screen and (max-width: 999px) and (min-width: 501px) { 
   #nav {
        display: none !important;
   }

   #navbar {
        display: flex !important;
        width: 90% !important;
   }

   #navbar > nav {
        justify-content: center !important;
   }

   .box-top-header {
        background-color: #2A2832;
        width: 100% !important;
        height: 50px;
        margin: 0 !important;
        border-bottom: solid 1px white;
   }

   .login-user {
        display: none !important;
   }

   #logo-header {
        justify-content: center !important;
        align-items: center !important;
        height: 100% !important;
        width: 10% !important;
        background-color: transparent !important;
   }

   .liens-menu {
        font-size: x-small !important;
        vertical-align: middle !important;
   }

   .on-message {
        left: 3.8rem !important;
        top: -5px !important;
        font-size: xx-small !important;
   }

   .box-center-header {
        height: 110vh !important;
   }

   .menu-derouleur {
        display: none !important;
   }

   .right {
        display: none !important;
   }

   .menu-none {
        display: flex !important;
   }

   .customers {
        font-size: xx-small !important;
   }

   .modal-cookies {
        height: 120px !important;
    }
}

@media only screen and (max-width: 1399px) and (min-width: 1000px) { 
    .login-user {
        display: none !important;
   }

   #logo-header {
        width: 15% !important;
   }

   #navbar {
        width: 85% !important;
   }

   .liens-menu {
        font-size: small !important;
   }

   .on-message {
        left: 5rem !important;
   }

   .right {
        flex-direction: column !important;
   }

   .box-right {
        width: 75% !important;
        height: 31% !important;
   }

   .large-box {
        height: 45% !important;
   }

   .nos-client {
        display: none !important;
   }

   .box-top-header {
        height: 10% !important;
   }

   .container-center-header {
        padding-top: 80px;
   }

   .container-center-header h2 {
        font-size: 3em !important;
        padding: 0 0 0 161px;
   }

   .menu-derouleur h2 {
        font-size: medium;
        text-align: center;
   }

   .menu-derouleur p {
        font-size: small;
   }

   .menu-header {
        margin-top: 15px;
        font-size: medium;
        width: 100px;
   }

   .box-text-header p {
        font-size: medium;
   }

   .modal-cookies {
        height: 35%;
   }

   .partie-droite p {
        font-size: small;
   }

   .box-img-text p {
        margin: 0 10px !important;
   }

   .formulaire {
        width: 62% !important;
   }
}