@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,400&family=Bebas+Neue&family=Playfair+Display:ital@1&display=swap');

body {
  margin: 0;
  padding: 0;
  font-size: 12px;
}

/************************************************
*************************************************
                    FONTS
*************************************************
************************************************/
#brand, .wspan:first-child {
  font-family: 'Bebas Neue', cursive;
}

.wspan:nth-child(2) {
  font-family: 'Playfair Display', serif;
}

.nav_text, #footer, .wspan:nth-child(3), .wspan:nth-child(4), .wspan:nth-child(5), .accueil, .burger span, .ml, .redirection_map span, .contact, .reviews {
  font-family: 'Roboto', sans-serif;
}

/************************************************
*************************************************
          BRAND + NAVIGATION BAR + MAIN
*************************************************
************************************************/
.brown-container {
  z-index: -1;
  position: absolute;
  background-color: #601818;
}

nav {
  z-index: 1;
}

.nav_link:link, .nav_link:hover, .nav_link:visited {
  text-decoration: none;
}

.nav_text {
  text-transform: uppercase;
}

#brand {
  letter-spacing: 5px;
  color: #EF8E3A;
}

/************************************************
*************************************************
            HOME : BG + INTRO WORDS
*************************************************
************************************************/
.intro {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  text-align: center;
}

.wspan:nth-child(2) {
  color: #FFA723;
}

.wspan:nth-child(3) {
  font-weight: 700;
}

.wspan:nth-child(4) {
  font-style: italic;
}

.wspan:nth-child(5) {
  background-color: #AD1803;
  color: #EF8E3A;
  border-radius: 20px;
}

#btnScrollDown {
  margin-top: 8px;
  width: 80px;
  height: 50px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  outline: none;
}

.intro i {
  color: #601818;
}

/************************************************
*************************************************
      ABOUT MIAM MIAM + HORAIRES + REVIEWS
*************************************************
************************************************/
.accueil h2 {
  font-weight: 700;
  text-align: center;
}

.accueil ul {
  list-style: none;
  padding: 0;
}

.accueil li {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.accueil p, .about_us ul {
  text-align: justify;
  font-weight: 300;
  line-height: 1.6;
}

.about_us li i {
  color: #5FAA7A;
  margin-right: 8px;
}

.redirection_map {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  margin: 2rem 0;
}

.redirection_map a {
  display: flex;
  align-items: center;
}

.redirection_map a:link, .redirection_map a:hover, .redirection_map a:visited {
  text-decoration: none;
  color: #EF8E3A;
  background-color: #601818;
  padding: 8px;
}

.redirection_map span {
  text-transform: uppercase;
  font-weight: 700;
}

.about_us footer div:first-child, .galerie {
  display: flex;
  justify-content: center;
}

.horaires ul {
  font-size: 12px;
}

.tab_horaires {
  border-collapse: collapse;
  width: 100%;
}

.tab_horaires tr td:first-child {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tab_horaires tr, .tab_horaires td {
  border: solid 1px #FFF;
}

.tab_horaires tr:first-child, .tab_horaires tr:first-child td:first-child {
  border: none;
}

.tab_horaires tr td:first-child, .tab_horaires tr td:nth-child(2), .tab_horaires tr td:nth-child(3), .tab_horaires tr td:nth-child(4), .tab_horaires tr td:nth-child(5), .tab_horaires tr td:nth-child(6), .tab_horaires tr td:nth-child(7), .tab_horaires tr td:last-child {
  text-align: center;
}

.h_closed, .div_closed {
  background-color: #F26352;
}

.h_open, .div_open {
  background-color: #5FAA7A;
}

.h_show, .div_show {
  background-color: #F2B441;
}

.google > div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.reviews > div a:link, .reviews > div a:hover, .google > div a:visited {
  background-color: #601818;
  color: #EF8E3A;
  text-decoration: none;
  margin: 5px;
  padding: 8px;
  border-radius: 20px;
  text-transform: uppercase;
  font-weight: 700;
}

/************************************************
*************************************************
                HOME : FOOTER
*************************************************
************************************************/
#footer section {
  flex-flow: column wrap;
}

#footer p {
  text-align: center;
}

