/* RESET */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; list-style: none; text-decoration: none; quotes: none;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
* {box-sizing: border-box;}



:root {
	interpolate-size: allow-keywords;

	/* COLORS	 */
	--c-blue-20 : #F4F9FF;
	--c-blue-50 : #F1F5FF;
	--c-blue-100 : #E6EEFF;
	--c-blue-200 : #D1DFFF;
	--c-blue-300 : #ACC3FF;
	--c-blue-400 : #7D9CFF;
	--c-blue-500 : #496BFF;
	--c-blue-600 : #2440FF;
	--c-blue-700 : #122BEF;
	--c-blue-800 : #0E23C9;
	--c-blue-900 : #0E1FA4;
	--c-blue-950 : #06187D;
	--c-blue-1000 : #0E133D;
	--c-blue-1100 : #050822;
	--c-orange: #F36F1D;
	--c-pink: #E02FA1;
	--c-blue-punk : #2CE1FF;
	
		
	/* SIZE */
	
	--fs-m : 17px;
	--fs-l : calc(var(--fs-m)*1.2);
	--fs-xl : calc(var(--fs-m)*1.5);
	--fs-xxl : calc(var(--fs-m)*1.75);
	--fs-xxxl : calc(var(--fs-m)*2.2);
	--fs-xxxxl : calc(var(--fs-m)*2.4);
	--fs-s: 	calc(var(--fs-m)*0.85);
	--fs-ss: 	calc(var(--fs-m)*0.75);
	--fs-xs: 	calc(var(--fs-m)*0.6);
	
	
}


html {
font-size: var(--fs-m);
font-weight: 400;
line-height: 150%;
font-family: "Montserrat", sans-serif;
scroll-behavior: smooth;
color: var(--c-blue-950);
background-color: var(--c-blue-20);
letter-spacing: -0.3px;
}





/* =========================================================
FONDATIONS
========================================================= */


/* ---------------------------------------------------------
STRUCTURE
--------------------------------------------------------- */

section, footer {
	display: flex;
	flex-direction: column;
	width: 100%;
	position: relative;
	background-color: var(--c-blue-200);
	padding-block: 100px;
}


/* header {border: 2px solid red; background-color: red;}
main {border: 2px solid green; } */

header, main { padding-top: 0; }


.container {
	width: min(90%, 1400px) ;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--fs-xxxxl);
}



hr {
	width: 100%;
	border: none;
	height: 1px;
	background: linear-gradient(137deg, var(--c-blue-300) -14.2%, rgba(255, 255, 255, 0) 75.48%);
}

hr.xray {
	width: 100%;
	border: none;
	height: 1px;
	background: none;
	margin-block: var(--fs-xxl);
}

/* ---------------------------------------------------------
GRILLE
--------------------------------------------------------- */

.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-23, .grid-13  {
  display: grid;
  gap: var(--fs-xxl);  
  align-content: start;
}

.grid-1 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr);  }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-23 { grid-template-columns: 2fr 1fr; }
.grid-13 { grid-template-columns: 1fr 2fr; }

/* .grid-3 div, .grid-2 div {display: flex; flex-direction: column; gap: var(--fs-l); } */

.grid-stretch { align-content: stretch;}

.column div { display: flex; flex-direction: column; gap: var(--fs-l);}
.flow {flex-direction: row;}
.gap-small {gap: var(--fs-xs);}



/* ---------------------------------------------------------
FONDS
--------------------------------------------------------- */

.bg-white {background-color: white;}
.bg-xlight {background-color: var(--c-blue-50);}
.bg-light {background-color: var(--c-blue-200);}
.bg-dark {background-color: var(--c-blue-1000);}
.bg-xdark {background-color: var(--c-blue-1100);}


.hero {width: 100%;  background-size: cover; background-position: bottom right; background-repeat: no-repeat; margin-top: -135px; padding-top: 135px; background-color: var(--c-blue-200);}


