/* Why — 6 piliers comme React WhyEssikSection */
.essik-why-section { padding: 5rem 1.25rem; background: #fff; }
.essik-why-head { text-align: center; max-width: 48rem; margin: 0 auto 4rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.essik-why-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .75rem; border-radius: 9999px; background: rgba(255,85,0,.08); color: #FF5500; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.essik-why-badge svg { display: block; }
.essik-why-head .essik-section-title { margin: 0; font-size: 1.875rem; font-weight: 800; color: #0f172a; letter-spacing: -.01em; }
@media (min-width: 768px) { .essik-why-head .essik-section-title { font-size: 2.25rem; } }
.essik-why-head .essik-section-subtitle { margin: 0; font-size: 1rem; color: #475569; line-height: 1.7; }
.essik-why-grid { max-width: 80rem; margin: 0 auto; display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .essik-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .essik-why-grid { grid-template-columns: repeat(3, 1fr); } }
.essik-why-card { border-radius: 1rem; background: rgba(248,250,252,.7); border: 1px solid #e2e8f0; padding: 1.75rem; }
.essik-why-card:hover { border-color: var(--essik-why-card-hover-border, rgba(255,85,0,.5)); background: var(--essik-why-card-hover-bg, #fff); box-shadow: 0 10px 25px rgba(0,0,0,.08); }
.essik-why-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.essik-why-icon { width: 3rem; height: 3rem; border-radius: .75rem; background: rgba(255,85,0,.12); color: #FF5500; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.essik-why-card:hover .essik-why-icon { background: var(--essik-why-icon-hover-bg, #FF5500); color: var(--essik-why-icon-hover-color, #fff); }
/* FontAwesome (fill) + Lucide (stroke) héritent de l'orange React */
.essik-why-icon svg.e-font-icon-svg { fill: currentColor; width: 1.5rem; height: 1.5rem; display: block; }
.essik-why-icon svg.essik-lucide { stroke: currentColor; display: block; }
.essik-why-icon .essik-icon-fallback { font-weight: 800; font-size: 1.25rem; }
.essik-why-tag { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; background: #fff; padding: .35rem .6rem; border-radius: .4rem; border: 1px solid #f1f5f9; }
.essik-why-title { font-size: 1.125rem; font-weight: 700; color: #0f172a; margin: 0 0 .75rem; }
.essik-why-card:hover .essik-why-title { color: var(--essik-why-title-hover-color, #FF5500); }
.essik-why-text { font-size: .875rem; color: #475569; line-height: 1.7; margin: 0; }
/* Ligne « En savoir plus → » révélée au survol (React) */
.essik-why-more { display: flex; align-items: center; gap: .4rem; padding-top: 1.25rem; margin-top: 1.25rem; border-top: 1px solid rgba(226,232,240,.6); font-size: .75rem; font-weight: 600; color: #FF5500; opacity: 0; transition: opacity .3s ease; }
.essik-why-card:hover .essik-why-more { opacity: 1; }
.essik-why-more svg { transition: transform .2s ease; }
.essik-why-card:hover .essik-why-more svg { transform: translateX(4px); }
/* ---------- Dark mode (toggle Essik) ---------- */
html[data-theme="dark"] .essik-why-section { background: #090B0E; }
html[data-theme="dark"] .essik-why-head .essik-section-title { color: #fff; }
html[data-theme="dark"] .essik-why-head .essik-section-subtitle { color: #cbd5e1; }
html[data-theme="dark"] .essik-why-card { background: #12161F; border-color: #1F2633; }
html[data-theme="dark"] .essik-why-card:hover { background: #151A24; border-color: rgba(255,85,0,.5); }
html[data-theme="dark"] .essik-why-title { color: #fff; }
html[data-theme="dark"] .essik-why-text { color: #cbd5e1; }
html[data-theme="dark"] .essik-why-tag { background: #1e293b; border-color: #334155; color: #94a3b8; }
html[data-theme="dark"] .essik-why-more { border-top-color: rgba(30,41,59,.8); }