:root {
	--red: #cd324e/*#c51f3c*/;
	--sand: #e9e2d8;
	--clay: #a99d8c;
	--dirt: #554e46;

	--corners: 0.25rem;
	--gutters: 0.75rem;
}

html {font-family: 'Montserrat', sans-serif; font-weight: normal; font-style: normal; font-size: 16px; background-color: white}

body {box-sizing: border-box; display: flex; flex-direction: column; align-items: center; min-height: 100vh; margin: unset; padding: var(--gutters) 0; font-size: 0.875rem}
body * {display: flex; box-sizing: content-box}

h1, h2, h3, h4, h5, h6 {margin: unset; font-weight: unset}
p, ul, strong, em, b, i {display: inline-block; margin: unset; padding: unset}
p:has(+ p) {margin-bottom: 0.875rem}

form, fieldset, input, textarea, button, a {font-family: unset; color: unset; text-decoration: unset; outline: none; border: none}

button:hover, a:hover {opacity: 0.7}

::placeholder {color: #c0c0c0}

/* ================================================================================================================================ */

.symbols {flex-direction: row; align-items: center; justify-content: center; font-family: 'Material Symbols Outlined'; font-weight: 300; font-style: normal; font-size: 1.25rem; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased}
.symbols + * {margin-right: 0.25rem}

/* -------------------------------------------------------------------------------------------------------------------------------- */

.counter {align-items: flex-end}
.counter .symbols {font-size: 1.125rem}
.counter + .counter {margin-left: 0.5rem}
.counter[count="0"] {color: #b0b0b0}

/* -------------------------------------------------------------------------------------------------------------------------------- */

.labels {flex-direction: row}
.labels .label {flex-direction: row; align-items: center; margin: 0.125rem; padding: 0.125rem 0.375rem 0.25rem 0.25rem; font-style: normal; font-weight: 500; font-size: 0.75rem; background-color: #e0e0e0; border-radius: var(--corners)}
.labels .label.category {color: white; background-color: var(--clay)}
.labels .label.feed {color: white; background-color: var(--red)}
.labels .label .symbols {margin-right: 0.125rem; font-size: 1.125rem}
.labels .label i {font-style: normal; font-weight: 300}

/* -------------------------------------------------------------------------------------------------------------------------------- */

.page {max-width: calc(100% - 15.75rem); flex-grow: 1; flex-direction: column; padding-top: 1rem;}
.page-header {flex-direction: row; align-items: flex-start; margin-bottom: var(--gutters); padding: 0 0 0.25rem 0.5rem; border-bottom: 1px solid var(--clay)}
.page-title {margin-right: 0.5rem; font-family: 'EB Garamond', serif; font-style: italic; font-size: 1.75rem; font-weight: 500; line-height: 1.75rem}
.page-header .labels {margin: 0.125rem 0 0.325rem 0}
.page-content {flex-direction: column; align-items: stretch}
.page-desc {display: inline-block; margin-bottom: var(--gutters); padding: 0 0.75rem; font-style: italic}
.page-desc * {display: inline-block}

.section {flex-direction: column; margin-bottom: 1.25rem}
.section-header {flex-direction: row; justify-content: space-between; margin-bottom: var(--gutters); padding: 0 0 0.25rem 0.5rem; border-bottom: 1px dotted var(--clay)}
.section-header .section-title {font-family: 'EB Garamond', serif; font-style: italic; font-weight: 500; font-size: 1.5rem}
.section-content {flex-direction: column; margin-bottom: var(--gutters)}
.section-desc {margin-bottom: var(--gutters); padding: 0 0.75rem; font-style: italic}

.subsection {align-self: center; width: 100%; margin-bottom: var(--gutters); color: #000000}
.subsection-body {flex-grow: 1; flex-direction: column; padding: 0.75rem 1rem; background-color: #e8e8e8; border-radius: var(--corners)}
.subsection-header {width: 100%; flex-direction: row; align-items: center; margin-bottom: 0.25rem}
.subsection-header .label.tag {background-color: white}
.subsection-title {flex-direction: row; align-items: flex-start; margin-right: 0.5rem; font-family: 'EB Garamond', serif; font-style: normal; font-weight: 600; font-size: 1.125rem}
.subsection-title .symbols {margin: 0.25rem 0.25rem 0 0; font-size: 1rem}
.subsection-content {display: inline; margin-bottom: 0.75rem; font-style: italic; font-weight: 400; line-height: 1.125rem; text-align: justify}
.subsection-footer {flex-direction: row; justify-content: space-between}
.subsection-footer .subsection-infos {flex-grow: 1; flex-direction: row; justify-content: flex-end; align-items: flex-end; font-size: 0.75rem; font-weight: 300; white-space: nowrap}
.subsection-footer .subsection-infos b {font-weight: 400}
.subsection-footer .post-interactions {flex-direction: row; align-items: flex-end; margin-right: 1rem}

.subsection.ticket {flex-direction: row; max-width: unset}
.subsection.ticket .ticket-number {justify-content: center; align-items: flex-end; margin-right: var(--gutters); padding-right: 0.5rem; font-size: 0.75rem; color: var(--clay); writing-mode: sideways-lr; border-right: 1px dotted var(--sand)}
.subsection.ticket .subsection-body {background-color: var(--sand)}

.subsection.reaction .subsection-body {flex-grow: unset}
.subsection.reaction .subsection-footer .subsection-infos {justify-content: flex-start}

/* -------------------------------------------------------------------------------------------------------------------------------- */

.controls {flex-direction: row; align-items: center; justify-content: center}

.controls > * {width: 30%}

.control {align-items: center; justify-content: space-between; height: 1.25rem; margin: 0 0.5rem; padding: 0.375rem 0.5rem; color: white; background-color: var(--red); border-radius: var(--corners); cursor: pointer}
.control.next {flex-direction: row-reverse}
.control.disabled {background-color: #d7a0aa; opacity: 0.5; cursor: unset}
.control.preview {background-color: var(--clay)}
.control.submit {background-color: var(--red)}

.control .control-legend {width: calc(100% - 20px); white-space: nowrap; text-overflow: ellipsis; overflow: hidden}

.controls .pagination-current {height: 1.25rem; margin: 0 0.5rem; padding: 0.375rem 0.5rem; white-space: nowrap; text-overflow: ellipsis; background-color: #e0e0e0; border-radius: var(--corners); overflow: hidden}



.field {flex-grow: 1; flex-direction: row; min-height: 2rem; margin: 0 0.25rem 0.5rem 0.25rem; background-color: white; border-radius: var(--corners)}
.field-label {align-self: stretch; align-items: center; padding: 0.25rem 0.375rem; font-size: 0.75rem; background-color: #c8c8c8; border-radius: var(--corners) 0 0 var(--corners); cursor: pointer}
.field-value {flex-grow: 1; align-items: center; margin: 0.25rem 0.375rem; padding: 0 0.125rem; font-family: monospace; font-size: 0.75rem; outline: none; border: unset; border-bottom: 1px dashed #d8d8d8}
.field .control {margin: unset; border-radius:0 var(--corners) var(--corners) 0; user-select: none}

/* ---- MENU ---------------------------------------------------------------------------------------------------------------------- */

.page.menu {flex-direction: column; flex-grow: unset; min-width: 13rem; margin-right: var(--gutters); padding: 1rem; color: white; background-color: var(--red); border-radius: var(--corners)}
.page.menu .page-header,
.page.menu .section-header {border-color: white}
.page.menu .page-header .symbols {display: none; margin-left: auto; font-size: 1.5rem; cursor: pointer; user-select: none}
.page.menu .page-header .symbols:hover {opacity: 0.7}
.page.menu .section-content {padding: unset}
.page.menu .section.search .field-value {flex-grow: 1; color: black}
.page.menu .section.search .field .control {color: black; background-color: white}
.page.menu .section:last-child {margin-bottom: unset}
.page.menu .section:last-child .section-content {margin-bottom: unset}

@media (max-width: 1200px) {
	.page.menu .page-header .symbols {display: flex}
	.page.menu.off .page-header {border-bottom: unset; margin-bottom: unset; padding-bottom: 0}
	.page.menu.off .section {display: none}
}

.page.menu .item {flex-direction: row; align-items: center; padding: 0.5rem; font-style: normal; font-weight: 500; font-size: 1rem; border-bottom: 1px dotted #ffffff88}
.page.menu .item.category {border-bottom: unset}
.page.menu .item .symbols {margin-right: 0.5rem}

/* -------------------------------------------------------------------------------------------------------------------------------- */


/* ================================================================================================================================ */

#header {align-self: stretch; justify-content: center; margin-left: calc(13rem + (2 * var(--gutters)) + 2rem); margin-bottom: var(--gutters); font-family: 'EB Garamond', serif; font-style: italic; font-weight: 500; font-size: 3rem; text-align: center}
body.home #header {margin-left: unset}
@media (max-width: 1200px) {
	#header {margin-left: unset}
}

#wrapper {align-self: stretch; flex-grow: 1; flex-direction: row; margin-bottom: var(--gutters); padding: 0 0.75rem}

#footer {align-self: stretch; flex-direction: column; padding: 0 0.75rem}
#footer #copyrights {flex-direction: row; justify-content: space-between; padding: 0.75rem; font-size: 0.75rem; color: white; background-color: var(--clay); border-radius: var(--corners)}
#footer #copyrights * {display: inline-block}


/* -------------------------------------------------------------------------------------------------------------------------------- */

#edito {flex-direction: column; max-width: 300px; margin-left: var(--gutters); color: white; background-color: var(--dirt); border-radius: var(--corners)}
#edito img {align-self: stretch; border-radius: var(--corners) var(--corners) 0 0}
#blog-desc .subsection-body {flex-direction: column; padding: 1rem; background-color: unset; border-radius: 0 0 var(--corners) var(--corners)}
#blog-desc .subsection-header {justify-content: center}
#blog-desc .subsection-content {font-style: unset}
#blog-desc .subsection-content p {font-size: 0.75rem; line-height: 1rem; letter-spacing: -0.25px; text-align: justify; hyphens: auto}
#blog-desc .subsection-content strong {font-weight: 600}
#blog-desc ::-webkit-scrollbar {width: 1rem}
#blog-desc ::-webkit-scrollbar-track {background-color: var(--dirt); border-radius: var(--corners)}
#blog-desc ::-webkit-scrollbar-thumb {background-color: white; border: 0.375rem solid var(--dirt); border-radius: 0.5rem}

@media (max-width: 1200px) {
	#wrapper {flex-direction: column}
	#sidebar {order: 1; margin: 0 0 var(--gutters) 0}
	.page {max-width: unset}
	#edito {order: 2; flex-direction: row; margin: 0 0 var(--gutters) 0; max-width: unset; max-height: 300px}
	#edito img {height: 250px; border-radius: var(--corners) 0 0 var(--corners)}
	#blog-desc {height: 250px; border-radius: 0 var(--corners) var(--corners) 0}
	#blog-desc .subsection-body {padding-right: unset}
	#blog-desc .subsection-content {margin-bottom: unset; overflow-y: scroll}
	#main {order: 3}
}

@media (max-width: 500px) {
	#edito {flex-direction: column; max-height: unset}
	#edito img {height: unset; border-radius: var(--corners) var(--corners) 0 0}
	#blog-desc {height: unset; border-radius: 0 0 var(--corners) var(--corners)}
}

/* -------------------------------------------------------------------------------------------------------------------------------- */

.page.article .section#post-content {min-height: 12rem}
.page.article .section#post-content .section-content {padding: 2rem; text-align: justify; background-color: #f5f3ef; border-radius: var(--corners)}

.page.document .page-header {justify-content: center; color: var(--red)}
.page.document .page-desc {order: 3; justify-content: center}
.page.document .section {order: 2}
.page.document .section.disabled {display: none}
.page.document .controls {display: none}
.page.document .section#post-content {order: 1; min-height: 12rem}
.page.document .section#post-content .section-content {padding: 0 0.75rem}

/* -------------------------------------------------------------------------------------------------------------------------------- */

#post-attachments .attachments {flex-direction: row; flex-wrap: wrap}
#post-attachments .attachments .attachment {margin: 0.5rem}

.attachment .media {align-items: stretch; width: 240px; height: 160px; background-color: black; clip-path: xywh(0 0 100% 100% round var(--corners))}
.attachment .media a {flex-grow: 1; align-items: center; justify-content: center}
.attachment .media a img {max-width: 100%; max-height: 100%}

#post-comments fieldset.subsection-body {flex-direction: row; flex-wrap: wrap; justify-content: space-between}
#post-comments textarea {min-height: 3rem; resize: vertical}
#post-comments label.remember {align-items: center; justify-content: center; margin: 0.5rem; cursor: pointer}
#post-comments label.remember input[type=checkbox] {display: none}
#post-comments label.remember input[type=checkbox] + span {order: 2; margin-left: 0.5rem; padding: 0.125rem; color: #e0e0e0; background-color: white; border-radius: var(--corners); user-select: none}
#post-comments label.remember input[type=checkbox]:checked + span {color: white; background-color: var(--red)}

#ping-link {align-self: flex-start}
#ping-link * {white-space: nowrap; overflow: hidden}

/* -------------------------------------------------------------------------------------------------------------------------------- */

#fromto * {display: inline-block}

/* -------------------------------------------------------------------------------------------------------------------------------- */

#root {justify-content: center}
#root #logo {flex-direction: column; align-items: center; justify-content: center; margin-bottom: 2rem}
#root #logo h1 {font-family: 'EB Garamond', serif; font-style: italic; font-size: 3.5rem}
#root .control {height: unset; padding: 0.5rem 0.75rem; font-size: 1.5rem}