/* =====================================================
   KM ÉLÉGANCE — Style premium
   Palette : vert élégant + blanc cassé
   ===================================================== */

:root{
  --vert:#1f6b4a;
  --vert-fonce:#154d35;
  --vert-clair:#e8f2ec;
  --or:#c9a24b;
  --blanc-casse:#faf8f4;
  --texte:#1c2521;
  --gris:#6b7770;
  --ombre:0 12px 40px rgba(21,77,53,.12);
  --rayon:16px;
  --trans:.4s cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Jost',sans-serif;
  background:var(--blanc-casse);
  color:var(--texte);
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,.serif{font-family:'Cormorant Garamond',serif;font-weight:600}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1240px,92%);margin-inline:auto}

/* ---------- LOADER ---------- */
#loader{
  position:fixed;inset:0;background:var(--blanc-casse);
  display:flex;align-items:center;justify-content:center;
  z-index:9999;transition:opacity .6s,visibility .6s;
}
#loader.hide{opacity:0;visibility:hidden}
.loader-mark{
  font-family:'Cormorant Garamond',serif;font-size:2.4rem;
  letter-spacing:.3em;color:var(--vert);
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}

/* ---------- HEADER ---------- */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(250,248,244,.85);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(31,107,74,.08);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{font-family:'Cormorant Garamond',serif;font-size:1.7rem;letter-spacing:.15em;color:var(--vert)}
.logo span{color:var(--or)}
.menu{display:flex;gap:34px;list-style:none}
.menu a{position:relative;font-size:.95rem;letter-spacing:.04em;transition:var(--trans)}
.menu a::after{
  content:'';position:absolute;left:0;bottom:-6px;height:2px;width:0;
  background:var(--or);transition:var(--trans);
}
.menu a:hover{color:var(--vert)}
.menu a:hover::after{width:100%}
.nav-icons{display:flex;gap:20px;align-items:center;font-size:1.2rem}
.nav-icons a{transition:var(--trans)}
.nav-icons a:hover{color:var(--vert);transform:translateY(-2px)}
.burger{display:none;font-size:1.6rem;background:none;border:none;cursor:pointer;color:var(--texte)}

