/* style.css — habillage SOBRE du socle. La vraie direction artistique
   (monde vivant coloré + signature gravure) vient de la sphère da/ ;
   ici : lisibilité enfant/dyslexie (corps large, interlignage 1.6,
   boutons ≥ 48 px pour les doigts sur tablette). */

:root {
  --fond: #f3efe4;        /* papier naturaliste */
  --encre: #2c3a2e;
  --accent: #3f7d4e;      /* vert prairie */
  --accent-doux: #dff3e4;
  --carte: #fffdf6;
  --erreur: #8a4a3a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.15rem;
  line-height: 1.6;
  background: var(--fond);
  color: var(--encre);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#scene { flex: 1; padding: 1rem 1rem 5.5rem; max-width: 60rem; margin: 0 auto; width: 100%; }

h1 { font-size: 1.9rem; margin: .5rem 0 0; }
h2 { font-size: 1.5rem; }
.sous-titre { margin-top: 0; color: var(--accent); }
.petit { font-size: .9rem; opacity: .75; }

.carte {
  background: var(--carte);
  border: 1px solid #e3dcc8;
  border-radius: 12px;
  padding: 1rem;
  margin: .75rem 0;
  position: relative;
}
.carte.erreur { border-color: var(--erreur); color: var(--erreur); }

button {
  font: inherit;
  min-height: 48px;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: var(--accent-doux);
  color: var(--encre);
  padding: .5rem 1rem;
  cursor: pointer;
}
button:disabled { opacity: .5; cursor: default; }

.portes { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.porte { flex: 1 1 10rem; font-size: 1.2rem; padding: 1.2rem; }

.lire {
  min-height: 40px; min-width: 40px;
  border-radius: 50%;
  padding: .25rem;
  position: absolute; top: .5rem; right: .5rem;
}

.clairiere { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.espece input { width: 100%; font: inherit; padding: .5rem; margin: .25rem 0; border-radius: 8px; border: 1px solid #c9c2ad; }
.bravo { color: var(--accent); font-weight: 600; }

.vue3d { width: 100%; height: min(60vh, 480px); border-radius: 12px; overflow: hidden; touch-action: none; }
.choix-espece { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0; }
.puce.actif { background: var(--accent); color: #fff; }

.planche {
  background: var(--carte);
  border: 2px solid #b9ad8d;
  border-radius: 4px;
  padding: 1.25rem;
  margin: 1rem 0;
  position: relative;
}
.planche.excellence { border-color: #a8862f; box-shadow: 0 0 0 3px #f0e3bb; }
.cadre-gravure {
  border: 1px dashed #b9ad8d;
  padding: 2rem;
  text-align: center;
  color: #9a8f72;
  margin: .5rem 0;
}

#barre {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; gap: .25rem;
  padding: .4rem;
  background: var(--carte);
  border-top: 1px solid #e3dcc8;
}
#barre button { flex: 1; border: none; background: transparent; }
#barre button.actif { background: var(--accent-doux); border: 1px solid var(--accent); }

.retour a { color: var(--accent); }