:root{
  --bg: #070A12;
  --bg2:#0B1020;
  --card:#0F1730;
  --border: rgba(255,255,255,.10);
  --text:#EAF0FF;
  --muted: rgba(234,240,255,.72);
  --brand:#7C5CFF;      /* violet UMANIYA */
  --brand2:#39D0FF;     /* cyan accent */
  --shadow: 0 18px 50px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1200px 700px at 10% 0%, rgba(124,92,255,.25), transparent 60%),
              radial-gradient(1200px 700px at 90% 10%, rgba(57,208,255,.18), transparent 55%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
}

a{color:inherit; text-decoration:none}
.container{width:min(1120px, 92%); margin:0 auto}

.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(7,10,18,.55);
  border-bottom: 1px solid var(--border);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.logo{font-weight:900; letter-spacing:.4px}
.menu a{margin-left:14px; color: var(--muted)}
.menu a:hover{color: var(--text)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), #9D7BFF);
  color:#0b0f1a;
  font-weight:800;
  box-shadow: 0 10px 25px rgba(124,92,255,.25);
  transition: transform .18s ease, filter .18s ease;
}
.btn:hover{transform: translateY(-2px); filter: brightness(1.05)}
.btn.outline{
  background: transparent;
  border: 1px solid rgba(124,92,255,.6);
  color: var(--text);
  box-shadow:none;
}
.btn-small{padding:10px 12px; font-size:14px}

.hero{padding:58px 0 24px}
.hero-badge{
  display:inline-flex; gap:8px; align-items:center;
  padding:8px 12px; border-radius:999px;
  border:1px solid var(--border);
  background: rgba(15,23,48,.6);
  color: var(--muted);
}
.hero h1{font-size: clamp(34px, 4.5vw, 52px); margin:16px 0 10px; line-height:1.05}
.lead{max-width: 860px; color: var(--muted); font-size: 18px}
.cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}

.stats{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; margin-top:26px}
.stat{
  border:1px solid var(--border);
  background: rgba(15,23,48,.55);
  border-radius:16px;
  padding:14px;
}
.stat-n{font-weight:900}

.section{padding:26px 0}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.section h2{margin:0; font-size: 22px}
.link{color: rgba(57,208,255,.9)}
.link:hover{color: var(--text)}

.cards{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:14px;
}
.card{
  border:1px solid var(--border);
  border-radius:18px;
  background: rgba(15,23,48,.62);
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: transform .2s ease, border-color .2s ease;
}
.card:hover{transform: translateY(-3px); border-color: rgba(57,208,255,.25)}
.card-img{width:100%; height:170px; object-fit:cover; display:block}
.card-body{padding:14px}
.card-body h3{margin:0 0 6px; font-size:18px}
.muted{color: var(--muted)}
.small{font-size: 14px}
.clamp-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.page-title{padding:22px 0 6px}
.page-title h1{margin:0 0 8px}

.article{max-width: 860px; margin: 0 auto; padding: 20px 0}
.hero-img{
  width:100%;
  max-height:420px;
  object-fit:cover;
  border-radius:18px;
  border:1px solid var(--border);
  margin:14px 0;
}
.content{color: rgba(234,240,255,.86); line-height:1.7}

.footer{
  margin-top: 56px;
  border-top: 1px solid var(--border);
  background: rgba(7,10,18,.55);
}
.footer-grid{display:flex; justify-content:space-between; gap:14px; padding:24px 0}
.footer-logo{opacity:.95}
.footer a{color: rgba(57,208,255,.9)}

.form{max-width:540px; margin: 0 auto; display:flex; flex-direction:column; gap:12px}
.form label{display:flex; flex-direction:column; gap:6px; color: var(--muted)}
.form input, .form textarea{
  padding:12px; border-radius:12px;
  border:1px solid var(--border);
  background: rgba(15,23,48,.75);
  color: var(--text);
}

