:root {
  --header-image-url: url('https://images.pexels.com/photos/1693095/pexels-photo-1693095.jpeg');

  /* COLORS */
  --link-color: #2082A6; /* Green */
  --number-color: #AA3D3D; /* Red */
  --success-color: #3BBD9F; /* Light Green */
  --error-color: #FE5158; /* Light Red */
  --date-color: #5F2A84; /* Violet */

  --background-color: #222531; /* Dark Grey */
  --object-color: #323645; /* Grey */
  --emphase-color: #787F9A; /* LightGrey */
  --front-color: #ffffff; /* White */

  /* UNITS */
  --radius: 5px;
  --font-size: 11px;
  --margin: 10px;
  --content-margin: 20px;
  --object-margin: 7px;
  --icone-size: 20px;

  /* MAX AND MIN UNITS */
  --max-object-width: 800px;
  --max-button-width: 600px;
  --min-object-width: 250px;
}

body {
  padding: 0 0 70px;
  margin: 0;

  width: 100%;
  height: 100%;

  background: var(--background-color);

  color: var(--front-color);
  font-family: 'Inter', sans-serif;

  font-size: 12px;
}

body:has(dialog[open]) {
  overflow: hidden;
}


/* NAVBAR */
nav {
  background-color: var(--object-color);

  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10000;
  overflow: hidden;

  display: flex;
  justify-content: space-between;
  align-items: center;

  border-radius: var(--radius) var(--radius) 0 0;
}

nav a.actif {
  --link-color: var(--front-color); /* TODO changer : blanc trop fort */
}

nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 5px;

  --link-color: var(--emphase-color);
  text-decoration: none;

  color: var(--link-color);
  font-size: var(--font-size);

  position: relative;

}

nav a svg {
  width: var(--icone-size);
  max-height: var(--icone-size);
  fill: var(--link-color);
  padding-bottom: 5px;
}

nav a .new-messages {
  background-color: var(--number-color);
  color: var(--front-color);
  font-size: 9px;
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 10px;

  position: absolute;
  top: 7px;
  right: 13px;
}


/* HEADER */
header {
  position: relative;
  padding: 10px;
  overflow: hidden;

  min-height: 200px;

  background: linear-gradient(to top, var(--background-color), rgba(34,37,49,0.5)), no-repeat center/100%  var(--header-image-url);
}

/* Alert message */
.alert-message {
  position: absolute;
  z-index: 10;
  top: var(--content-margin);
  left: var(--content-margin);
  right: var(--content-margin);

  display: flex;
  gap: var(--margin);
  padding: var(--margin);
  border-radius: var(--radius);
  align-items: center;

  animation: hide 5s ease-in forwards;
}

.alert-message svg {
  fill: var(--front-color);
  opacity: 60%;
  flex-shrink: 0;
  width: var(--icone-size);
}

.alert-message.success {
  background-color: var(--success-color);
}

.alert-message.error {
  background-color: var(--error-color);
}


/* ELEMENTS */

