@gris : #f7f8f4;
@rouge : #D03E54;

/* UX
-----------------------------------------------------------------*/
.animate{
	-moz-transition: all 0.7s ease-out;
	-webkit-transition: all 0.7s ease-out;
	-o-transition: all 0.7s ease-out;
    -ms-transition: all 0.7s ease-out;
	transition: all 0.7s ease-out;
}

.animatefast{
	-moz-transition: all 0.4s ease-out;
	-webkit-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}


/* Defaut
-----------------------------------------------------------------*/
body{
	background: #fff;
	font-family: 'Raleway', sans-serif;
	font-weight:400;
	font-size:16px;
	color: #000; 
}

h1, h2, h3{ 
	margin:0;
	padding:0;
	font-family: 'Raleway', sans-serif;
}
 
h1{ 
	font-weight:800;
	font-size: 44px;
	line-height:inherit;
	
	em{ 
		font-weight:normal; 
		font-style:normal; 
		display:block;
		color:@rouge;
	} 
}

h2{
	font-size:30px;
	line-height:33px;
	font-weight:700; 
	margin-bottom:10px;
	position:relative;
	
	em{ 
		font-style:normal; 
		display:block; 
		color:@rouge;
		font-weight:normal;
	} 
	
	strong{
		position:absolute; 
		left:-50px;
	}
}

h3{
	font-size: 20px;
	line-height:33px;
	font-weight:700; 
	margin-bottom:10px;
	color:#D03E54 !important;
}

.wp-block-button__link {
    color: #fff;
    background-color: @rouge;
	padding:10px 20px;
	&:hover{color:#fff;}
}

.button a,
.button-color a,
a.button,
a.button-color{ 
	text-align:center; 
	display:inline-block;
	border:1px solid @rouge !important; 
	padding:10px;
	border-radius: 5px;
	font-size:14px;
	cursor:pointer;
	vertical-align: middle;
	color:@rouge !important;
	background:none !important;
	
	&:hover{
		color:#fff !important;
		background: linear-gradient(117deg, @rouge 100%, #ff7000 115%) !important;
	}
}

.button-color a,
a.button-color{ 
	color:#fff !important;
	background: rgb(116,33,107) !important;
	background: linear-gradient(117deg, @rouge 15%, #ff7000 115%) !important;

	&:hover{ 
		text-decoration:none; 
		background: linear-gradient(117deg, @rouge 100%, #ff7000 115%);
	}
}

.bigbutton a {
    padding: 20px 40px;
    font-size: 22px;
	&:hover{
		text-decoration:none;
		opacity:0.8;
	}
}

.nolink a{
	cursor:default;
	&:hover{text-decoration:none;}
}

.logged-in #header {
    top: 32px;
}


#page{
	padding:100px 0;
	a, a:hover{color:@rouge;}
}




/* Header
-----------------------------------------------------------------------------------------------------------*/	
#header{
	position: fixed;
    width: 100%;
	height:95px;
	line-height: 95px;
    padding: 0px 20px;
    top: 0;
    z-index: 1000;
	font-size:15px;
	border-bottom: 1px solid @rouge;
	background:rgba(255,255,255,0.9);

	.container{ position:relative; }

	.logo{
    	width: 200px;
		height: 95px;
		display:inline-block;
		text-indent: -3000px;
		overflow:hidden;
		background: url(/wp-content/themes/ediconnexion/images/EDIconnexion.png);
		background-repeat: no-repeat;
		background-size:contain;
		background-position: center;
		padding:0;
	}
	
	#menu-principal{
		float:right;
		
		& >li{
			float:none; 
			display:inline-block;
			padding-bottom:40px;
			
			&.button{padding:0; margin-right:15px}
			&.button-color{margin:0px}
			&.button > a{
				padding: 10px 15px;
				font-weight:400 !important;
			}
			&.no-border a{border:none;}
			&:hover{
				.dropdown-menu {display:block;}
				& > a{color:@rouge;}
			}
		}
		
		& > li > a{ 
			color:#000;
			font-size:13px;
			font-weight:600;
			
			&:focus, 
			&:hover{ 
				background:none; 
				outline:none;
				text-decoration: none;  
				color:@rouge;
			} 
		}
		 
		.dropdown-menu{
			padding:20px 0;
			margin-left:40px;
			background:#fff;
			border:1px solid #dedede;
			border-radius:20px;
			overflow:hidden;
			
			a{ 
				padding:10px 30px !important; 
				color:#000;
				font-size:13px;
				
				&:hover{ 
					text-decoration:none;
					color:@rouge;
					background:#f9f1e4;
					font-weight:600;
				}
			}
		}
	}

	.button-color{ 
		color:#fff !important;
		&:hover { 	color:#fff !important;}
	}
	
	.navbar-toggle {
		margin: 10px 0 0 0; 
		padding : 10px 20px;
		line-height: initial;
		
		span{background:@rouge;}
	}
}





#entete{
	width: 100%;
	height: 460px !important;
	text-align: center;
	background-image: url(/wp-content/themes/ediconnexion/images/bandeau.gif);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden;
	position: relative;
	
	h1 {
		font-size: 50px;
		font-weight: 600;
		display: inline-block;
		margin: 0px 0 20px;
		transform: translateY(70%);
		color: #fff;
		position: relative;
		z-index: 1;
		opacity: 0;
		height: 100%;
		-moz-transition: all 0.7s ease-out;
		-webkit-transition: all 0.7s ease-out;
		-o-transition: all 0.7s ease-out;
		-ms-transition: all 0.7s ease-out;
		transition: all 0.7s ease-out;
		
		&.active{
			transform: translateY(50%);
			opacity: 1;
		}
	}
}


