/*

        █████
       █████████
██   █████████████
 ██████████████████
███████████████████
   ████████████████
      ████████████
       █████████
      ██████████            ███
   █████████████████████  ██████
  ██████████████████████████████
████████████████████████████████
████████████████████████████████
███████████████████████████████
 █████████████████████████████
  ██████████████████████████
     ██████████████████

*/

body {
	background:black;
	color: black;
	font: 1em Monospace;
	padding: 0;
	margin: 0;
}
/* ################################### */
/* MENU HORIZONTAL */
nav {
	background: gray;
	display: flex;
	height: 28px;
	margin: 0;
	align-items: center;
}

img.small_logo {
	height: 24px;
	display: inline-block;
	margin: 2px;
}

h1.small_title {
	display: inline-block;
	font-size: 1rem;
	margin: 2px;
}

ul.hmenu {
	display: inline-block;
	margin: 0 30px;
	list-style: none;
}

.hmenu li {
	display: inline;
	padding: 0 2px;
	border: 1px dashed black;
}

.hmenu li:hover {
	background: lightgray;
}

.hmenu a {
	color: black;
	text-decoration: none;
}
/* ################################### */

/* ################################### */
/* ACCUEIL */
.center_square {
	width: max(15%, 35vh);
	min-height:200px;
	margin: max(calc(50vh - 150px - 28px), 20px) auto;
	text-align:center;
	background:gray;
	padding: 10px;
}

img.big_logo {
	width: 128px;
	margin: 7% auto;
}

h2.pre_title {
	margin: 0 auto;
	font-weight: normal;
	font-size: 1rem;
}

h1.main_title {
	font-size: 1.5rem;
	margin-top: 0;
}
/* ################################### */

/* ################################### */
/* MENU VERTICAL */
ul.vmenu { list-style:none; padding: 0; font-size: 1rem;}

.vmenu li a {
	font-weight: bold;
	color:black;
}
/* ################################### */

/* ################################### */
/* LISTE AVEC >< */
.gtlt li:before { content:"> "; }
.gtlt li:hover:before { content:">"; }
.gtlt li:hover:after { content:"<"; }
.gtlt li:after { content:" <"; }
/* ################################### */


.full_square {
	width: min(600px, 90%);
	height: max(600px, 30vh);
	margin: max(calc(50vh - 400px - 28px), 20px) auto;
	text-align:center;
	background:gray;
	padding: 5px;
}

.panel {
	border-radius: 10px;
	text-align: right;
	border:1px solid #333;
	background:#444;
}

.panel label, select, input { margin: 2px; }

input[type=number] { width: 100px; }

h2 {
	font-size: 1rem;
}

.full_square ul {
	list-style: none;
	padding: 0px;
}

.align_right { text-align: right; }

p.error { color: orangered; }
h5.back_button {
	text-align: left;
	margin: 0 0 10px 0;
}
a { text-decoration:none; color: darkblue;}
input.rgtoggle {
	border-radius: 10px;
	padding: 5px;
	font-weight: bold;
	background-color: firebrick;
}
p {
	font-size: 1em;
}