/* --- la fenêtre qui s'arrête devant vous (fenetre.js) --- */
/* Elle couvre la page le temps qu'on la lise, et attend qu'on la referme : ce
   qu'on vient d'envoyer a demandé un geste, l'accusé de réception en vaut un.
   Sa propre feuille, et pas l'une des deux palettes : la fiche, Adopte et
   GiroQuest l'ouvrent, et ces trois-là n'ont aucune autre feuille en commun.
   Les jetons employés existent dans les deux familles. */
.fenetre-mot {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: color-mix(in srgb, #26251f 42%, transparent);
  opacity: 0; transition: opacity .24s;
}
.fenetre-mot.la { opacity: 1; }
.fenetre-mot .dedans {
  position: relative; max-width: 21rem; width: 100%; text-align: center;
  background: var(--color-surface); border: var(--rule-light);
  border-radius: 18px; padding: 26px 22px 22px;
  box-shadow: 0 24px 60px color-mix(in srgb, #3e170c 34%, transparent);
  transform: translateY(10px) scale(.98); transition: transform .24s;
}
.fenetre-mot.la .dedans { transform: none; }
.fenetre-mot p {
  margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.5;
  color: var(--color-text);
}
/* Une fenêtre peut porter plusieurs mots. Ils se lisent l'un après l'autre,
   pas d'un bloc. */
.fenetre-mot .dedans > p:not(.fenetre-seconde) + p:not(.fenetre-seconde) { margin-top: 10px; }
/* Ce que le mot recouvre, un motif par ligne. Alignée à gauche dans une fenêtre
   qui centre tout le reste : une liste centrée n'a pas de bord où l'œil
   redescende, et ses puces flottent au milieu de rien. */
.fenetre-mot .fenetre-liste {
  margin: 10px 0 0; padding: 0 0 0 22px; text-align: left;
  font-family: var(--font-body); font-size: 15.5px; line-height: 1.5;
  color: var(--color-text);
}
.fenetre-mot .fenetre-liste li { margin: 4px 0 0; }
.fenetre-mot .fenetre-liste li::marker { color: var(--color-accent-2); }
.fenetre-mot .fenetre-cocarde { width: 34px; height: 34px; margin: 0 auto 12px; }
.fenetre-x {
  position: absolute; top: 9px; right: 9px; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--color-divider); border-radius: 9px;
  color: var(--color-text); cursor: pointer; font-size: 13px; line-height: 1;
}
@media (hover: hover) {
  .fenetre-x:hover { border-color: var(--color-accent-2); color: var(--color-accent-2); }
}
@media (prefers-reduced-motion: reduce) {
  .fenetre-mot, .fenetre-mot .dedans { transition: none; }
}

/* « Ne plus me le rappeler » : la case se lit à la fermeture, discrète sous le
   mot — c'est un droit qu'on offre, pas une question qu'on pose. */
.fenetre-rappel {
  /* Les pages jeu habillent TOUTE étiquette en capitales espacées — c'est le
     ton d'un champ de formulaire, pas d'une case qu'on offre de cocher. On
     remet chaque propriété que cette règle-là impose, sans quoi la case a
     l'air d'un titre. */
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 8px; margin: 14px 0 0; cursor: pointer;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--color-text); opacity: .72;
}
.fenetre-rappel input { width: 16px; height: 16px; accent-color: var(--color-accent-2); cursor: pointer; }

/* La ligne d'à-côté : ce qui accompagne le mot sans en faire partie — la
   récompense qui vient avec une photo publiée. Plus petite et plus sourde que
   lui : on la lit après, pas avant. */
.fenetre-mot .fenetre-seconde {
  margin: 8px 0 0; font-size: 14.5px; color: var(--color-text); opacity: .72;
}