/***************************************************************
*																					*
*		GESTION DES MODIFICATIONS ET SUPPRESSIONS DE TRAINS		*
*									GSMT v2										*
*							FEUILLE DE STYLE DU MODAL						*
*									MODAL											*
****************************************************************/


/**********************/
/* Conteneur du modal */
/**********************/


.modal {
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:center;
	align-items:center;
	position:fixed;
	top:0; left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,.5);
}

/* Commande de fermeture */
.modal_fermer {
	position:absolute;
	display:block;
	top:-0.1rem;
	right:0.6rem;
	margin:1rem;
	font-size:2rem;
	font-weight:bold;
	background-color:transparent;
	color:var(--texte-principal);
	border-radius:50%;
	width:2rem;
	height:2rem;
}

#marquage:not(:target) {
	display:none;
}
#marquage:target {
	display:inherit;
}

/* Faux boutons */

.bouton {
	display:block;
	margin:1rem 0.4rem;
	padding:1rem;
	background-color:var(--fond-bouton);
	color:var(--texte-bouton);
	font-family:"Avenir", sans-serif;
	font-size:1.2rem;
	font-weight:bold;
	border:none;
	border-radius:1rem;
	cursor:pointer;
}
.bouton a {
	color:var(--texte-bouton);
}

.bouton picture {
	display:inline-block;
	margin:0 0.4rem 0 0;
}
.bouton img {
	width:20px; height:auto;
	vertical-align:middle;
}


/**************************/
/* Formulaire de marquage */
/**************************/

/* Décomposé en sections, elles-mêmes décomposées en fieldsets puis en paragraphes */

/* Conteneurs et règles générales */

#formulaire {
	position:relative;
	display:block;
	margin:auto;
	padding:1rem;
	border-left:1px dotted var(--bord-principal);
	background-color:var(--fond-principal);
	color:var(--texte-principal);
	width:75%;
	max-width:95%;
	min-height:75%;
	max-height:95%;
	box-shadow:0.4rem 0.4rem 0.4rem rgba(0,0,0,.5);
	border-radius:1rem;
}

#formulaire form {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-items:flex-start;
	align-content:flex-start;
	column-gap:1rem;
}

/* Titre du formulaire */
#formulaire form > legend {
	order:1;
	flex-grow:1;
	flex-shrink:0;
	flex-basis:auto;
	margin:0 0 1rem 0;
	padding:0.4rem 0;
	background-color:var(--fond-secondaire);
	font-size:1.2rem;
	font-weight:bold;
	text-align:center;
	width:100%;
	border-radius:0.6rem;
}

/* Fieldsets */
#formulaire fieldset {
	border:1px solid var(--bord-principal);
	border-radius:1rem;
}

#formulaire fieldset > legend {
	font-size:1rem;
	font-weight:bold;
	text-align:left;
}

/* Paragraphes */
#formulaire p {
	text-align:center;
}

/* Saisie de texte */
#formulaire input[type="text"] {
	padding:0.2rem 0.4rem;
	font-family:"Avenir", sans-serif;
	background-color:var(--fond-principal);
	color:var(--texte-principal);
	font-size:1rem;
	text-align:center;
	border:1px solid var(--bord-principal);
	border-radius:0.2rem;
}
#formulaire input[type="text"]::placeholder {
	font-size:1rem;
	font-weight:normal;
}
#formulaire input[type="time"], #formulaire input[type="date"] {
	display:inline;
	padding:0.2rem 0.4rem;
	font-family:"Avenir", sans-serif;
	font-size:1rem;
	font-weight:normal;
	text-align:center;
	background-color:var(--fond-principal);
	color:var(--texte-principal);
	border:1px solid var(--bord-principal);
	border-radius:0.2rem;
	min-width:70px;
	cursor:text;
}

/* Étiquettes liées aux élements à sélectionner */
#formulaire input[type="checkbox"] + label,
#formulaire input[type="radio"] + label {
	display:inline-block;
	margin:0.4rem 0.2rem;
	padding:0.2rem 0.4rem;
	background-color:var(--fond-coche-non);
	color:var(--texte-coche-non);
	text-decoration:line-through;
	border-radius:0.4rem;
	cursor:pointer;
}
/* Cas des étiquettes d'éléments désactivés */
#formulaire input[disabled="disabled"] + label {
	color:var(--texte-coche-desactivee);
	cursor:not-allowed;
}

/* Mettre en valeur l'étiquette si l'option est activée */
/* Pour les envois */
#formulaire input[type="checkbox"]:checked + label,
#formulaire input[type="radio"]:checked + label {
	background-color:var(--fond-coche-oui);
	color:var(--texte-coche-oui);
	text-decoration:none;
}

/* Ne pas afficher les coches en elles-mêmes */
#formulaire input[type="checkbox"],
#formulaire input[type="radio"] {
	display:none;
}

/* Section train concerné */

#marquage_general {
	order:2;
	flex-grow:0;
	flex-shrink:1;
	flex-basis:auto;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-around;
	align-items:flex-start;
	align-content:flex-start;
	margin:0 auto;
	width:100%;
}

