/* Styles spécifiques à la page de contact - Modernisés Noir et Blanc avec Image d'Arrière-Plan */

/* Importation des polices depuis Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Nunito+Sans:wght@400;600;700&display=swap');

:root {
    --noir-principal: #1a1a1a; /* Noir principal */
    --blanc-principal: #f0f0f0; /* Blanc principal (légèrement cassé pour la douceur) */
    --gris-clair: #e0e0e0; /* Gris clair pour les fonds et bordures subtiles */
    --gris-moyen: #808080; /* Gris moyen pour le texte secondaire */
    --noir-secondaire: #333; /* Noir légèrement plus clair pour les titres */
}

.contact-page {
    padding-top: 80px; /* Ajuster le padding pour le header fixe (si applicable) */
    padding-bottom: 60px; /* Réduction du padding bas */
}



.section-title {
    font-family: 'Montserrat', sans-serif;
    color: var(--noir-secondaire); /* Titre en noir légèrement plus clair */
    font-size: 2.8em; /* Légère réduction de la taille du titre */
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px; /* Réduction de la marge basse */
    letter-spacing: -0.8px; /* Ajustement du crénage */
}

/* Section Héros Contact */
.hero-contact {
    /* Conservez les styles existants */
    background-color: var(--gris-clair); /* Fond gris clair pour la section héros */
    padding: 280px 0; /* Réduction du padding vertical */
    text-align: center;
    /* Ajoutez cette ligne pour l'image de fond */
    background-image: url('https://image.noelshack.com/fichiers/2025/14/7/1743952641-chatgpt-image-6-avr-2025-17-17-07.jpg'); /* Remplacez VOTRE_LIEN_IMAGE_ICI par le lien de votre image */
    background-size: cover; /* Ajuste la taille de l'image pour couvrir toute la section */
    background-position: center; /* Centre l'image */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
    /* Assurez-vous que le texte reste lisible sur l'image de fond */
    color: var(--blanc-principal); /* Changez la couleur du texte en blanc pour contraster avec l'image (si nécessaire) */
    opacity: 95%;
    background-attachment: fixed;
}

.hero-contact .hero-content {
    max-width: 800px; /* Réduction de la largeur maximale */
    margin: 0 auto;
}

.hero-contact .hero-title {
    font-family: 'Montserrat', sans-serif;
    color: var(--blanc-principal); /* Titre en blanc principal (adapté à l'image de fond) */
    font-size: 3.5em; /* Légère réduction de la taille du titre */
    font-weight: 700;
    margin-bottom: 20px; /* Réduction de la marge basse */
    letter-spacing: -1.2px; /* Ajustement du crénage */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Ombre pour la lisibilité sur l'image */
}

.hero-contact .hero-subtitle {
    font-size: 1.2em; /* Légère réduction de la taille du sous-titre */
    color: var(--blanc-principal); /* Couleur du sous-titre en blanc (adapté à l'image de fond) */
    margin-bottom: 30px; /* Réduction de la marge basse */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Ombre pour la lisibilité sur l'image */
}

/* Section Formulaire de Contact et Carte de Zone de Service */
.contact-form-map-section {
    padding: 70px 0; /* Réduction du padding vertical */
    background-color: var(--blanc-principal); /* Fond blanc principal */
}

.contact-form-map-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Deux colonnes de taille égale */
    gap: 40px; /* Augmentation de l'espacement entre les colonnes */
    max-width: 1140px; /* Alignement avec le conteneur principal */
    margin: 0 auto;
    padding: 0;
}

.form-wrapper {
    background-color: var(--blanc-principal); /* Fond blanc principal */
    padding: 35px; /* Légère réduction du padding */
    border-radius: 10px; /* Réduction du rayon de bordure */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Ombre plus subtile */
    border: 1px solid var(--gris-clair); /* Ajout d'une bordure grise claire */
}

.form-wrapper .form-title {
    font-family: 'Montserrat', sans-serif;
    color: var(--noir-secondaire); /* Titre en noir légèrement plus clair */
    font-size: 2.0em; /* Légère réduction de la taille du titre */
    font-weight: 700;
    margin-bottom: 25px; /* Réduction de la marge basse */
    letter-spacing: -0.6px; /* Ajustement du crénage */
    text-align: center;
}

.contact-form .form-group {
    position: relative;
    margin-bottom: 25px; /* Réduction de la marge basse */
}

