/* 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.woff2') format('woff2'), 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.woff2') format('woff2'), url('BebasNeue-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
  @font-face { font-family: 'Americana'; src: url('AmericanaStd.woff2') format('woff2'), url('AmericanaStd.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
  @font-face { font-family: 'Futura Book'; src: url('Futura-Boo.woff2') format('woff2'), 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-meta { grid-template-columns: 1fr !important; } .ob-mosaic-row { flex-direction: column !important; height: auto !important; } .ob-mosaic-row > div { flex: none !important; height: clamp(220px, 60vw, 340px) !important; width: 100% !important; } }
  @media (max-width: 980px) { .ob-hmeta { display: none !important; } }

  /* ---- Navigation d'en-tête (restaurée) ---- */
  .ob-desktop-nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); justify-self: end; }
  .ob-navlink { font-family: 'Futura Book', sans-serif; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); background: none; border: none; cursor: pointer; padding: 0; }
  .ob-navitem { position: relative; }
  .ob-navitem > .ob-navlink::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--accent, #673423); transform: scaleX(0); transform-origin: left; transition: transform 0.3s cubic-bezier(0.16,0.7,0.1,1); }
  .ob-navitem.open > .ob-navlink::after { transform: scaleX(1); }

  /* ---- Encart survol (studio / contact) — grand panneau animé ---- */
  :root { --hdr-h: 74px; }
  .ob-flyout {
    position: fixed; top: var(--hdr-h); right: 0; z-index: 85;
    width: min(500px, 94vw); max-height: calc(100vh - var(--hdr-h)); overflow-y: auto;
    background: #301E19; color: #ECECEC;
    padding: clamp(30px, 4.5vh, 56px) clamp(28px, 3vw, 50px) clamp(40px, 6vh, 64px);
    box-shadow: -40px 0 90px -50px rgba(20,13,10,0.75);
    opacity: 0; visibility: hidden; transform: translateX(52px);
    transition: opacity 0.45s ease 0.12s, transform 0.6s cubic-bezier(0.16,0.7,0.1,1) 0.12s, visibility 0.45s ease 0.12s;
    pointer-events: none;
  }
  .ob-flyout::before { content: ''; position: absolute; top: -26px; left: 0; right: 0; height: 26px; }
  .ob-flyout--wide { width: min(560px, 96vw); }
  .ob-navitem.open .ob-flyout {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s;
  }
  /* cascade d'entrée du contenu */
  .ob-flyout > * { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.16,0.7,0.1,1); }
  .ob-navitem.open .ob-flyout > * { opacity: 1; transform: none; }
  .ob-navitem.open .ob-flyout > *:nth-child(1) { transition-delay: 0.10s; }
  .ob-navitem.open .ob-flyout > *:nth-child(2) { transition-delay: 0.17s; }
  .ob-navitem.open .ob-flyout > *:nth-child(3) { transition-delay: 0.24s; }
  .ob-navitem.open .ob-flyout > *:nth-child(4) { transition-delay: 0.31s; }
  .ob-navitem.open .ob-flyout > *:nth-child(5) { transition-delay: 0.38s; }

  .ob-fly-head { display: flex; align-items: center; gap: 16px; }
  .ob-fly-num { font-size: 14px; letter-spacing: 0.1em; color: rgba(236,236,236,0.5); }
  .ob-fly-rule { flex: 1; height: 1px; background: rgba(236,236,236,0.22); }
  .ob-fly-lbl { display: block; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #EBC5AD; }
  .ob-fly-title { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(30px, 3vw, 48px); line-height: 1.02; letter-spacing: 0.01em; margin: 20px 0 24px; color: #fff; text-transform: none; }
  .ob-fly-text { font-size: 14px; line-height: 1.7; color: rgba(236,236,236,0.72); margin: 14px 0 4px; max-width: 44ch; }
  .ob-fly-pillars { display: flex; flex-direction: column; margin-top: 14px; }
  .ob-fly-pill { display: flex; flex-direction: column; gap: 5px; border-top: 1px solid rgba(236,236,236,0.16); padding: 15px 0; }
  .ob-fly-pill-t { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(236,236,236,0.95); }
  .ob-fly-pill-d { font-size: 13px; line-height: 1.55; color: rgba(236,236,236,0.58); }
  .ob-fly-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 28px; margin-top: 22px; }
  .ob-fly-col { display: flex; flex-direction: column; gap: 6px; }
  .ob-fly-col a, .ob-fly-col span:not(.ob-fly-lbl) { font-size: 15px; line-height: 1.5; color: rgba(236,236,236,0.9); }
  .ob-fly-col a { transition: color 0.2s ease; }
  .ob-fly-col a:hover { color: #EBC5AD; }
  .ob-fly-ig { display: inline-flex; width: 20px; height: 20px; margin-top: 4px; color: rgba(236,236,236,0.85); }
  .ob-fly-ig:hover { color: #EBC5AD; }

  /* ---- Maisons partenaires (taille fixe, défile si la ligne déborde) ---- */
  .ob-clients-marquee { display: flex; justify-content: center; overflow: hidden; width: 100%; }
  .ob-clients-marquee.is-scrolling { justify-content: flex-start; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .ob-clients-track { display: flex; flex: none; }
  .ob-clients-marquee.is-scrolling .ob-clients-track { animation: ob-marquee 30s linear infinite; }
  .ob-clients-marquee.is-scrolling:hover .ob-clients-track { animation-play-state: paused; }
  .ob-clients-set { display: flex; flex: none; }
  .ob-clients-set[aria-hidden] { display: none; }
  .ob-clients-marquee.is-scrolling .ob-clients-set[aria-hidden] { display: flex; }
  @keyframes ob-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--marquee-shift, 50%))); } }
  .ob-client { flex: 0 0 auto; width: 190px; height: 128px; margin-right: 46px; position: relative; display: flex; align-items: center; justify-content: center; transition: transform 0.4s cubic-bezier(0.16,0.7,0.1,1); }
  .ob-clients-marquee:not(.is-scrolling) .ob-client:last-child { margin-right: 0; }
  .ob-client:hover { transform: scale(1.12); z-index: 2; }
  .ob-client-logo { max-width: 100%; max-height: 100px; object-fit: contain; filter: grayscale(1); opacity: 0.68; transition: filter 0.35s ease, opacity 0.35s ease; }
  .ob-client:hover .ob-client-logo { filter: none; opacity: 1; }
  .ob-client-name { font-family: 'Futura Book', sans-serif; font-size: 19px; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; white-space: nowrap; color: color-mix(in srgb, var(--ink) 52%, transparent); transition: color 0.35s ease; }
  .ob-client:hover .ob-client-name { color: var(--ink); }
  @media (max-width: 560px) { .ob-client { width: 150px; height: 104px; margin-right: 34px; } .ob-client-logo { max-height: 80px; } }
  @media (prefers-reduced-motion: reduce) { .ob-clients-marquee.is-scrolling .ob-clients-track { animation: none; } .ob-clients-marquee.is-scrolling { overflow-x: auto; } }
  @media (prefers-reduced-motion: reduce) {
    .ob-flyout, .ob-flyout > * { transition-duration: 0.001s !important; transform: none !important; }
  }

  /* ---- Burger + nav mobile (restaurés) ---- */
  .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-mnav-trigger:hover { color: var(--accent, #673423); }
  .ob-mnav-panel { animation: obFlyIn 0.3s ease; }
  @keyframes obFlyIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

  @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-4 { grid-template-columns: repeat(2, 1fr) !important; } }
  @media (max-width: 620px) { .ob-4 { grid-template-columns: 1fr !important; gap: 18px !important; } .ob-4 > div { border-left: none !important; padding-left: 0 !important; } .ob-next-link { flex-direction: column !important; align-items: flex-start !important; } .ob-next-link > span:last-child { margin-top: 18px; } }
  @media (max-width: 680px) {
    .ob-rail-note { display: none !important; }
  }

/* ---- Contrôles vidéo (son + plein écran) sur les vidéos en autoplay ---- */
.ob-vctrl {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  z-index: 6;
}
.ob-vctrl-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #fff;
  background: rgba(20, 13, 10, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.28);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ob-vctrl-btn:hover {
  background: rgba(103, 52, 35, 0.92);
  border-color: rgba(255, 255, 255, 0.55);
}
.ob-vctrl-btn svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 620px) {
  .ob-vctrl { bottom: 9px; right: 9px; gap: 6px; }
  .ob-vctrl-btn { width: 34px; height: 34px; }
}