@import url("./tokens.css?v=35");

html.is-returning-from-tab .general-tool-button {
  animation: none !important;
  transition: none !important;
}

.general-page {
  --general-page-edge-space: clamp(1.05rem, 2.8vw, 2.1rem);
  --general-frame-padding-y: clamp(0.3rem, 0.4vw, 0.45rem);
  --general-frame-padding-x: clamp(0.5rem, 0.8vw, 0.85rem);
  --general-button-gap: clamp(0.6rem, 1.65vw, 2.5rem);
  --general-title-button-gap: max(
    0.2rem,
    calc(var(--general-button-gap) - 0.6rem)
  );
  --general-heading-height: calc(var(--font-size-menu) * 1.1 + 0.4rem);
  --general-divider-button-safety: clamp(0.35rem, 0.65vw, 0.65rem);
  --general-title-top-space: clamp(0.35rem, 0.6vw, 0.65rem);
  --general-frame-space: var(--page-frame-gap);
  --general-button-height: calc(
    var(--menu-frame-height) - 6px - var(--general-frame-padding-y) -
      var(--general-frame-padding-y)
  );
  width: 100%;
  padding-top: 0;
  padding-bottom: calc(var(--general-page-edge-space) * 2);
}

.general-tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--general-button-gap);
  width: 100%;
  min-height: var(--menu-frame-height);
  margin: 0 auto;
  padding: var(--general-frame-padding-y) var(--general-frame-padding-x);
}

.general-resources {
  display: block;
  min-width: 0;
  margin: 0 auto;
  padding: var(--general-title-top-space)
    var(--general-frame-padding-x) var(--general-frame-space);
  overflow: hidden;
  border: var(--frame-border-width) solid var(--frame-border-color);
  border-radius: var(--frame-radius);
  background: #fff;
  box-shadow:
    0 0.55rem 0.8rem rgba(39, 54, 36, 0.14),
    inset 0 0.08rem 0 rgba(255, 255, 255, 0.82);
}

.general-resources > .general-tools {
  min-height: 0;
  padding: 0;
}

.general-resources__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: var(--general-heading-height);
  padding: 0 1rem;
}

.general-resources__header::after,
.general-writing__header::after,
.general-evaluations__header::after {
  position: absolute;
  right: 1rem;
  bottom: calc(0px - var(--general-title-top-space));
  left: 1rem;
  height: clamp(0.14rem, 0.25vw, 0.21rem);
  content: "";
  border-top: 1px solid rgba(var(--color-brand-deep-rgb), 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(var(--color-brand-deep-rgb), 0.24),
    rgba(var(--color-brand-rgb), 0.1) 46%,
    rgba(255, 255, 255, 0.82)
  );
  box-shadow:
    inset 0 0.09rem 0 rgba(var(--color-brand-dark-rgb), 0.24),
    inset 0 -0.1rem 0 rgba(255, 255, 255, 0.96),
    0 0.08rem 0 rgba(var(--color-brand-deep-rgb), 0.12);
}

.general-resources__header h2 {
  margin: 0;
  color: var(--color-brand);
  font-size: var(--font-size-menu);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-align: center;
}

.general-resources__header + .general-tools {
  margin-top: calc(
    var(--general-title-button-gap) + var(--general-divider-button-safety) +
      var(--general-title-top-space)
  );
}

.general-writing {
  --general-writing-row-gap: var(--general-button-gap);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: stretch;
  row-gap: calc(
    var(--general-title-button-gap) + var(--general-divider-button-safety) +
      var(--general-title-top-space)
  );
  min-width: 0;
  margin-top: 0;
  padding: var(--general-title-top-space)
    var(--general-frame-padding-x)
    calc(var(--general-button-gap) + 0.3rem);
  overflow: hidden;
  border: var(--frame-border-width) solid var(--frame-border-color);
  border-radius: var(--frame-radius);
  background: #fff;
  box-shadow:
    0 0.55rem 0.8rem rgba(39, 54, 36, 0.14),
    inset 0 0.08rem 0 rgba(255, 255, 255, 0.82);
}

.general-writing__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-row: 1;
  min-width: 0;
  min-height: var(--general-heading-height);
  padding: 0 1rem;
  overflow: visible;
}

.general-writing__header h2 {
  margin: 0;
  color: var(--color-brand);
  font-size: var(--font-size-menu);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-align: center;
}

.general-writing__buttons {
  display: grid;
  grid-row: 2;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(2, var(--general-button-height));
  align-items: center;
  gap: var(--general-writing-row-gap) var(--general-button-gap);
  min-width: 0;
  padding: 0;
}

.general-writing__button {
  width: 100%;
  height: var(--general-button-height);
  min-height: var(--general-button-height);
  border-radius: clamp(0.55rem, 1vw, 0.8rem);
  font-size: clamp(1.15rem, 1.35vw, var(--font-size-menu));
}

@media (min-width: 621px) {
  html[data-level="cm2"] .general-writing__buttons {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(2, var(--general-button-height));
  }

  html[data-level="cm2"] .general-writing__button {
    padding-inline: 0.2rem;
    font-size: var(--font-size-menu);
  }
}

.general-evaluations {
  --general-evaluations-row-gap: var(--general-button-gap);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: stretch;
  row-gap: calc(
    var(--general-title-button-gap) + var(--general-divider-button-safety) +
      var(--general-title-top-space)
  );
  min-width: 0;
  margin-top: var(--general-frame-space);
  margin-bottom: var(--general-frame-space);
  padding: var(--general-title-top-space)
    var(--general-frame-padding-x)
    calc(var(--general-button-gap) + 0.3rem);
  overflow: hidden;
  border: var(--frame-border-width) solid var(--frame-border-color);
  border-radius: var(--frame-radius);
  background: #fff;
  box-shadow:
    0 0.55rem 0.8rem rgba(39, 54, 36, 0.14),
    inset 0 0.08rem 0 rgba(255, 255, 255, 0.82);
}

