/* ==========================================================================
   JANGE — index.html (marketing + porte d'accueil), §59 voir DECISIONS.md
   Anciennement un bundle vitrine 100% autonome et séparé du prototype
   (voir §57/§58 dans DECISIONS.md et jange-vitrine/README.md, livré à
   part) — fusionné ici en remplacement direct de assets/css/landing.css
   sur demande explicite : "remplace la page index de jange par index de
   jange vitrine". Reprend l'identité visuelle du reste de la plateforme
   (tokens indigo/teal, Manrope + Public Sans) en feuille de style
   autonome. Les règles de fin de fichier (section #connexion et modal de
   demande de démo) sont NOUVELLES pour cette fusion — tout ce qui précède
   vient inchangé du site vitrine original.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800;900&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --ink:#14231A; --ink-soft:#4B5B50; --ink-faint:#73827A;
  --paper:#F6F8F3; --surface:#FFFFFF; --surface-2:#ECF0E6; --border:#DCE3D3;
  --brand:#166534; --brand-strong:#14532D; --brand-soft:#E2F0E6; --on-brand:#FFFFFF;
  --accent:#F97316; --accent-text:#AA4F09; --accent-soft:#FFEBD9;
  --info:#0F8A6E; --info-soft:#DDF3EC;
  --amber:#B4650B; --amber-soft:#FCEFDC;
  --red:#C22B2B; --red-soft:#FBE7E7;
  --green:#0F8A6E; --green-soft:#DDF3EC;
  /* Alias historiques (avant l'identité Baobab/Forêt, §71) : --indigo* = couleur de marque,
     --teal* = couleur d'information. Les ~150 usages existants continuent de fonctionner ;
     les nouveaux écrans utilisent --brand* / --info*. */
  --indigo:var(--brand); --indigo-strong:var(--brand-strong); --indigo-soft:var(--brand-soft);
  --teal:var(--info); --teal-soft:var(--info-soft);
  --shadow-sm: 0 1px 2px rgba(20,35,26,.04), 0 1px 1px rgba(20,35,26,.03);
  --shadow-md: 0 8px 24px -12px rgba(20,35,26,.22);
  --shadow-lg: 0 20px 48px -20px rgba(20,35,26,.28);
  --shadow-xl: 0 32px 72px -24px rgba(20,35,26,.32);
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:22px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
  --ink:#ECF4EF; --ink-soft:#B9CBC0; --ink-faint:#87A191;
  --paper:#0C130E; --surface:#131E17; --surface-2:#1B2A21; --border:#293D31;
  --brand:#68DE95; --brand-strong:#9AE9B8; --brand-soft:#213F2C; --on-brand:#06150B;
  --accent:#FA8838; --accent-text:#FB9F60; --accent-soft:#3A301D;
  --info:#59EDCB; --info-soft:#1F4136;
  --amber:#F4A852; --amber-soft:#393521;
  --red:#DE6969; --red-soft:#362B25;
  --green:#59EDCB; --green-soft:#1F4136;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 12px 28px -12px rgba(0,0,0,.55);
  --shadow-lg: 0 24px 56px -20px rgba(0,0,0,.6);
  --shadow-xl: 0 36px 80px -24px rgba(0,0,0,.65);
  }
}
:root[data-theme="dark"]{
  --ink:#ECF4EF; --ink-soft:#B9CBC0; --ink-faint:#87A191;
  --paper:#0C130E; --surface:#131E17; --surface-2:#1B2A21; --border:#293D31;
  --brand:#68DE95; --brand-strong:#9AE9B8; --brand-soft:#213F2C; --on-brand:#06150B;
  --accent:#FA8838; --accent-text:#FB9F60; --accent-soft:#3A301D;
  --info:#59EDCB; --info-soft:#1F4136;
  --amber:#F4A852; --amber-soft:#393521;
  --red:#DE6969; --red-soft:#362B25;
  --green:#59EDCB; --green-soft:#1F4136;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 12px 28px -12px rgba(0,0,0,.55);
  --shadow-lg: 0 24px 56px -20px rgba(0,0,0,.6);
  --shadow-xl: 0 36px 80px -24px rgba(0,0,0,.65);
}

