/*///////////////////////////////////////////////////////////////
//																					//
//						BOÏTE Ä OUTILS CHEMINOTS PSO						//
//									version 1									//
//						FEUILLE DE STYLE MOBILE								//
//																					//
///////////////////////////////////////////////////////////////*/


:root {
	color-scheme:light dark;
}

/*********
* Titres *
*********/
h1 {
	font-size:1.6em;
	font-weight:bold;
}
h2 {
	font-size:1.4em;
	font-weight:bold;
}

/********************
* 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-direction:column;
	flex-wrap:nowrap;
	justify-content:flex-start;
	align-items:stretch;
	align-content:stretch;
	margin:0;
	padding:0;
	background-color:var(--fond-principal);
	color:var(--texte-principal);
	font-family:Inter, sans-serif;
	font-size:1em;
	min-height:100vh;
}

header {
	order:1;
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:space-between;
	align-items:center;
	align-content:stretch;
	margin:0;
	padding:0;
	background-color:var(--fond-principal);
	color:var(--texte-principal);
	width:100%;
}
header p { margin:0 auto 1em auto;}

header h1 {
	flex-grow:2;
	flex-shrink:2;
	flex-basis:0;
	margin:0 auto;
	padding:1rem;
	background-color:var(--fond-entete);
	color:var(--texte-entete);
	clip-path:polygon(0% 0%, 100% 30%, 100% 70%, 0% 100%);
}

nav {
	flex-grow:1;
	flex-shrink:1;
	flex-basis:1%;
	display:block;
	list-style-type:none;
	margin:0 0 0 auto;
	padding:0;
}

nav ul {
	display:flex;
	flex-wrap:nowrap;
	justify-content:flex-start;
	align-items:center;
	align-content:stretch;
}

nav li {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	list-style-type:none;
	display:block;
	margin:0 0.2rem;
	padding:0.3rem;
	border-radius:0.2rem;
}

nav img {
	width:24px;
	height:auto;
	border-radius:0.2rem;
}

nav .selection {
	background-color:var(--fond-entete-selection);
}

main {
	order:2;
	flex-grow:2;
	flex-shrink:0;
	flex-basis:auto;
	display:flex;
	flex-flow:row wrap;
	justify-content:flex-start;
	align-items:flex-start;
	align-content:flex-start;
	background-color:var(--fond-principal);
	color:var(--texte-principal);
	height:100%;
}

footer {
	order:3;
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:flex;
	flex-flow:row wrap;
	justify-content:flex-start;
	align-items:center;
	align-content:center;
	margin:0 0;
	padding:0.2em;
	background-color:var(--fond-entete);
	color:var(--texte-entete);
	text-align:left;
	width:100%;
}
footer p {
	flex-grow:1;
	flex-shrink:1;
	flex-basis:auto;
	margin:0.4rem auto 0.4rem 0.4rem;
}
footer ul {
	flex:0 0 10%;
	display:block;
}
footer ul li { list-style-type:none; }
footer a, footer a:active, footer a:visited, footer a:hover {
	background-color:var(--fond-entete);
	color:var(--texte-entete);
	text-decoration:underline;
}

/****************
* Corps du site *
*****************/


main h2 {
	display:none;
}

/*******************
* Partie NOUVELLES *
********************/

#nouvelles {
	order:1;
	flex-grow:0;
	flex-shrink:1;
	flex-basis:auto;
	display:block;
	margin:2rem 1rem 1rem;
	padding:1rem;
	background-color:var(--bloc-fond-clair);
	color:var(--bloc-texte-clair);
	border-radius:1rem;
	width:100%;
}

/*****************
* Partie ACCORDS *
******************/

#accords {
	order:2;
	flex-grow:0;
	flex-shrink:1;
	flex-basis:auto;
	display:block;
	margin:1rem;
	padding:1rem;
	background-color:var(--bloc-fond-moyen);
	color:var(--bloc-texte-moyen);
	border-radius:1rem;
	width:100%;
}

