/* =============================================================
   MEDIA-KIT — Affichage cohérent des photos & vidéos (Palier 1)
   Chargé UNIQUEMENT en aperçu (?mediakit=1) ou flag site.media.kit=1.
   Toutes les règles sont préfixées « html.mediakit » — classe posée
   par media-kit.js. Si le JS ne tourne pas → AUCUN effet (réversible).
   Identité respectée : bleu nuit, contours fins, coins arrondis, cyan.
   ============================================================= */

/* ---- Variables locales (fallback si le thème ne les définit pas) ---- */
html.mediakit{
  --mk-cyan:#00e5ff;
  --mk-ink:#050b14;
  --mk-panel:#0a1526;
  --mk-line:rgba(0,229,255,.22);
  --mk-radius:14px;
}

/* =============================================================
   1) TUILE MÉDIA GÉNÉRIQUE (.mk-cell) — bâtie par le JS
   Ratio INTRINSÈQUE conservé : portrait reste haut, paysage large.
   Jamais d'object-fit:cover ni d'aspect-ratio forcé → rien n'est écrasé.
   ============================================================= */
html.mediakit .mk-cell{
  position:relative; display:block; margin:0; padding:0;
  border:1px solid var(--mk-line); border-radius:var(--mk-radius);
  overflow:hidden; background:var(--mk-ink); cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  -webkit-tap-highlight-color:transparent;
}
html.mediakit .mk-cell img.mk-media,
html.mediakit .mk-cell video.mk-media{
  display:block; width:100%; height:auto; max-width:100%;
  background:#000;
}
html.mediakit .mk-cell.mk-portrait{ /* vidéo/photo verticale : tuile haute, mise en valeur */ }

