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

:root {
    /* Couleurs principales - Style j6 */
    --color-black: #000000;
    --color-white: #ffffff;
    --color-red: #dc2626;
    --color-green: #16a34a;
    --color-blue: #2563eb;
    --color-beige-claim: #fff5f5;
    --color-green-reality: #f0fff4;
    --color-beige-warning: #fffaf0;
    --color-grey-dark: #4a5568;
    
    /* Couleurs de compatibilité */
    --primary-color: #000000;
    --secondary-color: #333333;
    --accent-color: #dc2626;
    --text-color: #1a1a1a;
    --light-bg: #ffffff;
    --border-color: #e2e8f0;
    --white: #ffffff;
    --warning-color: #d69e2e;
    --success-color: #16a34a;
    
    /* Espacement */
    --spacing-hero: 6.25rem; /* 100px */
    --spacing-section: 6.25rem; /* 100px */
    --max-width-content: 1000px;
    --max-width-narrow: 800px;
    
    /* Bordures */
    --border-radius-box: 12px;
    --border-radius-small: 8px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--color-white);
}

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

/* Navigation - Style j6 */
.main-nav {
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 1rem 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.main-nav h1 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.main-nav a {
    color: var(--white);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.main-nav a:hover,
.main-nav a.active {
    background-color: #333333;
}

/* Main content - Style j6 */
main {
    padding: 0;
    min-height: calc(100vh - 200px);
}

/* Sections avec fond noir alterné */
.content-section-black {
    background-color: var(--color-black);
    color: var(--color-white);
    padding: var(--spacing-section) 0;
}

.content-section-white {
    background-color: var(--color-white);
    color: var(--color-black);
    padding: var(--spacing-section) 0;
}

/* Hero Section - Style j6 */
.hero {
    text-align: center;
    padding: var(--spacing-hero) 0;
    background-color: var(--color-white);
    margin-bottom: 0;
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero h2 {
    font-size: clamp(32px, 5vw, 64px);
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.lead {
    font-size: clamp(18px, 2.5vw, 24px);
    color: var(--color-grey-dark);
    max-width: var(--max-width-narrow);
    margin: 0 auto;
    font-weight: 400;
    line-height: 1.5;
}

/* Cards - Style j6 */
.card {
    background-color: var(--color-white);
    color: var(--color-black);
    padding: 2rem;
    border-radius: var(--border-radius-box);
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-left: 5px solid var(--color-red);
}

.card h3 {
    color: var(--color-black);
    margin-bottom: 1rem;
    font-size: clamp(20px, 3vw, 24px);
    font-weight: 700;
}

.card p {
    color: var(--color-black);
    margin-bottom: 1rem;
}

.card ul {
    color: var(--color-black);
}

.card li {
    color: var(--color-black);
}

/* Assurer le contraste même dans les sections noires */
.content-section-black .card,
.content-section-black .card p,
.content-section-black .card h3,
.content-section-black .card ul,
.content-section-black .card li {
    color: var(--color-black);
}

.intro-content {
    display: grid;
    gap: 2rem;
    margin-bottom: 3rem;
}

/* Buttons - Style j6 */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: var(--color-black);
    color: var(--color-white);
    text-decoration: none;
    border-radius: var(--border-radius-small);
    transition: opacity 0.3s;
    margin-top: 0.5rem;
    font-weight: 600;
}

.btn:hover {
    opacity: 0.8;
}

/* Stats - Style j6 */
.stats {
    background-color: var(--color-black);
    color: var(--color-white);
    padding: var(--spacing-section) 0;
    margin-bottom: 0;
}

.stats h3 {
    text-align: center;
    color: var(--color-white);
    margin-bottom: 2rem;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.stat-item {
    text-align: center;
    padding: 1rem;
}

.stat-number {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: var(--color-blue);
    margin-bottom: 0.5rem;
}

.stat-label {
    color: var(--color-white);
    font-size: clamp(0.875rem, 1.5vw, 1rem);
}

/* Timeline - Style j6 */
.timeline {
    position: relative;
    padding: var(--spacing-section) 0;
    background-color: var(--color-black);
    color: var(--color-white);
}

.timeline-item {
    background-color: var(--color-white);
    color: var(--color-black);
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-radius: var(--border-radius-box);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    border-left: 5px solid var(--color-red);
    max-width: var(--max-width-content);
    margin-left: auto;
    margin-right: auto;
}

.timeline-item p {
    color: var(--color-black);
}

.timeline-item h4 {
    color: var(--color-black);
}

.timeline-item ul {
    color: var(--color-black);
}

.timeline-item li {
    color: var(--color-black);
}

.timeline-time {
    font-weight: 700;
    color: var(--color-red);
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin-bottom: 0.5rem;
}

.timeline-content h4 {
    color: var(--color-black);
    margin-bottom: 0.5rem;
    font-size: clamp(18px, 2.5vw, 22px);
    font-weight: 700;
}

/* Fact-check items - Style j6 */
.fact-check-item {
    background-color: var(--color-white);
    color: var(--color-black);
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: var(--border-radius-box);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    border-left: 5px solid var(--color-red);
    max-width: var(--max-width-content);
    margin-left: auto;
    margin-right: auto;
}

.fact-check-item h3 {
    color: var(--color-black);
}

.fact-check-item p {
    color: var(--color-black);
}

.fact-check-item ul {
    color: var(--color-black);
}

.fact-check-item li {
    color: var(--color-black);
}

.claim {
    background-color: var(--color-beige-claim);
    padding: 1.5rem;
    border-radius: var(--border-radius-small);
    margin-bottom: 1.5rem;
    border-left: 5px solid var(--color-red);
}

.claim-label {
    font-weight: 700;
    color: var(--color-red);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 2px;
    margin-bottom: 0.75rem;
}

.reality {
    background-color: var(--color-green-reality);
    padding: 1.5rem;
    border-radius: var(--border-radius-small);
    margin-bottom: 1.5rem;
    border-left: 5px solid var(--color-green);
}

.reality-label {
    font-weight: 700;
    color: var(--color-green);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 2px;
    margin-bottom: 0.75rem;
}

/* Legal cases - Style j6 */
.case-item {
    background-color: var(--color-white);
    color: var(--color-black);
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-radius: var(--border-radius-box);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.case-item p {
    color: var(--color-black);
}

.case-item h4 {
    color: var(--color-black);
}

.case-item h5 {
    color: var(--color-black);
}

.case-item ul {
    color: var(--color-black);
}

.case-item li {
    color: var(--color-black);
}

.case-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.case-title {
    color: var(--color-black);
    font-size: clamp(18px, 2.5vw, 22px);
    font-weight: 700;
    flex: 1;
}

.case-status {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
}

.status-convicted {
    background-color: #fed7d7;
    color: var(--accent-color);
}

.status-pardoned {
    background-color: #feebc8;
    color: var(--warning-color);
}

.status-dismissed {
    background-color: #e6fffa;
    color: #319795;
}

.status-pending {
    background-color: #e6e6ff;
    color: #5a67d8;
}

.warning-box {
    background-color: #fffaf0;
    border: 2px solid var(--warning-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.warning-box h4 {
    color: var(--warning-color);
    margin-bottom: 1rem;
}

.pardon-recidivism {
    background-color: #fff5f5;
    border: 2px solid var(--accent-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1rem 0;
}

.pardon-recidivism h5 {
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}

/* Sources */
.sources {
    background-color: var(--white);
    color: var(--color-black);
    padding: 2rem;
    border-radius: 8px;
    margin-top: 3rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.sources h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.sources ul {
    color: var(--color-black);
}

.sources li {
    color: var(--color-black);
}

.sources a {
    color: var(--secondary-color);
}

/* Assurer le contraste dans les sections noires */
.content-section-black .sources {
    background-color: var(--color-white);
    color: var(--color-black);
}

.content-section-black .sources h3,
.content-section-black .sources a,
.content-section-black .sources li {
    color: var(--color-black);
}

.sources ul {
    list-style: none;
    padding-left: 0;
}

.sources li {
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
}

.sources li:before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--primary-color);
}

.sources a {
    color: var(--secondary-color);
    text-decoration: none;
}

.sources a:hover {
    text-decoration: underline;
}

/* Footer - Style j6 */
footer {
    background-color: var(--color-black);
    color: var(--color-white);
    text-align: center;
    padding: var(--spacing-hero) 0;
    margin-top: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .main-nav ul {
        flex-direction: column;
        gap: 0.5rem;
    }

    .hero h2 {
        font-size: 1.8rem;
    }

    .lead {
        font-size: 1rem;
    }

    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .stat-number {
        font-size: 2rem;
    }
}

/* Section headers - Style j6 */
.section-header {
    background-color: var(--color-black);
    color: var(--color-white);
    padding: var(--spacing-section) 0;
    margin-bottom: 0;
    text-align: center;
}

.section-header h2 {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.section-header p {
    font-size: clamp(18px, 2.5vw, 24px);
    opacity: 0.9;
    max-width: var(--max-width-narrow);
    margin: 0 auto;
}