/* Médiathèque — Dynamique Ted Belkas */
.media-page{
    --md-blue:#07539a;
    --md-deep:#032f5d;
    --md-sky:#0781d9;
    --md-red:#d91f2a;
    --md-yellow:#f4c542;
    --md-ink:#0c1b2b;
    --md-muted:#667688;
    --md-line:#dce6ef;
    color:var(--md-ink)!important;
    background:linear-gradient(180deg,rgba(237,245,251,.96),rgba(247,250,252,.98) 720px,#fff),url("../images/s16.jpg") center top/cover fixed!important;
}
.media-page::before{content:""!important;position:fixed!important;z-index:-1!important;inset:0!important;background:radial-gradient(circle at 5% 15%,rgba(7,129,217,.14),transparent 28rem),radial-gradient(circle at 95% 60%,rgba(244,197,66,.13),transparent 26rem)!important;pointer-events:none!important}

/* Hero photographique */
.media-page .media-page-header{
    position:relative!important;
    overflow:hidden!important;
    min-height:690px!important;
    padding-top:112px!important;
    color:#fff!important;
    background:linear-gradient(90deg,rgba(2,24,48,.95) 0%,rgba(3,47,93,.73) 48%,rgba(3,47,93,.24) 100%),linear-gradient(0deg,rgba(2,24,48,.72),transparent 58%),url("../images/s16.jpg") center 46%/cover no-repeat!important;
}
.media-page .media-page-header::before{content:""!important;position:absolute!important;z-index:0!important;inset:0 auto 0 0!important;width:8px!important;height:auto!important;border:0!important;border-radius:0!important;background:linear-gradient(var(--md-red) 0 34%,var(--md-yellow) 34% 67%,var(--md-sky) 67%)!important;animation:none!important}
.media-page .media-page-header::after{content:"MEDIA"!important;right:-20px!important;bottom:-68px!important;color:rgba(255,255,255,.035)!important;font-family:"Outfit",sans-serif!important;font-size:clamp(9rem,21vw,19rem)!important;letter-spacing:-.08em!important}

/* Navigation */
.media-page .navbar,.media-page .navbar.is-scrolled{
    top:14px!important;
    padding:9px 10px 9px 14px!important;
    border:1px solid rgba(255,255,255,.2)!important;
    border-radius:18px!important;
    background:rgba(3,35,67,.88)!important;
    box-shadow:0 18px 55px rgba(1,18,36,.23)!important;
    backdrop-filter:blur(18px)!important;
}
.media-page .brand img{width:56px!important;height:56px!important;padding:2px!important;border:2px solid rgba(255,255,255,.9)!important;border-radius:13px!important;background:#fff!important;box-shadow:0 9px 24px rgba(0,0,0,.18)!important}
.media-page .brand strong{color:#fff!important;font-family:"Outfit",sans-serif!important;font-size:.91rem!important;letter-spacing:.025em!important}
.media-page .brand small{color:rgba(255,255,255,.58)!important}
.media-page .nav-links a{padding:11px 12px!important;color:rgba(255,255,255,.75)!important;border-radius:9px!important;background:transparent!important}
.media-page .nav-links a::after{background:var(--md-yellow)!important}
.media-page .nav-links a:hover,.media-page .nav-links a.is-active{color:#fff!important;background:rgba(255,255,255,.09)!important}
.media-page .nav-links a:nth-last-child(2){color:#fff!important;background:var(--md-red)!important}

/* Contenu du hero */
.media-page .media-page-hero{position:relative!important;z-index:2!important;display:grid!important;grid-template-columns:minmax(0,1fr) 230px!important;align-items:end!important;gap:54px!important;padding:94px 0 88px!important}
.media-page .media-page-hero .eyebrow{margin:0 0 20px!important;color:var(--md-yellow)!important;font-size:.72rem!important;letter-spacing:.18em!important}
.media-page .media-page-hero h1{max-width:800px!important;margin:0!important;color:#fff!important;font-family:"Outfit",sans-serif!important;font-size:clamp(4rem,7vw,7rem)!important;font-weight:700!important;line-height:.9!important;letter-spacing:-.065em!important;text-wrap:balance!important}
.media-page .media-page-hero .hero-text{max-width:590px!important;margin:28px 0 0!important;color:rgba(255,255,255,.7)!important;font-size:1.05rem!important;line-height:1.7!important}
.media-page .media-hero-panel{position:relative!important;overflow:hidden!important;display:grid!important;gap:5px!important;padding:25px!important;border:1px solid rgba(255,255,255,.22)!important;border-radius:20px!important;background:rgba(3,47,93,.45)!important;box-shadow:0 25px 70px rgba(0,0,0,.24)!important;backdrop-filter:blur(16px)!important}
.media-page .media-hero-panel::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--md-red),var(--md-yellow),var(--md-sky))}
.media-page .media-hero-panel>svg{width:30px!important;height:30px!important;margin-bottom:18px!important;color:#fff!important}
.media-page .media-hero-panel span,.media-page .media-hero-panel small{color:rgba(255,255,255,.62)!important;font-size:.7rem!important;letter-spacing:.07em!important;text-transform:uppercase!important}
.media-page .media-hero-panel strong{color:var(--md-yellow)!important;font-family:"Outfit",sans-serif!important;font-size:4.2rem!important;line-height:.9!important}

/* Bibliothèque */
.media-page .media-section{position:relative!important;overflow:hidden!important;padding:105px 0 125px!important;background:transparent!important}
.media-page .media-section::before{content:"";position:absolute;z-index:-1;right:-180px;top:70px;width:460px;height:460px;border:70px solid rgba(7,83,154,.045);border-radius:50%}
.media-page .section-heading{display:flex!important;align-items:end!important;justify-content:space-between!important;max-width:none!important;margin-bottom:42px!important;padding-bottom:25px!important;border-bottom:1px solid var(--md-line)!important}
.media-page .section-heading::after{width:100px!important;height:4px!important;margin:0!important;background:linear-gradient(90deg,var(--md-red),var(--md-yellow),var(--md-blue))!important}
.media-page .section-heading .eyebrow{margin:0 0 10px!important;color:var(--md-red)!important}
.media-page .section-heading h2{margin:0!important;color:var(--md-ink)!important;font-family:"Outfit",sans-serif!important;font-size:clamp(2.8rem,5vw,5rem)!important;line-height:1!important;letter-spacing:-.055em!important}
.media-page .media-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px!important;align-items:start!important}
.media-page .media-card{position:relative!important;overflow:hidden!important;padding:0!important;border:1px solid rgba(7,83,154,.11)!important;border-radius:20px!important;background:#fff!important;box-shadow:0 22px 65px rgba(3,47,93,.11)!important;transform:none!important;transition:transform .3s,box-shadow .3s,border-color .3s!important}
.media-page .media-card::before{content:none!important}
.media-page .media-card:hover{border-color:rgba(7,83,154,.24)!important;box-shadow:0 32px 80px rgba(3,47,93,.17)!important;transform:translateY(-7px)!important}
.media-page .media-card video{display:block!important;width:100%!important;min-height:0!important;aspect-ratio:16/9!important;border:0!important;border-radius:0!important;background:#03182e!important;box-shadow:none!important;object-fit:cover!important}
.media-page .media-card-body{padding:25px 27px 28px!important}
.media-page .media-card-label{display:inline-flex!important;align-items:center!important;gap:7px!important;margin-bottom:14px!important;padding:6px 10px!important;color:var(--md-blue)!important;border-radius:999px!important;background:#eaf4fb!important;font-size:.67rem!important;font-weight:800!important;letter-spacing:.06em!important;text-transform:uppercase!important}
.media-page .media-card-label svg{width:14px!important;height:14px!important;fill:currentColor!important}
.media-page .media-card h3{margin:0 0 20px!important;color:var(--md-ink)!important;font-family:"Outfit",sans-serif!important;font-size:1.35rem!important;line-height:1.3!important;letter-spacing:-.025em!important}
.media-page .media-card-meta{display:flex!important;flex-wrap:wrap!important;gap:14px!important;padding-top:17px!important;border-top:1px solid #e8eef3!important;color:var(--md-muted)!important;font-size:.73rem!important}
.media-page .media-card-meta span{display:inline-flex!important;align-items:center!important;gap:6px!important}
.media-page .media-card-meta svg{width:15px!important;height:15px!important;color:var(--md-red)!important}
.media-page .media-empty{padding:26px!important;color:var(--md-blue)!important;border:1px solid #c8deed!important;border-left:5px solid var(--md-red)!important;border-radius:14px!important;background:#eef6fb!important;box-shadow:0 14px 40px rgba(3,47,93,.08)!important}

/* Pied de page */
.media-page .site-footer{color:#fff!important;background:#06182a!important}
.media-page .site-footer::before,.media-page .site-footer::after{content:none!important;display:none!important}
.media-page .site-footer img{border-radius:13px!important}
.media-page .site-footer strong{color:#fff!important}
.media-page .site-footer a,.media-page .site-footer p{color:rgba(255,255,255,.58)!important}
.media-page .site-footer a:hover{color:var(--md-yellow)!important}
.media-page .back-to-top{color:#fff!important;background:var(--md-red)!important;box-shadow:0 10px 26px rgba(217,31,42,.25)!important}
.media-page .whatsapp-float{display:none!important}

@media(max-width:900px){
    .media-page .media-page-header{min-height:720px!important;background-position:58% center!important}
    .media-page .media-page-hero{grid-template-columns:1fr!important;align-items:start!important;gap:32px!important;padding-top:82px!important}
    .media-page .media-hero-panel{width:min(100%,320px)!important}
    .media-page .media-grid{grid-template-columns:1fr!important}
}
@media(max-width:620px){
    .media-page .navbar{top:8px!important;width:calc(100% - 18px)!important;border-radius:14px!important}
    .media-page .brand img{width:48px!important;height:48px!important}
    .media-page .brand strong{font-size:.75rem!important}
    .media-page .brand small{display:none!important}
    .media-page .menu-toggle{background:rgba(255,255,255,.1)!important}
    .media-page .nav-links{background:#032f5d!important;border-color:rgba(255,255,255,.12)!important}
    .media-page .media-page-header{min-height:690px!important}
    .media-page .media-page-hero{width:calc(100% - 26px)!important;padding:78px 0 62px!important}
    .media-page .media-page-hero h1{font-size:3.65rem!important}
    .media-page .media-section{padding:78px 0 90px!important}
    .media-page .section-heading{display:block!important}
    .media-page .section-heading::after{margin-top:20px!important}
    .media-page .media-card-body{padding:21px!important}
}
@media(prefers-reduced-motion:reduce){.media-page *{animation:none!important;transition:none!important}}