/* ============================= */
/* RÉINITIALISATION DES STYLES */
/* ============================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

/* ============================= */
/* CORPS DE LA PAGE */
/* ============================= */

html, body {
font-family:Arial, sans-serif;
color: #151515;
max-width: 100%;
overflow-x: hidden; /* Coupe tout ce qui dépasse horizontalement */
}

/* ============================= */
/* EN-TÊTE DU SITE */
/* ============================= */

.header{
background:#FFF4F1;
border-bottom:1px solid #ddd;
}

/* ============================= */
/* BARRE DE NAVIGATION */
/* ============================= */

.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 40px;
}

/* ============================= */
/* LOGO DU SITE */
/* ============================= */

.logo{
width:170px;
}

/* ============================= */
/* MENU PRINCIPAL */
/* ============================= */

.menu{
display:flex;
list-style:none;
gap:30px;
}

/* ============================= */
/* LIENS DU MENU */
/* ============================= */

/* Cette règle servira à afficher le menu quand on cliquera */
.menu.active {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 70px; /* Ajuste selon la hauteur de ton header */
    left: 0;
    width: 100%;
    background-color: #FFF4F1;
    z-index: 1000;
    padding: 20px;
    border-bottom: 1px solid #ddd;
}

.menu a{
text-decoration:none;
color:#333;
font-weight:bold;
padding:10px;
display:block;
}

/* ============================= */
/* EFFET AU SURVOL DES LIENS */
/* ============================= */

.menu a:hover{
color:#ff6b4a;
}

/* ============================= */
/* FLÈCHE DES MENUS DÉROULANTS */
/* ============================= */

.arrow{
font-size:12px;
margin-left:5px;
}

/* ============================= */
/* ÉLÉMENT CONTENANT UN MENU DÉROULANT */
/* ============================= */

.dropdown{
position:relative;
}

/* ============================= */
/* SOUS-MENU (MENU DÉROULANT) */
/* ============================= */

.submenu{
position:absolute;
top:40px;
left:0;
background:white;
list-style:none;
width:200px;
border:1px solid #ddd;
box-shadow:0 4px 10px rgba(0,0,0,0.1);

/* paramètres pour l'animation d'apparition */

opacity:0;
visibility:hidden;
transform:translateY(10px);

transition:all 0.3s ease;
}

/* ============================= */
/* LIENS À L'INTÉRIEUR DU SOUS-MENU */
/* ============================= */

.submenu li a{
padding:10px;
}

/* ============================= */
/* AFFICHER LE MENU DÉROULANT AU SURVOL */
/* ============================= */

.dropdown:hover .submenu{
opacity:1;
visibility:visible;
transform:translateY(0);
}

/* ============================= */
/* EFFET AU SURVOL D’UN ÉLÉMENT DU SOUS-MENU */
/* ============================= */

.submenu li:hover{
background:#f5f5f5;
}

/* ============================= */
/* BOUTON MENU MOBILE (MENU HAMBURGER) */
/* ============================= */

.menu-toggle{
display:none;
flex-direction: column;
font-size:28px;
cursor:pointer;
z-index: 1001;
color: #333; /* Pour que l'icône soit visible */
}



/* --- LE CONTENEUR PRINCIPAL --- */
.main-contact-wrapper {
    display: flex;             /* Active Flexbox pour centrer le contenu */
    justify-content: center;   /* Centre la carte horizontalement */
    align-items: center;       /* Centre la carte verticalement */
    min-height: 100vh;         /* Prend au moins 100% de la hauteur de l'écran */
    padding: 20px;             /* Évite que la carte touche les bords sur mobile */
}

/* --- LA CARTE DE CONTACT (Le bloc gris) --- */
.contact-card {
    background: #e9ecef;       
    display: flex;             /* Met les infos (gauche) et le formulaire (droite) côte à côte */
    max-width: 1000px;         /* Largeur maximale pour que la carte ne soit pas trop étirée */
    width: 100%;               /* S'adapte à la largeur de l'écran jusqu'à 1000px */
    border-radius: 15px;       
    overflow: hidden;          /* Coupe tout ce qui dépasse des bords arrondis */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); 
    padding: 40px;             
}

