/* ─────────────────────────────────────────────────────────────────
   1824 · Direction C hi-fi · Global design system
   ───────────────────────────────────────────────────────────────── */


:root {
  --paper: #faf7f0;
  --paper-2: #f1ece0;
  --ink: #0e0e10;
  --ink-2: #1c1c20;
  --blue: #2541ff;
  --lime: #d4ff3a;
  --muted: rgba(14, 14, 16, 0.55);
  --line: rgba(14, 14, 16, 0.12);

  --f-display: 'Bricolage Grotesque', 'Neue Machina', system-ui, sans-serif;
  --f-body: 'DM Sans', 'Satoshi', system-ui, sans-serif;

  --max-w: 1440px;
  --pad: 32px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }

/* ──────────────── Typography ──────────────── */
.display-xl, .display-l, .display-m, .display-s, .display-xs {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.88;
  text-transform: uppercase;
  margin: 0;
}
.display-xl { font-size: clamp(64px, 12vw, 172px); }
.display-l  { font-size: clamp(48px, 8vw, 124px); }
.display-m  { font-size: clamp(40px, 5.6vw, 84px); }
.display-s  { font-size: clamp(28px, 3.4vw, 52px); line-height: 0.95; }
.display-xs { font-size: clamp(22px, 2.4vw, 36px); line-height: 1; letter-spacing: -0.02em; }

.italic-soft {
  font-style: italic;
  font-weight: 400;
  font-family: 'Instrument Serif', Georgia, serif;
  text-transform: none;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--ink);
  opacity: 0.4;
}
.eyebrow.no-line::before { display: none; }

p { margin: 0 0 1em; }
.lead { font-size: 18px; line-height: 1.5; }

/* ──────────────── Buttons ──────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 14px 20px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--lime); border-color: var(--ink); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.btn.blue { background: var(--blue); border-color: var(--blue); color: var(--paper); }
.btn.blue:hover { box-shadow: 4px 4px 0 var(--ink); }
.btn.lime { background: var(--lime); border-color: var(--ink); color: var(--ink); }

/* ──────────────── Container ──────────────── */
.wrap { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: clamp(64px, 8vw, 120px) 0; position: relative; }
.section.tight { padding: clamp(40px, 5vw, 80px) 0; }

/* ──────────────── Nav ──────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
  padding: 14px var(--pad);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.nav .logo {
  font-weight: 800; font-size: 19px;
  display: flex; align-items: center; gap: 7px;
}
.nav .logo img {
  height: 26px; width: auto; display: block;
}
.nav .logo .dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--blue); display: inline-block;
  animation: pulse 2.4s ease-in-out infinite;
}
.nav .links { display: flex; gap: 6px; }
.nav .links a {
  padding: 8px 14px;
  border: 2px solid var(--ink);
  transition: background .18s, transform .18s;
}
.nav .links a:hover { background: var(--lime); }
.nav .links a.active { background: var(--ink); color: var(--paper); }
.nav .right { display: flex; align-items: center; gap: 12px; }
.nav .right .lang { color: var(--muted); font-size: 11px; }
.nav .right .lang b { color: var(--ink); }
.nav .right .cta {
  background: var(--ink); color: var(--paper);
  padding: 8px 14px; display: inline-flex; align-items: center; gap: 6px;
  transition: background .18s, transform .18s;
}
.nav .right .cta:hover { background: var(--blue); transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); }

@media (max-width: 900px) {
  .nav .links { display: none; }
}

/* ──────────────── Marquee ──────────────── */
.marquee {
  background: var(--ink);
  color: var(--paper);
  padding: 16px 0;
  overflow: hidden;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.marquee .track {
  display: inline-flex;
  gap: 36px;
  white-space: nowrap;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 30px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  animation: marquee 38s linear infinite;
  padding-right: 36px;
}
.marquee .track span:nth-child(odd) { color: var(--lime); }
.marquee:hover .track { animation-play-state: paused; }
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ──────────────── Stickers ──────────────── */
.sticker {
  display: inline-flex; align-items: center; justify-content: center;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
  border: 2px solid var(--ink);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
  padding: 10px;
  text-align: center;
  position: absolute;
  z-index: 3;
  transition: transform .35s cubic-bezier(.2,.7,.3,1.4);
}
.sticker.blue { background: var(--blue); color: var(--paper); }
.sticker.paper { background: var(--paper); }
.sticker:hover { transform: rotate(0deg) scale(1.06) !important; }

/* ──────────────── Pill tag ──────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 7px 12px;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
}
.pill.solid { background: var(--ink); color: var(--paper); }
.pill.blue { background: var(--blue); color: var(--paper); border-color: var(--blue); }
.pill.lime { background: var(--lime); color: var(--ink); }

/* ──────────────── Footer ──────────────── */
.footer {
  background: var(--ink);
  color: var(--paper);
  padding: 80px var(--pad) 32px;
  font-family: var(--f-body);
  position: relative;
}
.footer .foot-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 60px; margin-bottom: 24px;
}
.footer h4 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
  margin: 0 0 16px;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { font-size: 14px; line-height: 2; }
