/* ================== RESET GLOBAL ================== */
/* Cette section réinitialise les marges et les paddings par défaut pour que le design soit cohérent sur tous les navigateurs */
* {
    margin: 0;             /* Supprime la marge par défaut */
    padding: 0;            /* Supprime le padding par défaut */
    box-sizing: border-box; /* Assure que le padding et la bordure sont inclus dans la taille de l'élément */
}

/* ================== STYLES GÉNÉRAUX ================== */
/* Style du corps de la page */
body {
    font-family: 'Centaur', Georgia, serif; /* Police Centaur, avec un fallback vers Georgia */
    line-height: 1.6;                     /* Définit l'interligne pour une meilleure lisibilité */
    color: #4E311E;                       /* Couleur de texte marron foncé */
    background-color: #EAD6C3;             /* Fond marron clair */
    background-image: url('image/image_de_fond.jpg'); /* Image de fond placée sur le body */
    background-size: cover;               /* L'image couvre tout l'écran */
    background-position: center;          /* Centrer l'image pour qu'elle soit toujours bien positionnée */
    background-repeat: no-repeat;         /* Ne pas répéter l'image de fond */
    background-attachment: fixed;         /* Garder l'image fixe même lorsque l'on fait défiler la page */
}

.common-bg {								
    background-image: url('image/fonde.jpg'); /* Chemin d'image */
    background-size: cover;                  /* L'image couvre tout l'espace */
    background-position: center;             /* Centrer l'image */
    background-repeat: no-repeat;            /* Pas de répétition de l'image */
    background-attachment: fixed;            /* Fond fixe pendant le défilement */
    color: #FFFFFF;                          /* Texte en blanc pour la lisibilité */
}

/* ================== HEADER ================== */
/* Style du header (en-tête) */
.header {
    background-color: white;
    text-align: center;                    /* Centre le contenu du header */
    padding: 150px 20px;                   /* Espace autour du contenu */
    position: relative;                    /* Position relative pour positionner les images */
    background-size: cover;                /* Ajuste l'image pour couvrir tout l'écran */
    background-position: center;           /* Centre l'image */
    background-repeat: no-repeat;          /* Empêche la répétition de l'image */
    overflow: hidden;                      /* Empêche les images de déborder */
}


/* Style pour le logo */
.header .logo {
    padding: 5px 10px;                     /* Espace intérieur entre le texte et la bordure */
    font-size: 2.5rem;                     /* Taille du texte */
    color: white;                        	/* Couleur du texte */
    font-weight: bold;                     /* Gras pour le texte */
    margin: 0px auto;                        /* Centre horizontalement */
    border-radius: 5px;                    /* Arrondi optionnel pour les coins */
    position: relative;                    /* Assure que le texte est au-dessus des images */
    z-index: 2;                            /* Priorité par-dessus les images */
}

/* Style pour le sous-titre */
.header .subtitle {
    font-size: 1.2rem;                     /* Taille plus petite pour le sous-titre */
    color: white;                        /* Couleur marron clair pour le sous-titre */
    margin-bottom: 15px;                   /* Un peu d'espace sous le sous-titre */
    font-style: italic;                    /* Texte en italique */
    position: relative;                    /* Assure que le texte est au-dessus des images */
    z-index: 2;                            /* Priorité par-dessus les images */
}



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

/* Section générale du menu */
.menu-section {
    background-color: transparence;        /* Couleur d'arrière-plan du menu */
    display: flex;                  /* Utilise Flexbox pour centrer */
    justify-content: center;        /* Centre le contenu horizontalement */
    align-items: center;            /* Centre le contenu verticalement */
    height: 100px;                  /* Hauteur de la section du menu */
    padding: 0;                     /* Supprime les marges internes */
    margin: 0;                      /* Supprime les marges externes */
}

/* Conteneur principal du menu */
.menu-container {
    width: auto;                    /* Adapte la largeur au contenu */
}

/* Liste principale des éléments du menu */
.menu-list {
    list-style: none;               /* Supprime les puces des listes */
    padding: 0;                     /* Supprime le padding par défaut */
    margin: 0;                      /* Supprime la marge par défaut */
    display: flex;                  /* Affiche les éléments en ligne */
    justify-content: center;        /* Centre les éléments horizontalement */
    align-items: center;            /* Centre les éléments verticalement */
}

