body {
	margin: 0px;
	padding: 0px;
	background-color: whitesmoke;
	color: black;
	font-family: Verdana, Geneva, sans-serif;
}
p {
	margin: 0px;
	padding: 4px;
}
a {
	color: darkslategray;
	text-decoration: none;
}
a[href^="tel:"], a[href^="fax:"] {
	color: inherit;
	text-decoration: none;
}
fieldset {
	margin: 16px;
	padding: 4px;
	border: solid thin silver;
	box-shadow: 1px 1px 8px lightgray;
}
fieldset p {
	margin: 8px;
}
legend {
	margin-left: 8px;
	padding: 4px 8px;
	border: solid thin silver;
	border-radius: 4px;
	box-shadow: 1px 1px 8px lightgray;
	color: darkslategray;
	background-color: white;
}
legend a {
	color: maroon;
}
form {
	margin: 0px;
	padding: 0px;
}
input {
	text-align: center;
}
input, textarea, select {
	color: black;
	font-family: Verdana, Geneva, sans-serif;
	font-size: medium;
}
ul, ol {
	margin: 0px 0px 0px 64px;
	padding: 4px 4px 4px 4px;
}
.copyright {
	margin: 16px;
	text-align: left;
	color: thistle;
	font-size: xx-small;
}
.agenda {
	width: 100%;
	margin: 16px 0px;
	padding: 0px 0px 8px 0px;
	border-radius: 8px;
	background-color: white;
	box-shadow: 0px 0px 8px silver;
}
.agenda p {
	margin: 8px 16px;
}
.agenda .titre {
	padding: 16px;
	border-radius: 8px 8px 0px 0px;
	text-align: center;
	color: whitesmoke;
	background-color: slategray;
	font-size: large;
}
.agenda .date {
	color: darkslategray;
}
.agenda .jour {
	padding: 2px 4px;
	border-radius: 4px;
	font-weight: normal;
	background-color: darkslategray;
	color: white;
}
.agenda .mois {
	font-weight: bold;
}
.agenda .annee {
	font-size: smaller;
}
.agenda .heure {
	font-weight: bold;
}
.agenda .alerte_0, .agenda .alerte_1, .agenda .alerte_2 {
	display: inline-block;
	border-radius: 4px;
	margin: 4px 4px 4px 0px;
	padding: 2px 4px;
	font-size: small;
	font-variant: small-caps;
	font-weight: bold;
	transform: rotate(-1deg);
}
.agenda .alerte_0 {
	color: maroon;
	background-color: gold;
}
.agenda .alerte_1 {
	color: gold;
	background-color: maroon;
}
.menu {
	width: 100%;
}
.menu, .menu tr, .menu td {
    border-spacing: 0px;
	margin: 0px 0px 16px 0px;
	padding: 0px;
	vertical-align: middle;
	text-align: right;
}
.menu tr, .menu td {
	background-color: white;
}
.menu a {
	min-width: 96px;
	display: inline-block;
	background-color: slategray;
	margin-left: 1px;
	padding: 16px 16px;
	text-decoration: none;
	text-align: center;
}
.menu a:link, .menu a:visited, .menu a:hover, .menu a:active {
	color: white;
}
.menu a:hover {
	background-color: gold;
	color: darkslategray;
}
.menu a:link:last-of-type, .menu a:visited:last-of-type {
	font-style: italic;
	background-color: darkslategray;
}
.menu a:hover:last-of-type, .menu a:active:last-of-type {
	font-style: italic;
	background-color: gold;
}
.menu .actif {
	min-width: 96px;
	display: inline-block;
	margin-left: 1px;
	padding: 16px 16px;
	background-color: whitesmoke;
	color: maroon;
	text-align: center;
}
.menu .titre {
	width: 25%;
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	color: maroon;
}
.memo_public {
	border: solid thick slategray;
}
.memo_prive {
	border: solid thick darkslategray;
}
.memo_public, .memo_prive {
	width: calc(100% - 96px);
	min-height: 128px;
	overflow: auto;
	display: inline-block;
	vertical-align: top;
	margin: 16px;
	padding: 16px;
	border-radius: 8px;
	background-color: white;
	text-align: justify;
	box-shadow: 0px 0px 8px silver;
}
.memo_public a, .memo_prive a {
	padding: 0px 2px;
	border-radius: 4px;
	color: darkslategray;
	text-decoration: none;
}
.memo_public a:hover, .memo_prive a:hover {
	background-color: gold;
}
.memo_public img, .memo_prive img {
	max-width: 100%;
	max-height: 100%;
}
.memo_public td:first-of-type, .memo_public td:last-of-type {
	width: 10%;
}
.actualisation {
	margin-top: 16px;
	text-align: center;
	color: slategray;
	font-size: small;
}
.remarque {
	color: darkolivegreen;
	font-style: italic;
}
.aide {
	color: darkcyan;
	cursor: help;
}
.designation {
	color: darkcyan;
}
.cadre, .block {
	margin: 8px 16px;
	padding: 8px 16px;
	border: solid thick slategray;
	border-radius: 8px;
	box-shadow: 0px 0px 8px silver;
	background-color: white;
	text-align: center;
}
.block {
	display: inline-block;
}
#ombre_aide {
	visibility: hidden;
	cursor: pointer;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	opacity: 0.5;
	background-color: black;
	z-index: 1;
}
#cadre_aide {
	visibility: hidden;
	cursor: pointer;
	overflow: auto;
	position: fixed;
	top: 25%;
	left: 25%;
	width: 50%;
	height: auto;
	margin: 0px;
	padding: 32px;
	opacity: 1;
	border: solid thick slategray;
	border-radius: 8px;
	box-shadow: 0px 0px 16px black;
	background-color: white;
	text-align: justify;
	z-index: 1;
}

