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

* {
    margin: 0; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
}

html {
    min-height: 100%; /*hauteur minimum*/

    /* VARIABLE COULEUR */
    --noir: #282828; /* variable */
    --blanc: #FFFFFF; /* variable */
    --rouge: #F03C3C; /* variable */
    --coquille: #FAF0E6; /* variable */
    --vermeil: #FF002D; /* variable */
    --anglais: #FF2823; /* variable */
    --orange: #FF730A; /* variable */
    --petrole: #00788C; /* variable */
    --turquoise: #23B4BE; /* variable */
    --menthe: #00FFD1; /* variable */
    --menu: #FF002D; /* variable */
    --footer: transparent; /* variable */
    --survol: #78FFEB; /* variable */
    --bouton: #FF730A; /* variable */
    --bordure: #D9D9D9; /* variable */
    --gris-50: #323232; /* variable */
    --gris-100: #646464; /* variable */
    --gris-130: #828282; /* variable */
    --gris-150: #999999; /* variable */
    --gris-180: #B4B4B4; /* variable */
    --gris-200: #C8C8C8; /* variable */
    --gris-220: #DCDCDC; /* variable */
    --gris-235: #EBEBEB; /* variable */

    --degrader: linear-gradient(var(--vermeil) 0%, var(--anglais) 30%, var(--orange) 100%);  /*variable*/
    --inverser: linear-gradient(var(--orange) 0%, var(--anglais) 55%, var(--vermeil) 100%);  /*variable*/

    /*VARIABLE POLICE*/
    --titre: 'montserrat-black'; /*variable*/
    --titre-petit: 'montserrat-extrabold'; /*variable*/
    --autre: 'montserrat-bold'; /*variable*/
    --sous-titre: 'bebas-neue-regular'; /*variable*/
	--texte: 'poppins-regular'; /*variable*/
    --texte-medium: 'poppins-medium'; /*variable*/
    --texte-gras: 'poppins-semi-bold'; /*variable*/
    --texte-bouton: 'poppins-semi-bold'; /*variable*/

    /*VARIABLE TAILLE*/
    --8: 8pt; /*variable*/
    --10: 10pt; /*variable*/
    --11: 11pt; /*variable*/
    --12: 12pt; /*variable*/
    --13: 13pt; /*variable*/
    --14: 14pt; /*variable*/
    --16: 16pt; /*variable*/
    --18: 18pt; /*variable*/
    --20: 20pt; /*variable*/
    --22: 22pt; /*variable*/
    --23: 23pt; /*variable*/
    --24: 24pt; /*variable*/
    --26: 26pt; /*variable*/
    --28: 28pt; /*variable*/
    --30: 30pt; /*variable*/
    --32: 32pt; /*variable*/
    --34: 34pt; /*variable*/
    --36: 36pt; /*variable*/
    --38: 38pt; /*variable*/
    --40: 40pt; /*variable*/
    --42: 42pt; /*variable*/
}

body {
    width: 100%; /*largeur*/
    min-height: 100vh; /*hauteur minimum*/
    margin: 0; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    display: flex; /*apparition des balises*/
    flex-direction: column; /*direction des contenants*/
    color: var(--noir); /*police couleur*/
    background-color: var(--blanc); /*couleur du fond*/
}

main {
    flex: 1; /*rempli l'espace disponible*/
}


/*----------------BALISE----------------*/

section {
    text-align: center; /*texte alignement*/
}

h1, h2, h3, h4 {
    width: 90%; /*largeur*/
    margin: auto; /*marge extérieur*/
    padding: 60px 0px; /*marge intérieur*/
    font-family: var(--titre); /*police type*/
    font-size: var(--38); /*police taille*/
    text-transform: uppercase; /*texte transformer*/
}

h1 {
    padding: 60px 0px 30px 0px; /*marge intérieur*/
}

address, p {
    width: 70%; /*largeur*/
    margin: auto; /*marge extérieur*/
    margin-bottom: 60px; /*marge extérieur bas*/
    font-family: var(--texte); /*police type*/
    font-size: var(--14); /*police taille*/
    font-style: normal; /*police style*/
    line-height: 1.8; /*espace entre ligne*/
    letter-spacing: 0.4pt; /*espace entre lettre*/
    text-align: justify; /*texte alignement*/
    text-justify: inter-word; /*type de justification*/
    color: inherit; /*police couleur*/
}

a {
	text-decoration: none; /*texte decoration*/ 
    transition: color 0.5s; /*transition*/
    color: inherit; /*police couleur*/
}

li {
	list-style: none; /*marqueur style*/
}

