@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap');

:root {
	--blue-jicom: #312783;
	--green-jicom: #36c7a3;
	--yellow-jicom: #F9EC60;
	--pink-jicom: #E94490;
	--grey-jicom: #efeff0;
	--pink-toutela: #f41672;
	--yellow-toutela: #FCC80C;
	--blue-toutela: #2aa5a8;
 }

.jicom-button{
  font-family: 'Quicksand','Arial';transition: all 0.2s ease;
  display: inline-block;font-size: 15px;text-decoration:none;color:white;font-weight: normal;
  cursor:pointer;border-radius:6px;padding:8px 18px;font-weight:bold;
}
.yellow-button{font-weight: bold;background: var(--yellow-jicom);border:2px solid var(--yellow-jicom);color: #333;}
.yellow-button:hover{color: #333;background: transparent !important}
.connecter-bouton{font-size: 19px;width: auto;}

.classic-button{border:2px solid var(--blue-jicom);background:var(--blue-jicom);color:white;font-weight: bold;}
.classic-button:hover{border:2px solid var(--blue-jicom); background: transparent !important;color:var(--blue-jicom);}


.pink-button{border:2px solid var(--pink-jicom);background:var(--pink-jicom);color:white;}
.pink-button:hover{border:2px solid var(--pink-jicom); background: transparent !important;color:var(--pink-jicom);}

* {
	box-sizing: border-box;
}

body {
	font-family: 'Quicksand', sans-serif;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

h2,h3 {
	color: #E94490;
	font-weight: 700;
	width: 100%;
	text-align: center;
	font-size: 30px;
	margin: 50px auto 50px auto;
}

h3 {
	font-size: 30px;
	color: rgb(89, 89, 89);
	margin: 15px auto;
	width: 85%;
}

.banniere {
	background-image: url("../images/vitrine/banniere.png");
	background-size: cover;
	background-position: center;
  	background-repeat: no-repeat;
  	margin-bottom: 50px;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	flex-direction: column;
  	padding: 20px 0;
  	min-height: 175px;
}

#home-banniere {
	height: 430px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
}

#home-banniere h3 {
	width: 575px;
	max-width: 90%;
	text-align: left;
	font-size: 30px;
	margin: 0;
}

#home-banniere span {
	font-size: 20px;
}

#home-banniere img {
	height: 370px;
	margin-bottom: -15px;
}


.avis-container{
    max-width: 700px;position: relative;text-align: center;
    margin:auto;margin-bottom:20px;
}

.avis-container .yellow-button{
    text-decoration: none;cursor:pointer;
    display: inline-block;padding: 8px 28px;
    border-radius: 20px;
    background-color: #F9EC60;
    color: rgb(89, 89, 89);
    text-align: center;font-weight: 700;
    margin-top: 20px;
    border: 1.5px solid #F9EC60;
}
.avis-container .yellow-button:hover{background-color: white;transition-duration: 0.3s;}

.avis-container .textarea-ttv,.avis-container .input-ttv{
    margin: 10px;font-size: 16px;padding: 8px 12px;
    outline: none;text-align: center;
    font-family: 'Quicksand', sans-serif;
    border-radius: 5px;border:1px solid #c3c3c3;
    width: 100%;
}

*,*:after,*:before{
  box-sizing: border-box;
  outline: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.rating-css {
  cursor: pointer;
  height: 30px;
  font-size: 0;
  margin-bottom: 15px;
}

.rating-css input {
  display: none;
}

.rating-css input + label {
  text-align: center;
  font-size: 24px;
  color: #FFC107;
  cursor: pointer;
}

.rating-css input:checked + label ~ label {
  color: #555;
}

.rating-css.hover-effect input:checked + label ~ label,
.rating-css.hover-effect:hover input:hover + label ~ label {
  opacity: 0.5;
}

.rating-css.hover-effect:hover input + label ~ label {
  opacity: 1;
}

h4 {
	font-weight: 700;
	text-align: center;
	width: 100%;
	font-size: 20px;
	margin: 50px auto 25px auto;
	color: #312783;
}

.titre-module {
	font-weight: 700;
	text-align: center;
	width: 100%;
	font-size: 20px;
	margin: 10px auto;
	color: black;
}
/*
#tableau h4 {
	text-align: left;
	font-size:  20px;
	margin: 0;
	color: white;
}

#tableau {
	display: flex;
	justify-content: center;
	position: relative;
	flex-wrap: wrap;
	margin-bottom: 175px;
}

#tableau div {
	width: 250px;
}

#tableau > div > div {
	padding: 15px;
	width: 250px;
	height: 250px;
	position: relative;
	background-color: white;
}

#tableau > div:nth-child(1) > div,#tableau > div:nth-child(4) > div {
	background-color: #E94490;
}

#tableau > div:nth-child(2) > div {
	background-color: #312783;
}

#tableau > div:nth-child(3) > div {
	background-color: #F9EC60;
}

#tableau > div:nth-child(3) > div > .a-bouton {
	background-color: #E94490;
	color: white;
}

#tableau > div:nth-child(3) > div > p,#tableau > div:nth-child(3) > div > h4 {
	color: #312783;
}

#tableau p {
	font-size: 16px;
	line-height: 1em;
	margin: 0;
	color: white;
}

*/

#tableau {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

#tableau > div {
	width: 40%;
	text-align: center;
	margin: 20px;
}

