/* Gros caractères et fort contraste (jaune sur noir) pour les élèves malvoyants. */
:root {
  --fond: #000000;
  --texte: #ffd400;
  --texte-2: #ffffff;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: var(--fond);
  color: var(--texte);
  font-family: Verdana, "Atkinson Hyperlegible", Arial, sans-serif;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
#app {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
#header {
  color: var(--texte-2);
  font-size: clamp(20px, 5vw, 32px);
  text-align: center;
  min-height: 1.4em;
}
#main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(32px, 8vw, 72px);
  font-weight: bold;
  line-height: 1.25;
  overflow-wrap: anywhere;
  overflow: hidden;
}
#sub {
  color: var(--texte-2);
  font-size: clamp(22px, 6vw, 40px);
  text-align: center;
  min-height: 1.4em;
}
#hint {
  color: var(--texte-2);
  font-size: clamp(14px, 3.5vw, 20px);
  text-align: center;
  opacity: 0.8;
  margin-top: 8px;
  min-height: 1.4em;
}
#main.long { font-size: clamp(26px, 6vw, 52px); }
#main.tres-long { font-size: clamp(20px, 4.6vw, 38px); font-weight: normal; }