/* Bande « Entreprise inventée · Retour à Pêche & Pixel » : toujours visible en haut de l'écran (9 exemples).
   Chargée après le CSS de chaque exemple. La bande est position:sticky (elle garde sa place : rien n'est caché dessous),
   les menus et barres collantes de chaque exemple sont décalés de sa hauteur --ppb (encoche iPhone comprise). */
:root{--ppb-h:44px;--ppb:calc(var(--ppb-h) + env(safe-area-inset-top,0px))}
@media (min-width:761px){:root{--ppb-h:40px}}
p.pp-bande{position:-webkit-sticky;position:sticky;top:0;z-index:2147483000;box-sizing:border-box;max-width:none;width:auto;height:var(--ppb);margin:0;
  padding:env(safe-area-inset-top,0px) max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px));
  display:flex;align-items:center;justify-content:center;gap:4px 12px;white-space:nowrap;overflow:hidden;text-align:left;
  font:500 13.5px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:0;text-transform:none;
  background:#17121F;color:#F3EBE4;border:0;border-bottom:1px solid rgba(255,244,236,.14);box-shadow:0 2px 10px rgba(0,0,0,.18)}
p.pp-bande .ppb-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
p.pp-bande a{flex:none;display:inline-flex;align-items:center;height:var(--ppb-h);min-height:0;padding:0 6px;margin:0 -6px 0 0;
  color:#FFB38A;font:700 13.5px/1.2 inherit;font-family:inherit;text-decoration:underline;text-underline-offset:3px;background:none;border:0}
p.pp-bande a::before{content:"\2190\00a0";text-decoration:none;display:inline-block}
p.pp-bande a:hover{color:#FFD2B8}
p.pp-bande a:focus-visible{outline:2px solid #FFB38A;outline-offset:-3px;border-radius:4px}
@media (max-width:760px){p.pp-bande .ppb-x{display:none}p.pp-bande{justify-content:space-between}}
@media (max-width:340px){p.pp-bande .ppb-t{display:none}p.pp-bande{justify-content:center}}
/* menu mobile ouvert : body.menu-ouvert{overflow:hidden} fait de body le conteneur de défilement et la bande sticky partirait avec la page ; on la fixe à l'écran le temps du menu */
body.menu-ouvert p.pp-bande{position:fixed;left:0;right:0;top:0}
@media print{p.pp-bande{position:static}}

/* ---- Anciens exemples (Cap Glisse, Copeaux & Fils, Coquelicot & Cie, Le Petit Zinc, Les Nuits Bleues, Les Volets Bleus) ---- */
html[data-site] .hd{top:var(--ppb)}                         /* en-tête collant ou fixe : juste sous la bande */
html[data-site] .menu{top:var(--ppb)}                       /* menu mobile plein écran : commence sous la bande */
:root[data-site]{scroll-padding-top:calc(var(--ppb) + 88px)}
:root[data-site="loisirs"]{scroll-padding-top:calc(var(--ppb) + 80px)}
:root[data-site="artisan"],:root[data-site="commerce"],:root[data-site="musique"]{scroll-padding-top:calc(var(--ppb) + var(--hd) + 16px)}
/* commerce, page produits : les onglets collants (66px) s'ajoutent sous l'en-tête ; sans ça le titre de rayon tombait dessous (défaut déjà présent avant la bande) */
:root[data-site="commerce"]:has(.onglets){scroll-padding-top:calc(var(--ppb) + var(--hd) + 66px + 16px)}
@media (min-width:1024px){html[data-site="loisirs"] .ze-faits{top:calc(var(--ppb) + 88px)}}
html[data-site="artisan"] .infos-img{top:calc(var(--ppb) + var(--hd) + 24px)}
html[data-site="commerce"] .onglets{top:calc(var(--ppb) + var(--hd))}
html[data-site="restaurant"] .menu{top:calc(var(--ppb) + 72px)}
html[data-site="restaurant"] .onglets{top:calc(var(--ppb) + 72px)}
html[data-site="restaurant"] .resa-img{top:var(--ppb);height:calc(100vh - var(--ppb))}
html[data-site="restaurant"] .sa-horizon{top:calc(var(--ppb) + var(--sa-head,64px))}
html[data-site="restaurant"] .sa-onglets{top:calc(var(--ppb) + var(--sa-head,64px))}
@media (min-width:1024px){html[data-site="restaurant"] .sa-col-photo{top:calc(var(--ppb) + var(--sa-head,64px) + 72px)}}
html[data-site="musique"] .menu{top:calc(var(--ppb) + var(--hd))}
html[data-site="musique"] .nb-manif-scene .nb-manif-cadre{top:var(--ppb);height:calc(100svh - var(--ppb))}
html[data-site="gite"] .chambre-txt{top:calc(var(--ppb) + 110px)}
html[data-site="gite"] .contact-img{top:calc(var(--ppb) + 96px)}
@media (min-width:1024px){html[data-site="gite"] .lu-chambre-texte{top:calc(var(--ppb) + 96px)}}

/* ---- Altitude 9 (body.bu) et Marée Haute (body.br) ---- */
body.bu .tete,body.br .tete{top:var(--ppb)}
body.bu .menu-m{top:calc(var(--ppb) + 72px)}
body.br .menu-m{top:calc(var(--ppb) + 64px)}
body.bu .recap{top:calc(var(--ppb) + 96px)}
:root:has(body.bu){scroll-padding-top:calc(var(--ppb) + 90px)}
:root:has(body.br){scroll-padding-top:calc(var(--ppb) + 84px)}

/* ---- Maquis & Saveurs : en-tête non collant ; colonne de filtres collante, panneau de filtres mobile ---- */
.filtres{top:calc(var(--ppb) + 16px)}
@media (max-width:820px){.filtres{top:var(--ppb)!important;height:calc(100dvh - var(--ppb))!important}}
:root:has(.pp-bande):not([data-site]):not(:has(body.bu)):not(:has(body.br)){scroll-padding-top:calc(var(--ppb) + 16px)}