/* ==========================================================================
   WISHES — Configurateur public — V3
   Palette : ivoire / rose poudré / champagne / nude / doré doux.

   ─────────────────────────────────────────────────────────────────────
   CORRECTIF CRITIQUE (lire en premier)
   Le bug "lightbox / overlay ouvert au chargement" et "plusieurs étapes
   visibles au scroll" venait du CSS : des règles comme
   `.lightbox{ display:flex }` ou `.step-panel--split{ display:grid }`
   ont la MÊME spécificité que la règle native du navigateur
   `[hidden]{ display:none }`. Or une règle d'auteur (notre CSS) gagne
   toujours contre une règle de feuille de style "user-agent", même à
   spécificité égale. Résultat : dès qu'un panneau caché portait aussi
   une classe qui fixe `display`, l'attribut `hidden` était ignoré et
   l'élément restait visible.
   La règle ci-dessous, placée tout en haut et en !important, garantit
   que TOUT élément portant l'attribut `hidden` reste bien masqué, quelle
   que soit la classe qu'il porte par ailleurs.
   ───────────────────────────────────────────────────────────────────── */
[hidden]{
  display: none !important;
}

:root{
  /* --- Couleurs de base --- */
  --ivory:        #FCF7F1;
  --ivory-deep:   #F5EAE0;
  --white:        #FFFFFF;
  --blush:        #F6DFE4;
  --blush-mid:    #EAB8C4;
  --blush-deep:   #D98CA0;
  --blush-darker: #B96C82;
  --champagne:    #CDA35B;
  --champagne-light:#E7D3AC;
  --champagne-glow: rgba(205,163,91,0.38);
  --nude:         #EAD6C3;
  --text-main:    #42322C;
  --text-soft:    #8A7468;
  --text-faint:   #BBA999;
  --error:        #B25454;

  /* --- Verre / profondeur --- */
  --glass-bg:     rgba(255,255,255,0.6);
  --glass-bg-strong: rgba(255,255,255,0.82);
  --glass-border: rgba(255,255,255,0.75);
  --shadow-soft:  0 2px 6px rgba(154,108,90,0.06), 0 14px 34px rgba(154,108,90,0.13);
  --shadow-hover: 0 6px 14px rgba(154,108,90,0.1), 0 24px 48px rgba(154,108,90,0.2);
  --shadow-gold:  0 0 0 1px rgba(205,163,91,0.4), 0 10px 30px rgba(205,163,91,0.28);

  /* --- Typographie --- */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body:    'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-arabic:  'Amiri', 'Traditional Arabic', serif;

  /* --- Rayons --- */
  --radius-xl: 34px;
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --gap: 1.5rem;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  font-family: var(--font-body);
  color: var(--text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
  background: var(--ivory);
}

img{ max-width:100%; display:block; }
button{ font-family: inherit; cursor:pointer; }
a{ color: inherit; }

:focus-visible{
  outline: 2.5px solid var(--champagne);
  outline-offset: 3px;
  border-radius: 6px;
}

h1,h2,h3{ font-family: var(--font-display); margin:0; color: var(--text-main); }

/* ==========================================================================
   FOND ANIMÉ — halos, formes organiques, points lumineux
   Éléments décoratifs fixes, purement visuels (aria-hidden côté HTML).
   ========================================================================== */
.ambient-bg{
  position: fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 45% at 12% 8%, rgba(246,223,228,0.9) 0%, rgba(246,223,228,0) 60%),
    radial-gradient(ellipse 55% 50% at 92% 18%, rgba(231,211,172,0.75) 0%, rgba(231,211,172,0) 62%),
    radial-gradient(ellipse 60% 55% at 20% 92%, rgba(234,214,195,0.7) 0%, rgba(234,214,195,0) 60%),
    radial-gradient(ellipse 70% 60% at 85% 95%, rgba(217,140,160,0.25) 0%, rgba(217,140,160,0) 60%),
    var(--ivory);
}
.ambient-bg__blob{
  position:absolute; border-radius:50%; filter: blur(50px); opacity:.55;
  animation: floatBlob 22s ease-in-out infinite;
}
.ambient-bg__blob--1{ width:420px; height:420px; top:-120px; left:-100px; background: radial-gradient(circle, var(--blush) 0%, transparent 72%); animation-duration: 26s; }
.ambient-bg__blob--2{ width:380px; height:380px; top:10%; right:-140px; background: radial-gradient(circle, var(--champagne-light) 0%, transparent 72%); animation-duration: 30s; animation-delay: -6s; }
.ambient-bg__blob--3{ width:460px; height:460px; bottom:-160px; left:8%; background: radial-gradient(circle, var(--nude) 0%, transparent 72%); animation-duration: 34s; animation-delay: -12s; }
.ambient-bg__blob--4{ width:300px; height:300px; bottom:5%; right:6%; background: radial-gradient(circle, var(--blush-mid) 0%, transparent 72%); animation-duration: 24s; animation-delay: -3s; }
@keyframes floatBlob{
  0%, 100%{ transform: translate(0,0) scale(1); }
  33%{ transform: translate(30px,-25px) scale(1.08); }
  66%{ transform: translate(-24px,20px) scale(0.95); }
}
.ambient-bg__sparkles{ position:absolute; inset:0; }
.ambient-bg__sparkle{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background: var(--champagne); opacity:0; animation: twinkle 6s ease-in-out infinite;
}
@keyframes twinkle{
  0%, 100%{ opacity:0; transform: scale(.4); }
  50%{ opacity:.8; transform: scale(1.3); }
}

