/* ═══════════════════════════════════════════════════════════════════════════ TrendJump — pont DA v2 pour les pages historiques (09/2026) Les pages internes gardent leur HTML et leur feuille (btp.css, tarifs.css…) ; ce fichier les repeint aux tokens v2 : corps clair, Poppins, menthe, pilules. Principe : héros et CTA final en bande sombre (#0B1417), tout le reste blanc. Chargé APRÈS la feuille de la page, et préfixé .v2 pour gagner la cascade. ═══════════════════════════════════════════════════════════════════════ */ /* ── Fond et typo ────────────────────────────────────────────────────── */ /* !important : un script hérité (« background switch » des pages service) pose un fond sombre en style inline sur au fil du scroll. */ body.v2{background:#fff!important;color:var(--ink);padding:0} .v2 *{font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif!important} .v2 .mono,.v2 code,.v2 pre{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace!important} .v2 .blk{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:clamp(20px,3vw,40px);padding-right:clamp(20px,3vw,40px)} /* Titres : plus de capitales condensées, Poppins serré */ .v2 h1,.v2 h2,.v2 h3,.v2 h4, .v2 [class*="title"],.v2 [class*="-ttl"],.v2 [class*="-name"],.v2 [class*="-nm"], .v2 .pricing-amount,.v2 .pricing-currency,.v2 .hero-stat-val,.v2 .hero-stat-big-val, .v2 .hero-stat-sm-val,.v2 .arg-stat-val,.v2 .rapport-delay-val,.v2 .st-n,.v2 .value-num, .v2 .legal-section-num,.v2 .step-n,.v2 .process-step-num,.v2 .faq-q-num,.v2 .info-card-val{ font-weight:700;letter-spacing:-.02em;text-transform:none;line-height:1.15;color:var(--ink)} .v2 .hero-bg-word,.v2 .bg-word{display:none} /* Corps de texte : tous les libellés « -desc / -txt / -sub / -lbl » */ .v2 p,.v2 li,.v2 .txt, .v2 [class*="-desc"],.v2 [class*="-txt"],.v2 [class*="-sub"],.v2 [class*="-lead"], .v2 [class*="-note"],.v2 [class*="-p"],.v2 .faq-a-inner,.v2 .legal-section p{ color:var(--ink-2)} .v2 [class*="-lbl"],.v2 [class*="-label"],.v2 [class*="-meta"],.v2 .meta,.v2 .info-card-lbl{color:var(--muted)} .v2 strong,.v2 b{color:var(--ink)} .v2 em{font-style:normal;color:var(--green)} .v2 a{color:var(--green)} /* Eyebrows / séparateurs de section : plus de petites capitales espacées */ .v2 .section-sep{margin:clamp(48px,6vw,80px) 0 26px;justify-content:flex-start;gap:14px} .v2 .section-sep-line{display:none} .v2 .section-sep-lbl{font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--green)!important} .v2 .hero-eyebrow,.v2 .cta-final-eyebrow,.v2 .faq-intro-eyebrow,.v2 .rapport-eyebrow, .v2 .page-hero-eyebrow,.v2 .s-lbl,.v2 .eyebrow{ font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--green)} .v2 .hero-eyebrow::before,.v2 .cta-final-eyebrow::before,.v2 .s-lbl::before,.v2 .eyebrow::before{display:none} /* ── HÉROS : bande sombre, titre blanc, un mot menthe ────────────────── */ .v2 .hero,.v2 .page-hero{position:relative;background:var(--dark);color:#fff;border-radius:0; width:100vw;margin-left:calc(50% - 50vw);margin-top:0; padding:clamp(120px,14vw,190px) clamp(20px,4vw,64px) clamp(56px,7vw,96px)} .v2 .hero::after{content:'';position:absolute;right:-8%;top:-30%;width:60%;height:160%;pointer-events:none; background:radial-gradient(ellipse at 60% 50%,rgba(98,237,170,.14),transparent 62%)} .v2 .hero > *{position:relative;z-index:1} .v2 .hero-inner,.v2 .page-hero-inner{max-width:1200px;margin:0 auto} .v2 .hero-title,.v2 .page-hero-title{color:#fff;font-size:clamp(34px,5vw,64px);line-height:1.05} .v2 .hero-title em,.v2 .page-hero-title em{color:var(--mint)} .v2 .hero-sub,.v2 .page-hero-sub{color:rgba(255,255,255,.8);font-size:clamp(15px,1.2vw,17px);line-height:1.65} .v2 .hero-sub a{color:var(--mint)} .v2 .hero-eyebrow{color:var(--mint)} .v2 .hero-grid-bg,.v2 .hero-texture{opacity:.35} /* chiffres du héros */ .v2 .hero-stat,.v2 .hero-stat-big,.v2 .hero-stat-sm,.v2 .hero-clients{ background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px} .v2 .hero-stat-val,.v2 .hero-stat-big-val,.v2 .hero-stat-sm-val{color:var(--mint)} .v2 .hero-stat-lbl,.v2 .hero-stat-big-lbl,.v2 .hero-stat-sm-lbl,.v2 .hero-clients-lbl{color:rgba(255,255,255,.62)} .v2 .hero-pill{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.85); border-radius:999px;font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none} /* ── Boutons : pilules ───────────────────────────────────────────────── */ .v2 .btn-accent,.v2 .btn-ghost,.v2 .pricing-cta,.v2 .bp,.v2 .bo,.v2 button[type=submit],.v2 .submit-btn{ border-radius:999px!important;font-size:14.5px!important;font-weight:600!important; letter-spacing:0!important;text-transform:none!important;padding:13px 24px!important} .v2 .btn-accent,.v2 .pricing-cta-featured,.v2 .bp,.v2 button[type=submit],.v2 .submit-btn{ background:var(--mint)!important;color:var(--ink)!important;border:0!important} .v2 .btn-accent::before,.v2 .bp::before{display:none} .v2 .btn-accent:hover,.v2 .pricing-cta-featured:hover,.v2 .bp:hover,.v2 button[type=submit]:hover{ background:var(--mint-2)!important;opacity:1;transform:translateY(-2px)} .v2 .btn-ghost,.v2 .pricing-cta-default,.v2 .bo{ background:transparent!important;color:var(--ink)!important;border:1.5px solid var(--line)!important} .v2 .btn-ghost:hover,.v2 .pricing-cta-default:hover,.v2 .bo:hover{border-color:var(--ink)!important;color:var(--ink)!important} /* sur fond sombre (héros, CTA final) */ .v2 .hero .btn-ghost,.v2 .page-hero .btn-ghost,.v2 .cta-final .btn-ghost, .v2 .cta-banner .btn-ghost,.v2 .cta-contact .btn-ghost,.v2 .hero .bo,.v2 .cta-banner .bo, .v2 .hero a[href^="tel:"],.v2 .cta-final a[href^="tel:"],.v2 .cta-banner a[href^="tel:"],.v2 .cta-contact a[href^="tel:"]{ color:#fff!important;border-color:rgba(255,255,255,.35)!important} .v2 .hero .btn-ghost:hover,.v2 .cta-final .btn-ghost:hover,.v2 .cta-banner .btn-ghost:hover, .v2 .cta-contact .btn-ghost:hover{border-color:#fff!important;color:#fff!important} /* ── Cartes : blanches, bordure fine ─────────────────────────────────── */ .v2 [class*="-card"],.v2 .faq-item,.v2 .pricing-card,.v2 .proj-item,.v2 .value-card, .v2 .inclus-card,.v2 .usage-card,.v2 .event-card,.v2 .arg-card,.v2 .step,.v2 .info-card, .v2 .aside-block,.v2 .legal-section,.v2 .ville-card,.v2 .dept-card{ background:#fff!important;border:1px solid var(--line)!important;border-radius:16px!important; box-shadow:none;color:var(--ink)} .v2 [class*="-card"]:hover,.v2 .ville-card:hover,.v2 .pricing-card:hover{ border-color:#C9D8D1!important;box-shadow:var(--shadow);transform:translateY(-2px)} .v2 .pricing-card.featured{border-color:var(--mint)!important;box-shadow:0 24px 50px -30px rgba(98,237,170,.6)} .v2 .pricing-badge{background:var(--mint);color:var(--ink);border-radius:999px;font-size:12px;font-weight:600; letter-spacing:0;text-transform:none} .v2 .pricing-price,.v2 .pricing-amount{color:var(--ink)} .v2 .pricing-currency{color:var(--green)} .v2 .pricing-period,.v2 .pricing-note-txt,.v2 .pricing-extra{color:var(--muted)} .v2 .pricing-divider{background:var(--line)} .v2 .pf-dot{background:var(--green)} .v2 .pf.off .pf-dot,.v2 .pf-dot.off{background:var(--line)} .v2 .pf.off span{color:var(--muted)} /* icônes en pastille menthe */ .v2 .arg-icon,.v2 .usage-num,.v2 .info-card-icon,.v2 .faq-icon,.v2 .step-n,.v2 .process-step-num, .v2 .value-num,.v2 .legal-section-num,.v2 .zc-ic,.v2 .rapport-item-dot{ background:var(--green-soft)!important;color:var(--green)!important;border:0!important} .v2 .arg-icon svg,.v2 .info-card-icon svg,.v2 .ic{stroke:var(--green)!important;fill:none} .v2 .rapport-item-dot,.v2 .usage-point::before,.v2 .pf-dot{border-radius:50%} .v2 .arg-stat-val,.v2 .rapport-delay-val,.v2 .st-n,.v2 .info-card-val{color:var(--green)} /* ── Process / timeline ──────────────────────────────────────────────── */ .v2 .process-wrap,.v2 .process-light,.v2 .process-timeline{background:var(--bg-2)!important;border:1px solid var(--line);border-radius:24px} .v2 .process-step{background:transparent!important;border:0!important;border-radius:0!important} .v2 .process-step-num{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:var(--mint)!important;color:var(--ink)!important;font-size:14px} .v2 .process-step-delay{color:var(--green);font-weight:600} .v2 .process-step-title,.v2 .process-intro-title{color:var(--ink)} /* ── Tableau comparatif ──────────────────────────────────────────────── */ .v2 .compare-wrap{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden} .v2 .compare-table th,.v2 .compare-table td{border-color:var(--line)!important;color:var(--ink-2)} .v2 .compare-table th{background:var(--bg-2);color:var(--ink);font-weight:600;text-transform:none;letter-spacing:0} .v2 .compare-table .col-featured{background:rgba(98,237,170,.07)} .v2 .c-yes{color:var(--green)} .v2 .c-no{color:#C4CFCA} .v2 .c-val{color:var(--ink)} /* ── FAQ ─────────────────────────────────────────────────────────────── */ .v2 .faq-item{border-radius:14px!important} .v2 .faq-item.open{border-color:var(--mint)!important} .v2 .faq-q,.v2 .faq-q-text{color:var(--ink);font-size:16px;font-weight:600} .v2 .faq-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center} .v2 .faq-icon svg path{stroke:var(--green)!important} .v2 .faq-a-inner{color:var(--ink-2)} .v2 .faq-intro{background:var(--bg-2)!important;border:1px solid var(--line)!important;border-radius:20px} /* ── CTA final : bande sombre ────────────────────────────────────────── */ .v2 .cta-final,.v2 .cta-banner,.v2 .cta-contact{background:var(--dark)!important;color:#fff!important; border:0!important;border-radius:24px!important;overflow:hidden;position:relative} .v2 .cta-final-bg{background:radial-gradient(ellipse at 80% 0%,rgba(98,237,170,.22),transparent 60%)!important;opacity:1} .v2 .cta-final-title,.v2 .cta-title,.v2 .cta-contact-title{color:#fff!important} .v2 .cta-final-title em,.v2 .cta-title em,.v2 .cta-contact-title em{color:var(--mint)!important} .v2 .cta-final-sub,.v2 .cta-sub,.v2 .cta-contact-sub{color:rgba(255,255,255,.75)!important} .v2 .cta-trust-item{color:rgba(255,255,255,.75)!important} .v2 .cta-trust-dot{background:var(--mint)!important} .v2 .cta-final-eyebrow,.v2 .cta-contact-lbl{color:var(--mint)!important} /* ── Formulaires (contact) ───────────────────────────────────────────── */ .v2 input,.v2 textarea,.v2 select{background:#fff!important;border:1px solid var(--line)!important; color:var(--ink)!important;border-radius:12px!important;font-size:15px!important} .v2 input::placeholder,.v2 textarea::placeholder{color:var(--muted)!important} .v2 input:focus,.v2 textarea:focus,.v2 select:focus{border-color:var(--green)!important; box-shadow:0 0 0 3px rgba(98,237,170,.22)!important;outline:none} .v2 label,.v2 .field label{color:var(--ink)!important;font-weight:500} .v2 .field-hint,.v2 .privacy{color:var(--muted)!important} /* ── Pages légales ───────────────────────────────────────────────────── */ .v2 .legal-section{padding:26px 28px!important} .v2 .legal-section-num{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px} .v2 .toc-list a{color:var(--ink-2)} .v2 .toc-list a:hover{color:var(--green)} .v2 .ph{color:var(--ink-2)} /* ── Divers hérités du thème sombre ──────────────────────────────────── */ .v2 .blk.tj-clair{background:var(--bg-2);border-color:var(--line);box-shadow:none;color:var(--ink); --card:#fff;--border:var(--line);--white:var(--ink);--gray:var(--muted);--accent:var(--green)} .v2 #progress-bar{background:var(--green)} .v2 hr,.v2 .sep{border-color:var(--line);background:var(--line)} .v2 ::selection{background:rgba(98,237,170,.3);color:var(--ink)} /* ── Correctifs héros sombre : tout le texte y passe en clair ────────── */ .v2 .hero h1,.v2 .hero h2,.v2 .hero h3,.v2 .hero .h1, .v2 .page-hero h1,.v2 .page-hero h2,.v2 .page-hero h3{color:#fff} .v2 .hero h1 em,.v2 .hero h2 em,.v2 .page-hero h1 em,.v2 .page-hero h2 em, .v2 .hero em,.v2 .page-hero em{color:var(--mint)} .v2 .hero p,.v2 .page-hero p,.v2 .hero li,.v2 .page-hero li{color:rgba(255,255,255,.78)} .v2 .hero strong,.v2 .page-hero strong,.v2 .hero b,.v2 .page-hero b{color:#fff} .v2 .hero [class*="-lbl"],.v2 .hero [class*="-label"],.v2 .hero [class*="-meta"], .v2 .page-hero [class*="-lbl"],.v2 .page-hero [class*="-label"]{color:rgba(255,255,255,.6)} .v2 .hero .eyebrow,.v2 .page-hero .eyebrow,.v2 .hero-eyebrow,.v2 .page-hero-eyebrow{color:var(--mint)} .v2 .hero a:not(.btn-accent):not(.btn-ghost),.v2 .page-hero a:not(.btn-accent):not(.btn-ghost){color:var(--mint)} .v2 .hero [class*="-card"],.v2 .page-hero [class*="-card"]{ background:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.12)!important;color:#fff} .v2 .hero [class*="-card"] [class*="-val"],.v2 .hero [class*="-card"] a{color:#fff!important} .v2 .hero [class*="-card"] [class*="-lbl"],.v2 .hero [class*="-card"] [class*="-note"]{color:rgba(255,255,255,.6)!important} .v2 .hero [class*="-icon"]{background:rgba(98,237,170,.16)!important} .v2 .hero [class*="-icon"] svg{stroke:var(--mint)!important} /* fil d'ariane des pages ville, sur le héros sombre */ .v2 .vp-crumb{margin-top:0;position:absolute;top:86px;left:clamp(20px,4vw,64px);z-index:2} .v2 .vp-crumb a,.v2 .vp-crumb span{color:rgba(255,255,255,.55)} .v2 .vp-crumb a:hover{color:#fff} /* ── Nav : blanche dès le départ sur les pages sans héros sombre ─────── */ body.v2.nav-solid > nav:not(.menu-panel):not(.rail){background:rgba(255,255,255,.92); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line)} body.v2.nav-solid .nav-logo img{filter:invert(1) brightness(.15)} body.v2.nav-solid .nav-links a{color:var(--ink-2)} body.v2.nav-solid .nav-links a:hover,body.v2.nav-solid .nav-links a.active{background:var(--bg-2);color:var(--ink)} body.v2.nav-solid .nav-cta{background:var(--mint);color:var(--ink)} body.v2.nav-solid .nav-client{border-color:var(--line);color:var(--ink)} body.v2.nav-solid .hbg i{background:var(--ink)} body.v2.nav-solid .nav-mid span{color:var(--ink)} /* ── Blog : héros clair (pas de bande sombre) ────────────────────────── */ .v2 .blog-hero{margin-top:0;padding:clamp(110px,13vw,170px) clamp(20px,4vw,64px) clamp(30px,4vw,50px)} .v2 .blog-hero-title{color:var(--ink);font-size:clamp(38px,5.4vw,68px);line-height:1.05} .v2 .blog-hero-title em{color:var(--green)} .v2 .blog-hero-sub{color:var(--ink-2);font-size:16px;max-width:60ch} .v2 .blog-hero-eyebrow{color:var(--green)} .v2 .blog-hero-eyebrow::before{display:none} .v2 .bf{border-radius:999px;border:1px solid var(--line);color:var(--ink-2);font-size:13.5px;font-weight:500; letter-spacing:0;text-transform:none;background:#fff} .v2 .bf:hover{border-color:var(--ink);color:var(--ink)} .v2 .bf.active{background:var(--mint);color:var(--ink);border-color:transparent} .v2 .bf-count{background:rgba(15,26,31,.08);color:var(--muted)} .v2 .bf.active .bf-count{background:rgba(15,26,31,.15);color:var(--ink)} .v2 .article-full{background:#fff;border:1px solid var(--line);border-radius:20px} .v2 .art-h1{color:var(--ink);font-size:clamp(30px,4vw,50px);line-height:1.1} .v2 .art-full-content h2{color:var(--ink);font-size:24px;font-weight:700;letter-spacing:-.01em;text-transform:none} .v2 .art-full-content p,.v2 .art-full-content li{color:var(--ink-2);font-size:16px} .v2 .art-lead{color:var(--ink-2)} .v2 .art-callout{background:var(--bg-2);border:1px solid var(--line);border-radius:14px} .v2 .art-callout p{color:var(--ink-2)} .v2 .art-callout strong{color:var(--green)} .v2 .art-tags span,.v2 .art-tag{color:var(--green);border-color:rgba(98,237,170,.4)} .v2 .art-cta-inline{border-top-color:var(--line)} .v2 .art-nav-card{background:#fff;border:1px solid var(--line);border-radius:16px} .v2 .art-nav-ttl{color:var(--ink);font-size:16px;font-weight:600;letter-spacing:0;text-transform:none} .v2 .art-nav-dir{color:var(--muted);letter-spacing:0;text-transform:none;font-size:12.5px} .v2 .bl-card{background:#fff;border-color:var(--line)} .v2 .bl-ttl{color:var(--ink);font-size:18px;font-weight:600;letter-spacing:0;text-transform:none} .v2 .bl-desc{color:var(--ink-2)} .v2 .bl-tag,.v2 .bl-read{color:var(--green);letter-spacing:0;text-transform:none;font-size:12.5px} .v2 .bl-foot time{color:var(--muted)} .v2 .bl-crumb a{color:var(--ink-2)} .v2 .bl-fake{color:var(--line)} /* ── Correctifs de conteneurs ──────────────────────────────────────────── contact.css transforme .blk en carte sombre avec overflow:hidden, ce qui rognait le héros pleine largeur. Sur v2, .blk redevient un simple bloc. */ .v2 .blk{background:transparent!important;border:0!important;border-radius:0!important;overflow:visible!important} /* .white / .muted : ces classes lisent des tokens compat devenus sombres ; dans une bande sombre elles doivent rester claires. */ .v2 .hero .white,.v2 .page-hero .white,.v2 .cta-final .white{color:#fff!important} .v2 .hero .muted,.v2 .page-hero .muted,.v2 .cta-final .muted{color:rgba(255,255,255,.45)!important} .v2 .page-hero-meta span{color:rgba(255,255,255,.6)} .v2 .page-hero-bg,.v2 .page-hero-grid{opacity:.4} .v2 .page-hero canvas{opacity:.25!important} /* ──