/* ===========================================
   NOTRE PARTI - Main Styles
   idees.css
   =========================================== */

:root {
    --orange: #FF6B00;
    --orange-dark: #E55A00;
    --black: #0A0A0A;
    --white: #FAFAF8;
    --cream: #F5F3EE;
    --gray: #6B6B6B;
    --gray-light: #E8E6E1;
    --green: #00C853;
    --red: #FF3D00;
    --blue-vote: #2962FF;
    --red-vote: #FF5252;
    --teal: #00897B;
    --feasibility-high: #00C853;
    --feasibility-medium: #FF9800;
    --feasibility-low: #FF5252;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'DM Sans', -apple-system, sans-serif;
    background: var(--cream);
    color: var(--black);
    line-height: 1.5;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===========================================
   HEADER
   =========================================== */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--black);
    border-bottom: 3px solid var(--orange);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--white);
}

.logo-mark {
    width: 42px;
    height: 42px;
    background: var(--orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    color: white;
    transform: rotate(-3deg);
    border: 2px solid var(--white);
}

.logo-text {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    letter-spacing: 0.05em;
}

.logo-text span { color: var(--orange); }

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-status {
    display: none;
    align-items: center;
    gap: 8px;
    color: var(--green);
    font-family: 'Space Mono', monospace;
    font-size: 12px;
}

.user-status.show {
    display: flex;
}

.btn-logout {
    background: transparent;
    border: 1px solid var(--gray);
    color: var(--gray);
    padding: 6px 12px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-logout:hover {
    border-color: var(--red);
    color: var(--red);
}

.btn-header {
    background: var(--orange);
    color: white;
    border: none;
    padding: 12px 24px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-header:hover {
    background: var(--orange-dark);
}

.btn-header.logged-in {
    background: var(--green);
}

/* My Comments Badge */
.my-comments-badge {
    position: relative;
    background: transparent;
    border: 1px solid var(--gray);
    color: var(--gray);
    padding: 8px 14px;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    display: none;
}

.my-comments-badge.show {
    display: flex;
    align-items: center;
    gap: 6px;
}

.my-comments-badge:hover {
    border-color: var(--orange);
    color: var(--orange);
}

.my-comments-badge .notif-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    background: var(--red);
    color: white;
    border-radius: 50%;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse 2s infinite;
}

/* ===========================================
   PAGE HEADER
   =========================================== */
.page-header {
    background: var(--black);
    color: var(--white);
    padding: 120px 20px 60px;
}

.page-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 24px;
}

.page-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(48px, 8vw, 80px);
    line-height: 0.9;
}

.page-title span { color: var(--orange); }

.page-subtitle {
    color: var(--gray);
    font-size: 16px;
    margin-top: 12px;
}

.page-stats {
    display: flex;
    gap: 32px;
}

.page-stat {
    text-align: center;
}

.page-stat-number {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 40px;
    color: var(--orange);
}

.page-stat-label {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--gray);
    text-transform: uppercase;
}

/* ===========================================
   TURNSTILE
   =========================================== */
.turnstile-wrapper {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}

/* ===========================================
   MAIN CONTENT
   =========================================== */
main {
    padding: 40px 0 80px;
}

/* ===========================================
   FILTERS
   =========================================== */
.filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 32px;
    align-items: center;
}

.filter-label {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--gray);
    margin-right: 8px;
    flex-shrink: 0;
}

.filters-themes-wrapper {
    position: relative;
    flex: 1;
    min-width: 0;
    max-width: 100%;
}

.filters-themes {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 0;
}

.filters-themes::-webkit-scrollbar {
    display: none;
}

.filters-themes-wrapper::before,
.filters-themes-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s;
}

.filters-themes-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--cream), transparent);
}

.filters-themes-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--cream), transparent);
}

.filters-themes-wrapper.scroll-left::before,
.filters-themes-wrapper.scroll-right::after {
    opacity: 1;
}

.filter-btn {
    background: var(--white);
    border: 2px solid var(--gray-light);
    padding: 10px 16px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--black);
    color: var(--white);
    border-color: var(--black);
}

.sort-select {
    padding: 10px 16px;
    border: 2px solid var(--gray-light);
    background: var(--white);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
}