#tableau > div > div {
	height: 220px;
	padding: 10px;
	-webkit-box-shadow: 0px 3px 16px -7px #000000; 
	box-shadow: 0px 3px 16px -7px #000000;
	border-radius: 10px;
}

#tableau > div > div:hover{   transform: scale(1.05);transition-duration: 0.3s;}

#tableau .image-vitrine{
	height: 100%;
	width: 40%;
	float: left;
	align-content: center;
}

#tableau .contenu-comm{
	width: 60%;
	height: 100%;
	float: left;
	text-align: center;
	align-content: center;
}

#tableau img {
	width: 75%;
	height: 100%;
	object-fit: contain;
}


#tableau h4, #tableau p {
	margin: 0;
}

.a-bouton {
	text-decoration: none;
	display: block;
	border-radius: 20px;
	background-color: #F9EC60;
	color: rgb(89, 89, 89);
	padding: 8.5px;
	text-align: center;
	font-weight: 700;
	border: 1.5px solid #F9EC60;
}

.a-bouton:hover {
	background-color: white;
	transition-duration: 0.5s;
}
/*
#tableau img {
	width: 250px;
}

#tableau svg {
	width: 90%;
	position: absolute;
	z-index: -1;
	height: 110%;
	top: 15%;
	fill: #E94490;
	opacity: 0.5;
	display: none;
}
*/
#sous-titre-module {
	width: 85%;
}

main {
	margin-top: 120px;
}

.title-left,.title-right {
	color: #312783;
	font-size: 20px;
	margin: 75px 15% 33px 15%;
}

.title-right {
	text-align: right;
}

.title-left span,.title-right span {
	font-weight: 700;
	font-size: 30px;
}

.rose {
	color: #E94490;
}

.bleu {
	color: #312783;
}

.blanc {
	color: white;
}

nav .bleu:hover {
	color: #E94490;
}

nav .blanc:hover {
	color: #F9EC60;
}

.sous-titre {
	font-size: 20px;
	line-height: 1.1em;
	width: 830px;
	max-width: 85%;
	text-align: center;
	margin: 20px auto;
	font-weight: bold;
	color: #312783;
}

.modules {
	width: 90%;
	min-width: 222px;
	margin: 30px auto;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
}

.modules > div {
	width: 222px;
	text-align: center;
	margin: 7px;
}

.modules p {
	font-size: 14px;
}

.modules img {
	width: 100%;
	height: 125px;
	object-fit: contain;
}

#liste-logo {
	width: 90%;
	margin: auto;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	flex-wrap: wrap;
}

#liste-logo img {
	width: 200px;
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  	filter: grayscale(100%);
}

#temoignage {
	display: flex;
	justify-content: center;
	align-items: center;
}

#temoignage p {
	display: block;
}

.fleche {
	font-size: 5em;
	color: #312783;
	cursor: pointer;
}

#temoignage p:not(.fleche) {
	width: 750px;
	height: 300px;
	max-width: 90%;
	margin: 0 75px;
	font-size: 16px;
	border-radius: 64% 36% 51% 49% / 53% 51% 49% 47%;
	background-color: #312783;
	padding: 85px;
	color: white;
	text-align: center;
}

#temoignage > #temoignage1, #temoignage > #temoignage2, #temoignage > #temoignage3 {
	display: none;
}

#home-modules {
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	margin: auto auto 100px auto;
}

#home-modules > div {
	width: 222px;
}

