/* ============================================================
   Inkluo — landing. Parti pris : clair, sobre, professionnel.
   Hero centré, beaucoup d'air, une seule couleur d'accent.
   Vanilla CSS, zéro dépendance, accessibilité AA, clair + sombre.
   ============================================================ */

:root {
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4.5rem; --sp-9:6.5rem;
  --maxw: 64rem; --maxw-hero: 46rem; --maxw-prose: 44rem;
  --radius: 16px; --radius-sm: 10px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas, monospace;

  /* CLAIR (défaut) */
  --bg:#ffffff; --bg-soft:#f6f8fb; --surface:#ffffff;
  --border:#e6e9ef; --border-strong:#d4dae3;
  --text:#0f141a; --muted:#56616e; --faint:#79838f;
  --accent:#0b7a4f; --accent-strong:#075f3d; --on-accent:#ffffff;
  --sev-error:#c0392b; --sev-warn:#9a6700; --sev-ok:#0b7a4f; --sev-info:#3d5a80;
  --shadow-sm:0 1px 2px rgba(15,20,26,.06);
  --shadow:0 24px 60px -32px rgba(15,20,26,.28);
  --ring:#0b7a4f;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0f1216; --bg-soft:#13181e; --surface:#161c24;
    --border:#232b35; --border-strong:#323c49;
    --text:#f1f4f8; --muted:#aab4c0; --faint:#7e8a97;
    --accent:#34d399; --accent-strong:#5ee0ad; --on-accent:#052e22;
    --sev-error:#f87171; --sev-warn:#fbbf24; --sev-ok:#34d399; --sev-info:#7ba3d1;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 30px 60px -34px rgba(0,0,0,.7);
    --ring:#34d399;
    color-scheme: dark;
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:1.0625rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
svg{ display:block; } img,svg{ max-width:100%; }
a{ color:var(--accent); text-underline-offset:3px; }
a:hover{ color:var(--accent-strong); }
:focus-visible{ outline:3px solid var(--ring); outline-offset:3px; border-radius:4px; }

.skip-link{ position:absolute; left:0; top:-100%; background:var(--accent); color:var(--on-accent); padding:var(--sp-3) var(--sp-4); font-weight:700; border-radius:0 0 var(--radius-sm) 0; z-index:100; transition:top .15s ease; }
.skip-link:focus{ top:0; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--sp-5); }

/* ---------- Top bar ---------- */
.topbar{ position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--border); }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); min-height:96px; }
.brand{ display:inline-flex; align-items:center; text-decoration:none; }
.brand-logo{ height:62px; width:auto; display:block; }
.site-footer .brand-logo{ height:54px; }
.nav-lang{ display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:var(--text); font-weight:600; font-size:.9rem; min-height:42px; padding:var(--sp-2) var(--sp-4); border:1px solid var(--border-strong); border-radius:999px; transition:background-color .18s ease, border-color .18s ease; }
.nav-lang:hover{ background:var(--bg-soft); border-color:var(--accent); color:var(--text); }
.nav-lang__flag{ width:22px; height:15px; flex-shrink:0; display:block; overflow:hidden; border-radius:3px; box-shadow:0 0 0 .5px rgba(0,0,0,.18); }
.nav-lang__flag svg{ width:100%; height:100%; display:block; }

/* ---------- Boutons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); min-height:50px; padding:0 var(--sp-6); border-radius:999px; font-weight:700; font-size:1.02rem; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform .14s ease, background-color .18s ease, border-color .18s ease, color .18s ease; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:var(--on-accent); }
.btn-primary:hover{ background:var(--accent-strong); color:var(--on-accent); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--border-strong); }
.btn-ghost:hover{ background:var(--bg-soft); border-color:var(--text); color:var(--text); }
.btn svg{ width:20px; height:20px; }

/* ---------- Hero (centré) ---------- */
.hero{ text-align:center; padding-block:var(--sp-8); }
.hero-inner{ max-width:var(--maxw-hero); margin-inline:auto; }
.eyebrow{ display:inline-flex; align-items:center; gap:var(--sp-2); font-size:.82rem; font-weight:700; letter-spacing:.04em; color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); border:1px solid color-mix(in srgb,var(--accent) 22%,transparent); padding:6px 14px; border-radius:999px; margin:0 0 var(--sp-5); }
.hero h1{ font-size:clamp(2.2rem,5vw,3.4rem); line-height:1.08; letter-spacing:-.03em; font-weight:800; margin:0 0 var(--sp-4); }
.hero .lead{ font-size:clamp(1.1rem,1.7vw,1.3rem); color:var(--muted); max-width:38rem; margin:0 auto; }
.hero .cta-row{ display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:center; margin-top:var(--sp-6); }
.hero .trust{ margin-top:var(--sp-5); color:var(--faint); font-size:.92rem; display:inline-flex; align-items:center; gap:var(--sp-2); }
.hero .trust svg{ width:17px; height:17px; color:var(--accent); }

