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


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

#garde {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	align-self:stretch;
	display:grid;
	grid-template-columns:25% 75%;
	grid-template-rows:minmax(0, auto) 1fr; /* Masonry un jour */
	grid-template-areas:"intro nav" "intro contenu";
	gap:0;
	justify-items:stretch;
	align-items:start;
	justify-content:space-between;
	align-content: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;
}


/************************
*		PARTIE INTRO		*
*************************/

/* Section : intro / manchette */

#garde #intro {
	grid-area:intro;
	position:sticky;
	top:0.8rem;
	display:block;
	margin:0;
	padding:1rem;
	line-height:1.2;
}

/* Sous-sections */

#garde #parent {

}

#garde #enfants {
	max-height:82vh;
	overflow-y:auto;
}

/* Boîtes pour chaque arrêt */

#garde #intro .arret {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-items:stretch;
	align-content:stretch;
	margin:1rem auto;
	padding:0;
	border-bottom:1px solid var(--bord-secondaire);
}
#garde #intro .arret:first-child {
	margin-top:0;
}

/* Intérieur des boîtes */

#garde #intro h2 {
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:flex-start;
	align-items:center;
	align-content:flex-start;
	margin:auto;
	padding:0;
	width:100%;
	font-size:1.2rem;
	text-align:left;
}
#garde #intro #parent h2 {
	font-size:1.6rem;
}
#garde #intro #parent h2 picture img {
	height:36px;
	vertical-align:middle;
}
#garde #intro #parent ul.lignes li picture img {
	width:28px;
	height:auto;
	vertical-align:middle;
}

#garde #intro h2 picture {
	order:1;
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:block;
	margin:auto 1rem auto 1rem;
}
#garde #intro h2 picture img {
	display:inline-block;
	margin:0;
	width:auto;
	height:20px;
	vertical-align:bottom;
}

#garde #intro h2 span {
	order:2;
	flex-grow:1;
	flex-shrink:1;
	flex-basis:auto;
	display:inline-block;
	margin:auto;
	padding:0;
}

#garde #intro .arret p {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:100%;
	display:block;
	margin:0.4rem 0;
	text-align:left;
}

#garde #intro .arret ul {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:start;
	align-items:center;
	align-content:flex-start;
	margin:0.2rem 0 0 3rem;
	padding:0;
	list-style-type:none;
	width:100%;
}
#garde #intro .arret ul.lignes {
	width:80%;
}
#garde #intro .arret ul.lignes:nth-child(2) { /* 2e car h2 avant */
	margin-top:0.6rem;
}
#garde #intro .arret ul:last-child {
	margin-bottom:0.4rem;
}
#garde #intro .arret ul.reseaux {
	margin:1rem 3rem;
}

#garde #intro .arret ul li {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:block;
	padding:0;
}

#garde #intro .arret ul.reseaux li {
	margin:0.4rem 1.4rem 0 0;
}
#garde #intro .arret ul.lignes li {
	margin:0.2rem 2px;
}

#garde #intro .arret ul.reseaux li picture img {
	width:auto;
	height:20px;
	vertical-align:middle;
}
#garde #intro .arret ul.lignes li picture img {
	width:24px;
	height:auto;
	vertical-align:middle;
}

/************************
*		PARTIE DETAILS		*
*************************/

/* Section : navigation */

#garde nav {
	grid-area:nav;
	z-index:20;
	position:sticky;
	top:0;
	display:block;
	margin:0;
	padding:1rem;
	background-color:var(--fond-complementaire);
	color:var(--texte-principal);
	text-align:center;
	width:100%;
	border-left:1px solid var(--bord-secondaire);
	border-top-right-radius:2rem;
}

#garde nav > ul {
	background-color:var(--fond-principal);
	color:var(--texte-principal);
}

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

#garde #details {
	grid-area:contenu;
	align-self:stretch;
	z-index:10;
	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:100%;
	border-left:1px solid var(--bord-secondaire);
}

/* Sélecteur dans #details */
#garde #details .selecteur {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	width:60%;
}