/* ================================================================
   MES CADEAUX — style.css  v6
   Rose #E91E63 | Or #C9A84C | Ivoire #FFFBF7
   ================================================================ */

:root {
  --rose:       #E91E63;
  --rose-deep:  #C2185B; /* <-- C'EST CETTE LIGNE QUI MANQUAIT ! */
  --rose-pale:  #FFF0F4;
  --rose-blush: #FADADD;
  --gold:       #C9A84C;
  --gold-b:     #E8C97A;
  --gold-pale:  #FBF4E3;
  --ivory:      #FFFBF7;
  --ivory-d:    #F5EFE6;
  --sand:       #EDE4D7;
  --sand-d:     #D6CABC;
  --mocha:      #6B5B4E;
  --mocha-l:    #9C8878;
  --blush:      #7A5565;
  --tr:         all 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html   { scroll-behavior: smooth; }
body   { font-family: 'Jost', sans-serif; background: var(--ivory); color: var(--mocha); overflow-x: hidden; }
h1, h2, h3 { font-family: 'Playfair Display', serif; line-height: 1.1; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--ivory-d); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--rose), var(--gold)); border-radius: 2px; }

.btn-rose {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 36px;
  background: linear-gradient(135deg, var(--rose), var(--rose-deep));
  color: #fff; font-family: 'Jost', sans-serif; font-weight: 400;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  border: none; border-radius: 40px; cursor: pointer;
  box-shadow: 0 8px 28px rgba(233,30,99,.28);
  transition: var(--tr); text-decoration: none;
  position: relative; overflow: hidden;
}
.btn-rose::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,.15); transform:scaleX(0); transform-origin:left; transition:transform .5s; }
.btn-rose:hover::after { transform:scaleX(1); }
.btn-rose:hover { transform:translateY(-3px); box-shadow:0 14px 40px rgba(233,30,99,.38); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 34px; background: transparent; border: 1.5px solid var(--sand-d);
  color: var(--mocha-l); font-family: 'Jost', sans-serif;
  font-weight: 400; font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; border-radius: 40px;
  cursor: pointer; transition: var(--tr); text-decoration: none;
}
.btn-ghost:hover { border-color: var(--rose); color: var(--rose); transform: translateY(-2px); }

.wa-float {
  position: fixed; bottom: 28px; right: 24px; z-index: 850;
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  background: linear-gradient(135deg, #25D366, #128C7E);
  border-radius: 50px; padding: 12px 20px 12px 14px;
  box-shadow: 0 6px 24px rgba(37,211,102,.42);
  transition: var(--tr);
  animation: waPulse 2.8s ease-in-out infinite;
  max-width: 56px; overflow: hidden;
}
.wa-float:hover { max-width: 260px; box-shadow: 0 10px 34px rgba(37,211,102,.55); animation: none; }
.wa-float-icon  { font-size: 26px; flex-shrink: 0; }
.wa-float-label { color: #fff; font-size: 12px; font-weight: 500; letter-spacing: .06em; white-space: nowrap; opacity: 0; transition: opacity .35s .1s; }
.wa-float:hover .wa-float-label { opacity: 1; }
@keyframes waPulse {
  0%, 100% { box-shadow: 0 6px 24px rgba(37,211,102,.42); }
  50%       { box-shadow: 0 6px 32px rgba(37,211,102,.65), 0 0 0 9px rgba(37,211,102,.1); }
}

nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: 74px; padding: 0 6%;
  display: flex; align-items: center; justify-content: space-between;
  transition: var(--tr);
}
nav.sc { background: rgba(255,251,247,.96); backdrop-filter: blur(18px); box-shadow: 0 1px 0 var(--sand); height: 62px; }
.nav-logo { font-family: 'Playfair Display', serif; font-size: 21px; font-style: italic; color: var(--mocha); text-decoration: none; }
.nav-logo span { color: var(--rose); }
.nav-links { display: flex; gap: 34px; list-style: none; }
.nav-links a { color: var(--mocha-l); text-decoration: none; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; transition: color .3s; position: relative; }
.nav-links a::after { content:''; position:absolute; bottom:-3px; left:0; width:0; height:1px; background:var(--rose); transition:width .35s; }
.nav-links a:hover { color: var(--rose); }
.nav-links a:hover::after { width: 100%; }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-cart-btn { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mocha); background: var(--rose-pale); border: 1px solid var(--rose-blush); padding: 8px 18px; border-radius: 30px; cursor: pointer; transition: var(--tr); }
.nav-cart-btn:hover { background: var(--rose-blush); }
.cart-badge { width: 18px; height: 18px; background: var(--rose); color: #fff; font-size: 10px; font-weight: 600; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform .3s; }
.cart-badge.bump { transform: scale(1.5); }

.hero {
  min-height: 100vh;
  background: linear-gradient(150deg, var(--ivory) 0%, var(--rose-pale) 45%, var(--gold-pale) 100%);
  display: flex; align-items: center;
  position: relative; overflow: hidden; padding: 0 7%;
}
.hero-petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-orb { position: absolute; right: -80px; top: 50%; transform: translateY(-50%); width: 680px; height: 680px; border-radius: 50%; background: radial-gradient(ellipse, rgba(233,30,99,.08) 0%, rgba(232,201,122,.06) 60%, transparent 80%); pointer-events: none; }
.petal { position: absolute; width: var(--s); height: var(--s); background: var(--c); border-radius: 60% 40% 70% 30%/50% 60% 40% 50%; opacity: var(--o); animation: drift var(--d) ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-18px) rotate(12deg); } }
.hero-content { position: relative; z-index: 2; max-width: 580px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--mocha-l); margin-bottom: 28px; }
.eyebrow::before, .eyebrow::after { content:''; width:28px; height:1px; background:var(--sand-d); }
.hero-title { font-size: clamp(48px, 6vw, 82px); font-weight: 700; color: var(--mocha); margin-bottom: 10px; letter-spacing: -.02em; }
.hero-title em { font-style: italic; background: linear-gradient(135deg, var(--rose), var(--rose-deep)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: block; }
.hero-sub { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 21px; font-weight: 300; color: var(--mocha-l); line-height: 1.65; margin-bottom: 46px; max-width: 440px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-visual { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); width: 420px; display: flex; align-items: center; justify-content: center; }
.hero-visual img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  animation: flt 7s ease-in-out infinite;
  filter: drop-shadow(0 24px 48px rgba(233,30,99,.25));
}
@keyframes flt { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-14px) rotate(1deg); } }
.sc-hint { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 9px; letter-spacing: .25em; text-transform: uppercase; color: var(--sand-d); }
.sc-bar { width: 1px; height: 44px; background: linear-gradient(var(--rose), transparent); animation: scb 2.2s ease-in-out infinite; }
@keyframes scb { 0% { transform:scaleY(0); transform-origin:top; } 50% { transform:scaleY(1); transform-origin:top; } 51% { transform:scaleY(1); transform-origin:bottom; } 100% { transform:scaleY(0); transform-origin:bottom; } }