/* Logo jangë : deux variantes (fond clair / fond sombre), la bonne s'affiche selon le thème. */
.logo-on-dark{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-on-light{ display:none; }
  :root:not([data-theme="light"]) .logo-on-dark{ display:block; }
}
:root[data-theme="dark"] .logo-on-light{ display:none; }
:root[data-theme="dark"] .logo-on-dark{ display:block; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Public Sans', system-ui, -apple-system, sans-serif; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
h1,h2,h3,h4{ font-family:'Manrope', system-ui, sans-serif; text-wrap:balance; margin:0; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; }
:focus-visible{ outline:2px solid var(--indigo); outline-offset:2px; border-radius:4px; }
::selection{ background:var(--indigo-soft); color:var(--indigo-strong); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

.wrap{ max-width:1180px; margin:0 auto; padding-inline:28px; }
.skip-link{ position:absolute; left:-999px; top:auto; background:var(--indigo); color:var(--on-brand); padding:10px 16px; border-radius:8px; z-index:300; }
.skip-link:focus{ left:16px; top:16px; }

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px; border-radius:11px; font-size:14px; font-weight:700;
  border:1px solid transparent; transition:transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn.primary{ background:var(--indigo); color:var(--on-brand); box-shadow:0 6px 16px -6px rgba(22,101,52,.5); }
.btn.primary:hover{ background:var(--indigo-strong); box-shadow:0 8px 22px -6px rgba(22,101,52,.55); }
.btn.ghost{ background:var(--surface); border-color:var(--border); color:var(--ink); }
.btn.ghost:hover{ background:var(--surface-2); }
.btn.lg{ padding:14px 26px; font-size:15px; border-radius:12px; }
.btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }

.eyebrow{
  display:inline-flex; align-items:center; gap:7px; width:fit-content; padding:6px 13px; border-radius:999px;
  background:var(--indigo-soft); color:var(--indigo-strong); font-size:12px; font-weight:700; letter-spacing:.01em;
}
.eyebrow.teal{ background:var(--teal-soft); color:var(--teal); }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between;
  padding:16px 0; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent; transition:border-color .2s ease, background .2s ease;
}
.nav.scrolled{ border-color:var(--border); background:color-mix(in srgb, var(--paper) 96%, transparent); }
.nav .inner{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.wordmark{ display:flex; align-items:center; gap:9px; font-family:'Manrope'; font-weight:800; font-size:19px; letter-spacing:-.01em; }
.brand-logo{ display:inline-flex; align-items:center; }
.brand-logo img{ height:34px; width:auto; }
.footer-logo img{ height:30px; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ font-size:13.5px; font-weight:600; color:var(--ink-soft); transition:color .12s ease; }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; width:38px; height:38px; border-radius:9px; border:1px solid var(--border); background:var(--surface); align-items:center; justify-content:center; }
.nav-toggle svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }
.nav-mobile{ display:none; }

@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-cta .btn.ghost{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-mobile{
    display:flex; flex-direction:column; gap:2px; position:fixed; inset:64px 14px auto 14px; z-index:99;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
    padding:10px; transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .16s ease, transform .16s ease;
  }
  .nav-mobile.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-mobile a{ padding:11px 12px; border-radius:9px; font-size:14px; font-weight:600; color:var(--ink-soft); }
  .nav-mobile a:hover{ background:var(--surface-2); color:var(--ink); }
  .nav-mobile .btn{ margin-top:6px; }
}