/* Quick Vote Button */
.btn-quick-vote {
    background: var(--orange);
    color: white;
    border: none;
    padding: 10px 20px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.btn-quick-vote:hover {
    background: var(--orange-dark);
    transform: scale(1.02);
}

.btn-quick-vote:disabled {
    background: var(--gray);
    cursor: not-allowed;
    transform: none;
}

.btn-quick-vote svg {
    width: 18px;
    height: 18px;
}

.quick-vote-count {
    background: var(--black);
    padding: 2px 8px;
    border-radius: 10px;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
}

/* ===========================================
   IDEAS GRID - OPTIMIZED FOR PERFORMANCE
   =========================================== */
.ideas-grid {
    display: grid;
    gap: 16px;
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

@media (min-width: 640px) {
    .ideas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .ideas-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Load More Button */
.load-more-container {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    padding: 32px 0;
}

.btn-load-more {
    background: var(--white);
    border: 2px solid var(--black);
    color: var(--black);
    padding: 16px 40px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-load-more:hover {
    background: var(--black);
    color: var(--white);
}

.btn-load-more:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-load-more .loading-spinner {
    width: 18px;
    height: 18px;
    border-width: 2px;
}

/* ===========================================
   IDEA CARD
   =========================================== */
.idea-card {
    background: var(--white);
    border: 2px solid var(--black);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s;
    contain: layout style paint;
}

.idea-card:hover {
    transform: translateY(-4px);
}

.idea-card-body {
    padding: 20px 20px 16px;
    flex-grow: 1;
}

.idea-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 8px;
}

.idea-top-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.idea-theme {
    display: inline-block;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 10px;
}

.theme-logement { background: #FFE0B2; color: #E65100; }
.theme-emploi { background: #C8E6C9; color: #2E7D32; }
.theme-climat { background: #B3E5FC; color: #0277BD; }
.theme-education { background: #E1BEE7; color: #7B1FA2; }
.theme-sante { background: #FFCDD2; color: #C62828; }
.theme-justice { background: #D1C4E9; color: #512DA8; }
.theme-armee { background: #CFD8DC; color: #37474F; }
.theme-agriculture { background: #DCEDC8; color: #558B2F; }
.theme-economie { background: #FFF9C4; color: #F57F17; }
.theme-etat { background: #B2EBF2; color: #00838F; }
.theme-autre { background: var(--gray-light); color: var(--gray); }

.idea-rank {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px;
    color: var(--gray-light);
    line-height: 1;
}

.idea-rank.top-3 {
    color: var(--orange);
}

.idea-content {
    font-size: 15px;
    line-height: 1.5;
}

/* ===========================================
   FEASIBILITY BADGE
   =========================================== */
.feasibility-badge {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: help;
    transition: all 0.2s ease;
    border: 2px solid;
    background: var(--white);
    flex-shrink: 0;
}

.feasibility-badge:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Color variants */
.feasibility-badge.high {
    border-color: var(--feasibility-high);
    background: linear-gradient(135deg, rgba(0,200,83,0.1), rgba(0,200,83,0.02));
}

.feasibility-badge.high .feasibility-score {
    color: var(--feasibility-high);
}

.feasibility-badge.medium {
    border-color: var(--feasibility-medium);
    background: linear-gradient(135deg, rgba(255,152,0,0.1), rgba(255,152,0,0.02));
}

.feasibility-badge.medium .feasibility-score {
    color: var(--feasibility-medium);
}

.feasibility-badge.low {
    border-color: var(--feasibility-low);
    background: linear-gradient(135deg, rgba(255,82,82,0.1), rgba(255,82,82,0.02));
}

.feasibility-badge.low .feasibility-score {
    color: var(--feasibility-low);
}

.feasibility-score {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
}

.feasibility-badge-label {
    font-family: 'Space Mono', monospace;
    font-size: 6px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--gray);
    margin-top: 1px;
}

/* Feasibility Tooltip */
.feasibility-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    right: 50%;
    transform: translateX(50%);
    background: var(--black);
    color: var(--white);
    padding: 6px 10px;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 50;
    pointer-events: none;
}

.feasibility-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 50%;
    transform: translateX(50%);
    border: 5px solid transparent;
    border-bottom-color: var(--black);
}

.feasibility-badge:hover .feasibility-tooltip {
    opacity: 1;
    visibility: visible;
}

/* ===========================================
   INSIGHT SECTION (Fiche d'éclairage)
   =========================================== */
.idea-insight-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(0,137,123,0.08), rgba(0,137,123,0.04));
    border: 1px solid rgba(0,137,123,0.2);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    text-align: left;
    font-family: 'DM Sans', sans-serif;
}

.idea-insight-toggle:hover {
    background: linear-gradient(135deg, rgba(0,137,123,0.12), rgba(0,137,123,0.06));
    border-color: var(--teal);
}

.idea-insight-toggle.open {
    border-radius: 6px 6px 0 0;
    border-bottom: none;
}

.insight-icon {
    font-size: 14px;
}

.insight-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex: 1;
}

.insight-arrow {
    color: var(--teal);
    font-size: 12px;
    transition: transform 0.2s;
}

.idea-insight-toggle.open .insight-arrow {
    transform: rotate(180deg);
}

.idea-insight-panel {
    display: none;
    background: linear-gradient(135deg, rgba(0,137,123,0.06), rgba(0,137,123,0.02));
    border: 1px solid rgba(0,137,123,0.2);
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 16px;
    animation: slideDown 0.2s ease;
}

.idea-insight-panel.open {
    display: block;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.insight-main {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0,137,123,0.15);
}

.insight-cost {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    color: var(--teal);
    line-height: 1;
}

.insight-cost.unknown {
    font-size: 16px;
    color: var(--gray);
}

.insight-cost-type {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(0,137,123,0.15);
    color: var(--teal);
}

.insight-cost-type.saving {
    background: rgba(0,200,83,0.15);
    color: var(--green);
}

.insight-row {
    margin-bottom: 10px;
}

.insight-row:last-child {
    margin-bottom: 0;
}

.insight-row-label {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray);
    margin-bottom: 2px;
}

.insight-row-value {
    font-size: 12px;
    color: var(--black);
    line-height: 1.4;
}

.insight-warning {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 10px;
    background: rgba(255,152,0,0.1);
    border-left: 2px solid #FF9800;
    font-size: 11px;
    color: #E65100;
}

.insight-warning-icon {
    flex-shrink: 0;
}

.insight-sources {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,137,123,0.15);
}

.insight-sources-label {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray);
    margin-bottom: 4px;
}

.insight-sources-list {
    font-size: 10px;
    color: var(--gray);
}

.insight-meta {
    margin-top: 10px;
    font-size: 9px;
    color: var(--gray);
    opacity: 0.7;
}

/* ===========================================
   FEASIBILITY SECTION (Accordéon Faisabilité)
   =========================================== */
.idea-feasibility-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(100,100,100,0.06), rgba(100,100,100,0.02));
    border: 1px solid var(--gray-light);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    text-align: left;
    font-family: 'DM Sans', sans-serif;
}

.idea-feasibility-toggle:hover {
    background: linear-gradient(135deg, rgba(100,100,100,0.1), rgba(100,100,100,0.04));
    border-color: var(--gray);
}

.idea-feasibility-toggle.open {
    border-radius: 6px 6px 0 0;
    border-bottom: none;
}

.idea-feasibility-toggle.high {
    background: linear-gradient(135deg, rgba(0,200,83,0.08), rgba(0,200,83,0.02));
    border-color: rgba(0,200,83,0.3);
}

.idea-feasibility-toggle.high:hover {
    border-color: var(--feasibility-high);
}

.idea-feasibility-toggle.medium {
    background: linear-gradient(135deg, rgba(255,152,0,0.08), rgba(255,152,0,0.02));
    border-color: rgba(255,152,0,0.3);
}

.idea-feasibility-toggle.medium:hover {
    border-color: var(--feasibility-medium);
}

.idea-feasibility-toggle.low {
    background: linear-gradient(135deg, rgba(255,82,82,0.08), rgba(255,82,82,0.02));
    border-color: rgba(255,82,82,0.3);
}

.idea-feasibility-toggle.low:hover {
    border-color: var(--feasibility-low);
}

.feasibility-toggle-icon {
    font-size: 14px;
}

.feasibility-toggle-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex: 1;
    color: var(--gray);
}

.idea-feasibility-toggle.high .feasibility-toggle-label {
    color: #1B5E20;
}

.idea-feasibility-toggle.medium .feasibility-toggle-label {
    color: #E65100;
}

.idea-feasibility-toggle.low .feasibility-toggle-label {
    color: #B71C1C;
}

.feasibility-toggle-score {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    line-height: 1;
}

.idea-feasibility-toggle.high .feasibility-toggle-score {
    color: var(--feasibility-high);
}

.idea-feasibility-toggle.medium .feasibility-toggle-score {
    color: var(--feasibility-medium);
}

.idea-feasibility-toggle.low .feasibility-toggle-score {
    color: var(--feasibility-low);
}

.feasibility-toggle-arrow {
    color: var(--gray);
    font-size: 12px;
    transition: transform 0.2s;
}

.idea-feasibility-toggle.open .feasibility-toggle-arrow {
    transform: rotate(180deg);
}

/* Feasibility Panel */
.idea-feasibility-panel {
    display: none;
    border: 1px solid var(--gray-light);
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 16px;
    animation: slideDown 0.2s ease;
}

.idea-feasibility-panel.open {
    display: block;
}

.idea-feasibility-panel.high {
    background: linear-gradient(135deg, rgba(0,200,83,0.06), rgba(0,200,83,0.02));
    border-color: rgba(0,200,83,0.3);
}

.idea-feasibility-panel.medium {
    background: linear-gradient(135deg, rgba(255,152,0,0.06), rgba(255,152,0,0.02));
    border-color: rgba(255,152,0,0.3);
}

.idea-feasibility-panel.low {
    background: linear-gradient(135deg, rgba(255,82,82,0.06), rgba(255,82,82,0.02));
    border-color: rgba(255,82,82,0.3);
}

.feasibility-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.feasibility-panel-score {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 36px;
    line-height: 1;
}

.feasibility-panel-score.high { color: var(--feasibility-high); }
.feasibility-panel-score.medium { color: var(--feasibility-medium); }
.feasibility-panel-score.low { color: var(--feasibility-low); }

.feasibility-panel-gauge {
    flex: 1;
    height: 8px;
    background: rgba(0,0,0,0.1);
    border-radius: 4px;
    overflow: hidden;
}

.feasibility-panel-gauge-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.feasibility-panel-gauge-fill.high { background: var(--feasibility-high); }
.feasibility-panel-gauge-fill.medium { background: var(--feasibility-medium); }
.feasibility-panel-gauge-fill.low { background: var(--feasibility-low); }

.feasibility-panel-reasoning {
    font-size: 13px;
    line-height: 1.6;
    color: var(--black);
}

.feasibility-panel-meta {
    margin-top: 12px;
    font-size: 9px;
    color: var(--gray);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ===========================================
   AUTHOR SECTION
   =========================================== */
.idea-author-section {
    padding: 12px 20px;
    border-top: 1px solid var(--gray-light);
    background: var(--cream);
}

.idea-author-main {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--black);
    margin-bottom: 4px;
}

.idea-author-credentials {
    font-size: 12px;
    color: var(--gray);
    margin-bottom: 6px;
}

.idea-socials {
    display: flex;
    gap: 8px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: var(--gray-light);
    color: var(--gray);
    text-decoration: none;
    transition: all 0.2s;
}

.social-link:hover {
    background: var(--black);
    color: var(--white);
}

.social-link svg {
    width: 14px;
    height: 14px;
}

/* ===========================================
   FOOTER SECTION (Card)
   =========================================== */
.idea-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-top: 1px solid var(--gray-light);
    background: var(--white);
}

