/* cases.css — pages « Cas clients » et « Étude de cas ».
   La vignette de cas reprend l'habillage du bloc de l'accueil ; seule la
   proportion change (16/9 en pleine largeur au lieu du carré). */

/* ======================================================================= */
/* Liste des cas                                                            */
/* ======================================================================= */
.cases_head-wrap { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
.cases_heading-wrap { position: relative; }
/* Le décompte se pose en exposant du titre, hors du flux. */
.work-list_number {
  position: absolute; inset: 0 -1.15rem auto auto;
  display: flex; justify-content: center; align-items: center;
  color: var(--_colors---primary--black);
  font-size: var(--size--size-10);
  font-weight: var(--_typography---font-weight--semibold);
}

.cases-list_list { display: flex; flex-direction: column; gap: var(--size--size-22); }

.case_block {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  width: 100%; aspect-ratio: 16 / 9;
  padding: var(--size--size-13) var(--size--size-13) var(--size--size-16);
  border-radius: var(--border-radius--small);
  overflow: hidden;
  color: var(--_colors---primary--white);
}
.case_block.ratio-square { aspect-ratio: 1; }
.case_block.ratio-landscape { aspect-ratio: 3 / 2; }

/* ======================================================================= */
/* Étude de cas                                                             */
/* ======================================================================= */
.work-header_img-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--border-radius--small); overflow: clip; }
.work-header_img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.work_rows { display: flex; flex-direction: column; }
.work_row {
  display: grid; grid-template-columns: .35fr 1fr; gap: var(--size--size-13);
  padding-top: var(--size--size-11); padding-bottom: var(--size--size-11);
  border-top: 1px solid var(--_colors---bleu--150);
}
.work_row:last-child { border-bottom: 1px solid var(--_colors---bleu--150); }

.work_images { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size--size-4); }
.work_img-wrap { position: relative; width: 100%; aspect-ratio: 3 / 2; border-radius: var(--border-radius--small); overflow: clip; }
.work_img-wrap.is-wide { grid-column: span 2; aspect-ratio: 16 / 9; }
.work_img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ======================================================================= */
/* Adaptations                                                              */
/* ======================================================================= */
@media (max-width: 991px) {
  .cases-list_list { gap: var(--size--size-13); }
  .work_row { grid-template-columns: 1fr; gap: var(--size--size-5); }
}
@media (max-width: 767px) {
  .cases-list_list { gap: var(--size--size-10); }
  .case_block { padding: var(--size--size-10); aspect-ratio: 3 / 2; }
  .work_images { grid-template-columns: 1fr; }
  .work_img-wrap.is-wide { grid-column: auto; }
}