/*
Theme Name: Mon theme
Author: LoicMaire
Author URI: https://maloclic.fr
Description: My first responsive HTML5 theme
Version: 1.0
*/

* {
  box-sizing: border-box;  /* Il indique que la largeur et la hauteur finales de chaque élément de la page doivent inclure le contenu, le remplissage et la bordure. Par conséquent, cette règle ajoute effectivement le remplissage à l’intérieur de la boîte au lieu de l’extérieur. C'est pour avoir un site responsive*/
}


/* Styles pour l'en-tête */
.header-top {
    position: relative; /* Permet de positionner les éléments enfants absolument */
    background-color: #262633;
    height: 60px;
    margin-top: 0px;
}

/* Styles pour le logo (positionné à gauche) */
.logo {
    position: absolute; /* Position absolue pour le logo */
    left: 20px; /* Espace à gauche de l'en-tête */
    top: 50%; /* Position verticale centrée */
    transform: translateY(-50%); /* Centre verticalement le logo */
}

.logo img {
    height: 30px; /* Assure que l'image du logo ne dépasse pas la hauteur de son conteneur */
    width: 30px;
}

/* Styles pour la barre de recherche (positionnée à droite) */
.search-bar {
    position: absolute; /* Position absolue pour la barre de recherche */
    right: 20px; /* Espace à droite de l'en-tête */
    top: 50%; /* Position verticale centrée */
    transform: translateY(-50%); /* Centre verticalement la barre de recherche */
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 5px;
    padding: 5px;
    height: 20px;
}

.search-bar input[type="text"] {
    border: none;
    padding: 5px;
    width: 150px;
    height: 20px;
}

.search-bar button {
    background-color: transparent;
    border: none;
    color: #262633; /* Couleur du texte du bouton */
    cursor: pointer;
    font-size: 10px;
    padding: 5px 10px;
    border-radius: 5px;
}

/* Styles pour le texte au centre */
.center-text {
    position: absolute; /* Position absolue pour le texte au centre */
    left: 50%; /* Position horizontale centrée */
    top: 50%; /* Position verticale centrée */
    transform: translate(-50%, -50%); /* Centre horizontalement et verticalement le texte */
    text-align: center; /* Centre le texte à l'intérieur du conteneur */
}

.center-text p {
    color: #F8F8FF;
    font-family: "Vivaldi", sans-serif;
    font-size: 35px;
    letter-spacing: 3px;
    margin: 0;
}

/* Styles pour la barre blanche avec l'image */
.white-bar {
    background-color: white;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center; /*utilisé pour centrer horizontalement le contenu*/
}

.center-image img {
    max-height: 40px;
    max-width: 100%;
}

/* Styles pour la barre de menu */
.menu-bar {
    background-color: #262633;
    height: 60px;
    display: flex;
    justify-content: center; /*utilisé pour centrer horizontalement le contenu*/
    align-items: center; /*utilisé pour centrer verticalement le contenu*/
}

/* Styles pour le menu principal */
.main-menu {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.main-menu li {
    margin: 0 15px;
}

/* Styles pour les liens des menus principaux */
.main-menu a {
    color: #FFFFFF;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
}

/* Styles pour les sous-menus */
.submenu {
    display: none; /*on met ça pour que les sous-menus ne s'affichent pas quand on survole pas les menus*/
    position: absolute;
    background-color: #262633;
    list-style: none;
    padding: 10px;
    margin-top: 10px;
}

.has-submenu:hover .submenu { /*pour les sous-menus s'affichent quand on survole*/
    display: block;
}

.submenu li {
    margin: 5px 0;
}

.submenu a {
    color: #FFFFFF;
    text-decoration: none;
}

.footer {
    background-color: #262633;
    color: #FFFFFF;
    padding: 20px 0;
}

.footer-columns {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-column {
    width: calc(33.33% - 20px);
    padding: 0 10px;
    display: flex; /* Ajoute un affichage flex pour centrer le contenu */
    flex-direction: column; /* Empile le contenu verticalement */
    align-items: center; /* Centre le contenu horizontalement */
}

.contenu-footer {
    text-align: center;
}

.titre-footer {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: bold;
}