/* Page « Entre amis » (maquette Conception/amis.html) */

/* Qui dort où : chaque chambre est un paragraphe « <strong>Nom</strong> <em>lit</em> N personnes »,
   le pictogramme vient de la classe lit-double ou lits-simples. */
.couchages { padding-top: 20vh; row-gap: 28px; }
.couchages-tete { grid-column: 1 / 5; display: flex; flex-direction: column; gap: 18px; align-self: start; }
.plan { grid-column: 6 / 13; border-top: 1px solid var(--encre); }
.plan-niveau { display: grid; grid-template-columns: 15ch minmax(0, 1fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--filet); }
.plan-niveau h3 { font-size: 20px; font-style: italic; font-weight: 450; color: var(--gris-olivier); }
.plan-pieces { display: grid; gap: 12px; }
.plan-chambre { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 16px; align-items: center; font-size: 18px; line-height: 1.2; font-weight: 500; font-variant-numeric: tabular-nums; }
.plan-chambre::before { content: ""; grid-column: 1; grid-row: 1 / 3; width: 64px; height: 40px; background: no-repeat center / contain; }
.plan-chambre.lit-double::before { background-image: url(../../images/lit-double.svg); }
.plan-chambre.lits-simples::before { background-image: url(../../images/lits-simples.svg); }
.plan-chambre strong { grid-column: 2; grid-row: 1; font-weight: 500; font-size: 22px; line-height: 1.2; }
.plan-chambre em { grid-column: 2; grid-row: 2; font-style: normal; font-weight: 450; font-size: 17px; line-height: 1.6; color: var(--gris-olivier); }
.plan-bain { padding-left: 80px; font-size: 17px; font-style: italic; color: var(--gris-olivier); }
.plan-total { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0 0; font-size: 20px; white-space: nowrap; }
.plan-total strong { white-space: normal; text-align: right; }
.chambres-photos { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 7vh; align-items: start; }
.chambres-photos figure:nth-child(2) { margin-top: 48px; }
.chambres-photos figure:nth-child(4) { margin-top: 32px; }
.chambres-photos img { aspect-ratio: 4 / 5; object-fit: cover; }

/* La table, l'apéritif, le soir */
.scene { padding-top: 24vh; row-gap: 32px; }
.scene-texte { display: flex; flex-direction: column; gap: 18px; align-self: start; }
.table .t-large { grid-column: 1 / 9; grid-row: 1 / 3; }
.table .t-large img { aspect-ratio: 3 / 2; object-fit: cover; }
.table .scene-texte { grid-column: 9 / 13; grid-row: 1; }
.table .t-detail { grid-column: 10 / 12; grid-row: 2; margin-top: 16px; }
.apero .scene-texte { grid-column: 1 / 5; grid-row: 1; }
.apero .a-salon { grid-column: 6 / 13; grid-row: 1; }
.apero .a-piscine { grid-column: 3 / 8; grid-row: 2; margin-top: 32px; }
.apero .a-sejour { grid-column: 9 / 13; grid-row: 2; margin-top: 96px; }
.apero .a-salon img, .apero .a-piscine img, .apero .a-sejour img { aspect-ratio: 3 / 2; object-fit: cover; }
.calme { padding-top: 22vh; }
.calme-liste { grid-column: 3 / 11; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px; align-items: start; }

@media (max-width: 800px) {
	.couchages, .scene, .calme { padding-top: 96px; gap: 24px; }
	.plan-niveau { grid-template-columns: 1fr; gap: 10px; }
	.plan-chambre { grid-template-columns: 52px minmax(0, 1fr) auto; }
	.plan-chambre::before { width: 52px; }
	.plan-bain { padding-left: 68px; }
	.chambres-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
	.chambres-photos figure:nth-child(2) { margin-top: 24px; }
	.chambres-photos figure:nth-child(3) { margin-top: -24px; }
	.chambres-photos figure:nth-child(4) { margin-top: 0; }
	.chambres-photos .tirage { padding: 5px; }
	.table .t-detail, .apero .a-piscine, .apero .a-sejour { margin-top: 0; }
	.table .scene-texte { order: -1; }
	.table .t-detail { width: 60%; align-self: flex-end; }
	.calme-liste { grid-template-columns: 1fr; gap: 16px; }
}