/* Styles partagés du site public One Block — utilisé par index.html et les pages projet statiques */
* { box-sizing: border-box; }
  @font-face { font-family: 'Ostrich Sans'; src: url('OstrichSans-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
  @font-face { font-family: 'Bebas Neue'; src: url('BebasNeue-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
  @font-face { font-family: 'Americana'; src: url('AmericanaStd.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
  @font-face { font-family: 'Futura Book'; src: url('Futura-Boo.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
  html, body { margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: #ececec;
    color: var(--ink, #301E19);
    font-family: 'Futura Book', 'Futura', "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  a { color: inherit; text-decoration: none; }
  ::selection { background: #673423; color: #ffffff; }
  img { max-width: 100%; display: block; }
  .ob-tile { position: relative; overflow: hidden; cursor: pointer; }
  .ob-tile .ob-zoom { position: absolute; inset: 0; transition: transform 0.8s cubic-bezier(0.16,0.7,0.1,1); }
  .ob-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ob-tile:hover .ob-zoom { transform: scale(1.06); }
  .ob-tile .ob-veil { position: absolute; inset: 0; pointer-events: none; background: rgba(28,20,16,0.5); opacity: 0; transition: opacity 0.5s ease; }
  .ob-tile:hover .ob-veil { opacity: 1; }
  .ob-tile .ob-cap { transition: transform 0.5s cubic-bezier(0.16,0.7,0.1,1); }
  .ob-tile:hover .ob-cap { transform: translateY(-4px); }
  .ob-tile-logo { position: absolute; inset: 8%; display: flex; align-items: center; justify-content: center; pointer-events: none; mix-blend-mode: overlay; opacity: 0; transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.16,0.7,0.1,1); }
  .ob-tile-logo img { max-width: 62%; max-height: 62%; object-fit: contain; filter: brightness(0) invert(1); }
  .ob-tile:hover .ob-tile-logo { opacity: 0.7; transform: scale(1.05); }
  .ob-row .ob-rowname { transition: transform 0.4s cubic-bezier(0.16,0.7,0.1,1); }
  .ob-row:hover .ob-rowname { transform: translateX(10px); }
  .ob-row .ob-rownum { transition: color 0.3s ease; }
  .ob-row:hover .ob-rownum { color: var(--accent, #673423); }
  .ob-row:hover { background: color-mix(in srgb, var(--ink) 2%, transparent); }
  .ob-toggle-btn { font-family: 'Ostrich Sans', 'Futura Book', sans-serif; letter-spacing: 0.12em; font-size: 13px; padding: 6px 14px; cursor: pointer; }
  @media (max-width: 1024px) { .ob-grid { grid-template-columns: repeat(3, 1fr) !important; } .ob-tile { grid-column: span 3 !important; } }
  @media (max-width: 760px) { .ob-grid { grid-template-columns: 1fr !important; } .ob-tile { grid-column: span 1 !important; grid-row: span 2 !important; } .ob-split { grid-template-columns: 1fr !important; } .ob-2, .ob-meta { grid-template-columns: 1fr !important; } }
  @media (max-width: 980px) { .ob-hmeta { display: none !important; } }
  .ob-burger { display: none; }
  .ob-mobile-nav { display: none; }
  @media (max-width: 680px) {
    .ob-desktop-nav { display: none !important; }
    .ob-burger { display: flex !important; }
  }
  .ob-mobile-nav.open { display: flex !important; }
  .ob-mobile-nav a, .ob-mobile-nav button { font-family: 'Futura Book', sans-serif; }
  @media (max-width: 560px) {
    .ob-footer-bar { grid-template-columns: 1fr !important; gap: 16px !important; }
    .ob-footer-bar > * { justify-self: start !important; }
  }
  @media (max-width: 900px) { .ob-hero { grid-template-columns: 1fr !important; } .ob-heromain { border-left: none !important; padding-left: 0 !important; } .ob-herocols { grid-template-columns: 1fr !important; } }
  #work-anchor, #studio-anchor, #clients-anchor, #contact-anchor { scroll-margin-top: clamp(64px, 10vh, 100px); }
  @media (max-width: 900px) { .ob-herobot, .ob-4 { grid-template-columns: repeat(2, 1fr) !important; } }
  @media (max-width: 620px) { .ob-herobot, .ob-4 { grid-template-columns: 1fr !important; gap: 18px !important; } .ob-herobot > div, .ob-4 > div { border-left: none !important; padding-left: 0 !important; } }
  @media (max-width: 680px) {
    .ob-herobot { display: none !important; }
    .ob-rail-note { display: none !important; }
  }