.vote-section {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vote-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 2px solid;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.vote-up {
    border-color: var(--blue-vote);
    color: var(--blue-vote);
}

.vote-up:hover,
.vote-up.voted {
    background: var(--blue-vote);
    color: white;
}

.vote-down {
    border-color: var(--red-vote);
    color: var(--red-vote);
}

.vote-down:hover,
.vote-down.voted {
    background: var(--red-vote);
    color: white;
}

.vote-info {
    text-align: center;
    min-width: 50px;
}

.vote-score {
    font-family: 'Space Mono', monospace;
    font-size: 16px;
    font-weight: 700;
    display: block;
}

.vote-score.positive { color: var(--blue-vote); }
.vote-score.negative { color: var(--red-vote); }

.vote-count {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    color: var(--gray);
    text-transform: uppercase;
}

/* Share Button */
.share-wrapper {
    position: relative;
}

.share-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid var(--gray-light);
    padding: 8px 12px;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--gray);
    cursor: pointer;
    transition: all 0.2s;
}

.share-btn:hover {
    border-color: var(--orange);
    color: var(--orange);
}

.share-btn svg {
    width: 14px;
    height: 14px;
}

.share-btn-text {
    display: none;
}

@media (min-width: 400px) {
    .share-btn-text {
        display: inline;
    }
}