.billetterie-index .entete{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.billetterie-index .contenu-billetterie .border-right{border-right: 1px solid rgba(0, 0, 0, 0.1);}

.avantage-index{
	text-align: -webkit-center;
}

.billetterie-index{
	width: 80%;
	box-shadow: 0px 3px 16px -7px #000000;
	border-radius: 10px;
}	
.billetterie-index .contenu-billetterie{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
}


.billetterie-index .contenu-billetterie .offre #bloc-icone{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-evenly;
}

.billetterie-index .contenu-billetterie .offre #icone{
	box-shadow: 0px 3px 16px -7px #000000;
	border-radius: 10px;
	padding: 5px;
	margin: 10px 0px;
	width: 110px;
    	height: 110px;
	align-content: center;
}
.billetterie-index .contenu-billetterie .offre #icone img{
	width: 100%;
}

.billetterie-index .entete div{
	width: 34%;    
	height: 100px;
	align-content: center;
}

.billetterie-index .entete .entete-billetterie{border-bottom: 7px solid #312783;cursor: pointer;}
.billetterie-index .entete .active{border-bottom: 7px solid #E94490;}
.billetterie-index .entete .entete-droite{border-right: 1px solid rgba(0, 0, 0, 0.1);}

#home-modules img {
	width: 100%;
	height: 125px;
	object-fit: contain;
	margin-bottom : 10px
}

  
  /* Cacher les slides */
  .slide {
	display: none;
  }

  .slide.active {
	transform: translateX(0); /* Slide active au centre */
	opacity: 1;
  }
  
  .slide.prev {
	transform: translateX(-100%); /* Slide précédente sort à gauche */
  }
  
  .slide.next {
	transform: translateX(100%); /* Slide suivante entre par la droite */
  }
  
  /* Animation de fondu */
  .fade {
	animation-name: fade;
	animation-duration: 1.5s;
  }
  
  @keyframes fade {
	from {opacity: .4} 
	to {opacity: 1}
  }
  
  
  /* Dots/boutons de navigation */
  .dots-container {
	text-align: center;
	position: absolute;
	bottom: 10px;
	right: 10px;
  }
  
  .dot {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
  }
  
  .active-dot, .dot:hover {
	background-color: #717171;
  }

#home-modules .a-bouton {
	position: relative;
	margin: auto;
	width: 60%;
}

footer {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
}

footer > div {
	width: 50%;
}
footer div:nth-child(1) img{width: 50%;}
footer div:nth-child(1) a{text-align: center;}
footer div:nth-child(2),footer div:nth-child(1),footer div:nth-child(3) {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 30px;
}

footer div:nth-child(1) {
	background-color: #312783;
}

footer div:nth-child(2) h4 {
	color: #E94490;
}

.contact-vitrine h4 {
	color: white;
	margin: auto;
	padding: 20px;
}

.form-control{margin: 20px auto;
	padding: 20px;
	background: var(--yellow-jicom);
	border-radius: 13px;}

.contact-vitrine form {
	width: 40%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.contact-vitrine .img-contact img{object-fit: contain;width: 200px;}
.contact-vitrine .img-contact{    width: 35%;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;}
.contact-vitrine .information-contact{background: var(--pink-jicom);width: calc(90% - 50px);margin: 20px auto;border-radius: 10px;}
.contact-vitrine form input,
.contact-vitrine textarea {
	margin: 10px;
	font-size: 16px;
	padding: 5px;
	outline: none;
	text-align: center;
	font-family: 'Quicksand', sans-serif;
	border-radius: 5px;
	border: none;
	width: 100%;
}


.contact-vitrine form input[type="submit"] {
	background-color: #E94490;
	padding: 10px;
	color: white;
	cursor: pointer;
	border: 2.5px solid #E94490;
}


.contact-vitrine form input[type="submit"]:hover {
	background-color: white;
	color: #E94490;
	transition-duration: 0.5s;
}

footer div:nth-child(1) a,footer div:nth-child(2) a {
	text-decoration: none;
	color: white;
	margin: 3px auto;
	font-size:  16px;
}

.row {
	display: flex;
}

footer div:nth-child(2) {
	background-color: #312783;
}




.contact-vitrine textarea {
	resize: none;
}

nav {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 60px;
	position: fixed;
	background-color: white;
	top: 0;
	left: 0;
	z-index: 10;
	font-size: 14px;
}

#menu-icon {
	display: none;
}

