/* Mots mêlés */
.o-mots-meles-reglages { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 18px 24px; }
.o-mots-meles-mots, .o-mots-meles-options { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.o-mots-meles-mots > label { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; color: var(--texte-2); }
.o-mots-meles-mots textarea { width: 100%; min-height: 180px; resize: vertical; font: 600 .95rem/1.45 var(--mono); text-transform: uppercase; box-sizing: border-box; }
.o-mots-meles-aide { margin: 0; font-size: .85rem; color: var(--texte-2); }
.o-mots-meles-niveaux { border-top: 0; padding: 0; }
.atelier .o-mots-meles-niveaux .btn[aria-pressed="true"] { background: var(--marque); border-color: var(--marque); color: var(--sur-marque); }
.o-mots-meles-sens { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 8px 12px; border: 1px solid var(--bord); border-radius: var(--rayon-petit); }
.o-mots-meles-sens legend { padding: 0 4px; font-size: .88rem; color: var(--texte-2); }
.o-mots-meles-sens label.case { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.o-mots-meles-sens input { width: 20px; height: 20px; accent-color: var(--marque); }
.o-mots-meles .reglages.sans-trait { padding-top: 0; }
.o-mots-meles .reglages input:disabled, .o-mots-meles .reglages select:disabled { opacity: .55; }
.o-mots-meles-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 10px; }
.atelier .o-mots-meles-actions .btn[aria-pressed="true"] { background: var(--surface-2); }
.o-mots-meles-resume { display: block; font-weight: 600; }
.o-mots-meles-message:empty { display: none; }

/* Plateau de jeu */
.o-mots-meles-jeu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 260px); gap: 18px 24px; align-items: start; margin-top: 12px; }
.o-mots-meles-plateau { min-width: 0; }
.o-mots-meles-grille { display: block; width: 100%; max-width: 680px; height: auto; margin: 0 auto; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon-petit); }
.o-mots-meles-grille:focus-visible { outline: 3px solid var(--marque); outline-offset: 3px; }
.o-mots-meles-grille .lettres { fill: var(--texte); font-family: var(--mono); font-weight: 700; pointer-events: none; }
.o-mots-meles-grille .solution { stroke: var(--texte-2); stroke-opacity: .28; }
.o-mots-meles-grille .mystere { fill: none; stroke: var(--marque); stroke-width: 1; }
.o-mots-meles-grille .en-cours { stroke: var(--marque); stroke-opacity: .35; }
.o-mots-meles-grille .attente { fill: var(--marque); fill-opacity: .3; }
.o-mots-meles-grille .curseur { fill: none; stroke: var(--marque); stroke-width: .9; }
.o-mots-meles .tirage-astuce { text-align: center; }

.o-mots-meles-cote h2 { margin: 12px 0 8px; font-size: 1.1rem; }
.o-mots-meles-tableau { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: var(--rayon-petit); background: var(--surface-2); font-variant-numeric: tabular-nums; }
.o-mots-meles-tableau b { font: 700 1.2rem var(--mono); }
.o-mots-meles-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 4px 12px; margin: 0; padding: 0; list-style: none; font: 600 .92rem var(--mono); }
.o-mots-meles-liste li { overflow-wrap: anywhere; }
.o-mots-meles-liste li.trouve { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--texte-2); }
.o-mots-meles-ligne-mystere { margin: 10px 0 0; font-weight: 600; }
.o-mots-meles-annonce { display: block; margin-top: 10px; min-height: 1.4em; }
.o-mots-meles.gagne .o-mots-meles-annonce { padding: 10px 12px; border-radius: var(--rayon-petit); background: var(--ok-fond); color: var(--ok-texte); font-weight: 700; animation: o-mots-meles-bravo .5s ease-out; }
@keyframes o-mots-meles-bravo { from { transform: scale(.92); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .o-mots-meles.gagne .o-mots-meles-annonce { animation: none; } }
.o-mots-meles-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.o-mots-meles-impr-reglages { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bord); }
.o-mots-meles-impr-reglages h2 { margin: 0 0 12px; font-size: 1.15rem; }

@media (max-width: 760px) {
  .o-mots-meles-reglages, .o-mots-meles-jeu { grid-template-columns: minmax(0, 1fr); }
  .o-mots-meles-mots textarea { min-height: 130px; }
}

/* Impression */
.o-mots-meles .o-mots-meles-impression { display: none; }
@media print {
  body:has(.o-mots-meles-impression) *:not(:has(.o-mots-meles-impression)):not(.o-mots-meles-impression):not(.o-mots-meles-impression *) { display: none !important; }
  html:has(.o-mots-meles-impression), body:has(.o-mots-meles-impression), body:has(.o-mots-meles-impression) *:has(.o-mots-meles-impression) {
    display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: #fff !important;
    box-shadow: none !important; width: auto !important; max-width: none !important; min-height: 0 !important; height: auto !important;
    position: static !important; overflow: visible !important; color: #000 !important;
  }
  .o-mots-meles .o-mots-meles-impression { display: block !important; color: #000; font-family: var(--police); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .o-mots-meles-impression .o-mots-meles-feuille { break-after: page; page-break-after: always; text-align: center; }
  .o-mots-meles-impression .o-mots-meles-feuille:last-child { break-after: auto; page-break-after: auto; }
  .o-mots-meles-impression h2 { margin: 0 0 6mm; font-size: 20pt; color: #000; }
  .o-mots-meles-impression svg { display: block; margin: 0 auto; border: .3mm solid #000; border-radius: 1.5mm; }
  .o-mots-meles-impression svg .lettres { fill: #000; font-family: var(--mono); font-weight: 700; }
  .o-mots-meles-impression svg .solution { stroke: #000; stroke-opacity: .22; }
  .o-mots-meles-impression svg .mystere { fill: none; stroke: #000; stroke-width: .8; }
  .o-mots-meles-impression .o-mots-meles-impr-liste { columns: 4 32mm; column-gap: 6mm; max-width: 175mm; margin: 7mm auto 0; padding: 0; list-style: none; text-align: left; font: 700 11pt var(--mono); color: #000; }
  .o-mots-meles-impression .o-mots-meles-impr-liste li { margin: 0 0 1.6mm; break-inside: avoid; }
  .o-mots-meles-impression .o-mots-meles-impr-mystere { margin: 6mm 0 0; font-size: 13pt; font-weight: 700; letter-spacing: .08em; color: #000; }
}