/* Fluff v0 — caddie de golf premium, calme et confiant.
   Plein soleil, une main, gants. Crème chaud, encre presque noire, vert sapin
   signature, un seul accent sable pour les états choisis. Aucune information
   n'est portée par la couleur seule : ✓ pour un choix, ▸/▾ pour un panneau. */

:root {
  --creme: #f6f1e6;
  --carte: #fffcf5;
  --encre: #17191c;
  --encre-douce: #4a4d52;
  --encre-pale: #8a8d93;
  --sapin: #1f4d2e;
  --sapin-sombre: #153622;
  --sapin-clair: #2a6a3e;
  --sable: #d9b96f;
  --sable-sombre: #b8933f;
  --sur-sapin: #fbf8f0;
  --rayon: 20px;
  --rayon-petit: 14px;
  --ombre: 0 1px 2px rgba(23, 25, 28, 0.10), 0 3px 8px rgba(23, 25, 28, 0.10);
  --ombre-appui: 0 1px 2px rgba(23, 25, 28, 0.14);
  --liseret: 1.5px solid rgba(23, 25, 28, 0.18);
  --hauteur-tap: 64px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 18px; -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  background: var(--creme);
  color: var(--encre);
  line-height: 1.3;
  max-width: 560px;
  margin: 0 auto;
  padding: 14px 14px calc(24px + env(safe-area-inset-bottom));
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Commandes ---------- */

button, select, input[type="text"] {
  font: inherit;
  color: var(--encre);
  background: var(--carte);
  border: var(--liseret);
  border-radius: var(--rayon-petit);
  box-shadow: var(--ombre);
  width: 100%;
  min-height: var(--hauteur-tap);
}

button {
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 14px;
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 80ms ease;
}

button:active {
  transform: translateY(1px);
  box-shadow: var(--ombre-appui);
}

/* État choisi : sable ET coche. */
button.actif {
  background: var(--sable);
  border-color: var(--sable-sombre);
  color: var(--encre);
}
button.actif::before { content: "✓ "; }

select {
  font-weight: 800;
  font-size: 1.25rem;
  padding: 0 48px 0 14px;
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--encre) 50%),
                    linear-gradient(135deg, var(--encre) 50%, transparent 50%);
  background-position: calc(100% - 24px) 50%, calc(100% - 16px) 50%;
  background-size: 8px 8px;
  background-repeat: no-repeat;
}

input[type="text"] { font-size: 1.2rem; padding: 0 14px; box-shadow: none; }

input[type="range"] { width: 100%; height: 44px; accent-color: var(--sapin); }

/* ---------- En-tête ---------- */

.entete { margin-bottom: 18px; }

.marque {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.38em;
  text-indent: 0.38em;
  color: var(--encre-douce);
  margin: 2px 0 12px;
}

.trou { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.trou label { font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }

/* Compteur de distance : la donnée reine, lisible comme un panneau. */
#distance-green {
  background: var(--encre);
  color: var(--creme);
  border-radius: var(--rayon);
  padding: 16px 18px 14px;
  text-align: center;
  box-shadow: var(--ombre);
}
#distance-green .valeur {
  display: block;
  font-size: 3.4rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
#distance-green .detail {
  display: block;
  margin-top: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(246, 241, 230, 0.78);
}

/* ---------- Parole de la voix ---------- */

#affichage {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.32;
  background: var(--carte);
  border-left: 12px solid var(--sapin);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 18px 18px 18px 20px;
  min-height: 120px;
  margin-bottom: 18px;
}

/* ---------- Le bouton principal ---------- */

button.principal {
  min-height: 124px;
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: var(--sur-sapin);
  background: linear-gradient(180deg, var(--sapin-clair) 0%, var(--sapin) 60%, var(--sapin-sombre) 100%);
  border: none;
  border-radius: var(--rayon);
  box-shadow: 0 2px 4px rgba(21, 54, 34, 0.25), 0 10px 22px rgba(21, 54, 34, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.18);
  margin-bottom: 18px;
}
button.principal:active {
  transform: translateY(2px);
  background: linear-gradient(180deg, var(--sapin) 0%, var(--sapin-sombre) 100%);
  box-shadow: 0 1px 2px rgba(21, 54, 34, 0.3), 0 4px 10px rgba(21, 54, 34, 0.25);
}

/* ---------- Réponses ---------- */

#reponses { margin-bottom: 18px; }
#reponses button.reponse {
  min-height: 76px;
  font-size: 1.15rem;
  margin-bottom: 10px;
}
.ligne-club { display: flex; gap: 10px; }
.ligne-club input { flex: 1; }
#btn-club { width: 96px; flex: none; }

/* ---------- Outils secondaires ---------- */

.outils {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 22px;
}
.outils #btn-repeter { grid-column: 1 / -1; }

/* ---------- Panneaux ---------- */

.panneau {
  background: var(--carte);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  margin-bottom: 14px;
}
.panneau > summary {
  list-style: none;
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  min-height: 60px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--encre);
}
.panneau > summary::-webkit-details-marker { display: none; }
.panneau > summary::before { content: "▸"; width: 1.3em; color: var(--sapin); }
.panneau[open] > summary::before { content: "▾"; }
.panneau[open] > summary { border-bottom: 1px solid rgba(23, 25, 28, 0.10); }
.panneau > :not(summary) { margin: 14px 16px; }

.bloc { margin-bottom: 8px; }

.etiquette {
  display: block;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--encre-douce);
  margin-bottom: 8px;
}

.groupe { display: flex; gap: 8px; margin-bottom: 10px; }
.groupe button { min-height: 58px; font-size: 0.85rem; padding: 0 6px; letter-spacing: 0.03em; }

.reglages-voix .curseur { flex: 1; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--encre-douce); }

#selecteur-voix { font-size: 1rem; min-height: 54px; margin-bottom: 10px; }

/* Cartographie */
#carto-etat { font-weight: 700; white-space: pre-line; color: var(--encre-douce); }
#carto button { margin-bottom: 10px; }
#zone-export {
  width: 100%;
  font: 0.85rem Menlo, monospace;
  background: var(--creme);
  border: var(--liseret);
  border-radius: var(--rayon-petit);
  padding: 10px;
}

/* Tige : journal replié */
.sous-panneau { border-top: 1px solid rgba(23, 25, 28, 0.10); padding-top: 10px; }
.sous-panneau > summary { font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--encre-douce); min-height: 44px; display: flex; align-items: center; cursor: pointer; }
#journal-tige {
  font: 0.78rem Menlo, monospace;
  background: var(--creme);
  border-radius: var(--rayon-petit);
  padding: 10px;
  white-space: pre-wrap;
  margin-top: 8px;
  color: var(--encre-douce);
}

/* ---------- Stats ---------- */

#stats-latence {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--encre-douce);
  padding: 10px;
  font-variant-numeric: tabular-nums;
}

.cache { display: none; }

#etat-neuronal {
  font: 0.8rem Menlo, monospace;
  color: var(--encre-douce);
  background: var(--creme);
  border-radius: var(--rayon-petit);
  padding: 8px 10px;
  margin-top: 8px;
  word-break: break-word;
}