/*

margin: up-down left-right
margin: up left-right down
margin: up right down left

*/

/*
 * fonts
 */

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/lora.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  src: url(/fonts/opensans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: swap;
}

/*
 * global
 */

:root {
	--text-font: 'Open sans', Verdana, sans-serif;
	--title-font: 'Lora', 'Times New Roman', serif;
	--page-width: 1200px;
	--page-offset: -600px;
	--foreground-color: black;
	--background-color: white;
	--background-hover-color: #e5e5e5;
	--background-color-2: #f8f3ed;
	--background-color-3: #f8eedd;
  --strong-color: #1e6279;
  --strong-underline-color: #1e62797f;
	--strong-hover-color: #061318;
	--strong-plain-hover-color: #216d87;
	--light-color: #f8f3ed;
	--light-hover-color: #f4eedf;
	--ambiance-color: #d3ae8a;
	--flash-color: #bf3b1d;
	--note-color: #666666;
	--line-color: #cbcbcb;
	--symbol-color: #666666;
	--symbol-hover-color: #333333;
	--label-background-color: #333843d0;
	--review-star-color: #f6b814;
  --alert-color: #ff0f0f;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	color: var(--foreground-color);
	background-color: var(--background-color);
  text-rendering: optimizeLegibility;
}

body,
button,
input,
textarea,
select {
	font-family: var(--text-font);
	font-size: 12px;
}

@media (min-width: 768px) {

	body,
	button,
	input,
	textarea,
	select {
		font-size: 16px;
	}
}

a {
	color: var(--strong-color);
  text-decoration-color: var(--strong-underline-color);
	cursor: pointer;
}

a:hover,
a:focus {
	color: var(--strong-hover-color);
  text-decoration-color: var(--strong-hover-color);
}

.a-goto {
	cursor: pointer;
}

details summary {
  cursor: pointer;
}

i.fi {
	display: inline-block;
	text-indent: 0;
}

.invisible {
	visibility: hidden;
}

.minNameWidth {
	min-width: 8em;
}

.minTitleWidth {
	min-width: 12em;
}

.noPointer {
	pointer-events: none;
}

.note {
	font-size: 80%;
}

.noWrap {
	white-space: nowrap;
}

.rack {
  display: flex;
  flex-flow: wrap;
	margin: 1em 0;
  gap: 0.8em;
}

.sparkle::before {
	font-family: 'icomoon' !important;
	content: '\e901';
}

.weak {
	opacity: 0.3;
}

@keyframes fade-in {
 from { opacity: 0; }
 to { opacity: 1; }
}

/*
 * page container
 */

.pageContainer {
	margin: 0 auto;
	max-width: var(--page-width);
	overflow: hidden;
}

header.pageContainer {
  overflow: inherit;
}

/*
 * button
 */

.button {
	display: inline-block;
	padding: 0.4em 1em;
	text-align: center;
	text-decoration: none;
	color: var(--strong-color);
	background-color: var(--light-color);
	border: solid 1px var(--strong-color);
	border-radius: 0.25em;
	cursor: pointer;
}

.button:hover,
.button:focus {
	color: var(--strong-color);
	background-color: var(--light-hover-color);
	border: solid 1px var(--strong-plain-hover-color);
}

.button-primary {
	color: var(--background-color);
	background-color: var(--strong-color);
}

.button-primary:hover,
.button-primary:focus {
	color: var(--background-color);
	background-color: var(--strong-plain-hover-color);
}

.button:disabled,
.button-primary:disabled {
	color: var(--line-color);
	background-color: var(--light-color);
	border: solid 1px var(--line-color);
}

/*
 * icon button
 */

.icon-button {
	font-size: 140%;
	margin: 0.1em;
	padding: 0.3em;
  text-decoration: none;
	color: var(--symbol-color);
	background-color: var(--light-color);
	border: solid 1px var(--symbol-color);
	border-radius: 0.1em;
	cursor: pointer;
}

.icon-button:hover,
.icon-button:focus {
	color: var(--symbol-hover-color);
	background-color: var(--light-hover-color);
	border: solid 1px var(--symbol-hover-color);
}

.icon-button:disabled {
	color: var(--line-color);
	background-color: var(--light-color);
	border: solid 1px var(--line-color);
}

.icon-button-note {
	margin: 0.5em 0 0;
	font-size: 100%;
}

/*
 * icons
 */

.icons {
	margin: 1em;
	text-align: left;
}

.icons .icon{
	margin: 0 0.4em;
}

.icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.icon-flag {
	margin-left: 0.2em;
	font-size: 110%;
	cursor: pointer;
	vertical-align: middle;
}

.icon-flag-fr {
	background-image: url(/images/flagFr.png);
}

.icon-flag-en {
	background-image: url(/images/flagEn.png);
}

.icon-energy {
	width: 4em;
	height: 4em;
	background-image: url(/images/gallery/labelEnergy.png);
}

.icon-flexilivre {
	width: 10em;
	height: 2em;
	background-image: url(/images/partners/flexilivre.png);
}

.icon-imprimVert {
	width: 4em;
	height: 4em;
	background-image: url(/images/gallery/labelImprimVert.png);
}

.icon-madeInFrance {
	width: 4em;
	height: 4em;
	background-image: url(/images/gallery/labelMadeInFrance.png);
}

.icon-noAI {
	width: 4em;
	height: 4em;
	background-image: url(/images/gallery/labelNoAI.png);
}

.icon-pefc {
	width: 4em;
	height: 4em;
	background-image: url(/images/gallery/labelPefc.png);
}

.icon-close {
	font-size: 1.6em;
	color: var(--symbol-color);
	cursor: pointer;
}

.icon-close:hover,
.icon-close:focus {
	color: var(--symbol-hover-color);
	text-decoration: none;
}

/*
 * form
 */

.form fieldset {
	margin: 0.4em 0 0;
	border: none;
}

.form fieldset p {
	margin: 0.5em 0 1em;
}

.form fieldset label,
.form fieldset .label {
	margin: 0.2em 0;
}

.form-stacked fieldset label,
.form-stacked input,
.form-stacked textarea {
	display: block;
}

.form input,
.form textarea,
.form select {
	font-size: inherit;
	padding: 0.4em 0.6em;
	border: solid 1px var(--line-color);
	border-radius: 0.25em;
}

.form-stacked input[type=email],
.form-stacked input[type=password],
.form-stacked input[type=text],
.form-stacked textarea {
	width: 100%;
}

.form input[type=checkbox],
.form input[type=radio] {
	display: inline-block;
	margin: 0 0.4em 0 0;
	filter: grayscale(100%);
}

.form input[type=color] {
	padding: 0.3em;
	width: 3em;
	height: 3em;
}

.form input[type=file] {
	padding: 0.4em 0;
	border: none;
}

.form input[type=range] {
	padding: 0;
	filter: grayscale(100%);
}

.form textarea {
	resize: vertical;
	height: 10em;
}

.form input:read-only {
	opacity: 0.7;
}

.form input.width-1-2,
.form textarea.width-1-2,
.form select.width-1-2 {
	width: 50%;
}

.form a .tip {
	color: var(--symbol-color);
	font-size: 120%;
	width: 2em;
	vertical-align: bottom;
	text-align: center;
}

.form a:hover .tip {
	color: var(--symbol-hover-color);
}

.form a .tip.invisible {
	display: none;
}

.form .input-image {
	display: block;
	position: relative;
	padding: 0.4em 0.6em;
	width: 50%;
	border: solid 1px var(--line-color);
	border-radius: 0.25em;
}

.form .input-image.hover {
	background-color: var(--background-color-2);
}

.form .input-image .image-container {
	display: flex;
  gap: 1em;
  padding: 0.5em;
}

.form .input-image .image-container i.fi {
	font-size: 250%;
	color: var(--ambiance-color);
}

.form .input-image .image-container .text {
  flex: 1;
  font-size: 80%;
}

