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

:root{
  color-scheme: dark;
  --background:#0b0f19; --foreground:#f8f9fa; --card:#111827;
  --primary:#3b82f6; --secondary:#1e293b; --muted:#94a3b8; --border:#334155;
  --risk:#f43f5e; --sidebar:#06080c;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono","JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
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;} }

/* ── 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 30px;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);box-shadow:0 24px 60px rgba(0,0,0,.45);}
.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(3,1fr);gap:18px;}
@media (max-width:900px){ .lp-cartes{grid-template-columns:1fr;} }
.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;}

/* ── 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;}

/* ── chiffres de marché ── */
.lp-chiffres{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  max-width:940px;margin:36px auto 0;text-align:left;
}
@media (max-width:820px){ .lp-chiffres{grid-template-columns:1fr;} }
.lp-chiffres div{border-left:2px solid var(--primary);padding-left:16px;}
.lp-chiffres b{
  display:block;font-family:var(--mono);font-size:30px;font-weight:300;
  letter-spacing:-1px;color:var(--foreground);line-height:1.1;
}
.lp-chiffres span{display:block;margin-top:8px;font-size:13.5px;color:var(--muted);line-height:1.5;}

/* ── 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;}

/* ── tarifs ── */
.lp-tarifs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start;}
@media (max-width:960px){ .lp-tarifs{grid-template-columns:1fr;} }
.lp-tarif{border:1px solid var(--border);background:var(--card);padding:28px 24px;position:relative;}
.lp-tarif-vedette{border-color:var(--primary);}
.lp-ruban{
  position:absolute;top:0;right:0;background:var(--primary);color:#fff;
  font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.12em;padding:4px 10px;
}
.lp-tarif h3{font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px;}
.lp-tarif-desc{font-size:13.5px;color:var(--muted);margin-bottom:22px;min-height:3em;}
.lp-prix{padding:14px 0;border-top:1px solid var(--border);}
.lp-pays{
  display:block;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted);margin-bottom:5px;
}
.lp-prix b{font-family:var(--mono);font-size:23px;font-weight:400;letter-spacing:-.5px;}
.lp-prix i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:3px;}

/* ── modules de la plateforme ── */
.lp-modules{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:44px;}
@media (max-width:900px){ .lp-modules{grid-template-columns:1fr;} }
.lp-module{border:1px solid var(--border);padding:22px 20px;opacity:.55;}
.lp-module-actif{opacity:1;border-color:var(--primary);background:var(--card);}
.lp-module-etat{
  display:inline-block;font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted);margin-bottom:10px;
}
.lp-module-actif .lp-module-etat{color:var(--primary);}
.lp-module b{display:block;font-size:16px;font-weight:600;margin-bottom:8px;}
.lp-module p{font-size:13.5px;color:var(--muted);}

/* ── équipe ── */
.lp-equipe{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:820px;margin:0 auto;text-align:center;}
@media (max-width:760px){ .lp-equipe{grid-template-columns:1fr;} }
.lp-equipe div{border-top:1px solid var(--border);padding-top:16px;}
.lp-equipe b{display:block;font-size:15px;font-weight:600;}
.lp-equipe span{display:block;font-size:12.5px;color:var(--muted);margin-top:4px;}

/* Palier sur devis : pas de prix affiché, donc pas d'étiquette de pays. */
.lp-prix-devis b{font-family:var(--sans);font-size:19px;font-weight:600;}
.lp-prix-devis i{margin-top:5px;}

/* Le délai de mise en valeur est l'argument le plus fort face aux agences,
   dont le time-to-value se compte en mois. Il justifie les frais d'entrée. */
.lp-delai{
  margin-top:14px;padding-left:14px;border-left:2px solid var(--primary);
  font-size:14.5px;
}
.lp-delai b{font-weight:600;}

/* ═══ 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 rgba(59,130,246,.22);
}
.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;}
}
@media (max-width:760px){
  .lp-demo{grid-template-columns:1fr;}
}