.ticker { background: var(--rose); padding: 13px 0; overflow: hidden; }
.t-inner { display: flex; gap: 56px; animation: tick 22s linear infinite; white-space: nowrap; }
.t-item  { display: flex; align-items: center; gap: 14px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.85); flex-shrink: 0; }
.t-gem   { color: var(--gold-b); }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.sec-tag   { display: inline-block; font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--rose); font-weight: 500; margin-bottom: 14px; }
.sec-title { font-size: clamp(30px, 4vw, 50px); font-weight: 700; color: var(--mocha); line-height: 1.15; }
.sec-sub   { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 18px; font-weight: 300; color: var(--mocha-l); line-height: 1.7; margin-top: 12px; }

.reassurance { padding: 56px 6%; background: linear-gradient(135deg, var(--rose-pale) 0%, var(--gold-pale) 50%, var(--ivory) 100%); position: relative; overflow: hidden; }
.r-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.r-card { background: rgba(255,251,247,.52); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(201,168,76,.28); border-radius: 18px; padding: 26px 20px; display: flex; align-items: center; gap: 16px; position: relative; overflow: hidden; transition: transform .38s cubic-bezier(.22,.61,.36,1), box-shadow .38s, border-color .3s; }
.r-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:0; transition:opacity .38s; }
.r-card:hover { transform:translateY(-8px); box-shadow:0 20px 50px rgba(201,168,76,.2),0 0 0 1px rgba(201,168,76,.42); border-color:rgba(201,168,76,.55); }
.r-card:hover::before { opacity:1; }
.r-icon-wrap { width:52px; height:52px; flex-shrink:0; border-radius:13px; font-size:22px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--rose-pale),var(--rose-blush)); border:1px solid var(--rose-blush); }
.r-icon-wrap.gold { background:linear-gradient(135deg,var(--gold-pale),rgba(201,168,76,.15)); border-color:rgba(201,168,76,.3); }
.r-num { font-family:'Playfair Display',serif; font-size:28px; font-weight:700; line-height:1; }
.r-num sup { font-size:.45em; }
.r-num.rose { color:var(--rose); }
.r-num.gold { background:linear-gradient(135deg,var(--gold),var(--gold-b)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.r-label    { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--mocha-l); margin-top:3px; }
.r-sub      { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:12px; color:var(--sand-d); margin-top:2px; }

.cat-sec   { padding: 88px 6% 32px; background: var(--ivory); text-align: center; }
.cat-pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 36px; }
.cp { padding:11px 26px; border:1.5px solid var(--sand); background:var(--ivory); font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:400; color:var(--mocha-l); border-radius:40px; cursor:pointer; transition:var(--tr); }
.cp:hover { border-color:var(--rose-blush); color:var(--rose); background:var(--rose-pale); }
.cp.on    { background:var(--rose); border-color:var(--rose); color:#fff; box-shadow:0 6px 22px rgba(233,30,99,.25); }
.cp.on-g  { background:linear-gradient(135deg,var(--gold),var(--gold-b)); border-color:var(--gold); color:var(--mocha); box-shadow:0 6px 22px rgba(201,168,76,.25); }

.prods { padding: 36px 6% 96px; background: var(--ivory); }
.grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(286px, 1fr)); gap: 26px; }

