/* =============================================================================
   PAGE D'ACCUEIL — themes/eman/index.php
   =============================================================================
   Une des trois zones de la page, avec la barre de menu (menu.css) et le pied
   de page (footer.css). Ce fichier ne contient QUE l'accueil : rien ici ne
   s'applique ailleurs, rien d'ailleurs ne s'applique ici.

   Convention : toutes les regles sont prefixees par `#home` (l'id du <body>,
   pose par index.php) et ciblent une classe. Deux niveaux, jamais plus.
   La structure de la page :

     #home .home-section        chaque bloc de la page
       .home-presentation       portrait + nom du projet + texte d'accueil
       .home-carousel           carrousel d'images
       .home-collection         un corpus mis en avant (repete)
       .home-exhibit            exposition mise en avant
       .home-map                carte Cartomac

   Les blocs de texte (presentation, corpus, exposition) portent en plus
   .eman-card (cards.css) : aucun panneau n'est redessine ici. Un bloc qui ne
   porte pas la classe (carrousel, carte) reste a nu.
   ========================================================================== */


/* !---------- Rythme commun ---------------------------------------------- */

/* L'espace sous chaque bloc, par la variable de cards.css plutot que par une
   regle propre. */
#home .home-section {
  --eman-card-gap: 1.5em;
}


/* !---------- Presentation : portrait, nom du projet, texte d'accueil ------ */

/* Le bloc de tete : deux colonnes, portrait a gauche, texte a droite. */
#home .home-presentation {
  display: flex;
  align-items: stretch;
  gap: 1.5em;
}

/* La colonne du portrait. Sa largeur est une part de la ligne, bornee par
   clamp() : avec `flex: 0 0 auto`, elle se dimensionnait sur l'image, dont la
   largeur suivait la hauteur du texte — sur une fenetre etroite le portrait
   s'elargissait donc jusqu'a manger la gouttiere et mordre sur le texte. */
#home .home-presentation__logo {
  flex: 0 1 clamp(160px, 34%, 420px);
  display: block;
  min-width: 0;
  min-height: 0;
}

/* Le portrait : il remplit sa colonne et prend la hauteur du bloc, que fixe le
   texte a cote. */
#home .home-presentation__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top left;
}

/* La colonne du texte : elle occupe le reste. min-width: 0 sinon un mot long
   l'elargit au lieu de se couper. */
#home .home-presentation__body {
  flex: 1;
  min-width: 0;
}

/* Le nom du projet (option de theme « site_tagline »). */
#home .home-presentation__title {
  margin: 0 0 0.5em;
  font-family: "Philosopher", arial, sans-serif;
  font-size: 2em;
  line-height: 1.2;
  text-align: left;
}

/* Le texte d'accueil (option de theme « Homepage Text ») et ses paragraphes. */
#home .home-presentation__text {
  padding-top: 0.75em;
  border-top: 1px solid var(--eman-filet);
}

#home .home-presentation__text p:first-child {
  margin-top: 0;
}

#home .home-presentation__text p:last-child {
  margin-bottom: 0;
}


/* !---------- Carrousel ---------------------------------------------------- */

/* Le carrousel, rendu par le shortcode [carousel] du plugin ShortcodeCarousel. */
#home .home-carousel .eman-carousel {
  margin: 0;
}

/* Un peu d'air sous le carrousel, en plus de l'espace commun aux blocs : la
   rangee d'images touchait presque le corpus mis en avant qui la suit. */
#home .home-carousel {
  padding-bottom: 1.5em;
}

#home .home-carousel .eman-carousel__viewport {
  padding-bottom: 0.35rem;
}


/* !---------- Corpus mis en avant ------------------------------------------ */

/* Un corpus mis en avant : une grille titre / portrait / extrait. */
#home .home-collection {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "titre  titre"
    "photo  texte";
  column-gap: 1.5em;
  align-items: start;
}

#home .home-collection__title {
  grid-area: titre;
  margin: 0 0 0.5em;
  font-weight: 400;
  text-transform: none;
}

#home .home-collection__portrait {
  grid-area: photo;
  display: block;
  width: 100px;
  height: auto;
  border: 1px solid var(--eman-filet);
}

/* L'extrait. Sans portrait, la colonne de gauche se reduit a zero d'elle-meme. */
#home .home-collection__excerpt {
  grid-area: texte;
  margin: 0;
}

#home .home-collection__more {
  white-space: nowrap;
}


/* !---------- Carte Cartomac ----------------------------------------------- */

#home .home-map iframe {
  display: block;
  width: 100%;
  height: 500px;
  border: 0;
}


/* !---------- Ecrans etroits ------------------------------------------------ */

@media screen and (max-width: 768px) {
  /* Les corpus : le portrait repasse au-dessus de l'extrait. */
  #home .home-collection {
    grid-template-columns: 1fr;
    grid-template-areas:
      "titre"
      "photo"
      "texte";
    row-gap: 0.75em;
  }

  /* La tete de page : le portrait repasse au-dessus du texte. */
  #home .home-presentation {
    display: block;
  }

  #home .home-presentation__logo img {
    height: auto;
    max-width: 100%;
    margin-bottom: 1em;
  }

  #home .home-presentation__title {
    font-size: 1.5em;
  }
}