:root{
	--couleurPrincipale: #f3982b;
	--couleurSurPrincipale: #ffffff;
	--couleurPrincipaleVariante: #F09D37;
	--couleurSurPrincipaleVariante: #ffffff;
	--couleurSecondaire: #ed8c18;
	--couleurSurSecondaire: #ffffff;
	--couleurSecondaireVariante: #f2b770;
	--couleurSurSecondaireVariante: #ffffff;
	--couleurFond: #ecf0f1;
	--couleurSurFond: #212121;
	--couleurFondConteneur: #ffffff;
	--couleurSurFondConteneur: #212121;
	--couleurErreur: red;
	--couleurSurErreur: #212121;
	--couleurAvertissement: orange;
	--couleurSurAvertissement: #212121;
	--couleurValidation: #78A75A;
	--couleurSurValidation: #ffffff;
	--couleurValidationVariante: #8EB574;
	--couleurAnnulation: #ff6600;
	--couleurSurAnnulation: #ffffff;
	--couleurAnnulationVariante: #FF7E29;
	--couleurInactif: #8b9cab;
	--couleurSurInactif: #48525b;

	--couleurSelection : #85a0b8;
	--couleurSupprimer: red;

	--couleurDetailListe: #48525b;

	--couleurPianoSelection: #9cb9d4;

	--couleurFondCarte: #333;
	--couleurSurFondCarte: #ffffff;
}

html, body, button{	/* button obligatoire car sinon chrome ne le prend pas */
	font-family: "Public Sans", "Roboto", sans-serif !important;
}

@media screen and (max-width: 1023px){
	.page .combo{
		min-height: 42px; /*TODO A REVOIR AVEC MARTIN*/
	}
}

@media screen and (max-width: 1023px) {
	input[type="number"], input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input[type="week"], input[type="password"], select, input[type="date"], input[type="time"]{
		height: 30px;
	}
}

.dialogue > .conteneur > .pied .boutonAnnuler{
	background-color: #f600;
	color: var(--couleurPrincipale);
}

.dialogue > .conteneur > .pied .boutonAnnuler:hover{
	background-color: var(--couleurFond);
}

.page > .contenu > .formulaire >.pied .boutonAnnuler{
	background-color: #f600;
	color: var(--couleurPrincipale);
}

.page > .contenu > .formulaire > .pied .boutonAnnuler:hover{
	background-color: var(--couleurFond);
}

.pageDialogue .conteneur .pied .bouton{
    flex: none;
    width: 20%;
	min-width: 55px;
}

/* Dialogue interne, afin de ressembler au pageSaisieDialogue */

/*> .conteneur > pour forcer style standard*/

.page .dialogue > .conteneur > .entete{
	background-color: var(--couleurPrincipale);
	display: flex;
	border-radius: 10px 10px 0px 0px;
	margin-bottom: 10px; 
	color: var(--couleurSurPrincipale);
}

.page .dialogue > .conteneur > .entete .titre{
	display: flex;
	align-items: center;
	margin-right: 20px;
}

.page .dialogue > .conteneur > .entete .titre img{
	border: 1px solid var(--couleurSurPrincipale);
	border-radius: 5px;
	padding: 2px;
	background-color: #0003;
	margin-left: 20px;
	width: 32px;
}

.page .dialogue > .conteneur > .titre span{
    margin: 10px;
}

.boutonAvecImage{
    min-height: 38px;
    margin-top: 5px;
    background-color: var(--couleurPrincipale);
    color: var(--couleurSurPrincipale);
    border: none;
    cursor: pointer;
    height: 42px;
    border-radius: 5px;

    display: flex;
    align-items: center;
}


.boutonAvecImage:hover{
    background-color: var(--couleurPrincipaleVariante);
}

.boutonAvecImage img{
    border-radius: 5px;
    padding: 2px;
    margin: 5px;
	width: 24px;
	height: 24px;
}

.dialogueSelection .conteneur{
    width: 450px;
}

.dialogueSelection .conteneur .liste{
    max-height: 300px;
}