.form .input-image input {
	position: absolute;
  top: 0;
  left: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

/*
 * table
 */

table {
	border-collapse: collapse;
}

.table {
	display: block;
	overflow-x: auto;
}

.table thead,
.table tbody {
	border: solid 1px var(--line-color);
}

.table thead {
	background-color: var(--background-color-2);
}

.table th,
.table td {
	margin: 0;
	padding: 0.2em 1em;
	text-align: left;
	border-right: solid 1px var(--line-color);
	border-left: solid 1px var(--line-color);
}

.table thead select {
	margin: 0 0 0.6em;
}

.table .enhance {
	background-color: var(--background-color-3);
}

.table .number {
	text-align: right;
}

/*
 * section
 */

.section-color-1 {
}

.section-color-2 {
	background-color: var(--background-color-2);
}

.section-color-3 {
	background-color: var(--background-color-3);
}

.section h1,
.section .h1,
.section h2,
.section .h2,
.section h3,
.section .h3,
.section h4,
.section .h4,
.section details summary,
.section .label-h2 label[for],
.section .label-h2 .label,
.section .label-h3 label[for],
.section .label-h3 .label,
.section .label-h4 label[for],
.section .label-h4 .label {
	color: var(--strong-color);
	font-family: var(--title-font);
	font-weight: normal;
}

.section h1,
.section .h1 {
	font-size: 220%;
}

.section h2,
.section .h2,
.section .label-h2 label[for],
.section .label-h2 .label {
	font-size: 180%;
}

.section h3,
.section .h3,
.section details summary,
.section .label-h3 label[for],
.section .label-h3 .label {
	font-size: 150%;
}

.section h4,
.section .h4,
.section .label-h4 label[for],
.section .label-h4 .label {
	font-size: 130%;
}

.section details summary {
	margin: 1.2em 0 0.5em;
	border-bottom: solid 1px var(--strong-color);
}

.section .inlineHelp {
  margin: 2em 0;
  padding: 1em;
  font-size: 80%;
  border-left: solid 1.5em var(--background-color-3);
}

.section .inlineHelp p {
  margin: 0 0 0.5em;
}

.section .inlineHelp i {
  color: var(--symbol-color);
}

.section .journal-viewer {
	margin: 1em 0;
	padding: 0.7em 0 0.5em;
	text-align: center;
	background-color: var(--background-color-2);
	border: solid 1px var(--line-color);
}

.section .journal-viewer .screen {
	background-color: var(--background-color-2);
}

.section .journal-viewer .screen.fullscreen {
	padding: 5em;
}

.section .journal-viewer .show {
	display: inline-block;
	width: 100%;
}

.section .journal-viewer .scroller {
	display: flex;
	padding: 0.5em 0 0;
}

.section .journal-viewer .scroller .icon-nav {
	margin: auto 0.5em;
	width: 2em;
	height: 5em;
}

.section .journal-viewer .scroller #content {
	display: inline-block;
	flex: 1;
}

.section p,
.section td {
	margin: 0.5em 0;
}

.section pre {
	margin: 1em 0;
	overflow-x: auto;
}

.section .signature-container {
  margin: 0.5em 0 0;
  height: 2.5em;
  line-height: 2.5em;
}

.section .signature-container span {
	display: inline-block;
  vertical-align: top;
	margin: 0.1em 0.3em 0 0;
}

.section .signature-container .signature {
  display: inline-block;
  vertical-align: top;
}

.section .signature-container .avatar {
  margin: 0 0 0 0.3em;
  width: 2.5em;
  height: auto;
  border-radius: 50%;
}

.section ul,
.section ol {
	padding: 0 0 0 2em;
}

.section ul.pure {
	padding: 0;
	list-style: none;
}

.section .cover {
	width: 7.5em;
	height: 7.5em;
	border: solid 1px var(--ambiance-color);
}

.section .sparkle {
	text-indent: -0.38em;
}

.section .sparkle::before {
	display: inline-block;
	font-size: 70%;
	margin: -0.7em -0.58em 0 0;
	vertical-align: top;
	color: var(--ambiance-color);
}

.section .warning {
	margin: 2.5em 0 2em;
	padding: 1.5em ;
	border: solid 0.2em var(--foreground-color);
	border-radius: 0.5em;
}

.section .warning i.fi-warning {
	font-size: 120%;
	animation: flash 5s linear infinite;
}

@keyframes flash {
  50% { color: var(--flash-color); }
}

/*
 * section page
 */

.section-page {
	padding: 2em;
}

.section-page h1,
.section-page .h1,
.section-page h2,
.section-page .h2,
.section-page h3,
.section-page .h3,
.section-page h4,
.section-page .h4,
.section .label-h2 label[for],
.section .label-h2 .label,
.section .label-h3 label[for],
.section .label-h3 .label,
.section .label-h4 label[for],
.section .label-h4 .label {
	margin: 0.5em 0;
}

.section-page h1,
.section-page .h1 {
	border-bottom: solid 1px var(--ambiance-color);
}

.section-page p {
	margin: 1em 0;
}

.section-page ul.select-list {
	list-style: none;
	padding: 0;
	border-top: solid 1px var(--line-color);
}

.section-page ul.select-list > li {
	border-bottom: solid 1px var(--line-color);
}

.section-page ul.select-list > li:hover {
	background-color: var(--background-color-2);
}

.section-page ul.select-list > li a {
  text-decoration: none;
	color: inherit;
}


.section-page li.select-item > a {
	display: flex;
  gap: 1em;
  margin: 0 1em;
  padding: 1em 0;
}

.section-page li.select-item .content {
	flex: 1;
}

/*
 * section mono
 */

.section-mono {
	text-align: center;
	padding: 2em;
}

.section-mono h2,
.section-mono .h2,
.section-mono h3,
.section-mono .h3,
.section-mono h4,
.section-mono .h4,
.section-mono p {
	max-width: calc(var(--page-width) / 2);
	margin: 0.5em auto;
}

.section-mono .rack {
  justify-content: center;
}

/*
 * section duo
 */

.section-duo {
	text-align: center;
	padding: 2em;
}

.section-duo h2,
.section-duo .h2,
.section-duo h3,
.section-duo .h3,
.section-duo h4,
.section-duo .h4 {
	text-align: left;
	margin: 0.5em 0;
}

.section-duo p {
	text-align: left;
}

.section-duo .text {
	padding: 1em;
}

/*
 * section frame
 */

.section-frame {
	position: relative;
	padding: 2em 0;
	overflow: hidden;
}

.section-frame .frameContainer {
	position: relative;
}

.section-frame .frame {
	width: 80%;
	max-width: calc(var(--page-width) * .7);
	margin: 0 auto;
	padding: 1em;
	color: var(--background-color);
	background-color: var(--strong-color);
	border-radius: 2em;
}

.section-frame .upperBackground,
.section-frame .lowerBackground {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2000px;
	z-index: -1;
}

.section-frame .upperBackground {
	bottom: 50%;
}

.section-frame .lowerBackground {
	top: 50%;
}

.section-frame-color-1-2 .upperBackground,
.section-frame-color-1-3 .upperBackground {
}

.section-frame-color-1-2 .lowerBackground {
	background-color: var(--background-color-2);
}

.section-frame-color-1-3 .lowerBackground {
	background-color: var(--background-color-3);
}

.section-frame-color-2-1 .upperBackground {
	background-color: var(--background-color-2);
}

.section-frame-color-3-1 .upperBackground {
	background-color: var(--background-color-3);
}

.section-frame-color-2-1 .lowerBackground,
.section-frame-color-3-1 .lowerBackground {
}

.section-frame .text {
 	margin: 2em;
}

.section-frame h2,
.section-frame .h2,
.section-frame h3,
.section-frame .h3,
.section-frame h4,
.section-frame .h4 {
	margin: 0.5em 0;
	color: var(--background-color);
}

.section-frame h2,
.section-frame .h2 {
	font-size: 140%;
}

.section-frame h3,
.section-frame .h3 {
	font-size: 120%;
}

.section-frame h4,
.section-frame .h4 {
	font-size: 100%;
}

.section-frame p {
	margin: 1em 0 0 0;
}

/*
 * section message
 */

.section-message {
 	min-height: 100vh;
	padding: 4em 1em 1em;
}

.section-message .content {
	max-width: 28em;
	margin: 0 auto;
}

.section-message .content h1 {
	margin: 0 0 1em;
}

/*
 * section modal
 */

.section-modal {
	position: fixed;
	top: 0;
  left: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 10;
}

.section-modal .content {
	background-color: var(--background-color);
	max-width: 85%;
	margin: 2em auto;
	padding: 1.3em;
	border: solid 1px var(--line-color);
	border-radius: 0.25em;
  animation: fade-in 0.75s;
}

