/* =============================================================
   aliments.css — Pages /aliments/ de regime-mediterraneen.fr
   Chargé uniquement depuis public_html/aliments/index.php
   ============================================================= */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@300;400;500&display=swap');

/* ── Variables ── */
:root {
    --olive:       #5C7A2F;
    --olive-light: #7A9B45;
    --olive-dark:  #3D5220;
    --ambre:       #8B6914;
    --ambre-light: #C49A28;
    --fond:        #F5F0E8;
    --fond-card:   #FDFAF4;
    --texte:       #2C3E1A;
    --texte-muted: #6B7A5A;
    --border:      #D8CFBC;
    --radius:      14px;
}

/* ── Breadcrumb (commun) ── */
.breadcrumb {
    font-size: .82rem;
    color: var(--texte-muted);
    margin-bottom: .5rem;
}
.breadcrumb a {
    color: var(--olive);
    text-decoration: none;
}

/* =============================================================
   INDEX CATÉGORIES — /aliments/
   ============================================================= */

.alim-idx {
    width: 100%;
    padding: 0 2rem 5rem;
    font-family: 'DM Sans', sans-serif;
    color: var(--texte);
}

.alim-hero {
    padding: 3.5rem 0 3rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
    margin-bottom: 3rem;
}
.alim-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    color: var(--olive-dark);
    margin: 0 0 .9rem;
    font-style: italic;
}
.alim-hero p {
    color: var(--texte-muted);
    font-size: 1.05rem;
    max-width: 620px;
    margin: 0 auto 2.25rem;
    line-height: 1.75;
}

.stats-row {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}
.stat-val {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--olive);
    line-height: 1;
}
.stat-lbl {
    font-size: .72rem;
    color: var(--texte-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-top: .3rem;
    display: block;
}

.cats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 220px));
    gap: 1rem;
    justify-content: center;
}

.cat-card {
    background: var(--fond-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem 1.25rem 1.25rem;
    text-align: center;
    text-decoration: none;
    color: var(--texte);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.cat-card:hover {
    border-color: var(--olive-light);
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(92,122,47,.13);
}

.cat-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #eaf2d8, #f8f4ec);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    transition: background .2s;
}
.cat-card:hover .cat-icon {
    background: linear-gradient(135deg, #d4e8b0, #eee8d8);
}
.cat-icon img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.cat-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
}

.cat-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--texte);
    line-height: 1.3;
    text-align: center;
}
.cat-count {
    font-size: .78rem;
    color: var(--texte-muted);
    background: var(--fond);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: .2rem .75rem;
    display: inline-block;
}

.alim-source {
    margin-top: 3rem;
    padding: 1.1rem 1.5rem;
    background: var(--fond-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: .78rem;
    color: var(--texte-muted);
    text-align: center;
    line-height: 1.7;
}
.alim-source a {
    color: var(--olive);
}

/* =============================================================
   PAGE CATÉGORIE — /aliments/[categorie]/
   ============================================================= */

.aliments-page .cat-page {
    width: 100%;
    padding: 0 2rem 5rem;
    font-family: 'DM Sans', sans-serif;
    color: var(--texte);
}

.aliments-page .cat-hero {
    position: static !important;
    min-height: auto !important;
    background: transparent !important;
    overflow: visible !important;
    padding: 2.5rem 0 2rem !important;
    border-bottom: 1px solid var(--border) !important;
    margin-bottom: 2.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 2.5rem !important;
    flex-wrap: wrap !important;
}
.aliments-page .cat-hero h1 {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
    color: var(--olive-dark) !important;
    margin: 0 0 .5rem !important;
    font-style: italic !important;
}
.aliments-page .cat-hero p {
    color: var(--texte-muted) !important;
    font-size: .95rem !important;
    margin: 0 !important;
}
.aliments-page .cat-hero-overlay { display: none !important; }
.aliments-page .cat-hero-img { display: none !important; }
.aliments-page .cat-hero-content {
    position: static !important;
    padding: 0 !important;
    z-index: auto !important;
}

.alim-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: .65rem;
}

