/* ===== Thème des fruits de saison ===== */
:root{
  --brand:#e86a9a;
  --ring:#ffd6e8;
}

*{ box-sizing:border-box; }
body{
  margin:0; padding:16px;
  font-family:Arial, sans-serif;
  line-height:1.6; color:#111; background:#fff7fb;
}

header, footer{ text-align:center; }
h1{ margin:6px 0 0; }
header p{ margin:6px 0 16px; color:#6b5560; }

.app{ width:min(100%, 760px); margin:0 auto; }

/* ===== Boutons saisons ===== */
.buttons{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:14px;
}
.season-btn{
  cursor:pointer;
  border:1px solid var(--ring);
  background:#fff; color:#111;
  padding:10px 14px; border-radius:999px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.season-btn:hover{
  transform: translateY(-1px);
  box-shadow:0 8px 20px rgba(233,95,149,.12);
  border-color:#f4b9cf;
}
.season-btn.active{
  background:var(--brand); color:#fff; border-color:var(--brand);
}

/* ===== Zone image ===== */
.viewer{
  display:grid; gap:8px; justify-items:center;
  border:1px solid var(--ring);
  background:#fff;
  border-radius:14px; padding:12px;
}
.viewer img{
  max-width:100%; height:auto; border-radius:12px;
  display:block; background:#f6f2f4;
}
.viewer figcaption{ color:#6b5560; }

/* ===== Lien retour ===== */
.back{
  display:inline-block; margin-top:16px; text-decoration:none;
  color:var(--brand); background:#fff; border:1px solid var(--ring);
  border-radius:999px; padding:6px 12px;
}
.back:hover{ background:#fff0f6; border-color:#f4b9cf; }

/* ===== Focus accessibilité ===== */
button:focus-visible, a:focus-visible{
  outline:3px solid var(--ring); outline-offset:2px;
}