.nav-bas{top: 60px;}

.nav-haut{justify-content: space-between;}
.nav-haut a{margin: 0px 20px;}


nav > a {
	width: 19%;
	display: block;
}

nav > a > img {
	width: 100%;
}

nav ul {
	list-style-type: none;
}

nav > ul {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100px;
}

nav > ul > li {
	height: 60px;
	margin: 15px;
	position: relative;
}

nav > ul > li > ul {
	width: 250px;
	position: absolute;
	padding: 0;
	left: 50%;
  	transform: translateX(-50%);
  	text-align: center;
  	font-size: 14px;
  	background-color: white;
  	display: none;
}

nav > ul > li > ul > li > a {
	line-height: 1.75em;
}


@media only screen and (min-width: 801px) {
	nav > ul > li:hover > ul {
		display: block;
	}

	nav > ul > li > ul:hover {
		display: block;
	}
}

nav > ul > li > a {
	height: 60px;
	display: block;
	line-height: 60px;
}

nav a {
	text-decoration: none;
	font-size: 20px;
	color: #312783;
	font-weight: 700;
}

nav a:hover {
	color: #E94490;
}

.gestion-rose {
	width: 430px;
	max-width: 90%;
	position: relative;
	/*margin: 100px 0 100px 15%;*/
}


.gestion-rose svg {
	position: absolute;
	z-index: -1;
	fill: #E94490;
	width: 230%;
	height:200%;
	top: -50%;
	left: -100%;
}

#gestion p {
	font-size: 16px;
	color: white;
	background-color: #E94490;
	border-radius: 64% 36% 51% 49% / 53% 51% 49% 47%;
	padding: 85px;
	text-align: center;
}

#gestion img {
	width: 30%;
}

#gestion > div {
	width: 60%;
}

#gestion-p,#gestion-p2 {
	text-align: right;
	padding-right: 15%;
	display: flex;
	justify-content: flex-end;
}

#gestion-p p,#gestion-p2 p {
	width: 430px;
	max-width: 90%;
	margin: 0;
}

#gestion-p2 {
	text-align: left;
	padding-right: 0;
	padding-left: 15%;
	justify-content: flex-start;
	flex-direction: column;
}

#gestion-p2 .a-bouton {
	position: relative;
	bottom: 0;
	margin-top: 15px;
	width: 15%;
}

.largeur-split {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.largeur-split .gestion-rose svg {
	height:170%;
	top: -30%;
	left: -100%;
}

.largeur-split img {
	width: 400px;
	margin-right: 10%;
	height: auto;
}

.content-split {
	width: 70%;
	display: flex;
	justify-content: space-between;
	margin: auto;
	align-items: center;
	flex-wrap: wrap;
}

.content-split>img {
	width: 45%;
}

.content-split>div {
	width: 45%;
}

.img-haute > img {
	width: 35%;
}

.img-haute > div {
	width: 55%;
}

#exprimer .a-bouton {
	float: right;
}

/*
.concept-split2 {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	text-align: left;
	margin: auto;
	align-items: center;
	flex-wrap: wrap;
}

.concept-split2>div {
	margin-left: 15%;
}

.concept-split2 img {
	width: 400px;
	margin-left: 15%;
}
*/

.content-split .text-content {
	font-size: 16px;
}

.content-split .text-right {
	text-align: right;
}

.content-split .a-bouton {
	position: relative;
	bottom: 0;
}

.content-split .title-right, .content-split .title-left {
	margin-left: 0;
	margin-right: 0;
}

/*
.concept-split2 .titre-left {
	margin: 0;
	margin-bottom: 50px;
}

.concept-split2 .a-bouton {
	position: relative;
	bottom: 0;
}
*/
#concept-billetterie {
	display: flex;
	justify-content: flex-start;
	/*margin-right: 20%;*/
	align-items: flex-end;
	padding-left: 7%;
	flex-wrap: wrap;
}

#concept-billetterie .gestion-rose {
	margin: 0;
}

#concept-billetterie .gestion-rose {
	text-align: right;
	width: 560px;
}

#concept-billetterie svg {
	transform: rotateZ(90deg);
	height: 1000px;
	width: 530px;
	left: 21%;
	top: -75%;
	overflow: hidden;
}

#concept-billetterie .a-bouton {
	width: 35%;
	position: relative;
	float: right;
}

#concept-billetterie img {
	height: 85%;
	/*margin-right: -15%;*/
}

