/* =============================================================================
   NAILS BY KE — FEUILLE DE STYLE (design luxe, inspiration Dior)
   Palette : blanc dominant · mauve rosé signature · anthracite · or rose
   ========================================================================== */

:root{
  --white:#FFFFFF;
  --rose:#C6799B;          /* rose signature (mauve rosé du logo) */
  --rose-light:#EBD2DD;    /* fond doux */
  --rose-dark:#A85E80;     /* survol / accents */
  --ink:#1A1A1A;           /* texte anthracite presque noir */
  --ink-soft:#6b6b6b;      /* texte secondaire */
  --gold:#C9A96E;          /* or rose, accent précieux */
  --line:#ece7ea;          /* filets très clairs */
  --shadow:0 18px 50px -20px rgba(26,26,26,.18);
  --serif:"Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:"Jost","Montserrat", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --maxw:1200px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}

h1,h2,h3,h4{font-family:var(--serif); font-weight:500; letter-spacing:.01em; margin:0;}
h2.section-title{font-size:clamp(2rem,4.5vw,3.2rem); text-align:center; font-weight:500;}
.section-sub{ text-align:center; color:var(--ink-soft); max-width:620px; margin:.9rem auto 0;
  font-size:1.02rem; letter-spacing:.02em;}

.eyebrow{ text-transform:uppercase; letter-spacing:.32em; font-size:.72rem;
  color:var(--rose-dark); font-weight:400; }

/* --- Conteneurs & sections ------------------------------------------------ */
.container{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
section{padding:110px 0;}
.section-head{margin-bottom:56px;}
.gold-rule{width:54px; height:1px; background:var(--gold); margin:18px auto 0;}

/* --- Boutons -------------------------------------------------------------- */
.btn{
  display:inline-block; border:1px solid var(--ink); background:transparent; color:var(--ink);
  padding:14px 34px; text-transform:uppercase; letter-spacing:.22em; font-size:.72rem;
  font-weight:400; transition:all .45s ease; border-radius:0;
}
.btn:hover{background:var(--ink); color:var(--white);}
.btn-rose{border-color:var(--rose); background:var(--rose); color:#fff;}
.btn-rose:hover{background:var(--rose-dark); border-color:var(--rose-dark);}
.btn-light{border-color:#fff; color:#fff;}
.btn-light:hover{background:#fff; color:var(--ink);}
.btn-sm{padding:10px 22px; font-size:.66rem;}
.btn-block{display:block; width:100%; text-align:center;}

/* --- En-tête / navigation ------------------------------------------------- */
header.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 34px; transition:all .4s ease;
  background:transparent;
}
header.nav.scrolled{ background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line); padding:14px 34px; }
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; margin-right:18px; }
.brand .logo-img{height:38px; width:auto;}
.brand .brand-name{ font-family:var(--serif); font-size:1.5rem; color:var(--ink); letter-spacing:.02em; }
header.nav:not(.scrolled) .brand-name,
header.nav:not(.scrolled) .nav-links a,
header.nav:not(.scrolled) .nav-tools button{ color:#fff; }
header.nav:not(.scrolled) .brand .logo-img{ filter:brightness(0) invert(1); }

.nav-links{ display:flex; gap:22px; }
.nav-links a{ text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; font-weight:400;
  position:relative; padding:4px 0; white-space:nowrap; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold); transition:width .4s ease; }
.nav-links a:hover::after{ width:100%; }

.nav-tools{ display:flex; align-items:center; gap:18px; }
.nav-tools button{ background:none; border:none; color:var(--ink); font-family:var(--sans);
  text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; display:flex; align-items:center; gap:6px; }
.lang-switch span.active{ color:var(--rose); font-weight:500; }
.lang-switch span{ padding:0 4px; opacity:.9; }
.cart-btn{ position:relative; }
.cart-count{ position:absolute; top:-9px; right:-12px; background:var(--rose); color:#fff;
  font-size:.6rem; width:17px; height:17px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; letter-spacing:0; }
.burger{ display:none; }

/* --- HERO (cinématique) --------------------------------------------------- */
.hero{ position:relative; height:100vh; min-height:600px; display:flex; align-items:center;
  justify-content:center; text-align:center; color:#fff; overflow:hidden; padding:0; }
.hero video, .hero .hero-slides{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-slides .slide{ position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; animation:heroFade 18s infinite; transform:scale(1.05); }
.hero-slides .slide:nth-child(1){ animation-delay:0s; }
.hero-slides .slide:nth-child(2){ animation-delay:6s; }
.hero-slides .slide:nth-child(3){ animation-delay:12s; }
@keyframes heroFade{
  0%{opacity:0; transform:scale(1.12);}
  8%{opacity:1;}
  30%{opacity:1; transform:scale(1.0);}
  38%{opacity:0;}
  100%{opacity:0;}
}
.hero::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(26,26,26,.35), rgba(26,26,26,.15) 40%, rgba(26,26,26,.55)); }
.hero-content{ position:relative; z-index:2; padding:0 24px; opacity:0; transform:translateY(20px);
  animation:heroIn 1.6s .3s ease forwards; }
@keyframes heroIn{ to{opacity:1; transform:none;} }
.hero-content .eyebrow{ color:#f3dfe8; }
.hero-title{ font-size:clamp(3rem,9vw,7rem); font-weight:500; line-height:1; margin:18px 0 10px;
  text-shadow:0 2px 30px rgba(0,0,0,.3); }
.hero-sub{ font-family:var(--serif); font-style:italic; font-size:clamp(1.1rem,2.4vw,1.6rem);
  font-weight:400; margin-bottom:36px; opacity:.95; }
.hero-scroll{ position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:2;
  color:#fff; text-transform:uppercase; letter-spacing:.28em; font-size:.66rem; opacity:.85; }
.hero-scroll::after{ content:""; display:block; width:1px; height:34px; background:#fff; margin:10px auto 0;
  animation:scrollLine 2s infinite; }
@keyframes scrollLine{ 0%,100%{opacity:.3; transform:scaleY(.6);} 50%{opacity:1; transform:scaleY(1);} }

/* --- Apparition au scroll -------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity 1s ease, transform 1s ease; }
.reveal.in{ opacity:1; transform:none; }

/* --- Grille prestations ---------------------------------------------------- */
.grid{ display:grid; gap:34px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{ background:#fff; }
.card .media{ position:relative; overflow:hidden; aspect-ratio:4/5; }
.card .media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s ease; }
.card:hover .media img{ transform:scale(1.06); }
.card .body{ padding:22px 6px 4px; }
.card h3{ font-size:1.5rem; margin-bottom:6px; }
.card .desc{ color:var(--ink-soft); font-size:.92rem; min-height:44px; }
.card .meta{ display:flex; align-items:baseline; justify-content:space-between; margin:14px 0 16px;
  padding-top:14px; border-top:1px solid var(--line); }
.card .price{ font-family:var(--serif); font-size:1.4rem; color:var(--ink); }
.card .price .cur{ font-size:.8rem; color:var(--ink-soft); letter-spacing:.05em; }
.card .dur{ font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; color:var(--rose-dark); }

/* --- Section réservation --------------------------------------------------- */
.booking-wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:0; box-shadow:var(--shadow); }
.booking-visual{ background-size:cover; background-position:center; min-height:520px; }
.booking-form{ background:#fff; padding:52px 48px; }
.form-row{ margin-bottom:22px; }
.form-row label{ display:block; text-transform:uppercase; letter-spacing:.16em; font-size:.68rem;
  color:var(--ink-soft); margin-bottom:8px; }
.form-row input, .form-row select, .form-row textarea{
  width:100%; padding:13px 14px; border:1px solid var(--line); background:#fbfafb; color:var(--ink);
  font-family:var(--sans); font-size:.95rem; border-radius:0; transition:border-color .3s; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ outline:none; border-color:var(--rose); }
.form-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.radio-inline{ display:flex; gap:22px; align-items:center; }
.radio-inline label{ display:flex; gap:8px; align-items:center; text-transform:none; letter-spacing:0;
  font-size:.9rem; color:var(--ink); margin:0; cursor:pointer; }
.radio-inline input{ width:auto; }

/* --- Boutique produits ----------------------------------------------------- */
.product .media{ aspect-ratio:1/1; background:#faf7f9; }
.product .price{ color:var(--rose-dark); }

/* --- Galerie --------------------------------------------------------------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.gallery-grid .g-item{ position:relative; overflow:hidden; aspect-ratio:1/1; cursor:pointer; }
.gallery-grid .g-item img{ width:100%; height:100%; object-fit:cover; transition:transform 1s ease, filter .6s; }
.gallery-grid .g-item:hover img{ transform:scale(1.08); filter:brightness(.92); }
.gallery-grid .g-item.tall{ grid-row:span 2; aspect-ratio:auto; }
.g-item .play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:2rem; background:rgba(0,0,0,.2); }

/* --- Promotions ------------------------------------------------------------ */
.promos{ background:var(--rose-light); }
.promo-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px; }
.promo-card{ background:#fff; padding:46px 44px; text-align:center; position:relative; }
.promo-card .badge{ font-family:var(--serif); font-size:3rem; color:var(--rose); line-height:1; }
.promo-card h3{ font-size:1.7rem; margin:10px 0 12px; }
.promo-card p{ color:var(--ink-soft); }
.promo-card::before{ content:""; position:absolute; inset:14px; border:1px solid var(--gold); opacity:.4; pointer-events:none; }

/* --- À propos -------------------------------------------------------------- */
.about-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.about-imgs{ position:relative; }
.about-imgs img{ width:100%; height:100%; object-fit:cover; }
.about-imgs .img2{ position:absolute; width:52%; bottom:-40px; right:-24px; border:8px solid #fff; box-shadow:var(--shadow); }
.about-text h2{ text-align:left; font-size:clamp(1.9rem,3.6vw,2.8rem); }
.about-text .gold-rule{ margin:18px 0 24px; }
.about-text p{ color:#444; font-size:1.05rem; }

/* --- Contact --------------------------------------------------------------- */
.contact{ background:var(--ink); color:#eee; }
.contact h2{ color:#fff; }
.contact .section-sub{ color:#b9b3b6; }
.contact-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:50px; margin-top:50px; }
.contact-info .row{ padding:18px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.contact-info .row .k{ text-transform:uppercase; letter-spacing:.18em; font-size:.66rem; color:var(--gold); }
.contact-info .row .v{ font-size:1.05rem; margin-top:4px; }
.contact-info .socials{ display:flex; gap:16px; margin-top:24px; }
.contact-info .socials a{ width:42px; height:42px; border:1px solid rgba(255,255,255,.25); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:all .4s; font-size:.7rem; letter-spacing:.1em; }
.contact-info .socials a:hover{ background:var(--rose); border-color:var(--rose); }
.contact-map iframe{ width:100%; height:100%; min-height:340px; border:0; filter:grayscale(.3) contrast(1.05); }

/* --- Pied de page ---------------------------------------------------------- */
footer.site{ background:#111; color:#cfcacd; text-align:center; padding:60px 20px 40px; }
footer.site .brand-name{ font-family:var(--serif); font-size:1.8rem; color:#fff; }
footer.site .fnav{ display:flex; gap:26px; justify-content:center; flex-wrap:wrap; margin:22px 0;
  text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; }
footer.site .fnav a:hover{ color:var(--rose); }
footer.site .copy{ font-size:.74rem; color:#7d787b; margin-top:18px; letter-spacing:.05em; }

/* --- Panier & modales (drawer) -------------------------------------------- */
.overlay{ position:fixed; inset:0; background:rgba(20,16,18,.5); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .4s; z-index:200; }
.overlay.open{ opacity:1; visibility:visible; }
.drawer{ position:fixed; top:0; right:0; height:100%; width:420px; max-width:92vw; background:#fff;
  z-index:210; transform:translateX(100%); transition:transform .5s cubic-bezier(.5,0,.2,1);
  display:flex; flex-direction:column; box-shadow:var(--shadow); }
.drawer.open{ transform:none; }
.drawer .d-head{ display:flex; align-items:center; justify-content:space-between; padding:26px 28px;
  border-bottom:1px solid var(--line); }
.drawer .d-head h3{ font-size:1.5rem; }
.drawer .d-close{ background:none; border:none; font-size:1.4rem; color:var(--ink); }
.drawer .d-body{ padding:22px 28px; overflow-y:auto; flex:1; }
.drawer .d-foot{ padding:22px 28px; border-top:1px solid var(--line); }

.cart-item{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.cart-item img{ width:66px; height:66px; object-fit:cover; }
.cart-item .ci-body{ flex:1; }
.cart-item .ci-title{ font-family:var(--serif); font-size:1.05rem; }
.cart-item .ci-price{ color:var(--rose-dark); font-size:.9rem; }
.cart-item .ci-controls{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.qty-btn{ width:26px; height:26px; border:1px solid var(--line); background:#fff; font-size:1rem; line-height:1; }
.ci-remove{ background:none; border:none; color:var(--ink-soft); font-size:.72rem; text-decoration:underline; margin-left:auto; }
.cart-total-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px; }
.cart-total-row .t-label{ text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; color:var(--ink-soft); }
.cart-total-row .t-val{ font-family:var(--serif); font-size:1.7rem; }

/* --- Checkout / paiement --------------------------------------------------- */
.pay-list{ display:flex; flex-direction:column; gap:10px; }
/* Les options de paiement ne doivent pas hériter du style « label majuscule » des formulaires */
.pay-option{ border:1px solid var(--line); padding:14px 16px; cursor:pointer; transition:border-color .3s, background .3s;
  text-transform:none; letter-spacing:normal; text-align:left; margin-bottom:0; }
.pay-option.sel{ border-color:var(--rose); background:#fdf6f9; }
.pay-option .po-top{ display:grid; grid-template-columns:20px 1fr; align-items:center; column-gap:10px;
  font-size:.95rem; text-transform:none; letter-spacing:normal; text-align:left; }
.pay-option .po-top input{ margin:0; }
.pay-option .po-top span{ font-weight:400; text-align:left; }
.pay-option .po-note{ font-size:.78rem; color:var(--ink-soft); margin-top:6px; padding-left:30px;
  text-transform:none; letter-spacing:normal; line-height:1.5; text-align:left; }
.pay-option .po-note b{ color:var(--rose-dark); }
.momo-fields{ margin-top:12px; padding-left:26px; display:none; }
.pay-option.sel .momo-fields.show{ display:block; }

/* --- Lightbox galerie ------------------------------------------------------ */
.lightbox{ position:fixed; inset:0; background:rgba(15,12,14,.92); z-index:300; display:none;
  align-items:center; justify-content:center; padding:30px; }
.lightbox.open{ display:flex; }
.lightbox img, .lightbox video{ max-width:90vw; max-height:88vh; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.lightbox .lb-close{ position:absolute; top:24px; right:30px; color:#fff; font-size:2rem; background:none; border:none; }

/* --- Toast ----------------------------------------------------------------- */
.toast{ position:fixed; bottom:28px; left:50%; transform:translate(-50%,20px); background:var(--ink);
  color:#fff; padding:14px 26px; letter-spacing:.06em; font-size:.85rem; z-index:400; opacity:0;
  transition:all .4s; pointer-events:none; }
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* --- Message de confirmation ---------------------------------------------- */
.notice{ background:#f6ecf1; border:1px solid var(--rose-light); padding:22px 24px; text-align:center;
  margin-top:20px; display:none; }
.notice.show{ display:block; animation:heroIn .6s ease; }
.notice h4{ font-size:1.4rem; color:var(--rose-dark); margin-bottom:6px; }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width:980px){
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .booking-wrap,.about-wrap,.contact-wrap,.promo-grid{ grid-template-columns:1fr; }
  .about-imgs .img2{ display:none; }
  .booking-visual{ min-height:260px; }
}
@media (max-width:640px){
  section{ padding:78px 0; }
  .nav-links{ position:fixed; top:0; right:0; height:100vh; width:78vw; background:#fff; flex-direction:column;
    justify-content:center; align-items:center; gap:26px; transform:translateX(100%); transition:transform .5s; z-index:120; }
  .nav-links.open{ transform:none; }
  .nav-links a{ color:var(--ink)!important; font-size:.9rem; }
  .burger{ display:block; background:none; border:none; z-index:130; }
  .burger span{ display:block; width:24px; height:2px; background:currentColor; margin:5px 0; transition:.3s; }
  header.nav:not(.scrolled) .burger{ color:#fff; }
  .grid-3,.grid-4,.gallery-grid{ grid-template-columns:1fr 1fr; }
  .form-2{ grid-template-columns:1fr; }
  .booking-form{ padding:36px 24px; }
  .drawer{ width:100%; }
}