/* ============================================================
   ESN — Accueil : animation propre à chaque territoire
   Football = projecteurs + terrain · Entertainment = plateau live
   Image = shooting photo (flashs, viseur)
   ============================================================ */
.portal .p-body{z-index:2}
.pfx{position:absolute;top:0;bottom:0;z-index:0;pointer-events:none;overflow:hidden}
.portal-foot .pfx,.portal-image .pfx{left:42%;right:0}
.portal-media .pfx{left:0;right:42%}
.pfx i,.pfx b,.pfx span,.pfx svg{position:absolute;display:block}

/* ---------- FOOTBALL ---------- */
.pfx-foot{mix-blend-mode:screen}
.pfx-foot .bm{top:-40%;width:42%;height:180%;transform-origin:50% 0;background:linear-gradient(90deg,transparent,rgba(255,248,230,.16) 38%,rgba(255,250,235,.42) 50%,rgba(255,248,230,.16) 62%,transparent);filter:blur(8px);opacity:0;animation:pfx-beam 6.5s ease-in-out infinite}
.pfx-foot .bm.b1{left:8%;--r:-28deg}
.pfx-foot .bm.b2{left:46%;--r:22deg;animation-delay:-2.2s}
.pfx-foot .bm.b3{left:70%;--r:-14deg;width:30%;animation-delay:-4.4s}
@keyframes pfx-beam{0%{opacity:0;transform:rotate(calc(var(--r) - 14deg))}18%{opacity:1}50%{opacity:1;transform:rotate(var(--r))}80%{opacity:.4}100%{opacity:0;transform:rotate(calc(var(--r) + 14deg))}}
.pfx-foot svg.pitch{left:6%;right:6%;bottom:6%;width:88%;height:auto;opacity:.75}
.pfx-foot svg.pitch *{fill:none;stroke:rgba(232,221,191,.9);stroke-width:1.6;stroke-dasharray:1400;stroke-dashoffset:1400;animation:pfx-draw 9s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(232,221,191,.7))}
.pfx-foot svg.pitch circle{animation-delay:.6s}
.pfx-foot svg.pitch .gl{animation-delay:1.1s}
.pfx-foot svg.pitch .gr{animation-delay:1.4s}
@keyframes pfx-draw{0%{stroke-dashoffset:1400;opacity:0}8%{opacity:1}45%{stroke-dashoffset:0;opacity:1}75%{stroke-dashoffset:0;opacity:.9}100%{stroke-dashoffset:0;opacity:0}}
.pfx-foot .dust{inset:0;height:200%;background-image:radial-gradient(1.6px 1.6px at 14% 20%,rgba(255,248,230,.95),transparent 60%),radial-gradient(1.2px 1.2px at 38% 64%,rgba(255,248,230,.75),transparent 60%),radial-gradient(2px 2px at 62% 30%,rgba(255,248,230,.85),transparent 60%),radial-gradient(1.4px 1.4px at 80% 74%,rgba(255,248,230,.75),transparent 60%),radial-gradient(1.8px 1.8px at 92% 42%,rgba(255,248,230,.7),transparent 60%);background-size:380px 380px;animation:pfx-dust 12s linear infinite}
@keyframes pfx-dust{to{transform:translate3d(-40px,-50%,0)}}