/* ---------- Aperçu produit (mock inspecteur) ----------
   Échelle réduite (~ -28%) via font-size de base + tailles internes en em.
   Chaque bloc = carte encadrée avec un bandeau de titre teinté. */
.shot{ max-width:52rem; margin:var(--sp-8) auto 0; }
.mock{ font-size:.78rem; line-height:1.5; background:var(--bg-soft); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; text-align:left; }
.mock-bar{ display:flex; align-items:center; gap:6px; padding:7px 11px; border-bottom:1px solid var(--border); background:var(--surface); }
.mock-bar .tl{ width:9px; height:9px; border-radius:50%; background:var(--border-strong); }
.mock-bar .title{ margin-left:6px; font-weight:600; font-size:.86em; color:var(--muted); }
.insp-section{ margin:8px 10px; border:1px solid var(--border); border-radius:9px; background:var(--surface); padding:7px 10px 9px; }
.insp-label{ margin:-7px -10px 8px; padding:5px 10px; background:var(--bg-soft); border-bottom:1px solid var(--border); border-radius:8px 8px 0 0; font-size:.68em; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.insp-id{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.tag-chip{ font-family:var(--mono); font-weight:700; font-size:.95em; background:var(--bg-soft); border:1px solid var(--border); border-radius:6px; padding:1px 8px; color:var(--text); }
.role-name{ color:var(--muted); font-size:.92em; }
.mini-badge{ margin-left:auto; font-size:.66em; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); border:1px solid var(--border-strong); border-radius:999px; padding:2px 8px; }
.insp-val{ color:var(--text); }
.insp-src{ display:block; margin-top:3px; font-family:var(--mono); font-size:.82em; color:var(--accent); }
.chip{ font-family:var(--mono); font-size:.84em; background:var(--bg-soft); border:1px solid var(--border); border-radius:6px; padding:1px 6px; color:var(--text); }

/* ---------- Référentiels (ligne discrète) ---------- */
.standards{ display:flex; flex-direction:column; align-items:center; padding-block:var(--sp-7); }
.std-lead{ margin:0; font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); }
.ref-grid{ width:100%; display:grid; grid-template-columns:repeat(auto-fit, minmax(232px,1fr)); gap:var(--sp-3); list-style:none; margin:var(--sp-5) 0 0; padding:0; }
.ref-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; box-shadow:var(--shadow-sm); }
.ref-acro{ display:block; font-weight:800; color:var(--accent); margin-bottom:3px; }
.ref-desc{ display:block; color:var(--muted); font-size:.9rem; line-height:1.45; }

/* ---------- Features (cartes) ---------- */
.features{ background:var(--bg-soft); border-block:1px solid var(--border); }
.features-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:var(--sp-4); margin-top:var(--sp-6); }
.feature{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:var(--sp-5); box-shadow:var(--shadow-sm); transition:transform .18s ease, border-color .18s ease; }
.feature:hover{ transform:translateY(-3px); border-color:var(--border-strong); }
.feature .ic{ width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:color-mix(in srgb,var(--accent) 13%,transparent); color:var(--accent); margin-bottom:var(--sp-4); }
.feature .ic svg{ width:23px; height:23px; }
.feature h3{ font-size:1.1rem; font-weight:700; letter-spacing:-.01em; margin:0 0 var(--sp-2); }
.feature p{ margin:0; color:var(--muted); font-size:.98rem; }

.section{ padding-block:var(--sp-8); }
.section-center{ text-align:center; }
.section h2{ font-size:clamp(1.7rem,3vw,2.3rem); line-height:1.1; letter-spacing:-.025em; font-weight:800; margin:0 0 var(--sp-3); }
.section .sub{ color:var(--muted); font-size:1.1rem; max-width:38rem; margin:0 auto; }

/* ---------- CTA finale ---------- */
.final{ text-align:center; }
.final h2{ margin-bottom:var(--sp-5); }
.final .cta-row{ display:flex; gap:var(--sp-3); justify-content:center; flex-wrap:wrap; }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--border); padding-block:var(--sp-7); color:var(--muted); }
.footer-inner{ display:flex; flex-wrap:wrap; gap:var(--sp-5); justify-content:space-between; align-items:center; }
.footer-links{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5); list-style:none; margin:0; padding:0; }
.footer-links a{ color:var(--muted); text-decoration:none; font-weight:600; }
.footer-links a:hover{ color:var(--text); }
.footer-meta{ width:100%; color:var(--faint); font-size:.88rem; padding-top:var(--sp-4); border-top:1px solid var(--border); margin-top:var(--sp-2); }

