/* ---- lrs-pf : les quatre piliers des événements privés, deux colonnes 50/50 ----
   Transposition du bloc « points forts » de la page DJ (334358) sur la page
   événements privés (331720). Meme charpente que le bloc d'intro juste au-dessus :
   flex 50/50, gouttiere de 80 px, alignement centre, passage en colonne sous
   1024 px.
     A gauche  : les quatre jalons en 2x2. Icone dessinee en SVG INLINE, puis
                 REMPLACEE par un Lottie de la mediatheque s'il se charge.
     A droite  : surtitre, titre, chapo, bouton.

   Le fond, le filet et le rayon des cartes sont AUSSI poses en style en ligne
   sur chaque carte : LiteSpeed elague des regles jugees inutilisees, et une
   carte qui perdrait son fond se lirait comme du texte nu.

   Classes REDOUBLEES et !important sur couleur / police / graisse : le kit
   349007 peint les titres et les liens en #0D0D0D avec une specificite qui
   bat une classe simple. Tout s'arrete sous prefers-reduced-motion. */
.lrs-pf.lrs-pf{--c:var(--lrs-accent,#E07A4A);--c2:var(--lrs-accent-lit,#E07A4A);
  font-family:var(--lrs-display,'Montserrat',-apple-system,'Helvetica Neue',Arial,sans-serif);
  width:100%;box-sizing:border-box;color:var(--lrs-paper,#F6F1EC);
  margin:78px 0 6px}
.lrs-pf.lrs-pf *{box-sizing:border-box}

/* ---------- charpente 50/50 ---------- */
.lrs-pf .lrs-pf__w{display:flex;flex-direction:row;flex-wrap:nowrap;
  align-items:center;gap:80px}
.lrs-pf .lrs-pf__g,.lrs-pf .lrs-pf__tx{flex:1 1 50%;min-width:0}

/* ---------- les quatre jalons, 2x2 ---------- */
.lrs-pf .lrs-pf__g{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.lrs-pf .lrs-pf__c{position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--lrs-e3,12px);padding:26px 18px 22px;border-radius:var(--lrs-r,15px);
  background:linear-gradient(180deg,rgba(246,241,236,.065),rgba(246,241,236,.022)) !important;
  transition:border-color .3s ease,box-shadow .28s ease,transform .3s ease}
.lrs-pf .lrs-pf__c:hover{border-color:rgba(224,122,74,.6) !important;
  box-shadow:var(--lrs-neon,0 0 16px rgba(224,122,74,.35));transform:translateY(-3px)}

/* ---------- pastille : l'icone se pose nue sur la carte ---------- */
.lrs-pf .lrs-pf__ic{position:relative;flex:0 0 auto;width:74px;height:74px;
  display:flex;align-items:center;justify-content:center;background:transparent}
.lrs-pf .lrs-pf__ic svg{position:relative;z-index:2;
  width:38px;height:38px;display:block;overflow:visible}
/* langage commun aux quatre dessins de secours (SVG faits main) */
.lrs-pf .lrs-pf__ic .st{stroke:var(--lrs-paper,#F6F1EC);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.lrs-pf .lrs-pf__ic .ac{stroke:var(--c2);fill:none;stroke-width:1.9;stroke-linecap:round}
.lrs-pf .lrs-pf__ic .acf{fill:var(--c2)}

/* --- 1. questionnaire : les lignes s'ecrivent puis s'effacent --- */
.lrs-pf .lrs-pf__qz .ln{stroke-dasharray:12;
  animation:lrs-pfq-ligne 3.4s ease-in-out infinite}
.lrs-pf .lrs-pf__qz .ln:nth-of-type(2){animation-delay:.22s}
.lrs-pf .lrs-pf__qz .ln:nth-of-type(3){animation-delay:.44s}
@keyframes lrs-pfq-ligne{
  0%{stroke-dashoffset:12}22%,72%{stroke-dashoffset:0}100%{stroke-dashoffset:12}}

/* --- animations des dessins de secours du quiz, sans objet ici --- */
.lrs-pf .lrs-pf__qr .scan{animation:lrs-pfq-scan 2.6s ease-in-out infinite alternate}
@keyframes lrs-pfq-scan{from{transform:translateY(0)}to{transform:translateY(12px)}}
.lrs-pf .lrs-pf__qr .px{animation:lrs-pfq-px 2.6s steps(1) infinite}
.lrs-pf .lrs-pf__qr .px:nth-of-type(2){animation-delay:.65s}
@keyframes lrs-pfq-px{0%,49%{opacity:1}50%,100%{opacity:.25}}

/* --- 3. equipe : les joueurs opinent, l'un apres l'autre --- */
.lrs-pf .lrs-pf__tm .p{animation:lrs-pfq-bob 2.2s ease-in-out infinite alternate}
.lrs-pf .lrs-pf__tm .p2{animation-delay:-.5s}
.lrs-pf .lrs-pf__tm .p3{animation-delay:-1.1s}
@keyframes lrs-pfq-bob{from{transform:translateY(0)}to{transform:translateY(-1.6px)}}

/* --- 4. podium : la marche du vainqueur monte, l'etoile scintille --- */
.lrs-pf .lrs-pf__pd .b1{transform-origin:16px 28px;
  animation:lrs-pfq-marche 3s ease-in-out infinite alternate}
@keyframes lrs-pfq-marche{from{transform:scaleY(.86)}to{transform:scaleY(1)}}
.lrs-pf .lrs-pf__pd .et{transform-origin:16px 7px;
  animation:lrs-pfq-etoile 3s ease-in-out infinite}
@keyframes lrs-pfq-etoile{
  0%,100%{transform:scale(.86) rotate(-6deg);opacity:.75}
  50%{transform:scale(1.08) rotate(6deg);opacity:1}}

/* ---------- textes des jalons ---------- */
/* Le kit 349007 peint `h1` et `a` en #0D0D0D avec une specificite de 0-1-1 :
   ces selecteurs valent 0-2-1 et portent !important sur couleur, police et
   graisse — y compris dans la requete media plus bas, sinon la surcharge
   telephone perd contre la regle large. */
.lrs-pf .lrs-pf__c b{display:block;font-family:inherit !important;
  font-weight:800 !important;font-size:16px !important;line-height:1.28 !important;
  letter-spacing:normal !important;text-transform:none !important;
  color:var(--lrs-paper,#F6F1EC) !important}
.lrs-pf .lrs-pf__c span{display:block;font-family:inherit !important;
  font-weight:400 !important;font-size:13.5px !important;line-height:1.6 !important;
  color:var(--lrs-encre-2,rgba(246,241,236,.72)) !important}

/* ---------- colonne de droite ----------
   Le surtitre, le titre et le bouton reprennent les CLASSES DE LA PAGE
   (`lrs-brtop`, `lrs-brt`, `lrs-kw`, `lrs-brb`, portee body.postid-331720) :
   le bloc suit ainsi toute retouche faite au bloc d'intro. Ne reste ici que
   le corps de texte, cale sur celui de l'intro : Montserrat 17 px / 1,7. */
.lrs-pf .lrs-pf__tx{padding:0 30px}
@media(max-width:1023px){.lrs-pf .lrs-pf__tx{padding:0}}
.lrs-pf .lrs-pf__tx p:not(.lrs-brtop){margin:0 0 14.4px !important;
  font-family:inherit !important;font-size:17px !important;line-height:1.7 !important;
  font-weight:400 !important;color:#F6F1EC !important}
.lrs-pf .lrs-pf__tx p:not(.lrs-brtop):last-of-type{margin-bottom:24px !important}

@media(max-width:1023px){
  .lrs-pf.lrs-pf{margin:58px 0 4px}
  .lrs-pf .lrs-pf__w{flex-direction:column;gap:34px}
  .lrs-pf .lrs-pf__g,.lrs-pf .lrs-pf__tx{flex:1 1 100%;width:100%}}
/* Sous 480 px les jalons restent en 2x2, mais tout le calibrage descend d'un
   cran : sinon « Podium et remise des prix » se casse en cinq lignes dans une
   carte de 146 px. */
@media(max-width:479px){
  .lrs-pf .lrs-pf__g{grid-template-columns:repeat(2,1fr);gap:10px}
  .lrs-pf .lrs-pf__c{padding:18px 12px 16px;gap:var(--lrs-e2,8px);border-radius:var(--lrs-r,15px)}
  .lrs-pf .lrs-pf__ic{width:58px;height:58px}
  .lrs-pf .lrs-pf__ic svg{width:32px;height:32px}
  .lrs-pf .lrs-pf__c b{font-size:14px !important;line-height:1.25 !important}
  .lrs-pf .lrs-pf__c span{font-size:12.5px !important;line-height:1.5 !important}}
@media(prefers-reduced-motion:reduce){
  .lrs-pf .lrs-pf__qz .ln,.lrs-pf .lrs-pf__qr .scan,.lrs-pf .lrs-pf__qr .px,
  .lrs-pf .lrs-pf__tm .p,.lrs-pf .lrs-pf__pd .b1,.lrs-pf .lrs-pf__pd .et{
    animation:none !important}
  .lrs-pf .lrs-pf__qz .ln{stroke-dashoffset:0 !important}
  .lrs-pf .lrs-pf__qr .px{opacity:1 !important}}