/* ============================================================
   Nos assistants IA en action — Feature Section 04 · Figma 3:8255
   Section : bg blanc · px 30 · py 15 · 1905 × 851
   Panneau : 1320 crème r40 · pl 86 · pr 79 · py 130 · gap 84
   ============================================================ */
.assist {
  background: var(--c-white);
  padding-top: 15px;
  padding-bottom: 15px;
  overflow: hidden;
}

.assist__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 84px;
  padding: 130px 79px 130px 86px;
}

/* ------------------------------------------------------------
   Colonne gauche : flex 1, gap 60
   ------------------------------------------------------------ */
.assist__content {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-60);
}

.assist__title {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  width: 501px;
  max-width: 100%;
}

/* Liste de coches : 2 colonnes, gap 56 ; chaque colonne gap 18 */
.assist__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  width: 100%;
}
.assist__col {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fs-sub);            /* 18 */
}
.assist__feat {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-ink);
}

/* Pastille corail : p 4 + glyphe 16 = 24 */
.assist__check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  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='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center / 14px 14px no-repeat;
}

.assist__cta { align-self: flex-start; }

/* ------------------------------------------------------------
   Colonne droite : 2 cartes, gap 28
   ------------------------------------------------------------ */
.assist__media {
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  width: 403px;
}

/* Fond de hachures : 484 × 301 en (droite −25 ; bas 175) */
.assist__hatch {
  position: absolute;
  right: -25px;
  bottom: 175px;
  width: 484px;
  height: 301px;
  border-radius: var(--r-card);
  z-index: 0;
  pointer-events: none;
}

/* --- Carte Emma : 363 × 187 --- */
.assist__emma {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  width: 363px;
  height: 187px;
}
.assist__emma-head {
  position: absolute;
  left: 22px;
  top: 22px;
  display: flex;
  align-items: center;
  gap: 12.27px;
}
.assist__emma-head > img {
  width: 73.61px;
  height: 73.61px;
  border-radius: 50%;
  object-fit: cover;
}
.assist__emma-name { display: flex; flex-direction: column; gap: 4px; }
.assist__emma-title {
  font-family: var(--f-ui);
  font-size: var(--fs-sub);
  line-height: 30.6px;
  color: var(--c-ink-ui);
}
.assist__emma-role {
  font-family: var(--f-ui);
  font-size: var(--fs-pill);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-body);
  color: var(--c-text-ui);
}
.assist__stat {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  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-text-ui);
  white-space: nowrap;
}
.assist__stat img { width: 27px; height: 27px; }
.assist__stat--tasks  { left: 28.19px;  top: 126.18px; }
.assist__stat--rating { left: 154.19px; top: 132.18px; }

/* --- Carte « Activité cette semaine » : 403 × 343 --- */
.assist__activity {
  position: relative;
  z-index: 1;
  width: 403px;
  height: 343px;
}
.assist__act-title {
  position: absolute;
  left: 26.7px;
  top: 24px;
  font-family: var(--f-ui);
  font-size: var(--fs-sub);
  line-height: 30.6px;
  color: var(--c-ink-ui);
  white-space: nowrap;
}

.assist__legend {
  position: absolute;
  left: 26.7px;
  top: 95px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.assist__leg { display: flex; flex-direction: column; }
.assist__leg-head { display: inline-flex; align-items: center; gap: 4.44px; }
.assist__dot {
  width: 11.13px;
  height: 11.13px;
  border-radius: 11.13px;
  flex-shrink: 0;
}
.assist__dot--blue   { background: #9999ff; }
.assist__dot--coral  { background: #e97a58; }
.assist__dot--yellow { background: #fac666; }

.assist__leg-label {
  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: #787486;
  white-space: nowrap;
}
/* « En attente » est en Inter noir sur le site d'origine */
.assist__leg-label--inter {
  font-family: var(--f-inter);
  font-weight: 400;
  line-height: 19.2px;
  letter-spacing: normal;
  color: #000;
}
.assist__leg-value {
  margin-left: 15px;
  margin-top: 7px;
  font-family: var(--f-ui);
  font-size: var(--fs-sub);
  line-height: 30.6px;
  color: var(--c-ink-ui);
}

.assist__rings {
  position: absolute;
  left: 132.67px;
  top: 71.67px;
  width: 240px;
  height: 240px;
}

.assist__period {
  position: absolute;
  left: 273.2px;
  top: 30px;
  display: inline-flex;
  align-items: center;
  gap: 3.2px;
  font-family: var(--f-ui);
  font-size: var(--sp-12);
  line-height: 19.2px;
  letter-spacing: -0.16px;
  color: var(--c-text-ui);
  white-space: nowrap;
}
.assist__period img { width: 16px; height: 17px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1279px) {
  .assist__panel { padding: 88px 48px; gap: 48px; }
  .assist__title { width: 100%; }
  .assist__list { gap: 32px; }
  .assist__hatch { display: none; }
}

@media (max-width: 991px) {
  .assist__panel { flex-direction: column; align-items: stretch; padding: 64px 32px; gap: 48px; }
  .assist__media { width: 100%; align-items: center; }
  .assist__emma { align-self: center; }
}

@media (max-width: 767px) {
  .assist__panel { padding: 40px 16px 48px; border-radius: 24px; }
  .assist__list { flex-direction: column; align-items: stretch; gap: 18px; }
  .assist__emma, .assist__activity { width: 100%; max-width: 403px; }
  .assist__cta { align-self: stretch; }
}