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

/* Définitions communes */

* { 
	box-sizing:border-box;
}

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

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-flow:column 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:flex-start;
	align-items:center;
	align-content:center;
	margin:0;
	padding:0;
	width:100%;
	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:center;
	width:100vw;
	border-top:1px dotted var(--bord-principal);
}
footer p { margin:0; }

main {
	order:2;
	flex:2 0 auto;
	display:flex;
	flex-direction:column;
	flex-wrap:nowrap;
	justify-content:flex-start;
	align-items:stretch;
	align-content:stretch;
	margin:0;
	padding:0;
	background-color:var(--fond-principal);
	color:var(--texte-principal);
}

/* En-tête */

h1 {
	order:2;
	flex-grow:2;
	flex-shrink:1;
	flex-basis:auto;
	display:block;
	margin:0.2rem auto 0;
	padding:0;
	text-align:center;
	font-size:1.2rem;
}

h2 {
	order:4;
	flex-grow:2;
	flex-shrink:0;
	flex-basis:auto;
	display:block;
	margin:0 auto 0.4rem;
	font-size:1rem;
	font-weight:normal;
	width:100%;
	text-align:center;
}

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

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


#date {
	display:none;
}

/* Bandeau */
#bandeau {
	order:5;
	flex-grow:1;
	flex-shrink:0;
	flex-basis:auto;
	margin:0 auto;
	padding:0.4rem 1rem;
	background-color:var(--fond-bandeau);
	color:var(--texte-bandeau);
	font-size:0.8rem;
}
#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);
}

#form_test {
	background-color:white;
	color:black;
	margin:auto;
	padding:1rem;
	font-weight:bold;
	box-shadow:0.4rem 0.4rem 0.4rem rgba(0,0,0,.5);
	border-radius:1rem;
	max-width:100%;
	max-height:100%;
}

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




/* Trains */

#trains {
	order:2;
	flex-grow:2;
	flex-shrink:1;
	flex-basis:75%;
	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:0;
}

/* Nouvelle liste = trains à l'affichage pour attention */
#nouvelle_liste {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-around;
	align-items:flex-start;
	width:100%;
}

#nouvelle_liste .train {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:30%;
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	align-content:flex-start;
	margin:0.4rem auto;
	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:1rem 0.4rem;
	font-size:1.8rem;
	font-weight:bold;
	text-align:center;
	background-color:var(--fond-train-standard);
	color:var(--texte-train-standard);
	border-radius:1rem;
}

#nouvelle_liste .numero span {
	display:block;
	padding:0 0.2rem;
	font-size:0.8rem;
	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 = 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:center;
	align-items:flex-start;
	align-content:flex-start;
	margin:1rem 0;
	padding:1rem 0;
	border-top:1px dotted var(--bord-principal);
	border-bottom:1px dotted var(--bord-principal);
}
#vieille_liste h3 {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:90%;
	text-align:center;
	font-size:0.8rem;
}
#vieille_liste .rien {
	font-size:1.2rem;
}

#vieille_liste .train {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:30%;
	display:flex;
	flex-direction:column;
	flex-wrap:nowrap;
	justify-content:flex-start;
	align-items:center;
	align-content:flex-start;
	margin:0.2rem;
	background-color:var(--fond-secondaire);
	text-align:center;
	border-radius:0.4rem;
}
#vieille_liste .numero {
	margin:0 0.2rem;
	padding:0.4rem 0.4rem 0.2rem;
	border-radius:0;
	font-size:1rem;
	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:0.8rem;
	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:0.8rem;
	text-align:center;
	list-style-type:none;
	border:1px solid var(--bord-principal);
	border-radius:0.4rem;
}
.prise_en_compte picture {
	display:inline-block;
}
.prise_en_compte img {
	width:auto; height:16px;
	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;
}
#vieille_liste .pec_train button {
	display:block;
	margin:0 auto;
	font-size:0.6rem;
}
.pec_train button img {
	width:auto; height:16px;
	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;
}

/* Formulaires complets */

#formulaire {
	order:3;
	flex-grow:0;
	flex-shrink:0;
	flex-basis:20%;
	display:block;
	margin:0;
	padding:1rem;
}

#formulaire form > legend {

	font-size:1rem;
	font-weight:bold;
	text-align:center;
}

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

#formulaire p {
	text-align:center;
}

#formulaire fieldset {
	border-radius:1rem;
}

#formulaire input[type="text"] {
	display:block;
	margin:1rem auto;
	padding:0.6rem 0;
	font-family:"Avenir", sans-serif;
	font-size:1.2rem;
	font-weight:bold;
	text-align:center;
	background-color:var(--fond-principal);
	color:var(--texte-principal);
	border:1px solid var(--bord-principal);
	border-radius:0.4rem;
}
#formulaire input[type="text"]::placeholder {
	font-size:1rem;
	font-weight:normal;
}

/* Définir l'étiquette pour les options */
#formulaire input[type="checkbox"] + label,
#formulaire input[type="radio"] + label {
	display:inline-block;
	margin:0 0.2rem;
	padding:0.2rem 0.4rem;
	background-color:var(--fond-coche-non);
	color:var(--texte-coche-non);
	text-decoration:line-through;
	font-size:1rem;
	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;
}
/* Pour les types */
#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);
}

/* Ne pas afficher les coches en elles-mêmes */
#formulaire input[type="checkbox"],
#formulaire input[type="radio"] {
	display:none;
}
/* Pointeur pour le type temps */
#formulaire input[type="time"] {
	background-color:var(--fond-principal);
	color:var(--texte-principal);
	border:1px solid var(--bord-principal);
	cursor:text;
}

/* Identification */

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

.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:100%;
}

.sid form p {
	position:relative;
	margin:2rem auto;
	width:75%;
	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 auto;
	text-align:center;
	width:75%;
	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); }
}