/* Page d'accueil (maquette Conception/accueil.html).
   Chaque section porte la classe « accueil » : ces règles restent sans effet sur les autres pages dans l'éditeur,
   où toutes les mises en page propres sont chargées. Les ancres #maison, #village et #pratique guident la carte. */

.accueil.voile::before,
.accueil .voile::before { inset: -56px -72px; }
.accueil h1 { font-size: clamp(34px, 3.3vw, 50px); line-height: 1.14; letter-spacing: .12em; }
.accueil .texte { max-width: 60ch; }
.accueil .chapo { max-width: 44ch; }

/* Ouverture : le texte en haut à gauche, la photo à droite, la carte visible entre les deux */
.accueil.ouverture { min-height: calc(100svh - var(--entete)); padding-top: 12vh; padding-bottom: 48px; row-gap: 56px; align-content: space-between; align-items: stretch; }
.accueil .ouverture-texte { grid-column: 1 / 7; align-self: start; }
.accueil .ouverture-photo { grid-column: 8 / 13; align-self: start; margin-top: 4vh; }
.accueil .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 6px; }
.accueil .avis { font-size: 17px; font-style: italic; color: var(--gris-olivier); }

/* Panneaux posés sur la carte */
.panneau { padding-top: 30vh; }
.maison-texte, .jardin-texte, .village-texte { display: flex; flex-direction: column; gap: 18px; align-self: start; }

.maison-texte { grid-column: 1 / 5; }
.etages { margin-top: 8px; border-top: 1px solid var(--filet); }
.etages li { display: grid; grid-template-columns: 13ch minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--filet); }
.etages li strong { font-weight: 450; font-style: italic; color: var(--gris-olivier); }
.maison-salon { grid-column: 8 / 13; grid-row: 1; }
.maison-chambre { grid-column: 7 / 10; grid-row: 2; margin-top: 40px; }
.maison-cuisine { grid-column: 11 / 13; grid-row: 2; margin-top: 96px; }
.maison-salon img, .maison-chambre img { aspect-ratio: 3 / 2; object-fit: cover; }

.jardin-piscine { grid-column: 1 / 7; grid-row: 1 / 3; }
.jardin-texte { grid-column: 9 / 13; grid-row: 1; align-self: end; }
.jardin-olivaie { grid-column: 8 / 12; grid-row: 2; margin-top: 56px; }

.plusieurs-photo { grid-column: 3 / 11; }
.plusieurs-photo img { aspect-ratio: 2 / 1; object-fit: cover; }
.plusieurs-texte { grid-column: 2 / 12; margin-top: 48px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 48px; }
.plusieurs-choix { display: grid; grid-template-columns: 11ch minmax(0, 1fr); gap: 20px; padding: 16px 0; border-top: 1px solid var(--filet); }
.plusieurs-choix h3 { font-size: 24px; line-height: 1.3; }
.plusieurs-detail { display: flex; flex-direction: column; gap: 6px; }

.panneau-village { padding-bottom: 20vh; }
.village-texte { grid-column: 1 / 5; }

/* Avant de réserver : la carte s'efface derrière un fond de pierre */
.pratique { padding-top: 22vh; padding-bottom: 96px; background: linear-gradient(to bottom, rgba(242, 238, 231, 0), var(--pierre-claire) 22vh); }
.pratique h2 { grid-column: 1 / 5; }
.pratique-liste { grid-column: 5 / 10; border-top: 1px solid var(--filet); }
.pratique-liste li { display: grid; grid-template-columns: 9ch minmax(0, 1fr); gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--filet); }
.pratique-liste li strong { font-weight: 450; font-style: italic; color: var(--gris-olivier); }
.pratique-action { grid-column: 5 / 10; margin-top: 36px; }
.pratique-photo { grid-column: 10 / 13; grid-row: 1 / 3; }

@media (max-width: 800px) {
	.accueil.voile::before,
	.accueil .voile::before { inset: -40px -20px; background: linear-gradient(to bottom, rgba(242, 238, 231, 0), var(--voile) 40px, var(--voile) calc(100% - 40px), rgba(242, 238, 231, 0)); }
	.accueil.ouverture { min-height: 0; padding-top: 32px; padding-bottom: 48px; row-gap: 40px; }
	.accueil h1 { font-size: 30px; letter-spacing: .1em; }
	.accueil .chapo { font-size: 20px; }
	.panneau { padding-top: 22vh; }
	.maison-salon, .maison-chambre, .maison-cuisine, .jardin-piscine, .jardin-olivaie, .plusieurs-photo, .pratique-photo { margin-top: 32px; }
	.maison-cuisine { width: 62%; align-self: flex-end; }
	.jardin-olivaie { width: 78%; }
	.jardin-texte { margin-top: 40px; }
	.plusieurs-photo img { aspect-ratio: 3 / 2; }
	.plusieurs-texte { grid-template-columns: 1fr; gap: 24px; }
	.plusieurs-choix { grid-template-columns: 1fr; gap: 6px; }
	.panneau-village { padding-top: 58vh; padding-bottom: 24vh; }
	.pratique-liste { margin-top: 24px; }
	.pratique-liste li { grid-template-columns: 1fr; gap: 0; }
	.pratique-photo { width: 70%; }
}