/* Rendu validé de la maquette du 26 octobre 2026. */

#tp-pendu { width:100%; }
#tp-pendu .tpm-site { --tpm-ink:#263d37; --tpm-green:#26775d; --tpm-paper:#fffdf7; --tpm-line:#d7e2d8; color:var(--tpm-ink); background:#a52a2a; font-family:Arial,Helvetica,sans-serif; color-scheme:light; width:100%; max-width:none; margin:0 auto; container-type:inline-size; border-radius:10px; overflow:clip; }
#tp-pendu .tpm-site *, #tp-pendu .tpm-site *::before, #tp-pendu .tpm-site *::after { box-sizing:border-box; }
#tp-pendu .tpm-game { margin:0 14px; padding:28px; background:var(--tpm-paper); border-radius:22px; }
#tp-pendu .tpm-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
#tp-pendu .tpm-kicker { margin:0 0 8px; color:#526c5e; font:700 11px/1.3 Arial,sans-serif; letter-spacing:1.6px; }
#tp-pendu .tpm-title { font:700 36px/1.12 'Trebuchet MS',Arial,sans-serif; margin:0 0 8px; letter-spacing:-1px; color:#254e3c; }
#tp-pendu .tpm-subtitle { margin:0; font:16px/1.5 Arial,sans-serif; color:#53685d; }
#tp-pendu .tpm-button { appearance:none; border:1px solid #b8cbbd; border-radius:12px; min-height:44px; background:#fffdf7; color:#284b3c; padding:9px 14px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font:600 14px/1.3 Arial,sans-serif; white-space:normal; }
#tp-pendu .tpm-button:hover { background:#eff5eb; }
#tp-pendu .tpm-button svg { width:18px; height:18px; flex:none; }
#tp-pendu .tpm-sound { flex:none; }
#tp-pendu .tpm-choices { display:flex; flex-wrap:wrap; gap:20px 28px; align-items:flex-end; padding:22px 0 20px; margin-bottom:22px; border-bottom:1px solid var(--tpm-line); }
#tp-pendu .tpm-choice-label { display:block; font:600 12px/1.4 Arial,sans-serif; color:#596c61; margin:0 0 7px; }
#tp-pendu .tpm-theme-buttons { display:flex; gap:8px; }
#tp-pendu .tpm-theme[aria-pressed="true"] { background:#e4efdf; border-color:#497a51; color:#274d2e; box-shadow:inset 0 0 0 1px #497a51; }
#tp-pendu .tpm-select { appearance:auto; min-height:44px; padding:9px 30px 9px 12px; background:#fffdf7; border:1px solid #b8cbbd; border-radius:10px; color:#284b3c; font:16px/1.3 Arial,sans-serif; width:100%; }
#tp-pendu .tpm-level { min-width:190px; }
#tp-pendu .tpm-progress { margin-left:auto; align-self:center; color:#52695b; background:#edf2e8; border-radius:8px; padding:9px 12px; white-space:nowrap; font:600 13px/1.4 Arial,sans-serif; }
#tp-pendu .tpm-board { display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:26px; align-items:start; }
#tp-pendu .tpm-reserve { grid-column:2; grid-row:1; background:#f2f5e9; border-radius:16px; padding:22px 15px; text-align:center; }
#tp-pendu .tpm-reserve-title { font:600 12px/1.4 Arial,sans-serif; margin:0 0 8px; color:#536953; }
#tp-pendu .tpm-count { font:700 32px/1.05 'Trebuchet MS',Arial,sans-serif; color:#2c6446; }
#tp-pendu .tpm-count-label { font:600 14px/1.4 Arial,sans-serif; display:block; margin-top:3px; }
#tp-pendu .tpm-pencil { margin:20px auto 14px; height:32px; width:100%; max-width:232px; display:flex; align-items:stretch; gap:0; filter:drop-shadow(0 3px 0 #d5deca); }
#tp-pendu .tpm-eraser { width:16px; flex:none; background:#e39e91; border-radius:8px 0 0 8px; border-right:5px solid #c7c9bb; }
#tp-pendu .tpm-segments { display:grid; grid-template-columns:repeat(8,1fr); flex:1; gap:3px; min-width:0; }
#tp-pendu .tpm-segment { background:linear-gradient(to bottom,#76a368 0 27%,#508643 27% 77%,#396c32 77%); }
#tp-pendu .tpm-segment.used { background:repeating-linear-gradient(135deg,#d7ded2 0 4px,#edf1e7 4px 8px); }
#tp-pendu .tpm-point { width:24px; flex:none; background:linear-gradient(to right,#e3c194 0 65%,#34463c 65%); clip-path:polygon(0 0,100% 50%,0 100%); }
#tp-pendu .tpm-error-count { margin:0; font:13px/1.4 Arial,sans-serif; color:#54634d; }
#tp-pendu .tpm-pencil-note { border-top:1px solid #dbe2d2; padding-top:12px; margin:14px 0 0; font:12px/1.55 Arial,sans-serif; color:#5b6854; }
#tp-pendu .tpm-main { grid-column:1; grid-row:1; min-width:0; }
#tp-pendu .tpm-word-label { margin:0 0 12px; text-align:center; font:600 12px/1.4 Arial,sans-serif; letter-spacing:1px; text-transform:uppercase; color:#6c796b; }
#tp-pendu .tpm-word { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 0 22px; }
#tp-pendu .tpm-letter { width:58px; height:66px; display:flex; align-items:center; justify-content:center; border:1px solid #c8d9c7; border-bottom:4px solid #a1ba9b; background:#f2f6ec; border-radius:10px; font:700 34px/1 'Trebuchet MS',Arial,sans-serif; color:#2d593d; }
#tp-pendu .tpm-letter.missing { background:#faf8ef; border-color:#dfddcf; color:#9da78f; }
#tp-pendu .tpm-letter.revealed { background:#f1edf8; border-color:#c6bbdb; color:#695783; }
#tp-pendu .tpm-hint { display:flex; gap:12px; align-items:flex-start; background:#fff2d5; border:1px solid #eddbaf; border-radius:12px; padding:13px 15px; margin-bottom:20px; }
#tp-pendu .tpm-hint-icon { flex:none; color:#8c6a22; padding-top:1px; }
#tp-pendu .tpm-hint-icon svg { width:20px; height:20px; }
#tp-pendu .tpm-hint strong { display:block; font:600 13px/1.3 Arial,sans-serif; color:#75551b; margin:0 0 3px; }
#tp-pendu .tpm-hint p { margin:0; font:15px/1.5 Arial,sans-serif; color:#614c29; }
#tp-pendu .tpm-hint-open { width:100%; margin-bottom:20px; background:#fff2d5; border-color:#dcc78f; }
#tp-pendu .tpm-keyboard-title { margin:0 0 10px; font:600 14px/1.4 Arial,sans-serif; color:#455c4b; }
#tp-pendu .tpm-keyboard { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:6px; }
#tp-pendu .tpm-key { appearance:none; position:relative; display:flex; justify-content:center; align-items:center; min-width:0; height:48px; padding:0; border:1px solid #bacdba; border-bottom:3px solid #b5c9b4; border-radius:9px; background:#fff; color:#294b39; font:700 21px/1 Arial,sans-serif; }
#tp-pendu .tpm-key.found { background:#dcebd7; border-color:#a5c29b; color:#24562d; }
#tp-pendu .tpm-key.tried { background:#eeece5; border-color:#d0cfc5; color:#666c61; }
#tp-pendu .tpm-key-mark { position:absolute; font:600 11px/1 Arial,sans-serif; right:4px; top:3px; }
#tp-pendu .tpm-legend { display:flex; gap:16px; flex-wrap:wrap; margin:11px 0 0; font:12px/1.4 Arial,sans-serif; color:#627060; }
#tp-pendu [data-finished="true"] .tpm-keyboard-title, #tp-pendu [data-finished="true"] .tpm-keyboard, #tp-pendu [data-finished="true"] .tpm-legend { display:none; }
#tp-pendu .tpm-feedback { display:flex; align-items:flex-start; gap:9px; padding:14px 0 0; min-height:52px; font:15px/1.5 Arial,sans-serif; color:#4e6655; }
#tp-pendu .tpm-feedback svg { width:18px; height:18px; margin-top:3px; flex:none; }
#tp-pendu .tpm-feedback p { margin:0; }
#tp-pendu .tpm-feedback.good { color:#24623b; }
#tp-pendu .tpm-feedback.finished { color:#66577b; }
#tp-pendu .tpm-next { margin-top:12px; background:#2d7053; color:#fff; border-color:#2d7053; min-height:46px; }
#tp-pendu .tpm-next:hover { background:#245b43; }
#tp-pendu .tpm-footer-note { margin:16px 0 0; text-align:center; color:#69776a; font:12px/1.5 Arial,sans-serif; }
#tp-pendu .tpm-accessible { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@container (max-width:800px) {
#tp-pendu .tpm-game { margin:0 8px; padding:20px 16px; border-radius:17px; }
#tp-pendu .tpm-heading { gap:8px; flex-wrap:wrap; }
#tp-pendu .tpm-title { font-size:29px; }
#tp-pendu .tpm-subtitle { font-size:15px; }
#tp-pendu .tpm-kicker { font-size:11px; letter-spacing:1.1px; }
#tp-pendu .tpm-sound { min-height:44px; padding:6px 10px; font-size:12px; }
#tp-pendu .tpm-choices { gap:12px; padding:17px 0 16px; margin-bottom:16px; }
#tp-pendu .tpm-theme-picker { flex:1 0 100%; }
#tp-pendu .tpm-theme-buttons > button { flex:1; }
#tp-pendu .tpm-level { flex:1; min-width:0; }
#tp-pendu .tpm-progress { align-self:flex-end; margin-bottom:5px; margin-left:0; font-size:12px; padding:8px; }
#tp-pendu .tpm-board { display:flex; flex-direction:column; gap:20px; }
#tp-pendu .tpm-reserve { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:0 12px; width:100%; padding:13px 12px; text-align:left; }
#tp-pendu .tpm-reserve-title, #tp-pendu .tpm-pencil-note { display:none; }
#tp-pendu .tpm-count-block { grid-column:1; grid-row:1; }
#tp-pendu .tpm-count { font-size:24px; }
#tp-pendu .tpm-count-label { display:inline; font-size:13px; margin:0 0 0 4px; }
#tp-pendu .tpm-error-count { font-size:12px; grid-column:1; grid-row:2; }
#tp-pendu .tpm-pencil { grid-column:2; grid-row:1 / span 2; margin:0; height:28px; }
#tp-pendu .tpm-main { width:100%; }
#tp-pendu .tpm-word-label { font-size:11px; margin-bottom:9px; }
#tp-pendu .tpm-word { gap:6px; margin-bottom:16px; }
#tp-pendu .tpm-letter { width:48px; height:56px; font-size:29px; border-radius:9px; }
#tp-pendu .tpm-hint { gap:9px; padding:11px 12px; margin-bottom:16px; }
#tp-pendu .tpm-hint p { font-size:14px; }
#tp-pendu .tpm-keyboard { grid-template-columns:repeat(6,minmax(44px,1fr)); gap:4px; }
#tp-pendu .tpm-key { height:44px; font-size:20px; }
#tp-pendu .tpm-feedback { font-size:14px; padding-top:13px; }
#tp-pendu .tpm-next { width:100%; }
}
@container (max-width:340px) {
#tp-pendu .tpm-game { padding:18px 8px; }
#tp-pendu .tpm-title { font-size:27px; }
#tp-pendu .tpm-count-label { font-size:12px; }
#tp-pendu .tpm-reserve { padding:11px 8px; gap:0 8px; }
#tp-pendu .tpm-progress { padding:6px; }
#tp-pendu .tpm-select { padding-left:8px; }
}

