/* =============================================================
   DREAM DESIGN v2 — FEUILLE DE STYLES
   Polices : DM Serif Display (titres) + Raleway (corps & nav)
   ============================================================= */

/* ─── GOOGLE FONTS ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Raleway:wght@300;400;500;600&display=swap');

/* ─── VARIABLES ─────────────────────────────────────────────── */
:root {
  --white:      #FFFFFF;
  --bg:         #FAFAFA;
  --gray-50:    #F7F7F7;
  --gray-100:   #F0F0F0;
  --gray-200:   #E5E5E5;
  --gray-300:   #D0D0D0;
  --gray-400:   #BBBBBB;
  --gray-500:   #888888;
  --gray-700:   #444444;
  --dark:       #222222;
  --black:      #111111;

  /* ✦ NOUVELLES POLICES v2 */
  --font-serif: 'DM Serif Display', Georgia, serif;
  --font-sans:  'Raleway', 'Helvetica Neue', Arial, sans-serif;

  --nav-h:    68px;
  --max-w:    1320px;
  --radius:   4px;
  --trans:    all .28s ease;
}

/* ─── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html  { scroll-behavior:smooth; font-size:16px; overflow-x:hidden; }
body  { font-family:var(--font-sans); font-weight:300; background:var(--white); color:var(--dark); overflow-x:hidden; }
a     { text-decoration:none; color:inherit; }
img   { display:block; width:100%; height:100%; object-fit:cover; }
ul    { list-style:none; }
button{ font-family:var(--font-sans); cursor:pointer; }

/* ─── HELPERS ────────────────────────────────────────────────── */
.container { max-width:var(--max-w); margin:0 auto; padding:0 40px; }
.section-pad { padding:90px 0; }

.lbl {
  display:inline-block;
  font-family:var(--font-sans);
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gray-500);
  margin-bottom:14px;
}
.lbl::before { content:'— '; }

h2.serif {
  font-family:var(--font-serif);
  font-size:clamp(2rem, 3.5vw, 3rem);
  font-weight:400;
  line-height:1.2;
  color:var(--black);
  letter-spacing:-.01em;
}
h2.serif em {
  font-style:italic;
  color:var(--gray-700);
}

/* ─── NAVIGATION ─────────────────────────────────────────────── */
#navbar {
  position:fixed; top:0; left:0; right:0;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--gray-200);
  z-index:1000;
  transition:box-shadow .3s;
}
#navbar.shadowed { box-shadow:0 4px 24px rgba(0,0,0,.07); }
#navbar > .container { width:100%; }

.nav-inner { display:flex; align-items:center; justify-content:space-between; height:100%; }

.nav-logo img   { height:52px; width:auto; object-fit:contain; display:block; }
.nav-logo-text  {
  font-family:var(--font-serif);
  font-size:1.6rem; font-weight:400;
  color:var(--black); letter-spacing:.02em;
}

.nav-links { display:flex; align-items:center; gap:2px; }
.nav-links > li { position:relative; }

.nav-links a {
  display:block; padding:8px 13px;
  font-size:.7rem; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--gray-700); border-radius:var(--radius);
  transition:var(--trans);
}
.nav-links a:hover,
.nav-links a.active { color:var(--black); background:var(--gray-100); }

/* Dropdown */
.nav-links .has-drop.open > .dropdown {
  opacity:1; pointer-events:all; transform:translateY(0); visibility:visible;
}
.dropdown {
  position:absolute; top:calc(100% + 8px); left:0;
  min-width:210px; background:var(--white);
  border:1px solid var(--gray-200); border-radius:var(--radius);
  box-shadow:0 8px 32px rgba(0,0,0,.08);
  padding:8px; opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-6px); transition:var(--trans); z-index:100;
}
.dropdown a {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; font-size:.75rem; font-weight:400;
  color:var(--gray-700); border-radius:var(--radius);
  letter-spacing:.02em; text-transform:none;
  background:none;
}
.dropdown a:hover { background:var(--gray-50); color:var(--black); }
.dropdown a .cat-dot { width:7px; height:7px; border-radius:50%; background:var(--gray-300); flex-shrink:0; }

