/* lumiere.css — les points de couleur du site.
   Rouge, vert, bleu, dans cet ordre : arts vivants, arts plastiques,
   recherche et transmission — l'ordre des trois entrées de l'accueil. Au repos un point scintille ; la lumière ne rayonne qu'au
   passage de la souris (lumiere.js règle --i et --rad, la lueur est
   peinte sur un canevas). */

:root{
  --led-v:#c4281c; --led-p:#0f56a4; --led-r:#1a7f37; --led-w:#0f1214;
}
html[data-mode="sombre"]{
  --led-v:#f26b5b; --led-p:#8ab4f8; --led-r:#4cc38a; --led-w:#ffffff;
}

@keyframes led-scint-a{0%,100%{opacity:1}8%{opacity:.35}12%{opacity:1}47%{opacity:.9}52%{opacity:.25}58%{opacity:1}83%{opacity:.6}88%{opacity:1}}
@keyframes led-scint-b{0%,100%{opacity:1}20%{opacity:.5}26%{opacity:1}60%{opacity:.7}66%{opacity:1}90%{opacity:.55}}
@keyframes led-scint-c{0%,100%{opacity:1}30%{opacity:.4}34%{opacity:1}71%{opacity:.3}76%{opacity:.95}93%{opacity:.5}}

/* ─── Un point ─── */
.led{
  --c:var(--led-w); --i:.6; --rad:0;
  position:relative; display:block; width:9px; height:9px; border-radius:50%;
  pointer-events:none; flex:0 0 auto;
  opacity:max(.25,var(--i));
  transform:scale(calc(.9 + .6*var(--i)));
  filter:blur(calc(var(--rad)*4px));
  transition:transform .25s ease,filter .25s ease,opacity .25s ease;
}
.led[data-fam="v"]{--c:var(--led-v)}
.led[data-fam="p"]{--c:var(--led-r)}   /* arts plastiques : vert */
.led[data-fam="r"]{--c:var(--led-p)}   /* recherche et transmission : bleu */
.led::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,calc(.2 + .7*var(--rad))) 0%,var(--c) 62%);
  box-shadow:0 0 calc(3px + 14px*var(--i) + 14px*var(--rad)) var(--c);
  animation:led-scint-b var(--sd,4.1s) linear var(--dl,0s) infinite;
}
.led:nth-of-type(3n+1)::before{animation-name:led-scint-a}
.led:nth-of-type(3n)::before{animation-name:led-scint-c}

/* ─── Le logo : trois LED, rouge, vert, bleu ─── */
.pastilles circle{transform-box:fill-box;transform-origin:center;
  transform:scale(calc(1 + .5*var(--rad,0)));
  filter:blur(calc(var(--rad,0)*1.6px));
  transition:transform .25s ease,filter .25s ease,opacity .25s ease,
             cx 1s cubic-bezier(.4,0,.2,1),fill 1s ease,stroke 1s ease}
/* La couleur appartient à la PLACE, pas au cercle : rouge à gauche, vert au
   milieu, bleu à droite. lumiere.js pose --col en déplaçant les cercles. */
.pastilles circle:nth-of-type(1){stroke:var(--col,var(--led-v));animation:led-scint-a 3.7s linear 0s infinite;stroke-opacity:max(.3,var(--i,.85))}
.pastilles circle:nth-of-type(2){fill:var(--col,var(--led-r));fill-opacity:max(.25,calc(var(--i,.85)*.6));filter:blur(calc(2.5px + var(--rad,0)*2px))}
.pastilles circle:nth-of-type(3){fill:var(--col,var(--led-r));animation:led-scint-b 4.3s linear .4s infinite;fill-opacity:max(.3,var(--i,.85))}
.pastilles circle:nth-of-type(4){fill:var(--col,var(--led-p));animation:led-scint-c 3.1s linear 1.1s infinite;fill-opacity:max(.3,var(--i,.85))}

/* ─── Le canevas de lueur : au-dessus de la page, sans rien capter ─── */
#lumiere{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:30;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .led::before,.pastilles circle{animation:none !important}
  .led,.pastilles circle{transition:none}
}
@media print{#lumiere{display:none}}