@charset "UTF-8";
body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
ul,
p {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

svg {
  height: 1rem;
  width: 1rem;
  fill: currentColor;
}

button {
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: none;
  text-decoration: none;
  box-sizing: border-box;
  font-size: initial;
  font-family: inherit;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.light-theme, .nav-theme {
  --primary-100: #6c8589;
  --primary-200: #557379;
  --primary-300: #3e626a;
  --primary-400: #28505a;
  --primary-500: #113e4a;
  --primary-600: #133b46;
  --primary-700: #143842;
  --primary-800: #16353e;
  --primary-900: #17323a;
  --secondary-100: #dbe8e4;
  --secondary-200: #d7e7e4;
  --secondary-300: #d2e6e3;
  --secondary-400: #cee4e3;
  --secondary-500: #cae3e2;
  --secondary-600: #b9d0cf;
  --secondary-700: #a8bcbb;
  --secondary-800: #97a9a8;
  --secondary-900: #869595;
  --accent-100: #e9d386;
  --accent-200: #e7ce75;
  --accent-300: #e6ca65;
  --accent-400: #e4c554;
  --accent-500: #e2c044;
  --accent-600: #cfb041;
  --accent-700: #bba03d;
  --accent-800: #a8903a;
  --accent-900: #958036;
  --warning-100: #e9a687;
  --warning-200: #e79a77;
  --warning-300: #e68e66;
  --warning-400: #e48156;
  --warning-500: #e27546;
  --warning-600: #cf6d42;
  --warning-700: #bb643f;
  --warning-800: #a85c3b;
  --warning-900: #955337;
  --danger-100: #e98a87;
  --danger-200: #e77977;
  --danger-300: #e66866;
  --danger-400: #e45756;
  --danger-500: #e24646;
  --danger-600: #cf4242;
  --danger-700: #bb3f3f;
  --danger-800: #a83b3b;
  --danger-900: #953737;
  --success-100: #76b570;
  --success-200: #61ab5c;
  --success-300: #4ca148;
  --success-400: #379734;
  --success-500: #228d20;
  --success-600: #228220;
  --success-700: #227720;
  --success-800: #226d20;
  --success-900: #226220;
  --light-100: #f6f3ed;
  --light-200: #f6f2eb;
  --light-300: #f5f2ea;
  --light-400: #f5f1e9;
  --light-500: #f4f0e8;
  --light-600: #ece6d8;
  --light-700: #e5dbc8;
  --light-800: #ddd1b8;
  --light-900: #d5c6a8;
  --dark-100: #4d4d4d;
  --dark-200: #424242;
  --dark-300: #373737;
  --dark-400: #2c2c2c;
  --dark-500: #212121;
  --dark-600: #1f1f1f;
  --dark-700: #1e1e1e;
  --dark-800: #1c1c1c;
  --dark-900: #1a1a1a;
}

@media (prefers-color-scheme: dark) {
  .nav-theme, html {
    --primary-100: #666a78;
    --primary-200: #515664;
    --primary-300: #3d4351;
    --primary-400: #282f3d;
    --primary-500: #131b29;
    --primary-600: #131a28;
    --primary-700: #121a27;
    --primary-800: #121926;
    --primary-900: #121825;
    --secondary-100: #afbbd3;
    --secondary-200: #a6b5ce;
    --secondary-300: #9dafc9;
    --secondary-400: #95a8c5;
    --secondary-500: #8CA2C0;
    --secondary-600: #8094b0;
    --secondary-700: #7386a0;
    --secondary-800: #677790;
    --secondary-900: #5a6980;
    --accent-100: #ddae60;
    --accent-200: #dca648;
    --accent-300: #db9d30;
    --accent-400: #da9518;
    --accent-500: #D98C00;
    --accent-600: #c58003;
    --accent-700: #b17406;
    --accent-800: #9d6809;
    --accent-900: #895c0c;
    --warning-100: #e2a08a;
    --warning-200: #e29579;
    --warning-300: #e28b68;
    --warning-400: #e28057;
    --warning-500: #e27546;
    --warning-600: #cd6b42;
    --warning-700: #b8623e;
    --warning-800: #a3583a;
    --warning-900: #8e4e36;
    --danger-100: #d87a80;
    --danger-200: #d6696e;
    --danger-300: #d5585b;
    --danger-400: #d34749;
    --danger-500: #d13636;
    --danger-600: #be3334;
    --danger-700: #aa2f31;
    --danger-800: #972c2f;
    --danger-900: #84282d;
    --success-100: #6faf73;
    --success-200: #5ca65e;
    --success-300: #499e49;
    --success-400: #359535;
    --success-500: #228d20;
    --success-600: #208120;
    --success-700: #1e7520;
    --success-800: #1d6920;
    --success-900: #1b5d20;
    --light-100: #e9e7f2;
    --light-200: #e7e6f1;
    --light-300: #e6e4f1;
    --light-400: #e4e3f0;
    --light-500: #e3e1ef;
    --light-600: #d5d2e7;
    --light-700: #c7c3df;
    --light-800: #b9b4d7;
    --light-900: #aba4cf;
    --dark-100: #303b5c;
    --dark-200: #28324d;
    --dark-300: #20283e;
    --dark-400: #181e2e;
    --dark-500: #10141f;
    --dark-600: #0f131d;
    --dark-700: #0e121c;
    --dark-800: #0e111a;
    --dark-900: #0d1019;
  }
}

.dark-theme {
  --primary-100: #666a78;
  --primary-200: #515664;
  --primary-300: #3d4351;
  --primary-400: #282f3d;
  --primary-500: #131b29;
  --primary-600: #131a28;
  --primary-700: #121a27;
  --primary-800: #121926;
  --primary-900: #121825;
  --secondary-100: #afbbd3;
  --secondary-200: #a6b5ce;
  --secondary-300: #9dafc9;
  --secondary-400: #95a8c5;
  --secondary-500: #8CA2C0;
  --secondary-600: #8094b0;
  --secondary-700: #7386a0;
  --secondary-800: #677790;
  --secondary-900: #5a6980;
  --accent-100: #ddae60;
  --accent-200: #dca648;
  --accent-300: #db9d30;
  --accent-400: #da9518;
  --accent-500: #D98C00;
  --accent-600: #c58003;
  --accent-700: #b17406;
  --accent-800: #9d6809;
  --accent-900: #895c0c;
  --warning-100: #e2a08a;
  --warning-200: #e29579;
  --warning-300: #e28b68;
  --warning-400: #e28057;
  --warning-500: #e27546;
  --warning-600: #cd6b42;
  --warning-700: #b8623e;
  --warning-800: #a3583a;
  --warning-900: #8e4e36;
  --danger-100: #d87a80;
  --danger-200: #d6696e;
  --danger-300: #d5585b;
  --danger-400: #d34749;
  --danger-500: #d13636;
  --danger-600: #be3334;
  --danger-700: #aa2f31;
  --danger-800: #972c2f;
  --danger-900: #84282d;
  --success-100: #6faf73;
  --success-200: #5ca65e;
  --success-300: #499e49;
  --success-400: #359535;
  --success-500: #228d20;
  --success-600: #208120;
  --success-700: #1e7520;
  --success-800: #1d6920;
  --success-900: #1b5d20;
  --light-100: #e9e7f2;
  --light-200: #e7e6f1;
  --light-300: #e6e4f1;
  --light-400: #e4e3f0;
  --light-500: #e3e1ef;
  --light-600: #d5d2e7;
  --light-700: #c7c3df;
  --light-800: #b9b4d7;
  --light-900: #aba4cf;
  --dark-100: #303b5c;
  --dark-200: #28324d;
  --dark-300: #20283e;
  --dark-400: #181e2e;
  --dark-500: #10141f;
  --dark-600: #0f131d;
  --dark-700: #0e121c;
  --dark-800: #0e111a;
  --dark-900: #0d1019;
}

.no-color-theme {
  --primary-100: #6c6b6a;
  --primary-200: #565554;
  --primary-300: #403f3f;
  --primary-400: #292929;
  --primary-500: #131313;
  --primary-600: #141414;
  --primary-700: #161616;
  --primary-800: #171717;
  --primary-900: #191919;
  --secondary-100: #efeeed;
  --secondary-200: #efeeed;
  --secondary-300: #eeeeed;
  --secondary-400: #eeeded;
  --secondary-500: #ededed;
  --secondary-600: #d9d9d9;
  --secondary-700: #c4c4c4;
  --secondary-800: #b0b0b0;
  --secondary-900: #9b9b9b;
  --accent-100: #dad9d8;
  --accent-200: #d6d5d5;
  --accent-300: #d2d2d1;
  --accent-400: #cecece;
  --accent-500: #cacaca;
  --accent-600: #b9b9b9;
  --accent-700: #a8a8a8;
  --accent-800: #979797;
  --accent-900: #868686;
  --warning-100: #c6c5c4;
  --warning-200: #bebebd;
  --warning-300: #b7b6b6;
  --warning-400: #afafaf;
  --warning-500: #a8a8a8;
  --warning-600: #9b9b9b;
  --warning-700: #8d8d8d;
  --warning-800: gray;
  --warning-900: #727272;
  --danger-100: #bab9b8;
  --danger-200: #b1b0af;
  --danger-300: #a8a7a7;
  --danger-400: #9e9e9e;
  --danger-500: #959595;
  --danger-600: #898989;
  --danger-700: #7e7e7e;
  --danger-800: #727272;
  --danger-900: #676767;
  --success-100: #efeeed;
  --success-200: #efeeed;
  --success-300: #eeeeed;
  --success-400: #eeeded;
  --success-500: #ededed;
  --success-600: #d9d9d9;
  --success-700: #c4c4c4;
  --success-800: #b0b0b0;
  --success-900: #9b9b9b;
  --light-100: #f9f9f9;
  --light-200: #f9f9f9;
  --light-300: #f9f9f9;
  --light-400: #f8f8f8;
  --light-500: #f8f8f8;
  --light-600: #ececec;
  --light-700: #dfdfdf;
  --light-800: lightgray;
  --light-900: #c6c6c6;
  --dark-100: #4d4d4d;
  --dark-200: #424242;
  --dark-300: #373737;
  --dark-400: #2c2c2c;
  --dark-500: #212121;
  --dark-600: #1f1f1f;
  --dark-700: #1e1e1e;
  --dark-800: #1c1c1c;
  --dark-900: #1a1a1a;
}

.protanopia-theme {
  --primary-100: #628589;
  --primary-200: #497379;
  --primary-300: #31626a;
  --primary-400: #18505a;
  --primary-500: #003e4a;
  --primary-600: #033b46;
  --primary-700: #073842;
  --primary-800: #0a353e;
  --primary-900: #0d323a;
  --secondary-100: #71e9e6;
  --secondary-200: #5be8e5;
  --secondary-300: #46e6e5;
  --secondary-400: #30e5e4;
  --secondary-500: #1ae4e4;
  --secondary-600: #1bd1d1;
  --secondary-700: #1bbdbd;
  --secondary-800: #1caaaa;
  --secondary-900: #1d9696;
  --accent-100: #6fe193;
  --accent-200: #59df85;
  --accent-300: #43dc77;
  --accent-400: #2dda69;
  --accent-500: #17d75b;
  --accent-600: #18c555;
  --accent-700: #19b34f;
  --accent-800: #1aa04a;
  --accent-900: #1b8e44;
  --warning-100: #ee91dd;
  --warning-200: #ed81db;
  --warning-300: #ec71d9;
  --warning-400: #eb61d7;
  --warning-500: #ea51d5;
  --warning-600: #d64cc3;
  --warning-700: #c247b1;
  --warning-800: #ae439f;
  --warning-900: #9a3e8d;
  --danger-100: #8c89b1;
  --danger-200: #7a78a8;
  --danger-300: #69669e;
  --danger-400: #575595;
  --danger-500: #46448c;
  --danger-600: #424181;
  --danger-700: #3f3d77;
  --danger-800: #3b3a6c;
  --danger-900: #373661;
  --success-100: #62b570;
  --success-200: #49ab5c;
  --success-300: #31a148;
  --success-400: #189734;
  --success-500: #008d20;
  --success-600: #038220;
  --success-700: #077720;
  --success-800: #0a6d20;
  --success-900: #0d6220;
  --light-100: #f6f3ed;
  --light-200: #f6f2eb;
  --light-300: #f5f2ea;
  --light-400: #f5f1e9;
  --light-500: #f4f0e8;
  --light-600: #ece6d8;
  --light-700: #e5dbc8;
  --light-800: #ddd1b8;
  --light-900: #d5c6a8;
  --dark-100: #4d4d4d;
  --dark-200: #424242;
  --dark-300: #373737;
  --dark-400: #2c2c2c;
  --dark-500: #212121;
  --dark-600: #1f1f1f;
  --dark-700: #1e1e1e;
  --dark-800: #1c1c1c;
  --dark-900: #1a1a1a;
}

.deuteranopia-theme {
  --primary-100: #628589;
  --primary-200: #497379;
  --primary-300: #31626a;
  --primary-400: #18505a;
  --primary-500: #003e4a;
  --primary-600: #033b46;
  --primary-700: #073842;
  --primary-800: #0a353e;
  --primary-900: #0d323a;
  --secondary-100: #c3dfe3;
  --secondary-200: #bbdce2;
  --secondary-300: #b3dae1;
  --secondary-400: #abd7e0;
  --secondary-500: #a3d4df;
  --secondary-600: #96c2cc;
  --secondary-700: #89b0b9;
  --secondary-800: #7c9ea6;
  --secondary-900: #6f8c93;
  --accent-100: #b7e173;
  --accent-200: #addf60;
  --accent-300: #a3dc4c;
  --accent-400: #99da39;
  --accent-500: #8fd725;
  --accent-600: #84c525;
  --accent-700: #79b324;
  --accent-800: #6ea024;
  --accent-900: #638e23;
  --warning-100: #bed97a;
  --warning-200: #b5d568;
  --warning-300: #acd256;
  --warning-400: #a3ce43;
  --warning-500: #9aca31;
  --warning-600: #8eb92f;
  --warning-700: #82a82e;
  --warning-800: #76972c;
  --warning-900: #6a862b;
  --danger-100: #fbf75d;
  --danger-200: #fcf846;
  --danger-300: #fdf92e;
  --danger-400: #fefa17;
  --danger-500: #fffb00;
  --danger-600: #e9e503;
  --danger-700: #d3cf07;
  --danger-800: #bcba0a;
  --danger-900: #a6a40d;
  --success-100: #62b570;
  --success-200: #49ab5c;
  --success-300: #31a148;
  --success-400: #189734;
  --success-500: #008d20;
  --success-600: #038220;
  --success-700: #077720;
  --success-800: #0a6d20;
  --success-900: #0d6220;
  --light-100: #f6f3ed;
  --light-200: #f6f2eb;
  --light-300: #f5f2ea;
  --light-400: #f5f1e9;
  --light-500: #f4f0e8;
  --light-600: #ece6d8;
  --light-700: #e5dbc8;
  --light-800: #ddd1b8;
  --light-900: #d5c6a8;
  --dark-100: #4d4d4d;
  --dark-200: #424242;
  --dark-300: #373737;
  --dark-400: #2c2c2c;
  --dark-500: #212121;
  --dark-600: #1f1f1f;
  --dark-700: #1e1e1e;
  --dark-800: #1c1c1c;
  --dark-900: #1a1a1a;
}
.deuteranopia-theme .button.danger svg {
  stroke: var(--primary-500);
  stroke-width: 50px;
}

.tritanopia-theme {
  --primary-100: #8680b2;
  --primary-200: #736ea9;
  --primary-300: #615ba0;
  --primary-400: #4e4997;
  --primary-500: #3c368e;
  --primary-600: #393483;
  --primary-700: #373278;
  --primary-800: #34306d;
  --primary-900: #312e62;
  --secondary-100: #dedce2;
  --secondary-200: #dad8e1;
  --secondary-300: #d6d5e0;
  --secondary-400: #d3d1df;
  --secondary-500: #cfcede;
  --secondary-600: #bebdcb;
  --secondary-700: #acabb8;
  --secondary-800: #9b9aa5;
  --secondary-900: #898992;
  --accent-100: #f1bdb9;
  --accent-200: #f1b5b1;
  --accent-300: #f0aca9;
  --accent-400: #f0a4a1;
  --accent-500: #ef9b99;
  --accent-600: #da8f8d;
  --accent-700: #c68381;
  --accent-800: #b17675;
  --accent-900: #9d6a69;
  --warning-100: #e9a687;
  --warning-200: #e79a77;
  --warning-300: #e68e66;
  --warning-400: #e48156;
  --warning-500: #e27546;
  --warning-600: #cf6d42;
  --warning-700: #bb643f;
  --warning-800: #a85c3b;
  --warning-900: #955337;
  --danger-100: #e98a87;
  --danger-200: #e77977;
  --danger-300: #e66866;
  --danger-400: #e45756;
  --danger-500: #e24646;
  --danger-600: #cf4242;
  --danger-700: #bb3f3f;
  --danger-800: #a83b3b;
  --danger-900: #953737;
  --success-100: #76b570;
  --success-200: #61ab5c;
  --success-300: #4ca148;
  --success-400: #379734;
  --success-500: #228d20;
  --success-600: #228220;
  --success-700: #227720;
  --success-800: #226d20;
  --success-900: #226220;
  --light-100: #f6f3ed;
  --light-200: #f6f2eb;
  --light-300: #f5f2ea;
  --light-400: #f5f1e9;
  --light-500: #f4f0e8;
  --light-600: #ece6d8;
  --light-700: #e5dbc8;
  --light-800: #ddd1b8;
  --light-900: #d5c6a8;
  --dark-100: #4d4d4d;
  --dark-200: #424242;
  --dark-300: #373737;
  --dark-400: #2c2c2c;
  --dark-500: #212121;
  --dark-600: #1f1f1f;
  --dark-700: #1e1e1e;
  --dark-800: #1c1c1c;
  --dark-900: #1a1a1a;
}

@font-face {
  font-family: "Lora";
  src: url("../fonts/Lora/Lora-VariableFont_wght-WhhfSB8.ttf");
}
@font-face {
  font-family: "Paquito";
  src: url("../fonts/Paquito/Fonts/Variable/Paquito-Variable-PlHoP4A.ttf");
}
@font-face {
  font-family: "OpenDyslexic";
  src: url("../fonts/OpenDyslexic3-Regular-hJ3-WXh.ttf");
}
@font-face {
  font-family: "Luciole";
  src: url("../fonts/Luciole/Luciole-Regular-yQTnbyl.ttf");
}
.container {
  container-type: normal;
}
.container-inline {
  container-type: inline-size;
}
.container-size {
  container-type: size;
}

.masked-search {
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  background-color: var(--primary-500);
  color: var(--light-600);
  width: 100%;
}
@media (min-width: 993px) {
  .masked-search {
    background-color: transparent;
  }
  .masked-search::before {
    position: absolute;
    background-color: var(--primary-500);
    z-index: -1;
    inset: 0;
    content: "";
    -webkit-mask: url("../images/rectangle_container_flat_reverse-3VjO2Vq.svg") no-repeat;
    mask: url("../images/rectangle_container_flat_reverse-3VjO2Vq.svg") no-repeat;
    -webkit-mask-size: calc(100% + 1px) calc(50% + 1px);
    mask-size: calc(100% + 1px) calc(50% + 1px);
    mask-position: top;
  }
  .masked-search::after {
    position: absolute;
    inset: 0;
    content: "";
    background-color: var(--primary-500);
    z-index: -1;
    -webkit-mask: url("../images/rectangle_container_flat-usBa_0s.svg") no-repeat;
    mask: url("../images/rectangle_container_flat-usBa_0s.svg") no-repeat;
    -webkit-mask-size: calc(100% + 2px) calc(50% + 1px);
    mask-size: calc(100% + 2px) calc(50% + 1px);
    mask-position: bottom;
  }
}
.masked-container {
  color: var(--light-600);
  position: relative;
  background-color: var(--primary-500);
}
@media (min-width: 993px) {
  .masked-container {
    -webkit-mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
    mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}
.masked-container.infos {
  background-color: var(--primary-400);
}
@media (max-width: 991px) {
  .masked-container.infos {
    -webkit-mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
    mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}
.masked-container.title {
  padding: 1.5rem 2rem;
  text-align: center;
  margin-bottom: 2rem;
}
.masked-container.light {
  color: var(--primary-500);
  background-color: var(--light-600);
}
.masked-aside {
  -webkit-mask: url("../images/rectangle_aside-NN2t1RH.svg") no-repeat;
  mask: url("../images/rectangle_aside-NN2t1RH.svg") no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  width: max-content;
  height: fit-content;
}
.masked-header {
  -webkit-mask: url("../images/rectangle_header-d6lItCL.svg") no-repeat;
  mask: url("../images/rectangle_header-d6lItCL.svg") no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.masked-top {
  -webkit-mask: url("../images/rectangle_top-B4KPE9e.svg") no-repeat;
  mask: url("../images/rectangle_top-B4KPE9e.svg") no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.masked-image {
  -webkit-mask: url("../images/rectangle_intersect-xmxhnfb.svg") no-repeat;
  mask: url("../images/rectangle_intersect-xmxhnfb.svg") no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.masked-login {
  color: var(--light-600);
  position: relative;
  background-image: url("../images/background-717KslV.webp");
  min-height: 700px;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (min-width: 993px) {
  .masked-login {
    -webkit-mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
    mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}
@media (max-width: 991px) {
  .masked-login .masked-container {
    background-color: color-mix(in srgb, var(--primary-500), transparent 20%);
  }
}

.container {
  color: var(--light-600);
  position: relative;
  background-color: var(--primary-500);
  border-radius: 0.25rem;
}
.container.infos {
  background-color: var(--primary-400);
}

.main {
  padding: 1rem;
}
@media (min-width: 993px) {
  .main {
    padding: 4rem;
  }
}

.reading-container {
  max-width: 80ch;
}

.section {
  margin: 1rem 0;
}
.section > header {
  margin-bottom: 0.75rem;
}

.comment-section {
  padding: 1rem 0;
}
@media (min-width: 993px) {
  .comment-section {
    padding: 2rem;
  }
}
.comment-section > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-inline: 1rem;
}

.lora * {
  font-family: "Lora", serif;
}

.paquito * {
  font-family: "Paquito", sans-serif;
}

.open-dyslexic * {
  font-family: "OpenDyslexic", sans-serif;
}

.luciole * {
  font-family: "Luciole", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
  word-break: break-word;
  hyphens: auto;
  text-transform: capitalize;
  font-size: 1rem;
  line-height: 1.25;
}

.h1 {
  font-size: 2.027rem;
  line-height: 1.1;
  font-weight: 700;
}

.h2 {
  font-size: 1.802rem;
  line-height: 1.2;
  font-weight: 700;
}

.h3 {
  font-size: 1.602rem;
  line-height: 1.3;
  font-weight: 500;
}

.h4 {
  font-size: 1.424rem;
  font-weight: 500;
}

.h5 {
  font-size: 1.266rem;
  font-weight: 500;
}

.small {
  font-size: 0.889rem;
}

.mini {
  font-size: 0.79rem;
}

.bold {
  font-weight: 700;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize--first-letter {
  display: inline-block;
}

.capitalize,
.capitalize--first-letter:first-letter {
  text-transform: capitalize;
}

.text-muted {
  color: color-mix(in srgb, var(--light-100), transparent 15%);
}
.text-wrap {
  overflow-wrap: anywhere;
  hyphens: auto;
}
.text-wrap-balanced {
  word-break: break-all;
  text-wrap: balance;
}
.text-nowrap {
  white-space: nowrap;
}
.text-justify {
  text-align: justify;
}
.text-center {
  text-align: center;
}
.text-truncated {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-bold {
  font-weight: 700;
}
.text-danger {
  color: var(--danger-500);
}

.desktop-text {
  display: none;
}
@media (min-width: 993px) {
  .desktop-text {
    display: inline;
  }
}

.line-clamp-1 {
  -webkit-line-clamp: 1;
  line-clamp: 1;
  white-space: nowrap;
}
.line-clamp-2 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.line-clamp-3 {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.line-clamp-4 {
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.line-clamp-5 {
  -webkit-line-clamp: 5;
  line-clamp: 5;
}

.avatar {
  border-radius: 99999px;
}

.radius-0 {
  border-radius: 0;
}
.radius-025 {
  border-radius: 0.25rem;
}
.radius-050 {
  border-radius: 0.5rem;
}
.radius-075 {
  border-radius: 0.75rem;
}
.radius-100 {
  border-radius: 1rem;
}
.radius-200 {
  border-radius: 2rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-7 {
  gap: 1.75rem;
}

.gap-8 {
  gap: 2rem;
}

.r-gap-1 {
  row-gap: 0.25rem;
}

.r-gap-2 {
  row-gap: 0.5rem;
}

.r-gap-3 {
  row-gap: 0.75rem;
}

.r-gap-4 {
  row-gap: 1rem;
}

.r-gap-5 {
  row-gap: 1.25rem;
}

.r-gap-6 {
  row-gap: 1.5rem;
}

.r-gap-7 {
  row-gap: 1.75rem;
}

.r-gap-8 {
  row-gap: 2rem;
}

.c-gap-1 {
  column-gap: 0.25rem;
}

.c-gap-2 {
  column-gap: 0.5rem;
}

.c-gap-3 {
  column-gap: 0.75rem;
}

.c-gap-4 {
  column-gap: 1rem;
}

.c-gap-5 {
  column-gap: 1.25rem;
}

.c-gap-6 {
  column-gap: 1.5rem;
}

.c-gap-7 {
  column-gap: 1.75rem;
}

.c-gap-8 {
  column-gap: 2rem;
}

.p-00 {
  padding: 0;
}

.p-025 {
  padding: 0.25rem;
}

.p-050 {
  padding: 0.5rem;
}

.p-075 {
  padding: 0.75rem;
}

.p-100 {
  padding: 1rem;
}

.p-200 {
  padding: 2rem;
}

.py-00 {
  padding-block: 0;
}

.py-025 {
  padding-block: 0.25rem;
}

.py-050 {
  padding-block: 0.5rem;
}

.py-075 {
  padding-block: 0.75rem;
}

.py-100 {
  padding-block: 1rem;
}

.px-00 {
  padding-inline: 0;
}

.px-025 {
  padding-inline: 0.25rem;
}

.px-050 {
  padding-inline: 0.5rem;
}

.px-075 {
  padding-inline: 0.75rem;
}

.px-100 {
  padding-inline: 1rem;
}

.pl-00 {
  padding-left: 0;
}

.pl-025 {
  padding-left: 0.25rem;
}

.pl-050 {
  padding-left: 0.5rem;
}

.pl-075 {
  padding-left: 0.75rem;
}

.pl-100 {
  padding-left: 1rem;
}

.pl-125 {
  padding-left: 1.25rem;
}

.pl-150 {
  padding-left: 1.5rem;
}

.pl-175 {
  padding-left: 1.75rem;
}

.pl-200 {
  padding-left: 2rem;
}

.pt-00 {
  padding-top: 0;
}

.pt-025 {
  padding-top: 0.25rem;
}

.pt-050 {
  padding-top: 0.5rem;
}

.pt-075 {
  padding-top: 0.75rem;
}

.pt-100 {
  padding-top: 1rem;
}

.pt-125 {
  padding-top: 1.25rem;
}

.pt-150 {
  padding-top: 1.5rem;
}

.pt-175 {
  padding-top: 1.75rem;
}

.pt-200 {
  padding-top: 2rem;
}

.px-400 {
  padding-inline: 4rem;
}

.m-auto {
  margin: auto;
}
.mx-auto {
  margin-inline: auto;
}
.my-auto {
  margin-block: auto;
}
.ml-auto {
  margin-left: auto;
}
.mr-auto {
  margin-right: auto;
}
.mt-auto {
  margin-top: auto;
}
.mb-auto {
  margin-bottom: auto;
}

.m-00 {
  margin: 0;
}

.m-025 {
  margin: 0.25rem;
}

.m-050 {
  margin: 0.5rem;
}

.m-075 {
  margin: 0.75rem;
}

.m-100 {
  margin: 1rem;
}

.my-00 {
  margin-block: 0;
}

.my-025 {
  margin-block: 0.25rem;
}

.my-050 {
  margin-block: 0.5rem;
}

.my-075 {
  margin-block: 0.75rem;
}

.my-100 {
  margin-block: 1rem;
}

.mx-00 {
  margin-inline: 0;
}

.mx-025 {
  margin-inline: 0.25rem;
}

.mx-050 {
  margin-inline: 0.5rem;
}

.mx-075 {
  margin-inline: 0.75rem;
}

.mx-100 {
  margin-inline: 1rem;
}

.ml-00 {
  margin-left: 0;
}

.ml-025 {
  margin-left: 0.25rem;
}

.ml-050 {
  margin-left: 0.5rem;
}

.ml-075 {
  margin-left: 0.75rem;
}

.ml-100 {
  margin-left: 1rem;
}

.ml-auto {
  margin-left: auto;
}

.mr-00 {
  margin-right: 0;
}

.mr-025 {
  margin-right: 0.25rem;
}

.mr-050 {
  margin-right: 0.5rem;
}

.mr-075 {
  margin-right: 0.75rem;
}

.mr-100 {
  margin-right: 1rem;
}

.mr-auto {
  margin-right: auto;
}

.mb-00 {
  margin-bottom: 0;
}

.mb-025 {
  margin-bottom: 0.25rem;
}

.mb-050 {
  margin-bottom: 0.5rem;
}

.mb-075 {
  margin-bottom: 0.75rem;
}

.mb-100 {
  margin-bottom: 1rem;
}

.mt-00 {
  margin-top: 0;
}

.mt-025 {
  margin-top: 0.25rem;
}

.mt-050 {
  margin-top: 0.5rem;
}

.mt-075 {
  margin-top: 0.75rem;
}

.mt-100 {
  margin-top: 1rem;
}

.mt-auto {
  margin-top: auto;
}

.flex {
  display: flex;
}
.flex-column {
  flex-direction: column;
}
.flex-inline {
  display: inline-flex;
}
.flex-row {
  flex-direction: row;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-justify-between {
  justify-content: space-between;
}
.flex-justify-around {
  justify-content: space-around;
}
.flex-justify-end {
  justify-content: flex-end;
}
.flex-justify-start {
  justify-content: flex-start;
}
.flex-justify-center {
  justify-content: center;
}
.flex-justify-normal {
  justify-content: normal;
}
.flex-align-start {
  align-items: flex-start;
}
.flex-align-end {
  align-items: flex-end;
}
.flex-align-center {
  align-items: center;
}
.flex-grow {
  flex-grow: 1;
}

.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-3 {
  order: 3;
}

.stretch-self {
  align-self: stretch;
  justify-self: stretch;
  width: unset !important;
}

.grid {
  display: grid;
}
.grid-col-1fr {
  grid-template-columns: 1fr;
}
.grid-col-2fr {
  grid-template-columns: repeat(2, 1fr);
}
.grid-col-3fr {
  grid-template-columns: repeat(3, 1fr);
}
.grid-row-1 {
  grid-row: 1;
}
.grid-row-2 {
  grid-row: 2;
}
.grid-row-3 {
  grid-row: 3;
}

.float-left {
  float: left;
}
.float-right {
  float: right;
}

@media (min-width: 993px) {
  .display-phone-only {
    display: none !important;
  }
}

.overflow-hidden {
  overflow: hidden;
}
.overflow-scroll {
  overflow: scroll;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.sticky {
  position: sticky;
}

.h-fit {
  height: fit-content;
}
.h-100 {
  height: 100%;
}

.w-fit {
  width: fit-content;
}
.w-100 {
  width: 100%;
}

.project-view-layout {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  grid-template-areas: "header" "content" "aside";
}
@media (min-width: 993px) {
  .project-view-layout {
    gap: 2rem;
  }
}
.project-view-layout > aside {
  overflow: hidden;
  grid-area: aside;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.project-view-layout .grid-layout-content {
  grid-area: content;
}
.project-view-layout > header {
  grid-area: header;
  display: grid;
  column-gap: 0.5rem;
  row-gap: 1rem;
  grid-template-columns: 125px 1fr;
  grid-template-areas: "thumbnail title" "thumbnail genres" "infos infos";
}
@media (min-width: 993px) {
  .project-view-layout > header {
    column-gap: 2rem;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "thumbnail title" "thumbnail infos" "thumbnail infos" "thumbnail genres";
  }
}
.project-view-layout > header picture {
  grid-area: thumbnail;
}
@media (max-width: 991px) {
  .project-view-layout > header picture img {
    height: auto;
    width: 125px;
  }
}
.project-view-layout > header .grid-layout-title {
  grid-area: title;
}
.project-view-layout > header .grid-layout-infos {
  grid-area: infos;
}
.project-view-layout > header .grid-layout-genres {
  grid-area: genres;
  flex-direction: column;
}
@media (min-width: 993px) {
  .project-view-layout > header .grid-layout-genres {
    align-items: center;
    flex-direction: row;
  }
}
.project-view-layout > header .grid-layout-actions {
  grid-area: actions;
  align-items: end;
}

.home-header {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
@media (min-width: 993px) {
  .home-header {
    flex-wrap: nowrap;
  }
}
.home-hero-wrapper {
  flex-grow: 1;
  flex-basis: 50vw;
  display: flex;
  flex-direction: column;
  width: 0;
}
.home-news-wrapper {
  max-width: 100vw;
}
@media (min-width: 993px) {
  .home-news-wrapper .splide__list {
    width: 650px;
  }
}
.home-news-wrapper .homepage-news {
  min-width: 100%;
}
.home-news-wrapper article {
  padding-block: 1rem 0.5rem;
}
.home-news-wrapper article header {
  padding-inline: 1rem;
}
.home-news-wrapper article section {
  padding-inline: 1rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
@media (min-width: 993px) {
  .home-news-wrapper article section {
    flex-wrap: nowrap;
  }
  .home-news-wrapper article section picture {
    flex-basis: 315px;
    flex-shrink: 0;
  }
}

.account-layout {
  display: grid;
  grid-template-columns: 1fr 0;
  grid-template-areas: "content aside";
}
@media (min-width: 993px) {
  .account-layout {
    gap: 2rem;
    grid-template-columns: 1fr auto;
    grid-template-areas: "content aside";
  }
}
.account-layout > aside {
  overflow: hidden;
  grid-area: aside;
}
.account-layout .grid-layout-content {
  grid-area: content;
}

.public-profile-layout {
  display: grid;
  gap: 1rem;
}
@media (min-width: 993px) {
  .public-profile-layout {
    grid-template-columns: 0.5fr 1.5fr;
  }
}
.public-profile-layout .splide {
  width: 100%;
}

.settings-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
}

.site__footer {
  width: 100%;
  color: var(--light-600);
  background-color: var(--primary-700);
  margin-top: auto;
}
@media (max-width: 991px) {
  .site__footer nav {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }
  .site__footer nav ul {
    flex-grow: 1;
  }
}

.page-header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: var(--primary-500);
  padding: 0.75rem 0;
  margin-bottom: 2rem;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
@media (min-width: 993px) {
  .page-header {
    -webkit-mask: url("../images/rectangle_header-d6lItCL.svg") no-repeat;
    mask: url("../images/rectangle_header-d6lItCL.svg") no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}

.nav ul {
  font-weight: 500;
  display: flex;
  gap: 1rem;
}
.nav ul li a {
  color: var(--light-500);
}
.nav-main {
  display: flex;
  justify-items: center;
  align-items: center;
  padding: 0 1rem;
  box-sizing: border-box;
  max-width: 1340px;
  width: 100%;
  column-gap: 3rem;
}
.nav-main form {
  display: flex;
}
.nav-main form input {
  flex-grow: 1;
  height: 3.5rem;
  padding: 0 1.5rem;
}
.nav-main form.main-search {
  display: none;
}
@media (min-width: 993px) {
  .nav-main form.main-search {
    flex-grow: 1;
    display: flex;
  }
}
.nav-main ul.nav-main-links {
  display: none;
}
@media (min-width: 993px) {
  .nav-main ul.nav-main-links {
    display: flex;
  }
}
.nav-main ul.nav-main-shortcuts {
  margin-left: auto;
}
.nav-main ul.nav-main-shortcuts li:not(.mobile) {
  display: none;
}
@media (min-width: 993px) {
  .nav-main ul.nav-main-shortcuts li:not(.mobile) {
    display: block;
  }
}

dialog.nav-main-mobile-menu-wrapper {
  margin: 0;
  padding-block: 2rem;
  width: 100%;
  background-color: var(--primary-300);
  height: 100dvh;
  justify-content: flex-start;
  transition: transform 0.3s ease-in-out;
}
dialog.nav-main-mobile-menu-wrapper form {
  margin-top: 1rem;
}
dialog.nav-main-mobile-menu-wrapper.modal--open {
  animation: modal-sliding-right 0.3s ease-in-out;
}
dialog.nav-main-mobile-menu-wrapper .modal-navigation {
  margin: 0;
}
dialog.nav-main-mobile-menu-wrapper .modal-content {
  overflow: unset;
}
dialog.nav-main-mobile-menu-wrapper .nav-main-mobile-menu {
  display: grid;
  margin-top: 1rem;
  gap: 0.5rem;
}
dialog.nav-main-mobile-menu-wrapper .nav-main-mobile-menu li {
  margin-left: 0;
}
@media (min-width: 769px) {
  dialog.nav-main-mobile-menu-wrapper .nav-main-mobile-menu li {
    width: 100%;
  }
}
dialog.nav-main-mobile-menu-wrapper .nav-main-mobile-menu li a {
  clip-path: unset;
  border-radius: unset;
  padding: 0.5rem 1rem;
  justify-content: flex-start;
  border-top: 3px solid var(--primary-500);
  background-color: color-mix(in srgb, var(--primary-500), transparent 55%);
  position: relative;
}
dialog.nav-main-mobile-menu-wrapper .nav-main-mobile-menu li a[aria-current=page] {
  border-color: var(--accent-500);
  background-color: var(--primary-500);
}
dialog.nav-main-mobile-menu-wrapper .nav-main-mobile-menu li a svg {
  background: var(--secondary-300);
  border-radius: 99px;
  padding: 0.25rem;
  height: 2rem;
  width: 2rem;
  fill: var(--primary-500);
}
dialog.nav-main-mobile-menu-wrapper .nav-main-mobile-menu li a img {
  border-radius: 99px;
  height: 2.5rem;
  width: 2.5rem;
}
dialog.nav-main-mobile-menu-wrapper .nav-main-mobile-menu li a::before {
  position: absolute;
  content: "";
  display: block;
  left: 0;
  top: 0;
  right: 100%;
  background-color: var(--accent-500);
  height: 3px;
}
dialog.nav-main-mobile-menu-wrapper .nav-main-mobile-menu li:last-child {
  margin-top: 3rem;
}
dialog.nav-main-mobile-menu-wrapper .nav-main-mobile-menu li:last-child a {
  border-top: 3px solid var(--warning-300);
}
@keyframes modal-sliding-right {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes modal-sliding-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.breadcrumb {
  margin: 0;
  display: flex;
  gap: 0.25rem;
}
.breadcrumb svg {
  height: 0.6rem;
  width: 0.6rem;
  stroke: currentColor;
  fill: none;
}

.pagination-list {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  gap: 0.25rem;
}
.pagination .nav-button {
  color: var(--dark-500);
  height: 1.75rem;
  width: 1.75rem;
}
.pagination .nav-button.current {
  background: transparent;
  color: var(--light-500);
  border: 1px solid var(--light-500);
}
.pagination-move {
  display: flex;
  align-items: center;
}
.pagination-move a {
  display: inline-flex;
}
.pagination-move span {
  line-height: 0;
}
.pagination-move svg {
  stroke: currentColor;
  height: 1.25rem;
  width: 1.25rem;
}

.result-card-full, .results-grid > ul.full .card,
ul.results-grid.full .card {
  display: grid;
  gap: 0.25rem 0.5rem;
  grid-template-columns: min-content 1fr;
  grid-template-areas: "title title" "thumbnail content" "infos infos" "genres genres";
}
.result-card-full .mini, .results-grid > ul.full .card .mini,
ul.results-grid.full .card .mini {
  display: none;
}
@media (min-width: 993px) {
  .result-card-full, .results-grid > ul.full .card,
  ul.results-grid.full .card {
    grid-template-areas: "thumbnail title" "thumbnail infos" "thumbnail genres" "thumbnail content";
  }
  .result-card-full .mini, .results-grid > ul.full .card .mini,
  ul.results-grid.full .card .mini {
    display: inline-flex;
  }
}
.result-card-full .card-thumbnail, .results-grid > ul.full .card .card-thumbnail,
ul.results-grid.full .card .card-thumbnail {
  grid-area: thumbnail;
}
.result-card-full .card-title, .results-grid > ul.full .card .card-title,
ul.results-grid.full .card .card-title {
  grid-area: title;
}
.result-card-full .card-title *, .results-grid > ul.full .card .card-title *,
ul.results-grid.full .card .card-title * {
  font-size: 1rem;
  font-weight: bold;
}
.result-card-full .card-content, .results-grid > ul.full .card .card-content,
ul.results-grid.full .card .card-content {
  font-size: 0.889rem;
  grid-area: content;
  margin: auto;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 993px) {
  .result-card-full .card-content, .results-grid > ul.full .card .card-content,
  ul.results-grid.full .card .card-content {
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }
}
.result-card-full .list-infos, .results-grid > ul.full .card .list-infos,
ul.results-grid.full .card .list-infos {
  grid-area: infos;
}
.result-card-full .list-genres, .results-grid > ul.full .card .list-genres,
ul.results-grid.full .card .list-genres {
  grid-area: genres;
  align-items: center;
}

.result-card-thumbnail, .results-grid > ul.thumbnail .card,
ul.results-grid.thumbnail .card {
  padding: 0.5rem;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: min-content 1fr;
  grid-template-areas: "title     title " "thumbnail infos " "genres    genres";
}
@media (min-width: 993px) {
  .result-card-thumbnail, .results-grid > ul.thumbnail .card,
  ul.results-grid.thumbnail .card {
    grid-template-areas: "title title" "thumbnail infos" "thumbnail content" "genres genres";
    grid-template-columns: 85px auto;
  }
}
.result-card-thumbnail .card-thumbnail, .results-grid > ul.thumbnail .card .card-thumbnail,
ul.results-grid.thumbnail .card .card-thumbnail {
  grid-area: thumbnail;
}
.result-card-thumbnail .card-thumbnail img, .results-grid > ul.thumbnail .card .card-thumbnail img,
ul.results-grid.thumbnail .card .card-thumbnail img {
  max-height: 62.5px;
}
@media (min-width: 993px) {
  .result-card-thumbnail .card-thumbnail img, .results-grid > ul.thumbnail .card .card-thumbnail img,
  ul.results-grid.thumbnail .card .card-thumbnail img {
    max-height: 125px;
  }
}
.result-card-thumbnail .card-title, .results-grid > ul.thumbnail .card .card-title,
ul.results-grid.thumbnail .card .card-title {
  grid-area: title;
  margin-bottom: auto;
}
.result-card-thumbnail .card-title *, .results-grid > ul.thumbnail .card .card-title *,
ul.results-grid.thumbnail .card .card-title * {
  font-size: 0.889rem;
  font-weight: bold;
}
@media (min-width: 993px) {
  .result-card-thumbnail .card-title *, .results-grid > ul.thumbnail .card .card-title *,
  ul.results-grid.thumbnail .card .card-title * {
    font-size: 1rem;
  }
}
.result-card-thumbnail .card-content, .results-grid > ul.thumbnail .card .card-content,
ul.results-grid.thumbnail .card .card-content {
  display: none;
  grid-area: content;
}
@media (min-width: 993px) {
  .result-card-thumbnail .card-content, .results-grid > ul.thumbnail .card .card-content,
  ul.results-grid.thumbnail .card .card-content {
    margin: auto;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.result-card-thumbnail *, .results-grid > ul.thumbnail .card *,
ul.results-grid.thumbnail .card * {
  font-size: 0.79rem;
}
.result-card-thumbnail .list-infos, .results-grid > ul.thumbnail .card .list-infos,
ul.results-grid.thumbnail .card .list-infos {
  grid-area: infos;
  gap: 0.25rem;
  flex-wrap: wrap;
  flex-direction: column;
}
@media (min-width: 993px) {
  .result-card-thumbnail .list-infos, .results-grid > ul.thumbnail .card .list-infos,
  ul.results-grid.thumbnail .card .list-infos {
    flex-direction: row;
  }
}
.result-card-thumbnail .list-infos li, .results-grid > ul.thumbnail .card .list-infos li,
ul.results-grid.thumbnail .card .list-infos li {
  text-align: initial;
  display: block;
  padding: 0;
  border: none;
}
.result-card-thumbnail .list-infos li:nth-child(3), .results-grid > ul.thumbnail .card .list-infos li:nth-child(3),
ul.results-grid.thumbnail .card .list-infos li:nth-child(3) {
  display: none;
}
.result-card-thumbnail .list-infos .card-project-rating--wrapper, .results-grid > ul.thumbnail .card .list-infos .card-project-rating--wrapper,
ul.results-grid.thumbnail .card .list-infos .card-project-rating--wrapper {
  color: var(--light-800);
}
.result-card-thumbnail .list-genres, .results-grid > ul.thumbnail .card .list-genres,
ul.results-grid.thumbnail .card .list-genres {
  grid-area: genres;
  gap: 0.25rem;
  flex-wrap: nowrap;
  overflow: hidden;
}
.result-card-thumbnail li > span:first-child, .results-grid > ul.thumbnail .card li > span:first-child,
ul.results-grid.thumbnail .card li > span:first-child {
  display: none;
}
@media (min-width: 993px) {
  .result-card-thumbnail li:not(:first-child), .results-grid > ul.thumbnail .card li:not(:first-child),
  ul.results-grid.thumbnail .card li:not(:first-child) {
    display: block;
  }
}

.results-grid > ul,
ul.results-grid {
  display: grid;
  gap: 0.5rem;
}
.results-grid > ul .tag,
ul.results-grid .tag {
  color: var(--light-500);
  background-color: var(--primary-200);
  line-height: 1;
}
.results-grid > ul.full,
ul.results-grid.full {
  gap: 1rem;
  grid-template-columns: 1fr;
  min-height: 0;
  min-width: 0;
}
@media (min-width: 993px) {
  .results-grid > ul.full,
  ul.results-grid.full {
    grid-template-columns: repeat(2, 1fr);
  }
}
.results-grid > ul.full > li,
ul.results-grid.full > li {
  overflow: hidden;
  min-width: 0;
}
.results-grid > ul.thumbnail,
ul.results-grid.thumbnail {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 7rem), 1fr));
}
@media (min-width: 993px) {
  .results-grid > ul.thumbnail,
  ul.results-grid.thumbnail {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.75rem), 1fr));
  }
}
.results-grid > ul.thumbnail .status,
ul.results-grid.thumbnail .status {
  display: none;
}
.spoiler {
  transition: border-inline-start 0.3s ease-in-out;
  border-inline-start: 2px solid var(--secondary-600);
  height: fit-content;
}
.spoiler[open] {
  border-inline-start: 2px solid var(--accent-500);
}
.spoiler[open] .spoiler-toggle-icon {
  transform: rotate(180deg);
}
.spoiler:hover {
  border-inline-start: 2px solid var(--accent-500);
}
.spoiler-toggle {
  flex-wrap: wrap;
  stroke: var(--light-500);
  color: var(--light-500);
  align-items: center;
  border: none;
  box-sizing: border-box;
  background-color: color-mix(in srgb, var(--dark-500), transparent 80%);
  cursor: pointer;
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0.75rem;
  -webkit-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), stroke 0.3s cubic-bezier(0.42, 0, 0.58, 1), margin 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), stroke 0.3s cubic-bezier(0.42, 0, 0.58, 1), margin 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), stroke 0.3s cubic-bezier(0.42, 0, 0.58, 1), margin 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  width: 100%;
}
.spoiler-toggle:hover .spoiler-toggle-icon,
.spoiler-toggle:hover .spoiler-toggle-title * {
  color: var(--accent-500);
}
.spoiler-toggle:hover .spoiler-toggle-icon {
  stroke: var(--accent-500);
}
.spoiler-toggle-title {
  order: 2;
}
.spoiler-toggle-title * {
  transition: color 0.3s ease;
}
.spoiler-toggle-icon {
  transition: transform 0.3s ease-in-out, stroke 0.3s ease, color 0.3s ease;
  order: 1;
}
.spoiler-toggle-actions {
  order: 3;
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
  padding-right: 1.5rem;
}
.spoiler-toggle-actions .button-link.light:hover {
  color: var(--accent-500);
}
.spoiler-content {
  border-top: 1px solid #557379;
  background-color: color-mix(in srgb, var(--dark-500), transparent 80%);
  padding: 0.5rem;
}
.spoiler-help {
  background: none;
  flex-wrap: nowrap;
  padding-block: 0.25rem;
  font-size: 0.889rem;
}

a {
  color: var(--light-700);
  stroke: currentColor;
  fill: currentColor;
  transition: color 0.3s ease, stroke 0.3s ease, fill 0.3s ease;
}
a:visited {
  color: var(--light-800);
}
a:hover {
  color: var(--light-400);
}
a.no-underline {
  text-decoration: none;
  color: unset;
}

h1 a,
h2 a,
h3 a {
  color: inherit;
  text-decoration: none;
}
h1 a:visited,
h2 a:visited,
h3 a:visited {
  color: unset;
}
h1 a:hover,
h2 a:hover,
h3 a:hover {
  color: var(--light-400);
}

.link-stretch::before {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
}
.link-icon {
  color: var(--light-500);
  font-weight: 600;
  text-decoration: none;
  stroke: currentColor;
}
.link-icon svg {
  margin-left: 0.5rem;
  transition: stroke 0.3s;
  vertical-align: middle;
}
.link-icon:visited {
  color: var(--light-500);
}
.link-icon:hover {
  color: var(--light-800);
}

.button {
  -webkit-mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
  mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  font-weight: 600;
  text-transform: capitalize;
  position: relative;
  -webkit-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), stroke 0.3s cubic-bezier(0.42, 0, 0.58, 1), fill 0.3s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), stroke 0.3s cubic-bezier(0.42, 0, 0.58, 1), fill 0.3s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), stroke 0.3s cubic-bezier(0.42, 0, 0.58, 1), fill 0.3s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
.button:disabled, .disabled.button, [disabled].button {
  cursor: not-allowed !important;
  filter: grayscale(80%);
}
.button:focus::before {
  content: "";
  position: absolute;
  outline: 2px solid var(--primary-400);
  width: calc(100% - 2rem);
  height: calc(100% - 1rem);
  border-radius: 0.25rem;
}
.button svg {
  width: 1.5rem;
  height: 1.5rem;
}

.button.light, .button.light:visited {
  color: var(--primary-500);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--light-500);
}
.button.light:not(:disabled):hover, .button.light:visited:not(:disabled):hover {
  color: var(--primary-200);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--light-500);
}
.button.light:disabled, .button.light:visited:disabled {
  cursor: not-allowed;
  background-color: var(--light-900);
}
.button.dark, .button.dark:visited {
  color: var(--light-500);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--primary-500);
}
.button.dark:not(:disabled):hover, .button.dark:visited:not(:disabled):hover {
  color: var(--light-700);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--primary-400);
}
.button.accent, .button.accent:visited {
  color: var(--primary-500);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--accent-500);
}
.button.accent:not(:disabled):hover, .button.accent:visited:not(:disabled):hover {
  color: var(--primary-900);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--accent-200);
}
.button.warning, .button.warning:visited {
  color: var(--light-500);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--warning-500);
}
.button.warning:not(:disabled):hover, .button.warning:visited:not(:disabled):hover {
  color: var(--light-500);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--warning-300);
}
.button.danger, .button.danger:visited {
  color: var(--light-500);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--danger-500);
}
.button.danger:not(:disabled):hover, .button.danger:visited:not(:disabled):hover {
  color: var(--light-500);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--danger-300);
}
.button-bulk, .button-bulk:visited {
  padding: 0.25rem 0.5rem;
  gap: 0.25rem;
  border-radius: 0.5rem;
}
.button-link, .button-link:visited {
  background: none;
  text-decoration: underline;
  font-size: 1rem;
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  cursor: pointer;
  color: currentColor;
  fill: currentColor;
  stroke: currentColor;
  -webkit-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), stroke 0.3s cubic-bezier(0.42, 0, 0.58, 1), fill 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), stroke 0.3s cubic-bezier(0.42, 0, 0.58, 1), fill 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), stroke 0.3s cubic-bezier(0.42, 0, 0.58, 1), fill 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
