/* ============================================
   JJLR Films — Réalisations (page-specific)
   Requires: common.css
   ============================================ */


/* ============================================
   HERO
   ============================================ */
.hero{position:relative;height:55vh;min-height:400px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,16,.5) 0%,rgba(6,10,16,.3) 40%,rgba(6,10,16,.8) 85%,var(--bg-deep) 100%)}
.hero__content{position:relative;z-index:2;text-align:center;padding:0 1.5rem;animation:fadeUp 1s var(--ease) both}
.hero__title{font-family:var(--font-display);font-size:clamp(2.5rem,7vw,5rem);font-weight:900;color:var(--white);margin-bottom:1rem;letter-spacing:-.02em}
.hero__sub{font-size:clamp(.9rem,1.5vw,1.15rem);color:var(--text-muted);letter-spacing:.05em}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}


/* ============================================
   TABS
   ============================================ */
.tabs-section{padding:2rem 0;background:var(--bg-deep);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--border)}
.tabs-section .container{overflow:visible}
.tabs{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:.25rem}
.tabs::-webkit-scrollbar{display:none}
.tab{font-family:var(--font-body);font-size:.85rem;font-weight:600;color:var(--text-muted);background:transparent;border:1px solid var(--border);padding:.6rem 1.5rem;border-radius:50px;cursor:pointer;transition:all .3s var(--ease);white-space:nowrap;flex-shrink:0}
.tab:hover{color:var(--white);border-color:var(--border-light)}
.tab.active{color:var(--white);background:var(--gradient);border-color:transparent}


/* ============================================
   CONTENT BLOCKS
   ============================================ */
.content-block{padding:var(--section-pad) 0;background:var(--bg-deep)}
.content-block--alt{background:var(--bg-dark)}


/* ============================================
   FLEET GRID (Drone cards)
   ============================================ */
.fleet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-bottom:3rem}
.fleet-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:all .4s var(--ease)}
.fleet-card:hover{border-color:rgba(108,123,255,.15);transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.4)}
.fleet-card img{width:100%;height:200px;object-fit:cover}
.fleet-card__body{padding:1.5rem}
.fleet-card__body h3{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--white);margin-bottom:.5rem}
.fleet-card__body p{font-size:.85rem;color:var(--text-muted);line-height:1.7}


/* ============================================
   VIDEO GRID
   ============================================ */
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.video-item{position:relative;padding-bottom:56.25%;border-radius:14px;overflow:hidden;background:var(--bg-card);border:1px solid var(--border);transition:all .4s var(--ease)}
.video-item:hover{border-color:rgba(108,123,255,.12);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.video-item iframe,.video-item .yt-facade{position:absolute;inset:0;width:100%;height:100%;border:none}


/* ============================================
   SERVICES MINI GRID
   ============================================ */
.services-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:3rem}
.service-mini{padding:2rem;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;transition:all .4s var(--ease)}
.service-mini:hover{border-color:rgba(108,123,255,.15);transform:translateY(-3px)}
.service-mini__icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(108,123,255,.1);border-radius:12px;color:var(--accent);margin-bottom:1rem}
.service-mini h4{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--white);margin-bottom:.5rem}
.service-mini p{font-size:.85rem;color:var(--text-muted);line-height:1.7}


/* ============================================
   PROCESS
   ============================================ */
.process-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1.25rem}
.process-step{text-align:center;padding:2rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;transition:all .4s var(--ease)}
.process-step:hover{border-color:rgba(108,123,255,.15);transform:translateY(-3px)}
.process-step__num{display:inline-block;font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--accent);margin-bottom:.75rem}
.process-step h4{font-family:var(--font-display);font-size:.95rem;font-weight:700;color:var(--white);margin-bottom:.4rem}
.process-step p{font-size:.8rem;color:var(--text-muted);line-height:1.6}


/* ============================================
   PHOTO GRID
   ============================================ */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.photo-item{position:relative;padding-bottom:75%;border-radius:14px;overflow:hidden;cursor:pointer;background:var(--bg-card)}
.photo-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.photo-item:hover img{transform:scale(1.08)}
.photo-item::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(6,10,16,.4) 0%,transparent 50%);opacity:0;transition:opacity .3s var(--ease)}
.photo-item:hover::after{opacity:1}


/* ============================================
   LIVE FEATURES
   ============================================ */
.live-features{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.live-feature{text-align:center;padding:2.5rem 2rem;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;transition:all .4s var(--ease)}
.live-feature:hover{border-color:rgba(108,123,255,.15);transform:translateY(-4px)}
.live-feature__icon{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;background:rgba(108,123,255,.1);border-radius:50%;color:var(--accent);margin-bottom:1.25rem}
.live-feature h4{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--white);margin-bottom:.5rem}
.live-feature p{font-size:.9rem;color:var(--text-muted);line-height:1.7}


/* ============================================
   RESPONSIVE — Realisations-specific
   ============================================ */
@media(max-width:1024px){
    .fleet-grid{grid-template-columns:repeat(2,1fr)}
    .video-grid{grid-template-columns:repeat(2,1fr)}
    .services-mini-grid{grid-template-columns:repeat(2,1fr)}
    .process-steps{grid-template-columns:repeat(3,1fr)}
    .live-features{grid-template-columns:1fr}
}

@media(max-width:640px){
    .hero{height:45vh;min-height:300px}
    .fleet-grid{grid-template-columns:1fr}
    .video-grid{grid-template-columns:1fr}
    .services-mini-grid{grid-template-columns:1fr}
    .process-steps{grid-template-columns:1fr}
    .photo-grid{grid-template-columns:repeat(2,1fr)}
    .tabs-section{position:relative}
}