.notSaved .enregistrer{
	background: #c09;
	color: #fff;
}
.notSaved .valider {
	pointer-events: none;
	opacity: 0.5;
}

body:not(.notSaved) .enregistrer {
	pointer-events: none;
	opacity: 0.5;
}

body:not(.notSaved) .valider {
	background: #c09;
	color: #fff;
}

body.pasBon .enregistrer,
body.pasBon .valider{
	pointer-events: none;
	opacity: 0.5;
}

.validéEnseignant .valider{
	pointer-events: none;
	background: #0c9 !important;
}
.valider::before{
	content: "Je valide et verrouille ces données";
}
.validéEnseignant .valider::before{
	content: "Vous avez validé les données";
}
.validéSemiRA .validRA{
	color: #fff;
	background: #ffa500 !important;
}
.validéRA .validRA{
	color: #fff;
	background: #0c9 !important;
}
.validéDirection .validDirection{
	color: #fff;
	background: #0c9 !important;
}
.verrouillé .module{
	pointer-events: none;
}
.verrouillé .deplacer,
.verrouillé .suppr,
.verrouillé .add{
	display: none;
}

.enregistrer{
	flex-direction: column;
}
.verrouillé .enregistrer::after{
	content: "Données verrouillées";
	color: #09c;
	font-weight: bold;
}

/*********************/

.informations {
	background: #fff;
	border: 1px solid #aaa;
	padding: 4px 16px;
	border-radius: 4px;
	display: flex;
	justify-content: space-between;
}

.informations .nom {
	font-weight: bold;
}

.informations>.grid {
	width: fit-content;
	display: grid;
	grid-template-columns: auto auto;
	column-gap: 8px;
}
.informations .service,
.informations .decharges,
.informations .plafond{
	text-align: right;
}

.actions{
	display: flex;
	gap: 4px;
	margin-top: 4px;
}
.actions>*{
	background: #fff;
	font-size: 16px;
	border: 1px solid #aaa;
	padding: 4px 16px;
	flex:1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.enregistrer, .valider {
	cursor: pointer;
}

.dépassement>a{
	color: #fff;
}
.module {
	position: relative;
	background: #fff;
	border-radius: 4px;
	display: flex;
	gap: 4px;
}

.module:hover {
	background: #ccc;
}

.module input[type=text] {
	flex: 2;
	border: none;
	background: transparent;
}
.module input[type=text]:hover {
	outline: 1px solid #c09;
	z-index: 1;
}
.module input[type=text]:focus {
	outline: none;
	background: #ccc;
}

.module input:placeholder-shown::placeholder {
	color: #fff;
}

.module input:placeholder-shown{
	background: #c09;
}

.module input.wrong {
	background: #c09;
	color: #fff;
}

.flex1{
	flex: 1;
}

.deplacer {
	font-family: Arial, Helvetica, sans-serif;
}

[type=number] {
	width: 48px;
	text-align: right;
}

.add {
	width: 200px;
	background: #0c9;
	color: #fff;
	height: 20px;
	font-weight: bold;
	text-align: center;
	cursor: pointer;

}

.add:hover {
	outline: 1px solid #aaa;
	color: #000;
}

.totaux{
	background: #09c;
	color: #fff;
	padding: 4px 16px;
	border-radius: 4px;
	width: fit-content;

}
.totaux>div{
	display: flex;
	justify-content: space-between;
}

details {
	background: #fff;
	padding: 4px 16px;
	border-radius: 4px;
	margin: 4px 0;
	border: 1px solid #aaa;
}

.deplacer {
	cursor: grab;
	color: #aaa;
	padding: 2px 8px;
}

.deplacer:active {
	cursor: grabbing;
}

.suppr {
	width: 16px;
	height: 16px;
	border-radius: 100%;
	color: #aaa;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.suppr:hover {
	background-color: rgb(199, 0, 0);
	color: #FFF;
}

.flex {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

summary {
	font-weight: bold;
	cursor: pointer;
}