/* Animations simples */
.reveal{opacity:0; transform: translateY(10px); animation: reveal .7s ease forwards}
.reveal.delay-1{animation-delay:.12s}
.reveal.delay-2{animation-delay:.22s}
.reveal.delay-3{animation-delay:.32s}
@keyframes reveal { to { opacity:1; transform: translateY(0);} }

@media (max-width: 760px){
  .menu a{display:none}
  .stats{grid-template-columns:1fr}
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo img{
  height:180px;          /* taille du cercle */
  width:180px;           /* largeur = hauteur → cercle parfait */
  border-radius:50%;    /* 👈 LOGO ROND */
  object-fit:cover;
  background:#fff;      /* joli fond si logo transparent */
  padding:4px;          /* espace intérieur */
  box-shadow:0 4px 10px rgba(0,0,0,.15);
}

@media (max-width:760px){
  .logo img{
    height:28px;
    padding:3px;
  } 
}

.form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
.field label{display:block; color: var(--muted); margin-bottom:6px; font-size:14px}
.field input, .field select, .field textarea{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(15,23,48,.75);
  color: var(--text);
}

.searchbar{
  display:flex; gap:10px; align-items:center;
  margin: 10px 0 16px;
}
.searchbar input{
  flex:1;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(15,23,48,.75);
  color: var(--text);
}

.member-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap:14px;
}
.member-card{
  display:flex; gap:12px;
  border:1px solid var(--border);
  border-radius:18px;
  background: rgba(15,23,48,.62);
  box-shadow: var(--shadow);
  padding:12px;
}
.member-photo{
  width:74px; height:74px; flex:0 0 74px;
  border-radius:18px;
  border:1px solid var(--border);
  overflow:hidden;
  background: rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
}
.member-photo img{width:100%; height:100%; object-fit:cover}
.member-placeholder{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  color: rgba(234,240,255,.9);
  background: linear-gradient(135deg, rgba(124,92,255,.35), rgba(57,208,255,.22));
}
.member-body{flex:1}
.member-name{font-weight:900; font-size:18px}
.pill{
  display:inline-block;
  margin-top:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(57,208,255,.25);
  color: rgba(57,208,255,.95);
  font-size:13px;
  font-weight:700;
}
.badge-off{
  margin-top:10px;
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.75);
  font-size:12px;
}

.error{color:#ffb4b4; font-size:13px; margin-top:6px}

@media (max-width: 760px){
  .form-grid{grid-template-columns:1fr}
}

.linklike{
  background:transparent;
  border:none;
  padding:0;
  margin-left:14px; /* aligné comme les autres liens */
  color: var(--muted);
  cursor:pointer;
  font: inherit;
}
.linklike:hover{ color: var(--text); }

/* =========================
   CAROUSEL HUMANITAIRE
========================= */

.carousel-section{
  margin: 40px 0;
}

.carousel{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
}

.carousel-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

.carousel-slide.active{
  opacity: 1;
  position: relative;
}

.carousel-slide img{
  width: 100%;
  height: 420px;
  object-fit: cover;
  filter: brightness(0.75);
}

.carousel-caption{
  position: absolute;
  bottom: 18%;
  left: 8%;
  max-width: 520px;
  color: #fff;
}

.carousel-caption h2{
  font-size: 38px;
  font-weight: 900;
  margin-bottom: 10px;
}

.carousel-caption p{
  font-size: 18px;
  opacity: .95;
}

/* Flèches */
.carousel-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.45);
  border: none;
  color: #fff;
  font-size: 36px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
}
.carousel-btn:hover{ background: rgba(0,0,0,.65); }
.carousel-btn.prev{ left: 14px; }
.carousel-btn.next{ right: 14px; }

/* Points */
.carousel-dots{
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.carousel-dots button{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.45);
  cursor: pointer;
}
.carousel-dots button.active{
  background: #fff;
}

