/* Fichier: style.css */


/* Bannière*/

/* Appliquer une image de fond à la page d'accueil */
body {
    background-image: url('../image/fond2.png'); /* Remplacez par le chemin de votre image */
    /*background-size: cover;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; /*permet à l'image de la banière d'occuper toute la page */
    height: 100vh;
    margin: 0;
    padding: 0;
}
/* Je m'appelle Fatoumata Diallo 
/*h1 {
    
    font-family: italic;
    font-size: 100px;
} */
/* Styliser le "Je m'appelle Fatoumata DIALLO" */
#corps, .container {
    
    color: white; /* Couleur du texte */
    padding: 20px;
    border-radius: 10px;
}

/* Centrer le contenu verticalement et horizontalement */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
}

@media (min-width:1200px) {
    .container {max-width: 75vw !important;}
}

/* Personnaliser le boutons EN SAVOIR PLUS */
.btn-bar .btn {
    background-color: #ffcc00; /* Couleur de fond du bouton (bouton EN SAVOIR PLUS)*/
    color: blue; /* Couleur du texte du bouton */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold; /* Texte en gras */
    transition: background-color 0.3s ease, color 0.3s ease; /* Ajout de la transition de la couleur du texte */
    
}


/* Effet hover pour rendre le fond transparent */
.btn-bar .btn:hover {
    background-color: transparent; /* Fond transparent */
    color: white; /* Couleur du texte changée pour être visible sur le fond transparent */
    border: 2px solid #ffcc00; /* Ajout d'une bordure pour délimiter le bouton */
}

/* fin de la Bannière*/



/*espacement entre les differents onglets de la barre de navigation*/
.nav-item {
    margin-left: 15px;
    margin-right: 15px;
}



/* Style pour les liens du menu */
.navbar-nav li a {
    color: blue; /*Couleur du text de la navbar */
    padding: 10px 20px;
    text-decoration: none;
    display: inline-block;
    font-weight: bold; /* Texte en gras */
    transition: background-color 0.3s, color 0.3s;
}

/* Effet de survol pour les liens du menu */
.navbar-nav li a:hover,
.navbar-nav li a.active {
    background-color: rgba(0, 0, 255, 0.671); /*couleur du fond lors du survole */
    color: white !important; /*couleur du text au survole */
    border-radius: 5px; /* Pour arrondir les coins du bouton */
}





/* Style pour les phrases de bienvenue */
.banner-center-text label {
    font-size: 1.5rem; /* Modifier la taille selon vos préférences */
}

.banner-center-text h1 {
    font-size: 3rem; /* Modifier la taille selon vos préférences */
        /* Enlève le gras pour le texte "Je m'appelle" */
        .normal-weight {
            font-weight: normal;
        }
    
        /* Applique le gras pour le texte "Fatoumata Diallo" */
        .bold-weight {
            font-weight: bold;
        }
}

.banner-center-text p {
    font-size: 1.5rem; /* Modifier la taille selon vos préférences */

}


/* Centrer les textes du banner-center-text vers la droite "Bonjour,....*/
.banner-center-text {
    text-align: left;
    /* Vous pouvez ajuster le padding et la marge si nécessaire */
    padding-left: 20px; /* Ajustez cette valeur selon vos besoins */
}


/*Entreprise*/
 /* Assurez-vous que la section occupe toute la hauteur de l'écran */
 .full-height {
    min-height: 100vh; /* Hauteur minimale de la fenêtre */
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1; /* Permet à cette section de remplir l'espace restant */
    padding: 2rem; /* Espacement interne */
    background-color:white; /* Fond blanc */
}



/* Style pour les onglets */
.nav-tabs {
    border-bottom: 1px solid #dee2e6; /* Bordure en bas des onglets */
}

.nav-tabs .nav-item {
    margin-bottom: -1px;
}


/* Assurez-vous que le sous-menu reste visible lorsque l'utilisateur survole l'onglet "Entreprise" */
.navbar-nav .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* Supprimer le décalage du menu */
}

/* Style pour le sous-menu */
.navbar-nav .dropdown-menu {
    background-color: rgba(255, 255, 255, 0.884); /* Couleur de fond du sous-menu */
    color: blue; /* Couleur du texte du sous-menu */
    border: none; /* Supprimer les bordures */
    position: absolute; /* Permet d'afficher le sous-menu par-dessus le contenu */
    z-index: 1000; /* S'assure que le sous-menu est au-dessus du reste */
}

/* Style pour les liens du sous-menu de l'onglet Entreprise */
.navbar-nav .dropdown-menu .dropdown-item {
    color: blue; /* Couleur du texte des sous-onglets */
    padding: 10px 20px;
    font-weight: bold;
}

/* Effet de survol pour les liens du sous-menu */
.navbar-nav .dropdown-menu .dropdown-item:hover {
    background-color: transparent; /* Fond transparent */
    color: blue !important; /* Couleur du texte changée pour être visible sur le fond transparent */
    border: 2px solid #ffcc00; /* Ajout d'une bordure pour délimiter le bouton */
}

/* Assurez-vous que les éléments du menu déroulant ne disparaissent pas trop rapidement */
.dropdown-menu {
    transition: opacity 0.2s ease-in-out;
}

.dropdown:hover>.dropdown-menu {
    display: block;
    opacity: 1;
}



/* entreprise_esker */

.h1 {
    color : #fff;
    align-items: center;

}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400; /*taille des écrits sur la page blanche*/
    line-height: 1.5;
    color: #212922;
    text-align: center; /* centrer le entreprise esker*/
    background-color: #fff;
}    /*cette partie de body ne sert presqu'à rien parceque le corps h1 tout en bas à remplacer. Mais je le garde au cas ou :) */

.bg-banner {
    position: relative;
    width: 100%;
    height: 200px; /* Ajustez la hauteur selon les besoins */
    background-color: #f8f9fa; /* Couleur de la bannière */
    display: flex;
    align-items: center;
    justify-content: center;
}



.full-height {
    min-height: 100vh; /*la taille de la page blanche en longeur */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.content {  
    background-color: #3b56aa; /* Couleur de la page blanche */
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 0px;
    /*margin-top: 60px; /*fait bouger la page blanche */
    /*margin-left: -1%;  /*Augmente la taille de la page blanche ou bleu en largeur*/
    /*margin-right: -1%; /* Augmente la taille de la page blanche ou bleu en largeur*/
}


/*l'image esker */
#corps {
    display: flex;
    align-items: center;
    justify-content: center;
    
}

#corps h1 {
    margin: 0;
    font-size: 3rem; /*Augmente la taille de "Entreprise Esker"*/
    line-height: 1.5;
    color: #fff; /* Ajustez la couleur du texte si nécessaire */
}

#corps img {
    width: 200px; /* Permet d'augmenter la taille de l'image */
    height: auto;
    margin-left: 20px; /* Ajoutez de l'espace entre le texte et l'image */
    
}

/*pied de page*/
/* Cacher le texte des liens par défaut */
.email-text,
.linkedin-text {
    display: none;
    margin-left: 10px; /* Pour ajouter un petit espace entre l'icône et le texte */
}

/* Afficher le texte lors du survol de l'icône */
a:hover .email-text,
a:hover .linkedin-text {
    display: inline;
}