@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');
:root{
  --vert:#2b4a44;          /* vert profond — header, titres */
  --vert-clair:#2b4a44;
  --or:#a4823f;            /* accent or vieilli */
  --or-clair:#c2a35f;
  --creme:#e6dcc0;         /* texte sur fond vert */
  --ivoire:#faf8f2;        /* fond de page */
  --encre:#3c3a30;         /* texte courant */
  --hairline:rgba(164,130,63,.35);
}


*{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:smooth;
  scroll-padding-top:112px;
  overflow-x:hidden;
  font-size:20px; /* 125% du 16px par défaut : fait grossir automatiquement tous les rem/clamp() du site (titres, paragraphes, étapes...) */
}

body{
  font-family:"EB Garamond",Georgia,serif;
  color:var(--encre);
  background:var(--ivoire);
  padding-top:92px;
  line-height:1.8;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- HEADER ---------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:flex-start;
  padding:23px 60px;
  background:var(--vert);
  color:var(--creme);
  border-bottom:1px solid var(--hairline);
}
.logo{
  font-family:"Cormorant Garamond",serif;
  font-size:30px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--creme);
  text-decoration:none;line-height:1;
}
.logo span{color:var(--or-clair)}
.logo img{width:80px;height:auto;display:block;}

.menu{display:flex;align-items:center;gap:42px;padding-left: 75px;}
.menu a{
  font-size:16px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--creme);text-decoration:none;position:relative;
  padding-bottom:4px;transition:color .3s ease;
}
.menu a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--or-clair);transition:width .35s ease;
}
.menu a:hover,.menu a:focus-visible{color:var(--or-clair)}
.menu a:hover::after,.menu a:focus-visible::after{width:100%}

/* bouton "prendre rendez-vous" */
.menu a.cta{
  border:1px solid var(--or);padding:11px 25px;letter-spacing:.16em;
  transition:background .35s ease,color .35s ease;
}
.menu a.cta::after{display:none}
.menu a.cta:hover,.menu a.cta:focus-visible{background:var(--or);color:var(--vert)}

/* ---------- MODE OPÉRATOIRE ---------- */
.etapes{
  list-style:none;
  counter-reset:etape;
  margin-top:8px;
}
.etapes li{
  counter-increment:etape;
  position:relative;
  padding:27px 0 27px 92px;
  border-bottom:1px solid var(--hairline);
  font-size:1.05rem;
  max-width:62ch;
}
.etapes li:last-child{border-bottom:none}
.etapes li::before{
  content:"0" counter(etape);
  position:absolute;left:0;top:25px;
  font-family:"Cormorant Garamond",serif;
  font-size:1.9rem;color:var(--or);line-height:1;
}
.etapes li strong{
  display:block;
  font-family:"Cormorant Garamond",serif;
  font-size:1.25rem;font-weight:500;
  letter-spacing:.04em;color:var(--vert-clair);
  margin-bottom:5px;
}

/* ---------- BURGER (invisible sur desktop) ---------- */
.burger{
  display:none;
  flex-direction:column;justify-content:center;gap:6px;
  width:42px;height:42px;padding:0;
  background:none;border:none;cursor:pointer;
}
.burger span{
  display:block;width:33px;height:2px;background:var(--creme);
  transition:transform .3s ease,opacity .3s ease;
}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- HERO / QUI SOMMES-NOUS ---------- */
.hero{position:relative;overflow:hidden}
.hero .monogram{
  position:absolute;top:50%;right:-4%;transform:translateY(-50%);
  font-family:"Cormorant Garamond",serif;font-size:34vw;line-height:.8;
  font-weight:400;color:transparent;-webkit-text-stroke:1px rgba(43,74,68,.06);
  pointer-events:none;user-select:none;z-index:0;
}
.container{
  position:relative;z-index:1;
  max-width:1375px;margin:0 auto;padding:188px 60px 25px;
}
.wrap{max-width:825px}

