/* =========================================================
   CELIQUE — design tokens
   Le violet parle du site public, le cyan/teal de l'espace
   privé, le corail est réservé à l'action. La couleur porte
   le sens du duo public / privé partout sur le site.
   ========================================================= */
:root {
  --paper:#f6f7fb;
  --surface:#ffffff;
  --surface-2:#fbfbfe;
  --ink:#161a2c;
  --ink-soft:#565c78;
  --ink-faint:#8b90a8;
  --line:rgba(22,26,44,.09);
  --line-strong:rgba(22,26,44,.16);

  --public:#5b3df0;
  --public-soft:rgba(91,61,240,.08);
  --public-line:rgba(91,61,240,.28);

  --admin:#00879f;
  --admin-soft:rgba(0,135,159,.09);
  --admin-line:rgba(0,135,159,.30);

  --action:#e2542f;
  --action-soft:rgba(226,84,47,.10);

  --shadow-soft: 0 1px 2px rgba(22,26,44,.05), 0 14px 34px rgba(22,26,44,.06);
  --shadow-lift: 0 18px 40px rgba(22,26,44,.10), 0 2px 6px rgba(22,26,44,.06);

  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:11px;

  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;

  --container:1180px;
  --gutter:clamp(20px, 5vw, 56px);
}

* { box-sizing:border-box }
html,body { height:100% }

html{
  background:
    radial-gradient(1000px 620px at 6% -10%, rgba(91,61,240,.15), transparent 60%),
    radial-gradient(900px 560px at 106% 4%, rgba(0,135,159,.13), transparent 55%),
    radial-gradient(1300px 820px at 50% 116%, rgba(226,84,47,.10), transparent 60%),
    var(--paper);
  min-height:100%;
}

body {
  margin:0;
  font:16px/1.65 var(--font-body);
  color:var(--ink);
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  background:transparent;
  -webkit-font-smoothing:antialiased;
}

a { color:inherit }
h1,h2,h3 { font-family:var(--font-display); letter-spacing:-.01em; }

/* Fond animé : masses de couleur floues, en parallax léger au scroll */
.lp-bg { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.lp-bg-blob {
  position:absolute; border-radius:50%; filter:blur(74px);
  opacity:.22; will-change:transform;
}
.lp-bg-blob-1 { width:520px; height:520px; top:-140px; left:-100px; background:var(--public); }
.lp-bg-blob-2 { width:460px; height:460px; top:32vh; right:-160px; background:var(--admin); }
.lp-bg-blob-3 { width:440px; height:440px; top:82vh; left:14%; background:var(--action); }
@media (max-width:760px){
  .lp-bg-blob { filter:blur(56px); opacity:.19; }
  .lp-bg-blob-1 { width:340px; height:340px; }
  .lp-bg-blob-2 { width:300px; height:300px; }
  .lp-bg-blob-3 { width:280px; height:280px; }
}

/* Texture de fond très subtile */
.particles::before,.particles::after {
  content:""; position:fixed; inset:-10%;
  background:
    radial-gradient(3.5px 3.5px at 20% 30%, rgba(22,26,44,.05) 45%, transparent 46%) repeat,
    radial-gradient(4.5px 4.5px at 60% 70%, rgba(22,26,44,.04) 45%, transparent 46%) repeat,
    radial-gradient(3px 3px at 80% 20%, rgba(22,26,44,.04) 45%, transparent 46%) repeat;
  background-size:190px 190px, 250px 250px, 210px 210px;
  animation: drift 46s linear infinite;
  pointer-events:none;
  z-index:0;
}
.particles::after { animation-duration:62s; opacity:.5 }
@keyframes drift { to { transform:translate3d(2%, -2%, 0) } }

/* ---------- Boutons ---------- */
.btn {
  appearance:none;
  border:1px solid var(--line-strong);
  background:var(--surface);
  color:var(--ink);
  padding:12px 20px;
  border-radius:999px;
  cursor:pointer;
  text-decoration:none;
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.01em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:transform .15s ease, border-color .15s ease, box-shadow .2s ease, background .15s ease;
}
.btn:hover { transform:translateY(-1px); border-color:var(--line-strong); box-shadow:var(--shadow-soft); background:var(--surface-2); }
.btn:active { transform:translateY(0); }
.btn.primary {
  border:0;
  color:#fff;
  background:linear-gradient(90deg, var(--public), var(--admin));
  box-shadow:0 10px 26px rgba(91,61,240,.28);
}
.btn.primary:hover { box-shadow:0 14px 32px rgba(91,61,240,.36); filter:brightness(1.03); }
.btn:focus-visible, a:focus-visible, button:focus-visible, [contenteditable]:focus-visible {
  outline:2px solid var(--admin); outline-offset:2px;
}

/* Petite marque (utilisée dans la nav) */
.logo {
  width:30px; height:30px; border-radius:9px;
  background:
    radial-gradient(circle at 30% 30%, #fff 0 10%, transparent 11%) no-repeat,
    conic-gradient(from 90deg, var(--public), var(--admin), var(--action), var(--public));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 6px 14px rgba(22,26,44,.14);
  position:relative;
}

/* Texte en dégradé, lisible sur fond clair */
.gradient-text {
  background: linear-gradient(90deg, var(--public), var(--admin) 60%, var(--action) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .particles::before,.particles::after { animation:none }
}

/* =========================================================
   TRANSITIONS DE PAGE (inchangé dans son fonctionnement)
   ========================================================= */
:root{
  --pt-duration: 560ms;
  --pt-ease: cubic-bezier(.25,.8,.25,1);
  --pt-scale-out: 1.12;
  --pt-scale-in: 0.94;
}
#page-shell{ transform-origin: 50% 50%; will-change: transform, opacity, filter; position:relative; z-index:1; }
.pt-out #page-shell{
  transform: scale(var(--pt-scale-out)); opacity: 0; filter: blur(.5px);
  transition: transform var(--pt-duration) var(--pt-ease), opacity var(--pt-duration) var(--pt-ease), filter 280ms ease;
}
.pt-enter-start #page-shell{ transform: scale(var(--pt-scale-in)); opacity: 0; filter: blur(.4px); }
.pt-enter-active #page-shell{
  transform: scale(1); opacity: 1; filter: blur(0);
  transition: transform var(--pt-duration) var(--pt-ease), opacity var(--pt-duration) var(--pt-ease), filter 320ms ease;
}
@media (prefers-reduced-motion: reduce){
  .pt-out #page-shell,.pt-enter-start #page-shell,.pt-enter-active #page-shell{
    transition:none !important; transform:none !important; opacity:1 !important; filter:none !important;
  }
}