.button-link.danger, .button-link:visited.danger {
  color: var(--danger-500) !important;
}
.button-link.danger:hover, .button-link:visited.danger:hover {
  color: var(--danger-300) !important;
}
.button-link.warning:hover, .button-link:visited.warning:hover {
  color: var(--warning-300) !important;
}
.button.no-bg, .button.no-bg:visited {
  color: inherit;
  background: none;
}
.button.help {
  border: 2px solid var(--accent-500);
  border-radius: 999px;
  padding: 0;
  width: 1.5rem;
  height: 1.5rem;
}

.tag,
.pill {
  color: var(--primary-500);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--light-100);
  max-width: 100%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.25rem;
  padding: 0.25rem 0.75rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease, background-color 0.3s ease;
}
.tag:visited,
.pill:visited {
  color: var(--primary-500);
}
.tag:hover,
.pill:hover {
  color: var(--primary-200);
  background-color: var(--light-500);
}

.author-pill {
  color: var(--primary-500);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--accent-500);
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 1rem;
  padding-inline: 0.75rem;
  line-height: 1.5;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease, background-color 0.3s ease;
}
.author-pill:visited {
  color: var(--primary-500);
}
.author-pill:hover {
  color: var(--primary-200);
  background-color: var(--accent-300);
}

