/* ============================================================
   Builder — Apple-strict configurator
   White / generous space / typography first / coral pop
   ============================================================ */

:root{
  /* Aligned to badabooth.fr brand tokens */
  --bg:           #FFFAF7;
  --bg-2:         #FFF1EC;
  --surface:      #FFFFFF;
  --cream:        #FFE3DB;
  --cream-d:      #FFD5C8;
  --line:         rgba(231,26,101,.10);
  --line-2:       rgba(231,26,101,.22);

  --ink-1:        #3D3D3D;     /* brand dark */
  --ink-2:        #585858;
  --ink-3:        #888888;

  --coral:        #E71A65;
  --coral-d:      #C01455;
  --coral-l:      #F04080;
  --coral-soft:   #FFD9E4;
  --halo:         #FFB6C1;

  --radius-sm: 12px;
  --radius:    18px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(0,0,0,.04);
  --shadow-lift: 0 8px 24px rgba(231,26,101,.10);
  --shadow-coral: 0 12px 40px rgba(231,26,101,.20);

  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
}

*{box-sizing:border-box}
html{ scroll-behavior:smooth }
body.builder-body{
  margin:0;padding:0;
  background:
    radial-gradient(1200px 700px at 80% 100%, rgba(255,210,130,.18), transparent 70%),
    radial-gradient(1000px 800px at 0% 20%, rgba(255,174,192,.22), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
  color: var(--ink-1);
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric: tabular-nums;
  min-height:100vh;
}
h1,h2,h3,h4{
  margin:0;line-height:1.1;color:var(--ink-1);
  font-family: 'Nunito', -apple-system, system-ui, sans-serif;
  letter-spacing: -.022em;
}
button{ font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0 }
img{ display:block;max-width:100% }
a{ color:var(--coral);text-decoration:none }
a:hover{ color:var(--coral-d);text-decoration:underline }

/* ============================================================
   HEADER — Apple style, minimal
   ============================================================ */
.builder-header{
  position:relative;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px 36px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.bh-logo img{ height:30px;width:auto }
.bh-right{ display:flex;align-items:center;gap:14px }
.bh-phone{
  display:flex;align-items:center;gap:6px;
  color:var(--ink-1);text-decoration:none;font-weight:600;font-size:13px;
  padding:6px 10px;border-radius:8px;transition:.2s;
}
.bh-phone:hover{ color:var(--coral) }
.bh-phone-ic{ font-size:12px;opacity:.7 }
.bh-help{
  width:30px;height:30px;border-radius:50%;
  background:var(--bg-2);
  display:grid;place-items:center;color:var(--ink-2);text-decoration:none;font-weight:700;font-size:14px;
  transition:.2s;
}
.bh-help:hover{ background:var(--ink-1);color:#fff }

.proto-pill{
  flex:1;max-width:480px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background: var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:5px 14px;font-size:11px;color:var(--ink-3);
}
.proto-pill a{ color:var(--coral);text-decoration:underline;font-weight:600 }
.proto-dismiss{ font-size:16px;color:var(--ink-3);width:20px;height:20px;border-radius:50% }
.proto-dismiss:hover{ color:var(--ink-1);background:var(--bg) }
.proto-pill.is-hidden{ display:none }

@media (max-width:899px){
  .builder-header{ padding:12px 20px;flex-wrap:wrap;gap:12px }
  .proto-pill{ order:3;flex:0 0 100%;font-size:10px }
  .bh-phone-num{ display:none }
}

/* ============================================================
   SHELL — split
   ============================================================ */
.builder-shell{
  display:grid;
  grid-template-columns: 1fr;
  min-height: calc(100vh - 65px);
}
@media (min-width: 900px){
  .builder-shell{ grid-template-columns: 1fr 460px }
}
@media (min-width: 1240px){
  .builder-shell{ grid-template-columns: 1fr 500px }
}

/* ============================================================
   STAGE (left) — Apple product showcase style
   ============================================================ */
.stage{
  position:relative;
  padding:24px 28px 24px;
  display:grid;
  grid-template-rows: 1fr auto;
  gap:14px;
  overflow:hidden;
  background:
    radial-gradient(900px 700px at 50% 35%, rgba(255,182,193,.22), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
@media (min-width: 900px){
  .stage{
    position:sticky;top:65px;
    height: calc(100vh - 65px);
  }
}
@media (max-width: 899px){
  .stage{ padding:20px;min-height:70vh }
}

/* Soft glow behind booth — ONE subtle blob, not 3 colored */
.stage__bg{ position:absolute;inset:0;overflow:hidden;pointer-events:none }
.blob{
  position:absolute;
  border-radius:50%;
  filter: blur(80px);
  will-change: transform;
}
.blob--1{
  width:65%;aspect-ratio:1;
  top:18%;left:50%;transform:translateX(-50%);
  background: radial-gradient(circle, rgba(255,180,200,.55) 0%, rgba(231,26,101,.18) 40%, transparent 70%);
  animation: blobBreath 18s ease-in-out infinite;
}
.blob--2, .blob--3{ display:none }
@keyframes blobBreath{
  0%,100%{ transform: translateX(-50%) scale(1) rotate(0) }
  33%   { transform: translate(-45%, -3%) scale(1.10) rotate(15deg) }
  66%   { transform: translate(-55%, 3%) scale(.95) rotate(-12deg) }
}

.stage__particles{ position:absolute;inset:0 }
.stage__particles span{
  position:absolute;width:4px;height:4px;border-radius:50%;
  background:var(--coral);opacity:.20;
  animation: floatUp 22s linear infinite;
}
.stage__particles span:nth-child(1){ left:18%;bottom:-5px;animation-delay:0s;animation-duration:18s }
.stage__particles span:nth-child(2){ left:36%;bottom:-5px;animation-delay:-4s;animation-duration:22s;width:3px;height:3px }
.stage__particles span:nth-child(3){ left:55%;bottom:-5px;animation-delay:-8s;animation-duration:25s }
.stage__particles span:nth-child(4){ left:72%;bottom:-5px;animation-delay:-2s;animation-duration:20s;width:5px;height:5px;opacity:.18 }
.stage__particles span:nth-child(5){ left:88%;bottom:-5px;animation-delay:-11s;animation-duration:23s }
.stage__particles span:nth-child(6),
.stage__particles span:nth-child(7),
.stage__particles span:nth-child(8){ display:none }
@keyframes floatUp{
  0%   { transform: translateY(0) translateX(0); opacity:0 }
  10%  { opacity:.30 }
  90%  { opacity:.15 }
  100% { transform: translateY(-700px) translateX(20px); opacity:0 }
}

/* ===== BOOTH ===== */
.stage__booth{
  position:relative;z-index:2;
  width:100%;height:100%;
  display:grid;place-items:center;
}
.stage__floor{
  position:absolute;bottom:6%;left:50%;transform:translateX(-50%);
  width:42%;height:28px;border-radius:50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.18), transparent 65%);
  filter:blur(10px);
  z-index:0;
}

#charImage{
  position:relative;z-index:2;
  max-height: min(62vh, 580px);
  width:auto;object-fit:contain;
  filter: drop-shadow(0 20px 30px rgba(231,26,101,.18)) drop-shadow(0 4px 8px rgba(0,0,0,.10));
  transition: transform .4s var(--ease-bounce);
}

.stage__fronton{
  position:absolute;z-index:3;
  top:13%;left:43%;
  transform: translate(-50%, 0) rotate(-5deg) scale(.4);
  transform-origin: center;
  background: linear-gradient(180deg, #ff4d8d, #c11353);
  color:#fff;
  font-family:'Nunito',sans-serif;font-weight:900;
  font-size:clamp(12px, 1.1vw, 15px);letter-spacing:.15em;
  padding:6px 14px;border-radius:4px;
  box-shadow: 0 0 18px rgba(231,26,101,.6), 0 0 40px rgba(231,26,101,.3), inset 0 1px 0 rgba(255,255,255,.4);
  text-shadow: 0 0 6px rgba(255,255,255,.5);
  opacity:0;pointer-events:none;
  transition: opacity .35s ease, transform .35s var(--ease-bounce);
  white-space:nowrap;max-width:210px;overflow:hidden;text-overflow:ellipsis;
}
.stage__fronton.is-active{
  opacity:1;transform: translate(-50%, 0) rotate(-5deg) scale(1);
}

/* Equipment chips on booth — clean white pills */
.stage__equips{ position:absolute;inset:0;pointer-events:none;z-index:4 }
.stage__equips .equip{
  position:absolute;
  display:inline-flex;align-items:center;gap:6px;
  background: var(--surface);
  color:var(--ink-1);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:7px 13px 7px 10px;
  font-weight:600;font-size:12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.08), 0 0 0 1px rgba(255,255,255,.5);
  animation: equipPop .42s var(--ease-bounce) both;
  white-space:nowrap;
}
.stage__equips .equip .ic{ font-size:14px }
@keyframes equipPop{
  0%   { transform:scale(.4) rotate(-8deg);opacity:0 }
  60%  { transform:scale(1.08) rotate(2deg);opacity:1 }
  100% { transform:scale(1) rotate(0);opacity:1 }
}

.stage__recharges{
  position:absolute;z-index:5;
  top:24%;right:4%;display:flex;flex-direction:column;gap:6px;
  pointer-events:none;
}
.stage__recharges .pkg-badge{
  background: var(--surface);
  border:1px solid var(--coral);
  border-radius:10px;
  padding:6px 10px 6px 8px;
  font-weight:700;font-size:12px;color:var(--coral);
  display:inline-flex;align-items:center;gap:6px;
  box-shadow: 0 4px 14px rgba(231,26,101,.18);
  animation: pkgLand .5s var(--ease-bounce) both;
  white-space:nowrap;
}
@keyframes pkgLand{
  0%   { transform:scale(.3) translateY(-30px);opacity:0 }
  60%  { transform:scale(1.1) translateY(0);opacity:1 }
  100% { transform:scale(1) translateY(0);opacity:1 }
}
.flying-pkg{
  position:fixed;z-index:9999;pointer-events:none;
  width:38px;height:38px;display:grid;place-items:center;
  background: var(--surface);
  border:2px solid var(--coral);border-radius:10px;
  box-shadow: 0 8px 20px rgba(231,26,101,.30);
  font-size:18px;
  transition: all .7s cubic-bezier(.5, -0.3, .3, 1.2);
}
.flying-pkg.is-arrived{ transform: scale(.3);opacity:0 }

/* ============================================================
   CONFIG (right) — Apple scroll
   ============================================================ */
.config{
  padding: 28px 32px 32px;
  display:flex;flex-direction:column;gap:18px;
  background: var(--surface);
  border-left:1px solid var(--line);
}
@media (min-width: 900px){
  .config{
    padding: 32px 44px 32px;
    overflow-y:auto;max-height: calc(100vh - 65px);
    scroll-snap-type: y proximity;
    scroll-padding-top: 80px;
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
  }
  .config::-webkit-scrollbar{ width:6px }
  .config::-webkit-scrollbar-thumb{ background:var(--line-2);border-radius:3px }
  .config::-webkit-scrollbar-track{ background:transparent }
}
@media (max-width: 899px){
  .config{ padding:24px 20px 140px;border-left:0;border-top:1px solid var(--line) }
}

/* cfg-head removed — total at bottom + step subs are enough */

/* ============================================================
   STEP — Apple section style
   ============================================================ */
.step{
  background: transparent;
  border:0;
  padding: 18px 0 24px;
  scroll-snap-align: start;
  scroll-margin-top: 80px;
  border-bottom: 1px solid var(--line);
}
.step:last-of-type{ border-bottom:0 }

/* Title with inline subtitle (Apple "Stockage. De combien…" style) */
.step__title{
  font-size:clamp(22px, 2.1vw, 28px);
  font-weight:800;color:var(--ink-1);
  letter-spacing:-.022em;line-height:1.15;
  margin-bottom:16px;
}
.step__title::after{ content:'.';color:var(--coral) }
.step__sub{
  display:block;margin-top:4px;
  font-family:'Open Sans',sans-serif;
  font-size:14px;font-weight:400;color:var(--ink-3);
  letter-spacing:0;
}

/* ============================================================
   STEP 1 · IMPRIMANTE — Apple-style rows
   ============================================================ */
.opt-list{
  display:flex;flex-direction:column;gap:10px;
}
.opt-row{
  position:relative;
  display:flex;align-items:center;gap:18px;
  background: var(--surface);
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  padding:18px 22px;
  text-align:left;
  transition: border-color .15s ease, background .15s ease;
}
.opt-row:hover{ border-color:var(--ink-2) }
.opt-row.is-selected{
  border-color: var(--coral);
  border-width:2px;
  padding:17px 21px;
  background: linear-gradient(90deg, rgba(255,217,228,.30), transparent 60%);
}
.opt-row--popular{ border-color: var(--line-2) }
.opt-row__pop{
  position:absolute;top:-9px;left:16px;
  background: var(--ink-1);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.04em;
  padding:3px 10px;border-radius:var(--radius-pill);
}
.opt-radio{
  width:22px;height:22px;flex-shrink:0;border-radius:50%;
  border:2px solid var(--line-2);background:#fff;
  position:relative;transition:.15s;
}
.opt-row.is-selected .opt-radio{
  border-color:var(--coral);background:var(--coral);
}
.opt-row.is-selected .opt-radio::after{
  content:'';position:absolute;inset:5px;background:#fff;border-radius:50%;
}
.opt-row__main{ flex:1;min-width:0 }
.opt-row__cap{
  font-family:'Nunito',sans-serif;font-weight:800;font-size:17px;
  color:var(--ink-1);line-height:1.2;letter-spacing:-.01em;
}
.opt-row__cap strong{ font-weight:800;color:var(--ink-1) }
.opt-row__sub{
  font-size:13px;color:var(--ink-3);margin-top:4px;
}
.opt-row__thumb{ display:none }
.opt-row__price{
  font-family:'Nunito',sans-serif;font-weight:800;font-size:17px;
  color:var(--ink-1);white-space:nowrap;
}
.opt-row.is-selected .opt-row__price{ color:var(--coral) }

/* ============================================================
   STEP 2 · ÉQUIPEMENT
   ============================================================ */
.option-grid{
  display:grid;gap:10px;grid-template-columns:1fr;
}
.option-card{
  display:flex;align-items:center;gap:12px;width:100%;
  background: var(--surface);
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  padding:12px 16px;text-align:left;
  transition:.15s;min-width:0;
}
.option-card:hover{ border-color:var(--ink-2) }
.option-card.is-selected{
  border-color: var(--coral);border-width:2px;padding:11px 15px;
}
.option-icon{
  width:32px;height:32px;flex-shrink:0;
  background: var(--bg-2);
  border-radius:8px;
  display:grid;place-items:center;font-size:16px;
}
.option-card.is-selected .option-icon{ background:var(--coral) }
.option-body{ flex:1;min-width:0 }
.option-name{
  font-weight:600;font-size:14px;color:var(--ink-1);
  display:flex;align-items:center;gap:10px;white-space:nowrap;min-width:0;
}
.option-name > span:first-child{ overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0 }
.option-name .opt-price{
  color:var(--ink-2);font-weight:600;font-size:13px;
  flex-shrink:0;white-space:nowrap;
}
.option-card.is-selected .opt-price{ color:var(--coral) }
.option-desc{ display:none }
.option-check{
  width:20px;height:20px;flex-shrink:0;
  border:1.5px solid var(--line-2);border-radius:50%;
  display:grid;place-items:center;transition:.15s;background:#fff;
}
.option-card.is-selected .option-check{ background:var(--coral);border-color:var(--coral) }
.option-card.is-selected .option-check::after{ content:'✓';color:#fff;font-weight:700;font-size:11px }

/* ============================================================
   SEGMENTED CONTROL (format photo / strip)
   ============================================================ */
.seg{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  background:var(--bg-2);
  border:1.5px solid var(--line);
  border-radius:var(--radius);padding:4px;
}
.seg__btn{
  padding:14px 12px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  font-weight:700;font-size:14px;color:var(--ink-2);
  border-radius:calc(var(--radius) - 6px);
  transition:.2s;
}
.seg__btn:hover{ color:var(--ink-1) }
.seg__btn.is-active{
  background:#fff;color:var(--ink-1);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.seg__ic{ font-size:20px;line-height:1 }
.seg__hint{
  font-size:11px;color:var(--ink-3);font-weight:500;
}
.seg__btn.is-active .seg__hint{ color:var(--coral);font-weight:700 }

/* Field inline */
.field-inline{
  width:100%;
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  padding:13px 16px;font-size:14px;color:var(--ink-1);
  font-family:inherit;transition:.15s;
}
.field-inline::placeholder{ color:var(--ink-3) }
.field-inline:focus{
  outline:0;border-color:var(--coral);background:#fff;
  box-shadow:0 0 0 3px rgba(231,26,101,.12);
}

/* ============================================================
   STEPPER
   ============================================================ */
.stepper{
  display:flex;align-items:center;justify-content:center;gap:24px;
}
.stepper__btn{
  width:44px;height:44px;border-radius:50%;
  background:var(--ink-1);color:#fff;
  font-size:20px;font-weight:600;
  transition:.15s;
}
.stepper__btn:hover:not(:disabled){ background:var(--coral);transform:scale(1.06) }
.stepper__btn:disabled{
  background:var(--bg-2);color:var(--ink-3);cursor:not-allowed;
}
.stepper__display{ text-align:center;min-width:90px }
.stepper__num{
  font-family:'Nunito',sans-serif;font-weight:800;font-size:32px;color:var(--ink-1);line-height:1;
}
.stepper__sub{
  font-size:11px;color:var(--ink-3);margin-top:4px;font-weight:600;
}

/* ============================================================
   EVENT
   ============================================================ */
.event-grid{
  display:grid;gap:10px;grid-template-columns:repeat(4,1fr);
  margin-bottom:12px;
}
.event-tile{
  background: var(--surface);border:1.5px solid var(--line);
  border-radius:var(--radius-sm);padding:14px 6px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-weight:600;font-size:12px;color:var(--ink-1);transition:.15s;
}
.event-tile:hover{ border-color:var(--ink-2) }
.event-tile.is-selected{ border-color:var(--coral);border-width:2px;padding:13px 5px;color:var(--coral) }
.et-ic{ font-size:22px;line-height:1 }

.event-fields{
  display:grid;gap:8px;grid-template-columns:1fr 1fr;
}

.reco{
  margin-top:14px;padding:14px 16px;
  background: var(--bg-2);
  border-radius:var(--radius-sm);
  font-size:13px;color:var(--ink-2);line-height:1.5;font-weight:500;
  display:flex;gap:10px;align-items:flex-start;
}
.reco::before{ content:'💡';font-size:16px;flex-shrink:0 }
.reco--warn::before{ content:'⚠️' }
.reco--ok::before{ content:'✨' }
.reco--hidden{ display:none }

/* ============================================================
   STAGE BOTTOM (name + total + CTA) — under the booth, left side
   ============================================================ */
.stage-bottom{
  position:relative;z-index:6;
  width:100%;max-width:460px;margin:0 auto;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(18px) saturate(1.5);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  padding:18px 22px 20px;
  box-shadow: 0 12px 40px rgba(231,26,101,.10);
}
.stage-bottom__name{
  font-family:'Nunito',sans-serif;font-weight:800;
  font-size:18px;color:var(--ink-1);text-align:center;
  margin-bottom:10px;letter-spacing:-.015em;
}
.stage-bottom__lines{
  display:flex;flex-direction:column;gap:4px;font-size:12px;
}
.stage-bottom__lines .ln{
  display:flex;justify-content:space-between;color:var(--ink-2);
}
.stage-bottom__lines .ln span:last-child{ color:var(--ink-1);font-weight:600 }
.stage-bottom__lines .ln--muted{ color:var(--ink-3);font-size:11px;display:none }

.stage-bottom__row{
  display:flex;justify-content:space-between;align-items:baseline;
  margin:10px 0 12px;padding-top:10px;
  border-top:1px solid var(--line);
}
.stage-bottom__lbl{ font-size:14px;color:var(--ink-1);font-weight:700 }
.stage-bottom__val{
  font-family:'Nunito',sans-serif;font-weight:800;font-size:30px;color:var(--ink-1);
  letter-spacing:-.015em;
}

@media (max-width: 899px){
  .stage-bottom{ max-width:none }
}

.btn-primary{
  width:100%;
  background: var(--ink-1);color:#fff;
  padding:14px 24px;border-radius:var(--radius-pill);
  font-weight:700;font-size:15px;letter-spacing:.005em;
  transition: background .15s, transform .15s;
}
.btn-primary:hover:not(:disabled){ background: var(--coral) }
.btn-primary:disabled{ background:var(--bg-2);color:var(--ink-3);cursor:not-allowed }
.btn-reset{
  width:100%;margin-top:10px;font-size:12px;color:var(--ink-3);font-weight:500;
  padding:8px;border-radius:var(--radius-sm);transition:.15s;
}
.btn-reset:hover{ color:var(--coral) }

/* ============================================================
   STICKY MOBILE BAR
   ============================================================ */
.bar-sticky{
  position:fixed;bottom:0;left:0;right:0;z-index:100;display:none;
  background: rgba(255,255,255,.96);backdrop-filter: blur(16px);
  border-top:1px solid var(--line);
  padding:12px 18px;align-items:center;gap:14px;
}
.bar-sticky__info{ flex:1;min-width:0;display:flex;flex-direction:column }
.bar-sticky__lbl{ font-size:11px;color:var(--ink-3);font-weight:600 }
.bar-sticky__total{ font-family:'Nunito',sans-serif;font-weight:800;font-size:22px;color:var(--ink-1);line-height:1.1 }
.bar-sticky__btn{
  background:var(--ink-1);color:#fff;
  padding:12px 22px;border-radius:var(--radius-pill);
  font-weight:700;font-size:14px;
}
.bar-sticky__btn:disabled{ background:var(--bg-2);color:var(--ink-3) }

@media (max-width:899px){
  .bar-sticky{ display:flex }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .stage__particles, .blob{ display:none }
}

/* ============================================================
   CONSEIL (quiz) — additional styles
   ============================================================ */

.bh-page-title{
  font-family:'Nunito',sans-serif;font-weight:800;font-size:17px;
  color:var(--ink-1);margin:0;letter-spacing:-.01em;
}
.proto-band{
  display:flex;justify-content:center;padding:8px 16px 0;
  background: var(--bg);
}

/* Screen overlay (live info on the booth's screen) */
.screen-overlay{
  position:absolute;z-index:6;pointer-events:none;
  /* Positioned over the booth's screen area */
  top: 26%; left: 47%;
  width: 18%; height: 22%;
  transform: perspective(800px) rotateY(-10deg) rotateX(2deg);
  transform-origin: left center;
  background: linear-gradient(135deg, rgba(231,26,101,.85), rgba(193,19,83,.85));
  border-radius: 4px;
  padding: 6px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;
  color:#fff;text-align:center;
  box-shadow: inset 0 0 12px rgba(0,0,0,.3), 0 0 20px rgba(231,26,101,.4);
  opacity:0;
  transition: opacity .4s ease;
}
.stage[data-state="has-screen"] .screen-overlay,
.screen-overlay:not([aria-hidden="true"]){ opacity:1 }
.so-line{
  font-family:'Nunito',sans-serif;font-weight:900;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  white-space:nowrap;
}
.so-line--big{ font-size:11px;line-height:1.1 }
.so-line--small{ font-size:8px;line-height:1.2;opacity:.85 }

/* Q1 — guests quick buttons */
.guests-input{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px;
}
.g-quick{
  background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--radius-sm);padding:14px 6px;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:15px;color:var(--ink-1);
  transition:.15s;
}
.g-quick:hover{ border-color:var(--ink-2) }
.g-quick.is-selected{ border-color:var(--coral);border-width:2px;background:linear-gradient(180deg, rgba(255,217,228,.30), transparent);color:var(--coral) }
.guests-custom .field-inline{ width:100% }

/* Q3 — goal list */
.goal-list{ display:flex;flex-direction:column;gap:10px }
.goal-row{
  display:flex;align-items:center;gap:14px;
  background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;text-align:left;
  transition:.15s;width:100%;
}
.goal-row:hover{ border-color:var(--ink-2) }
.goal-row.is-selected{ border-color:var(--coral);border-width:2px;padding:15px 17px;background:linear-gradient(90deg, rgba(255,217,228,.25), transparent 70%) }
.goal-ic{
  width:44px;height:44px;flex-shrink:0;
  background:var(--bg-2);border-radius:12px;
  display:grid;place-items:center;font-size:22px;
  border:1px solid var(--line);
}
.goal-row.is-selected .goal-ic{ background:var(--coral);border-color:var(--coral) }
.goal-body{ flex:1;min-width:0 }
.goal-name{ font-weight:700;font-size:15px;color:var(--ink-1);line-height:1.2 }
.goal-desc{ font-size:12px;color:var(--ink-3);margin-top:3px;line-height:1.4 }
.goal-arrow{ color:var(--ink-3);font-size:18px;transition:.2s }
.goal-row:hover .goal-arrow,
.goal-row.is-selected .goal-arrow{ color:var(--coral);transform:translateX(4px) }

/* Q4 — constraints */
.constraint-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;
}
.cstr{
  display:flex;align-items:center;gap:10px;
  background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--radius-sm);padding:14px 14px;text-align:left;
  font-weight:600;font-size:13px;color:var(--ink-1);transition:.15s;
}
.cstr:hover{ border-color:var(--ink-2) }
.cstr.is-selected{ border-color:var(--coral);border-width:2px;padding:13px 13px;background:linear-gradient(90deg, rgba(255,217,228,.25), transparent);color:var(--coral) }
.cstr-ic{ font-size:18px;line-height:1 }
.btn-secondary{
  width:100%;
  background:var(--surface);color:var(--ink-1);
  border:1.5px solid var(--ink-1);
  padding:14px;border-radius:var(--radius-pill);
  font-weight:700;font-size:14px;transition:.15s;
}
.btn-secondary:hover{ background:var(--ink-1);color:#fff }

.field-row{
  display:flex;flex-direction:column;gap:6px;margin-top:6px;
}
.field-row__lbl{ font-size:12px;color:var(--ink-3);font-weight:600 }

/* RESULT — reco card */
.step--reco .step__title{ font-size:clamp(26px,2.4vw,32px) }
.reco-card{
  background:var(--surface);border:1.5px solid var(--coral);
  border-radius:var(--radius-xl);padding:24px;
  box-shadow: 0 12px 40px rgba(231,26,101,.18);
}
.rc-head{ text-align:center;margin-bottom:18px }
.rc-tag{
  display:inline-block;
  background:var(--coral);color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--radius-pill);
  margin-bottom:8px;
}
.rc-title{
  font-family:'Nunito',sans-serif;font-weight:800;font-size:28px;color:var(--ink-1);
  margin-bottom:4px;letter-spacing:-.02em;
}
.rc-title strong{ color:var(--coral) }
.rc-cap{ font-size:13px;color:var(--ink-3) }

.rc-reasons{ background:var(--bg-2);border-radius:var(--radius);padding:16px;margin-bottom:16px }
.rc-reasons__title{ font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);margin-bottom:10px }
.rc-reasons ul{ list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px }
.rc-reasons li{ display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-1);line-height:1.45 }
.rc-check{ color:var(--coral);font-weight:900;flex-shrink:0 }

