.wrapper {
	height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;
	perspective: 10px;
  }
  
  header {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	transform-style: preserve-3d;
	z-index: -1;
  }
  
  .background {
	transform: translateZ(-10px) scale(2);
  }
  
  .foreground {
	transform: translateZ(-5px) scale(1.5);
  }
  
  .background,
  .foreground {
	position: absolute;
	height: 100%;
	width: 100%;
	object-fit: cover;
	z-index: -1;
  }
  
  .title {
	font-size: 7rem;
	color: white;
	text-shadow: 0 0 5px black;;
  }

  .element-inclusion{
	height: 160px;
	display: flex;
	vertical-align: super;
	background-color: white;
	color: #1b1b1b;
	align-items: center;
	padding: 9px;
	box-sizing: border-box;
	  flex: 33.3%;
	  margin: 27px;
  max-width: 240px;
  text-align: center;
  font-weight: 600;
  flex-direction: column;
  }

  .element-inclusion span{
	flex-basis: 100%;
  }
  
  .parcours-panneau{
	/*border: solid 2px green;*/
  background-color: #024f02;
  }

  .parcours-panneau h3{
	background-color: #024f02;
  color: white;
  font-weight: 600;
  padding: 18px;
  font-size: 24px;
  margin: 0;
  }

  .parcours-panneau h3 img{
	width: 26px;
	opacity: 0.6;
  }


 /* section {
	font-size: 2rem;
	padding: 2rem;
	background-color: #333;
	color: white;
  }*/

  section:not(.alternative)
{
	background-color: white;
}


  .menu-course{
	display: flex;
	flex-wrap: wrap;
  }

  .menu-course> span{
	background: white;
  flex: 0 0 33.3333%;
  color: #000;
  font-size: 14px;
  padding: 6px;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  }

  .menu-course span span{
  border-bottom: 3px solid orange;
  display: inline-block;
  width: 70%;
  transition: ease 200ms width;
  }

  .menu-course span:hover span{
	width: 100%;
  }

  .menu-course > span:after{
	content: "\203A";
	position: absolute;
  color: gray;

  }

  span.course21 span{
	border-bottom-color: red;
  }
  span.course10 span{
	border-bottom-color: orange;
  }
  span.course5 span{
	border-bottom-color: yellow;
  }
  span.course2 span{
	border-bottom-color: blue;
  }

  span.course1 span{
	border-bottom-color: green;
  }


  span.course500 span{
	border-bottom-color: yellow;
  }

  a.lien-guide{
	font-weight: 500;
	font-size: 24px;
	color: white;
	margin-top: 18px;
  }

  .conteneur-image-parcours{
	padding: 9px;
  }

section{
	width: 100%;
	min-height: 150px;
}

section.entete{
	background-image: url("/images/entete-fond.jpg");
	background-size: 100%;
	box-sizing: border-box;
}


.parallax-container {
	/*  this is where the magic happens:  */
	background-image: url("https://images.unsplash.com/photo-1519120944692-1a8d8cfc107f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80");
	background-image: url("/images/fond-depart3.png");
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
  
	/* dimensions are important, ensure it is tall enough to scroll */ 
	min-height: 100vh;
  
	/* you are free to lay out the container items with flexbox or whatever means you wish */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
  }

.spacerd{
	background: repeating-linear-gradient(
		-55deg,
		#222,
		#222 10px,
		#333 10px,
		#333 20px
);
background-size: 100% 20px;
min-height: 20px;
}

section.entete .bouton + .bouton{
	margin-left: 18px;
}

section.entete .bouton {
	width: 170px;
}

@media(max-width:1337px) {
	section.entete{
		background-size: cover;
		background-position: center;
	}
}

.presente-par{
	color: white;
	font-size: 24px;
	margin-bottom: 32px;
}

.presente-par img{
	width: 220px;
	padding: 16px;
	margin-left: 12px;
vertical-align: middle;
}

section.alternative{
	background-color: #306A04;
	color: white;
}

.barre-entete{
	color: white;
	background-color: rgba(0,0,0,0.5);
	text-align: right;
	padding: 0 9px;

}

.barre-entete .contenu{
	padding: 0;
}

.barre-entete a{
	color: white;
	text-decoration: none;
	line-height: 54px;
	font-weight: 600;
}

.barre-entete a + a{
	margin-left: 12px;
}

.titre{
	display: inline-block;
	font-size: 72px;
	color: white;
	margin-bottom: 18px;
	font-weight: 800;
	line-height: 80px;
}

.entete .contenu-principal{
	margin-top: 70px;
	padding-bottom: 70px;
}

.details-date{
	margin-top: 30px;
	display: inline-block;
	font-size: 46px;
	color: white;
}

@keyframes flipflip {
	0% {
		transform: rotate3d(1,0,0,0deg);
		font-variation-settings: "wght" 311;
	}
	100% {
		transform: rotate3d(1,0,0,-360deg);
		font-variation-settings: "wght" 582; 
	}
  }
  

