:root {
	--color-white: #FFFFFF;
	--color-alice-white: #ECF5FD;
	--color-black: #1D1D1B;
	--color-yale-blue: #023F7D;
	--color-bice-blue: #0073B5;

	--color-text-white: var(--color-alice-white);
	--color-text-black: var(--color-black);

	--font-family-title: 'Manrope', Helvetica, Arial, sans-serif;
	--font-family-text: 'Inter', Helvetica, Arial, sans-serif;

	--border-radius1: 16px;
	--border-radius2: 24px;
	--border-radius3: 32px;
}

html, body {
	margin: 0;
	padding: 0;

	overscroll-behavior: none;
}
html {
	font-size: 16px;
}
body {
	overflow-x: hidden;
    overflow-y: auto;
}

* {
	box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;

	font-family: 'Inter', Helvetica, Arial, sans-serif;

	scroll-margin-top: 152px;
}
@media screen and (max-width: 992px) {
	* {
		scroll-margin-top: 92px;
	}
}
@media only screen and (max-width: 600px) {
	html {
		font-size: 12px;
	}
}


/*	================================================================================
									TYPOGRAPHY
	================================================================================  */
p, ul, li {
	color: var(--color-text-black);
	font-size: 1rem;	
	font-family: var(--font-family-text);
	font-weight: 400;
	white-space: break-spaces;
}
h1, h2, h3, h4, h5 {
	color: var(--color-text-black);
	white-space: break-spaces;
}
h1.flex, h2.flex, h3.flex, h4.flex, h5.flex {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 24px;
}
h2 {
	margin-bottom: 16px;

	font-family: var(--font-family-title);
	font-size: 2rem;
	font-weight: 800;
}
h3 {
	margin-bottom: 16px;

	font-family: var(--font-family-title);
	font-size: 1.5rem;
	font-weight: 600;
}
h4 {
	margin-bottom: 16px;

	font-family: var(--font-family-title);
	font-size: 1.5rem;
	font-weight: 700;
}
a {
	color: var(--color-text-link);
}

/*	================================================================================
									GLOBAL
	================================================================================  */
img {
	max-width: 100%;
	height: auto;
}
.blured {
	background: rgba(255, 255, 255, 0.80);
	backdrop-filter: blur(10px);
}

.image-zoom,
.image-zoom-h {
	border-radius: var(--border-radius2) !important;
	transition: background-size 0.5s ease-in-out,
				border-radius 0.5s ease-in-out;
}
.image-zoom:hover {
	border-radius: 64px !important;
	background-size: cover, auto 110% !important;
}
.image-zoom-h:hover {
	border-radius: 64px !important;
	background-size: cover, 120% auto !important;
}

/*	================================================================================
									STRUCTURE
	================================================================================  */
body {
	position: relative;
	min-height: 100%;

	display: flex;
	flex-direction: column;

	color: var(--color-text-black);
	background-color: var(--color-alice-white);
}
header {
	position: fixed;
	top: 0;			left: 0;
	width: 100%;
	z-index: 200;
}
content {
	min-height: 100dvh;
}
footer {
	
}

/*	================================================================================
									BUTTONS
	================================================================================  */
.dbtn.dbtn-primary {
	--color-primary: var(--color-yale-blue);
	--color-secondary: var(--color-text-white);
}
.dbtn.dbtn-secondary {
	--color-primary: var(--color-text-white);
	--color-secondary: var(--color-yale-blue);
}
.dbtn {
	padding: 8px 24px;
	width: fit-content;

	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;

	border-radius: 56px;
	border: .1rem solid var(--color-primary);
	background-color: var(--color-primary);
	color: var(--color-secondary);
	stroke: var(--color-secondary);

	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	transition: transform 0.15s ease-in-out, 
				color 0.15s ease-in-out, 
				background-color 0.15s ease-in-out, 
				border-color 0.15s ease-in-out, 
				box-shadow 0.15s ease-in-out;
}
.dbtn.full-width {
	width: 100%;
}
.dbtn.picto {
	padding: 8px;
}
.dtbn .stroke-change {
	stroke: inherit !important;
	transition: stroke 0.15s ease-in-out;
}
.dbtn span {
	color: inherit;
	font-family: var(--font-family-title);
	font-size: 1.25rem;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}
.dbtn:hover,
.dbtn:active,
.dbtn.active {
	background-color: var(--color-secondary);
	color: var(--color-primary);
	stroke: var(--color-primary);
}
.dbtn:active,
.dbtn.active {
	transform: scale(0.95);
	box-shadow: 0 0 5px 0 var(--color-primary);
}

/*	================================================================================
									BACK TO TOP
	================================================================================  */
.back-to-top {
	position: fixed;
	bottom: 40px;	right: 40px;
	z-index: 3;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}
.back-to-top.visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	
}

/*	================================================================================
										PAGE
	================================================================================  */
/*	================================================================================
									PAGE HEADER
	================================================================================  */
.page-header {
	position: relative;
	width: 100%;

	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;

	border-radius: 0px 0px 32px 32px;
}
.page-header.big {
	border-radius: none;
}
.page-header.default {
	background-color: var(--color-yale-blue);
	background-image: url(../../images/header-default.jpg);
	background-size: auto 100%;
	background-position: center right;
	background-repeat: no-repeat;
}
.page-header .page-header-content {
	width: 100%;
	height: 496px;
	padding-top: 120px;
	padding-bottom: 120px;

	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
}
.page-header.big .page-header-content {
	height: 720px;
}
.page-header .page-header-content h1 {
	padding: 0;
	margin: 0;

	color: var(--color-text-white);
	font-family: var(--font-family-title);
	font-size: 2.5rem;
	font-weight: 700;
	white-space: break-spaces;
}