/* Header button */
.headerButton {
  position: absolute !important;
  top: var(--margin);
  left: var(--margin);


  background: var(--object-color);
  border-radius: var(--radius);
  padding: 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

button.headerButton {
  border: none;
}

.headerButton svg {
  fill: var(--front-color);
  width: var(--icone-size);
}

.headerButton.right {
  right: var(--margin);
  left: auto;
}

/* FullSizeButton */
.fullSizeButton {
  display: flex;
  gap: 5px;
  justify-content: center;
  align-items: center;
  margin: var(--margin) var(--content-margin);
  padding: var(--margin);
  text-align: center;
  width: calc(100% - calc(2 * var(--content-margin)));
  max-width: 700px;

  color: var(--front-color);
  font-size: 12px;
  background-color: var(--link-color);
  font-weight: bold;
  border: none;
  border-radius: var(--radius);
}

.fullSizeButton svg {
  width: var(--icone-size);
  fill: var(--emphase-color);
  opacity: 0.4;
}

.greyButton {
  color: var(--emphase-color);
  background-color: var(--object-color);
}

dialog .fullSizeButton {
  margin: 0;
  width: 100%;
}

/* Explications */
.explications {
  font-size: 11px;
  font-style: italic;
  color: var(--emphase-color);
  border: 1px solid var(--object-color);
  border-radius: var(--radius);
  padding: var(--margin);
  background-color: var(--background-color);
  flex-grow: 2;
}

/* TITRES */

/* H2 */
h2 {
  margin: calc(2 * var(--content-margin)) var(--content-margin) var(--content-margin);
  font-size: 16px;
  font-weight: bold;

  display: flex;
  gap: 10px;
  align-items: center;

  min-width: var(--min-object-width);
  max-width: var(--max-object-width);
}

h2 a {
  order: 3;
}

h2 svg {
  fill: var(--link-color);
  width: var(--icone-size);
}

h2 .number {
  font-size: 12px;
  background-color: var(--number-color);
  padding: 3px 5px;
  border-radius: 10px;
}

h2::after {
  content: '';
  height: 1px;
  background-color: var(--emphase-color);
  flex-grow: 2;
  order: 2;
}

/* H3 */
h3 {
  color: var(--front-color);
  text-align: center;
}

/* CONTAINERS */
.content-container {
  margin: var(--content-margin);
  display: flex;
  flex-wrap: wrap;
  gap: var(--margin);
  justify-content: center;
  position: relative;
}

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

/* FORMULAIRES */
::backdrop {
  background-color: var(--background-color);
  opacity: 0.7;
}

dialog {
  margin: var(--content-margin);
  background-color: var(--object-color);
  border-radius: var(--radius);
  border: none;
  width: calc(100% - calc(2 * var(--content-margin)));
  box-sizing: border-box;
  padding: var(--content-margin);
  max-width: var(--max-object-width);
  min-width: var(--min-object-width);

  /* Move it 50% relative to container */
  position: relative;
  top: calc(50% - var(--content-margin));
  left: calc(50% - var(--content-margin));
  /* Move it back 50% relative to self */
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

button.close {
  background-color: transparent;
  border: none;
  padding: var(--margin);
}

button.close svg {
  width: var(--icone-size);
  fill: var(--emphase-color);
}

form p {
  background-color: var(--background-color);
  padding: var(--object-margin) 10px;
  gap: var(--object-margin);
  border-radius: var(--radius);
  display: flex;
  align-items: stretch;
}

form p label {
  font-weight: bold;
  color: var(--emphase-color);
  display: flex;
  align-items: center;
}

form p input {
  flex-grow: 2;
  padding: 5px;
  color: white;
  border: none;
  background-color: transparent;
  border-radius: 3px;

  font-family: 'Inter', sans-serif;
}

form p input[type=checkbox] {
  flex-grow: 0;
}

form p input[type=checkbox]:checked + label {
  color: var(--front-color);
}

form p input:focus {
  outline: none;
}

form p select {
  background-color: var(--background-color);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--front-color);

  width: 100%;
  border: 1px solid var(--object-color);
  padding: 5px;
  border-radius: 3px;
}

/* ACTUALITES */
.actualite {
  color: var(--front-color);
  text-decoration: none;
  flex-grow: 2;
  background-color: var(--object-color);
  border-radius: var(--radius);
  padding: var(--object-margin);
  display: flex;
  gap: var(--margin);
  align-items: stretch;

  max-width: calc(var(--max-object-width) / 2);
  min-width: var(--min-object-width);
  border: 1px solid transparent;
}

.actualite.selected {
  border: 1px solid dodgerblue;
  background-color: rgba(50,100,250,0.5);
}

.actualite .date {
  background-color: var(--date-color);
  border-radius: 3px;
  padding: var(--margin);

  display: flex;
  flex-grow: 0;
  align-items: center;

  text-align: center;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
}

.actualite.realisee .date {
  background-color: var(--success-color);
}

.actualite.terminee .date {
  background-color: var(--emphase-color);
}

.actualite .description {
  padding: 3px;
  display: flex;
  flex-grow: 2;
  flex-direction: column;
  gap: 5px;
}

.actualite .description .titre {
  font-weight: bold;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
}

.actualite .description .titre .restant {
  display: block;
  text-align: right;
  color: var(--emphase-color);
  font-weight: normal;
  font-style: italic;
  font-size: 12px;
}

.actualite .description .texte {
  color: var(--emphase-color);
}

.progression {
  width: 100%;
  height: 5px;
  background-color: var(--emphase-color);
  border-radius: var(--radius);
  overflow: hidden;
}

.progres {
  height: 100%;
  background-color: var(--front-color);
  border-radius: 3px;
}

.notification-image {
  width: 35px;
  min-height: 35px;
  flex-shrink: 0;
  border-radius: 3px;
  background-size: cover;
  background-position: center;
}

.description-notification {
  color: var(--emphase-color);
}

.description-notification a {
  text-decoration: none;
  color: var(--emphase-color);
}

.description-notification b {
  color: var(--front-color);
}

.actualite > .restant {
  color: var(--emphase-color);
  font-style: italic;
  text-align: center;
  min-width: 35px;

  display: flex;
  align-items: center;
}

/* CREATIONS */
.creation {
  overflow: hidden;
  background-color: var(--object-color);
  border-radius: var(--radius);
  flex-grow: 2;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  color: var(--front-color);
  text-decoration: none;

  min-width: 300px;
  width: 100%;
  max-width: 400px;
  flex-basis: 300px;
}

.creation .image {
  width: 100%;
  height: 100%;
  min-height: 200px;
  max-height: 300px;
  overflow: hidden;
  position: relative;
}

.creation .image .stats {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  gap: 10px;
}

.creation .image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 200px;
  max-height: 300px;
  object-fit: cover;
  transition: all 0.3s ease-in;
}