@media (prefers-reduced-motion: reduce){
  .ambient-bg__blob, .ambient-bg__sparkle{ animation: none !important; }
}

/* ==========================================================================
   EN-TÊTE / HERO
   ========================================================================== */
.wishes-header{
  padding: 2.6rem 1.25rem 2.2rem;
  text-align:center;
  position: relative;
}
.wishes-header__inner{ max-width: 720px; margin:0 auto; position:relative; }
.wishes-logo{
  display:inline-flex; align-items:center; gap:.65rem;
  text-decoration:none; margin-bottom: .9rem;
}
.wishes-logo__mark{
  width:46px; height:46px; border-radius:50%;
  background: linear-gradient(135deg, var(--champagne), var(--blush-deep));
  color:#fff; font-family: var(--font-display); font-weight:700; font-size:1.5rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-gold);
  position:relative;
}
.wishes-logo__mark::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border: 1.5px solid var(--champagne-glow);
}
.wishes-logo__text{
  font-family: var(--font-display); font-size: 2.1rem; font-weight:600;
  letter-spacing: .5px; color: var(--text-main);
}
.wishes-header__eyebrow{
  display:inline-flex; align-items:center; gap:.4rem;
  text-transform: uppercase; letter-spacing:.22em; font-size:.68rem; font-weight:600;
  color: var(--blush-darker); margin: 0 0 .8rem;
}
.wishes-header__title{
  font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight:600; margin: 0 0 .7rem; line-height:1.15;
  background: linear-gradient(120deg, var(--text-main) 20%, var(--blush-darker) 55%, var(--champagne) 85%);
  -webkit-background-clip: text; background-clip:text; -webkit-text-fill-color: transparent;
}
.wishes-header__tagline{
  margin: 0 auto; max-width: 480px; color: var(--text-soft); font-size: 1.02rem;
}
.wishes-header__icons{
  display:flex; justify-content:center; gap: 1.1rem; margin-top: 1.3rem; color: var(--champagne);
  opacity:.85;
}
.wishes-header__icons svg{ width:20px; height:20px; }

/* ==========================================================================
   STEPPER
   ========================================================================== */
.stepper{
  position: sticky; top:0; z-index: 40;
  background: rgba(252,247,241,0.85);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(205,163,91,0.18);
  padding: .8rem 1rem;
}
.stepper__mobile{ display:none; max-width: 640px; margin:0 auto; }
.stepper__mobile-label{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:.82rem; color:var(--text-soft); margin-bottom:.45rem; letter-spacing:.02em;
}
.stepper__mobile-label strong{ color: var(--text-main); font-weight:600; }
.stepper__mobile-track{
  height:5px; border-radius:6px; background: var(--ivory-deep); overflow:hidden;
}
.stepper__mobile-fill{
  height:100%; width: 11%; border-radius:6px;
  background: linear-gradient(90deg, var(--blush-deep), var(--champagne));
  transition: width .5s cubic-bezier(.4,0,.2,1);
}

