/* ════════════════════════════════════════ PAGINATION ════════════════════════════════════════ */ .pagination { display: flex; align-items: center; justify-content: center; gap: 4px; margin: var(--space-2xl) 0 var(--space-xl); } .page-btn { min-width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); font-size: 14px; font-weight: var(--fw-medium); color: var(--black); background: var(--bg-white); border: 1px solid var(--gray-200); cursor: pointer; transition: all var(--transition); padding: 0 var(--space-sm); gap: 4px; } .page-btn:hover { background: var(--gray-50); border-color: var(--gray-300); } .page-btn.active { background: var(--black); color: var(--white); border-color: var(--black); } .page-btn.disabled { color: var(--gray-300); cursor: not-allowed; pointer-events: none; } .page-btn svg { width: 16px; height: 16px; } .page-ellipsis { width: 32px; text-align: center; color: var(--gray-400); font-size: 14px; } /* ════════════════════════════════════════ FOOTER — Il vit à l'intérieur du main-content, pas en dehors du page-wrapper. Couleur: --bg-page (gris clair #F2F2F2) ════════════════════════════════════════ */ .site-footer { /* Pas de background global ici — le fond gris vient du / bg-page */ padding: var(--space-2xl) 0 var(--space-lg); margin-top: var(--space-lg); } .footer-inner { max-width: 1200px; margin: 0 auto; width: 100%; padding: 0 24px; } .footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl) var(--space-2xl); margin-bottom: var(--space-2xl); padding-bottom: var(--space-xl); border-bottom: 1px solid var(--gray-200); } .footer-col h4 { font-size: 15px; font-weight: var(--fw-semibold); color: var(--black); margin-bottom: var(--space-md); } .footer-col ul { display: flex; flex-direction: column; gap: 10px; } .footer-col ul li a { font-size: 14px; color: var(--gray-700); transition: color var(--transition); } .footer-col ul li a:hover { color: var(--black); } .footer-col ul li a strong { font-weight: var(--fw-bold); color: var(--black); } /* Icônes réseaux sociaux */ .footer-social { display: flex; gap: var(--space-md); margin-top: var(--space-md); align-items: center; } .footer-social a { display: flex; align-items: center; justify-content: center; color: var(--black); transition: opacity var(--transition); } .footer-social a:hover { opacity: 0.55; } .footer-social svg { width: 22px; height: 22px; } .footer-social .icon-x { font-size: 18px; font-weight: var(--fw-bold); color: var(--black); line-height: 1; font-style: normal; } /* ── Footer bottom ── */ .footer-bottom { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: var(--space-md); } .footer-logo img, .footer-logo svg { height: 26px; width: auto; } .footer-copy { font-size: 13px; color: var(--gray-500); text-align: center; } .footer-legal { display: flex; gap: 6px; align-items: center; } .footer-legal a { font-size: 13px; color: var(--gray-500); text-decoration: underline; text-underline-offset: 2px; transition: color var(--transition); } .footer-legal a:hover { color: var(--black); } .footer-legal .sep { color: var(--gray-300); font-size: 13px; } /* ════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════ */ @media (max-width: 900px) { .footer-cols { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .footer-cols { grid-template-columns: 1fr; } }