/* ---- lrs-hz : la serie photocall du bloc d intro (363973) -------------------
   Quatorze photos de photocalls LORENTS : la soiree Quipment (fond annees 90
   et mur d affiches) et les Negociales a Nancy. Recadrees
   en 2:3 sur les visages. COUPE FRANCHE, deux secondes par photo
   (demande du 18/09) : aucun fondu, aucune derive facon Ken Burns.

   HABILLAGE STORY, repris du bloc d appel a l action de la page mariages
   (360741, module lrs-ca) : barres segmentees en haut — une par photo —,
   en-tete de compte avec pastille d avatar cerclee, voile haut et bas pour
   que cet habillage reste lisible sur une photo claire, et pastille de
   reponse en bas qui mene au devis. Palette du photocall (creme et accent
   orange) au lieu de l or du mariage.

   Chaque photo porte en plus une PASTILLE « #photocall » dans son tiers haut,
   facon autocollant : dix habillages repris en boucle, qui rejouent les familles
   de texte d Instagram. Aucune police n est telechargee : tout se joue sur la
   graisse, la casse, l interlettrage et les piles generiques du systeme.

   Tout est en CSS — LiteSpeed ne lance le JS qu au premier mouvement de souris,
   une serie en JS resterait figee jusque la. Les barres ne peuvent donc PAS
   partager un seul jeu d images-cles decale : il faudrait « vide avant mon
   tour, plein apres », ce qu un decalage negatif ne sait pas dire. D ou dix
   jeux, un par segment, tous sur le meme tour de 28.0 s (14 x 2 s).

   Le cadre garde EXACTEMENT l allure de la photo qu il remplace (rayon 16 px,
   meme ombre portee) : la mise en page du bloc ne bouge pas.
   Hauteur par padding-bottom et non par aspect-ratio (voir les tuiles qui se
   chevauchaient en grille).
   Selecteurs a TROIS classes : la regle du gabarit
   `body.postid-363973 .elementor-element-lrsdjimg img{height:auto}` compte
   (0,2,2) et ecraserait un selecteur plus court.
   `picture{display:contents}` : l optimiseur enveloppe les <img> en <picture>.
   `data-no-lazy` : le chargement differe attend lui aussi une interaction. */
.lrs-hz{position:relative;width:100%;padding-bottom:150%;container-type:inline-size;
  border-radius:var(--lrs-r,15px);overflow:hidden;background:#17120F;
  box-shadow:0 14px 36px rgba(0,0,0,.25)}
.lrs-hz *{box-sizing:border-box}
.lrs-hz .lrs-hz__bg{position:absolute;inset:0;overflow:hidden}
.lrs-hz .lrs-hz__bg .lrs-hz__sl{position:absolute;inset:0;margin:0;opacity:0;
  will-change:opacity;
  z-index:1;
  animation:lrs-hz-seq 28.0s linear infinite}
/* la premiere reste visible sans l animation : si le navigateur ne la joue pas
   (capture, moteur tiers), le bloc garde son visuel */
.lrs-hz .lrs-hz__bg .lrs-hz__sl--1{opacity:1}
.lrs-hz .lrs-hz__bg .lrs-hz__sl picture{display:contents}
.lrs-hz .lrs-hz__bg .lrs-hz__sl img{position:absolute;inset:0;
  display:block;width:100%;height:100%;object-fit:cover;object-position:50% 48%;
  border-radius:0;box-shadow:none;
  filter:brightness(1.04) contrast(1.03) saturate(1.02)}