/* Chaque élément du menu principal */
.menu-item {
    position: relative;             /* Nécessaire pour les sous-menus */
    margin: 0 15px;                 /* Espacement entre les éléments principaux */
}

/* Style des liens dans les éléments principaux du menu */
.menu-list > li > a {
    text-decoration: none;          /* Supprime le soulignement des liens */
    color: #1D1A1F;                    /* Couleur du texte */
    padding: 10px 15px;             /* Agrandit la zone cliquable */
    font-weight: bold;              /* Met le texte en gras */
    display: block;                 /* Rend le lien un bloc pour le padding */
}

/* Style du lien au survol */
.menu-list > li > a:hover {
    background-color: #E8E3DA;      /* Change la couleur d'arrière-plan au survol */
    border-radius: 5px;             /* Ajoute des bords arrondis */
}

/* Liste des sous-menus (dropdown) */
.dropdown {
    list-style: none;                           /* Supprime les puces */
    position: absolute;                         /* Positionnement absolu */
    top: 100%;                                  /* Juste en dessous du lien principal */
    left: 0;                                    /* Aligné à gauche du parent */
    background-color: #E8E3DA;                    /* Couleur d'arrière-plan */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);   /* Ombre légère */
    display: none;                              /* Cache les sous-menus par défaut */
    padding: 10px 0;                            /* Espacement interne */
    z-index: 1000;                              /* Priorité d'affichage */
	border-radius: 5px;
}

/* Style des liens dans les sous-menus */
.dropdown li a {
    text-decoration: none;          /* Supprime le soulignement */
    color: #333;                    /* Couleur du texte */
    padding: 10px 20px;             /* Agrandit la zone cliquable */
    display: block;                 /* Rend le lien un bloc */
    white-space: nowrap;            /* Empêche la casse du texte */
}

/* Sous-menu visible au survol */
.menu-item:hover .dropdown {
    display: block;                 /* Affiche les sous-menus */
}

/* Style des liens au survol dans les sous-menus */
.dropdown li a:hover {
    background-color: #E8E3DA;         /* Change la couleur d'arrière-plan (beige fond) */
}



/* ================== HERO ================== */
/* Section d'introduction principale */
.hero {
    text-align: center;                     /* Centrer le contenu du hero */
    padding: 50px 20px;                     /* Espace autour du contenu */
    background-color: white;                /* Fond blanc pour la section hero */
}


/* Style du bouton primaire dans la section hero */
.btn-primary {
    background-color: #1D1A1F;              /* Couleur de fond marron pour le bouton */
    color: white;                           /* Couleur du texte du bouton */
    padding: 10px 20px;                     /* Espacement autour du texte du bouton */
    border-radius: 5px;                     /* Coins arrondis pour le bouton */
    text-decoration: none;                  /* Enlever le soulignement */
}

/* Effet au survol du bouton */
.btn-primary:hover {
    background-color: #4e311e;              /* Changer la couleur de fond au survol */
}

/* ================== MON PROFIL  ================== */	

.profil {
    text-align: center;                     /* Centrer le contenu du hero */
    padding: 50px 20px;                     /* Espace autour du contenu */
}

.profil h2 {
	border: 2px solid #70472D;
	background-color: transparence;
	border-radius: 5px;
	margin: auto 120px 30px 120px;
    text-align: center;     /* Centrer le titre */
    font-size: 2rem;        /* Taille du titre */
    color: #4e311e;         /* Couleur du titre */
}   

.profil h3 {
	text-align: center;
	margin-bottom: 70px;    				/* Espacement sous le titre */
	font-size: 20px;
}

.profil h4 {
	text-align: center;
	margin-top: 50px;    				/* Espacement sous le titre */
	margin-bottom: 30px;    				/* Espacement sous le titre */
	font-size: 20px;
}


.profil .text-image-container {
    display: flex;                     /* Active le mode flexbox */
    align-items: center;               /* Centre verticalement le contenu */
    justify-content: center;           /* Centre horizontalement le conteneur global */
    gap: 70px;                         /* Espacement entre le texte et l'image */
    text-align: center;                /* Alignement du texte à gauche */
}

.profil p {
    font-size: 20px;                   /* Taille de la police */
    color: #4e311e;                    /* Couleur du texte */
    margin: 0;                         /* Supprime les marges par défaut */
    max-width: 600px;                  /* Limite la largeur du texte */
	margin-bottom: 50px;
}

