/* ════════════════════════════════════════
   PORTFOLIO — Grille masonry infinie
   Styles spécifiques à la page /portfolio
════════════════════════════════════════ */

:root {
  --fil-h: 60px;
}

/* Scrollbar cachée sur la page portfolio */
body {
  background: var(--noir);
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: none;
}
body::-webkit-scrollbar { display: none; }

/* ════════════════════════════════════════
   GRAIN CINÉMA
════════════════════════════════════════ */
#cosmos-grain {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 9988;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: overlay;
}

/* ════════════════════════════════════════
   LIGNES DÉCORATIVES
════════════════════════════════════════ */
#cosmos-lines {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9987;
  pointer-events: none;
}
#cosmos-lines span {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(200,168,75,0.07) 20%,
    rgba(200,168,75,0.07) 80%,
    transparent 100%
  );
}
#cosmos-lines span:nth-child(1) { left: 16.67%; }
#cosmos-lines span:nth-child(2) { left: 33.33%; }
#cosmos-lines span:nth-child(3) { left: 50%;    }
#cosmos-lines span:nth-child(4) { left: 66.66%; }
#cosmos-lines span:nth-child(5) { left: 83.33%; }

/* ════════════════════════════════════════
   BARRE DE FILTRES
   pointer-events: none sur le conteneur
   pour laisser passer le scroll vertical,
   pointer-events: all sur les boutons seuls
════════════════════════════════════════ */
#cosmos-filters {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  z-index: 9998;
  height: var(--fil-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 24px;
  pointer-events: none;
}

.cosmos-filter {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 2px;
  font-family: var(--font);
  font-size: clamp(13px, 1.4vw, 18px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: rgba(255,255,255,0.38);
  padding: 0 18px;
  height: 36px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: all;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition:
    background   0.35s var(--ease),
    border-color 0.35s var(--ease),
    color        0.35s var(--ease);
}
.cosmos-filter:focus,
.cosmos-filter:focus-visible {
  outline: none;
  box-shadow: none;
}
.cosmos-filter.active {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.30);
  color: #FFFFFF;
}
@media (hover: hover) {
  .cosmos-filter:hover {
    background: rgba(255,255,255,0.11);
    border-color: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.75);
  }
}

/* ════════════════════════════════════════
   GRILLE MASONRY
   overflow-anchor: none empêche le
   navigateur de corriger le scroll
   quand des images chargent au-dessus
════════════════════════════════════════ */
#cosmos-wrapper {
  padding: 48px;
  padding-top: calc(var(--nav-h) + 16px);
  padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  background: var(--noir);
}
#cosmos-layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  overflow-anchor: none;
}
.cosmos-col {
  width: 23%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-anchor: none;
}

/* ════════════════════════════════════════
   CARDS
   Le sizer réserve la hauteur exacte
   via padding-bottom avant chargement
   → zéro layout shift sur iOS Safari
════════════════════════════════════════ */
.cosmos-item {
  width: 100%;
  position: relative;
  cursor: pointer;
  border-radius: 3px;
  overflow: hidden;
  background: var(--noir);
  transform: translateZ(0);
}
.cosmos-item-sizer {
  position: relative;
  height: 0;
  overflow: hidden;
}
.cosmos-item-sizer img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
}
.cosmos-item.playing iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}

/* ════════════════════════════════════════
   RESPONSIVE — Tablette (≤1024px)
════════════════════════════════════════ */
@media (max-width: 1024px) {
  .cosmos-filter { font-size: clamp(12px, 1.6vw, 16px); }
  #cosmos-wrapper {
    padding: 28px;
    padding-top: calc(var(--nav-h) + 12px);
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }
  .cosmos-col    { width: 48%; }
  #col-3, #col-4 { display: none; }
  #cosmos-lines  { display: none; }
}

/* ════════════════════════════════════════
   RESPONSIVE — Mobile (≤767px)
════════════════════════════════════════ */
@media (max-width: 767px) {
  :root { --fil-h: 52px; }

  #cosmos-lines  { display: none; }
  #cosmos-grain  { opacity: 0.16; }

  #cosmos-filters {
    gap: 5px;
    padding: 0 10px;
  }
  .cosmos-filter {
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 0 9px;
    height: 34px;
  }

  #cosmos-wrapper {
    padding: 10px;
    padding-top: calc(var(--nav-h) + 8px);
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
  #cosmos-layout { gap: 8px; }
  .cosmos-col    { width: 48%; gap: 8px; }
}