/* ==========================================================================
   Gabarit accueil. Valeurs relevées sur le prototype.
   ========================================================================== */

.accueil { display: flex; flex-direction: column; }

/* Rythme vertical du prototype : SEULE la première section porte un padding
   haut. Les suivantes n'ont que du padding bas — sinon 96 px de bas plus 96 px
   de haut font 192 px entre chaque bloc, et la page se délite. */
.accueil > section {
  max-width: var(--largeur-site);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--esp-12) var(--esp-24);
}
.accueil > .portes { padding-top: var(--esp-24); }

/* En-tête de section : titre à 48 px, action alignée sur la ligne de base. */
.entete-section {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--esp-8); flex-wrap: wrap;
  margin-bottom: var(--esp-6);
}
.entete-section h2 { font-size: var(--taille-h1); }
.lien-section {
  display: inline-flex; align-items: center;
  min-height: var(--cible-tactile-min);
  font-size: var(--taille-corps); font-weight: var(--poids-medium);
}

/* --- Bandeau d'ouverture ---------------------------------------------------- */
/* Sélecteur plus spécifique que `.accueil > section` : sans ça le bandeau
   hérite du padding des sections et perd son plein format. */
.accueil > .hero {
  position: relative;
  max-width: none;
  padding: 0;
  height: 620px;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background-color: var(--vert-coteau);
  background-image: url("/statique/images/motifs/filigrane-blanc.svg");
  background-repeat: repeat;
  background-size: 120px auto;
}
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__logo { position: absolute; left: var(--esp-12); top: var(--esp-12); z-index: 2; width: 220px; }
.hero__logo img { width: 100%; height: auto; }

/* Le voile assure le contraste du titre sur une photo dont on ne connaît pas
   encore les valeurs. Valeurs du prototype. */
.hero__voile {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(63, 70, 46, 0) 38%,
    rgba(63, 70, 46, 0.55) 62%,
    rgba(63, 70, 46, 0.88) 100%);
}
.hero__texte {
  position: relative;
  width: 100%;
  max-width: var(--largeur-site);
  margin: 0 auto;
  padding: var(--esp-12);
  color: var(--creme-calcaire);
  display: flex; flex-direction: column; gap: var(--esp-6);
}
.hero__sous-titre { font-size: var(--taille-h3); line-height: 1.5; max-width: 40ch; }
.hero__actions { display: flex; gap: var(--esp-4); flex-wrap: wrap; }

/* --- Trois portes d'entrée -------------------------------------------------- */
.portes__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-6); }
.porte {
  display: flex; flex-direction: column; gap: var(--esp-4);
  padding: var(--esp-8);
  border-radius: var(--rayon);
  background: var(--surface);
  color: var(--vert-profond);
  text-decoration: none;
}
.porte__icone { color: var(--vert-coteau); }
.porte__titre {
  font-family: var(--font-titre);
  font-weight: var(--poids-semibold);
  font-optical-sizing: auto;
  font-size: var(--taille-h2);
  line-height: var(--interligne-titre);
}
.porte__texte { line-height: var(--interligne-corps); }

/* --- Aperçu de carte --------------------------------------------------------
   Statique. Leaflet n'est pas chargé ici : c'est du poids inutile sur la page
   la plus visitée, et un clic suffit à ouvrir la vraie carte. */
.apercu__carte {
  position: relative;
  display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--surface);
  color: var(--vert-profond);
}
.apercu__etapes { list-style: none; margin: 0; padding: var(--esp-6); display: flex; flex-direction: column; }
.apercu__etapes li { display: flex; flex-direction: column; gap: 2px; padding: var(--esp-3) 0; border-bottom: 1px solid rgba(104, 112, 80, 0.25); }
.apercu__numero { font-size: var(--taille-legende); font-weight: var(--poids-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--vert-coteau); }
.apercu__nom { font-size: var(--taille-corps); font-weight: var(--poids-semibold); }
.apercu__chiffres { font-size: var(--taille-nav); }
.apercu__etapes .apercu__total { border-bottom: 0; padding-top: var(--esp-4); font-family: var(--font-titre); font-size: var(--taille-h1); line-height: 1; color: var(--vert-coteau); }
.apercu__leaflet { position: relative; min-height: 560px; background: var(--vert-pale); }
.apercu__leaflet--active { z-index: 0; }
.apercu__etapes li[data-etape-ligne] { margin: 0 calc(-1 * var(--esp-3)); padding-left: var(--esp-3); padding-right: var(--esp-3); border-radius: var(--rayon-petit); }
a.apercu__nom { display: inline-flex; align-items: center; min-height: var(--cible-tactile-min); color: inherit; text-decoration-color: rgba(104, 112, 80, 0.5); }
/* Étape survolée, dans la liste ou sur la carte. */
.apercu__etape--active { background: var(--vert-pale); }