.disclaimer {
  flex-flow: row nowrap;
  justify-content: space-around;
}

#footer section, .disclaimer a:link, .disclaimer a:active, .disclaimer a:visited {
  color: #C06C24;
}

#footer section, .disclaimer {
  display: flex;
  align-items: center;
}

/************************************************
*************************************************
                      CONTACT
*************************************************
************************************************/
.contact {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  align-items: center;
  margin: 4rem 0;
  font-size: 1rem;
}

.contact header {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  margin-bottom: 3rem;
}

.contact h2 {
  text-transform: uppercase;
}

/************************************************
*************************************************
                 MENTIONS LEGALES
*************************************************
************************************************/
.ml h2 {
  text-align: center;
}

.ml h2, .ml h4 {
  text-transform: uppercase;
}

/************************************************
*************************************************
                 MOBILE VERSION
*************************************************
************************************************/
@media screen and (max-width: 500px) {

  /* d_html.php, f_html.php */
  #header {
    text-align: center;
    padding: 1.5rem 0;
  }

  .top {
    top: 0;
    height: 8rem;
  }

  .bottom {
    height: 12rem;
  }

  .top, .bottom {
    width: 100%;
    background-color: #601818;
  }

  nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3rem;
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
    background-color: #FFF;
    display: flex;
    overflow-x: auto;
    -webkit-tap-highlight-color: transparent;
  }

  .nav_link {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    min-width: 6rem;
    overflow: hidden;
    white-space: nowrap;
  }

  .nav_link:nth-child(3) {
    display: none;
  }

  .nav_link:link, .nav_link:visited {
    color: #AD1803;
  }

  .nav_text {
    font-weight: 700;
  }

  #brand {
    font-size: 4rem;
    margin-left: 5px;
  }

  .disclaimer {
    width: 300px;
  }

  /* .accueil intro */
  .burger img, .burger span {
    display: none;
  }

  .intro {
    position: relative;
    transform: translate(2%, 15%);
    margin: 0 2.25rem;
  }

  .wspan:first-child {
    font-size: 5rem;
    letter-spacing: 5px;
    margin-bottom: -2rem;
  }

  .wspan:nth-child(2) {
    font-size: 3rem;
  }

  .wspan:nth-child(3) {
    font-size: 2rem;
    margin-bottom: 5px;
  }

  .wspan:nth-child(4) {
    margin-bottom: 1rem;
  }

  .wspan:nth-child(5) {
    width: 200px;
    font-size: 12px;
    padding: 5px 2px;
  }

  .wspan:first-child, .wspan:nth-child(3) {
    letter-spacing: 5px;
  }

  #btnScrollDown {
    display: none;
  }

  /* .accueil */
  .accueil {
    width: auto;
    height: auto;
    margin: 2rem 1.2rem;
    font-size: 1.1rem;
  }

  /* .accueil about_us */
  .about_us header div {
    display: none;
  }

  .accueil section {
    margin-top: 7rem;
    margin-bottom: 4rem;
  }

  .accueil h2 {
    letter-spacing: 5px;
  }

  .about_us i {
    font-size: 1.1rem;
  }

  .about_us ul {
    font-size: 14px;
  }

  .galerie {
    flex-flow: column nowrap;
    margin-top: 1rem;
  }

  .galerie img {
    width: 100%;
    height: 125px;
  }

  /* .accueil horaires */
  .tab_horaires {
    margin-bottom: 2rem;
    width: 100%;
    font-size: 11px;
  }

  .tab_horaires i {
    font-size: 1rem;
  }

  .h_lib li {
    margin-bottom: 8px;
  }

  .h_lib div {
    width: 30px;
    height: 15px;
    display: flex;
    flex-flow: row nowrap;
    margin-right: 5px;
  }

  /* reviews */
  .google > div {
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
  }

  .google > div a:link, .google > div a:hover, .google > div a:visited {
    margin: 5px;
    padding: 8px;
    font-size: 12px;
  }

  /* mentionslegales.php */
  .ml {
    margin: 4rem 1rem;
  }

  .ml h2 {
    font-size: 2.5rem;
  }

  .ml div {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }

  .ml div div {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 300px;
  }

  .ml h4 {
    font-size: 1rem;
    margin-bottom: -8px;
  }

  .ml div div h4 {
    margin-bottom: 8px;
  }

  .ml p {
    margin-bottom: 2rem;
    text-align: justify;
    line-height: 1.6;
  }

}