.creation .image .stats .stat {
  background-color: var(--object-color);
  color: var(--emphase-color);
  padding: 5px 10px;
  border-radius: 5px;

  display: flex;
  align-items: center;
  gap: 5px;
}

.creation .image .stats .stat svg {
  width: 15px;
  fill: var(--emphase-color);
  opacity: 0.5;
}

.creation .image .stats .stat.redStat svg {
  fill: var(--number-color);
  opacity: 1;
}

.creation:hover .image img {
  transform: scale(1.1);
}

.creation img.avatar-mini {
  --size: 40px;
  width: var(--size);
  height: var(--size);
  border-radius: 100%;
  object-fit: cover;
}

.creation .informations {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--object-margin);
  gap: var(--object-margin);
}

.creation .informations .description {
  flex-grow: 3;
}

.creation .informations .description .titre {
  font-weight: bold;
  font-size: 14px;
  display: flex;
  gap: var(--object-margin);
  align-items: center;
}

.creation .informations .description .titre svg {
  width: var(--icone-size);
  fill: var(--emphase-color);
}

.creation .informations .date {
  color: var(--emphase-color);
  font-style: italic;
}


/* ANIMATIONS */
@keyframes hide {
  from {
    opacity: 1;
    visibility: visible;
  }

  to {
    opacity: 0;
    visibility: hidden;
  }
}

.liste-forums {
  background-color: var(--object-color);
  font-weight: bold;

  display: flex;
  overflow-x : auto;
  position: relative;
}

.liste-forums .forum {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  text-decoration: none;
  padding: 10px;
  order: 2;
}

.liste-forums .forum.selected {
  background-color: var(--emphase-color);
  order: 1;
}