/* Dialogues de saisie avec code de confirmation centré */

.dialogue .codeSuppression{
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: bold;
}


.dialogue .combo .separateur{
    background-color: gray;
}

.dialogue .conteneurBouton{
    display: flex;
    flex-direction: column;
}

/* Tableaux de données bordés avec zébrage (fiches statistiques / retour PIDA) */

table th{
	border: 1px solid #d1d9e0;
	padding: 6px 6px;
}

table th{
	width: 125px;
}

table td{
	border: 1px solid #d1d9e0;
	padding: 6px 6px;
}

table tbody tr:nth-child(odd){
	background-color: #f6f8fa;
}

.quantite{
	text-align: center;
}

/* Demande de Rémi pour que les pianos n'ait pas la couleur d'accentuation en survol  */

.page .piano .element:hover{	/* page pour forcer la surcharge du style de widget */
    background-color: var(--couleurInactif);
    color: white;
}

.page .piano .element svg{
    fill: #878787;
}

.page .piano .element:hover svg{
    fill: white;
}

.page .piano .element.selectionne{
    background-color: var(--couleurPianoSelection);
    color: white;
}

.page .piano .element.selectionne svg{
    fill: white;
}

.page .piano .element.selectionne:hover{
   background-color: var(--couleurInactif);
}

/* Tous les conteneurs volants de l'application ont le même fond que le menuLateral (toutes pages) */
/* .page pour forcer la surcharge du fond/texte par défaut de widget.css (cf. .page .piano ci-dessus) */

.page .conteneurVolant{
	background-color: var(--couleurFondConteneur);
	color: var(--couleurSurFondConteneur);
	border: none;
}

.page .entete .conteneurVolant.conteneurVolantUtilisateur .actions a{
	color: var(--couleurSurFondConteneur);
}

.page .entete .conteneurVolant.conteneurVolantUtilisateur .actions a:hover{
	color: var(--couleurSurFondConteneur);
}

/* Mise en page VigiPIDA du conteneurVolantUtilisateur (poste en 1ère ligne, utilisateur avec icone en dessous) */

.conteneurVolantUtilisateur .posteSecteur{
	font-weight: bold;
	margin-bottom: 25px;
	text-align: center;
}

.conteneurVolantUtilisateur .ligneUtilisateur{
	display: flex;
	align-items: center;
	margin-top: 10px;
}

.conteneurVolantUtilisateur .ligneUtilisateur .icone{
	width: 32px;
	height: 32px;
	margin-right: 10px;
	flex-shrink: 0;
}

.conteneurVolantUtilisateur .detailUtilisateur{
	display: flex;
	flex-direction: column;
}

.page .conteneurVolant.conteneurVolantUtilisateur .detailUtilisateur .utilisateur,
.page .conteneurVolant.conteneurVolantUtilisateur .detailUtilisateur .infoUtilisateur{
	text-align: left;
}

.conteneurVolantUtilisateur .actions a{
	display: flex;
	align-items: center;
	gap: 8px;
}

.conteneurVolantUtilisateur .actions a .icone{
	width: 18px;
	height: 18px;
}


.pageListe .entete .secondaire .ligne.avecNombreLigne{
	align-items: end;
}

.pageListe .entete .secondaire .ligne .libelleNombreLigne{
	color: var(--couleurDetailListe);
}


.pageListe .entete .secondaire .ligne .remplisseur{
	flex: 1;
}


.listeLegendeVueGlobale .element{
    display: flex;
    align-items: center;
    margin: 5px;
}

.listeLegendeVueGlobale .element img, .listeLegendeVueGlobale .element div{
    width: 24px;
    height: 24px;
    margin-right: 5px;
    border: var(--couleurFondCarte) 1px solid;
    box-sizing: border-box;
}

.listeLegendeVueGlobale .element div{
    display: flex;
    align-items: center;
    justify-content: center;
}

.listeLegendeVueGlobale .element div img{
    width: 16px;
    height: 16px;
    margin: 0;
    border: none;
}

.listeLegendeVueGlobale .element span{
    width: 300px;
}