/* Page « Le guide » (maquette Conception/guide.html). Lieux et échelle : styles dans leurs blocs. */
.guide-sommaire { display: flex; flex-wrap: wrap; column-gap: 22px; row-gap: 4px; font-size: 18px; }
.guide-sommaire a { font-style: italic; }

.echelle { padding-top: 16vh; row-gap: 28px; }
.echelle-tete { grid-column: 1 / 7; display: flex; flex-direction: column; gap: 14px; }
.echelle-note { grid-column: 1 / 13; font-size: 16px; font-style: italic; color: var(--gris-olivier); }

.rubrique { padding-top: 22vh; row-gap: 32px; scroll-margin-top: 24px; }
.rubrique-texte { display: flex; flex-direction: column; gap: 18px; align-self: start; }
.village .rubrique-texte { grid-column: 1 / 6; }
.village .v-photo { grid-column: 7 / 13; }
.village .v-photo img { aspect-ratio: 3 / 2; object-fit: cover; }

.adresses { grid-column: 2 / 12; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.adresses > h2, .adresses > .texte { grid-column: 1 / -1; }
.adresses > .texte { margin: 14px 0 12px; }
.adresses .groupe { grid-column: 1 / -1; padding: 40px 0 6px; font-size: 17px; font-style: italic; letter-spacing: .12em; text-transform: uppercase; color: var(--olive); }

.lieux-tete { grid-column: 1 / 6; display: flex; flex-direction: column; gap: 14px; align-self: start; }
.rubrique > .lieux { grid-column: 6 / 13; }
.huile .liste-filets { margin-top: 8px; }

.alpilles .a-photo { grid-column: 1 / 6; }
.alpilles .a-photo img { aspect-ratio: 4 / 5; object-fit: cover; }
.alpilles .rubrique-texte { grid-column: 7 / 13; }
.alerte { padding: 16px 18px; background: var(--pierre); }
.alerte strong { font-weight: 600; }
.guide-note { grid-column: 1 / 13; padding-top: 12vh; font-size: 16px; font-style: italic; color: var(--gris-olivier); }

@media (max-width: 800px) {
	.echelle, .rubrique { padding-top: 88px; gap: 20px; }
	.adresses { display: flex; flex-direction: column; }
	.adresses .groupe { padding-top: 28px; }
	.guide-note { padding-top: 64px; }
}