.card { background: var(--ivory); border: 1.5px solid var(--sand); border-radius: 16px; overflow: hidden; position: relative; cursor: pointer; transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s, border-color .3s; }
.card:hover { transform:translateY(-9px); box-shadow:0 28px 60px rgba(107,91,78,.1),0 0 0 1px var(--rose-blush); border-color:var(--rose-blush); }
.card.him { background: #F7F5F2; border-color: var(--sand-d); }
.card.him:hover { border-color:rgba(201,168,76,.5); box-shadow:0 28px 60px rgba(107,91,78,.12),0 0 0 1px rgba(201,168,76,.3); }
.ci   { position:relative; aspect-ratio:4/3; overflow:hidden; }
.sls  { display:flex; height:100%; transition:transform .55s cubic-bezier(.22,.61,.36,1); }
.sl   { min-width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:60px; flex-shrink:0; }
.snav { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:5px; z-index:4; opacity:0; transition:opacity .3s; }
.card:hover .snav { opacity:1; }
.dot  { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; transition:background .3s,transform .3s; }
.dot.on { background:#fff; transform:scale(1.4); }
.sarr { position:absolute; top:50%; transform:translateY(-50%); width:100%; display:flex; justify-content:space-between; padding:0 10px; z-index:5; opacity:0; transition:opacity .3s; pointer-events:none; }
.card:hover .sarr { opacity:1; pointer-events:all; }
.sarr button { width:30px; height:30px; border-radius:50%; border:none; cursor:pointer; background:rgba(255,251,247,.88); color:var(--mocha); font-size:13px; backdrop-filter:blur(6px); transition:background .3s; }
.sarr button:hover { background:var(--rose); color:#fff; }
.cbadge { position:absolute; top:12px; left:12px; padding:5px 12px; border-radius:20px; font-size:9px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; z-index:3; }
.bb { background:var(--rose); color:#fff; }
.bn { background:var(--gold); color:#fff; }
.be { background:linear-gradient(135deg,var(--gold),var(--gold-b)); color:var(--mocha); }
.bh { background:var(--mocha); color:var(--gold-b); }
.cwish { position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; background:rgba(255,251,247,.9); border:1px solid var(--sand); display:flex; align-items:center; justify-content:center; font-size:14px; cursor:pointer; z-index:3; opacity:0; transform:scale(.8); transition:opacity .3s,transform .3s,background .3s; }
.card:hover .cwish { opacity:1; transform:scale(1); }
.cwish:hover { background:var(--rose-pale); color:var(--rose); }
.cqv { position:absolute; bottom:0; left:0; right:0; background:rgba(255,251,247,.92); backdrop-filter:blur(10px); border-top:1px solid var(--sand); color:var(--rose); font-size:10px; letter-spacing:.2em; text-transform:uppercase; text-align:center; padding:13px; transform:translateY(100%); transition:transform .42s cubic-bezier(.22,.61,.36,1); cursor:pointer; z-index:3; border-left:none; border-right:none; border-bottom:none; width:100%; }
.card:hover .cqv { transform:translateY(0); }
.cbody { padding:19px 20px 22px; }
.ccat  { font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--rose); font-weight:500; margin-bottom:5px; }
.card.him .ccat { color:var(--gold); }
.cname { font-family:'Playfair Display',serif; font-size:16px; font-weight:600; color:var(--mocha); margin-bottom:5px; line-height:1.3; }
.card.him .cname { color:#4A3728; }
.cdesc { font-size:11px; color:var(--mocha-l); line-height:1.65; margin-bottom:14px; }
.cfoot { display:flex; align-items:center; justify-content:space-between; }
.cprice { font-family:'Playfair Display',serif; font-size:19px; font-weight:700; color:var(--mocha); }
.cprice sub { font-size:11px; font-family:'Jost',sans-serif; font-weight:300; color:var(--mocha-l); }
.cadd  { width:36px; height:36px; border-radius:50%; background:var(--rose-pale); border:1.5px solid var(--rose-blush); color:var(--rose); font-size:19px; font-weight:300; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--tr); }
.cadd:hover { background:var(--rose); color:#fff; transform:rotate(90deg) scale(1.1); }
.card.him .cadd { background:rgba(201,168,76,.1); border-color:rgba(201,168,76,.3); color:var(--gold); }
.card.him .cadd:hover { background:var(--gold); color:#fff; }

.modal { position:fixed; inset:0; z-index:8000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(255,251,247,.72); backdrop-filter:blur(18px); opacity:0; pointer-events:none; transition:opacity .4s; }
.modal.on { opacity:1; pointer-events:all; }
.mbox { background:var(--ivory); border:1px solid var(--sand); border-radius:20px; max-width:860px; width:100%; max-height:90vh; overflow-y:auto; display:grid; grid-template-columns:1fr 1fr; transform:scale(.93) translateY(24px); transition:transform .42s cubic-bezier(.22,.61,.36,1); position:relative; }
.modal.on .mbox { transform:scale(1) translateY(0); }
.mgal  { background:var(--ivory-d); border-radius:20px 0 0 20px; overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; font-size:96px; min-height:340px; }
.mtr   { position:absolute; bottom:14px; left:14px; display:flex; gap:6px; }
.mt    { width:46px; height:46px; border-radius:8px; background:var(--ivory); border:2px solid transparent; display:flex; align-items:center; justify-content:center; font-size:22px; cursor:pointer; transition:border-color .3s; }
.mt.on { border-color:var(--rose); }
.mi    { padding:38px 34px; display:flex; flex-direction:column; }
.mcl   { position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; background:var(--sand); border:none; cursor:pointer; color:var(--mocha-l); font-size:15px; display:flex; align-items:center; justify-content:center; transition:background .3s; }
.mcl:hover { background:var(--rose); color:#fff; }
.mcat-l { font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--rose); margin-bottom:8px; }
.mt-l   { font-family:'Playfair Display',serif; font-size:26px; font-weight:700; color:var(--mocha); margin-bottom:6px; }
.mp-l   { font-family:'Playfair Display',serif; font-size:24px; font-weight:700; color:var(--rose); margin-bottom:18px; }
.md-l   { font-size:13px; color:var(--mocha-l); line-height:1.75; margin-bottom:20px; }
.mi-tl  { font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--sand-d); margin-bottom:8px; }
.mpls   { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:24px; }
.pill   { padding:5px 12px; border-radius:20px; background:var(--ivory-d); border:1px solid var(--sand); font-size:11px; color:var(--mocha-l); }
.macts  { display:flex; gap:10px; margin-top:auto; }

.drawer-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(107,91,78,.22); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity .38s;
}
.drawer-overlay.on { opacity: 1; pointer-events: all; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(500px, 96vw); z-index: 1200;
  background: var(--ivory);
  border-left: 1px solid var(--sand);
  box-shadow: -12px 0 48px rgba(107,91,78,.14);
  transform: translateX(105%);
  transition: transform .48s cubic-bezier(.22,.61,.36,1);
  display: flex; flex-direction: column;
}
.drawer.on { transform: translateX(0); }

.drawer-head {
  padding: 22px 24px 18px;
  border-bottom: 1.5px solid var(--sand);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--ivory);
  flex-shrink: 0;
}
.drawer-head-left { display: flex; align-items: center; gap: 12px; }
.drawer-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 600; color: var(--mocha);
}
.drawer-count-pill {
  background: var(--rose-pale); color: var(--rose);
  border: 1px solid var(--rose-blush);
  padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 500; letter-spacing: .04em;
}
.drawer-close {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--sand); border: none; cursor: pointer;
  color: var(--mocha-l); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s;
}
.drawer-close:hover { background: var(--rose); color: #fff; }

.drawer-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  scroll-behavior: smooth;
}
.drawer-scroll::-webkit-scrollbar { width: 2px; }
.drawer-scroll::-webkit-scrollbar-thumb { background: var(--rose-blush); }

.drawer-empty-state {
  padding: 72px 32px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.empty-emoji { font-size: 64px; margin-bottom: 20px; filter: grayscale(.3); }
.empty-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 600; color: var(--mocha);
  margin-bottom: 8px;
}
.empty-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 16px;
  color: var(--mocha-l); margin-bottom: 24px; line-height: 1.6;
}
.btn-browse {
  padding: 12px 32px; border-radius: 40px;
  background: var(--rose-pale); border: 1.5px solid var(--rose-blush);
  color: var(--rose); font-family: 'Jost', sans-serif;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; transition: var(--tr);
}
.btn-browse:hover { background: var(--rose); color: #fff; }

.cart-section-label {
  padding: 18px 24px 10px;
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mocha-l); font-weight: 500;
}

.cart-item-card {
  margin: 0 16px 10px;
  background: var(--ivory-d);
  border: 1.5px solid var(--sand);
  border-radius: 16px;
  padding: 14px;
  display: flex; align-items: flex-start; gap: 14px;
  transition: border-color .3s;
}
.cart-item-card:hover { border-color: var(--rose-blush); }

.cart-item-thumb {
  width: 64px; height: 64px;
  border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  border: 1px solid var(--sand);
  background: var(--ivory);
}

.cart-item-details { flex: 1; min-width: 0; }
.cart-item-name {
  font-family: 'Playfair Display', serif;
  font-size: 14px; font-weight: 600; color: var(--mocha);
  margin-bottom: 3px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cart-item-unit-price {
  font-size: 11px; color: var(--mocha-l); margin-bottom: 10px;
}
.cart-item-unit-price span {
  color: var(--rose); font-weight: 500;
}

.cart-item-bottom {
  display: flex; align-items: center; justify-content: space-between;
}
.qty-controls {
  display: flex; align-items: center; gap: 6px;
}
.qty-btn {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--sand); background: var(--ivory);
  color: var(--mocha); font-size: 15px; font-weight: 400;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: var(--tr); line-height: 1;
}
.qty-btn:hover { background: var(--rose); border-color: var(--rose); color: #fff; }
.qty-num {
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 600; color: var(--mocha);
  min-width: 22px; text-align: center;
}
.cart-item-line-price {
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 700; color: var(--mocha);
}
.cart-item-del {
  background: none; border: none; cursor: pointer;
  color: var(--sand-d); font-size: 16px; padding: 4px;
  border-radius: 50%; transition: all .25s; align-self: flex-start;
}
.cart-item-del:hover { color: var(--rose); background: var(--rose-pale); }

.order-summary {
  margin: 8px 16px 0;
  background: white;
  border: 1.5px solid var(--sand);
  border-radius: 18px;
  padding: 20px;
}
.summary-heading {
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 600; color: var(--mocha);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sand);
}
.summary-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0;
  font-size: 13px; color: var(--mocha-l);
  border-bottom: 1px solid rgba(237,228,215,.5);
}
.summary-row:last-of-type { border-bottom: none; }
.summary-total {
  font-family: 'Playfair Display', serif;
  font-size: 19px; font-weight: 700; color: var(--mocha);
  padding-top: 10px; margin-top: 4px;
}
.free-badge {
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  color: #2E7D32; border-radius: 20px;
  padding: 3px 10px; font-size: 11px; font-weight: 500;
}

