/* ============================================================================
   LES PORTES DU HUB (accueil) — deux dalles noires posées sur la pierre, chacune un jeu : le mot géant en filigrane,
   l'objet du jeu (la Terzo pour Warzone, le masque du film pour le Multijoueur), la vie du serveur en une ligne, les
   parties de la zone, la flèche lime. Toute la dalle est le lien. Puis l'appli, en bande basse.
   ========================================================================= */
.pt5{padding:clamp(30px,5vh,64px) 0 clamp(18px,3vh,36px)}
.pt5__grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}

.pt5__porte{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
  min-height:clamp(320px,36vw,500px);padding:clamp(20px,2.4vw,32px);border-radius:28px;color:var(--mw4-os,#eef2e6);text-decoration:none;
  background:#070807;box-shadow:inset 0 0 0 1px rgba(238,242,230,.1),0 40px 80px -46px rgba(0,0,0,.85);
  transition:transform .6s var(--mw4-entre,cubic-bezier(.16,1,.3,1)),box-shadow .35s ease;
  animation:pt5-entre .9s var(--mw4-entre,ease) both;animation-delay:calc(var(--i,0) * 110ms)}
@keyframes pt5-entre{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.pt5__porte:hover,.pt5__porte:focus-visible{transform:translateY(-4px);box-shadow:inset 0 0 0 1.5px var(--mw4-lime,#89f421),0 46px 90px -44px rgba(0,0,0,.9)}
.pt5__porte:focus-visible{outline:3px solid var(--mw4-lime,#89f421);outline-offset:4px}

/* le fond : la nuit, et pour le Multijoueur le masque du film */
.pt5__fond{position:absolute;inset:0;z-index:-3;
  background:radial-gradient(90% 70% at 70% 60%,rgba(137,244,33,.10),transparent 60%),linear-gradient(160deg,#0b0d0b,#050605 70%)}
.pt5__porte--multijoueur .pt5__fond{background:linear-gradient(90deg,rgba(5,6,5,.94) 0,rgba(5,6,5,.6) 46%,rgba(5,6,5,.25)),
  url("/static/mw4/film/carte-masque.webp") 70% 38%/cover no-repeat;filter:saturate(1.05)}
.pt5__grain{position:absolute;inset:-40px;z-index:-1;pointer-events:none;opacity:.12;mix-blend-mode:overlay;background-image:var(--v5-grain);background-size:220px 220px}

/* le mot géant, en filigrane au pied de la dalle */
.pt5__mot{position:absolute;z-index:-2;left:clamp(14px,1.6vw,24px);bottom:clamp(-18px,-1vw,-8px);font-family:var(--f-mega);font-weight:900;font-stretch:125%;
  font-size:clamp(52px,6.6vw,118px);line-height:.8;letter-spacing:-.05em;white-space:nowrap;color:rgba(238,242,230,.07);
  transition:color .4s ease}
.pt5__porte:hover .pt5__mot{color:rgba(137,244,33,.14)}

/* l'objet : la Terzo posée, qui avance un peu au survol */
.pt5__objet{position:absolute;z-index:-1;right:-6%;bottom:16%;width:82%;height:auto;pointer-events:none;
  filter:drop-shadow(0 30px 26px rgba(0,0,0,.6));transition:transform .9s var(--mw4-entre,ease)}
.pt5__porte:hover .pt5__objet{transform:translateX(-3%) scale(1.03)}

.pt5__haut{display:grid;gap:10px;justify-items:start}
.pt5__nom{display:inline-flex;align-items:baseline;gap:10px;font-family:var(--f-mega);font-weight:900;font-stretch:125%;font-size:clamp(26px,2.6vw,42px);
  line-height:.9;letter-spacing:-.045em;text-transform:uppercase;color:#eefbe6}
.pt5__nom i{font-style:normal;font-family:var(--f-ui);font-weight:800;font-size:13px;letter-spacing:0;padding:3px 7px;border-radius:6px;color:#061006;background:var(--mw4-lime,#89f421)}
.pt5__live{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:9px;font-family:var(--f-ui);font-weight:650;font-size:13px;
  color:#eefbe6;background:rgba(5,6,5,.6);box-shadow:inset 0 0 0 1px rgba(238,242,230,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pt5__live i{width:8px;height:8px;border-radius:50%;background:#ff3b30;animation:pt5-pouls 1.6s ease-out infinite}
@keyframes pt5-pouls{0%{box-shadow:0 0 0 0 rgba(255,59,48,.55)}70%{box-shadow:0 0 0 8px rgba(255,59,48,0)}100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}}

.pt5__bas{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.pt5__parties{display:flex;flex-wrap:wrap;gap:6px;max-width:78%}
.pt5__parties span{padding:6px 10px;border-radius:9px;font-family:var(--f-ui);font-weight:600;font-size:13px;color:rgba(238,242,230,.86);
  background:rgba(238,242,230,.08);box-shadow:inset 0 0 0 1px rgba(238,242,230,.12)}
.pt5__aller{display:grid;place-items:center;flex:none;width:clamp(48px,4.4vw,62px);aspect-ratio:1;border-radius:50%;color:#061006;background:var(--mw4-lime,#89f421);
  transition:transform .5s var(--mw4-entre,ease)}
.pt5__aller .btn-ico{display:contents}
.pt5__aller svg{width:42%;height:42%}
.pt5__porte:hover .pt5__aller{transform:translateX(5px)}

/* l'appli : une bande basse, qui disparaît une fois installée */
.pt5__appli{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:14px 16px 14px 18px;border-radius:20px;color:var(--mw4-os,#eef2e6);background:#0b0d0b;
  box-shadow:inset 0 0 0 1px rgba(238,242,230,.1)}
.pt5__appli[hidden]{display:none}
.pt5__appli-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;color:var(--mw4-lime,#89f421);background:rgba(137,244,33,.1)}
.pt5__appli-ico svg{width:22px;height:22px}
.pt5__appli b{font-family:var(--f-display);font-weight:760;font-size:18px;text-transform:uppercase}
.pt5__appli-d{font-family:var(--f-ui);font-size:13px;color:rgba(238,242,230,.55)}
.pt5__appli .btn{margin-left:auto}

@media (max-width:760px){
  .pt5__grille{grid-template-columns:minmax(0,1fr)}
  .pt5__porte{min-height:300px;border-radius:22px}
  .pt5__objet{width:96%;right:-14%;bottom:24%}
  .pt5__parties{max-width:none}
  .pt5__appli{flex-wrap:wrap}
  .pt5__appli .btn{margin-left:0;width:100%;justify-content:space-between}
}
@media (prefers-reduced-motion: reduce){
  .pt5__porte{animation:none}
  .pt5__live i{animation:none}
}