/* charge font */
@font-face {
  font-family: OldLondon;
  src: url("assets/middle_ages/OldLondon.ttf");
}
@font-face {
  font-family: Lora;
  src: url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap");
}

body {
  background-image: url("/assets/wall-texture3.png");
  background-size: 25%;
  background-attachment: local;
  background-repeat: repeat;
  background-position: center;
  margin: 0;
  padding: 0;
  color: #2f4d81;
  font-family: Lora;
}
p{
  font-size: 1.1em;
}
h4{
  font-size: 1.35em;
}
h5{
  font-size: 1.25em;
}
main {
  width: 75%;
  position: relative;
  margin: auto;
}

.cont2 img, .cont2 iframe {
  width: 80%;
  display: block;
  margin: auto;
  margin-top: 17px;
  margin-bottom: 17px;
}
.cont2 iframe {
  width: 100%;
  height: 500px;
}

.consigne {
  font-size: 1.1em !important;
}

.answer {
  color: #b72a31 !important;
  border-color: #b72a31;
}

.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #5555553f;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  bottom: 5px;
  left: 0;
  right: 0;
  margin: 0 10px;
}

.progress {
  height: 100%;
  width: 80%; /* This width should be dynamically set based on the points */
  background-color: #ff4500;
}

.connexionBar {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #0000005e;
  width: 100%;
}

.nameConnexionBar {
  color: #fff;
  font-size: 1.2em;
  margin-left: 10px;
}

.connexionBar2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.connexionBar2 img {
  width: 50px;
  border-radius: 50%;
  margin: 5px;
  margin-left: 20px;
}

.connexionBar3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cont1 {
  background-color: transparent !important;
  width: 80%;
  margin: auto;
}
.cont2 {
  background-image: url("/assets/parch_mid.png");
  background-position: center;
  background-size: 100%;
  background-color: transparent !important;
  position: relative;
  z-index: 1;
  margin-bottom: 40px !important;
  font-size: 18px;
  padding: 10%;
}

.cont2::after {
  bottom: -16px;
  height: 34px;
  background-image: url("/assets/parch_bottom.png");
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  position: absolute;
  z-index: -1;
  width: 100%;
  right: 0px;
  content: "";
}

.cont2::before {
  top: -16px;
  height: 34px;
  background-image: url("/assets/parch_top.png");
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  position: absolute;
  z-index: -1;
  width: 100%;
  left: 0px;
  content: "";
}

h1 {
  font-family: OldLondon;
  font-size: 4em;
  text-align: center;
}

h2 {
  font-family: OldLondon;
  font-size: 3em;
  text-align: center;
}

textarea {
  width: 100%;
  height: 100px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 3px solid #000000;
  border-radius: 4px;
  background-color: #ffffff2c;
  font-size: 14px;
  resize: vertical;
  margin-bottom: 20px;
}

td textarea {
  height: 50px;
  border: none;
  resize: vertical;
  margin-bottom: 0px;
}

.banner {
  width: 100%;
}

.title-img {
  width: 100%;
  display: block;
  position: absolute;
  margin: auto;
  z-index: 10;
  top: 40%;
}
/* button + navbar */

nav {
  display: flex;
  justify-content: space-around;
  margin: auto;
  width: 70%;
  margin-bottom: 5%;
  margin-top: 12%;
}

a {
  text-decoration: none;
}

@layer fantasy-btn, fantasy-presets;