/* Mobile */
@media (max-width: 760px){
  .carousel-slide img{ height: 300px; }
  .carousel-caption h2{ font-size: 24px; }
  .carousel-caption p{ font-size: 15px; }
}

/* =========================
   ACTIONS (LIST + DETAIL)
========================= */

.actions-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap:14px;
  margin-top:18px;
}

.action-card{
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  background: rgba(15,23,48,.62);
  box-shadow: var(--shadow);
  transition: transform .2s ease, border-color .2s ease;
}
.action-card:hover{
  transform: translateY(-2px);
  border-color: rgba(57,208,255,.25);
}

.action-media{
  display:block;
  position:relative;
}
.action-media img{
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
  filter: brightness(.82);
}
.action-media-placeholder{
  height:200px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(600px 220px at 20% 20%, rgba(124,92,255,.25), transparent 60%),
              radial-gradient(600px 220px at 90% 80%, rgba(57,208,255,.18), transparent 55%),
              rgba(0,0,0,.35);
  color:#fff;
  font-weight:900;
  letter-spacing:.08em;
}

.action-pill{
  position:absolute;
  top:12px; left:12px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  color:#fff;
}

.action-body{ padding:14px; }
.action-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }

.tag{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(124,92,255,.25);
  background: rgba(124,92,255,.10);
  color: rgba(234,240,255,.9);
  font-size:12px;
  font-weight:800;
}
.tag-alt{
  border-color: rgba(57,208,255,.25);
  background: rgba(57,208,255,.08);
}

.action-title{ margin: 0 0 8px 0; font-size:18px; font-weight:900; }
.action-title a{ color: inherit; text-decoration:none; }
.action-title a:hover{ text-decoration:underline; }

.action-cta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}

/* Bandeau objectif (list page) */
.goal-banner{
  margin-top:14px;
  padding:16px;
  border-radius:18px;
  border:1px solid var(--border);
  background: radial-gradient(800px 220px at 20% 20%, rgba(124,92,255,.25), transparent 60%),
              radial-gradient(800px 220px at 80% 80%, rgba(57,208,255,.18), transparent 55%),
              rgba(15,23,48,.55);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
}
.goal-banner-left{max-width:780px}
.goal-banner-right{display:flex; gap:10px; flex-wrap:wrap}
.goal-badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(57,208,255,.25);
  background: rgba(57,208,255,.08);
  color: rgba(57,208,255,.95);
  font-size:12px;
  font-weight:900;
}
.goal-banner-title{margin:10px 0 6px; font-size:22px; font-weight:900}
.goal-mini{margin-top:8px}

/* Detail page */
.action-head{ margin-top:10px }
.action-section{ margin-top:26px }

.action-meta-badges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:12px 0 18px 0;
  font-size:13px;
  color: var(--muted);
}
.action-meta-badges span{
  background: rgba(124,92,255,.12);
  padding:6px 10px;
  border-radius:20px;
  border:1px solid var(--border);
}

/* Impact */
.impact-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:12px;
  margin-top:12px;
}
.impact-card{
  border:1px solid var(--border);
  border-radius:16px;
  background: rgba(15,23,48,.62);
  box-shadow: var(--shadow);
  padding:14px;
}
.impact-number{
  font-size:26px;
  font-weight: 900;
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(57,208,255,.95));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Goal card (detail) */
.goal-card{
  border:1px solid var(--border);
  border-radius:18px;
  background: rgba(15,23,48,.62);
  box-shadow: var(--shadow);
  padding:16px;
  margin-top:12px;
}
.goal-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
}
.goal-title{font-weight:900; font-size:18px}
.goal-count{font-size:18px; font-weight:900}
.goal-current{
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(57,208,255,.95));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-size:22px;
}
.goal-bar{
  height:12px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid var(--border);
  overflow:hidden;
  margin-top:14px;
}
.goal-fill{
  height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(124,92,255,.95), rgba(57,208,255,.95));
  box-shadow: 0 10px 25px rgba(124,92,255,.25);
}
.goal-bottom{
  margin-top:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

/* Gallery */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
  margin-top:12px;
}
.gallery-item{
  margin:0;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background: rgba(15,23,48,.55);
}
.gallery-item img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}
.gallery-item figcaption{padding:10px}

