.mots {
  --tableur: #51606F;
  --tableur-fond: #EEF2F6;
  --tableur-grille: rgba(91, 107, 124, .14);
  
  --duree: 6s;
  gap: 20px;
}
.mots[data-langue="comptable"] { --duree: 3.2s; }

.mots__texte { display: flex; flex-direction: column; gap: clamp(10px, 1.25vw, 18px); min-width: 0; }
.mots__chapeau { font-size: clamp(15.5px, 1.25vw, 18px); line-height: 1.6; color: var(--encre2); }
.mots__commande { display: flex; flex-direction: column; gap: 10px; }

.mots__interrupteur {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 420px);
  height: 60px;
  margin: 0;
  padding: 5px;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  background: var(--sable);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .6s ease, border-color .6s ease;
}

.mots__interrupteur:focus-visible { border-radius: 999px; }
.mots__pouce {
  position: absolute;
  top: 5px;
  left: 5px;
  width: calc(50% - 5px);
  height: calc(100% - 10px);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 6px 16px rgba(29, 24, 16, .16);
  transform: translateX(100%);
  transition: transform .55s cubic-bezier(.34, 1.3, .5, 1), box-shadow .3s;
}

.mots__cote {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  font-size: 15.5px;
  font-weight: 750;
  color: var(--attenue);
  white-space: nowrap;
  transition: color .4s;
}
.mots__cote--comptoir { color: var(--encre); }
.mots__puce { width: 8px; height: 8px; flex-shrink: 0; border-radius: 2px; background: var(--tableur); }
.mots__cote--comptoir .mots__puce { border-radius: 50%; background: var(--vert); }
.mots[data-langue="comptable"] .mots__interrupteur { background-color: #DCE3EB; border-color: #CCD5DF; }
.mots[data-langue="comptable"] .mots__pouce { transform: none; }
.mots[data-langue="comptable"] .mots__cote--comptable { color: var(--encre); }
.mots[data-langue="comptable"] .mots__cote--comptoir { color: var(--attenue); }
@media (hover: hover) {
  .mots__interrupteur:hover .mots__pouce { box-shadow: 0 8px 22px rgba(29, 24, 16, .24); }
}

.mots__piste {
  display: block;
  width: min(100%, 420px);
  height: 3px;
  border-radius: 2px;
  background: rgba(29, 24, 16, .08);
  overflow: hidden;
}
.mots__barre {
  display: block;
  height: 100%;
  background: var(--vert);
  transform: scaleX(0);
  transform-origin: left center;
}
.mots[data-langue="comptable"] .mots__barre { background: var(--tableur); }
.mots[data-mode="auto"] .mots__barre { animation: mots-avancer-0 var(--duree) linear both paused; }
.mots[data-mode="auto"][data-tour="1"] .mots__barre { animation-name: mots-avancer-1; }
.mots[data-mode="auto"][data-joue] .mots__barre { animation-play-state: running; }
@keyframes mots-avancer-0 { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mots-avancer-1 { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.mots__aide { display: grid; font-size: clamp(13px, 1vw, 14px); line-height: 1.3; color: var(--attenue); }
.mots__aide > span { grid-area: 1 / 1; }
.mots__aide-main,
.mots[data-mode="main"] .mots__aide-auto,
.mots[data-mode="main"] .mots__piste { visibility: hidden; }
.mots[data-mode="main"] .mots__aide-main { visibility: visible; }

.mots__ardoise {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ligne);
  border-radius: clamp(24px, 2.25vw, 32px);
  background: var(--surface);
  padding: clamp(20px, 2.4vw, 34px) clamp(20px, 3.1vw, 44px) clamp(8px, 1.25vw, 18px);
  transition: border-color .6s ease;
}
.mots__tableur {
  position: absolute;
  inset: 0;
  background-color: var(--tableur-fond);
  background-image: linear-gradient(var(--tableur-grille) 1px, transparent 1px),
    linear-gradient(90deg, var(--tableur-grille) 1px, transparent 1px);
  background-size: clamp(28px, 3.05vw, 44px) clamp(28px, 3.05vw, 44px);
  opacity: 0;
  transition: opacity .7s ease;
}
.mots[data-langue="comptable"] .mots__ardoise { border-color: #D5DDE6; }
.mots[data-langue="comptable"] .mots__tableur { opacity: 1; }

.mots__entete {
  position: relative;
  display: grid;
  padding-bottom: 6px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.3;
}
.mots__entete > span { grid-area: 1 / 1; }
.mots__entete .mots__oui { color: var(--vert); }
.mots__entete .mots__non { color: var(--tableur); }

.mots__ligne {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: clamp(66px, calc(17.6cqi + 2px), 110px);
  border-bottom: 2px solid var(--ligne);
  transition: border-color .6s ease;
}
.mots__ligne > span { grid-area: 1 / 1; white-space: nowrap; }

.mots__ligne .mots__oui {
  font-family: var(--display);
  font-size: min(60px, 10.4cqi);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.1;
  color: var(--encre);
}
.mots__ligne .mots__non {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 2.9cqi, 18px);
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: min(36px, 6.8cqi);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--tableur);
}
.mots__case {
  font-family: var(--texte);
  font-size: clamp(11px, 2.1cqi, 13px);
  font-weight: 700;
  letter-spacing: 0;
  color: rgba(81, 96, 111, .6);
}
.mots[data-langue="comptable"] .mots__ligne { border-bottom-color: rgba(91, 107, 124, .22); }

.mots__ardoise .mots__oui,
.mots__ardoise .mots__non {
  --retard: calc(var(--k, 0) * .12s);
  transition: opacity .5s ease var(--retard), transform .6s cubic-bezier(.3, .8, .3, 1) var(--retard),
    visibility .6s linear var(--retard);
}
.mots__ardoise .mots__non { opacity: 0; visibility: hidden; }
.mots__ligne .mots__non { transform: translateY(26px); }
.mots[data-langue="comptable"] .mots__ardoise .mots__oui { opacity: 0; visibility: hidden; }
.mots[data-langue="comptable"] .mots__ardoise .mots__non { opacity: 1; visibility: visible; }
.mots[data-langue="comptable"] .mots__ligne .mots__oui { transform: translateY(-26px); }
.mots[data-langue="comptable"] .mots__ligne .mots__non { transform: none; }

@media (max-width: 899px) and (max-height: 780px) {
  .mots { gap: 14px; }
  .mots__texte { gap: 8px; }
  .mots__commande { gap: 8px; }
  .mots__ligne { min-height: 58px; }
}

@media (min-width: 900px) {
  .mots {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(40px, 4.9vw, 70px);
    align-items: center;
    
    align-content: center;
  }
  .mots__commande { margin-top: 12px; }
  .mots__interrupteur, .mots__piste { width: min(100%, 340px); }
  .mots__entete { padding-bottom: 10px; font-size: 12.5px; }
}

@media (scripting: none) {
  .mots__commande { display: none; }
}