/* LAYOUT GLOBAL */
body {
	width: 100dvw;
	height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Empêche le body de scroller, c'est body-main qui s'en charge */
	--modBgColor: #C0C0C0;
}

.center { text-align: center; }

#module-topbar {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	color: white;
	text-align: center;
	padding: 5px 10px;
	background-color: var(--modBgColor);
}
body.mod-settings {
	--modBgColor: #1C7643;
}

/* COMPOSANT D'INGESTION (DROPZONE) */
#body-upload {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fg-color-light);
	border-bottom: 1px solid var(--bordure, #e0e0e0);
	padding: 4px;
	background-color: var(--modBgColor);
}
/* État actif lors du survol d'un fichier (Drag & Drop) */
#body-upload.drag-active {
	background-color: #e3f2fd; /* Feedback visuel (Bleu clair) */
	border: 2px dashed var(--fg-color-blue);
}
#body-upload .symbol {
	font-size: 24px;
	color: var(--fg-color-blue);
}

#body-filter { padding: 5px; 	border-bottom: 1px solid var(--fg-color-white); background-color: var(--bg-color); }
#body-main { flex: 1; overflow: auto; }
/* #body-footer {} */

#topbar-home img {
	width: 50px;
	height: 50px;
}

/* Disparition matérielle du DOM si le contrôleur Node.js n'injecte aucun filtre (Sobriété UI) */
#body-filter:empty {
	display: none !important;
}
/* --- Composants de Filtrage Mutuel --- */
#body-filter .filter-group {
	text-align: center;
}
#body-filter .filter-select {
	min-width: 150px;
	padding: 6px;
	border-radius: 4px;
}
#body-filter .filter-search {
	min-width: 250px;
	padding: 6px 12px;
	border-radius: 20px; /* Consistance avec la charte des .btn-action */
}
/* --- Toggles de la Machine d'État (Vue Liste vs Regroupée) --- */
#body-filter .view-toggle-group {
	display: flex;
	border: 1px solid var(--fg-color-blue, #161e29);
	border-radius: 4px;
	overflow: hidden;
}
#body-filter .view-toggle-btn {
	background: var(--fg-color-light, #ffffff);
	color: var(--fg-color-blue, #161e29);
	border: none;
	padding: 6px 12px;
	cursor: pointer;
	font-size: 0.9rem;
	transition: background 0.2s, color 0.2s;
}
#body-filter .view-toggle-btn.active {
	background: var(--fg-color-blue, #161e29);
	color: var(--fg-color-light, #ffffff);
	font-weight: bold;
}

/* Surcharge MODALE */
.modal-content { width: auto !important; }
.modal-header, .modal-footer {
	padding: 6px 12px !important;
	border-bottom: none !important;
	background-color: black !important;
	color: white !important;
}
.modal-close-btn svg { fill: white !important; }
.modal-body { padding: 0px !important; }

.empty-state .symbol {
	font-size: 4rem;
	color: #ccc;
	margin: 10px 0px;
}

/* MÉCANISME GÉNÉRIQUE RESPONSIVE (Largeur + Ratio/Orientation) */
@media (max-width: 599px), (orientation: portrait) {
	.mobile-hidden { display: none !important; }
	/*.mobile-only { display: inline-block; }*/
}
@media (min-width: 600px) and (orientation: landscape) {
	.mobile-only { display: none !important; }
}

#hub-layout {
    --hub-center-diam: min(36vw, 160px) !important;
    --hub-item-diam: min(18vw, 60px) !important;
    text-align: center;
}
#hub-center img {
    width: 80px;
}

.mod-salle-hebdo { --modBgColor: #397ee6; }
.mod-salle-year { --modBgColor: #cd45d2; }
.mod-tmp { --modBgColor: #04a59b; }