/* Ported from src/pages/faq-contact.astro + FaqAccordion.astro + ContactForm.astro */

/* Contacts rapides */
.contacts-rapides { padding: var(--space-10) 0; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.contacts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.contact-card { display: flex; align-items: flex-start; gap: var(--space-4); }
.contact-icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: rgba(224, 0, 26, 0.06); color: var(--color-primary); }
.contact-card strong { display: block; font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin-bottom: var(--space-1); }
.contact-card a { color: var(--color-primary); font-weight: var(--fw-semibold); font-size: var(--text-base); }
.contact-card p { color: var(--color-text); font-size: var(--text-sm); }
.contact-card .hours { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); }

/* FAQ + Contact */
.faq-contact-section { padding: var(--space-16) 0; }
.faq-contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
.faq-contact-layout .section-title { margin-bottom: var(--space-2); }
.section-intro { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-8); }

/* FaqAccordion */
.faq-accordion { display: flex; flex-direction: column; gap: var(--space-5); }
.faq-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; }
.faq-item:hover { border-color: #cbd5e1; box-shadow: var(--shadow-sm); }
.faq-item[open] { box-shadow: var(--shadow-sm); border-color: var(--color-border); }
.faq-item[open] .faq-icon { transform: rotate(180deg); }
.faq-question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) var(--space-8); font-weight: var(--fw-semibold); font-size: var(--text-base); color: var(--color-text); cursor: pointer; list-style: none; user-select: none; transition: color 0.2s; }
.faq-question::-webkit-details-marker { display: none; }
.faq-question:hover { color: var(--color-primary); }
.faq-icon { flex-shrink: 0; transition: transform .25s; color: var(--color-text-muted); }
.faq-answer { padding: 0 var(--space-8) var(--space-6); color: var(--color-text-body); font-size: var(--text-base); line-height: 1.75; border-top: 1px solid var(--color-border); padding-top: var(--space-5); }
.faq-answer p { margin: 0; }

/* ContactForm */
.contact-form-wrap { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-10); box-shadow: var(--shadow-md); }
.contact-form-header { margin-bottom: var(--space-8); }
.contact-titre { font-size: var(--text-2xl); font-weight: var(--fw-bold); margin-bottom: var(--space-2); }
.contact-sous { color: var(--color-text-body); }
.contact-form { display: flex; flex-direction: column; gap: var(--space-5); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.field label span { color: var(--color-primary); }
.field input, .field textarea { padding: var(--space-3) var(--space-4); border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-base); font-family: inherit; color: var(--color-text); background: var(--color-surface); transition: border-color .2s, box-shadow .2s; outline: none; width: 100%; }
.field input:focus, .field textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(224,0,26,.1); }
.field textarea { resize: vertical; min-height: 120px; }
.form-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-top: var(--space-2); }
.form-legal { font-size: var(--text-xs); color: var(--color-text-muted); }
.form-legal a { color: var(--color-primary); text-decoration: underline; }
.contact-form-wrap .btn-primary { padding: var(--space-3) var(--space-8); gap: var(--space-2); }
.form-alert { padding: var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-5); font-weight: var(--fw-medium); }
.form-alert--success { background: #e6f7ee; color: #0a7a3d; }
.form-alert--error { background: #fdeaea; color: #b91c1c; }

/* Réclamations */
.reclamations-section { padding: var(--space-16) 0; background: var(--color-bg); }
.reclamations-inner { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-12); align-items: center; }
.reclamations-inner p { color: var(--color-text-body); line-height: 1.8; margin-bottom: var(--space-6); }
.reclamations-steps { list-style: none; display: flex; flex-direction: column; gap: var(--space-4); }
.reclamations-steps li { display: flex; align-items: flex-start; gap: var(--space-4); font-size: var(--text-base); color: var(--color-text-body); line-height: 1.6; }
.reclamations-steps span { flex-shrink: 0; width: 28px; height: 28px; background: var(--color-primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); font-size: var(--text-sm); }
.reclamations-img-wrap { aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--color-border); }
.reclamations-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.reclamations-img-wrap:hover .reclamations-img { transform: scale(1.04); }

@media (max-width: 1023px) {
  .faq-contact-layout, .reclamations-inner { grid-template-columns: 1fr; }
  .reclamations-img-wrap { display: none; }
}
@media (max-width: 767px) {
  .contacts-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}