.nancy{
	color : #F37221;
}

body {
    background-color : #000;
}

.video-overlay{
	position : fixed;
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
	z-index : 20;
	display : flex;
	justify-content : center;
	align-items : center;
	background-color : #000000;
}

.video-overlay video{
	width : 100%;
	height : 100%;
	object-fit : cover;
}

@media screen and (max-width : 60rem){
	.video-overlay{
		height : 50%;
		top : 25%;
	}
}

.footer-content, .main, .header-content, .sticky-header{
	opacity : 0;
	width : 100%;
	z-index : 20;
}

.footer-content.active, .main.active, .header-content.active, .sticky-header.active{
	opacity : 1;
}

.sticky-header.active{
	z-index : 200;
}

/*****************************/
/*** Video de présentation ***/
/*****************************/

#video_presentation{
	margin : 0;
	padding : 0;
	display : flex;
	flex-direction : column;
	justify-content : center;
	align-items : center;
}

.video-container{
	max-width : 60rem;
	display : flex;
	align-items : center;
	justify-content : center;
	position : relative;
	margin : auto;
	padding: 20px;
    text-align: center;
}

.video-container video, .video-container .thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumbnail img{
	object-fit : cover;
	width : 100%;
	height : 100%;
}

.thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.play-button::after {
    content: "";
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 25px solid #000;
}

.video-text{
	display : flex;
	align-items : center;
	justify-content : center;
}

.video-text h1{
	font-size : 2rem;
	font-weight : bold;
}

.trailer{
	width : 100%;
	border : none;
	outline : none;
}

/**************/
/*** Slogan ***/
/**************/

#slogan{
	display : flex;
	width : 100%;
	flex-direction : column;
	justify-content : center;
	align-items : center;
}

.slogan-text h1{
	font-size : 6vw; 
	font-weight : bold;
}

.slogan-display h1{
	font-size : 4vw;
	font-weight : bold;
}



/*****************************/
/*** Photos anciens Cartel ***/
/*****************************/

#photos{
	display : flex;
	flex-direction : column;
	align-items : center;
	justify-content : center;
}

.photos-display{
	display : flex;
	flex-direction : row;
	align-items : center;
	justify-content : center;
}

.img-container{
	margin : 0 1rem;
}


.img-container img{
	border-radius : 5px;
	box-shadow : 0 4px 8px rgba(0, 0, 0, 0.1);
}

.myImage {
    max-width: 100%;
    height: auto;
    cursor: pointer;
}

.exitFullscreenButton {
    display: none;
    position: absolute;
    top: 2rem;
    right: 2rem;
    padding: 1rem 2rem;
    font-size: 2rem;
    background-color: #fff;
    border-radius : 5px;
    cursor: pointer;
    z-index: 301;
}

.fullscreen {
    position: fixed;
    margin : 0;
    padding : 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 300;
    overflow-y : hidden;
}

.fullscreen img {
    max-width: 100%;
    max-height: 100%;
}

@media (max-width : 768px){
	.photos-display{
		flex-wrap : wrap;
    	flex-direction : column;
    }
}

/************************/
/*** Compte à rebours ***/
/************************/

#compte-a-rebours{
	margin : 0;
	padding : 4rem 0;
	width : 100%;
	display : flex;
	flex-direction : column;
	justify-content : center;
	align-items : center;
}

.countdown-display{
	width : 100%;
	display : flex;
	flex-direction : column;
	justify-content : center;
	margin : 0;
	padding : 0;
	align-items : center;
}

.countdown-text{
	width : 100%;
	margin : 0;
	padding : 0;
	display : flex;
	justify-content : center;
	align-items : center;
}

.countdown-text p{
	font-weight : bold;
	font-size : 2rem;
	text-align : center;
}

.countdown{
	margin : 0;
	padding : 0;
	display : flex;
	flex-direction : row;
	justify-content : center;
	align-items : center;
}

.countdown li{
	list-style : none;
	display : flex;
	flex-direction : column;
	align-items : center;
	justify-content : center;
	margin : 0 4rem;
}

.countdown li p{
	margin : 0.5rem 0;
	color : #000000;
	font-weight : bold;
	font-size : 2rem;
}

.countdown li p:first-of-type{
	color : #F37221;
}

@media screen and (max-width : 40rem){
	.countdown li{
		width : 100%;
		margin : 0;
	}
	.countdown{
		flex-wrap : wrap;
		flex-direction : column;
	}
}

@media screen and (max-width : 80rem){

	.chiffres li{
		width : calc(40% - 2rem);
	}

	.countdown{
		flex-wrap : wrap;
	}
}

/****************************/
/*** Ecoles participantes ***/
/****************************/

#ecoles{
	margin : 0;
	padding : 0;
	width : 100%;
	overflow : hidden;
	display : flex;
	flex-direction : column;
	align-items : center;
	justify-content : center;
}

.ecoles-text{
	margin : 0;
	padding : 0;
	display : flex;
	align-items : center;
	justify-content : center;
	justify-content : column;
}

.ecoles-text p{
	font-weight : bold;
	font-size : 6vw;
}

/*******************/
/*** Partenaires ***/
/*******************/

