/* LècheBox — style feutre de lechebox.fr (papier, encre, bords « sketch », ombres décalées). */
:root {
  --ink: #1c1c1c;
  --ink-soft: rgba(28, 28, 28, .68);
  --paper: #fcfbfa;
  --paper-glass: rgba(252, 251, 250, .92);
  --bob: #6b85ff;
  --bob-deep: #4d66e0;
  --bob-tint: #eef1ff;
  --cheek: #ef9bc2;
  --mouth: #ff7090;
  --lulu: #ff8fab;
  --lulu-tint: #ffeef3;
  --gold: #ffd45c;
  --shade: #e4e4ec;
  --warn: #9a3412;
  --warn-bg: #fff4e8;
  --f-hand: "Kalam", "Comic Sans MS", "Chalkboard SE", cursive;
  --sketch: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --sketch2: 18px 225px 18px 255px / 255px 18px 225px 18px;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink); font-family: var(--f-hand); font-size: 18px; line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .25 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1, h2, h3 { line-height: 1.05; margin: 0; }
em { font-style: normal; color: var(--mouth); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px dashed var(--bob-deep); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--gold); border: 3px solid var(--ink); padding: 6px 12px; border-radius: 12px; color: var(--ink); }
.skip-link:focus { top: 10px; }
.noscript { padding: 24px; text-align: center; }

/* ───── coque de l'application ───── */
.app { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto auto 1fr auto; }

.hud {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px;
  padding: 10px clamp(12px, 3vw, 28px); background: var(--paper-glass); backdrop-filter: blur(6px);
  border-bottom: 3px solid var(--ink);
}
.brand { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; flex: none; }
.logo { font-weight: 700; font-size: 1.55rem; transform: rotate(-2deg); display: inline-block; }
.logo::after { content: "♥"; color: var(--mouth); font-size: .8em; margin-left: 2px; }
.tag { font-size: .78rem; font-weight: 700; border: 2px solid var(--ink); border-radius: 99px; padding: 0 .5em; background: var(--gold); }

.progress { flex: 1; min-width: 0; }
.progress ol { display: flex; justify-content: center; gap: clamp(4px, 1.5vw, 18px); list-style: none; margin: 0; padding: 0; }
.progress button {
  display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px; cursor: pointer;
  min-height: 44px; border-radius: 12px;
}
.progress button:disabled { cursor: default; opacity: .45; }
.progress .node {
  width: 34px; height: 34px; display: grid; place-items: center; flex: none; font-weight: 700;
  border: 3px solid var(--ink); border-radius: 50%; background: var(--paper); transition: transform .35s var(--spring), background .3s;
}
.progress .is-done .node { background: var(--cheek); }
.progress .is-current .node { background: var(--gold); transform: scale(1.12) rotate(-6deg); }
.progress .lbl { font-weight: 700; white-space: nowrap; }
.progress li:not(.is-current) .lbl { color: var(--ink-soft); }

.motion-toggle {
  display: flex; align-items: center; gap: 6px; flex: none; min-height: 44px; cursor: pointer;
  border: 3px solid var(--ink); border-radius: var(--sketch2); background: var(--paper); padding: 4px 12px; font-weight: 700;
}
.motion-toggle[aria-pressed="false"] { background: var(--shade); text-decoration: line-through; }

.bar { height: 7px; background: var(--shade); border-bottom: 2px solid var(--ink); }
.bar span { display: block; height: 100%; width: 25%; background: linear-gradient(90deg, var(--bob), var(--lulu), var(--gold)); transition: width .6s var(--out); }

.screen { width: 100%; max-width: 1180px; margin: 0 auto; padding: clamp(16px, 3vw, 32px) clamp(14px, 3vw, 32px) 32px; }
.screen.enter > * { animation: stepIn .55s var(--out) both; }
@keyframes stepIn { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 36px)); } }

.pager {
  position: sticky; bottom: 0; z-index: 20; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 10px clamp(12px, 3vw, 28px) calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--paper-glass); backdrop-filter: blur(6px); border-top: 3px solid var(--ink);
}
.hint { margin: 0; text-align: center; color: var(--ink-soft); font-size: .98rem; }
.hint.nudge { color: var(--ink); font-weight: 700; animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ───── boutons ───── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35em; min-height: 46px;
  padding: .5em 1.1em; font-weight: 700; font-size: 1.08rem; color: var(--ink); text-decoration: none; cursor: pointer;
  border: 3px solid var(--ink); border-radius: var(--sketch); background: var(--paper); box-shadow: 4px 4px 0 var(--ink);
  transition: transform .18s var(--out), box-shadow .18s var(--out), background .2s;
}
.btn.primary { background: var(--gold); }
.btn.small { min-height: 44px; font-size: .95rem; padding: .3em .85em; box-shadow: 3px 3px 0 var(--ink); }
@media (hover: hover) {
  .btn:not(:disabled):not([aria-disabled="true"]):hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
}
.btn:not(:disabled):not([aria-disabled="true"]):active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn[hidden] { display: none; }

/* ───── en-têtes d'étape ───── */
.kicker { margin: 0 0 4px; font-size: .9rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--bob-deep); }
.step h1 { font-size: clamp(2rem, 5vw, 3.3rem); }
.step h1 em { display: inline-block; transform: rotate(-1.5deg); }
.lede { margin: 8px 0 0; font-size: 1.15rem; }
.fine { font-size: .9rem; color: var(--ink-soft); margin: 14px 0 0; }
.step-head { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end; margin-bottom: 22px; }

.guide { display: flex; align-items: flex-end; gap: 6px; max-width: 380px; }
.guide-ch { width: 86px; flex: none; }
.guide-ch .ch { width: 100%; height: auto; display: block; overflow: visible; animation: idle 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
.bubble {
  position: relative; margin: 0 0 34px; padding: 8px 12px 10px; font-size: 1rem; line-height: 1.3;
  background: var(--paper); border: 3px solid var(--ink); border-radius: var(--sketch); box-shadow: 4px 4px 0 var(--bob);
}
.guide-lulu .bubble { box-shadow: 4px 4px 0 var(--lulu); }
.bubble b { display: block; font-size: .85rem; color: var(--bob-deep); }
.guide-lulu .bubble b { color: #d6336c; }
.bubble::before {
  content: ""; position: absolute; left: -12px; bottom: 14px; width: 16px; height: 16px; background: var(--paper);
  border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg);
}

/* ───── personnages (Bob & Lulu) ───── */
.ch-eyes, .ch-mouth, .ch-arm, .ch-tail { transform-box: fill-box; }
.ch-eyes { transform-origin: 50% 50%; animation: blink 5.2s infinite; }
.ch-lulu .ch-eyes { animation-delay: -2.4s; }
.ch-mouth { transform-origin: 50% 10%; }
.ch-arm { transform-origin: 50% 15%; }
.ch-tail { transform-origin: 100% 20%; animation: tail 1.9s ease-in-out infinite alternate; }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.12); } }
@keyframes tail { to { transform: rotate(10deg); } }
@keyframes idle { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
@keyframes talkHop { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-9px) rotate(2deg); } }
@keyframes mouth { from { transform: scaleY(1); } to { transform: scaleY(.35); } }
@keyframes wave { from { transform: rotate(-25deg); } to { transform: rotate(35deg); } }

