/* Page commerciale Ibalya — statique, sans dépendance ni étape de build.
   Reprend les jetons de l'application : angles droits, bleu cobalt, mono. */

/* Clair par défaut (blanc chaud), sombre via le bouton (data-theme).
   Jetons alignés sur l'app et le guide : teal #0e7490, serif Fraunces, mono Geist. */
:root{
  color-scheme:light;
  --primary:#0e7490;
  --background:#f7f4f1; --foreground:#22272e; --card:#ffffff;
  --secondary:#efe9e3; --muted:#605a66; --border:#e6ded7; --sidebar:#f1ece7;
  --risk:#b5432a;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Geist Mono","JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
[id]{scroll-margin-top:92px;}
/* Anneau de focus clavier visible (aucun :focus-visible n'était défini). */
a:focus-visible,button:focus-visible,.lp-btn:focus-visible,.lp-theme:focus-visible{
  outline:2px solid var(--primary);outline-offset:3px;
}
.lp-skip{
  position:absolute;left:12px;top:-60px;z-index:100;background:var(--card);color:var(--foreground);
  border:1px solid var(--primary);padding:10px 16px;font-family:var(--mono);font-size:13px;
  text-decoration:none;transition:top .15s;
}
.lp-skip:focus{top:12px;}
body{
  background:var(--background);color:var(--foreground);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit;}
.lp-accent{color:var(--primary);}
.lp-mute{color:var(--muted);}
.lp-surtitre{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.18em;color:var(--muted);margin-bottom:12px;
}

/* ── en-tête ── */
.lp-header{
  height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:0 clamp(20px,5vw,56px);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--background) 85%, transparent);
  backdrop-filter:blur(12px);
}
.lp-logo{display:flex;align-items:center;gap:12px;font-weight:600;font-size:18px;letter-spacing:-.3px;text-decoration:none;}
.lp-mark{width:26px;height:26px;color:var(--primary);flex-shrink:0;}
.lp-nav{display:flex;gap:28px;font-size:14px;}
.lp-nav a{color:var(--muted);text-decoration:none;transition:color .15s;}
.lp-nav a:hover{color:var(--foreground);}
.lp-header-actions{display:flex;align-items:center;gap:16px;}
.lp-lien-discret{color:var(--muted);text-decoration:none;font-size:14px;}
.lp-lien-discret:hover{color:var(--foreground);}
@media (max-width:820px){ .lp-nav,.lp-lien-discret{display:none;} }
/* Sous 560px, le CTA du header déborde (mono, nowrap). On s'appuie sur le CTA du
   hero, juste en dessous ; le header garde logo + bascule de thème. */
@media (max-width:560px){ .lp-header-actions .lp-btn{display:none;} }