/* ---------- hero ---------- */
.hero{ position:relative; padding:74px 0 40px; overflow:hidden; }
.hero-decor{
  position:absolute; inset:-10% -10% auto -10%; height:640px; z-index:-1; pointer-events:none;
  background-image:radial-gradient(circle at 18% 12%, var(--indigo-soft) 0, transparent 40%),
                    radial-gradient(circle at 86% 8%, var(--teal-soft) 0, transparent 36%);
  opacity:.9;
}
.hero-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; max-width:760px; margin:0 auto; }
.hero h1{ font-size:clamp(32px,5.4vw,54px); font-weight:900; letter-spacing:-.025em; line-height:1.08; }
.hero h1 em{ font-style:normal; background:linear-gradient(90deg, var(--indigo), var(--teal)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .lede{ font-size:clamp(15px,1.8vw,18px); color:var(--ink-soft); max-width:56ch; }
.hero-cta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:6px; }
.hero-note{ font-size:12px; color:var(--ink-faint); display:flex; align-items:center; gap:6px; }
.hero-note svg{ width:14px; height:14px; stroke:var(--green); fill:none; stroke-width:2.4; }

/* ---- mockup produit (illustration CSS, pas une vraie capture) ---- */
.mock-frame{
  margin-top:52px; border-radius:var(--radius-xl); border:1px solid var(--border); background:var(--surface);
  box-shadow:var(--shadow-xl); overflow:hidden; max-width:1040px; margin-inline:auto;
}
.mock-bar{ display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--surface-2); }
.mock-dot{ width:9px; height:9px; border-radius:50%; background:var(--border); }
.mock-body{ display:flex; min-height:340px; }
.mock-side{ width:190px; flex:none; border-right:1px solid var(--border); padding:16px 12px; display:flex; flex-direction:column; gap:5px; background:var(--surface-2); }
.mock-side .m-org{ display:flex; align-items:center; gap:8px; padding:4px 6px 14px; font-weight:800; font-size:12.5px; }
.mock-side .m-org .sq{ width:18px; height:18px; border-radius:6px; background:var(--indigo); }
.mock-item{ display:flex; align-items:center; gap:8px; padding:8px 9px; border-radius:8px; font-size:11.5px; font-weight:700; color:var(--ink-faint); }
.mock-item .d{ width:6px; height:6px; border-radius:2px; background:currentColor; opacity:.5; flex:none; }
.mock-item.active{ background:var(--surface); color:var(--indigo-strong); box-shadow:0 0 0 1px var(--border); }
.mock-main{ flex:1; min-width:0; padding:18px 22px; display:flex; flex-direction:column; gap:16px; }
.mock-top{ display:flex; align-items:baseline; justify-content:space-between; }
.mock-top h4{ font-size:15px; font-weight:800; }
.mock-top span{ font-size:10.5px; color:var(--ink-faint); font-weight:600; }
.mock-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.mock-kpi{ border:1px solid var(--border); border-radius:10px; padding:11px 12px; background:var(--surface); }
.mock-kpi b{ display:block; font-size:16px; font-weight:800; font-family:'Manrope'; }
.mock-kpi span{ font-size:10px; color:var(--ink-faint); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.mock-kpi.up b{ color:var(--green); }
.mock-rows{ border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.mock-row{ display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid var(--border); font-size:11.5px; }
.mock-row:last-child{ border-bottom:none; }
.mock-row .av{ width:24px; height:24px; border-radius:7px; background:var(--indigo-soft); flex:none; }
.mock-row .nm{ font-weight:700; flex:1; min-width:0; }
.mock-row .sub{ color:var(--ink-faint); width:110px; }
.mock-pill{ font-size:9.5px; font-weight:800; padding:3px 8px; border-radius:999px; }
.mock-pill.green{ background:var(--green-soft); color:var(--green); }
.mock-pill.amber{ background:var(--amber-soft); color:var(--amber); }
.mock-pill.red{ background:var(--red-soft); color:var(--red); }
@media (max-width:720px){ .mock-side{ display:none; } .mock-kpis{ grid-template-columns:repeat(2,1fr); } .mock-row .sub{ display:none; } }

/* ---------- bande de repères ---------- */
.stripe{ padding:34px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface); }
.stripe-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; text-align:center; }
.stripe-item b{ display:block; font-family:'Manrope'; font-size:24px; font-weight:800; color:var(--indigo-strong); letter-spacing:-.02em; }
.stripe-item span{ font-size:12px; color:var(--ink-faint); font-weight:600; }
@media (max-width:760px){ .stripe-grid{ grid-template-columns:repeat(2,1fr); row-gap:22px; } }

/* ---------- sections génériques ---------- */
.section{ padding:88px 0; }
.section.tight{ padding-top:0; }
.section-head{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; max-width:640px; margin:0 auto 46px; }
.section-head h2{ font-size:clamp(24px,3.4vw,34px); font-weight:800; letter-spacing:-.02em; }
.section-head p{ color:var(--ink-soft); font-size:15px; }
.section-head.left{ align-items:flex-start; text-align:left; margin-inline:0; }

/* ---------- grille de capacités ---------- */
.cap-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.cap-card{
  border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); padding:22px 20px;
  display:flex; flex-direction:column; gap:12px; transition:box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.cap-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:transparent; }
.cap-icn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--indigo-soft); color:var(--indigo-strong); flex:none; }
.cap-icn svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cap-card.teal .cap-icn{ background:var(--teal-soft); color:var(--teal); }
.cap-card h3{ font-size:15px; font-weight:800; }
.cap-card p{ font-size:13px; color:var(--ink-soft); line-height:1.55; }
@media (max-width:980px){ .cap-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cap-grid{ grid-template-columns:1fr; } }

