/* ============================================================
   87seconds — V2 RESPONSIVE · Our work
   Réf. maquette : nœud `112:7800` (desktop 1440), reçue le 2026-08-14 — refonte
   complète de la page. Elle était SOMBRE (titre en gros, filtres blancs cerclés,
   cartes sur fond nuit) ; elle est désormais CLAIRE, ouverte par un hero photo que
   chevauche la pastille « OUR WORK », suivie des filtres, d'un filet et d'un bento
   de six cartes.
   ============================================================ */

:root {
  --fs-owfilter: clamp(15px, calc(15px +  7 * (100vw - 390px) / 1050), 22px);
  /* Cotes de maquette : marque 40px (45 pour Hollister, ramené au même corps),
     descriptif et titre d'insight 24px. */
  --fs-owbrand:  clamp(26px, calc(26px + 14 * (100vw - 390px) / 1050), 40px);
  --fs-owdesc:   clamp(17px, calc(17px +  7 * (100vw - 390px) / 1050), 24px);
  --fs-owct:     clamp(17px, calc(17px +  7 * (100vw - 390px) / 1050), 24px);
  --ow-gap:      clamp(14px, 1.7vw, 24px);
}

body.ow { background: #fff; }

/* ---------- Hero ---------- */
/* Même mécanique que les pages piliers : hauteur fluide entre l'ancre mobile et la
   cote de maquette (785 à 1440). Le sujet est cadré haut, le bas de l'image passant
   sous la pastille. */
.wk-hero { position: relative; width: 100%; overflow: hidden;
  /* Plafonné par la fenêtre — voir --banner-max dans r-base.css. */
  height: var(--banner-fill); }
.wk-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }

/* ---------- Filtres ---------- */
/* Noir sur blanc, à l'inverse de la version sombre. L'état actif est plein — la
   maquette ne le montre pas, mais sans lui on ne sait plus quel filtre est posé. */
.ow-filter { display: flex; flex-wrap: wrap; gap: clamp(12px, 2vw, 24px); margin-bottom: clamp(36px, 7vw, 100px); }
.ow-filter button { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-owfilter); line-height: 1; text-transform: uppercase;
  padding: clamp(11px, 1.7vw, 18px) clamp(22px, 4vw, 45px); border-radius: clamp(12px, 1.5vw, 16px);
  border: 2px solid var(--black); background: #fff; color: var(--black);
  transition: background-color .2s ease, color .2s ease; }
.ow-filter button[aria-current="true"] { background: var(--black); color: #fff; }
.ow-rule { border: 0; border-top: 1px solid rgba(15, 17, 34, .25); margin: 0 0 clamp(32px, 5.5vw, 75px); }

/* ---------- Grille ---------- */
/* Mobile : une seule colonne, cartes de 240px.
   Desktop : rangées de 3 cartes (deux empilées + une carrée), le côté de la carrée
   alternant d'une rangée à l'autre — c'est le bento de la maquette. La construction
   des rangées est faite par le script de la page, qui la refait au redimensionnement. */
.ow-grid { display: flex; flex-direction: column; gap: var(--ow-gap); }
.ow-row { display: flex; flex-direction: column; gap: var(--ow-gap); }
.ow-stack { display: flex; flex-direction: column; gap: var(--ow-gap); min-width: 0; }
.ow-card { position: relative; display: block; border-radius: 16px; overflow: hidden; height: 240px; }
/* Pagination : les cartes au-delà de la page courante sont MASQUÉES, pas retirées du
   DOM, pour que leurs liens restent lisibles. Plus spécifique que `.ow-card`. */
.ow-card[hidden] { display: none; }
.ow-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ow-card:hover .ow-bg { transform: scale(1.05); }
/* Voile PLAT à 50 % : c'est celui de la maquette (`rgba(15,17,34,.5)`), là où la
   version sombre posait un dégradé de 20 à 55 %. */
.ow-card::after { content: ""; position: absolute; inset: 0; background: rgba(15, 17, 34, .5); }
.ow-cap { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: clamp(10px, 1.7vw, 24px); padding: clamp(18px, 1.7vw, 24px); }
.ow-brand { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-owbrand); line-height: 1.15; letter-spacing: -0.01em; text-transform: uppercase; color: var(--cloud); }
/* Descriptif en Albert Sans REGULAR, comme la maquette — la version sombre le
   composait en Unbounded gras, ce qui alourdissait la carte. */
.ow-desc { font-family: var(--f-alb); font-weight: 400; font-size: var(--fs-owdesc); line-height: 1.2; letter-spacing: -0.01em; text-transform: uppercase; color: var(--cloud); }
.ow-ct { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-owct); line-height: 1.15; letter-spacing: -0.01em; text-transform: uppercase; color: var(--cloud); }
/* Les retours à la ligne de la maquette ne valent qu'en desktop : en mobile la carte
   est trop étroite et le texte se recompose seul. */
@media (max-width: 899px) { .ow-desc br, .ow-ct br { display: none; } }

@media (min-width: 900px) {
  /* Rangée à deux colonnes égales : la pile de deux cartes et la carte carrée.
     Le RATIO porte sur la rangée (1204 × 590,5 dans la maquette) et non sur la carte
     carrée : poser un `aspect-ratio` sur un élément étiré crée une dépendance
     circulaire — la leçon de la V48. */
  .ow-row { flex-direction: row; aspect-ratio: 1204/590.5; }
  .ow-row > * { flex: 1 1 0; min-width: 0; }
  .ow-card { height: auto; }
  .ow-stack > .ow-card { flex: 1 1 0; }
  /* Restes de fin de liste : une paire ou une carte seule, à hauteur d'une demi-rangée. */
  .ow-row--pair, .ow-row--single { aspect-ratio: 1204/283.25; }
  .ow-row--single > * { flex: 0 1 calc(50% - var(--ow-gap) / 2); }
}

/* ---------- Load more ---------- */
/* Noir sur blanc, comme les filtres. La maquette ne montre pas ce bouton — elle ne
   présente que les six premières cartes — mais les brèves restent accessibles. */
.ow-more-wrap { display: flex; justify-content: center; margin-top: clamp(24px, 3vw, 40px); }
.ow-more { display: inline-flex; align-items: center; gap: 14px; font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-ui); letter-spacing: -0.01em; text-transform: uppercase; color: var(--black); background: transparent; border: 2px solid var(--black); border-radius: 13px; padding: 14px clamp(24px, 4vw, 44px); transition: background-color .2s ease, color .2s ease; }
.ow-more img { width: 14.5px; height: 14.9px; }
.ow-more:hover { background: var(--black); color: #fff; }
.ow-more:hover img { filter: invert(1); }

/* ---------- Footer ---------- */
/* Aucune variante : le footer du socle, comme partout ailleurs. La V1 cadrait ici
   le personnage dans le footer (`overflow:hidden`, personnage à −120px) et ma
   première conversion avait de surcroît perdu le fond `footer.webp`. Corrigé en V30. */