/* Klientee — landing publique. Direction B (sombre) reprise de la maquette validée :
   Newsreader (titres, grands chiffres), IBM Plex Sans (texte), IBM Plex Mono (journal,
   surtitres). Aucun style inline (CSP), aucun script. Les animations du journal
   jouent une fois au chargement et s'éteignent avec prefers-reduced-motion. */

:root {
  --lp-bg: #14201e; --lp-surface: #0f1917; --lp-panel: #1d302c; --lp-line: #2c3f3b;
  --lp-ink: #f6f3ee; --lp-ink-2: #b8c9c4; --lp-ink-3: #d8e3e0; --lp-muted: #7f948f;
  --lp-accent: #6fd1c2; --lp-accent-hover: #9be3d8; --lp-warn: #f2c46b; --lp-warm-line: #3d3a2a;
  --lp-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --lp-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --lp-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body.lp { margin: 0; font-family: var(--lp-sans); font-size: 16px; line-height: 1.5; color: var(--lp-ink); background: var(--lp-bg); -webkit-font-smoothing: antialiased; }
.lp a { color: var(--lp-accent); text-decoration: none; }
.lp a:hover { color: var(--lp-accent-hover); }
.lp h1, .lp h2, .lp h3 { margin: 0; font-family: var(--lp-serif); font-weight: 500; }
.lp p, .lp ul { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }

.lp-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; background: radial-gradient(1200px 600px at 20% 0%, var(--lp-panel) 0%, var(--lp-bg) 55%); }
.lp-head, .lp-main, .lp-foot { width: 100%; max-width: 1168px; padding-left: 24px; padding-right: 24px; }
.lp-main { display: flex; flex-direction: column; flex-grow: 1; }

/* ---------------------------------------------------------------- en-tête */
.lp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; padding-bottom: 22px; }
.lp-logo { font-family: var(--lp-serif); font-size: 26px; font-weight: 500; color: var(--lp-ink); }
.lp-logo:hover { color: var(--lp-ink); }
.lp-nav { display: flex; gap: 28px; font-size: 15px; }
.lp-nav a { color: var(--lp-ink-2); padding: 10px 0; }
.lp-nav a:hover { color: var(--lp-ink); }
.lp-head-actions { display: flex; align-items: center; gap: 18px; }
.lp-signin { font-size: 15px; color: var(--lp-ink-2); padding: 10px 0; }
.lp-signin:hover { color: var(--lp-ink); }

/* -------------------------------------------------------------- boutons */
.lp-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: 8px; border: 1px solid transparent; font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none; }
.lp-btn.primary { background: var(--lp-accent); color: var(--lp-bg); }
.lp-btn.primary:hover { background: var(--lp-accent-hover); color: var(--lp-bg); }
.lp-btn.outline { background: transparent; border-color: var(--lp-line); color: var(--lp-ink); font-weight: 500; }
.lp-btn.outline:hover { border-color: var(--lp-muted); color: var(--lp-ink); }
.lp-btn.tall { height: 52px; font-size: 16px; border-radius: 10px; }

/* ------------------------------------------------------------ formulaire URL */
.lp-urlform { display: flex; gap: 10px; }
.lp-urlform input { height: 52px; width: 320px; max-width: 100%; padding: 0 16px; background: var(--lp-surface); border: 1px solid var(--lp-line); border-radius: 10px; color: var(--lp-ink); font-family: var(--lp-mono); font-size: 16px; }
.lp-urlform input::placeholder { color: var(--lp-muted); }
.lp-urlform input:focus { border-color: var(--lp-accent); outline: none; }
.lp-urlform .lp-btn { height: 52px; padding: 0 22px; font-size: 16px; border-radius: 10px; }
.lp-note { font-size: 14px; color: var(--lp-muted); }

/* ------------------------------------------------------------------ héros */
.lp-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 64px 0 80px; }
.lp-hero-copy { display: flex; flex-direction: column; gap: 22px; }
.lp-hero h1 { font-size: 60px; line-height: 1.05; letter-spacing: -0.025em; }
.lp-lede { font-size: 18px; line-height: 1.5; color: var(--lp-ink-2); max-width: 520px; }

.lp-log { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--lp-surface); border: 1px solid var(--lp-line); border-radius: 14px; font-family: var(--lp-mono); font-size: 13.5px; min-width: 0; }
.lp-log-head { display: flex; align-items: center; justify-content: space-between; color: var(--lp-muted); font-size: 12px; }
.lp-status { display: flex; align-items: center; gap: 6px; }
.lp-status .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--lp-accent); }
.lp-log-rows { display: flex; flex-direction: column; gap: 9px; }
.lp-log .row, .lp-log .line { display: flex; gap: 12px; }
.lp-log .row.col { flex-direction: column; gap: 6px; }
.lp-log .t { color: var(--lp-muted); width: 52px; flex-shrink: 0; }
.lp-log .ac, .lp-feed .ac { color: var(--lp-accent); }
.lp-log .wa, .lp-feed .wa, .lp-stat .wa { color: var(--lp-warn); }
.lp-bars { margin-left: 64px; display: flex; flex-direction: column; gap: 5px; font-family: var(--lp-sans); }
.prow { display: flex; align-items: center; gap: 10px; }
.prow .lbl { width: 210px; flex-shrink: 0; color: var(--lp-ink-3); }
.prow .track { flex-grow: 1; height: 6px; background: var(--lp-panel); border-radius: 3px; overflow: hidden; }
.prow .bar { display: block; height: 6px; width: var(--w); background: var(--lp-accent); }
.prow .score { width: 36px; text-align: right; flex-shrink: 0; }
.bar.w92 { --w: 92%; } .bar.w78 { --w: 78%; } .bar.w61 { --w: 61%; }

