/***************************
*									*
*			MEUH		3			*
*									*
*		Fichier de style		*
*		MODULE		CORNE		*
*				MOBILE			*
***************************/


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

#corne {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	align-self:stretch;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	align-items:flex-start;
	align-content:flex-start;
	margin:0;
	padding:0;
	background-color:var(--fond-principal);
	color:var(--texte-principal);
	width:100vw;
}

#corne h2 {
	order:1;
	flex-grow:2;
	flex-shrink:0;
	flex-basis:100%;
	display:block;
	margin:1rem;
	text-align:center;
}


/************************
*		PARTIE RÉSEAUX		*
*************************/

#reseaux_liste {
	order:2;
	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;
	padding:0;
	width:100%;
}

#reseaux_liste ul {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:flex;
	flex-flow:row wrap;
	justify-content:center;
	align-items:stretch;
	align-content:stretch;
	margin:1rem auto;
	padding:0;
	list-style-type:none;
	background-color:var(--fond-complementaire);
	color:var(--texte-principal);
	width:95%;
}

#reseaux_liste ul li {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	position:relative;
	display:block;
	margin:0.4rem;
	padding:0.4rem 1rem;
	list-style-type:none;
	background-color:var(--fond-principal);
	color:var(--texte-principal);
	text-align:center;
	border:1px solid var(--bord-secondaire);
	border-radius:1rem;
	width:45%;
	transition:background-color 0.5s linear;
}

#reseaux_liste ul li:hover {
	background-color:var(--fond-selection);
	transition:background-color 0.5s linear;
}

/* logos des réseaux */
#reseaux_liste a {
	display:block;
	margin:0 auto;
}
#reseaux_liste picture {
	display:block;
	margin:0 auto;
}
#reseaux_liste picture img {
	margin:0 auto;
	width:auto;
	height:48px;
	vertical-align:middle;
	text-align:center;
}


#reseaux_liste .drapeau {
	position:absolute;
	top:-0.25rem;
	left:-0.25rem;
}
#reseaux_liste .drapeau img {
	width:auto;
	height:16px;
	border:1px solid var(--bord-secondaire);
	border-radius:0.2rem;
}


/************************
*		PARTIE RÉSEAU		*
*************************/

/* Section : réseau intro / manchette */

#corne #intro {
	order:1;
	display:flex;
	flex-direction:column;
	flex-wrap:nowrap;
	justify-content:flex-start;
	align-items:stretch;
	align-content:stretch;
	margin:0;
	padding:0;
	line-height:1.2;
}

#corne #intro h2 {
	order:1;
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:block;
	margin:1rem auto auto;
	padding:0;
	width:85%;
	text-align:left;
}

#corne #intro h2 picture {
	display:block;
	margin:auto;
}
#corne #intro h2 picture img {
	display:block;
	margin:0 auto;
	width:auto;
	max-width:85%;
	height:auto;
	max-height:48px;
}

#corne #intro #details {
	order:2;
	flex-grow:1;
	flex-shrink:1;
	flex-basis:auto;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-around;
	align-items:stretch;
	align-content:stretch;
	margin:0.4rem;
	padding:0;
}

#corne #intro #details p {
	flex-grow:1;
	flex-shrink:1;
	flex-basis:auto;
	display:block;
	margin:0.6rem auto;
	padding:0;
	width:100%;
}
#corne #intro #details p:has(picture) {
	margin:0.6rem auto 0.6rem;
	text-align:center;
	max-width:40%;
}

#corne #intro p picture {
	display:block;
	margin:0.6rem auto 0.2rem;
}
#corne #intro p picture img {
	display:block;
	margin:0.4rem auto;
	width:auto;
	height:20px;
}

/* Partie enfants */

#corne #intro #enfants {
	order:3;
	flex-grow:1;
	flex-shrink:1;
	flex-basis:auto;
	display:block;
	margin:0 0.6rem 1rem;
	padding:0;
}

#corne #enfants p {
	margin:0.4rem;
}

#corne #enfants ul {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:stretch;
	align-content:flex-start;
	margin:0 0 0 auto;
	padding-left:0.4rem;
	background-color:var(--fond-complementaire);
	width:95%;
	max-height:14vh;
	overflow-y:auto;
	border-left:2px solid var(--bord-secondaire);
	border-bottom:2px solid var(--bord-secondaire);
}