/* =========================================================
   MENTIONS LÉGALES
   ========================================================= */
.page-legal { overflow:auto; }
main.legal { max-width:900px; margin:0 auto; padding:56px var(--gutter) 80px; font-size:16px; line-height:1.7; }
main.legal h1 { font-size:2rem; margin:0 0 20px; }
main.legal h2 { font-size:1.15rem; margin-top:30px; color:var(--admin); }
main.legal p { margin:0 0 12px; color:var(--ink-soft); }
main.legal a { color:var(--public); font-weight:600; text-decoration:none; }
main.legal a:hover { text-decoration:underline; }
main.legal .box {
  background:var(--surface); border:1px solid var(--line);
  padding:20px; border-radius:var(--radius-md); margin:14px 0; box-shadow:var(--shadow-soft);
}
.legal-header { display:flex; align-items:center; gap:10px; }
.legal-header h1 { margin:0; display:flex; align-items:center; line-height:1.2; }
.legal-header .gradient-text { display:inline-block; padding-bottom:3px; }
.back-mobile {
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px;
  background:var(--surface); border:1px solid var(--line-strong); color:var(--ink);
  box-shadow:var(--shadow-soft);
  transition:transform .15s ease, border-color .15s ease, box-shadow .2s ease;
}
.back-mobile:hover { transform:translateY(-1px); }
.back-mobile svg { display:block; width:1.6em; height:1.6em; stroke-width:2.2; }
@media (max-width:560px){ .back-mobile { display:inline-flex; } }

/* =========================================================
   LANDING PAGE
   ========================================================= */
.lp #page-shell { display:flex; flex-direction:column; min-height:100vh; }
.lp main.lp-main { flex:1; }

.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--admin); margin-bottom:16px;
}
.lp-lead { color:var(--ink-soft); font-size:clamp(16px,1.7vw,19px); max-width:640px; line-height:1.6; }

.lp-container { max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); }
.lp-section { padding:clamp(96px,14vw,168px) 0; }
.lp-section-head { max-width:720px; margin:0 auto 64px; }
.lp-section-head.center { margin-inline:auto; text-align:center; }
.lp-section-head.center .lp-lead { margin-inline:auto; }
.lp-section h2 { font-size:clamp(32px,4.4vw,52px); line-height:1.12; letter-spacing:-.02em; margin:0 0 18px; }

/* ---------- Reveal au scroll (easing plus feutré, plus premium) ---------- */
.reveal { opacity:0; transform:translateY(36px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.in-view { opacity:1; transform:none; }
.reveal-stagger > * { opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal-stagger.in-view > * { opacity:1; transform:none; }
.reveal-stagger.in-view > *:nth-child(1){ transition-delay:.03s }
.reveal-stagger.in-view > *:nth-child(2){ transition-delay:.11s }
.reveal-stagger.in-view > *:nth-child(3){ transition-delay:.19s }
.reveal-stagger.in-view > *:nth-child(4){ transition-delay:.27s }
.reveal-stagger.in-view > *:nth-child(5){ transition-delay:.35s }

/* ---------- Nav ---------- */
.lp-nav {
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:22px;
  padding:14px var(--gutter);
  backdrop-filter:blur(14px) saturate(160%);
  background:rgba(246,247,251,.72);
  border-bottom:1px solid var(--line);
}
.lp-nav-brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-family:var(--font-display); font-weight:700; letter-spacing:.01em; font-size:1.02rem; }
.lp-nav-links { display:flex; gap:26px; margin-left:6px; flex:1; }
.lp-nav-links a { color:var(--ink-soft); text-decoration:none; font-size:.92rem; font-weight:600; transition:color .15s ease; }
.lp-nav-links a:hover { color:var(--ink); }
.lp-nav-cta { padding:10px 20px; font-size:.88rem; white-space:nowrap; }
@media (max-width:760px){ .lp-nav-links { display:none; } .lp-nav { justify-content:space-between; } }

/* ---------- Hero ---------- */
.lp-hero {
  display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:56px;
  max-width:var(--container); margin:0 auto; padding:104px var(--gutter) 128px;
  position:relative; z-index:1; overflow:hidden;
}
.lp-hero-text { position:relative; z-index:1; }
.lp-hero-text h1 { margin:18px 0 8px; font-size:clamp(38px,5.6vw,64px); line-height:1.08; letter-spacing:-.025em; }
.lp-hero-chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.lp-chip {
  font-family:var(--font-mono); font-size:.74rem; padding:7px 13px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-soft);
  box-shadow:var(--shadow-soft);
}
.lp-hero-cta { display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }

/* Vidéo de fond du hero : oiseaux en très léger arrière-plan, jamais au premier
   plan. Flou léger + fondu sur les bords (surtout en bas) pour qu'elle se
   dissolve naturellement dans la page au scroll, sans bord visible. */
.lp-hero-video {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  mask-image:radial-gradient(ellipse 85% 72% at 50% 22%, black 38%, rgba(0,0,0,.45) 62%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 85% 72% at 50% 22%, black 38%, rgba(0,0,0,.45) 62%, transparent 100%);
}
.lp-hero-video-el {
  width:100%; height:100%; object-fit:cover; object-position:center top;
  filter:blur(2.5px) saturate(1.05);
  opacity:.4;
}
@media (max-width:760px){
  /* Recentre sur la partie droite (où sont les oiseaux), sans zoomer. */
  .lp-hero-video-el { object-position:right top; }
}
@media (prefers-reduced-motion: reduce){
  .lp-hero-video { display:none; }
}

/* -- Démo double-panneau du hero -- */
.lp-demo { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; position:relative; z-index:1; }
.lp-demo-pane {
  border-radius:var(--radius-md); overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow-lift);
}
.lp-demo-public { box-shadow:0 22px 46px rgba(91,61,240,.14); }
.lp-demo-admin { box-shadow:0 22px 46px rgba(0,135,159,.14); }

