:root {

    --size_hd: 					 1920px;
    --size_md: 					 1280px;
    --size_sd: 					 1024px;

    --size_pad: 				   2rem;
    --size_rad: 				   40px;

    --size_frm: 				 1.4rem;

    --color_main: 				#00323C;	/*Nexia Dark Teal/**/
    --color_down: 				#00B9B9;	/*Nexia Light Teal/**/
    --color_downtr: 		  #00B9B9dd;
    --color_dark: 		 	  #00323c96 ;

	--color_nexia_blue:			#1985c3;
	--color_nexia_pink:			#ca1c66;
	--color_nexia_darkblue:		#2e53a1;
	--color_nexia_orange:		#ed9034;
	--color_nexia_purple:		#841262;
	--color_nexia_yellow:		#fbc311;

	--url_cdn: 					'//cdn.nexia-sa.fr';
	--url_media: 				'//media.nexia-sa.fr';

}

@charset "utf-8";

@font-face{
    font-family:'Effra';
    src:url('//cdn.nexia-sa.fr/webfont/effra/regular.woff2') format('woff2'),
    	url('//cdn.nexia-sa.fr/webfont/effra/regular.woff') format('woff');
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:'Effra';
    src:url('//cdn.nexia-sa.fr/webfont/effra/light.woff2') format('woff2'),
    	url('//cdn.nexia-sa.fr/webfont/effra/light.woff') format('woff');
    font-weight:300;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:'Effra';
    src:url('//cdn.nexia-sa.fr/webfont/effra/medium.woff2') format('woff2'),
    	url('//cdn.nexia-sa.fr/webfont/effra/medium.woff') format('woff');
    font-weight:500;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:'Effra';
    src:url('//cdn.nexia-sa.fr/webfont/effra/heavy.woff2') format('woff2'),
    	url('//cdn.nexia-sa.fr/webfont/effra/heavy.woff') format('woff');
    font-weight:bold;
    font-style:normal;
    font-display:swap;
}

*{
	box-sizing:border-box;
	text-decoration:none;
	outline:none;
	-webkit-font-smoothing:antialiased;
	padding:0;
	margin:0;
	text-decoration:none
}

html{

    width:100%;
    height:100%;
    font-family:'Effra', sans-serif;
    background:var(--color_main);
    color:#FFF

}

body {

    width:100%;
    min-height:100vh;

}

.waiting {cursor:wait}

.videoWrapper{
    position:relative;
    padding-bottom:56.25%;
    padding-top:0;
    height:0;
    margin:0 auto;
}

.videoWrapper iframe{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    box-shadow:0 0 5em rgba(0, 0, 0, .2);
    border-radius:var(--size_rad) 0;
}



a{color:inherit;text-decoration:none}

a img,
img{
	outline:none;
	border:none;
}

sup,
sub{
	line-height:0;
	font-size:75%;
}

ul,
ol{overflow:hidden}

ul + br,
ol + br{clear:both}

ul:not(.list),
ol:not(.list),
ul:not(.list) li,
ol:not(.list) li{
	list-style:inside;
	list-style:none
}


p,li p{margin:0 0 calc(var(--size_pad) / 4) 0}


header,
header > div,
section
{
	width:100%;
	height:auto;
	max-width:100%;
	margin:0 auto
}

header,
header > div
{
	max-width:var(--size_hd);
}

header > div,
footer > div,
SubscribeAction{
	padding:var(--size_pad);
}

header {font-size:1rem}

header img{
	display:block;
	width:auto;
	height:calc(var(--size_pad) * 1.5)
}

main {
	width:100%;
}

article{
	width:100%;
	padding:0 var(--size_pad);
	background:url(//media.nexia-sa.fr/s&a/template/HD_waves.jpg) no-repeat center 0;
	background-size:100% auto
}

section {	max-width:var(--size_hd);
}

section#introduction{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	height:calc(80vh - calc(var(--size_pad) * 4));
	min-height:50vh
}

section#introduction *			{width:100%;text-align:center}
section#introduction div		{font-size:2rem;margin-bottom:calc(var(--size_pad) * 2)}
section#introduction h1			{font-size:3em;font-weight:bold}
section#introduction p			{font-size:1em;max-width:60%;margin:1em auto 0}


section#interview{
	max-width:var(--size_md)
}


section#calltoaction{
	display:block;
	margin:20vh auto;
	padding:0;
	background:url(//media.nexia-sa.fr/s&a/template/HD_circle_crop.jpg) no-repeat center center;
	background-size:contain
}

section#calltoaction > div > div{
	position:relative;
	display:flex;
	align-items:stretch;
	max-width:calc(var(--size_md) - calc(var(--size_pad) * 2));
	margin:0 auto var(--size_pad);
	padding:0;
	background:#FFF;
	border-radius:calc(var(--size_rad) + 2px) 0 var(--size_rad)
}

section#calltoaction > div > div div{
	flex:1;
	padding:calc(var(--size_pad) * 2);
	color:var(--color_main);
}



section#calltoaction h2					{font-size:1.75em;margin:.5rem 0 1rem}
section#calltoaction p					{font-size:1.4em;line-height:1.4}
section#calltoaction p.cat				{color:var(--color_down)}

section#calltoaction img				{display:block;width:40%;max-width:480px;object-fit:cover;object-position:center;border-radius:var(--size_rad) 0 0 0}

