/***************************************************************
*																					*
*		GESTION DES MODIFICATIONS ET SUPPRESSIONS DE TRAINS		*
*									GSMT v2										*
*						FEUILLE DE STYLE PRINCIPALE						*
*									ÉCRAN											*
****************************************************************/

/************************/
/* Définitions communes */
/************************/

* {
	box-sizing:border-box;
}

a {
	color:var(--texte-principal);
	text-decoration:none;
}
a:hover {
	text-decoration:none;
}

strong {
	font-weight:bold;
}

.rien {
	font-size:2rem;
	font-weight:bold;
	text-align:center;
	color:var(--texte-fade);
}

.npa {
	display:none;
}

/**************/
/* Conteneurs */
/**************/

body {
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-items:stretch;
	align-content:stretch;
	margin:0;
	padding:0;
	font-family:'Avenir', sans-serif;
	min-height:100vh;
}

header {
	order:1;
	flex:0 0 auto;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
	align-content:center;
	margin:0;
	padding:0;
	width:100vw;
	background-color:var(--fond-entete);
	color:var(--texte-entete);
}

footer {
	order:3;
	flex:0 0 auto;
	align-self:flex-end;
	display:block;
	padding:0.2rem 0.4rem;
	background-color:var(--fond-principal);
	color:var(--texte-principal);
	border-top:1px solid var(--bord-principal);
	font-size:0.8rem;
	text-align:right;
	width:100vw;
	border-top:1px dotted var(--bord-principal);
}
footer p { margin:0; }

main {
	order:2;
	flex-grow:2;
	flex-shrink:0;
	flex-basis:auto;
	display:flex;
	flex-flow:row wrap;
	justify-content:flex-start;
	align-items:stretch;
	align-content:stretch;
	margin:0;
	padding:0;
	background-color:var(--fond-principal);
	color:var(--texte-principal);
	width:100vw;
}

/* En-tête */

h1 {
	order:2;
	flex-grow:2;
	flex-shrink:2;
	flex-basis:auto;
	display:block;
	text-align:left;
	font-size:1.2rem;
	font-weight:bold;
	vertical-align:middle;
}
h1 span.version {
	display:inline-block;
	margin:0 0.6rem;
	font-weight:normal;
	font-size:1rem;
}
h2 {
	order:3;
	flex-grow:2;
	flex-shrink:2;
	flex-basis:auto;
	display:block;
	text-align:left;
	font-size:1.2rem;
	font-weight:normal;
}

header picture {
	order:1;
	display:block;
	margin:0.2rem 1rem;
}
header picture > img {
	width:auto;
	height:42px;
	vertical-align:middle;
}

#heure {
	order:5;
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:block;
	margin:0.6rem 1rem;
	font-size:2rem;
	font-weight:bold;
}
#heure small {
	font-size:1.4rem;
}

#date {
	order:4;
	flex-grow:0;
	flex-shrink:1;
	flex-basis:auto;
	display:block;
	margin:1rem 1rem 1rem 0.2rem;
	font-size:1rem;
	font-weight:normal;
}

/* Menu */
nav {
	order:6;
	flex-grow:0;
	flex-shrink:0;
	flex-basis:100%;
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:space-between;
	align-items:stretch;
	align-content:stretch;
	margin:0;
	padding:0;
	border-top:1px solid var(--bord-menu);
}
nav ul {
	flex-grow:1;
	flex-shrink:1;
	flex-basis:auto;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-items:stretch;
	align-content:stretch;
	list-style-type:none;
	margin:0;
	padding:0;
}
nav ul:last-child {
	justify-content:flex-end;
}
nav ul li {
	list-style-type:none;
	margin:0;
	padding:0.5rem 1rem;
}
nav ul:first-child li {
	border-right:1px solid var(--bord-menu);
}
nav ul:last-child li {
	border-left:1px solid var(--bord-menu);
}
nav ul:first-child li:last-child {
	border-right:none;
}

nav ul li#marquer {
	padding:0.4rem 1.6rem;
	font-size:1.2rem;
	font-weight:bold;
}

nav a {
	color:var(--texte-menu);
}

/* Temporaire */
nav .menu-actif {
	background-color:var(--fond-menu-actif);
}

nav ul li picture {
	display:inline-block;
	margin:0 0.4rem 0 0;
	vertical-align:sub;
}
nav ul li picture img {
	height:20px; width:auto;
	vertical-align:middle;
}

