/* ============================================
   PRODSQUARE BRAND CSS — V3 · 2026
   Conforme au Brand Book officiel
   Thème par défaut : Ink Blue
   ============================================ */

:root {
  /* Couleurs principales */
  --ps-ink: #0E0E46;
  --ps-red: #FF0F00;
  --ps-paper: #FAFAF7;

  /* Échelle Ink (nuances) */
  --ps-ink-deep: #07072E;
  --ps-ink-100: #0E0E46;
  --ps-ink-90:  #1A1A5C;
  --ps-ink-80:  #3D3D6B;
  --ps-ink-60:  #6E6E91;
  --ps-ink-40:  #9F9FB7;
  --ps-ink-20:  #CFCFDB;
  --ps-ink-08:  #ECECF1;

  /* Surfaces sur fond Ink */
  --ps-surface-1: rgba(250, 250, 247, 0.04);
  --ps-surface-2: rgba(250, 250, 247, 0.07);
  --ps-surface-3: rgba(250, 250, 247, 0.12);

  /* Accent Red */
  --ps-red-100: #FF0F00;
  --ps-red-dim: #B30A00;
  --ps-red-soft: #FF8580;

  /* Sémantique (mode Ink par défaut) */
  --ps-bg: var(--ps-ink);
  --ps-text: var(--ps-paper);
  --ps-text-soft: rgba(250, 250, 247, 0.78);
  --ps-text-muted: rgba(250, 250, 247, 0.55);
  --ps-text-faint: rgba(250, 250, 247, 0.35);
  --ps-border: rgba(250, 250, 247, 0.14);
  --ps-border-strong: rgba(250, 250, 247, 0.32);

  /* Typo */
  --ps-font-sans: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ps-font-mono: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;

  /* Échelle typo (brand book divisée pour le web) */
  --ps-text-display: clamp(64px, 9vw, 112px);
  --ps-text-hero: clamp(48px, 6.5vw, 80px);
  --ps-text-h1: clamp(36px, 4.5vw, 56px);
  --ps-text-h3: clamp(24px, 2.4vw, 32px);
  --ps-text-body: 17px;
  --ps-text-small: 14px;
  --ps-text-mono: 13px;

  /* Espacements et rayons */
  --ps-radius-none: 0;
  --ps-radius-sm: 4px;
  --ps-radius-md: 8px;
  --ps-radius-lg: 16px;
  --ps-container: 1240px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--ps-font-sans);
  background: var(--ps-bg);
  color: var(--ps-text);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-size: var(--ps-text-body);
  min-height: 100vh;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 500; color: var(--ps-paper); }

/* Layout */
.ps-container { max-width: var(--ps-container); margin: 0 auto; padding: 0 32px; }

/* ============================================
   HEADER (puce rouge à gauche, mono à droite)
   ============================================ */
.ps-header {
  position: sticky;
  top: 0;
  background: rgba(14, 14, 70, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 50;
  border-bottom: 1px solid var(--ps-border);
}
.ps-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
}

/* Logo wordmark Prodsquare avec X rouge en exposant */
.ps-logo {
  font-family: var(--ps-font-sans);
  font-size: 22px;
  font-weight: 400;
  color: var(--ps-paper);
  letter-spacing: -0.5px;
  display: inline-flex;
  align-items: flex-start;
  line-height: 1;
}
.ps-logo .prod { font-weight: 700; }
.ps-logo .square { font-weight: 400; }
.ps-logo .x {
  color: var(--ps-red);
  font-size: 0.55em;
  font-weight: 500;
  margin-top: 0.05em;
  margin-left: 1px;
  line-height: 1;
}

.ps-nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
  font-family: var(--ps-font-mono);
  font-size: var(--ps-text-mono);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ps-text-muted);
}
.ps-nav-links > a, .ps-nav-links > .ps-nav-item > a { transition: color 0.15s ease; cursor: pointer; }
.ps-nav-links > a:hover, .ps-nav-links > a.active { color: var(--ps-paper); }
.ps-nav-links .ps-nav-item:hover > a, .ps-nav-links .ps-nav-item.active > a { color: var(--ps-paper); }

