/* ==========================================================================
   lp.css · styles partagés des landing pages payantes (1 sport = 1 offre)
   Chargé avec escapad-chrome.css (vars, .btn*, modale, bandeau cookies).
   Chrome volontairement allégé : header minimal + 1 CTA, footer slim, pas de
   méga-nav. Toutes les classes sont préfixées .lp-* (page autonome).
   ========================================================================== */

/* escapad-chrome.css réserve un padding-top (banner + nav fixes) en haut du body.
   Les LP n'ont ni bannière ni nav fixe (header .lp-header collant) : on annule ce
   réservé, sinon le fond jaune du body apparaît en bande vide au-dessus du header. */
body { padding-top:0; }

/* ---- Header slim, collant ---- */
.lp-header {
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 40px;
  background:var(--cream); border-bottom:1.5px solid var(--midnight);
}
.lp-header .nav-logo { font-size:22px; }
.lp-header-cta { display:flex; align-items:center; gap:14px; }
.lp-header-cta .lp-rating { font-size:12px; font-weight:700; opacity:0.75; white-space:nowrap; }
.lp-header-cta .lp-rating b { color:#e0a52a; }
@media (max-width:640px){
  .lp-header { padding:12px 18px; }
  .lp-header-cta .lp-rating { display:none; }
  .lp-header .btn { padding:11px 16px; font-size:13px; }
}

/* ---- Hero ---- */
.lp-hero { background:var(--midnight); color:var(--cream); padding:84px 40px 96px; border-bottom:1.5px solid var(--midnight); }
.lp-hero-wrap { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center; }
.lp-eyebrow { display:inline-block; font-size:12px; font-weight:800; letter-spacing:0.18em; text-transform:uppercase; color:var(--peach); border:1.5px solid rgba(255,192,158,0.5); border-radius:100px; padding:7px 14px; margin-bottom:22px; }
.lp-hero h1 { font-size:clamp(44px,6vw,92px); line-height:0.88; letter-spacing:-0.05em; text-transform:uppercase; margin-bottom:22px; }
.lp-hero h1 .l1 { font-weight:300; display:block; } .lp-hero h1 .l2 { font-weight:900; display:block; }
.lp-hero p.lede { font-size:18px; line-height:1.55; opacity:0.9; max-width:520px; margin-bottom:26px; }
.lp-hero-offer { display:inline-flex; align-items:baseline; gap:12px; background:var(--yellow); color:var(--midnight); border:1.5px solid var(--midnight); border-radius:14px; padding:14px 20px; margin-bottom:26px; box-shadow:5px 5px 0 rgba(0,0,0,0.25); }
.lp-hero-offer .price { font-size:34px; font-weight:900; letter-spacing:-0.03em; line-height:1; }
.lp-hero-offer .strike { font-size:16px; font-weight:700; opacity:0.55; text-decoration:line-through; }
.lp-hero-offer .lbl { font-size:13px; font-weight:700; }
.lp-hero-ctas { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:26px; }
.lp-hero .btn.primary { background:var(--yellow); color:var(--midnight); border-color:var(--yellow); }
.lp-hero .btn.ghost { color:var(--cream); border-color:rgba(248,243,228,0.5); }
.lp-hero-meta { display:flex; flex-wrap:wrap; gap:10px 22px; font-size:13px; font-weight:600; opacity:0.85; }
.lp-hero-meta span { display:inline-flex; align-items:center; gap:7px; }
.lp-hero-meta span::before { content:'✓'; color:var(--peach); font-weight:900; }
@media (max-width:880px){
  .lp-hero { padding:56px 20px 64px; }
  .lp-hero-wrap { grid-template-columns:1fr; gap:36px; }
}

/* ---- Hero « mur de stickers » (polaroïds par activité, façon home) ---- */
.lp-hero-wall { position:relative; min-height:480px; }
.lp-pola { position:absolute; width:172px; height:212px; background:var(--cream); border-radius:4px; padding:10px 10px 34px; box-shadow:0 18px 36px rgba(0,0,0,0.4); }
.lp-pola span { position:absolute; inset:10px 10px 34px; display:block; border-radius:2px; overflow:hidden; background:linear-gradient(135deg,#1a2740,#2c6538 70%); }
.lp-pola span img { width:100%; height:100%; object-fit:cover; display:block; }
.lp-pola b { position:absolute; left:10px; right:10px; bottom:11px; text-align:center; color:var(--midnight); font-size:11px; font-weight:800; letter-spacing:0.03em; }
.lp-pola-1 { top:2%; left:4%; transform:rotate(-7deg); z-index:2; }
.lp-pola-2 { top:0; right:3%; transform:rotate(6deg); z-index:1; }
.lp-pola-3 { bottom:3%; left:0; transform:rotate(5deg); z-index:3; }
.lp-pola-4 { bottom:0; right:5%; transform:rotate(-6deg); z-index:1; }
/* Dégradés de repli (bien-être, sans photo) : on varie par sticker */
.lp-pola.grad-a span { background:linear-gradient(135deg,#14233a,#2c6538 60%,#c9883f); }
.lp-pola.grad-b span { background:linear-gradient(135deg,#1a2740,#3a6f7a 55%,#9fb8c2); }
.lp-pola.grad-c span { background:linear-gradient(135deg,#2a1608,#8f3a24 55%,var(--terracotta)); }
.lp-pola.grad-d span { background:linear-gradient(135deg,#15331c,#245530 55%,var(--parrot)); }
@media (max-width:880px){ .lp-hero-wall { display:none; } }

/* ---- Bandeau défilant + bande photos sous le hero ---- */
.lp-marquee { background:var(--peach); border-bottom:1.5px solid var(--midnight); overflow:hidden; padding:11px 0; }
.lp-marquee-track { display:inline-flex; align-items:center; gap:20px; white-space:nowrap; animation:lp-scroll 24s linear infinite; }
.lp-marquee-track span { font-size:15px; font-weight:900; letter-spacing:-0.01em; text-transform:uppercase; color:var(--midnight); }
.lp-marquee-track span.dot { opacity:0.45; }
@keyframes lp-scroll { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .lp-marquee-track { animation:none; } }
.lp-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:0; background:var(--midnight); border-bottom:1.5px solid var(--midnight); }
.lp-strip-cell { position:relative; aspect-ratio:4/3; overflow:hidden; border-right:1.5px solid rgba(248,243,228,0.12); }
.lp-strip-cell:last-child { border-right:none; }
.lp-strip-cell img { width:100%; height:100%; object-fit:cover; display:block; }
.lp-strip-cell.grad-a { background:linear-gradient(135deg,#14233a,#2c6538 60%,#c9883f); }
.lp-strip-cell.grad-b { background:linear-gradient(135deg,#1a2740,#3a6f7a 55%,#9fb8c2); }
.lp-strip-cell.grad-c { background:linear-gradient(135deg,#2a1608,#8f3a24 55%,var(--terracotta)); }
.lp-strip-cell.grad-d { background:linear-gradient(135deg,#15331c,#245530 55%,var(--parrot)); }
@media (max-width:640px){ .lp-strip { grid-template-columns:repeat(2,1fr); } }

/* ---- Barre de confiance (stats) ---- */
.lp-trust { background:var(--paper); border-bottom:1.5px solid var(--midnight); padding:26px 40px; }
.lp-trust-wrap { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.lp-trust-it { text-align:center; }
.lp-trust-it b { display:block; font-size:26px; font-weight:900; letter-spacing:-0.03em; }
.lp-trust-it span { font-size:12.5px; font-weight:600; opacity:0.7; }
@media (max-width:640px){ .lp-trust-wrap { grid-template-columns:1fr 1fr; gap:18px; } }

/* ---- Section générique + en-têtes ---- */
.lp-sec { padding:104px 40px; border-bottom:1.5px solid var(--midnight); }
.lp-sec-head { max-width:740px; margin-bottom:46px; }
.lp-sec-head .lp-kicker { font-size:12px; font-weight:800; letter-spacing:0.18em; text-transform:uppercase; opacity:0.55; }
.lp-sec-head h2 { font-size:clamp(38px,5.2vw,78px); line-height:0.9; letter-spacing:-0.05em; text-transform:uppercase; margin:8px 0 16px; }
.lp-sec-head h2 .l1 { font-weight:300; } .lp-sec-head h2 .l2 { font-weight:900; }
.lp-sec-head p { font-size:17px; line-height:1.55; opacity:0.85; }
.lp-sec.cream { background:var(--cream); } .lp-sec.paper { background:var(--paper); }
.lp-sec.dark { background:var(--midnight); color:var(--cream); }
.lp-sec.dark .lp-sec-head .lp-kicker { color:var(--peach); opacity:1; }
.lp-sec.parrot { background:var(--parrot); color:var(--cream); }
.lp-sec.parrot .lp-sec-head .lp-kicker { color:var(--peach); opacity:1; }
@media (max-width:520px){ .lp-sec { padding:64px 20px; } }

/* ---- « C'est quoi » (4 points) ---- */
.lp-what-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.lp-what-pt .num { font-size:11px; font-weight:700; letter-spacing:0.18em; opacity:0.5; margin-bottom:10px; }
.lp-what-pt h3 { font-size:18px; font-weight:800; letter-spacing:-0.02em; text-transform:uppercase; margin-bottom:8px; }
.lp-what-pt p { font-size:15px; line-height:1.5; opacity:0.85; }
@media (max-width:820px){ .lp-what-grid { grid-template-columns:1fr 1fr; gap:28px; } }
@media (max-width:480px){ .lp-what-grid { grid-template-columns:1fr; } }

/* ---- Réassurance « tous niveaux » + échelle ---- */
.lp-rea-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:48px; }
.lp-rea { background:var(--paper); border:1.5px solid var(--midnight); border-radius:16px; padding:26px 24px; box-shadow:5px 5px 0 rgba(13,11,34,0.08); }
.lp-rea .num { font-size:11px; font-weight:700; letter-spacing:0.18em; opacity:0.5; margin-bottom:12px; }
.lp-rea h3 { font-size:18px; font-weight:800; letter-spacing:-0.02em; text-transform:uppercase; margin-bottom:9px; }
.lp-rea p { font-size:14.5px; line-height:1.55; opacity:0.85; }
.lp-ladder { border:1.5px solid var(--midnight); border-radius:16px; padding:26px 28px; background:var(--paper); }
.lp-ladder-label { font-size:11px; font-weight:800; letter-spacing:0.16em; text-transform:uppercase; opacity:0.55; margin-bottom:18px; }
.lp-ladder-bar { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.lp-ladder-seg .bar { height:10px; border-radius:5px; border:1.5px solid var(--midnight); margin-bottom:11px; }
.lp-ladder-seg:nth-child(1) .bar { background:#7fae6a; }
.lp-ladder-seg:nth-child(2) .bar { background:#e7b53f; }
.lp-ladder-seg:nth-child(3) .bar { background:var(--peach); }
.lp-ladder-seg:nth-child(4) .bar { background:var(--terracotta); }
.lp-ladder-seg:nth-child(5) .bar { background:var(--midnight); }
.lp-ladder-seg .nm { font-size:13px; font-weight:800; letter-spacing:-0.01em; }
.lp-ladder-seg .tag { font-size:11px; font-weight:700; color:var(--parrot); margin-top:3px; }
@media (max-width:820px){ .lp-rea-grid { grid-template-columns:1fr; } .lp-ladder-bar { grid-template-columns:1fr 1fr; gap:14px; } }

/* ---- Déroulé d'une séance (5 étapes) ---- */
.lp-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:0; }
.lp-step { position:relative; padding:0 22px 0 0; }
.lp-step::before { content:''; position:absolute; top:13px; left:0; right:0; height:2px; background:rgba(247,240,224,0.18); }
.lp-step:last-child::before { right:50%; }
.lp-step .dot { position:relative; z-index:1; width:28px; height:28px; border-radius:50%; background:var(--peach); color:var(--midnight); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; margin-bottom:20px; }
.lp-step h3 { font-size:17px; font-weight:800; letter-spacing:-0.02em; text-transform:uppercase; margin-bottom:9px; }
.lp-step p { font-size:14px; line-height:1.5; opacity:0.82; }
@media (max-width:900px){ .lp-steps { grid-template-columns:1fr 1fr; gap:36px 24px; } .lp-step::before { display:none; } }
@media (max-width:520px){ .lp-steps { grid-template-columns:1fr; } }

/* ---- « Pour qui » (audience) ---- */
.lp-who-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.lp-who-card { background:rgba(248,243,228,0.07); border:1.5px solid rgba(248,243,228,0.25); border-radius:16px; padding:26px 22px; display:flex; flex-direction:column; }
.lp-who-card .k { font-size:11px; font-weight:800; letter-spacing:0.18em; text-transform:uppercase; color:var(--peach); margin-bottom:12px; }
.lp-who-card h3 { font-size:21px; font-weight:900; letter-spacing:-0.02em; margin-bottom:10px; }
.lp-who-card p { font-size:14px; line-height:1.55; opacity:0.88; margin-bottom:18px; flex:1; }
.lp-who-card a { font-size:13px; font-weight:800; color:var(--cream); text-decoration:none; letter-spacing:-0.01em; border-bottom:1.5px solid var(--peach); padding-bottom:2px; align-self:flex-start; }
.lp-who-card a:hover { color:var(--peach); }
@media (max-width:920px){ .lp-who-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .lp-who-grid { grid-template-columns:1fr; } }

/* ---- Offre unique (carte mise en avant) ---- */
.lp-offer-card { max-width:560px; margin:0 auto; background:var(--paper); border:2px solid var(--midnight); border-radius:22px; padding:40px 36px; text-align:center; box-shadow:8px 8px 0 var(--midnight); }
.lp-offer-card .badge { display:inline-block; font-size:11px; font-weight:800; letter-spacing:0.16em; text-transform:uppercase; background:var(--peach); border:1.5px solid var(--midnight); border-radius:100px; padding:5px 13px; margin-bottom:18px; }
.lp-offer-card h3 { font-size:26px; font-weight:900; letter-spacing:-0.02em; margin-bottom:14px; }
.lp-offer-card .price { font-size:64px; font-weight:900; letter-spacing:-0.04em; line-height:1; }
.lp-offer-card .price .cur { font-size:32px; vertical-align:super; }
.lp-offer-card .strike { font-size:16px; font-weight:700; opacity:0.5; text-decoration:line-through; margin-left:8px; }
.lp-offer-card ul { list-style:none; margin:22px 0 28px; text-align:left; display:inline-block; }
.lp-offer-card li { font-size:15px; font-weight:600; padding:8px 0 8px 28px; position:relative; }
.lp-offer-card li::before { content:'✓'; position:absolute; left:0; color:var(--parrot); font-weight:900; }
.lp-offer-card .btn { width:100%; justify-content:center; }
.lp-offer-card .fine { font-size:12.5px; opacity:0.65; margin-top:14px; }

/* ---- Avis (preuve sociale) ---- */
.lp-reviews-grid { columns:3 280px; column-gap:18px; }
.lp-review { break-inside:avoid; margin:0 0 18px; background:var(--paper); border:1.5px solid var(--midnight); border-radius:14px; padding:20px 22px; box-shadow:4px 4px 0 rgba(13,11,34,0.08); }
.lp-review .stars { color:#e0a52a; font-size:13px; letter-spacing:2px; margin-bottom:9px; }
.lp-review p { font-size:14px; line-height:1.55; margin-bottom:14px; }
.lp-review .who { display:flex; align-items:center; gap:10px; }
.lp-review .av { width:32px; height:32px; border-radius:50%; background:var(--green); border:1.5px solid var(--midnight); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex-shrink:0; }
.lp-review .nm { font-size:13px; font-weight:800; letter-spacing:-0.01em; }
.lp-review .ct { font-size:11px; opacity:0.6; }

/* ---- FAQ ---- */
.lp-faq-wrap { max-width:920px; margin:0 auto; }
.lp-faq-item { border-top:1.5px solid var(--midnight); padding:22px 4px; }
.lp-faq-item:last-child { border-bottom:1.5px solid var(--midnight); }
.lp-faq-item h3 { font-size:18px; font-weight:800; letter-spacing:-0.02em; margin-bottom:8px; }
.lp-faq-item p { font-size:15px; line-height:1.6; opacity:0.85; }

/* ---- CTA final ---- */
.lp-cta { background:var(--peach); border-bottom:1.5px solid var(--midnight); padding:84px 40px; }
.lp-cta-wrap { max-width:1100px; margin:0 auto; display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between; }
.lp-cta h2 { font-size:clamp(32px,4.5vw,60px); line-height:0.95; letter-spacing:-0.04em; text-transform:uppercase; max-width:680px; }
@media (max-width:520px){ .lp-cta { padding:56px 20px; } }

/* ---- Footer slim ---- */
.lp-footer { background:var(--midnight); color:var(--cream); padding:44px 40px; }
.lp-footer-wrap { max-width:1240px; margin:0 auto; display:flex; flex-wrap:wrap; gap:24px 40px; align-items:flex-start; justify-content:space-between; }
.lp-footer .nav-logo, .lp-footer h3 { color:var(--cream); font-size:22px; }
.lp-footer-addr { font-size:13px; line-height:1.6; opacity:0.8; max-width:420px; }
.lp-footer-links { display:flex; flex-wrap:wrap; gap:16px; font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; opacity:0.6; }
.lp-footer-links a { color:var(--cream); text-decoration:none; }
.lp-footer-links a:hover { opacity:1; text-decoration:underline; }
.lp-footer-bottom { max-width:1240px; margin:28px auto 0; padding-top:18px; border-top:1px solid rgba(255,244,201,0.2); font-size:12px; opacity:0.6; }
