/* =============================================================================
   PAGE : PHOTOTHÈQUE — module de page (tokens de /style.css uniquement)
   ============================================================================= */

/* Livre d'or défilant */
.guestbook-ticker-container {
    display: flex; align-items: center; gap: 0; overflow: hidden;
    border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface);
    height: 48px;
}
.guestbook-ticker-label {
    flex-shrink: 0; height: 100%; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px;
    font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: -.005em;
    color: #1a1300; background: var(--gold-metallic);
}
.guestbook-ticker-track {
    flex: 1; overflow: hidden; white-space: nowrap;
    mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
}
.guestbook-ticker-content { display: inline-flex; animation: gbScroll 60s linear infinite; }
.guestbook-ticker-content:hover { animation-play-state: paused; }
@keyframes gbScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-msg { padding: 0 28px; font-style: italic; color: var(--text-2); font-size: var(--fs-sm); }
.ticker-msg i { color: var(--gold) !important; }

/* Filtres */
.controls-capsules-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-block: 14px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-tag {
    padding: 8px 16px; border-radius: var(--radius-pill); cursor: pointer; user-select: none;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
    font-weight: 700; font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
    transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur) var(--ease-spring);
}
.filter-tag:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); }
.filter-tag.active { background: var(--accent); color: var(--on-accent); border-color: transparent; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) calc(35% * var(--glow-strength)), transparent); }
.filter-tag.toggle-anciens-btn { border-style: dashed; }
.filter-tag.active-toggle { border-color: var(--accent); color: var(--accent); }

/* Albums */
.editions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--gap); }
.edition-card {
    position: relative; overflow: hidden; isolation: isolate;
    min-height: 300px; border-radius: var(--radius-lg);
    display: flex; flex-direction: column; justify-content: space-between;
    background-size: cover; background-position: center;
    border: 1px solid var(--border); box-shadow: var(--shadow-sm);
    transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease), border-color var(--dur);
}
.edition-card::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(5,6,10,.15) 0%, rgba(5,6,10,.25) 40%, rgba(5,6,10,.88) 100%);
    transition: opacity var(--dur);
}
.edition-card:first-child { grid-column: span 2; min-height: 360px; }
.edition-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: var(--shadow-lg); }
.year-label {
    align-self: flex-start; margin: 18px; padding: 6px 14px; border-radius: var(--radius-pill);
    font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: .04em; line-height: 1.1;
    background: rgba(5, 6, 10, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.15);
}
.card-glass-footer { padding: 16px; }
.links-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.links-grid.two-cols { grid-template-columns: 1fr 1fr; }
.links-grid .btn { min-height: 40px; color: #fff; --btn-c: #fff; border-color: rgba(255,255,255,.25); background: rgba(10,10,15,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: .78rem !important; }
.links-grid .btn i { color: var(--c, var(--accent)); }
.links-grid .btn-blue i { color: var(--neon-blue); } .links-grid .btn-purple i { color: var(--neon-purple); } .links-grid .btn-green i { color: var(--neon-green); }
.links-grid .btn-orange i { color: var(--neon-orange); } .links-grid .btn-yellow i { color: var(--neon-yellow); } .links-grid .btn-red i { color: var(--neon-red); }
.links-grid .btn:hover { background: rgba(10,10,15,.8); border-color: #fff; }

/* Livre d'or + dépôt */
.bottom-section { align-items: stretch; }
.guestbook-card { display: flex; flex-direction: column; gap: 14px; }
.guestbook-card .card-title i { color: var(--gold); }
.guestbook-card .card-subtitle { margin-top: -8px; }
#guest-msg { min-height: 130px; }
.guestbook-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: auto; }
.btn-gold { --btn-c: var(--gold); }

@media (max-width: 760px) {
    .edition-card:first-child { grid-column: auto; min-height: 300px; }
    .guestbook-ticker-label span, .guestbook-ticker-label { padding: 0 12px; }
}