.histoire-hero {
    position: relative;
    text-align: center;
    padding: 60px 1.5rem 30px;
    background: #0f3d2e;
    color: #fff;
    overflow: hidden;
}

.histoire-hero h1 {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

.histoire-hero p {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.75);
    max-width: 600px;
    margin: 0 auto;
}

.histoire-body {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 1.5rem 80px;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #444;
}

.histoire-body h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-accent);
    margin-top: 3rem;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    border-left: 4px solid var(--color-accent);
}

.histoire-body h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--color-text);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.histoire-body p {
    margin-bottom: 1.2rem;
}

.histoire-body ul, .histoire-body ol {
    margin-bottom: 1.2rem;
    padding-left: 2rem;
}

.histoire-body li {
    margin-bottom: 0.4rem;
}

.histoire-timeline,.histoire-cities{padding:60px 0;}
.histoire-timeline-intro p{text-align:center;font-size:1.15rem;font-family:var(--font-heading);color:var(--color-accent);font-weight:600;margin-bottom:36px;}
.histoire-timeline-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;max-width:1400px;margin:0 auto;padding:0 0.5rem;}
.histoire-milestone{background:#f7fbf8;border-radius:12px;padding:24px 16px;text-align:center;border-left:3px solid var(--color-accent);}
.histoire-year{display:block;font-family:var(--font-heading);font-size:1.4rem;font-weight:700;color:var(--color-accent);margin-bottom:4px;}
.histoire-event{font-size:0.9rem;color:var(--color-text);opacity:0.7;}
.histoire-cities{background:#f7fbf8;}
.histoire-cities-title{font-family:var(--font-heading);font-size:clamp(1.2rem,2vw,1.6rem);font-weight:700;color:var(--color-text);margin-bottom:28px;text-align:center;}
.histoire-cities-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:1400px;margin:0 auto;padding:0 0.5rem;}
.histoire-city{background:#fff;border:1px solid rgba(52,120,61,0.2);border-radius:20px;padding:6px 18px;font-size:0.9rem;color:var(--color-text);font-family:var(--font-heading);transition:background 0.2s,color 0.2s;}
.histoire-city:hover{background:var(--color-accent);color:#fff;}

@media (max-width: 900px) {
    .histoire-hero {
        padding: 40px 1rem 20px;
    }
}

@media (max-width: 600px) {
    .histoire-body {
        padding: 40px 1rem 60px;
    }
}