/* Site public MGC — structure, positionnement, lisibilité.
   Couleurs et habillage définitif : à faire plus tard (voir projet2/CLAUDE.md, "Prototype front-end"). */

/* Sans ceci, le padding de #Contenu/#MenuSecondaire s'ajoute par-dessus leur max-height (au lieu
   d'être inclus dedans) — la page déborde alors de la hauteur de la fenêtre et une 2e barre de
   défilement apparaît au niveau de la fenêtre, qui fait sortir #MenuPrincipal de l'écran en
   défilant (il est sticky par rapport à la fenêtre, pas par rapport à #Contenu). Bug rapporté par
   Serge 2026-07-28 ~16h25, révélé par l'augmentation du padding de #Contenu la même session. */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

#Contenu {
  padding: 40px;
}

/* --- Menu principal horizontal --- */
#MenuPrincipal {
  position: sticky;
  top: 0;
  z-index: 200;
  background-color: #ffffff;
}
#MenuPrincipal ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
#MenuPrincipal > ul > li > a {
  display: block;
  padding: 14px 18px;
  font-size: 1rem;
  text-decoration: none;
  color: inherit;
}
#MenuPrincipal > ul > li.actif > a {
  font-weight: bold;
}
/* --- Layout 2 colonnes --- */
#DeuxColonnes {
  display: flex;
  align-items: flex-start;
}
#MenuSecondaire {
  flex-shrink: 0;
  width: 400px;
  position: sticky;
  /* Ajuster cette valeur si la hauteur réelle du menu principal change (ex: retour à la ligne). */
  top: 52px;
  align-self: flex-start;
  max-height: calc(100vh - 52px);
  overflow-y: auto;
  padding: 15px;
}
#MenuSecondaire ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#MenuSecondaire li {
  margin-bottom: 4px;
}
#MenuSecondaire li a {
  display: block;
  padding: 6px 4px;
  font-size: 0.95rem;
  text-decoration: none;
  color: inherit;
}
#MenuSecondaire li.actif > a {
  font-weight: bold;
}
/* Grille des lettres (Actualités, Par groupe > Alphabétique) — surcharge #MenuSecondaire li a
   (display:block) pour aligner les lettres en ligne plutôt qu'une par ligne. */
#MenuSecondaire .GrilleAlphabet {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0 8px;
}
#MenuSecondaire .GrilleAlphabet a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 0.85rem;
  text-decoration: none;
  border-radius: 3px;
}
#MenuSecondaire .GrilleAlphabet a.sansResultats {
  color: #ccc;
}
#MenuSecondaire .GrilleAlphabet a.avecResultats {
  color: #222;
  font-weight: bold;
}
#MenuSecondaire .GrilleAlphabet a.actif {
  background-color: #ddd;
}
/* Arbre hiérarchique (Actualités, Par groupe/personne > Par Type) — indentation croissante par
   niveau (chaque ul imbriqué ajoute son propre padding) + petit triangle plein/vide plutôt qu'une puce */
#MenuSecondaire .ArbreHierarchique ul {
  padding-left: 14px;
  margin: 2px 0;
}
#MenuSecondaire .ArbreHierarchique .Triangle {
  display: inline-block;
  width: 0.9em;
  font-size: 0.7em;
  color: #999;
}
/* Onglet accordéon (ex: "Liste" des Maisons) — les items qu'il déplie sont décalés et un peu
   plus petits que les items de premier niveau du menu secondaire, même principe que
   .ArbreHierarchique ci-dessus. */
#MenuSecondaire .OngletMenu > details > summary {
  cursor: pointer;
}
#MenuSecondaire .OngletMenu > details > ul {
  padding-left: 14px;
  margin: 2px 0 0;
}
#MenuSecondaire .OngletMenu > details > ul li a {
  font-size: 0.85rem;
}
#Contenu {
  flex: 1;
  /* Meme budget de hauteur que #MenuSecondaire (top:52px) pour que #MenuPrincipal
     reste toujours visible : le défilement se fait dans Contenu, pas dans la page. */
  max-height: calc(100vh - 52px);
  overflow-y: auto;
  padding-right: 56px;
}
#Contenu img {
  max-width: 100%;
  height: auto;
}
/* Pages copiées depuis Yapla : les div .container/.row/.col-sm-* portent des largeurs
   fixes en pixels (style inline, ex: width:1310px) qui ignorent #Contenu et débordent.
   max-width prime sur width même si width est plus grand : ceci les force à rentrer. */
#Contenu * {
  max-width: 100% !important;
}

/* --- Actualités --- */
.DescriptionSujet {
  margin: 8px 0 16px;
  color: #444;
}
.ActualitesToolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.FormatActu {
  margin: 0;
}
.ListeActualites {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ItemActualite .DateActualite {
  color: #666;
  font-size: 0.9em;
}
.ItemActualite .ChapeauActualite {
  margin-top: 6px;
}

/* --- Fiche avec navigation précédente/suivante (Maisons, Infolettres) --- */
.EnteteFiche {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.EnteteFiche h1 {
  margin: 0;
}
.NavFiche {
  display: flex;
  gap: 16px;
  white-space: nowrap;
}
.NavFiche .Inactif {
  color: #ccc;
}

/* --- Infolettres --- */
.ContenuInfolettre {
  display: block;
  width: 100%;
  height: 80vh;
  border: 1px solid #ddd;
  margin-top: 10px;
}

/* --- Mobile (structure seulement) --- */
@media (max-width: 768px) {
  #MenuPrincipal > ul {
    flex-direction: column;
  }
  #DeuxColonnes {
    flex-direction: column;
  }
  #MenuSecondaire {
    width: 100%;
    position: static;
    max-height: none;
  }
  #Contenu {
    max-height: none;
    overflow-y: visible;
    padding-right: 20px;
  }
}