.lrs-hz .lrs-hz__bg .lrs-hz__sl--1{animation-delay:-0.3s}
.lrs-hz .lrs-hz__bg .lrs-hz__sl--2{animation-delay:-26.3s}
.lrs-hz .lrs-hz__bg .lrs-hz__sl--3{animation-delay:-24.3s}
.lrs-hz .lrs-hz__bg .lrs-hz__sl--4{animation-delay:-22.3s}
.lrs-hz .lrs-hz__bg .lrs-hz__sl--5{animation-delay:-20.3s}
.lrs-hz .lrs-hz__bg .lrs-hz__sl--6{animation-delay:-18.3s}
.lrs-hz .lrs-hz__bg .lrs-hz__sl--7{animation-delay:-16.3s}
.lrs-hz .lrs-hz__bg .lrs-hz__sl--8{animation-delay:-14.3s}
.lrs-hz .lrs-hz__bg .lrs-hz__sl--9{animation-delay:-12.3s}
.lrs-hz .lrs-hz__bg .lrs-hz__sl--10{animation-delay:-10.3s}
.lrs-hz .lrs-hz__bg .lrs-hz__sl--11{animation-delay:-8.3s}
.lrs-hz .lrs-hz__bg .lrs-hz__sl--12{animation-delay:-6.3s}
.lrs-hz .lrs-hz__bg .lrs-hz__sl--13{animation-delay:-4.3s}
.lrs-hz .lrs-hz__bg .lrs-hz__sl--14{animation-delay:-2.3s}

/* micro-transition A RECOUVREMENT (18/09) : l entrant passe a z-index 3 et se
   devoile en 0,2 s, le sortant reste OPAQUE dessous puis tombe a 0 sans etre vu.
   Deux bascules simultanees laissaient voir le fond une image sur deux changements.
   Ni fondu long ni derive facon Ken Burns.
   Plus aucune `transform` ici — la pastille #photocall et l en-tete restent
   donc parfaitement nets, et le cadrage des visages ne bouge plus. */
@keyframes lrs-hz-seq{
  0%      {opacity:0;z-index:3}
  0.7143%  {opacity:1}
  7.1429%  {z-index:3}
  7.1536%  {z-index:1}
  7.8571%  {opacity:1}
  8.2143%  {opacity:0}
  100%    {opacity:0;z-index:1}
}

/* ---------- voile haut et bas, comme la carte de la page mariages ---------- */
.lrs-hz .lrs-hz__vo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,11,8,.55) 0%,rgba(15,11,8,0) 26%,
    rgba(15,11,8,0) 72%,rgba(15,11,8,.55) 100%)}

/* ---------- barres segmentees ---------- */
.lrs-hz .lrs-hz__bars{position:absolute;top:10px;left:10px;right:10px;z-index:3;
  display:flex;gap:var(--lrs-e1,4px);margin:0;padding:0;list-style:none}
.lrs-hz .lrs-hz__bars li{flex:1;height:2.5px;border-radius:2px;
  background:rgba(246,241,236,.35);overflow:hidden}
.lrs-hz .lrs-hz__bars li i{display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:0 50%;background:#F6F1EC;border-radius:2px;
  animation-duration:28.0s;animation-delay:-0.3s;animation-timing-function:linear;
  animation-iteration-count:infinite}
