/* ═══════════════════════════════════════════════
   PAGE DE PRÉSENTATION (/decouvrir), reprise de la maquette (index.html de la V1)
   et pied de page public, partagé avec les pages d'information.
═══════════════════════════════════════════════ */

/* ── En-tête ── */
.lp-header {
  position: sticky; top: 0; z-index: var(--z-header);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px; height: 64px;
  background: rgba(8,16,8,.96); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.lp-logo { height: 28px; width: auto; display: block; }
.lp-nav { display: flex; align-items: center; gap: 28px; }
.lp-nav-link { font-size: 13px; font-weight: 600; color: var(--color-neutral-400); transition: color var(--transition-base); }
.lp-nav-link:hover { color: white; }
.lp-burger { display: none; color: var(--color-neutral-400); padding: 4px; background: none; border: 0; cursor: pointer; }

.lp-mobile-nav {
  display: none; flex-direction: column;
  background: #080F08; border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 12px 20px 20px; position: sticky; top: 64px; z-index: calc(var(--z-header) - 1);
}
.lp-mobile-nav.open { display: flex; }
.lp-mobile-nav a {
  color: var(--color-neutral-400); font-size: 15px; font-weight: 600;
  padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.05);
}
.lp-mobile-nav a:last-child { border: none; padding-top: 16px; }

/* ── Héros ── */
.lp-hero {
  background: #080F08;
  min-height: calc(100vh - 64px);
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding: 72px 40px;
}
.lp-hero-glow {
  position: absolute; pointer-events: none;
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(29,85,30,.3) 0%, transparent 65%);
  top: -150px; left: -150px;
}
.lp-hero-glow2 {
  position: absolute; pointer-events: none;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(46,125,50,.15) 0%, transparent 70%);
  bottom: -80px; right: 200px;
}
.lp-hero-inner {
  max-width: 1120px; margin: 0 auto; width: 100%; position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}

.lp-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(46,125,50,.12); border: 1px solid rgba(46,125,50,.28);
  color: var(--color-primary-300); font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 28px;
  text-transform: uppercase;
}
.lp-badge-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary-400);
  animation: lp-blink 2.4s ease-in-out infinite;
}
@keyframes lp-blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

.lp-hero-title {
  font-family: var(--font-display); font-size: clamp(44px, 5.5vw, 76px);
  font-weight: 900; color: white; line-height: 1.02;
  letter-spacing: -.025em; margin: 0 0 22px;
}
.lp-hero-em { color: var(--color-primary-300); font-style: normal; }
.lp-hero-sub {
  font-size: 16px; line-height: 1.75; color: var(--color-neutral-400);
  max-width: 470px; margin: 0 0 40px;
}
/* Le gras du sous-titre porte la promesse : il doit se détacher du gris. */
.lp-hero-sub strong { color: var(--color-neutral-200); font-weight: 700; }
.lp-hero-ctas { display: flex; align-items: center; gap: 18px; margin-bottom: 44px; flex-wrap: wrap; }
.lp-btn-hero { display: inline-flex; align-items: center; gap: 8px; }
.lp-btn-ghost {
  font-size: 14px; font-weight: 700; color: var(--color-neutral-400);
  transition: color var(--transition-base); white-space: nowrap;
}
.lp-btn-ghost:hover { color: white; }

/* Preuve sociale : le vrai nombre d'inscrits, rien d'inventé. */
.lp-hero-proof { display: flex; align-items: center; gap: 12px; }
.lp-proof-lotus { line-height: 0; }
.lp-proof-text { font-size: 12.5px; color: var(--color-neutral-500); font-weight: 500; line-height: 1.5; }
.lp-proof-text strong { color: var(--color-neutral-200); font-weight: 800; }

/* ── Visuel du héros : un vrai professionnel et le parcours d'une collaboration vérifiée ── */
/* Plus haut que la maquette : la carte d'un vrai professionnel (nom sur deux lignes, lotus)
   dépasse celle d'exemple, et la carte du parcours ne doit pas recouvrir son score. */