.liste-forums .forum .forum-titre {
  color: white;
  max-width: 80px;
  text-align: center;
  flex-grow: 2;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.liste-forums .forum .forum-titre svg {
  fill: var(--emphase-color);
  width: var(--icone-size);
  opacity: 0.5;
}

.liste-forums .forum .forum-image {
  --size: 60px;
  width: var(--size);
  height: var(--size);
  border-radius: 100%;

  background-size: cover;
  background-position: center;

  position: relative;
}

.liste-forums .forum .forum-image svg {
  position: absolute;
  top: 35px;
  left: 45px;
  width: 25px;
  fill: var(--front-color);
}

h2 .greyNumber {
  opacity: 0.5;
}

.sujet {
  --fillColor: var(--emphase-color);

  display: flex;
  width: 100%;
  text-decoration: none;
  align-items: center;
  gap: 10px;
  background-color: var(--object-color);
  border-radius: var(--radius);
  padding: 10px;
}

.sujet.new {
  --fillColor: var(--front-color);
}

.sujet .sujet-description {
  flex-grow: 2;
  color: var(--emphase-color);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sujet .sujet-description .title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: bold;
  color: var(--fillColor);
}

.sujet .sujet-description .title svg {
  width: var(--icone-size);
  fill: var(--emphase-color);
}

.sujet .last-message {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  color: var(--emphase-color);
}

.sujet .last-message .nb-messages {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: bold;
  color: var(--fillColor);
}

.sujet .last-message .nb-messages svg {
  width: var(--icone-size);
  fill: var(--emphase-color);
}

/* RICH TEXT EDITOR */
.text-editor {
  background-color: var(--object-color);
  margin: var(--content-margin);
  padding: var(--object-margin);
  border-radius: var(--radius);
}

.text-editor #text-editor {
  background-color: var(--background-color);
  padding: var(--object-margin);
  max-height: 400px;
  border-radius: 3px;
}

.text-editor .buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  padding-bottom: 5px;
}

.text-editor .text-button {
  display: block;
  background-color: var(--object-color);
  border: none;
  border-radius: 3px;
  padding: 3px;
}

.text-editor .text-button:hover {
  cursor: pointer;
  background-color: var(--background-color);
}

.text-editor .text-button svg {
  width: var(--icone-size);
  fill: var(--emphase-color);
}

.separator {
  display: block;
  margin: 0 5px;
  width: 2px;
  background-color: var(--background-color);
}

pre {
  background-color: var(--object-color);
  padding: 5px;
  border-radius: 3px;
  color: var(--emphase-color);
}

.object {
  background-color: var(--object-color);
  border-radius: var(--radius);
  overflow: hidden;
  width: 100%;
  max-width: var(--max-object-width);
  display: flex;
  flex-direction: column;
  color: var(--emphase-color);
  text-decoration: none;
}

.base-object, form.fullpage p {
  background-color: var(--object-color);
  border-radius: var(--radius);
  overflow: hidden;
}

.animation .image {
  position: relative;
  min-height: 125px;
  width: 100%;
  background-size: cover;
  background-position: center;
}

.animation .informations {
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.animation .informations .titre {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--front-color);
}

.animation .image .restant {
  position: absolute;
  top: 10px; right: 10px;
  background-color: var(--object-color);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  padding: 5px 5px 5px 0;
  gap: 2px;
  box-shadow: 0 0 2px var(--background-color);
}

.animation .image .restant svg {
  fill: #F6A854;
  width: var(--icone-size);
  margin-left: 7px;
}

a.fullSizeButton {
  width: 100%;
  margin: 0;
  text-decoration: none;
}

.selector {
  background-color: var(--object-color);
  border-radius: var(--radius);
  display: flex;
  padding: var(--object-margin);
  gap: 10px;
}

.selector .choice {
  padding: 10px;
  border-radius: 3px;
  color: var(--emphase-color);
}

.selector .choice.selected {
  background-color: var(--emphase-color);
  color: var(--front-color);
}

.kpi {
  position: relative;
  overflow: hidden;
  background-color: var(--object-color);
  color: var(--front-color);
  border-radius: var(--radius);
  padding: 10px 10px 10px 30px;
}

