/* Décorations des fêtes — APERÇU (maquette à valider) — version « bien visible »
   Couches : fond de page < ce qui tombe (z 1) < textes du grand bandeau + boutons (z 2) < grands dessins (z 4, s'écartent des boutons) < menu (z 50) < boutons flottants (z 60+). Rien n'est cliquable. */
.fete-apercu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 16px; background: #111; color: #fff; font: 600 13px/1.3 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; position: relative; z-index: 60; }
.fete-apercu span { opacity: .7; font-weight: 500; }
.fete-apercu button { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid #555; background: #222; color: #fff; font: inherit; cursor: pointer; }
.fete-apercu button[aria-pressed="true"] { background: #fff; color: #111; border-color: #fff; }
.fete-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Boutons Réserver : toujours au-dessus de ce qui tombe, avec un halo de fête */
html[data-fete] .bouton { position: relative; z-index: 2; }
html[data-fete] .bouton:not(.bouton--contour):not(.bouton--clair) { box-shadow: 0 0 0 3px rgba(255, 255, 255, .78), 0 0 28px 8px var(--fete-lueur); }
html[data-fete] .onglet-btn--resa { box-shadow: 0 0 20px 5px var(--fete-lueur); }

/* Guirlande sous le menu */
.fete-guirlande { position: absolute; left: 0; right: 0; top: 100%; height: 62px; display: flex; justify-content: center; overflow: hidden; pointer-events: none; z-index: 5; }
.fete-g-item { position: relative; flex: none; height: 62px; }
.fete-g-fil { position: absolute; top: 0; left: 0; display: block; }
.fete-g-objet { position: absolute; left: 50%; top: 7px; translate: -50% 0; line-height: 0; }
.fete-g-objet svg { display: block; overflow: visible; }
.fete-guirlande--noel .fete-g-objet, .fete-guirlande--halloween .fete-scint { top: 6px; }

/* Bandeau sous le menu (place laissée en haut pour la guirlande) */
.fete-bandeau { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; justify-content: center; padding: 44px 16px 16px; color: #fff; font-weight: 900; font-size: 1.4rem; letter-spacing: .01em; text-align: center; position: relative; z-index: 4; text-shadow: 0 1px 6px rgba(0, 0, 0, .45); box-shadow: inset 0 -3px 0 rgba(255, 255, 255, .12); }
.fete-bandeau small { font-weight: 600; opacity: .95; font-size: .92em; }
.fete-bandeau-ic { display: inline-flex; align-items: center; gap: 4px; line-height: 0; }
html[data-fete="noel"] .fete-bandeau { color: #fff6dc; }

/* Teinte + décor dans le grand bandeau photo, sous les textes */
.fete-teinte { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
html[data-fete="halloween"] .fete-teinte { background: linear-gradient(160deg, rgba(58, 8, 84, .62), rgba(20, 4, 30, .3) 45%, rgba(214, 90, 0, .42)); }
html[data-fete="saint-valentin"] .fete-teinte { background: linear-gradient(160deg, rgba(214, 36, 90, .36), rgba(214, 36, 90, 0) 55%, rgba(255, 80, 140, .3)); }
html[data-fete="noel"] .fete-teinte { background: linear-gradient(180deg, rgba(8, 42, 24, .38), rgba(8, 42, 24, 0) 55%, rgba(170, 30, 40, .2)); }
.fete-lune { position: absolute; top: 14px; right: 6%; width: clamp(100px, 14vw, 200px); height: auto; }

/* Ce qui tombe, sur toute la page */
.fete-scene { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.fete-voile { position: absolute; inset: 0; }
html[data-fete="halloween"] .fete-voile { background: radial-gradient(ellipse 80% 75% at 50% 50%, rgba(40, 6, 50, 0) 55%, rgba(40, 6, 50, .55) 100%), radial-gradient(ellipse 70% 30% at 50% 105%, rgba(255, 120, 0, .25), rgba(255, 120, 0, 0)); }
html[data-fete="saint-valentin"] .fete-voile { background: radial-gradient(ellipse 80% 75% at 50% 50%, rgba(224, 40, 100, 0) 55%, rgba(224, 40, 100, .3) 100%); }
html[data-fete="noel"] .fete-voile { background: radial-gradient(ellipse 80% 75% at 50% 50%, rgba(150, 195, 235, 0) 58%, rgba(150, 195, 235, .4) 100%); }
.fp { position: absolute; top: 0; display: block; line-height: 0; will-change: transform; animation-name: fp-chute, fp-balance; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite; animation-direction: normal, alternate; }
.fp svg { display: block; overflow: visible; }
.fp--monte { animation-name: fp-monte, fp-balance; }
.fp--neige { border-radius: 50%; background: #fff; box-shadow: 0 0 2px 1px rgba(90, 130, 180, .5); }
.fp--chauve-souris { animation-name: fp-vol; animation-timing-function: linear; animation-direction: normal; }
.fp--chauve-souris.fp--retour { transform: scaleX(-1); animation-name: fp-vol-retour; }
.fp-aile { display: block; animation: fp-aile .26s ease-in-out infinite alternate; }
@keyframes fp-chute { from { translate: 0 -70px; } to { translate: 0 calc(100vh + 70px); } }
@keyframes fp-monte { from { translate: 0 calc(100vh + 70px); } to { translate: 0 -70px; } }
@keyframes fp-balance { from { transform: translateX(calc(var(--dx) * -1)) rotate(calc(var(--r) * -1)); } to { transform: translateX(var(--dx)) rotate(var(--r)); } }
@keyframes fp-vol { from { translate: -14vw 0; } to { translate: 112vw var(--dy); } }
@keyframes fp-vol-retour { from { translate: 112vw 0; } to { translate: -14vw var(--dy); } }
@keyframes fp-aile { from { transform: scaleY(1); } to { transform: scaleY(.38); } }

/* Grands dessins fixes : ils changent de coin s'ils touchent un bouton, sinon ils s'effacent */
.fete-art { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.fete-dessin { position: absolute; transition: opacity .35s ease; line-height: 0; }
.fete-dessin > svg, .fete-dessin > span > svg { display: block; width: 100%; height: auto; overflow: visible; }
.fete-dessin.fete-discret { opacity: .14; }
.fete-dessin.fete-cache { opacity: 0; }
.fete-dessin[data-place="bd"] { left: auto; top: auto; right: 8px; bottom: 0; }
.fete-dessin[data-place="bg"] { right: auto; top: auto; left: 8px; bottom: 84px; }
.fete-dessin[data-place="hd"] { left: auto; bottom: auto; right: 46px; top: calc(var(--fete-haut, 64px) + 10px); }
.fete-dessin--coin[data-place="hg"] { right: auto; bottom: auto; left: 0; top: var(--fete-haut, 64px); }
.fete-dessin--coin[data-place="hd"] { left: auto; bottom: auto; right: 0; top: var(--fete-haut, 64px); }
.fete-dessin--sapin { width: clamp(190px, 17vw, 300px); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .3)); }
.fete-dessin--tas { width: clamp(200px, 18vw, 310px); }
.fete-dessin--bouquet { width: clamp(170px, 15vw, 260px); filter: drop-shadow(0 6px 12px rgba(120, 0, 40, .25)); }
.fete-dessin--coin { width: clamp(150px, 15vw, 240px); }
.fete-dessin--seule { width: 92px; }
.fete-dessin--bonhomme { width: 96px; }
.fete-dessin--coeurs { width: 110px; }
.fete-lum { position: absolute; inset: 0; width: 100%; height: 100%; animation: fete-scint 1.4s ease-in-out infinite; }
.fete-lum--b { animation-delay: -.7s; }
.fete-balance { display: block; transform-origin: 50% 0; animation: fete-balance 4.5s ease-in-out infinite alternate; }
.fete-balance--2 { animation-delay: -2.2s; }
.fete-araignee { position: absolute; left: 44%; top: 26%; width: 13%; animation: fete-araignee 3.2s ease-in-out infinite alternate; }
.fete-araignee svg { display: block; width: 100%; height: auto; }
@keyframes fete-balance { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes fete-araignee { from { transform: translateY(-12%); } to { transform: translateY(22%); } }

/* Petits effets communs */
.fete-scint { animation: fete-scint 1.5s ease-in-out infinite; }
.fete-scint--1 { animation-delay: -.5s; } .fete-scint--2 { animation-delay: -1s; }
.fete-bat { display: block; animation: fete-bat 1.6s ease-in-out infinite; }
.fete-g-objet.fete-bat { display: block; }
.fete-bat--1 { animation-delay: -.5s; } .fete-bat--2 { animation-delay: -1s; }
@keyframes fete-scint { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes fete-bat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } 45% { transform: scale(1.1); } }

/* ---------- Version 2 (Ahmad, 10 oct. 2026 : « encore plus visible ») ---------- */
/* cadre de couleur autour de l'écran */
.fete-cadre { position: fixed; inset: 0; z-index: 55; pointer-events: none; padding: 6px; background: var(--fete-cadre); -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
/* un petit motif devant chaque titre de section */
html[data-fete] h2::before { content: var(--fete-h2); margin-right: .35em; }
/* motifs en émojis (nouveaux thèmes) */
.fete-emoji { display: inline-block; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.fp--emoji { line-height: 1; }
.fete-dessin--emojis { width: auto; } .fete-bouquet-emoji { display: block; font-size: clamp(84px, 9vw, 150px); line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .3)); white-space: nowrap; }
.fete-dessin--coin-emoji { width: auto; } .fete-coin-emoji { display: block; padding: 6px 10px; font-size: clamp(54px, 5.5vw, 92px); line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; white-space: nowrap; }
/* emblème géant dans le grand bandeau photo (sous les textes) */
.fete-embleme { position: absolute; right: 5%; bottom: 8%; font-size: clamp(110px, 16vw, 240px); line-height: 1; opacity: .92; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .4)); }
html[data-fete-texte="sombre"] .fete-bandeau { color: #2b2410; text-shadow: 0 1px 4px rgba(255, 255, 255, .6); }
html[data-fete="fete-nationale"] .fete-bandeau { text-shadow: 0 2px 6px #000, 0 0 2px #000; }
/* titres du grand bandeau : liseré de couleur de la fête */
html[data-fete] .heros h1 { text-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 0 26px var(--fete-lueur); }

@media (max-width: 700px) {
  .fete-cadre { padding: 4px; }
  .fete-embleme { font-size: 96px; right: 3%; bottom: 4%; opacity: .55; }
  .fete-bouquet-emoji { font-size: 64px; } .fete-coin-emoji { font-size: 40px; }
  .fete-guirlande, .fete-g-item { height: 44px; }
  .fete-g-objet { top: 6px; }
  .fete-bandeau { padding: 32px 52px 10px 12px; font-size: 1.02rem; gap: 2px 8px; } /* à droite : la place des boutons Appeler / Réserver */
  .fete-bandeau small { display: none; } /* téléphone : une seule ligne courte, le bouton Réserver reste haut */
  .fete-bandeau-ic { display: none; }
  .fete-lune { width: 86px; right: 4%; }
  .fete-dessin[data-place="bd"] { right: 4px; bottom: 4px; }
  .fete-dessin[data-place="bg"] { left: 4px; bottom: 80px; }
  .fete-dessin[data-place="hd"] { right: 42px; top: calc(var(--fete-haut, 64px) + 8px); }
  .fete-dessin--sapin { width: 86px; }
  .fete-dessin--tas { width: 104px; }
  .fete-dessin--bouquet { width: 82px; }
  .fete-dessin--coin { width: 84px; }
  .fete-dessin--seule, .fete-dessin--bonhomme, .fete-dessin--coeurs { display: none; } /* sur téléphone : pas de dessin à gauche, il cacherait le texte */
  /* Page STABLE sur téléphone (Ahmad, 14 oct. 2026) : les dessins qui changent de place en défilant (citrouilles, toile…) faisaient
     « sauter » la page et cachaient le texte, et les objets qui tombent ou volent bougeaient partout → retirés sur téléphone.
     La guirlande, le bandeau de la fête et le cadre restent (immobiles). */
  .fete-art, .fete-scene { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fp, .fp *, .fete-art *, .fete-guirlande * { animation: none !important; }
}