/* ============================================================
   Launch by ShowUP — design system (extension du site showupadvisory.com)
   Réutilise les tokens, la typo et le langage graphique existants.
   ============================================================ */
:root{
  --noir:#0A0A0A; --orange:#FF924D; --blanc:#F5F5F2;
  --gris-fonce:#2A2A2A; --gris-clair:#D9D9D9;
  --font:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --max:1160px; --pad:6vw;
  --hairline:#D9D9D9; --hairline-dark:#2A2A2A;
}
@media (min-width:1280px){ :root{ --pad:0; } }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--noir); color:var(--blanc); font-family:var(--font);
  font-weight:400; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ margin:0; font-weight:700; line-height:1.08; letter-spacing:-.02em; text-wrap:balance; }
a{ color:inherit; }
::selection{ background:var(--orange); color:var(--noir); }
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }

.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.mark{ display:inline-block; width:.5em; height:.5em; background:var(--orange); flex:none; }

/* ---- Marque ---- */
.brand{ display:inline-flex; align-items:flex-end; gap:0; font-weight:700; font-size:1.4rem;
  letter-spacing:-.03em; text-decoration:none; line-height:1; }
.brand .show{ color:var(--blanc); } .brand .up{ color:var(--orange); }
.brand .dot{ width:.26em; height:.26em; background:var(--orange); margin-left:.06em; margin-bottom:.06em; }
.on-light .brand .show, .brand.on-light .show{ color:var(--noir); }

.eyebrow{ display:inline-flex; align-items:center; gap:.6rem; font-weight:500; font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--orange); margin:0; }

/* ---- Boutons / liens ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-family:var(--font);
  font-weight:600; font-size:.92rem; letter-spacing:.01em; padding:.95rem 1.5rem;
  background:var(--orange); color:var(--noir); border:1.5px solid var(--orange);
  text-decoration:none; cursor:pointer; transition:background .18s ease, color .18s ease; }
.btn:hover, .btn:focus-visible{ background:transparent; color:var(--orange); }
.btn.ghost{ background:transparent; color:var(--blanc); border-color:var(--gris-fonce); }
.btn.ghost:hover, .btn.ghost:focus-visible{ color:var(--orange); border-color:var(--orange); }
.btn.block{ width:100%; }
.btn.lg{ padding:1.1rem 1.8rem; font-size:1rem; }
.btn svg{ width:18px; height:18px; }
.link-arrow{ display:inline-flex; align-items:center; gap:.5rem; font-weight:500; font-size:.95rem;
  text-decoration:none; color:var(--blanc); padding-bottom:2px; border-bottom:1.5px solid transparent;
  transition:border-color .18s ease, color .18s ease; }
.link-arrow .arw{ color:var(--orange); transition:transform .18s ease; }
.link-arrow:hover{ border-color:var(--orange); } .link-arrow:hover .arw{ transform:translateX(4px); }

/* ---- Header (repris du site) ---- */
header.site{ position:sticky; top:0; z-index:50; background:var(--noir);
  border-bottom:1px solid transparent; transition:border-color .25s ease; }
header.site.scrolled{ border-bottom-color:var(--hairline-dark); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:2rem; height:74px; }
.nav-links{ display:flex; align-items:center; gap:2.2rem; }
.nav-links a{ font-weight:500; font-size:.92rem; text-decoration:none; color:var(--blanc);
  opacity:.82; transition:opacity .18s ease, color .18s ease; }
.nav-links a:hover, .nav-links a[aria-current]{ opacity:1; color:var(--orange); }
.nav-cta .btn{ padding:.7rem 1.2rem; font-size:.85rem; }
@media (max-width:860px){ .nav-links{ display:none; } }

/* ---- Couverture (SVG injecté) ---- */
.lbs-cover{ display:block; width:100%; height:100%; }
@keyframes lbs-drift{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
.lbs-cover .lbs-sillage{ animation:lbs-drift 5.5s ease-in-out infinite; transform-origin:center; }
.lbs-cover--static .lbs-sillage{ animation:none; }
@media (prefers-reduced-motion:reduce){ .lbs-cover .lbs-sillage{ animation:none; } }
.cover-frame{ position:relative; aspect-ratio:4/5; overflow:hidden; border:1px solid var(--hairline-dark);
  background:var(--blanc); }
.light .cover-frame{ border-color:var(--gris-clair); }

/* ---- Sections ---- */
section.block{ padding:5rem 0; }
.light{ background:var(--blanc); color:var(--noir); border-bottom:1px solid var(--gris-clair); }
.section-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:2rem;
  flex-wrap:wrap; margin-bottom:3rem; }