.share-dropdown {
    position: absolute;
    bottom: 100%;
    right: 0;
    background: var(--white);
    border: 2px solid var(--black);
    min-width: 180px;
    display: none;
    z-index: 100;
    margin-bottom: 8px;
}

.share-dropdown.active {
    display: block;
}

.share-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 13px;
    color: var(--black);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: 'DM Sans', sans-serif;
}

.share-option:hover {
    background: var(--cream);
}

.share-option svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ===========================================
   COMMENTS SECTION - IMPROVED UX
   =========================================== */
.comments-section {
    border-top: 2px solid var(--orange);
    background: linear-gradient(180deg, rgba(255,107,0,0.03), var(--white));
}

.comments-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    font-family: 'DM Sans', sans-serif;
}

.comments-toggle:hover {
    background: rgba(255,107,0,0.05);
}

.comments-toggle-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comments-toggle-icon {
    font-size: 18px;
}

.comments-toggle-text {
    font-size: 14px;
    font-weight: 700;
    color: var(--black);
}

/* Empty state - More engaging */
.comments-toggle-cta {
    display: none;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 13px;
    color: var(--orange);
    letter-spacing: 0.05em;
    padding: 4px 10px;
    background: rgba(255,107,0,0.1);
    border-radius: 4px;
    animation: gentlePulse 2s infinite;
}

.comments-section.empty .comments-toggle-cta {
    display: inline-block;
}

@keyframes gentlePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.comments-toggle-count {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    background: var(--cream);
    color: var(--gray);
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 700;
}

.comments-toggle-count.hot {
    background: var(--orange);
    color: white;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

.comments-toggle-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.comments-live {
    display: none;
    align-items: center;
    gap: 6px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--green);
    text-transform: uppercase;
}

.comments-live.show {
    display: flex;
}

.comments-live-dot {
    width: 6px;
    height: 6px;
    background: var(--green);
    border-radius: 50%;
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.comments-toggle-arrow {
    color: var(--orange);
    transition: transform 0.2s;
    font-size: 14px;
    font-weight: bold;
}

.comments-section.open .comments-toggle-arrow {
    transform: rotate(180deg);
}

.comments-container {
    display: none;
    padding: 0 20px 20px;
}

.comments-section.open .comments-container {
    display: block;
}

/* Comment Form - Better placement */
.comment-form {
    margin-bottom: 20px;
    background: var(--cream);
    border-radius: 8px;
    padding: 16px;
    border: 2px dashed var(--gray-light);
}

.comment-form-input-wrapper {
    position: relative;
}

.comment-form-textarea {
    width: 100%;
    min-height: 80px;
    padding: 14px;
    border: 2px solid var(--gray-light);
    border-radius: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 1.4;
    resize: none;
    transition: all 0.2s;
    background: var(--white);
}

.comment-form-textarea:focus {
    outline: none;
    border-color: var(--orange);
}

.comment-form-textarea::placeholder {
    color: var(--gray);
}

.comment-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

.comment-form-char-count {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--gray);
}

.comment-form-char-count.warning {
    color: var(--orange);
}

.comment-form-char-count.danger {
    color: var(--red);
}

.comment-form-submit {
    background: var(--orange);
    color: white;
    border: none;
    padding: 12px 24px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 4px;
}

.comment-form-submit:hover {
    background: var(--orange-dark);
    transform: scale(1.02);
}

.comment-form-submit:disabled {
    background: var(--gray-light);
    color: var(--gray);
    cursor: not-allowed;
    transform: none;
}

/* Login prompt */
.comment-login-prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255,107,0,0.08), rgba(255,107,0,0.02));
    border-radius: 8px;
    margin-bottom: 20px;
    border: 2px dashed var(--orange);
}

.comment-login-prompt p {
    font-size: 14px;
    color: var(--black);
    margin: 0;
    font-weight: 500;
}

.comment-login-btn {
    background: var(--orange);
    color: white;
    border: none;
    padding: 12px 20px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.comment-login-btn:hover {
    background: var(--orange-dark);
}

/* Sort Options */
.comments-sort {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gray-light);
}

.comments-sort-btn {
    background: transparent;
    border: none;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--gray);
    cursor: pointer;
    padding: 6px 10px;
    transition: all 0.2s;
    border-radius: 4px;
}

.comments-sort-btn:hover,
.comments-sort-btn.active {
    color: var(--black);
    background: var(--cream);
}

.comments-sort-btn.active {
    font-weight: 700;
    color: var(--orange);
}

