/* ==========================================
   PAGE PRISCILLA — NATURE & HARMONIE HD
   ========================================== */

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;
  letter-spacing:.15px;
}

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

/* HERO */

.hero{
  position:relative;
  overflow:hidden;

  min-height:480px;
  padding:90px 10%;

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

  text-align:left;

  background:
    radial-gradient(
      circle at 80% 25%,
      rgba(246,214,119,.65),
      transparent 21%
    ),
    radial-gradient(
      circle at 87% 75%,
      rgba(94,119,64,.35),
      transparent 29%
    ),
    linear-gradient(
      120deg,
      #fffaf0 0%,
      #f0e4c5 52%,
      #7b8b58 100%
    );
}

.hero::after{
  content:"";
  position:absolute;
  right:-4%;
  bottom:-25%;
  width:42%;
  height:80%;
  border-radius:50% 0 0 0;
  background:
    radial-gradient(
      ellipse at center,
      rgba(71,91,47,.45),
      rgba(71,91,47,0) 68%
    );
}

.hero > *{
  position:relative;
  z-index:2;
  max-width:620px;
}

.hero .eyebrow{
  margin:0 0 17px;

  color:#9a752c;

  font-size:9px;
  font-weight:600;
  letter-spacing:3px;
}

.hero h1{
  margin:0 0 16px;

  color:#513b20;

  font:
    600 76px/.88
    'Cormorant Garamond',
    Georgia,
    serif;

  letter-spacing:-1px;
}