/* Dropdown nav */
.ps-nav-item { position: relative; }
.ps-nav-item > a { display: inline-flex; align-items: center; gap: 6px; }
.ps-nav-item > a::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 2px;
  transition: transform 0.2s ease;
  opacity: 0.6;
}
.ps-nav-item:hover > a::after { transform: rotate(180deg); }
.ps-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: -16px;
  background: var(--ps-ink);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-md);
  padding: 12px;
  min-width: 240px;
  display: none;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  z-index: 100;
}
.ps-nav-item:hover .ps-dropdown { display: flex; }
.ps-nav-item::after {
  /* invisible bridge so dropdown stays open while moving cursor */
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}
.ps-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--ps-radius-sm);
  color: var(--ps-text-soft);
  font-family: var(--ps-font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.ps-dropdown a:hover, .ps-dropdown a.active {
  background: var(--ps-surface-2);
  color: var(--ps-paper);
}
.ps-dropdown a .ps-dropdown-num {
  font-size: 10px;
  color: var(--ps-red);
  letter-spacing: 1.5px;
  min-width: 18px;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
.ps-display { font-family: var(--ps-font-sans); font-weight: 700; line-height: 0.98; letter-spacing: -2px; font-size: var(--ps-text-display); color: var(--ps-paper); }
.ps-hero    { font-family: var(--ps-font-sans); font-weight: 700; line-height: 1.0;  letter-spacing: -1.5px; font-size: var(--ps-text-hero); color: var(--ps-paper); }
.ps-h1      { font-family: var(--ps-font-sans); font-weight: 500; line-height: 1.05; letter-spacing: -1px; font-size: var(--ps-text-h1); color: var(--ps-paper); }
.ps-h3      { font-family: var(--ps-font-sans); font-weight: 500; line-height: 1.15; letter-spacing: -0.4px; font-size: var(--ps-text-h3); color: var(--ps-paper); }

/* Dot rouge en fin de phrase — signature brand */
.ps-dot { color: var(--ps-red); font-weight: 700; }
.ps-dot::before { content: "."; }

/* Eyebrow / chapter label en mono avec puce rouge */
.ps-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ps-font-mono);
  font-size: var(--ps-text-mono);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ps-text-soft);
  font-weight: 400;
}
.ps-eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--ps-red);
  border-radius: 50%;
}

/* Page number / chapter footer */
.ps-page-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--ps-font-mono);
  font-size: var(--ps-text-mono);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ps-text-muted);
  padding-bottom: 40px;
}

/* Body text */
p { color: var(--ps-text-soft); line-height: 1.55; font-size: var(--ps-text-body); }
.ps-lead { font-size: 20px; line-height: 1.5; color: var(--ps-text-soft); }

/* ============================================
   BUTTONS — pill rouge ou ghost
   ============================================ */
.ps-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 100px;
  font-family: var(--ps-font-sans);
  font-size: 15px;
  font-weight: 500;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  letter-spacing: -0.2px;
  white-space: nowrap;
}
.ps-btn-primary {
  background: var(--ps-red);
  color: var(--ps-paper);
}
.ps-btn-primary:hover { background: var(--ps-red-dim); }

.ps-btn-paper {
  background: var(--ps-paper);
  color: var(--ps-ink);
}
.ps-btn-paper:hover { background: #fff; }

.ps-btn-ghost {
  background: transparent;
  color: var(--ps-paper);
  border-color: var(--ps-border-strong);
}
.ps-btn-ghost:hover {
  background: var(--ps-surface-1);
  border-color: var(--ps-paper);
}

/* ============================================
   SECTIONS
   ============================================ */
.ps-section { padding: 110px 0; }
.ps-section-tight { padding: 70px 0; }
.ps-section-deep { background: var(--ps-ink-deep); }
.ps-section-divider { border-top: 1px solid var(--ps-border); }

.ps-section-header { display: flex; flex-direction: column; gap: 18px; margin-bottom: 56px; }
.ps-section-lead { color: var(--ps-text-soft); font-size: var(--ps-text-body); max-width: 640px; line-height: 1.55; }

/* ============================================
   CARDS
   ============================================ */
.ps-card {
  background: var(--ps-surface-1);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-md);
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
  overflow: hidden;
}
.ps-card:hover {
  border-color: var(--ps-border-strong);
  background: var(--ps-surface-2);
}
.ps-card-link { display: block; }
.ps-card-link:hover { transform: translateY(-2px); }

/* ============================================
   FOOTER
   ============================================ */