/* ───── étape 1 : arrivée plein écran ───── */
.intro {
  min-height: calc(100dvh - 200px); display: grid; grid-template-rows: auto 1fr auto auto; gap: 10px;
  text-align: center; align-items: center;
}
.intro h1 { font-size: clamp(2.3rem, 6.5vw, 4.6rem); }
.intro .w { display: inline-block; animation: wordIn .8s var(--spring) both; animation-delay: var(--d, 0s); }
.intro .kicker { color: var(--ink-soft); }
@keyframes wordIn { from { opacity: 0; transform: translateY(24px) rotate(-6deg) scale(.9); } }

.scene {
  display: grid; grid-template-columns: 1fr 1.35fr 1fr; align-items: end; gap: 8px;
  width: 100%; max-width: 900px; margin: 0 auto; padding-top: clamp(70px, 12vw, 130px);
}
.actor { position: relative; width: min(24vw, 220px); justify-self: center; }
.actor-bob { animation: enterL 1s var(--spring) .1s both; }
.actor-lulu { animation: enterR 1s var(--spring) .35s both; }
@keyframes enterL { from { opacity: 0; transform: translateX(-60vw) rotate(-20deg); } }
@keyframes enterR { from { opacity: 0; transform: translateX(60vw) rotate(20deg); } }
.actor .ch { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 100%; animation: idle 2.4s ease-in-out infinite; }
.actor-lulu .ch { animation-delay: -1.2s; }
.actor.talking .ch { animation: talkHop .32s ease-in-out infinite alternate; }
.actor.talking .ch-mouth { animation: mouth .16s steps(2, end) infinite alternate; }
.actor-bob.talking .ch-arm-r, .actor-lulu.talking .ch-arm-l { animation: wave .4s ease-in-out infinite alternate; }
.nametag {
  position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%) rotate(-3deg); font-size: .85rem; font-weight: 700;
  background: var(--paper); border: 2.5px solid var(--ink); border-radius: 99px; padding: 0 .55em;
}

.box-wrap { position: relative; width: min(36vw, 340px); justify-self: center; }
.open-box { display: block; width: 100%; height: auto; overflow: visible; }
.goodies {
  position: absolute; left: 6%; right: 6%; bottom: 62%; height: 70%;
  display: flex; justify-content: space-around; align-items: flex-end; pointer-events: none;
}
.goodie {
  display: block; width: 22%; aspect-ratio: 1; transform-origin: 50% 100%;
  animation: popOut .75s var(--spring) both, floaty 3.2s ease-in-out infinite;
  animation-delay: calc(.7s + var(--i) * .16s), calc(1.6s + var(--i) * .25s);
}
.goodie:nth-child(odd) { rotate: -8deg; }
.goodie:nth-child(even) { rotate: 7deg; margin-bottom: 14%; }
.goodie > svg, .loot-ic > svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes popOut { from { opacity: 0; transform: translateY(70%) scale(.25); } }
@keyframes floaty { 50% { translate: 0 -8px; } }

.star-slot { position: relative; display: block; width: 100%; height: 100%; }
.star-slot > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; animation: starCycle 6s infinite; }
.star-slot > svg:nth-child(2) { animation-delay: 1.5s; }
.star-slot > svg:nth-child(3) { animation-delay: 3s; }
.star-slot > svg:nth-child(4) { animation-delay: 4.5s; }
@keyframes starCycle { 0%, 23% { opacity: 1; } 25%, 100% { opacity: 0; } }
.star-q {
  position: absolute; top: -8%; right: -10%; width: 1.5em; height: 1.5em; display: grid; place-items: center;
  font-weight: 700; font-size: clamp(.7rem, 1.5vw, .95rem); background: var(--gold); border: 2.5px solid var(--ink); border-radius: 50%;
}

.sticker {
  position: absolute; top: -12%; left: -10%; width: 4.6em; aspect-ratio: 1; display: grid; place-items: center;
  font-size: clamp(.62rem, 1.4vw, .85rem); font-weight: 700; line-height: 1; text-align: center;
  background: var(--gold); border: 3px solid var(--ink); border-radius: 50%; transform: rotate(-12deg);
  animation: popOut .6s var(--spring) 1.7s both;
}
.parcel, .rythm { position: absolute; opacity: 0; transition: opacity .45s var(--out), transform .55s var(--spring); }
.parcel { width: 34%; right: -16%; bottom: -6%; transform: translateX(40px) rotate(14deg); }
.parcel > svg { display: block; width: 100%; height: auto; overflow: visible; }
.rythm {
  font-size: clamp(.75rem, 1.7vw, 1rem); font-weight: 700; white-space: nowrap; padding: 2px 10px;
  background: var(--paper); border: 2.5px solid var(--ink); border-radius: var(--sketch); transform: scale(.5);
}
.r-month { top: -26%; right: -6%; box-shadow: 3px 3px 0 var(--bob); }
.r-once { top: -6%; right: -14%; box-shadow: 3px 3px 0 var(--lulu); }
.scene[data-beat="1"] .rythm { opacity: 1; transform: scale(1) rotate(-3deg); }
.scene[data-beat="1"] .r-once { transform: scale(1) rotate(4deg); transition-delay: .15s; }
.scene[data-beat="2"] .goodie:not(.g-star) { filter: opacity(.35); }
.scene[data-beat="2"] .g-star { scale: 1.35; }
.scene[data-beat="3"] .parcel { opacity: 1; transform: none; }
.goodie { transition: filter .4s, scale .45s var(--spring); }

.dialogue {
  position: relative; width: 100%; max-width: 760px; margin: 18px auto 0; text-align: left;
  padding: 18px 18px 10px; background: var(--paper); border: 3px solid var(--ink); border-radius: var(--sketch);
  box-shadow: 6px 6px 0 var(--bob); transition: box-shadow .3s;
}
.dialogue[data-who="lulu"] { box-shadow: 6px 6px 0 var(--lulu); }
.speaker {
  position: absolute; top: -17px; left: 18px; margin: 0; padding: 0 .7em; font-weight: 700;
  background: var(--bob); border: 3px solid var(--ink); border-radius: 99px;
}
.dialogue[data-who="lulu"] .speaker { left: auto; right: 18px; background: var(--lulu); }
.line { margin: .2em 0 .3em; min-height: 2.9em; font-size: clamp(1.05rem, 2.3vw, 1.32rem); }
.dlg-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dlg-count { font-size: .9rem; color: var(--ink-soft); }
.caption { margin: 4px 0 0; font-size: .85rem; color: var(--ink-soft); }

