/* ==========================================================================
   Variables
   ========================================================================== */

:root {
  --hauteur-entete: 75px;
  --hauteur-entete-etendue: 110px;
  --decalage-entete-mobile: 90px;
  --decalage-entete-mobile-petit: 85px;
  --police-base: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --police-titre:
    Brandon Text, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
  --couleur-blanc: #ffffff;
  --couleur-menu: rgba(180, 4, 100, 0.7);
  --couleur-contact: #b90066;
  --couleur-sous-menu: #428bca;
  --couleur-sous-menu-bordure: #3399cc;
  --couleur-bleu: #2980b9;
  --couleur-bleu-clair: #0099cb;
  --couleur-lien: #3399cc;
  --couleur-texte-fonce: #324047;
  --couleur-separateur: #eeeeee;
  --couleur-solution-texte: #00a1ff;
  --couleur-solution-titre: #004aad;
  --couleur-solution-validation: #00a8a8;
  --couleur-solution-carte: #6a6a6a;
  --couleur-solution-chiffre: #1f6ba0;
  --couleur-solution-texte-fonce: #444444;
  --couleur-noir: #000000;
}

/* ==========================================================================
   Base
   ========================================================================== */

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
body {
  margin: 0;
  padding-top: var(--hauteur-entete);
  font-family: var(--police-base);
  background-color: var(--couleur-blanc);
}
a {
  text-decoration: none;
}
button {
  font: inherit;
}

/* ==========================================================================
   Header
   ========================================================================== */

#site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  min-height: 30px;
  height: var(--hauteur-entete);
  background-color: var(--couleur-blanc);
}
#header-bar {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-height: var(--hauteur-entete);
  padding: 0;
}
#header-brand-wrap {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
#header-brand {
  display: inline-block;
  margin: 0;
  padding: 0;
}
#header-logo {
  display: block;
  width: 160px;
  margin-top: 5px;
  margin-left: 25px;
  padding: 0;
}
#header-navigation {
  position: relative;
  flex: 1 1 auto;
  display: block;
  margin-top: 15px;
  padding-right: 220px;
  text-align: center;
}
#header-nav {
  display: inline-block;
  vertical-align: top;
  transform: translateX(15px);
}
#header-menu-list {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2.5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.element-menu {
  position: relative;
}
.separateur-menu {
  width: 1px;
  height: 30px;
  border-right: 1px solid var(--couleur-blanc);
}
.lien-menu,
.bouton-sous-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  padding: 5px 14px;
  border: 0;
  background-color: var(--couleur-blanc);
  color: var(--couleur-menu);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease-out;
  -webkit-appearance: none;
  appearance: none;
}
.lien-menu:hover,
.lien-menu:focus,
.bouton-sous-menu:hover,
.bouton-sous-menu:focus,
.element-menu.est-actif > .lien-menu,
.element-menu.est-actif > .bouton-sous-menu {
  background-color: var(--couleur-blanc);
  color: var(--couleur-menu);
  font-weight: 700;
  outline: none;
}
.element-menu.est-ouvert > .bouton-sous-menu {
  background-color: var(--couleur-blanc);
  color: var(--couleur-sous-menu);
  font-weight: 700;
}
.sous-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1001;
  display: none;
  min-width: 155px;
  margin-left: 4px;
  padding: 5px 0;
  list-style: none;
  border: 1px solid var(--couleur-sous-menu-bordure);
  border-radius: 0 0 10px 10px;
  background-color: var(--couleur-blanc);
  text-align: left;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.element-menu.est-ouvert > .sous-menu {
  display: block;
}
.lien-sous-menu {
  display: block;
  padding: 3px 20px;
  color: var(--couleur-sous-menu);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  white-space: nowrap;
}
.lien-sous-menu:hover,
.lien-sous-menu:focus {
  color: var(--couleur-blanc);
  background-color: var(--couleur-sous-menu);
  outline: none;
}
#header-actions {
  position: absolute;
  top: -6px;
  right: 20px;
  z-index: 2;
  margin: 0;
}
#header-contact-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  min-width: 180px;
  height: 34px;
  margin: 0;
  padding: 6px 20px;
  border: 1px solid var(--couleur-contact);
  border-radius: 10px;
  background: none;
  color: var(--couleur-contact) !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
#header-contact-button:hover,
#header-contact-button:focus {
  background-color: var(--couleur-contact);
  color: var(--couleur-blanc) !important;
  outline: none;
  transition: 0.2s;
}
#header-menu-toggle {
  display: none;
  flex: 0 0 auto;
  margin-top: 21px;
  margin-right: 15px;
  margin-left: auto;
  padding: 9px 10px;
  border: 1px solid var(--couleur-menu);
  border-radius: 4px;
  background-color: var(--couleur-blanc);
  cursor: pointer;
}
#header-menu-toggle:hover,
#header-menu-toggle:focus {
  background-color: var(--couleur-menu);
  outline: none;
}
.ligne-icone-menu {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--couleur-menu);
}
.ligne-icone-menu + .ligne-icone-menu {
  margin-top: 4px;
}
#header-menu-toggle:hover .ligne-icone-menu,
#header-menu-toggle:focus .ligne-icone-menu {
  background-color: var(--couleur-blanc);
}

/* ==========================================================================
   Footer
   ========================================================================== */

#site-footer {
  margin-top: 88px;
  font-size: 14px;
  font-family: var(--police-base);
  bottom: 0;
  text-align: center;
  color: var(--couleur-menu);
}
#site-footer p {
  margin-bottom: 10px;
}
@media (max-width: 1400px) and (min-width: 1251px) {
  #header-navigation {
    padding-right: 205px;
  }
  #header-actions {
    right: 16px;
  }
}
@media (max-width: 1250px) and (min-width: 1051px) {
  body {
    padding-top: var(--hauteur-entete-etendue);
  }
  #site-header {
    height: var(--hauteur-entete-etendue);
  }
  #header-bar {
    flex-wrap: wrap;
    min-height: var(--hauteur-entete-etendue);
  }
  #header-brand-wrap {
    flex: 0 0 185px;
    max-width: 185px;
  }
  #header-navigation {
    flex: 1 1 calc(100% - 185px);
    width: calc(100% - 185px);
    margin-top: 15px;
    padding-right: 0;
    text-align: center;
  }
  #header-actions {
    position: static;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 8px;
    padding-right: 20px;
  }
}
@media (max-width: 1050px) {
  #header-logo,
  #header-actions {
    display: none;
  }
  #header-navigation {
    padding-right: 0;
  }
}
@media (max-width: 1020px) {
  body {
    padding-top: var(--decalage-entete-mobile);
  }
  #site-header {
    height: auto;
    min-height: var(--hauteur-entete);
  }
  #header-logo {
    display: block;
  }
  #header-bar {
    flex-wrap: wrap;
    align-items: flex-start;
    min-height: var(--hauteur-entete);
  }
  #header-menu-toggle {
    display: inline-block;
  }
  #header-navigation {
    display: none;
    flex: 0 0 100%;
    width: 100%;
    margin-top: 0;
    padding: 8px 15px 15px;
    text-align: left;
  }
  #site-header.menu-est-ouvert #header-navigation {
    display: block;
  }
  #header-nav,
  #header-menu-list,
  .element-menu,
  .separateur-menu {
    display: block;
    width: 100%;
  }
  #header-nav {
    transform: none;
  }
  .separateur-menu {
    display: none;
  }
  .lien-menu,
  .bouton-sous-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 0;
    padding: 10px 0;
    text-align: left;
  }
  .sous-menu {
    position: static;
    min-width: 100%;
    margin: 0 0 8px;
    padding: 0 0 0 12px;
    border: 0;
    border-radius: 0;
    background-color: var(--couleur-blanc);
    box-shadow: none;
  }
  .lien-sous-menu {
    padding: 6px 0;
  }
  #header-actions {
    position: static;
    display: block;
    margin-top: 12px;
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  #header-brand-wrap {
    flex: 0 0 auto;
    max-width: calc(100% - 70px);
  }
}
@media (max-width: 480px) {
  body {
    padding-top: var(--decalage-entete-mobile-petit);
  }
  #header-bar {
    min-height: 70px;
  }
  #header-logo {
    width: 140px;
    margin-left: 15px;
  }
  #header-menu-toggle {
    margin-top: 18px;
    margin-right: 12px;
  }
  #header-navigation {
    padding: 0 12px 12px;
  }
  #header-contact-button {
    width: 100%;
    min-width: 0;
  }
}

/* ==========================================================================
   Page Accueil
   ========================================================================== */

.accueil {
  margin-top: -37px;
}
.accueil-fond {
  padding: 0;
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 1) 9%,
      rgba(255, 255, 255, 0.41) 41%,
      rgba(255, 255, 255, 1) 100%
    ),
    url("/img/fond.jpg");
  background-size: cover, cover;
  background-position:
    center 0,
    center -8px;
  background-repeat: no-repeat, no-repeat;
}
.accueil a:hover {
  text-decoration: none;
}
.accueil u {
  text-decoration-thickness: 1.5px;
}
.accueil-accroche {
  display: flex;
  height: 430px;
}
.accueil-accroche-contenu {
  width: 70%;
  margin: auto;
  text-align: center;
}
.accueil-titre {
  margin: 40px 10px 40px;
  padding: 0;
  color: var(--couleur-contact);
  font-size: 40px;
  font-weight: bold;
  font-family: var(--police-titre);
  text-align: center;
  letter-spacing: 1.5px;
  line-height: 1.11;
  text-shadow: 0 0 0 transparent;
  transform: translateY(2px);
}
.accueil-bouton-rappel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 280px;
  margin: 0 auto;
  padding: 5px 0;
  border: 0.5px solid var(--couleur-bleu);
  border-radius: 20px;
  background: transparent;
  color: var(--couleur-bleu);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.42857143;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.accueil-bouton-rappel:hover,
