/* ====================================================================
    FICHIER : contact.css
    DESCRIPTION : Styles spécifiques à la page "Contact"
    UTILISATION : Design des sections contact, cabinets et formulaire
   ==================================================================== */

/* ====================================================================
    SECTION 1 : MÉTHODES DE CONTACT DIRECT
    Styles pour la barre téléphone/email
   ==================================================================== */

/* Conteneur flex pour aligner téléphone et email côte à côte */
.contact-methods-bar {
    display: flex;                    /* Disposition en ligne */
    justify-content: center;          /* Centrage horizontal */
    gap: 30px;                       /* Espacement entre les blocs */
    margin: 3rem auto 5rem;          /* Marges : haut | droite/gauche | bas */
    max-width: 900px;                /* Largeur maximale pour éviter l'étirement */
}

/* Style commun pour les blocs téléphone et email */
.contact-item {
    background-color: var(--bg-light); /* Fond clair défini dans les variables */
    padding: 1.5rem;                 /* Espacement interne */
    border-radius: 8px;              /* Coins arrondis */
    text-align: center;              /* Centrage du contenu */
    flex: 1;                         /* Les deux blocs prennent la même largeur */
    border: 1px solid var(--border-light); /* Bordure subtile */
    box-shadow: var(--shadow-subtle); /* Ombre légère */
}

/* Icônes dans les blocs contact */
.contact-item i {
    font-size: 2rem;                 /* Taille importante pour visibilité */
    color: var(--primary);           /* Couleur verte principale */
    margin-bottom: 0.5rem;           /* Espace sous l'icône */
}

/* Texte principal (téléphone/email) */
.contact-item p {
    font-size: 1.1rem;               /* Taille légèrement augmentée */
    font-weight: 600;                /* Demi-gras pour importance */
}

/* Liens téléphone et email */
.contact-item a {
    color: var(--primary-dark);      /* Vert foncé pour les liens */
    text-decoration: none;           /* Pas de soulignement */
}

/* Notes informatives sous les contacts */
.note-method {
    display: block;                  /* Affichage en bloc */
    font-size: 0.85rem;              /* Texte plus petit */
    color: var(--text-light);        /* Couleur secondaire discrète */
    margin-top: 0.5rem;              /* Espace depuis le texte principal */
}

/* ====================================================================
    SECTION 2 : CABINETS ET CARTES
    Styles pour l'affichage des deux cabinets
   ==================================================================== */

/* Grille à 2 colonnes pour les cabinets */
.cabinets-grid {
    display: grid;                    /* Utilisation de CSS Grid */
    grid-template-columns: 1fr 1fr;   /* Deux colonnes de largeur égale */
    gap: 3rem;                       /* Grand espacement entre colonnes */
    margin-top: 3rem;                /* Espace depuis la section précédente */
}

/* Carte individuelle pour chaque cabinet */
.cabinet-card {
    background-color: var(--white);   /* Fond blanc pur */
    padding: 2.5rem;                 /* Padding généreux */
    border-radius: 10px;             /* Coins arrondis prononcés */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); /* Ombre portée douce */
}

/* Titre des cabinets */
.cabinet-title {
    font-size: 1.6rem;               /* Taille importante */
    color: var(--primary-dark);      /* Couleur foncée */
    margin-bottom: 1rem;             /* Espace après le titre */
    padding-bottom: 10px;            /* Espace pour la ligne décorative */
    border-bottom: 2px solid var(--accent); /* Ligne de séparation colorée */
}

/* Icônes de localisation dans les titres */
.cabinet-title .accent-color-icon {
    color: var(--accent);            /* Couleur dorée/sable */
    margin-right: 10px;              /* Espace après l'icône */
}

/* Adresse du cabinet */
.cabinet-address {
    font-size: 1.1rem;               /* Taille légèrement augmentée */
    margin-bottom: 1rem;             /* Espace après l'adresse */
}

/* Horaires d'ouverture */
.cabinet-hours {
    font-weight: 500;                /* Poids moyen */
    color: var(--primary);           /* Couleur verte */
    margin-bottom: 2rem;             /* Espace avant la carte */
}
/* Icône horloge */
.cabinet-hours i {
    margin-right: 8px;               /* Petit espace après l'icône */
    color: var(--primary-dark);      /* Couleur foncée */
}

/* Conteneur des cartes Google Maps */
.map-embed {
    overflow: hidden;                /* Cache les débordements */
    border-radius: 5px;              /* Coins légèrement arrondis */
    border: 1px solid var(--border-light); /* Bordure subtile */
}

/* ====================================================================
    SECTION 3 : FORMULAIRE DE CONTACT
    Styles pour le formulaire d'envoi de message
   ==================================================================== */

/* Conteneur principal du formulaire */
.form-container {
    max-width: 800px;                /* Largeur maximale pour lisibilité */
    margin: 0 auto;                  /* Centrage horizontal */
    background-color: var(--white);  /* Fond blanc */
    padding: 3rem;                   /* Padding généreux */
    border-radius: 10px;             /* Coins arrondis */
    box-shadow: var(--shadow-subtle); /* Ombre légère */
}

/* Groupe de champ de formulaire */
.form-group {
    margin-bottom: 1.5rem;           /* Espacement vertical entre groupes */
}

