/* ═══════════════════════════════════════════════════════════════════════════
   PAGE : Elioz Connect — Toutes sections
   Couleur dominante : Bleu électrique #1000F0 (vs Elioz Pro : #5000B3)
   v1.3.0 — elioz-theme
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   1. HERO (684-3321)
   ───────────────────────────────────────────────────────────────────────── */
.ec-hero { background-color: #fbfdfe; padding: 64px 0; overflow: hidden; }
.ec-hero__inner { display: flex; align-items: center; gap: 64px; }
.ec-hero__content { flex: 1 1 auto; max-width: 659px; display: flex; flex-direction: column; gap: 20px; }
.ec-hero__badges { display: flex; gap: 20px; }
.ec-hero__badge {
  display: inline-flex; align-items: center; padding: 10px 16px;
  border-radius: var(--radius-full); font-family: var(--font-primary);
  font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}
.ec-hero__badge--blue { background-color: #1000f0; color: #fbfdfe; box-shadow: 0 4px 5px rgba(16,0,240,.15); }
.ec-hero__badge--pink { background-color: var(--color-pink); color: #c41852; border: 1px solid #f9daea; box-shadow: 0 4px 5px rgba(196,24,82,.1); }
.ec-hero__h1 { font-family: var(--font-primary); font-size: clamp(2rem, 2.92vw, 42px); font-weight: 900; line-height: 1; color: var(--color-navy); margin: 0; }
.ec-hero__h1-accent { color: #1000f0; }
.ec-hero__h2 { font-family: var(--font-primary); font-size: clamp(1.25rem, 1.94vw, 28px); font-weight: 900; line-height: 1; color: var(--color-navy); margin: 0; }
.ec-hero__desc { font-family: var(--font-primary); font-size: 24px; font-weight: 400; line-height: 1.5; color: var(--color-navy); margin: 0; }
.ec-hero__ctas { display: flex; align-items: center; gap: 24px; padding: 20px 0; flex-wrap: wrap; }
.ec-hero__btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; padding: 0 27px; border-radius: 30px;
  font-family: var(--font-primary); font-size: 18px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.ec-hero__btn:hover { opacity: .85; transform: translateY(-1px); background: initial; }
.ec-hero__btn--primary { background-color: #1000f0; color: #ffffff; box-shadow: 0 4px 12.5px rgba(0,22,246,.25); }
.ec-hero__btn--outline { border: 2px solid #011679; color: #011679; background: transparent; min-width: 300px; box-shadow: 0 4px 25px rgba(0,22,246,.25); }
.ec-hero__visual { position: relative; flex: 100%; width: clamp(280px, 48vw, 714px); }
.ec-hero__circle {
  position: absolute; width: 500px; height: 500px; border-radius: 50%;
  top: 50%; left: 50%; transform: translate(-30%, -40%);
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'><defs><radialGradient id='g'><stop offset='0' stop-color='%23e0e8ff'/><stop offset='1' stop-color='%23f0f4ff' stop-opacity='0'/></radialGradient></defs><circle cx='250' cy='250' r='250' fill='url(%23g)'/></svg>");
  z-index: 0;
}
.ec-hero__scene { position: relative; z-index: 1; width: 100%; height: auto; object-fit: contain; border-radius: 13px; }
.ec-hero__chip {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  background: #fbfdfe; border: 1px solid #d3d5e4;
  box-shadow: 0 0 5px rgba(11,0,163,.1);
  font-family: var(--font-primary); font-size: 14px; color: var(--color-navy);
  white-space: nowrap;
}
.ec-hero__chip--1 { top: 5%; right: -5%; }
.ec-hero__chip--2 { top: 11%; left: -2%; }
.ec-hero__chip--3 { bottom: 5%; right: 5%; }
.ec-hero__chip--4 { bottom: 8%; left: 5%; }

/* ─────────────────────────────────────────────────────────────────────────
   2. POUR QUI (1310-6629)
   ───────────────────────────────────────────────────────────────────────── */
.ec-pourqui { background-color: #fbfdfe; padding: 50px 0 100px; }
.ec-pourqui__header { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 64px; }
.ec-pourqui__badge {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 10px 16px; border-radius: var(--radius-full);
  background-color: var(--color-pink); border: 1px solid #ffffff;
  font-family: var(--font-primary); font-size: 14px; font-weight: 500;
  color: #c41952; text-transform: uppercase;
}
.ec-pourqui__dot { width: 8px; height: 8px; border-radius: 50%; background: #c41952; display: inline-block; }
.ec-pourqui__titre { font-family: var(--font-primary); font-size: clamp(2rem, 2.92vw, 42px); font-weight: 900; color: var(--color-navy); text-align: center; margin: 0; }
.ec-pourqui__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; }
.ec-pourqui__card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 32px 18px; border-radius: 16px;
  background: #eef2ff; border: 1px solid #becdff; text-align: center;
}
.ec-pourqui__card-avatar { position: relative; width: 64px; height: 64px; }
.ec-pourqui__card-avatar::before {
  content: ''; display: block; width: 64px; height: 64px;
  border-radius: 50%; background-color: #ffffff; position: absolute;
}
.ec-pourqui__card-emoji { position: relative; z-index: 1; font-size: 32px; line-height: 64px; display: block; text-align: center; }
.ec-pourqui__card-titre { font-family: var(--font-primary); font-size: 24px; font-weight: 900; line-height: 1.33; color: var(--color-navy); margin: 0; }
.ec-pourqui__card-texte { font-family: var(--font-primary); font-size: 16px; font-weight: 400; line-height: 1.625; color: #656b9f; margin: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   3. FAIT POUR VOUS SI (1310-6604)
   ───────────────────────────────────────────────────────────────────────── */
.ec-faits {
  padding: 80px 0;
  background: radial-gradient(ellipse 130% 110% at 100% 0%, #f9daea 0%, #fff6fb 56%, #ffe2f1 100%);
}
.ec-faits__titre { font-family: var(--font-primary); font-size: clamp(2rem, 2.92vw, 42px); font-weight: 900; color: var(--color-navy); text-align: center; margin: 0 0 40px; }
.ec-faits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ec-faits__card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 40px 33px; border-radius: 16px;
  background: #ffffff; border: 1px solid #d3d5e4;
  box-shadow: 0 5px 15px rgba(98,0,178,.05);
}
.ec-faits__card-top { display: flex; align-items: center; gap: 20px; align-content: center; }
.ec-faits__card-icon { font-size: 40px; flex: 0 0 48px; line-height: 1; color: #1000f0; }
.ec-faits__card-titre { font-family: var(--font-primary); font-size: 17px; font-weight: 700; line-height: 1.6; color: #1000f0; margin: 0; padding-top: 4px; }
.ec-faits__card-texte { font-family: var(--font-primary); font-size: 13.5px; font-weight: 400; line-height: 1.7; color: var(--color-navy); margin: 0; text-align: justify; }
.ec-faits__card-texte strong { font-weight: 700; }

/* ─────────────────────────────────────────────────────────────────────────
   4. VIDÉO (703-3476) — fond bleu électrique
   ───────────────────────────────────────────────────────────────────────── */
.ec-video { background-color: #1000f0; padding: 100px 0; }
.ec-video .container { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ec-video__titre { font-family: var(--font-primary); font-size: clamp(2rem, 2.92vw, 42px); font-weight: 700; line-height: 1; color: #fffaff; margin: 0; }
.ec-video__sous-titre { font-family: var(--font-primary); font-size: 24px; font-weight: 400; line-height: 1.5; color: #ffffff; margin: 0 0 20px; }
.ec-video__player { position: relative; width: 689px; max-width: 100%; border-radius: 30px; overflow: hidden; border: 10px solid #181a20; }
.ec-video__iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   5. DÉPLOIEMENT (684-3354)
   ───────────────────────────────────────────────────────────────────────── */
.ec-deploiement { background-color: #fbfdfe; padding: 100px 0; }
.ec-deploiement__inner { display: flex; align-items: center; gap: 64px; }
.ec-deploiement__content { flex: 1 1 auto; display: flex; flex-direction: column; gap: 20px; }
.ec-deploiement__badges { display: flex; gap: 20px; flex-wrap: wrap; }
.ec-deploiement__badge {
  display: inline-flex; align-items: center; padding: 10px 16px;
  border-radius: var(--radius-full); font-family: var(--font-primary);
  font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.ec-deploiement__badge--blue { background: #1000f0; color: #fbfdfe; border: 1px solid #a099ff; box-shadow: 0 4px 5px rgba(16,0,240,.15); }
.ec-deploiement__badge--grey { background: #f2f3f7; color: #4b4e63; border: 1px solid #e0e0e0; }
.ec-deploiement__titre { font-family: var(--font-primary); font-size: clamp(2rem, 2.92vw, 42px); font-weight: 900; line-height: 1; color: var(--color-navy); margin: 0; }
.ec-deploiement__etapes { display: flex; flex-direction: column; gap: 20px; }
.ec-deploiement__etape {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 18px 24px; border-radius: 18px;
  background: #ffffff; border: 1px solid #d3d5e4;
}
.ec-deploiement__etape-icon { font-size: 32px; flex: 0 0 auto; line-height: 1; color: #1000f0; }
.ec-deploiement__etape-body { display: flex; flex-direction: column; gap: 4px; }
.ec-deploiement__etape-titre { font-family: var(--font-primary); font-size: 20px; font-weight: 600; line-height: 1.6; color: #1000f0; margin: 0; }
.ec-deploiement__etape-desc { font-family: var(--font-primary); font-size: 14px; font-weight: 400; line-height: 1.714; color: #656b9f; margin: 0; }
.ec-deploiement__visual { flex: 0 0 auto; width: 400px; }
.ec-deploiement__visual img { width: 100%; height: auto; border-radius: 13px; }

/* ─────────────────────────────────────────────────────────────────────────
   6. CLIENTS (684-3378)
   ───────────────────────────────────────────────────────────────────────── */
.ec-clients { background: #ffffff; padding: 100px 0; }
.ec-clients .container { display: flex; flex-direction: column; align-items: center; gap: 45px; }
.ec-clients__badge {
  display: inline-flex; align-items: center; padding: 10px 16px;
  border-radius: var(--radius-full); background: #1000f0;
  font-family: var(--font-primary); font-size: 14px; font-weight: 500;
  color: #fbfdfe; text-transform: uppercase; letter-spacing: .06em;
  box-shadow: 0 4px 10px rgba(16,0,240,.2);
}
.ec-clients__titre { font-family: var(--font-primary); font-size: clamp(2rem, 2.92vw, 42px); font-weight: 700; line-height: 1; color: var(--color-navy); text-align: center; margin: 0; }
.ec-clients__logos { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; }
.ec-clients__logo img { max-height: 76px; width: auto; object-fit: contain; filter: grayscale(20%); transition: filter var(--transition-fast); }
.ec-clients__logo img:hover { filter: none; }

/* ─────────────────────────────────────────────────────────────────────────
   7. FAQ + CTA (1155-909)
   ───────────────────────────────────────────────────────────────────────── */
.ec-faq { background-color: #fbfdfe; padding: 80px 0; }
.ec-faq__layout { display: flex; gap: 129px; align-items: flex-start; margin-bottom: 80px; }
.ec-faq__header { flex: 1 1 auto; display: flex; flex-direction: column; gap: 20px; max-width: 350px; }
.ec-faq__badge {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 10px 16px; border-radius: var(--radius-full);
  background: var(--color-pink); border: 1px solid #ffffff;
  font-family: var(--font-primary); font-size: 14px; font-weight: 500;
  color: #c41952; text-transform: uppercase; width: fit-content;
}
.ec-faq__dot { width: 8px; height: 8px; border-radius: 50%; background: #c41952; display: inline-block; }
.ec-faq__titre { font-family: var(--font-primary); font-size: clamp(2rem, 2.92vw, 42px); font-weight: 900; color: var(--color-navy); margin: 0; }
.ec-faq__sous-titre { font-family: var(--font-primary); font-size: 16px; font-weight: 400; line-height: 1.625; color: #656b9f; margin: 0; }
.ec-faq__accordeon { flex: 0 0 792px; display: flex; flex-direction: column; gap: 20px; }
.ec-faq__item { background: #ffffff; border: 1px solid #eeeeee; border-radius: 15px; overflow: hidden; }
.ec-faq__question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 15px;
  padding: 0 30px; height: 90px; background: none; border: none; cursor: pointer;
  font-family: var(--font-primary); font-size: 20px; font-weight: 600; color: #011679; text-align: left;
  transition: background var(--transition-fast);
}
.ec-faq__question:hover { background: #fafafa; }
.ec-faq__chevron { flex: 0 0 24px; transition: transform var(--transition-normal); }
.ec-faq__question[aria-expanded="true"] .ec-faq__chevron { transform: rotate(180deg); }
.ec-faq__reponse { padding: 0 30px 20px; font-family: var(--font-primary); font-size: 16px; color: var(--color-navy); line-height: 1.75; }
.ec-faq__reponse p { margin: 0; }
/* CTA Banner */
.ec-faq__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 23px;
  padding: 64px; border-radius: 25px; border: 2px solid var(--color-pink);
  background: radial-gradient(ellipse 120% 120% at 100% 0%, #f9daea 0%, #fff6fb 56%, #ffe2f1 100%);
}
.ec-faq__cta-titre { font-family: var(--font-primary); font-size: clamp(1.75rem, 2.92vw, 42px); font-weight: 700; color: var(--color-navy); margin: 0; max-width: 540px; }
.ec-faq__cta-right { display: flex; flex-direction: column; align-items: flex-end; gap: 23px; }
.ec-faq__cta-liste { font-family: var(--font-primary); font-size: 18px; line-height: 1.667; color: var(--color-navy); text-align: right; margin: 0; }
.ec-faq__cta-btn {
  display: inline-flex; align-items: center; gap: 20px;
  padding: 18px 24px; border-radius: 1000px;
  background: var(--color-navy); border: 1px solid #938cda;
  font-family: var(--font-primary); font-size: 20px; font-weight: 500;
  color: #fffaff; text-decoration: none; white-space: nowrap;
  transition: opacity var(--transition-fast);
}
.ec-faq__cta-btn:hover { opacity: .85; background: var(--color-navy); color: #fffaff; }

/* ─────────────────────────────────────────────────────────────────────────
   DARK MODE
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] .ec-hero,
[data-theme="dark"] .ec-deploiement,
[data-theme="dark"] .ec-faq { background-color: var(--color-black); }
[data-theme="dark"] .ec-hero__h1, [data-theme="dark"] .ec-hero__h2, [data-theme="dark"] .ec-hero__desc { color: #fffaff; }
[data-theme="dark"] .ec-pourqui { background-color: var(--color-navy); }
[data-theme="dark"] .ec-pourqui__titre { color: #fffaff; }
[data-theme="dark"] .ec-pourqui__card { background: rgba(238,242,255,.1); border-color: rgba(190,205,255,.3); }
[data-theme="dark"] .ec-pourqui__card-titre { color: #fffaff; }
[data-theme="dark"] .ec-faits { background: var(--color-navy-dark); }
[data-theme="dark"] .ec-faits__titre { color: #fffaff; }
[data-theme="dark"] .ec-faits__card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .ec-faits__card-titre { color: #fffaff; }
[data-theme="dark"] .ec-faits__card-texte { color: #fffaff; }
[data-theme="dark"] .ec-clients { background-color: var(--color-black); }
[data-theme="dark"] .ec-clients__titre { color: #fffaff; }
[data-theme="dark"] .ec-deploiement__titre { color: #fffaff; }
[data-theme="dark"] .ec-deploiement__etape { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .ec-deploiement__etape-titre { color: #fffaff; }
[data-theme="dark"] .ec-faq__titre { color: #fffaff; }
[data-theme="dark"] .ec-faq__item { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .ec-faq__question { color: #fffaff; }
[data-theme="dark"] .ec-faq__reponse { color: #fffaff; }

/* ─────────────────────────────────────────────────────────────────────────
   RESPONSIVE ≤ 1024px
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ec-hero__inner, .ec-deploiement__inner { flex-direction: column; }
  .ec-hero__visual { width: 80%; }
  .ec-hero__chip { display: none; }
  .ec-pourqui__grid, .ec-faits__grid { grid-template-columns: 1fr; }
  .ec-pourqui__grid { gap: 24px; }
  .ec-deploiement__visual { width: 100%; max-width: 400px; }
  .ec-faq__layout { flex-direction: column; gap: 40px; }
  .ec-faq__accordeon { flex: none; width: 100%; }
  .ec-faq__cta { flex-direction: column; text-align: center; }
  .ec-faq__cta-right { align-items: center; }
  .ec-faq__cta-liste { text-align: center; }
}

/* ─────────────────────────────────────────────────────────────────────────
   RESPONSIVE ≤ 768px
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ec-hero { padding: 48px 0; }
  .ec-hero__content { text-align: center; align-items: center; }
  .ec-hero__badges { justify-content: center; }
  .ec-hero__ctas { flex-direction: column; align-items: center; }
  .ec-hero__btn { width: 100%; max-width: 320px; min-width: unset; }
  .ec-video__player { width: 100%; }
  .ec-clients__logos { gap: 24px; }
  .ec-faq__cta { padding: 32px 24px; }
}