/* Schéma de repli, visible avant le chargement de la carte et sans script. */
.schema { position: relative; display: block; }
.schema--portrait { aspect-ratio: 390 / 560; max-height: 560px; margin: 0 auto; }
.schema__dessin { display: block; width: 100%; height: 100%; }
.schema__trace { fill: none; stroke: var(--vert-coteau); stroke-linecap: round; stroke-linejoin: round; }
.schema__trace--partiel { stroke-dasharray: 1 15; }
.schema__borne { fill: var(--creme-calcaire); stroke: var(--vert-profond); }
.schema__nom { position: absolute; font-size: var(--taille-nav); font-weight: var(--poids-semibold); line-height: 1.2; white-space: nowrap; }
.schema__nom--droite { transform: translate(16px, -50%); }
.schema__nom--gauche { transform: translate(calc(-100% - 16px), -50%); }

/* --- Le réseau en constitution ----------------------------------------------
   Aplat vert coteau, texte crème, bouton crème. C'est le seul bloc plein de la
   page : il porte l'aveu d'un réseau encore incomplet, autant l'assumer. */
.reseau {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-12);
  padding: var(--esp-12);
  border-radius: var(--rayon);
  background: var(--vert-coteau);
  color: var(--creme-calcaire);
}
.reseau__propos { display: flex; align-items: flex-start; gap: var(--esp-6); max-width: var(--largeur-lecture); }
.reseau__symbole {
  display: block; width: 72px; height: 72px; flex: none;
  border-radius: 14px; overflow: hidden;
  background: var(--creme-haut);
}
.reseau__symbole img { width: 100%; height: 100%; }
.reseau__texte { display: flex; flex-direction: column; gap: var(--esp-2); }
.reseau__texte h2 { font-size: var(--taille-h2); color: var(--creme-calcaire); }
.reseau .bouton--secondaire { flex: none; border-color: transparent; }

/* --- Trois idées de séjours -------------------------------------------------- */
.sejours__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-6); }
.sejour {
  display: flex; flex-direction: column;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--surface);
  color: var(--vert-profond);
  text-decoration: none;
}
.sejour__visuel { display: block; height: 180px; }
.sejour__corps { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-6); }
/* La distance est un sur-titre, pas un grand nombre : 15 px en capitales. */
.sejour__distance {
  font-size: var(--taille-legende);
  font-weight: var(--poids-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sejour__titre {
  font-family: var(--font-titre);
  font-weight: var(--poids-semibold);
  font-optical-sizing: auto;
  font-size: var(--taille-h2);
  line-height: var(--interligne-titre);
}
.sejour__texte { line-height: var(--interligne-corps); }
.sejour__services { display: flex; gap: var(--esp-3); margin-top: var(--esp-2); color: var(--vert-coteau); }

/* --- Journal -----------------------------------------------------------------
   Deux pavés vert pâle, titre et date sur la même ligne de base. Ce sont des
   renvois, pas des fiches : ni photo, ni vignette. */
.journal-accueil__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-6); }
.entree {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--esp-6);
  padding: var(--esp-8);
  border-radius: var(--rayon);
  background: var(--vert-pale);
  color: var(--vert-profond);
  text-decoration: none;
}
.entree__titre {
  font-family: var(--font-titre);
  font-weight: var(--poids-semibold);
  font-optical-sizing: auto;
  font-size: var(--taille-h2);
  line-height: var(--interligne-titre);
}
.entree__date { font-size: var(--taille-nav); white-space: nowrap; }

@media (max-width: 900px) {
  .accueil > section { padding: 0 var(--esp-4) var(--esp-12); }
  .accueil > .portes { padding-top: var(--esp-12); }

  .accueil > .hero { height: 480px; }
  .hero__texte { padding: var(--esp-6) var(--esp-4); }
  .hero__logo { left: var(--esp-4); top: var(--esp-4); width: 150px; }
  .hero__sous-titre { font-size: var(--taille-corps); }
  .hero__actions .bouton { flex: 1 1 100%; justify-content: center; }

  .entete-section { align-items: flex-start; }
  .entete-section h2 { font-size: var(--taille-h2); }

  /* Pile, et non défilement horizontal : pas de carrousel, et rien qui se
     découvre au geste sur une page qui doit se comprendre d'un coup d'œil. */
  .portes__grille,
  .sejours__grille,
  .journal-accueil__grille { grid-template-columns: 1fr; }

  .apercu__carte { grid-template-columns: 1fr; }
  .apercu__etapes { padding: var(--esp-4); }
  .apercu__leaflet { min-height: 440px; }
  .reseau { flex-direction: column; align-items: flex-start; gap: var(--esp-6); padding: var(--esp-6); }
  .reseau__propos { flex-direction: column; }
  .entree { flex-direction: column; gap: var(--esp-2); padding: var(--esp-6); }
}