/* =========================================================================
   VLADIMIR ANTAKI — STYLES GLOBAUX
   Version : 1.0
   ========================================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: hidden; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  background: #ffffff;
  color: #000000;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.6; transition: opacity 0.15s; }

input { font-family: inherit; }

/* --- Site container --- */

.va-site, .va-serie, .va-parenthese {
  background: #fff;
  color: #000;
  min-height: 100vh;
}

/* --- Header --- */

.va-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #000;
}
.va-header-logo { font-size: 13px; font-weight: 500; }
.va-header-logo .breadcrumb { color: #888; margin-left: 8px; }
.va-header-langs { display: flex; gap: 24px; font-size: 13px; }
.va-header-langs .active { text-decoration: underline; text-underline-offset: 3px; }
.va-header-langs .inactive { color: #888; }

/* Header rouge pour Parenthèse */
.va-parenthese .va-header { background: #FF3B00; color: #fff; }
.va-parenthese .va-header-logo a { color: #fff; }
.va-parenthese .va-header-logo .breadcrumb { color: rgba(255,255,255,0.7); }
.va-parenthese .va-header-langs .inactive { color: rgba(255,255,255,0.7); }
.va-parenthese .va-header-langs a { color: #fff; }

/* --- Search bar --- */

.va-search { padding: 48px 24px 24px; border-bottom: 1px solid #000; }
.va-search-row { display: flex; align-items: center; gap: 16px; }
.va-search-arrow { font-size: 32px; color: #FF3B00; }
.va-search-input {
  flex: 1; border: none; outline: none;
  font-size: 36px; font-weight: 500;
  letter-spacing: -0.03em; background: transparent;
  padding: 0; color: #000;
}
.va-search-tags { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.va-tag { font-size: 11px; padding: 4px 10px; border: 1px solid #000; letter-spacing: 0.02em; }

/* --- Name (homepage) --- */

.va-name { padding: 24px 24px 8px; line-height: 0.86; letter-spacing: -0.05em; font-weight: 500; }
.va-name-line { font-size: clamp(48px, 11vw, 120px); }

/* --- Bio (homepage) --- */

.va-bio {
  padding: 0 24px 32px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  border-bottom: 1px solid #000;
}
.va-bio-col { font-size: 13px; line-height: 1.4; }
.va-bio-col-right { text-align: right; }
.va-bio-red { color: #FF3B00; font-weight: 500; }

/* --- Index rows --- */

.va-index-row {
  display: grid; grid-template-columns: 80px 1fr 100px;
  padding: 14px 24px; border-bottom: 1px solid #000;
  align-items: baseline;
}
.va-index-num { font-size: 11px; color: #888; }
.va-index-title { font-size: clamp(20px, 3.5vw, 32px); font-weight: 500; letter-spacing: -0.02em; }
.va-index-date { font-size: 11px; color: #888; text-align: right; }
.va-index-row.va-active { background: #FF3B00; color: #fff; }
.va-index-row.va-active .va-index-num,
.va-index-row.va-active .va-index-date { color: rgba(255,255,255,0.8); }

/* --- Footer nav --- */

.va-footer-nav { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; border-bottom: 1px solid #000; }
.va-footer-nav > a > div, .va-footer-nav > div {
  padding: 14px 24px;
  border-right: 1px solid #000;
  font-size: 11px; letter-spacing: 0.04em;
}
.va-footer-nav > a:last-child > div, .va-footer-nav > div:last-child { border-right: none; }

.va-footer-meta {
  padding: 14px 24px;
  display: flex; justify-content: space-between;
  font-size: 10px; color: #888; letter-spacing: 0.04em;
}

/* --- Series page --- */

.va-meta {
  display: grid; grid-template-columns: 100px 1fr 120px;
  padding: 14px 24px; border-bottom: 1px solid #000;
  align-items: baseline;
}
.va-meta-num { font-size: 11px; color: #888; }
.va-meta-status { font-size: 11px; letter-spacing: 0.04em; }
.va-meta-date { font-size: 11px; color: #888; text-align: right; }

.va-parenthese .va-meta { background: #FF3B00; color: #fff; }
.va-parenthese .va-meta-num,
.va-parenthese .va-meta-date { color: rgba(255,255,255,0.8); }

.va-title {
  padding: 32px 24px 16px;
  line-height: 0.86; letter-spacing: -0.05em; font-weight: 500;
}
.va-title-line { font-size: clamp(56px, 12vw, 128px); }

.va-parenthese .va-title {
  background: #FF3B00; color: #fff;
  border-bottom: 1px solid #000;
  padding: 48px 24px 24px;
}
.va-parenthese .va-title-line { font-size: clamp(64px, 14vw, 144px); }

.va-intro {
  padding: 0 24px 32px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  border-bottom: 1px solid #000;
}
.va-intro-col { font-size: 13px; line-height: 1.5; }

/* --- Photos placeholders --- */

.va-photos-2 { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #000; }
.va-photos-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid #000; }
.va-photo { position: relative; }
.va-photo-2-1 { aspect-ratio: 4/5; border-right: 1px solid #000; background: linear-gradient(135deg, #2b2520 0%, #4a3f35 50%, #1a1612 100%); }
.va-photo-2-2 { aspect-ratio: 4/5; background: linear-gradient(135deg, #5a4a3a 0%, #8a7560 50%, #3a2a20 100%); }
.va-photo-wide { aspect-ratio: 16/9; border-bottom: 1px solid #000; background: linear-gradient(135deg, #3a3530 0%, #6a5d50 40%, #2a2520 100%); }
.va-photo-3-1 { aspect-ratio: 1/1; border-right: 1px solid #000; background: linear-gradient(135deg, #4a3a30 0%, #7a6555 60%, #2a1f15 100%); }
.va-photo-3-2 { aspect-ratio: 1/1; border-right: 1px solid #000; background: linear-gradient(135deg, #353028 0%, #5a4a3c 50%, #1a1510 100%); }
.va-photo-3-3 { aspect-ratio: 1/1; background: linear-gradient(135deg, #2f2820 0%, #5d4d3d 50%, #1a1208 100%); }
.va-photo-installation {
  aspect-ratio: 21/9; border-bottom: 1px solid #000;
  background: linear-gradient(180deg, #6a6055 0%, #3a342c 100%);
  position: relative;
}

.va-photo-caption {
  position: absolute; bottom: 8px; left: 12px;
  font-size: 10px; color: rgba(255,255,255,0.7); letter-spacing: 0.04em;
}
.va-photo-caption-small {
  position: absolute; bottom: 6px; left: 8px;
  font-size: 9px; color: rgba(255,255,255,0.7);
}
.va-photo-installation .va-photo-caption {
  bottom: 12px; left: 16px;
  font-size: 11px; color: rgba(255,255,255,0.8);
}

/* --- Section bar --- */

.va-section-bar {
  padding: 14px 24px; border-bottom: 1px solid #000;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; letter-spacing: 0.04em;
}
.va-section-bar-action { color: #FF3B00; }

/* --- Quote --- */

.va-quote { padding: 24px; border-bottom: 1px solid #000; }
.va-quote-text { font-size: 13px; line-height: 1.6; max-width: 520px; font-style: italic; }
.va-quote-author { font-size: 11px; color: #888; margin-top: 12px; letter-spacing: 0.04em; }

/* --- Prints --- */

.va-prints { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #000; }
.va-prints-col { padding: 24px; }
.va-prints-col-left { border-right: 1px solid #000; }
.va-prints-label { font-size: 11px; color: #FF3B00; letter-spacing: 0.04em; margin-bottom: 12px; }
.va-prints-grid {
  display: grid; grid-template-columns: 1fr auto;
  gap: 4px 16px; font-size: 13px; line-height: 1.6;
}
.va-prints-grid .right { text-align: right; }
.va-prints-grid .muted { color: #888; }
.va-prints-grid .bold { font-weight: 500; }
.va-prints-divider { grid-column: 1 / -1; height: 1px; background: #000; margin: 6px 0; }
.va-prints-text { font-size: 13px; line-height: 1.6; }

/* --- Pager --- */

.va-pager { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid #000; }
.va-pager > a { padding: 14px 24px; border-right: 1px solid #000; font-size: 11px; letter-spacing: 0.04em; }
.va-pager > a:last-child { border-right: none; }

/* --- Parenthèse-specific --- */

.va-intro-lead {
  font-size: clamp(18px, 2.5vw, 24px);
  line-height: 1.4; letter-spacing: -0.02em;
  max-width: 720px; margin-bottom: 32px;
}
.va-intro-body {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 32px; max-width: 920px;
}
.va-intro-body .va-intro-col { font-size: 14px; line-height: 1.6; }

.va-pillars { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid #000; }
.va-pillar { padding: 24px; border-right: 1px solid #000; }
.va-pillar:last-child { border-right: none; }
.va-pillar-label { font-size: 11px; color: #FF3B00; letter-spacing: 0.04em; margin-bottom: 12px; }
.va-pillar-title { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 8px; }
.va-pillar-text { font-size: 13px; line-height: 1.5; color: #444; }

.va-context { padding: 32px 24px; border-bottom: 1px solid #000; }
.va-context-quote {
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.4; letter-spacing: -0.02em;
  font-style: italic; max-width: 720px;
}
.va-context-attr { font-size: 11px; color: #888; margin-top: 16px; letter-spacing: 0.04em; }

.va-status { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #000; }
.va-status-col { padding: 24px; }
.va-status-col-left { border-right: 1px solid #000; }
.va-status-label { font-size: 11px; color: #FF3B00; letter-spacing: 0.04em; margin-bottom: 12px; }
.va-status-text { font-size: 13px; line-height: 1.6; }
.va-status-text a { color: #FF3B00; }

/* Mobile-specific */

.va-parenthese .va-intro {
  padding: 32px 24px;
  display: block;
  border-bottom: 1px solid #000;
}

@media (max-width: 600px) {
  .va-bio, .va-intro, .va-prints, .va-status, .va-intro-body {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .va-bio-col-right { text-align: left; }
  .va-prints-col-left,
  .va-status-col-left { border-right: none; border-bottom: 1px solid #000; }
  .va-photos-3 { grid-template-columns: 1fr; }
  .va-photo-3-1, .va-photo-3-2 { border-right: none; border-bottom: 1px solid #000; }
  .va-pillars { grid-template-columns: 1fr; }
  .va-pillar { border-right: none; border-bottom: 1px solid #000; }
  .va-pillar:last-child { border-bottom: none; }
  .va-index-row { grid-template-columns: 50px 1fr 80px; padding: 12px 16px; }
  .va-meta { grid-template-columns: 60px 1fr 80px; padding: 12px 16px; }
  .va-search { padding: 32px 16px 20px; }
  .va-search-input { font-size: 22px; }
  .va-name { padding: 20px 16px 8px; }
  .va-bio { padding: 0 16px 24px; }
  .va-title { padding: 24px 16px 12px; }
  .va-parenthese .va-title { padding: 32px 16px 16px; }
  .va-intro { padding: 0 16px 24px; }
  .va-parenthese .va-intro { padding: 24px 16px; }
  .va-context { padding: 24px 16px; }
  .va-quote { padding: 20px 16px; }
  .va-prints-col, .va-status-col { padding: 20px 16px; }
  .va-pillar { padding: 20px 16px; }
  .va-section-bar { padding: 12px 16px; }
  .va-pager > a { padding: 12px 16px; }
  .va-footer-nav { grid-template-columns: 1fr 1fr; }
  .va-footer-nav > a > div, .va-footer-nav > div { padding: 12px 16px; }
  .va-footer-meta { padding: 12px 16px; }
  .va-header { padding: 12px 16px; }
}