/* Conteneur flex pour les champs côte à côte */
.form-group-flex {
    display: flex;                    /* Disposition en ligne */
    gap: 20px;                       /* Espacement entre champs */
}
/* Champs enfants prennent largeur égale */
.form-group-flex .form-group {
    flex: 1;                         /* Largeur égale pour les deux champs */
}

/* Labels des champs */
label {
    display: block;                  /* Affichage en bloc */
    margin-bottom: 0.5rem;           /* Espace entre label et champ */
    font-weight: 600;                /* Demi-gras pour importance */
    color: var(--primary-dark);      /* Couleur foncée */
}

/* Styles communs pour tous les champs de saisie */
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
    width: 100%;                     /* Pleine largeur disponible */
    padding: 12px;                   /* Padding confortable */
    border: 1px solid var(--border-light); /* Bordure subtile */
    border-radius: 4px;              /* Coins légèrement arrondis */
    box-sizing: border-box;          /* Le padding ne dépasse pas la largeur */
    font-size: 1rem;                 /* Taille de texte standard */
    transition: border-color 0.3s;   /* Animation douce au focus */
}

/* Effet au focus (sélection) */
input:focus, select:focus, textarea:focus {
    border-color: var(--primary);    /* Bordure verte au focus */
    outline: none;                   /* Supprime le contour par défaut */
}

/* Zone de texte (message) */
textarea {
    resize: vertical;                /* Redimensionnement vertical seulement */
}

/* Case à cocher RGPD */
.form-group-check {
    margin-top: 2rem;                /* Grand espace au-dessus */
    margin-bottom: 2rem;             /* Grand espace en dessous */
    display: flex;                   /* Disposition en ligne */
    align-items: center;             /* Alignement vertical au centre */
}
/* Case à cocher elle-même */
.form-group-check input[type="checkbox"] {
    width: auto;                     /* Largeur naturelle */
    margin-right: 10px;              /* Espace avant le label */
}
/* Label de la case RGPD */
.form-group-check label {
    margin-bottom: 0;                /* Pas de marge basse */
    font-weight: 400;                /* Poids normal (pas en gras) */
    font-size: 0.95rem;              /* Taille légèrement réduite */
}

/* Conteneur du bouton d'envoi */
.form-submit-center {
    text-align: center;              /* Centrage horizontal */
    margin-top: 2rem;                /* Espace depuis le champ précédent */
}

/* ====================================================================
    SECTION 4 : MESSAGES D'ALERTE
    Styles pour les feedbacks succès/erreur
   ==================================================================== */

/* Style de base pour tous les messages */
.alert-message {
    padding: 1rem 1.5rem;            /* Padding confortable */
    margin-bottom: 2rem;             /* Espace en dessous */
    border-radius: 8px;              /* Coins arrondis */
    font-weight: 600;                /* Demi-gras */
    display: flex;                   /* Disposition flex */
    align-items: center;             /* Alignement vertical */
    border: 1px solid transparent;   /* Bordure invisible par défaut */
}

/* Icônes dans les messages */
.alert-message i {
    font-size: 1.2rem;               /* Taille moyenne */
    margin-right: 15px;              /* Espace avant le texte */
}

/* Message de succès (validation) */
.alert-success {
    background-color: #e8f5e9;       /* Fond vert très clair */
    color: #388e3c;                  /* Texte vert foncé */
    border-color: #a5d6a7;           /* Bordure verte moyenne */
}

/* Message d'erreur (problème) */
.alert-error {
    background-color: #fcebeb;       /* Fond rouge très clair */
    color: #c62828;                  /* Texte rouge foncé */
    border-color: #ef9a9a;           /* Bordure rouge moyenne */
}

/* ====================================================================
    SECTION 5 : PROTECTION ANTI-SPAM (HONEYPOT)
    Piège invisible pour les robots
   ==================================================================== */

/* Champ honeypot invisible aux humains, visible aux robots */
.spam-trap-honeypot {
    position: absolute;              /* Positionnement absolu */
    left: -9999px;                   /* Déplacement hors écran */
    top: auto;                       /* Position verticale automatique */
    width: 1px;                      /* Largeur minimale */
    height: 1px;                     /* Hauteur minimale */
    overflow: hidden;                /* Cache tout contenu débordant */
}

/* ====================================================================
    SECTION 6 : DESIGN RESPONSIVE
    Adaptations pour tablettes et mobiles
   ==================================================================== */

/* Pour écrans de tablette (≤ 992px) */
@media (max-width: 992px) {
    /* Cabinets : passe d'une grille 2-colonnes à 1 colonne */
    .cabinets-grid {
        grid-template-columns: 1fr;   /* Une seule colonne */
    }
    /* Méthodes de contact : empilement vertical */
    .contact-methods-bar {
        flex-direction: column;      /* Disposition en colonne */
        gap: 20px;                   /* Espacement réduit */
    }
    /* Champs côte à côte : empilement vertical */
    .form-group-flex {
        flex-direction: column;      /* Disposition en colonne */
        gap: 0;                      /* Pas d'espacement horizontal */
    }
}

/* Pour écrans mobiles (≤ 600px) */
@media (max-width: 600px) {
    /* Réduction du padding sur petits écrans */
    .form-container {
        padding: 1.5rem;             /* Padding réduit pour économiser l'espace */
    }
}