/* Comment Item */
.comment-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--gray-light);
}

.comment-item:last-child {
    border-bottom: none;
}

.comment-item.reply {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    border-bottom: none;
    padding-bottom: 12px;
}

.comment-item.hot {
    background: linear-gradient(90deg, rgba(255,107,0,0.05), transparent);
    margin: 0 -20px;
    padding: 16px 20px;
    border-left: 3px solid var(--orange);
}

.comment-item.mine {
    background: linear-gradient(90deg, rgba(41,98,255,0.05), transparent);
    margin: 0 -20px;
    padding: 16px 20px;
    border-left: 3px solid var(--blue-vote);
}

.comment-item.has-new-reply {
    position: relative;
}

.comment-item.has-new-reply::after {
    content: 'Nouvelle réponse !';
    position: absolute;
    top: 8px;
    right: 8px;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    background: var(--red);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    animation: pulse 2s infinite;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.comment-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.comment-author-name {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--black);
}

.comment-author-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
}

.comment-author-badge.hot {
    background: var(--orange);
    color: white;
}

.comment-author-badge.you {
    background: var(--blue-vote);
    color: white;
}

.comment-time {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--gray);
}

.comment-content {
    font-size: 14px;
    line-height: 1.5;
    color: var(--black);
    margin-bottom: 12px;
    word-break: break-word;
}

/* Comment Replies Container - INDENTATION */
.comment-replies-container {
    margin-left: 32px;
    padding-left: 16px;
    border-left: 2px solid var(--gray-light);
    margin-top: 12px;
}

.comment-replies-container .comment-item {
    padding: 12px 0;
    border-bottom: none;
}

.comment-replies-container .comment-item:last-child {
    padding-bottom: 16px;
}

/* Responsive - moins d'indentation sur mobile */
@media (max-width: 600px) {
    .comment-replies-container {
        margin-left: 16px;
        padding-left: 12px;
    }
}

/* Comment Actions */
.comment-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.comment-action-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--gray);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.comment-action-btn:hover {
    background: var(--cream);
    color: var(--black);
}

.comment-action-btn.active {
    color: var(--blue-vote);
}

.comment-action-btn.active.dislike {
    color: var(--red-vote);
}

.comment-action-btn svg {
    width: 14px;
    height: 14px;
}

.comment-action-score {
    font-weight: 700;
}

.comment-action-score.positive {
    color: var(--blue-vote);
}

.comment-action-score.negative {
    color: var(--red-vote);
}

.comment-reply-btn {
    color: var(--orange);
}

.comment-reply-btn:hover {
    background: rgba(255,107,0,0.1);
}

/* Share dropdown */
.comment-share-wrapper {
    position: relative;
}

.comment-share-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    background: var(--white);
    border: 2px solid var(--black);
    min-width: 160px;
    display: none;
    z-index: 100;
    margin-bottom: 4px;
}

.comment-share-dropdown.active {
    display: block;
}

.comment-share-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--black);
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: 'DM Sans', sans-serif;
}

.comment-share-option:hover {
    background: var(--cream);
}

/* Report button */
.comment-report-btn {
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.2s;
}

.comment-item:hover .comment-report-btn {
    opacity: 1;
}

.comment-report-btn:hover {
    color: var(--red);
    background: rgba(255,61,0,0.1);
}

/* Reply Form */
.comment-reply-form {
    display: none;
    margin-top: 12px;
    margin-left: 32px;
    padding-left: 16px;
    border-left: 2px solid var(--orange);
}

.comment-reply-form.active {
    display: block;
}

/* Replies List */
.comment-replies {
    margin-top: 12px;
}

.comment-replies-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--orange);
    cursor: pointer;
    padding: 4px 0;
    margin-bottom: 8px;
}

.comment-replies-toggle:hover {
    text-decoration: underline;
}

/* Load More */
.comments-load-more {
    display: flex;
    justify-content: center;
    padding: 16px 0;
}

.comments-load-more-btn {
    background: transparent;
    border: 2px solid var(--gray-light);
    color: var(--gray);
    padding: 10px 24px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.comments-load-more-btn:hover {
    border-color: var(--orange);
    color: var(--orange);
}

/* Empty State */
.comments-empty {
    text-align: center;
    padding: 40px 16px;
    color: var(--gray);
}

.comments-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.comments-empty p {
    font-size: 15px;
    margin: 0;
}

.comments-empty-cta {
    margin-top: 16px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    color: var(--orange);
}

/* Loader in comments */
.comments-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    gap: 10px;
    color: var(--gray);
}

.comments-loader-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-light);
    border-top-color: var(--orange);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ===========================================
   MY COMMENTS PANEL
   =========================================== */
.my-comments-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    max-width: 100vw;
    height: 100vh;
    background: var(--white);
    z-index: 2500;
    box-shadow: -4px 0 20px rgba(0,0,0,0.2);
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.my-comments-panel.open {
    right: 0;
}

.my-comments-panel-header {
    padding: 20px;
    background: var(--black);
    color: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.my-comments-panel-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
}

.my-comments-panel-close {
    background: none;
    border: none;
    color: var(--white);
    font-size: 28px;
    cursor: pointer;
}

