/* CSS Document */

/* 
vert d'eau #C6DCDB
bleu foncé #384371
bleu pétrole #538FAA
bleu électrique #172A92
rouge #D7202B
*/
body {
	background-image: url("/pics/2026PronunciationChallenge/fd_body.jpg");
	background-position: center top;
	background-size:100% auto;
	background-repeat: no-repeat;
	font-family: "Heebo", sans-serif;
}
/* Vidéo de fond */
.bg-video {
	position: fixed;
	inset: 0;
	top:0;
	left:0;
	width: 100vw;
	height: auto;
	z-index: -1;            /* Passe derrière le contenu */
	pointer-events: none;   /* Évite toute interaction involontaire */
	background: #C6DCDB;    /* Couleur de fond si la vidéo tarde à charger */
}
/* Contenu au-dessus */
.content {
	position: relative;
	z-index: 1;
	padding-bottom: 80px;
	height: 100vh;
}
.enter .content {padding-bottom:0;}
header {
	height:240px;
	position: fixed;
	top:0;
	left:0;
	right: 0;
}
.enter header {height:24.72vh;}
section {
	position: absolute;
	top: 240px;
	left: 0;
	width: 100%;
	bottom:90px;
	overflow: scroll;
}
.enter section {bottom:0;height:75.28vh;top:24.72vh;}
h1 {
	color:#384371;
	font-family: "Oranienbaum", serif;
	text-align: center;
	font-size: 76px;
	leading-trim: NONE;
	line-height: 94%;
	letter-spacing: -3%;
}
.h1, .h2, .h3, .h4, .h5, .h6 {text-align: center;}
.enter h1 {font-size: 7.22vh;}
.form.es h1 {font-size:50px;} 
h2 {color:#D7202B;font-family: "Oranienbaum", serif;margin-bottom: 1.5rem;}
a {color:#538FAA;}
a:hover {color:#D7202B;}
footer {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1030;
	padding:10px 0 0 0;
}
.pastille {
	display:block;
	position: absolute;
	right: 0.5rem;
	top:0.5rem;
	background: #D7202B;
	color: #FFFFFF;
	padding: 4px 6px;
	border-radius: 0.25rem;
	z-index: 1000;
	border:0;
}
.pastille:hover {
	color:#FFFFFF;
	background-color: #172A92;
	text-decoration: none;
}
@media (min-width: 1390px) {
	.container {max-width: 1340px;}
}
@media (min-width: 1680px) {
	.d-xl-block {display: block !important;}
	.d-xl-none {display: none !important;}
	.container {max-width: 1620px;}
}
@media (min-width: 1970px) {
	.d-xxl-block {display: block !important;}
	.d-xxl-none {display: none !important;}
}

.toplogo {max-width: 20vw;height: auto;margin: 2rem 0 1rem 0;}
nav {border-bottom:1px solid #538FAA;}
.navbar {padding:0;}
.nav-link {color:#384371 !important;}
.nav-link.active, .nav-link:hover {background-color:#538FAA;}
.navbar-toggler-icon {background:url("/pics/2026PronunciationChallenge/navbar-toggler-icon.svg") center center no-repeat;background-size: contain;}
.btn-primary {text-transform: uppercase;background-color:#D7202B;border-color:#D7202B;font-size: 24px;padding:10px 30px;}
.btn-primary:hover {background-color:#384371;border-color:#384371;}
.nav-link {
	margin: 0 1rem;
	display: inline-block;
	font-family: Heebo;
	font-size: 18px;
	leading-trim: NONE;
	line-height: 105%;
	letter-spacing: 9%;
	border-radius: 5px;
	padding: 5px 20px;
	color:#C6DCDB;
}
.nav-link:hover, .nav-link.active {
	background-color:#C6DCDB;
	color:#FFFFFF;
}
.hashtag {font-size:20px;}
#mavideo {max-height:60.92vh;width:auto;}
.enter .img img {max-height: 60.92vh;width:auto;}
.enter .p-btn {padding-top:4.44vh;}
.enter .toplogo {padding-top:5.09vh!important;padding-bottom:0;margin-top: 0;margin-bottom: 0;max-height: 10.18vh;width: auto;}
/* _______________________________________________ FORMULAIRE _______________________________________________ */
.g-recaptcha {overflow: hidden;}
table.femme, .divfemme800, .divfemme600 {
	position: fixed;
	top:270px;
}
table.femme800, table.femme600 {
	position: absolute;
	top:0;
	right:20px;
}
table.femme {
	position: fixed;
	top:360px;
}
table.femme, table.femme td, table.femmefin, table.femmefin td, table.femme800, table.femme800 td, table.femme600, table.femme600 td {
	border-collapse: collapse;
	border: 0;
	padding: 0;
	margin: 0;
}

table.femme img, table.femmefin img, table.femme800 img {
	border:0;
	margin: 0;
	padding: 0;
	display: block;
}
.divfd_form {
	position:sticky;
	z-index: 100;
	top:0;
	left: 0;
	width:100%;
	background:url("/pics/2026PronunciationChallenge/fd_form.png") top center repeat-x;
	height:150px;
}
.recordBtn, .stopBtn, .resetBtn {
	background-color:#C6DCDB;
	border-color:#172A92;
	border-radius:3px;
	margin:5px 0;
	padding: 6px 10px;
}
fieldset, .divcont {
	margin:40px 0;
	padding:20px 60px;
	border:0;
	border-radius: 20px;
	box-shadow: 0px 4px 29.4px 0px #C6DCDB;
	position: relative;
	background-color:#FFFFFF;
}
legend {
	border:0;
	position: absolute;
	top:0;
	left: 0;
	right:0;
}
fieldset .num {
	color:#D7202B;
	font-family: "Oranienbaum", serif;
	font-size:1.75rem;
	display: inline-block;
	margin:0 0 0 -30px;
	float:left;
}
label {margin-bottom: 0;}
input[type="text"], input[type="email"], input[type="tel"], .divenreg, textarea {
	width: 100%;
	margin: 0 auto 1rem auto;
	padding: 10px;
	border-radius: 6px;
	border:1px solid #C6DCDB;
}
textarea {min-height:180px;}
.alert-warning, #messageFormulaire {
	position: relative;
	padding: .25rem 1.25rem;
	margin-bottom: 1rem;
	border: 1px solid #172A92;
	border-radius: .25rem;
	color: #172A92;
	background-color: #C6DCDB;
}
.divfin {min-height:50vh;}
@media (max-height: 1390px) {
	.chien {max-height:40vh;width:auto;}
}
.divenreg, .divfollow {display:none;}
.txtoranienbaum {font-family: "Oranienbaum", serif;}
.txtvertdeau {color:#C6DCDB;}
.txtbleupetrole {color:#538FAA;}
.txtbleuelectrique {color:#172A92;}
.txtrouge {color:#D7202B;}

.fdvertdeau {background-color:#C6DCDB;}
.fdbleupetrole {background-color:#538FAA;}
.fdbleuelectrique {background-color:#172A92;}
.fdrouge {background-color:#D7202B;}
.fdblanc {background-color:#FFFFFF;}

@media (max-width: 1398.98px) {
	h1, .enter h1 {font-size:46px;}
	.form.es h1 {font-size:35px;} 
	.content {padding-top: 168px;}
	header {height:168px;}
	section {top: 168px;}
	.toplogo {margin: 1rem 0;}
}
@media (max-width: 1198.98px) {
	.enter .intro {width:100%;}
	.toplogo {margin: 0.5rem 0;}
	.content {padding-bottom: 110px;}
	section {bottom:110px;}
	.nav-link {padding-right: 6px;padding-left: 6px; margin:0.2rem 1rem;}
}
@media (max-width: 991.98px) {
	.divfin {min-height:0;}
}
@media (max-width: 767.98px) {
	h1, .enter h1, .form.es h1 {font-size: 28px;}
	.intro .img, .intro .video {width:360px;height: auto;max-width: 100%;}
	.toplogo {margin: 0.3rem 0;}
	header, .enter header, section, .enter section, footer {position:static;height:auto;top:auto;right:auto;bottom:auto;left:auto;}
	.content {padding:3rem 0;height:auto;}
	.enter .img img {max-height: 640px;}
	.enter .p-btn {padding-top:2rem;padding-bottom:168px;}
	.enter .toplogo {padding-top:0!important;margin: 0.5rem 0;max-height: 39px;width: auto;}
	#mavideo {max-height:640px;}
	table.femme {position: static;top:auto;}
	.divfd_form {display: none;height:0;}
	fieldset, .divcont {padding:14px;}
	fieldset .num {display: inline;margin:0 6px 0 0;float:none;}
}
@media (max-width: 575.98px) {
	h2 {margin: 0.5rem 0;font-size: 1.5rem;}
	h3 {font-size: 1.2rem;}
	.toplogo {max-width: 40vw;height: auto;}
	nav {border:0;}
	.navbar-toggler {border: 1px solid #538FAA;}
	ul {padding-left: 1px;margin-left:1px;}
	#divvideo {min-height: 200px;}
	table.femme {position: static;top:auto;}
}