:root {
  --bs-body-font-family: "Source Sans 3 VF", system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif;
  --bs-body-color: #495057;
  --bs-body-color: #7881CE;
  --bs-body-bg: linear-gradient(90deg, #A3A8D5, #D9D9EE);
}

@font-face {
  font-family: "Qwitcher Grypen";
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/QwitcherGrypen/QwitcherGrypen-Regular.woff2") format("woff2"),
    url("../fonts/QwitcherGrypen/QwitcherGrypen-Regular.woff") format("woff"),
    url("../fonts/QwitcherGrypen/QwitcherGrypen-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Source Sans 3 VF";
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/SourceSans3VF/SourceSans3VF-Upright.ttf.woff2") format("woff2"),
    url("../fonts/SourceSans3VF/SourceSans3VF-Upright.ttf.woff") format("woff"),
    url("../fonts/SourceSans3VF/SourceSans3VF-Upright.ttf") format("truetype");
}

@font-face {
  font-family: "Source Sans 3 VF";
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
  src: url("../fonts/SourceSans3VF/SourceSans3VF-Italic.ttf.woff2") format("woff2"),
    url("../fonts/SourceSans3VF/SourceSans3VF-Italic.ttf.woff") format("woff"),
    url("../fonts/SourceSans3VF/SourceSans3VF-Italic.ttf") format("truetype");
}

/* Éléments de base */

.h-100 {
  height: 100% !important;
}

body {
  margin: 0;
  box-sizing: border-box;
  font-family: var(--bs-body-font-family);
  font-size: 18px;
}

.container {
  background: var(--bs-body-bg);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

h1,
h2 {
  font-size: inherit;
  font-weight: initial;
  margin: initial;
}

a {
  color: #3342cc;
  text-decoration: none;
  transition: color .25s;
  font-weight: bold;
}

a:hover,
a:focus {
  color: #2935a3;
}

li>ul {
  margin-top: 0;
  list-style-type: circle;
}

/* Transitions */

.hidden {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none;
  position: absolute;
}

.hidden.with-transitions {
  transition: opacity .4s, visibility .4s .4s, min-height 0s .4s, max-height 0s .4s;
}

/* Header */

.header {
  width: 100%;
  font-size: 18px;
  text-align: center;
  position: relative;
  z-index: 1;
  min-height: 152px;
  max-height: 256px;
  aspect-ratio: 3;
  overflow: hidden;
}

.header.hidden {
  min-height: 0;
  max-height: 0;
}

.header.with-decorations:before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 3;
  min-height: 152px;
  background-image: url("../images/header-decoration-responsive.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  bottom: 0;
  z-index: -1;
}

.header.with-decorations:after {
  content: "";
  display: block;
  width: 25%;
  min-width: 115px;
  max-width: 192px;
  aspect-ratio: 1.25;
  background-image: url("../images/header-stars.svg");
  background-repeat: no-repeat;
  background-size: cover;
  margin: 15px auto 45px;
}

.high5-info {
  font-size: 0;
  display: block;
  position: absolute;
  top: 15px;
  right: 0;
  padding: 5px 15px 5px 5px;
  background-color: #EEE;
  box-shadow: 0 5px #DDD;
  border-radius: 30px 0 0 30px;
}

.high5-info::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: #7881CE;
  mask-image: url("../images/info.svg");
  -webkit-mask-image: url("../images/info.svg");
  mask-size: 20px;
  -webkit-mask-size: 20px;
  mask-position: center left;
  -webkit-mask-position: center left;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

/* Content */

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-grow: 1;
  position: relative;
  margin: 0 15px;
}

.question-wrapper,
.services-wrapper,
.mailto-wrapper {
  width: 100%;
}

.question-wrppaer.with-transitions,
.services-wrapper.with-transitions,
.mailto-wrapper.with-transitions {
  transition: opacity .4s .4s, visibility .4s;
}

/* Question */

.question-wrapper {
  margin-bottom: 120px;
}

.question-wrapper h1 {
  font-size: 24px;
}

.answers {
  display: flex;
  justify-content: space-around;
  margin-top: 40px;
}

.answer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%;
  aspect-ratio: 1;
  padding: 15px;
  border-radius: 50%;
  font-size: 0;
  background-repeat: no-repeat;
  background-position: center;
}

.answer#no {
  background-image: url("../images/no.svg");
}

.answer#yes {
  background-image: url("../images/yes.svg");
}

/* Services */

.services-wrapper {
  margin-top: 15px;
}

.services-wrapper p {
  margin: 0;
}

.big {
  font-weight: bold;
  font-size: 1.5em;
}

.services {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 20px -15px 0;
  padding: 0 22.5px;
}

.service {
  aspect-ratio: 1.3333;
  border-radius: 20px;
  margin: 7.5px 22.5px;
  width: calc(50% - 45px);
}

.service a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  color: transparent;
  font-size: 0;
  background-position: center;
  background-repeat: no-repeat;
}

.service.email a {
  background-color: #3A7CEC;
  background-image: url("../images/email.svg");
  background-size: 55%;
}

.service.google a {
  background-color: #FFFFFF;
  background-image: url("../images/google.svg");
  background-size: 70%;
}

.service.pagesjaunes a {
  background-color: #FFEC2C;
  background-image: url("../images/pagesjaunes.svg");
  background-size: 80%;
}

.service.tripadvisor a {
  background-color: #33E0A0;
  background-image: url("../images/tripadvisor.svg");
  background-size: 90%;
}

.service.facebook a {
  background-color: #1877F2;
  background-image: url("../images/facebook.svg");
  background-size: 80%;
}