a.nav-button:hover,
button.nav-button:hover {
  background-color: var(--secondary-500);
}
a.nav-button:hover svg,
button.nav-button:hover svg {
  fill: var(--primary-200);
}

.nav-button {
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 2.2rem 1.9rem 2.3rem 2rem;
  background-color: var(--secondary-600);
  overflow: hidden;
  -webkit-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
.nav-button img {
  width: 3rem;
  height: 3rem;
}
.nav-button svg {
  fill: var(--primary-500);
  width: 1.75rem;
  height: 1.75rem;
  -webkit-transition: fill 0.3s cubic-bezier(0.42, 0, 0.58, 1), stroke 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: fill 0.3s cubic-bezier(0.42, 0, 0.58, 1), stroke 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: fill 0.3s cubic-bezier(0.42, 0, 0.58, 1), stroke 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
.nav-link {
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.25s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nav-link:hover {
  color: var(--light-800);
}

.btn-wax {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 2.2rem 1.9rem 2.3rem 2rem;
  background-color: var(--secondary-600);
  -webkit-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
.btn-wax:hover {
  background-color: var(--secondary-500);
}
.btn-wax:hover svg {
  fill: var(--primary-200);
}
.btn-wax svg {
  fill: var(--primary-500);
  width: 1.75rem;
  height: 1.75rem;
  -webkit-transition: fill 0.3s cubic-bezier(0.42, 0, 0.58, 1), stroke 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: fill 0.3s cubic-bezier(0.42, 0, 0.58, 1), stroke 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: fill 0.3s cubic-bezier(0.42, 0, 0.58, 1), stroke 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}

dialog,
.modal {
  overflow-x: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: none;
  padding-top: 2rem;
  padding-bottom: 0;
  background-color: transparent;
  max-width: 100vw;
  padding: 0;
}
dialog::backdrop,
.modal::backdrop {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background-color: color-mix(in srgb, var(--primary-500), transparent 50%);
  pointer-events: all;
}
dialog--open,
.modal--open {
  display: flex;
}
dialog-content,
.modal-content {
  scroll-behavior: smooth;
  width: 100%;
  max-width: 1340px;
  overflow: scroll;
}
dialog-content .masked-container,
.modal-content .masked-container {
  animation: fade-in 0.5s ease-in-out;
}
dialog-navigation,
.modal-navigation {
  width: 1340px;
  max-width: 100%;
  display: flex;
  gap: 0.5rem;
  margin: 0.5rem;
}
dialog-navigation .danger,
.modal-navigation .danger {
  margin-left: auto;
}
dialog .spinner-wrapper,
.modal .spinner-wrapper {
  position: absolute;
  display: flex;
  pointer-events: none;
  inset: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

#bod {
  --cog-width: min(20vw, 200px);
  --spoke-size: min(3vw, 33px);
  width: 0;
  height: calc((var(--cog-width) + var(--spoke-size) + 1rem) * 2);
  max-width: 100%;
  position: relative;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: clip;
  animation: fade-in 0.2s ease-in-out;
}

.cog {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 999px;
  width: var(--cog-width);
  height: var(--cog-width);
  z-index: 10;
  animation: spin 5s infinite linear;
  border: 2px solid var(--primary-900);
  top: calc(var(--spoke-size) * 2);
  right: calc(var(--cog-width) / 2);
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 15%, black 16%);
  mask-position: center;
  mask-clip: no-clip;
  mask-size: calc(var(--cog-width) + var(--spoke-size) + 5px);
}

.cog::before {
  position: absolute;
  content: "";
  background-color: var(--primary-300);
  border-radius: 999px;
  z-index: 10;
  inset: 0;
  display: block;
}

.cog + .cog {
  animation-delay: 0.19s;
  animation: spin2 5s infinite linear;
  top: calc(var(--spoke-size) * 1.4 + var(--cog-width));
  right: calc((var(--cog-width)) * 0.45 * -1 + var(--spoke-size) * 2);
}

.cog + .cog + .cog {
  animation: spin 5s infinite linear;
  top: calc(var(--spoke-size) * 2);
  right: calc(var(--cog-width) * 0.725 * -1);
}

.spoke {
  background-color: var(--primary-300);
  position: absolute;
  height: calc(var(--spoke-size) + var(--cog-width));
  width: calc(var(--spoke-size) + var(--cog-width) * 0.02);
  border-radius: 5px;
  z-index: 10;
  border-block: 2px solid var(--primary-900);
}

.spoke + .spoke {
  transform: rotateZ(45deg);
}

.spoke + .spoke + .spoke {
  transform: rotateZ(-45deg);
}

.spoke + .spoke + .spoke + .spoke {
  transform: rotateZ(90deg);
}

.hole {
  position: absolute;
  width: 85%;
  height: auto;
  aspect-ratio: 1;
  background-color: var(--secondary-800);
  border-radius: 999px;
  z-index: 3000;
  display: flex;
}

.hole::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 75%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 999px;
  margin: auto;
  border: 2px solid var(--secondary-700);
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
.list-infos {
  display: flex;
  justify-content: space-between;
}
.list-infos > li, .list-infos > .list-item {
  flex: auto;
  padding: 0 0.75rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
}
.list-infos > li:not(:last-child), .list-infos > .list-item:not(:last-child) {
  border-right: solid color-mix(in srgb, var(--light-500), transparent 80%) 1px;
}
.list-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  list-style: none;
}
.list-genres .tag {
  padding: 0.25rem 0.5rem;
}
.list-pills, .list-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.list-pills > li {
  display: flex;
}
.list-pills > li,
.list-pills .pill {
  flex-grow: 1;
}

.tree-view .depth-3, .tree-view .depth-2 {
  max-height: 0;
  transition: max-height 0.5s ease;
  overflow: hidden;
}
.tree-view .active.depth-3, .tree-view .active.depth-2 {
  max-height: 50vh;
  overflow-y: scroll;
}

.tree-view {
  display: grid;
  gap: 0.75rem;
}
.tree-view svg {
  width: 1.25rem;
  height: 1.25rem;
}
.tree-view.depth-1 > li > .tree-view-item {
  -webkit-mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
  mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
  -webkit-mask-size: 100% 110%;
  mask-size: 100% 110%;
  background-color: var(--primary-400);
  mask-position: top;
}
.tree-view.depth-1 > li:nth-child(odd) > .tree-view-item {
  background-color: var(--primary-300);
}
.tree-view .depth-2 {
  display: grid;
  gap: 0.5rem;
}
.tree-view .depth-2 > li {
  color: var(--dark-500);
}
.tree-view .depth-2 > li > .tree-view-item {
  -webkit-mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
  mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
  -webkit-mask-size: 100% 110%;
  mask-size: 100% 110%;
  background-color: var(--secondary-700);
  mask-position: center;
}
.tree-view .depth-2 > li:nth-child(odd) > .tree-view-item {
  background-color: var(--secondary-800);
}
.tree-view .depth-3 {
  color: var(--light-500);
  -webkit-mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
  mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
  -webkit-mask-size: 100% 110%;
  mask-size: 100% 110%;
  mask-position: bottom;
}
.tree-view .depth-3 > li > .tree-view-item {
  background-color: var(--primary-200);
}
.tree-view .depth-3 > li:nth-child(odd) > .tree-view-item {
  background-color: var(--primary-100);
}
.tree-view-item {
  display: grid;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
}
@media (min-width: 993px) {
  .tree-view-item {
    gap: 1rem;
  }
}
.tree-view-item > * {
  margin-block: auto;
}
.tree-view-item.diegesis {
  grid-template-columns: 1.25rem 1fr 3.5rem auto;
}
@media (min-width: 993px) {
  .tree-view-item.diegesis {
    grid-template-columns: auto 12rem 4rem 4rem 1fr auto;
  }
}
.tree-view-item.book {
  grid-template-columns: 1.25rem 1fr 3.5rem auto;
}
@media (min-width: 993px) {
  .tree-view-item.book {
    grid-template-columns: auto 12rem 4rem 4rem 1fr auto auto;
  }
}
.tree-view-item.saga {
  grid-template-columns: 1fr auto auto;
}
.tree-view-item > div {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.tree-view ul {
  list-style: none;
}
.tree-view ul:not(.list-genres) {
  margin-left: 0.25rem;
}
@media (min-width: 993px) {
  .tree-view ul:not(.list-genres) {
    margin-left: 1rem;
  }
}
.tree-view button.active svg {
  transform: rotate(180deg);
}
@media (max-width: 991px) {
  .tree-view .desktop {
    display: none;
  }
}

.card {
  padding: 1rem;
  background-color: var(--primary-400);
  color: var(--light-500);
  -webkit-mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
  mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  position: relative;
}
.card.card-hover {
  transition: background-color 0.3s ease;
}
.card.card-hover:hover {
  background-color: var(--primary-300);
}
.card-title {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}
.card-title h2 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-title a {
  width: 100%;
  display: block;
}
.card-link::after {
  position: absolute;
  content: "";
  inset: 0;
  display: block;
  z-index: 5;
}
.card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  max-width: 100%;
}
.card-infos {
  font-size: 0.79rem;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.card-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.card-project-news {
  background-color: transparent;
  color: var(--light-500);
  position: relative;
  width: fit-content;
}
.card-project-news .card-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background-color: color-mix(in srgb, var(--primary-500), transparent 55%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color 0.3s ease;
}
.card-project-news .spoiler-content {
  opacity: 0;
  height: 100%;
  max-height: 0;
  transition: opacity 0.3s ease, max-height 0.7s ease;
}
.card-project-news:hover .spoiler-content {
  opacity: 1;
  max-height: 200px;
}
.card-project-news:hover .card-content {
  background-color: var(--primary-400);
}

.alert {
  --animation-duration: 300ms;
  position: fixed;
  top: 1rem;
  right: 0;
  padding-block: 0.5rem;
  padding-inline: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fade-in var(--animation-duration) ease-in-out;
  z-index: 1000;
}
@media (min-width: 993px) {
  .alert {
    -webkit-mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
    mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
    -webkit-mask-size: 105% 100%;
    mask-size: 105% 100%;
  }
}
.alert.fade-out {
  animation: fade-out var(--animation-duration) ease-in-out;
}
.alert-success {
  background-color: var(--success-700);
  color: var(--light-300);
}
.alert-error {
  background-color: var(--danger-500);
  color: var(--light-500);
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.drawer {
  grid-column: 2;
  grid-row-start: 1;
  grid-row-end: 10;
  transform: scaleX(0);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto 1fr;
  -webkit-transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
@media (min-width: 993px) {
  .drawer {
    transform: unset;
  }
}
.drawer.active {
  transform: scaleX(1);
}
.drawer-content {
  max-width: 530px;
  width: 100vw;
  height: 100dvh;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 100dvh;
}
.drawer-control {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background-color: var(--light-500);
  height: fit-content;
}
.drawer-content, .drawer-control {
  position: sticky;
  top: 0;
}

.home-news-wrapper .splide__pagination {
  position: initial;
  padding-bottom: 1rem;
}
.home-news-wrapper .splide__arrows {
  bottom: 1rem;
  left: 0;
  padding: 0 1em;
  position: absolute;
  right: 0;
  display: flex;
  justify-content: space-between;
}
.home-news-wrapper .splide__arrow {
  position: initial;
  width: 4rem;
  height: 1.75em;
  border-radius: 0.25rem;
  opacity: 1;
  color: #113e4a;
  background-color: #f4f0e8;
  transform: none;
}
.home-news-wrapper .splide__arrow svg {
  fill: currentColor;
}

.blockquote {
  background-color: var(--primary-500);
  padding: 0.5rem;
  border-radius: 0.25rem;
  margin: 0;
  color: var(--light-900);
  font-style: italic;
  font-size: 0.889rem;
}

blockquote {
  margin-inline: 0;
}

.tabs-title {
  font-size: 1.266rem;
  text-transform: capitalize;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  min-height: 2.5rem;
  overflow: hidden;
}
.tabs-title li {
  position: relative;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: fit-content;
}
@media (min-width: 993px) {
  .tabs-title li {
    flex-basis: var(--tab-element-width, fit-content);
  }
  .tabs-title li:not(:first-child) {
    margin-left: var(--margin-offset, 0);
  }
}
@media (min-width: 993px) {
  .tabs-title li:first-child a:not(.button) {
    justify-content: flex-start;
    padding-left: 1.5rem;
  }
}
.tabs-title li a:not(.button) {
  text-decoration: none;
  background-color: color-mix(in srgb, var(--secondary-500) 20%, var(--dark-400));
  padding: 1rem 0;
  width: 100%;
}
.tabs-title li a:not(.button) svg {
  width: 1.5rem;
  height: 1.5rem;
}
@media (min-width: 993px) {
  .tabs-title li a:not(.button) {
    display: inline-flex;
    justify-content: center;
    gap: 0.25rem;
    align-items: center;
    clip-path: url(#tabsClip);
    border-top-left-radius: 20px;
  }
}
.tabs-title li a:not(.button)::before {
  content: "";
  position: absolute;
  display: block;
  inset: 0;
}
.tabs-title li:nth-child(4n+4) a:not(.button) {
  background-color: color-mix(in srgb, var(--secondary-500) 20%, var(--dark-100));
}
.tabs-title li:nth-child(4n+3) a:not(.button) {
  background-color: color-mix(in srgb, var(--secondary-500) 20%, var(--dark-200));
}
.tabs-title li:nth-child(4n+2) a:not(.button) {
  background-color: color-mix(in srgb, var(--secondary-500) 20%, var(--dark-300));
}
.tabs-title li:has(a[aria-selected=true]) {
  z-index: 100 !important;
}
.tabs-title li:has(a[aria-selected=true]) a {
  justify-content: flex-start;
  background-color: var(--primary-500);
  color: var(--accent-500);
  padding: 1.5rem;
}
.tabs-panels {
  -webkit-mask: url("../images/rectangle_container_flat-usBa_0s.svg") no-repeat;
  mask: url("../images/rectangle_container_flat-usBa_0s.svg") no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-color: var(--primary-500);
  color: var(--light-500);
  padding: 2rem 1rem;
  max-width: 100vw;
  box-sizing: border-box;
}
@media (max-width: 991px) {
  .tabs-panels {
    mask-size: 102% 100%;
    mask-position-x: center;
  }
}
@media (min-width: 993px) {
  .tabs-panels {
    padding: 2rem 3rem;
  }
}

form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  z-index: 1;
}
form label {
  margin-bottom: 0.25rem;
  display: inline-block;
}
form label:first-letter {
  text-transform: capitalize;
}
form label.required::after {
  content: "*";
  color: var(--warning-500);
}
form .form-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
form .form-group > .form-row {
  flex-basis: 15.625rem;
  flex-grow: 1;
  width: 0;
}
form .form-group > .form-row > label {
  width: 100%;
}
form .form-row select,
form .form-row .select {
  font-family: var(--font-family, "");
  width: 100%;
}
form .error {
  display: inline-flex;
  background-color: var(--danger-800);
  color: var(--light-500);
  font-size: 0.889rem;
  padding-left: 0.25rem;
  border-radius: 0.25rem;
  flex-grow: 1;
}

.ts-control, .ts-wrapper.single .ts-control, .ts-wrapper.single.input-active .ts-control, textarea, input {
  -webkit-mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
  mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-color: var(--secondary-200);
  background-image: none;
  border: none;
  box-sizing: border-box;
}
@media (min-width: 993px) {
  .ts-control, .ts-wrapper.single .ts-control, .ts-wrapper.single.input-active .ts-control, textarea, input {
    font-size: 1rem;
  }
}

input[type=text], input[type=password], input[type=search], input[type=email] {
  font-family: var(--font-family, "");
  width: 100%;
  padding: 0.5rem 0.75rem;
}

.input-group {
  -webkit-mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
  mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  display: flex;
  align-items: stretch;
}
.input-group input {
  -webkit-mask: unset;
  mask: unset;
}
.input-group button {
  mask: none;
  background-color: var(--secondary-200);
  padding: 0 0.75rem;
}
.input-group button svg {
  transition: fill 0.3s;
  height: 2rem;
  width: 2rem;
}
.input-group button:hover svg {
  fill: var(--primary-200);
}
.input-group .input-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0.75rem;
  background-color: var(--secondary-200);
  color: var(--dark-400);
}

.password-strength-label {
  border-radius: 0.25rem;
  padding-inline: 0.25rem;
}
.password-strength[data-strength="0"] .password-strength-label {
  background-color: var(--danger-800);
  color: var(--light-500);
}
.password-strength[data-strength="0"] .password-strength-bar {
  color: var(--danger-800);
}
.password-strength[data-strength="0"] .password-strength-bar::-moz-progress-bar {
  background: var(--danger-800);
}
.password-strength[data-strength="0"] .password-strength-bar::-webkit-progress-bar {
  background: var(--secondary-200);
}
.password-strength[data-strength="0"] .password-strength-bar::-webkit-progress-value {
  background: var(--danger-800);
}
.password-strength[data-strength="1"] .password-strength-label {
  background-color: var(--danger-500);
  color: var(--light-500);
}
.password-strength[data-strength="1"] .password-strength-bar {
  color: var(--danger-500);
}
.password-strength[data-strength="1"] .password-strength-bar::-moz-progress-bar {
  background: var(--danger-500);
}
.password-strength[data-strength="1"] .password-strength-bar::-webkit-progress-bar {
  background: var(--secondary-200);
}
.password-strength[data-strength="1"] .password-strength-bar::-webkit-progress-value {
  background: var(--danger-500);
}
.password-strength[data-strength="2"] .password-strength-label {
  background-color: var(--warning-500);
  color: var(--light-500);
}
.password-strength[data-strength="2"] .password-strength-bar {
  color: var(--warning-500);
}
.password-strength[data-strength="2"] .password-strength-bar::-moz-progress-bar {
  background: var(--warning-500);
}
.password-strength[data-strength="2"] .password-strength-bar::-webkit-progress-bar {
  background: var(--secondary-200);
}
.password-strength[data-strength="2"] .password-strength-bar::-webkit-progress-value {
  background: var(--warning-500);
}
.password-strength[data-strength="3"] .password-strength-label {
  background-color: var(--success-500);
  color: var(--light-500);
}
.password-strength[data-strength="3"] .password-strength-bar {
  color: var(--success-500);
}
.password-strength[data-strength="3"] .password-strength-bar::-moz-progress-bar {
  background: var(--success-500);
}
.password-strength[data-strength="3"] .password-strength-bar::-webkit-progress-bar {
  background: var(--secondary-200);
}
.password-strength[data-strength="3"] .password-strength-bar::-webkit-progress-value {
  background: var(--success-500);
}
.password-strength[data-strength="4"] .password-strength-label {
  background-color: var(--success-300);
  color: var(--light-500);
}
.password-strength[data-strength="4"] .password-strength-bar {
  color: var(--success-300);
}
.password-strength[data-strength="4"] .password-strength-bar::-moz-progress-bar {
  background: var(--success-300);
}
.password-strength[data-strength="4"] .password-strength-bar::-webkit-progress-bar {
  background: var(--secondary-200);
}
.password-strength[data-strength="4"] .password-strength-bar::-webkit-progress-value {
  background: var(--success-300);
}
.password-strength .password-strength-bar {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  box-sizing: border-box;
  height: 0.5rem;
  border: none;
}

textarea {
  min-height: 130px;
  padding: 1rem;
  width: 100%;
}

.flex-column textarea {
  flex-grow: 1;
}

select,
.select {
  height: 2.25rem;
  padding: 0.5rem 1rem;
  -webkit-mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
  mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-color: var(--secondary-200);
  border: none;
}

.check-group {
  background: #fff;
  max-width: 13rem;
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 10, 0.2);
  counter-reset: total;
  counter-reset: checked;
}
.check-group > * + * {
  margin-top: 0.75rem;
}
.check-group .checkbox {
  counter-increment: total;
}
.check-group input[type=checkbox]:checked {
  counter-increment: checked;
}
.check-group__result {
  font-weight: bold;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.check-group__result:after {
  content: counter(checked) " / " counter(total);
  padding-left: 1ch;
}

.help-text {
  color: var(--accent-500);
}

.checkbox {
  cursor: pointer;
  display: flex;
  align-items: end;
  gap: 0.5rem;
}
.checkbox__input {
  display: none;
}
.checkbox__input:checked + .checkbox__icon .tick {
  stroke-dashoffset: 0;
}
.checkbox__icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  overflow: visible;
}
.checkbox__icon rect {
  fill: color-mix(in srgb, var(--secondary-200), transparent 90%);
  stroke: var(--secondary-600);
  stroke-width: 3;
}
.checkbox__icon .tick {
  stroke-dasharray: 20px;
  stroke-dashoffset: 20px;
  transition: stroke-dashoffset 0.2s ease-out;
  stroke: var(--accent-400);
  fill: none;
  stroke-width: 4;
}
.checkbox.radio circle {
  fill: color-mix(in srgb, var(--secondary-200), transparent 90%);
  stroke: var(--secondary-600);
  stroke-width: 3;
}

.radio-form-group {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-grow: 1;
  flex-basis: 0;
  gap: 0.5rem;
}
@media (min-width: 769px) {
  .radio-form-group {
    flex-direction: column;
    flex-grow: 0;
  }
}
.radio-form-group > div {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.radio-form-group > div .infos {
  flex-grow: 1;
}

.radio-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-checkbox-card {
  align-items: center;
  padding: 1rem;
  background-color: var(--primary-400);
  mask-size: 100% 100%;
  cursor: pointer;
  border-radius: 15px;
  display: flex;
  gap: 1rem;
  -webkit-transition: background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
.form-checkbox-card--wrapper {
  display: grid;
  gap: 0.5rem;
}
@media (min-width: 993px) {
  .form-checkbox-card--wrapper {
    grid-template-columns: 1fr 1fr;
  }
}
.form-checkbox-card span {
  color: var(--light-900);
  -webkit-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
.form-checkbox-card:hover, .form-checkbox-card:focus {
  outline: 1px solid var(--accent-500);
  background-color: var(--primary-300);
}
.form-checkbox-card input:checked + svg + span {
  color: var(--light-500);
}

.image-upload {
  position: relative;
  min-width: 200px;
  max-width: 400px;
  justify-content: center;
  align-items: center;
  display: flex;
  gap: 0.5rem;
  height: 100%;
}
.image-upload picture {
  margin: auto;
}
.image-upload-wrapper {
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}
@media (min-width: 769px) {
  .image-upload-wrapper .spoiler-help {
    min-width: 30ch;
  }
}
@media (min-width: 769px) {
  .image-upload-wrapper .help-text {
    max-width: 30ch;
  }
}
@media (min-width: 577px) {
  .image-upload-wrapper {
    flex-direction: row;
  }
}
@media (min-width: 769px) {
  .image-upload-wrapper {
    flex-direction: column;
  }
}
.image-upload picture {
  margin: 0;
  height: fit-content;
}
.image-upload .dropzone-container {
  position: absolute;
  min-width: 150px;
  align-items: end;
  inset: 0;
  padding: 0;
}
.image-upload .dropzone-placeholder {
  color: var(--light-500);
  background: color-mix(in srgb, var(--primary-500), transparent 15%);
  padding-block: 0.25rem;
}
.image-upload .dropzone-preview-button {
  margin-top: 0.25rem;
}
.image-upload .dropzone-preview-button::before {
  font-size: 1.5rem;
  background: color-mix(in srgb, var(--primary-500), transparent 15%);
}
.image-upload .dropzone-preview {
  margin: auto;
}
.image-upload .dropzone-preview-image {
  width: 128px;
  height: 128px;
  max-width: unset;
  margin: 0;
  flex-basis: unset;
  background-size: cover;
  background-position: center;
}
.image-upload .dropzone-preview-filename {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: var(--light-500);
  background: color-mix(in srgb, var(--primary-500), transparent 15%);
  padding: 0.25rem 1rem;
  text-align: center;
}
.image-upload-alt {
  min-height: 120px;
}

.media-fieldset {
  display: grid;
  gap: 1rem;
  margin-bottom: 0.25rem;
  padding: 1rem;
}
.media-fieldset > .form-group {
  gap: 1rem;
}
.media-fieldset .image-upload {
  flex-grow: 1;
}
@media (min-width: 769px) {
  .media-fieldset .image-upload {
    flex-grow: 0;
  }
}

.form--link-collection {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 26em), 1fr));
  gap: 0.5rem;
}

.collection-row-controls {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.range--font-size--container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.25rem;
}
.range--font-size--input {
  display: flex;
  align-items: center;
  position: relative;
  flex-grow: 1;
}
.range--font-size--input:hover .range--font-size--cursor {
  border-color: var(--warning-500);
}
.range--font-size--input:hover .range--font-size--progress {
  background-color: var(--warning-500);
}
.range--font-size--input input {
  flex-grow: 1;
  -webkit-appearance: none;
  appearance: none;
  cursor: -webkit-grab;
  cursor: grab;
  outline: none;
  background: none;
}
.range--font-size--progress {
  --progress-value: 0;
  -webkit-transition: background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: var(--accent-600);
  margin-block: 0.5rem;
  border-radius: 25px;
  pointer-events: none;
  overflow: hidden;
}
.range--font-size--progress::before {
  content: "";
  position: absolute;
  left: var(--progress-value);
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--light-400);
  border-radius: inherit;
}
.range--font-size--cursor {
  -webkit-transition: border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  position: absolute;
  left: 0;
  border: 3px solid var(--accent-600);
  border-radius: 99px;
  pointer-events: none;
  z-index: 1;
  background-color: var(--light-500);
  color: var(--primary-500);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 2rem;
  width: 2rem;
}

.ts-wrapper.multi .ts-control [data-value] {
  margin: 0;
}

.ts-wrapper.multi.has-items .ts-control {
  padding: 0.25rem 0.5rem;
}

.has-items .ts-control > input {
  margin: 0 !important;
}

.ts-control {
  gap: 0.25rem;
}
.ts-control input {
  mask: none;
  width: fit-content;
  min-width: 4rem;
}
.ts-dropdown {
  color: var(--light-500);
  background-color: color-mix(in srgb, var(--primary-800), transparent 5%);
  -webkit-mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
  mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  border: none;
  font-size: 1rem;
}
.ts-dropdown .active.create,
.ts-dropdown .active {
  color: var(--light-500);
  background-color: color-mix(in srgb, var(--secondary-800), transparent 60%);
}
.ts-wrapper.multi .ts-control [data-value], .ts-wrapper.multi .ts-control [data-value].active {
  background: var(--primary-500);
  color: var(--light-500);
  border: 0;
  text-shadow: none;
  box-shadow: none;
  padding: 0.25rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ts-wrapper.multi .ts-control > div.active {
  border: 0;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  padding-right: 0.75rem;
  font-weight: 500;
  font-size: 1rem;
  border-color: color-mix(in srgb, var(--light-500), transparent 90%);
}

.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:not(.disabled):hover.has-items .clear-button {
  pointer-events: initial;
}
.plugin-clear_button .clear-button {
  background-color: var(--danger-500) !important;
  border-color: var(--danger-600) !important;
  height: 100%;
  right: 0;
  padding: 0 0.5rem !important;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.ql-hidden {
  display: none;
}
.ql-toolbar {
  background-color: var(--secondary-200);
  border-bottom: 1px solid color-mix(in srgb, var(--dark-500), transparent 65%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ql-editor {
  min-height: 100px;
  max-height: 300px;
  background-color: var(--secondary-200);
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--light-500), transparent 90%);
  color: var(--dark-500);
  font-size: 1rem;
}
.ql-editor ul {
  list-style: inside;
  padding: revert;
}
.ql-editor ol {
  list-style: decimal;
  padding: revert;
}
.ql-editor a {
  color: var(--primary-300);
}
.ql-editor a:hover {
  color: var(--primary-200);
}
.ql-editor blockquote {
  background-color: var(--secondary-700);
  padding: 0.25rem;
}
.ql-editor hr {
  opacity: unset;
  border-color: unset;
}
.ql-formats {
  display: inline-flex;
  gap: 0.25rem;
}
.ql-formats button {
  display: flex;
  justify-content: center;
  background-color: transparent;
  transition: background-color 0.3s ease;
  padding: 0.25rem;
}
.ql-formats svg {
  height: 1.5rem;
  width: auto;
  fill: unset;
  stroke: unset;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  z-index: 10;
}

.ql-toolbar.ql-snow,
.ql-container {
  font-family: var(--font-family);
  flex-wrap: wrap;
}

.aside-menu--acount {
  margin: -2rem -3rem;
  background-color: var(--primary-300);
  margin-right: 0;
  border-top: 3px solid;
  border-top-color: currentcolor;
  border-color: var(--primary-500);
  border-radius: 0 5px 0 0;
}
@container (width < 60rem) {
  .aside-menu--acount {
    margin: 0;
  }
  .aside-menu--acount .pl-150 {
    padding: 0 !important;
  }
}
.aside-menu--acount > ul {
  position: sticky;
  top: 0;
  padding-block: 2rem;
}
.aside-menu--acount > ul > li > .menu-element,
.aside-menu--acount > ul ul li {
  padding: 0.5rem 2rem;
}
.aside-menu--acount li {
  background-color: var(--primary-300);
  display: flex;
  position: relative;
  -webkit-transition: background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  border-bottom: 1px solid color-mix(in srgb, var(--secondary-900), transparent 60%);
}
.aside-menu--acount li.active {
  background-color: var(--primary-500);
}
.aside-menu--acount li.active .menu-element {
  color: var(--accent-500);
}
.aside-menu--acount li:hover {
  background-color: var(--primary-500);
}
.aside-menu--acount li svg {
  height: 1.5rem;
  width: 1.5rem;
}
.aside-menu--acount li .menu-element {
  -webkit-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  flex-grow: 1;
  background-color: transparent;
  color: var(--light-500);
}
.aside-menu--acount li .menu-element:active, .aside-menu--acount li .menu-element.active {
  color: var(--accent-500);
  background-color: var(--primary-500);
}
.aside-menu--acount li .menu-element::before {
  position: absolute;
  inset: 0;
  display: block;
  content: "";
}
.aside-menu--acount li:first-child {
  border-top: 1px solid color-mix(in srgb, var(--secondary-900), transparent 60%);
}

th[role=columnheader]:not(.no-sort)::after {
  border-color: var(--light-500) transparent;
}

.table {
  color: var(--dark-500);
  width: 100%;
  border: none;
  border-collapse: collapse;
  background-color: color-mix(in srgb, var(--secondary-200), transparent 30%);
  isolation: isolate;
}
@media (max-width: 991px) {
  .table.block {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}
.table thead {
  background-color: var(--primary-900);
  color: var(--light-500);
  border-top: 5px solid var(--primary-100);
}
@media (min-width: 993px) {
  .table thead {
    position: sticky;
  }
}
.table tfoot {
  background-color: var(--dark-500);
  color: var(--light-500);
}
@media (min-width: 993px) {
  .table tfoot {
    position: sticky;
  }
}
.table thead {
  top: 0;
  z-index: 10;
}
.table tfoot {
  bottom: 0;
}
.table tbody tr:nth-child(odd) {
  background-color: color-mix(in srgb, var(--secondary-500), transparent 50%);
}
.table th {
  text-transform: capitalize;
  user-select: none;
}
.table th svg {
  fill: currentColor;
  width: 1.25rem;
  height: 1.25rem;
}
.table td {
  position: relative;
}
.table td span.string {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
.table td,
.table th {
  padding: 0.5rem 1rem;
  border: none;
  vertical-align: middle;
}
.table td img, .table td > svg,
.table th img,
.table th > svg {
  display: block;
  margin: auto;
}
.table th {
  padding: 1rem;
}
.table a {
  color: var(--primary-500);
  fill: var(--primary-500);
  stroke: var(--primary-500);
}
.table a:hover {
  color: var(--primary-300);
  fill: var(--primary-300);
  stroke: var(--primary-300);
}
.table-filters-actions {
  display: flex;
  gap: 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--light-500), transparent 90%);
  margin-bottom: 1rem;
  padding-bottom: 0.25rem;
}
.table-filters-actions .button-link {
  color: var(--light-500);
}
.table-filters-wrapper {
  margin-bottom: 1rem;
}
.table-filters-wrapper .form {
  flex-direction: row;
  gap: 1rem;
  flex-wrap: wrap;
}
.table-action nav {
  justify-content: center;
}
.table-action .dropdown-button {
  border-radius: 0.5rem;
  padding: 0.25rem 1rem;
  color: var(--light-500);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--dark-500);
}
.table-action .dropdown-button:hover {
  color: var(--light-300);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--dark-300);
}
.table-action .dropdown-items {
  width: 100%;
  box-sizing: border-box;
}
.table-action-bulk {
  display: flex;
  gap: 0.5rem;
}
.table-action-bulk button {
  text-transform: capitalize;
}
.table-clickable-row {
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s ease;
}
.table-clickable-row:hover {
  background-color: color-mix(in srgb, var(--light-500), transparent 90%) !important;
}
.table-clickable-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.datatable-container {
  margin-bottom: 0.5rem;
  overflow: scroll;
  max-width: 100vw;
}
.datatable-top {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
  margin-block: 1rem 0.75rem;
}
.datatable-ascending .datatable-sorter {
  color: var(--accent-500);
}
.datatable-ascending .datatable-sorter::before {
  color: var(--accent-500);
}
.datatable-descending .datatable-sorter {
  color: var(--accent-500);
}
.datatable-descending .datatable-sorter::after {
  color: var(--accent-500);
}
.datatable-sorter {
  background-color: transparent;
  color: var(--light-500);
  width: 100%;
  position: relative;
  text-align: start;
  padding-left: 0.75rem;
  font-size: 1rem;
}
.datatable-sorter, .datatable-sorter::before, .datatable-sorter::after {
  -webkit-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
.datatable-sorter::after {
  content: "▼";
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 0.5rem;
  font-family: initial;
  color: var(--light-900);
}
.datatable-sorter::before {
  content: "▲";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.5rem;
  font-family: initial;
  color: var(--light-900);
}
.datatable-sorter:hover, .datatable-sorter:focus, .datatable-sorter:hover::before, .datatable-sorter:hover::after {
  color: var(--accent-500);
}
.datatable-pagination-list {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  gap: 0.25rem;
}
.datatable-pagination-list-item-link {
  color: #212121;
  height: 1.75rem;
  width: 1.75rem;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2.2rem 1.9rem 2.3rem 2rem;
  background-color: var(--secondary-600);
  overflow: hidden;
  -webkit-transition: background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1), color 0.3s cubic-bezier(0.42, 0, 0.58, 1), border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1), color 0.3s cubic-bezier(0.42, 0, 0.58, 1), border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1), color 0.3s cubic-bezier(0.42, 0, 0.58, 1), border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
.datatable-pagination-list-item:not(.datatable-disabled) .datatable-pagination-list-item-link:hover {
  background-color: var(--light-500);
}
.datatable-active .datatable-pagination-list-item-link {
  background: transparent;
  color: var(--light-500);
  border: 1px solid var(--light-500);
}
.datatable-disabled button {
  background: transparent;
  color: var(--light-500);
  border: 1px solid var(--light-500);
  cursor: initial;
}

.sitemap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12em), 1fr));
  gap: 1rem;
}
.sitemap * {
  font-size: 1.125rem;
}
.sitemap ul {
  display: grid;
  gap: 0.5rem;
}
.sitemap span {
  font-weight: bold;
  padding-bottom: 0.5rem;
  display: inline-flex;
}

