body, html {
	height: 100%;
	margin: 0;
	color: #777;
	font: 400 1em/1.8 "Lato", sans-serif;
}

footer {
	padding: 1em 2em;
	background:#266A31;
}

#zone_blanche {
	padding: 1em 2em;
}

#zone_pleine {
	padding:0;	
}

#zone_grise {
	text-align:center;
	background-color: #333;
}


/* POLICES UTILISÉES */
	@font-face {
		font-family: 'Dancing_Script';
		src: url('font/Dancing_Script/DancingScript-Regular.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
	}
/* POLICES UTILISÉES */


/* BANDEAUX */
.bandeau_entete_image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)), url("images/image_bandeau_entete.jpg");
  height: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.bandeau_entete_texte, .bandeau_citation_texte  {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.bandeau_citation_image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)), url("images/image_bandeau_citation.jpg");
  height: 20%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.bandeau_citation_texte {
	color: white;
    font-style: italic;
    font-size: 1em;
	width: 100%;
    text-align: center;
}
/* BANDEAUX */


/* MENUS */
.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-weight: bold;
}

.topnav a:hover {
  background-color: white;
  color: black;
}

.topnav a.bouton_vert {
  float: right;
  background-color: #30B846;
  color: white;
}

.menu_image {
  position: relative;
  text-align: center;
  color: white;
}

.menu_titre {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #266a31;
    background-color: #ffffffcc;
    width: 60%;
    text-transform: uppercase;
    font-weight: bold;
    padding: 0.5em;
}
/* MENUS */


/* TITRES - TEXTE */
h1, h2 {
	color:white;
}

h3 {
	letter-spacing: 2px;
	text-transform: uppercase;
}

h4 {
    text-transform: uppercase;
    margin: 1em 0 -0.5em 0;
	font-size: 1em;
}

#titre_blanc, #texte_blanc {
	color:white;
}

.citation {
	font-family: Dancing_Script;
}

p.texte_temoignages, p.nom_temoignages {
    font-style: italic;
	font-size: 0.8em;	
}

p.nom_temoignages {
    text-align: right;
    font-weight: bold;
}

@media screen and (min-width: 300px) {
	h1 {
		font-size: 5em;
	}
	h2 {
		font-size: 3em;
	}
	h3 {
		font-size: 4em;
	}
	.menu_titre {
		font-size: 4em;
	}
	.topnav a {
		font-size:4em;
	}
	.citation {
		font-size:4em;
	}
}

@media screen and (min-width: 992px) {
	h1 {
		font-size: 3em;
	}
	h2 {
		font-size: 2em;
	}
	h3 {
		font-size: 1.4em;
	}
	.menu_titre {
		font-size: 1.4em;
	}
	.topnav a {
		font-size: 1em;
	}
	.citation {
		font-size:1.8em;
	}
}

a {
	text-decoration:none;
	color: inherit;
}
/* TITRES - TEXTE */



/* MASONRY - TABLEAUX */
@media screen and (min-width: 300px) {
	.masonry_grid_article {
		margin: 4em 0;
	}
	divblocencadre {
		gap: 0 10px;
		grid-template-rows: repeat(6, auto);
		margin-bottom:2em;
	}
}

@media screen and (min-width: 992px) {
	.masonry_grid_article {
		gap: 0 10px;
		grid-template-rows: repeat(100, auto);
		margin: 1em 0;
	}

	.masonry_grid {
		display: grid;
		grid-auto-rows: auto;
		grid-column-gap: 20px;
	}

	.divenglobe_2colonnes {
		display: grid;
		grid-template-columns: 1fr 2fr;
		grid-auto-rows: auto;
		grid-column-gap: 20px;
	}
	
	.divblocencadre {
		gap: 0 10px;
		grid-template-rows: repeat(6, auto);
	}
    #grid_2colonnes{ grid-template-columns: 1fr 1fr; }
	#grid_3colonnes{ grid-template-columns: 1fr 1fr 1fr; }
	#grid_4colonnes{ grid-template-columns: 1fr 1fr 1fr 1fr; }
	#grid_5colonnes{ grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
	#grid_6colonnes{ grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;}	
}
/* MASONRY - TABLEAUX */



/* IMAGES / IFRAME */
#logocoordonnees, #logoimage {
	padding-right: 1em;
    vertical-align: middle;
}

iframe {
	width: 100%;
}

@media screen and (min-width: 300px) {
	iframe {
		height: 400px;
	}
	#logocoordonnees {
		width: 4em;
	}
}
@media screen and (min-width: 992px) {
	iframe {
		height: 100%;
	}
	#logocoordonnees {
		width: 1.8em;
	}
}
/* IMAGES / IFRAME */


/* BOUTONS */
button.btn {
    background: white;
    padding: 1em;
    border: none;
    border-radius: 4px;
    float: right;
}

@media screen and (min-width: 300px) {
	button.btn {
		margin: 0 1em 1em 0;
		font-size:2.4em;
	}
}
@media screen and (min-width: 992px) {
	button.btn {
		margin: 0;
		font-size:1em;
	}	
}
/* BOUTONS */