.alim-card {
    background: var(--fond-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1rem 1.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: var(--texte);
    transition: border-color .15s, transform .15s, box-shadow .15s;
    gap: 1rem;
}
.alim-card:hover {
    border-color: var(--olive-light);
    transform: translateX(4px);
    box-shadow: 3px 0 16px rgba(92,122,47,.11);
}

.alim-name {
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.4;
    flex: 1;
}
.alim-macros {
    font-size: .72rem;
    color: var(--ambre);
    margin-top: .2rem;
}
.alim-kcal {
    font-size: .82rem;
    font-weight: 600;
    color: var(--olive-dark);
    white-space: nowrap;
    flex-shrink: 0;
    background: rgba(92,122,47,.08);
    padding: .2rem .65rem;
    border-radius: 20px;
}

/* =============================================================
   RESPONSIVE (commun)
   ============================================================= */

@media (max-width: 768px) {
    .alim-idx,
    .cat-page  { padding: 0 1rem 4rem; }

    /* index */
    .cats-grid { grid-template-columns: 1fr; }
    .cat-icon  { width: 72px; height: 72px; }
    .cat-icon img { width: 50px; height: 50px; }

    /* catégorie */
    .alim-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .stat-val  { font-size: 1.6rem; }
    .cat-name  { font-size: .95rem; }
}

/* =============================================================
   OVERRIDES — Neutralise les règles homepage du Customizer
   qui s'appliquent aussi aux pages /aliments/
   ============================================================= */

.alim-idx .cats-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 220px)) !important;
    justify-content: center !important;
    gap: 1rem !important;
}

.alim-idx .cat-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    background: var(--fond-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 1.5rem 1.25rem 1.25rem !important;
    text-align: center !important;
    overflow: visible !important;
}

.alim-idx .cat-card:hover {
    border-color: var(--olive-light) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 28px rgba(92,122,47,.13) !important;
}
/* ============================================================================
 * FICHE PARENT v2 - extensions CSS
 *
 * À appender dans /wp-content/themes/generatepress/css/aliments.css
 * (le body.aliments-page .parent-fiche active ces styles)
 *
 * Palette "Olive & Terre" :
 *   --olive-primary:   #5C7A2F
 *   --ambre-accent:    #8B6914
 *   --ivoire-fond:     #F5F0E8
 *   --vert-sombre:     #2C3E1A
 * ============================================================================ */

body.aliments-page .parent-fiche {
    --olive-primary: #5C7A2F;
    --olive-light:   #7B9D45;
    --ambre-accent:  #8B6914;
    --ivoire-fond:   #F5F0E8;
    --vert-sombre:   #2C3E1A;
    --gris-50:       #FAF9F6;
    --gris-100:      #F2EFE9;
    --gris-200:      #E5DFD3;
    --gris-400:      #A8A191;
}

body.aliments-page .parent-fiche .parent-fiche {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.25rem;
    font-family: 'Lora', Georgia, serif;
    color: var(--vert-sombre);
    line-height: 1.6;
}

body.aliments-page .parent-fiche h1,
body.aliments-page .parent-fiche h2 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--vert-sombre);
}

/* ============================================================================
 * HEADER
 * ============================================================================ */
.parent-header {
    text-align: center;
    padding-bottom: 1.5rem;
    margin-bottom: 2.5rem;
    border-bottom: 2px solid var(--gris-200);
}