.news {
  display: grid;
  gap: 1rem;
  color: var(--dark-500);
}
.news a {
  color: var(--primary-500);
}
.news a:hover {
  color: var(--primary-300);
}
.news .button-link {
  color: var(--primary-500);
}
.news picture {
  width: fit-content;
  margin-inline: auto;
  margin-bottom: 1rem;
  position: relative;
}
.news picture::before {
  content: "";
  display: block;
  position: absolute;
  background: linear-gradient(135deg, var(--light-500) 0%, var(--light-500) 47%, var(--primary-500) 47%, var(--primary-500) 50%, transparent 50%, transparent 100%);
  width: 35px;
  height: 35px;
  top: -5px;
  left: -5px;
}
.news picture::after {
  content: "";
  display: block;
  position: absolute;
  background: linear-gradient(135deg, transparent 0%, transparent 47%, var(--primary-500) 47%, var(--primary-500) 50%, var(--light-500) 50%, var(--light-500) 100%);
  width: 35px;
  height: 35px;
  bottom: -5px;
  right: -5px;
}
.news footer {
  display: flex;
  justify-content: space-between;
}

.lastest-news-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 0.5rem;
  justify-items: center;
}

.project__site__newest {
  width: 100%;
  box-sizing: border-box;
}
.project__site__newest-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  overflow: hidden;
  width: 100%;
  min-height: 0;
  min-width: 0;
}
@media (min-width: 769px) {
  .project__site__newest-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 993px) {
  .project__site__newest-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.project__site__newest-list--item {
  overflow: hidden;
  min-width: 0;
}
.project__site__newest-card {
  height: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-areas: "thumbnail title" "thumbnail content" "footer footer";
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 0.5rem 0.75rem;
}
@media (min-width: 769px) {
  .project__site__newest-card {
    grid-template-areas: "thumbnail title" "thumbnail content" "thumbnail footer";
  }
}
.project__site__newest-card .thumbnail {
  margin-top: auto;
  grid-area: thumbnail;
}
.project__site__newest-card .header {
  grid-area: title;
  overflow: hidden;
}
.project__site__newest-card .content {
  grid-area: content;
  overflow: hidden;
  min-width: 0;
}
.project__site__newest-card .content a {
  text-decoration: none;
  position: relative;
}
.project__site__newest-card .content a::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: currentColor;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.project__site__newest-card .content a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.project__site__newest-card .footer {
  grid-area: footer;
}

.hero-wrapper {
  --column-count: 2;
  --column-size: 50%;
  flex-grow: 1;
  position: relative;
}
@media (min-width: 993px) {
  .hero-wrapper {
    display: grid;
    column-gap: 0.5rem;
    row-gap: 0.75rem;
    grid-template-columns: repeat(var(--column-count), calc(var(--column-size) - 0.25rem));
  }
}
.hero-wrapper ol {
  margin-block: 0;
}
.hero-wrapper-item-list {
  display: none;
}
@media (min-width: 993px) {
  .hero-wrapper-item-list {
    display: flex;
    position: relative;
  }
}
.hero-wrapper-item-list .list-hero-item {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 1rem;
}
.hero-wrapper-item-list .list-hero-item picture + div {
  height: 190px;
}
.hero-wrapper-item-list li {
  display: grid;
  transition: opacity 500ms;
}
.hero-wrapper-item-list li:not(.active) {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: -1;
}
.hero-wrapper-nav-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-inline: 0.5rem;
}
@media (min-width: 993px) {
  .hero-wrapper-nav-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0;
    margin: 0;
  }
}
.hero-wrapper-nav-list .list-hero-nav-infos {
  text-decoration: none;
  transition: background-color 300ms;
  display: flex;
  gap: 0.5rem;
  position: relative;
  isolation: isolate;
  background: transparent;
  overflow: hidden;
  border: 2px solid var(--primary-500);
}
.hero-wrapper-nav-list .list-hero-nav-infos::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: var(--url);
  background-size: cover;
  filter: blur(5px);
  transform: scale(3);
}
@media (min-width: 993px) {
  .hero-wrapper-nav-list .list-hero-nav-infos {
    padding: 0.5rem 1rem;
    background: var(--primary-500);
  }
  .hero-wrapper-nav-list .list-hero-nav-infos::before {
    display: none;
  }
}
.hero-wrapper-nav-list .list-hero-nav-infos .index {
  position: absolute;
  display: flex;
  background: var(--accent-500);
  color: var(--primary-500);
  top: 0;
  left: 0;
  padding: 0.25rem;
  border-radius: 0 0 0.5rem 0;
}
.hero-wrapper-nav-list .list-hero-nav-infos .title {
  display: none;
}
.hero-wrapper-nav-list .list-hero-nav-infos picture {
  margin: auto;
}
@media (min-width: 993px) {
  .hero-wrapper-nav-list .list-hero-nav-infos .index {
    position: initial;
    background: none;
    color: inherit;
    padding: 0;
  }
  .hero-wrapper-nav-list .list-hero-nav-infos picture {
    display: none;
  }
  .hero-wrapper-nav-list .list-hero-nav-infos .title {
    display: inline;
    text-decoration: underline;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.book--list-favorites {
  display: grid;
  gap: 1rem 0.5rem;
  --column-width: 5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--column-width)), 1fr));
}
@media (min-width: 993px) {
  .book--list-favorites {
    --column-width: 8rem;
  }
}
.book--list-favorites article {
  position: relative;
  display: grid;
  gap: 0.25rem;
}
.book--list-favorites article.with-cover-link footer a::before {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
}
.book--list-favorites article.with-cover-link:hover {
  color: var(--accent-500);
}
.book--list-favorites article header * {
  -webkit-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  color: currentColor;
}
.book--list-favorites article header span {
  display: block;
}
.book--list-favorites article footer {
  width: 100%;
}
.book--list-favorites article footer a {
  -webkit-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  color: currentColor;
  display: flex;
  gap: 0.5rem;
  text-decoration: none;
}
.book--list-favorites article .book--list-favorites--thumbnail {
  position: relative;
  width: fit-content;
}
.book--list-favorites article .book--list-favorites--thumbnail p {
  -webkit-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  border-bottom: 2px solid;
  position: absolute;
  left: 0;
  right: 0;
  background-color: color-mix(in srgb, var(--primary-500), transparent 34%);
  backdrop-filter: blur(1px);
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding-block: 0.125rem;
  padding-left: 0.125rem;
}
.book--list-favorites article .book--list-favorites--thumbnail .status-abandoned {
  border-color: var(--danger-500);
}
.book--list-favorites article .book--list-favorites--thumbnail .status-finished {
  border-color: var(--light-900);
}
.book--list-favorites article .book--list-favorites--thumbnail .status-hiatus {
  border-color: var(--warning-500);
}
.book--list-favorites article .book--list-favorites--thumbnail .status-onGoing {
  border-color: var(--success-500);
}