.rc-options{ margin-bottom:16px }
.rc-options__title{ font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);margin-bottom:8px }
.rc-options ul{ list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px }
.rc-opt{
  display:flex;align-items:center;gap:10px;
  background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:10px 14px;font-size:13px;color:var(--ink-1);font-weight:600;
}
.rc-opt-ic{ font-size:16px }
.rc-opt-price{ margin-left:auto;color:var(--coral);font-weight:800 }

.rc-total{
  display:flex;justify-content:space-between;align-items:baseline;
  background:linear-gradient(135deg, var(--ink-1), #2a2025);
  color:#fff;border-radius:var(--radius);padding:16px 20px;
}
.rc-total span{ font-size:14px;font-weight:600 }
.rc-total strong{ font-family:'Nunito',sans-serif;font-weight:800;font-size:28px;color:#fff }

.reco-tweak{
  margin-top:16px;
  background:var(--bg-2);border-radius:var(--radius);padding:14px 18px;
}
.reco-tweak summary{
  font-size:13px;font-weight:700;color:var(--ink-2);cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:8px;
}
.reco-tweak summary::before{ content:'▸';transition:.2s;color:var(--coral) }
.reco-tweak[open] summary::before{ transform:rotate(90deg) }
.reco-tweak summary::-webkit-details-marker{ display:none }
.reco-tweak__body{ padding-top:14px }
.reco-tweak__lbl{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-3);margin:14px 0 8px;
}

/* ============================================================
   BUILDER — Header title + Callouts around booth
   ============================================================ */

.builder-header .bh-page-title{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:'Nunito',sans-serif;font-weight:800;font-size:17px;
  color:var(--ink-1);letter-spacing:-.01em;margin:0;
}
.builder-header{ position:relative }

/* Callouts (Apple-product-callout style) */
.callouts{
  position:absolute;inset:0;pointer-events:none;z-index:5;
}
.callout{
  position:absolute;
  display:flex;align-items:center;gap:10px;
  background: rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:8px 16px 8px 14px;
  font-family:'Open Sans',sans-serif;
  box-shadow: 0 6px 18px rgba(231,26,101,.10), 0 0 0 1px rgba(255,255,255,.5);
  animation: calloutPop .45s var(--ease-bounce) both;
  backdrop-filter: blur(8px);
}
.cl-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--coral);
  box-shadow: 0 0 0 4px rgba(231,26,101,.20);
  flex-shrink:0;
}
.cl-text{ display:flex;flex-direction:column;line-height:1.1 }
.cl-lbl{
  font-size:9px;font-weight:700;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.08em;
}
.cl-val{
  font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;color:var(--ink-1);
}
@keyframes calloutPop{
  0%   { transform: scale(.6) translateY(8px); opacity:0 }
  60%  { transform: scale(1.05) translateY(0); opacity:1 }
  100% { transform: scale(1) translateY(0); opacity:1 }
}

/* Positions around the booth */
.callout--tl{ top: 8%;  left: 4%  }
.callout--tr{ top: 8%;  right: 4% }
.callout--bl{ bottom: 28%; left: 4%  }
.callout--br{ bottom: 28%; right: 4% }

@media (max-width: 1199px){
  .callout{ padding:6px 12px 6px 10px }
  .cl-lbl{ font-size:8px }
  .cl-val{ font-size:11px }
  .callout--tl, .callout--bl{ left: 2% }
  .callout--tr, .callout--br{ right: 2% }
}
@media (max-width: 899px){
  .callout{ font-size:10px;padding:5px 10px 5px 8px }
}

/* ============================================================
   BUILDER — Progressive reveal + clean empty state
   ============================================================ */

/* Hint when no model selected (replaces the empty cart) */
.stage-hint{
  position:relative;z-index:6;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 20px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(14px);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  font-size:13px;font-weight:600;color:var(--ink-2);
  max-width:max-content;margin:0 auto;
  animation: hintBreath 2.4s ease-in-out infinite;
}
.stage-hint__arrow{
  color:var(--coral);font-weight:900;font-size:16px;
  animation: hintArrow 1.2s ease-in-out infinite;
}
@keyframes hintBreath{
  0%,100%{ box-shadow: 0 0 0 rgba(231,26,101,0) }
  50%   { box-shadow: 0 0 0 6px rgba(231,26,101,.08) }
}
@keyframes hintArrow{
  0%,100%{ transform: translateX(0) }
  50%   { transform: translateX(4px) }
}
.stage-hint[hidden]{ display:none }

