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

html {
    --couleur-blanc: #FFFFFF; /*variable*/
    --couleur-blanc-casser: #FFFAE6; /*variable*/
    --couleur-noir: #0F0F0F; /*variable*/
    --couleur-noir-profond: #000000; /*variable*/
    --couleur-rouge: #FF0000; /*variable*/
    --couleur-beige: #FFF7C5; /*variable*/
    --couleur-rouge-tomate: #E30514; /*variable*/
    --couleur-rouge-foncer: #C30014; /*variable*//
}


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

html {
	--police-menu: 'outfit-medium'; /*variable*/
    --police-titre: 'Blacksword'; /*variable*/
    --police-titre-principal: 'Blacksword'; /*variable*/
    --police-base: 'Poppins-Italic'; /*variable*/
    --police-bouton: 'Poppins-Italic'; /*variable*/
}


/*----------------GÉNÉRAL----------------*/

html {
    height: 100%; /*hauteur*/
    width: 100%; /*largeur*/
}

body {
    width: 100%; /*largeur*/
    height: 100%; /*hauteur*/
    margin: 0; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    display: flex; /*type de positionnement*/ 
	flex-direction: column; /*direction des contenants*/
    background-color: #000000; /*couleur du fond*/
}

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

.fond {
    width: 100%; /*largeur*/
    margin: auto; /*marge extérieur*/
    padding: 0px; /*marge intérieur*/
    text-align: center; /*texte alignement*/
}

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

.noir {
    background-color: var(--couleur-noir); /*couleur du fond*/
    color: var(--couleur-blanc); /*couleur du texte*/
}

.noir svg {
    color: var(--couleur-noir-profond); /*couleur du texte*/
}

.blanc {
    background-color: var(--couleur-blanc-casser); /*couleur du fond*/
    color: var(--couleur-noir); /*couleur du texte*/
}

.blanc svg {
    color: var(--couleur-blanc-casser); /*couleur du texte*/
}

.bois {
    background-image: url(../IMG/Image/Bois.jpg); /*image de fond*/
    background-size: cover; /*image de fond taille*/ 
    color: var(--couleur-noir); /*couleur du texte*/
}

.bois svg {
    background-image: url(../IMG/Image/Bois.jpg); /*image de fond*/
}

.rouge {
    color: red; /*couleur du texte*/
}

.beige {
    background-color: var(--couleur-beige); /*couleur du fond*/
    color: var(--couleur-noir); /*couleur du texte*/
}

.beige svg {
    color: var(--couleur-beige); /*couleur du texte*/
}

.tomate {
    background-color: var(--couleur-rouge-tomate); /*couleur du fond*/
    color: var(--couleur-blanc); /*couleur du texte*/
}

.tomate svg {
    color: var(--couleur-rouge-tomate); /*couleur du texte*/
}

.rouge-foncer {
    background-color: var(--couleur-rouge-foncer); /*couleur du fond*/
    color: var(--couleur-blanc); /*couleur du texte*/
}

.rouge-foncer svg {
    color: var(--couleur-rouge-foncer); /*couleur du texte*/
}



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

@media all and (max-width: 1200px) {
    .bois {
        background-size: 200%; /*image de fond taille*/ 
    }
}


@media all and (max-width: 800px) {
    .bois {
        background-size: 400%; /*image de fond taille*/ 
    }
}


/*----------------SEPARATION----------------*/

.separation {
    width: 100%; /*largeur*/
    margin: 0; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    position: relative; /*type de positionnement*/
}

.separation svg {
    width: 100%; /*largeur*/
    margin: 0; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    position: absolute; /*type de positionnement*/
    top: -1px; /*position en partant du haut*/
}

.inverser svg {
    top: initial; /*position en partant du haut*/
    bottom: -1px; /*position en partant du haut*/
    transform: scale(-1) /*transforme*/
}


/*----------------TITRE----------------*/

.titre {
    width: 85%; /*largeur*/
    margin: auto; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    font-family: var(--police-titre); /*police type*/
    font-size: 20pt; /*police taille*/
    text-align: center; /*texte alignement*/
    text-transform: capitalize; /*texte transformer*/
    letter-spacing: 0.6pt; /*espace entre lettre*/
}

.principal {
    font-family: var(--police-titre-principal); /*police type*/
    font-size: 60pt; /*police taille*/
    font-weight: normal; /*police poids*/ 
}

/*----------------TITRE RESPONSIVE----------------*/

@media all and (max-width: 800px) {
    .titre {
        font-size: 16pt; /*police taille*/
    }
    .principal {
        font-size: 40pt; /*police taille*/
    }
}



/*----------------TEXTE----------------*/

p, address {
    margin: auto; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    font-family: var(--police-base); /*police type*/
    font-size: 14pt; /*police taille*/
    font-style: normal; /*police style*/
    text-align: justify; /*texte alignement*/
    letter-spacing: 0.6pt; /*espace entre lettre*/
    line-height: 2; /*espace entre ligne*/
}

.italique {
	font-style: italic;
}


/*----------------TEXTE RESPONSIVE----------------*/

@media all and (max-width: 1000px) {
    p, address {
        font-size: 12pt; /*police taille*/
    }
}


/*----------------BOUTON----------------*/

button {
    width: auto; /*largeur*/
    margin: auto; /*marge extérieur*/
    padding: 13px 25px; /*marge intérieur*/
    border-width: 0; /*bordure épaisseur*/
    border-radius: 100px; /*bordure arrondi*/
    font-family: var(--police-bouton); /*police type*/
    font-size: 14pt; /*police taille*/
    text-align: center; /*texte alignement*/
    text-transform: uppercase; /*texte transformer*/
    letter-spacing: 0.2pt; /*espace entre lettre*/
    cursor: pointer; /*type de curseur*/
    transition: transform 0.6s; /*transiton*/
    color: var(--couleur-blanc);
    background-color: var(--couleur-noir);
}

button:hover {
    transform: scale(1.1); /*transforme*/    
}

/*----------------BOUTON RESPONSIVE----------------*/

@media all and (max-width: 1000px) {
    button {
        font-size: 12pt; /*police taille*/
    }
}