/* ── HABILLAGES DE FÊTE ───────────────────────────────────────────────────
   Une seule feuille pour toutes les fêtes : les couleurs arrivent en variables
   (--sz-*) depuis _chrome.php, qui lit la fête programmée dans l'admin
   (Paramètres › Habillages de fête). Rien n'est retiré du site : ces règles
   ne font qu'AJOUTER, et sans fête active la feuille n'est même pas chargée. */
/* les halos du fond prennent les couleurs de la fête */
.ambient-a{background:var(--sz-h1)}
.ambient-b{background:var(--sz-h2)}
/* un fin liseré sous l'en-tête */
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--sz-lis);opacity:.85}
/* le badge posé au coin du logo */
.brand-mark{position:relative}
.sz-badge{position:absolute;right:-7px;bottom:-5px;width:24px;height:24px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.22));transform:rotate(8deg)}
.sz-badge svg,.sz-voeux svg{display:block;width:100%;height:100%}
/* les motifs, dans l'espace LIBRE entre la marque et le menu : élément du flux,
   la boîte rétrécit au zoom ou en fenêtre étroite et ils s'effacent un à un,
   jamais ils ne passent sur le menu. */
.sz-motifs{position:relative;flex:1 1 0;min-width:0;align-self:stretch;margin-inline:-16px;overflow:hidden;pointer-events:none;container-type:inline-size;color:var(--sz-mc)}
@media(max-width:1560px){.sz-motifs{margin-inline:-8px}}
.sz-m{position:absolute}
.sz-m svg{display:block;width:100%;height:auto}
.sz-m.a{width:26px;top:18px;left:14px}
.sz-m.b{width:19px;top:44px;left:58px}
.sz-m.c{width:15px;top:14px;left:96px}
@container (max-width:140px){.sz-m.c{display:none}}
@container (max-width:100px){.sz-m.b{display:none}}
@container (max-width:60px){.sz-m.a{display:none}}
/* grands écrans : le menu remplit presque tout l'en-tête, mais la marge à
   gauche du logo (hors du cadre de 1180 px) est vide, ils s'y installent */
@media(min-width:1540px){
  .topbar-inner{position:relative}
  .sz-motifs{position:absolute;top:0;bottom:0;right:100%;width:150px;margin:0 14px 0 0;flex:none}
}
/* les cinq façons de bouger */
.sz-vol .sz-m{opacity:.8;animation:sz-flotte 7s ease-in-out infinite}
.sz-vol .sz-m svg{animation:sz-aile .45s ease-in-out infinite alternate;transform-origin:50% 40%}
.sz-plane .sz-m{animation:sz-flotte 8s ease-in-out infinite}
.sz-plane .sz-m svg{animation:sz-balance 2.4s ease-in-out infinite alternate;transform-origin:50% 0}
.sz-scintille .sz-m{animation:sz-scint 2.6s ease-in-out infinite}
.sz-chute .sz-m{top:-24px;animation:sz-chute 9s linear infinite}
.sz-monte .sz-m{top:auto;bottom:-24px;animation:sz-monte 8s ease-in infinite}
.sz-motifs .sz-m.b{animation-delay:-2.6s;opacity:.7}
.sz-motifs .sz-m.c{animation-delay:-5.2s;opacity:.55}
.sz-chute .sz-m.b,.sz-monte .sz-m.b{animation-duration:11s}
@keyframes sz-flotte{0%,100%{transform:translate(0,0)}25%{transform:translate(-10px,-5px)}50%{transform:translate(-3px,-9px)}75%{transform:translate(8px,-3px)}}
@keyframes sz-aile{from{transform:scaleY(1)}to{transform:scaleY(.55)}}
@keyframes sz-balance{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}
@keyframes sz-scint{0%,100%{transform:scale(.55) rotate(0);opacity:.35}50%{transform:scale(1) rotate(25deg);opacity:1}}
@keyframes sz-chute{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:1}50%{transform:translate(9px,60px) rotate(160deg)}90%{opacity:1}100%{transform:translate(-4px,118px) rotate(320deg);opacity:0}}
@keyframes sz-monte{0%{transform:translate(0,0) scale(.7);opacity:0}15%{opacity:.9}100%{transform:translate(-8px,-110px) scale(1);opacity:0}}
/* la pastille de vœux, sur l'accueil */
.sz-voeux{display:inline-flex;align-items:center;gap:7px;margin:0 0 12px;padding:6px 13px 6px 8px;border-radius:999px;
  background:linear-gradient(90deg,var(--sz-p1),var(--sz-p2));border:1px solid color-mix(in srgb,var(--sz-pt) 18%,transparent);
  font:800 12px Manrope,system-ui,sans-serif;color:var(--sz-pt);letter-spacing:.01em}
.sz-voeux i{display:block;width:20px;height:20px}
.hero .sz-voeux{grid-column:1/-1;justify-self:start;margin-bottom:-14px}
@media(max-width:680px){
  /* sur téléphone : dans l'espace réservé à gauche (le contrepoids de 96 px
     du sélecteur de langue), que la marque n'occupe jamais */
  .topbar-inner{position:relative}
  .sz-motifs{position:absolute;left:0;top:0;bottom:0;width:96px;flex:none;margin:0;container-type:normal}
  .sz-m.a{width:22px;top:14px;left:4px}.sz-m.b{width:16px;top:38px;left:40px}.sz-m.c{width:13px;top:12px;left:72px}
  .sz-chute .sz-m,.sz-monte .sz-m{top:auto}
  .sz-chute .sz-m{top:-24px}
  .sz-badge{width:20px;height:20px;right:-6px;bottom:-4px}
}
@media(prefers-reduced-motion:reduce){
  .sz-m,.sz-m svg{animation:none!important}
  .sz-chute .sz-m{top:20px}.sz-chute .sz-m.b{top:44px}
  .sz-monte .sz-m{bottom:auto;top:24px}.sz-monte .sz-m.b{top:44px}
}