/* Reset link */
a {
	/*text-decoration: none;*/
	color: #136;
}

a:hover {
	text-decoration: underline solid #00c3f9;
}

/* Font styling */
html, body, dd, li, p, td {
	/* DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
	font-family: 'Droid Sans', 'Symbola', 'DejaVu Sans', 'FreeSans', sans-serif;
}

button, code, input, option, optgroup, pre, select, textarea {
	font-family: 'Droid Sans Mono', monospace;
}

dt, h1, h2, h3, h4, h5, h6, label, legend, th, details {
	font-family: 'Droid Serif', serif;
}

/* Default styling */
h1 {
	font-size: 1.5rem;
	margin: 0;
	padding: 0 .6rem .6rem;
}

h2 {
	font-size: 1.17rem;
	margin: 0;
	padding: 0 .5rem .5rem;
}

h3 {
	font-size: 1rem;
	margin: 0;
	padding: 0 .4rem .4rem;
}

h4 {
	font-size: .85rem;
	margin: 0;
	padding: 0 .3rem .3rem;
}

h5 {
	font-size: .67rem;
	margin: 0;
	padding: 0 .2rem .2rem;
}

h6 {
	font-size: .5rem;
	margin: 0;
	padding: 0 .1rem .1rem;
}

ul {
	list-style: ' - ' inside none;
	margin: 0;
	padding: 0 .5rem .5rem;
}

li {
	font-size: .9rem;
	margin: 0;
	padding: 0 .5rem .5rem;
}

li:only-child,
li:last-child,
li:last-of-type {
	padding-bottom: 0;
}

p {
	font-size: .9rem;
	margin: 0;
	padding: 0 .4rem .4rem;
}

article,
section,
nav {
	margin: 0 .5rem .5rem;
	border: .1rem solid #00c3f9;
	border-top: 0;
	border-left: 0;
	border-radius: .5rem;
}

article article {
	margin: 0 .3rem .3rem;
	border-radius: .4rem;
}

article article article {
	margin: 0 .2rem .2rem;
	border-radius: .3rem;
}

article section a.link {
	display: block;
	text-align: center;
	margin: 0 auto;
	padding: .5rem;
	/*display: flex;
	align-items: center;
	gap: .5rem;*/
}

article section a.link img {
	/*width: 12rem;*/
	padding-right: .5rem;
	text-align: right;
	vertical-align: bottom;
}

article section a.link span {
	width: 24rem;
	line-height: 50px;
	/*flex: 1 1;*/
}

section {
	border-radius: .4rem;
}

section .center {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-bottom: .5rem;
	/*display: block;
	width: 24rem;*/
	/*margin: 0 auto;*/
	gap: .5rem;
}

/*article {
	background-color: #cff;
}

article article {
	background-color: white;
}

article article article {
	border-radius: .3rem;
	background-color: #cff;
}*/

header {
	margin: 0 0 .5rem;
	padding: .5rem;
	border-radius: .4rem .4rem 0 0;
	/*background-color: #369;
	border-radius: inherit;*/
	background-color: #00c3f9;
	color: #136;
}

header h2,
header h3,
header h4,
header h5,
header h6,
header p {
	padding-left: 0;
	padding-right: 0;
}

header h2:last-child,
header h3:last-child,
header h4:last-child,
header h5:last-child,
header h6:last-child,
header p:last-child {
	padding-bottom: 0;
}

/*p:only-child,
p:last-child,
p:last-of-type {
	padding-bottom: 0;
}*/

/*header h2:first-child {
	padding-top: .5rem;
}

header h3:first-child {
	padding-top: .4rem;
}

header h4:first-child {
	padding-top: .3rem;
}

header h5:first-child {
	padding-top: .2rem;
}

header h6:first-child {
	padding-top: .1rem;
}

header p:last-child {
	padding-top: 0;
}*/

/*article header {
	border-radius: .4rem .4rem 0 0;
}*/

/*article article header {
	border-radius: .3rem .3rem 0 0;
	margin-bottom: .3rem;
}

article article article header {
	border-radius: .2rem .2rem 0 0;
	margin-bottom: .2rem;
}*/

/*header h1,
header h2,
header h3,
header h4,
header h5,
header h6,
header p {
	margin-bottom: 0;
	padding-bottom: 0;
}*/

.ellipsis {
	/*Required for ellipsis on h2/h3/h4 in header*/
	display: grid;
	margin-bottom: 0;
}

.ellipsis > * {
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*nav strong {
	display: block;
	font-size: 1.17rem;
	margin: 0 0 .5rem;
	padding: .4rem;
}*/

strong {
	font-weight: bold;
}

pre {
	margin: 0 .5rem .3rem;
	font-size: .8rem;
}

dl {
	margin: 0 .5rem .5rem;
}

dl:first-child,
dl:only-child,
dl:first-of-type {
	margin-top: .5rem;
}

dt {
	color: #369;
	font-size: .9rem;
	font-weight: bold;
}

dd {
	font-size: .9rem;
	margin-left: 1rem;
}

.map figure,
.multimap figure,
.thumb figure {
	text-align: center;
}

.map img,
.multimap img,
.thumb img {
	border-radius: .2rem;
	border: .1rem solid #00c3f9;
	aspect-ratio: 1;
}

.map dd {
	margin: 0;
}

.map dd img {
	width: 100%;
	width: calc(100% - .2rem);
	height: auto;
}

.thumb img {
	width: 100%;
	width: calc(100% - 1.2rem);
}

.four .multimap {
	grid-column: span 4;
}

.three .multimap {
	grid-column: span 3;
}

.two .multimap {
	grid-column: span 2;
}

body {
	display: flex;
	flex-flow: column wrap;
	color: #036;
}

nav ul {
	list-style: none inside none;
	gap: .5rem;
	/*margin: .5rem;*/
}

nav ul ul {
	padding-top: .5rem;
}

/*nav ul ul {
	margin-top: .5rem;
	margin-bottom: 0;
}*/

/* Form */
label {
	font-size: .8rem;
	white-space: nowrap;
}

button,
input,
select,
option,
optgroup,
textarea {
	border: .05rem solid #00c3f9;
	border-radius: .2rem;
	font-size: .75rem;
	color: #066;
	background-color: transparent;
	box-sizing: border-box;
}

optgroup {
	border: none;
}

/*option[selected='selected'],*/
/*option:not(:checked),*/
option:checked {
	background-color: #cff;
}


form {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	margin: 0 .5rem .5rem;
	text-align: center;
}

form div {
	display: flex;
	align-content: space-around;
	justify-content: center;
	flex-direction: column;
	margin-bottom: .5rem;
}

form div:only-child,
form div:last-child,
form div:last-of-type {
	margin-bottom: 0;
}

form div.row {
	flex-direction: row;
	gap: .5rem;
	flex-wrap: wrap;
}

form label {
	width: 12rem;
	line-height: 1.3rem;
	/*padding-right: 1rem;*/
	text-align: right;
	overflow-x: hidden;
	text-overflow: ellipsis;
}

form label.captcha {
	line-height: normal;
}

form label.captcha img {
	height: 1.325rem;
}

form input,
form option,
form optgroup,
form select,
form textarea,
form section section {
	width: 24rem;
	padding: .1rem;
	margin: 0 auto;
}

form optgroup,
form option {
	width: 100%;
}

/*form optgroup {
	width: 23.8rem;
}

form option {
	width: 23.6rem;
}*/

/*Checkbox input*/
form input[type='checkbox'] {
	width: 1.5rem;
}

form select {
	padding: 0 .1rem .1rem .1rem;
}

form button {
	width: 10rem;
	/*margin: .5rem auto 0 auto;*/
	/*margin: 0 auto;*/
	padding: 0 .1rem .2rem .1rem;
}

/*form button img {
	float: left;
	padding: .5rem;
}*/

form .message {
	margin: 0 0 .5rem 0;
}

form div .message {
	margin: .25rem 0 0 0;
}

/* Vertical form */
.location .col label,
.col label {
	width: 8rem;
	padding-right: 0;
	padding-bottom: .2rem;
	text-align: center;
	margin: 0 auto;
}

.location .col input,
.location .col textarea,
.col input,
.col option,
.col optgroup,
.col select,
.col textarea {
	width: 8rem;
}

.col button {
	width: 8rem;
}

.col .row {
	flex-direction: column;
}

.col div.date {
	flex-direction: row;
	justify-content: space-between;
}

/* Header */
#header {
	background-color: #cff;
	border: .1rem solid #136;
	border-top: 0;
	border-left: 0;
	border-radius: 0 0 .5rem .5rem;
	margin: 0 .5rem .5rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-weight: bold;
	line-height: 45px;
	padding: .5rem;
	gap: .5rem;
}

#header div {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: .5rem;
}