.ps-footer {
  padding: 60px 0 32px;
  border-top: 1px solid var(--ps-border);
  font-family: var(--ps-font-mono);
  font-size: var(--ps-text-mono);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ps-text-muted);
}
.ps-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.ps-footer-links { display: flex; gap: 32px; flex-wrap: wrap; }
.ps-footer a { transition: color 0.15s ease; }
.ps-footer a:hover { color: var(--ps-paper); }

/* ============================================
   PROJECT CARDS (réutilisables)
   ============================================ */
.ps-project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.ps-project { overflow: hidden; }
.ps-project-thumb { aspect-ratio: 16/10; background: var(--ps-ink-deep); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ps-project-thumb img, .ps-project-thumb video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.ps-project-thumb .ps-fallback { font-family: var(--ps-font-sans); color: var(--ps-paper); font-size: 28px; font-weight: 700; letter-spacing: -0.5px; position: relative; z-index: 1; }
.ps-project-thumb.t-red { background: var(--ps-red); }
.ps-project-thumb.t-paper { background: var(--ps-paper); }
.ps-project-thumb.t-paper .ps-fallback { color: var(--ps-ink); }
.ps-project-info { padding: 22px 26px; }
.ps-project-info .meta { font-family: var(--ps-font-mono); font-size: 11px; color: var(--ps-text-muted); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.ps-project-info h3 { font-family: var(--ps-font-sans); font-size: 20px; font-weight: 500; color: var(--ps-paper); letter-spacing: -0.4px; }

/* ============================================
   UTILS
   ============================================ */
.ps-text-red { color: var(--ps-red); }
.ps-text-paper { color: var(--ps-paper); }
.ps-mt-sm { margin-top: 12px; }
.ps-mt-md { margin-top: 24px; }
.ps-mt-lg { margin-top: 48px; }

/* Inline hubspot form on Ink: force readable rendering */
.hs-form-frame { color: var(--ps-ink); }


/* ============================================
   MOBILE NAV (hamburger CSS-only via checkbox hack)
   ============================================ */
.ps-nav-toggle-input { display: none; }
.ps-nav-toggle { display: none; cursor: pointer; padding: 8px; margin: -8px; }

@media (max-width: 820px) {
  /* FIX containing block : backdrop-filter sur .ps-header confine les enfants position:fixed */
  /* Override pour liberer le drawer en plein ecran */
  .ps-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(14, 14, 70, 0.95);
  }
  .ps-nav-toggle-input:checked ~ * .ps-header,
  body:has(.ps-nav-toggle-input:checked) .ps-header {
    background: var(--ps-ink);
  }
  /* Padding header confortable pour logo + hamburger */
  .ps-header .ps-container.ps-nav { padding: 18px 24px; }
  .ps-logo { font-size: 20px; }
  .ps-nav-toggle {
    display: block;
    width: 28px;
    height: 22px;
    position: relative;
    z-index: 1100;
    /* Hitbox 44x44 WCAG (visible reste 28x22, padding etend la zone tactile) */
    padding: 11px;
    margin: -11px;
    box-sizing: content-box;
  }
  .ps-nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--ps-paper);
    position: absolute;
    transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
    left: 0;
    border-radius: 2px;
  }
  .ps-nav-toggle span:nth-child(1) { top: 3px; }
  .ps-nav-toggle span:nth-child(2) { top: 10px; }
  .ps-nav-toggle span:nth-child(3) { top: 17px; }

  /* Hamburger -> X quand checke */
  .ps-nav-toggle-input:checked ~ .ps-nav-toggle span:nth-child(1) { top: 10px; transform: rotate(45deg); }
  .ps-nav-toggle-input:checked ~ .ps-nav-toggle span:nth-child(2) { opacity: 0; }
  .ps-nav-toggle-input:checked ~ .ps-nav-toggle span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

  /* Mobile drawer plein ecran */
  .ps-nav-links {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* dynamic viewport height (mobile browsers UI-aware) */
    padding: 88px 24px 40px;
    background: var(--ps-ink);
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000;
    overflow-y: auto;
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--ps-font-sans);
    opacity: 0;
    pointer-events: none;
  }
  .ps-nav-toggle-input:checked ~ .ps-nav-links {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }
  body:has(.ps-nav-toggle-input:checked) { overflow: hidden; }
  /* Hamburger fixe quand drawer ouvert (sinon il scrolle hors vue) */
  body:has(.ps-nav-toggle-input:checked) .ps-nav-toggle {
    position: fixed;
    top: 28px;
    right: 24px;
    z-index: 1100;
  }
  /* Logo aussi visible quand drawer ouvert (top-left) */
  body:has(.ps-nav-toggle-input:checked) .ps-logo {
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 1100;
  }

  .ps-nav-links > a, .ps-nav-links .ps-nav-item > a {
    padding: 18px 0;
    font-size: 22px;
    color: var(--ps-paper);
    border-bottom: 1px solid var(--ps-border);
    font-weight: 500;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }
  .ps-nav-links > a.active, .ps-nav-links .ps-nav-item.active > a { color: var(--ps-red); }
  .ps-nav-item { width: 100%; }
  /* Chevron a droite des items qui ont un sous-menu */
  .ps-nav-item > a::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    opacity: 0.6;
    border-left: 0;
    border-top: 0;
    margin: 0;
  }
  .ps-nav-item.open > a::after {
    transform: rotate(-135deg);
  }

  /* Dropdown mobile : collapse par defaut, expand sur .open */
  .ps-dropdown {
    position: static;
    display: flex !important;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease;
  }
  .ps-nav-item.open .ps-dropdown {
    max-height: 600px;
    padding: 8px 0 18px 0;
  }
  .ps-dropdown a {
    padding: 14px 8px;
    min-height: 44px;
    font-size: 14px;
    background: transparent;
    color: var(--ps-text-soft);
    border: 0;
    font-family: var(--ps-font-mono);
    text-transform: uppercase;
    letter-spacing: 1px;
    align-items: center;
  }
  .ps-dropdown a:hover, .ps-dropdown a.active {
    background: transparent;
    color: var(--ps-red);
  }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 820px) {
  :root { --ps-text-body: 16px; }
  .ps-section { padding: 70px 0; }
  .ps-section-tight { padding: 40px 0; }
  .ps-container { padding: 0 20px; }
  .ps-section-header { gap: 14px; margin-bottom: 36px; }
  body { overflow-x: clip; }
  /* Force pages services/secteurs hero grid en 1 col aligne sur 820px (etait 900px desaligne) */
  .svc-hero-grid, .sec-hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  /* Detail-grid pages projet : padding + gap reduit */
  .detail-grid { grid-template-columns: 1fr !important; gap: 30px !important; padding: 40px 0 !important; }
  /* Marquee logos : reduire vitesse pour confort lecture mobile */
  .marquee-track { animation-duration: 26s !important; }
  /* Hero CTAs : flex-wrap mais aussi scaling boutons */
  .ps-btn { padding: 14px 22px; font-size: 14px; }
  /* H1/H2 letter-spacing reduit pour eviter overflow */
  .ps-display, .ps-hero, .ps-h1 { letter-spacing: -1px; }
}