/* ---------- Prose (pages légales) ---------- */
.prose{ max-width:var(--maxw-prose); }
.prose h1{ font-size:clamp(1.9rem,4vw,2.6rem); letter-spacing:-.03em; margin:0 0 var(--sp-3); }
.prose h2{ font-size:1.35rem; letter-spacing:-.01em; margin-top:var(--sp-7); }
.prose .lead{ color:var(--muted); font-size:1.12rem; }
.prose p,.prose li{ color:var(--text); }
.prose dl dt{ font-weight:700; margin-top:var(--sp-4); }
.prose dl dd{ margin:var(--sp-1) 0 0; color:var(--muted); }
.prose .note{ border-left:4px solid var(--accent); background:var(--bg-soft); padding:var(--sp-4) var(--sp-5); border-radius:0 var(--radius-sm) var(--radius-sm) 0; margin:var(--sp-5) 0; }

/* ---------- Aperçus inspecteur (exemples de constats fidèles) ---------- */
.examples-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(258px, 1fr)); gap:var(--sp-6) var(--sp-5); align-items:start; margin-top:var(--sp-7); }
.example{ margin:0; }
.example .mock{ transition:transform .22s ease, box-shadow .22s ease; }
.example:hover .mock{ transform:translateY(-4px); }
.shot-caption{ margin:13px 0 0; text-align:center; font-size:.9rem; font-weight:600; color:var(--muted); }

/* Dépliant « Comment lire ces aperçus » — équivalent textuel des maquettes (aria-hidden) */
.examples-key{ margin-top:var(--sp-5); border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-soft); }
.examples-key > summary{ cursor:pointer; font-weight:700; font-size:1.02rem; padding:var(--sp-4) var(--sp-5); list-style:none; display:flex; align-items:center; gap:.55em; }
.examples-key > summary::-webkit-details-marker{ display:none; }
.examples-key > summary::before{ content:"\25B8"; color:var(--accent); font-size:.85em; transition:transform .2s ease; }
.examples-key[open] > summary::before{ transform:rotate(90deg); }
@media (prefers-reduced-motion: reduce){ .examples-key > summary::before{ transition:none; } }
.key-body{ padding:0 var(--sp-5) var(--sp-5); display:grid; gap:var(--sp-6); }
.key-h{ font-size:1.12rem; font-weight:800; letter-spacing:-.01em; color:var(--text); margin:0 0 var(--sp-4); padding-bottom:var(--sp-2); border-bottom:1px solid var(--border-strong); }

.key-legend{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-2); }
.key-legend li{ color:var(--text); font-size:.97rem; line-height:1.45; }
.key-legend .ic{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; margin-right:9px; vertical-align:middle; transform:translateY(-1px); }
.key-legend .ic svg{ width:18px; height:18px; display:block; }
.key-legend .ic.ok{ color:var(--sev-ok); }
.key-legend .ic.err{ color:var(--sev-error); }
.key-legend .ic.warn{ color:var(--sev-warn); }
.key-legend .ic.info{ color:var(--sev-info); }

