/* Journal de grimpe — édition web v1.11 */
:root {
  --primaire: #2e6f40;
  --secondaire: #d9822b;
  --fond: #fafaf7;
  --texte: #1e1e1e;
  --erreur: #b3261e;
  --bord: #d8d5cc;
  --carte: #ffffff;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fond);
  color: var(--texte);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#app { display: flex; flex-direction: column; min-height: 100vh; flex: 1; }

#topbar {
  background: var(--primaire);
  color: #fff;
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
#topbar .brand { font-weight: bold; font-size: 1.1rem; }
#nav { display: flex; gap: 0.25rem; flex-wrap: wrap; }
#nav a {
  color: #fff;
  text-decoration: none;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
}
#nav a.active, #nav a:hover { background: rgba(255, 255, 255, 0.22); }

#banner {
  margin: 0.75rem auto 0;
  max-width: 60rem;
  width: calc(100% - 2rem);
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  background: #fdecea;
  color: var(--erreur);
  border: 1px solid var(--erreur);
}
#banner.info { background: #e8f3ea; color: var(--primaire); border-color: var(--primaire); }

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

#pied {
  text-align: center;
  padding: 0.8rem;
  color: #666;
  font-size: 0.9rem;
  border-top: 1px solid var(--bord);
  background: var(--carte);
}

h1 { font-size: 1.4rem; margin: 0.4rem 0 1rem; }
h2 { font-size: 1.1rem; margin: 1.2rem 0 0.5rem; }

form.fiche, .carte-liste, .connexion {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}
.connexion { max-width: 26rem; margin: 3rem auto; }

label.champ { display: block; margin-bottom: 0.8rem; font-weight: 600; }
label.champ > span.libelle, .libelle { display: block; font-weight: 600; margin-bottom: 0.25rem; }
input[type="text"], input[type="password"], input[type="number"], input[type="date"],
select, textarea {
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--bord);
  border-radius: 6px;
  font: inherit;
  background: #fff;
  color: var(--texte);
}
textarea { min-height: 5rem; }
input[type="checkbox"], input[type="radio"] { width: auto; }
.aide { font-weight: 400; font-size: 0.85rem; color: #555; margin-top: 0.2rem; }

.boutons { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }
button, .bouton {
  font: inherit;
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  border: 1px solid var(--primaire);
  background: var(--primaire);
  color: #fff;
  cursor: pointer;
}
button.secondaire, .bouton.secondaire { background: #fff; color: var(--primaire); }
button.danger { background: #fff; color: var(--erreur); border-color: var(--erreur); }
button:disabled { opacity: 0.5; cursor: default; }

.liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.liste > li {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
}
.liste .titre { font-weight: 700; }
.liste .sous { color: #555; font-size: 0.9rem; }
.liste .actions { margin-top: 0.5rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.liste .actions button { padding: 0.25rem 0.6rem; font-size: 0.9rem; }

.badge {
  display: inline-block;
  font-size: 0.78rem;
  padding: 0.1rem 0.45rem;
  border-radius: 10px;
  background: #eee;
  border: 1px solid var(--bord);
  margin-left: 0.4rem;
}
.badge.public { background: #fdeeda; border-color: var(--secondaire); color: #8a5413; }

.filtres { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem;
  background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; padding: 0.8rem 1rem; }
.filtres label { display: block; font-size: 0.85rem; font-weight: 600; }
.filtres select, .filtres input { width: auto; min-width: 10rem; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.3rem 0; }
.chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: #eef2ee; border: 1px solid var(--bord); border-radius: 14px;
  padding: 0.2rem 0.3rem 0.2rem 0.6rem; font-size: 0.9rem;
}
.chip .chip-x { border: none; background: none; color: var(--erreur); padding: 0 0.25rem; font-size: 1rem; }
.chip-cb { font-weight: 400; font-size: 0.8rem; display: inline-flex; align-items: center; gap: 0.2rem; }
.chip-add { display: flex; gap: 0.4rem; }
.chip-add input { flex: 1; }

.grille-photos { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.5rem; }
.thumb { position: relative; width: 110px; }
.thumb img { width: 110px; height: 110px; object-fit: cover; border-radius: 6px; border: 1px solid var(--bord); background: #eee; }
.thumb button { position: absolute; top: 2px; right: 2px; padding: 0 0.35rem; font-size: 0.85rem; }
.thumb .partage { display: block; font-size: 0.72rem; color: #555; margin-top: 0.15rem; }

.coche-liste { display: flex; flex-direction: column; gap: 0.3rem; max-height: 16rem; overflow: auto;
  border: 1px solid var(--bord); border-radius: 6px; padding: 0.5rem; background: #fff; }
.coche-liste label { display: flex; gap: 0.4rem; align-items: center; font-weight: 400; }
.coche-liste select { width: auto; min-width: 12rem; margin-left: auto; }

.deux-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 40rem) { .deux-col { grid-template-columns: 1fr; } }

.pastille { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 50%; margin-right: 0.3rem; vertical-align: -0.1rem; }
.couleurs-ligne { display: flex; align-items: center; gap: 0.4rem; }
.vide { color: #666; font-style: italic; }