/* --- CÔTÉ GAUCHE (Informations) --- */
.contact-info-side {
    flex: 1;                   /* Prend 1 part de l'espace disponible */
    padding-right: 30px;       /* Espace entre les infos et le formulaire */
}

.contact-info-side h1 {
    font-size: 2.5rem;         /* Titre principal très grand */
    margin-bottom: 30px;       /* Espace sous le titre */
    font-weight: bold;         /* Texte en gras */
}

.info-block {
    display: flex;             /* Aligne l'icône et le texte horizontalement */
    align-items: flex-start;   /* Aligne l'icône en haut si le texte est long */
    margin-bottom: 25px;       /* Espace entre chaque bloc d'info (mail, tel, adresse) */
}

.info-block i {
    font-size: 1.5rem;         /* Taille des icônes FontAwesome */
    margin-right: 15px;        /* Espace entre l'icône et le texte */
    margin-top: 5px;           /* Petit ajustement pour aligner l'icône au texte */
}

.info-block h3 {
    margin: 0;                 /* Supprime les marges par défaut du titre */
    font-size: 1.2rem;
    font-weight: bold;
}

.info-block p {
    margin: 2px 0;             /* Espace serré entre les lignes de texte */
    color: #333;               /* Couleur de texte gris foncé pour la lisibilité */
}

/* --- CÔTÉ DROIT (Formulaire blanc) --- */
.contact-form-side {
    flex: 1.5;                 /* Prend 1.5 part d'espace (plus large que les infos) */
    background: white;         /* Fond blanc pour détacher le formulaire du fond gris */
    padding: 30px;             /* Espace intérieur du formulaire */
    border-radius: 15px;       /* Arrondit les coins du bloc blanc */
}

.form-grid {
    display: grid;             /* Active le mode Grille pour organiser les champs */
    grid-template-columns: 1fr 1fr; /* Divise l'espace en 2 colonnes égales */
    gap: 15px;                 /* Espace entre chaque champ de saisie */
}

/* --- GROUPES DE SAISIE (Label + Input) --- */
.input-group {
    display: flex;             /* Flexbox pour empiler le label et l'input */
    flex-direction: column;    /* Aligne le label au-dessus du champ de texte */
    margin-bottom: 15px;       /* Espace sous chaque groupe */
}

/* Classe pour les champs qui doivent prendre toute la largeur (Email, Message) */
.full-width {
    grid-column: span 2;       /* S'étend sur les 2 colonnes de la grille */
}

label {
    font-weight: 600;          /* Texte des étiquettes un peu plus épais */
    margin-bottom: 5px;        /* Espace entre l'étiquette et le champ */
}

/* Style des champs de texte */
input, textarea {
    background: #dcdcdc;       /* Couleur de fond grise pour les champs */
    border: none;              /* Supprime la bordure par défaut */
    padding: 12px;             /* Espace intérieur pour le texte saisi */
    border-radius: 8px;        
    outline: none;             /* Supprime le contour bleu par défaut au clic */
}

/* Groupe pour la case à cocher (RGPD) */
.checkbox-group {
    display: flex;             /* Aligne la case et le texte horizontalement */
    align-items: center;
    gap: 10px;                 /* Espace entre la case et le texte */
    margin-top: 10px;
}

/* --- LE BOUTON ENVOYER --- */
.btn-envoyer {
    background-color: #ff6233; 
    color: black;              /* Corrigé : Blanc est plus lisible sur orange que noir */
    border: none;
    padding: 15px 40px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    margin-top: 20px;
    transition: 0.3s;
}