.general-evaluations__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-row: 1;
  min-width: 0;
  min-height: var(--general-heading-height);
  padding: 0 1rem;
  overflow: visible;
}

.general-evaluations__header h2 {
  margin: 0;
  color: var(--color-brand);
  font-size: var(--font-size-menu);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-align: center;
}

.general-evaluations__buttons {
  display: grid;
  grid-row: 2;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: var(--general-button-height);
  align-items: center;
  gap: var(--general-evaluations-row-gap) var(--general-button-gap);
  min-width: 0;
  padding: 0;
}

.general-evaluations__button {
  width: 100%;
  height: var(--general-button-height);
  min-height: var(--general-button-height);
  border-radius: clamp(0.55rem, 1vw, 0.8rem);
  font-size: clamp(1.15rem, 1.35vw, var(--font-size-menu));
}

.general-evaluation-modal {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: start center;
  --general-evaluation-modal-top-offset: calc(
    clamp(0.875rem, 2.1vw, 2.1rem) + var(--menu-frame-height) +
      clamp(1.05rem, 2.8vw, 2.1rem)
  );
  --general-evaluation-modal-side-padding: clamp(1rem, 3vw, 3rem);
  --general-evaluation-modal-bottom-padding: clamp(1rem, 3vw, 3rem);
  --general-evaluation-modal-title-font-size: clamp(0.72rem, 0.95vw, 1rem);
  --general-evaluation-button-gap: clamp(0.6rem, 1.65vw, 2.5rem);
  --general-evaluation-modal-title-height: calc(
    3 * var(--general-evaluation-modal-title-font-size)
  );
  padding: var(--general-evaluation-modal-top-offset)
    var(--general-evaluation-modal-side-padding)
    var(--general-evaluation-modal-bottom-padding);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(19, 15, 8, 0.78);
  backdrop-filter: blur(0.25rem);
  transition:
    opacity 300ms var(--ease-buttery),
    visibility 0s linear 300ms;
}

.general-evaluation-modal[hidden] {
  display: none;
}

.general-evaluation-modal.is-open,
.general-evaluation-modal.is-closing {
  visibility: visible;
  pointer-events: auto;
}

.general-evaluation-modal.is-open {
  opacity: 1;
  transition-delay: 0s;
}

.general-evaluation-modal__dialog {
  position: relative;
  display: grid;
  grid-template-columns: minmax(
    0,
    var(--general-evaluation-modal-width, 100%)
  );
  grid-template-rows:
    var(--general-evaluation-modal-title-height)
    minmax(0, var(--general-evaluation-modal-height, auto));
  width: var(--general-evaluation-modal-width, 100%);
  height: calc(
    var(--general-evaluation-modal-title-height) +
      var(--general-evaluation-modal-height, auto)
  );
  transform: translateY(1rem) scale(0.94);
  transition: transform 360ms var(--ease-buttery);
}

.general-evaluation-modal.is-open .general-evaluation-modal__dialog {
  transform: translateY(0) scale(1);
}

.general-evaluation-modal.is-mots-d-selector-open
  .general-evaluation-modal__dialog::after {
  position: absolute;
  z-index: 5;
  inset: var(--general-evaluation-modal-title-height) 0 0;
  content: "";
  background: rgba(19, 15, 8, 0.72);
  backdrop-filter: blur(0.25rem);
  -webkit-backdrop-filter: blur(0.25rem);
  pointer-events: none;
}

.general-evaluation-modal__stage {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  place-items: start stretch;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--frame-radius);
  background: var(--color-viewer);
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.45);
}

.general-evaluation-modal.is-video .general-evaluation-modal__stage {
  place-items: center;
  background: #000;
}

.general-evaluation-modal__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.general-evaluation-modal__video[hidden] {
  display: none;
}

.general-evaluation-modal__video-preloader {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}

.general-evaluation-modal__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--general-evaluation-button-gap);
  width: 100%;
  padding: var(--menu-frame-height) clamp(1rem, 3vw, 3rem)
    clamp(1rem, 3vw, 3rem);
}

.general-evaluation-modal__choices--single-column {
  grid-template-columns: minmax(0, 1fr);
}

.general-poetry-board {
  --general-poetry-gap: clamp(0.35rem, 1.1vw, 1rem);
  display: grid;
  grid-template-columns: minmax(9rem, 0.72fr) minmax(0, 2fr);
  gap: var(--general-poetry-gap);
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(0.65rem, 1.7vw, 1.45rem);
  box-sizing: border-box;
  background: #fff;
}

.general-poetry-section-list {
  display: grid;
  grid-template-rows: repeat(7, minmax(0, 1fr));
  gap: var(--general-poetry-gap);
  min-height: 0;
}

.general-poetry-section-button,
.general-poetry-poem-button {
  --general-button-border: var(--poetry-border);
  width: 100%;
  min-width: 0;
  color: var(--poetry-text);
  border-color: var(--poetry-border);
  background: var(--poetry-fill);
  box-shadow:
    0 0.22rem 0 var(--poetry-deep),
    0 0.7rem 0.875rem var(--poetry-shadow),
    inset 0 0.11rem 0 rgba(255, 255, 255, 0.5),
    inset 0 -0.5rem 0.7rem rgba(0, 0, 0, 0.1);
  text-shadow: var(--poetry-text-shadow, none);
}

.general-poetry-section-button {
  height: auto;
  min-height: 0;
  padding: 0.2rem 0.45rem;
  border-radius: clamp(0.55rem, 1vw, 0.8rem);
  font-size: clamp(0.82rem, 1.2vw, 1.35rem);
  line-height: 1.05;
}