.contact-form .form-control {
    width: calc(100% - 20px); /* Ajustement pour le padding */
    padding: 10px; /* Réduction du padding */
    border: 1px solid var(--gris-clair); /* Bordure grise claire */
    border-radius: 5px; /* Ajout d'un léger arrondi */
    background: var(--blanc-principal); /* Fond blanc principal */
    font-size: 1em;
    color: var(--noir-principal); /* Texte en noir principal */
    transition: border-color 0.3s ease-in-out;
}

.contact-form .form-control:focus {
    border-color: var(--noir-principal); /* Bordure noire au focus */
    outline: none;
}

.contact-form label {
    position: absolute;
    top: 10px; /* Ajustement de la position verticale */
    left: 10px; /* Ajustement de la position horizontale */
    color: var(--gris-moyen); /* Couleur du label en gris moyen */
    font-size: 1em;
    font-weight: normal;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
}

.contact-form .form-control:focus + label,
.contact-form .form-control:not(:placeholder-shown) + label {
    top: -12px; /* Ajustement de la position verticale */
    left: 0px;
    font-size: 0.8em;
    color: var(--noir-principal); /* Couleur du label en noir principal au focus */
    background-color: var(--blanc-principal); /* Ajout d'un fond blanc pour une meilleure lisibilité */
    padding: 0 5px; /* Ajout de padding pour le fond */
}

.contact-form button[type="submit"] {
    display: block;
    width: 100%;
    padding: 14px 0; /* Réduction du padding vertical */
    background-color: var(--noir-principal); /* Fond noir principal */
    color: var(--blanc-principal); /* Texte en blanc principal */
    border: none;
    border-radius: 5px; /* Réduction du rayon de bordure */
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); /* Ombre plus subtile */
}

.contact-form button[type="submit"]:hover {
    background-color: var(--noir-secondaire); /* Noir légèrement plus clair au survol */
    transform: translateY(-1px); /* Réduction de l'effet de soulèvement */
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15); /* Ombre légèrement plus prononcée au survol */
}

.map-container {
    background-color: var(--blanc-principal); /* Fond blanc principal */
    padding: 25px; /* Réduction du padding */
    border-radius: 10px; /* Réduction du rayon de bordure */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Ombre plus subtile */
    text-align: center;
    border: 1px solid var(--gris-clair); /* Ajout d'une bordure grise claire */
}

.map-container h3 {
    font-family: 'Montserrat', sans-serif;
    color: var(--noir-secondaire); /* Titre en noir légèrement plus clair */
    font-size: 2.0em; /* Légère réduction de la taille du titre */
    font-weight: 700;
    margin-bottom: 15px; /* Réduction de la marge basse */
    letter-spacing: -0.6px; /* Ajustement du crénage */
}

.map-container iframe {
    border-radius: 8px; /* Réduction du rayon de bordure */
    margin-bottom: 10px; /* Réduction de la marge basse */
    border: 1px solid var(--gris-clair); /* Ajout d'une bordure grise claire */
}

.map-container .map-note {
    color: black; /* Texte en gris moyen */
    font-size: 1em;
    font-weight: bold;
}

/* Section Informations de Contact */
.contact-info-section {
    padding: 70px 0; /* Réduction du padding vertical */
    background-color: var(--blanc-principal); /* Fond blanc principal */
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Cartes un peu plus larges */
    gap: 30px; /* Réduction de l'espacement entre les cartes */
    padding: 0 20px; /* Réduction du padding latéral */
}

.info-card {
    background-color: var(--gris-clair); /* Fond gris clair pour les cartes */
    padding: 30px; /* Réduction du padding */
    border-radius: 8px; /* Réduction du rayon de bordure */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); /* Ombre encore plus subtile */
    text-align: center;
    transition: transform 0.2s ease-in-out;
    border: 1px solid var(--gris-clair); /* Ajout d'une bordure grise claire */
}

.info-card:hover {
    transform: translateY(-3px); /* Réduction de l'effet de soulèvement */
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.08); /* Ombre légèrement plus prononcée au survol */
}

.info-card i {
    font-size: 2.2em; /* Légère réduction de la taille de l'icône */
    color: var(--noir-principal); /* Icône en noir principal */
    margin-bottom: 15px; /* Réduction de la marge basse */
}

.info-card h3 {
    font-size: 1.4em; /* Légère réduction de la taille du titre */
    color: var(--noir-secondaire); /* Titre en noir légèrement plus clair */
    margin-bottom: 10px; /* Réduction de la marge basse */
}

.info-card p {
    color: var(--noir-principal); /* Texte en noir principal */
    font-size: 1em;
    font-weight: bold;
}

