/* 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;
}

.text-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);
}

/* 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: 768px), (orientation: portrait) {
	.mobile-hidden { display: none !important; }
	.mobile-only { display: inline-block; }
}
@media (min-width: 769px) and (orientation: landscape) {
	.mobile-only { display: none !important; }
}
/* COULEURS DES MODULES  */

/* Recherche */
.mod-search {
	--modBgColor: black;
	--item-width: min(95vw, 1000px);
	--item-height: auto;
	--item-img-width: auto;
	--item-img-height: auto;
}

/* ACTUALITÉS (Information chaude, institutionnelle) : Rouge corail doux */
.mod-actu {
	--modBgColor: #e63946;
	--item-width: min(95vw, 1000px);
	--item-height: 225px;
	--item-img-width: 300px;
	--item-img-height: 100%;
}

/* ÉVÉNEMENTS (Festif, agenda public, dynamisme) : Orange chaleureux */
.mod-event {
	--modBgColor: #f4a261;
	--item-width: 296px;
	--item-height: 220px;
	--item-content-padding: 5px 10px 5px;
}

/* DOCUMENTS (Archives, sérieux, GED) : Bleu acier / Gris bleuté */
.mod-doc {
	--modBgColor: #457b9d;
}

/* INFO : flux RSS */
.mod-info {
	--modBgColor: green;
}

/* CONVERSATION (Communication, WhatsApp-like, direct) : Vert d'eau / Émeraude */
.mod-conversation, .mod-salle-year {
	--modBgColor: #9d4edd;
}

/* UTILISATEURS (Annuaire, personnel, institution) : Bleu nuit / Marine */
.mod-user {
	--modBgColor: #1d3557;
	--item-width: 210px;
	--item-height: auto;
	--item-content-padding: 5px;
	--item-img-width: 210px;
	--item-img-height: 210px;
}

/* SALLES (Logistique, réservation, ressources matérielles) : Violet améthyste */
.mod-salle {
	--modBgColor: #2a9d8f;
}

.mod-salle-hebdo {
	--modBgColor: #e63946;
}

/* ASSOCIATIONS (Vie locale, nature, tissu social) : Vert */
.mod-asso { --modBgColor: #93b24b; }
/* PROFESSIONNELS (Acteurs économiques, sérieux, entreprises) : Terre cuite / Brun ou Gris Ardoise */
.mod-pro { --modBgColor: #bc6c25; }
body.mod-asso, body.mod-pro {
	--item-width: 600px;
	--item-height: 150px;
	--item-img-width: 150px;
	--item-img-height: 150px;
	--item-img-fill: contain;
	--item-color-fg: black;
	--item-color-bg: var(--fg-color-light);
	--item-content-padding: 5px 10px;
}

body.mod-gallery {
	--item-img-width: 210px;
	--item-img-height: 210px;
	--item-img-fill: contain;
}


#filter-domaines {
	text-align: center;
}

.lang img {
	width: 32px;
	height: 22px;
	object-fit: cover;
	display: block;
}