/* Journal : les lignes montent une à une, la pastille bat pendant l'analyse puis se
   fixe, les barres poussent quand les profils apparaissent. Une fois, au chargement. */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes grow { from { width: 0; } to { width: var(--w); } }
.lp-log .row { animation: rise 0.6s ease both; }
.lp-log .row:nth-child(1) { animation-delay: 0.2s; }
.lp-log .row:nth-child(2) { animation-delay: 1.1s; }
.lp-log .row:nth-child(3) { animation-delay: 2.0s; }
.lp-log .row:nth-child(4) { animation-delay: 2.9s; }
.lp-log .row:nth-child(5) { animation-delay: 3.8s; }
.lp-log .row:nth-child(6) { animation-delay: 4.7s; }
.lp-status .dot { animation: pulse 1.2s ease-in-out 5; }
.prow .bar { animation: grow 1.4s ease-out 3.2s both; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp-log .row, .lp-status .dot, .prow .bar { animation: none; }
}

/* --------------------------------------------------------------- sections */
.lp-section { display: flex; flex-direction: column; gap: 22px; padding: 56px 0; border-top: 1px solid var(--lp-line); }
.lp-intro { display: flex; flex-direction: column; gap: 10px; }
.lp-intro.narrow { max-width: 760px; }
.lp-intro p { font-size: 17px; line-height: 1.55; color: var(--lp-ink-2); }
.lp-eyebrow { font-family: var(--lp-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lp-accent); }
.lp-section h2 { font-size: 40px; line-height: 1.15; letter-spacing: -0.02em; }

/* deux moteurs */
.lp-engines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lp-engine { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--lp-surface); border: 1px solid var(--lp-line); border-radius: 14px; min-width: 0; }
.lp-engine.alt { border-color: var(--lp-warm-line); }
.lp-engine-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lp-engine h3 { font-size: 28px; }
.lp-engine-head span { font-size: 13px; color: var(--lp-muted); }
.lp-feed { font-family: var(--lp-mono); font-size: 13px; color: var(--lp-ink-2); display: flex; flex-direction: column; gap: 7px; padding: 12px 14px; background: var(--lp-bg); border-radius: 10px; }
.lp-feed .t { color: var(--lp-muted); }
.lp-engine ul { padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.5; color: var(--lp-ink-2); }
.lp-measure { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--lp-muted); padding-top: 6px; border-top: 1px solid var(--lp-line); }
.lp-measure strong { color: var(--lp-ink); font-weight: 600; }

/* comment ça marche */
.lp-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.lp-step { display: flex; flex-direction: column; gap: 8px; padding: 18px; background: var(--lp-surface); border: 1px solid var(--lp-line); border-radius: 12px; }
.lp-step .n { font-family: var(--lp-mono); font-size: 13px; color: var(--lp-accent); }
.lp-step .h { font-weight: 600; }
.lp-step .d { font-size: 14px; color: var(--lp-ink-2); line-height: 1.45; }

/* chiffres */
.lp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-stat { display: flex; flex-direction: column; gap: 6px; padding: 24px; background: var(--lp-surface); border: 1px solid var(--lp-line); border-radius: 12px; }
.lp-stat .big { font-family: var(--lp-serif); font-size: 44px; font-weight: 500; line-height: 1; }
.lp-stat .d { font-size: 14px; color: var(--lp-ink-2); }

/* comparaison : un tableau qui défile dans son cadre sur petit écran */
.lp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--lp-line); border-radius: 12px; background: var(--lp-surface); }
.lp-compare { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 15px; }
.lp-compare th, .lp-compare td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--lp-line); font-weight: 400; color: var(--lp-ink-2); }
.lp-compare thead th { font-weight: 600; color: var(--lp-muted); }
.lp-compare thead th.us { color: var(--lp-ink); }
.lp-compare tbody th { color: var(--lp-ink); width: 30%; }
.lp-compare td.us { color: var(--lp-accent); font-weight: 600; }
.lp-compare tbody tr:last-child th, .lp-compare tbody tr:last-child td { border-bottom: none; }

