/* ===========================================================
   NATUR'AL — Design system
   Blanc cassé + vert forêt, typographie serif éditoriale.
   =========================================================== */

:root{
  --cream:        #F6F1E4;
  --cream-2:      #EEE6D3;
  --cream-ink:    #211D14;

  --forest-950:   #0C1D12;
  --forest-900:   #12271A;
  --forest-800:   #1B3A24;
  --forest-700:   #244A2E;
  --forest-500:   #3E6B49;
  --forest-300:   #86AB8D;
  --forest-200:   #B9CFB9;

  --gold:         #B99A5B;

  --ink:          #16241A;
  --ink-soft:     rgba(22,36,26,.68);

  --radius:       18px;
  --radius-lg:    28px;

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.16,.84,.36,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3{ font-family: var(--serif); font-weight: 400; margin: 0 0 .4em; letter-spacing: -.01em; }
p{ margin: 0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor: pointer; }

.wrap{ max-width: 1180px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 2; }
.section__leaves{ position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; }
.wrap--narrow{ max-width: 780px; }

.kicker{
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .75rem;
  font-weight: 600;
  color: var(--forest-700);
  margin-bottom: .9em;
}
.kicker--light{ color: var(--forest-200); }
.h-light{ color: var(--cream); }

/* petite feuille qui se dépose au moment où le titre apparaît au scroll */
.leaf-accent{
  display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px;
  background: var(--forest-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 88C50 88 16 68 16 36C16 21 27 11 41 13C41 13 25 25 27 42C30 25 45 13 68 13C68 40 58 68 50 88Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 88C50 88 16 68 16 36C16 21 27 11 41 13C41 13 25 25 27 42C30 25 45 13 68 13C68 40 58 68 50 88Z'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0; transform: translate(-8px, -14px) rotate(-50deg) scale(.5);
  transition: opacity .7s var(--ease), transform .9s var(--ease);
}
.leaf-accent--light{ background: var(--gold); }
.reveal.is-visible .leaf-accent{ opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }

/* grain texture overlay, subtle */
.grain{
  position: fixed; inset: 0; pointer-events: none; z-index: 999;
  opacity: .035; mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(0deg, #000 0px, transparent 1px, transparent 2px),
    repeating-linear-gradient(90deg, #000 0px, transparent 1px, transparent 2px);
}

/* ---------------- NAV ---------------- */
.nav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 40px;
  transition: background .5s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.is-scrolled{
  background: rgba(12,29,18,.92);
  backdrop-filter: blur(10px);
  padding: 14px 40px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.nav__brand{ display:flex; align-items:center; transition: opacity .3s; }
.nav__brand:hover{ opacity: .85; }
.nav__brand-logo{ height: 46px; width: auto; display: block; filter: drop-shadow(0 2px 10px rgba(0,0,0,.25)); }
.nav__links{ display:flex; gap: 30px; }
.nav__links a{
  color: var(--cream); font-size: .88rem; letter-spacing: .03em; opacity: .85;
  position: relative; padding: 4px 0;
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background: var(--gold);
  transition: right .3s var(--ease);
}
.nav__links a:hover{ opacity: 1; }
.nav__links a:hover::after{ right: 0; }
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; }
.nav__burger span{ width: 24px; height: 2px; background: var(--cream); display:block; }

/* ---------------- HERO ---------------- */
.hero{
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--forest-950);
  padding: 140px 24px 80px;
}
.hero__bg{
  position: absolute; inset: -10% -6%; z-index: 0;
  will-change: transform;
  background:
    radial-gradient(ellipse 60% 45% at 25% 20%, rgba(62,107,73,.35), transparent 60%),
    radial-gradient(ellipse 55% 50% at 80% 75%, rgba(185,154,91,.14), transparent 65%),
    linear-gradient(160deg, var(--forest-900) 0%, var(--forest-950) 55%, #081209 100%);
}

/* ---- badge crédit d'impôt, coin haut-droit du hero ---- */
.hero__badge{
  position: absolute; top: 112px; right: 40px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 108px; height: 108px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--forest-700), var(--forest-900) 75%);
  border: 1px solid rgba(185,154,91,.4);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  text-align: center; text-decoration: none;
}
.hero__badge-percent{ font-family: var(--serif); font-size: 1.9rem; line-height: 1; color: var(--gold); }
.hero__badge-percent small{ font-size: .55em; }
.hero__badge-label{
  margin-top: 3px; font-size: .58rem; line-height: 1.2; letter-spacing: .04em;
  text-transform: uppercase; color: var(--cream);
}
@media (max-width: 720px){
  .hero__badge{ top: 96px; right: 20px; width: 84px; height: 84px; }
  .hero__badge-percent{ font-size: 1.4rem; }
  .hero__badge-label{ font-size: .5rem; }
}

/* ---- feuilles qui tombent ---- */
.hero__leaves{
  position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none;
}
.falling-leaf{
  position: absolute; top: -8%;
  left: var(--x, 50%);
  width: var(--size, 20px); height: calc(var(--size, 20px) * 1.25); /* ratio réel de la feuille du logo */
  opacity: var(--o, .7);
  animation: leaf-fall var(--dur, 14s) linear var(--delay, 0s) infinite;
  will-change: transform, opacity;
}
.falling-leaf img{ width: 100%; height: 100%; display:block; transform: rotate(var(--rot0, 0deg)); }

@keyframes leaf-fall{
  0%{ transform: translate(0, -10vh) translateX(0) rotate(var(--rot0, 0deg)); opacity: 0; }
  8%{ opacity: var(--o, .7); }
  25%{ transform: translate(calc(var(--sway,1) * 26px), 28vh) translateX(0) rotate(calc(var(--rot0,0deg) + 60deg)); }
  50%{ transform: translate(calc(var(--sway,1) * -30px), 55vh) rotate(calc(var(--rot0,0deg) + 150deg)); }
  75%{ transform: translate(calc(var(--sway,1) * 22px), 82vh) rotate(calc(var(--rot0,0deg) + 230deg)); }
  92%{ opacity: var(--o, .7); }
  100%{ transform: translate(calc(var(--sway,1) * -10px), 112vh) rotate(calc(var(--rot0,0deg) + 300deg)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .falling-leaf{ animation: none; display: none; }
}
.hero__content{
  position: relative; z-index: 2; max-width: 760px; text-align: center; color: var(--cream);
}
.hero__eyebrow{
  font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: var(--forest-200);
  margin-bottom: 18px;
}
.hero__title{
  font-size: clamp(3rem, 9vw, 6.2rem);
  display: flex; align-items: center; justify-content: center; gap: .25em;
  color: var(--cream);
  margin-bottom: .1em;
  will-change: transform;
}
.leaf-hero{ height: .78em; width: auto; display: inline-block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.3)); }
.hero__tagline{
  font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  color: var(--forest-200); margin-bottom: 22px;
}
.hero__lead{
  color: rgba(246,241,228,.82); font-size: 1.05rem; max-width: 560px; margin-left:auto; margin-right:auto;
}
.hero__actions{ display:flex; gap: 16px; justify-content:center; margin-top: 18px; flex-wrap: wrap; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 15px 30px; border-radius: 999px; font-size: .92rem; letter-spacing: .02em;
  transition: transform .35s var(--ease), background .3s, color .3s, box-shadow .3s;
  border: 1px solid transparent;
}
.btn--primary{ background: var(--gold); color: var(--forest-950); }
.btn--primary:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px rgba(185,154,91,.35); }
.btn--ghost{ border-color: rgba(246,241,228,.4); color: var(--cream); }
.btn--ghost:hover{ transform: translateY(-3px); border-color: var(--cream); }

.hero__scrollcue{
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap: 8px;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(246,241,228,.6);
  z-index: 2;
}
.hero__scrollcue span{
  width: 1px; height: 34px; background: linear-gradient(180deg, var(--gold), transparent);
  animation: scrollcue 1.8s infinite var(--ease);
}
@keyframes scrollcue{
  0%{ transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%{ transform: scaleY(1); transform-origin: top; opacity: 1; }
  60%{ transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100%{ transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ---------------- SECTIONS ---------------- */
.section{ padding: 130px 0; position: relative; }
.section--cream{ background: var(--cream); }
.section--forest{ background: var(--forest-900); color: var(--cream); }
.section--forest p{ color: rgba(246,241,228,.78); }
.section h2{ font-size: clamp(2rem, 4vw, 2.9rem); max-width: 700px; }
.section h2 em{ color: var(--forest-500); font-style: italic; }
.section--forest h2 em{ color: var(--gold); }

/* about */
.about__grid{
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; margin-top: 40px;
}
.about__text p{ color: var(--ink-soft); font-size: 1.02rem; }
.about__facts{ margin-top: 24px; border-top: 1px solid rgba(22,36,26,.15); }
.about__facts li{
  display:flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid rgba(22,36,26,.15);
  font-size: .92rem;
}
.about__facts li span{ color: var(--forest-700); font-weight: 600; }
.about__image{ border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 60px rgba(18,39,26,.18); position: relative; }
/* ratio identique à la photo source : aucun recadrage forcé */
.about__image img{ width: 100%; aspect-ratio: 382/510; object-fit: cover; }

/* services */
.services__lead{ font-size: 1.05rem; max-width: 620px; margin-top: 14px; }
.services__lead strong{ color: var(--gold); }
.services__grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  margin-top: 40px; background: rgba(246,241,228,.1); border-radius: var(--radius-lg); overflow: hidden;
}
.service{
  background: var(--forest-900); padding: 44px 36px; transition: background .4s var(--ease);
}
.service:hover{ background: var(--forest-800); }
.service__icon{
  display:inline-flex; width: 48px; height: 48px; margin-bottom: 22px;
}
.service__icon svg{
  width: 100%; height: 100%; fill: none; stroke: var(--gold); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .45s var(--ease), stroke .3s;
}
.service:hover .service__icon svg{
  transform: scale(1.14) rotate(-6deg);
  filter: drop-shadow(0 0 6px rgba(185,154,91,.55));
}
.service h3{ color: var(--cream); font-size: 1.25rem; margin-bottom: .5em; }
.service p{ font-size: .92rem; }

/* gallery — mosaïque en colonnes : chaque photo garde son cadrage d'origine, sans recadrage forcé */
.gallery{
  column-count: 3; column-gap: 18px; margin-top: 44px;
}
.gallery__item{
  position: relative; margin: 0 0 18px; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 20px 40px rgba(18,39,26,.12); break-inside: avoid;
}
.gallery__item img{ width: 100%; height: auto; display: block; transition: transform .6s var(--ease); }
.gallery__item:hover img{ transform: scale(1.06); }
.gallery__item figcaption{
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px;
  background: linear-gradient(0deg, rgba(12,29,18,.82), transparent);
  color: var(--cream); font-size: .85rem; letter-spacing: .02em;
  transform: translateY(6px); opacity: .88; transition: transform .4s var(--ease), opacity .4s;
}
.gallery__item:hover figcaption{ transform: translateY(0); opacity: 1; }

/* zone */
.zone__lead{ font-size: 1.1rem; max-width: 560px; }
.zone__list{ margin-top: 30px; display:flex; flex-wrap: wrap; gap: 12px; }
.zone__list li{
  padding: 10px 20px; border: 1px solid rgba(246,241,228,.25); border-radius: 999px;
  font-size: .9rem; color: var(--forest-200);
}

/* ---------------- DISPONIBILITÉS ---------------- */
.section--availability{ text-align: center; }
.section--availability .kicker, .section--availability h2{ text-align: center; }
.availability__lead{
  color: var(--ink-soft); font-size: 1.08rem; max-width: 560px; margin: 0 auto 32px;
}
.availability__cta{ font-size: 1rem; }

/* ---------------- CRÉDIT D'IMPÔT ---------------- */
.tax__grid{
  display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center;
}
.tax__figure{
  background: var(--forest-900); border-radius: var(--radius-lg); padding: 50px 30px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  box-shadow: 0 30px 60px rgba(18,39,26,.18);
}
.tax__percent{
  font-family: var(--serif); font-size: 5.5rem; line-height: 1; color: var(--gold);
}
.tax__percent small{ font-size: .5em; }
.tax__percent-label{
  margin-top: 10px; font-size: .85rem; letter-spacing: .05em; color: var(--cream);
  text-transform: uppercase;
}
.tax__text p{ color: var(--ink-soft); font-size: 1.02rem; }
.tax__note{
  margin-top: 8px; padding: 16px 20px; background: var(--cream-2); border-radius: var(--radius);
  font-size: .92rem; border-left: 3px solid var(--forest-500);
}

/* contact */
.contact__grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 40px; }
.contact__card{
  display:flex; flex-direction:column; gap: 8px; padding: 30px 26px;
  border: 1px solid rgba(246,241,228,.18); border-radius: var(--radius);
  transition: border-color .3s;
}
a.contact__card:hover{ border-color: var(--gold); }
.contact__label{ font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--forest-200); }
.contact__value{ font-family: var(--serif); font-size: 1.25rem; color: var(--cream); }

/* footer */
.footer{ background: var(--forest-950); color: rgba(246,241,228,.55); padding: 30px 0; font-size: .8rem; }
.footer__wrap{ display:flex; justify-content: space-between; align-items:center; flex-wrap: wrap; gap: 10px; }
.footer__brand{ display:flex; align-items:center; gap: 10px; }
.footer__brand img{ border-radius: 7px; }

/* ---------------- Reveal / distortion engine ---------------- */
.reveal{
  opacity: 0;
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg))
             translateY(46px) skewY(2.2deg) scale(.98);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: calc(var(--rd, 0) * 90ms);
}
.reveal.is-visible{
  opacity: 1;
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg))
             translateY(0) skewY(0) scale(1);
}
/* une fois révélé, la bascule au survol doit réagir vite (pas la transition lente d'apparition) */
.reveal.is-visible[data-tilt]{ transition: opacity 1s var(--ease), transform .4s var(--ease); }