.book__table-of-content details {
  background-color: var(--primary-400);
}
.book__table-of-content .handle {
  display: flex;
}
.book__table-of-content_chapter:not(:first-child) {
  border-top: 1px solid #557379;
}
.book__table-of-content_pages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  position: relative;
  isolation: isolate;
}
@media (min-width: 769px) {
  .book__table-of-content_pages {
    grid-template-columns: repeat(3, 1fr);
  }
}
.book__table-of-content_pages:not(:has(*)) {
  min-height: 2rem;
}
.book__table-of-content_pages:not(:has(*))::before {
  content: attr(data-empty-text);
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--primary-300);
  z-index: -1;
}
.book__table-of-content_pages .list-item {
  display: flex;
  padding: 0.5rem;
  gap: 0.5rem;
  align-items: center;
  background-color: var(--primary-300);
}
.book__table-of-content_pages .list-item.edit {
  display: grid;
  grid-template-columns: 1rem 1rem 1fr auto;
}
.book__table-of-content_pages .list-item.edit .index {
  margin: auto;
}
.book__table-of-content_pages .list-item:nth-child(odd) {
  background-color: var(--primary-400);
}
.book__table-of-content_pages .list-item .handle {
  cursor: pointer;
  margin: auto;
}
.book__table-of-content_pages .list-item:last-child::before, .book__table-of-content_pages .list-item:last-child::after {
  content: "";
  display: flex;
  width: 100%;
  position: absolute;
  inset: 0;
  z-index: -1;
}
.book__table-of-content_pages .list-item:last-child::after {
  grid-column: 3/3;
  background-color: inherit;
}
.book__table-of-content_pages .list-item:last-child::before {
  grid-column: 2/3;
}
.book__table-of-content_pages .list-item:last-child:nth-child(even)::before {
  background-color: var(--primary-400);
}
.book__table-of-content_pages .list-item:last-child:nth-child(odd)::before {
  background-color: var(--primary-300);
}
.book__table-of-content_pages .list-item:last-child:nth-child(3n+2):nth-child(even)::after {
  background-color: var(--primary-400);
}
.book__table-of-content_pages .list-item:last-child:nth-child(3n+2):nth-child(odd)::after {
  background-color: var(--primary-300);
}