#marquage_general_numerotrain {
	order:1;
	flex-grow:1;
	flex-shrink:1;
	flex-basis:auto;
	display:block;
	margin:0 auto;
	padding:0.2rem;
	border-radius:1rem;
}
/* Saisie de numéro de train */
#marquage_general_numerotrain input[type="text"] {
	display:block;
	margin:1rem auto;
	padding:0.6rem 0;
	font-size:1.4rem;
	font-weight:bold;
	text-align:center;
}

#marquage_general_informations {
	order:1;
	flex-grow:1;
	flex-shrink:1;
	flex-basis:50%;
	display:block;
	margin:0 auto;
	padding:1rem 1rem 0 1rem;
	border-radius:1rem;
}

#marquage_attention {
	display:block;
	font-size:1.2rem;
}
#marquage_attention strong {
	display:block;
	margin:1rem auto 0;
	font-weight:bold;
	font-size:1.2rem;
	color:var(--texte-attention);
}
#marquage_attention.npa {
	display:none;
}

/* Section destinataires */

#marquage_destinataires {
	order:3;
	flex-grow:1;
	flex-shrink:2;
	flex-basis:auto;
	display:block;
	margin:1rem auto;
	width:30%;
}

/* Section types de marquage */

#marquage_types {
	order:4;
	flex-grow:2;
	flex-shrink:1;
	flex-basis:auto;
	display:block;
	margin:1rem auto;
	width:65%;
}

/* Mettre en valeur l'étiquette si la souris passe dessus (garder le texte barré) */
#formulaire input[value="suppression"] + label:hover {
	background-color:var(--fond-train-suppr);
	color:var(--texte-train-suppr);
	transition:all 0.5s ease-in-out;
}
#formulaire input[value="ajout"] + label:hover {
	background-color:var(--fond-train-retabli);
	color:var(--texte-train-retabli);
	transition:all 0.5s ease-in-out;
}
#formulaire input[value="modification"] + label:hover {
	background-color:var(--fond-train-modif);
	color:var(--texte-train-modif);
	transition:all 0.5s ease-in-out;
}
#formulaire input[value="retard"] + label:hover {
	background-color:var(--fond-train-retard);
	color:var(--texte-train-retard);
	transition:all 0.5s ease-in-out;
}
#formulaire input[value="bapo"] + label:hover {
	background-color:var(--fond-train-s11);
	color:var(--texte-train-s11);
	transition:all 0.5s ease-in-out;
}

/* Mettre en valeur l'étiquette si l'option est activée */
#formulaire input[value="suppression"]:checked + label {
	background-color:var(--fond-train-suppr);
	color:var(--texte-train-suppr);
}
#formulaire input[value="ajout"]:checked + label {
	background-color:var(--fond-train-retabli);
	color:var(--texte-train-retabli);
}
#formulaire input[value="modification"]:checked + label {
	background-color:var(--fond-train-modif);
	color:var(--texte-train-modif);
}
#formulaire input[value="retard"]:checked + label {
	background-color:var(--fond-train-retard);
	color:var(--texte-train-retard);
}
#formulaire input[value="bapo"]:checked + label {
	background-color:var(--fond-train-s11);
	color:var(--texte-train-s11);
}

/* Section autres options */

#marquage_options {
	order:5;
	flex-grow:0;
	flex-shrink:1;
	flex-basis:auto;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-items:flex-start;
	align-content:flex-start;
	margin:0 auto;
	padding:1rem;
	width:100%;
}
#marquage_options.npa {
	display:none;
}

#marquage_option_equilibre_precedent {
	order:2;
	flex-grow:1;
	flex-shrink:1;
	flex-basis:auto;
	display:block;
	margin:0 auto;
	padding:1rem;
}
#marquage_option_equilibre_suivant {
	order:3;
	flex-grow:1;
	flex-shrink:1;
	flex-basis:auto;
	display:block;
	margin:0 auto;
	padding:1rem;
}
#marquage_option_od {
	order:1;
	flex-grow:1;
	flex-shrink:1;
	flex-basis:auto;
	display:block;
	margin:0 auto;
	padding:1rem;
	border-bottom:1px dotted var(--bord-principal);
	width:100%;
}
#marquage_option_derrieretrain {
	order:5;
	flex-grow:1;
	flex-shrink:1;
	flex-basis:auto;
	display:block;
	margin:0 auto;
	padding:1rem;
}
#marquage_option_retard {
	order:4;
	flex-grow:1;
	flex-shrink:1;
	flex-basis:auto;
	display:block;
	margin:0 auto;
	padding:0.5rem;
}
#marquage_option_informations {
	order:6;
	flex-grow:1;
	flex-shrink:1;
	flex-basis:auto;
	display:block;
	margin:0.6rem auto 0;
	padding:0.6rem;
	font-size:0.9rem;
	width:100%;
}

/* Bouton d'envoi */

#marquage_envoi {
	order:6;
	align-self:flex-end;
	margin:1rem 0;
	width:100%;
}

#marquage_envoi button {
	padding:1rem;
	background-color:var(--fond-bouton);
	color:var(--texte-bouton);
	font-family:"Avenir", sans-serif;
	font-size:1.2rem;
	font-weight:bold;
	border:none;
	border-radius:1rem;
	cursor:pointer;
}