@charset "utf-8";
/* CSS Document */

@font-face {
font-family: 'Roboto';
src: url('typo/Roboto-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('typo/Roboto-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}

body,html{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Roboto'; 
	font-size: 18px;
	background-color: #ffffff;
}

/* TYPO ------------------------------------ */
p{ margin: 0; padding: 0; }

.titreH1{
	margin: 0;
	padding: 0;
	font-size: 2.5em;
	color: #ffa500;
	font-weight: bold;
}
.lienOrange{
	text-decoration: none;
	color: #ffa500;
}
.big{ font-size: 2em; font-weight: bold; }

/* --------------------------------------- */


.topPage{
	width: 100%;
	position: relative;
	float: left;
}
.backP1{
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: stretch;
	position: relative;
	float: left;
	top: 0;
	left: 0;
	z-index: 1;
}
.phBack50{
	width: 50%;
	height: 100%;
	position: relative;
	overflow: hidden;
}
.phBack50 img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.triangleTop{
	width: 75%;
	height: 70px;
	background-color: #ffa500;
	clip-path: polygon(100% 0, 0 0, 50% 100%);
	position: absolute;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	z-index: 2;
}
.logoTop{
	width: 140px;
	height: 140px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
}
.logoTop img{ max-width: 100%; height: auto; display: block; }

.cadreAccroche{
	width: 500px;
	height: 475px;
	border: 4px solid #ffffff;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap:15px;
	position: absolute;
	float: left;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari */
	background: rgba(255,255,255,0.1);
	z-index: 4;
}
.dateAccroche{ font-size: 1.5em; color: #ffffff; }
.bigAccroche{ font-size: 2.2em; font-weight: bold; text-transform: uppercase; color: #ffa500; text-shadow: 0 0 4px #000000; }
.midAccroche{ font-size: 1.5em; font-weight: bold; color: #ffffff; text-shadow: 0 0 4px #000000; }

.losangeAccroche{
	width: 200px;
	height: 200px;
	display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
	position: relative;
	margin: 40px 0;
}
.losangeAccroche::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    border: 2px dashed #ffa500;
    transform: rotate(45deg);
    transform-origin: center;
    box-sizing: border-box;
    z-index: 1;
}
.contenuLosange{
	font-size: 1.5em;
	font-weight: bold;
	color: #ffa500;
	position: relative;
	z-index: 2;
}
.bigLosange{ font-size: 2em; font-weight: bold; color: #000000; }

.boutonInscription{
	width: 350px;
	height: 55px;
	border: 2px solid #ffa500;
	border-radius: 30px;
	background-color: #ffffff;
	position: absolute;
	bottom: -35px;
	display: block;
	z-index: 2;
	transition: all 0.4s;
}
.txtBoutonIns{
	font-size: 1.3em;
	font-weight: bold;
	white-space: nowrap;
	color: #ffa500;
	position: absolute;
	top: 50%;
	left: calc(50% - 30px);
	transform: translate(-50%, -50%);
	transition: all 0.4s;
}
.txtBoutonIns::First-letter{
	color: #000000;
}
.rondFlecheInscription{
	height: 100%;
	aspect-ratio:1/1;
	background-color: #ffa500;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 100%;
	transform: translateX(-100%);
	transition: all 0.4s;
}
.rondFlecheInscription img{ max-width: 50%; height: auto; display: block; }

.boutonInscription:hover{
	background-color: #ffa500;
}
.boutonInscription:hover .rondFlecheInscription{
	background-color: #000000;
	left: 0;
	transform: translateX(0) rotate(720deg);
}
.boutonInscription:hover .txtBoutonIns{
	color: #ffffff;
	left: calc(50% + 20px);
}

.ligneReseau{
	width: 100%;
	display: flex;
	justify-content: center;
	gap:40px;
	position: absolute;
	bottom: 40px;
	left: 0;
	z-index: 2;
}
.logoReseau{
	width: 45px;
	aspect-ratio:1/1;
	position: relative;
}
.logoReseau img{ max-width: 100%; height: auto; display: block; }


/* PARA 1 --------------------------------------- */
.paraInsc{
	width: 100%;
	/*height: 100vh;*/
	background-color: #ffffff;
	position: relative;
	float: left;
}
.bandVague{
	width: 100%;
	height: 70px;
	background-image: url("img/vague.svg");
	background-repeat: repeat-x;
	background-size: auto 100%;
	position: relative;
}

.bandBon{
	width: 100%;
	height: 200px;
	display: flex;
	justify-content: space-around;
	align-items: flex-end;
	position: relative;
	margin: 30px 0;
}
.blocBon{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	z-index: 2;
}
.numBon{
	font-size: 1.5em;
	font-weight: bold;
}
.numBon.big{ font-size: 2em; }
.cadreValeurBon{
	width: 120px;
	padding: 10px;
	border-radius: 10px;
	border: 2px solid #ffa500;
	font-size: 2.2em;
	font-weight: bold;
	color: #ffa500;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.cadreValeurBon.big{
	width: 140px;
	font-size: 3em;
}
.cercleBon{
	width: 25px;
	aspect-ratio:1/1;
	border: 1px solid #ffa500;
	border-radius: 50%;
	background-color: #ffffff;
	position: relative;
	margin-top: 15px;
	margin-bottom: 5px;
}
.cercleBon.big{
	width: 30px;
	background-color: #ffa500;
	margin-bottom:2px;
}
.traitBon{
	width: 100%;
	height: 1px;
	background-color: #ffa500;
	position: absolute;
	left: 0;
	bottom: 18px;
	z-index: 1;
}

.flex100{
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: relative;
	margin: 30px 0;
}

/* FORMULAIRE --------------------------------- */
.colInscription{
	width: calc(50% - 60px);
	max-width: 450px;
	position: relative;
	float: left;
	margin: 0 30px;
	grid-column: 1;
    grid-row: 1;
}
.blocForm{
	width: calc(100% - 50px);
	padding: 20px;
	border-radius: 20px;
	border:2px solid #ffa500;
	background-color: rgba(255,165,0,0.1);
	position: relative;
	float: left;
}

label {
position: absolute;
width: 0;
height: 0;
padding: 0;
margin: 0;
border: none;
clip: rect(0, 0, 0, 0);  /* Masque le label tout en le maintenant pour les lecteurs d'écran */
clip-path: inset(50%);
}
label.dNaissance {
	font-size: 14px;
            margin-bottom: 5px;
            display: block;
}
input[type="date"]::-webkit-outer-spin-button,
        input[type="date"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

.chpStdFull{
	width: calc(100% - 32px);
	/*height: 30px;*/
	color: #000000;
	font-family: 'Roboto';
	font-size: 1em;
	text-align: left;
	border-radius: 8px;
	border: 1px solid #ffa500;
	position: relative;
	float: left;
	margin: 5px 0;
	padding: 10px 5px;
	clear: both;
}
.chpStdFull::placeholder{ color: #999999; }
.chpStdFull.court{
	width: calc(100% - 32px);
	max-width: 200px;
}
.caseCheck{
	width: 20px;
	height: 20px;
}
.subStd{
	width:150px;
	max-with:calc(100% - 22px);
	border: 0;
	border-radius: 8px;
	font-family: 'Roboto';
	color: #ffffff;
	font-size: 1em;
	text-align: center;
	vertical-align: middle;
	background-color:#ffa500; 
	position: relative;
	float: left;
	clear: both;
	left: 50%; 
	transform: translateX(-50%);
	margin: 10px 0;
	padding: 10px 0;
	cursor: pointer;
}
.subStd:disabled{
	background-color: #999999;
	cursor: default;
}
.ligneTxtForm{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap:10px;
	position: relative;
	float: left;
	margin: 20px 0;
}

.dn{
	width: 100%;
	position: relative;
	float: left;
}
.nomchamps{
	width: calc(100% - 32px);
	max-width: 200px;
	font-family: 'Roboto';
	font-size: 1em;
	text-align: left;
	color: #999999;
	border-radius: 8px;
	border: 1px solid #ffa500;
	background-color: #ffffff;
	position: absolute;
	float: left;
	margin: 5px 0;
	padding: 10px 5px;
	z-index: 2;
}

/* BANDEAU ANIME -------------------------- */
.colDeco{
	width: calc(50% - 60px);
	max-width: 570px;
	position: relative;
}

.bandAnim{
	width: 100%;
	height: 180px;
	position: relative;
	margin-bottom: 10px;
	overflow: hidden;
}
.fdAnim{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.fdAnim img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.couvBandAnim{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	position: absolute;
	float: left;
	top: 0;
	left: 0;
	z-index: 2;
}
.infoCouv{
	width: 100%;
	max-width: 0;
	height: 100%;
	background-color: rgba(255,165,0,0.7);
	color: #ffffff;
	text-align: center;
	white-space: nowrap;
	text-shadow: 0 0 3px #000000;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
	transition: all 0.4s;
	z-index: 2;
}
.bordCouv{
	width: 10px;
	height: 100%;
	background-color: #ffa500;
	position: relative;
	z-index: 2;
}
.languetteCouv{
	width: 25px;
	aspect-ratio:1/1;
	background-color: #ffa500;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	transform: translateX(-5px);
	z-index: 3;
}
.languetteCouv img{ max-height: 70%; width: auto; display: block; }
.bandAnim:hover .infoCouv{
	max-width: 75%;
}

.galerie{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap:1px;
	position: relative;
	float: left;
	margin-top: 30px;
}
.caseGalerie{
	width: calc(100% / 6);
	aspect-ratio:1/1;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
}
.caseGalerie img{
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition: all 0.4s;
}
.caseGalerie:hover img{
	transform: scale(1.10);
}


/* REGELEMENT ------------------------------------------ */
.paraRegle{
	width: 100%;
	border-top: 20px solid #00aaf1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	position: relative;
}
.fondRegle{
	width: 100%;
	height: 100%;
	max-height: 100vh;
	background-image: url("img/fond-regle.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}
.logoRegle{
	width: 90px;
	aspect-ratio:1/1;
	position: relative;
	margin: -10px 0 30px 0;
}
.logoRegle img{ max-width: 100%; height: auto; display: block; }
.txtRegle{
	width: calc(100% - 60px);
	max-width: 1140px;
	background-color: #ffffff;
	padding: 20px;
	margin-bottom: 20px;
	position: relative;
	z-index: 2;
}
.enteteRegle{
	width: 100%;
	font-size: 2em;
	font-weight: bold;
	text-align: center;
	display: inline-block;
	margin-bottom: 60px;
}

.basPage{
	width: 100%;
	background-color: #ffffff;
	border-top: 1px solid #ffa500;
	position: relative;
	float: left;
}
.copyr{
	width: 100%;
	max-width: 1600px;
	font-size: 0.9em;
	color: #666666;
	text-align: center;
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	margin: 10px 0;
}

.trame{
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.9);
	position: fixed;
	top: 0;
	left: 0;
	float: left;
	z-index: 6;
}
.popMess{
	width:calc(100% - 22px);
	max-width: 370px;
	border-radius: 8px;
	background-color: #ffffff;
	border: 1px solid #ffa500;
	box-shadow: 0 0 8px #000000;
	position: absolute;
	float: left;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 7;
}
.boutonClose{
	width: 100%;
	color: #ffffff;
	background-color: #ffa500;
	padding: 5px 0;
	text-align: center;
	position: relative;
	float: left;
}
.infoMess{
	width: calc(100% - 40px);
	text-align: center;
	margin: 20px;
	position: relative;
	float: left;
}

.retourConf{
	width:calc(100% - 30px);
	background-color: #ffffff;
	padding: 5px;
	text-align: center;
}