.status {
  display: grid;
  align-content: center;
}
.status-abandoned svg {
  fill: var(--danger-500);
}
.status-finished svg {
  fill: var(--light-900);
}
.status-hiatus svg {
  fill: var(--warning-500);
}
.status-onGoing svg {
  fill: var(--success-500);
}

.project-rating--all {
  gap: 0.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 6em), 1fr));
  align-items: end;
}
@media (min-width: 769px) {
  .project-rating--all {
    max-width: 300px;
  }
}
@media (min-width: 993px) {
  .project-rating--all {
    max-width: 600px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
  }
}
.project-rating--total {
  display: flex;
  font-size: 1.802rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
}
.project-rating--total .filled svg {
  fill: var(--accent-500);
}
.project-rating--total svg {
  height: 1.266rem;
  width: 1.266rem;
}
.project-rating--expanded {
  display: flex;
}
.project-rating--expanded .filled svg {
  fill: var(--accent-500);
}
.project-rating--collapsed {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.project-rating--collapsed svg {
  fill: var(--accent-500);
}
.project-rating--range {
  display: flex;
  flex-grow: 1;
  justify-content: space-around;
}
@media (min-width: 993px) {
  .project-rating--range {
    flex-grow: 0;
    justify-content: flex-start;
    width: fit-content;
  }
}
.project-rating--range svg {
  height: 1.75rem;
  width: 100%;
}
.project-rating--range label {
  cursor: pointer;
}
.project-rating--range label.icon--star, .project-rating--range label.icon--none {
  margin: 0;
  padding: 0.5rem;
}
@media (min-width: 993px) {
  .project-rating--range label.icon--star, .project-rating--range label.icon--none {
    padding: 0;
    padding-right: 0.125rem;
  }
}
.project-rating--range label.icon--star svg {
  fill: var(--accent-500);
}
.project-rating--range label.icon--none svg {
  fill: none;
  stroke: var(--light-900);
  stroke-width: 16px;
}
.project-rating--range input {
  display: none;
}
.project-rating--range input.icon--none:checked + label.icon--none svg {
  fill: var(--danger-500);
  stroke: var(--danger-500);
}
.project-rating--range input:checked ~ label.icon--star svg {
  fill: var(--light-900);
}

#review_criteria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 0.5rem;
}
#review_criteria .form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.5rem;
}
#review_criteria .form-row > label {
  width: 100%;
  justify-content: space-between;
}
#review_criteria .project-rating--range:hover label.icon--star svg {
  fill: var(--accent-500);
}
#review_criteria .project-rating--range:hover input.icon--none:not(:hover) + label.icon--none svg {
  fill: none;
}
#review_criteria input:hover ~ label.icon--star * {
  fill: var(--light-900);
}
#review_criteria input.icon--none:hover + label.icon--none svg {
  fill: var(--danger-500);
  stroke: var(--danger-500);
}

