/* ============================================================
   MARGARITA NAIL ARTISTE — Design System
   « Boudoir poudré » · crèmes tièdes + roses blush + prunes
   or champagne en accent rare · vouvoiement · romantique
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Jost:wght@300;400;500;600&family=Parisienne&display=swap');

:root {
  /* — Surfaces : crèmes ivoire tièdes — */
  --cream:        #FBF5EF;
  --cream-deep:   #F6ECE4;
  --white:        #FFFDFB;
  --line:         #EFE0DC;   /* filet teinté rose, très doux */

  /* — Prunes / mauves (remplacent le noir) — */
  --ink:          #5A3A44;   /* texte courant, prune chaleureux */
  --ink-soft:     #8E747C;   /* texte secondaire mauve poudré */
  --ink-deep:     #2E2025;   /* prune quasi-noir : titres & boutons */

  /* — Roses / blush : le cœur émotionnel — */
  --blush:        #F3DAD6;   /* pétale très pâle */
  --blush-2:      #E7BFBC;
  --rose:         #C97B85;   /* rose franc — accents */
  --rose-deep:    #B05E6B;   /* rose terreux profond */

  /* — Or champagne : accent rare, « luxe discret » — */
  --gold:         #C2A269;
  --gold-deep:    #A98850;
  --gold-soft:    #E2CFA3;

  /* compat anciennes variables */
  --lilac:        #E7BFBC;
  --blue:         #E7BFBC;

  /* — Type — */
  --f-serif:  'Cormorant Garamond', Georgia, serif;
  --f-sans:   'Jost', system-ui, sans-serif;
  --f-script: 'Parisienne', cursive;

  /* — Rythme — */
  --maxw: 1240px;
  --pad:  clamp(20px, 5vw, 64px);
  --r:    22px;
  --shadow:      0 34px 80px -34px rgba(90, 58, 68, 0.30);
  --shadow-soft: 0 22px 56px -30px rgba(90, 58, 68, 0.24);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--blush); color: var(--ink-deep); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--f-serif);
  font-weight: 500;
  font-style: italic;          /* couture, raffiné, manuscrit */
  color: var(--ink-deep);
  margin: 0; line-height: 1.08; letter-spacing: 0.005em;
}

.script {
  font-family: var(--f-script);
  font-weight: 400;
  font-style: normal;
  color: var(--rose-deep);     /* le rose, cœur émotionnel */
  line-height: 0.9;
}

.eyebrow {
  font-family: var(--f-sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  font-size: 0.72rem;
  color: var(--rose);
}

.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink-soft); font-weight: 300; }

/* filet doré décoratif — accent « luxe » rare */
.flourish { display:inline-flex; align-items:center; gap:14px; color: var(--gold); }
.flourish::before, .flourish::after {
  content:""; height:1px; width:46px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.section { padding: clamp(72px, 11vw, 140px) 0; }
.center { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--ink-deep);
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-sans); font-weight: 500; font-size: 0.82rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 16px 32px; border-radius: 100px; border: 1px solid transparent;
  background: var(--bg); color: #FBF5EF; cursor: pointer;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, background .3s;
  box-shadow: 0 16px 34px -18px rgba(46, 32, 37, 0.6);
}
.btn:hover { transform: translateY(-3px); background: var(--rose-deep); box-shadow: 0 24px 44px -18px rgba(176, 94, 107, 0.55); }
.btn .arrow { transition: transform .4s; }
.btn:hover .arrow { transform: translateX(5px); }

.btn.ghost {
  background: transparent; color: var(--ink-deep); border-color: var(--rose);
  box-shadow: none;
}
.btn.ghost:hover { background: var(--rose-deep); color:#FBF5EF; border-color: var(--rose-deep); }

.btn.light { background: var(--white); color: var(--ink-deep); box-shadow: var(--shadow-soft); }
.btn.light:hover { background: var(--blush); color: var(--ink-deep); }

/* ---------- Cards & misc ---------- */
.card {
  background: var(--white); border-radius: var(--r);
  box-shadow: var(--shadow-soft); border: 1px solid var(--line);
}

.tag {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color: var(--rose-deep); font-weight:500;
}

/* image-slot default look */
image-slot { background: var(--cream-deep); }

/* ---------- NAV ---------- */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad);
  transition: background .4s, box-shadow .4s, padding .4s;
}
.site-nav.scrolled {
  background: rgba(251,245,239,0.86);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(176,94,107,0.14);
  padding-top: 12px; padding-bottom: 12px;
}
.brand { display:flex; flex-direction:column; line-height:1; }
.brand .b-name { font-family: var(--f-script); font-size: 1.95rem; color: var(--rose-deep); }
.brand .b-sub { font-family: var(--f-sans); font-size:.58rem; letter-spacing:.46em; text-transform:uppercase; color: var(--ink-soft); margin-top:3px; padding-left:3px; }

.nav-links { display:flex; align-items:center; gap: 30px; }
.nav-links a {
  font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; font-weight:400;
  color: var(--ink); position:relative; padding: 6px 0;
}
.nav-links a::after {
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background: var(--rose); transition: width .35s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-links a.active { color: var(--rose-deep); }

.nav-cta { margin-left: 8px; }
.nav-links a.btn { color: #FBF5EF; padding: 15px 38px; white-space: nowrap; }
.nav-links a.btn:hover { color: #FBF5EF; }
.nav-links a.btn::after { display: none; }

.burger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.burger span { width:26px; height:2px; background: var(--ink-deep); transition: .3s; }

.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--cream); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap: 26px;
  transform: translateY(-100%); transition: transform .5s cubic-bezier(.7,0,.2,1);
}
.mobile-menu.open { transform: translateY(0); }
.mobile-menu a { font-family: var(--f-serif); font-style: italic; font-size: 2rem; color: var(--ink-deep); }
.mobile-menu a.active { color: var(--rose-deep); }
.mobile-menu .close { position:absolute; top:24px; right:26px; font-size:2rem; background:none;border:none;color:var(--ink-deep);cursor:pointer; }

/* ---------- FOOTER ---------- */
.site-footer {
  background: var(--ink-deep); color: #F3E7E4; padding: clamp(60px,8vw,96px) 0 32px;
}
.site-footer a { color: #F3E7E4; opacity:.8; transition: opacity .3s; }
.site-footer a:hover { opacity:1; }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
.footer-brand .b-name { font-family: var(--f-script); font-size: 2.7rem; color: var(--blush); }
.footer-col h4 { font-family: var(--f-sans); font-style: normal; font-weight:500; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color: var(--blush-2); margin-bottom:18px; }
.footer-col a, .footer-col p { display:block; font-size:.92rem; margin-bottom:10px; opacity:.78; }
.socials { display:flex; gap:14px; margin-top:20px; }
.socials a {
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(243,218,214,.32);
  display:flex;align-items:center;justify-content:center; opacity:.85;
  transition: background .3s, color .3s, border-color .3s;
}
.socials a:hover { background: var(--rose); color: var(--ink-deep); border-color: var(--rose); opacity:1; }
.socials svg { width:18px; height:18px; }
.footer-bottom { margin-top: 56px; padding-top: 24px; border-top:1px solid rgba(243,218,214,.16); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.78rem; opacity:.6; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity:0; transform: translateY(28px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}.reveal.d4{transition-delay:.4s}

/* page top spacer so fixed nav doesn't cover content */
.page-top { padding-top: clamp(120px, 16vw, 180px); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .nav-links { display:none; }
  .burger { display:flex; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
}