/* ─── Atelier MDG — Étude de cas (page projet) ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --white:#ffffff;--black:#0e0e0e;--gray-100:#f5f5f4;--gray-200:#e8e7e4;--gray-300:#d0ceca;
  --gray-500:#8a8580;--gray-600:#6a655e;--gray-700:#3a3935;
  --border:rgba(14,14,14,.1);--border-strong:rgba(14,14,14,.18);--radius:14px;
  --font-head:'Syne',sans-serif;--font-body:'Inter',sans-serif;--font-serif:'DM Serif Display',serif;
  --transition:.35s cubic-bezier(.4,0,.2,1);
  --accent:#0f6e57;--accent-bright:#3DBFA3;--accent-soft:rgba(15,110,87,.07);
}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{background:var(--white);color:var(--black);font-family:var(--font-body);font-size:16px;line-height:1.6}
a{color:var(--accent)}

.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);height:60px;display:flex;align-items:center}
.nav-inner{width:100%;max-width:1140px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.nav-logo img{height:26px;width:auto;display:block}
.nav-logo-name{font-family:var(--font-head);font-weight:800;font-size:1rem;letter-spacing:-.01em;color:var(--black)}
.nav-back{font-size:.78rem;font-weight:500;color:var(--gray-500);text-decoration:none;display:flex;align-items:center;gap:6px;transition:color var(--transition)}
.nav-back:hover{color:var(--black)}
.nav-back svg{transition:transform var(--transition)}
.nav-back:hover svg{transform:translateX(-3px)}

.cs-wrap{max-width:1140px;margin:0 auto;padding:56px 32px 0}
.cs-cat{display:inline-flex;align-items:center;gap:.5em;font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-700);background:var(--gray-100);padding:6px 12px;border-radius:100px}
.cs-cat::before{content:'';display:block;width:6px;height:6px;border-radius:50%;background:var(--accent-bright)}
.cs-title{font-family:var(--font-head);font-weight:800;font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.03em;line-height:1.02;margin:1rem 0 1.2rem}
.cs-desc{font-size:1.02rem;color:var(--gray-700);max-width:62ch;line-height:1.7;margin-bottom:2.2rem}

.cs-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:3rem}
.cs-meta-item{background:var(--white);padding:18px 20px;display:flex;flex-direction:column;gap:5px}
.cs-meta-label{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-500)}
.cs-meta-val{font-family:var(--font-head);font-weight:700;font-size:.92rem;color:var(--black)}

.cs-hero{width:100%;border-radius:var(--radius);overflow:hidden;background:var(--gray-100);margin-bottom:1px;border:1px solid var(--border)}
.cs-hero img{width:100%;height:auto;display:block}

.cs-slides{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius) var(--radius);overflow:hidden;margin-bottom:4rem}
.cs-slide{background:var(--white)}
.cs-slide img{width:100%;height:auto;display:block}

.cs-cta{max-width:1140px;margin:0 auto;padding:0 32px 5rem;text-align:center}
.cs-cta-title{font-family:var(--font-head);font-weight:800;font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.02em;margin-bottom:1rem}
.cs-cta-link{display:inline-flex;align-items:center;gap:8px;background:var(--black);color:#fff;font-family:var(--font-head);font-size:.85rem;font-weight:700;letter-spacing:.02em;padding:14px 28px;border-radius:100px;text-decoration:none;transition:background var(--transition),transform .2s}
.cs-cta-link:hover{background:var(--gray-700);transform:translateY(-2px)}

.cs-footer{border-top:1px solid var(--border);padding:24px 32px;display:flex;justify-content:center}
.cs-footer a{font-size:.78rem;color:var(--gray-500);text-decoration:none}
.cs-footer a:hover{color:var(--black)}

@media(max-width:640px){
  .cs-wrap{padding:40px 20px 0}
  .cs-cta{padding:0 20px 3.5rem}
}