* {box-sizing : border-box;}
html {
  scroll-behavior: smooth;
}
body {
	margin:0px; padding:0px;
	font-family:"Montserrat", Arial;
	font-size:16px;
	color:black;
	//min-width:1000px;
	font-weight:500;
	background:#E2DCDF;
	line-height: 1.5;
}

nav.tabs {
	position:absolute;
	top:0px;
	left:0px;
	z-index:2;
}

a, a:visited {
	color:black;
}

h1 {
	display:none;
}

h2 {
	text-transform:uppercase;
	font-size:40px;
	font-weight:900;
	font-style:italic;
}
h2 span.ligne1 {
	display:block;
	color:grey;
	margin-bottom:-32px;
}
h2 span.ligne2 {
	display:block;
	font-size:50px;
	margin-top:0px;
	margin-left:20px;
}

.small {
	font-size:80%;
}



/*** HEADER ***/

header {
	background:url("../images/fond-header.jpg") center center no-repeat;
	background-size:cover;
	position:relative;
	z-index:1;
	padding-bottom:40px;
}	

header #block-gerf-site-branding {
	display:inline-block;
}

header a.site-logo {
	display:block;
	padding:30px;
}
header a.site-logo img {
	max-width:60%;
	width:560px;
	height:auto;
}

header:before {
	content:'';
	position:absolute;
	bottom:0px; left:0px;
	width:100%; height:60%;
	background: linear-gradient(to bottom, rgba(152, 209, 203, 0) , rgb(152, 209, 203) 90% );
	z-index:-1;
}

header nav.menu--main {
	position:absolute;
	top:0px;
	right:0px;
	padding:70px 70px 0px 0px;
	
}


header nav.menu--main ul.menu {
	display:flex;
	gap:20px;
	list-style:none;
	padding:0px;
	margin:0px;
	background:#E67AAE;
	clip-path: polygon(0% 0, 100% 0, 98% 100%, 2% 93%);
	padding:10px 25px;
}

header nav.menu--main ul.menu a {
	text-decoration:none;
	font-weight:800;
	text-transform:uppercase;
	color:black;
	transition:all 0.2s ease;
}

header nav.menu--main ul.menu a:hover {
	color:white;
}


header .views-field-field-header {
	text-align:center;
}
header .views-field-field-header .field-content {
	display:inline-block;
	text-transform:uppercase;
	font-style:italic;
	font-weight:900;
	line-height:1;
	margin-top:10%;
}

header .views-field-field-header .field-content .ligne1 {
	color: white;
  font-size: 5vw;
  text-align: right;
  margin-right: 10%;
}
header .views-field-field-header .field-content .ligne2 {
	color: #18470F;
  font-size: 10vw;
  margin-top: -2vw;
}
header .views-field-field-header .field-content .ligne3 {
	color: white;
  font-size: 7vw;
  text-align: left;
  margin-left: 4vw;
  margin-top: -2.4vw;
}

header .views-field-field-header .field-content .ligne4 {
color: #18470F;
  font-size: 5vw;
  text-align: left;
  margin-top: -1.6vw;
  margin-left: 18.2vw;
}

header .views-field-field-header .field-content .ligne5 {
	color: #E67AAE;
  font-size: 7vw;
  text-align: left;
  margin-top: -1.7vw;
  margin-left: 2vw;
}






/****  Paragraphs   *****/

/***** GROUPE *****/

.paragraph--type--groupe {
	padding:20px;
	z-index:0;
	position:relative;
	overflow:hidden;
}



.paragraph--type--groupe .repetable {
	text-transform:uppercase;
	position:absolute;
	left:0px; top:0px;
	width:100%; height:100%;
	z-index:-1;
	pointer-events: none;
  	user-select: none; 
	font-weight:900;
	color:#98D1CB;
	overflow:hidden;
}
.paragraph--type--groupe .repetable img {
	margin-bottom:-1%;
}
.paragraph--type--groupe .inner {
	max-width:1200px;
	margin:auto;
}

/*** Groupe rose ***/


.paragraph--type--groupe.rose {
	background:#E67AAE;
	padding-top:70px;
	padding-bottom:70px;
}

.paragraph--type--groupe.rose .repetable,
.paragraph--type--groupe.vert .repetable {
	color:white;
}
.paragraph--type--groupe.rose:after {
	content:'';
	display:block;
	position:absolute;
	left:0px; bottom:0px;
	width:100%;
	height:30%;
	background:linear-gradient(
    to top,                  
    rgba(255, 255, 255, 0.4) 0%,   
    rgba(255, 255, 255, 0) 100%);
    z-index:-1;
}