/* ───── étape 2 : rythme ───── */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 3vw, 28px); }
.choice { --accent: var(--bob); --tint: var(--bob-tint); display: flex; }
.choice-once { --accent: var(--lulu); --tint: var(--lulu-tint); }
.choice-card {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; cursor: pointer;
  padding: 22px; background: var(--paper); border: 3px solid var(--ink); border-radius: var(--sketch); box-shadow: 6px 6px 0 var(--ink);
  transition: transform .3s var(--spring), box-shadow .3s var(--out), background .3s;
}
@media (hover: hover) { .choice-card:hover { transform: translate(-2px, -4px) rotate(-.4deg); box-shadow: 8px 10px 0 var(--ink); } }
.choice input:checked + .choice-card { background: var(--tint); box-shadow: 8px 8px 0 var(--accent); transform: translateY(-4px) rotate(-.6deg); }
.choice input:focus-visible + .choice-card { outline: 3px dashed var(--bob-deep); outline-offset: 5px; }
.pill { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 0 .7em; border: 2px solid var(--ink); border-radius: 99px; background: var(--accent); }
.choice-art { align-self: center; height: 120px; display: flex; align-items: flex-end; justify-content: center; gap: 0; position: relative; }
.mini-parcel { width: 86px; display: block; }
.mini-parcel > svg { width: 100%; height: auto; display: block; overflow: visible; }
.mini-parcel:nth-child(2) { transform: translateY(-6px) rotate(-6deg); }
.mini-parcel:nth-child(3) { transform: rotate(4deg); margin-left: -22px; }
.mini-parcel:nth-child(4) { transform: translateY(-4px) rotate(9deg); margin-left: -22px; }
.mini-parcel.solo { width: 112px; }
.loop { position: absolute; top: -8px; left: 50%; font-size: 2.2rem; font-weight: 700; color: var(--bob-deep); animation: spin 6s linear infinite; translate: -50% 0; }
@keyframes spin { to { rotate: 360deg; } }
.choice-title { font-size: clamp(1.6rem, 3.4vw, 2.1rem); font-weight: 700; line-height: 1; }
.choice-text { font-size: 1.05rem; }
.choice-meta { font-weight: 700; }
.choice-note { font-size: .92rem; color: var(--warn); }
.choice-cond { font-size: .92rem; color: var(--ink-soft); }
.tick {
  position: absolute; top: -16px; right: -8px; padding: 0 .7em; font-weight: 700; background: var(--gold);
  border: 3px solid var(--ink); border-radius: 99px; transform: scale(0) rotate(-14deg); transition: transform .35s var(--spring);
}
input:checked + label .tick { transform: scale(1) rotate(-6deg); }

/* ───── étape 3 : formules ───── */
.mode-switch { display: inline-flex; border: 3px solid var(--ink); border-radius: 99px; overflow: hidden; margin: 0 0 22px; background: var(--paper); }
.mode-switch button { min-height: 44px; padding: .3em 1.1em; font-weight: 700; border: 0; background: transparent; cursor: pointer; }
.mode-switch button + button { border-left: 3px solid var(--ink); }
.mode-switch button[aria-pressed="true"] { background: var(--gold); }