.lp-chrome { display:flex; align-items:center; gap:6px; padding:10px 12px; background:var(--surface-2); border-bottom:1px solid var(--line); }
.lp-chrome span:nth-child(1),.lp-chrome span:nth-child(2),.lp-chrome span:nth-child(3){ width:8px; height:8px; border-radius:50%; background:var(--line-strong); }
.lp-chrome-dark { background:var(--admin-soft); }
.lp-chrome-url { margin-left:10px; font-family:var(--font-mono); font-size:.68rem; color:var(--ink-faint); }

.lp-demo-body { padding:22px; }
.lp-demo-card { display:flex; flex-direction:column; gap:12px; }
.lp-demo-img { height:66px; border-radius:10px; background:linear-gradient(135deg, var(--public), var(--admin)); opacity:.85; }
.lp-demo-line { height:10px; border-radius:6px; background:var(--line-strong); width:70%; }
.lp-demo-title { width:55%; }
.lp-demo-price { height:auto; background:none; width:auto; font-family:var(--font-mono); font-size:1.15rem; font-weight:600; color:var(--public); transition:opacity .25s ease; }
.lp-demo-field { display:flex; flex-direction:column; gap:7px; font-size:.75rem; color:var(--ink-faint); }
.lp-demo-input { font-family:var(--font-mono); font-size:1rem; color:var(--admin); padding:10px 12px; border-radius:9px; background:var(--admin-soft); border:1px solid var(--admin-line); transition:opacity .25s ease; }
.lp-demo-btn { margin-top:14px; text-align:center; padding:10px; border-radius:9px; background:linear-gradient(90deg, var(--admin), var(--public)); font-size:.82rem; font-weight:700; color:#fff; }
.lp-demo-label { display:block; text-align:center; padding:9px; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); border-top:1px solid var(--line); }
.lp-demo-label-admin { color:var(--admin); }
.lp-demo-sync { display:flex; align-items:center; justify-content:center; width:60px; height:100%; }
.lp-demo-pulse { display:block; width:11px; height:11px; border-radius:50%; background:linear-gradient(90deg, var(--public), var(--admin)); box-shadow:0 0 0 0 rgba(91,61,240,.35); animation: lp-pulse 2.2s ease-in-out infinite; }
@keyframes lp-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(91,61,240,.28); } 50% { box-shadow:0 0 0 11px rgba(0,135,159,0); } }

@media (max-width:900px){
  .lp-hero { grid-template-columns:1fr; padding-top:44px; gap:36px; }
  .lp-demo { grid-template-columns:1fr; gap:16px; }
  .lp-demo-sync { width:100%; height:26px; transform:rotate(90deg); }
}

/* ---------- Histoire animée au scroll (scrubbing SVG) ---------- */
.lp-story { height:260vh; position:relative; z-index:1; }
.lp-story-sticky {
  position:sticky; top:0; height:100vh; min-height:520px;
  display:flex; align-items:center; overflow:hidden;
}
.lp-story-inner { display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; }
.lp-story-caption { position:relative; height:64px; width:100%; text-align:center; }
.lp-story-line {
  position:absolute; inset:0; margin:0 auto; max-width:560px;
  font-family:var(--font-display); font-size:clamp(19px,2.6vw,28px); line-height:1.3;
  color:var(--ink); opacity:0; transition:opacity .45s ease;
}
.lp-story-line.is-active { opacity:1; }
#storySvg { width:min(760px, 88vw); height:auto; margin-top:18px; }

#storyLineFlow.is-active { animation: lp-flow .9s linear infinite; }
@keyframes lp-flow { to { stroke-dashoffset:-18; } }

#storyImpact.is-active { animation: lp-impact 1.1s ease-out infinite; }
@keyframes lp-impact {
  0% { r:4; opacity:.7; stroke-width:3; }
  100% { r:34; opacity:0; stroke-width:.5; }
}

#storyLeftPriceBar.is-hit { animation: lp-bar-hit 1.1s ease-out infinite; }
@keyframes lp-bar-hit {
  0% { opacity:.3; }
  15% { opacity:1; }
  100% { opacity:.3; }
}

@media (max-width:760px){
  .lp-story { height:190vh; }
  .lp-story-sticky { min-height:440px; }
}

/* Etat statique (prefers-reduced-motion) : plus de scroll-jacking, état final affiché */
.lp-story.story-static { height:auto; padding:64px 0; }
.lp-story.story-static .lp-story-sticky { position:relative; height:auto; min-height:0; }

/* ---------- Constat ---------- */
.lp-problem-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.lp-problem-card {
  padding:40px 32px; background:var(--surface);
}
.lp-problem-kicker { font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-faint); margin:0 0 16px; }
.lp-problem-card p:last-child { color:var(--ink-soft); margin:0; font-size:1.02rem; line-height:1.55; }
.lp-problem-alt { background:linear-gradient(165deg, var(--admin-soft), var(--surface) 65%); }
.lp-problem-alt .lp-problem-kicker { color:var(--admin); }
@media (max-width:900px){ .lp-problem-grid { grid-template-columns:1fr; } }