/************************************************
*************************************************
                TABLETTE VERSION
*************************************************
************************************************/
@media screen
  and (min-width: 501px)
  and (max-width: 1000px) {

  /* d_html.php, f_html.php */
  #header {
    text-align: center;
    padding: 1.5rem 0;
  }

  .top {
    top: 0;
    height: 8rem;
  }

  .bottom {
    height: 12rem;
  }

  .top, .bottom {
    width: 100%;
    background-color: #601818;
  }

  nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3rem;
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
    background-color: #FFF;
    display: flex;
    overflow-x: auto;
    -webkit-tap-highlight-color: transparent;
  }

  .nav_link {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    min-width: 10rem;
    overflow: hidden;
    white-space: nowrap;
  }

  .nav_link:nth-child(3) {
    display: none;
  }

  .nav_link:link, .nav_link:visited {
    color: #AD1803;
  }

  .nav_text {
    font-weight: 700;
  }

  #brand {
    font-size: 4rem;
    margin-left: 2rem;
  }

  .disclaimer {
    width: 300px;
  }

  /* .accueil intro */
  .burger img, .burger span {
    display: none;
  }

  .accueil header:first-child {
    margin-top: 2rem;
  }

  .intro {
    position: relative;
    transform: translate(3%, 5%);
    margin: 0 2.25rem;
  }

  .wspan:first-child {
    font-size: 5rem;
    letter-spacing: 5px;
    margin-bottom: -2rem;
  }

  .wspan:nth-child(2) {
    font-size: 3rem;
  }

  .wspan:nth-child(3) {
    font-size: 2rem;
    margin-bottom: 5px;
  }

  .wspan:nth-child(4) {
    margin-bottom: 1rem;
  }

  .wspan:nth-child(5) {
    width: 400px;
    padding: 5px 2px;
    margin: auto;
  }

  .wspan:first-child, .wspan:nth-child(3) {
    letter-spacing: 5px;
  }

  .intro i {
    display: none;
  }

  /* .accueil */
  .accueil {
    width: auto;
    height: auto;
    margin: 0 2rem;
    font-size: 1rem;
  }

  .accueil section {
    margin-top: 6rem;
    margin-bottom: 5rem;
  }

  /* .accueil about_us */
  .about_us header div {
    display: none;
  }

  .accueil h2 {
    letter-spacing: 5px;
  }

  .about_us i {
    font-size: 1.1rem;
  }

  .galerie {
    margin-top: 1rem;
    flex-flow: row wrap;
  }

  .galerie img {
    width: 250px;
    height: 150px;
  }

  /* .accueil horaires */
  .tab_horaires {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
    width: 100%;
  }

  .tab_horaires i {
    font-size: 1rem;
  }

  .h_lib {
    width: 400px;
    margin: auto;
  }

  .h_lib div {
    width: 30px;
    height: 15px;
    margin-right: 5px;
  }

  .h_lib ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
  }

  .h_lib li {
    margin-bottom: 8px;
  }

  /* reviews */
  .google > div {
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
  }

  .google > div a:link, .google > div a:hover, .google > div a:visited {
    margin: 5px;
    padding: 8px;
    font-size: 12px;
  }

  /* mentionslegales.php */
  .ml {
    margin: 4rem 3rem;
  }

  .ml h2 {
    font-size: 2.5rem;
  }

  .ml div {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
  }

  .ml div div {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 300px;
  }

  .ml h4 {
    font-size: 1rem;
    margin-bottom: -8px;
  }

  .ml div div h4 {
    margin-bottom: 8px;
  }

  .ml p {
    margin-bottom: 2rem;
    text-align: justify;
    line-height: 1.6;
  }

}

