/* ============================================================================ DA « DARKWALL » POUR LE SITE — la feuille du thème du site public Référence : le Blackwall de Cyberpunk 2077 (un mur rouge plein de lumière). ELLE NE FAIT RIEN TOUTE SEULE. Tout est sous `html[data-da="darkwall"]` : si l'attribut n'est pas posé sur , la page reste exactement en Wibis. C'est le serveur qui pose cet attribut, au moment où il sert la page — donc aucun clignotement chez le visiteur, et le défaut (Wibis, en violet) ne bouge jamais. Cette feuille a été ENGENDRÉE à partir des vraies règles des pages (les couleurs écrites en dur sont reprises une par une), puis ajustée à l'œil. Les variables partagées du site sont réécrites ici, le reste suit. Fichier engendré le 2026-09-17 — 300 règles. ============================================================================ */ :root[data-da="darkwall"], html[data-da="darkwall"]{ /* ---- le vocabulaire partagé du site ---- */ --ink:#ffe6f0; --slate:#ffc9d8; --muted:#a8828f; --line:rgba(255,60,110,.32); --bg:#05030a; --card:#13060c; --violet:#ff1f4b; --violet2:#e0103c; --violet3:#ff2e8a; --violet4:#ff6f9c; --dark:#05030a; --dark2:#170710; --dark3:#1f0a13;" + " ".join(" --%s:rgba(19,6,12,.62); /* était %s */" % (n, v) for n, v in sorted(VARIABLES_CLAIRES.items())) + " --blanc:#13060c; --violet-pale:#2a0a16; --radius:3px; --shadow:0 0 26px rgba(255,31,75,.10), 0 0 22px rgba(255,31,75,.07) inset; } /* ---- le fond : noir, brume rouge, le mur et le sol ---- */ html[data-da="darkwall"] body{ background: radial-gradient(1000px 620px at 84% 6%, rgba(255,31,75,.26), transparent 62%), radial-gradient(760px 520px at 12% 92%, rgba(255,46,138,.16), transparent 66%), #05030a fixed; color:#ffe6f0; } html[data-da="darkwall"] body::before{ content:""; position:fixed; top:0; right:0; bottom:0; width:48vw; z-index:-1; pointer-events:none; background:repeating-linear-gradient(90deg, rgba(255,31,75,0) 0px, rgba(255,31,75,.85) 1px, rgba(255,46,138,.35) 2px, rgba(255,31,75,0) 3px, rgba(255,31,75,0) 7px, rgba(255,140,190,.72) 8px, rgba(255,31,75,0) 9px, rgba(255,31,75,0) 14px); mask-image:linear-gradient(90deg, transparent 0%, #000 46%, #000 100%), linear-gradient(0deg, #000 0%, rgba(0,0,0,.18) 60%, transparent 92%); -webkit-mask-composite:source-in; mask-composite:intersect; filter:blur(.4px) saturate(1.3); animation:da-site-derive 26s linear infinite; } @keyframes da-site-derive{from{background-position:0 0}to{background-position:-120px 0}} html[data-da="darkwall"] body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(circle, rgba(255,70,120,.85) 1px, transparent 1.6px) 0 100% / 20px 15px repeat-x, repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px); mask-image:linear-gradient(0deg, #000 0%, rgba(0,0,0,.35) 16%, transparent 42%); } html[data-da="darkwall"]::before{ content:""; position:fixed; left:0; right:0; height:2px; z-index:-1; pointer-events:none; background:linear-gradient(90deg, transparent, rgba(255,230,240,.92), transparent); box-shadow:0 0 18px 4px rgba(255,46,138,.7); animation:da-site-laser 11s cubic-bezier(.5,0,.5,1) infinite; } @keyframes da-site-laser{0%{top:-4%;opacity:0}12%{opacity:.9}88%{opacity:.9}100%{top:104%;opacity:0}} /* les titres de section prennent la couleur de la DA */ html[data-da="darkwall"] .eyebrow, html[data-da="darkwall"] .sec-tag{color:#ff2e8a} /* ============ les règles reprises des pages (couleurs en dur) ============ */ html[data-da="darkwall"] body.theme-dark{} html[data-da="darkwall"] body.theme-dark .v .ic,body.theme-dark .pm .ic{background:transparent} html[data-da="darkwall"] body.theme-dark .wipbar{background:transparent;border-color:#3b2f6b} html[data-da="darkwall"] body.theme-dark .pcard:not(.pop) .btn{background:transparent} html[data-da="darkwall"] body.theme-dark .note{background:transparent;border-color:#3b2f6b;color:var(--slate)} html[data-da="darkwall"] body.theme-dark .note[style]{background:transparent} html[data-da="darkwall"] body.theme-dark .pm .wip{background:transparent;color:#fbbf24;border-color:rgba(245,158,11,.35)} html[data-da="darkwall"] body.theme-dark .dev{background:transparent} html[data-da="darkwall"] body.theme-dark .demosec{background:transparent} html[data-da="darkwall"] .demo{background:rgba(19,6,12,.62);color:#451a03} html[data-da="darkwall"] header{background:transparent;color:#fff;border-bottom:1px solid rgba(255,255,255,0.08)} html[data-da="darkwall"] .navlinks a{color:#ffd9e6;text-decoration:none} html[data-da="darkwall"] .nav .cta{background:transparent;color:#fff;text-decoration:none;border-radius:10px} html[data-da="darkwall"] .burger{background:rgba(19,6,12,.62);border:1px solid rgba(255,255,255,0.02);color:#fff;border-radius:8px} html[data-da="darkwall"] .navlinks a:hover{background:rgba(19,6,12,.62)} html[data-da="darkwall"] .langbtn{background:rgba(19,6,12,.62);border:1px solid rgba(255,255,255,0.25);color:#fff;border-radius:999px} html[data-da="darkwall"] .langbtn:hover{border-color:#ff6f9c;background:rgba(19,6,12,.62)} html[data-da="darkwall"] .btn-theme{background:rgba(19,6,12,.62);border:1px solid rgba(255,255,255,0.25);color:#fff;border-radius:999px} html[data-da="darkwall"] .btn-theme:hover{border-color:#ff6f9c;background:rgba(19,6,12,.62)} html[data-da="darkwall"] .hero{background:transparent;color:#fff} html[data-da="darkwall"] .hero::after{border-radius:50%;background:transparent} html[data-da="darkwall"] .eyebrow{background:rgba(19,6,12,.62);border:1px solid rgba(255,255,255,0.16);border-radius:999px;color:var(--violet4)} html[data-da="darkwall"] .hero h1 .g{background:transparent;background-clip:text;color:transparent} html[data-da="darkwall"] .hero .sub{color:#ffd9e6} html[data-da="darkwall"] .btn{background:rgba(19,6,12,.62);color:#fff;border-radius:12px;text-decoration:none} html[data-da="darkwall"] .btn.ghost{background:rgba(19,6,12,.62);border:1.5px solid rgba(255,255,255,0.03);color:#fff} html[data-da="darkwall"] .btn.ghost:hover{border-color:#ff6f9c;color:#ffc9d8} html[data-da="darkwall"] .hero .pill{background:transparent;border:1px solid rgba(255,255,255,0.12);border-radius:9px;color:rgba(255,60,110,.32)} html[data-da="darkwall"] .hcard{background:rgba(19,6,12,.62);border:1px solid rgba(255,255,255,1.0);border-radius:20px;box-shadow:0 24px 60px -20px rgba(0,0,0,.6)} html[data-da="darkwall"] .hcard .row{border-bottom:1px dashed rgba(255,255,255,0.09);border-radius:10px} html[data-da="darkwall"] .hcard .row:hover{background:rgba(19,6,12,.62);box-shadow:0 14px 30px -16px rgba(0,0,0,.65)} html[data-da="darkwall"] .hcard .ic{border-radius:12px;background:rgba(19,6,12,.62);border:1px solid rgba(168,85,247,.35)} html[data-da="darkwall"] .hcard .t{color:#fff} html[data-da="darkwall"] .hcard .s{color:#c9a8b4} html[data-da="darkwall"] .hcard .ok{color:#4ade80} html[data-da="darkwall"] .v .ic{border-radius:12px;background:rgba(19,6,12,.62)} html[data-da="darkwall"] .svc .head{color:#fff} html[data-da="darkwall"] .svc .head .ic{border-radius:18px;background:rgba(19,6,12,.62)} html[data-da="darkwall"] .svc.a .head{background:rgba(19,6,12,.62)} html[data-da="darkwall"] .svc.b .head{background:rgba(19,6,12,.62);border-bottom:3px solid var(--violet)} html[data-da="darkwall"] .svc .toile .noyau{border-radius:50%;background:transparent;color:#fff;box-shadow:0 10px 26px -8px rgba(255,31,75,.55);border:4px solid #fff} html[data-da="darkwall"] .svc .toile .n{background:transparent;border:1px solid #e6e3f8;border-radius:18px;box-shadow:0 5px 16px -8px rgba(15,23,42,.22)} html[data-da="darkwall"] .svc .toile .n:hover{box-shadow:0 20px 38px -14px rgba(76,29,149,.4);border-color:#ffc9d8} html[data-da="darkwall"] .svc .toile .n small{color:#a8828f} html[data-da="darkwall"] .svc .toile .n.dim b{color:#c9a8b4} html[data-da="darkwall"] .svc .mini{color:var(--muted);background:rgba(19,6,12,.62);border:1px dashed #ffc9d8;border-radius:13px} html[data-da="darkwall"] .svc.b .toile .n{background:rgba(19,6,12,.62);border:1px solid rgba(255,255,255,0.28);box-shadow:0 10px 22px -8px rgba(255,31,75,.4),0 2px 6px rgba(15,10,45,.15)} html[data-da="darkwall"] .svc.b .toile .n small{color:#ffe6f0} html[data-da="darkwall"] .svc.b .bd::after{background-image:transparent} html[data-da="darkwall"] .svc.a .bd{background:rgba(19,6,12,.62)} html[data-da="darkwall"] .svc.a .lignes path{stroke:#ffe6f0} html[data-da="darkwall"] .svc.a .toile .noyau{background:rgba(19,6,12,.62);color:#e0103c;box-shadow:0 12px 30px -10px rgba(15,10,45,.45);border-color:#fff} html[data-da="darkwall"] .svc.a .toile .n.dim b{color:#ff1f4b} html[data-da="darkwall"] .svc.a .mini{background:rgba(19,6,12,.62);border-color:#d9c9f6;color:#8a0a24} html[data-da="darkwall"] .demobtn{background:rgba(19,6,12,.62);color:#e0103c;border:none;border-radius:17px;box-shadow:0 10px 26px -10px rgba(15,10,45,.5)} html[data-da="darkwall"] .demobtn:hover{box-shadow:0 16px 34px -12px rgba(15,10,45,.6)} html[data-da="darkwall"] .wipbar{background:rgba(19,6,12,.62);border:1px dashed #ffc9d8;border-radius:13px} html[data-da="darkwall"] .wb-step{color:#c9a8b4} html[data-da="darkwall"] .wb-step .dot{border-radius:50%;border:2px solid #ffd9e6;background:transparent} html[data-da="darkwall"] .wb-step.act{color:#e0103c} html[data-da="darkwall"] .wb-step.act .dot{background:rgba(19,6,12,.62);border-color:#ff1f4b} html[data-da="darkwall"] 0%,100%{box-shadow:0 0 0 0 rgba(255,31,75,.5)} html[data-da="darkwall"] 55%{box-shadow:0 0 0 6px rgba(255,31,75,0)} html[data-da="darkwall"] .wb-step:not(:last-child)::after{background:transparent;border-radius:3px} html[data-da="darkwall"] .method{background:transparent;color:rgba(255,60,110,.32)} html[data-da="darkwall"] .method .lead{color:#c9a8b4} html[data-da="darkwall"] .m{background:rgba(19,6,12,.62);border:1px solid rgba(255,255,255,1.0);border-radius:16px} html[data-da="darkwall"] .m:hover{box-shadow:0 30px 60px -22px rgba(0,0,0,.7);border-color:rgba(167,139,250,.5);background:rgba(19,6,12,.62)} html[data-da="darkwall"] .m h3{color:#fff} html[data-da="darkwall"] .m p{color:#c9a8b4} html[data-da="darkwall"] .m ul{color:#ffd9e6} html[data-da="darkwall"] .m li .ck{color:#7ee787} html[data-da="darkwall"] .pcard:hover{box-shadow:0 26px 50px -18px rgba(15,23,42,.4)} html[data-da="darkwall"] .pcard.pop:hover{box-shadow:0 28px 56px -16px rgba(255,31,75,.5)} html[data-da="darkwall"] .pcard.pop{background:rgba(19,6,12,.62);color:#fff;border-color:var(--dark)} html[data-da="darkwall"] .pcard.pop .lbl{color:#c9a8b4} html[data-da="darkwall"] .pcard.pop ul li{color:#ffd9e6;border-color:rgba(255,255,255,0.09)} html[data-da="darkwall"] .tag{background:transparent;color:#fff;border-radius:999px} html[data-da="darkwall"] .pcard.pop .price small{color:#c9a8b4} html[data-da="darkwall"] .pcard.pop .per{color:#c9a8b4} html[data-da="darkwall"] .pcard ul li{border-bottom:1px dashed #edf0f5} html[data-da="darkwall"] .pcard.pop ul li .ck{color:#7ee787} html[data-da="darkwall"] .pcard.pop .btn{background:rgba(19,6,12,.62)} html[data-da="darkwall"] .note{background:rgba(19,6,12,.62);border:1px solid #ffc9d8;border-radius:12px;color:#a80c30} html[data-da="darkwall"] .founder{background:rgba(19,6,12,.62);border:1.5px solid rgba(168,85,247,.6);border-radius:18px;color:#ede1fb;box-shadow:0 16px 46px -14px rgba(255,31,75,.55)} html[data-da="darkwall"] .founder .pct{background:rgba(19,6,12,.62);color:#fff;border-radius:999px} html[data-da="darkwall"] .pcard .mini{color:var(--muted);background:rgba(19,6,12,.62);border:1px dashed var(--line);border-radius:10px} html[data-da="darkwall"] .pcard.pop .mini{color:#c9a8b4;background:rgba(19,6,12,.62);border-color:rgba(255,255,255,0.16)} html[data-da="darkwall"] #offres{background:rgba(19,6,12,.62)} html[data-da="darkwall"] #offres .lead{color:#c9a8b4} html[data-da="darkwall"] #offres .card{background:rgba(19,6,12,.62);border-color:#263550;box-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.55)} html[data-da="darkwall"] #offres .card h4,#offres .card .price{color:#ffe6f0} html[data-da="darkwall"] #offres .card .lbl,#offres .card .price small,#offres .card .per{color:#a8828f} html[data-da="darkwall"] #offres .card ul li{color:#ffd9e6;border-color:#263550} html[data-da="darkwall"] #offres .card .btn{background:rgba(19,6,12,.62)} html[data-da="darkwall"] #offres .pcard.pop{background:rgba(19,6,12,.62)} html[data-da="darkwall"] #offres .note{background:rgba(19,6,12,.62);border-color:#3b2f6b;color:#ffd9e6} html[data-da="darkwall"] #offres .note[style]{background:rgba(19,6,12,.62)} html[data-da="darkwall"] #offres .comp{border:1px solid #263550;border-radius:16px;background:rgba(19,6,12,.62)} html[data-da="darkwall"] #offres .comp h3{color:#fff} html[data-da="darkwall"] #offres .comp .sub{color:#c9a8b4} html[data-da="darkwall"] #offres .comp .tbl{border-radius:12px;border:1px solid #263550} html[data-da="darkwall"] #offres .comp table{border-collapse:collapse;background:rgba(19,6,12,.62)} html[data-da="darkwall"] #offres .comp th,#offres .comp td{border-bottom:1px solid #1e2b40} html[data-da="darkwall"] #offres .comp thead th{background:rgba(19,6,12,.62);color:#ffd9e6} html[data-da="darkwall"] #offres .comp thead th.pop{background:rgba(19,6,12,.62);color:#fff} html[data-da="darkwall"] #offres .comp tbody th{color:#ffe6f0;background:rgba(19,6,12,.62)} html[data-da="darkwall"] #offres .comp tbody th.sub{color:#a8828f} html[data-da="darkwall"] #offres .comp td{color:#ffd9e6} html[data-da="darkwall"] #offres .comp td.sub{color:#c9a8b4} html[data-da="darkwall"] #offres .comp td.sub b{color:#ffe6f0} html[data-da="darkwall"] #offres .comp td.pop{background:rgba(19,6,12,.62)} html[data-da="darkwall"] #offres .comp td.price small{color:#c9a8b4} html[data-da="darkwall"] #offres .comp .y{color:#4ade80} html[data-da="darkwall"] #offres .comp .n{color:#a8828f} html[data-da="darkwall"] #offres .comp tr.opts td{color:#c9a8b4;background:rgba(19,6,12,.62);border-bottom:none} html[data-da="darkwall"] #offres .comp tr.opts td b{color:#ffe6f0} html[data-da="darkwall"] #offres .whow h3{color:#fff} html[data-da="darkwall"] #offres .whow .wlead{color:#c9a8b4} html[data-da="darkwall"] #offres .whow .w{background:rgba(19,6,12,.62);border:1px solid #263550;border-radius:12px} html[data-da="darkwall"] #offres .whow .w h4{color:#ffe6f0} html[data-da="darkwall"] #offres .whow .w p{color:#c9a8b4} html[data-da="darkwall"] #offres .whow .wcta{color:#ffc9d8} html[data-da="darkwall"] #offres .samesite{color:#c9a8b4} html[data-da="darkwall"] #offres .samesite b{color:#ffe6f0} html[data-da="darkwall"] #offres .pcard.soft{border:1.5px dashed rgba(168,85,247,.55);background:rgba(19,6,12,.62)} html[data-da="darkwall"] #offres .pcard.soft .tag{background:rgba(19,6,12,.62)} html[data-da="darkwall"] #offres .pcard.soft h4{color:#ffe6f0} html[data-da="darkwall"] #offres .pcard.soft .sp{color:#c9a8b4} html[data-da="darkwall"] #offres .pcard.soft ul li{color:#ffd9e6;border-color:#263550} html[data-da="darkwall"] #offres .pcard.soft ul li b{color:#ffe6f0} html[data-da="darkwall"] #offres .pcard.soft ul li .ck{color:#7ee787} html[data-da="darkwall"] #offres .pcard.soft .softnote{border-top:1px dashed rgba(255,31,75,.3);color:#ffc9d8} html[data-da="darkwall"] #offres .pcard.soft .softnote a{color:#ffc9d8;text-decoration:none} html[data-da="darkwall"] .dev{background:transparent} html[data-da="darkwall"] .devnote{background:rgba(19,6,12,.62);border-radius:14px;color:rgba(255,60,110,.32)} html[data-da="darkwall"] .devnote .ck{color:#7ee787} html[data-da="darkwall"] .pm .ic{border-radius:12px;background:rgba(19,6,12,.62)} html[data-da="darkwall"] .pm .wip{color:#c2410c;background:rgba(19,6,12,.62);border:1px solid #fed7aa;border-radius:999px} html[data-da="darkwall"] .appbig{background:rgba(19,6,12,.62);border-radius:18px;color:#fff;border:1px solid rgba(168,85,247,.3)} html[data-da="darkwall"] .appbig::after{border-radius:50%;background:transparent} html[data-da="darkwall"] .appbig .badge{background:rgba(19,6,12,.62);border:1px solid rgba(196,181,253,.4);color:#ffc9d8;border-radius:999px} html[data-da="darkwall"] .appbig p{color:#c9a8b4} html[data-da="darkwall"] .appbig .pts div{color:rgba(255,60,110,.32)} html[data-da="darkwall"] .appbig .pts .ck{color:#7ee787} html[data-da="darkwall"] .contact{background:rgba(19,6,12,.62);color:#fff} html[data-da="darkwall"] .contact .lead{color:#c9a8b4} html[data-da="darkwall"] .cta-mail{background:transparent;border-radius:18px} html[data-da="darkwall"] .cta-mail .mail{color:#fff;text-decoration:none} html[data-da="darkwall"] .cta-mail .btn{background:transparent;color:#e0103c} html[data-da="darkwall"] .contact .loc{color:#c9a8b4} html[data-da="darkwall"] .contact .loc b{color:rgba(255,60,110,.32)} html[data-da="darkwall"] footer{background:transparent;color:#a8828f} html[data-da="darkwall"] footer b{color:#c9a8b4} html[data-da="darkwall"] .disc{color:#c9a8b4} html[data-da="darkwall"] .demosec{background:transparent} html[data-da="darkwall"] 0%,100%{box-shadow:0 14px 38px -8px rgba(255,31,75,.8)} html[data-da="darkwall"] 50%{box-shadow:0 18px 50px -6px rgba(167,139,250,.95)} html[data-da="darkwall"] .gate-overlay{background:rgba(19,6,12,.62)} html[data-da="darkwall"] .gate-box{background:rgba(19,6,12,.62);border:1px solid rgba(168,85,247,.4);border-radius:18px;box-shadow:0 30px 80px -20px rgba(0,0,0,.65)} html[data-da="darkwall"] .gate-box::after{opacity:0;background:transparent} html[data-da="darkwall"] .gate-close{background:rgba(19,6,12,.62);border:none;color:#c9a8b4} html[data-da="darkwall"] .gate-box h3{color:#fff} html[data-da="darkwall"] .gate-box p{color:#a8b2c8} html[data-da="darkwall"] .gate-input{color:#fff;background:rgba(19,6,12,.62);border:1px solid rgba(255,255,255,0.14);border-radius:12px;outline:none} html[data-da="darkwall"] .gate-input::placeholder{color:#a8828f} html[data-da="darkwall"] .gate-msg{color:#f87171} html[data-da="darkwall"] .gate-btn{color:#fff;background:rgba(19,6,12,.62);border:none;border-radius:12px} html[data-da="darkwall"] .gate-link .gi{border-radius:12px;background:rgba(19,6,12,.62)} html[data-da="darkwall"] .gate-link .gt b{color:#fff} html[data-da="darkwall"] .gate-link .gt span{color:#a8b2c8;opacity:.9} html[data-da="darkwall"] .gate-link.patron{background:rgba(19,6,12,.62)} html[data-da="darkwall"] .gate-link.visiteur{background:rgba(19,6,12,.62);border-color:rgba(255,255,255,0.12)} html[data-da="darkwall"] .gate-link.visiteur .gi{background:rgba(19,6,12,.62)} html[data-da="darkwall"] body.theme-dark .gate-box{background:transparent} html[data-da="darkwall"] body.theme-dark .svc.a .toile .n b{color:#ffe6f0} html[data-da="darkwall"] body.theme-dark .wb-step.act{color:#ffc9d8} html[data-da="darkwall"] body.theme-dark .wb-step.act .dot{background:transparent;border-color:#ffc9d8} html[data-da="darkwall"] .method .prop{border-radius:16px;background:transparent;border:1px solid rgba(255,255,255,1.0)} html[data-da="darkwall"] .method .prop:hover{background:transparent;border-color:rgba(167,139,250,.5);box-shadow:0 26px 54px -26px rgba(0,0,0,.75)} html[data-da="darkwall"] .method .prop h3{color:#fff} html[data-da="darkwall"] .method .prop p{color:#c9a8b4} html[data-da="darkwall"] .method .prop .pck{color:#ffd9e6} html[data-da="darkwall"] .method .prop .ck{color:#7ee787} html[data-da="darkwall"] .method{} html[data-da="darkwall"] #services::after, #method::after, #demo::after, #offres::after, #dev::after, .contact::after{border-radius:50%;background:transparent} html[data-da="darkwall"] #services::after{background:transparent} html[data-da="darkwall"] #method::after{background:transparent} html[data-da="darkwall"] #demo::after{background:transparent} html[data-da="darkwall"] #offres::after{background:transparent} html[data-da="darkwall"] #dev::after{background:transparent} html[data-da="darkwall"] .contact::after{background:transparent} html[data-da="darkwall"] .method h2{color:#fff} html[data-da="darkwall"] .carte{border-radius:20px;background:rgba(19,6,12,.62);border:1px solid rgba(168,85,247,.26);box-shadow:0 26px 60px -34px rgba(0,0,0,.95)} html[data-da="darkwall"] .carte:hover{border-color:rgba(168,85,247,.55);box-shadow:0 54px 92px -34px rgba(128,32,224,.85),0 0 0 1px rgba(168,85,247,.25)} html[data-da="darkwall"] .shine{background:rgba(19,6,12,.62)} html[data-da="darkwall"] .item.centre .carte{border-color:rgba(168,85,247,.5);box-shadow:0 44px 86px -34px rgba(128,32,224,.7),0 0 0 1px rgba(168,85,247,.3)} html[data-da="darkwall"] .illu{border-radius:14px;background:rgba(19,6,12,.62);border:1px solid rgba(168,85,247,.22);color:var(--encre)} html[data-da="darkwall"] .num{border-radius:9px;background:rgba(19,6,12,.62);color:#fff;box-shadow:0 8px 18px -8px rgba(128,32,224,.95)} html[data-da="darkwall"] .carte h3{color:#fff} html[data-da="darkwall"] .args li{color:#d3c9e6} html[data-da="darkwall"] .args li::before{border-radius:3px;background:transparent;box-shadow:0 0 10px -1px rgba(128,32,224,.9)} html[data-da="darkwall"] .method .nav{border-radius:50%;color:#fff;background:transparent;border:1px solid rgba(168,85,247,.38)} html[data-da="darkwall"] .method .nav:hover{background:transparent;border-color:transparent;box-shadow:0 16px 34px -14px rgba(128,32,224,1)} html[data-da="darkwall"] .method .pts button{border-radius:50%;border:0;background:transparent} html[data-da="darkwall"] .jauge{border-radius:3px;background:rgba(19,6,12,.62)} html[data-da="darkwall"] .bas-scene .play{border-radius:50%;color:#fff;background:transparent;border:1px solid rgba(168,85,247,.4)} html[data-da="darkwall"] .bas-scene .play:hover{background:rgba(19,6,12,.62);border-color:transparent;box-shadow:0 14px 30px -14px rgba(128,32,224,1)} html[data-da="darkwall"] .svc .toile .piste{fill:none;stroke:#ff1f4b;stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter} html[data-da="darkwall"] .topbar{background:rgba(19,6,12,.62);border-bottom:1px solid rgba(255,255,255,0.08);box-shadow:0 6px 22px -10px rgba(0,0,0,.6)} html[data-da="darkwall"] .tb-btn.violet{background:rgba(19,6,12,.62);color:#fff} html[data-da="darkwall"] .tb-btn.ghost{background:rgba(19,6,12,.62);border:1px solid rgba(255,255,255,0.15);color:rgba(255,60,110,.32)} html[data-da="darkwall"] .eyebrow{background:rgba(19,6,12,.62);border:1px solid rgba(255,255,255,0.16);border-radius:999px;color:#ffc9d8} html[data-da="darkwall"] .hero h1 span{background:transparent;background-size:transparent;background-clip:text;color:transparent} html[data-da="darkwall"] .hero p.sub{color:#ffd9e6} html[data-da="darkwall"] .pill{background:rgba(19,6,12,.62);border:1px solid rgba(255,255,255,0.15);border-radius:10px;color:rgba(255,60,110,.32)} html[data-da="darkwall"] .svc .head .ic{border-radius:12px;background:rgba(19,6,12,.62)} html[data-da="darkwall"] .svc .mini{color:var(--muted);background:rgba(19,6,12,.62);border:1px dashed var(--line);border-radius:10px} html[data-da="darkwall"] .pcard:not(.pop) .btn{background:rgba(19,6,12,.62);color:#fff} html[data-da="darkwall"] .pcard.soft{border:1.5px dashed #b7a7e0;background:rgba(19,6,12,.62)} html[data-da="darkwall"] .pcard.soft .tag{background:rgba(19,6,12,.62)} html[data-da="darkwall"] .pcard.soft ul li{border-color:rgba(255,31,75,.18);color:var(--slate)} html[data-da="darkwall"] .pcard.soft ul li .ck{color:#7ee787} html[data-da="darkwall"] .inclus{background:rgba(19,6,12,.62);border:1px solid #ffc9d8;border-radius:14px;color:#8a0a24} html[data-da="darkwall"] .inclus .line{color:#a80c30} html[data-da="darkwall"] .rmnote{background:rgba(19,6,12,.62);border-radius:14px;color:rgba(255,60,110,.32)} html[data-da="darkwall"] .rmnote .ck{color:#7ee787} html[data-da="darkwall"] table.mtab thead th{background:rgba(19,6,12,.62);color:#fff} html[data-da="darkwall"] table.mtab tbody tr:nth-child(even){background:rgba(19,6,12,.62)} html[data-da="darkwall"] table.mtab .no{color:#b45309} html[data-da="darkwall"] table.mtab tr.hl{background:rgba(19,6,12,.62);border-left:4px solid var(--violet)} html[data-da="darkwall"] .cta-line{background:transparent;border-radius:16px;color:#fff} html[data-da="darkwall"] .cta-line .btn{background:transparent;color:#e0103c} html[data-da="darkwall"] footer{background:transparent;color:#c9a8b4} html[data-da="darkwall"] footer b{color:rgba(255,60,110,.32)} html[data-da="darkwall"] body{background:transparent} html[data-da="darkwall"] html[data-theme="dark"]{color-scheme:dark} html[data-da="darkwall"] html[data-theme="dark"] body{background:transparent;color:#ffe6f0} html[data-da="darkwall"] html[data-theme="dark"] .doc{background:transparent;border-color:#26324d} html[data-da="darkwall"] html[data-theme="dark"] .doc .ic{background:transparent} html[data-da="darkwall"] html[data-theme="dark"] .viewer-bar{background:transparent} html[data-da="darkwall"] html[data-theme="dark"] .cta-line .btn{background:transparent;color:#b39bf5} html[data-da="darkwall"] html[data-theme="dark"] .inclus .line{color:#ffc9d8} html[data-da="darkwall"] html[data-theme="dark"] .inclus{border:1px solid #4c3b7a;color:#ffc9d8} html[data-da="darkwall"] html[data-theme="dark"] .svc .mini{background:transparent} html[data-da="darkwall"] html[data-theme="dark"] .v .ic{background:transparent} html[data-da="darkwall"] html[data-theme="dark"] body{background:transparent} html[data-da="darkwall"] html[data-theme="dark"] table.mtab tbody tr:nth-child(even){background:transparent} html[data-da="darkwall"] #wibis-bascule{background:rgba(19,6,12,.62);color:#fff;border:1px solid rgba(255,255,255,0.35);border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.35)} html[data-da="darkwall"] #wibis-bascule:hover{background:rgba(19,6,12,.62)} html[data-da="darkwall"] .agent:hover{box-shadow:0 18px 40px -18px rgba(255,31,75,.4)} html[data-da="darkwall"] .agent .head{color:#fff} html[data-da="darkwall"] .agent .head .ic{border-radius:14px;background:rgba(19,6,12,.62)} html[data-da="darkwall"] .agent.you .head{background:rgba(19,6,12,.62);border-bottom:3px solid var(--pink)} html[data-da="darkwall"] .agent.bot .head{background:rgba(19,6,12,.62)} html[data-da="darkwall"] .agent .foot{color:var(--muted);background:rgba(19,6,12,.62);border:1px solid var(--line);border-radius:12px} html[data-da="darkwall"] .agent.bot .foot{background:rgba(19,6,12,.62);border-color:#e9d8fd} html[data-da="darkwall"] .me-player .head{color:#fff} html[data-da="darkwall"] .me-player .head .ic{border-radius:12px;background:rgba(19,6,12,.62)} html[data-da="darkwall"] .me-player.herm .head{background:rgba(19,6,12,.62)} html[data-da="darkwall"] .me-player.deep .head{background:rgba(19,6,12,.62);border-bottom:3px solid var(--sky)} html[data-da="darkwall"] .me-player .bd .ibox{color:var(--ink);background:rgba(19,6,12,.62);border:1px solid #bae6fd;border-radius:12px} html[data-da="darkwall"] .me-player.deep .bd .ibox{background:rgba(19,6,12,.62);border-color:#bbe7c7} html[data-da="darkwall"] .vs-note{background:rgba(19,6,12,.62);border:1px solid rgba(168,85,247,.35);border-radius:14px;color:#e9e3f8} html[data-da="darkwall"] .cap .ic{border-radius:12px;background:rgba(19,6,12,.62)} html[data-da="darkwall"] .learn{background:rgba(19,6,12,.62);border-radius:16px;color:#e9e3f8;border:1px solid rgba(168,85,247,.35)} html[data-da="darkwall"] .learn h3{color:#fff} html[data-da="darkwall"] .learn p{color:#c9c0e6} html[data-da="darkwall"] .learn .cap-pill{background:rgba(19,6,12,.62);border:1px solid rgba(255,255,255,0.14);border-radius:999px;color:rgba(255,60,110,.32)} html[data-da="darkwall"] table.cmp thead th{background:rgba(19,6,12,.62);color:#fff} html[data-da="darkwall"] table.cmp thead th.c{color:#ffc9d8} html[data-da="darkwall"] table.cmp tbody tr:nth-child(even){background:rgba(19,6,12,.62)} html[data-da="darkwall"] .proof .ic{border-radius:12px;background:rgba(19,6,12,.62)} html[data-da="darkwall"] .proof.dark{background:rgba(19,6,12,.62);color:#fff;border:none} html[data-da="darkwall"] html[data-theme="dark"] .agent .foot{background:transparent} html[data-da="darkwall"] html[data-theme="dark"] .agent.bot .foot{background:transparent;border-color:#4c3b7a} html[data-da="darkwall"] html[data-theme="dark"] .cap .ic{background:transparent} html[data-da="darkwall"] html[data-theme="dark"] .me-player .bd .ibox{background:transparent;border:1px solid #2b5a7a} html[data-da="darkwall"] html[data-theme="dark"] .me-player.deep .bd .ibox{background:transparent;border-color:#2c6b46} html[data-da="darkwall"] html[data-theme="dark"] .proof .ic{background:transparent} html[data-da="darkwall"] html[data-theme="dark"] table.cmp tbody tr:nth-child(even){background:transparent} html[data-da="darkwall"] .topbar .crumb{color:#ffd9e6} html[data-da="darkwall"] .tab:hover{color:var(--violet2);background:rgba(19,6,12,.62)} html[data-da="darkwall"] .tab .n{color:#e0103c;background:rgba(19,6,12,.62);border:1px solid #ffc9d8;border-radius:999px} html[data-da="darkwall"] .tab.act::after{border-radius:3px;background:transparent} html[data-da="darkwall"] .tab.act .n{background:rgba(19,6,12,.62);border-color:#ff1f4b;color:#fff} html[data-da="darkwall"] .doc:hover{box-shadow:0 20px 44px -18px rgba(255,31,75,.4)} html[data-da="darkwall"] .doc .ic{border-radius:13px;background:rgba(19,6,12,.62)} html[data-da="darkwall"] .tag-promo{background:rgba(19,6,12,.62);color:#e0103c;border:1px solid #ffc9d8} html[data-da="darkwall"] .tag-classique{background:rgba(19,6,12,.62);color:#0369a1;border:1px solid #bae6fd} html[data-da="darkwall"] .tag-exemple{background:rgba(19,6,12,.62);color:#15803d;border:1px solid #bbf7d0} html[data-da="darkwall"] .viewer{background:rgba(19,6,12,.62)} html[data-da="darkwall"] .viewer-bar{background:rgba(19,6,12,.62);border-bottom:1px solid rgba(255,255,255,0.08)} html[data-da="darkwall"] .viewer-bar .vtitle{color:rgba(255,60,110,.32)} html[data-da="darkwall"] .viewer-frame{border:0;background:rgba(19,6,12,.62)} html[data-da="darkwall"] html[data-theme="dark"] .tab .n{color:#b39bf5;background:transparent;border:1px solid #4c3b7a} html[data-da="darkwall"] html[data-theme="dark"] .tag-classique{background:transparent;color:#7cc6f0;border:1px solid #2b5a7a} html[data-da="darkwall"] html[data-theme="dark"] .tag-exemple{background:transparent;color:#9fe0b8;border:1px solid #2c6b46} html[data-da="darkwall"] html[data-theme="dark"] .tag-promo{background:transparent;color:#b39bf5;border:1px solid #4c3b7a} html[data-da="darkwall"] html[data-theme="dark"] .viewer-frame{background:transparent} /* ============================================================================ RESTITUTIONS (démo) : dedans, tout reprend les valeurs Wibis Chaque règle du thème est suivie de son pendant, borné à #demo : dedans, tout reprend les valeurs Wibis d'origine. La démo reste identique à elle-même. ============================================================================ */ /* ============================================================================ LE FOND DU THÈME ET SON ANIMATION — ON N'Y TOUCHE PAS Le mur qui dérive, le sol de points, le laser qui descend. Rien ici ne dessine de rectangle : tout est en position fixe, sous le contenu. ============================================================================ */ html[data-da="darkwall"]{ background: radial-gradient(1100px 640px at 84% 4%, rgba(255,31,75,.26), transparent 62%), radial-gradient(760px 520px at 10% 96%, rgba(255,46,138,.16), transparent 66%), linear-gradient(180deg,#08030a 0%,#1a0a13 30%,#0b0409 62%,#190811 100%); } html[data-da="darkwall"] body{background:transparent} html[data-da="darkwall"] body::before{ content:""; position:fixed; top:0; right:0; bottom:0; width:48vw; z-index:-1; pointer-events:none; background:repeating-linear-gradient(90deg, rgba(255,31,75,0) 0px, rgba(255,31,75,.85) 1px, rgba(255,46,138,.35) 2px, rgba(255,31,75,0) 3px, rgba(255,31,75,0) 7px, rgba(255,140,190,.72) 8px, rgba(255,31,75,0) 9px, rgba(255,31,75,0) 14px); mask-image:linear-gradient(90deg, transparent 0%, #000 46%, #000 100%), linear-gradient(0deg, #000 0%, rgba(0,0,0,.18) 60%, transparent 92%); -webkit-mask-composite:source-in; mask-composite:intersect; filter:blur(.4px) saturate(1.3); animation:da-derive 26s linear infinite; } @keyframes da-derive{from{background-position:0 0}to{background-position:-120px 0}} html[data-da="darkwall"] body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(circle, rgba(255,70,120,.85) 1px, transparent 1.6px) 0 100% / 20px 15px repeat-x, repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px); mask-image:linear-gradient(0deg, #000 0%, rgba(0,0,0,.35) 16%, transparent 42%); } html[data-da="darkwall"]::before{ content:""; position:fixed; left:0; right:0; height:2px; z-index:-1; pointer-events:none; background:linear-gradient(90deg, transparent, rgba(255,230,240,.92), transparent); box-shadow:0 0 18px 4px rgba(255,46,138,.7); animation:da-laser 11s cubic-bezier(.5,0,.5,1) infinite; } @keyframes da-laser{0%{top:-4%;opacity:0}12%{opacity:.9}88%{opacity:.9}100%{top:104%;opacity:0}} /* Le MEME laser, mais qui MONTE : les deux se croisent au milieu de l'ecran. Decale d'une demi-duree (11 s / 2) pour que l'un descende pendant que l'autre monte. Même dessin, même epaisseur : seule la direction change. */ html[data-da="darkwall"]::after{ content:""; position:fixed; left:0; right:0; height:2px; z-index:-1; pointer-events:none; background:linear-gradient(90deg, transparent, rgba(255,230,240,.92), transparent); box-shadow:0 0 18px 4px rgba(255,31,75,.6); animation:da-laser-monter 11s cubic-bezier(.5,0,.5,1) infinite; animation-delay:-5.5s; } @keyframes da-laser-monter{0%{top:104%;opacity:0}12%{opacity:.9}88%{opacity:.9}100%{top:-4%;opacity:0}} /* ============================================================================ LA DÉMO ANIMÉE N'EST PAS UN DÉCOR DU SITE : elle reste identique, toujours. Le thème ne la touche pas — ni par ses règles, ni par les variables partagées. ============================================================================ */ html[data-da="darkwall"] .dp-garage, html[data-da="darkwall"] .dp-garage *{ --violet:#7c3aed; --violet2:#6d28d9; --violet3:#a855f7; --violet4:#a78bfa; --ink:#0f172a; --slate:#475569; --muted:#64748b; --line:#e2e8f0; --card:#ffffff; --bg:#f6f8fb; --dark:#0b1220; --dark2:#150f2e; --dark3:#1e293b; } /* ============================================================================ LES PATTES À LA MAIN — ce que la reprise automatique ne peut pas régler seule ============================================================================ */ /* DARKWALL N'A QU'UNE VERSION. Le clair/sombre ne vaut que pour le thème Wibis : ici l'interrupteur disparaît et les variables de la DA reprennent le dessus, même si la page porte data-theme="clair". */ html[data-da="darkwall"] .btn-theme, html[data-da="darkwall"] #btn-theme{display:none!important} /* Les puces et pastilles portaient le violet en remplissage : en rouge vif, le texte rose dessus devenait illisible. On leur donne un fond sombre cerclé de rouge. */ html[data-da="darkwall"] .eyebrow, html[data-da="darkwall"] .langbtn, html[data-da="darkwall"] .badge, html[data-da="darkwall"] .chip, html[data-da="darkwall"] .pill, html[data-da="darkwall"] .tag, html[data-da="darkwall"] .status, html[data-da="darkwall"] .eyebrow *, html[data-da="darkwall"] .langbtn *{ background:rgba(19,6,12,.72)!important; border-color:rgba(255,60,110,.45); color:#ffd9e6!important; } html[data-da="darkwall"] .langbtn.on, html[data-da="darkwall"] .langbtn[aria-pressed="true"], html[data-da="darkwall"] .eyebrow{ border-color:rgba(255,60,110,.7); box-shadow:0 0 14px rgba(255,31,75,.28), inset 0 0 18px rgba(255,31,75,.12); } /* Les accents rouges servent aussi de TEXTE (pastilles du hero, boutons de la démo) : sur le fond sombre de la DA, un rouge sombre ne se lit pas. On les passe en clair. */ html[data-da="darkwall"] .wipbar, html[data-da="darkwall"] .wipbar *, html[data-da="darkwall"] .noyau, html[data-da="darkwall"] .noyau *, html[data-da="darkwall"] .wip, html[data-da="darkwall"] .wip *, html[data-da="darkwall"] .demobtn, html[data-da="darkwall"] .demobtn *, html[data-da="darkwall"] a.btn, html[data-da="darkwall"] button.btn, html[data-da="darkwall"] .mini, html[data-da="darkwall"] .mini *, html[data-da="darkwall"] .tagl, html[data-da="darkwall"] .tagl *{ color:#ffd9e6!important; border-color:rgba(255,60,110,.5); } /* ============================================================================ LE CONTOUR DE LA CARTE CONTACT Aucun fond. Un cadre rouge fin et sa lueur, pour qu'elle se détache. (La page contient deux éléments « cta-mail » : on vise celui du contact.) ============================================================================ */ html[data-da="darkwall"] #contact .cta-mail{ background:transparent!important; border:1px solid rgba(255,60,110,.55)!important; border-radius:16px!important; box-shadow:0 0 18px rgba(255,31,75,.20), inset 0 0 16px rgba(255,31,75,.05)!important; padding:18px 22px!important; } html[data-da="darkwall"] #contact .cta-mail .mail{color:#ffe6f0!important} html[data-da="darkwall"] #contact .cta-mail .btn{ background:transparent!important;color:#ffd9e6!important; border:1px solid rgba(255,60,110,.55)!important;font-weight:800!important; } /* ============================================================================ LES SECTIONS : AUCUN FOND À ELLES Chacune laisse passer le fond du thème : aucune bande, aucune démarcation d'une section à l'autre. Les cartes de contenu ne sont pas concernées. ============================================================================ */ html[data-da="darkwall"] section, html[data-da="darkwall"] #dev, html[data-da="darkwall"] .dev, html[data-da="darkwall"] .method, html[data-da="darkwall"] .demosec, html[data-da="darkwall"] #contact, html[data-da="darkwall"] .contact, html[data-da="darkwall"] header, html[data-da="darkwall"] footer, html[data-da="darkwall"] main > *, html[data-da="darkwall"] section::before, html[data-da="darkwall"] section::after, html[data-da="darkwall"] .dev::before, html[data-da="darkwall"] .dev::after, html[data-da="darkwall"] .method::before, html[data-da="darkwall"] .method::after, html[data-da="darkwall"] .demosec::before, html[data-da="darkwall"] .demosec::after, html[data-da="darkwall"] .contact::before, html[data-da="darkwall"] .contact::after{ background:transparent!important; background-image:none!important; } /* Le texte de « La promesse » était en rouge sombre sur fond sombre : illisible. */ html[data-da="darkwall"] .devnote, html[data-da="darkwall"] .devnote *{color:#ffe6f0!important} html[data-da="darkwall"] .devnote b{color:#ff8fb0!important} /* ============================================================================ LES TRAITS DU SCHÉMA DES SERVICES Ils étaient tracés AU-DESSUS des modules (visibles en blanc sur le fond sombre). Mêmes épaisseurs qu'en Wibis, mais plus fins et repassés DERRIÈRE les modules. ============================================================================ */ html[data-da="darkwall"] .toile .lignes, html[data-da="darkwall"] .svc .lignes{z-index:0!important} html[data-da="darkwall"] .toile .n, html[data-da="darkwall"] .toile .noyau{z-index:2!important;position:absolute} html[data-da="darkwall"] .toile .lignes path, html[data-da="darkwall"] .svc .lignes path{stroke-width:.32!important;stroke:rgba(255,180,205,.65)!important} /* ============================================================================ LE SCHEMA DES SERVICES : LA DA N'EN GARDE QUE LES COULEURS. La geometrie de l'arbre (hauteurs, positions des modules, dessin) est dans la PAGE, dans son propre