/***** fonts et reset *****/
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Poppins:wght@300;400;500;600;700&display=swap');


body, ul, li, ol, form, h1, h2, h3, h4, h5, h6, div, span, p { padding:0; margin:0; border:0; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; text-size-adjust: none;}
article, aside, dialog ,figcaption, figure, footer, header, hgroup, main, nav, section { display: block;}  
input, textarea								{ -webkit-appearance: none; -ms-appearance: none; appearance: none; -moz-appearance: none; -o-appearance: none; border-radius: 0;}
*          									{ outline: none;}
strong, b									{ font-weight: 500; font-size: 16px;}
ul											{ list-style-type: none;}
body										{ font: 400 14px/26px "Poppins"; letter-spacing: 0.4px; color: #000; background: #fff; position: relative;}
body.active_overflow						{ height: 100vh; overflow: hidden;}
a											{ text-decoration: none; color: #06205c; position: relative;}
img											{ border: none;}
main 										{ position: relative; z-index: 10;}
#wrapper 									{ min-width: 320px; overflow: hidden; position: relative;}
#wrapper *									{ box-sizing: border-box;}
#footer 									{ position: relative; z-index: 15;}

@media (max-width:700px) {
body                                		{ font-size: 13px; line-height: 25px;}
strong, b									{ font-size: 14px;}
}


/***** scollbar *****/
::-webkit-scrollbar 						{ width: 6px; height: 6px; background-color: #fff;}
::-webkit-scrollbar-thumb					{ background-color: #34b5e6;}


/***** transition *****/
@media (min-width:1201px) {
.link, .slick-arrow, :before, :after, a 	{ transition: all 300ms ease-in-out;}
}


/***** class *****/
.wrapper 									{ width: 90vw; max-width: 1200px; margin: 0 auto; position: relative;}
.wrapper_large 								{ max-width: 1600px;}
.clear										{ clear: both; display: block;}
.anchor 									{ position: absolute; left: 0; top: -120px;}
.titre_head									{ position: relative;}
.titre_cap                              	{ font: 400 14px/20px "Poppins"; text-transform: uppercase; color: #032165; letter-spacing: 2.5px; margin-bottom: 10px;}
.titre_main                         		{ font: 700 80px/80px "Poppins"; letter-spacing: 0.6px; color: #032165; text-transform: uppercase; margin-bottom: 20px;}
.titre_main span.blue                       { display: block; color: #34b5e6;}
.titre_main span.smaller                    { display: block; font-size: 56px; line-height: 62px;}
.sous_titre                         		{ font: 700 28px/36px "Poppins"; letter-spacing: 0.8px; text-transform: uppercase; color: #34b5e6; margin-bottom: 15px;}
.chapo		 								{ font: 300 15px/30px "Poppins";}
.link 										{ font: 500 18px/68px "Poppins"; letter-spacing: 0.4px; height: 70px; color: #032165; border: none; border-radius: 10px; display: inline-block; padding: 0 40px; background: #fff; cursor: pointer; text-align: center;}
.link_blue									{ color: #fff; background: linear-gradient(to top, #34b5e6 0%, #34b5e6 50%, #51cfff 50%, #51cfff 100%); background-size: 100% 200%; background-position: 0 100%; cursor: pointer; text-align: center;}

@media (min-width:1201px) {
.link:hover 								{ color: #34b5e6;}
.link_blue:hover 							{ color: #fff; background-position: 0 0;}
}
@media (max-width:1200px) {
.titre_cap                              	{ font-size: 13px;  line-height: 15px; margin-bottom: 5px;}
.titre_main                         		{ font-size: 60px; line-height: 60px; margin-bottom: 15px;}
.titre_main span.smaller                    { font-size: 45px; line-height: 50px;}
.sous_titre                         		{ font-size: 24px; line-height: 32px;}
}
@media (max-width:1000px) {
.titre_main                         		{ font-size: 50px; line-height: 50px;}
.titre_main span.smaller                    { font-size: 50px; line-height: 50px;}
.link 										{ font-size: 16px; line-height: 60px; height: 60px; border-radius: 8px; padding: 0 30px;}
}
@media (max-width:700px) {
.wrapper 									{ width: 88vw;}
.anchor 									{ top: -100px;}
.titre_cap                              	{ font-size: 11px;}
.titre_main                         		{ font-size: 30px; line-height: 35px; margin-bottom: 10px;}
.titre_main span.smaller                    { font-size: 30px; line-height: 35px;}
.sous_titre                         		{ font-size: 20px; line-height: 26px; margin-bottom: 10px;}
.link 										{ font-size: 15px; line-height: 54px; height: 54px; padding: 0 25px;}
}



/***** bloc links *****/
.bloc_links 								{ display: grid; grid-template-columns: 200px 200px; grid-gap: 20px;}
.bloc_links .link							{ padding: 0;}

@media (max-width:1000px) {
.bloc_links 								{ grid-template-columns: 180px 180px; grid-gap: 15px;}
}
@media (max-width:700px) {
.bloc_links 								{ grid-template-columns: 1fr 1fr; grid-gap: 10px;}
}



/***** rs *****/
.rs											{ display: grid; grid-template-columns: 60px 60px 60px 60px; grid-gap: 10px;}
.rs a										{ width: 60px; height: 60px; border-radius: 50%; display: block; font-size: 0;}
.rs .facebook								{ background: url("../images/facebook.svg") 50% no-repeat #fff;}
.rs .instagram								{ background: url("../images/instagram.svg") 50% no-repeat #fff;}
.rs .twitter 								{ background: url("../images/twitter.svg") 50% no-repeat #fff;}
.rs .linkedin 								{ background: url("../images/linkedin.svg") 50% no-repeat #fff;}

@media (min-width:1201px) {
.rs a:hover 								{ opacity: 0.5;}
}
@media (max-width:1200px) {
.rs											{ grid-template-columns: 54px 54px 54px 54px;}
.rs a										{ width: 54px; height: 54px;}
}
@media (max-width:700px) {
.rs											{ grid-template-columns: 50px 50px 50px 50px;}
.rs a										{ width: 50px; height: 50px;}
}


/***** header et menu *****/
.header 									{ width: 100%; position: fixed; left: 0; top: 0; z-index: 100; text-align: center; padding: 20px 0 0 0; background: linear-gradient(to bottom, #fff 0%, #fff 50%, transparent 50%, transparent 100%); background-size: 100% 200%; background-position: 0 100%; transition: all 400ms ease-in-out;}
.header .wrapper 							{ max-width: none; display: grid; grid-template-columns: 240px 1fr 240px; align-items: center;}
.header .logo								{ width: 235px; display: block; position: relative; z-index: 150;}
.header .logo img							{ width: 100%; height: auto; display: block;}

.header_right 								{ display: grid; justify-content: end; position: relative; z-index: 105;}
.header_right .rs 							{ grid-gap: 10px; margin-right: -15px;}
.header_right .rs a 						{ background-color: transparent;}

.header_nav									{ display:block; z-index: 50;padding-right: 0}
.header_nav .menu							{ position: relative;}	
.header_nav .menu li						{ display: inline-block; vertical-align: middle; position: relative; margin: 0 15px;}	
.header_nav .menu li a						{ font: 400 16px/78px "Poppins"; color: #032165; height: 80px; display: block;}
.header_nav .menu>li.active>a  				{ color: #34b5e6;}

@media (min-width:1201px) {
.menu_mobile 								{ display: none;}
.header_nav .menu>li>a:hover  				{ color: #34b5e6;}
.sticky .header                     		{ background-position: 0 0; padding: 0;}
}
@media (max-width:1400px) {
.header .logo								{ width: 220px;}
.header_right .rs 							{ grid-gap: 0; margin-right: -15px;}
.header_nav .menu li						{ margin: 0 10px;}	
.header_nav .menu li a						{ font-size: 15px;}
}
@media (max-width:1200px) {
.header 									{ padding: 0; background: #fff;}
.header .wrapper 							{ grid-template-columns: 1fr auto;}
.header .logo								{ width: 235px;}

.header_right 								{ display: grid; grid-template-columns: auto auto; grid-gap: 5vw; align-items: center;}
.header_right .rs 							{ grid-gap: 10px; margin-right: 0;}
.header_right .rs a 						{ border: 1px solid #d7eaf4;}

.menu_mobile								{ width: 60px; height: 100px; display: inline-block; vertical-align: middle; cursor: pointer; position: relative; z-index: 105; margin: 0 -10px;}
.menu_mobile div							{ width: 40px; height: 2px; background: #032165; position: absolute; right: 50%; top: 50%; margin: -1px -20px 0 0;}
.menu_mobile div:before						{ width: 100%; height: 2px; background: #032165; position: absolute; right: 0; top: 8px; content: "";}
.menu_mobile div:after						{ width: 100%; height: 2px; background: #032165; position: absolute; right: 0; top: -8px; content: "";}
.menu_mobile.active div						{ width: 30px; height: 0; margin-right: -15px;}
.menu_mobile.active div:before				{ top: 0; transform: rotate(45deg);}
.menu_mobile.active div:after				{ top: 0; transform: rotate(-45deg);}

.header_nav 	  							{ width: 100%; height: 0; padding: 0; position: fixed; right: 0; top: 0; overflow: hidden; display: grid; align-items: center; z-index: 100; background: #fff; transition: height 300ms ease-in-out 400ms;}
.header_nav::-webkit-scrollbar				{ display: none;}
.header_nav .menu  							{ width: 100%; text-align: center; position: relative; z-index: 100; padding-bottom: 40px; opacity: 0; transition: all 400ms ease-in-out 0ms;}
.header_nav .menu li 						{ width: 100%; display: block; margin: 0;}
.header_nav .menu li a						{ font-size: 40px; line-height: 80px; height: 80px; font-weight: 600;}

.header_nav.active							{ height: 100%; transition-delay: 0ms;}
.header_nav.active .menu					{ opacity: 1; transition-delay: 400ms;}
}
@media (max-width:700px) {
.menu_mobile								{ height: 70px;}
.header .wrapper 							{ grid-template-columns: 1fr auto; grid-gap: 0;}
.header .logo								{ width: 180px; margin-top: 4px;}
.header_right   							{ grid-gap: 0;}
.header_right .rs 							{ position: fixed; bottom: 10vw; left: 0; right: 0; margin: 0 auto; width: 260px; grid-gap: 0; justify-content: space-between; opacity: 0; visibility: hidden; transition: all 300ms ease-in-out 0ms;}
.header_nav .menu  							{ padding-bottom: 10vw;}
.header_nav .menu>li>a						{ font-size: 24px; line-height: 60px; height: 60px;}
.header.active .header_right .rs 			{ opacity: 1; visibility: visible; transition-delay: 300ms;}
}


/***** banner *****/
.banner                             				{ position: relative; background: #032165; height: 100vh; max-height: 1050px; min-height: 800px; display: grid; grid-template-rows: 1fr 50%;}
.banner .shape_blue                    				{ position: absolute; bottom: 1px; left: 85%; width: auto; height: 200%;}
.banner .name                       				{ position: relative; display: grid; align-items: end; padding-right: 7.5vw;}
.banner .name:before                   				{ width: 100vw; position: absolute; left: 0; top: 0; bottom: 1px; background: #fff; transition: none; content: "";}
.banner .name .titre_main   						{ width: 100%; max-width: 1100px; margin: 0 auto; position: relative;}
.banner .name .titre_main span:first-of-type 		{ display: block; font-size: 140px; line-height: 100px; color: #d8eef9; text-align: right; margin-bottom: 40px;}
.banner .name .titre_main span:last-of-type 		{ display: block; font-size: 200px; line-height: 140px;}
.banner .row                       					{ padding: 70px 0 0 0; width: 100%; max-width: 900px; margin: 0 auto; position: relative;}
.banner .row img               						{ display: block;}
.banner .row p         								{ color: #fff; font-size: 30px; line-height: 34px; letter-spacing: 0.8px;}
.banner .row .titre_main           					{ color: #fff; font-size: 30px; line-height: 34px; font-weight: 600; letter-spacing: 1px; display: grid; grid-template-columns: auto 100px 1fr; grid-gap: 15px; align-items: center; margin: 20px 0 40px 0;}
.banner .row .titre_main sup           				{ text-transform: none; font-weight: 500; font-size: 18px; line-height: 20px; padding-left: 2px;}
.banner .row .titre_main img           				{ width: auto; height: 100%; max-height: 55px;}
.banner .row .slogan            					{ color: #34b5e6; font-size: 35px; line-height: 34px; font-weight: 400; font-style: italic; margin-bottom: 7.5%; position: relative;}
.banner .row picture               					{ position: absolute; left: 70%; bottom: 0; height: 117.5%;}
.banner .row picture img           					{ width: auto; height: 100%;}

@media (max-width:1800px) {
.banner                             				{ min-height: 750px;}
.banner .name .titre_main   						{ max-width: 920px;}
.banner .name .titre_main span:first-of-type 		{ font-size: 110px; line-height: 80px; margin-bottom: 30px;}
.banner .name .titre_main span:last-of-type 		{ font-size: 170px; line-height: 118px;}
.banner .row                       					{ padding: 5% 0 0 0;}
.banner .row picture               					{ left: 65%; height: 120%;}
}
@media (max-width:1200px) {
.banner                             				{ grid-template-rows: 1fr 55%;}
.banner .shape_blue                  				{ display: none;}
.banner .name       								{ padding-right: 10vw;}
.banner .name .titre_main   						{ max-width: 720px;}
.banner .name .titre_main span:first-of-type 		{ font-size: 90px; line-height: 70px; margin-bottom: 25px;}
.banner .name .titre_main span:last-of-type 		{ font-size: 140px; line-height: 100px;}
.banner .row                       					{ padding: 8vw 0 0 0; max-width: 750px;}
.banner .row p         								{ font-size: 24px; line-height: 30px;}
.banner .row .slogan            					{ font-size: 30px; line-height: 30px; margin-bottom: 40px; }        
.banner .row .titre_main           					{ font-size: 24px; line-height: 30px; grid-template-columns: auto 90px 1fr; grid-gap: 15px; margin: 15px 0 35px 0;}
.banner .row .titre_main sup           				{ font-size: 14px; font-weight: 400;}
.banner .row picture               					{ left: 60%; height: 120%;}
}
@media (max-width:1000px) {
.banner                             				{ display: block; height: auto; max-height: none; min-height: inherit;}
.banner .name       								{ padding: 130px 5vw 0 5vw; text-align: center;}
.banner .name .titre_main span:first-of-type 		{ font-size: 80px; line-height: 60px; text-align: center; margin-bottom: 20px;}
.banner .name .titre_main span:last-of-type 		{ font-size: 120px; line-height: 85px;}
.banner .row                       					{ max-width: none; padding: 60px 5vw 0 5vw; text-align: center;}
.banner .row:before 								{ width: 2000vw; height: 100px; position: absolute; left: -50vw; bottom: 0; background: #fff; transition: none; content: "";}
.banner .row .slogan            					{ font-size: 25px; line-height: 30px; margin-bottom: 30px; }        
.banner .row .titre_main 							{ display: block; margin-bottom: 25px;}
.banner .row .titre_main>* 							{ display: inline-block; vertical-align: middle;}
.banner .row .titre_main img           				{ width: 150px; margin: 0 5px;}
.banner .row picture               					{ position: relative; left: auto; bottom: auto; height: auto;}
.banner .row picture img           					{ width: 450px; height: auto; display: block; margin: 0 auto;}
.banner .bloc_links                					{ grid-template-columns: 1fr 1fr; padding-top: 40px; position: relative;}
.banner .bloc_links .link:not(.link_blue)			{ background: #ebf6fc;}
}
@media (max-width:700px) {
.banner .name       								{ padding: 100px 6vw 0 6vw;}
.banner .name .titre_main   						{ max-width: 400px;}
.banner .name .titre_main span:first-of-type 		{ font-size: 40px; line-height: 30px; margin-bottom: 15px; text-align: left;}
.banner .name .titre_main span:last-of-type 		{ font-size: 60px; line-height: 42px; text-align: right;}
.banner .row           								{ padding: 40px 6vw 0 6vw;}
.banner .row:before 								{ height: calc(6vw + 54px);}
.banner .row p         								{ font-size: 16px; line-height: 24px; max-width: 240px; margin: 0 auto;}
.banner .row .slogan            					{ font-size: 20px; line-height: 30px;}            
.banner .row .titre_main           					{ font-size: 20px; line-height: 28px; display: block; margin: 10px 0 15px 0; position: relative; padding-bottom: 45px;}
.banner .row .titre_main sup           				{ font-size: 12px;}
.banner .row .titre_main img 						{ position: absolute; left: 50%; bottom: 0; margin: 0; transform: translateX(-50%); width: 130px; height: auto;}
.banner .row picture img           					{ width: 84vw; max-width: 450px;}
.banner .bloc_links                					{ padding-top: 6vw;}
}





/***** engagements *****/
.engagements 								{ padding: 6vw 5vw; background: #fff; position: relative; z-index: 10; text-align: center;}
.engagements .shape_blue 					{ position: absolute; top: 0; right: 65%; width: auto; height: 100%; display: block;}
.engagements .slider						{ max-width: 1800px; width: 100%; margin: 0 auto; position: relative; text-align: left;}
.engagements .container    			        { text-align: center; display: flex; justify-content: center; width: 100%;}
.engagements .nav_slider    			    { position: absolute; top: 50%; max-width: 2030px; width: 100%; display: flex; justify-content: space-between;}
.engagements .link             			    { margin-top: 20px;}
.engagements .slick-slide a				    { opacity: 0; visibility: hidden; transition-duration: 500ms;}
.engagements .slick-active a 			    { opacity: 1; visibility: visible;}

.engagements .slider .item             		{ margin: 0 20px;}
.engagements .slider .item:nth-child(odd)	{ margin-top: 3vw;}
.engagements .slider .img					{ display: block; overflow: hidden; border-radius: 8px; transition: all 300ms ease-in-out;}
.engagements .slider .img img				{ width: 100%; height: auto; display: block; transition: all 300ms ease-in-out;}
.engagements .slider .titre_main			{ font-size: 22px; line-height: 30px; margin: 25px 0 0 0; padding: 0 30px; transition: all 300ms ease-in-out;}

@media (min-width:1201px) {
/*
.engagements .slider .item:hover .img			{ transform: scale(0.95);}
.engagements .slider .item:hover .img img		{ transform: scale(1.1);}
.engagements .slider .item:hover .titre_main 	{ margin-left: 8%;}
*/
}
@media (max-width:1600px) {
.engagements .slider .titre_main			{ margin: 25px 0 0 0; padding: 0 25px;}
}
@media (max-width:1200px) {
.engagements 								{ padding: 8vw 5vw;}
.engagements .shape_blue 					{ display: none;}
.engagements .slider .titre_main			{ font-size: 20px; line-height: 26px; margin: 20px 0 0 0; padding: 0 20px;}
}
@media (max-width:1000px) {
.engagements .slider						{ grid-template-columns: 1fr 1fr; grid-gap: 5vw; margin-top: 30px;}
.engagements .slider .titre_main			{ padding: 0 15px;}
}
@media (max-width:700px) {
.engagements 								{ padding: 12vw 6vw;}
.engagements .slider						{ grid-template-columns: 1fr; grid-gap: 6vw; margin-top: 20px; width: 90%;}
.engagements .slider .item             		{ margin: 0 10px;}    
.engagements .slider .item:nth-child(odd)	{ margin-top: 0;}
.engagements .slider .titre_main			{ font-size: 16px; line-height: 22px; margin-top: 15px;}
.engagements .nav_slider    			    { top: calc(50% - 30px); }
}



.engagements .btn                           { display: grid; grid-template-columns: 250px 250px; grid-gap: 10px; justify-content: center;}
@media (max-width:700px) {
.engagements .btn                           { grid-template-columns: auto; grid-gap: 10px; justify-content: center;}
.engagements .btn .link                     { margin: 0;}
}


/***** about *****/
.about 										{ padding: 6vw 5vw; background: #fff; position: relative; z-index: 10; color: #fff;}
.about:before                   			{ width: 100vw; position: absolute; right: 50%; margin-right: -170px; top: 0; bottom: 0; background: #032165; transition: none; content: "";}
.about .row 								{ max-width: 1000px; margin: 0 auto; position: relative;}
.about .row p 								{ max-width: 440px; position: relative; margin: 30px 0 0 50px;}
.about .row .titre_cap,
.about .row .titre_main						{ color: #fff;}
.about .row .titre_main .blue				{ padding-left: 150px; position: relative;}
.about .row .titre_main .blue:before 		{ width: 100px; height: 4px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: #fff; transition: none; content: "";}
.about .row .bloc_links						{ margin: 30px 0 0 50px;}

@media (max-width:1200px) {
.about 										{ padding: 8vw 5vw;}
.about:before                   			{ right: 15%; margin-right: 0;}
.about .row .titre_cap 						{ margin-bottom: 10px;}
.about .row .titre_main .blue				{ padding-left: 120px;}
.about .row .titre_main .blue:before 		{ width: 85px; height: 4px;}
}
@media (max-width:1000px) {
.about 										{ padding: 8vw 5vw; text-align: center;}
.about:before                   			{ width: 200vw; right: -50vw;}
.about .row .titre_main .blue				{ padding-left: 0;}
.about .row .titre_main .blue:before 		{ display: none;}
.about .row p 								{ max-width: 90%; margin: 25px auto 0 auto;}
.about .row .bloc_links						{ margin: 30px 0 0 0; grid-template-columns: 1fr 1fr;}
}
@media (max-width:700px) {
.about 										{ padding: 12vw 6vw; text-align: left;}
.about .row .titre_main .blue				{ padding-left: 0;}
.about .row .titre_main .blue:before 		{ display: none;}
.about .row p 								{ max-width: none; margin-top: 15px;}
.about .row .bloc_links						{ margin: 25px 0 0 0;}
}


/***** rs elections *****/
.rs_elections  								{ padding: 6vw 5vw; position: relative; z-index: 20;}
.rs_elections .shape_blue 					{ position: absolute; bottom: 0; left: 65%; width: auto; height: 120%; display: block;}
.rs_elections .grid							{ width: 100%; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; align-items: start; position: relative;}
.rs_elections .bloc_rs						{ background: #ebf6fc; max-width: 600px; padding: 60px 80px; border-radius: 10px;}
.rs_elections .bloc_rs .rs 					{ margin-top: 30px;}
.rs_elections .bloc_elections  				{ display: grid; justify-content: end; margin-top: 6vw;}
.rs_elections .bloc_elections .row			{ max-width: 500px;}
.rs_elections .bloc_elections .bloc_links 	{ margin: 30px 0 0 0;}
.rs_elections .bloc_elections .link_small 	{ width: 240px; border: 1px solid #c1dfee; font-size: 16px; line-height: 66px; font-weight: 400;}
.rs_elections .bloc_elections .link 		{ margin-top: 30px;}

@media (min-width:1201px) {
.rs_elections .bloc_rs .rs a:hover 			{ opacity: 1; background-color: transparent;}
}
@media (max-width:1200px) {
.rs_elections 								{ padding: 8vw 5vw;}
.rs_elections .shape_blue 					{ display: none;}
.rs_elections .grid							{ grid-gap: 5vw;}
.rs_elections .bloc_rs						{ padding: 50px 60px;}
.rs_elections .bloc_rs .rs 					{ margin-top: 25px;}
.rs_elections .bloc_elections  				{ justify-content: start; margin-top: 8vw;}
.rs_elections .bloc_elections .link 		{ margin-top: 25px;}
}
@media (max-width:1000px) {
.rs_elections .grid							{ display: block;}
.rs_elections .bloc_rs						{ max-width: 450px;}
.rs_elections .bloc_elections  				{ justify-content: end; margin-top: 8vw;}
.rs_elections .bloc_elections .row			{ max-width: 550px;}
.rs_elections .bloc_elections .link_small 	{ width: 220px; font-size: 15px; line-height: 56px;}
}
@media (max-width:700px) {
.rs_elections 								{ padding: 12vw 6vw;}
.rs_elections .bloc_rs						{ padding: 30px 35px; max-width: none;}
.rs_elections .bloc_rs .rs 					{ margin-top: 20px;}
.rs_elections .bloc_elections  				{ margin-top: 12vw;}
.rs_elections .bloc_elections .bloc_links 	{ margin-top: 5px;}
.rs_elections .bloc_elections .link_small 	{ width: 100%; font-size: 13px; line-height: 52px;}
.rs_elections .bloc_elections .link 		{ margin-top: 20px; width: 100%; text-align: center;}
}




/***** page *****/
#page 								{ padding-bottom: 60px;}

@media (max-width:1200px) {
#page 								{ padding-bottom: 40px;}
}
@media (max-width:1000px) {
#page 								{ padding-bottom: 20px;}
}



/***** top page *****/
.top_page 							{ position: relative; padding-top: 180px;}
.top_page p							{ margin-top: 15px;}

@media (max-width:1800px) {
.top_page 							{ padding-top: 160px;}
}
@media (max-width:1200px) {
.top_page 							{ padding-top: 120px;}
}
@media (max-width:700px) {
.top_page 							{ padding-top: 80px;}
}



/***** bloc texte *****/
.bloc_texte							{ margin: 80px auto; position: relative;}
.bloc_texte :last-child				{ margin-bottom: 0;}
.bloc_texte img,
.bloc_texte video					{ width: 100%; height: auto; display: block;}

@media (max-width:1200px) { 
.bloc_texte							{ margin: 70px auto;}
}
@media (max-width:1000px) { 
.bloc_texte							{ margin: 50px auto;}
}
@media (max-width:600px) { 
.bloc_texte							{ margin: 30px 0;}
}




/***** bloc grid *****/
.bloc_grid	                        { display: grid; grid-template-columns: 1fr 50%; grid-gap: 100px; align-items: center; position: relative; margin: 100px 0; padding: 0 100px 0 0;}
.bloc_grid.align_top                { align-items: start;}
.bloc_grid .photo					{ position: relative; line-height: 0;}
.bloc_grid .photo img 				{ width: 100%; height: auto; object-fit: cover; display: block; position: relative; z-index: 10; border-radius: 8px; transition: all 300ms ease-in-out;}
.bloc_grid .texte					{ position: relative;}
.bloc_grid .texte :last-child 		{ margin-bottom: 0;}
.bloc_grid .texte .row				{ max-width: 600px; text-align: left; display: inline-block;}
.bloc_grid p               			{ margin-bottom: 15px;}
.bloc_grid .link					{ margin-top: 5px;}
.bloc_grid.reverse 					{ grid-template-columns: 50% 1fr; padding: 0 0 0 100px;}
.bloc_grid.reverse .texte			{ grid-area: 1 / 1; text-align: right;}
.bloc_grid.reverse .photo        	{ grid-area: 1 / 2;}
.bloc_grid.small               		{ grid-template-columns: 1fr 60%; max-width: 1400px; margin-left: auto; margin-right: auto;}
.bloc_grid.reverse.small			{ grid-template-columns: 60% 1fr;}
.bloc_grid.small .texte .row		{ max-width: none;}

@media (min-width:1201px) { 
.bloc_grid:hover .photo img 	    { transform: scale(0.9);}
}
@media (max-width:1400px) { 
.bloc_grid	                        { grid-template-columns: 1fr 1fr; grid-gap: 80px; padding: 0;}
.bloc_grid.reverse 					{ grid-template-columns: 1fr 1fr; padding: 0;}
.bloc_grid.small               		{ max-width: none;}
}
@media (max-width:1200px) { 
.bloc_grid	                        { grid-gap: 60px; align-items: start; margin: 80px 0;}
}
@media (max-width:1000px) { 
.bloc_grid	                        { grid-template-columns: 1fr; grid-gap: 40px; margin: 60px auto; max-width: 600px;}
.bloc_grid .texte .row				{ max-width: none; display: block; margin: 0 auto;}
.bloc_grid.reverse 					{ grid-template-columns: 1fr;}
.bloc_grid.reverse .texte			{ grid-area: auto;}
.bloc_grid.reverse .photo        	{ grid-area: auto;}
.bloc_grid.small               		{ grid-template-columns: 1fr; max-width: 600px;}
.bloc_grid.small.reverse 			{ grid-template-columns: 1fr;}
}
@media (max-width:700px) { 
.bloc_grid	                        { grid-template-columns: 1fr; margin: 40px auto; grid-gap: 25px; max-width: none;}
.bloc_grid p               			{ margin-bottom: 10px;}
.bloc_grid .link					{ width: 100%; text-align: center;}
}



/** ul list **/
.ul_list									{ margin: 20px 0;}
.ul_list li									{ padding: 5px 0 5px 30px; position: relative; background: url("../images/check.svg") left 10px no-repeat;}

@media (max-width:1200px) { 
.ul_list									{ margin: 15px 0;}
}
@media (max-width:700px) { 
.ul_list									{ margin: 10px 0;}
}



/** timeline **/
#parcours .timeline 							{ position: relative; display: grid; grid-gap: 20px;}
#parcours .timeline .item						{ position: relative; display: grid; grid-template-columns: 180px 1fr; border: 1px solid #c1dfee; border-radius: 8px; overflow: hidden;}
#parcours .timeline .date						{ position: relative; width: 100%; height: 100%; font-size: 15px; line-height: 36px; background: #ebf6fc; padding: 30px 0; text-align: center;}
#parcours .timeline .texte						{ padding: 30px 40px; margin: 0; position: relative;}
#parcours .timeline .texte ul					{ margin: 0;}
#parcours .timeline .texte ul li				{ padding-left: 22px; background: url("../images/list.svg") left 15px no-repeat;}

@media (max-width:1000px) {
#parcours .timeline .item						{ grid-template-columns: 160px 1fr;}
}
@media (max-width:700px) {
#parcours .timeline 							{ grid-gap: 15px;}
#parcours .timeline .item						{ grid-template-columns: 1fr;}
#parcours .timeline .date						{ font-size: 14px; line-height: 20px; padding: 15px 25px; text-align: left;}
#parcours .timeline .texte						{ padding: 15px 25px;}
#parcours .timeline .texte ul li				{ padding-left: 20px; background-position: left 14px;}

}


/** support **/
@media (max-width:1200px) { 
#support .bloc_grid.small .photo             	{ background: #d9eef9; border-radius: 8px;}
#support .bloc_grid.small .photo.darkblue 		{ background: #032164;}
}
@media (max-width:1000px) { 
#support .bloc_grid.small               		{ grid-template-columns: 220px 1fr; max-width: none;}
#support .bloc_grid.small.reverse 				{ grid-template-columns: 220px 1fr;}
#support .bloc_grid.small.reverse .texte		{ grid-area: 1 / 2;}
#support .bloc_grid.small.reverse .photo 		{ grid-area: 1/ 1;}
}
@media (max-width:700px) { 
#support .bloc_grid.small               		{ grid-template-columns: 1fr; max-width: none;}

#support .bloc_grid.small .photo img 			{ height: 30vw; object-fit: contain;}

#support .bloc_grid.small.reverse 				{ grid-template-columns: 1fr;}
#support .bloc_grid.small.reverse .texte		{ grid-area: auto;}
#support .bloc_grid.small.reverse .photo 		{ grid-area: auto;}
}




/***** champs formulaire *****/ 
select,
input[type="text"],
input[type="email"],
input[type="date"],
textarea 							{ width: 100%; height: 70px; border: 1px solid #34b5e6; font: 400 16px/30px "Poppins"; letter-spacing: 0.4px; padding: 0 25px 2px 25px; background: transparent; color: #fff; margin: 0;}
textarea							{ min-height: 250px; padding: 20px 25px; display: block;}
::placeholder 						{ color: #34b5e6; opacity: 0.65;}

@media (max-width:1000px) { 
select,
input[type="text"],
input[type="email"],
input[type="date"],
textarea 							{ height: 60px; font-size: 15px; line-height: 28px;}
}
@media (max-width:700px) { 
select,
input[type="text"],
input[type="email"],
input[type="date"],
textarea 							{ font-size: 13px; line-height: 24px; height: 50px; padding: 16px 20px 16px 20px;}
}



/** formulaire **/
.formulaire 							{ position: relative; max-width: 820px; margin: 0 auto;}
.formulaire form .grid					{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px;}
.formulaire form .grid>div				{ display: grid; grid-gap: 20px;}
.formulaire form .link					{ width: 260px; font-size: 16px; line-height: 66px; font-weight: 400; cursor: pointer; padding: 0; border: none; display: block; margin: 35px auto 0 auto;}

@media (max-width:1000px) { 
.formulaire 							{ max-width: 600px;}
.formulaire form .grid					{ grid-template-columns: 1fr;}
.formulaire form .link					{ width: 240px; font-size: 16px; line-height: 56px; margin: 30px auto 0 auto;}
}
@media (max-width:700px) { 
.formulaire form .grid					{ grid-template-columns: 1fr; grid-gap: 10px;}
.formulaire form .grid>div				{ grid-gap: 10px;}
.formulaire form .link					{ width: 220px; font-size: 14px; line-height: 52px; margin: 25px auto 0 auto;}
}



/***** confirmation formulaire *****/
.confirmation_form			 			{ text-align: center; background: #fff; padding: 50px; border-radius: 8px;}
.confirmation_form p			 		{ font-size: 15px; line-height: 25px; margin: 0; color: #051d54;}

@media (max-width:1200px) {
.confirmation_form			 			{ padding: 40px;}
}
@media (max-width:700px) {
.confirmation_form			 			{ padding: 30px;}
.confirmation_form p			 		{ margin: 0 0 10px 0;}
}


/***** RGPD *****/
#rgpdForm 									{ font: 300 12px/22px "Poppins"; letter-spacing: 0.6px;}
#rgpdForm input[type=checkbox]				{ width: 20px; height: 20px; display: block; float: left; padding: 0; margin: 2px 0 0 0; -webkit-appearance: checkbox; -ms-appearance: checkbox; appearance: checkbox; -moz-appearance: checkbox; -o-appearance: checkbox; border: none;}
#rgpdForm label								{ display: block; margin: 0; padding-left: 40px; font: 300 12px/22px "Poppins"; letter-spacing: 0.4px; color: #fff;}
#rgpdForm a									{ position: relative; color: #fff; padding-bottom: 2px;}
#rgpdFormAcceptError						{ padding: 10px 0 0 40px; color: red;}

@media (min-width:1201px) {
#rgpdForm a:hover 							{ opacity: 0.5;}
}
@media (max-width:700px) { 
#rgpdForm 									{ font-size: 11px; line-height: 20px;}
#rgpdForm label								{ padding-left: 35px; font-size: 11px; line-height: 20px;}
#rgpdFormAcceptError						{ padding: 5px 0 0 35px;}
}


/* custom */
.rgpd 										{ margin-top: 20px; text-align: left;}

@media (max-width:700px) { 
.rgpd 										{ margin-top: 15px; padding-right: 0;}
}


/***** footer *****/
.footer										{ width: 100%; position: relative; padding-top: 120px; background: #051d54; color: #fff; font-size: 0; text-align: center;}
.footer .titre_main 						{ color: #fff; margin-bottom: 40px;}
.footer .scroll 							{ width: 60px; height: 60px; border-radius: 50%; display: block; font-size: 0; background: url("../images/scrolltop.svg") 50% 48% no-repeat #fff; position: fixed; right: 2.5vw; bottom: 2.5vw; opacity: 0; visibility: hidden; transition: all 200ms ease-in-out;}
.footer .scroll.show 						{ opacity: 1; visibility: visible;}
.footer_bottom   							{ padding: 30px 0; line-height: 0; margin-top: 80px;}
.footer_bottom li 							{ display: inline-block; font-size: 12px; line-height: 20px; margin-right: 25px; letter-spacing: 0.6px; position: relative;}
.footer_bottom li a 						{ color: #fff;}
.footer_bottom li:after						{ width: 1px; height: 9px; content: ""; position: absolute; right: -13px; top: 5px; background: #34b5e6;}
.footer_bottom li:last-child  				{ margin: 0;}
.footer_bottom li:last-child:after 			{ display: none;}

@media (min-width:1201px) {
.footer_bottom li a:hover					{ color: #34b5e6;}
}
@media (max-width:1200px) {
.footer										{ padding-top: 100px;}
.footer .titre_main 						{ margin-bottom: 30px;}
.footer .scroll 							{ width: 54px; height: 54px; right: 3vw; bottom: 3vw;}
}
@media (max-width:1000px) {
.footer										{ padding-top: 80px;}
}
@media (max-width:700px) {
.footer										{ padding-top: 10vw;}
.footer .titre_main 						{ margin-bottom: 20px;}
.footer .scroll 							{ width: 50px; height: 50px; right: 3.5vw; bottom: 3.5vw;}
.footer_bottom 	 							{ text-align: center; padding: 10vw 0 25px 0; margin: 0;}
.footer_bottom li 							{ display: block; margin: 2px 0; font-size: 11px; line-height: 26px;}
.footer_bottom li:after						{ display: none;}
}