/* Carousel
-----------------------------------------------------------------------------------------------------------*/	
.owl-carousel.assureur{ 
	margin:40px 0 0;
	position:relative;
	
	.owl-dots{ display:none;}
	
	.owl-item > div,
	.owl-item > figure{ 
		height: 130px;
		width:100%  !important;
		position: relative;
		padding: 35px 0px;
	}
	
	img{
		display: block  !important;
		-o-object-fit: contain !important;
		object-fit: contain  !important;
		object-position: 50% 50%;
		-o-object-position: 50% 50%;
		width: 100% !important;
		height: 100% !important;
	}
}


.owl-carousel{ 
	overflow:hidden; 
	
	.owl-stage-outer{ 
		overflow:visible !important;
		padding-top:10px;
	}
	.panel{
		height:400px;
		border:none; 
		box-shadow:1px 1px 12px #ddd; 
		background: #f8f8f8;
		padding:37px;
	}
	.owl-nav{ 
		position:absolute;
		top:62px;
		width:100%;
		
		span{
			border:2px solid #000; 
			font-size:24px;
			width:26px;
			height:26px;
			border-radius:100px;
			text-align:center;
			display: block;
    		line-height: 18px;
    		font-weight: 700;
		}
		.owl-next{float:right;}
	}
}

.panel,
.wp-block-gallery{
	position:relative;
	overflow:hidden;
	border-radius:30px !important;
	border:1px solid @rouge;
}

.wp-block-gallery{
	border:none; box-shadow:1px 1px 10px #ccc;
	background:#fff;
	text-align:center;
	padding:50px;
	img{
		display:inline-block  !important;
	    width: max-content !important;
		margin: 0 auto;
	}
}


/* Home
-----------------------------------------------------------------------------------------------------------*/
.home{
	.wp-block-cover__inner-container{
		transform: translateY(50%);
		opacity:0;
		.animate;
		
		&.active{
			transform: translateY(0);
			opacity:1;
		}
	}
	
	h1 em{
		color:#fff;
		font-size: 32px;
	}
	
	.wp-block-group__inner-container.anim{
		padding-top:0px;
		opacity:1;
	}
	
	.presentation{
		.securite,
		.simplicite{
			background-image:url(/wp-content/themes/ediconnexion/images/cadenas.png);
			background-position: left;
			background-repeat: no-repeat;
			background-size: 40px;
			padding:10px 0 10px 50px
		}
		.simplicite{ background-image:url(/wp-content/themes/ediconnexion/images/verifier.png);}
	}

	.wp-block-cover{
		width: 100vw !important;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	#solution{
		overflow:hidden;
		.wp-block-cover{ 
			h1{
				color:#fff;
				text-align: left;
			}
			
			.banner .wp-block-button__link{
				background:#fff !important; 
				color:#000 !important;
				font-weight:700;
				text-shadow:none;
				font-size: 15px;
   				padding: 15px 40px;
				&:hover{text-decoration:none;}
			}
		}
	}
}

.alignwide{
	max-width:1400px; 
	margin:0 auto;
	.wp-block-column{padding:0 80px}
}

.assistance{
	padding:100px 0;
	.wp-block-column{
		padding:0 80px;
	}
}
	