#logo {
	padding: 0;
	white-space: nowrap;
	color: #09c;
	text-shadow: 1.5px 1.5px 3px #136;
	text-decoration: none;
	display: flex;
	font-family: 'Lemon', sans-serif;
	font-size: 2rem;
	line-height: 45px;
	gap: .5rem;
}

#logo img,
#logo span {
	margin: 0 auto;
}

#title {
	margin: .25rem 0 0;
	padding: 0;
	border-bottom: 0 none;
	text-align: right;
	flex: 1 1 auto;
	font-family: 'Lemon', sans-serif;
	font-weight: normal;
	/*white-space: nowrap;*/
}

#title a {
	text-decoration: none;
	color: #09c;
	text-shadow: 1.5px 1.5px 3px #136;
	/*overflow-x: hidden;
	text-overflow: ellipsis;*/
}

#nav {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	line-height: 2.5rem;
	margin: 0;
	border: 0 none;
}

#nav a {
	flex: 1 1 auto;
	border: .1rem solid #136;
	border-top: 0;
	border-left: 0;
	border-radius: .2rem;
	background-color: #00c3f9;
	color: #136;
	text-align: center;
	padding: 0 .25rem;
}

/* Message */
.message {
	margin: 0 .5rem .5rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size: .9rem;
	padding: .2rem;
	border-radius: .2rem;
	text-align: center;
	border: .05rem solid transparent;
}

