
/***** banner : fullscreen *****/
.banner_fullscreen                          	{ position: relative; overflow: hidden; margin-top: 0;}
.banner_fullscreen:before 						{ position: absolute; left: 0; right: 0; top: 0; bottom: 25%; background: linear-gradient(to bottom, rgba(0,0,0,70%) 0%, rgba(0,0,0,0) 100%); transition: none; z-index: 5; content: "";}
.banner_fullscreen .video                       { position: relative; padding: 0;}
.banner_fullscreen .video video                 { width: 100%; height: 100vh; object-fit: cover; object-position: 50%; display: block; filter: brightness(0.7); margin: 0 auto}
.banner_fullscreen .link      		       		{ margin: 15px auto 0 auto; width: 400px}
.banner_fullscreen .link:after      		    { width: 22px; height: 100%; background: url("../images/calendar.svg") 50% / contain no-repeat; position: absolute; left: 30px; top: 0; content: "";}
.banner_fullscreen .video  .txt               	{ position: absolute; bottom: 0; right: 0; display: grid; width: 100%; height: 100%; z-index: 20; padding: 30px 50px; justify-content: center; align-items: center;}
.banner_fullscreen .video  .txt .titre          { margin: 0; font-size: 40px; color: #fff; text-align: center; text-transform: uppercase; letter-spacing: 2px; font-weight: normal;}
.banner_fullscreen .video  .txt  span           { display: block; font-size: 20px; padding-top: 20px}
.banner_fullscreen .video  .txt .link           { display: block; text-transform: none; text-align: center;}


@media (max-width:1200px) {
.banner_fullscreen                  	        { margin-top: 80px;}
.banner_fullscreen .video video                 { height: 90vh;}
}

@media (max-width:1000px) {
.banner_fullscreen .video video                 { height: 100%; filter: brightness(1); padding-top: 0}
.banner_fullscreen .video  .txt               	{ position: relative; padding: 30px; display: block}
.banner_fullscreen .video  .txt  p             	{ font-size: 25px; color: var(--mainColor2); text-transform: none;}
.banner_fullscreen .video  .txt  span           { padding-top: 10px}
.banner_fullscreen .video  .txt .titre          { color: #00a1be;}
.banner_fullscreen:before 						{ display: none;}
.banner_fullscreen .link      		       		{ margin: 25px 0 0 0; width: 100%;}
}

@media (max-width:700px) {
.banner_fullscreen .link:after      		    { display: none;}
.banner_fullscreen                  	        { margin-top: 70px;}
.banner_fullscreen .video  .txt .titre          { font-size: 30px; letter-spacing: 1px; font-weight: normal;}
}


/***** quote */

.quote_txt_img 											{ position: relative; margin: var(--marginTB);}
.quote_txt_img .container	                        	{ display: grid; grid-template-columns: auto 1fr; grid-gap: 0 60px; align-items: center; position: relative;}
.quote_txt_img .container.align_top                		{ align-items: start;}
.quote_txt_img .container .item							{ position: relative;}
.quote_txt_img .container .item :last-child 			{ margin-bottom: 0;}
.quote_txt_img .container p               				{ margin-bottom: 15px;}
.quote_txt_img .container .link							{ margin-top: 10px;}
.quote_txt_img .container :last-child					{ margin-bottom: 0;}
.quote_txt_img 	a										{ color: var(--mainColor1)}



@media (max-width:1200px) { 
.quote_txt_img .container	                        	{ grid-gap: 0 40px;}
}
@media (max-width:700px) { 
.quote_txt_img 											{ margin: 20px 0;}
.quote_txt_img .container	                        	{ grid-template-columns: 1fr; grid-gap: 25px; text-align: left;}
.quote_txt_img .container p               				{ margin-bottom: 10px;}



}

/***** card item : img + txt */

.card_item_v1								{ border-radius: var(--allImgBR); background: #fff; overflow: hidden; position: relative; text-align: left; box-shadow: 40px 40px 40px rgba(0, 0, 0, 0.05);}
.card_item_v1 .wrap							{ padding: 60px; background: #ffffff; position: relative;}
.card_item_v1 img 							{ display: block; margin: 0; width: 50px; height: 50px;  transition: all 300ms ease-in-out;}
.card_item_v1 img:not(.icon)				{ width: 100%; height: auto; aspect-ratio: 5/3; object-fit: cover; margin-bottom: -15px;}
.card_item_v1 .sous_titre 					{ margin: 10px 0;}
.card_item_v1 p								{ margin-bottom: 20px;}
.card_item_v1 .link.fullw 					{ width: 100%; padding: 0;}
.card_item_v1_number						{ background-color: var(--bgColorLight); width: 50px; text-align: center; color: var(--bgColorDark); font-size: 20px; padding: 25px 10px; line-height: .65; z-index: 0; display: block;}
.card_item_v1 .link							{ width: 100%; text-align: center;}

@media (min-width:1201px) {
.card_item_v1 a:hover img   { transform: scale(1.1); }
}

@media (max-width:1200px) {
.card_item_v1 .wrap							{ padding: 30px;}
}
@media (max-width:700px) {
.card_item_v1								{ border-radius: 10px;}
.card_item_v1 .wrap							{ padding: 20px;}
.card_item_v1 .sous_titre 					{ margin: 0 0 10px 0;}
}

/***** grid bloc */

.grid_bloc	 								{ position: relative; padding: clamp(0, 2vw, 100px) 0; margin: var(--marginTB);} 
.grid_bloc:before	 						{ position: absolute; left: 0; right: 0; top: 15%; bottom: 15%; background-color: var(--bgColorLight); background-attachment: fixed; transition: none; z-index: -1; content: ""; overflow:"hidden"} 
.grid_bloc .container						{ display: grid; grid-gap: clamp(10px, 5vw, 30px); text-align: center;}
.grid_bloc .titre_main	 					{ font-size: 40px; line-height: 48px; margin-bottom: 60px;}

@media (max-width:1200px) {
}
@media (max-width:700px) {
.grid_bloc .container						{ text-align: left;}
.grid_bloc:before	 						{ left: 0; right: 0; top: 60px; bottom: -40px; background-color: var(--bgColorLight);}  
.grid_bloc .titre_main	 					{ font-size: 30px; line-height: 38px; margin-bottom: 20px;}
}


/* custom colums */
.grid_bloc.col_2 .container					{ grid-template-columns: repeat(2, 1fr);}
.grid_bloc.col_3 .container					{ grid-template-columns: repeat(3, 1fr);}
.grid_bloc.col_4 .container					{ grid-template-columns: repeat(4, 1fr);}

@media (max-width:1200px) {
.grid_bloc.col_4 .container					{ grid-template-columns: 1fr 1fr;}
.grid_bloc.col_2 .container					{ grid-template-columns: 1fr 1fr;}

}
@media (max-width:1000px) {
.grid_bloc.col_4 .container					{ grid-template-columns: 1fr;}
.grid_bloc.col_2 .container					{ grid-template-columns: 1fr;}
}
@media (max-width:700px) {
.grid_bloc	 								{ margin:10px 0 0 0;} 					

}


/***** Activités *****/
.activite 							{ margin: 120px 0 160px 0;}
.activite .grid						{ display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 20px; align-items: center; align-items: start; }
.activite .grid .item				{ position: relative; display: block; text-align: center; }
.activite .grid .item img			{ position: relative; display: block; margin: 25px auto; width: 60px}
.activite .grid .img:before	        { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 110px; height: 110px; border-radius: 50%; background:var(--bgColorLight); transition: none; z-index: -1; content: "";}
.activite .grid .item span			{ position: relative; display: block; line-height: 20px; text-align: center; color: var(--mainColor1); margin: 40px auto 20px auto;}


@media (max-width:1200px) {
.activite							{ margin: 90px 0 100px; }
}
@media (max-width:1000px) {
.activite							{ margin: 70px 0 80px; }
.activite .grid						{ grid-gap: 10px; }
.activite .grid .item img			{ width: 50px; margin: 15px auto; }
.activite .grid .img:before	        { width: 90px; height: 90px;}
.activite .grid .item span			{ margin: 30px auto 20px auto;}



}

@media (max-width:700px) {
.activite							{ margin: 40px 0 60px; }
.activite .grid						{ grid-template-columns: repeat(3, 1fr);}
}



/***** moving img *****/
.moving_img									{ position: relative; overflow: hidden; margin: var(--marginTB); padding: 20px 0 0 0;}
.moving_img .row 							{ width: auto; display: flex;}
.moving_img .row .grid 						{ width: auto; display: flex; animation: moving_img 80s linear infinite;}
.moving_img .row .grid div 					{ padding: 0 10px;}
.moving_img .row .grid img 					{ width: auto; height: auto; display: block; border-radius: var(--allImgBR); object-fit: cover; transition: all 300ms ease-in-out;}

@keyframes moving_img {
0%											{ transform: translate(0, 0);}
100% 										{ transform: translate(-100%, 0);}
}
@media (max-width:1600px) {
.moving_img .row .grid img 					{ height: 400px;}
}
@media (max-width:1200px) {
.moving_img .row .grid div 					{ padding: 0 10px;}
.moving_img .row .grid img 					{ height: 350px;}
}
@media (max-width:1000px) {
.moving_img									{ padding: 0;}
.moving_img .row .grid img 					{ height: 350px;}
}
@media (max-width:700px) {
.moving_img .row .grid div 					{ padding: 0 5px;}
.moving_img .row .grid img 					{ height: 60vw; max-height: 350px;}
}



/***** pop-info *****/
.popup_info     				        { position: fixed; bottom: 2vw; right: 2vw; background: var(--mainColor1); padding: 20px 60px 20px 30px; text-align: left; display: none; z-index: 99999; max-width: 350px; color: #fff; border-radius: 10px}

.popup_info p                           { margin-bottom: 0; font-size: 18px;}

.popup_info_close 			            { position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; cursor: pointer; transition: all 400ms ease-in-out; background: url(../images/close.svg) center no-repeat;}

@media (max-width:1200px) {
.popup_info     				        { border-radius: 10px}
}

@media (min-width:1201px) {
.popup_info_close:hover                 { opacity: 0.5;}
.popup_info a.link-popup:hover          { background:#ec875d; color: #ffffff;}
}

@media (max-width:700px) {
.popup_info     				        { position: relative; bottom: inherit; right: inherit; padding: 20px 3vw; text-align: center; display: block; z-index: 100; box-shadow: none; max-width: inherit; border-radius: 0}
}
@media (max-width:400px) {
.popup_info     { padding: 20px 40px;}    
}


/***** mots *****/
.mot     				                { position: absolute; bottom: 0; left: 0; z-index: 20;}
.mot span                               { font: 400 60px/60px "Emmeline"; position: relative; color: var(--mainColor2);}
.mot span:after                         { content: ""; background: url(../images/arrow_vertical.svg) 50% / cover no-repeat; position: absolute; top: -40px; right: 40px;  width: 20px; height: 60px;}


.motvideo     				            { position: absolute; bottom: 0; left: 50%; z-index: 20; top:60%; transform: translateX(-50%); width: 100%; text-align: center}
.motvideo span                          { font: 400 60px/60px "Emmeline"; position: relative; color: #fff}

@media (max-width:1000px) {
.mot     				                { display: none;}
.motvideo 			                    { display: none;}
}


/***** card blog v1 *****/
.card_blog_v1 											{ position: relative;}
.card_blog_v1 a 										{ display: block; text-align: center;}
.card_blog_v1 .photo 									{ position: relative; overflow: hidden; border-radius: 30px 30px 0 0;}
.card_blog_v1 .photo img 								{ width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: 3/2;}
.card_blog_v1 .date 									{ width: 100px; height: 35px; text-align: center; font-size: 14px; line-height: 34px; border-radius: 0; background: #fff; position: absolute; right: 15px; top: 15px; z-index: 10; border-radius:var(--linkRadius)}
.card_blog_v1 .titre 									{ padding: 15px 30px 30px 30px; border-radius: 0; box-shadow: 0 0 30px 0 rgba(0,0,0,8%); display: grid; align-items: center; min-height: 100px; line-height: 24px; background-color: #fff; font-size: 16px; font-weight: 600; color:var(--mainColor2); border-radius: 0 0 30px 30px;}
.card_blog_v1 .link_arrow 								{ width: 34px; height: 34px; position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%); background-position: -3px 50%;}

@media (min-width:1201px) {
.card_blog_v1 .titre 									{ transition: color 300ms ease-in-out;}
.card_blog_v1 a:hover .titre							{ color: var(--mainColor1);}
}
@media (max-width:700px) {
.card_blog_v1 .photo .date 								{ width: 90px; height: 30px; font-size: 13px; line-height: 30px; right: 10px; top: 10px;}
.card_blog_v1 .titre 									{ padding: 10px 25px 25px 25px; line-height: 22px; min-height: 80px; font-size: 14px; border-radius: 0 0 20px 20px;}
.card_blog_v1 .photo 									{ border-radius: 20px 20px 0 0;}

}

/***** slider blog v1 *****/
.slider_blog_v1  										{ position: relative; overflow: hidden; margin: var(--marginTB);}
.slider_blog_v1 .slider_wrap  							{ position: relative; text-align: right;}
.slider_blog_v1 .slider  								{ margin: 25px -30px 25px 0; position: relative;}
.slider_blog_v1 .slider .slick-list 					{ overflow: visible; padding-bottom: 40px;}
.slider_blog_v1 .slider .slick-slide 					{ margin-right: 30px;}
.slider_blog_v1 .slider .slick-slide a					{ opacity: 0; visibility: hidden; transition-duration: 500ms;}
.slider_blog_v1 .slider .slick-active a 				{ opacity: 1; visibility: visible;}
.slider_blog_v1 .slider_nav 							{ position: absolute; right: -12px; top: -70px;}
.slider_blog_v1 .slider_nav .slick-arrow				{ filter: invert(1); width: 40px;}

/***** grid blog v1 *****/
.grid_blog_v1  											{ margin: var(--marginTB);}
.grid_blog_v1 .list 									{ display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 50px 30px; padding-bottom: 40px; margin-top: 25px;}


.bloc_txt_img .container .img.col_2.hide           { display: none;}
.bloc_txt_img .container .img.col_2.hide.active    { display: grid;}


.slider_logement .item.card_item_v1                 { margin-right: 30px; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 3%); max-width: 40vw;}
.slider_logement .slider_nav .slick-arrow			{ filter: invert(1); width: 40px;}
.slider_logement .slider_nav 						{ position: absolute; right: -12px; top: -70px;}
.slider_logement .slider_wrap 						{ width: 100vw; }
.slider_logement .tag                               { position: absolute; top: 20px; left: 20px; background:  var(--mainColor1); padding: 10px 20px; display: block; font-size: 12px; text-transform: uppercase; border-radius: 5px; color: #ffffff; font-weight: 600;} 

@media (max-width:1000px) {
.slider_logement .item.card_item_v1                 { max-width: 50vw;}    
}

@media (max-width:800px) {
.slider_logement .item.card_item_v1                 { max-width: 60vw;}    
}

@media (max-width:600px) {
.slider_logement .item.card_item_v1                 { max-width: 80vw;}    
}