/* Module « ambiance » de l'accueil festif : ciel du matin à la nuit, guirlandes entre les sections, entrées en scène,
   éclats des boutons, étincelles du curseur. Tout est décoratif (aria-hidden, pointer-events: none). */

/* ———————— le ciel fixe, derrière les sections transparentes ———————— */
.fete-ciel { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ciel-c { position: absolute; inset: 0; opacity: 0; }
.ciel-c.c0 { opacity: 1; background: linear-gradient(180deg, #D3E8F1 0%, #EAF0E6 38%, #F6EBD6 100%); }   /* matin */
.ciel-c.c1 { background: linear-gradient(180deg, #E6EEEA 0%, #F3E8D2 45%, #F3E5CC 100%); }                /* midi */
.ciel-c.c2 { background: linear-gradient(180deg, #F7DEAE 0%, #F5E4C6 50%, #F3E1C2 100%); }                /* après-midi doré */
.ciel-c.c3 { background: linear-gradient(180deg, #F4C49A 0%, #F6D5B3 45%, #F5DFC4 100%); }                /* coucher */
.ciel-c.c4 { background: linear-gradient(180deg, #DCCADC 0%, #EBD3C6 50%, #F1DCC8 100%); }                /* brunante */
.ciel-soleil { position: absolute; left: 0; top: 0; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; will-change: transform; transition: opacity .4s ease; }
.ciel-soleil::before, .ciel-soleil i { content: ''; position: absolute; inset: 0; border-radius: 50%; }
.ciel-soleil::before { background: radial-gradient(circle, rgba(255, 246, 214, .95) 0 26%, rgba(255, 214, 120, .55) 42%, rgba(255, 214, 120, 0) 70%); }
.ciel-soleil i { opacity: var(--couchant, 0); background: radial-gradient(circle, rgba(255, 196, 140, .95) 0 26%, rgba(240, 120, 70, .5) 44%, rgba(240, 120, 70, 0) 70%); }
.ciel-etoiles { position: absolute; inset: 0 0 55% 0; opacity: 0; background-image: radial-gradient(1.4px 1.4px at 40px 50px, #fff 50%, transparent 52%), radial-gradient(1.1px 1.1px at 150px 110px, #fff 50%, transparent 52%), radial-gradient(1.6px 1.6px at 260px 30px, #FFF3C4 50%, transparent 52%), radial-gradient(1.1px 1.1px at 330px 140px, #fff 50%, transparent 52%); background-size: 380px 170px; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.ciel-nuage { position: absolute; height: 34px; border-radius: 40px; background: rgba(255, 255, 255, .5); filter: blur(1px); animation: wgNuage 90s linear infinite; }
.ciel-nuage::before, .ciel-nuage::after { content: ''; position: absolute; border-radius: 50%; background: inherit; }
.ciel-nuage::before { width: 52%; height: 150%; left: 14%; bottom: 30%; }
.ciel-nuage::after { width: 36%; height: 120%; right: 14%; bottom: 35%; }
.ciel-nuage.n1 { top: 12vh; width: 150px; animation-delay: -10s; }
.ciel-nuage.n2 { top: 26vh; width: 110px; opacity: .7; animation-duration: 120s; animation-delay: -70s; }
.ciel-nuage.n3 { top: 6vh; width: 90px; opacity: .55; animation-duration: 140s; animation-delay: -35s; }
@keyframes wgNuage { from { transform: translateX(-20vw); } to { transform: translateX(120vw); } }
.ciel-horizon { position: absolute; left: 0; bottom: 0; width: 200%; will-change: transform; }
.ciel-horizon svg { display: block; width: 100%; height: 100%; }
.ciel-horizon.h-loin { height: 120px; fill: rgba(161, 98, 52, .09); }
.ciel-horizon.h-pres { height: 90px; fill: rgba(110, 66, 36, .13); }
@media (max-width: 1023px) { .ciel-nuage, .ciel-horizon { display: none; } }

/* ———————— guirlandes entre les sections ———————— */
.fete-guirlande { position: relative; height: 64px; margin: 0; overflow: hidden; pointer-events: none; --soir: 0; }
.fete-guirlande svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fete-guirlande .poteau { fill: #6B4A2B; }
.fete-guirlande .fil { fill: none; stroke: #4F3A28; stroke-width: 2.2; }
.fete-guirlande .fanion { transform-box: fill-box; transform-origin: 50% 0; animation: wgFanion 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.45s); }
.fete-guirlande .fanion path { stroke: rgba(35, 27, 20, .55); stroke-width: 1.2; stroke-linejoin: round; }
@keyframes wgFanion { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.fete-guirlande .douille { fill: #3B2E26; }
.fete-guirlande .ampoule { fill: #FFE7A8; stroke: rgba(122, 85, 48, .35); stroke-width: 1; opacity: calc(.6 + .4 * var(--soir)); animation: wgAmpoule2 2.6s ease-in-out infinite; }
.fete-guirlande .ampoule.couleur { fill: #FFB4A8; }
.fete-guirlande .ampoule.a1 { animation-delay: -.9s; }
.fete-guirlande .ampoule.a2 { animation-delay: -1.7s; }
.fete-guirlande-ampoules svg { filter: drop-shadow(0 0 calc(2px + 6px * var(--soir)) rgba(255, 200, 87, calc(.25 + .6 * var(--soir)))); }
@keyframes wgAmpoule2 { 0%, 100% { fill-opacity: 1; } 50% { fill-opacity: .7; } }
@media (max-width: 720px) { .fete-guirlande { height: 46px; } }
.fete-guirlande.fete-pause * { animation-play-state: paused; }

/* ———————— entrées en scène ———————— */
.fete-hote { position: relative; }
/* les tampons arrivent agrandis : on coupe le débordement horizontal de leurs sections */
#economies, #tarifs, #jeu, #enquetes { overflow-x: clip; }
/* avis de recherche épinglés qui se balancent en arrivant */
html.fete-anime .fete-affiche:not(.fete-vu) { opacity: 0; transform: translateY(-36px) rotate(-10deg); }
html.fete-anime .fete-affiche.fete-vu { transform-origin: 50% 0; animation: wgAffiche 1.15s cubic-bezier(.3, .7, .4, 1) both; animation-delay: calc(var(--i, 0) * 130ms); }
@keyframes wgAffiche { 0% { opacity: 0; transform: translateY(-36px) rotate(-10deg); } 40% { opacity: 1; transform: translateY(0) rotate(5deg); } 62% { transform: rotate(-2.6deg); } 80% { transform: rotate(1.2deg); } 100% { opacity: 1; transform: none; } }

/* portes de saloon (battants) : créées au moment de s'ouvrir, sur toute la largeur de l'en-tête, ouvertes en 0,36 s,
   effacées avant 0,8 s puis retirées de la page par ambiance.js. Coupées à leur boîte : jamais de débordement. */
.fete-portes { position: absolute; z-index: 3; overflow: hidden; perspective: 2000px; pointer-events: none; animation: wgPortesFin .9s linear both; }
.fete-portes .battant { position: absolute; top: 0; width: 50%; height: 100%; border: 4px solid #4A2E16; background: linear-gradient(90deg, rgba(0, 0, 0, .18), transparent 20%, transparent 80%, rgba(0, 0, 0, .18)), repeating-linear-gradient(180deg, #A06A35 0 9px, #7A4B24 9px 12px); box-shadow: inset 0 0 0 9px #8C5A2E, inset 0 0 0 12px #4A2E16; }
.fete-portes .battant::after { content: ''; position: absolute; top: 46%; width: 10px; height: 34px; border-radius: 4px; background: #E8A93A; border: 2px solid #4A2E16; }
.fete-portes .battant-g { left: 0; transform-origin: 0 50%; clip-path: polygon(0 0, 30% 3%, 62% 12%, 100% 28%, 100% 100%, 0 100%); animation: wgBattantG .9s cubic-bezier(.25, .7, .3, 1) both; }
.fete-portes .battant-g::after { right: 14px; }
.fete-portes .battant-d { right: 0; transform-origin: 100% 50%; clip-path: polygon(0 28%, 38% 12%, 70% 3%, 100% 0, 100% 100%, 0 100%); animation: wgBattantD .9s cubic-bezier(.25, .7, .3, 1) both; }
.fete-portes .battant-d::after { left: 14px; }
@keyframes wgBattantG { 0% { transform: rotateY(0); } 40% { transform: rotateY(-106deg); } 70% { transform: rotateY(-80deg); } 100% { transform: rotateY(-96deg); } }
@keyframes wgBattantD { 0% { transform: rotateY(0); } 40% { transform: rotateY(106deg); } 70% { transform: rotateY(80deg); } 100% { transform: rotateY(96deg); } }
@keyframes wgPortesFin { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }

/* enseignes de bois qui tombent au bout de leurs chaînes */
.fete-enseigne { position: absolute; z-index: 2; top: -50px; right: max(16px, calc(50% - 604px)); width: 210px; height: 100px; pointer-events: none; transform-origin: 50% 0; }
.fete-enseigne .chaine { position: absolute; top: 0; width: 4px; height: 40px; background: repeating-linear-gradient(180deg, #A89A86 0 6px, #5C4E40 6px 8px); }
.fete-enseigne .chaine-g { left: 30px; }
.fete-enseigne .chaine-d { right: 30px; }
.fete-enseigne .planche { position: absolute; left: 0; right: 0; top: 36px; padding: 12px 10px 10px; border-radius: 10px; text-align: center; font: 400 21px/1.1 var(--display); color: #FFF3D6; letter-spacing: .5px; background: repeating-linear-gradient(0deg, #8C5A2E 0 15px, #7A4B24 15px 17px); border: 3px solid var(--encre); box-shadow: 4px 5px 0 var(--encre); text-shadow: 0 2px 0 #4E120E; }
.fete-enseigne .planche::before, .fete-enseigne .planche::after { content: ''; position: absolute; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: #3B2E26; }
.fete-enseigne .planche::before { left: 28px; }
.fete-enseigne .planche::after { right: 28px; }
html.fete-anime .fete-hote:not(.fete-vu) > .fete-enseigne { opacity: 0; transform: translateY(-50px); }
html.fete-anime .fete-vu > .fete-enseigne { animation: wgEnseigne 1.5s cubic-bezier(.3, .6, .35, 1) both, wgBercer 5s ease-in-out 1.6s infinite; }
@keyframes wgEnseigne { 0% { opacity: 0; transform: translateY(-50px); } 12% { opacity: 1; } 45% { transform: translateY(8%) rotate(2deg); } 62% { transform: translateY(-4%) rotate(-3deg); } 78% { transform: translateY(1%) rotate(1.5deg); } 100% { transform: none; } }
@keyframes wgBercer { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
.bande-bordeaux .fete-enseigne .planche { background: repeating-linear-gradient(0deg, #C89A4E 0 15px, #B5873C 15px 17px); color: var(--encre); text-shadow: none; }
@media (max-width: 1100px) { .fete-enseigne { display: none; } }

/* tampons « APPROUVÉ » */
.fete-tampon { position: absolute; z-index: 3; right: 14px; top: 14px; display: flex; flex-direction: column; align-items: center; padding: 6px 14px 5px; border: 4px double currentColor; border-radius: 10px; color: #8E1F17; background: rgba(255, 248, 236, .82); font: 900 21px/1 var(--texte); font-stretch: 112%; letter-spacing: 2px; text-transform: uppercase; transform: rotate(-12deg); pointer-events: none; box-shadow: 0 0 0 2px rgba(255, 248, 236, .6); }
.fete-tampon small { font-size: 10px; letter-spacing: 1.2px; margin-top: 3px; }
.tarif .fete-tampon { top: auto; bottom: 18px; right: 18px; color: var(--encre); background: rgba(232, 169, 58, .92); }
/* téléphone : la carte de prévente est courte, le tampon passe en haut à droite, à côté du prix */
@media (max-width: 720px) { .tarif .fete-tampon { top: 64px; bottom: auto; right: 12px; font-size: 17px; } }
html.fete-anime .fete-tampon-hote:not(.fete-vu) > .fete-tampon { opacity: 0; transform: scale(2.6) rotate(-20deg); }
html.fete-anime .fete-tampon-hote.fete-vu > .fete-tampon { animation: wgFrappe .5s cubic-bezier(.2, 1.4, .4, 1) .45s both; }
@keyframes wgFrappe { 0% { opacity: 0; transform: scale(2.6) rotate(-20deg); } 70% { opacity: 1; transform: scale(.94) rotate(-11deg); } 100% { opacity: 1; transform: rotate(-12deg); } }
.fete-secoue { animation: wgSecoue .35s ease; }
@keyframes wgSecoue { 0%, 100% { translate: 0 0; } 25% { translate: -3px 2px; } 50% { translate: 3px -1px; } 75% { translate: -1px 1px; } }

/* ———————— éclats des boutons (chapeaux, confettis, tampon) ———————— */
.fete-eclats { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.fete-confetti { position: absolute; width: 9px; height: 13px; border-radius: 2px; }
.fete-chapeau { position: absolute; width: 46px; height: 46px; filter: drop-shadow(0 3px 0 rgba(35, 27, 20, .35)); }
.fete-tampon-clic { position: absolute; padding: 6px 14px; border: 4px double #8E1F17; border-radius: 10px; background: rgba(255, 248, 236, .9); color: #8E1F17; font: 400 24px/1 var(--display); white-space: nowrap; }

/* ———————— étincelles d'éperon (ordinateur) ———————— */
.fete-curseur { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 95; pointer-events: none; }

/* ———————— la nuit du pied de page ———————— */
html:not(.fete-anime) .pied-nuit { cursor: auto; }

/* ———————— mouvement réduit : version statique ———————— */
html:not(.fete-anime) .heros-plan, html:not(.fete-anime) .ciel-soleil { will-change: auto; }
html:not(.fete-anime) .ciel-nuage, html:not(.fete-anime) .fete-curseur, html:not(.fete-anime) .fete-eclats { display: none; }
html:not(.fete-anime) .heros-poussiere { display: none; }