.message::before,
.message::after {
	margin: auto 0;
	padding: 0 .25rem;
}

.message ul {
	margin: 0;
	padding: 0;
	list-style: none inside none;
	gap: .1rem;
}

.message li {
	padding: .25rem;
}

.mortal,
.mortal button,
.mortal select {
	/*border-color: #c33333;
	color: #c33333;*/
	border-color: #930;
	background-color: #f9c3c3;
	color: #930;
}

.dangerous,
.mortal {
	border-radius: .2rem;
	padding: .5rem 0;
}

.error {
	border-color: #c33333;
	background-color: #f9c3c3;
	color: #c33333;
}

.error::before,
.error::after {
	/*XXX: display /!\ symbol */
	content: "⚠";
}

.notice {
	border-color: #3333c3;
	background-color: #c3c3f9;
	color: #3333c3;
}

.notice::before,
.notice::after {
	/*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm
	 * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
	/*XXX: display i symbol */
	content: "ℹ";
	/*XXX: display # symbol */
	/*content: "⌘";*/
}

.dangerous,
.dangerous button,
.dangerous select {
	/*border-color: #c39333;
	background-color: #f9c333;
	color: #936333;*/
	border-color: #930;
	background-color: #fc9;
	color: #930;
}

.warning {
	border-color: #c39333;
	background-color: #f9c333;
	color: #936333;
}

.warning::before,
.warning::after {
	/*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm
	 * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
	content: "?";
	/*XXX: display # symbol */
	/*content: "⌘";*/
}

/* Dashboard */
#dashboard,
#form,
#recover,
#regulation {
	/*border-radius: .5rem;*/
	/*border: .1rem solid #00c3f9;
	margin: .5rem;
	margin-top: 0;
	display: flex;
	flex-direction: column;*/
}