.kpi .background {
  position: absolute;
  width: 55px;
  top: -15px;
  left: -10px;
  fill: var(--emphase-color);
  opacity: 0.5;
  z-index: 1;
}

.kpi .number {
  font-weight: bold;
  font-size: 1.5rem;
  position: relative;
  z-index: 10;
}

.statList {
  display: none;
}

.statList.selected {
  display: flex;
}

.sujet-full-page {
  color: var(--front-color);
  background-color: var(--object-color);
  border-radius: var(--radius);
  overflow: hidden;
  width: 100%;
  max-width: var(--max-object-width);
}

.sujet-full-page .forum-image img {
  width: 100%;
  height: 125px;
  object-fit: cover;
  background-position: center;
}

.sujet-full-page .titre {
  font-size: 0.9rem;
  font-weight: bold;
  text-align: center;
  padding: 10px 0 5px 0;
}

.sujet-full-page .informations {
  color: var(--emphase-color);
  text-align: center;
}

.sujet-full-page .texte-commentaire {
  padding: 25px 20px;
}

.creation .texte-commentaire {
  padding: 10px 20px;
}

.menu-form {
  display: flex;
}

.menu-form label {
  display: none;
}

.menu-form textarea {
  max-height: 50px;
}

.menu-form p {
  margin: 10px;
  padding: 0;
}

.commentaire {
  width: 100%;
  max-width: var(--max-object-width);
  padding: 10px;
  box-sizing: border-box;
}

.commentaire .informations {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--emphase-color);
}

.commentaire .informations .auteur {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: bold;
}

.commentaire .informations .auteur .avatar {
  --size: 30px;
  width: var(--size);
  height: var(--size);
  border-radius: 100%;
  overflow: hidden;
}

.commentaire .informations .auteur .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.commentaire .informations svg {
  fill: var(--emphase-color);
  width: var(--icone-size);
}

.commentaire .informations .date {
  flex-grow: 2;
  text-align: center;
}

.commentaire .texte {
  padding: 10px;
  overflow-x: hidden;
}

.pagination ul {
  display: flex;
  list-style-type: none;
  gap: 10px;
  justify-content: center;
  padding: 0px;
}

.pagination ul li {
  color: var(--emphase-color);
  padding: 7px 13px;
}

.pagination a {
  text-decoration: none;
}

.pagination ul li.page-active {
  color: var(--front-color);
  background-color: var(--emphase-color);
}

.image-grand {
  margin-top: -100px;
  position: relative;
  display: flex;
  z-index: 20;
}

.image-grand img{
  max-width: 80vw;
  display: block;
  margin: 0 auto;
  box-shadow: 0 0 3px var(--background-color);
}

.miniature {
  --size: 100px;
  width: var(--size);
  height: var(--size);
  padding: 5px;
}

.miniature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.selector a {
  display: flex;
  align-items: center;
}

form.fullpage {
  width: 100%;
}

form.fullpage p {
  padding: 6px;
}

.errorlist {
  list-style-type: none;
  font-style: italic;
  color: var(--error-color);
  margin-bottom: 5px;
}

.errorlist + p {
  border: 1px solid var(--error-color);
  margin-top: 0;
}

form.fullpage label[for="id_image"] {
  display: none;
}

form.fullpage input[type=file] {
  color: var(--emphase-color);
}

form.fullpage input[type=text] {
  background-color: var(--background-color);
  ;
}

#id_dossier {
  display: flex;
  background-color: var(--object-color);
  overflow-x: auto;
  border-radius: 0 0 5px 5px;
  position: relative;
}

#id_dossier > div {
  flex-grow: 1;
  flex-shrink: 0;
}

#id_dossier svg {
  width: 100px;
}

#id_dossier label {
  display: flex;
  flex-direction:column-reverse;
  align-items: center;
  margin: 10px 5px;
}

#id_dossier input:checked + svg {
  stroke: var(--emphase-color);
  stroke-width: 20px;
}

#id_dossier input[type=radio] {
  display: none;
}

#id_dossier + p, #id_livre + p {
  display: none;
}