/* ── boutons ── */
.lp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border:1px solid var(--border);background:var(--card);
  color:var(--foreground);text-decoration:none;font-size:14px;font-weight:500;
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;
  transition:border-color .15s,background .15s;white-space:nowrap;
}
.lp-btn:hover{border-color:var(--primary);}
.lp-btn-primary{background:var(--primary);border-color:var(--primary);color:#fff;}
.lp-btn-primary:hover{opacity:.9;}
.lp-btn-lg{padding:15px 28px;font-size:14px;}

/* ── accroche ── */
.lp-hero{
  max-width:1240px;margin:0 auto;padding:clamp(48px,8vw,110px) clamp(20px,5vw,48px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;
}
@media (max-width:980px){ .lp-hero{grid-template-columns:1fr;} }
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.lp-hero h1{
  font-size:clamp(34px,5.2vw,60px);font-weight:700;letter-spacing:-.035em;
  line-height:1.08;margin-bottom:26px;
}
.lp-chapeau{font-size:clamp(16px,1.6vw,18px);color:var(--muted);max-width:36em;}
.lp-actions{display:flex;gap:14px;margin:34px 0 14px;flex-wrap:wrap;}
.lp-garanties{list-style:none;display:flex;gap:24px;flex-wrap:wrap;font-family:var(--mono);font-size:12.5px;color:var(--muted);}
.lp-garanties li{display:flex;align-items:center;gap:8px;}
.lp-check{color:var(--primary);font-weight:700;}

/* ── démonstration ── */
.lp-terminal-enveloppe{position:relative;}
.lp-terminal{position:relative;border:1px solid var(--border);background:var(--card);}
.lp-terminal-barre{
  display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--border);
}
.lp-terminal-barre i{width:10px;height:10px;border-radius:50%;background:var(--border);}
.lp-terminal-barre span{
  margin-left:14px;font-family:var(--mono);font-size:11px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em;
}
.lp-terminal-corps{padding:22px 20px;font-family:var(--mono);font-size:13px;line-height:1.85;}
.lp-terminal-corps p{margin-bottom:12px;}
.lp-terminal-corps b{color:var(--primary);margin-right:8px;}
.lp-terminal-corps mark{background:var(--secondary);color:var(--foreground);padding:3px 6px;}
.lp-extraction{border-left:2px solid var(--primary);padding:10px 0 10px 16px;margin:18px 0;}
.lp-extraction p{display:flex;gap:14px;margin-bottom:6px;}
.lp-extraction span{color:var(--muted);width:112px;flex-shrink:0;}
.lp-alerte{color:var(--risk);}
.lp-curseur{color:var(--primary);animation:pulse 1.1s infinite;}

/* ── bandeau problème ── */
.lp-bandeau{
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:var(--card);padding:clamp(40px,6vw,64px) clamp(20px,5vw,48px);text-align:center;
}
.lp-bandeau-texte{max-width:52em;margin:0 auto;font-size:clamp(17px,2vw,21px);color:var(--muted);line-height:1.65;}
.lp-bandeau-texte b{color:var(--foreground);}

/* ── sections ── */
.lp-section{max-width:1240px;margin:0 auto;padding:clamp(56px,8vw,104px) clamp(20px,5vw,48px);}
.lp-section-tete{max-width:44em;margin:0 auto clamp(36px,5vw,56px);text-align:center;}
.lp-section-tete h2{font-size:clamp(25px,3.2vw,34px);font-weight:700;letter-spacing:-.03em;margin-bottom:14px;}
.lp-section-tete p{color:var(--muted);}
.lp-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;}
@media (max-width:900px){ .lp-cartes{grid-template-columns:1fr;} }
/* Colonne de démonstration du chat : lisible et centrée. */
.lp-chat-fil{max-width:640px;margin:0 auto;}
.lp-carte{border:1px solid var(--border);background:var(--card);padding:30px 26px;position:relative;transition:border-color .18s;}
.lp-carte:hover{border-color:var(--primary);}
.lp-numero{
  font-family:var(--mono);font-size:11px;color:var(--primary);
  letter-spacing:.18em;display:block;margin-bottom:16px;
}
.lp-carte h3{font-size:19px;font-weight:600;margin-bottom:12px;letter-spacing:-.02em;}
.lp-carte p{font-size:14.5px;color:var(--muted);}