/* Bandeau */
#bandeau {
	order:7;
	flex-grow:1;
	flex-shrink:0;
	flex-basis:100%;
	margin:0 auto;
	padding:0.4rem 1rem;
	background-color:var(--fond-bandeau);
	color:var(--texte-bandeau);
}
#bandeau p {
	margin:0;
}

/* 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;
}

/********************/
/* Listes de Trains */
/********************/

#trains {
	order:2;
	flex-grow:2;
	flex-shrink:1;
	flex-basis:65%;
	align-self:stretch;
	display:flex;
	flex-direction:column;
	flex-wrap:nowrap;
	justify-content:space-between;
	align-items:flex-start;
	align-content:space-between;
	margin:0;
	padding:1rem;
}


/*************/
/* Marquages */
/*************/

#marquages {
	flex-grow:1;
	flex-shrink:1;
	flex-basis:auto;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-items:flex-start;
	width:100%;
	background-color:pink;
}

/* Nouvelle liste = trains à l'affichage pour attention */

#nouvelle_liste {
	order:1;
	flex-grow:1;
	flex-shrink:1;
	flex-basis:auto;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-items:flex-start;
	margin:1rem;
	padding:1rem;
	width:100%;
	background-color:powderblue;
}

#nouvelle_liste .train {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	align-content:flex-start;
	margin:1rem;
	text-align:center;
}
#nouvelle_liste .train p {
	margin:0;
	text-align:center;
}
#nouvelle_liste .train button {
	display:block;
	margin:0 auto;	
}

#nouvelle_liste .repere strong {
	background-color:var(--fond-obsolete);
	color:var(--texte-obsolete);
	font-weight:bold;
}

#nouvelle_liste .numero {
	margin:0;
	padding:1.2rem;
	border-radius:1rem;
	font-size:2.4rem;
	font-weight:bold;
	text-align:center;
	background-color:var(--fond-train-standard);
	color:var(--texte-train-standard);
}

#nouvelle_liste .numero span {
	display:block;
	padding:0 0.2rem;
	font-size:1rem;
	text-align:center;	
	border-radius:0.4rem;
}

#nouvelle_liste .suppression, #nouvelle_liste .suppression span {
	--fond-attention-contextuel:var(--fond-train-suppr);
	background-color:var(--fond-train-suppr);
	color:var(--texte-train-suppr);
}
#nouvelle_liste .retard, #nouvelle_liste .retard span {
	--fond-attention-contextuel:var(--fond-train-retard);
	background-color:var(--fond-train-retard);
	color:var(--texte-train-retard);
}
#nouvelle_liste .ajout, #nouvelle_liste .ajout span {
	--fond-attention-contextuel:var(--fond-train-retabli);
	background-color:var(--fond-train-retabli);
	color:var(--texte-train-retabli);
}
#nouvelle_liste .modification, #nouvelle_liste .modification span {
		--fond-attention-contextuel:var(--fond-train-modif);
	background-color:var(--fond-train-modif);
	color:var(--texte-train-modif);
}
#nouvelle_liste .bapo, #nouvelle_liste .bapo span {
	--fond-attention-contextuel:var(--fond-train-s11);
	background-color:var(--fond-train-s11);
	color:var(--texte-train-s11);
}
#nouvelle_liste .rétabli, #nouvelle_liste .rétabli span {
	--fond-attention-contextuel:var(--fond-train-retabli);
	background-color:var(--fond-train-retabli);
	color:var(--texte-train-retabli);
}

/* attirer l'attention sur l'AC */

#nouvelle_liste .attention {
	animation:clignote 1s linear infinite;
}

#nouvelle_liste .gestion_train {
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	justify-content:center;
	align-items:flex-start;
	align-content:flex-start;
}

/*****************/
/* Vieille liste */
/*****************/

/* Vieille liste = trains déjà pris en compte */

#vieille_liste {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-items:flex-start;
	align-content:flex-start;
}
#vieille_liste h3 {
	flex-grow:2;
	flex-shrink:0;
	flex-basis:100%;
	text-align:left;
}
#vieille_liste .rien {
	font-size:1.2rem;
}

