body{
    font-family: roboto;
    margin: 0;
    padding:0;
}

/* Navigation */

nav{
    height: 100px;
    padding-left: 45px;
    padding-top: 10px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #cecece;
}

nav a{
    text-decoration: none;
    color: black;
}

nav a:hover{
    text-decoration: underline;
}

.logo-nav-box{
    padding-right: 250px;
}

.accueil-nav-box a{
    padding-right: 10px;
}

.panier-nav-box{
    padding-left: 210px;
}

.panier-nav-box a{
    padding-right: 10px;
}

/* Acceuil */

.drone-box-debut-page{
    padding-left: 50px;
    display: grid;
    grid-template-columns: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
    grid-template-rows: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
}

.drone-box-debut-page h1{
    grid-column: 1 / 12;
    grid-row: 1 / 6;
    font-size: 64px;
}

.drone-box-debut-page p{
    grid-row: 7 / 11;
    grid-column: 1 / 12;
    font-size: 20px;
    color: #828282;
}

.drone-box-debut-page img{
    grid-column: 12 / 23;
    grid-row: 2 / 10;
}

.chatBBCNews{
    width: 600px;
    height: 382px;
    padding-left: 30px;
}

.produit-box-debut-page{
    display: grid;
    grid-template-columns: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
    grid-template-rows: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
    padding-left: 50px;
}

.produit-box-debut-page img{
    width: 350px;
    height: 350px;
}

.produit-box-debut-page h2{
    grid-row: 1 / 2;
    grid-column: 1 / 24;
    font-size: 30px;
}

.produit-box-debut-page div{
    grid-row: 3 / 11;
}

.produit-chien{
    grid-column: 1 / 7;
}

.produit-chat{
    grid-column: 9 / 14;
}

.produit-cheval{
    grid-column: 17 / 23;
}

.produit-box-debut-page div h2{
    font-size: 20px;
}

.produit-box-debut-page div p{
    font-size: 19px;
    color: #828282;
}

.qui-somme-nous-box{
    display: grid;
    grid-template-columns: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
    grid-template-rows: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
    padding-left: 50px;
    padding-top: 50px;
}

.qui-somme-nous-box h2{
    grid-column: 1 / 8;
    grid-row: 1 / 2;
    font-size: 35px;
}

.but-box{
    grid-row: 3 / 5;
    grid-column: 1 / 3;
}

.creation-box{
    grid-row: 5 / 7;
    grid-column: 1 / 3;
}

.respect-box{
    grid-row: 7 / 9;
    grid-column: 1 / 9;
}

.qui-somme-nous-box img{
    width: 500px;
    height: 500px;
    grid-column: 14 / 24;
    grid-row: 1 / 11;
    padding-top: 25px;
}

.qui-somme-nous-box p{
    color: #828282;
}

.avis-box{
    display: grid;
    grid-template-columns: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
    grid-template-rows: 50px 50px 50px 50px 50px 50px;
    padding-left: 50px;
}

.avis-box h1{
    grid-column: 1 / 15;
}

.avis-box div{
    border: 1px #cecece solid;
    border-radius: 12px;
    align-items: center;
    padding-left: 20px;
}

.avis-box img{
    width: 45px;
    height: 45px;
    border-radius: 100px;
    font-size: 25px;
    margin-right: 8px;
}

.avis-box p{
    display: flex;
    align-items: center;
}

.avis-box-1{
    grid-row: 3 / 6;
    grid-column: 1 / 8;
}

.avis-box-2{
    grid-row: 3 / 6;
    grid-column: 9 / 16;
}

.avis-box-3{
    grid-row: 3 / 6;
    grid-column: 17 / 24;
}

/* Footer */

footer{
    display: grid;
    grid-template-columns: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
    border-top: 1px solid #cecece;
    padding-left: 50px;
}

footer p{
    font-size: 20px;
    grid-column: 1 / 5;
    grid-row: 1 / 2;
}

.footer-a-acceuil{
    grid-column: 11 / 12;
    grid-row: 1 / 2;
    padding-top: 25px;
}

.footer-a-photo{
    grid-column: 11 / 14;
    grid-row: 2 / 3;
    padding-top: 25px;
}

.footer-a-modelePrefabriquer{
    grid-column: 15 / 19;
    grid-row: 1 / 2;
    padding-top: 25px;
}