.eyebrow{
  font-size:16px;letter-spacing:.36em;text-transform:uppercase;
  color:var(--or);margin-bottom:32px;
}
h1{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(3.4rem,8vw,6rem);font-weight:400;
  letter-spacing:.02em;line-height:.98;color:var(--vert-clair);
}
.lead{
  font-size:1.35rem;font-style:italic;color:var(--vert-clair);
  margin-top:27px;max-width:34ch;
}

.rule{width:70px;height:1px;background:var(--or);margin:65px 0}

.section-label{
  font-size:16px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--or);margin-bottom:17px;
}
h2{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(2rem,4vw,2.7rem);font-weight:400;
  letter-spacing:.02em;color:var(--vert-clair);margin-bottom:28px;
}
.wrap p:not(.eyebrow):not(.lead){
  font-size:1.075rem;line-height:1.9;max-width:62ch;
  margin-bottom:20px;color:var(--encre);
}



/* ---------- SECTION DOMAINE (Joaillerie, Porcelaine, Objets d'art) ---------- */
.domaine .container{padding:75px 60px 50px}

/* ---------- COVERFLOW ---------- */
.coverflow{
  position:relative;
  max-width:1375px;
  margin:0 auto 112px;
  padding:25px 0 68px;
  overflow:hidden;
}
.cf-stage{
  position:relative;
  height:min(46vh,425px);          /* borne la hauteur → tient dans l'écran */
  display:flex;align-items:center;justify-content:center;
}
.cf-stage img{
  position:absolute;
  aspect-ratio:3 / 2;
  height:100%;
  object-fit:cover;
  border-radius:8px;
  transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .55s ease,filter .55s ease;
  cursor:pointer;
  box-shadow:0 12px 30px rgba(43,74,68,.18);
}
.cf-stage img.active{transform:translateX(0) scale(1);opacity:1;filter:none;z-index:3}
.cf-stage img.left  {transform:translateX(-58%) scale(.74);opacity:.55;filter:brightness(.7);z-index:2}
.cf-stage img.right {transform:translateX(58%)  scale(.74);opacity:.55;filter:brightness(.7);z-index:2}
.cf-stage img.hidden{transform:scale(.6);opacity:0;pointer-events:none;z-index:1}

.cf-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:62px;height:62px;border-radius:50%;
  background:rgba(43,74,68,.55);color:var(--creme);
  border:1px solid var(--hairline);
  font-family:"Cormorant Garamond",serif;font-size:37px;line-height:1;
  cursor:pointer;z-index:5;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s ease;
}
.cf-btn:hover{background:var(--or)}
.cf-btn.prev{left:30px}
.cf-btn.next{right:30px}
.cf-btn span{margin-top:-4px}

.cf-dots{
  position:absolute;bottom:20px;left:0;right:0;
  display:flex;justify-content:center;gap:12px;z-index:5;
}
.cf-dots button{
  width:10px;height:10px;border-radius:50%;padding:0;border:none;cursor:pointer;
  background:rgba(164,130,63,.35);transition:background .3s,transform .3s;
}
.cf-dots button.active{background:var(--or);transform:scale(1.3)}

/* ---------- FORMULAIRE ---------- */
.form-contact{margin-top:10px;max-width:750px}
.champ{margin-bottom:27px}
.champ label{
  display:block;
  font-size:15px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--or);margin-bottom:10px;
}
.champ input,.champ select,.champ textarea{
  width:100%;
  font-family:"EB Garamond",serif;font-size:1.05rem;
  color:var(--encre);background:#fff;
  border:1px solid var(--hairline);border-radius:6px;
  padding:15px 17px;
  transition:border-color .3s ease,box-shadow .3s ease;
}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--or);
  box-shadow:0 0 0 3px rgba(164,130,63,.12);
}
.champ textarea{min-height:162px;resize:vertical;line-height:1.7}

/* colonnes du formulaire */
.champ-row{display:flex;gap:20px}
.champ-row .champ{flex:1}

.btn-or{
  display:inline-block;cursor:pointer;
  font-family:"EB Garamond",serif;
  font-size:16px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--creme);background:var(--vert);
  border:1px solid var(--vert);border-radius:6px;
  padding:17px 42px;margin-top:6px;
  transition:background .35s ease,color .35s ease,border-color .35s ease;
}
.btn-or:hover{background:var(--or);border-color:var(--or);color:var(--vert)}

