/*----------------VARIABLE----------------*/

html {
	--longueur: 55%; /*variable*/
}

@media all and (max-width: 1500px) {
    html {
        --longueur: 70%; /*variable*/
    }
}

@media all and (max-width: 1000px) {
    html {
        --longueur: 85%; /*variable*/
    }
}

/*----------------FOND----------------*/

/*présentation*/
.fond:nth-of-type(1) {
    padding: 0px; /*marge intérieur*/
    padding-top: 175px; /*marge intérieur haut*/
}

/*gravure*/
.fond:nth-of-type(3) {
    padding: 175px 0px 25px 0px; /*marge intérieur*/
}

/*bois*/
.fond:nth-of-type(5) {
    padding: 175px 0px 200px 0px; /*marge intérieur*/
}

/*----------------FOND RESPONSIVE----------------*/

@media all and (max-width: 600px) {
    /*présentation*/
    .fond:nth-of-type(1) {
        padding: 125px 0px 50px 0px; /*marge intérieur*/
    }

    /*gravure*/
    .fond:nth-of-type(3) {
        padding: 100px 0px 150px 0px; /*marge intérieur*/
    }

    /*bois*/
    .fond:nth-of-type(5) {
        padding: 100px 0px 150px 0px; /*marge intérieur*/
    }

    /*galerie*/
    .fond:nth-of-type(7) {
        padding: 100px 0px 50px 0px; /*marge intérieur*/
    }
}

/*----------------PRESENTATION----------------*/

.presentation {
    width: var(--longueur); /*largeur*/
    margin: auto; /*marge extérieur*/
    padding: 50px 0px 40px 0px; /*marge intérieur*/
}

/*----------------IMAGE----------------*/

.planchette {
	width: 80%; /*largeur*/
	margin: auto; /*marge extérieur*/
	padding: 0px; /*marge intérieur*/
}

.planchette svg {
	width: 100%; /*largeur*/
	height: 500px; /*hauteur*/
	margin: 0px; /*marge extérieur*/
	padding: 0; /*marge intérieur*/
	color: var(--couleur-blanc); /*couleur image*/
}

/*----------------IMAGE RESPONSIVE----------------*/

@media all and (max-width: 1000px) {
    .planchette {
        width: 95%; /*largeur*/
    }
}

@media all and (max-width: 600px) {
    .planchette svg {
        height: 200px; /*hauteur*/
    }
}


/*----------------PRODUIT----------------*/

.produit {
    width: var(--longueur); /*largeur*/
    margin: auto; /*marge extérieur*/
    margin-top: 50px; /*marge extérieur haut*/
    padding: 0; /*marge intérieur*/
    display: flex; /*apparition des balises*/
    flex-direction: row; /*direction des contenants*/
    justify-content: space-between; /*centre horizontalement le contenu*/ 
}

.produit img {
    --image: 400px; /*variable*/
    width: var(--image); /*largeur*/
    height: var(--image); /*hauteur*/
    margin: auto 0px; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    border-radius: var(--image); /*bordure arrondi*/
    object-fit: cover; /*ajuster à la taille de son contenant*/  
	object-position: center; /*position du contenu*/
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4); /*bordure ombre*/
}

.produit .paragraphe {
    width: 45%; /*largeur*/
    margin: auto 0; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
}

.produit .texte {
    width: 100%; /*largeur*/
    height: auto; /*hauteur*/
    margin: auto; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
}

/*----------------PRODUIT RESPONSIVE----------------*/

@media all and (max-width: 1200px) {
    .produit {
        width: 100%; /*largeur*/
        flex-direction: column; /*direction des contenants*/
    }
    .produit img {
        width: 100%; /*largeur*/
        height: 400px; /*hauteur*/
        border-radius: 0px; /*bordure arrondi*/
        order: -1; /*définit l'ordre*/
    }
    .produit .paragraphe {
        width: var(--longueur); /*largeur*/
        margin: auto; /*marge extérieur*/
        margin-top: 75px; /*marge extérieur haut*/
    }
    .produit .texte {
        height: 185px; /*hauteur*/
    }
}

@media all and (max-width: 600px) {
    .produit img {
        height: 250px; /*hauteur*/
    }
}


/*----------------GALERIE----------------*/

.galerie {
    max-width: 1120px; /*largeur*/
    margin: 0px auto; /*marge extérieur*/
}

.galerie li:nth-child(n+7) {
	display: none; /*apparition des balises*/
}

/*----------------GALERIE RESPONSIVE----------------*/

@media all and (max-width: 1000px) {
    .galerie li:nth-child(n+4) {
        display: none; /*apparition des balises*/
    }    
}