.details-date span{
	color: #b6d9b6;
  letter-spacing: -2px;
  transition: 700ms ease;
  font-variation-settings: "wght" 311;
  transition-property: all;
  transform: rotate3d(1,0,0,0deg);
  display: inline-block;
  /*animation: 1s ease-out 1s 1 flipflip;
  transform: rotate3d(1,0,0,-360deg);
  font-variation-settings: "wght" 582; */
}

span.details-date:hover span{
	font-variation-settings: "wght" 311;
	transition-property: all;
	transform: rotate3d(1,0,0,0deg);
	letter-spacing: 0px;
}

  .page-chargee .details-date span{
	color: #b6d9b6;
font-variation-settings: "wght" 582; 
  letter-spacing: 1px;
  transform: rotate3d(1,0,0,-360deg);
}

 

.tableau-defis{
	border-collapse: collapse;
}

.tableau-defis td{
	border-bottom: 1px solid #dbdbdb;
	padding: 9px;
}

.tableau-defis td:first-child{
	font-size: 18px;
	text-align: left;
}

.icone-famille{
	width: 25px;
	vertical-align: bottom;
}

.tableau-defis tr:last-child td{
	border-bottom: none;
}

.grille-flex{
	display: flex;
	flex-wrap: wrap;
}

.moitie{
	flex-basis: 50%;
}

#elements-promotion{
	margin: auto;
}

#elements-promotion .conteneur-image {
	display: inline-block;
}

#elements-promotion .conteneur-image img {
	width: 70px;
}


#elements-promotion{
	background-color: white;
	margin-left: 18px;
}

#elements-promotion-parcours > div {
	box-sizing: border-box;
	  flex: 33.3%;
	}

/*
#elements-promotion > div > span {
  display: block;
  font-weight: bold;
}*/

@media(max-width:637px) {
	.contenu > #elements-promotion{
		display: block;
	}
	#elements-promotion > div {
		flex: 50%;
	}
}


@media(max-width:637px) {
	.section-defi{
		display: block;
	}

	.section-defi .moitie{
		margin-bottom: 24px;
	}
}

.ligne-avec-points{
	color: white;
	font-size: 21px;
	padding: 12px;
}

.ligne-avec-points span:not(:first-child):before{
	content: "•";
	margin: 6px;
}

#commanditaires-v2 img{
	max-width: 220px;
	max-height: 200px;
	  background-color: white;
  border-radius: 5px;
  padding: 10px;
  vertical-align: middle;
}

#commanditaires img{
	max-width: 200px;
	max-height: 200px;
  padding: 30px;
  margin: 30px;
  vertical-align: middle;
}

#commanditaires img.n1{
	max-width: 320px;
	max-height: 300px;
  vertical-align: middle;
}

#commanditaires img.n2{
	max-width: 220px;
	max-height: 220px;
  vertical-align: middle;
}


#commanditaires{
	/*background-color: #eee;*/
}

.square {
  position: absolute;
  width: 36px;
  height: 36px;
}

.square img{
	width: 100%;
}


#conteneur-coureur {
	overflow: hidden;
  width: 100%;
  height: 34px;
  position: relative;
  background: white;
  border-bottom: 4px solid #306a05;
}

.mosaic-img img{
	width: 200px;
}

.bloc-partenaires{
	margin-bottom: 72px;
}

.bloc-partenaires h2:before{
	font-family: Arial;
		content: "\2800";
	margin: 6px;
	font-size: 44px;
	line-height: 8px;
	background: gold;
	border-radius: 20px;
	width: 20px;
	height: 20px;
	display: inline-block;
}

.bloc-partenaires.platine h2:before{
	background: #758295;
}

.bloc-partenaires.argent h2:before{
	background: #d0d6df;
}

.bloc-partenaires.beton h2:before{
	background: #313131;
}

.bloc-partenaires.bronze h2:before{
	background: #d36300;
}



.sous-mention{
	font-size: 14px;
font-weight: normal;
}

.lien-parcours{
	color: black;
font-size: 18px;
display: inline-block;
}

.mention-t-shirt{
	margin-top: 36px;
}

.img-t-shirt{
	width: 30px;
margin-right: 9px;
vertical-align: middle;
}

@media(max-width:637px) {
	.titre{
		font-size: 42px;
		line-height: inherit;
	}

	.entete .bloc-boutons{
		padding: 0 24px;
	}

	.entete a.bouton{
		width: 100%;
box-sizing: border-box;
margin-left: 0;
margin-bottom: 12px;
	}

	.entete a.bouton + .bouton{
margin-left: 0;
	}
}

@media(max-width:437px) {
	#commanditaires img{
		margin: 12px;
	}
}

#commanditaires img.imglarge{
	max-width: 320px;
}

.element-cours-region {
	text-align: left;
	margin-bottom: 72px;;

}


#btn-navigation{
	display: block;
  border-radius: 100px;
  width: 38px;
  height: 38px;
  background-color: #ffffff;
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 100;
  cursor: pointer;
  opacity: 1;
  transition: 500ms ease opacity;
}

