/* ============================================================
   Crealib Portfolio — portfolio.css
   Masonry responsive + même esthétique que Crealib Player
   ============================================================ */

:root {
  --cp-bg:          #0d0d0d;
  --cp-surface:     #181818;
  --cp-accent:      #e63946;
  --cp-accent-glow: rgba(230,57,70,.3);
  --cp-text:        #f1f1f1;
  --cp-muted:       rgba(255,255,255,.45);
  --cp-radius:      10px;
  --cp-transition:  .25s ease;
  --cp-gap:         14px;
}

/* ── Wrapper ── */
.cp-wrapper {
  width: 100%;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

/* ── Filtres ── */
.cp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.cp-filter-btn {
  padding: 8px 18px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.15);
  background: transparent;
  color: var(--cp-muted);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--cp-transition);
  letter-spacing: .03em;
}

.cp-filter-btn:hover {
  border-color: rgba(255,255,255,.35);
  color: var(--cp-text);
}

.cp-filter-btn.active {
  background: var(--cp-accent);
  border-color: var(--cp-accent);
  color: #fff;
  box-shadow: 0 0 16px var(--cp-accent-glow);
}

/* ══════════════════════════════════════════
   MASONRY — CSS columns
   4 col > 900px | 3 col > 600px | 2 col > 380px | 1 col mobile
   ══════════════════════════════════════════ */
.cp-grid {
  columns: 4 220px;
  column-gap: var(--cp-gap);
}

/* ── Item ── */
.cp-item {
  break-inside: avoid;        /* jamais coupé entre deux colonnes */
  margin-bottom: var(--cp-gap);
  border-radius: var(--cp-radius);
  overflow: hidden;
  transition: opacity var(--cp-transition), transform var(--cp-transition);
}

.cp-item.hidden {
  display: none;
}

/* ── Thumbnail — hauteur naturelle ── */
.cp-thumb {
  position: relative;
  background: var(--cp-surface);
  overflow: hidden;
  border-radius: var(--cp-radius);
  cursor: pointer;
}

/* L'image garde sa vraie hauteur → effet masonry */
.cp-thumb img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .45s ease;
}

.cp-thumb:hover img {
  transform: scale(1.06);
}

/* ── Overlay ── */
.cp-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 55%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
  opacity: 0;
  transition: opacity var(--cp-transition);
}

.cp-thumb:hover .cp-overlay {
  opacity: 1;
}

.cp-titre {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 5px;
  line-height: 1.3;
}

.cp-cat-badge {
  display: inline-block;
  font-size: 11px;
  color: var(--cp-accent);
  border: 1px solid var(--cp-accent);
  border-radius: 20px;
  padding: 2px 10px;
  letter-spacing: .04em;
  margin-bottom: 10px;
  align-self: flex-start;
}

.cp-zoom-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--cp-transition), box-shadow var(--cp-transition);
}

.cp-zoom-btn:hover {
  background: var(--cp-accent);
  box-shadow: 0 0 14px var(--cp-accent-glow);
}

.cp-zoom-btn svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

/* ── Lightbox backdrop ── */
.cp-lb-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 9000;
  backdrop-filter: blur(8px);
  animation: cpFadeIn .2s ease;
}

/* ── Lightbox ── */
.cp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9001;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
  animation: cpFadeIn .2s ease;
}

@keyframes cpFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cp-lb-inner {
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.cp-lb-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.8);
}

.cp-lb-titre {
  font-size: 14px;
  color: var(--cp-muted);
  margin: 0;
  text-align: center;
}

/* ── Boutons lightbox ── */
.cp-lb-close,
.cp-lb-prev,
.cp-lb-next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--cp-transition), border-color var(--cp-transition);
}

.cp-lb-close:hover,
.cp-lb-prev:hover,
.cp-lb-next:hover {
  background: var(--cp-accent);
  border-color: var(--cp-accent);
}

.cp-lb-close svg,
.cp-lb-prev svg,
.cp-lb-next svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.cp-lb-close {
  position: fixed;
  top: 20px;
  right: 20px;
}

/* ── Erreur ── */
.crealib-portfolio-error {
  background: #1a0508;
  border-left: 3px solid var(--cp-accent);
  padding: 10px 14px;
  color: var(--cp-text);
  border-radius: 4px;
  font-size: 14px;
}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */

/* Tablette : 3 colonnes */
@media (max-width: 900px) {
  .cp-grid { columns: 3 180px; }
}

/* Grand mobile : 2 colonnes */
@media (max-width: 600px) {
  .cp-grid { columns: 2 150px; column-gap: 10px; }
  .cp-item { margin-bottom: 10px; }
  .cp-lb-prev,
  .cp-lb-next { width: 36px; height: 36px; }
}

/* Petit mobile : 1 colonne */
@media (max-width: 360px) {
  .cp-grid { columns: 1; }
}