/* ==================================================================
   lrs-lg v1.7 -- LOGOS PARTENAIRES + JEU DES CINQ ETOILES (5 cases + 5 en reserve) (accueil 364536)
   ------------------------------------------------------------------
   Remplace le carrousel d'images ad5f5ea (defilement continu, coupe
   aux bords). Dix cases fixes ; toutes les 2 s une case, tiree au
   sort, echange son logo contre un des sept en reserve, en fondu.
   Meme matiere que .lrs-carte du kit 349007 et que le gabarit lrs-ec :
   fond creme a 4-6 %, filet a 11 %, rayon 14. Aucun effet au survol
   (retire en v1.2 a la demande du client), fondu de 420 ms.
   v1.7 (15/09/2026) : en telephone (600 px et moins) le rail horizontal
   laisse place a deux rangees fixes -- deux cases centrees, puis trois,
   toutes de la meme taille (grille de six colonnes, chaque case en couvre
   deux) ; les cinq rouleaux du jeu sont donc tous visibles pendant un tour.
   v1.6 (14/09/2026, 4 h) : le bouton devient "Cliquez et tentez de gagner" et
   lance une machine a sous sur les cinq cases (rouleaux, etoiles) ; cinq etoiles
   passent a l'orange et le restent, bloc de gain (date, code), etat garde dans
   localStorage. Marges du pied 40 / 40 (tagline comprise), 30 / 30 en mobile.
   v1.5.1 (14/09/2026) : le bouton n'a plus d'icone au survol (demande du
   client) -- reserve vide pre-posee, masquee, marge interne figee.
   v1.5 (14/09/2026) : bouton "en voir +" (fantome du systeme .lrs-b) qui
   brassait toutes les cases d'un coup -- remplace par le jeu en v1.6.
   v1.4 (lot 1 de l'audit, 13/09/2026) : dix logos, cinq cases sur une
   ligne, cinq en reserve ; sous 600 px un rail horizontal,
   remplace par les deux rangees de la v1.7. v1.3 : dix-huit logos. MY BEERS Nancy-Essey, seul ecusson de la serie, tient
   la dixieme case et se cale en hauteur (.lrs-lg__l--haut).
   Regles de survie (chacune a deja coute une panne sur ce site) :
   1. la balise de style porte l'attribut anti-optimisation, sinon LiteSpeed l'elague ;
   2. classes redoublees + !important sur ce que le kit ou le theme repeint ;
   3. case calee par padding-top, jamais par aspect-ratio ;
   4. image en width/height auto + max-width/max-height : la regle mobile
      du theme (height:auto !important) ne peut plus rien casser ;
   5. selecteur img en descendant, et picture en display:contents :
      l'optimiseur d'images enveloppe parfois l'image dans un picture ;
   6. les sept logos en reserve portent loading=eager en dur : WordPress
      marque lazy toute image qui n'a pas d'attribut, et une image lazy
      dans un conteneur masque ne se charge jamais -- la rotation se
      figeait apres le premier echange (v1, 2026-09-12).
   ================================================================== */
.lrs-lg{
  --lg-filet:rgba(246,241,236,.11);
  --lg-gap:14px;--lg-r:14px;--lg-case:50%;
  --lg-logo-w:72%;--lg-logo-h:54%;
  --lg-t:.42s;
  display:block;width:100%;margin:0 auto}
.lrs-lg,.lrs-lg *{box-sizing:border-box}
.lrs-lg .lrs-lg__g.lrs-lg__g{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--lg-gap);margin:0;padding:0}
/* la case : un cadre 2:1 cale par padding-top, tout son contenu est en absolu */
.lrs-lg .lrs-lg__c.lrs-lg__c{position:relative;display:block;margin:0;padding:var(--lg-case) 0 0;
  overflow:hidden;border-radius:var(--lg-r);border:1px solid var(--lg-filet);
  background:linear-gradient(180deg,rgba(246,241,236,.065),rgba(246,241,236,.022))}
/* le logo : une couche absolue qui remplit la case et centre l'image.
   Deux couches cohabitent le temps du fondu (l'ancienne sort, la neuve entre). */
.lrs-lg .lrs-lg__l{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  margin:0;padding:0;opacity:1;transform:translate3d(0,0,0) scale(1);
  transition:opacity var(--lg-t) ease,transform var(--lg-t) cubic-bezier(.2,.65,.2,1)}