.footer ul li a:hover { color: var(--lime); }
.footer .big img {
  height: 44px; width: auto; display: block;
}
.footer .big {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(72px, 9vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin: 0 0 24px;
}
.footer .big .italic-soft { color: var(--lime); }
.footer .bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  font-size: 12px; color: rgba(255,255,255,0.5);
}

/* ──────────────── Animations ──────────────── */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.7); }
}
@keyframes spin-slow { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.spin-slow { animation: spin-slow 14s linear infinite; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: 80ms; }
.reveal.delay-2 { transition-delay: 160ms; }
.reveal.delay-3 { transition-delay: 240ms; }

/* Image placeholder fallback (when no real image yet) */
.ph {
  position: relative;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ph::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 30%, rgba(37, 65, 255, 0.18), transparent 45%),
    radial-gradient(circle at 80% 75%, rgba(212, 255, 58, 0.45), transparent 50%),
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(14,14,16,0.04) 12px 13px);
}
.ph .label {
  position: relative; z-index: 2;
  font-family: var(--f-display); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--paper); color: var(--ink);
  padding: 5px 10px; border: 2px solid var(--ink);
}
.ph.blue::before { background: radial-gradient(circle at 30% 40%, rgba(212, 255, 58, 0.6), transparent 50%), var(--blue); }
.ph.lime::before { background: var(--lime); }
.ph.ink { background: var(--ink); }
.ph.ink::before { background: radial-gradient(circle at 50% 50%, rgba(37,65,255,0.6), transparent 60%); }
.ph.ink .label { background: var(--ink); color: var(--paper); }

/* Real-image media (replaces .ph when a photo is available) */
.media {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--paper-2);
}
.media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
a:hover .media img,
.media:hover img { transform: scale(1.03); }
.media .badge {
  position: absolute;
  bottom: 12px; left: 12px;
  font-family: var(--f-display); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--paper); color: var(--ink);
  padding: 5px 10px; border: 2px solid var(--ink);
  z-index: 2;
}
.media .badge.blue { background: var(--blue); color: var(--paper); border-color: var(--blue); }
.media .badge.lime { background: var(--lime); color: var(--ink); }

/* ─────────── Case vignette template ───────────
   Used on home page, archive, and anywhere a case is teased.
   Consistent layout: image fills, year-tag top-right, brand+stat overlay
   bottom-left on dark gradient. Hover lift + zoom. */
.case-thumb {
  position: relative;
  display: block;
  border: 2px solid var(--ink);
  overflow: hidden;
  background: var(--ink);
  transition: transform .35s cubic-bezier(.2,.7,.3,1.4), box-shadow .25s ease;
  text-decoration: none;
  color: var(--paper);
}
.case-thumb:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--ink);
}
.case-thumb img,
.case-thumb video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.case-thumb:hover img,
.case-thumb:hover video { transform: scale(1.04); }

/* Brand color overlay — unifies very different source photos by
   wrapping them in a soft, consistent tint. Defaults to blue;
   use .tint-lime / .tint-ink / .tint-paper to vary. */