.section-modal .content .icon-close {
	float: right;
}

.section-modal .content h1 {
	margin: 0 0 0.5em;
	font-size: 180%;
}

.section-modal .content h2 {
	font-size: 150%;
}

.section-modal .content h3 {
	font-size: 130%;
}

/*
 * modal alert
 */

.modal-alert .content {
	margin: 10em auto 2em;
	width: 35em;
}

.modal-alert .select-emoji img {
  width: 2em;
	cursor: pointer;
}

/*
 * modal cookies
 */

.modal-cookies {
	background-color: rgba(0, 0, 0, 0.7);
}

.modal-cookies .content {
	width: 50em;
	padding: 0;
	border: unset;
	background-color: transparent;
  animation: fade-in 3s;
}

.modal-cookies .header {
	text-align: right;
	color: var(--background-color);
}

.modal-cookies .header a {
  text-decoration: none;
	color: var(--background-hover-color);
}

.modal-cookies .header a:hover,
.modal-cookies .header a:focus {
	color: var(--background-color);
}

.modal-cookies .panel {
	padding: 3em 2em 4em 2em;
	background-color: var(--background-color-3);
	border-radius: 2em;
}

.modal-cookies .panel .cookie {
	height: 5em;
	background-image: url(/images/cookie.png);
	background-position: left center;
	background-size: 5em;
	background-repeat: no-repeat;
}

/*
 * modal edit image
 */

.modal-edit-image .content {
	width: 35em;
}

.modal-edit-image #rectangleCropper svg {
  max-width: 100%;
  max-height: 75vh;
}

.modal-edit-image #circleCropper svg {
  width: 15em;
}

/*
 * modal help
 */

.modal-help .content {
	width: 50em;
}

.modal-help .progressbar {
	margin: 0 0.6em 0 0;
	font-size: 40%;
	vertical-align: middle;
}

/*
 * modal select images
 */

.modal-select-images .content {
	width: 53em;
}

.modal-select-images .container {
	margin: 0 0 1em;
	max-width: 50em;
	height: 18em;
	padding: 0;
	overflow: auto;
}

.modal-select-images .container ul {
	margin: 0;
	padding: 0;
}

.modal-select-images .container ul > li {
	display: inline-block;
	padding: 0.2em;
}

.modal-select-images .container ul > li img {
	width: 9em;
	height: 9em;
	cursor: pointer;
}

/*
 * modal show image
 */

.modal-show-image {
 	text-align: center;
}

.modal-show-image img {
 	margin: 1em 0 0;
 	max-width: 100%;
 	max-height: 75vh;
}

/*
 * modal show svg
 */

.modal-show-svg {
 	text-align: center;
}

.modal-show-svg .svg-container {
	padding: 1em 0 0;
}

.modal-show-svg .svg-container svg {
  overflow: visible;
  max-width: 100%;
 	max-height: 75vh;
}

/*
 * modal show video
 */

.modal-show-video {
	text-align: center;
}

.modal-show-video video {
	width: 100%;
	height: 100%;
}

/*
 * modal waiting
 */

.modal-waiting .content {
	margin: 10em auto 2em;
	width: 35em;
	max-width: 80vw;
  animation: none;
}

.modal-waiting .waiting {
	position: relative;
	margin: 0.4em auto 0.2em;
	font-size: 3.3em;
	width: 1em;
	height: 2em;
	list-style: none;
	border-radius: 50%;
}

.modal-waiting .waiting li {
	position: absolute;
	width: 0.3em;
	height: 0.3em;
	border-radius: 50%;
}

.modal-waiting .waiting li:nth-child(1) {
  top: 0;
	left: 50%;
	margin: 0 0 0 -0.1em;
	background-color: var(--strong-color);
	transform-origin: 50% 250%;
	animation:
	  rotation 1.13s linear infinite,
	  opacity 3.67s ease-in-out infinite alternate;
}

.modal-waiting .waiting li:nth-child(2) {
	top: 50%;
	right: 0;
	margin: -0.1em 0 0 0;
	background-color: var(--ambiance-color);
	transform-origin: -150% 50%;
	animation:
	  rotation 1.86s linear infinite,
	  opacity 4.29s ease-in-out infinite alternate;
}

.modal-waiting .waiting li:nth-child(3) {
	left: 50%;
	bottom: 0;
	margin: 0 0 0 -0.1em;
	background-color: var(--symbol-color);
	transform-origin: 50% -150%;
	animation:
    rotation 1.45s linear infinite,
    opacity 5.12s ease-in-out infinite alternate;
}

.modal-waiting .waiting li:nth-child(4) {
	top: 50%;
	left: 0;
	margin: -0.1em 0 0 0;
	background-color: var(--flash-color);
	transform-origin: 250% 50%;
	animation:
	  rotation 1.72s linear infinite,
	  opacity 5.25s ease-in-out infinite alternate;
}

@keyframes rotation {
	to { transform: rotate(360deg); }
}

@keyframes opacity {
	0% { }
	12.0% { opacity: 0.80; }
	19.5% { opacity: 0.88; }
	37.2% { opacity: 0.64; }
	40.5% { opacity: 0.52; }
	52.7% { opacity: 0.69; }
	60.2% { opacity: 0.60; }
	66.6% { opacity: 0.52; }
	70.0% { opacity: 0.63; }
	79.9% { opacity: 0.60; }
	84.2% { opacity: 0.75; }
	91.0% { opacity: 0.87; }
}

/*
 * modal youtube-flash
 */

.modal-youtube-flash .content {
	width: 35em;
}

/*
 * information header
 */

.header-information {
	padding: 1em 0;
	text-align: center;
}

.header-information a {
	margin: 0 0 0 1em;
  text-decoration: none;
	vertical-align: middle;
}

/*
 * upper header
 */

.header-upper {
	background-color: var(--strong-color);
	color: var(--background-color);
	text-align: right;
	padding: 0.4em 2em 0.4em 0;
}

.header-upper > ul > li {
  display: inline-block;
}

.header-upper > ul > li:not(:last-child)::after {
  margin: 0 0.1em;
  content: '|';
}

.header-upper a {
  text-decoration: none;
	color: var(--background-hover-color);
}

.header-upper a:hover,
.header-upper a:focus {
	color: var(--background-color);
}

.header-upper nav {
  position: relative;
	display: inline-block;
  height: 1.6em;
	text-align: left;
}

.header-upper nav label::before {
	content: '▼';
}

.header-upper nav input[type=checkbox] {
	display: none;
}

/* show when click */
.header-upper nav ul {
  position: absolute;
  top: 1.6em;
  right: 0;
  white-space: nowrap;
	list-style-type: none;
	display: none;
  z-index: 1;
}

.header-upper nav input[type=checkbox]:checked + ul {
	display: flex;
	flex-flow: column wrap;
}

@media (hover: hover) {

	/* show when hover */
	.header-upper nav label {
		pointer-events: none;
	}

	.header-upper nav:hover ul {
		display: flex;
		flex-flow: column wrap;
	}
}

.header-upper nav ul li {
	background-color: var(--strong-color);
	padding: 0.4em 0.6em;
}

@media (hover: none) {

  .header-upper nav ul li {
    min-width: 34px;
    min-height: 34px;
  }
}

.header-upper nav ul li span {
	margin: 0 0.2em 0 0;
}

/*
 * lower header
 */