#id_livre {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  background-color: var(--object-color);
  padding-bottom: 10px;
  border-radius: 0 0 var(--radius) var(--radius);
}

.contentEditableInput {
  display: block;
  background-color: var(--emphase-color);
  width: 100%;
  min-height: 20px;
}

p:has(+ #id_dossier), p:has(+ #id_livre) {
  margin-bottom: 0;
  border-radius: 5px 5px 0 0;
}

.column {
  display: flex;
  align-items: baseline;
  gap: 5px;
  width: 100%;
}

.column input {
  flex-grow: 2;
}

#selected {
  display: flex;
  gap: 5px;
}

#selected div {
  background-color: var(--object-color);
  color: var(--front-color);
  border-radius: var(--radius);
  padding: 5px 10px;
  flex-shrink: 0;
}

#mp-form {
  position: relative;
}

#autocompletion {
  position: absolute;
  background-color: var(--object-color);
  border-radius: var(--radius);
  padding: 0;
  top: 20px;

  display: flex;
  flex-direction: column;
  flex-grow: 2;
  width: 100%;
  box-sizing: border-box;
  color: var(--front-color);
  list-style-type: none;
  overflow: hidden;
}

#autocompletion li {
  padding: 10px;
}

#autocompletion li:hover {
  background-color: var(--emphase-color);
}

#mp-form p:has(#id_titre:required), #mp-form p:has(#id_icone:required) {
  display: flex;
}

#mp-form p:has(#id_titre:optional), #mp-form p:has(#id_icone:optional) {
  display: none;
}

#iframe_previ {
  max-width: 100%;
}

p:has(label[for=id_css]), p:has(label[for=id_js]) {
  display: none;
}

p:has(textarea#id_html) label {
  display: none;
}

p:has(textarea#id_html){
  border-radius: var(--radius) var(--radius) 0 0;
  margin-bottom: 0;
}

p .onglets {
  position: absolute;
  top: -25px;
  right: 5px;

  display: flex;
  gap: 5px;
}

p .onglets .onglet {
  background-color: var(--object-color);
  padding: 7px 10px;
  border-radius: 5px 5px 0 0;
  font-family: 'Consolas', sans-serif;
  color: var(--emphase-color);
}

p .onglets .onglet.actif {
  color: var(--front-color);
}

#id_html, #id_css, #id_js {
  width: 100%;
  background-color: var(--background-color);
  border: medium;
  border-radius: 3px;
  overflow: hidden;
  padding: 5px 10px;
  color: var(--front-color);
}

#id_css, #id_js {
  display: none;
}

#iframe_previ {
  background-color: var(--object-color);
  border-radius: 0 0 var(--radius) var(--radius);
  border: 7px solid var(--object-color);
  box-sizing: border-box;
}

#iframe_code {
  max-width: 80%;
  margin: 0 auto;
  background-color: var(--object-color);
  border: none;
  box-shadow: 0 0 3px var(--background-color);
}

.chapitre {
  width: 80%;
  margin: 0 auto;
  padding: 15px 20px;
  box-sizing: border-box;
}

.livreChoice {
  width: 140px;
  height: 217px;
  background-size: cover;
  background-position: center;
  border-radius: 3px;
  filter: grayscale(100%) brightness(50%);
  flex-grow: 2;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}

.livreChoice .modalButton {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: var(--object-color);
  border-radius: var(--radius);
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.livreChoice .modalButton svg {
  fill: var(--emphase-color);
  width: 25px;
}

input[type=radio]:checked + .livreChoice {
  filter: grayscale(0%);
}

#id_livre label {
  width: 140px;
  overflow: hidden;
  display: block;
  height: 217px;
  position: relative;
}

.login {
  width: 100%;
  max-width: 500px;
  padding: 20px;
  margin-top: -100px;
}

a {
  color: var(--link-color);
  text-decoration: none;
  font-weight: bold;
}

.reglement {
  max-width: 80%;
  margin: 10px auto;
}