.lrs-lg .lrs-lg__l.is-in{opacity:0;transform:translate3d(0,9px,0) scale(.94)}
.lrs-lg .lrs-lg__l.is-out{opacity:0;transform:translate3d(0,-9px,0) scale(.94)}
/* un ecusson (plus haut que large) se cale sur la hauteur, jamais sur la largeur :
   a 72 % de la case, sa surface d'encre vaut la mediane des logos paysage
   (1808 px2 mesures dans une case de 229 x 114, cf. mybeers/mesure-encre.py) ;
   le blason plein pesait 2,1 fois cette mediane. Variables posees sur la couche,
   elles voyagent donc avec le logo et ignorent les paliers de .lrs-lg. */
.lrs-lg .lrs-lg__l--haut{--lg-logo-w:46%;--lg-logo-h:72%}
.lrs-lg .lrs-lg__l picture{display:contents}
html body .lrs-lg .lrs-lg__l img,html body .lrs-lg .lrs-lg__ri img{display:block;width:auto !important;height:auto !important;
  max-width:var(--lg-logo-w) !important;max-height:var(--lg-logo-h) !important;
  margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;
  box-shadow:none !important;object-fit:contain;opacity:.9;filter:none}
/* le pied : le bouton "en voir +". Forme, filet, casse et icone viennent du
   systeme .lrs-b (classe lrs-b--g = fantome) ; ici seulement sa place. La marge
   est portee par le pied, jamais par le bouton : le bloc de forme remet la
   marge de tout bouton a 0 (cf. lorents-boutons.php, marge des modules). */
.lrs-lg .lrs-lg__foot.lrs-lg__foot{display:flex;justify-content:center;margin:28px 0 0;padding:0}
/* sans icone au survol (client, 14/09) : le script du systeme n'ajoute sa reserve
   qu'aux boutons qui n'en ont pas (:scope > .lrs-b__i) -- une reserve vide est
   donc pre-posee dans le bouton (ni SVG ni Lottie), et masquee ; au doigt le
   systeme l'afficherait en permanence. La marge interne ne se resserre plus au
   survol (regle du systeme en (0,4,3), celle-ci en (0,5,2)) : largeur constante.
   La lame de lumiere du survol reste. */
html body .lrs-lg .lrs-lg__foot .lrs-lg__more .lrs-b__i{display:none !important}
html body .lrs-lg .lrs-lg__foot .lrs-lg__more.lrs-lg__more.lrs-lg__more{
  padding-left:var(--lb-px,26px) !important;padding-right:var(--lb-px,26px) !important}
/* la reserve : les logos qui attendent leur tour, jamais affiches tels quels */
.lrs-lg .lrs-lg__pool{display:none !important}
@media(max-width:1024px){.lrs-lg{--lg-gap:12px;--lg-r:12px}}
/* telephone : cinq colonnes feraient des cases de 60 px. Deux rangees fixes,
   deux cases centrees puis trois, toutes de la meme taille (v1.7, demande du
   client du 15/09) : grille de six colonnes, chaque case en couvre deux ; la
   premiere rangee part de la colonne 2, le vide de chaque cote vaut une colonne
   et une demi-gouttiere, donc centrage exact sans marge auto. Placement
   explicite des cinq cases ; une sixieme, un jour, suivrait en auto (span 2).
   Meme rotation, memes rouleaux, tous visibles. Logos a 78 % de la case. */
@media(max-width:600px){
  .lrs-lg{--lg-gap:10px;--lg-r:12px;--lg-case:50%;--lg-logo-w:78%;--lg-logo-h:58%}
  .lrs-lg .lrs-lg__g.lrs-lg__g{grid-template-columns:repeat(6,minmax(0,1fr))}
  .lrs-lg .lrs-lg__c.lrs-lg__c{grid-column:span 2}
  .lrs-lg .lrs-lg__c.lrs-lg__c:nth-child(1){grid-area:1/2/2/4}
  .lrs-lg .lrs-lg__c.lrs-lg__c:nth-child(2){grid-area:1/4/2/6}
  .lrs-lg .lrs-lg__c.lrs-lg__c:nth-child(3){grid-area:2/1/3/3}
  .lrs-lg .lrs-lg__c.lrs-lg__c:nth-child(4){grid-area:2/3/3/5}
  .lrs-lg .lrs-lg__c.lrs-lg__c:nth-child(5){grid-area:2/5/3/7}
}
@media(prefers-reduced-motion:reduce){
  .lrs-lg .lrs-lg__l{transition:opacity .3s ease}
  .lrs-lg .lrs-lg__l.is-in,.lrs-lg .lrs-lg__l.is-out{transform:none}}
