/* ============================================================
 * ESSIKNETWORK — Hero Widget : réplique exacte du React HeroSection.tsx
 * Source : src/components/sections/HeroSection.tsx + src/index.css
 * AUCUNE image de fond. Fond = gradient React :
 * light: linear-gradient(#fff, rgba(255,85,0,.06), #fff)
 * Le contenu reste 100% dynamique via Elementor Controls.
 * ============================================================ */

/* Annule tout fond gris posé côté section Elementor sur la Home */
.elementor-element:has(> .elementor-widget-container > .essik-hero-section),
.elementor-section:has(.essik-hero-section),
.elementor-container:has(.essik-hero-section) {
  background: transparent !important;
  background-image: none !important;
}

.essik-hero-section {
  position: relative;
  /* PAS de background-image ici — exigence explicite */
  background: linear-gradient(to bottom, #ffffff 0%, rgba(255,242,235,.55) 50%, #ffffff 100%);
  overflow: hidden;
  padding: 7rem 0 4rem; /* pt-28 pb-16 React */
  min-height: 90vh; /* min-h-[90vh] React : garantit la zone du canvas */
  display: flex; align-items: center;
  color: #0f172a;
}
html[data-theme="dark"] .essik-hero-section,
.dark .essik-hero-section {
  background: linear-gradient(to bottom, #090B0E 0%, #0E121A 50%, #090B0E 100%);
  color: #e2e8f0;
}

/* Canvas réseau React (points orange + lignes) */
.essik-hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; opacity: .7; pointer-events: none; z-index: 1;
}
.dark .essik-hero-canvas, html[data-theme="dark"] .essik-hero-canvas { opacity: .9; }

/* Halos orange flous React */
.essik-hero-glow { position: absolute; border-radius: 9999px; filter: blur(72px); pointer-events: none; z-index: 2; }
.essik-hero-glow--tl { top: 5rem; left: 2.5rem; width: 18rem; height: 18rem; background: rgba(255,85,0,.10); }
.essik-hero-glow--br { bottom: 2.5rem; right: 2.5rem; width: 24rem; height: 24rem; background: rgba(234,88,12,.10); }

.essik-hero-container {
  position: relative; z-index: 10;
  max-width: 80rem; margin: 0 auto; padding: 0 1rem; width: 100%;
}
@media(min-width:1024px){ .essik-hero-container{ padding: 0 2rem; } }

.essik-hero-grid {
  display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center;
}
@media(min-width:1024px){ .essik-hero-grid{ grid-template-columns: 7fr 5fr; gap: 2rem; } }

.essik-hero-left { display: flex; flex-direction: column; gap: 1.75rem; text-align: center; }
@media(min-width:1024px){ .essik-hero-left{ text-align: left; } }
html[dir="rtl"] .essik-hero-left{ text-align: center; }
@media(min-width:1024px){ html[dir="rtl"] .essik-hero-left{ text-align: right; } }

/* Badge pastille React */
.essik-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .375rem .875rem; border-radius: 9999px;
  background: #FFF7ED; border: 1px solid #FED7AA;
  color: #FF5500; font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  box-shadow: 0 1px 2px rgba(0,0,0,.05); width: fit-content; margin: 0 auto;
}
@media(min-width:1024px){ .essik-badge{ margin: 0; } }
html[data-theme="dark"] .essik-badge, .dark .essik-badge { background: rgba(255,85,0,.12); border-color: rgba(255,85,0,.35); }
.essik-badge .essik-badge-dot { width: .5rem; height: .5rem; border-radius: 9999px; background: #FF5500; animation: essik-pulse 2s infinite; }
@keyframes essik-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* Titre React : 30px→36px→48px→52px, black, highlight orange + soulignement SVG */
.essik-hero-title {
  margin: 0; font-weight: 900; letter-spacing: -.02em; line-height: 1.15;
  font-size: 1.875rem; color: #0f172a;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
html[dir="rtl"] .essik-hero-title{ font-family: 'Cairo', sans-serif; }
@media(min-width:640px){ .essik-hero-title{ font-size: 2.25rem; } }
@media(min-width:768px){ .essik-hero-title{ font-size: 3rem; } }
@media(min-width:1024px){ .essik-hero-title{ font-size: 52px; } }
html[data-theme="dark"] .essik-hero-title, .dark .essik-hero-title{ color: #fff; }
.essik-hero-title .essik-hl { position: relative; display: inline-block; color: #FF5500; }
.essik-hero-title .essik-hl svg { position: absolute; left: 0; bottom: -.5rem; width: 100%; height: .5rem; color: rgba(255,85,0,.3); z-index: -1; }

.essik-hero-description { margin: 0; font-size: 1rem; line-height: 1.7; color: #475569; max-width: 42rem; }
@media(min-width:640px){ .essik-hero-description{ font-size: 1.125rem; } }
html[data-theme="dark"] .essik-hero-description, .dark .essik-hero-description{ color: #cbd5e1; }
.essik-hero-left .essik-hero-description{ margin-left: auto; margin-right: auto; }
@media(min-width:1024px){ .essik-hero-left .essik-hero-description{ margin-left: 0; margin-right: 0; } }

/* Boutons React */
.essik-hero-buttons { display: flex; flex-direction: column; gap: 1rem; align-items: center; padding-top: .5rem; }
@media(min-width:640px){ .essik-hero-buttons{ flex-direction: row; justify-content: center; } }
@media(min-width:1024px){ .essik-hero-buttons{ justify-content: flex-start; } }
.essik-hero-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  padding: .875rem 1.75rem; border-radius: .75rem; font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; text-decoration: none; transition: .2s; width: 100%;
}
@media(min-width:640px){ .essik-hero-btn{ width: auto; } }
.essik-hero-btn-primary { background: #FF5500; color: #fff; box-shadow: 0 10px 25px rgba(255,85,0,.25); }
.essik-hero-btn-primary:hover { background: #E04B00; color: #fff; }
.essik-hero-btn-secondary { background: #fff; color: #1e293b; border: 1px solid #e2e8f0; box-shadow: 0 1px 2px rgba(0,0,0,.05); text-transform: none; font-size: .875rem; font-weight: 600; letter-spacing: 0; }
html[data-theme="dark"] .essik-hero-btn-secondary, .dark .essik-hero-btn-secondary{ background: #12161F; color: #fff; border-color: #1F2633; }
.essik-hero-btn-secondary:hover { color: #FF5500; border-color: rgba(255,85,0,.4); }

/* Checklist React */
.essik-hero-checklist { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding: 1rem 0 0; margin: 0; justify-content: center; font-size: .75rem; font-weight: 500; color: #64748b; }
@media(min-width:1024px){ .essik-hero-checklist{ justify-content: flex-start; } }
html[data-theme="dark"] .essik-hero-checklist, .dark .essik-hero-checklist{ color: #94a3b8; }
.essik-hero-checklist li{ display: inline-flex; align-items: center; gap: .375rem; }
.essik-hero-checklist .essik-check{ color: #FF5500; font-weight: 800; }

/* ---- Colonne droite : carte dashboard React ---- */
.essik-hero-visual{ position: relative; }
.essik-hero-visual-inner{ position: relative; margin: 0 auto; max-width: 28rem; }
@media(min-width:1024px){ .essik-hero-visual-inner{ max-width: none; } }
.essik-hero-glowframe { position: absolute; inset: -4px; border-radius: 1.5rem; background: linear-gradient(to top right, #FF5500, #171717); opacity: .2; filter: blur(24px); }
.essik-dashcard {
  position: relative; border-radius: 1rem; padding: 1.5rem;
  background: rgba(255,255,255,.9); backdrop-filter: blur(24px);
  border: 1px solid #e2e8f0; box-shadow: 0 25px 50px rgba(0,0,0,.12);
  display: flex; flex-direction: column; gap: 1.5rem;
}
html[data-theme="dark"] .essik-dashcard, .dark .essik-dashcard{ background: rgba(18,22,31,.9); border-color: #1F2633; }
.essik-dash-top{ display: flex; align-items: center; gap: .625rem; padding-bottom: 1rem; border-bottom: 1px solid #f1f5f9; }
html[data-theme="dark"] .essik-dash-top, .dark .essik-dash-top{ border-color: #1e293b; }
.essik-dot{ width: .75rem; height: .75rem; border-radius: 9999px; }
.essik-dot--r{ background: #f87171; } .essik-dot--a{ background: #fbbf24; } .essik-dot--g{ background: #34d399; }
.essik-brandmark{ text-align: center; padding: .5rem 0; }
.essik-brandmark .essik-bm-name{ font-weight: 900; letter-spacing: .12em; color: #FF5500; font-size: 1.6rem; line-height: 1; }
.essik-brandmark .essik-bm-sub{ font-weight: 800; letter-spacing: .35em; color: #0f172a; font-size: .8rem; }
html[data-theme="dark"] .essik-brandmark .essik-bm-sub, .dark .essik-brandmark .essik-bm-sub{ color: #fff; }
.essik-brandmark .essik-bm-tag{ font-size: .6rem; letter-spacing: .14em; color: #94a3b8; text-transform: uppercase; margin-top: .25rem; }
.essik-dash-metrics{ display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; padding-top: .5rem; }
.essik-metric{ padding: .875rem; border-radius: .75rem; border: 1px solid #f1f5f9; text-align: left; }
html[dir="rtl"] .essik-metric{ text-align: right; }
.essik-metric--accent{ background: rgba(255,247,237,.7); border-color: #ffedd5; }
html[data-theme="dark"] .essik-metric, .dark .essik-metric{ background: #161B26; border-color: #1e293b; }
.essik-metric .essik-m-head{ display: flex; align-items: center; justify-content: space-between; font-size: .72rem; color: #64748b; margin-bottom: .25rem; }
.essik-metric .essik-m-val{ font-size: 1.25rem; font-weight: 900; color: #0f172a; }
html[data-theme="dark"] .essik-metric .essik-m-val, .dark .essik-metric .essik-m-val{ color: #fff; }
.essik-metric .essik-m-sub{ font-size: .62rem; margin-top: .125rem; color: #64748b; }
.essik-metric .essik-m-sub--ok{ color: #059669; }
.essik-pills-label{ font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; }
.essik-pills{ display: flex; flex-wrap: wrap; gap: .375rem; }
.essik-pill{ padding: .25rem .625rem; font-size: .68rem; font-weight: 600; border-radius: .5rem; background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0; }
html[data-theme="dark"] .essik-pill, .dark .essik-pill{ background: #1e293b; color: #cbd5e1; border-color: rgba(51,65,85,.6); }
.essik-microbar{ padding: .75rem; border-radius: .75rem; background: linear-gradient(to right, #f97316, #FF5500); color: #fff; display: flex; align-items: center; justify-content: space-between; font-size: .72rem; box-shadow: 0 4px 12px rgba(255,85,0,.3); }
.essik-microbar a{ color: #fff; font-weight: 800; font-size: .68rem; }