/* ---------- ENTERTAINMENT ---------- */
.pfx-media .scan{inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 4px);mix-blend-mode:overlay;animation:pfx-scan 7s linear infinite}
.pfx-media .scan::after{content:"";position:absolute;left:0;right:0;height:22%;top:-25%;background:linear-gradient(180deg,transparent,rgba(255,250,235,.10),transparent);animation:pfx-roll 4.5s linear infinite}
@keyframes pfx-scan{to{background-position:0 120px}}
@keyframes pfx-roll{to{top:110%}}
.pfx-media .live{left:22px;top:22px;display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 10px;border-radius:999px;background:rgba(15,14,12,.72);border:1px solid rgba(243,239,230,.18);font:600 11px/1 var(--mono);letter-spacing:.2em;color:#F3EFE6;backdrop-filter:blur(4px)}
.pfx-media .live em{position:static;width:9px;height:9px;border-radius:50%;background:#E5483B;box-shadow:0 0 0 0 rgba(229,72,59,.7);animation:pfx-rec 1.4s ease-in-out infinite}
@keyframes pfx-rec{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(229,72,59,.6)}50%{opacity:.35;box-shadow:0 0 0 8px rgba(229,72,59,0)}}
.pfx-media .eq{left:22px;right:22px;bottom:20px;height:64px;display:flex;align-items:flex-end;gap:6px;opacity:.9}
.pfx-media .eq i{position:static;flex:1;height:100%;border-radius:3px 3px 0 0;background:linear-gradient(0deg,rgba(196,187,163,.95),rgba(243,239,230,.55));transform-origin:50% 100%;animation:pfx-eq 1.1s ease-in-out infinite alternate}
.pfx-media .eq i:nth-child(2n){animation-duration:.8s}
.pfx-media .eq i:nth-child(3n){animation-duration:1.4s}
.pfx-media .eq i:nth-child(4n){animation-duration:.65s}
.pfx-media .eq i:nth-child(1){animation-delay:-.2s}.pfx-media .eq i:nth-child(2){animation-delay:-.5s}.pfx-media .eq i:nth-child(3){animation-delay:-.1s}.pfx-media .eq i:nth-child(4){animation-delay:-.7s}.pfx-media .eq i:nth-child(5){animation-delay:-.3s}.pfx-media .eq i:nth-child(6){animation-delay:-.9s}.pfx-media .eq i:nth-child(7){animation-delay:-.4s}.pfx-media .eq i:nth-child(8){animation-delay:-.6s}.pfx-media .eq i:nth-child(9){animation-delay:-.15s}.pfx-media .eq i:nth-child(10){animation-delay:-.8s}.pfx-media .eq i:nth-child(11){animation-delay:-.35s}.pfx-media .eq i:nth-child(12){animation-delay:-.55s}.pfx-media .eq i:nth-child(13){animation-delay:-.25s}.pfx-media .eq i:nth-child(14){animation-delay:-.75s}
@keyframes pfx-eq{0%{transform:scaleY(.12)}40%{transform:scaleY(.7)}70%{transform:scaleY(.3)}100%{transform:scaleY(1)}}
.pfx-media .glow{left:10%;top:20%;width:80%;height:60%;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(229,72,59,.22),transparent 70%);mix-blend-mode:screen;animation:pfx-stage 5s ease-in-out infinite alternate}
@keyframes pfx-stage{0%{transform:translateX(-12%);background:radial-gradient(50% 50% at 50% 50%,rgba(229,72,59,.22),transparent 70%)}50%{background:radial-gradient(50% 50% at 50% 50%,rgba(120,140,255,.18),transparent 70%)}100%{transform:translateX(12%);background:radial-gradient(50% 50% at 50% 50%,rgba(214,201,166,.28),transparent 70%)}}