.stepper__desktop{
  list-style:none; display:flex; justify-content:center; align-items:flex-start;
  gap: 0; max-width: 1100px; margin: 0 auto; padding:0;
}
.stepper__item{ display:flex; align-items:center; flex:1; min-width:0; }
.stepper__item:last-child .stepper__connector{ display:none; }
.stepper__bubble-wrap{ display:flex; flex-direction:column; align-items:center; gap:.4rem; flex-shrink:0; }
.stepper__bubble{
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--white); border: 1.5px solid var(--nude);
  color: var(--text-faint); font-weight:600; font-size:.85rem;
  transition: all .35s cubic-bezier(.34,1.56,.64,1);
}
.stepper__label{
  font-size:.7rem; color: var(--text-faint); text-align:center; max-width:90px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.stepper__connector{ flex:1; height:2px; background: var(--nude); margin: 0 2px; margin-top:-20px; transition: background .4s ease; position:relative; overflow:hidden; }
.stepper__item.is-active .stepper__bubble{
  background: linear-gradient(135deg, var(--blush-deep), var(--champagne));
  border-color: transparent; color:#fff;
  box-shadow: 0 0 0 5px rgba(205,163,91,0.16), 0 4px 14px rgba(217,140,160,0.4);
  transform: scale(1.14);
}
.stepper__item.is-active .stepper__label{ color: var(--text-main); font-weight:600; }
.stepper__item.is-done .stepper__bubble{ background: var(--champagne-light); border-color: var(--champagne); color: var(--champagne); }
.stepper__item.is-done .stepper__connector{ background: var(--champagne); }
.stepper__item.is-done .stepper__label{ color: var(--text-soft); }

@media (max-width: 860px){
  .stepper__label{ display:none; }
  .stepper__desktop{ display:none; }
  .stepper__mobile{ display:block; }
}

/* ==========================================================================
   CONTENEUR PRINCIPAL
   ========================================================================== */
.configurator-shell{ max-width: 1120px; margin: 0 auto; padding: 2.6rem 1.25rem 6rem; }
.configurator-main{ width:100%; position:relative; min-height: 320px; }

.step-panel{ animation: stepIn .5s cubic-bezier(.22,.61,.36,1); }
.step-panel.slide-back{ animation: stepInBack .5s cubic-bezier(.22,.61,.36,1); }
@keyframes stepIn{
  from{ opacity:0; transform: translateX(26px); }
  to{ opacity:1; transform: translateX(0); }
}
@keyframes stepInBack{
  from{ opacity:0; transform: translateX(-26px); }
  to{ opacity:1; transform: translateX(0); }
}

.step-panel__intro{ text-align:center; max-width: 640px; margin: 0 auto 2.3rem; }
.step-panel__eyebrow{
  display:inline-flex; align-items:center; gap:.4rem;
  text-transform: uppercase; letter-spacing:.2em; font-size:.7rem;
  color: var(--blush-darker); font-weight:600; margin:0 0 .7rem;
}
.step-panel__eyebrow svg{ width:14px; height:14px; }
.step-panel__title{ font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight:600; margin:0 0 .6rem; }
.step-panel__subtitle{ color: var(--text-soft); font-size:1.02rem; margin:0; }

.section-subtitle{
  font-size:1.25rem; margin: 2.2rem 0 1.1rem; text-align:center; color: var(--text-main);
  display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.section-subtitle svg{ width:18px; height:18px; color: var(--champagne); }

/* ==========================================================================
   CARTES DE CHOIX — bordure dorée précieuse, ombre multicouche
   ========================================================================== */
.choice-grid{ display:grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.choice-card{
  position:relative;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-md);
  padding: 0 0 1.25rem;
  overflow:hidden;
  box-shadow: var(--shadow-soft);
  border: 1.5px solid rgba(255,255,255,0.9);
  transition: transform .32s cubic-bezier(.22,.61,.36,1), box-shadow .32s ease;
  text-align:left; display:flex; flex-direction:column;
  opacity:0; transform: translateY(16px);
  animation: cardEnter .55s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes cardEnter{ to{ opacity:1; transform: translateY(0); } }

.choice-card::before{
  content:""; position:absolute; inset:0; border-radius: inherit; padding:1.5px;
  background: linear-gradient(135deg, rgba(205,163,91,0) 0%, rgba(205,163,91,0) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none; transition: background .3s ease;
}
.choice-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.choice-card:hover::before{ background: linear-gradient(135deg, var(--champagne-glow), transparent 60%); }

.choice-card__media{ width:100%; aspect-ratio: 4/3; overflow:hidden; position:relative; background: var(--ivory-deep); }
.choice-card__media img{ width:100%; height:100%; object-fit:cover; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.choice-card:hover .choice-card__media img{ transform: scale(1.07) rotate(-0.3deg); }
.choice-card__icon-badge{
  position:absolute; top:.65rem; left:.65rem; width:34px; height:34px; border-radius:50%;
  background: rgba(255,255,255,0.88); backdrop-filter: blur(3px);
  display:flex; align-items:center; justify-content:center; color: var(--blush-darker);
  box-shadow: 0 4px 12px rgba(154,108,90,0.18);
}
.choice-card__icon-badge svg{ width:17px; height:17px; }
.choice-card__body{ padding: 1.1rem 1.2rem 0; flex:1; display:flex; flex-direction:column; }
.choice-card__title{ font-family: var(--font-display); font-size:1.28rem; font-weight:600; margin:0 0 .35rem; }
.choice-card__text{ color: var(--text-soft); font-size:.92rem; margin:0; flex:1; }
.choice-card__badge{
  position:absolute; top:.7rem; left:.7rem; background: rgba(255,255,255,0.92);
  color: var(--blush-darker); font-size:.68rem; padding:.28rem .65rem; border-radius:20px;
  font-weight:600; letter-spacing:.03em;
}

.choice-card.selected{
  border-color: transparent;
  box-shadow: var(--shadow-gold);
}
.choice-card.selected::before{
  background: linear-gradient(135deg, var(--champagne), var(--blush-deep), var(--champagne));
  background-size: 220% 220%;
  animation: borderShimmer 3.2s ease infinite;
}
@keyframes borderShimmer{
  0%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } 100%{ background-position: 0% 50%; }
}
.choice-card.selected .selected-check{
  position:absolute; top:.6rem; right:.6rem; width:30px; height:30px; z-index:2;
  background: linear-gradient(135deg, var(--blush-deep), var(--champagne)); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow: 0 4px 12px rgba(205,163,91,0.4);
  animation: popCheck .4s cubic-bezier(.34,1.56,.64,1);
}
.selected-check svg{ width:15px; height:15px; }
@keyframes popCheck{ from{ transform: scale(0); } to{ transform: scale(1); } }

/* Sparkles au moment de la sélection */
.sparkle-burst{ position:absolute; inset:0; pointer-events:none; z-index:3; overflow:visible; }
.sparkle-burst span{
  position:absolute; width:6px; height:6px; background: var(--champagne); border-radius:50%;
  opacity:0; animation: sparklePop .7s ease-out forwards;
}
@keyframes sparklePop{
  0%{ opacity:0; transform: translate(0,0) scale(0.3); }
  30%{ opacity:1; }
  100%{ opacity:0; transform: translate(var(--sx), var(--sy)) scale(1.1); }
}

/* ==========================================================================
   BOUTONS
   ========================================================================== */
.btn-elegant{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: .8rem 1.7rem; border-radius: 999px; border:none;
  font-family: var(--font-body); font-size:.95rem; font-weight:500;
  background: linear-gradient(135deg, var(--blush-deep), var(--champagne));
  color:#fff; text-decoration:none; transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
  box-shadow: 0 8px 22px rgba(217,140,160,0.38);
}
.btn-elegant:hover{ transform: translateY(-2px) scale(1.015); box-shadow: 0 14px 30px rgba(217,140,160,0.48); }
.btn-elegant:active{ transform: translateY(0) scale(.98); }
.btn-elegant--ghost{ background: var(--glass-bg-strong); color: var(--text-main); border: 1.5px solid var(--nude); box-shadow:none; }
.btn-elegant--ghost:hover{ border-color: var(--champagne); box-shadow: var(--shadow-soft); }
.btn-elegant--whatsapp{ background: linear-gradient(135deg, #6FBF73, #4E9A52); box-shadow: 0 8px 20px rgba(78,154,82,0.35); }

.choice-card__cta{ margin: .9rem 1.2rem 0; align-self:flex-start; }

/* ==========================================================================
   MODÈLES DE BUFFET (STEP 2)
   ========================================================================== */
.model-grid{ display:grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.model-card{
  background: var(--glass-bg-strong); backdrop-filter: blur(6px);
  border-radius: var(--radius-lg); overflow:hidden;
  box-shadow: var(--shadow-soft); border: 1.5px solid rgba(255,255,255,0.9);
  display:flex; flex-direction:column; transition: transform .32s cubic-bezier(.22,.61,.36,1), box-shadow .32s ease;
  position:relative;
  opacity:0; transform: translateY(18px);
  animation: cardEnter .55s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.model-card::before{
  content:""; position:absolute; inset:0; border-radius: inherit; padding:1.5px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
}
.model-card:hover{ transform: translateY(-7px); box-shadow: var(--shadow-hover); }
.model-card:hover::before{ background: linear-gradient(135deg, var(--champagne-glow), transparent 60%); }
.model-card.selected{ box-shadow: var(--shadow-gold); }
.model-card.selected::before{
  background: linear-gradient(135deg, var(--champagne), var(--blush-deep), var(--champagne));
  background-size: 220% 220%; animation: borderShimmer 3.2s ease infinite;
}
.model-card__media{ position:relative; width:100%; aspect-ratio: 16/10; background: var(--ivory-deep); overflow:hidden; }
.model-card__media img{ width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
.model-card:hover .model-card__media img{ transform: scale(1.06); }
.model-card__icon-badge{
  position:absolute; top:.7rem; left:.7rem; width:38px; height:38px; border-radius:50%;
  background: rgba(255,255,255,0.88); display:flex; align-items:center; justify-content:center;
  color: var(--blush-darker); box-shadow: 0 4px 12px rgba(154,108,90,0.18);
}
.model-card__icon-badge svg{ width:19px; height:19px; }
.gallery-badge{
  position:absolute; top:.7rem; right:.7rem; width:36px; height:36px; border-radius:50%;
  background: rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center;
  color: var(--text-main); box-shadow: var(--shadow-soft); border:none; z-index:2;
  transition: transform .2s ease;
}
.gallery-badge:hover{ transform: scale(1.1); }
.model-card__body{ padding: 1.35rem 1.4rem; flex:1; display:flex; flex-direction:column; }
.model-card__style{ text-transform: uppercase; letter-spacing:.1em; font-size:.7rem; color: var(--blush-darker); font-weight:600; }
.model-card__title{ font-family: var(--font-display); font-size:1.55rem; font-weight:600; margin:.3rem 0 .5rem; }
.model-card__text{ color: var(--text-soft); font-size:.94rem; flex:1; }
.model-card__meta{ display:flex; align-items:center; justify-content:space-between; margin: 1rem 0 .3rem; flex-wrap:wrap; gap:.5rem; }
.pax-badge{ background: var(--ivory-deep); color: var(--text-soft); font-size:.8rem; padding:.3rem .7rem; border-radius:20px; font-weight:500; display:inline-flex; align-items:center; gap:.3rem; }
.pax-badge svg{ width:13px; height:13px; }
.price-tag{ font-family: var(--font-display); font-size:1.35rem; font-weight:700; color: var(--blush-darker); }
.price-tag small{ font-family: var(--font-body); font-size:.65rem; font-weight:500; color: var(--text-soft); }

/* ==========================================================================
   THÈMES (STEP 4)
   ========================================================================== */
.theme-badge{
  position:absolute; bottom:.6rem; left:.6rem; background: rgba(66,50,44,0.72); color:#fff;
  font-size:.68rem; padding:.28rem .65rem; border-radius:20px; letter-spacing:.03em;
  backdrop-filter: blur(2px);
}

.palette-grid{ display:grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.palette-card{
  background: var(--glass-bg-strong); border-radius: var(--radius-md); padding: 1.15rem 1.25rem;
  border: 1.5px solid rgba(255,255,255,0.9); box-shadow: var(--shadow-soft); cursor:pointer;
  transition: all .28s cubic-bezier(.22,.61,.36,1); text-align:left; width:100%; position:relative;
}
.palette-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.palette-card.selected{ box-shadow: var(--shadow-gold); border-color: transparent; }
.palette-card__dots{ display:flex; gap:.5rem; margin-bottom:.6rem; }
.color-dot{ width: 27px; height:27px; border-radius:50%; border: 2px solid rgba(255,255,255,0.95); box-shadow: 0 0 0 1px rgba(0,0,0,0.06); transition: transform .2s ease; }
.palette-card:hover .color-dot{ transform: translateY(-2px); }
.palette-card__name{ font-weight:500; font-size:.95rem; }

.custom-color-toggle{
  display:flex; align-items:center; gap:.6rem; margin: 1.4rem 0 0; cursor:pointer;
  font-size:.95rem; color: var(--text-main); width:fit-content;
}
.custom-color-toggle input{ width:18px; height:18px; accent-color: var(--champagne); }
.custom-color-panel{
  margin-top: 1rem; background: var(--glass-bg-strong); border-radius: var(--radius-md);
  padding: 1.25rem; box-shadow: var(--shadow-soft); border: 1.5px solid rgba(255,255,255,0.9);
}
.custom-color-row{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom: .8rem; }
.custom-color-item{
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  animation: swatchIn .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes swatchIn{ from{ opacity:0; transform: scale(.4); } to{ opacity:1; transform: scale(1); } }
.custom-color-item.removing{ animation: swatchOut .25s ease forwards; }
@keyframes swatchOut{ to{ opacity:0; transform: scale(.4); } }
.custom-color-item input[type="color"]{
  width:54px; height:54px; border-radius:50%; border: 3px solid var(--white);
  box-shadow: var(--shadow-soft); cursor:pointer; padding:0; overflow:hidden;
}
.custom-color-item__remove{ background:none; border:none; color: var(--error); font-size:.75rem; text-decoration:underline; }
.btn-add-color{ background: var(--ivory-deep); border: 1.5px dashed var(--champagne); color: var(--text-main); padding: .5rem 1.05rem; border-radius: 999px; font-size:.85rem; transition: transform .2s ease; }
.btn-add-color:hover:not(:disabled){ transform: translateY(-2px); }
.btn-add-color:disabled{ opacity:.4; cursor:not-allowed; }

/* ==========================================================================
   OPTIONS (STEP 5, 6, 7)
   ========================================================================== */
.option-grid{ display:grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.option-card{
  background: var(--glass-bg-strong); backdrop-filter: blur(6px);
  border-radius: var(--radius-md); overflow:hidden;
  box-shadow: var(--shadow-soft); border: 1.5px solid rgba(255,255,255,0.9); position:relative;
  display:flex; flex-direction:column; transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
  opacity:0; transform: translateY(16px);
  animation: cardEnter .55s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.option-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.option-card.selected{ box-shadow: var(--shadow-gold); border-color: transparent; }
.option-card__media{ width:100%; aspect-ratio: 4/3; background: var(--ivory-deep); position:relative; overflow:hidden; }
.option-card__media img{ width:100%; height:100%; object-fit:cover; }
.option-card__icon-badge{
  position:absolute; top:.6rem; left:.6rem; width:32px; height:32px; border-radius:50%;
  background: rgba(255,255,255,0.88); display:flex; align-items:center; justify-content:center;
  color: var(--blush-darker); box-shadow: 0 4px 12px rgba(154,108,90,0.18);
}
.option-card__icon-badge svg{ width:16px; height:16px; }
.option-card__body{ padding: 1.05rem 1.15rem; flex:1; display:flex; flex-direction:column; gap:.55rem; }
.option-card__title{ font-family: var(--font-display); font-size:1.18rem; font-weight:600; margin:0; }
.option-card__text{ color: var(--text-soft); font-size:.88rem; margin:0; flex:1; }
.option-card__footer{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }

.elegant-checkbox{ display:flex; align-items:center; gap:.5rem; cursor:pointer; font-size:.9rem; }
.elegant-checkbox input{ width:19px; height:19px; accent-color: var(--blush-deep); cursor:pointer; }

.qty-control{ display:flex; align-items:center; gap:.55rem; }
.qty-btn{
  width:27px; height:27px; border-radius:50%; border:1px solid var(--nude); background: var(--white);
  color: var(--text-main); font-weight:600; display:flex; align-items:center; justify-content:center; line-height:1;
  transition: transform .15s ease;
}
.qty-btn:hover{ transform: scale(1.12); border-color: var(--champagne); }
.qty-value{ min-width:20px; text-align:center; font-weight:500; display:inline-block; transition: transform .18s ease; }
.qty-value.bump{ animation: bump .28s ease; }
@keyframes bump{ 0%{ transform: scale(1); } 50%{ transform: scale(1.35); } 100%{ transform: scale(1); } }

/* ==========================================================================
   ÉTAPE 3 : PAX / DATE
   ========================================================================== */
.soft-card{
  background: var(--glass-bg-strong); backdrop-filter: blur(6px); border-radius: var(--radius-lg);
  padding: 1.7rem 1.7rem 1.9rem; box-shadow: var(--shadow-soft); margin: 0 auto 1.6rem; max-width: 720px;
  border: 1.5px solid rgba(255,255,255,0.9);
}
.field-label{ display:flex; align-items:center; gap:.4rem; font-weight:500; margin-bottom:.6rem; color: var(--text-main); }
.field-label svg{ width:15px; height:15px; color: var(--champagne); }
.pax-control{ display:flex; align-items:center; justify-content:center; gap:1.3rem; margin-bottom:1.1rem; }
.pax-btn{
  width:50px; height:50px; border-radius:50%; border:none;
  background: linear-gradient(135deg, var(--blush-deep), var(--champagne)); color:#fff;
  font-size:1.5rem; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 20px rgba(217,140,160,0.38); transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
.pax-btn:hover{ transform: scale(1.1); }
.pax-btn:active{ transform: scale(.92); }
.pax-btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }
.pax-input{
  width: 110px; text-align:center; font-family: var(--font-display); font-size:2.1rem; font-weight:700;
  border:none; background:transparent; color: var(--text-main); transition: transform .2s ease;
}
.pax-input.bump{ animation: bump .3s ease; }
.pax-badges{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:.6rem; }
.pax-badge-btn{
  padding:.5rem 1.15rem; border-radius:999px; border: 1.5px solid var(--nude); background: var(--ivory);
  color: var(--text-main); font-size:.9rem; transition: all .22s cubic-bezier(.34,1.56,.64,1);
}
.pax-badge-btn:hover{ border-color: var(--champagne); transform: translateY(-2px); }
.pax-badge-btn.selected{ background: linear-gradient(135deg, var(--blush-deep), var(--champagne)); color:#fff; border-color:transparent; }
.field-hint{ text-align:center; color: var(--text-faint); font-size:.82rem; margin: .3rem 0 0; }

.field-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1.15rem 1.4rem; max-width:900px; }
.field-group--full{ grid-column: 1 / -1; }
.field-input{
  width:100%; padding: .78rem .95rem; border-radius: var(--radius-sm); border: 1.5px solid var(--nude);
  background: rgba(255,255,255,0.7); font-family: var(--font-body); font-size: .95rem; color: var(--text-main);
  transition: border-color .2s ease, background .2s ease;
}
.field-input:focus{ border-color: var(--champagne); background: var(--white); }
.field-textarea{ resize: vertical; min-height: 80px; }
.field-error{ color: var(--error); font-size: .85rem; margin: .5rem 0 0; text-align:center; display:flex; align-items:center; justify-content:center; gap:.35rem; }
.field-error svg{ width:14px; height:14px; flex-shrink:0; }

/* ==========================================================================
   ÉTAPE 8 — Naissance / prénoms / récap
   ========================================================================== */
.step-panel--split{ display:grid; grid-template-columns: 1.5fr 1fr; gap: 2.5rem; align-items:start; text-align:left; }
.step-panel--split .step-panel__intro{ text-align:left; margin: 0 0 1.6rem; }

.birth-type-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap:.8rem; margin: .6rem 0 1.4rem; }
.birth-type-option{
  border: 1.5px solid var(--nude); border-radius: var(--radius-sm); padding: .7rem; text-align:center;
  background: rgba(255,255,255,0.6); font-size:.88rem; transition: all .2s ease;
}
.birth-type-option.selected{ border-color: var(--champagne); background: var(--champagne-light); font-weight:600; box-shadow: var(--shadow-gold); }
.names-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:1rem; }
.name-field-arabic input{ direction: rtl; font-family: var(--font-arabic); font-size:1.05rem; text-align:right; }

.summary-col{ position: relative; }
.summary-card{
  background: var(--glass-bg-strong); backdrop-filter: blur(8px); border-radius: var(--radius-lg); padding: 1.7rem;
  box-shadow: var(--shadow-soft); border: 1.5px solid rgba(255,255,255,0.9);
}
.summary-card__title{ font-size:1.4rem; margin-bottom: 1rem; display:flex; align-items:center; gap:.5rem; }
.summary-card__title svg{ width:19px; height:19px; color: var(--champagne); }
.summary-row{ display:flex; justify-content:space-between; gap:.8rem; padding: .55rem 0; border-bottom: 1px dashed var(--ivory-deep); font-size:.9rem; animation: rowIn .3s ease; }
@keyframes rowIn{ from{ opacity:0; transform: translateY(4px); } to{ opacity:1; transform: translateY(0); } }
.summary-row:last-child{ border-bottom:none; }
.summary-row__label{ color: var(--text-soft); }
.summary-row__value{ font-weight:500; text-align:right; }
.summary-empty{ color: var(--text-faint); font-style:italic; }
.summary-swatches{ display:flex; gap:.3rem; }
.summary-swatches .color-dot{ width:16px; height:16px; }
.summary-card__total{
  margin-top:1rem; padding-top:1rem; border-top: 2px solid var(--champagne-light);
  display:flex; justify-content:space-between; align-items:baseline;
  font-family: var(--font-display); font-size:1.45rem; font-weight:700; color: var(--blush-darker);
}
.sticky-summary{ position: sticky; top: 96px; }

@media (max-width: 900px){
  .step-panel--split{ grid-template-columns: 1fr; }
  .sticky-summary{ position: static; }
}

/* ==========================================================================
   ÉTAPE 9 — Confirmation
   ========================================================================== */
.step-panel--confirmation{ display:flex; justify-content:center; padding: 2rem 0; }
.confirmation-card{
  text-align:center; max-width: 580px; background: var(--glass-bg-strong); backdrop-filter: blur(8px);
  border-radius: var(--radius-xl); padding: 3.2rem 2.4rem; box-shadow: var(--shadow-gold);
  border: 1.5px solid rgba(255,255,255,0.9); position:relative; overflow:hidden;
}
.confirmation-icon{ color: var(--champagne); margin: 0 auto 1rem; width:84px; animation: popIn .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes popIn{ from{ transform: scale(.5); opacity:0;} to{ transform: scale(1); opacity:1;} }
.confirmation-text{ color: var(--text-soft); margin: 1rem 0 0.6rem; }
.confirmation-ref{ color: var(--text-main); font-size:.95rem; margin-bottom:1.7rem; }
.confirmation-actions{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }

/* ==========================================================================
   NAVIGATION BAS DE PAGE
   ========================================================================== */
.step-nav{
  position: sticky; bottom:0; z-index:30;
  background: rgba(252,247,241,0.9); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(205,163,91,0.18);
  padding: 1rem 1.25rem; display:flex; justify-content:space-between; gap:1rem;
  max-width: 1100px; margin: 0 auto;
}
.btn-prev, .btn-next{
  padding: .85rem 2.1rem; border-radius:999px; border:none; font-size:.98rem; font-weight:500;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, opacity .2s ease;
}
.btn-prev{ background: var(--glass-bg-strong); border: 1.5px solid var(--nude); color: var(--text-main); }
.btn-prev:hover{ border-color: var(--champagne); }
.btn-next{
  background: linear-gradient(135deg, var(--blush-deep), var(--champagne)); color:#fff; margin-left:auto;
  box-shadow: 0 8px 22px rgba(217,140,160,0.38);
}
.btn-next:hover:not(:disabled){ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(217,140,160,0.48); }
.btn-next:disabled, .btn-prev:disabled{ opacity:.42; cursor:not-allowed; transform:none; box-shadow:none; }

/* ==========================================================================
   LIGHTBOX (masquée par défaut via [hidden] — voir règle en tête de fichier)
   ========================================================================== */
.lightbox{
  position: fixed; inset:0; background: rgba(35,24,20,0.9); z-index:100;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  animation: fadeIn .28s ease;
}
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
.lightbox__stage{ max-width: 90vw; max-height: 78vh; display:flex; align-items:center; justify-content:center; }
.lightbox__image{ max-width: 90vw; max-height: 78vh; border-radius: 14px; box-shadow: 0 24px 64px rgba(0,0,0,0.45); object-fit:contain; }
.lightbox__close{ position:absolute; top:1.2rem; right:1.5rem; background: rgba(255,255,255,0.12); border:none; color:#fff; width:44px; height:44px; border-radius:50%; font-size:1.6rem; line-height:1; display:flex; align-items:center; justify-content:center; transition: background .2s ease; }
.lightbox__close:hover{ background: rgba(255,255,255,0.25); }
.lightbox__nav{
  position:absolute; top:50%; transform: translateY(-50%); background: rgba(255,255,255,0.14);
  border:none; color:#fff; font-size:2.3rem; width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition: background .2s ease, transform .2s ease;
}
.lightbox__nav:hover{ background: rgba(255,255,255,0.3); transform: translateY(-50%) scale(1.08); }
.lightbox__nav--prev{ left: 1rem; }
.lightbox__nav--next{ right: 1rem; }
.lightbox__counter{ color: rgba(255,255,255,0.85); margin-top:1rem; font-size:.9rem; letter-spacing:.05em; }

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */
.wishes-footer{ text-align:center; padding: 1.5rem; color: var(--text-faint); font-size:.8rem; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 600px){
  .configurator-shell{ padding: 1.7rem .9rem 6rem; }
  .choice-grid, .model-grid, .option-grid{ grid-template-columns: 1fr; }
  .step-nav{ padding: .85rem .9rem; }
  .btn-prev, .btn-next{ padding: .8rem 1.3rem; flex:1; }
  .soft-card{ padding: 1.3rem 1.15rem 1.5rem; }
  .confirmation-card{ padding: 2.3rem 1.5rem; }
  .lightbox__nav{ width:42px; height:42px; font-size:1.9rem; }
  .wishes-header{ padding: 2rem 1rem 1.7rem; }
  .ambient-bg__blob{ filter: blur(36px); opacity:.4; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}