/* ===== Les Friands (histoire temporaire d'octobre 2026) : carte, écrans, cinématiques =====
   Fichier dédié, chargé après style.css. Préfixe fd-*. Briques rouges de Manhattan, enseigne du café,
   canapé orange, grandes tasses fumantes, murs violets et cadre jaune de la porte. Décors 100 % CSS/emojis,
   aucun visuel officiel. Le style de base décrit l'état final ; les animations partent de l'état initial. */

/* --- Carte du hub : façade de briques, fenêtre éclairée, enseigne, canapé orange et tasse fumante --- */
.saga-friends { background: linear-gradient(180deg, #7a3424 0%, #4a1f18 55%, #1e0f0c 100%); color: var(--texte); }
.saga-friends .saga-nom { color: #ffd76a; text-shadow: 0 0 8px #f2a33a99, 0 2px 6px #000; }
.fd-carte, .fd-carte > span { position: absolute; display: block; }
.fd-carte { inset: 0; overflow: hidden; }
.fd-carte-briques { inset: 0 0 auto 0; height: 104px; background: linear-gradient(#5a2414 2px, transparent 2px) 0 0 / 100% 12px, linear-gradient(90deg, #5a2414 2px, transparent 2px) 0 0 / 24px 12px, linear-gradient(90deg, #5a2414 2px, transparent 2px) 12px 6px / 24px 12px, #8a3e28; opacity: 0.85; }
.fd-carte > .fd-carte-fenetre { right: 8%; top: 22px; width: 34%; height: 46px; display: flex; gap: 3px; padding: 3px; box-sizing: border-box; background: #2a1810; }
.fd-carte-fenetre i { flex: 1; background: linear-gradient(180deg, #ffe7a8, #f2b45a); box-shadow: inset 0 0 8px #c9802a; }
.fd-carte > .fd-carte-enseigne { left: 6%; top: 8px; padding: 2px 7px; border-radius: 4px; background: #24452f; color: #fff3d0; font: italic 800 0.72rem Georgia, serif; letter-spacing: 0.04em; box-shadow: 0 0 10px #7dffb055; animation: fd-neon-carte 3s ease-in-out infinite; }
@keyframes fd-neon-carte { 0%, 100% { box-shadow: 0 0 10px #7dffb055; } 50% { box-shadow: 0 0 16px #7dffb0aa; } }
.fd-carte-canape { left: 8%; top: 62px; width: 46%; height: 30px; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, #e2702a 0 45%, #f08a3c 45% 80%, #b9531b 80%); box-shadow: -6px 6px 0 -2px #d4621f, 6px 6px 0 -2px #d4621f; }
.fd-carte-tasse { left: 58%; top: 70px; width: 20px; height: 18px; border-radius: 0 0 8px 8px; background: #fffaf0; box-shadow: 6px 2px 0 -3px #fffaf0; }
.fd-carte-tasse i { position: absolute; bottom: 100%; width: 4px; height: 14px; border-radius: 50%; background: #ffffffaa; filter: blur(1px); animation: fd-vapeur-carte 2.4s ease-in-out infinite; }
.fd-carte-tasse i:nth-child(1) { left: 3px; } .fd-carte-tasse i:nth-child(2) { left: 8px; animation-delay: 0.8s; } .fd-carte-tasse i:nth-child(3) { left: 13px; animation-delay: 1.6s; }
@keyframes fd-vapeur-carte { from { transform: translateY(4px) scaleY(0.6); opacity: 0; } 40% { opacity: 0.9; } to { transform: translateY(-12px) scaleY(1.2); opacity: 0; } }

/* --- Écrans de départ et de jeu : murs violets de l'appartement, cadre jaune du judas --- */
.hp-scene[data-theme="friends"], .hi-scene[data-theme="friends"] { border-color: #b07ad8; background: radial-gradient(ellipse at 50% 0%, #8a5cc455, transparent 60%), linear-gradient(180deg, #4a2a6a 0%, #3a2058 55%, #22123a 100%); }
.hp-scene[data-theme="friends"]::before, .hi-scene[data-theme="friends"]::before { content: ""; position: absolute; right: 18px; top: 14px; width: 44px; height: 32px; z-index: 0; pointer-events: none; border: 4px solid #f2c94c; border-radius: 4px; background: radial-gradient(circle, #1a1024 0 4px, transparent 5px); opacity: 0.8; }
[data-theme="friends"] .hp-ciel { display: none; }
[data-theme="friends"] .hp-parchemin { background: linear-gradient(180deg, #fff8ea, #f1e4c8); border-top: 4px solid #e2702a; }
[data-theme="friends"] .hp-barre > span { background: linear-gradient(90deg, #e2702a, #ffd76a); }
[data-theme="friends"] .rayon { display: none; }
[data-theme="friends"] .hi-chapitres li { background: #2a1640d9; }
[data-theme="friends"] .hi-niveau, [data-theme="friends"] .hi-sur-titre { color: #ffd76a; }
[data-theme="friends"] .hi-titre { font-family: Georgia, "Times New Roman", serif; }
[data-theme="friends"] .hi-infos, [data-theme="friends"] .hi-retour, [data-theme="friends"] .hp-sauver { color: var(--texte); }

/* --- Éléments communs des cinématiques --- */
.fd-ami { position: absolute; width: 6%; height: 30%; }
.fd-ami .tete { position: absolute; left: 24%; top: 0; width: 52%; aspect-ratio: 1; border-radius: 50%; background: #eac4a0; box-shadow: inset 0 5px 0 #5a3a22; }
.fd-ami .corps { position: absolute; left: 6%; right: 6%; top: 28%; bottom: 0; border-radius: 40% 40% 10% 10%; background: var(--c); }
.fd-canape { position: absolute; }
.fd-canape .dossier { position: absolute; left: 6%; right: 6%; top: 0; height: 56%; border-radius: 18px 18px 6px 6px; background: linear-gradient(180deg, #e2702a, #c95e1e); }
.fd-canape .assise { position: absolute; left: 3%; right: 3%; bottom: 10%; height: 40%; border-radius: 10px; background: linear-gradient(180deg, #f39448, #e2702a); box-shadow: 0 8px 0 -2px #8a3f12; }
.fd-canape .accoudoir { position: absolute; bottom: 8%; width: 11%; height: 64%; border-radius: 12px 12px 6px 6px; background: #d4621f; }
.fd-canape .accoudoir.g { left: 0; } .fd-canape .accoudoir.d { right: 0; }
.fd-pluie { inset: 0; overflow: hidden; pointer-events: none; }
.fd-pluie i { position: absolute; left: calc(var(--i) * 5.5% + 1%); top: 40%; width: 1px; height: 14%; background: linear-gradient(transparent, #cfe3ffbb); animation: fd-pluie calc(0.55s + var(--i) * 0.03s) linear calc(var(--i) * -0.17s) infinite; }
@keyframes fd-pluie { from { top: -20%; } to { top: 110%; } }
.fd-mur-cafe { inset: 0; background: linear-gradient(#5a2e1e 2px, transparent 2px) 0 0 / 100% 18px, linear-gradient(90deg, #5a2e1e 2px, transparent 2px) 0 0 / 36px 18px, linear-gradient(90deg, #5a2e1e 2px, transparent 2px) 18px 9px / 36px 18px, #8a4a32; }
.fd-mur-cafe.sombre { filter: brightness(0.42) saturate(0.7); }
.fd-baie { right: 4%; top: 12%; width: 28%; height: 40%; display: flex; gap: 4%; padding: 1%; box-sizing: border-box; background: #3a2214; }
.fd-baie i { flex: 1; background: linear-gradient(180deg, #a8c8e8, #e8d8b8); }
.fd-baie.nuit i { background: linear-gradient(180deg, #0b1230, #1c2550); }

/* 1. Arrivée sous la pluie : taxi jaune, une mariée court vers le café dont l'enseigne s'allume. */
.fd-nuit { inset: 0; background: linear-gradient(180deg, #070b1f 0%, #141c40 70%, #1c2550 100%); }
.fd-immeubles { left: 0; right: 0; bottom: 22%; height: 62%; display: flex; align-items: flex-end; gap: 1%; }
.fd-immeubles i { flex: 1; height: calc(45% + var(--i) * 9%); background: radial-gradient(#ffd76a77 1.5px, transparent 2px) 0 0 / 12px 14px, #141a33; }
.fd-immeubles i:nth-child(even) { height: calc(85% - var(--i) * 7%); }
.fd-trottoir { left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, #3a3f52, #1a1d28); }
.fd-facade { right: 5%; bottom: 22%; width: 40%; height: 48%; background: linear-gradient(#5a2414 2px, transparent 2px) 0 0 / 100% 14px, linear-gradient(90deg, #5a2414 2px, transparent 2px) 0 0 / 28px 14px, #8a3e28; }
.fd-facade .vitrine { position: absolute; left: 6%; top: 34%; width: 54%; height: 60%; background: linear-gradient(180deg, #ffe7a8, #f2b45a); box-shadow: 0 0 30px #f2b45a88; border: 4px solid #3a2214; box-sizing: border-box; }
.fd-facade .porte { position: absolute; right: 8%; bottom: 0; width: 26%; height: 72%; background: linear-gradient(180deg, #ffe7a8 0 40%, #4a2a18 40%); border: 4px solid #3a2214; box-sizing: border-box; }
.fd-facade .neon { position: absolute; left: 6%; right: 6%; top: 6%; text-align: center; color: #c9ffe0; font: italic 900 clamp(0.7rem, 2.6vw, 1.5rem) Georgia, serif; text-shadow: 0 0 6px #7dffb0, 0 0 16px #2ecc71; animation: fd-neon 1.6s steps(1) 0.6s both; }
@keyframes fd-neon { 0% { opacity: 0.1; } 20% { opacity: 1; } 30% { opacity: 0.2; } 45% { opacity: 1; } 55% { opacity: 0.3; } 70%, 100% { opacity: 1; } }
.fd-taxi { left: -22%; bottom: 8%; width: 18%; height: 11%; transform: translateX(800%); animation: fd-taxi 2.8s linear 0.2s both; }
@keyframes fd-taxi { from { transform: none; } to { transform: translateX(800%); } }
.fd-taxi .carrosserie { position: absolute; inset: 0 0 26% 0; border-radius: 30% 40% 8% 8% / 60% 60% 8% 8%; background: linear-gradient(180deg, #2a3048 0 30%, #f6c21c 30%); }
.fd-taxi .roue { position: absolute; bottom: 0; width: 18%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #888 0 30%, #111 34%); }
.fd-taxi .r1 { left: 12%; } .fd-taxi .r2 { right: 12%; }
.fd-mariee { left: 74%; bottom: 20%; width: 5%; height: 26%; opacity: 0; animation: fd-court 3.2s ease-in 0.9s both; }
@keyframes fd-court { from { opacity: 1; transform: translateX(-1250%); } 10% { transform: translateX(-1150%) translateY(-3%); } 20% { transform: translateX(-1000%); } 30% { transform: translateX(-850%) translateY(-3%); } 40% { transform: translateX(-700%); } 50% { transform: translateX(-560%) translateY(-3%); } 60% { transform: translateX(-420%); } 70% { transform: translateX(-280%) translateY(-3%); } 85% { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(40%); } }
.fd-mariee .tete { position: absolute; left: 26%; top: 0; width: 48%; aspect-ratio: 1; border-radius: 50%; background: #eac4a0; box-shadow: inset 0 5px 0 #8a5a2a, 0 -2px 0 2px #ffffffaa; }
.fd-mariee .robe { position: absolute; left: -10%; right: -10%; top: 24%; bottom: 0; background: linear-gradient(180deg, #ffffff, #e8eef6); clip-path: polygon(38% 0, 62% 0, 70% 34%, 100% 100%, 0 100%, 30% 34%); }

/* 2. Au café : canapé orange, tasses fumantes, Fébé à la guitare. */
.fd-enseigne-cafe { left: 50%; top: 5%; transform: translateX(-50%); padding: 0.2em 0.8em; border-radius: 8px; background: #24452f; color: #fff3d0; font: italic 900 clamp(0.8rem, 2.8vw, 1.6rem) Georgia, serif; box-shadow: 0 0 18px #7dffb044; white-space: nowrap; }
.fd-canape.cafe { left: 16%; bottom: 6%; width: 42%; height: 32%; }
.fd-table { left: 30%; bottom: 3%; width: 16%; height: 8%; border-radius: 4px; background: #6a4026; }
.fd-table .tasse { position: absolute; bottom: 100%; width: 20%; height: 90%; border-radius: 0 0 30% 30%; background: #fffaf0; }
.fd-table .t1 { left: 18%; } .fd-table .t2 { left: 60%; background: #ffd76a; }
.fd-table .vapeur { position: absolute; bottom: 190%; left: 14%; width: 70%; height: 140%; }
.fd-table .vapeur i { position: absolute; bottom: 0; width: 12%; height: 100%; border-radius: 50%; background: #ffffffaa; filter: blur(2px); animation: fd-vapeur 2.4s ease-in-out infinite; }
.fd-table .vapeur i:nth-child(1) { left: 10%; } .fd-table .vapeur i:nth-child(2) { left: 45%; animation-delay: 0.8s; } .fd-table .vapeur i:nth-child(3) { left: 78%; animation-delay: 1.6s; }
@keyframes fd-vapeur { from { transform: translateY(20%) scaleY(0.6); opacity: 0; } 40% { opacity: 0.9; } to { transform: translateY(-60%) scaleY(1.2); opacity: 0; } }
.fd-ami.musicienne { left: 70%; bottom: 6%; width: 7%; height: 34%; }
.fd-ami.musicienne .tete { box-shadow: inset 0 6px 0 #f2d27a, -3px 2px 0 1px #f2d27a, 3px 2px 0 1px #f2d27a; }
.fd-guitare { left: 66%; bottom: 11%; width: 11%; height: 11%; border-radius: 45% 55% 50% 50%; background: radial-gradient(circle at 40% 50%, #2a1408 0 12%, #c27a32 14% 60%, #8a4a1a 62%); transform-origin: 30% 50%; animation: fd-gratte 0.35s ease-in-out infinite alternate; }
.fd-guitare::after { content: ""; position: absolute; left: 80%; top: 42%; width: 110%; height: 14%; background: #5a3418; }
@keyframes fd-gratte { from { transform: rotate(-18deg); } to { transform: rotate(-14deg); } }
.fd-notes { left: 64%; bottom: 40%; width: 24%; height: 36%; }
.fd-notes i { position: absolute; bottom: 0; color: #ffd76a; font-style: normal; font-size: clamp(1rem, 3vw, 1.8rem); text-shadow: 0 0 8px #f2a33a; opacity: 0; animation: fd-note 1.8s ease-out calc(1s + var(--n) * 0.5s) 3 both; }
.fd-notes i:nth-child(1) { left: 0; --n: 0; } .fd-notes i:nth-child(2) { left: 40%; --n: 1; } .fd-notes i:nth-child(3) { left: 75%; --n: 2; }
@keyframes fd-note { from { opacity: 0; transform: none; } 30% { opacity: 1; } to { opacity: 0; transform: translate(-60%, -220%) rotate(-15deg); } }

/* 3. « PIVOTE ! » : le canapé reste coincé dans l'escalier, puis les ciseaux sortent. */
.fd-cage { inset: 0; background: linear-gradient(180deg, #e2d6bc 0%, #c9bb9a 100%); box-shadow: inset 0 0 80px #0006; }
.fd-marches { left: 0; right: 0; bottom: 0; height: 70%; background: linear-gradient(180deg, #9a7652, #6a4e32); clip-path: polygon(0 100%, 0 86%, 14% 86%, 14% 72%, 28% 72%, 28% 58%, 42% 58%, 42% 44%, 56% 44%, 56% 30%, 70% 30%, 70% 16%, 84% 16%, 84% 2%, 100% 2%, 100% 100%); }
.fd-rampe { left: 2%; width: 90%; bottom: 46%; height: 1.6%; background: #4a2e1a; transform: rotate(-23deg); transform-origin: 0 50%; }
.fd-canape.coince { left: 30%; bottom: 42%; width: 30%; height: 22%; transform: rotate(-24deg); animation: fd-coince 0.8s ease-in-out 0.6s 5 alternate both; }
.fd-canape.coince::after { content: ""; position: absolute; left: 50%; top: -6%; bottom: -6%; border-left: 3px dashed #fff; opacity: 1; animation: fd-apparait 0.4s ease-out 4.9s both; }
@keyframes fd-coince { from { transform: rotate(-34deg) translateY(-6%); } to { transform: rotate(-16deg) translateY(4%); } }
@keyframes fd-apparait { from { opacity: 0; } to { opacity: 1; } }
.fd-ami.porteur { width: 6%; height: 28%; animation: fd-effort 0.4s ease-in-out infinite alternate; }
.fd-ami.p1 { left: 20%; bottom: 22%; } .fd-ami.p2 { left: 62%; bottom: 52%; animation-delay: 0.2s; }
@keyframes fd-effort { from { transform: translateY(0); } to { transform: translateY(-4%) rotate(2deg); } }
.fd-cri { color: #c0392b; font: 900 clamp(1rem, 3.6vw, 2.2rem) Georgia, serif; text-shadow: 2px 2px 0 #fff; animation: fd-cri 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.fd-cri.c1 { left: 6%; top: 10%; transform: rotate(-8deg); animation-delay: 0.8s; }
.fd-cri.c2 { left: 38%; top: 4%; font-size: clamp(1.2rem, 4.4vw, 2.7rem); transform: rotate(4deg); animation-delay: 1.9s; }
.fd-cri.c3 { left: 64%; top: 16%; font-size: clamp(1.4rem, 5.2vw, 3.2rem); transform: rotate(-5deg); animation-delay: 3s; }
@keyframes fd-cri { from { opacity: 0; scale: 0.2; } to { opacity: 1; scale: 1; } }
.fd-ciseaux { left: 41%; bottom: 58%; font-size: clamp(1.4rem, 4.4vw, 2.6rem); animation: fd-pop 0.5s ease-out 4.6s both, fd-coupe 0.25s ease-in-out 5.1s 6 alternate; }
@keyframes fd-pop { from { opacity: 0; scale: 0.2; } 70% { scale: 1.25; } to { opacity: 1; scale: 1; } }
@keyframes fd-coupe { from { rotate: -12deg; } to { rotate: 12deg; } }

/* 4. Thanksgiving chez Monique : porte violette, table dressée, la dinde atterrit sur sa tête. */
.fd-salle { inset: 0; background: linear-gradient(180deg, #8a5cc4 0 70%, #6a4a2a 70%); }
.fd-porte-violette { left: 5%; bottom: 30%; width: 15%; height: 62%; background: linear-gradient(90deg, #5e3592, #7a4ab4 50%, #5e3592); border: 4px solid #3a1f5e; box-sizing: border-box; }
.fd-porte-violette .judas { position: absolute; left: 50%; top: 20%; width: 40%; height: 16%; transform: translateX(-50%); border: 4px solid #f2c94c; border-radius: 4px; background: radial-gradient(circle, #1a1024 0 18%, transparent 22%); }
.fd-nappe { left: 24%; right: 4%; bottom: 8%; height: 24%; border-radius: 8px; background: linear-gradient(180deg, #f6eedb, #e4d6b6); box-shadow: 0 6px 0 #8a6a3a; }
.fd-plats { left: 28%; right: 8%; bottom: 22%; height: 8%; display: flex; justify-content: space-around; align-items: center; }
.fd-plats i { width: 14%; height: 100%; border-radius: 50%; background: radial-gradient(ellipse, #fff 0 52%, #d8d0c0 56% 62%, transparent 66%); }
.fd-plats i:nth-child(2) { background: radial-gradient(ellipse, #e08a3a 0 40%, #c9732a 44% 52%, #fff 54% 62%, transparent 66%); }
.fd-bougies { left: 32%; right: 12%; bottom: 30%; height: 14%; display: flex; justify-content: space-between; }
.fd-bougies i { position: relative; width: 2%; height: 100%; background: #f6eedb; }
.fd-bougies i::after { content: ""; position: absolute; left: -60%; bottom: 100%; width: 220%; height: 34%; border-radius: 50% 50% 40% 40%; background: radial-gradient(#fff6b0, #f2a33a 60%, transparent 70%); animation: fd-flamme 0.6s ease-in-out infinite alternate; }
@keyframes fd-flamme { from { transform: scale(0.9) rotate(-4deg); } to { transform: scale(1.1) rotate(4deg); } }
.fd-monique { left: 50%; bottom: 26%; width: 11%; height: 48%; animation: fd-rire 0.3s ease-in-out 4.4s 8 alternate; }
@keyframes fd-rire { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.fd-monique .corps { position: absolute; left: 4%; right: 4%; top: 34%; bottom: 0; border-radius: 40% 40% 10% 10%; background: #c0392b; }
.fd-monique .tete { position: absolute; left: 24%; top: 14%; width: 52%; aspect-ratio: 1; border-radius: 50%; background: #eac4a0; box-shadow: inset 0 5px 0 #2a1a10, -4px 4px 0 0 #2a1a10, 4px 4px 0 0 #2a1a10; }
.fd-monique .lunettes { position: absolute; left: 28%; top: 24%; width: 44%; height: 6%; border-radius: 3px; background: #111; box-shadow: 0 0 0 2px #333; animation: fd-pop 0.4s ease-out 3.9s both; }
.fd-monique .dinde { position: absolute; left: 4%; top: -6%; width: 92%; height: 26%; border-radius: 50% 50% 38% 38%; background: radial-gradient(ellipse at 50% 70%, #d8884a, #9a5424 70%); box-shadow: inset 0 -4px 0 #7a3e18; animation: fd-coiffe 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) 3.5s both; }
.fd-monique .dinde::before, .fd-monique .dinde::after { content: ""; position: absolute; top: 18%; width: 22%; height: 52%; border-radius: 40%; background: linear-gradient(180deg, #fffaf0 0 22%, #b8632a 22%); }
.fd-monique .dinde::before { left: -10%; transform: rotate(-28deg); } .fd-monique .dinde::after { right: -10%; transform: rotate(28deg); }
@keyframes fd-coiffe { from { transform: translateY(-420%) rotate(-30deg); opacity: 0; } 20% { opacity: 1; } to { transform: none; opacity: 1; } }
.fd-rires { left: 30%; right: 20%; top: 8%; height: 30%; }
.fd-rires i { position: absolute; font-style: normal; font-size: clamp(1.2rem, 3.6vw, 2.2rem); animation: fd-pop 0.5s ease-out both; }
.fd-rires i:nth-child(1) { left: 0; top: 30%; animation-delay: 4.4s; } .fd-rires i:nth-child(2) { left: 45%; top: 0; animation-delay: 4.8s; } .fd-rires i:nth-child(3) { right: 0; top: 40%; animation-delay: 5.2s; }

/* 5. Victoire : la bande danse devant la fontaine, sous les lampadaires ; applaudissements et bannière. */
.fd-parc { inset: 0; background: radial-gradient(ellipse at 50% 100%, #2a5a3a 0 30%, transparent 31%), linear-gradient(180deg, #0b1230 0%, #1c2a5a 60%, #23472f 60%, #163020 100%); }
.fd-lampadaire { bottom: 22%; width: 1.2%; height: 50%; background: #23232c; }
.fd-lampadaire::after { content: ""; position: absolute; left: -200%; top: -6%; width: 500%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(#fff6c8, #ffd76a 50%, transparent 70%); box-shadow: 0 0 40px 14px #ffd76a55; }
.fd-lampadaire.l1 { left: 8%; } .fd-lampadaire.l2 { right: 8%; }
.fd-fontaine { left: 28%; right: 28%; bottom: 14%; height: 54%; }
.fd-fontaine .bassin { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; border-radius: 50% / 40%; background: linear-gradient(180deg, #c9d2dc, #7a8694); box-shadow: inset 0 6px 0 #9fd8ff88; }
.fd-fontaine .jet { position: absolute; bottom: 16%; width: 6%; height: 78%; border-radius: 50% 50% 0 0; background: linear-gradient(to top, #bfe6ffdd, #ffffff00); transform-origin: bottom; animation: fd-jet 0.7s ease-in-out infinite alternate; }
.fd-fontaine .j1 { left: 22%; height: 46%; animation-delay: 0.3s; } .fd-fontaine .j2 { left: 47%; } .fd-fontaine .j3 { left: 72%; height: 46%; animation-delay: 0.5s; }
@keyframes fd-jet { from { transform: scaleY(0.86); } to { transform: scaleY(1.04); } }
.fd-fontaine .gouttes { position: absolute; inset: 0 0 20% 0; }
.fd-fontaine .gouttes i { position: absolute; left: calc(10% + var(--i) * 8%); top: 20%; width: 1.4%; aspect-ratio: 1; border-radius: 50%; background: #dff3ff; animation: fd-goutte 1.2s ease-in calc(var(--i) * -0.13s) infinite; }
@keyframes fd-goutte { from { top: 10%; opacity: 1; } to { top: 92%; opacity: 0; } }
.fd-bande { inset: 0; }
.fd-ami.danseur { bottom: 4%; width: 7%; height: 34%; animation: fd-entre-bande 0.8s ease-out both, fd-danse 0.45s ease-in-out infinite alternate; }
.fd-ami.danseur::before { content: ""; position: absolute; left: -40%; top: -24%; width: 180%; height: 24%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: var(--c); filter: brightness(0.75); }
.fd-ami.d0 { left: 6%; animation-delay: 0.2s, 0s; } .fd-ami.d1 { left: 20%; animation-delay: 0.4s, 0.15s; } .fd-ami.d2 { left: 34%; animation-delay: 0.6s, 0.3s; }
.fd-ami.d3 { left: 58%; animation-delay: 0.8s, 0.05s; } .fd-ami.d4 { left: 72%; animation-delay: 1s, 0.2s; } .fd-ami.d5 { left: 86%; animation-delay: 1.2s, 0.35s; }
@keyframes fd-entre-bande { from { opacity: 0; translate: 0 30%; } to { opacity: 1; translate: 0 0; } }
@keyframes fd-danse { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-8%) rotate(4deg); } }
.fd-clap { left: 50%; top: 30%; transform: translateX(-50%); font-size: clamp(1rem, 3.4vw, 2rem); white-space: nowrap; animation: fd-clap 0.4s ease-out 0.8s 9 both; }
@keyframes fd-clap { from { scale: 1.25; } to { scale: 1; } }
.fd-banniere { left: 50%; top: 8%; max-width: 88%; transform: translateX(-50%); padding: 0.3em 0.8em; border: 2px solid #ffd76a; border-radius: 10px; background: #3a2058e6; color: #fff3d0; font: 900 clamp(0.85rem, 3vw, 1.6rem) Georgia, serif; text-shadow: 0 0 10px #f2a33a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: fd-banniere 0.9s ease-out 4.6s both; }
@keyframes fd-banniere { from { opacity: 0; transform: translate(-50%, -40%) scale(0.8); } to { opacity: 1; transform: translateX(-50%); } }

/* 6. Défaite : café fermé, canapé vide, pluie sur la vitre et « On était en pause ! ». */
.scene-fd-pause .fd-pluie { inset: auto; left: 68%; right: 4%; top: 18%; bottom: 36%; }
.fd-canape.vide { left: 12%; bottom: 6%; width: 44%; height: 30%; filter: brightness(0.6) saturate(0.7); }
.fd-tasse-renversee { left: 60%; bottom: 5%; width: 5%; height: 6%; border-radius: 0 30% 30% 0; background: #fffaf0; transform: rotate(-8deg); }
.fd-tasse-renversee::after { content: ""; position: absolute; left: 90%; bottom: -10%; width: 220%; height: 40%; border-radius: 50%; background: #5a3418cc; }
.fd-bulle { left: 16%; top: 10%; padding: 0.5em 0.9em; border-radius: 16px; background: #fff; color: #222; font: italic 800 clamp(0.8rem, 2.6vw, 1.4rem) Georgia, serif; box-shadow: 0 6px 20px #0008; animation: fd-pop 0.5s ease-out 2.8s both; }
.fd-bulle::after { content: ""; position: absolute; left: 22%; bottom: -14px; border: 8px solid transparent; border-top: 10px solid #fff; }
.fd-ferme { left: 76%; top: 46%; padding: 0.15em 0.5em; border: 2px solid #8a1f1f; border-radius: 4px; background: #f6eedb; color: #b02a2a; font: 900 clamp(0.6rem, 1.8vw, 1rem) Georgia, serif; transform-origin: 50% -40%; animation: fd-balance 1.2s ease-in-out 1s 3 alternate both; }
@keyframes fd-balance { from { rotate: -10deg; } to { rotate: 8deg; } }

@media (prefers-reduced-motion: reduce) {
  .fd-carte *, .cine-scene [class^="fd-"], .cine-scene [class^="fd-"] * { animation: none !important; }
  .fd-pluie i { top: 30%; }
  .fd-notes i { opacity: 0.8; }
}