/* Importation depuis Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700&family=Inter:ital,wght@0,400;0,600;1,400&display=swap');

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

h1, h2, h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  color: #c41e1e;
  letter-spacing: -0.02em;
}
body {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #2c3e50;
}

#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 12px;
}
#Logo img {
  display: block;
  /* Assez grand pour lire le texte sous le dessin du logo (demande Serge 2026-08-21). */
  height: 128px;
  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.5rem;
  text-decoration: none;
  color: inherit;
}
#MenuPrincipal > ul > li.actif > a {
  font-weight: bold;
  color: #a51818;
}
/* --- 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: 1rem;
  text-decoration: none;
  color: inherit;
}
#MenuSecondaire li.actif > a {
  font-weight: bold;
  color: #a51818;
}
/* 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) --- */
/* NavFiche est second dans le HTML (après le h1) mais affiché en premier via column-reverse --
   sa position reste fixe même quand le titre est long et prend plusieurs lignes (demande Serge
   2026-09-03 -- avant, les deux étaient sur une même ligne flex space-between, et un titre trop
   long renvoyait NavFiche plus bas de façon imprévisible). */
.EnteteFiche {
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
}
.EnteteFiche h1 {
  margin: 0;
}
.NavFiche {
  display: flex;
  gap: 16px;
  white-space: nowrap;
}
.NavFiche .Inactif {
  color: #ccc;
}

/* Fiche Maison — grille 2 colonnes 40/60 (demande Serge 2026-09-03) : colonne média (photo, vidéo,
   coordonnées) à gauche, colonne texte (description, caractéristiques) à droite. En mobile, la
   colonne média au complet précède la colonne texte au complet (ordre du HTML, voir règle mobile
   plus bas) — pas d'entrelacement des deux groupes de champs. */
.FicheMaisonGrille {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 24px;
  align-items: start;
  margin: 16px 0 24px;
}
.ColonneMaisonMedia,
.ColonneMaisonTexte {
  min-width: 0;
}
/* 400x265 = format standard des Photo.jpg (Serge a redimensionné toutes les photos des Maisons à
   cette taille exacte le 2026-09-03 -- Vignette.jpg, 320x212, plus petite, reste réservée à
   d'autres usages, ex: listes/miniatures admin). max-width plutôt que width fixe : la colonne
   média (40%) peut devenir plus étroite que 400px selon la largeur de l'écran -- object-fit:cover
   recadre si jamais une photo ne fait pas exactement ce format. */
.PhotoMaisonCadre {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 400 / 265;
  overflow: hidden;
  margin-bottom: 16px;
}
.PhotoMaisonCadre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Sans ça, la marge du haut du premier élément du HTML riche (ex: un <p> collé par CKEditor)
   "remonte" à travers .DescriptionMaison (collapsing margin) -- le haut du texte n'était pas
   aligné avec le haut de la photo (demande Serge 2026-09-03). */
.DescriptionMaison > *:first-child {
  margin-top: 0;
}
.DescriptionMaison {
  margin-bottom: 16px;
}
/* Coordonnées (les deux <dl class="CoordonneesMaison"> : Vidéo/Adresse/Téléphone/Courriel/Site
   web/Facebook dans la colonne média, Région/Nombre de lits/Clientèle dans la colonne texte). */
.CoordonneesMaison {
  margin: 0;
}
.CoordonneesMaison dt {
  font-weight: bold;
  margin-top: 10px;
}
.CoordonneesMaison dt:first-child {
  margin-top: 0;
}
.CoordonneesMaison dd {
  margin: 2px 0 0;
}

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

/* --- Pages éditoriales : mise en page multi-colonnes (texte collé dans une page statique,
   éventuellement réouverte dans CKEditor pour modification — voir "Qu'est-ce qu'une Maison
   Gilles-Carle ?", 2026-09-03). Classes génériques, réutilisables pour d'autres pages du même
   genre : chaque section de contenu choisit son ratio de colonnes via une classe modificatrice
   ajoutée à .MiseEnPage. --- */
.MiseEnPage {
  display: grid;
  gap: 24px;
  align-items: start;
  margin: 24px 0;
}
.MiseEnPage-2-60-40 {
  grid-template-columns: 60% 40%;
}
.MiseEnPage-2-25-75 {
  grid-template-columns: 25% 75%;
}
.MiseEnPage-2-Egales {
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
.MiseEnPage-3-Egales {
  grid-template-columns: repeat(3, 1fr);
}
.BlocCentre {
  max-width: 720px;
  margin: 24px auto;
  text-align: center;
}
.ColonneService img {
  width: 100%;
  height: auto;
  margin-bottom: 8px;
}
.ColonneService h3 {
  margin-top: 0;
}

@media (max-width: 768px) {
  .VedetteLien {
    flex-direction: column;
  }
  .VedetteImage {
    width: 100%;
  }
  .FicheMaisonGrille {
    grid-template-columns: 100%;
  }
  .ActualitesRecentes .ListeActualites,
  .InfolettresRecentes .ListeActualites,
  .Temoignages .ListeActualites {
    grid-template-columns: 100%;
    row-gap: 16px;
  }
  .ListeVitrine {
    grid-template-columns: 100%;
  }
  .MiseEnPage {
    grid-template-columns: 100% !important;
  }
  .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;
  }
}