/* ── sécurité ── */
.lp-securite{
  border-top:1px solid var(--border);background:var(--sidebar);
  padding:clamp(56px,8vw,104px) clamp(20px,5vw,48px);
}
.lp-securite-grille{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center;}
@media (max-width:980px){ .lp-securite-grille{grid-template-columns:1fr;} }
.lp-securite h2{font-size:clamp(24px,3vw,32px);font-weight:700;letter-spacing:-.03em;margin-bottom:16px;}
.lp-liste-securite{list-style:none;margin-top:28px;display:flex;flex-direction:column;gap:15px;}
.lp-liste-securite li{
  font-size:14.5px;color:var(--muted);padding-left:22px;position:relative;line-height:1.55;
}
.lp-liste-securite li::before{content:"–";position:absolute;left:0;color:var(--primary);}
.lp-liste-securite b{color:var(--foreground);font-weight:500;}
.lp-config{
  border:1px solid var(--border);background:#06080c;padding:26px 22px;
  font-family:var(--mono);font-size:12.5px;line-height:2;color:var(--muted);
}
.lp-c-mot{color:#c084fc;}
.lp-c-val{color:#34d399;}
.lp-c-faux{color:#f472b6;}
.lp-c-note{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);color:#5b6272;font-size:11.5px;line-height:1.7;}

/* ── appel à l'action ── */
.lp-cta{text-align:center;padding:clamp(56px,8vw,104px) clamp(20px,5vw,48px);border-top:1px solid var(--border);}
.lp-cta h2{font-size:clamp(25px,3.2vw,34px);font-weight:700;letter-spacing:-.03em;margin-bottom:12px;}
.lp-cta p{color:var(--muted);margin-bottom:30px;}

/* ── FAQ ── */
.lp-faq{max-width:820px;margin:0 auto;}
.lp-faq-item{border-top:1px solid var(--border);padding:22px 2px;}
.lp-faq-item:last-child{border-bottom:1px solid var(--border);}
.lp-faq-item h3{font-size:17px;font-weight:600;margin-bottom:8px;letter-spacing:-.01em;}
.lp-faq-item p{font-size:14.5px;color:var(--muted);line-height:1.6;}

/* Note bêta/invitation sous le CTA du hero. */
.lp-hero-note{font-family:var(--mono);font-size:12px;color:var(--muted);margin:0 0 30px;}
.lp-hero-note b{color:var(--foreground);font-weight:500;}
.lp-hero-note a{color:var(--primary);text-decoration:underline;text-underline-offset:2px;}

/* ── pied de page ── */
.lp-footer{
  border-top:1px solid var(--border);padding:28px;text-align:center;
  font-family:var(--mono);font-size:12px;color:var(--muted);
}
.lp-footer a{color:var(--muted);text-decoration:none;}
.lp-footer a:hover{color:var(--foreground);}
.lp-sep{margin:0 10px;opacity:.4;}

/* ── cartes du vide de marché ── */
.lp-carte-mate{background:transparent;}
.lp-carte-mate:hover{border-color:var(--border);}
.lp-carte-mate h3{font-size:16px;}

/* ═══ démonstration jouée ═══
   Montrer l'agent travailler plutôt que le décrire. Le visiteur voit une
   promesse arriver, l'agent l'extraire, puis alerter huit jours plus tard.
   Tout en CSS : aucune dépendance, quelques kilo-octets, et rien qui sorte
   de la politique de sécurité du contenu. */
.lp-demo{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--border);border:1px solid var(--border);
  margin:0 0 40px;
}
.lp-demo > div{background:var(--card);padding:20px;}
.lp-demo-etiq{
  display:block;font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted);margin-bottom:16px;
}

/* fil de discussion */
.lp-demo-msg{
  border-left:2px solid var(--border);padding:0 0 0 14px;margin-bottom:18px;
}
.lp-demo-msg:last-child{margin-bottom:0;}
.lp-demo-msg b{font-size:13px;font-weight:600;}
.lp-demo-msg i{
  font-style:normal;font-family:var(--mono);font-size:11px;
  color:var(--muted);margin-left:8px;
}
.lp-demo-msg p{font-size:13.5px;line-height:1.55;margin-top:4px;color:var(--muted);}
.lp-demo-msg mark{
  background:none;color:var(--foreground);font-weight:500;
  box-shadow:inset 0 -6px 0 color-mix(in srgb, var(--primary) 22%, transparent);
}
.lp-demo-vous{border-left-color:var(--primary);}

/* ce que l'agent produit */
.lp-demo-carte{
  border:1px solid var(--border);padding:13px 15px;margin-bottom:12px;
}
.lp-demo-carte:last-child{margin-bottom:0;}
.lp-demo-tag{
  display:block;font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted);margin-bottom:7px;
}
.lp-demo-carte p{font-size:13.5px;line-height:1.5;}
.lp-demo-carte dl{display:flex;gap:22px;flex-wrap:wrap;margin-top:11px;}
.lp-demo-carte dt{
  font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);
}
.lp-demo-carte dd{margin:2px 0 0;font-family:var(--mono);font-size:13px;}
.lp-demo-lien{border-left:2px solid var(--primary);}
.lp-demo-alerte{border-color:var(--risk);}
.lp-demo-alerte .lp-demo-tag{color:var(--risk);}
.lp-demo-detail{color:var(--muted);margin-top:3px;}
.lp-demo-action{
  margin-top:11px;padding-top:10px;border-top:1px solid var(--border);
  font-size:12.5px;color:var(--primary);
}

