/* 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;
}

/* --- En-tête : logo + menu principal, ensemble collant en haut --- */
header {
  position: sticky;
  top: 0;
  z-index: 200;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  /* Même marge horizontale que #Contenu (40px), un peu d'air vertical pour ne pas coller au bord
     de la fenêtre (demande Serge 2026-08-21). */
  padding: 16px 40px;
}
#Logo img {
  display: block;
  /* Assez grand pour lire le texte sous le dessin du logo (demande Serge 2026-08-21). */
  height: 96px;
  width: auto;
}
#MenuPrincipal {
  flex: 1;
}
#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: 1.25rem;
  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 de l'en-tête (logo + menu principal) change (ex:
     retour à la ligne, logo redimensionné) — estimée à vue (logo 96px + padding 16px haut/bas),
     à vérifier visuellement après déploiement. */
  top: 128px;
  align-self: flex-start;
  max-height: calc(100vh - 128px);
  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;
  /* Même budget de hauteur que #MenuSecondaire (top:128px, voir son commentaire) pour que l'en-tête
     reste toujours visible : le défilement se fait dans Contenu, pas dans la page. */
  max-height: calc(100vh - 128px);
  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;
}

/* --- Accueil : blocs de sections (Vitrine, Messages, Journal de bord, Actualités, Infolettres,
   Vidéo, Témoignages, Dons planifiés, Footer) — même philosophie structure-seulement que le reste
   de ce fichier ; couleurs/habillage définitif à faire plus tard. --- */

/* Vitrine — grille statique 2 colonnes "above the fold" (remplace le carrousel automatique de
   l'ancien site Yapla, demande Serge 2026-08-21). Contenu = bloc HTML complet par carte (le
   <h3>/<p> vient du Texte collé, pas de classes dédiées pour le titre). */
.ListeVitrine {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.ItemVitrine {
  display: flex;
  flex-direction: column;
}
.IllustrationVitrine {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 8px;
}

/* Image largeur fixe, hauteur variable (ratio conservé) — Actualités récentes et Infolettres
   récentes partagent cette classe pour rester visuellement identiques (demande Serge 2026-08-20). */
.IllustrationActualite {
  width: 320px;
  height: auto;
  display: block;
  margin-bottom: 8px;
}

.ListeMessages {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ItemMessage {
  margin-bottom: 16px;
}

/* Actualités récentes / Infolettres récentes (accueil seulement) : côte-à-côte sur une même
   rangée (demande Serge 2026-08-20 ~13h39). Marges gauche/droite = celles du reste de la page
   (héritées de #Contenu, rien à ajouter ici — le 1er essai à 10%/10% en plus était redondant,
   corrigé ~13h56). 3 colonnes égales (1fr) + gouttière fixe en pixels ronds entre elles plutôt
   qu'en % (évite les fractions de pixel signalées par Serge). Scopé à
   .ActualitesRecentes/.InfolettresRecentes (pas .ListeActualites/.ItemActualite tout court,
   réutilisées telles quelles — empilées — par la page complète Actualités, voir
   gabarits/actualites.php). */
.ActualitesRecentes .ListeActualites,
.InfolettresRecentes .ListeActualites,
.Temoignages .ListeActualites {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
}
/* L'image occupe 100% de sa colonne (plutôt que la largeur fixe 320px par défaut). */
.ActualitesRecentes .ItemActualite .IllustrationActualite,
.InfolettresRecentes .ItemActualite .IllustrationActualite,
.Temoignages .ItemActualite .IllustrationActualite {
  width: 100%;
}

/* Journal de bord — vedette : une seule entrée en grand format (reprend la mise en page de l'ancien
   bloc Manchette, appliquée maintenant à mgc_lst_journal plutôt qu'aux Actualités). */
.JournalVedette {
  margin-bottom: 24px;
}
.VedetteLien {
  display: flex;
  gap: 24px;
}
.VedetteImage {
  width: 320px;
  height: auto;
  flex-shrink: 0;
}
.VedetteTexte h3 {
  margin-top: 4px;
}

/* Vidéo vedette — lecteur intégré, largeur pleine, ratio 16:9 préservé sans hauteur fixe. */
.VideoEmbed {
  position: relative;
  width: 100%;
  max-width: 720px;
  padding-top: 40.5%; /* 720 x 405 = 16:9 sur max-width 720px */
}
.VideoEmbed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Footer — bande fond foncé, 3 colonnes (abonnement infolettre / don / coordonnées). Seule section
   du site à recevoir une couleur définitive pour l'instant (demande explicite Serge 2026-08-21) —
   le reste de l'habillage couleur reste à faire plus tard (voir en-tête du fichier). */
.Footer {
  margin-top: 32px;
  padding: 40px;
  background-color: #282e33;
  color: #fff;
}
.Footer a {
  color: #fff;
}
.FooterColonnes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.FooterAbonnement h3 {
  margin-top: 0;
}
.FooterAbonnement label {
  display: block;
  font-weight: bold;
  margin-bottom: 6px;
}
.FooterAbonnement input[type="email"] {
  display: block;
  width: 100%;
  max-width: 320px;
  padding: 10px;
  margin-bottom: 12px;
  border: none;
  border-radius: 2px;
}
.FooterAbonnement button {
  background-color: #fff;
  color: #282e33;
  border: none;
  padding: 12px 24px;
  font-weight: bold;
  cursor: pointer;
}
.FooterDon {
  text-align: center;
}
.BoutonDon {
  display: inline-block;
  background-color: #c41e1e;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  width: 150px;
  height: 150px;
  line-height: 1.3;
  border-radius: 50%;
  padding-top: 55px;
}
.BoutonDon:hover {
  background-color: #a51818;
}
.FooterCoordonnees h3 {
  margin-top: 0;
}
.FooterCoordonnees p {
  margin: 0;
}
.MsgAbonnement {
  background-color: #fff;
  color: #282e33;
  padding: 12px 16px;
  margin: 0 0 16px 0;
  border-radius: 2px;
}
.MsgAbonnement.MsgErreur {
  background-color: #c41e1e;
  color: #fff;
}

@media (max-width: 768px) {
  .VedetteLien {
    flex-direction: column;
  }
  .VedetteImage {
    width: 100%;
  }
  .ActualitesRecentes .ListeActualites,
  .InfolettresRecentes .ListeActualites,
  .Temoignages .ListeActualites {
    grid-template-columns: 100%;
    row-gap: 16px;
  }
  .ListeVitrine {
    grid-template-columns: 100%;
  }
  .FooterColonnes {
    flex-direction: column;
    text-align: center;
  }
}

/* --- 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;
  }
}