/* Home page / SEO landing (todos/01-PLAN-REFONTE-ACCUEIL.md) — self-contained
   static CSS for public/accueil.html, served by GET / to anonymous visitors.
   Served verbatim from client/src/public/css/landing.css; NOT part of the Vite
   bundle (the SPA keeps its own /assets/*.css). Brand palette mirrors
   client/src/css/global.css variables; the header/footer blocks mirror
   site-header.css / site-footer.css (same 1024px breakpoint). Mobile-first. */

:root {
  --lp-blue: #00549f;
  --lp-dark: #003f7a;
  --lp-bg: #dff0ff;
  --lp-border: #b8d8f5;
  --lp-hover: #d1e8ff;
  --lp-text: #1a3a5c;
  --lp-muted: #456c90;
  --lp-muted-soft: #5587b3;
  --lp-sidebar: #f0f7ff;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Exo 2", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--lp-text);
  background-color: var(--lp-bg);
}

/* Same waves + grid + halo as the SPA <main> (global.css), applied to <main>
   so the sticky header and the blue footer stay outside the pattern. */
main {
  flex: 1 0 auto;
  background-color: var(--lp-bg);
  background-image:
    url("/images/auroria-wave-left.svg"),
    url("/images/auroria-wave-right.svg"),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.4) 0%, transparent 80%),
    linear-gradient(to right, var(--lp-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--lp-border) 1px, transparent 1px);
  background-position:
    left top,
    right top,
    50% 50%,
    0 0,
    0 0;
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    repeat,
    repeat;
  background-size:
    42% auto,
    42% auto,
    100% 100%,
    30px 30px,
    30px 30px;
  background-blend-mode:
    normal,
    normal,
    soft-light,
    soft-light,
    soft-light;
}

h1,
h2 {
  font-family: "Orbitron", "Exo 2", sans-serif;
  color: var(--lp-dark);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

[hidden] {
  display: none !important;
}

/* ── Site header — static copy of <site-header> (site-header.css) ───────── */
.lp-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lp-border);
}

.lp-site-header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
}

.lp-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  text-decoration: none;
}

.lp-brand-logo {
  height: 32px;
  width: auto;
  flex-shrink: 0;
  display: block;
}

.lp-brand-text {
  display: flex;
  flex-direction: column;
  margin-left: 7px;
  color: var(--lp-blue);
  min-width: 0;
}

.lp-brand-title {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.lp-brand-name {
  font-family: "Sora", sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}

.lp-brand-tld {
  font-size: 0.72em;
  font-weight: 500;
  color: var(--lp-muted-soft);
}

.lp-brand-version {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--lp-muted-soft);
}

.lp-brand-tagline {
  display: none;
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-top: 4px;
  white-space: nowrap;
}

.lp-desktop-only {
  display: none;
}

.lp-mobile-only {
  display: block;
}

.lp-site-nav {
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.lp-site-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--lp-text);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.15s,
    color 0.15s;
}

.lp-site-link:hover {
  background-color: var(--lp-hover);
  color: var(--lp-blue);
}

.lp-site-link svg {
  width: 16px;
  height: 16px;
  color: var(--lp-blue);
  flex-shrink: 0;
}

.lp-site-nav-sep {
  width: 1px;
  height: 24px;
  background-color: var(--lp-border);
  margin: 0 6px;
  flex-shrink: 0;
}

.lp-btn-login {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  color: #ffffff;
  background-color: var(--lp-dark);
  text-decoration: none;
  transition:
    background-color 0.15s,
    transform 0.1s;
}

.lp-btn-login:hover {
  background-color: var(--lp-blue);
}

.lp-btn-login:active {
  transform: scale(0.97);
}

.lp-btn-login svg {
  width: 16px;
  height: 16px;
}

/* Mobile hamburger + drawer: <details> so it works without any JavaScript. */
.lp-site-menu {
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.lp-site-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background-color: transparent;
  color: var(--lp-blue);
  cursor: pointer;
  list-style: none;
  transition: background-color 0.15s;
}

.lp-site-menu-btn::-webkit-details-marker {
  display: none;
}

