/* ============================================================
   Réalisations — Figma 8:3250 · 1920 × 1784
   Section : px 30 · pt 70 · pb 97 · conteneur 1280 · gap 80
   ============================================================ */
.work {
  padding-top: 70px;
  padding-bottom: 97px;
  overflow: hidden;
}
.work__inner { display: flex; flex-direction: column; gap: var(--sp-80); }

/* En-tête 230 = eyebrow 39 + gap 24 + H2 166 (2 lignes) */
.work__head { display: flex; flex-direction: column; gap: var(--sp-24); }
.work__head .h2 { max-width: 972px; }

/* Rangée de 4 cartes logos, fond #F5FAFF */
.work__logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-24);
}
.work__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 24px;
  border-radius: var(--r-card);
  background: var(--c-card-bg);
}
.work__logo img { width: auto; max-height: 130px; object-fit: contain; }

/* Grille 2 × 2 : la carte EST l'image (620 × 494), gap 39 / 24.
   1027 = 494 + 39 + 494 (relevé sur le live) */
.work__grid {
  display: grid;
  grid-template-columns: repeat(2, 620px);
  justify-content: space-between;
  gap: 40px;
}
.work__card { display: block; }
.work__link { display: block; line-height: 0; }

.work__media {
  position: relative;
  display: block;
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 620 / 494;
  line-height: 0;
}
.work__media img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.work__link:hover .work__media img:first-child { transform: scale(1.03); }

/* Voile sombre en bas de l'image, pour la lisibilité */
.work__media::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 58%;
  background: linear-gradient(to top, rgba(5, 26, 47, 0.88) 12%, rgba(5, 26, 47, 0.62) 45%, transparent);
  pointer-events: none;
}

/* Coin arrondi inversé, en haut à droite */
/* La pastille déborde de la carte de 44 en haut et 29 à droite : elle est
   rognée par l'overflow, ce qui laisse une zone visible de 138 x 123 dans
   laquelle le logo vient se caler. Valeurs relevées sur le live. */
.work__coin {
  top: -44px;
  right: -29px;
  width: 167.3px;
  height: 167.3px;
  --enc-color: var(--c-card-bg);
  z-index: 3;
}

/* Badge logo client posé dans le coin */
.work__badge {
  position: absolute;
  top: 18px;
  right: 6.4px;
  z-index: 4;
  width: 106px;
  height: 64.3px;
  object-fit: contain;
}

/* Légende posée sur le voile sombre, en bas de l'image */
.work__legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 65px 10px 15px;
}
.work__title { color: var(--c-white); }
.work__desc {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-white);
}

@media (max-width: 991px) {
  .work { padding-top: 56px; padding-bottom: 64px; }
  .work__inner { gap: 48px; }
  .work__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work__logo { min-height: 150px; }
  .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24); }
  .work__legende { padding: 0 20px 10px; }
  .work__coin { top: -32px; right: -21px; width: 120px; height: 120px; }
  .work__badge { width: 84px; height: 51px; top: 13px; right: 5px; }
}

@media (max-width: 767px) {
  .work__grid { grid-template-columns: minmax(0, 1fr); }
  .work__logo { min-height: 120px; padding: 16px; }
  .work__logo img { max-height: 84px; }
  .work__coin { width: 96px; height: 96px; }
  .work__badge { width: 66px; height: 40px; top: 12px; right: 12px; }
}