/* ============================================================
UpMyChain — refonte 2026 + mode sombre
Chargee EN DERNIER dans master.blade.php : surcharge le theme
Worketic d'origine sans toucher a ses feuilles.
Le theme est porte par [data-theme] sur .
============================================================ */
:root{
--umc-accent:#ff6300;
--umc-accent-hover:#ff7a24;
--umc-accent-soft:#fff3ea;
/* Sur l'orange de marque, le noir contraste 7:1 la ou le blanc plafonne a 3:1 */
--umc-on-accent:#14100c;
--umc-bg:#ffffff; /* fond de page */
--umc-bg-2:#f6f7f9; /* fond alterne */
--umc-surface:#ffffff; /* cartes, panneaux */
--umc-surface-2:#fafafb; /* entetes de cartes */
--umc-line:#e7e8ec; /* bordures */
--umc-line-strong:#d3d6dd;
--umc-ink:#101114; /* texte principal */
--umc-ink-2:#3d414a; /* texte secondaire */
--umc-ink-3:#6b7280; /* texte tertiaire */
--umc-shadow:0 1px 2px rgba(16,17,20,.04),0 8px 24px rgba(16,17,20,.06);
--umc-radius:12px;
color-scheme:light;
}
html[data-theme="dark"]{
--umc-accent:#ff7a24;
--umc-accent-hover:#ff8f45;
--umc-accent-soft:#2a1a0f;
--umc-on-accent:#14100c;
--umc-bg:#0e0f12;
--umc-bg-2:#131519;
--umc-surface:#16181d;
--umc-surface-2:#1c1f25;
--umc-line:#282c34;
--umc-line-strong:#343943;
--umc-ink:#e9eaee;
--umc-ink-2:#b3b7c0;
--umc-ink-3:#868c98;
--umc-shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
color-scheme:dark;
}
/* ---------- Socle ---------- */
body{
background-color:var(--umc-bg)!important;
color:var(--umc-ink);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{color:var(--umc-ink);letter-spacing:-.018em;}
p,li,td,th,label,span,div{color:inherit;}
a{color:var(--umc-accent);}
a:hover,a:focus{color:var(--umc-accent-hover);}
hr{border-color:var(--umc-line);}
.text-muted{color:var(--umc-ink-3)!important;}
.text-primary{color:var(--umc-accent)!important;}
/* Conteneurs de page du theme */
.wt-main,.wt-wrapper,.wt-contentwrapper,.wt-haslayout,
.wt-main.wt-haslayout.main-site-pf-view,
.wt-main.wt-haslayout.profile-custom-design{
background-color:var(--umc-bg)!important;
color:var(--umc-ink);
}
/* ---------- Surfaces : cartes, panneaux, encadres ---------- */
.wt-dashboardbox,.wt-dashboardboxcontent,.wt-dashboardboxtitle,
.wt-settingscontent,.wt-tabsinfo,.wt-userform,.wt-formtheme,
.wt-widget,.wt-widgetcontent,.wt-userlistinghold,.wt-userlistingcontent,
.wt-categoriescontentholder,.wt-tablecategories,.wt-featured,.wt-bgwhite,
.card,.panel,.modal-content,.dropdown-menu,.list-group-item,
.wt-experiencelisting,.wt-offersmessages,.wt-profilecodescan{
background-color:var(--umc-surface)!important;
border-color:var(--umc-line)!important;
color:var(--umc-ink);
}
.wt-dashboardboxtitle,.wt-tabscontenttitle,.wt-contenthead,.wt-titlewithsearch{
background-color:var(--umc-surface-2)!important;
border-color:var(--umc-line)!important;
}
.card,.wt-dashboardbox,.wt-widget,.wt-userlistinghold{
border-radius:var(--umc-radius)!important;
box-shadow:none!important;
border:1px solid var(--umc-line)!important;
}
.card:hover,.wt-userlistinghold:hover{
border-color:var(--umc-line-strong)!important;
box-shadow:var(--umc-shadow)!important;
}
/* ---------- Tableaux ---------- */
table,.table{background-color:var(--umc-surface)!important;color:var(--umc-ink);}
table th,.table th{
background-color:var(--umc-surface-2)!important;
color:var(--umc-ink-2)!important;
border-color:var(--umc-line)!important;
font-weight:600;
}
table td,.table td{border-color:var(--umc-line)!important;color:var(--umc-ink);}
.table-striped tbody tr:nth-of-type(odd){background-color:var(--umc-bg-2)!important;}
.table-hover tbody tr:hover{background-color:var(--umc-surface-2)!important;}
/* ---------- Formulaires ---------- */
.form-control,.wt-select select,select,textarea,input[type=text],input[type=email],
input[type=password],input[type=number],input[type=search],input[type=url],input[type=tel],
input[type=date]{
background-color:var(--umc-surface)!important;
border:1px solid var(--umc-line)!important;
color:var(--umc-ink)!important;
border-radius:10px!important;
box-shadow:none!important;
transition:border-color .15s,box-shadow .15s;
}
.form-control:focus,select:focus,textarea:focus,input:focus{
border-color:var(--umc-accent)!important;
box-shadow:0 0 0 3px rgba(255,99,0,.16)!important;
outline:none!important;
}
.form-control::placeholder,textarea::placeholder,input::placeholder{color:var(--umc-ink-3)!important;}
label,.form-group>label{color:var(--umc-ink-2);font-weight:560;}
.wt-formtheme fieldset{border-color:var(--umc-line);}
/* Cases et boutons radio du theme */
.wt-checkbox label,.wt-radio label{color:var(--umc-ink-2);}
/* ---------- Boutons ---------- */
.btn,.wt-btn,.wt-searchgbtn,button.btn{
border-radius:10px!important;
font-weight:560;
letter-spacing:0;
box-shadow:none!important;
transition:background-color .15s,border-color .15s,color .15s;
}
.btn-primary,.wt-btn,.wt-searchgbtn,.btn-success{
background-color:var(--umc-accent)!important;
border-color:var(--umc-accent)!important;
color:var(--umc-on-accent)!important;
}
.btn-primary:hover,.wt-btn:hover,.wt-searchgbtn:hover,.btn-success:hover{
background-color:var(--umc-accent-hover)!important;
border-color:var(--umc-accent-hover)!important;
color:var(--umc-on-accent)!important;
}
.btn-default,.btn-secondary,.btn-light{
background-color:var(--umc-surface)!important;
border-color:var(--umc-line)!important;
color:var(--umc-ink-2)!important;
}
.btn-default:hover,.btn-secondary:hover,.btn-light:hover{
border-color:var(--umc-line-strong)!important;
color:var(--umc-ink)!important;
}
/* ---------- Navigation, entete, pied ---------- */
header,.wt-header,.wt-navigationarea,.wt-nav,.navbar{
background-color:var(--umc-surface)!important;
border-bottom:1px solid var(--umc-line)!important;
box-shadow:none!important;
}
.wt-navigation>ul>li>a,.nav-link,.navbar-nav>li>a{color:var(--umc-ink-2)!important;}
.wt-navigation>ul>li>a:hover,.nav-link:hover{color:var(--umc-accent)!important;}
footer,.wt-footer{
background-color:var(--umc-surface)!important;
border-top:1px solid var(--umc-line)!important;
color:var(--umc-ink-2);
}
footer a,.wt-footer a{color:var(--umc-ink-2)!important;}
footer a:hover,.wt-footer a:hover{color:var(--umc-accent)!important;}
.wt-fwidgettitle h6{color:var(--umc-ink-3)!important;text-transform:uppercase;
letter-spacing:.05em;font-size:13px;}
/* ---------- Fenetres modales et menus ---------- */
.modal-content{border:1px solid var(--umc-line)!important;border-radius:16px!important;}
.modal-header,.modal-footer{border-color:var(--umc-line)!important;
background-color:var(--umc-surface-2)!important;}
.dropdown-menu{border:1px solid var(--umc-line)!important;border-radius:12px!important;
box-shadow:var(--umc-shadow)!important;}
.dropdown-menu li a,.dropdown-item{color:var(--umc-ink-2)!important;}
.dropdown-menu li a:hover,.dropdown-item:hover{
background-color:var(--umc-bg-2)!important;color:var(--umc-ink)!important;}
/* ---------- Alertes ---------- */
.alert{border-radius:10px!important;border:1px solid var(--umc-line)!important;}
.alert-success{background-color:rgba(34,160,90,.10)!important;color:#1c7a45!important;
border-color:rgba(34,160,90,.28)!important;}
.alert-danger{background-color:rgba(214,58,58,.10)!important;color:#b23434!important;
border-color:rgba(214,58,58,.28)!important;}
.alert-warning{background-color:var(--umc-accent-soft)!important;color:var(--umc-accent)!important;
border-color:rgba(255,99,0,.28)!important;}
html[data-theme="dark"] .alert-success{color:#5fd08d!important;}
html[data-theme="dark"] .alert-danger{color:#ef8080!important;}
/* ---------- Pagination ---------- */
.wt-pagination ul li a,.page-link{
background-color:var(--umc-surface)!important;
border-color:var(--umc-line)!important;
color:var(--umc-ink-2)!important;border-radius:8px!important;}
.wt-pagination ul li.active a,.page-item.active .page-link{
background-color:var(--umc-accent)!important;border-color:var(--umc-accent)!important;
color:var(--umc-on-accent)!important;}
/* ---------- Barre de defilement ---------- */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--umc-bg-2);}
::-webkit-scrollbar-thumb{background:var(--umc-line-strong);border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:var(--umc-ink-3);}
/* ---------- Bascule clair / sombre ---------- */
.umc-theme-toggle{
display:inline-flex;align-items:center;justify-content:center;
width:36px;height:36px;padding:0;margin:0 6px;
background:transparent;border:1px solid var(--umc-line);border-radius:10px;
color:var(--umc-ink-2);cursor:pointer;vertical-align:middle;
transition:border-color .15s,color .15s,background-color .15s;
}
.umc-theme-toggle:hover{border-color:var(--umc-accent);color:var(--umc-accent);}
.umc-theme-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;
stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.umc-theme-toggle .umc-moon{display:none;}
html[data-theme="dark"] .umc-theme-toggle .umc-moon{display:block;}
html[data-theme="dark"] .umc-theme-toggle .umc-sun{display:none;}
/* ---------- Mode sombre : rattrapages ---------- */
html[data-theme="dark"] img.umc-invert-logo{filter:brightness(0) invert(1);opacity:.92;}
html[data-theme="dark"] .bg_gray,html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,html[data-theme="dark"] .white-bg{
background-color:var(--umc-bg-2)!important;}
/* Fonds blancs poses en style inline dans les vues du theme */
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background: aliceblue"]{
background-color:var(--umc-surface)!important;}
html[data-theme="dark"] [style*="color:#000"],
html[data-theme="dark"] [style*="color: #000"],
html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color: #333"]{color:var(--umc-ink)!important;}
/* ---------- Entete : barre de recherche et acces compte ---------- */
.wt-header,.wt-navigationarea,.wt-nav,.wt-respsonsive-search{
background-color:var(--umc-surface)!important;
border-color:var(--umc-line)!important;
}
.wt-header .form-control,.wt-respsonsive-search .form-control{
background-color:var(--umc-bg-2)!important;
border-color:var(--umc-line)!important;
color:var(--umc-ink)!important;
}
/* Le bouton loupe restait rouge : on le remet a la couleur de marque */
.wt-header button[type=submit],.wt-header .wt-searchgbtn,
.wt-respsonsive-search button,.wt-searchbtn,
.wt-header .fa-search{color:var(--umc-on-accent)!important;}
.wt-header button[type=submit],.wt-respsonsive-search button,.wt-searchbtn{
background-color:var(--umc-accent)!important;
border-color:var(--umc-accent)!important;
border-radius:0 10px 10px 0!important;
}
.wt-loginbtn a,.wt-logininfo a,.wt-header .wt-loginarea>a{color:var(--umc-ink-2)!important;}
.wt-loginbtn a:hover,.wt-logininfo a:hover{color:var(--umc-accent)!important;}
/* ---------- Ecrans de connexion et d'inscription ---------- */
.wt-loginformhold,.wt-loginarea,.wt-logininfo,.wt-loginfooterinfo,
.wt-registerformhold,.wt-registerarea{
background-color:var(--umc-surface)!important;
border:1px solid var(--umc-line)!important;
border-radius:16px!important;
color:var(--umc-ink);
}
.wt-loginheader,.wt-registerheader{
background-color:var(--umc-surface-2)!important;
border-bottom:1px solid var(--umc-line)!important;
border-radius:16px 16px 0 0!important;
}
.wt-loginheader h3,.wt-loginheader h2{color:var(--umc-ink)!important;font-size:18px;}
.wt-forgot-password a{color:var(--umc-accent)!important;}
/* Cases a cocher du theme, illisibles en sombre */
.wt-checkbox input[type=checkbox],input[type=checkbox],input[type=radio]{
accent-color:var(--umc-accent);
width:16px;height:16px;vertical-align:middle;
}
/* ---------- Pages d'erreur ---------- */
.wt-error,.wt-errorholder,.wt-error404,.wt-errorcontent,.wt-errorimg{
background-color:var(--umc-surface)!important;
border-color:var(--umc-line)!important;
border-radius:16px!important;
color:var(--umc-ink);
}
/* ---------- Listes de resultats ---------- */
.wt-userlistinghold,.wt-userlistingcontent,.wt-userlisting-breadcrumb,
.wt-contenthead,.wt-starcontent,.wt-widgettitle,.wt-widgetcontent,
.wt-searchresult,.wt-tag,.wt-widgettag{
background-color:transparent!important;
border-color:var(--umc-line)!important;
}
.wt-userlistinghold{background-color:var(--umc-surface)!important;}
.wt-widget{background-color:var(--umc-surface)!important;}
/* Le theme pose des titres tres sombres : illisibles sur fond sombre */
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,
html[data-theme="dark"] h4,html[data-theme="dark"] h5,html[data-theme="dark"] h6,
html[data-theme="dark"] .wt-title h2,html[data-theme="dark"] .wt-title h3,
html[data-theme="dark"] .wt-title h4,html[data-theme="dark"] .wt-title a,
html[data-theme="dark"] .wt-contenthead h2,html[data-theme="dark"] .wt-widgettitle h2,
html[data-theme="dark"] .wt-widgettitle h3,html[data-theme="dark"] .wt-starcontent,
html[data-theme="dark"] .wt-userlistingcontent h3,
html[data-theme="dark"] .wt-userlistingcontent a{
color:var(--umc-ink)!important;
}
html[data-theme="dark"] .wt-description p,html[data-theme="dark"] .wt-description,
html[data-theme="dark"] .wt-userlisting-breadcrumb li,
html[data-theme="dark"] .wt-userlisting-breadcrumb a{color:var(--umc-ink-2)!important;}
/* Fonds clairs poses en dur par le theme */
html[data-theme="dark"] [style*="#f7f7f7"],html[data-theme="dark"] [style*="#f5f5f5"],
html[data-theme="dark"] [style*="#eee"],html[data-theme="dark"] [style*="#fafafa"],
html[data-theme="dark"] [style*="#f9f9f9"],html[data-theme="dark"] [style*="aliceblue"]{
background-color:var(--umc-surface-2)!important;color:var(--umc-ink)!important;
}
/* ---------- Logo : le mot-marque disparaissait sur fond sombre ---------- */
#logo img,.wt-logo img,.wt-logo a img,header .logo img,
#header_menu img,.navbar-brand img,img.logo_normal,img.logo_sticky{
content:url('/images/logo-umc-light.svg');
height:36px!important;width:auto!important;max-width:none!important;min-width:150px;
}
html[data-theme="dark"] #logo img,html[data-theme="dark"] .wt-logo img,
html[data-theme="dark"] .wt-logo a img,html[data-theme="dark"] header .logo img,
html[data-theme="dark"] #header_menu img,html[data-theme="dark"] .navbar-brand img,
html[data-theme="dark"] img.logo_normal,html[data-theme="dark"] img.logo_sticky{
content:url('/images/logo-umc-dark.svg');
}
/* Le pied de page reprend le meme logo */
footer .wt-footerlogo img,.wt-footerlogo img,.ft-logo img{
content:url('/images/logo-umc-light.svg');height:32px!important;width:auto!important;}
html[data-theme="dark"] footer .wt-footerlogo img,
html[data-theme="dark"] .wt-footerlogo img,
html[data-theme="dark"] .ft-logo img{content:url('/images/logo-umc-dark.svg');}
/* ---------- Tout ce qui est orange porte une ecriture noire ---------- */
.btn-primary,.btn-primary *,.wt-btn,.wt-btn *,.btn-success,.btn-success *,
.wt-searchgbtn,.wt-searchgbtn *,.wt-searchbtn,.wt-searchbtn *,
input[type=submit],button[type=submit],
.wt-header button[type=submit],.wt-header button[type=submit] *,
.page-item.active .page-link,.wt-pagination ul li.active a,
.umc-on-accent{
color:var(--umc-on-accent)!important;
-webkit-text-fill-color:var(--umc-on-accent);
}
.btn-primary i,.wt-btn i,.btn-success i,.wt-searchgbtn i,
button[type=submit] i,input[type=submit]{color:var(--umc-on-accent)!important;}
/* Les liens rendus en bouton par le theme */
a.btn-primary,a.wt-btn,a.btn-success{color:var(--umc-on-accent)!important;}
/* Le lien de connexion restait bleu par defaut */
#sign-in,a#sign-in,.btn_access,.wt-loginbtn a,a.wt-loginlink{
color:var(--umc-ink-2)!important;}
#sign-in:hover,.btn_access:hover{color:var(--umc-accent)!important;}
.btn_access.green,a.btn_access.green{
background-color:var(--umc-accent)!important;border-color:var(--umc-accent)!important;
color:var(--umc-on-accent)!important;}
/* ---------- Cadres : le piege des bordures sans couleur ----------
Le theme ecrit souvent « border: 1px solid » sans couleur. La bordure
prend alors currentColor — soit le texte, devenu CLAIR en mode sombre.
D'ou les contours blancs (cadre OTP, fieldsets, encadres invisibles).
On redonne une couleur de ligne a tout ce qui structure la page. */
html[data-theme="dark"] div,html[data-theme="dark"] section,
html[data-theme="dark"] article,html[data-theme="dark"] aside,
html[data-theme="dark"] form,html[data-theme="dark"] fieldset,
html[data-theme="dark"] legend,html[data-theme="dark"] table,
html[data-theme="dark"] thead,html[data-theme="dark"] tbody,
html[data-theme="dark"] tr,html[data-theme="dark"] td,html[data-theme="dark"] th,
html[data-theme="dark"] ul,html[data-theme="dark"] ol,html[data-theme="dark"] li,
html[data-theme="dark"] p,html[data-theme="dark"] span,html[data-theme="dark"] dl,
html[data-theme="dark"] dt,html[data-theme="dark"] dd,html[data-theme="dark"] figure,
html[data-theme="dark"] nav,html[data-theme="dark"] header,html[data-theme="dark"] footer,
html[data-theme="dark"] iframe,html[data-theme="dark"] img,html[data-theme="dark"] hr{
border-color:var(--umc-line);
}
/* Cadres explicitement blancs, y compris poses en style inline */
html[data-theme="dark"] [style*="border:1px solid #fff"],
html[data-theme="dark"] [style*="border: 1px solid #fff"],
html[data-theme="dark"] [style*="border:1px solid white"],
html[data-theme="dark"] [style*="border: 1px solid white"],
html[data-theme="dark"] [style*="border-color:#fff"],
html[data-theme="dark"] [style*="border-color: #fff"],
html[data-theme="dark"] [style*="border:1px solid rgb(255"],
html[data-theme="dark"] [style*="border: 1px solid rgb(255"]{
border-color:var(--umc-line)!important;
}
/* Contenus embarques : sans color-scheme, un iframe se peint en blanc */
iframe{color-scheme:light dark;}
html[data-theme="dark"] iframe{
color-scheme:dark;background-color:var(--umc-surface);
border:1px solid var(--umc-line)!important;border-radius:12px;
}
html[data-theme="dark"] fieldset,html[data-theme="dark"] .well,
html[data-theme="dark"] .popover,html[data-theme="dark"] .tooltip-inner,
html[data-theme="dark"] .wt-otpholder,html[data-theme="dark"] .wt-2fa{
background-color:var(--umc-surface)!important;
border-color:var(--umc-line)!important;
color:var(--umc-ink);
}
/* Un QR code doit rester lisible par une camera : on garde son fond blanc,
mais dans un cadre propre au lieu d'un rectangle blanc a vif. */
.wt-profilecodescan img,.qrcode img,img[src*="qr"],svg.qrcode,
.wt-profilecodescan svg,.qrcode svg{
background:#ffffff!important;padding:12px!important;
border-radius:12px!important;border:1px solid var(--umc-line)!important;
}
/* ---------- Back-office : textes rendus illisibles en sombre ---------- */
html[data-theme="dark"] .custom-dashboard-sidebar,
html[data-theme="dark"] .custom-dashboard-sidebar h3,
html[data-theme="dark"] .custom-dashboard-sidebar h4,
html[data-theme="dark"] .custom-dashboard-sidebar span,
html[data-theme="dark"] .custom-dashboard-sidebar a,
html[data-theme="dark"] .wt-dashboardmenu a,html[data-theme="dark"] .wt-dashboardmenu span,
html[data-theme="dark"] .wt-username,html[data-theme="dark"] .wt-username h3,
html[data-theme="dark"] .dz-filename,html[data-theme="dark"] .dz-size,
html[data-theme="dark"] .dz-details,html[data-theme="dark"] .dz-details *,
html[data-theme="dark"] .nav-tabs .nav-link,
html[data-theme="dark"] .wt-tabscontenttitle h2,
html[data-theme="dark"] .wt-tabscontenttitle h3{
color:var(--umc-ink)!important;
}
html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .tab-content,html[data-theme="dark"] .tab-pane{
background-color:var(--umc-surface)!important;
border-color:var(--umc-line)!important;
color:var(--umc-ink)!important;
}
/* La zone de depot de fichiers passait en blanc sur blanc */
html[data-theme="dark"] .dropzone,html[data-theme="dark"] .dz-preview,
html[data-theme="dark"] .vue-dropzone{
background-color:var(--umc-surface-2)!important;
border:1px dashed var(--umc-line-strong)!important;
color:var(--umc-ink-2)!important;
}
/* ============================================================
Rattrapages issus d'un AUDIT du DOM rendu, pas d'une supposition :
parcours de /admin/profile, /admin/users, /search-results, /login
et de l'accueil, en relevant chaque element dont le fond, le texte
ou la bordure calcules restaient clairs en mode sombre.
============================================================ */
html[data-theme="dark"] ul.sub-menu,
html[data-theme="dark"] .wt-navigation ul,
html[data-theme="dark"] .dropdown-menu ul,
html[data-theme="dark"] #wt-sidebarwrapper,
html[data-theme="dark"] .wt-sidebarwrapper,
html[data-theme="dark"] #wt-btnmenutoggle,
html[data-theme="dark"] .wt-btnmenutoggle,
html[data-theme="dark"] .wt-companysdetails,
html[data-theme="dark"] .wt-usersidebar,
html[data-theme="dark"] .wt-dashboardsidebar,
html[data-theme="dark"] figure,
html[data-theme="dark"] .wt-tabscontent,
html[data-theme="dark"] .tab-content,
html[data-theme="dark"] .wt-updatall,
html[data-theme="dark"] .la-updateall-holder,
html[data-theme="dark"] .wt-404errorcontent,
html[data-theme="dark"] .wt-404errorimg,
html[data-theme="dark"] .wt-404error,
html[data-theme="dark"] main#wt-main,
html[data-theme="dark"] .wt-innerbannerholder,
html[data-theme="dark"] .wt-breadcrumbarea{
background-color:var(--umc-surface)!important;
}
html[data-theme="dark"] .wt-navigation ul li a.active,
html[data-theme="dark"] .sub-menu li a.active,
html[data-theme="dark"] a.active{
background-color:var(--umc-surface-2)!important;color:var(--umc-accent)!important;
}
/* Bordures restees claires */
html[data-theme="dark"] li,html[data-theme="dark"] li.menu-item-has-children,
html[data-theme="dark"] figure,html[data-theme="dark"] span.version-area,
html[data-theme="dark"] .sub-menu li{border-color:var(--umc-line)!important;}
/* Textes restes sombres */
html[data-theme="dark"] label,
html[data-theme="dark"] em.selected-search-type,
html[data-theme="dark"] .selected-search-type,
html[data-theme="dark"] .menu-icon,
html[data-theme="dark"] .wt-uploadingbar,
html[data-theme="dark"] .dz-filename,html[data-theme="dark"] .dz-size,
html[data-theme="dark"] .version-area,
html[data-theme="dark"] i.lnr,html[data-theme="dark"] .lnr-magnifier,
html[data-theme="dark"] .wt-btnmenutoggle,html[data-theme="dark"] #wt-btnmenutoggle{
color:var(--umc-ink-2)!important;
}
/* Rappel : sur un fond orange, l'ecriture reste noire — cette regle
passe apres les precedentes et reprend la main sur les icones. */
.btn-primary,.btn-primary *,.wt-btn,.wt-btn *,.btn-success,.btn-success *,
.wt-searchgbtn,.wt-searchgbtn *,.wt-searchbtn,.wt-searchbtn *,
button[type=submit],button[type=submit] *,input[type=submit],
.wt-header button[type=submit] *{
color:var(--umc-on-accent)!important;
}
/* Menu deroulant du compte : il restait entierement blanc (220x608 mesures) */
html[data-theme="dark"] #wt-profiledashboard,
html[data-theme="dark"] .wt-usernav,
html[data-theme="dark"] .wt-usernav ul,
html[data-theme="dark"] .wt-usernav ul li,
html[data-theme="dark"] .wt-userlogedin ul,
html[data-theme="dark"] .wt-userlogedin .dropdown-menu{
background-color:var(--umc-surface)!important;
border-color:var(--umc-line)!important;
}
html[data-theme="dark"] .wt-usernav a,html[data-theme="dark"] .wt-userlogedin ul a{
color:var(--umc-ink-2)!important;
}
html[data-theme="dark"] .wt-usernav a:hover,html[data-theme="dark"] .wt-userlogedin ul a:hover{
background-color:var(--umc-bg-2)!important;color:var(--umc-accent)!important;
}
html[data-theme="dark"] .wt-updatall span,
html[data-theme="dark"] .la-updateall-holder span{color:var(--umc-ink-2)!important;}
/* Articles : cartes et titres restes clairs (mesure sur /articles) */
html[data-theme="dark"] .wt-articlecontent,html[data-theme="dark"] .wt-articlecontents,
html[data-theme="dark"] .wt-articles,html[data-theme="dark"] .wt-articleimg,
html[data-theme="dark"] .wt-blogpost,html[data-theme="dark"] .wt-postarticle{
background-color:var(--umc-surface)!important;border-color:var(--umc-line)!important;
}
html[data-theme="dark"] .wt-articlecontent a,html[data-theme="dark"] .wt-articlecontent h2,
html[data-theme="dark"] .wt-articlecontent h3,html[data-theme="dark"] .wt-articlecontent h4,
html[data-theme="dark"] .custom-black-text,html[data-theme="dark"] a.custom-black-text{
color:var(--umc-ink)!important;
}
html[data-theme="dark"] .wt-articlecontent p,html[data-theme="dark"] .wt-articlecontents p{
color:var(--umc-ink-2)!important;
}
/* ---------- Profils publics et espace utilisateur (mesures sur /profile/…) ---------- */
html[data-theme="dark"] .wt-freelancers-details,
html[data-theme="dark"] .wt-userprofileholder,
html[data-theme="dark"] .wt-statisticcontent,
html[data-theme="dark"] [class*="wt-countercolor"],
html[data-theme="dark"] .wt-services-holder,
html[data-theme="dark"] .wt-clientfeedback,
html[data-theme="dark"] .wt-craftedprojects,
html[data-theme="dark"] .wt-videos,
html[data-theme="dark"] .wt-experience,
html[data-theme="dark"] .wt-education,
html[data-theme="dark"] .wt-proposalsr,
html[data-theme="dark"] .wt-userprofile,
html[data-theme="dark"] .wt-usersidebar,
html[data-theme="dark"] .wt-skillsholder,
html[data-theme="dark"] .wt-portfolio,
html[data-theme="dark"] .wt-reviews,
html[data-theme="dark"] div.button,
html[data-theme="dark"] .la-no-record{
background-color:var(--umc-surface)!important;
border-color:var(--umc-line)!important;
color:var(--umc-ink);
}
/* Textes du profil : le theme les fixe en quasi-noir */
html[data-theme="dark"] .wt-userprofileholder *,
html[data-theme="dark"] .wt-freelancers-details *,
html[data-theme="dark"] .wt-experience *,
html[data-theme="dark"] .wt-services-holder *,
html[data-theme="dark"] .wt-craftedprojects *{
color:inherit;
}
html[data-theme="dark"] .wt-userprofileholder a,
html[data-theme="dark"] .wt-freelancers-details a{color:var(--umc-ink)!important;}
html[data-theme="dark"] .wt-userprofileholder a:hover,
html[data-theme="dark"] .wt-freelancers-details a:hover{color:var(--umc-accent)!important;}
/* Profil public : blocs releves dans le HTML rendu de /profile/… */
html[data-theme="dark"] .wt-userprofile,
html[data-theme="dark"] .wt-usertitle,
html[data-theme="dark"] .wt-freelancers-info,
html[data-theme="dark"] .wt-freelancers-content,
html[data-theme="dark"] .wt-freelancers-rating,
html[data-theme="dark"] .wt-freelancers-img,
html[data-theme="dark"] .wt-emptydetails,
html[data-theme="dark"] .wt-emptydata-holder,
html[data-theme="dark"] .wt-emptydata,
html[data-theme="dark"] .wt-empty-person,
html[data-theme="dark"] .wt-titlewithselect,
html[data-theme="dark"] .wt-widgetcompany,
html[data-theme="dark"] .wt-clicksavebtn,
html[data-theme="dark"] .wt-btntext,
html[data-theme="dark"] .wt-select,
html[data-theme="dark"] .wt-login{
background-color:var(--umc-surface)!important;
border-color:var(--umc-line)!important;
}
html[data-theme="dark"] .wt-usertitle h2,html[data-theme="dark"] .wt-usertitle h3,
html[data-theme="dark"] .wt-usertitle a,html[data-theme="dark"] .wt-usertitle span,
html[data-theme="dark"] .wt-freelancers-info h3,html[data-theme="dark"] .wt-freelancers-info a,
html[data-theme="dark"] .wt-freelancers-content h3,html[data-theme="dark"] .wt-freelancers-content a,
html[data-theme="dark"] .wt-emptydetails h3,html[data-theme="dark"] .wt-emptydata h3,
html[data-theme="dark"] .wt-statisticcontent h3,html[data-theme="dark"] .wt-statisticcontent span,
html[data-theme="dark"] .wt-title h2,html[data-theme="dark"] .wt-title h3{
color:var(--umc-ink)!important;
}
html[data-theme="dark"] .wt-description p,html[data-theme="dark"] .wt-emptydetails p,
html[data-theme="dark"] .wt-emptydata p{color:var(--umc-ink-2)!important;}
/* Offres d'abonnement (/membership) et annonces (/jobs) */
html[data-theme="dark"] .box,
html[data-theme="dark"] .wt-viewjobholder,
html[data-theme="dark"] .wt-viewjobfolder,
html[data-theme="dark"] .wt-viewjobtag,
html[data-theme="dark"] .wt-viewjobclock,
html[data-theme="dark"] .wt-effectiveholder,
html[data-theme="dark"] .wt-jobholder,
html[data-theme="dark"] .wt-joblisting,
html[data-theme="dark"] .wt-pricingtable,
html[data-theme="dark"] .wt-packagehold{
background-color:var(--umc-surface)!important;
border-color:var(--umc-line)!important;
}
html[data-theme="dark"] .box *,
html[data-theme="dark"] .wt-viewjobholder h2,html[data-theme="dark"] .wt-viewjobholder h3,
html[data-theme="dark"] .wt-viewjobholder h4,html[data-theme="dark"] .wt-viewjobholder a,
html[data-theme="dark"] .wt-viewjobfolder h3,html[data-theme="dark"] .wt-viewjobfolder a,
html[data-theme="dark"] .wt-widgettitle h2,html[data-theme="dark"] .wt-widgettitle h3,
html[data-theme="dark"] .wt-effectiveholder h3{
color:var(--umc-ink)!important;
}
html[data-theme="dark"] .box p,html[data-theme="dark"] .wt-viewjobholder p,
html[data-theme="dark"] .wt-viewjobtag,html[data-theme="dark"] .wt-viewjobclock{
color:var(--umc-ink-2)!important;
}
/* Les prix restent en couleur de marque */
html[data-theme="dark"] .box .price,html[data-theme="dark"] .box strong.price,
html[data-theme="dark"] .wt-price{color:var(--umc-accent)!important;}
/* Page d'abonnement : sections et FAQ ont leurs propres classes */
html[data-theme="dark"] .membership,html[data-theme="dark"] .sec2,
html[data-theme="dark"] .section4,html[data-theme="dark"] .section2,
html[data-theme="dark"] .section3,html[data-theme="dark"] .faq_card,
html[data-theme="dark"] button.accordion,html[data-theme="dark"] .accordion,
html[data-theme="dark"] .panel,html[data-theme="dark"] .accordion-content{
background-color:var(--umc-surface)!important;
border-color:var(--umc-line)!important;
color:var(--umc-ink)!important;
}
html[data-theme="dark"] .faq_card *,html[data-theme="dark"] button.accordion *,
html[data-theme="dark"] .membership h1,html[data-theme="dark"] .membership h2,
html[data-theme="dark"] .membership h3,html[data-theme="dark"] .membership h4,
html[data-theme="dark"] .sec2 h2,html[data-theme="dark"] .sec2 h3,
html[data-theme="dark"] .section4 h2,html[data-theme="dark"] .section4 h3{
color:var(--umc-ink)!important;
}
html[data-theme="dark"] .membership p,html[data-theme="dark"] .sec2 p,
html[data-theme="dark"] .section4 p,html[data-theme="dark"] .faq_card p{
color:var(--umc-ink-2)!important;
}
/* Annonces : les titres restaient quasi noirs */
html[data-theme="dark"] .wt-title h2 a,html[data-theme="dark"] .wt-title h3 a,
html[data-theme="dark"] .wt-title h4 a,html[data-theme="dark"] .wt-jobtitle,
html[data-theme="dark"] .wt-viewjobholder span,
html[data-theme="dark"] .wt-widgettag a,html[data-theme="dark"] .wt-tag a{
color:var(--umc-ink)!important;
}
/* Dernier residu mesure : les liens sans classe gardaient la couleur du theme,
quasi noire, donc invisibles sur fond sombre. */
html[data-theme="dark"] a:not([class]),
html[data-theme="dark"] a[class=""]{color:var(--umc-ink)!important;}
html[data-theme="dark"] a:not([class]):hover{color:var(--umc-accent)!important;}
/* Le lien de connexion du theme restait bleu par defaut, dans les deux themes */
a#sign-in,a.btn_access,#top_menu>li>a:not(.green){color:var(--umc-ink-2)!important;}
a#sign-in:hover,a.btn_access:hover{color:var(--umc-accent)!important;}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}
/* ==========================================================================
BACK-OFFICE — allègement visuel (06/09/2026)
Constat en naviguant dans l'admin : une illustration promotionnelle du thème
(un personnage manga « Quick Payouts ») occupe la colonne de droite, le menu
latéral tronque ses libellés, et l'ensemble mélange les registres.
On enlève le décor, on redonne de l'air, on garde la charte.
========================================================================== */
/* --- 1. L'illustration promotionnelle du thème ---------------------------
Elle n'a aucun rapport avec l'activité et occupe la meilleure place de
l'écran. On retire le bloc entier, pas seulement l'image. */
/* On ne masque QUE le bloc qui porte l'illustration : la classe
.wt-earningsholder sert aussi au bloc des gains du prestataire. */
.wt-dashboardbox:has(img[src*="dashboard-bg.png"]),
.wt-dashboardbox:has(img[data-src*="dashboard-bg.png"]),
img[src*="dashboard-bg.png"],
img[data-src*="dashboard-bg.png"] {
display: none !important;
}
/* --- 2. Menu latéral : les libellés étaient coupés ----------------------- */
.wt-dashboardnav .wt-navigation > ul > li > a,
.wt-dashboardnav .wt-navigation ul li a {
white-space: normal;
line-height: 1.35;
padding-top: 10px;
padding-bottom: 10px;
word-break: normal;
overflow-wrap: anywhere;
}
.wt-dashboardnav .wt-navigation > ul > li > a {
font-size: 14px;
letter-spacing: -.01em;
}
/* --- 3. Cartes et panneaux : moins de bordures, plus de respiration ------ */
.wt-dashboardbox,
.wt-dashboardboxtitle,
.wt-blockimg,
.wt-tabscontenttitle {
border-radius: 12px;
}
.wt-dashboardbox {
box-shadow: 0 1px 2px rgba(16,17,20,.04), 0 6px 18px rgba(16,17,20,.05);
border: 1px solid var(--umc-line, #e7e8ec);
}
html[data-theme="dark"] .wt-dashboardbox {
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
}
.wt-dashboardboxtitle {
padding: 14px 20px;
}
.wt-dashboardboxtitle h2,
.wt-dashboardboxtitle h3 {
font-size: 15px;
font-weight: 620;
letter-spacing: -.015em;
}
/* --- 4. Tableaux : lisibles avant d'être décorés ------------------------- */
.wt-tableholder table th {
font-size: 12.5px;
font-weight: 620;
text-transform: none;
letter-spacing: 0;
}
.wt-tableholder table td {
font-size: 13.5px;
vertical-align: middle;
}
.wt-tableholder table tbody tr:hover {
background: var(--umc-surface-2, rgba(255,99,0,.035));
}
/* --- 5. Formulaires : champs alignés sur la charte ----------------------- */
.form-control,
.wt-formtheme .form-group input[type="text"],
.wt-formtheme .form-group input[type="email"],
.wt-formtheme .form-group input[type="password"],
.wt-formtheme .form-group input[type="number"],
.wt-formtheme .form-group textarea,
.wt-formtheme .form-group select {
border-radius: 10px;
font-size: 14px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus,
.wt-formtheme .form-group input:focus,
.wt-formtheme .form-group textarea:focus,
.wt-formtheme .form-group select:focus {
border-color: var(--umc-accent, #ff6300);
box-shadow: 0 0 0 3px rgba(255,99,0,.14);
outline: none;
}
/* --- 6. Boutons : le noir sur l'orange, règle posée pour tout le site ---- */
.wt-btn,
.btn-primary,
.wt-dashboardbox .wt-btn {
border-radius: 10px;
font-weight: 580;
letter-spacing: -.01em;
}
/* --- 7. Notifications : la pastille flottante masquait le contenu -------- */
.wt-notificationicon,
.notification-float {
z-index: 40;
}
/* --- 8. Densité : le thème espace tout comme une page vitrine ------------ */
.wt-dashboardbox + .wt-dashboardbox {
margin-top: 16px;
}
.wt-usersidebaricon ul li {
margin-bottom: 2px;
}
/* ==========================================================================
PAGES DE CONTENU — lisibilité (06/09/2026)
Les pages légales et les pages de destination sont rendues côté serveur dans
`.dc-main-section`. Le thème y affichait les passages en gras dans un gris
plus pâle que le texte courant : l'emphase produisait l'effet inverse de
celui recherché.
========================================================================== */
.dc-main-section {
max-width: 820px;
margin: 0 auto;
padding: 8px 0 48px;
font-size: 16px;
line-height: 1.72;
color: var(--umc-ink, #101114);
}
/* Le gras doit ressortir, pas s'effacer. */
.dc-main-section strong,
.dc-main-section b {
color: inherit;
font-weight: 640;
}
.dc-main-section h1 {
font-size: 34px;
line-height: 1.18;
letter-spacing: -.022em;
margin: 0 0 20px;
}
.dc-main-section h2 {
font-size: 22px;
line-height: 1.25;
letter-spacing: -.018em;
margin: 38px 0 12px;
padding-top: 22px;
border-top: 1px solid var(--umc-line, #e7e8ec);
}
.dc-main-section h3 {
font-size: 17px;
font-weight: 620;
margin: 24px 0 8px;
}
.dc-main-section p { margin: 0 0 14px; }
.dc-main-section p.lede {
font-size: 18px;
color: var(--umc-ink-2, #3d414a);
margin-bottom: 22px;
}
.dc-main-section ul,
.dc-main-section ol { margin: 0 0 18px; padding-left: 22px; }
.dc-main-section ul { list-style: disc; }
.dc-main-section ol { list-style: decimal; }
.dc-main-section li { margin-bottom: 7px; }
.dc-main-section a {
color: var(--umc-accent, #ff6300);
text-decoration: underline;
text-underline-offset: 2px;
}
.dc-main-section a:hover { text-decoration: none; }
/* Les tableaux de frais et de sous-traitants doivent rester lisibles sur mobile. */
.dc-main-section table {
width: 100%;
border-collapse: collapse;
margin: 6px 0 22px;
font-size: 15px;
display: block;
overflow-x: auto;
}
.dc-main-section table th,
.dc-main-section table td {
text-align: left;
padding: 9px 12px;
border-bottom: 1px solid var(--umc-line, #e7e8ec);
}
.dc-main-section table th {
font-weight: 620;
background: var(--umc-bg-2, #fafafb);
}
html[data-theme="dark"] .dc-main-section table th {
background: var(--umc-surface, #16181d);
}
/* Le bouton d'appel à l'action des pages de destination. */
.dc-main-section a.btn,
.dc-main-section a.btn-solid {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 22px;
margin: 4px 0 10px;
border-radius: 10px;
background: var(--umc-accent, #ff6300);
/* noir sur orange : 7:1, contre 3:1 pour du blanc */
color: #14100c;
font-weight: 600;
text-decoration: none;
}
.dc-main-section a.btn:hover,
.dc-main-section a.btn-solid:hover {
background: var(--umc-accent-hover, #ff7a24);
color: #14100c;
}
.dc-main-section em { color: var(--umc-ink-3, #6b7280); }
/* Le theme colore les et les
plus specifiquement que notre bloc :
on remonte la specificite, sinon le texte courant reste gris fonce sur
fond sombre — lisible nulle part. */
.dc-haslayout .dc-main-section p,
.dc-haslayout .dc-main-section li,
.dc-haslayout .dc-main-section td,
.dc-haslayout .dc-main-section th,
.dc-howitwork-hold .dc-main-section p,
.dc-howitwork-hold .dc-main-section li,
div.dc-main-section p,
div.dc-main-section li,
div.dc-main-section td {
color: var(--umc-ink, #101114) !important;
}
div.dc-main-section p.lede,
div.dc-main-section em {
color: var(--umc-ink-2, #3d414a) !important;
}
div.dc-main-section strong,
div.dc-main-section b {
color: var(--umc-ink, #101114) !important;
font-weight: 640;
}
div.dc-main-section h1,
div.dc-main-section h2,
div.dc-main-section h3 {
color: var(--umc-ink, #101114) !important;
}
/* ==========================================================================
L'EN-TÊTE MASQUAIT LE HAUT DES PAGES (06/09/2026)
Cause : `.wt-header` est en `float: left`. Son conteneur `.wt-contentwrapper`
ne le contient donc pas — hauteur mesurée à 0 — et le bloc de contenu suivant
remontait SOUS l'en-tête. Sur les pages sans bandeau (pages de destination,
pages légales), le titre passait derrière la barre de navigation.
On demande au conteneur de contenir ses flottants, au contenu de passer
dessous, et on ajoute l'espace de respiration qui manquait.
========================================================================== */
.wt-contentwrapper {
display: flow-root;
}
.dc-contentwrappers,
.wt-innerbannerholder,
.wt-main-section {
clear: both;
}
.dc-contentwrappers {
padding-top: 28px;
}
/* Quand un bandeau de page précède le contenu, l'espace est déjà pris. */
.wt-innerbannerholder + .dc-contentwrappers,
.wt-innerbanner + .dc-contentwrappers {
padding-top: 0;
}
/* Suite du meme defaut : le bloc principal `main.wt-main` est lui aussi en
`float: left` et ne se degageait pas de l'en-tete. Sur les pages a bandeau
sans image, le titre demarrait a 3 px du haut, donc derriere la navigation. */
main.wt-main {
clear: both;
}
/* Le theme donne a l'en-tete un `margin-bottom: -77px`, expres, pour qu'il
flotte AU-DESSUS de l'image de banniere. Sur une page sans image, il n'y a
rien a survoler : le titre remontait derriere la navigation. Un `clear`
n'y peut rien, il degage jusqu'a la marge, pas jusqu'au bas visible.
On rend donc au bandeau sans image la hauteur que l'image occupait. */
.wt-innerbannercontent.wt-without-banner-title {
padding-top: 110px;
padding-bottom: 16px;
}
/* Sous 768 px l'en-tete se replie : il monte a 155-177 px de haut alors que sa
marge negative passe a -126 px. Tous les gabarits de bandeau passaient alors
derriere la navigation, pas seulement celui sans image. Plutot que de
compenser variante par variante, on supprime la superposition : sur un ecran
de telephone, un en-tete transparent pose sur un bandeau court n'apporte
rien et coute la lisibilite du titre. */
@media (max-width: 767px) {
.wt-header {
margin-bottom: 0 !important;
}
.wt-innerbannercontent.wt-without-banner-title {
padding-top: 34px;
}
}