body { font-family: Arial, sans-serif; background: #e8f5e9; margin: 0; text-align: center; }
main { max-width: 480px; margin: 30px auto; padding: 0 12px; }
#grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0; }
.trou { aspect-ratio: 1; background: #6d4c41; border: 4px solid #4e342e; border-radius: 50%;
        position: relative; overflow: hidden; cursor: pointer; }
.trou span { position: absolute; left: 50%; bottom: -70%; transform: translateX(-50%);
             font-size: 3rem; transition: bottom .15s; }
.trou.haut span { bottom: 10%; }
.trou.touche { background: #a5d6a7; }
button { font-size: 1.1rem; padding: 10px 24px; border: 0; border-radius: 6px;
         background: #2e7d32; color: #fff; cursor: pointer; }
button:disabled { background: #9e9e9e; }