@charset "UTF-8";
@import 'fonts.css';

/*** Vars ***/
:root {
  --col-noir: #333333;
  --col-bleu: #17A9AC;
  --col-blanc: #FFFFFF;
  --rgb-noir: 51, 51, 51;
  --rgb-bleu: 23, 169, 172;
  --rgb-blanc: 255, 255, 255;

  --navbar-height: 80px;
  --sticky-height: 80px;

  --break-point-1500: 1420px;

  --width-container: 1420px;

  --main-padding:  60px;
}
/*** Animations ***/
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0px, 50px, 0);
    transform: translate3d(0px, 50px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0px, 50px, 0);
    transform: translate3d(0px, 50px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes blurOut {
     0%       { filter:blur(10px); -webkit-filter:blur(10px);}
     100%     { filter:blur(0px); -webkit-filter:blur(0px);}
}
@-webkit-keyframes blurOut {
     0%       { filter:blur(10px); -webkit-filter:blur(10px);}
     100%     { filter:blur(0px); -webkit-filter:blur(0px);}
}
.blurOut {
  animation-name: blurOut;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: blurOut;
  -webkit-animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
}

/*** Règles ***/
html body {
	font-family:"Poppins", Arial,sans-serif;
	font-size:20px;
  font-weight: 600;
  color: var(--col-blanc);
  background-color: var(--col-noir);
  height: 100dvh;
  min-height: 600px;
}
.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}
* {
  -webkit-tap-highlight-color: transparent;
  word-break: keep-all !important;
  -webkit-hyphens: manual !important;
  -moz-hyphens: manual !important;
  -ms-hyphens: manual !important;
  -o-hyphens: manual !important;
  hyphens: manual !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width:1500px) {
  .container {
    max-width:var(--break-point-1500);
  }
}
.hidden {
  visibility: hidden;
}
img,
svg {
  max-width:100%;
  height:auto;
}
img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

a, a:hover, a:active, a:focus, object, embed, input, textarea, select, img {
  outline: none !important;
  -moz-outline-style: none !important;
  outline-style: none !important;
}
a {
  transition: all 450ms ease;
}

a:active {
  background: none;
}
h1 {
  font-weight: 800;
  font-size: 54px;
  margin: 60px auto 60px 0;
  line-height: 1em;
}
body strong, body b, body mark {
  font-weight: 800;
}
body img {
  max-width: 100%;
  height: auto;
  width: auto;
}
.vertical-align-center {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;  
}
.vertical-align-top {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;  
}
.vertical-align-bottom {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;  
}
.cadre-photo {
  overflow: hidden;
  background: rgba(var(--rgb-noir), 0.05);
  width: 100%;
  position: relative;
  z-index: 1;
  height: 50dvh;
}
.cadre-photo figure {
  position: relative;
  margin: 0;
  height: 100%;
  width: 100%;
}
.cadre-photo img {
  mix-blend-mode: normal;
  object-fit: cover;
  object-position: center center;
  height: 100%;
  width: 100%;
}
.hidden {
  visibility: hidden;
}
.texte-grand {
  font-size: 48px;
  line-height: 54px;
  font-weight: 700;
}
.texte-petit {
  margin-top: 20px;
}
body .telephone {
  display: inline-block;
  background: var(--col-bleu);
  color: var(--col-blanc);
  border-radius: 50px;
  border: 0;
  transition: all 450ms ease;
  padding: 5px 40px 5px 40px;
  text-decoration: none;
  font-weight: 700;
  font-size: 36px;
  font-family: "Poppins", Arial, sans-serif;
  margin-top: 20px;
}
body .telephone:hover {
  background: var(--col-blanc);
  color: var(--col-bleu);
  border: 0;
}
body .mail {
  margin-top: 20px;
}
body .mail .link-mail {
  color: var(--col-bleu);
  font-size: 24px;
  font-weight: 700;
}
body .mail .link-mail:hover {
  text-decoration: underline;
}
header .banner {
  position: relative;
}
.main {
	text-align:center;
  overflow: hidden;
}
.section-interne {
  padding: var(--main-padding) 0;
}
.content-text {
  text-align: center;
}
@media only screen and (max-width: 1499px) {
}
@media only screen and (max-width: 1199px) {
  .texte-grand {
    font-size: 42px;
    line-height: 46px;
  }
  body .telephone {
    font-size: 32px;
  }
  body .mail .link-mail {
    font-size: 24px;
  }
}
@media only screen and (max-width: 991px) {
  html body {
    font-size:18px;
  }
  .texte-grand {
    font-size: 34px;
    line-height: 42px;
  }
  body .telephone {
    font-size: 26px;
    padding: 3px 30px 3px 30px;
  }
  body .mail .link-mail {
    font-size: 22px;
  }
}
@media only screen and (max-width: 767px) {
  html body {
    font-size:16px;
  }
  .texte-grand {
    font-size: 25px;
    line-height: 32px;
  }
  body .telephone {
    font-size: 22px;
    padding: 3px 24px 3px 24px;
  }
}
@media only screen and (max-width: 575px) {
}
@media only screen and (max-width: 499px) {
}
@media only screen and (max-width: 399px) {
}