/* ZooClic 0.3.0 — structure de l'interface : en-tête, barre d'onglets en bas, hubs et rangées. S'ajoute à contenu.css. */
:root { --hauteur-onglets: 68px; }
#zc { padding-bottom: 28px; }
html.avec-onglets #zc { padding-bottom: calc(var(--hauteur-onglets) + 24px + env(safe-area-inset-bottom, 0px)); }
html.en-cine #zc-onglets, html[data-ecran="seance"] #zc-onglets { display: none; }

/* ---------- Barre d'onglets ---------- */
#zc-onglets { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; pointer-events: none; }
.zc-onglets-bas {
  pointer-events: auto; display: flex; gap: 4px; max-width: 640px; margin: 0 auto;
  padding: 6px max(8px, env(safe-area-inset-left, 0px)) calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--papier); border-top: 3px solid var(--encre);
}
@media (min-width: 700px) {
  #zc-onglets { bottom: 12px; }
  .zc-onglets-bas { border: 3px solid var(--encre); border-radius: 22px; box-shadow: var(--ombre); padding: 6px 8px; }
  html.avec-onglets #zc { padding-bottom: calc(var(--hauteur-onglets) + 40px); }
}
.zc-onglet-bas {
  flex: 1; min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: transparent; border: 0; border-radius: 14px; cursor: pointer; font-family: var(--f-titre); font-weight: 800; color: var(--encre-douce);
}
.zc-onglet-bas .zc-oi { position: relative; display: grid; place-items: center; width: 32px; height: 30px; }
.zc-onglet-bas .zc-oi img, .zc-onglet-bas .zc-oi svg { width: 28px; height: 28px; object-fit: contain; }
.zc-onglet-bas .zc-on { font-size: .78rem; line-height: 1; }
.zc-onglet-bas.actif { background: var(--turquoise); color: #fff; box-shadow: inset 0 0 0 3px var(--encre); }
.zc-onglet-bas .zc-pastille { position: absolute; top: -6px; right: -10px; font-size: .68rem; padding: 0 5px; border: 2px solid var(--encre); line-height: 1.25; }

/* ---------- En-tête ---------- */
.zc-batt-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 4px 12px; background: var(--papier); border: 3px solid var(--encre); border-radius: 999px; box-shadow: var(--ombre); font-weight: 800; cursor: pointer; }
.zc-batt-chip img { height: 22px; width: auto; }
.zc-batt-chip small { color: var(--encre-douce); font-weight: 700; }
.zc-btn-icone { width: 44px; height: 44px; display: grid; place-items: center; background: var(--papier); border: 3px solid var(--encre); border-radius: 50%; box-shadow: var(--ombre); cursor: pointer; padding: 0; }
.zc-btn-icone img, .zc-btn-icone svg { width: 24px; height: 24px; }

/* ---------- Hubs (Gestion, Moi, Sortie) : grosses rangées lisibles ---------- */
.zc-hub { display: grid; gap: 10px; margin-top: 14px; }
.zc-ligne-hub {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; min-height: 64px; padding: 10px 14px;
  background: var(--papier); border: 3px solid var(--encre); border-radius: var(--rayon); box-shadow: var(--ombre); cursor: pointer;
}
.zc-ligne-hub:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--encre); }
.zc-lh-ico { flex: none; width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.6rem; }
.zc-lh-ico img { width: 44px; height: 44px; object-fit: contain; }
.zc-lh-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.zc-lh-txt strong { font-family: var(--f-titre); font-size: 1.1rem; }
.zc-lh-txt small { color: var(--encre-douce); }
.zc-ligne-hub > svg { flex: none; width: 20px; height: 20px; opacity: .55; }
.zc-ligne-hub .zc-pastille { flex: none; }

/* ---------- Zoo : actions et infos sous l'habitat ---------- */
.zc-rangee-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.zc-ligne-info { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 8px; color: var(--encre-douce); }
.zc-alerte-habitat { display: grid; gap: 2px; width: 100%; text-align: left; padding: 10px 14px; margin-bottom: 10px; background: var(--danger-fond); color: var(--danger); border: 3px solid var(--danger); border-radius: var(--rayon); cursor: pointer; }
.zc-alerte-habitat small { color: var(--encre); }

/* ---------- Sortie ---------- */
.zc-ressources { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.zc-bilan-revenus { display: grid; gap: 4px; }
html.avec-onglets .zc-cta { bottom: calc(var(--hauteur-onglets) + 14px + env(safe-area-inset-bottom, 0px)); }
.zc-moi .zc-profil-tete { display: flex; align-items: center; gap: 14px; }
.zc-moi .zc-profil-tete > div { min-width: 0; display: grid; gap: 4px; }

/* ---------- Ordinateur : pages simples centrées, lisibles ---------- */
@media (min-width: 920px) {
  .zc-ecran-simple { max-width: 760px; margin-inline: auto; }
}

/* Apparences pas encore découvertes : silhouette sombre */
.zc-forme-image.silhouette svg, .zc-forme-image.silhouette img { filter: brightness(0); opacity: .35; }

/* Les visiteurs sont plus grands que les petits animaux */
.zc-visiteur { width: 18%; }