button, .bouton {
    width: auto; /*largeur*/
    margin: auto; /*marge extérieur*/
    margin-bottom: 60px; /*marge extérieur bas*/
    padding: 10px 30px; /*marge intérieur*/
    display: inline-block; /*apparition des balises*/
    border: none; /*bordure épaisseur*/
    border-radius: 100px; /*bordure arrondi*/
    font-family: var(--texte-bouton); /*police type*/
    font-size: var(--14); /*police taille*/
    text-align: center; /*texte alignement*/
    text-transform: uppercase; /*texte transformer*/
    cursor: pointer; /*type de curseur*/
    transition: all ease-in-out 0.5s; /*transition*/
    background-color: var(--bouton); /*couleur*/
    color: var(--blanc); /*couleur du texte*/
}

button:hover, .bouton:hover {
    background-color: var(--vermeil); /*couleur*/
}

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

svg {
    width: auto; /*largeur*/
	height: auto; /*hauteur*/
    display: block; /*apparition des balises*/
    flex-shrink: 0; /*reduction du contenant*/
}

.gras {
    font-family: var(--texte-gras); /*police type*/
}


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

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

.degrader svg {
    color: var(--coquille); /*couleur du texte*/
    position: relative; /*type de positionnement*/
    top: 1px; /*position en partant du haut*/
}

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

.coquille svg {
    color: var(--blanc); /*couleur du texte*/
    position: relative; /*type de positionnement*/
    top: 1px; /*position en partant du haut*/    
}

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

.blanc svg {
    color: var(--coquille); /*couleur du texte*/
    position: relative; /*type de positionnement*/
    top: 1px; /*position en partant du haut*/   
}

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

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


/*----------------ADRESSE----------------*/

.lieu {
    width: fit-content; /*largeur*/
    margin: 0px auto 60px auto; /*marge extérieur*/
}

.adresse {
    width: max-content; /*largeur*/
    display: flex; /*apparition des balises*/
    justify-content: center; /*centre horizontalement le contenu*/ 
    align-items: center; /*centre verticalement le contenu*/
}

.adresse:first-child {
    margin-bottom: 30px; /*marge extérieur bas*/
}

.adresse svg {
    width: 80px; /*largeur*/
    margin-right: 50px; /*marge extérieur droite*/
    color: var(--noir); /*couleur du texte*/
}

.adresse address, .adresse p {
    width: 100%; /*largeur*/
    margin-bottom: auto; /*marge extérieur bas*/
    line-height: normal; /*espace entre ligne*/
}

.adresse span {
    font-family: var(--texte-gras); /*police type*/
}


/*----------------GRILLE----------------*/

.grille {
    margin: auto; /*marge extérieur*/
    padding: 80px 0px; /*marge intérieur*/
    display: grid; /*apparition des balises*/
    justify-content: center; /*centre horizontalement le contenu*/
    align-items: stretch; /*centre verticalement le contenu*/ 
    grid-gap: 40px; /*espace entre les éléments de la grille*/
    grid-template-columns: repeat(auto-fit, 350px); /*colonnes égales et s'ajuste automatiquement*/
}

.grille article {
    display: flex; /*apparition des balises*/
    flex-direction: column; /*direction des contenants*/
    border-radius: 30px; /*bordure arrondi*/
    border: 2px solid var(--orange); /*bordure tout en un*/
    overflow: hidden; /*dépassement du contenant*/
    box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.1); /*bordure ombre*/
}

.grille article img {
    width: 100%; /*largeur*/
    height: 260px; /*hauteur*/
    display: block; /*apparition des balises*/
    object-fit: cover; /*ajuster à la taille de son contenant*/
    object-position: center; /*position du contenu*/
    border-bottom: 2px solid var(--orange); /*bordure bas tout en un*/
}

.grille article h2 {
    width: 100%; /*largeur*/
    min-height: 65px; /*hauteur mini*/
    margin: 20px auto; /*marge extérieur*/
    padding: 0px; /*marge intérieur*/
    display: flex; /*apparition des balises*/
    justify-content: center; /*centre horizontalement le contenu*/ 
    align-items: center; /*centre verticalement le contenu*/
    text-align: center; /*texte alignement*/
    font-size: var(--20); /*police taille*/
}

.grille article p {
    width: 85%; /*largeur*/
    margin: 0 auto 30px auto; /*marge extérieur*/
    font-size: 11pt; /*police taille*/
    line-height: normal; /*espace entre ligne*/
}

.grille article button, article .bouton {
    margin: auto; /*marge extérieur*/
    margin-bottom: 30px; /*marge extérieur bas*/
}