/* police B612 */
@font-face { font-family: B612; font-weight: normal; font-style:normal; src: url("../font/B612/B612-Regular.ttf"); }
@font-face { font-family: B612; font-weight: bold; font-style:normal; src: url('../font/B612/B612-Bold.ttf');}
@font-face { font-family: B612; font-weight: normal; font-style:italic; src: url('../font/B612/B612-Italic.ttf');}
@font-face { font-family: B612; font-weight: bold; font-style:italic; src: url('../font/B612/B612-BoldItalic.ttf');}

/* police CFF */
@font-face { font-family: CFF; font-weight: normal; font-style:normal; src: url("../font/SBB-Fonts/SBBWeb-Light.ttf"); }
@font-face { font-family: CFF; font-weight: bold; font-style:normal; src: url('../font/SBB-Fonts/SBBWeb-Bold.ttf');}
@font-face { font-family: CFF; font-weight: normal; font-style:italic; src: url('../font/SBB-Fonts/SBBWeb-Italic.ttf');}
@font-face { font-family: CFF; font-weight: condensed; font-style:normal; src: url('../font/SBB-Fonts/SBBWeb-Condensed-Heavy.ttf');}

/* police FiraCode */
@font-face { font-family: FiraCode; font-weight: normal; font-style:normal; src: url("../font/FiraCode/FiraCode-Medium.ttf"); }
@font-face { font-family: FiraCode; font-weight: bold; font-style:normal; src: url("../font/FiraCode/FiraCode-Bold.ttf"); }
@font-face { font-family: FiraCode; font-weight: light; font-style:normal; src: url("../font/FiraCode/FiraCode-Light.ttf"); }

/* police Atkinson Hyperlegible */
@font-face { font-family: atk; font-weight: normal; font-style:normal; src: url("../font/Atkinson-Hyperlegible/TTF/Atkinson-Hyperlegible-Regular-102.ttf"); }
@font-face { font-family: atk; font-weight: bold; font-style:normal; src: url('../font/Atkinson-Hyperlegible/TTF/Atkinson-Hyperlegible-Bold-102.ttf');}
@font-face { font-family: atk; font-weight: normal; font-style:italic; src: url('../font/Atkinson-Hyperlegible/TTF/Atkinson-Hyperlegible-Italic-102.ttf');}
@font-face { font-family: atk; font-weight: bold; font-style:italic; src: url('../font/Atkinson-Hyperlegible/TTF/Atkinson-Hyperlegible-BoldItalic-102.ttf');}