.profil-image {
    width: 350px;                      /* Largeur de l'image */
    height: auto;                      /* Conserve les proportions */
    border-radius: 20%;                /* Pas de coins arrondis */
	margin: 20px auto 20px 0px;
}

.profile-content {
    margin: 0 auto;                    /* Centre le contenu globalement */
    max-width: 1000px;                 /* Limite la largeur du conteneur */
}









/* ================== GRID DES PASSIONS ================== */
.grid {
    display: grid;                          /* Utilisation de CSS Grid pour la mise en page */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Créer des colonnes fluides qui s'ajustent à l'écran */
    gap: 30px;                              /* Espacement entre les cartes */
	margin: auto 140px 20px 140px;
}

.card {
    background-color: white;                /* Fond blanc pour chaque carte */
    border-radius: 100px;                     /* Coins arrondis pour les cartes */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ombre douce autour des cartes */
    padding: 20px;                           /* Espacement interne de la carte */
    text-align: center;                      /* Centrer le contenu des cartes */
}

/* Style de l'image dans chaque carte */
.card-image {
    width: 130px;                           /* Largeur fixe pour l'image */
    height: 100px;                          /* Hauteur fixe pour l'image */
    object-fit: cover;                      /* Couvre l'espace sans déformer l'image */
    border-radius: 0%;                      /* Image carré entière, (Image circulaire si je mets 50%) */
    margin-bottom: 15px;                    /* Un peu d'espace sous l'image */
}

/* ================== MES REALISATIONS ================== */
.realisations {
    padding: 50px 20px; /* Espacement autour de la section */
    background-color: #fafafa; /* Fond légèrement gris */
}

.realisations .container {
    max-width: 1200px;      /* Limite la largeur maximale de la section */
    margin: 0 auto;         /* Centre horizontalement la section */
    padding: 0 20px;        /* Espacement interne pour ne pas toucher les bords */
}

.realisations h2 {
	border: 2px solid #70472D;
	background-color: white;
	border-radius: 5px;
	margin: auto 80px 30px 80px;
    text-align: center;     /* Centrer le titre */
    font-size: 2rem;        /* Taille du titre */
    color: #4e311e;         /* Couleur du titre */
}

.realisations h3 {
    text-align: center;     /* Centrer le titre */
    font-size: 1rem;        /* Taille du titre */
    color: #4e311e;         /* Couleur du titre */
    margin-bottom: 15px;    /* Espacement sous le titre */
}

/* Grille pour les cartes de projet */
.realisations .grid {
    display: grid;                              /* Active la grille CSS */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Grille fluide avec une largeur minimale de 280px */
    gap: 20px;                                  /* Espacement entre les éléments */
    justify-content: center;                    /* Centre les éléments horizontalement dans la grille */
    margin-left: -10px;                         /* Décale la grille vers la gauche */
    margin-right: -10px;                        /* Décale la grille vers la droite */
}

.realisations .card {
    background-color: #fff;   /* Fond blanc pour chaque carte */
    padding: 20px;             /* Espacement interne dans chaque carte */
    border-radius: 10px;       /* Bords arrondis */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre légère sous chaque carte */
    transition: transform 0.3s ease-in-out; /* Transition pour l'effet au survol */
}

.realisations .card:hover {
    transform: translateY(-10px); /* Effet de levée au survol */
}

.realisations .card h3 {
    font-size: 1.5rem;        /* Taille du titre du projet */
    color: #4e311e;           /* Couleur du titre */
    margin-bottom: 15px;      /* Espacement sous le titre */
}

.realisations .card p {
    font-size: 1rem;          /* Taille du texte */
    color: #333;              /* Couleur du texte */
}


.realisation-image {
    width: 200px;              /* Largeur de l'image */
    height: 190px;              /* Conserve les proportions */
    border-radius: 10px;       /* Coins arrondis */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre légère pour l'image */
}

a {
        color: #4E311E;
        text-decoration: underline;
        cursor: pointer;
}
    a:hover {
        color: darkblue;
}


/* ================== SECTION DES EXPERIENCES ================== */
/* Style général de la section */
.experience-section {
    background-color: #fafafa;  /* Couleur de fond claire */
    padding: 60px 20px;         /* Espacement autour de la section */
}