.general-poetry-poems {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-items: start;
  align-content: center;
  place-items: center;
  gap: var(--general-poetry-gap);
  min-width: 0;
  min-height: 0;
  padding: clamp(0.55rem, 1.35vw, 1.15rem)
    clamp(1rem, 2.4vw, 2.25rem);
  overflow: auto;
  border: 3px solid #989898;
  border-radius: var(--frame-radius);
  background: #ededed;
  box-shadow:
    inset 0 0.08rem 0 rgba(255, 255, 255, 0.82),
    0 0.45rem 0.75rem rgba(39, 54, 36, 0.12);
}

.general-poetry-board[data-section] .general-poetry-poems {
  align-items: stretch;
  align-content: start;
  place-items: stretch;
  border-color: var(--poetry-deep);
  background: #fff;
}

.general-poetry-empty {
  margin: 0;
  color: #5d5d5d;
  font-size: var(--font-size-menu);
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}

.general-poetry-poem-button {
  padding-inline: 0.55rem;
  border-radius: clamp(0.55rem, 1vw, 0.8rem);
  line-height: 1.08;
}

.general-poetry-section-button--rose,
.general-poetry-board[data-section="rose"] {
  --poetry-fill: #fdbbfd;
  --poetry-border: #d78fd8;
  --poetry-deep: #c77bc8;
  --poetry-shadow: rgba(112, 45, 113, 0.19);
  --poetry-text: #451344;
}

.general-poetry-section-button--rouge,
.general-poetry-board[data-section="rouge"] {
  --poetry-fill: #ffcaca;
  --poetry-border: #db7d7d;
  --poetry-deep: #bd5656;
  --poetry-shadow: rgba(126, 39, 39, 0.2);
  --poetry-text: #5a1e1e;
}

.general-poetry-section-button--jaune,
.general-poetry-board[data-section="jaune"] {
  --poetry-fill: #ffffcc;
  --poetry-border: #d1d17f;
  --poetry-deep: #b9b95d;
  --poetry-shadow: rgba(80, 80, 5, 0.19);
  --poetry-text: #3d3d14;
}

.general-poetry-section-button--bleue,
.general-poetry-board[data-section="bleue"] {
  --poetry-fill: #b7d9f3;
  --poetry-border: #7fb2d8;
  --poetry-deep: #5d91bb;
  --poetry-shadow: rgba(45, 80, 112, 0.19);
  --poetry-text: #263b4d;
}

.general-poetry-section-button--verte,
.general-poetry-board[data-section="verte"] {
  --poetry-fill: #86dca8;
  --poetry-border: #59bf82;
  --poetry-deep: #3f9d68;
  --poetry-shadow: rgba(0, 80, 42, 0.14);
  --poetry-text: #0b4f2a;
  --poetry-text-shadow: 0 0.08rem 0 rgba(255, 255, 255, 0.3);
}

.general-poetry-section-button--violette,
.general-poetry-board[data-section="violette"] {
  --poetry-fill: #d6b8f0;
  --poetry-border: #a575cf;
  --poetry-deep: #8652b8;
  --poetry-shadow: rgba(91, 49, 125, 0.2);
  --poetry-text: #39204f;
}

.general-poetry-section-button--noire,
.general-poetry-board[data-section="noire"] {
  --poetry-fill: #414149;
  --poetry-border: #1d1d22;
  --poetry-deep: #08080a;
  --poetry-shadow: rgba(0, 0, 0, 0.28);
  --poetry-text: #e6e6e6;
  --poetry-text-shadow: 0 0.08rem 0 rgba(0, 0, 0, 0.55);
}

.general-evaluation-modal .general-evaluation-modal__button {
  width: 100%;
  height: calc(
    var(--menu-frame-height) - 6px - clamp(0.3rem, 0.4vw, 0.45rem) -
      clamp(0.3rem, 0.4vw, 0.45rem)
  );
  min-height: calc(
    var(--menu-frame-height) - 6px - clamp(0.3rem, 0.4vw, 0.45rem) -
      clamp(0.3rem, 0.4vw, 0.45rem)
  );
  font-size: clamp(1.15rem, 1.35vw, 1.75rem);
}

.general-evaluation-modal__label {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: flex-start;
  width: max-content;
  max-width: 100%;
  height: var(--general-evaluation-modal-title-height);
  margin: 0;
  padding: 0 0.75rem;
  overflow: hidden;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: 0;
  border-radius: 0.45rem 0.45rem 0 0;
  background: rgba(63, 58, 52, 0.94);
  box-shadow: inset 0 0.08rem 0 rgba(255, 255, 255, 0.12);
  font-size: var(--general-evaluation-modal-title-font-size);
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1.05;
  text-align: left;
  text-shadow: 0 0.08rem 0 rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.general-evaluation-modal__close {
  position: absolute;
  z-index: 1;
  top: calc(var(--general-evaluation-modal-title-height) + 0.75rem);
  right: 0.75rem;
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 50%;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.62);
  font-family: Arial, sans-serif;
  font-size: var(--font-size-menu);
  line-height: 1;
  transition: transform 180ms var(--ease-buttery);
}

.general-evaluation-modal__close:hover {
  transform: scale(1.08);
}

.general-evaluation-modal__close:focus-visible {
  outline: 3px solid rgba(255, 210, 91, 0.95);
  outline-offset: 3px;
}

.general-tool-button {
  position: relative;
  isolation: isolate;
  display: grid;
  min-width: 0;
  height: var(--general-button-height);
  min-height: var(--general-button-height);
  place-items: center;
  padding: 0.15rem 0.75rem;
  overflow: hidden;
  color: #111;
  border: 2px solid var(--general-button-border);
  border-radius: clamp(0.8rem, 1.4vw, 1.05rem);
  outline: none;
  cursor: pointer;
  text-decoration: none;
  font-size: var(--font-size-menu);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0.08rem 0 rgba(255, 255, 255, 0.32);
  transform: translateY(0) scale(1);
  transition:
    transform var(--duration-buttery) var(--ease-buttery),
    box-shadow var(--duration-buttery) var(--ease-buttery),
    filter var(--duration-buttery) var(--ease-buttery);
  -webkit-tap-highlight-color: transparent;
}

