/* CSS Document  #FFC51B*/ 
:root{
  --couleur-boby: #333333;
  --couleur-fond: whitesmoke;
  --couleur-bordure: #006666;
  --couleur-text-titre : #006666;
  --couleur-text-horaire : whitesmoke;
  --couleur-text-lien : whitesmoke;
  --couleur-flash: #006666;
  --couleur-fond-text: whitesmoke;
  --couleur-titre-text: whitesmoke;
  --image-ornement: url("image/Ornement.png");
  --image-code-1: url("image/panneaux.jpg");
  --image-code-2: url("image/cle.jpg");
  --image-conduite-1: url("image/mono_note.jpg");
  --image-conduite-2: url("image/femme-sourire.jpg");
  --image-conduite-3: url("image/femme-yes.jpg");
  --image-enseignant-1: url("image/mono_avant.jpg");
  --image-enseignant-2: url("image/remise-cle.jpg");
  --image-enseignant-3: url("image/femme-sourire.jpg");
  --image-enseignant-4: url("image/ceinture.jpg");
  --image-valeur-1: url("image/efficace.jpg");
  --image-valeur-2: url("image/femme-ventilation.jpg");
  --image-valeur-3: url("image/libre.jpg");
  --image-valeur-4: url("image/caddie.jpg");
}
@font-face{
  font-family: 'Pattaya';
  src: url("font/Lobster-Regular.ttf") format('truetype');
}
@font-face{
  font-family: 'Rajdhani-bold';
  src: url("font/Rajdhani-Bold.ttf") format('truetype');
}
@font-face{
  font-family: 'Rajdhani-light';
  src:url("font/Rajdhani-Light.ttf") format('truetype');
}
@font-face{
  font-family: 'Bauhaus-Normal';
  src:url("font/Bauhaus-Normal.ttf") format('truetype');
}
@font-face{
  font-family: 'Rune';
  src:url("font/Rune.ttf") format('truetype');
}
.menu_unselect{
  display: none;
}
.box{
  border-radius: 30px;
  border: solid thick var(--couleur-bordure);
  background-color: var(--couleur-fond-text);
  overflow: hidden;
}
.footer{
  color: white;
  text-align: center;
}
.bouton_perso{
  background-color: var(--couleur-fond);
  border: solid thick var(--couleur-bordure);
  padding: 20px;
  border-radius: 30px;
}
.sec_horaire{
  height: auto;
}
.sec_zoom{
  height: auto;
}
/* le block conteneur */
.marquee-rtl {
  max-width: 80%;                      /* largeur de la fenêtre */
  margin: 1em auto 2em;
  border-radius: 30px;
  border: solid thick var(--couleur-bordure);
  background-color: var(--couleur-fond-text);
  overflow: hidden;                     /* masque tout ce qui dépasse */
}
/* le bloc défilant */
.marquee-rtl > :first-child {
  display: inline-block;                /* modèle de boîte en ligne */
  padding-right: 2em;                   /* un peu d'espace pour la transition */
  padding-left: 100%;                   /* placement à droite du conteneur */
  white-space: nowrap;                  /* pas de passage à la ligne */
  animation: defilement-rtl 30s infinite linear;
}
@keyframes defilement-rtl {
  0% {
    transform: translate3d(0,0,0);      /* position initiale à droite */
  }
  100% {
    transform: translate3d(-100%,0,0);  /* position finale à gauche */
  }
}
.centrer{
  text-align: center;
}
.lien_payment{
  color: black;
}
.container_bouton{
  padding: 10px;
}
a{
  text-decoration: none;
}
h1{
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  color: black;
  font-size: 2em;
}

h2{
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  color: black;
  font-size: 1.75em;
}

h3{
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  color: black;
  font-size: 1.25em;
}
p{
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  color: black;
}
#br_mobile{
	display: none;
}
html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: var(--image-ornement);
  background-color: var(--couleur-boby);
}
header{
  width: 100%;
  display: flex;
  flex-direction: column;
}
#flash{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: var(--couleur-flash);
  position: fixed;
  top: 0px;
  left: 0px;
}
#flash a h2
{
  color: whitesmoke;
}
#menu {
  width: 100%;
  background-color: var(--couleur-boby);
  padding-top: 100px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
#menu p{
  text-align: center;
  color : var(--couleur-text-horaire);
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
}
#menu nav {
  width: 100%;
  display: flex;
  flex-direction: row;
}
#menu nav #lien {
  font-size: 1em;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
