/* ============================================================ Leadsoon — thème sombre « agence » Chargé APRÈS app.css, uniquement quand body porte .theme-sombre. Le gros du travail passe par les variables : la feuille principale déclare --surface pour toutes ses cartes, donc il n'y a ici que les variables et les quelques teintes codées en dur (états, pastels indigo, dégradés). La page imprimable n'est jamais concernée : elle construit son propre sans classe de thème. ============================================================ */ body.theme-sombre{ /* --- Textes --- */ --ink:#f2f3ff; --ink-2:#c3c7e6; --muted:#8a90bd; /* --- Fonds et surfaces --- */ --bg:#0a0b16; --bg-2:#12142a; --surface:#171a33; --surface-flou:rgba(10,11,22,.82); --line:#282d52; --line-2:#1e2240; /* --- Couleurs de marque : violet → magenta, la signature « agence » --- Deux violets, et c'est volontaire : le premier REMPLIT (boutons, pastilles) et doit porter du texte blanc, le second ÉCRIT sur le fond sombre. Un seul ton ne peut pas faire les deux : trop clair, le blanc dessus devient illisible ; trop foncé, il disparaît sur le fond. */ --brand:#7c3aed; /* fond de bouton — blanc dessus : 5,3:1 */ --brand-2:#a78bfa; /* texte d'accent sur fond sombre */ --brand-soft:rgba(139,92,246,.16); --sky:#f472b6; --lien:#b39aff; /* les liens s'éclaircissent, les boutons non */ /* --- États : plus saturés pour tenir sur fond sombre --- */ --ok:#34d399; --warn:#fbbf24; --bad:#f87171; /* Les ombres portées ne se voient pas sur du noir : on les remplace par une lueur colorée, discrète. */ --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.8); --shadow-lg:0 30px 70px -30px rgba(139,92,246,.45), 0 10px 40px -20px rgba(0,0,0,.9); color-scheme:dark; } /* ---------- Halos du hero et des pages d'authentification ---------- */ body.theme-sombre .hero{ background: radial-gradient(60rem 30rem at 80% -10%, rgba(139,92,246,.22) 0%, transparent 62%), radial-gradient(50rem 26rem at 5% 0%, rgba(244,114,182,.14) 0%, transparent 58%); } body.theme-sombre .auth{ background:radial-gradient(50rem 30rem at 50% -10%, rgba(139,92,246,.25), transparent 62%); } /* ---------- Boutons ---------- */ body.theme-sombre .btn:hover{border-color:#3b4173} body.theme-sombre .btn-primary{box-shadow:0 6px 20px -8px rgba(139,92,246,.7)} body.theme-sombre .btn-primary:hover{background:#7c4df0;border-color:#7c4df0} body.theme-sombre .btn-danger{border-color:rgba(248,113,113,.35)} body.theme-sombre .btn-danger:hover{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.6)} /* ---------- Champs ---------- */ body.theme-sombre input,body.theme-sombre select,body.theme-sombre textarea{color:var(--ink)} body.theme-sombre input::placeholder,body.theme-sombre textarea::placeholder{color:#6a7099} body.theme-sombre input:disabled{background:var(--bg-2);color:var(--muted)} body.theme-sombre .input-unit span{background:var(--bg-2);color:var(--muted)} /* ---------- Messages et encarts d'état ---------- */ body.theme-sombre .flash{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.35);color:#6ee7b7} body.theme-sombre .flash-err{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.35);color:#fca5a5} body.theme-sombre .flash-info{background:rgba(96,165,250,.12);border-color:rgba(96,165,250,.35);color:#93c5fd} body.theme-sombre .note{background:var(--bg-2);border-color:var(--line);color:var(--ink-2)} body.theme-sombre .note-warn{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.35);color:#fcd34d} body.theme-sombre .note-ok{background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.35);color:#6ee7b7} body.theme-sombre table.compare tr.ecart td{background:rgba(251,191,36,.08)} body.theme-sombre .tag-off{background:rgba(248,113,113,.12);color:#fca5a5} /* ---------- Pastels indigo devenus violets ---------- */ body.theme-sombre .pick:hover .pick-body{border-color:#4c3f8a;background:var(--bg-2)} body.theme-sombre .btn-assist{background:var(--brand-soft);border-color:#4c3f8a;color:var(--brand-2)} body.theme-sombre .btn-assist:hover{background:rgba(139,92,246,.26);border-color:var(--brand-2)} body.theme-sombre .suggest-box{background:var(--brand-soft);border-color:#4c3f8a} body.theme-sombre .suggest-h b,body.theme-sombre .suggest-h span, body.theme-sombre .suggest-wait,body.theme-sombre .suggest-l li span{color:var(--brand-2)} body.theme-sombre .suggest-l li{border-top-color:#3a3268;color:var(--ink)} body.theme-sombre .prop{border-color:#4c3f8a;color:var(--brand-2)} body.theme-sombre .prop:hover{background:var(--brand-soft)} body.theme-sombre .props-offre{border-top-color:#3a3268} body.theme-sombre .lecture-bandeau{background:var(--brand-soft);border-bottom-color:#4c3f8a} body.theme-sombre .lecture-bandeau span{color:var(--brand-2)} body.theme-sombre .demo-box{background:var(--brand-soft);color:var(--brand-2)} body.theme-sombre .why{border-left-color:#3a3268} body.theme-sombre .apercu-media{background:linear-gradient(135deg,rgba(139,92,246,.28),rgba(244,114,182,.22));color:#e9d5ff} body.theme-sombre .coche{background:rgba(52,211,153,.18);color:#6ee7b7} body.theme-sombre .demo-bar i{background:#2c3157} /* ---------- Le violet qui ÉCRIT, partout où la feuille claire utilisait --brand comme couleur de texte ---------- */ body.theme-sombre .demo-t, body.theme-sombre .demo-res em, body.theme-sombre .credits-pill, body.theme-sombre .niveau-go, body.theme-sombre .side-nav a.on, body.theme-sombre .etapes a.done, body.theme-sombre .etape-n, body.theme-sombre .nav-links a:hover, body.theme-sombre .nav-auth-mob, body.theme-sombre .check li::before, body.theme-sombre .bloc-why + h3, body.theme-sombre .grand, body.theme-sombre .eyebrow{color:#b39aff} body.theme-sombre .demo-res em, body.theme-sombre .credits-pill, body.theme-sombre .etape-n{background:rgba(139,92,246,.2)} body.theme-sombre .brand-name span{color:#b39aff} /* ---------- Dégradés : sur fond noir, il faut partir plus clair ---------- ⚠ Ne JAMAIS utiliser la propriété raccourcie `background` sur un texte en dégradé : elle réinitialise `background-clip`, le dégradé repeint toute la boîte et le texte — resté transparent — disparaît. On ne touche qu'à `background-image`, et on réaffirme le découpage. */ body.theme-sombre .bar i, body.theme-sombre .progress i{background-image:linear-gradient(90deg,#a78bfa,#f472b6)} body.theme-sombre .demo-res b{ background-image:linear-gradient(135deg,#a78bfa,#f472b6); -webkit-background-clip:text;background-clip:text;color:transparent; } body.theme-sombre .flux::before{background-image:linear-gradient(90deg,#a78bfa,#f472b6);opacity:.4} /* ---------- Dégradés codés en dur dans la feuille principale ---------- */ body.theme-sombre .cta-band{background:linear-gradient(135deg,#7c3aed,#db2777)} body.theme-sombre .cta-band .btn{background:#fff;color:#5b21b6;border-color:#fff} body.theme-sombre .cta-band .btn:hover{background:#f5f3ff} body.theme-sombre .verdict-box{background:linear-gradient(135deg,#7c3aed,#db2777)} /* ---------- Barres collantes ---------- */ body.theme-sombre .site-nav,body.theme-sombre .app-top{border-bottom-color:var(--line)} body.theme-sombre .side{border-right-color:var(--line)} /* Le fil du parcours et le contour des pastilles doivent suivre le fond. */ body.theme-sombre .flux-n{box-shadow:0 0 0 5px var(--bg)} body.theme-sombre .section-alt .flux-n{box-shadow:0 0 0 5px var(--bg-2)} /* ---------- Indice de confiance ---------- Les trois pastilles sont des aplats clairs dans la feuille principale : sur fond sombre elles deviendraient trois taches lumineuses. On garde la teinte, on inverse le rapport fond/texte. */ body.theme-sombre .estim-score-haut{background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.35);color:#6ee7b7} body.theme-sombre .estim-score-moyen{background:rgba(96,165,250,.14);border-color:rgba(96,165,250,.35);color:#93c5fd} body.theme-sombre .estim-score-bas{background:rgba(251,146,60,.14);border-color:rgba(251,146,60,.38);color:#fdba74} /* Source unique : l'ambre de la feuille principale est illisible sur fond sombre. */ body.theme-sombre .estim-fiab.seule b{color:#fbbf24} /* Le bloc « coût client » : le violet clair de la feuille principale devient illisible sur fond sombre. */ body.theme-sombre .estim-cac{background:rgba(124,58,237,.13);border-color:rgba(124,58,237,.38)} body.theme-sombre .estim-cac p{color:var(--ink-2)} /* Bloc « calcul Leadsoon » en thème sombre : la trame claire disparaîtrait. */ body.theme-sombre .estim-calc{border-color:rgba(148,163,184,.55); background:repeating-linear-gradient(135deg, rgba(148,163,184,.10) 0 10px, transparent 10px 20px)} body.theme-sombre .estim-calc-tag{background:#cbd5e1;color:#0f172a} /* Le prix en violet plein est illisible sur fond sombre : on prend la teinte claire réservée au texte. */ body.theme-sombre .estim-prix b{color:var(--lien)} /* Illustrations des vignettes : le violet plein s'éteint sur fond sombre (2,99:1). On reprend la teinte claire déjà utilisée pour le texte. */ body.theme-sombre .demo-illu{color:var(--lien)} body.theme-sombre .estim-illu{color:var(--lien)} body.theme-sombre .feature-illu{color:var(--lien)} /* Exemple concret : les pastilles et le trait de chronologie tiennent leurs couleurs de variables claires — seules les teintes en dur sont reprises. */ body.theme-sombre .ex-tag-vif{background:rgba(124,58,237,.16);border-color:rgba(124,58,237,.4);color:var(--lien)} body.theme-sombre .ex-num{background:rgba(124,58,237,.16);border-color:rgba(124,58,237,.4);color:var(--lien)} body.theme-sombre .ex-fin .ex-num{background:var(--brand);border-color:var(--brand);color:#fff} body.theme-sombre .ex-fin b{color:var(--lien)} body.theme-sombre .ex-suite li::before{background:linear-gradient(var(--lien),rgba(179,154,255,.12))} body.theme-sombre .ex-coche{color:#6ee7b7} body.theme-sombre .citation::before,body.theme-sombre .citation::after{color:var(--lien);opacity:.5} /* Retour en haut : la carte claire et le violet plein disparaîtraient. */ body.theme-sombre .haut{background:var(--surface);border-color:var(--line);color:var(--lien)} body.theme-sombre .haut:hover{background:rgba(124,58,237,.16);border-color:rgba(124,58,237,.45)} /* ---------- Estimateur à deux panneaux ---------- */ body.theme-sombre .estim2-num{color:var(--lien)} body.theme-sombre .estim2-fleche{color:var(--lien)} body.theme-sombre .tuile:hover .tuile-in{background:rgba(124,58,237,.14);border-color:rgba(124,58,237,.45)} body.theme-sombre .tuile input:checked + .tuile-in{background:rgba(124,58,237,.2);border-color:var(--brand)} body.theme-sombre .tuile input:checked + .tuile-in .tuile-ico svg{color:var(--lien)} body.theme-sombre .estim2-info-i{background:rgba(124,58,237,.18);color:var(--lien)} body.theme-sombre .estim2-badge{background:rgba(16,185,129,.14);color:#6ee7b7;border-color:rgba(16,185,129,.35)} body.theme-sombre .estim2-badge.interne{background:rgba(251,146,60,.14);color:#fdba74;border-color:rgba(251,146,60,.38)} body.theme-sombre .estim2-prix b{color:var(--lien)} body.theme-sombre .estim2-crit i{color:#6ee7b7} /* Bascule de thème : la carte claire et le violet plein disparaîtraient. */ body.theme-sombre .bascule-theme{background:var(--surface);border-color:var(--line);color:var(--ink-2)} body.theme-sombre .bascule-theme:hover{color:var(--lien);background:rgba(124,58,237,.16);border-color:rgba(124,58,237,.45)}