/* ============================================================
   actualites.css — Page Actualités
   Pharmacie de France
   ============================================================ */


/* ── Listing actualités ─────────────────────────────────── */
#actu-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: opacity .2s;
}

#actu-grid.actu-loading {
    opacity: .4;
    pointer-events: none;
}

/* ── Card ───────────────────────────────────────────────── */
.actu-card {
    display: flex;
    flex-direction: row;
    gap: 28px;
    padding: 32px 0;
    border-bottom: 1px solid #e8edf3;
    transition: opacity .2s;
}

.actu-card:first-child { padding-top: 0; }
.actu-card:last-child  { border-bottom: none; padding-bottom: 0; }

.actu-card:hover { opacity: .85; }

/* ── Photo ──────────────────────────────────────────────── */
.actu-photo {
    width: 140px;
    height: 100px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 10px;
    background: #e8f4f6;
}

.actu-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.actu-card:hover .actu-photo img {
    transform: scale(1.05);
}

.actu-photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e0f4f6 0%, #c8eaee 100%);
}

.actu-photo--placeholder::after {
    content: '\f1ea';
    font-family: 'Font Awesome 6 Pro';
    font-weight: 300;
    font-size: 36px;
    color: var(--primary);
    opacity: .4;
}

/* ── Corps ──────────────────────────────────────────────── */
.actu-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    justify-content: center;
}

.actu-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-family: 'MontserratSemiBold', sans-serif;
    color: var(--primary-dark);
    letter-spacing: .03em;
}

.actu-titre {
    font-family: 'MontserratBold', sans-serif;
    font-size: 17px;
    color: #1a2a3a;
    margin: 0;
    line-height: 1.35;
}

.actu-texte {
    font-size: 14px;
    color: #667;
    line-height: 1.7;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Pagination ─────────────────────────────────────────── */
.actu-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 48px;
}

.actu-page-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1.5px solid #dde4ec;
    border-radius: 8px;
    background: #fff;
    color: #445;
    font-family: 'MontserratSemiBold', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: border-color .18s, background .18s, color .18s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.actu-page-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(0,174,188,.05);
}

.actu-page-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {
    .actu-card { flex-direction: column; gap: 14px; padding: 24px 0; }
    .actu-photo { width: 100%; height: 160px; }
    .actu-titre { font-size: 15px; }
}