:root { /* difinition des variables contenant les couleurs */
	--bgcolordark: #121212;
	--bgcolorlight: #FFFFFF;
	--colonnebgcolorlight: linear-gradient(#e1e1e1, #bebebe);
	--colonnebgcolordark: linear-gradient(#595959, #2c2c2c);
	--fontcolorlight: #000000;
	--fontcolordark: #F0F0F0;
	--fontcoloridlight: #a82ff7;
	--fontcoloriddark: #dba4ff;
	--fontcolorkmlight: #858585;
	--fontcolorkmdark: #dad8d8;
}

body {
	font: 16px/1.5em "atk";
	color: #000000; /* COULEUR DE POLICE PAR DEFAUT */
	background-color: #FFFFFF; /* couleur de fond */
} /* Police générale pour le document */

@media (prefers-color-scheme: light) /* definition des couleurs du mode clair */
{
	body {
		background-color: var(--bgcolorlight);
		color: var(--fontcolorlight);
	}
	.colonne,  /* couleur de fond des colonnes */
	.colonneOld,
	.blocGeo
	{
		background: var(--colonnebgcolorlight);
	}
	a {
		color: var(--fontcolorlight);
	}
	.bloc1 /* affichage du kilometrage */
	{
		color: var(--fontcolorkmlight);
	}
	.bloc2 /* affichage du numéro d'identification */
	{
		color: var(--fontcoloridlight);
	}
	.footer { /* liste de liens en bas de page */
		color: #FFFFFF;
		background-color: rgba(255,255,255,0.6);
	}
}

@media (prefers-color-scheme: dark) /* definition des couleurs du mode clair */
{
	body {
		background-color: var(--bgcolordark);
		color: var(--fontcolordark);
	}
	.colonne, /* couleur de fond des colonnes */
	.colonneOld,
	.blocGeo
	{
		background: var(--colonnebgcolordark);
	}
	a {
		color: var(--fontcolordark);
	}
	.bloc1 /* affichage du kilometrage */
	{
		color: var(--fontcolorkmdark);
	}
	.bloc2 /* affichage du numéro d'identification */
	{
		color: var(--fontcoloriddark);
	}
	.footer { /* liste de liens en bas de page */
		color: #000000;
		background-color: rgba(0,0,0,0.6);
	}
}

/*
 *
 * Uniquement en horizontal
 *
 */
@media (min-width:481px)  {
	.page /* cree un bloc pour defilement horizontal */
	{
		overflow-x: scroll;
		display: inline-flex;
		width: 100%;
	}
	.colonne,
	.colonneOld,
	.blocGeo
	{
		display: grid;
		grid-template-areas:
		'un six'
		'deux six'
		'trois six'
		'quatre six'
		'cinq six';
		padding-top: 5px;
		padding-bottom: 5px;
		margin: 0 4px 0 4px;
		border-radius: 4px;
	}

	.bloc3,
	.bloc3_tunnel {
		grid-area: trois;
	}

	.bloc1 {
		grid-area: un;
	}
	.bloc2,
	.bloc2_zc,
	.bloc2_ze {
		grid-area: deux;
	}
	.bloc4 {
		grid-area: quatre;
	}
	.bloc5 {
		grid-area: cinq;
	}
	.bloc6 {
		grid-area: six;
		min-width: max-content;
	}
}
/*
 *
 * Uniquement en vertical
 *
 */
@media (max-width:481px)  {

	.colonne,
	.colonneOld, .blocGeo /* positionnement des blocs en vertical */
	{
		display: grid;
		grid-template-areas:
		'trois un'
		'trois deux'
		'trois quatre'
		'trois cinq'
		'six six' ;
		padding-top: 5px;
		padding-bottom: 5px;
		margin-top: 4px;
		margin-bottom: 4px;
		border-radius: 4px;
	}
	.bloc3,
	.bloc3_tunnel {
		grid-area: trois;
	}

	.bloc1 {
		grid-area: un;
	}
	.bloc2,
	.bloc2_zc,
	.bloc2_ze {
		grid-area: deux;
	}
	.bloc4 {
		grid-area: quatre;
	}
	.bloc5 {
		grid-area: cinq;
	}
	.bloc6 {
		grid-area: six;
		display: flex;
	}

	.footer { /* liste de liens en bas de page */
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		text-align: center;
	}
}
/*
 *
 * Règles générales
 *
 */
.colonneOld /* Atténue les colonnes des gares / haltes qui n'existe plus */
{
	filter: blur(1.5px);
}

.bloc1 /* affichage du point kilométrique */
{
	height: 16px; /* Hauteur fixe */
	margin-bottom: 0px; /* Marge entre les blocs */
	font-family: atk;
	font-weight: normal;
	font-style:normal;
	font-size: 14px; /* taille de police */
	text-align: center;
}

.bloc2 /* affichage du numéro d'identification */
{
	height: 20px;    /* Hauteur fixe */
	margin-bottom: 2px;    /* Marge entre les blocs */
	margin: auto;
	text-align: center;
	font-family: atk;
	font-weight: normal;
	font-style:normal;
	font-size: 16px; /* taille de police */
	line-height: 20px;
}

.bloc2_ze /* affichage du numéro d'identification ETCS zone etendue */
{
	height: 18px;    /* Hauteur fixe */
	min-width: 50px;
	/* width: fit-content; /* largeur selon contenu */
	padding: 0px 4px;
	margin-bottom: 2px;    /* Marge entre les blocs */
	margin: auto;
	text-align: center;
	color: #000000;
	font-size: 14px; /* taille de police */
	line-height: 18px;
	border: 1px solid #000000;
}

.bloc2_zc /* affichage du numéro d'identification ETCS zone conventionnelle */
{
	height: 20px;    /* Hauteur fixe */
	min-width: 50px;
	padding: 0px 4px;
	margin-bottom: 2px;    /* Marge entre les blocs */
	margin: auto;
	background-color: #2b5ba0;    /*couleur de fond de cellule */
	text-align: center;
	font-size: 14px; /* taille de police */
	line-height: 20px;
	color: #ffffff;
}

.bloc3    /* image du signal */
{
	height: 110px;    /* Hauteur fixe */
	width: 144px;    /* largeur minimum */
	margin-bottom: 0px;    /* Marge entre les blocs */
	padding-top: 12px;   /* espace entre les bords et le contenu */
	display: grid; /* empilement des blocs */
	grid-auto-flow: column; /* organise les images en colonnes */
	grid-template-rows: minmax(0px, min-content) minmax(0px, min-content) minmax(0px, min-content);
}

.bloc3_tunnel   /* image du signal spécial tunnel */
{
	height: 108px;    /* Hauteur fixe */
	width: 144px;    /* largeur minimum */
	margin-bottom: 0px;    /* Marge entre les blocs */
	padding-top: 12px;   /* espace entre les bords et le contenu */
	overflow: hidden;
	background: radial-gradient(farthest-corner at 50% 85%, #212121 25%, #7e7e7e 99%);    /*couleur de fond de cellule */
	border-top: 2px solid black;
	border-left: 2px solid black;
	border-right: 2px solid black;
	border-radius: 40px 40px 0 0 ;    /*arrondi les anlges du haut */
	display: grid; /* empilement des blocs */
	grid-auto-flow: column; /* organise les images en colonnes */
	grid-template-rows: minmax(0px, min-content) minmax(0px, min-content) minmax(0px, min-content);
}

.bloc4    /* Signication principale */
{
	height: 34px;    /* Hauteur fixe */
	width: 140px;
	margin-bottom: 0px;    /* Marge entre les blocs */
	background-color: rgb(52, 231, 223);    /*couleur de fond de cellule */
	border-radius: 5px 5px 5px 5px;    /* arrondi les angles */
	padding: 4px 4px;    /* espace entre texte et bords du bloc */
	text-align: left;
	line-height: 100%;
	color: #000000; /* couleur de police */
}
.bloc4:empty { /* style d'affichage du bloc si il est vide */
	background: rgba(52, 231, 223, 0.2);
}  

.bloc5    /* annonce */
{
	height: 34px;    /* Hauteur fixe */
	width: 140px;
	margin-bottom: 2px;    /* Marge entre les blocs */
	background-color: rgb(236, 174, 87); /*couleur de fond de cellule */
	color: #000000; /* couleur de police */
	border-radius: 5px 5px 5px 5px;    /* arrondi les angles */
	padding: 4px 4px;    /* espace entre texte et bords du bloc */
	text-align: left;
	font-weight: bold;
	line-height: 100%;
}

.bloc5:empty {  /* style d'affichage du bloc si il est vide */
	background: rgba(236, 174, 87, 0.2);
}

.bloc6    /* zone supplémentaire */
{
	margin-bottom: 2px;    /* Marge sous le denrier bloc */
	border-radius: 5px;    /* arrondi les angles */
	padding: 2px 4px;    /* espace entre texte et bords du bloc */
}
.bloc6:empty { /* pas d'affichage du bloc si il est vide */ 
	display: none;
} 

/*.geoLoc {
	border: 1px solid blue; /* bordure par défaut des blocs geolocalisés
}*/

.halte    /* bloc "panneau de halte" */
{
	margin: auto;
	text-align: center;
	min-width: 100px;    /*largeur minimale*/
	max-width: 140px;
	min-height: 20px;
	padding: 5px 5px 5px 5px;    /* centre verticalement le nom de gare */
	background-color: #2d327d;    /*couleur de fond de cellule */
	border-radius: 5px;    /* arrondi les angles */
	color: white;    /* couleur de la police */
	font-family: CFF;    /* police */
	font-style: italic;    /* ecrit en italique */
	line-height: 20px;
}

.gare    /* bloc "panneau de gare" */
{ /* couleur du texte modifie par .gare a */
	margin: auto;
	text-align: center;
	min-width: 100px;    /*largeur minimale*/
	max-width: 140px;
	min-height: 20px;
	padding: 5px 5px 5px 5px;    /* centre verticalement le nom de gare */
	background-color: #2d327d;    /*couleur de fond de cellule */
	border-radius: 5px;    /* arrondi les angles */
	color: white;    /* couleur de la police */
	font-family: CFF;    /* police */
	font-weight: bold;    /* ecrit en gras */
	line-height: 20px;
}

.gare a /* si le nom de gare est un lien, couleur du lien */
{
	color: #FFFFFF;
}
.halte a /* si le nom de halte est un lien, couleur du lien */
{
	color: #FFFFFF;
}

.ipa    /* bloc "panneau indicateur de point d'arret" */
{
	margin: auto;
	text-align: center;
	min-width: 30px;    /*largeur minimale*/
	height: 20px;
	padding: 2px 2px 2px 2px;    /* centre verticalement */
	background-color: #FFFFFF;    /*couleur de fond de cellule */
	border-radius: 0px;    /* arrondi les angles */
	border: 1.5px solid black;
	color: #000000;    /* couleur de la police */
	font-family: CFF;    /* police */
	font-weight: bold;    /* ecrit en gras */
	line-height: 20px;
}

.info    /* bloc "informations" */
{
	margin: auto;
	min-width: 100px;    /*largeur minimale*/
	max-width: 140px;
	min-height: 20px;
	padding: 5px 5px 5px 5px;    /* centre verticalement le nom de gare */
	background-color: #7c7c7c;    /*couleur de fond de cellule */
	border-radius: 5px;    /* arrondi les angles */
	color: white;    /* couleur de la police */
	font-family: B612;    /* police */
	line-height: 20px;
	text-align: center;
}

.warning    /* bloc "informations importantes" */
{
	margin: auto;
	min-width: 100px;    /*largeur minimale*/
	max-width: 140px;
	min-height: 20px;
	padding: 5px 5px 5px 5px;    /* centre verticalement le nom de gare */
	background-color: #EB0000;    /*couleur de fond de cellule */
	border-radius: 5px;    /* arrondi les angles */
	color: white;    /* couleur de la police */
	/*font-family: B612;    /* police */
	font-weight: bold;    /* ecrit en gras */
	line-height: 20px;
}

img /* parametres d'affichage des images des signaux */
{
	margin: auto;
	width: 35px;
	border-radius: 1px;
	align-self: self-end;
}

.courbe_N_AV /* avance de courbe cat. N */
{
	background-color: white;    /* couleur de fond */
	height: 31px;    /* hauteur */
	width: 31px;    /* largeur */
	border-radius: 24px;    /* angles arrondis, pour faire rond */
	border-style: solid;    /* bordure */
	border-width: 3px;    /* epaisseur de la bordure */
	border-color: #fc7c32;    /* couleur de la bordure */
	margin:  auto;    /* centrage dans le bloc parent */
	color: black;    /* couleur du texte */
	text-align: center;    /* alignement du texte */
	font-family: CFF;    /* police */
	font-size: 18px;    /* taille de police */
	font-weight: bold;    /* en gras */
	line-height: 30px; /* hauteur de ligne pour centrer verticalement le texte */

}

.courbe_R_AV /* avance de courbe cat. R */
{
	background-color: white; /* couleur de fond */
	overflow-y: hidden; /* tente de mieux centrer les nombres */ 
	height: 31px;    /* hauteur */
	width: 31px;    /* largeur */
	border-radius: 1px;    /* angles arrondis, 0 pour laisser carré */
	border-style: solid;    /* bordure */
	border-width: 2px;    /* epaisseur de la bordure */
	border-color: black;    /* couleur de la bordure */
	margin: auto;    /* centrage dans le bloc parent */
	color: black;    /* couleur du texte */
	text-align: center;    /* alignement du texte */
	font-family: CFF;  /* police */
	font-size: 18px;    /* taille de police */
	font-weight: bold;    /* en gras */
	line-height: 30px; /* hauteur de ligne pour centrer verticalement le texte */
}

.panneau_km /* panneau km */
{
	background-color: white;
	text-align: center;
	/*line-height: 60%;*/
	padding: 0px 0 0px 0;
	height: 31px;
	width: 31px;
	border-radius: 2px;
	border-style: solid;
	border-width: 2px;
	border-color: black;
	margin: auto; /* centrage dans le bloc parent */
}
.km /* bloc contenant "km" */
{
	height: 15px;
	line-height: 15px;
	font-size: 12px;
	font-family: CFF;
	font-weight: condensed;
	color: black;
}
.part1 /* bloc contenant les unités */
{
	height: 15px;
	line-height: 15px;
	font-size: 13px;
	margin-top: 0px;
	font-family: CFF;
	font-weight: condensed;
	color: black;
}
.part2 /* bloc contenant les décimales */
{
	line-height: 15px;
	font-size: 11px;
	font-family: CFF;
	font-weight: condensed;
	color: black;
}

.entree /* panneau d'entrée de gare */
{
	background-color: white;
	color: black;
	text-align: center;
	font-family: CFF;
	font-size: 8px;
	text-transform: uppercase;
	line-height: 12px;
	font-weight: bold;
	padding: 0px 0 0px 0;
	height: 12px;
	width: 33px;
	border-radius: 1px;
	border-style: solid;
	border-width: 1px;
	border-color: black;
	margin: auto; /* centrage dans le bloc parent */
}

.findegare  /* panneau de fin de gare */
{
	background-color: white;
	color: black;
	text-align: center;
	font-family: CFF;
	font-size: 8px;
	text-transform: uppercase;
	line-height: 12px;
	font-weight: bold;
	padding: 0px 0 0px 0;
	height: 12px;
	width: 33px;
	border-radius: 1px;
	border-style: solid;
	border-width: 1px;
	border-color: black;
	margin: auto; /* centrage dans le bloc parent */
	background: linear-gradient(to top left, #ffffff calc(50% - 1px), #000000, #ffffff calc(50% + 1px) ) ; /* ligne diagonale */
}

a /* personnalisation des liens */
{
	text-decoration: none;
}

/*
 *
 * Indicateurs de point d'arrêt
 *
 *
*/

.ipa_bloc {
	display: unset;
}
.ipa_container {
	position: relative;
	float: left;
	height: 28px;
	width: 28px;
}
.ipa_border { /* polygone plus grand pour la bordure */
	height: 28px;
	width: 28px;
	clip-path: polygon(50% 0, 100% 35%, 100% 100%, 0 100%, 0 35%);
	background: black; /* couleur de fond */
}

.ipa_interne { /* polygone plus petit pour faire le fond */
	position: absolute;
	background: white; /* coueleur du fond */
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	clip-path: polygon(50% 8%, 92% 39%, 92% 92%, 8% 92%, 8% 39%);
}
.ipa_texte { /* texte à l'intérieur */
	color: black;
	text-align: center;
	font-family: CFF;
	font-size: 20px;
	line-height: 12px; 
	margin-bottom: -5px;
	font-weight: bold;
	padding: 11px 0 0 0;
}
.ipa_texte_deci {
	font-size: 14px;
}
.clearBoth {
	clear: both;
}

.toggle-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 12px 20px;
            font-size: 1rem;
            cursor: pointer;
            border: none;
            border-radius: 6px;
            color: white;
            background-color: #2ecc71;
            z-index: 1000;
            box-shadow: 0 4px 6px rgba(0,0,0,0.2);
            transition: background-color 0.3s ease;
        }
        .toggle-btn.active {
            background-color: #e74c3c;
        }