*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ground:       #EFE6CF;
  --card:         #FDFAF4;
  --text:         #2C1810;
  --muted:        #7A6455;
  --accent:       #C4622D;
  --accent-light: #F7E8DC;
  --border:       rgba(44,24,16,.12);
  --serif:        Georgia,'Times New Roman',serif;
  --sans:         system-ui,-apple-system,sans-serif;
  --mono:         'Courier New',Courier,monospace;
  /* categories */
  --c-citadine:   #C4622D;
  --c-berline:    #8B6A4F;
  --c-utilitaire: #5B8C85;
  --c-4x4:        #6B7C4A;
  --c-classique:  #7A5272;
  /* decades */
  --d-60s: #8B5A2B;
  --d-70s: #9B7A2A;
  --d-80s: #C4622D;
  --d-90s: #7A8C6A;
  --d-2000s: #5B7A8C;
}

body { background:var(--ground); color:var(--text); font-family:var(--sans); font-size:15px; line-height:1.5; }

/* ── HEADER ─────────────────────────────── */
.page-header { background:var(--text); padding:3rem 2rem 2.5rem; text-align:center; }
.page-header h1 { font-family:var(--serif); font-size:clamp(2.2rem,5vw,3.8rem); font-weight:normal; color:#FBF7EF; letter-spacing:-.02em; line-height:1.1; }
.page-header .edition { margin-top:.4rem; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.kpi-row { display:flex; justify-content:center; gap:clamp(1.5rem,4vw,3.5rem); margin-top:1.8rem; flex-wrap:wrap; }
.kpi { text-align:center; }
.kpi strong { display:block; font-family:var(--serif); font-weight:normal; font-size:clamp(1.8rem,3.5vw,2.6rem); color:#FBF7EF; line-height:1; }
.kpi span { font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(251,247,239,.5); }

/* ── LAYOUT ─────────────────────────────── */
main { max-width:1180px; margin:0 auto; padding:2rem 1.25rem 5rem; display:flex; flex-direction:column; gap:1.25rem; }
.stats-row { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; align-items:start; }
.stats-col { display:flex; flex-direction:column; gap:1.25rem; }
@media(max-width:680px){ .stats-row { grid-template-columns:1fr; } }

/* ── CARD ────────────────────────────────── */
.card { background:var(--card); border:1px solid var(--border); border-radius:3px; padding:1.5rem 1.75rem; }
.card-header { display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--border); padding-bottom:.75rem; margin-bottom:1.25rem; }
.card-title { font-family:var(--serif); font-size:.85rem; font-weight:normal; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.filter-tag { font-size:.75rem; color:var(--accent); border:1px solid var(--accent); border-radius:2px; padding:.15rem .45rem; cursor:pointer; display:none; background:transparent; font-family:var(--sans); transition:background .15s,color .15s; }
.filter-tag:hover { background:var(--accent); color:#fff; }

/* ── BAR CHART ───────────────────────────── */
.bar-row { display:flex; align-items:center; gap:.75rem; padding:.45rem .25rem; border-radius:2px; cursor:pointer; position:relative; transition:background .12s; }
.bar-row.no-click { cursor:default; }
.bar-row:not(.no-click):hover,.bar-row.active { background:var(--accent-light); }
.bar-ghost { position:absolute; right:.5rem; top:50%; transform:translateY(-50%); font-family:var(--serif); font-size:3.5rem; font-weight:bold; color:var(--text); opacity:.045; line-height:1; pointer-events:none; user-select:none; }
.bar-label { width:5.5rem; font-size:.875rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:0; }
.bar-label.wide { width:9.5rem; }
.bar-track { flex:1; height:5px; background:var(--border); border-radius:3px; overflow:hidden; }
.bar-fill { height:100%; border-radius:3px; width:0; transition:width .55s cubic-bezier(.4,0,.2,1); }
.bar-fill.accent { background:var(--accent); }
.bar-n { font-family:var(--mono); font-size:.78rem; color:var(--muted); width:1.8rem; text-align:right; flex-shrink:0; }
.bar-hint { font-size:.7rem; color:var(--accent); opacity:0; transition:opacity .15s; white-space:nowrap; font-style:italic; flex-shrink:0; }
.bar-row:not(.no-click):hover .bar-hint,.bar-row.active .bar-hint { opacity:1; }
.bar-row.active .bar-hint { font-style:normal; font-weight:600; }

/* ── COULEUR PILLS ───────────────────────── */
.pills { display:flex; flex-wrap:wrap; gap:.45rem; }
.pill { display:flex; align-items:center; gap:.4rem; padding:.25rem .6rem; border:1px solid var(--border); border-radius:20px; font-size:.78rem; background:var(--card); }
.pill-swatch { width:11px; height:11px; border-radius:50%; border:1px solid rgba(0,0,0,.18); flex-shrink:0; }
.pill-name { font-weight:500; }
.pill-n { color:var(--muted); font-family:var(--mono); font-size:.72rem; }

/* ── CATEGORIES ──────────────────────────── */
.cat-stack { height:14px; border-radius:3px; display:flex; overflow:hidden; margin-bottom:1.25rem; gap:2px; }
.cat-segment { height:100%; transition:width .6s cubic-bezier(.4,0,.2,1); }
.cat-legend { display:flex; flex-wrap:wrap; gap:.5rem .9rem; }
.cat-item { display:flex; align-items:center; gap:.4rem; font-size:.82rem; cursor:default; }
.cat-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.cat-count { font-family:var(--mono); color:var(--muted); font-size:.75rem; }

/* ── GENERATIONS ─────────────────────────── */
.gen-bars { display:flex; flex-direction:column; gap:.1rem; }

/* ── COLLAPSIBLE ─────────────────────────── */
.card-toggle { background:none; border:none; cursor:pointer; color:var(--muted); font-size:.8rem; padding:.1rem .3rem; border-radius:2px; transition:color .15s,background .15s; display:flex; align-items:center; gap:.3rem; }
.card-toggle:hover { color:var(--accent); background:var(--accent-light); }
.toggle-chevron { display:inline-block; transition:transform .25s ease; }
.card-collapsible { overflow:hidden; max-height:4000px; transition:max-height .4s ease,opacity .3s ease; opacity:1; }
.card-collapsible.collapsed { max-height:0; opacity:0; }

/* ── SIMULATOR ───────────────────────────── */
.sim-layout { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
@media(max-width:760px){ .sim-layout { grid-template-columns:1fr; } }

.sim-section-title { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.75rem; padding-bottom:.4rem; border-bottom:1px solid var(--border); }

.sim-row { display:flex; align-items:center; gap:.75rem; margin-bottom:.7rem; }
.sim-label { font-size:.82rem; flex:1; min-width:0; }
.sim-label small { display:block; color:var(--muted); font-size:.72rem; }
.sim-fixed { font-family:var(--mono); font-size:.82rem; color:var(--muted); white-space:nowrap; }

.sim-slider-group { display:flex; align-items:center; gap:.5rem; }
.sim-slider-group input[type=range] { width:7rem; accent-color:var(--accent); cursor:pointer; }
.sim-val { font-family:var(--mono); font-size:.82rem; color:var(--text); min-width:4rem; text-align:right; }
.sim-val.gain { color:#4A9E5C; font-weight:600; }

.sim-toggle { display:flex; align-items:center; gap:.5rem; }
.sim-toggle input[type=checkbox] { accent-color:var(--accent); width:14px; height:14px; cursor:pointer; }

.sim-participants { display:flex; gap:.5rem; margin-bottom:.75rem; }
.sim-part-btn { flex:1; padding:.4rem; border:1px solid var(--border); border-radius:2px; background:var(--ground); color:var(--text); font-family:var(--sans); font-size:.85rem; cursor:pointer; transition:background .12s,border-color .12s; }
.sim-part-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }

.sim-result { background:var(--text); border-radius:3px; padding:1.25rem 1.5rem; }
.sim-total-label { font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(251,247,239,.5); margin-bottom:.3rem; }
.sim-total { font-family:var(--serif); font-size:clamp(2rem,4vw,3rem); font-weight:normal; color:#FBF7EF; line-height:1; }
.sim-per-person { margin-top:.5rem; font-size:.82rem; color:var(--accent); }
.sim-breakdown { margin-top:1.25rem; display:flex; flex-direction:column; gap:.4rem; }
.sim-line { display:flex; justify-content:space-between; align-items:center; font-size:.8rem; color:rgba(251,247,239,.65); }
.sim-line strong { color:#FBF7EF; font-family:var(--mono); }
.sim-line.total-line { border-top:1px solid rgba(251,247,239,.15); padding-top:.5rem; margin-top:.25rem; color:rgba(251,247,239,.85); }

/* ── TABLE ───────────────────────────────── */
.table-controls { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
#search { flex:1; padding:.55rem .9rem; border:1px solid var(--border); border-radius:2px; background:var(--ground); color:var(--text); font-family:var(--sans); font-size:.875rem; outline:none; transition:border-color .15s,box-shadow .15s; }
#search:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(196,98,45,.12); }
#result-count { font-size:.78rem; color:var(--muted); font-family:var(--mono); white-space:nowrap; }
.table-wrapper { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.855rem; }
thead th { text-align:left; padding:.55rem .75rem; border-bottom:2px solid var(--text); font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); white-space:nowrap; cursor:pointer; user-select:none; font-weight:600; background:var(--card); }
thead th:hover { color:var(--accent); }
thead th.asc::after  { content:' ↑'; color:var(--accent); }
thead th.desc::after { content:' ↓'; color:var(--accent); }
tbody tr { border-bottom:1px solid var(--border); }
tbody tr:hover { background:var(--accent-light); }
td { padding:.55rem .75rem; vertical-align:middle; }
.td-num { font-family:var(--mono); font-weight:bold; color:var(--muted); font-size:.8rem; }
.td-marque { font-weight:600; }
.td-couleur-cell { display:flex; align-items:center; gap:.4rem; white-space:nowrap; }
.td-swatch { width:10px; height:10px; border-radius:50%; border:1px solid rgba(0,0,0,.15); flex-shrink:0; }
.sponsor-tag { display:inline-block; padding:.1rem .38rem; background:var(--ground); border:1px solid var(--border); border-radius:2px; margin:.1rem .1rem .1rem 0; font-size:.73rem; white-space:nowrap; }
.sponsor-tag.orga { opacity:.35; }
.td-cat { font-size:.75rem; font-weight:600; }
.td-photos { text-align:center; }
.td-photos a { color:var(--muted); text-decoration:none; display:inline-flex; align-items:center; opacity:.6; transition:opacity .15s,color .15s; }
.td-photos a:hover { opacity:1; color:var(--accent); }

@media(prefers-reduced-motion:reduce){ .bar-fill,.cat-segment { transition:none; } }

/* ── EXPAND ALL BTN ─────────────────────── */
#expand-all-btn {
  position:fixed; bottom:1.5rem; right:1.5rem;
  display:flex; align-items:center;
  padding:.6rem;
  background:var(--text); color:#FBF7EF;
  border:none; border-radius:3px;
  font-family:var(--sans); font-size:.8rem;
  cursor:pointer; box-shadow:0 4px 16px rgba(44,24,16,.25);
  transition:background .15s, transform .1s;
  z-index:100;
}
#expand-all-btn:hover { background:var(--accent); }
#expand-all-btn:active { transform:scale(.97); }
#expand-all-icon { font-size:1rem; line-height:1; }