#corne #enfants ul li {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	position:relative;
	display:block;
	margin:0.4rem;
	padding:0.4rem;
	list-style-type:none;
	background-color:var(--fond-principal);
	color:var(--texte-principal);
	text-align:center;
	width:45%;
	border:1px solid var(--bord-secondaire);
	border-radius:0.6rem;
	transition:background-color 0.5s linear;
}

#corne #enfants ul li:hover {
	background-color:var(--fond-selection);
	transition:background-color 0.5s linear;
}

/* logos des réseaux */
#corne #enfants a {
	display:block;
	margin:0 auto;
}
#corne #enfants picture {
	display:block;
	margin:0 auto;
}
#corne #enfants picture img {
	margin:0 auto;
	width:auto;
	height:24px;
	vertical-align:middle;
	text-align:center;
}


#corne #enfants .drapeau {
	position:absolute;
	top:-0.3rem;
	left:-0.3rem;
}
#corne #enfants .drapeau img {
	width:auto;
	height:12px;
	border:1px solid var(--bord-secondaire);
	border-radius:0.2rem;
}

/* Section : navigation */

#corne nav {
	order:2;
	z-index:20;
	display:none;
	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;
}

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

/* Section : aperçu */

#corne #apercu {
	order:3;
	display:none;
}

/* Section : liste des lignes */

/*#corne #lignes:not(:target) {
	display:none;
}*/
#corne #lignes {
	order:4;
	align-self:stretch;
	z-index:10;
	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);
}

#corne #lignes 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:100%;
}

#corne #lignes 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.2rem;
	padding:0.4rem;
	list-style-type:none;
	background-color:var(--fond-principal);
	color:var(--texte-principal);
	font-size:1rem;
	font-weight:bold;
	text-align:left;
	border:1px solid var(--bord-secondaire);
	border-left:5px solid var(--bord-secondaire);
	border-radius:0.4rem;
	width:100%;
}

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

#corne #lignes picture img {
	display:inline-block;
	margin:0;
	padding:0;
	width:28px;
	height:auto;
	vertical-align:middle;
	text-align:left;
}

#corne #lignes span {
	flex-grow:1;
	flex-shrink:1;
	flex-basis:auto;
	display:inline-block;
	margin:auto auto auto 0.4rem;
	
}

/* IDF */

#corne #lignes ul li.acacia {
	border:1px solid var(--acacia);
	border-left:5px solid var(--acacia);
}
#corne #lignes ul li.azur {
	border:1px solid var(--azur);
	border-left:5px solid var(--azur);
}
#corne #lignes ul li.boutondor {
	border:1px solid var(--boutondor);
	border-left:5px solid var(--boutondor);
}
#corne #lignes ul li.cobalt {
	border:1px solid var(--cobalt);
	border-left:5px solid var(--cobalt);
}
#corne #lignes ul li.coquelicot {
	border:1px solid var(--coquelicot);
	border-left:5px solid var(--coquelicot);
}
#corne #lignes ul li.framboise {
	border:1px solid var(--framboise);
	border-left:5px solid var(--framboise);
}
#corne #lignes ul li.iris {
	border:1px solid var(--iris);
	border-left:5px solid var(--iris);
}
#corne #lignes ul li.lilas {
	border:1px solid var(--lilas);
	border-left:5px solid var(--lilas);
}
#corne #lignes ul li.marron {
border:1px solid var(--marron);
	border-left:5px solid var(--marron);
}
#corne #lignes ul li.menthe {
	border:1px solid var(--menthe);
	border-left:5px solid var(--menthe);
}
#corne #lignes ul li.ocre {
	border:1px solid var(--ocre);
	border-left:5px solid var(--ocre);
}
#corne #lignes ul li.olive {
	border:1px solid var(--olive);
	border-left:5px solid var(--olive);
}
#corne #lignes ul li.orange {
	border:1px solid var(--orange);
	border-left:5px solid var(--orange);
}
#corne #lignes ul li.parme {
	border:1px solid var(--parme);
	border-left:5px solid var(--parme);
}
#corne #lignes ul li.pervenche {
	border:1px solid var(--pervenche);
	border-left:5px solid var(--pervenche);
}
#corne #lignes ul li.rose {
	border:1px solid var(--rose);
	border-left:5px solid var(--rose);
}
#corne #lignes ul li.sapin {
	border:1px solid var(--sapin);
	border-left:5px solid var(--sapin);
}
#corne #lignes ul li.turquoise {
	border:1px solid var(--turquoise);
	border-left:5px solid var(--turquoise);
}
#corne #lignes ul li.noctilien {
	border:1px solid var(--noctilien);
	border-left:5px solid var(--noctilien);
}
#corne #lignes ul li.frenchberry {
	border:1px solid var(--frenchberry);
	border-left:5px solid var(--frenchberry);
}
#corne #lignes ul li.ouigo-rose {
	border:1px solid var(--ouigo-rose);
	border-left:5px solid var(--ouigo-rose);
}
#corne #lignes ul li.ouigo-bleu {
	border:1px solid var(--ouigo-bleu);
	border-left:5px solid var(--ouigo-bleu);
}
#corne #lignes ul li.noir {
	border:1px solid var(--noir);
	border-left:5px solid var(--noir);
}