.general-tool-button::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: 0.7;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255, 255, 255, 0.12) 31%,
    transparent 56%
  );
  pointer-events: none;
}

.general-tool-button--yellow {
  --general-button-border: #d1d17f;
  background: #ffffcc;
  box-shadow:
    0 0.22rem 0 #b9b95d,
    0 0.7rem 0.875rem rgba(80, 80, 5, 0.19),
    inset 0 0.11rem 0 rgba(255, 255, 255, 0.78),
    inset 0 -0.5rem 0.7rem rgba(159, 159, 54, 0.17);
}

.general-tool-button--green {
  --general-button-border: #007d3c;
  color: #fff;
  background: #00a746;
  text-shadow: 0 0.08rem 0 rgba(0, 70, 32, 0.28);
  box-shadow:
    0 0.22rem 0 #007d3c,
    0 0.7rem 0.875rem rgba(0, 80, 42, 0.19),
    inset 0 0.11rem 0 rgba(255, 255, 255, 0.38),
    inset 0 -0.5rem 0.7rem rgba(0, 93, 45, 0.2);
}

.general-tool-button--violet {
  --general-button-border: var(--color-brand-deep);
  color: #fff;
  background: var(--color-brand);
  text-shadow: 0 0.08rem 0 rgba(var(--color-brand-dark-rgb), 0.35);
  box-shadow:
    0 0.22rem 0 var(--color-brand-deep),
    0 0.7rem 0.875rem rgba(var(--color-brand-rgb), 0.19),
    inset 0 0.11rem 0 rgba(255, 255, 255, 0.38),
    inset 0 -0.5rem 0.7rem rgba(var(--color-brand-deep-rgb), 0.2);
}

.general-tool-button--blue {
  --general-button-border: #9ebbd3;
  background: #d9e8f5;
  box-shadow:
    0 0.22rem 0 #9ebbd3,
    0 0.7rem 0.875rem rgba(45, 80, 112, 0.19),
    inset 0 0.11rem 0 rgba(255, 255, 255, 0.78),
    inset 0 -0.5rem 0.7rem rgba(88, 131, 166, 0.17);
}

.general-tool-button--orange {
  --general-button-border: var(--color-orange-border);
  background: #ffb21e;
  box-shadow:
    0 0.22rem 0 var(--color-orange-deep),
    0 0.7rem 0.875rem rgba(90, 48, 5, 0.19),
    inset 0 0.11rem 0 rgba(255, 255, 255, 0.78),
    inset 0 -0.5rem 0.7rem rgba(139, 67, 0, 0.22);
}

.general-tool-button--red {
  --general-button-border: #b82e0b;
  color: #fff;
  background: #e84118;
  text-shadow: 0 0.08rem 0 rgba(112, 18, 0, 0.32);
  box-shadow:
    0 0.22rem 0 #b82e0b,
    0 0.7rem 0.875rem rgba(112, 18, 0, 0.19),
    inset 0 0.11rem 0 rgba(255, 255, 255, 0.38),
    inset 0 -0.5rem 0.7rem rgba(112, 18, 0, 0.2);
}

.general-tool-button:hover {
  filter: saturate(1.08) brightness(1.04);
  transform: translateY(-0.27rem) scale(1.025);
}

.general-tool-button:focus-visible {
  outline: 3px solid rgba(255, 190, 42, 0.8);
  outline-offset: 3px;
}

.general-tool-button:active {
  box-shadow:
    0 0.05rem 0 var(--general-button-border),
    0 0.17rem 0.32rem rgba(39, 54, 36, 0.24),
    inset 0 0.17rem 0.32rem rgba(0, 0, 0, 0.16),
    inset 0 -0.06rem 0.15rem rgba(255, 255, 255, 0.3);
  transform: translateY(0.27rem) scale(0.96);
  transition-duration: 90ms;
}

.general-poetry-section-button,
.general-poetry-poem-button {
  color: var(--poetry-text);
}

@media (max-width: 620px) {
  .general-page {
    --general-frame-padding-y: 0.75rem;
    --general-frame-padding-x: 0.85rem;
    --general-button-gap: 0.8rem;
  }

  .general-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--general-button-gap);
  }

  .general-tool-button {
    height: clamp(3.25rem, 12vw, 4.1rem);
    min-height: clamp(3.25rem, 12vw, 4.1rem);
    padding-inline: 0.35rem;
    font-size: clamp(1.1rem, 5vw, 1.75rem);
  }

  .general-writing {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    margin-top: 0;
  }

  .general-writing__header {
    grid-row: 1;
    padding: 0 1rem;
  }

  .general-writing__buttons {
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 0.8rem;
    padding: 0;
  }

  .general-writing__button {
    height: clamp(3.25rem, 12vw, 4.1rem);
    min-height: clamp(3.25rem, 12vw, 4.1rem);
    font-size: clamp(1.1rem, 5vw, 1.75rem);
  }

  .general-evaluations {
    row-gap: var(--general-button-gap);
  }

  .general-evaluations__header {
    grid-row: 1;
    padding: 0 1rem;
  }

  .general-evaluations__buttons {
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 0.8rem;
    padding: 0;
  }

  .general-evaluations__button {
    height: clamp(3.25rem, 12vw, 4.1rem);
    min-height: clamp(3.25rem, 12vw, 4.1rem);
    font-size: clamp(1.1rem, 5vw, 1.75rem);
  }

  .general-evaluation-modal__choices {
    grid-template-columns: 1fr;
    gap: var(--general-evaluation-button-gap);
    padding: var(--menu-frame-height) 1rem 1rem;
  }

  .general-evaluation-modal__choices--two-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .general-evaluation-modal .general-evaluation-modal__button {
    height: clamp(3.25rem, 12vw, 4.1rem);
    min-height: clamp(3.25rem, 12vw, 4.1rem);
    font-size: clamp(1.1rem, 5vw, 1.75rem);
  }

  .general-poetry-board {
    grid-template-columns: minmax(6.8rem, 0.8fr) minmax(0, 1.8fr);
    gap: 0.55rem;
    padding: 0.55rem;
  }

  .general-poetry-section-list,
  .general-poetry-poems {
    gap: 0.55rem;
  }

  .general-poetry-section-button {
    padding-inline: 0.2rem;
    font-size: clamp(0.62rem, 2.45vw, 1rem);
  }

  .general-poetry-poems {
    padding: 0.55rem 1rem;
  }

  .general-poetry-poem-button {
    padding-inline: 0.25rem;
  }
}