/* ---------- deep-dive alterné ---------- */
.dive{ display:flex; align-items:center; gap:64px; }
.dive:nth-child(even){ flex-direction:row-reverse; }
.dive + .dive{ margin-top:96px; }
.dive-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:16px; }
.dive-text h3{ font-size:clamp(20px,2.6vw,27px); font-weight:800; letter-spacing:-.015em; }
.dive-text p.lede{ color:var(--ink-soft); font-size:14.5px; }
.dive-list{ display:flex; flex-direction:column; gap:11px; margin-top:4px; }
.dive-list li{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--ink-soft); }
.dive-list svg{ width:17px; height:17px; margin-top:1px; stroke:var(--green); fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.dive-list b{ color:var(--ink); }
.dive-visual{ flex:1; min-width:0; }
.dive-card{ border:1px solid var(--border); border-radius:var(--radius-xl); background:var(--surface); box-shadow:var(--shadow-lg); padding:22px; }
@media (max-width:900px){ .dive, .dive:nth-child(even){ flex-direction:column; } .dive + .dive{ margin-top:64px; } }

/* mini-visuels des deep-dive */
.pay-row{ display:flex; align-items:center; gap:12px; padding:13px 14px; border:1px solid var(--border); border-radius:12px; margin-bottom:10px; }
.pay-row:last-child{ margin-bottom:0; }
.pay-badge{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:11px; color:#fff; flex:none; }
.pay-badge.wave{ background:#1EA0E0; }
.pay-badge.om{ background:#F97A1F; }
.pay-badge.fm{ background:#0F8A6E; }
.pay-meta{ flex:1; min-width:0; }
.pay-meta b{ display:block; font-size:13px; }
.pay-meta span{ font-size:11px; color:var(--ink-faint); }
.pay-amt{ font-size:13px; font-weight:800; font-family:'IBM Plex Mono'; color:var(--green); }

.agenda-day{ font-size:10.5px; font-weight:800; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; margin:14px 0 8px; }
.agenda-day:first-child{ margin-top:0; }
.agenda-row{ display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:9px; }
.agenda-row:hover{ background:var(--surface-2); }
.agenda-time{ width:44px; flex:none; font-size:11px; font-weight:700; color:var(--ink-faint); font-family:'IBM Plex Mono'; }
.agenda-bar{ width:3px; align-self:stretch; border-radius:3px; background:var(--indigo); flex:none; }
.agenda-bar.teal{ background:var(--teal); }
.agenda-bar.amber{ background:var(--amber); }
.agenda-info b{ display:block; font-size:12.5px; }
.agenda-info span{ font-size:11px; color:var(--ink-faint); }

.chat-bubble{ max-width:78%; padding:10px 13px; border-radius:13px; font-size:12.5px; margin-bottom:9px; line-height:1.45; }
.chat-bubble.out{ background:var(--indigo); color:var(--on-brand); margin-left:auto; border-bottom-right-radius:4px; }
.chat-bubble.in{ background:var(--surface-2); border-bottom-left-radius:4px; }
.chat-meta{ font-size:10px; color:var(--ink-faint); margin:4px 0 12px; text-align:center; }

/* ---------- consolidation / pain points ---------- */
.consolidate{ background:var(--ink); color:var(--paper); border-radius:var(--radius-xl); padding:56px 44px; display:flex; align-items:center; gap:56px; }
.consolidate .left{ flex:1; min-width:0; }
.consolidate .left .eyebrow{ background:rgba(255,255,255,.1); color:#9AE9B8; }
.consolidate h2{ font-size:clamp(22px,3vw,30px); font-weight:800; letter-spacing:-.02em; margin-top:14px; }
.consolidate p{ color:#B9CBC0; font-size:14.5px; margin-top:12px; max-width:46ch; }
.swap-grid{ flex:1; min-width:0; display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center; }
.swap-col{ display:flex; flex-direction:column; gap:9px; }
.swap-col.before .swap-item{ color:#87A191; text-decoration:line-through; text-decoration-color:#3B1616; opacity:.75; }
.swap-item{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; padding:9px 11px; border-radius:9px; background:rgba(255,255,255,.05); }
.swap-col.after .swap-item{ background:rgba(104,222,149,.16); color:#ECF4EF; }
.swap-item svg{ width:14px; height:14px; flex:none; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; }
.swap-arrow{ color:#4B5B50; }
.swap-arrow svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; }
@media (max-width:900px){ .consolidate{ flex-direction:column; padding:36px 24px; } .swap-grid{ width:100%; grid-template-columns:1fr; } .swap-arrow{ display:none; } }

/* ---------- sécurité / confiance ---------- */
.trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.trust-card{ border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); padding:24px; display:flex; flex-direction:column; gap:10px; }
.trust-card .cap-icn{ background:var(--surface-2); color:var(--ink-soft); }
.trust-card h3{ font-size:14.5px; font-weight:800; }
.trust-card p{ font-size:12.5px; color:var(--ink-soft); line-height:1.55; }
@media (max-width:820px){ .trust-grid{ grid-template-columns:1fr; } }

/* ---------- FAQ ---------- */
.faq{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.faq-item{ border:1px solid var(--border); border-radius:13px; background:var(--surface); overflow:hidden; }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 20px; font-size:14px; font-weight:700; text-align:left; }
.faq-q svg{ width:17px; height:17px; stroke:var(--ink-faint); fill:none; stroke-width:2.2; stroke-linecap:round; flex:none; transition:transform .18s ease; }
.faq-item.open .faq-q svg{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .22s ease; }
.faq-a p{ padding:0 20px 18px; font-size:13.5px; color:var(--ink-soft); line-height:1.6; max-width:64ch; }

/* ---------- CTA final ---------- */
.cta-final{
  text-align:center; border-radius:var(--radius-xl); padding:64px 32px; position:relative; overflow:hidden;
  background:linear-gradient(135deg, #166534 0%, #14532D 100%); color:#fff;
}
.cta-final::before{
  content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(circle at 15% 20%, rgba(255,255,255,.14) 0, transparent 40%),
                    radial-gradient(circle at 85% 85%, rgba(255,255,255,.1) 0, transparent 36%);
}
.cta-final > *{ position:relative; }
.cta-final h2{ font-size:clamp(24px,3.6vw,34px); font-weight:800; letter-spacing:-.02em; }
.cta-final p{ color:#D3F0DD; font-size:14.5px; margin:12px 0 26px; }
.cta-final .hero-cta{ margin-top:0; }
.cta-final .btn.ghost{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.28); color:#fff; }
.cta-final .btn.ghost:hover{ background:rgba(255,255,255,.18); }
.cta-final .btn.primary{ background:#fff; color:#14532D; box-shadow:0 10px 24px -10px rgba(0,0,0,.35); }
.cta-final .btn.primary:hover{ background:#EAF7EE; }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--border); padding:48px 0 32px; margin-top:20px; }
.foot-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:36px; }
.foot-brand{ max-width:280px; display:flex; flex-direction:column; gap:12px; }
.foot-brand p{ font-size:12.5px; color:var(--ink-faint); line-height:1.6; }
.foot-cols{ display:flex; gap:56px; flex-wrap:wrap; }
.foot-col h4{ font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); margin-bottom:12px; }
.foot-col a, .foot-col span{ display:block; font-size:13px; color:var(--ink-soft); padding:5px 0; }
.foot-col a:hover{ color:var(--ink); }
.foot-bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:24px; border-top:1px solid var(--border); font-size:11.5px; color:var(--ink-faint); }
@media (max-width:760px){ .foot-top{ flex-direction:column; gap:28px; } }

/* ---------- reveal-on-scroll ---------- */
[data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
[data-reveal].in{ opacity:1; transform:translateY(0); }

@media (max-width:640px){
  .wrap{ padding-inline:20px; }
  .section{ padding:60px 0; }
  .mock-body{ min-height:0; }
}

/* ---------- bouton compact ---------- */
.btn.sm{ padding:9px 16px; font-size:12.5px; border-radius:9px; }

/* ==========================================================================
   Connexion / recherche d'établissement (§59, devenue modal en §59bis) —
   reprend telle quelle la logique de l'ancienne porte d'accueil
   (assets/js/tenant-gate.js, IDs inchangés : tenantSearch/tenantResults/
   tenantCode…), montée maintenant dans #connexionModal (voir bloc modal
   ci-dessous) plutôt que dans une section affichée en page — la
   recherche d'établissement ne concerne qu'un visiteur qui a déjà un
   compte, elle n'a pas besoin d'être visible par défaut sur la vitrine.
   ========================================================================== */
.tenant-gate label{ display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:7px; }
.tenant-search-row{ position:relative; }
.tenant-search-row input, .tenant-code input{
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:10px;
  font-size:14px; font-family:inherit; background:var(--paper); color:var(--ink);
}
.tenant-search-row input:focus, .tenant-code input:focus{ outline:2px solid var(--indigo); outline-offset:1px; border-color:transparent; }
.tenant-results{
  position:absolute; left:0; right:0; top:calc(100% + 6px); background:var(--surface);
  border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg);
  max-height:280px; overflow-y:auto; z-index:20;
}
.tenant-result{ display:flex; align-items:center; gap:10px; padding:11px 14px; cursor:pointer; border-bottom:1px solid var(--border); }
.tenant-result:last-child{ border-bottom:none; }
.tenant-result:hover{ background:var(--surface-2); }
.tenant-result .badge{ border-radius:8px; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; flex:none; }
.tenant-result .meta{ flex:1; min-width:0; display:flex; flex-direction:column; }
.tenant-result .meta b{ font-size:13px; font-weight:700; }
.tenant-result .meta span{ font-size:11px; color:var(--ink-faint); }
.tenant-result .tag{ font-size:10px; font-weight:700; padding:3px 8px; border-radius:999px; background:var(--amber-soft); color:var(--amber); flex:none; }
.tenant-empty{ padding:14px; font-size:12.5px; color:var(--ink-faint); text-align:center; }
.tenant-code{ display:flex; gap:8px; margin-top:14px; }
.tenant-code input{ flex:1; }
.tenant-gate-error{ margin-top:10px; font-size:12.5px; color:var(--red); }
.tenant-gate-links{ margin-top:16px; text-align:center; }
.link-btn{ font-size:12.5px; font-weight:700; color:var(--indigo); text-decoration:underline; text-underline-offset:2px; }
.connexion-hq{ margin-top:22px; padding-top:18px; border-top:1px solid var(--border); text-align:center; font-size:12px; }
.connexion-hq a{ color:var(--ink-faint); font-weight:600; }
.connexion-hq a:hover{ color:var(--ink); }

/* ==========================================================================
   Modal « Essayer la démo » (§59) — capture de lead, POST /public/demo-
   requests (voir DECISIONS.md), sans authentification.
   ========================================================================== */
body.modal-open{ overflow:hidden; }
.modal-overlay{
  position:fixed; inset:0; background:rgba(10,12,23,.5); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:200;
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal{
  width:100%; max-width:480px; max-height:88vh; overflow-y:auto; background:var(--surface);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); padding:30px 28px;
  transform:translateY(10px); transition:transform .18s ease;
}
.modal-overlay.open .modal{ transform:translateY(0); }
.modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:4px; }
.modal-head h3{ font-size:19px; font-weight:800; letter-spacing:-.01em; }
.modal-close{ width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--ink-faint); flex:none; }
.modal-close:hover{ background:var(--surface-2); color:var(--ink); }
.modal-close svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }
.modal-sub{ font-size:13px; color:var(--ink-soft); margin-bottom:22px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:6px; }
.field label .opt{ font-weight:500; color:var(--ink-faint); }
.field input, .field select, .field textarea{
  width:100%; padding:11px 13px; border:1px solid var(--border); border-radius:10px;
  font-size:13.5px; font-family:inherit; background:var(--paper); color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--indigo); outline-offset:1px; border-color:transparent; }
.field textarea{ resize:vertical; min-height:70px; }
.form-row{ display:flex; gap:12px; }
.form-row .field{ flex:1; min-width:0; }
.form-error{ font-size:12.5px; color:var(--red); margin-bottom:12px; display:none; }
.form-error.show{ display:block; }
.modal-submit{ width:100%; margin-top:4px; }
.form-success{ text-align:center; padding:18px 0 4px; }
.form-success .ok-icn{
  width:52px; height:52px; border-radius:50%; background:var(--green-soft); color:var(--green);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
}
.form-success .ok-icn svg{ width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.form-success h3{ font-size:17px; font-weight:800; margin-bottom:8px; }
.form-success p{ font-size:13px; color:var(--ink-soft); }
@media (max-width:520px){
  .modal{ padding:24px 20px; }
  .form-row{ flex-direction:column; gap:0; }
}