/* Reveal animation when sections appear progressively */
.step[hidden]{ display:none }
.step:not([hidden]){
  animation: stepFadeIn .5s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes stepFadeIn{
  0%   { opacity:0;transform:translateY(14px) }
  100% { opacity:1;transform:translateY(0) }
}

/* Stage bottom transitions in */
.stage-bottom{
  animation: stageBottomReveal .5s cubic-bezier(.2,.7,.2,1) both;
}
.stage-bottom[hidden]{ display:none }
@keyframes stageBottomReveal{
  0%   { opacity:0;transform:translateY(16px) scale(.96) }
  100% { opacity:1;transform:translateY(0) scale(1) }
}

/* ============================================================
   BUILDER — Sequential steps + Cart bar + Bigger booth
   ============================================================ */

/* Bigger booth */
#charImage{ max-height: min(70vh, 680px) !important }
.stage__booth{ min-height: 60vh !important }

/* Step body wrapper for collapse */
.step__body{ overflow:hidden;transition:max-height .35s ease, opacity .25s ease;max-height:2000px }

/* Step COLLAPSED — completed step becomes a compact summary header */
.step--done{
  background: var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:10px 16px;
  margin-bottom:8px;
  cursor:pointer;
  transition: background .2s, border-color .2s;
}
.step--done:hover{ background:#fff;border-color:var(--coral) }
.step--done .step__body{ max-height:0;opacity:0;padding:0 }
.step--done .step__title{
  font-size:13px !important;font-weight:700;color:var(--ink-2);
  margin-bottom:0;display:flex;align-items:center;gap:10px;
  letter-spacing:0;
}
.step--done .step__title::after{ display:none }
.step--done .step__title::before{
  content:'✓';color:var(--coral);font-weight:900;
  width:18px;height:18px;background:rgba(231,26,101,.12);
  border-radius:50%;display:inline-grid;place-items:center;font-size:11px;
  flex-shrink:0;
}
.step--done .step__sub{
  display:inline !important;margin:0 0 0 auto !important;
  font-size:12px !important;color:var(--coral) !important;font-weight:700 !important;
}
.step--done .step__sub::after{
  content:'modifier';color:var(--ink-3);font-weight:500;
  margin-left:10px;font-size:11px;opacity:.7;
}

/* Suivant button inside steps */
.btn-step-next{
  width:auto;align-self:flex-start;margin-top:14px;
  background:var(--ink-1);color:#fff;
  padding:11px 22px;border-radius:var(--radius-pill);
  font-weight:700;font-size:13px;transition:.15s;
}
.btn-step-next:hover{ background:var(--coral) }

/* ============================================================
   CART BAR — slim horizontal, replaces big panier card
   ============================================================ */
.cart-bar{
  display:flex;align-items:center;gap:14px;
  padding:10px 12px 10px 18px;
  background: var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  box-shadow: 0 12px 30px rgba(231,26,101,.12);
  max-width:560px;margin:0 auto;
  animation: stageBottomReveal .5s cubic-bezier(.2,.7,.2,1) both;
}
.cart-bar[hidden]{ display:none }

.cart-bar__info{
  flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2;
}
.cart-bar__name{
  font-family:'Nunito',sans-serif;font-weight:800;font-size:14px;color:var(--ink-1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cart-bar__sub{
  font-size:11px;color:var(--ink-3);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.cart-bar__total{
  display:flex;flex-direction:column;align-items:flex-end;line-height:1;
  padding:0 12px 0 6px;border-left:1px solid var(--line);
}
.cart-bar__lbl{ font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:700;margin-bottom:3px }
.cart-bar__val{ font-family:'Nunito',sans-serif;font-weight:800;font-size:20px;color:var(--ink-1) }

.cart-bar__btn{
  background:var(--ink-1);color:#fff;
  padding:11px 18px;border-radius:var(--radius-pill);
  font-weight:700;font-size:13px;
  white-space:nowrap;transition:.15s;
}
.cart-bar__btn:hover:not(:disabled){ background:var(--coral) }
.cart-bar__btn:disabled{ background:var(--bg-2);color:var(--ink-3);cursor:not-allowed }

.cart-bar__reset{
  width:32px;height:32px;border-radius:50%;
  background:transparent;color:var(--ink-3);
  font-size:14px;flex-shrink:0;
  transition:.15s;
}
.cart-bar__reset:hover{ background:var(--bg-2);color:var(--coral) }

/* ============================================================
   BUILDER — Format chips inside printer rows
   ============================================================ */

.fmt-list{
  list-style:none;padding:0;margin:8px 0 0;
  display:flex;flex-wrap:wrap;gap:6px;
}
.fmt-chip{
  display:inline-flex;align-items:center;gap:6px;
  background: var(--bg-2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:4px 9px 4px 6px;
  color:var(--ink-2);
}
.opt-row.is-selected .fmt-chip{
  background:#fff;border-color: var(--coral-soft);color:var(--coral);
}
.fmt-ic{
  width:16px;height:20px;flex-shrink:0;
  color: var(--ink-3);
}
.opt-row.is-selected .fmt-ic{ color:var(--coral) }
.fmt-cnt{ font-size:11px;font-weight:600;line-height:1 }
.fmt-cnt strong{ font-family:'Nunito',sans-serif;font-weight:900;color:var(--ink-1);font-size:13px }
.opt-row.is-selected .fmt-cnt strong{ color:var(--coral) }

/* New cap layout */
.opt-row__cap{
  font-family:'Nunito',sans-serif;font-weight:700;font-size:13px;
  color:var(--ink-3);line-height:1.2;text-transform:uppercase;letter-spacing:.06em;
}
.opt-row__cap strong{ font-size:20px;color:var(--ink-1);font-weight:900;letter-spacing:-.01em;text-transform:none }

/* ============================================================
   FMT PICK (format selector — dynamic 1/2/3 buttons)
   ============================================================ */
.fmt-pick{
  display:grid;grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));gap:10px;
}
.fmt-pick__btn{
  background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--radius);padding:16px 12px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:.15s;
}
.fmt-pick__btn:hover{ border-color:var(--ink-2) }
.fmt-pick__btn.is-active{
  border-color:var(--coral);border-width:2px;padding:15px 11px;
  background: linear-gradient(180deg, rgba(255,217,228,.25), transparent);
}
.fmt-pick__svg{
  width:40px;height:48px;color:var(--ink-2);
}
.fmt-pick__btn.is-active .fmt-pick__svg{ color:var(--coral) }
.fmt-pick__name{
  font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;color:var(--ink-1);line-height:1.1;
}
.fmt-pick__count{
  font-family:'Nunito',sans-serif;font-weight:900;font-size:18px;color:var(--coral);line-height:1;
}
.fmt-pick__ratio{ font-size:10px;color:var(--ink-3);font-weight:600 }

.step__hint{
  margin:14px 0 0;font-size:12px;color:var(--ink-3);font-style:italic;line-height:1.5;
}

/* ============================================================
   BUILDER — Bigger booth + stylized callouts
   ============================================================ */

#charImage{ max-height: min(78vh, 780px) !important }
.stage__booth{ min-height: 64vh !important }

/* Callouts upgraded — with icon + softer shadow */
.callout{
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(231,26,101,.18) !important;
  box-shadow: 0 8px 24px rgba(231,26,101,.14), 0 0 0 1px rgba(255,255,255,.6) !important;
  padding: 10px 18px 10px 14px !important;
}
.cl-dot{
  width:10px;height:10px !important;
  background: linear-gradient(135deg, var(--coral), #ff4d8d);
  box-shadow: 0 0 0 4px rgba(231,26,101,.18), 0 0 12px rgba(231,26,101,.5);
  animation: dotPulse 2.5s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{ box-shadow: 0 0 0 4px rgba(231,26,101,.18), 0 0 12px rgba(231,26,101,.5) }
  50%   { box-shadow: 0 0 0 7px rgba(231,26,101,.22), 0 0 20px rgba(231,26,101,.7) }
}
.cl-lbl{ font-size:9px !important;color:var(--coral) !important;font-weight:800 !important }
.cl-val{ font-size:14px !important }

/* ============================================================
   BUILDER — Formats inclus banner (replaces format step)
   ============================================================ */

.formats-incl{
  position:relative;z-index:6;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  background: var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:12px 18px;margin:0 auto;
  max-width:560px;
  box-shadow: 0 6px 22px rgba(231,26,101,.08);
  animation: stageBottomReveal .5s cubic-bezier(.2,.7,.2,1) both;
}
.formats-incl[hidden]{ display:none }
.fi-lbl{
  font-family:'Nunito',sans-serif;font-weight:800;font-size:11px;
  color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em;
  white-space:nowrap;
}
.fi-chips{ display:flex;gap:8px;flex-wrap:wrap;flex:1;justify-content:center }
.fi-chip{
  display:inline-flex;align-items:center;gap:6px;
  background: var(--cream);
  color:var(--coral-d);
  border-radius:var(--radius-pill);
  padding:5px 11px 5px 8px;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:12px;
}
.fi-chip svg{ width:14px;height:18px;color:var(--coral) }
.fi-chip .fi-cnt{ font-weight:900;color:var(--ink-1) }
.fi-note{
  font-size:11px;color:var(--coral);font-style:italic;font-weight:600;
  white-space:nowrap;
}

/* ============================================================
   Fix cart bar overflow + reduce booth min-height
   ============================================================ */

.stage__booth{ min-height: 52vh !important }
#charImage{ max-height: min(62vh, 620px) !important }

@media (min-width: 900px){
  .stage{
    grid-template-rows: 1fr auto auto auto !important;
    overflow-y: auto !important;
    padding-bottom: 20px !important;
  }
  .stage::-webkit-scrollbar{ width:5px }
  .stage::-webkit-scrollbar-thumb{ background:var(--line-2);border-radius:3px }
}

/* Make cart bar more compact and brand-aligned */
.cart-bar{
  background: var(--surface);
  border:1px solid var(--line);
  box-shadow: 0 8px 24px rgba(231,26,101,.14);
}
.cart-bar__btn{
  background: var(--coral) !important;
  color:#fff !important;
}
.cart-bar__btn:hover:not(:disabled){ background: var(--coral-d) !important }
.cart-bar__btn:disabled{ background: var(--bg-2) !important;color:var(--ink-3) !important }

/* Brand-align the dark "Suivant" button → use coral instead */
.btn-step-next{
  background: var(--coral) !important;
  color:#fff !important;
}
.btn-step-next:hover{ background: var(--coral-d) !important }

/* Brand-align primary buttons */
.btn-primary{
  background: var(--coral) !important;
  color:#fff !important;
}
.btn-primary:hover:not(:disabled){ background: var(--coral-d) !important;color:#fff !important }

/* ============================================================
   STAGE — Printer satellite + Format outputs
   ============================================================ */

/* Printer satellite (floating card top-right of booth) */
.stage__printer{
  position:absolute;z-index:5;
  top:30%;right:6%;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  animation: printerSlideIn .55s cubic-bezier(.34,1.56,.64,1) both;
}
.stage__printer[hidden]{ display:none }
.sp-card{
  width:110px;height:84px;
  background: linear-gradient(180deg, #fff, #faf3f1);
  border:1px solid var(--line-2);
  border-radius:14px;padding:8px;
  display:grid;place-items:center;
  box-shadow: 0 12px 32px rgba(231,26,101,.18), inset 0 1px 0 rgba(255,255,255,.6);
}
.sp-card img{ max-width:100%;max-height:100%;object-fit:contain }
.sp-label{
  background: var(--ink-1);color:#fff;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:10px;letter-spacing:.06em;
  padding:3px 10px;border-radius:var(--radius-pill);text-transform:uppercase;
}
@keyframes printerSlideIn{
  0%   { transform: translateX(40px) scale(.7); opacity:0 }
  60%  { transform: translateX(0) scale(1.05); opacity:1 }
  100% { transform: translateX(0) scale(1); opacity:1 }
}

/* Format outputs : mini paper sheets floating around the printer */
.stage__formats{
  position:absolute;inset:0;pointer-events:none;z-index:4;
}
.fmt-paper{
  position:absolute;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  animation: paperFloat .6s cubic-bezier(.34,1.56,.64,1) both, paperIdle 5s ease-in-out 1.5s infinite;
}
.fmt-paper-card{
  background: #fff;border:1px solid var(--line-2);
  border-radius:6px;padding:6px;
  box-shadow: 0 6px 18px rgba(231,26,101,.18);
  display:grid;place-items:center;
}
.fmt-paper-card svg{ color:var(--coral) }
.fmt-paper-lbl{
  background: var(--surface);color:var(--ink-1);
  border:1px solid var(--line);
  font-family:'Nunito',sans-serif;font-weight:800;font-size:10px;
  padding:2px 7px;border-radius:var(--radius-pill);
  white-space:nowrap;
}
.fmt-paper-lbl strong{ color:var(--coral);margin-right:3px }

/* Positions per format-id, each one starts slightly different */
.fmt-paper--classic{  top:14%;  left:5%;  animation-delay: .15s, 1.5s }
.fmt-paper--polaroid{ top:48%;  left:3%;  animation-delay: .30s, 1.8s }
.fmt-paper--strip{    bottom:18%; left:6%; animation-delay: .45s, 2.1s }
.fmt-paper-card{ transition: transform .3s var(--ease-bounce) }
.fmt-paper-card svg{ width:28px;height:36px }

@keyframes paperFloat{
  0%   { transform: scale(.3) rotate(-15deg); opacity:0 }
  60%  { transform: scale(1.08) rotate(2deg); opacity:1 }
  100% { transform: scale(1) rotate(0); opacity:1 }
}
@keyframes paperIdle{
  0%,100%{ transform: translateY(0) rotate(0) }
  50%   { transform: translateY(-6px) rotate(-2deg) }
}

/* Responsive: on smaller screens, hide the formats (they crowd) */
@media (max-width: 1199px){
  .stage__printer{ top:auto;bottom:8%;right:4% }
  .sp-card{ width:88px;height:68px }
}
@media (max-width: 899px){
  .stage__formats{ display:none }
  .stage__printer{ position:relative;flex-direction:row;margin-top:8px }
}

/* ============================================================
   PRINTER + FORMATS — Stylized & grouped
   ============================================================ */

/* Override previous card style */
.stage__printer{
  position:absolute;z-index:5;
  top:32%;right:5%;
  width:130px;
  animation: printerSlideIn .55s cubic-bezier(.34,1.56,.64,1) both;
}
.stage__printer[hidden]{ display:none }

.stage__printer img{
  width:100%;height:auto;
  /* Léger bord + ombre douce pour qu'on comprenne le truc sans rectangle */
  filter:
    drop-shadow(0 8px 22px rgba(231,26,101,.22))
    drop-shadow(0 0 1px rgba(0,0,0,.4))
    saturate(.8)
    contrast(1.05);
}

/* Hide ALL former card chrome */
.sp-card, .sp-label{ display:none !important }

/* Format papers — repositioned around the printer (right side) */
.fmt-paper--classic{  top:18% !important;  right:21% !important;  left:auto !important;  bottom:auto !important;  animation-delay: .25s, 1.6s !important }
.fmt-paper--polaroid{ top:46% !important;  right:21% !important;  left:auto !important;  bottom:auto !important;  animation-delay: .40s, 1.9s !important }
.fmt-paper--strip{    bottom:6% !important; right:7% !important;   top:auto !important;   left:auto !important;   animation-delay: .55s, 2.2s !important }

/* For Smart (1 format) and Smile (2 formats), need different positioning per count */
.stage__formats:has(.fmt-paper:only-child) .fmt-paper{
  top:48% !important;right:22% !important;left:auto !important;bottom:auto !important;
}

/* Style the format papers — sleeker */
.fmt-paper{
  align-items:flex-end;
  gap:6px;
}
.fmt-paper-card{
  width:34px;height:42px;padding:5px;
  background:#fff;border-radius:5px;
  border:1px solid rgba(231,26,101,.30);
  box-shadow: 0 6px 16px rgba(231,26,101,.18);
}
.fmt-paper-card svg{ width:24px;height:32px;color:var(--coral) }
.fmt-paper-lbl{
  font-size:10px;padding:3px 8px;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--ink-1);
}
.fmt-paper-lbl strong{ color:var(--coral);margin-right:3px;font-weight:900 }

@media (max-width:1199px){
  .stage__printer{ width:100px;top:auto;bottom:14% }
}

/* ============================================================
   LEAD GATE
   ============================================================ */
.gate{
  display:flex;align-items:center;justify-content:center;
  min-height: calc(100vh - 65px);
  padding: 32px 20px;
}
.gate__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;align-items:center;
  max-width:1080px;width:100%;
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius-xl);
  padding:40px;
  box-shadow: 0 30px 80px rgba(231,26,101,.12);
}
@media (min-width:900px){
  .gate__inner{ grid-template-columns: 1fr 1fr;gap:48px;padding:48px 56px }
}

.gate__kicker{
  display:inline-block;
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--coral);background:var(--cream);
  padding:5px 12px;border-radius:var(--radius-pill);
  margin-bottom:14px;
}
.gate__title{
  font-size:clamp(28px, 3.5vw, 38px);font-weight:900;color:var(--ink-1);
  letter-spacing:-.025em;line-height:1.1;margin-bottom:14px;
}
.gate__title .period{ color:var(--coral) }
.gate__desc{
  font-size:15px;color:var(--ink-3);line-height:1.55;margin-bottom:20px;
}
.gate__perks{
  list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;
}
.gate__perks li{
  display:flex;align-items:center;gap:10px;
  font-size:13px;color:var(--ink-2);font-weight:600;
}
.gp-ic{
  width:32px;height:32px;flex-shrink:0;
  background:var(--cream);border-radius:50%;
  display:grid;place-items:center;font-size:16px;
}

.gate__form{ display:flex;flex-direction:column;gap:12px }
.g-row{ display:grid;grid-template-columns:1fr 1fr;gap:10px }
.g-field{ display:flex;flex-direction:column;gap:6px }
.g-lbl{ font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3) }
.g-field input{
  background:var(--surface);
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  padding:12px 14px;font-size:14px;color:var(--ink-1);
  font-family:inherit;transition:.15s;
}
.g-field input:focus{
  outline:0;border-color:var(--coral);
  box-shadow:0 0 0 3px rgba(231,26,101,.12);
}
.g-pickup{
  background: linear-gradient(90deg, rgba(184,232,224,.40), rgba(255,255,255,.6));
  border:1px solid #5ed47e;
  border-radius:var(--radius-sm);
  padding:10px 14px;font-size:13px;color:#266c44;font-weight:600;
}
.g-submit{ margin-top:6px }
.g-fineprint{ font-size:11px;color:var(--ink-3);text-align:center;margin:6px 0 0;font-style:italic }

/* ============================================================
   SLIDERS
   ============================================================ */
.step--sliders{ display:flex;flex-direction:column;gap:14px }
.slider-block{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 18px;
}
.sb-head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:8px;
}
.sb-lbl{ font-size:13px;font-weight:700;color:var(--ink-1) }
.sb-val{
  font-family:'Nunito',sans-serif;font-weight:900;font-size:22px;color:var(--coral);
  letter-spacing:-.02em;
}
.sb-input{
  -webkit-appearance:none;appearance:none;
  width:100%;height:8px;background:var(--cream);border-radius:4px;outline:none;
  cursor:pointer;
}
.sb-input::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:24px;height:24px;border-radius:50%;
  background: var(--coral);
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(231,26,101,.45);
  cursor:grab;
  transition: .15s;
}
.sb-input::-webkit-slider-thumb:hover{ transform: scale(1.1) }
.sb-input::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;
  background: var(--coral);
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(231,26,101,.45);
  cursor:grab;
}
.sb-marks{
  display:flex;justify-content:space-between;margin-top:6px;
  font-size:11px;color:var(--ink-3);font-weight:600;
}

/* ============================================================
   OFFER CARDS
   ============================================================ */