/* ---------- IMAGE ---------- */
.pfx-image .fl{width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,250,235,.55) 12%,rgba(255,250,235,0) 60%);mix-blend-mode:screen;opacity:0;transform:translate(-50%,-50%) scale(.6);animation:pfx-flash 5.2s ease-out infinite}
.pfx-image .fl.f1{left:24%;top:30%}
.pfx-image .fl.f2{left:72%;top:22%;animation-delay:1.1s}
.pfx-image .fl.f3{left:58%;top:62%;animation-delay:2.3s;width:36%}
.pfx-image .fl.f4{left:16%;top:70%;animation-delay:3.1s;width:30%}
.pfx-image .fl.f5{left:86%;top:58%;animation-delay:3.9s;width:34%}
.pfx-image .fl.f6{left:40%;top:14%;animation-delay:4.5s;width:28%}
@keyframes pfx-flash{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.6)}2%{opacity:1;transform:translate(-50%,-50%) scale(1)}10%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}
.pfx-image .wash{inset:0;background:#fff;mix-blend-mode:overlay;opacity:0;animation:pfx-wash 5.2s ease-out infinite}
@keyframes pfx-wash{0%,100%{opacity:0}2%{opacity:.35}7%{opacity:0}}
.pfx-image .vf{inset:22px;border:0}
.pfx-image .vf::before,.pfx-image .vf::after{content:"";position:absolute;width:34px;height:34px;border:2px solid rgba(243,239,230,.85)}
.pfx-image .vf::before{left:0;top:0;border-right:0;border-bottom:0;box-shadow:none}
.pfx-image .vf::after{right:0;bottom:0;border-left:0;border-top:0}
.pfx-image .vf2{inset:22px}
.pfx-image .vf2::before,.pfx-image .vf2::after{content:"";position:absolute;width:34px;height:34px;border:2px solid rgba(243,239,230,.85)}
.pfx-image .vf2::before{right:0;top:0;border-left:0;border-bottom:0}
.pfx-image .vf2::after{left:0;bottom:0;border-right:0;border-top:0}
.pfx-image .af{left:50%;top:42%;width:92px;height:92px;border:1.5px solid rgba(232,221,191,.95);transform:translate(-50%,-50%);animation:pfx-af 5.2s ease-in-out infinite}
.pfx-image .af::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#E5483B}
@keyframes pfx-af{0%{transform:translate(-50%,-50%) scale(1.5);opacity:.4;left:46%;top:40%}20%{transform:translate(-50%,-50%) scale(1);opacity:1;left:52%;top:38%}24%{border-color:#7CE38B}60%{left:40%;top:46%;transform:translate(-50%,-50%) scale(1.2);border-color:rgba(232,221,191,.95)}80%{transform:translate(-50%,-50%) scale(1);left:56%;top:42%}84%{border-color:#7CE38B}100%{transform:translate(-50%,-50%) scale(1.5);opacity:.4;left:46%;top:40%}}
.pfx-image .rec{right:22px;top:22px;font:600 11px/1 var(--mono);letter-spacing:.18em;color:#F3EFE6;padding:7px 11px;border-radius:999px;background:rgba(15,14,12,.65);border:1px solid rgba(243,239,230,.18)}
.pfx-image .rec em{font-style:normal;color:var(--sand)}

/* ---------- responsive : sur mobile, la photo est en haut de la carte ---------- */
@media (max-width:760px){
  .portal-foot .pfx,.portal-media .pfx,.portal-image .pfx{left:0;right:0;bottom:auto;height:62vw}
  .pfx-media .eq{height:44px;gap:4px}
  .pfx-image .af{width:64px;height:64px}
  .pfx-image .vf,.pfx-image .vf2{inset:14px}
  .pfx-media .live,.pfx-image .rec{top:14px}
  .pfx-media .live{left:auto;right:14px}
  .pfx-image .rec{right:14px}
}
@media (prefers-reduced-motion:reduce){.pfx *,.pfx *::before,.pfx *::after{animation:none!important}.pfx-foot .bm,.pfx-image .fl,.pfx-image .wash{display:none}.pfx-foot svg.pitch *{stroke-dashoffset:0;opacity:.5}}

/* eq-soft */
.pfx-media .eq{height:38px;bottom:0;left:0;right:0;gap:4px;opacity:.55;mix-blend-mode:screen}

/* ============ v6.2.5 · version plus légère et élégante ============ */
.pfx-foot{opacity:.55}
.pfx-foot .bm{filter:blur(14px);animation-duration:11s}
.pfx-foot .bm.b3{display:none}
.pfx-foot svg.pitch{opacity:.4}
.pfx-foot svg.pitch *{stroke-width:1;filter:none;animation-duration:16s}
.pfx-foot .dust{opacity:.45;animation-duration:22s}
.pfx-media .scan{display:none}
.pfx-media .glow{opacity:.55;animation-duration:9s}
.pfx-media .live{left:20px;top:20px;padding:0;background:none;border:0;backdrop-filter:none;font-size:10px;letter-spacing:.24em;color:rgba(243,239,230,.8);gap:7px}
.pfx-media .live em{width:6px;height:6px;animation-duration:2.4s}
.pfx-media .eq{left:20px;right:20px;bottom:18px;height:26px;gap:0;justify-content:space-between;opacity:.5;mix-blend-mode:normal}
.pfx-media .eq i{flex:0 0 2px;border-radius:2px;background:rgba(243,239,230,.85);animation-duration:1.9s;animation-timing-function:cubic-bezier(.45,0,.55,1)}
.pfx-media .eq i:nth-child(2n){animation-duration:1.5s}
.pfx-media .eq i:nth-child(3n){animation-duration:2.3s}
.pfx-media .eq i:nth-child(4n){animation-duration:1.2s}
@keyframes pfx-eq{0%{transform:scaleY(.15)}50%{transform:scaleY(.55)}100%{transform:scaleY(.9)}}
.pfx-image .fl{opacity:0;animation-duration:9s;width:34%}
@keyframes pfx-flash{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.7)}2%{opacity:.45;transform:translate(-50%,-50%) scale(1)}9%{opacity:0;transform:translate(-50%,-50%) scale(1.15)}}
.pfx-image .fl.f4,.pfx-image .fl.f5,.pfx-image .fl.f6{display:none}
.pfx-image .wash{display:none}
.pfx-image .vf,.pfx-image .vf2{inset:20px;opacity:.6}
.pfx-image .vf::before,.pfx-image .vf::after,.pfx-image .vf2::before,.pfx-image .vf2::after{width:20px;height:20px;border-width:1px}
.pfx-image .af{width:60px;height:60px;border-width:1px;border-color:rgba(232,221,191,.7);animation-duration:9s}
.pfx-image .af::after{width:3px;height:3px;margin:-1.5px 0 0 -1.5px;background:rgba(232,221,191,.9)}
@keyframes pfx-af{0%,100%{transform:translate(-50%,-50%) scale(1.25);opacity:.25;left:47%;top:41%}25%{transform:translate(-50%,-50%) scale(1);opacity:.9;left:52%;top:39%}55%{transform:translate(-50%,-50%) scale(1.12);opacity:.6;left:44%;top:45%}80%{transform:translate(-50%,-50%) scale(1);opacity:.9;left:55%;top:42%}}
.pfx-image .rec{right:20px;top:20px;padding:0;background:none;border:0;font-size:10px;letter-spacing:.22em;color:rgba(243,239,230,.75)}

.pfx-foot{opacity:.85}
.pfx-foot .bm{background:linear-gradient(90deg,transparent,rgba(255,248,230,.05) 36%,rgba(255,250,235,.14) 50%,rgba(255,248,230,.05) 64%,transparent);filter:blur(24px)}