.franceconnect{
	max-width:900px;
	margin: 0 auto;
	padding:80px 0;
	
	.wp-block-group{
		border:2px dotted @rouge;
		padding:50px 20px;
		position:relative;
		font-size:30px;
		
		h2{ 
			color:@rouge;
			margin-bottom:10px;
		}
		
		&:after{
			content:'';
			display:block;
			width:300px; height :50px;
			left: 50%; top:-25px;
			margin-left:-150px;
			position:absolute;
			background: #f8f8f8 url(/wp-content/themes/ediconnexion/images/EDIconnexion.png);
			background-size: contain;
			background-repeat: no-repeat;
		}
	}
	
	.wp-element-button{ 
		background:@rouge !important;
		margin:50px auto;
		position:relative;
		
		&:after{
			content:'';
			display:block;
			width:40px; height :50px;
			left: 50%;
			margin-left:-25px;
			position:absolute;
			background: url(/wp-content/themes/ediconnexion/images/arrow.png);
			background-size: contain;
			background-repeat: no-repeat;
		}
	}
}

.video{
	background:@rouge !important;
	width:100%;
	text-align:center;
	.has-large-font-size{color:#fff; padding:40px;}
	
	figure{margin: 0 auto;}
	iframe{width:100%; height:600px;}
}

.integration{
	padding:100px 0;
}


/* authentification
-----------------------------------------------------------------------------------------------------------*/
.authentification{
	padding:100px 0;

	.wp-block-column-is-layout-flow{
		border-right:2px dashed @rouge;
		padding:0 20px 60px !important;
		text-align:center;
		position:relative;
		
		&:last-child{
			border-right:none !important;
		}
		img{
			padding-bottom:30px; 
			max-width: 225px;
			max-height:190px;
			width: auto;
		}
		.wp-block-button{ 
			width:90%; 
			position:absolute;
			bottom:0;
			left:5%;
		}
		.wp-block-button__link{
			border-radius:10px;
			width:100%;
			text-align:center;
			border:none;
			background:#666;
			color:#fff;
		}
		h3{ min-height: 110px;}
	}
	
	:where(.wp-block-columns.is-layout-flex) {
		gap: 0;
	}
}

:where(.wp-block-columns) {
	margin-bottom: 0;
}
	
.wp-block-embed__wrapper{
	text-align:center;
	padding:30px 0;
	iframe{width:100%; height:600px;}
}


/* abonnement
-----------------------------------------------------------------------------------------------------------*/
.page-id-91{
	background:#f8f8f8;
	
	h1 em{ 
		font-size: inherit;
		color:@rouge;
	}

	.wp-block-group__inner-container{
		border:2px dashed @rouge;
		background:#fff;
		padding:50px;
		position:relative;
		max-width:1024px;
		margin:0 auto;
		
		.wp-block-column{padding: 0 20px;}
		
		h2{
			color:#fff;
			display:inline-block;
			font-size:20px;
			text-transform:uppercase;
			background:@rouge;
			padding:10px 40px;
			border-radius:50px;
			position:absolute;
			top:-30px;
			left:50px;
		}
	}
	
	.tarifs{
		position:relative;
		font-size:22px;
		strong em{	
			color:@rouge;
			position: absolute;
			right:50px;
		}
	}
}


/* Contact
-----------------------------------------------------------------------------------------------------------*/
#contact{
	opacity:0;
	margin-top:200px;
	padding-bottom:100px;
	.animate;
	
	&.active{
		opacity:1;
		margin-top:100px;
	}
	
	h2{ 
		color:#fff; 
		text-align:center;
		margin-bottom:40px;
	}
	
	.panel{
		background:rgba(255,255,255,0.3);
		padding:50px 80px;
	}
	
	#form_contact{ 
		position:relative; 
		overflow:hidden;
		width:100%;
	}
	
	.wpcf7{
		padding:0px 150px 0;
		
		form{position:relative;}
		
		.wpcf7-list-item{
			margin:0; 
			color:#fff;
		}
		
		input, select, .btn, .rechercher{
			margin:10px 0px;
			border:1px solid #707070;
			color:#707070;
			padding:12px;
			width:100%;
			border-radius:8px;
			background:#fff;
			font-size:14px;
		}
		
		textarea:focus, 
		input:focus{ outline: none; }
		input::placeholder{
			color: #707070 !important;
			opacity:1 !important;
		}
		input[type=checkbox]{ 
			margin : 5px 10px 0 0;
			float: left;
			width: auto;
		}
		input.wpcf7-submit { 
			width:200px;
			padding:15px 0;
			background:#fff; 
			color:#000;
			font-weight:bold;
			float:none;
			border-radius:100px;
			border:none;
			margin: 20px auto 0;
    		display: block;
		}
		.wpcf7-response-output{ clear:both;}
		.wpcf7-not-valid-tip{color:#000; font-size: 12px;}
		
		.label{
		    font-size: 20px;
			font-weight: bold;
			color: #FFF;
			line-height: 60px;
		}
		
		.rechercher{
			position: absolute;
			right: 10px;
			width: 150px !important;
    		background: #666;
			border:1px solid #666;
    		color: #fff;
			border-top-left-radius:0;
			border-bottom-left-radius:0;
		}
		.noshow{display:none;}
		.col-md-12 label{display:none;}
	}

	.small,
	.souscription{
		color:#fff; 
		font-size:12px; 
		display:block;
		padding:25px 15px 0;
		float:left;
	}
	.souscription{ font-size:17px; padding:30px 15px;}
}

