/* Jeu du pendu : styles propres à l'outil. */
.o-pendu { --o-pendu-trait: var(--texte); --o-pendu-neige: #ffffff; --o-pendu-nez: #ea580c; --o-pendu-echarpe: #dc2626; --o-pendu-eau: #93c5fd; --o-pendu-charbon: #1f2937; min-width: 0; }
:root[data-theme="dark"] .o-pendu { --o-pendu-neige: #e8ecf6; --o-pendu-eau: #3b6fb6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .o-pendu { --o-pendu-neige: #e8ecf6; --o-pendu-eau: #3b6fb6; }
}
.o-pendu [hidden] { display: none !important; }
.o-pendu .o-pendu-choix { border-top: 0; padding-top: 0; }
.atelier .o-pendu-choix .btn[aria-pressed="true"] { background: var(--marque); border-color: var(--marque); color: var(--sur-marque); }
.o-pendu-reglages { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); padding-bottom: 6px; }
.o-pendu select:disabled { opacity: .55; }

.o-pendu-secret { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 14px; margin-top: 10px; border: 1px dashed var(--bord); border-radius: var(--rayon-petit); background: var(--surface-2); }
.o-pendu-secret .reglages { width: 100%; }
.o-pendu-aide { margin: 0; font-size: .9rem; color: var(--texte-2); }

.o-pendu-scene { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 20px; align-items: start; padding: 16px 0 18px; border-top: 1px solid var(--bord); margin-top: 12px; }
.o-pendu-dessin { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.o-pendu-dessin svg { width: 100%; max-width: 240px; height: auto; }
.o-pendu-dessin svg line, .o-pendu-dessin svg circle, .o-pendu-dessin svg path, .o-pendu-dessin svg rect { fill: none; stroke: var(--o-pendu-trait); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; transition: opacity .25s; }
.o-pendu-potence circle { stroke-width: 4.5; }
.o-pendu svg .cache { opacity: 0; }
.o-pendu .o-pendu-potence .cache { opacity: .07; }
.o-pendu svg .o-pendu-boule { fill: var(--o-pendu-neige); stroke-width: 3; }
.o-pendu svg .o-pendu-plein circle { fill: var(--o-pendu-charbon); stroke: none; }
.o-pendu svg .o-pendu-nez { fill: var(--o-pendu-nez); stroke: var(--o-pendu-nez); stroke-width: 2; }
.o-pendu svg .o-pendu-echarpe { stroke: var(--o-pendu-echarpe); stroke-width: 6; }
.o-pendu svg .o-pendu-chapeau rect { fill: var(--o-pendu-charbon); }
.o-pendu svg .o-pendu-chapeau line { stroke: var(--o-pendu-charbon); }
:root[data-theme="dark"] .o-pendu svg .o-pendu-chapeau rect, :root[data-theme="dark"] .o-pendu svg .o-pendu-chapeau line { stroke: var(--o-pendu-trait); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .o-pendu svg .o-pendu-chapeau rect, :root:not([data-theme="light"]) .o-pendu svg .o-pendu-chapeau line { stroke: var(--o-pendu-trait); } }
.o-pendu svg .o-pendu-flaque { fill: var(--o-pendu-eau); stroke: none; transition: rx .3s; }
.o-pendu-dessin-texte { margin: 0; font-size: .82rem; color: var(--texte-2); text-align: center; }
.o-pendu-compteur { margin: 0; font-weight: 700; color: var(--texte); }
.o-pendu.fini .o-pendu-compteur { color: var(--texte-2); }

.o-pendu-jeu { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.o-pendu-titre-jour { margin: 0; font-weight: 600; color: var(--texte-2); text-align: center; }
.o-pendu-mot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 2.6em; max-width: 100%; }
.o-pendu-mot span { display: grid; place-items: end center; width: clamp(18px, 6.2vw, 34px); height: 2.1em; font: 800 clamp(1.05rem, 4.4vw, 1.7rem)/1 var(--police); color: var(--texte); }
.o-pendu-mot .case { border-bottom: 3px solid var(--texte-2); padding-bottom: 3px; }
.o-pendu-mot .case.trouvee { border-color: var(--marque); }
.o-pendu-mot .case.manquee { color: var(--erreur-texte); border-color: var(--erreur-texte); }
.o-pendu-mot .sep { width: auto; min-width: 10px; padding-bottom: 6px; }
.o-pendu-message { min-height: 1.5em; font-weight: 600; text-align: center; color: var(--texte); }
.o-pendu.fini .o-pendu-message { font-weight: 800; color: var(--marque); }

.o-pendu-clavier { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.o-pendu-rangee { display: flex; justify-content: center; gap: 5px; width: 100%; }
.o-pendu-touche { flex: 0 1 40px; min-width: 0; height: 44px; padding: 0; border: 1px solid var(--bord); border-radius: var(--rayon-petit); background: var(--surface-2); color: var(--texte); font: 700 1.05rem/1 var(--police); cursor: pointer; }
.o-pendu-touche:hover:not(:disabled) { background: var(--fond); border-color: var(--marque); }
.o-pendu-touche:focus-visible { outline: 3px solid var(--marque); outline-offset: 1px; }
.o-pendu-touche:disabled { cursor: default; opacity: .55; }
.o-pendu-touche.ok { background: var(--ok-fond); color: var(--ok-texte); border-color: var(--ok-fond); opacity: 1; }
.o-pendu-touche.ko { background: var(--erreur-fond); color: var(--erreur-texte); border-color: var(--erreur-fond); opacity: .8; text-decoration: line-through; }

.o-pendu-entier { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 8px; }
.o-pendu-entier label { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; color: var(--texte-2); }
.o-pendu-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.o-pendu-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 14px; border-top: 1px solid var(--bord); }
.o-pendu-stats strong { font-size: .9rem; color: var(--texte-2); font-weight: 600; }
.o-pendu-stats dl { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; }
.o-pendu-stats dl div { display: flex; flex-direction: column; align-items: center; }
.o-pendu-stats dt { font-size: .78rem; color: var(--texte-2); }
.o-pendu-stats dd { margin: 0; font-weight: 800; font-size: 1.15rem; color: var(--texte); }

@media (max-width: 640px) {
  .o-pendu-scene { grid-template-columns: 1fr; gap: 10px; }
  .o-pendu-dessin svg { max-width: 170px; }
  .o-pendu-rangee { gap: 3px; }
  .o-pendu-touche { height: 42px; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .o-pendu-dessin svg *, .o-pendu svg .o-pendu-flaque { transition: none; }
}