.section-head h2{ font-size:clamp(1.9rem,3.4vw,2.9rem); max-width:18ch; }
.section-head .meta{ font-size:.9rem; max-width:34ch; color:var(--gris-fonce); }

/* ---- HERO catalogue ---- */
.cat-hero{ padding:4.5rem 0 3.5rem; border-bottom:1px solid var(--hairline-dark); }
.cat-hero h1{ font-size:clamp(2.2rem,5.6vw,4rem); margin:1.4rem 0 0; max-width:20ch; }
.cat-hero h1 .o{ color:var(--orange); }
.cat-hero p.lead{ margin:1.6rem 0 0; max-width:52ch; color:var(--gris-clair); font-size:clamp(1rem,1.4vw,1.15rem); }
.cat-hero .cta-row{ display:flex; flex-wrap:wrap; gap:1.2rem 1.8rem; margin-top:2.4rem; align-items:center; }

/* ---- Grille catalogue (galerie éditoriale, pas des cards SaaS) ---- */
.catalogue{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media (max-width:860px){ .catalogue{ grid-template-columns:repeat(2,1fr); gap:1rem; } }
@media (max-width:560px){ .catalogue{ grid-template-columns:1fr; } }
.pcard{ display:flex; flex-direction:column; text-decoration:none; color:var(--blanc); position:relative; }
.pcard .cover-frame{ transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.pcard:hover .cover-frame, .pcard:focus-visible .cover-frame{ transform:translateY(-6px) scale(1.012); }
.pcard .cover-frame .over{ position:absolute; inset:auto 0 0 0; padding:.9rem 1rem;
  background:linear-gradient(180deg,transparent,rgba(10,10,10,.0)); opacity:0; transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease; }
.pcard:hover .over, .pcard:focus-visible .over{ opacity:1; transform:none; }
.pcard .over .go{ display:inline-flex; align-items:center; gap:.45rem; background:var(--orange);
  color:var(--noir); font-weight:600; font-size:.8rem; padding:.5rem .8rem; }
.pcard .meta-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; }
.pcard .p-sect{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gris-clair); }
.pcard .p-price{ font-weight:600; font-size:.92rem; color:var(--orange); }
.pcard .p-title{ font-size:1.15rem; font-weight:700; margin:.5rem 0 0; }
.pcard .p-sub{ font-size:.86rem; color:var(--gris-clair); margin:.4rem 0 0; }
.pcard.soon{ pointer-events:none; }
.pcard.soon .cover-frame{ filter:grayscale(.15); }
.pcard .flag{ position:absolute; top:0; left:0; background:var(--noir); color:var(--blanc);
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; padding:.35rem .6rem; border:1px solid var(--hairline-dark); }
.pcard .flag.hot{ background:var(--orange); color:var(--noir); border-color:var(--orange); }

/* ---- reveal ---- */
body.reveal-on [data-reveal]{ opacity:0; transform:translateY(14px); }
body.reveal-on [data-reveal].in{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease; }
@media (prefers-reduced-motion:reduce){ body.reveal-on [data-reveal]{ opacity:1!important; transform:none!important; } }

/* ---- footer ---- */
footer.site{ border-top:1px solid var(--hairline-dark); padding:1.8rem 0; margin-top:1rem; }
.foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.foot small{ color:var(--gris-clair); font-size:.82rem; }

.skip{ position:absolute; left:-9999px; top:0; background:var(--orange); color:var(--noir); padding:.7rem 1rem; font-weight:600; z-index:100; }
.skip:focus{ left:.5rem; top:.5rem; }

/* ============================================================
   LANDING PRODUIT
   ============================================================ */
:root{ --accent:#7A2E43; }

/* ---- Hero produit ---- */
.p-hero{ padding:3.5rem 0 4rem; border-bottom:1px solid var(--hairline-dark); }
.p-hero .grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; }
@media (max-width:880px){ .p-hero .grid{ grid-template-columns:1fr; gap:2.4rem; } }
.p-hero h1{ font-size:clamp(2rem,4.8vw,3.4rem); margin:1.2rem 0 0; max-width:16ch; }
.p-hero h1 .o{ color:var(--orange); }
.p-hero .sub{ margin:1.4rem 0 0; max-width:44ch; color:var(--gris-clair); font-size:clamp(1rem,1.4vw,1.12rem); }
.p-hero .cover-hold{ max-width:360px; margin-inline:auto; }
.p-hero .cover-hold .cover-frame{ box-shadow:none; }
.buy-inline{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; margin-top:2.2rem; }
.price-tag{ font-weight:700; font-size:1.5rem; letter-spacing:-.02em; }
.pay-badges{ display:flex; gap:.5rem; align-items:center; }
.pay-badges .pay{ font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--hairline-dark); padding:.35rem .6rem; color:var(--gris-clair); }
.trust-row{ display:flex; gap:1.4rem; flex-wrap:wrap; margin-top:1.4rem; font-size:.82rem; color:var(--gris-clair); }
.trust-row span{ display:inline-flex; gap:.45rem; align-items:center; }
.trust-row span::before{ content:""; width:6px; height:6px; background:var(--orange); }