.lp-hero-visual { position: relative; height: 560px; }
.lp-float-card {
  position: absolute;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-radius: 20px; padding: 22px;
  box-shadow: 0 24px 64px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
  color: inherit;
}
@keyframes lp-float  { 0%,100%{transform:translateY(0)}    50%{transform:translateY(-14px)} }
@keyframes lp-float2 { 0%,100%{transform:translateY(-6px)} 50%{transform:translateY(8px)}  }

.lp-float-main  { left: 0; top: 24px; width: 310px; animation: lp-float 7s ease-in-out infinite; }
.lp-float-proof { right: 0; bottom: 60px; width: 250px; animation: lp-float2 6s ease-in-out infinite; animation-delay: -.5s; }

.lp-float-badge {
  position: absolute; top: 4px; right: 30px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.11);
  backdrop-filter: blur(12px); border-radius: 999px;
  padding: 9px 16px; display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: white; white-space: nowrap;
  animation: lp-float 5s ease-in-out infinite; animation-delay: -2s;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.lp-float-badge i { color: var(--color-primary-300); }

/* Un filet plutôt qu'une carte : le tip est une voix off, il ne doit pas
   entrer en concurrence avec les cartes flottantes qu'il commente. */
.lp-hero-tip {
  position: absolute; right: 0; bottom: 0; width: 250px;
  border-left: 2px solid var(--color-primary-500);
  padding-left: 12px; margin: 0;
  font-size: 12px; line-height: 1.65;
  color: var(--color-neutral-400);
}
.lp-hero-tip strong { color: var(--color-primary-300); font-weight: 700; }

.lp-fc-header { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.lp-fc-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  color: white; font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.lp-fc-avatar img { width: 100%; height: 100%; object-fit: cover; background: white; }
.lp-fc-name { font-size: 13px; font-weight: 800; color: white; }
.lp-fc-trade { font-size: 11px; color: var(--color-neutral-500); margin-top: 1px; }
.lp-fc-verified {
  margin-left: auto; background: var(--color-primary-800); color: var(--color-primary-200);
  font-size: 9px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.lp-fc-score-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.lp-fc-score-label { font-size: 9px; font-weight: 700; color: var(--color-neutral-500); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 4px; }
.lp-fc-score { font-family: var(--font-display); font-size: 21px; font-weight: 800; color: var(--color-primary-300); line-height: 1.15; }
.lp-fc-score-level { font-size: 11px; font-weight: 700; color: var(--color-primary-200); margin-top: 5px; }
.lp-fc-lotus { line-height: 0; }
.lp-fc-foot { font-size: 11px; color: var(--color-neutral-500); border-top: 1px solid rgba(255,255,255,.06); padding-top: 12px; }

.lp-proof-title { font-size: 11px; font-weight: 800; color: var(--color-neutral-300); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 12px; }
.lp-proof-step { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; line-height: 1.5; color: var(--color-neutral-300); padding: 6px 0; }
.lp-proof-step i { color: var(--color-primary-300); margin-top: 3px; font-size: 11px; }

/* ── Barre des chiffres, pied du premier panneau ── */
.lp-stats-bar { display: flex; background: white; border-bottom: 1px solid var(--border); }
.lp-stat {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 5px; padding: 28px 16px;
  border-right: 1px solid var(--border);
}
.lp-stat:last-child { border-right: none; }
.lp-stat-num {
  font-family: var(--font-display); font-size: 34px; font-weight: 900;
  color: var(--g); line-height: 1; font-variant-numeric: tabular-nums;
}
.lp-stat span { font-size: 12px; color: var(--text3); font-weight: 500; text-align: center; }

/* ── Sections ── */
.lp-section { padding: 88px 40px; }
.lp-section-inner { max-width: 1120px; margin: 0 auto; }
.lp-section-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--g); margin-bottom: 10px; display: block;
}
.lp-section-title {
  font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 900; color: var(--text); line-height: 1.08;
  letter-spacing: -.022em; margin: 0 0 52px;
}
.lp-section-more { margin-top: 32px; text-align: center; }
.lp-link { font-size: 14px; font-weight: 700; color: var(--g); }
.lp-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Comment ça marche ── */
.lp-how { background: var(--bg); }
.lp-steps { display: flex; align-items: stretch; gap: 0; }
.lp-step {
  flex: 1; padding: 32px 28px;
  background: white; border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  transition: box-shadow var(--transition-slow), border-color var(--transition-slow);
}
.lp-step:hover { border-color: var(--color-primary-200); box-shadow: var(--shadow-md); }
.lp-step-arrow { font-size: 22px; color: var(--color-neutral-300); padding: 0 14px; align-self: center; flex-shrink: 0; }
.lp-step-num {
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--g); color: white;
  font-family: var(--font-display); font-size: 22px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.lp-step h3 { font-size: 16px; font-weight: 800; color: var(--text); margin: 0 0 10px; }