.case-thumb::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--blue);
  mix-blend-mode: multiply;
  opacity: 0.32;
  z-index: 1;
  pointer-events: none;
  transition: opacity .35s ease;
}
.case-thumb:hover::before { opacity: 0.18; }
.case-thumb.tint-lime::before { background: var(--lime); mix-blend-mode: multiply; opacity: 0.42; }
.case-thumb.tint-lime:hover::before { opacity: 0.24; }
.case-thumb.tint-ink::before { background: var(--ink); mix-blend-mode: multiply; opacity: 0.32; }
.case-thumb.tint-ink:hover::before { opacity: 0.20; }
.case-thumb.tint-paper::before { background: var(--paper); mix-blend-mode: screen; opacity: 0.18; }
.case-thumb.tint-none::before { display: none; }

/* Bottom legibility gradient (sits ABOVE the brand tint) */
.case-thumb::after {
  content: '';
  position: absolute; inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(14,14,16,0.78) 0%, rgba(14,14,16,0.4) 45%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* Logo-style placeholder — used when the source image format doesn't
   match the vignette aspect ratio. Brand-colored panel with the
   client/campaign name set big and centered. */
.case-thumb.thumb-logo {
  background: var(--blue);
  display: flex; align-items: center; justify-content: center;
}
.case-thumb.thumb-logo::before { display: none; }
.case-thumb.thumb-logo.bg-lime { background: var(--lime); }
.case-thumb.thumb-logo.bg-ink { background: var(--ink); }
.case-thumb.thumb-logo.bg-paper { background: var(--paper-2); }
.case-thumb.thumb-logo.bg-blue { background: var(--blue); }
.case-thumb .logo-mark {
  position: relative;
  z-index: 1;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(36px, 4.4vw, 72px);
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--paper);
  text-align: center;
  padding: 32px 28px;
  max-width: 92%;
  text-wrap: balance;
}
.case-thumb.thumb-logo.bg-lime .logo-mark,
.case-thumb.thumb-logo.bg-paper .logo-mark { color: var(--ink); }
.case-thumb .logo-mark em {
  display: block;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: 0.34em;
  text-transform: none;
  letter-spacing: 0.02em;
  opacity: 0.72;
  margin-top: 14px;
}
.case-thumb .logo-mark .star {
  display: block;
  font-size: 0.5em;
  margin: 0 auto 12px;
  opacity: 0.5;
  font-weight: 500;
}

/* Logo placeholder body: hide the name, keep stat in corner */
.case-thumb.thumb-logo .thumb-body {
  justify-content: flex-end;
}
.case-thumb.thumb-logo .thumb-body > div:first-child { display: none; }
.case-thumb.thumb-logo::after {
  height: 35%;
  opacity: 0.5;
}

.case-thumb .thumb-tags {
  position: absolute;
  top: 14px; right: 14px;
  display: flex; gap: 6px; flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 60%;
  z-index: 3;
}
.case-thumb .thumb-tag {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--paper);
  color: var(--ink);
  padding: 5px 9px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  white-space: nowrap;
}
.case-thumb .thumb-tag.lime { background: var(--lime); }
.case-thumb .thumb-tag.blue { background: var(--blue); color: var(--paper); border-color: var(--blue); }
.case-thumb .thumb-tag.ink { background: var(--ink); color: var(--paper); }
.case-thumb .thumb-body {
  position: absolute;
  left: 18px; right: 18px; bottom: 16px;
  z-index: 3;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px;
  color: var(--paper);
}
.case-thumb .thumb-name {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: none;
  text-wrap: balance;
}
.case-thumb .thumb-sub {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 500;
  opacity: 0.82;
  margin-top: 6px;
  letter-spacing: 0.01em;
}
.case-thumb .thumb-stat {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--lime);
  color: var(--ink);
  padding: 6px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.case-thumb .thumb-stat.blue { background: var(--blue); color: var(--paper); border-color: var(--blue); }
.case-thumb .thumb-stat.paper { background: var(--paper); color: var(--ink); }
@media (max-width: 600px) {
  .case-thumb .thumb-body { flex-direction: column; align-items: flex-start; }
}

/* Cursor (custom on hover-able blocks) */
.cursor-view { cursor: none; }

/* Tilt utilities */
.t-1 { transform: rotate(-1deg); }
.t-2 { transform: rotate(1deg); }
.t-3 { transform: rotate(-1.5deg); }
.t-4 { transform: rotate(0.8deg); }
.t-5 { transform: rotate(-0.6deg); }
.t-6 { transform: rotate(1.4deg); }