[data-distort]{ will-change: transform; transition: transform .12s linear; }

/* légère bascule 3D au survol des cartes (services, galerie, photo, contact) */
[data-tilt]{
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateZ(0);
  transition: transform .4s var(--ease);
  will-change: transform;
}
[data-tilt].is-tilting{ transition: transform .08s linear; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  [data-distort]{ transform:none !important; }
  [data-tilt]{ transform:none !important; }
  html{ scroll-behavior: auto; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 980px){
  .about__grid{ grid-template-columns: 1fr; }
  .services__grid{ grid-template-columns: repeat(2,1fr); }
  .contact__grid{ grid-template-columns: 1fr; }
  .tax__grid{ grid-template-columns: 1fr; gap: 34px; }
  .tax__figure{ padding: 36px 30px; }
}
@media (max-width: 720px){
  .nav__links{
    position: fixed; top: 0; right: 0; height: 100vh; width: min(78vw, 320px);
    background: var(--forest-950); flex-direction: column; padding: 110px 36px 40px;
    transform: translateX(100%); transition: transform .4s var(--ease); gap: 26px;
  }
  .nav__links.is-open{ transform: translateX(0); }
  .nav__burger{ display:flex; }
  .services__grid{ grid-template-columns: 1fr; }
  .gallery{ column-count: 2; }
  .section{ padding: 90px 0; }
}