.bg-cover {
	background-size: cover;
	background-position: bottom right;
	background-repeat: no-repeat;
}

.glossy { width: min(98%, 1800px) ; backdrop-filter: blur(20px); background-color: rgba(255, 255, 255, 0.2);  border-radius: var(--fs-l); margin-inline: auto; padding: min(4%, 200px) ;  padding-block: var(--fs-xxxl); border: 1px solid white;}

.glossy .container {width: 100%;  max-width: 1400px;}
.glossy p {width: 90%;}

.container .glossy {width: 105%; margin-left: -2.5%; padding-inline: 2.5%; }

.glossy .arrow {margin-top: var(--fs-xxxl);}


/* =========================================================
TYPO
========================================================= */

/* ---------------------------------------------------------
TITRES
--------------------------------------------------------- */

h1, h2, h3, h4 { 	text-wrap: balance; 	line-height: 120%; }

h1 { 	letter-spacing: -2px; 	font-weight: 500; 	color: var(--c-blue-900); 	font-size: clamp(var(--fs-xxxl), 5vw, var(--fs-xxxxl)); 	line-height: 120%; }
h2 { 	font-weight: 300; 	font-size: clamp(var(--fs-xxl), 3vw, var(--fs-xxxl)); 	line-height: 120%; 	color: var(--c-blue-700); 	letter-spacing: -1px; }
h3 { 	font-size: var(--fs-xl); 	letter-spacing: -1px; 	color: var(--c-blue-900); }
h4 { 	font-size: var(--fs-l); 	font-weight: 600; }

h2 strong { font-size: 1em;}

.dark h1, .dark h2, .dark h3, .dark h4, .dark p {color: white;}
strong {font-size: 1.2em; font-weight: 600;}

p.sub-title {font-size: var(--fs-ss); text-transform: uppercase; letter-spacing: 1px ; font-weight: 500; margin-bottom: -20px; opacity: 0.7; }

p.legende { 	font-size: var(--fs-s); 	font-style: italic; line-height: 140%;  text-wrap: balance;}


/* ---------------------------------------------------------
CTA
--------------------------------------------------------- */


a.cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	padding: 13px 20px;
	line-height: 1;
	background-color: var(--c-blue-950);
	color: white;
	border-radius: 50px;
	transition: background-color ease-out 0.3s;
	text-align: center;
	font-size: var(--fs-s);
	font-weight: 600;
	border: 1px solid transparent;
	cursor: pointer;
}

a.cta:focus-visible { 	outline: 2px solid currentColor; 	outline-offset: 2px; }
a.cta.outline { 	border: 1px solid var(--c-blue-950);  background-color: transparent; 	color: var(--c-blue-950); }
a.cta:hover { 	background-color: var(--c-blue-800); 	border: 1px solid transparent; 	color: white; }

a.cta.cta-focus { font-size: var(--fs-m);}

.dark a.cta {background-color: white; color: var(--c-blue-900); padding: 10px 20px;}
.dark a.cta.outline {border: 1px solid white; 	background-color: transparent; 	color: white;}
.dark a.cta:hover { background-color: var(--c-blue-200); border: 1px solid var(--c-blue-200); color: var(--c-blue-900);}

a.cta.cta-small {padding: 8px 14px;  font-size: var(--fs-ss); }

a.arrow::after { content: '\2192'; 	margin-left: 10px; 	font-size: 1.1em; 	 }

/* ---------------------------------------------------------
ARIANE
--------------------------------------------------------- */

.ariane { 	display: flex; 	width: 100%; 	margin-bottom: -20px; }
.ariane li::after { 	content: '›'; 	margin-inline: 5px;	 	font-size: 12px; 	opacity: 0.5; }
.ariane li:last-child::after { 	content: none; 	margin: 0; }
.ariane li a, .ariane li  { 	display: inline; 	color: var(--c-blue-950); 	font-size: var(--fs-s); 	font-weight: 500; 	opacity: 0.7; 	transition: opacity ease-out 0.2s; }
.ariane li:last-child, .ariane li a:hover { 	opacity: 1;  }