.lp-site-menu-btn:hover,
.lp-site-menu[open] .lp-site-menu-btn {
  background-color: var(--lp-hover);
}

.lp-site-menu-btn svg {
  width: 22px;
  height: 22px;
}

.lp-site-drawer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-bottom: 1px solid var(--lp-border);
  box-shadow: 0 10px 24px rgba(0, 84, 159, 0.12);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 40;
  animation: lp-drawer-in 0.2s ease;
}

@keyframes lp-drawer-in {
  from {
    transform: translateY(-8px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.lp-site-drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--lp-text);
  text-decoration: none;
  transition:
    background-color 0.15s,
    color 0.15s;
}

.lp-site-drawer-link:hover {
  background-color: var(--lp-hover);
  color: var(--lp-blue);
}

.lp-site-drawer-link svg {
  width: 18px;
  height: 18px;
  color: var(--lp-blue);
  flex-shrink: 0;
}

.lp-site-drawer-divider {
  height: 1px;
  background-color: var(--lp-border);
  margin: 6px 4px;
}

.lp-site-drawer-primary {
  background-color: var(--lp-dark);
  color: #ffffff;
}

.lp-site-drawer-primary svg {
  color: #ffffff;
}

.lp-site-drawer-primary:hover {
  background-color: var(--lp-blue);
  color: #ffffff;
}

@media (min-width: 1024px) {
  .lp-site-header-inner {
    padding: 12px 32px;
  }

  .lp-brand-logo {
    height: 38px;
  }

  .lp-brand-name {
    font-size: 1.375rem;
  }

  .lp-brand-version {
    font-size: 11px;
  }

  .lp-brand-tagline {
    display: block;
    font-size: 11px;
  }

  .lp-desktop-only {
    display: flex;
  }

  .lp-mobile-only {
    display: none;
  }
}

/* ── Hero opener: the Québec pride badge (target query, see <title>) ───── */
/* Same surface as the signup card (.lp-card): blue top bar, 12px corners. */
.lp-pride-hero {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 4px auto 14px;
  padding: 12px 20px 12px 14px;
  border-radius: 12px;
  background: linear-gradient(145deg, #ffffff, #f0f7ff);
  border: 1px solid var(--lp-border);
  border-top: 3px solid var(--lp-blue);
  box-shadow: 0 10px 28px rgba(0, 63, 122, 0.1);
  color: var(--lp-blue);
  text-align: left;
  line-height: 1.2;
}

.lp-pride-hero img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
}

.lp-pride-hero span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lp-pride-hero strong {
  font-family: "Sora", "Exo 2", sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--lp-dark);
}

.lp-pride-hero small {
  font-size: 13px;
  font-weight: 500;
  color: var(--lp-blue);
}

.lp-pride-wrap {
  text-align: center;
  margin: -4px 0 20px;
}

/* "Vous gardez le contrôle" note, first thing in the hero. */
.lp-control-banner {
  max-width: 780px;
  margin: 4px auto 18px;
  padding: 14px 20px 16px;
  border-radius: 12px;
  background: linear-gradient(145deg, #ffffff, #f0f7ff);
  border: 1px solid var(--lp-border);
  border-top: 3px solid var(--lp-blue);
  box-shadow: 0 10px 28px rgba(0, 63, 122, 0.1);
  text-align: center;
}

.lp-control-banner p {
  margin: 0;
}

.lp-control-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Sora", "Exo 2", sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--lp-blue);
  margin-bottom: 6px !important;
}

.lp-control-lead {
  font-size: 17px;
  color: var(--lp-dark);
  margin-bottom: 6px !important;
}

.lp-control-detail {
  font-size: 14px;
  line-height: 1.5;
  color: var(--lp-muted);
}

/* Hero + signup card */
.lp-hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 16px 8px;
  text-align: center;
}

.lp-hero h1 {
  font-size: clamp(1.5rem, 6vw, 2.25rem);
  margin: 8px 0 12px;
}

.lp-sub {
  font-size: 17px;
  margin: 0 auto 16px;
  max-width: 52ch;
}

