/* Styles globaux */
body {
  font-family: "Lato", sans-serif;
}

a.inherit {
  color: inherit;
}

figure {
  margin: 0 16px;
}

h1,
h2,
h3,
h4,
h5,
h6,
header nav {
  font-family: "Nunito Sans", sans-serif;
  color: #60BEDD;
}

h3 small {
  display: block;
  font-size: 0.8em;
}

.btn {
  background-color: #60BEDD;
}

hr {
  border-top: 1px dotted #60BEDD;
}

/* Styles du HEADER */
.topbar {
  background-color: #60BEDD;
  color: #FFF;
  padding: 0.8em 0;
}

.topbar h1 {
  color: #FFF;
}

.topbar a {
  color: inherit;
}

.topbar a:not(.social) {
  padding-right: 1em;
}

.topbar a.social {
  padding: 0 2px;
}

.topbar strong {
  font-weight: normal;
}

.topbar-left {
  margin-right: 1%;
}

.logo {
  transition: All 2s ease;
}

.logo:hover {
  transform: scale(1.2);
}

.btnHamburger {
  margin: 10px;
  background-color: #60BEDD;
}

@media screen and (min-width: 1024px) {
  .btnHamburger {
    display: none;
  }
}
header nav ul {
  display: none;
}

header nav ul.open {
  display: block;
}

header nav ul.open ul {
  width: 100%;
  text-align: center;
}

@media screen and (min-width: 1024px) {
  header > nav > ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}
header nav a {
  color: #60BEDD;
  font-size: 1.2em;
  transition: color 1s ease-in-out;
  padding: 10px;
}

header nav a.active,
header nav a:hover {
  color: #92D45A;
}

header nav ul ul {
  border-top: 2px solid #60BEDD;
}

@media screen and (max-width: 480px) {
  img.banner {
    min-height: 100px;
  }
}
.drapeau {
  display: inline-block;
  width: 20px;
  height: 12px;
  margin-right: 5px;
}

.drapeau-fr {
  background: linear-gradient(to right, blue 0% 33.33%, white 33.33% 66.66%, red 66.66% 100%);
}

.drapeau-be {
  background: linear-gradient(to right, red 0% 33.33%, yellow 33.33% 66.66%, black 66.66% 100%);
}

/* Styles du MAIN */
main article h2 {
  text-align: left;
}

main .fas {
  color: #60BEDD;
}

#informations h2 {
  color: inherit;
  font-size: 1.2rem;
  text-align: center;
}

#introduction {
  text-align: center;
}

#introduction h1 {
  text-align: inherit;
}

#introduction p {
  font-size: 1.2rem;
}

#promo {
  background-color: #92D45A;
  color: #FFF;
  padding: 1% 4%;
}

#promo .fas {
  color: #FFF;
}

#promo h2 {
  color: #FFF;
  font-size: 1.8em;
  text-align: center;
}

#promo p {
  font-size: 1.2em;
  line-height: 1.2em;
}

#techniques h2,
#techniques h3 {
  text-align: center;
}

#techniques img {
  transition: All 1s linear;
}

#techniques img:hover {
  transform: scale(0.9);
  opacity: 0.9;
}

#techniques a.readmore {
  background-color: #60BEDD;
  color: #FFFFFF;
  padding: 8px 15px;
  border-radius: 5px;
  transition: All 1s ease;
}

#techniques a.readmore:hover {
  text-decoration: none;
  background-color: #FFFFFF;
  color: #60BEDD;
  border: 1px solid #60BEDD;
}

#techniques a.readmore .fas {
  color: #FFFFFF;
}

#techniques a.readmore:hover .fas {
  color: #60BEDD;
}

.partenaire {
  margin: 16px auto;
}

.cosmetique h3 {
  text-align: center;
  font-size: 1rem;
}

/** Styles des tableaux **/
.tarifs tbody tr:nth-child(odd) {
  background-color: #DFDFDF;
}

.tarifs table th:first-child {
  min-width: 50%;
}

.tarifs td,
.tarifs th {
  border: 1px solid #DDD;
}

.tarifs td span {
  color: #C00;
}

.tarifs td span::before {
  content: "(";
}

.tarifs td span::after {
  content: ")";
}

#modules h3 {
  font-size: 1.2rem;
  text-align: center;
}

#modules ul {
  padding-left: 15px;
}

@media screen and (min-width: 768px) {
  .grid {
    display: grid;
    grid-gap: 2%;
  }

  .grid-3, .grid-6 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 1024px) {
  .grid-4, .grid-6 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (min-width: 1200px) {
  .grid-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}
.horaires td,
.horaires th {
  border: 1px solid #DDD;
}

.horaires th {
  width: 33%;
  text-align: center;
}

.horaires tr:first-child {
  background-color: #DFDFDF;
}

.horaires td {
  text-align: center;
}

.horaires .closed {
  color: #CC0000;
}

/* Partie contact */
#contact {
  margin-bottom: 0;
}

#contact .fas {
  margin-right: 4px;
}

#contact button {
  width: 100%;
  background-color: #60BEDD;
}

#contact iframe {
  pointer-events: none;
}

.transports i,
.transports span,
address i,
address span {
  display: inline-block;
  vertical-align: middle;
}

.transports i,
address i {
  width: 24px;
}

.site-ami section {
  margin-top: 0;
  margin-bottom: 0;
}

.site-ami article {
  margin-bottom: 15px;
}

.site-ami h2,
.site-ami h3,
.site-ami h4 {
  text-align: left;
}

.site-ami h2 {
  font-size: 1.5rem;
}

.site-ami h3 {
  font-size: 1.2rem;
  margin: 10px 0;
}

.site-ami h4, .site-ami p {
  font-size: 1rem;
  margin: 5px 0;
}

#mentions-legales h2 {
  font-size: 1.5rem;
}

#social {
  padding-bottom: 2em;
}

/* Styles du FOOTER */
footer {
  background-color: #60BEDD;
}

#upper-footer {
  padding-top: 2em;
  padding-bottom: 2em;
  margin-bottom: 0;
}

#upper-footer h2 {
  margin-top: 0;
}

#upper-footer .fas {
  color: #FFF;
}

.social .fab {
  margin-right: 5px;
}

footer #copyright {
  color: #60BEDD;
}

footer #copyright p {
  margin: 0;
}

a.top {
  color: #60BEDD;
}

a.top:hover {
  background-color: #92D45A;
}

@media screen and (min-width: 1024px) {
  header > nav > ul > li:not(:first-child) > a {
    line-height: 90px;
  }
}

/*# sourceMappingURL=template.css.map */