*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#654482,#29213f);color:#fff;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh;min-height:100dvh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #ffda70;outline-offset:3px}main{max-width:960px;margin:auto;padding:12px}header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-bottom:14px}header a{color:white;text-decoration:none;font-weight:700}h1{font-size:clamp(1.2rem,4vw,2rem);margin:0}#sound{justify-self:end;border:1px solid #ffffff55;border-radius:50%;width:44px;height:44px;background:#ffffff15;color:white}.game{display:grid;grid-template-columns:minmax(160px,280px) minmax(0,1fr);gap:24px;padding:22px;background:#fffaf3;color:#372545;border-radius:22px;box-shadow:0 18px 45px #160c2c66}figure{margin:0;align-self:center}figure img{display:block;width:100%;height:auto;max-height:calc(100dvh - 160px);object-fit:contain;border-radius:14px}.play{align-self:center;min-width:0}.tag{color:#75549a;font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.75rem;margin:0 0 6px}h2{font-size:clamp(1.2rem,3vw,1.65rem);margin:0 0 6px}.instructions{margin:0;font-size:.9rem;color:#786b80}#attempts{font-size:.88rem;font-weight:700;margin:16px 0 10px}#word{display:flex;justify-content:center;gap:4px;margin:12px 0 20px;min-width:0}.letter{flex:1;max-width:42px;min-width:0;border-bottom:3px solid #8e70b0;padding:8px 0;text-align:center;font-size:clamp(1rem,3vw,1.5rem);font-weight:800;background:#f1e9f7;border-radius:6px 6px 0 0}.letter.missed{color:#b33946}#keyboard{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}#keyboard button{height:44px;border:1px solid #d4c2e7;border-radius:9px;background:white;color:#4f3568;font-weight:800;box-shadow:0 3px 0 #e5d8ef}#keyboard button:disabled{cursor:default;box-shadow:none}#keyboard button.correct{background:#d0eed8;border-color:#94cfa5;color:#245f36}#keyboard button.wrong{background:#eee9ec;color:#9b8891;border-color:#ddd3d9;text-decoration:line-through}#status{min-height:2.8em;margin:16px 0 12px;font-size:.95rem;line-height:1.4}.primary{background:#654187;color:white;border:0;border-radius:24px;padding:11px 23px;font-weight:750;min-height:44px}footer{text-align:center;font-size:.78rem;color:#dacfe7;padding-top:12px}
@media(max-width:600px){main{padding:8px}header{margin-bottom:8px;gap:6px}header a{font-size:.85rem}.game{grid-template-columns:1fr;padding:12px;gap:10px;border-radius:16px}figure img{height:clamp(120px,24dvh,190px);width:auto;max-width:100%;margin:auto;max-height:none}.play{text-align:center}.tag{display:none}h2{font-size:1.2rem}.instructions{font-size:.82rem}#attempts{margin:10px 0 6px}#word{margin:8px 0 12px;gap:3px}.letter{padding:5px 0}#keyboard{gap:5px}#status{margin:10px 0;min-height:2.5em}footer{padding-top:8px}}
@media(orientation:landscape) and (max-height:500px){.game{grid-template-columns:minmax(110px,25%) minmax(0,1fr);gap:15px;padding:12px}figure img{height:auto;max-height:260px;width:100%;object-fit:contain}.tag,.instructions{display:none}#keyboard{grid-template-columns:repeat(9,minmax(0,1fr))}#word{margin:8px 0}#status{min-height:0;margin:8px 0}#attempts{margin:8px 0}}

/* Habillage lumineux : conserve la disposition et les règles du jeu. */
body {
  color: #275b78;
  font-family: 'Trebuchet MS', 'Arial Rounded MT Bold', system-ui, sans-serif;
  background: linear-gradient(180deg, #91dafb 0%, #dbf4ff 65%, #effbdc 100%);
  background-attachment: fixed;
  isolation: isolate;
}
body::before {
  content: '';
  position: fixed;
  top: 26px;
  right: 4vw;
  width: 76px;
  height: 76px;
  border: 7px solid #fff7ac;
  border-radius: 50%;
  background: #ffe567;
  box-shadow: 0 0 0 12px #fff5b344;
  pointer-events: none;
  z-index: -1;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 110'%3E%3Cpath fill='%23fff' fill-opacity='.8' d='M39 95C3 95 3 51 33 45C28 14 73 5 92 27C112-8 167 3 174 39C220 24 246 78 212 93C191 106 66 102 39 95Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 3vw 145px;
  background-size: 220px auto;
}
main { position: relative; }
header {
  background: #ffffffd9;
  border: 3px solid white;
  border-radius: 26px;
  padding: 10px 14px;
  box-shadow: 0 5px 0 #70bde333;
}
header a { color: #18659a; }
h1 { color: #217aba; font-weight: 900; text-shadow: 0 2px white; }
#sound { background: #e6f6ff; border: 2px solid #bfe5fb; color: #256693; }
.game {
  background: #ffffffed;
  color: #285b77;
  border-radius: 28px;
  box-shadow: 0 8px 0 #ffffff66, 0 16px 32px #418ca326;
  outline: 3px solid #ffffff;
  outline-offset: -3px;
}
figure img { border-radius: 18px; }
.tag { color: #367a9d; letter-spacing: .04em; }
h2 { color: #217fba; }
.instructions { color: #4a748a; }
#attempts {
  display: inline-block;
  background: #fff4ba;
  color: #735418;
  border-radius: 16px;
  padding: 6px 12px;
}
.letter {
  background: #e6f5ff;
  color: #176ca5;
  border-color: #65b9e5;
  border-radius: 10px;
}
.letter.missed { color: #ac3e3b; }
#keyboard { padding-bottom: 4px; }
#keyboard button {
  --key-bg: #d3eeff;
  --key-edge: #83c4e7;
  background: var(--key-bg);
  color: #254f69;
  border: 2px solid #ffffff;
  border-radius: 13px;
  font-size: 1.1rem;
  font-weight: 900;
  box-shadow: 0 4px 0 var(--key-edge);
}
#keyboard button:nth-child(4n+2) { --key-bg: #ffe69a; --key-edge: #dfbd62; }
#keyboard button:nth-child(4n+3) { --key-bg: #fbd8e6; --key-edge: #df9eba; }
#keyboard button:nth-child(4n+4) { --key-bg: #d6efc4; --key-edge: #9bc783; }
#keyboard button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--key-edge); }
#keyboard button.correct { background: #e8edf0; color: #657780; border-color: #cbd8df; box-shadow: none; }
#keyboard button.wrong { background: #e8edf0; color: #657780; border-color: #cbd8df; box-shadow: none; }
#status { color: #3d6880; }
.primary {
  background: #278bd7;
  color: white;
  border-radius: 18px;
  box-shadow: 0 5px 0 #1769a4;
  font-weight: 800;
}
.primary:active { transform: translateY(3px); box-shadow: 0 2px 0 #1769a4; }
footer { color: #466e7f; padding-top: 18px; }
@media(max-width:600px) {
  header { padding: 7px 9px; border-radius: 20px; }
  .game { border-radius: 22px; }
  body::before { width: 48px; height: 48px; top: 100px; right: 8px; }
  body::after { background-size: 145px auto; background-position: -25px 110px; }
  #attempts { padding: 4px 10px; }
  #keyboard button { border-radius: 11px; }
}

/* Téléphones tactiles en paysage : conserver la partie et demander le portrait. */
@media (orientation: landscape) and (max-height: 600px) and (any-pointer: coarse) {
  body { overflow: hidden; }
  main { display: none; }
  body::before { display: none; }
  body::after {
    content: '↻  Tourne ton téléphone en mode portrait\A\AReprends le jeu avec ton téléphone à la verticale.';
    white-space: pre-line;
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 24px max(24px, env(safe-area-inset-right)) 24px max(24px, env(safe-area-inset-left));
    background: linear-gradient(180deg, #91dafb, #e0f6ff 65%, #effbdc);
    color: #18659a;
    font: 800 clamp(18px, 3vw, 26px)/1.5 'Trebuchet MS', system-ui, sans-serif;
    text-align: center;
    pointer-events: auto;
    overflow-y: auto;
  }
}