.my-comments-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.my-comments-panel-item {
    padding: 16px;
    border: 1px solid var(--gray-light);
    border-radius: 8px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.my-comments-panel-item:hover {
    border-color: var(--orange);
    background: var(--cream);
}

.my-comments-panel-item.has-reply {
    border-left: 3px solid var(--orange);
}

.my-comments-panel-item-idea {
    font-size: 12px;
    color: var(--gray);
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.my-comments-panel-item-content {
    font-size: 14px;
    color: var(--black);
    margin-bottom: 8px;
}

.my-comments-panel-item-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.my-comments-panel-item-time {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--gray);
}

.my-comments-panel-item-replies {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--orange);
    background: rgba(255,107,0,0.1);
    padding: 2px 8px;
    border-radius: 10px;
}

.my-comments-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 2400;
    display: none;
}

.my-comments-overlay.show {
    display: block;
}

/* ===========================================
   EMPTY STATE
   =========================================== */
.empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--gray);
}

.empty-state-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

/* ===========================================
   MODALS
   =========================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.modal-overlay.active {
    display: flex;
}

.modal {
    background: var(--white);
    max-width: 420px;
    width: 100%;
    padding: 40px;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--gray);
}

.modal-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 32px;
    margin-bottom: 8px;
}

.modal-subtitle {
    color: var(--gray);
    margin-bottom: 24px;
    font-size: 15px;
}

.modal .form-input {
    width: 100%;
    padding: 16px;
    border: 2px solid var(--gray-light);
    font-size: 16px;
    font-family: 'DM Sans', sans-serif;
    margin-bottom: 8px;
    background: var(--white);
    color: var(--black);
}

.modal .form-input:focus {
    outline: none;
    border-color: var(--orange);
}

.modal .form-input.error {
    border-color: var(--red);
}

.form-error {
    font-size: 13px;
    color: var(--red);
    margin-bottom: 8px;
    display: none;
}

.form-error.show {
    display: block;
}

.modal .btn-primary {
    width: 100%;
    background: var(--orange);
    color: white;
    border: none;
    padding: 16px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.modal .btn-primary:hover {
    background: var(--orange-dark);
}

.modal .btn-primary:disabled {
    background: var(--gray);
    cursor: not-allowed;
}

.modal-hint {
    font-size: 12px;
    color: var(--gray);
    margin-top: 16px;
    text-align: center;
}

/* Report Modal */
.report-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--gray-light);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 8px;
}

.report-option:hover {
    border-color: var(--orange);
}

.report-option.selected {
    border-color: var(--orange);
    background: rgba(255,107,0,0.05);
}

.report-option input {
    display: none;
}

.report-option-radio {
    width: 18px;
    height: 18px;
    border: 2px solid var(--gray-light);
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.report-option.selected .report-option-radio {
    border-color: var(--orange);
}

.report-option.selected .report-option-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: var(--orange);
    border-radius: 50%;
}

.report-option-label {
    font-size: 14px;
    color: var(--black);
}

.report-details {
    width: 100%;
    min-height: 80px;
    padding: 12px;
    border: 1px solid var(--gray-light);
    border-radius: 4px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    resize: none;
    margin-bottom: 16px;
}

.report-submit {
    width: 100%;
    background: var(--red);
    color: white;
    border: none;
    padding: 14px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.report-submit:hover {
    background: #CC3300;
}

.report-submit:disabled {
    background: var(--gray);
    cursor: not-allowed;
}

/* ===========================================
   QUICK VOTE MODE
   =========================================== */
.quick-vote-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--black);
    display: none;
    flex-direction: column;
    z-index: 3000;
    overflow: hidden;
}

.quick-vote-overlay.active {
    display: flex;
}

.quick-vote-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 2px solid var(--orange);
    background: var(--black);
    flex-shrink: 0;
}

.quick-vote-close {
    background: none;
    border: none;
    color: var(--gray);
    font-size: 28px;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
    padding: 4px;
}

.quick-vote-close:hover {
    color: var(--white);
}

.quick-vote-progress {
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    color: var(--white);
}

.quick-vote-progress span {
    color: var(--orange);
    font-weight: 700;
}

.quick-vote-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--orange);
    color: white;
    padding: 6px 12px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    letter-spacing: 0.05em;
}

.quick-vote-badge svg {
    width: 14px;
    height: 14px;
}

.quick-vote-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 16px;
    overflow-y: auto;
    min-height: 0;
}

.quick-vote-card {
    background: var(--white);
    border: 3px solid var(--black);
    max-width: 500px;
    width: 100%;
    position: relative;
    transform: scale(1);
    opacity: 1;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.quick-vote-card.vote-left {
    transform: translateX(-120%) rotate(-10deg);
    opacity: 0;
}

.quick-vote-card.vote-right {
    transform: translateX(120%) rotate(10deg);
    opacity: 0;
}

.quick-vote-card.entering {
    transform: scale(0.9);
    opacity: 0;
}

.qv-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-light);
}

.qv-card-body {
    padding: 20px 16px;
}

.qv-content {
    font-size: 16px;
    line-height: 1.5;
    color: var(--black);
}

/* QV Insight Panel */
.qv-insight-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(0,137,123,0.08), rgba(0,137,123,0.04));
    border: 1px solid rgba(0,137,123,0.2);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    text-align: left;
    font-family: 'DM Sans', sans-serif;
}

.qv-insight-toggle:hover {
    background: linear-gradient(135deg, rgba(0,137,123,0.12), rgba(0,137,123,0.06));
    border-color: var(--teal);
}

.qv-insight-toggle.open {
    border-radius: 6px 6px 0 0;
    border-bottom: none;
}

.qv-insight-panel {
    display: none;
    background: linear-gradient(135deg, rgba(0,137,123,0.06), rgba(0,137,123,0.02));
    border: 1px solid rgba(0,137,123,0.2);
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 14px;
}