.info-card a {
    color: var(--noir-principal); /* Lien en noir principal */
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.info-card a:hover {
    text-decoration: underline;
    color: var(--noir-secondaire); /* Noir légèrement plus clair au survol */
}

/* Section Carte */
.contact-map-section {
    padding: 70px 0; /* Réduction du padding vertical */
    background-color: var(--blanc-principal); /* Fond blanc principal */
}

.contact-map-section .map-container { /* Réutilisation du style de la section précédente */
    border-radius: 8px; /* Réduction du rayon de bordure */
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); /* Ombre plus subtile */
    border: 1px solid var(--gris-clair); /* Ajout d'une bordure grise claire */
}

.contact-map-section .map-note {
    text-align: center;
    color: var(--gris-moyen); /* Texte en gris moyen */
    font-size: 1em;
    margin-top: 15px; /* Réduction de la marge haute */
}

/* Section FAQ */
/* Styles pour la section FAQ modernisée - Version 2 */
.faq-section.modern-v2 {
    padding: 60px 0; /* Réduction du padding vertical */
    background-color: #FFFFFF; /* Fond blanc principal */
}

.faq-accordion {
    max-width: 760px; /* Légère réduction de la largeur maximale */
    margin: 0 auto;
    border-radius: 10px; /* Réduction du rayon de bordure */
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06); /* Ombre plus subtile */
    border: 1px solid var(--gris-clair); /* Ajout d'une bordure grise claire */
}

.faq-item {
    border-bottom: 1px solid var(--gris-clair); /* Bordure grise claire entre les items */
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    background-color: var(--blanc-principal); /* Fond blanc principal */
    color: var(--noir-principal); /* Texte en noir principal */
    padding: 18px 25px; /* Réduction du padding */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.faq-question h3 {
    font-size: 1.1em; /* Légère réduction de la taille du titre */
    font-weight: 500;
    margin: 0;
    color: var(--noir-secondaire); /* Couleur de texte légèrement plus foncée */
}

.faq-question i {
    font-size: 1.2em; /* Légère réduction de la taille de l'icône */
    color: var(--noir-principal); /* Icône en noir principal */
    transition: transform 0.3s ease-in-out;
}

.faq-question:hover {
    background-color: var(--gris-clair); /* Fond gris clair au survol */
}

.faq-answer {
    padding: 20px 25px; /* Réduction du padding */
    background-color: var(--blanc-principal); /* Fond blanc principal */
    color: var(--gris-moyen); /* Texte en gris moyen */
    font-size: 0.95em; /* Légère réduction de la taille du texte */
    line-height: 1.7; /* Ajustement de l'espacement des lignes */
    display: none;
    border-top: 1px solid var(--gris-clair); /* Séparation visuelle de la réponse */
}

.faq-item.open .faq-answer {
    display: block;
}

.faq-item.open .faq-question i {
    transform: rotate(180deg);
}

/* Responsive Design */
@media (max-width: 992px) {
    .hero-contact .hero-title {
        font-size: 2.8em;
    }
    .hero-contact .hero-subtitle {
        font-size: 1.1em;
    }
    .info-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Légère réduction de la largeur minimale */
    }
    .faq-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Légère réduction de la largeur minimale */
    }
    .contact-form-map-wrapper {
        grid-template-columns: 1fr; /* Retour à une seule colonne sur les écrans plus petits */
    }
    .form-wrapper {
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2.2em;
        margin-bottom: 35px;
    }
    .hero-contact {
        padding: 50px 0;
    }
    .hero-contact .hero-title {
        font-size: 2.3em;
    }
    .contact-form-map-section {
        padding: 50px 0;
    }
    .form-wrapper {
        padding: 25px;
    }
    .info-grid, .faq-grid {
        grid-template-columns: 1fr;
    }
    .contact-map-section {
        padding: 50px 0;
    }
    .faq-section {
        padding: 50px 0;
    }
    .map-container h3 {
        font-size: 1.8em;
        margin-bottom: 12px;
    }
}

@media (max-width: 576px) {
    .form-wrapper {
        padding: 15px;
    }
    .form-wrapper .form-title {
        font-size: 1.6em;
        margin-bottom: 15px;
    }
    .contact-form .form-group {
        margin-bottom: 20px;
    }
    .map-container h3 {
        font-size: 1.6em;
        margin-bottom: 10px;
    }
    .hero-contact {
        padding: 40px 0;
    }
    .hero-contact .hero-title {
        font-size: 2.0em;
    }
    .hero-contact .hero-subtitle {
        font-size: 1.0em;
    }
    .section-title {
        font-size: 2.0em;
        margin-bottom: 30px;
    }
}