From 69bcf467bcafcc72d39e5c2bd755e4186f8fb1a6 Mon Sep 17 00:00:00 2001
From: Christophe <christophe@jeannerot.fr>
Date: Sun, 12 Apr 2026 20:23:27 +0200
Subject: [PATCH] =?UTF-8?q?Corrige=20les=20s=C3=A9lecteurs=20de=20configur?=
 =?UTF-8?q?ation=20sur=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 styles.css | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/styles.css b/styles.css
index cbbf178..a13bab5 100644
--- a/styles.css
+++ b/styles.css
@@ -480,6 +480,65 @@ textarea:focus {
   left: 1rem;
   width: 1.1rem;
   height: 1.1rem;
+  margin: 0;
+  appearance: none;
+  -webkit-appearance: none;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--panel-border-strong);
+  background: #0c0c0c;
+  box-shadow: none;
+  cursor: pointer;
+}
+
+.option-card input[type="radio"] {
+  border-radius: 999px;
+}
+
+.option-card input[type="checkbox"] {
+  border-radius: 0.35rem;
+}
+
+.option-card input::before {
+  content: "";
+  display: block;
+  transition: transform 160ms ease;
+  transform: scale(0);
+}
+
+.option-card input:checked {
+  border-color: rgba(52, 141, 255, 0.55);
+  background: rgba(17, 103, 255, 0.12);
+}
+
+.option-card input[type="radio"]::before {
+  width: 0.52rem;
+  height: 0.52rem;
+  border-radius: 999px;
+  background: var(--cool);
+}
+
+.option-card input[type="checkbox"]::before {
+  width: 0.6rem;
+  height: 0.32rem;
+  margin-top: -0.04rem;
+  border-left: 2px solid var(--cool);
+  border-bottom: 2px solid var(--cool);
+  transform: rotate(-45deg) scale(0);
+  transform-origin: center;
+}
+
+.option-card input:checked::before {
+  transform: scale(1);
+}
+
+.option-card input[type="checkbox"]:checked::before {
+  transform: rotate(-45deg) scale(1);
+}
+
+.option-card:has(input:focus-visible) {
+  outline: 2px solid rgba(52, 141, 255, 0.45);
+  outline-offset: 2px;
 }
 
 .option-card:has(input:checked) {