/* Correctifs de la page d'accueil, chargés après le thème.
   Les sélecteurs sont volontairement doublés (.home-hero .home-hero-title)
   pour passer devant les règles du thème du type `.hero h1`. */
:root {
  --home-max-width: 1100px;
  --home-gutter: 2.4rem;
  --home-accent: #b4573f;
  --home-overlay: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.42));
}

/* ------------------------------------------------------------------ Hero */

.home-hero {
  height: 520px;
  /* Calque sombre plutôt qu'un text-shadow, qui salirait une typo fine.
     La photo est à contre-jour (soleil rasant, herbe claire) : il faut appuyer,
     et le titre passe par-dessus les visages. */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.42)),
    url('/hero/annonce-mobile-900.jpg');
  background-image:
    var(--home-overlay),
    image-set(
      url('/hero/annonce-mobile-900.avif') type('image/avif'),
      url('/hero/annonce-mobile-900.webp') type('image/webp'),
      url('/hero/annonce-mobile-900.jpg') type('image/jpeg')
    );
  /* Les trois fichiers sont déjà recadrés sur le couple : on recentre
     simplement, sans décalage comme l'exigeait la photo du salon. */
  background-position: center;
  /* Les capitales accentuées (LOÏC, ÉVÉNEMENT) sont tronquées sous 1.15. */
  line-height: 1.15;
}

@media (min-width: 700px) {
  .home-hero {
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.42)),
      url('/hero/annonce-wide-1600.jpg');
    background-image:
      var(--home-overlay),
      image-set(
        url('/hero/annonce-wide-1600.avif') type('image/avif'),
        url('/hero/annonce-wide-1600.webp') type('image/webp'),
        url('/hero/annonce-wide-1600.jpg') type('image/jpeg')
      );
    background-position: center;
  }
}

@media (min-width: 1400px) {
  .home-hero {
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.42)),
      url('/hero/annonce-wide-2560.jpg');
    background-image:
      var(--home-overlay),
      image-set(
        url('/hero/annonce-wide-2560.avif') type('image/avif'),
        url('/hero/annonce-wide-2560.webp') type('image/webp'),
        url('/hero/annonce-wide-2560.jpg') type('image/jpeg')
      );
  }
}

.home-hero .hero-inner .inner {
  max-width: var(--home-max-width);
  margin: 0 auto;
  padding: 0 var(--home-gutter);
  text-align: center;
}

.home-hero .home-hero-title {
  font-size: clamp(34px, 7.5vw, 104px);
  line-height: 1.15;
  margin: 0;
  color: #fff;
  overflow-wrap: break-word;
}

.home-hero .home-hero-date {
  /* Police lisible : la display est réservée au titre. */
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-size: clamp(15px, 2.2vw, 24px);
  line-height: 1.4;
  margin: 0.8em 0 0;
  color: #fff;
  opacity: 0.95;
  font-weight: 700;
  letter-spacing: 0.02em;
  /* Ni soulignement ni filet : ça se lisait comme un lien. */
  text-decoration: none;
  border: 0;
}

/* ----------------------------------------------------------------- Menu */

/* Le menu était posé dans une `display: table` : les cellules s'élargissent
   avec leur contenu, donc les libellés débordaient hors de l'écran au lieu
   de passer à la ligne. On repasse en bloc pour que le flex puisse wrapper. */
@media (min-width: 569px) {
  header.header nav .table,
  header.header nav .table-cell {
    display: block;
    width: 100%;
  }

  header.header nav ul.nav-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.15em 1.1em;
    margin: 0;
    padding: 0;
  }

  header.header nav ul.nav-menu li {
    display: inline-block;
    margin-left: 0;
  }
}

/* --------------------------------------------------------------- Contenu */

.home-section {
  max-width: var(--home-max-width);
  margin: 0 auto;
  padding: 3.5rem var(--home-gutter);
}

/* Deux sections qui se suivent n'ont pas besoin de cumuler leurs marges. */
.home-section + .home-section {
  padding-top: 0;
}

.home-section.home-practical {
  padding-top: 3rem;
}

/* La display condensée reste au hero : le corps de page repasse sur une
   police lisible, en casse normale. */
.home-section h2,
.home-section h3 {
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: none;
  line-height: 1.25;
  margin: 0 0 0.6em;
  color: #4a4a4a;
}

.home-section h2 {
  font-size: clamp(24px, 3.2vw, 34px);
}

.home-section h3 {
  font-size: clamp(19px, 2.4vw, 24px);
}

.home-section p,
.home-section li {
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.6;
  /* 65-70 caractères par ligne : au-delà, l'œil accroche mal la ligne suivante. */
  max-width: 62ch;
  text-align: left;
}

.home-section .home-lead {
  font-size: clamp(17px, 2.1vw, 21px);
}

/* -------------------------------------------------------- Photos annonce */

/* Le texte des sections est bridé à 62ch ; les photos, elles, prennent toute
   la largeur de la section. */
.home-section .home-annonce {
  margin: 2.4rem 0 0;
  max-width: none;
}

.home-annonce-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: 1fr;
}

.home-annonce-grid img {
  display: block;
  width: 100%;
  height: 100%;
  /* `cover` sur une hauteur imposée par la grille : sans object-fit les
     portraits et les paysages ne s'alignent pas. */
  object-fit: cover;
  border-radius: 3px;
}

@media (min-width: 700px) {
  .home-annonce-grid {
    /* Le portrait occupe la colonne de gauche sur toute la hauteur, les deux
       paysages s'empilent à droite : les trois rapports d'image cohabitent
       sans recadrage brutal. */
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    aspect-ratio: 3 / 2;
  }

  .home-annonce-grid .home-annonce-main {
    grid-row: span 2;
  }
}

.home-section .home-annonce figcaption {
  margin: 0.9rem 0 0;
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-style: italic;
  opacity: 0.75;
  text-align: center;
}

/* ------------------------------------------------------------------- CTA */

.home-cta {
  margin: 0.5rem 0 0;
}

/* Le thème impose color/border/text-decoration en !important sur tous les
   `button` : il faut le même poids pour repasser devant. */
.home-section .home-cta-button {
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 700;
  /* Bouton plein : le contour fin n'a presque aucune affordance sur fond clair. */
  background-color: var(--home-accent);
  color: #fff !important;
  border: 2px solid var(--home-accent) !important;
  border-radius: 6px;
  padding: 0.85em 1.6em;
  cursor: pointer;
  text-transform: none;
  line-height: 1.2;
}

.home-section .home-cta-button:hover,
.home-section .home-cta-button:focus-visible {
  background-color: #94422f;
  border-color: #94422f !important;
  color: #fff !important;
}

.home-section .home-cta-secondary {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-size: clamp(15px, 1.8vw, 17px);
  font-weight: 400;
  /* Un lien, pas un bouton : ni contour ni pastille arrondie. */
  text-decoration: underline !important;
  text-transform: none;
  background: none;
  border: 0 !important;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  color: #5a5a5a !important;
}

.home-section .home-cta-note {
  margin: 1.4rem 0 0;
  font-size: clamp(14px, 1.7vw, 16px);
  line-height: 1.5;
  color: #666;
  max-width: 52ch;
}

.home-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

/* ------------------------------------------------------- Infos pratiques */

.home-practical {
  border-top: 1px solid #e0ddd8;
}

.home-practical ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.home-practical li {
  margin-bottom: 1em;
}