.footer-a-about{
    grid-column: 15 / 19;
    grid-row: 2 / 3;
    padding-top: 25px;
}

.footer-a-panier{
    grid-column: 19 / 20;
    grid-row: 1 / 2;
    padding-top: 25px;
    padding-left: 10px;
}

.footer-a-connexion{
    grid-column: 19 / 21;
    grid-row: 2 / 3;
    padding-top: 25px;
    padding-left: 10px;
}

footer a{
    text-decoration: none;
    color: #828282;
}

footer a:hover{
    text-decoration: underline;
}

footer i{
    color: #828282;
    grid-row: 3 / 4;
}

/* Photo */

.main-box-photo{
    display: grid;
    grid-template-columns: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
    grid-template-rows: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
    padding-left: 50px;
    padding-top: 25px;
}

.photo-h1{
    font-size: 40px;
    grid-column: 9 / 17;
    grid-row: 1 / 2;
    padding-left: 25px;
}

.photo-p{
    color: #828282;
    font-size: 19px;
    grid-column: 10 / 16;
    grid-row: 2 / 3;
    padding-top: 25px;
}

.drop-photo-box{
    border: 5px black dashed;
    border-radius: 15px;
    width: 650px;
    height: 425px;
    grid-column: 6 / 20;
    grid-row: 4 / 13;
    margin-left: 25px;
    cursor: pointer;
}

.photo-button{
    grid-row: 14 / 17;
    grid-column: 8 / 18;
    width: 500px;
    height: 50px;
    background-color: #000000;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.photo-button:hover{
    background-color: white;
    color: black;
    border: 2px black solid;
}

/* Modèle Préfabriquer */

.main-modele-prefabriquer-box{
    display: grid;
    grid-template-columns: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
    grid-template-rows: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
    padding-left: 100px;
    padding-top: 50px;
}

.modele-prefabriquer-h1{
    grid-column: 1 / 8;
}

.modele-prefabriquer-box-1{
    grid-column: 1 / 7;
    grid-row: 3 / 12;
}

.modele-prefabriquer-box-2{
    grid-column: 15 / 21;
    grid-row: 3 / 12;
}

.modele-prefabriquer-box-3{
    grid-column: 1 / 7;
    grid-row: 13 / 21;
}

.modele-prefabriquer-box-4{
    grid-column: 15 / 21;
    grid-row: 13 / 21;
}

.main-modele-prefabriquer-box div p{
    color: #828282;
    padding-top: 10px;
}

.main-modele-prefabriquer-box div button{
    width: 350px;
    height: 50px;
    background-color: white;
    color: black;
    border: 2px black solid;
    border-radius: 10px;
    cursor: pointer;
}

.main-modele-prefabriquer-box div button:hover{
    background-color: black;
    color: white;
    border: none;
}

/* A propos */

.main-a-propos{
    display: grid;
    grid-template-columns: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
    grid-template-rows: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
    padding-left: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
}

.a-propos-box{
    grid-column: 1 / 12;
    grid-row: 1 / 8;
}

.a-propos-box h1{
    font-size: 35px;
}

.a-propos-box h3{
    color: #828282;
}

/* Nous Contacter */

.nous-contacter-box{
    grid-row: 8 / 20;
    grid-column: 1 / 8;
    display: grid;
    grid-template-columns: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
    grid-template-rows: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
}

.nous-contacter-box input{
    height: 40px;
    border-radius: 8px;
    border: 1px solid #E0E0E0;
}

.nous-contacter-box h2{
    grid-column: 1 / 8;
    grid-row: 1 / 2;
}

.nous-contacter-box-prenom{
    grid-row: 2 / 4;
    padding-top: 10px;
}

.nous-contacter-box-prenom input{
    width: 230px;
    padding-left: 10px;
}

.nous-contacter-box-nom-de-famille{
    grid-column: 7 / 12;
    grid-row: 2 / 4;
    padding-top: 10px;
}

.nous-contacter-box-nom-de-famille input{
    width: 230px;
    padding-left: 10px;
}

.nous-contacter-box-email{
    grid-row: 4 / 6;
    grid-column: 1 / 12;
    padding-top: 10px;
}

.nous-contacter-box-email input{
    width: 530px;
    padding-left: 10px;
}

