.mdf-page-contact {
overflow-x: hidden;
width: 100%;
}
.mdf-page-contact .mdf-container {
padding-left: var(--space-md) !important;
padding-right: var(--space-md) !important;
box-sizing: border-box;
overflow: hidden;
} .mdf-page-contact input,
.mdf-page-contact textarea,
.mdf-page-contact select {
box-sizing: border-box;
max-width: 100%;
}
@media (min-width: 48em) {
.mdf-page-contact .mdf-container {
padding-left: var(--space-lg);
padding-right: var(--space-lg);
}
} .mdf-contact-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
margin-bottom: var(--space-xl);
}
@media (min-width: 64em) {
.mdf-contact-grid {
grid-template-columns: 1fr 420px;
}
} .mdf-contact-form__title {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: var(--space-lg);
}
.mdf-form {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.mdf-form__row {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
}
@media (min-width: 30em) {
.mdf-form__row {
grid-template-columns: 1fr 1fr;
}
}
.mdf-form__field {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.mdf-form__field label {
font-weight: 500;
font-size: 0.875rem;
color: var(--color-text);
}
.mdf-form__field input[readonly] {
opacity: 0.7;
cursor: default;
} .mdf-alert {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md);
border-radius: var(--radius-md);
font-size: 0.9375rem;
font-weight: 500;
margin-bottom: var(--space-md);
}
.mdf-alert svg {
flex-shrink: 0;
}
.mdf-alert--success {
background-color: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.3);
color: #22C55E;
}
.mdf-alert--error {
background-color: var(--color-accent-bg);
border: 1px solid var(--color-accent-border);
color: var(--color-accent);
} .mdf-contact-info {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.mdf-info-card {
display: flex;
gap: var(--space-md);
padding: var(--space-lg);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}
.mdf-info-card__icon {
flex-shrink: 0;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-accent-bg);
border-radius: var(--radius-md);
color: var(--color-accent);
}
.mdf-info-card__content {
flex: 1;
min-width: 0;
}
.mdf-info-card__content h3 {
font-size: 0.9375rem;
font-weight: 700;
margin: 0 0 var(--space-xs);
}
.mdf-info-card__content p {
color: var(--color-text);
font-size: 0.9375rem;
line-height: 1.6;
margin: 0;
}
.mdf-info-card__content p em {
color: var(--color-muted);
font-style: normal;
font-size: 0.8125rem;
}
.mdf-info-card__content a {
color: var(--color-accent);
font-weight: 500;
word-break: break-all;
}
.mdf-info-card__phone {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 800;
letter-spacing: 0.02em;
}
.mdf-info-card__hint {
color: var(--color-muted);
font-size: 0.8125rem;
margin-top: var(--space-xs);
}
.mdf-info-card__link {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: var(--space-sm);
font-size: 0.875rem;
} .mdf-hours-table {
width: 100%;
border-collapse: collapse;
background: none;
border: none;
}
.mdf-hours-table td {
padding: 4px 0;
font-size: 0.875rem;
color: var(--color-text);
border: none;
text-align: left;
}
.mdf-hours-table td:first-child {
color: var(--color-muted);
width: 45%;
} .mdf-social-links {
display: flex;
gap: var(--space-md);
}
.mdf-social-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background-color: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: 100px;
color: var(--color-text);
font-size: 0.875rem;
font-weight: 500;
transition: all var(--transition-fast);
}
.mdf-social-link:hover {
border-color: var(--color-accent-border);
color: var(--color-accent);
} @media (max-width: 47.99em) {
.mdf-social-link__label {
display: none;
}
.mdf-social-link {
padding: 10px;
border-radius: 50%;
width: 44px;
height: 44px;
justify-content: center;
}
} .mdf-contact-map {
margin-bottom: var(--space-xl);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--color-border);
}
.mdf-contact-map iframe {
display: block;
width: 100%;
height: 300px;
}
@media (min-width: 48em) {
.mdf-contact-map iframe {
height: 400px;
}
} .mdf-contact-form .wpcf7-form {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.mdf-contact-form .wpcf7-form p {
margin: 0;
}
.mdf-contact-form .wpcf7-response-output {
border-radius: var(--radius-md);
padding: var(--space-md);
font-size: 0.9375rem;
}
.mdf-contact-form .wpcf7-mail-sent-ok {
background-color: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.3);
color: #22C55E;
}
.mdf-contact-form .wpcf7-not-valid-tip {
color: var(--color-accent);
font-size: 0.8125rem;
margin-top: var(--space-xs);
} .mdf-contact-vehicle-context {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background-color: var(--color-accent-bg);
border: 1px solid var(--color-accent-border);
border-radius: var(--radius-md);
margin-bottom: var(--space-lg);
font-size: 0.875rem;
color: var(--color-text);
}
.mdf-contact-vehicle-context svg {
flex-shrink: 0;
color: var(--color-accent);
} .mdf-alert--urgence {
background-color: var(--color-accent-bg);
border: 1px solid var(--color-accent-border);
color: var(--color-text);
}
.mdf-alert--urgence svg {
color: var(--color-accent);
}
.mdf-alert--urgence a {
color: var(--color-accent);
font-family: var(--font-heading);
font-weight: 800;
white-space: nowrap;
} .mdf-form__separator {
display: flex;
align-items: center;
gap: var(--space-md);
margin: var(--space-md) 0;
color: var(--color-accent);
font-family: var(--font-heading);
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.mdf-form__separator::before,
.mdf-form__separator::after {
content: '';
flex: 1;
height: 1px;
background-color: var(--color-border);
} .mdf-form input[type="date"] {
color-scheme: dark;
} .mdf-form select {
background-color: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
padding: 0.75rem 1rem;
font-size: 1rem;
font-family: var(--font-body);
color-scheme: dark;
}
.mdf-form select:focus {
border-color: var(--color-accent);
box-shadow: 0 0 0 1px var(--color-accent-border);
outline: none;
}