/* ============================================================================
theme-hubnup.css — Socle espace pro consultant (Phase 1) — v0.2
Charte Mariam (clair + sombre). SCOPÉ body.hub-consultant → INERTE ailleurs.
Aucune règle sous :root nu. La classe hub-consultant est posée par
/manchette-hubnup.js UNIQUEMENT pour les consultants ET hors pages sacrées
(/Adhesion-Unique, /Parrainage-CGP, auth).
v0.2 : rail replié + hover overlay (pur CSS) + épinglage (reflow) + cascade
« Mon espace » + tab bar mobile + bottom sheet.
============================================================================ */
/* ---- HUB-THEME-START — tokens (accents identiques clair/sombre) ---- */
html body.hub-consultant{
--petrol:#03535A; --emerald:#017981; --lagoon:#22B4AF; --rose:#E61975;
--bg:#f4f3ed; --bg-2:#ffffff;
--ink:#0b3a40; --ink-2:#42686c; --ink-dim:#6f9092;
--line:rgba(8,58,64,.12); --line-2:rgba(8,58,64,.2);
--card-grad:linear-gradient(148deg,#034e55 0%,#04666d 48%,#017981 100%);
--card-ink:#f2fdfc; --card-ink-2:#d6f1ef; --card-mint:#7fe8dc;
--shadow-card:0 20px 44px -22px rgba(3,83,90,.5);
--shadow-soft:0 10px 30px -16px rgba(3,83,90,.22);
--r:18px;
--font-d:"Outfit",ui-sans-serif,system-ui,sans-serif;
--font-b:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
}
html[data-theme="dark"] body.hub-consultant{
--petrol-900:#022b30; --petrol-950:#011c20;
--bg:#04464c; --bg-2:#022b30;
--ink:#ecfbfb; --ink-2:#bfe0e1; --ink-dim:#8fb6b8;
--line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.16);
--surface:rgba(255,255,255,.045); --surface-2:rgba(255,255,255,.075);
--grad-02:linear-gradient(90deg,#03535A,#22B4AF);
--shadow:0 18px 50px -22px rgba(0,0,0,.65);
}
/* ---- HUB-THEME-END ---- */
/* ---- HUB-SHELL-START (v0.2) — rail + fond de page, scopé consultant ---- */
html body.hub-consultant{
--rail-w:232px; /* rail déployé */
--rail-c:72px; /* rail replié (icônes) */
--rail-gap:16px; /* marge « flottante » autour du rail */
--rail-hover:rgba(3,83,90,.07);
--rail-caret:var(--ink-dim);
background:
radial-gradient(900px 640px at 88% -6%, rgba(34,180,175,.10), transparent 58%),
linear-gradient(145deg,#d2e8eb 0%,#e6edf4 35%,#fad6e6 65%,#d6eaec 100%) !important;
background-attachment:fixed !important;
}
/* UNIFORMITÉ DES FONDS EN CLAIR (retour Cédric 2026-07-10) : même liquid glass que
le dashboard sur TOUTES les pages consultant. Double-classe + [data-theme] pour
battre le body #F4F7F8 de la page /profile (html body.hub-profile.hub-profile,
spec 0,2,2, rendu après le thème). Le main.hub-cgp-home devient transparent
en clair : le dégradé FIXE du body sert partout (aucune couture au scroll). */
html[data-theme="light"] body.hub-consultant.hub-consultant{
background:
radial-gradient(900px 640px at 88% -6%, rgba(34,180,175,.10), transparent 58%),
linear-gradient(145deg,#d2e8eb 0%,#e6edf4 35%,#fad6e6 65%,#d6eaec 100%) !important;
background-attachment:fixed !important;
}
html[data-theme="light"] body.hub-consultant main.hub-cgp-home{
background:transparent !important;
}
html[data-theme="dark"] body.hub-consultant{
--rail-hover:rgba(255,255,255,.06);
--rail-caret:var(--ink-dim);
background:
radial-gradient(1100px 700px at 84% -8%, rgba(34,180,175,.14), transparent 55%),
linear-gradient(180deg,#04464c 0%,#022b30 42%,#011c20 100%) !important;
background-attachment:fixed !important;
}
/* ===== DESKTOP (≥992px) : la manchette REMPLACE le header horizontal ===== */
/* Réserve de contenu = gap + rail + gap (repliée / épinglée). */
html body.hub-consultant{ --content-reserve:calc(var(--rail-gap)*2 + var(--rail-c)); }
html body.hub-consultant.hub-pinned{ --content-reserve:calc(var(--rail-gap)*2 + var(--rail-w)); }
@media (min-width:992px){
html body.hub-consultant .hub-header{ display:none !important; }
/* PADDING (pas margin !) : les fonds pleine page restent bord à bord SOUS le rail
flottant ; seul le contenu est décalé. Un margin fausse le hack full-bleed
(margin-left:calc(50% - 50vw)) des pages type dashboard → couture de fond à
gauche + débordement à droite (bug vu par Cédric, 2026-07-10). */
/* PADDING DROIT ADAPTATIF (anti-« trou », Cédric 2026-07-10) : sur grand écran il
égale la réserve → le contenu (wrap max-width ~1180, margin:auto) reste centré
VIEWPORT et NE BOUGE PAS quand on épingle (le rail flotte dans la marge
naturelle) ; sur petit écran il retombe à --rail-gap → le contenu garde le
maximum de place. */
html body.hub-consultant #mainContent{
margin-left:0 !important;
padding-left:var(--content-reserve) !important;
padding-right:max(var(--rail-gap), min(var(--content-reserve), calc(100vw - var(--content-reserve) - 1180px))) !important;
transition:padding .18s ease;
}
/* Pages full-bleed (dashboard consultant) : on neutralise leur hack 50%-50vw
(calé sur un conteneur CENTRÉ, faux avec une réserve asymétrique) et on
re-décale leur contenu par padding. Fond bord à bord garanti. */
html body.hub-consultant main.hub-cgp-home{
width:100vw !important;
margin-left:calc(-1 * var(--content-reserve)) !important;
padding-left:var(--content-reserve) !important;
padding-right:max(var(--rail-gap), min(var(--content-reserve), calc(100vw - var(--content-reserve) - 1180px))) !important;
}
/* Tab bar / feuille : desktop uniquement rail. */
html body.hub-consultant .hub-tabbar,
html body.hub-consultant .hub-sheet,
html body.hub-consultant .hub-sheet-backdrop{ display:none !important; }
}
/* ---- Rail FLOTTANT (colonne détachée des bords, coins arrondis, ombre) ---- */
/* Hauteur AUTO (retour Cédric 2026-07-10) : le rail s'arrête après ses boutons au
lieu d'occuper toute la hauteur — il ne mord plus le footer sur les pages courtes.
max-height + scroll interne en garde-fou pour les tout petits viewports.
CENTRÉ sur l'axe vertical (retour Cédric 2026-07-10) : effet dock flottant. */
html body.hub-consultant .hub-rail{
position:fixed; left:var(--rail-gap); top:50%; bottom:auto;
transform:translateY(-50%);
width:var(--rail-c); max-height:calc(100vh - var(--rail-gap)*2); z-index:1041;
display:flex; flex-direction:column; padding:14px 12px; gap:6px;
background:var(--bg-2); border:1px solid var(--line); border-radius:22px;
box-shadow:0 26px 64px -28px rgba(3,83,90,.5), 0 8px 24px -14px rgba(3,83,90,.28);
overflow-y:auto; overflow-x:hidden; transition:width .18s ease;
}
html[data-theme="dark"] body.hub-consultant .hub-rail{
box-shadow:0 26px 64px -26px rgba(0,0,0,.7), 0 10px 26px -14px rgba(0,0,0,.5);
}
/* Déploiement : survol (overlay) OU cascade ouverte OU épinglé → les titres apparaissent. */
html body.hub-consultant .hub-rail:hover,
html body.hub-consultant .hub-rail.is-open,
html body.hub-consultant.hub-pinned .hub-rail{ width:var(--rail-w); }
html body.hub-consultant .hub-rail-top{
position:relative; display:flex; align-items:center; gap:8px;
padding:2px 4px 10px; min-height:48px;
}
/* gap:0 OBLIGATOIRE : les logos pliés font 0px de large mais un gap>0 compterait
quand même dans le flex centré → icône décalée de 5px (retour Cédric 2026-07-10). */
html body.hub-consultant .hub-rail-brand{
flex:1 1 auto; display:flex; align-items:center; justify-content:center;
gap:0; text-decoration:none; min-width:0;
}
/* Logo charte Mariam — RÉDUIT : icône ronde en 2 CALQUES (retour Cédric 2026-07-10 :
à 180° le « up » se lisait « dn ») → seuls les CERCLES tournent, le « up » reste
droit. Calques générés par scripts/split_sigle_layers.py depuis la charte.
DÉPLOYÉ : logo entier (couleur en clair, blanc en sombre). */
html body.hub-consultant .hub-rail-logo-icon{
position:relative; flex:0 0 44px; width:44px; height:44px;
filter:drop-shadow(0 6px 14px rgba(3,83,90,.25));
transition:opacity .14s ease; overflow:hidden;
}
html body.hub-consultant .hub-rail-logo-icon img{
position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
}
html body.hub-consultant .hub-logo-circles{ animation:hub-spin 45s linear infinite; }
@keyframes hub-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
html body.hub-consultant .hub-logo-circles{ animation:none; }
}
html body.hub-consultant .hub-rail-logo-full{
height:44px; width:auto; max-width:0; opacity:0; overflow:hidden;
transition:opacity .14s ease, max-width .18s ease;
}
/* Déployé (survol / cascade / épinglé) : le logo entier remplace l'icône ronde.
animation:none pendant le déploiement (icône invisible) → à la refermeture,
l'animation redémarre et la rotation REPART DE ZÉRO (demande Cédric). */
html body.hub-consultant .hub-rail:hover .hub-rail-logo-icon,
html body.hub-consultant .hub-rail.is-open .hub-rail-logo-icon,
html body.hub-consultant.hub-pinned .hub-rail .hub-rail-logo-icon{
flex-basis:0; width:0; opacity:0;
}
html body.hub-consultant .hub-rail:hover .hub-logo-circles,
html body.hub-consultant .hub-rail.is-open .hub-logo-circles,
html body.hub-consultant.hub-pinned .hub-rail .hub-logo-circles{
animation:none; /* refermeture → la rotation repart de zéro (demande Cédric) */
}
html body.hub-consultant .hub-rail:hover .hub-rail-logo-full,
html body.hub-consultant .hub-rail.is-open .hub-rail-logo-full,
html body.hub-consultant.hub-pinned .hub-rail .hub-rail-logo-full{ max-width:160px; opacity:1; }
/* Variante par thème : couleur en clair, blanche en sombre. */
html body.hub-consultant .hub-logo-dark{ display:none; }
html[data-theme="dark"] body.hub-consultant .hub-logo-light{ display:none; }
html[data-theme="dark"] body.hub-consultant .hub-logo-dark{ display:block; }
/* Bouton épingler : discret, apparaît une fois le rail déployé. */
html body.hub-consultant .hub-rail-pin{
position:absolute; right:0; top:50%; transform:translateY(-50%);
width:30px; height:30px; border:0; border-radius:9px; cursor:pointer;
background:transparent; color:var(--ink-dim); display:grid; place-items:center;
opacity:0; transition:opacity .15s, background .15s, color .15s;
}
html body.hub-consultant .hub-rail:hover .hub-rail-pin,
html body.hub-consultant .hub-rail.is-open .hub-rail-pin,
html body.hub-consultant.hub-pinned .hub-rail .hub-rail-pin{ opacity:1; }
html body.hub-consultant .hub-rail-pin:hover{ background:var(--rail-hover); color:var(--ink); }
html body.hub-consultant .hub-rail-pin[aria-pressed="true"]{ color:var(--lagoon); }
html body.hub-consultant .hub-rail-pin svg{ width:18px; height:18px; }
html body.hub-consultant .hub-rail-nav{ display:flex; flex-direction:column; gap:3px; }
html body.hub-consultant .hub-rail-item{
position:relative; display:flex; align-items:center; gap:12px; width:100%;
padding:10px 12px; border-radius:12px; border:0; background:transparent; cursor:pointer;
color:var(--ink-2); font:500 .92rem/1.1 var(--font-b); text-align:left; text-decoration:none;
white-space:nowrap; transition:background .15s, color .15s;
}
html body.hub-consultant .hub-rail-item:hover{ background:var(--rail-hover); color:var(--ink); }
html body.hub-consultant .hub-rail-item.is-active{ background:var(--lagoon); color:#ffffff; }
html body.hub-consultant .hub-rail-ic{ flex:0 0 22px; width:22px; height:22px; display:inline-flex; }
html body.hub-consultant .hub-rail-ic svg{ width:22px; height:22px; display:block; }
html body.hub-consultant .hub-rail-caret{ flex:0 0 auto; margin-left:auto; width:16px; height:16px; color:var(--rail-caret); display:inline-flex; }
html body.hub-consultant .hub-rail-caret svg{ width:16px; height:16px; transition:transform .18s; }
html body.hub-consultant #hub-monespace-btn[aria-expanded="true"] .hub-rail-caret svg{ transform:rotate(90deg); }
html body.hub-consultant #hub-monespace-btn.is-active .hub-rail-caret,
html body.hub-consultant .hub-rail-item.is-active .hub-rail-caret{ color:rgba(255,255,255,.85); }
/* Libellés : masqués quand le rail est replié, révélés au déploiement. */
html body.hub-consultant .hub-rail-label{
opacity:0; max-width:0; overflow:hidden; white-space:nowrap;
transition:opacity .14s ease, max-width .18s ease;
}
html body.hub-consultant .hub-rail:hover .hub-rail-label,
html body.hub-consultant .hub-rail.is-open .hub-rail-label,
html body.hub-consultant.hub-pinned .hub-rail .hub-rail-label{ opacity:1; max-width:170px; }
html body.hub-consultant .hub-rail-foot{
margin-top:auto; display:flex; flex-direction:column; gap:3px;
padding-top:12px; border-top:1px solid var(--line);
}
html body.hub-consultant .hub-rail-out{ color:var(--rose); }
html body.hub-consultant .hub-rail-out:hover{ background:rgba(230,25,117,.09); color:var(--rose); }
/* ---- Sous-panneau cascade « Mon espace » (desktop) ---- */
html body.hub-consultant .hub-subpanel{
position:fixed; top:88px; left:calc(var(--rail-gap) + var(--rail-w) + 10px); z-index:1042;
width:288px; max-height:calc(100vh - 120px); overflow:auto;
background:var(--bg-2); border:1px solid var(--line); border-radius:16px;
box-shadow:var(--shadow-card, 0 20px 44px -22px rgba(3,83,90,.5));
padding:10px; display:flex; flex-direction:column; gap:2px;
animation:hub-subpanel-in .16s ease;
}
/* CRITIQUE : display:flex ci-dessus bat l'UA [hidden]{display:none} → il FAUT restaurer
explicitement le masquage, sinon la cascade ne se ferme jamais visuellement. */
html body.hub-consultant .hub-subpanel[hidden]{ display:none !important; }
@keyframes hub-subpanel-in{ from{ opacity:0; transform:translateX(-6px);} to{ opacity:1; transform:none;} }
html body.hub-consultant .hub-subpanel-head{
display:flex; align-items:center; justify-content:space-between;
padding:4px 8px 8px; margin-bottom:2px; border-bottom:1px solid var(--line);
}
html body.hub-consultant .hub-subpanel-title{ font:800 .96rem/1 var(--font-d); color:var(--ink); }
html body.hub-consultant .hub-subpanel-close{
width:28px; height:28px; border:0; border-radius:8px; cursor:pointer;
background:transparent; color:var(--ink-dim); display:grid; place-items:center;
}
html body.hub-consultant .hub-subpanel-close:hover{ background:var(--rail-hover); color:var(--ink); }
/* ---- Sous-items (partagés cascade + feuille) ---- */
html body.hub-consultant .hub-sub-item{
display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:11px;
color:var(--ink-2); font:500 .92rem/1.15 var(--font-b); text-decoration:none; cursor:pointer;
transition:background .15s, color .15s;
}
html body.hub-consultant a.hub-sub-item:hover{ background:var(--rail-hover); color:var(--ink); }
html body.hub-consultant .hub-sub-item.is-active{ background:var(--lagoon); color:#fff; }
html body.hub-consultant .hub-sub-ic{ flex:0 0 20px; width:20px; height:20px; display:inline-flex; color:var(--emerald); }
html body.hub-consultant .hub-sub-ic svg{ width:20px; height:20px; }
html body.hub-consultant .hub-sub-item.is-active .hub-sub-ic{ color:#fff; }
html body.hub-consultant .hub-sub-label{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* États bientôt / plus tard : atténués + badge, non cliquables. */
html body.hub-consultant .hub-sub-item.is-soon,
html body.hub-consultant .hub-sub-item.is-later{ cursor:default; color:var(--ink-dim); }
html body.hub-consultant .hub-sub-item.is-soon .hub-sub-ic,
html body.hub-consultant .hub-sub-item.is-later .hub-sub-ic{ color:var(--ink-dim); opacity:.7; }
html body.hub-consultant .hub-sub-badge{
flex:0 0 auto; font:700 .64rem/1 var(--font-b); letter-spacing:.04em; text-transform:uppercase;
padding:4px 8px; border-radius:999px; background:var(--line); color:var(--ink-dim);
}
html body.hub-consultant .hub-sub-item.is-soon .hub-sub-badge{ background:rgba(34,180,175,.16); color:var(--emerald); }
/* ===== MOBILE (<992px) : tab bar en bas + bottom sheet ===== */
@media (max-width:991.98px){
html body.hub-consultant .hub-rail,
html body.hub-consultant .hub-subpanel{ display:none !important; }
html body.hub-consultant #mainContent{ margin-left:0 !important; padding-left:0 !important; }
html body.hub-consultant{ padding-bottom:92px; } /* place pour la tab bar flottante */
/* Barre d'onglets FLOTTANTE (détachée du bas, arrondie, ombrée). */
html body.hub-consultant .hub-tabbar{
position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px));
z-index:1041; height:62px;
display:flex; align-items:stretch; justify-content:space-around;
background:var(--bg-2); border:1px solid var(--line); border-radius:20px;
box-shadow:0 16px 40px -18px rgba(3,83,90,.5);
padding:6px 6px;
}
html[data-theme="dark"] body.hub-consultant .hub-tabbar{ box-shadow:0 16px 40px -16px rgba(0,0,0,.65); }
html body.hub-consultant .hub-tab{
flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
border:0; background:transparent; cursor:pointer; text-decoration:none;
color:var(--ink-dim); font:600 .64rem/1 var(--font-b); padding:4px 2px;
}
html body.hub-consultant .hub-tab.is-active{ color:var(--emerald); }
html body.hub-consultant .hub-tab-ic{ width:23px; height:23px; display:inline-flex; }
html body.hub-consultant .hub-tab-ic svg{ width:23px; height:23px; }
html body.hub-consultant .hub-tab-label{ text-align:center; max-width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html body.hub-consultant .hub-sheet-backdrop{
position:fixed; inset:0; z-index:1050; background:rgba(4,28,32,.45); backdrop-filter:blur(2px);
}
html body.hub-consultant .hub-sheet{
position:fixed; left:0; right:0; bottom:0; z-index:1051;
background:var(--bg-2); border-radius:22px 22px 0 0; border-top:1px solid var(--line);
box-shadow:0 -18px 50px -20px rgba(0,0,0,.5);
padding:10px 14px calc(18px + env(safe-area-inset-bottom, 0px));
transform:translateY(100%); transition:transform .24s cubic-bezier(.22,1,.36,1);
max-height:80vh; overflow:auto;
}
html body.hub-consultant .hub-sheet.is-open{ transform:translateY(0); }
html body.hub-consultant .hub-sheet-grab{
width:44px; height:5px; border-radius:999px; background:var(--line-2); margin:4px auto 8px;
}
html body.hub-consultant .hub-sheet-head{
display:flex; align-items:center; justify-content:space-between; padding:2px 4px 10px; border-bottom:1px solid var(--line);
}
html body.hub-consultant .hub-sheet-title{ font:800 1.05rem/1 var(--font-d); color:var(--ink); }
html body.hub-consultant .hub-sheet-close{
width:32px; height:32px; border:0; border-radius:9px; background:transparent; color:var(--ink-dim);
display:grid; place-items:center; cursor:pointer;
}
html body.hub-consultant .hub-sheet-close:hover{ background:var(--rail-hover); color:var(--ink); }
html body.hub-consultant .hub-sheet-list{ display:flex; flex-direction:column; gap:2px; padding:8px 0; }
html body.hub-consultant .hub-sheet-foot{ display:flex; flex-direction:column; gap:2px; padding-top:8px; border-top:1px solid var(--line); }
html body.hub-consultant .hub-sheet-action{ width:100%; border:0; background:transparent; text-align:left; }
html body.hub-consultant .hub-sheet-out{ color:var(--rose); }
html body.hub-consultant .hub-sheet-out .hub-sub-ic{ color:var(--rose); }
}
/* ---- HUB-CHROME-HARDEN — le châssis flottant SURVIT aux règles larges des
pages. Cas réel (/profile, 2026-07-10) : le Footer y pose
body.hub-profile > * { position:relative; z-index:1 !important } → le rail
perdait son fixed, retombait DANS LE FLUX et créait 416px de vide en haut.
Classe doublée = spécificité (0,3,2) > (0,2,2) du Footer + !important. ---- */
html body.hub-consultant .hub-rail.hub-rail{ position:fixed !important; z-index:1041 !important; }
html body.hub-consultant .hub-subpanel.hub-subpanel{ position:fixed !important; z-index:1042 !important; }
html body.hub-consultant .hub-subpanel.hub-subpanel[hidden]{ display:none !important; }
@media (max-width:991.98px){
html body.hub-consultant .hub-rail.hub-rail,
html body.hub-consultant .hub-subpanel.hub-subpanel{ display:none !important; }
html body.hub-consultant .hub-tabbar.hub-tabbar{ position:fixed !important; z-index:1041 !important; }
html body.hub-consultant .hub-sheet-backdrop.hub-sheet-backdrop{ position:fixed !important; z-index:1050 !important; }
html body.hub-consultant .hub-sheet.hub-sheet{ position:fixed !important; z-index:1051 !important; }
}
/* ---- HUB-SHELL-END ---- */
/* ============================================================================
HUB-DARK-CGP-HOME — couche SOMBRE du dashboard consultant (page accueil CGP).
Le CSS clair de la page (Accueil customcss) reste INTOUCHÉ : on ne fait que
surcharger, double-scopé [data-theme="dark"] + .hub-consultant → inerte pour
candidats / public / mode clair. La page consomme des variables --hub-* (:root)
pour ses textes → on les redéfinit ici, portée .hub-cgp-home uniquement (le
footer et le reste du site ne sont PAS affectés).
============================================================================ */
html[data-theme="dark"] body.hub-consultant .hub-cgp-home{
/* Variables texte / lignes — la majorité des composants bascule automatiquement */
--hub-sarcelle:#ecfbfb; /* titres & noms (petrol foncé en clair) */
--hub-ink:#ecfbfb;
--hub-gris-text:#8fb6b8;
--hub-line:rgba(255,255,255,.12);
--hub-emeraude:#22B4AF; /* texte émeraude peu lisible sur sombre → lagon */
--hub-bg:#04464c;
/* Les dégradés avatars/bannière référencent --hub-sarcelle → on les fige
sur les couleurs d'origine pour qu'ils ne deviennent pas blancs. */
--hub-grad-1:linear-gradient(180deg,#03535A,#017981);
--hub-grad-2:linear-gradient(180deg,#03535A,#22B4AF);
/* Fond pleine page (gradient charte Mariam sombre) */
background:linear-gradient(180deg,#04464c 0%,#022b30 42%,#011c20 100%);
}
/* Surfaces (cards) : blanc .92 → verre sombre */
html[data-theme="dark"] body.hub-consultant .hub-cgp-identity,
html[data-theme="dark"] body.hub-consultant .hub-cgp-card,
html[data-theme="dark"] body.hub-consultant .hub-cgp-parrain,
html[data-theme="dark"] body.hub-consultant .hub-cgp-filleuls,
html[data-theme="dark"] body.hub-consultant .hub-cgp-candidat{
background:rgba(2,43,48,.88);
border-color:rgba(255,255,255,.10);
box-shadow:0 18px 44px -22px rgba(0,0,0,.6);
}
/* Sous-surfaces gris clair → voile blanc léger */
html[data-theme="dark"] body.hub-consultant .hub-cgp-qualif-card,
html[data-theme="dark"] body.hub-consultant .hub-cgp-habil{ background:rgba(255,255,255,.05); }
html[data-theme="dark"] body.hub-consultant .hub-cgp-filleul:hover{ background:rgba(255,255,255,.05); }
html[data-theme="dark"] body.hub-consultant .hub-cgp-candidats__empty,
html[data-theme="dark"] body.hub-consultant .hub-cgp-soon{ background:rgba(255,255,255,.05); }
html[data-theme="dark"] body.hub-consultant .hub-cgp-soon:hover{ background:rgba(255,255,255,.09); }
/* Boutons pilule à fond blanc → surface sombre (le texte suit --hub-sarcelle) */
html[data-theme="dark"] body.hub-consultant .hub-cgp-cta,
html[data-theme="dark"] body.hub-consultant .hub-cgp-parrain__cta{ background:rgba(255,255,255,.05); }
/* Stepper candidats : points / barres clairs → sombres */
html[data-theme="dark"] body.hub-consultant .hub-cgp-step__dot{ background:#0a3a40; border-color:rgba(255,255,255,.28); }
html[data-theme="dark"] body.hub-consultant .hub-cgp-step__dot::after{ background:#022b30; }
html[data-theme="dark"] body.hub-consultant .hub-cgp-step__bar{ background:rgba(255,255,255,.16); }
/* Hexagone habilitation non validée : gris clair → gris sombre */
html[data-theme="dark"] body.hub-consultant .hub-cgp-habil--invalid .hub-cgp-habil__hex{ background:#41585b; }
/* ---- HUB-DARK-CGP-HOME-END ---- */
/* ============================================================================
HUB-DARK-PROFILE — couche SOMBRE de la page /profile (Paramètres, design mai
2026). Le CSS clair de la page reste INTOUCHÉ : surcharge double-scopée
[data-theme="dark"] + .hub-consultant → inerte en clair, pour les candidats
et sur les pages sacrées. Le fond body bascule déjà via HUB-SHELL (le
body{#F4F7F8 !important} du CSS profil perd en spécificité) ; ici on traite
les surfaces et textes forcés en clair par les règles de mai.
============================================================================ */
/* Fond de page : le Footer de mai repeint le body en clair via
html body.hub-profile.hub-profile (0,2,2 !important) rendu APRÈS le
thème → à égalité il gagne par l'ordre. Classe doublée = (0,3,2). */
html[data-theme="dark"] body.hub-consultant.hub-consultant{
background:
radial-gradient(1100px 700px at 84% -8%, rgba(34,180,175,.14), transparent 55%),
linear-gradient(180deg,#04464c 0%,#022b30 42%,#011c20 100%) !important;
background-attachment:fixed !important;
}
/* Cartes formulaire (glass blanc .92 → verre sombre) */
html[data-theme="dark"] body.hub-consultant .form-horizontal,
html[data-theme="dark"] body.hub-consultant .entityform,
html[data-theme="dark"] body.hub-consultant .crmEntityFormView,
html[data-theme="dark"] body.hub-consultant form#user-profile,
html[data-theme="dark"] body.hub-consultant form.user-profile,
html[data-theme="dark"] body.hub-consultant div[id$="_MarketingOptionsPanel"],
html[data-theme="dark"] body.hub-consultant div[id*="MarketingOptions"]{
background:rgba(2,43,48,.88) !important;
border-color:rgba(255,255,255,.10) !important;
box-shadow:0 18px 44px -22px rgba(0,0,0,.6) !important;
}
/* Titres, légendes, labels (sarcelle #03535A → encre claire) */
html[data-theme="dark"] body.hub-consultant form h1,
html[data-theme="dark"] body.hub-consultant form h2,
html[data-theme="dark"] body.hub-consultant form h3,
html[data-theme="dark"] body.hub-consultant form h4,
html[data-theme="dark"] body.hub-consultant form legend,
html[data-theme="dark"] body.hub-consultant .entityform legend,
html[data-theme="dark"] body.hub-consultant .crmEntityFormView legend,
html[data-theme="dark"] body.hub-consultant div[id$="_MarketingOptionsPanel"] legend,
html[data-theme="dark"] body.hub-consultant div[id*="MarketingOptions"] .hub-legend-title{
color:#ecfbfb !important;
}
html[data-theme="dark"] body.hub-consultant form label,
html[data-theme="dark"] body.hub-consultant form .control-label,
html[data-theme="dark"] body.hub-consultant form .info,
html[data-theme="dark"] body.hub-consultant .entityform label,
html[data-theme="dark"] body.hub-consultant .crmEntityFormView label,
html[data-theme="dark"] body.hub-consultant .crmEntityFormView .info,
html[data-theme="dark"] body.hub-consultant div[id$="_MarketingOptionsPanel"] label,
html[data-theme="dark"] body.hub-consultant div[id*="MarketingOptions"] .hub-legend-helper{
color:#bfe0e1 !important;
}
/* Inputs : blanc → surface sombre, texte clair */
html[data-theme="dark"] body.hub-consultant form .form-control,
html[data-theme="dark"] body.hub-consultant form input[type="text"],
html[data-theme="dark"] body.hub-consultant form input[type="email"],
html[data-theme="dark"] body.hub-consultant form input[type="tel"],
html[data-theme="dark"] body.hub-consultant form select,
html[data-theme="dark"] body.hub-consultant form textarea{
background:rgba(255,255,255,.06) !important;
border-color:rgba(255,255,255,.16) !important;
color:#ecfbfb !important;
}
html[data-theme="dark"] body.hub-consultant form input[readonly],
html[data-theme="dark"] body.hub-consultant form input:disabled{
background:rgba(255,255,255,.03) !important;
color:#8fb6b8 !important;
}
/* Placeholders : le bundle MS preform/pcf force un placeholder NOIR opaque
(règle cross-origin, non inspectable) → invisible sur les inputs sombres.
Scopé large (toute page consultant en sombre), pas seulement /profile. */
html[data-theme="dark"] body.hub-consultant input::placeholder,
html[data-theme="dark"] body.hub-consultant textarea::placeholder{
color:#8fb6b8 !important;
opacity:1 !important;
}
/* Fil d'Ariane : l'item actif sarcelle → clair */
html[data-theme="dark"] body.hub-consultant .breadcrumb .active,
html[data-theme="dark"] body.hub-consultant ol.breadcrumb li.active,
html[data-theme="dark"] body.hub-consultant ol.breadcrumb li:last-child{ color:#ecfbfb !important; }
/* Carte Sécurité relocalisée (blanc .85 → verre sombre) */
html[data-theme="dark"] body.hub-consultant .hub-profile-security-wrap .card.nav-profile{
background:rgba(2,43,48,.88) !important;
border-color:rgba(255,255,255,.12) !important;
box-shadow:0 18px 44px -22px rgba(0,0,0,.6) !important;
}
html[data-theme="dark"] body.hub-consultant .hub-profile-security-wrap .card.nav-profile .card-header{
background:rgba(255,255,255,.04) !important;
border-bottom-color:rgba(255,255,255,.12) !important;
}
html[data-theme="dark"] body.hub-consultant .hub-profile-security-wrap .card.nav-profile .card-title,
html[data-theme="dark"] body.hub-consultant .hub-profile-security-wrap .card.nav-profile .list-group-item{
color:#ecfbfb !important;
}
html[data-theme="dark"] body.hub-consultant .hub-profile-security-wrap .card.nav-profile .list-group-item:not(:last-child){
border-right-color:rgba(255,255,255,.12) !important;
}
html[data-theme="dark"] body.hub-consultant .hub-profile-security-wrap .card.nav-profile .list-group-item:hover{
background:rgba(255,255,255,.06) !important;
}
/* Boutons secondaires + bouton fichier (blanc/sarcelle → surface sombre/encre claire) */
html[data-theme="dark"] body.hub-consultant form .btn-default,
html[data-theme="dark"] body.hub-consultant form .btn-secondary,
html[data-theme="dark"] body.hub-consultant form a.btn-default,
html[data-theme="dark"] body.hub-consultant form input[type="file"]::file-selector-button{
background:rgba(255,255,255,.06) !important;
color:#ecfbfb !important;
border-color:#22B4AF !important;
}
/* Zone d'actions : liseré clair */
html[data-theme="dark"] body.hub-consultant form .actions,
html[data-theme="dark"] body.hub-consultant .actions{ border-top-color:rgba(255,255,255,.12) !important; }
/* Liens du contenu (émeraude foncé → lagon lisible) */
html[data-theme="dark"] body.hub-consultant main a:not(.btn):not(.button1):not(.hub-shell-cta),
html[data-theme="dark"] body.hub-consultant .entityform a:not(.btn){ color:#22B4AF !important; }
/* ---- HUB-DARK-PROFILE-END ---- */
/* ============================================================================
HUB-FOOTER-HEADINGS — titres du footer (Navigation / Contact / Informations
légales) hérités en sarcelle #03535A sur le fond sombre #1a2e33 du footer →
illisibles dans LES DEUX modes (aucune règle explicite ne les colore : la
règle du snippet Footer est probablement au-delà de la troncature ~12k).
Lagon = même teinte que leur soulignement. Scopé hub-consultant : pages
candidat et sacrées intouchées.
============================================================================ */
body.hub-consultant footer .hub-footer-heading{ color:#22B4AF !important; }
/* ============================================================================
HUB-PARR-CONSULTANT — /Parrainage-CGP sous la charte (2026-07-10 soir).
1) La section .hub-form-section peignait son propre gradient CLAIR codé en
dur à partir de x=104 → couture visible avec le fond unifié du body dans
les 2 modes (rail « hors page » dans la gouttière) et île claire en mode
sombre. Fix : section transparente + orbes ::before/::after off, le fond
unifié (clair ET sombre) devient la seule surface, comme les autres pages.
2) Le CSS formulaires du Footer impose #EntityFormPanel input/fieldset en
blanc via un ID + !important (spec 1,0,1) qui BAT la couche sombre
générique `body.hub-consultant form .form-control` (0,3,2). Fix : mêmes
tokens sombres ré-ancrés sur #EntityFormPanel (spec ≥ 1,1,1).
⚠️ input attrape aussi le bouton Envoyer ()
→ exclusions :not() obligatoires sinon il perd son rose plein.
Scopé body.hub-consultant : pages candidat/anonymes/sacrées intouchées
(/Adhesion-Unique candidat garde son .hub-form-section clair d'origine).
============================================================================ */
html body.hub-consultant.hub-consultant .hub-form-section{ background:transparent !important; }
html body.hub-consultant.hub-consultant .hub-form-section::before,
html body.hub-consultant.hub-consultant .hub-form-section::after{ display:none !important; }
/* Carte formulaire + entête en verre sombre */
html[data-theme="dark"] body.hub-consultant .hub-card.hub-form-shell{
background:rgba(13,42,48,.72) !important;
border-color:rgba(255,255,255,.12) !important;
box-shadow:0 18px 44px -22px rgba(0,0,0,.6) !important;
}
html[data-theme="dark"] body.hub-consultant .hub-form-head h2{ color:#7fd4d0 !important; }
html[data-theme="dark"] body.hub-consultant .hub-form-head p{ color:#8fb6b8 !important; }
html[data-theme="dark"] body.hub-consultant .hub-form-head{ border-bottom-color:rgba(255,255,255,.12) !important; }
/* Panneau + libellés du basic form */
html[data-theme="dark"] body.hub-consultant #EntityFormPanel fieldset{
background:rgba(255,255,255,.04) !important;
border-color:rgba(255,255,255,.12) !important;
}
html[data-theme="dark"] body.hub-consultant #EntityFormPanel legend,
html[data-theme="dark"] body.hub-consultant #EntityFormPanel h3{
color:#7fd4d0 !important;
border-color:rgba(255,255,255,.12) !important;
}
html[data-theme="dark"] body.hub-consultant #EntityFormPanel label{ color:#bfe0e1 !important; }
/* Inputs (hors boutons !) : blanc .92 → surface sombre */
html[data-theme="dark"] body.hub-consultant #EntityFormPanel input:not([type="submit"]):not([type="button"]):not(.btn),
html[data-theme="dark"] body.hub-consultant #EntityFormPanel select,
html[data-theme="dark"] body.hub-consultant #EntityFormPanel textarea{
background:rgba(255,255,255,.06) !important;
border-color:rgba(255,255,255,.16) !important;
color:#ecfbfb !important;
}
html[data-theme="dark"] body.hub-consultant #EntityFormPanel input[readonly]:not(.btn),
html[data-theme="dark"] body.hub-consultant #EntityFormPanel input:disabled:not(.btn){
background:rgba(255,255,255,.03) !important;
color:#8fb6b8 !important;
}
/* Legend dans l'ENCOCHE de la bordure du fieldset (comportement natif