.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.plan { display: flex; flex-direction: column; gap: 10px; }
.plan-card {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; cursor: pointer;
  padding: 14px 14px 14px; background: var(--paper); border: 3px solid var(--ink); border-radius: var(--sketch2);
  box-shadow: 5px 5px 0 var(--ink); transition: transform .3s var(--spring), box-shadow .3s var(--out), background .3s;
}
@media (hover: hover) { .plan:not(.is-locked) .plan-card:hover { transform: translate(-2px, -4px); box-shadow: 7px 9px 0 var(--ink); } }
.plan input:checked + .plan-card {
  background: color-mix(in srgb, var(--c) 20%, var(--paper)); box-shadow: 7px 9px 0 var(--c), 7px 9px 0 3px var(--ink);
  transform: translateY(-8px) rotate(-.8deg);
}
.plan input:focus-visible + .plan-card { outline: 3px dashed var(--bob-deep); outline-offset: 5px; }
.plan-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; width: 100%; }
.lvl { font-size: .8rem; font-weight: 700; white-space: nowrap; padding: 0 .55em; border: 2px solid var(--ink); border-radius: 99px; background: var(--paper); }
.plan-kicker { font-size: .85rem; color: var(--ink-soft); text-align: right; line-height: 1.15; }
.plan-art {
  position: relative; align-self: stretch; height: 118px; margin: 6px 0; display: grid; place-items: center;
  background: var(--c); border: 3px solid var(--ink); border-radius: 14px;
}
.plan-star-ic { width: 92px; height: 92px; display: block; }
.plan-name { font-size: 1.7rem; font-weight: 700; line-height: 1.05; }
.plan-sub { font-size: .95rem; color: var(--ink-soft); line-height: 1.25; }
.price { margin-top: auto; padding-top: 8px; }
.price b { font-size: 1.6rem; }
.price.is-off b { font-size: 1.25rem; color: var(--warn); }
.plan-note { font-size: .88rem; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.is-locked .plan-card {
  cursor: not-allowed; box-shadow: none;
  background: repeating-linear-gradient(-45deg, var(--paper) 0 12px, #f1efea 12px 24px);
}
.is-locked .plan-art { filter: grayscale(.85); opacity: .75; }
.is-locked .plan-note { color: var(--warn); }
.lock { position: absolute; width: 38px; height: 38px; fill: var(--paper); stroke: var(--ink); stroke-width: 2; right: 8px; bottom: 6px; }

/* ───── fiche « En savoir plus » ───── */
.sheet {
  width: min(580px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; overflow: auto; color: var(--ink);
  background: var(--paper); border: 3px solid var(--ink); border-radius: 22px; box-shadow: 8px 8px 0 var(--c, var(--bob));
}
.sheet::backdrop { background: rgba(28, 28, 28, .55); backdrop-filter: blur(2px); }
.sheet[open] { animation: sheetIn .4s var(--spring); }
@keyframes sheetIn { from { opacity: 0; transform: translateY(30px) scale(.96); } }
.sheet-inner { padding: 18px 22px 22px; }
.sheet-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sheet-top .lvl { background: var(--c); }
.sheet-close { width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; cursor: pointer; background: var(--paper); border: 3px solid var(--ink); border-radius: 50%; }
.sheet h2 { font-size: 2.2rem; margin-top: 10px; }
.sheet h2 small { display: block; font-size: 1rem; color: var(--ink-soft); margin-top: 4px; }
.sheet h3 { font-size: 1.15rem; margin: 16px 0 8px; }
.sheet-short { font-weight: 700; margin-bottom: 0; }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* ───── listes de contenu et prix ───── */
.loot-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.loot-list li {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 8px 12px;
  background: var(--paper); border: 2.5px solid var(--ink); border-radius: 14px;
  animation: lootIn .5s var(--spring) both; animation-delay: calc(.35s + var(--i) * .12s);
}
@keyframes lootIn { from { opacity: 0; transform: translateX(-24px) scale(.95); } }
.loot-icons { display: flex; gap: 4px; }
.loot-ic { display: block; width: 50px; height: 50px; }
.loot-txt { font-weight: 700; font-size: 1.1rem; }
.loot-list.compact .loot-ic { width: 38px; height: 38px; }
.loot-list.compact .loot-txt { font-size: 1rem; }
.loot-list.compact li { animation: none; }

.totals { margin: 14px 0; }
.totals > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 2px dashed var(--shade); }
.totals dt { margin: 0; }
.totals dd { margin: 0; font-weight: 700; text-align: right; }
.totals .total dd { font-size: 1.6rem; }
.totals .total dd small { font-size: .95rem; }
.totals .is-current { background: color-mix(in srgb, var(--c, var(--gold)) 22%, transparent); border-radius: 8px; padding-left: 6px; padding-right: 6px; }
.unknown { color: var(--warn); font-weight: 700; }
.unknown::before { content: "? "; }

/* ───── étape 4 : récapitulatif ───── */
.recap-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(18px, 3vw, 34px); align-items: start; }
.loot, .ticket { padding: 20px; background: var(--paper); border: 3px solid var(--ink); border-radius: var(--sketch); }
.loot { box-shadow: 7px 7px 0 var(--c); }
.ticket { box-shadow: 7px 7px 0 var(--ink); position: relative; }
.ticket::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: 8px; border-top: 3px dotted var(--ink-soft);
}
.loot h2, .ticket h2 { font-size: 1.7rem; }
.loot h2 small { display: block; font-size: 1rem; color: var(--ink-soft); margin-top: 4px; }
.loot-stage { position: relative; width: min(300px, 78%); margin: clamp(70px, 9vw, 96px) auto 0; }
.ticket-type { display: inline-block; margin: 10px 0 0; padding: 0 .8em; font-weight: 700; background: var(--c); border: 2.5px solid var(--ink); border-radius: 99px; }
.ticket-desc { margin: 10px 0 0; }
.cond { font-size: .98rem; margin: 0 0 10px; }
.facts { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.facts li { font-size: .9rem; padding: 0 .65em; border: 2px solid var(--ink); border-radius: 99px; background: var(--bob-tint); }
.missing { padding: 8px 12px; background: var(--warn-bg); border: 2.5px dashed var(--warn); border-radius: 12px; }
.missing summary { cursor: pointer; font-weight: 700; color: var(--warn); }
.missing ul { margin: 6px 0 2px; padding-left: 1.1em; font-size: .92rem; }
.adult { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; font-weight: 700; cursor: pointer; min-height: 44px; }
.adult input { width: 24px; height: 24px; accent-color: var(--bob-deep); flex: none; }
.btn.buy { width: 100%; font-size: 1.25rem; background: var(--gold); }
.btn.buy.is-disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.help { margin: 8px 0 0; font-size: .92rem; color: var(--ink-soft); }
.ticket-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ───── responsive ───── */
@media (max-width: 1000px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .recap-grid { grid-template-columns: 1fr; }
  .step-head { grid-template-columns: 1fr; }
  .guide { max-width: none; }
}
@media (max-width: 720px) {
  body { font-size: 17px; }
  .hud { gap: 8px; }
  .logo { font-size: 1.25rem; }
  .tag { display: none; }
  .progress li:not(.is-current) .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .progress .node { width: 30px; height: 30px; }
  .mt-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pager { grid-template-columns: auto auto; grid-template-areas: "hint hint" "prev next"; row-gap: 6px; }
  .hint { grid-area: hint; font-size: .9rem; }
  #prevBtn { grid-area: prev; justify-self: start; }
  #nextBtn { grid-area: next; justify-self: end; }
  .choices { grid-template-columns: 1fr; }
  .choice-art { height: 92px; }
  .mini-parcel { width: 66px; }
  .mini-parcel.solo { width: 86px; }
  .intro { min-height: calc(100dvh - 230px); }
  .intro .lede { font-size: 1rem; }
  .scene { grid-template-columns: 1fr 1.5fr 1fr; padding-top: 64px; }
  .actor { width: 27vw; }
  .box-wrap { width: 40vw; }
  .guide-ch { width: 64px; }
  .bubble { font-size: .95rem; margin-bottom: 22px; }
}
@media (max-width: 560px) {
  .plans { grid-template-columns: 1fr; }
  .plan-art { height: 96px; }
  .plan-star-ic { width: 74px; height: 74px; }
  .sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 22px 22px 0 0; max-height: 92dvh; }
  .rythm { font-size: .7rem; }
}
@media (max-height: 640px) and (min-width: 721px) {
  .scene { padding-top: 60px; }
  .actor { width: min(18vw, 160px); }
  .box-wrap { width: min(28vw, 260px); }
}

/* ───── mouvement réduit : préférence système (appliquée par app.js) ou interrupteur ───── */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
.reduce-motion .star-slot > svg:first-child { opacity: 1; }
html.reduce-motion { scroll-behavior: auto; }

/* Ajustements après vérification en fenêtre étroite. */
.app { grid-template-columns: minmax(0, 1fr); overflow-x: clip; }
.screen, .step, .intro { min-width: 0; }
.scene { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); }
.actor { width: 100%; max-width: 220px; }
.box-wrap { width: 100%; max-width: 340px; }
@media (max-width: 720px) {
  .scene { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); }
  .actor, .box-wrap { width: 100%; }
}
@media (max-width: 430px) {
  .progress .lbl { display: none; }
  .hud { gap: 4px; padding-inline: 10px; }
  .motion-toggle { padding-inline: 8px; }
  .progress ol { gap: 2px; }
}