/************************************************
*************************************************
                LAPTOP S VERSION
*************************************************
************************************************/
@media screen
  and (min-width: 1001px)
  and (max-width: 1024px) {

  /* d_html.php, f_html.php */
  #header {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin: 1rem 2.5rem;
  }

  .top {
    top: 0;
    left: 0;
    height: 9rem;
  }

  .bottom {
    height: 14rem;
  }

  .top, .bottom {
    width: 100%;
  }

  nav {
    width: 400px;
    display: flex;
    justify-content: space-around;
  }

  .nav_link {
    font-size: 1.1rem;
  }

  .nav_link:link, .nav_link:visited {
    color: #EF8E3A;
  }

  .nav_link i, .nav_link:nth-child(4) {
    display: none;
  }

  .nav_text {
    font-weight: 700;
  }

  #brand {
    font-size: 6rem;
    margin-right: auto;
  }

  #footer {
    font-size: 1.1rem;
  }

  .disclaimer {
    width: 450px;
  }

  /* .accueil header intro */
  .accueil {
    margin-top: 4rem;
  }

  .accueil header {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .burger {
    display: flex;
    flex-flow: column nowrap;
  }

  .burger img {
    width: 350px;
    height: 350px;
    transform: rotate(-5deg);
  }

  .burger span {
    font-style: italic;
    margin-top: 8px;
    font-size: 1rem;
  }

  .intro {
    position: relative;
    transform: translate(3%, 5%);
    margin: 0 2.25rem;
  }

  .wspan:first-child {
    font-size: 6.5rem;
    letter-spacing: 5px;
    margin-bottom: -2rem;
  }

  .wspan:nth-child(2) {
    font-size: 3.5rem;
  }

  .wspan:nth-child(3) {
    font-size: 2.5rem;
    margin-bottom: 5px;
  }

  .wspan:nth-child(4) {
    margin-bottom: 1rem;
    font-size: 1.2rem;
  }

  .wspan:nth-child(5) {
    width: 400px;
    font-size: 1rem;
    padding: 5px 2px;
    margin: auto;
  }

  .wspan:first-child, .wspan:nth-child(3) {
    letter-spacing: 5px;
  }

  .intro i {
    font-size: 3rem;
  }

  /* .accueil */
  .accueil section {
    width: auto;
    height: auto;
    margin: 10rem 2rem;
  }

  /* .accueil about_us */
  .about_us header {
    display: flex;
    flex-flow: column nowrap;
  }

  .about_us header img {
    width: 400px;
  }

  .accueil h2 {
    letter-spacing: 5px;
    font-size: 2rem;
  }

  .accueil p {
    margin: 0 6rem;
    font-size: 1.5rem;
  }

  .about_us i, .about_us footer {
    font-size: 1.2rem;
  }

  .galerie {
    margin-top: 1.5rem;
    flex-flow: row wrap;
  }

  .galerie img {
    width: 400px;
    height: 200px;
    margin: 1rem auto;
  }

  /* .accueil horaires */
  .tab_horaires {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
    width: 50%;
    font-size: 1.1rem;
  }

  .tab_horaires i {
    font-size: 1rem;
  }

  .tab_horaires tr td {
    width: 80px;
  }

  .h_lib {
    width: 500px;
    margin: auto;
  }

  .h_lib div {
    width: 30px;
    height: 15px;
    margin-right: 5px;
  }

  .h_lib ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
  }

  .h_lib li {
    margin-bottom: 8px;
    font-size: 1.1rem;
  }

  /* reviews */
  .google > div {
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    margin-top: -2.5rem;
  }

  .google > div a:link, .google > div a:hover, .google > div a:visited {
    margin: 1rem;
    padding: 1rem;
    font-size: 1.2rem;
  }

  /* mentionslegales.php */
  .ml {
    margin: 4rem 2rem;
  }

  .ml h2 {
    font-size: 2.5rem;
  }

  .ml div {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }

  .ml div div {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 300px;
  }

  .ml h4 {
    font-size: 1rem;
    margin-bottom: -8px;
  }

  .ml div div h4 {
    margin-bottom: 8px;
  }

  .ml p {
    margin-bottom: 2rem;
    text-align: justify;
    line-height: 1.6;
  }

}