.offer-list{ display:flex;flex-direction:column;gap:10px }
.offer-card{
  text-align:left;width:100%;
  background:var(--surface);
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  padding:14px 18px;
  display:flex;flex-direction:column;gap:8px;
  transition: .15s;
  cursor:pointer;
}
.offer-card:hover{ border-color:var(--coral-soft);transform: translateY(-1px) }
.offer-card.is-fit{ border-color: var(--coral-soft);background: linear-gradient(180deg, rgba(255,217,228,.18), #fff) }
.offer-card.is-selected{
  border-color: var(--coral);border-width:2px;padding:13px 17px;
  background: linear-gradient(180deg, rgba(255,217,228,.30), #fff);
  box-shadow: 0 12px 32px rgba(231,26,101,.15);
}

.oc-head{ display:flex;justify-content:space-between;align-items:flex-start;gap:10px }
.oc-name{
  font-family:'Nunito',sans-serif;font-weight:800;font-size:16px;color:var(--ink-1);
  letter-spacing:-.01em;
}
.oc-badges{ display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end }
.oc-badge{
  background:var(--cream);color:var(--coral-d);
  font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--radius-pill);
  white-space:nowrap;
}
.oc-badge--top{ background:var(--coral);color:#fff }
.oc-badge--fast{ background:#FFF1D8;color:#9c5e00 }
.oc-badge--digital{ background:#E0F0FF;color:#0066AA }

.oc-mid{ display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--ink-2) }
.oc-cap strong, .oc-guests strong{ color:var(--ink-1);font-weight:800 }
.oc-warn{
  font-size:11px;color:#9c5e00;background:rgba(255,210,130,.20);
  padding:6px 10px;border-radius:8px;
}
.oc-foot{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-top:4px;padding-top:8px;border-top:1px dashed var(--line);
}
.oc-price{
  font-family:'Nunito',sans-serif;font-weight:900;font-size:22px;color:var(--ink-1);
}
.offer-card.is-selected .oc-price{ color:var(--coral) }
.oc-arrow{
  font-size:13px;font-weight:700;color:var(--coral);
}
.offer-card.is-selected .oc-arrow{ color:var(--coral) }

.btn-link{
  background:transparent;color:var(--coral);font-weight:700;font-size:13px;
  padding:6px;align-self:flex-start;margin-top:6px;
}
.btn-link:hover{ text-decoration:underline }

/* ============================================================
   RECAP CARD
   ============================================================ */
.recap-card{
  background:var(--surface);
  border:1.5px solid var(--line-2);
  border-radius:var(--radius);
  padding:18px 20px;
}
.rc-line{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:8px 0;border-bottom:1px dashed var(--line);
  font-size:14px;color:var(--ink-2);
}
.rc-line:last-of-type{ border-bottom:0 }
.rc-line strong{ color:var(--ink-1);font-weight:700 }
.rc-line--total{
  margin-top:6px;padding-top:14px;border-top:1px solid var(--line);
  font-size:15px;color:var(--ink-1);font-weight:700;
}
.rc-line--total strong{
  font-family:'Nunito',sans-serif;font-weight:900;font-size:24px;color:var(--coral);
}
.rc-cta{ margin-top:14px }
.rc-note{ font-size:11px;color:var(--ink-3);text-align:center;margin:12px 0 0;font-style:italic }

/* ============================================================
   NEW LAYOUT — Booth left + Offers liquid-glass + Sliders right
   ============================================================ */

/* Stage now hosts booth + offers side-by-side */
@media (min-width: 900px){
  .stage{
    display:grid !important;
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 360px) !important;
    grid-template-rows: 1fr auto !important;
    gap: 18px !important;
    align-items:center !important;
    overflow-y: auto !important;
  }
  .stage__booth{
    grid-column:1 !important;grid-row:1 !important;
    width:100% !important;
    min-height: 55vh !important;
  }
  .offers-floating{
    grid-column:2 !important;grid-row:1 !important;
    align-self:stretch;
    display:flex;flex-direction:column;justify-content:center;
    padding:8px 6px;
  }
  .cart-bar{
    grid-column: 1 / -1 !important;grid-row:2 !important;
  }
}

@media (max-width: 899px){
  .offers-floating{ order: 3;padding: 0 16px }
}

#charImage{ max-height: min(58vh, 580px) !important }

/* OFFERS HEADER (above the list) */
.of-head{ padding: 6px 6px 8px;text-align:left }
.of-kicker{
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--coral);background:rgba(255,255,255,.7);
  padding:3px 9px;border-radius:var(--radius-pill);
  display:inline-block;margin-bottom:6px;
}
.of-title{
  font-family:'Nunito',sans-serif;font-size:18px;font-weight:900;color:var(--ink-1);
  letter-spacing:-.018em;line-height:1.15;
}
.of-title .period{ color:var(--coral) }

/* LIQUID GLASS offer cards */
.offer-list{
  display:flex;flex-direction:column;gap:10px;
  max-height: 60vh;overflow-y:auto;
  padding: 4px;
  scrollbar-width: thin;scrollbar-color: var(--line-2) transparent;
}
.offer-list::-webkit-scrollbar{ width:5px }
.offer-list::-webkit-scrollbar-thumb{ background:var(--line-2);border-radius:3px }

.offer-card{
  position:relative;overflow:hidden;
  /* Liquid glass effect */
  background: rgba(255, 255, 255, 0.50) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  border-radius: 18px !important;
  box-shadow:
    0 6px 22px rgba(231, 26, 101, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04) !important;
  padding: 12px 16px !important;
  text-align:left;width:100%;
  display:flex;flex-direction:column;gap:6px;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, background .2s;
}
/* Glass shimmer overlay */
.offer-card::before{
  content:'';position:absolute;inset:0;border-radius:18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 50%);
  pointer-events:none;
}
.offer-card:hover{
  transform: translateY(-2px) scale(1.01);
  box-shadow:
    0 12px 30px rgba(231, 26, 101, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
.offer-card.is-fit{
  background: rgba(255, 255, 255, 0.62) !important;
  border-color: rgba(231,26,101,0.30) !important;
}
.offer-card.is-selected{
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: var(--coral) !important;border-width:1.5px !important;
  box-shadow:
    0 16px 38px rgba(231, 26, 101, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 0 0 4px rgba(231,26,101,0.10) !important;
}

.oc-head{ position:relative;z-index:1 }
.oc-name{
  font-family:'Nunito',sans-serif;font-weight:800;font-size:15px;color:var(--ink-1);
  letter-spacing:-.01em;line-height:1.2;
}
.oc-badges{ display:flex;gap:5px;flex-wrap:wrap;margin-top:4px }
.oc-badge{ font-size:9px;padding:2px 7px;border-radius:var(--radius-pill);font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:rgba(255,255,255,0.7);color:var(--coral-d) }
.oc-badge--top{ background:var(--coral);color:#fff }
.oc-badge--fast{ background:rgba(255,210,130,.7);color:#9c5e00 }
.oc-badge--digital{ background:rgba(170,210,255,.7);color:#003e6b }

.oc-mid{ position:relative;z-index:1;display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);margin-top:2px }
.oc-cap strong, .oc-guests strong{ color:var(--ink-1);font-weight:800 }

.oc-warn{
  position:relative;z-index:1;
  font-size:11px;color:#9c5e00;background:rgba(255,210,130,.25);
  padding:5px 8px;border-radius:6px;
}

.oc-foot{
  position:relative;z-index:1;
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  margin-top:4px;padding-top:6px;
  border-top:1px solid rgba(255,255,255,0.6);
}
.oc-price{
  font-family:'Nunito',sans-serif;font-weight:900;font-size:20px;color:var(--ink-1);
  letter-spacing:-.015em;
}
.offer-card.is-selected .oc-price{ color:var(--coral) }
.oc-arrow{ font-size:11px;font-weight:700;color:var(--coral) }

/* ============================================================
   CONTEXT CARD (under sliders, complementary info)
   ============================================================ */
.step--context{ background:transparent;border:0;padding:0 }
.ctx-card{
  background: linear-gradient(180deg, var(--cream), rgba(255,255,255,.4));
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:14px 18px;
  display:flex;flex-direction:column;gap:8px;
}
.ctx-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:6px 0;border-bottom:1px dashed var(--line);font-size:13px;
}
.ctx-row:last-of-type{ border-bottom:0 }
.ctx-lbl{ font-size:11px;color:var(--ink-3);font-weight:700;text-transform:uppercase;letter-spacing:.06em }
.ctx-val{ color:var(--ink-1);font-weight:700;text-align:right }
.ctx-val--green{ color:#266c44 }
.ctx-edit{ text-align:center;margin-top:4px }
.ctx-edit button{
  font-size:11px;color:var(--ink-3);font-weight:600;
  padding:4px 10px;border-radius:6px;transition:.15s;
}
.ctx-edit button:hover{ color:var(--coral);background:rgba(231,26,101,.08) }

/* ============================================================
   OFFER CARDS V2 — Visual with printer
   ============================================================ */

/* Override previous offer card layout */
.offer-card{
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px !important;
}
.offer-card > * { position:relative;z-index:1 }

/* Printer thumbnail inside the offer card */
.oc-printer{
  position:relative;flex-shrink:0;
  width:64px;height:64px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,243,241,.85));
  border:1px solid rgba(255,255,255,.8);
  border-radius:14px;
  display:grid;place-items:center;
  padding:6px;
  box-shadow:
    0 4px 14px rgba(231,26,101,.10),
    inset 0 1px 0 rgba(255,255,255,1);
}
.oc-printer img{ max-width:100%;max-height:100%;object-fit:contain }
.oc-digital{ font-size:30px;line-height:1 }
.oc-fmt-chip{
  position:absolute;bottom:-6px;right:-6px;
  width:24px;height:24px;
  background:#fff;border:1.5px solid var(--coral);
  border-radius:6px;padding:3px;
  display:grid;place-items:center;
  box-shadow:0 3px 8px rgba(231,26,101,.30);
}
.oc-fmt-chip svg{ width:14px;height:18px;color:var(--coral) }

.oc-body{ flex:1;min-width:0;display:flex;flex-direction:column;gap:4px }
.oc-cap{
  display:flex;align-items:baseline;gap:6px;line-height:1;
}
.oc-cap strong{
  font-family:'Nunito',sans-serif;font-weight:900;font-size:24px;color:var(--ink-1);
  letter-spacing:-.02em;
}
.oc-cap span{
  font-size:12px;color:var(--ink-3);font-weight:600;
}
.offer-card.is-selected .oc-cap strong{ color:var(--coral) }

.oc-badges{ display:flex;gap:4px;flex-wrap:wrap }
.oc-badge{ font-size:9px;padding:2px 7px }
.oc-warn{
  font-size:10px;color:#9c5e00;background:rgba(255,210,130,.30);
  padding:3px 7px;border-radius:5px;display:inline-block;
}

.oc-foot{
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;
  padding:0;border:0;flex-shrink:0;
}
.oc-price{ font-size:18px !important;line-height:1 }
.offer-card.is-selected .oc-price{ color:var(--coral) }
.oc-arrow{
  width:28px;height:28px;border-radius:50%;
  background:rgba(231,26,101,.12);color:var(--coral);
  display:grid;place-items:center;font-weight:900;font-size:14px;
  transition:.2s;
}
.offer-card:hover .oc-arrow{ background:var(--coral);color:#fff;transform:translateX(2px) }
.offer-card.is-selected .oc-arrow{ background:var(--coral);color:#fff }

/* Hide the floating satellite printer next to booth (redundant now) */
.stage__printer{ display:none !important }
/* Also hide the format papers stack (replaced by chip inside offer card) */
.stage__formats{ display:none !important }

/* ============================================================
   BIGGER BOOTH — fills more vertical space
   ============================================================ */

@media (min-width: 900px){
  .stage{
    padding: 12px 18px !important;
    gap: 8px !important;
  }
  #charImage{ max-height: 78vh !important }
  .stage__booth{ min-height: 70vh !important }
}

/* Stretch booth column width too */
@media (min-width: 1100px){
  .stage{
    grid-template-columns: minmax(360px, 1.3fr) minmax(280px, 340px) !important;
  }
}

/* ============================================================
   OFFER CARDS V3 — Liquid glass, TEXT ONLY (no printer)
   ============================================================ */

/* Hide printer thumb from v2 */
.oc-printer, .oc-fmt-chip{ display:none !important }

/* Card becomes vertical + airy */
.offer-card{
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  padding: 16px 18px !important;
}

/* Tags row */
.oc-tags{
  display:flex;flex-wrap:wrap;gap:5px;min-height:18px;
}
.oc-tag{
  font-size:10px;font-weight:800;letter-spacing:.04em;
  padding:3px 9px;border-radius:var(--radius-pill);
  background: rgba(255,255,255,.70);
  color: var(--ink-2);
  border:1px solid rgba(255,255,255,.5);
  white-space:nowrap;
  backdrop-filter: blur(8px);
}
.oc-tag--top{ background: var(--coral) !important;color:#fff !important;border-color:transparent !important;box-shadow:0 4px 12px rgba(231,26,101,.30) }
.oc-tag--cheap{ background: rgba(184,232,224,.65) !important;color:#1e5d44 !important }
.oc-tag--pop{ background: linear-gradient(90deg,#FFE3A0,#FFD282) !important;color:#7a4900 !important }
.oc-tag--digital{ background: rgba(170,210,255,.55) !important;color:#003e6b !important }
.oc-tag--fast{ background: rgba(255,210,130,.55) !important;color:#7a4900 !important }
.oc-tag--std{ background: rgba(220,220,220,.60) !important;color:var(--ink-2) !important }

/* Main content : big number */
.oc-main{ display:flex;flex-direction:column;gap:4px;margin: 2px 0 }
.oc-cap{
  display:flex;align-items:baseline;gap:8px;line-height:1;
}
.oc-cap strong{
  font-family:'Nunito',sans-serif;font-weight:900;font-size:36px !important;color:var(--ink-1) !important;
  letter-spacing:-.03em;line-height:.95;
}
.oc-cap span{
  font-size:14px;color:var(--ink-2);font-weight:600;
}
.offer-card.is-selected .oc-cap strong{ color:var(--coral) !important }

.oc-guests{
  font-size:12px;color:var(--ink-3);font-weight:500;
}
.oc-guests strong{ color:var(--ink-1);font-weight:800 }

.oc-warn{
  font-size:10px;color:#9c5e00;background:rgba(255,210,130,.35);
  padding:5px 9px;border-radius:6px;font-weight:600;
}

/* Foot */
.oc-foot{
  display:flex !important;flex-direction:row !important;
  justify-content:space-between !important;align-items:center !important;
  gap:8px;padding:10px 0 0 !important;
  border-top:1px solid rgba(255,255,255,0.55) !important;
}
.oc-price{
  font-family:'Nunito',sans-serif;font-weight:900;font-size:22px !important;color:var(--ink-1) !important;
  letter-spacing:-.015em;line-height:1;
}
.offer-card.is-selected .oc-price{ color:var(--coral) !important }

.oc-cta{
  font-size:12px;font-weight:800;color:var(--coral);
  padding:7px 14px;border-radius:var(--radius-pill);
  background:rgba(231,26,101,.10);
  transition:.15s;
}
.offer-card:hover .oc-cta{ background:var(--coral);color:#fff;transform:translateX(2px) }
.offer-card.is-selected .oc-cta{
  background:var(--coral);color:#fff;
}

.oc-arrow{ display:none !important }

/* ============================================================
   FIX — cards being clipped (V3)
   ============================================================ */
.offer-list{
  max-height: none !important;
  overflow: visible !important;
  flex-shrink: 0;
}
.offer-card{
  overflow: visible !important;
  flex: 0 0 auto !important;
}
.offer-card::before{ border-radius: inherit }

/* ============================================================
   SLIDERS GATE — Fullscreen first, then shrink into place
   ============================================================ */

/* Hide the callouts above the booth (FORMULE/CAPACITÉ — redundant) */
.callouts{ display:none !important }

/* Bigger booth */
@media (min-width: 900px){
  #charImage{ max-height: 88vh !important }
  .stage__booth{ min-height: 80vh !important }
  .stage{ padding: 8px 16px !important }
}

/* New tag colors */
.oc-tag--shipping{ background: rgba(255,210,130,.55) !important;color:#7a4900 !important }
.oc-tag--pickup{ background: rgba(184,232,224,.65) !important;color:#1e5d44 !important }

/* SLIDERS GATE — fullscreen until both touched */
body:not(.sliders-done) .builder-shell .stage,
body:not(.sliders-done) .builder-shell .step:not(.step--sliders),
body:not(.sliders-done) .builder-shell .offers-floating,
body:not(.sliders-done) .builder-shell .cart-bar,
body:not(.sliders-done) .bar-sticky{
  display:none !important;
}
body:not(.sliders-done) .builder-shell{
  display:flex !important;align-items:center;justify-content:center;
  min-height: calc(100vh - 65px);
  padding: 32px 20px;
}
body:not(.sliders-done) .config{
  border:0 !important;background:transparent !important;padding:0 !important;
  max-width:680px;width:100%;
  overflow:visible !important;max-height:none !important;
}
body:not(.sliders-done) .step--sliders{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 48px 56px !important;
  box-shadow: 0 30px 80px rgba(231,26,101,.12);
  animation: gateIn .5s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes gateIn{
  0%   { opacity:0;transform:translateY(20px) scale(.98) }
  100% { opacity:1;transform:translateY(0) scale(1) }
}

body:not(.sliders-done) .step--sliders .step__title{
  font-size: clamp(28px, 3.5vw, 38px) !important;
  text-align:center;margin-bottom:8px !important;
}
body:not(.sliders-done) .step--sliders .step__sub{
  text-align:center;margin-top:8px !important;font-size:15px !important;
}
body:not(.sliders-done) .slider-block{
  padding: 22px 26px;margin-top:18px;
  border-radius: var(--radius-lg);
}
body:not(.sliders-done) .sb-lbl{ font-size: 15px }
body:not(.sliders-done) .sb-val{ font-size: 30px }
body:not(.sliders-done) .sb-input{ height: 10px;margin-top:8px;margin-bottom:6px }
body:not(.sliders-done) .sb-input::-webkit-slider-thumb{ width:32px;height:32px }
body:not(.sliders-done) .sb-input::-moz-range-thumb{ width:32px;height:32px }

body:not(.sliders-done) .step--sliders::after{
  content: attr(data-hint);
}

/* Helper "tap-me" pulse on untouched slider thumbs to invite interaction */
body:not(.sliders-done) .sb-input::-webkit-slider-thumb{
  animation: thumbPulse 1.8s ease-in-out infinite;
}
@keyframes thumbPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(231,26,101,.45), 0 4px 14px rgba(231,26,101,.45) }
  50%   { box-shadow: 0 0 0 10px rgba(231,26,101,0), 0 4px 14px rgba(231,26,101,.45) }
}

/* Hint footer of the gate panel */
.gate-hint{
  text-align:center;margin-top:18px;font-size:13px;color:var(--ink-3);font-style:italic;
}
body.sliders-done .gate-hint{ display:none }

/* SLIDERS-DONE state : slide animation back into right column */
body.sliders-done .step--sliders{
  animation: slidersSettle .55s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes slidersSettle{
  0%   { opacity:0;transform: translateX(40px) }
  100% { opacity:1;transform: translateX(0) }
}

/* ============================================================
   SMOOTH transition gate → builder
   ============================================================ */

/* Finishing state: brief 550ms confirmation before layout switch */
body.sliders-finishing .step--sliders{
  animation: gateFadeOut .55s cubic-bezier(.4,0,.2,1) both;
  pointer-events:none;
}
@keyframes gateFadeOut{
  0%   { opacity:1;transform: translateY(0) scale(1) }
  100% { opacity:0;transform: translateY(-16px) scale(.96) }
}
body.sliders-finishing .step--sliders::after{
  content:'✓ On prépare tes offres…';
  display:block;text-align:center;
  margin-top:16px;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;
  color:var(--coral);
  animation: confirmIn .4s ease both;
}
@keyframes confirmIn{
  0%   { opacity:0;transform: translateY(8px) }
  100% { opacity:1;transform: translateY(0) }
}

/* DONE state — staggered reveal of each section */
body.sliders-done .stage          { animation: revealStage   .55s cubic-bezier(.2,.7,.2,1) both }
body.sliders-done .offers-floating{ animation: revealOffers  .55s cubic-bezier(.2,.7,.2,1) .12s both }
body.sliders-done .step--sliders  { animation: revealRight   .55s cubic-bezier(.2,.7,.2,1) .18s both }
body.sliders-done .step--context  { animation: revealRight   .55s cubic-bezier(.2,.7,.2,1) .26s both }
body.sliders-done .cart-bar       { animation: revealStage   .55s cubic-bezier(.2,.7,.2,1) .20s both }

@keyframes revealStage{
  0%   { opacity:0;transform: translateX(-24px) }
  100% { opacity:1;transform: translateX(0) }
}
@keyframes revealOffers{
  0%   { opacity:0;transform: translateY(24px) scale(.96) }
  100% { opacity:1;transform: translateY(0) scale(1) }
}
@keyframes revealRight{
  0%   { opacity:0;transform: translateX(24px) }
  100% { opacity:1;transform: translateX(0) }
}

/* Tone down the thumb-pulse to avoid distracting during finishing */
body.sliders-finishing .sb-input::-webkit-slider-thumb,
body.sliders-done .sb-input::-webkit-slider-thumb{ animation: none }

/* ============================================================
   STRONGER finishing transition (1s, more visible)
   ============================================================ */
body.sliders-finishing .step--sliders{
  animation: gateFinishStrong 1s cubic-bezier(.4,0,.2,1) both !important;
}
@keyframes gateFinishStrong{
  0%   { opacity:1;transform: translateY(0) scale(1);   filter:blur(0) }
  15%  { opacity:1;transform: translateY(-4px) scale(1.02); filter:blur(0) }
  55%  { opacity:.5;transform: translateY(-12px) scale(.99); filter:blur(2px) }
  100% { opacity:0;transform: translateY(-24px) scale(.92); filter:blur(6px) }
}
body.sliders-finishing .step--sliders::after{
  content:'✓ Parfait, on prépare tes offres…' !important;
  font-size: 15px !important;
  margin-top: 22px !important;
  animation: confirmInStrong .5s ease both !important;
}
@keyframes confirmInStrong{
  0%   { opacity:0;transform: translateY(12px) }
  60%  { opacity:1;transform: translateY(-2px) }
  100% { opacity:1;transform: translateY(0) }
}

/* When the new layout pops in, give a small scale-in to the whole shell too */
body.sliders-done .builder-shell{
  animation: shellIn .6s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes shellIn{
  0%   { opacity:.4 }
  100% { opacity:1 }
}

/* ============================================================
   Smoother offer-card transitions when sliders change top 3
   ============================================================ */
body.sliders-done .offer-card{
  animation: cardEnter .35s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes cardEnter{
  0%   { opacity:0;transform: translateY(10px) scale(.97);filter: blur(2px) }
  100% { opacity:1;transform: translateY(0)    scale(1);  filter: blur(0) }
}
.offer-list{ transition: opacity .25s ease }

/* ============================================================
   OFFER-SELECTED mode — right column = compact + options + total
   ============================================================ */

/* Hide everything in right column except options + the new compact + total */
body.offer-selected .step--sliders,
body.offer-selected .step--context,
body.offer-selected #frontonBlock,
body.offer-selected #recapBlock{
  display:none !important;
}
/* Hide other offer cards, hide whole offers-floating column */
body.offer-selected .offers-floating{
  display:none !important;
}

/* Compact selected card at top of config */
.selected-compact{
  background: linear-gradient(135deg, var(--coral), #ff4d8d);
  color:#fff;
  border-radius:var(--radius-lg);
  padding:14px 18px;
  box-shadow: 0 12px 32px rgba(231,26,101,.28);
  animation: scIn .5s cubic-bezier(.2,.7,.2,1) both;
}
.selected-compact[hidden]{ display:none }
.sc-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
}
.sc-name{ font-family:'Nunito',sans-serif;font-weight:800;font-size:16px;letter-spacing:-.01em }
.sc-price{ font-family:'Nunito',sans-serif;font-weight:900;font-size:22px }
.sc-change{
  background: rgba(255,255,255,.18);color:#fff;
  font-size:11px;font-weight:700;padding:5px 11px;border-radius:var(--radius-pill);
  margin-top:8px;transition:.15s;
}
.sc-change:hover{ background:#fff;color:var(--coral) }
@keyframes scIn{
  0%   { opacity:0;transform: translateY(-10px) }
  100% { opacity:1;transform: translateY(0) }
}

/* Options take full width */
body.offer-selected #optionsBlock{
  background: transparent;border:0;padding:0;
}
body.offer-selected .option-grid{ display:flex !important;flex-direction:column;gap:8px }
body.offer-selected .option-card{
  padding:14px 16px !important;
}

/* Separator + total bottom */
.cfg-bottom{
  margin-top: 14px;
  animation: cbIn .5s cubic-bezier(.2,.7,.2,1) .1s both;
}
.cfg-bottom[hidden]{ display:none }
.cfg-sep{
  height:1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 30%, var(--line-2) 70%, transparent);
  margin: 12px 0 16px;
}
.cfg-bottom__row{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:14px;
}
.cfg-bottom__lbl{
  font-size:15px;color:var(--ink-1);font-weight:800;
}
.cfg-bottom__val{
  font-family:'Nunito',sans-serif;font-weight:900;font-size:32px;color:var(--coral);
  letter-spacing:-.02em;
}
.cfg-bottom__cta{ width:100% }
@keyframes cbIn{
  0%   { opacity:0;transform: translateY(12px) }
  100% { opacity:1;transform: translateY(0) }
}

/* Hide the booth's cart-bar when in offer-selected mode (total moved to right column) */
body.offer-selected .cart-bar{ display:none !important }

/* ============================================================
   INSTAGRAM FRAME around booth + story bubbles below
   ============================================================ */

.booth-frame{
  position:relative;z-index:3;
  background:#fff;
  border-radius:22px;
  padding:14px 14px 10px;
  box-shadow: 0 22px 50px rgba(231,26,101,.18), 0 4px 12px rgba(0,0,0,.08);
  display:flex;flex-direction:column;align-items:center;
  max-width: 520px;width: 100%;
}
.bf-inner{
  width:100%;overflow:hidden;border-radius:16px;
  background: linear-gradient(180deg, #fffaf8 0%, #ffeae4 100%);
  display:grid;place-items:center;
}
.bf-inner img{ width:auto;max-height:62vh;max-width:100% }

.bf-stories{
  display:flex;gap:14px;padding:14px 6px 4px;justify-content:center;flex-wrap:wrap;
}
.story-bubble{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  cursor:pointer;transition:.2s;
}
.story-bubble:hover{ transform: scale(1.06) }
.sb-inner{
  width:48px;height:48px;border-radius:50%;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  padding:2.5px;
  display:grid;place-items:center;
  position:relative;
}
.sb-inner::before{
  content:'';position:absolute;inset:2.5px;border-radius:50%;background:#fff;
}
.sb-inner > *,
.story-bubble > .sb-inner::after{
  position:relative;z-index:1;
}
.story-bubble .sb-inner{ font-size:22px;color:#1a1a1a }
.story-bubble .sb-inner > *{ position:relative;z-index:1 }
.story-bubble .sb-inner{ overflow:visible }
.sb-lbl{
  font-size:10px;color:var(--ink-3);font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
}

/* Override the previous big drop-shadow on charImage now it's inside a frame */
#charImage{
  max-height: 62vh !important;
  filter: none !important;
}
.stage__floor{ display:none !important }

/* ============================================================
   OFFER-SELECTED v2 — selected stays in middle column compact
   ============================================================ */

/* Revert: keep offers-floating visible */
body.offer-selected .offers-floating{ display:flex !important }

/* Hide the duplicate compact in right column */
body.offer-selected #selectedCompact{ display:none !important }

/* Hide non-selected offer cards */
body.offer-selected .offer-card:not(.is-selected){ display:none !important }

/* Hide the offer-list header (3 offres sur-mesure / Nos offres pour toi) when selected */
body.offer-selected .of-head{ display:none }

/* Compact the selected card */
body.offer-selected .offer-card.is-selected{
  padding: 12px 16px !important;
  border-width: 2px !important;
}
body.offer-selected .offer-card.is-selected .oc-cap strong{ font-size:28px !important }
body.offer-selected .offer-card.is-selected .oc-price{ font-size:20px !important }
body.offer-selected .offer-card.is-selected .oc-tags{ gap:4px }
body.offer-selected .offer-card.is-selected .oc-cta{
  /* Replace by a discreet "changer" link */
  display:none;
}
body.offer-selected .offer-card.is-selected::after{
  content:'↺ Changer d\'offre';
  display:block;text-align:center;
  font-size:11px;color:var(--coral);font-weight:700;
  margin-top:8px;cursor:pointer;
}

/* ============================================================
   OPTIONS in middle column (under selected offer) + dropdown
   ============================================================ */

/* Booth garde sa position d'origine (centrée verticalement).
   Seule la colonne offres est forcée en haut. */
@media (min-width: 900px){
  .offers-floating{
    align-self: start !important;
    justify-content: flex-start !important;
    align-content: flex-start !important;
    padding-top: 24px !important; /* aligne of-title avec "Ajuster" à droite */
  }
  .offers-floating > *{ flex: 0 0 auto !important }
}

/* Header "Nos offres pour toi" — même style que .step__title (Ajuster) */
.of-head{
  padding: 0 4px !important;
  margin-bottom: 14px !important;
  text-align: left;
}
.of-title{
  font-family: 'Open Sans', sans-serif !important;
  font-size: clamp(22px, 2.1vw, 28px) !important;
  font-weight: 800 !important;color: var(--ink-1) !important;
  letter-spacing: -.022em !important;line-height: 1.15 !important;
  margin: 0 !important;
}
.of-title .period{ color: var(--coral) }
/* Sous-titre "3 offres sur-mesure" — même style que .step__sub */
.of-sub{
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;font-weight: 400;color: var(--ink-3);
  letter-spacing: 0;
  margin-top: 4px;
  background: transparent !important;padding: 0 !important;border-radius: 0 !important;
  text-transform: none !important;
}

/* ============================================================
   Petits ajustements de cohérence visuelle
   ============================================================ */

/* Le "." coral du step__title apparaissait sous le subtitle (espace mort).
   Le retirer ici — le subtitle se suffit. */
.step--sliders .step__title::after,
.step--prefs .step__title::after{
  content: '' !important;display: none !important;
}

/* Aligner pixel-perfect "Ajuster" (.config) et "Nos offres pour toi" (.offers-floating) :
   les deux colonnes ont des paddings différents — on les calque. */
@media (min-width: 900px){
  #config{ padding-top: 24px !important }
  #config .step:first-of-type{ padding-top: 0 !important;margin-top: 0 !important }
  .offers-floating{ padding-top: 24px !important }
}

/* Récap "Pour / Le / Livraison" — liquid glass, cohérent avec le reste */
.ctx-card{
  background: rgba(255,255,255,.55) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.75) !important;
  border-radius: 18px !important;
  padding: 14px 18px !important;
  box-shadow: 0 6px 22px rgba(231,26,101,.08), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.ctx-row{
  border-bottom-style: solid !important;
  border-bottom-color: rgba(231,26,101,.10) !important;
}

/* ============================================================
   STORY MODAL — Instagram-style FAQ
   ============================================================ */
.story-modal{
  position: fixed;inset: 0;z-index: 9999;
  display: grid;place-items: center;
  padding: 20px;
}
.story-modal[hidden]{ display: none }
body.story-open{ overflow: hidden }

.sm-backdrop{
  position: absolute;inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  animation: smFadeIn .25s ease both;
}
@keyframes smFadeIn{ from{ opacity:0 } to{ opacity:1 } }

.sm-frame{
  position: relative;
  width: min(420px, 92vw);
  height: min(720px, 86vh);
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.2);
  display: flex;flex-direction: column;
  animation: smSlideIn .35s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes smSlideIn{
  from{ opacity:0;transform: translateY(20px) scale(.96) }
  to  { opacity:1;transform: translateY(0)    scale(1) }
}

/* Top progress bars */
.sm-bars{
  position: absolute;top: 0;left: 0;right: 0;z-index: 5;
  display: flex;gap: 3px;padding: 10px 12px 0;
}
.sm-bar{
  flex: 1;height: 3px;
  background: rgba(255,255,255,.40);
  border-radius: 2px;overflow: hidden;
}
.sm-bar--done{ background: #fff }
.sm-bar__fill{
  height: 100%;background: #fff;width: 0%;
  box-shadow: 0 0 6px rgba(255,255,255,.5);
}
.sm-bar--done .sm-bar__fill{ width: 100% }

/* Header (avatar + name + close) */
.sm-head{
  position: absolute;top: 18px;left: 0;right: 0;z-index: 5;
  display: flex;align-items: center;gap: 10px;
  padding: 0 14px;
}
.sm-avatar{
  width: 32px;height: 32px;border-radius: 50%;
  background: #fff;
  display: grid;place-items: center;overflow: hidden;
  padding: 4px;
}
.sm-avatar img{ width: 100%;height: 100%;object-fit: contain }
.sm-meta{ flex: 1;min-width: 0;color: #fff;text-shadow: 0 1px 4px rgba(0,0,0,.4) }
.sm-account{ font-weight: 700;font-size: 13px;line-height: 1.2 }
.sm-time{ font-size: 11px;opacity: .85;font-weight: 500 }
.sm-x{
  width: 32px;height: 32px;border-radius: 50%;
  background: rgba(255,255,255,.18);color: #fff;
  font-size: 22px;font-weight: 300;line-height: 1;
  display: grid;place-items: center;
  cursor: pointer;
}
.sm-x:hover{ background: rgba(255,255,255,.30) }

/* Slide content */
.sm-content{
  flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;
  padding: 60px 28px 100px;
  transition: background .4s ease;
}
.sm-emoji{
  font-size: 110px;line-height: 1;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.18));
  margin-bottom: 20px;
  animation: smEmojiIn .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes smEmojiIn{
  from{ opacity:0;transform: scale(.5) rotate(-12deg) }
  to  { opacity:1;transform: scale(1) rotate(0) }
}
.sm-caption{
  background: rgba(255,255,255,.92);
  border-radius: 16px;padding: 16px 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  text-align: center;
  max-width: 100%;
  animation: smCaptionIn .45s ease .1s both;
}
@keyframes smCaptionIn{
  from{ opacity:0;transform: translateY(10px) }
  to  { opacity:1;transform: translateY(0) }
}
.sm-title{
  font-family: 'Nunito', sans-serif;
  font-size: 20px;font-weight: 900;color: var(--ink-1);
  margin: 0 0 6px;letter-spacing: -.01em;line-height: 1.15;
}
.sm-body{
  font-size: 13.5px;color: var(--ink-2);
  margin: 0;line-height: 1.45;
}

/* Tap zones (gauche/droite) */
.sm-nav{
  position: absolute;top: 60px;bottom: 0;
  width: 35%;background: transparent;
  border: 0;cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sm-nav--prev{ left: 0 }
.sm-nav--next{ right: 0;width: 65% }

@media (max-width: 480px){
  .sm-frame{ width: 100vw;height: 100vh;border-radius: 0;max-width: none }
  .sm-emoji{ font-size: 90px }
}

/* ============================================================
   Tag "Multi-format" — même style que les autres oc-tag
   ============================================================ */
.oc-tag--multi{
  background: linear-gradient(135deg, #fde2ec, #ffd1c2) !important;
  color: #a02050 !important;
  border-color: rgba(231,26,101,.15) !important;
  font-weight: 800 !important;
}

/* Pictos formats inline, à droite du bloc capacité */
.oc-main{
  display: flex !important;flex-direction: row !important;
  align-items: center !important;gap: 12px !important;
}
.oc-main-text{
  flex: 1;min-width: 0;
  display: flex;flex-direction: column;gap: 2px;
}
.oc-pictos{
  display: flex;align-items: center;gap: 5px;
  flex-shrink: 0;
}
.oc-p{
  display: inline-grid;place-items: center;
  width: 22px;height: 26px;
  color: var(--coral);
}
.oc-p .fp-svg{
  width: 22px;height: auto;display: block;
  filter: drop-shadow(0 1px 2px rgba(231,26,101,.18));
}
.offer-card.is-selected .oc-p{ color: var(--coral-d) }
/* Mono-format (Smart) : picto un peu plus discret */
.oc-pictos:not(.is-multi) .oc-p{ opacity: .65 }

/* ============================================================
   Recharge supplémentaire — option avec stepper qty
   ============================================================ */
.option-card--recharge .option-head{
  align-items: center;
}
.option-card--recharge .option-check{ display: none !important }
.option-card--recharge .option-name{
  flex-wrap: wrap;
}
.option-card--recharge .opt-title{
  flex: 1 1 auto;min-width: 0;
  white-space: normal;
}
.rc-stepper-row{
  display: flex;justify-content: flex-end;
  padding: 0 14px 10px;
}
.rc-stepper{
  display: inline-flex;align-items: center;gap: 4px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(231,26,101,.20);
  border-radius: var(--radius-pill);
  padding: 3px;
}
.rc-stepper button{
  width: 28px;height: 28px;border-radius: 50%;
  background: var(--coral);color: #fff;
  font-size: 17px;font-weight: 800;line-height: 1;
  display: grid;place-items: center;
  cursor: pointer;transition: .15s;
}
.rc-stepper button:hover{ background: var(--coral-d) }
.rc-stepper button:disabled{
  background: rgba(231,26,101,.18);color: rgba(231,26,101,.5);
  cursor: not-allowed;
}
.rc-qty{
  min-width: 28px;text-align: center;
  font-family: 'Nunito',sans-serif;font-weight: 900;font-size: 16px;
  color: var(--ink-1);
}
.option-card--recharge.is-selected{
  background: rgba(255,255,255,.85) !important;
  border-color: var(--coral) !important;
}

/* On masque proprement le pop "Protégée"/etc. au cas où */
.stage__equips, .equip{ display: none !important }

/* En mode offer-selected : le booth garde sa position d'origine (centré dans
   sa cell), et la colonne offres prend la même hauteur que le booth via
   align-self: stretch + justify-content: center → les deux contenus sont
   centrés à la même verticale ⇒ leurs hauts s'alignent (puisque hauteurs
   similaires booth-frame ≈ stack offre+chips+total). */
body.offer-selected .offers-floating{
  align-self: stretch !important;
  display: flex !important;flex-direction: column;justify-content: center !important;
  gap: 12px !important;
  padding: 0 6px !important;
  margin: 0 !important;
  height: auto !important;
}
body.offer-selected .offer-list{
  margin: 0 !important;padding: 0 !important;
}
body.offer-selected .offer-card.is-selected{
  margin-top: 0 !important;
}

/* ============================================================
   STORY BUBBLES — fond clair + emoji centré (FAQ)
   ============================================================ */
.sb-inner{
  position: relative;overflow: hidden !important;
  /* Ring Instagram conservé en bordure externe */
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important;
}
.sb-inner::before{
  /* Intérieur blanc avec léger lavis pastel pour différencier les catégories */
  content: '' !important;
  position: absolute !important;inset: 2.5px !important;
  border-radius: 50% !important;
  background: #fff !important;
  display: block !important;
}
/* Léger fond pastel par catégorie (FAQ) */
[data-story="installation"] .sb-inner::before{ background: radial-gradient(circle at 30% 30%, #ffe3db, #fff 80%) !important }
[data-story="utilisation"]  .sb-inner::before{ background: radial-gradient(circle at 30% 30%, #fde2ec, #fff 80%) !important }
[data-story="livraison"]    .sb-inner::before{ background: radial-gradient(circle at 30% 30%, #e0f1ff, #fff 80%) !important }
[data-story="avis"]         .sb-inner::before{ background: radial-gradient(circle at 30% 30%, #fff4cc, #fff 80%) !important }
[data-story="sav"]          .sb-inner::before{ background: radial-gradient(circle at 30% 30%, #e6f5e9, #fff 80%) !important }
.sb-emoji{
  position: relative;z-index: 2;
  font-size: 24px;line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.10));
}
.story-bubble .sb-inner{ font-size: 24px;color: #1a1a1a }
.sb-lbl{ font-size: 10px !important }
body.offer-selected #optionsBlock{
  background: transparent !important;border:0 !important;padding: 8px 0 !important;
}
body.offer-selected #optionsBlock .step__title{ font-size:15px !important;margin-bottom:8px !important }

/* Liquid glass options */
body.offer-selected .option-card{
  background: rgba(255,255,255,.55) !important;
  border:1px solid rgba(255,255,255,.75) !important;
  border-radius:14px !important;
  padding: 0 !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 6px 18px rgba(231,26,101,.10),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
body.offer-selected .option-card.is-selected{
  background: rgba(255,255,255,.78) !important;
  border-color: var(--coral) !important;
}

.option-head{
  display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;
}
.option-expand{
  background:transparent;color:var(--ink-3);font-size:14px;
  width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;
  transition: transform .25s ease;
}
.option-expand:hover{ background: rgba(231,26,101,.10);color:var(--coral) }
.option-card.is-expanded .option-expand{ transform: rotate(180deg);color:var(--coral) }

.option-details{
  max-height:0;overflow:hidden;
  transition: max-height .35s ease, padding .35s ease, opacity .25s ease;
  opacity:0;
  border-top: 1px solid rgba(255,255,255,.6);
  padding: 0 14px;
}
.option-card.is-expanded .option-details{
  max-height: 200px;
  padding: 10px 14px 12px;
  opacity:1;
}
.option-details p{
  margin:0;font-size:12px;color:var(--ink-2);line-height:1.55;
}

/* Cfg-bottom in liquid glass too */
body.offer-selected .cfg-bottom{
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 8px 20px rgba(231,26,101,.10), inset 0 1px 0 rgba(255,255,255,.9);
}

/* Hide entire right column when offer-selected (everything moved to middle) */
body.offer-selected #config{
  display: none !important;
}

/* ============================================================
   OPTIONS catalog stays on RIGHT, selected chips in MIDDLE
   ============================================================ */

/* Re-show right column in offer-selected mode */
body.offer-selected #config{ display: flex !important }

/* Inside right column, only show options block + the title */
body.offer-selected #config > *:not(#optionsBlock){ display:none !important }
body.offer-selected #optionsBlock{
  background: rgba(255,255,255,.55) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.75) !important;
  border-radius: 18px !important;
  padding: 16px 18px !important;
}
body.offer-selected #optionsBlock .step__title{ font-size:18px !important;margin-bottom:14px !important }

/* Selected options inline list in middle column */
.sel-opt-list{
  display:flex;flex-direction:column;gap:8px;
  margin: 8px 0 4px;
}
.sel-opt-list.is-empty{ display:none }
.sel-opt-chip{
  display:flex;align-items:center;gap:10px;
  background: rgba(255,255,255,.65);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow:
    0 4px 14px rgba(231,26,101,.10),
    inset 0 1px 0 rgba(255,255,255,.9);
  animation: chipPop .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes chipPop{
  0%   { opacity:0;transform: scale(.85) translateY(-6px) }
  100% { opacity:1;transform: scale(1) translateY(0) }
}
.soc-ic{ font-size:16px;line-height:1 }
.soc-name{ flex:1;min-width:0;font-weight:600;font-size:13px;color:var(--ink-1) }
.soc-price{ font-weight:800;font-size:13px;color:var(--coral) }
.soc-rm{
  width:22px;height:22px;border-radius:50%;
  background: rgba(231,26,101,.10);color:var(--coral);
  font-size:14px;font-weight:900;display:grid;place-items:center;
  transition:.15s;
}
.soc-rm:hover{ background:var(--coral);color:#fff }

/* Editable slider value */
.sb-val{ user-select:none;transition: color .15s }
.sb-val:hover{ color: var(--coral-d);text-decoration: underline dotted;text-underline-offset:4px }
.sb-input-edit{
  font-family:'Nunito',sans-serif;font-weight:900;font-size:22px;
  color:var(--coral);background:transparent;border:0;
  border-bottom:2px solid var(--coral);
  text-align:right;width: 130px;outline:none;
  padding: 2px 4px;
}
.sb-input-edit::-webkit-outer-spin-button,
.sb-input-edit::-webkit-inner-spin-button{ -webkit-appearance:none;margin:0 }

/* ============================================================
   BOOTH MUCH BIGGER (comme la home badabooth.fr)
   ============================================================ */
.booth-frame{
  max-width: 600px !important;
  padding: 18px 18px 12px !important;
}
.bf-inner{
  min-height: 60vh !important;
}
.bf-inner img,
#charImage{
  max-height: 78vh !important;
  width: auto !important;
  max-width: 100%;
}
@media (min-width: 1200px){
  .bf-inner img,
  #charImage{ max-height: 82vh !important }
}

/* Story bubbles slightly bigger */
.sb-inner{ width: 54px !important;height: 54px !important }
.story-bubble .sb-inner{ font-size: 24px !important }

/* ============================================================
   BIGGER BOOTH + ANIMATED BLOB + OPTIONS expanded by default
   ============================================================ */

/* Booth encore plus gros */
.booth-frame{ max-width: 680px !important;padding: 22px 22px 14px !important }
.bf-inner img,
#charImage{
  max-height: 86vh !important;
  width: auto !important;
}
@media (min-width: 1400px){
  .bf-inner img,
  #charImage{ max-height: 90vh !important }
  .booth-frame{ max-width: 760px !important }
}

/* Sub info under capacity in offer cards (digital → illimité, others → bandelettes) */
.oc-sub{
  font-size:12px;color:var(--coral-d);font-weight:700;line-height:1.3;
  margin: 4px 0 2px;
}

/* Animated blob behind booth — more vivid pink + secondary blue */
.blob{ filter: blur(60px) !important;opacity: .65 !important }
.blob--1{
  background: radial-gradient(circle, rgba(255,100,150,.85) 0%, rgba(231,26,101,.55) 35%, transparent 70%) !important;
  animation: blobBreathPink 11s ease-in-out infinite !important;
}
@keyframes blobBreathPink{
  0%,100%{ transform: translate(-50%, 0) scale(1) rotate(0deg) }
  33%   { transform: translate(-46%, -3%) scale(1.18) rotate(20deg) }
  66%   { transform: translate(-54%, 3%) scale(.94) rotate(-15deg) }
}
.blob--2{
  display:block !important;
  width:55%;aspect-ratio:1;
  bottom:5%;right:8%;top:auto;left:auto;
  background: radial-gradient(circle, rgba(120,170,255,.50) 0%, rgba(80,130,220,.30) 40%, transparent 75%) !important;
  filter: blur(70px) !important;opacity: .55 !important;
  animation: blobBreathBlue 14s ease-in-out infinite;
}
@keyframes blobBreathBlue{
  0%,100%{ transform: translate(0,0) scale(1) }
  50%   { transform: translate(-15%, -10%) scale(1.25) }
}

/* Options expanded by default — show details always (only 5 options now) */
body.offer-selected .option-card .option-details{
  max-height: 200px !important;
  padding: 10px 14px 12px !important;
  opacity: 1 !important;
  border-top: 1px solid rgba(255,255,255,.6) !important;
}
/* Bigger, more visible expand button — but optional now (details always shown) */
.option-expand{ display:none !important }
.option-details p{ font-size: 12.5px !important;line-height: 1.55 !important;color: var(--ink-2) !important }

/* ============================================================
   FIX — Booth was too big (bubbles hidden) + offer cards overflow
   23 mai 2026 — session prochaine
   ============================================================ */

/* Booth slimmer — leave room for story bubbles + offers fitting */
.booth-frame{
  max-width: 460px !important;
  padding: 14px 14px 10px !important;
}
.bf-inner{
  min-height: 0 !important;
}
.bf-inner img,
#charImage{
  max-height: 56vh !important;
  width: auto !important;
  max-width: 100%;
}
@media (min-width: 1200px){
  .booth-frame{ max-width: 500px !important }
  .bf-inner img,
  #charImage{ max-height: 60vh !important }
}
@media (min-width: 1400px){
  .booth-frame{ max-width: 540px !important }
  .bf-inner img,
  #charImage{ max-height: 62vh !important }
}
@media (min-width: 900px){
  #charImage{ max-height: 56vh !important }
  .stage__booth{ min-height: 0 !important }
}

/* Bubbles always visible just below the booth */
.bf-stories{
  padding: 12px 6px 4px !important;
  gap: 12px !important;
}
.sb-inner{ width: 46px !important;height: 46px !important }
.story-bubble .sb-inner{ font-size: 20px !important }
.sb-lbl{ font-size: 10px !important }

/* ============================================================
   Compact offer cards — 3 cards must fit on screen w/o scroll
   ============================================================ */
.offer-list{
  gap: 8px !important;
}
.offer-card{
  padding: 10px 14px !important;
  gap: 6px !important;
}
.oc-tags{
  gap: 4px !important;
  min-height: 0 !important;
}
.oc-tag{
  font-size: 9px !important;
  padding: 2px 7px !important;
}
.oc-main{
  gap: 2px !important;
  margin: 0 !important;
}
.oc-cap strong{ font-size: 26px !important;line-height: 1 !important }
.oc-cap span{ font-size: 13px !important }
.oc-sub{ font-size: 11px !important;margin: 1px 0 0 !important }
.oc-guests{ font-size: 11px !important }
.oc-warn{
  font-size: 10px !important;
  padding: 3px 7px !important;
  /* Note positive (économies) : vert pastel à la place du jaune-alerte */
  background: rgba(184,232,224,.55) !important;
  color: #1e5d44 !important;
}
.oc-warn::before{ content: '✓ '; font-weight: 900 }
.oc-foot{
  padding: 6px 0 0 !important;
  gap: 6px !important;
}
.oc-price{ font-size: 18px !important }
.oc-cta{
  font-size: 11px !important;
  padding: 5px 11px !important;
}

/* Tighten offers-floating wrapper too */
.offers-floating{
  gap: 8px !important;
}
.of-head{ margin-bottom: 4px !important }
.of-title{ font-size: 18px !important;margin: 2px 0 0 !important }
.of-kicker{ font-size: 11px !important }

/* Cadre 100% perso = inclus auto, chip différencié */
.sel-opt-chip.is-included{
  background: linear-gradient(180deg, rgba(255,217,228,.55), rgba(255,255,255,.65)) !important;
  border-color: rgba(231,26,101,.30) !important;
}
.sel-opt-chip.is-included .soc-price{
  background: var(--coral);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}

/* ============================================================
   GATE FUSIONNÉE — Lead form + sliders sur le même écran
   ============================================================ */

/* Section sub-headers dans le form */
.g-section{
  display:flex;align-items:center;gap:10px;
  margin: 8px 0 0;
}
.g-section--needs{ margin-top: 16px }
.g-section-lbl{
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color: var(--coral);
}
.g-section::after{
  content:'';flex:1;height:1px;background: var(--line);
}

/* Sliders intégrés au gate (compactes, charte coral) */
.g-slider-block{
  background: var(--cream);
  border: 1px solid rgba(231,26,101,.18);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
}
.g-sb-head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom: 8px;
}
.g-sb-lbl{ font-size:13px;font-weight:700;color:var(--ink-1) }
.g-sb-val{
  font-family:'Nunito',sans-serif;font-weight:900;font-size:20px;color:var(--coral);
  letter-spacing:-.02em;
}
.g-sb-input{
  -webkit-appearance:none;appearance:none;
  width:100%;height:6px;border-radius:3px;
  background: linear-gradient(90deg, var(--coral) 0%, var(--coral-soft, #f4a8c0) 100%);
  outline:0;cursor:pointer;
}
.g-sb-input::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:22px;height:22px;border-radius:50%;
  background:#fff;border:3px solid var(--coral);
  box-shadow: 0 4px 12px rgba(231,26,101,.30);
  cursor:grab;
}
.g-sb-input::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:#fff;border:3px solid var(--coral);
  box-shadow: 0 4px 12px rgba(231,26,101,.30);
  cursor:grab;
}
.g-sb-marks{
  display:flex;justify-content:space-between;
  font-size:10px;color:var(--ink-3);font-weight:600;
  margin-top: 4px;
}

/* Errors */
.g-err{
  font-size:11px;color:#c62828;font-weight:600;
  margin-top: -2px;
}
.g-field.has-error input{
  border-color: #c62828 !important;
  box-shadow: 0 0 0 3px rgba(198,40,40,.10) !important;
}

/* Header — logo wordmark plus grand (remplace le picto) */
.bh-logo--full img{ height: 36px !important;width: auto }

/* ============================================================
   PERKS RIBBON — sous le header, visible partout
   ============================================================ */
.perks-ribbon{
  position: relative;z-index: 15;
  background: linear-gradient(90deg, rgba(255,217,228,.55), rgba(255,255,255,.85), rgba(255,217,228,.55));
  border-bottom: 1px solid var(--line);
  padding: 10px 24px;
}
.perks-ribbon__inner{
  max-width: 1280px;margin: 0 auto;
  display: grid;grid-template-columns: repeat(4, 1fr);gap: 18px;
}
.perk-item{
  display: flex;align-items: center;gap: 10px;
  min-width: 0;
}
.perk-ic{
  width: 32px;height: 32px;flex-shrink: 0;
  background: #fff;border-radius: 50%;
  display: grid;place-items: center;font-size: 16px;
  box-shadow: 0 2px 8px rgba(231,26,101,.12);
}
.perk-txt{
  display: flex;flex-direction: column;line-height: 1.2;min-width: 0;
}
.perk-txt strong{
  font-size: 12.5px;color: var(--ink-1);font-weight: 800;
  white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
.perk-sub{
  font-size: 11px;color: var(--ink-3);font-weight: 600;
}
@media (max-width: 1000px){
  .perks-ribbon__inner{ grid-template-columns: repeat(2, 1fr);gap: 10px }
}
@media (max-width: 600px){
  .perks-ribbon{ padding: 8px 14px }
  .perk-ic{ width: 26px;height: 26px;font-size: 13px }
  .perk-txt strong{ font-size: 11px }
  .perk-sub{ font-size: 10px }
}

/* ============================================================
   GATE — bloc visuel à la place de la liste perks (déménagée)
   ============================================================ */
.gate__visual{
  position: relative;
  margin-top: 28px;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--cream), #fff 70%);
  border: 1px solid rgba(231,26,101,.18);
  overflow: hidden;
  display: grid;place-items: center;
}
.gate__visual-blob{
  position: absolute;inset: -20%;
  background: radial-gradient(circle at 30% 40%, rgba(231,26,101,.35), transparent 55%),
              radial-gradient(circle at 70% 70%, rgba(120,170,255,.30), transparent 60%);
  filter: blur(30px);
}
.gate__visual-emoji{
  font-size: 84px;position: relative;z-index: 1;
  filter: drop-shadow(0 12px 24px rgba(231,26,101,.25));
  animation: visualFloat 4s ease-in-out infinite;
}
@keyframes visualFloat{
  0%,100%{ transform: translateY(0) rotate(-2deg) }
  50%   { transform: translateY(-8px) rotate(2deg) }
}

/* ============================================================
   FLATPICKR — Thème Badabooth coral
   ============================================================ */
.flatpickr-calendar{
  background: #fff !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 20px 50px rgba(231,26,101,.18), 0 4px 12px rgba(0,0,0,.06) !important;
  border: 1px solid var(--line) !important;
  font-family: 'Open Sans', sans-serif !important;
  padding: 6px !important;
}
.flatpickr-months{ padding: 4px 0 6px !important }
.flatpickr-month{
  color: var(--ink-1) !important;
  height: 36px !important;
}
.flatpickr-current-month{
  font-size: 15px !important;font-weight: 800 !important;
  padding: 4px 0 !important;
}
.flatpickr-monthDropdown-months,
.flatpickr-current-month .numInput{
  color: var(--ink-1) !important;font-weight: 800 !important;
  font-family: 'Nunito', sans-serif !important;
}
.flatpickr-prev-month,
.flatpickr-next-month{
  color: var(--coral) !important;fill: var(--coral) !important;
  padding: 6px 10px !important;
}
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg{ fill: var(--coral-d) !important }
.flatpickr-weekdays{ background: transparent !important;height: 28px !important }
.flatpickr-weekday{
  color: var(--ink-3) !important;font-weight: 700 !important;
  font-size: 11px !important;text-transform: uppercase;
}
.dayContainer{ padding: 0 !important }
.flatpickr-day{
  border-radius: 10px !important;
  font-weight: 600 !important;color: var(--ink-1) !important;
  font-size: 13px !important;
  /* largeur = 1/7 du conteneur → garantit 7 jours par ligne, alignés avec l'en-tête.
     (l'ancien max-width:36px laissait passer 8 jours par ligne → calendrier décalé) */
  width: 14.2857% !important;
  max-width: 14.2857% !important;
  flex-basis: 14.2857% !important;
  height: 38px;line-height: 38px;
  border-color: transparent !important;
  transition: .15s;
}
.flatpickr-day:hover{
  background: rgba(231,26,101,.10) !important;
  color: var(--coral-d) !important;
}
.flatpickr-day.today{
  border-color: var(--coral) !important;
  color: var(--coral-d) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover{
  background: var(--coral) !important;
  border-color: var(--coral) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(231,26,101,.30);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay{
  color: var(--ink-3) !important;opacity: .35 !important;
}
.flatpickr-day.flatpickr-disabled:hover{ background: transparent !important }
.flatpickr-input.form-control.input{ display:none !important }
.g-field input.flatpickr-input + .form-control{
  /* L'altInput hérite du style g-field input */
  background:var(--surface);
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  padding:12px 14px;font-size:14px;color:var(--ink-1);
  font-family:inherit;transition:.15s;
  width: 100%;
  cursor: pointer;
}
.g-field input.flatpickr-input + .form-control:focus{
  outline:0;border-color:var(--coral);
  box-shadow:0 0 0 3px rgba(231,26,101,.12);
}

/* ============================================================
   GATE — colonnes alignées en haut, visuel large
   ============================================================ */

/* Ribbon légèrement plus fin */
.perks-ribbon{ padding: 8px 24px !important }

/* Gate : commence en haut, padding-top réduit pour faire remonter le form */
.gate{
  padding: 18px 20px 22px !important;
  align-items: flex-start !important;
}
.gate__inner{
  padding: 26px 28px !important;
  gap: 28px !important;
  align-items: stretch !important;  /* les 2 colonnes prennent la même hauteur */
}
@media (min-width: 900px){
  .gate__inner{ padding: 28px 40px !important;gap: 36px !important }
}

/* Colonne gauche : flex-column, visual flex:1 pour remplir l'espace */
.gate__intro{
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  height: 100%;
}

/* Titre/desc : marges réduites pour grouper en haut */
.gate__kicker{ margin-bottom: 10px !important }
.gate__title{
  font-size: clamp(24px, 3vw, 32px) !important;
  margin-bottom: 10px !important;
}
.gate__desc{
  font-size: 14px !important;
  margin-bottom: 16px !important;
}

/* Visuel grand : prend tout l'espace restant de la colonne gauche */
.gate__visual{
  margin-top: 0 !important;
  flex: 1 1 auto !important;
  aspect-ratio: auto !important;
  min-height: 280px;
  border-radius: 20px !important;
}
.gate__visual-emoji{
  font-size: clamp(72px, 12vh, 130px) !important;
}

/* Form : gap réduit */
.gate__form{ gap: 10px !important }
.g-row{ gap: 8px !important }
.g-field{ gap: 5px !important }
.g-field input{ padding: 10px 13px !important;font-size: 14px !important }
.g-field input.flatpickr-input + .form-control{ padding: 10px 13px !important;font-size: 14px !important }

/* Sections séparateurs */
.g-section{ margin: 4px 0 0 !important }
.g-section--needs{ margin-top: 10px !important }

/* Sliders légèrement compacts */
.g-slider-block{ padding: 10px 16px !important }
.g-sb-head{ margin-bottom: 6px !important }

/* Bandeau Dijon */
.g-pickup{ padding: 8px 12px !important;font-size: 12.5px !important }

/* Submit */
.g-submit{ margin-top: 4px !important }
.g-fineprint{ margin: 4px 0 0 !important }

/* ============================================================
   PREFS — chips single-select SOUS les sliders
   (Ajuster reste en haut, aligné avec "Nos offres pour toi")
   ============================================================ */
.prefs-intro{
  display: flex;align-items: baseline;gap: 8px;flex-wrap: wrap;
  margin: 14px 0 6px;
  padding-top: 14px;
  border-top: 1px dashed rgba(231,26,101,.18);
}
.prefs-intro .pi-lbl{
  font-size: 12px;font-weight: 800;letter-spacing: .04em;text-transform: uppercase;
  color: var(--coral);
}
.prefs-intro .pi-hint{
  font-size: 11px;font-weight: 500;color: var(--ink-3);
  font-style: italic;
}
.step--sliders .pref-chips{
  display: flex;flex-wrap: wrap;gap: 6px;
  margin: 0 0 6px;
}
.pref-chip{
  display: inline-flex;align-items: center;gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,.65);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  font-weight: 700;font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all .18s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  white-space: nowrap;
}
.pref-chip:hover{
  border-color: var(--coral-soft, #f4a8c0);
  color: var(--ink-1);
  transform: translateY(-1px);
}
.pref-chip .pc-ic{ font-size: 13px;line-height: 1 }
.pref-chip .pc-lbl{ line-height: 1.2 }
.pref-chip.is-active{
  background: linear-gradient(135deg, var(--coral), #ff4d8d);
  border-color: var(--coral);
  color: #fff;
  box-shadow: 0 6px 18px rgba(231,26,101,.28);
}

/* ============================================================
   MOBILE — Sliders en sticky header (visible tant que pas d'offre choisie)
   ============================================================ */
@media (max-width: 899px){
  .builder-shell{
    display: flex !important;
    flex-direction: column !important;
  }
  .config{ order: 1 !important;padding: 0 !important;background: transparent !important;border: 0 !important }
  .stage { order: 2 !important }

  body:not(.offer-selected) .step--sliders{
    /* FIXED — la sticky était dans un parent trop court (.config) qui scrollait
       avec elle. En fixed elle reste collée au top du viewport quoi qu'il arrive. */
    position: fixed !important;
    top: 0 !important;left: 0 !important;right: 0 !important;
    z-index: 50 !important;
    background: rgba(255,255,255,.96) !important;
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    border-bottom: 1px solid var(--line) !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    box-shadow: 0 4px 14px rgba(231,26,101,.12) !important;
    /* 2 colonnes grid pour les 2 sliders côte à côte */
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 10px !important;
    row-gap: 6px !important;
  }
  /* Offset du contenu pour ne pas être caché derrière la barre fixée */
  body:not(.offer-selected) .builder-shell{
    padding-top: var(--mobile-sticky-h, 140px) !important;
  }
  /* On masque la fausse "header sticky" (header logo + ribbon) sur mobile :
     trop d'éléments en haut tuent l'UX. La barre sliders prend leur place. */
  body:not(.offer-selected) .builder-header,
  body:not(.offer-selected) .perks-ribbon{ display: none !important }
  /* Titre "Ajuster" caché sur mobile sticky — gain de place */
  body:not(.offer-selected) .step--sliders .step__title,
  body:not(.offer-selected) .step--sliders .step__sub{ display: none !important }
  /* Slider compact dans chaque colonne */
  body:not(.offer-selected) .step--sliders .slider-block{
    padding: 6px 10px !important;margin: 0 !important;
    background: rgba(255,217,228,.30) !important;
    border-radius: 10px !important;
  }
  body:not(.offer-selected) .step--sliders .sb-head{ margin-bottom: 3px !important }
  body:not(.offer-selected) .step--sliders .sb-lbl{ font-size: 10px !important;font-weight: 700 }
  body:not(.offer-selected) .step--sliders .sb-val{ font-size: 14px !important }
  body:not(.offer-selected) .step--sliders .sb-input{ height: 4px !important }
  body:not(.offer-selected) .step--sliders .sb-marks{ display: none !important }
  /* Prefs sur la ligne du dessous, scrollable horizontal */
  body:not(.offer-selected) .step--sliders .prefs-intro{
    grid-column: 1 / -1 !important;
    margin: 4px 0 2px !important;padding-top: 4px !important;
    border-top: 1px dashed rgba(231,26,101,.14) !important;
  }
  body:not(.offer-selected) .step--sliders .pi-hint{ display: none !important }
  body:not(.offer-selected) .step--sliders .pi-lbl{ font-size: 10px !important }
  body:not(.offer-selected) .step--sliders .pref-chips{
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body:not(.offer-selected) .step--sliders .pref-chips::-webkit-scrollbar{ display: none }
  body:not(.offer-selected) .step--sliders .pref-chip{
    font-size: 11px !important;padding: 4px 9px !important;flex-shrink: 0 !important;
  }

  /* Quand offre choisie : on retire le sticky, l'utilisateur peut "Changer d'offre" */
  body.offer-selected .step--sliders{ display: none !important }
  /* Récap ctxCard caché tant qu'on n'a pas d'offre (gain de place) */
  body:not(.offer-selected) .step--context{ display: none !important }

  /* Empêche le booth de prendre trop de hauteur sur mobile */
  .stage{ min-height: 0 !important }
  .stage__booth{ min-height: 0 !important }
}

/* ============================================================
   Mobile sticky bottom bar — bouton Réserver coral quand actif
   ============================================================ */
.bar-sticky__btn:not(:disabled){
  background: linear-gradient(135deg, var(--coral), #ff4d8d) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(231,26,101,.32);
  font-weight: 800;
  font-size: 15px;
  padding: 13px 24px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.bar-sticky__btn:not(:disabled):hover,
.bar-sticky__btn:not(:disabled):active{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(231,26,101,.38);
}
.bar-sticky__btn:disabled{
  background: var(--bg-2) !important;
  color: var(--ink-3) !important;
  box-shadow: none;
}

/* ============================================================
   Bar sticky améliorée — tappable info + cart sheet
   ============================================================ */
.bar-sticky__info{
  background: transparent;border: 0;cursor: pointer;
  display: flex;align-items: center;gap: 10px;
  padding: 6px 0;
  flex: 1;min-width: 0;text-align: left;
}
.bar-sticky__info:disabled{ cursor: not-allowed }
.bar-sticky__chevron{
  width: 28px;height: 28px;flex-shrink: 0;
  background: rgba(231,26,101,.10);color: var(--coral);
  border-radius: 50%;
  display: grid;place-items: center;
  font-size: 11px;font-weight: 800;
  transition: transform .25s ease;
}
.bar-sticky.is-clickable .bar-sticky__chevron{
  background: var(--coral);color: #fff;
}
body.cart-open .bar-sticky__chevron{ transform: rotate(180deg) }
.bar-sticky__text{ display: flex;flex-direction: column;flex: 1;min-width: 0 }

/* Cart sheet — bottom drawer */
.cart-sheet{
  position: fixed;inset: 0;z-index: 1000;
  display: flex;align-items: flex-end;justify-content: center;
  pointer-events: none;
}
.cart-sheet[hidden]{ display: none }
.cart-sheet__backdrop{
  position: absolute;inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;transition: opacity .25s ease;
  pointer-events: auto;
}
body.cart-open .cart-sheet__backdrop{ opacity: 1 }
.cart-sheet__panel{
  position: relative;
  width: 100%;max-width: 560px;
  background: #fff;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -16px 50px rgba(0,0,0,.20);
  padding: 16px 18px calc(80px + env(safe-area-inset-bottom, 0px)); /* room for sticky bar below */
  pointer-events: auto;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  max-height: 80vh;overflow-y: auto;
}
body.cart-open .cart-sheet__panel{ transform: translateY(0) }
.cart-sheet__close{
  position: absolute;top: 8px;left: 50%;transform: translateX(-50%);
  width: 36px;height: 22px;border-radius: 12px;
  background: var(--bg-2);color: var(--ink-3);
  font-size: 11px;font-weight: 800;
  display: grid;place-items: center;
  cursor: pointer;border: 0;
}
.cart-sheet__close:hover{ background: var(--coral);color: #fff }
.cart-sheet__title{
  font-family: 'Nunito',sans-serif;font-size: 18px;font-weight: 900;color: var(--ink-1);
  margin: 12px 0 14px;text-align: center;
}
.cart-sheet__body{}

.cs-offer{
  background: linear-gradient(135deg, rgba(255,217,228,.55), rgba(255,255,255,.7));
  border: 1px solid rgba(231,26,101,.18);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.cs-offer__name{
  font-family: 'Nunito',sans-serif;font-weight: 800;font-size: 14px;color: var(--coral);
  margin-bottom: 3px;
}
.cs-offer__cap{ font-weight: 700;color: var(--ink-1);font-size: 14px }
.cs-offer__cap strong{ font-family: 'Nunito',sans-serif;font-size: 18px;color: var(--coral) }
.cs-strip{ font-weight: 500;color: var(--coral-d);font-size: 12px }
.cs-offer__meta{ font-size: 12px;color: var(--ink-3);margin-top: 4px }
.cs-offer__price{
  font-family: 'Nunito',sans-serif;font-weight: 900;font-size: 24px;color: var(--coral);
  text-align: right;margin-top: 6px;line-height: 1;
}

.cs-list{
  list-style: none;padding: 0;margin: 0 0 14px;
  display: flex;flex-direction: column;gap: 8px;
}
.cs-row{
  display: flex;align-items: center;gap: 8px;
  font-size: 13px;color: var(--ink-2);
  padding: 8px 12px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 10px;
}
.cs-row .cs-ic{ font-size: 14px;width: 22px;text-align: center }
.cs-row .cs-nm{ flex: 1;min-width: 0 }
.cs-row .cs-pr{ font-weight: 800;color: var(--coral);font-size: 13px }
.cs-row.is-incl{ background: linear-gradient(180deg, rgba(255,217,228,.45), rgba(255,255,255,.65)) }
.cs-row.is-incl .cs-pr{
  background: var(--coral);color: #fff;
  font-size: 10px;letter-spacing: .04em;text-transform: uppercase;
  padding: 3px 8px;border-radius: var(--radius-pill);
}

.cs-total{
  display: flex;justify-content: space-between;align-items: baseline;
  padding-top: 12px;border-top: 1px solid rgba(231,26,101,.18);
  margin-bottom: 14px;
}
.cs-total span{ font-size: 14px;color: var(--ink-2);font-weight: 700 }
.cs-total strong{
  font-family: 'Nunito',sans-serif;font-weight: 900;font-size: 26px;color: var(--coral);
  letter-spacing: -.02em;
}

.cart-sheet__actions{
  display: flex;flex-direction: column;gap: 8px;
}
.cart-sheet__change{
  background: transparent;color: var(--ink-3);
  border: 1.5px solid var(--line);
  padding: 11px 18px;border-radius: 12px;
  font-weight: 700;font-size: 13px;
  cursor: pointer;transition: .15s;
}
.cart-sheet__change:hover{ border-color: var(--coral);color: var(--coral) }
.cart-sheet__reserve{
  width: 100%;padding: 14px 20px;font-size: 16px;font-weight: 800;
  background: linear-gradient(135deg, var(--coral), #ff4d8d);color: #fff;
  border: 0;border-radius: 14px;
  box-shadow: 0 8px 22px rgba(231,26,101,.32);
  cursor: pointer;
}

/* Sticky bottom bar : visible UNIQUEMENT après sélection d'offre (mobile) */
@media (max-width: 899px){
  .bar-sticky{ display: none !important }
  body.offer-selected .bar-sticky{ display: flex !important }
}

/* ============================================================
   Recharge : titre + stepper + prix sur une seule ligne
   ============================================================ */
.option-name--recharge{
  display: flex !important;align-items: center !important;
  gap: 10px !important;flex-wrap: wrap !important;
}
.option-name--recharge .opt-title{
  flex: 1 1 auto;min-width: 0;
  font-size: 14px;
}
.option-name--recharge .rc-stepper{
  flex-shrink: 0;
  margin: 0 !important;
}
.option-name--recharge .opt-price{
  flex-shrink: 0;
  font-size: 13px;font-weight: 800;color: var(--coral);
}
/* Le row stepper-row dédié n'est plus utilisé (stepper inline) — on le neutralise */
.rc-stepper-row{ display: none !important }

/* ============================================================
   Cart sheet — animation d'entrée plus fluide
   ============================================================ */
.cart-sheet__panel{
  /* Légère élévation initiale + ombre douce qui s'intensifie à l'ouverture */
  will-change: transform;
}
body:not(.cart-open) .cart-sheet__panel{
  transform: translateY(100%);
}
body.cart-open .cart-sheet__panel{
  transform: translateY(0);
  animation: csInPanel .42s cubic-bezier(.2,.85,.3,1) both;
}
@keyframes csInPanel{
  0%   { transform: translateY(100%) scale(.96);opacity: .85 }
  60%  { transform: translateY(-6px) scale(1.005);opacity: 1 }
  100% { transform: translateY(0) scale(1);opacity: 1 }
}
body.cart-open .cart-sheet__backdrop{
  animation: csInBg .25s ease both;
}
@keyframes csInBg{ from{ opacity: 0 } to{ opacity: 1 } }

/* Chevron pulse subtile quand offre choisie pour inciter à tap */
@keyframes chevronPulse{
  0%,100%{ transform: translateY(0) }
  50%   { transform: translateY(-3px) }
}
.bar-sticky.is-clickable .bar-sticky__chevron{
  animation: chevronPulse 2s ease-in-out infinite;
}
body.cart-open .bar-sticky__chevron{ animation: none }

/* ============================================================
   Mobile + offer-selected — On masque le doublon (booth + offer + chips + total)
   visible en haut. Ces infos sont maintenant dans la cart-sheet du bas.
   La grille options reste visible pour ajouter/retirer des options.
   ============================================================ */
@media (max-width: 899px){
  body.offer-selected .stage{ display: none !important }
  body.offer-selected .offers-floating{ display: none !important }
  body.offer-selected #cfgBottom{ display: none !important }
  /* Le titre "Options" reste visible en haut de la config (utile pour l'utilisateur) */
}

/* ============================================================
   Cart sheet — version VISUELLE (booth image + tags + chips + total)
   ============================================================ */
.cs-hero{
  display: flex;align-items: center;gap: 12px;
  background: linear-gradient(135deg, #fff5f0 0%, #ffe5db 100%);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid rgba(231,26,101,.16);
}
.cs-hero__img{
  flex-shrink: 0;width: 80px;height: 100px;
  display: grid;place-items: center;
  background: #fff;border-radius: 12px;
  padding: 6px;
  box-shadow: 0 4px 14px rgba(231,26,101,.12);
}
.cs-hero__img img{
  max-width: 100%;max-height: 100%;
  object-fit: contain;
}
.cs-hero__info{
  flex: 1;min-width: 0;
  display: flex;flex-direction: column;gap: 3px;
}
.cs-hero .cs-offer__name{
  font-family: 'Nunito',sans-serif;font-weight: 800;font-size: 13px;color: var(--coral);
  margin: 0;
}
.cs-hero .cs-offer__cap strong{
  font-family: 'Nunito',sans-serif;font-size: 22px;font-weight: 900;color: var(--ink-1);
  letter-spacing: -.02em;
}
.cs-hero .cs-offer__price{
  font-family: 'Nunito',sans-serif;font-weight: 900;font-size: 22px;color: var(--coral);
  margin-top: 2px;line-height: 1;
}

/* ============================================================
   Options cards — séparateur entre header et description
   ============================================================ */
.option-card{
  background: rgba(255,255,255,.78);
}
.option-card:not(.is-selected) .option-head{
  border-bottom: 1px solid rgba(231,26,101,.10);
}
.option-card.is-selected .option-head{
  border-bottom: 1px solid rgba(231,26,101,.30);
}
/* Léger fond alterné pour différencier le titre de la description */
.option-card .option-details{
  background: linear-gradient(180deg, rgba(255,245,240,.55), rgba(255,255,255,.30));
  padding: 14px 16px !important;
  border-radius: 0 0 14px 14px;
}


/* ============================================================
   Sticky bar — version visuelle (gradient rose/blanc + thumb + coral)
   ============================================================ */
.bar-sticky{
  background: linear-gradient(135deg, rgba(255,217,228,.78) 0%, rgba(255,255,255,.92) 60%, rgba(255,237,232,.85) 100%) !important;
  border-top: 2px solid var(--coral) !important;
  box-shadow: 0 -8px 28px rgba(231,26,101,.20) !important;
  padding: 10px 14px !important;
  gap: 10px !important;
}
.bar-sticky__info{
  gap: 8px !important;
}
.bar-sticky__thumb{
  display: none;
  width: 44px;height: 54px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 4px 12px rgba(231,26,101,.15);
  align-items: center;justify-content: center;
}
.bar-sticky__thumb img{
  max-width: 100%;max-height: 100%;
  object-fit: contain;
}
body.offer-selected .bar-sticky__thumb{ display: flex }
.bar-sticky__lbl{
  font-size: 11px !important;font-weight: 800 !important;
  color: var(--coral) !important;
  text-transform: uppercase;letter-spacing: .04em;
  white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
  max-width: 38vw;
}
.bar-sticky__total{
  font-family: 'Nunito',sans-serif !important;
  font-weight: 900 !important;font-size: 24px !important;
  color: var(--ink-1) !important;line-height: 1 !important;
}

/* ============================================================
   Sticky bar — meilleure hiérarchie : booth + nom prominent + prix
   ============================================================ */
body.offer-selected .bar-sticky{
  padding: 12px 14px !important;
}
body.offer-selected .bar-sticky__thumb{
  width: 52px !important;height: 64px !important;
  padding: 5px !important;
  border-radius: 12px !important;
}
body.offer-selected .bar-sticky__lbl{
  font-size: 14px !important;font-weight: 800 !important;
  color: var(--ink-1) !important;
  text-transform: none !important;letter-spacing: -.01em !important;
  max-width: 44vw !important;
  white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
  margin-bottom: 2px;
}
body.offer-selected .bar-sticky__total{
  font-size: 22px !important;
  color: var(--coral) !important;
}
/* Chevron plus discret en haut à droite */
body.offer-selected .bar-sticky__chevron{
  width: 22px !important;height: 22px !important;
  font-size: 9px !important;
  position: absolute;top: 6px;right: 10px;
  background: rgba(231,26,101,.10) !important;color: var(--coral) !important;
  animation: none !important;
}
body.cart-open .bar-sticky__chevron{ transform: rotate(180deg) }
.bar-sticky{ position: fixed !important;bottom: 0;left: 0;right: 0 }

/* ============================================================
   Mobile header — numéro de téléphone toujours visible et cliquable
   ============================================================ */
@media (max-width: 899px){
  /* On gagne de la place en cachant le titre "Mon photobooth" sur mobile */
  .builder-header .bh-page-title{ display: none !important }
  /* Mais on montre clairement le numéro de tel cliquable */
  .builder-header .bh-phone{
    display: flex !important;
    background: linear-gradient(135deg, rgba(255,217,228,.55), rgba(255,255,255,.85));
    border: 1.5px solid var(--coral);
    border-radius: var(--radius-pill);
    padding: 7px 14px !important;
    color: var(--coral) !important;
    font-weight: 800 !important;
    font-size: 14px !important;
  }
  .builder-header .bh-phone-num{
    display: inline !important;
    color: var(--coral) !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    letter-spacing: -.01em;
  }
  .builder-header .bh-phone-ic{ font-size: 14px !important;opacity: 1 !important }
  /* Le bouton ? d'aide WhatsApp reste compact */
  .builder-header .bh-help{
    width: 32px !important;height: 32px !important;font-size: 14px;
    background: var(--coral) !important;color: #fff !important;
  }
  /* Padding header plus serré sur mobile */
  .builder-header{ padding: 10px 14px !important;gap: 10px !important }
  .bh-logo--full img{ height: 26px !important }
}

/* ============================================================
   Sticky bar — booth à gauche, texte aligné en haut
   ============================================================ */
body.offer-selected .bar-sticky{
  align-items: center !important;
  padding: 10px 14px 10px 12px !important;
}
body.offer-selected .bar-sticky__info{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 0 !important;
  text-align: left !important;
  flex: 1 1 auto !important;min-width: 0 !important;
}
/* Chevron : on le sort en haut du texte, plus de positionnement absolu */
body.offer-selected .bar-sticky__chevron{
  position: static !important;
  width: 18px !important;height: 18px !important;
  font-size: 8px !important;
  background: transparent !important;
  color: var(--coral) !important;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
}
body.offer-selected .bar-sticky__thumb{
  flex-shrink: 0;
  align-self: center !important;
}
body.offer-selected .bar-sticky__text{
  display: flex !important;flex-direction: column !important;
  justify-content: center !important;align-items: flex-start !important;
  gap: 2px !important;
  flex: 1 !important;min-width: 0 !important;
}
body.offer-selected .bar-sticky__lbl{
  text-align: left !important;
  white-space: normal !important;
  line-height: 1.25 !important;
  max-width: 100% !important;
}

/* ============================================================
   Mini footer — petite bande sobre sur mobile, masque le standard
   ============================================================ */
.mini-footer{ display: none }
@media (max-width: 899px){
  /* Standard footer caché sur mobile (trop dense, casse la conversion) */
  body.builder-body > footer,
  body.reserver-body > footer{ display: none !important }
  .mini-footer{
    display: block !important;
    background: var(--bg-2, #f6f6f8);
    border-top: 1px solid var(--line);
    padding: 14px 16px;
    text-align: center;
    /* Padding-bottom pour ne pas être caché par la sticky bar (~80px) */
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0));
  }
  .mini-footer__link{
    display: inline-flex;align-items: center;gap: 10px;
    color: var(--ink-3);text-decoration: none;
    font-size: 12px;font-weight: 600;
  }
  .mini-footer__link:hover{ color: var(--coral) }
  .mini-footer__link img{
    height: 22px;width: auto;opacity: .75;
  }
}

/* Mini-footer : juste le logo, sans lien */
.mini-footer__logo{
  height: 22px;width: auto;opacity: .55;
  display: inline-block;
}

/* ============================================================
   Mobile header & ribbon — agencement plus discret, moins coloré
   ============================================================ */
@media (max-width: 899px){
  /* Header sobre : juste logo + petit picto téléphone, pas de gros pill rose */
  .builder-header{
    padding: 10px 14px !important;
    background: #fff !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .builder-header .bh-phone{
    background: transparent !important;
    border: 0 !important;
    padding: 4px 8px !important;
    color: var(--ink-2) !important;
    font-weight: 700 !important;
  }
  .builder-header .bh-phone-ic{
    background: var(--coral);color: #fff !important;
    width: 30px;height: 30px;
    border-radius: 50%;
    display: grid !important;place-items: center;
    font-size: 13px !important;opacity: 1 !important;
  }
  .builder-header .bh-phone-num{
    color: var(--ink-1) !important;
    font-size: 12px !important;font-weight: 700 !important;
    margin-left: 6px;
  }
  .builder-header .bh-help{
    background: transparent !important;
    color: var(--ink-3) !important;
    border: 1px solid var(--line) !important;
    width: 30px !important;height: 30px !important;font-size: 13px !important;
  }
  .builder-header .bh-help:hover{
    background: var(--ink-1) !important;color: #fff !important;
  }

  /* Perks ribbon : passe en ligne horizontale unique, scrollable, sobre */
  .perks-ribbon{
    padding: 8px 0 !important;
    background: #fff !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: none !important;
  }
  .perks-ribbon__inner{
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    gap: 18px !important;
    padding: 0 14px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .perks-ribbon__inner::-webkit-scrollbar{ display: none }
  .perk-item{
    flex-shrink: 0 !important;
    gap: 6px !important;
  }
  .perk-ic{
    width: 22px !important;height: 22px !important;
    background: var(--cream) !important;
    box-shadow: none !important;
    font-size: 11px !important;
  }
  .perk-txt strong{
    font-size: 11px !important;
    color: var(--ink-1) !important;
  }
  .perk-sub{
    font-size: 10px !important;
    color: var(--ink-3) !important;
  }
}

/* ============================================================
   Mobile — Header ultra-minimal (juste tel + chat), pas de logo,
   pas de ribbon de réassurance. La conversion d'abord.
   ============================================================ */
@media (max-width: 899px){
  /* Logo & titre cachés sur mobile post-sélection */
  body.offer-selected .builder-header .bh-logo,
  body.offer-selected .builder-header .bh-page-title{ display: none !important }
  /* Ribbon de réassurance caché entièrement sur mobile */
  body.offer-selected .perks-ribbon{ display: none !important }

  /* Header devient une mini barre flottante : juste les actions */
  body.offer-selected .builder-header{
    padding: 8px 14px !important;
    background: rgba(255,255,255,.85) !important;
    -webkit-backdrop-filter: blur(14px);backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line) !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }
  body.offer-selected .builder-header .bh-right{
    margin-left: auto;
    gap: 8px !important;
  }
  /* Picto tel et chat : 2 ronds identiques, sans pill ni numéro */
  body.offer-selected .builder-header .bh-phone{
    background: transparent !important;
    border: 0 !important;padding: 0 !important;
    color: var(--ink-1) !important;
  }
  body.offer-selected .builder-header .bh-phone-num{ display: none !important }
  body.offer-selected .builder-header .bh-phone-ic,
  body.offer-selected .builder-header .bh-help{
    width: 36px !important;height: 36px !important;
    border-radius: 50% !important;
    background: var(--coral) !important;color: #fff !important;
    border: 0 !important;
    display: grid !important;place-items: center !important;
    font-size: 15px !important;
    box-shadow: 0 4px 12px rgba(231,26,101,.25) !important;
  }
  body.offer-selected .builder-header .bh-help{
    background: #fff !important;color: var(--coral) !important;
    border: 1.5px solid var(--coral) !important;
  }
}

/* ============================================================
   Options — détachement visuel renforcé (Nunito, accent coral)
   ============================================================ */
body.offer-selected .option-card{
  background: #fff !important;
  border: 1px solid rgba(231,26,101,.10) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(231,26,101,.06) !important;
  overflow: hidden;
}
body.offer-selected .option-card .option-head{
  padding: 14px 16px !important;
}
body.offer-selected .option-card .option-name{
  display: flex;align-items: center;justify-content: space-between;gap: 10px;
}
body.offer-selected .option-card .opt-title,
body.offer-selected .option-card .option-name > span:first-child{
  font-family: 'Nunito', sans-serif !important;
  font-size: 15.5px !important;font-weight: 800 !important;
  color: var(--ink-1) !important;
  letter-spacing: -.01em !important;
}
body.offer-selected .option-card .opt-price{
  font-family: 'Nunito', sans-serif !important;
  font-weight: 900 !important;font-size: 14px !important;
  color: var(--coral) !important;
}
body.offer-selected .option-card .option-icon{
  width: 36px;height: 36px;
  background: linear-gradient(135deg, rgba(255,217,228,.55), #fff);
  border-radius: 10px;
  display: grid;place-items: center;
  font-size: 17px;
  box-shadow: 0 2px 6px rgba(231,26,101,.10);
}
body.offer-selected .option-card .option-details{
  background: #fafafb !important;
  border-top: 1px solid rgba(231,26,101,.08) !important;
  padding: 12px 16px 14px !important;
}
body.offer-selected .option-card .option-details p{
  color: var(--ink-3) !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
}
body.offer-selected .option-card.is-selected{
  border-color: var(--coral) !important;
  box-shadow: 0 8px 22px rgba(231,26,101,.18) !important;
}
body.offer-selected .option-card.is-selected .option-icon{
  background: linear-gradient(135deg, var(--coral), #ff4d8d);
  color: #fff;
}

/* Mini-footer : pas de padding-bottom inutile quand pas de sticky bar (avant sélection d'offre) */
@media (max-width: 899px){
  body:not(.offer-selected) .mini-footer{ padding-bottom: 14px !important }
}

/* ============================================================
   Gate visual — vraie galerie photos (collage polaroid)
   ============================================================ */
.gate__visual-emoji{ display: none !important }
.gate__gallery{
  position: relative;width: 100%;height: 100%;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  padding: 8px;
}
.gg-img{
  width: 100%;height: 100%;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(231,26,101,.18);
  border: 2px solid #fff;
  transition: transform .25s ease;
}
.gg-img--1{ grid-row: 1 / span 2;transform: rotate(-1deg) }
.gg-img--2{ transform: rotate(1.5deg) }
.gg-img--3{ transform: rotate(-1.2deg) }
.gg-img--4{ display: none }
.gg-img:hover{ transform: rotate(0) scale(1.02);z-index: 2 }

@media (max-width: 600px){
  .gate__gallery{ gap: 6px;padding: 6px }
  .gg-img{ border-width: 1.5px }
}

/* Gate gallery — version courte (3 photos en ligne), pas trop haute */
.gate__visual{
  height: clamp(140px, 22vh, 220px) !important;
  aspect-ratio: auto !important;
  margin-top: 14px !important;
}
.gate__gallery{
  grid-template-columns: 1fr 1fr 1fr !important;
  grid-template-rows: 1fr !important;
}
.gg-img--1{ grid-row: auto !important;transform: rotate(-1.5deg) }
.gg-img--2{ transform: rotate(1deg);transform-origin: center }
.gg-img--3{ display: block !important;transform: rotate(-1deg) }
@media (max-width: 600px){
  .gate__visual{ height: clamp(120px, 18vh, 180px) !important }
}

/* Gate gallery → carrousel : une seule photo à la fois (fade auto) */
.gate__gallery{
  position: relative !important;
  display: block !important;
  grid-template-columns: none !important;
  padding: 0 !important;
}
.gate__gallery .gg-img{
  position: absolute;inset: 6px;
  width: calc(100% - 12px);height: calc(100% - 12px);
  object-fit: cover;
  border-radius: 14px;
  border-width: 3px !important;
  transform: none !important;
  opacity: 0;
  animation: gateCarousel 15s infinite;
}
.gate__gallery .gg-img--1{ animation-delay: 0s }
.gate__gallery .gg-img--2{ animation-delay: 5s }
.gate__gallery .gg-img--3{ animation-delay: 10s }
@keyframes gateCarousel{
  0%, 30%   { opacity: 1 }
  35%, 95%  { opacity: 0 }
  100%      { opacity: 0 }
}
.gate__gallery .gg-img:hover{ transform: none !important;scale: 1 }