.deposit-box {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px;
  background: linear-gradient(135deg, var(--gold-pale), rgba(201,168,76,.08));
  border: 1.5px solid rgba(201,168,76,.35);
  border-radius: 12px; padding: 14px 16px;
}
.deposit-box-title {
  font-size: 12px; font-weight: 500; color: var(--mocha);
  margin-bottom: 3px;
}
.deposit-box-sub {
  font-size: 10px; color: var(--mocha-l); letter-spacing: .04em;
}
.deposit-box-amount {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 700;
  background: linear-gradient(135deg, var(--gold), var(--gold-b));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}

.checkout-block {
  margin: 12px 16px 0;
  background: white;
  border: 1.5px solid var(--sand);
  border-radius: 18px;
  padding: 20px;
}
.checkout-block:last-child { margin-bottom: 32px; }

.checkout-step-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500; color: var(--mocha);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sand);
}
.step-circle {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--rose); color: #fff;
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.form-fields { display: flex; flex-direction: column; gap: 11px; margin-bottom: 16px; }
.form-field  { display: flex; flex-direction: column; gap: 5px; }
.form-lbl {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mocha-l); font-weight: 400;
}
.form-inp {
  padding: 11px 14px;
  border: 1.5px solid var(--sand); border-radius: 10px;
  background: var(--ivory-d); font-family: 'Jost', sans-serif;
  font-size: 13px; color: var(--mocha); outline: none;
  transition: border-color .3s; resize: none; width: 100%;
}
.form-inp::placeholder { color: var(--sand-d); }
.form-inp:focus { border-color: var(--rose-blush); box-shadow: 0 0 0 3px rgba(233,30,99,.06); }

.btn-next {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, var(--rose), var(--rose-deep));
  color: #fff; border: none; border-radius: 40px; cursor: pointer;
  font-family: 'Jost', sans-serif; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 6px 22px rgba(233,30,99,.28);
  transition: var(--tr);
}
.btn-next:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(233,30,99,.38); }

.deposit-banner {
  background: var(--rose-pale);
  border: 1.5px solid var(--rose-blush);
  border-radius: 12px; padding: 14px 16px;
  margin-bottom: 16px;
}
.deposit-banner-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--blush);
}
.deposit-banner-row strong { color: var(--rose); font-weight: 600; }
.deposit-banner-row.secondary { margin-top: 6px; font-size: 11px; color: var(--mocha-l); }

.pay-methods-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }

.pay-method-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
  border: 1.5px solid var(--sand);
  border-radius: 13px; background: var(--ivory-d);
  cursor: pointer; transition: var(--tr);
  position: relative;
}
.pay-method-item input[type="radio"] {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.pay-method-item:hover { border-color: var(--rose-blush); background: var(--rose-pale); }
.pay-method-item:has(input:checked) {
  border-color: var(--rose); background: var(--rose-pale);
  box-shadow: 0 4px 18px rgba(233,30,99,.12);
}
.pay-method-item:has(input[value="dahabia"]):has(input:checked),
.pay-method-item:has(input[value="ccp"]):has(input:checked) {
  border-color: var(--gold); background: var(--gold-pale);
  box-shadow: 0 4px 18px rgba(201,168,76,.15);
}

.pay-method-icon-wrap {
  width: 42px; height: 42px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0; border: 1px solid transparent;
}
.pay-method-icon-wrap.dah { background: rgba(201,168,76,.12); border-color: rgba(201,168,76,.25); }
.pay-method-icon-wrap.ccp { background: rgba(201,168,76,.12); border-color: rgba(201,168,76,.25); }
.pay-method-icon-wrap.pal { background: rgba(0,112,201,.08); border-color: rgba(0,112,201,.2); }
.pay-method-icon-wrap.red { background: rgba(233,30,99,.07); border-color: rgba(233,30,99,.18); }
.pay-method-icon-wrap.cod { background: rgba(76,175,80,.08); border-color: rgba(76,175,80,.2); }

.pay-method-text { flex: 1; }
.pay-method-name { font-size: 13px; font-weight: 500; color: var(--mocha); margin-bottom: 2px; }
.pay-method-desc { font-size: 11px; color: var(--mocha-l); }

.pay-method-check {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--sand);
  display: flex; align-items: center; justify-content: center;
  transition: all .25s; flex-shrink: 0;
}
.pay-method-item:has(input:checked) .pay-method-check {
  background: var(--rose); border-color: var(--rose);
}
.pay-method-item:has(input:checked) .pay-method-check::after {
  content: ''; width: 6px; height: 6px;
  background: white; border-radius: 50%;
}

.pay-details-card {
  background: var(--gold-pale);
  border: 1.5px solid rgba(201,168,76,.3);
  border-radius: 12px; padding: 16px;
  margin-bottom: 14px;
  animation: slideDown .3s ease both;
}
@keyframes slideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

.pay-details-title {
  font-family: 'Playfair Display', serif;
  font-size: 14px; font-weight: 600;
  color: var(--gold); margin-bottom: 10px;
}
.pay-detail-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 6px 0; border-bottom: 1px solid rgba(201,168,76,.15);
  font-size: 12px;
}
.pay-detail-row:last-child { border-bottom: none; }
.pay-detail-key { color: var(--mocha-l); flex-shrink: 0; margin-right: 12px; }
.pay-detail-val {
  font-weight: 500; color: var(--mocha); text-align: right;
  user-select: all;
}
.pay-detail-note {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid rgba(201,168,76,.2);
  font-size: 11px; color: var(--mocha-l); font-style: italic;
  line-height: 1.6;
}

.step2-actions { display: flex; gap: 10px; }
.btn-back-step {
  padding: 13px 16px; border-radius: 40px;
  border: 1.5px solid var(--sand); background: transparent;
  color: var(--mocha-l); font-family: 'Jost', sans-serif;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; transition: var(--tr); white-space: nowrap;
}
.btn-back-step:hover { border-color: var(--mocha); color: var(--mocha); }
.btn-confirm {
  flex: 1; padding: 13px;
  background: linear-gradient(135deg, var(--rose), var(--rose-deep));
  color: #fff; border: none; border-radius: 40px; cursor: pointer;
  font-family: 'Jost', sans-serif; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 6px 22px rgba(233,30,99,.28);
  transition: var(--tr);
}
.btn-confirm:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(233,30,99,.38); }