.reglement .titre {
  text-align: center;
  font-style: italic;
}

.reglement-content {
  text-align: justify;
  max-height: 150px;
  overflow: auto;
  margin: 10px 0;
}

.modalformButton {
  position: sticky;
  top: -10px;
  right: 10px;
  background-color: transparent;
  border: none;
  fill: var(--emphase-color);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 0px;
  z-index: 10;
}

.modalformButton svg {
  width: var(--icone-size) !important;
}

.modifierDossier {
  display: flex;
  gap: 10px;
  margin: 5px 0;
}

.modifierDossier .miniature {
  --size: 25px;
}

.modifierDossier .miniature img {
  border-radius: 3px;
}

.modifierDossier input[type=text] {
  flex-grow: 2;
  background-color: var(--background-color);
  color: var(--front-color);
  border: none;
  padding: 5px 15px;
  border-radius: var(--radius);
}

.modifierDossier button {
  flex-shrink: 0;
  background-color: transparent;
  border: none;
  fill: var(--error-color);
}

.modifierDossier button svg {
  width: var(--icone-size);
}

#inputDossierText {
  border: none;
  padding: 10px;
  color: var(--front-color);
  border-radius: var(--radius);
  flex-grow: 2;

}

.addDossierDiv {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.addDossierDiv > div {
  flex-basis: 30%;
}

.commande {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: var(--max-object-width);
  padding: 10px;
  color: var(--emphase-color);
  gap: 10px;
}

.commande .informations {
  flex-grow: 2;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.commande svg {
  color: var(--emphase-color);
  opacity: 0.5;
  width: var(--icone-size);
}

.commande .informations .titre {
  font-weight: bold;
  color: var(--front-color);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

.commande.terminee .titre {
  color: var(--emphase-color);
}

.commande .pseudo {
  font-weight: normal;
}

.commande .date {
  font-style: italic;
  flex-grow: 0;
  font-weight: normal;
}

.commande.terminee .date {
  background-color: var(--emphase-color);
  color: var(--background-color);
  border-radius: var(--radius);
  padding: 2px 5px;
}

.commande .stats {
  font-weight: bold;
  flex-grow: 0;
  flex-shrink: 0;
  text-align: right;
}

.commande .stats div {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  margin: 3px;
}

a.concours-thumbnail {
  width: 100%;
  max-width: 400px;
  color: var(--front-color);
  font-weight: normal;
}

.concours-thumbnail .image {
  background-size: cover;
  background-position: center;
  position: relative;
  min-height: 130px;
}

.concours-thumbnail .image .restant {
  position: absolute;
  right: 10px;
  top: 10px;

  background-color: var(--object-color);
  border-radius: var(--radius);
  padding: 5px 10px;

  display: flex;
  align-items: center;
  gap: 5px;
}

.concours-thumbnail .image .restant svg {
  fill: #F6A854;
  width: var(--icone-size);
}

.concours-thumbnail .informations {
  display: flex;
  flex-direction: column;
  flex-row: 2;

  margin: var(--object-margin);
  gap: 8px;
}

.concours-thumbnail .titre {
  font-weight: bold;
  font-size: 1.1rem;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}

.tags span {
  background-color: var(--background-color);
  padding: 3px 7px;
  border-radius: 3px;
  color: var(--emphase-color);
}

.concours-thumbnail .stats {
  display: flex;
  justify-content: space-around;
  color: var(--emphase-color);
  align-items: center;
}

.concours-thumbnail .stats > div {
  display: flex;
  align-items: center;
  gap: 5px;
}

.concours-thumbnail .stats svg {
  opacity: 0.5;
  fill: var(--emphase-color);
  width: var(--icone-size);
}

.concours-thumbnail .auteur {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin-left: 15px;
  position: relative; z-index: 10;
  width: 100%;
}

.concours-thumbnail .avatar img {
  --size: 67px;
  width: var(--size);
  height: var(--size);
  object-fit: cover;
  background-position: center;
  border-radius: 100%;
  margin-top: -25px;
  border: 4px solid var(--object-color);
}

.concours-thumbnail .auteur .titre {
  flex-grow: 2;
}

.concours-thumbnail .auteur .pseudo {
  color: var(--emphase-color);
}

.concoursFull {
  flex-grow: 2;
}

.concoursHeader {
  width: 100%;
}

.concoursFull .titre {
  display: flex;
  align-items: center;
  justify-content: center;
}

.concoursFull .titre svg {
  fill: var(--emphase-color);
  width: var(--icone-size);
}

.concoursHeader img {
  height: 100px;
  width: 100%;
  object-fit: cover;
  background-position: center;
}
.timeline {
  margin-top: 20px;
}

.timeline .schema {
  --color: var(--front-color);
  display: flex;
  margin: 20px;
}

.timeline .schema .schemaElement.termine {
  --color: var(--emphase-color);
}

.timeline .schema .schemaElement {
  color: var(--color);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: bold;
  font-style: italic;
  gap: 5px;
  position: relative;
  z-index: 10;
}

.timeline .schema .icone {
  padding: 8px 10px;
  background-color: var(--object-color);
  border-radius: 100%;
  border: 3px solid var(--color);
}

.timeline .schema .icone svg {
  width: var(--icone-size);
  fill: var(--color);
}

.timeline .schema .avancee {
  flex-grow: 2;
  height: 8px;
  background-color: var(--color);
  position: relative;
  top: 20px;
  margin-left: -3px;
  margin-right: -3px;
}

.timeline .schema .avancee .avancement {
  height: 100%;
  border-radius: 0 5px 5px 0;
  background-color: var(--emphase-color);
}

.titreTimelime {
  color: var(--front-color);
  font-style: italic;
  font-weight: bold;
  text-align: center;
}

.soustitreTimeline {
  color: var(--emphase-color);
  font-style: italic;
  font-weight: 300;
  text-align: center;
}

.concoursTitre {
  margin: 10px;
}

.concoursTitre .titre {
  text-align: center;
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--front-color);
}

.concoursTitre .auteur {
  text-align: center;
}

.concoursFull .description {
  margin: 15px;
  text-align: justify;
}

.commande svg {
  width: var(--icone-size);
  fill: var(--emphase-color);
  opacity: 0.7;
}

.richTextInput {
  padding: 0 !important;
  display: block !important;
}

.richTextInput label {
  display: none;
}

.richTextInput > div {
  flex-grow: 2;
  margin: 0;
}

.ql-toolbar.ql-snow, .ql-container.ql-snow {
  border: none !important;
  color: var(--emphase-color) !important;
}

.ql-toolbar.ql-snow svg {
  fill: var(--emphase-color) !important;
  stroke: var(--emphase-color) !important;
}

.ql-snow path, .ql-snow line, .ql-snow polygon {
  stroke: var(--emphase-color) !important;
}

.ql-editor.ql-blank::placeholder {
  color: var(--emphase-color) !important;
}

.ql-container.ql-snow {
  background-color: var(--background-color);
  margin: 5px;
  border-radius: 3px;
}

.ql-container.ql-snow p {
  background-color: transparent;
  border-radius: 0;
  overflow: auto;
}

.memberlist {
  display: inline-flex;
  gap: 10px;
  justify-content: flex-start;
  align-items: center;
}

.memberlist .avatar {
  --size: 30px;
  width: var(--size);
  height: var(--size);
  overflow: hidden;
  border-radius: 5px;
}

.memberlist .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.memberlist .pseudo {
  margin-right: 20px;
}

.listeNoire {
  display: flex;
  margin: 5px 0;
}

.listeNoire a {
  flex-grow: 2;
}

.listeNoire a.fullSizeButton {
  flex-grow: 0;
  width: auto !important;
}

#input-tag {
  width: 100%;
}

form .tags span.tag {
  background-color: var(--object-color);
  color: var(--front-color);
}