/* Fiches huiles (pages/huiles.php, pages/huile.php) : reprend la charte de l'accueil */
:root {
    --primary: #764ba2;
    --secondary: #667eea;
    --accent: #7cb342;
    --text-dark: #333;
    --text-light: #666;
    --bg-color: #f4f7f6;
    --line: #e6e6ef;
}

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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-dark);
    line-height: 1.6;
    padding-bottom: 40px;
}

a { color: var(--primary); }

/* ---------- Menu ---------- */
.navbar {
    background: white;
    padding: 12px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.navbar-brand { font-size: 22px; font-weight: bold; color: var(--primary); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.nav-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 15px; }
.nav-links a { text-decoration: none; color: var(--text-dark); }
.nav-links a.active { color: var(--primary); font-weight: bold; }
.lang-switcher a { text-decoration: none; color: #999; }
.lang-switcher a.active { color: var(--primary); font-weight: bold; }

/* ---------- Mise en page ---------- */
.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.page-head {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
    color: white;
    padding: 36px 0 30px;
    margin-bottom: 30px;
}
.page-head h1 { font-size: 34px; line-height: 1.2; margin: 6px 0 8px; }
.page-head .subtitle { opacity: 0.9; font-size: 16px; }
.breadcrumb { font-size: 13px; opacity: 0.9; }
.breadcrumb a { color: white; }
.badge { display: inline-block; background: rgba(255,255,255,0.2); border-radius: 20px; padding: 2px 12px; font-size: 13px; margin-top: 4px; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 24px; }
.card { background: white; border-radius: 12px; padding: 24px; box-shadow: 0 6px 20px rgba(0,0,0,0.05); margin-bottom: 24px; }
.card h2 { color: var(--primary); font-size: 20px; margin-bottom: 14px; }
.card p { color: var(--text-light); margin-bottom: 10px; }
.note { font-size: 13px; color: var(--text-light); }
.warning { background: #fff3cd; border-left: 4px solid #ffc107; padding: 10px 14px; border-radius: 4px; font-size: 14px; color: #856404; margin-top: 10px; }

/* ---------- Indices et soude ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 12px; }
.stat { background: #f7f5fb; border-radius: 10px; padding: 12px 14px; }
.stat .label { font-size: 13px; color: var(--text-light); }
.stat .value { font-size: 24px; font-weight: bold; color: var(--primary); }
.stat .unit { font-size: 12px; color: var(--text-light); }
.lye-amounts { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.lye-amounts .stat { flex: 1 1 200px; }

/* ---------- Barres (acides gras, qualités) ---------- */
.bars { list-style: none; }
.bars li { display: grid; grid-template-columns: 130px 1fr 60px; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 14px; }
.bar { height: 12px; background: #ececf3; border-radius: 6px; overflow: hidden; position: relative; }
.bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--secondary), var(--primary)); border-radius: 6px; }
.bar .range { position: absolute; top: 0; bottom: 0; background: rgba(124, 179, 66, 0.25); border-left: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.bar span.in { background: var(--accent); }
.bars .val { text-align: right; font-weight: bold; }
.bars .sub { grid-column: 2 / 4; font-size: 12px; color: var(--text-light); margin-top: -6px; }

/* ---------- Boutons et liens ---------- */
.cta-button {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--accent); color: white; padding: 12px 24px; border-radius: 10px;
    text-decoration: none; font-weight: bold; box-shadow: 0 4px 15px rgba(124, 179, 66, 0.3);
}
.cta-button:hover { background: #689f38; }
.similar { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; }
.similar a { display: block; background: #f7f5fb; border-radius: 8px; padding: 10px 14px; text-decoration: none; }
.similar a:hover { background: #ece6f6; }

/* ---------- Tableau de la page index ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.toolbar input { flex: 1 1 220px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.filters button { border: 1px solid var(--line); background: white; border-radius: 20px; padding: 5px 12px; cursor: pointer; font-size: 13px; color: var(--text-dark); }
.filters button.active { background: var(--primary); border-color: var(--primary); color: white; }
.table-wrap { overflow-x: auto; }
table.oils { width: 100%; border-collapse: collapse; font-size: 14px; }
table.oils th, table.oils td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; }
table.oils th { cursor: pointer; white-space: nowrap; color: var(--primary); user-select: none; }
table.oils th[aria-sort="ascending"]::after { content: " ▲"; }
table.oils th[aria-sort="descending"]::after { content: " ▼"; }
table.oils td.num, table.oils th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.oils tr:hover td { background: #faf8fd; }
table.oils td a { text-decoration: none; font-weight: 600; }
.cat-tag { font-size: 12px; color: var(--text-light); }

footer { text-align: center; color: var(--text-light); margin-top: 30px; font-size: 13px; }

@media (max-width: 640px) {
    .page-head h1 { font-size: 26px; }
    .bars li { grid-template-columns: 100px 1fr 50px; }
    .navbar { padding: 10px 16px; }
    table.oils th:nth-child(2), table.oils td:nth-child(2) { display: none; }
    table.oils th, table.oils td { padding: 8px 6px; }
}