.qv-insight-panel.open {
    display: block;
}

/* QV Feasibility Panel */
.qv-feasibility-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 12px;
    border: 1px solid var(--gray-light);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    text-align: left;
    font-family: 'DM Sans', sans-serif;
}

.qv-feasibility-toggle.high {
    background: linear-gradient(135deg, rgba(0,200,83,0.08), rgba(0,200,83,0.02));
    border-color: rgba(0,200,83,0.3);
}

.qv-feasibility-toggle.medium {
    background: linear-gradient(135deg, rgba(255,152,0,0.08), rgba(255,152,0,0.02));
    border-color: rgba(255,152,0,0.3);
}

.qv-feasibility-toggle.low {
    background: linear-gradient(135deg, rgba(255,82,82,0.08), rgba(255,82,82,0.02));
    border-color: rgba(255,82,82,0.3);
}

.qv-feasibility-toggle:hover {
    border-color: var(--gray);
}

.qv-feasibility-toggle.open {
    border-radius: 6px 6px 0 0;
    border-bottom: none;
}

.qv-feasibility-panel {
    display: none;
    border: 1px solid var(--gray-light);
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 14px;
}

.qv-feasibility-panel.open {
    display: block;
}

.qv-feasibility-panel.high {
    background: linear-gradient(135deg, rgba(0,200,83,0.06), rgba(0,200,83,0.02));
    border-color: rgba(0,200,83,0.3);
}

.qv-feasibility-panel.medium {
    background: linear-gradient(135deg, rgba(255,152,0,0.06), rgba(255,152,0,0.02));
    border-color: rgba(255,152,0,0.3);
}

.qv-feasibility-panel.low {
    background: linear-gradient(135deg, rgba(255,82,82,0.06), rgba(255,82,82,0.02));
    border-color: rgba(255,82,82,0.3);
}

.qv-author-section {
    padding: 12px 16px;
    border-top: 1px solid var(--gray-light);
    background: var(--cream);
}

.qv-author-main {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    color: var(--black);
    margin-bottom: 4px;
}

.qv-author-credentials {
    font-size: 12px;
    color: var(--gray);
    margin-bottom: 6px;
}

.qv-socials {
    display: flex;
    gap: 8px;
}

.qv-socials .social-link {
    width: 26px;
    height: 26px;
}

.qv-socials .social-link svg {
    width: 14px;
    height: 14px;
}

.quick-vote-stats {
    text-align: center;
    margin: 16px 0;
    flex-shrink: 0;
}

.qv-score {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 40px;
    line-height: 1;
}

.qv-score.positive { color: var(--blue-vote); }
.qv-score.negative { color: var(--red-vote); }
.qv-score.neutral { color: var(--gray); }

.qv-vote-count {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    color: var(--gray);
    margin-top: 4px;
}

.quick-vote-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-shrink: 0;
}

.qv-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    border: 3px solid;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 13px;
    letter-spacing: 0.05em;
    gap: 6px;
}

.qv-btn svg {
    width: 28px;
    height: 28px;
}

.qv-btn-down {
    border-color: var(--red-vote);
    color: var(--red-vote);
}

.qv-btn-down:hover {
    background: var(--red-vote);
    color: white;
    transform: scale(1.05);
}

.qv-btn-up {
    border-color: var(--blue-vote);
    color: var(--blue-vote);
}

.qv-btn-up:hover {
    background: var(--blue-vote);
    color: white;
    transform: scale(1.05);
}

.qv-secondary-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
    flex-shrink: 0;
}

.qv-btn-skip {
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.3);
    color: var(--white);
    padding: 12px 24px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.qv-btn-skip:hover {
    background: rgba(255,255,255,0.2);
    border-color: var(--white);
}

.qv-btn-skip svg {
    width: 16px;
    height: 16px;
}

.qv-btn-secondary {
    background: transparent;
    border: 1px solid var(--gray);
    color: var(--gray);
    padding: 10px 16px;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.qv-btn-secondary:hover {
    border-color: var(--white);
    color: var(--white);
}

.qv-btn-secondary svg {
    width: 14px;
    height: 14px;
}

/* Quick Vote Share Dropdown */
.qv-share-wrapper {
    position: relative;
}

.qv-share-dropdown {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--white);
    border: 2px solid var(--black);
    min-width: 180px;
    display: none;
    z-index: 100;
    margin-bottom: 8px;
}

.qv-share-dropdown.active {
    display: block;
}

/* Quick Vote Keyboard Hint */
.qv-keyboard-hint {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--gray);
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}

.qv-keyboard-hint span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.qv-keyboard-hint kbd {
    background: rgba(255,255,255,0.15);
    color: var(--white);
    padding: 3px 8px;
    border-radius: 3px;
    font-family: inherit;
    font-size: 10px;
}

/* Quick Vote Complete Screen */
.qv-complete {
    text-align: center;
    color: var(--white);
    padding: 40px 20px;
}

.qv-complete-icon {
    font-size: 64px;
    margin-bottom: 20px;
}

.qv-complete-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 40px;
    margin-bottom: 8px;
}

.qv-complete-title span {
    color: var(--orange);
}

.qv-complete-subtitle {
    color: var(--gray);
    font-size: 16px;
    margin-bottom: 28px;
}

.qv-complete-btn {
    background: var(--orange);
    color: white;
    border: none;
    padding: 14px 28px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
}

.qv-complete-btn:hover {
    background: var(--orange-dark);
}

