/* ============================================================
   DECIDAUTO RESULTS - DESIGN SYSTEM v2 (forest / emerald / bone)
   Extracted from views/client/results.php 2026-04-16
   ============================================================ */

/* Palette */
:root {
    --forest-950: #061F25;
    --forest-900: #092E36;
    --forest-800: #0F3A42;
    --forest-700: #134754;
    --forest-600: #1B5953;
    --forest-500: #245F58;
    --forest-400: #2A6F5D;
    --forest-300: #37885F;
    --emerald-500: #10B981;
    --emerald-400: #34D399;
    --emerald-300: #6EE7B7;
    --mint-200: #A7F3D0;
    --bone-50: #F8F7F2;
    --bone-100: #EFEDE5;
    --bone-200: #E5E2D8;
    --ink-950: #061218;
    --ink-900: #0F1B22;
    --ink-700: #2B3B43;
    --ink-500: #5C6B72;
    --ink-400: #8A989E;
}

/* Backgrounds */
.bg-bone-50    { background-color: var(--bone-50); }
.bg-bone-100   { background-color: var(--bone-100); }
.bg-bone-200   { background-color: var(--bone-200); }
.bg-forest-950 { background-color: var(--forest-950); }
.bg-forest-900 { background-color: var(--forest-900); }
.bg-forest-800 { background-color: var(--forest-800); }
.bg-forest-700 { background-color: var(--forest-700); }
.bg-emerald-50  { background-color: #ECFDF5; }
.bg-emerald-100 { background-color: #D1FAE5; }
.bg-mint-200    { background-color: var(--mint-200); }

/* Texts */
.text-ink-950  { color: var(--ink-950); }
.text-ink-900  { color: var(--ink-900); }
.text-ink-700  { color: var(--ink-700); }
.text-ink-500  { color: var(--ink-500); }
.text-ink-400  { color: var(--ink-400); }
.text-forest-700 { color: var(--forest-700); }
.text-forest-800 { color: var(--forest-800); }
.text-emerald-300 { color: var(--emerald-300); }
.text-emerald-400 { color: var(--emerald-400); }
.text-emerald-500 { color: var(--emerald-500); }
.text-emerald-600 { color: #059669; }
.text-emerald-700 { color: #047857; }

/* Borders */
.border-bone-100 { border-color: var(--bone-100); }
.border-bone-200 { border-color: var(--bone-200); }
.border-emerald-100 { border-color: #D1FAE5; }
.border-emerald-500 { border-color: var(--emerald-500); }
.border-forest-700 { border-color: var(--forest-700); }
.ring-emerald-500\/20 { --tw-ring-color: rgba(16, 185, 129, 0.20); }
.ring-emerald-500\/30 { --tw-ring-color: rgba(16, 185, 129, 0.30); }
.ring-emerald-500\/40 { --tw-ring-color: rgba(16, 185, 129, 0.40); }

/* Gradients */
.bg-hero-gradient {
    background: linear-gradient(135deg,
        #061F25 0%,
        #0B333B 18%,
        #134754 42%,
        #1B5953 65%,
        #245F58 82%,
        #2A6F5D 100%);
}
.bg-card-gradient {
    background: linear-gradient(160deg,
        #0F3A42 0%,
        #134754 50%,
        #1B5953 100%);
}
.bg-cta-gradient {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
}
.bg-mesh-forest {
    background:
        radial-gradient(at 20% 30%, rgba(45, 212, 191, 0.08) 0%, transparent 50%),
        radial-gradient(at 80% 70%, rgba(16, 185, 129, 0.06) 0%, transparent 50%),
        #061F25;
}

/* Shadows premium */
.shadow-soft   { box-shadow: 0 1px 2px rgba(6,31,37,0.04), 0 1px 3px rgba(6,31,37,0.06); }
.shadow-md-fr  { box-shadow: 0 4px 12px rgba(6,31,37,0.08), 0 2px 4px rgba(6,31,37,0.04); }
.shadow-lg-fr  { box-shadow: 0 12px 32px rgba(6,31,37,0.12), 0 4px 8px rgba(6,31,37,0.04); }
.shadow-xl-fr  { box-shadow: 0 24px 48px rgba(6,31,37,0.16), 0 8px 16px rgba(6,31,37,0.06); }
.shadow-2xl-fr { box-shadow: 0 32px 64px rgba(6,31,37,0.20), 0 16px 32px rgba(6,31,37,0.08); }
.shadow-glow   { box-shadow: 0 0 40px rgba(16,185,129,0.25); }
.shadow-glow-lg{ box-shadow: 0 0 80px rgba(16,185,129,0.35); }
.shadow-card-form { box-shadow: 0 32px 80px rgba(6,31,37,0.40), inset 0 1px 0 rgba(255,255,255,0.08); }
.shadow-cta    { box-shadow: 0 12px 28px rgba(16, 185, 129, 0.32), 0 4px 8px rgba(16, 185, 129, 0.18); }
.shadow-cta-hover { box-shadow: 0 18px 40px rgba(16, 185, 129, 0.42), 0 8px 16px rgba(16, 185, 129, 0.22); }

/* Transitions premium */
.ease-premium {
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover lift */
.hover-lift-fr {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift-fr:hover {
    transform: translateY(-6px);
    box-shadow: 0 32px 64px rgba(6,31,37,0.20), 0 16px 32px rgba(6,31,37,0.08);
}

/* Card image zoom */
.card-img-zoom {
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.group:hover .card-img-zoom { transform: scale(1.06); }

/* Filter checkbox premium */
.filter-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--bone-200);
    border-radius: 6px;
    background: white;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    flex-shrink: 0;
}
.filter-checkbox:hover {
    border-color: var(--emerald-400);
}
.filter-checkbox:checked {
    background: linear-gradient(135deg, #10B981, #059669);
    border-color: #10B981;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.filter-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Custom select */
.select-premium {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235C6B72' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 40px;
}

/* View mode button */
.view-btn-fr {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    color: var(--ink-500);
    background: var(--bone-50);
}
.view-btn-fr:hover {
    background: var(--bone-100);
    color: var(--ink-900);
}
.view-btn-fr.active {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
    box-shadow: 0 8px 24px -6px rgba(16, 185, 129, 0.40);
    transform: translateY(-1px);
}

/* Range scrollbar */
.scrollbar-emerald::-webkit-scrollbar { width: 5px; }
.scrollbar-emerald::-webkit-scrollbar-track { background: var(--bone-50); border-radius: 4px; }
.scrollbar-emerald::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--emerald-500), var(--forest-400));
    border-radius: 4px;
}

/* TOP 3 card signature glow */
.card-rank-1 {
    position: relative;
    box-shadow:
        0 0 0 2px rgba(16, 185, 129, 0.40),
        0 32px 64px rgba(6, 31, 37, 0.16),
        0 16px 32px rgba(6, 31, 37, 0.08),
        0 0 60px rgba(16, 185, 129, 0.18);
}
.card-rank-1::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, #10B981 0%, transparent 50%, #34D399 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    pointer-events: none;
    z-index: 1;
}

/* Rank badge premium */
.rank-badge {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    box-shadow:
        0 8px 24px rgba(16, 185, 129, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.rank-badge-2 {
    background: linear-gradient(135deg, #2A6F5D 0%, #134754 100%);
    box-shadow: 0 6px 20px rgba(19, 71, 84, 0.40);
}
.rank-badge-3 {
    background: linear-gradient(135deg, #37885F 0%, #245F58 100%);
    box-shadow: 0 6px 20px rgba(36, 95, 88, 0.40);
}

/* Mini progress bar TCO */
.tco-progress {
    height: 4px;
    background: var(--bone-100);
    border-radius: 100px;
    overflow: hidden;
}
.tco-progress > div {
    height: 100%;
    border-radius: 100px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.tco-deprec  > div { background: linear-gradient(90deg, #2A6F5D, #134754); }
.tco-entret  > div { background: linear-gradient(90deg, #6EE7B7, #34D399); }
.tco-energie > div { background: linear-gradient(90deg, #34D399, #10B981); }

/* Residual progress */
.residual-bar-fr {
    background: linear-gradient(90deg, #10B981 0%, #34D399 60%, #6EE7B7 100%);
}

/* Noise overlay for hero */
.noise-overlay {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

/* Fade in */
@keyframes fadeInUpFr {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up-fr {
    animation: fadeInUpFr 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}
.stagger-fr > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-fr > *:nth-child(2) { animation-delay: 0.15s; }
.stagger-fr > *:nth-child(3) { animation-delay: 0.25s; }

/* Pulse glow for top rank */
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 8px 24px rgba(16, 185, 129, 0.45), inset 0 1px 0 rgba(255,255,255,0.30); }
    50%      { box-shadow: 0 12px 32px rgba(16, 185, 129, 0.65), inset 0 1px 0 rgba(255,255,255,0.40); }
}
.rank-badge-pulse { animation: pulseGlow 2.4s ease-in-out infinite; }

/* CTA gradient button */
.btn-cta-fr {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    box-shadow: 0 12px 28px rgba(16, 185, 129, 0.32), 0 4px 8px rgba(16, 185, 129, 0.18);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-cta-fr:hover {
    box-shadow: 0 18px 40px rgba(16, 185, 129, 0.42), 0 8px 16px rgba(16, 185, 129, 0.22);
    transform: translateY(-2px);
}

/* Sticky sidebar wrapper */
@media (min-width: 1024px) {
    .sidebar-sticky-fr { position: sticky; top: 7rem; }
}

/* Focus rings */
.input-emerald:focus {
    outline: none;
    border-color: var(--emerald-500);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
}

/* Hide scrollbar for chip bar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* Hero pill */
.hero-pill {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

/* =====================================================================
   CHAMPION V4 — Layout editorial qui claque (2026-04-16)
   Image banniere 16:9 full-width + body en 3 colonnes dessous
   ===================================================================== */
.champion-v4 {
    position: relative;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFAF4 100%);
    border-radius: 32px;
    overflow: hidden;
    border: 1px solid rgba(16, 185, 129, 0.22);
    box-shadow:
        0 1px 0 rgba(16,185,129,0.35) inset,
        0 32px 80px rgba(6, 31, 37, 0.16),
        0 18px 40px rgba(6, 31, 37, 0.08),
        0 0 100px rgba(16, 185, 129, 0.10);
    transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s cubic-bezier(0.16,1,0.3,1);
}
.champion-v4:hover {
    transform: translateY(-4px);
    box-shadow:
        0 1px 0 rgba(16,185,129,0.55) inset,
        0 44px 100px rgba(6, 31, 37, 0.20),
        0 22px 48px rgba(6, 31, 37, 0.10),
        0 0 140px rgba(16, 185, 129, 0.16);
}

.champion-v4-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 21 / 9;
    max-height: 520px;
    overflow: hidden;
    background: linear-gradient(180deg, #0F3A42 0%, #134754 50%, #1B5953 100%);
}
.champion-v4-media img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(0.16,1,0.3,1);
}
.champion-v4:hover .champion-v4-media img { transform: scale(1.045); }

.champion-v4-overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(6,31,37,0.10) 0%, transparent 25%, transparent 55%, rgba(6,31,37,0.85) 100%),
        linear-gradient(90deg, rgba(6,31,37,0.25) 0%, transparent 40%, transparent 60%, rgba(6,31,37,0.25) 100%);
    pointer-events: none;
}

.champion-v4-toptag {
    position: absolute;
    top: 20px; left: 20px;
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    box-shadow:
        0 12px 32px rgba(16,185,129,0.45),
        inset 0 1px 0 rgba(255,255,255,0.35);
    animation: pulseGlow 2.6s ease-in-out infinite;
    z-index: 2;
}
.champion-v4-topright {
    position: absolute;
    top: 20px; right: 20px;
    display: inline-flex; gap: 0.5rem;
    z-index: 2;
}
.badge-warn-inline {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.95);
    color: #78350f;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}

.champion-v4-hero-caption {
    position: absolute;
    bottom: 24px; left: 24px;
    right: 260px;
    z-index: 2;
    color: #fff;
}
.champion-v4-brand {
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #6EE7B7;
    margin-bottom: 0.4rem;
}
.champion-v4-title {
    font-size: clamp(1.5rem, 2.4vw, 2.4rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.02;
    margin: 0 0 0.8rem;
    color: #fff;
    text-shadow: 0 4px 20px rgba(0,0,0,0.35);
}
.champion-v4-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.chip-hero {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255,255,255,0.2);
}
.chip-hero-critair {
    background: linear-gradient(135deg, rgba(16,185,129,0.35), rgba(16,185,129,0.2));
    border-color: rgba(110,231,183,0.5);
}

.champion-v4-hero-price {
    position: absolute;
    bottom: 24px; right: 24px;
    z-index: 2;
    text-align: right;
    color: #fff;
    padding: 0.85rem 1.1rem;
    background: rgba(6,31,37,0.55);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px;
}
.champion-v4-price-label {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6EE7B7;
    margin-bottom: 0.2rem;
}
.champion-v4-price-value {
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
}
.champion-v4-price-strike {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.6);
    text-decoration: line-through;
    margin-top: 0.3rem;
    font-weight: 600;
}

.champion-v4-body {
    padding: 1.5rem 1.75rem 1.75rem;
}

/* --- KPI strip (4 gros chiffres horizontaux) --- */
.champion-v4-kpi-strip {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 0;
    padding: 1rem 1.2rem;
    background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(19,71,84,0.04));
    border: 1px solid rgba(16, 185, 129, 0.18);
    border-radius: 20px;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 18px rgba(16,185,129,0.05);
}
.kpi-block {
    padding: 0.2rem 1rem;
    border-left: 1px solid rgba(16, 185, 129, 0.12);
    min-width: 0;
}
.kpi-block:first-child { border-left: none; padding-left: 0; }
.kpi-block-hero {
    background: linear-gradient(135deg, rgba(16,185,129,0.06), transparent);
    border-radius: 14px;
    padding: 0.35rem 1.1rem;
    margin-right: 0.4rem;
}
.kpi-value-xl {
    font-size: clamp(1.7rem, 2.6vw, 2.2rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--ink-900);
}
.kpi-value-lg {
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    font-weight: 900;
    letter-spacing: -0.015em;
    color: var(--ink-900);
    line-height: 1.05;
}
.kpi-value-xl.kpi-emerald { color: var(--emerald-500); }

/* --- Grid 3 colonnes --- */
.champion-v4-grid {
    display: grid;
    grid-template-columns: 1.15fr 1.15fr 1fr;
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}
.col-block {
    background: #fff;
    border: 1px solid var(--bone-100);
    border-radius: 18px;
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 4px 12px rgba(6, 31, 37, 0.04);
}
.col-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--bone-100);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-700);
}
.col-header svg { color: var(--emerald-500); flex-shrink: 0; }
.col-header > span:not(.col-total):not(.col-badge) { flex: 1; }
.col-total {
    font-weight: 900;
    color: var(--emerald-500);
    font-size: 1rem;
    letter-spacing: -0.01em;
    text-transform: none;
}
.col-total small { font-weight: 600; color: var(--ink-500); margin-left: 0.1rem; font-size: 0.65rem; }
.col-badge {
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(16,185,129,0.12);
    color: var(--emerald-500);
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

/* Legend empile verticalement */
.tco-legend.stacked {
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.65rem;
}
.legend-row {
    display: grid;
    grid-template-columns: 14px 1fr auto auto;
    gap: 0.55rem;
    align-items: center;
    font-size: 0.78rem;
    color: var(--ink-700);
    font-weight: 600;
}
.legend-name { color: var(--ink-500); }
.legend-val { color: var(--ink-900); font-weight: 900; letter-spacing: -0.01em; }
.legend-pct { color: var(--ink-400); font-size: 0.7rem; font-weight: 700; }

/* Finance hero block */
.finance-hero {
    padding: 0.85rem 0.95rem;
    background: linear-gradient(135deg, rgba(16,185,129,0.07), rgba(16,185,129,0.02));
    border-radius: 14px;
    border: 1px solid rgba(16,185,129,0.18);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.finance-hero-main {
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--forest-700);
    line-height: 1;
}
.finance-hero-main small { font-size: 0.85rem; color: var(--ink-500); font-weight: 700; margin-left: 0.15rem; }
.finance-hero-sub {
    font-size: 0.72rem;
    color: var(--ink-500);
    font-weight: 700;
}
.finance-hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.5rem;
    margin-top: 0.35rem;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(16,185,129,0.2);
}
.finance-hero-grid > div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.finance-hero-lbl {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-500);
}
.finance-hero-val {
    font-size: 0.82rem;
    font-weight: 900;
    color: var(--ink-900);
    letter-spacing: -0.01em;
}
.finance-hero-val small { font-weight: 600; color: var(--ink-500); margin-left: 0.2rem; font-size: 0.65rem; }

.finance-alt {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.55rem 0.7rem;
    background: var(--bone-50);
    border-radius: 12px;
}
.finance-alt-lbl {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-500);
}
.finance-alt-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.78rem;
}
.finance-alt-mode {
    font-weight: 800;
    color: var(--forest-700);
    letter-spacing: 0.04em;
    font-size: 0.65rem;
    text-transform: uppercase;
}
.finance-alt-val {
    font-weight: 900;
    color: var(--ink-900);
    letter-spacing: -0.01em;
}
.finance-alt-val small { font-weight: 600; color: var(--ink-500); font-size: 0.6rem; margin-left: 0.1rem; }
.finance-empty {
    padding: 1.5rem 0.7rem;
    text-align: center;
    color: var(--ink-500);
    font-size: 0.8rem;
    background: var(--bone-50);
    border-radius: 12px;
    border: 1px dashed var(--bone-200);
}

/* Bonus/malus list */
.bm-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.bm-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.5rem 0.7rem;
    border-radius: 10px;
    font-size: 0.8rem;
    background: var(--bone-50);
}
.bm-line span { color: var(--ink-500); font-weight: 600; }
.bm-line strong { color: var(--ink-900); font-weight: 900; }
.bm-line-pos { background: #ECFDF5; }
.bm-line-pos span { color: #047857; }
.bm-line-pos strong { color: #065F46; }
.bm-line-neg { background: #FEF2F2; }
.bm-line-neg span { color: #B91C1C; }
.bm-line-neg strong { color: #991B1B; }
.bm-line-net {
    border-top: 1px dashed var(--bone-200);
    padding-top: 0.7rem;
    margin-top: 0.2rem;
    background: none;
    padding-left: 0; padding-right: 0;
}
.bm-line-net span { text-transform: uppercase; font-size: 0.65rem; letter-spacing: 0.12em; font-weight: 800; }
.bm-line-net strong { font-size: 0.95rem; }
.bm-line-net.is-pos strong { color: #047857; }
.bm-line-net.is-neg strong { color: #B91C1C; }

.bm-neutral {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.85rem 0.95rem;
    background: linear-gradient(135deg, #F0F9FF, #FAFAF7);
    border: 1px solid rgba(14, 165, 233, 0.18);
    border-radius: 12px;
    color: var(--ink-500);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
}
.bm-neutral svg { color: #0284C7; flex-shrink: 0; margin-top: 0.15rem; }
.bm-neutral strong {
    display: block;
    font-size: 0.8rem;
    font-weight: 900;
    color: var(--ink-900);
    letter-spacing: -0.01em;
    margin-bottom: 0.2rem;
}
.bm-neutral p {
    margin: 0;
    color: var(--ink-500);
}

/* Version compacte avec expandable details */
.bm-neutral-compact {
    background: linear-gradient(135deg, #F0F9FF, #FAFAF7);
    border: 1px solid rgba(14, 165, 233, 0.18);
    border-radius: 12px;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1.35;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.bm-neutral-compact[open] {
    border-color: rgba(14, 165, 233, 0.35);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.08);
}
.bm-neutral-compact summary {
    list-style: none;
    cursor: pointer;
    padding: 0.6rem 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--ink-900);
    user-select: none;
    transition: background 0.25s ease;
}
.bm-neutral-compact summary::-webkit-details-marker { display: none; }
.bm-neutral-compact summary:hover { background: rgba(14, 165, 233, 0.06); }
.bm-neutral-compact summary svg { color: #0284C7; flex-shrink: 0; }
.bm-compact-title {
    font-weight: 800;
    letter-spacing: -0.01em;
    font-size: 0.78rem;
    color: var(--ink-900);
}
.bm-compact-sub {
    font-weight: 600;
    color: var(--ink-500);
    font-size: 0.7rem;
}
.bm-compact-sub::before { content: '· '; opacity: 0.5; margin-right: 0.1rem; }
.bm-compact-more {
    margin-left: auto;
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.12);
    color: #0284C7;
    font-weight: 900;
    font-size: 0.9rem;
    line-height: 1;
    transition: transform 0.3s ease;
}
.bm-neutral-compact[open] .bm-compact-more {
    transform: rotate(45deg);
    background: rgba(14, 165, 233, 0.18);
}
.bm-compact-body {
    margin: 0;
    padding: 0 0.85rem 0.75rem;
    color: var(--ink-500);
    font-size: 0.72rem;
    line-height: 1.45;
    animation: fadeInUpFr 0.4s cubic-bezier(0.16,1,0.3,1);
}
.bm-line small {
    font-weight: 600;
    color: inherit;
    opacity: 0.7;
    margin-left: 0.15rem;
}

.revente-block {
    margin-top: auto;
    padding-top: 0.8rem;
    border-top: 1px dashed var(--bone-100);
}
.revente-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.4rem;
    font-size: 0.72rem;
}
.revente-head span:first-child {
    font-weight: 800;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.revente-val {
    font-size: 0.95rem;
    font-weight: 900;
    color: var(--emerald-500);
    letter-spacing: -0.01em;
}
.revente-bar {
    height: 8px;
    background: var(--bone-100);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.revente-fill {
    height: 100%;
    background: linear-gradient(90deg, #10B981 0%, #34D399 60%, #6EE7B7 100%);
    transition: width 0.8s cubic-bezier(0.16,1,0.3,1);
}
.revente-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 0.3rem;
    font-size: 0.68rem;
    color: var(--ink-400);
    font-weight: 700;
}

/* CTA XL */
.champion-v4-cta {
    display: flex;
    gap: 0.7rem;
}
.btn-primary-xl {
    padding: 1.05rem 1.8rem;
    font-size: 0.9rem;
    border-radius: 16px;
    box-shadow: 0 14px 32px rgba(16,185,129,0.38);
}
.btn-secondary-xl {
    padding: 1.05rem 1.4rem;
    font-size: 0.8rem;
    border-radius: 16px;
}

/* Responsive champion v4 */
@media (max-width: 1024px) {
    .champion-v4-media { aspect-ratio: 16 / 9; }
    .champion-v4-hero-caption { right: 24px; max-width: none; }
    .champion-v4-hero-price { position: static; margin: 1rem 1rem 1rem; background: rgba(6,31,37,0.85); }
    .champion-v4-kpi-strip { grid-template-columns: repeat(2, 1fr); }
    .kpi-block { border-left: none; border-top: 1px solid rgba(16, 185, 129, 0.12); padding: 0.7rem; }
    .kpi-block:first-child, .kpi-block:nth-child(2) { border-top: none; }
    .kpi-block-hero { margin-right: 0; }
    .champion-v4-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .champion-v4-hero-caption { bottom: 16px; left: 16px; right: 16px; }
    .champion-v4-title { font-size: 1.4rem; }
    .champion-v4-toptag { top: 14px; left: 14px; padding: 0.4rem 0.8rem; font-size: 0.65rem; }
    .champion-v4-topright { top: 14px; right: 14px; }
    .champion-v4-body { padding: 1rem 1rem 1.2rem; }
    .champion-v4-kpi-strip { grid-template-columns: 1fr 1fr; padding: 0.65rem; }
    .kpi-value-xl { font-size: 1.35rem; }
    .kpi-value-lg { font-size: 1rem; }
}

/* =====================================================================
   RESULTS V3 — Champion / Podium / Autres (2026-04-16)
   Hierarchie visuelle forte : le Top 1 domine, les challengers en paire,
   le reste en grille compacte. Palette forest/emerald/bone.
   ===================================================================== */

/* --- Section headers ------------------------------------------------- */
.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 0.25rem;
    margin-bottom: 1.25rem;
}
.section-title {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--ink-900);
    letter-spacing: -0.02em;
    margin: 0;
}
.section-sub {
    font-size: 0.875rem;
    color: var(--ink-500);
    margin: 0.375rem 0 0;
}
.brand-kicker {
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--emerald-500);
    margin-bottom: 0.35rem;
}
.brand-kicker-sm {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--emerald-500);
    margin-bottom: 0.2rem;
}

/* --- Chips / Pills --------------------------------------------------- */
.chip {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: var(--bone-100);
    color: var(--ink-700);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}
.chip-critair {
    background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.2);
}
.chip-mini {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: var(--bone-50);
    color: var(--ink-700);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
}

/* =====================================================================
   CHAMPION (Top 1) — carte XL horizontale, signature premium
   ===================================================================== */
.champion-wrap {
    position: relative;
}
.champion-ribbon {
    position: absolute;
    top: -6px; left: 20px; right: 20px;
    height: 10px;
    background: linear-gradient(90deg, transparent 0%, rgba(16,185,129,0.55) 50%, transparent 100%);
    filter: blur(6px);
    z-index: 0;
    pointer-events: none;
}
.champion-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: stretch;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFBF6 100%);
    border: 1px solid rgba(16, 185, 129, 0.22);
    border-radius: 26px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(16,185,129,0.35) inset,
        0 28px 62px rgba(6, 31, 37, 0.14),
        0 14px 32px rgba(6, 31, 37, 0.08),
        0 0 60px rgba(16, 185, 129, 0.06);
    transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s cubic-bezier(0.16,1,0.3,1);
}
.champion-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 1px 0 rgba(16,185,129,0.55) inset,
        0 36px 80px rgba(6, 31, 37, 0.18),
        0 18px 40px rgba(6, 31, 37, 0.10),
        0 0 100px rgba(16, 185, 129, 0.12);
}
.champion-media {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #0F3A42 0%, #134754 100%);
    display: block;
    min-height: 420px;
    height: 100%;
}
.champion-media img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.champion-card:hover .champion-media img { transform: scale(1.045); }
.champion-media-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, transparent 35%, transparent 65%, rgba(0,0,0,0.35) 100%);
    pointer-events: none;
}
.champion-badges {
    position: absolute;
    top: 18px; left: 18px;
    display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.badge-champion {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    box-shadow:
        0 10px 28px rgba(16,185,129,0.45),
        inset 0 1px 0 rgba(255,255,255,0.3);
    animation: pulseGlow 2.6s ease-in-out infinite;
}
.badge-vnvo {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.92);
    color: var(--forest-700);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    backdrop-filter: blur(8px);
}
.badge-vnvo.vnvo-new {
    background: #fff;
    color: #047857;
    box-shadow: 0 6px 18px rgba(16,185,129,0.3);
}
.badge-vnvo .dot {
    width: 6px; height: 6px;
    border-radius: 999px;
    background: var(--forest-700);
}
.badge-vnvo.vnvo-new .dot { background: var(--emerald-500); }
.badge-warn {
    position: absolute;
    bottom: 16px; left: 16px;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.95);
    color: #78350f;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}

.champion-body {
    padding: 1.75rem 1.9rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    min-width: 0;
}
.champion-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}
.champion-title {
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    font-weight: 900;
    color: var(--ink-900);
    letter-spacing: -0.02em;
    line-height: 1.08;
    margin: 0 0 0.6rem;
}
.champion-chips {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.champion-price {
    text-align: right;
    flex-shrink: 0;
}
.champion-price-label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-500);
    margin-bottom: 0.2rem;
}
.champion-price-value {
    font-size: clamp(1.5rem, 2vw, 1.85rem);
    font-weight: 900;
    color: var(--ink-900);
    line-height: 1;
    letter-spacing: -0.02em;
}
.champion-price-strike {
    font-size: 0.75rem;
    color: var(--ink-400);
    text-decoration: line-through;
    margin-top: 0.2rem;
    font-weight: 600;
}

/* --- KPI strip ------------------------------------------------------- */
.kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    padding: 0.9rem;
    background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(19,71,84,0.04));
    border-radius: 18px;
    border: 1px solid rgba(16, 185, 129, 0.12);
}
.kpi {
    min-width: 0;
    padding: 0.3rem;
}
.kpi-label {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-500);
    margin-bottom: 0.25rem;
}
.kpi-value {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--ink-900);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.kpi-value-sm {
    font-size: 1rem;
    font-weight: 900;
    color: var(--ink-900);
    letter-spacing: -0.02em;
}
.kpi-emerald { color: var(--emerald-500); }
.kpi-sub {
    font-size: 0.65rem;
    color: var(--ink-500);
    margin-top: 0.15rem;
    font-weight: 600;
}
.text-emerald { color: #059669; font-weight: 800; }
.text-rose    { color: #E11D48; font-weight: 800; }

/* --- TCO breakdown --------------------------------------------------- */
.tco-block {
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid var(--bone-100);
    border-radius: 18px;
}
.tco-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.7rem;
}
.tco-title {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-500);
}
.tco-total {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--emerald-500);
    letter-spacing: -0.02em;
}
.tco-bar {
    display: flex;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--bone-100);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.tco-bar.compact { height: 10px; }
.tco-bar.micro   { height: 7px; border-radius: 999px; }
.tco-seg { height: 100%; }
.tco-bar .tco-seg.seg-deprec  { background: linear-gradient(90deg, #2A6F5D, #134754); }
.tco-bar .tco-seg.seg-entret  { background: linear-gradient(90deg, #6EE7B7, #34D399); }
.tco-bar .tco-seg.seg-energie { background: linear-gradient(90deg, #34D399, #10B981); }
.tco-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.7rem;
    font-size: 0.75rem;
    color: var(--ink-500);
}
.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
}
.legend-item strong { color: var(--ink-900); font-weight: 900; margin-left: 0.2rem; }
.legend-item em     { font-style: normal; color: var(--ink-400); font-weight: 600; }
.legend-item .dot { width: 10px; height: 10px; border-radius: 999px; }
.legend-item .dot.seg-deprec  { background: linear-gradient(135deg, #2A6F5D, #134754); }
.legend-item .dot.seg-entret  { background: linear-gradient(135deg, #6EE7B7, #34D399); }
.legend-item .dot.seg-energie { background: linear-gradient(135deg, #34D399, #10B981); }

/* --- 3 scenarios financement ---------------------------------------- */
.finance-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-500);
}
.finance-best {
    color: var(--emerald-500);
    background: rgba(16,185,129,0.1);
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    font-size: 0.65rem;
}
.scenarios-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
}
.scenarios-compact { gap: 0.5rem; }
.scenario-card {
    position: relative;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid var(--bone-100);
    border-radius: 16px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    min-width: 0;
}
.scenario-card:hover {
    border-color: var(--emerald-500);
    box-shadow: 0 10px 24px rgba(16,185,129,0.12);
    transform: translateY(-1px);
}
.scenarios-compact .scenario-card { padding: 0.65rem 0.7rem; border-radius: 12px; }
.scenario-cash   { background: linear-gradient(180deg, #FAFAF7, #F4F3ED); }
.scenario-credit { background: linear-gradient(180deg, #FFFFFF, #F8F7F2); }
.scenario-loa    { background: linear-gradient(180deg, #ECFDF5, #FAFAF7); border-color: rgba(16,185,129,0.2); }
.scenario-disabled { opacity: 0.5; filter: grayscale(0.4); }

.scenario-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}
.scenario-label {
    font-size: 0.65rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--forest-700);
}
.scenario-taeg {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--ink-500);
    background: var(--bone-100);
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
}
.scenarios-compact .scenario-head { margin-bottom: 0.2rem; }
.scenarios-compact .scenario-label { font-size: 0.58rem; letter-spacing: 0.1em; }
.scenarios-compact .scenario-taeg  { font-size: 0.55rem; padding: 0.1rem 0.3rem; }

.scenario-main {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--ink-900);
    letter-spacing: -0.02em;
    line-height: 1;
}
.scenario-main .scenario-unit {
    font-size: 0.7rem;
    color: var(--ink-500);
    margin-left: 0.1rem;
    font-weight: 700;
}
.scenarios-compact .scenario-main { font-size: 1rem; }
.scenarios-compact .scenario-main .scenario-unit { font-size: 0.6rem; }

.scenario-sub {
    font-size: 0.7rem;
    color: var(--ink-500);
    margin-top: 0.3rem;
    font-weight: 600;
}
.scenarios-compact .scenario-sub { font-size: 0.62rem; margin-top: 0.2rem; }

/* --- Bonus/Malus strip ---------------------------------------------- */
.bm-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    background: linear-gradient(135deg, #FEF3C7 0%, #FFFBEB 50%, #FEF3C7 100%);
    border-radius: 14px;
    border: 1px solid rgba(245, 158, 11, 0.18);
}
.bm-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(255,255,255,0.72);
    color: var(--ink-700);
}
.bm-item .bm-label { color: var(--ink-500); font-weight: 600; }
.bm-item .bm-value { font-weight: 900; }
.bm-positive { background: #D1FAE5; color: #065F46; }
.bm-positive .bm-label { color: #047857; }
.bm-negative { background: #FEE2E2; color: #991B1B; }
.bm-negative .bm-label { color: #B91C1C; }
.bm-total-positive { background: #10B981; color: #fff; }
.bm-total-positive .bm-label { color: rgba(255,255,255,0.8); }
.bm-total-negative { background: #DC2626; color: #fff; }
.bm-total-negative .bm-label { color: rgba(255,255,255,0.8); }

.bm-pill {
    display: inline-flex;
    gap: 0.4rem;
    align-items: baseline;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-top: 0.6rem;
}
.bm-pill-positive { background: #D1FAE5; color: #065F46; }
.bm-pill-negative { background: #FEE2E2; color: #991B1B; }
.bm-pill strong { font-weight: 900; }
.bm-pill-mini {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    margin-top: 0.45rem;
}

/* --- CTAs ------------------------------------------------------------ */
.champion-cta {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.2rem;
}
.btn-primary {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 1.2rem;
    border-radius: 14px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #fff;
    font-weight: 900;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(16,185,129,0.32);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(16,185,129,0.4);
}
.btn-primary-sm {
    padding: 0.65rem 0.9rem;
    font-size: 0.72rem;
    border-radius: 11px;
}
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--bone-200);
    color: var(--forest-800);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: border-color 0.3s ease, background 0.3s ease;
}
.btn-secondary:hover {
    border-color: var(--emerald-500);
    background: var(--bone-50);
}
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 11px;
    background: var(--bone-100);
    border: none;
    color: var(--forest-700);
    cursor: pointer;
    transition: background 0.3s ease;
}
.btn-icon:hover { background: var(--bone-200); }

/* =====================================================================
   PODIUM #2 & #3 — Grid 2 colonnes, format moyen
   ===================================================================== */
.podium-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
.podium-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--bone-100);
    border-radius: 22px;
    overflow: hidden;
    box-shadow:
        0 20px 44px rgba(6, 31, 37, 0.10),
        0 8px 18px rgba(6, 31, 37, 0.05);
    transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s cubic-bezier(0.16,1,0.3,1);
}
.podium-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 28px 60px rgba(6, 31, 37, 0.14),
        0 12px 26px rgba(6, 31, 37, 0.08);
}
.podium-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(180deg, #0F3A42 0%, #134754 100%);
    display: block;
}
.podium-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.podium-card:hover .podium-media img { transform: scale(1.04); }
.podium-media-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, transparent 40%, rgba(0,0,0,0.35) 100%);
}
.badge-rank {
    position: absolute;
    top: 14px; left: 14px;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}
.badge-rank.rank-2 { background: linear-gradient(135deg, #2A6F5D, #134754); box-shadow: 0 6px 18px rgba(19,71,84,0.35); }
.badge-rank.rank-3 { background: linear-gradient(135deg, #37885F, #245F58); box-shadow: 0 6px 18px rgba(36,95,88,0.35); }
.badge-corner {
    position: absolute;
    top: 14px; right: 14px;
}

.podium-body {
    padding: 1.25rem 1.4rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    flex: 1;
}
.podium-title {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--ink-900);
    letter-spacing: -0.015em;
    line-height: 1.12;
    margin: 0;
}
.podium-title a { color: inherit; text-decoration: none; }
.podium-title a:hover { color: var(--forest-700); }
.podium-chips {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.podium-kpi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    background: linear-gradient(135deg, rgba(16,185,129,0.05), rgba(19,71,84,0.03));
    border-radius: 14px;
    border: 1px solid rgba(16, 185, 129, 0.1);
}
.podium-kpi .kpi-label { font-size: 0.58rem; margin-bottom: 0.1rem; }
.podium-cta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
}

/* =====================================================================
   AUTRES (#4 a #10) — Grid compact 3 colonnes
   ===================================================================== */
.others-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}
.other-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--bone-100);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(6, 31, 37, 0.06);
    transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s cubic-bezier(0.16,1,0.3,1);
}
.other-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 16px 32px rgba(6, 31, 37, 0.11),
        0 6px 14px rgba(6, 31, 37, 0.07);
    border-color: rgba(16, 185, 129, 0.25);
}
.other-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(180deg, #0F3A42 0%, #134754 100%);
    display: block;
}
.other-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.other-card:hover .other-media img { transform: scale(1.04); }
.badge-rank-mini {
    position: absolute;
    top: 10px; left: 10px;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}
.badge-vnvo-mini {
    position: absolute;
    top: 10px; right: 10px;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--forest-700);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    backdrop-filter: blur(6px);
}
.badge-vnvo-mini.vnvo-new { background: #fff; color: var(--emerald-500); }

.other-body {
    padding: 0.95rem 1.05rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}
.other-title {
    font-size: 0.9rem;
    font-weight: 900;
    color: var(--ink-900);
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.other-title a { color: inherit; text-decoration: none; }
.other-title a:hover { color: var(--forest-700); }
.other-chips {
    display: flex; flex-wrap: wrap; gap: 0.25rem;
}
.other-prices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    padding: 0.5rem 0.7rem;
    background: var(--bone-50);
    border-radius: 10px;
}
.other-price-main, .other-price-tco {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.other-price-value {
    font-size: 0.95rem;
    font-weight: 900;
    color: var(--ink-900);
    letter-spacing: -0.015em;
    line-height: 1.1;
    white-space: nowrap;
}
.other-price-label {
    font-size: 0.56rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-400);
    margin-top: 0.1rem;
}
.other-price-tco { text-align: right; }

.other-best {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0.55rem;
    background: linear-gradient(90deg, rgba(16,185,129,0.08), rgba(16,185,129,0.02));
    border-radius: 8px;
    font-size: 0.68rem;
}
.other-best-mode {
    font-weight: 800;
    color: var(--forest-700);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.58rem;
}
.other-best-mens {
    font-weight: 900;
    color: var(--emerald-500);
    font-size: 0.75rem;
}

.other-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 0.8rem;
    border-radius: 10px;
    background: var(--bone-100);
    color: var(--forest-800);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
    margin-top: auto;
}
.other-cta:hover {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #fff;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px) {
    .champion-card { grid-template-columns: 1fr; }
    .champion-media { aspect-ratio: 16 / 9; }
    .champion-body { padding: 1.5rem 1.25rem 1.25rem; }
    .kpi-strip { grid-template-columns: repeat(2, 1fr); }
    .scenarios-grid { grid-template-columns: 1fr; }
    .podium-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .section-title { font-size: 1.25rem; }
    .champion-head { flex-direction: column; gap: 0.8rem; }
    .champion-price { text-align: left; }
    .kpi-strip { grid-template-columns: repeat(2, 1fr); padding: 0.7rem; }
    .kpi-value { font-size: 1rem; }
    .others-grid { grid-template-columns: 1fr; }
    .bm-strip { flex-direction: column; align-items: stretch; }
}

/* ===== LEGACY MOBILE RESPONSIVE FIXES ===== */
@media (max-width: 640px) {
    .vehicle-card-result { padding: 0.75rem !important; }
    .tco-deprec, .tco-entretien, .tco-energie { height: 8px !important; }
    .vehicle-card-result .text-xs { font-size: 0.65rem; }
    .filter-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .results-hero { padding: 1rem !important; }
    .results-hero h1 { font-size: 1.5rem !important; }
    .tco-label-sm { font-size: 0.6rem !important; }
}