/* Page « Le jardin et la piscine » : les quatre côtés du jardin (maquette Conception/jardin.html) */
.tour { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 19px; }
.tour a { font-style: italic; }

.essentiel { grid-column: 3 / 11; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.essentiel li { display: grid; grid-template-columns: 10ch minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--filet); }
.essentiel li strong { font-weight: 450; font-style: italic; color: var(--gris-olivier); }

.cote { padding-top: 24vh; row-gap: 32px; scroll-margin-top: 24px; }
.cote-texte { display: flex; flex-direction: column; gap: 18px; align-self: start; }

.sud .cote-texte { grid-column: 1 / 5; grid-row: 1 / 3; }
.sud .s-bassin { grid-column: 6 / 13; grid-row: 1; }
.sud .s-bains { grid-column: 6 / 10; grid-row: 2; margin-top: 16px; }
.sud .s-lavande { grid-column: 11 / 13; grid-row: 2; margin-top: 88px; }
.sud .s-allee { grid-column: 2 / 12; grid-row: 3; margin-top: 12vh; }
.sud .s-bassin img, .sud .s-bains img { aspect-ratio: 3 / 2; object-fit: cover; }
.sud .s-allee img { aspect-ratio: 21 / 9; object-fit: cover; }
.securite { margin-top: 6px; border-top: 1px solid var(--filet); }
.securite li { padding: 10px 0; border-bottom: 1px solid var(--filet); }

.est .e-salon { grid-column: 1 / 8; grid-row: 1 / 3; }
.est .cote-texte { grid-column: 9 / 13; grid-row: 1; }
.est .e-detail { grid-column: 9 / 11; grid-row: 2; margin-top: 24px; }
.est .e-salon img { aspect-ratio: 3 / 2; object-fit: cover; }

.nord .cote-texte { grid-column: 1 / 5; grid-row: 1; }
.nord .n-petanque { grid-column: 6 / 13; grid-row: 1; }
.nord .n-pingpong { grid-column: 2 / 5; grid-row: 2 / 4; margin-top: 8vh; }
.nord .n-dejeuner { grid-column: 6 / 11; grid-row: 2; margin-top: 16px; }
.nord .n-chat { grid-column: 8 / 13; grid-row: 3; margin-top: 32px; }
.nord .n-petanque img, .nord .n-dejeuner img, .nord .n-chat img { aspect-ratio: 3 / 2; object-fit: cover; }

.ouest .o-maison { grid-column: 3 / 11; }
.ouest .o-maison img { aspect-ratio: 16 / 9; object-fit: cover; }
.ouest .cote-texte { grid-column: 3 / 9; margin-top: 16px; }

@media (max-width: 800px) {
	.essentiel { display: flex; flex-direction: column; }
	.essentiel li { grid-template-columns: 1fr; gap: 0; }
	.cote { padding-top: 96px; gap: 24px; }
	.sud .s-bains, .sud .s-lavande, .sud .s-allee, .est .e-detail, .nord .n-pingpong, .nord .n-dejeuner, .nord .n-chat, .ouest .cote-texte { margin-top: 0; }
	.sud .s-lavande, .est .e-detail, .nord .n-pingpong { width: 62%; align-self: flex-end; }
	.sud .s-allee img { aspect-ratio: 3 / 2; }
	.est .cote-texte { order: -1; }
}