@charset "UTF-8";
/* CSS Document */

/* ===== RESET ===== */

/* ===== STRUCTURE GLOBALE ===== */

#app {
	height: 100vh;
	display: flex;
    flex-direction: column;
}

/* ===== HEADER ===== */
#header {
    height: 4rem;
    flex-shrink: 0;
}

/* ===== ZONE CENTRALE ===== */
#center {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
	height: 0;
}

/* ===== PANNEAUX ===== */
#left {
	min-width: 0;
	padding: 0 1rem 0 1rem;
    overflow-y: auto;
    overflow-x: hidden;
	flex: 0 0 auto; 
	min-height: 0; 
	display: flex;
	flex-direction: row;
}

#left.leftClosed > * {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease-out ;
}

#left:not(.leftClosed) > * {
	opacity: 1;
	transition: opacity 0.3s ease-out ;
}

#leftContent {
	transition: opacity 0.3s ease-out ;
}

#left.leftClosed #leftContent {
	opacity: 0;
	pointer-events: none;
}

#left.leftClosed {
	min-width: 0 !important;
}

#right {
	display: flex;
    flex: 1;
    overflow: auto;
	min-height: 0;
}

/* ===== FOOTER ===== */
#footer {
	height: var(--HEIGHT_FOOTER);
    flex-shrink: 0;
    background: transparent;
    overflow: auto;
}

/* ===== SPLITTERS ===== */

#splitterV {
	position: relative;
	width: 1px;
	background: var(--COL_LIGNES);
	flex: 0 0 auto;
}

#splitterV::before {
	content: '';
	position: absolute;
	left: -3px;
	right: -3px;
	top: 0;
	bottom: 0;
	cursor: col-resize;
}