#mission {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 70%;
	margin: auto;
	flex-wrap: wrap;
	min-width: 290px;
}

#mission img {
	width: 45%;
	min-width: 290px;
}

#mission>div {
	width: 45%;
	text-align: right;
	min-width: 290px;
}

#mission h4 {
	text-align: right;
}

p {
	color: #2b2b2b;
	font-size: 16px;
}

#titre-date {
	position: relative;
}

#titre-date svg {
	position: absolute;
	width: 75px;
	height: 250px;
	transform: rotateZ(90deg);
	fill: #F9EC60;
	top: -275%;
	left: 47%;
	z-index: -1;
}

.dates {
	display: flex;
	justify-content: center;
}

.dates p  {
	font-size: 20px;
	color: #312783;
	font-weight: bold;
	width: 260px;
	margin: 0;
}

.gris-vertical {
	width: 7px;
	height: 170px;
	background-color: #666666;
	margin:0 15px 0 30px;
}

.jaune-horizontal {
	width: 100%;
	height: 7px;
	background-color: #F9EC60;
}

#frise {
	width: 1040px;
	margin: 70px auto;
}

#frise .contenu {
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

#frise .aligne-haut {
	align-items: flex-start;
}

#frise .contenu p {
	width: 208px;
	font-size: 16px;
}

#chiffres {
	display: flex;
	justify-content: space-evenly;
	margin-top: 30px;
	flex-wrap: wrap;
	margin-bottom: 100px;
}

#chiffres p, #chiffres h3 {
	color: #312783;
	margin: 0;
	width: 100%;
}

#chiffres > div {
	width: 200px;
	text-align: center;
	margin: 30px 0;
}

.formation {
	width: 75%;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 50px;
	flex-wrap: wrap;
}

.formation p {
	color: black;
	width: 60%;
	min-width: 290px;
}

.gauche {
	text-align: left;
	margin-left: 0;
}

.formation img {
	width: 35%;
	min-width: 250px;
}

.formation > div {
	width: 60%;
	min-width: 290px;
}

#outils-gestion {
	padding: 30px 12.5%;
	background-color: rgb(232,230,230);
	margin-top: 50px;
}

#outils-gestion h4 {
	color: #312783;
	text-align: left;
}

#outils-gestion li {
	width: 65%;
	min-width: 275px;
	font-size: 16px;
	margin: 5px 0;
}

.formation li {
	font-size: 16px;
	margin: 5px 0;
}

#licence {
	display: flex;
	justify-content: center;
	width: 80%;
	margin: 50px auto;
	flex-wrap: wrap;
	background-color: #F5F5F5;
	width: 100%;
}

#licence > div {
	width: 260px;
	max-width: 90%;
	margin: 27px;
	text-align: center;
	background-color: white;
	border-radius: 30px;
	padding: 20px;
	-webkit-box-shadow: 2px 2px 2px 4px rgba(0,0,0,0.2); 
	box-shadow: 2px 2px 2px 4px rgba(0,0,0,0.2);
}

#licence > div > img {
	width: 60%;
}

#licence > div > p {
	font-size: 16px;
}

/*FLASH MESSAGE*/
.error-container,.success-container{
	margin:0;display: block;border-radius: 2px;color:white;padding: 55px 20px;text-align:center;
	width: calc(100% - 600px);font-size: 23px;position: absolute;z-index: 100;margin-top: -30px;
	-webkit-box-shadow: 0px 4px 3px 0px rgba(0,0,0,0.23); 
    box-shadow: 0px 4px 3px 0px rgba(0,0,0,0.23);
    }
    .success-container{background: #3f968a;width: 100%}
    .error-container{background: #a61e4d;width: 100%}
    .error-container ul{padding: 0;list-style: none;margin:0;}
    .error-container i,.success-container i{margin-right: 15px}

select{
	height: 45px;
    background: #fff;
    border: 1px solid #eee;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    width: 100%;
    color: #6a7a81;
    font-size: 13px;
    padding: 10px 9px;
    font-family: Quicksand;
}

#video {
	width: 45%;
	min-width: 300px;
	margin: 10px auto;
}

#video iframe {
	aspect-ratio: 16 / 9;
  	width: 100%;
}

#licence > div > .mini-titre {
	font-weight: bold;
	color: #E94490;
	text-align: center;
	font-size: 20px;
}

.erreur {
	color: red;
	text-align: center;
}