.project--favorites-checkbox {
  position: absolute;
  z-index: 10;
  inset: 0;
}
.project--favorites-checkbox input {
  display: none;
}
.project--favorites-checkbox input:checked + label {
  color: var(--danger-500);
  border: 2px solid currentColor;
}
.project--favorites-checkbox input:checked + label .project--favorites-checkbox-icon {
  opacity: 0;
}
.project--favorites-checkbox input:checked + label .project--favorites-checkbox-icon-remove {
  opacity: 1;
}
.project--favorites-checkbox input:checked + label .project--favorites-checkbox-icon-remove svg {
  stroke: var(--primary-500);
  fill: var(--danger-500);
}
.project--favorites-checkbox label.project--favorites-checkbox-label {
  -webkit-transition: border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  cursor: pointer;
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.project--favorites-checkbox label.project--favorites-checkbox-label svg {
  -webkit-transition: fill 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: fill 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: fill 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  height: 2rem;
  width: 2rem;
  fill: var(--primary-300);
  stroke: currentColor;
  stroke-width: 25px;
}
.project--favorites-checkbox label.project--favorites-checkbox-label span:not(.checkbox-label) {
  -webkit-transition: background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  border-radius: 99px;
  height: 3.25rem;
  width: 3.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--primary-500);
  background-color: var(--secondary-500);
  border: 2px solid var(--primary-500);
}
.project--favorites-checkbox label.project--favorites-checkbox-label:hover {
  color: var(--accent-500);
  border: 2px dotted currentColor;
}
.project--favorites-checkbox label.project--favorites-checkbox-label:hover .project--favorites-checkbox-icon {
  opacity: 0;
}
.project--favorites-checkbox label.project--favorites-checkbox-label:hover .project--favorites-checkbox-icon-remove {
  background-color: var(--accent-500);
  opacity: 1;
}
.project--favorites-checkbox .checkbox-label {
  display: none;
}
.project--favorites-checkbox-icon {
  position: absolute;
}
.project--favorites-checkbox-icon-remove {
  opacity: 0;
}

.project-table--wrapper {
  border-top: 3px solid var(--primary-500);
}

table.project-table {
  color: var(--dark-900);
  background-color: var(--primary-500);
  color: var(--light-500);
}
table.project-table thead {
  background-color: var(--primary-300);
}
table.project-table thead svg {
  width: 1.125rem;
  height: 1.125rem;
}
table.project-table tbody tr {
  height: 4rem;
}
table.project-table tbody tr:nth-child(odd) {
  background-color: transparent;
  border-block: 1px solid color-mix(in srgb, var(--secondary-900), transparent 60%);
}
table.project-table .project-table--genres {
  font-size: 1rem;
  text-align: start;
}
table.project-table .project-title {
  min-width: 20ch;
}
table.project-table .project-table--text-ellipsis {
  max-width: 10rem;
  overflow: hidden;
  text-align: start;
}

.list-comments {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: scroll;
  padding: 0.75rem;
  scroll-behavior: smooth;
}
.list-comments hr {
  border-color: var(--secondary-500);
}
.list-comments .comment {
  animation: show-comments 1s ease;
}
.list-comments .comment .text-danger {
  color: var(--danger-500);
}