.form-message{margin-top:22px;font-size:1.05rem;font-style:italic;color:var(--vert-clair);display:none}
.form-message.show{display:block}

.questionnaire-actions{display:flex;flex-wrap:wrap;gap:20px;margin-top:32px}
.btn-ligne{
  display:inline-flex;align-items:center;
  font-size:16px;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  padding:17px 35px;border-radius:6px;
  transition:background .35s ease,color .35s ease,border-color .35s ease;
}
.btn-ligne.plein{background:var(--vert);color:var(--creme);border:1px solid var(--vert)}
.btn-ligne.plein:hover{background:var(--or);border-color:var(--or);color:var(--vert)}
.btn-ligne.vide{background:transparent;color:var(--vert-clair);border:1px solid var(--or)}
.btn-ligne.vide:hover{background:var(--or);color:var(--vert)}

/* ---------- FOOTER ---------- */
.footer{
  background:var(--vert);color:var(--creme);
  border-top:1px solid var(--hairline);
  padding:70px 60px;text-align:center;
}
.footer-contact{margin-bottom:15px}
.footer-contact a{
  color:var(--or-clair);text-decoration:none;
  font-size:19px;letter-spacing:.06em;
  font-family:"EB Garamond",serif;text-transform:none;
  transition:color .3s ease;
}
.footer-contact a:hover{color:var(--creme)}
.footer .logo{font-size:27px;display:inline-block;margin-bottom:17px}
.footer p{font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:rgba(230,220,192,.6)}

/* ---------- ANIMATION D'ARRIVÉE ---------- */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.reveal{opacity:0;animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.reveal.d1{animation-delay:.05s}
.reveal.d2{animation-delay:.18s}
.reveal.d3{animation-delay:.31s}
.reveal.d4{animation-delay:.44s}
.reveal.d5{animation-delay:.57s}

@media (prefers-reduced-motion:reduce){
  .reveal{animation:none;opacity:1}
  html{scroll-behavior:auto}
}

/* ---------- RESPONSIVE (mobile : burger + menu déroulant) ---------- */
@media (max-width:820px){
  .header{
    padding:14px 22px;
    justify-content:space-between;   /* logo à gauche, burger à droite */
    flex-wrap:nowrap;
  }
  .burger{display:flex}

  .menu{
    position:fixed;left:0;right:0;
    top:var(--header-h,110px);       /* ajusté par script.js selon la hauteur réelle */
    z-index:40;
    flex-direction:column;align-items:center;gap:22px;
    padding:30px 22px 38px;          /* annule le padding-left du desktop */
    background:var(--vert);
    border-bottom:1px solid var(--hairline);
    transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:opacity .3s ease,transform .3s ease,visibility .3s;
  }
  .menu.open{opacity:1;visibility:visible;transform:none}
  .menu a{font-size:15px}
  .menu a.cta{margin-top:4px;padding:11px 26px}

  h1{font-size:clamp(2.6rem,11vw,3.4rem)}      /* titre bridé sur petit écran */

  .container{padding:110px 24px 40px}
  .hero .monogram{font-size:52vw;right:-18%;opacity:.7}
  .footer{padding:44px 24px}

  /* étapes */
  .etapes li{padding-left:56px}
  .etapes li::before{font-size:1.6rem}

  /* domaine + carrousel */
  .domaine .container{padding:60px 24px 30px}
  .coverflow{padding:10px 0 46px}
  .cf-stage{height:min(40vh,300px)}
  .cf-stage img.left,.cf-stage img.right{opacity:0;pointer-events:none}  /* une seule image sur mobile */
  .cf-btn.prev{left:12px}
  .cf-btn.next{right:12px}

  /* formulaire */
  .form-contact{max-width:100%}
  .champ-row{flex-direction:column;gap:0}
  .questionnaire-actions{flex-direction:column}
  .btn-ligne,.btn-or{text-align:center;justify-content:center}
}