/* =====================================================================
   lrs-ag--home v2 (12/09/2026) — hero de l'accueil (364536), construit
   comme le hero lrs-ag de la page agence (350114) : section plein ecran,
   voile, lueur, grain, colonne de texte calee en bas, pastille et filet
   de progression. A la place de la video, un diaporama de quatre photos,
   une par famille citee dans la tagline : audiovisuel, scenographie,
   animation, photo et video.
   Tout le mouvement est en CSS : aucun script a differer. Chaque calque
   porte une seule animation de 24 s (opacite, plan, zoom lent) ; les
   retards negatifs calent les quatre calques sur le meme cycle, la
   premiere photo deja pleine a l'arrivee (1,5 s dans son cycle). Le calque entrant passe
   au-dessus (ordre fixe) pendant que le sortant reste opaque dessous :
   aucun creux sombre entre deux photos ; de la quatrieme a la premiere,
   la premiere est pleine dessous et la quatrieme s'efface. Le surtitre reste le H1 de la page, le titre un H2.
   Classes redoublees contre le kit 349007.
   v2.1 (17/09/2026) : plus de z-index anime (empilement fixe 1 < 2 < 3 < 4 ;
   la quatrieme s'efface pour decouvrir la premiere, deja pleine dessous) ;
   photos 2 a 4 chargees apres la page, diaporama en attente jusque-la ;
   pause hors ecran ; reflet declenche par le script ; pouls des pastilles
   en transformation. Tout ce qui bouge passe par la carte graphique.
   ===================================================================== */

/* --- le conteneur Elementor 29b1b034 ne fait plus que porter le module :
   ni fond video, ni voile, ni hauteur, ni marges (Elementor, homegrad et
   l'ancien mu-plugin lui en donnaient) --- */
html body.page-id-364536 .elementor-element-29b1b034.elementor-element-29b1b034.e-con{
  display:block !important;padding:0 !important;margin:0 !important;
  --min-height:0px !important;min-height:0 !important;height:auto !important;
  background:none !important}
html body.page-id-364536 .elementor-element-29b1b034.elementor-element-29b1b034::before,
html body.page-id-364536 .elementor-element-29b1b034.elementor-element-29b1b034::after{
  content:none !important}
html body.page-id-364536 .elementor-element-29b1b034 > .elementor-widget{margin:0 !important}
html body.page-id-364536 .elementor-element-29b1b034 > .elementor-element-lrsaghome{
  width:100% !important;max-width:none !important}
/* reperes de l'ancien hero (widget b080130) : halo qui suivait la souris et
   invite au defilement, absents du hero agence */
html body.page-id-364536 .elementor-element-29b1b034 .lrs-hx__halo,
html body.page-id-364536 .elementor-element-29b1b034 .lrs-hx__cue{display:none !important}

.lrs-ag.lrs-ag--home{
  --pp:var(--lrs-paper,#F6F1EC);
  --c2:var(--lrs-accent-lit,#E07A4A);
  --nu:#12100E;
  --tn:246,241,236;
  position:relative;isolation:isolate;overflow:hidden;
  width:100%;margin:0;
  min-height:calc(100vh - 82px);min-height:calc(100svh - 82px);
  display:flex;align-items:flex-end;
  background:var(--nu);
  font-family:'Montserrat',-apple-system,'Helvetica Neue',Arial,sans-serif}
.lrs-ag.lrs-ag *{box-sizing:border-box}

/* --- le diaporama ---------------------------------------------------- */
.lrs-ag__bg.lrs-ag__bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--nu)}
.lrs-ag .lrs-ag__sl.lrs-ag__sl{position:absolute;inset:0;z-index:1;margin:0;padding:0;
  opacity:0;transform:scale(1.06);transform-origin:50% 50%;
  animation:lrsAgSlide 24s linear infinite both}
