/* ==========================================================================
   Page démo — bornes d'arcade
   Chargée uniquement par demo.html : le reste du site n'en porte pas le poids.
   Même palette et même typographie que le site, mais une grammaire d'affiche :
   bord d'encre, ombre portée dure, emblème géométrique, gros numéro.
   ========================================================================== */

.arcade {
  display: grid;
  gap: clamp(20px, 4vw, 28px);
}

/* --------------------------------------------------------------------------
   L'affiche
   -------------------------------------------------------------------------- */

.cab {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: clamp(24px, 5vw, 32px);
  border: 2px solid var(--ink);
  border-radius: 22px;
  background: var(--card);
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  overflow: hidden;
  /* L'ombre dure, décalée, fait l'objet imprimé plutôt que l'interface. */
  box-shadow: 7px 7px 0 var(--ink);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.cab:hover,
.cab:focus-visible {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--ink);
}
.cab:active { transform: translate(7px, 7px); box-shadow: 0 0 0 var(--ink); }

.cab--slam { background: var(--turquoise); }
.cab--battle { background: var(--magenta); }
.cab--eloquence { background: var(--green); }
.cab--rap { background: var(--periwinkle); }

/* Trame fine : le grain d'un écran de borne, à peine perceptible. */
.cab::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(26, 26, 26, 0.05) 0 1px,
    transparent 1px 4px
  );
}

.cab__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.cab__num {
  display: block;
  font-family: var(--font-logo);
  font-size: clamp(40px, 9vw, 58px);
  line-height: 0.8;
  letter-spacing: -0.01em;
}