#menu nav #lien a{
  color: var(--couleur-text-lien);
  text-decoration: none;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
  font-size: 1.2em;
}
#menu nav #lien a:hover{
  color : white;
}
main{
  width: 100%;
}
#accroche{
  width: 40%;
}
#accroche p {
  color: white;
  font-size: 3em;
  text-align: center;
  font-family: 'Pattaya';
}
#zoom{
  width: 60%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

#zoom #bouton-lien{
  display: none;
}
#horaires
{
  /* height: 100%; */
  /* width: 100%; */
  /* background-color: red; */
}
#zoom #offre{
  font-family: Rajdhani-bold;
  width: 25%;
  background-color: var(--couleur-fond-text);
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
#slogan{
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  font-family: Pattaya;
  font-size: 3em;
  text-align: center;
  color: var(--couleur-text-titre);
  border-top: solid white 1px;
  border-bottom: solid white 1px;
}
section{
  width: auto;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding-bottom: 20px;
  padding-top: 20px;
  background-color: var(--couleur-boby);
}

#titre{
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#titre p{
  color: var(--couleur-titre-text);
  font-size: 3em;
  text-align: center;
  font-family: 'Pattaya';
}
#box-detail{
  width: 60%;
  height: 500px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
#box-detail #detail-code{
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#box-detail #detail-code #text{
  height: 40%;
  width: 100%;
  background-color: var(--couleur-fond-text);
  font-family: Rajdhani-bold;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
#box-detail #detail-code #img_code{
  width: 100%;
  height: 60%;
  background-position: center;
  background-size: cover;
}
#box-detail #detail-code .img_1{
  background-image: var(--image-code-1);
}
#box-detail #detail-code .img_2{
  background-image: var(--image-code-2);
}
#box-detail #detail-conduite{
  width: 30%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#box-detail #detail-conduite #text{
  height: 40%;
  width: 100%;
  font-family: Rajdhani-bold;
  background-color: var(--couleur-fond-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
#box-detail #detail-conduite #img_conduite{
  width: 100%;
  height: 60%;
  background-position: center;
  background-size: cover;
}
#box-detail #detail-conduite .img_1{
    background-image: var(--image-conduite-1);
}
#box-detail #detail-conduite .img_2{
    background-image: var(--image-conduite-2);
}
#box-detail #detail-conduite .img_3{
  background-image: var(--image-conduite-3);
}
#box-enseignant{
  width: 90%;
  height: 500px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
#box-enseignant #detail-enseignant{
  width: auto;
  height: 100%;
  display: flex;
  flex-direction: row;
}
#box-enseignant #detail-enseignant #two_img{
  width: 30%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#box-enseignant #detail-enseignant #two_img #img-enseignant{
  width: 100%;
  height: 50%;
  background-position: center;
  background-size: cover;
}
#box-enseignant #detail-enseignant .img_1{
  background-image: var(--image-enseignant-1);
}
#box-enseignant #detail-enseignant .img_2{
  background-image: var(--image-enseignant-2);
}
#box-enseignant #detail-enseignant .img_3{
  background-image: var(--image-enseignant-3);
}
#box-enseignant #detail-enseignant .img_4{
  background-image: var(--image-enseignant-4);
}
#box-enseignant #detail-enseignant #text{
  height: 100%;
  width: 70%;
  font-family: Rajdhani-bold;
  background-color: var(--couleur-fond-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
#box-enseignant #detail-enseignant #text p{
  text-align: justify;
  padding-left: 2%;
  padding-right: 2%;
}
#box-valeur{
  width: 100%;
  height: 500px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
#box-valeur #detail-valeur{
  width: 30%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#box-valeur #detail-valeur #titre{
  width: 100%;
  height: 10%;
  font-family: Rajdhani-bold;
  background-color: var(--couleur-bordure);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
#box-valeur #detail-valeur #img-valeur{
  width: 100%;
  height: 60%;
  background-position: center;
  background-size: cover;
}
#box-valeur #detail-valeur #text{
  width: 100%;
  height: 30%;
  font-family: Rajdhani-bold;
  background-color: var(--couleur-fond-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
#box-valeur #detail-valeur .img_1{
  background-image: var(--image-valeur-1);
}
#box-valeur #detail-valeur .img_2{
  background-image: var(--image-valeur-2);
}
#box-valeur #detail-valeur .img_3{
  background-image: var(--image-valeur-3);
}
#box-valeur #detail-valeur .img_4{
  background-image: var(--image-valeur-4);
}
footer{
  width: 100%;
  display: flex;
  justify-content: center;
}
/*Page contact */
.contact{
  height: auto;
}
#contact{
  width: 80%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  background-color: var(--couleur-fond-text);
}
#contact form {
  width: 45%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
