/* ref.css — styles partagés des pages "Repères" (comparatifs, bases, annuaire).
   Consomme les tokens :root du front (terracotta/olivier, Fraunces/Inter) + tools.css.
   Aucune dépendance externe. */

.ref-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:18px; }
.ref-toolbar .tool-input, .ref-toolbar .tool-select { flex:1; min-width:180px; }
.ref-count { font-size:.9rem; color:var(--text-muted,#8A8170); margin:0 0 14px; }
.ref-count strong { color:var(--primary,#C0633C); }

/* Tableau comparatif */
.cmp-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border-color,#E0D6C4); border-radius:var(--radius-md,12px); }
.cmp { width:100%; border-collapse:collapse; font-size:.93rem; min-width:560px; }
.cmp th, .cmp td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--border-color,#E0D6C4); vertical-align:top; }
.cmp thead th { font-family:var(--font-sans,'Inter',sans-serif); font-weight:600; color:var(--text-muted,#8A8170); background:var(--bg-cream,#F5EEE2); white-space:nowrap; position:sticky; top:0; }
.cmp th.sortable { cursor:pointer; user-select:none; }
.cmp th.sortable::after { content:'↕'; opacity:.4; margin-left:6px; font-size:.85em; }
.cmp th.sortable.asc::after { content:'↑'; opacity:1; }
.cmp th.sortable.desc::after { content:'↓'; opacity:1; }
.cmp tbody tr:hover { background:var(--bg-cream,#F5EEE2); }
.cmp .name { font-weight:600; color:var(--text-dark,#2A2620); }
.cmp .sub { display:block; font-size:.82rem; color:var(--text-muted,#8A8170); font-weight:400; margin-top:2px; }

/* Pastilles & indicateurs */
.tag { display:inline-block; font-size:.76rem; padding:2px 9px; border-radius:999px; background:var(--bg-cream,#F5EEE2);
  border:1px solid var(--border-color,#E0D6C4); color:var(--text-muted,#8A8170); white-space:nowrap; }
.tag.terra { background:#F6EAE2; border-color:#E3C4B2; color:#8A4226; }
.tag.olive { background:#E7E9E1; border-color:#cfd5c4; color:#4b5238; }
.dots { display:inline-flex; gap:3px; vertical-align:middle; }
.dots i { width:9px; height:9px; border-radius:999px; background:var(--border-color,#E0D6C4); display:inline-block; }
.dots i.on { background:var(--primary,#C0633C); }
.tier { font-weight:600; color:var(--secondary,#6E7553); letter-spacing:1px; }
.tier .off { color:var(--text-faint,#C9BCA6); }

/* Cartes (bases, annuaire) */
.ref-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.ref-card { background:var(--bg-white,#fff); border:1px solid var(--border-color,#E0D6C4); border-radius:var(--radius-md,12px); padding:20px 22px; box-shadow:var(--shadow-soft,0 10px 30px rgba(44,37,32,0.04)); }
.ref-card h3 { font-family:var(--font-serif,'Fraunces',serif); font-size:1.2rem; color:var(--text-dark,#2A2620); margin:0 0 6px; display:flex; align-items:center; gap:8px; }
.ref-card .meta { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 10px; }
.ref-card p { color:var(--text-muted,#8A8170); font-size:.92rem; line-height:1.55; margin:0 0 8px; }
.ref-card .kv { font-size:.86rem; color:var(--text-dark,#2A2620); margin:4px 0; }
.ref-card .kv b { color:var(--text-muted,#8A8170); font-weight:600; }

/* Blocs par région / catégorie (accordéon) */
.region { border:1px solid var(--border-color,#E0D6C4); border-radius:var(--radius-md,12px); margin-bottom:12px; overflow:hidden; }
.region > summary { font-family:var(--font-serif,'Fraunces',serif); font-size:1.15rem; color:var(--text-dark,#2A2620);
  padding:16px 18px; cursor:pointer; list-style:none; background:var(--bg-white,#fff); display:flex; justify-content:space-between; align-items:center; }
.region > summary::-webkit-details-marker { display:none; }
.region > summary::after { content:'+'; color:var(--primary,#C0633C); font-weight:700; }
.region[open] > summary::after { content:'–'; }
.region .region-body { padding:4px 18px 18px; }

.ref-note { margin-top:18px; background:#F6EAE2; border-left:3px solid var(--primary,#C0633C); border-radius:8px; padding:14px 16px; color:#8A4226; font-size:.9rem; line-height:1.6; }

/* FAQ (partagé) */
.faq { margin-top:14px; }
.faq details { border-bottom:1px solid var(--border-color,#E0D6C4); padding:14px 0; }
.faq summary { font-family:var(--font-serif,'Fraunces',serif); font-size:1.08rem; color:var(--text-dark,#2A2620); cursor:pointer; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::before { content:'+'; color:var(--primary,#C0633C); font-weight:700; margin-right:10px; }
.faq details[open] summary::before { content:'–'; }
.faq p { margin:12px 0 0; color:var(--text-muted,#8A8170); line-height:1.7; }