/*****************************************************

			Défilé du 14 juillet 2025
		Auteur Emmanuel Forsans - ADER P22 

******************************************************/
@font-face { font-family: 'Futura_Std_Extra_Bold'; src: url("fonts/FuturaStdExtraBold.otf") format('opentype');}
@font-face { font-family: 'Futura_Std_Light'; src: url("fonts/FuturaStdLight.otf") format('opentype');}
@font-face { font-family: 'Metrophobic'; src: url("fonts/Metrophobic-Regular.ttf") format('truetype');}

:root{
	--bleu: #005ca9;
	--bleu60: #7295cd;
}

.cb{	clear: both;}

.blink{
	animation-name: blink_anim;
	animation-iteration-count: infinite;
	animation-duration: 1s;
}
@keyframes blink_anim{
	0%, 80%, 100%{
		opacity: 0;
	}
	10%, 70%{
		opacity: 1;
	}
}

body{
	margin: 0;
	padding: 0;
	background-color: #000;
	line-height: 0;
	font-size: 1rem;			/* La taille des polices est initialisée dans script.js / init_menu_principal() */
	font-family: 'Futura_Std_Light';
}

h1, h2, h3, h4{
	font-family: 'Futura_Std_Extra_Bold';
	text-transform: uppercase;
	line-height: normal;
	text-align: left;
}
h1{
	font-size: 1.5rem;
	margin: 0;
	padding: 1rem 0;
}
h2{
	font-size: 1rem;
	margin-top: 0;
	padding: 2.5rem 0 1rem 0;
}
h3{
	font-size: 1rem;
	color: var(--bleu);
	margin-top: 0;
	padding: 2.5rem 0 1rem 0;
}
h4{
	font-family: 'Futura_Std_Light';
}
hr{
	border: none;
	border-top: 1px #fefefe dashed;
}

.href_link{
	color: blue;
	text-decoration: underline;
	cursor: pointer;
}

/***********************************************************

	Page d'accueil

************************************************************/

#accueil{
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-size: cover;
	background-position: center;
	z-index: 100;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#accueil_texte{
	line-height: normal;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	z-index: 110;
	color: #fefefe;
	height: 100vh;
	width: 100vw;
	animation-duration: 1500ms;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in-out;
}
#accueil_14{
	font-size: calc(100vw / 5);
	font-family: Times, "Times New Roman", "serif";
	line-height: 0.85em;
}
#accueil_juillet{
    font-family: 'Futura_Std_Light';
    font-size: calc(100vw / 23);
}
#accueil_aae{
/*	font-size: calc(100vw / 70);
    margin-top: 3rem;*/
	width: 250px;
	max-width: 40vw;
	max-height: 30vh;
}
#accueil_clic{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
@media screen and (orientation: portrait) {
	#accueil_14{
		font-size: calc(100vh / 5);
	}
	#accueil_juillet{
		font-size: calc(100vh / 23);
	}
	#accueil_aae{
		font-size: calc(100vh / 70);
	}

}


/***********************************************************

	Menu principal

************************************************************/

#boutons_box{
	animation-duration: 500ms;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in-out;
	text-align: center;
}
.accueil_bouton, .accueil_bouton2, .accueil_bouton3{
	font-family: 'Futura_Std_Extra_Bold';
	line-height: normal;
	background-color: #006cd1;
	padding: 1rem 2rem;
	text-align: center;
	font-size: 1.2rem;
	text-transform: uppercase;
	color: #ffffff;
	border-radius: 2rem;
	cursor: pointer;
	margin-bottom: 1rem;
	animation-name: up_fade_in;
	animation-duration: 2s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
}
.accueil_bouton2{
	display: inline-block;
	margin: 1rem;
	font-size: 0.8rem;
	background-color: #fefefe;
	color: #006cd1;
	text-decoration: none;
}
/*
.accueil_bouton3{
	display: inline-block;
	margin: 1rem;
	font-size: 0.8rem;
	background-color: #fefefe;
	color: #006cd1;
	opacity: 0.5;
	cursor: not-allowed;
} */
#chargement{
	width: 100%;
	position: absolute;
	top: 50%;
	text-align: center;
	z-index: 1000;
	color: #fefefe;
}

@keyframes up_fade_in{
	0%{		opacity: 0;
			transform: translateY(100px)}
	100%{	opacity: 1;
			transform: translateY(0px)}
}

@keyframes up_fade_out{
	0%{		opacity: 1;
			transform: translateY(0px)}
	100%{	opacity: 0;
			transform: translateY(-100px)}
}

@media screen and (orientation: landscape) {
	#accueil{
		background-image: url("img/background/paf_arc_triomphe_horizontal.avif");
	}
}
@media screen and (orientation: portrait) {
	#accueil{
		background-image: url("img/background/paf_arc_triomphe_vertical.avif");
	}
}