.background{
	background:@rouge;
	padding:50px 0;
}


.wp-block-ub-content-toggle {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    margin: 0;
	
	.wp-block-ub-content-toggle-accordion-title-wrap {
		background: none !important;
		border:none !important;
		border-bottom:1px solid #000 !important;
	}
	.wp-block-ub-content-toggle-accordion-content-wrap{border:none;}
}

.wp-block-ub-content-toggle-accordion{
	border:none !important;
	
	&:last-child{
		.wp-block-ub-content-toggle-accordion-title-wrap {border-bottom:none !important;}
	}
	
	.wp-block-ub-content-toggle-accordion-title {
		padding: 30px 0 !important;
		font-weight: bold;
		background: none !important;
		border:none !important;
	}
}

blockquote {
    overflow: hidden;
    background: #f0f1ec;
    border: 1px solid #d5d5d5;
    color: #000;
    position: relative;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 2px 0 0 #fff;
    font-size: 14px;
}


/* 404
-----------------------------------------------------------------------------------------------------------*/
.error404 {
	#entete{height:600px;}
}



/* Single
-----------------------------------------------------------------------------------------------------------*/

.single-faq{
	#entete h1{ 
		max-width:700px; 
		font-size: 31px;
	}
	
	.content{
		background: #fff;
		border-radius: 15px;
		padding: 70px;
		z-index: 100;
		position: relative;
		margin-top: -140px;
	}
	
	.pagination-post{
		padding:10px 0; 
		margin-top:50px;
		text-align:center;
		a{
			text-decoration:underline;
			margin: 0 10px;
			font-size: smaller;
			display:inline-block;
			font-weight:bold;
			border:1px solid @rouge;
			padding:10px;
			text-decoration:none;
			border-radius:5px;
			&:hover{
				background:@rouge; 
				color:#fff !important;
			}
		}
	}
}


/* FAQ
-----------------------------------------------------------------------------------------------------------*/
.post-type-archive-faq,
.tax-thematiques{

	#page .container:first-child{margin-bottom:100px;}

	.titleFaq{ 
		font-size:32px; 
		font-weight:800;
		margin-bottom:15px;
	}
	.panelFaq{
		background: #fff;
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
		border-radius: 20px;
		padding: 30px;
		margin: 0 0 50px;
		transform: translateY(100px);
		opacity: 0;
		.animate;
	
		&.active{
			transform: translateY(0px);
			opacity: 1;
		}
		li{list-style:none;}
		ul{padding:0;}
		
		h2{ 
			font-size:15px;
			cursor:pointer;
			padding-right:80px;
			margin:0;
			position:relative;
			text-align:left;
			
			&:after{ 
				content:'+';
				width: 30px;
				height: 30px;
				line-height:30px;
				display:block;
				text-align:center;
				position:absolute;
				right: 0;
				top: -5px;
				font-size: 26px;
				font-weight: 400;
				background: @rouge !important;
				color:#fff !important;
				border-radius:3px;
			}
			&.open:after{content:'-';}
		}
	}
	
	.cat{
		font-size:20px; 
		font-weight:800; 
		display:block; 
		margin: 20px 0 30px;
	}

	.accordeon{
		border-bottom:1px solid #000;
		padding:20px 0;

		&>div{ 
			display:none;
			font-weight: 300;
			color:#000;
			&>div{ padding: 20px 80px 0 0;}
			strong{color:@rouge;}
			
			li{ list-style:inside}
		}
	}
	li:last-child .accordeon{border:none;}
	
	blockquote{
		margin-top:50px;
		a{color:#fff !important;}
	}
}



/* multi-colonne
-----------------------------------------------------------------------------------------------------------*/
.page-template-page-multi-colonne{
	#multi-colonne{ 
		column-width: 350px;
		overflow:hidden;
		font-size:17px;
		
		h2{ 
			font-size: 22px;
			color:#000;
		}
		
		h3{ 
			font-size: 14px;
			font-weight:700;
			color: inherit;
			margin:0; padding:0
		}
	}
}