/* ──────────────── Utilities ──────────────── */
.hi-blue { background: var(--blue); color: var(--paper); padding: 0 8px; display: inline-block; }
.hi-lime { background: var(--lime); padding: 0 8px; display: inline-block; }
.hi-paper { background: var(--paper); padding: 0 8px; display: inline-block; }
.text-muted { color: var(--muted); }

/* Section divider */
.divider {
  height: 2px; background: var(--ink); width: 100%;
}

/* Burger menu */
.nav .burger{display:none;width:44px;height:44px;border:2px solid var(--ink);background:var(--paper);flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;padding:0}
.nav .burger span{display:block;width:20px;height:2px;background:var(--ink);transition:transform .2s}
@media (max-width: 900px){.nav .burger{display:inline-flex}.nav.open .links{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:8px;background:var(--paper);padding:16px var(--pad) 24px;border-bottom:2px solid var(--ink)}.nav.open .links a{font-size:18px;padding:14px 16px}.nav.open .burger span:first-child{transform:translateY(4px) rotate(45deg)}.nav.open .burger span:last-child{transform:translateY(-4px) rotate(-45deg)}}
.footer .bottom a:hover{color:var(--lime)}
/* Mobile legibility */
@media (max-width: 600px){.pill,.media .badge{font-size:12px}.case-thumb .thumb-sub{font-size:13px}}

/* Horizontal case slider */
.hslider{position:relative}
.hs-track{--hs-w:clamp(260px,27vw,400px);display:flex;gap:24px;overflow-x:auto;overflow-y:visible;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab;margin-right:calc((100vw - 100%) / -2);padding:12px calc((100vw - 100%) / 2) 24px 4px;margin-left:-4px;scroll-padding-left:4px;user-select:none;-webkit-user-select:none}
.hs-track::-webkit-scrollbar{display:none}
.hs-track>*{flex:0 0 var(--hs-w);scroll-snap-align:start}
.hs-track.is-dragging{cursor:grabbing;scroll-snap-type:none}
.hs-track.is-dragging>*{pointer-events:none}
.hs-ui{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px;margin-top:20px}
.hs-count{font-family:var(--f-display);font-weight:700;font-size:15px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.hs-count .hs-tot{opacity:.5}
.hs-bar{height:3px;background:color-mix(in oklab,currentColor 15%,transparent);overflow:hidden;border-radius:2px}
.hs-bar span{display:block;height:100%;background:currentColor;transform-origin:left;transition:transform .25s ease-out}
.hs-arrows{display:flex;gap:10px}
.hs-arrows button{width:52px;height:52px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);color:var(--ink);font-size:20px;font-weight:700;cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s,transform .2s,opacity .2s}
.hs-arrows button:hover:not(:disabled){background:var(--lime);transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--ink)}
.hs-arrows button:disabled{opacity:.3;cursor:default}
@media (max-width:700px){.hs-track{--hs-w:78vw;gap:14px}.hs-arrows{display:none}.hs-ui{grid-template-columns:auto minmax(0,1fr)}}
.hs-track .case-thumb .thumb-body{flex-direction:column;align-items:flex-start;gap:10px}
.hs-track .case-thumb .thumb-stat{white-space:normal;max-width:100%}

/* Mobile : empêcher les grilles de s'élargir au-delà de l'écran */
@media (max-width: 900px) {
  [class*="grid"] > *, .case-row > * { min-width: 0; }
  img, video { max-width: 100%; }
}
@media (max-width: 700px) {
  .case-cover-embed .media { min-height: 0 !important; }
  .clip-stats { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  .display-xl { font-size: clamp(44px, 13vw, 64px); }
  .display-l  { font-size: clamp(36px, 11vw, 48px); }
  .cta-block .display-xl { font-size: clamp(52px, 15vw, 96px); }
  .hi-lime, .hi-blue { max-width: 100%; }
}
@media (max-width: 700px) {
  .slider-track .media { max-width: 85vw; }
  .case-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .approach-head { flex-wrap: wrap; gap: 8px; }
}
.nowrap-end { white-space: nowrap; }
.nowrap-end > span { white-space: normal; }
.nowrap { white-space: nowrap; }