/* Videos */
.video-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:12px;
  margin-top:12px;
}
.video-thumb{
  width:100%;
  text-align:left;
  border:1px solid var(--border);
  border-radius:16px;
  background: rgba(15,23,48,.55);
  padding:12px;
  cursor:pointer;
}
.video-thumb:hover{ border-color: rgba(57,208,255,.25); transform: translateY(-2px); transition:.2s ease; }

.video-thumb-inner{
  position:relative;
  height:170px;
  border-radius:12px;
  background: radial-gradient(600px 180px at 30% 20%, rgba(124,92,255,.22), transparent 60%),
              radial-gradient(600px 180px at 80% 70%, rgba(57,208,255,.18), transparent 55%),
              rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.video-play{
  width:58px; height:58px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-size:22px;
  backdrop-filter: blur(6px);
}
.video-label{
  position:absolute;
  bottom:10px; left:12px;
  color: rgba(255,255,255,.9);
  font-size:13px;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.14);
  padding:6px 10px;
  border-radius:999px;
}

/* Modal */
.video-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:999;
}
.video-modal[aria-hidden="false"]{ display:block; }
.video-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.6);
}
.video-modal-content{
  position:relative;
  width:min(920px, 92%);
  margin: 6vh auto;
  background: rgba(15,23,48,.92);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  padding:12px;
}
.video-modal-close{
  position:absolute;
  top:10px; right:10px;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  color:#fff;
  cursor:pointer;
}
.video-modal-content video{
  width:100%;
  border-radius:12px;
  background:#000;
}

/* Responsive tweaks */
@media (max-width: 760px){
  .goal-banner{align-items:stretch}
}

/* =========================
   MEDIA GRID + LIGHTBOX PRO
========================= */

.media-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:12px;
  margin-top:12px;
}

.media-card{
  width:100%;
  text-align:left;
  padding:0;
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  background: rgba(15,23,48,.62);
  box-shadow: var(--shadow);
  cursor:pointer;
  transition: transform .2s ease, border-color .2s ease;
}
.media-card:hover{
  transform: translateY(-2px);
  border-color: rgba(57,208,255,.25);
}

.media-thumb{
  height:180px;
  overflow:hidden;
  background: rgba(255,255,255,.06);
}
.media-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: brightness(.9);
  transform: scale(1.01);
}

.media-thumb-video{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(600px 200px at 20% 20%, rgba(124,92,255,.25), transparent 60%),
              radial-gradient(600px 200px at 80% 80%, rgba(57,208,255,.18), transparent 55%),
              rgba(0,0,0,.45);
}

.media-play{
  width:60px; height:60px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-size:22px;
  backdrop-filter: blur(6px);
}

.media-badge{
  position:absolute;
  top:10px; left:10px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  color:#fff;
}

.media-meta{ padding:12px; }
.media-kind{ font-weight:900; font-size:13px; opacity:.95; }
.media-caption{
  margin-top:6px;
  color: rgba(234,240,255,.85);
  font-size:13px;
  line-height:1.35;
  min-height: 2.6em;
}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  z-index:999;
  display:none;
}
.lightbox[aria-hidden="false"]{ display:block; }

.lightbox-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.70);
}

.lightbox-panel{
  position:relative;
  width:min(980px, 92%);
  margin: 5vh auto;
  border-radius:22px;
  border:1px solid var(--border);
  background: rgba(15,23,48,.94);
  box-shadow: 0 40px 100px rgba(0,0,0,.6);
  overflow:hidden;
}

.lightbox-stage{
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 52vh;
  padding:10px;
}

.lightbox-stage img,
.lightbox-stage video{
  max-width:100%;
  max-height:70vh;
  border-radius:16px;
  display:none;
}

