/* ===== INGRÉDIENTS ===== */
.ing-page { padding: 40px 0 20px; }
.ing-head { text-align: center; margin-bottom: 26px; }
.ing-head h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); display:inline-flex; align-items:center; gap:10px; }
.ing-head p { color: var(--muted); max-width: 60ch; margin: 6px auto 0; }

/* Onglets */
.ing-tabs { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom: 30px; }
.ing-tab { display:flex; align-items:center; gap:8px; padding:10px 22px; border-radius:30px;
  background:#efe7db; color:var(--taupe); font-weight:700; font-size:.9rem; border:0; cursor:pointer; transition:.2s; }
.ing-tab.active { background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.06); color:var(--rosegold); }

/* Grille de vignettes */
.ing-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.ing-cell { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 10px 12px;
  text-align:center; cursor:pointer; transition:.2s; }
.ing-cell:hover { transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,.08); }
.ing-cell .thumb { width:78px; height:78px; border-radius:50%; object-fit:cover; margin:0 auto 10px; display:block;
  border:3px solid #efe7db; }
.ing-cell h4 { font-family:var(--serif); font-size:1.05rem; margin:0 0 6px; }
.ing-cell .arrow { width:22px;height:22px;border-radius:50%;border:1px solid var(--sage);color:var(--sage);
  display:grid;place-items:center;margin:0 auto;font-size:.7rem; }

.ing-tabpane { display:none; }
.ing-tabpane.active { display:block; }

/* Bandeau bas bibliothèque */
.ing-note { display:flex; flex-direction:column; align-items:center; gap:18px;
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px; margin-top:30px; text-align:center; }
.ing-note img { height:150px; width:auto; max-width:100%; border-radius:12px; object-fit:cover; }
.ing-note .txt { max-width:560px; }
.ing-note .txt h3 { font-family:var(--serif); font-size:1.35rem; }
.ing-note .txt p { color:var(--muted); font-size:.92rem; }

/* ===== Fiche détail (overlay latéral) ===== */
.ing-detail { position:fixed; inset:0; background:rgba(40,32,26,.5); z-index:200; display:none;
  justify-content:flex-end; }
.ing-detail.open { display:flex; }
.ing-detail-panel { width:min(880px,96%); background:#faf6f0; height:100%; overflow-y:auto;
  padding:0 0 40px; box-shadow:-10px 0 40px rgba(0,0,0,.2); }
.detail-hero { position:relative; }
.detail-hero img { width:60%; height:300px; object-fit:cover; border-bottom-right-radius:120px; }
.detail-close { position:absolute; top:18px; right:18px; width:40px;height:40px;border-radius:50%;
  background:#efe7db; border:0; cursor:pointer; font-size:1.1rem; color:var(--taupe); }
.detail-title { position:absolute; left:62%; top:30px; }
.detail-title h2 { font-size:2.4rem; margin:0; }
.detail-title .latin { font-style:italic; color:var(--muted); margin-bottom:16px; }
.detail-meta { display:grid; gap:10px; font-size:.82rem; }
.detail-meta .row { display:flex; gap:8px; align-items:flex-start; }
.detail-meta .row b { color:var(--taupe); font-family:var(--serif); font-weight:600; }
.detail-body { padding: 24px 40px; }
.detail-cols { display:grid; grid-template-columns:1fr 1fr; gap:34px; border-top:1px solid var(--line); padding-top:22px; }
.detail-cols h3 { font-size:1.2rem; display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.detail-cols ul { margin:0; padding-left:18px; }
.detail-cols li { font-size:.85rem; margin-bottom:7px; color:var(--text); }
.detail-rec { display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:26px; border-top:1px solid var(--line); padding-top:22px; }
.rec-line { display:flex; justify-content:space-between; align-items:center; font-size:.82rem; margin-bottom:8px; }
.dots { display:flex; gap:5px; }
.dot { width:9px;height:9px;border-radius:50%;border:1px solid var(--sage); }
.dot.on { background:var(--sage); }
.detail-prec { margin-top:26px; border-top:1px solid var(--line); padding-top:20px; }
.detail-prec h3 { font-size:1.15rem; display:flex; align-items:center; gap:8px; }
.detail-prec ul { padding-left:18px; }
.detail-prec li { font-size:.84rem; margin-bottom:6px; }

@media (max-width:980px){
  .ing-grid{ grid-template-columns:repeat(3,1fr); }
  .detail-hero img{ width:100%; border-bottom-right-radius:0; }
  .detail-title{ position:static; padding:20px 40px 0; }
  .detail-cols,.detail-rec{ grid-template-columns:1fr; gap:20px; }
  .ing-note{ grid-template-columns:1fr; text-align:center; }
}
@media (max-width:560px){ .ing-grid{ grid-template-columns:repeat(2,1fr);} }