/* « hidden » gagne toujours (tests du 14/10) */
[hidden] { display: none !important; }
/* Site vitrine Show Event — d'après la maquette du PDF validée (showevent-site/3-maquette). Aucun prix (Davy, 25/09). */
/* Show Event — éléments communs aux trois propositions de site (25/09/2026). */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;800;900&family=Montserrat:wght@400;500;600;700;800&family=Tilt+Neon&display=swap');
:root { --corail: #EA5462; --corail-fonce: #C9404F; --jaune: #FFEB84; --bleu: #4A86D0; --rose: #FCE6E4; --creme: #FFF8EC; --encre: #1B1B1F; --gris: #6B6570; --ligne: #EADBD8;
  --display: 'Unbounded', 'Arial Black', sans-serif; --texte: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--texte); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); margin: 0; line-height: 1.02; }
.btn { font: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 26px; border-radius: 999px; font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; border: 0; cursor: pointer; text-decoration: none; transition: transform .25s, box-shadow .25s; }
.btn:hover { transform: translateY(-2px); }
.btn-corail { background: var(--corail); color: #fff; } .btn-jaune { background: var(--jaune); color: var(--encre); } .btn-encre { background: var(--encre); color: var(--jaune); }
.btn-ligne { background: transparent; color: currentColor; box-shadow: inset 0 0 0 2px currentColor; }
.sur { font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }

/* Menu pilule (style maison Meyado ; onglet actif au jaune Show Event) */
.pilule { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; display: flex; gap: 2px; padding: 6px; border-radius: 44px;
  background: rgba(27,27,31,.72); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 12px 34px rgba(0,0,0,.35); }
.pilule a, .pilule button { font: inherit; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 76px; padding: 9px 14px 8px; border-radius: 34px; color: rgba(255,255,255,.72); text-decoration: none; }
.pilule svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pilule small { font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.pilule .on { background: var(--jaune); color: var(--encre); }

/* Feuille de contact */
.contact { position: fixed; z-index: 80; top: 50%; right: clamp(16px, 4vw, 56px); width: min(470px, calc(100% - 32px)); max-height: calc(100vh - 40px); background: #fff; color: var(--encre); border-radius: 28px; overflow: hidden; display: flex; box-shadow: 0 50px 120px -30px rgba(0,0,0,.6);
  opacity: 0; pointer-events: none; transform: translateY(-46%) scale(.96); transition: opacity .4s, transform .55s cubic-bezier(.2,.8,.2,1); }
.contact.ouverte { opacity: 1; pointer-events: auto; transform: translateY(-50%); }
.contact .fermer { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--creme); font-size: 20px; cursor: pointer; }
.c-defile { overflow-y: auto; padding: 30px 28px 26px; width: 100%; }
.contact h2 { font-weight: 900; text-transform: uppercase; font-size: 26px; line-height: 1.05; margin: 10px 50px 20px 0; }
.contact .sur { color: var(--corail); }
.c-directs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.c-direct { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; text-decoration: none; color: #fff; background: var(--corail); }
.c-direct.wa { background: linear-gradient(135deg, #2fd46c, #128c4a); }
.c-direct i { flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; }
.c-direct svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.c-direct span { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.c-direct b { display: block; font-size: 14px; letter-spacing: .02em; text-transform: none; margin-top: 3px; }
.c-ou { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); }
.c-ou::before, .c-ou::after { content: ""; flex: 1; height: 1px; background: var(--ligne); }
.c-form label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); margin-bottom: 10px; }
.c-form input, .c-form select, .c-form textarea { display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--encre); padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--ligne); background: var(--creme); outline: none; }
.c-form input:focus, .c-form select:focus, .c-form textarea:focus { border-color: var(--corail); background: #fff; }
.c-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.c-qui { display: flex; gap: 8px; margin-bottom: 12px; }
.c-form .c-qui label { margin: 0; letter-spacing: 0; text-transform: none; font-size: 14px; color: var(--encre); cursor: pointer; }
.c-qui input { position: absolute; opacity: 0; pointer-events: none; }
.c-qui span { display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--ligne); font-weight: 800; background: #fff; }
.c-qui input:checked + span { background: var(--encre); color: #fff; border-color: var(--encre); }
.c-qui input:focus-visible + span { outline: 2px solid var(--corail); outline-offset: 2px; }
.c-envoyer { width: 100%; margin-top: 6px; }
body.contact-ouvert .pilule { opacity: 0; pointer-events: none; }
/* la feuille « Menu » du téléphone : la liste COMPLÈTE du menu du site (MenuSite) */
.feuille-menu { position: fixed; inset: 0; z-index: 70; pointer-events: none; visibility: hidden; transition: visibility 0s .3s; }   /* fermée : vraiment cachée (clavier, lecteurs d'écran), après l'animation */
.feuille-menu .fm-fond { position: absolute; inset: 0; background: rgba(27,27,31,.45); opacity: 0; transition: opacity .25s; }
.feuille-menu .fm-carte { position: absolute; left: 0; right: 0; bottom: 0; background: #FFF8EC; color: var(--encre); border-radius: 28px 28px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(105%); transition: transform .3s cubic-bezier(.2,.8,.2,1); max-height: 86vh; overflow-y: auto; }
.feuille-menu.ouverte { pointer-events: auto; visibility: visible; transition: visibility 0s; } .feuille-menu.ouverte .fm-fond { opacity: 1; } .feuille-menu.ouverte .fm-carte { transform: none; }
.fm-tete { display: flex; justify-content: space-between; align-items: center; margin: 0 4px 10px; } .fm-tete b { font-family: var(--display); font-size: 16px; text-transform: uppercase; }
.fm-fermer { all: unset; cursor: pointer; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(27,27,31,.08); font-size: 15px; }
.fm-liste { display: grid; gap: 4px; }
.fm-liste .fm-l { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 13px 12px; border-radius: 16px; font-weight: 700; font-size: 15px; color: var(--encre); }
.fm-liste .fm-l.on, .fm-liste .fm-l:hover { background: rgba(234,84,98,.12); }
.fm-liste svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fm-liste small { font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; }

@media (max-width: 760px) {
  .contact { top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 92vh; border-radius: 26px 26px 0 0; transform: translateY(100%); }
  .contact.ouverte { transform: none; }
  .c-defile { padding: 26px 20px calc(22px + env(safe-area-inset-bottom)); }
  .c-2, .c-directs { grid-template-columns: 1fr; gap: 0 8px; } .c-directs { gap: 8px; }
  .c-direct { padding: 11px 14px; } .c-direct b { display: inline; margin: 0 0 0 8px; }
}

/* Signature, identique sur tous les sites publics Meyado */
.propulse { display: block; margin-top: 10px; font-size: 12px; font-weight: 600; opacity: .7; text-decoration: none; color: inherit; } .propulse:hover { opacity: 1; text-decoration: underline; }


body { background: var(--creme); color: var(--encre); }
.nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 30px; padding: 14px clamp(16px, 4vw, 56px); background: var(--corail); transition: box-shadow .3s; }
.nav.ombre { box-shadow: 0 10px 30px -18px rgba(0,0,0,.5); }
.nav .logo { height: 86px; width: auto; }
.nav ul { display: flex; gap: 30px; list-style: none; margin: 0 auto; padding: 0; }
.nav ul a { color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; opacity: .9; }
.nav ul a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
.nav .actions { display: flex; gap: 10px; align-items: center; }
.nav .btn { padding: 11px 18px; font-size: 12px; }
.nav .btn-ligne { color: #fff; }

.hero { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; min-height: calc(100vh - 78px); background: var(--corail); color: #fff; overflow: hidden; }
.hero-txt { padding: 60px 40px 80px clamp(20px, 5vw, 70px); display: flex; flex-direction: column; justify-content: center; }
.hero .etiquette { align-self: flex-start; background: var(--jaune); color: var(--encre); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; }
.hero h1 { font-size: clamp(44px, 6.4vw, 92px); font-weight: 900; color: var(--jaune); letter-spacing: -.025em; text-transform: uppercase; margin: 24px 0 0; }
/* L'entrée de l'accueil : les textes sont VISIBLES par défaut ; l'animation ne joue qu'à la première ouverture de la session
   (classe .intro posée par site.js puis retirée) — 01/10 : une animation relancée ou suspendue (capture d'écran, onglet en
   arrière-plan) laissait le titre, la phrase et les boutons cachés */
.hero h1 span { display: block; overflow: hidden; }
@media (min-width: 901px) { .hero h1 span { white-space: nowrap; } }   /* « une ligne par ligne affichée » : une ligne du titre ne se replie pas (souhaits du 02/10, titre anglais sur 7 lignes) */ .hero h1 i { display: block; font-style: normal; }
.intro .hero h1 i { animation: monte .9s cubic-bezier(.2,.8,.2,1) backwards; }
.intro .hero h1 span:nth-child(2) i { animation-delay: .12s; } .intro .hero h1 span:nth-child(3) i { animation-delay: .24s; }
@keyframes monte { from { transform: translateY(105%); } to { transform: none; } }
.hero-txt p { font-size: clamp(16px, 1.4vw, 20px); line-height: 1.6; max-width: 520px; margin: 26px 0 34px; }
.hero-txt .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.intro .hero-txt p { animation: apparait .8s .5s backwards; } .intro .hero-txt .cta { animation: apparait .8s .65s backwards; }
@keyframes apparait { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-img { position: relative; overflow: hidden; border-bottom-left-radius: 200px; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; }
.intro .hero-img img { animation: respire 1.6s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes respire { from { transform: scale(1.12); } to { transform: scale(1); } }
.badge { position: absolute; left: calc(51.2% - 78px); bottom: 70px; z-index: 3; width: 156px; height: 156px; border-radius: 50%; background: var(--jaune); color: var(--encre); display: grid; place-items: center; text-align: center; font-family: var(--display); font-weight: 800; font-size: 14px; line-height: 1.25; box-shadow: 0 14px 34px -12px rgba(0,0,0,.4); animation: tourne 14s linear infinite; }
.badge span { animation: tourne 14s linear infinite reverse; }
@keyframes tourne { to { transform: rotate(360deg); } }
.badge::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 2px dashed rgba(27,27,31,.25); }

.ruban { background: var(--jaune); overflow: hidden; padding: 18px 0; font-family: var(--display); font-weight: 900; font-size: clamp(18px, 2vw, 26px); text-transform: uppercase; color: var(--corail); }
.ruban div { display: flex; width: max-content; animation: defile 26s linear infinite; }
.ruban span { margin: 0 22px; white-space: nowrap; }
@keyframes defile { to { transform: translateX(-50%); } }

.section { padding: clamp(60px, 9vw, 110px) clamp(16px, 5vw, 70px); }
.tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 44px; flex-wrap: wrap; }
.tete h2 { font-size: clamp(34px, 4.4vw, 58px); font-weight: 900; text-transform: uppercase; margin-top: 12px; }
.tete p { max-width: 440px; color: var(--gris); line-height: 1.65; margin: 0; }
.sur { color: var(--corail); }

.grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.presta { background: #fff; border-radius: 26px; overflow: hidden; box-shadow: 0 1px 0 var(--ligne), 0 18px 40px -26px rgba(90,30,40,.35); transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.presta:hover { transform: translateY(-6px); box-shadow: 0 1px 0 var(--ligne), 0 30px 60px -30px rgba(90,30,40,.5); }
.presta .img { aspect-ratio: 5 / 3; overflow: hidden; }   /* = le cadre du recadrage dans la gestion */ .presta img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.presta:hover img { transform: scale(1.07); }
.presta .corps { padding: 22px 24px 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.presta .cat { display: inline-block; background: var(--rose); color: var(--corail-fonce); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; }
.presta h3 { font-size: 20px; font-weight: 800; text-transform: uppercase; margin: 12px 0 6px; }
.presta p { margin: 0; color: var(--gris); font-size: 14px; line-height: 1.5; }


.equipe { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; background: var(--rose); }
.equipe img { border-radius: 30px; height: min(560px, 70vh); width: 100%; object-fit: cover; object-position: center 35%; }
.equipe h2 { font-size: clamp(34px, 4vw, 52px); font-weight: 900; text-transform: uppercase; color: var(--corail); margin: 14px 0 22px; }
.equipe p { font-size: 17px; line-height: 1.7; margin: 0 0 28px; }

footer { background: var(--corail); color: #fff; padding: 50px clamp(16px, 5vw, 70px) 120px; display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
footer img { height: 140px; width: auto; }
footer .infos { text-align: right; font-weight: 700; line-height: 1.9; }
footer .tel { font-family: var(--display); font-size: 30px; color: var(--jaune); text-decoration: none; }

.revele { opacity: 0; transform: translateY(30px); transition: opacity .8s, transform .9s cubic-bezier(.2,.8,.2,1); }
.revele.vu { opacity: 1; transform: none; }
.pilule { display: none; }
@media (max-width: 900px) {
  .nav ul, .nav .btn-ligne { display: none; } .nav .actions { margin-left: auto; } .nav .logo { height: 58px; }
  .hero { grid-template-columns: 1fr; min-height: 0; } .hero-img { height: 52vh; border-radius: 0 0 0 120px; order: -1; }
  .badge { left: auto; right: 20px; top: calc(52vh - 90px); bottom: auto; width: 120px; height: 120px; font-size: 11px; }
  .grille { grid-template-columns: 1fr; } .equipe { grid-template-columns: 1fr; }
  footer .infos { text-align: left; }
  .hero h1 { font-size: 11vw; }
  .pilule { display: flex; }
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }   /* la pilule ne cache jamais le bas de la page */
}
/* téléphone : la barre du haut ne déborde jamais (sinon le navigateur élargit la page et la pilule sort de l'écran) ;
   « Composer ma fête » reste dans « Menu » et dans les boutons de la page */
@media (max-width: 600px) { .nav .btn-jaune { display: none; } .nav { gap: 12px; } }


/* Le sélecteur FR · EN (site FR + EN, #31) */
.langues { display: inline-flex; gap: 2px; background: rgba(0,0,0,.14); border-radius: 999px; padding: 3px; flex: none; }
.langues a { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #fff; text-decoration: none; padding: 6px 9px; border-radius: 999px; opacity: .8; }
.langues a.on { background: #fff; color: var(--encre, #1B1B1F); opacity: 1; }
.langues a:hover { opacity: 1; }

/* le champ piège anti-robot des formulaires : invisible sur TOUTES les pages (réaudit du 01/10 : visible sur « Mon univers ») */
.pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* La barre du haut sur un écran moyen (01/10 : depuis le sélecteur FR · EN, le logo s'écrasait à ~1000 px et « Mon univers »
   passait sur deux lignes) : le logo garde sa place, le menu se resserre, les libellés tiennent sur une ligne */
.nav > a:first-child { flex: none; }
.nav ul a, .nav .btn { white-space: nowrap; }
@media (max-width: 1280px) and (min-width: 901px) {
  .nav { gap: 18px; } .nav ul { gap: 16px; } .nav ul a { font-size: 12px; letter-spacing: .04em; }
  .nav .logo-se { height: 64px !important; } .nav .btn { padding: 10px 14px; font-size: 11px; }
}
/* quand la place manque : « L'équipe » puis « Contact » quittent la barre (toujours dans la page : « Nous rencontrer », le pied de page) */
@media (max-width: 1180px) and (min-width: 901px) { .nav ul li:has(a[href$="#equipe"]) { display: none; } }
@media (max-width: 1060px) and (min-width: 901px) { .nav ul li:has(a[data-contact]) { display: none; } .nav .logo-se { height: 54px !important; } }
/* le macaron « L'art de la Bar & Bat Mitzvah » ne passe plus sur la phrase quand la fenêtre est basse */

/* L'accueil s'adapte AUSSI à la hauteur de l'écran (Davy, 01/10 : « la taille n'est pas adaptée à ma résolution ») : sur un écran
   large mais peu haut, le titre se dimensionnait sur la largeur seule et poussait la phrase et les boutons hors de l'écran */
@media (min-width: 901px) {
  .nav { padding-top: clamp(8px, 1.4vh, 14px); padding-bottom: clamp(8px, 1.4vh, 14px); }
  .nav .logo-se { height: clamp(46px, 9vh, 86px) !important; }
  .hero { min-height: calc(100svh - clamp(62px, 11vh, 114px)); }
  .hero-txt { padding-top: clamp(16px, 5vh, 60px); padding-bottom: clamp(20px, 6vh, 80px); }
  .hero .etiquette { font-size: clamp(9.5px, 1.4vh, 11px); }
  .hero h1 { font-size: clamp(32px, min(6.4vw, 10.5vh), 92px); margin-top: clamp(10px, 2.6vh, 24px); }
  .hero-txt p { font-size: clamp(13.5px, min(1.4vw, 2.3vh), 20px); margin: clamp(12px, 2.8vh, 26px) 0 clamp(14px, 3.6vh, 34px); }
  .hero-txt .cta .btn { padding: clamp(10px, 1.7vh, 15px) clamp(16px, 1.8vw, 24px); }
  .badge { width: clamp(96px, 17vh, 156px); height: clamp(96px, 17vh, 156px); font-size: clamp(10px, 1.5vh, 14px); left: calc(51.2% - clamp(48px, 8.5vh, 78px)); bottom: clamp(16px, 7vh, 70px); }
}

/* Les liens vers les pages pour Google (#126), en pied de page de tout le site : « Nos fêtes » et « Où nous intervenons » */
.liens-fetes { flex-basis: 100%; font-size: 13px; font-weight: 600; }
.liens-fetes p { margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.liens-fetes b { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.liens-fetes a { color: inherit; text-decoration: none; opacity: .85; white-space: nowrap; } .liens-fetes a:hover { opacity: 1; text-decoration: underline; }
footer .liens-fetes { border-top: 1px solid rgba(255,255,255,.3); padding-top: 18px; }
footer.pied .liens-fetes { border: 0; padding: 0 0 12px; } footer.pied .liens-fetes p { justify-content: center; }

/* ——— Le site Show Kids (Davy, 21/10 : « le même que Show Event, avec les bonnes photos et couleurs ») ———
   Charte du 21/10 : bleu ciel #76CAE2 + rose #F7BECC, logo rose à contour blanc ; textes de couleur en bleu foncé #1F7A99
   (lisibles). Le bleu ciel sert de FOND (menu, haut de page, pied), avec le texte en encre : le blanc n'y serait pas lisible. */
html[data-marque="showkids"] { --corail: #1F7A99; --corail-fonce: #17617A; --jaune: #F7BECC; --rose: #FDEEF2; --creme: #F3FAFD; --ligne: #D6EAF2; --bleu-sk: #76CAE2; }
html[data-marque="showkids"] .nav, html[data-marque="showkids"] .hero, html[data-marque="showkids"] footer { background: var(--bleu-sk); color: var(--encre); }
html[data-marque="showkids"] .nav ul a, html[data-marque="showkids"] .nav .btn-ligne { color: var(--encre); }
html[data-marque="showkids"] .hero h1 { color: var(--encre); }
html[data-marque="showkids"] .hero .btn-ligne { color: var(--encre); }
html[data-marque="showkids"] .badge { background: var(--jaune); color: var(--encre); }
html[data-marque="showkids"] footer .tel { color: var(--encre); }
html[data-marque="showkids"] .logo-sk { filter: drop-shadow(0 6px 14px rgba(23,97,122,.25)); }