/* Style du titre principal */
.experience-section h2 {
	border: 2px solid #70472D;
	background-color: transparence;
	border-radius: 5px;
	margin: auto 120px 30px 120px;
    text-align: center;     /* Centrer le titre */
    font-size: 2rem;        /* Taille du titre */
    color: #4e311e;         /* Couleur du titre */
}

/* Conteneur des cartes d'expérience */
.experience-cards {
    display: flex;
    flex-direction: column;    /* Disposition verticale des cartes */
    gap: 20px;                 /* Espacement entre les expériences */
	margin: auto 200px 30px 200px;
}

/* Style pour une expérience avec son image */
.experience-card-image {
    display: flex;
    align-items: center;       /* Aligne l'image et le texte verticalement */
    gap: 15px;                 /* Espacement entre l'image et le texte */
	height: 160px;
	border-radius: 5px;
	border-left: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre légère pour l'image */
}

/* Style de l'image */
.experience-image {
    width: 160px;              /* Largeur de l'image */
    height: auto;              /* Conserve les proportions */
    border-radius: 10px;       /* Coins arrondis */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre légère pour l'image */
}

/* Texte de la carte */
.experience-card {
    flex: 1;                   /* Permet au texte de s'étendre pour occuper l'espace restant */
}

/* Facultatif : Ajouter un style d'alternance (image à droite pour certaines cartes) */
.experience-card-image.reverse {
    flex-direction: row-reverse; /* Inverse l'ordre de l'image et du texte */
	text-align: left;
	margin: 20px 0px 20px 140px;
	border-radius: 5px;
	border-left: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre légère pour l'image */
}




/* ================== SECTION OPPORTUNITES ================== */

.entreprise .container {
	border: 1px solid white;
	background-color: white;
}

/* Style du titre principal */
.entreprise h2 {
    border: 2px solid #70472D;
    background-color: transparence;
    border-radius: 5px;
    margin: 0px 120px 30px 120px;
    text-align: center;
    font-size: 2rem;
    color: #4e311e;
}

.entreprise .text-top {
    margin: 0 20px 50px;
    text-align: center;
}

/* Conteneur principal du texte et de l'image */
.entreprise .profile-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

/* Conteneur du texte */
.entreprise .text-container {
    flex: 1;
    font-size: 1rem;
    color: #4e311e;
    margin: 0 20px;
    text-align: center;
}

/* Style de l'image */
.entreprise .entreprise-image {
    width: 300px;
    height: auto;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer; /* Indiquer que l'image est cliquable */
    position: relative; /* Pour le texte "MON CV" au-dessus de l'image */
}

/* Text Overlay */
.entreprise .cv-recouvrir {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: bold;
    color: white;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px 20px;
    border-radius: 5px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

/* Effet au survol pour afficher "MON CV" */
.entreprise .cv-image-wrapper:hover .cv-recouvrir {
    opacity: 1;
}

.entreprise .text-bot {
    margin: 0 20px 0px;
    text-align: center;
}

/* ================================== MODAL IMAGE ================================== */

/* Fenêtre modale pour afficher l'image en plein écran */
/* Fenêtre modale pour afficher l'image en plein écran */
#cv-modal {
    display: none; /* Masqué par défaut */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Style de l'image dans la modale */
#cv-modal img {
    max-width: 90%;   /* Limiter la largeur de l'image à 90% de la largeur de l'écran */
    max-height: 90%;  /* Limiter la hauteur de l'image à 90% de la hauteur de l'écran */
    object-fit: contain; /* Conserver les proportions de l'image */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Ombre légère */
}

#cv-modal .close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2rem;
    color: white;
    cursor: pointer;
}




/* ================== SECTION CONTACT ================== */
.contact {
    background-color: #f9f9f9;           /* Fond gris très clair pour la section */
    padding: 50px 20px;                  /* Espacement autour de la section */
    text-align: center;                  /* Centre le contenu */
    border-top: 3px solid #5271ff;       /* Bordure colorée en haut de la section */
}

.contact .container {
    max-width: 800px;                    /* Largeur maximale du conteneur pour le formulaire */
    margin: 0 auto;                      /* Centre le formulaire */
    background-color: #ffffff;           /* Fond blanc pour le formulaire */
    padding: 30px;                       /* Espacement interne du formulaire */
    border-radius: 10px;                 /* Coins arrondis du formulaire */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Ombre douce autour du formulaire */
}