.lp-hero-signup {
  min-width: 0;
}

.lp-video.lp-hero-video {
  margin-top: 28px;
}

.lp-card {
  background: linear-gradient(145deg, #ffffff, #f0f7ff);
  border: 1px solid var(--lp-border);
  border-top: 3px solid var(--lp-blue);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 63, 122, 0.1);
  padding: 20px;
  min-width: 0;
  text-align: left;
}

.lp-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}

#landing-email {
  width: 100%;
  /* >=16px prevents iOS Safari from zooming on focus */
  font-size: 17px;
  font-family: inherit;
  color: var(--lp-text);
  padding: 14px 14px;
  border: 1px solid var(--lp-border);
  border-radius: 10px;
  background: #ffffff;
}

#landing-email:focus {
  outline: 2px solid var(--lp-blue);
  outline-offset: 1px;
}

.lp-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--lp-muted);
  cursor: pointer;
}

.lp-check input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--lp-blue);
}

.lp-check a {
  color: var(--lp-blue);
}

#landing-submit {
  width: 100%;
  margin-top: 20px;
  padding: 16px 10px;
  font-family: "Sora", "Exo 2", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background: var(--lp-blue);
  border: none;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 84, 159, 0.2);
  cursor: pointer;
}

#landing-submit:hover:not(:disabled) {
  background: var(--lp-dark);
}

#landing-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.lp-micro {
  font-size: 14px;
  color: var(--lp-muted);
  margin: 14px 0 0;
  text-align: center;
}

#landing-message {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 15px;
  color: #ffffff;
  background: #b91c1c;
}

/* Post-submit "open your email" screen */
.lp-sent {
  border-color: #b45309;
  overflow-wrap: anywhere;
}

.lp-kicker {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b45309;
}

.lp-sent h2 {
  margin: 0 0 10px;
  font-size: 24px;
}

.lp-steps {
  margin: 14px 0;
  padding-left: 22px;
}

.lp-steps li {
  margin-bottom: 10px;
}

.lp-warn {
  background: #fffbeb;
  border: 1px solid #f59e0b;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  color: #78350f;
}

.lp-note {
  font-size: 14px;
  color: var(--lp-muted);
  margin: 12px 0 0;
}

/* Content sections */
.lp-section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 16px 0;
}

.lp-section h2 {
  font-size: 24px;
  text-align: center;
  margin: 0 0 20px;
}

.lp-steps-lg {
  font-size: 17px;
  max-width: 60ch;
  margin: 0 auto 28px;
}

.lp-video {
  margin: 0 auto;
  width: min(100%, 260px);
  text-align: center;
}

.lp-video video {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 9 / 16;
  border-radius: 19px;
  background: #000;
}

.lp-video figcaption {
  font-size: 14px;
  color: var(--lp-muted);
  margin-top: 10px;
}

/* ── Specialists — static copy of /specialistes/ cards (specialistes-page.css) ── */
.lp-specs-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

/* Plan cards (#tarifs) share the specialists grid; the base rule must stay
   BEFORE the 640/1024px breakpoints below (same specificity, source order). */
.lp-plans-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

.lp-spec-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: #ffffff;
  border: 1px solid var(--lp-border);
  border-radius: 14px;
  text-decoration: none;
  color: var(--lp-text);
  box-shadow: 0 4px 12px rgba(0, 84, 159, 0.08);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.lp-spec-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 84, 159, 0.1);
  border-color: var(--lp-blue);
}

.lp-spec-card-locked {
  opacity: 0.55;
}

.lp-spec-card-locked:hover {
  transform: none;
  box-shadow: 0 4px 12px rgba(0, 84, 159, 0.08);
  border-color: var(--lp-border);
}

.lp-spec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.lp-spec-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  background-color: var(--lp-blue);
}

.lp-spec-icon svg {
  width: 20px;
  height: 20px;
  color: #ffffff;
}