#partenaires{
	margin : 0;
	padding : 0;
	width : 100%;
	overflow : hidden;
	display : flex;
	flex-direction : column;
	align-items : center;
	justify-content : center;
}

.partenaires-text{
	margin : 0;
	padding : 0;
	display : flex;
	width : 100%;
	align-items : center;
	justify-content : center;
}

.partenaires-text p{
	font-weight : bold;
	font-size : 6vw;
}

/**************/
/*** Slider ***/
/**************/

@keyframes scroll{
	0%{
		transform : translateX(0);
	}
	100%{
		transform : translateX(-50%);
	}
}

.slider{
	animation : scroll 20s linear infinite;
	display : flex;
	width : 200%;
}

.slider .slide{
	margin : 0 10px;
	flex : 1;
	min-width : 0;
}

/****************/
/*** Chiffres ***/
/****************/

#chiffres-cles{
	width : 100%;
	margin : 0;
	padding : 0;
	display : flex;
	flex-direction : column;
	justify-content : center;
	align-items : center;
}

.chiffres-text{
	margin : 0;
	padding : 0;
	width : 100%;
	display : flex;
	justify-content : center;
	align-items : center;
}

.chiffres-text p{
	font-weight : bold;
	font-size : 6vw;
}

.chiffres-display{
	width : 100%;
	display : flex;
	flex-direction : column;
	justify-content : center;
	margin : 0;
	padding : 0;
	align-items : center;
}

.chiffres{
	width : 100%;
	margin : 0;
	padding : 0;
	display : flex;
	flex-direction : row;
	justify-content : center;
	align-items : center;
	text-decoration : none;
	list-style : none;
}

.chiffres li{
	display : flex;
	flex-direction : column;
	align-items : center;
	justify-content : center;
	margin : 0 2rem;
}

.chiffres li p{
	margin : 0.5rem 0;
	color : #000000;
	font-weight : bold;
	font-size : 2rem;
}

.chiffres li p:first-of-type{
	color: #F37221;
}

@media screen and (max-width : 80rem){
	.chiffres{
		flex-wrap : wrap;
	}

	.chiffres li{
		width : calc(40% - 2rem);
		margin : 0;
	}

	.chiffres-text p{
		font-size : 2rem;
	}
}

@media screen and (max-width : 60rem){
	.chiffres li{
		width : 100%;
	}

	.chiffres-text p{
		font-size : 1rem;
	}

	.chiffres{
		flex-direction : column;
	}
}

/******************/
/*** Actualites ***/
/******************/

#actualites{
	width : 100%;
	display : flex;
	justify-content : center;
	align-items : center;
	flex-direction : column;
}

.actualites-text{
	display : flex;
	justify-content: center;
	align-items: center;
}

.actualites-display{
	display : flex;
	justify-content : center;
	align-items : center;
}



/******************************/
/*** Carousel photos équipe ***/
/******************************/

#equipe{
	width : 100%;
	display : flex;
	justify-content: center;
	align-items: center;
	flex-direction : column;
}

.equipe-text{
	display: flex;
	justify-content: center;
	align-items: center;
}

.equipe-remerciement{
	display : flex;	
	justify-content: center;
	align-items: center;
}

.equipe-carousel {
    position: relative;
    max-width: 60rem;
    margin: auto;
    border : 1px solid #000;
    border-radius-bottom : 2%;
}

.carousel-inner {
    overflow: hidden;
}

.carousel-item {
    display: none;
    text-align: center;
    transition : opacity 1s ease-in-out; 
}

.carousel-item.active {
    display: block;
}

.carousel-item img {
    max-width: 100%;
    height: auto;
}

.annotation {
    margin-top: 1rem;
    height : auto;
    font-size: 1rem;
}

.annotation ul{
	display : flex;
	flex-direction : column;
	justify-content: center;
	align-items : left;
}

.annotation ul li{
	list-style : none;
	text-decoration : none;
}

.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

/************************/
/*** Boutons soutenir ***/
/************************/

#soutien{
	width : 100%;
	display : flex;
	justify-content : center;
	align-items : center;
	flex-direction : column;
}

.soutien-text{
	display : flex;
	align-items : center;
	justify-content : center;
}

.soutien-display{
	display : flex;
	align-items : center;
	justify-content : center;
	flex-direction : row;
	margin-top : 1rem;
	height : 4rem;
	width : 100%;
}

.soutien-note{
	display : flex;
	align-items : center;
	justify-content : center;
	padding : 1rem 0;
}

.button {
	position : relative;
    display: inline-block;
    background-color: #F37221;
    color: white;
    padding: 1rem 2rem;
    text-align: center;
   	text-decoration: none;
    font-size: 1rem;
    margin: 2rem 1rem;
    border : 3px solid #F37221;
    cursor : pointer;
    border-radius : 5px;
    height : auto;
}

.button:hover {
    border : 3px solid #000000;
}

/*****************/
/*** President ***/
/*****************/

#mot-president{
	display : flex;
	align-items : center;
	justify-content : center;
	flex-direction : column;
}

.president-text{
	display: flex;
	align-items : center;
	justify-content:center;
}

.president-display{
	display : flex;
	flex-direction : row;
	align-items : center;
	justify-content: center;
}