/* Gabarit « Glisser-déposer » (12 oct. 2026) : compléments de sandbox.css. Uniquement ses variables (var(--encre),
   var(--creme)…) : le jeu reste juste dans les deux designs (Autocollants / Studio). Aucun mot coupé, lisible à 375 px. */
.petit { font-size: .95rem; margin: 0; opacity: .85; }
.choix-parties { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.liste-parties { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 460px; }
.partie-bouton { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; text-align: left; }
.partie-num { font-family: var(--police-titre); white-space: nowrap; }
.partie-etoiles { display: inline-flex; gap: 2px; }
.partie-etoiles svg { width: 18px; height: 18px; }
.partie-titre { font-size: 1.3rem; }
.partie-consigne { font-size: 1rem; }

.coup-de-pouce { width: 100%; max-width: 560px; text-align: left; padding: 10px 14px; border: 2px solid var(--encre); border-radius: 14px; background: var(--creme); }
.coup-de-pouce summary { cursor: pointer; font-weight: 800; }
.coup-de-pouce ul { margin: 8px 0 2px; padding-left: 20px; }
.coup-de-pouce li { margin: 4px 0; }

/* Étiquettes : jamais de mot coupé ; la phrase d'origine en petit, le passage à classer souligné */
.jeton { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; max-width: 100%; white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none;
  text-align: center; color: var(--encre); font-family: inherit; font-size: 1rem; line-height: 1.25; }
.jeton-texte { font-weight: 800; }
.jeton-phrase { font-weight: 600; font-size: .82rem; line-height: 1.3; }
.jeton-phrase u { text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 800; }
.jeton.en-vol { opacity: .35; }
.jeton-fantome { position: fixed; z-index: 20; margin: 0; pointer-events: none; opacity: .95; transform: rotate(-3deg); }
.jeton:focus-visible, .categorie:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }
.glisser-elements.survol { background: var(--ciel); }
.glisser-elements:empty { min-height: 0; padding: 0; border: 0; }
.categorie { cursor: pointer; }
.categorie-titre { text-align: center; line-height: 1.2; max-width: 100%; overflow-wrap: normal; hyphens: none; }
.categories.nombreuses { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.categories.nombreuses .categorie-titre { font-size: .95rem; }

/* Après « Vérifier » */
.resultat { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.explications { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; }
.explications li, .detail { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 10px 14px; text-align: left; border: 2px solid var(--encre); border-left-width: 7px; border-radius: 14px; background: var(--creme); }
.explications li { border-left-color: var(--rose); }
.detail.juste { border-left-color: var(--vert); }
.detail.faux { border-left-color: var(--rose); }
.detail:empty { display: none; }
.detail > div { display: flex; flex-direction: column; gap: 3px; }
.explications .phrase, .detail .phrase { font-size: .92rem; font-style: italic; opacity: .85; }
.boutons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.bilan-parties { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 480px; }
.bilan-parties li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 8px 12px; text-align: left; border: 2px solid var(--encre); border-radius: 12px; background: var(--creme); }

@media (max-width: 480px) {
  .categories, .categories.nombreuses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .categories.longues { grid-template-columns: 1fr; }
  .categorie { min-height: 80px; padding: 8px 6px; }
  .categorie-titre { font-size: .95rem; padding: 2px 8px; }
  .jeton { padding: 7px 10px; font-size: .95rem; }
  .partie-bouton { grid-template-columns: 1fr auto; }
  .partie-num { grid-column: 1 / -1; }
}