/* ============================================================
   TECHSOLUX — case.css  (page étude de cas)
   ============================================================ */
.cs-nav-pad{ height:1px; }

/* hero */
.cs-hero{ padding-top:clamp(120px,16vh,200px); padding-bottom:clamp(40px,5vw,72px); position:relative; }
.cs-back{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); display:inline-flex; align-items:center; gap:10px; margin-bottom:clamp(36px,5vw,64px); transition:color .25s; }
.cs-back:hover{ color:var(--ink); }
.cs-back .arr{ color:var(--blue); }
.cs-eyebrow{ display:flex; align-items:center; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.cs-num{ font-family:var(--font-mono); font-size:14px; color:var(--blue); letter-spacing:.1em; }
.cs-title{ font-size:clamp(48px,10vw,150px); font-weight:600; line-height:.9; letter-spacing:-.04em; text-transform:uppercase; }
.cs-tagline{ font-size:clamp(20px,2.4vw,32px); line-height:1.3; color:var(--ink-2); max-width:30ch; margin:clamp(24px,3vw,40px) 0 0; font-weight:400; letter-spacing:-.01em; }
.cs-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:clamp(28px,4vw,44px); }

/* meta bar */
.cs-meta{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); margin-top:clamp(40px,5vw,72px); }
.cs-meta__cell{ padding:22px 24px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.cs-meta__cell .mono{ font-size:10.5px; color:var(--ink-3); letter-spacing:.12em; text-transform:uppercase; display:block; margin-bottom:10px; }
.cs-meta__cell b{ font-size:16px; font-weight:500; line-height:1.3; display:block; }
@media (max-width:760px){ .cs-meta{ grid-template-columns:repeat(2,1fr); } }

/* big media */
.cs-shot{ position:relative; aspect-ratio:16/9; margin-top:clamp(40px,5vw,64px); }
.cs-shot .ph{ position:absolute; inset:0; }
.cs-shot__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* body */
.cs-body{ display:grid; grid-template-columns:0.9fr 1.4fr; gap:clamp(32px,6vw,100px); align-items:start; }
.cs-block{ margin-bottom:clamp(44px,5vw,72px); }
.cs-block:last-child{ margin-bottom:0; }
.cs-block h2{ font-size:clamp(26px,3vw,44px); font-weight:600; letter-spacing:-.02em; text-transform:uppercase; line-height:1; }
.cs-block .idx{ font-family:var(--font-mono); font-size:12px; color:var(--blue); letter-spacing:.1em; display:block; margin-bottom:14px; }
.cs-block p{ font-size:clamp(17px,1.6vw,21px); line-height:1.6; color:var(--ink-2); max-width:60ch; margin:0; }
.cs-side{ position:sticky; top:100px; }
.cs-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.cs-list li{ display:flex; align-items:center; gap:14px; padding:15px 0; border-bottom:1px solid var(--line); font-size:16px; color:var(--ink); }
.cs-list li .mono{ color:var(--blue); font-size:12px; }
.cs-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
@media (max-width:860px){ .cs-body{ grid-template-columns:1fr; } .cs-side{ position:static; } }

/* gallery */
.cs-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,24px); }
.cs-gallery .shot{ position:relative; aspect-ratio:4/3; }
.cs-gallery .shot:first-child{ grid-column:1 / -1; aspect-ratio:16/8; }
.cs-gallery .ph{ position:absolute; inset:0; }
@media (max-width:640px){ .cs-gallery{ grid-template-columns:1fr; } .cs-gallery .shot:first-child{ aspect-ratio:4/3; } }

/* next project */
.cs-next{ border-top:1px solid var(--line); margin-top:clamp(60px,8vw,120px); }
.cs-next a{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:clamp(40px,6vw,80px); transition:.4s var(--ease); flex-wrap:wrap; }
.cs-next a:hover{ padding-inline:12px; }
.cs-next .mono{ font-size:12px; color:var(--ink-3); letter-spacing:.12em; text-transform:uppercase; display:block; margin-bottom:14px; }
.cs-next b{ font-size:clamp(34px,6vw,80px); font-weight:600; letter-spacing:-.03em; text-transform:uppercase; line-height:.9; }
.cs-next a:hover b{ color:var(--blue-2); }
.cs-next .arr{ font-family:var(--font-mono); color:var(--blue); font-size:clamp(28px,4vw,52px); }

/* not found */
.cs-404{ min-height:60vh; display:flex; flex-direction:column; justify-content:center; gap:20px; }