.hero .lead{
  margin:0 0 12px;

  color:#493d30;

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

.hero .button{
  margin-top:22px;
}

/* CONTENU */

.content{
  max-width:1300px;
  padding:80px 10%;

  background:#fff;
}

.content > .eyebrow{
  color:#9a752c;
}

.content h2{
  max-width:700px;

  margin:12px 0 28px;

  color:#323879;

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

  letter-spacing:-.5px;
}

.content h2 em{
  display:block;
  margin-top:4px;

  color:#bd8d2f;
}

.content .big{
  max-width:700px;

  color:#4c3d2d;

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

.content > p:not(.big):not(.eyebrow){
  max-width:760px;

  color:#5e5244;

  font-size:13px;
  line-height:1.85;
}

/* CITATION */

.quote{
  max-width:850px;

  margin:42px 0;
  padding:30px 34px;

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

  border-left:4px solid #c89a37;

  color:#493d30;

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

/* TROIS UNIVERS */

.grid3{
  gap:18px;
  margin-top:45px;
}

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

  background:#fffaf1;

  border:1px solid rgba(188,157,91,.28);

  box-shadow:
    0 10px 30px
    rgba(71,53,25,.045);
}

.card .num{
  font-size:28px;
}

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

  color:#49381f;

  font-size:29px;
}

.card p{
  color:#645746;
  font-size:11px;
  line-height:1.7;
}

/* 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:800px;

  margin:12px auto 22px;

  font-size:48px;
}

.nature p{
  max-width:760px;

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

  font-size:12px;
  line-height:1.8;
}

/* BOUTONS */

.button{
  padding:14px 24px;

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

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

/* FOOTER */

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

/* TABLETTE */

@media(max-width:850px){

  .hero{
    min-height:430px;
    padding:70px 8%;
  }

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

  .content{
    padding:65px 8%;
  }

  .content h2{
    font-size:44px;
  }
}

/* MOBILE */

@media(max-width:760px){

  body > header{
    height:68px;
  }

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

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

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

  .content{
    padding:55px 7%;
  }

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

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

  .card{
    min-height:auto;
  }

  .nature{
    padding:65px 7%;
  }

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

/* ==================================================
   HERO PRISCILLA — PHOTO HD DEFINITIVE
   ================================================== */

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

  min-height:480px !important;

  background-image:
    linear-gradient(
      90deg,
      rgba(255,250,239,.98) 0%,
      rgba(255,250,239,.93) 30%,
      rgba(255,250,239,.58) 48%,
      rgba(255,250,239,.12) 68%,
      rgba(255,250,239,0) 100%
    ),
    url("../assets/optimized/priscilla-hero-background-HD.webp") !important;

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

/* Texte toujours au-dessus de la photographie */

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

/* Suppression des anciens effets artificiels */

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

/* Texte parfaitement lisible */

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

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

.hero .lead{
  color:#493d30 !important;
  max-width:720px !important;
}

/* Grand écran */

@media(min-width:1200px){

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

}

/* Mobile */

@media(max-width:760px){

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

    background-position:62% center !important;

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

}

/* ==================================================
   PRISCILLA — CONTENU CENTRAL FINAL
   ================================================== */

.content{
  position:relative !important;
  padding-top:95px !important;
  padding-bottom:100px !important;
}

/* Petit accent décoratif */

.content::before{
  content:"✦";

  display:block;
  margin-bottom:22px;

  color:#c89a37;

  font-size:18px;
}

/* Grand titre */

.content h2{
  max-width:780px !important;

  margin-bottom:32px !important;

  font-size:54px !important;
  line-height:.98 !important;
}

.content h2 em{
  color:#bd8d2f !important;
}

/* Introduction */

.content .big{
  max-width:780px !important;

  margin-bottom:24px !important;

  font-size:27px !important;
  line-height:1.42 !important;
}

/* Texte courant */

.content > p:not(.big):not(.eyebrow){
  max-width:780px !important;

  font-size:14px !important;
  line-height:1.9 !important;
}

/* Citation */

.quote{
  max-width:900px !important;

  margin-top:50px !important;
  margin-bottom:55px !important;

  padding:34px 40px !important;

  border-left:5px solid #c89a37 !important;

  font-size:23px !important;

  box-shadow:
    0 10px 35px
    rgba(73,55,26,.045);
}

/* Cartes */

.grid3{
  max-width:1050px !important;

  margin-top:55px !important;

  gap:20px !important;
}

.card{
  min-height:245px !important;

  padding:34px !important;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.card .num{
  color:#c18f2e !important;

  font-size:31px !important;
}

.card h3{
  margin-top:13px !important;

  font-size:32px !important;
}

.card p{
  font-size:12px !important;
  line-height:1.75 !important;
}

@media (hover:hover){

  .card:hover{
    transform:translateY(-4px);

    box-shadow:
      0 16px 40px
      rgba(72,54,26,.09);
  }
}

/* Bloc final vert */

.nature{
  padding-top:95px !important;
  padding-bottom:95px !important;
}

.nature h2{
  max-width:850px !important;

  font-size:52px !important;
  line-height:1 !important;
}

.nature p{
  font-size:14px !important;
}

/* MOBILE */

@media(max-width:760px){

  .content{
    padding-top:60px !important;
    padding-bottom:65px !important;
  }

  .content h2{
    font-size:41px !important;
  }

  .content .big{
    font-size:23px !important;
  }

  .quote{
    padding:27px !important;

    font-size:20px !important;
  }

  .grid3{
    margin-top:40px !important;
  }

  .card{
    min-height:auto !important;
  }

  .nature{
    padding-top:65px !important;
    padding-bottom:65px !important;
  }

  .nature h2{
    font-size:40px !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;
  }
}

/* ===== PRISCILLA — TEXTE STRICTEMENT DANS LA ZONE CREME ===== */

.hero{
  padding-left:10% !important;
  padding-right:5% !important;
}

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

/* Sous-titre : largeur contrôlée */
.hero .lead{
  width:100% !important;
  max-width:600px !important;

  margin-top:10px !important;

  font-size:24px !important;
  line-height:1.45 !important;

  color:#493d30 !important;
}

/* Titre */
.hero h1{
  max-width:100% !important;
}

/* Bouton */
.hero .button{
  align-self:flex-start !important;
}

/* La zone crème reste derrière l'intégralité du texte */
.hero::before{
  width:55% !important;

  background:
    linear-gradient(
      90deg,
      rgba(255,250,239,1) 0%,
      rgba(255,250,239,1) 72%,
      rgba(255,250,239,.96) 84%,
      rgba(255,250,239,.65) 92%,
      rgba(255,250,239,0) 100%
    ) !important;
}

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

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

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

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

/* ===== PRISCILLA — AJUSTEMENT FINAL ZONE TEXTE ===== */

@media(min-width:761px){

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

  .hero .lead{
    max-width:500px !important;
    font-size:23px !important;
    line-height:1.48 !important;
  }

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

}

/* Keep the three cards inside their content column on tablet widths. */
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid3 .card { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 1000px) {
  .grid3 { grid-template-columns: minmax(0, 1fr); }
}