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

html {
	--couleur-noir: #000000; /*variable*/
    --couleur-noir-fond: #0A0A0A; /*variable*/
	--couleur-blanc: #FFFFFF; /*variable*/
    --couleur-blanc-survol: #50D2E6; /*variable*/
    --couleur-rouge: #FF0000; /*variable*/
    --couleur-gris-clair: #E1E1E1; /*variable*/
    --couleur-gris-foncer: #282828; /*variable*/
    --couleur-gris-foncer-ligne: #3C3C3C; /*variable*/

    --couleur-after-blanc: linear-gradient(to top, #FFFFFF, transparent);  /*variable*/
    --couleur-after-gris-clair: linear-gradient(to top, #E1E1E1, transparent);  /*variable*/


    --couleur-vermeil: #FF002D; /*variable*/
    --couleur-vermeil-foncer: #D20532; /*variable*/
    --couleur-rouge-anglais: #FF2823; /*variable*/
    --couleur-coquille-d-oeuf: #FAEBE6; /*variable*/
    --couleur-orange: #FF710B; /*variable*/
    --couleur-degrader-peche: linear-gradient(var(--couleur-orange) 0%, var(--couleur-rouge-anglais) 55%, var(--couleur-vermeil) 90%);  /*variable*/
}


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

html {
	--police-base: 'Poppins-Regular'; /*variable*/
	--police-titre-principal: 'Montserrat-Black'; /*variable*/
    --police-titre: 'Montserrat-Black'; /*variable*/
	--police-menu: 'Poppins-Medium'; /*variable*/
    --police-bouton: 'Montserrat-SemiBold'; /*variable*/
    --police-evenement: 'Montserrat-Black'; /*variable*/
}

/*----------------COULEUR SECTION----------------*/

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

.gris, .gris svg {
    background-image: url(../IMG/Image/Bruit.png); /*image de fond*/
}

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

.noir svg {
    color: var(--couleur-noir-fond); /*couleur*/
}




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

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

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

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


/*----------------COULEUR SVG----------------*/

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

.vermeil svg {
    color: var(--couleur-vermeil); /*couleur*/;
}

.coquille-d-oeuf svg {
    color: var(--couleur-coquille-d-oeuf); /*couleur*/;
}

.orange {
    color: var(--couleur-orange); /*couleur*/;
}


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

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

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: var(--couleur-noir); /*couleur du fond*/
}


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

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


/*----------------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: 0px; /*marge intérieur*/
    font-family: var(--police-titre); /*police type*/
    font-size: 28pt; /*police taille*/
    text-align: center; /*texte alignement*/
    text-transform: uppercase; /*texte transformer*/
}

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


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

@media all and (max-width: 800px) {
    .principal {
        /*font-size: 26pt; /*police taille*/
        font-size: 200%; /*police taille*/
    }
    .long {
        /*font-size: 22pt; /*police taille*/
        font-size: 160%; /*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*/
    }
}

@media all and (max-width: 800px) {
    p, address {
        letter-spacing: 0pt; /*espace entre lettre*/
    }
}


/*----------------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*/
}

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

.degrader-peche button {
    background-color: var(--couleur-orange);
    color: var(--couleur-blanc);
}

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

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


/*----------------CARTE----------------*/

#carte {
    width: 100%; /*largeur*/
    height: 500px; /*hauteur*/
    margin: auto; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    z-index: 0; /*position au dessus ou au dessous*/
}

/*----------------CARTE RESPONSIVE----------------*/

@media screen and (max-width: 1000px) {
    #carte {
        height: 400px; /*hauteur*/
    }
}