/*********************************************
*									*
*		RESSOURCES POUR SNCF			*
*			version 1.0				*
*									*
*********************************************/

/**********
* Polices *
***********/
@font-face {
	font-family:'MuseoSans';
	src:url('fonts/MuseoSans_700.otf');
	font-weight:bold;
}
@font-face {
	font-family:'MuseoSans';
	src:url('fonts/MuseoSans_500.otf');
	font-weight:500;
}
@font-face {
	font-family:'MuseoSans';
	src:url('fonts/MuseoSans_300.otf');
	font-weight:normal;
}

/************
* Variables *
************/

/* Thème de base (clair) */
:root {
	--fond-body:#dedede;
	--fond-principal:#fff;
	--fond-secondaire:#dedede;
	--fond-ternaire:#f6f6f6;
	--fond-contraste:#333;
	--fond-inverse:#000;

	--texte-principal:#000;
	--texte-contraste:#fff;
	--texte-inverse:#fff;

	--bord-principal:#000;

}

/* Pour thème sombre */
@media (prefers-color-scheme: dark) {
	:root {
		--fond-body:#111;
		--fond-principal:#333;
		--fond-secondaire:#111;
		--fond-ternaire:#222;
		--fond-contraste:#ccc;
		--fond-inverse:#000;

		--texte-principal:#ccc;
		--texte-contraste:#000;
		--texte-inverse:#ccc;

		--bord-principal:#666;
	}
}

/*********
* Titres *
*********/
h1 {
	margin:0;
	font-size:1.4em;
	font-weight:bold;
}
h2 {
	margin:0;
	font-size:1.2em;
	font-weight:bold;
}
h3 {
	margin:0;
	font-size:1em;
	font-weight:bold;
}

ul {
	margin:0;
}

/********************
* Balises générales *
********************/
a, a:hover, a:active, a:visited {
	background-color:transparent;
	color:var(--texte-principal);
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}

.hs { display:none; }

sup { font-size:0.6em;}

/************************
* Conteneurs principaux *
************************/

body {
	display:flex;
	flex-flow:column nowrap;
	justify-content:flex-start;
	align-items:stretch;
	align-content:stretch;
	margin:0;
	padding:0;
	background-color:var(--fond-body);
	color:var(--texte-principal);
	font-family:MuseoSans, sans-serif;
	font-size:0.8em;
	min-height:100vh;
}

header {
	flex:0 0 100%;
	margin:0;
	padding:0.4em;
	background-color:var(--fond-secondaire);
	color:var(--texte-principal);
	text-align:center;
}
footer {
	flex:0 0 100%;
	display:flex;
	flex-flow:row wrap;
	justify-content:flex-start;
	align-items:stretch;
	align-content:stretch;
	margin:1em 0 0;
	padding:0.2em;
	background-color:var(--fond-secondaire);
	color:var(--texte-principal);
	text-align:left;
}
header p { margin:0 auto 1em auto;}
footer p { flex:1 0 100%; margin:0; }
footer ul {
	flex:0 0 10%;
	display:block;
}
footer ul li { list-style-type:none; }

main {
	flex:0 0 100%;
	display:flex;
	flex-flow:row wrap;
	justify-content:flex-start;
	align-items:space-around;
	align-content:flex-start;
	background-color:var(--fond-principal);
	color:var(--text-principal);
	height:100%;
}

/*************************
* Conteneurs thématiques *
*************************/

/* Partie résultat */

#resultat {
	order:1;
	flex:0 0 auto;
	display:flex;
	flex-flow:row wrap;
	justify-content:space-around;
	align-items:flex-start;
	align-content:flex-start;
	margin:1em auto;
	padding:0;
	background-color:var(--fond-ternaire);
	color:var(--texte-principal);
	width:100%;
}

.intro-resultat {
	flex:0 0 auto;
	margin:0.2em auto;
	width:95%;
}

.table-resultat {
	flex:1 0 auto;
	margin:1em auto;
	width:100%;
}

#resultat table {
	display:table;
	margin:0 auto;
	border:2px solid var(--bord-principal);
	border-collapse:collapse;
	width:95%;
}

#resultat thead {
	display:table-header-group;
	background-color:var(--fond-secondaire);
}

#resultat tbody {
	display:table-row-group;
	border:2px solid var(--bord-principal);
}

#resultat th {
	display:table-cell;
	padding:0.2em;
	text-align:center;
	border:1px solid var(--bord-principal);
}

#resultat td {
	display:table-cell;
	padding:0.2em;
	text-align:right;
	border:1px solid var(--bord-principal);
}

.intitule {
	display:block;
	margin:0;
	font-size:1em;
	font-weight:bold;
}
.reference {
	display:block;
	margin:0;
	font-size:0.8em;
	font-weight:bold;
}
.explication {
	display:block;
	margin:0;
	font-size:0.8em;
	font-weight:normal;
}

/* Partie formulaire */

#formulaire {
	order:2;
	flex:0 0 auto;
	margin:1em auto;
	padding:0;
	background-color:var(--fond-ternaire);
	color:var(--texte-principal);
	width:100%;
}

#formulaire form {
	position:relative;
	display:block;
	margin:1em auto;
	padding:0;
	text-align:center;
	border-radius:0.6em;
	width:95%;
}

#formulaire form > legend {
	font-weight:bold;
}

#formulaire fieldset {
	border:1px solid var(--bord-principal);
	border-radius:1em;
}

/* #formulaire p {
	position:relative;
	margin:0.4em auto;
	width:70%;
	text-align:center;
	overflow-x:visible;
	white-space:nowrap;
	background-color:yellow;
}
#formulaire fieldset p {
	text-align:left;
} */

#formulaire p {
	position:relative;
	display:flex;
	flex-flow:row nowrap;
	justify-content:flex-start;
	align-items:center;
	align-content:center;
	margin:0.4em auto;
	overflow-x:visible;
	white-space:normal;
	width:90%;
}

#formulaire p label {
	order:1;
	flex:0 1 80%;
	margin:0.4em 0;
	text-align:right;
}
#formulaire p input, #formulaire p select {
	order:2;
	flex:0 0 auto;
	text-align:left;
}

#formulaire input[type=number] {
	width:5em;
}

#formulaire button {
	margin:0 auto;
}

/**************
* Formulaires *
***************/