.reussite {
	color: #312783;
	text-align: center;
}

.fleche-menu {
	display: none;
}

#frise-mobile {
	display: none;
}

.avantage {
	width: 80%;
	min-width: 300px;
	margin: 50px auto 100px auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

.avantage > p {
	width: 50%;
	min-width: 300px;
	font-size: 16px;
	color: white;
	background-color: #E94490;
	border-radius: 64% 36% 51% 49% / 53% 51% 49% 47%;
	padding: 85px;
	text-align: center;
}

.avantage > div {
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	align-items: center;
	width: 40%;
	min-width: 300px;
}

#concept-avantage > div {
	width: 30%;
}

#concept-avantage > p {
	width: 60%;
	padding-top: 100px;
}

#concept-avantage > p > a {
	position: relative;
	width: 250px;
	margin: 30px auto 0 auto;
}

.avantage h3 {
	margin: 0 auto 30px auto;
}

.avantage > div > img {
	width: 29%;
	margin: 7.5px auto;
	/*
	-webkit-filter: grayscale(100%);*/ /* Safari 6.0 - 9.0 */
  	/*filter: grayscale(100%);*/
}


#concept-billetterie .gestion-rose p {
	font-size: 16px;
	margin-top: 40px;
}

.n-client {
	font-weight: bold;
	color: #312783;
}

#trait-menu {
	width: 4px;
	height: 200px;
	background-color: #666666;
	position: fixed;
	right: 20px;
	top: 34%;
	transform: translateY(-50%);
}

.rond {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 3px solid #F9EC60;
	background-color: white;
	margin-left: 10px;
}

#sous-menu {
	height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	position: fixed;
	right: 12px;
	top: 34%;
	transform: translateY(-50%);
	z-index: 10;
}

#sous-menu > div {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	cursor: pointer;
}

#sous-menu p {
	background-color: white;
	color: #312783;
	font-weight: bold;
}

.sous-menu-avantage,.trait-menu-avantage {
	height: 250px!important;
	top: 38%!important;
}

.reveal{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active{
  transform: translateY(0);
  opacity: 1;
}

#mentionslegales {
	width: 60%;
	min-width: 300px;
	margin: auto;
}

/* GESTION ASC */

#gestion-asc {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: top;
	flex-wrap: wrap;
}

#gestion-asc > div {
	width: 380px;
	max-width: 90%;
	margin: 0 10px;
}

#gestion-asc > div > p {
	padding: 15px 30px;
	background-color: #F5F5F5;
	text-align: center;
}

#cagnottage {
	width: 100%;
	background-color: #F5F5F5;
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 100px;
}

#cagnottage > div {
	width: 450px;
	max-width: 90%;
}

#cagnottage p {
	text-align: center;
}

#cagnottage > img {
	width: 300px;
	max-width: 90%;
}

/* SLIDER HOME */

#home-slider {
	width: 100%;
	overflow: hidden;
	position: relative;
	height: 400px;
	display: flex;
	align-items: center;
	transition-duration: 1s;
	user-select: none; /* Empêche la sélection de texte et d'image */
	-webkit-user-select: none; /* Pour les navigateurs basés sur WebKit (Safari, Chrome) */
	-moz-user-select: none; /* Pour Firefox */
	-ms-user-select: none; /* Pour Internet Explorer/Edge */
}

.slider-rose {
	background-color: #E94490;
}

.slider-bleu {
	background-color: #312783;
}

.slider-jaune {
	background-color: #F9EC60;
}

#home-slider > div {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

#home-slider .a-bouton {
	position: relative;
	bottom: 0;
	margin-top: 75px;
	width: 150px;
	background-color: white;
	border: 2.5px solid white;
	transition-duration: 1s;
}

.slider-rose .a-bouton {
	color: #E94490;
}

.slider-bleu .a-bouton {
	color: #312783;
}

.slider-jaune .a-bouton {
	color: #595959;
}

#home-slider .a-bouton:hover {
	background-color: rgba(0, 0, 0, 0);
}

.slider-rose .a-bouton:hover,.slider-bleu .a-bouton:hover {
	color: white;
}

.slider-jaune .a-bouton:hover  {
	color: #595959;
}

#home-slider h3, #home-slider h4 {
	text-align: left;
	margin: 0;
	transition-duration: 1.5s;
}

.slider-rose h3, .slider-rose h4,.slider-bleu h3, .slider-bleu h4 {
	color: white;
}