/* Ultra-petits ecrans : 480px et moins */
@media (max-width: 480px) {
  .ps-container { padding: 0 16px; }
  .ps-section { padding: 56px 0; }
  /* Hero CTAs en colonne pleine largeur sur tres petit screen */
  .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-cta .ps-btn { justify-content: center; width: 100%; }
  /* Filter tags projets : padding plus serre */
  .cat-filter { gap: 6px; }
  .cat-filter-btn { padding: 7px 12px !important; font-size: 11px !important; }
  /* Footer : mailto wrap si trop long */
  .ps-footer-links { gap: 16px; }
  .ps-footer-links a { word-break: break-word; }
  /* Mailto et liens longs */
  .ps-footer { font-size: 11px; letter-spacing: 0.5px; }
}

/* Tablet portrait specifique : 600-820px */
@media (min-width: 600px) and (max-width: 820px) {
  .ps-section-header { margin-bottom: 32px; }
}

/* ============================================
   GALLERY GRID overrides (page projet)
   2 et 4 images : grille fixe 2 colonnes
   3, 5, 6+ : auto-fit standard
   ============================================ */
.gallery-grid:has(> :nth-child(2):last-child) { grid-template-columns: 1fr 1fr !important; }
.gallery-grid:has(> :nth-child(4):last-child) { grid-template-columns: 1fr 1fr !important; }
@media (max-width: 720px) {
  .gallery-grid:has(> :nth-child(2):last-child),
  .gallery-grid:has(> :nth-child(4):last-child) { grid-template-columns: 1fr !important; }
}