:root {
    --site-max: 72rem;
    --brand: #059669;
    --brand-dark: #047857;
    --brand-light: #d1fae5;
}

.site-container {
    width: 100%;
    max-width: var(--site-max);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.py-section { padding-block: 3rem; }

.hero {
    background: linear-gradient(135deg, var(--brand) 0%, #064e3b 55%, #0f172a 100%);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 80%, rgba(255,255,255,.12) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255,255,255,.08) 0%, transparent 40%);
    pointer-events: none;
}

.card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    transition: box-shadow .2s, border-color .2s;
}

.card:hover { border-color: #a7f3d0; }

.card-accent {
    border-left: 4px solid var(--brand);
}

.calc-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    padding: 1.5rem;
}

.calc-input {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: .75rem;
    padding: .625rem 1rem;
    font-size: 1rem;
    transition: border-color .15s, box-shadow .15s;
}

.calc-input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(5, 150, 105, .15);
}

.calc-label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: .375rem;
}

.calc-result {
    background: linear-gradient(135deg, var(--brand-light) 0%, #ecfdf5 100%);
    border: 1px solid #a7f3d0;
    border-radius: 1rem;
    padding: 1.25rem;
}

.calc-result-value {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--brand-dark);
    line-height: 1.1;
}

.bmi-badge {
    display: inline-flex;
    align-items: center;
    padding: .25rem .75rem;
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.bmi-badge--under { background: #dbeafe; color: #1d4ed8; }
.bmi-badge--normal { background: #d1fae5; color: #047857; }
.bmi-badge--over { background: #fef3c7; color: #b45309; }
.bmi-badge--obese { background: #fee2e2; color: #b91c1c; }

.macro-bar {
    height: .5rem;
    border-radius: 9999px;
    overflow: hidden;
    display: flex;
    background: #e2e8f0;
}

.macro-bar span { height: 100%; }

.macro-protein { background: #3b82f6; }
.macro-fat { background: #f59e0b; }
.macro-carbs { background: var(--brand); }

.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    gap: .5rem;
}

.hub-chip {
    display: block;
    text-align: center;
    padding: .5rem .25rem;
    border-radius: .75rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: .8125rem;
    font-weight: 600;
    color: #334155;
    transition: all .15s;
}

.hub-chip:hover {
    border-color: var(--brand);
    background: var(--brand-light);
    color: var(--brand-dark);
}

.ad-slot-wrap { margin-block: 1.5rem; }
.ad-slot {
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 0.75rem;
}

.disclaimer-box {
    border-color: #fcd34d;
    background: #fffbeb;
    color: #92400e;
}

.prose-ns h2 { font-size: 1.25rem; font-weight: 700; margin-top: 1.5rem; margin-bottom: .5rem; color: #0f172a; }
.prose-ns p { margin-bottom: .75rem; color: #475569; line-height: 1.7; }
.prose-ns ul { margin-bottom: .75rem; padding-left: 1.25rem; color: #475569; }
.prose-ns li { margin-bottom: .375rem; }

.cookie-banner.hidden { display: none; }

.text-brand { color: var(--brand); }
.bg-brand { background-color: var(--brand); }

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .625rem 1.25rem;
    border-radius: .75rem;
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    transition: opacity .15s;
}

.btn-primary:hover { opacity: .92; }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .625rem 1.25rem;
    border-radius: .75rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #0f172a;
    font-weight: 600;
    transition: background .15s, border-color .15s;
}

.btn-secondary:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

/* Hero sombre : forcer un contraste lisible même si text-white est sur le parent */
.hero .btn-secondary {
    color: #0f172a;
    background: #fff;
    border-color: rgba(255, 255, 255, .35);
}