/********************
* Partie REGLEMENTS *
*********************/

#reglements {
	order:3;
	flex-grow:0;
	flex-shrink:1;
	flex-basis:auto;
	display:block;
	margin:1rem 1rem 2rem;
	padding:1rem;
	background-color:var(--bloc-fond-sombre);
	color:var(--bloc-texte-sombre);
	border-radius:1rem;
	width:100%;
}

/*******************
* Éléments communs *
********************/

h3 {
	margin-bottom:1.6rem;
	font-size:1.6rem;
}

dl {
	display:block;
}

dt {
	margin:1rem 0 0;
	font-weight:300;
}
dd {
	margin:0.2rem 0 0 3rem;
	font-weight:600;
}

.lien {
	font-weight:normal;
}

/**************************************
* Formulaire de changement de commune *
***************************************/

#credits {
	order:2;
}

#changer {
	order:1;
	display:block;
	margin:0.4rem auto;
}
#changer input[type=text] {
	text-align:center;
}


/**********************************/
/* Messages erreur et information */
/**********************************/

#messages {
	flex-grow:1;
	flex-shrink:0;
	flex-basis:auto;
	display:block;
	margin:0.2rem auto;
	padding:0;
	width:100%;
}
#messages p {
	margin:0 auto 1rem auto;
	padding:0.5rem;
	border-radius:0.6rem;
	text-align:center;
	width:100%;
}

#messages .erreur {
	background-color:var(--fond-erreur);
	color:var(--texte-erreur);
}
#messages .info {
	background-color:var(--fond-info);
	color:var(--texte-info);
}


/******************/
/* Identification */
/******************/

#identification {
	flex:2 0 auto;
	align-self:flex-start;
	display:block;
	margin:1rem auto;
	padding:1rem;
	max-width:100%;
}

#identification > p {
	text-align:center;
}

#identification > p:first-child {
	margin:1rem auto;
}

#identification img {
	width:auto;
	height:24px;
}


#identification form {
	position:relative;
	display:block;
	margin:2rem auto;
	padding:0;
	text-align:center;
	border:1px solid var(--bord-principal);
	border-radius:0.6rem;
}

#identification form p {
	position:relative;
	margin:0.4rem auto;
	width:75%;
	text-align:left;
	overflow-x:visible;
	white-space:nowrap;
}

#identification form legend {
	margin:0;
	padding:0.4rem;
	background-color:var(--fond-entete);
	color:var(--texte-entete);
	font-size:1rem;
	font-weight:normal;
	border-bottom:1px solid var(--bord-principal);
	border-top-left-radius:0.6rem;
	border-top-right-radius:0.6rem;
}

#identification form label {
	display:none;
	text-align:left;
}

#identification form span.montrercacher {
	display:inline-block;
	margin-left:0.2rem;
	vertical-align:middle;
	cursor:pointer;
}

#identification form p.form_centre {
	margin:0.4rem;
	text-align:center;
	width:100%;
	white-space:normal;
}

#identification form input[type="text"], #identification form input[type="email"], #identification form input[type="password"], #identification form input[type="date"], #identification form input[type="datetime-local"] {
	padding:0.6rem;
	width:100%;
	border-radius:0.6rem;
}

button {
	display:inline-block;
	margin:1.4rem auto;
	padding:0.4rem;
	width:100%;
	border-radius:0.6rem;
	cursor:pointer;
	transition:background-color 0.5s, color 0.5s;
}

.bouton_attenue {
	background-color:var(--fond-bouton-attenue);
	color:var(--texte-bouton-attenue);
	border:1px solid var(--bord-bouton);
}
.bouton_neutre {
	background-color:var(--fond-bouton-neutre);
	color:var(--texte-bouton-neutre);
	border:1px solid var(--bord-bouton);
}

button:hover {
	background-color:var(--fond-bouton-envaleur);
	color:var(--texte-bouton-envaleur);
	border:1px solid var(--bord-bouton);
}