.perso { background: var(--ivory); overflow: hidden; }
.inspo { padding: 96px 6% 80px; background: linear-gradient(160deg, var(--rose-pale) 0%, var(--gold-pale) 60%, var(--ivory) 100%); position: relative; text-align: center; overflow: hidden; }
.orb1  { position:absolute; left:-120px; top:-80px; width:440px; height:440px; border-radius:50%; background:radial-gradient(circle,rgba(233,30,99,.12),transparent 70%); pointer-events:none; }
.orb2  { position:absolute; right:-100px; bottom:-60px; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle,rgba(201,168,76,.12),transparent 70%); pointer-events:none; }
.inspo-lbl { display:inline-flex; align-items:center; gap:10px; font-size:9px; letter-spacing:.28em; text-transform:uppercase; color:var(--rose); margin-bottom:22px; }
.inspo-t   { font-size:clamp(38px,5vw,68px); font-weight:700; color:var(--mocha); line-height:1.1; margin-bottom:16px; }
.inspo-t em { font-style:italic; color:var(--rose); }
.inspo-s   { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:20px; color:var(--mocha-l); margin-bottom:52px; line-height:1.6; }
.igifts { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; margin-bottom:52px; }
.igcard { width:154px; background:var(--ivory); border:1.5px solid var(--sand); border-radius:16px; padding:22px 14px 18px; text-align:center; transition:var(--tr); cursor:pointer; animation:fltC 5s ease-in-out infinite; }
.igcard:nth-child(2){animation-delay:.8s} .igcard:nth-child(3){animation-delay:1.6s} .igcard:nth-child(4){animation-delay:2.4s} .igcard:nth-child(5){animation-delay:1.2s}
@keyframes fltC { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.igcard:hover { border-color:var(--rose); box-shadow:0 16px 40px rgba(233,30,99,.15); transform:translateY(-6px) scale(1.04); }
.igcard-i { font-size:38px; margin-bottom:10px; }
.igcard-n { font-family:'Playfair Display',serif; font-size:13px; font-weight:600; color:var(--mocha); line-height:1.3; margin-bottom:4px; }
.igcard-t { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--rose); }

.quiz  { padding: 72px 6% 56px; background: var(--ivory); display: none; }
.quiz.vis { display: block; }
.qinner { max-width: 640px; margin: 0 auto; }
.qhd   { text-align: center; margin-bottom: 48px; }
.qprog    { display:flex; align-items:flex-start; justify-content:center; margin-bottom:44px; max-width:420px; margin-left:auto; margin-right:auto; }
.qps      { display:flex; flex-direction:column; align-items:center; gap:5px; flex:1; }
.qpc      { width:32px; height:32px; border-radius:50%; border:2px solid var(--sand); background:var(--ivory); display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--sand-d); font-weight:500; transition:var(--tr); }
.qpl-line { flex:1; height:1px; background:var(--sand); margin-top:15px; transition:background .5s; }
.qps.dn .qpc   { background:var(--gold); border-color:var(--gold); color:#fff; }
.qps.ac .qpc   { background:var(--rose); border-color:var(--rose); color:#fff; box-shadow:0 0 0 5px rgba(233,30,99,.15); }
.qpl-label     { font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--sand-d); margin-top:4px; text-align:center; }
.qps.ac .qpl-label { color:var(--rose); }
.qps.dn .qpl-label { color:var(--gold); }
.qblk         { display:none; text-align:center; }
.qblk.on      { display:block; animation:qIn .48s ease both; }
.qblk.leaving { animation:qOut .25s ease both; }
@keyframes qIn  { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes qOut { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-16px)} }
.qt    { font-family:'Playfair Display',serif; font-size:28px; font-weight:600; color:var(--mocha); margin-bottom:8px; }
.qhint { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:17px; color:var(--mocha-l); margin-bottom:32px; line-height:1.6; }
.qchoices { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); justify-content:center; max-width:580px; margin:0 auto; }
.qch { padding:20px 14px; border-radius:14px; border:1.5px solid var(--sand); background:var(--ivory-d); text-align:center; cursor:pointer; transition:var(--tr); display:flex; flex-direction:column; align-items:center; gap:8px; }
.qch:hover { border-color:var(--rose-blush); background:var(--rose-pale); transform:translateY(-3px); box-shadow:0 8px 24px rgba(233,30,99,.1); }
.qch.sel   { border-color:var(--rose); background:var(--rose-pale); box-shadow:0 4px 18px rgba(233,30,99,.18); transform:translateY(-3px); }
.qch.gold-ch:hover { border-color:rgba(201,168,76,.5); background:var(--gold-pale); box-shadow:0 8px 24px rgba(201,168,76,.14); }
.qch.gold-ch.sel   { border-color:var(--gold); background:var(--gold-pale); box-shadow:0 4px 18px rgba(201,168,76,.2); }
.qch-i { font-size:30px; }
.qch-n { font-size:13px; font-weight:500; color:var(--mocha); line-height:1.3; }
.qch-d { font-size:11px; color:var(--mocha-l); line-height:1.5; }
.qnav   { display:flex; justify-content:center; gap:12px; margin-top:36px; }
.btn-back { padding:12px 28px; border-radius:40px; border:1.5px solid var(--sand); background:transparent; color:var(--mocha-l); font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:var(--tr); }
.btn-back:hover { border-color:var(--mocha-l); color:var(--mocha); }

.recap-wrap  { padding: 0 6% 96px; background: var(--ivory); display: none; }
.recap-wrap.vis { display: block; animation: qIn .55s ease both; }
.recap-inner { max-width: 640px; margin: 0 auto; }
.recap-box { background:linear-gradient(135deg,var(--rose-pale),var(--gold-pale)); border:1.5px solid var(--rose-blush); border-radius:20px; padding:36px; margin-bottom:32px; }
.recap-title { font-family:'Playfair Display',serif; font-size:22px; font-weight:600; color:var(--mocha); text-align:center; margin-bottom:24px; }
.recap-list  { list-style:none; display:flex; flex-direction:column; gap:12px; }
.recap-item  { display:flex; align-items:center; gap:14px; background:rgba(255,255,255,.7); border:1px solid var(--rose-blush); border-radius:40px; padding:12px 22px; font-size:14px; color:var(--blush); }
.recap-item-icon { font-size:18px; flex-shrink:0; }
.recap-item strong { color:var(--mocha); margin-right:4px; }
.contact-title { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:19px; color:var(--mocha-l); text-align:center; margin-bottom:24px; line-height:1.6; }
.contact-form  { display:flex; flex-direction:column; gap:14px; margin-bottom:28px; }
.form-label    { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--mocha-l); display:block; margin-bottom:5px; }
.form-input    { width:100%; padding:14px 18px; border:1.5px solid var(--sand); border-radius:12px; background:var(--ivory-d); font-family:'Jost',sans-serif; font-size:14px; color:var(--mocha); outline:none; transition:border-color .3s; }
.form-input::placeholder { color:var(--sand-d); }
.form-input:focus { border-color:var(--rose-blush); box-shadow:0 0 0 3px rgba(233,30,99,.07); }
.wa-send-btn { width:100%; padding:17px; background:linear-gradient(135deg,#25D366,#128C7E); color:#fff; border:none; border-radius:40px; cursor:pointer; font-family:'Jost',sans-serif; font-size:13px; letter-spacing:.16em; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:10px; box-shadow:0 8px 28px rgba(37,211,102,.28); transition:var(--tr); }
.wa-send-btn:hover { transform:translateY(-3px); box-shadow:0 14px 40px rgba(37,211,102,.38); }
.wa-note { text-align:center; font-size:11px; color:var(--sand-d); margin-top:10px; letter-spacing:.06em; }

.testi { padding:90px 6%; background:var(--ivory-d); }
.tgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:20px; margin-top:54px; }
.tc    { background:var(--ivory); border:1.5px solid var(--sand); border-radius:16px; padding:28px; position:relative; transition:var(--tr); }
.tc:hover { transform:translateY(-5px); border-color:var(--rose-blush); box-shadow:0 18px 44px rgba(233,30,99,.08); }
.tc::before { content:'"'; position:absolute; top:-6px; left:22px; font-family:'Playfair Display',serif; font-size:72px; color:var(--rose-blush); line-height:1; pointer-events:none; }
.tc-photo { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; margin-bottom:14px; display:block; }
.tstars { color:var(--gold); font-size:13px; letter-spacing:3px; margin-bottom:14px; }
.ttxt   { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:15px; color:var(--mocha-l); line-height:1.75; margin-bottom:18px; }
.tauth  { display:flex; align-items:center; gap:12px; }
.tav    { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--rose),var(--gold)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:500; flex-shrink:0; }
.tnm    { font-size:12px; font-weight:500; color:var(--mocha); }
.tdt    { font-size:10px; color:var(--mocha-l); margin-top:2px; }

