/* Fonds animés des boutons du livret (mêmes couleurs qu'avant) — 2026-10-14
   Les décors (<span class="fx …">) sont ajoutés par assets/js/btnfx.js ; z-index:-1 = derrière le texte et l'icône.
   Arrivée = lever de soleil · Départ = ciel étoilé calme · Clés = pulsation · Frigo = neige · Ménage = étincelles · Draps = Zzz */
.fx { position: absolute; pointer-events: none; z-index: -1; }
@keyframes fxSunrise { 0% { transform: translateY(44px) scale(.8); opacity: 0; } 25% { opacity: .75; } 60% { transform: translateY(-6px) scale(1.03); opacity: .75; } 100% { transform: translateY(-20px) scale(1.06); opacity: 0; } }
@keyframes fxStar { 0%, 100% { opacity: .35; } 50% { opacity: .95; } }
@keyframes fxRing { 0% { transform: scale(.15); opacity: .9; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes fxSnow { 0% { transform: translate(0, -12px); opacity: 0; } 15% { opacity: .95; } 100% { transform: translate(var(--sx, 10px), 62px); opacity: 0; } }
@keyframes fxPop { 0%, 100% { transform: scale(0) rotate(0); opacity: 0; } 30% { transform: scale(1.25) rotate(20deg); opacity: 1; } 55% { transform: scale(.8) rotate(35deg); opacity: .8; } 70% { transform: scale(0) rotate(50deg); opacity: 0; } }
@keyframes fxZ { 0% { transform: translate(0, 0) scale(.6) rotate(-8deg); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(18px, -50px) scale(1.5) rotate(8deg); opacity: 0; } }
.is-off .fx { animation-play-state: paused !important; }

/* Arrivée : un soleil monte doucement derrière le texte */
.fx-sun { left: 50%; bottom: -6px; width: 58px; height: 58px; margin-left: -29px; border-radius: 50%;
  background: radial-gradient(circle, #fff6d0 0 32%, #ffd36e 70%); box-shadow: 0 0 22px 7px rgba(255, 222, 140, .55); animation: fxSunrise 7s ease-in-out infinite; }

/* Départ : ciel étoilé calme (étoiles presque fixes, scintillement très lent) */
.fx-st { left: 0; top: 0; border-radius: 50%; background: #fff; animation: fxStar 8s ease-in-out infinite; }
.fx-st.a { width: 2px; height: 2px; box-shadow: 14px 8px 0 #fff, 52px 40px 0 #fff, 93px 12px 0 #fff, 131px 38px 0 #fff, 176px 7px 0 #fff, 219px 36px 0 #fff, 258px 14px 0 #fff, 300px 40px 0 #fff, 330px 10px 0 #fff; }
.fx-st.b { width: 3px; height: 3px; box-shadow: 34px 30px 0 #fff, 72px 10px 0 #fff, 112px 36px 0 #fff, 155px 14px 0 #fff, 198px 40px 0 #fff, 240px 8px 0 #fff, 284px 30px 0 #fff; animation-delay: 2.5s; animation-duration: 10s; }
.fx-st.c { width: 2px; height: 2px; box-shadow: 24px 22px 0 #fff, 64px 44px 0 #fff, 104px 24px 0 #fff, 146px 6px 0 #fff, 188px 26px 0 #fff, 228px 44px 0 #fff, 270px 22px 0 #fff; animation-delay: 5s; animation-duration: 12s; }

/* Clés : des ondes partent du centre, comme un signal */
.fx-ring { left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); animation: fxRing 2.6s ease-out infinite; }
.fx-ring.r2 { animation-delay: 1.3s; }

/* Frigo : de la neige qui tombe doucement */
.fx-snow { left: 0; top: 0; width: 4px; height: 4px; border-radius: 50%; background: #fff; animation: fxSnow 3.6s linear infinite; }
.fx-snow.a { box-shadow: 24px 0 0 #fff, 70px 4px 0 #fff, 118px -2px 0 #fff, 166px 6px 0 #fff, 214px 0 0 #fff, 262px 5px 0 #fff, 308px 1px 0 #fff; }
.fx-snow.b { --sx: -12px; animation-delay: 1.8s; width: 3px; height: 3px; box-shadow: 46px 2px 0 #fff, 94px 6px 0 #fff, 142px -1px 0 #fff, 190px 5px 0 #fff, 238px 0 0 #fff, 286px 4px 0 #fff; }

/* Ménage : des étincelles qui jaillissent */
.fx-pop { color: #fff; text-shadow: 0 0 8px #fff; opacity: 0; animation: fxPop 3.2s ease-in-out infinite; }
.fx-pop::before { content: "✦"; }

/* Draps : des « Z » qui s'envolent */
.fx-z { bottom: 8px; color: #fff; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600; text-shadow: 0 0 8px rgba(255,255,255,.6); opacity: 0; animation: fxZ 4.2s ease-in infinite; }
.fx-z::before { content: attr(data-z); }

@media (prefers-reduced-motion: reduce) { .fx { animation: none !important; display: none; } }

/* ───── Rendu « fait main » (crayons de couleur) — 2026-10-14 ─────
   Calques posés par-dessus la couleur et les animations, sous le texte : hachures, grain de papier, contour tremblé. */
:root {
  --fxh-grain-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .22 0 0 0 0 .1 0 0 0 1.3 -.55'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)'/%3E%3C/svg%3E");
  --fxh-grain-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .97 0 0 0 0 .9 0 0 0 1.4 -.6'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-fx="arrivee"] { --pc: #b05a2c; --ha: 48deg; }
[data-fx="depart"]  { --pc: #241d63; --ha: 40deg; }
[data-fx="keybox"]  { --pc: #5e0c22; --ha: 56deg; }
[data-fx="frigo"]   { --pc: #0f5c88; --ha: 44deg; }
[data-fx="menage"]  { --pc: #0b6a55; --ha: 52deg; }
[data-fx="linge"]   { --pc: #7e3470; --ha: 42deg; }
[data-fx="reserve"] { --pc: #6e5c44; --ha: 48deg; }
.fxh { position: absolute; pointer-events: none; z-index: -1; }
.fxh-hatch { inset: 0; border-radius: inherit;
  background: var(--fxh-grain-l); opacity: .5; }
.fxh-grain { inset: 0; border-radius: inherit; background: var(--fxh-grain-d); opacity: .2; }
.fxh-pen { inset: 2px; border: 2px solid var(--pc, #8a5a30); border-radius: 999px; opacity: .5; filter: url(#fxRough); }
.fxh-pen.p2 { inset: 3px 4px 2px 3px; border-width: 1.5px; opacity: .3; filter: url(#fxRough2); }

/* Petits boutons : mêmes calques, version fine */
:where(.map-link, .icon-btn, .copy-btn, .platform-btn, .lang-current) { position: relative; }
.map-link, .icon-btn, .copy-btn, .platform-btn, .to-top, .lang-current { isolation: isolate; --pc: #6e5c44; }
.wa-btn { --pc: #0b6b3a; }
.platform-btn--booking { --pc: #001a40; }
.platform-btn--airbnb { --pc: #a00f38; }
.fxh-pen.mini { inset: 1px; border-width: 1.5px; opacity: .45; filter: url(#fxRough3); }
.map-link .fxh-hatch, .copy-btn .fxh-hatch, .lang-current .fxh-hatch { display: none; }
.map-link .fxh-grain, .copy-btn .fxh-grain, .lang-current .fxh-grain { opacity: .12; }
.map-link .fxh-pen.mini, .copy-btn .fxh-pen.mini, .lang-current .fxh-pen.mini { --pc: #9b8663; opacity: .6; }
/* Boutons à contour : le trait de crayon remplace le filet d'origine (pas de double contour) */
.map-link, .copy-btn, .lang-current { border-color: transparent !important; }
.map-link .fxh-pen.mini, .copy-btn .fxh-pen.mini, .lang-current .fxh-pen.mini { inset: 0; border-width: 1.8px; opacity: .85; }