.lp-spec-icon-auroria { background-color: var(--lp-blue); }
.lp-spec-icon-blue { background-color: #2563eb; }
.lp-spec-icon-teal { background-color: #0d9488; }
.lp-spec-icon-red { background-color: #dc2626; }
.lp-spec-icon-green { background-color: #16a34a; }
.lp-spec-icon-orange { background-color: #ea580c; }
.lp-spec-icon-brown { background-color: #92400e; }
.lp-spec-icon-pink { background-color: #db2777; }
.lp-spec-icon-indigo { background-color: #4f46e5; }

.lp-spec-titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.lp-spec-name {
  font-family: "Exo 2", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--lp-text);
  margin: 0;
  line-height: 1.2;
}

.lp-spec-category {
  font-size: 0.75rem;
  color: var(--lp-muted-soft);
  margin: 0;
  line-height: 1.2;
}

.lp-spec-lock {
  margin-left: auto;
  color: var(--lp-muted-soft);
  flex-shrink: 0;
}

.lp-spec-lock svg {
  width: 18px;
  height: 18px;
}

.lp-spec-desc {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--lp-muted-soft);
  margin: 0 0 16px;
  flex: 1;
}

.lp-spec-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}

.lp-spec-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 8px;
  background-color: var(--lp-hover);
  color: var(--lp-blue);
  font-family: "Exo 2", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.lp-spec-card:hover .lp-spec-action {
  background-color: var(--lp-blue);
  color: #ffffff;
}

.lp-spec-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 9999px;
  background-color: var(--lp-hover);
  color: var(--lp-muted-soft);
  font-family: "Exo 2", sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* "Déjà inscrit ?" under the submit button */
.lp-already {
  margin: 12px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--lp-muted);
}

.lp-already a {
  color: var(--lp-blue);
  font-weight: 600;
}

.lp-privacy-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  max-width: 900px;
  margin: 0 auto;
}

.lp-privacy-item {
  background: linear-gradient(145deg, #ffffff, var(--lp-sidebar));
  border: 1px solid var(--lp-border);
  border-left: 4px solid var(--lp-blue);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.lp-privacy-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.lp-privacy-icon img {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  object-fit: contain;
}

.lp-privacy-item h3 {
  font-family: "Exo 2", sans-serif;
  font-size: 16px;
  color: var(--lp-dark);
  margin: 0 0 4px;
}

.lp-privacy-item p {
  font-size: 14px;
  color: var(--lp-muted);
  margin: 0;
}

/* FAQ accordion only — scoped so the <details> hamburger in the header
   (.lp-site-menu) never inherits the card look. */
.lp-section details {
  background: #ffffff;
  border: 1px solid var(--lp-border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.lp-section summary {
  font-weight: 600;
  cursor: pointer;
  color: var(--lp-dark);
}

.lp-section details p {
  margin: 10px 0 0;
  color: var(--lp-muted);
}

.lp-section details p a {
  color: var(--lp-blue);
  font-weight: 600;
}

/* Final call to action */
.lp-final {
  text-align: center;
  padding: 48px 16px 56px;
  margin-top: 48px;
  background: var(--lp-sidebar);
  border-top: 1px solid var(--lp-border);
}

.lp-final h2 {
  font-size: 26px;
  margin: 0 0 8px;
}

.lp-final p {
  margin: 0 0 22px;
  color: var(--lp-muted);
}

.lp-btn {
  display: inline-block;
  padding: 16px 34px;
  font-family: "Sora", "Exo 2", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  background: var(--lp-blue);
  border-radius: 12px;
  text-decoration: none;
}

.lp-btn:hover {
  background: var(--lp-dark);
}

/* ── Site footer — static copy of <site-footer> (site-footer.css) ───────── */
.lp-site-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--lp-blue);
  background: var(--lp-blue);
  color: #ffffff;
}

.lp-site-footer-inner {
  display: grid;
  gap: 20px;
  width: min(100%, 1100px);
  margin: 0 auto;
  padding: 28px 16px;
}

.lp-site-footer-brand {
  display: flex;
  align-items: center;
  gap: 13px;
}

.lp-site-footer-logo {
  width: auto;
  height: 34px;
  padding: 6px;
  background: #ffffff;
  border-radius: 12px;
  box-sizing: content-box;
}

.lp-site-footer-brand div {
  display: grid;
  gap: 3px;
}

.lp-site-footer-brand strong {
  color: #ffffff;
  font-family: "Sora", sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: -0.01em;
}

.lp-site-footer-tld {
  font-size: 0.72em;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.7);
}

.lp-site-footer-brand span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.8125rem;
  line-height: 1.2;
}

.lp-site-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
}

.lp-site-footer-nav a {
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

.lp-site-footer-nav a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lp-site-footer-nav a:focus-visible,
.lp-site-footer-legal a:focus-visible {
  border-radius: 3px;
  outline: 3px solid rgba(255, 255, 255, 0.72);
  outline-offset: 3px;
}

.lp-site-footer-legal {
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.72rem;
  line-height: 1.45;
}

.lp-site-footer-legal p {
  margin: 0;
}

.lp-site-footer-legal a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lp-site-footer-legal a:hover {
  color: #ffffff;
}

@media (min-width: 768px) {
  .lp-site-footer-inner {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    padding: 32px;
  }

  .lp-site-footer-nav {
    justify-content: flex-end;
  }

  .lp-site-footer-legal {
    grid-column: 1 / -1;
  }
}

/* Buttons under the plan grid / short FAQ (→ /tarifs/, /faq/). */
.lp-section-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 18px;
  margin-top: 24px;
}

.lp-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--lp-dark);
}