/* Pastille lecture ▶ (vidéos) */
html.mediakit .mk-play{
  position:absolute; inset:0; margin:auto;
  width:56px; height:56px; border-radius:50%;
  background:rgba(4,10,20,.55); border:2px solid #fff; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1; pointer-events:none; z-index:2;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
html.mediakit .mk-cell:hover .mk-play{ background:rgba(0,229,255,.28); }

/* Badge durée (bas-droite) */
html.mediakit .mk-dur{
  position:absolute; right:7px; bottom:7px; z-index:2;
  background:rgba(3,8,18,.78); color:#eaf3ff;
  font:600 11.5px/1 system-ui,sans-serif; letter-spacing:.02em;
  padding:3px 7px; border-radius:7px; pointer-events:none;
}

/* Placeholder vidéo sans miniature (jamais de rectangle noir vide) */
html.mediakit .mk-vthumb{
  position:relative; width:100%; aspect-ratio:16/10;
  background:
    radial-gradient(120% 120% at 50% 40%, rgba(0,229,255,.10), transparent 60%),
    repeating-linear-gradient(45deg,#0a1626 0 14px,#0e1c30 14px 28px);
  display:flex; align-items:center; justify-content:center;
}
html.mediakit .mk-vthumb::after{ content:"🎬 Vidéo"; position:absolute; bottom:8px; left:9px;
  font:600 11.5px/1 system-ui,sans-serif; color:#bfe9ff; }

/* =============================================================
   2) GALERIE COHÉRENTE (.mk-grid) — 1er média plus grand possible
   Portrait haut, paysage large ; grand sur desktop, pleine largeur mobile.
   ============================================================= */
html.mediakit .mk-grid{
  display:grid; gap:12px; align-items:start;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  margin:10px 0;
}
@media(min-width:1024px){
  html.mediakit .mk-grid{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
  /* Rendu moderne : le tout 1er média occupe 2 colonnes s'il y a du monde */
  html.mediakit .mk-grid.mk-hasmany > .mk-cell:first-child{ grid-column:span 2; }
}
@media(max-width:560px){
  html.mediakit .mk-grid{ grid-template-columns:1fr; gap:10px; }
}

/* =============================================================
   3) OVERRIDES SURFACES PALIER 1 (agrandir les médias trop petits)
   !important pour battre les <style> inline (max-width:150px, etc.).
   ============================================================= */

/* --- Galeries Sortie « oprog » & Voyage « vact » : 150/220px → grande grille --- */
html.mediakit .oprog-gal,
html.mediakit .vact-gal{
  display:grid !important; gap:12px !important; align-items:start !important;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) !important;
  flex-wrap:wrap;
}
@media(min-width:1024px){
  html.mediakit .oprog-gal,
  html.mediakit .vact-gal{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)) !important; }
}
@media(max-width:560px){
  html.mediakit .oprog-gal,
  html.mediakit .vact-gal{ grid-template-columns:1fr !important; }
}
html.mediakit .oprog-gal .mk-cell,
html.mediakit .vact-gal .mk-cell{ width:auto !important; max-width:none !important; max-height:none !important; }

/* --- Grilles photos (Profil / Passeport / Mes photos) : + grandes, portrait entier, curseur zoom --- */
html.mediakit .mbr-photos{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important; }
html.mediakit .mbr-photos img{ height:auto !important; max-height:340px; cursor:zoom-in; }
html.mediakit .mbr-photos img.mk-portrait{ object-fit:contain !important; background:#04070e; }
html.mediakit .photo-tile{ cursor:zoom-in; }
html.mediakit .photo-tile.mk-portrait{ aspect-ratio:auto !important; }
html.mediakit .photo-tile.mk-portrait img{ height:auto !important; object-fit:contain !important; }
html.mediakit .ppx-photo.mk-portrait{ aspect-ratio:auto !important; }
html.mediakit .ppx-photo.mk-portrait img{ height:auto !important; object-fit:contain !important; }

/* --- Souvenirs (.mv-* / .sv2-*) : vignettes vidéo lisibles, portrait entier, curseur zoom --- */
html.mediakit .mv-feature-media,
html.mediakit .mv-card-media,
html.mediakit .sv2-card{ cursor:zoom-in; }
html.mediakit .sv2-thumb,
html.mediakit video.sv2-thumb{ height:auto !important; min-height:150px; max-height:340px; }

/* --- Discussions (#disc .media / .dfl-media) : ne plus rogner le vertical, curseur zoom --- */
html.mediakit #disc .media img,
html.mediakit #disc .media video,
html.mediakit .dfl-media img,
html.mediakit .dfl-media video{
  object-fit:contain !important; max-height:70vh !important; background:#04070e; cursor:zoom-in;
}

/* --- Filmstrip du Fil (.feu-vf-*) : vignettes plus grandes + vidéo réparée --- */
html.mediakit .feu-vf-photo{
  width:100% !important; height:auto !important;
  aspect-ratio:auto !important; background:#04070e;
}
html.mediakit .feu-vf-photo img{
  width:100% !important; height:auto !important; max-height:260px !important;
  object-fit:contain !important; display:block;
}
html.mediakit .feu-vf-moment{ width:190px !important; }
@media(min-width:1024px){ html.mediakit .feu-vf-moment{ width:230px !important; } }
@media(max-width:560px){ html.mediakit .feu-vf-moment{ width:150px !important; } }
/* vignette vidéo : garde la pastille ▶ visible et lisible */
html.mediakit .feu-vf-play{
  width:44px !important; height:44px !important; font-size:18px !important;
  border:2px solid #fff !important; background:rgba(4,10,20,.55) !important;
}
/* vidéo cassée remplacée par un placeholder propre */
html.mediakit .feu-vf-photo.mk-broken img{ display:none !important; }
html.mediakit .feu-vf-photo.mk-broken{
  aspect-ratio:16/10 !important;
  background:
    radial-gradient(120% 120% at 50% 40%, rgba(0,229,255,.10), transparent 60%),
    repeating-linear-gradient(45deg,#0a1626 0 14px,#0e1c30 14px 28px) !important;
}

/* =============================================================
   4) LIGHTBOX PARTAGÉE (.mk-lb) — plein écran sombre, ratio complet
   Prev/Suivant + swipe, une seule vidéo active, jamais déformé.
   ============================================================= */
html.mediakit .mk-lb{
  position:fixed; inset:0; z-index:100050;
  background:rgba(2,6,14,.95); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center;
  touch-action:pan-y;
}
html.mediakit .mk-lb.mk-on{ display:flex; }
html.mediakit .mk-lb-stage{
  max-width:96vw; max-height:88vh; display:flex; align-items:center; justify-content:center;
}
html.mediakit .mk-lb-stage img,
html.mediakit .mk-lb-stage video{
  max-width:96vw; max-height:88vh; width:auto; height:auto;
  object-fit:contain; border-radius:12px; background:#000; display:block;
}
html.mediakit .mk-lb-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.42); color:#fff;
  font-size:24px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  z-index:2; transition:background .15s;
}
html.mediakit .mk-lb-btn:hover{ background:rgba(0,229,255,.28); }
html.mediakit .mk-lb-prev{ left:14px; }
html.mediakit .mk-lb-next{ right:14px; }
html.mediakit .mk-lb-x{
  position:absolute; top:14px; right:16px; width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,.4); background:rgba(0,0,0,.45); color:#fff;
  font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:3;
}
html.mediakit .mk-lb-x:hover{ background:rgba(226,86,75,.85); }
html.mediakit .mk-lb-count{
  position:absolute; top:20px; left:50%; transform:translateX(-50%);
  color:#cfe6f5; font:600 13px/1 system-ui,sans-serif;
  background:rgba(3,8,18,.6); padding:6px 12px; border-radius:999px; z-index:3;
}
/* Un seul média → pas de flèches ni compteur */
html.mediakit .mk-lb.mk-single .mk-lb-prev,
html.mediakit .mk-lb.mk-single .mk-lb-next,
html.mediakit .mk-lb.mk-single .mk-lb-count{ display:none; }
@media(max-width:560px){
  html.mediakit .mk-lb-btn{ width:44px; height:44px; font-size:20px; }
  html.mediakit .mk-lb-prev{ left:6px; } html.mediakit .mk-lb-next{ right:6px; }
}