@import url(root.css);
@import url(components.css);

@media screen and (max-width: 850px) {
	*[data-for-mobile] {
		display: unset !important;
	}

	.hide-mobile {
		display: none !important;
	}

	.menu-gauche {
		width: calc(100% - 20px) !important;
	}

	.menu-gauche[data-state="collapse"] {
		display: none;
	}

	.menu-gauche > .mobile-close-button {
		position: absolute;
		top: 8px;
		right: 8px;
	}

	.mobile-document-btn {
		position: fixed;
		height: 35px;
		width: 35px;

		bottom: 20px;
		left: 20px;
		
		display: flex !important;
		align-items: center;
		justify-content: center;
		
		border-radius: 8px;
		
		color: white;
		background: var(--clr-main);
		z-index: 100;
		cursor: pointer;
	}

	/* ================================ HEAD ================================ */

	.dossier-societe-container-mobile {
		margin: auto;

		font-size: 1.6rem;
		font-weight: 700;
	}

	.div-client-expandable {}

	.div-client-expandable::before {
		content: attr(data-name);
		width: 100%;
		padding: 8px;
		display: block;
		border-radius: 8px;
		background: var(--clr-border);
		color: white;
		font-weight: 600;
	}

	.expandable-content {
		padding: 8px 0;
	}

	.expandable-content.shrinked {
		display: none;
	}

	.expandable-content.expanded {}

	.div-header {
		margin-left: 10px;
	}

	.mobile-top-header {
		display: flex !important;
		flex-direction: row;
		align-items: center;
	}

	.mobile-top-header > .btn-open-menu {
		height: 30px;
		width: 30px;

		margin: 0;
		margin-right: 8px;
		
		background: var(--clr-main);
	}

	.div-client {
		display: flex;
		flex-direction: column;
		row-gap: 8px;
	}

	.div-immatriculation {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	.dossier-societe-container {
		display: none;
		margin-top: 0;
	}

	.div_client_buttons {
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
	}

	.navigation {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 8px;
	}

	.main-navigation {
		width: 100%;
		display: flex;
		align-items: center;
		column-gap: 25px;
	}

	/* ================================ CONTENT ================================ */

	.div_content {
		margin-left: 10px;
		flex-shrink: 0;
	}

	/* ================================ DOCUMENTS ================================ */

	.bas-docs {
		display: none;
	}

	.bas-docs.displayed {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		
		display: unset;

		background: white;
		z-index: 5;
	}

	.planning-poseur-container {
		min-height: 650px;
	}
}

@media screen and (max-width: 1300px) {
	/* .menu_planning_toolbar {
		display: none;
	} */

	.planning-poseur-container {
		height: calc(100% - 10px);
	}

	.planning_legendes {
		display: none !important;
	}
}