/* Conteneur principal pour centrer */
.container {
    display: flex; /* Active le flexbox */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement si nécessaire */
    min-height: 100vh; /* Optionnel : hauteur du conteneur */
}

/* Styles pour l'article-une */
.article-une {
    background: linear-gradient(to bottom, #f9f9f9, #e8e8e8); /* Fond dégradé clair */
    border-radius: 20px; /* Coins arrondis */
    padding: 20px; /* Espacement interne */
    margin: 0 auto 20px auto; /* Centre l'article automatiquement horizontalement */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ombre légère */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* Transitions pour l'effet */
    width: 70%; /* Taille de l'article */
    height: auto; /* Garde les proportions */
}

/* Effet au survol */
.article-une:hover {
    transform: translateY(-5px); /* Légère montée au survol */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); /* Ombre plus prononcée */
    background: linear-gradient(to bottom, #e8f0fe, #d1e3ff); /* Fond bleu clair au survol */
}

/* Image dans l'article */
.article-une img {
    border-radius: 20px; /* Coins arrondis pour l'image */
    width: 100%; /* Image responsive */
    height: auto; /* Garde les proportions */
    transition: transform 0.3s ease; /* Animation pour l'image */
}

/* Effet de zoom sur l'image au survol */
.article-une img:hover {
    transform: scale(1.05); /* Zoom léger */
}

/* Bouton "Lire la suite" avec style personnalisé */
.article-une .read-more {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 15px;
    background-color: #007BFF; /* Bleu */
    color: white;
    text-decoration: none;
    border-radius: 5px; /* Coins arrondis */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Animation */
}

/* Effet sur le bouton au survol */
.article-une .read-more:hover {
    background-color: #0056b3; /* Bleu foncé */
    transform: scale(1.1); /* Agrandissement du bouton */
}



/* Styles globaux pour les articles */
.article {
    border: 1px solid #ccc; /* Bordure grise */
    border-radius: 20px; /* Coins arrondis */
    padding: 20px; /* Espacement interne */
    margin: 0 auto 5px auto; /* Centre horizontalement si nécessaire */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Légère ombre */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition pour l'effet de survol */
    width: 60%; /* Diminue la largeur à 80% de la taille du parent */
    max-width: 900px; /* Limite la largeur maximale */
}

/* Effet au survol */
.article:hover {
    transform: scale(1.03); /* Légère augmentation de taille */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Ombre plus prononcée */
}

/* Bouton "Lire la suite" avec style personnalisé */
.read-more {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 15px;
    background-color: #007BFF; /* Bleu */
    color: white;
    text-decoration: none;
    border-radius: 5px; /* Coins arrondis */
    transition: background-color 0.3s ease; /* Transition au survol */
}

.read-more:hover {
    background-color: #0056b3; /* Bleu plus foncé au survol */
}

/* Style général de la navbar */
.navbar {
  display: flex; /* Permet d'aligner les menus */
  justify-content: space-between; /* Sépare les menus gauche et droite */
  align-items: center; /* Aligne les éléments verticalement */
  background-color: #80808080; /* Gris avec 50% de transparence */
  padding: 0.5px 20px; /* Réduit l'espace intérieur */
  height: auto; /* Ajuste la hauteur automatiquement */
}

/* Style du menu */
.menu {
  list-style: none;
  display: flex; /* Les éléments des menus sont en ligne */
  padding: 0;
  margin: 0;
}

.menu li {
  margin: 0 10px;
}

/* Style des liens */
.menu .menuLink,
.menu a {
  text-decoration: none;
  font-size: 16px; /* Réduit légèrement la taille des liens */
  font-weight: bold;
  color: #333;
  padding: 5px 10px;
  display: flex; /* Pour aligner l'image avec le texte */
  align-items: center; /* Centrer l'image et le texte */
}

/* Réduction de l'image du dropdown */
.menuLink img {
  width: 20px; /* Réduit la largeur de l'image */
  height: auto; /* Garde les proportions */
  margin-right: 5px; /* Ajoute un espace entre l'image et le texte */
}

/* Style du dropdown */
.dropdown {
  position: relative; /* Nécessaire pour positionner le sous-menu */
}

.submenu {
  display: none; /* Le sous-menu est caché par défaut */
  position: absolute;
  top: 100%; /* S'affiche juste en dessous du menu parent */
  left: 0;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #ddd;
  z-index: 1000;
}

.submenu li {
  padding: 10px;
}

.submenu li a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
}

.submenu li a:hover {
  background-color: #ddd;
}

/* Affiche le sous-menu au survol */
.dropdown:hover .submenu {
  display: block;
}

/* Responsive design pour petits écrans */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column; /* Affiche les menus en colonne */
    align-items: flex-start;
  }

  .menu {
    flex-direction: column; /* Les menus passent en mode colonne */
  }

  .submenu {
    position: static; /* Sous-menu affiché comme une partie intégrante */
    width: 100%;
  }
}