/* ===================== ANIMATIONS SERVICES ===================== */
/* Scène animée réutilisable */
.anim-stage{
  position:relative;width:100%;aspect-ratio:16/10;border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,var(--noir-3),var(--noir-2));
  border:1px solid var(--ligne);box-shadow:var(--ombre);
}
.anim-stage svg{position:absolute;inset:0;width:100%;height:100%}

/* halo doux derrière chaque scène */
.anim-stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px circle at 70% 20%,rgba(201,162,75,.10),transparent 60%)}

/* Les animations se jouent quand .play est ajouté (au scroll) */
.anim-stage [data-a]{opacity:0}
.anim-stage.play [data-a]{opacity:1}

/* ---- keyframes génériques ---- */
@keyframes shine{0%{transform:translateX(-120%) skewX(-20deg)}60%,100%{transform:translateX(320%) skewX(-20deg)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes bobBoat{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(6px) rotate(1.2deg)}}
@keyframes rise{0%{transform:translateY(10px);opacity:0}100%{transform:translateY(-60px);opacity:0}
  20%{opacity:.9}80%{opacity:.5}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sweep{0%{transform:translateX(0) rotate(0)}50%{transform:translateX(40px) rotate(8deg)}100%{transform:translateX(0) rotate(0)}}
@keyframes drop{0%{transform:translateY(-30px);opacity:0}40%{opacity:1}100%{transform:translateY(60px);opacity:0}}
@keyframes dash{to{stroke-dashoffset:0}}
@keyframes pulseGlow{0%,100%{opacity:.25}50%{opacity:.8}}
@keyframes wax{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(18px,-6px) rotate(25deg)}}
@keyframes fillUp{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes vac{0%{transform:translateX(0)}50%{transform:translateX(60px)}100%{transform:translateX(0)}}
@keyframes sparkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}
@keyframes wipeReveal{to{clip-path:inset(0 0 0 0)}}
@keyframes steam{0%{transform:translateY(0) scale(1);opacity:0}30%{opacity:.6}100%{transform:translateY(-50px) scale(1.6);opacity:0}}

/* éléments qui ne tournent que pendant .play */
.anim-stage.play .a-shine{animation:shine 3.2s ease-in-out 1.4s infinite}
.anim-stage.play .a-float{animation:floatY 3s ease-in-out infinite}
.anim-stage.play .a-boat{animation:bobBoat 3.5s ease-in-out infinite;transform-origin:center}
.anim-stage.play .a-spin{animation:spin 1.1s linear infinite;transform-origin:center}
.anim-stage.play .a-sweep{animation:sweep 2.4s ease-in-out infinite;transform-origin:top center}
.anim-stage.play .a-vac{animation:vac 3s ease-in-out infinite}
.anim-stage.play .a-wax{animation:wax 2.6s ease-in-out infinite;transform-origin:center}
.anim-stage.play .a-pulse{animation:pulseGlow 2.4s ease-in-out infinite}

/* bulles / gouttes générées en JS prennent ces classes */
.anim-stage.play .a-bubble{animation:rise linear infinite}
.anim-stage.play .a-droplet{animation:drop linear infinite}
.anim-stage.play .a-spark{animation:sparkle ease-in-out infinite}
.anim-stage.play .a-steam{animation:steam ease-out infinite}

/* tracés qui se dessinent */
.anim-stage .a-draw{stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400)}
.anim-stage.play .a-draw{animation:dash 1.6s ease forwards}
.anim-stage.play .a-draw.d2{animation-delay:.3s}
.anim-stage.play .a-draw.d3{animation-delay:.6s}

/* zone "après" qui se révèle (effet avant/après) */
.anim-stage .a-after{clip-path:inset(0 100% 0 0)}
.anim-stage.play .a-after{animation:wipeReveal 2s ease 1s forwards}
.anim-stage .a-fill{transform-origin:bottom;transform:scaleY(0)}
.anim-stage.play .a-fill{animation:fillUp 1.4s ease forwards}

/* layout scène + texte alterné */
.svc-anim{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;margin:40px 0}
.svc-anim.flip .anim-stage{order:2}
.svc-anim .txt h3{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:14px;color:var(--blanc)}
.svc-anim .txt p{color:var(--gris);margin-bottom:16px}
.svc-anim .txt .mini{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px}
.svc-anim .txt .mini span{font-size:.85rem;color:var(--or-clair);display:inline-flex;align-items:center;gap:7px}
@media(max-width:820px){.svc-anim{grid-template-columns:1fr;gap:24px}.svc-anim.flip .anim-stage{order:0}}

