/* --------------------------------------------------------------

   layout.css — USAN
   Remplace celui de squelettes-dist : disposition des blocs principaux.
   (Les couleurs et l'habillage sont dans perso.css)

   .page
     .usan-fond      image de fond (fixe, derrière tout)
     .header         logo            } une seule barre
     .nav            menu principal  } en haut
     .main           contenu (.wrapper) + colonne(s) (.aside)
     .footer

-------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body { margin: 0; text-align: left; }

.page {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	min-height: 100vh;
	min-height: 100dvh;
	grid-template-rows: auto 1fr auto;
}

/* Barre du haut : logo à gauche, menu à droite */
.header { grid-column: 1; grid-row: 1; display: flex; align-items: center; min-height: 4rem; padding: .4rem 1rem; }
.nav    { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; min-height: 4rem; padding: .4rem 1rem .4rem 0; }

/* Contenu */
.main {
	grid-column: 1 / -1;
	grid-row: 2;
	width: min(80rem, 100% - 2rem);
	margin: 1.5rem auto 2.5rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 18rem;
	grid-template-areas: "centre droite";
	gap: 1.25rem;
	align-items: start;
}
.main > .wrapper { grid-area: centre; }
.main > .aside { grid-area: droite; }
.main > .aside-gauche { grid-area: gauche; }

/* Page d'accueil : P'tit Usania | articles | commentaires */
.main.usan-3-colonnes {
	grid-template-columns: 17rem minmax(0, 1fr) 17rem;
	grid-template-areas: "gauche centre droite";
}

/* Pages SPIP sans colonne */
.main > .wrapper:only-child { grid-column: 1 / -1; }

.wrapper, .aside { width: auto; float: none; overflow: visible; min-width: 0; }
.content { min-height: 0; }
.aside { display: flex; flex-direction: column; gap: 1.25rem; }

.footer { grid-column: 1 / -1; grid-row: 3; }

/* Écrans moyens : la page d'accueil passe à 2 colonnes */
@media (max-width: 1150px) {
	.main.usan-3-colonnes {
		grid-template-columns: minmax(0, 1fr) 17rem;
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"centre gauche"
			"centre droite";
	}
}

/* Tablettes en portrait, smartphones : une seule colonne */
@media (max-width: 800px) {
	.main,
	.main.usan-3-colonnes {
		width: min(100% - 1rem, 46rem);
		margin-top: 1rem;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-template-areas: "gauche" "centre" "droite";
		gap: 1rem;
	}
	.main { grid-template-areas: "centre" "droite"; }
	.main.usan-3-colonnes { grid-template-areas: "gauche" "centre" "droite"; }
}

/* Impression */
@media print {
	.page { display: block; }
	.main { display: block; width: auto; margin: 0; }
	.usan-fond, .nav, .arbo, .aside, .footer { display: none !important; }
}