.paragraph--type--groupe.rose:before {

}

.paragraph--type--groupe.rose h2 span.ligne1 {
	color:white;
}
.paragraph--type--groupe.rose h2 span.ligne2 {
	color:#98D1CB;
}




.paragraph--type--groupe.vert {
	color:white;
	background:#18470F;
	padding-top:70px;
}
.paragraph--type--groupe.vert h2 span.ligne1 {
	color:#98D1CB;
}
.paragraph--type--groupe.vert h2 span.ligne2 {
	color:#E67AAE;
}






/**** Formulaires ****/

input[type=text],
input[type=password],
input[type=number],
input[type=email],
input[type=tel],
input[type=date],
select
 {
	display:block;
	padding:10px 15px;
	max-width:100%;
	font-size:16px;
	font-family:'Montserrat', Arial;
}
label {
	display:block;
}

input[type=submit] {
	display:inline-block;
	background:#E67AAE;
	border:1px solid #E67AAE;
	color:white;
	font-family:'Montserrat', Arial;
	text-transform:uppercase;
	font-weight:800;
	letter-spacing:1px;
	padding:16px 30px;
	cursor:pointer;
	transition:all 0.1s ease;
}

input[type=submit]:hover {
	background:white;
	color:#E67AAE;
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none; /* Safari/Chrome */
  -moz-appearance: none;    /* Firefox */
  width: 24px;
  height: 24px;
  border: 2px solid #333;
  border-radius: 4px;       /* carré arrondi */
  display: inline-block;
  position: relative;
  cursor: pointer;
  background:white;
  flex:0 0 24px;
}

/* quand coché */
input[type="checkbox"]:checked {
  border-color: #007bff;
}

input[type="checkbox"]:checked + label {
	font-weight:900!important;
}
/* si tu veux un symbole ✓ custom */
input[type="checkbox"]:checked::after {
  content: "✓";
  font-family:"Montserrat";
  font-weight:bold;
  color: #18470F;
  position: absolute;
  top: 0;
  left: 3px;
  font-size: 16px;
  line-height: 20px;
}

form label, .js-form-type-webform-markup {
	font-weight:700 !important;
	font-style:italic;
}

label.js-form-required:after {
	background:none;
	content:"*";
	color:white;
	vertical-align:baseline;
}




form.webform-submission-form {
	max-width:600px;
	margin:auto;
}

.js-form-type-checkbox {
	display:flex;
	gap:10px;
}

.form-actions {
	text-align:right;
}

form #edit-date-de-naissance label {
	display:none;
} 



/***  FOOTER  ***/

footer {
	padding:20px;
	background: linear-gradient(to bottom, #98D1CB, #E2DCDF);
}

footer .region-footer {
	max-width:1200px;
	margin:auto;
	display:flex;
	justify-content: space-between;
	align-items:center;
}

footer ul.menu {
	display:flex;
	padding:0px;
	margin:0px;
	list-style:none;
	gap:20px;
}

footer a.site-logo {

}

footer a.site-logo img {
	height:80px; width:auto;
}






@media all and (max-width:700px) {

	h2 {
		font-size:30px;
	}
	.paragraph--type--groupe h2 span.ligne1 {
		font-size:30px!important;
		margin-bottom:-19px!important;
	}
	.paragraph--type--groupe h2 span.ligne2 {
		font-size:28px!important;
	}

	#burger {
		width:50px;
		height:50px;
		background:url("../images/menu-burger.svg") center center no-repeat;
		background-size:contain;
		position:fixed;
		z-index:3;
		top:20px;
		right:20px;
	}

	header nav.menu--main .close {
		width:30px;
		height:30px;
		background:red;
	}

	header nav.menu--main {
		position:fixed;
		background:#E67AAE;
		z-index:5;
		width:80%;
		height:100%;
		padding:0px;
		right:-100%;
		box-shadow:0px 0px 20px -10px black;
		transition:all 0.3s ease;
	}
	header nav.menu--main.open {
		right:0px;
	}

	header nav.menu--main ul.menu {
			display:block;
			padding-top:80px;
			clip-path: none;
		}
	header nav.menu--main ul.menu a {
		display:block;
		padding:10px 0px;
	}

	header nav.menu--main .close {
		position:absolute;
	}

	footer .region-footer,
	footer ul.menu {
		display:block;
	}

	.paragraph--type--groupe.rose,
	.paragraph--type--groupe.vert {
		padding-top:25px;
		padding-bottom:30px;
	}


}