#contact form #champs {
  display: flex;
  flex-direction: column;
}
#contact form #champs input{
  width: 50%;
  padding: 10px;
  margin-bottom: 5px;
}
form #champs #champ {
  display: flex;
  flex-direction: row;
}
#champ #reponse{
  display: flex;
  align-items: center;
  padding-left: 20px;
  color: red;
}
#contact-autre{
  width: 45%;
}
#contact-autre #detail-contact-autre{
  display: flex;
  flex-direction: row;
}
#contact-autre #detail-contact-autre #logo_autre_contact{
  width: 20%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
#contact-autre #detail-contact-autre #detail-contact-autre-text{
  width: 70%;
}
/*Page tarif*/
.sec_tarif{
  width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: flex-start;
}
#tarif{
	max-width: 90%;
	background-color: var(--couleur-fond-text);
	padding: 10px;
}
#tarif #formule{
	display: flex;
	flex-direction: row;
	justify-content: center;
}
#tarif{
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#promo{
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/*Page Inscription */
.bouton_inscription
{
  background: none;
  border: 4px solid var(--couleur-bordure);
  border-radius: 10px;
  color: #006666;
  display: flex;
  justify-content: center;
  font-size: 1.6em;
  font-weight: bold;
  margin: 10px auto;
  padding: 10px;
  text-transform: uppercase;
}
.bouton_inscription:hover{
  cursor: pointer;
}
.sec_inscription{
  height: auto;
  align-items: center;
}
#box_inscription{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
#box_famille{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
#box_famille h2{
  width: 100%;
  height: auto;
  text-align: center;
}
#box_offre{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
#box_formule{
  width: 15%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
  margin: 20px;
}
#box_detail_formule{
  width: 100%;
  height: 100%;
}
#box_inscription_explication{
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 50px;
}

/*Page formulaire inscription*/
#box_formulaire{
  width: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 20px;
}

/*Page stagecode*/
.height_auto{
  height: auto;
}
.cont_2_v{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.bouton{
  box-shadow: 10px 10px 0 0 rgba(0,0,0,.3);
  transition: font-size .3s ease 0s,line-height .3s ease 0s,padding .3s ease 0s;
}
#stagecode{
  width: 80%;
  padding: 20px;
}
#pack_code{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  background-color: #006666;
  padding: 10px;
  margin-top: 10px;
}

/*Media screen*/
@media screen and (max-width: 1400px){
  .sec_2{
    display: flex;
    flex-direction: column-reverse;
  }
  .footer{
    width: 100%;
    font-size: 1em;
  }
  .sec_tarif{
    flex-direction: column;
  }
  #menu{
    flex-direction: column;
  }
  section{
    height: auto;
    width: auto;
    flex-direction: column;
    }
  #zoom{
    height: auto;
    flex-direction: column;
    }
  #zoom #offre{
    width: auto;
    height: auto;
    margin-bottom: 10px;
  }
  #box-detail{
    width: 100%;
    flex-direction: column;
    align-items: center;
  }
  #box-detail #detail-code{
    width: 75%;
    height: auto;
    flex-direction: row;
    margin-bottom: 10px;
  }
  #box-detail #detail-code #img_code{
    height: auto;
  }
  #box-detail #detail-conduite{
    width: 75%;
    height: auto;
    flex-direction: row;
    margin-bottom: 10px;
  }
  #box-detail #detail-conduite #img_conduite{
    height: auto;
  }
  #box-enseignant #detail-enseignant{
    height: auto;
  }
  #box-valeur{
    flex-wrap: wrap;
  }
  #box-valeur #detail-valeur{
    height: auto;
    width: 40%;
    margin-bottom: 10px;
  }
  #box-valeur #detail-valeur #titre{
    height: auto;
  }
  #box-valeur #detail-valeur #img-valeur {
    height: 200px;
  }
  .cont_2_v{
    flex-direction: column;
  }
  #pack_code{
    width: auto;
  }
  #tarif{
  width: 90%;
  }
  #promo{
    width: 90%;
  }
  #box_offre{
    flex-direction: column;
    align-items: center;
  }
  #box_formule{
    width: 50%;
  }
}