/*	================================================================================
									PAGE CONTENT
	================================================================================  */
.page-content {
	width: 100%;
	margin: 0;
	padding: 40px 0 80px 0;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}

.image-card {
    width: 100%;    height: 100%;

    border-radius: var(--border-radius2);
}

/*  ----------------------------  DOUBLE BLOCK  ----------------------------  */
.double-block {
	padding-top: 40px;
	padding-bottom: 40px;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
	gap: 0px;
}
.double-block.reverse {
	flex-direction: row-reverse;
}
.double-block .double-block-image-card {
	flex: 0 0 50%;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	border-radius: var(--border-radius2);
}
.double-block .double-block-content-card {
	flex: 0 0 calc(50% + 80px);
	margin-left: -80px;
	margin-top: 100px;
	margin-bottom: 100px;
	padding: 32px 40px;

	display: flex;
    flex-direction: column;
    align-items: flex-start;

	background-color: var(--color-white);
	border-radius: var(--border-radius1);
	z-index: 1;
}
.double-block.reverse .double-block-content-card {
	margin-left: 0;
	margin-right: -80px;
}
.double-block .double-block-content-card .dbtn {
	margin-top: 40px;
}

@media screen and (max-width: 768px) {
	.double-block {
		display: block;
	}
	.double-block .double-block-image-card {
		width: 100%;
		aspect-ratio: 1 / 1;
	}
	.double-block .double-block-content-card,
	.double-block.reverse .double-block-content-card {
		margin-left: 20px;
		margin-right: 20px;
		margin-top: -80px;
		margin-bottom: 0;
	}
	
}

/*  ----------------------------  FULL BLOCK  ----------------------------  */
.full-block {
	width: 100%;
	padding: 80px 0;

	background: var(--color-yale-blue);

	& h2, & h3, & p {
		color: var(--color-text-white);
	}
}

/*  ----------------------------  CONTENT BLOCK  ----------------------------  */
.content-block {
	padding: 40px;

	border-radius: var(--border-radius3);
}

.content-block.blue {
	background: var(--color-yale-blue);
 	
	& h2, & h3, & p {
		color: var(--color-text-white);
	}
}
.content-block.blue-light {
	background: var(--color-bice-blue);
 	
	& h2, & h3, & p {
		color: var(--color-text-white);
	}
}
.content-block.white {
	background: var(--color-white);

	& h2, & h3, & p {
		color: var(--color-text-black);
	}
}

/*  ----------------------------  TEXT BLOCK  ----------------------------  */
.block-text {
	padding-top: 40px;
	padding-bottom: 40px;
}
.block-text h1 {
	text-align: center;
	color: var(--color-yale-blue);
	font-family: var(--font-family-title);
	font-size: 2.5rem;
	font-weight: 400;
	white-space: break-spaces;
}
.block-text h1 strong {
	font-weight: 700;
}

/*  ----------------------------  HIDABLE-TEXT  ----------------------------  */
.hidable-text {
	position: relative;
	max-height: 200px;
	padding-bottom: 40px !important;
	
	overflow: hidden;

	transition: max-height 0.3s ease-in-out;
}
.hidable-text.white {
	background: var(--color-alice-white);
	& p, & h2, & h3 {
		color: var(--color-yale-blue);
	}
}
.hidable-text .overlay {
	position: absolute;
	top: 30%;		left: 0;
	width: 100%;	height: 70%;
	padding-bottom: 12px;

	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;

	transition: background 0.3s ease-in-out;
}
.hidable-text.blue .overlay {
	background: linear-gradient(0deg, var(--color-yale-blue) 20%, #023F7D00 80%);
}
.hidable-text.white .overlay {
	background: linear-gradient(0deg, var(--color-alice-white) 20%, #ECF5FD00 80%);
}
.hidable-text .overlay .dbtn {
	transform: rotate(180deg);
	transition: transform 0.3s ease-in-out;
	pointer-events: auto;
}
.hidable-text.expanded {
	max-height: 1000px;
}
.hidable-text.expanded .overlay {
	background: none;
	pointer-events: none;
}
.hidable-text.expanded .overlay .dbtn {
	transform: rotate(0deg);
}

/*  ----------------------------  REFERENCE NUMBER  ----------------------------  */
.reference-number p {
    margin: 0;

    text-align: center;
    font-family: var(--font-family-title);
    font-size: 1.5rem;
    font-weight: 400;
}
.reference-number p.number-picto {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.reference-number p.number-picto .anim-number {
    color: var(--color-text-white);
    font-family: var(--font-family-text);
    font-size: 3.5rem;
    font-weight: 900;
}

/*  ----------------------------  CARD  ----------------------------  */
.card-white {
	padding: 28px;

	background: var(--color-alice-white);
	border-radius: var(--border-radius2);
}
.card-blue {
	padding: 28px;

	background: var(--color-yale-blue);
	border-radius: var(--border-radius2);
	color: var(--color-text-white);
	
	& h2, & h3, & p {
		color: var(--color-text-white);
	}
}