.parent-header h1 {
    font-size: clamp(2rem, 4vw + 1rem, 3.25rem);
    margin: 0 0 0.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.parent-header .parent-subtitle {
    font-size: 1.05rem;
    color: var(--gris-400);
    margin: 0 0 1rem;
    font-style: italic;
}

.badge-mediterranean {
    display: inline-block;
    padding: 0.4rem 1rem;
    background: var(--olive-primary);
    color: #fff;
    border-radius: 999px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.badge-mediterranean::before {
    content: "✓ ";
    font-weight: 700;
}

/* ============================================================================
 * WIDGET PORTION
 * ============================================================================ */
.widget-portion {
    background: var(--gris-50);
    border-radius: 12px;
    padding: 1.5rem 1.75rem 1.75rem;
    margin-bottom: 2.5rem;
    border: 1px solid var(--gris-200);
}

.widget-portion h2 {
    margin: 0 0 1rem;
    font-size: 1.4rem;
    color: var(--olive-primary);
}

.portion-control {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.portion-control label {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
}

.portion-control output {
    color: var(--olive-primary);
    font-weight: 700;
    font-size: 1.3em;
}

#portion-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--gris-200);
    border-radius: 3px;
    outline: none;
}

#portion-slider::-webkit-slider-thumb,
#portion-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: var(--olive-primary);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
#portion-slider::-webkit-slider-thumb { -webkit-appearance: none; }

.portion-macros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.macro-card {
    background: #fff;
    padding: 1rem 0.75rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--gris-200);
    transition: transform 0.15s ease;
}

.macro-card:hover { transform: translateY(-2px); }

.macro-label {
    display: block;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gris-400);
    margin-bottom: 0.25rem;
}

.macro-value {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--vert-sombre);
    line-height: 1;
}

.macro-unit {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.85rem;
    color: var(--gris-400);
}

.macro-energie .macro-value { color: var(--ambre-accent); }

.portion-note {
    font-size: 0.85rem;
    color: var(--gris-400);
    font-style: italic;
    margin: 0;
}

.portion-note strong { color: var(--vert-sombre); font-style: normal; }

/* ============================================================================
 * TABLEAU NUTRITIONNEL MULTI-COLONNES
 * ============================================================================ */
.widget-nutrition-table {
    margin-bottom: 2.5rem;
}

.widget-nutrition-table h2 {
    font-size: 1.5rem;
    color: var(--olive-primary);
    margin: 0 0 1rem;
}

.widget-nutrition-table h2 small {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--gris-400);
    letter-spacing: 0.02em;
}

.nutrition-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--gris-200);
    border-radius: 8px;
    background: #fff;
}

.nutrition-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.92rem;
    min-width: 600px;
}

.nutrition-table thead th {
    background: var(--vert-sombre);
    color: #fff;
    padding: 0.9rem 0.75rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.01em;
    position: sticky;
    top: 0;
    z-index: 2;
}

.nutrition-table thead th.nutri-nutrient {
    text-align: left;
    min-width: 170px;
}

.nutrition-table thead th.pivot-col {
    background: var(--olive-primary);
}

.pivot-badge {
    color: #FFD369;
    margin-left: 0.25rem;
    font-size: 0.9em;
}

.nutrition-table tbody th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    font-weight: 500;
    color: var(--vert-sombre);
    background: var(--gris-50);
    border-right: 1px solid var(--gris-200);
}

.nutrition-table tbody td {
    padding: 0.6rem 0.75rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    border-right: 1px solid var(--gris-100);
}

.nutrition-table tbody td:last-child { border-right: none; }

.nutrition-table tr.nutri-row:nth-child(odd) th,
.nutrition-table tr.nutri-row:nth-child(odd) td {
    background: var(--gris-50);
}

.nutrition-table tr.nutri-row.highlight th {
    font-weight: 700;
    color: var(--olive-primary);
}

.nutrition-table tr.nutri-row.highlight td {
    font-weight: 600;
}

.nutrition-table tr.group-row td {
    background: var(--ivoire-fond);
    padding: 0.5rem 0.75rem;
    font-weight: 700;
    color: var(--ambre-accent);
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-align: left;
}

.nutri-null { color: var(--gris-400); }

.nutrition-source {
    font-size: 0.82rem;
    color: var(--gris-400);
    font-style: italic;
    margin: 0.75rem 0 0;
}

