/* Street Shakers — Bandeau « Un événement à animer ? » et pied de page */
/* ---------- CTA BAND ---------- */
.cta-band{ background:var(--bg); color:var(--ink); text-align:center; border-top:1px solid var(--line); }
.cta-band h2{ font-size:clamp(1.8rem,4.5vw,2.8rem); }
.cta-band p{ margin-top:12px; opacity:0.78; }
.cta-band .btn-ghost{ border-color:var(--ink); color:var(--ink); opacity:0.85; margin-top:24px; }
.cta-band .btn-ghost:hover{ border-color:var(--rouge); color:var(--rouge); opacity:1; }

/* ---------- FOOTER ---------- */
footer{ background:var(--noir); color:var(--ecru); padding:64px 0 calc(30px + env(safe-area-inset-bottom,0px)); }
.foot-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(238,234,227,0.14); }
.foot-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; margin-bottom:14px; }
.foot-brand img{ height:52px; width:auto; object-fit:contain; }
.foot-word img{ height:46px; width:auto; } /* logo v3 négatif à la place du nom écrit */
.foot-tag{ font-size:0.85rem; opacity:0.6; max-width:32ch; }
.foot-col h5{ font-family:'Outfit',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:0.16em; font-size:0.76rem; margin-bottom:16px; color:var(--jaune); }
.foot-col ul{ list-style:none; display:grid; gap:10px; }
.foot-col a{ text-decoration:none; font-size:0.92rem; opacity:0.75; transition:opacity .2s ease, color .2s ease; }
.foot-col a:hover, .foot-col a:focus{ opacity:1; color:var(--jaune); }
.social-row{ display:flex; gap:12px; margin-top:16px; }
.social-row a{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(238,234,227,0.25); display:flex; align-items:center; justify-content:center; text-decoration:none; transition:background .2s ease, transform .2s ease; }
.social-row a:hover{ background:var(--rouge); border-color:var(--rouge); transform:translateY(-3px); }
.social-row svg{ width:17px; height:17px; fill:var(--ecru); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-top:26px; font-size:0.78rem; }
.foot-bottom > span{ opacity:0.5; }
/* logo Mozaïc Production (16 octobre 2026), au centre du bas de page, en couleurs pleines */
.foot-prod{ height:76px; width:auto; display:block; }
@media (max-width: 700px){ .foot-bottom{ justify-content:center; text-align:center; } .foot-prod{ order:-1; flex-basis:100%; object-fit:contain; margin-bottom:6px; } }

/* arrivée par « Contact » / « Réserver » / « Demander un devis », ou en bas de page en défilant (js/contact.js) : l'e-mail et le téléphone s'allument et pulsent */
#contact-liens a{ border-radius:6px; padding:3px 7px; margin:-3px -7px; }
#contact-liens.appel a, #contact-liens.allume a{ opacity:1; color:var(--jaune); }  /* .allume : restent en jaune après le clignotement */
#contact-liens.appel a[href^="mailto:"], #contact-liens.appel a[href^="tel:"]{ animation:appel-contact .8s ease-out 3; }
@keyframes appel-contact{
  0%{ box-shadow:0 0 0 0 rgba(246,188,7,.75); background:rgba(246,188,7,.16); }
  100%{ box-shadow:0 0 0 16px rgba(246,188,7,0); background:rgba(246,188,7,0); }
}

/* ---------- CONTACT À DROITE + SMILEY DE LA CARTE (17 octobre 2026) ----------
   Le bloc Contact est aligné à droite ; devant lui, le smiley du verso de la carte pousse derrière le fond noir.
   Tout est vectoriel (SVG dans la page) et animé en CSS : la toile noire brillante se soulève avec un petit rebond, le jaune
   du visage perce au sommet, reflet façon ballon ; les traits apparaissent avec le jaune, clin d'œil qui se ferme et se
   rouvre, puis il repart. 1,45 s en tout. Classe .joue posée par js/contact.js (arrivée en bas de page, clic sur un bouton
   de réservation) et retirée à la fin de l'animation « ss-sphere ». */