.service.petitfute a {
  background-color: #FFFFFF;
  background-image: url("../images/petitfute.svg");
  background-size: 80%;
}

.service.booking a {
  background-color: #273B7D;
  background-image: url("../images/booking.svg");
  background-size: 80%;
}

.service.yelp a {
  background-color: #FF1A1A;
  background-image: url("../images/yelp.svg");
  background-size: 70%;
}

.service.applemaps a {
  background-color: #000000;
  background-image: url("../images/applemaps.svg");
  background-size: 60%;
}

html[lang="fr"] .service.applemaps a {
  background-image: url("../images/appleplans.svg");
}

/* Mailto */

.mailto-wrapper {
  display: block;
  text-align: center;
}

.mailto-wrapper a {
  display: inline-flex;
  align-items: center;
  padding: 16px 24px;
  margin: 16px 0;
  color: #FFFFFF;
  text-decoration: none;
  background-color: #3A7CEC;
  border-radius: 20px;
  transition: background-color .25s;
}

.mailto-wrapper a:before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("../images/email.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 8px;
}

.mailto-wrapper a:hover {
  background-color: #2062D4;
}

/* Formulaire de contact */

.contact-form {
  max-width: 500px;
  margin: 0 auto;
}

.form-control {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 15px;
  padding: 12px 16px;
  font-family: var(--bs-body-font-family);
  font-size: inherit;
  color: #495057;
  border: 0;
  border-radius: 8px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:active,
.form-control:focus {
  color: #495057;
  background-color: #FFFFFF;
  outline: 0;
  box-shadow: 0 0 0 2px #7881CE;
}

.submit {
  font-family: var(--bs-body-font-family);
  font-size: inherit;
  font-weight: normal;
  background-color: var(--bs-body-color);
  display: inline-block;
  color: #FFFFFF;
  user-select: none;
  transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  padding: 12px 24px;
  cursor: pointer;
  border: 0;
  border-radius: 8px;
}

.submit:active,
.submit:focus,
.submit:hover {
  background-color: #535ec1;
}

.submit:active,
.submit:focus {
  outline: 0;
  box-shadow: 0 0 0 2px #FFFFFF;
}

.contact-form label {
  display: none;
}

.contact-form .message {
  height: auto;
  resize: none;
}

/* Partage */

.share-btn {
  background-image: url("../images/share.svg");
  width: 50px;
  height: 50px;
  display: inline-block;
  font-size: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Non trouvé */

.not-found {
  font-style: italic;
  display: flex;
  flex-direction: column;
  align-items: center;
  /*margin-bottom: 2em;*/
}

/*.not-found:after {*/
/*  content: "";*/
/*  display: block;*/
/*  width: 100px;*/
/*  height: 1px;*/
/*  background-color: black;*/
/*  margin-top: 2em;*/
/*}*/

/* Accueil */

.high5-home {
  background-image: url("../images/high5.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 0;
  width: 50%;
  min-width: 200px;
  max-width: 400px;
  aspect-ratio: 2;
  position: relative;
  margin: 16px auto 36px;
}

.high5-home a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.home-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}

.home-wrapper h2 {
  font-size: 1.5em;
}

.teaser {
  font-size: 20px;
  margin: 1em 0 2em;
}

.teaser p {
  margin: 0;
}

.places-to-rate a {
  /*display: inline-block;*/
  display: block;
  margin: 5px 5px 0;
}

.presentation {
  text-align: initial;
}

/* Statistiques */

.stats-wrapper {
  width: 100%;
}

.stats-wrapper .company-name {
  font-size: 2.5em;
  font-weight: bold;
}

.stats-section {
  margin: 30px 0;
  text-align: initial;
}

.stats-section h2 {
  font-size: 1.2em;
}

.stat-cards {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.stat-card {
  /*width: calc(33% - 90px);*/
  width: calc(50% - 60px);
  background-color: #FFFFFF88;
  border-radius: 20px;
  padding: 10px 20px;
  margin: 10px;
  /*aspect-ratio: 2;*/
}

.stat-card .nb {
  display: block;
  font-size: 2.5em;
  font-weight: bold;
}

/* Footer */

.footer {
  text-align: center;
  margin: 30px 15px 15px;
  min-height: 48px;
}

.footer {
  font-family: "Qwitcher Grypen", var(--bs-body-font-family);
  font-size: 24px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.high5-logo,
.websenso-logo {
  display: block;
  color: transparent;
  font-size: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.high5-logo {
  width: 90px;
  aspect-ratio: 1.5;
  height: auto;
  background-image: url("../images/high5.svg");
  margin-right: 10px;
}

.websenso-logo {
  width: 90px;
  aspect-ratio: 4.333;
  background-image: url("../images/websenso-typo.svg");
  margin-top: 10px;
  margin-left: 10px;
}

/* Media queries */

@media screen and (min-width: 576px) {

  .question-wrapper {
    width: 546px;
    margin-left: auto;
    margin-right: auto;
  }

  .service {
    width: calc(33.3333% - 45px);
  }
}

@media screen and (min-width: 768px) {

  .header.with-decorations:before {
    background-position-y: calc(50% + (100vw - 768px) / 6);
  }

  .content,
  .services-wrapper,
  .mailto-wrapper,
  .footer {
    width: 738px;
    margin-left: auto;
    margin-right: auto;
  }

  .footer {
    font-size: 32px;
  }

  .websenso-logo {
    width: 120px;
    margin-top: 14px;
  }

  .stat-card {
    width: calc(33% - 60px);
  }

}

@media screen and (min-width: 992px) {

  .content,
  .services-wrapper,
  .mailto-wrapper,
  .footer {
    width: 962px;
  }

  .service {
    width: calc(25% - 45px);
  }

}