body{
  background:#eee9df;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* HEADER */

body > header{
  max-width:1300px;
  height:78px;
  padding:0 5%;
  background:linear-gradient(90deg,#596a39,#35451f);
}

body > header .brand{
  font-size:32px;
}

body > header nav{
  gap:25px;
}

body > header nav a{
  font-size:10px;
}

body > header .rdv{
  padding:11px 20px;
  background:linear-gradient(135deg,#e2c163,#bd8e27);
}

/* HERO */

.hero{
  min-height:440px;
  padding:80px 10%;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  background:
    radial-gradient(circle at 78% 22%,rgba(245,212,117,.60),transparent 21%),
    radial-gradient(circle at 17% 80%,rgba(104,126,72,.18),transparent 27%),
    linear-gradient(120deg,#fffaf0,#eee1bd,#80905d);
}

.hero .eyebrow{
  color:#906d29;
  letter-spacing:3px;
}

.hero h1{
  margin:13px 0 18px;

  color:#513b20;

  font:
    600 72px/.9
    'Cormorant Garamond',
    Georgia,
    serif;
}

.hero .lead{
  max-width:720px;

  color:#493d30;

  font:
    italic 25px/1.4
    'Cormorant Garamond',
    Georgia,
    serif;
}

/* CONTENU */

.content{
  max-width:1300px;
  padding:75px 9% 85px;

  background:#fff;
}

/* TARIF */

.price{
  margin-bottom:50px;
}

.price strong{
  color:#bf9134;

  font:
    600 82px/.9
    'Cormorant Garamond',
    Georgia,
    serif;
}

.price span{
  margin-top:10px;
  display:block;

  color:#81652c;

  letter-spacing:2.5px;
}

/* INTRODUCTION */

.content > .big{
  max-width:780px;
  margin:0 auto 45px;

  text-align:center;

  color:#493d30;

  font:
    italic 25px/1.45
    'Cormorant Garamond',
    Georgia,
    serif;
}

/* PASSÉ PRESENT AVENIR */

.grid3{
  gap:18px;
  margin:40px auto;

  max-width:1050px;
}

.card{
  min-height:225px;
  padding:30px;

  background:#fffaf1;

  border:1px solid rgba(187,156,91,.28);

  box-shadow:
    0 10px 30px
    rgba(72,54,26,.045);
}

.card .num{
  color:#bd8d2f;
}

.card h3{
  margin:8px 0 12px;

  color:#49381f;

  font:
    600 30px
    'Cormorant Garamond',
    Georgia,
    serif;
}

.card p{
  color:#625645;

  font-size:11px;
  line-height:1.75;
}

/* DURÉE VARIABLE */

.quote{
  max-width:850px;
  margin:50px auto;

  padding:30px 35px;

  background:
    linear-gradient(
      120deg,
      #e6ecd7,
      #fff9ed
    );

  border-left:4px solid #c89a37;

  color:#493d30;

  font:
    italic 21px/1.55
    'Cormorant Garamond',
    Georgia,
    serif;
}

/* TITRE DEUX POSSIBILITES */

.content h2{
  margin:65px auto 30px;

  text-align:center;

  color:#323879;

  font:
    600 47px/.98
    'Cormorant Garamond',
    Georgia,
    serif;
}

/* TELEPHONE */

.phone{
  margin:15px 0 5px;

  color:#513b20;

  font:
    600 48px
    'Cormorant Garamond',
    Georgia,
    serif;
}

/* BOUTONS */

.button{
  padding:14px 24px;

  background:
    linear-gradient(
      120deg,
      #89611f,
      #d3a53e
    );

  box-shadow:
    0 8px 22px
    rgba(82,57,18,.15);
}

/* LIBRE ARBITRE */

.nature{
  max-width:1300px;

  padding:85px 10%;

  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(236,203,111,.15),
      transparent 25%
    ),
    linear-gradient(
      135deg,
      #657748,
      #35452a
    );
}

.nature h2{
  max-width:780px;

  margin:12px auto 22px;

  color:#fff;

  font-size:48px;
}

.nature p{
  max-width:750px;

  color:rgba(255,255,255,.9);

  line-height:1.8;
}

/* FOOTER */

body > footer{
  max-width:1300px;
}

/* MOBILE */

@media(max-width:760px){

  body > header{
    height:68px;
  }

  .hero{
    min-height:380px;
    padding:60px 7%;
  }

  .hero h1{
    font-size:54px;
  }

  .hero .lead{
    font-size:22px;
  }

  .content{
    padding:55px 7%;
  }

  .price strong{
    font-size:68px;
  }

  .content > .big{
    font-size:22px;
  }

  .grid3{
    grid-template-columns:1fr;
  }

  .card{
    min-height:auto;
  }

  .content h2,
  .nature h2{
    font-size:39px;
  }

  .phone{
    font-size:37px;
  }

  .nature{
    padding:65px 7%;
  }
}

/* ==========================================
   CONSULTATIONS — HERO PHOTO HD
   ========================================== */

.hero{
  position:relative !important;
  overflow:hidden !important;

  min-height:480px !important;

  align-items:flex-start !important;
  text-align:left !important;

  padding-left:10% !important;
  padding-right:10% !important;

  background-image:
    linear-gradient(
      90deg,
      rgba(255,250,239,.98) 0%,
      rgba(255,250,239,.92) 28%,
      rgba(255,250,239,.55) 47%,
      rgba(255,250,239,.08) 68%,
      rgba(255,250,239,0) 100%
    ),
    url("../assets/optimized/consultations-hero-background-HD.webp") !important;

  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

/* Retire les anciens effets graphiques */

.hero::before,
.hero::after{
  display:none !important;
}

/* Texte HTML au-dessus de la photo */

.hero > *{
  position:relative !important;
  z-index:2 !important;

  max-width:620px !important;
}

.hero .eyebrow{
  color:#987025 !important;
}

.hero h1{
  color:#50391f !important;

  font-size:70px !important;
}

.hero .lead{
  max-width:620px !important;

  color:#493d30 !important;

  font-size:25px !important;
  line-height:1.4 !important;
}

/* Grand écran */

@media(min-width:1200px){

  .hero{
    min-height:500px !important;
    background-position:center 50% !important;
  }

}

/* Mobile */

@media(max-width:760px){

  .hero{
    min-height:430px !important;

    padding-left:7% !important;
    padding-right:7% !important;

    background-position:65% center !important;

    background-image:
      linear-gradient(
        90deg,
        rgba(255,250,239,.98) 0%,
        rgba(255,250,239,.91) 58%,
        rgba(255,250,239,.25) 100%
      ),
      url("../assets/optimized/consultations-hero-background-HD.webp") !important;
  }

  .hero h1{
    font-size:52px !important;
  }

  .hero .lead{
    font-size:21px !important;
  }
}


/* ===== LISIBILITE HERO : TEXTE TOUJOURS SUR FOND CREME ===== */

.hero{
  background-position:center center !important;
}

.hero::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:1 !important;

  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:58% !important;

  background:
    linear-gradient(
      90deg,
      rgba(255,250,239,1) 0%,
      rgba(255,250,239,.99) 72%,
      rgba(255,250,239,.94) 86%,
      rgba(255,250,239,0) 100%
    ) !important;

  pointer-events:none !important;
}

.hero > *{
  position:relative !important;
  z-index:2 !important;

  /* Le texte ne peut plus empiéter sur la photographie */
  max-width:47% !important;
}

.hero .eyebrow,
.hero h1,
.hero .lead,
.hero p{
  position:relative !important;
  z-index:3 !important;
}

/* MOBILE */
@media(max-width:760px){

  .hero::before{
    width:82% !important;
  }

  .hero > *{
    max-width:72% !important;
  }
}