/* ===================================================== ADDITIONS : Timeline, Photos, Media Page Ajouter ce fichier APRÈS style.css dans le OU copier le contenu à la fin de style.css ===================================================== */ /* ===== TIMELINE VERTICALE ===== */ .timeline { position: relative; padding: 0; list-style: none; } .timeline::before { content: ''; position: absolute; top: 0; bottom: 0; right: 24px; width: 3px; background: linear-gradient(180deg, var(--primary), var(--primary-light), var(--secondary)); border-radius: 2px; } .timeline-entry { position: relative; padding-right: 60px; padding-bottom: 28px; margin-bottom: 0; } .timeline-entry:last-child { padding-bottom: 0; } .timeline-dot { position: absolute; right: 14px; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--white); border: 3px solid var(--primary); z-index: 2; transition: var(--transition); } .timeline-entry:hover .timeline-dot { background: var(--primary); transform: scale(1.2); box-shadow: 0 0 0 6px rgba(10,61,107,0.15); } .timeline-entry.is-break .timeline-dot { border-color: var(--secondary); } .timeline-entry.is-break:hover .timeline-dot { background: var(--secondary); box-shadow: 0 0 0 6px rgba(200,168,78,0.15); } .timeline-entry.is-speech .timeline-dot { border-color: var(--primary-dark); } .timeline-entry.is-discussion .timeline-dot { border-color: var(--success); } .timeline-entry.is-discussion:hover .timeline-dot { background: var(--success); box-shadow: 0 0 0 6px rgba(40,167,69,0.15); } .timeline-entry.is-closing .timeline-dot { border-color: #e91e63; } .timeline-card { background: var(--white); border-radius: var(--radius-md); padding: 18px 20px; box-shadow: var(--shadow-sm); border-right: 4px solid var(--gray-200); transition: var(--transition); } .timeline-entry:hover .timeline-card { box-shadow: var(--shadow-md); transform: translateX(-4px); } .timeline-entry.is-speech .timeline-card { border-right-color: var(--primary); } .timeline-entry.is-presentation .timeline-card { border-right-color: var(--accent); } .timeline-entry.is-break .timeline-card, .timeline-entry.is-lunch .timeline-card { border-right-color: var(--secondary); background: rgba(200,168,78,0.04); } .timeline-entry.is-discussion .timeline-card { border-right-color: var(--success); } .timeline-entry.is-opening .timeline-card { border-right-color: var(--primary-dark); background: rgba(10,61,107,0.03); } .timeline-entry.is-closing .timeline-card { border-right-color: #e91e63; background: rgba(233,30,99,0.03); } .timeline-entry.is-recommendations .timeline-card { border-right-color: #e91e63; } .timeline-card .tl-time { display: inline-block; background: var(--gray-100); color: var(--primary); font-weight: 700; font-size: 13px; padding: 3px 12px; border-radius: var(--radius-sm); margin-bottom: 8px; font-family: 'Noto Kufi Arabic', sans-serif; } .timeline-card .tl-title { font-size: 15px; font-weight: 700; color: var(--gray-900); margin-bottom: 4px; line-height: 1.5; } .timeline-card .tl-speaker { font-size: 13px; color: var(--primary-light); font-weight: 600; } .timeline-card .tl-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 50px; margin-top: 6px; } /* ===== SPEAKER PHOTO ===== */ .speaker-photo { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid var(--secondary); margin: 0 auto 16px; display: block; } .speaker-avatar-lg { width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 800; font-family: 'Noto Kufi Arabic', sans-serif; margin: 0 auto 16px; border: 3px solid var(--secondary); } /* ===== MEDIA PAGE RESTRUCTURED ===== */ .article-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); height: 100%; } .article-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); } .article-card-img { height: 220px; overflow: hidden; position: relative; } .article-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .article-card:hover .article-card-img img { transform: scale(1.05); } .article-card-img .article-badge { position: absolute; top: 12px; right: 12px; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 50px; backdrop-filter: blur(8px); } .badge-internal { background: rgba(10,61,107,0.85); color: var(--white); } .badge-press { background: rgba(200,168,78,0.9); color: var(--primary-dark); } .article-card-img .placeholder-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: var(--white); font-size: 48px; } .article-card-body { padding: 20px; } .article-card-body h5 { font-size: 16px; font-weight: 700; margin-bottom: 8px; line-height: 1.5; color: var(--gray-900); } .article-card-body p { font-size: 13px; color: var(--gray-500); line-height: 1.7; margin-bottom: 12px; } .article-source { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--primary-light); font-weight: 600; } .article-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--primary); text-decoration: none; transition: var(--transition); } .article-link:hover { color: var(--accent); } /* ===== RECOMMENDATIONS TABLE ===== */ .rec-table { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .rec-table table { margin: 0; } .rec-table thead { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); color: var(--white); } .rec-table thead th { font-weight: 600; font-size: 14px; padding: 14px 16px; border: none; } .rec-table tbody td { padding: 16px; font-size: 14px; border-color: var(--gray-100); vertical-align: top; line-height: 1.8; } .rec-table tbody tr:hover { background: var(--gray-100); } .theme-badge { display: inline-block; padding: 4px 14px; border-radius: 50px; font-size: 12px; font-weight: 700; background: rgba(10,61,107,0.08); color: var(--primary); } /* ===== DRAG & DROP SORTABLE ===== */ .drag-handle { cursor: grab !important; user-select: none; transition: color 0.2s; } .drag-handle:hover { color: var(--primary) !important; } .drag-handle:active { cursor: grabbing !important; } .sortable-ghost { background: rgba(10, 61, 107, 0.06) !important; border: 2px dashed var(--primary-light) !important; opacity: 0.7; } .sortable-ghost td { border-color: transparent !important; } tr[data-rid] { transition: background 0.15s; } tr[data-rid]:hover .drag-handle { color: var(--primary) !important; } /* ===== ICON SPACING RTL ===== */ .btn i.fas, .btn i.far, .btn i.fab, .nav-link i.fas, .nav-link i.far, .program-day-tabs .nav-link i, .hero-meta-item i, .footer-contact-item i, .tl-time i, .tl-speaker i, .tl-badge i, .speaker-card .topic i, .article-source i, .article-link i, .news-date i, .rec-number, .about-card i.fas { margin-left: 8px; } /* ===== DAY HEADER IN TIMELINE ===== */ .day-header { background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: var(--white); padding: 16px 24px; border-radius: var(--radius-md); margin-bottom: 24px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-md); } .day-header i { font-size: 20px; color: var(--secondary-light); } .day-header h4 { margin: 0; font-size: 17px; font-weight: 700; } /* ===== PHOTO GALLERY ===== */ .gallery-item { position: relative; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; box-shadow: var(--shadow-sm); transition: var(--transition); } .gallery-item:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); } .gallery-item img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform 0.4s ease; } .gallery-item:hover img { transform: scale(1.06); } .gallery-caption { position: absolute; bottom: 0; right: 0; left: 0; padding: 8px 12px; background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: var(--white); font-size: 12px; font-weight: 500; } .gallery-admin-item { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); cursor: grab; } .gallery-admin-item:hover { box-shadow: var(--shadow-md); } @media (max-width: 576px) { .gallery-item img { height: 150px; } } /* ===== RESPONSIVE TIMELINE ===== */ @media (max-width: 576px) { .timeline::before { right: 16px; } .timeline-entry { padding-right: 44px; } .timeline-dot { right: 6px; width: 18px; height: 18px; } .timeline-card { padding: 14px; } .timeline-card .tl-title { font-size: 14px; } }