/* JLP Décryptage — saison Halloween 2026 (voir js/saison-halloween.js).
   Toutes les règles sont limitées à html.jlp-halloween : hors saison, cette
   feuille n'a aucun effet et aucune de ses images n'est téléchargée. */

/* 1. fond : Saint-Sébastien sous la lune d'Halloween, au-dessus du panorama
   habituel et sous le voile de lisibilité (z-index 2). Aucun clic intercepté. */
.jlp-hw-fond{display:none}
html.jlp-halloween .jlp-hw-fond{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
  background-color:#05070B;
  background-image:url(/images/accueil-halloween.jpg);
  background-image:image-set(url(/images/accueil-halloween.avif) type("image/avif"),
    url(/images/accueil-halloween.webp) type("image/webp"),url(/images/accueil-halloween.jpg) type("image/jpeg"));
  background-size:cover;background-position:center 46%;background-repeat:no-repeat;
  transform:scale(1);transform-origin:center center;backface-visibility:hidden}
html.jlp-halloween .jlpn-on .jlp-hw-fond{animation:jlpn-respire 30s cubic-bezier(.22,.61,.36,1) forwards;
  animation-iteration-count:1}
@media (max-width:768px) and (orientation:portrait){
  html.jlp-halloween .jlp-hw-fond{
    background-image:url(/images/accueil-halloween-mobile.jpg);
    background-image:image-set(url(/images/accueil-halloween-mobile.avif) type("image/avif"),
      url(/images/accueil-halloween-mobile.webp) type("image/webp"),url(/images/accueil-halloween-mobile.jpg) type("image/jpeg"));
    background-position:center top}
}
@media (max-width:900px){ html.jlp-halloween .jlpn-on .jlp-hw-fond{animation:none;transform:none} }
@media (prefers-reduced-motion:reduce){ html.jlp-halloween .jlpn-on .jlp-hw-fond{animation:none;transform:none} }
html.jlp-halloween:not([data-vue="home"]) .jlp-hw-fond{display:none}

/* voile : même lentille, teintée d'un bleu nuit plus profond pour calmer
   l'orangé de la lune derrière le texte défilant */
html.jlp-halloween .jlpn-voile{background:
  radial-gradient(62% 76% at 50% 50%,
    rgba(4,6,14,.62) 0%, rgba(4,6,14,.42) 44%, rgba(4,6,14,.14) 68%, rgba(4,6,14,0) 82%),
  linear-gradient(180deg,
    rgba(4,6,14,.56) 0%, rgba(4,6,14,.12) 18%,
    rgba(4,6,14,0) 46%, rgba(4,6,14,.18) 80%, rgba(4,6,14,.64) 100%)}
@media (max-width:900px){
  html.jlp-halloween .jlpn-voile{background:
    radial-gradient(88% 62% at 50% 50%,
      rgba(4,6,14,.66) 0%, rgba(4,6,14,.46) 46%, rgba(4,6,14,.14) 72%, rgba(4,6,14,0) 88%),
    linear-gradient(180deg,
      rgba(4,6,14,.60) 0%, rgba(4,6,14,.14) 20%,
      rgba(4,6,14,0) 48%, rgba(4,6,14,.20) 80%, rgba(4,6,14,.66) 100%)}
}

/* 2. icônes de navigation : mêmes glyphes, mêmes intitulés, mêmes zones de
   clic. Anneau ambré à halo orangé et petite toile d'araignée au bord. */
html.jlp-halloween .jlpn-nav-disque{position:relative}
html.jlp-halloween .jlpn-nav-anneau{stroke:rgba(236,146,62,.72);
  filter:drop-shadow(0 0 6px rgba(236,120,40,.45))}
html.jlp-halloween .jlpn-nav-fond{fill:rgba(10,8,12,.70)}
html.jlp-halloween .jlpn-nav-filet{background:rgba(236,146,62,.6)}
html.jlp-halloween .jlpn-nav-disque::after{content:"";position:absolute;pointer-events:none;
  top:-9%;right:-11%;width:44%;height:44%;opacity:.8;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23F0C9A0' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M40 0L14 26M40 0L4 10M40 0L30 36'/%3E%3Cpath d='M33 2.8Q34 7 36.6 7.6M26 5.6Q29 14 32.6 15.2M17 8.4Q24 21 28 24'/%3E%3Cpath d='M36.6 7.6Q34.2 9 33.6 12.4M32.6 15.2Q28 17.4 26.8 22.4M28 24Q21 26 18.6 31.4'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.6))}
@media (hover:hover){
  html.jlp-halloween .jlpn-nav:hover .jlpn-nav-anneau{stroke:rgba(248,170,84,.98);
    filter:drop-shadow(0 0 11px rgba(240,128,40,.65))}
  html.jlp-halloween .jlpn-nav:hover .jlpn-nav-filet{background:rgba(248,170,84,.9)}
}
html.jlp-halloween .jlpn-nav:focus-visible .jlpn-nav-disque{outline-color:rgba(248,170,84,.95)}