/* sans animation (moteur ancien, mouvement reduit), la premiere photo reste */
.lrs-ag .lrs-ag__sl--1.lrs-ag__sl--1{z-index:1;opacity:1;transform:none;animation-name:lrsAgSlide1;animation-delay:-1.5s}
.lrs-ag .lrs-ag__sl--2.lrs-ag__sl--2{z-index:2;animation-delay:-19.5s}
.lrs-ag .lrs-ag__sl--3.lrs-ag__sl--3{z-index:3;animation-delay:-13.5s}
.lrs-ag .lrs-ag__sl--4.lrs-ag__sl--4{z-index:4;animation-name:lrsAgSlide4;animation-delay:-7.5s}
.lrs-ag .lrs-ag__sl picture{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0}
/* body img{height:auto!important} du site sous 767 px viderait le calque */
html body .lrs-ag .lrs-ag__sl img.lrs-ag__im.lrs-ag__im{
  position:absolute !important;inset:0 !important;display:block !important;
  width:100% !important;height:100% !important;max-width:none !important;
  margin:0 !important;border-radius:0 !important;
  object-fit:cover;object-position:var(--lrs-ag-fx,50%) 50%;
  filter:saturate(1.06) contrast(1.05)}
/* centre horizontal de chaque sujet : sert quand l'ecran est plus etroit
   que la photo (tablette en portrait) */
.lrs-ag__sl--2{--lrs-ag-fx:58%}
.lrs-ag__sl--3{--lrs-ag-fx:55%}
.lrs-ag__sl--4{--lrs-ag-fx:35%}

/* cycle de 24 s, 6 s par photo, fondu de 1,4 s, empilement fixe (la 4 au-dessus) :
   0 -> 1,4 s   la photo entre par-dessus la precedente ;
   1,4 -> 6 s   pleine ;
   6 -> 7,4 s   la suivante entre par-dessus, celle-ci reste pleine dessous ;
   7,5 -> 24 s  masquee, le zoom revient a son point de depart sans etre vu.
   La premiere, sous toutes les autres, redevient pleine a 23,9 s sous la quatrieme,
   qui s'efface de 6 a 7,4 s de son cycle pour la decouvrir. */
@keyframes lrsAgSlide{
  0%{opacity:0;transform:scale(1.06)}
  5.8333%{opacity:1}
  30.8333%{opacity:1;transform:scale(1)}
  31.25%{opacity:0;transform:scale(1.06)}
  100%{opacity:0;transform:scale(1.06)}}
@keyframes lrsAgSlide1{
  0%{opacity:1;transform:scale(1.06)}
  30.8333%{opacity:1;transform:scale(1)}
  31.25%{opacity:0;transform:scale(1.06)}
  99.5833%{opacity:0;transform:scale(1.06)}
  100%{opacity:1;transform:scale(1.06)}}
@keyframes lrsAgSlide4{
  0%{opacity:0;transform:scale(1.06)}
  5.8333%{opacity:1}
  25%{opacity:1}
  30.8333%{opacity:0;transform:scale(1)}
  31.25%{opacity:0;transform:scale(1.06)}
  100%{opacity:0;transform:scale(1.06)}}
/* v2.1 : diaporama, pastilles et filet attendent les photos 2 a 4 (is-pret, pose par le script) ;
   sans script, la premiere photo reste seule. Aucune animation en attente (une animation en pause retarde
   la prise en compte de la photo 1 dans le LCP) : la photo 1 et le filet sont figes a l'etat ou le cycle
   les reprendra (1,5 s : zoom 1,0478, filet au quart), rien ne saute au depart.
   Hors ecran (is-hors), tout le module est en pause. */
.lrs-ag:not(.is-pret) .lrs-ag__sl,.lrs-ag:not(.is-pret) .lrs-ag__tag,.lrs-ag:not(.is-pret) .lrs-ag__bar::after{animation:none}
.lrs-ag:not(.is-pret) .lrs-ag__sl--1.lrs-ag__sl--1{transform:scale(1.0478)}
.lrs-ag:not(.is-pret) .lrs-ag__bar.lrs-ag__bar::after{transform:scaleX(.25)}
.lrs-ag.lrs-ag.is-hors *,.lrs-ag.lrs-ag.is-hors *::before,.lrs-ag.lrs-ag.is-hors *::after{animation-play-state:paused !important}