/************************************************
*************************************************
                LAPTOP M VERSION
*************************************************
************************************************/
@media screen
  and (min-width: 1025px)
  and (max-width: 1440px) {

  /* d_html.php, f_html.php */
  #header {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin: 2rem 2.5rem;
  }

  .top {
    top: 0;
    left: 0;
    height: 10rem;
  }

  .bottom {
    height: 14rem;
  }

  .top, .bottom {
    width: 100%;
  }

  nav {
    width: 450px;
    display: flex;
    justify-content: space-around;
  }

  .nav_link {
    font-size: 1.5rem;
  }

  .nav_link:link, .nav_link:visited {
    color: #EF8E3A;
  }

  .nav_link i, .nav_link:nth-child(4) {
    display: none;
  }

  .nav_text {
    font-weight: 700;
  }

  #brand {
    font-size: 5rem;
    margin-right: auto;
  }

  #footer {
    font-size: 1.1rem;
  }

  .disclaimer {
    width: 450px;
  }


  /* .accueil header intro */
  .accueil {
    margin-top: 2rem;
  }

  .accueil header {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .burger {
    display: flex;
    flex-flow: column nowrap;
  }

  .burger img {
    width: 400px;
    height: 400px;
    transform: rotate(-5deg);
  }

  .burger span {
    font-style: italic;
    margin-top: 1rem;
    font-size: 1rem;
  }

  .intro {
    position: relative;
    transform: translate(3%, 5%);
    margin: 0 2.25rem;
  }

  .wspan:first-child {
    font-size: 9rem;
    letter-spacing: 5px;
    margin-bottom: -3rem;
  }

  .wspan:nth-child(2) {
    font-size: 4rem;
  }

  .wspan:nth-child(3) {
    font-size: 3rem;
    margin-bottom: 8px;
  }

  .wspan:nth-child(4) {
    margin-bottom: 1rem;
    font-size: 1.5rem;
  }

  .wspan:nth-child(5) {
    width: 500px;
    font-size: 1.2rem;
    padding: 8px 2px;
    margin: auto;
  }

  .wspan:first-child, .wspan:nth-child(3) {
    letter-spacing: 5px;
  }

  .intro i {
    font-size: 3rem;
  }

  /* .accueil */
  .accueil section {
    width: auto;
    height: auto;
    margin: 12rem 2rem;
  }

  /* .accueil about_us */
  .about_us header {
    display: flex;
    flex-flow: column nowrap;
  }

  .about_us header img {
    width: 400px;
  }

  .accueil h2 {
    letter-spacing: 5px;
    font-size: 2rem;
  }

  .accueil p {
    margin: 0 6rem;
    font-size: 1.5rem;
  }

  .about_us i, .about_us footer {
    font-size: 1.2rem;
  }

  .galerie {
    margin-top: 1.5rem;
    flex-flow: row wrap;
    justify-content: center;
  }

  .galerie img {
    width: 400px;
    height: 200px;
    margin: 1rem auto;
  }

  /* .accueil horaires */
  .tab_horaires {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
    width: 50%;
    font-size: 1.1rem;
  }

  .tab_horaires i {
    font-size: 1rem;
  }

  .tab_horaires tr td {
    width: 80px;
  }

  .h_lib {
    width: 500px;
    margin: auto;
  }

  .h_lib div {
    width: 30px;
    height: 15px;
    margin-right: 5px;
  }

  .h_lib ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
  }

  .h_lib li {
    margin-bottom: 8px;
    font-size: 1.1rem;
  }

  /* reviews */
  .google > div {
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    margin-top: -2.5rem;
  }

  .google > div a:link, .google > div a:hover, .google > div a:visited {
    margin: 1rem;
    padding: 1rem;
    font-size: 1.4rem;
  }

  /* mentionslegales.php */
  .ml {
    margin: 4rem 1rem;
  }

  .ml h2 {
    font-size: 2.5rem;
  }

  .ml div {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }

  .ml div div {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 300px;
  }

  .ml h4 {
    font-size: 1rem;
    margin-bottom: -8px;
  }

  .ml div div h4 {
    margin-bottom: 8px;
  }

  .ml p {
    margin-bottom: 2rem;
    text-align: justify;
    line-height: 1.6;
  }

}