.comment {
  display: grid;
  gap: 0.5rem;
  color: var(--light-500);
  padding: 1rem;
  background-color: var(--primary-400);
  -webkit-mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
  mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
@media (max-width: 991px) {
  .comment svg {
    height: 1.25rem;
    width: 1.25rem;
  }
}
@container (width < 20rem) {
  .comment {
    padding: 0.25rem 0.75rem;
  }
  .comment--header * {
    font-size: 0.79rem;
  }
  .comment--body * {
    font-size: 0.889rem !important;
  }
  .comment .desktop-text {
    display: none;
  }
}
.comment--body .comment--add-wrapper {
  background-color: transparent;
  padding: 0;
}
.comment--header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.comment .nav-button {
  width: 2rem;
  height: 2rem;
}
.comment .nav-button svg {
  height: 1rem;
  width: 1rem;
}
.comment--add-wrapper {
  padding: 0.75rem;
  position: sticky;
  bottom: 0;
  background-color: color-mix(in srgb, var(--primary-800), transparent 10%);
  color: var(--light-500);
}
.comment--add-wrapper button {
  transition: all 0.5s ease-in-out;
}
.comment--add-wrapper button[type=button] {
  transform-origin: right;
  animation: grow-x 0.5s ease-in-out;
  max-width: fit-content;
}
.comment--add-wrapper article {
  transform-origin: top;
  animation: show-comments 0.5s ease-in-out;
}
@keyframes grow-x {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
.comment-container {
  color: var(--primary-500);
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.comment-container textarea {
  min-height: 75px;
}

.review--header {
  display: grid;
  gap: 0.5rem;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
@media (min-width: 993px) {
  .review--header {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 993px) {
  .review--header .comment--add-wrapper {
    grid-column: span 2;
  }
}
.review--header .button.accent {
  padding-inline: 2rem;
}
.review--list .list-comments {
  overflow: unset;
}
.review--list .comment--add-wrapper {
  order: 1;
  z-index: 10;
  top: 0;
  bottom: unset;
}

@keyframes show-comments {
  0% {
    opacity: 0;
    transform: translate(0, -50px);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}
.notification-card {
  max-width: 40rem;
}

.page-image-comics-upload {
  flex-direction: column;
  background-color: red;
}
@media (min-width: 769px) {
  .page-image-comics-upload {
    flex-direction: row;
  }
}
.page-image-comics-upload aside {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.page-image-comics-upload .image-upload {
  height: unset;
  max-width: 400px;
}
.page-image-comics-upload .image-upload + details {
  max-width: 400px;
}
.page-image-comics-upload .dropzone-preview {
  flex-grow: 1;
  height: 100%;
}
.page-image-comics-upload .image-upload .dropzone-preview-image {
  width: 100%;
  height: 100%;
  background-size: contain;
}

body.reading-page {
  background-color: var(--primary-500);
}
body.reading-page > header {
  background-color: var(--primary-700);
}
body.reading-page main {
  max-width: 100vw;
  padding-bottom: 0;
  flex-grow: 1;
  display: grid;
}
body.reading-page main > header {
  background-color: var(--primary-400);
  mask: unset;
  margin: 0;
}
body.reading-page main .comment {
  background-color: color-mix(in srgb, var(--primary-300), transparent 10%);
}
body.reading-page .masked-reading {
  isolation: isolate;
  position: absolute;
  z-index: -1;
  inset: 0;
}
body.reading-page .masked-reading::before {
  content: "";
  display: block;
  position: sticky;
  top: -2rem;
  background-color: var(--light-500);
  -webkit-mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
  mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
  -webkit-mask-size: 102% 100%;
  mask-size: 102% 100%;
  mask-position: center;
  max-height: 130svh;
  height: 100%;
}
@media (min-width: 993px) {
  body.reading-page .masked-reading::before {
    max-width: calc(80ch + 4rem);
    mask-size: 100% 100%;
  }
}
body.reading-page .list-infos > li {
  border-color: var(--primary-500);
}

.reading-wrapper {
  display: grid;
  grid-template-columns: 80ch;
  justify-content: center;
  margin: auto;
}

html.dark-theme .masked-reading::before {
  background-color: var(--dark-500);
}
html.dark-theme .masked-reading + .flow {
  color: var(--light-500);
}

.flow {
  color: var(--dark-500);
}
.flow > * + * {
  margin-top: 1em;
}
.flow p {
  color: currentColor;
}
.flow ul {
  list-style-type: disc;
}
.flow ol {
  list-style-type: decimal;
}
.flow blockquote {
  background-color: var(--secondary-200);
  padding: 1rem;
  -webkit-mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
  mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  position: relative;
}
.flow blockquote::after, .flow blockquote::before {
  font-size: 4rem;
  display: flex;
  line-height: 0;
  color: color-mix(in srgb, var(--primary-500), transparent 80%);
}
.flow blockquote::after {
  content: "”";
  align-items: flex-end;
  justify-content: flex-end;
}
.flow blockquote::before {
  align-items: flex-start;
  position: absolute;
  top: 2.5rem;
  content: "“";
}

.reading-page .tabs-container {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: min-content 1fr;
  grid-template-areas: "nav header " "nav content";
}
.reading-page .tabs-container > nav {
  transform: translateY(calc(100% - 3rem));
  transition: transform 0.3s ease-in-out;
  background: linear-gradient(180deg, transparent 3rem, var(--primary-400) 3rem, var(--primary-400) 100%);
  display: flex;
  flex-direction: column-reverse;
  position: fixed;
  z-index: 10;
  bottom: 0;
  left: 0;
  right: 0;
  grid-area: nav;
  gap: 1rem;
}
.reading-page .tabs-container > nav.active {
  transform: translateY(0);
}
@media (min-width: 769px) {
  .reading-page .tabs-container > nav {
    background-color: var(--primary-400);
    transform: unset;
    display: grid;
    grid-template-rows: minmax(5rem, max-content) min-content auto;
    position: unset;
  }
}
.reading-page .tabs-container > nav .tabs-nav-link,
.reading-page .tabs-container > nav .tabs-nav-panel {
  flex-direction: row;
}
@media (min-width: 769px) {
  .reading-page .tabs-container > nav .tabs-nav-link,
  .reading-page .tabs-container > nav .tabs-nav-panel {
    flex-direction: column;
  }
}
.reading-page .tabs-container > nav .tabs-nav-link {
  gap: 0.5rem;
  padding-bottom: 0.5rem;
}
@media (min-width: 769px) {
  .reading-page .tabs-container > nav .tabs-nav-link {
    gap: 0;
    padding-bottom: 0;
  }
}
.reading-page .tabs-container > nav .button.active {
  color: var(--accent-500);
}
.reading-page .tabs-container > nav .button.dark {
  mask: unset;
}
.reading-page .tabs-container > nav .button.dark:hover {
  color: var(--accent-500);
  background-color: color-mix(in srgb, var(--primary-500), transparent 50%);
}
.reading-page .tabs-container > nav .button.dark:focus::before {
  outline-color: var(--accent-500);
}
.reading-page .tabs-container > nav .button.danger {
  mask: unset;
  color: var(--danger-500);
  background-color: var(--primary-500);
}
.reading-page .tabs-container > nav .button.danger:hover {
  color: var(--danger-300);
  background-color: color-mix(in srgb, var(--primary-500), transparent 50%);
}
.reading-page .tabs-container > nav .button.danger:focus::before {
  outline-color: var(--danger-500);
}
.reading-page .tabs-container .tabs-mobile-toggle {
  margin-left: auto;
}
@media (min-width: 769px) {
  .reading-page .tabs-container .tabs-mobile-toggle {
    display: none;
  }
}
.reading-page .tabs-container > header {
  background-color: var(--primary-400);
  color: var(--light-500);
  grid-area: header;
  mask-position: 110% 100%;
  mask-size: 110% 100%;
}
.reading-page .tabs-container .tabs-title {
  height: fit-content;
}
.reading-page .tabs-container .tabs-title.sticky {
  top: 0;
}
.reading-page .tabs-container .tabs-title li {
  flex-basis: unset;
  margin-left: 0;
}
@media (min-width: 769px) {
  .reading-page .tabs-container .tabs-title li {
    width: 100%;
  }
}
.reading-page .tabs-container .tabs-title li button, .reading-page .tabs-container .tabs-title li a.button {
  font-size: 1.25rem;
  flex-grow: 1;
  text-decoration: none;
  text-transform: capitalize;
  justify-content: flex-start;
  padding-inline: 1rem;
  gap: 0.25rem;
  font-weight: unset;
}
.reading-page .tabs-container .tabs-title li button svg, .reading-page .tabs-container .tabs-title li a.button svg {
  height: 1.5rem;
  width: 1.5rem;
}
.reading-page .tabs-container .tabs-title li a:not(.button) {
  clip-path: unset;
  border-radius: unset;
  padding: 0.5rem 1rem;
  justify-content: flex-start;
  border-top: 3px solid var(--primary-500);
  background-color: color-mix(in srgb, var(--primary-500), transparent 55%);
  position: relative;
}
.reading-page .tabs-container .tabs-title li a:not(.button)[aria-selected=true] {
  background-color: var(--primary-500);
}
.reading-page .tabs-container .tabs-title li a:not(.button):hover {
  color: var(--accent-500);
}
.reading-page .tabs-container .tabs-title li a:not(.button):hover::before {
  right: 0;
}
.reading-page .tabs-container .tabs-title li a:not(.button)::before {
  position: absolute;
  content: "";
  display: block;
  left: 0;
  top: 0;
  right: 100%;
  transition: right 0.3s;
  background-color: var(--accent-500);
  height: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .reading-page .tabs-container .tabs-title li a:not(.button)::before {
    transition: none;
  }
}
.reading-page .tabs-container .tabs-panels {
  mask: unset;
  background: none;
  grid-area: content;
}
.reading-page .tabs-container .tabs-panels > div {
  max-width: 80ch;
  flex-grow: 1;
}
.reading-page .tabs-container .tabs-panels > div > .masked-container {
  margin-inline: -1rem;
  color: var(--primary-500);
  background-color: var(--light-500);
}
@media (min-width: 769px) {
  .reading-page .tabs-container .tabs-panels > div > .masked-container {
    margin-inline: unset;
  }
}
.reading-page .tabs-container .tabs-panels > div > .masked-container a:not(.button, .tag) {
  color: var(--primary-700);
}
.reading-page .tabs-container .tabs-panels > div > .masked-container a:not(.button, .tag):hover {
  color: var(--primary-200);
}
.reading-page .tabs-container .tabs-panels > div > .masked-container hr {
  border-color: var(--primary-500);
  opacity: 80%;
}
.reading-page .tabs-container .tabs-panels > div > .masked-container .tag {
  background-color: var(--primary-500);
  color: var(--light-500);
}
.reading-page .tabs-container .tabs-panels > div > .masked-container .tag:hover {
  background-color: var(--primary-400);
  color: var(--accent-500);
}
.reading-page .tabs-container .tabs-panels > div > .masked-container .table {
  background-color: var(--light-500);
}
.reading-page .tabs-container .tabs-panels > div > .masked-container .table thead,
.reading-page .tabs-container .tabs-panels > div > .masked-container .table tfoot {
  background-color: var(--dark-300);
  border: none;
}
.reading-page .tabs-container .tabs-panels > div > .masked-container .table tbody tr:nth-child(odd) {
  background-color: var(--light-600);
}
.reading-page .tabs-container .tabs-panels > div > .masked-container .table td,
.reading-page .tabs-container .tabs-panels > div > .masked-container .table th {
  padding: 0.5rem 1rem;
  text-align: center;
}
.reading-page .tabs-container .tabs-panels > div.w-full {
  max-width: 80rem;
}

.reading-book-thumbnail {
  display: grid;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem;
  margin: 1rem;
  width: fit-content;
  background-color: var(--primary-300);
  max-width: 200px;
  position: relative;
}
.reading-book-thumbnail picture {
  justify-content: center;
}
.reading-book-thumbnail a {
  font-weight: bold;
  text-decoration: none;
}
.reading-book-thumbnail .button {
  margin: -0.5rem;
  padding: 0.125rem;
  margin-bottom: 0.25rem;
}

.account-karma {
  padding: 0.125rem 0.25rem;
}
.account-karma.success {
  background-color: var(--success-500);
  color: var(--primary-500);
}
.account-karma.warning {
  background-color: var(--warning-500);
  color: var(--primary-800);
}
.account-karma.danger {
  background-color: var(--danger-500);
  color: var(--light-700);
}

.not-verified-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background-color: var(--warning-500);
  display: flex;
  justify-content: center;
  padding: 1rem;
  flex-direction: column;
  align-items: center;
  color: var(--dark-800);
}
.not-verified-container svg {
  width: 2rem;
  height: auto;
}

.user-form-settings {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 993px) {
  .user-form-settings {
    flex-direction: row;
  }
}

.media-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 1rem;
}
.media-list__item {
  position: relative;
  display: flex;
  justify-content: center;
  padding-bottom: 1.25rem;
}
.media-list__item--inactive {
  filter: grayscale(80%);
}
.media-list__item img {
  transition: transform 0.2s ease-in-out;
}
.media-list__item picture {
  transition: outline 0.3s ease-in-out, border-radius 0.3s ease-in-out;
  justify-content: center;
  overflow: hidden;
  width: 220px;
  background-color: var(--dark-800);
}
.media-list__item picture:after {
  content: "";
  position: absolute;
  height: 0.5rem;
  width: 0%;
  bottom: 0;
  background-color: var(--warning-500);
  border-radius: 1rem;
  transition: width 0.3s ease-in-out;
}
.media-list__item input:checked + picture {
  outline: 4px solid var(--warning-500);
  border-radius: 0.25rem;
}
.media-list__item input:checked + picture:after {
  width: 50%;
}
.media-list__item input:checked + picture img {
  transform: scale(1.2);
}

trix-editor,
trix-toolbar .trix-button {
  background-color: var(--secondary-200);
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--light-500), transparent 90%);
  color: var(--dark-500);
}
trix-editor ul,
trix-toolbar .trix-button ul {
  list-style: inside;
  padding: revert;
}
trix-editor ol,
trix-toolbar .trix-button ol {
  list-style: decimal;
  padding: revert;
}
trix-editor a,
trix-toolbar .trix-button a {
  color: var(--primary-300);
}
trix-editor a:hover,
trix-toolbar .trix-button a:hover {
  color: var(--primary-200);
}
trix-editor blockquote,
trix-toolbar .trix-button blockquote {
  background-color: var(--secondary-700);
  padding: 0.25rem;
}

html {
  font-family: --font-family;
}

body {
  background-color: var(--secondary-200);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100svh;
}
@media (min-width: 769px) {
  body {
    padding-top: 1.5rem;
  }
}

main {
  max-width: 83.75rem;
  width: 100vw;
  padding-bottom: 1.5rem;
}

hr {
  border-color: var(--light-500);
  opacity: 10%;
  box-sizing: border-box;
}

picture {
  display: flex;
}

details hr {
  margin: 1.5rem 0;
}

.no-mask * {
  mask: none !important;
}

.visually-hidden,
.hidden {
  display: none !important;
}

.svg-clip {
  height: 0;
  width: 0;
}

.hideable {
  transition: transform 0.3s ease, max-height 0.5s ease-out, opacity 0.3s ease;
  transform: scaleY(0);
  opacity: 0;
  max-height: 0;
  transform-origin: top;
}
.hideable.active {
  max-height: 500px;
  opacity: 1;
  transform: scaleY(1);
}

.overflow-hidden {
  overflow: hidden;
}

.img-fluid {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.stroke-svg,
.stroke-svg > svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 50px;
}

.list {
  list-style: unset;
  margin-left: 1rem;
}

/*# sourceMappingURL=app.output.css.map */