/* ---------------------------------------------------------
LISTE
--------------------------------------------------------- */

ul.classic {padding-left : 17px; display: flex; flex-direction: column;  width: 90%; gap: 15px;}
ul.classic li { list-style-type: disc; color: var(--c-blue-950); line-height: 140%;}
ul.classic.li-large {gap: var(--fs-s);}
.dark ul.classic li {color: white;}



/* ---------------------------------------------------------
FRISE
--------------------------------------------------------- */

.frise {
	display: flex;
	flex-direction: column;
	padding-block: var(--fs-xl);
}

.frise li {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.frise li div {
	width: 66%;
	border: 1px solid var(--c-blue-400);
	padding: var(--fs-l);
	color: white;
	margin-block: 10px;
	border-radius: var(--fs-m);
}

.frise li div h3 {
	margin-bottom: 5px;
	letter-spacing: 0.5px;
	color: var(--c-blue-300);
	font-size: var(--fs-m);
	font-weight: 500;
}

.frise li div p a {
	color: var(--c-blue-300);
	text-decoration: underline;
	font-style: italic;
	font-weight: 300;
}

.frise span {
	border-left: 2px solid var(--c-blue-400);
	position: relative;
	color: white;
	height: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 17%;
	font-size: var(--fs-xl);
	color: white;
}


.frise li span::before {
	content: '';
	width: 20px;
	aspect-ratio: 1 / 1;
	border-radius: 50px;
	background-color: white;
	position: absolute;
	top: 50%;
	left : -11px;
	transform: translateY(-50%);
}

.frise li span.no-date::before {
	width: 12px;
	left : -7px;
	background-color: var(--c-blue-400);
}


/* ---------------------------------------------------------
BOARD
--------------------------------------------------------- */

.board { 	width: 100%; 	display: flex; 	flex-direction: column; 	font-size: var(--fs-s);
	line-height: 130%; 	padding-block: var(--fs-l); }

.board li { 	display: flex; 	align-items: center; 	padding: var(--fs-m); 	justify-content: space-between; 	border-top: 1px solid var(--c-blue-800);  }

.board li:last-child {
	border-bottom: 1px solid var(--c-blue-800);
}
.board li.board-boss {
	background-color: var(--c-blue-900);
	color: white;
	border-radius: var(--fs-xs);	
	margin-bottom: var(--fs-l);
	border: none;
}

.board li.board-boss dt {
	color: white;
}



.board li dl {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fs-xs);
	width: calc(100% - 150px);
}

.board li dt {
	width: 300px;
	font-size: var(--fs-m);
	color: var(--c-blue2);
	font-weight: 500;
	letter-spacing: -0.5px;
}

.board li dd {
	width: calc(100% - 300px);
	min-width: 200px;
	flex: 1 1;
}



/* ---------------------------------------------------------
FOOTER
--------------------------------------------------------- */

footer { 	background-color: var(--c-blue-1100); }
 
 a#logo-footer {display: block; width: 135px; height: 50px; background-image: url(../media/Emeria_logo_white.svg);
	 background-size: contain; background-repeat: no-repeat; background-position: center center; }
	 
