/* ═══════════════════════════════════════════════════════════════════════════
   SECTION : Hero — Page Fonctionnement
   Figma node: 738-3351
   v1.3.0 — elioz-theme
   ═══════════════════════════════════════════════════════════════════════════ */

.elioz-hero-fonctionnement {
  position: relative;
  width: 100%;
  min-height: 429px;
  overflow: hidden;
  background: linear-gradient(90deg, #1c1468 22%, #ed8abd 100%);
  display: flex;
  align-items: stretch;
}

/* ── Cercles décoratifs (positionnés absolus, côté droit) ───────────────── */
.elioz-hero-fonctionnement__circles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.elioz-hero-fonctionnement__circle {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  top: 50%;
  transform: translateY(-50%);
}

.elioz-hero-fonctionnement__circle--1 { width: 572px; height: 572px; right: 120px; }
.elioz-hero-fonctionnement__circle--2 { width: 510px; height: 510px; right: 151px; }
.elioz-hero-fonctionnement__circle--3 { width: 455px; height: 455px; right: 179px; }
.elioz-hero-fonctionnement__circle--4 { width: 408px; height: 408px; right: 204px; }
.elioz-hero-fonctionnement__circle--5 { width: 359px; height: 359px; right: 229px; }
.elioz-hero-fonctionnement__circle--6 { width: 310px; height: 310px; right: 254px; }
.elioz-hero-fonctionnement__circle--7 { width: 261px; height: 261px; right: 278px; }
.elioz-hero-fonctionnement__circle--8 { width: 209px; height: 209px; right: 303px; }

/* ── Container ──────────────────────────────────────────────────────────── */
.elioz-hero-fonctionnement > .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* ── Inner layout — 2 colonnes ──────────────────────────────────────────── */
.elioz-hero-fonctionnement__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  width: 100%;
  min-height: 429px;
  padding-top: 80px;
}

/* ── Colonne gauche — texte ─────────────────────────────────────────────── */
.elioz-hero-fonctionnement__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 616px;
  flex: 1 1 auto;
  padding-bottom: 80px;
}

.elioz-hero-fonctionnement__badge {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: var(--radius-full);
  background-color: var(--color-pink);
  border: 1px solid #d0aec0;
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  color: #b2266e;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  width: fit-content;
}

.elioz-hero-fonctionnement__heading {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 3.82vw, 3.4375rem);
  font-weight: 700;
  line-height: 1.287;
  letter-spacing: -1.5px;
  color: #ffffff;
  margin: 0;
}

.elioz-hero-fonctionnement__accent {
  color: var(--color-pink);
}

.elioz-hero-fonctionnement__desc {
  font-family: var(--font-primary);
  font-size: var(--text-lg);
  line-height: 1.8;
  color: #ffffff;
  max-width: 569px;
  margin: 0;
  opacity: .92;
}

/* ── Colonne droite — illustration ancrée en bas ────────────────────────── */
.elioz-hero-fonctionnement__illustration {
  flex: 0 0 auto;
  width: clamp(200px, 21vw, 303px);
  align-self: flex-end;
  z-index: 1;
  line-height: 0;
}

.elioz-hero-fonctionnement__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 392px;
  object-fit: contain;
  object-position: bottom center;
  vertical-align: bottom;
}

/* ── Dark mode ──────────────────────────────────────────────────────────── */
[data-theme="dark"] .elioz-hero-fonctionnement {
  background: linear-gradient(90deg, var(--color-navy-dark) 22%, #a0527a 100%);
}

[data-theme="dark"] .elioz-hero-fonctionnement__badge {
  background-color: rgba(249, 218, 234, 0.15);
  border-color: rgba(208, 174, 192, 0.4);
  color: var(--color-pink);
}

/* ── Tablette ≤ 1024px ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .elioz-hero-fonctionnement__inner { gap: 32px; }
  .elioz-hero-fonctionnement__illustration { width: clamp(160px, 18vw, 240px); }
  .elioz-hero-fonctionnement__circle--1,
  .elioz-hero-fonctionnement__circle--2 { display: none; }
}

/* ── Mobile ≤ 768px ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .elioz-hero-fonctionnement {
    background: linear-gradient(160deg, #1c1468 0%, #ed8abd 100%);
  }
  .elioz-hero-fonctionnement__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 0 0;
    gap: 32px;
    min-height: auto;
  }
  .elioz-hero-fonctionnement__content {
    align-items: center;
    max-width: 100%;
    padding-bottom: 0;
  }
  .elioz-hero-fonctionnement__heading {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    letter-spacing: -0.5px;
  }
  .elioz-hero-fonctionnement__desc { max-width: 100%; }
  .elioz-hero-fonctionnement__illustration {
    width: clamp(160px, 55vw, 240px);
    align-self: center;
  }
  .elioz-hero-fonctionnement__circles { opacity: 0.4; }
}

/* ── Petit mobile ≤ 480px ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  .elioz-hero-fonctionnement__heading { font-size: 1.75rem; }
  .elioz-hero-fonctionnement__desc { font-size: var(--text-sm); }
}