/* ---- Problème (2 colonnes) ---- */
.prob-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--gris-clair); border:1px solid var(--gris-clair); }
@media (max-width:760px){ .prob-grid{ grid-template-columns:1fr; } }
.prob-col{ background:var(--blanc); padding:2rem 1.9rem 2.2rem; }
.prob-col h3{ font-size:1.25rem; margin-bottom:1rem; }
.prob-col.have h3{ color:var(--gris-fonce); }
.prob-col.miss{ background:#111; color:var(--blanc); }
.prob-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.prob-col li{ position:relative; padding-left:1.4rem; font-size:.95rem; }
.prob-col.have li::before{ content:"✓"; position:absolute; left:0; color:var(--orange); font-weight:700; }
.prob-col.miss li::before{ content:"?"; position:absolute; left:0; color:var(--orange); font-weight:700; }
.prob-col.miss li{ color:var(--gris-clair); }

/* ---- Solution ---- */
.solution{ background:var(--accent); color:var(--blanc); }
.solution .wrap{ padding-top:4.5rem; padding-bottom:4.5rem; }
.solution p{ font-size:clamp(1.3rem,2.6vw,1.9rem); font-weight:600; max-width:24ch; line-height:1.25; letter-spacing:-.02em; }
.solution .eyebrow{ color:var(--blanc); opacity:.85; }
#solution-text{ display:block; margin-top:1.2rem; }

/* ---- Contenu (10 chapitres) ---- */
.contenu-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--gris-clair); border:1px solid var(--gris-clair); }
@media (max-width:760px){ .contenu-grid{ grid-template-columns:1fr; } }
.chap{ background:var(--blanc); padding:1.7rem 1.7rem 1.8rem; }
.chap-n{ font-size:.8rem; font-weight:700; color:var(--orange); font-variant-numeric:tabular-nums; letter-spacing:.05em; }
.chap h3{ font-size:1.2rem; margin:.5rem 0 0; transition:transform .2s ease; }
.chap:hover h3{ transform:translateX(5px); }
.chap p{ margin:.6rem 0 0; color:var(--gris-fonce); font-size:.92rem; }

/* ---- Inclus / bonus ---- */
.inclus{ display:grid; grid-template-columns:.9fr 1.1fr; gap:2.5rem; align-items:start; }
@media (max-width:820px){ .inclus{ grid-template-columns:1fr; gap:1.6rem; } }
#inclus-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
#inclus-list li{ padding:1rem 0; border-top:1px solid var(--gris-clair); position:relative; padding-left:1.6rem; font-weight:500; }
#inclus-list li:last-child{ border-bottom:1px solid var(--gris-clair); }
#inclus-list li::before{ content:"+"; position:absolute; left:0; color:var(--orange); font-weight:700; font-size:1.1rem; top:.9rem; }

/* ---- Aperçu (pages superposées) ---- */
.apercu-strip{ display:flex; gap:0; padding:1rem 0 2rem; overflow-x:auto; }
.page-peek{ flex:none; width:150px; aspect-ratio:3/4; background:var(--blanc); border:1px solid var(--gris-clair);
  margin-left:-26px; box-shadow:-8px 0 24px rgba(0,0,0,.08); display:flex; align-items:flex-end; padding:1rem;
  transform:rotate(calc((var(--i) - 2) * 1.2deg)); transition:transform .3s ease; }
.page-peek:first-child{ margin-left:0; }
.page-peek:hover{ transform:translateY(-8px) rotate(0); z-index:2; }
.page-peek span{ font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gris-fonce); }

/* ---- Bloc prix final ---- */
.pricebox{ border:1.5px solid var(--orange); padding:2.4rem 2rem; display:flex; flex-direction:column; gap:1rem;
  max-width:520px; }
.pricebox .k{ font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gris-clair); }
.pricebox .big{ font-size:clamp(2rem,5vw,2.8rem); font-weight:700; letter-spacing:-.02em; }
.pricebox .terms{ display:flex; gap:1.2rem; flex-wrap:wrap; font-size:.85rem; color:var(--gris-clair); }
.pricebox .terms span::before{ content:""; display:inline-block; width:6px; height:6px; background:var(--orange); margin-right:.45rem; }