.panel {
	display: flex;
	flex-direction: row;
	margin: 0 .5rem .5rem;
	gap: .5rem;
}

.cell {
}

.grid {
	display: grid;
	border-style: solid;
	border-color: #00c3f9;
	border-radius: .2rem;
	box-sizing: border-box;
	border-collapse: collapse;
	flex: 1 1 auto;
	margin: 0 0 auto 0;
	padding: 0;
	gap: .1rem;
}

.grid article,
.grid section {
	border-collapse: inherit;
	/*border-radius: inherit;*/
	border-style: inherit;
	/*border-width: .1rem;
	border-width: inherit;*/
	box-sizing: inherit;
	flex-grow: inherit;
	margin: 0;
	min-height: 5rem;
	overflow: hidden;
}

/*.grid header {
	border-radius: .2rem .2rem 0 0;
	margin-bottom: 0;
}*/

/*.grid ul {
	margin: .1rem;
	padding: .1rem;
	margin: 0;
}*/

/*.grid section {
	border-color: inherit;
}*/

/*.grid ul {
	display: block;
	margin: .1rem;
	font-size: .8rem;
	list-style: none inside none;
}*/

.grid li {
	border-width: .1rem;
	border-style: solid;
	border-radius: .2rem;
	white-space: nowrap;
	padding: .1rem;
	display: flex;
	margin: 0 0 .1rem;
	flex-direction: row;
	justify-content: space-between;
	overflow-x: hidden;
	text-overflow: ellipsis;
}

/*XXX: required by ul display:block for overflow:hidden*/
.grid li:only-child,
.grid li:last-child,
.grid li:last-of-type {
	margin: 0;
}

.grid a {
	/*TODO: voir pourquoi on a besoin d'un overflow-y de merde, sans une putain de scrollbar s'affiche dans certaines conditions sur chrome, depuis le passage de deux lignes de grid à 3 !!!*/
	/*Est-ce parce que le city est pas expanded ???*/
	overflow-y: clip;
	overflow-x: hidden;
	text-overflow: ellipsis;
}

.grid p {
	padding: 0 0 .3rem;
	margin: 0;
}

.grid p:only-child,
.grid p:last-child,
.grid p:last-of-type {
	padding: 0;
}

.session header {
	margin-bottom: .5rem;
}

.current {
	filter: hue-rotate(-90deg) saturate(2);
}

.granted {
	background-color: #cff;
	border-color: #00c3f9;
}

/*.granted,
.granted a {
	background-color: #cff;
	border-color: #00c3f9;
}

.disputed,
.disputed a {
	border-color: #930;
	background-color: #fc9;
	color: #930;
}*/

.highlight {
	filter: hue-rotate(60deg);
}

.canceled {
	filter: hue-rotate(180deg) grayscale(33%);
}

.locked {
	filter: hue-rotate(180deg);
}

.pending {
	filter: grayscale(33%);
}

.disabled {
	filter: grayscale(66%);
}

/*.canceled,
.canceled a,
.canceled h2,
.canceled header {
	color: #963;
	background-color: #fddddd;
	border-color: #963;
}

.locked,
.locked a {
	border-color: #930;
	background-color: #f9c3c3;
	color: #930;
}

.pending,
.pending a {
	background-color: #ccc;
	border-color: #066;
}

.highlight,
.highlight a,
.highlight h3,
.highlight h3 a {
	border-color: #3333c3;
	background-color: #c3c3f9;
	color: #606;
}*/

.calendar header {
	margin-bottom: .1rem;
	display: grid;
}

