/* ══════════════════════════════════════════════════════════════════════════ LANDINGS VERTICALES — /solutions/*.html Ne contient que ce qui n'existe pas déjà. Tout le reste est repris de main.css : .s .rt .rb, .chip, h2, .body, .cost-banner, .vs-grid, .ai/.ab/.ap, .form-card, .cta-band, .pipe-demo-wrap, .plan. Une verticale = une classe sur , qui ne change que l'accent. ══════════════════════════════════════════════════════════════════════════ */ /* Sélecteurs sans `body` : la même classe sert sur (une landing entière) ou sur une carte du hub, qui redéfinit alors l'accent pour son seul sous-arbre. L'ordre compte — .lp pose le défaut, les verticales le remplacent. */ .lp { --accent:var(--blue); --accent-soft:#eff6ff; --accent-line:#bfdbfe; } .lp-formation { --accent:#7c3aed; --accent-soft:#f5f3ff; --accent-line:#ddd6fe; } .lp-agence { --accent:#f97316; --accent-soft:#fff7ed; --accent-line:#fed7aa; } .lp-it { --accent:#0891b2; --accent-soft:#ecfeff; --accent-line:#a5f3fc; } .lp-ameublement { --accent:#b45309; --accent-soft:#fffbeb; --accent-line:#fde68a; } .lp-materiaux { --accent:#15803d; --accent-soft:#f0fdf4; --accent-line:#bbf7d0; } .chip.acc{color:var(--accent);} .lp-hl{color:var(--accent);} h2 .lp-hl{color:var(--accent);} /* ── HERO ─────────────────────────────────────────────────────────────── */ .lp-hero{padding:7.5rem var(--px) 4.5rem;display:grid;grid-template-columns:1.1fr 1fr;gap:4.5rem;align-items:center;border-bottom:1px solid var(--rule);position:relative;overflow:hidden;} .lp-hero::before{content:'';position:absolute;width:520px;height:520px;border-radius:50%;background:var(--accent);opacity:.06;filter:blur(60px);top:-160px;right:-120px;pointer-events:none;} .lp-hero-l,.lp-hero-r{position:relative;z-index:1;} .lp-hero-r{max-width:420px;width:100%;justify-self:center;} @media(max-width:900px){.lp-hero{grid-template-columns:1fr;gap:2.5rem;padding:6.5rem var(--px) 3.5rem;}} .lp-tag{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--fd);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1.5px solid var(--accent);padding:.35rem .9rem;border-radius:99px;margin-bottom:1.4rem;} /* Plus compact que le h1 de l'accueil : une landing s'ouvre sur l'offre, pas sur la marque */ .lp-hero h1{font-size:clamp(2rem,3.4vw,3.1rem);} .lp-hero-desc{font-size:1rem;color:var(--mid);line-height:1.7;margin-top:1.2rem;max-width:48ch;} .lp-hero-desc strong{color:var(--ink);font-weight:600;} .lp-proof{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem;} .lp-proof span{font-size:.75rem;font-weight:600;color:var(--accent);background:var(--accent-soft);border:1.5px solid var(--accent-line);border-radius:99px;padding:.3rem .85rem;} .lp-hero .form-card{box-shadow:6px 6px 0 var(--accent);} /* ── CONSTATS ─────────────────────────────────────────────────────────── */ .lp-pains{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3rem;} @media(max-width:900px){.lp-pains{grid-template-columns:1fr;}} .lp-pain{border:2px solid var(--rule);border-radius:18px;padding:1.8rem;background:var(--w);transition:transform .2s,box-shadow .2s,border-color .2s;} .lp-pain:hover{transform:translateY(-4px);border-color:var(--accent-line);box-shadow:0 16px 40px rgba(0,0,0,.07);} .lp-pain-k{font-family:var(--fd);font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.8rem;} .lp-pain-t{font-family:var(--fd);font-size:1.08rem;font-weight:800;color:var(--ink);letter-spacing:-.01em;line-height:1.3;margin-bottom:.6rem;} .lp-pain-d{font-size:.9rem;color:var(--mid);line-height:1.7;} /* ── OBJECTIONS (onglets) ─────────────────────────────────────────────── */ /* DOM statique : i18n traduit en place, le JS ne déplace que la sélection. */ .lp-tabs{margin-top:2.5rem;} .lp-tablist{display:flex;flex-wrap:wrap;gap:.5rem;} .lp-tab{font-family:var(--fd);font-size:.85rem;font-weight:700;letter-spacing:-.01em;padding:.55rem 1.15rem;border-radius:99px;border:1.5px solid var(--rule);background:var(--w);color:var(--mid);cursor:pointer;transition:color .15s,border-color .15s,background .15s;} .lp-tab:hover{border-color:var(--accent);color:var(--accent);} .lp-tab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:#fff;} .lp-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} .lp-tabpanels{margin-top:1.5rem;padding:2.2rem 2.4rem;border:1.5px solid var(--accent-line);background:var(--accent-soft);border-radius:20px;min-height:150px;} .lp-tabpanel{display:none;} .lp-tabpanel.on{display:block;animation:lp-fade .25s ease both;} @keyframes lp-fade{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}} .lp-tab-q{font-family:var(--fd);font-size:1.2rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.35;margin-bottom:.8rem;} .lp-tab-a{font-size:.97rem;color:var(--mid);line-height:1.75;max-width:68ch;} .lp-tab-a::before{content:'→';color:var(--accent);font-family:var(--fd);font-weight:800;margin-right:.5rem;} @media(max-width:640px){ .lp-tab{font-size:.8rem;padding:.5rem .9rem;} .lp-tabpanels{padding:1.6rem 1.4rem;} .lp-tab-q{font-size:1.05rem;} } /* ── CONVERSATION ─────────────────────────────────────────────────────── */ .lp-chat{max-width:720px;margin:3rem auto 0;border:2px solid var(--ink);border-radius:22px;background:var(--w);overflow:hidden;box-shadow:6px 6px 0 var(--accent);} .lp-chat-hd{display:flex;align-items:center;gap:.6rem;padding:.9rem 1.4rem;border-bottom:1px solid var(--rule);background:#fafafa;} .lp-chat-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.22);} .lp-chat-hd-t{font-family:var(--fd);font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mid);} .lp-chat-body{padding:1.6rem 1.4rem;display:flex;flex-direction:column;gap:.9rem;} .lp-msg{max-width:82%;font-size:.9rem;line-height:1.65;padding:.85rem 1.1rem;border-radius:16px;} .lp-msg-who{display:block;font-family:var(--fd);font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.55;margin-bottom:.35rem;} .lp-msg.v{align-self:flex-end;background:#f1f5f9;color:var(--ink);border-bottom-right-radius:5px;} .lp-msg.a{align-self:flex-start;background:var(--accent-soft);border:1.5px solid var(--accent-line);color:var(--ink);border-bottom-left-radius:5px;} .lp-msg.a .lp-msg-who{color:var(--accent);opacity:1;} .lp-chat-out{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;padding:1rem 1.4rem;background:var(--ink);color:#fff;font-family:var(--fd);font-size:.82rem;font-weight:800;letter-spacing:-.01em;text-align:center;} .lp-chat-out::before{content:'✓';color:#4ade80;font-size:.9rem;} .lp-note{text-align:center;font-size:.78rem;color:var(--soft);line-height:1.6;margin-top:1.2rem;max-width:60ch;margin-left:auto;margin-right:auto;} /* ── FICHE PROSPECT ───────────────────────────────────────────────────── */ .lp-lead-split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;margin-top:2rem;} @media(max-width:900px){.lp-lead-split{grid-template-columns:1fr;gap:2.5rem;}} .lp-lead{border:2px solid var(--ink);border-radius:20px;background:var(--w);overflow:hidden;} .lp-lead-hd{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.4rem;background:var(--ink);color:#fff;} .lp-lead-hd-t{font-family:var(--fd);font-size:.85rem;font-weight:900;letter-spacing:-.01em;} .lp-lead-hd-s{font-size:.7rem;color:rgba(255,255,255,.5);} .lp-lead-row{display:grid;grid-template-columns:38% 1fr;gap:1rem;padding:.8rem 1.4rem;border-bottom:1px solid var(--rule);font-size:.86rem;} .lp-lead-row:last-of-type{border-bottom:none;} .lp-lead-l{color:var(--soft);} .lp-lead-v{color:var(--ink);font-weight:600;} .lp-lead-foot{padding:.9rem 1.4rem;background:var(--accent-soft);border-top:1.5px solid var(--accent-line);font-size:.8rem;font-weight:600;color:var(--accent);} @media(max-width:480px){.lp-lead-row{grid-template-columns:1fr;gap:.15rem;}} /* ── HUB /solutions/ ──────────────────────────────────────────────────── */ .sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem;} @media(max-width:960px){.sol-grid{grid-template-columns:1fr 1fr;}} @media(max-width:640px){.sol-grid{grid-template-columns:1fr;}} .sol-card{display:flex;flex-direction:column;padding:2rem;border-radius:20px;border:2px solid var(--rule);background:var(--w);text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s;} .sol-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 16px 40px rgba(0,0,0,.08);} .sol-card-sector{font-family:var(--fd);font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:.8rem;} .sol-card-title{font-family:var(--fd);font-size:1.25rem;font-weight:900;color:var(--ink);letter-spacing:-.02em;line-height:1.25;margin-bottom:.7rem;} .sol-card-body{font-size:.9rem;color:var(--mid);line-height:1.7;flex:1;margin-bottom:1.4rem;} .sol-card-go{font-family:var(--fd);font-size:.85rem;font-weight:800;color:var(--accent);letter-spacing:-.01em;} .sol-more{margin-top:3rem;padding:1.75rem 2rem;border-radius:18px;background:#f8f9fc;border:1.5px solid var(--rule);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;} .sol-more-t{font-family:var(--fd);font-size:1.05rem;font-weight:800;color:var(--ink);letter-spacing:-.01em;} .sol-more-s{font-size:.88rem;color:var(--mid);margin-top:.25rem;} .sol-more a{font-family:var(--fd);font-size:.88rem;font-weight:800;color:#fff;background:var(--ink);padding:.75rem 1.5rem;border-radius:10px;text-decoration:none;white-space:nowrap;transition:background .15s;} .sol-more a:hover{background:#222;} /* ── BANDEAU FINAL ────────────────────────────────────────────────────── */ .lp-cta{background:var(--accent);} .lp-cta .cta-title .u{text-decoration-color:rgba(255,255,255,.55);}