/* IWELAH V14 - style.css (site public) : mobile d'abord, theme sombre. */
:root {
  --bg: #0a1020; --bg-soft: #0f172b; --card: #151f35; --card-hi: #1b2742; --line: #223152;
  --fg: #eef3ff; --fg-soft: #aab7d4; --muted: #7482a3;
  --accent: #4f8cff; --accent-hi: #6ea2ff; --accent-2: #8b5cf6; --accent-soft: #1b3a6e;
  --ok: #2ecc71; --warn: #f5a623; --err: #ef5350;
  --radius: 16px; --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --max: 1180px;
  --font: system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial,sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--font); line-height: 1.6; }
body { min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); text-decoration: underline; }
img, svg { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
main { flex: 1; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 20px; width: 100%; }
.container.narrow { max-width: 820px; }

/* ---- HEADER ---- */
header.site { position: sticky; top: 0; z-index: 50; background: rgba(10,16,32,.86); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid #172340; }
header.site .row { display: flex; align-items: center; gap: 16px; min-height: 64px; }
header.site .brand { font-weight: 800; font-size: 1.18rem; color: var(--fg); display: flex; align-items: center; gap: 9px; letter-spacing: .02em; }
header.site .brand:hover { text-decoration: none; }
header.site .brand svg { width: 28px; height: 28px; }
header.site nav { display: flex; gap: 18px; margin-inline-start: auto; align-items: center; }
header.site nav a { color: var(--fg-soft); font-size: .94rem; font-weight: 500; }
header.site nav a:hover { color: var(--fg); text-decoration: none; }
header.site nav a.nav-cta { color: #fff; padding: 9px 16px; }
header.site .selectors { display: flex; gap: 6px; align-items: center; }
header.site select { background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 7px 8px; font-size: .88rem; min-height: 38px; }
.nav-toggle { display: none; margin-inline-start: auto; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer; padding: 11px 10px; flex-direction: column; justify-content: space-between; }
.nav-toggle span { display: block; height: 2px; background: var(--fg); border-radius: 2px; }

/* ---- HERO ---- */
.hero { position: relative; padding: 76px 0 56px; text-align: center; overflow: hidden;
  background: radial-gradient(900px 420px at 50% -80px, rgba(79,140,255,.28), transparent 70%),
              radial-gradient(600px 300px at 90% 10%, rgba(139,92,246,.18), transparent 70%); }
.hero h1 { font-size: clamp(2rem, 5vw, 3.3rem); line-height: 1.12; margin: 0 auto 16px; letter-spacing: -.02em; max-width: 880px;
  background: linear-gradient(180deg, #fff, #c9d8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { color: var(--fg-soft); font-size: clamp(1rem, 2.2vw, 1.15rem); max-width: 720px; margin: 0 auto 28px; }
.hero .cta-row, .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.chips { list-style: none; padding: 0; margin: 0 auto 22px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chips li { background: rgba(79,140,255,.12); border: 1px solid rgba(79,140,255,.3); color: #cfe0ff; padding: 5px 12px; border-radius: 999px; font-size: .82rem; font-weight: 600; }

/* ---- BUTTONS ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; min-height: 44px; border-radius: 12px; border: 1px solid transparent; font-weight: 700; font-size: .96rem; cursor: pointer; transition: transform .12s, background .15s, box-shadow .15s; text-align: center; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn.primary { background: linear-gradient(135deg, var(--accent), #3b6fe0); color: #fff; box-shadow: 0 6px 20px rgba(79,140,255,.28); }
.btn.primary:hover { color: #fff; box-shadow: 0 8px 26px rgba(79,140,255,.4); }
.btn.ghost { background: rgba(255,255,255,.03); color: var(--fg); border-color: #2c3d63; }
.btn.ghost:hover { background: var(--card); color: var(--fg); }
.btn.big { padding: 14px 26px; font-size: 1.02rem; min-height: 52px; }

/* ---- SECTIONS ---- */
section.block { padding: 56px 0; border-top: 1px solid #121c34; }
section.block h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); margin: 0 0 8px; letter-spacing: -.01em; }
section.block p.sub { color: var(--fg-soft); margin: 0 0 26px; max-width: 760px; }
.split { display: grid; gap: 28px; grid-template-columns: 1.1fr 1fr; align-items: center; }
.scan-promo { background: linear-gradient(135deg, rgba(79,140,255,.08), rgba(139,92,246,.08)); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: s; }
.steps li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; gap: 12px; align-items: center; color: var(--fg-soft); }
.steps li strong { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; }

/* ---- GRID / CARDS ---- */
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; transition: transform .15s, border-color .15s, background .15s; display: flex; flex-direction: column; gap: 8px; color: var(--fg); }
a.card:hover { background: var(--card-hi); border-color: #34497a; transform: translateY(-2px); text-decoration: none; color: var(--fg); }
.card h3 { font-size: 1.02rem; margin: 0; }
.card p { color: var(--fg-soft); font-size: .9rem; margin: 0; flex: 1; }
.card .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.card .ico { font-size: 1.5rem; width: 44px; height: 44px; display: grid; place-items: center; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; }
.card.hi { border: 2px solid var(--accent); box-shadow: 0 12px 40px rgba(79,140,255,.15); }
.card .big { font-size: 1.8rem; font-weight: 800; color: var(--fg); flex: 0; }
.card .big small { font-size: .85rem; font-weight: 500; color: var(--fg-soft); }

/* Categories (details) */
details.cat { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 12px; }
details.cat > summary { list-style: none; cursor: pointer; padding: 14px 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; min-height: 52px; }
details.cat > summary::-webkit-details-marker { display: none; }
details.cat > summary::after { content: "▾"; margin-inline-start: auto; color: var(--muted); transition: transform .15s; }
details.cat[open] > summary::after { transform: rotate(180deg); }
details.cat .count { background: var(--card); border: 1px solid var(--line); color: var(--fg-soft); font-size: .78rem; padding: 1px 9px; border-radius: 999px; }
details.cat .grid { padding: 0 14px 14px; }
details.qa { border-bottom: 1px solid var(--line); padding: 4px 0; }
details.qa summary { cursor: pointer; padding: 12px 0; font-weight: 600; list-style: none; display: flex; gap: 10px; }
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::before { content: "+"; color: var(--accent); font-weight: 800; width: 16px; }
details.qa[open] summary::before { content: "−"; }
details.qa p { color: var(--fg-soft); margin: 0 0 12px 26px; }

/* ---- BADGES ---- */
.badge { font-size: .7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.badge.local { background: #16362a; color: #6ee7a8; }
.badge.cloud { background: #2c2340; color: #c9a3ff; }
.badge.beta { background: #3d2a0f; color: #ffbf66; }
.badge.stable { background: #14283f; color: #7bb8ff; }

/* ---- TOOL PAGE ---- */
.tool-page { padding: 28px 0 40px; }
.tool-header { padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.tool-header h1 { margin: 0 0 8px; font-size: clamp(1.5rem, 4vw, 2.1rem); letter-spacing: -.01em; }
.tool-header .meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.tool-header .desc { color: var(--fg-soft); max-width: 760px; }
.notice { padding: 14px 16px; border-radius: var(--radius-sm); margin: 14px 0; font-size: .92rem; }
.notice.cloud { background: #221a3a; border: 1px solid #4b3776; color: #d5c4ff; }
.notice.local { background: #11253f; border: 1px solid #2b4a78; color: #bcd6ff; }
.notice.beta  { background: #3a290f; border: 1px solid #6d4a1c; color: #ffd79a; }
.notice strong { display: block; margin-bottom: 4px; }
.tool-body { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.tool-body p.hint { color: var(--muted); font-size: .92rem; margin: 0 0 12px; }
.tool-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* ---- FOOTER ---- */
footer.site { margin-top: auto; padding: 36px 0 44px; border-top: 1px solid #121c34; color: var(--muted); font-size: .9rem; background: #080d1a; }
footer.site .cols { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
footer.site h4 { color: var(--fg-soft); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 10px; }
footer.site ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
footer.site a { color: var(--muted); }
footer.site a:hover { color: var(--fg); }
footer.site .copy { text-align: center; margin-top: 26px; color: var(--muted); font-size: .82rem; }

/* ---- BLOG / LEGAL ---- */
article.post { max-width: 740px; margin: 0 auto; padding: 32px 20px; }
article.post h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin: 0 0 10px; line-height: 1.2; }
article.post .meta { color: var(--muted); font-size: .88rem; margin-bottom: 22px; }
article.post h2 { margin-top: 28px; }
article.post p { color: #dde6fa; }
.post .tags { margin-bottom: 22px; }
.post .tags .tag { display: inline-block; background: var(--accent-soft); color: #bcd6ff; padding: 3px 10px; border-radius: 999px; font-size: .78rem; margin: 0 6px 6px 0; }
.post .post-content { font-size: 1.04rem; line-height: 1.78; color: #dde6fa; }
.post .post-content h2 { margin: 34px 0 12px; font-size: 1.4rem; color: var(--fg); }
.post .post-content h3 { margin: 24px 0 10px; font-size: 1.12rem; color: #d5e2ff; }
.post .post-content p { margin: 0 0 16px; }
.post .post-content ul, .post .post-content ol { margin: 0 0 16px; padding-inline-start: 26px; }
.post .post-content li { margin-bottom: 6px; }
.post-cta { margin: 40px 0 20px; padding: 22px; background: linear-gradient(135deg, #12264a, #1c1840); border: 1px solid #2b4a78; border-radius: var(--radius); }
.post-cta p { margin: 0 0 10px; }
.legal h2 { font-size: 1.15rem; margin-top: 26px; }
.legal p { color: #d5def2; }

/* ---- MISC ---- */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
code, pre { font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background: #0e1626; border-radius: 6px; padding: 2px 6px; }
pre { padding: 12px; overflow-x: auto; }
.lead { color: var(--fg-soft); }
textarea, input[type=text], input[type=email] { font-size: 16px; }

/* ---- ADS ---- */
.iwelah-ad { margin: 24px 0; text-align: center; min-height: 60px; }
.iwelah-ad ins { display: block; }

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  header.site nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: #0c1326; border-bottom: 1px solid var(--line); padding: 8px 16px 16px; box-shadow: var(--shadow); max-height: calc(100vh - 64px); overflow-y: auto; }
  header.site nav.open { display: flex; }
  header.site nav a { padding: 13px 4px; border-bottom: 1px solid #172340; font-size: 1rem; }
  header.site nav a.nav-cta { margin-top: 12px; border-bottom: 0; }
  header.site .selectors { padding-top: 12px; }
  header.site .selectors select { flex: 1; }
}
@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .hero { padding: 44px 0 36px; }
  .hero .cta-row .btn { width: 100%; }
  section.block { padding: 40px 0; }
  .grid { grid-template-columns: 1fr; gap: 10px; }
  .card.tool { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 14px; }
  .card.tool .ico { width: 40px; height: 40px; font-size: 1.3rem; }
  .card.tool h3 { flex: 1; min-width: 0; }
  .card.tool p { flex-basis: 100%; }
  .tool-body { padding: 16px; }
}

/* ---- RTL ---- */
[dir="rtl"] .hero { text-align: center; }
[dir="rtl"] details.qa p { margin: 0 26px 12px 0; }

/* ---- PAGE OUTIL : contenu enrichi ---- */
.tool-header .lead { font-size: 1.05rem; color: var(--fg-soft); max-width: 780px; }
p.gdpr { margin: 12px 0 0; padding: 12px 14px; border-radius: var(--radius-sm); background: rgba(46,204,113,.08); border: 1px solid rgba(46,204,113,.35); color: #b8f0cf; font-size: .95rem; }
ul.benefits { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
ul.benefits li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; color: var(--fg-soft); }
ul.benefits li strong { display: block; color: var(--fg); margin-bottom: 4px; }
ol.steps-list { padding-inline-start: 22px; display: grid; gap: 8px; color: var(--fg-soft); }
ol.steps-list strong { color: var(--fg); }
.tool-page section.block h3 { font-size: 1.02rem; margin: 18px 0 6px; }
.tool-page section.block p { color: var(--fg-soft); }
.site-mapping ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-mapping li { color: var(--fg-soft); line-height: 1.8; }
.site-mapping li strong { color: var(--fg); margin-inline-end: 4px; }
.tool-actions .btn { min-width: 200px; }
@media (max-width: 640px) { .tool-actions .btn { width: 100%; } }

/* ---- TROUVER SON BESOIN (accueil) ---- */
.finder .finder-q { width: 100%; font-size: 1.08rem; padding: 15px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-soft); color: var(--fg); }
.finder .finder-q:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(79,140,255,.25); }
.finder #iw-find-count { margin: 10px 0 0; }
.finder #iw-find-res { margin-top: 12px; }
.goals-title { font-size: 1rem; margin: 20px 0 10px; color: var(--fg-soft); }
.goals { display: flex; flex-wrap: wrap; gap: 8px; }
.goal { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--fg); font-size: .93rem; line-height: 1.2; }
.goal:hover { background: var(--accent-soft); border-color: var(--accent); color: #fff; text-decoration: none; }
@media (max-width: 700px) { .goal { font-size: .88rem; padding: 9px 12px; } }