/* BX */

#corne #lignes ul li.tbm-raisin {
	border:1px solid var(--tbm-raisin);
	border-left:5px solid var(--tbm-raisin);
}
#corne #lignes ul li.tbm-rouge {
	border:1px solid var(--tbm-rouge);
	border-left:5px solid var(--tbm-rouge);
}
#corne #lignes ul li.tbm-rose {
	border:1px solid var(--tbm-rose);
	border-left:5px solid var(--tbm-rose);
}
#corne #lignes ul li.tbm-violet {
	border:1px solid var(--tbm-violet);
	border-left:5px solid var(--tbm-violet);
}
#corne #lignes ul li.tbm-marron {
	border:1px solid var(--tbm-marron);
	border-left:5px solid var(--tbm-marron);
}
#corne #lignes ul li.tbm-orange {
	border:1px solid var(--tbm-orange);
	border-left:5px solid var(--tbm-orange);
}
#corne #lignes ul li.tbm-turquoise {
	border:1px solid var(--tbm-turquoise);
	border-left:5px solid var(--tbm-turquoise);
}
#corne #lignes ul li.tbm-indigo {
	border:1px solid var(--tbm-indigo);
	border-left:5px solid var(--tbm-indigo);
}
#corne #lignes ul li.tbm-lianes {
	border:1px solid var(--tbm-lianes);
	border-left:5px solid var(--tbm-lianes);
}
#corne #lignes ul li.tbm-locales {
	border:1px solid var(--tbm-locales);
	border-left:5px solid var(--tbm-locales);
}
#corne #lignes ul li.tbm-directes {
	border:1px solid var(--tbm-directes);
	border-left:5px solid var(--tbm-directes);
}
#corne #lignes ul li.tbm-principales {
	border:1px solid var(--tbm-principales);
	border-left:5px solid var(--tbm-principales);
}
#corne #lignes ul li.tbm-scodi {
	border:1px solid var(--tbm-scodi);
	border-left:5px solid var(--tbm-scodi);
}
#corne #lignes ul li.tbm-nuit {
	border:1px solid var(--tbm-nuit);
	border-left:5px solid var(--tbm-nuit);
}

/* EU */

#corne #lignes ul li.bleurostar {
	border:1px solid var(--bleurostar);
	border-left:5px solid var(--bleurostar);
}
#corne #lignes ul li.thalys {
	border:1px solid var(--thalys);
	border-left:5px solid var(--thalys);
}

/* CH */

#corne #lignes ul li.swiss {
	border:1px solid var(--swiss);
	border-left:5px solid var(--swiss);
}

/* ES */

#corne #lignes ul li.renfe {
	border:1px solid var(--renfe);
	border-left:5px solid var(--renfe);
}

/* IT */

#corne #lignes ul li.ti-rossa {
	border:1px solid var(--ti-rossa);
	border-left:5px solid var(--ti-rossa);
}
#corne #lignes ul li.ti-argento {
	border:1px solid var(--ti-argento);
	border-left:5px solid var(--ti-argento);
}