.key-grid{ margin:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(216px,1fr)); gap:var(--sp-4) var(--sp-5); }
.key-item dt{ font-weight:600; color:var(--text); font-size:.96rem; }
.key-item dd{ margin:3px 0 0; color:var(--muted); font-size:.92rem; line-height:1.5; }
.name-ok{ border-left:3px solid var(--sev-ok); padding-left:var(--sp-3); }
.name-err{ border-left:3px solid var(--sev-error); padding-left:var(--sp-3); color:var(--sev-error); font-weight:600; }
.attr-line + .attr-line{ margin-top:6px; }
.insp-section.analyse{ background:var(--bg-soft); border:1px solid var(--border); border-left-width:4px; border-radius:9px; margin:8px 10px; }
.insp-section.analyse.sev-error{ border-left-color:var(--m-err); }
.insp-section.analyse.sev-warn{ border-left-color:var(--m-warn); }
.insp-section.analyse.sev-ok{ border-left-color:var(--m-ok); }
.analyse-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); font-size:.95em; font-weight:700; margin:0 0 8px; }
.analyse-title .cmp{ font-family:var(--mono); font-size:.92em; }
.analyse-head .counts{ display:inline-flex; gap:6px; flex:none; }
.cb{ font-family:var(--mono); font-size:.74em; font-weight:700; border-radius:5px; padding:1px 6px; border:1px solid transparent; }
.hier-label{ font-size:.66em; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); margin:0 0 6px; }
.aria-hier{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-bottom:8px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.hchip{ display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:.74em; background:transparent; border:1px solid var(--border-strong); border-radius:6px; padding:2px 7px; }
.hchip svg{ width:11px; height:11px; }
.aria-sep{ color:var(--faint); }
.tk{ padding:8px 0; }
.tk:first-of-type{ padding-top:2px; }
.tk + .tk{ border-top:1px solid var(--border); }
.tk-head{ display:flex; align-items:center; gap:7px; font-weight:700; }
.tk-head svg{ width:15px; height:15px; flex:none; }
.tk.err .tk-head svg{ color:var(--sev-error); }
.tk.warn .tk-head svg{ color:var(--sev-warn); }
.tk.ok .tk-head{ font-weight:600; }
.tk.ok .tk-head svg{ color:var(--sev-ok); }
.tk p{ margin:4px 0 0 22px; color:var(--muted); font-size:.95em; }
.opt-badge{ display:inline-block; font-size:.72em; font-weight:700; background:var(--border); color:var(--text); border-radius:5px; padding:1px 7px; margin-right:5px; }
.cb-info{ font-family:var(--mono); font-size:.74em; font-weight:700; border-radius:5px; padding:1px 6px; }

/* Infos de page (3e exemple) */
.page-meta{ display:grid; gap:6px; }
.page-meta .row{ display:flex; gap:10px; }
.page-meta .k{ width:80px; flex:none; color:var(--muted); font-size:.9em; }
.page-meta .v{ font-family:var(--mono); font-size:.9em; }
.page-meta .v.na{ color:var(--muted); font-style:italic; font-family:var(--font); }

/* Fidélité : le mock reprend la palette RÉELLE de l'extension (accent bleu,
   sévérités, chips de code), indépendamment de l'accent vert du site. */
.mock{
  --m-accent:#2e4a6e; --m-tag-text:#ffffff;
  --m-code-bg:#e8ebf0; --m-code-bd:#d0d4dc; --m-code-tx:#1d1d1f;
  --m-ok:#047857; --m-err:#b91c1c; --m-warn:#b45309; --m-info:#3d5a80;
  --m-ok-bg:rgba(16,185,129,.07); --m-err-bg:rgba(220,38,38,.07);
}
@media (prefers-color-scheme: dark){
  .mock{
    --m-accent:#8cb6e1; --m-tag-text:#0e1623;
    --m-code-bg:#262830; --m-code-bd:#3a3d46; --m-code-tx:#e8e9eb;
    --m-ok:#34d399; --m-err:#f87171; --m-warn:#fbbf24; --m-info:#7ba3d1;
    --m-err-bg:rgba(248,113,113,.07);
  }
}
.mock .tag-chip{ background:var(--m-accent); color:var(--m-tag-text); border:0; font-weight:700; padding:4px 12px; border-radius:5px; box-shadow:0 1px 4px rgba(0,0,0,.18); }
.mock .role-name{ color:var(--m-accent); font-family:var(--mono); font-weight:700; }
.mock .chip{ background:var(--m-code-bg); border-color:var(--m-code-bd); color:var(--m-code-tx); }
.mock .insp-src{ color:var(--m-ok); }
.mock .name-ok{ border-left-color:var(--m-ok); background:var(--m-ok-bg); border-radius:0 8px 8px 0; padding:8px 10px; }
.mock .name-err{ border-left-color:var(--m-err); background:var(--m-err-bg); color:var(--m-err); border-radius:0 8px 8px 0; padding:8px 10px; }
.mock .tk.err .tk-head svg{ color:var(--m-err); }
.mock .tk.warn .tk-head svg{ color:var(--m-warn); }
.mock .tk.ok .tk-head svg{ color:var(--m-ok); }
.mock .tk.info .tk-head svg{ color:var(--m-info); }
.mock .hchip{ color:var(--m-accent); border-color:color-mix(in srgb, var(--m-accent) 30%, transparent); }
.mock .hchip svg{ color:var(--m-ok); }
.mock .analyse-head .cmp{ color:var(--m-accent); }
.mock .page-meta .v{ color:var(--m-accent); }
.mock .cb-err{ color:var(--m-err); background:color-mix(in srgb, var(--m-err) 12%, transparent); border:1px solid color-mix(in srgb, var(--m-err) 38%, transparent); }
.mock .cb-warn{ color:var(--m-warn); background:color-mix(in srgb, var(--m-warn) 12%, transparent); border:1px solid color-mix(in srgb, var(--m-warn) 38%, transparent); }
.mock .cb-info{ color:var(--m-info); background:color-mix(in srgb, var(--m-info) 12%, transparent); border:1px solid color-mix(in srgb, var(--m-info) 38%, transparent); }

/* ---------- Apparition (au chargement, fiable) ---------- */
@keyframes ink-rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: no-preference){
  html.js .reveal{ animation:ink-rise .55s ease both; }
  html.js .reveal-2{ animation-delay:.08s; }
  html.js .reveal-3{ animation-delay:.16s; }
}

/* ---------- Responsive ---------- */
@media (max-width: 820px){
  .features-grid{ grid-template-columns:1fr; gap:var(--sp-5); }
}