/* Pack badges in dropdown */
.dropdown a .badge-mariage { background:#f8e8f0; color:#b84c7d; font-size:.55rem; letter-spacing:.1em; text-transform:uppercase; padding:2px 7px; border-radius:10px; margin-left:auto; }
.dropdown a .badge-enfant  { background:#e8f4f8; color:#2e86ab; font-size:.55rem; letter-spacing:.1em; text-transform:uppercase; padding:2px 7px; border-radius:10px; margin-left:auto; }

.nav-cta {
  margin-left:8px;
  padding:9px 20px !important;
  background:var(--black) !important;
  color:var(--white) !important;
  border-radius:var(--radius) !important;
  font-size:.7rem !important;
  letter-spacing:.1em !important;
  transition:background .25s !important;
}
.nav-cta:hover { background:var(--gray-700) !important; }

/* Burger */
.burger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; background:none; border:none; }
.burger span { display:block; width:24px; height:2px; background:var(--black); transition:var(--trans); }
.burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity:0; }
.burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display:none; position:fixed;
  top:var(--nav-h); left:0; right:0;
  background:var(--white); border-bottom:1px solid var(--gray-200);
  padding:20px 24px 28px; z-index:999;
  box-shadow:0 8px 32px rgba(0,0,0,.08);
}
.mobile-nav.open { display:block; }
.mobile-nav a { display:block; padding:12px 0; font-size:.82rem; font-weight:500; color:var(--gray-700); border-bottom:1px solid var(--gray-100); }
.mobile-nav a:hover { color:var(--black); }
.mobile-nav-sub { padding-left:16px; }
.mobile-nav-sub a { font-size:.76rem; font-weight:300; color:var(--gray-500); }

