/* ═══════════════════════════════════════════════════════════════
   TIB_GALERIE.CSS — Page Galerie T.I.B
═══════════════════════════════════════════════════════════════ */

/* ── Barre filtres années ─────────────────────────────────────── */
.tg-year-bar {
    display: flex;
    justify-content: center;
    gap: 0;
    background: #111;
    padding: 0;
}

.tg-year-btn {
    flex: 1;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 28px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.3s;
    color: rgba(255,255,255,0.45);
    position: relative;
}
.tg-year-btn + .tg-year-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(255,255,255,0.1);
}
.tg-year-btn:hover {
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.04);
}
.tg-year-btn.active {
    color: #fff;
    border-bottom-color: #097eeb;
    background: rgba(9,126,235,0.08);
}

.tg-year-num {
    font-family: 'Anton', sans-serif;
    font-size: 1.8rem;
    letter-spacing: 2px;
    line-height: 1;
}
.tg-year-count {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.7;
}
.tg-year-btn.active .tg-year-count { opacity: 1; }

/* ── En-tête édition ──────────────────────────────────────────── */
.tg-edition-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 15% 20px;
    background: #f4f4f4;
}
.tg-edition-title {
    font-family: 'Anton', sans-serif;
    font-size: 2rem;
    letter-spacing: 2px;
    color: #111;
    margin: 0 0 4px;
}
.tg-edition-sub {
    font-size: 0.82rem;
    color: #999;
    margin: 0;
}
.tg-select-all {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 30px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all 0.25s;
}
.tg-select-all:hover {
    background: #097eeb;
    border-color: #097eeb;
    color: #fff;
}

/* ── Grille masonry ───────────────────────────────────────────── */
.tg-grid {
    columns: 4 220px;
    column-gap: 6px;
    padding: 6px 6px 80px;
    background: #f4f4f4;
}

.tg-item {
    break-inside: avoid;
    margin-bottom: 6px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}
.tg-item a { display: block; position: relative; }
.tg-item img {
    width: 100%;
    display: block;
    border-radius: 8px;
    transition: transform 0.4s ease;
}
.tg-item:hover img { transform: scale(1.04); }

.tg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(9,126,235,0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 8px;
}
.tg-overlay i { color: #fff; font-size: 1.6rem; }
.tg-overlay span {
    color: rgba(255,255,255,0.8);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
}
.tg-item:hover .tg-overlay { opacity: 1; }

/* ── Placeholder à venir ──────────────────────────────────────── */
.tg-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 120px 20px;
    background: #f4f4f4;
    text-align: center;
}
.tg-coming-soon > i {
    font-size: 3rem;
    color: #ccc;
}
.tg-coming-soon h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #333;
    margin: 0;
}
.tg-coming-soon p {
    color: #999;
    font-size: 0.9rem;
    margin: 0;
    max-width: 380px;
}

/* ══ RESPONSIVE tib_galerie.css ══════════════════════════════ */
@media (max-width: 992px) {
    .tg-hero { padding: 120px 6% 40px !important; }
    .tg-grid { gap: 12px !important; padding: 6px 4% 60px !important; }
    .tg-grid-item--large { grid-column: span 1 !important; }
}
@media (max-width: 768px) {
    .tg-grid { columns: 2 !important; display: block !important; }
    .tg-grid-item { break-inside: avoid !important; margin-bottom: 12px !important; }
    .tg-title { padding: 40px 6% 20px !important; }
    .tg-title h2 { font-size: 1.5rem !important; }
}
@media (max-width: 480px) {
    .tg-grid { columns: 1 !important; padding: 0 5% 40px !important; }
    .tg-hero-text h1 { font-size: clamp(28px, 8vw, 44px) !important; }
    .tg-empty { padding: 40px 6% 80px !important; }
}