.review-form-sec { padding: 80px 6%; background: var(--ivory-d); text-align: center; }

/* ── Cartes avis simplifiées (étoiles + prénom) ── */
.tc-simple { padding: 22px 18px; text-align: center; }
.tc-simple .tstars { font-size: 20px; letter-spacing: 4px; margin-bottom: 12px; }
.tc-simple .tav    { width: 32px; height: 32px; font-size: 11px; flex-shrink: 0; }
.tc-simple .tnm    { font-size: 13px; font-weight: 500; color: var(--mocha); }
.tc-simple::before { display: none; }
.tgrid             { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; margin-top:40px; }
.review-form-box {
  max-width: 520px; margin: 40px auto 0;
  background: var(--ivory); border: 1.5px solid var(--sand);
  border-radius: 20px; padding: 36px 32px;
}
.review-stars-input { display: flex; justify-content: center; gap: 8px; margin-bottom: 26px; }
.review-stars-input .rs {
  font-size: 36px; color: var(--sand-d); cursor: pointer;
  transition: color .15s, transform .15s;
  user-select: none;
}
.review-stars-input .rs.on     { color: var(--gold); transform: scale(1.15); }
.review-stars-input .rs.hover  { color: var(--gold-b); transform: scale(1.1); }
.review-note { margin-top: 16px; font-size: 11px; color: var(--mocha-l); letter-spacing: .04em; }

.review-photo-upload {
  display: flex; align-items: center; justify-content: center;
  min-height: 90px; border: 1.5px dashed var(--sand-d);
  border-radius: 12px; background: var(--ivory-d);
  cursor: pointer; transition: var(--tr); overflow: hidden;
}
.review-photo-upload:hover { border-color: var(--rose-blush); background: var(--rose-pale); }
.review-photo-upload span {
  font-size: 12px; color: var(--mocha-l); letter-spacing: .04em;
}
.review-photo-upload img {
  width: 100%; height: 100%; max-height: 160px; object-fit: cover; display: block;
}

/* ── NOS CREATIONS — Carrousel horizontal ── */
.creations-sec { padding: 80px 0 60px; background: var(--ivory); }
.cr-wrap { position: relative; }
.cr-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--ivory); border: 1.5px solid var(--sand);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--mocha); cursor: pointer; z-index: 10;
  transition: var(--tr); box-shadow: 0 2px 14px rgba(107,91,78,.12);
}
.cr-arrow:hover { background: var(--rose); color: #fff; border-color: var(--rose); }
.cr-left  { left: 10px; }
.cr-right { right: 10px; }
.cr-track {
  display: flex; gap: 10px;
  overflow-x: auto; overflow-y: hidden;
  scroll-behavior: smooth;
  padding: 6px 60px 16px;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab; align-items: flex-end;
}
.cr-track::-webkit-scrollbar { display: none; }
.cr-track.grabbing { cursor: grabbing; }
.cr-card {
  flex-shrink: 0; width: 200px; height: 260px;
  border-radius: 14px; overflow: hidden; position: relative;
  border: 1.5px solid var(--sand); transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.cr-card.cr-tall { height: 310px; }
.cr-card:hover { transform: translateY(-6px); border-color: var(--rose-blush); }
.cr-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
.cr-card:hover img { transform: scale(1.05); }
.cr-ph {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  font-size: 26px;
}
.cr-ph span {
  font-family: 'Jost', sans-serif; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mocha-l);
}
.cr-hint {
  text-align: center; margin-top: 10px;
  font-family: 'Jost', sans-serif; font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sand-d);
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.cr-hint-line { width: 28px; height: 1px; background: var(--sand-d); }
.cr-wa-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 40px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff; font-family: 'Jost', sans-serif;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  border: none; border-radius: 40px; cursor: pointer; text-decoration: none;
  box-shadow: 0 8px 28px rgba(37,211,102,.28); transition: var(--tr);
}
.cr-wa-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(37,211,102,.38); }

footer { background:var(--ivory-d); border-top:1px solid var(--sand); padding:64px 6% 28px; }
.fgrid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:44px; margin-bottom:44px; }
.flogo { font-family:'Playfair Display',serif; font-size:22px; font-style:italic; color:var(--mocha); margin-bottom:12px; }
.flogo span { color:var(--rose); }
.ftag  { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:15px; color:var(--mocha-l); line-height:1.7; margin-bottom:22px; max-width:250px; }
.fsoc  { display:flex; gap:9px; }
.fsb   { width:36px; height:36px; border-radius:50%; border:1px solid var(--sand); display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--mocha-l); text-decoration:none; transition:var(--tr); }
.fsb svg { display:block; }
.fsb:hover { background:var(--rose-pale); border-color:var(--rose-blush); color:var(--rose); transform:translateY(-3px); }
.fct   { font-size:9px; letter-spacing:.25em; text-transform:uppercase; color:var(--gold); font-weight:500; margin-bottom:18px; }
.flinks { list-style:none; }
.flinks li { margin-bottom:9px; }
.flinks a  { font-size:12px; color:var(--mocha-l); text-decoration:none; transition:color .3s; }
.flinks a:hover { color:var(--rose); }
.fbot  { border-top:1px solid var(--sand); padding-top:22px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.fbot p, .fbot a { font-size:10px; color:var(--sand-d); letter-spacing:.05em; text-decoration:none; }
.fbot a:hover { color:var(--rose); }

.sl-img {
  padding: 0;
  overflow: hidden;
}
/* ════════════════════════════════════════
   FIX FINAL : IMAGES PC + HERO PC
   ════════════════════════════════════════ */

/* 1. RÉGLER LES PHOTOS SUR PC (remplir le cadre proprement) */
.sl-img {
  padding: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.sl-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ça remplit le cadre sans couper l'image sur PC */
  object-position: center;
  display: block;
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
.card:hover .sl-img img { transform: scale(1.04); }

.mgal-full-img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* La grande photo dans la modale reste entière */
  border-radius: 20px 0 0 20px;
  display: block;
}
#mgalM {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
@media (max-width:860px) {
  .mgal-full-img { border-radius: 20px 20px 0 0; }
}

/* 2. EMPÊCHER LE LOGO HERO DE COUVRIR LE TEXTE SUR PC */
.hero-visual {
  pointer-events: none; /* Le logo ne bloque plus la sélection du texte */
  z-index: 1;
}
/* Sur les écrans d'ordinateur moyens (ex: 13 pouces), on réduit le logo */
@media (min-width: 861px) and (max-width: 1280px) {
  .hero-visual {
    width: 300px !important;
    right: 2% !important;
  }
  .hero-content {
    max-width: 500px !important; /* On laisse plus de place au texte */
  }
}

/* 3. GARDER LE BON RÉGLAGE POUR LE MOBILE (SANS LE CASSER) */
@media (max-width: 680px) {
  .ci {
    aspect-ratio: 1 / 1; /* Carré parfait sur mobile */
    height: auto;
    background: var(--ivory-d);
  }
  .mgal {
    height: 350px;
    min-height: 350px;
  }
}
.card:hover .sl-img img { transform: scale(1.04); }

.mgal-full-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 20px 0 0 20px;
  display: block;
}
#mgalM {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
@media (max-width:860px) {
  .mgal-full-img { border-radius: 20px 20px 0 0; }
}