/* ---------- Système ---------- */
.lp-features { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-bottom:40px; background:var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.lp-feature { padding:44px 36px; background:var(--surface); }
.lp-feature-tag { display:inline-block; font-family:var(--font-mono); font-size:.68rem; padding:5px 11px; border-radius:999px; letter-spacing:.06em; text-transform:uppercase; background:var(--public-soft); color:var(--public); margin-bottom:20px; }
.lp-feature-tag-admin { background:var(--admin-soft); color:var(--admin); }
.lp-feature h3 { font-size:clamp(1.2rem,1.6vw,1.5rem); margin:0 0 12px; letter-spacing:-.01em; }
.lp-feature p { color:var(--ink-soft); margin:0 0 20px; font-size:1.02rem; line-height:1.55; }
.lp-feature-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.lp-feature-list li { color:var(--ink-soft); font-size:.94rem; padding-left:24px; position:relative; }
.lp-feature-list li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--public); font-weight:700; }
.lp-feature-admin .lp-feature-list li::before { color:var(--admin); }
@media (max-width:800px){ .lp-features { grid-template-columns:1fr; } }

.lp-marquee {
  overflow:hidden; width:100%; margin-top:8px;
  mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.lp-marquee-track { display:flex; gap:12px; width:max-content; animation:lp-marquee-scroll 28s linear infinite; }
.lp-marquee:hover .lp-marquee-track { animation-play-state:paused; }
@keyframes lp-marquee-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.lp-audience-item {
  font-size:.88rem; color:var(--ink-soft); padding:9px 15px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); white-space:nowrap; flex:0 0 auto;
}
@media (prefers-reduced-motion: reduce){
  .lp-marquee { mask-image:none; -webkit-mask-image:none; }
  .lp-marquee-track { animation:none; flex-wrap:wrap; width:auto; }
  .lp-marquee-track [aria-hidden="true"] { display:none; }
}

/* ---------- Essai en direct : cadre distinct du reste du site ---------- */
.lp-live-frame {
  position:relative; border-radius:32px; padding:clamp(18px,3vw,30px);
  background:linear-gradient(175deg, rgba(91,61,240,.055), rgba(0,135,159,.05));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.lp-live-frame-bar {
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--admin); background:var(--surface); border:1px solid var(--line);
  padding:8px 15px; border-radius:999px; margin-bottom:22px; box-shadow:var(--shadow-soft);
}
.lp-live-frame-dot { width:7px; height:7px; border-radius:50%; background:var(--action); animation: lp-blink 1.7s ease-in-out infinite; }
@keyframes lp-blink { 0%,100% { opacity:1 } 50% { opacity:.28 } }

.lp-live-heading-mobile { display:none; }
@media (max-width:900px){
  .lp-live-heading-desktop { display:none; }
  .lp-live-heading-mobile { display:inline; }
}

.lp-live-stage { display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; }
.lp-live-pane { display:flex; flex-direction:column; border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-lift); }
.lp-live-admin-pane { box-shadow:0 22px 46px rgba(0,135,159,.12); }
.lp-live-public-pane { box-shadow:0 22px 46px rgba(91,61,240,.12); background:var(--demo-bg, var(--surface)); transition:background .35s ease; }
.lp-live-public-pane.theme-flash { animation: lp-pane-flash 1.1s ease; }
@keyframes lp-pane-flash { 0% { filter:brightness(1); } 28% { filter:brightness(1.07); } 100% { filter:brightness(1); } }
.lp-live-sync { display:flex; align-items:center; justify-content:center; width:60px; }
.lp-live-sync .lp-demo-pulse.is-firing { animation: lp-pulse-fire .65s ease; }
@keyframes lp-pulse-fire {
  0% { transform:scale(1); box-shadow:0 0 0 0 rgba(91,61,240,.4); }
  55% { transform:scale(2.2); box-shadow:0 0 0 13px rgba(0,135,159,0); }
  100% { transform:scale(1); box-shadow:0 0 0 0 rgba(0,135,159,0); }
}

/* Onglets admin */
.lp-live-tabs { display:flex; gap:4px; padding:12px 12px 0; }
.lp-live-tab {
  flex:1; padding:9px 8px; border-radius:9px 9px 0 0; border:none; cursor:pointer;
  background:transparent; color:var(--ink-faint); font-family:var(--font-mono); font-size:.72rem; font-weight:600;
  border-bottom:2px solid transparent; transition:color .15s ease, border-color .15s ease;
}
.lp-live-tab.is-active { color:var(--admin); border-color:var(--admin); }
.lp-live-panel { display:none; padding:14px 16px 6px; flex:1; flex-direction:column; }
.lp-live-panel.is-active { display:flex; }

.lp-live-list { display:flex; flex-direction:column; gap:10px; flex:1; }
.lp-live-row { display:flex; align-items:center; gap:10px; padding:11px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line); flex-wrap:wrap; }
.lp-live-row.just-published { animation: lp-row-flash 1s ease; }
@keyframes lp-row-flash {
  0% { box-shadow:0 0 0 0 rgba(0,135,159,.5); }
  55% { box-shadow:0 0 0 8px rgba(0,135,159,0); }
  100% { box-shadow:0 0 0 0 rgba(0,135,159,0); }
}

