/* ───────────────────────────────────────── Contact Page — BiblioAfrica ───────────────────────────────────────── */ .contact-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 24px; align-items: start; } .contact-left { display: flex; flex-direction: column; gap: 20px; } /* ───────────────────────────────────────── Cards ───────────────────────────────────────── */ .contact-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-xl); padding: 28px; box-shadow: var(--shadow-sm); } .contact-card-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 9px; margin-bottom: 6px; } .contact-card-title i { color: var(--blue-600); font-size: 1.05rem; } .contact-card-desc { font-size: .8rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 22px; } /* ───────────────────────────────────────── Informations de contact ───────────────────────────────────────── */ .contact-info-list { display: flex; flex-direction: column; } .contact-info-item { display: flex; align-items: flex-start; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--border-color); } .contact-info-item:first-child { padding-top: 0; } .contact-info-item:last-child { border-bottom: none; padding-bottom: 0; } .contact-info-icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--blue-50); color: var(--blue-600); font-size: 1rem; } [data-theme="dark"] .contact-info-icon { background: rgba(33, 150, 243, .12); color: var(--blue-400); } .contact-info-title { font-size: .78rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 3px; } .contact-info-value { font-size: .86rem; font-weight: 700; color: var(--text-primary); } .contact-info-desc { font-size: .72rem; color: var(--text-secondary); margin-top: 3px; line-height: 1.5; } /* ───────────────────────────────────────── FAQ ───────────────────────────────────────── */ .faq-list { display: flex; flex-direction: column; } .faq-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border-color); } .faq-item:first-child { padding-top: 0; } .faq-item:last-child { border-bottom: none; padding-bottom: 0; } .faq-icon { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--gray-100); font-size: .95rem; } [data-theme="dark"] .faq-icon { background: rgba(255,255,255,.06); } .faq-title { font-size: .82rem; font-weight: 700; color: var(--text-primary); line-height: 1.4; } .faq-desc { font-size: .73rem; color: var(--text-secondary); line-height: 1.5; margin-top: 3px; } /* ───────────────────────────────────────── Formulaire ───────────────────────────────────────── */ .contact-form-card { position: sticky; top: 88px; } .contact-form-card .form-group { margin-bottom: 18px; } .contact-form-card .form-label { margin-bottom: 7px; } .contact-form-card .form-input-wrap { width: 100%; } .contact-form-card .form-input, .contact-form-card .form-select { width: 100%; } .textarea-wrap { align-items: flex-start; } .textarea-wrap i { margin-top: 3px; } .contact-textarea { resize: vertical; min-height: 145px; line-height: 1.55; } /* ───────────────────────────────────────── Confidentialité ───────────────────────────────────────── */ .contact-privacy { display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px; margin-top: 4px; margin-bottom: 20px; border-radius: var(--radius-md); background: var(--gray-100); color: var(--text-secondary); font-size: .72rem; line-height: 1.5; } .contact-privacy i { color: var(--blue-600); font-size: .95rem; flex-shrink: 0; margin-top: 1px; } [data-theme="dark"] .contact-privacy { background: rgba(255,255,255,.05); } [data-theme="dark"] .contact-privacy i { color: var(--blue-400); } /* ───────────────────────────────────────── Bouton envoyer ───────────────────────────────────────── */ .contact-submit { display: flex; justify-content: flex-end; } .contact-submit .btn { min-width: 175px; } .contact-submit .btn:disabled { opacity: .7; cursor: not-allowed; } /* ───────────────────────────────────────── Responsive ───────────────────────────────────────── */ @media (max-width: 1000px) { .contact-layout { grid-template-columns: 1fr; } .contact-form-card { position: static; } } @media (max-width: 600px) { .contact-card { padding: 20px; border-radius: var(--radius-lg); } .contact-info-item { gap: 11px; } .contact-info-icon { width: 36px; height: 36px; } .contact-submit { justify-content: stretch; } .contact-submit .btn { width: 100%; } }