/* ./contact — extrait du bloc <style> inline (refonte Phase 2) */

/* ── Contact Hero ── */
.contact-hero {
background: linear-gradient(135deg, var(--gray-900) 0%, var(--primary-dark) 100%);
padding: 160px 0 80px;
text-align: center;
position: relative;
overflow: hidden;
}

.contact-hero::before {
content: '';
position: absolute;
inset: 0;
background:
    radial-gradient(ellipse 60% 50% at 20% 40%, rgba(99,102,241,0.18), transparent),
    radial-gradient(ellipse 50% 60% at 80% 30%, rgba(34,211,238,0.1), transparent);
pointer-events: none;
}

.contact-hero .container { position: relative; z-index: 1; }

.contact-hero h1 {
color: #fff;
font-size: clamp(2.2rem, 5vw, 3.6rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.12;
margin-bottom: 1.25rem;
max-width: 780px;
margin-left: auto;
margin-right: auto;
}

.contact-hero-sub {
color: rgba(255,255,255,0.75);
font-size: 1.15rem;
line-height: 1.7;
max-width: 560px;
margin: 0 auto 2.25rem;
}

.contact-hero-kpis {
display: flex;
justify-content: center;
gap: 3rem;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid rgba(255,255,255,0.1);
flex-wrap: wrap;
}

.contact-kpi strong {
display: block;
font-size: 1.75rem;
font-weight: 800;
color: var(--accent);
line-height: 1;
margin-bottom: 0.3rem;
}

.contact-kpi span {
color: rgba(255,255,255,0.55);
font-size: 0.88rem;
font-weight: 500;
}

/* ── Contact Form Section ── */
.contact-section {
padding: 5rem 0;
background: var(--gray-50);
}

.contact-layout { align-items: stretch; }

.contact-panel {
background: white;
border: 1px solid var(--gray-200);
border-radius: var(--radius-xl);
padding: 2.5rem;
box-shadow: var(--shadow-md);
height: 100%;
display: flex;
flex-direction: column;
}

.contact-panel h2 {
margin-top: 0;
margin-bottom: 1.5rem;
font-size: 1.5rem;
color: var(--gray-900);
}

.contact-alert {
border-radius: 12px;
padding: 1rem 1.25rem;
margin-bottom: 1.5rem;
display: flex;
gap: 0.75rem;
align-items: flex-start;
}

.contact-alert strong { display: block; margin-bottom: 0.25rem; }

.contact-alert-success {
background: rgba(16,185,129,0.1);
border: 1px solid rgba(16,185,129,0.3);
color: #065f46;
}

.contact-alert-error {
background: rgba(239,68,68,0.08);
border: 1px solid rgba(239,68,68,0.25);
color: #7f1d1d;
}

.contact-card {
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
padding: 1.5rem;
transition: transform 0.18s ease, border-color 0.2s, box-shadow 0.2s;
}

.contact-card:hover {
transform: translateY(-2px);
border-color: var(--primary);
box-shadow: 0 4px 20px rgba(79,70,229,0.1);
}

.contact-card-header {
display: flex;
align-items: center;
gap: 0.85rem;
margin-bottom: 0.75rem;
}

.contact-icon {
width: 42px;
height: 42px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(99,102,241,0.1);
border: 1px solid rgba(99,102,241,0.2);
color: var(--primary);
flex-shrink: 0;
font-size: 1.2rem;
}

.contact-card h3 { margin: 0; font-size: 1rem; color: var(--gray-900); }
.contact-muted { color: var(--gray-600); margin: 0; font-size: 0.95rem; line-height: 1.6; }

/* ── FAQ Section ── */
.contact-faq { padding: 5rem 0; background: white; }

.contact-faq-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.25rem; }

.contact-faq-item {
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
overflow: hidden;
transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-faq-item:hover { border-color: var(--primary); box-shadow: 0 4px 16px rgba(79,70,229,0.08); }

.contact-faq-item summary {
list-style: none;
padding: 1.25rem 1.5rem;
cursor: pointer;
font-weight: 700;
color: var(--gray-900);
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.97rem;
}

.contact-faq-item summary::-webkit-details-marker { display: none; }

.contact-faq-item summary i { color: var(--primary); font-size: 1.1rem; flex-shrink: 0; }

.contact-faq-item summary .faq-toggle {
margin-left: auto;
color: var(--gray-400);
font-size: 1.2rem;
transition: transform 0.25s;
}

.contact-faq-item[open] summary .faq-toggle { transform: rotate(45deg); }

.contact-faq-body {
padding: 0 1.5rem 1.25rem;
color: var(--gray-600);
font-size: 0.93rem;
line-height: 1.7;
}

@media (max-width: 900px) {
.contact-panel { padding: 1.5rem; }
.contact-faq-grid { grid-template-columns: 1fr; }
.contact-hero-kpis { gap: 1.5rem; }
}