/***********************************************************

	DPSA

************************************************************/
#dpsa{
	position: absolute;
	width: 1024px;
	height: calc(100vh - 4rem);
	z-index: 200;
	overflow: auto;
	background-color: #fefefe;
	line-height: normal;
	max-width: 100%;
	top: 2rem;
	left: 50%;
	transform: translate(-50%);
	padding: 2rem;
	box-sizing: border-box;
	box-shadow: 0px 5px 10px 5px rgba(0,0,0,0.5);
	text-align: justify;
}
#dpsa figure{
	display: inline-block;
	width: 450px;
	margin: 0 0 2rem 0;
	max-width: 48%;
}
.liste_fig{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#dpsa img{
	width: 100%;
	outline: 1px solid rgba(0,0,0,0.3);
	outline-offset: -1px;
}
#dpsa figcaption{
	margin: 1rem 0 1rem 0;
}
#img_buisson{
	float: left;
	max-width: 40%;
	margin: 0 1rem 1rem 0;
}
@media screen and (max-width:767px) {
	#dpsa figure{
		display: block;
		width: 100%;
		max-width: unset;
	}
}
@media screen and (max-width:550px) {
	#img_buisson{
		float: none;
		max-width: none;
	}
}
/***********************************************************

	Icônes

************************************************************/
#play_pause, #home, #volume{
	position: absolute;
	width: 2rem;
	height: 2rem;
	z-index: 300;
	cursor: pointer;
}


#play_pause{
	left: 4rem;
	top: 1rem;
}
.play{
	background-image: url("img/icones/icone_play.svg");
}
.pause{
	background-image: url("img/icones/icone_pause.svg");
}
#home{
	left: 1rem;
	top: 1rem;
	background-image: url("img/icones/home.svg");
}
#volume{
    right: 1rem;
    top: 1rem;
	mask-size: 100% 100%;
	background-color: #fefefe;
}
.volume_on{
	mask-image: url("img/icones/volume_on.svg");
}
.volume_off{
	mask-image: url("img/icones/volume_off.svg");
}

/***********************************************************

	Ecran du défilé

************************************************************/

#conteneur_defile{
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 200;
	transition-duration: 1000ms;
	opacity: 0;
}
#defile_canvas{
	background-color: #010101;
	cursor: grab;
}
@media screen and (orientation: landscape) {
	#conteneur_defile{
		flex-direction: row;
	}
	#defile_canvas{
/*		width: 50vw;
		height: 100vh;*/
	}
}
@media screen and (orientation: portrait) {
	#conteneur_defile{
		flex-direction: column;
	}
	#defile_canvas{
		
	}
}
/***********************************************************

	Ecran des descriptions

************************************************************/

#cartouche_conteneur{
	background-color: var(--bleu);
	color: #fefefe;
	font-size: 1rem;
	line-height: 1.5em;
	min-height: 50px;
	padding: 0 20px;
	box-sizing: border-box;
	overflow: auto;
	text-align: justify;
	outline: 1px solid #000;
	scrollbar-color: #fefefe var(--bleu);
    scrollbar-width: thin;
}
#h1_defile{
	text-align: center;
}
#cadre_infos{
	transition:  300ms;
}
#form_infos{
	padding-bottom: 20px;
}
#form_infos_logo_aae{
    display: block;
	margin: auto;
	width: 50%;
}

#plane_infos{
	transition: 300ms;
}
#plane_infos img{
	float: right;
	margin: 0 0 1rem 1rem;
	width: 550px;
	height: auto;
	max-width: 100%;
	aspect-ratio: 3 / 2;
	background-color: cornflowerblue;
}

/* Photo des pilotes
--------------------*/
#div_img_profil{
	white-space: nowrap;
	overflow-x: auto;
	margin-bottom: 1rem;
}
.img_profil{
	width: 150px;
	height: 150px;
	max-width: 20vw;
	max-height: 20vw;
	border-radius: 50%;
	border: 1px solid #fefefe;
	margin: 0.5rem;
}

#video_extra_330{
	width: 100%;
}
#quick_access{
	text-align: center;
}
.quick_access, .quick_access_sel{
	border: 1px solid #fefefe;
	display: inline-block;
	width: 2rem;
	height: 2rem;
	line-height: 2rem;
	text-align: center;
	border-radius: 50%;
	margin: 0.5rem 0.5rem 0 0;
	color: #FEFEFE;
	text-decoration: none;
}
.quick_access_sel{
	color: var(--bleu);
	background-color: #fefefe;
}
@media screen and (orientation: landscape) {
	#cartouche_conteneur{
		width: 50vw;
		height: 100vh;
		border-left: 1px solid #000;
	}
}
@media screen and (orientation: portrait) {
	#cartouche_conteneur{
		width: 100vw;
		height: 40vh;
		border-top: 1px solid #000;
	}
}

/***********************************************************/


#debug{
	position:fixed;
	top: 0;
	right: 0;
	color: white;
	line-height: normal;
	padding: 5px;
	z-index: 10000;
}