.lp-trust li::before {
  content: "✓";
  color: var(--lp-blue);
  font-weight: 800;
  margin-right: 6px;
}

.lp-trial-badge {
  display: inline-flex;
  align-items: center;
  margin: 0 0 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #e6f3ff;
  border: 1px solid #b8d8f5;
  color: var(--lp-blue);
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0, 84, 159, 0.1);
  letter-spacing: 0.02em;
}

#landing-form h2 {
  font-size: 20px;
  margin: 0 0 8px;
}

.lp-form-intro {
  font-size: 14px;
  margin: 0 0 18px;
  color: var(--lp-muted);
}

.lp-section-intro {
  text-align: center;
}

.lp-section-intro {
  margin: 0 0 24px;
  color: var(--lp-muted);
}

/* A light phone silhouette keeps the native controls fully unobstructed. */
.lp-phone-frame {
  position: relative;
  padding: 6px;
  border: 1px solid var(--lp-border);
  border-radius: 26px;
  background: var(--lp-dark);
  box-shadow: 0 12px 26px rgba(0, 63, 122, 0.17);
}

.lp-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 50%;
  color: #ffffff;
  background: var(--lp-blue);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.lp-video-play:hover {
  background: var(--lp-dark);
}

.lp-video-spinner {
  display: none;
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: lp-video-spin 0.8s linear infinite;
}

.lp-video-play[aria-busy="true"] .lp-video-play-icon {
  display: none;
}

.lp-video-play[aria-busy="true"] .lp-video-spinner {
  display: block;
}

@keyframes lp-video-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-video-spinner { animation: none; }
}

/* Comfortable keyboard focus without changing the native video controls. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.lp-check input:focus-visible {
  outline: 3px solid var(--lp-blue);
  outline-offset: 4px;
}

/* Reveal on scroll (landing.js §3). Hidden state ONLY under html.lp-js, which
   the script sets right before observing: no JS = nothing is ever hidden. */
html.lp-js .lp-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
  will-change: opacity, transform;
}

html.lp-js .lp-reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .lp-site-drawer {
    animation: none;
  }

  html.lp-js .lp-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 640px) {
  .lp-hero h1 {
    font-size: 36px;
  }

  .lp-section h2 {
    font-size: 28px;
  }

}