.accueil-bouton-rappel:focus {
  background-color: var(--couleur-bleu);
  color: var(--couleur-blanc);
  outline: none;
}
.accueil-bouton-rappel-icone {
  color: transparent;
  text-shadow: 0 0 0 var(--couleur-bleu);
}
.accueil-bouton-rappel:hover .accueil-bouton-rappel-icone,
.accueil-bouton-rappel:focus .accueil-bouton-rappel-icone {
  text-shadow: 0 0 0 var(--couleur-blanc);
}
.accueil-vignettes {
  margin-top: 7px;
  margin-left: 10%;
  margin-right: 10%;
}
.accueil-grille {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
.accueil-colonne {
  width: 33.33333333%;
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: border-box;
  text-align: center;
}
.accueil-carte {
  height: 300px;
  margin: 0 4%;
  padding: 5%;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(7px);
  text-align: center;
}
.accueil-carte-carrousel {
  height: auto;
  margin: 0 4%;
  padding: 0 0 34px;
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.accueil-carte-lien {
  display: block;
}
.accueil-carte-logo {
  display: block;
  width: 70%;
  margin: 0 auto 25px;
}
.accueil-carte-titre {
  margin: 15px 7px;
  color: var(--couleur-bleu);
  font-family: var(--police-titre);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
}
.bouton-action-accueil {
  position: relative;
  display: flex;
  justify-content: center;
  width: 70%;
  margin: 35px auto 10px;
  padding: 10px 20px;
  border: 1px solid var(--couleur-bleu);
  border-radius: 10px;
  background: transparent;
  color: var(--couleur-bleu) !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.42857143;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}
.bouton-action-accueil:hover,
.bouton-action-accueil:focus {
  background-color: var(--couleur-bleu);
  color: var(--couleur-blanc) !important;
  text-decoration: none;
  outline: none;
}
.bouton-action-accueil-popup {
  width: 215px;
  margin-top: 0;
  margin-bottom: 13px;
  font-size: 15px;
}
.bouton-action-pulse-hm {
  animation: accueil-pulse-hm 6s infinite;
}
.bouton-action-pulse-sarool {
  animation: accueil-pulse-sarool 6s infinite;
}
@keyframes accueil-pulse-sarool {
  0%,
  25%,
  35%,
  100% {
    box-shadow: 0 0 0 0 rgba(41, 128, 185, 0.5);
  }
  30% {
    box-shadow: 0 0 30px 5px rgba(41, 128, 185, 0.2);
  }
}
@keyframes accueil-pulse-hm {
  0%,
  75%,
  85%,
  100% {
    box-shadow: 0 0 0 0 rgba(41, 128, 185, 0.5);
  }
  80% {
    box-shadow: 0 0 30px 5px rgba(41, 128, 185, 0.2);
  }
}
.accueil-carrousel {
  position: relative;
  width: 100%;
}
.accueil-carrousel-vue {
  position: relative;
  width: 100%;
}
.accueil-carrousel-diapositive {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.5s ease-in-out;
}
.accueil-carrousel-diapositive.est-actif {
  position: relative;
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
}
.accueil-carrousel-image {
  display: block;
  width: 100%;
  height: auto;
}
.accueil-carrousel-legende {
  display: none;
}
.accueil-carrousel-indicateurs {
  position: absolute;
  right: 0;
  bottom: -20px;
  left: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.accueil-carrousel-indicateur {
  width: 13px;
  height: 13px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--couleur-contact);
  border-radius: 50%;
  background-color: var(--couleur-blanc);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.accueil-carrousel-indicateur.est-actif {
  background-color: var(--couleur-contact);
}
.accueil-popup[hidden] {
  display: none;
}
.accueil-popup {
  position: static;
}
.accueil-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background-color: rgb(240, 240, 240);
  opacity: 0.9;
}
.accueil-popup-dialogue {
  position: fixed;
  top: 30%;
  left: 50%;
  z-index: 901;
  padding: 20px 20px 36px;
  border: 0.5px solid var(--couleur-contact);
  border-radius: 20px;
  background-color: var(--couleur-blanc);
  transform: translate(-50%, -50%);
}
.accueil-popup-fermer {
  position: fixed;
  top: 14.5%;
  left: 7.25%;
  z-index: 902;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.accueil-popup-fermer img {
  display: block;
  width: 50px;
  height: 50px;
}
.accueil-popup-contenu {
  width: 550px;
  margin: 0 auto;
  padding-top: 4px;
  padding-bottom: 10px;
  font-size: 16px;
  text-align: center;
  vertical-align: middle;
  color: var(--couleur-lien);
}
.accueil-popup-bloc {
  margin: 0;
}
.accueil-popup-bloc + .accueil-popup-bloc {
  margin-top: 26px;
}
.accueil-popup-bloc-actions {
  margin-top: 22px;
}
.accueil-popup-titre {
  margin: 0 0 6px;
  color: var(--couleur-contact);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.1;
}
.accueil-popup-choix {
  display: inline-block;
  margin: 0 4px 5px;
  color: var(--couleur-bleu);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  cursor: pointer;
}
.accueil-popup-choix input {
  margin-right: 2px;
}
.bouton-action-accueil-popup {
  width: 215px;
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 15px;
}
.accueil-popup-wiki {
  display: inline-block;
  margin-top: 0;
  color: var(--couleur-lien);
  font-size: 13px;
  font-style: italic;
  line-height: 1.2;
  text-decoration: underline;
}
.accueil-popup-wiki:hover,
.accueil-popup-wiki:focus {
  color: var(--couleur-contact);
  outline: none;
}

/* ==========================================================================
   Responsive Accueil
   ========================================================================== */

@media only screen and (max-width: 1000px) {
  .accueil-accroche {
    height: auto;
    padding: 45px 0 10px;
  }
  .accueil-accroche-contenu {
    width: 82%;
  }
  .accueil-titre {
    margin: 25px 10px 28px;
    font-size: 34px;
    line-height: 1.08;
    letter-spacing: 1.2px;
  }
  .accueil-bouton-rappel {
    width: 235px;
    padding: 4px 10px;
    font-size: 13.5px;
  }
  .accueil-vignettes {
    margin-top: 0;
    margin-left: 8%;
    margin-right: 8%;
  }
  .accueil-grille {
    margin-right: 0;
    margin-left: 0;
  }
  .accueil-colonne {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
  }
  .accueil-carte,
  .accueil-carte-carrousel {
    width: 82%;
    max-width: 650px;
    margin: 0 auto 22px;
  }
  .accueil-carte {
    height: auto;
    min-height: 220px;
    padding: 18px 18px 14px;
  }
  .accueil-carte-carrousel {
    padding: 0 0 26px;
  }
  .accueil-carte-logo {
    width: 56%;
    margin: 0 auto 16px;
  }
  .accueil-carte-titre {
    margin: 8px 6px;
    font-size: 19px;
    line-height: 1.07;
  }
  .bouton-action-accueil {
    width: 58%;
    margin: 20px auto 4px;
    padding: 8px 14px;
    font-size: 16px;
  }
  .accueil-carrousel-indicateur {
    width: 11px;
    height: 11px;
  }
  .accueil-popup-dialogue {
    top: 50%;
    width: calc(100% - 30px);
    max-width: 680px;
    padding: 24px 18px 24px;
  }
  .accueil-popup-contenu {
    width: 100%;
    padding-top: 8px;
    padding-bottom: 6px;
  }
  .accueil-popup-fermer {
    top: 128px;
    left: 24px;
  }
  .bouton-action-accueil-popup {
    width: 205px;
    max-width: calc(100% - 20px);
    padding: 8px 12px;
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .accueil {
    margin-top: -20px;
  }
  .accueil-accroche {
    height: auto;
    padding: 38px 0 12px;
  }
  .accueil-accroche-contenu {
    width: 90%;
  }
  .accueil-titre {
    margin: 18px 8px 22px;
    font-size: 28px;
    line-height: 1.08;
    letter-spacing: 1px;
  }
  .accueil-vignettes {
    margin-left: 15px;
    margin-right: 15px;
  }
  .accueil-grille {
    margin-right: 0;
    margin-left: 0;
  }
  .accueil-colonne {
    padding-right: 0;
    padding-left: 0;
  }
  .accueil-carte,
  .accueil-carte-carrousel {
    width: 100%;
    max-width: 420px;
    margin: 0 auto 18px;
  }
  .accueil-carte {
    min-height: 0;
    padding: 16px 14px 12px;
  }
  .accueil-carte-carrousel {
    padding: 0 0 22px;
  }
  .accueil-carte-logo {
    width: 52%;
    margin-bottom: 12px;
  }
  .accueil-carte-titre {
    margin: 7px 4px;
    font-size: 17px;
    line-height: 1.05;
  }
  .bouton-action-accueil {
    width: 86%;
    max-width: 260px;
    margin: 16px auto 4px;
    padding: 7px 10px;
    font-size: 15px;
  }
  .accueil-bouton-rappel {
    width: 100%;
    max-width: 250px;
    padding: 4px 10px;
    font-size: 12.5px;
  }
  .accueil-carrousel-indicateurs {
    bottom: -16px;
    gap: 7px;
  }
  .accueil-carrousel-indicateur {
    width: 10px;
    height: 10px;
  }
  .accueil-popup-dialogue {
    top: 52%;
    width: calc(100% - 20px);
    padding: 22px 14px 22px;
  }
  .accueil-popup-contenu {
    padding-top: 8px;
    padding-bottom: 4px;
  }
  .accueil-popup-bloc + .accueil-popup-bloc {
    margin-top: 14px;
  }
  .accueil-popup-choix {
    display: block;
    margin: 5px 0;
  }
  .accueil-popup-choix + .accueil-popup-choix {
    margin-top: 5px;
    margin-left: 0;
  }
  .accueil-popup-fermer {
    top: 118px;
    left: 16px;
  }
  .accueil-popup-fermer img {
    width: 34px;
    height: 34px;
  }
  .bouton-action-accueil-popup {
    width: 200px;
    max-width: calc(100% - 20px);
    min-width: 0;
    padding: 8px 10px;
    font-size: 14px;
  }
}
@media (max-width: 480px) {
  .accueil {
    margin-top: -10px;
  }
  .accueil-accroche {
    padding: 30px 0 10px;
  }
  .accueil-titre {
    margin: 14px 4px 18px;
    font-size: 24px;
    letter-spacing: 0.6px;
  }
  .accueil-bouton-rappel {
    max-width: 225px;
    font-size: 12px;
  }
  .accueil-vignettes {
    margin-left: 10px;
    margin-right: 10px;
  }
  .accueil-carte,
  .accueil-carte-carrousel {
    max-width: 360px;
    margin-bottom: 14px;
  }
  .accueil-carte {
    padding: 14px 10px 10px;
  }
  .accueil-carte-carrousel {
    padding-bottom: 20px;
  }
  .accueil-carte-logo {
    width: 58%;
  }
  .accueil-carte-titre {
    font-size: 16px;
  }
  .bouton-action-accueil {
    width: 82%;
    max-width: 230px;
    padding: 7px 9px;
    font-size: 14px;
  }
  .accueil-carrousel-indicateur {
    width: 9px;
    height: 9px;
  }
  .accueil-popup-dialogue {
    top: 53%;
    width: calc(100% - 16px);
    padding: 20px 10px 20px;
  }
  .accueil-popup-fermer {
    top: 102px;
    left: 12px;
  }
  .accueil-popup-fermer img {
    width: 30px;
    height: 30px;
  }
  .bouton-action-accueil-popup {
    width: 185px;
    max-width: calc(100% - 24px);
    font-size: 13px;
    padding: 8px 9px;
  }
}
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Composants communs
   ========================================================================== */

.page-secondaire {
  margin-top: -37px;
  overflow-x: hidden;
}
.page-secondaire a:hover {
  text-decoration: none;
}
.entete-page {
  width: 100%;
  padding-top: 32px;
  text-align: center;
}
.entete-page-titre {
  margin: 0 10px 9px;
  padding: 0;
  color: var(--couleur-bleu);
  font-family: var(--police-titre);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 1.5px;
  text-align: center;
  text-shadow: 0 0 0 transparent;
}
.entete-page-sous-titre {
  margin: 7px;
  padding: 0;
  color: var(--couleur-bleu-clair);
  font-family: var(--police-titre);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}

/* ==========================================================================
   Boutons communs
   ========================================================================== */

.bouton-action {
  position: relative;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: none;
  font-family: var(--police-base);
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.bouton-action:hover,
.bouton-action:focus {
  text-decoration: none;
  outline: none;
}
.bouton-action-bleu {
  display: flex;
  padding: 10px 20px;
  border: 1px solid var(--couleur-bleu);
  background: transparent;
  color: var(--couleur-bleu) !important;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}
.bouton-action-bleu:hover,
.bouton-action-bleu:focus {
  background-color: var(--couleur-bleu);
  color: var(--couleur-blanc) !important;
}
.bouton-action-rose {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  margin: 42px 0 30px;
  padding: 10px 20px;
  border: 1px solid var(--couleur-contact);
  border-radius: 10px;
  background: none;
  color: var(--couleur-contact) !important;
  font-size: 19px;
  line-height: 1.42857143;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  animation: bouton-action-pulse-rose 8s infinite;
  transition:
    transform 0.2s,
    background-color 0.2s,
    color 0.2s;
  appearance: none;
  -webkit-appearance: none;
}
.bouton-action-rose:hover,
.bouton-action-rose:focus {
  background-color: var(--couleur-contact);
  color: var(--couleur-blanc) !important;
  text-decoration: none;
  outline: none;
  transform: scale(1.05);
}
.bouton-action-large {
  width: 270px;
}
@keyframes bouton-action-pulse-rose {
  0%,
  45%,
  55%,
  100% {
    box-shadow: 0 0 0 0 rgba(185, 0, 102, 0.5);
  }
  50% {
    box-shadow: 0 0 30px 5px rgba(185, 0, 102, 0.2);
  }
}

/* ==========================================================================
   Carrousel commun
   ========================================================================== */

.carrousel-site {
  position: relative;
  width: 100%;
}
.carrousel-site-vue {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transition: height 0.6s ease-in-out;
}
.carrousel-site-diapositive {
  position: relative;
  left: 0;
  display: none;
  width: 100%;
  margin: 0;
  pointer-events: none;
  transition: left 0.6s ease-in-out;
}
.carrousel-site-diapositive.est-actif,
.carrousel-site-diapositive.est-suivant,
.carrousel-site-diapositive.est-precedent {
  display: block;
}
.carrousel-site-diapositive.est-actif {
  left: 0;
  pointer-events: auto;
}
.carrousel-site-diapositive.est-suivant,
.carrousel-site-diapositive.est-precedent {
  position: absolute;
  top: 0;
  width: 100%;
}
.carrousel-site-diapositive.est-suivant {
  left: 100%;
}
.carrousel-site-diapositive.est-precedent {
  left: -100%;
}
.carrousel-site-diapositive.est-suivant.est-gauche,
.carrousel-site-diapositive.est-precedent.est-droite {
  left: 0;
}
.carrousel-site-diapositive.est-actif.est-gauche {
  left: -100%;
}
.carrousel-site-diapositive.est-actif.est-droite {
  left: 100%;
}
.carrousel-site-image {
  display: block;
  max-width: 100%;
  height: auto;
}
@font-face {
  font-family: "Glyphicons Halflings";
  src: url("/css/fonts/glyphicons-halflings-regular.eot");
  src:
    url("/css/fonts/glyphicons-halflings-regular.eot?#iefix")
      format("embedded-opentype"),
    url("/css/fonts/glyphicons-halflings-regular.woff") format("woff"),
    url("/css/fonts/glyphicons-halflings-regular.ttf") format("truetype"),
    url("/css/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular")
      format("svg");
}
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: "Glyphicons Halflings";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.glyphicon-chevron-left::before {
  content: "\e079";
}
.glyphicon-chevron-right::before {
  content: "\e080";
}

/* ==========================================================================
   Page Notre équipe
   ========================================================================== */

.page-equipe {
  margin-top: -37px;
  overflow-x: hidden;
  color: var(--couleur-bleu);
  font-family: var(--police-titre);
}
.page-equipe-entete {
  padding-top: 32px;
  margin-bottom: 40px;
  text-align: center;
}
.page-equipe-titre,
.section-equipe-titre {
  margin: 0;
  padding: 0;
  color: var(--couleur-bleu);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 1.5px;
  text-shadow: 0 0 0 transparent;
}
.page-equipe-titre {
  margin: 0 10px 9px;
  font-size: 30px;
}
.page-equipe-sous-titre {
  margin: 7px;
  color: var(--couleur-bleu-clair);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
}
.section-equipe {
  display: flex;
  align-items: flex-start;
  width: 62%;
  max-width: none;
  min-height: 0;
  margin: 0 auto;
  gap: 0;
}
.section-equipe-intro {
  gap: 4.7%;
  margin-top: 45px;
}
.section-equipe-inverse {
  flex-direction: row-reverse;
}
.texte-equipe,
.media-equipe {
  flex: 0 0 50%;
  max-width: 50%;
}
.section-equipe-intro .media-equipe {
  flex-basis: 40%;
  max-width: 40%;
}
.section-equipe-intro .texte-equipe {
  flex-basis: 55%;
  max-width: 55%;
}
.texte-equipe {
  color: var(--couleur-bleu);
  font-size: 14px;
  line-height: 1.42857143;
  padding-right: 15px;
  padding-left: 15px;
}
.texte-equipe-intro {
  margin-top: 0;
  padding-top: 0;
}
.texte-equipe p {
  margin: 0 0 20px;
  margin-left: -12px;
}
.texte-equipe p:last-of-type {
  margin-bottom: 6px;
}
.texte-equipe .bouton-action-rose {
  margin-top: 25px;
  margin-left: -12px;
}
.texte-equipe a:not(.bouton-action-rose) {
  color: var(--couleur-lien);
}
.texte-equipe a:not(.bouton-action-rose):hover,
.texte-equipe a:not(.bouton-action-rose):focus {
  color: var(--couleur-contact);
}
.section-equipe-titre {
  margin: 40px 0 48px;
  font-size: 30px;
  text-align: left;
}
.media-equipe-carrousel {
  align-self: flex-start;
  margin-top: 12px;
  padding-top: 0;
  text-align: center;
}
.media-equipe-droite {
  text-align: right;
  transform: translateX(-30px);
}
.media-equipe-gauche {
  text-align: left;
  transform: translateX(26px);
}
.illustration-equipe,
.carrousel-equipe-image {
  max-width: 100%;
  border-radius: 6px;
}
.carrousel-equipe {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}
.carrousel-equipe-image {
  width: auto;
  max-height: 450px;
  margin: 0 auto;
}
.separateur-equipe {
  width: 70%;
  max-width: none;
  height: 0;
  margin: 40px auto 20px;
  border: 0;
  border-top: 1px solid var(--couleur-separateur);
}
.instagram-equipe {
  width: 70%;
  margin: 10px auto 0;
}
.carrousel-equipe .carrousel-site-controle {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 100;
  width: 15%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--couleur-contact);
  text-align: center;
  text-shadow: none;
  opacity: 0.2;
  cursor: pointer;
  transition: opacity 0.15s linear;
  appearance: none;
  -webkit-appearance: none;
}
.carrousel-equipe .carrousel-site-controle:hover,
.carrousel-equipe .carrousel-site-controle:focus {
  color: var(--couleur-contact);
  text-decoration: none;
  opacity: 0.7;
  outline: none;
}
.carrousel-equipe .carrousel-site-controle-gauche {
  left: 0;
  right: auto;
  background-image: none;
}
.carrousel-equipe .carrousel-site-controle-droite {
  right: 0;
  left: auto;
  background-image: none;
}
.carrousel-equipe .carrousel-site-controle .glyphicon-chevron-left,
.carrousel-equipe .carrousel-site-controle .glyphicon-chevron-right {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  font-size: 30px;
  line-height: 30px;
}
.carrousel-equipe .glyphicon-chevron-left {
  left: 0 !important;
}
.carrousel-equipe .glyphicon-chevron-right {
  right: 0 !important;
}
.carrousel-equipe .carrousel-site-indicateurs {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 4px;
  left: 0;
  z-index: 15;
  display: flex;
  justify-content: center;
  gap: 4px;
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 10px;
}
.carrousel-equipe .carrousel-site-indicateurs li {
  display: block;
  width: 10px;
  height: 10px;
  margin: 1px;
  padding: 0;
  border: 1px solid var(--couleur-contact);
  border-radius: 10px;
  background-color: var(--couleur-blanc);
  text-indent: -999px;
  cursor: pointer;
}
.carrousel-equipe .carrousel-site-indicateurs .est-actif {
  width: 10px;
  height: 10px;
  margin: 1px;
  background-color: var(--couleur-contact);
}

/* ==========================================================================
   Responsive Notre équipe
   ========================================================================== */

@media (max-width: 1250px) {
  .section-equipe {
    width: 74%;
  }
  .separateur-equipe {
    width: 74%;
  }
  .instagram-equipe {
    width: 65%;
    max-width: 850px;
  }
}
@media (max-width: 1100px) {
  .section-equipe {
    width: 82%;
  }
  .separateur-equipe {
    width: 82%;
  }
  .section-equipe-intro {
    gap: 4%;
  }
  .section-equipe-intro .media-equipe {
    flex-basis: 42%;
    max-width: 42%;
  }
  .section-equipe-intro .texte-equipe {
    flex-basis: 54%;
    max-width: 54%;
  }
}
@media (max-width: 1000px) {
  .page-equipe {
    margin-top: -24px;
  }
  .page-equipe-entete {
    padding-top: 28px;
    margin-bottom: 30px;
  }
  .page-equipe-titre,
  .section-equipe-titre {
    font-size: 28px;
  }
  .page-equipe-sous-titre {
    font-size: 22px;
  }
  .section-equipe,
  .section-equipe-intro,
  .section-equipe-inverse {
    flex-direction: column;
    align-items: center;
    width: calc(100% - 40px);
    gap: 24px;
  }
  .media-equipe,
  .texte-equipe,
  .section-equipe-intro .media-equipe,
  .section-equipe-intro .texte-equipe {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
  .texte-equipe {
    max-width: 720px;
    margin-right: auto;
    margin-left: auto;
    line-height: 1.65;
    text-align: left;
  }
  .texte-equipe p {
    margin-bottom: 18px;
  }
  .media-equipe,
  .media-equipe-gauche,
  .media-equipe-droite,
  .media-equipe-carrousel {
    margin-top: 0;
    text-align: center;
  }
  .carrousel-equipe {
    width: 100%;
    max-width: 520px;
    margin-right: auto;
    margin-left: auto;
  }
  .carrousel-equipe-image {
    max-width: 100%;
    max-height: 420px;
  }
  .section-equipe-titre {
    margin: 28px 0 22px;
    text-align: center;
  }
  .illustration-equipe {
    display: block;
    max-width: 520px;
    margin-right: auto;
    margin-left: auto;
  }
  .bouton-action-rose {
    display: flex;
    width: 230px;
    max-width: 100%;
    margin: 24px auto;
    font-size: 17px;
  }
  .separateur-equipe {
    width: calc(100% - 40px);
    margin: 34px auto 22px;
  }
  .instagram-equipe {
    width: calc(100% - 40px);
    max-width: 620px;
    margin-top: 20px;
  }
  .carrousel-equipe .carrousel-site-controle {
    width: 16%;
    min-width: 44px;
    max-width: 64px;
  }
}
@media (max-width: 767px) {
  .page-equipe {
    margin-top: -20px;
  }
  .page-equipe-entete {
    padding-top: 20px;
    margin-bottom: 24px;
  }
  .page-equipe-titre,
  .section-equipe-titre {
    font-size: 26px;
    letter-spacing: 1px;
  }
  .page-equipe-sous-titre {
    margin: 6px 10px;
    font-size: 20px;
  }
  .section-equipe,
  .section-equipe-intro,
  .section-equipe-inverse {
    width: calc(100% - 24px);
    gap: 20px;
  }
  .texte-equipe {
    font-size: 14px;
    line-height: 1.6;
  }
  .texte-equipe p {
    margin-bottom: 16px;
  }
  .carrousel-equipe {
    max-width: 100%;
  }
  .carrousel-equipe-image {
    max-height: 360px;
  }
  .carrousel-equipe .carrousel-site-controle {
    width: 18%;
    min-width: 38px;
    max-width: 54px;
  }
  .carrousel-equipe .carrousel-site-controle .glyphicon-chevron-left,
  .carrousel-equipe .carrousel-site-controle .glyphicon-chevron-right {
    width: 26px;
    height: 26px;
    margin-top: -13px;
    font-size: 26px;
    line-height: 26px;
  }
  .carrousel-equipe .carrousel-site-indicateurs {
    bottom: 3px;
    gap: 3px;
  }
  .carrousel-equipe .carrousel-site-indicateurs li,
  .carrousel-equipe .carrousel-site-indicateurs .est-actif {
    width: 9px;
    height: 9px;
  }
  .section-equipe-titre {
    margin: 24px 0 18px;
  }
  .bouton-action-rose {
    display: flex;
    width: 100%;
    max-width: 270px;
    margin: 20px auto 22px;
    padding: 8px 14px;
    font-size: 15px;
  }
  .separateur-equipe {
    width: calc(100% - 24px);
    margin: 28px auto 18px;
  }
  .instagram-equipe {
    width: calc(100% - 24px);
    max-width: 100%;
    margin-top: 18px;
  }
}
@media (max-width: 480px) {
  .page-equipe {
    margin-top: -12px;
  }
  .page-equipe-entete {
    padding-top: 14px;
    margin-bottom: 20px;
  }
  .page-equipe-titre,
  .section-equipe-titre {
    font-size: 23px;
    letter-spacing: 0.6px;
  }
  .page-equipe-sous-titre {
    font-size: 18px;
  }
  .section-equipe,
  .section-equipe-intro,
  .section-equipe-inverse {
    width: calc(100% - 20px);
    gap: 16px;
  }
  .texte-equipe {
    font-size: 13.5px;
    line-height: 1.55;
  }
  .texte-equipe p {
    margin-bottom: 14px;
  }
  .carrousel-equipe-image {
    max-height: 300px;
  }
  .carrousel-equipe .carrousel-site-controle {
    width: 20%;
    min-width: 34px;
    max-width: 48px;
  }
  .carrousel-equipe .carrousel-site-controle .glyphicon-chevron-left,
  .carrousel-equipe .carrousel-site-controle .glyphicon-chevron-right {
    width: 22px;
    height: 22px;
    margin-top: -11px;
    font-size: 22px;
    line-height: 22px;
  }
  .carrousel-equipe .carrousel-site-indicateurs li,
  .carrousel-equipe .carrousel-site-indicateurs .est-actif {
    width: 8px;
    height: 8px;
  }
  .bouton-action-rose {
    max-width: 240px;
    margin-top: 18px;
    margin-bottom: 20px;
    padding: 7px 12px;
    font-size: 14px;
  }
  .separateur-equipe {
    width: calc(100% - 20px);
    margin: 24px auto 16px;
  }
  .instagram-equipe {
    width: calc(100% - 20px);
  }
}

/* ==========================================================================
   Page Témoignages
   ========================================================================== */

.page-temoignages {
  margin-top: -37px;
  overflow-x: hidden;
  color: var(--couleur-bleu);
  font-family: var(--police-titre);
  margin-bottom: 133px;
}
.page-temoignages-entete {
  padding-top: 32px;
  margin-bottom: 74px;
  text-align: center;
}
.page-temoignages-titre {
  margin: 0 10px 9px;
  padding: 0;
  color: var(--couleur-bleu);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 0 0 transparent;
}
.page-temoignages-sous-titre {
  margin: 7px;
  padding: 0;
  color: var(--couleur-bleu-clair);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}
.page-temoignages-contenu {
  width: 80%;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}
.carrousel-temoignages {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding-bottom: 40px;
}
.carrousel-temoignages-vue {
  border-radius: 6px;
}
.carrousel-temoignages-diapositive {
  margin: 0;
}
.carrousel-temoignages-image {
  width: auto;
  max-width: 100%;
  max-height: 450px;
  margin: 0 auto;
  border-radius: 6px;
}
.carrousel-temoignages .carrousel-site-controle {
  position: absolute;
  top: 34px;
  bottom: 72px;
  z-index: 100;
  width: 70px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--couleur-contact);
  text-align: center;
  text-shadow: none;
  opacity: 0.2;
  cursor: pointer;
  transition: opacity 0.15s linear;
  appearance: none;
  -webkit-appearance: none;
}
.carrousel-temoignages .carrousel-site-controle:hover,
.carrousel-temoignages .carrousel-site-controle:focus {
  color: var(--couleur-contact);
  text-decoration: none;
  opacity: 0.7;
  outline: none;
}
.carrousel-temoignages .carrousel-site-controle-gauche {
  left: -208px;
  right: auto;
  background-image: none;
}
.carrousel-temoignages .carrousel-site-controle-droite {
  right: -208px;
  left: auto;
  background-image: none;
}
.carrousel-temoignages .carrousel-site-controle .glyphicon-chevron-left,
.carrousel-temoignages .carrousel-site-controle .glyphicon-chevron-right {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  font-size: 30px;
  line-height: 30px;
}
.carrousel-temoignages .glyphicon-chevron-left {
  left: 0 !important;
}
.carrousel-temoignages .glyphicon-chevron-right {
  right: 0 !important;
}
.carrousel-temoignages .carrousel-site-indicateurs {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 44px;
  left: 0;
  z-index: 15;
  display: flex;
  justify-content: center;
  gap: 3px;
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 10px;
}
.carrousel-temoignages .carrousel-site-indicateurs li {
  display: block;
  width: 10px;
  height: 10px;
  margin: 1px;
  padding: 0;
  border: 1px solid var(--couleur-contact);
  border-radius: 50%;
  background-color: var(--couleur-blanc);
  text-indent: -999px;
  cursor: pointer;
}
.carrousel-temoignages .carrousel-site-indicateurs .est-actif {
  width: 10px;
  height: 10px;
  margin: 1px;
  background-color: var(--couleur-contact);
}
.page-temoignages-note {
  max-width: 760px;
  margin: 0 auto;
  color: var(--couleur-bleu);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  text-align: center;
}

/* ==========================================================================
   Responsive Témoignages
   ========================================================================== */

@media (max-width: 1250px) {
  .page-temoignages-contenu {
    width: calc(100% - 30px);
  }
}
@media (max-width: 1000px) {
  .page-temoignages {
    margin-top: -24px;
  }
  .page-temoignages-entete {
    padding-top: 28px;
    margin-bottom: 58px;
  }
  .carrousel-temoignages {
    max-width: 680px;
    padding-bottom: 62px;
  }
  .carrousel-temoignages .carrousel-site-controle {
    bottom: 62px;
    width: 56px;
  }
  .carrousel-temoignages .carrousel-site-controle-gauche {
    left: -140px;
  }
  .carrousel-temoignages .carrousel-site-controle-droite {
    right: -140px;
  }
  .carrousel-temoignages .carrousel-site-indicateurs {
    bottom: 38px;
  }
}
@media (max-width: 767px) {
  .page-temoignages {
    margin-top: -10px;
  }
  .page-temoignages-entete {
    padding-top: 20px;
    margin-bottom: 42px;
  }
  .page-temoignages-titre {
    font-size: 26px;
  }
  .page-temoignages-sous-titre {
    font-size: 20px;
  }
  .carrousel-temoignages {
    width: 100%;
    padding-bottom: 58px;
  }
  .carrousel-temoignages .carrousel-site-controle {
    width: 15%;
    min-width: 36px;
    max-width: 52px;
    bottom: 58px;
  }
  .carrousel-temoignages .carrousel-site-controle-gauche {
    left: 0;
  }
  .carrousel-temoignages .carrousel-site-controle-droite {
    right: 0;
  }
  .carrousel-temoignages .carrousel-site-indicateurs {
    bottom: 34px;
  }
  .carrousel-temoignages .carrousel-site-controle .glyphicon-chevron-left,
  .carrousel-temoignages .carrousel-site-controle .glyphicon-chevron-right {
    width: 24px;
    height: 24px;
    margin-top: -12px;
    font-size: 34px;
    line-height: 24px;
  }
  .carrousel-temoignages .carrousel-site-indicateurs li,
  .carrousel-temoignages .carrousel-site-indicateurs .est-actif {
    width: 11px;
    height: 11px;
  }
  .page-temoignages-note {
    font-size: 13.5px;
  }
}

/* ==========================================================================
   Page Nous rejoindre
   ========================================================================== */

.page-nous-rejoindre {
  position: relative;
  min-height: 0;
  margin-top: -37px;
  overflow-x: hidden;
  overflow-x: clip;
  color: var(--couleur-texte-fonce);
  font-family: var(--police-base);
}
.page-nous-rejoindre a:hover {
  text-decoration: none;
}
.page-nous-rejoindre-entete {
  width: 100%;
  margin: 0 auto 14px;
  padding-top: 32px;
  text-align: center;
}
.page-nous-rejoindre-titre {
  margin: 0 10px 9px;
  padding: 0;
  color: var(--couleur-bleu);
  font-family: var(--police-titre);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 1.5px;
  text-align: center;
  text-shadow: 0 0 0 transparent;
}
.page-nous-rejoindre-sous-titre {
  margin: 7px;
  padding: 0;
  color: var(--couleur-bleu-clair);
  font-family: var(--police-titre);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}
.page-nous-rejoindre-contenu {
  width: 770px;
  margin: 0 auto;
  text-align: center;
}
.recrutement-carte {
  width: 100%;
  margin: 0 auto 20px;
  padding: 42px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(7px);
  color: var(--couleur-texte-fonce);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.42857143;
  text-align: center;
}
.recrutement-carte-colonnes {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  column-gap: 46px;
  width: 100%;
}
.recrutement-carte-colonne {
  width: 50%;
}
.recrutement-carte-titre-liste {
  position: relative;
  margin: 0 0 14px 20px;
  padding: 0 25px;
  color: var(--couleur-texte-fonce);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: left;
  white-space: nowrap;
}
.recrutement-carte-titre-liste::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  display: block;
  width: 5px;
  height: 11px;
  border-width: 0 2px 2px 0;
  border-style: solid;
  border-color: var(--couleur-solution-validation);
  transform: rotate(45deg);
  transform-origin: bottom left;
}
.recrutement-carte-liste {
  margin: 0;
  padding-left: 24px;
  color: var(--couleur-texte-fonce);
  list-style: disc outside;
}
.recrutement-carte-liste li {
  margin-left: 0;
  padding-left: 0;
  color: var(--couleur-texte-fonce);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: left;
  white-space: nowrap;
}
.recrutement-carte-liste a {
  color: var(--couleur-lien);
}
.recrutement-carte-liste a:hover,
.recrutement-carte-liste a:focus {
  color: var(--couleur-contact) !important;
  outline: none;
}
.recrutement-carte-texte {
  margin: 28px 0 0;
  color: var(--couleur-texte-fonce);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
}
.bouton-candidature {
  position: relative;
  display: flex;
  justify-content: center;
  width: 200px;
  margin: 20px auto 0;
  padding: 10px 20px;
  border: 1px solid var(--couleur-contact);
  border-radius: 10px;
  background: none;
  color: var(--couleur-contact) !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.42857143;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition:
    color 1.5s 0.5s,
    border 3s 1s;
}
.bouton-candidature::before,
.bouton-candidature::after {
  content: "";
  position: absolute;
  left: 50%;
  opacity: 0;
  backface-visibility: visible;
  perspective: 400px;
  transform: rotateX(360deg) rotateY(0) translateX(-50%) translateY(0)
    scale(0.2);
  transform-origin: 50% -50%;
  transform-style: preserve-3d;
  transition: all 0.5s;
}
.bouton-candidature::before {
  top: 5px;
  height: 30px;
  border-top: 20px solid var(--couleur-blanc);
  border-right: 30px solid transparent;
  border-left: 30px solid transparent;
  background: var(--couleur-contact);
}
.bouton-candidature::after {
  top: 0;
  border-top: 20px solid var(--couleur-contact);
  border-right: 30px solid transparent;
  border-left: 30px solid transparent;
}
.bouton-candidature:hover:not(.est-clique) {
  border: 2px solid rgba(255, 255, 255, 0);
  color: transparent !important;
  text-decoration: none;
  transition:
    color 0.25s,
    border 0.25s;
}
.bouton-candidature:hover:not(.est-clique)::before,
.bouton-candidature:hover:not(.est-clique)::after {
  opacity: 1;
  transform: rotateX(0) rotateY(-10deg) translateX(-50%) translateY(0) scale(1);
}
.bouton-candidature:focus {
  outline: 1px dotted var(--couleur-contact);
  outline-offset: 4px;
}
.bouton-candidature.est-clique,
.bouton-candidature:focus:not(:hover) {
  border: 1px solid var(--couleur-contact);
  color: var(--couleur-contact) !important;
}
.bouton-candidature.est-clique::before,
.bouton-candidature.est-clique::after,
.bouton-candidature:focus:not(:hover)::before,
.bouton-candidature:focus:not(:hover)::after {
  opacity: 0;
  transform: rotateX(360deg) rotateY(0) translateX(-50%) translateY(0)
    scale(0.2);
}
.recrutement-equipe {
  position: relative;
  width: 770px;
  height: 210px;
  margin: 50px auto 15px;
}
.recrutement-carrousel-3d {
  position: absolute;
  top: 0;
  left: 50%;
  width: 190px;
  height: 190px;
  perspective: 8000px;
  transform: translateX(-50%);
}
.recrutement-carrousel-3d-images {
  position: relative;
  animation: recrutement-rotation 24s infinite alternate linear;
  transform-style: preserve-3d;
}
.recrutement-carrousel-3d-images img {
  position: absolute;
  top: 0;
  left: 10px;
  width: auto;
  height: 190px;
  outline: 1px solid transparent;
  filter: drop-shadow(0 12px 5px hsla(0, 0%, 0%, 0.4));
  backface-visibility: hidden;
}
.recrutement-carrousel-3d-images img:nth-child(1) {
  transform: translate3d(0, 0, 352px);
}
.recrutement-carrousel-3d-images img:nth-child(2) {
  transform: rotateY(45deg) translateZ(352px);
}
.recrutement-carrousel-3d-images img:nth-child(3) {
  transform: rotateY(90deg) translateZ(352px);
}
.recrutement-carrousel-3d-images img:nth-child(4) {
  transform: rotateY(135deg) translateZ(352px);
}
.recrutement-carrousel-3d-images img:nth-child(5) {
  transform: rotateY(180deg) translateZ(352px);
}
.recrutement-carrousel-3d-images img:nth-child(6) {
  transform: rotateY(225deg) translateZ(352px);
}
.recrutement-carrousel-3d-images img:nth-child(7) {
  transform: rotateY(270deg) translateZ(352px);
}
.recrutement-carrousel-3d-images img:nth-child(8) {
  transform: rotateY(315deg) translateZ(352px);
}
@keyframes recrutement-rotation {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(0.5turn);
  }
}
.recrutement-logo {
  position: absolute;
  top: 444px;
  width: 115px;
  height: 115px;
  margin-top: 0;
  pointer-events: none;
}
.recrutement-logo img {
  display: block;
  width: 100%;
  height: auto;
}
.recrutement-logo-agx {
  right: 15.5%;
}
.recrutement-logo-antarctic {
  left: 14.8%;
}
.recrutement-oiseau {
  width: 88px;
  height: 125px;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells-new.svg");
  background-size: auto 100%;
  animation-name: recrutement-vol-cycle;
  animation-timing-function: steps(10);
  animation-iteration-count: infinite;
  will-change: background-position;
}
.recrutement-oiseau-un {
  animation-duration: 1s;
  animation-delay: -0.5s;
  filter: invert(56%) sepia(73%) saturate(5750%) hue-rotate(169deg)
    brightness(97%) contrast(102%);
}
.recrutement-oiseau-deux {
  animation-duration: 0.9s;
  animation-delay: -0.75s;
  filter: invert(71%) sepia(41%) saturate(4476%) hue-rotate(155deg)
    brightness(98%) contrast(103%);
}
.recrutement-oiseau-conteneur {
  position: fixed;
  top: 20%;
  left: 0;
  z-index: 11;
  width: 88px;
  height: 125px;
  pointer-events: none;
  transform: translateX(-120px) scale(0.3);
  animation-name: recrutement-vol-droite;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}
.recrutement-oiseau-conteneur-un {
  animation-duration: 15s;
  animation-delay: 0s;
}
.recrutement-oiseau-conteneur-deux {
  animation-duration: 16s;
  animation-delay: 1s;
}
@keyframes recrutement-vol-cycle {
  100% {
    background-position: -900px 0;
  }
}
@keyframes recrutement-vol-droite {
  0% {
    transform: translateX(-120px) translateY(0) scale(0.3);
  }
  12% {
    transform: translateX(10vw) translateY(2vh) scale(0.4);
  }
  25% {
    transform: translateX(28vw) translateY(0) scale(0.5);
  }
  38% {
    transform: translateX(46vw) translateY(4vh) scale(0.6);
  }
  51% {
    transform: translateX(64vw) translateY(2vh) scale(0.6);
  }
  64% {
    transform: translateX(82vw) translateY(0) scale(0.6);
  }
  78% {
    transform: translateX(100vw) translateY(0) scale(0.6);
  }
  100% {
    transform: translateX(calc(100vw + 140px)) translateY(0) scale(0.6);
  }
}
.page-nous-rejoindre + #site-footer,
body:has(.page-nous-rejoindre) #site-footer {
  margin-top: 60px;
}

/* ==========================================================================
   Responsive Nous rejoindre
   ========================================================================== */

@media (max-width: 1400px) {
  .page-nous-rejoindre-contenu {
    width: 600px;
  }
  .recrutement-carte-colonnes {
    display: block;
  }
  .recrutement-carte-colonne {
    width: 100%;
  }
  .recrutement-carte-colonne + .recrutement-carte-colonne {
    margin-top: 18px;
  }
  .recrutement-carte-titre-liste {
    margin-left: 20px;
    white-space: normal;
  }
  .recrutement-carte-liste li {
    white-space: normal;
  }
  .recrutement-equipe {
    width: 600px;
    height: 210px;
    margin: 50px auto 15px;
  }
  .recrutement-logo,
  .recrutement-oiseau-conteneur {
    display: none;
  }
}
@media (max-width: 1100px) {
  .page-nous-rejoindre-contenu {
    width: 350px;
  }
  .recrutement-carte {
    padding: 32px;
  }
  .recrutement-carte-titre-liste {
    margin-left: 18px;
    padding-right: 0;
  }
  .recrutement-carte-liste {
    padding-left: 20px;
  }
  .recrutement-equipe {
    width: 350px;
  }
}
@media (max-width: 767px) {
  .page-nous-rejoindre {
    margin-top: -10px;
  }
  .page-nous-rejoindre-entete {
    padding-top: 20px;
    margin-bottom: 34px;
  }
  .page-nous-rejoindre-titre {
    font-size: 26px;
  }
  .page-nous-rejoindre-sous-titre {
    font-size: 20px;
  }
  .page-nous-rejoindre-contenu {
    width: calc(100% - 30px);
    max-width: 350px;
  }
  .recrutement-carte-titre-liste,
  .recrutement-carte-liste li,
  .recrutement-carte-texte {
    font-size: 14px;
  }
  .bouton-candidature {
    width: 190px;
    font-size: 18px;
  }
  .recrutement-equipe {
    width: calc(100% - 30px);
  }
}

/* ==========================================================================
   Composants solutions communs
   ========================================================================== */

html {
  scroll-behavior: smooth;
}
.page-solution {
  position: relative;
  margin-top: -37px;
  overflow-x: hidden;
  color: var(--couleur-solution-texte);
  font-family: var(--police-titre);
}
.page-solution a {
  color: inherit;
}
.page-solution a:hover,
.page-solution a:focus {
  text-decoration: none;
}
.solution-section {
  display: flex;
  width: 100%;
  min-height: clamp(430px, 50vh, 620px);
  margin: 0;
}
.solution-conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 75%;
  max-width: 1230px;
  min-height: 90%;
  margin: auto;
}
.solution-colonne {
  min-width: 0;
}
.solution-colonne-grande {
  flex: 0 0 51%;
  max-width: 51%;
}
.solution-colonne-petite {
  flex: 0 0 40%;
  max-width: 40%;
}
.solution-texte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--couleur-solution-texte);
  font-size: clamp(15px, 0.9vw, 17px);
  line-height: 1.45;
}
.solution-texte-gauche {
  padding-left: 5%;
}
.solution-texte-droite {
  padding-right: 5%;
}
.solution-texte-tableau {
  justify-content: flex-start;
  padding-top: 6%;
}
.solution-titre-section {
  margin: 0 0 10px;
  padding: 0;
  color: var(--couleur-solution-titre);
  font-size: clamp(24px, 1.55vw, 28px);
  font-weight: 700;
  line-height: 1.15;
}
.solution-titre-secondaire {
  margin-top: 22px;
}
.solution-liste-simple,
.solution-liste-coches {
  margin: 0;
  color: var(--couleur-solution-texte);
  font-size: clamp(15px, 0.9vw, 17px);
  line-height: 1.45;
  text-align: left;
}
.solution-liste-simple {
  padding-left: 20px;
}
.solution-liste-simple li {
  margin-bottom: 3px;
  list-style: circle;
}
.solution-liste-coches {
  padding: 0 0 0 24px;
  list-style: none;
}
.solution-liste-coches li {
  position: relative;
  margin-bottom: 14px;
  padding-left: 56px;
}
.solution-liste-coches li::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 12px;
  height: 27px;
  border-right: 4px solid var(--couleur-solution-validation);
  border-bottom: 4px solid var(--couleur-solution-validation);
  transform: rotate(45deg);
  transform-origin: bottom left;
}
.solution-liste-coches a,
.solution-liste-simple a {
  color: var(--couleur-solution-texte);
  text-decoration: underline;
}
.solution-deux-listes {
  display: flex;
  gap: 24px;
}
.solution-deux-listes > * {
  flex: 1 1 0;
}
.solution-apparition {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition:
    opacity 0.75s ease,
    transform 0.75s ease;
  transition-delay: var(--solution-delai-apparition, 0ms);
  will-change: opacity, transform;
}
.solution-apparition[data-apparition="fade-up"] {
  transform: translate3d(0, 34px, 0);
}
.solution-apparition[data-apparition="fade-down"] {
  transform: translate3d(0, -34px, 0);
}
.solution-apparition[data-apparition="fade-up-left"] {
  transform: translate3d(34px, 34px, 0);
}
.solution-apparition[data-apparition="fade-up-right"] {
  transform: translate3d(-34px, 34px, 0);
}
.solution-apparition.est-visible,
.solution-apparition.est-visible[data-apparition] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.solution-apparition.est-sorti {
  opacity: 0;
}
.solution-apparition.solution-sans-animation {
  transition: none !important;
  transition-delay: 0ms !important;
}
.solution-media {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: visible;
}
.solution-media-gauche {
  justify-content: flex-start;
}
.solution-media-droite {
  justify-content: flex-end;
}
.solution-media img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
.solution-media-capture {
  height: auto;
  margin-top: 0;
}
.solution-media-capture img {
  width: clamp(520px, 33.35vw, 640px);
  max-width: none;
  height: auto;
}
.solution-section-appli {
  min-height: clamp(470px, 55vh, 650px);
}
.solution-media-appli img {
  width: clamp(470px, 29.2vw, 560px);
  max-width: none;
  height: auto;
  margin-top: 12%;
}
.solution-vignettes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  width: 63%;
  max-width: 970px;
  margin: -8px auto 0;
  text-align: center;
}
.solution-vignette {
  display: block;
  color: var(--couleur-solution-texte);
}
.solution-vignette img {
  display: block;
  width: auto;
  height: clamp(124px, 6.8vw, 125px);
  margin: 0 auto;
}
.solution-vignette span {
  display: block;
  margin-top: 15px;
  color: var(--couleur-bleu-clair);
  font-size: clamp(22px, 1.22vw, 24px);
  font-weight: 400;
  line-height: 1.2;
}
.solution-vignettes +

