/* Style propre à la page captures (extrait de l'ancienne page autonome). */
.cork-section {
    position: relative; z-index: 1;
    padding: 3rem 1rem 5rem;
    display: flex; flex-direction: column; align-items: center;
  }
.cork-frame {
    position: relative;
    width: 100%;
    max-width: 1600px;
    background:
      repeating-linear-gradient(
        47deg,
        rgba(0,0,0,0.03) 0px, rgba(0,0,0,0.03) 2px,
        transparent 2px, transparent 8px
      ),
      repeating-linear-gradient(
        -47deg,
        rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 2px,
        transparent 2px, transparent 8px
      ),
      radial-gradient(ellipse at 20% 30%, #c8966e 0%, #b07a4e 30%, #956040 60%, #7a4e30 100%);
    border-radius: 4px;
    padding: 3.5rem 3rem;
    box-shadow:
      inset 0 0 80px rgba(0,0,0,0.4),
      inset 0 0 20px rgba(0,0,0,0.3),
      0 20px 60px rgba(0,0,0,0.7),
      0 4px 12px rgba(0,0,0,0.5);
    min-height: 700px;
  }
.cork-frame::before {
    content: '';
    position: absolute; inset: 0;
    border: 22px solid transparent;
    border-image: linear-gradient(135deg, #6b4226, #8b5e3c, #5a3520, #7a4e30, #6b4226) 1;
    border-radius: 4px;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05);
    pointer-events: none;
  }
.cork-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    position: relative;
  }
.cork-photo {
    position: relative;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s;
    animation: fadeInPhoto 0.6s ease forwards;
    opacity: 0;
  }
@keyframes fadeInPhoto {
    from { opacity: 0; transform: var(--photo-rotate) translateY(10px) scale(0.95); }
    to   { opacity: 1; transform: var(--photo-rotate); }
  }
.cork-photo:hover {
    transform: var(--photo-rotate) scale(1.06) !important;
    z-index: 10;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6) !important;
  }
.cork-photo-inner {
    background: white;
    padding: 8px 8px 32px;
    box-shadow: 3px 3px 12px rgba(0,0,0,0.5), 1px 1px 3px rgba(0,0,0,0.3);
    position: relative;
  }
.cork-photo img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    filter: sepia(0.05) contrast(1.02);
    transition: filter 0.3s;
  }
.cork-photo:hover img { filter: sepia(0) contrast(1.05); }
.cork-photo-author {
    position: absolute;
    bottom: 6px; left: 0; right: 0;
    text-align: center;
    font-size: 0.62rem;
    color: #555;
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
  }
.cork-pin {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,255,255,0.3);
  }
.cork-pin::after {
    content: '';
    position: absolute;
    bottom: -6px; left: 50%;
    transform: translateX(-50%);
    width: 2px; height: 8px;
    background: rgba(0,0,0,0.3);
    border-radius: 1px;
  }
.cork-actions {
    margin-top: 2rem;
    display: flex; justify-content: center;
  }
.btn-reshuffle {
    font-family: 'Raleway', sans-serif;
    font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
    padding: 0.7rem 2rem; cursor: pointer;
    background: transparent; border: 1px solid rgba(201,146,42,0.4); color: var(--bronze-light);
    transition: all 0.3s;
  }
.btn-reshuffle:hover { background: rgba(201,146,42,0.1); border-color: var(--bronze); }
.cork-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 400px; gap: 1rem; color: var(--cork-dark);
    font-family: 'Cinzel', serif; text-align: center;
  }
.cork-empty-icon { font-size: 3rem; opacity: 0.4; }
.cork-empty-text { font-size: 1rem; opacity: 0.6; }
.lightbox-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(5,5,8,0);
    backdrop-filter: blur(0px);
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
    pointer-events: none;
    transition: background 0.4s ease, backdrop-filter 0.4s ease;
  }
.lightbox-overlay.open {
    background: rgba(5,5,8,0.92);
    backdrop-filter: blur(10px);
    pointer-events: all;
  }
.lightbox {
    position: relative;
    max-width: 1100px; width: 100%;
    background: white;
    padding: 12px 12px 56px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.8);
    opacity: 0;
    transform: scale(0.85) translateY(30px);
    transition: opacity 0.4s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
  }
.lightbox-overlay.open .lightbox {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
.lightbox img {
    width: 100%; max-height: 82vh;
    object-fit: contain; display: block;
  }
.lightbox-info {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 0.8rem 1.2rem;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
  }
.lightbox-author {
    font-size: 0.78rem; color: #444; font-weight: 500;
    letter-spacing: 0.05em;
  }
.lightbox-author span { color: #888; font-weight: 400; margin-right: 0.3rem; }
.lightbox-date { font-size: 0.7rem; color: #999; }
.lightbox-close {
    position: absolute; top: -48px; right: 0;
    background: none; border: 1px solid rgba(201,146,42,0.4);
    color: var(--bronze-light); cursor: pointer;
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    font-size: 1rem; transition: all 0.2s;
    font-family: 'Raleway', sans-serif;
  }
.lightbox-close:hover { background: rgba(201,146,42,0.15); border-color: var(--bronze); }
.pin-red { background: radial-gradient(circle at 35% 35%, #ff6b6b, #cc2222); }
.pin-blue { background: radial-gradient(circle at 35% 35%, #6bb3ff, #2255cc); }
.pin-green { background: radial-gradient(circle at 35% 35%, #6bff8a, #22aa44); }
.pin-yellow { background: radial-gradient(circle at 35% 35%, #ffe066, #cc9900); }
.pin-white { background: radial-gradient(circle at 35% 35%, #ffffff, #cccccc); }
.pin-purple { background: radial-gradient(circle at 35% 35%, #cc88ff, #7733cc); }
canvas#embers { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
@media (max-width: 1024px) {
.cork-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
.cork-section { padding: 2rem 0.5rem 4rem; }
.cork-frame { padding: 2rem 1.2rem; min-height: auto; }
.cork-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.cork-photo-inner { padding: 6px 6px 28px; }
.cork-photo-author { font-size: 0.58rem; }
.lightbox { padding: 8px 8px 48px; }
}
@media (max-width: 420px) {
.cork-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
.cork-frame { padding: 1.5rem 0.8rem; }
}
@keyframes pulseLive { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }