/* 
    Created on : 10/01/2024
    Designed by Pierre Vuckovic.
    Tous droits réservés à Meca2t. http://meca2t.fr
*/

*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  background-color: #fff;
}
body{
  background-color: #EEF0F4;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  border-right: solid 6px #B3331B;
  border-left: solid 6px #B3331B;
}
header {
  padding-top: 50px;
}
#titre, #epigraphe {
  display: flex;
  justify-content: center;
}
#titre {
  margin-bottom: 20px;
}
#epigraphe {
  margin-left: 10%;
  margin-right: 10%;
  text-align: center;
}
#navigation {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  padding-top: 50px;
  padding-bottom: 50px;
}
#navigation > button {
  margin-left: 50px;
  margin-right: 50px;
}
main {
  font-family:Arial, Helvetica, sans-serif;
  width: 700px;
  margin-left: auto;
  margin-right: auto;
  /*background-color: #507192;*/
}
#description {
  /*background-color: #B3331B;*/
  width: 100%;
  text-align: justify;
}
#photos, .group, #contact {
  margin-top: 50px;
} 
.group {
  /*background-color: chocolate;*/
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  width: 100%;
}
#adresse, #horaires {
  width: 50%;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
}
#adresse {
  /*background-color: blueviolet;*/
}
#horaires {
  /*background-color: cadetblue;*/
}
#plageHor {
  width: 100%;
}
#plageHor td.heure {
  text-align: center;
  line-height:2em;
  width: 37%;
}
#contact {
  /*background-color: #507192;*/
  width: 100%;
}
#form {
  display: block;
}
#formM {
  display: none;
}
h1 {
  font-size: 30px;
  margin-bottom: 30px;
  text-align: center;
}h1.adr {
  text-align: inherit;
}
footer {
  margin-top: 50px;
  padding-bottom: 50px;
}
.retourMeca2t{
  display: flex;
  justify-content: center;
  padding-top: 30px;
}
.btn-retour {
  width: 300px;
}
.btn-dark{
  color: #EEF0F4;
  background-color: #B3331B;
  border-color: #B3331B;
}
.btn-dark:hover {
  color:  #EEF0F4;
  background-color: #507192;
  border-color: #507192;
}
#description li {
  list-style-type: square;
  margin-left: 50px;
} 
.elements {
  display: flex;
}
.element {
  flex: 1 0 100%;
  position: relative;
}
.element > img {
  width: 100%;
}
.caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.4);
}
#emlbrouiller { 
  unicode-bidi: bidi-override; 
  direction: rtl; 
}
@media only screen and (max-width: 1000px) {
  body{
    width: 100%;
  }
} 
@media only screen and (max-width: 750px) {
  main {
    width: 90%
  }
  .group {
    display:inherit;
  }
  #adresse, #horaires {
    width: 70%;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 50px;
    margin-left: auto;
    margin-right: auto;
  }
  #adresse {
    text-align: center;
  }
  #contact {
    width:100%;
  }
}
@media only screen and (max-width: 650px) {
  #logo {
    width: 80%;
    height: auto;
  }
  #navigation > button {
    margin: 10px;
  }
  #form {
    display: none;
  }
  #formM {
    display: block;
  }
}
@media only screen and (max-width: 450px) {
  #adresse, #horaires {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
  }
}