/* ---- Cross-sell ---- */
.cross-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
@media (max-width:640px){ .cross-grid{ grid-template-columns:repeat(3,1fr); gap:.6rem; } }
.cross{ text-decoration:none; color:var(--blanc); display:flex; flex-direction:column; gap:.6rem; }
.cross .cover-frame{ transition:transform .3s ease; }
.cross:hover .cover-frame{ transform:translateY(-4px); }
.cross .p-sect{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gris-clair); }

/* ============================================================
   CHECKOUT / SUCCÈS / ÉCHEC
   ============================================================ */
.checkout-wrap{ max-width:840px; margin:0 auto; padding:3rem var(--pad) 4rem; }
.checkout-grid{ display:grid; grid-template-columns:1fr .85fr; gap:2.5rem; align-items:start; }
@media (max-width:760px){ .checkout-grid{ grid-template-columns:1fr; gap:1.8rem; } .co-summary{ order:-1; } }

/* Récap produit */
.co-summary{ border:1px solid var(--hairline-dark); padding:1.4rem; display:flex; gap:1.1rem; align-items:center; position:sticky; top:90px; }
.co-summary .thumb{ width:78px; flex:none; }
.co-summary .thumb .cover-frame{ aspect-ratio:4/5; }
.co-summary .s-sect{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gris-clair); }
.co-summary h3{ font-size:1.05rem; margin:.25rem 0 0; }
.co-summary .s-price{ margin-top:.5rem; font-weight:700; font-size:1.2rem; color:var(--orange); }

/* Formulaire */
.co-form h1{ font-size:clamp(1.6rem,3.6vw,2.3rem); }
.co-form .lead{ color:var(--gris-clair); margin:.8rem 0 2rem; font-size:.95rem; }
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gris-clair); margin-bottom:.5rem; }
.field input{ width:100%; font-family:var(--font); font-size:1rem; color:var(--blanc); background:#141414;
  border:1px solid var(--hairline-dark); padding:.9rem 1rem; outline:none; transition:border-color .18s ease; }
.field input:focus{ border-color:var(--orange); }
.field input::placeholder{ color:#6b6b6b; }
.field.invalid input{ border-color:#E05A4B; }
.field .err{ display:none; color:#E88; font-size:.78rem; margin-top:.4rem; }
.field.invalid .err{ display:block; }

/* Choix moyen de paiement */
.pay-choice{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin:.4rem 0 1.4rem; }
.pay-opt{ position:relative; }
.pay-opt input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.pay-opt .box{ border:1.5px solid var(--hairline-dark); padding:1rem; display:flex; flex-direction:column; gap:.3rem; cursor:pointer; transition:border-color .18s ease, background .18s ease; }
.pay-opt .box .m{ font-weight:600; font-size:.95rem; }
.pay-opt .box .h{ font-size:.72rem; color:var(--gris-clair); }
.pay-opt input:checked + .box{ border-color:var(--orange); background:rgba(255,146,77,.06); }
.pay-opt input:focus-visible + .box{ outline:2px solid var(--orange); outline-offset:2px; }

.consent{ display:flex; gap:.6rem; align-items:flex-start; font-size:.82rem; color:var(--gris-clair); margin:.2rem 0 1.6rem; }
.consent input{ margin-top:.2rem; accent-color:var(--orange); }

.co-note{ font-size:.78rem; color:#8a8a8a; margin-top:1rem; display:flex; gap:.5rem; align-items:center; }
.co-note svg{ width:14px; height:14px; flex:none; color:var(--orange); }

.banner{ display:none; padding:1rem 1.1rem; border:1px solid; margin-bottom:1.4rem; font-size:.88rem; }
.banner.show{ display:block; }
.banner.error{ border-color:#E05A4B; background:rgba(224,90,75,.08); color:#f0b9b1; }
.banner.info{ border-color:var(--hairline-dark); background:#141414; color:var(--gris-clair); }

/* Pages statut */
.status-wrap{ max-width:640px; margin:0 auto; padding:5rem var(--pad); text-align:center; }
.status-wrap .cover-hold{ max-width:220px; margin:0 auto 2rem; }
.status-wrap h1{ font-size:clamp(1.8rem,4vw,2.6rem); }
.status-wrap p{ color:var(--gris-clair); margin:1rem 0 0; }
.status-wrap .actions{ margin-top:2.2rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.status-icon{ width:56px; height:56px; margin:0 auto 1.4rem; display:flex; align-items:center; justify-content:center; border:2px solid var(--orange); border-radius:50%; }
.status-icon.fail{ border-color:#E05A4B; }
.status-icon svg{ width:28px; height:28px; }