.foot-contact{ display:flex; align-items:flex-start; justify-content:flex-end; gap:18px; text-align:right; }
.foot-contact ul{ justify-items:end; }
.foot-smiley{ width:95px; height:95px; flex:none; pointer-events:none; }
.foot-smiley svg{ width:100%; height:100%; display:block; overflow:visible; }
.ss-latex, .ss-sphere, .ss-reflet, .ss-traits{ opacity:0; transform-origin:280px 280px; }
.ss-oeil-d, .ss-clin{ transform-box:fill-box; transform-origin:50% 55%; }
.ss-clin{ opacity:0; }
.foot-smiley.joue .ss-latex{ animation:ss-latex 1.45s ease-out both; }
.foot-smiley.joue .ss-sphere{ animation:ss-sphere 1.45s ease-out both; }
.foot-smiley.joue .ss-reflet{ animation:ss-reflet 1.45s ease-out both; }
.foot-smiley.joue .ss-traits{ animation:ss-traits 1.45s ease-out both; }
.foot-smiley.joue .ss-oeil-d{ animation:ss-ferme 1.45s linear both; }
.foot-smiley.joue .ss-clin{ animation:ss-clin 1.45s linear both; }
.foot-smiley.joue .ss-sourcil-d{ animation:ss-sourcil 1.45s ease-in-out both; }
/* la toile se soulève vite (0,3 s) avec un petit rebond, tient, puis se relâche (départ en 0,4 s, lent puis rapide) */
@keyframes ss-latex{ 0%{ opacity:0; transform:scale(.35); } 3.4%{ opacity:.9; } 20.7%{ opacity:1; transform:scale(1.04); }
  27.6%{ transform:scale(.99); } 33.1%{ transform:scale(1); } 69.0%{ opacity:1; transform:scale(1); animation-timing-function:cubic-bezier(.55,0,1,.45); } 93.8%{ opacity:.5; transform:scale(.42); } 97.9%, 100%{ opacity:0; transform:scale(.35); } }
/* le jaune perce au sommet à mesure que la toile s'amincit ; au départ il rétrécit avant de s'éteindre */
@keyframes ss-sphere{ 0%{ opacity:0; transform:scale(.3); } 11.0%{ opacity:1; } 20.7%{ opacity:1; transform:scale(1.04); }
  27.6%{ transform:scale(.99); } 33.1%{ transform:scale(1); } 69.0%{ opacity:1; transform:scale(1); animation-timing-function:cubic-bezier(.55,0,1,.45); } 93.8%{ opacity:.9; transform:scale(.36); } 97.9%, 100%{ opacity:0; transform:scale(.3); } }
@keyframes ss-reflet{ 0%, 11.0%{ opacity:0; transform:scale(.6); } 23.4%{ opacity:1; transform:scale(1); }
  69.0%{ opacity:1; transform:scale(1); } 84.1%, 100%{ opacity:0; transform:scale(.6); } }
/* les traits du visage apparaissent avec le jaune et grossissent un peu quand le visage avance */
@keyframes ss-traits{ 0%, 5.5%{ opacity:0; transform:scale(.82); } 20.7%{ opacity:1; transform:scale(1.03); }
  29.0%{ opacity:1; transform:scale(1); } 69.0%{ opacity:1; transform:scale(1); } 85.5%, 100%{ opacity:0; transform:scale(.82); } }
/* vrai clin d'œil : l'œil droit se ferme d'un coup (50 ms), reste fermé un instant, puis se rouvre ; le sourcil suit */
@keyframes ss-ferme{ 0%, 31.7%{ opacity:1; transform:scaleY(1); } 35.2%, 43.4%{ opacity:0; transform:scaleY(.08); }
  48.3%, 100%{ opacity:1; transform:scaleY(1); } }
@keyframes ss-clin{ 0%, 32.8%{ opacity:0; } 35.2%, 43.4%{ opacity:1; } 45.9%, 100%{ opacity:0; } }
@keyframes ss-sourcil{ 0%, 31.7%{ transform:translateY(0); } 35.2%, 43.4%{ transform:translateY(7px); } 48.3%, 100%{ transform:translateY(0); } }
@media (max-width: 980px){ .foot-contact{ grid-column:1 / -1; } }
@media (max-width: 700px){ .foot-smiley{ width:74px; height:74px; } .foot-contact{ gap:10px; } }