/* ============================================================================
 * COMPARABLES
 * ============================================================================ */
.widget-comparables {
    margin-bottom: 2.5rem;
}

.widget-comparables h2 {
    font-size: 1.5rem;
    color: var(--olive-primary);
    margin: 0 0 0.5rem;
}

.widget-comparables .comp-intro {
    color: var(--gris-400);
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
}

.comparables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem;
}

.comp-card {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--gris-200);
    border-radius: 8px;
    text-decoration: none;
    color: var(--vert-sombre);
    transition: all 0.15s ease;
    position: relative;
}

.comp-card:hover {
    border-color: var(--olive-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(92, 122, 47, 0.1);
}

.comp-name {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
}

.comp-kcal {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.85rem;
    color: var(--ambre-accent);
    font-weight: 600;
}

.comp-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: var(--olive-primary);
    color: #fff;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.comp-card.is-med {
    border-color: rgba(92, 122, 47, 0.3);
}

/* ============================================================================
 * FAQ + PLACEHOLDERS EDITORIAL
 * ============================================================================ */
.editorial-placeholder {
    min-height: 0;
    /* Empty by default - remplacé par Opus plus tard */
}

.widget-faq {
    margin: 2.5rem 0;
    padding-top: 2rem;
    border-top: 2px solid var(--gris-200);
}

.widget-faq h2 {
    font-size: 1.6rem;
    color: var(--olive-primary);
    margin: 0 0 1rem;
}

.faq-placeholder {
    color: var(--gris-400);
    font-style: italic;
}

/* ============================================================================
 * RESPONSIVE
 * ============================================================================ */
@media (max-width: 680px) {
    body.aliments-page .parent-fiche .parent-fiche {
        padding: 1.25rem 0.75rem;
    }
    .portion-macros { gap: 0.5rem; }
    .macro-card { padding: 0.75rem 0.5rem; }
    .macro-value { font-size: 1.5rem; }
    .comparables-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .nutrition-table { font-size: 0.85rem; }
    .nutrition-table thead th { padding: 0.6rem 0.5rem; font-size: 0.8rem; }
}
/* ============================================================================
 * FICHE PARENT v2 - extensions CSS
 *
 * À appender dans /wp-content/themes/generatepress/css/aliments.css
 * (le body.aliments-page .parent-fiche active ces styles)
 *
 * Palette "Olive & Terre" :
 *   --olive-primary:   #5C7A2F
 *   --ambre-accent:    #8B6914
 *   --ivoire-fond:     #F5F0E8
 *   --vert-sombre:     #2C3E1A
 * ============================================================================ */

body.aliments-page .parent-fiche {
    --olive-primary: #5C7A2F;
    --olive-light:   #7B9D45;
    --ambre-accent:  #8B6914;
    --ivoire-fond:   #F5F0E8;
    --vert-sombre:   #2C3E1A;
    --gris-50:       #FAF9F6;
    --gris-100:      #F2EFE9;
    --gris-200:      #E5DFD3;
    --gris-400:      #A8A191;
}

body.aliments-page .parent-fiche .parent-fiche {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.25rem;
    font-family: 'Lora', Georgia, serif;
    color: var(--vert-sombre);
    line-height: 1.6;
}

body.aliments-page .parent-fiche h1,
body.aliments-page .parent-fiche h2 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--vert-sombre);
}

/* ============================================================================
 * HEADER
 * ============================================================================ */
.parent-header {
    text-align: center;
    padding-bottom: 1.5rem;
    margin-bottom: 2.5rem;
    border-bottom: 2px solid var(--gris-200);
}

