/* Lumière des stores · monExpansion v2 (2026-09-24)

   Le soleil rasant qui passe à travers des lamelles et se pose sur un mur,
   comme sur la photo de couverture. Julien l'aime « un peu partout » et a
   choisi le mur « blanc studio avec store marqué » (ronde 3) : sur un aplat
   clair, les lamelles alternent lumière et ombre, sinon elles disparaissent
   dans le blanc. Plus discrète sur les aplats de couleur.

   Usage : premier enfant d'un bloc positionné, à fond uni.
     <span class="lumiere" aria-hidden="true"></span>          aplat clair
     <span class="lumiere lumiere--sombre" aria-hidden="true"></span>  aplat sombre
   Le bloc garde son contenu au-dessus (position: relative sur les enfants,
   ou isolation: isolate sur le bloc). */

.lumiere {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  border-radius: inherit;
}
/* La tache de soleil : une bande oblique, lamelles comprises, qui monte vers la droite. */
.lumiere::before {
  content: ""; position: absolute; left: -20%; right: -20%; top: -30%; bottom: -30%;
  background: repeating-linear-gradient(-16deg,
    rgba(122, 96, 70, .16) 0 9px,
    rgba(255, 253, 248, .92) 13px 25px,
    rgba(122, 96, 70, .16) 29px 38px);
  -webkit-mask-image:
    linear-gradient(74deg, transparent 38%, #000 50%, #000 66%, transparent 80%),
    linear-gradient(-16deg, transparent 0, #000 18%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(74deg, transparent 38%, #000 50%, #000 66%, transparent 80%),
    linear-gradient(-16deg, transparent 0, #000 18%, #000 78%, transparent 100%);
  mask-composite: intersect;
  filter: blur(1.8px);
  opacity: .9;
}
/* Le reste du mur, un peu plus dans l'ombre loin du soleil. */
.lumiere::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 85% 30%, rgba(255, 250, 242, .35), rgba(255, 250, 242, 0) 60%),
              linear-gradient(to bottom left, rgba(60, 40, 20, 0), rgba(60, 40, 20, .06));
}
.lumiere--sombre::before {
  background: repeating-linear-gradient(-16deg,
    rgba(255, 251, 243, 0) 0 11px, rgba(255, 251, 243, .95) 15px 27px, rgba(255, 251, 243, 0) 31px 38px);
  opacity: .075; filter: blur(4px);
}
.lumiere--sombre::after {
  background: radial-gradient(110% 90% at 85% 25%, rgba(255, 244, 228, .10), rgba(255, 244, 228, 0) 60%);
}
@media (prefers-reduced-motion: no-preference) {
  .lumiere::before { animation: lumiere-passe 40s ease-in-out infinite alternate; }
}
/* Le soleil bouge à peine, comme une vraie fin d'après-midi. */
@keyframes lumiere-passe { from { transform: translateX(-1.5%); } to { transform: translateX(1.5%); } }