:root {
	--light-color: GhostWhite;
	--medium-color: LightSlateGray;
	--dark-color: SlateGray;
	--bright-color: MediumSlateBlue;
	--white-color: White;
}
.modal {
	visibility: hidden;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.25);
}
.modal div {
	max-width: 100%;
	max-height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	padding: 2em;
	border: solid thick var(--dark-color);
	border-radius: 1em;
	background-color: var(--light-color);
}
.modal div p {
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	overflow-y: auto;
	justify-content: center;
}
.modal div p:first-of-type {
	display: flex;
	flex-direction: row;
	gap: 2em;
}
.modal div p:last-of-type {
	margin-top: 1em;
}
.modal .labelColumn label {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.modal .labelRow label {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.modal img {
	max-width: 128px;
	max-height: 128px;
}

.blog-documents-index-filesList {
	margin: 1em;
	display: flex;
	gap: 1em;
	flex-wrap: wrap;
}
.blog-documents-index-filesList a {
	color: inherit;
	text-decoration: none;
}
.blog-articles-index-articlesList {
/*
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 2em;
*/
}
.blog-articles-index-articlesList img, .blog-articles-index-articlesList video {
	max-width: 30%;
	max-height: 256px;
}
.blog-article {
/*	max-width: calc((100% - 2em - 24px) / 3 - 3px);*/
	min-width: calc(8em);
	margin: 1em;
}
.blog-article input[type=button] {
	transform: scaleX(-1);
}
/*
.blog-article a {
	padding: 0 0.25em;
	color: var(--bright-color);
	text-decoration: none;
	border-radius: 4px;
}
.blog-article a:hover {
	box-shadow: 0 0 2px var(--bright-color);
	color: var(--white-color);
	background-color: var(--bright-color);
}
*/
.blog-article.move {
	cursor: move;
}
.blog-article button {
	font-size: 0.5em;
}
.blog-article > div:first-child {
	border-radius: 1em 1em 0 0;
	color: var(--light-color);
	background-color: var(--dark-color);
	text-align: center;
}
.blog-article > div:last-child {
	padding: 1em;
	border: solid 4px var(--dark-color);
	border-radius: 0 0 1em 1em;
	background-color: var(--white-color);
	text-align: left;
}
.blog-article > div:last-child img {
	max-width: 30%;
	max-height: 256px;
}
.blog-article.draft {
	opacity: 0.5;
}
.blog-article.draft > div:first-child {
	background-color: var(--bright-color);
}
.blog-article.draft > div:last-child {
	border-color: var(--bright-color);
}
.articles {
/*
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	justify-content: center;
	align-items: flex-start;
*/
	text-align: left;
}
.articles > div {
	min-width: min(128px, 25%);
	max-width: 25%;
	margin: 1em;
	padding: 1em;
	border: solid 4px var(--dark-color);
	border-radius: 1em;
	background-color: var(--white-color);
	filter: drop-shadow(0 0 2px var(--light-color));
}
.articles fieldset > div {
	margin: 0.5em;
}
.articles img {
	max-width: 30%;
	max-height: 256px;
}
/*
.articles a {
	padding: 0 0.25em;
	color: var(--dark-color);
	text-decoration: none;
	border-radius: 4px;
}
.articles a:hover {
	box-shadow: 0 0 2px var(--dark-color);
}
*/


:root {
	--menu-text-color: DarkSlateGray;
	--menu-background-color: Transparent;
	--menu-select-color: Transparent;
	--menu-options-text-color: DarkSlateGray;
	--menu-options-background-color: White;
	--menu-options-select-color: Gold;
	--anchor-text-color: Gold;
	--anchor-background-color: Transparent;
}
.textEditor {
	display: flex;
	flex-direction: column;
	text-align: center;
}
.textEditor nav {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: baseline;
	border: none;
}
.textEditor nav button {
	font-size: 1em;
	color: var(--menu-text-color);
}
.textEditor .menu {
	margin: 0;
	padding: 0.5em 1em;
	color: var(--menu-text-color);
	background-color: var(--menu-background-color);
	cursor: pointer;
	text-align: left;
}
.textEditor .menu:hover {
	color: var(--menu-text-color);
	background-color: var(--menu-select-color);
}
.textEditor .menu span {
	color: var(--menu-text-color);
}
.textEditor .menu .options {
	display: block;
/*	visibility: hidden;*/
	margin: 0;
	padding: 0.5em;
	position: absolute;
	transform: translate(-0.5em, 0.5em);
	color: var(--menu-options-text-color);
	background-color: White; /* var(--menu-options-background-color); */
	box-shadow: 0 0.5em 0.5em Grey;
}
.textEditor .menu .options span {
	margin: 0;
	padding: 0.25em;
	display: block;
}
.textEditor .menu:hover .options {
/*	visibility: visible;*/
}
.textEditor .menu .options span:hover {
	color: var(--menu-options-text-color);
	background-color: var(--menu-options-select-color);
}
.textEditor .source textarea {
	resize: none;
	width: calc(100% - 4em);
	min-height: 8em;
	margin: 0;
	padding: 1em;
	border: solid thin Black;
	border-radius: 1em;
	font-size: 1em;
	color: Black;
	background-color: White;
	font-family: Monospace;
}
.textEditor .source button {
	margin: 0.5em;
	font-size: 1em;
}
.textEditor .text {
	min-height: 8em;
	margin: 1em;
	padding: 1em;
	border: solid thin Black;
	border-radius: 1em;
	background-color: White;
	font-family: Sans-serif;
	text-align: left;
}
.textEditor img {
	max-width: 30%;
	max-height: 256px;
}
.textEditor .text[contentEditable=true] {
	border: solid thin Black;
}
.textEditor .text[contentEditable=false] {
	border: solid thin Grey;
}
/*
.textEditor .text a {
	color: inherit;
	text-decoration: none;
}
.textEditor .text a {
	padding: 0 0.25em;
	color: var(--anchor-text-color);
	text-decoration: none;
	border-radius: 4px;
}
.textEditor .text a:hover {
	box-shadow: 0 0 2px var(--anchor-text-color);
	color: var((--anchor-background-color);
	background-color: var(--anchor-text-color);
}
*/