.header-lower .logo {
	display: inline-block;
	margin: 0.6em 2em;
	width: 10em;
	height: 2.8em;
	background-image: url(/images/logoSmall.png);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.header-lower nav {
	float: right;
  margin: 0 2em 0 0;
}

/* burger */
.header-lower nav label {
	display: inline-block;
	cursor: pointer;
	margin: 0.9em 0 0.6em;
}

.header-lower nav label i.fi {
  font-size: 200%;
  height: 1.2em;
	color: var(--strong-color);
}

.header-lower nav input[type=checkbox] {
	display: none;
}

/* show when click */
.header-lower nav > ul {
  display: none;
	position: absolute;
	top: 6em;
  left: 0;
  width: 100%;
  border-bottom: solid 1px var(--strong-color);
  z-index: 1;
}

.header-lower nav input[type=checkbox]:checked + ul {
	display: flex;
	flex-flow : column wrap;
}

@media (hover: hover) {

	/* show when hover */
	.header-lower nav label {
		pointer-events: none;
	}

	.header-lower nav:hover > ul {
		display: flex;
		flex-flow: column wrap;
	}
}

.header-lower nav ul {
	list-style-type: none;
	background-color: var(--background-color);
}

.header-lower nav ul li {
	flex: 1 1 auto;
	text-align: left;
	padding: 0.4em 1.4em;
	border-top: solid 1px var(--strong-color);
}

.header-lower nav ul li a {
	display: block;
  text-decoration: none;
}

.header-lower nav ul li a.menu,
.header-lower nav ul li.group a {
	padding: 0.4em 0em;
}

.header-lower nav ul li.group > a {
	pointer-events: none;
}

.header-lower nav ul li.group > a::before {
	content: '▼';
}

.header-lower nav ul li ul {
	margin: 0.6em 0 0 0;
}

@media (min-width: 870px) and (hover: hover) {

	.header-lower nav label {
		display: none;
	}

	.header-lower nav > ul,
	.header-lower nav:hover ul {
		display: inline-block;
		margin: 0.8em 0 0;
		position: inherit;
    border-bottom: inherit;
	}

	.header-lower nav ul li {
		display: inline-block;
		padding: 0 0 0 0.8em;
		background: var(--background-color);
		border: none;
	}

	.header-lower nav ul li.group ul {
		position: absolute;
		margin: 0;
		display: none;
    border-bottom: solid 1px var(--strong-color);
	}

	.header-lower nav ul li.group:hover ul {
		display: flex;
		flex-flow: column wrap;
	}

	.header-lower nav ul li ul li {
		padding: 0 0.6em;
		width: 100%;
		border-top: solid 1px var(--strong-color);
	}
}

/*
 * promise
 */

.promise {
	position: relative;
	left: 50%;
	width: 900px;
	margin-left: -450px;
}

.promise .image {
	width: 900px;
	height: 227px;
	background-image: url(/images/gallery/promiseSmall.jpg);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.promise header {
	position: absolute;
	top: 0;
	left: 50%;
}

.promise header h1 {
	margin: 2em 3em 0 -5.6em;
	padding: 0.2em;
	color: var(--background-color);
	background-color: var(--contrast-color);
	line-height: 95%;
	font-family: var(--title-font);
	font-weight: normal;
	font-size: 210%;
}

@media (min-width: 768px) {

	.promise {
		width: var(--page-width);
		margin-left: var(--page-offset);
	}

	.promise .image {
		width: 1200px;
		height: 300px;
		background-image: url(/images/gallery/promise.jpg);
	}
}

/*
 * footer
 */

.footer {
	background-color: var(--strong-color);
	color: var(--background-color);
	padding: 2em 3em;
	text-align: left;
}

.footer .logo {
	display: inline-block;
	margin: 0 1em 1em;
	width: 8em;
	height: 2.2em;
	background-image: url(/images/logoEmbededSmall.png);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.footer nav {
	padding: 1em;
}

.footer nav .h2 {
	color: var(--background-color);
	font-family: var(--text-font);
	font-weight: normal;
	font-size: 110%;
}

.footer nav ul {
	list-style-type: none;
	margin: 1em 0 0 0;
}

.footer nav a {
	display: inline-block;
	margin-left: 0.5em;
	text-indent: -0.5em;
  text-decoration: none;
	font-size: 90%;
	color: var(--background-hover-color);
}

@media (hover: none) {

  .footer nav a {
    padding: 0 0 1em 0.5em;
    min-width: 34px;
    min-height: 34px;
  }
}

.footer nav a:hover,
.footer nav a:focus {
	color: var(--background-color);
}

.footer nav a.media i {
	width: 1.2em;
}

/*
 * aside
 */

aside {
	background: var(--background-color-2);
}

.aside {
	padding: 1em;
	text-align: center;
}

/*
 * aside book
 */

.aside-book .sparkle {
  display: inline-block;
  margin: 0.3em 0 0;
  vertical-align: top;
  transform: rotate(-40deg);
}

.aside-book .sparkle::before {
	font-family: 'icomoon' !important;
	content: '\e901';
	font-size: 130%;
	color: var(--ambiance-color);
}

.aside-book .cover {
	display: inline-block;
	width: 4em;
	height: 4em;
	border: solid 1px var(--ambiance-color);
}

@media (min-width: 768px) {

	.aside-book {
		margin: 6em 0 0;
	}

	.aside-book .cover {
		width: 7.5em;
		height: 7.5em;
	}
}

/*
 * aside admin
 */

.aside-admin {
  color: var(--strong-color);
	text-align: left;
}

.aside-admin ul {
	list-style: none;
	margin-left: 1em;
}

.aside-admin .sections .section {
  display: inline-block;
  margin: 0.5em 0;
  font-weight: bold;

}

.aside-admin .sections a {
  text-decoration: none;
}

.aside-admin details {
	margin: 0 0 1em;
}

.aside-admin details summary {
	margin: 0.5em 0;
	border-bottom: solid 1px var(--strong-color);
}

/*
 * page
 */

.breadcrumb {
	margin: 1em 1em 2em;
	padding: 0.5em;
	font-size: 85%;
	background-color: var(--background-color-3);
}

.breadcrumb ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}

.breadcrumb li:not(:last-child)::after {
  display: inline-block;
  margin: 0 0.25em;
  content: '>';
}

.breadcrumb a {
  text-decoration: none;
}

/*
 * index page
 */

.page-index .rack {
	margin: 1.5em 0 1em;
}

.page-index .sectionSteps .step {
 	padding: 0 1em;
}

.page-index .sectionSteps .step .number {
 	color: var(--strong-color);
 	font-size: 210%;
}

.page-index .sectionSteps .step .number::before {
 	content: '— ';
}

.page-index .sectionSteps .step .number::after {
 	content: ' —';
}

.page-index .sectionSteps .step .image {
	display: inline-block;
	width: 6.8em;
	height: 3.8em;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.page-index .sectionSteps .step .image-1 {
	background-image: url(/images/gallery/step1.jpg);
}

.page-index .sectionSteps .step .image-2 {
	background-image: url(/images/gallery/step2.jpg);
}

.page-index .sectionSteps .step .image-3 {
	background-image: url(/images/gallery/step3.jpg);
}

.page-index .sectionSteps .step .image-4 {
	background-image: url(/images/gallery/step4.jpg);
}

/*
 * index page / video
 */

.page-index .sectionVideo .video {
 	position: relative;
	text-align: center;
}

.page-index .sectionVideo .video .image {
	display: inline-block;
	box-sizing: content-box;
	margin: 1em 0;
	width: 16em;
	height: 9em;
	background-image: url(/videos/technicalPresentationV01.jpg);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	border: solid 0.7em var(--background-color-3);
	border-radius: 1em;
}

.page-index .sectionVideo .video a {
	position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: content-box;
	padding-left: 0.2em;
	padding-bottom: 0.2em;
	font-size: 200%;
	transform: translate(-50%, -50%);
	width: 1.2em;
	height: 1.2em;
	color: var(--background-hover-color);
	border: solid 0.1em var(--background-hover-color);
	border-radius: 50%;
}

.page-index .sectionVideo .video a:hover,
.page-index .sectionVideo .video a:focus {
	color: var(--background-color);
	border-color: var(--background-color);
}

/*
 * index page / reviews
 */

.page-index .sectionReviews .review {
  margin: 0.5em 0;
 	padding: 0.5em 1em;
	background-color: var(--background-color);
	border-radius: 1em;
}

.page-index .sectionReviews .review .quote {
	text-align: left;
	color: var(--ambiance-color);
	height: 2.2em;
}

.page-index .sectionReviews .review .quote::before {
 	content: '❝ ';
	font-size: 300%;
}

.page-index .sectionReviews .review .event,
.page-index .sectionReviews .review .user {
	margin: 0.5em 0;
	font-size: 120%;
}

.page-index .sectionReviews .review .event {
	color: var(--strong-color);
	font-family: var(--title-font);
	font-weight: normal;
	font-size: 120%;
}

.page-index .sectionReviews .review .user {
	font-weight: bolder;
	font-size: 80%;
}

.page-index .sectionReviews .stars span {
	display: inline-block;
	height: 2em;
	vertical-align: middle;
}

.page-index .sectionReviews .stars .star {
	line-height: 2em;
  font-size: 200%;
	color: var(--line-color);
}

.page-index .sectionReviews .stars .on {
  color: var(--review-star-color);
}

.page-index .sectionReviews .stars .count {
	margin: 0 0.5em;
	line-height: 2.3em;
	font-size: 90%;
	color: var(--note-color);
}

/*
 * index page page / features
 */

.page-index .sectionFeatures .images {
	position: relative;
	margin: 1em;
	padding: 1em;
	height: 30em;
}

.page-index .sectionFeatures .image {
	display: inline-block;
	box-sizing: content-box;
	position: absolute;
	width: 12em;
	height: 8em;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	background-color: var(--background-color);
	border: solid 0.7em var(--background-color);
	border-radius: 1em;
}

.page-index .sectionFeatures .image-1 {
	right: 25%;
	transform: rotate(-6deg);
	background-image: url(/images/gallery/featureZen.jpg);
	z-index: 1;
}

.page-index .sectionFeatures .image-2 {
	top: 34%;
	left: 17%;
	transform: rotate(+9deg);
	background-image: url(/images/gallery/featureReader.jpg);
	z-index: 2;
}

.page-index .sectionFeatures .image-3 {
	top: 65%;
	right: 20%;
	transform: rotate(-1deg);
	background-image: url(/images/gallery/featureReaders.jpg);
	z-index: 3;
}

.page-index .sectionFeatures .text ul {
	margin: 0 0 2.4em -2em;
	list-style: none;
}

.page-index .sectionFeatures .text ul li {
	padding: 0 3em 0 4em;
	background-position: left center;
	background-size: 3em;
	background-repeat: no-repeat;
}

.page-index .sectionFeatures .text ul li.feature-1 {
	background-image: url(/images/gallery/feature1.jpg);
}

.page-index .sectionFeatures .text ul li.feature-2 {
	background-image: url(/images/gallery/feature2.jpg);
}

.page-index .sectionFeatures .text ul li.feature-3 {
	background-image: url(/images/gallery/feature3.jpg);
}

/*
 * index page / commitments
 */

.page-index .sectionCommitments .commitment {
  margin: 0.5em 0;
 	padding: 0.5em 1em;
	background-color: var(--background-color);
	border-radius: 1em;
}

.page-index .sectionCommitments .commitment .number {
 	color: var(--strong-color);
 	font-size: 220%;
}

.page-index .sectionCommitments .commitment .number::before {
 	content: '— ';
}

.page-index .sectionCommitments .commitment .number::after {
 	content: ' —';
}

.page-index .sectionCommitments .commitment .image {
	display: inline-block;
	width: 6.8em;
	height: 4.9em;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.page-index .sectionCommitments .commitment .image-1 {
	background-image: url(/images/gallery/commitment1.jpg);
}

.page-index .sectionCommitments .commitment .image-2 {
	background-image: url(/images/gallery/commitment2.jpg);
}

.page-index .sectionCommitments .commitment .image-3 {
	background-image: url(/images/gallery/commitment3.jpg);
}

.page-index .sectionCommitments .commitment .image-4 {
	background-image: url(/images/gallery/commitment4.jpg);
}

.page-index .sectionCommitments .commitment p {
	margin: 0 0 1em;
}

/*
 * index page / price
 */

.page-index .sectionPrice .tag {
	margin: 2em;
 	padding: 1em;
	border-radius: 1em;
	text-align: center;
	color: var(--strong-color);
	background-color: var(--background-color);
}

.page-index .sectionPrice .tag .price {
	font-size: 250%;
}

.page-index .sectionPrice .tag .pages {
	font-size: 120%;
}

.page-index .sectionPrice .tag .rack {
  justify-content: center;
}

/*
 * index page / events
 */

.page-index .sectionEvents ul {
	margin: 1.2em 0 0;
}

.page-index .sectionEvents .event {
	position: relative;
}

.page-index .sectionEvents .event img {
	width: 100%;
	height: auto;
	border-radius: 1em;
}

.page-index .sectionEvents .event .text {
	position: absolute;
	bottom: 1em;
	width: 100%;
  padding: 0 0.8em;
	text-align: center;
	font-size: 110%;
}

.page-index .sectionEvents .event .text .title {
	display: inline-block;
	padding: 0.2em 0.4em;
	border-radius: 0.4em;
	color: var(--background-color);
	background-color: var(--label-background-color);
	font-size: 80%;
}

.page-index .sectionEvents .event:hover .text .title {
  color: var(--foreground-color);
  background-color: var(--background-color);
}

/*
 * index page / team
 */

.page-index .sectionTeam .images {
	position: relative;
	padding: 1em;
	height: 8em;
}

.page-index .sectionTeam .image {
	display: inline-block;
	box-sizing: content-box;
	width: 8.5em;
	height: 8.5em;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	background-color: var(--background-color);
	border: solid 0.7em var(--background-color);
	border-radius: 1em;
}

.page-index .sectionTeam .images .image {
	display: inline-block;
}

.page-index .sectionTeam .image-1 {
	right: 50%;
	transform: rotate(-6deg);
	background-image: url(/images/gallery/Julie.jpg);
}

.page-index .sectionTeam .image-2 {
	left: 50%;
	transform: rotate(+9deg);
	background-image: url(/images/gallery/Bruno.jpg);
}

/*
 * index page / media
 */

.page-index .sectionMedia {
	margin: 1em;
}

.page-index .sectionMedia .image {
	display: inline-block;
	margin: 0 0.5em;
	width: 5em;
	height: 2em;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.page-index .sectionMedia .image-1 {
	background-image: url(/images/partners/france3.png);
}

.page-index .sectionMedia .image-2 {
	background-image: url(/images/partners/franceInter.png);
}

.page-index .sectionMedia .image-3 {
	background-image: url(/images/partners/europe1.png);
}

.page-index .sectionMedia .image-4 {
	background-image: url(/images/partners/psychologies.png);
}

.page-index .sectionMedia .image-5 {
	background-image: url(/images/partners/simpleThings.png);
}

.page-index .sectionMedia .image-6 {
	background-image: url(/images/partners/elle.png);
}

/*
 * index page / book
 */

.page-index .sectionBook {
	padding: 0;
}

.page-index .sectionBook .text {
	padding: 2em;
}

.page-index .sectionBook .imageContainer {
	height: 17.5em;
	overflow: hidden;
	padding: 2em 0 0;
}

.page-index .sectionBook .image {
	display: inline-block;
	width: 21.7em;
	height: 17.2em;
	background-image: url(/images/gallery/openBook.jpg);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	transform: rotate(+15deg);
}

/*
 * event pages, partner pages
 */

.page-event .sectionEvent .image,
.page-partner .sectionPartner .image {
	display: inline-block;
	margin: 1em 0 0.2em;
	width: 12em;
	height: 19.9em;
	max-width: 100%;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.page-partner .sectionPartner .logo {
	display: inline-block;
	margin: 0 0 2em;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.page-partner .description ol {
	max-width: calc(var(--page-width) / 2);
	margin: 0.5em auto;
	text-align: left;
}

/*
 * events
 */

.page-event-baby .sectionEvent .image {
	background-image: url(/images/gallery/eventBaby.jpg);
}

.page-event-bachelor .sectionEvent .image {
	background-image: url(/images/gallery/eventBachelor.jpg);
}

.page-event-birthdayAnniversary .sectionEvent .image {
	background-image: url(/images/gallery/eventBirthdayAnniversary.jpg);
}

.page-event-careBook .sectionEvent .image {
	background-image: url(/images/gallery/eventCareBook.jpg);
}

.page-event-cookbook .sectionEvent .image {
	background-image: url(/images/gallery/eventCookbook.jpg);
}

.page-event-funeral .sectionEvent .image {
	background-image: url(/images/gallery/eventFuneral.jpg);
}

.page-event-graduate .sectionEvent .image {
	background-image: url(/images/gallery/eventGraduate.jpg);
}

.page-event-grandparentsCelebration .sectionEvent .image {
	background-image: url(/images/gallery/eventGrandparentsCelebration.jpg);
}

.page-event-leaving .sectionEvent .image {
	background-image: url(/images/gallery/eventLeaving.jpg);
}

.page-event-portrait .sectionEvent .image {
	background-image: url(/images/gallery/eventPortrait.jpg);
}

.page-event-retirement .sectionEvent .image {
	background-image: url(/images/gallery/eventRetirement.jpg);
}

.page-event-souvenirs .sectionEvent .image {
	background-image: url(/images/gallery/eventSouvenirs.jpg);
}

.page-event-teacherPresent .sectionEvent .image {
	background-image: url(/images/gallery/eventTeacherPresent.jpg);
}

.page-event-wedding .sectionEvent .image {
	background-image: url(/images/gallery/eventWedding.jpg);
}

.page-event-weddingAnniversary .sectionEvent .image {
	background-image: url(/images/gallery/eventWeddingAnniversary.jpg);
}

.page-event-yearBook .sectionEvent .image {
	background-image: url(/images/gallery/eventYearBook.jpg);
}

/*
 * partner Anniversaire de mariage
 */

.page-partner-anniversaireDeMariage .sectionPartner .logo {
	width: 22em;
	height: 2.2em;
	background-image: url(/images/partners/anniversaireDeMariage.png);
}

.page-partner-anniversaireDeMariage .sectionPartner .image {
	background-image: url(/images/gallery/eventWeddingAnniversary.jpg);
}

/*
 * partner Chaboud
 */

.page-partner-etsChaboud .sectionPartner .logo {
	width: 22em;
	height: 6em;
	background-image: url(/images/partners/etsChaboud.png);
}

.page-partner-etsChaboud .sectionPartner .image {
	background-image: url(/images/gallery/eventFuneral.jpg);
}

/*
 * partner En sa mémoire
 */

.page-partner-enSaMemoire .sectionPartner .logo {
	width: 8em;
	height: 8em;
	background-image: url(/images/partners/enSaMemoire.png);
}

.page-partner-enSaMemoire .sectionPartner .image {
	background-image: url(/images/gallery/eventFuneral.jpg);
}

/*
 * partner La Cagnotte des Proches
 */

.page-partner-laCagnotteDesProches .sectionPartner .logo {
	width: 18em;
	height: 7.6em;
	background-image: url(/images/partners/laCagnotteDesProches.png);
}

.page-partner-laCagnotteDesProches .sectionPartner .image {
	background-image: url(/images/gallery/eventFuneral.jpg);
}

/*
 * partner Luckey
 */

.page-partner-luckey .sectionPartner .logo {
	width: 12em;
	height: 7em;
	background-image: url(/images/partners/luckey.png);
}

.page-partner-luckey .sectionPartner .image {
	background-image: url(/images/gallery/eventSouvenirs.jpg);
}

/*
 * partner Ma Bohème
 */

.page-partner-maBoheme .sectionPartner .logo {
	width: 20em;
	height: 3em;
	background-image: url(/images/partners/livredorgratuit.png);
}

.page-partner-maBoheme .sectionPartner .image {
	background-image: url(/images/gallery/eventBirthdayAnniversary.jpg);
}

/*
 * partner Mille mercis mariage
 */

.page-partner-milleMercisMariage .sectionPartner .logo {
	width: 22em;
	height: 4.4em;
	background-image: url(/images/partners/milleMercisMariage.png);
}

.page-partner-milleMercisMariage .sectionPartner .image {
	background-image: url(/images/gallery/eventWedding.jpg);
}

/*
 * partner Odella
 */

.page-partner-odella .sectionPartner header {
	padding: 2em 0;
	background-color: #556c79;
}

.page-partner-odella .sectionPartner header .logo {
	display: inline-block;
	margin: 0 0 0.5em;
	width: 8.4em;
	height: 4.9em;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url(/images/partners/odella.png);
}

.page-partner-odella .sectionPartner header h1 {
	color: var(--background-color);
}

.page-partner-odella .sectionPartner .image {
	width: 37em;
	height: 30em;
	background-image: url(/images/partners/odellaBook.jpg);
}

.page-partner-odella .sectionPartner a.link {
	color: #9c94ab;
}

/*
 * partner Préviséo
 */

.page-partner-previseo .sectionPartner .logo {
	width: 18.8em;
	height: 6em;
	background-image: url(/images/partners/previseo.png);
}

.page-partner-previseo .sectionPartner .image {
	background-image: url(/images/gallery/eventFuneral.jpg);
}

/*
 * partner Roc Eclerc
 */

.page-partner-rocEclerc .sectionPartner .logo {
	width: 17em;
	height: 4.4em;
	background-image: url(/images/partners/rocEclerc.png);
}

.page-partner-rocEclerc .sectionPartner .image {
	background-image: url(/images/gallery/eventFuneral.jpg);
}

/*
 * partner Une Rose blanche
 */

.page-partner-uneRoseBlanche .sectionPartner .logo {
	width: 14em;
	height: 5.1em;
	background-image: url(/images/partners/uneRoseBlanche.png);
}

.page-partner-uneRoseBlanche .sectionPartner .image {
	background-image: url(/images/gallery/eventFuneral.jpg);
}

.page-partner-sweetSouvenirs .sectionPartner .logo {
	width: 16em;
	height: 3.9em;
	background-image: url(/images/partners/sweetSouvenirs.png);
}

.page-partner-sweetSouvenirs .sectionPartner .image {
	background-image: url(/images/gallery/eventBirthdayAnniversary.jpg);
}

/*
 * blog page
 */

.page-blog .article-extract {
	padding: 1em 0 1em 1.5em;
}

.page-blog .article-extract > a {
  text-decoration: inherit;
	color: inherit;
}

.page-blog .article-extract .title {
	margin: 0 0 0.5em;
	font-family: var(--title-font);
	font-size: 160%;
	color: var(--strong-color);
}

.page-blog .article-extract .image,
.page-blog .article-extract p {
 	margin: 0.5em 1.5em 0.5em 0;
}

.page-blog .article-extract .image img {
	max-width: 100%;
	height: auto;
	background-color: var(--line-color);
}

.page-blog .article .image img {
	margin: 1em 0;
	max-width: 50%;
	height: auto;
	background-color: var(--line-color);
}

.page-blog .article .abstract {
	margin: 2em 0 3em;
}

.page-blog .article table td {
  padding: 0.5em;
  border: solid 1px var(--line-color);
}

/*
 * help page
 */

.page-help .sections {
	margin: 0 0 1.5em;
}

.page-help .sections h2 {
	margin: 1.5em 0 0.5em;
}

.page-help button {
	margin: 0.1em 0 0;
	padding: 0.1em 0.2em;
	color: var(--symbol-color);
	background-color: var(--light-color);
	border: solid 1px var(--symbol-color);
}

/*
 * legal page
 */

.page-legal {
	counter-reset: section1;
}

.page-legal h2::before {
	color: var(--ambiance-color);
  counter-increment: section1;
  content: counter(section1) '\00a0';
}

.page-legal h2 {
	counter-reset: section2;
}

.page-legal h3::before {
	color: var(--ambiance-color);
  counter-increment: section2;
  content: counter(section1) '.' counter(section2) '\00a0';
}

/*
 * offer page
 */

.page-offer .sectionSteps ul li {
	text-align: center;
}

.page-offer .sectionPrinting .image {
	display: inline-block;
	margin: 2em 0 0;
	width: 20em;
	height: 12.4em;
	background-image: url(/images/gallery/books.jpg);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.page-offer .covers {
	text-align: center;
}

.page-offer .covers img {
	max-width: 60%;
	height: auto;
}

.page-offer .doublePage {
	margin: 1em 2em;
}

.page-offer .doublePage img {
	max-width: 100%;
	height: auto;
	background-color: var(--line-color);
	border: solid 1px var(--line-color);
}

/*
 * team page
 */

.page-team .sectionTeam .teammate {
	margin: 0 1em;
}

.page-team .section .image-presentation {
 	text-align: center;
}

.page-team .image-presentation img {
  display: block;
  margin: 2em auto;
  width: 40em;
  max-width: 80%;
  height: auto;
}

/*
 * admin page
 */

.page-admin h1 {
	margin: 0 0 1em;
	padding: 0.4em;
	color: var(--background-color);
	background-color: var(--ambiance-color);
}

.page-admin .image {
	max-width: 150px;
	height: auto;
	background-color: var(--line-color);
}

.page-admin .map-container {
	width: 100%;
	height: 600px;
	padding: 0 1em 0 0;
}

.page-admin .map {
	width: 100%;
	height: 100%;
}

.page-admin .svg-container {
	padding: 1em 0;
}

.page-admin .svg-container svg {
	overflow: visible;
}

/*
 * admin page dialog
 */

.page-admin-dialog .drawing {
 	margin: 1em;
	display: flex;
	height: 75vh;
}

.page-admin-dialog .palette {
	background-color: var(--background-color-2);
	width: 5em;
	padding: 0.75em;
}

.page-admin-dialog .paint {
 	border: solid 1px var(--line-color);
	width: 500px;
	flex: 1;
}

.page-admin-dialog .color {
	width: 3em;
	height: 3em;
	line-height: 3em;
	margin: 0.5em 0;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
}

/*
 * private page
 */

.page-private h1 {
	margin: 0;
}

.page-private .banner {
	display: flex;
  align-items: flex-start;
  gap: 0.5em;
}

.page-private .banner .title {
	margin: 0;
}

.page-private .banner .title-container {
  flex: 1;
}

.page-private .banner .title-container .title {
	margin: 0;
	font-family: var(--title-font);
	font-size: 160%;
	color: var(--strong-color);
}

.page-private .banner .title-container .description {
	margin: 0;
	color: var(--note-color);
	font-size: 90%;
}

.page-private .banner .avatar {
	width: 2.5em;
	height: auto;
	border-radius: 50%;
}

.page-private .banner-title {
  margin: 0.5em 0;
}

.page-private .category {
	margin: 0 0.6em 0 0;
	padding: 0.1em 0.6em;
	font-size: 80%;
	color: var(--background-color);
	background-color: var(--symbol-color);
	border-radius: 0.5em;
}

.page-private .category-0,
.page-private .category-8,
.page-private .category-16,
.page-private .category-24 {
	background-color: #5aba59;
}

.page-private .category-1,
.page-private .category-9,
.page-private .category-17,
.page-private .category-25 {
	background-color: #df2d4f;
}

.page-private .category-2,
.page-private .category-10,
.page-private .category-18,
.page-private .category-26 {
	background-color: #8156a7;
}

.page-private .category-3,
.page-private .category-11,
.page-private .category-19,
.page-private .category-27 {
	background-color: #e84b25;
}

.page-private .category-4,
.page-private .category-12,
.page-private .category-20,
.page-private .category-28 {
	background-color: #40af84;
}

.page-private .category-5,
.page-private .category-13,
.page-private .category-21,
.page-private .category-29 {
	background-color: #b91725;
}

.page-private .category-6,
.page-private .category-14,
.page-private .category-22,
.page-private .category-30 {
	background-color: #009ddd;
}

.page-private .category-7,
.page-private .category-15,
.page-private .category-23,
.page-private .category-31 {
	background-color: #cc9600;
}

.page-private .category-999 {
	background-color: #4d85d1;
}

.page-private .circledNumber {
	display: inline-block;
	margin: 0 0.1em;
	width: 2.7em;
	height: 2.7em;
	font-weight: bold;
	color: var(--strong-color);
	line-height: 2.3em;
	text-align: center;
	border: solid 3px var(--strong-color);
	border-radius: 50%;
}

.page-private .frame {
	margin: 2em 1em;
	padding: 1em 2em;
	border-radius: 2em;
}

.page-private .frame h1,
.page-private .frame h2,
.page-private .frame h3,
.page-private .frame h4 {
	text-align: center;
}

.page-private .frame h2 i.fi,
.page-private .frame h3 i.fi {
	margin: 0 0.2em 0 0;
	vertical-align: middle;
}

.page-private .frame-2 {
	background-color: var(--background-color-2);
}

.page-private .frame-3 {
	background-color: var(--background-color-3);
}

.page-private ul.images {
	margin: 0.7em 0;
	padding: 0;
	list-style: none;
}

.page-private .showSampleLinks {
  display: flex;
  gap: 1em;
  width: 75%;
}

.page-private .showSampleLinks .icon-nav {
	margin: auto 0.5em;
	width: 2em;
	height: 5em;
}

.page-private .showSampleLinks svg {
  display: inline-block;
  width: 100%;
}

.page-private ul.images li {
	margin: 0.5em 0;
	width: 50%;
}

.page-private ul.images li img {
	max-width: 100%;
	height: auto;
	background-color: var(--line-color);
}

.page-private .image-update {
	position: relative;
	margin: 0.3em 0;
	width: 50%;
}

.page-private .image-update .top-left {
	position: absolute;
  top: 1em;
  left: 1em;
}

.page-private .image-update .avatar {
	width: 9em;
	height: 9em;
	border-radius: 50%;
}

.page-private .noResult {
	margin: 1em 0 2em;
	font-size: 90%;
	color: var(--note-color);
}

.page-private .progressbar {
	margin: 1.5em 0;
	padding: 0;
	counter-reset: step;
}

.page-private .progressbar li {
	display: inline-block;
	visibility: hidden;
	vertical-align: top;
	list-style-type: none;
	width: 3.5em;
	position: relative;
	text-align: center;
	white-space: nowrap;
}

.page-private .progressbar li::before {
	display: block;
	visibility: visible;
	margin: 0 auto 0;
	font-size: 85%;
	width: 2em;
	height: 2em;
	line-height: 2em;
	content: counter(step);
	counter-increment: step;
	text-align: center;
	color: var(--strong-color);
	background-color: var(--background-color-3);
	border-radius: 50%;
	border: solid 3px var(--line-color);
}

.page-private .progressbar li.done::before {
	color: var(--background-color);
	background-color: var(--strong-color);
	border-color: var(--strong-color);
}

.page-private .progressbar li.current::before {
	border-color: var(--strong-color);
}

.page-private .progressbar li::after {
  top: 1em;
	left: -50%;
	visibility: visible;
	width: 100%;
	height: 2px;
	content: '';
	position: absolute;
	background-color: var(--line-color);
	z-index: -1;
}

.page-private .progressbar li:first-child::after {
	content: none;
}

.page-private li.select-item .content .banner {
	margin: 0 0 0.5em;
}

/*
 * private page book
 */

.page-private-book .article .banner {
  margin: 0 0 1.5em;
}

.page-private-book .article-extract {
	padding: 1em;
}

.page-private-book .article-extract > a {
  text-decoration: inherit;
	color: inherit;
}

.page-private-book .article-extract .text-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.page-private-book .article-extract .images {
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
}

.page-private-book .article-extract .image {
	margin: 0.5%;
	padding: 0;
	background-color: var(--line-color);
}

.page-private-book .board-message {
	margin: 0 0 0.7em;
	padding: 0 2em 1em;
	border: solid 1px var(--line-color);
}

.page-private-book .board-message ul {
	list-style: none;
	padding: 0 2em;
}

.page-private-book .deadline .circledNumber {
	font-size: 120%;
}

.page-private-book .deadline.indicator .circledNumber {
	font-size: 100%;
}

.page-private-book .deadline .circledNumber.end {
	color: var(--ambiance-color);
	border-color: var(--ambiance-color);
}

.page-private-book .indicator {
	margin: 0.5em 0;
}

.page-private-book .indicator i.fi {
	width: 1.2em;
}

.page-private-book .information {
  margin: 1em 0;
}

.page-private-book .information img {
  max-width: 8em;
	height: auto;
}

.page-private-book .member {
	padding: 1em 0 0;
}

.page-private-book .member .noResult {
	margin: 0.5em 0 2em;
}

.page-private-book .member .articles {
	margin: 0.5em 0 2em 3.2em;
}

.page-private-book .tasks .legend {
	margin: 0.8em 0 3em;
	text-align: center;
	font-size: 80%;
}

.page-private-book .tasks ol {
	padding: 0;
	list-style: none;
}

.page-private-book .tasks ol > li {
	margin: 0.7em 0 0 3em;
	counter-increment: task;
}

.page-private-book .tasks ol > li .icon-task {
	margin: 0 0.3em 0 -1.5em;
	font-size: 200%;
	vertical-align: middle;
}


.page-private-book .tasks ol > li .title {
	margin: 10em 0;
	font-size: 110%;
}

.page-private-book .tasks .task-undone .title {
	font-weight: bold;
}

.page-private-book .tasks .icon-task-undone {
	color: var(--strong-color);
}

.page-private-book .tasks .icon-task-future {
	color: var(--line-color);
}

.page-private-book ul.suggestions {
  padding: 0;
  list-style: none;
  margin-left: 0.6em;
  text-indent: -0.6em;
}

.page-private-book ul.suggestions > li {
	margin: 0.3em 0;
}

.page-private .validated {
	margin: 0 0 0 0.3em;
	font-size: 700%;
  color: var(--strong-color);
}

/*
 * private page flash
 */

.page-private-flash .section {
	padding: 3em;
}

.page-private-flash h1 {
	margin: 0 0 1em;
}

.page-private-flash h2 {
	margin: 0 0 0.5em;
}

.page-private-flash img {
	max-width: 15em;
	height: auto;
}

/*
 * private page journal
 */

.page-private-journal .avatarSize .image {
	vertical-align: middle;
	color: var(--ambiance-color);
}

.page-private-journal li.article .banner {
	margin: 1.5em 0 0.5em;
}

.page-private-journal .boxing-panel #boxing {
  margin: 1em 0;
  width: 100%;
	height: 70vh;
  background-color: var(--background-color-2);
  border: solid 1px var(--line-color);
}

.page-private-journal .boxing-panel input,
.page-private-journal .boxing-panel select {
	margin: 0.1em;
}

.page-private-journal .boxing-panel input[type=color] {
	padding: 0.2em;
	width: 2.3em;
	height: 2.3em;
}

.page-private-journal .clustering {
	margin: 0 0 1em;
}

.page-private-journal .clustering .item {
	margin: 0.5em 0;
	padding: 0.5em;
	border: solid 1px var(--line-color);
	cursor: move;
}

.page-private-journal .custom::before {
  font-family: 'icomoon' !important;
	content: '\e900';
	font-size: 80%;
}

.page-private-journal .sorting .pages {
  display: flex;
}

.page-private-journal .sorting .page {
  flex-basis: 100%;
  overflow: hidden;
  margin: 0.8em 0.4em;
  min-height: 14em;
}

.page-private-journal .sorting .pageNumber {
  padding: 0.4em 0;
  text-align: center;
  color: var(--note-color);
  font-size: 90%;
  background-color: var(--background-color-2);
}

.page-private-journal .sorting .pageNumber span {
  font-weight: bold;
}

.page-private-journal .sorting .container {
	padding: 0.5em;
  height: 100%;
}

.page-private-journal .sorting .page-container {
  background-color: var(--background-color-2);
}

.page-private-journal .sorting .element {
	margin: 0.25em 0;
  background-color: var(--background-color);
	overflow: hidden;
}

.page-private-journal .sorting .page-element {
	border: solid 1px var(--line-color);
  min-height: 10em;
}

.page-private-journal .sorting .movable {
  cursor: move;
}

.page-private-journal .sorting .link-element.movable {
  border: dashed 1px var(--line-color);
}

.page-private-journal .sorting .startPosition {
  margin: 0.5em;
}

.page-private-journal .sorting .startPosition-left {
  text-align: left;
}

.page-private-journal .sorting .startPosition-right {
  text-align: right;
}

.page-private-journal .sorting .startPosition span {
  padding: 0.1em 0.3em;
  font-size: 90%;
  color: var(--background-color);
  background-color: var(--note-color);
}

.page-private-journal .sorting .moving,
.page-private-journal .sorting .moving .element {
  background-color: var(--line-color);
}

.page-private-journal .svg-container {
	padding: 1em 0;
}

/*
 * private page order
 */

.page-private-order .spots .spot {
  display: block;
  margin: 1em 0;
  text-indent: -1.5em;
  padding: 1em 1em 1em 2.5em;
  border: solid 1px var(--line-color);
}

/*
 * private page profile
 */

.page-private-profile .profile {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
}

.page-private-profile .profile .content {
  flex: 1;
}

.page-private-profile .section-alert {
 	margin: 2em 0;
}

/*
 * journalViewer, boxingEditor
 */

.journalViewer .circle-alert {
  fill: var(--alert-color);
}

.boxingEditor rect.selected {
  stroke-width: 10px;
  stroke: var(--strong-color);
}

.boxingEditor .anchor {
  fill: var(--strong-color);
}

.boxingEditor .anchor.alert {
  fill: var(--alert-color);
}

.boxingEditor .line {
  stroke: var(--strong-color);
}

.boxingEditor .line.alert {
  stroke: var(--alert-color);
}

.boxingEditor .line-guide {
  stroke: #f6b814;
}

/*
 * responsive group
 */

.responsive-g {
	display: flex;
	flex-flow: wrap;
}

.responsive-m-1 {
	width: 100%;
}

.responsive-m-1-2 {
	width: calc(100% * 1 / 2);
}

.responsive-m-1-3 {
	width: calc(100% * 1 / 3);
}
.responsive-m-2-3 {
	width: calc(100% * 2 / 3);
}

.responsive-m-1-4 {
	width: calc(100% * 1 / 4);
}
.responsive-m-2-4 {
	width: calc(100% * 2 / 4);
}
.responsive-m-3-4 {
	width: calc(100% * 3 / 4);
}

.responsive-m-1-6 {
	width: calc(100% * 1 / 6);
}
.responsive-m-2-6 {
	width: calc(100% * 2 / 6);
}
.responsive-m-3-6 {
	width: calc(100% * 3 / 6);
}
.responsive-m-4-6 {
	width: calc(100% * 4 / 6);
}
.responsive-m-5-6 {
	width: calc(100% * 5 / 6);
}

.responsive-m-1-8 {
	width: calc(100% * 1 / 8);
}
.responsive-m-2-8 {
	width: calc(100% * 2 / 8);
}
.responsive-m-3-8 {
	width: calc(100% * 3 / 8);
}
.responsive-m-4-8 {
	width: calc(100% * 4 / 8);
}
.responsive-m-5-8 {
	width: calc(100% * 5 / 8);
}
.responsive-m-6-8 {
	width: calc(100% * 6 / 8);
}
.responsive-d-7-8 {
	width: calc(100% * 7 / 8);
}

@media (min-width: 768px) {

	.responsive-d-1 {
		width: 100%;
	}

	.responsive-d-1-2 {
		width: calc(100% * 1 / 2);
	}

	.responsive-d-1-3 {
		width: calc(100% * 1 / 3);
	}
	.responsive-d-2-3 {
		width: calc(100% * 2 / 3);
	}

	.responsive-d-1-4 {
		width: calc(100% * 1 / 4);
	}
	.responsive-d-2-4 {
		width: calc(100% * 2 / 4);
	}
	.responsive-d-3-4 {
		width: calc(100% * 3 / 4);
	}

	.responsive-d-1-6 {
		width: calc(100% * 1 / 6);
	}
	.responsive-d-2-6 {
		width: calc(100% * 2 / 6);
	}
	.responsive-d-3-6 {
		width: calc(100% * 3 / 6);
	}
	.responsive-d-4-6 {
		width: calc(100% * 4 / 6);
	}
	.responsive-d-5-6 {
		width: calc(100% * 5 / 6);
	}

	.responsive-d-1-8 {
		width: calc(100% * 1 / 8);
	}
	.responsive-d-2-8 {
		width: calc(100% * 2 / 8);
	}
	.responsive-d-3-8 {
		width: calc(100% * 3 / 8);
	}
	.responsive-d-4-8 {
		width: calc(100% * 4 / 8);
	}
	.responsive-d-5-8 {
		width: calc(100% * 5 / 8);
	}
	.responsive-d-6-8 {
		width: calc(100% * 6 / 8);
	}
	.responsive-d-7-8 {
		width: calc(100% * 7 / 8);
	}
}

/*
 * responsive grid
 */

ul.responsive-grid {
  display: grid;
  padding: 0;
  list-style: none;
  gap: 1em; /* may be overriden */
}

ul.responsive-grid-2-1 {
  grid-template-columns: 1fr;
}

ul.responsive-grid-4-2 {
  grid-template-columns: 1fr 1fr;
}

@media (min-width: 768px) {

  ul.responsive-grid-2-1 {
    grid-template-columns: 1fr 1fr;
  }

  ul.responsive-grid-4-2 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}