/* --- Hero Section --- */
.hero { position: relative; background-color: #020617; padding: 8rem 0; color: #fff; overflow: hidden; }
@media (min-width: 1024px) { .hero { padding: 11rem 0; } }
.hero-bg { position: absolute; inset: 0; opacity: 0.15; pointer-events: none; width: 100%; height: 100%; object-fit: cover; }
.hero-content { position: relative; z-index: 10; text-align: center; }
.section-tag { font-size: 0.75rem; font-weight: 900; color: var(--primary); text-transform: uppercase; letter-spacing: 0.3em; margin-bottom: 1rem; display: block; }
.hero-title { font-size: 2.5rem; font-weight: 900; letter-spacing: -0.025em; max-width: 64rem; margin: 0 auto; line-height: 1; }
@media (min-width: 640px) { .hero-title { font-size: 4.5rem; } }
.hero-title span { color: var(--primary); }
.hero-desc { max-width: 42rem; margin: 1.5rem auto 0; font-size: 1.125rem; color: #cbd5e1; font-weight: 500; }
@media (min-width: 640px) { .hero-desc { font-size: 1.25rem; } }

/* --- Filtres --- */
.filter-bar {
    padding: 3rem 0; background-color: var(--surface); border-bottom: 1px solid var(--border);
    position: sticky; top: 5rem; z-index: 40; backdrop-filter: blur(4px);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.filter-container { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; }
.filter-btn {
    padding: 0.75rem 1.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transition: all 0.2s;
    background-color: var(--surface); color: var(--text-main); border: 1px solid var(--border);
}
.filter-btn:hover { border-color: var(--primary); }
.filter-btn.active { background-color: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }

/* --- Case Study Section --- */
.case-study-sec { padding: 6rem 0; background-color: rgba(248, 250, 252, 0.5); }
html.dark .case-study-sec { background-color: rgba(38, 28, 28, 0.2); }
.case-study-grid { display: grid; gap: 4rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .case-study-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

.case-study-banner { position: relative; overflow: hidden; border-radius: 2.5rem; box-shadow: var(--shadow-premium); }
@media (min-width: 1024px) { .case-study-banner { grid-column: span 7 / span 7; } }
.case-study-img { z-index: 10; width: 100%; height: 500px; object-fit: cover; }
.case-study-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent, transparent); opacity: 0.9; }
.case-study-text-box { position: absolute; bottom: 2rem; left: 2rem; right: 2rem; color: #fff; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.case-study-tag { background-color: var(--primary); padding: 0.25rem 0.75rem; font-size: 10px; text-transform: uppercase; font-weight: 900; letter-spacing: 0.1em; border-radius: 0.375rem; }
.case-study-title { font-size: 1.5rem; font-weight: 900; margin-top: 0.5rem; }
.case-study-metric { text-align: right; }
.case-study-metric-label { display: block; font-size: 0.875rem; font-weight: 700; color: #cbd5e1; }
.case-study-metric-val { font-size: 1.25rem; font-weight: 900; color: var(--primary); }

.case-study-info { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 1024px) { .case-study-info { grid-column: span 5 / span 5; } }
.case-study-h2 { font-size: 1.875rem; font-weight: 900; color: var(--text-main); letter-spacing: -0.025em; }
@media (min-width: 640px) { .case-study-h2 { font-size: 2.25rem; } }
.case-study-p { color: var(--text-main); font-weight: 500; line-height: 1.625; }

.solution-list { display: flex; flex-direction: column; gap: 1rem; padding-top: 0.5rem; }
.solution-item { display: flex; align-items: start; gap: 1rem; }
.solution-icon { color: var(--primary); background-color: #fee2e2; padding: 0.625rem; border-radius: 0.75rem; }
html.dark .solution-icon { background-color: rgba(153, 27, 27, 0.3); }
.solution-item h4 { font-weight: 700; color: var(--text-main); font-size: 1rem; }
.solution-item p { font-size: 0.875rem; color: var(--text-muted); font-weight: 500; }

/* --- Project Grid --- */
.projects-sec { padding: 8rem 0; }
.section-header { text-align: center; max-width: 42rem; margin: 0 auto 5rem; }
.section-title { font-size: 2.25rem; font-weight: 900; color: var(--text-main); letter-spacing: -0.025em; }

.projects-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 768px) { .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .projects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.project-card {
    background-color: var(--surface); border-radius: 1.875rem; overflow: hidden;
    border: 1px solid var(--border); box-shadow: var(--shadow-premium);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
}
.project-card:hover { transform: translateY(-8px); }
.project-img-wrapper { overflow: hidden; height: 16rem; position: relative; }
.project-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.project-card:hover .project-img-wrapper img { transform: scale(1.04); }
.project-loc { position: absolute; top: 1rem; left: 1rem; background-color: rgba(0,0,0,0.7); backdrop-filter: blur(4px); color: #fff; padding: 0.25rem 0.75rem; border-radius: 0.375rem; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; }

.project-body { padding: 2rem; }
.project-h3 { font-size: 1.25rem; font-weight: 900; color: var(--text-main); margin-bottom: 0.5rem; }
.project-p { font-size: 0.875rem; color: var(--text-muted); font-weight: 500; line-height: 1.625; margin-bottom: 1.5rem; }
.project-footer { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; padding-top: 1rem; border-top: 1px solid var(--border); }
.project-cat { color: var(--primary); }
.project-size { color: #94a3b8; }

/* --- Methodology Section --- */
.methodology-sec { padding: 6rem 0; background-color: #0f172a; color: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.methodology-grid { display: grid; gap: 3rem; grid-template-columns: 1fr; position: relative; }
@media (min-width: 768px) { .methodology-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.methodology-card { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 768px) { .methodology-card + .methodology-card { border-left: 1px solid #334155; padding-left: 1.5rem; } }
.step-num { font-size: 2.25rem; font-style: italic; color: var(--primary); font-weight: 900; }
.step-title { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.025em; }
.step-desc { color: #94a3b8; font-size: 0.875rem; font-weight: 500; line-height: 1.625; }

/* --- CTA Section --- */
.cta-sec { padding: 6rem 0; margin-bottom: 5rem; width: 100%; }
.cta-box {
    padding: 2.5rem 1rem; background-color: #000; border-radius: 4rem; text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 2rem;
}
html.dark .cta-box { background-color: var(--surface); }
@media (min-width: 640px) { .cta-box { padding: 6rem; } }
.cta-blur { position: absolute; top: -6rem; right: -6rem; height: 16rem; width: 16rem; background-color: rgba(194, 30, 30, 0.2); border-radius: 9999px; filter: blur(100px); }
.cta-h4 { font-size: 2.5rem; font-weight: 900; color: #fff; letter-spacing: -0.05em; line-height: 1.1; position: relative; z-index: 10; }
@media (min-width: 640px) { .cta-h4 { font-size: 3.75rem; } }
.cta-p { color: #94a3b8; font-size: 1.125rem; max-width: 42rem; margin: 0 auto; font-weight: 500; position: relative; z-index: 10; }
@media (min-width: 640px) { .cta-p { font-size: 1.25rem; } }
.cta-btn-wrapper { padding-top: 1rem; position: relative; z-index: 10; }
.btn-cta-main {
    display: inline-block; background-color: var(--primary); color: #fff; font-weight: 900;
    font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 1.5rem 3rem;
    border-radius: 2rem; text-decoration: none; transition: all 0.5s; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
.btn-cta-main:hover { background-color: #fff; color: #000; }