/* ---------- HERO SLIDER ---------- */
.hero{
  position:relative;height:88vh;min-height:560px;overflow:hidden;
  display:flex;align-items:center;
  background:linear-gradient(120deg,var(--vert-fonce),var(--vert));
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 70% 30%,rgba(201,162,75,.25),transparent 55%);
}
.hero-content{position:relative;color:#fff;max-width:620px;z-index:2}
.hero .eyebrow{
  letter-spacing:.35em;font-size:.8rem;text-transform:uppercase;
  color:var(--or);margin-bottom:18px;opacity:0;animation:rise .8s .2s forwards;
}
.hero h1{
  font-size:clamp(2.8rem,6vw,5rem);line-height:1.05;margin-bottom:22px;
  opacity:0;animation:rise .9s .4s forwards;
}
.hero p{font-size:1.1rem;opacity:0;animation:rise .9s .6s forwards;margin-bottom:34px;max-width:460px}
.btn{
  display:inline-block;padding:15px 38px;border-radius:50px;
  font-size:.95rem;letter-spacing:.06em;cursor:pointer;border:none;
  transition:var(--trans);
}
.btn-or{background:var(--or);color:#fff}
.btn-or:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(201,162,75,.4)}
.btn-ligne{border:1.5px solid #fff;color:#fff;background:transparent}
.btn-ligne:hover{background:#fff;color:var(--vert)}
.hero .btn{opacity:0;animation:rise .9s .8s forwards}
@keyframes rise{to{opacity:1;transform:translateY(0)}from{opacity:0;transform:translateY(28px)}}

/* ---------- SECTIONS ---------- */
section{padding:90px 0}
.section-titre{text-align:center;margin-bottom:54px}
.section-titre .eyebrow{letter-spacing:.3em;font-size:.78rem;text-transform:uppercase;color:var(--or)}
.section-titre h2{font-size:clamp(2rem,4vw,3rem);margin-top:8px}

/* ---------- CATÉGORIES ---------- */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cat{
  position:relative;height:260px;border-radius:var(--rayon);overflow:hidden;
  display:flex;align-items:flex-end;padding:26px;color:#fff;
  background:linear-gradient(160deg,var(--vert),var(--vert-fonce));
  box-shadow:var(--ombre);transition:var(--trans);
}
.cat::after{content:'';position:absolute;inset:0;background:rgba(21,77,53,.25);transition:var(--trans)}
.cat:hover{transform:translateY(-6px)}
.cat:hover::after{background:rgba(21,77,53,.05)}
.cat span{position:relative;z-index:2;font-family:'Cormorant Garamond',serif;font-size:1.7rem}

/* ---------- PRODUITS ---------- */
.grille{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.produit{
  background:#fff;border-radius:var(--rayon);overflow:hidden;
  box-shadow:0 6px 24px rgba(21,77,53,.07);transition:var(--trans);
  position:relative;
}
.produit:hover{transform:translateY(-8px);box-shadow:var(--ombre)}
.produit .img{height:280px;background:var(--vert-clair);position:relative;overflow:hidden}
.produit .img img{width:100%;height:100%;object-fit:cover;transition:var(--trans)}
.produit:hover .img img{transform:scale(1.07)}
.badge{
  position:absolute;top:14px;left:14px;background:var(--or);color:#fff;
  font-size:.72rem;letter-spacing:.08em;padding:5px 12px;border-radius:30px;z-index:2;
}
.produit .infos{padding:20px}
.produit .infos h3{font-size:1.25rem;margin-bottom:6px}
.produit .cat-nom{font-size:.78rem;color:var(--gris);letter-spacing:.05em}
.prix-bloc{display:flex;align-items:center;gap:10px;margin-top:12px}
.prix{font-weight:600;color:var(--vert);font-size:1.1rem}
.prix-barre{color:var(--gris);text-decoration:line-through;font-size:.92rem}
.voir-produit{display:inline-block;margin-top:12px;font-size:.82rem;color:var(--or);letter-spacing:.04em;transition:var(--trans)}
.voir-produit i{transition:var(--trans)}
.produit:hover .voir-produit i{transform:translateX(4px)}

/* ---------- NEWSLETTER ---------- */
.news{background:var(--vert);color:#fff;text-align:center;border-radius:24px;padding:64px 24px;margin:40px 0}
.news h2{color:#fff}
.news-form{display:flex;gap:12px;max-width:480px;margin:26px auto 0}
.news-form input{flex:1;padding:15px 22px;border:none;border-radius:50px;font-size:.95rem}
.news-form input:focus{outline:2px solid var(--or)}

/* ---------- AVIS ---------- */
.avis{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.avis-carte{background:#fff;border-radius:var(--rayon);padding:30px;box-shadow:0 6px 24px rgba(21,77,53,.07)}
.etoiles{color:var(--or);margin-bottom:14px}
.avis-carte p{font-style:italic;color:var(--gris)}
.avis-auteur{margin-top:16px;font-weight:600;color:var(--vert)}

/* ---------- FOOTER ---------- */
footer{background:var(--vert-fonce);color:#cfe0d7;padding:64px 0 26px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
footer h4{color:#fff;font-family:'Cormorant Garamond',serif;font-size:1.4rem;margin-bottom:18px}
footer ul{list-style:none}
footer ul li{margin-bottom:10px;font-size:.92rem;transition:var(--trans)}
footer ul li:hover{color:var(--or);transform:translateX(4px)}
.foot-bas{text-align:center;margin-top:46px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:.85rem}

/* ---------- WHATSAPP FLOTTANT ---------- */
.wa-float{
  position:fixed;bottom:26px;right:26px;width:60px;height:60px;border-radius:50%;
  background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:1.7rem;box-shadow:0 8px 24px rgba(37,211,102,.5);z-index:200;
  transition:var(--trans);animation:flott 2.4s ease-in-out infinite;
}
.wa-float:hover{transform:scale(1.1)}
@keyframes flott{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------- SCROLL REVEAL ---------- */
.reveal{opacity:0;transform:translateY(36px);transition:.9s cubic-bezier(.22,1,.36,1)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  .grille{grid-template-columns:repeat(2,1fr)}
  .cats{grid-template-columns:repeat(2,1fr)}
  .avis{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .menu{
    position:fixed;top:70px;right:-100%;flex-direction:column;
    background:var(--blanc-casse);width:70%;height:100vh;padding:40px 30px;
    gap:24px;box-shadow:var(--ombre);transition:var(--trans);
  }
  .menu.open{right:0}
  .burger{display:block}
  .grille{grid-template-columns:1fr 1fr;gap:14px}
  .cats{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .news-form{flex-direction:column;border-radius:24px}
  .news-form input,.news-form .btn{width:100%}
  .produit .img{height:210px}
  section{padding:60px 0}
}
@media(max-width:420px){
  .grille{grid-template-columns:1fr}
}