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

/* Body */
body {
    font-family: "Playfair Display", serif  !important; /* Liste de polices sans-serif */
    background-color: #f8f9fa;
    color: #333;
}

/* Navbar */
.navbar {
    background-color: #e8720adb; /* Orange */
    padding: 20px;
    background: linear-gradient(to top, #ffb96f, #eb8c39db, #a6530f);

}


.hr-centered {
    width: 60px; /* Largeur du trait */ 
    height: 3px; /* Épaisseur */
    background-color: #ff9800; /* Couleur orange (même que les boutons) */
    border: none; /* Supprime la bordure par défaut */
    margin: 10px auto; /* Centre horizontalement */
    opacity: 0.9; /* Légère transparence */
    border-radius: 10px; /* Arrondi les bords */
}

/* Centrer le titre */
h2.text-center {
    text-align: center;
}


.navbar-brand {
    color: #000000;
    font-weight: 700;
    
}

.navbar-nav .nav-link {
    color: #000000;
    font-weight: 500;
    text-transform: uppercase;
}

.navbar-nav .nav-link:hover {
    color: #ffcc80 ; /* Light orange */
}




/* LOGO */

.logo-container img {
    max-width: 400px;  /* Ajuste la taille du logo si nécessaire */
}




/* Présentation */
#presentation {
    color: #000000;
    padding: 5rem 0;
    /*background: linear-gradient(to top, #f2a34f, #e17c23db, #a6530f);*/
}

#presentation h2 {
    font-size: 3rem;
    font-weight: 700;
}

#presentation p {
    font-size: 27px;
    color: #000
}




/* Sections */


section h3 {
    font-size: 33px;
    font-weight: 700;
    color: #e8720adb;
}

h5{
    font-size: 1.2rem;
}
section p {
    font-size: 26px;
}

section ul {
    list-style: none;
    font-size: 22px;
    text-align: justify;
}

section a.btn-primary {
    background-color: #e8720adb; /* Orange */
    border: none;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
}

section a.btn-primary:hover {
    background-color: #ffcc80; /* Light orange */
}





/* Ajout de marges autour des cartes */
.card {
    margin: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    cursor: pointer;

}

.card:hover {
    transform: scale(1.05); /* Zoom léger */
    box-shadow: 0px 5px 20px rgb(232, 83, 10);

}

.card .cardMD {
    margin: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 450px;
}
/* Images des cartes */
.card-img-top {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 200px;
    object-fit: cover;

}



.card-title {
    margin-top: 20px;
}
/* Texte centré */
.card-body {
    text-align: center;
}


/* Espacement vertical des lignes */
.row {
    margin-bottom: 20px;
    margin-top: 50px;
}


/* Ajoute un style pour l'image en haut */
.image-banner {
    position: relative;
    width: 100%;
    height: 500px; /* Ajuste la hauteur de l'image */
    overflow: hidden;
}
.image-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Pour que l'image remplisse toute la zone sans déformation */
}

/* Espace pour la navbar sous l'image */
nav {
    position: relative;
    z-index: 2;
}


/* Style pour la bannière */
.image-banner {
    position: relative;
    height: 500px; /* Ajuste la hauteur selon tes besoins */
    overflow: hidden;
}

.image-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Conteneur centré */
.content-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    color: #fff;
}

/* Style du logo */
.content-center .logo {
    max-height: 120px;
    width: auto;
    margin-bottom: 20px;
}





.search-bar {
    margin: 0 auto; /* Centrer */
    padding: 0; /* Supprime le padding inutile */
    background-color: transparent; /* Enlève tout fond noir */
    display: flex; /* Assure un bon alignement */
    align-items: center; /* Aligne verticalement */
    justify-content: center; /* Aligne horizontalement */
}


.search-bar input.form-control {
    max-width: 400px; /* Réduit la largeur */
    border-radius: 20px 0 0 20px; /* Coins arrondis pour une meilleure esthétique */
    height: 40px; /* Réduit la hauteur */
    font-size: 14px; /* Taille de police adaptée */
    padding: 5px 10px; /* Ajuste les marges internes */
}

.search-bar button {
    border-radius: 0 20px 20px 0;
    height: 40px; /* Aligné avec le champ */
    font-size: 14px;
    padding: 5px 15px; /* Ajuste l'espacement */
}


/* Ajout d'un léger fond ombré si nécessaire */
.content-center {
    background: rgba(0, 0, 0, 0.5); /* Légère transparence pour la lisibilité */
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 151px;
}

.content-center .logo {
    max-height: 200px; /* Augmenter la taille du logo */
    width: auto; /* La largeur s'ajuste automatiquement */
    margin-bottom: 20px; /* Espace sous le logo */
}

/* Style du bouton de recherche */
.search-bar .btn {
    background-color: #FFA500;  /* Couleur orange */
    border-color: #FFA500;      /* Bordure orange */
    color: white;               /* Texte en blanc */
    font-weight: bold;          /* Texte en gras */
    border-radius: 8px;         /* Coins arrondis */
    padding: 0 20px;            /* Espacement horizontal */
    height: 50px;               /* Hauteur du bouton */
}

/* Effet au survol */
.search-bar .btn:hover {
    background-color: #e69500;  /* Couleur plus foncée au survol */
    border-color: #e69500;      /* Bordure plus foncée */
}


.img-fluid {
    max-width: 80%;
    height: auto;
}



.logo {
    width: 75%;
}



#client-reviews {
    background-color: #d0cdca24;
}




/* Style pour outil pour réussir */
.tool-item {
    background-color: #f8f9fa; /* Couleur de fond par défaut */
    padding: 20px;
    border-radius: 8px;
    transition: all 0.3s ease; /* Transition pour un hover fluide */
    cursor: pointer;
}

.tool-item i {
    color: #343a40; 
}

.tool-item h5 {
    margin-top: 10px;
    color: #343a40; }

/* Effet hover */
.tool-item:hover {
    background-color: #e69500; 
    color: white;
    transform: translateY(-5px); 
}


.tool-item:hover i {
    color: white;
}

/* Changement du texte au survol */
.tool-item:hover h5 {
    color: white;
}


/* Footer */
footer {
    color: #fff;
    padding: 3rem 0;
}

footer h5 {
    font-size: 1.5rem;
    color: #e17c23db;
}

footer a {
    color: #fff;
    font-weight: 500;
}

footer a:hover {
    color: #ffcc80; /* Light orange */
}

footer .social-links a {
    color: #fff;
    margin-right: 1rem;
}

footer .social-links a:hover {
    color: #ffcc80; /* Light orange */
}


#map {
    height: 500px;
    width: 100%;
    border-radius: 10px;
    margin-bottom: 20px;
  }

  /* Enlever la ligne soulignée des liens */
ul li a {
    text-decoration: none; /* Supprime le soulignement */
}

/* Ajouter un effet de survol */
ul li a:hover {
    color: #FFD700; /* Exemple de changement de couleur au survol (tu peux changer la couleur) */
    text-decoration: none; /* Supprime le soulignement */

}