@media (min-width: 960px) {
  .lp-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
    padding-top: 40px;
    text-align: left;
  }

  .lp-hero-single {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "copy copy" "video signup";
    align-items: center;
    gap: 28px 48px;
    padding-top: 40px;
    text-align: center;
  }

  .lp-hero-single .lp-hero-copy {
    grid-area: copy;
    min-width: 0;
  }

  .lp-hero-signup {
    grid-area: signup;
  }

  .lp-video.lp-hero-video {
    grid-area: video;
    margin-top: 0;
  }

  .lp-hero h1 {
    font-size: 40px;
  }

  .lp-hero-single h1 {
    font-size: clamp(26px, 2.7vw, 30px);
  }

  .lp-trust {
    justify-content: flex-start;
    margin-bottom: 0;
  }

  .lp-hero-single .lp-trust {
    justify-content: center;
  }

  .lp-card {
    padding: 26px;
  }

  .lp-privacy-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 639px) {
  .lp-hero-single + .lp-section {
    padding-top: 24px;
  }

  .lp-control-banner {
    padding: 12px 14px 14px;
  }

  .lp-control-title,
  .lp-control-lead {
    font-size: 15px;
  }

  .lp-control-detail {
    font-size: 13px;
  }

  .lp-pride-hero {
    gap: 10px;
    padding: 10px 16px 10px 12px;
  }

  .lp-pride-hero img {
    width: 34px;
    height: 34px;
  }

  .lp-pride-hero strong {
    font-size: 15px;
  }

  .lp-pride-hero small {
    font-size: 12px;
  }
}

.lp-restart-container {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

.lp-btn-secondary {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--lp-blue);
  color: var(--lp-blue);
  font-family: "Sora", "Exo 2", sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.lp-btn-secondary:hover {
  background: rgba(0, 63, 122, 0.05);
}

/* ── Plans (#tarifs) — 6 summary cards, static mirror of /tarifs/ ─────────── */
.lp-pricing-intro strong {
  color: var(--lp-text);
}

.lp-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 20px 20px;
  background: linear-gradient(145deg, #ffffff, #f0f7ff);
  border: 1px solid var(--lp-border);
  border-top: 3px solid var(--lp-blue);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 63, 122, 0.1);
}

/* The free plan is the funnel target: outlined in blue with a flag. */
.lp-plan-card-free {
  border-color: var(--lp-blue);
  box-shadow: 0 12px 32px rgba(0, 84, 159, 0.18);
}

.lp-plan-flag {
  position: absolute;
  top: -1px;
  right: 16px;
  margin: 0;
  padding: 4px 10px;
  border-radius: 0 0 8px 8px;
  background: var(--lp-blue);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lp-plan-name {
  font-family: "Exo 2", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--lp-dark);
  margin: 0 0 6px;
  line-height: 1.2;
}

.lp-plan-price {
  font-family: "Orbitron", "Exo 2", sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--lp-blue);
  margin: 0;
  line-height: 1.1;
}

.lp-plan-currency {
  font-size: 0.7em;
  font-weight: 400;
}

.lp-plan-period {
  font-size: 13px;
  color: var(--lp-muted);
  margin: 2px 0 10px;
}

.lp-plan-credits {
  font-size: 15px;
  font-weight: 600;
  color: var(--lp-text);
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--lp-border);
}

.lp-plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  display: grid;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--lp-text);
}

.lp-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.lp-plan-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #10b981;
  margin-top: 1px;
}

/* Per-card CTA, pinned to the bottom (cards are flex columns). Outline for
   the paid plans, filled blue for the free plan (the funnel target). */
.lp-plan-cta {
  display: block;
  margin-top: auto;
  padding: 10px 16px;
  text-align: center;
  font-family: "Sora", "Exo 2", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--lp-blue);
  background: transparent;
  border: 1px solid var(--lp-blue);
  border-radius: 8px;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.lp-plan-features + .lp-plan-cta {
  margin-top: 18px;
}

.lp-plan-cta:hover {
  background: rgba(0, 63, 122, 0.05);
}

.lp-plan-cta-primary {
  color: #ffffff;
  background: var(--lp-blue);
}

.lp-plan-cta-primary:hover {
  background: var(--lp-dark);
}

.lp-plan-mark {
  color: var(--lp-blue);
  font-weight: 700;
}

.lp-plan-note {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--lp-muted);
  text-align: center;
}