/************************************************
*************************************************
                LAPTOP L VERSION
*************************************************
************************************************/
@media screen
  and (min-width: 1441px)
  and (max-width: 1980px) {

  /* d_html.php, f_html.php */
  #header {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin: 2rem 2.5rem;
  }

  .top {
    top: 0;
    left: 0;
    height: 10rem;
  }

  .bottom {
    height: 20rem;
  }

  .top, .bottom {
    width: 100%;
  }

  nav {
    width: 600px;
    display: flex;
    justify-content: space-around;
  }

  .nav_link {
    font-size: 1.5rem;
  }

  .nav_link:link, .nav_link:visited {
    color: #EF8E3A;
  }

  .nav_link i, .nav_link:nth-child(4) {
    display: none;
  }

  .nav_text {
    font-weight: 700;
  }

  #brand {
    font-size: 5rem;
    margin-right: auto;
  }

  #footer {
    font-size: 1.5rem;
  }

  .disclaimer {
    width: 700px;
  }

  /* .accueil header intro */
  .accueil {
    margin-top: 4rem;
  }

  .accueil header {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .burger {
    display: flex;
    flex-flow: column nowrap;
  }

  .burger img {
    width: 500px;
    height: 500px;
    transform: rotate(-5deg);
  }

  .burger span {
    font-style: italic;
    margin-top: 1rem;
    font-size: 1.2rem;
  }

  .intro {
    position: relative;
    transform: translate(3%, 5%);
    margin: 0 2.25rem;
  }

  .wspan:first-child {
    font-size: 10rem;
    letter-spacing: 5px;
    margin-bottom: -3.5rem;
  }

  .wspan:nth-child(2) {
    font-size: 4.5rem;
  }

  .wspan:nth-child(3) {
    font-size: 3.5rem;
    margin-bottom: 8px;
  }

  .wspan:nth-child(4) {
    margin-bottom: 1rem;
    font-size: 1.5rem;
  }

  .wspan:nth-child(5) {
    width: 500px;
    font-size: 1.2rem;
    padding: 8px 2px;
    margin: auto;
  }

  .wspan:first-child, .wspan:nth-child(3) {
    letter-spacing: 5px;
  }

  .intro i {
    font-size: 3rem;
  }

  /* .accueil */
  .accueil section {
    width: auto;
    height: auto;
    margin: 20rem 2rem;
  }

  /* .accueil about_us */
  .about_us header {
    display: flex;
    flex-flow: column nowrap;
  }

  .about_us header img {
    width: 450px;
  }

  .accueil h2 {
    letter-spacing: 5px;
    font-size: 2.5rem;
  }

  .accueil p {
    margin: 0 15rem;
    font-size: 2rem;
  }

  .about_us footer {
    margin-top: 1rem;
  }

  .about_us footer div ul {
    width: 60%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
  }

  .about_us i, .about_us footer {
    font-size: 1.5rem;
  }

  .galerie {
    margin-top: 2rem;
    margin-left: 15rem;
    margin-right: 15rem;
    flex-flow: row wrap;
    justify-content: center;
  }

  .galerie img {
    width: 400px;
    height: 200px;
    margin: 1rem auto;
  }

  /* .accueil horaires */
  .tab_horaires {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
    width: 50%;
    font-size: 1.5rem;
  }

  .tab_horaires tr td {
    width: 200px;
  }

  .tab_horaires i {
    font-size: 1.5rem;
  }

  .h_lib {
    width: 500px;
    margin: auto;
  }

  .h_lib div {
    width: 50px;
    height: 35px;
    margin-right: 5px;
  }

  .h_lib ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
  }

  .h_lib li {
    margin-bottom: 8px;
    font-size: 1.5rem;
  }

  /* reviews */
  .google > div {
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    margin-top: -2.5rem;
  }

  .google > div a:link, .google > div a:hover, .google > div a:visited {
    margin: 1rem;
    padding: 1rem;
    font-size: 1.5rem;
  }

  /* mentionslegales.php */
  .ml {
    margin: 4rem 1rem;
  }

  .ml h2 {
    font-size: 2.5rem;
  }

  .ml div {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }

  .ml div div {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 300px;
  }

  .ml h4 {
    font-size: 1rem;
    margin-bottom: -8px;
  }

  .ml div div h4 {
    margin-bottom: 8px;
  }

  .ml p {
    margin-bottom: 2rem;
    text-align: justify;
    line-height: 1.6;
  }

}