/* badge "avant / après" */
.ba-tag{position:absolute;top:14px;z-index:3;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  padding:5px 12px;border-radius:30px;background:rgba(10,10,12,.7);border:1px solid var(--ligne);color:var(--or)}
.ba-tag.l{left:14px}.ba-tag.r{right:14px;opacity:0}
.anim-stage.play .ba-tag.r{animation:fadeIn .6s ease 2.6s forwards}
@keyframes fadeIn{to{opacity:1}}

/* ===================== PAGE RÉSERVATION ===================== */
.resa-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:start;margin-top:40px}
@media(max-width:880px){.resa-wrap{grid-template-columns:1fr}}
.step{margin-bottom:34px}
.step-label{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.step-num{width:30px;height:30px;flex:0 0 30px;border-radius:50%;border:1px solid var(--or);color:var(--or);
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1rem}
.step-label h3{font-size:1.3rem;color:var(--blanc)}
.svc-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:560px){.svc-pick{grid-template-columns:repeat(2,1fr)}}
.svc-opt{cursor:pointer;border:1px solid var(--ligne);border-radius:14px;padding:16px 12px;text-align:center;
  background:var(--noir-2);transition:.35s;position:relative}
.svc-opt svg{width:30px;height:30px;color:var(--or);margin:0 auto 8px}
.svc-opt span{font-size:.85rem;display:block;color:#d8d4ca}
.svc-opt small{color:var(--or);font-size:.78rem}
.svc-opt:hover{transform:translateY(-3px);border-color:rgba(201,162,75,.5)}
.svc-opt.sel{border-color:var(--or);background:linear-gradient(160deg,var(--noir-3),var(--noir-2));box-shadow:0 0 0 3px rgba(201,162,75,.15)}
.svc-opt.sel::after{content:"✓";position:absolute;top:8px;right:10px;color:var(--or);font-weight:700}

.dates{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px}
.date-chip{flex:0 0 auto;cursor:pointer;border:1px solid var(--ligne);border-radius:12px;padding:12px 14px;text-align:center;
  background:var(--noir-2);transition:.3s;min-width:64px}
.date-chip .dow{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.date-chip .dnum{font-family:var(--serif);font-size:1.5rem;color:var(--blanc);line-height:1.2}
.date-chip .mon{font-size:.7rem;color:var(--gris)}
.date-chip:hover{border-color:rgba(201,162,75,.5)}
.date-chip.sel{border-color:var(--or);background:linear-gradient(160deg,var(--noir-3),var(--noir-2))}
.date-chip.sel .dnum{color:var(--or)}

.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:560px){.slots{grid-template-columns:repeat(3,1fr)}}
.slot{cursor:pointer;border:1px solid var(--ligne);border-radius:10px;padding:12px 8px;text-align:center;
  background:var(--noir-2);color:#d8d4ca;font-size:.9rem;transition:.3s}
.slot:hover{border-color:rgba(201,162,75,.5)}
.slot.sel{border-color:var(--or);color:var(--or);background:linear-gradient(160deg,var(--noir-3),var(--noir-2))}

/* récap collant */
.recap{position:sticky;top:100px;background:linear-gradient(160deg,var(--noir-3),var(--noir-2));
  border:1px solid var(--ligne);border-radius:20px;padding:30px}
.recap h3{font-size:1.4rem;margin-bottom:18px}
.recap .line{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--ligne);font-size:.92rem}
.recap .line span{color:var(--gris)}.recap .line b{color:var(--blanc);text-align:right}
.recap .line b.empty{color:var(--gris);font-weight:400;font-style:italic}
.recap .fld{margin:14px 0}
.recap form .btn-or{width:100%;justify-content:center;border:0;margin-top:8px}
.recap .note{font-size:.78rem;color:var(--gris);margin-top:14px;text-align:center}
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(120px);z-index:200;
  background:linear-gradient(120deg,var(--or-clair),var(--or));color:var(--noir);font-weight:600;
  padding:16px 26px;border-radius:40px;box-shadow:0 18px 40px -16px var(--or);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.toast.show{transform:translateX(-50%) translateY(0)}