/* Apparition séquencée : le rythme raconte la chronologie — la promesse, puis
   l'extraction, puis l'alerte huit jours plus tard. */
.lp-t1,.lp-t2,.lp-t3,.lp-t4,.lp-t5{
  opacity:0;animation:lp-entre .5s ease forwards;
}
.lp-t1{animation-delay:.15s}
.lp-t2{animation-delay:.55s}
.lp-t3{animation-delay:1.1s}
.lp-t4{animation-delay:1.6s}
.lp-t5{animation-delay:2.3s}
@keyframes lp-entre{
  from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .lp-t1,.lp-t2,.lp-t3,.lp-t4,.lp-t5{animation:none;opacity:1;}
  .lp-curseur{animation:none;}
  html{scroll-behavior:auto;}
}
@media (max-width:760px){
  .lp-demo{grid-template-columns:1fr;}
}

/* ═══ Identité : accent bleu-canard + titres serif (auto-hébergé, CSP-safe) ═══ */
@font-face { font-family:"Fraunces"; font-weight:600; font-display:swap;
  src:url('/fonts/fraunces-600.woff2') format('woff2'); }
@font-face { font-family:"Fraunces"; font-weight:700; font-display:swap;
  src:url('/fonts/fraunces-700.woff2') format('woff2'); }
/* Mono auto-hébergée : --mono la nommait sans jamais la charger → repli Courier. */
@font-face { font-family:"Geist Mono"; font-weight:400; font-display:swap;
  src:url('/fonts/geist-mono-400.woff2') format('woff2'); }
.lp-hero h1, .lp-section-tete h2, .lp-logo { font-family:"Fraunces", Georgia, serif; letter-spacing:-.01em; }
.lp-hero h1, .lp-section-tete h2, .lp-securite h2, .lp-cta h2 { text-wrap:balance; }
.lp-logo { font-weight:600; }
.lp-securite h2, .lp-cta h2, .lp-bandeau-texte b { font-family:"Fraunces", Georgia, serif; }

/* Le bloc de configuration reste sombre : c'est un extrait de terminal montré
   comme un échantillon de code, pas le fond du site. Contraste volontaire. */
.lp-config { background:#161320; color:#c4bfce; }
.lp-c-mot { color:#7dd3fc; }
.lp-c-val { color:#4ade80; }
.lp-c-faux { color:#f9a8d4; }
.lp-c-note { color:#8b8598; }

/* ═══ Bouton de bascule clair / sombre ═══ */
.lp-theme{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--border);background:var(--card);color:var(--muted);cursor:pointer;
  transition:border-color .15s,color .15s;flex-shrink:0;
}
.lp-theme:hover{border-color:var(--primary);color:var(--foreground);}
.lp-theme .i-sun{display:none;}
:root[data-theme="dark"] .lp-theme .i-moon{display:none;}
:root[data-theme="dark"] .lp-theme .i-sun{display:block;}

/* ═══ Thème sombre (variante, activée par le bouton) ═══
   Fond charcoal chaud dé-bleui, teal éclairci pour rester lisible sur sombre. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --primary:#22a4c4;
  --background:#17151c; --foreground:#f4f2f0; --card:#221f2a;
  --secondary:#2c2836; --muted:#a8a2b0; --border:#39333f; --sidebar:#131117;
  --risk:#e07a5f;
}
/* Texte foncé sur le teal vif du bouton en sombre : le blanc échouait au
   contraste (≈3:1). Le reste de --primary sert d'accent clair ailleurs. */
:root[data-theme="dark"] .lp-btn-primary{color:#0b1a1f;}