.parent-header h1 {
    font-size: clamp(2rem, 4vw + 1rem, 3.25rem);
    margin: 0 0 0.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.parent-header .parent-subtitle {
    font-size: 1.05rem;
    color: var(--gris-400);
    margin: 0 0 1rem;
    font-style: italic;
}

.badge-mediterranean {
    display: inline-block;
    padding: 0.4rem 1rem;
    background: var(--olive-primary);
    color: #fff;
    border-radius: 999px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.badge-mediterranean::before {
    content: "✓ ";
    font-weight: 700;
}

/* ============================================================================
 * WIDGET PORTION
 * ============================================================================ */
.widget-portion {
    background: var(--gris-50);
    border-radius: 12px;
    padding: 1.5rem 1.75rem 1.75rem;
    margin-bottom: 2.5rem;
    border: 1px solid var(--gris-200);
}

.widget-portion h2 {
    margin: 0 0 1rem;
    font-size: 1.4rem;
    color: var(--olive-primary);
}

.portion-control {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.portion-control label {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
}

.portion-control output {
    color: var(--olive-primary);
    font-weight: 700;
    font-size: 1.3em;
}

#portion-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--gris-200);
    border-radius: 3px;
    outline: none;
}

#portion-slider::-webkit-slider-thumb,
#portion-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: var(--olive-primary);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
#portion-slider::-webkit-slider-thumb { -webkit-appearance: none; }

.portion-macros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.macro-card {
    background: #fff;
    padding: 1rem 0.75rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--gris-200);
    transition: transform 0.15s ease;
}

.macro-card:hover { transform: translateY(-2px); }

.macro-label {
    display: block;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gris-400);
    margin-bottom: 0.25rem;
}

.macro-value {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--vert-sombre);
    line-height: 1;
}

.macro-unit {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.85rem;
    color: var(--gris-400);
}

.macro-energie .macro-value { color: var(--ambre-accent); }

.portion-note {
    font-size: 0.85rem;
    color: var(--gris-400);
    font-style: italic;
    margin: 0;
}

.portion-note strong { color: var(--vert-sombre); font-style: normal; }

/* ============================================================================
 * TABLEAU NUTRITIONNEL MULTI-COLONNES
 * ============================================================================ */
.widget-nutrition-table {
    margin-bottom: 2.5rem;
}

.widget-nutrition-table h2 {
    font-size: 1.5rem;
    color: var(--olive-primary);
    margin: 0 0 1rem;
}

.widget-nutrition-table h2 small {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--gris-400);
    letter-spacing: 0.02em;
}

.nutrition-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--gris-200);
    border-radius: 8px;
    background: #fff;
}

.nutrition-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.92rem;
    min-width: 600px;
}

.nutrition-table thead th {
    background: var(--vert-sombre);
    color: #fff;
    padding: 0.9rem 0.75rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.01em;
    position: sticky;
    top: 0;
    z-index: 2;
}

.nutrition-table thead th.nutri-nutrient {
    text-align: left;
    min-width: 170px;
}

.nutrition-table thead th.pivot-col {
    background: var(--olive-primary);
}

.pivot-badge {
    color: #FFD369;
    margin-left: 0.25rem;
    font-size: 0.9em;
}

.nutrition-table tbody th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    font-weight: 500;
    color: var(--vert-sombre);
    background: var(--gris-50);
    border-right: 1px solid var(--gris-200);
}

.nutrition-table tbody td {
    padding: 0.6rem 0.75rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    border-right: 1px solid var(--gris-100);
}

.nutrition-table tbody td:last-child { border-right: none; }

.nutrition-table tr.nutri-row:nth-child(odd) th,
.nutrition-table tr.nutri-row:nth-child(odd) td {
    background: var(--gris-50);
}

.nutrition-table tr.nutri-row.highlight th {
    font-weight: 700;
    color: var(--olive-primary);
}

.nutrition-table tr.nutri-row.highlight td {
    font-weight: 600;
}

.nutrition-table tr.group-row td {
    background: var(--ivoire-fond);
    padding: 0.5rem 0.75rem;
    font-weight: 700;
    color: var(--ambre-accent);
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-align: left;
}

.nutri-null { color: var(--gris-400); }