section#calltoaction p.btn				{margin:var(--size_pad) 0 0}
section#calltoaction p.btn a			{display:inline-block;font-size:90%;border-radius:1rem 0;padding:.33rem 1.4rem;transition:all .3s ease-in-out;border:1px solid var(--color_main)}
section#calltoaction p.btn a:hover		{color:#FFF;background:var(--color_nexia_pink);border:1px solid var(--color_nexia_pink)}



CallToAction,
SubscribeAction {

	display:block;
	width:100%;
	margin:calc(var(--size_pad) * 2) auto 20vh;

	transition:all .3s ease-in-out;

	max-width:calc(var(--size_md) - calc(var(--size_pad) * 2));

}

SubscribeAction {

	background:var(--color_down);
	border-radius:var(--size_rad) 0;

}

CallToAction {

	text-align:center;

}

CallToAction a 				{display:block}
CallToAction figure			{display:block}
CallToAction img 			{width:400px;max-width:80%}

CallToAction figcaption,
SubscribeAction .form {

	display:flex;
	align-items:center;
	width:100%;
	max-width:var(--size_md);
	margin:0 auto;
	text-align:left;
	font-size:var(--size_frm);

}

CallToAction figcaption 	{background:var(--color_downtr);margin:2em auto;display:inline-block;width:auto;padding:var(--size_pad);border-radius:var(--size_rad) 0}


SubscribeAction.ttt 	{background:var(--color_nexia_pink)}
SubscribeAction.fail 	{background:var(--color_nexia_darkblue)}



SubscribeAction .form label {
	flex:1;
	font-size:1em;
}

SubscribeAction .form input {
	font-size:1em;
	height:calc(var(--size_frm) * 2);
	margin-left:2ch;
	border:none;
	background:#FFF;
	color:var(--color_main);
	line-height:calc(var(--size_frm) * 2);
	padding:0 var(--size_frm);
	font-family:"Effra";
	border-radius:var(--size_frm) 0 0 var(--size_frm);
}

SubscribeAction .form img {

	background:#FFF;
	cursor:pointer;
	transition:all .3s ease-in-out;
	height:calc(var(--size_frm) * 2);
	width:auto;
	border-radius:0 var(--size_frm) var(--size_frm) 0;
	padding:.3rem;
	margin:0;

}

SubscribeAction .form img:hover {

	background:var(--color_main);

}

footer {

	position:relative;
	width:100%;
	padding:0;
	margin:0;
    background:url(//media.nexia-sa.fr/s&a/template/HD_spectre_short.jpg) no-repeat center bottom;
    background-size:100% auto

}

footer 	h2 				{text-align:center;font-size:2rem;margin:var(--size_pad) 0}

footer 	ul				{display:flex;width:100%;max-width:var(--size_hd);padding:var(--size_pad) var(--size_pad) 20vh;justify-content:center;gap:8rem;margin:0 auto}
footer 	li				{width:20em;max-width:30%;padding:var(--size_pad);text-align:center}
footer 	li	> a			{}
footer 	li	> a	img		{height:4rem;width:auto;margin:0 auto}
footer 	li	nav			{display:flex;gap:1ch;justify-content:center;margin:1rem auto var(--size_pad)}
footer 	li	nav	img		{display:block;height:var(--size_pad);width:auto}

footer > div + div		{position:absolute;width:100%;padding:1.2rem var(--size_pad) .9rem;bottom:0;background:var(--color_dark);color:#ddd}
footer > div + div	p	{font-size:.9rem;max-width:var(--size_hd);margin-right:auto;margin-left:auto;color:inherit}


@media screen and (max-width: 1280px){

	:root {

	    --size_pad: 				   1rem;
	    --size_rad: 				   2rem;

	    --size_frm: 				 1rem;

	}

}

@media screen and (max-width: 1024px){

	header img 							{margin:2rem auto;height:4em}

	article 							{background-size:1024px auto}

	section#introduction  				{height:auto;min-height:auto;margin-bottom:calc(var(--size_pad) * 4)}
	section#introduction h1 			{max-width:100%;font-size:1em}
	section#introduction p 				{max-width:100%;font-size:.66em}

	section#calltoaction				{margin:10vw auto 0}
	section#calltoaction > div > div 	{flex-direction:column}
	section#calltoaction 		img 	{width:100%}
	section#calltoaction .btn a 		{font-size:66%!important;text-align:center;width:100%;padding:.8rem 1.4rem!important;margin-top:2rem}
	section#calltoaction img 			{max-width:100%;max-height:50vh}


	SubscribeAction 					{padding:2rem;margin-bottom:10vh}

}

@media screen and (max-width: 800px) {

	SubscribeAction .form{

		flex-direction:column;
		align-items:stretch

	}

	SubscribeAction .form label,
	SubscribeAction .form input,
	SubscribeAction .form img {

		flex:auto;
		max-width:100%;
		margin-left:0

	}

	SubscribeAction .form input,
	SubscribeAction .form img {

		margin-top:.5em;
		border-radius:var(--size_frm)

	}

}

@media screen and (max-width: 680px){

	footer ul 							{flex-direction:column;gap:5vh}
	footer ul 	li						{width:100%;text-align:center;max-width:100%}

	footer > div + div 					{text-align:center}

}