/* ============================================================
   Bento — Feature Section 03 bis · Figma 3:6905 · 1905 × 1325
   Section : px 30 · pt 76 · pb 15 · conteneur 1320 · gap 80
   Grille : 2 rangées, gap 32
     rangée 1 : 766 × 479  +  522 × 480
     rangée 2 : 436 × 426  +  852 × 424
   ============================================================ */
.bento {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 76px;
  padding-bottom: 15px;
  overflow: hidden;
}

.bento__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

.bento__head { width: 634px; max-width: 100%; }

.bento__grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 1320px;
  max-width: 100%;
}
/* rangée 1 : 766 + 32 + 522 = 1320 · rangée 2 : 436 + 32 + 852 = 1320 */
.bento__line { display: flex; gap: 32px; width: 100%; }
.bento__card--service { width: 766px; height: 480px; }
.bento__card--agents  { width: 522px; height: 480px; }
.bento__card--impact  { width: 436px; height: 426px; }
.bento__card--integ   { width: 852px; height: 426px; }

.bento__card {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.bento__card-head { display: flex; flex-direction: column; gap: var(--sp-10); }
.bento__card-head--pad { padding-inline: 28px; }

.bento__card--service { padding: 27px 26px; }
.bento__card--agents  { padding: 25px 22px 24px; }
.bento__card--impact  { padding: 34px 22px 33px 28px; gap: 32px; }
.bento__card--integ   { padding: 35px 0; gap: 32px; }

/* ------------------------------------------------------------
   Carte 1 : liste de tickets — carte blanche 717 × 301
   ------------------------------------------------------------ */
.bento__tickets {
  flex: 1 0 auto;
  padding: 18px 0 0;
  overflow: hidden;
}

.bento__tabs {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 32px;
  border-bottom: 1px solid var(--b-card);
}
.bento__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  font-family: var(--f-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-text-ui);
  white-space: nowrap;
}
.bento__tab.is-active { color: var(--c-ink-ui); }
.bento__tab.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--c-ink-ui);
}
.bento__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--c-cream);
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0.1px;
  color: var(--c-text-ui);
}

.bento__list { padding: 14px 32px 0; }
.bento__ticket {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
}
.bento__radio {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--b-card);
}
.bento__radio--done {
  background: var(--c-coral)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center / 12px 12px no-repeat;
  box-shadow: none;
}
.bento__ticket-text {
  flex: 1 0 0;
  min-width: 0;
  font-family: var(--f-ui-alt);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-ink-ui);
}
.bento__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5.46px 8.74px;
  border-radius: 22px;
  background: var(--c-white);
  box-shadow: inset 0 0 0 1px var(--b-card);
  font-family: var(--f-ui-alt);
  font-size: var(--fs-pill);
  font-weight: 500;
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-body);
  color: var(--c-ink-ui);
  white-space: nowrap;
}
.bento__badge--done {
  background: var(--c-ink-ui);
  box-shadow: none;
  color: var(--c-white);
}

/* ------------------------------------------------------------
   Carte 2 : scène de curseurs — carte blanche 478 × 225
   ------------------------------------------------------------ */
.bento__cursors {
  position: relative;
  flex: 1 0 auto;
  min-height: 225px;
  overflow: hidden;
}
.bento__cursor { position: absolute; }
.bento__cursor--1 { left: 172px; top: 22px;  width: 141px; height: 48px; }
.bento__cursor--2 { left: 264px; top: 100px; width: 126px; height: 53px; }
.bento__cursor--3 { left: 93px;  top: 125px; width: 141px; height: 48px; }

/* ------------------------------------------------------------
   Carte 3 : histogramme
   ------------------------------------------------------------ */
.bento__chart {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
}
.bento__chart img { width: 100%; height: auto; }

/* ------------------------------------------------------------
   Carte 4 : 3 rangées de marquee (852 de piste, gap 13)
   ------------------------------------------------------------ */
.bento__rows { display: flex; flex-direction: column; gap: 13px; }
.bento__row { height: 56px; }
.bento__track { gap: 13px; }
.bento__track li { display: flex; align-items: center; flex-shrink: 0; }
.bento__track img { width: 141px; height: 55px; object-fit: contain; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1359px) {
  .bento__grid { width: 100%; }
  .bento__card--service { width: auto; flex: 1.45 0 0; height: auto; min-height: 440px; }
  .bento__card--agents  { width: auto; flex: 1 0 0;    height: auto; min-height: 440px; }
  .bento__card--impact  { width: auto; flex: 1 0 0;    height: auto; }
  .bento__card--integ   { width: auto; flex: 1.95 0 0; height: auto; }
}

@media (max-width: 991px) {
  .bento { padding-top: 56px; }
  .bento__container { gap: 48px; }
  .bento__head { width: 100%; max-width: 620px; }
  .bento__grid { gap: 24px; }
  .bento__line { flex-direction: column; gap: 24px; }
  .bento__card--service,
  .bento__card--agents,
  .bento__card--impact,
  .bento__card--integ { width: 100%; flex: none; min-height: 0; }
}

@media (max-width: 767px) {
  .bento__card--service,
  .bento__card--agents { padding: 20px 16px; gap: 20px; }
  .bento__card--impact { padding: 20px 16px; gap: 20px; }
  .bento__card--integ  { padding: 24px 0; gap: 20px; }
  .bento__card-head--pad { padding-inline: 16px; }
  .bento__tabs { gap: 14px; padding: 0 16px; font-size: 14px; }
  .bento__list { padding: 10px 16px 0; }
  .bento__ticket { gap: 10px; }
  .bento__ticket-text { font-size: 14px; line-height: 22px; }
  .bento__cursors { min-height: 180px; }
  .bento__cursor--1 { left: 40%; top: 16px; }
  .bento__cursor--2 { left: 55%; top: 78px; }
  .bento__cursor--3 { left: 10%; top: 108px; }
}