.solution-scroll,
.solution-scroll.solution-cache-mobile {
  margin-top: 52px;
}
.solution-separateur-fonctions {
  width: 41%;
  max-width: 735px;
  height: 30px;
  margin: 0 auto;
  overflow: visible;
  border: 0;
  border-top: 1px double var(--couleur-solution-titre);
  color: var(--couleur-solution-titre);
  font-size: clamp(15px, 1vw, 19px);
  text-align: center;
}
.solution-separateur-fonctions::after {
  content: "Découvrez ci-dessous quelques unes des fonctions les plus appréciées 😉";
  position: relative;
  top: -15px;
  padding: 0 15px;
  background: var(--couleur-blanc);
}
.solution-separateur-simple {
  width: 96%;
  margin: 4vh auto;
  border: 0;
  border-top: 1px solid var(--couleur-separateur);
}
.solution-scroll,
.solution-retour-haut {
  display: block;
  width: 24px;
  height: 60px;
  margin: 4% auto;
  color: var(--couleur-solution-titre);
}
.solution-scroll {
  margin: 38px auto 50px;
}
.solution-retour-haut {
  position: fixed;
  right: 38px;
  bottom: 10px;
  z-index: 50;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.solution-retour-haut.est-visible {
  opacity: 1;
  pointer-events: auto;
}
.solution-souris {
  display: block;
  width: 24px;
  height: 42px;
  border: 2px solid var(--couleur-solution-titre);
  border-radius: 14px;
}
.solution-roulette {
  position: relative;
  display: block;
  width: 4px;
  height: 4px;
  margin: 5px auto;
  border: 2px solid var(--couleur-solution-titre);
  border-radius: 8px;
  background: var(--couleur-solution-titre);
  animation: solution-roulette 0.6s linear infinite;
}
.solution-fleche {
  display: block;
  width: 16px;
  height: 16px;
  margin: 0 auto;
  border-right: 2px solid var(--couleur-solution-titre);
  border-bottom: 2px solid var(--couleur-solution-titre);
  transform: rotate(45deg);
  animation: solution-fleche 1.2s infinite;
}
.solution-fleche-deux {
  animation-delay: 0.15s;
}
.solution-fleche-trois {
  animation-delay: 0.3s;
}
@keyframes solution-roulette {
  0% {
    top: 0;
    opacity: 1;
  }
  100% {
    top: 18px;
    opacity: 0;
  }
}
@keyframes solution-fleche {
  0% {
    opacity: 0;
    transform: rotate(45deg) translate(-4px, -4px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) translate(6px, 6px);
  }
}
.solution-retour-haut .solution-fleche {
  margin-top: -3px;
  opacity: 0;
  transform: rotate(-135deg);
  animation-duration: 2.15s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}
.solution-retour-haut .solution-fleche:first-child {
  margin-top: 0;
}
.solution-retour-haut
  .solution-fleche:not(.solution-fleche-deux):not(.solution-fleche-trois) {
  animation-name: solution-retour-haut-fleche-haute;
}
.solution-retour-haut .solution-fleche-deux {
  animation-name: solution-retour-haut-fleche-milieu;
}
.solution-retour-haut .solution-fleche-trois {
  animation-name: solution-retour-haut-fleche-basse;
}
@keyframes solution-retour-haut-fleche-haute {
  0%,
  100% {
    opacity: 0;
    transform: rotate(-135deg);
  }
  14% {
    opacity: 0.08;
    transform: rotate(-135deg);
  }
  32% {
    opacity: 0.24;
    transform: rotate(-135deg);
  }
  50% {
    opacity: 0.65;
    transform: rotate(-135deg);
  }
  62% {
    opacity: 1;
    transform: rotate(-135deg);
  }
  76% {
    opacity: 1;
    transform: rotate(-135deg);
  }
  90% {
    opacity: 0.38;
    transform: rotate(-135deg);
  }
}
@keyframes solution-retour-haut-fleche-milieu {
  0%,
  100% {
    opacity: 0;
    transform: rotate(-135deg);
  }
  14% {
    opacity: 0.18;
    transform: rotate(-135deg);
  }
  32% {
    opacity: 0.5;
    transform: rotate(-135deg);
  }
  50% {
    opacity: 0.82;
    transform: rotate(-135deg);
  }
  62% {
    opacity: 1;
    transform: rotate(-135deg);
  }
  72% {
    opacity: 0.72;
    transform: rotate(-135deg);
  }
  86% {
    opacity: 0.16;
    transform: rotate(-135deg);
  }
}
@keyframes solution-retour-haut-fleche-basse {
  0%,
  100% {
    opacity: 0;
    transform: rotate(-135deg);
  }
  14% {
    opacity: 0.36;
    transform: rotate(-135deg);
  }
  32% {
    opacity: 0.78;
    transform: rotate(-135deg);
  }
  50% {
    opacity: 1;
    transform: rotate(-135deg);
  }
  62% {
    opacity: 1;
    transform: rotate(-135deg);
  }
  68% {
    opacity: 0.45;
    transform: rotate(-135deg);
  }
  80% {
    opacity: 0.08;
    transform: rotate(-135deg);
  }
}
.solution-chiffres {
  display: flex;
  min-height: 325px;
}
.solution-chiffres-conteneur {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: min(1040px, calc(100% - 260px));
  margin: 0 auto;
  padding-left: 0;
}
.solution-bulle {
  flex: 0 0 188px;
  width: 188px;
  height: 230px;
  min-height: 0;
  margin: 0 12px;
  padding: 16px 16px 24px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.25);
  color: var(--couleur-solution-texte-fonce);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(7px);
  text-align: left;
  transition: transform 0.2s ease;
}
.solution-bulle:hover {
  transform: scale(1.04);
}
.solution-bulle strong {
  display: block;
  color: var(--couleur-solution-chiffre);
  font-size: 46px;
  font-weight: 400;
  line-height: 1.42857143;
}
.solution-bulle span,
.solution-bulle a {
  display: block;
  margin-top: 13px;
  color: var(--couleur-solution-texte);
  font-size: 20px;
  line-height: 1.42857143;
}
.solution-bulle a {
  text-decoration: none;
}
.solution-bulle a:hover,
.solution-bulle a:focus {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.solution-temoignages {
  display: flex;
  min-height: 430px;
  padding: 78px 0 42px;
}
.solution-temoignages-conteneur {
  width: min(44%, 836px);
  margin: 0 auto;
  text-align: center;
  transform: translateX(14px);
}
.solution-titre-temoignages {
  margin: 0 0 24px;
  color: var(--couleur-solution-titre);
  font-size: 35px;
  font-weight: 700;
  line-height: 1.34285714;
  text-align: left;
}
.solution-titre-temoignages a {
  color: var(--couleur-solution-titre);
}
.solution-cartes {
  display: grid;
  grid-template-columns: repeat(4, 184px);
  gap: 24px;
}
.solution-carte {
  min-height: 215px;
  margin: 0;
  padding: 18px 14px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.25);
  color: var(--couleur-solution-carte);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  font-family: var(--police-titre);
  font-size: 15px;
  line-height: 1.42857143;
  text-align: left;
}
.solution-carte span {
  display: block;
  margin-bottom: 10px;
  font-size: 31px;
}
.solution-carte p {
  width: 100%;
  max-width: none;
  margin: 5px 0 0;
  color: var(--couleur-solution-carte);
  font-family: var(--police-titre);
  font-size: 15px;
  line-height: 1.42857143;
}
.solution-cta-seule {
  display: flex;
  justify-content: center;
  padding: 36px 0 45px;
  text-align: center;
}
.solution-cta-seule .bouton-action-rose {
  width: 250px;
  min-height: 50.56px;
  margin: 0;
  padding: 10px 20px;
  color: var(--couleur-contact) !important;
  font-family: var(--police-base);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.42857143;
}
.solution-bouton-bleu {
  width: 220px;
  margin-top: 22px;
  font-size: 18px;
}
.solution-popup[aria-hidden="true"] {
  display: none;
}
.solution-popup {
  position: fixed;
  inset: 0;
  z-index: 1200;
}
.solution-popup-fond {
  position: absolute;
  inset: 0;
  background: rgba(240, 240, 240, 0.9);
}
.solution-popup-fermer {
  position: fixed;
  top: 14.5%;
  left: 7.25%;
  z-index: 1202;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.solution-popup-fermer img {
  display: block;
  width: 50px;
  height: 50px;
}
.solution-popup-video,
.solution-popup-image {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1201;
  width: min(90vw, 960px);
  transform: translate(-50%, -50%);
}
.solution-popup-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 14px;
  background: var(--couleur-noir);
}
.solution-popup-image img {
  display: block;
  width: 100%;
  max-height: 86vh;
  object-fit: contain;
  border-radius: 14px;
}

