/* ============================================================
 * ESSIKNETWORK — Fil d'Ariane + titre (hero compact, UI Essik).
 * Badge pill orange + H1 + miettes pills. Light/dark via
 * html[data-theme="dark"], couleurs via variables admin.
 * ============================================================ */
.essik-crumb-hero { position: relative; overflow: hidden; padding: 3.5rem 1rem 2.75rem; background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 55%, #ffffff 100%); border-bottom: 1px solid #e2e8f0; }
.essik-crumb-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(15,23,42,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.05) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(ellipse 70% 90% at 50% 0%, #000 30%, transparent 75%); pointer-events: none; }
.essik-crumb-glow { position: absolute; width: 22rem; height: 22rem; border-radius: 9999px; filter: blur(72px); pointer-events: none; }
.essik-crumb-glow-l { top: -8rem; left: -6rem; background: rgba(255,85,0,.10); }
.essik-crumb-glow-r { top: -6rem; right: -4rem; background: rgba(255,85,0,.07); }
.essik-crumb-container { position: relative; z-index: 1; max-width: 80rem; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.essik-crumb-badge { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .85rem; border-radius: 9999px; background: rgba(255,85,0,.1); color: #FF5500; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.essik-crumb-badge svg { display: block; }
.essik-crumb-title { margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; color: #0A0D12; line-height: 1.2; max-width: 48rem; }
@media (min-width: 768px) { .essik-crumb-title { font-size: 2.75rem; } }
.essik-crumb-nav { width: 100%; display: flex; justify-content: center; }
.essik-crumb-list { list-style: none; margin: 0; padding: 0; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 9999px; padding: .4rem .4rem .4rem 1rem; box-shadow: 0 4px 14px rgba(2,6,23,.06); max-width: 100%; }
.essik-crumb-item { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; }
.essik-crumb-link { color: #475569; text-decoration: none; font-weight: 600; padding: .25rem .5rem; border-radius: 9999px; }
.essik-crumb-link:hover { color: #FF5500; background: rgba(255,85,0,.08); }
.essik-crumb-current { color: #fff; background: #FF5500; font-weight: 700; padding: .3rem .85rem; border-radius: 9999px; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
.essik-crumb-sep { color: #cbd5e1; font-weight: 700; }

/* ---------- Widget Titre + Fil d'Ariane : alignement piloté par
   text-align (Gauche/Centré/Droite) — le conteneur passe en bloc
   pour que text-align suffise (miettes = inline-flex). ---------- */
.essik-page-header-widget .essik-crumb-container { display: block; }
.essik-page-header-widget .essik-crumb-title { margin-left: auto; margin-right: auto; }
.essik-page-header-widget .essik-crumb-container[style*="text-align: left"] .essik-crumb-title,
.essik-page-header-widget .essik-crumb-container[style*="text-align:left"] .essik-crumb-title { margin-left: 0; }
.essik-page-header-widget .essik-crumb-container[style*="text-align: right"] .essik-crumb-title,
.essik-page-header-widget .essik-crumb-container[style*="text-align:right"] .essik-crumb-title { margin-right: 0; }
.essik-page-header-widget .essik-crumb-nav { display: block; }

/* ---------- Dark mode (toggle Essik) ---------- */
html[data-theme="dark"] .essik-crumb-hero { background: linear-gradient(180deg, #090B0E 0%, #0F1218 60%, #0C0F15 100%); border-bottom-color: #1e293b; }
html[data-theme="dark"] .essik-crumb-hero::before { background-image: linear-gradient(rgba(148,163,184,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.07) 1px, transparent 1px); }
html[data-theme="dark"] .essik-crumb-title { color: #fff; }
html[data-theme="dark"] .essik-crumb-list { background: #12161F; border-color: #1F2633; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
html[data-theme="dark"] .essik-crumb-link { color: #94a3b8; }
html[data-theme="dark"] .essik-crumb-link:hover { color: #FF5500; background: rgba(255,85,0,.12); }
html[data-theme="dark"] .essik-crumb-sep { color: #475569; }