/* voile : assombri en haut pour l'en-tete, dense a gauche sous le texte,
   ferme en bas pour raccorder au bloc suivant */
.lrs-ag__veil.lrs-ag__veil{position:absolute;inset:0;z-index:5;
  background:
    linear-gradient(180deg,rgba(9,8,7,.90) 0%,rgba(9,8,7,.42) 24%,rgba(9,8,7,.40) 50%,rgba(18,16,14,.92) 88%,#12100E 100%),
    linear-gradient(94deg,rgba(9,8,7,.94) 0%,rgba(9,8,7,.82) 26%,rgba(9,8,7,.50) 50%,rgba(9,8,7,.10) 76%,rgba(9,8,7,0) 92%)}
/* lueur chaude qui derive lentement */
.lrs-ag__glow.lrs-ag__glow{position:absolute;inset:-15%;z-index:6;pointer-events:none;
  background:radial-gradient(38% 44% at 74% 34%,rgba(224,122,74,.26),rgba(224,122,74,0) 68%);
  animation:lrsAgGlow 26s ease-in-out infinite alternate}
/* vignette + grain : la texture argentique qui evite le fond plat */
.lrs-ag__grain.lrs-ag__grain{position:absolute;inset:0;z-index:7;pointer-events:none;
  background-image:
    radial-gradient(118% 96% at 50% 42%,rgba(0,0,0,0) 40%,rgba(0,0,0,.52) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  background-size:auto,160px 160px;mix-blend-mode:soft-light;opacity:.9}

/* --- la colonne de texte --------------------------------------------- */
/* 16/09/2026 : 1248 px = la colonne de 1200 px du site + les 24 px de marge interne de chaque cote, comme les heros des
   prestations (lorents-hero-prestation.php v1.12) : l'encre du hero s'aligne sur les autres blocs de la page des 1248 px,
   et garde 24 px de bord en dessous (1200 px avant : encre a 1152). */
.lrs-ag__in.lrs-ag__in{position:relative;z-index:4;width:100%;
  max-width:1248px;margin:0 auto;
  padding:104px 24px 92px}
/* second voile accroche au bloc de texte, et non a la hauteur d'ecran :
   la lisibilite tient quelle que soit la photo a l'image */
.lrs-ag__in.lrs-ag__in::before{content:"";position:absolute;z-index:-1;
  left:-18vw;right:16%;top:-40px;bottom:-70px;pointer-events:none;
  background:radial-gradient(64% 74% at 34% 52%,rgba(9,8,7,.80) 0%,rgba(9,8,7,.52) 46%,rgba(9,8,7,0) 78%)}

/* le surtitre est le H1 de la page : corps, interligne et graisse verrouilles
   face aux regles h1 du kit ; couleur accent et longueur du filet viennent du kit */
.lrs-ag__kick.lrs-ag__kick{display:flex;align-items:center;gap:14px;
  margin:0 0 22px !important;padding:0 !important;
  font-family:'Montserrat',-apple-system,Arial,sans-serif !important;
  font-size:11px !important;font-weight:600 !important;letter-spacing:.24em !important;
  line-height:1.2 !important;text-transform:uppercase !important;
  color:rgba(var(--tn),.72) !important;
  opacity:0;animation:lrsAgIn .9s cubic-bezier(.22,1,.28,1) .15s both}
.lrs-ag--home .lrs-ag__kick.lrs-ag__kick{color:var(--c2) !important}
.lrs-ag__rule.lrs-ag__rule{display:block;width:56px;height:1px;flex:none;
  background:var(--c2);transform-origin:left center;transform:scaleX(0);
  animation:lrsAgRule .9s cubic-bezier(.22,1,.28,1) .35s both}

.lrs-ag .lrs-ag__t.lrs-ag__t{
  color:var(--lrs-paper,#F6F1EC) !important;
  margin:0 0 34px !important;padding:0 !important;
  font-family:'Montserrat',-apple-system,Arial,sans-serif !important;
  font-weight:800 !important;text-transform:uppercase !important;
  font-size:clamp(40px,8vw,108px) !important;line-height:.94 !important;
  letter-spacing:-.035em !important;color:var(--pp) !important;text-align:left !important}
/* chaque ligne monte depuis sa propre reserve */
.lrs-ag__ln.lrs-ag__ln{display:block;overflow:hidden;padding-bottom:.06em}
.lrs-ag .lrs-ag__t em{font-style:normal !important;font-weight:800 !important}
.lrs-ag__ln.lrs-ag__ln > span{display:block;transform:translate3d(0,108%,0);
  animation:lrsAgLine 1.15s cubic-bezier(.19,1,.22,1) both}
.lrs-ag__ln--1.lrs-ag__ln--1 > span{animation-delay:.30s}
.lrs-ag__ln--2.lrs-ag__ln--2 > span{animation-delay:.42s}
/* le mot-cle : terre cuite de la charte (--lrs-accent, celle des boutons),
   une lame claire le traverse puis marque une pause (13/09/2026).
   Pas de .lrs-kw sur ce mot, et pas de !important sur background-position :
   une declaration !important passe devant une animation, le reflet restait
   fige a 100 % (la regle .lrs-kw du kit pose sa position en !important). */
html body.page-id-364536 .lrs-ag--home h1 em.lrs-ag__kw.lrs-ag__kw.lrs-ag__kw.lrs-ag__kw.lrs-ag__kw{
  font-style:normal !important;font-weight:800 !important;
  background-image:linear-gradient(112deg,
    var(--lrs-accent,#E07A4A) 0%,var(--lrs-accent,#E07A4A) 46%,#FFF3E8 50%,
    var(--lrs-accent,#E07A4A) 54%,var(--lrs-accent,#E07A4A) 100%) !important;
  background-size:260% auto !important;
  background-position:100% center;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
  animation:none !important}
/* v2.1 : la lame passe quand le script pose is-lame (toutes les 6 s, hero a l'ecran) :
   plus rien ne tourne pendant la pause entre deux passages */
html body.page-id-364536 .lrs-ag--home h1 em.lrs-ag__kw.lrs-ag__kw.lrs-ag__kw.lrs-ag__kw.lrs-ag__kw.is-lame{
  animation:lrsAgLame 1.8s cubic-bezier(.25,.1,.25,1) both !important}

.lrs-ag p.lrs-ag__sub.lrs-ag__sub{
  margin:0 0 34px !important;max-width:52ch;
  font-family:'Montserrat',-apple-system,Arial,sans-serif !important;
  font-size:clamp(15px,1.35vw,18px) !important;font-weight:400 !important;
  line-height:1.72 !important;text-transform:none !important;text-align:left !important;
  color:rgba(var(--tn),.82) !important;
  opacity:0;animation:lrsAgIn 1s cubic-bezier(.22,1,.28,1) .62s both}
.lrs-ag .lrs-ag__sub strong{color:var(--pp) !important;font-weight:600 !important}

.lrs-ag__cta.lrs-ag__cta{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 40px;
  opacity:0;animation:lrsAgIn 1s cubic-bezier(.22,1,.28,1) .78s both}
/* la peinture des boutons vient du systeme du site (lorents-boutons.php) */
.lrs-ag a.lrs-ag__b--p,.lrs-ag a.lrs-ag__b--s{text-decoration:none !important}

/* --- la ligne de preuve ---------------------------------------------- */
.lrs-ag__facts.lrs-ag__facts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;
  margin:0;padding:22px 0 0;list-style:none;
  border-top:1px solid rgba(var(--tn),.14);max-width:760px;
  opacity:0;animation:lrsAgIn 1s cubic-bezier(.22,1,.28,1) .94s both}
.lrs-ag li.lrs-ag__f.lrs-ag__f{display:flex;align-items:baseline;gap:9px;margin:0;
  font-size:12px !important;letter-spacing:.12em !important;text-transform:uppercase !important;
  color:rgba(var(--tn),.58) !important;list-style:none}
.lrs-ag .lrs-ag__fn{font-size:20px !important;font-weight:700 !important;
  letter-spacing:-.02em !important;color:var(--pp) !important;
  font-variant-numeric:tabular-nums;text-transform:none !important}

/* --- la pastille, en bas a droite : elle nomme la famille a l'image ---- */
.lrs-ag__tags.lrs-ag__tags{position:absolute;z-index:4;right:max(24px,calc(50% - 576px));bottom:130px;
  width:0;height:34px;
  opacity:0;animation:lrsAgIn 1s cubic-bezier(.22,1,.28,1) 1.1s both}
.lrs-ag__tag.lrs-ag__tag{position:absolute;right:0;bottom:0;white-space:nowrap;
  display:flex;align-items:center;gap:10px;
  padding:9px 16px 9px 13px;border-radius:999px;
  border:1px solid rgba(var(--tn),.18);background:rgba(9,8,7,.42);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:10px;line-height:1.4;letter-spacing:.2em;text-transform:uppercase;color:rgba(var(--tn),.74);
  opacity:0;animation:lrsAgCap 24s linear infinite both}
.lrs-ag__tag--1.lrs-ag__tag--1{opacity:1;animation-delay:-1.5s}
.lrs-ag__tag--2.lrs-ag__tag--2{animation-delay:-19.5s}
.lrs-ag__tag--3.lrs-ag__tag--3{animation-delay:-13.5s}
.lrs-ag__tag--4.lrs-ag__tag--4{animation-delay:-7.5s}
.lrs-ag__dot.lrs-ag__dot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--c2);flex:none;
  animation:lrsAgPulse 2.4s ease-in-out infinite}
/* v2.1 : l'onde du point est un calque agrandi, plus une ombre animee */
.lrs-ag__dot.lrs-ag__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(224,122,74,.55);
  animation:lrsAgOnde 2.4s ease-in-out infinite}
/* la pastille sortante s'efface avant le fondu, l'entrante apparait pendant */
@keyframes lrsAgCap{
  0%{opacity:0}
  1.25%{opacity:0}
  5%{opacity:1}
  23.3333%{opacity:1}
  25%{opacity:0}
  100%{opacity:0}}

/* --- le filet de progression : il se remplit pendant chaque photo ----- */
.lrs-ag__bar.lrs-ag__bar{position:absolute;z-index:4;left:0;right:0;bottom:0;height:2px;
  background:rgba(var(--tn),.10)}
.lrs-ag__bar.lrs-ag__bar::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(224,122,74,.35),var(--c2));
  transform-origin:left center;transform:scaleX(0);
  animation:lrsAgBar 6s linear -1.5s infinite}