.lrs-hz .lrs-hz__bars li:nth-child(1) i{animation-name:lrs-hz-b1}
.lrs-hz .lrs-hz__bars li:nth-child(2) i{animation-name:lrs-hz-b2}
.lrs-hz .lrs-hz__bars li:nth-child(3) i{animation-name:lrs-hz-b3}
.lrs-hz .lrs-hz__bars li:nth-child(4) i{animation-name:lrs-hz-b4}
.lrs-hz .lrs-hz__bars li:nth-child(5) i{animation-name:lrs-hz-b5}
.lrs-hz .lrs-hz__bars li:nth-child(6) i{animation-name:lrs-hz-b6}
.lrs-hz .lrs-hz__bars li:nth-child(7) i{animation-name:lrs-hz-b7}
.lrs-hz .lrs-hz__bars li:nth-child(8) i{animation-name:lrs-hz-b8}
.lrs-hz .lrs-hz__bars li:nth-child(9) i{animation-name:lrs-hz-b9}
.lrs-hz .lrs-hz__bars li:nth-child(10) i{animation-name:lrs-hz-b10}
.lrs-hz .lrs-hz__bars li:nth-child(11) i{animation-name:lrs-hz-b11}
.lrs-hz .lrs-hz__bars li:nth-child(12) i{animation-name:lrs-hz-b12}
.lrs-hz .lrs-hz__bars li:nth-child(13) i{animation-name:lrs-hz-b13}
.lrs-hz .lrs-hz__bars li:nth-child(14) i{animation-name:lrs-hz-b14}
@keyframes lrs-hz-b1{0%{transform:scaleX(0)}0.0%{transform:scaleX(0)}7.1429%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes lrs-hz-b2{0%{transform:scaleX(0)}7.1429%{transform:scaleX(0)}14.2857%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes lrs-hz-b3{0%{transform:scaleX(0)}14.2857%{transform:scaleX(0)}21.4286%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes lrs-hz-b4{0%{transform:scaleX(0)}21.4286%{transform:scaleX(0)}28.5714%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes lrs-hz-b5{0%{transform:scaleX(0)}28.5714%{transform:scaleX(0)}35.7143%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes lrs-hz-b6{0%{transform:scaleX(0)}35.7143%{transform:scaleX(0)}42.8571%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes lrs-hz-b7{0%{transform:scaleX(0)}42.8571%{transform:scaleX(0)}50.0%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes lrs-hz-b8{0%{transform:scaleX(0)}50.0%{transform:scaleX(0)}57.1429%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes lrs-hz-b9{0%{transform:scaleX(0)}57.1429%{transform:scaleX(0)}64.2857%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes lrs-hz-b10{0%{transform:scaleX(0)}64.2857%{transform:scaleX(0)}71.4286%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes lrs-hz-b11{0%{transform:scaleX(0)}71.4286%{transform:scaleX(0)}78.5714%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes lrs-hz-b12{0%{transform:scaleX(0)}78.5714%{transform:scaleX(0)}85.7143%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes lrs-hz-b13{0%{transform:scaleX(0)}85.7143%{transform:scaleX(0)}92.8571%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes lrs-hz-b14{0%{transform:scaleX(0)}92.8571%{transform:scaleX(0)}100.0%{transform:scaleX(1)}100%{transform:scaleX(1)}}

/* ---------- en-tete de compte ---------- */
.lrs-hz .lrs-hz__hd{position:absolute;top:22px;left:12px;right:12px;z-index:3;
  display:flex;align-items:center;gap:10px;color:#F6F1EC;
  font-family:Montserrat,-apple-system,'Helvetica Neue',Arial,sans-serif;
  text-shadow:0 1px 8px rgba(15,11,8,.55)}
.lrs-hz .lrs-hz__av{width:36px;height:36px;border-radius:999px;padding:2px;
  background:linear-gradient(135deg,#EEB69B,#E07A4A 55%,#E07A4A);flex:0 0 auto}
.lrs-hz .lrs-hz__av span{display:grid;place-items:center;width:100%;height:100%;
  border-radius:999px;background:#17120F;border:2px solid #17120F;
  font-weight:800;font-size:15px;line-height:1;color:#E07A4A}
.lrs-hz .lrs-hz__nom{font-size:13px;font-weight:700;letter-spacing:.02em}
.lrs-hz .lrs-hz__nom small{font-weight:400;font-size:12px;opacity:.8;margin-left:8px}

/* ---------- pastille de reponse ---------- */
.lrs-hz .lrs-hz__rep{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 6px 0 16px;height:42px;border-radius:999px;
  border:1px solid rgba(246,241,236,.6);color:#F6F1EC;text-decoration:none;
  font-family:Montserrat,-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-size:13px;font-weight:500;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  background:rgba(15,11,8,.18);
  transition:background .25s,border-color .25s}
.lrs-hz .lrs-hz__rep:hover{background:rgba(224,122,74,.35);border-color:#E07A4A;
  color:#F6F1EC}
.lrs-hz .lrs-hz__rep svg{width:30px;height:30px;padding:6px;border-radius:999px;
  background:#E07A4A;fill:none;stroke:#F6F1EC;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* ---------- la pastille #photocall ---------- */
/* Socle commun. `top` reste entre 14 et 30 % : sous l en-tete de compte,
   au-dessus des visages. */
.lrs-hz .lrs-hz__bg .lrs-hz__tag{
  position:absolute;z-index:2;display:inline-block;white-space:nowrap;
  font-family:Montserrat,-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-size:15px;font-size:clamp(13px,2.6cqw,17px);line-height:1;letter-spacing:.01em;
  font-weight:700;color:#F6F1EC;
  text-shadow:0 2px 12px rgba(0,0,0,.55)}

.lrs-hz .lrs-hz__bg .lrs-hz__tag--classique{left:50%;top:18%;transform:translateX(-50%)}

.lrs-hz .lrs-hz__bg .lrs-hz__tag--pastille{
  left:8%;top:22%;transform:rotate(-4deg);
  padding:8px 15px;border-radius:999px;background:#F6F1EC;color:#0F0B08;
  text-shadow:none;box-shadow:0 6px 18px rgba(0,0,0,.35)}

.lrs-hz .lrs-hz__bg .lrs-hz__tag--neon{
  left:50%;top:16%;transform:translateX(-50%);
  font-weight:800;color:#F3CAB7;
  text-shadow:0 0 6px rgba(224,122,74,.95),0 0 18px rgba(224,122,74,.85),
    0 0 34px rgba(224,122,74,.55)}

.lrs-hz .lrs-hz__bg .lrs-hz__tag--machine{
  right:8%;top:24%;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-weight:600;letter-spacing:.08em;
  padding:7px 12px;border-radius:6px;background:rgba(15,11,8,.55);
  text-shadow:none}

.lrs-hz .lrs-hz__bg .lrs-hz__tag--costaud{
  left:7%;top:17%;
  font-weight:900;text-transform:uppercase;letter-spacing:-.02em;
  font-size:19px;font-size:clamp(15px,3.2cqw,21px);
  text-shadow:0 3px 0 rgba(15,11,8,.45)}

.lrs-hz .lrs-hz__bg .lrs-hz__tag--moderne{
  left:50%;top:19%;transform:translateX(-50%);
  font-weight:300;text-transform:uppercase;letter-spacing:.34em;
  font-size:12px;font-size:clamp(11px,2.1cqw,13px)}

.lrs-hz .lrs-hz__bg .lrs-hz__tag--contour{
  left:50%;top:21%;transform:translateX(-50%) rotate(2deg);
  padding:7px 15px;border-radius:999px;border:1.5px solid rgba(246,241,236,.85);
  text-transform:uppercase;letter-spacing:.12em;
  font-size:12px;font-size:clamp(11px,2.1cqw,13px)}

.lrs-hz .lrs-hz__bg .lrs-hz__tag--degrade{
  left:50%;top:17%;transform:translateX(-50%);
  font-weight:800;text-shadow:none;
  /* accent CLAIR au centre : sur un fond charge le brun d origine passait
     sous le seuil de lisibilite */
  background-image:linear-gradient(45deg,#F6F1EC 0%,#EEB69B 50%,#F6F1EC 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.85)) drop-shadow(0 0 14px rgba(0,0,0,.5))}

.lrs-hz .lrs-hz__bg .lrs-hz__tag--verre{
  right:7%;top:20%;transform:rotate(3deg);
  padding:8px 15px;border-radius:999px;
  background:rgba(15,11,8,.32);border:1px solid rgba(246,241,236,.32);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-weight:600;text-shadow:none}

.lrs-hz .lrs-hz__bg .lrs-hz__tag--serif{
  left:8%;top:23%;transform:rotate(-3deg);
  font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;
  font-size:21px;font-size:clamp(16px,3.4cqw,23px);letter-spacing:0}

@media(prefers-reduced-motion:reduce){
  .lrs-hz .lrs-hz__bg .lrs-hz__sl{animation:none;opacity:0}
  .lrs-hz .lrs-hz__bg .lrs-hz__sl--1{opacity:1}
  .lrs-hz .lrs-hz__bars li i{animation:none;transform:scaleX(0)}
  .lrs-hz .lrs-hz__bars li:nth-child(1) i{transform:scaleX(1)}
}