.nutrition-source {
    font-size: 0.82rem;
    color: var(--gris-400);
    font-style: italic;
    margin: 0.75rem 0 0;
}

/* ============================================================================
 * COMPARABLES
 * ============================================================================ */
.widget-comparables {
    margin-bottom: 2.5rem;
}

.widget-comparables h2 {
    font-size: 1.5rem;
    color: var(--olive-primary);
    margin: 0 0 0.5rem;
}

.widget-comparables .comp-intro {
    color: var(--gris-400);
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
}

.comparables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem;
}

.comp-card {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--gris-200);
    border-radius: 8px;
    text-decoration: none;
    color: var(--vert-sombre);
    transition: all 0.15s ease;
    position: relative;
}

.comp-card:hover {
    border-color: var(--olive-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(92, 122, 47, 0.1);
}

.comp-name {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
}

.comp-kcal {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.85rem;
    color: var(--ambre-accent);
    font-weight: 600;
}

.comp-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: var(--olive-primary);
    color: #fff;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.comp-card.is-med {
    border-color: rgba(92, 122, 47, 0.3);
}

/* ============================================================================
 * FAQ + PLACEHOLDERS EDITORIAL
 * ============================================================================ */
.editorial-placeholder {
    min-height: 0;
    /* Empty by default - remplacé par Opus plus tard */
}

.widget-faq {
    margin: 2.5rem 0;
    padding-top: 2rem;
    border-top: 2px solid var(--gris-200);
}

.widget-faq h2 {
    font-size: 1.6rem;
    color: var(--olive-primary);
    margin: 0 0 1rem;
}

.faq-placeholder {
    color: var(--gris-400);
    font-style: italic;
}

/* ============================================================================
 * RESPONSIVE
 * ============================================================================ */
@media (max-width: 680px) {
    body.aliments-page .parent-fiche .parent-fiche {
        padding: 1.25rem 0.75rem;
    }
    .portion-macros { gap: 0.5rem; }
    .macro-card { padding: 0.75rem 0.5rem; }
    .macro-value { font-size: 1.5rem; }
    .comparables-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .nutrition-table { font-size: 0.85rem; }
    .nutrition-table thead th { padding: 0.6rem 0.5rem; font-size: 0.8rem; }
}

/* ============================================================================
 * PATCH v2.1 — fix tableau + badges comparables
 * ============================================================================ */

/* FIX 1 : tableau — éviter que la 4e colonne déborde */
body.aliments-page .parent-fiche .nutrition-table {
    width: 100%;
    table-layout: auto;
    min-width: 0;
}

body.aliments-page .parent-fiche .nutrition-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* FIX 2 : uniformiser la couleur des 3 colonnes variantes (non-pivot = vert clair) */
body.aliments-page .parent-fiche .nutrition-table thead th.variant-col {
    background: var(--olive-light, #7B9D45);
    color: #fff;
}

body.aliments-page .parent-fiche .nutrition-table thead th.pivot-col {
    background: var(--olive-primary, #5C7A2F);
    color: #fff;
}

body.aliments-page .parent-fiche .nutrition-table thead th.nutri-nutrient {
    background: var(--vert-sombre, #2C3E1A);
    color: #fff;
}

/* FIX 3 : badge Méditerranéen des comparables — repositionner en bas au lieu de top-right */
body.aliments-page .parent-fiche .comp-card {
    padding: 1rem 1rem 2.4rem;   /* room en bas pour le badge */
    overflow: visible;
}

body.aliments-page .parent-fiche .comp-badge {
    position: absolute;
    top: auto;
    bottom: 0.5rem;
    right: 0.5rem;
    left: auto;
    font-size: 0.6rem;
    padding: 0.12rem 0.45rem;
    line-height: 1.4;
}

/* Bonus : espacement plus propre dans le nom de la carte */
body.aliments-page .parent-fiche .comp-name {
    padding-right: 0.5rem;
    line-height: 1.25;
}