/* Compléments d'intégration : aucune règle globale. */
#tp-pendu { text-align:left; }
#tp-pendu [hidden] { display:none !important; }
#tp-pendu button, #tp-pendu select { cursor:pointer; touch-action:manipulation; }
#tp-pendu button:focus-visible, #tp-pendu select:focus-visible { outline:3px solid #174b96; outline-offset:3px; }
#tp-pendu .tpm-key:hover:not([aria-disabled="true"]) { background:#eff5eb; border-color:#497a51; }
#tp-pendu .tpm-key[aria-disabled="true"] { cursor:default; }
#tp-pendu .tpm-theme-symbol, #tp-pendu .tpm-theme-symbol svg { display:block; width:18px; height:18px; }
#tp-pendu .tpm-letter.separator { width:18px; background:none; border:none; }
#tp-pendu .tpm-title, #tp-pendu p { text-align:inherit; padding:0; }
#tp-pendu .tpm-word-label, #tp-pendu .tpm-footer-note { text-align:center; }
#tp-pendu .tpm-reserve p { text-align:inherit; }
#tp-pendu [data-pendu="chargement"] { margin:24px 0 0; font:16px/1.5 Arial,sans-serif; color:#4e6655; }
@media (prefers-reduced-motion:reduce) { #tp-pendu * { scroll-behavior:auto; transition:none; animation:none; } }