.btn-envoyer:hover {
    background-color: #e65100; /* Corrigé : Un orange plus foncé pour l'effet de clic */
    transform: translateY(-2px); /* Petit bonus : le bouton monte légèrement au survol */
}

/* FOOTER */

.footer{
    background-color:rgba(217, 217, 217, 0.17);
    color:#151515;
    padding:40px 0;
}


.footer-container {
    display: flex;
    flex-direction:column; /* met les éléments en colonne */
    align-items:flex-start;
}
.footer-logo{
    width:200px;
    margin : 0px;
    margin-left: 45%;
}
.footer-columns-wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%; /* Pour occuper toute la largeur sous le logo */
    gap: 30px;
    flex-wrap:wrap;
    margin-left: 7%;
}

.footer-column {
    flex: 1;
    min-width: 200px;
}
.footer-column h3 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: #000;
}
.footer-column p, 
.footer-column li {
    font-size: 0.95rem;
    line-height: 1.8; /* Donne de l'espace entre les lignes */
    margin-bottom: 8px;
}
.footer-column ul {
    list-style: none; /* Enlève les puces */
    padding: 0;
}
.footer-column a {
    text-decoration: none; /* Enlève le soulignement */
    color: #333;
    transition: 0.3s;
}

.footer-column a:hover {
    text-decoration: underline;
    color: #000;
}
/* La ligne horizontale */
.footer-line {
    border: 2px;
    border-top: 1px solid black; /* Ligne grise fine */
    margin:40px 0 20px 0;
    width: 85%;
    margin-left: 7%;
    
}

/* Le texte de copyright en bas */
.footer-copy {
    text-align: center;
    font-size: 0.9rem;
    color: #151515;
    margin-top: 40px;

}


/* --- ADAPTATION POUR MOBILE ET TABLETTE --- */
@media (max-width: 768px) {
    
    /* 1. Le Header & Menu */
    .menu-toggle {
        display: flex !important; 
    }

    .menu {
        display: none; /* Cache le menu horizontal par défaut */
    }

    /* 2. La Carte de Contact (Le conteneur gris) */
    .main-contact-wrapper {
        padding: 10px;
        min-height: auto; /* Évite de forcer une hauteur immense sur mobile */
    }
    
    .menu.active {
        display: flex !important;
        flex-direction: column;
        
        /* Positionnement précis */
        position: absolute;
        top: 70px; /* Ajuste cette valeur pour qu'elle soit juste sous ton logo */
        left: 0;
        width: 100%;
        
        /* Style et visibilité */
        background-color: #FFF4F1; 
        padding: 20px;
        border-bottom: 2px solid #ff6233;
        
        /* Priorité d'affichage : doit être au-dessus du contenu mais sous le toggle si besoin */
        z-index: 999; 
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    }

    /* On s'assure que le header reste fixe ou stable */
    .header {
        position: relative;
        z-index: 1000;
    }



    .contact-card {
        flex-direction: column !important;
        height: auto !important; /* Pour que la carte s'étire selon le contenu */
        padding: 15px !important;
    }

    .contact-info-side {
        width: 100% !important;
        margin-bottom: 20px;
    }

    .contact-form-side {
        display: block !important; /* On s'assure qu'il n'est pas caché */
        width: 100% !important;
        padding: 20px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .info-block {
        flex-direction: column; 
        align-items: center;
        text-align: center;
    }

    .info-block i {
        margin-right: 0;
        margin-bottom: 10px;
    }

    /* 4. Côté Droit (Formulaire blanc) */
    .contact-form-side {
        width: 100%;
        padding: 20px;
    }

    .form-grid {
        
        display: flex !important;
        flex-direction: column !important;

    }

    .input-group {
        width: 100%;
        margin-bottom: 15px;
    }

    /* 5. Le Footer */
    .footer-columns-wrapper {
        margin-left: 0;
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .footer-logo {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    .footer-line {
        width: 90%;
        margin-left: 5%;
    }
}