/* Éléments de structure de la page */

* {
  box-sizing: border-box;
}

html, 
body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	font-family: Marianne, sans-serif;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.main-container {
	display: flex;
	flex-direction: row;
	width: 100vw;
	height: 100vh;
}

.column {
	flex: 1;
	height: 100%;
	position: relative;
	overflow: hidden;
}

#chordgraph_acteurs,
#map_acteurs {
	width: 100%;
	height: 100%;
}

/* Responsive design */
@media screen and (max-width: 750px) {
	.main-container {
		flex-direction: column;
	}
	.column {
		width: 100vw;
		height: 50vh;
	}
}

/* Éléments du graphe */
/* Noeuds */
.node {
	font-size: 10px;
	fill: #333;
}
.node:hover,
.n--active{
	fill: #000;
	font-weight: 800;
	font-size: 14px;
}
.n--gov--source,
.n--gov--target,
.n--flux--source,
.n--flux--target {
	font-weight: 600;
	font-size: 12px;
}

/* Liens */
.link-gov,
.link-flux {
	stroke-linecap: round;
}

.link-gov {
	stroke: #c29f85;
	stroke-opacity: 0.2;
	stroke-width: 2px;
	fill: none;
	pointer-events: none;
}
.link-flux {
	stroke: #90b3af;
	stroke-opacity: 0.2;
	stroke-width: 2px;
	fill: none;
	pointer-events: none;
}

/* Noeuds en survol */
.n--gov--source {
	fill: #f90;
}
.n--gov--target {
	fill: #f00;
}
.n--flux--source {
	fill: #1eae9c;
}
.n--flux--target {
	fill: #2b1d51;
}

/* Eléments de la carte */
.ui-panel {
	position: absolute;
	z-index: 1000;
	width: clamp(160px, 26vw, 260px);
	max-width: 90%;
	font-family: Marianne, Arial, sans-serif;
	font-size: clamp(11px, 1.1vw, 13px);

	background: rgba(255,255,255,0.95);
	border: 1px solid #ccc;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);

	transition: all 0.3s ease;
}