@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
/* =================================================================================
mjc-hub-redesign.css — Refonte UI HUB Marie Julien Cuisine (Charte « Sel »)
---------------------------------------------------------------------------------
AUTEUR : Cowork (Claude) — pour Julien Gatineau
PALETTE : Charte « Sel » (encre #0F172A, surfaces claires, accent indigo #4F46E5)
STRATEGIE : Surcharge des CSS variables existantes (--bleu, --bg, --beige,
--gris, --rouge, --vert, --ombre…) remappées sur les tokens Sel +
typo Inter / Inter Tight / JetBrains Mono, rayons doux, ombres tonales.
Le hub utilise déjà ces variables PARTOUT, donc surcharger
le :root suffit à transformer 80% du visuel d'un coup.
─────────────────────────────────────────────────────────────────────────────────
INTÉGRATION (à faire par Claude code)
─────────────────────────────────────────────────────────────────────────────────
Le hub est une SPA monolithique HTML/CSS/JS (un seul gros index.html) déployée
sur Vercel (mjctdb.vercel.app). Tout le CSS est inline dans
en haut du . Ce fichier doit être chargé EN DERNIER pour avoir la priorité.
1. Place ce fichier à la racine du projet : /mjc-hub-redesign.css
(à côté de index.html, favicon.ico, icon-*.png, manifest…)
2. Dans index.html, ajoute la ligne SUIVANTE TOUT À LA FIN DU ,
juste AVANT , et APRÈS tous les existants :
3. Vérifie le déploiement Vercel : le fichier doit être servi sur
https://mjctdb.vercel.app/mjc-hub-redesign.css (status 200).
4. Aucune modification HTML, JS ou logique métier n'est requise.
5. Pour AJUSTER (couleurs, rayons, typo, etc.), modifier UNIQUEMENT les CSS
variables dans :root ci-dessous. Rien d'autre à toucher.
6. Pour DÉSACTIVER temporairement la refonte, commenter la ligne
ci-dessus. Le hub repart immédiatement sur son look d'origine.
─────────────────────────────────────────────────────────────────────────────────
COMPATIBILITÉ : Chrome / Safari / Firefox récents. iOS standalone PWA OK.
================================================================================= */
/* ═══════════════════════════════════════════════════════════════════════════════
1. CSS VARIABLES — Palette Apple pure (override des variables existantes)
═══════════════════════════════════════════════════════════════════════════════ */
:root {
/* ── Palette de base (override des variables historiques MJC) — mappée sur la Charte Sel ── */
--bleu: #0F172A; /* Sel "ink" — texte principal / couleur sombre UI (ancien Apple #1D1D1F) */
--bleu-clair: #334155; /* Sel "ink-soft" — texte secondaire */
--gris: #64748B; /* Sel "muted" — texte tertiaire, labels */
--beige: #F1F5F9; /* Sel "line-soft" — fond neutre clair (badges, pills) */
--beige-clair: #F8FAFC; /* Sel "wash" — fond hover / zones secondaires */
--bg: #FFFFFF; /* Sel "canvas" — blanc carte / input */
--fond: #FAFAF9; /* Sel "surface" — fond de page */
--rouge: #DC2626; /* Sel "danger" */
--vert: #059669; /* Sel "success" */
--vert-clair: #ECFDF5; /* Sel "success-soft" — vert très pâle pour fonds */
--ombre: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
/* ── Variables nouvelles (utilisées par cette feuille uniquement) ── */
--accent: #4F46E5; /* Sel indigo — CTAs primaires, liens, focus */
--accent-hover: #4338CA; /* Sel indigo foncé — état hover */
--accent-soft: rgba(79,70,229,.10); /* fond accent atténué + focus ring */
--text: #0F172A; /* Sel ink */
--text-soft: #64748B; /* Sel muted */
--border: #E5E7EB; /* Sel line */
--border-soft: #F1F5F9; /* Sel line-soft */
--surface: #FFFFFF; /* Sel canvas */
--surface-2: #F1F5F9; /* Sel line-soft — sidebar, onglets, segmented */
--warning: #D97706; /* Sel warn */
/* ── Rayons (Charte Sel) ── */
--r-xs: 4px; /* Sel radius-sm — badges, petits chips */
--r-sm: 8px; /* chips, onglets, items de nav */
--r-md: 10px; /* Sel radius — boutons, champs */
--r-lg: 14px; /* Sel radius-lg — cartes, modales */
--r-xl: 20px; /* Sel radius-xl — hero, grandes modales */
--r-pill: 999px; /* Sel radius-full — badges, pills, avatars */
/* ── Ombres tonales (teintées vers l'encre, jamais de noir pur) ── */
--shadow-1: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
--shadow-2: 0 4px 12px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04);
--shadow-3: 0 20px 60px rgba(15,23,42,.18), 0 4px 16px rgba(15,23,42,.08);
/* ── Transitions (Charte Sel) ── */
--ease: cubic-bezier(.2, .7, .3, 1);
--t-fast: 120ms var(--ease);
--t: 200ms var(--ease);
/* ── Typo (Charte Sel) ── */
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
--font-display: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
/* ── Échelle typographique (Charte Sel) ── */
--text-xs: 11px; --text-sm: 12px; --text-base: 14px; --text-md: 16px;
--text-lg: 20px; --text-xl: 24px; --text-2xl: 32px; --text-3xl: 48px;
/* ── Espacements base 4 (Charte Sel) ── */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
--space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
/* ── Tracking ── */
--tracking-tight: -0.02em;
--tracking-wider: 0.1em;
}
/* ═══════════════════════════════════════════════════════════════════════════════
2. GLOBAL — Reset doux + typographie
═══════════════════════════════════════════════════════════════════════════════ */
html, body {
font-family: var(--font) !important;
background: var(--bg) !important;
color: var(--text) !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
font-size: 15px;
line-height: 1.47;
letter-spacing: -0.003em;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display) !important;
letter-spacing: -0.022em;
font-weight: 600;
color: var(--text);
}
h1 { font-size: 28px; line-height: 1.14; font-weight: 700; }
h2 { font-size: 22px; line-height: 1.18; }
h3 { font-size: 17px; line-height: 1.24; }
a { color: var(--accent); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--accent-hover); text-decoration: underline; }
::selection { background: var(--accent-soft); color: var(--text); }
/* Scrollbars discrètes (style macOS) */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.28); }
/* ═══════════════════════════════════════════════════════════════════════════════
3. HEADER — Barre du haut (sobre, blanc translucide style macOS)
═══════════════════════════════════════════════════════════════════════════════ */
header {
background: rgba(255,255,255,.85) !important;
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
color: var(--text) !important;
border-bottom: 1px solid var(--border-soft);
box-shadow: none !important;
padding: 10px 24px !important;
min-height: 56px;
}
header .brand h1 {
font-size: 15px !important;
font-weight: 600 !important;
color: var(--text);
letter-spacing: -0.01em !important;
}
header .brand .sous {
font-size: 11px !important;
color: var(--text-soft) !important;
opacity: 1 !important;
}
header .logo {
/* on enlève le filter qui blanchissait le logo (header était bleu foncé, plus maintenant) */
filter: none !important;
height: 38px !important;
}
header .stats { gap: 24px !important; }
header .stat b { color: var(--text); font-weight: 600; }
header .stat span { color: var(--text-soft) !important; }
/* ═══════════════════════════════════════════════════════════════════════════════
4. BOUTONS — Style Apple (pills arrondies, accent bleu pour CTA)
═══════════════════════════════════════════════════════════════════════════════ */
.btn {
border-radius: var(--r-md) !important;
padding: 8px 16px !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: -0.005em;
transition: all var(--t-fast) !important;
background: var(--accent) !important;
color: #fff !important;
border: none !important;
box-shadow: none !important;
cursor: pointer;
}
.btn:hover {
background: var(--accent-hover) !important;
transform: translateY(-0.5px);
}
.btn:active { transform: scale(.98); }
.btn.ghost {
background: transparent !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
}
.btn.ghost:hover {
background: var(--surface-2) !important;
border-color: var(--text-soft) !important;
}
.btn.danger {
background: var(--rouge) !important;
color: #fff !important;
}
.btn.danger:hover { background: #B91C1C !important; }
/* Boutons header gardent un look "secondaire" sobre */
header .btn:not(.danger):not(.ghost) {
background: var(--surface-2) !important;
color: var(--text) !important;
}
header .btn:not(.danger):not(.ghost):hover {
background: var(--border-soft) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════════
5. NAVIGATION LATÉRALE — Sidebar épurée style Finder/Mail.app
═══════════════════════════════════════════════════════════════════════════════ */
.navmain {
background: var(--surface-2) !important;
border-right: 1px solid var(--border-soft) !important;
padding: 10px 8px !important;
}
.navmain .nv {
border-radius: var(--r-sm) !important;
color: var(--text-soft) !important;
font-weight: 500 !important;
transition: all var(--t-fast) !important;
background: transparent !important;
}
.navmain .nv:hover {
background: rgba(0,0,0,.04) !important;
color: var(--text) !important;
}
.navmain .nv.active {
background: var(--accent) !important;
color: #fff !important;
font-weight: 600 !important;
}
.navmain::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12) !important; }
/* ═══════════════════════════════════════════════════════════════════════════════
6. INPUTS / SELECTS / TEXTAREAS — Forme Apple, focus ring bleu
═══════════════════════════════════════════════════════════════════════════════ */
input, select, textarea {
font-family: var(--font) !important;
border-radius: var(--r-sm) !important;
border: 1px solid var(--border) !important;
background: var(--surface) !important;
color: var(--text) !important;
transition: border-color var(--t-fast), box-shadow var(--t-fast) !important;
}
input:focus, select:focus, textarea:focus {
outline: none !important;
border-color: var(--accent) !important;
box-shadow: 0 0 0 4px var(--accent-soft) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-soft); opacity: .6; }
input[type="checkbox"], input[type="radio"] {
accent-color: var(--accent) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════════
7. CARDS / SURFACES — Coins très arrondis, ombres feutrées
═══════════════════════════════════════════════════════════════════════════════ */
.cal-day,
.cal-detail,
.ach-fournisseur,
.ach-histo-card,
.ag-side,
.ag-chat,
.merc-table-wrap,
.merc-four-card,
.merc-stat,
.merc-souscat-wrap,
.merc-filters,
.merc-empty,
.merc-four-imports {
border-radius: var(--r-md) !important;
border: 1px solid var(--border-soft) !important;
background: var(--surface) !important;
box-shadow: var(--shadow-1) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════════
8. PLANNING / CALENDRIER
═══════════════════════════════════════════════════════════════════════════════ */
.cal-arrow {
border-radius: var(--r-pill) !important;
border: 1px solid var(--border) !important;
color: var(--text) !important;
background: var(--surface) !important;
}
.cal-arrow:hover {
background: var(--surface-2) !important;
border-color: var(--text-soft) !important;
}
.cal-month { color: var(--text) !important; font-weight: 600; }
.cal-day { transition: all var(--t-fast); }
.cal-day:hover {
border-color: var(--accent) !important;
box-shadow: var(--shadow-2) !important;
}
.cal-day.today {
border-color: var(--accent) !important;
background: var(--accent-soft) !important;
}
.cal-day.today .num {
background: var(--accent) !important;
}
.cal-day.selected {
border-color: var(--accent) !important;
box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
.cal-day .num { color: var(--text); }
.cal-event { border-radius: var(--r-xs) !important; font-weight: 500 !important; }
.cal-event.presta { background: var(--accent-soft) !important; color: var(--accent) !important; }
.cal-event.presta-done { background: #ECFDF5 !important; color: #059669 !important; }
.cal-event.presta-ongoing { background: #FFFBEB !important; color: #D97706 !important; }
.cal-event.achat { background: #FEF2F2 !important; color: var(--rouge) !important; }
/* ═══════════════════════════════════════════════════════════════════════════════
9. ACHATS / FOURNISSEURS
═══════════════════════════════════════════════════════════════════════════════ */
.achats-tabs {
background: var(--surface-2) !important;
border-radius: var(--r-sm) !important;
padding: 3px !important;
}
.ach-tab { border-radius: var(--r-xs) !important; color: var(--text-soft) !important; }
.ach-tab.active {
background: var(--surface) !important;
color: var(--text) !important;
box-shadow: var(--shadow-1) !important;
font-weight: 600 !important;
}
.ach-fournisseur { overflow: hidden; }
.ach-fournisseur-head {
background: var(--surface) !important;
border-bottom: 1px solid var(--border-soft);
}
.ach-fournisseur-head h3 { color: var(--text) !important; font-weight: 600; }
.ach-fournisseur-head .badge {
background: var(--beige) !important;
color: var(--text) !important;
border-radius: var(--r-pill) !important;
font-weight: 600 !important;
}
.ach-fournisseur-head .progress-mini { background: var(--border-soft) !important; }
.ach-fournisseur-head .progress-mini span { background: var(--vert) !important; }
.ach-ligne { border-bottom-color: var(--border-soft) !important; }
.ach-ligne .ach-qty { color: var(--text) !important; font-weight: 600; }
.ach-summary {
background: var(--surface-2) !important;
border: 1px solid var(--border-soft) !important;
border-radius: var(--r-md) !important;
}
.ach-summary h3 { color: var(--text) !important; }
.ach-summary .row { color: var(--text) !important; }
.ach-alert {
background: var(--rouge) !important;
border-radius: var(--r-sm) !important;
font-weight: 500 !important;
}
.ach-ligne-prix {
background: var(--accent-soft) !important;
color: var(--accent) !important;
border-radius: var(--r-xs) !important;
}
.ach-fournisseur-total {
background: var(--accent-soft) !important;
color: var(--accent) !important;
border-radius: var(--r-pill) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════════
10. AGENTS IA
═══════════════════════════════════════════════════════════════════════════════ */
.ag-side, .ag-chat { box-shadow: var(--shadow-1) !important; }
.ag-side-head, .ag-chat-head { border-bottom-color: var(--border-soft) !important; }
.ag-side-head h2, .ag-chat-head h2 { color: var(--text) !important; }
.ag-card {
border-radius: var(--r-sm) !important;
border: 1px solid transparent !important;
}
.ag-card:hover { background: var(--surface-2) !important; }
.ag-card.active {
background: var(--accent-soft) !important;
border-color: var(--accent) !important;
}
.ag-card .ag-name { color: var(--text) !important; }
.ag-card .ag-badge { background: var(--accent) !important; border-radius: var(--r-pill) !important; }
.ag-detail { background: var(--surface-2) !important; }
.ag-msg .ag-bubble {
border-radius: var(--r-lg) !important;
font-size: 14px !important;
line-height: 1.45 !important;
}
.ag-msg.user .ag-bubble {
background: var(--accent) !important;
color: #fff !important;
border-bottom-right-radius: 6px !important;
}
.ag-msg.assistant .ag-bubble {
background: var(--surface-2) !important;
color: var(--text) !important;
border: 1px solid var(--border-soft) !important;
border-bottom-left-radius: 6px !important;
}
.ag-input-wrap { background: var(--surface) !important; border-top-color: var(--border-soft) !important; }
.ag-input-row textarea {
border-radius: var(--r-md) !important;
border: 1px solid var(--border) !important;
}
.ag-input-row textarea:focus { border-color: var(--accent) !important; }
.ag-input-row button {
background: var(--accent) !important;
border-radius: var(--r-md) !important;
font-weight: 600 !important;
}
.ag-input-row button:hover { background: var(--accent-hover) !important; }
.ag-empty .suggest button {
background: var(--surface-2) !important;
color: var(--text) !important;
border-color: var(--border-soft) !important;
border-radius: var(--r-pill) !important;
}
.ag-empty .suggest button:hover { background: var(--border-soft) !important; }
/* ═══════════════════════════════════════════════════════════════════════════════
11. MERCURIALE — Tables, filtres, cards fournisseurs
═══════════════════════════════════════════════════════════════════════════════ */
.merc-head h1 { color: var(--text) !important; }
.merc-head p { color: var(--text-soft) !important; }
.merc-head-actions .btn {
border-radius: var(--r-md) !important;
border: 1px solid var(--border) !important;
background: var(--surface) !important;
color: var(--text) !important;
font-weight: 500 !important;
}
.merc-head-actions .btn.primary {
background: var(--accent) !important;
border-color: var(--accent) !important;
color: #fff !important;
}
.merc-head-actions .btn:hover { border-color: var(--text-soft) !important; }
.merc-tabs {
background: var(--surface-2) !important;
border: 1px solid var(--border-soft) !important;
border-radius: var(--r-sm) !important;
padding: 3px !important;
}
.merc-tab {
border-radius: var(--r-xs) !important;
color: var(--text-soft) !important;
font-weight: 500 !important;
}
.merc-tab.active {
background: var(--surface) !important;
color: var(--text) !important;
box-shadow: var(--shadow-1) !important;
font-weight: 600 !important;
}
.merc-tab .count { background: var(--border-soft) !important; color: var(--text-soft) !important; }
.merc-tab.active .count { background: var(--accent-soft) !important; color: var(--accent) !important; }
.merc-stat .num { color: var(--text) !important; }
.merc-stat .lbl { color: var(--text-soft) !important; }
.merc-filters input[type="search"],
.merc-filters select { border-radius: var(--r-sm) !important; }
.merc-filters .chip-cat,
.merc-souscat-chips .chip-cat {
border-radius: var(--r-pill) !important;
background: var(--surface) !important;
border: 1px solid var(--border) !important;
color: var(--text-soft) !important;
font-weight: 500 !important;
}
.merc-filters .chip-cat:hover,
.merc-souscat-chips .chip-cat:hover {
border-color: var(--accent) !important;
color: var(--text) !important;
}
.merc-filters .chip-cat.active,
.merc-souscat-chips .chip-cat.active {
background: var(--accent) !important;
color: #fff !important;
border-color: var(--accent) !important;
}
.merc-landing-card {
border-radius: var(--r-md) !important;
border: 1px solid var(--border-soft) !important;
background: var(--surface) !important;
transition: all var(--t-fast) !important;
}
.merc-landing-card:hover {
border-color: var(--accent) !important;
box-shadow: var(--shadow-2) !important;
transform: translateY(-2px);
}
.merc-landing-card .lbl { color: var(--text) !important; }
.merc-landing-card .cnt { color: var(--text-soft) !important; }
.merc-breadcrumb {
background: var(--surface-2) !important;
border: 1px solid var(--border-soft) !important;
border-radius: var(--r-sm) !important;
}
.merc-bc-chip {
background: var(--surface) !important;
color: var(--text) !important;
border: 1px solid var(--border-soft) !important;
border-radius: var(--r-pill) !important;
}
.merc-bc-x {
background: var(--rouge) !important;
width: 18px !important;
height: 18px !important;
}
.merc-table-wrap { box-shadow: var(--shadow-1) !important; }
.merc-table th {
background: var(--surface-2) !important;
color: var(--text) !important;
border-bottom: 1px solid var(--border) !important;
font-weight: 600 !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-size: 12px !important;
}
.merc-table td { border-top-color: var(--border-soft) !important; color: var(--text); }
.merc-table tbody tr:hover { background: var(--surface-2) !important; }
.merc-table input:focus, .merc-table select:focus {
border-color: var(--accent) !important;
background: var(--surface) !important;
}
.merc-table .code-four {
background: var(--accent-soft) !important;
color: var(--accent) !important;
}
.merc-four-card .four-head h3 { color: var(--text) !important; }
.merc-four-card .four-nb {
background: var(--beige) !important;
color: var(--text) !important;
border-radius: var(--r-pill) !important;
}
.merc-four-card .four-total-val { color: var(--text) !important; }
.merc-four-imports {
background: var(--surface-2) !important;
border: 1px solid var(--border-soft) !important;
}
.merc-four-imports-btns .btn {
border-radius: var(--r-md) !important;
background: var(--surface) !important;
border: 1px solid var(--border) !important;
color: var(--text) !important;
}
.merc-four-imports-btns .btn.primary {
background: var(--accent) !important;
border-color: var(--accent) !important;
color: #fff !important;
}
.merc-new-row {
background: var(--surface-2) !important;
border: 1.5px dashed var(--border) !important;
border-radius: var(--r-md) !important;
}
.merc-new-row button {
background: var(--accent) !important;
border-radius: var(--r-md) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════════
12. POPUP CATALOGUE PRODUITS / MODALES
═══════════════════════════════════════════════════════════════════════════════ */
.cat-overlay, .changelog-overlay {
background: rgba(0,0,0,.4) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.cat-modal, .changelog-modal {
border-radius: var(--r-xl) !important;
background: var(--surface) !important;
box-shadow: var(--shadow-3) !important;
border: 1px solid var(--border-soft);
}
.cat-header { border-bottom-color: var(--border-soft) !important; }
.cat-header h3 { color: var(--text) !important; }
.cat-header .cat-close { border-radius: var(--r-sm) !important; color: var(--text-soft) !important; }
.cat-header .cat-close:hover { background: var(--surface-2) !important; }
.cat-search-bar input {
border-radius: var(--r-md) !important;
border-color: var(--border) !important;
}
.cat-tab-btn {
border-radius: var(--r-pill) !important;
border: 1px solid var(--border) !important;
background: var(--surface) !important;
color: var(--text-soft) !important;
font-weight: 500 !important;
}
.cat-tab-btn.active {
background: var(--accent) !important;
color: #fff !important;
border-color: var(--accent) !important;
}
.cat-section-title { background: var(--surface) !important; color: var(--text-soft) !important; }
.cat-produit {
border-radius: var(--r-sm) !important;
border-color: var(--border-soft) !important;
}
.cat-produit:hover { border-color: var(--accent) !important; box-shadow: var(--shadow-2) !important; }
.cat-produit .cp-four {
background: var(--surface-2) !important;
color: var(--text-soft) !important;
border-radius: var(--r-pill) !important;
}
.cat-produit .cp-unite { color: var(--text) !important; }
.cat-qty-row {
background: var(--accent-soft) !important;
border: 2px solid var(--accent) !important;
border-radius: var(--r-md) !important;
}
.cat-qty-row .cqr-nom { color: var(--text) !important; }
.cat-qty-row input[type="number"] {
border-radius: var(--r-sm) !important;
border-color: var(--border) !important;
}
.cat-qty-row .cqr-ok {
background: var(--vert) !important;
border-radius: var(--r-md) !important;
font-weight: 600 !important;
}
/* ═══════════════════════════════════════════════════════════════════════════════
13. CHANGELOG (Coconut)
═══════════════════════════════════════════════════════════════════════════════ */
.cl-hero {
background: linear-gradient(135deg, #0F172A, #1E293B) !important;
padding: 28px 24px !important;
}
.cl-brand { font-weight: 700 !important; letter-spacing: -0.02em !important; }
.cl-brand span { color: var(--accent) !important; }
.cl-tagline { color: rgba(255,255,255,.5) !important; }
.cl-version-current {
background: rgba(255,255,255,.12) !important;
border-radius: var(--r-pill) !important;
}
.cl-entry-ver { color: var(--text) !important; }
.cl-entry-desc { color: var(--text-soft) !important; }
.cl-close button {
background: var(--accent) !important;
border-radius: var(--r-md) !important;
font-weight: 600 !important;
}
/* ═══════════════════════════════════════════════════════════════════════════════
14. LOGIN — Page d'accueil "Bienvenue / Se connecter avec Google"
═══════════════════════════════════════════════════════════════════════════════ */
/* La page de login est très simple — on ajoute juste un fond clair et on centre.
Les sélecteurs sont volontairement larges pour couvrir la page sans connaître
ses classes exactes (page rendue après injection). */
body:has(button:not(.btn)):has(.brand) {
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════════
15. UTILITAIRES — App version float, divers
═══════════════════════════════════════════════════════════════════════════════ */
.app-version-float {
background: rgba(255,255,255,.85) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--border-soft) !important;
border-radius: var(--r-sm) !important;
color: var(--text-soft) !important;
font-family: var(--font) !important;
}
.app-version-float:hover {
background: var(--surface) !important;
border-color: var(--text-soft) !important;
box-shadow: var(--shadow-2) !important;
}
.app-version-float .dev { color: var(--accent) !important; }
/* ═══════════════════════════════════════════════════════════════════════════════
16. ANIMATIONS — Adoucies, respect de prefers-reduced-motion
═══════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════════
17. ACCESSIBILITÉ — Focus visible toujours présent
═══════════════════════════════════════════════════════════════════════════════ */
:focus-visible {
outline: 2px solid var(--accent) !important;
outline-offset: 2px;
border-radius: var(--r-xs);
}
button:focus-visible, a:focus-visible {
outline-offset: 3px;
}
/* ═══════════════════════════════════════════════════════════════════════════════
18. RESPONSIVE — Ajustements mobile (l'existant est déjà bien fait, on lisse)
═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
header { padding: 8px 16px !important; }
header .logo { height: 32px !important; }
header .brand h1 { font-size: 14px !important; }
.navmain { padding: 6px !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════════
19. APP SWITCHER — Hub / Desk / Odoo / Support (segmented control)
Présent dans les 3 apps maison (Hub, Desk, Support) pour permettre de
passer de l'une à l'autre en un clic. Style segmented control Apple.
═══════════════════════════════════════════════════════════════════════════════ */
.mjc-app-switcher {
display: inline-flex;
align-items: center;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 3px;
gap: 2px;
margin: 0 12px;
}
.mjc-app-switcher-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 10px;
border: none;
background: transparent;
border-radius: 6px;
font-family: var(--font);
font-size: 12.5px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--text-soft);
text-decoration: none;
transition: all var(--t-fast);
white-space: nowrap;
cursor: pointer;
}
.mjc-app-switcher-btn svg {
width: 15px;
height: 15px;
flex-shrink: 0;
}
.mjc-app-switcher-btn:hover {
color: var(--text);
background: rgba(0, 0, 0, .04);
text-decoration: none;
}
.mjc-app-switcher-btn.active {
background: var(--surface);
color: var(--text);
font-weight: 600;
box-shadow: var(--shadow-1);
cursor: default;
}
.mjc-app-switcher-btn.active:hover { background: var(--surface); }
@media (max-width: 720px) {
.mjc-app-switcher { display: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════════
20. ÉCRAN DE CONNEXION — Charte Sel (deux panneaux : marque + Google)
Remplace la carte "Bienvenue / Se connecter avec Google".
Sélecteur #id.classe → bat la spécificité des règles .user-select-card
sans !important, pour que le JS puisse encore masquer la carte
(style.display="none" inline reste prioritaire).
═══════════════════════════════════════════════════════════════════════════════ */
/* Splash de démarrage supprimé définitivement (logo + 3 points au lancement). */
#app-lock-splash { display: none !important; }
#app-lock-user-card.mjc-login {
position: fixed; inset: 0;
width: 100%; max-width: none; height: 100%;
margin: 0; padding: 0;
background: var(--surface);
border: none; border-radius: 0; box-shadow: none;
overflow: auto;
}
/* Grille sur un wrapper interne : le JS ne pose jamais de style inline dessus,
donc display:grid gagne toujours (la carte parente peut passer en
display:block/none via le JS sans casser la mise en page). */
#app-lock-user-card.mjc-login .mjc-login-grid {
display: grid; grid-template-columns: 1.05fr 1fr;
width: 100%; min-height: 100%;
}
/* Force les deux panneaux à remplir leur colonne (l'app pose un width:300px
hérité de l'ancienne carte sur les éléments internes). */
#app-lock-user-card.mjc-login .mjc-login-brand,
#app-lock-user-card.mjc-login .mjc-login-form {
width: 100%; max-width: none; min-width: 0;
}
/* ── Panneau marque (gauche, fond encre) ── */
.mjc-login-brand {
position: relative;
background: linear-gradient(160deg, #0F172A 0%, #1E293B 100%);
color: #fff;
padding: 48px 56px;
display: flex; flex-direction: column; justify-content: space-between;
gap: 32px; overflow: hidden;
text-align: left;
transform: none; /* garde-fou : l'app décale les