/* ─── FLOATING SOCIAL ────────────────────────────────────────── */
.float-social {
  position:fixed; right:0; bottom:24px;
  z-index:900; display:flex; flex-direction:column; gap:2px;
}
.float-social a {
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%;
  transition:transform .25s, filter .25s;
}
.float-social a:hover { transform:translateX(-5px); filter:brightness(.88); }
.float-social .fs-wa { background:#25D366; }
.float-social .fs-ig { background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.float-social .fs-fb { background:#1877F2; }
.float-social a svg  { fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ─── SCROLL REVEAL ──────────────────────────────────────────── */
.reveal   { opacity:0; transform:translateY(32px); transition:opacity .65s ease, transform .65s ease; }
.reveal.up{ opacity:1; transform:translateY(0); }
.reveal-l { opacity:0; transform:translateX(-32px); transition:opacity .65s ease, transform .65s ease; }
.reveal-l.up { opacity:1; transform:translateX(0); }
.reveal-r { opacity:0; transform:translateX(32px); transition:opacity .65s ease, transform .65s ease; }
.reveal-r.up { opacity:1; transform:translateX(0); }
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s}
.d4{transition-delay:.4s} .d5{transition-delay:.5s} .d6{transition-delay:.6s}

/* ─── FOOTER ─────────────────────────────────────────────────── */
footer { background:var(--black); color:var(--white); padding:0; }

.footer-map { width:100%; height:300px; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-map iframe { width:100%; height:100%; border:none; }

.footer-body { padding:60px 0 0; }
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr auto;
  gap:40px; padding-bottom:50px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-col-qr { min-width:0; }

.footer-brand-logo img { height:48px; width:auto; background:#fff; padding:6px 10px; border-radius:6px; margin-bottom:14px; }
.footer-brand-logo .brand-name { font-family:var(--font-serif); font-size:1.55rem; color:var(--white); margin-bottom:4px; }
.footer-brand p { font-size:.78rem; font-weight:300; line-height:1.8; color:rgba(255,255,255,.4); max-width:260px; margin-top:14px; }

.footer-social { display:flex; gap:10px; margin-top:22px; }
.footer-social a {
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  transition:var(--trans);
}
.footer-social a:hover { border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.06); }
.footer-social svg { fill:none; stroke:rgba(255,255,255,.7); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.footer-col h4 { font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; font-weight:500; color:rgba(255,255,255,.3); margin-bottom:18px; }
.footer-col li { margin-bottom:10px; }
.footer-col a  { font-size:.8rem; font-weight:300; color:rgba(255,255,255,.45); transition:color .25s; }
.footer-col a:hover { color:rgba(255,255,255,.9); }

.footer-bottom { padding:20px 0; display:flex; justify-content:space-between; align-items:center; }
.footer-bottom p { font-size:.7rem; font-weight:300; color:rgba(255,255,255,.22); }

/* ─── BACK TO TOP ────────────────────────────────────────────── */
#btt {
  position:fixed; bottom:32px; right:56px;
  width:40px; height:40px; background:var(--black); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:800;
  opacity:0; transform:translateY(12px);
  transition:opacity .3s, transform .3s;
  box-shadow:0 4px 16px rgba(0,0,0,.2);
}
#btt.show { opacity:1; transform:translateY(0); }
#btt svg { fill:none; stroke:#fff; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }

/* ─── PRODUCT CARD (shared) ──────────────────────────────────── */
.prod-card {
  background:var(--white); border:1px solid var(--gray-200);
  border-radius:var(--radius); overflow:hidden;
  transition:box-shadow .3s, transform .3s;
  display:flex; flex-direction:column;
}
.prod-card:hover { box-shadow:0 14px 44px rgba(0,0,0,.10); transform:translateY(-5px); }

.prod-img { position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--gray-100); flex-shrink:0; }
.prod-img img { transition:transform .5s ease; }
.prod-card:hover .prod-img img { transform:scale(1.07); }

.prod-info { padding:18px; flex:1; display:flex; flex-direction:column; gap:8px; }
.prod-cat  { font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gray-500); font-weight:500; }
.prod-name { font-family:var(--font-serif); font-size:1.1rem; color:var(--black); line-height:1.25; }
.prod-price{ font-size:.88rem; font-weight:600; color:var(--black); }

.prod-colors { display:flex; gap:6px; align-items:center; margin-top:2px; }
.prod-colors .swatch { width:16px; height:16px; border-radius:50%; border:1.5px solid var(--gray-300); cursor:help; transition:transform .2s; }
.prod-colors .swatch:hover { transform:scale(1.3); }

.prod-dims { font-size:.7rem; color:var(--gray-500); display:flex; gap:10px; flex-wrap:wrap; font-weight:300; }

.prod-actions { display:flex; align-items:center; gap:8px; margin-top:4px; }
.prod-btn {
  flex:1; padding:9px; font-family:var(--font-sans);
  font-size:.65rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:500; border-radius:var(--radius);
  border:1px solid var(--gray-200); background:var(--white); color:var(--gray-700);
  transition:var(--trans); cursor:pointer;
}
.prod-btn:hover, .prod-btn.primary { background:var(--black); color:var(--white); border-color:var(--black); }
.prod-btn.primary { flex:2; }

/* ─── BREADCRUMB ─────────────────────────────────────────────── */
.breadcrumb { display:flex; align-items:center; gap:6px; font-size:.72rem; color:var(--gray-500); padding:14px 0; font-weight:300; }
.breadcrumb a { color:var(--gray-500); transition:color .2s; }
.breadcrumb a:hover { color:var(--black); }
.breadcrumb .sep { color:var(--gray-300); }
.breadcrumb .current { color:var(--black); font-weight:500; }

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width:1100px) { .footer-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:900px)  {
  .container { padding:0 24px; }
  .nav-links { display:none; }
  .burger { display:flex; }
  .section-pad { padding:64px 0; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:600px)  {
  .container { padding:0 16px; }
  .section-pad { padding:48px 0; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; gap:10px; text-align:center; }

  /* Stack back-to-top above the floating social icons instead of
     beside them — side-by-side leaves almost no gap on narrow screens */
  .float-social { bottom:16px; right:10px; gap:8px; }
  .float-social a { width:42px; height:42px; }
  #btt { right:16px; bottom:180px; width:38px; height:38px; }
}
/* Narrowest phones (iPhone SE 375px, Galaxy S20 360px, and smaller) —
   the 600px sizing still runs a little large on these, so tighten further */
@media (max-width:400px)  {
  .float-social { bottom:12px; right:8px; gap:6px; }
  .float-social a { width:38px; height:38px; }
  #btt { right:12px; bottom:154px; width:34px; height:34px; }
}