/* tarifs */
.lp-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-plan { display: flex; flex-direction: column; gap: 12px; padding: 26px; background: var(--lp-surface); border: 1px solid var(--lp-line); border-radius: 14px; }
.lp-plan.warm { border-color: var(--lp-warn); }
.lp-plan .name { font-weight: 600; font-size: 18px; }
.lp-plan .price { font-family: var(--lp-serif); font-size: 40px; line-height: 1.1; }
.lp-plan .per { font-size: 16px; color: var(--lp-muted); font-family: var(--lp-sans); }
.lp-plan .d { font-size: 14px; color: var(--lp-ink-2); line-height: 1.5; }
.lp-tiers { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--lp-bg); border-radius: 10px; }
.lp-tiers > div { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--lp-ink-2); }
.lp-tiers b { color: var(--lp-ink); font-weight: 600; font-size: 15px; }
.lp-plan .lp-btn { margin-top: auto; height: 44px; }
.lp-fine { font-size: 13px; color: var(--lp-muted); }

/* questions */
.lp-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; }
.lp-faq h2 { grid-column: 1 / -1; margin-bottom: 8px; line-height: 1.15; }
.lp-faq .q { display: flex; flex-direction: column; gap: 6px; }
.lp-faq h3 { font-family: var(--lp-sans); font-size: 16px; font-weight: 600; }
.lp-faq p { font-size: 15px; color: var(--lp-ink-2); line-height: 1.5; }

/* appel final */
.lp-cta { align-items: center; gap: 18px; padding: 72px 0 80px; text-align: center; }
.lp-cta h2 { font-size: 44px; line-height: 1.1; }
.lp-cta p { font-size: 17px; color: var(--lp-ink-2); }
.lp-cta .lp-urlform { justify-content: center; }
.lp-cta .lp-urlform input { text-align: left; }

/* pied */
.lp-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 40px; font-size: 13px; color: var(--lp-muted); border-top: 1px solid var(--lp-line); }
.lp-foot a { color: var(--lp-muted); }
.lp-foot a:hover { color: var(--lp-ink); }

/* ------------------------------------------------ demande d'analyse, pages légales */
.lp-narrow { display: flex; justify-content: center; padding: 40px 0 72px; }
.lp-card { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 18px; padding: 32px; background: var(--lp-surface); border: 1px solid var(--lp-line); border-radius: 14px; }
.lp-legal { max-width: 760px; gap: 14px; }
.lp-legal h2 { font-family: var(--lp-sans); font-size: 16px; font-weight: 600; margin-top: 10px; }
.lp-legal p { font-size: 15px; color: var(--lp-ink-2); line-height: 1.55; }
.lp-h1-mid { font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; }
.lp-card .lp-lede { font-size: 16px; }
.lp-form { display: flex; flex-direction: column; gap: 16px; }
.lp-field { display: flex; flex-direction: column; gap: 6px; }
.lp-field label { font-size: 14px; font-weight: 600; color: var(--lp-ink-2); }
.lp-field input { height: 52px; padding: 0 16px; background: var(--lp-bg); border: 1px solid var(--lp-line); border-radius: 10px; color: var(--lp-ink); font: inherit; font-size: 16px; }
.lp-field input:focus { border-color: var(--lp-accent); outline: none; }
.lp-field input::placeholder { color: var(--lp-muted); }
.lp-error { font-size: 14px; color: var(--lp-warn); }
.lp-site { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.lp-site .lbl { color: var(--lp-muted); }
.lp-site .val { font-family: var(--lp-mono); color: var(--lp-ink); overflow-wrap: anywhere; }
.lp-site a { font-size: 14px; }
.lp-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* -------------------------------------------------------------- écrans */
@media (max-width: 1100px) {
  .lp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-hero h1 { font-size: 48px; }
}
@media (max-width: 900px) {
  .lp-nav { display: none; }
  .lp-hero { grid-template-columns: 1fr; gap: 32px; padding: 32px 0 48px; }
  .lp-hero h1 { font-size: 40px; }
  .lp-section h2, .lp-cta h2, .lp-h1-mid { font-size: 30px; }
  .lp-engines, .lp-plans, .lp-stats, .lp-faq { grid-template-columns: 1fr; }
  .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-section { padding: 40px 0; }
  .lp-card { padding: 24px 20px; }
  /* cibles tactiles : 44 px au moins */
  .lp-btn { min-height: 44px; }
  .lp-logo, .lp-signin, .lp-nav a, .lp-foot a, .lp-site a { display: inline-flex; align-items: center; min-height: 44px; }
  .lp-foot a { min-width: 44px; justify-content: center; }
}
@media (max-width: 720px) {
  .lp-head { padding-top: 14px; padding-bottom: 14px; }
  .lp-head-cta { display: none; }
  .lp-head, .lp-main, .lp-foot { padding-left: 16px; padding-right: 16px; }
  .lp-urlform { flex-direction: column; }
  .lp-urlform input { width: 100%; }
  .lp-steps { grid-template-columns: 1fr; }
  .lp-log { padding: 14px; font-size: 13px; }
  .lp-bars { margin-left: 0; }
  .prow .lbl { width: 130px; font-size: 13px; line-height: 1.25; }
  .lp-hero h1 { font-size: 36px; }
  .lp-stat .big { font-size: 38px; }
  .lp-plan .price { font-size: 34px; }
  .lp-foot { flex-direction: column; }
}