.calendar h3 {
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.calendar ul {
	padding: 0 .1rem .1rem;
}

/*.ellipsis {
	/ *Required for ellipsis on h2/h3/h4 in header* /
	display: grid;
	margin-bottom: 0;
}

.ellipsis > * {
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}*/

.calendar a {
	display: grid;
	/*grid-template-columns: 1fr auto fit-content(1fr);*/
	grid-template-columns: max-content 1fr max-content;
	flex: 1 1 auto;
	grid-gap: .1rem;
	/*XXX: reset to visible to prevent scroll*/
	overflow-x: visible;
}

.calendar .reducible {
	overflow-x: hidden;
	text-overflow: ellipsis;
	text-align: center;
}

.calendar .glyph {
	font-family: 'Noto Emoji', 'Droid Sans', 'Symbola', 'DejaVu Sans', 'FreeSans', sans-serif;
}

.calendar .temperature,
.calendar .rain,
.calendar .rate {
	line-height: 1rem;
	text-align: right;
}

.calendar .rate {
	text-align: center;
}

.calendar .info {
	line-height: 1rem;
	text-align: right;
}

.calendar .pseudonym {
	grid-column: span 2;
}

.seven {
	grid-template-columns: repeat(7, 1fr);
}

.four {
	grid-template-columns: repeat(4, 1fr);
}

.three {
	grid-template-columns: repeat(3, 1fr);
}

.two {
	grid-template-columns: repeat(2, 1fr);
}

/*.city .grid h3,
.location .grid h3,
.city .grid h4,
.location .grid h4 {
	border-style: none;
	margin: 0;
	flex: 1 1 auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.city .grid article,
.location .grid article {
	min-height: auto;
	height: fit-content;
}

.city .grid {
	gap: .5rem;
}*/

.location form {
	margin: .5rem auto;
}

.location form .row {
	flex-direction: column;
}

.location form div {
	margin-left: auto;
	margin-right: auto;
}

.location label {
	width: 20rem;
	padding-right: 0;
	text-align: center;
}

.location input,
.location textarea {
	width: 20rem;
	margin: 0 .1rem;
}

.form {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.form h2 {
	font-size: 1.17rem;
	padding: .4rem;
}

.form a {
	white-space: nowrap;
}

.form section {
	margin: 0;
	border: .05rem solid #00c3f9;
	/*border-radius: .2rem;*/
	width: 100%;
}

.form form {
	gap: .5rem;
}

/* Footer */
#footer {
	border: .1rem solid #00c3f9;
	border-radius: .5rem;
	margin: .5rem;
	margin-top: 0;
	padding: .5rem;
	text-align: center;
	font-size: .8rem;
	line-height: 2.5rem;
	display: flex;
	justify-content: space-between;
	background-color: #cff;
	gap: .5rem;
}

#footer summary::after {
	display: none;
}

#footer summary::-webkit-details-marker {
	display: none;
}

#footer ul {
	list-style: none inside none;
	margin: 0;
}

#footer a,
#footer details {
	padding: 0 .5rem;
	border: .1rem solid #136;
    border-top: 0;
    border-left: 0;
    border-radius: .2rem;
	background-color: #00c3f9;
	color: #136;
	justify-content: center;
}

#footer details a {
	padding: 0;
	border: 0 none;
}

