.
Three.js complet réservé au Cockpit. Conteneurs rendus transparents pour que
les auroras transparaissent derrière le contenu (cartes en verre). */
.upme-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: #FAFAFA; }
.upme-bg::before, .upme-bg::after { content: ""; position: absolute; border-radius: 50%; filter: blur(180px); }
.upme-bg::before { width: 65vw; height: 65vw; background: var(--up-aurora-1); top: -10vw; left: 30vw; opacity: .30; animation: upmeDrift1 75s ease-in-out infinite, upmePulse1 14s ease-in-out infinite; }
.upme-bg::after { width: 55vw; height: 55vw; background: var(--up-aurora-2); bottom: -10vw; left: -5vw; opacity: .28; animation: upmeDrift2 90s ease-in-out infinite, upmePulse2 18s ease-in-out infinite; }
.upme-bg > .grid { position: absolute; inset: 0; opacity: .6;
background-image: linear-gradient(rgba(120,110,170,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(120,110,170,.05) 1px, transparent 1px);
background-size: 48px 48px;
-webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000, transparent 85%);
mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000, transparent 85%); }
@keyframes upmeDrift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-6vw,8vh)} }
@keyframes upmeDrift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(5vw,-5vh)} }
@keyframes upmePulse1 { 0%,100%{opacity:.32} 50%{opacity:.42} }
@keyframes upmePulse2 { 0%,100%{opacity:.38} 50%{opacity:.46} }
@media (prefers-reduced-motion: reduce){ .upme-bg::before,.upme-bg::after{ animation: none; } }
/* conteneurs transparents → le fond vivant transparaît derrière le contenu */
body.flowos-ui-v2,
body.flowos-ui-v2 #app-container,
body.flowos-ui-v2 #layout-wrapper,
body.flowos-ui-v2 .main-content,
body.flowos-ui-v2 .page-content { background: transparent; }
/* — CARTES EN VERRE. Bootstrap pose le fond carte via --bs-card-bg/--vz-secondary-bg
(blanc solide), PAS --vz-card-bg → on force explicitement le verre ici (cette
règle charge après bootstrap/app.min → gagne sur l'égalité, sans !important). */
.card {
/* Bootstrap redéfinit --vz-card-bg:#fff LOCALEMENT sur .card (shadow du :root) →
on le redéfinit ICI, sur .card, pour imposer le verre (sinon var() relit le #fff local). */
--vz-card-bg: rgba(255,255,255,.62);
background: var(--vz-card-bg);
-webkit-backdrop-filter: blur(14px) saturate(1.3);
backdrop-filter: blur(14px) saturate(1.3);
border: 1px solid rgba(255,255,255,.5);
box-shadow: var(--vz-box-shadow), inset 0 1px 0 rgba(255,255,255,.4);
}
/* En-têtes de carte : SANS trait dur (le modèle .ag-head fond la teinte en
dégradé vertical, seamless). Les teintes Bootstrap plates (bg-*-subtle) sont
converties en dégradés comme le modèle (Tandem Agent A/B, etc.). */
.card-header { background: transparent; border-bottom: 0; }
.card-header.bg-primary-subtle { background: linear-gradient(180deg, rgba(99,102,241,.14), transparent) !important; }
.card-header.bg-warning-subtle { background: linear-gradient(180deg, rgba(194,130,12,.14), transparent) !important; }
.card-header.bg-success-subtle { background: linear-gradient(180deg, rgba(10,157,110,.13), transparent) !important; }
.card-header.bg-info-subtle { background: linear-gradient(180deg, rgba(37,99,235,.13), transparent) !important; }
.card-header.bg-light { background: transparent !important; }
/* ── Indicateurs emoji des lignes de tâches (énergie/cœur/humeur) → SOBRES.
Ce sont des emoji (🟢 💚 😌) : leur couleur est inhérente au glyphe, insensible
à `color`. La maquette utilise des icônes monochromes (#5b5872), pas des emoji
couleur. On les DÉSATURE (grayscale) pour coller au registre sobre.
NB : on perd le code-couleur d'énergie (vert/jaune/rouge → nuances de gris). */
.tl-row .badge.bg-light { filter: grayscale(.45); }
/* ── CONSIGNE handoff : entête compacte 56px (Velzon impose height:70px en dur
dans app.min.css). flowos-overrides charge après → on gagne sans !important. */
.navbar-header { height: var(--vz-header-height); min-height: var(--vz-header-height); }
/* ── CONSIGNE handoff : rouge réservé à l'urgent/destructif. Le bouton « Ajouter »
(création = non destructif) était en btn-danger (rouge plein) → repassé en indigo. */
.add-btn.btn-danger {
--vz-btn-bg: #6366F1; --vz-btn-border-color: #6366F1;
--vz-btn-hover-bg: #5457e6; --vz-btn-hover-border-color: #5457e6;
--vz-btn-active-bg: #5457e6; --vz-btn-active-border-color: #5457e6;
}
/* — BADGES DOMPTÉS : fond translucide + texte coloré (fini l'aplat saturé). */
.badge.bg-primary { background: rgba(99,102,241,.14) !important; color: #4f46e5 !important; }
.badge.bg-success { background: rgba(10,157,110,.13) !important; color: #0a8c62 !important; }
.badge.bg-info { background: rgba(37,99,235,.13) !important; color: #2563eb !important; }
.badge.bg-warning { background: rgba(191,139,28,.16) !important; color: #a8780f !important; }
.badge.bg-danger { background: rgba(224,73,47,.13) !important; color: #d23f23 !important; }
.badge.bg-secondary { background: rgba(120,110,170,.12) !important; color: #5b5872 !important; }
/* — BOUTONS : primaire indigo (ombre douce) + .btn-dark en pill (CTA façon site). */
.btn-primary { box-shadow: 0 6px 18px rgba(99,102,241,.28); }
.btn-dark { border-radius: 999px; }
/* — CHAMPS : focus indigo aligné au verre. */
.form-control:focus, .form-select:focus { border-color: var(--vz-primary); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
/* ── PHASE 3 (2026-06-14) — Topbar verre compacte (modèle : maquette l.112-126). */
#page-topbar {
background: var(--vz-header-bg);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
backdrop-filter: blur(16px) saturate(1.4);
border-bottom: 1px solid var(--vz-border-color);
box-shadow: none;
}
#page-topbar .app-search .form-control {
background: rgba(120,110,170,.07);
border: 0;
border-radius: 11px;
height: 38px;
}
/* le titre de page vit dans chaque .view-header (pas la page-title-box Velzon) →
on neutralise la rangée page-title-box au cas où un module l'utilise encore. */
.page-title-box { padding: 0 !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; }
/* ════════════════════════════════════════════════════════════════
PHASE 6 (2026-06-14) — MODE SOMBRE (sélecteurs). Valeurs = modèle
[data-theme=dark]. Les --vz (verre/sidebar/topbar/bordures) sont surchargés
dans tokens.css ; ici le fond vivant + le verre LOCAL de .card (que Bootstrap
redéfinit sur .card, donc à re-surcharger sur .card en dark). */
[data-theme="dark"] .upme-bg,
[data-bs-theme="dark"] .upme-bg { background: #0A0A0F; }
[data-theme="dark"] .upme-bg::before,
[data-bs-theme="dark"] .upme-bg::before { background: var(--up-aurora-1); opacity: .34; }
[data-theme="dark"] .upme-bg::after,
[data-bs-theme="dark"] .upme-bg::after { background: var(--up-aurora-2); opacity: .30; }
[data-theme="dark"] .card,
[data-bs-theme="dark"] .card {
--vz-card-bg: rgba(30,28,50,.6);
border-color: rgba(180,170,230,.10);
box-shadow: 0 8px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
}
/* item de menu actif en dark : dégradé + filet indigo clair (modèle --indigo2). */
[data-theme="dark"] .navbar-menu .navbar-nav .nav-link.active,
[data-bs-theme="dark"] .navbar-menu .navbar-nav .nav-link.active,
[data-theme="dark"] .sidebar-section-header.is-mega-trigger.active,
[data-bs-theme="dark"] .sidebar-section-header.is-mega-trigger.active {
background: linear-gradient(90deg, rgba(129,140,248,.22), rgba(129,140,248,.05));
}
/* ── Notes : catégories à la taille de la maquette (.cat = 13px). Les noms sont
en MAJUSCULES côté data → on descend à 12px pour égaler le rendu visuel de la
maquette (title-case 13px). Icône dossier réduite (moins épaisse que le glyphe
Remix par défaut). Scopé aux liens de catégorie Notes uniquement. */
a[data-cat-id] .mail-list-link { font-size: 12px; }
a[data-cat-id] .mail-list-link .ri-folder-3-line { font-size: 13px; }
/* ── Topbar 56px : recoller le contenu sous la barre. Velzon réservait ~94px de
padding-top (ancienne rangée breadcrumb) → 37px de vide avec la topbar à 56px.
On aligne sur la hauteur d'entête + petit espace. Sans !important pour laisser
gagner les overrides plein écran scopés (body.*-fullscreen). */
.page-content { padding-top: calc(var(--vz-header-height) + 12px); }
/* ── Notes : la zone de scroll de l'éditeur ne descendait plus jusqu'en bas.
notes.js pose un style INLINE `height: calc(100vh - 94px - 60px - 8px)` (=−162px)
figé sur l'ANCIEN layout (topbar 70 + footer 60). Depuis le reskin (topbar 56,
footer masqué, fav-bar 40px) il réserve ~50px de trop → gros vide en bas. CSS
!important bat l'inline. On recale sur le layout réel (header var + fav-bar).
Scopé `#view-notes` → le plein écran (#notes-focus-overlay) n'est PAS touché.
(2026-06-14) */
#view-notes.view { height: calc(100vh - var(--vz-header-height) - 52px) !important; }
#view-notes #notes-editor-shell { height: calc(100vh - var(--vz-header-height) - 64px) !important; }
/* ── Paul v2 (.coach-v2-shell) : conversation « trop étendue ». Les bulles sont
des .msg (pas .coach-msg !) avec déjà max-width:78% — MAIS 78% de la colonne
chat PLEINE (1fr du grid ≈ 1450px) = bulles ~1130px. La maquette Coach IA borne
d'abord une COLONNE centrée (.msgs-in 860px) PUIS applique 78%. On reproduit :
on centre le flux .chat-stream (+ le composer) dans une colonne 860px → les
bulles .msg gardent leur 78% (= 78% de 860, correct) et leur alignement
margin-auto (user à droite / bot à gauche), exactement comme le modèle. */
.coach-v2-shell .chat-stream { max-width: 860px; width: 100%; margin-left: auto; margin-right: auto; }
.coach-v2-shell:not(.chat-empty) .chat-input { max-width: 860px; width: 100%; margin-left: auto; margin-right: auto; }
/* ── Paul v2 : LE vrai fix. Les bulles .msg sont des BLOCS → elles s'étirent à
max-width:78% même pour un court "bonjour". La maquette dimensionne la bulle au
CONTENU. On force width:fit-content → la bulle prend la taille de son texte,
plafonnée à 78%, et reste alignée (user droite via margin-left:auto / bot gauche).
(La system-hint garde son max-width:100% centré, non touchée.) */
.coach-v2-shell .msg.user, .coach-v2-shell .msg.bot { width: fit-content; }
/* ── Paul v2 : convention chat universelle (ChatGPT/Claude) → SEUL l'utilisateur
a une bulle ; l'ASSISTANT est en texte brut (pas de fond, flush gauche). Avant :
deux grosses bulles. coach-v2.js injecte .msg.bot{background:#f1f3f6} au runtime
APRÈS ce fichier → !important pour l'emporter. */
.coach-v2-shell .msg.bot {
background: transparent !important;
padding-left: 0 !important;
padding-right: 0 !important;
border-radius: 0 !important;
}
/* ── Paul v2 — entête reproduite de la maquette Coach IA (.chead) : barre en VERRE
+ titre Fraunces 18px/500 (modèle .t). coach-v2.js injecte .chat-header{background:#fff}
au runtime APRÈS ce fichier → !important sur le fond. Le titre (h5, déjà Fraunces
via la règle globale) : mon sélecteur .coach-v2-shell .chat-header h5 est plus
spécifique → gagne sans !important. Toggle Perso/Business inchangé (vert = sens). */
.coach-v2-shell .chat-header {
background: rgba(255,255,255,.55) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.4);
backdrop-filter: blur(16px) saturate(1.4);
}
.coach-v2-shell .chat-header h5 { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
/* Correctif : le titre coach-v2.js (.coach-v2-shell .chat-header h5, 15px/600) a la
MÊME spécificité que mon override et s'injecte après → !important nécessaire. */
.coach-v2-shell .chat-header h5 { font-size: 18px !important; font-weight: 500 !important; letter-spacing: -.01em !important; }
/* ── Fond blanc retiré (demande Fabrice 2026-06-14) : coach-v2.js pose .chat-col,
.chat-input, .panel-col/.panel-header/.panel-tabs/.footer-stats en #fff / #f7f8fa
au runtime APRÈS ce fichier → !important pour transparentiser et laisser voir
l'aurora vivante de l'app. On NE touche PAS : le champ de saisie (.composer), les
cartes mémoire (.fact-card) ni les encarts colorés (.fact-pill/.auto-archived).
L'entête (.chat-header) garde son verre .55 (séparateur du haut). */
.coach-v2-shell,
.coach-v2-shell .chat-col,
.coach-v2-shell .chat-input,
.coach-v2-shell .panel-col,
.coach-v2-shell .panel-header,
.coach-v2-shell .panel-tabs,
.coach-v2-shell .footer-stats { background: transparent !important; }
/* ── Paul v2 — champ de saisie (.composer) : TRANSPARENT au repos (l'aurora
transparaît comme le reste du champ) → BLANC au focus (clic/écriture = surface
nette pour rédiger). coach-v2.js l.286 pose .composer{background:#fff} au runtime
APRÈS ce fichier → !important. La bordure (#d1d5db) reste pour délimiter le champ.
Fondu doux via transition. (2026-06-15) */
.coach-v2-shell .chat-input .composer {
background: transparent !important;
transition: background .18s ease, border-color .15s ease, box-shadow .15s ease !important;
}
.coach-v2-shell .chat-input .composer:focus-within {
background: #ffffff !important;
}
/* ── Compteurs de la barre de raccourcis (.upme-fav-badge) : domptés comme les
autres badges (translucide + texte coloré) — ils étaient en aplats Bootstrap
solides vifs, ce qui jurait avec le style sobre. bg-* Bootstrap est !important
→ !important requis ici aussi. */
.upme-fav-badge.bg-primary { background: rgba(99,102,241,.14) !important; color: #4f46e5 !important; }
.upme-fav-badge.bg-danger { background: rgba(224,73,47,.13) !important; color: #d23f23 !important; }
.upme-fav-badge.bg-warning { background: rgba(191,139,28,.16) !important; color: #a8780f !important; }
.upme-fav-badge.bg-success { background: rgba(10,157,110,.13) !important; color: #0a8c62 !important; }
.upme-fav-badge.bg-info { background: rgba(37,99,235,.13) !important; color: #2563eb !important; }
.upme-fav-badge.bg-secondary { background: rgba(120,110,170,.12) !important; color: #5b5872 !important; }
/* ── Footer (« 2026 Up·me ») masqué par la barre de raccourcis fixe (40px) :
on le remonte au-dessus de la barre pour qu'il redevienne visible. */
body.flowos-ui-v2 .footer { display: none; }
/* ── Mega panel « éclairci » : verre FROSTÉ flottant sur le fond vivant + backdrop
ADOUCI + cartes intérieures MATES (un seul niveau de verre = lisibilité).
Avant : panneau .62 SANS blur (kanban bave à travers = muddy) + cartes .62 (verre
sur verre) + backdrop navy .5 (sombre). */
/* Fond du méga-menu TRANSPARENT (comme les autres écrans) → l'aurora vivante
passe derrière, donc les cartes verre (var(--up-card-glass)) prennent la même
teinte frostée que sur le dashboard. Voile derrière allégé (était navy .28
= sombre → cartes paraissaient grises/blanches). (2026-06-14) */
:root { --upme-mega-overlay: rgba(247,246,252,.22); }
.sidebar-mega-panel {
background: transparent;
-webkit-backdrop-filter: blur(16px) saturate(1.4);
backdrop-filter: blur(16px) saturate(1.4);
}
/* Cartes du méga-menu = même verre translucide que les cartes du dashboard
(2026-06-14 : étaient blanc plein #fff = elles restaient blanches même sur
fond noir). Valeurs EXPLICITES (pas de var) pour zéro ambiguïté de cascade. */
.sidebar-mega-panel .mega-module-card {
background: var(--up-card-glass); /* MÊME token que .flowos-dashboard-view .card — pas de hardcode */
border: 1px solid rgba(255,255,255,.55);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
backdrop-filter: blur(18px) saturate(1.4);
}
.sidebar-mega-panel .mega-module-card:hover { border-color: var(--bs-primary); }
/* ── Notes : fond des panneaux TRANSPARENT (le fond vivant transparaît) SAUF
l'intérieur de l'éditeur (.ql-editor) qui reste blanc (sheet lisible).
Panneaux : .chat-leftsidebar (catégories + liste notes) + .user-chat (colonne éditeur). */
#view-notes .chat-leftsidebar,
#view-notes .user-chat { background: transparent !important; }
/* Surface d'écriture (.ql-editor) : TRANSPARENTE au repos (l'aurora transparaît,
le texte reste lisible) → BLANCHE au focus (clic/écriture = feuille nette),
comme le champ de Paul v2. :focus a une spécificité + haute que le repos →
l'emporte au clic. Fondu doux via transition. (2026-06-15) */
#view-notes #notes-quill-editor .ql-editor { background: transparent; transition: background .18s ease; }
/* transition:none à l'ENTRÉE du focus = passage au blanc INSTANTANÉ → pas de flash
aurora→blanc à l'ouverture d'une note (l'éditeur s'auto-focus). Le fondu .18s du
repos ne s'applique qu'à la SORTIE (blur) → retour transparent en douceur. */
#view-notes #notes-quill-editor .ql-editor:focus { background: #fff; transition: none; }
/* Champ TITRE (#notes-editor-title) : même schéma transparent→blanc au focus.
+ padding gauche 16px pour (a) ne plus coller le titre au bord et (b) l'aligner
sur le corps de note (.ql-editor a 15px). padding !important pour battre .p-0
(Bootstrap, padding:0!important) ; background bat .form-control via l'ID. (2026-06-15) */
#notes-editor-title { background: transparent; padding: 4px 16px !important; transition: background .18s ease; }
#notes-editor-title:focus { background: #fff; transition: none; }
/* Sélecteurs méta de la note (carnet / sous-cat / projet / contact / statut) :
transparent au repos → blanc au focus, comme le titre/corps. background-COLOR
seul (le chevron ▾ est un background-image .form-select à NE PAS effacer).
instant au focus, fondu doux au blur. (2026-06-15) */
#view-notes .notes-selects-row .form-select { background-color: transparent; transition: background-color .18s ease; }
#view-notes .notes-selects-row .form-select:focus { background-color: #fff; transition: none; }
/* Intelligence Entreprise — fiche : les cartes (.fe-header = carte société, .fe-kpi
= KPI, .fe-card = sections) étaient en BLANC plein → on les met en VERRE comme « la
première » carte de la vue (le bandeau de recherche = .card = var(--vz-card-bg) .62
+ blur(14) saturate(1.3)). Même token que le header, pas de hardcode. !important car
intelligence-entreprise.css (chargé après) les pose en #fff. (2026-06-15) */
#view-intelligence-entreprise .fe-header,
#view-intelligence-entreprise .fe-card,
#view-intelligence-entreprise .fe-kpi {
background: var(--vz-card-bg) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.3) !important;
backdrop-filter: blur(14px) saturate(1.3) !important;
}
/* ════════════════════════════════════════════════════════════════
Modale création de tâche (#taskModalNew) — c'était le DERNIER gros bloc
blanc opaque de l'app → passée en VERRE comme les cartes. (2026-06-16)
• .modal-content : même verre que .card (var(--vz-card-bg) = .62 clair / .6
sombre, donc dark-safe sans règle dédiée) + flou prononcé + ombre profonde
pour la faire flotter. La bordure passe en !important car la modale porte
la classe .border-0 (border:0 !important côté Bootstrap).
• Colonne droite (réglages) : voile lilas très léger → lue comme un RAIL
distinct de la zone d'édition (gauche), sans trait dur. La gauche garde
son .border-end comme séparateur.
• Backdrop : le voile noir .5 de Bootstrap jurait avec l'aurora claire. On
le remplace par un voile navy léger + flou → l'app reste devinée derrière
(effet verre iOS) et le verre de la modale prend une teinte claire au lieu
de virer gris/terne sur fond noir. Scopé body.flowos-ui-v2 → cohérent pour
toutes les modales Bootstrap de la refonte (les overlays mega-menu / palette
⌘K ont leur PROPRE backdrop, non touché). */
#taskModalNew .modal-content {
background: var(--vz-card-bg);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
backdrop-filter: blur(20px) saturate(1.4);
border: 1px solid rgba(255,255,255,.5) !important;
box-shadow: var(--vz-box-shadow), 0 28px 70px rgba(15,20,40,.24), inset 0 1px 0 rgba(255,255,255,.45);
}
#taskModalNew .row.g-0 > .col-lg-3 { background: rgba(120,110,170,.06); }
body.flowos-ui-v2 .modal-backdrop { background-color: rgba(20,18,45,.20); }
body.flowos-ui-v2 .modal-backdrop.show {
opacity: 1; /* l'alpha du voile vit désormais dans le rgba */
-webkit-backdrop-filter: blur(7px) saturate(1.1);
backdrop-filter: blur(7px) saturate(1.1);
}
/* #taskModalNew #2 — DÉSATURER LE VIOLET (2026-06-16). Avant : 3 aplats indigo
pleins se disputaient l'œil (Enregistrer + toggle Tâche actif + Important
sélectionné) → l'action principale ne ressortait plus. Règle : UN SEUL rempli
loud = #tm-save (Enregistrer, garde son glow global). Les ÉTATS sélectionnés
(toggle actif, Eisenhower coché) repassent en tons DOUX via les variables de
bouton Velzon — donc zéro !important et la logique JS qui swappe les classes
(tmSetEisenhower : btn-primary↔btn-outline-primary, btn-warning↔outline ;
toggle : .active) continue de marcher : on ne fait que reteinter la variante.
Couleurs = palette des badges domptés (rgba(99,102,241,.16)/#4f46e5 indigo,
rgba(191,139,28,.16)/#a8780f ambre). */
#taskModalNew #tm-type-group .btn.btn-soft-primary {
--vz-btn-active-bg: rgba(99,102,241,.16);
--vz-btn-active-border-color: rgba(99,102,241,.30);
--vz-btn-active-color: #4f46e5;
}
#taskModalNew #tm-type-group .btn.active { box-shadow: none; }
#taskModalNew #tm-important.btn-primary {
--vz-btn-bg: rgba(99,102,241,.16); --vz-btn-border-color: rgba(99,102,241,.30); --vz-btn-color: #4f46e5;
--vz-btn-hover-bg: rgba(99,102,241,.24); --vz-btn-hover-border-color: rgba(99,102,241,.42); --vz-btn-hover-color: #4f46e5;
--vz-btn-active-bg: rgba(99,102,241,.24); --vz-btn-active-border-color: rgba(99,102,241,.42); --vz-btn-active-color: #4f46e5;
box-shadow: none;
}
#taskModalNew #tm-urgent.btn-warning {
--vz-btn-bg: rgba(191,139,28,.16); --vz-btn-border-color: rgba(191,139,28,.30); --vz-btn-color: #a8780f;
--vz-btn-hover-bg: rgba(191,139,28,.24); --vz-btn-hover-border-color: rgba(191,139,28,.42); --vz-btn-hover-color: #a8780f;
--vz-btn-active-bg: rgba(191,139,28,.24); --vz-btn-active-border-color: rgba(191,139,28,.42); --vz-btn-active-color: #a8780f;
box-shadow: none;
}
/* #taskModalNew — CHAMPS & SÉLECTEURS « transparent au repos → blanc au focus »
(2026-06-16), même schéma que Notes / Paul v2 : sur la modale en verre, les
champs blancs pleins juraient → ils montrent l'aurora au repos et passent au
blanc net quand on écrit dedans.
• background-COLOR seul sur .form-select (le chevron ▾ est un background-image
à NE PAS effacer). #tm-title inclus (titre = champ, padding pour ne pas coller
le texte au bord du cadre blanc au focus). L'éditeur Quill (.ql-editor) idem.
• transition au REPOS seulement ; :focus{transition:none} = passage au blanc
INSTANTANÉ (pas de flash), retour transparent en fondu au blur.
• .form-range (slider durée) n'est PAS .form-control → non touché. */
#taskModalNew .form-control,
#taskModalNew .form-select {
background-color: transparent;
transition: background-color .18s ease;
}
#taskModalNew .form-control:focus,
#taskModalNew .form-select:focus {
background-color: #ffffff;
transition: none;
}
#taskModalNew #tm-title { padding-left: 12px !important; padding-right: 12px !important; }
/* Éditeur Description (Quill) : le .ql-editor ne fait que ~1-2 lignes (61px) alors
que le conteneur #tm-editor.ql-container fait 300px → blanchir le .ql-editor au
focus ne colorait qu'une BANDE. On blanchit donc TOUT le bloc éditeur
(#tm-editor-wrap = barre d'outils + zone) en :focus-within, et on garde le
.ql-editor transparent pour laisser ce blanc remplir toute la hauteur. (2026-06-16) */
#taskModalNew #tm-editor .ql-editor { background-color: transparent; }
#taskModalNew #tm-editor-wrap { background-color: transparent; transition: background-color .18s ease; }
#taskModalNew #tm-editor-wrap:focus-within { background-color: #ffffff; transition: none; }
/* Bouton Enregistrer : était en indigo PLEIN saturé (seul aplat criard sur la
modale en verre). Reteinté en indigo VERRE translucide → reste le CTA primaire
(rempli, pleine largeur, en haut) mais dans le registre glass de la fenêtre.
Via les variables de bouton Velzon (pas de !important) ; le glow global
.btn-primary est remplacé par une ombre douce (spécificité #taskModalNew #tm-save).
(2026-06-16) */
#taskModalNew #tm-save {
--vz-btn-bg: rgba(99,102,241,.80);
--vz-btn-border-color: rgba(99,102,241,.55);
--vz-btn-hover-bg: rgba(99,102,241,.92);
--vz-btn-hover-border-color: rgba(99,102,241,.70);
--vz-btn-active-bg: rgba(99,102,241,.92);
--vz-btn-active-border-color: rgba(99,102,241,.70);
-webkit-backdrop-filter: blur(10px) saturate(1.3);
backdrop-filter: blur(10px) saturate(1.3);
box-shadow: 0 6px 20px rgba(99,102,241,.16);
}
/* ============================================================== */
/* ATELIER IMMERSIF — quand la vue Atelier est active, on masque */
/* le chrome de l'app (top bar, barre latérale, fav-bar du bas, */
/* pastille statut) et l'atelier prend tout l'écran. */
/* La classe `atelier-immersive` est posée/retirée sur par */
/* activateView (ui.js). Retour à Up·me via le bouton « ← Quitter » */
/* du header de l'atelier (cf atelier/index.html → parent.activateView). */
/* ============================================================== */
body.atelier-immersive #page-topbar,
body.atelier-immersive .app-menu.navbar-menu,
body.atelier-immersive #upme-fav-bar,
body.atelier-immersive #sidebar-status { display: none !important; }
/* l'atelier sort du flux et couvre tout le viewport (z-index sous les modales Bootstrap = 1055) */
body.atelier-immersive #view-atelier {
position: fixed; inset: 0; z-index: 1050; margin: 0; background: #0b0d18;
}
body.atelier-immersive #view-atelier > #atelier-frame {
width: 100% !important; height: 100% !important;
}
/* ══════════════════════════════════════════════════════════════
COCKPIT IMMERSIF (vue d'ensemble, route 'overview') — même principe
que l'atelier : on masque le chrome de l'app (top bar, sidebar, fav-bar,
pastille statut, lanceur musique) et le cockpit prend TOUT l'écran. La
classe `overview-immersive` est posée/retirée sur par cockpit-bridge.js
à l'entrée/sortie de la vue. ══════════════════════════════════════════ */
body.overview-immersive #page-topbar,
body.overview-immersive .app-menu.navbar-menu,
body.overview-immersive #upme-fav-bar,
body.overview-immersive #sidebar-status,
body.overview-immersive #mus-launch { display: none !important; }
body.overview-immersive #view-overview {
position: fixed; inset: 0; z-index: 1050; margin: 0; background: transparent;
}
body.overview-immersive #view-overview > #cockpit-frame {
width: 100% !important; height: 100% !important;
}
/* ══════════════════════════════════════════════════════════════
LANCEUR MUSIQUE (#mus-launch, music.js) — au-dessus de la fav-bar
Le bouton flottant 🎶 est ancré en bas-gauche (bottom:16px, défini
dans le