/* ── HALLOWEEN (24/10 → 01/11) ───────────────────────────────────────────
   Habillage saisonnier discret, activé par _chrome.php selon la date.
   Rien n'est retiré du site : ces règles ne font qu'AJOUTER. */
:root{--hw-orange:#ff7a1a;--hw-violet:#6d3fc0}
/* les halos du fond prennent les couleurs de la fête */
.ambient-a{background:rgba(255,122,26,.13)}
.ambient-b{background:rgba(109,63,192,.10)}
/* un fin liseré orange et violet sous l'en-tête */
.topbar{position:sticky}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;
  background:linear-gradient(90deg,var(--hw-orange),#ffb23a 35%,var(--hw-violet) 70%,var(--hw-orange));opacity:.85}
/* la citrouille posée au coin du logo */
.brand-mark{position:relative}
.hw-citrouille{position:absolute;right:-7px;bottom:-5px;width:24px;height:24px;
  filter:drop-shadow(0 2px 3px rgba(80,30,0,.25));transform:rotate(8deg)}
/* trois chauves-souris dans l'espace libre entre la marque et le menu.
   Ce sont des éléments du flux : quand la place manque (zoom, fenêtre étroite,
   menu NL/DE plus long), la boîte rétrécit et elles s'effacent une à une,
   jamais elles ne passent sur le menu. */
.hw-chauves{position:relative;flex:1 1 0;min-width:0;align-self:stretch;margin-inline:-16px;overflow:hidden;pointer-events:none;container-type:inline-size}
@media(max-width:1560px){.hw-chauves{margin-inline:-8px}}
.hw-cs{position:absolute;color:#3b2a5c;opacity:.8;animation:hw-vol 7s ease-in-out infinite}
.hw-cs svg{display:block;width:100%;height:auto;animation:hw-aile .45s ease-in-out infinite alternate;transform-origin:50% 40%}
.hw-cs.a{width:30px;top:18px;left:14px}
.hw-cs.b{width:21px;top:46px;left:58px;animation-delay:-2.3s;opacity:.65}
.hw-cs.c{width:16px;top:14px;left:94px;animation-delay:-4.6s;opacity:.5}
@container (max-width:140px){.hw-cs.c{display:none}}
@container (max-width:100px){.hw-cs.b{display:none}}
@container (max-width:60px){.hw-cs.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, elles s'y installent */
@media(min-width:1540px){
  .topbar-inner{position:relative}
  .hw-chauves{position:absolute;top:0;bottom:0;right:100%;width:150px;margin:0 14px 0 0;flex:none}
}
@keyframes hw-vol{0%,100%{transform:translate(0,0)}25%{transform:translate(-10px,-5px)}50%{transform:translate(-3px,-9px)}75%{transform:translate(8px,-3px)}}
@keyframes hw-aile{from{transform:scaleY(1)}to{transform:scaleY(.55)}}
/* la pastille de vœux, sur l'accueil */
.hw-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,#fff1e2,#f2eaff);border:1px solid rgba(255,122,26,.25);
  font:800 12px Manrope,system-ui,sans-serif;color:#7a3a07;letter-spacing:.01em}
.hw-voeux svg{width:20px;height:20px}
.hero .hw-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}
  .hw-chauves{position:absolute;left:0;top:0;bottom:0;width:96px;flex:none;margin:0;container-type:normal}
  .hw-cs.a{width:24px;top:14px;left:4px}.hw-cs.b{width:17px;top:38px;left:40px}.hw-cs.c{width:13px;top:12px;left:72px}
  .hw-citrouille{width:20px;height:20px;right:-6px;bottom:-4px}
}
@media(prefers-reduced-motion:reduce){.hw-cs,.hw-cs svg{animation:none}}