.slider-jaune h3, .slider-jaune h4 {
	color: #595959;
}

#home-slider h4 {
	font-weight: normal;
}

#home-slider > div > div {
	/*width: 400px;*/
	width: 40%;
}

#home-slider #card-slide{border:1px solid;border-radius: 10px;transition-duration: 0s;
}

#home-slider > div > img {
	width: 400px;
	max-height: 300px;
	object-fit: contain;
	max-width: 90%;
	transition-duration: 1.5s;
	user-select: none; /* Empêche la sélection de texte et d'image */
	-webkit-user-select: none; /* Pour les navigateurs basés sur WebKit (Safari, Chrome) */
	-moz-user-select: none; /* Pour Firefox */
	-ms-user-select: none; /* Pour Internet Explorer/Edge */
	pointer-events: none;
}

.fleche-slider {
	width: 75px;
	text-align: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	cursor: pointer;
	font-size: 3.5em;
	opacity: 0.85;
	transition-duration: 1s;
}

.slider-rose .fleche-slider,.slider-bleu .fleche-slider {
	color: white;
}

.slider-jaune .fleche-slider {
	color: #595959;
}

.fleche-slider:hover {
	opacity: 0.5;
	transition-duration: 0.5s;
}

#fleche-slider-droite {
	right: 2px;
}

.billetterie-index .entete-billetterie h3{width: 100%;}

#fleche-slider-gauche {
	left: 2px;
}

.carousel {
	width: 100%;
	overflow: hidden;
	display: flex;
	justify-content: center;
  }
  
  .image-track {
	display: flex;
	animation: scroll 10s linear infinite;
	width: 100%;
  }
  
  .image-track img {
	width: 12%; /* Ajuste cette valeur selon tes besoins */
	margin: 0 3%;
	object-fit: contain;
  }
  
  @keyframes scroll {
	0% {
	    transform: translateX(0); /* Commence avec les images à gauche */
	}
	100% {
	    transform: translateX(-180%); /* Déplace sur la moitié car nous avons dupliqué les images */
	}
  }

@media only screen and (max-width: 1050px) {
	#frise-mobile {
		display: block;
	}

	#frise-mobile h3 {
		margin: 50px auto 25px auto;
		color: #312783;
	}

	#frise-mobile p {
		text-align: center;
		width: 85%;
		margin: auto;
	}

	#frise {
		display: none;
	}
}

@media only screen and (max-width: 1000px) {
	.billetterie-index .contenu-billetterie {flex-wrap: wrap;justify-content: center;}
	.billetterie-index .contenu-billetterie .offre #icone{margin: 10px;}
	.billetterie-index .contenu-billetterie {padding: 5px;}
	.billetterie-index .contenu-billetterie .border-right {border-right: none;}
}

@media only screen and (max-width: 905px) {
	.modules {
		justify-content: center;
	}
}