/* ── Comparison table (#comparatif) ─────────────────────────────────────── */
.lp-compare-wrapper {
  background: linear-gradient(145deg, #ffffff, #f0f7ff);
  border: 1px solid var(--lp-border);
  border-top: 3px solid var(--lp-blue);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 63, 122, 0.1);
  padding: 8px 20px 12px;
}

.lp-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.lp-compare-table th,
.lp-compare-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--lp-border);
  vertical-align: middle;
}

.lp-compare-table thead th {
  font-family: "Exo 2", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--lp-dark);
  text-align: center;
  border-bottom: 2px solid var(--lp-border);
}

.lp-compare-th-feature {
  width: 44%;
  text-align: left;
}

/* The Auroria column is highlighted end to end. */
.lp-compare-table thead .lp-compare-th-auroria,
.lp-compare-table tbody tr:not(.lp-compare-group) > :nth-child(2) {
  background: rgba(0, 84, 159, 0.07);
}

.lp-compare-table thead .lp-compare-th-auroria {
  color: var(--lp-blue);
  border-radius: 8px 8px 0 0;
}

.lp-compare-table tbody th[scope="row"] {
  font-weight: 500;
  text-align: left;
  color: var(--lp-text);
  line-height: 1.35;
}

.lp-compare-group th {
  padding-top: 18px;
  font-family: "Exo 2", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lp-blue);
  text-align: left;
  border-bottom: 1px solid var(--lp-border);
}

.lp-compare-yes,
.lp-compare-no,
.lp-compare-partial {
  text-align: center;
}

.lp-compare-yes svg {
  width: 20px;
  height: 20px;
  color: #10b981;
  vertical-align: middle;
}

.lp-compare-no {
  color: var(--lp-muted-soft);
  font-size: 18px;
}

.lp-compare-partial svg {
  width: 18px;
  height: 18px;
  color: #d97706;
  vertical-align: middle;
  cursor: help;
}

.lp-compare-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lp-compare-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--lp-muted);
  text-align: center;
}

/* Under 640px the 5 columns do not fit: each row becomes a block with the
   criterion on top and the 4 values side by side (no horizontal scroll). */
@media (max-width: 639px) {
  .lp-compare-wrapper {
    padding: 4px 14px 10px;
  }

  .lp-compare-table,
  .lp-compare-table thead,
  .lp-compare-table tbody,
  .lp-compare-table tr,
  .lp-compare-table th,
  .lp-compare-table td {
    display: block;
  }

  .lp-compare-table thead tr,
  .lp-compare-table tbody tr:not(.lp-compare-group) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 8px 0;
    border-bottom: 1px solid var(--lp-border);
  }

  /* The column names stick while the 17 rows scroll. `thead` (not its single
     `tr`, whose sticky range inside thead would be 0px) sticks within the
     table, parked 53px down = right under the site header (32px logo + 2×10px
     padding + 1px border), which is sticky too. */
  .lp-compare-table thead {
    position: sticky;
    top: 53px;
    background: #f0f7ff;
    z-index: 1;
    border-bottom: 2px solid var(--lp-border);
  }

  .lp-compare-table th,
  .lp-compare-table td {
    padding: 4px 2px;
    border-bottom: 0;
  }

  /* Prefixed on purpose: must beat `.lp-compare-table th { display: block }`
     above, otherwise the empty criterion cell takes the first of the 4 header
     slots and pushes "Claude" to a second line. */
  .lp-compare-table .lp-compare-th-feature {
    display: none;
  }

  .lp-compare-table thead th {
    font-size: 13px;
  }

  .lp-compare-table tbody th[scope="row"] {
    grid-column: 1 / -1;
    font-size: 14px;
    padding-bottom: 6px;
  }

  .lp-compare-group th {
    padding-top: 16px;
    padding-bottom: 4px;
  }
}

/* Card grids (specialists, plans): 1 / 2 / 3 columns. Kept at the END of the
   file so the breakpoints always win over the base `1fr` rules above. */
@media (min-width: 640px) {
  .lp-specs-grid,
  .lp-plans-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .lp-specs-grid,
  .lp-plans-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}