/* 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; }
}
/* App CSS : bilera */

body {
    background: url(/img/fond.webp) no-repeat center/cover;
    background-attachment: fixed;
}

#hub-layout {
    --hub-center-diam: min(36vw, 180px);
    --hub-item-diam: min(18vw, 60px);
}
#hub-center { padding: 12px !important; }
#hub-center img { width: 100%; }
.hub-label { background-color: #FFFFFF80; padding: 0px 5px; border-radius: 10px; }

.shared-grid {
    --item-gap: 40px !important;
}
.mod-asso {
    --modBgColor: #04a59b;
    --item-color-bg: #000000A0;
    --item-color-fg: white;
    --item-width: min(100%, 740px);
    --item-height: auto;
    --item-img-width: min(30vw, 180px);
    --item-img-height: 100%;
	--item-content-padding: 10px 20px;
    --bordure: 0px;
}
.mod-cafe {
    --modBgColor: #EC7A00;
    --item-width: min(95%, 800px);
}
.mod-agenda { --modBgColor: #397ee6; }
.mod-histo { --modBgColor: #cd45d2; }
.mod-agenda, .mod-histo {
    --item-color-bg: #000000A0;
    --item-color-fg: white;
    --item-width: min(100%, 740px);
    --item-height: auto;
    --item-img-width: min(30vw, 180px);
    --item-img-height: 100%;
	--item-content-padding: 10px 20px;
    --bordure: 0px;
}