/* Footer
-----------------------------------------------------------------------------------------------------------*/
#footer{
	position: relative;
	overflow:hidden;
	background:#fff;
	text-align:center;

	#menu-footer {
		float:none;
		padding:40px 0;
		
		li{
			padding: 0 50px;
			border-right: 1px solid #000;
			float:none;
			display:inline-block;
			line-height: 10px;
			&:first-child{ padding-left: 0;}
		
			a{
				font-size:14px;
				line-height: inherit;
				font-weight: 600;
				padding:0; 
				color:#000;
				
				&:after{
					display:block;
					content:'';
					width:0px;
					height:2px;
					margin-top:5px;
					background:#000;
					-moz-transition: all 0.2s ease-out;
					-webkit-transition: all 0.2s ease-out;
					transition: all 0.2s ease-out;

				}
				&:hover:after{ width:100%;}
				&:hover,
				&:focus{ text-decoration: none; background:none; }
			}
			
			&.picto{ 
				border:none; 
				svg{
					width:12px;
					vertical-align: middle;
					margin-top: -3px; 
					fill: @rouge;
				}
			}
		}
	}
	
	.footer-sub{
		text-transform:uppercase;
		background: @gris;
		padding:25px 0;
		line-height: 9px;
  		font-size: 11px;
		letter-spacing:1.5px;
		
		.container{ text-align:center;}
		.container div{ 
			display:inline-block;
			&:first-child{margin-right:100px;}
		}
		
		a{ 
			display:inline-block; 
			padding:0 20px; 
			border-right:1px solid #000;
			&.no-border{ border:none;}
		}
		
		img{ 
			width:120px; 
			display:inline-block; 
			vertical-align: middle;
		}
	}
}

#liste_result_soc{
    background: #fff;
    text-align: left;
    padding: 10px;
    position: absolute;
    left: 15px;
    top: 60px;
    width: 70%;
	z-index:200;
	
	& > div{
		max-height: 320px;
		overflow: auto;
	}
	
	.btn-close{
		position: absolute;
		top: -67px;
		right: 40px;
		font-size: 60px;
		transform: rotate(45deg);
		cursor:pointer;
	}
		
	.unesoc{ 
		padding:12px; 
		font-size:12px;
		border-radius:10px;
		.denomination{ font-weight:500; font-size:20px;}
		span{ display:none;}
		
		&:hover{ 
			background:@gris; 
			cursor:pointer;
		}
	}
}

#modalMessage{
	.modal-header{
		padding:30px 15px;
		button.close{
			font-size: 42px;
			position: absolute;
			top: 27px;
			right: 27px;
		}
	}
	.modal-title{
		text-align:center;
		font-weight:600;
		font-size:25px;
		.num{color:@rouge;}
	}
	.modal-content{
		text-align:left;
		strong{font-size:20px;}
		ul{padding:20px;}
	}
}



.modal-content{
	border-radius: 30px;
    text-align: center;
	
  	.modal-body{padding: 60px 60px 0;}
	
	img{ 
		width:90px; 
		margin-bottom:50px;
	}
	
	.modal-footer{ 
		border: none;
		text-align: center;
		padding-bottom: 60px !important;
		
		.btn{
		    border: 1px solid @rouge;
			background: none;
			border-radius: 50px;
			padding: 10px 40px;
			font-weight: bold;
			color:@rouge;
			font-size:20px;
		}
	}
}

.g-recaptcha{
	text-align:center;
	padding-bottom:15px;
	& > div{ display:inline-block;}
}

#ajaxsearchlite1{
	border-radius: 50px;
	margin-top: 30px;
	padding:15px;
	box-sizing: border-box;
	
	.probox .proinput input, 
	div.asl_w .probox .proinput input{font-size:15px !important;}
}	
div.asl_r .results .item .asl_content h3, 
div.asl_r .results .item .asl_content h3 a{color:@rouge !important;}

.grecaptcha-badge{display:none;}