
:root {

	--colorA: #BCA27D;
	--colorB: #843333;
	--colorC: #273960;
	--colorD: #21221c;
	
	--fnt1: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	--fnt2: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	--fnt3: 'EB Garamond', 'Times New Roman', Times, serif;
	--fnt4: 'EB Garamond', 'Times New Roman', Times, serif;
	
}


/* ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅ */
html {
	box-sizing: border-box;
	font-family: sans-serif; 
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
body {
	margin: 0;
	background: var(--colorC);
	font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
body, body * { box-sizing: border-box; }
html, body { overflow-x: hidden; }

.abs {
    position: absolute;
    width: 100%;
    height: 100%;
}
#step-b .error,
button {
	padding: 6px 24px;
	font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	font-size: 16px;
	border: 0;
	outline: 0;
	background: var(--colorB);
	color: white;
	cursor: pointer;
	border-radius: 30px;
	pointer-events: all;
}
button:hover { color: black; background: var(--colorA); }



/* ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅ */
header {
	display: flex;
	align-items: center;
	position: relative;
	height: 96px;
	padding: 8px 48px;
	background: var(--colorB);
	color: white;
	box-shadow: 0 8px 16px hsla(0, 0%, 0%, 0.4);
	z-index: 9;
}
header h1 { margin: 0; line-height: 1.1; font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; }

main {
	display: flex;
	flex-flow: column;
	place-content: center;
	position: relative;
	height: calc(100vh - 96px);
	width: 100%;
	overflow-y: auto;
	background: var(--colorC);
}



/* ≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣ */
/* ≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣ */
#actus-clouds {
    position: fixed;
    top: 0%;
    left: 0%;
	width: 100%;
	height: 100vh;
}
#all-clouds { display: none; }
#actus-clouds img {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	mix-blend-mode: overlay;
	mix-blend-mode: exclusion;
}


/* ≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣ */
/* ≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣ */
#root {
	position: relative;
	z-index: 99;
}
#text {
	position: relative;
	width: 70%;
	max-height: 100%;
	overflow-y: auto;
	margin: 32px 15%;
	padding: 24px;
	font: 400 18px var(--fnt2);
	background: hsla(0, 0%, 0%, 0.7);
	color: hsla(0, 0%, 100%, 0.8);
	border-radius: 16px;
	z-index: 99;
}
#text span {
	display: block;
	margin-top: 8px;
	font: 400 20px var(--fnt3);
	color: hsla(0, 0%, 100%, 0.5);
}

figure {
	position: relative;
	width: 90%;
	max-height: calc(100% - 64px);
	margin: 32px 5%;
	text-align: center;
	z-index: 99;
}
figure video,
figure img {
	max-width: 100%;
	max-height: 100%;
	object-fit: scale-down;
	box-shadow: 0 16px 32px hsla(0, 0%, 0%, 0.4);
}
.image-text {
	position: absolute;
	left: 32px;
	bottom: 32px;
	max-width: 70%;
	min-height: 64px;
	padding: 12px 24px 12px 64px;
	font: 400 18px var(--fnt2);
	text-align: left;
	background: hsla(0, 0%, 0%, 0.7);
	color: hsla(0, 0%, 100%, 0.8);
	border-radius: 16px;
	z-index: 999;
}
.image-text span {
	display: block;
	margin-top: 8px;
	font: 400 13px var(--fnt1);
	opacity: 0.7;
}
.image-text .info {
	position: absolute;
	left: 16px;
	top: calc(50% - 16px);
	width: 32px;
	height: 32px;
	cursor: pointer;
	opacity: 0.5;
	object-fit: contain;
}
.image-text.closed { padding: 12px 24px 12px 40px; }
.image-text.closed > *:not(.info) { display: none; }
.image-text .info:hover { opacity: 1; }

textarea {
	position: relative;
	width: 100%;
	min-height: 240px;
	padding: 16px;
	background: transparent;

}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1280px) {
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

	figure {
		width: 80%;
		margin: 32px 10%;
	}
	
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1024px) {
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

	header h1 { font-size: 28px; }

	
}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 800px) {
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

	header { padding: 8px 24px; }
	#text {
		width: 90%;
		margin: 16px 5%;
		padding: 24px;
		font: 400 18px var(--fnt2);
	}

	.image-text {
		left: 5%;
		bottom: 16px;
		max-width: 90%;
	}
	figure {
		width: 90%;
		margin: 32px 5%;
	}
	
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 640px) {
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */


	
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 480px) {
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

	header { height: 80px; }
	header h1 { font-size: 20px; }
	main { height: calc(100vh - 80px); }

	.image-text,
	#text { font-size: 16px; }
	.image-text { padding: 12px 16px 12px 48px; }
	.image-text .info { left: 8px; }
	.image-text.closed .info { left: 16px; }
	.image-text span { font-size: 12px; }
	
}