.color-variants-label {
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mocha-l); margin-bottom: 8px; margin-top: 4px;
}
#mColors { margin-bottom: 20px; }
.color-variants { display: flex; flex-wrap: wrap; gap: 8px; }
.color-btn {
  padding: 6px 14px; border-radius: 20px;
  border: 1.5px solid var(--sand); background: var(--ivory-d);
  color: var(--mocha); font-family: 'Jost', sans-serif;
  font-size: 11px; font-weight: 400;
  cursor: pointer; transition: var(--tr);
}
.color-btn:hover { border-color: var(--rose-blush); background: var(--rose-pale); color: var(--rose); }
.color-btn.sel {
  background: var(--rose); border-color: var(--rose);
  color: #fff; box-shadow: 0 4px 14px rgba(233,30,99,.22);
}

.cart-item-color {
  display: inline-block;
  font-size: 10px; font-family: 'Jost', sans-serif;
  color: var(--rose);
  background: var(--rose-pale);
  border: 1px solid var(--rose-blush);
  border-radius: 20px; padding: 2px 9px;
  margin-bottom: 8px;
}

#checkoutSuccess {
  padding: 48px 24px 56px;
}
.success-inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.success-icon {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, var(--rose), var(--rose-deep));
  color: #fff; font-size: 36px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(233,30,99,.28);
  animation: successPop .55s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes successPop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.success-title {
  font-family: 'Playfair Display', serif;
  font-size: 26px; font-weight: 700; color: var(--mocha);
  margin-bottom: 20px;
}
.success-ref-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--gold-pale);
  border: 1.5px solid rgba(201,168,76,.35);
  border-radius: 12px; padding: 14px 32px;
  margin-bottom: 24px;
}
.success-ref-label {
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mocha-l);
}
.success-ref {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700;
  background: linear-gradient(135deg, var(--gold), var(--gold-b));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.success-msg {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 16px;
  color: var(--mocha-l); line-height: 1.75;
  margin-bottom: 32px; max-width: 340px;
}
.success-msg strong { color: var(--rose); font-style: normal; font-weight: 600; }
.btn-continue {
  padding: 14px 36px; border-radius: 40px;
  background: linear-gradient(135deg, var(--rose), var(--rose-deep));
  color: #fff; border: none; cursor: pointer;
  font-family: 'Jost', sans-serif; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 6px 22px rgba(233,30,99,.28);
  transition: var(--tr);
}
.btn-continue:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(233,30,99,.38); }

.toast { position:fixed; bottom:100px; left:50%; transform:translateX(-50%) translateY(16px); background:var(--rose); color:#fff; padding:13px 28px; border-radius:40px; font-size:11px; letter-spacing:.15em; text-transform:uppercase; z-index:9999; opacity:0; transition:all .4s; pointer-events:none; white-space:nowrap; box-shadow:0 8px 28px rgba(233,30,99,.3); }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

.fade     { opacity:0; transform:translateY(26px); transition:opacity .65s ease,transform .65s ease; }
.fade.in  { opacity:1; transform:translateY(0); }

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--rose-pale);
  border: 1.5px solid var(--rose-blush);
  cursor: pointer;
  padding: 9px 8px;
  transition: var(--tr);
}
.nav-burger:hover { background: var(--rose-blush); }
.nav-burger span {
  display: block; width: 100%; height: 2px;
  background: var(--rose); border-radius: 2px;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), opacity .25s;
  transform-origin: center;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu-overlay {
  position: fixed; inset: 0; z-index: 1290;
  background: rgba(107,91,78,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .38s;
}
.mobile-menu-overlay.on { opacity: 1; pointer-events: all; }

.mobile-menu {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(320px, 88vw);
  z-index: 1300;
  background: var(--ivory);
  border-left: 1px solid var(--sand);
  box-shadow: -16px 0 64px rgba(107,91,78,.18);
  transform: translateX(110%);
  transition: transform .44s cubic-bezier(.22,.61,.36,1);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.mobile-menu.on { transform: translateX(0); }

.mm-head {
  padding: 24px 20px 18px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1.5px solid var(--sand);
  background: linear-gradient(135deg, var(--rose-pale), var(--gold-pale));
  flex-shrink: 0;
}
.mm-logo {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-style: italic; color: var(--mocha);
}
.mm-logo em { font-style: italic; color: var(--rose); font-style: normal; }
.mm-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.7); border: 1px solid var(--sand);
  color: var(--mocha-l); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s;
}
.mm-close:hover { background: var(--rose); color: #fff; }

.mm-nav {
  padding: 12px 0;
  flex: 1;
}
.mm-link {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 20px;
  text-decoration: none;
  border-bottom: 1px solid rgba(237,228,215,.5);
  transition: background .25s, padding-left .25s;
  cursor: pointer;
}
.mm-link:hover {
  background: var(--rose-pale);
  padding-left: 26px;
}
.mm-link:last-child { border-bottom: none; }
.mm-link-icon {
  font-size: 22px; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ivory-d); border-radius: 10px;
  border: 1px solid var(--sand); flex-shrink: 0;
}
.mm-link-text {
  flex: 1;
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 600; color: var(--mocha);
}
.mm-link-arrow {
  font-size: 18px; color: var(--sand-d);
  transition: transform .25s, color .25s;
}
.mm-link:hover .mm-link-arrow { transform: translateX(4px); color: var(--rose); }

.mm-divider {
  height: 1px; background: var(--sand);
  margin: 0 20px;
}

