/***************************
*									*
*			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:100%;
	grid-template-rows:minmax(0, auto) 1fr; /* Masonry un jour */
	grid-template-areas:"nav" "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;
}


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

/* Section : intro / manchette */

#garde #intro {
	display:none;
}

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

/* Section : navigation */

#garde nav {
	grid-area:nav;
	z-index:20;
	position:sticky;
	top:0;
	display:none;
	margin:0;
	padding:1rem;
	background-color:var(--fond-complementaire);
	color:var(--texte-principal);
	text-align:center;
	width:100%;
	border:none;
}

#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:0;
	background-color:var(--fond-complementaire);
	color:var(--texte-principal);
	line-height:1.2;
	width:100%;
	border:none;
}

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