/* =====================================================================
   SantéFlow — animation « parcours du patient » (borne, salle d'attente, écran d'appel, cabinet)
   Incluse par index.php et parcours-patient.php (_flow_scene.php + js/landing-flow.js).
   Scène en pourcentages d'une scène virtuelle 1200 × 560 ; tailles en unités de conteneur (cqw).
   ===================================================================== */
.fx { margin: 0; }
.fx-stage {
  --fx-wall: #eaf5f7; --fx-wall-2: #dbeef1; --fx-floor: #d3e3e8; --fx-floor-2: #c4d7dd; --fx-base: #b9cfd6;
  --fx-dev: #0b2730; --fx-dev-2: #12343f; --fx-screen: #ffffff; --fx-screen-ink: #0d1b24;
  --fx-chair: #5f98a4; --fx-chair-2: #4a828e; --fx-wood: #c49a6c; --fx-wood-2: #a67c50; --fx-light: rgba(255, 244, 214, .55);
  position: relative; aspect-ratio: 1200 / 560; container-type: inline-size; overflow: hidden;
  border-radius: calc(var(--radius, 16px) + 4px); border: 1px solid var(--line, #dfe7ec);
  box-shadow: 0 40px 90px -30px rgba(0, 60, 72, .35), 0 2px 6px rgba(13, 27, 36, .06);
  background: var(--fx-wall); isolation: isolate; font-family: var(--font, system-ui, sans-serif);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fx-stage { --fx-wall: #10262f; --fx-wall-2: #0c2029; --fx-floor: #15313b; --fx-floor-2: #112a33; --fx-base: #1d3c47; --fx-dev: #04121a; --fx-dev-2: #0a222b; --fx-screen: #eef6f8; --fx-chair: #33707c; --fx-chair-2: #285e69; --fx-wood: #7f5d3e; --fx-wood-2: #654930; --fx-light: rgba(255, 230, 170, .14); }
}
:root[data-theme="dark"] .fx-stage { --fx-wall: #10262f; --fx-wall-2: #0c2029; --fx-floor: #15313b; --fx-floor-2: #112a33; --fx-base: #1d3c47; --fx-dev: #04121a; --fx-dev-2: #0a222b; --fx-screen: #eef6f8; --fx-chair: #33707c; --fx-chair-2: #285e69; --fx-wood: #7f5d3e; --fx-wood-2: #654930; --fx-light: rgba(255, 230, 170, .14); }

/* ---------- Décor ---------- */
.fx-wall { position: absolute; inset: 0 0 30% 0; background: radial-gradient(120% 90% at 50% 0%, var(--fx-wall) 0%, var(--fx-wall-2) 100%); }
.fx-floor { position: absolute; inset: 70% 0 0 0; background:
  linear-gradient(180deg, rgba(0, 0, 0, .06), transparent 30%),
  repeating-linear-gradient(90deg, var(--fx-floor) 0 7.5%, var(--fx-floor-2) 7.5% 7.65%); }
.fx-base { position: absolute; left: 0; right: 0; top: 69%; height: 1.4%; background: var(--fx-base); box-shadow: 0 .2cqw .5cqw rgba(0, 0, 0, .08); }
.fx-deco > * { position: absolute; }
.fx-lamp { top: 0; width: 7%; height: 1.2%; background: #f6fbfc; border-radius: 0 0 .6cqw .6cqw; box-shadow: 0 .2cqw .3cqw rgba(0, 0, 0, .12); }
.fx-lamp::after { content: ''; position: absolute; left: -60%; right: -60%; top: 100%; height: 22cqw; background: radial-gradient(50% 60% at 50% 0%, var(--fx-light), transparent 70%); pointer-events: none; }
.fx-lamp--1 { left: 12%; } .fx-lamp--2 { left: 44%; } .fx-lamp--3 { left: 80%; }
.fx-window { left: 24%; top: 10%; width: 7.5%; height: 34%; border-radius: .6cqw; background: linear-gradient(180deg, #bfe6f2, #e9f7fb); border: .4cqw solid #f7fbfc; box-shadow: inset 0 0 0 .15cqw #c9dde3, 0 .4cqw 1cqw rgba(0, 0, 0, .08); overflow: hidden; }
:root[data-theme="dark"] .fx-window { background: linear-gradient(180deg, #1c3f5a, #26506a); border-color: #20414c; }
.fx-window i { position: absolute; left: 0; right: 0; height: 9%; background: rgba(255, 255, 255, .55); }
.fx-window i:nth-child(1) { top: 18%; } .fx-window i:nth-child(2) { top: 42%; } .fx-window i:nth-child(3) { top: 66%; }
.fx-sun { position: absolute; right: -20%; top: -10%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff6c9, rgba(255, 246, 201, 0) 70%); }
.fx-sign { left: 4.6%; top: 5%; width: 18%; padding: .45cqw .8cqw; border-radius: .6cqw; background: #005B66; color: #fff; box-shadow: 0 .4cqw 1cqw rgba(0, 0, 0, .15); display: flex; flex-direction: column; }
.fx-sign b { font-size: 1.2cqw; letter-spacing: .02em; } .fx-sign span { font-size: .78cqw; opacity: .85; }
.fx-poster { left: 64.8%; top: 14%; width: 4.4%; height: 18%; background: #fff; border-radius: .4cqw; box-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .1); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: .3cqw; gap: .2cqw; }
.fx-poster b { font-size: .58cqw; color: #005B66; line-height: 1.1; } .fx-poster span { font-size: .45cqw; color: #5b6b77; }
.fx-poster__ico { width: 55%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #00BFA6 0 30%, #e0f4f7 32%); }
.fx-plant { bottom: 29%; width: 3.6%; height: 15%; }
.fx-plant b { position: absolute; left: 18%; right: 18%; bottom: 0; height: 34%; background: linear-gradient(180deg, #f2f6f7, #cdd9dd); border-radius: .3cqw .3cqw .7cqw .7cqw; }
.fx-plant i { position: absolute; bottom: 28%; left: 40%; width: 22%; height: 62%; background: #2f9e6f; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; transform-origin: bottom center; }
.fx-plant i:nth-child(1) { transform: rotate(-28deg); } .fx-plant i:nth-child(2) { height: 75%; background: #38b47e; } .fx-plant i:nth-child(3) { transform: rotate(28deg); background: #278a5f; }
.fx-plant--1 { left: 25.5%; } .fx-plant--2 { left: 66.5%; }
.fx-dispenser { left: 2.2%; top: 34%; width: 1.6%; height: 9%; background: #f4f8f9; border-radius: .3cqw; box-shadow: 0 .2cqw .5cqw rgba(0, 0, 0, .1); }
.fx-dispenser i { position: absolute; left: 30%; right: 30%; top: 60%; height: 18%; background: #00BFA6; border-radius: .2cqw; }

/* Étiquettes d'étape */
.fx-tag { position: absolute; z-index: 4; font-size: 1.15cqw; font-weight: 700; padding: .4em .9em; border-radius: 99px; background: rgba(0, 91, 102, .78); color: #fff; white-space: nowrap; opacity: .6; transition: opacity .5s, transform .5s, background-color .5s, box-shadow .5s; backdrop-filter: blur(4px); }
.fx[data-step="1"] .fx-tag--kiosk, .fx[data-step="2"] .fx-tag--wait, .fx[data-step="3"] .fx-tag--tv, .fx[data-step="4"] .fx-tag--room { opacity: 1; background: var(--brand, #007C91); box-shadow: 0 0 0 .35cqw rgba(0, 191, 166, .3), 0 .5cqw 1.2cqw rgba(0, 91, 102, .3); }

/* ---------- Borne ---------- */
.fx-kiosk { position: absolute; left: 6.5%; top: 20%; width: 14%; height: 64%; z-index: 1; }
.fx-kiosk__screen { position: absolute; left: 0; right: 0; top: 0; height: 52%; background: linear-gradient(160deg, var(--fx-dev-2), var(--fx-dev)); border-radius: 1cqw; padding: .55cqw; box-shadow: 0 1.2cqw 2.4cqw -.4cqw rgba(0, 0, 0, .35), inset 0 0 0 .1cqw rgba(255, 255, 255, .08); }
.fx-kiosk__screen::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, rgba(255, 255, 255, .1) 0 30%, transparent 30%); pointer-events: none; }
.fx-kiosk__bar { font-size: .8cqw; color: #9fe7ef; font-weight: 700; letter-spacing: .02em; margin-bottom: .3cqw; }
.fx-kiosk__view { position: absolute; inset: 1.9cqw .55cqw .55cqw; background: var(--fx-screen); color: var(--fx-screen-ink); border-radius: .6cqw; display: flex; flex-direction: column; justify-content: center; gap: .35cqw; padding: .6cqw .7cqw; opacity: 0; transform: translateY(.4cqw) scale(.98); transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .2, 1); }
.fx-kiosk__view.is-on { opacity: 1; transform: none; }
.fx-kiosk__view--hello { align-items: center; text-align: center; }
.fx-kiosk__view--hello b { font-size: 1.45cqw; color: #007C91; font-family: var(--font-display, inherit); }
.fx-kiosk__view--hello span { font-size: .85cqw; color: #3a4b57; }
.fx-kiosk__btn { font-style: normal; font-size: .85cqw; font-weight: 700; background: linear-gradient(135deg, #00BFA6, #00a39b); color: #fff; border-radius: 99px; padding: .3em 1em; margin-top: .3cqw; box-shadow: 0 .25cqw .6cqw rgba(0, 191, 166, .4); animation: fxPulseBtn 1.6s ease-in-out infinite; }
.fx-kiosk__view--form label { display: flex; flex-direction: column; font-size: .7cqw; color: #5b6b77; font-weight: 600; gap: .1cqw; }
.fx-kiosk__view--form span { display: block; min-height: 1.5cqw; border: .12cqw solid #cfdde3; border-radius: .35cqw; padding: .1cqw .4cqw; font-size: .95cqw; color: #0d1b24; font-weight: 600; background: #fbfdfe; transition: border-color .2s, box-shadow .2s; }
.fx-kiosk__view--form span.is-typing { border-color: #007C91; box-shadow: 0 0 0 .2cqw rgba(0, 124, 145, .18); }
.fx-kiosk__view--form span.is-typing::after { content: ''; display: inline-block; width: .12cqw; height: 1cqw; background: #007C91; margin-left: .1cqw; vertical-align: middle; animation: fxBlink .8s steps(1) infinite; }
.fx-kiosk__view--ticket { align-items: center; text-align: center; background: linear-gradient(180deg, #ecfcf8, #ffffff); }
.fx-kiosk__view--ticket span { font-size: .85cqw; color: #00806f; font-weight: 700; }
.fx-kiosk__view--ticket b { font-size: 2.6cqw; color: #0d1b24; line-height: 1; font-family: var(--font-display, inherit); }
.fx-kiosk__view--ticket small { font-size: .7cqw; color: #3a4b57; }
.fx-kiosk__slot { position: absolute; left: 22%; right: 22%; top: 53%; height: 1.4cqw; background: #06141a; border-radius: 0 0 .4cqw .4cqw; }
.fx-kiosk__paper { position: absolute; left: 12%; right: 12%; top: 40%; height: 0; overflow: hidden; background: repeating-linear-gradient(180deg, #fff 0 .5cqw, #f4f7f8 .5cqw .55cqw); border-radius: 0 0 .3cqw .3cqw; box-shadow: 0 .3cqw .6cqw rgba(0, 0, 0, .18); transition: height .9s cubic-bezier(.2, .7, .2, 1); display: flex; align-items: flex-end; justify-content: center; }
.fx-kiosk__paper b { font-size: 1.4cqw; color: #0d1b24; padding-bottom: .3cqw; }
.fx-kiosk__paper.is-out { height: 3.8cqw; }
.fx-kiosk__neck { position: absolute; left: 44%; width: 12%; top: 55%; bottom: 6%; background: linear-gradient(90deg, #5d7f88, #9cbac1 45%, #5d7f88); border-radius: .2cqw; }
.fx-kiosk__foot { position: absolute; left: 14%; right: 14%; bottom: 0; height: 7%; background: linear-gradient(180deg, #5d7f88, #3f5f68); border-radius: 1.2cqw 1.2cqw .3cqw .3cqw; box-shadow: 0 .6cqw 1cqw rgba(0, 0, 0, .18); }
.fx-tag--kiosk { left: 50%; bottom: -8%; transform: translateX(-50%); }
.fx[data-step="1"] .fx-tag--kiosk { transform: translateX(-50%) scale(1.06); }

/* ---------- Écran d'appel ---------- */
.fx-tv { position: absolute; left: 34%; top: 8%; width: 28%; height: 32%; background: linear-gradient(160deg, var(--fx-dev-2), var(--fx-dev)); border-radius: 1cqw; padding: .7cqw .7cqw 2.1cqw; box-shadow: 0 1.6cqw 3cqw -.6cqw rgba(0, 0, 0, .45), inset 0 0 0 .12cqw rgba(255, 255, 255, .06); display: grid; grid-template-columns: 1.65fr 1fr; grid-template-rows: auto 1fr; gap: .5cqw; color: #fff; z-index: 1; }
.fx-tv::before { content: ''; position: absolute; left: 46%; width: 8%; bottom: 100%; height: 26%; background: linear-gradient(90deg, #6b8c95, #93b2ba, #6b8c95); }
.fx-tv::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, rgba(255, 255, 255, .08) 0 25%, transparent 25%); pointer-events: none; }
.fx-tv__head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; font-size: .9cqw; font-weight: 700; color: #9fe7ef; }
.fx-tv__head span { display: inline-flex; align-items: center; gap: .35cqw; }
.fx-tv__logo { width: 1cqw; height: 1cqw; background: linear-gradient(135deg, #1fb5bd, #00BFA6); clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%); }
.fx-tv__call { position: relative; background: linear-gradient(135deg, #007C91, #00a79a); border-radius: .7cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; box-shadow: inset 0 0 0 .1cqw rgba(255, 255, 255, .15); }
.fx-tv__call::before { content: ''; position: absolute; inset: -50% -10%; background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .25) 50%, transparent 60%); transform: translateX(-100%); }
.fx-tv__call.is-calling::before { animation: fxShine 1.1s ease-out 2; }
.fx-tv__call small { font-size: .8cqw; opacity: .9; letter-spacing: .04em; text-transform: uppercase; }
.fx-tv__call b { font-size: 3.4cqw; line-height: 1.05; letter-spacing: .02em; font-family: var(--font-display, inherit); }
.fx-tv__call em { font-style: normal; font-size: 1.25cqw; font-weight: 700; background: rgba(255, 255, 255, .2); padding: .1em .7em; border-radius: 99px; }
.fx-tv__call.is-calling { animation: fxFlash .5s ease-in-out 4 alternate; }
.fx-tv__call.is-calling b { animation: fxPop .5s cubic-bezier(.2, .7, .2, 1.4); }
.fx-tv__bell { position: absolute; top: .5cqw; right: .6cqw; width: 1.6cqw; height: 1.6cqw; }
.fx-tv__bell::before { content: ''; position: absolute; inset: 22%; background: #fff; clip-path: polygon(50% 0, 70% 12%, 80% 60%, 100% 80%, 0 80%, 20% 60%, 30% 12%); opacity: .9; }
.fx-tv__bell i { position: absolute; inset: 0; border: .16cqw solid rgba(255, 255, 255, .85); border-radius: 50%; opacity: 0; }
.fx-tv__call.is-calling .fx-tv__bell i { animation: fxRing 1.2s ease-out 2; }
.fx-tv__call.is-calling .fx-tv__bell i:nth-child(2) { animation-delay: .25s; }
.fx-tv__call.is-calling .fx-tv__bell i:nth-child(3) { animation-delay: .5s; }
.fx-tv__side { display: flex; flex-direction: column; gap: .5cqw; }
.fx-tv__count, .fx-tv__next { flex: 1; background: rgba(255, 255, 255, .07); border-radius: .6cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: inset 0 0 0 .08cqw rgba(255, 255, 255, .06); }
.fx-tv__count b { font-size: 2.3cqw; line-height: 1; color: #5ee6d0; font-family: var(--font-display, inherit); transition: transform .3s; }
.fx-tv__count small, .fx-tv__next small { font-size: .75cqw; opacity: .8; }
.fx-tv__next span { font-size: 1.1cqw; font-weight: 700; }
.fx-tv__ticker { position: absolute; left: .7cqw; right: .7cqw; bottom: .5cqw; height: 1.2cqw; overflow: hidden; border-radius: .3cqw; background: rgba(255, 255, 255, .06); font-size: .72cqw; line-height: 1.2cqw; color: #c3e9ef; white-space: nowrap; }
.fx-tv__ticker span { display: inline-block; padding-left: 100%; animation: fxTicker 18s linear infinite; }
.fx-tag--tv { left: 50%; top: 100%; transform: translateX(-50%); margin-top: 1.4cqw; }
.fx[data-step="3"] .fx-tag--tv { transform: translateX(-50%) scale(1.06); }

/* ---------- Chaises ---------- */
.fx-chairs { position: absolute; left: 27%; width: 40%; top: 58%; height: 22%; }
.fx-chairs::before { content: ''; position: absolute; left: 0; right: 0; bottom: 22%; height: 5%; background: var(--fx-chair-2); border-radius: .3cqw; opacity: .7; }
.fx-chairs i { position: absolute; bottom: 0; width: 12%; height: 62%; }
.fx-chairs i::before { content: ''; position: absolute; left: 6%; right: 6%; bottom: 34%; height: 18%; background: linear-gradient(180deg, var(--fx-chair), var(--fx-chair-2)); border-radius: .5cqw; box-shadow: 0 .3cqw .5cqw rgba(0, 0, 0, .12); }
.fx-chairs i::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 52%; height: 48%; background: linear-gradient(180deg, var(--fx-chair), var(--fx-chair-2)); border-radius: .7cqw .7cqw .2cqw .2cqw; opacity: .92; }
.fx-chairs i:nth-child(1) { left: 2%; } .fx-chairs i:nth-child(2) { left: 18%; } .fx-chairs i:nth-child(3) { left: 34%; }
.fx-chairs i:nth-child(4) { left: 52%; } .fx-chairs i:nth-child(5) { left: 68%; } .fx-chairs i:nth-child(6) { left: 84%; }
.fx-tag--wait { left: 50%; bottom: -30%; transform: translateX(-50%); }
.fx[data-step="2"] .fx-tag--wait { transform: translateX(-50%) scale(1.06); }

/* ---------- Cabinet ---------- */
.fx-room { position: absolute; left: 70%; right: 2%; top: 9%; bottom: 7%; background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .25)); border: .3cqw solid rgba(0, 124, 145, .22); border-bottom: 0; border-radius: 1cqw 1cqw 0 0; box-shadow: inset 0 -6cqw 6cqw -6cqw rgba(0, 0, 0, .08); }
:root[data-theme="dark"] .fx-room { background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fx-room { background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); } }
.fx-room__sign { position: absolute; left: 6%; top: 4%; font-size: 1cqw; font-weight: 700; color: #fff; background: #005B66; padding: .3em .8em; border-radius: .4cqw; box-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .15); }
.fx-room__frame { position: absolute; right: 8%; top: 6%; width: 22%; height: 18%; border-radius: .3cqw; background: linear-gradient(135deg, #e0f4f7, #c3e7ec); border: .25cqw solid #fff; box-shadow: 0 .3cqw .7cqw rgba(0, 0, 0, .1); }
.fx-room__frame i { position: absolute; inset: 22%; background: #007C91; clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%); opacity: .8; }
.fx-room__door { position: absolute; left: 4%; bottom: 0; width: 22%; height: 64%; background: #dfecef; border: .22cqw solid #9fbcc4; border-bottom: 0; border-radius: .4cqw .4cqw 0 0; perspective: 40cqw; }
.fx-room__door i { position: absolute; inset: 0; background: linear-gradient(90deg, #8fb3bb, #b2cfd5); transform-origin: left center; transition: transform .8s cubic-bezier(.2, .7, .2, 1); box-shadow: inset -.3cqw 0 .5cqw rgba(0, 0, 0, .08); }
.fx-room__door i::after { content: ''; position: absolute; right: 10%; top: 50%; width: .7cqw; height: .25cqw; border-radius: .2cqw; background: #3d5961; }
.fx-room.is-open .fx-room__door i { transform: rotateY(-72deg); }
/* Médecin assis derrière le bureau */
.fx-doc { position: absolute; right: 9%; bottom: 15%; width: 16%; height: 42%; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.fx-room.is-greet .fx-doc { transform: translateY(-4%); }
.fx-doc__chair { position: absolute; left: -12%; right: -12%; top: 20%; bottom: 8%; background: linear-gradient(180deg, #2f4b55, #22383f); border-radius: 1.4cqw 1.4cqw .4cqw .4cqw; }
.fx-doc__body { position: absolute; left: 4%; right: 4%; top: 34%; bottom: 0; background: linear-gradient(180deg, #ffffff, #e9f1f3); border-radius: 1.8cqw 1.8cqw .4cqw .4cqw; box-shadow: inset 0 0 0 .12cqw #cfdde3; }
.fx-doc__body::before { content: ''; position: absolute; left: 38%; right: 38%; top: 0; height: 30%; background: #4aa3b0; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.fx-doc__steth { position: absolute; left: 26%; top: 10%; width: 48%; height: 46%; border: .22cqw solid #1d3540; border-top: 0; border-radius: 0 0 50% 50%; }
.fx-doc__steth::after { content: ''; position: absolute; right: -14%; bottom: -14%; width: .7cqw; height: .7cqw; border-radius: 50%; background: #9aa8ad; border: .12cqw solid #1d3540; }
.fx-doc__badge { position: absolute; left: 14%; top: 34%; width: 18%; height: 12%; background: #007C91; border-radius: .15cqw; }
.fx-doc__arm { position: absolute; left: -10%; top: 50%; width: 30%; height: 12%; background: #f1f6f7; border-radius: 1cqw; transform-origin: right center; box-shadow: inset 0 0 0 .1cqw #cfdde3; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.fx-room.is-greet .fx-doc__arm { transform: rotate(48deg) translateX(-10%); }
.fx-doc__head { position: absolute; left: 25%; right: 25%; top: 0; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #a06a47, #7a4a2e); box-shadow: inset 0 -.4cqw 0 rgba(0, 0, 0, .12); }
.fx-doc__hair { position: absolute; left: -4%; right: -4%; top: -8%; height: 46%; background: #1f1410; border-radius: 50% 50% 30% 30% / 70% 70% 30% 30%; }
.fx-desk { position: absolute; right: 2%; bottom: 0; width: 66%; height: 24%; }
.fx-desk__top { position: absolute; left: 0; right: 0; top: 0; height: 12%; background: linear-gradient(180deg, var(--fx-wood), var(--fx-wood-2)); border-radius: .35cqw; box-shadow: 0 .3cqw .6cqw rgba(0, 0, 0, .15); }
.fx-desk__front { position: absolute; left: 6%; right: 6%; top: 12%; height: 58%; background: linear-gradient(180deg, color-mix(in srgb, var(--fx-wood) 70%, #fff), var(--fx-wood)); border-radius: 0 0 .4cqw .4cqw; box-shadow: inset 0 .2cqw .4cqw rgba(0, 0, 0, .1); }
.fx-desk::after { content: ''; position: absolute; left: 9%; right: 9%; top: 70%; bottom: 0; border-left: .45cqw solid var(--fx-wood-2); border-right: .45cqw solid var(--fx-wood-2); }
.fx-laptop { position: absolute; left: 3%; width: 46%; bottom: 88%; height: 105%; }
.fx-laptop__screen { position: absolute; inset: 0 0 12% 0; background: linear-gradient(160deg, var(--fx-dev-2), var(--fx-dev)); border-radius: .5cqw; padding: .45cqw .55cqw; display: flex; flex-direction: column; gap: .2cqw; color: #fff; overflow: hidden; box-shadow: 0 .5cqw 1cqw rgba(0, 0, 0, .25); transition: box-shadow .4s; }
.fx-laptop__screen small { display: flex; align-items: center; gap: .25cqw; font-size: .6cqw; color: #9fe7ef; font-weight: 700; }
.fx-laptop__screen small i { width: .6cqw; height: .6cqw; background: #00BFA6; clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%); }
.fx-laptop__screen b { font-size: .85cqw; line-height: 1.15; }
.fx-laptop__screen span { font-size: .6cqw; color: #c3d2da; }
.fx-laptop__lines { display: flex; flex-direction: column; gap: .2cqw; margin-top: auto; }
.fx-laptop__lines i { display: block; height: .3cqw; border-radius: .2cqw; background: rgba(255, 255, 255, .15); }
.fx-laptop__lines i:nth-child(1) { width: 90%; } .fx-laptop__lines i:nth-child(2) { width: 70%; } .fx-laptop__lines i:nth-child(3) { width: 80%; }
.fx-room.is-ready .fx-laptop__lines i { background: linear-gradient(90deg, #00BFA6, rgba(0, 191, 166, .3)); animation: fxLoad .9s ease-out both; }
.fx-room.is-ready .fx-laptop__lines i:nth-child(2) { animation-delay: .15s; } .fx-room.is-ready .fx-laptop__lines i:nth-child(3) { animation-delay: .3s; }
.fx-laptop::after { content: ''; position: absolute; left: -8%; right: -8%; bottom: 0; height: 13%; background: linear-gradient(180deg, #8aa6ad, #5f7d85); border-radius: 0 0 .5cqw .5cqw; }
.fx-room.is-ready .fx-laptop__screen { box-shadow: 0 0 0 .18cqw #00BFA6, 0 .6cqw 1.6cqw rgba(0, 191, 166, .35); }
.fx-tag--room { right: 4%; top: -8%; }

/* ---------- Personnages ---------- */
.fx-people { position: absolute; inset: 0; z-index: 2; }
.fx-p { position: absolute; width: 5.2%; height: 27%; left: 0; top: 0; transform: translate(-50%, -100%); transition: left var(--fx-t, 1.6s) cubic-bezier(.45, .05, .55, .95), top var(--fx-t, 1.6s) cubic-bezier(.45, .05, .55, .95), opacity .6s; }
.fx-p > i { position: absolute; display: block; }
.fx-p__shadow { left: 2%; right: 2%; bottom: -3%; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .28), transparent); }
.fx-p__head { left: 27%; width: 46%; aspect-ratio: 1; border-radius: 50%; top: 0; background: radial-gradient(circle at 38% 35%, color-mix(in srgb, var(--skin) 75%, #fff), var(--skin) 60%); box-shadow: inset 0 -.25cqw 0 rgba(0, 0, 0, .12); }
.fx-p__hair { position: absolute; left: -6%; right: -6%; top: -8%; height: 50%; background: var(--hair, #1b120e); border-radius: 50% 50% 35% 35% / 75% 75% 25% 25%; }
.fx-p--2 .fx-p__hair, .fx-p--5 .fx-p__hair { height: 38%; left: 2%; right: 2%; }
.fx-p--3 .fx-p__hair, .fx-p--6 .fx-p__hair { height: 72%; border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; }
.fx-p__neck { left: 43%; width: 14%; top: 36%; height: 6%; background: var(--skin); }
.fx-p__body { left: 14%; right: 14%; top: 39%; height: 34%; border-radius: 1.4cqw 1.4cqw .4cqw .4cqw; background: linear-gradient(180deg, color-mix(in srgb, var(--cloth) 88%, #fff), var(--cloth) 55%, color-mix(in srgb, var(--cloth) 80%, #000)); }
.fx-p__arm { top: 41%; width: 16%; height: 30%; border-radius: 1cqw; background: color-mix(in srgb, var(--cloth) 82%, #000); transform-origin: top center; }
.fx-p__arm--l { left: 4%; } .fx-p__arm--r { right: 4%; }
.fx-p__leg { top: 70%; width: 25%; height: 30%; background: var(--pants, #2f3f49); border-radius: .2cqw .2cqw .5cqw .5cqw; transform-origin: top center; }
.fx-p__leg--l { left: 24%; } .fx-p__leg--r { right: 24%; }
.fx-p__leg::after { content: ''; position: absolute; left: -10%; right: -25%; bottom: -6%; height: 16%; background: #1a2328; border-radius: .4cqw .6cqw .2cqw .2cqw; }
.fx-p.is-left .fx-p__leg::after { left: -25%; right: -10%; }
.fx-p.is-walking .fx-p__leg--l, .fx-p.is-walking .fx-p__arm--r { animation: fxSwing .42s ease-in-out infinite alternate; }
.fx-p.is-walking .fx-p__leg--r, .fx-p.is-walking .fx-p__arm--l { animation: fxSwing .42s ease-in-out infinite alternate-reverse; }
.fx-p.is-walking .fx-p__head, .fx-p.is-walking .fx-p__body, .fx-p.is-walking .fx-p__neck { animation: fxBob .42s ease-in-out infinite alternate; }
.fx-p.is-seated { height: 21%; }
.fx-p.is-seated .fx-p__body { height: 38%; }
.fx-p.is-seated .fx-p__leg { top: 76%; height: 20%; transform: none; }
.fx-p.is-seated .fx-p__body::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: -14%; height: 26%; border-radius: .5cqw; background: var(--pants, #2f3f49); }
.fx-p.is-seated .fx-p__arm { transform: rotate(-18deg); height: 26%; }
.fx-p.is-seated .fx-p__shadow { bottom: -6%; }
.fx-p__ticket { position: absolute; left: 50%; bottom: 106%; transform: translateX(-50%); font-size: .85cqw; font-weight: 800; background: #fff; color: #0d1b24; border: .12cqw solid #cfdde3; border-radius: .35cqw; padding: .08em .45em; white-space: nowrap; opacity: 0; transition: opacity .4s, background-color .3s, color .3s; box-shadow: 0 .2cqw .5cqw rgba(0, 0, 0, .12); }
.fx-p__ticket::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: .3cqw solid transparent; border-top-color: #fff; }
.fx-p.has-ticket .fx-p__ticket { opacity: 1; }
.fx-p.is-called .fx-p__ticket { background: #00BFA6; color: #fff; border-color: #00BFA6; animation: fxPulse .6s ease-in-out 3 alternate; }
.fx-p.is-called .fx-p__ticket::after { border-top-color: #00BFA6; }
.fx-p.is-gone { opacity: 0; }
.fx-p--1 { --skin: #6b3f26; --cloth: #e76f51; --pants: #34495e; } .fx-p--2 { --skin: #8d5a3b; --cloth: #2a9d8f; --pants: #2c3e50; }
.fx-p--3 { --skin: #5a3420; --cloth: #7b6cf6; --pants: #3b3a55; --hair: #2a1a12; } .fx-p--4 { --skin: #a46b45; --cloth: #f4a261; --pants: #33454f; }
.fx-p--5 { --skin: #4b2b1a; --cloth: #3d7ea6; --pants: #263238; } .fx-p--6 { --skin: #7a4a2e; --cloth: #d16ba5; --pants: #3a2f45; --hair: #2b1610; }

/* Notification « arrivée enregistrée » */
.fx-toast { position: absolute; left: 50%; bottom: 3.5%; transform: translate(-50%, 1.5cqw); background: var(--surface, #fff); color: var(--ink, #0d1b24); border: 1px solid var(--line, #dfe7ec); border-left: .4cqw solid #00BFA6; border-radius: .7cqw; padding: .55cqw 1cqw; box-shadow: 0 1cqw 2.4cqw -.4cqw rgba(0, 0, 0, .3); display: flex; flex-direction: column; font-size: .85cqw; opacity: 0; transition: opacity .45s, transform .45s cubic-bezier(.2, .7, .2, 1); z-index: 5; white-space: nowrap; }
.fx-toast b { font-size: .95cqw; }
.fx-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Légende des étapes */
.fx-steps { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; counter-reset: fx; }
.fx-steps li { position: relative; padding: 14px 14px 14px 54px; border-radius: 14px; background: var(--surface, #fff); border: 1px solid var(--line, #dfe7ec); transition: border-color .35s, box-shadow .35s, transform .35s; overflow: hidden; }
.fx-steps li::before { counter-increment: fx; content: counter(fx); position: absolute; left: 14px; top: 14px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--brand-light, #e0f4f7); color: var(--brand, #007C91); transition: background-color .35s, color .35s; }
.fx-steps li::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--brand, #007C91), var(--mint, #00BFA6)); }
.fx-steps b { display: block; color: var(--ink, #0d1b24); }
.fx-steps span { display: block; font-size: .9rem; color: var(--muted, #5b6b77); margin-top: 2px; }
.fx[data-step="1"] .fx-steps [data-step="1"], .fx[data-step="2"] .fx-steps [data-step="2"], .fx[data-step="3"] .fx-steps [data-step="3"], .fx[data-step="4"] .fx-steps [data-step="4"] { border-color: var(--brand, #007C91); box-shadow: var(--shadow); transform: translateY(-3px); }
.fx[data-step="1"] .fx-steps [data-step="1"]::before, .fx[data-step="2"] .fx-steps [data-step="2"]::before, .fx[data-step="3"] .fx-steps [data-step="3"]::before, .fx[data-step="4"] .fx-steps [data-step="4"]::before { background: var(--brand, #007C91); color: #fff; }
.fx.is-live[data-step="1"] .fx-steps [data-step="1"]::after, .fx.is-live[data-step="2"] .fx-steps [data-step="2"]::after, .fx.is-live[data-step="3"] .fx-steps [data-step="3"]::after, .fx.is-live[data-step="4"] .fx-steps [data-step="4"]::after { animation: fxBar 3.2s linear forwards; }
@media (max-width: 900px) { .fx-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .fx-steps { grid-template-columns: 1fr; } .fx-tag { font-size: 1.9cqw; } }

/* Section d'accueil */
.lp-flowsec__more { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }

@keyframes fxBlink { 50% { opacity: 0; } }
@keyframes fxSwing { from { transform: rotate(20deg); } to { transform: rotate(-20deg); } }
@keyframes fxBob { from { transform: translateY(0); } to { transform: translateY(-5%); } }
@keyframes fxFlash { from { filter: none; } to { filter: brightness(1.3); box-shadow: 0 0 0 .4cqw rgba(94, 230, 208, .5); } }
@keyframes fxShine { to { transform: translateX(100%); } }
@keyframes fxPop { 0% { transform: scale(.7); opacity: .2; } 100% { transform: scale(1); opacity: 1; } }
@keyframes fxRing { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes fxPulse { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.22); } }
@keyframes fxPulseBtn { 0%, 100% { box-shadow: 0 .25cqw .6cqw rgba(0, 191, 166, .4); } 50% { box-shadow: 0 0 0 .5cqw rgba(0, 191, 166, .18); } }
@keyframes fxTicker { to { transform: translateX(-100%); } }
@keyframes fxLoad { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
@keyframes fxBar { from { width: 0; } to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .fx *, .fx *::before, .fx *::after { animation: none !important; transition: none !important; }
}