.nous-contacter-box-message{
    grid-column: 1 / 12;
    grid-row: 6 / 11;
    padding-top: 10px;
}

.nous-contacter-box-message textarea{
    width: 530px;
    height: 150px;
    padding-left: 10px;
    padding-top: 10px;
    border-radius: 8px;
    border: 1px solid #E0E0E0;
    text-decoration: none;
    resize: none;
}

.nous-contacter-box button{
    grid-row: 11 / 12;
    width: 543px;
    height: 50px;
    border: none;
    border-radius: 10px;
    background-color: #000000;
    color: white;
    cursor: pointer;
}

.nous-contacter-box button:hover{
    background-color: white;
    color: black;
    border: 2px black solid;
}

/* Panier */

.main-panier{
    display: grid;
    grid-template-columns: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
    grid-template-rows: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
    padding-left: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
}

.main-panier h1{
    grid-column: 1 / 3;
}

.panier-box{
    grid-row: 3 / 20;
    display: grid;
    grid-template-columns: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
    grid-template-rows: 50px 50px 50px 50px 50px 50px 50px 50px;
}

.panier-box h3{
    grid-column: 10 / 11;
    font-size: 25px;
}

.panier-box p{
    grid-row: 2 / 3;
    grid-column: 10 / 14;
    padding-top: 10px;
    color: #828282;
}

.panier-box button{
    grid-row: 8 / 9;
    width: 400px;
    height: 50px;
    border: none;
    border-radius: 10px;
    background-color: #000000;
    color: white;
    cursor: pointer;
}

.panier-box button:hover{
    background-color: white;
    color: black;
    border: 2px black solid;
}

/* Connexion */

.main-connexion{
    display: grid;
    grid-template-columns: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
    grid-template-rows: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
    padding-left: 50px;
    padding-top: 25px;
    margin-bottom: 50px;
}

.main-connexion h1{
    grid-column: 11 / 14;
    margin-left: 25px;
}

.connexion-box{
    grid-row: 3 / 12;
    grid-column: 8 / 25;
    display: flex;
    width: 500px;
    height: 400px;
    border: 2px solid black;
    border-radius: 15px;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    align-items: center;
}

.connexion-box input{
    width: 400px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #828282;
    padding-left: 10px;
}

.connexion-box-button{
    width: 400px;
    height: 50px;
    border: none;
    border-radius: 10px;
    background-color: #000000;
    color: white;
    cursor: pointer;
}

.connexion-box button:hover{
    background-color: white;
    color: black;
    border: 2px black solid;
}

/* Inscription */

.main-inscription{
    display: grid;
    grid-template-columns: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
    grid-template-rows: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
    padding-left: 50px;
    padding-top: 25px;
    margin-bottom: 50px;
}

.main-inscription h1{
    grid-column: 11 / 14;
    margin-left: 25px;
}

.inscription-box{
    grid-row: 3 / 12;
    grid-column: 7 / 25;
    display: flex;
    width: 600px;
    height: 700px;
    border: 2px solid black;
    border-radius: 15px;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    align-items: center;
}

.inscription-box input{
    width: 400px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #828282;
    padding-left: 10px;
}

.inscription-box button{
    width: 400px;
    height: 50px;
    border: none;
    border-radius: 10px;
    background-color: #000000;
    color: white;
    cursor: pointer;
}

.inscription-box button:hover{
    background-color: white;
    color: black;
    border: 2px black solid;
}

@media screen and (min-width: 1800px) {

    .drone-box-debut-page {
        padding-left: 50px;
        display: grid;
        grid-template-columns: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
        grid-template-rows: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
    }

    .drone-box-debut-page h1{
        grid-column: 3 / 15;
        grid-row: 1 / 7;
        font-size: 68px;
    }

    .drone-box-debut-page p{
        grid-row: 6 / 9;
        grid-column: 3 / 14;
        font-size: 25px;
        color: #828282;
        padding-top: 50px;
    }

    .drone-box-debut-page img{
        grid-column: 19 / 32;
        grid-row: 2 / 10;
    }

    .panier-nav-box{
        padding-left: 500px;
    }

    .logo-nav-box{
        padding-right: 600px;
    }

    .chatBBCNews{
        width: 779px;
        height: 400px;
    }

}