footer ul { 	display: flex; 	flex-direction: column; 	gap: 0; }
footer ul li { 	padding: 0; 	margin: 0; 	line-height: 100%; }
footer ul li:first-child { 	font-weight: 600; 	color: white; 	font-size: 16px; 	line-height: 180%; }
footer ul li a { 	display: inline-block; 	font-size: 14px; 	color: #7D9CFF; 	padding: 3px 0; 	transition: all ease-in-out 0.4s; 	 }
footer ul li a:hover { 	color: white; }
footer a#linkedin { 	margin-top: 5px; 	width: 27px; 	display: block; 	aspect-ratio: 1 / 1; 	background-image: url(../media/picto_rs_linkedin.svg);
	background-size: 25px; 	background-repeat: no-repeat; 	background-position: top center; 	transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
footer a#linkedin:hover { 	background-position: bottom center; }





/* =========================================================
CARD
========================================================= */

/* ---------------------------------------------------------
MAIN
--------------------------------------------------------- */

.card {
	display: flex; 
	flex-direction: column;
	border-radius: var(--fs-m);
	padding: var(--fs-l) var(--fs-m);
	justify-content: center;
	background-color: white;
	gap: var(--fs-m);
}

/* .card * {background-color: lime;} */

.card.border {
	border: 1px solid var(--c-blue-900);
}

.card.blur { 	backdrop-filter: blur(20px); 	background-color: rgba(255, 255, 255, 0.4); 	border: 1px solid var(--c-blue-400); }

.card.center { align-items: center; gap: 0;}
.card.center * {text-align: center; text-wrap: balance; line-height: 120%;}

.card.outline {background-color: transparent; border: 1px solid var(--c-blue-900);}
.dark .card.outline {background-color: transparent; border: 1px solid white;}
.dark .card.opacity {background-color: rgba(14, 19, 61, 0.7); 	backdrop-filter: blur(20px);  border: 1px solid white;}

.card.exergue {padding: var(--fs-xxxl);}
.card.exergue * {line-height: 150%;}

.card  h3 { font-size: var(--fs-l);} 


/* ---------------------------------------------------------
COUNTRIES
--------------------------------------------------------- */

.countries {   display: grid;   grid-template-columns: repeat(5, 1fr); }
.countries .card { justify-content: flex-start; 	padding: 0;  background-color: transparent; 	overflow: hidden;  	color: white;	 	gap: 0; }
.countries .card img { 	width: 100%;  	aspect-ratio: 3/3.5; 	object-fit: cover;  	display: block; }
.countries .card > div {  	display: flex; flex-grow: 1;  justify-content: space-between; flex-direction: column; align-items: center; 	padding: var(--fs-xxl) var(--fs-l);  	gap: var(--fs-l); background-color: rgba(14, 19, 61, 0.7); 	backdrop-filter: blur(20px); 	border-top: 1px solid var(--c-blue-900); text-align: center; }
.bg-dark .countries .card > div {background-color: var(--c-blue-950);}

.countries .card p {font-size: var(--fs-s); line-height: 130%; font-weight: 300; opacity: 0.8;}

@media (max-width: 1300px)  { .countries { grid-template-columns: repeat(3, 1fr); }} 
@media only screen and (max-width: 1000px) {.countries { grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));}}


/* ---------------------------------------------------------
SUBNAV
--------------------------------------------------------- */

.sub-nav { 	gap: 0; }
.sub-nav li { position: relative; 	border-top: 1px solid var(--c-blue-100); }
.sub-nav li:last-child { 	border-bottom: 1px solid var(--c-blue-100); }
.sub-nav li a { 	display: block; 	padding-block: var(--fs-l); 	width: 100%; 	height: auto; 	cursor: pointer; 	font-weight: 600; 	background-color: transparent;
	transition: all ease-in-out 0.2s; 	color: var(--c-blue-100); 	padding-left: 0; 	padding-right: 130px; } 
.sub-nav li a:hover { 	background-color: rgba(255, 255, 255, 0.1); 	padding-left: 10px; }
.sub-nav li a::after { 	content: 'Read more'; 	position: absolute; 	height: auto; 	top: 50%; 	right: 0; 	transform: translateY(-50%); 	padding: 7px 14px; 	font-size: var(--fs-ss); 	line-height: 100%; 	transition: all ease-in-out 0.2s; 	border-radius: 50px; 	border: 1px solid var(--c-blue-100); }
.sub-nav.sub-nav-fr li a::after {content: 'En savoir plus'; }

.sub-nav2 li {border-top: 1px solid var(--c-blue-200); }
.sub-nav2 li:last-child {border-bottom: 1px solid var(--c-blue-200); }
.sub-nav2 li a { color: var(--c-blue-900); } 