/* ===========================================
   TOAST
   =========================================== */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--black);
    color: white;
    padding: 16px 32px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    z-index: 4000;
    opacity: 0;
    transition: all 0.3s;
    border: 2px solid var(--orange);
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast.success {
    background: var(--green);
    border-color: var(--green);
}

.toast.error {
    background: var(--red);
    border-color: var(--red);
}

/* ===========================================
   FOOTER
   =========================================== */
footer {
    background: var(--black);
    color: var(--white);
    padding: 48px 20px;
    text-align: center;
}

.footer-tagline {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    margin-bottom: 24px;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.footer-links a {
    color: var(--gray);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--orange);
}

.footer-copy {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--gray);
}

/* ===========================================
   LOADING
   =========================================== */
.loading {
    text-align: center;
    padding: 60px;
    color: var(--gray);
}

.loading-spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 3px solid var(--gray-light);
    border-top-color: var(--orange);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===========================================
   COOKIE BANNER
   =========================================== */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--black);
    color: white;
    padding: 12px 20px;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    z-index: 2500;
    font-size: 14px;
}

.cookie-banner.show {
    display: flex;
}

.cookie-banner p {
    margin: 0;
    flex: 1;
}

.cookie-buttons {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.cookie-btn {
    padding: 8px 16px;
    border: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.cookie-accept {
    background: var(--orange);
    color: white;
}

.cookie-refuse {
    background: transparent;
    color: var(--gray);
    border: 1px solid var(--gray);
}

/* ===========================================
   SUBMIT IDEA SECTION
   =========================================== */
#deposer {
    background: var(--black);
    color: var(--white);
    padding: 80px 0;
}

.submit-form {
    max-width: 600px;
}

.form-group {
    margin-bottom: 24px;
}

.form-label {
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    color: var(--gray);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 16px;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    border: 2px solid var(--gray);
    background: var(--black);
    color: var(--white);
    transition: border-color 0.2s;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--orange);
}

.form-input.error {
    border-color: var(--red);
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
}

.form-select {
    cursor: pointer;
}

.form-select option {
    background: var(--black);
}

.form-hint {
    font-size: 13px;
    color: var(--gray);
    margin-top: 8px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.form-section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    color: var(--orange);
    margin-top: 32px;
    margin-bottom: 8px;
    padding-top: 24px;
    border-top: 1px solid var(--gray);
}

.form-section-hint {
    font-size: 13px;
    color: var(--gray);
    margin-bottom: 16px;
}

.btn-primary {
    background: var(--orange);
    color: white;
    border: none;
    padding: 18px 36px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary:hover {
    background: var(--orange-dark);
}

.btn-primary:disabled {
    background: var(--gray);
    cursor: not-allowed;
}

.form-legal-links {
    font-size: 12px;
    color: var(--gray);
    margin-top: 16px;
}

.form-legal-links a {
    color: var(--gray);
    text-decoration: underline;
}

.form-legal-links a:hover {
    color: var(--orange);
}

/* ===========================================
   RESPONSIVE - MOBILE
   =========================================== */
@media (max-width: 768px) {
    .filters-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .filter-label {
        display: none;
    }
    
    .filters-themes-wrapper {
        width: 100%;
    }
    
    .sort-select {
        width: 100%;
    }
    
    .btn-quick-vote {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .quick-vote-header {
        padding: 10px 12px;
    }
    
    .quick-vote-badge {
        padding: 4px 8px;
        font-size: 12px;
    }
    
    .quick-vote-body {
        padding: 12px;
        justify-content: flex-start;
    }
    
    .qv-card-body {
        padding: 16px 14px;
    }
    
    .qv-content {
        font-size: 15px;
    }
    
    .quick-vote-stats {
        margin: 12px 0;
    }
    
    .qv-score {
        font-size: 32px;
    }
    
    .qv-btn {
        width: 75px;
        height: 75px;
        font-size: 11px;
    }
    
    .qv-btn svg {
        width: 24px;
        height: 24px;
    }
    
    .qv-btn-skip {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    .qv-keyboard-hint {
        display: none;
    }
    
    .qv-secondary-actions {
        flex-wrap: wrap;
    }
    
    .comment-item.reply {
        margin-left: 16px;
        padding-left: 12px;
    }
    
    .comment-reply-form {
        margin-left: 16px;
        padding-left: 12px;
    }
    
    .comment-report-btn {
        opacity: 1;
    }
    
    .comment-share-dropdown {
        left: auto;
        right: 0;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .form-row-3 {
        grid-template-columns: 1fr;
    }
    
    /* Feasibility badge smaller on mobile */
    .feasibility-badge {
        width: 36px;
        height: 36px;
    }
    
    .feasibility-score {
        font-size: 12px;
    }
    
    .feasibility-badge-label {
        font-size: 5px;
    }
}

@media (max-width: 520px) {
    .header-inner {
        padding: 10px 12px;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .logo-mark {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }
    
    .logo-text {
        font-size: 18px;
    }
    
    .header-right {
        margin-left: auto;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    
    .user-status span {
        display: none;
    }
    
    .btn-header {
        padding: 10px 14px;
        font-size: 16px;
        white-space: nowrap;
    }
    
    .btn-logout {
        padding: 6px 8px;
    }
    
    .my-comments-panel {
        width: 100%;
        right: -100%;
    }
}

@media (max-width: 480px) {
    .cookie-banner {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }
    
    .cookie-banner p {
        font-size: 13px;
        margin-bottom: 8px;
    }
}