@media only screen and (max-width: 800px) {

	#gestion img {
		width: 100%;
	}

	#gestion>div {
		width: 100%;
	}

	#home-slider > div > #card-slide {height: auto;}

	#gestion p {
		width: 100%;
		border-radius: 15px;
		padding: 10px;
	}

	#home-slider {
		height: 500px;
	}

	#home-slider > div > div {
		width: 90%;
	}

	#home-slider > div > img {
		margin-top: 30px;
		height: 200px;
	}

	#home-slider .a-bouton {
		margin-top: 15px;
	}

	.fleche-slider {
		top: 95%;
	}

	.content-split {
		width: 85%;
	}

	.content-split>img {
		width: 100%;
	}

	.content-split>div {
		width: 100%;
	}

	.avantage {
		width: 85%;
	}

	.avantage > p {
		width: 100%;
		border-radius: 15px;
		padding: 10px;
	}

	.avantage > div {
		width: 100%;
	}

	#concept-avantage > div {
		width: 100%;
	}

	#concept-avantage > p {
		width: 100%;
		padding: 10px;
	}

	#trait-menu, #sous-menu {
		display: none;
	}

	.banniere h3 {
		margin: 15px auto;
	}

	.gestion-rose {
		margin-left: 5%;
	}

	#temoignage {
		position: relative;
		display: block;
	}

	#temoignage p:not(.fleche) {
		height: auto;
		margin: auto;
		padding: 70px;
	}

	.fleche {
		width: 75px;
		text-align: center;
		position: absolute;
		bottom: -75px;
		margin: 0;
		cursor: pointer;
	}

	.fleche:hover {
		color: #F9EC60;
	}

	#fleche-droite {
		right: 50px;
	}

	#fleche-gauche {
		left: 50px;
	}

	#home-banniere img {
		display: none;
	}

	#concept-billetterie img {
		height: auto;
		width: 100%;
	}

	svg {
		display: none;
	}

	.gestion-rose {

		max-width: 100%;
		background-color: #E94490;
		border-radius: 20px;
		margin: 0;
		padding: 5%;

	}

	 #concept-billetterie {
	 	width: 100%;
	 	padding: 0;
	 }

	#concept-billetterie svg {
		transform: rotateZ(0deg);
		left: -100%;
		top: 0;
		width: 300%;
		height: 100%;
	}

	#concept-billetterie .a-bouton,#gestion-p2 .a-bouton {
		width: 75%;
	}

	.concept-split .text-content,.concept-split2 .text-content, .concept-split2 img, .concept-split img {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}

	.concept-split {
		justify-content: center;
	}

	.formation,#mission {
		justify-content: center;
	}

	#outils-gestion {
		padding: 30px 10px;
	}

	#chiffres > div {
		width: 290px;
	}

	footer > div {
		width: 100%;
	}
	nav {
		flex-wrap: wrap;
		width: 100%;
		justify-content: space-evenly;
		height: auto;
	}

	#nav-haut{justify-content: center;}
	#nav-haut a{margin: 10px;}
	#nav-bas ul{    justify-content: center;}
	main{margin-top: 120px;}
	#nav-bas a{margin: 10px 0px;}

	nav > a {
		width: 250px;
		max-width: 75%;
		margin: 17px 0 17px 0;
	}

	nav > ul, nav > ul > li > ul {
		display: none;
		flex-wrap: wrap;
		width: 100%;
		margin: 0;
		padding: 0;
		height: auto;
		position: relative;
		left: 0;
		transform: translateX(0);
	}

	nav > ul > li > ul > li {
		width: 100%;
		background-color: rgba(49, 39, 131, 0.05);
	}

	nav > ul > li > ul > li > a {
		display: block;
		width: 100%;
		text-align: center;
	}

	nav > ul > li {
		width: 100%;
		margin: 0;
		height: auto;
		border-top: 1.5px solid rgb(49, 39, 131);
	}

	nav > ul > li > a {
		height: 50px;
		line-height: 50px;
		text-align: center;
	}

	#menu-icon {
		display: block;
		width: 7%;
		cursor: pointer;
		margin: 10px 0px;
	}

	.fleche-menu {
		display: inline-block;
		transform: rotateZ(90deg);
		margin-left: 10px;
	}
	.image-track img {
		width: 17%;
	}
	@keyframes scroll {
		0% {
		    transform: translateX(0); /* Commence avec les images à gauche */
		}
		100% {
		    transform: translateX(-230%); /* Déplace sur la moitié car nous avons dupliqué les images */
		}
	  }
}
@media screen and (max-width:668px) {
	.row {
		flex-direction: column-reverse;
		align-items: center;
	}
	#tableau > div {
		width: 80%;
	}
	.contact-vitrine form {width: 80%;}
	.contact-vitrine .img-contact {width: 80%;align-items: center;margin-bottom: 10px;flex-direction: unset;}
	.contact-vitrine .img-contact img {width: 150px;}

}

@media screen and (max-width:625px) {
	#nav-bas{top: 120px;}
	main{margin-top: 160px;}
}
@media screen and (max-width:560px) {
	.billetterie-index .entete {
		flex-direction: column;
	}
	.billetterie-index .entete div {
		border: 0px;
		width: 100%;
	}
	.image-track img {
		width: 24%;
	}
	@keyframes scroll {
		0% {
		    transform: translateX(0); /* Commence avec les images à gauche */
		}
		100% {
		    transform: translateX(-300%); /* Déplace sur la moitié car nous avons dupliqué les images */
		}
	  }

}
@media screen and (max-width:462px) {
	main {margin-top: 150px;}
	#home-slider h3 {
		font-size: 25px;
		width: 100%;
	}
	#home-slider h4 {
		font-size: 17px;
	}
	.billetterie-index .contenu-billetterie .offre #icone {
		margin: 5px;
	  }
	  #nav-haut a {margin: 5px;}
	  nav > a {width: 200px;}

}