.sub-nav2 li a::after { 	content: 'Download'; }

.sub-nav li a:hover::after { 	right: 10px; 	background-color: var(--c-blue-100); 	color: var(--c-blue-1000); }
.sub-nav2 li a:hover::after { 	right: 10px; 	background-color: var(--c-blue-900); 	color: white; }

.power {margin-top: -300px; }
.power > div {  	display: flex; 	flex-direction: column; 	border-radius: var(--fs-l); 	overflow: hidden; 	box-shadow: 0 10px 30px rgba(25, 19, 59, 0.6); }
.power div div:first-child { 	aspect-ratio: 2 / 1.5; 	width: 100%; 	background-size: cover;  	background-position: center center; }
.power div div:last-child { 	background-color: var(--c-blue-800); 	display: flex; 	flex-direction: column; 	gap: var(--fs-l); 	align-items: flex-start; 	padding: var(--fs-xl); 	color: white; 	height: 100%; }
.power div:last-child div:last-child { 	background-color: var(--c-blue-950); }

/* ---------------------------------------------------------
CARD IMAGES
--------------------------------------------------------- */

.card-image {border-radius: var(--fs-m); overflow: hidden; width: 100%; 	height: 100%; 	object-fit: cover; object-position: center; 	display: block;  border: 1px solid white;}


/* ---------------------------------------------------------
STICKY BRANDS
--------------------------------------------------------- */


.sticky-left {position: sticky; top: 50px; align-self: start; display: flex; flex-direction: column; gap: var(--fs-xxl); padding-right: 20px;}
.sticky-right {display:flex; flex-direction:column; gap: var(--fs-ss); }

.brand {display: flex; border-radius: 12px; background-color: white; overflow: hidden; align-items: center; gap: var(--fs-xxl); padding: var(--fs-l); border: 1px solid var(--c-blue-200); padding-bottom: 25px; }
.brand img {aspect-ratio: 2.17 /1; width: 220px; }
.brand p {font-size: var(--fs-s); line-height: 130%; min-width: 100%; border-top: 1px solid #ddd; padding-top: 15px; color: #457;}
.brand div {display: flex; flex-wrap: wrap; gap: 15px;  justify-content: space-between; align-items: center; }
.brand a {color: #697490; font-size: var(--fs-s); display: block; height: 18px; background-image: url(../media/arrow-link.svg);  background-size: 13px; background-repeat: no-repeat; background-position: center right; padding-right: 20px;  line-height: 120%; transition: color ease-in-out 250ms, padding-right ease-in-out 150ms ;}
.brand a:hover {color: #212f51; padding-right: 23px;  }
.brand h3 {font-size: var(--fs-m); font-weight: 700; line-height: 100%; }

hr.hr-brands {background: none; background-color: var(--c-blue-500); margin-block: 40px;}

.sticky-right h4 {margin-block: 20px;}

/* ---------------------------------------------------------
HOME DATA
--------------------------------------------------------- */

.home-data {
backdrop-filter: blur(20px); background-color: rgba(255, 255, 255, 0.3); border-radius: 20px; padding: var(--fs-xl); border: 1px solid white; gap: var(--fs-xl); }

.home-data div {border-bottom: 1px solid var(--c-blue-200); padding-bottom: 20px; }
.home-texte {font-size: var(--fs-l); line-height: 150%;}



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




	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-23, .grid-13  {grid-template-columns: 1fr; }
	
	footer .container { flex-direction: column; gap: 20px;}
	footer .container ul li a { font-size: 18px; line-height: 150%; }
	
	.sticky-left {position: static; 	top: auto;}
	.brand {flex-direction: column; align-items: center; gap:0;}
	.brand img {margin-inline: auto;}
	.brand div { justify-content: space-between; flex-direction: column; align-items: center; gap: 10px;}
	.brand p {margin-top: 15px;}
	.frise span.date, .frise span.no-date {display: none;}
	.frise li div { width: 100%;}


}