@media (max-width: 340px) {
  .general-tools {
    gap: 0.6rem;
  }
}

@media (min-width: 800px) and (max-height: 850px) {
  .general-page {
    --general-page-edge-space: clamp(0.6rem, 1.7vh, 1.05rem);
  }

  .general-writing {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Parcours Mots D affiché dans la même fenêtre que les évaluations. */
.general-evaluation-modal.is-mots-d {
  /* Le parcours conserve la même enveloppe que « Lectures courtes ». */
}

.general-evaluation-modal.is-mots-d .general-evaluation-modal__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.general-evaluation-modal.is-mots-d .general-evaluation-modal__stage {
  overflow: hidden;
  background: var(--color-brand-surface);
}

.general-evaluation-modal.is-mots-d-selector-open
  .general-evaluation-modal__stage {
  border-color: transparent !important;
}

.general-mots-d__layout {
  --general-mots-d-selector-font-size: clamp(0.994rem, 1.352vw, 1.656rem);
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin-inline: auto;
  min-width: 0;
  min-height: 0;
  background: var(--color-brand-surface);
}

.general-mots-d__board-region {
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.general-mots-d__board {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  --general-mots-d-path-yellow: #ecef89;
  --general-mots-d-path-centerline: #fff;
  background: var(--color-brand-surface);
}

.general-mots-d__canvas {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.general-mots-d__confetti {
  position: absolute;
  z-index: 30;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.general-mots-d__confetti-piece {
  position: absolute;
  top: -1rem;
  left: var(--confetti-left);
  width: var(--confetti-width);
  height: var(--confetti-height);
  border-radius: 0.12rem;
  background: var(--confetti-color);
  opacity: 0;
  transform: translate3d(0, -1rem, 0) rotate(0deg);
  animation: general-mots-d-confetti-fall var(--confetti-duration) ease-out
    var(--confetti-delay) forwards;
}

@keyframes general-mots-d-confetti-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, -1rem, 0) rotate(0deg);
  }

  10% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--confetti-drift), 110vh, 0)
      rotate(var(--confetti-rotation));
  }
}

@media (prefers-reduced-motion: reduce) {
  .general-mots-d__confetti-piece {
    animation: none;
  }
}

.general-mots-d__path {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.general-mots-d__path-main,
.general-mots-d__path-friday {
  fill: none;
  stroke: var(--general-mots-d-path-yellow);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 34.59375;
  filter: drop-shadow(0 0 0.45rem rgba(236, 239, 137, 0.24));
}

.general-mots-d__path-game {
  fill: none;
  stroke: var(--general-mots-d-path-yellow);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 9;
}

.general-mots-d__path-main.general-mots-d__path-centerline,
.general-mots-d__path-friday.general-mots-d__path-centerline {
  stroke: var(--general-mots-d-path-centerline);
  stroke-width: 3.459375;
  stroke-dasharray: 0.1 10.378125;
  filter: none;
}

.general-mots-d__path-game.general-mots-d__path-centerline {
  stroke: var(--general-mots-d-path-centerline);
  stroke-width: 0.9;
  stroke-dasharray: 0.1 2.7;
}

.general-mots-d__selector {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  border-radius: 0;
  background: transparent;
}

.general-mots-d__selector[hidden] {
  display: none;
}

.general-mots-d__selector-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(93.84rem, calc(100% - 2rem));
  height: min(57.96rem, calc(100% - 2rem));
  min-width: 0;
  min-height: 0;
  padding: clamp(0.65rem, 1.2vw, 1.1rem);
  overflow: hidden;
  border: 2px solid rgba(var(--color-brand-deep-rgb), 0.55);
  border-radius: var(--frame-radius);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 1rem 2.5rem rgba(20, 55, 35, 0.28);
}

.general-mots-d__series-confirmation {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(19, 15, 8, 0.72);
  backdrop-filter: blur(0.25rem);
  -webkit-backdrop-filter: blur(0.25rem);
}

.general-mots-d__series-confirmation[hidden] {
  display: none;
}

.general-mots-d__selector-header {
  --general-heading-height: calc(var(--font-size-menu) * 1.1 + 0.4rem);
  --general-title-top-space: clamp(0.35rem, 0.6vw, 0.65rem);
  width: 100%;
}

.general-mots-d__selector-header::after {
  z-index: 1;
  bottom: calc(0px - var(--general-title-top-space));
}

.general-mots-d__selector-close {
  position: absolute;
  z-index: 2;
  top: 0.65rem;
  right: 0.65rem;
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 50%;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.62);
  font-family: Arial, sans-serif;
  font-size: var(--font-size-menu);
  line-height: 1;
  transition: transform 180ms var(--ease-buttery);
}

.general-mots-d__selector-close:hover {
  transform: scale(1.08);
}

.general-mots-d__selector-close:focus-visible {
  outline: 3px solid rgba(255, 210, 91, 0.95);
  outline-offset: 3px;
}