.lp-step p { font-size: 13px; color: var(--text2); line-height: 1.65; margin: 0; }

/* ── Professionnels en vedette ── */
.lp-featured { background: white; }
.lp-pro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lp-pro-card {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--radius-xl); padding: 28px 24px;
  color: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: border-color var(--transition-slow), box-shadow var(--transition-slow), transform var(--transition-slow);
}
.lp-pro-card:hover { border-color: var(--g); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.lp-ac-top { position: relative; display: flex; justify-content: center; margin-bottom: 10px; }
.lp-ac-avatar {
  width: 68px; height: 68px; border-radius: 50%; overflow: hidden;
  color: white; font-size: 20px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.lp-ac-avatar img { width: 100%; height: 100%; object-fit: cover; background: white; }
.lp-ac-check {
  position: absolute; bottom: 0; right: -4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--g); color: white; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  border: 2.5px solid white;
}
.lp-ac-name { font-size: 15px; font-weight: 800; color: var(--text); text-align: center; }
.lp-ac-trade { font-size: 12px; color: var(--text3); text-align: center; }
.lp-ac-loc { font-size: 12px; color: var(--text4); text-align: center; margin-bottom: 6px; }
.lp-ac-score-box {
  align-self: stretch;
  background: var(--g-lighter); border-radius: var(--radius-base);
  padding: 12px; text-align: center; margin-top: 4px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.lp-ac-score-niv { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--g); }
.lp-ac-score-pending { font-size: 12px; font-weight: 700; color: var(--text3); padding: 6px 0; }
.lp-featured-cta { text-align: center; margin-top: 44px; }

/* ── Engagements (à la place des témoignages de la maquette, qui étaient inventés) ── */
.lp-pledges { background: var(--color-primary-900); padding: 88px 40px; }
.lp-label-light { color: var(--color-primary-300) !important; }
.lp-title-light { color: white; }
.lp-pledge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.lp-pledge {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl); padding: 28px;
}
.lp-pledge-icon {
  width: 40px; height: 40px; border-radius: 12px; margin-bottom: 16px;
  background: rgba(165,214,167,.12); color: var(--color-primary-200);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.lp-pledge h3 { font-size: 16px; font-weight: 800; color: white; margin: 0 0 8px; }
.lp-pledge p { font-size: 13.5px; line-height: 1.7; color: var(--color-neutral-300); margin: 0; }

/* ── Appel final ── */
.lp-cta-section { background: var(--color-neutral-950); padding: 96px 40px; text-align: center; }
.lp-cta-inner { max-width: 640px; margin: 0 auto; }
.lp-cta-title {
  font-family: var(--font-display); font-size: clamp(30px, 4vw, 52px);
  font-weight: 900; color: white; line-height: 1.08;
  letter-spacing: -.022em; margin: 0 0 18px;
}
.lp-cta-sub { font-size: 15px; color: var(--color-neutral-500); line-height: 1.75; margin: 0 0 40px; }
.lp-cta-btns { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.lp-btn-ghost-dark { font-size: 14px; font-weight: 700; color: var(--color-neutral-400); transition: color var(--transition-base); }
.lp-btn-ghost-dark:hover { color: white; }

/* ── Apparition au défilement (js/landing.js) ── */
.lp-reveal { opacity: 0; transform: translateY(24px); transition: opacity .55s ease, transform .55s ease; }
.lp-reveal.lp-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .lp-reveal { opacity: 1; transform: none; transition: none; }
  .lp-float-card, .lp-float-badge, .lp-badge-dot { animation: none; }
}

/* ── Défilement panneau par panneau ──
   La classe .lp-snap est posée sur <html> par js/landing.js, seulement si tous les panneaux
   tiennent sur un écran : un panneau plus haut que la fenêtre aurait une fin inatteignable. */
.lp-snap { scroll-snap-type: y mandatory; scroll-padding-top: 64px; }
.lp-snap .lp-panel {
  scroll-snap-align: start;
  /* Un cran de défilement = un panneau : sans stop, l'inertie d'un trackpad en traverse plusieurs. */
  scroll-snap-stop: always;
  min-height: calc(100vh - 64px);
  display: flex; flex-direction: column; justify-content: center;
}
/* Enfants d'un conteneur flex : sans largeur, leur « margin: 0 auto » les réduirait à leur contenu. */
.lp-snap .lp-panel > *,
.lp-snap .lp-panel--end .lp-cta-inner { width: 100%; }
.lp-snap .lp-panel.lp-section,
.lp-snap .lp-panel.lp-pledges { padding-top: 40px; padding-bottom: 40px; }
.lp-snap .lp-panel--hero { justify-content: flex-start; }
.lp-snap .lp-panel--hero .lp-hero { flex: 1; min-height: 0; padding-top: 32px; padding-bottom: 32px; }
.lp-snap .lp-panel--hero .lp-stats-bar { flex: none; }
.lp-snap .lp-panel--end { justify-content: flex-start; }
.lp-snap .lp-panel--end .lp-cta-section {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 40px; padding-bottom: 40px;
}
.lp-snap .lp-panel--end .pub-footer { flex: none; }

/* ═══════════════════════════════════════════════
   PIED DE PAGE PUBLIC (présentation, chartes, conditions, mentions)
═══════════════════════════════════════════════ */
.pub-footer {
  background: var(--color-neutral-950);
  color: var(--color-neutral-400);
  padding: 48px 24px 32px;
}
.pub-footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; gap: 48px; justify-content: space-between; flex-wrap: wrap;
}
.pub-footer-brand { display: flex; flex-direction: column; gap: 10px; max-width: 280px; }
.pub-footer-logo { height: 32px; width: auto; align-self: flex-start; filter: brightness(0) invert(1); opacity: .92; }
.pub-footer-tagline { font-size: 12px; line-height: 1.6; color: var(--color-neutral-500); margin: 0; }
.pub-footer-legal { font-size: 11px; line-height: 1.6; color: var(--color-neutral-500); margin: 0; }
.pub-footer-copy { font-size: 11px; color: var(--color-neutral-600); margin: 0; }
.pub-footer-links { display: flex; gap: 40px; flex-wrap: wrap; }
.pub-footer-col { display: flex; flex-direction: column; gap: 10px; min-width: 130px; }
.pub-footer-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--color-neutral-300); margin-bottom: 2px; }
.pub-footer-col a { font-size: 13px; color: var(--color-neutral-500); transition: color var(--transition-base); }
.pub-footer-col a:hover { color: var(--color-primary-300); text-decoration: underline; text-underline-offset: 2px; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .lp-header { padding: 0 20px; }
  .lp-nav { display: none; }
  .lp-burger { display: block; }
  .lp-hero { padding: 52px 20px; min-height: 0; }
  .lp-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  /* Les cartes flottantes partent, mais le tip reste : c'est un argument, pas une décoration. */
  .lp-hero-visual { height: auto; }
  .lp-float-card, .lp-float-badge { display: none; }
  .lp-hero-tip { position: static; width: auto; max-width: 460px; }
  .lp-section { padding: 60px 20px; }
  .lp-stats-bar { flex-wrap: wrap; }
  .lp-stat { flex: 1 0 50%; border-top: 1px solid var(--border); }
  .lp-steps { flex-direction: column; gap: 12px; }
  .lp-step-arrow { display: none; }
  .lp-pro-grid { grid-template-columns: 1fr; }
  .lp-pledge-grid { grid-template-columns: 1fr; }
  .lp-pledges { padding: 60px 20px; }
  .lp-cta-section { padding: 64px 20px; }
}
@media (max-width: 640px) {
  .pub-footer-inner { flex-direction: column; gap: 32px; }
  .pub-footer-brand { max-width: 100%; }
  .pub-footer-links { gap: 28px; }
}
@media (max-width: 480px) {
  .lp-hero-ctas { flex-direction: column; align-items: flex-start; }
  .lp-stat { flex: 1 0 100%; border-right: none; }
}