html, body, 
#ProductContainer {
	height: 100%;
	width: 100%;
	margin: 0px;
	overflow:hidden;
}

/* ================================================================================================
	LAYOUT
=============================================================================================== */
#ProductContainer {
	display: flex;
	flex-direction: column;
}

#BootstrapHeader {
	flex: none;
}

main {
    flex: 1 1 auto;
    overflow: auto;
}

/* ================================================================================================
	IMPRESSION (CTRL-P) - le chrome de l'appli (l'en-tête) n'a pas sa place sur
	une page imprimée, seul le contenu (main) doit s'imprimer. #ProductContainer est
	contraint à 100% de la fenêtre + overflow:hidden pour l'usage écran (voir LAYOUT
	plus haut) - ça clipperait tout contenu dépassant une page à l'impression, d'où le
	retrait ici (le format papier gère lui-même la pagination sur plusieurs pages).
=============================================================================================== */
@media print {
	html, body,
	#ProductContainer {
		height: auto;
		overflow: visible;
	}

	main {
		overflow: visible;
	}
}

/* ================================================================================================
	PERSONNALITÉ DU SITE
	L'apparence par défaut vient du Core (modules/Skin/Skin.css). Ce fichier, SANS couche CSS,
	gagne toujours sur le Core : ne redéfinir ici que ce qui donne son caractère au site.
	Décommenter et ajuster au besoin - la liste complète des jetons est dans Skin.css.
================================================================================================ */
/*
[data-bs-theme] {
	--bootstrap-accent: #2f6fd6;
	--bootstrap-accent-contrast: #ffffff;
	--bootstrap-font: system-ui, -apple-system, "Segoe UI", sans-serif;
	--bootstrap-font-display: var(--bootstrap-font);
	--bootstrap-font-mono: SFMono-Regular, Consolas, monospace;
	--bootstrap-radius: .375rem;
	--bootstrap-density: 1;
	--bootstrap-surface-hue: 220;
	--bootstrap-surface-chroma: 10%;
}
*/

/* Une valeur propre au thème clair ou sombre (couleur, image...) :
[data-bs-theme="light"] { }
[data-bs-theme="dark"] { }
*/

/* ================================================================================================
	AJOUTS DU PRODUIT
	Classes propres au site - toujours bâties sur les jetons (--bootstrap-*, --bs-*) pour suivre
	automatiquement le thème clair/sombre et la densité.
================================================================================================ */


/* ================================================================================================
	PAGE VIRTUELLE (sections/virtual/HTML) - lecture "document", pas une vue "app" comme le
	reste du produit : colonne centrée à largeur de lecture confortable, jamais pleine largeur.
	#ContentPage est le seul point d'ancrage - CSS Produit (esthétique), le module Core lui-même
	(HTML.css) reste volontairement muet sur la mise en page (voir Conventions, layering CSS).
=============================================================================================== */
#ContentPage {
	max-width: 900px;
	margin: 0 auto;
	padding: 24px 32px;
}

@media (max-width: 576px) {
	#ContentPage {
		padding: 16px;
	}
}