@keyframes lrsAgLine{from{transform:translate3d(0,108%,0)}to{transform:translate3d(0,0,0)}}
@keyframes lrsAgIn{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
@keyframes lrsAgRule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lrsAgGlow{0%{transform:translate3d(-4%,2%,0)}100%{transform:translate3d(5%,-3%,0)}}
@keyframes lrsAgPulse{0%,100%{opacity:1}70%{opacity:.75}}
@keyframes lrsAgOnde{0%,100%{transform:scale(1);opacity:1}70%{transform:scale(3);opacity:0}}
@keyframes lrsAgBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lrsAgLame{from{background-position:100% center}to{background-position:0% center}}

/* --- tablette --------------------------------------------------------- */
@media(max-width:1024px){
  .lrs-ag__in.lrs-ag__in{padding:110px 22px 86px}
  .lrs-ag__tags.lrs-ag__tags{right:22px;bottom:88px}
}
/* sous 900 px la ligne des chiffres (environ 670 px) et la pastille ne tiennent
   plus cote a cote : la pastille se retire, comme en telephone */
@media(max-width:899px){
  .lrs-ag__tags.lrs-ag__tags{display:none}
}
/* --- telephone : les recadrages verticaux, servis par la source media ---- */
@media(max-width:767px){
  html body .lrs-ag .lrs-ag__sl img.lrs-ag__im.lrs-ag__im{object-position:50% 30%}
  .lrs-ag__veil.lrs-ag__veil{background:
    linear-gradient(180deg,rgba(9,8,7,.80) 0%,rgba(9,8,7,.22) 18%,rgba(9,8,7,.28) 40%,rgba(9,8,7,.52) 66%,rgba(18,16,14,.92) 90%,#12100E 100%)}
  .lrs-ag__in.lrs-ag__in{padding:104px 20px 72px}
  /* voile de texte plus dense : en portrait le bloc occupe presque toute la largeur */
  .lrs-ag__in.lrs-ag__in::before{left:-10vw;right:-10vw;top:-70px;bottom:-120px;
    background:linear-gradient(180deg,rgba(9,8,7,0) 0%,rgba(9,8,7,.46) 20%,rgba(9,8,7,.74) 46%,rgba(9,8,7,.84) 100%)}
  /* le titre peut passer a trois lignes sous 400 px : la reserve du masque
     couperait le mot, on passe donc au fondu montant */
  .lrs-ag__ln.lrs-ag__ln{overflow:visible;padding-bottom:0}
  .lrs-ag__ln.lrs-ag__ln > span{transform:translate3d(0,18px,0);opacity:0;
    animation-name:lrsAgIn;animation-duration:.9s}
  .lrs-ag .lrs-ag__t.lrs-ag__t{font-size:clamp(29px,8.6vw,46px) !important;letter-spacing:-.028em !important;
    margin-bottom:24px !important}
  .lrs-ag p.lrs-ag__sub.lrs-ag__sub{font-size:15px !important;line-height:1.68 !important;margin-bottom:28px !important}
  .lrs-ag__cta.lrs-ag__cta{gap:10px;margin-bottom:32px}
  .lrs-ag a.lrs-ag__b--p,.lrs-ag a.lrs-ag__b--s{flex:1 1 100%;justify-content:center}
  .lrs-ag__facts.lrs-ag__facts{gap:8px 18px;padding-top:18px}
  .lrs-ag li.lrs-ag__f.lrs-ag__f{font-size:10px !important;letter-spacing:.1em !important}
  .lrs-ag .lrs-ag__fn{font-size:17px !important}
}
/* --- mouvement reduit : premiere photo fixe, tout est en place ---------- */
@media(prefers-reduced-motion:reduce){
  .lrs-ag .lrs-ag__sl.lrs-ag__sl,.lrs-ag__tag.lrs-ag__tag{animation:none !important}
  .lrs-ag .lrs-ag__sl.lrs-ag__sl{opacity:0 !important;transform:none !important}
  .lrs-ag .lrs-ag__sl--1.lrs-ag__sl--1,.lrs-ag__tag--1.lrs-ag__tag--1{opacity:1 !important}
  .lrs-ag__kick.lrs-ag__kick,.lrs-ag p.lrs-ag__sub.lrs-ag__sub,
  .lrs-ag__cta.lrs-ag__cta,.lrs-ag__facts.lrs-ag__facts,.lrs-ag__tags.lrs-ag__tags{
    opacity:1 !important;transform:none !important;animation:none !important}
  .lrs-ag__ln.lrs-ag__ln > span{transform:none !important;animation:none !important}
  .lrs-ag__rule.lrs-ag__rule{transform:scaleX(1) !important;animation:none !important}
  .lrs-ag__glow.lrs-ag__glow,.lrs-ag__dot.lrs-ag__dot,.lrs-ag__dot.lrs-ag__dot::after,
  .lrs-ag__bar.lrs-ag__bar::after{animation:none !important}
  .lrs-ag__bar.lrs-ag__bar::after{transform:scaleX(1) !important;opacity:.5}
  html body.page-id-364536 .lrs-ag--home h1 em.lrs-ag__kw.lrs-ag__kw.lrs-ag__kw.lrs-ag__kw.lrs-ag__kw{
    animation:none !important;background-position:0% center !important}
}