/********************************/
/*
/* COLORS
/*
/* Jaune : #ffcd00 / 255,205,0
/* Vert : #93c01f / 147/192/31
/* Bleu : #008ece / 0,142,206
/*
/********************************/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/*******************/
/*  GLOBAL
/*******************/

html{
	overflow-x: hidden;
}

body{
	margin: 0;
	font-family: "Open Sans", sans-serif;
	overflow-x: hidden;
	position: absolute;
	width: 100%;
}

*, ::before, ::after{
	box-sizing: border-box;
}

object{
    pointer-events: none;
}

#page404{
	text-align: center;
}

#page404 img{
	width: 100%;
	max-width: 1000px;
}

.champs_t{
	display: none;
}

.hover_opacity{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 0;
}

.color_jaune{
	color: #ffcd00;
}

.color_bleu{
	color: #008ece;
}

.bg_color_jaune{
	background-color: #ffcd00;
}

.bg_color_bleu{
	background-color: #008ece;
	color: #fff;
}

.bg_color_after_jaune h1::after{
	background-color: #ffcd00;
}

.bg_color_after_bleu h1::after{
	background-color: #008ece;
}



/*******************/
/*  ANIMATIONS
/*******************/

@keyframes Apparition {
  0% {
    opacity: 0; /* Commence invisible */
  }
  100% {
    opacity: 1; /* Fini entièrement visible */
  }
}

.apparition {
  animation: Apparition 2s ease-out forwards; /* Durée, timing, et remplissage */
}

.apparition2 {
  animation: Apparition 3s ease-out forwards; /* Durée, timing, et remplissage */
}