/* ═══════════════════════════════════════════════════════════════
   CLUB.CSS — Page Le Club (dans l'ADN de l'index)
   Europale Basket Club
═══════════════════════════════════════════════════════════════ */

/* ── owner_left ─────────────────────────────────────────────── */
.owner_left {
    flex-direction: row-reverse;
}

/* ── Sections owner centrées et compactes sur la page club ──── */
.club-owner {
    height: auto;
    min-height: unset;
    width: 100%;
    max-width: 100%;
    margin: 0 auto 60px;
    padding: 0 15%;
    box-sizing: border-box;
    align-items: center;
}

.club-owner.owner_left {
    margin-bottom: 80px;
}

.club-owner .image_box_owner {
    width: 35%;
    height: 300px;
}

.club-owner .image_box_owner img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    box-shadow: none;
}

.club-owner .content_box {
    width: 55%;
}

/* Caption sous l'image */
.club-owner .image_box_owner p {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 14px;
    position: relative;
    padding-top: 10px;
}

.club-owner .content_box .small_title {
    color: #111;
}

.club-owner .content_box .big_title {
    color: #111;
}

.club-owner .image_box_owner p::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 2px;
    background: #097eeb;
    border-radius: 2px;
}

/* ── tib-list ────────────────────────────────────────────────── */
.tib-list {
    list-style: none;
    margin: 15px 0;
}
.tib-list li {
    margin: 8px 0;
    font-size: 14px;
    color: #444;
    display: flex;
    align-items: center;
    gap: 10px;
}
.tib-list li i {
    color: #097eeb;
    font-size: 8px;
}

/* ── Labels ─────────────────────────────────────────────────── */
.labels-row {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    padding: 20px 10% 80px;
    background: #f4f4f4;
}

.label-item {
    width: 220px;
    text-align: center;
}

.label-item img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    margin-bottom: 16px;
    transition: transform 0.3s;
}

.label-item:hover img {
    transform: scale(1.06);
}

.label-item h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 10px;
}

.label-item h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 2px;
    background: #097eeb;
    border-radius: 2px;
}

.label-item p {
    font-size: 0.84rem;
    color: #666;
    line-height: 1.6;
    margin-top: 10px;
}

/* ══════════════════════════════════════════════════════════════
   TIMELINE HORIZONTALE — vivante, dans l'ADN du site
══════════════════════════════════════════════════════════════ */
.timeline-outer {
    padding: 0 0 80px 0;
    background: #f4f4f4;
}

.timeline-scroll-wrapper {
    overflow-x: auto;
    padding: 30px 60px 40px;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #097eeb #ddd;
}

.timeline-scroll-wrapper:active { cursor: grabbing; }
.timeline-scroll-wrapper::-webkit-scrollbar        { height: 5px; }
.timeline-scroll-wrapper::-webkit-scrollbar-track  { background: #ddd; border-radius: 3px; }
.timeline-scroll-wrapper::-webkit-scrollbar-thumb  { background: #097eeb; border-radius: 3px; }

/* Rail */
.timeline-track {
    display: flex;
    align-items: center;
    position: relative;
    min-width: max-content;
    padding: 0 40px;
}

/* Ligne centrale sobre */
.timeline-track::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: #d4d4d4;
    transform: translateY(-50%);
}

/* Item */
.tl-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 210px;
    flex-shrink: 0;
    position: relative;
    padding: 0 10px;
}

.tl-item:nth-child(odd)  { flex-direction: column;         padding-bottom: 150px; }
.tl-item:nth-child(even) { flex-direction: column-reverse; padding-top: 150px; }

/* Point */
.tl-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #ccc;
    flex-shrink: 0;
    z-index: 2;
    transition: border-color 0.3s, transform 0.3s, background 0.3s;
}
.tl-item:hover .tl-dot {
    border-color: #097eeb;
    background: #097eeb;
    transform: scale(1.3);
}

/* Trait vertical */
.tl-line {
    width: 1px;
    height: 30px;
    background: #ccc;
    transition: background 0.3s;
}
.tl-item:hover .tl-line {
    background: #097eeb;
}

/* ── Carte principale ── */
.tl-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 14px rgba(0,0,0,0.07);
    padding: 14px 14px 14px;
    text-align: center;
    width: 182px;
    border: 1px solid #e8e8e8;
    transition: box-shadow 0.3s, transform 0.3s;
}

.tl-item:hover .tl-card {
    box-shadow: 0 10px 28px rgba(0,0,0,0.11);
    transform: translateY(-5px);
}

/* Icône en haut de chaque carte */
.tl-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f0f6fe;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 9px;
    transition: background 0.3s;
}
.tl-item:hover .tl-icon {
    background: #dbeafe;
}
.tl-icon i {
    color: #097eeb;
    font-size: 0.85rem;
}

/* Année */
.tl-year {
    font-size: 1.45rem;
    color: #1a1a1a;
    margin-bottom: 6px;
    font-family: 'Anton', sans-serif;
    letter-spacing: 1px;
    line-height: 1;
}

/* Séparateur sous l'année */
.tl-year::after {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: #097eeb;
    margin: 5px auto 7px;
    border-radius: 2px;
}

.tl-text {
    font-size: 0.77rem;
    color: #666;
    line-height: 1.55;
}

/* Badge pour les items spéciaux */
.tl-badge {
    display: inline-block;
    background: #097eeb;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
    margin-bottom: 6px;
}

/* Indicateur scroll */
.timeline-hint {
    text-align: center;
    margin-top: 16px;
    font-size: 0.78rem;
    color: #bbb;
    letter-spacing: 1px;
}
.timeline-hint i {
    color: #097eeb;
    margin: 0 5px;
    animation: bounceX 1.4s ease-in-out infinite;
}
@keyframes bounceX {
    0%, 100% { transform: translateX(0); }
    50%       { transform: translateX(6px); }
}

/* ══ RESPONSIVE club.css ══════════════════════════════════════ */
@media (max-width: 992px) {
    .club-owner {
        flex-direction: column !important;
        padding: 0 6% !important;
        gap: 30px !important;
    }
    .club-owner .image_box_owner { width: 100% !important; height: 260px !important; }
    .club-owner .content_box    { width: 100% !important; }
    .labels-row { padding: 20px 5% 50px !important; gap: 20px !important; flex-wrap: wrap !important; justify-content: center !important; }
    .label-item { width: 160px !important; }
    .timeline-item { flex-direction: column !important; gap: 10px !important; }
    .timeline-scroll-wrapper { padding: 20px 5% 30px !important; }
}
@media (max-width: 768px) {
    .club-owner { padding: 0 5% !important; }
    .labels-row { gap: 16px !important; }
    .label-item { width: calc(50% - 16px) !important; }
    .label-item img { width: 70px !important; height: 70px !important; }
}
@media (max-width: 480px) {
    .club-owner .image_box_owner { height: 200px !important; }
    .label-item { width: calc(50% - 12px) !important; }
    .timeline-year { font-size: 1.2rem !important; }
    .timeline-text { font-size: 0.82rem !important; }
}