.mm-actions {
  padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.mm-btn-cart {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px;
  background: linear-gradient(135deg, var(--rose), var(--rose-deep));
  color: #fff; border: none; border-radius: 40px; cursor: pointer;
  font-family: 'Jost', sans-serif; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 6px 22px rgba(233,30,99,.28);
  transition: var(--tr); position: relative;
}
.mm-btn-cart:hover { transform: translateY(-2px); }
.mm-cart-badge {
  background: #fff; color: var(--rose);
  font-size: 11px; font-weight: 700;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.mm-btn-wa {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff; text-decoration: none; border-radius: 40px;
  font-family: 'Jost', sans-serif; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 6px 22px rgba(37,211,102,.28);
  transition: var(--tr);
}
.mm-btn-wa:hover { transform: translateY(-2px); }

.mm-foot {
  padding: 20px;
  border-top: 1px solid var(--sand);
  background: var(--ivory-d);
  flex-shrink: 0;
}
.mm-foot-text {
  font-size: 12px; color: var(--mocha-l);
  margin-bottom: 6px; line-height: 1.5;
}
.mm-foot-soc {
  display: flex; gap: 10px; margin-top: 12px;
}
.mm-foot-soc a {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--sand); background: var(--ivory);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; text-decoration: none;
  transition: var(--tr);
  color: var(--mocha-l);
}
.mm-foot-soc a svg { display: block; }
.mm-foot-soc a:hover { background: var(--rose-pale); border-color: var(--rose-blush); transform: translateY(-2px); }

@media (max-width:1100px) {
  .hero-visual { width: 300px; }
  .fgrid { grid-template-columns: 1fr 1fr; }
  .r-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width:860px) {
  .nav-links    { display: none; }
  .nav-burger   { display: flex; }
  .nav-cart-label { display: none; }

  .hero-visual  { display: none; }
  .hero-content { max-width: 100%; }
  .mbox         { grid-template-columns: 1fr; }
  .mgal         { border-radius: 20px 20px 0 0; min-height: 220px; }
  .fgrid        { grid-template-columns: 1fr 1fr; }
  .r-grid       { grid-template-columns: 1fr 1fr; }
}

@media (max-width:580px) {
  .grid     { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .fgrid    { grid-template-columns: 1fr; }
  .igifts   { gap: 12px; }
  .igcard   { width: 130px; }
  .qchoices { grid-template-columns: repeat(2,1fr); }
  .r-grid   { grid-template-columns: 1fr; }
  .wa-float { padding: 12px 14px; }
  nav { padding: 0 4%; }
  .nav-cart-btn { padding: 8px 12px; font-size: 10px; }
  .ci { aspect-ratio: 1/1; }
}

/* ─────────────────────────────────────────────────────────────
   NOUVEAUX STYLES : FORMULAIRE CARTE BANCAIRE (Dahabia)
───────────────────────────────────────────────────────────── */
.cc-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}
.cc-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cc-field label {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mocha-l);
  font-weight: 400;
}
.cc-field input {
  padding: 12px 14px;
  border: 1.5px solid var(--sand);
  border-radius: 10px;
  background: var(--ivory-d);
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  color: var(--mocha);
  outline: none;
  transition: border-color .3s, box-shadow .3s;
  width: 100%;
}
.cc-field input::placeholder { color: var(--sand-d); }
.cc-field input:focus {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(233,30,99,.08);
  background: #fff;
}
.satim-note {
  text-align: center;
  font-size: 11px;
  color: var(--mocha-l);
  font-style: italic;
  margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────────
   NOUVEAUX STYLES : BLOC COORDONNÉES CCP / BARIDI MOB
───────────────────────────────────────────────────────────── */
.ccp-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(201,168,76,.3);
}
.ccp-info-row:last-of-type { border-bottom: none; }
.ccp-label {
  font-size: 12px; font-weight: 500; color: var(--mocha);
}
.ccp-val-group {
  display: flex; align-items: center; gap: 8px;
}
.ccp-val {
  font-family: 'Jost', sans-serif;
  font-weight: 500; color: var(--mocha);
  font-size: 14px;
  letter-spacing: 0.5px;
  background: var(--ivory);
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--sand);
}
.btn-copy {
  background: var(--gold-pale);
  border: 1px solid rgba(201,168,76,.4);
  color: var(--mocha);
  padding: 5px 12px;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 20px;
  cursor: pointer;
  transition: all .25s;
}
.btn-copy:hover {
  background: var(--gold); color: #fff; border-color: var(--gold);
}
.btn-copy.copied {
  background: #25D366; color: #fff; border-color: #25D366;
}
.ccp-note {
  margin-top: 14px;
  padding: 14px;
  background: rgba(233, 30, 99, 0.04);
  border-left: 3px solid var(--rose);
  border-radius: 0 8px 8px 0;
  font-size: 12px;
  color: var(--mocha);
  line-height: 1.7;
}









/* ════════════════════════════════════════
   FIX MOBILE — Cartes produits + Détail
   Même méthode qu'Allium : hauteur fixe + cover
   ════════════════════════════════════════ */
@media (max-width: 680px) {

  /* Cartes produits dans la grille */
  .ci {
    aspect-ratio: unset;
    height: 240px;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .sl-img {
    margin: 0;
    padding: 0;
  }
  /* Cartes produits dans la grille */
  .ci {
    aspect-ratio: unset;
    height: 240px;
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--ivory-d);
  }
  .sl-img {
    margin: 0;
    padding: 0;
  }
  .sl-img img {
    width: 220px;
    height: 240px;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0;
    padding: 0;
    background: var(--ivory-d);
  }

  /* Modal détail produit — photo entière visible, sans coupe */
  .mgal {
    height: 420px;
    min-height: 320px;
    margin: 0;
    padding: 0;
    background: var(--ivory-d);
  }
  .mgal-full-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0;
    padding: 0;
    background: var(--ivory-d);
  }
}



/*pour menue de version mobile */
/* ════════════════════════════════════════
   FIX MENU MOBILE — réécriture complète et blindée
   ════════════════════════════════════════ */
.mobile-menu {
  position: fixed !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important;
  width: min(320px, 88vw) !important;
  z-index: 1300 !important;
  background: var(--ivory) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
}

.mm-head {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  flex-shrink: 0 !important;
  padding: 24px 20px 18px !important;
}
.mm-logo { position: relative !important; }
.mm-close {
  position: relative !important;
  flex-shrink: 0 !important;
  width: 32px !important; height: 32px !important;
}

.mm-nav {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  flex: 1 !important;
  padding: 12px 0 !important;
}
.mm-link {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.mm-link-icon, .mm-link-text, .mm-link-arrow {
  position: relative !important;
}

.mm-actions, .mm-foot {
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}





/* ── CARROUSEL MOBILE : FLECHES + GLISSEMENT DOIGT ── */
@media (max-width: 680px) {
  .cr-arrow {
    display: flex !important;
    width: 36px;
    height: 36px;
    font-size: 18px;
    z-index: 15;
  }
  
  .cr-track {
    overflow-x: auto;
    /* Les 2 lignes suivantes FORCENT le glissement naturel du doigt */
    touch-action: pan-x !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 6px 50px 16px;
  }