@layer fantasy-presets {
  .fantasy-bone-n-coper {
    cursor: pointer;

    --text-color: #aa9b79;

    --text-shadow: calc(1.5px * var(--scale) / 4.5)
        calc(-1.5px * var(--scale) / 4.5) calc(1.5px * var(--scale) / 4.5)
        #fffcf2,
      calc(-1.5px * var(--scale) / 4.5) calc(1.5px * var(--scale) / 4.5)
        calc(1.5px * var(--scale) / 4.5) #160500;

    --border-bg: linear-gradient(
      to bottom,
      #bcbcbc,
      #a9a9a9 49%,
      #6f6f6f 51%,
      #707070
    );
    --inlay-hover-opacity: 0.75;
    --border-hover-opacity: 0.75;
    --border-focus-bg: repeating-conic-gradient(
      #bdab8c 0deg 30deg,
      #766652 30deg 60deg
    );

    --inlay-bg1: radial-gradient(at center 150%, #d7b7a3, transparent 35%) 50%
        0% / 150% 25% no-repeat,
      radial-gradient(at center -25%, #501608, transparent 35%) 50% 100% / 150%
        25% no-repeat,
      linear-gradient(
        to bottom,
        #f0e2db61,
        #d9bfb86e 24%,
        #a77f716e 26% 49%,
        #512f2067 49% 74%,
        #2d140c7a 76%,
        #1a0801b8
      );
    --inlay-bg: var(--inlay-bg1),
      url("assets/wood_texture.jpg") 25% 25% / cover no-repeat;
  }
}

@layer fantasy-btn {
  [class*="fantasy-btn"] {
    isolation: isolate;
    position: relative;
    box-sizing: border-box;
    background: transparent;
    outline: none;
    border: none;
    --s: (var(--scale) / 4.5);
    font-size: calc(70px * var(--s));
    font-family: OldLondon;
    min-width: calc(280px * var(--s));
    min-height: calc(200px * var(--s));
    padding-inline: calc(95px * var(--s));
    padding-block: calc(51px * var(--s));
  }
  .fantasy-btn-xs {
    --scale: 0.5;
  }
  .fantasy-btn-sm {
    --scale: 0.75;
  }
  .fantasy-btn,
  .fantasy-btn-md {
    --scale: 1;
  }
  .fantasy-btn-lg {
    --scale: 1.25;
  }
  .fantasy-btn-xl {
    --scale: 1.5;
  }
  .fantasy-btn-2xl {
    --scale: 2;
  }
  .fantasy-btn-3xl {
    --scale: 3;
  }

  [class*="fantasy-btn"] {
    --_text-base-color: var(--text-color);
    --_text-hover-color: var(--text-hover-color, var(--_text-base-color));
    --_text-focus-color: var(--text-focus-color, var(--_text-hover-color));
    --_text-active-color: var(--text-active-color, var(--_text-focus-color));
    --_text-state-color: var(--_text-base-color);
    color: var(--_text-state-color);
    --_text-base-shadow: var(--text-shadow);
    --_text-hover-shadow: var(--text-hover-shadow, var(--_text-base-shadow));
    --_text-focus-shadow: var(--text-focus-shadow, var(--_text-hover-shadow));
    --_text-active-shadow: var(--text-active-shadow, var(--_text-focus-shadow));
    --_text-state-shadow: var(--_text-base-shadow);
    text-shadow: var(--_text-state-shadow);

    --_outline-base-color: var(--outline-color, currentColor);
    --_outline-hover-color: var(
      --outline-hover-color,
      var(--_outline-base-color)
    );
    --_outline-focus-color: var(
      --outline-focus-color,
      var(--_outline-hover-color)
    );
    --_outline-active-color: var(
      --outline-active-color,
      var(--_outline-focus-color)
    );
    --_outline-state-color: var(--_outline-base-color);

    --_outline-base-size: var(--outline-size, 0px);
    --_outline-hover-size: var(--outline-hover-size, calc(5px * var(--s)));
    --_outline-focus-size: var(
      --outline-focus-size,
      var(--_outline-hover-size)
    );
    --_outline-active-size: var(
      --outline-active-size,
      var(--_outline-focus-size)
    );
    --_outline-state-size: var(--_outline-base-size);

    --_outline-base-offset: var(--outline-offset, 0px);
    --_outline-hover-offset: var(--outline-hover-offset, calc(15px * var(--s)));
    --_outline-focus-offset: var(
      --outline-focus-offset,
      var(--_outline-hover-offset)
    );
    --_outline-active-offset: var(
      --outline-active-offset,
      var(--_outline-focus-offset)
    );
    --_outline-state-offset: var(--_outline-base-offset);

    --_outline-base-style: var(--outline-style, none);
    --_outline-hover-style: var(
      --outline-hover-style,
      var(--_outline-base-style)
    );
    --_outline-focus-style: var(--outline-focus-style, solid);
    --_outline-active-style: var(
      --outline-active-style,
      var(--_outline-focus-style)
    );
    --_outline-state-style: var(--_outline-base-style);

    outline: var(--_outline-state-size) var(--_outline-state-style)
      var(--_outline-state-color);
    outline-offset: var(--_outline-state-offset);
  }
  .fantasy-btn-xl,
  .fantasy-btn-2xl,
  .fantasy-btn-3xl {
    --_outline-hover-offset: var(
      --outline-hover-offset,
      calc(-68px * var(--s))
    );
  }
  [class*="fantasy-btn"]:hover {
    --_text-state-color: var(--_text-hover-color);
    --_text-state-shadow: var(--_text-hover-shadow);
    --_outline-state-size: var(--_outline-hover-size);
    --_outline-state-style: var(--_outline-hover-style);
    --_outline-state-color: var(--_outline-hover-color);
    --_outline-state-offset: var(--_outline-hover-offset);
  }
  [class*="fantasy-btn"]:focus {
    --_text-state-color: var(--_text-focus-color);
    --_text-state-shadow: var(--_text-focus-shadow);
    --_outline-state-size: var(--_outline-focus-size);
    --_outline-state-style: var(--_outline-focus-style);
    --_outline-state-color: var(--_outline-focus-color);
    --_outline-state-offset: var(--_outline-focus-offset);
  }
  [class*="fantasy-btn"]:active {
    --_text-state-color: var(--_text-active-color);
    --_text-state-shadow: var(--_text-active-shadow);
    --_outline-state-size: var(--_outline-active-size);
    --_outline-state-style: var(--_outline-active-style);
    --_outline-state-color: var(--_outline-active-color);
    --_outline-state-offset: var(--_outline-active-offset);
  }

  [class*="fantasy-btn"]::after {
    --_border-base-opacity: var(--border-opacity, 1);
    --_border-hover-opacity: var(
      --border-hover-opacity,
      var(--_border-base-opacity)
    );
    --_border-focus-opacity: var(
      --border-focus-opacity,
      var(--_border-hover-opacity)
    );
    --_border-active-opacity: var(
      --border-active-opacity,
      var(--_border-focus-opacity)
    );
    --_border-state-opacity: var(--_border-base-opacity);

    --_border-base-bg: var(--border-bg, currentColor);
    --_border-hover-bg: var(--border-hover-bg, var(--_border-base-bg));
    --_border-focus-bg: var(--border-focus-bg, var(--_border-hover-bg));
    --_border-active-bg: var(--border-active-bg, var(--_border-focus-bg));

    --_border-state-bg: var(--_border-base-bg);
  }
  [class*="fantasy-btn"]:hover::after {
    --_border-state-opacity: var(--_border-hover-opacity);
    --_border-state-bg: var(--_border-hover-bg);
  }
  [class*="fantasy-btn"]:focus::after {
    --_border-state-opacity: var(--_border-focus-opacity);
    --_border-state-bg: var(--_border-focus-bg);
  }
  [class*="fantasy-btn"]:active::after {
    --_border-state-opacity: var(--_border-active-opacity);
    --_border-state-bg: var(--_border-active-bg);
  }

  [class*="fantasy-btn"]::before {
    --_inlay-base-opacity: var(--inlay-opacity, 1);
    --_inlay-hover-opacity: var(
      --inlay-hover-opacity,
      var(--_inlay-base-opacity)
    );
    --_inlay-focus-opacity: var(
      --inlay-focus-opacity,
      var(--_inlay-hover-opacity)
    );
    --_inlay-active-opacity: var(
      --inlay-active-opacity,
      var(--_inlay-focus-opacity)
    );
    --_inlay-state-opacity: var(--_inlay-base-opacity);

    --_inlay-base-bg: var(--inlay-bg, #8888);

    --_inlay-hover-bg: var(--inlay-hover-bg, var(--_inlay-base-bg));
    --_inlay-focus-bg: var(--inlay-focus-bg, var(--_inlay-hover-bg));
    --_inlay-active-bg: var(--inlay-active-bg, var(--_inlay-focus-bg));

    --_inlay-state-bg: var(--_inlay-base-bg);
  }
  [class*="fantasy-btn"]:hover::before {
    --_inlay-state-opacity: var(--_inlay-hover-opacity);
    --_inlay-state-bg: var(--_inlay-hover-bg);
  }
  [class*="fantasy-btn"]:focus::before {
    --_inlay-state-opacity: var(--_inlay-focus-opacity);
    --_inlay-state-bg: var(--_inlay-focus-bg);
  }
  [class*="fantasy-btn"]:active::before {
    --_inlay-state-opacity: var(--_inlay-active-opacity);
    --_inlay-state-bg: var(--_inlay-active-bg);
  }

  [class*="fantasy-btn"]::before,
  [class*="fantasy-btn"]::after {
    content: "";
    position: absolute;
    inset: 0px;
    box-sizing: border-box;
    pointer-events: none;
    z-index: -1;
  }

  [class*="fantasy-btn"]::before {
    background: var(--_inlay-state-bg);
    opacity: var(--_inlay-state-opacity);
    clip-path: polygon(
      calc(50px * var(--s)) calc(82px * var(--s)),
      calc(114px * var(--s)) calc(18px * var(--s)),
      calc(100% - 114px * var(--s)) calc(18px * var(--s)),
      calc(100% - 50px * var(--s)) calc(82px * var(--s)),
      calc(100% - 50px * var(--s)) calc(100% - 82px * var(--s)),
      calc(100% - 114px * var(--s)) calc(100% - 18px * var(--s)),
      calc(114px * var(--s)) calc(100% - 18px * var(--s)),
      calc(50px * var(--s)) calc(100% - 82px * var(--s))
    );
  }

  [class*="fantasy-btn"]::after {
    background: var(--_border-state-bg);
    opacity: var(--_border-state-opacity);
    clip-path: polygon(
      /* home */ calc(37px * var(--s)) calc(44px * var(--s)),
      /* jump union point */ calc(52px * var(--s)) calc(29px * var(--s)),
      calc(61px * var(--s)) calc(18px * var(--s)),
      calc(82.5px * var(--s)) calc(39.5px * var(--s)),
      calc(61px * var(--s)) calc(61px * var(--s)),
      0px 0px,
      calc(77px * var(--s)) 0px,
      calc(90px * var(--s)) calc(13px * var(--s)),
      calc(103px * var(--s)) 0px,

      calc(100% - 103px * var(--s)) 0px,
      calc(100% - 90px * var(--s)) calc(13px * var(--s)),
      calc(100% - 77px * var(--s)) 0px,
      100% 0px,
      calc(100% - 61px * var(--s)) calc(61px * var(--s)),
      calc(100% - 82.5px * var(--s)) calc(39.5px * var(--s)),
      calc(100% - 61px * var(--s)) calc(18px * var(--s)),
      /*... -x union point, jump ...*/ calc(100% - 52px * var(--s))
        calc(29px * var(--s)),
      calc(100% - 37px * var(--s)) calc(44px * var(--s)),
      calc(100% - 24.5px * var(--s)) calc(56.5px * var(--s)),
      calc(100% - 32.5px * var(--s)) calc(64.5px * var(--s)),
      calc(100% - 32.5px * var(--s)) calc(100% - 64.5px * var(--s)),
      calc(100% - 24.5px * var(--s)) calc(100% - 56.5px * var(--s)),
      calc(100% - 37px * var(--s)) calc(100% - 44px * var(--s)),
      calc(100% - 52px * var(--s)) calc(100% - 29px * var(--s)),
      calc(100% - 61px * var(--s)) calc(100% - 18px * var(--s)),
      calc(100% - 82.5px * var(--s)) calc(100% - 39.5px * var(--s)),
      calc(100% - 61px * var(--s)) calc(100% - 61px * var(--s)),
      100% 100%,

      calc(100% - 77px * var(--s)) 100%,
      calc(100% - 90px * var(--s)) calc(100% - 13px * var(--s)),
      calc(100% - 103px * var(--s)) 100%,

      calc(103px * var(--s)) 100%,
      calc(90px * var(--s)) calc(100% - 13px * var(--s)),
      calc(77px * var(--s)) 100%,

      0px 100%,
      calc(61px * var(--s)) calc(100% - 61px * var(--s)),
      calc(82.5px * var(--s)) calc(100% - 39.5px * var(--s)),
      calc(61px * var(--s)) calc(100% - 18px * var(--s)),
      calc(52px * var(--s)) calc(100% - 29px * var(--s)),
      calc(37px * var(--s)) calc(100% - 44px * var(--s)),
      calc(24.5px * var(--s)) calc(100% - 56.5px * var(--s)),
      calc(32.5px * var(--s)) calc(100% - 64.5px * var(--s)),
      calc(32.5px * var(--s)) calc(64.5px * var(--s)),
      calc(24.5px * var(--s)) calc(56.5px * var(--s)),
      /* first point in the path, time to CCW inner path */
        calc(37px * var(--s)) calc(44px * var(--s)),
      /* w = ~8 */ calc(45px * var(--s)) calc(52px * var(--s)),
      calc(41px * var(--s)) calc(56px * var(--s)),
      calc(50px * var(--s)) calc(66px * var(--s)),
      calc(40.5px * var(--s)) calc(75.5px * var(--s)),
      calc(40.5px * var(--s)) calc(100% - 75.5px * var(--s)),
      calc(50px * var(--s)) calc(100% - 66px * var(--s)),
      calc(41px * var(--s)) calc(100% - 56px * var(--s)),
      calc(45px * var(--s)) calc(100% - 52px * var(--s)),
      calc(37px * var(--s)) calc(100% - 44px * var(--s)),
      calc(52px * var(--s)) calc(100% - 29px * var(--s)),
      calc(59.5px * var(--s)) calc(100% - 36.5px * var(--s)),
      calc(61px * var(--s)) calc(100% - 35px * var(--s)),
      calc(65.5px * var(--s)) calc(100% - 39.5px * var(--s)),
      calc(61px * var(--s)) calc(100% - 44px * var(--s)),
      calc(25px * var(--s)) calc(100% - 8px * var(--s)),
      calc(72.5px * var(--s)) calc(100% - 8px * var(--s)),
      calc(90px * var(--s)) calc(100% - 25.5px * var(--s)),
      calc(107.5px * var(--s)) calc(100% - 8px * var(--s)),
      calc(100% - 107.5px * var(--s)) calc(100% - 8px * var(--s)),
      calc(100% - 90px * var(--s)) calc(100% - 25.5px * var(--s)),
      calc(100% - 72.5px * var(--s)) calc(100% - 8px * var(--s)),
      calc(100% - 25px * var(--s)) calc(100% - 8px * var(--s)),
      calc(100% - 61px * var(--s)) calc(100% - 44px * var(--s)),
      calc(100% - 65.5px * var(--s)) calc(100% - 39.5px * var(--s)),
      calc(100% - 61px * var(--s)) calc(100% - 35px * var(--s)),
      calc(100% - 59.5px * var(--s)) calc(100% - 36.5px * var(--s)),
      calc(100% - 52px * var(--s)) calc(100% - 29px * var(--s)),
      calc(100% - 37px * var(--s)) calc(100% - 44px * var(--s)),
      calc(100% - 45px * var(--s)) calc(100% - 52px * var(--s)),
      calc(100% - 41px * var(--s)) calc(100% - 56px * var(--s)),
      calc(100% - 50px * var(--s)) calc(100% - 66px * var(--s)),
      calc(100% - 40.5px * var(--s)) calc(100% - 75.5px * var(--s)),
      calc(100% - 40.5px * var(--s)) calc(75.5px * var(--s)),
      calc(100% - 50px * var(--s)) calc(66px * var(--s)),
      calc(100% - 41px * var(--s)) calc(56px * var(--s)),
      calc(100% - 45px * var(--s)) calc(52px * var(--s)),
      calc(100% - 37px * var(--s)) calc(44px * var(--s)),
      calc(100% - 52px * var(--s)) calc(29px * var(--s)),
      calc(100% - 59.5px * var(--s)) calc(36.5px * var(--s)),
      calc(100% - 61px * var(--s)) calc(35px * var(--s)),
      calc(100% - 65.5px * var(--s)) calc(39.5px * var(--s)),
      calc(100% - 61px * var(--s)) calc(44px * var(--s)),
      calc(100% - 25px * var(--s)) calc(8px * var(--s)),
      calc(100% - 72.5px * var(--s)) calc(8px * var(--s)),
      calc(100% - 90px * var(--s)) calc(25.5px * var(--s)),
      calc(100% - 107.5px * var(--s)) calc(8px * var(--s)),
      calc(107.5px * var(--s)) calc(8px * var(--s)),
      calc(90px * var(--s)) calc(25.5px * var(--s)),
      calc(72.5px * var(--s)) calc(8px * var(--s)),
      calc(25px * var(--s)) calc(8px * var(--s)),
      calc(61px * var(--s)) calc(44px * var(--s)),
      calc(65.5px * var(--s)) calc(39.5px * var(--s)),
      calc(61px * var(--s)) calc(35px * var(--s)),
      calc(59.5px * var(--s)) calc(36.5px * var(--s)),
      /* union point */ calc(52px * var(--s)) calc(29px * var(--s)),
      /* jump home */ calc(37px * var(--s)) calc(44px * var(--s))
    );
  }
}

.fantasy-text,
h1,
h2,
h3 {
  --_text-base-color: var(--text-color, #a08b5b);
  --_text-hover-color: var(--text-hover-color, var(--_text-base-color));
  --_text-focus-color: var(--text-focus-color, var(--_text-hover-color));
  --_text-active-color: var(--text-active-color, var(--_text-focus-color));
  --_text-state-color: var(--_text-base-color);
  color: var(--_text-state-color);
  --_text-base-shadow: var(
    --text-shadow,
    calc(1.5px * var(--scale, 1) / 4.5) calc(-1.5px * var(--scale, 1) / 4.5)
      calc(1.5px * var(--scale, 1) / 4.5) #fffcf2,
    calc(-1.5px * var(--scale, 1) / 4.5) calc(1.5px * var(--scale, 1) / 4.5)
      calc(1.5px * var(--scale, 1) / 4.5) #160500
  );
  --_text-hover-shadow: var(--_text-base-shadow);
  --_text-focus-shadow: var(--_text-hover-shadow);
  --_text-active-shadow: var(--_text-focus-shadow);
  --_text-state-shadow: var(--_text-base-shadow);
  text-shadow: var(--_text-state-shadow);
}

.fantasy-text:hover,
h1:hover,
h2:hover {
  --_text-state-color: var(--_text-hover-color);
  --_text-state-shadow: var(--_text-hover-shadow);
}

.fantasy-text:focus,
h1:focus,
h2:focus {
  --_text-state-color: var(--_text-focus-color);
  --_text-state-shadow: var(--_text-focus-shadow);
}

.fantasy-text:active,
h1:active,
h2:active,
h3:active {
  --_text-state-color: var(--_text-active-color);
  --_text-state-shadow: var(--_text-active-shadow);
}

h3 {
  font-family: OldLondon;
  font-size: 2.5em;
  margin: 0px;
}

ul.rb {
  width: 70%;
  margin: auto;
}

ul p {
  margin: 0;
}

ul.rb li {
  list-style: none;
  margin: auto;
  min-height: 50px;
  border-left: 1px dashed #fff;
  padding: 0 0 50px 60px;
  position: relative;
}

ul.rb li:last-child {
  border-left: 0;
}

.qi1::before {
  background-image: url("assets/path-shape/r1.png");
}

.l1::before {
  background-image: url("assets/path-shape/c1.png");
}

.qi2::before {
  background-image: url("assets/path-shape/r2.png");
}

.eg2::before {
  background-image: url("assets/path-shape/l2.png");
}

.tm3::before {
  background-image: url("assets/path-shape/h3.png");
}

.cv3::before {
  background-image: url("assets/path-shape/t3.png");
}

.l3::before {
  background-image: url("assets/path-shape/c3.png");
}

.qi4::before {
  background-image: url("assets/path-shape/r4.png");
}

.eg4::before {
  background-image: url("assets/path-shape/l4.png");
}

.tm5::before {
  background-image: url("assets/path-shape/h5.png");
}

.cv5::before {
  background-image: url("assets/path-shape/t5.png");
}

.l5::before {
  background-image: url("assets/path-shape/c5.png");
}

.qi6::before {
  background-image: url("assets/path-shape/r6.png");
}

.eg6::before {
  background-image: url("assets/path-shape/l6.png");
}

.tm7::before {
  background-image: url("assets/path-shape/h7.png");
}

.eg7::before {
  background-image: url("assets/path-shape/e7.png");
}

.qi8::before {
  background-image: url("assets/path-shape/r8.png");
}

.cv8::before {
  background-image: url("assets/path-shape/t8.png");
}

.j8::before {
  background-image: url("assets/path-shape/e8.png");
}

.tm9::before {
  background-image: url("assets/path-shape/h9.png");
}

.cv9::before {
  background-image: url("assets/path-shape/t9.png");
}

.l9::before {
  background-image: url("assets/path-shape/c9.png");
}

.qi10::before {
  background-image: url("assets/path-shape/r10.png");
}

.eg10::before {
  background-image: url("assets/path-shape/l10.png");
}

.tm11::before {
  background-image: url("assets/path-shape/h11.png");
}

.cv11::before {
  background-image: url("assets/path-shape/t11.png");
}

.l12::before {
  background-image: url("assets/path-shape/c12.png");
}

.eg12::before {
  background-image: url("assets/path-shape/c12.png");
}

ul a {
  color: #fff;
  text-decoration: none;
}

ul .disabled {
  opacity: 0.5;
}

ul.rb li::before {
  position: absolute;
  left: -30px;
  top: 0px;
  content: " ";
  background-size: 100%;
  height: 60px;
  width: 60px;
}

/* texte et traduction (exemple la chanson de Rolland) */
.tableTrad {
  width: 100%;
  border-collapse: collapse;
  background-color: rgba(217, 240, 255, 0.301);
  margin-bottom: 50px;
}

.tableTrad td {
  padding: 5px;
}
.tableTrad tr {
  height: 45px;
}
.line-number {
  font-weight: bold;
  color: grey;
  width: 50px;
}
.original,
.translation {
  width: 45%;
}


.containerParch{
  position: relative;
}



.parchemin.hidden {
  transform: translateX(10%);
}

.toggle-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #c0a16b;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s ease-in-out;
}

.toggle-button:hover {
  background: #a48456;
}




/*book*/

.contBook {
  margin: 0;
  display: flex;
  overflow: hidden;
  color: hsl(180 68% 5%);
  /* perspective: 1000px; <-- Commentée ou supprimée */
}

.book {
  margin: auto;
  position: relative;
  display: flex;
  pointer-events: none;
  transform-style: preserve-3d;
  transition: translate 1s;
  translate: calc(min(var(--c), 1) * 50%) 0%;
  /* rotate: 1 0 0 30deg; <-- Retirée */
  width: 50cqmin;
}

.page {
  --thickness: 4;
  flex: none;
  display: flex;
  width: 100%;
  font-size: 2cqmin;
  pointer-events: all;
  user-select: none;
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform 1s,
    rotate 1s ease-in
      calc((min(var(--i), var(--c)) - max(var(--i), var(--c))) * 50ms);
  translate: calc(var(--i) * -100%) 0px 0px;
  transform: translateZ(
    calc((var(--c) - var(--i) - 0.5) * calc(var(--thickness) * 0.23cqmin))
  );
  rotate: 0 1 0 calc(clamp(0, var(--c) - var(--i), 1) * -180deg);
}

.front,
.back {
  position: relative;
  flex: none;
  width: 100%;
  backface-visibility: hidden;
  overflow: hidden;
  background-color: #fff;
  translate: 0px;
  padding: 0;
}

.back {
  translate: -100% 0;
  rotate: 0 1 0 180deg;
}

.book {
  counter-reset: page -1;
}

.page {
  box-shadow: 0em 0.5em 1em -0.2em #00000020;
}

.front img,
.back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover {
  background: none;
}

#download {
  background-color: #ffffff;
  color: #000000;
  border: 2px solid #000000;
  border-radius: 5px;
  padding: 10px;
  width: 20%;
  margin: auto;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 100px;
}