/* ==========================================================================
   Page HarMobil
   ========================================================================== */

.harmobil-section-accueil {
  min-height: clamp(565px, 31vw, 605px);
  padding: 0;
}
.harmobil-section-accueil .solution-conteneur {
  display: grid;
  grid-template-columns: 43% 48%;
  align-items: start;
  justify-content: center;
  gap: 2%;
  width: 91%;
  max-width: 1420px;
  min-height: auto;
  margin: 30px auto 0;
  transform: translateX(48px);
}
.harmobil-section-accueil .solution-colonne,
.harmobil-section-accueil .solution-colonne-grande,
.harmobil-section-accueil .solution-colonne-petite {
  width: auto;
  max-width: none;
  height: auto;
  flex: none;
}
.harmobil-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 620px;
  margin-left: 86px;
  padding-top: 98px;
}
.harmobil-logo img {
  display: block;
  width: clamp(460px, 25vw, 500px);
  max-width: 100%;
  height: auto;
  margin: 0 -16px 20px;
}
.harmobil-accroche {
  width: 100%;
  max-width: 510px;
  margin: 0 -18px;
  color: var(--couleur-solution-titre);
  font-size: clamp(44px, 2.3vw, 45px);
  font-weight: 700;
  line-height: 1.46;
}
.harmobil-texte-intro {
  margin: 8px -18px 0;
  color: var(--couleur-solution-texte);
  font-size: clamp(16.5px, 0.86vw, 17px);
  line-height: 1.45;
  text-align: left;
}
.harmobil-actions {
  display: flex;
  align-items: center;
  gap: 70px;
  margin: 24px 0 0 -18px;
  font-size: 17px;
}
.harmobil-section-accueil .bouton-action-rose {
  width: clamp(250px, 12.4vw, 260px);
  margin: 0;
  font-size: 19px;
  font-weight: 300;
  line-height: 29px;
}
.harmobil-bouton-video {
  display: inline-flex;
  width: clamp(62px, 3.35vw, 66px);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.harmobil-bouton-video img {
  display: block;
  width: 100%;
  height: auto;
  filter: invert(25%) sepia(61%) saturate(7328%) hue-rotate(353deg)
    brightness(103%) contrast(130%);
  transition: transform 0.2s ease;
}
.harmobil-bouton-video:hover img,
.harmobil-bouton-video:focus img {
  transform: rotate(5deg);
}
.harmobil-media-accueil {
  align-items: flex-start;
  justify-content: flex-start;
  overflow: visible;
}
.harmobil-media-accueil img {
  width: clamp(600px, 36.2vw, 705px);
  max-width: none;
  height: auto;
  margin: -7px 0 0 40px;
}
.harmobil-media-gestion img {
  width: clamp(300px, 18.75vw, 360px);
  max-width: 100%;
  height: auto;
  margin-left: 20px;
}
.harmobil-media-inscription img {
  width: clamp(520px, 31.75vw, 610px);
  max-width: none;
  height: auto;
  margin-left: -85px;
  transform: translateY(-22%);
}
.harmobil-media-examens img {
  width: clamp(222px, 13.85vw, 252px);
  max-width: 100%;
  height: auto;
  margin-left: 192px;
  transform: translateY(4%);
}
.harmobil-section-moniteur.solution-section {
  min-height: 610px;
}
.harmobil-section-moniteur .solution-conteneur {
  width: 75%;
  max-width: 1230px;
  align-items: flex-start;
  transform: translate(-8px, 42px);
}
.harmobil-section-moniteur .solution-texte-gauche {
  flex-basis: 43.5%;
  max-width: 43.5%;
  padding-left: calc(5% + 56px);
  padding-top: 0;
  transform: none;
}
.harmobil-section-moniteur .solution-titre-section {
  margin: 0 0 12px;
  color: var(--couleur-solution-titre);
  font-size: 27px;
  line-height: 1.42857143;
}
.harmobil-section-moniteur .solution-liste-coches {
  max-width: 490px;
  padding-left: 16px;
  color: var(--couleur-solution-texte);
  font-size: 20px;
  line-height: 1.42857143;
}
.harmobil-section-moniteur .solution-liste-coches li {
  margin-bottom: 18px;
  padding-left: 35px;
}
.harmobil-section-moniteur .solution-liste-coches li::before {
  top: -4px;
  width: 13px;
  height: 29px;
  border-right-width: 4px;
  border-bottom-width: 4px;
}
.harmobil-section-moniteur .solution-bouton-bleu {
  width: 250px;
  margin: 22px 0 30px;
  padding: 10px 20px;
  border-color: var(--couleur-solution-titre);
  color: var(--couleur-solution-titre) !important;
  font-family: var(--police-titre);
  font-size: 19px;
}
.harmobil-section-moniteur .solution-media-appli {
  align-items: flex-start;
  justify-content: flex-start;
}
.harmobil-section-moniteur .solution-media-appli img {
  width: clamp(415px, 25.6vw, 495px);
  max-width: none;
  margin-top: 0;
  transform: translateX(14px);
}
.harmobil-section-sarool.solution-section {
  min-height: 650px;
}
.harmobil-section-sarool .solution-conteneur {
  width: 75%;
  max-width: 1230px;
  align-items: flex-start;
  transform: translateY(8px);
}
.harmobil-section-sarool .solution-media-appli {
  align-items: flex-start;
  justify-content: flex-end;
}
.harmobil-section-sarool .solution-media-appli img {
  width: clamp(210px, 12.2vw, 235px);
  max-width: none;
  margin-top: 0;
  transform: translateX(14px);
}
.harmobil-section-sarool .solution-texte-droite {
  padding-right: 0;
  transform: translateY(30px);
}
.harmobil-section-sarool .solution-titre-section {
  margin: 0 0 24px;
  color: var(--couleur-solution-titre);
  font-size: 28px;
  line-height: 1.42857143;
}
.harmobil-section-sarool .solution-liste-coches {
  max-width: 500px;
  padding-left: 16px;
  color: var(--couleur-solution-texte);
  font-size: 20px;
  line-height: 1.42857143;
}
.harmobil-section-sarool .solution-liste-coches li {
  margin-bottom: 14px;
  padding-left: 35px;
}
.harmobil-section-sarool .solution-liste-coches li::before {
  top: -4px;
  width: 13px;
  height: 29px;
  border-right-width: 4px;
  border-bottom-width: 4px;
}
.harmobil-section-sarool .solution-bouton-bleu {
  width: 250px;
  margin: 20px 0 30px;
  padding: 10px 20px;
  border-color: var(--couleur-solution-titre);
  color: var(--couleur-solution-titre) !important;
  font-family: var(--police-titre);
  font-size: 20px;
}
.harmobil-section-outils {
  margin-top: 0;
}
.harmobil-section-outils.solution-section {
  min-height: 610px;
  margin-top: -26px;
}
.harmobil-section-outils .solution-conteneur {
  width: 78%;
  max-width: 1320px;
  min-height: 0;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  transform: translateY(-8px);
}
.harmobil-section-outils .solution-texte-gauche {
  flex-basis: 40%;
  max-width: 40%;
  padding-left: calc(5% + 26px);
  padding-top: 0;
}
.harmobil-section-outils .solution-titre-section {
  margin: 14px 0 10px;
  color: var(--couleur-solution-titre);
  font-size: 28px;
  line-height: 1.42857143;
}
.harmobil-section-outils .solution-titre-secondaire {
  margin-top: 42px;
}
.harmobil-section-outils .solution-liste-simple {
  width: 455px;
  max-width: 520px;
  margin-left: 18px;
  color: var(--couleur-solution-texte);
  font-size: 17px;
  line-height: 1.42857143;
}
.harmobil-section-outils .solution-liste-simple li {
  margin-bottom: 0;
}
.harmobil-section-outils .solution-media-capture {
  align-items: flex-start;
  justify-content: flex-start;
}
.harmobil-section-outils .solution-media-capture img {
  width: clamp(1420px, 78vw, 1520px);
  max-width: none;
  height: auto;
  margin-top: -36px;
  transform: translateX(54px);
}
.harmobil-section-gestion.solution-section {
  min-height: 482px;
}
.harmobil-section-gestion .solution-conteneur {
  width: 64%;
  max-width: 1230px;
  min-height: 0;
  transform: translateY(20px);
}
.harmobil-section-gestion .solution-colonne-petite {
  flex-basis: 42%;
  max-width: 42%;
}
.harmobil-section-gestion .solution-colonne-grande {
  flex-basis: 50%;
  max-width: 50%;
}
.harmobil-section-gestion .harmobil-media-gestion img {
  width: clamp(405px, 24vw, 456px);
  max-width: 100%;
  margin-left: 56px;
  transform: translateY(-20px);
}
.harmobil-section-gestion .solution-texte-droite {
  padding-right: 0;
  transform: translate(-12px, -38px);
}
.harmobil-section-gestion .solution-liste-coches {
  max-width: 450px;
  padding-left: 16px;
  font-size: clamp(18px, 1.05vw, 20px);
  line-height: 1.38;
}
.harmobil-section-gestion .solution-liste-coches li {
  margin-bottom: 18px;
  padding-left: 42px;
}
.harmobil-section-gestion .solution-liste-coches li:first-child {
  max-width: 460px;
}
.harmobil-section-gestion .harmobil-ligne-livret,
.harmobil-section-gestion .solution-liste-coches li:last-child {
  white-space: nowrap;
}
.harmobil-section-gestion .solution-liste-coches li::before {
  top: -5px;
  width: 13px;
  height: 29px;
  border-right-width: 4px;
  border-bottom-width: 4px;
}
.harmobil-section-planning.solution-section {
  min-height: 460px;
}
.harmobil-section-planning .solution-conteneur,
.harmobil-section-inscription .solution-conteneur {
  width: 75%;
  max-width: 1230px;
  min-height: 0;
  align-items: flex-start;
}
.harmobil-section-planning .solution-texte-gauche {
  padding-left: calc(5% + 46px);
  padding-top: calc(6% + 12px);
}
.harmobil-section-planning .solution-deux-listes {
  align-items: flex-start;
  width: 390px;
  max-width: 390px;
  margin-left: 18px;
  gap: 16px;
}
.harmobil-section-planning .solution-deux-listes > .solution-liste-simple {
  flex: 0 0 calc((100% - 18px) / 2);
  max-width: calc((100% - 18px) / 2);
  min-width: 0;
}
.harmobil-section-planning .solution-liste-simple,
.harmobil-section-inscription .solution-liste-simple {
  line-height: 1.34;
}
.harmobil-section-planning .solution-liste-simple li,
.harmobil-section-inscription .solution-liste-simple li {
  margin-bottom: 1px;
}
.harmobil-section-planning .bouton-action-rose {
  z-index: 2;
  width: 250px;
  margin: 16px 0 0;
  padding: 10px 20px;
  font-size: 20px;
}
.harmobil-section-planning .solution-media-capture {
  align-items: flex-start;
  justify-content: flex-end;
}
.harmobil-section-planning .solution-media-capture img {
  width: clamp(560px, 31.3vw, 600px);
  max-width: none;
  margin-top: -28px;
  transform: translateX(-34px);
}
.harmobil-section-inscription.solution-section {
  min-height: 500px;
  margin-top: 0;
}
.harmobil-section-inscription .harmobil-media-inscription {
  align-items: flex-start;
  justify-content: flex-start;
}
.harmobil-section-inscription .harmobil-media-inscription img {
  width: clamp(675px, 37.8vw, 745px);
  max-width: none;
  margin-left: -98px;
  transform: translateY(-8%);
}
.harmobil-section-inscription .solution-texte-droite {
  flex-basis: 42%;
  max-width: 42%;
  padding-right: 5%;
  padding-top: 0;
  transform: translate(-6px, 55px);
}
.harmobil-section-inscription .solution-liste-simple {
  width: 430px;
  max-width: 455px;
  margin-left: 18px;
}
.harmobil-section-examens.solution-section {
  min-height: 600px;
}
.harmobil-section-examens .solution-conteneur {
  width: 66%;
  max-width: 1100px;
  min-height: 0;
  align-items: flex-start;
  transform: translateY(34px);
}
.harmobil-section-examens .solution-texte-droite {
  padding-right: 0;
  transform: translate(0, -38px);
}
.harmobil-section-examens .solution-titre-section {
  margin: 44px 0 12px;
  color: var(--couleur-solution-titre);
  font-size: 28px;
  line-height: 1.42857143;
}
.harmobil-section-examens .solution-titre-secondaire {
  margin-top: 44px;
}
.harmobil-section-examens .solution-liste-simple {
  width: 505px;
  max-width: 505px;
  margin-left: 16px;
  color: var(--couleur-solution-texte);
  font-size: 17px;
  line-height: 1.42857143;
}
.harmobil-section-examens .solution-liste-simple li {
  margin-bottom: 0;
}
.harmobil-section-examens .bouton-action-rose {
  width: 250px;
  margin: 31px 0 14px;
  padding: 10px 20px;
  color: var(--couleur-contact) !important;
  font-family: var(--police-titre);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.42857143;
}
.harmobil-section-examens .harmobil-media-examens {
  align-items: flex-start;
  justify-content: flex-start;
}
.harmobil-passerelles {
  position: relative;
  width: 140%;
  height: 130px;
  margin: 0 0 3.5% -20%;
  overflow: hidden;
  background: var(--couleur-blanc);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
}
.harmobil-passerelles::before,
.harmobil-passerelles::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 2;
  width: clamp(120px, 10.4vw, 200px);
  height: 100px;
  background: linear-gradient(
    to right,
    var(--couleur-blanc) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}
.harmobil-passerelles::before {
  left: 0;
}
.harmobil-passerelles::after {
  right: 0;
  transform: rotateZ(180deg);
}
.harmobil-passerelles-piste {
  display: flex;
  width: calc(250px * 17);
  animation: harmobil-passerelles-defilement 30s linear infinite;
}
.harmobil-passerelle {
  flex: 0 0 250px;
  width: 250px;
  height: 100px;
}
.harmobil-passerelle img {
  display: block;
  width: 250px;
  height: 100px;
  object-fit: contain;
}
@keyframes harmobil-passerelles-defilement {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 11));
  }
}
.harmobil-section-comptes-eleves.solution-section {
  min-height: 650px;
}
.harmobil-section-comptes-eleves .solution-conteneur {
  width: 78%;
  max-width: 1280px;
  min-height: 0;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  transform: translate(0, -142px);
}
.harmobil-section-comptes-eleves .solution-texte-gauche {
  flex-basis: 44%;
  max-width: 44%;
  padding-left: calc(5% + 24px);
  padding-top: 5%;
}
.harmobil-section-comptes-eleves .solution-titre-section {
  margin: 14px 0 10px;
  color: var(--couleur-solution-titre);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.42857143;
}
.harmobil-section-comptes-eleves .solution-liste-simple,
.harmobil-section-comptes-eleves .solution-liste-simple li {
  color: var(--couleur-solution-texte);
  font-size: 17px;
  line-height: 1.42857143;
}
.harmobil-section-comptes-eleves .solution-liste-simple {
  width: 500px;
  max-width: 500px;
  margin-left: 18px;
}
.harmobil-section-comptes-eleves .solution-liste-simple li {
  margin-bottom: 0;
}
.harmobil-section-comptes-eleves .solution-deux-listes {
  width: 390px;
  max-width: 390px;
  margin-left: 18px;
  gap: 18px;
}
.harmobil-section-comptes-eleves
  .solution-deux-listes
  > .solution-liste-simple {
  flex: 0 0 calc((100% - 18px) / 2);
  max-width: calc((100% - 18px) / 2);
  min-width: 0;
  margin-left: 0;
}
.harmobil-section-comptes-eleves .solution-media-capture {
  align-items: flex-start;
  justify-content: flex-start;
}
.harmobil-section-comptes-eleves .solution-media-capture img {
  width: clamp(675px, 37.8vw, 735px);
  max-width: none;
  height: auto;
  margin-top: -12px;
  transform: translateX(18px);
}
.harmobil-section-aide.harmobil-section-aide {
  min-height: 455px;
  margin-top: -25px;
}
.harmobil-section-aide .solution-conteneur {
  width: 74%;
  max-width: 1260px;
  align-items: flex-start;
  transform: translateY(-25px);
}
.harmobil-section-aide .solution-texte-gauche {
  flex-basis: 46.8%;
  max-width: 46.8%;
  padding-left: calc(5% + 44px);
  padding-top: 0;
  transform: translateY(44px);
}
.harmobil-section-aide .solution-titre-section {
  margin: 0 0 24px;
  color: var(--couleur-solution-titre);
  font-size: 28px;
  line-height: 1.42857143;
}
.harmobil-section-aide .solution-liste-coches {
  max-width: 458px;
  padding-left: 16px;
  color: var(--couleur-solution-texte);
  font-size: 20px;
  line-height: 1.42857143;
}
.harmobil-section-aide .solution-liste-coches li {
  margin-bottom: 16px;
  padding-left: 35px;
}
.harmobil-section-aide .solution-liste-coches li::before {
  top: -4px;
  width: 13px;
  height: 29px;
  border-right-width: 4px;
  border-bottom-width: 4px;
}
.harmobil-section-aide .solution-liste-coches a {
  color: var(--couleur-solution-texte);
  text-decoration: none;
}
.harmobil-section-aide .solution-liste-coches a:hover,
.harmobil-section-aide .solution-liste-coches a:focus {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.harmobil-section-aide + .solution-separateur-simple {
  width: 68%;
  margin: 0 auto 34px;
}
.harmobil-equipe {
  display: grid;
  grid-template-columns: repeat(3, 180px);
  gap: 18px 18px;
  transform: translate(-34px, 30px);
}
.harmobil-equipe img {
  width: 180px;
  height: 137px;
  object-fit: cover;
  border-radius: 15%;
}
.harmobil-campagne {
  display: block;
  width: min(92%, 1260px);
  margin: 68px auto 18px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  cursor: pointer;
  margin-bottom: 110px;
}
.harmobil-campagne span,
.harmobil-campagne-images {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.harmobil-campagne img {
  display: block;
  width: auto;
  height: auto;
  max-height: 500px;
  border-radius: 0;
  box-shadow: none;
}
.harmobil-campagne-image-pub1 {
  max-width: 510px;
}
.harmobil-campagne-image-pub2 {
  max-width: 520px;
}
.harmobil-campagne .calltoaction,
.harmobil-campagne .bouton-action-rose {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 50.56px;
  min-height: 0;
  margin-top: 55px;
  padding: 10px 20px;
  border: 1px solid var(--couleur-contact);
  border-radius: 10px;
  background: transparent;
  color: var(--couleur-contact) !important;
  font-family: "Brandon Text", var(--police-titre);
  font-size: 19px;
  font-weight: 300;
  line-height: 1.42857143;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: none;
  animation: none;
  transform: none;
}
.harmobil-campagne .calltoaction:hover,
.harmobil-campagne .calltoaction:focus,
.harmobil-campagne .bouton-action-rose:hover,
.harmobil-campagne .bouton-action-rose:focus {
  background-color: var(--couleur-contact);
  color: var(--couleur-blanc) !important;
  text-decoration: none;
  outline: none;
  box-shadow: none;
  transform: none;
}

/* ==========================================================================
   Responsive solutions communes
   ========================================================================== */

@media (max-width: 1400px) and (min-width: 951px) {
  .solution-cartes {
      grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-solution .solution-media img {
      max-width: 100%;
  }
}
@media (min-width: 1281px) and (max-width: 1400px) {
  .solution-chiffres-conteneur {
      width: min(990px, calc(100% - 180px));
  }
  .solution-bulle {
      flex-basis: 180px;
      width: 180px;
  }
}
@media (max-width: 1100px) and (min-width: 951px) {
  .solution-conteneur {
      width: calc(100% - 40px);
  }
}
@media (max-width: 950px) {
  .page-solution {
      margin-top: -24px;
  }
  .page-solution .solution-section,
  .page-solution .solution-section-appli,
  .page-solution .solution-chiffres,
  .page-solution .solution-temoignages,
  .page-solution .solution-cta-seule {
      min-height: 0;
      padding: 44px 0;
  }
  .page-solution .solution-conteneur {
      display: flex;
      flex-direction: column;
      width: min(100% - 40px, 760px);
      max-width: 760px;
      min-height: 0;
      gap: 30px;
      margin: 0 auto;
      transform: none;
  }
  .page-solution .solution-colonne,
  .page-solution .solution-colonne-grande,
  .page-solution .solution-colonne-petite {
      flex: 0 0 auto;
      width: 100%;
      max-width: 100%;
      height: auto;
  }
  .page-solution .solution-texte {
      order: 1;
      width: 100%;
      max-width: 640px;
      margin-right: auto;
      margin-left: auto;
      padding: 0;
      text-align: center;
      transform: none;
  }
  .page-solution .solution-media {
      order: 2;
      justify-content: center;
      width: 100%;
      margin: 0 auto;
      transform: none;
  }
  .page-solution .solution-media img {
      display: block;
      width: min(100%, 620px);
      max-width: 100%;
      height: auto;
      max-height: none;
      margin: 0 auto;
      transform: none;
  }
  .page-solution .solution-titre-section {
      margin-right: auto;
      margin-left: auto;
      text-align: center;
  }
  .page-solution .solution-liste-simple,
  .page-solution .solution-liste-coches {
      width: min(100%, 560px);
      max-width: 560px;
      margin-right: auto;
      margin-left: auto;
      text-align: left;
  }
  .page-solution .solution-deux-listes {
      justify-content: center;
      width: min(100%, 560px);
      max-width: 560px;
      margin-right: auto;
      margin-left: auto;
      gap: 20px;
      text-align: left;
  }
  .page-solution .solution-scroll {
      display: none !important;
  }
  .page-solution .solution-retour-haut {
      right: 18px;
      bottom: 12px;
      transform: scale(0.85);
      transform-origin: center bottom;
  }
  .page-solution .solution-bouton-bleu {
      margin-right: auto;
      margin-left: auto;
  }
  .solution-vignettes {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px;
      width: min(100% - 40px, 720px);
      margin-top: 18px;
  }
  .solution-vignette img {
      height: 92px;
  }
  .solution-vignette span {
      margin-top: 12px;
      font-size: 18px;
  }
  .solution-separateur-fonctions {
      width: min(100% - 40px, 680px);
      height: auto;
      margin: 28px auto;
      border-top: 0;
      font-size: 18px;
      line-height: 1.25;
  }
  .solution-separateur-fonctions::after {
      top: 0;
      display: block;
      padding: 0;
  }
  .solution-chiffres-conteneur {
      flex-wrap: wrap;
      justify-content: center;
      width: min(100% - 40px, 720px);
      max-width: 720px;
      padding-left: 0;
      gap: 18px;
  }
  .solution-bulle {
      flex: 0 1 calc(50% - 18px);
      width: auto;
      max-width: 240px;
      height: auto;
      min-height: 175px;
      margin: 0;
  }
  .solution-temoignages-conteneur {
      width: min(100% - 40px, 760px);
      max-width: 760px;
      transform: none;
  }
  .solution-titre-temoignages {
      font-size: 30px;
      text-align: center;
  }
  .solution-cartes {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
  }
  .solution-carte {
      min-height: 0;
  }
  .solution-popup-fermer {
      top: 105px;
      left: 24px;
  }
  .solution-popup-video,
  .solution-popup-image {
      width: min(92vw, 820px);
  }
}
@media (max-width: 767px) {
  .page-solution {
      margin-top: -10px;
  }
  .page-solution .solution-section,
  .page-solution .solution-section-appli,
  .page-solution .solution-chiffres,
  .page-solution .solution-temoignages,
  .page-solution .solution-cta-seule {
      padding: 34px 0;
  }
  .page-solution .solution-conteneur {
      width: calc(100% - 24px);
      gap: 24px;
  }
  .page-solution .solution-texte {
      max-width: 560px;
  }
  .page-solution .solution-titre-section,
  .page-solution .solution-titre-temoignages {
      font-size: 24px;
  }
  .page-solution .solution-liste-simple,
  .page-solution .solution-liste-coches {
      width: 100%;
      max-width: 500px;
      font-size: 16px;
      line-height: 1.5;
  }
  .page-solution .solution-deux-listes {
      flex-direction: column;
      width: 100%;
      max-width: 500px;
      gap: 0;
  }
  .page-solution .solution-deux-listes > .solution-liste-simple {
      flex: 0 0 auto;
      width: 100%;
      max-width: 100%;
  }
  .page-solution .solution-liste-coches li {
      padding-left: 42px;
  }
  .page-solution .solution-bouton-bleu,
  .solution-cta-seule .bouton-action-rose {
      width: 220px;
      max-width: 100%;
      font-size: 16px;
  }
  .solution-vignettes {
      grid-template-columns: 1fr;
      gap: 24px;
      width: calc(100% - 24px);
      max-width: 360px;
  }
  .solution-vignette img {
      height: 105px;
  }
  .solution-vignette span {
      font-size: 20px;
  }
  .solution-separateur-fonctions {
      width: calc(100% - 24px);
      margin: 22px auto;
      font-size: 16px;
  }
  .solution-chiffres-conteneur {
      width: calc(100% - 24px);
      gap: 16px;
  }
  .solution-bulle {
      flex-basis: 100%;
      max-width: 270px;
      min-height: 145px;
  }
  .solution-cartes {
      grid-template-columns: 1fr;
  }
  .solution-popup-fermer {
      top: 95px;
      left: 16px;
  }
  .page-solution .solution-media,
  .page-solution .solution-media-capture,
  .page-solution .solution-media-appli {
      overflow: visible;
  }
  .page-solution .solution-media img,
  .page-solution .solution-media-capture img,
  .page-solution .solution-media-appli img {
      height: auto;
      max-width: 100%;
      object-fit: contain;
  }
  .solution-popup-fermer img {
      width: 36px;
      height: 36px;
  }
}
@media (max-width: 480px) {
  .page-solution .solution-titre-section,
  .page-solution .solution-titre-temoignages {
      font-size: 22px;
  }
  .page-solution .solution-liste-simple,
  .page-solution .solution-liste-coches,
  .page-solution .solution-deux-listes {
      max-width: 330px;
  }
  .solution-bulle strong {
      font-size: 38px;
  }
  .solution-bulle span,
  .solution-bulle a {
      font-size: 17px;
  }
  .solution-popup-fermer {
      top: 88px;
      left: 12px;
  }
  .solution-popup-fermer img {
      width: 32px;
      height: 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .solution-apparition,
  .solution-apparition[data-apparition] {
      opacity: 1;
      transform: none;
      transition: none;
  }
  .solution-roulette,
  .solution-fleche,
  .page-solution .bouton-action-rose {
      animation: none !important;
  }
  .solution-retour-haut .solution-fleche {
      opacity: 1;
      transform: rotate(-135deg);
  }
  .solution-retour-haut.est-visible {
      opacity: 1;
      pointer-events: auto;
  }
}

/* ==========================================================================
   Responsive HarMobil
   ========================================================================== */

@media (max-width: 1400px) and (min-width: 951px) {
  .harmobil-section-accueil .solution-conteneur {
      width: 96%;
      transform: translateX(30px);
  }
  .harmobil-intro {
      margin-left: 34px;
  }
  .harmobil-media-accueil img {
      margin-left: 10px;
  }
  .harmobil-section-outils.solution-section {
      min-height: 580px;
      margin-top: -22px;
  }
  .harmobil-section-outils .solution-conteneur {
      width: 80%;
      max-width: 1240px;
      transform: translateY(-8px);
  }
  .harmobil-section-outils .solution-media-capture img {
      width: clamp(1280px, 96vw, 1380px);
      transform: translateX(4px);
  }
  .harmobil-section-examens.solution-section {
      min-height: 585px;
  }
  .harmobil-section-examens .solution-conteneur {
      width: 68%;
      max-width: 1080px;
      transform: translateY(30px);
  }
  .harmobil-section-examens .solution-texte-droite {
      transform: translate(0, -32px);
  }
  .harmobil-section-examens .solution-liste-simple {
      width: 490px;
      max-width: 490px;
      margin-left: 16px;
  }
  .harmobil-section-examens .harmobil-media-examens img {
      margin-left: 170px;
  }
  .harmobil-section-moniteur .solution-texte-gauche {
      flex-basis: 43.5%;
      max-width: 43.5%;
      padding-left: calc(5% + 46px);
      transform: none;
  }
  .harmobil-section-moniteur .solution-media-appli img {
      width: clamp(398px, 29vw, 464px);
      margin-top: 0;
      transform: translateX(26px);
  }
  .harmobil-section-sarool .solution-conteneur {
      transform: translateY(8px);
  }
  .harmobil-section-sarool .solution-media-appli img {
      width: clamp(202px, 14.3vw, 224px);
      transform: translateX(24px);
  }
  .harmobil-section-sarool .solution-texte-droite {
      transform: translateY(26px);
  }
  .harmobil-section-aide .solution-conteneur {
      width: 78%;
      transform: translateY(-18px);
  }
  .harmobil-section-aide .solution-texte-gauche {
      flex-basis: 47.3%;
      max-width: 47.3%;
      padding-left: calc(5% + 30px);
      transform: translateY(40px);
  }
  .harmobil-section-aide .solution-liste-coches {
      max-width: 448px;
  }
  .harmobil-equipe {
      grid-template-columns: repeat(3, 155px);
      gap: 18px;
      transform: translate(-16px, 28px);
  }
  .harmobil-equipe img {
      width: 155px;
      height: 118px;
      border-radius: 15%;
  }
  .harmobil-media-accueil img {
      width: min(100%, clamp(520px, 48vw, 660px));
      margin-left: 0;
  }
  .harmobil-section-outils .solution-media-capture img {
      width: min(100%, 900px);
      margin-top: -22px;
      transform: none;
  }
  .harmobil-section-planning .solution-media-capture img,
  .harmobil-section-comptes-eleves .solution-media-capture img {
      width: min(100%, 620px);
      transform: none;
  }
  .harmobil-section-inscription .harmobil-media-inscription img {
      width: min(100%, 680px);
      margin-left: 0;
      transform: translateY(-4%);
  }
  .harmobil-section-moniteur .solution-media-appli img,
  .harmobil-section-sarool .solution-media-appli img {
      max-width: 100%;
  }
}
@media (min-width: 1281px) and (max-width: 1400px) {
  .harmobil-section-examens .harmobil-media-examens img {
      width: clamp(217px, 14.8vw, 242px);
      transform: translateY(4%);
  }
  .harmobil-section-comptes-eleves.solution-section {
      min-height: 625px;
  }
  .harmobil-section-comptes-eleves .solution-conteneur {
      transform: translate(-10px, -130px);
  }
  .harmobil-section-comptes-eleves .solution-texte-gauche {
      flex-basis: 44%;
      max-width: 44%;
      padding-left: calc(5% + 24px);
  }
  .harmobil-section-comptes-eleves .solution-liste-simple {
      width: 485px;
      max-width: 485px;
  }
  .harmobil-section-comptes-eleves .solution-deux-listes {
      width: 380px;
      max-width: 380px;
  }
  .harmobil-section-comptes-eleves .solution-media-capture img {
      width: clamp(640px, 46vw, 695px);
      margin-top: -10px;
      transform: translateX(4px);
  }
}
@media (min-width: 951px) and (max-width: 1280px) {
  .harmobil-section-comptes-eleves.solution-section {
      min-height: 580px;
  }
  .harmobil-section-comptes-eleves .solution-conteneur {
      transform: translate(-10px, -116px);
  }
  .harmobil-section-comptes-eleves .solution-texte-gauche {
      flex-basis: 44%;
      max-width: 44%;
      padding-left: calc(5% + 24px);
  }
  .harmobil-section-comptes-eleves .solution-liste-simple {
      width: 470px;
      max-width: 470px;
  }
  .harmobil-section-comptes-eleves .solution-deux-listes {
      width: 370px;
      max-width: 370px;
  }
  .harmobil-section-comptes-eleves .solution-media-capture img {
      width: clamp(595px, 50.5vw, 665px);
      margin-top: -6px;
      transform: translateX(-8px);
  }
}
@media (max-width: 1180px) and (min-width: 951px) {
  .harmobil-section-examens .solution-liste-simple {
      width: 460px;
      max-width: 460px;
  }
  .harmobil-section-examens .harmobil-media-examens img {
      margin-left: 135px;
  }
}
@media (max-width: 1100px) and (min-width: 951px) {
  .harmobil-section-accueil .solution-conteneur,
  .harmobil-section-gestion .solution-conteneur,
  .harmobil-section-planning .solution-conteneur,
  .harmobil-section-inscription .solution-conteneur,
  .harmobil-section-outils .solution-conteneur {
      width: calc(100% - 40px);
  }
  .harmobil-section-outils .solution-media-capture img {
      width: clamp(1120px, 110vw, 1260px);
      transform: translateX(-10px);
  }
  .harmobil-section-moniteur .solution-texte-gauche {
      flex-basis: 43.5%;
      max-width: 43.5%;
      padding-left: calc(5% + 24px);
      transform: none;
  }
  .harmobil-section-moniteur .solution-media-appli img {
      width: clamp(372px, 32vw, 418px);
      margin-top: 0;
      transform: translateX(34px);
  }
  .harmobil-section-sarool .solution-media-appli img {
      width: clamp(190px, 17vw, 212px);
      transform: translateX(12px);
  }
  .harmobil-section-sarool .solution-texte-droite {
      transform: translateY(22px);
  }
  .harmobil-section-aide .solution-conteneur {
      width: calc(100% - 90px);
      transform: translateY(-12px);
  }
  .harmobil-section-aide .solution-texte-gauche {
      flex-basis: 47.3%;
      max-width: 47.3%;
      padding-left: 42px;
      transform: translateY(32px);
  }
  .harmobil-section-aide .solution-liste-coches {
      max-width: 418px;
  }
  .harmobil-equipe {
      grid-template-columns: repeat(3, 136px);
      gap: 16px;
      transform: translate(-6px, 26px);
  }
  .harmobil-equipe img {
      width: 136px;
      height: 103px;
      border-radius: 10px;
  }
}
@media (max-width: 950px) {
  .page-harmobil .harmobil-intro {
      order: 1;
      width: 100%;
      max-width: 640px;
      margin-right: auto;
      margin-left: auto;
      padding: 0;
      text-align: center;
      transform: none;
  }
  .harmobil-section-accueil {
      padding-top: 42px;
  }
  .harmobil-section-accueil .solution-conteneur {
      align-items: center;
      gap: 28px;
  }
  .harmobil-logo img {
      width: min(84%, 460px);
      max-width: 460px;
      margin: 0 auto 24px;
  }
  .harmobil-accroche,
  .harmobil-texte-intro {
      max-width: 100%;
      margin-right: auto;
      margin-left: auto;
      text-align: center;
  }
  .harmobil-accroche {
      font-size: 30px;
      line-height: 1.25;
  }
  .harmobil-actions {
      justify-content: center;
      gap: 34px;
      margin: 24px auto 0;
  }
  .harmobil-media-accueil img {
      width: min(100%, 620px);
  }
  .harmobil-media-gestion img {
      width: min(100%, 430px);
  }
  .harmobil-section-planning .solution-media-capture img,
  .harmobil-section-inscription .harmobil-media-inscription img,
  .harmobil-section-comptes-eleves .solution-media-capture img,
  .harmobil-section-outils .solution-media-capture img {
      width: min(100%, 640px);
  }
  .harmobil-section-moniteur .solution-media-appli img {
      width: min(82%, 480px);
  }
  .harmobil-section-sarool .solution-media-appli img {
      width: min(52%, 240px);
  }
  .harmobil-section-examens .harmobil-media-examens img {
      width: min(48%, 260px);
  }
  .harmobil-section-moniteur .solution-liste-coches,
  .harmobil-section-sarool .solution-liste-coches,
  .harmobil-section-aide .solution-liste-coches {
      max-width: 560px;
      padding-left: 16px;
  }
  .harmobil-section-planning .bouton-action-rose,
  .harmobil-section-examens .bouton-action-rose {
      margin-right: auto;
      margin-left: auto;
  }
  .page-harmobil .solution-cache-mobile:not(.solution-scroll),
  .page-harmobil .solution-chiffres-conteneur > .solution-cache-mobile,
  .page-harmobil .harmobil-passerelles.solution-cache-mobile {
      display: block;
  }
  .page-harmobil .solution-separateur-simple.solution-cache-mobile {
      display: block;
      width: calc(100% - 40px);
      margin: 28px auto;
  }
  .harmobil-passerelles {
      width: 100%;
      height: 118px;
      margin: 22px auto 34px;
  }
  .harmobil-passerelles::before,
  .harmobil-passerelles::after {
      width: 70px;
      height: 100px;
  }
  .harmobil-passerelles-piste {
      display: flex;
      width: calc(250px * 17);
      animation: harmobil-passerelles-defilement 30s linear infinite;
  }
  .harmobil-passerelle,
  .harmobil-passerelle img {
      width: 250px;
      height: 100px;
  }
  .page-harmobil .solution-media,
  .page-harmobil .solution-media-gauche,
  .page-harmobil .solution-media-droite,
  .page-harmobil .solution-media-capture,
  .page-harmobil .solution-media-appli {
      justify-content: center;
      overflow: visible;
  }
  .page-harmobil .harmobil-media-accueil img,
  .page-harmobil .harmobil-media-gestion img,
  .page-harmobil .harmobil-media-inscription img,
  .page-harmobil .harmobil-media-examens img,
  .page-harmobil .solution-media-capture img,
  .page-harmobil .solution-media-appli img {
      display: block;
      max-width: 100%;
      height: auto;
      margin-right: auto;
      margin-left: auto;
      transform: none;
  }
  .harmobil-equipe {
    justify-content: center;
    margin-right: auto;
    margin-left: auto;
    transform: none;
  }
}
@media (max-width: 1120px) {
  .harmobil-campagne {
      width: calc(100% - 40px);
      max-width: 620px;
      margin-right: auto;
      margin-left: auto;
  }
  .harmobil-campagne span,
  .harmobil-campagne-images {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
      margin-right: auto;
      margin-left: auto;
      text-align: center;
  }
  .harmobil-campagne-image {
      display: block;
      flex: 0 1 auto;
      width: auto;
      max-width: min(100%, 520px);
      height: auto;
      max-height: none;
      margin-right: auto;
      margin-left: auto;
      object-fit: contain;
  }
  .harmobil-campagne-image-pub1 {
      order: 1;
      max-width: min(100%, 510px);
  }
  .harmobil-campagne-image-pub2 {
      order: 2;
      max-width: min(100%, 520px);
      align-self: center;
      transform: translateX(80px);
  }
}
@media (max-width: 767px) {
  .page-harmobil .harmobil-intro {
      max-width: 560px;
  }
  .harmobil-accroche {
      font-size: 26px;
  }
  .harmobil-section-accueil .bouton-action-rose,
  .harmobil-section-planning .bouton-action-rose,
  .harmobil-section-examens .bouton-action-rose {
      width: 220px;
      max-width: 100%;
      font-size: 16px;
  }
  .harmobil-actions {
      gap: 24px;
  }
  .harmobil-bouton-video {
      width: 54px;
  }
  .page-harmobil .harmobil-media-accueil,
  .page-harmobil .harmobil-media-gestion,
  .page-harmobil .harmobil-media-inscription,
  .page-harmobil .harmobil-media-examens {
      overflow: visible;
  }
  .page-harmobil .harmobil-media-accueil img,
  .page-harmobil .harmobil-media-gestion img,
  .page-harmobil .harmobil-media-inscription img,
  .page-harmobil .harmobil-media-examens img {
      height: auto;
      max-width: 100%;
      object-fit: contain;
  }
  .harmobil-equipe {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      width: min(100%, 420px);
      margin: 0 auto;
      transform: none;
  }
  .harmobil-equipe img {
      width: 100%;
      max-width: 180px;
      height: auto;
      margin: 0 auto;
      object-fit: contain;
  }
  .harmobil-campagne {
      width: calc(100% - 24px);
      margin: 28px auto 52px;
  }
  .harmobil-campagne span,
  .harmobil-campagne-images {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
  }
  .harmobil-campagne img,
  .harmobil-campagne img:nth-child(1),
  .harmobil-campagne img:nth-child(2),
  .harmobil-campagne-image {
      display: block;
      flex: 0 1 auto;
      width: auto;
      max-width: min(100%, 420px);
      height: auto;
      max-height: none;
      margin-right: auto;
      margin-left: auto;
      object-fit: contain;
  }
  .harmobil-campagne-image-pub1 {
      max-width: min(100%, 410px);
  }
  .harmobil-campagne-image-pub2 {
      max-width: min(100%, 420px);
      align-self: center;
      transform: translateX(60px);
  }
  .harmobil-passerelles {
      height: 106px;
      margin: 18px auto 30px;
  }
  .harmobil-passerelles::before,
  .harmobil-passerelles::after {
      width: 44px;
      height: 90px;
  }
  .harmobil-passerelle,
  .harmobil-passerelle img {
      width: 210px;
      height: 90px;
  }
  .harmobil-passerelles-piste {
      width: calc(210px * 17);
  }
}
@media (max-width: 480px) {
  .harmobil-accroche {
      font-size: 23px;
      line-height: 1.24;
  }
  .harmobil-logo img {
      width: 90%;
  }
  .harmobil-actions {
      flex-direction: column;
      gap: 16px;
  }
  .harmobil-media-accueil img,
  .harmobil-media-gestion img,
  .harmobil-section-planning .solution-media-capture img,
  .harmobil-section-inscription .harmobil-media-inscription img,
  .harmobil-section-comptes-eleves .solution-media-capture img,
  .harmobil-section-outils .solution-media-capture img {
      width: min(100%, 420px);
      max-height: none;
  }
  .harmobil-section-moniteur .solution-media-appli img {
      width: min(90%, 360px);
  }
  .harmobil-section-sarool .solution-media-appli img {
      width: min(62%, 210px);
  }
  .harmobil-section-examens .harmobil-media-examens img {
      width: min(58%, 220px);
  }
  .harmobil-equipe {
      width: min(100%, 320px);
      gap: 10px;
  }
  .harmobil-equipe img {
      max-width: 150px;
  }
  .harmobil-campagne img,
  .harmobil-campagne img:nth-child(1),
  .harmobil-campagne img:nth-child(2),
  .harmobil-campagne-image {
      max-width: min(100%, 360px);
  }
  .harmobil-campagne-image-pub1 {
      max-width: min(100%, 350px);
  }
  .harmobil-campagne-image-pub2 {
      max-width: min(100%, 360px);
      align-self: center;
  }
  .page-harmobil .solution-chiffres-conteneur > .solution-cache-mobile {
      max-width: 270px;
  }
  .harmobil-passerelles {
      height: 96px;
  }
  .harmobil-passerelles::before,
  .harmobil-passerelles::after {
      width: 28px;
      height: 82px;
  }
  .harmobil-passerelle,
  .harmobil-passerelle img {
      width: 180px;
      height: 82px;
  }
  .harmobil-passerelles-piste {
      width: calc(180px * 17);
  }
}
@media (prefers-reduced-motion: reduce) {
  .harmobil-passerelles-piste {
      animation: none !important;
  }
}