/***************************
*									*
*			MEUH		3			*
*									*
*		Fichier de style		*
*		MODULE		LAIT		*
*									*
***************************/


/************************
*		CONTENEURS			*
*************************/

#lait {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	align-self:stretch;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-evenly;
	align-items:stretch;
	align-content:flex-start;
	margin:0;
	padding:0;
	background-color:var(--fond-complementaire);
	color:var(--texte-principal);
	width:100vw;
	border-top-right-radius:2rem;
	border-top-left-radius:2rem;
}

#lait h2 {
	flex-basis:100%;
	display:block;
	margin:1rem;
	text-align:center;
}

/************************
*		PARTIE Ligne		*
*************************/


/* Section : en-tête */

#lait #ligne {
	order:1;
	flex-grow:1;
	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;
	padding:1rem;
	background-color:var(--fond-complementaire);
	color:var(--texte-principal);
	line-height:1.2;
	width:100%;
	border-left:1px solid var(--bord-secondaire);
}

#lait #ligne ul {
	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:stretch;
	margin:0;
	padding:0;
	width:75%;
}

#lait #ligne ul li {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	position:relative;
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:flex-start;
	align-items:center;
	align-content:center;
	margin:0.4rem;
	padding:1rem;
	list-style-type:none;
	background-color:var(--fond-principal);
	color:var(--texte-principal);
	font-size:1.4rem;
	font-weight:bold;
	text-align:left;
	border:1px solid var(--bord-secondaire);
	border-left:10px solid var(--bord-secondaire);
	border-radius:1rem;
	width:85%;
}

#lait #ligne picture {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:inline-block;
	margin:auto 0.2rem;
}

#lait #ligne picture img {
	display:inline-block;
	margin:0;
	padding:0;
	width:48px;
	height:auto;
	vertical-align:middle;
	text-align:left;
}

#lait #ligne span {
	flex-grow:1;
	flex-shrink:1;
	flex-basis:auto;
	display:inline-block;
	margin:auto auto auto 0.8rem;
	
}

#lait #ligne span + picture img {
	width:auto;
	height:48px;
}

/* Section : arrêts */

#lait #arrets {
	order:2;
	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;
	align-content:flex-start;
	margin:0 1rem;
	padding:1rem;
	background-color:var(--fond-complementaire);
	color:var(--texte-principal);
	line-height:1.2;
	width:25%;
}

/* Section : plan de transport */
/* Dans garde on va séparer cette zone en deux avec pature : plan de transport et trajet en détail. */

#lait #pdt {
	order:3;
	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;
	align-content:flex-start;
	margin:0;
	padding:1rem;
	background-color:var(--fond-complementaire);
	color:var(--texte-principal);
	line-height:1.2;
	width:70%;
}

/* Sélecteur dans #pdf */
#lait #pdt .selecteur {
	order:1;
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	width:60%;
}

#lait #pdt #trajets {
	order:2;
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:block;
	width:60%;
}

#lait #pdt #trajets .rien {
	margin:1rem auto;
}

#lait #pdt #trajets table {
	display:table;
	border-collapse:collapse;
	width:100%;
}

#lait #pdt #trajets thead {
	display:none;
}

#lait #pdt #trajets tbody {
	display:flex;
	flex-direction:column;
	flex-wrap:nowrap;
	justify-content:flex-start;
	align-items:stretch;
	align-content:flex-start;
}

#lait #pdt #trajets tr {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:flex-start;
	align-items:center;
	align-content:center;
	margin:0.4rem 0 0;
	padding:0.4rem;
	background-color:var(--fond-principal);
	color:var(--texte-principal);
	border:1px solid var(--bord-secondaire);
	border-left:5px solid var(--bord-secondaire);
	border-radius:0.4rem;
}

#lait #pdt #trajets .heure {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	margin:0;
	padding:0.4rem;
	font-weight:bold;
}

#lait #pdt #trajets .zone {
	flex-grow:2;
	flex-shrink:1;
	flex-basis:auto;
	display:inline-block;
	margin:0;
	padding:0.4rem;
	width:35%;
}

#lait #pdt #trajets .details {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	margin:0;
	padding:0.4rem;
	text-align:center;
	width:25%;
}

#lait #pdt #trajets .details .reference {
	display:inline-block;
	font-family:"Dotrice", "Parisine", sans-serif;
	font-size:1rem;
}

#lait #pdt #trajets .origine {
	border-left:2px solid var(--bord-principal);
	text-align:left;
}

#lait #pdt #trajets .destination {
	border-right:2px solid var(--bord-principal);
	text-align:right;
}