/* ---------- v1.6 : le jeu des cinq etoiles ---------- */
/* le pied : bouton + ligne d'indication. Marges : 40 px sous les logos, et
   10 px de padding sous le module pour que la tagline (marge haute 30 px du
   widget suivant) soit a 40 px elle aussi ; 30 / 30 en mobile. */
.lrs-lg .lrs-lg__foot.lrs-lg__foot{flex-direction:column;align-items:center;gap:14px;margin:40px 0 0}
/* les 10 px sous le module sont un padding de la racine : une marge fusionnerait avec celle de la tagline */
.lrs-lg.lrs-lg[data-lrs-lg]{padding:0 0 10px}
.lrs-lg .lrs-lg__note.lrs-lg__note{margin:0;padding:0;font:500 13px/1.5 Montserrat,sans-serif;letter-spacing:.02em;
  color:rgba(246,241,236,.62);text-align:center;transition:color .3s ease}
.lrs-lg.is-spin .lrs-lg__note.lrs-lg__note{color:rgba(246,241,236,.35)}
/* la grille porte les particules et l'eclat du gain */
.lrs-lg .lrs-lg__g.lrs-lg__g{position:relative}
/* une couche sous la bande : elle s'efface sans transition, la bande part sur sa copie */
.lrs-lg .lrs-lg__l.is-sous,.lrs-lg .lrs-lg__e.is-sous{opacity:0 !important;transition:none !important}
/* le rouleau : une fenetre sur la bande de symboles ; en croisiere, flou et fondu haut/bas */
.lrs-lg .lrs-lg__reel{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.lrs-lg .lrs-lg__reel.is-cruise{-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0),#000 24%,#000 76%,rgba(0,0,0,0));
  mask-image:linear-gradient(180deg,rgba(0,0,0,0),#000 24%,#000 76%,rgba(0,0,0,0))}
.lrs-lg .lrs-lg__strip{position:absolute;left:0;right:0;top:0;display:block;will-change:transform;transition:filter .2s ease}
.lrs-lg .lrs-lg__reel.is-cruise .lrs-lg__strip{filter:blur(1.4px)}
.lrs-lg .lrs-lg__ri{display:flex;align-items:center;justify-content:center;width:100%;height:var(--lg-h,50px);margin:0;padding:0}
/* l'etoile : trait creme au repos, orange plein et lumineuse au gain */
.lrs-lg .lrs-lg__e{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0}
.lrs-lg .lrs-lg__st{display:block;height:46%;width:auto;aspect-ratio:1;fill:rgba(246,241,236,.10);stroke:rgba(246,241,236,.92);
  stroke-width:1.25;stroke-linejoin:round;transition:fill .45s ease,stroke .45s ease,filter .45s ease}
.lrs-lg .lrs-lg__c.is-or .lrs-lg__st{fill:#E07A4A;stroke:#E07A4A;filter:drop-shadow(0 0 10px rgba(224,122,74,.55));
  animation:lrs-lg-or .75s cubic-bezier(.2,.8,.2,1.25)}
@keyframes lrs-lg-or{0%{transform:scale(1)}45%{transform:scale(1.24) rotate(-7deg)}100%{transform:scale(1)}}
.lrs-lg .lrs-lg__c.lrs-lg__c.is-or{border-color:rgba(224,122,74,.72);
  box-shadow:inset 0 0 0 1px rgba(224,122,74,.22),0 0 24px rgba(224,122,74,.16);transition:border-color .45s ease,box-shadow .45s ease}
/* l'arret d'un rouleau : un eclat de filet qui s'eteint */
.lrs-lg .lrs-lg__c.is-land{animation:lrs-lg-land .45s ease-out}
@keyframes lrs-lg-land{0%{box-shadow:inset 0 0 0 1px rgba(246,241,236,.6)}100%{box-shadow:inset 0 0 0 1px rgba(246,241,236,0)}}
/* le gain : eclat derriere la grille, particules, bloc de gain */
.lrs-lg.is-win .lrs-lg__g::before{content:"";position:absolute;inset:-16% -4%;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at center,rgba(224,122,74,.28),rgba(224,122,74,0) 62%);animation:lrs-lg-burst 1.7s ease-out forwards}
@keyframes lrs-lg-burst{0%{opacity:0;transform:scale(.6)}25%{opacity:1}100%{opacity:0;transform:scale(1.3)}}
.lrs-lg .lrs-lg__p{position:absolute;left:50%;top:50%;width:var(--s,6px);height:var(--s,6px);border-radius:50%;background:#E07A4A;
  pointer-events:none;opacity:0;z-index:3;animation:lrs-lg-pop 1.6s cubic-bezier(.2,.7,.3,1) var(--d,0ms) forwards}
.lrs-lg .lrs-lg__p--c{background:#F6F1EC}
@keyframes lrs-lg-pop{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}12%{opacity:1}
  100%{transform:translate(calc(-50% + var(--x,0px)),calc(-50% + var(--y,-120px))) scale(1);opacity:0}}
.lrs-lg .lrs-lg__win.lrs-lg__win{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  max-width:600px;margin:36px auto 0;padding:28px 24px 26px;border-radius:var(--lg-r);border:1px solid rgba(224,122,74,.5);
  background:linear-gradient(180deg,rgba(224,122,74,.12),rgba(224,122,74,.035));box-shadow:0 0 40px rgba(224,122,74,.10);
  animation:lrs-lg-in .7s cubic-bezier(.2,.8,.2,1)}
.lrs-lg .lrs-lg__win.lrs-lg__win[hidden]{display:none !important}
@keyframes lrs-lg-in{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}
.lrs-lg .lrs-lg__win-s{display:flex;gap:9px;margin:0 0 4px}
.lrs-lg .lrs-lg__win-s .lrs-lg__st{height:28px;width:28px;fill:#E07A4A;stroke:#E07A4A;filter:drop-shadow(0 0 8px rgba(224,122,74,.5));
  animation:lrs-lg-or .75s cubic-bezier(.2,.8,.2,1.25) both}
.lrs-lg .lrs-lg__win-s .lrs-lg__st:nth-child(2){animation-delay:.08s}.lrs-lg .lrs-lg__win-s .lrs-lg__st:nth-child(3){animation-delay:.16s}
.lrs-lg .lrs-lg__win-s .lrs-lg__st:nth-child(4){animation-delay:.24s}.lrs-lg .lrs-lg__win-s .lrs-lg__st:nth-child(5){animation-delay:.32s}
html body .lrs-lg .lrs-lg__win-t.lrs-lg__win-t{margin:0;font:800 22px/1.15 Montserrat,sans-serif;text-transform:uppercase;letter-spacing:.02em;color:#F6F1EC}
html body .lrs-lg .lrs-lg__win-p.lrs-lg__win-p{margin:0;max-width:44ch;font:400 15px/1.55 Montserrat,sans-serif;color:rgba(246,241,236,.84)}
html body .lrs-lg .lrs-lg__win-m.lrs-lg__win-m{margin:2px 0 0;font:600 12px/1.5 Montserrat,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgba(246,241,236,.6)}
html body .lrs-lg .lrs-lg__win-m b{font-weight:800;color:#F6F1EC}
html body .lrs-lg .lrs-lg__win .lrs-lg__win-b.lrs-lg__win-b{margin-top:10px !important}
/* gagne : le bouton disparait, la ligne d'indication reste lue mais plus vue */
html body .lrs-lg[data-lrs-lg-gagne] .lrs-lg__foot .lrs-lg__more{display:none !important}
.lrs-lg[data-lrs-lg-gagne] .lrs-lg__note.lrs-lg__note{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:-1px}
.lrs-lg[data-lrs-lg-gagne] .lrs-lg__foot.lrs-lg__foot{margin:0}
@media(max-width:600px){
  .lrs-lg .lrs-lg__foot.lrs-lg__foot{margin:30px 0 0;gap:12px}
  .lrs-lg.lrs-lg[data-lrs-lg]{padding:0}
  .lrs-lg .lrs-lg__win.lrs-lg__win{margin:28px 0 0;padding:24px 18px 22px}
  html body .lrs-lg .lrs-lg__win-t.lrs-lg__win-t{font-size:19px}
}
@media(prefers-reduced-motion:reduce){
  .lrs-lg .lrs-lg__c.is-or .lrs-lg__st,.lrs-lg .lrs-lg__win-s .lrs-lg__st,.lrs-lg .lrs-lg__c.is-land,.lrs-lg .lrs-lg__p,
  .lrs-lg.is-win .lrs-lg__g::before,.lrs-lg .lrs-lg__win.lrs-lg__win{animation:none}
}