/* Sélections illustrées propres à chaque formule. */
.plan-art .plan-star-ic {width:100%;height:100%;}
.formula-drawing {display:flex;align-items:end;justify-content:center;width:100%;height:100%;gap:0;}
.formula-product {display:block;width:24%;height:90%;transform:rotate(-9deg);}
.formula-product:first-child {width:36%;height:100%;}
.formula-product:nth-child(2n) {transform:rotate(8deg);height:70%;margin-left:-8%;}
.formula-product svg {width:100%;height:100%;overflow:visible;}
.formula-mini .product-0 {transform:rotate(12deg);}
.formula-divine .product-0 {transform:rotate(-15deg);}
.detail-art {height:170px;max-width:350px;margin:15px auto;}
.value-pill {display:block;font-size:.85rem;border-radius:20px;background:#fff1bd;padding:5px 10px;}
.value-copy {background:#fff5d6;border:2px solid var(--ink);border-radius:14px;padding:16px;line-height:1.45;margin-block:16px;}
.value-copy small {display:block;font-size:.8rem;color:var(--ink-soft);margin-top:8px;}
.legal {max-width:850px;margin:auto;padding:24px;line-height:1.6;}
.legal h2 {margin-top:30px;}.legal p,.legal li{font-family:Arial,sans-serif;font-size:16px;}
.legal .draft {padding:18px;background:#fff1bd;border:2px solid var(--ink);border-radius:14px;}

@media (min-width:721px) and (max-width:1000px) {.progress .lbl {display:none;} .hud {gap:8px;} }
@media (max-width:1000px) {.progress .lbl {display:block!important;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}}

.bestseller{display:block;background:var(--gold);border:2px solid var(--ink);padding:6px 10px;border-radius:12px;font-size:.87rem;font-weight:700;line-height:1.3;margin:6px 0;}
.bestseller small { display: block; font-size: .75rem; font-weight: 400; }

.lulu-card-perch{position:absolute;z-index:3;right:-9px;top:-66px;width:94px;height:102px;pointer-events:none;transform:rotate(9deg);filter:drop-shadow(2px 3px 0 rgba(28,28,28,.12));}.lulu-card-perch .ch{display:block;width:100%;height:100%;overflow:visible;}.plan-card:has(.lulu-card-perch) .plan-top{padding-right:58px;} .plans{row-gap:78px;} @media(max-width:560px){.lulu-card-perch{width:82px;top:-58px;right:0;}}

/* Collection mixte : les premiers modèles côtoient les nouveaux dessins. */
.formula-drawing{gap:2px;align-items:center;} .formula-product{flex:1 1 0;min-width:0;width:auto;height:76%;} .formula-product:first-child{flex:1.35 1 0;width:auto;height:100%;} .formula-product:nth-child(2n){margin-left:0;height:84%;} .formula-product:nth-child(3){height:65%;transform:rotate(-5deg);}

/* Mouvement propre à chaque objet, appliqué au SVG pour préserver la composition. */
.formula-product > svg {transform-box:fill-box;transform-origin:50% 85%;animation-delay:var(--object-delay,0s);}
.object-gspot > svg,.object-curveWand > svg,.object-rabbit > svg,.object-dual > svg,.object-bullet > svg,.object-petal > svg {animation:toyPulse 3.6s infinite;animation-delay:var(--object-delay,0s);}
.object-wand > svg {animation:wandBuzz 4.2s infinite;animation-delay:var(--object-delay,0s);}
.object-suction > svg,.object-pebble > svg,.object-arc > svg {animation:airPulse 3.2s ease-in-out infinite;animation-delay:var(--object-delay,0s);}
.object-beads > svg {transform-origin:50% 5%;animation:beadSwing 3.4s ease-in-out infinite;animation-delay:var(--object-delay,0s);}
.object-cuffs > svg {transform-origin:50% 25%;animation:cuffSwing 4s ease-in-out infinite;animation-delay:var(--object-delay,0s);}
.object-ring > svg {transform-origin:50% 55%;animation:ringRock 4.3s ease-in-out infinite;animation-delay:var(--object-delay,0s);}
.object-remoteEgg > svg {animation:eggWiggle 3.1s ease-in-out infinite;animation-delay:var(--object-delay,0s);}
.object-lube > svg,.object-lubeBlue > svg {animation:tubeSqueeze 4.5s ease-in-out infinite;animation-delay:var(--object-delay,0s);}
.object-oil > svg {animation:bottleRock 5.2s ease-in-out infinite;animation-delay:var(--object-delay,0s);}
.object-lolly > svg {transform-origin:50% 95%;animation:lollyTwirl 5.8s ease-in-out infinite;animation-delay:var(--object-delay,0s);}
.object-condom > svg {animation:packetPop 5s ease-in-out infinite;animation-delay:var(--object-delay,0s);}
.object-plugs > svg {animation:plugBounce 4.1s ease-in-out infinite;animation-delay:var(--object-delay,0s);}
@keyframes toyPulse {0%,30%,56%,100%{transform:translate(0) rotate(0)}34%,42%,50%{transform:translate(.8px,-.5px) rotate(1.4deg)}38%,46%,54%{transform:translate(-.8px,.5px) rotate(-1.4deg)}}
@keyframes wandBuzz {0%,44%,64%,100%{transform:rotate(0)}46%,50%,54%,58%,62%{transform:rotate(1.5deg)}48%,52%,56%,60%{transform:rotate(-1.5deg)}}
@keyframes airPulse {0%,38%,72%,100%{transform:scale(1)}47%,61%{transform:scale(1.035,.97)}54%,68%{transform:scale(.985,1.025)}}
@keyframes beadSwing {0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes cuffSwing {0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(5deg) translateY(2px)}}
@keyframes ringRock {0%,100%{transform:rotate(-7deg)}50%{transform:rotate(9deg)}}
@keyframes eggWiggle {0%,35%,70%,100%{transform:rotate(0)}43%,59%{transform:rotate(4deg) translateY(-1px)}51%,67%{transform:rotate(-4deg)}}
@keyframes tubeSqueeze {0%,45%,75%,100%{transform:scale(1)}56%{transform:scale(.95,1.035)}66%{transform:scale(1.02,.99)}}
@keyframes bottleRock {0%,55%,85%,100%{transform:rotate(0)}65%{transform:rotate(-5deg)}76%{transform:rotate(4deg)}}
@keyframes lollyTwirl {0%,100%{transform:rotate(-5deg)}50%{transform:rotate(7deg)}}
@keyframes packetPop {0%,60%,85%,100%{transform:scale(1)}70%{transform:translateY(-3px) rotate(4deg)}78%{transform:rotate(-2deg)}}
@keyframes plugBounce {0%,50%,80%,100%{transform:translateY(0)}60%{transform:translateY(-3px)}70%{transform:translateY(-1px)}}
/* L'interrupteur et la préférence système gardent priorité sur tous les nouveaux mouvements. */
html.reduce-motion .formula-product > svg {animation:none!important;transform:none!important;}
@media(prefers-reduced-motion:reduce){.formula-product > svg {animation:none!important;transform:none!important;}}

/* Intro : une collection plus grande, sur deux rangées, sans compresser les dessins. */
.intro .scene {padding-top:clamp(180px,23vw,255px);}
.intro .goodies {left:-40%;right:auto;width:180%;bottom:78%;height:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 3%;align-items:end;}
.intro .goodie {width:100%;aspect-ratio:1;min-width:0;margin:0!important;flex-shrink:0;}
.intro .goodie:nth-child(2n){rotate:9deg;}
.intro .goodie:nth-child(4n+1){rotate:-12deg;}
.intro .goodie:nth-child(n+5){margin-top:-10%!important;}
.intro .scene[data-beat="2"] .goodie{filter:none;}
.intro .sticker {left:-20%;top:4%;z-index:2;}
@media(max-width:560px){.intro .scene{padding-top:175px;}.intro .goodies{width:210%;left:-55%;bottom:80%;}.intro .goodie{min-height:58px;}.intro .sticker{width:4em;font-size:.6rem;}}

.intro .goodies{grid-template-columns:repeat(5,minmax(0,1fr));width:210%;left:-55%;}.intro .goodie{min-height:65px;}.intro .goodie:nth-child(n+5){margin-top:0!important;}.intro .goodie:nth-child(n+6){margin-top:-8%!important;}@media(max-width:560px){.intro .goodies{width:230%;left:-65%;}.intro .goodie{min-height:56px;}}
/* Intro : disposition 2 / 4 / 4, avec première rangée centrée. */
.intro .goodies{grid-template-columns:repeat(4,minmax(0,1fr));width:210%;left:-55%;gap:0 3%;}
.intro .goodie:nth-child(1){grid-column:2;grid-row:1;}
.intro .goodie:nth-child(2){grid-column:3;grid-row:1;}
.intro .goodie:nth-child(3){grid-column:1;grid-row:2;}
.intro .goodie:nth-child(4){grid-column:2;grid-row:2;}
.intro .goodie:nth-child(5){grid-column:3;grid-row:2;}
.intro .goodie:nth-child(6){grid-column:4;grid-row:2;}
.intro .goodie:nth-child(7){grid-column:1;grid-row:3;}
.intro .goodie:nth-child(8){grid-column:2;grid-row:3;}
.intro .goodie:nth-child(9){grid-column:3;grid-row:3;}
.intro .goodie:nth-child(10){grid-column:4;grid-row:3;}
.intro .goodie:nth-child(n){margin:0!important;}
.intro .scene{padding-top:clamp(255px,32vw,360px);}
@media(max-width:560px){.intro .goodies{width:210%;left:-55%;}.intro .scene{padding-top:245px;}.intro .goodie{min-height:58px;}}
/* Intro : dialogues plus grands et confortables à lire. */
.intro .dialogue {padding:22px 24px 18px;}
.intro .dialogue .line {font-size:clamp(1.35rem,2.5vw,1.75rem);line-height:1.5;min-height:4.5em;}
.intro .dialogue .speaker {font-size:1.2rem;padding:2px 14px;}
.intro .dialogue .dlg-count {font-size:1.05rem;}
.intro .dialogue .btn {font-size:1.1rem;min-height:48px;}
@media(max-width:560px){.intro .dialogue{padding:22px 18px 16px;}.intro .dialogue .line{font-size:1.35rem;line-height:1.45;}}
/* Étape 2 : chorégraphies propres au rythme choisi. */
.choice-art{isolation:isolate;}
.choice-monthly .mini-parcel{animation:monthlyArrival 1s var(--spring) both,monthlyParade 5.5s ease-in-out 1s infinite;transform-origin:50% 90%;}
.choice-monthly .mini-parcel:nth-of-type(2){animation-delay:.12s,1.12s;}
.choice-monthly .mini-parcel:nth-of-type(3){animation-delay:.32s,1.32s;}
.choice-monthly .mini-parcel:nth-of-type(4){animation-delay:.52s,1.52s;}
.choice-monthly .loop{display:inline-block;animation:subscriptionOrbit 6s ease-in-out infinite;transform-origin:50% 50%;}
.choice-once .mini-parcel.solo{animation:singleArrival 1.1s var(--spring) .15s both,singleGift 6s ease-in-out 1.4s infinite;transform-origin:50% 90%;}
.choice-card .choice-art::after{content:'✦';position:absolute;top:10%;right:22%;color:#d99223;font-size:24px;pointer-events:none;animation:giftSpark 4.2s ease-in-out infinite;}
.choice-monthly .choice-card .choice-art::after{right:12%;color:var(--bob);animation-delay:1s;}
.choice-art{position:relative;}
@keyframes monthlyArrival{from{opacity:0;transform:translate(-30px,14px) rotate(-12deg) scale(.8)}to{opacity:1;transform:translate(0) rotate(0) scale(1)}}
@keyframes monthlyParade{0%,65%,100%{translate:0 0;rotate:0deg}18%{translate:0 -7px;rotate:-4deg}35%{translate:0 0;rotate:3deg}48%{translate:0 -3px;rotate:0deg}}
@keyframes subscriptionOrbit{0%,20%{transform:rotate(0) scale(1)}55%,75%{transform:rotate(360deg) scale(1.1)}100%{transform:rotate(360deg) scale(1)}}
@keyframes singleArrival{from{opacity:0;transform:translateY(-28px) rotate(10deg) scale(.7)}70%{opacity:1;transform:translateY(3px) rotate(-4deg) scale(1.04)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@keyframes singleGift{0%,55%,100%{translate:0 0;rotate:0deg;scale:1}16%{translate:0 -6px;rotate:-4deg;scale:1.025}28%{translate:0 -6px;rotate:4deg;scale:1.025}40%{translate:0 0;rotate:0deg;scale:1}}
@keyframes giftSpark{0%,12%,65%,100%{opacity:0;transform:translateY(5px) rotate(-20deg) scale(.3)}28%,42%{opacity:1;transform:translateY(-3px) rotate(10deg) scale(1)}55%{opacity:0;transform:translateY(-8px) rotate(25deg) scale(.5)}}
.choice input:checked + .choice-card .mini-parcel{filter:drop-shadow(0 4px 3px rgba(28,28,28,.12));}
@media(prefers-reduced-motion:reduce){.choice-art *,.choice-art::after{animation:none!important;translate:none!important;rotate:none!important;scale:none!important;}.choice-art::after{opacity:0;}}
html.reduce-motion .choice-art *{translate:none!important;rotate:none!important;scale:none!important;}
html.reduce-motion .choice-art::after{animation:none!important;opacity:0;}
/* Cartes : garder les produits et leurs mouvements dans le cadre coloré. */
.plan-art{overflow:hidden;padding:10px 12px;}
.plan-art .plan-star-ic{height:100%;min-height:0;}
.plan-art .formula-drawing{height:100%;align-items:center;}
.plan-art .formula-product{height:74%;max-height:100%;}
.plan-art .formula-product:first-child{height:86%;}
.plan-art .formula-product:nth-child(2n){height:76%;}
.plan-art .formula-product:nth-child(3){height:65%;}
.plan-art .formula-product > svg{overflow:visible;}
@media(max-width:560px){.plan-art{padding:9px 10px;}}
/* Produits légèrement agrandis, toujours contenus dans leur cadre. */
.plan-art{padding:6px 10px;}
.plan-art .formula-product{height:84%;}
.plan-art .formula-product:first-child{height:96%;}
.plan-art .formula-product:nth-child(2n){height:86%;}
.plan-art .formula-product:nth-child(3){height:76%;}
@media(max-width:560px){.plan-art{padding:6px 9px;}}

.formula-audacieuse .formula-product:nth-child(-n+3),.formula-divine .formula-product:nth-child(-n+3){flex:1.2 1 0;height:90%;}.formula-audacieuse .formula-product:nth-child(n+4),.formula-divine .formula-product:nth-child(n+4){flex:.8 1 0;}

/* Revue conversion : bénéfices, prix et conditions lisibles sans ouvrir une fiche. */
.intro-offer { margin: 12px auto 0; max-width: 720px; font-size: 1rem; line-height: 1.5; }
.intro-facts { justify-content: center; margin: 12px 0 0; }
.plan-benefit { margin: 6px 0; font-size: 1rem; line-height: 1.35; }
.plan-contents { font-size: .9rem; line-height: 1.4; color: var(--ink-soft); }
.plan .price { width: 100%; margin-top: auto; border-top: 2px dashed var(--shade); }
.plan-note { line-height: 1.4; }
.mode-switch { margin-bottom: 10px; }
.plan-context { margin: 0 0 78px; font-size: 1rem; }
.legal-note { font-size: .9rem; line-height: 1.45; padding: 10px 12px; border-left: 3px solid var(--gold); background: #fff8e4; }
.legal-note a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }
.btn.buy { flex-wrap: wrap; text-align: center; line-height: 1.4; }
.totals small { display: inline-block; }
@media (max-width: 560px) {
  .mode-switch { display: flex; border-radius: 18px; }
  .mode-switch button { flex: 1 1 0; min-width: 0; padding: .5em; line-height: 1.3; }
  .plan-context { margin-bottom: 24px; }
  .plan-benefit { font-size: 1.05rem; }
  .sheet-actions .btn { width: 100%; }
}
@media (max-width: 430px) {
  .pager { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
  .pager .btn { min-width: 0; width: 100%; padding: .45em .5em; font-size: .95rem; line-height: 1.3; text-align: center; }
  .totals > div { flex-wrap: wrap; gap: 4px 12px; }
  .totals dd { margin-left: auto; }
}

/* Récapitulatif : stars de grande taille et sélection propre à chaque formule. */
.loot-stage{width:min(330px,82%);margin:230px auto 0;}
.recap-collection{position:absolute;bottom:65%;left:-10%;width:120%;pointer-events:none;}
.recap-stars,.recap-extras{display:flex;align-items:end;justify-content:center;gap:8px;}
.recap-stars{margin-bottom:0;}.recap-stars .recap-product{width:43%;max-width:142px;height:142px;}
.recap-extras .recap-product{width:19%;height:76px;}
.recap-product{display:block;transform:rotate(-6deg);}.recap-product:nth-child(even){transform:rotate(7deg);}
.recap-product>svg{display:block;width:100%;height:100%;overflow:visible;transform-origin:50% 85%;}
html.reduce-motion .recap-product>svg{animation:none!important;transform:none!important;}
@media(max-width:560px){.loot-stage{margin-top:215px;width:82%;}.recap-stars .recap-product{height:125px;}.recap-extras .recap-product{height:65px;}.recap-stars,.recap-extras{gap:3px;}}
@media(prefers-reduced-motion:reduce){.recap-product>svg{animation:none!important;}}

.intro-unique{max-width:620px;margin:12px auto 0;font-size:1.05rem;line-height:1.45;}.intro-unique strong{color:#bd365f;}

/* Campagne fêtes : les prix et les liens Stripe restent ceux du catalogue. */
.holiday-banner{max-width:1116px;margin:20px auto 0;padding:15px 20px;display:flex;align-items:center;gap:19px;border:2.5px solid var(--ink,#1c1c1c);border-radius:18px;background:#ffe2eb;box-shadow:4px 4px 0 #1c1c1c;color:#1c1c1c}.holiday-banner[hidden]{display:none}.holiday-emblem{flex:none;min-width:116px;padding:9px 13px;text-align:center;border:2px solid #1c1c1c;border-radius:12px;background:#ffd86b;font-size:1.8rem;font-weight:700;transform:rotate(-3deg)}.holiday-banner-copy{display:grid;gap:3px;flex:1}.holiday-banner-copy b{font-size:1.25rem;line-height:1.15}.holiday-banner-copy span{font-size:.95rem;line-height:1.25}.holiday-banner-tag{font-size:.83rem;max-width:130px;line-height:1.25;text-align:center;padding:9px;border-left:2px dashed #d97695}.holiday-card-badge{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;margin-top:10px;padding:5px 10px;border:2px solid #1c1c1c;border-radius:10px;background:#ffd86b;box-shadow:2px 2px 0 #1c1c1c;font-size:1.2rem;font-weight:700;line-height:1.15}.holiday-card-badge small{font-size:.8rem;font-weight:400}.holiday-card-badge+.price{margin-top:0}.holiday-info{display:grid;gap:5px;padding:13px 15px;margin:14px 0;border:2px solid #1c1c1c;border-radius:12px;background:#ffe2eb}.holiday-info b{font-size:1.1rem}.holiday-info span{font-size:.92rem}.holiday-info small{font-size:.8rem;line-height:1.35;color:#54454b}@media(max-width:1180px){.holiday-banner{margin:16px 24px 0}}@media(max-width:600px){.holiday-banner{margin:12px 14px 0;padding:12px;gap:12px;flex-wrap:wrap;box-shadow:3px 3px 0 #1c1c1c}.holiday-emblem{font-size:1.5rem;min-width:95px}.holiday-banner-copy{flex-basis:calc(100% - 120px)}.holiday-banner-copy b{font-size:1.03rem}.holiday-banner-copy span{font-size:.82rem}.holiday-banner-tag{max-width:none;width:100%;border-left:0;border-top:1px dashed #d97695;padding:7px 0 0;font-size:.78rem}}

.previous-price{display:block;color:var(--ink-soft);font-size:1rem;font-weight:400;line-height:1.4;margin:5px 0 2px}.previous-price s{text-decoration-thickness:2px}.previous-price small{font-size:.85em}

/* Bénéfices et note globale LècheBox fournie par le propriétaire. */
.box-rating{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0;color:var(--ink-soft);font-size:.96rem}.rating-stars{display:inline-block;position:relative;font:24px/1 Arial,sans-serif;letter-spacing:2px;color:#eadfe3}.rating-stars b{position:absolute;left:0;top:0;width:94%;overflow:hidden;white-space:nowrap;color:#ee7897;font-weight:400}.desire-points{border-left:3px solid #ffc5ac;background:#fff6f1;border-radius:0 16px 16px 0;padding:12px 18px;margin:20px 0 26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:left}.desire-points p{display:flex;gap:9px;margin:0;font-size:1rem;line-height:1.45}.desire-points b{color:#a52d59}.plan-highlights{display:grid;gap:7px;margin:10px 0 14px;font-size:1rem;line-height:1.3}.plan-highlights>span{display:flex;gap:8px}.plan-highlights i{font-style:normal;color:#a52d59;font-weight:700}.ticket .box-rating{font-size:.9rem}@media(max-width:760px){.desire-points{grid-template-columns:1fr;gap:12px;padding:15px}.box-rating{gap:7px}}

.real-box{border:2px solid var(--ink);border-radius:17px;background:#fff8f0;box-shadow:4px 4px 0 var(--ink);margin:12px 0 30px;overflow:hidden}.real-box summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px 20px;list-style:none}.real-box summary::-webkit-details-marker{display:none}.real-box summary b{display:block;font-size:1.4rem}.real-box summary small{display:block;color:var(--ink-soft);font-size:1rem}.real-box[open] summary{border-bottom:2px solid var(--ink)}.real-box-body{padding:18px}.real-box-body>p{margin:0 0 17px;font-size:1rem}.real-box-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}.real-box figure{margin:0;min-width:0}.real-box video{width:100%;max-height:560px;background:#231f22;display:block;border:2px solid var(--ink);border-radius:12px;aspect-ratio:9/16;object-fit:contain}.real-box img{display:block;width:100%;height:auto;border:2px solid var(--ink);border-radius:12px}.real-box figcaption{font-size:.86rem;color:var(--ink-soft);margin:7px 0 14px;line-height:1.3}.real-box-photos{display:grid;gap:10px}.real-box summary:focus-visible{outline:3px dashed var(--bob);outline-offset:-6px}@media(max-width:560px){.real-box-grid{grid-template-columns:1fr}.real-box video{max-height:460px}.real-box-photos{grid-template-columns:1fr 1fr;gap:10px}.real-box summary{padding:14px}.real-box-body{padding:12px}}

.bento-menu{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.bento-menu button{border:2px solid var(--ink);border-radius:30px;padding:7px 17px;font:inherit;color:var(--ink);background:white;cursor:pointer}.bento-menu button[aria-pressed=true]{background:#ffd45c;box-shadow:2px 3px 0 var(--ink)}.bento-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start;grid-auto-flow:row dense}.bento-tile{position:relative;display:block;min-width:0;overflow:hidden;border:2px solid var(--ink);border-radius:18px;background:#fff;box-shadow:3px 4px 0 #1c1c1c14;color:var(--ink);text-decoration:none;transition:transform .2s,box-shadow .2s}.bento-photo img{width:100%;height:240px;object-fit:cover;border:0;border-radius:0}.bento-wide{grid-column:span 2}.bento-wide img{height:320px}.bento-photo>span{display:flex;justify-content:space-between;padding:11px 13px;font-size:1rem;line-height:1.2}.bento-photo small{color:#a52d59}.bento-tile:hover{transform:translateY(-3px);box-shadow:4px 6px 0 #ff8fab66}.real-box .bento-video{margin:0}.bento-video video{aspect-ratio:9/16;width:100%;max-height:420px;object-fit:contain;border:0;border-radius:0;background:#231f22}.bento-video figcaption{margin:0;padding:12px}.bento-video figcaption b,.bento-video figcaption small{display:block}.bento-video figcaption small{margin-top:4px}.bento-gallery[data-filter=box] .bento-tile:not([data-kind=box]),.bento-gallery[data-filter=toys] .bento-tile:not([data-kind=toys]),.bento-gallery[data-filter=coulisses] .bento-tile:not([data-kind=coulisses]),.bento-gallery[data-filter=videos] .bento-tile:not([data-kind=videos]){display:none}.bento-grid+.fine{margin-top:20px}.loot .bento-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.loot .bento-wide{grid-column:span 2}@media(max-width:760px){.bento-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.bento-photo img{height:200px}.bento-wide img{height:260px}.bento-video video{max-height:330px}.bento-menu button{padding:6px 13px}.bento-photo>span{font-size:.88rem}.bento-video figcaption{font-size:.86rem}}@media(prefers-reduced-motion:reduce){.bento-tile{transition:none}}

.customer-reviews{border:2px solid var(--ink);border-radius:18px;background:#fffaf6;margin:30px 0;overflow:hidden;scroll-margin-top:95px}.customer-reviews summary{display:flex;justify-content:space-between;align-items:center;padding:18px;cursor:pointer;list-style:none}.customer-reviews summary::-webkit-details-marker{display:none}.customer-reviews summary b{display:block;font-size:1.5rem}.customer-reviews summary small{display:block;color:var(--ink-soft)}.reviews-body{padding:0 18px 20px}.reviews-provenance{font-size:.86rem;line-height:1.4;color:var(--ink-soft);max-width:800px}.review-search{display:grid;gap:7px;margin:20px 0 12px;font-size:1.1rem}.review-search input{width:100%;box-sizing:border-box;border:2px solid var(--ink);border-radius:12px;padding:12px;font:inherit;background:white;color:var(--ink)}.reviews-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:20px}.review-card{background:white;border:1.5px solid var(--ink);border-radius:15px;padding:16px;box-shadow:3px 4px 0 #ff8fab33}.review-theme{font-size:.8rem;background:#ffe3ed;border-radius:20px;padding:3px 9px;display:inline-block}.review-card blockquote{margin:14px 0;font-size:1.04rem;line-height:1.45}.review-card p{font-weight:700;margin:10px 0 0}.reviews-count{font-size:.9rem;color:var(--ink-soft)}.reviews-link{font:inherit;background:none;color:#a52d59;text-decoration:underline;border:0;cursor:pointer;padding:3px}.reviews-body button[hidden]{display:none}@media(max-width:900px){.reviews-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.reviews-grid{grid-template-columns:1fr}.reviews-body{padding:0 12px 16px}}

.logo{display:inline-flex;align-items:center;gap:5px}.logo::after{content:none}.brand-bob{display:inline-block;width:34px;height:34px;vertical-align:middle;transform:rotate(6deg)}.brand-bob .ch{width:100%;height:100%;display:block}@media(max-width:560px){.brand-bob{width:29px;height:29px}}

.real-box .bento-video video{aspect-ratio:1 / 1;object-fit:cover;object-position:center;width:100%;height:auto;max-height:none;background:transparent}


.payment-assurance{margin:22px auto 12px;max-width:735px}.payment-assurance img{display:block;width:100%;height:auto;border-radius:12px}.payment-assurance small{display:block;text-align:center;font-size:.76rem;line-height:1.35;color:var(--ink-soft);margin-top:6px}.ticket .payment-assurance{margin:16px 0}.ticket .payment-assurance img{min-height:54px;object-fit:contain;background:#53235c}@media(max-width:560px){.payment-assurance{overflow-x:auto}.payment-assurance img{min-height:54px;object-fit:contain;background:#53235c}}

.payment-white{display:flex;align-items:center;justify-content:center;gap:14px;background:#fff;border:1px solid #e9e5e7;border-radius:12px;padding:16px 12px;flex-wrap:wrap}.payment-white>b{font:600 14px/1.3 Arial,sans-serif;color:#242126;white-space:nowrap}.payment-logos{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.payment-logo{display:block;width:var(--pay-width);height:36px;border-radius:5px;background-image:url('media/paiement-securise.png');background-size:735px 89px;background-position:var(--pay-x) -27px;background-repeat:no-repeat;overflow:hidden;flex-shrink:0}.payment-assurance{overflow:visible}.ticket .payment-white{gap:10px;padding:13px 9px}@media(max-width:560px){.payment-white{gap:11px}.payment-logos{gap:7px}}