.lightbox-stage img.active,
.lightbox-stage video.active{
  display:block;
}

.lightbox-close{
  position:absolute;
  top:12px; right:12px;
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  color:#fff;
  cursor:pointer;
  z-index:5;
}

.lightbox-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:46px; height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  color:#fff;
  cursor:pointer;
  z-index:5;
  font-size:34px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox-nav.prev{ left:12px; }
.lightbox-nav.next{ right:12px; }
.lightbox-nav:hover{ background: rgba(0,0,0,.55); }

.lightbox-caption{
  padding:14px 16px;
  border-top:1px solid rgba(255,255,255,.10);
}
.lightbox-counter{ margin-bottom:6px; }

/* Mobile */
@media (max-width: 760px){
  .media-thumb{ position:relative; }
  .media-thumb .media-badge{ position:absolute; top:10px; left:10px; }
  .lightbox-nav{ display:none; } /* swipe au mobile */
}

/* =========================
   MEDIA PRO (thumbs + lightbox)
========================= */

.media-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:12px;
  margin-top:12px;
}

.media-card{
  width:100%;
  padding:0;
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  background: rgba(15,23,48,.62);
  box-shadow: var(--shadow);
  cursor:pointer;
  text-align:left;
  transition: transform .2s ease, border-color .2s ease;
}
.media-card:hover{
  transform: translateY(-2px);
  border-color: rgba(57,208,255,.25);
}

.media-thumb{
  position:relative;
  height:180px;
  overflow:hidden;
  background: rgba(255,255,255,.06);
}
.media-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: brightness(.88);
}

.media-thumb-fallback{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(600px 200px at 20% 20%, rgba(124,92,255,.25), transparent 60%),
              radial-gradient(600px 200px at 80% 80%, rgba(57,208,255,.18), transparent 55%),
              rgba(0,0,0,.45);
}

.media-badge{
  position:absolute;
  top:10px; left:10px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  color:#fff;
}

.media-play-overlay{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%, -50%);
  width:58px; height:58px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-size:22px;
  backdrop-filter: blur(6px);
}

.media-meta{ padding:12px; }
.media-title{ font-weight:900; font-size:14px; }
.media-sub{ margin-top:6px; }
.media-desc{ margin-top:8px; line-height:1.35; }

/* Lightbox */
.lightbox{ position:fixed; inset:0; z-index:999; display:none; }
.lightbox[aria-hidden="false"]{ display:block; }
.lightbox-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.72); }

.lightbox-panel{
  position:relative;
  width:min(980px, 92%);
  margin: 5vh auto;
  border-radius:22px;
  border:1px solid var(--border);
  background: rgba(15,23,48,.95);
  box-shadow: 0 40px 100px rgba(0,0,0,.6);
  overflow:hidden;
}

.lightbox-stage{
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 52vh;
  padding:10px;
}
.lightbox-stage img,
.lightbox-stage video{
  max-width:100%;
  max-height:70vh;
  border-radius:16px;
  display:none;
}
.lightbox-stage img.active,
.lightbox-stage video.active{ display:block; }

.lightbox-close{
  position:absolute;
  top:12px; right:12px;
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  color:#fff;
  cursor:pointer;
  z-index:5;
}

.lightbox-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:46px; height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  color:#fff;
  cursor:pointer;
  z-index:5;
  font-size:34px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox-nav.prev{ left:12px; }
.lightbox-nav.next{ right:12px; }
.lightbox-nav:hover{ background: rgba(0,0,0,.55); }

.lightbox-caption{
  padding:14px 16px;
  border-top:1px solid rgba(255,255,255,.10);
}
.lightbox-top{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.lightbox-title{ font-weight:900; font-size:16px; margin-top:6px; }
.lightbox-desc{ margin-top:8px; }

@media (max-width: 760px){
  .media-thumb{ height:165px; }
  .lightbox-nav{ display:none; }
}