/* MJ Academy · vraies photos et vidéos : fond vidéo, bannière photo, cartes photo, responsive */

/* Fond vidéo du hero */
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0B1A33}
.hero-media video,.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero-media .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,16,34,.94) 0%,rgba(6,16,34,.78) 55%,rgba(6,16,34,.5) 100%)}
:root[data-theme="light"] .hero-media{background:#fff}
:root[data-theme="light"] .hero-media .shade{background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(246,249,254,.86) 55%,rgba(240,246,254,.6) 100%)}
.hero::before{z-index:1}
.hero .blob{z-index:1}
.vid-toggle{position:absolute;right:16px;bottom:16px;z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(11,26,51,.65);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.vid-toggle:hover{background:rgba(15,91,216,.9)}
.vid-toggle svg{width:18px;height:18px}
.vid-toggle .i-play{display:none}
.vid-toggle[aria-pressed="true"] .i-pause{display:none}
.vid-toggle[aria-pressed="true"] .i-play{display:block}
.hero .vid-toggle{right:20px;bottom:20px}

/* Bannière : trio de photos */
.banner.photos{display:grid;grid-template-columns:1.25fr 1.25fr 1fr;gap:14px;background:none;border:0;box-shadow:none;border-radius:0;overflow:visible}
.banner.photos figure{position:relative;margin:0;border-radius:22px;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow);border:1px solid var(--line);background:var(--bg-b)}
.banner.photos img{width:100%;height:100%;min-height:0;object-fit:cover;transition:transform .8s ease}
.banner.photos figure:hover img{transform:scale(1.05)}
.banner.photos figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,16,34,.55));pointer-events:none}
.banner.photos .bub{left:14px;right:auto;top:14px;z-index:2}
.banner.photos .b2{animation-delay:4s}
.banner.photos .b3{animation-delay:7.6s}

/* Carte vidéo */
.vid-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
.vid-card{position:relative;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);aspect-ratio:16/10;background:#0B1A33}
.vid-card video,.vid-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(6,16,34,.7));pointer-events:none}
.vid-card .cap{position:absolute;left:20px;bottom:18px;right:70px;z-index:2;color:#fff;font-weight:700;font-size:15px;line-height:1.35}
.vid-card .cap small{display:block;font-weight:500;opacity:.85;font-size:13px}

/* Cartes photo (pour qui) */
.personas{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.persona.photo{position:relative;padding:0;overflow:hidden;aspect-ratio:3/4;border:0;background:#0B1A33;justify-content:flex-end;box-shadow:var(--shadow)}
.persona.photo img{position:absolute;inset:0;width:100%;height:100%;border-radius:0;object-fit:cover;animation:none;transition:transform .8s ease}
.persona.photo:hover img{transform:scale(1.06)}
.persona.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(6,16,34,.92));pointer-events:none}
.persona.photo .txt{position:relative;z-index:2;padding:20px}
.persona.photo h3,.persona.photo p{padding:0;color:#fff}
.persona.photo p{color:rgba(255,255,255,.85);font-size:14.5px;margin-top:4px}
.persona.photo:hover{transform:translateY(-8px)}

/* Contact : portrait photo */
.contact-side .persona-lg{max-width:360px}
.contact-side .persona-lg img{aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;animation:none}

/* Appel final sur photo */
.cta-photo{background:#0B1A33}
.cta-photo .cta-bg{position:absolute;inset:0;z-index:0}
.cta-photo .cta-bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:.55}
.cta-photo .cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,16,34,.88),rgba(6,16,34,.7) 50%,rgba(6,16,34,.92))}
.cta-photo .narrow{position:relative;z-index:2}
.cta-photo h2{color:#fff}
.cta-photo .social{background:rgba(11,26,51,.6);border-color:rgba(255,255,255,.25);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cta-photo .social small{color:rgba(255,255,255,.75)}
.cta-photo .social strong{color:#fff}
.credits{font-size:12.5px;color:var(--mute);margin-top:6px}

@media (max-width:900px){
  .vid-grid{grid-template-columns:1fr;gap:28px}
  .banner.photos{grid-template-columns:1fr 1fr}
  .banner.photos figure:last-child{grid-column:span 2;aspect-ratio:16/9}
  .hero-media .shade{background:linear-gradient(180deg,rgba(6,16,34,.92),rgba(6,16,34,.82))}
  :root[data-theme="light"] .hero-media .shade{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(244,248,254,.9))}
}
@media (max-width:600px){
  .banner.photos{grid-template-columns:1fr;gap:12px}
  .banner.photos figure:last-child{grid-column:auto;aspect-ratio:4/3}
  .persona.photo{aspect-ratio:4/5}
  .personas{grid-template-columns:1fr 1fr;gap:12px}
  .persona.photo .txt{padding:14px}
  .persona.photo h3{font-size:16px}
  .persona.photo p{font-size:13px}
  .vid-card{aspect-ratio:4/3;border-radius:18px}
}
@media (max-width:380px){.personas{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.banner.photos img,.persona.photo img{transition:none}}