.lp-live-swatch { width:42px; height:42px; border-radius:10px; flex:0 0 auto; border:1px solid var(--line-strong); background:linear-gradient(135deg, var(--public), var(--admin)); position:relative; }
.lp-live-admin-pane .lp-live-swatch { cursor:pointer; }
.lp-live-swatch-0 { background:linear-gradient(135deg, #5b3df0, #00879f); }
.lp-live-swatch-1 { background:linear-gradient(135deg, #e2542f, #5b3df0); }
.lp-live-swatch-2 { background:linear-gradient(135deg, #00879f, #e2542f); }
.lp-live-swatch-3 { background:linear-gradient(135deg, #5b3df0, #e2542f, #00879f); }

.lp-live-fields { flex:1; min-width:120px; display:flex; flex-direction:column; gap:2px; }
.lp-live-name { font-family:var(--font-display); font-weight:600; font-size:.96rem; }
.lp-live-price { font-family:var(--font-mono); font-size:.85rem; color:var(--admin); }
.lp-live-list-public .lp-live-price { color:var(--demo-accent, var(--public)); }

.lp-live-admin-pane [contenteditable="true"] { border-radius:5px; padding:1px 5px; margin:-1px -5px; outline:none; transition:background .15s ease; }
.lp-live-admin-pane [contenteditable="true"]:hover,
.lp-live-admin-pane [contenteditable="true"]:focus { background:var(--admin-soft); box-shadow:0 0 0 1px var(--admin-line); }

.lp-live-star {
  width:26px; height:26px; border-radius:7px; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--ink-faint); cursor:pointer; font-size:.8rem;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.lp-live-star.is-active { background:#fdf0dd; color:#c98a1c; border-color:#f0d19c; }
.lp-live-badge { display:none; font-family:var(--font-mono); font-size:.62rem; padding:3px 7px; border-radius:999px; background:#fdf0dd; color:#a06914; margin-top:3px; width:fit-content; }
.lp-live-row.is-featured .lp-live-badge { display:inline-block; }
.lp-live-unavail-badge { display:none; font-family:var(--font-mono); font-size:.62rem; padding:3px 7px; border-radius:999px; background:var(--action-soft); color:var(--action); margin-top:3px; width:fit-content; }
.lp-live-row.is-unavailable { opacity:.55; }
.lp-live-row.is-unavailable .lp-live-unavail-badge { display:inline-block; }

.lp-live-avail {
  font-family:var(--font-mono); font-size:.64rem; padding:5px 10px; border-radius:999px;
  border:1px solid var(--admin-line); background:var(--admin-soft); color:var(--admin); cursor:pointer;
  flex:0 0 auto; white-space:nowrap;
}
.lp-live-avail.is-off { border-color:var(--action); background:var(--action-soft); color:var(--action); }

.lp-live-controls { display:flex; gap:4px; flex:0 0 auto; }
.lp-live-controls button { width:27px; height:27px; border-radius:8px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-faint); cursor:pointer; font-size:.85rem; line-height:1; display:flex; align-items:center; justify-content:center; transition:background .15s ease, color .15s ease; }
.lp-live-controls button:hover:not(:disabled) { background:var(--admin-soft); color:var(--admin); }
.lp-live-controls button:disabled { opacity:.3; cursor:default; }
.lp-live-controls .lp-live-del:hover { background:var(--action-soft); color:var(--action); }

.lp-live-add { margin-top:12px; padding:11px; border-radius:10px; cursor:pointer; border:1px dashed var(--admin-line); background:var(--admin-soft); color:var(--admin); font-family:var(--font-mono); font-size:.8rem; font-weight:600; transition:background .15s ease; }
.lp-live-add:hover { background:rgba(0,135,159,.16); }

/* Onglet apparence : palettes de thème */
.lp-theme-intro { color:var(--ink-soft); font-size:.86rem; margin:0 0 16px; line-height:1.55; }
.lp-theme-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.lp-theme-swatch {
  display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; cursor:pointer;
  border:1.5px solid var(--line); background:var(--surface-2); text-align:left;
  transition:border-color .15s ease, transform .15s ease;
}
.lp-theme-swatch:hover { transform:translateY(-1px); }
.lp-theme-swatch.is-active { border-color:var(--admin); box-shadow:0 0 0 3px var(--admin-soft); }
.lp-theme-dot { width:26px; height:26px; border-radius:50%; flex:0 0 auto; border:1px solid rgba(0,0,0,.08); }
.lp-theme-dot-violet { background:linear-gradient(135deg, #5b3df0, #00879f); }
.lp-theme-dot-sable  { background:linear-gradient(135deg, #c07a3e, #8a6a4f); }
.lp-theme-dot-nuit   { background:linear-gradient(135deg, #ffb454, #5b8cff); }
.lp-theme-dot-menthe { background:linear-gradient(135deg, #1f9d6b, #2f6f8f); }
.lp-theme-name { font-size:.82rem; font-weight:700; display:block; }
.lp-theme-sub { font-size:.7rem; color:var(--ink-faint); }

/* Onglet infos : identité de l'établissement */
.lp-live-panel[data-panel="infos"] .lp-field { margin-bottom:14px; }
.lp-live-panel[data-panel="infos"] .lp-field label { font-size:.78rem; }
.lp-live-panel[data-panel="infos"] input { font-size:.9rem; padding:10px 12px; }

/* Barre d'action : valider les modifications */
.lp-live-actions { padding:14px 16px 18px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }
.lp-live-validate { width:100%; }
.lp-live-validate:disabled { opacity:.45; cursor:default; box-shadow:none; transform:none; }
.lp-live-pending { font-family:var(--font-mono); font-size:.72rem; text-align:center; color:var(--ink-faint); transition:color .2s ease; }
.lp-live-pending.is-dirty { color:var(--action); font-weight:600; }
.lp-live-note { font-size:.76rem; color:var(--ink-faint); text-align:center; margin:0; line-height:1.5; }

.lp-live-pane .lp-demo-label { margin-top:auto; }

/* Valeur "volante" pendant la publication : clone flottant qui rejoint sa destination */
.lp-fly-ghost {
  position:fixed; z-index:400; top:0; left:0;
  padding:6px 13px; border-radius:9px;
  background:var(--ghost-color, var(--admin)); color:#fff;
  font-family:var(--font-mono); font-weight:700; font-size:.8rem; white-space:nowrap;
  pointer-events:none; box-shadow:0 12px 26px rgba(22,26,44,.28);
  transform:translate(-50%,-50%) scale(.85); opacity:0;
}
.lp-fly-ghost.lp-fly-dot { padding:0; width:22px; height:22px; border-radius:50%; }

/* Ligne animée réutilisée pour tracer visuellement un trajet gauche→droite */
.lp-fly-track {
  position:fixed; z-index:399; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--ghost-color, var(--admin)), transparent);
  opacity:0; pointer-events:none; transform-origin:0 50%;
}

/* Article supprimé : dissolution rapide plutôt qu'une disparition instantanée */
.lp-live-row.is-dissolving {
  animation: lp-dissolve .42s ease forwards;
  pointer-events:none;
}
@keyframes lp-dissolve {
  0% { opacity:1; transform:scale(1); filter:blur(0); }
  100% { opacity:0; transform:scale(.82); filter:blur(7px); }
}

/* Nouvel article : apparition progressive côté public, pas un pop instantané */
.lp-live-row.is-arriving { opacity:0; transform:scale(.9) translateY(6px); }
.lp-live-row.is-arriving.is-in { opacity:1; transform:none; transition:opacity .38s ease, transform .38s ease; }

/* Réordonnancement (FLIP) : la ligne glisse vers sa nouvelle place */
.lp-live-row.is-flipping { transition:transform .42s cubic-bezier(.3,.7,.2,1); }

/* Aperçu public enrichi : mini-site */
.lp-live-public-pane .lp-chrome { background:color-mix(in srgb, var(--demo-bg, var(--surface)) 80%, black 4%); }
.lp-live-public-hero {
  margin:14px 16px 4px; padding:20px; border-radius:14px;
  background:linear-gradient(135deg, var(--demo-accent, var(--public)), var(--demo-accent-2, var(--admin)));
  color:#fff; transition:background .4s ease;
}
.lp-live-public-hero span { font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; opacity:.85; }
.lp-live-public-hero strong { display:block; font-family:var(--font-display); font-size:1.15rem; margin-top:4px; }
.lp-live-public-hero em { display:block; font-style:normal; font-size:.78rem; opacity:.9; margin-top:2px; }
.lp-live-list-public { padding:14px 16px 16px; }
.lp-live-list-public .lp-live-row { background:color-mix(in srgb, var(--surface) 80%, var(--demo-bg, transparent) 20%); }

@media (max-width:900px){
  .lp-live-stage { grid-template-columns:1fr; gap:16px; }
  .lp-live-sync { display:none; }
}

/* ---------- Déroulé : scroll-pinné ---------- */
.lp-steps { padding-top:clamp(96px,14vw,168px); position:relative; z-index:1; }
.lp-steps-head { max-width:720px; margin:0 auto 8px; }

/* Par défaut (pas de JS, ou avant que le script ne tourne) : simple liste empilée, */
/* lisible et complète — aucune dépendance au scroll-pin pour voir les 5 étapes. */
.lp-steps-pin { position:relative; padding:56px 0; }
.lp-steps-sticky { display:none; }
.lp-steps-track { display:flex; flex-direction:column; gap:56px; max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); }
.lp-steps-static-item { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:clamp(20px,4vw,48px); }
.lp-steps-number-static {
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(48px,9vw,90px); line-height:.85; letter-spacing:-.03em;
  background:linear-gradient(160deg, var(--public), var(--admin));
  background-clip:text; -webkit-background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.lp-steps-copy { max-width:560px; }
.lp-steps-title { font-size:clamp(24px,3vw,32px); line-height:1.15; letter-spacing:-.02em; margin:0 0 10px; }
.lp-steps-desc { font-size:clamp(16px,1.7vw,19px); color:var(--ink-soft); line-height:1.6; margin:0; }

/* JS-only : le mode scroll-pinné façon "closer look", activé par script.js si le
   mouvement n'est pas réduit. Sans cette classe, le CSS ci-dessus reste actif. */
.lp-steps-pin.js-pinned { height:420vh; padding:0; }
.js-pinned .lp-steps-sticky {
  display:flex; position:sticky; top:0; height:100vh;
  align-items:center; overflow:hidden;
}
.js-pinned .lp-steps-stage { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:clamp(24px,5vw,72px); width:100%; position:relative; z-index:1; }
.js-pinned .lp-steps-number { transition:opacity .5s cubic-bezier(.16,1,.3,1); }
.js-pinned .lp-steps-title { transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); }
.js-pinned .lp-steps-desc { transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); }
.lp-steps-dots { position:absolute; right:var(--gutter); bottom:56px; display:none; flex-direction:column; gap:10px; }
.js-pinned .lp-steps-dots { display:flex; }
.lp-steps-dot { width:7px; height:7px; border-radius:50%; background:var(--line-strong); transition:background .3s ease, transform .3s ease; }
.lp-steps-dot.is-active { background:var(--public); transform:scale(1.4); }

/* Fond photo par étape : une image par thème (projet / construction / clavier /
   comptoir / horloge), légèrement floutée, fondue sur les bords — surtout en
   bas — pour qu'aucun contour net ne soit visible. Discret derrière le texte. */
.lp-steps-bg {
  position:absolute; inset:0; z-index:0; overflow:hidden;
  mask-image:radial-gradient(ellipse 100% 78% at 50% 32%, black 32%, rgba(0,0,0,.35) 60%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 100% 78% at 50% 32%, black 32%, rgba(0,0,0,.35) 60%, transparent 100%);
}
.lp-steps-bg-img {
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:blur(3px) saturate(1.05);
  opacity:0; transition:opacity 1s cubic-bezier(.16,1,.3,1);
}
.lp-steps-bg-img.is-active { opacity:.16; }
.lp-steps-bg-img[data-bg="0"] { background-image:url("step-1-projet.webp"); }
.lp-steps-bg-img[data-bg="1"] { background-image:url("step-2-construction.webp"); }
.lp-steps-bg-img[data-bg="2"] { background-image:url("step-3-clavier.webp"); }
.lp-steps-bg-img[data-bg="3"] { background-image:url("step-4-comptoir.webp"); }
.lp-steps-bg-img[data-bg="4"] { background-image:url("step-5-horloge.webp"); }

.js-pinned .lp-steps-track { position:absolute; inset:0; display:flex; flex-direction:column; padding:0; max-width:none; gap:0; }
.js-pinned .lp-steps-trigger { flex:1; }
.js-pinned .lp-steps-static-item { display:none; }

@media (max-width:760px){
  .lp-steps-pin.js-pinned { height:340vh; }
  .js-pinned .lp-steps-stage { grid-template-columns:1fr; gap:20px; }
  .js-pinned .lp-steps-number { font-size:clamp(64px,22vw,110px); }
}

/* ---------- Réalisations ---------- */
.lp-work-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.lp-work-card {
  display:block; border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; color:var(--ink);
  background:var(--surface); box-shadow:var(--shadow-soft);
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1);
}
.lp-work-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.lp-work-chrome { display:flex; gap:6px; padding:10px 12px; width:fit-content; background:rgba(255,255,255,.85); border-radius:0 0 10px 0; }
.lp-work-chrome span { width:7px; height:7px; border-radius:50%; background:var(--line-strong); }
.lp-work-visual { height:200px; position:relative; overflow:hidden; }
.lp-work-visual::after { content:""; position:absolute; inset:0; background:inherit; transform:scale(1.06); transition:transform .6s cubic-bezier(.16,1,.3,1); }
.lp-work-card:hover .lp-work-visual::after { transform:scale(1.14); }
.lp-work-visual-1 { background:linear-gradient(135deg, rgba(91,61,240,.4), rgba(0,135,159,.2)), url("capturele716.webp") center top/cover no-repeat; }
.lp-work-visual-2 { background:linear-gradient(135deg, rgba(226,84,47,.4), rgba(91,61,240,.2)), url("capturerdm.webp") center top/cover no-repeat; }
.lp-work-visual-3 { background:linear-gradient(135deg, rgba(0,135,159,.4), rgba(226,84,47,.25)); }
.lp-work-chrome { position:relative; z-index:1; }
.lp-work-info { padding:24px 22px 28px; }
.lp-work-info h3 { margin:0 0 8px; font-size:1.2rem; letter-spacing:-.01em; }
.lp-work-info p { color:var(--ink-soft); margin:0 0 16px; font-size:.95rem; line-height:1.5; }
.lp-work-link { font-family:var(--font-mono); font-size:.78rem; color:var(--admin); transition:letter-spacing .3s ease; }
.lp-work-card:hover .lp-work-link { letter-spacing:.02em; }
.lp-work-card-soon { opacity:.6; cursor:default; }
.lp-work-card-soon:hover { transform:none; box-shadow:var(--shadow-soft); }
@media (max-width:900px){ .lp-work-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .lp-work-grid { grid-template-columns:1fr; } }

/* ---------- Fiabilité : section sombre plein écran (seule rupture du site) ---------- */
.lp-dark {
  position:relative; z-index:1;
  background:#0c0e18;
  padding:clamp(96px,16vw,200px) 0;
  margin-block:clamp(48px,8vw,88px);
}
.lp-dark-inner { max-width:760px; }
.lp-dark-eyebrow { color:#7d8cff; }
.lp-dark-h2 {
  font-family:var(--font-display); font-weight:700; letter-spacing:-.025em;
  font-size:clamp(34px,5.4vw,64px); line-height:1.08; color:#fff; margin:0 0 24px;
}
.lp-dark-lead { font-size:clamp(16px,1.7vw,19px); line-height:1.6; color:rgba(255,255,255,.62); max-width:640px; margin:0 0 44px; }

.lp-badges { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:8px; }
.lp-badge {
  font-family:var(--font-mono); font-size:.82rem; padding:12px 22px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.82); background:rgba(255,255,255,.04); cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  transition:border-color .3s ease, color .3s ease, background .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.lp-badge:hover { transform:translateY(-2px); border-color:#7d8cff; color:#fff; background:rgba(125,140,255,.14); }
.lp-badge-hint { font-size:.68rem; opacity:.6; }

@media (max-width:760px){ .lp-dark { margin-block:32px; } }

/* ---------- Modales (Firebase / Stripe / hébergement) ---------- */
.lp-modal-overlay {
  position:fixed; inset:0; z-index:90; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(22,26,44,.35); backdrop-filter:blur(3px);
}
.lp-modal-overlay.is-open { display:flex; }
.lp-modal {
  width:min(480px, 100%); max-height:82vh; overflow:auto;
  background:var(--surface); border-radius:var(--radius-lg); border:1px solid var(--line);
  box-shadow:0 30px 70px rgba(22,26,44,.28); padding:30px;
  transform:translateY(10px) scale(.98); opacity:0;
  transition:transform .22s cubic-bezier(.22,.9,.3,1.1), opacity .2s ease;
}
.lp-modal-overlay.is-open .lp-modal { transform:none; opacity:1; }
.lp-modal-close {
  float:right; width:30px; height:30px; border-radius:9px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink-soft); cursor:pointer; font-size:1rem; line-height:1;
}
.lp-modal-close:hover { background:var(--action-soft); color:var(--action); }
.lp-modal h3 { margin:0 0 6px; font-size:1.2rem; clear:both; }
.lp-modal .lp-modal-eyebrow { font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--admin); }
.lp-modal p { color:var(--ink-soft); margin:12px 0 0; font-size:.94rem; }
.lp-modal ul { margin:14px 0 0; padding-left:18px; color:var(--ink-soft); font-size:.92rem; }
.lp-modal li { margin-bottom:6px; }
body.lp-modal-open { overflow:hidden; }

/* ---------- FAQ (accordéon natif <details>, fonctionne sans JS) ---------- */
.lp-faq-list { display:flex; flex-direction:column; gap:1px; background:var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.lp-faq-item { background:var(--surface); }
.lp-faq-item summary {
  cursor:pointer; list-style:none; padding:22px 28px;
  font-family:var(--font-display); font-weight:600; font-size:1.02rem; letter-spacing:-.005em;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  transition:color .2s ease;
}
.lp-faq-item summary::-webkit-details-marker { display:none; }
.lp-faq-item summary::after {
  content:"+"; flex:0 0 auto; font-family:var(--font-display); font-weight:400; font-size:1.4rem; color:var(--ink-faint);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.lp-faq-item[open] summary::after { transform:rotate(45deg); }
.lp-faq-item[open] summary { color:var(--public); }
.lp-faq-item summary:hover { color:var(--public); }
.lp-faq-item p { margin:0; padding:0 28px 26px; color:var(--ink-soft); font-size:.98rem; line-height:1.6; max-width:680px; }
@media (prefers-reduced-motion: no-preference){
  .lp-faq-item p { animation:lp-faq-in .35s cubic-bezier(.16,1,.3,1); }
}
@keyframes lp-faq-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

/* ---------- Contact ---------- */
.lp-contact-wrap { max-width:640px; margin:0 auto; }
.lp-contact-card { padding:clamp(28px,4vw,44px); border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-lift); }
.lp-contact-card .eyebrow { display:flex; justify-content:center; }
.lp-contact-card h2 { text-align:center; }
.lp-contact-card > .lp-lead { text-align:center; margin-inline:auto; }

.lp-form { margin-top:28px; display:flex; flex-direction:column; gap:20px; }
.lp-field { display:flex; flex-direction:column; gap:8px; }
.lp-field label { font-size:.85rem; font-weight:700; color:var(--ink); }
.lp-field .lp-optional { font-weight:500; color:var(--ink-faint); font-size:.78rem; }
.lp-field input[type="text"], .lp-field input[type="email"], .lp-field input[type="tel"], .lp-field textarea {
  font:inherit; font-family:var(--font-body); padding:12px 14px; border-radius:10px;
  border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.lp-field input:focus, .lp-field textarea:focus { outline:none; border-color:var(--admin); box-shadow:0 0 0 3px var(--admin-soft); }
.lp-field textarea { resize:vertical; min-height:96px; }

.lp-radio-group { display:flex; flex-direction:column; gap:8px; }
.lp-radio {
  display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:10px;
  border:1px solid var(--line-strong); background:var(--surface-2); cursor:pointer; font-size:.92rem;
  transition:border-color .15s ease, background .15s ease;
}
.lp-radio:has(input:checked) { border-color:var(--public); background:var(--public-soft); }
.lp-radio input { margin-top:3px; accent-color:var(--public); }

.lp-contact-toggle { display:flex; gap:8px; }
.lp-toggle-btn {
  flex:1; padding:10px; border-radius:10px; border:1px solid var(--line-strong);
  background:var(--surface-2); color:var(--ink-soft); font-weight:700; font-size:.86rem; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.lp-toggle-btn.is-active { border-color:var(--admin); background:var(--admin-soft); color:var(--admin); }
.lp-contact-value { margin-top:10px; }

.lp-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.lp-captcha { display:flex; align-items:center; gap:12px; }
.lp-captcha input { max-width:110px; }
.lp-captcha-q { font-family:var(--font-mono); font-size:.9rem; color:var(--ink-soft); white-space:nowrap; }

.lp-form-note { font-size:.78rem; color:var(--ink-faint); text-align:center; }
.lp-form-submit { margin-top:6px; }
.lp-form-status { font-size:.88rem; text-align:center; padding:12px; border-radius:10px; display:none; }
.lp-form-status.is-visible { display:block; }
.lp-form-status.ok { background:rgba(0,135,159,.1); color:var(--admin); }
.lp-form-status.err { background:var(--action-soft); color:var(--action); }
.lp-field.has-error input, .lp-field.has-error textarea { border-color:var(--action); }
.lp-field-error { font-size:.78rem; color:var(--action); display:none; }
.lp-field.has-error .lp-field-error { display:block; }

/* ---------- Footer ---------- */
.lp-footer { text-align:center; color:var(--ink-faint); font-size:.84rem; padding:36px var(--gutter) 52px; }
.lp-footer a { color:var(--public); font-weight:600; text-decoration:none; }
.lp-footer a:hover { text-decoration:underline; }

/* ---------- Mobile : polish général ---------- */
@media (max-width:640px){
  .lp-section { padding:76px 0; }
  .lp-hero { padding-top:36px; padding-bottom:64px; }
  .lp-hero-cta .btn, .lp-nav-cta { width:100%; }
  .lp-hero-cta { flex-direction:column; }
}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > * { opacity:1; transform:none; transition:none; }
  .lp-demo-pulse { animation:none; }
}

/* ---- Ajouts sécurité : anciens style="" inline déplacés ici (CSP stricte) ---- */
.lp-story-color-initial { opacity: 0; }
.lp-noscript-msg { color: #565c78; text-align: center; padding: 16px; }