/* Titre de la section */
.contact h2 {
    font-size: 2.5rem;                   /* Taille du titre */
    color: #3c4858;                      /* Couleur gris foncé */
    margin-bottom: 15px;                  /* Espacement sous le titre */
}

/* Sous-titre ou introduction */
.contact p {
    font-size: 1.2rem;                   /* Taille du texte de sous-titre */
    color: #7F5539;                      /* Couleur gris-brun */
    margin-bottom: 30px;                  /* Espacement sous le paragraphe */
}
/* ================== SECTION CONTACT ================== */
.contact {
    padding: 50px 20px;
    text-align: center;
    background-color: transparent; /* Supprimez le fond */
}

.contact .container {
    max-width: 800px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.8); /* Fond avec transparence */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Pas d'ombre */
}                 


/* Titre de la section */
.contact h2 {
    font-size: 2rem;                     /* Taille plus petite pour le titre */
    color: #7F5539;                      /* Couleur marron foncé */
    margin-bottom: 15px;                  /* Espacement sous le titre */
}

/* Sous-titre ou introduction */
.contact p {
    font-size: 1rem;                     /* Taille du texte de sous-titre */
    color: #7F5539;                      /* Couleur marron clair */
    margin-bottom: 30px;                  /* Espacement sous le paragraphe */
}

/* ================== STYLE DES FORMULAIRES ================== */
/* Formulaire de base */
.contact-form {
    display: flex;                       /* Utilise flexbox pour aligner les éléments */
    flex-direction: column;              /* Aligne les éléments de haut en bas */
    gap: 15px;                           /* Espacement entre chaque élément du formulaire */
}

/* Champs du formulaire */
.form-group {
    display: flex;                       /* Flexbox pour aligner le label et le champ */
    flex-direction: column;              /* Aligner les étiquettes et les champs de manière verticale */
    gap: 5px;                            /* Espacement entre l'étiquette et le champ */
}

/* Labels des champs de formulaire */
.form-group label {
    font-size: 1rem;                     /* Taille des labels */
    color: #7F5539;                      /* Couleur marron foncé pour les labels */
    font-weight: bold;                   /* Gras pour les labels */
}

/* Champs de saisie */
input[type="text"], input[type="email"], textarea {
    font-size: 1rem;                     /* Taille de la police des champs */
    padding: 10px;                       /* Espacement interne des champs */
    border: 2px solid #7F5539;           /* Bordure marron */
    border-radius: 5px;                  /* Coins arrondis */
    color: #7F5539;                      /* Couleur de texte marron foncé */
    transition: border-color 0.3s ease;  /* Transition pour la couleur de la bordure */
	background-color: rgba(255, 255, 255, 0.2);
}

/* Effet au focus des champs */
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
    border-color: #4E3B31;               /* Bordure plus foncée au focus */
    outline: none;                       /* Enlève le contour de focus par défaut */
}

/* ================== BOUTON D'ENVOI ================== */
.btn-submit {
    background-color: white;      /* Fond transparent */
    color: #7F5539;                      /* Texte marron foncé */
    padding: 10px 20px;                  /* Espacement interne */
    border: 2px solid #7F5539;           /* Bordure marron */
    border-radius: 5px;                  /* Coins arrondis */
    font-size: 1rem;                     /* Taille du texte */
    cursor: pointer;                    /* Curseur de type "pointer" */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transition pour le survol */
}

/* Effet au survol du bouton */
.btn-submit:hover {
    background-color: #7F5539;           /* Fond marron au survol */
    color: white;                        /* Texte en blanc au survol */
    transform: scale(1.05);              /* Légèrement plus grand au survol */
}

/* ================== RÉPONSE DU FORMULAIRE ================== */
/* Ajout d'une section pour la confirmation ou l'erreur */
.form-response {
    margin-top: 20px;                    /* Un peu d'espace après le formulaire */
    font-size: 1rem;                     /* Taille de la réponse */
    color: #4CAF50;                      /* Couleur verte pour la réussite */
    font-weight: bold;                   /* Texte en gras */
}

/* ================== FOOTER ================== */
/* Style du footer (bas de page) */
.footer {
    background-color: transparence;              /* Fond bleu clair pour le footer */
    text-align: center;                     /* Centrer le texte du footer */
    padding: 20px 0;                        /* Espace autour du contenu du footer */
}