.cab__tag {
  display: inline-block;
  padding: 7px 14px;
  border: 2px solid var(--ink);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   L'emblème : chaque jeu a son signe, dessiné dans la même grammaire
   -------------------------------------------------------------------------- */

.cab__emblem {
  display: block;
  position: relative;
  z-index: 1;
  align-self: center;
  width: clamp(130px, 34vw, 176px);
  height: clamp(130px, 34vw, 176px);
  margin: clamp(18px, 4vw, 28px) 0;
}
.cab__emblem svg { width: 100%; height: 100%; overflow: visible; }
.cab__emblem [data-stroke] {
  fill: none;
  stroke: var(--ink);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cab__emblem [data-fill] { fill: var(--ink); }
.cab__emblem [data-paper] { fill: var(--paper); }

/* Chaque emblème a un élément qui s'anime au survol, jamais plus d'un. */
.cab__spark { transform-origin: center; transition: transform var(--dur) var(--ease); }
.cab:hover .cab__spark { transform: rotate(-12deg) scale(1.12); }

.cab__bars rect { transform-origin: center bottom; }
.cab:hover .cab__bars rect { animation: bars 900ms var(--ease) infinite alternate; }
.cab:hover .cab__bars rect:nth-child(2) { animation-delay: 110ms; }
.cab:hover .cab__bars rect:nth-child(3) { animation-delay: 220ms; }
.cab:hover .cab__bars rect:nth-child(4) { animation-delay: 330ms; }
.cab:hover .cab__bars rect:nth-child(5) { animation-delay: 440ms; }
@keyframes bars { to { transform: scaleY(0.55); } }

.cab__waves circle { transition: opacity var(--dur) var(--ease); }
.cab:hover .cab__waves circle { opacity: 0.35; }

/* --------------------------------------------------------------------------
   Le pied de l'affiche
   -------------------------------------------------------------------------- */

.cab__body {
  text-align: center; display: block; position: relative; z-index: 1; margin-top: auto; }

.cab__title {
  /* Ce sont des <span> dans un <button> : sans display:block, tout s'enchaîne
     sur une seule ligne. */
  display: block;
  font-size: clamp(26px, 5.6vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.cab__sub {
  display: block;
  margin-top: 8px;
  font-size: clamp(15px, 3.4vw, 16px);
  line-height: 1.4;
  color: var(--ink);
  opacity: 0.75;
}

.cab__play {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 13px 22px;
  border-radius: 99px;
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cab__play .arrow { transition: transform var(--dur-fast) var(--ease); }
.cab:hover .cab__play .arrow { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   La fenêtre de jeu
   -------------------------------------------------------------------------- */

.play {
  width: min(680px, calc(100vw - 24px));
  max-height: min(90vh, 860px);
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 22px;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}
.play::backdrop { background: rgba(26, 26, 26, 0.72); }
.play[open] { display: flex; flex-direction: column; }

@media (prefers-reduced-motion: no-preference) {
  .play[open] { animation: play-in 300ms var(--ease); }
}
@keyframes play-in {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
/* En plein écran, le scale découvrirait le fond sur les quatre côtés : le
   panneau monte simplement depuis le bas. */
@media (max-width: 560px) and (prefers-reduced-motion: no-preference) {
  .play[open] { animation: play-up 260ms var(--ease); }
}
@keyframes play-up {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

.play__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px clamp(20px, 4vw, 28px);
  border-bottom: 2px solid var(--ink);
}
.play__head--slam { background: var(--turquoise); }
.play__head--battle { background: var(--magenta); }
.play__head--eloquence { background: var(--green); }
.play__head--rap { background: var(--periwinkle); }

.play__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0.7;
}
.play__title {
  margin-top: 4px;
  font-size: clamp(21px, 4.6vw, 26px);
  line-height: 1.1; letter-spacing: -0.03em; font-weight: 700;
}

.play__close {
  flex: 0 0 auto; position: relative;
  width: 42px; height: 42px;
  border: 2px solid var(--ink); border-radius: 50%;
  background: transparent; cursor: pointer;
}
.play__close span {
  position: absolute; left: 10px; top: 18px;
  width: 18px; height: 2.5px; border-radius: 2px; background: var(--ink);
}
.play__close span:first-child { transform: rotate(45deg); }
.play__close span:last-child { transform: rotate(-45deg); }
.play__close:hover { background: var(--ink); }
.play__close:hover span { background: var(--paper); }

.play__body {
  padding: clamp(24px, 5vw, 36px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* État d'attente, le temps que le jeu soit posé */
.play__soon { text-align: center; padding: clamp(16px, 4vw, 32px) 0; }
.play__soon .cab__emblem { margin-inline: auto; }
.play__soon p { margin-top: 20px; font-size: 17px; line-height: 1.5; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Grilles
   -------------------------------------------------------------------------- */

@media (min-width: 560px) {
  .arcade { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .arcade { gap: 32px; }
  .cab { min-height: 460px; }
}

@media (prefers-reduced-motion: reduce) {
  .cab:hover .cab__bars rect { animation: none; }
}

/* ==========================================================================
   Les jeux — grammaire commune aux quatre bornes
   ========================================================================== */

.g { display: block; }
.g--center { text-align: center; }

.g__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.g__eyebrow--sep {
  margin-top: 36px; padding-top: 26px;
  border-top: 2px solid var(--ink);
}

.g__title {
  margin-top: 12px;
  font-size: clamp(23px, 5vw, 30px);
  line-height: 1.12; letter-spacing: -0.03em; font-weight: 700;
}
.g__text {
  margin-top: 14px;
  font-size: clamp(16px, 3.6vw, 17px); line-height: 1.55;
  color: var(--ink-soft);
}
.g__title--sm { font-size: clamp(19px, 4.4vw, 24px); }
.g__text--strong { color: var(--ink); font-weight: 600; }
.g__hint { margin-top: 12px; font-size: 14px; color: var(--ink-mute); }

/* Boutons du jeu ---------------------------------------------------------- */

.g__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 28px; padding: 16px 26px;
  border: 0; border-radius: 99px;
  background: var(--ink); color: var(--paper);
  font: inherit; font-size: 16px; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) ease;
}
.g__btn:hover { transform: translateY(-2px); }
.g__btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
.g__btn .arrow { transition: transform var(--dur-fast) var(--ease); }
.g__btn:not(:disabled):hover .arrow { transform: translateX(5px); }
.g__btn--cta { background: var(--yellow); color: var(--ink); text-decoration: none; }

.g__link {
  display: block; margin: 18px auto 0; padding: 8px 0;
  border: 0; background: transparent;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--ink-mute);
  text-decoration: underline; text-underline-offset: 4px;
  cursor: pointer;
}
.g__link:hover { color: var(--ink); }

/* Choix de la tranche d'âge ---------------------------------------------- */

.g__choices { display: grid; gap: 12px; margin-top: 26px; }
.g__choice {
  display: block; width: 100%;
  padding: 20px 22px;
  border: 2px solid var(--ink); border-radius: 16px;
  background: var(--paper); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
  transition: background var(--dur-fast) ease, transform var(--dur-fast) var(--ease), opacity var(--dur-fast) ease;
}
.g__choice b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.g__choice small { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-mute); }
.g__choice:not(:disabled):hover { background: var(--green); transform: translateY(-2px); }
.g__choice.is-picked { background: var(--green); }
.g__choice:disabled:not(.is-picked) { opacity: 0.3; cursor: default; }

/* Tirage du sujet --------------------------------------------------------- */

.g__slot {
  margin-top: 26px; min-height: 2.4em;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(24px, 6vw, 36px);
  line-height: 1.1; letter-spacing: -0.03em; font-weight: 700;
}
.g__slot.is-locked { color: var(--ink); }
.g__after { margin-top: 8px; }

/* Compte à rebours -------------------------------------------------------- */

.g__count {
  margin: 40px 0;
  font-family: var(--font-logo);
  font-size: clamp(80px, 22vw, 140px);
  line-height: 1; text-transform: uppercase;
}
.g__count--go { font-size: clamp(44px, 12vw, 76px); color: var(--ink); }

/* Chronomètre ------------------------------------------------------------- */

.g--speak .g__topic {
  margin-top: 10px;
  font-size: clamp(22px, 5vw, 30px);
  line-height: 1.12; letter-spacing: -0.03em; font-weight: 700;
}
.g__clock { position: relative; width: min(230px, 62vw); margin: 30px auto 0; }
.g__ring { width: 100%; height: auto; transform: rotate(-90deg); }
.g__ring-track { fill: none; stroke: var(--card); stroke-width: 9; }
.g__ring-run {
  fill: none; stroke: var(--ink); stroke-width: 9; stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
}
.g__clock-value {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-logo);
  font-size: clamp(58px, 16vw, 84px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Auto-évaluation --------------------------------------------------------- */

.g__quiz { display: grid; gap: 22px; margin-top: 28px; }
.g__q-label { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.g__opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.g__opt {
  padding: 11px 16px;
  border: 2px solid var(--line); border-radius: 99px;
  background: var(--paper); color: var(--ink-soft);
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.g__opt:hover { border-color: var(--ink); color: var(--ink); }
.g__opt.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Profil et techniques ---------------------------------------------------- */

.g__strengths { display: grid; gap: 12px; margin-top: 22px; }
.g__strength {
  padding: 20px 22px; border-radius: 16px; background: var(--green);
}
.g__strength b { display: block; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.g__strength span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; }

.g__techs { display: grid; gap: 12px; margin-top: 22px; }
.g__tech {
  padding: 22px; border: 2px solid var(--ink); border-radius: 16px;
  background: var(--paper);
}
.g__tech-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px;
}
.g__tech b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.g__tech span { display: block; margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--ink-soft); }

.g__outro {
  margin-top: 36px; padding-top: 26px;
  border-top: 2px solid var(--ink);
  text-align: center;
}

@media (min-width: 560px) {
  .g__choices { grid-template-columns: repeat(2, 1fr); }
  .g__strengths, .g__techs { gap: 14px; }
}

/* --------------------------------------------------------------------------
   Jeu 04 — 60 secondes de rap
   -------------------------------------------------------------------------- */

/* L'exemple de l'écran d'accueil de chaque jeu. Sans fond : posé dans un
   cartouche gris, il passait pour un champ à remplir. Un filet jaune le
   distingue du reste du texte sans lui donner l'air d'une saisie. */
.g__tip {
  margin-top: 20px;
  font-size: 16px; line-height: 1.5; color: var(--ink-soft);
}
.g__tip::before {
  content: ''; display: block;
  width: 26px; height: 3px; margin: 0 auto 12px;
  border-radius: 2px; background: var(--yellow);
}

.g--play { display: flex; flex-direction: column; }

.g__hud {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px;
}
.g__hud p { display: flex; flex-direction: column; gap: 2px; }
.g__hud-score { text-align: right; }
.g__hud-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.g__hud b {
  font-family: var(--font-logo);
  font-size: clamp(38px, 10vw, 52px); line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.g__hud-time.is-low b { color: #c2410c; }

.g__gauge {
  height: 6px; margin-top: 12px;
  border-radius: 99px; background: var(--card); overflow: hidden;
}
.g__gauge span {
  display: block; height: 100%; width: 100%;
  background: var(--ink); transform-origin: 0 50%;
  transition: transform 220ms linear;
}

.g__word {
  margin: clamp(28px, 7vw, 44px) 0;
  text-align: center;
  font-size: clamp(38px, 11vw, 62px);
  line-height: 1; letter-spacing: -0.04em; font-weight: 700;
  text-transform: uppercase;
}

.g__form { display: flex; gap: 10px; }
.g__input {
  flex: 1 1 auto; min-width: 0;
  padding: 16px 18px;
  border: 2px solid var(--ink); border-radius: 14px;
  background: var(--paper); color: var(--ink);
  font: inherit; font-size: 17px; font-weight: 600;
}
/* De quoi voir toute sa phrase en l'écrivant, au lieu d'un mot qui défile. */
.g__input--area {
  display: block; width: 100%;
  min-height: 112px;
  line-height: 1.45;
  resize: none;
}
.g__input::placeholder { color: var(--ink-mute); font-weight: 400; }
.g__input:focus { outline: 3px solid var(--periwinkle); outline-offset: 2px; }
.g__btn--send { flex: 0 0 auto; margin-top: 0; padding: 16px 20px; border-radius: 14px; }

/* Le retour ne repose jamais sur la seule couleur : symbole et texte d'abord. */
.g__flash {
  min-height: 1.6em; margin-top: 14px;
  font-size: 16px; font-weight: 600;
}
.g__flash.is-ok { color: #15803d; }
.g__flash.is-ko { color: #c2410c; }

.g__score {
  margin: 10px 0 4px;
  font-family: var(--font-logo);
  font-size: clamp(80px, 24vw, 140px); line-height: 0.9;
}

@media (max-width: 420px) {
  .g__form { flex-direction: column; }
  .g__btn--send { width: 100%; }
}

/* --------------------------------------------------------------------------
   Jeu 01 — Phrase poétique
   -------------------------------------------------------------------------- */

.g__verbs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 26px;
}
.g__verb {
  padding: 12px 16px;
  border: 2px solid var(--line); border-radius: 99px;
  background: var(--paper); color: var(--ink-soft);
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease,
              color var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.g__verb:not(:disabled):hover { border-color: var(--ink); color: var(--ink); }
.g__verb.is-picked { background: var(--turquoise); border-color: var(--ink); color: var(--ink); }
.g__verb:disabled:not(.is-picked) { opacity: 0.28; cursor: default; }

/* Une pastille, pas une bannière : elle rappelle le verbe sans manger l'écran. */
.g__lock {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%;
  padding: 6px 14px; margin-bottom: 16px;
  border-radius: 99px; background: var(--turquoise);
}
.g__lock-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; opacity: 0.62;
}
.g__lock-icon { width: 12px; height: 12px; fill: var(--ink); flex: 0 0 auto; opacity: 0.7; }
.g__lock b { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }

.g__phrase {
  margin: 2px 0 22px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--ink);
  font-size: clamp(22px, 5.6vw, 38px);
  line-height: 1.14; letter-spacing: -0.03em; font-weight: 700;
  overflow-wrap: anywhere;
}

/* Phrase en construction (jeu 02) : plus petite que l'amorce du jeu 01,
   parce qu'elle reste affichée au-dessus d'un champ de saisie. */
.g__phrase--sm { font-size: clamp(19px, 4.6vw, 27px); margin-bottom: 18px; padding-bottom: 12px; }
.g__fill {
  background: var(--yellow);
  box-shadow: 0 0 0 3px var(--yellow);
  border-radius: 3px;
}
/* Le blanc à remplir : un trait, de la largeur d'un mot. */
.g__gap {
  display: inline-block; width: 2.6em; height: 0.62em;
  border-bottom: 3px solid currentColor; opacity: 0.3;
}

/* Exemples de fins de phrase : des étiquettes, pas un paragraphe de plus.
   Elles ne sont pas cliquables — c'est au participant d'écrire la sienne. */
.g__ex { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.g__ex-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mute);
  width: 100%;
}
.g__ex-item {
  padding: 7px 13px;
  border: 1.5px dashed rgba(26, 26, 26, 0.28);
  border-radius: 99px;
  font-size: 14px; line-height: 1.25; color: var(--ink-soft);
}

.g__form--stack { flex-direction: column; gap: 12px; margin-top: 24px; }
.g__form--stack .g__btn--send { width: 100%; }

.g__result {
  margin: 18px 0 26px;
  font-size: clamp(26px, 6.2vw, 38px);
  line-height: 1.15; letter-spacing: -0.03em; font-weight: 700;
}

/* --------------------------------------------------------------------------
   Jeu 02 — Punchline compliment
   -------------------------------------------------------------------------- */

.g__build { display: grid; gap: 8px; margin: 22px 0 6px; }
.g__build-item {
  opacity: 0;
  transform: translateY(10px);
  font-size: clamp(22px, 5.4vw, 30px);
  line-height: 1.1; letter-spacing: -0.03em; font-weight: 700;
  text-transform: uppercase;
  transition: opacity 340ms var(--ease), transform 340ms var(--ease);
}
.g__build-item.is-in { opacity: 1; transform: none; }
.g__build-item + .g__build-item { color: var(--ink-soft); }

/* La punchline arrive après ses ingrédients. Modificateur et pas sélecteur
   d'identifiant : sinon « is-in » perd la bataille de spécificité et la
   phrase reste invisible. */
.g__result--reveal {
  opacity: 0; transform: translateY(12px);
  margin-top: 22px; padding-top: 22px;
  border-top: 2px solid var(--ink);
  transition: opacity 460ms var(--ease), transform 460ms var(--ease);
}
.g__result--reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Petits écrans — la fenêtre prend la place, le décor s'efface
   ========================================================================== */

@media (max-width: 560px) {
  /* Plein écran sur téléphone : le jeu prend tout l'écran, la page disparaît
     derrière. Sur ordinateur, la fenêtre garde sa taille d'origine. */
  .play {
    width: 100vw; max-width: 100vw;
    height: 100vh;
    height: 100dvh;                  /* la barre d'URL mobile ne rogne plus la fenêtre */
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .play__head {
    gap: 12px;
    padding: 13px 16px;
    padding-top: calc(13px + env(safe-area-inset-top));
  }
  .play__label { font-size: 10px; letter-spacing: 0.12em; }
  .play__title { margin-top: 2px; font-size: 19px; }
  .play__close { width: 36px; height: 36px; }
  .play__close span { left: 8px; top: 15px; width: 16px; }
  .play__body {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    padding: 18px 16px calc(22px + env(safe-area-inset-bottom));
  }
  /* Marges automatiques plutôt que justify-content : l'écran se cale au
     centre quand il est court, et défile normalement quand il est long. */
  .play__body > * { margin-block: auto; }

  .g__title { font-size: 21px; }
  .g__title--sm { font-size: 18px; }
  .g__text { margin-top: 10px; line-height: 1.5; }
  .g__btn { margin-top: 20px; padding: 15px 22px; font-size: 15px; }

  /* La pastille du verbe : l'icône et le mot disent déjà tout. */
  .g__lock { gap: 6px; padding: 5px 12px; margin-bottom: 12px; }
  .g__lock-label {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .g__lock-icon { width: 11px; height: 11px; }
  .g__lock b { font-size: 13px; }

  .g__phrase { margin-bottom: 16px; padding-bottom: 12px; }
  .g__verbs { gap: 7px; margin-top: 18px; }
  .g__verb { padding: 10px 14px; font-size: 14px; }

  .g__form--stack { margin-top: 20px; }
  .g__input { padding: 13px 15px; font-size: 16px; }  /* 16px : iOS ne zoome pas */
  .g__input--area { min-height: 132px; }
  .g__btn--send { padding: 15px 18px; }
  .g__flash { margin-top: 10px; font-size: 15px; }
}