/* Pages intérieures : en-tête de page (très grand titre, chapeau, rangée de vraies photos),
   blocs de contenu séparés par des filets, listes, encadrés et tarifs. */

.page-tete {
  padding-top: calc(var(--entete-h, 68px) + clamp(48px, 7vw, 112px));
  padding-bottom: clamp(56px, 7vw, 96px);
}

.page-tete__titre {
  max-width: 15ch;
  font-family: var(--police-titre, sans-serif);
  font-stretch: 108%;
  font-weight: 800;
  font-size: clamp(2.6rem, 8vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Rangée de photos réelles sur toute la largeur du contenu : une grande puis deux sur mobile, trois sur ordinateur */
.rangee {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: clamp(48px, 6vw, 80px);
}

.rangee > :first-child {
  grid-column: 1 / -1;
}

.rangee img,
.rangee video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--brume-2, #e6e9ee);
}

.rangee figcaption {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--graphite-2, #4a5261);
}

@media (min-width: 700px) {
  .rangee {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .rangee > :first-child {
    grid-column: auto;
  }
}

.bloc {
  padding-block: var(--espace-section, 120px);
  border-top: 1px solid var(--filet, #d9dde4);
}

.bloc--brume {
  border-top: 0;
  background: var(--brume, #f2f4f7);
}

.bloc__titre {
  max-width: 18ch;
  font-family: var(--police-titre, sans-serif);
  font-stretch: 106%;
  font-weight: 780;
  font-size: clamp(2rem, 5vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.bloc__grille {
  display: grid;
  gap: 40px;
  margin-top: clamp(32px, 4vw, 56px);
}

.bloc__photo img {
  width: 100%;
  max-width: 480px;
  height: auto;
}

.prose {
  max-width: var(--texte-max, 40rem);
  font-size: 1.1rem;
}

.prose p + p,
.prose p + ul,
.prose ul + p {
  margin-top: 16px;
}

.prose h3 {
  margin-top: 36px;
  font-family: var(--police-titre, sans-serif);
  font-stretch: 105%;
  font-weight: 720;
  font-size: 1.4rem;
}

.puces li {
  position: relative;
  padding-left: 22px;
}

.puces li + li {
  margin-top: 8px;
}

.puces li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 10px;
  height: 3px;
  background: var(--roi, #1652d8);
}

/* Liste numérotée des programmes, numéros du panneau de la station */
.programmes {
  border-top: 2px solid var(--graphite, #1b2029);
}

.programmes li {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: baseline;
  padding-block: 14px;
  border-bottom: 1px solid var(--filet, #d9dde4);
  font-size: 1.1rem;
}

.programmes__numero {
  font-family: var(--police-titre, sans-serif);
  font-weight: 760;
  font-size: 1.3rem;
  color: var(--roi, #1652d8);
}

.encadre {
  max-width: var(--texte-max, 40rem);
  margin-top: 32px;
  padding: 20px 24px;
  border-left: 4px solid var(--roi, #1652d8);
  background: var(--brume, #f2f4f7);
}

.bloc--brume .encadre {
  background: var(--blanc, #fff);
}

.chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 56px;
  margin-top: 36px;
}

.chiffres div {
  display: grid;
}

.chiffres strong {
  font-family: var(--police-titre, sans-serif);
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: 0.9;
  color: var(--roi, #1652d8);
}

.chiffres span {
  margin-top: 8px;
  color: var(--graphite-2, #4a5261);
}

/* Tarifs : tableau construit depuis donnees-station.js, masqué tant que la grille est vide */
.tarifs__tables {
  display: grid;
  gap: 40px;
  margin-top: 32px;
}

.tarifs table {
  width: 100%;
  max-width: 48rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.tarifs caption {
  padding-bottom: 12px;
  text-align: left;
  font-family: var(--police-titre, sans-serif);
  font-weight: 720;
  font-size: 1.3rem;
}

.tarifs th,
.tarifs td {
  padding: 12px 8px 12px 0;
  border-bottom: 1px solid var(--filet, #d9dde4);
  text-align: left;
  vertical-align: top;
}

.tarifs td:last-child,
.tarifs th:last-child {
  text-align: right;
  white-space: nowrap;
}

.tarifs__absents {
  margin-top: 20px;
  font-size: 1.2rem;
  font-weight: 650;
}

@media (min-width: 900px) {
  .bloc__grille {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: 72px;
  }

  .bloc__grille--inverse > :first-child {
    order: 2;
  }
}

/* Boutique : familles de produits en liste à filets, sans prix */
.familles {
  display: grid;
  border-top: 2px solid var(--graphite, #1b2029);
}

.famille {
  display: grid;
  gap: 8px;
  padding-block: 24px;
  border-bottom: 1px solid var(--filet, #d9dde4);
}

.famille__nom {
  font-family: var(--police-titre, sans-serif);
  font-stretch: 106%;
  font-weight: 760;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1;
}

.famille p {
  max-width: 40rem;
  color: var(--graphite-2, #4a5261);
}

.citation__qui {
  margin-bottom: 12px;
  font-weight: 700;
}

.liste-404 {
  margin-top: 24px;
  font-size: 1.15rem;
}

@media (min-width: 900px) {
  .famille {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: baseline;
    column-gap: 48px;
  }

  .famille p {
    font-size: 1.1rem;
  }
}

.familles,
.chiffres + .prose {
  margin-top: clamp(28px, 4vw, 48px);
}

/* Blocs d'une ou deux lignes (tarifs encore masqués, horaires) : moins de hauteur */
.bloc.tarifs,
.bloc--court {
  padding-block: clamp(56px, 7vw, 104px);
}