html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
}

.imgLogo {
  width: 200px;
  display: block;
  margin: auto;
  padding-top: 40px;
}

.conxInscr {
  display: block;
  margin: auto;
  padding-top: 40px;
}

.buttonBoutique {
  width: 230px;
  display: block;
  margin: auto;
  /*padding: 0 0 30px 0;*/
  height: 70px;
  border-radius: 20px;
  background-color: white;
  text-align: center;
}

p {
  margin: 0;
}

.bold {
  font-weight: 700;
}

.underline {
  text-decoration: underline;
}

/*Main Menu*/
#mainMenu {
  background-color: #222831;
  color: #eeeeee;
}

.phoneNumber {
  text-align: center;
  padding: 0 0 20px 0;
}

.tile {
  position: relative;
  width: 100%;
  padding-top: 100%;
  margin-bottom: 30px;
  background-color: #00adb5;
}

.tile:hover {
  left: 5px;
  bottom: 5px;
  box-shadow: rgba(255, 255, 255, 0.5) -5px 5px 3px;
}

.tile i {
  position: absolute;
  display: block;
  font-size: 5vw;
  text-align: center;
  padding: 30px 0 0 0;
  top: 30%;
  bottom: 0;
  left: 0;
  right: 0;
}

.menuTitle {
  text-align: center;
  font-size: 1.7vw;
  padding: 70px 0 0 0;
  word-wrap: break-word;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.mainMenuContainer {
  padding-top: 60px;
  width: 70%;
}

.mainLink {
  color: #eeeeee;
}

.mainLink:hover {
  color: #eeeeee;
}

/* Informatique section */

#informatique {
  background-color: #eeeeee;
}

#informatique h1 {
  text-align: center;
  padding: 40px 0 40px 0;
  font-weight: 700;
}

#informatique h3 {
  font-weight: 700;
}

#informatique i {
  font-size: 4rem;
  display: block;
}

.informatiqueContainer {
  width: 70%;
}

.servicesIco {
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 2rem;
  margin-left: 2rem;
  /* border: 1px solid black;
  border-radius: 100%; */
}

.serviceList {
  margin: 0;
}

.wrap {
  display: flex;
  padding: 1rem 1rem 1rem 1rem;
  margin-bottom: 2rem;
  height: 90%;
  /* border: 3px solid; */
}

#informatique p {
  line-height: 2rem;
}

#informatique ul {
  padding-left: 15px;
  list-style: square;
}

/* Sauvegardes section */
#sauvegarde {
  color: #eeeeee;
  text-align: center;
  background-color: #393e46;
}

.sauvegardeContainer {
  width: 70%;
}

#sauvegarde h1 {
  padding: 40px 0 40px 0;
  font-weight: 600;
}

#sauvegarde h2 {
  padding: 0 0 20px 0;
}

#sauvegarde h3 {
  padding: 40px 0 20px 0;
}

#sauvegarde p {
  padding: 20px 0 20px 0;
}

.sauvegardeList {
  padding: 0 15% 0 15%;
}

.sauvegardeList li {
  margin: 0 0 30px 0;
  list-style: none;
}

#sauvegarde .card {
  background-color: #393e46;
  margin-bottom: 30px;
}

#sauvegarde .card-body {
  background-color: #eeeeee;
}

#sauvegarde h5 {
  color: #393e46;
  font-size: 1vw;
}

#sauvegarde btn {
  background-color: #393e46;
}

/* Contact section */
#contact {
  background-color: #eeeeee;
  padding-bottom: 50px;
}
/*
#contact h1 {
  font-weight: 600;
  padding: 40px 0 40px 0;
}

#contact .header {
  text-align: center;
  font-size: 46px;
}

#contact .form {
  text-align: center;
  margin: auto;
  padding: 0 100px 0 0;
}

#contact .form input,
textarea,
select {
  width: 100%;
  margin: 20px 0;
  background: rgba(0, 0, 0, 0);
  border: none;
  border-bottom: 1px solid #222831;
}

#contact select:invalid {
  color: #6f776f;
}

#contact .form textarea {
  resize: none;
}

#contact .form #captchaInput {
  width: 60px;
}

.captchaWarning {
  font-weight: 600;
}

#contact i {
  font-size: 3rem;
}

#contact
h2 {
  text-align: center;
}

#contact .row {
  padding: 0 0 40px 0;
}
*/

/* MOBILE DEVICES */
@media only screen and (max-width: 767px) {
  .mainMenuContainer {
    /* Helps the tiles to not look too squished */
    width: 100%;
  }

  .tile i {
    font-size: 15vw;
  }

  .menuTitle {
    font-size: 4vw;
  }

  /* Informatique Section */
  .informatiqueContainer {
    width: 100%;
  }

  div .wrap {
    display: inline;
  }

  .wrap i,
  h3,
  p,
  li {
    text-align: center;
    list-style: none;
  }

  .wrap p {
    font-size: 3.4vw;
  }

  /* sauvegarde Section */
  .sauvegardeContainer {
    width: 100%;
  }

  .sauvegardeList {
    padding: 0 5% 0 5%;
  }

  #sauvegarde h5 {
    font-size: 4vw;
  }

  #sauvegarde .btn {
    font-size: 4vw;
  }

  #contact .form {
    padding: 0 0 100px 0;
  }
}


/*-----------------------------------
* contact
*------------------------------------
*/

    .contact-info {
      background-color: #ffffff;
      padding: 30px;
      border-radius: 6px;
      box-shadow: 0 0 10px rgba(0,0,0,0.05);
      height: 100%;
    }
    .btn-message {
      margin-top: 20px;
    }
    .map-container {
      border-radius: 6px;
      overflow: hidden;
      height: 100%;
      min-height: 400px;
      box-shadow: 0 0 10px rgba(0,0,0,0.05);
    }
    
/*-----------------------------------
* Bannière de changement d'adresse
*------------------------------------
*/
.banner-fixed {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: #1f2430;
  width: 100%;
  padding: 10px 0;
  border-bottom: 2px solid #ffffff30;
}

.banner-custom {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 10px 20px;
  background-color: #1f2430;
  font-weight: normal;
}

.banner-link {
  color: white;
  text-decoration: none;
  font-weight: normal;
}

.banner-link:hover {
  text-decoration: underline;
}

/* Animation slide-in */
.animated-slide {
  animation: slideDown 0.6s ease-out;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Clignotement texte en fondu */
.badge-blink {
  animation: blinkText 1.4s infinite ease-in-out;
}

@keyframes blinkText {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}