/* viewport responsive hack */
@media ( max-width: 1400px ) {
	.location label,
	.location input,
	.location textarea {
		width: 12rem;
	}

	.session .three {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media ( max-width: 1000px ) {
	.panel {
		/*flex-flow: column-reverse wrap;*/
		flex-flow: column wrap;
	}

	.location .two {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media ( max-width: 900px ) {
	.form {
		flex-direction: row;
	}

	form label {
		line-height: 2rem;
	}

	form label.captcha img {
		height: auto;
		padding: .25rem 0;
	}

	form input,
	form option,
	form optgroup,
	form select,
	form textarea,
	form section section {
		width: 20rem;
		line-height: 2rem;
	}

	form select {
		height: 2.4rem;
	}

	form button {
		width: 6rem;
		line-height: 2rem;
	}

	.col label,
	.col input,
	.col option,
	.col optgroup,
	.col select,
	.col textarea {
		width: 12rem;
	}

	.col button {
		width: 12rem;
	}

	.seven {
		grid-template-columns: repeat(4, 1fr);
	}

	.calendar .sunday {
		grid-column: span 2;
	}

	/*.grid section:nth-child(7n) {
		grid-column: span 2;
	}*/

	.four {
		grid-template-columns: repeat(3, 1fr);
	}

	.three {
		grid-template-columns: repeat(2, 1fr);
	}

	.two {
		grid-template-columns: repeat(1, 1fr);
	}

	.four .multimap {
		grid-column: span 3;
	}

	.three .multimap {
		grid-column: span 2;
	}

	.two .multimap {
		grid-column: span 1;
	}

	/*#dashboard .seventh:nth-child(7n+1),
	#dashboard .seventh:nth-child(7n+2),
	#dashboard .seventh:nth-child(7n+3),
	#dashboard .seventh:nth-child(7n+4) {
		width: calc(100% / 4 - (3/4*.1rem));
	}

	#dashboard .seventh:nth-child(7n+5),
	#dashboard .seventh:nth-child(7n+6),
	#dashboard .seventh:nth-child(7n+7) {
		width: calc(100% / 3 - (2/3*.1rem));
	}*/
}

@media ( max-width: 700px ) {
	.session .three {
		grid-template-columns: repeat(1, 1fr);
	}

	.multimap img {
		width: 100%;
		width: calc(100% - .2rem);
		height: auto;
	}
}

@media ( max-width: 600px ) {
	form label {
		margin: 0 auto;
	}

	form input,
	form option,
	form optgroup,
	form select,
	form textarea,
	form section section {
		width: 12rem;
		margin: 0 auto;
	}

	#logo {
		flex-direction: column;
	}

	.seven {
		grid-template-columns: repeat(2, 1fr);
	}

	/*.grid section:nth-child(7n) {
		grid-column: span 2;
		margin-bottom: .5rem;
	}

	.grid section:only-child,
	.grid section:last-child,
	.grid section:last-of-type {
		margin-bottom: 0;
	}*/

	.calendar .sunday {
		margin-bottom: .5rem;
	}

	.calendar .sunday:only-child,
	.calendar .sunday:last-child {
		margin-bottom: 0;
	}

	.four {
		grid-template-columns: repeat(2, 1fr);
	}

	.three {
		grid-template-columns: repeat(1, 1fr);
	}

	.four .multimap {
		grid-column: span 2;
	}

	.three .multimap {
		grid-column: span 1;
	}

	.location .two {
		grid-template-columns: repeat(1, 1fr);
	}

	/*#dashboard .seventh:nth-child(n) {
		width: calc(100% / 2 - .1rem);
	}

	#dashboard .seventh:nth-child(7n) {
		width: calc(100%);
	}*/

	/*.city .two,
	.location .two {
		grid-template-columns: 1fr;
	}

	.city .grid article,
	.location .grid article {
		overflow: hidden;
	}*/
}

@media ( max-width: 450px ) {
	#header div {
		flex-direction: column;
	}

	#title {
		text-align: center;
	}

	#logo {
		flex-direction: row;
	}

	dd, p, #footer {
		font-size: 110%;
	}

	a, dd, figcaption, #footer {
		/*XXX: required to validate Tap targets are sized appropriately*/
		line-height: 3rem;
	}

	figure,
	.calendar a {
		line-height: normal;
	}

	form .row,
	.grid,
	.form,
	#footer {
		flex-direction: column;
	}

	form label {
		text-align: center;
	}

	.seven {
		grid-template-columns: repeat(1, 1fr);
	}

	/*.grid section:nth-child(n) {
		grid-column: auto;
	}*/
	.calendar .sunday {
		grid-column: auto;
	}

	.four {
		grid-template-columns: repeat(1, 1fr);
	}

	.four .multimap {
		grid-column: span 1;
	}
}

@media ( max-width: 320px ) {
	#logo {
		flex-direction: column;
	}

	#title {
		white-space: normal;
	}
}

@media ( max-width: 260px ) {
	.col label,
	.col input,
	.col option,
	.col optgroup,
	.col select,
	.col textarea {
		width: 10rem;
	}

	.col button {
		width: 10rem;
	}
}