/* color */
:root {
	--sunflowerYellow: #ffce00;
	--navy: #02164d;
	--cobalt: #172e70;
	--brownGrey : #a4a4a4;
	--base:              #f7d52b;
	--bg-blend:          multiply;
	--blur:              2px;
	--fg-blend:          lighten;
	--foreground:        #16006f;
	--opacity:           0.4;
	--spacing:           1%;
	}
	
	.img-wrapper-absolute {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		height: 100%;
	}
	
	.img-wrapper {
	background-color:    var(--base);
	display:             flex;
	flex:                1 1 100%;
	height:              100%;
	overflow:            hidden;
	padding:             var(--spacing);
	position:            relative;
	}
	
	.img-wrapper img {
	filter:              grayscale(100%) contrast(1);
	flex:                1 0 100%;
	height:              100%;
	max-width:           100%;
	mix-blend-mode:      var(--bg-blend);
	object-fit:          cover;
	opacity:             var(--opacity);
	position:            relative;
	width:               100%;
	}
	
	.img-wrapper:hover img {
		filter: grayscale(100%) contrast(1) blur(var(--blur));
	}
	
	.img-wrapper::before {
	background-color:    var(--foreground);
	bottom:              0;
	content:             '';
	height:              100%;
	left:                0;
	mix-blend-mode:      var(--fg-blend);
	position:            absolute;
	right:               0;
	top:                 0;
	width:               100%;
	z-index:             1;
	}
	
	.recherche-header-container {
		background-color: #fff;
		color: var(--cobalt);
		text-align: center;
		position: relative;
		padding: 20px;
	}
	
	.recherche-header-container h1, 
	.step-container h2, 
	.step-container h3 {
		font-weight: 700;
	}
	
	.recherche-header-container h1 {
		margin-bottom: 10px;
	}
	
	/* .recherche-header-container span {
		margin-right: -0.250em;
	} */
	
	.recherche-container {
		background-color: var(--sunflowerYellow);
		position: relative;
		margin: 0 0 60px;
	}
	
	.result {
		position: relative;
		display: inline-block;
	}
	
	.result:before {
		content:'';
		height: 14px;
		width: 1px;
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.step-container {
		padding:20px 0 30px;
		text-align: center;
		visibility: hidden;
		width: 100%;
		position: absolute;
	 }
	
	.step-container.active {
		visibility: visible;
	}
	
	.step-container h2 {
		padding: 0 0 10px;
	}
	
	.et_pb_button_container {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	
	.et_pb_button_container > * {
		flex:0 0 auto;
		margin-left: 5px;
		margin-right: 5px;
		margin-bottom: 10px;
	}
	
	.et_pb_button_container .button {
		font-size: 20px;
		font-weight: 500;
		padding: 0.3em 1em;
		line-height: 1.7em !important;
		background-color: transparent;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		position: relative;
		border: 2px solid;
		border-top-color: currentcolor;
		border-right-color: currentcolor;
		border-bottom-color: currentcolor;
		border-left-color: currentcolor;
		border-radius: 3px;
		transition: all 0.2s;
		border-color: var(--navy);
		color: var(--navy);
	}
	
	
	.et_pb_button_container .button:hover,
	.et_pb_button_container .button.active {
		cursor: pointer;
		background-color: var(--navy);
		color: #fff;
	}
	
	/*liste des sections*/
	/* #sections .large-subsites:before {
		background-color: rgb(240, 14, 46);
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		mix-blend-mode: darken;
		position: absolute;
		top: 0;
		left: 0;
	} */
	
	/* #sections .large-subsites:after {
		background-color: rgb(25, 37, 80);
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		mix-blend-mode: lighten;
		position: absolute;
		top: 0;
		left: 0;
	} */
	
	
	#sections .large-subsites {
		padding: 0;
		margin:  20px 0 0;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		list-style:none;
		width: 100%;
		border: 0;
		background:none;
		border-top: 4px solid var(--cobalt) !important;
		border-left: 4px solid var(--cobalt) !important;
		/* background: url(../img/sections-subsite-background.jpg); */
		background-size: cover;
		background-position: center;
	
	}
	
	#sections .large-subsites div {
		flex: 0 1 20%;
		text-align: left;
		font-weight: 700;
		font-size: 18px;
		position: relative;
	}
	
	#sections .large-subsites div.active {
		display: block;
	}
	
	/* #sections .large-subsites li.active:last-child {
		border-right: 4px solid var(--cobalt);
		flex: 0 1 calc(20% + 4px);
	} */
	
	#sections .large-subsites div.active a {
		color: var(--cobalt);
		/* border:4px solid var(--cobalt); */
	}
	
	#sections .large-subsites div a {
		display: block;
		padding: 20px 0 40px 20px;
		color: rgba(255,255,255, 0.3);
		/* border:4px solid rgba(255,255,255, 0.3); */
	}
	
	#sections .large-subsites div.loaded a {
		transition: all 0.2s ease-in-out;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
	}
	
	#sections .large-subsites div.inactive a {
		background: rgba(23,46,112,0.6);
		transition: unset !important;
		-webkit-transition: unset !important;
		-moz-transition: unset !important;
		-ms-transition: unset !important;
		-o-transition: unset !important;
	}
	 
	
	@media screen and (min-width: 980px) {
	
		#sections .large-subsites div {
			border-bottom:4px solid var(--cobalt);
			border-right: 4px solid var(--cobalt);
		}	
	
		#sections .large-subsites div:nth-child(4n-7) {
			border-bottom:4px solid var(--cobalt);
		}
	
	}
	
	/* #sections .large-subsites li:last-of-type:after  {
		height: 100%;
		width: 4px;
		background-color: #fff;
		content: '';
		display: inline-block;
		position: absolute;
		top: 0;
		right: -4px;
	} */
	
	#sections .large-subsites div:not(.active):last-of-type:after  {
		background-color: rgba(255,255,255, 0.3);
	}
	
	#sections .large-subsites div:not(.active):last-of-type:before {
		height: 100%;
		width: 4px;
		background: rgba(23,46,112,0.6);
		content: '';
		display: inline-block;
		position: absolute;
		top: 0;
		right: -4px;
	}
	
	#sections .large-subsites div a,
	#sections .large-subsites div a:hover {
		text-decoration: unset;
	}
	
	#sections .large-subsites div a:hover {
		background: rgba(23,46,112,0.6);
		color: #fff;
	}
	
	.large-subsites span  {
		width: 70%;
	}
	
	.negative-top-margin {
		margin-top: -13px;
		margin-bottom: -150px;
	}
	
	/* select */
	.button {
		display: inline-block;
		font-size: 16px;
		font-family: sans-serif;
		font-weight: 700;
		color: var(--navy);
		padding: .6em  0 .7em 0 ;
		border: 3px solid var(--navy);
		box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
		border-radius: .5em;
		cursor: pointer;	
		line-height: 16px;
		height: 42px;
	}
	
	.select-css {
		display: inline-block;
		font-size: 16px;
		font-family: sans-serif;
		font-weight: 700;
		color: var(--cobalt);
		line-height: 16px;
		padding: 0 1.4em 0 .8em;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		margin: 0;
		border: 3px solid var(--navy);
		/* box-shadow: 0 1px 0 1px rgba(0,0,0,.04); */
		border-radius: .5em;
		-moz-appearance: none;
		-webkit-appearance: none;
		appearance: none;
		/* background-color: var(--sunflowerYellow); */
		background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2302164d%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
		linear-gradient(to bottom, var(--sunflowerYellow) 0%,var(--sunflowerYellow) 100%);
		background-repeat: no-repeat, repeat;
		background-position: right .7em top 50%, 0 0;
		background-size: .65em auto, 100%;
		height: 42px;
	}
	
	.select-css::-ms-expand {
		display: none;
	}
	
	.select-css:hover {
		border-color: var(--navy);
	}
	
	.select-css:focus {
		border-color: #aaa;
		box-shadow: 0 0 1px 3px var(--cobalt);
		box-shadow: 0 0 0 3px -moz-mac-focusring;
		color: #222;
		outline: none;
	}
	
	.select-css option {
		font-weight:normal;
	}
	
	/* Support for rtl text, explicit support for Arabic and Hebrew */
	*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css {
		background-position: left .7em top 50%, 0 0;
		padding: .6em .8em .5em 1.4em;
	}
	
	/* Disabled styles */
	.select-css:disabled, .select-css[aria-disabled=true] {
		color: graytext;
		background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
		linear-gradient(to bottom, var(--sunflowerYellow) 0%,var(--sunflowerYellow) 100%);
	}
	
	.select-css:disabled:hover, .select-css[aria-disabled=true] {
		border-color: #aaa;
	}
	
	/* 
	.select-container {
		width: 80%;
		margin:0 auto;
	} */
	
	.button.hidden {
		visibility: hidden;
		opacity: 0;
	}
	
	.button.disabled {
		 opacity: 0.5;
		 cursor: default;
	}
	
	.select-button-container {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		width: auto;
		max-width: 80%;
		justify-content: center;
		align-items: center;
		margin:0 auto;
	}
	
	.select-container {
		flex:1 1 46%;
		margin:0 2%;
	}
	
	.button {
		flex: 1 1 25%;
	}
	
	
	@media screen and (max-width: 980px) {
	
		.recherche-container {
			margin: 0;
		}
	
		.select-button-container {
			margin-top: 10px;
			max-width: 90%;
		}
	
		.button {
			flex: 0 1 42px;
			width: 42px;
			height: 42px;
			position: relative;
		}
	
		.button:before {
			font-size: 40px;
			color: var(--cobalt);
			text-shadow: 0 0;
			font-family: ETmodules!important;
			font-weight: 400;
			font-style: normal;
			font-variant: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			line-height: 1;
			text-transform: none;
			speak: none;
			position: absolute;
			top: -2px;
			left: -2px;
		}
	
		.button.previous:before  {
			content: "4";
		}
	
		.button.next:before {
			content: "5";
		}
	
		.button:hover {
			background-color: var(--navy);
			color: #fff;
		}
	
		.button span {
			display: none;
		}
		
		.select-container {
			flex: 0 1 calc(100% - (84px + 4%));
			margin: 0 2%;
		}
	
		.step-container h2 {
			width: 60%;
			margin: 0 auto;
		}
	
		#sections .large-subsites {
			padding: 0;
			margin:  0;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			list-style:none;
			background-size: contain;
			background-attachment: fixed;
			background-repeat: no-repeat;
			background-position: center;
			width: 100%;
			background-color: var(--cobalt);
			background-image: unset;
		}
	
		#sections .large-subsites li {
			flex: 0 1 100%;
			text-align: left;
			font-weight: 700;
			font-size: 18px;
			position: relative;
		}
	
	
	
	} 
	
	@media screen and (max-width: 980px) {
	
		.img-wrapper img {
			display: none;
		}
	
	
		#sections .large-subsites {
			/* height: 320px !important; */
			/* overflow-x: hidden;	 */
			border: 4px solid var(--cobalt);
			background-color: var(--sunflowerYellow);
		}
	
		#sections .large-subsites div {
			flex: 0 1 100%;
			border-bottom: 4px solid var(--cobalt);
		}
	
		#sections .large-subsites div:last-child {
			border:none;
		}
	
	
	}