#vieille_liste .train {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:flex;
	flex-direction:column;
	flex-wrap:nowrap;
	justify-content:flex-start;
	align-items:center;
	align-content:flex-start;
	margin:0.6rem;
	background-color:var(--fond-secondaire);
	text-align:center;
	border-radius:0.4rem;
	min-width:150px;
}
#vieille_liste .numero {
	margin:0 0.2rem;
	padding:0.4rem 0.4rem 0.2rem;
	border-radius:0;
	font-size:1.2rem;
	font-weight:bold;
	background-color:var(--fond-secondaire);
	color:var(--texte-principal);
	vertical-align:middle;
}
#vieille_liste .numero span {
	display:inline-block;
	padding:0 0.2rem;
	font-size:1rem;
	text-align:center;
	border-radius:0.4rem;
}
#vieille_liste .suppression {
	background-color:var(--fond-train-suppr);
	color:var(--texte-train-suppr);
}
#vieille_liste .retard {
	background-color:var(--fond-train-retard);
	color:var(--texte-train-retard);
}
#vieille_liste .ajout {
	background-color:var(--fond-train-retabli);
	color:var(--texte-train-retabli);
}
#vieille_liste .modification {
	background-color:var(--fond-train-modif);
	color:var(--texte-train-modif);
}
#vieille_liste .bapo {
	background-color:var(--fond-train-s11);
	color:var(--texte-train-s11);
}
#vieille_liste .rétabli {
	background-color:var(--fond-train-retabli);
	color:var(--texte-train-retabli);
}
#vieille_liste .gestion_train {
	margin:0 0.2rem;
}

.vl_interrupt {
	display:inline;
}

/* Communs aux deux listes */

.prise_en_compte {
	margin:0.4rem auto;
	padding:0;
}

.prise_en_compte ul {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	align-items:flex-start;
	align-content:flex-start;
	list-style-type:none;
	padding:0;
}
.prise_en_compte li {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:inline-block;
	margin:0 0.1rem;
	padding:0.2rem;
	font-size:1rem;
	text-align:center;
	list-style-type:none;
	border:2px solid var(--bord-principal);
	border-radius:0.4rem;
}
.prise_en_compte picture {
	display:inline-block;
}
.prise_en_compte img {
	width:auto; height:20px;
	vertical-align:middle;
}

/* Formulaire de prise en compte */

.pec_train {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	margin:0.2rem auto;
}

.pec_train legend { display:none; }
.pec_train button {
	display:block;
	margin:0 auto;
}
.pec_train button img {
	width:auto; height:20px;
	vertical-align:text-top;
}

/* Formulaire de modification de destinataires */

.modifier_destinataires {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	align-items:flex-start;
	align-content:flex-start;
	margin:0.2rem auto;
}

.modifier_destinataires legend { display:none; }
.modifier_destinataires form {
	display:block;
	margin:0 0.2rem;
}
.modifier_destinataires button img {
	width:auto; height:16px;
	vertical-align:text-top;
}

/**************************/
/* 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;
}

/******************/
/* Identification */
/******************/

.sid {
	flex:2 0 auto;
	align-self:flex-start;
	display:block;
	margin:1rem auto;
	padding:1rem;
	max-width:75%;
}

.sid > p {
	text-align:center;
}

.sid > p:first-child {
	margin:2rem auto;
}

.sid img {
	width:auto;
	height:24px;
}


.sid form {
	position:relative;
	display:block;
	margin:2rem auto;
	padding:0;
	text-align:center;
	border:1px solid var(--bord-principal);
	border-radius:0.6rem;
	width:50%;
}

.sid form p {
	position:relative;
	margin:2rem auto;
	width:50%;
	text-align:left;
	overflow-x:visible;
	white-space:nowrap;
}

.sid form legend {
	margin:0;
	padding:0.4rem;
	background-color:var(--fond-secondaire);
	color:var(--texte-principal);
	font-size:1.2rem;
	font-weight:normal;
	border-bottom:1px solid var(--bord-secondaire);
	border-top-left-radius:0.6rem;
	border-top-right-radius:0.6rem;
}

.sid form label {
	display:inline-block;
	text-align:left;
}

.sid form span.montrercacher {
	display:inline-block;
	margin-left:0.2rem;
	vertical-align:middle;
	cursor:pointer;
}

.sid form p.form_centre {
	margin:0.4rem;
	text-align:center;
	width:100%;
	white-space:normal;
}

.sid form input[type="text"], .sid form input[type="password"], .sid form input[type="date"], .sid form input[type="datetime-local"] {
	padding:0.6rem;
	width:100%;
	border-radius:0.6rem;
}

/*****************************/
/* Définition des animations */
/*****************************/

@keyframes clignote {
	0% { background-color:var(--fond-attention-contextuel); }
	50% { background-color:transparent; }
	100% { background-color:var(--fond-attention-contextuel); }
}





/********* TEST ************/