.general-mots-d__selector-toggle {
  position: absolute;
  z-index: 5;
  /* Aligne le bouton sur la croix, juste à sa gauche. */
  top: calc(2rem - 2px);
  right: calc(0.75rem + 2.5rem + 0.5rem);
  left: auto;
  transform: translateY(-50%);
  width: clamp(11.875rem, 12vw, 13rem);
  height: 2.5rem;
  min-height: 2.5rem;
  padding: 0.25rem 0.45rem;
  border-radius: clamp(0.6rem, 0.9vw, 0.8rem);
  font-size: clamp(0.8rem, 1.05vw, 1.1rem);
  white-space: nowrap;
}

.general-tool-button.general-mots-d__selector-toggle:hover {
  transform: translateY(-50%) scale(1.025);
}

.general-tool-button.general-mots-d__selector-toggle:active {
  transform: translateY(-50%) scale(0.96);
}

.general-mots-d__selector-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(9, minmax(0, 1fr));
  gap: clamp(0.2rem, 0.4vw, 0.45rem) clamp(0.25rem, 0.55vw, 0.6rem);
  margin-top: clamp(1rem, 1.35vw, 1.5rem);
  min-width: 0;
  min-height: 0;
}

.general-mots-d__series-button {
  display: grid;
  height: calc(100% - clamp(0.45rem, 0.75vw, 0.8rem));
  align-self: center;
  min-width: 0;
  min-height: 0;
  place-items: center;
  padding: 0.12rem 0.2rem;
  overflow: hidden;
  box-sizing: border-box;
  color: #0b4f2a;
  border: 2px solid #59bf82;
  border-radius: clamp(0.5rem, 0.8vw, 0.75rem);
  cursor: pointer;
  background: linear-gradient(
    180deg,
    #b7efd0 0%,
    #86dca8 52%,
    #59bf82 100%
  );
  box-shadow:
    0 0.22rem 0 #3f9d68,
    0 0.7rem 0.875rem rgba(0, 80, 42, 0.14),
    inset 0 0.11rem 0 rgba(255, 255, 255, 0.5),
    inset 0 -0.5rem 0.7rem rgba(0, 0, 0, 0.1);
  font-size: var(--general-mots-d-selector-font-size);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.general-mots-d__series-button:hover:not(.is-active) {
  filter: saturate(1.08) brightness(1.04);
  border-color: #3f9d68;
  transform: translateY(-0.27rem) scale(1.025);
  background: linear-gradient(
    180deg,
    #c7f4d9 0%,
    #9ee6b8 52%,
    #6bca91 100%
  );
}

.general-mots-d__series-button.is-active {
  color: #fff;
  border-color: var(--color-green-deep);
  cursor: default;
  background: var(--color-green);
  box-shadow:
    0 0.22rem 0 var(--color-green-deep),
    0 0.7rem 0.875rem rgba(0, 80, 42, 0.19),
    inset 0 0.11rem 0 rgba(255, 255, 255, 0.38),
    inset 0 -0.5rem 0.7rem rgba(0, 93, 45, 0.2);
  text-shadow: 0 0.08rem 0 rgba(0, 70, 32, 0.28);
}

.general-mots-d__series-button.is-active:hover {
  filter: none;
  transform: none;
}

.general-mots-d__action,
.general-mots-d__title,
.general-mots-d__day-header,
.general-mots-d__choice {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  border-radius: clamp(0.5rem, 0.8vw, 0.75rem);
  font-family: Arial, sans-serif;
  font-weight: 900;
  line-height: 1.08;
  text-align: center;
}

.general-mots-d__title,
.general-mots-d__day-header,
.general-mots-d__choice {
  display: grid;
  place-items: center;
  color: #c58d18;
  border: 2px solid #c2c26e;
  cursor: default;
  background: linear-gradient(
    180deg,
    #d9d99a 0%,
    #f8f8c5 44%,
    #e4e4a5 100%
  );
  box-shadow:
    inset 0 0.24rem 0.42rem rgba(93, 93, 19, 0.3),
    inset 0 -0.16rem 0.25rem rgba(255, 255, 255, 0.78),
    0 0.08rem 0.14rem rgba(80, 80, 5, 0.16);
  font-size: calc(var(--font-size-menu) * 1.5);
  text-shadow:
    0 0.05rem 0 rgba(255, 245, 178, 0.9),
    0 0.1rem 0.12rem rgba(97, 63, 0, 0.38);
  user-select: none;
}

.general-mots-d__title {
  justify-items: start;
  padding: 0.3rem;
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: calc(var(--font-size-menu) * 2.25);
}

.general-mots-d__choice.is-locked {
  color: #c9c9a3;
  border-color: #ddddb7;
  background: linear-gradient(
    180deg,
    #f5f5df 0%,
    #eeeecc 44%,
    #e5e5bd 100%
  );
  box-shadow:
    inset 0 0.24rem 0.42rem rgba(93, 93, 19, 0.1),
    inset 0 -0.16rem 0.25rem rgba(255, 255, 255, 0.72),
    0 0.08rem 0.14rem rgba(80, 80, 5, 0.08);
  text-shadow: 0 0.05rem 0 rgba(255, 255, 255, 0.72);
}

.general-mots-d__title-text {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  text-align: center;
}

.general-mots-d__day-header {
  padding: 0.1rem;
  letter-spacing: 0.06em;
}

.general-mots-d__choice {
  letter-spacing: 0.04em;
}

.general-mots-d__action {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.12rem 0.25rem;
  overflow: hidden;
  text-decoration: none;
}

.general-mots-d__action span {
  display: block;
  max-width: 100%;
}

.general-mots-d__visited-check {
  position: absolute;
  top: 0.25rem;
  right: 0.3rem;
  display: grid !important;
  width: 1.2rem;
  height: 1.2rem;
  place-items: center;
  color: #08773f;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: #f6f8c8;
  box-shadow: 0 0.08rem 0.16rem rgba(0, 65, 32, 0.3);
  font-size: clamp(0.78rem, 0.95vw, 1.05rem);
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.general-mots-d__word-link.is-visited,
.general-mots-d__recap-link.is-visited,
.general-mots-d__quiz-link.is-completed,
.general-mots-d__audio-link.is-completed {
  --general-button-border: #8d8d8d;
  color: #969696;
  background: #c9c9c9;
  text-shadow: 0 0.08rem 0 rgba(255, 255, 255, 0.32);
  box-shadow:
    0 0.22rem 0 #8d8d8d,
    0 0.7rem 0.875rem rgba(64, 64, 64, 0.16),
    inset 0 0.11rem 0 rgba(255, 255, 255, 0.58),
    inset 0 -0.5rem 0.7rem rgba(80, 80, 80, 0.12);
}

.general-mots-d__word-link.is-visited:hover,
.general-mots-d__recap-link.is-visited:hover,
.general-mots-d__quiz-link.is-completed:hover,
.general-mots-d__audio-link.is-completed:hover {
  filter: none;
  transform: translateY(0) scale(1);
}

.general-mots-d__action.is-locked:not(.is-visited) {
  color: #8fb7a0;
  border: 2px solid #addcbd;
  border-radius: clamp(0.5rem, 0.8vw, 0.75rem);
  cursor: default;
  background: linear-gradient(
    180deg,
    #effbf3 0%,
    #e0f6e8 52%,
    #ccebd7 100%
  );
  box-shadow:
    0 0.22rem 0 #a2d0b1,
    0 0.7rem 0.875rem rgba(0, 80, 42, 0.08),
    inset 0 0.11rem 0 rgba(255, 255, 255, 0.72),
    inset 0 -0.5rem 0.7rem rgba(0, 80, 42, 0.05);
  pointer-events: none;
}

.general-mots-d__action.is-locked:hover {
  filter: none;
  transform: rotate(var(--mots-d-game-rotation, 0deg));
}

.general-mots-d__action.is-locked .general-mots-d__badge {
  color: #c08c85;
  border-color: #efc2bb;
  background: #fbe3df;
  box-shadow: 0 1px 2px rgba(184, 46, 11, 0.12);
}

.general-mots-d__quiz-link.is-completed .general-mots-d__badge,
.general-mots-d__audio-link.is-completed .general-mots-d__badge {
  color: #686868;
  border-color: #969696;
  background: #adadad;
  box-shadow: 0 1px 2px rgba(64, 64, 64, 0.2);
}

.general-mots-d__quiz-link.is-completed {
  cursor: pointer;
  pointer-events: auto;
}

.general-mots-d__audio-link.is-completed {
  cursor: pointer;
  pointer-events: auto;
}

.general-mots-d__quiz-question {
  position: absolute;
  z-index: 4;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.12rem 0.2rem;
  overflow: hidden;
  border: 2px solid var(--color-brand-deep);
  border-radius: clamp(0.5rem, 0.8vw, 0.75rem);
  background: var(--color-brand-surface);
  box-shadow:
    0 0.35rem 0.8rem rgba(0, 80, 42, 0.2),
    inset 0 0.08rem 0 rgba(255, 255, 255, 0.82);
  text-align: center;
}

.general-mots-d__quiz-question[hidden] {
  display: none;
}

.general-mots-d__quiz-question-text {
  margin: 0;
  color: var(--color-brand-deep);
  font-size: clamp(0.95rem, 1.2vw, var(--font-size-menu));
  font-weight: 900;
  line-height: 1.08;
  white-space: normal;
}

.general-mots-d__quiz-question-actions {
  display: flex;
  gap: 0.4rem;
}

.general-mots-d__quiz-question-button {
  min-width: clamp(2.7rem, 3.5vw, 3.7rem);
  height: clamp(1.2rem, 1.8vw, 1.7rem);
  min-height: clamp(1.2rem, 1.8vw, 1.7rem);
  padding: 0.04rem 0.2rem;
  border-width: 1px;
  border-radius: clamp(0.25rem, 0.4vw, 0.4rem);
  font-size: clamp(0.55rem, 0.7vw, 0.75rem);
}

.general-mots-d__exit-confirmation {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(19, 15, 8, 0.72);
  backdrop-filter: blur(0.25rem);
  -webkit-backdrop-filter: blur(0.25rem);
}

.general-mots-d__exit-confirmation[hidden] {
  display: none;
}

.general-mots-d__exit-confirmation-panel {
  width: min(100%, 32rem);
  padding: clamp(1.25rem, 3.2vw, 2.2rem);
  border: 3px solid var(--color-brand-deep);
  border-radius: var(--frame-radius);
  background: var(--color-brand-surface);
  box-shadow:
    0 0.8rem 2rem rgba(0, 0, 0, 0.28),
    inset 0 0.12rem 0 rgba(255, 255, 255, 0.82);
  text-align: center;
}

.general-mots-d__exit-confirmation-message {
  margin: 0;
  color: var(--color-brand-deep);
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  font-weight: 900;
  line-height: 1.15;
}

.general-mots-d__exit-confirmation-actions {
  display: flex;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.general-mots-d__exit-confirmation-button {
  min-width: min(8rem, 32vw);
}

.general-mots-d__word-link,
.general-mots-d__recap-link {
  flex-direction: column;
  gap: 0.08rem;
  font-size: clamp(0.95rem, 1.2vw, var(--font-size-menu));
  line-height: 1.08;
}

.general-mots-d__quiz-link,
.general-mots-d__audio-link {
  flex-direction: column;
  gap: 0.3rem;
  font-size: clamp(0.95rem, 1.2vw, var(--font-size-menu));
  line-height: 1.08;
}

.general-mots-d__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1rem 0.35rem;
  color: #fff;
  border: 1px solid #b82e0b;
  border-radius: 0.2rem;
  background: #e84118;
  box-shadow: 0 1px 2px rgba(184, 46, 11, 0.35);
  font-size: clamp(0.55rem, 0.65vw, 0.8rem);
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
}

.general-mots-d__game-link {
  font-size: var(--font-size-menu);
  transform: rotate(var(--mots-d-game-rotation));
}

.general-mots-d__game-link:hover {
  z-index: 2;
  transform: rotate(0deg) scale(1.08) translateY(-2px);
}

.general-mots-d__game-link:active {
  transform: rotate(0deg) scale(1.03) translateY(0);
}

.general-mots-d__empty {
  display: grid;
  width: 100%;
  height: 100%;
  margin: 0;
  place-items: center;
  color: #5d5d5d;
  font-size: var(--font-size-menu);
  font-weight: 900;
  text-align: center;
}

/* Déclinaison violette du parcours Mots D pour le CM2. */
html[data-level="cm2"] .general-evaluation-modal.is-mots-d
  .general-mots-d__board {
  --general-mots-d-path-centerline: #fff;
}

html[data-level="cm2"] .general-evaluation-modal.is-mots-d
  .general-mots-d__selector-panel {
  box-shadow: 0 1rem 2.5rem rgba(var(--color-brand-deep-rgb), 0.28);
}

html[data-level="cm2"] .general-evaluation-modal.is-mots-d
  .general-mots-d__series-button:not(.is-active) {
  color: #3d2052;
  border-color: #a575cf;
  background: linear-gradient(
    180deg,
    #eadcf4 0%,
    #d6b8f0 52%,
    #b889d1 100%
  );
  box-shadow:
    0 0.22rem 0 #8b5bad,
    0 0.7rem 0.875rem rgba(var(--color-brand-rgb), 0.14),
    inset 0 0.11rem 0 rgba(255, 255, 255, 0.5),
    inset 0 -0.5rem 0.7rem rgba(var(--color-brand-deep-rgb), 0.1);
}

html[data-level="cm2"] .general-evaluation-modal.is-mots-d
  .general-mots-d__series-button:hover:not(.is-active) {
  border-color: #8b5bad;
  background: linear-gradient(
    180deg,
    #f3e9f9 0%,
    #e1c9ee 52%,
    #c79bdc 100%
  );
}

html[data-level="cm2"] .general-evaluation-modal.is-mots-d
  .general-mots-d__series-button.is-active {
  border-color: var(--color-brand-deep);
  background: var(--color-brand);
  box-shadow:
    0 0.22rem 0 var(--color-brand-deep),
    0 0.7rem 0.875rem rgba(var(--color-brand-rgb), 0.19),
    inset 0 0.11rem 0 rgba(255, 255, 255, 0.38),
    inset 0 -0.5rem 0.7rem rgba(var(--color-brand-deep-rgb), 0.2);
  text-shadow: 0 0.08rem 0 rgba(var(--color-brand-dark-rgb), 0.35);
}

html[data-level="cm2"] .general-evaluation-modal.is-mots-d
  .general-mots-d__action:not(.is-locked):not(.is-visited):not(.is-completed) {
  --general-button-border: var(--color-brand-deep);
  color: #fff;
  background: var(--color-brand);
  text-shadow: 0 0.08rem 0 rgba(var(--color-brand-dark-rgb), 0.35);
  box-shadow:
    0 0.22rem 0 var(--color-brand-deep),
    0 0.7rem 0.875rem rgba(var(--color-brand-rgb), 0.19),
    inset 0 0.11rem 0 rgba(255, 255, 255, 0.38),
    inset 0 -0.5rem 0.7rem rgba(var(--color-brand-deep-rgb), 0.2);
}

html[data-level="cm2"] .general-evaluation-modal.is-mots-d
  .general-mots-d__action.is-locked:not(.is-visited) {
  color: #a487b2;
  border-color: #d8c5e2;
  background: linear-gradient(
    180deg,
    #faf6fc 0%,
    #f0e7f5 52%,
    #e4d5ed 100%
  );
  box-shadow:
    0 0.22rem 0 #c7afd4,
    0 0.7rem 0.875rem rgba(var(--color-brand-rgb), 0.08),
    inset 0 0.11rem 0 rgba(255, 255, 255, 0.72),
    inset 0 -0.5rem 0.7rem rgba(var(--color-brand-deep-rgb), 0.05);
}

html[data-level="cm2"] .general-evaluation-modal.is-mots-d
  .general-mots-d__visited-check {
  color: var(--color-brand-deep);
  box-shadow: 0 0.08rem 0.16rem rgba(var(--color-brand-deep-rgb), 0.3);
}

html[data-level="cm2"] .general-evaluation-modal.is-mots-d
  .general-mots-d__exit-confirmation-button.general-tool-button--green,
html[data-level="cm2"] .general-evaluation-modal.is-mots-d
  .general-mots-d__quiz-question-button.general-tool-button--green {
  --general-button-border: var(--color-brand-deep);
  color: #fff;
  background: var(--color-brand);
  text-shadow: 0 0.08rem 0 rgba(var(--color-brand-dark-rgb), 0.35);
  box-shadow:
    0 0.22rem 0 var(--color-brand-deep),
    0 0.7rem 0.875rem rgba(var(--color-brand-rgb), 0.19),
    inset 0 0.11rem 0 rgba(255, 255, 255, 0.38),
    inset 0 -0.5rem 0.7rem rgba(var(--color-brand-deep-rgb), 0.2);
}

html[data-level="cm2"] .general-evaluation-modal.is-mots-d
  .general-mots-d__quiz-question {
  box-shadow:
    0 0.35rem 0.8rem rgba(var(--color-brand-deep-rgb), 0.2),
    inset 0 0.08rem 0 rgba(255, 255, 255, 0.82);
}

@media (max-width: 620px) {
  .general-evaluation-modal.is-mots-d .general-evaluation-modal__stage {
    overflow: auto;
  }

  .general-mots-d__layout {
    min-width: 620px;
    min-height: 360px;
  }
}

@media (max-width: 1400px) {
  .general-tools .general-tool-button,
  .general-mots-d__action,
  .general-mots-d__quiz-question-text,
  .general-mots-d__day-header,
  .general-mots-d__choice {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
  }
}