/***********************************/
/********* Styles généraux *********/
/***********************************/

:root {
    /* TAILLE */
    --taille-tres-petit : 10px;
    --taille-petit : 16px;
    --taille-moyen : 18px;
    --taille-grand : 20px;
    --taille-tres-grand : 40px;
    
    /* ESPACEMENT */
    --espace-petit: 10px;
    --espace-moyen : 20px;
    --espace-grand : 40px;
    --espace-tres-grand : 50px;

    /* COULEUR */
    --couleur-blanc : #fff;
    --couleur-noir : #000;
    --couleur-vert : #18392b;
    --couleur-vertClair : #5d6842;
    --couleur-creme : #b4a485;
    --couleur-gris : #706b5c;

    /* DEGRADE */
    --degrade-sous-texte-top: linear-gradient(to top, #000000c3, #00000000 75%);
    --degrade-sous-texte-left: linear-gradient(to left, #000000c3, #00000000 60%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

img {
    max-width: 100%;
}

html {
    font-family:'Josefin Sans', sans-serif;
    font-kerning: normal;
}

html {
    scroll-behavior: smooth;
    max-width: 1920px;
    margin: 0 auto;
}

a {
    padding: 0;
    margin: 0;
    text-decoration: none;
}

p {
    display: block;
    font-size: clamp(14px , 2.5vw, var(--taille-moyen));
}

strong {
    font-size: clamp(var(--taille-petit), 2.5vw, var(--taille-moyen));
}

/**********************/
/***** Element Flex ***/
/**********************/

.conteneur_flex {
    display: flex;
}

/************************************************/
 /* Taille Police, interligne, rhytme vertical */
/****************** Structure *******************/

/* Taille Police ------------------*/

h1 {
    font-size: clamp(var(--taille-tres-grand) , 6vw, 80px);
}

h2 {
    font-size: clamp(var(--taille-grand) , 6vw, 50px);
}

header h3 {
    font-size: clamp(var(--taille-grand), 4vw, var(--espace-tres-grand));
}

h3 {
    font-size: clamp(var(--taille-grand), 4vw, 30px);
}

p {
    font-size: clamp(14px , 2.5vw, var(--taille-moyen));
}

.bouton {
    font-size: clamp(var(--taille-petit) , 2.5vw, 25px);;
}


/* Interligne ------------------------*/

h1, h2, h3, h4 {
    line-height: 1.15;
}

p {
    line-height: 1.25;
}

/* S'assurer de ne pas dépasser 50 caractères par intervention */

p {
    max-width: 50ch;
}

/* Séparer les titres du contenu --------*/

.h2_clair {
    padding-bottom: 8px;
    border-bottom: 3px solid rgba(255, 255, 255, 0.8);
    color: var(--couleur-blanc);
}

.h2_fonce {
    border-bottom: 3px solid var(--couleur-vert);
    color: var(--couleur-vert);
}

h2 {
    text-transform: uppercase;
    margin-bottom: 30px;
}

main>section {
    padding: clamp(var(--espace-moyen), 4vw, var(--espace-tres-grand));
}


/**************************/
/***** Couleurs de fond ***/
/**************************/

body {
    background: var(--couleur-vert);
}

.couleur_primaire {
    background-color: var(--couleur-gris);
}

.couleur_secondaire {
    background-color: var(--couleur-creme);
}

/*********************/
/****** Boutons ******/
/*********************/

.bouton {
    display: inline-block;

    padding: .5em .65em;
    margin-top: var(--espace-grand);
    max-width: max-content;

    transition-delay: .05s;

    border-radius: var(--espace-grand);
    letter-spacing: 1.50px;
    text-transform: uppercase;
}

.bouton--vert{
    border: 2px solid var(--couleur-blanc);
    background-color: var(--couleur-vertClair);
    color: var(--couleur-blanc);
}

.bouton--vert:hover,
.bouton--blanc {
    border: 2px solid var(--couleur-vert);
    background-color: var(--couleur-blanc);
    color: var(--couleur-vert);
}

.bouton--blanc:hover {
    border: 2px solid var(--couleur-blanc);
    background-color: var(--couleur-vert);
    color: var(--couleur-blanc);
}

.bouton--gris-blanc {
    background: var(--couleur-blanc);
    color:var(--couleur-gris);
    border: 2px solid var(--couleur-gris);

    font-size: clamp(14px, 2vw ,var(--taille-petit));
}

.bouton--gris,
.bouton--gris-blanc:hover {
    background: var(--couleur-gris);
    color:var(--couleur-blanc);
    border: 2px solid var(--couleur-blanc);
}

.bouton--gris:hover {
    background-color: var(--couleur-vert);
    color: var(--couleur-blanc);
}

/***********************/
/***** Logo icone ******/
/***********************/

.logo-lien-responsive {
    width: 80px;
}

.logo-lien {
    padding: 0px;
}

.logo-lien:hover {
   background: none;
}

.icone {
    width: 50px;
}
/********************/
/***** Chevron ******/
/********************/

.chevron::before {
	display: inline-block;
    
	position: relative;
	border-style: solid;
	border-width: 0.12em 0.12em 0 0;
	content: '';
	height: 0.45em;
	left: 0.15em;
	top: 0.15em;
	transform: rotate(-45deg);
	vertical-align: top;
	width: 0.45em;
    background-color: vz;
    margin: 0 5px;
}

.chevron.bottom:before {
	top: 0;
	transform: rotate(135deg);
}

.chevron.right:before {
	left: 0;
	transform: rotate(45deg);
}