#btn-navigation.cache{
	opacity: 0;
}

.promotion-aout{
	margin: auto;
    margin-top: auto;
  max-width: 360px;
  background: orange;
  color: white;
  border-radius: 2px;
  padding: 6px;
  margin-top: 20px;
  display: flex;
  text-decoration: none;
}

.promotion-aout span{
	margin: 0 9px;
}

.promotion-aout::after{
	content: "›";
	color: white;
	font-size: 28px;
}

#btn-navigation:before{
	font-family: Arial, Helvetica, sans-serif;
  content: "\21E3";
  font-size: 25px;
  line-height: 38px;
  width: 100%;
  display: inline-block;
  text-align: center;
}

.grand-texte{
	font-size: 18px;
}

video{
	max-width: 100%;
}

.logo-diafor{
	background-color: rgba(35, 35, 35);
	padding: 9px;
}


@media(max-width:437px) {
	#elements-promotion{
		margin-left: 0;
	}

	#elements-promotion .element-inclusion{
		margin: 18px 0;
	}

	.details-date{
		font-size: 30px;
	}
	.details-date span{
		display: block;
	}

	header .bouton{
		margin-bottom: 6px;
	}
}




  .element-tournant {
	width: 120px;
	height: 120px;
	background-color: #d4a300;
	animation-name: spin;
	animation-duration: 15000ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear; 
	aspect-ratio: 1;
	--g:/16.324% 16.324% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat;
	mask: radial-gradient(100% 100%,#000 calc(41.034% - 1px),#0000 41.034%) subtract,99.289% 58.403% var(--g),92.321% 76.625% var(--g),78.911% 90.794% var(--g),61.099% 98.753% var(--g),41.597% 99.289% var(--g),23.375% 92.321% var(--g),9.206% 78.911% var(--g),1.247% 61.099% var(--g),0.711% 41.597% var(--g),7.679% 23.375% var(--g),21.089% 9.206% var(--g),38.901% 1.247% var(--g),58.403% 0.711% var(--g),76.625% 7.679% var(--g),90.794% 21.089% var(--g),98.753% 38.901% var(--g);
  
  }
  
  @keyframes spin {
	  from {
		  transform:rotate(0deg);
	  }
	  to {
		  transform:rotate(360deg);
	  }
  }

  .pub-1aout{
	position: relative;
	display: flex;
  }

  .pub-1aout span{
	position: absolute;
	text-align: center;
	width: 100%;
	color: white;
	top: 50%;
  left: 50%;
  font-size: 26px;
  transform: translate(-50%,-50%);
  font-weight: bold;
  }

  .bloc-element-tournant{
	display: inline-block;
	position: relative;
  }

  .texte-pub{
  font-size: 20px;
  color: white;
  max-width: 480px;
  align-self: center;
  }

  
.carte{
	display: inline-block;
width: 350px;
  height: 260px;
	border-radius: 10px;
	overflow: hidden;
  position: relative;
  background: black;
}

.carte.bg2{
	background: #5fc994;
background: radial-gradient(circle,rgb(64, 91, 90) 0%, rgb(155, 163, 161) 120%);
}

.carte + .carte{
	margin-left: 20px;
}

.carte > img {
	position: absolute;
  object-fit: cover;
  transform: translateZ(-10px) scale(2);
  opacity: 0.8;
}

.carte:hover .texte{
	padding: 10px;
	transition: padding 500ms ease;
}

.carte:hover > img{
	opacity: 0.7;
}

.carte > img {
	transition: opacity 500ms ease;
	position: absolute;
  object-fit: cover;
  transform: translateZ(-10px) scale(2);
  opacity: 0.8;
}

.carte .texte{
	transition: all 500ms ease;
color: #FFF;
  z-index: 10;
  font-size: 40px;
  line-height: 40px;
  font-weight: 600;
  text-align: left;
  padding: 40px;
  display: inline-block;
  box-sizing: border-box;
  margin-top: 50px;
  text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25);
  flex-grow: 1;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

.carte span{
  z-index: 10;
  position: relative;
  color: #FFF;
}

.carte span img{
	vertical-align: middle;
	margin-left: 10px;
}

.icones{
	text-align: right;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  display: block;
  padding: 20px;
  text-align: right;
}

.flex-colonne{
	display: flex;
	flex-direction: column;
	height: 100%;
}

.img4{
height: 81%;
  width: 72%;
  top: 7px;
  left: 100px;
}

.img3{
  height: 83%;
  width: 55%;
  top: 86px;
  left: 100px;
}

.img2{
  height: 83%;
  width: 55%;
  top: 65px;
  left: 100px;
}

section.alternatif2{
	background-color: #eef2eb;
}

.alternatif2 h1{
	font-weight: 500;
}

.bouton.vert-simple{
border-color: #2f6903;
  font-weight: normal;
  color: #2f6903;
  background-color: transparent;
  margin-top: 36px;
}

.bouton.vert-simple:hover{
	color: #1c4100;
}

section.alternatif2 h1{
	  color: #2f6903;
}