/* ========================================================================== Nymphea Dashboard — V3 « Deck » Thème clair par défaut, thème sombre conservé via [data-theme="dark"]. Le choix est posé sur avant le premier paint (script inline dans index.html) : aucun flash de thème. ========================================================================== */ /* ---------- Fonte embarquée (aucun appel externe) ---------- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("./assets/fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("./assets/fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- Jetons : sombre (défaut) ---------- */ :root { color-scheme: dark; --layer-header: 20; --layer-scrim: 60; --layer-drawer: 70; --layer-modal: 90; --modal-dim: rgba(18, 20, 27, 0.32); --bg: #0b0812; --panel: #161022; --panel-2: #1c1529; --panel-inset: #130d1e; --ink: #f3f0f9; --ink-soft: #d2cbe2; --muted: #a89ebf; --faint: #857b9c; --line: rgba(255, 255, 255, 0.085); --line-soft: rgba(255, 255, 255, 0.055); --accent: #8d70b5; --accent-strong: #bca5d8; --accent-deep: #654b83; --accent-soft: rgba(124, 91, 163, 0.14); --accent-border: rgba(142, 106, 184, 0.3); --accent-glow: rgba(101, 75, 131, 0.35); --dither-glow: #a970e8; --series-1: #8d70b5; --type-ppv: #8365ab; --type-tips: #2dd4a7; --type-subs: #f2b23e; --type-other: #8f86a6; --success: #3ecf9a; --success-soft: rgba(62, 207, 154, 0.11); --success-border: rgba(62, 207, 154, 0.3); --warning: #f0b445; --warning-soft: rgba(240, 180, 69, 0.1); --warning-border: rgba(240, 180, 69, 0.32); --danger: #f4737a; --danger-soft: rgba(244, 115, 122, 0.1); --danger-border: rgba(244, 115, 122, 0.32); --sidebar-muted: #a79fbe; --glass-dark-bg: linear-gradient(168deg, rgba(30, 22, 48, 0.78), rgba(11, 8, 18, 0.9)); --glass-dark-border: rgba(255, 255, 255, 0.09); --glass-dark-rim: rgba(255, 255, 255, 0.06); --glass-light-bg: rgba(34, 24, 54, 0.55); --glass-light-border: rgba(255, 255, 255, 0.12); --glass-blur: blur(22px) saturate(150%); --radius: 14px; --radius-sm: 9px; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 44px rgba(2, 0, 8, 0.45); --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.35), 0 26px 60px rgba(2, 0, 8, 0.55); --scroll: rgba(255, 255, 255, 0.16); --chart-grid: rgba(255, 255, 255, 0.06); --chart-axis: rgba(255, 255, 255, 0.14); --tooltip-bg: rgba(24, 18, 36, 0.92); --row-hover: rgba(255, 255, 255, 0.035); --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); } /* ---------- Jetons : clair ---------- */ [data-theme="light"] { color-scheme: light; --bg: #ffffff; --panel: #ffffff; --panel-2: #fcfcfe; --panel-inset: #f9f9fc; --ink: #222528; --ink-soft: #464a54; --muted: #686d78; --faint: #797e88; --line: #e1e3e9; --line-soft: #ebecf0; --accent: #76509b; --accent-strong: #5f3d82; --accent-deep: #54366f; --accent-soft: #f1edf5; --accent-border: #dacde5; --accent-glow: rgba(93, 60, 128, 0.14); --dither-glow: #76509b; --series-1: #725093; --type-ppv: #725093; --type-tips: #1baf7a; --type-subs: #eda100; --type-other: #9a93a6; --success: #18795b; --success-soft: #e8f4ef; --success-border: #cde5da; --warning: #9b6b00; --warning-soft: #fbf3e2; --warning-border: #ecd9ae; --danger: #ad3434; --danger-soft: #fbeaea; --danger-border: #ecc7c7; --glass-light-bg: rgba(255, 255, 255, 0.92); --glass-light-border: #e1e3e9; --shadow: 0 1px 2px rgba(24, 26, 32, 0.025); --shadow-lift: 0 8px 24px rgba(24, 26, 32, 0.055); --scroll: rgba(23, 15, 35, 0.18); --chart-grid: #f0f0f3; --chart-axis: #dce0e6; --tooltip-bg: rgba(32, 28, 40, 0.95); --row-hover: #faf8fe; --sidebar-muted: #626775; --radius: 12px; --radius-sm: 8px; } /* ---------- Base ---------- */ * { box-sizing: border-box; } [hidden] { display: none !important; } html { scrollbar-color: var(--scroll) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--scroll); border: 3px solid transparent; border-radius: 8px; background-clip: content-box; } ::selection { background: rgba(101, 75, 131, 0.32); color: #fff; } body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--bg); font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; transition: background-color 0.35s ease; } /* Halo d'ambiance : donne du fond aux surfaces vitrées et une identité au deck. Reste en retrait pour ne jamais nuire à la lecture des chiffres. */ body::before { content: ""; position: fixed; inset: -12%; z-index: -1; pointer-events: none; background: radial-gradient(620px 420px at 12% 6%, rgba(139, 110, 175, 0.17), transparent 62%), radial-gradient(760px 520px at 88% -4%, rgba(109, 77, 149, 0.14), transparent 60%), radial-gradient(520px 420px at 94% 88%, rgba(27, 175, 122, 0.07), transparent 62%), radial-gradient(560px 480px at 2% 94%, rgba(109, 77, 149, 0.11), transparent 60%); animation: aurora 42s ease-in-out infinite alternate; } [data-theme="light"] body::before { background: radial-gradient(520px 320px at 0% 0%, rgba(139, 110, 175, 0.1), transparent 70%), radial-gradient(560px 340px at 100% 0%, rgba(139, 110, 175, 0.09), transparent 70%), radial-gradient(480px 380px at 96% 96%, rgba(27, 175, 122, 0.05), transparent 70%); animation: none; } @keyframes aurora { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-2.5%, 2%, 0) scale(1.06); } } button, input { font: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- Structure ---------- */ .shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; } .sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 30px; padding: 26px 16px 20px; background: var(--glass-dark-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-right: 1px solid var(--glass-dark-border); box-shadow: inset 1px 0 0 var(--glass-dark-rim), inset 0 1px 0 var(--glass-dark-rim), 10px 0 40px rgba(4, 2, 10, 0.35); color: white; z-index: 20; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .sidebar { background: #151221; } } .brand { padding: 0 8px; } .brand img { display: block; width: 158px; max-width: 100%; height: auto; filter: drop-shadow(0 0 16px rgba(169, 142, 214, 0.35)); } .brand .brand-logo-light { display: none; } [data-theme="light"] .brand .brand-logo-dark { display: none; } [data-theme="light"] .brand .brand-logo-light { display: block; } .nav { display: grid; gap: 4px; } .nav-item { position: relative; display: flex; align-items: center; gap: 11px; min-height: 40px; width: 100%; padding: 8px 12px; color: var(--sidebar-muted); background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer; text-align: left; font-size: 13.5px; font-weight: 550; transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease; } .nav-item svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: color 0.18s ease; } .nav-item:hover { color: white; background: rgba(255, 255, 255, 0.07); } .nav-item:active { transform: scale(0.985); } .nav-item.active { color: white; background: linear-gradient(90deg, rgba(139, 110, 175, 0.32), rgba(139, 110, 175, 0.14)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 18px rgba(88, 60, 130, 0.35); } /* indicateur actif : barre lumineuse à gauche de l'entrée */ .nav-item.active::before { content: ""; position: absolute; left: -8px; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: linear-gradient(#d9c4f5, #8b6eaf); box-shadow: 0 0 12px var(--accent-glow); } .nav-item.active svg { color: #d9c4f5; } /* Badge d'attention : compte les points qui demandent une décision (bloquants, à vérifier, au-dessus du seuil) — visible sans ouvrir la vue. */ .nav-badge { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; font-size: 10.5px; font-weight: 750; font-variant-numeric: tabular-nums; } .nav-badge.warn { color: #f5c76a; background: rgba(240, 180, 69, 0.16); box-shadow: inset 0 0 0 1px rgba(240, 180, 69, 0.35); } .nav-badge.bad { color: #ff8f96; background: rgba(244, 115, 122, 0.18); box-shadow: inset 0 0 0 1px rgba(244, 115, 122, 0.4); animation: badgePulse 2.2s ease-out infinite; } @keyframes badgePulse { 0% { box-shadow: inset 0 0 0 1px rgba(244, 115, 122, 0.4), 0 0 0 0 rgba(244, 115, 122, 0.35); } 70% { box-shadow: inset 0 0 0 1px rgba(244, 115, 122, 0.4), 0 0 0 6px rgba(244, 115, 122, 0); } 100% { box-shadow: inset 0 0 0 1px rgba(244, 115, 122, 0.4), 0 0 0 0 rgba(244, 115, 122, 0); } } .sidebar-footer { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 12px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.03); } .sidebar-footer strong { display: block; font-size: 13px; } .sidebar-footer span { display: block; margin-top: 2px; color: var(--sidebar-muted); font-size: 12px; } .status-dot { width: 9px; height: 9px; flex: none; border-radius: 999px; background: var(--muted); } .status-dot.ok, .status-dot.warn { animation: pulse 2.6s ease-out infinite; } .status-dot.ok { background: var(--success); color: var(--success); } .status-dot.warn { background: var(--warning); color: var(--warning); } .status-dot.bad { background: var(--danger); } @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); } 70% { box-shadow: 0 0 0 9px color-mix(in srgb, currentColor 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 0%, transparent); } } .main { min-width: 0; padding: 0 30px 44px; } /* Barre de titre collante : le contexte reste visible pendant le défilement. */ .topbar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 -30px 22px; padding: 20px 30px 14px; background: var(--bg); background: color-mix(in srgb, var(--bg) 74%, transparent); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid var(--line-soft); } .eyebrow { margin: 0 0 4px; color: var(--accent-strong); font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; } h1, h2 { margin: 0; } h1 { font-size: 23px; font-weight: 680; line-height: 1.2; letter-spacing: -0.015em; } h2 { font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; } .top-actions { display: flex; align-items: center; gap: 8px; } /* ---------- Pills & boutons ---------- */ .pill, .panel-badge, .status-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; white-space: nowrap; } .pill-accent, .panel-badge { color: var(--accent-strong); background: var(--accent-soft); border: 1px solid var(--accent-border); } .pill-neutral { color: var(--muted); background: var(--panel); border: 1px solid var(--line); } .pill-warn { color: var(--warning); background: var(--warning-soft); border: 1px solid var(--warning-border); } .ghost-button { min-height: 32px; padding: 6px 12px; color: var(--ink-soft); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; font-weight: 550; transition: border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.1s ease; } .ghost-button:hover { border-color: var(--accent); color: var(--accent-strong); box-shadow: 0 4px 16px var(--accent-glow); } .ghost-button:active { transform: translateY(1px); } /* Bouton icône (bascule de thème) */ .icon-btn { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; color: var(--ink-soft); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; transition: border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.1s ease; } .icon-btn:hover { border-color: var(--accent); color: var(--accent-strong); box-shadow: 0 4px 16px var(--accent-glow); } .icon-btn:active { transform: scale(0.94); } .icon-btn svg { position: absolute; inset: 0; margin: auto; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.25s ease, transform 0.35s var(--ease-out); } .icon-btn .moon { opacity: 0; transform: rotate(-50deg) scale(0.6); } .icon-btn .sun { opacity: 1; transform: none; } [data-theme="light"] .icon-btn .sun { opacity: 0; transform: rotate(50deg) scale(0.6); } [data-theme="light"] .icon-btn .moon { opacity: 1; transform: none; } /* ---------- Vues ---------- */ .view { display: none; } .view.active { display: grid; gap: 16px; } /* Entrée séquencée des panneaux à chaque changement de vue */ .view.active > * { animation: rise 0.5s var(--ease-out) both; } .view.active > *:nth-child(2) { animation-delay: 0.045s; } .view.active > *:nth-child(3) { animation-delay: 0.09s; } .view.active > *:nth-child(4) { animation-delay: 0.135s; } .view.active > *:nth-child(5) { animation-delay: 0.18s; } .view.active > *:nth-child(6) { animation-delay: 0.225s; } .view.active > *:nth-child(n + 7) { animation-delay: 0.27s; } @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* Surface de travail à gauche, colonne de décision ou de référence à droite. Les deux panneaux ne sont pas équivalents : align-items evite que le plus court soit étiré à la hauteur du plus long, ce qui creusait un vide à l'intérieur du panneau (Revenue par source, Registre opérationnel). */ .layout-two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.85fr); align-items: start; gap: 16px; } /* Variante pour deux panneaux pairs, de poids et de densité comparables. */ .layout-two.is-even { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* ---------- Hero (vue d'ensemble) ---------- */ /* Panneau de pilotage principal : revenue en une, tendance à sa droite, reste des indicateurs en bandeau divisé en bas. Le léger dégradé de marque le distingue des panneaux ordinaires sans nuire à la lisibilité des chiffres. */ .panel-hero { background: linear-gradient(150deg, rgba(139, 110, 175, 0.13), rgba(139, 110, 175, 0.02) 46%), var(--panel); border-color: var(--accent-border); } [data-theme="light"] .panel-hero { background: linear-gradient(150deg, rgba(139, 110, 175, 0.09), rgba(139, 110, 175, 0.015) 46%), var(--panel); } .hero-main { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 8px 28px; align-items: start; } .hero-side { align-self: center; } .hero-value { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 6px 0 4px; } .hero-value strong { font-size: 38px; font-weight: 720; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .hero-hint { color: var(--faint); font-size: 12px; } .hero-chart { min-width: 0; } .hero-chart .panel-head { margin-bottom: 6px; } .hero-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line-soft); } .hero-stats.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hero-stats.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .hero-side .meter { margin: 12px 0 8px; } .hero-stat { min-width: 0; padding-right: 14px; } .hero-stat + .hero-stat { padding-left: 14px; border-left: 1px solid var(--line-soft); } .hero-stat > span { display: block; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; } .hero-stat > strong { display: block; margin: 5px 0 3px; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; } .hero-stat > small { display: flex; align-items: center; gap: 6px; color: var(--faint); font-size: 11px; line-height: 1.35; } .hero-stat small .dot { width: 7px; height: 7px; flex: none; border-radius: 999px; } .hero-stat .meter { margin: 6px 0 4px; } /* Anneau de progression (critères semaine 4) */ .ring-wrap { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; } .ring { width: 44px; height: 44px; transform: rotate(-90deg); } .ring circle { fill: none; stroke-width: 4; stroke-linecap: round; } .ring-track { stroke: var(--line); } .ring-fill { stroke: var(--accent); stroke-dasharray: 100.53; stroke-dashoffset: 100.53; filter: drop-shadow(0 0 5px var(--accent-glow)); transition: stroke-dashoffset 0.55s var(--ease-out), stroke 0.35s ease; } /* tous les critères sont remplis : la réussite se lit en un instant */ .ring-fill.complete { stroke: var(--success); filter: drop-shadow(0 0 6px rgba(62, 207, 154, 0.5)); } .ring-wrap.complete .ring-text { color: var(--success); } .ring-text { position: absolute; font-size: 10.5px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ink-soft); } /* Critères en colonnes : la checklist respire sur toute la largeur du panneau */ .criteria-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* ---------- KPI ---------- */ .kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .kpi-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .metric, .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.2s ease, transform 0.2s var(--ease-out); } .metric:hover, .panel:hover { box-shadow: var(--shadow-lift); } .metric { position: relative; min-height: 118px; padding: 15px 16px; display: flex; flex-direction: column; overflow: hidden; } .metric:hover { transform: translateY(-2px); border-color: var(--accent-border); } /* filet lumineux en haut de la carte au survol */ .metric::after { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0; transition: opacity 0.2s ease; } .metric:hover::after { opacity: 0.8; } .metric > span { color: var(--muted); font-size: 12px; font-weight: 600; } .metric strong { display: block; margin: 10px 0 6px; font-size: 23px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } .metric small { display: flex; align-items: center; gap: 6px; margin-top: auto; color: var(--faint); font-size: 11.5px; } .metric small .dot { width: 7px; height: 7px; flex: none; border-radius: 999px; } .dot-ok { background: var(--success); } .dot-warn { background: var(--warning); } .dot-bad { background: var(--danger); } .dot-neutral { background: var(--faint); } /* Variation période : puce en ligne à côté de la valeur (jamais superposée) */ .delta { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .delta svg { width: 9px; height: 9px; fill: currentColor; } .delta.up { color: var(--success); background: var(--success-soft); border: 1px solid var(--success-border); } .delta.down { color: var(--danger); background: var(--danger-soft); border: 1px solid var(--danger-border); } /* ---------- Meter (CPA vs cible) ---------- */ .meter { margin-top: 2px; } .meter-track { position: relative; height: 6px; border-radius: 999px; background: var(--accent-soft); overflow: visible; } .meter-fill, .meter-overrun { position: absolute; inset-block: 0; border-radius: 999px; transition: width 0.6s var(--ease-out); } .meter-fill { left: 0; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); box-shadow: 0 0 10px var(--accent-glow); } .meter-overrun { background: var(--danger); box-shadow: 0 0 8px color-mix(in srgb, var(--danger) 22%, transparent); } .meter-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--ink-soft); } /* ---------- Alertes (seuils de décision) ---------- */ /* Bandeau horizontal : les seuils se lisent d'un coup d'oeil sans empiler de grandes barres sur toute la largeur. */ .alert-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 10px; } .alert { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px 14px; border-radius: 11px; border: 1px solid var(--line); background: var(--panel); } .alert svg { width: 17px; height: 17px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .alert strong { display: block; font-size: 13.5px; } .alert span { display: block; margin-top: 1px; color: var(--muted); font-size: 12.5px; } .alert-ok { border-color: var(--success-border); background: var(--success-soft); color: var(--success); } .alert-info { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-strong); } .alert-warning { border-color: var(--warning-border); background: var(--warning-soft); color: var(--warning); } .alert-danger { border-color: var(--danger-border); background: var(--danger-soft); color: var(--danger); } .alert-ok strong, .alert-info strong, .alert-warning strong, .alert-danger strong { color: var(--ink); } /* ---------- Panels ---------- */ .panel { min-width: 0; padding: 17px 18px; } /* Réservé au chrome de configuration (ex. connexion Meta) — jamais aux panneaux porteurs de données : les chiffres restent sur fond opaque `.panel` pour la lisibilité. */ .panel-glass { background: var(--glass-light-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-light-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(0, 0, 0, 0.2), 0 26px 56px rgba(20, 10, 40, 0.45); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .panel-glass { background: var(--panel); } } .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .panel-note { margin: 12px 0 0; color: var(--faint); font-size: 12.5px; } .inline-code { display: inline; padding: 1px 6px; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: 6px; font-size: 12px; } /* ---------- Tables ---------- */ .table-wrap { overflow-x: auto; } table { width: 100%; min-width: 540px; border-collapse: collapse; } th, td { padding: 10px 10px; border-bottom: 1px solid var(--line-soft); text-align: left; white-space: nowrap; } th { color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; } td { font-size: 13.5px; } tbody tr:last-child td { border-bottom: 0; } tbody tr { transition: background-color 0.12s ease; } tbody tr:hover td { background: var(--row-hover); } /* ligne qui attend une preuve : filet ambre à gauche, repérage immédiat */ tbody tr.row-flag td:first-child { box-shadow: inset 3px 0 0 var(--warning); padding-left: 13px; } .status-pill { min-height: 24px; padding: 3px 9px; font-size: 11.5px; } .status-pill.ok { color: var(--success); background: var(--success-soft); border: 1px solid var(--success-border); } .status-pill.watch { color: var(--warning); background: var(--warning-soft); border: 1px solid var(--warning-border); } .status-pill.bad { color: var(--danger); background: var(--danger-soft); border: 1px solid var(--danger-border); } .status-pill.neutral { color: var(--muted); background: var(--accent-soft); border: 1px solid var(--line); } /* ---------- Graphiques ---------- */ .chart { min-height: 60px; } .chart-svg { display: block; width: 100%; height: auto; } .grid-line { stroke: var(--chart-grid); stroke-width: 1; } .axis-line { stroke: var(--chart-axis); stroke-width: 1; } .tick-label { font-size: 11px; fill: var(--faint); font-variant-numeric: tabular-nums; } .value-label { font-size: 11.5px; font-weight: 650; fill: var(--ink-soft); } /* Aire lissée (revenue, dépense ads) */ .area-fill { animation: areaIn 1s ease 0.25s both; } @keyframes areaIn { from { opacity: 0; } to { opacity: 1; } } .area-line { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 3px 10px var(--accent-glow)); stroke-dasharray: var(--len, 1500); stroke-dashoffset: var(--len, 1500); animation: draw 1.15s var(--ease-out) 0.08s forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } .area-dot { fill: var(--bg); stroke-width: 2; } /* Un point par donnée réelle : discret, il marque ce qui est mesuré */ .area-point { fill: var(--bg); stroke-width: 1.6; opacity: 0.55; } .crosshair-line { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.75; } .crosshair-dot { stroke: var(--bg); stroke-width: 2; filter: drop-shadow(0 0 6px var(--accent-glow)); } .hit-area { cursor: default; outline-offset: -2px; } .chart-empty { display: grid; gap: 6px; justify-items: start; padding: 26px 4px; color: var(--faint); font-size: 13px; } .chart-empty a { color: var(--accent-strong); font-weight: 600; text-decoration: none; cursor: pointer; } .chart-empty a:hover { text-decoration: underline; } /* Barres horizontales */ .hbar { display: grid; gap: 9px; } .hbar-row { display: grid; grid-template-columns: 108px minmax(0, 1fr) 108px; gap: 10px; align-items: center; border-radius: 6px; } .hbar-label { color: var(--ink-soft); font-size: 12.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hbar-track { position: relative; height: 14px; } .hbar-bar { position: absolute; inset: 1px auto 1px 0; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); box-shadow: 0 0 12px var(--accent-glow); transition: width 0.75s var(--ease-out), opacity 0.12s ease; } .hbar-row:hover .hbar-bar, .hbar-row:focus-visible .hbar-bar { opacity: 0.82; } .hbar.has-target .hbar-track::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: var(--target-x); width: 2px; border-radius: 1px; background: var(--ink-soft); } .hbar-value { display: flex; align-items: center; justify-content: flex-end; gap: 6px; color: var(--ink); font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; } .hbar-note { margin: 10px 0 0; color: var(--faint); font-size: 12px; } /* Barres empilées */ .chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; } .legend-item { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 550; } .legend-swatch { width: 10px; height: 10px; flex: none; border-radius: 3px; } .stack { display: grid; gap: 10px; } .stack-row { display: grid; grid-template-columns: 108px minmax(0, 1fr) 82px; gap: 10px; align-items: center; border-radius: 6px; } .stack-label { color: var(--ink-soft); font-size: 12.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stack-track { position: relative; height: 18px; } .stack-seg { position: absolute; top: 1px; bottom: 1px; display: flex; align-items: center; justify-content: center; border-radius: 2px; overflow: visible; transition: opacity 0.12s ease; } .stack-row:hover .stack-seg, .stack-row:focus-visible .stack-seg { opacity: 0.85; } .seg-label { font-size: 10.5px; font-weight: 650; pointer-events: none; } .stack-value { text-align: right; color: var(--ink); font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; } /* Tooltip */ .chart-tooltip { position: fixed; z-index: 60; max-width: 260px; padding: 9px 11px; border-radius: 9px; background: var(--tooltip-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.09); color: white; font-size: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); pointer-events: none; animation: ttIn 0.14s ease; } @keyframes ttIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } } .chart-tooltip[hidden] { display: none; } .tt-title { margin-bottom: 5px; color: #b9b1c8; font-size: 11px; font-weight: 650; } .tt-row { display: flex; align-items: center; gap: 7px; margin-top: 3px; } .tt-key { width: 10px; height: 2.5px; flex: none; border-radius: 2px; } .tt-label { color: #cfc8db; } .tt-value { margin-left: auto; padding-left: 10px; font-weight: 700; font-variant-numeric: tabular-nums; } /* Table jumelle sous les graphiques */ .chart-data { margin-top: 10px; } .chart-data summary { color: var(--faint); font-size: 12px; font-weight: 550; cursor: pointer; } .chart-data summary:hover { color: var(--accent-strong); } .chart-data table { min-width: 0; margin-top: 8px; } .chart-data th, .chart-data td { padding: 6px 8px; font-size: 12.5px; } /* ---------- Listes priorités / risques ---------- */ .priority-list, .risk-list { display: grid; gap: 9px; } .priority-item, .risk-item { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 10px; padding: 11px 12px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 10px; transition: border-color 0.16s ease, transform 0.16s var(--ease-out); } .priority-item:hover, .risk-item:hover { border-color: var(--accent-border); } .priority-item::before, .risk-item::before { content: ""; width: 9px; height: 9px; margin-top: 5px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); } .priority-item strong, .priority-item span, .risk-item strong, .risk-item span { display: block; } .priority-item strong, .risk-item strong { font-size: 13.5px; } .priority-item span, .risk-item span { margin-top: 2px; color: var(--muted); font-size: 12.5px; } /* ---------- Checklists ---------- */ .check-list { display: grid; gap: 8px; } .check-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 10px; transition: border-color 0.16s ease; } .check-item:hover { border-color: var(--accent-border); } .check-item label { display: flex; align-items: center; gap: 10px; flex: 1; cursor: pointer; font-size: 13.5px; } .check-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent-deep); } .check-item.done label { color: var(--muted); } .check-item .grow { flex: 1; font-size: 13.5px; } /* Effectif accolé à une valeur de tableau : là pour qualifier le chiffre, jamais assez appuyé pour lui disputer la lecture. */ .cell-note { margin-left: 6px; color: var(--faint); font-size: 11.5px; font-variant-numeric: tabular-nums; } .risk-changed { display: block; margin-top: 2px; color: var(--faint); font-size: 11px; } .state-chip { min-height: 26px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft); font-size: 11.5px; font-weight: 650; cursor: pointer; white-space: nowrap; transition: transform 0.1s ease; } .state-chip:active { transform: scale(0.95); } .state-chip.ok { color: var(--success); background: var(--success-soft); border-color: var(--success-border); } .state-chip.watch { color: var(--warning); background: var(--warning-soft); border-color: var(--warning-border); } .state-chip.blocked { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-border); } /* ---------- Imports ---------- */ .import-scan { display: grid; gap: 8px; margin-top: 12px; } .import-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 10px; } .import-row strong { min-width: 150px; font-size: 13px; } .import-row .import-source { flex: 1; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .scan-message { margin-top: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--warning-border); background: var(--warning-soft); color: var(--warning); font-size: 12.5px; } .scan-message.ok { border-color: var(--success-border); background: var(--success-soft); color: var(--success); } .alert a, .chart-empty a { color: var(--accent-strong); font-weight: 600; text-decoration: none; cursor: pointer; } .alert a:hover, .chart-empty a:hover { text-decoration: underline; } .upload-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .upload-box { display: grid; gap: 10px; align-content: start; min-height: 124px; padding: 14px; background: var(--panel-2); border: 1px dashed var(--line); border-radius: 10px; cursor: pointer; transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s var(--ease-out); } .upload-box:hover, .upload-box.dragover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); } .upload-box span { font-weight: 650; font-size: 13px; } .upload-box input { width: 100%; color: var(--muted); font-size: 11.5px; } .upload-box input::file-selector-button { margin-right: 8px; padding: 4px 10px; color: var(--ink-soft); background: var(--panel); border: 1px solid var(--line); border-radius: 7px; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 550; } .upload-box input::file-selector-button:hover { border-color: var(--accent); color: var(--accent-strong); } .upload-box small { color: var(--faint); font-size: 11.5px; } .file-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .file-list code { display: block; padding: 10px 12px; overflow-wrap: anywhere; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: var(--radius-sm); font-size: 12.5px; } /* ---------- Tests créatifs ---------- */ .exp-form { display: flex; flex-wrap: wrap; gap: 10px; } .exp-form input[type="text"], .exp-form input[type="password"], .exp-form select { min-height: 34px; padding: 6px 10px; color: var(--ink); background: var(--panel-inset); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 13px; transition: border-color 0.16s ease, box-shadow 0.16s ease; } .exp-form input:focus, .exp-form select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; } /* dans un panneau vitré, les champs restent lisibles mais épousent le fond translucide plutôt que de s'y poser comme des pastilles opaques */ .panel-glass .exp-form input[type="text"], .panel-glass .exp-form input[type="password"], .panel-glass .exp-form select { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.16); } [data-theme="light"] .panel-glass .exp-form input[type="text"], [data-theme="light"] .panel-glass .exp-form input[type="password"], [data-theme="light"] .panel-glass .exp-form select { background: rgba(255, 255, 255, 0.72); border-color: rgba(255, 255, 255, 0.9); } .exp-form input#expAngle { flex: 1 1 200px; } .exp-form input#expHypothesis { flex: 2 1 260px; } .exp-form input#metaAccount { flex: 1 1 190px; } .exp-form input#metaToken { flex: 2 1 260px; } .exp-form input.meta-version { flex: 0 1 90px; } .meta-days-label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; } .meta-days-label input { width: 58px; min-height: 28px; padding: 4px 8px; color: var(--ink); background: var(--panel-inset); border: 1px solid var(--line); border-radius: 7px; font-size: 12px; } #metaStatus.status-ok { color: var(--success); } #metaStatus.status-error { color: var(--danger); } .exp-list { display: grid; gap: 10px; margin-top: 14px; } .exp-item { padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 10px; } .exp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .exp-head strong { font-size: 13.5px; } .exp-head .exp-id { color: var(--faint); font-size: 11.5px; font-variant-numeric: tabular-nums; } .exp-hypothesis { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; } .exp-naming { margin: 10px 0 0; padding: 9px 11px; overflow-x: auto; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: var(--radius-sm); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.6; white-space: pre; } .exp-stats { margin: 8px 0 0; color: var(--muted); font-size: 12.5px; } .exp-learning { margin: 8px 0 0; color: var(--ink-soft); font-size: 12.5px; } .exp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .mini-button { min-height: 28px; padding: 4px 10px; color: var(--ink-soft); background: var(--panel); border: 1px solid var(--line); border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 550; transition: border-color 0.16s ease, color 0.16s ease, transform 0.1s ease; } .mini-button:hover { border-color: var(--accent); color: var(--accent-strong); } .mini-button:active { transform: translateY(1px); } .mini-button.danger:hover { border-color: var(--danger); color: var(--danger); } /* ---------- Accessibilité mouvement ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* Les courbes ne doivent jamais dépendre d'une animation pour être visibles : sans ça, un tracé reste masqué (dashoffset plein, aire à opacité 0) et la donnée disparaît en silence au lieu de s'afficher sans transition. */ .area-line, .stream-line { stroke-dashoffset: 0; } .area-fill, .stream-fill { opacity: 1; } } /* ---------- Responsive ---------- */ @media (max-width: 1240px) { .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kpi-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .upload-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hero-stats, .hero-stats.cols-4, .hero-stats.cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; } .hero-stat:nth-child(4) { padding-left: 0; border-left: 0; } .criteria-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1100px) { .layout-two, .layout-two.is-even { grid-template-columns: 1fr; } .hero-main { grid-template-columns: 1fr; } .hero-value strong { font-size: 36px; } } @media (max-width: 760px) { .shell { grid-template-columns: 1fr; } .sidebar { position: relative; height: auto; gap: 18px; } .brand img { width: 132px; } .nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } .nav-item { justify-content: center; padding: 9px 4px; } .nav-item.active::before { left: 10%; right: 10%; top: auto; bottom: -4px; width: auto; height: 3px; } .nav-item span:not(.nav-badge) { display: none; } .nav-badge { position: absolute; top: 1px; right: 4px; margin: 0; min-width: 16px; height: 16px; font-size: 9.5px; } .sidebar-footer { display: none; } .main { padding: 0 16px 32px; } .topbar { align-items: flex-start; flex-direction: column; margin: 0 -16px 18px; padding: 16px 16px 12px; } .kpi-grid, .kpi-grid-4, .upload-grid, .file-list { grid-template-columns: 1fr; } .hero-stats, .hero-stats.cols-4, .hero-stats.cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero-stat:nth-child(odd) { padding-left: 0; border-left: 0; } .hero-stat:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line-soft); } .criteria-grid { grid-template-columns: 1fr; } .stack-row { grid-template-columns: 84px minmax(0, 1fr) 84px; } /* la valeur passe sous la barre : jamais tronquée, même avec sa puce de statut */ .hbar-row { grid-template-columns: 76px minmax(0, 1fr); } .hbar-value { grid-column: 2; grid-row: 2; justify-content: flex-start; margin-top: 3px; } } /* ========================================================================== V5 — Sélecteur de période, gestion directe, overlay campagnes (2026-07-23) ========================================================================== */ /* ---------- Utilitaire ---------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Sélecteur de période (barre du haut) ---------- */ .top-actions { flex-wrap: wrap; justify-content: flex-end; } .range-bar, .filter-chips { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; } .range-bar button, .filter-chips button { min-height: 26px; padding: 3px 10px; color: var(--muted); background: transparent; border: 0; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 600; white-space: nowrap; transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .range-bar button:hover, .filter-chips button:hover { color: var(--ink); } .range-bar button.active, .filter-chips button.active { color: var(--accent-strong); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-border); } .range-custom-wrap { position: relative; display: inline-flex; } .range-pop { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: var(--layer-modal); display: grid; gap: 14px; width: min(440px, calc(100vw - 32px)); min-width: 0; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 60px rgba(18, 20, 27, 0.16); } .range-sheet-handle { display: none; } .range-scrim:not([hidden]) { position: fixed; inset: 0; z-index: calc(var(--layer-modal) - 1); width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: var(--modal-dim); touch-action: none; } .range-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .range-sheet-head h2 { font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.025em; } .range-sheet-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-inset); color: var(--ink); font-size: 1.5rem; cursor: pointer; } .range-sheet-intro { margin: 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.5; } .range-sheet-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .range-sheet-presets button { min-height: 42px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-inset); color: var(--ink-soft); font: inherit; font-size: 0.8125rem; cursor: pointer; } .range-sheet-presets button.active { color: var(--accent-strong); background: var(--accent-soft); border-color: var(--accent-border); } .range-sheet-divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.75rem; } .range-sheet-divider::before, .range-sheet-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); } .range-pop input[type="date"] { width: 100%; min-width: 0; min-height: 44px; } .range-pop #rangeApply { color: #fff; background: var(--accent-strong); border-color: var(--accent-strong); } html.range-scroll-locked, html.campaign-scroll-locked { overflow: hidden; height: 100%; } html.range-scroll-locked body, html.campaign-scroll-locked body { position: fixed; left: 0; right: 0; width: 100%; height: 100dvh; overflow: hidden; } .range-scrim[hidden], .range-pop[hidden] { display: none !important; } .range-pop label { display: grid; gap: 4px; color: var(--muted); font-size: 12px; font-weight: 600; } .range-pop-actions { display: flex; justify-content: flex-end; gap: 8px; } /* ---------- Champs de formulaire (extension du pattern .exp-form) ---------- */ .exp-form input[type="date"], .exp-form input[type="number"], .journal-filters input[type="search"], .journal-filters select, .range-pop input[type="date"], .name-edit-input { min-height: 34px; padding: 6px 10px; color: var(--ink); background: var(--panel-inset); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; transition: border-color 0.16s ease, box-shadow 0.16s ease; } .exp-form input[type="date"]:focus, .exp-form input[type="number"]:focus, .journal-filters input[type="search"]:focus, .journal-filters select:focus, .range-pop input[type="date"]:focus, .name-edit-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; } .exp-form input[aria-invalid="true"] { border-color: var(--danger); } .exp-form input[aria-invalid="true"]:focus { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); } .form-error { margin: 10px 0 0; color: var(--danger); font-size: 12.5px; } .exp-form input#finDate { flex: 0 1 150px; } .exp-form input#finCat { flex: 1 1 140px; } .exp-form input#finDesc { flex: 2 1 190px; } .exp-form input#finAmount { flex: 0 1 120px; } .exp-form select#finDevise { flex: 0 1 80px; } .exp-form input#srcName { flex: 2 1 200px; } .exp-form input#srcClicks, .exp-form input#srcSubs, .exp-form input#srcCosts, .exp-form input#srcEarnings { flex: 1 1 96px; } .name-edit-input { min-height: 28px; width: 170px; padding: 3px 8px; } /* champ du taux : plus court qu'un champ de nom, pensé pour un pourcentage */ .name-edit-input.rate-edit-input { width: 96px; } .exp-form input#payGlobalRate { flex: 0 1 130px; } .exp-form select#payPerson { flex: 1 1 180px; } .exp-form input#payAmount { flex: 0 1 120px; } .exp-form select#payDevise { flex: 0 1 80px; } .exp-form input#payDate { flex: 0 1 150px; } .exp-form input#payNote { flex: 2 1 180px; } /* ---------- Bascule Sortie / Entrée ---------- */ .seg-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--panel-inset); border: 1px solid var(--line); border-radius: var(--radius-sm); } .seg-toggle button { min-height: 28px; padding: 4px 14px; color: var(--muted); background: transparent; border: 0; border-radius: 7px; cursor: pointer; font-size: 12.5px; font-weight: 600; transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .seg-toggle button.active { color: var(--accent-strong); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-border); } .fin-check { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12.5px; font-weight: 550; cursor: pointer; user-select: none; } .fin-check input { accent-color: var(--accent-deep); width: 15px; height: 15px; } /* ---------- Mini boutons icône ---------- */ .icon-mini { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; color: var(--faint); background: transparent; border: 1px solid transparent; border-radius: 7px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .icon-mini svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .icon-mini:hover { color: var(--accent-strong); background: var(--accent-soft); border-color: var(--accent-border); } .icon-mini.danger:hover { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-border); } /* Le bouton d'agrandissement des campagnes reste visible sans survol */ #expandCampaigns { color: var(--muted); border-color: var(--line); } /* ---------- Noms éditables (modèles, sources) ---------- */ .name-edit { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; } .name-edit-btn { opacity: 0.45; } .name-edit:hover .name-edit-btn, .name-edit-btn:focus-visible { opacity: 1; } .src-chip { margin-left: 8px; min-height: 20px; padding: 2px 8px; font-size: 10.5px; } /* ---------- Journal finance : filtres et actions ---------- */ .journal-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; } .journal-filters input[type="search"] { flex: 1 1 160px; min-width: 130px; min-height: 32px; } .journal-filters select { min-height: 32px; max-width: 190px; } .row-actions { width: 1%; white-space: nowrap; text-align: right; } td.row-actions { padding-right: 8px; } td.row-actions .icon-mini + .icon-mini { margin-left: 4px; } .status-toggle { cursor: pointer; font-family: inherit; } .status-toggle:hover { filter: brightness(1.18); } .empty-row td { padding: 26px 12px; color: var(--faint); text-align: center; } /* ---------- Layout principal / latéral (journal + catégories) ---------- */ .layout-main-side { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr); gap: 16px; } /* ---------- Overlay campagnes ---------- */ body.overlay-open { overflow: hidden; } .overlay { position: fixed; inset: 0; z-index: var(--layer-modal); display: grid; place-items: center; padding: 24px; } .overlay-backdrop { position: absolute; inset: 0; background: var(--modal-dim); } [data-theme="light"] .overlay-backdrop { background: var(--modal-dim); } .overlay-panel { position: relative; width: min(1060px, 100%); max-height: calc(100vh - 48px); overflow: auto; padding: 26px 28px; background: var(--panel); border: 1px solid var(--accent-border); border-radius: var(--radius); box-shadow: var(--shadow-lift); animation: none; } .overlay-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .overlay-head-actions { display: flex; align-items: center; gap: 10px; } .overlay-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 18px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); overflow: hidden; } .overlay-stat { padding: 12px 14px; } .overlay-stat + .overlay-stat { border-left: 1px solid var(--line-soft); } .overlay-stat span { display: block; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .overlay-stat strong { display: block; margin-top: 3px; font-size: 19px; font-weight: 680; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .overlay-table { max-height: 52vh; overflow: auto; } .overlay-table thead th { position: sticky; top: 0; z-index: 1; background: var(--panel); } .sort-th { padding: 4px 6px; margin: -4px -6px; color: inherit; background: transparent; border: 0; border-radius: 6px; cursor: pointer; font: inherit; font-weight: 650; transition: color 0.15s ease, background 0.15s ease; } .sort-th:hover { color: var(--accent-strong); background: var(--accent-soft); } .sort-th.sorted { color: var(--accent-strong); } /* ---------- Responsive V5 ---------- */ @media (max-width: 1100px) { .layout-main-side { grid-template-columns: 1fr; } } @media (max-width: 900px) { .overlay-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .overlay-stat:nth-child(4) { border-left: 0; } .overlay-stat:nth-child(n + 4) { border-top: 1px solid var(--line-soft); } } @media (max-width: 760px) { .overlay { padding: 10px; } .overlay-panel { padding: 18px 16px; max-height: calc(100vh - 20px); } .overlay-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .overlay-stat:nth-child(4) { border-left: 1px solid var(--line-soft); } .overlay-stat:nth-child(odd) { border-left: 0; } .overlay-stat:nth-child(n + 3) { border-top: 1px solid var(--line-soft); } .journal-filters { align-items: stretch; flex-direction: column; } .journal-filters select, .journal-filters input[type="search"] { max-width: none; width: 100%; } } /* ---------- Bascule courbe / colonnes (2026-08-10) ---------- */ .head-actions { display: inline-flex; align-items: center; gap: 8px; } .chart-toggle { display: inline-flex; gap: 2px; padding: 2px; background: var(--panel-inset); border: 1px solid var(--line); border-radius: 8px; } .chart-toggle-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 6px 9px; font: inherit; font-size: 0.8125rem; color: var(--muted); background: transparent; border: 0; border-radius: 6px; cursor: pointer; transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .chart-toggle-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @media (hover: hover) and (pointer: fine) { .chart-toggle-btn:hover { color: var(--ink); } } .chart-toggle-btn.active { color: var(--accent-strong); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-border); } /* Barres de l'histogramme : poussent depuis la ligne du zéro */ .col-bar { transform-box: fill-box; transition: transform 0.55s var(--ease-out), filter 0.15s ease; cursor: default; outline-offset: 2px; } .col-bar:hover, .col-bar.hover { filter: brightness(1.28); } /* UX : contexte explicite, données stables et commandes lisibles. */ .workspace-context { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: -4px 0 18px; color: var(--muted); font-size: 0.8125rem; line-height: 1.5; } .workspace-context p { margin: 0; } .workspace-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; } .workspace-scope .pill { min-height: 22px; padding: 2px 7px; font-size: 0.6875rem; font-weight: 550; } .storage-error { color: var(--danger); font-weight: 600; } #view-overview .overview-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } #view-overview .overview-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .overview-analysis { margin-top: 18px; border-top: 1px solid var(--line-soft); padding-top: 14px; } .overview-analysis summary { cursor: pointer; color: var(--muted); font-size: 0.875rem; } .overview-analysis .hero-stats { margin-top: 14px; } #view-overview .hero-side { justify-content: flex-start; padding-top: 12px; } #view-overview .hero-stat small, #scopeNoteOverview { font-size: 0.8125rem; line-height: 1.5; } #view-overview .panel-head { flex-wrap: wrap; gap: 10px; } #view-overview .head-actions { flex-wrap: wrap; } #chartRevenueDay .chart-data { max-height: 300px; overflow: auto; } #chartRevenueDay .area-line { animation: none; stroke-dashoffset: 0; } #chartRevenueDay .area-fill { animation: none; opacity: 1; } .chart-data tfoot th, .chart-data tfoot td { border-top: 1px solid var(--line); font-weight: 650; } .finance-field { display: flex; flex-direction: column; flex: 1 1 140px; gap: 6px; color: var(--muted); font-size: 0.8125rem; } .finance-field-wide { flex: 2 1 190px; } .finance-field-currency { flex: 0 1 100px; } #finForm .finance-field input, #finForm .finance-field select { width: 100%; flex: none; min-width: 0; } #finForm { align-items: flex-end; } button, summary, .nav-item { touch-action: manipulation; } button { -webkit-user-select: none; user-select: none; } button:active { filter: brightness(0.92); } .overlay-panel { max-height: calc(100dvh - 48px); overscroll-behavior: contain; } @media (pointer: coarse) { input, textarea, select { font-size: 16px; } .chart-toggle-btn, .icon-btn, .ghost-button, .mini-button, .range-bar button, .icon-mini { min-height: 44px; } .icon-btn, .icon-mini { min-width: 44px; } } @media (max-width: 760px) { /* Une navigation nommée, défilable au doigt et au clavier, sans consommer le haut de page. */ .sidebar { padding: 12px 16px 4px; gap: 0; backdrop-filter: none; -webkit-backdrop-filter: none; } .brand img { width: 108px; } .nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; display: flex; gap: 4px; padding: 8px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); overflow-x: auto; background: rgba(22, 16, 34, 0.86); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border-top: 1px solid var(--line); overscroll-behavior-x: contain; } .nav-item { flex: 0 0 auto; width: auto; flex-direction: column; gap: 5px; min-width: 82px; min-height: 54px; padding: 7px 9px; } .nav-item span:not(.nav-badge) { display: block; font-size: 0.75rem; white-space: nowrap; } .nav-item.active::before { bottom: 0; } .main { padding-bottom: calc(104px + env(safe-area-inset-bottom)); } .topbar { padding-top: 10px; margin-bottom: 12px; } .topbar .eyebrow { display: none; } .top-actions { justify-content: flex-start; width: 100%; } .range-bar { flex-wrap: wrap; max-width: 100%; } #resetDemo { font-size: 0.75rem; } .workspace-context { font-size: 0.75rem; } #view-overview .overview-stats { grid-template-columns: 1fr; } #view-overview .overview-stats .hero-stat { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 10px 0; border-left: 0; } #view-overview .overview-stats .hero-stat strong { font-size: 1.125rem; margin: 0; } #view-overview .overview-stats .hero-stat small { grid-column: 1 / -1; } #view-overview .overview-secondary { grid-template-columns: 1fr; } #view-overview .overview-secondary .hero-stat { padding-left: 0; border-left: 0; } #view-overview .hero-side { padding-top: 0; } #view-overview .head-actions { width: 100%; justify-content: space-between; } .chart-toggle-btn { min-height: 40px; } .finance-field, .finance-field-wide { flex-basis: 100%; } .overlay-panel { max-height: calc(100dvh - 20px); } } @media (max-width: 760px) { [data-theme="light"] .nav { background: rgba(250, 248, 253, 0.88); } } @media (prefers-reduced-transparency: reduce) { .topbar, .nav, .overlay-panel { background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none; } } @media (prefers-contrast: more) { .workspace-context, .hero-stat small, .overview-analysis summary { color: var(--ink); } .nav, .chart-toggle, .panel { border-color: var(--ink); } } /* ========================================================================== V9 — Direction NymphReach + plan d'action priorisé Surfaces sobres, violet franc et micro-interactions courtes/interruptibles. ========================================================================== */ :root { --bg: #1d201e; --panel: #232624; --panel-2: #272a28; --panel-inset: #1f2220; --ink: #f0f1ef; --ink-soft: #c9ccc9; --muted: #969b97; --faint: #7e837f; --line: rgba(255, 255, 255, 0.1); --line-soft: rgba(255, 255, 255, 0.065); --accent: #a34af0; --accent-strong: #bd73f4; --accent-deep: #8c40e7; --accent-soft: rgba(163, 74, 240, 0.13); --accent-border: rgba(177, 95, 241, 0.34); --accent-glow: rgba(163, 74, 240, 0.18); --series-1: #a34af0; --finance-outflow: #c17d86; --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(0, 0, 0, 0.14); --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.15); --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); } [data-theme="light"] { --bg: #ffffff; --panel: #ffffff; --panel-2: #fafafa; --panel-inset: #f7f7f8; --ink: #222523; --ink-soft: #555a56; --muted: #7a817b; --faint: #919791; --line: #e3e2e6; --line-soft: #ecebef; --accent: #9541e9; --accent-strong: #8433d7; --accent-deep: #7529c6; --accent-soft: #f2eafa; --accent-border: #dfcef3; --accent-glow: rgba(149, 65, 233, 0.15); --series-1: #9541e9; --finance-outflow: #a8616a; --shadow: 0 1px 2px rgba(26, 27, 26, 0.025); --shadow-lift: 0 8px 22px rgba(26, 27, 26, 0.06); } body::before { opacity: 0.34; } [data-theme="light"] body { background: #ffffff; } @media (min-width: 761px) { .shell { grid-template-columns: 260px minmax(0, 1fr); } .sidebar { padding: 26px 18px 20px; gap: 26px; } .main { padding-inline: 44px; } .topbar { margin-inline: -44px; padding-inline: 44px; min-height: 78px; } } .sidebar { background: #171519; border-color: var(--line); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } [data-theme="light"] .sidebar { background: #fbfafd; } .brand img { filter: none; } .nav-overline { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: none; } .nav-item { min-height: 44px; font-size: 0.875rem; font-weight: 560; } .nav-item.active { box-shadow: none; } .nav-item.active::before { left: -10px; width: 3px; box-shadow: none; background: currentColor; } .sidebar-footer { box-shadow: none; } .panel, .metric { box-shadow: var(--shadow); } .panel:hover, .metric:hover { box-shadow: var(--shadow); } button, input, select { -webkit-tap-highlight-color: transparent; } input, select, textarea { color: var(--ink); background: var(--panel); border-color: var(--line); border-radius: var(--radius-sm); transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); outline: none; } body[data-active-view="tasks"] .range-bar, body[data-active-view="tasks"] #dataFreshness, body[data-active-view="tasks"] #dataMode, body[data-active-view="tasks"] #resetDemo, body[data-active-view="tasks"] .workspace-context { display: none; } /* ---------- To-do ---------- */ #view-tasks { gap: 22px; } .tasks-intro { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 18px 4px 6px; } .tasks-intro h2 { max-width: 760px; font-size: clamp(2rem, 4vw, 3rem); font-weight: 710; line-height: 1.02; letter-spacing: -0.045em; } .tasks-intro > div > p:last-child { max-width: 720px; margin: 10px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.55; } .primary-action, .secondary-action, .primary-button { border: 0; cursor: pointer; font: inherit; } .primary-action { flex: 0 1 390px; min-height: 70px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 12px 16px; color: #ffffff; text-align: left; background: linear-gradient(135deg, #8c40e7, #ae55ec); border-radius: var(--radius); box-shadow: 0 12px 30px rgba(149, 65, 233, 0.18); transition: transform 140ms var(--ease-out), box-shadow 160ms ease, filter 160ms ease; } .primary-action-icon { width: 40px; height: 40px; display: grid; place-items: center; color: var(--accent-deep); background: rgba(255, 255, 255, 0.9); border-radius: 50%; font-size: 0.78rem; } .primary-action small, .primary-action strong { display: block; } .primary-action small { margin-bottom: 3px; color: rgba(255, 255, 255, 0.75); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; } .primary-action strong { overflow: hidden; font-size: 0.86rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .primary-action:disabled { cursor: default; opacity: 0.65; } .task-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .task-summary article { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; min-height: 104px; padding: 20px 24px; border-right: 1px solid var(--line); } .task-summary article:last-child { border-right: 0; } .task-summary strong { font-size: 1.9rem; font-weight: 560; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; } .task-summary small { color: var(--muted); font-size: 0.84rem; line-height: 1.3; } .task-summary-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; font-weight: 700; } .task-summary-icon.critical { color: var(--danger); background: var(--danger-soft); } .task-summary-icon.now { color: var(--accent-strong); background: var(--accent-soft); } .task-summary-icon.done { color: var(--success); background: var(--success-soft); } .task-summary-icon.progress { color: var(--warning); background: var(--warning-soft); } .task-toolbar { padding: 14px; } .task-toolbar-main { display: flex; align-items: center; gap: 10px; } .task-search { min-width: 220px; flex: 1; position: relative; } .task-search svg { position: absolute; left: 13px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; } .task-search input, .task-toolbar select, .task-create input, .task-create select { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--line); } .task-search input { padding-left: 40px; } .task-toolbar-main > select { width: min(230px, 24vw); } .task-priority-filter { display: inline-flex; align-items: center; gap: 3px; padding: 3px; background: var(--panel-inset); border: 1px solid var(--line); border-radius: 10px; } .task-priority-filter button, .secondary-action { min-height: 34px; padding: 7px 10px; color: var(--muted); background: transparent; border: 0; border-radius: 7px; cursor: pointer; font-size: 0.75rem; font-weight: 650; transition: color 160ms ease, background-color 160ms ease, transform 140ms var(--ease-out); } .task-priority-filter button.active { color: var(--ink); background: var(--panel); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); } .secondary-action { min-height: 42px; padding-inline: 14px; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid var(--accent-border); white-space: nowrap; } .task-create { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(170px, 0.45fr) minmax(140px, 0.3fr) auto; align-items: end; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); } .task-create[hidden] { display: none; } .task-create label { display: grid; gap: 6px; color: var(--muted); font-size: 0.74rem; font-weight: 650; } .primary-button { min-height: 42px; padding: 9px 17px; color: #fff; background: var(--accent); border-radius: var(--radius-sm); font-weight: 700; transition: transform 140ms var(--ease-out), filter 160ms ease; } .task-layout { display: grid; grid-template-columns: minmax(230px, 280px) minmax(0, 1fr); align-items: start; gap: 18px; } .task-categories { position: sticky; top: 100px; padding: 18px 12px; } .task-categories .panel-head { padding-inline: 7px; } .task-category-list { display: grid; gap: 3px; max-height: calc(100vh - 230px); overflow: auto; padding-right: 3px; } .task-category-button { width: 100%; min-height: 39px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 9px; color: var(--muted); background: transparent; border: 0; border-radius: 8px; cursor: pointer; text-align: left; transition: color 160ms ease, background-color 160ms ease, transform 140ms var(--ease-out); } .task-category-button > span { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 0.78rem; } .task-category-button > span i { width: 6px; height: 6px; flex: none; background: var(--line); border-radius: 50%; } .task-category-button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .task-category-button small, .task-count-bubble { min-width: 28px; height: 26px; display: inline-grid; place-items: center; padding: 0 7px; color: var(--muted); background: var(--panel-inset); border-radius: 999px; font-size: 0.72rem; font-variant-numeric: tabular-nums; } .task-category-button.active { color: var(--ink); background: var(--accent-soft); } .task-category-button.active > span i { background: var(--accent); } .task-category-button.active small { color: var(--accent-strong); background: var(--panel); } .task-list-panel { padding: 0; overflow: clip; } .task-list-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); } .task-list-head h2 { font-size: 1.12rem; } .task-list-head p:last-child { margin: 6px 0 0; color: var(--muted); font-size: 0.78rem; } .task-list-actions { display: flex; align-items: center; gap: 12px; } .task-open-only { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); cursor: pointer; font-size: 0.78rem; white-space: nowrap; } .task-open-only input { accent-color: var(--accent); } .task-next-block { padding: 18px 24px; background: color-mix(in srgb, var(--accent-soft) 44%, var(--panel)); border-bottom: 1px solid var(--line); } .task-next-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; } .task-next-heading span { font-size: 0.76rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; } .task-next-heading small { color: var(--muted); font-size: 0.72rem; } .task-next-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; } .task-next-grid button { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 68px; padding: 10px 12px; color: var(--ink); text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; cursor: pointer; transition: border-color 160ms ease, transform 140ms var(--ease-out), box-shadow 160ms ease; } .task-next-grid button strong, .task-next-grid button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .task-next-grid button strong { font-size: 0.78rem; } .task-next-grid button small { margin-top: 4px; color: var(--muted); font-size: 0.69rem; } .task-next-rank { width: 30px; height: 30px; display: grid; place-items: center; color: var(--accent-strong); background: var(--accent-soft); border-radius: 8px; font-size: 0.72rem; font-weight: 750; } .task-complete-state { display: flex; align-items: center; gap: 12px; color: var(--success); } .task-complete-state > span { width: 36px; height: 36px; display: grid; place-items: center; background: var(--success-soft); border-radius: 50%; } .task-complete-state strong, .task-complete-state small { display: block; } .task-complete-state small { margin-top: 3px; color: var(--muted); } .task-list { display: grid; } .task-priority-heading { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 9px; padding: 17px 24px 9px; color: var(--muted); background: var(--panel-2); border-top: 1px solid var(--line-soft); } .task-priority-heading:first-child { border-top: 0; } .task-priority-heading > span { color: var(--accent-strong); font-size: 0.7rem; font-weight: 800; } .task-priority-heading strong { color: var(--ink); font-size: 0.78rem; } .task-priority-heading small { font-size: 0.72rem; } .task-row { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 70px; padding: 11px 20px 11px 24px; border-top: 1px solid var(--line-soft); transition: background-color 160ms ease, box-shadow 160ms ease; } .task-row::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); opacity: 0; transition: opacity 160ms ease; } .task-row.priority-0::before { background: var(--danger); } .task-row.priority-1::before { background: var(--warning); } .task-row.priority-2::before { background: var(--accent); } .task-row.priority-3::before { background: var(--muted); } .task-row.is-highlighted { box-shadow: inset 0 0 0 2px var(--accent); } .task-check { width: 25px; height: 25px; display: grid; place-items: center; padding: 0; color: white; background: transparent; border: 1.5px solid var(--faint); border-radius: 7px; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, transform 140ms var(--ease-out); } .task-check[aria-pressed="true"] { background: var(--success); border-color: var(--success); } .task-order { width: 25px; color: var(--faint); font-size: 0.7rem; font-variant-numeric: tabular-nums; } .task-copy { min-width: 0; } .task-copy strong, .task-copy span { display: block; } .task-copy strong { color: var(--ink); font-size: 0.84rem; line-height: 1.35; } .task-copy span { margin-top: 5px; color: var(--muted); font-size: 0.7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .task-row.is-done .task-copy strong { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; } .task-row.is-done { opacity: 0.68; } .task-priority { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 4px 9px; border-radius: 999px; font-size: 0.7rem; font-weight: 680; white-space: nowrap; } .task-priority i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .task-priority.priority-0 { color: var(--danger); background: var(--danger-soft); } .task-priority.priority-1 { color: var(--warning); background: var(--warning-soft); } .task-priority.priority-2 { color: var(--accent-strong); background: var(--accent-soft); } .task-priority.priority-3 { color: var(--muted); background: var(--panel-inset); } .task-row-arrow { color: var(--faint); font-size: 1.25rem; transition: transform 160ms var(--ease-out), color 160ms ease; } .task-delete { width: 28px; height: 28px; color: var(--muted); background: transparent; border: 0; border-radius: 7px; cursor: pointer; font-size: 1.1rem; } .task-empty { padding: 54px 24px; text-align: center; } .task-empty strong, .task-empty span { display: block; } .task-empty span { margin-top: 7px; color: var(--muted); font-size: 0.8rem; } @media (hover: hover) and (pointer: fine) { .primary-action:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 16px 34px rgba(149, 65, 233, 0.24); filter: saturate(1.05); } .secondary-action:hover { color: #fff; background: var(--accent); } .task-priority-filter button:hover { color: var(--ink); } .task-category-button:hover { color: var(--ink); background: var(--panel-inset); } .task-next-grid button:hover { transform: translateY(-1px); border-color: var(--accent-border); box-shadow: var(--shadow-lift); } .task-row:hover { background: var(--panel-2); } .task-row:hover::before { opacity: 1; } .task-row:hover .task-row-arrow { color: var(--accent-strong); transform: translateX(3px); } .task-check:hover { border-color: var(--accent); background: var(--accent-soft); } .task-delete:hover { color: var(--danger); background: var(--danger-soft); } } .primary-action:not(:disabled):active, .secondary-action:active, .primary-button:active, .task-priority-filter button:active, .task-category-button:active, .task-next-grid button:active, .task-check:active { transform: scale(0.97); } @media (max-width: 1180px) { .tasks-intro { align-items: stretch; flex-direction: column; } .primary-action { flex: none; max-width: 560px; } .task-toolbar-main { flex-wrap: wrap; } .task-search { flex-basis: 46%; } .task-toolbar-main > select { width: auto; flex: 1 1 210px; } .task-priority-filter { order: 4; flex: 1 1 100%; } .task-priority-filter button { flex: 1; } .task-next-grid { grid-template-columns: 1fr; } .task-create { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .task-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .task-summary article:nth-child(2) { border-right: 0; } .task-summary article:nth-child(-n + 2) { border-bottom: 1px solid var(--line); } .task-layout { grid-template-columns: 1fr; } .task-categories { position: static; } .task-category-list { display: flex; max-height: none; overflow-x: auto; padding-bottom: 3px; } .task-category-button { flex: 0 0 auto; width: auto; } .task-category-button small { margin-left: 4px; } } @media (max-width: 760px) { #view-tasks { gap: 14px; } .tasks-intro { gap: 18px; padding: 8px 2px 2px; } .tasks-intro h2 { font-size: clamp(1.9rem, 10vw, 2.5rem); } .tasks-intro > div > p:last-child { font-size: 0.82rem; } .primary-action { width: 100%; max-width: none; } .task-summary article { min-height: 84px; padding: 15px; } .task-summary strong { font-size: 1.45rem; } .task-summary small { font-size: 0.72rem; } .task-toolbar { padding: 10px; } .task-search { flex-basis: 100%; } .task-toolbar-main > select { width: 100%; flex-basis: calc(50% - 5px); } .secondary-action { flex: 1 1 auto; } .task-priority-filter { overflow-x: auto; } .task-priority-filter button { flex: 0 0 auto; } .task-create { grid-template-columns: 1fr; } .task-categories { padding: 14px 10px; } .task-list-head { padding: 18px 16px 15px; flex-direction: column; } .task-list-actions { width: 100%; justify-content: space-between; } .task-next-block { padding: 15px 16px; } .task-next-heading small { display: none; } .task-priority-heading { grid-template-columns: auto auto; padding: 14px 16px 8px; } .task-priority-heading small { display: none; } .task-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 12px 14px; } .task-order, .task-row-arrow { display: none; } .task-priority { padding-inline: 7px; } .task-priority i { display: none; } .task-copy span { max-width: 58vw; } } @media (prefers-reduced-motion: reduce) { .primary-action, .secondary-action, .primary-button, .task-priority-filter button, .task-category-button, .task-next-grid button, .task-check, .task-row, .task-row-arrow { transition-duration: 0.01ms; } .task-next-grid button:hover, .primary-action:hover { transform: none; } } /* ========================================================================== V7 — Expérience téléphone « app » Le menu devient un tiroir matériel : même origine à l'ouverture/fermeture, surface structurelle translucide et contenu légèrement repoussé en arrière. ========================================================================== */ .topbar-leading { display: flex; align-items: center; gap: 12px; min-width: 0; } .mobile-menu-button, .drawer-close, .nav-overline, .nav-scrim { display: none; } @media (max-width: 760px) { html, body { width: 100%; min-height: 100dvh; /* clip ne crée pas de conteneur de scroll : le header reste sticky. */ overflow-x: clip; overscroll-behavior-y: none; touch-action: pan-x pan-y; } body.nav-open { overflow: hidden; } html.nav-scroll-locked, html.range-scroll-locked { height: 100%; overflow: hidden; overscroll-behavior: none; } html.nav-scroll-locked body, html.range-scroll-locked body { position: fixed; top: 0; right: 0; left: 0; width: 100%; height: 100dvh; overflow: hidden; overscroll-behavior: none; } .shell { display: block; min-height: 100dvh; } .sidebar { --drawer-x: calc(100% + 24px); position: fixed; inset: 0 0 0 auto; z-index: var(--layer-drawer); visibility: hidden; width: min(86vw, 340px); height: 100dvh; gap: 14px; padding: calc(14px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) 14px; overflow-y: auto; overscroll-behavior: contain; color: #fff; background: linear-gradient(165deg, rgba(36, 26, 56, 0.93), rgba(13, 9, 21, 0.96)); border: 0; border-left: 1px solid rgba(255, 255, 255, 0.11); box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.035), -28px 0 70px rgba(2, 0, 8, 0.46); -webkit-backdrop-filter: none; backdrop-filter: none; transform: translate3d(var(--drawer-x), 0, 0); transition: none; } body.nav-open .sidebar { --drawer-x: 0px; } body.nav-open .sidebar, body.nav-moving .sidebar, body.nav-dragging .sidebar { visibility: visible; } body.nav-dragging .sidebar { transition: none; } .brand { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; padding: 0 2px 4px 8px; } .brand img { width: auto; height: 33px; max-width: calc(100% - 58px); object-fit: contain; object-position: left center; filter: drop-shadow(0 0 20px rgba(169, 142, 214, 0.42)); } .drawer-close { display: grid; place-items: center; width: 44px; height: 44px; flex: none; color: rgba(255, 255, 255, 0.78); background: rgba(255, 255, 255, 0.075); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .drawer-close svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .drawer-close:active, .mobile-menu-button:active { transform: scale(0.92); } .nav-overline { display: block; margin: 5px 12px 0; color: rgba(218, 205, 238, 0.62); font-size: 0.6875rem; font-weight: 760; letter-spacing: 0.11em; text-transform: uppercase; } .nav { position: static; z-index: auto; display: grid; grid-template-columns: 1fr; gap: 5px; padding: 0; overflow: visible; background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; } [data-theme="light"] .sidebar .nav { background: transparent; } .nav-item { flex: none; width: 100%; min-width: 0; min-height: 48px; flex-direction: row; justify-content: flex-start; gap: 13px; padding: 10px 13px; border-radius: 13px; color: rgba(223, 214, 238, 0.72); font-size: 0.9375rem; font-weight: 590; letter-spacing: -0.005em; } .nav-item span:not(.nav-badge) { display: block; font-size: inherit; white-space: nowrap; } .nav-item svg { width: 20px; height: 20px; stroke-width: 1.75; } .nav-item.active { color: #fff; background: linear-gradient(90deg, rgba(169, 142, 214, 0.28), rgba(169, 142, 214, 0.1)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px rgba(5, 2, 12, 0.2); } .nav-item.active::before { left: 2px; right: auto; top: 12px; bottom: 12px; width: 3px; height: auto; border-radius: 999px; } .nav-badge { position: static; min-width: 20px; height: 20px; margin-left: auto; font-size: 0.6875rem; } .sidebar-footer { display: flex; margin-top: auto; padding: 13px; background: rgba(255, 255, 255, 0.045); border-color: rgba(255, 255, 255, 0.09); border-radius: 14px; } .nav-scrim { position: fixed; inset: 0; z-index: var(--layer-scrim); display: block; width: 100%; height: 100%; padding: 0; opacity: 0; visibility: hidden; pointer-events: none; background: var(--modal-dim); border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; transition: none; touch-action: none; } body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; } body.nav-open .nav-scrim, body.nav-moving .nav-scrim, body.nav-dragging .nav-scrim { visibility: visible; pointer-events: auto; } .main { min-height: 100dvh; padding: 0 14px calc(34px + env(safe-area-inset-bottom)); transform: none; } body.nav-open .main { transform: none; } .topbar { position: sticky; top: 0; z-index: var(--layer-header); display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; align-items: stretch; gap: 11px; margin: 0 -14px 14px; padding: calc(8px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 11px max(14px, env(safe-area-inset-left)); background: var(--bg); border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .topbar-leading { width: 100%; gap: 11px; } .topbar-leading > div { min-width: 0; } .mobile-menu-button { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none; margin-left: auto; padding: 0; color: var(--ink); background: color-mix(in srgb, var(--panel) 76%, transparent); border: 1px solid var(--line); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 18px rgba(4, 2, 8, 0.12); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); transition: transform 110ms ease-out, border-color 180ms ease; } .burger-lines, .burger-lines i { display: block; width: 19px; } .burger-lines { position: relative; height: 14px; } .burger-lines i { position: absolute; left: 0; height: 1.8px; border-radius: 999px; background: currentColor; transform-origin: center; transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1), top 260ms cubic-bezier(0.32, 0.72, 0, 1); } .burger-lines i:first-child { top: 3px; } .burger-lines i:last-child { top: 10px; width: 14px; } body.nav-open .burger-lines i:first-child { top: 6.5px; transform: rotate(45deg); } body.nav-open .burger-lines i:last-child { top: 6.5px; width: 19px; transform: rotate(-45deg); } .topbar .eyebrow { display: block; margin-bottom: 2px; font-size: 0.625rem; letter-spacing: 0.12em; } h1 { max-width: calc(100vw - 100px); overflow: hidden; font-size: 1.25rem; line-height: 1.12; letter-spacing: -0.025em; text-overflow: ellipsis; white-space: nowrap; } .top-actions { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 7px; width: 100%; min-width: 0; } .range-bar { order: 0; width: auto; max-width: 100%; flex: 1 1 0; min-width: 0; padding: 0; background: transparent; border: 0; } .range-bar > [data-range] { display: none; } .range-custom-wrap { width: 100%; } .range-bar #rangeCustomBtn { width: 100%; min-height: 44px; padding: 10px 16px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 13px; text-align: left; font-size: 0.8125rem; box-shadow: var(--shadow-card); } .range-bar #rangeCustomBtn::after { content: "⌄"; float: right; color: var(--muted); font-size: 1.125rem; line-height: 1; } .range-scrim:not([hidden]) { position: fixed; inset: 0; z-index: calc(var(--layer-modal) - 1); display: block; width: 100%; height: 100%; padding: 0; background: var(--modal-dim); border: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; } .range-pop { position: fixed; inset: auto 0 0; transform: none; z-index: var(--layer-modal); width: 100%; min-width: 0; max-height: calc(100dvh - env(safe-area-inset-top) - 12px); grid-template-columns: minmax(0, 1fr); gap: 11px; padding: 8px 20px calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; border-radius: 24px 24px 0 0; box-shadow: 0 -10px 40px rgba(18, 20, 27, 0.14); -webkit-backdrop-filter: none; backdrop-filter: none; } .range-sheet-handle { display: block; width: 36px; height: 5px; margin: 0 auto 5px; background: var(--line); border-radius: 999px; } .range-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .range-sheet-head .eyebrow { margin: 0 0 3px; } .range-sheet-head h2 { margin: 0; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.025em; } .range-sheet-close { display: grid; flex: 0 0 38px; place-items: center; width: 38px; height: 38px; padding: 0; color: var(--ink); background: var(--panel-inset); border: 1px solid var(--line); border-radius: 50%; font-size: 1.5rem; line-height: 1; } .range-sheet-intro { display: block; margin: 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.4; } .range-sheet-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .range-sheet-presets button { min-width: 0; min-height: 42px; padding: 8px 4px; color: var(--ink-soft); background: var(--panel-inset); border: 1px solid var(--line); border-radius: 11px; font-size: 0.8125rem; font-weight: 650; } .range-sheet-presets button.active { color: var(--accent-strong); background: var(--accent-soft); border-color: var(--accent-border); } .range-sheet-divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.75rem; } .range-sheet-divider::before, .range-sheet-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .range-pop label, .range-pop input { min-width: 0; width: 100%; } .range-pop label { gap: 6px; color: var(--ink-soft); font-size: 0.8125rem; } .range-pop input[type="date"] { min-height: 46px; padding-inline: 12px; font-size: 16px; } .range-pop-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 2px; } .range-pop-actions button { width: 100%; min-height: 44px; font-size: 0.875rem; } .range-pop-actions #rangeApply { color: #fff; background: var(--accent); border-color: var(--accent); } .range-pop-actions #rangeReset { color: var(--ink-soft); background: var(--panel-inset); border-color: var(--line); } @media (max-height: 650px) { .range-pop { gap: 8px; padding-top: 6px; } .range-sheet-intro { display: none; } .range-sheet-presets button { min-height: 38px; } } #resetDemo { display: none; } #dataMode, #dataFreshness { min-height: 30px; padding-inline: 9px; font-size: 0.6875rem; } #themeToggle { margin-left: auto; } .workspace-context { display: grid; gap: 3px; margin-bottom: 12px; padding-inline: 2px; font-size: 0.71875rem; } .panel { min-width: 0; border-radius: 18px; } .view, .view > *, .layout-two, .layout-two > *, .panel-head, .head-actions, .hero-main, .hero-side, .hero-chart, .chart-data, .table-wrap, .import-row, .import-source { min-width: 0; } .panel-head { flex-wrap: wrap; } .head-actions { max-width: 100%; flex-wrap: wrap; justify-content: flex-end; } .chart-toggle { max-width: 100%; overflow-x: auto; scrollbar-width: none; } .chart-toggle::-webkit-scrollbar { display: none; } .chart-data { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; } .chart-data table { width: max-content; min-width: 100%; } .table-wrap { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .table-wrap table { width: max-content; min-width: 100%; } .import-row { width: 100%; max-width: 100%; flex-wrap: wrap; } .import-row strong { min-width: 0; flex: 1 1 145px; } .import-row .import-source { flex: 1 1 160px; max-width: 100%; } .import-row .status-pill { margin-left: auto; } .panel-hero { overflow: clip; } .view.active { gap: 13px; } .view.active > * { animation-duration: 360ms; animation-delay: 0ms !important; } .hero-value strong { font-size: clamp(2rem, 9vw, 2.45rem); letter-spacing: -0.045em; } .hero-stat > strong { font-size: 1.0625rem; } /* Finance mobile : saisie courte, filtres alignés et journal en cartes. Les informations restent lisibles sans tableau horizontal. */ #finForm { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 12px 10px; scroll-margin-top: calc(154px + env(safe-area-inset-top)); } #finForm .seg-toggle, #finForm .finance-field, #finForm .fin-check, #finForm #finSubmit, #finForm #finCancelEdit, #finForm .form-error { grid-column: 1 / -1; } #finForm .finance-field:nth-of-type(4) { grid-column: 1; } #finForm .finance-field-currency { grid-column: 2; } #finForm #finSubmit, #finForm #finCancelEdit { width: 100%; min-height: 44px; } #view-finance .journal-filters { display: grid; grid-template-columns: minmax(0, 1fr); } #view-finance .filter-chips { grid-column: 1 / -1; max-width: 100%; overflow-x: auto; scrollbar-width: none; } #view-finance .filter-chips::-webkit-scrollbar { display: none; } #view-finance .journal-filters select, #view-finance .journal-filters input[type="search"] { width: 100%; min-width: 0; max-width: none; min-height: 44px; font-size: 16px; } #view-finance .hero-value strong, #finTopCat { max-width: 100%; overflow-wrap: anywhere; } #chartFinCat .hbar-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 8px 0; } #chartFinCat .hbar-label { grid-column: 1; grid-row: 1; white-space: normal; overflow-wrap: anywhere; } #chartFinCat .hbar-value { grid-column: 2; grid-row: 1; justify-content: flex-end; margin: 0; } #chartFinCat .hbar-track { grid-column: 1 / -1; grid-row: 2; width: 100%; } #view-finance .table-wrap { overflow: visible; } #view-finance .table-wrap .finance-journal-table { display: block; width: 100%; min-width: 0; } .finance-journal-table thead { display: none; } .finance-journal-table tbody { display: grid; gap: 9px; } .finance-journal-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 13px 14px; background: color-mix(in srgb, var(--panel-inset) 88%, transparent); border: 1px solid var(--line-soft); border-radius: 14px; } .finance-journal-table tbody tr.row-flag { border-left: 3px solid var(--warning); } .finance-journal-table tbody tr.row-flag td:first-child { box-shadow: none; padding-left: 0; } .finance-journal-table tbody td { min-width: 0; padding: 0; border: 0; background: transparent; white-space: normal; } #view-finance .finance-journal-table tbody tr:hover td { background: transparent; } .finance-journal-table tbody td:nth-child(1) { grid-column: 1; grid-row: 1; color: var(--faint); font-size: 0.75rem; } .finance-journal-table tbody td:nth-child(2) { grid-column: 1; grid-row: 2; color: var(--ink); font-size: 0.9375rem; font-weight: 650; } .finance-journal-table tbody td:nth-child(3) { grid-column: 1; grid-row: 3; overflow-wrap: anywhere; color: var(--muted); font-size: 0.8125rem; } .finance-journal-table tbody td:nth-child(4) { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--ink); font-size: 1rem; font-weight: 720; } .finance-journal-table tbody td:nth-child(5) { grid-column: 1; grid-row: 4; margin-top: 6px; } .finance-journal-table tbody td:nth-child(6) { grid-column: 2; grid-row: 3 / span 2; align-self: end; display: flex; align-items: center; justify-content: flex-end; gap: 6px; width: auto; padding: 0; } .finance-journal-table tbody td:nth-child(6) .icon-mini + .icon-mini { margin-left: 0; } .finance-journal-table .empty-row td { grid-column: 1 / -1; padding: 12px 0; } .chart { min-height: 210px; } } @media (max-width: 760px) and (display-mode: standalone) { .topbar { padding-top: calc(12px + env(safe-area-inset-top)); } } @media (max-width: 390px) { .main { padding-inline: 11px; } .topbar { margin-inline: -11px; padding-inline: 11px; } .sidebar { width: min(89vw, 330px); } .hero-value strong { font-size: 2.2rem; } } @media (max-width: 760px) and (prefers-reduced-motion: reduce) { .sidebar, .main, .nav-scrim, .burger-lines i { transition: opacity 180ms ease !important; } body.nav-open .main { transform: none; } } @media (max-width: 760px) and (prefers-reduced-transparency: reduce) { .sidebar { background: #171020; -webkit-backdrop-filter: none; backdrop-filter: none; } .topbar, .mobile-menu-button, .drawer-close { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; } .nav-scrim { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } } @media (max-width: 760px) and (prefers-contrast: more) { .sidebar, .topbar, .mobile-menu-button, .drawer-close { border-color: currentColor; } } /* ========================================================================== V8 — Nymphreach : surfaces claires, hiérarchie calme, accent intentionnel. Le mode sombre reste intact ; le logo noir est une variante de la marque. ========================================================================== */ [data-theme="light"] body::before { display: none; } [data-theme="light"] .sidebar { color: var(--ink); background: rgba(252, 252, 254, 0.96); border-color: var(--line); box-shadow: none; } [data-theme="light"] .brand img { filter: none; } [data-theme="light"] .nav-item { color: var(--ink-soft); } @media (hover: hover) and (pointer: fine) { [data-theme="light"] .nav-item:hover { color: var(--ink); background: #f5f3fa; } } @media (hover: none), (pointer: coarse) { [data-theme="light"] .nav-item:hover { color: var(--ink-soft); background: transparent; } [data-theme="light"] .nav-item.active:hover { color: var(--ink); background: var(--accent-soft); } } [data-theme="light"] .nav-item.active { color: var(--ink); background: var(--accent-soft); box-shadow: none; } [data-theme="light"] .nav-item.active::before { background: var(--ink); box-shadow: none; } [data-theme="light"] .nav-item.active svg { color: var(--accent-strong); } [data-theme="light"] .sidebar-footer { background: #ffffff; border-color: var(--line); box-shadow: 0 2px 8px rgba(24, 26, 32, 0.025); } [data-theme="light"] .nav-badge.warn { color: #825c21; background: #fcf4e8; box-shadow: inset 0 0 0 1px #ead9bd; } [data-theme="light"] .nav-badge.bad { color: #a73c46; background: #fdf0f1; box-shadow: inset 0 0 0 1px #edcbd0; animation: none; } [data-theme="light"] .topbar { background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--line); box-shadow: none; } [data-theme="light"] .topbar .eyebrow { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; letter-spacing: 0.08em; } [data-theme="light"] .topbar .eyebrow::before { content: ""; width: 5px; height: 5px; flex: none; background: var(--accent); border-radius: 50%; } [data-theme="light"] h1 { font-weight: 710; letter-spacing: -0.03em; } [data-theme="light"] h2 { letter-spacing: -0.025em; } [data-theme="light"] .panel, [data-theme="light"] .metric { border-color: var(--line); box-shadow: var(--shadow); } [data-theme="light"] .panel:hover, [data-theme="light"] .metric:hover { border-color: var(--line); box-shadow: var(--shadow-lift); } [data-theme="light"] .metric:hover { transform: none; } [data-theme="light"] .metric::after { display: none; } [data-theme="light"] .panel-hero { background: var(--panel); border-color: var(--line); } [data-theme="light"] .panel-glass { background: var(--panel); border-color: var(--line); box-shadow: var(--shadow); -webkit-backdrop-filter: none; backdrop-filter: none; } [data-theme="light"] .hero-value strong { font-size: clamp(1.9rem, 3vw, 2.125rem); letter-spacing: -0.035em; } [data-theme="light"] .metric strong { font-size: 1.375rem; letter-spacing: -0.03em; } [data-theme="light"] .range-bar, [data-theme="light"] .filter-chips, [data-theme="light"] .chart-toggle { background: #ffffff; border-color: var(--line); } [data-theme="light"] .range-bar button.active, [data-theme="light"] .filter-chips button.active, [data-theme="light"] .chart-toggle-btn.active { color: var(--accent-strong); background: var(--accent-soft); box-shadow: none; } [data-theme="light"] .priority-item, [data-theme="light"] .risk-item, [data-theme="light"] .check-item { background: #ffffff; border-color: var(--line); } [data-theme="light"] .priority-item::before, [data-theme="light"] .risk-item::before { box-shadow: none; } [data-theme="light"] .view.active > * { animation: none; } @media (min-width: 761px) { [data-theme="light"] .shell { grid-template-columns: 224px minmax(0, 1fr); } [data-theme="light"] .sidebar { padding: 24px 14px 18px; gap: 28px; } [data-theme="light"] .brand { padding: 0 6px 8px; } [data-theme="light"] .brand img { width: 160px; } [data-theme="light"] .main { padding-inline: 38px; } [data-theme="light"] .topbar { margin-inline: -38px; padding-inline: 38px; } [data-theme="light"] .panel { padding: 22px 24px; } [data-theme="light"] .view.active { gap: 18px; } [data-theme="light"] .layout-two { gap: 18px; } } @media (max-width: 760px) { [data-theme="light"] .sidebar { color: var(--ink); background: #fcfcfe; border-left: 1px solid var(--line); box-shadow: -8px 0 32px rgba(24, 26, 32, 0.12); } [data-theme="light"] .nav-overline { color: var(--muted); } [data-theme="light"] .nav-item { color: var(--ink-soft); } [data-theme="light"] .nav-item.active { color: var(--ink); box-shadow: none; } [data-theme="light"] .drawer-close { color: var(--ink); background: #ffffff; border-color: var(--line); } [data-theme="light"] .sidebar-footer { background: #ffffff; } [data-theme="light"] .mobile-menu-button { background: #ffffff; border-color: var(--line); box-shadow: 0 2px 8px rgba(24, 26, 32, 0.035); } [data-theme="light"] .topbar { box-shadow: none; } [data-theme="light"] .panel { border-radius: 12px; } [data-theme="light"] .metric { border-radius: 12px; } [data-theme="light"] .range-bar { background: transparent; border: 0; } [data-theme="light"] .range-bar #rangeCustomBtn { background: #ffffff; border-color: var(--line); box-shadow: var(--shadow); } [data-theme="light"] .finance-journal-table tbody tr { background: #ffffff; border-color: var(--line); } } /* Vue d'ensemble : composition inspirée d'un espace de travail, avec introduction, indicateurs courts puis analyse détaillée. */ #view-overview .overview-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 6px 8px; } #view-overview .overview-intro-kicker { margin: 0 0 12px; color: var(--muted); font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.07em; } #view-overview .overview-intro-kicker span { margin-inline: 9px; color: var(--accent-strong); font-size: 1rem; font-weight: 400; vertical-align: -0.04em; } #view-overview .overview-intro h2 { font-size: clamp(1.75rem, 2.7vw, 2rem); font-weight: 690; line-height: 1.08; letter-spacing: -0.035em; } #view-overview .overview-intro p:last-child { margin: 12px 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.45; } #view-overview .overview-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 17px; flex: none; border: 1px solid var(--accent-deep); border-radius: 10px; color: #fff; background: var(--accent-deep); font: inherit; font-size: 0.8125rem; font-weight: 650; cursor: pointer; touch-action: manipulation; transition: transform 120ms ease-out, filter 120ms ease-out; } #view-overview .overview-cta:active { transform: scale(0.97); } #view-overview .overview-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } #view-overview .overview-kpi-strip { display: grid; grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr)); min-width: 0; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); } #view-overview .overview-revenue, #view-overview .overview-stats .hero-stat { min-width: 0; padding: 22px 20px; } #view-overview .overview-revenue { display: flex; flex-direction: column; justify-content: center; align-self: stretch; } #view-overview .overview-revenue .hero-value { margin: 5px 0 7px; } #view-overview .overview-revenue .hero-value strong { font-size: clamp(1.9rem, 2.7vw, 2.5rem); } #view-overview .overview-revenue .hero-hint { display: block; line-height: 1.45; } #view-overview .overview-stats { display: contents; margin: 0; padding: 0; border: 0; } #view-overview .overview-stats .hero-stat { display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--line); } #view-overview .overview-stats .hero-stat > span { font-size: 0.75rem; } #view-overview .overview-stats .hero-stat > strong { margin: 11px 0 7px; font-size: 1.35rem; } #view-overview .overview-stats .hero-stat > small { font-size: 0.75rem; line-height: 1.4; } #view-overview .overview-chart-panel { padding: 26px 28px; } #view-overview .overview-chart-panel .panel-head { margin-bottom: 14px; } #view-overview .overview-chart-panel h2 { font-size: 1.15rem; } #view-overview .overview-chart-panel .overview-analysis { margin-top: 20px; } #view-overview .overview-chart-panel .panel-note { margin-top: 14px; } @media (hover: hover) and (pointer: fine) { #view-overview .overview-cta:hover { filter: brightness(1.1); } } @media (max-width: 1000px) { #view-overview .overview-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } #view-overview .overview-revenue, #view-overview .overview-stats .hero-stat { border-bottom: 1px solid var(--line); } #view-overview .overview-stats .hero-stat:nth-child(2) { border-left: 0; } #view-overview .overview-stats .hero-stat:nth-child(n + 2) { border-bottom: 0; } } @media (max-width: 760px) { #view-overview .overview-intro { align-items: stretch; flex-direction: column; gap: 17px; padding: 8px 2px 4px; } #view-overview .overview-intro-kicker { margin-bottom: 8px; font-size: 0.625rem; } #view-overview .overview-intro h2 { font-size: clamp(1.5rem, 6.7vw, 1.75rem); } #view-overview .overview-intro p:last-child { margin-top: 7px; font-size: 0.8125rem; } #view-overview .overview-cta { align-self: flex-start; } #view-overview .overview-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } #view-overview .overview-revenue { grid-column: 1 / -1; padding: 20px; } #view-overview .overview-stats .hero-stat { display: flex; padding: 16px 18px; border-left: 0; } #view-overview .overview-stats .hero-stat:nth-child(2) { border-left: 1px solid var(--line); } #view-overview .overview-stats .hero-stat:last-child { grid-column: 1 / -1; border-top: 1px solid var(--line); } #view-overview .overview-stats .hero-stat > strong { margin: 6px 0 4px; font-size: 1.1rem; } #view-overview .overview-chart-panel { padding: 20px 18px; } } @media (prefers-reduced-motion: reduce) { #view-overview .overview-cta { transition: none; } } @media (max-width: 760px) and (prefers-reduced-transparency: reduce) { [data-theme="light"] .sidebar { background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-reduced-transparency: reduce) { [data-theme="light"] .topbar { background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-contrast: more) { [data-theme="light"] .sidebar, [data-theme="light"] .panel, [data-theme="light"] .metric { border-color: var(--ink); } } /* ========================================================================== V10 — Mono Charts + navigation utilitaire Adaptation du vocabulaire visuel open-source de Monocharts : pistes arrondies, marqueur d'objectif, courbes souples et tons superposés. ========================================================================== */ .sidebar-tools { display: grid; gap: 6px; margin-top: auto; } .sidebar-tools-label { margin: 0 10px 3px; color: var(--sidebar-muted); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .sidebar-tools + .sidebar-footer { margin-top: 0; } .sidebar-tool { width: 100%; } .reach-module-link { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: 10px; min-height: 60px; padding: 10px 11px; overflow: hidden; color: #f8f2ff; text-decoration: none; background: linear-gradient(135deg, rgba(140, 64, 231, 0.24), rgba(174, 85, 236, 0.11)); border: 1px solid rgba(183, 113, 243, 0.27); border-radius: 11px; transition: transform 150ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } .reach-module-icon { display: grid; place-items: center; width: 34px; height: 34px; color: #ffffff; background: linear-gradient(135deg, #8c40e7, #b05bee); border-radius: 9px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); font-size: 0.65rem; font-weight: 800; letter-spacing: -0.02em; } .reach-module-copy { min-width: 0; } .reach-module-copy strong, .reach-module-copy small { display: block; } .reach-module-copy strong { font-size: 0.8125rem; line-height: 1.3; } .reach-module-copy small { margin-top: 2px; overflow: hidden; color: rgba(238, 226, 249, 0.62); font-size: 0.6875rem; text-overflow: ellipsis; white-space: nowrap; } .reach-module-arrow { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 150ms var(--ease-out); } .reach-module-link:active { transform: scale(0.97); } [data-theme="light"] .sidebar-tools-label { color: var(--muted); } [data-theme="light"] .reach-module-link { color: var(--ink); background: linear-gradient(135deg, #f4ebfc, #fbf8fe); border-color: var(--accent-border); } [data-theme="light"] .reach-module-copy small { color: var(--muted); } @media (hover: hover) and (pointer: fine) { .reach-module-link:hover { transform: translateY(-1px); background: linear-gradient(135deg, rgba(140, 64, 231, 0.32), rgba(174, 85, 236, 0.16)); border-color: rgba(193, 128, 247, 0.46); box-shadow: 0 9px 22px rgba(8, 4, 14, 0.16); } .reach-module-link:hover .reach-module-arrow { transform: translateX(3px); } [data-theme="light"] .reach-module-link:hover { background: linear-gradient(135deg, #eee0fa, #f9f4fd); } } /* La vue répond immédiatement : une courte entrée collective remplace la cascade de plus d'une demi-seconde qui ralentissait la navigation. */ .view.active > * { animation-duration: 220ms; animation-delay: 0ms !important; } /* Courbes Monocharts : tracé arrondi, grille très calme, ombre supprimée pour que la donnée reste le seul point focal. */ .chart-svg { overflow: visible; } .grid-line { stroke-dasharray: 2 3; } .area-line { stroke-width: 2.5; filter: none; } .area-fill { opacity: 0.9; } .area-point { opacity: 0.42; } /* Adaptation de Mono Fluid Stream Wave : couches souples et lisibles sans introduire React/Recharts dans le tableau de bord natif. */ .stream-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len, 1500); stroke-dashoffset: var(--len, 1500); animation: draw 800ms var(--ease-out) forwards; } .stream-line-main { stroke-width: 2.5; } .stream-line-trend { stroke-width: 1.5; opacity: 0.56; animation-duration: 900ms; } .stream-fill { animation: areaIn 520ms ease both; } .stream-fill-main { opacity: 0.94; } .stream-fill-trend { opacity: 0.72; } .stream-end-dot { fill: var(--panel); stroke-width: 2; } .stream-end-trend { opacity: 0.7; } .stream-cross-trend { stroke: var(--panel); stroke-width: 2; } .stream-series-legend { position: absolute; z-index: 2; top: 5px; left: 48px; display: flex; flex-wrap: wrap; gap: 7px 18px; color: var(--muted); font-size: 0.75rem; font-weight: 650; line-height: 1.2; pointer-events: none; } .stream-series-legend span { display: inline-flex; align-items: center; gap: 7px; } .stream-series-legend i { width: 9px; height: 9px; flex: 0 0 auto; background: var(--legend-color); border-radius: 3px; } .stream-chart-svg.has-explicit-secondary .stream-line-trend { stroke-width: 2.15; opacity: 0.92; } .stream-chart-svg.has-explicit-secondary .stream-fill-trend { opacity: 0.58; } .stream-chart-svg.has-explicit-secondary .stream-end-trend { opacity: 1; } .col-bar { filter: saturate(0.9) drop-shadow(0 5px 8px color-mix(in srgb, var(--accent) 16%, transparent)); transition: filter 140ms ease, opacity 140ms ease, transform 180ms var(--ease-out); } .col-bar-positive { transform-origin: center bottom; } .col-bar-negative { transform-origin: center top; } .col-bar:hover, .col-bar.hover, .col-bar:focus-visible { filter: brightness(1.12) saturate(1); } .hbar-track, .stack-track, .bullet-track { background: color-mix(in srgb, var(--ink) 8%, transparent); border-radius: 999px; } .hbar-track { overflow: hidden; } .hbar-bar { inset-block: 1px; border-radius: 999px; box-shadow: none; } .stack-track { overflow: hidden; } .stack-seg { border-radius: 999px; } .bullet-chart { display: grid; gap: 10px; } .bullet-row { display: grid; gap: 7px; padding: 11px 12px; background: color-mix(in srgb, var(--panel-inset) 86%, transparent); border: 1px solid var(--line-soft); border-radius: 12px; transition: background-color 150ms ease, border-color 150ms ease, transform 150ms var(--ease-out); } .bullet-row:focus-visible { outline-offset: 3px; } .bullet-head, .bullet-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .bullet-head strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 0.8125rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .bullet-head > span { flex: none; color: var(--ink-soft); font-size: 0.75rem; font-weight: 650; font-variant-numeric: tabular-nums; } .bullet-track { position: relative; height: 14px; overflow: visible; } .bullet-fill, .bullet-overrun { position: absolute; inset-block: 0; min-width: 2px; border-radius: 999px; transition: width 620ms var(--ease-out), filter 150ms ease; } .bullet-fill { left: 0; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); } .bullet-overrun { min-width: 0; background: var(--danger); box-shadow: 0 0 7px color-mix(in srgb, var(--danger) 18%, transparent); } .bullet-marker { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1px; background: var(--ink); border: 1px solid var(--panel); border-radius: 999px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); } .bullet-foot { color: var(--faint); font-size: 0.6875rem; } @media (hover: hover) and (pointer: fine) { .bullet-row:hover { background: color-mix(in srgb, var(--panel-inset) 72%, var(--accent-soft)); border-color: var(--accent-border); transform: translateY(-1px); } .bullet-row:hover .bullet-fill, .bullet-row:hover .bullet-overrun { filter: brightness(1.08); } } @media (max-width: 760px) { .sidebar { transition-duration: 280ms; } .sidebar-tools { margin-top: 8px; } .sidebar-footer { margin-top: 4px; } .reach-module-link { min-height: 62px; border-radius: 13px; } .bullet-row { padding: 10px; } .bullet-head { align-items: flex-start; } .bullet-head > span { max-width: 48%; text-align: right; } } @media (prefers-reduced-motion: reduce) { .view.active > *, .bullet-fill, .bullet-overrun, .bullet-row, .reach-module-link, .reach-module-arrow { animation: none !important; transition: none !important; } } /* ========================================================================== V11 — Cockpit Management OFM Une page de décision : brief, marge réelle, journal et conformité. ========================================================================== */ body[data-active-view="management"] .range-bar, body[data-active-view="management"] .workspace-context { display: none; } #view-management { gap: 20px; } .management-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding: 18px 4px 6px; } .management-intro h2 { max-width: 760px; font-size: clamp(2rem, 4vw, 3rem); font-weight: 710; line-height: 1.03; letter-spacing: -0.045em; } .management-intro > div:first-child > p:last-child { max-width: 720px; margin: 10px 0 0; color: var(--muted); line-height: 1.5; } .management-intro-actions { display: flex; align-items: center; gap: 9px; flex: none; } .management-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); } .management-summary article { min-width: 0; min-height: 104px; display: flex; align-items: center; gap: 13px; padding: 19px 21px; border-right: 1px solid var(--line); } .management-summary article:last-child { border-right: 0; } .management-summary strong, .management-summary small { display: block; } .management-summary strong { color: var(--ink); font-size: 1.75rem; font-weight: 620; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .management-summary small { margin-top: 3px; color: var(--muted); font-size: 0.78rem; } .management-summary-icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; font-size: 0.76rem; font-weight: 800; } .management-summary-icon.models { color: var(--accent-strong); background: var(--accent-soft); } .management-summary-icon.margin { color: var(--success); background: var(--success-soft); } .management-summary-icon.decisions { color: var(--warning); background: var(--warning-soft); } .management-summary-icon.blocks { color: var(--danger); background: var(--danger-soft); } .management-brief-panel { padding: 22px 24px; } .management-brief-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 9px; } .management-brief-item { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; padding: 14px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 11px; transition: transform 150ms var(--ease-out), border-color 150ms ease, background-color 150ms ease; } .management-brief-rank { width: 29px; height: 29px; display: grid; place-items: center; color: var(--accent-strong); background: var(--accent-soft); border-radius: 8px; font-size: 0.68rem; font-weight: 780; } .management-brief-item.tone-bad .management-brief-rank { color: var(--danger); background: var(--danger-soft); } .management-brief-item.tone-watch .management-brief-rank { color: var(--warning); background: var(--warning-soft); } .management-brief-item small, .management-brief-item strong { display: block; } .management-brief-item small { color: var(--muted); font-size: 0.65rem; font-weight: 720; letter-spacing: 0.08em; text-transform: uppercase; } .management-brief-item strong { margin-top: 4px; color: var(--ink); font-size: 0.82rem; line-height: 1.35; } .management-brief-item p { margin: 5px 0 0; color: var(--muted); font-size: 0.72rem; line-height: 1.45; } .management-brief-item button { grid-column: 2; justify-self: start; padding: 0; color: var(--accent-strong); background: none; border: 0; cursor: pointer; font-size: 0.72rem; font-weight: 700; } .management-brief-item button span { display: inline-block; transition: transform 140ms var(--ease-out); } .management-profit-panel { padding: 24px; } .management-profit-head { align-items: center; } .management-target-form { display: flex; align-items: center; gap: 7px; } .management-target-form label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 0.75rem; } .management-target-form input { width: 66px; min-height: 36px; padding: 7px 9px; text-align: right; } .management-formula { display: flex; align-items: center; gap: 7px; overflow-x: auto; margin: 2px 0 18px; padding: 11px 12px; color: var(--muted); background: var(--panel-inset); border: 1px solid var(--line-soft); border-radius: 10px; font-size: 0.72rem; white-space: nowrap; } .management-formula span, .management-formula strong { padding: 5px 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; } .management-formula i { color: var(--faint); font-style: normal; } .management-formula strong { color: var(--accent-strong); } .management-profit-table { min-width: 1180px; } .management-profit-table td { font-size: 0.76rem; } .management-profit-table td:first-child { position: sticky; left: 0; z-index: 2; background: var(--panel); } .management-profit-table tbody tr:hover td:first-child { background: var(--panel-2); } .management-margin-cell strong { color: var(--ink); } .management-delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 680; } .management-delta.up { color: var(--success); } .management-delta.down { color: var(--danger); } .management-delta.flat { color: var(--muted); } .management-columns { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr); align-items: start; gap: 18px; } .management-journal-panel, .management-block-panel { padding: 22px; } .management-composer { margin-bottom: 18px; overflow: hidden; background: var(--panel-inset); border: 1px solid var(--line); border-radius: 11px; } .management-composer summary { padding: 12px 14px; color: var(--accent-strong); cursor: pointer; font-size: 0.76rem; font-weight: 700; list-style: none; transition: background-color 150ms ease; } .management-composer summary::-webkit-details-marker { display: none; } .management-composer[open] summary { color: var(--ink); border-bottom: 1px solid var(--line); } .management-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; padding: 14px; } .management-form-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 0.7rem; font-weight: 650; } .management-form-grid label.wide { grid-column: 1 / -1; } .management-form-grid input, .management-form-grid select { width: 100%; min-height: 40px; padding: 8px 10px; } .management-form-grid .primary-button { align-self: end; } .management-timeline { position: relative; display: grid; gap: 14px; padding-left: 17px; } .management-timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 4px; width: 1px; background: var(--line); } .management-timeline-item { position: relative; } .management-timeline-dot { position: absolute; top: 17px; left: -17px; z-index: 1; width: 9px; height: 9px; background: var(--accent); border: 2px solid var(--panel); border-radius: 50%; } .management-timeline-item.is-done .management-timeline-dot { background: var(--success); } .management-timeline-card { padding: 14px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 11px; } .management-timeline-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .management-timeline-head small, .management-timeline-head strong { display: block; } .management-timeline-head small { color: var(--muted); font-size: 0.68rem; } .management-timeline-head strong { margin-top: 4px; color: var(--ink); font-size: 0.83rem; line-height: 1.35; } .management-timeline-card > p { margin: 12px 0 0; color: var(--muted); font-size: 0.75rem; line-height: 1.45; } .management-timeline-card > p b { display: block; margin-bottom: 3px; color: var(--ink-soft); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; } .management-review-date { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 0.7rem; } .management-review-date strong { color: var(--ink-soft); } .management-result-field { display: grid; gap: 6px; margin-top: 11px; color: var(--muted); font-size: 0.7rem; } .management-result-field input { width: 100%; min-height: 38px; padding: 8px 10px; } .management-entry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 9px; } .management-entry-actions .icon-mini { margin-left: auto; } .management-block-list { display: grid; gap: 9px; } .management-block-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 12px; background: var(--panel-2); border: 1px solid var(--line-soft); border-left: 3px solid var(--warning); border-radius: 10px; } .management-block-item.tone-bad { border-left-color: var(--danger); } .management-block-item.tone-ok { border-left-color: var(--success); } .management-block-item.is-resolved { opacity: 0.6; } .management-block-icon { width: 30px; height: 30px; display: grid; place-items: center; color: var(--warning); background: var(--warning-soft); border-radius: 8px; font-weight: 780; } .management-block-item.tone-bad .management-block-icon { color: var(--danger); background: var(--danger-soft); } .management-block-item.tone-ok .management-block-icon { color: var(--success); background: var(--success-soft); } .management-block-item small, .management-block-item strong { display: block; } .management-block-item small { color: var(--muted); font-size: 0.65rem; } .management-block-item strong { margin-top: 4px; color: var(--ink); font-size: 0.79rem; line-height: 1.35; } .management-block-item p { margin: 4px 0 0; color: var(--muted); font-size: 0.69rem; } .management-block-actions { display: flex; align-items: center; gap: 5px; } .management-empty { display: flex; align-items: center; gap: 12px; padding: 22px 14px; color: var(--success); } .management-empty > span { width: 34px; height: 34px; flex: none; display: grid; place-items: center; background: var(--success-soft); border-radius: 50%; } .management-empty strong, .management-empty small { display: block; } .management-empty strong { color: var(--ink); font-size: 0.82rem; } .management-empty small { margin-top: 4px; color: var(--muted); font-size: 0.72rem; } @media (hover: hover) and (pointer: fine) { .management-brief-item:hover { transform: translateY(-1px); border-color: var(--accent-border); background: color-mix(in srgb, var(--panel-2) 86%, var(--accent-soft)); } .management-brief-item button:hover span { transform: translateX(3px); } .management-composer summary:hover { background: var(--panel-2); } } @media (max-width: 1120px) { .management-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .management-summary article:nth-child(2) { border-right: 0; } .management-summary article:nth-child(-n + 2) { border-bottom: 1px solid var(--line); } .management-columns { grid-template-columns: 1fr; } } @media (max-width: 760px) { #view-management { gap: 14px; } .management-intro { align-items: stretch; flex-direction: column; gap: 17px; padding: 8px 2px 2px; } .management-intro h2 { font-size: clamp(1.9rem, 10vw, 2.5rem); } .management-intro > div:first-child > p:last-child { font-size: 0.82rem; } .management-intro-actions { width: 100%; } .management-intro-actions > * { flex: 1; } .management-summary article { min-height: 86px; padding: 14px; } .management-summary strong { font-size: 1.4rem; } .management-summary small { font-size: 0.68rem; } .management-brief-panel, .management-profit-panel, .management-journal-panel, .management-block-panel { padding: 17px 15px; } .management-profit-head { align-items: flex-start; flex-direction: column; } .management-target-form { width: 100%; justify-content: space-between; } .management-form-grid { grid-template-columns: 1fr; } .management-form-grid label.wide { grid-column: auto; } .management-block-item { align-items: start; grid-template-columns: auto minmax(0, 1fr); } .management-block-actions { grid-column: 2; } .management-timeline-head { flex-direction: column; } .management-entry-actions .icon-mini { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { .management-brief-item, .management-brief-item button span { transition: none; } } /* ================= V12 — Supabase sync & automatic anomalies ================= */ .cloud-auth-button { min-height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; color: var(--ink-soft); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font: inherit; font-size: 0.72rem; font-weight: 680; transition: border-color 150ms var(--ease-out), background 150ms var(--ease-out), transform 150ms var(--ease-out); } .cloud-auth-dot { width: 7px; height: 7px; flex: none; background: var(--faint); border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, var(--faint) 12%, transparent); } .cloud-auth-button.is-online .cloud-auth-dot { background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); } .cloud-auth-button.is-syncing .cloud-auth-dot { background: var(--warning); box-shadow: 0 0 0 4px var(--warning-soft); animation: cloud-pulse 1s ease-in-out infinite; } .cloud-auth-button.is-error .cloud-auth-dot { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); } @keyframes cloud-pulse { 50% { opacity: 0.38; transform: scale(0.72); } } .cloud-auth-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; } .cloud-auth-open { overflow: hidden; } .cloud-auth-modal[hidden] { display: none; } .cloud-auth-scrim { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; background: rgba(12, 8, 18, 0.58); border: 0; cursor: default; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .cloud-auth-card { position: relative; z-index: 1; width: min(100%, 430px); padding: 30px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34); animation: cloud-card-in 220ms var(--ease-out) both; } .cloud-auth-card h2 { margin: 5px 34px 8px 0; font-size: 1.55rem; letter-spacing: -0.035em; } .cloud-auth-card > div > p:not(.eyebrow) { margin: 0 0 20px; color: var(--muted); font-size: 0.8rem; line-height: 1.55; } .cloud-auth-close { position: absolute; top: 15px; right: 15px; width: 34px; height: 34px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; cursor: pointer; font-size: 1.2rem; } .cloud-auth-form { display: grid; gap: 13px; } .cloud-auth-form label { display: grid; gap: 6px; color: var(--muted); font-size: 0.72rem; font-weight: 650; } .cloud-auth-form input { width: 100%; min-height: 44px; padding: 10px 12px; } .cloud-auth-form .primary-button { justify-content: center; margin-top: 4px; } .cloud-auth-link { display: block; margin: 14px auto 0; padding: 4px; color: var(--accent-strong); background: none; border: 0; cursor: pointer; font: inherit; font-size: 0.75rem; font-weight: 700; } .cloud-auth-message { margin: 0 !important; padding: 10px 11px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; } .cloud-auth-message.is-error { color: var(--danger) !important; background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 28%, transparent); } .cloud-auth-sync-status { padding: 12px; background: var(--success-soft); border: 1px solid color-mix(in srgb, var(--success) 23%, transparent); border-radius: 9px; } .cloud-auth-card .secondary-action { width: 100%; justify-content: center; } @keyframes cloud-card-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } } .management-anomaly-panel { padding: 22px 24px; } .management-anomaly-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 9px; } .management-anomaly-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; padding: 14px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 11px; } .management-anomaly-card.tone-bad { border-color: color-mix(in srgb, var(--danger) 34%, var(--line)); } .management-anomaly-card.tone-watch { border-color: color-mix(in srgb, var(--warning) 34%, var(--line)); } .management-anomaly-icon { width: 31px; height: 31px; display: grid; place-items: center; color: var(--warning); background: var(--warning-soft); border-radius: 8px; font-weight: 800; } .management-anomaly-card.tone-bad .management-anomaly-icon { color: var(--danger); background: var(--danger-soft); } .management-anomaly-card small, .management-anomaly-card strong { display: block; } .management-anomaly-card small { color: var(--muted); font-size: 0.63rem; font-weight: 720; letter-spacing: 0.07em; text-transform: uppercase; } .management-anomaly-card strong { margin-top: 4px; color: var(--ink); font-size: 0.8rem; line-height: 1.35; } .management-anomaly-card p { grid-column: 2; margin: -3px 0 0; color: var(--muted); font-size: 0.7rem; line-height: 1.45; } .management-ops-composer { margin-top: 14px; } .management-ops-form { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (hover: hover) and (pointer: fine) { .cloud-auth-button:hover { border-color: var(--accent-border); background: var(--panel-2); transform: translateY(-1px); } .cloud-auth-close:hover { color: var(--ink); border-color: var(--accent-border); } .cloud-auth-link:hover { text-decoration: underline; text-underline-offset: 3px; } } @media (max-width: 920px) { .cloud-auth-button #cloudAuthLabel { display: none; } .cloud-auth-button { width: 38px; justify-content: center; padding: 8px; } .management-ops-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .management-anomaly-panel { padding: 17px 15px; } .management-ops-form { grid-template-columns: 1fr; } .cloud-auth-modal { padding: 12px; align-items: end; } .cloud-auth-card { padding: 25px 20px 22px; border-radius: 18px 18px 12px 12px; } } @media (prefers-reduced-motion: reduce) { .cloud-auth-button, .cloud-auth-card { transition: none; animation: none; } .cloud-auth-button.is-syncing .cloud-auth-dot { animation: none; } } /* ========================================================================== V13 — Architecture par espaces, recherche et trois compositions dashboard ========================================================================== */ .sidebar { overflow: hidden; } .sidebar-scroll { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding-right: 3px; } .sidebar-scroll .nav-overline { flex: none; } .sidebar-scroll .nav { flex: none; } .sidebar-scroll .sidebar-tools { flex: none; margin-top: 10px; } .sidebar-footer { flex: none; margin-top: 0; } .global-search-button { min-height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 9px 7px 11px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font: inherit; font-size: 0.8rem; transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out), background-color 150ms var(--ease-out), transform 120ms var(--ease-out); } .global-search-button svg, .global-search-head svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .global-search-button kbd, .global-search-head kbd { padding: 2px 6px; color: var(--faint); background: var(--panel-inset); border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 0.68rem; } .workspace-toolbar { display: flex; align-items: center; justify-content: flex-start; gap: 14px; margin: -4px 0 18px; } .workspace-toolbar[hidden] { display: none; } .context-nav { min-width: 0; display: flex; align-items: center; gap: 3px; overflow-x: auto; padding: 3px; background: var(--panel-inset); border: 1px solid var(--line); border-radius: 11px; scrollbar-width: none; } .context-nav::-webkit-scrollbar { display: none; } .context-nav button, .model-context-actions button { flex: none; min-height: 34px; padding: 7px 11px; color: var(--muted); background: transparent; border: 0; border-radius: 8px; cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: 640; white-space: nowrap; transition: color 150ms var(--ease-out), background-color 150ms var(--ease-out), transform 120ms var(--ease-out); } .context-nav button.active, .model-context-actions button.active { color: var(--ink); background: var(--panel); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08); } .model-context-bar { display: flex; flex-direction: column; gap: 8px; margin: -4px 0 20px; padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 8px 28px rgba(36, 24, 48, 0.06); } .model-context-bar[hidden] { display: none; } .model-context-main { min-width: 0; display: grid; grid-template-columns: minmax(190px, 270px) minmax(0, 1fr); align-items: center; gap: 10px; } .model-context-picker { min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border: 1px solid transparent; border-radius: 11px; transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out); } .model-context-picker:focus-within { background: var(--panel-2); border-color: var(--accent-border); } .model-context-avatar { width: 36px; height: 36px; display: grid; place-items: center; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: 10px; font-size: 0.7rem; font-weight: 780; letter-spacing: 0.03em; } .model-context-select-field { min-width: 0; display: block; } .model-context-label { display: block; margin-bottom: 1px; color: var(--faint); font-size: 0.64rem; font-weight: 730; letter-spacing: 0.06em; text-transform: uppercase; } .model-context-bar select { width: 100%; min-height: 24px; padding: 0 24px 0 0; color: var(--ink); background-color: transparent; border: 0; border-radius: 0; outline: 0; font: inherit; font-size: 0.84rem; font-weight: 680; } .model-context-actions { min-width: 0; display: flex; justify-content: flex-start; gap: 3px; overflow-x: auto; padding: 3px; background: var(--panel-inset); border: 1px solid var(--line-soft); border-radius: 11px; scrollbar-width: none; } .model-context-actions::-webkit-scrollbar { display: none; } .model-context-note { display: flex; align-items: center; gap: 6px; margin: 0 6px 2px 50px; color: var(--muted); font-size: 0.72rem; line-height: 1.4; } .model-context-note svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--accent-strong); stroke-width: 1.8; stroke-linecap: round; } .access-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); } .access-summary article { min-height: 96px; display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-right: 1px solid var(--line); } .access-summary article:last-child { border-right: 0; } .access-summary strong, .access-summary small { display: block; } .access-summary strong { font-size: 1.7rem; font-weight: 620; letter-spacing: -0.04em; } .access-summary small { margin-top: 3px; color: var(--muted); font-size: 0.78rem; } .management-access-panel { padding: 26px; } .access-member-form { display: grid; grid-template-columns: 1fr 1.25fr 0.8fr 0.95fr auto; align-items: stretch; gap: 4px; margin: 20px 0 0; padding: 4px; background: color-mix(in srgb, var(--panel-inset) 76%, transparent); border: 1px solid var(--line); border-radius: 15px; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 42%, transparent); } .access-member-form label { min-width: 0; min-height: 64px; display: grid; align-content: center; gap: 4px; padding: 9px 13px; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 11px; transition: color 150ms var(--ease-out), background-color 150ms var(--ease-out), border-color 150ms var(--ease-out), transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out); } .access-field-label { font-size: 0.64rem; font-weight: 760; letter-spacing: 0.06em; text-transform: uppercase; } .access-member-form input, .access-member-form select { min-width: 0; width: 100%; min-height: 26px; padding: 0; color: var(--ink); background: transparent; border: 0; border-radius: 0; box-shadow: none; font-size: 0.84rem; font-weight: 610; } .access-member-form input:focus, .access-member-form select:focus { box-shadow: none; outline: none; } .access-member-form label:focus-within { color: var(--accent-strong); background: var(--panel); border-color: var(--accent-border); box-shadow: 0 8px 22px rgba(80, 42, 118, 0.08); transform: translateY(-1px); } .access-submit { min-height: 64px; margin-left: 3px; padding-inline: 17px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 11px; white-space: nowrap; } .access-submit > span:last-child { font-size: 1rem; transition: transform 150ms var(--ease-out); } .access-permission-note { display: flex; align-items: center; gap: 9px; margin-top: 12px; } .access-permission-note > span:first-child { width: 20px; height: 20px; flex: none; display: grid; place-items: center; color: var(--accent-strong); background: var(--accent-soft); border-radius: 50%; font-size: 0.68rem; font-weight: 800; } .access-permission-note strong { color: var(--ink-soft); font-weight: 680; } .access-member-list { display: grid; gap: 8px; margin-top: 18px; } .access-member-row { display: grid; grid-template-columns: auto minmax(150px, 1.25fr) minmax(120px, 0.7fr) minmax(140px, 0.8fr) auto; align-items: center; gap: 14px; padding: 14px 15px; background: linear-gradient(105deg, color-mix(in srgb, var(--accent-soft) 24%, var(--panel-2)), var(--panel-2) 28%); border: 1px solid var(--line-soft); border-radius: 14px; transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out), transform 150ms var(--ease-out); } .access-member-row.is-entering { animation: access-row-in 180ms var(--ease-out) both; } .access-avatar { width: 40px; height: 40px; display: grid; place-items: center; color: var(--accent-strong); background: linear-gradient(145deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 58%, var(--panel))); border: 1px solid var(--accent-border); border-radius: 12px; font-weight: 780; } .access-member-copy strong, .access-member-copy small { display: block; } .access-member-copy strong { font-size: 0.84rem; } .access-member-copy small { margin-top: 3px; color: var(--muted); font-size: 0.72rem; } .access-member-meta { color: var(--muted); font-size: 0.75rem; } .access-member-meta strong { display: block; color: var(--ink-soft); font-size: 0.78rem; } .access-member-actions { display: flex; align-items: center; gap: 6px; } .access-status { min-height: 30px; padding: 6px 10px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 0.7rem; font-weight: 720; transition: transform 120ms var(--ease-out), filter 150ms var(--ease-out), box-shadow 150ms var(--ease-out); } .access-status.active { color: var(--success); background: var(--success-soft); } .access-status.pending { color: var(--warning); background: var(--warning-soft); } .access-status.suspended { color: var(--danger); background: var(--danger-soft); } .management-pilotage { overflow: clip; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; } .management-pilotage > summary { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 20px; cursor: pointer; list-style: none; } .management-pilotage > summary::-webkit-details-marker { display: none; } .management-pilotage > summary strong, .management-pilotage > summary small { display: block; } .management-pilotage > summary small { margin-top: 3px; color: var(--muted); font-size: 0.75rem; } .management-pilotage > summary > span:last-child { color: var(--accent-strong); font-size: 1.2rem; transition: transform 180ms var(--ease-out); } .management-pilotage[open] > summary { border-bottom: 1px solid var(--line); } .management-pilotage[open] > summary > span:last-child { transform: rotate(45deg); } .management-pilotage > :not(summary) { margin: 18px; } .model-open-button { min-height: 32px; padding: 6px 9px; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: 8px; cursor: pointer; font: inherit; font-size: 0.72rem; font-weight: 700; white-space: nowrap; } .global-search-modal { position: fixed; inset: 0; z-index: 110; display: grid; align-items: start; justify-items: center; padding: min(12vh, 110px) 18px 18px; } .global-search-modal[hidden] { display: none; } .global-search-scrim { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; background: rgba(9, 6, 14, 0.52); border: 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .global-search-card { position: relative; z-index: 1; width: min(100%, 660px); overflow: hidden; color: var(--ink); background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--line); border-radius: 17px; box-shadow: 0 28px 90px rgba(0, 0, 0, 0.3); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); } .global-search-head { min-height: 64px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 10px 14px; border-bottom: 1px solid var(--line); } .global-search-head svg { color: var(--muted); } .global-search-head input { min-width: 0; width: 100%; padding: 8px 0; color: var(--ink); background: transparent; border: 0; box-shadow: none; font-size: 1rem; } .global-search-head input:focus { box-shadow: none; } .global-search-results { max-height: min(58vh, 480px); overflow-y: auto; padding: 8px; } .global-search-group { padding: 8px 10px 5px; color: var(--faint); font-size: 0.66rem; font-weight: 760; letter-spacing: 0.08em; text-transform: uppercase; } .global-search-result { width: 100%; min-height: 56px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 8px 10px; color: var(--ink); text-align: left; background: transparent; border: 0; border-radius: 10px; cursor: pointer; } .global-search-result.active { background: var(--accent-soft); } .global-search-result-icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--accent-strong); background: var(--panel); border: 1px solid var(--line); border-radius: 9px; font-size: 0.7rem; font-weight: 760; } .global-search-result strong, .global-search-result small { display: block; } .global-search-result strong { font-size: 0.84rem; } .global-search-result small { margin-top: 3px; color: var(--muted); font-size: 0.72rem; } .global-search-result > span:last-child { color: var(--faint); } .global-search-empty { padding: 42px 18px; color: var(--muted); text-align: center; } .global-search-card footer { display: flex; gap: 16px; padding: 10px 14px; color: var(--faint); border-top: 1px solid var(--line); font-size: 0.68rem; } @keyframes access-row-in { from { opacity: 0; transform: translateY(6px); } } /* Survol = intention. Les surfaces passives restent parfaitement stables. */ .panel:hover, .metric:hover { transform: none; box-shadow: var(--shadow); } @media (hover: hover) and (pointer: fine) { .global-search-button:hover, .context-nav button:hover, .model-context-actions button:hover { color: var(--ink); background: var(--panel-2); border-color: var(--accent-border); } .model-context-picker:hover { background: var(--panel-2); border-color: var(--line); } .model-open-button:hover { color: #fff; background: var(--accent); } .access-member-row:hover { border-color: var(--accent-border); box-shadow: 0 10px 28px rgba(52, 32, 72, 0.08); transform: translateY(-1px); } .access-submit:hover > span:last-child { transform: translateX(3px); } .access-status:hover { filter: brightness(1.04); box-shadow: 0 5px 14px rgba(35, 23, 48, 0.08); } .global-search-result:hover { background: var(--panel-2); } } :is(.global-search-button, .context-nav button, .model-context-actions button, .model-open-button, .access-status):active { transform: scale(0.97); filter: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } html.theme-transitioning::view-transition-new(root) { z-index: 9999; } html.theme-transitioning::view-transition-old(root) { z-index: 1; } @media (max-width: 1100px) { .access-member-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .access-member-form .primary-button { justify-self: start; } .access-member-row { grid-template-columns: auto minmax(0, 1fr) auto; } .access-member-row .access-member-meta { grid-column: 2; } .access-member-actions { grid-column: 3; grid-row: 1 / span 2; } } @media (max-width: 760px) { .sidebar { overflow: hidden; } .sidebar-scroll { gap: 12px; padding-right: 2px; } .sidebar-footer { margin-top: 4px; } .global-search-button { width: 40px; min-width: 40px; justify-content: center; padding: 8px; } .global-search-button span, .global-search-button kbd { display: none; } .workspace-toolbar { align-items: stretch; flex-direction: column; margin-bottom: 14px; } .context-nav { width: 100%; } .model-context-main { grid-template-columns: 1fr; } .model-context-picker { padding-right: 6px; } .model-context-actions { justify-content: flex-start; } .model-context-note { margin-left: 6px; } .access-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .access-summary article:nth-child(2) { border-right: 0; } .access-summary article:nth-child(-n + 2) { border-bottom: 1px solid var(--line); } .management-access-panel { padding: 17px 15px; } .access-member-form { grid-template-columns: 1fr; padding: 13px; } .access-member-row { grid-template-columns: auto minmax(0, 1fr); } .access-member-row .access-member-meta { grid-column: 2; } .access-member-actions { grid-column: 2; grid-row: auto; flex-wrap: wrap; } .management-pilotage > :not(summary) { margin: 12px; } .global-search-modal { padding: calc(10px + env(safe-area-inset-top)) 10px 10px; align-items: start; } .global-search-card { border-radius: 14px; } .global-search-results { max-height: calc(100dvh - 150px - env(safe-area-inset-top)); } } @media (prefers-reduced-motion: reduce) { .access-member-row.is-entering { animation: none; } .management-pilotage > summary > span:last-child, .global-search-button, .context-nav button, .model-context-actions button { transition: opacity 180ms ease, color 180ms ease, background-color 180ms ease; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.01ms !important; } } /* ================= V14 — Retours d'interaction précis ================= */ .chart-toggle { gap: 3px; padding: 3px; background: color-mix(in srgb, var(--panel-inset) 88%, transparent); border-radius: 11px; } .chart-toggle-btn { min-height: 36px; padding: 7px 11px; border-radius: 8px; transition: color 150ms var(--ease-out), background-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out), transform 120ms var(--ease-out); } .chart-toggle-btn.active { color: var(--accent-strong); background: var(--panel); box-shadow: 0 1px 6px rgba(42, 24, 60, 0.1), inset 0 0 0 1px var(--accent-border); } :is( .primary-button, .secondary-action, .primary-action, .mini-button, .ghost-button, .icon-btn, .icon-mini, .cloud-auth-button, .overview-cta, .model-open-button, .status-toggle, .state-chip, .sort-th, .task-category-button, .task-priority-filter button, .range-bar button, .filter-chips button ) { transition: color 150ms var(--ease-out), background-color 150ms var(--ease-out), border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out), transform 120ms var(--ease-out), filter 150ms var(--ease-out); } :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { transition: color 150ms var(--ease-out), background-color 150ms var(--ease-out), border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out); } .management-composer > summary, .management-pilotage > summary, .overview-analysis > summary { transition: color 150ms var(--ease-out), background-color 150ms var(--ease-out), border-color 150ms var(--ease-out); } .management-pilotage[open] > :not(summary), .management-composer[open] > :not(summary), .overview-analysis[open] > :not(summary) { animation: disclosure-in 180ms var(--ease-out) both; } @keyframes disclosure-in { from { opacity: 0; transform: translateY(-4px); } } :is(button, a[href], input, select, textarea, summary):focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 72%, #fff); outline-offset: 3px; } @media (hover: hover) and (pointer: fine) { :is(.primary-button, .primary-action, .overview-cta):not(:disabled):hover { transform: translateY(-1px); filter: saturate(1.06) brightness(1.03); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 20%, transparent); } :is(.secondary-action, .mini-button, .ghost-button, .cloud-auth-button, .model-open-button):not(:disabled):hover { transform: translateY(-1px); border-color: var(--accent-border); box-shadow: 0 7px 18px rgba(48, 30, 65, 0.08); } :is(.icon-btn, .icon-mini):not(:disabled):hover { transform: translateY(-1px) scale(1.03); } :is(.chart-toggle-btn, .range-bar button, .filter-chips button, .task-priority-filter button):not(:disabled):hover { color: var(--ink); background: var(--panel-2); } :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):not(:focus):hover { border-color: color-mix(in srgb, var(--accent) 36%, var(--line)); } :is(.management-composer, .management-pilotage, .overview-analysis) > summary:hover { color: var(--ink); background: color-mix(in srgb, var(--panel-2) 88%, var(--accent-soft)); } .global-search-result:hover > span:last-child, .management-brief-item button:hover span, .reach-module-link:hover .reach-module-arrow { transform: translateX(3px); } } :is( .primary-button, .secondary-action, .primary-action, .mini-button, .ghost-button, .icon-btn, .icon-mini, .cloud-auth-button, .overview-cta, .model-open-button, .chart-toggle-btn, .status-toggle, .state-chip, .range-bar button, .filter-chips button, .task-priority-filter button ):not(:disabled):active { transform: scale(0.97); box-shadow: none; filter: brightness(0.96); } .global-search-result > span:last-child { transition: transform 140ms var(--ease-out), color 140ms var(--ease-out); } @media (prefers-reduced-motion: reduce) { .management-pilotage[open] > :not(summary), .management-composer[open] > :not(summary), .overview-analysis[open] > :not(summary) { animation: none; } :is(.primary-button, .secondary-action, .primary-action, .mini-button, .ghost-button, .icon-btn, .icon-mini, .cloud-auth-button, .overview-cta, .model-open-button, .chart-toggle-btn):active { transform: none; } } /* ================= V15 — Croissance d'audience par modèle ================= */ .audience-growth-panel { overflow: hidden; padding: 24px 26px 20px; } .audience-growth-head { align-items: flex-start; gap: 18px; margin-bottom: 18px; } .audience-growth-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .audience-segmented { display: inline-flex; align-items: center; gap: 3px; padding: 3px; background: color-mix(in srgb, var(--panel-inset) 88%, transparent); border: 1px solid var(--line); border-radius: 11px; } .audience-segmented button { min-height: 34px; padding: 7px 11px; color: var(--muted); background: transparent; border: 0; border-radius: 8px; cursor: pointer; font: inherit; font-size: 0.76rem; font-weight: 680; white-space: nowrap; transition: color 150ms var(--ease-out), background-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out), transform 120ms var(--ease-out); } .audience-segmented button.active { color: var(--accent-strong); background: var(--panel); box-shadow: 0 1px 6px rgba(42, 24, 60, 0.09), inset 0 0 0 1px var(--accent-border); } .audience-range-tabs button { min-width: 38px; padding-inline: 9px; } .audience-growth-body { display: grid; grid-template-columns: minmax(190px, 230px) minmax(0, 1fr); gap: 20px; align-items: stretch; } .audience-growth-summary { min-height: 226px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 22px; background: radial-gradient(circle at 14% 12%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 46%), color-mix(in srgb, var(--panel-inset) 82%, transparent); border: 1px solid var(--line); border-radius: 14px; } .audience-growth-icon { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 18px; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: 11px; } .audience-growth-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .audience-current-label { color: var(--muted); font-size: 0.76rem; font-weight: 690; } #audienceCurrent { margin-top: 5px; color: var(--ink); font-size: clamp(2.15rem, 3.6vw, 3.05rem); font-weight: 620; letter-spacing: -0.055em; line-height: 1; font-variant-numeric: tabular-nums; } .audience-delta { display: inline-flex; align-items: center; min-height: 26px; margin-top: 16px; padding: 4px 9px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; font-size: 0.68rem; font-weight: 720; font-variant-numeric: tabular-nums; } .audience-delta.positive { color: var(--success); background: var(--success-soft); border-color: var(--success-border); } .audience-delta.negative { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-border); } .audience-growth-visual { min-width: 0; } .audience-dither-chart { min-height: 226px; overflow: visible; padding: 3px 4px 0; background: color-mix(in srgb, var(--panel-inset) 40%, transparent); border: 1px solid var(--line-soft); border-radius: 14px; } .dither-grid { opacity: 0.62; } .dither-grid-dot { fill: var(--ink); opacity: 0.06; } .dither-guide { opacity: 0.7; } .dither-growth-wash, .dither-growth-fill { pointer-events: none; animation: dither-rise 520ms var(--ease-out) both; } .dither-growth-fill { opacity: 0.72; animation-delay: 70ms; } .dither-growth-edge { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len, 1500); stroke-dashoffset: var(--len, 1500); animation: draw 780ms var(--ease-out) 60ms forwards; } .dither-growth-end { transition: r 130ms var(--ease-out), filter 130ms var(--ease-out); filter: drop-shadow(0 0 8px var(--accent-glow)); } .audience-data-note { margin-top: 10px; padding-top: 0; border-top: 0; line-height: 1.45; } @keyframes dither-rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } @media (hover: hover) and (pointer: fine) { .audience-segmented button:not(.active):hover { color: var(--ink); background: var(--panel-2); } } .audience-segmented button:active { transform: scale(0.96); } @media (max-width: 980px) { .audience-growth-body { grid-template-columns: minmax(170px, 200px) minmax(0, 1fr); } } @media (max-width: 760px) { .audience-growth-panel { padding: 18px 14px 16px; } .audience-growth-head { align-items: stretch; flex-direction: column; } .audience-growth-controls { justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } .audience-growth-controls::-webkit-scrollbar { display: none; } .audience-growth-body { grid-template-columns: 1fr; gap: 12px; } .audience-growth-summary { min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; padding: 16px; } .audience-growth-icon { grid-row: 1 / span 3; margin: 0; } .audience-current-label { align-self: end; } #audienceCurrent { margin-top: 3px; font-size: 2.1rem; } .audience-delta { grid-column: 2; justify-self: start; margin-top: 10px; } .audience-dither-chart { min-height: 210px; } } @media (prefers-reduced-motion: reduce) { .dither-growth-wash, .dither-growth-fill, .dither-growth-edge { animation: none; stroke-dashoffset: 0; } .audience-segmented button { transition: color 150ms ease, background-color 150ms ease; } .audience-segmented button:active { transform: none; } } /* ================= V16 — Hub compact, tâches riches et dither natif ================= */ .brand { min-height: 38px; display: flex; align-items: center; } .brand .brand-symbol { display: none; width: 38px; height: 38px; color: currentColor; object-fit: contain; filter: none; } [data-theme="light"] .brand .brand-symbol { display: none; } .sidebar-bottom { flex: none; display: grid; gap: 7px; } .sidebar-quick-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } .sidebar-bottom .reach-module-link, .sidebar-account-button { min-width: 0; min-height: 48px; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 8px; color: var(--ink-soft); background: color-mix(in srgb, var(--panel) 76%, transparent); border: 1px solid var(--line); border-radius: 11px; box-shadow: none; } .sidebar-bottom .reach-module-link { overflow: visible; } .sidebar-bottom .reach-module-link { display: grid; } .sidebar-bottom .reach-module-icon, .cloud-auth-avatar { width: 30px; height: 30px; display: grid; place-items: center; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: 9px; box-shadow: none; font-size: 0.61rem; font-weight: 800; } .sidebar-bottom .reach-module-copy strong, .cloud-auth-copy strong { color: var(--ink); font-size: 0.7rem; } .sidebar-bottom .reach-module-copy small, .cloud-auth-copy small { display: block; margin-top: 1px; overflow: hidden; color: var(--muted); font-size: 0.61rem; text-overflow: ellipsis; white-space: nowrap; } .sidebar-bottom .reach-module-arrow { display: none; } .sidebar-account-button { position: relative; display: grid; text-align: left; } .sidebar-account-button .cloud-auth-dot { position: absolute; right: 9px; top: 9px; width: 6px; height: 6px; } .sidebar-account-button .cloud-auth-copy { min-width: 0; } .sidebar-footer { min-height: 30px; gap: 7px; padding: 6px 9px; background: transparent; border-color: transparent; opacity: 0.66; } .sidebar-footer:hover { opacity: 1; background: color-mix(in srgb, var(--panel) 55%, transparent); border-color: var(--line); } .sidebar-footer .status-dot { width: 6px; height: 6px; } .sidebar-footer strong { font-size: 0.66rem; font-weight: 680; } .sidebar-footer span { margin-top: 0; font-size: 0.58rem; } .global-search-button { width: 38px; min-width: 38px; justify-content: center; padding: 0; border-radius: 10px; } .data-mode-indicator { min-height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; color: var(--muted); background: transparent; border: 1px solid var(--line-soft); border-radius: 999px; font-size: 0.67rem; font-weight: 700; } .data-mode-indicator i { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; } .reset-demo-button { width: 34px; min-width: 34px; } .reset-demo-button svg { position: static; margin: 0; } .icon-action { width: 42px; min-width: 42px; padding: 0; display: inline-grid; place-items: center; font-size: 1rem; } :is([data-tooltip], .task-priority, .task-assignee, .task-link) { position: relative; } @media (hover: hover) and (pointer: fine) { [data-tooltip]::after { content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 60; max-width: 220px; padding: 6px 8px; color: #f7f3fb; background: #251c30; border: 1px solid rgba(255,255,255,.1); border-radius: 7px; box-shadow: 0 9px 24px rgba(16, 10, 22, .28); opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity 130ms ease, transform 130ms var(--ease-out); font-size: 0.65rem; font-weight: 650; line-height: 1.25; white-space: nowrap; } [data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); } } .primary-action, .primary-button { background: linear-gradient(135deg, var(--accent-deep), var(--accent)); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent-deep) 20%, transparent); } .nav-item.active { background: linear-gradient(90deg, rgba(101, 75, 131, 0.36), rgba(101, 75, 131, 0.12)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 5px 16px rgba(40, 27, 54, .25); } .management-pilotage { display: grid; gap: 0; overflow: visible; background: transparent; border: 0; border-radius: 0; } .management-pilotage-head { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 4px 0 0; padding: 18px 22px; background: linear-gradient(108deg, color-mix(in srgb, var(--accent-soft) 72%, var(--panel)), var(--panel) 58%); border: 1px solid var(--accent-border); border-radius: 14px; } .management-pilotage-head small, .management-pilotage-head strong, .management-pilotage-head span > span { display: block; } .management-pilotage-head small { color: var(--accent-strong); font-size: .64rem; font-weight: 760; letter-spacing: .09em; text-transform: uppercase; } .management-pilotage-head strong { margin-top: 4px; font-size: 1rem; } .management-pilotage-head span > span { margin-top: 3px; color: var(--muted); font-size: .74rem; } .management-pilotage-head > i { width: 34px; height: 34px; display: grid; place-items: center; color: var(--accent-strong); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; font-style: normal; } .management-pilotage > :not(.management-pilotage-head) { margin: 18px 0 0; } .access-submit.icon-action { width: 64px; min-width: 64px; padding: 0; } .management-intro-actions .icon-action { flex: none; } .task-toolbar { padding: 11px; } .task-toolbar-main { gap: 8px; } .task-priority-filter { gap: 1px; padding: 3px; } .task-priority-filter button { width: 34px; min-width: 34px; height: 34px; padding: 0; display: grid; place-items: center; } .task-priority-filter button > i { width: 9px; height: 9px; display: block; border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 10%, transparent); } .task-priority-filter .tone-critical { color: var(--danger); } .task-priority-filter .tone-high { color: var(--warning); } .task-priority-filter .tone-normal { color: var(--accent-strong); } .task-priority-filter .tone-later { color: var(--muted); } .task-priority-filter button > i { background: currentColor; } .task-priority-filter button.active { background: var(--panel); box-shadow: inset 0 0 0 1px var(--accent-border), 0 1px 5px rgba(0,0,0,.06); } .task-create { grid-template-columns: minmax(270px, 1.25fr) minmax(230px, .75fr) minmax(240px, .8fr); align-items: stretch; gap: 10px; padding: 14px; background: color-mix(in srgb, var(--panel-inset) 72%, transparent); border: 1px solid var(--line); border-radius: 13px; } .task-create-copy, .task-create-meta, .task-create-attachments { display: grid; align-content: start; gap: 10px; } .task-create label { gap: 5px; } .task-create textarea { min-height: 76px; resize: vertical; } .task-create :is(input, select, textarea) { min-height: 40px; padding: 8px 10px; background: var(--panel); } .task-create fieldset { min-width: 0; margin: 0; padding: 0; border: 0; } .task-create legend { margin-bottom: 6px; color: var(--muted); font-size: .7rem; font-weight: 650; } .task-dot-choice, .task-assignee-choice { display: flex; align-items: center; gap: 7px; } .task-dot-choice label, .task-assignee-choice label { position: relative; display: grid; place-items: center; cursor: pointer; } .task-dot-choice input, .task-assignee-choice input { position: absolute; opacity: 0; pointer-events: none; } .task-dot-choice i { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); } .task-dot-choice i::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .task-dot-choice .tone-critical { color: var(--danger); } .task-dot-choice .tone-high { color: var(--warning); } .task-dot-choice .tone-normal { color: var(--accent-strong); } .task-dot-choice .tone-later { color: var(--muted); } .task-dot-choice input:checked + i, .task-assignee-choice input:checked + .task-person-avatar { border-color: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 13%, transparent); transform: scale(1.04); } .task-person-avatar, .task-assignee { width: 28px; height: 28px; display: grid; place-items: center; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 9px; font-size: .66rem; font-weight: 800; } .task-person-avatar.killermy, .task-assignee.killermy { color: #6c4c8b; background: #f2edf6; border-color: #d9cce4; } .task-person-avatar.luca, .task-assignee.luca { color: #277064; background: #eaf5f2; border-color: #cae5df; } .task-create-attachments { grid-template-columns: minmax(0, 1fr) 92px 42px; align-items: end; } .task-create-attachments > label:first-child { grid-column: 1 / -1; } .task-image-drop { min-height: 66px; display: grid !important; grid-template-columns: 29px 1fr; grid-template-rows: auto auto; align-content: center !important; column-gap: 8px !important; padding: 8px !important; color: var(--muted); background: var(--panel); border: 1px dashed var(--line) !important; border-radius: 10px; cursor: pointer; } .task-image-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; } .task-image-drop > span { grid-row: 1 / 3; width: 29px; height: 29px; display: grid; place-items: center; overflow: hidden; color: var(--accent-strong); background: var(--accent-soft); border-radius: 8px; } .task-image-drop > span img { width: 100%; height: 100%; object-fit: cover; } .task-image-drop strong { color: var(--ink-soft); font-size: .68rem; } .task-image-drop small { font-size: .58rem; } .task-image-drop.is-dragging { border-color: var(--accent) !important; background: var(--accent-soft); } .task-create-submit { align-self: stretch; height: 66px; } .task-row { grid-template-columns: auto auto minmax(0, 1fr) auto auto; min-height: 78px; } .task-copy p { margin: 4px 0 0; overflow: hidden; color: var(--ink-soft); font-size: .73rem; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; } .task-row-extras { display: flex; align-items: center; justify-content: flex-end; gap: 6px; } .task-priority { width: 26px; min-width: 26px; height: 26px; min-height: 26px; justify-content: center; padding: 0; } .task-priority i { width: 7px; height: 7px; } .task-image-thumb, .task-link, .task-assignee { flex: none; padding: 0; cursor: pointer; text-decoration: none; } .task-image-thumb { width: 32px; height: 32px; overflow: hidden; background: var(--panel-inset); border: 1px solid var(--line); border-radius: 8px; } .task-image-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; } .task-link { width: 28px; height: 28px; display: grid; place-items: center; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: 8px; font-weight: 760; } .task-assignee { border: 1px solid var(--line); } .task-assignee.empty { color: var(--faint); border-style: dashed; } .hbar-track, .stack-track, .bullet-track { border-radius: 3px; } .hbar-bar { inset-block: 2px; border-radius: 2px; } .stack-seg { border-radius: 1px; } .bullet-track { height: 10px; overflow: visible; } .bullet-fill, .bullet-overrun { border-radius: 2px; } .bullet-fill { background: linear-gradient(90deg, var(--accent-deep), var(--accent)); } .bullet-marker { top: -5px; bottom: -5px; width: 2px; border: 0; border-radius: 1px; } .bullet-marker::after { content: "Cible"; position: absolute; left: 50%; bottom: calc(100% + 3px); color: var(--faint); transform: translateX(-50%); font-size: .55rem; font-style: normal; font-weight: 680; } .col-bar { filter: none; } .col-bar:hover, .col-bar.hover, .col-bar:focus-visible { filter: brightness(1.08); } .dither-stacked { position: relative; width: 100%; height: 224px; overflow: hidden; background: color-mix(in srgb, var(--panel-inset) 48%, transparent); border: 1px solid var(--line-soft); border-radius: 12px; } .dither-stacked canvas { width: 100%; height: 100%; display: block; } .dither-stacked-tooltip { position: absolute; z-index: 4; min-width: 118px; padding: 8px 9px; color: var(--ink); background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-lift); pointer-events: none; } .dither-stacked-tooltip strong, .dither-stacked-tooltip span { display: block; } .dither-stacked-tooltip strong { font-size: .7rem; } .dither-stacked-tooltip span { margin-top: 3px; color: var(--muted); font-size: .64rem; } .dither-growth-native { position: relative; width: 100%; height: 250px; overflow: visible; isolation: isolate; } .dither-growth-native.is-scrubbing { z-index: 8; } .dither-growth-native canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; cursor: crosshair; } .dither-growth-y-axis, .dither-growth-x-axis { position: absolute; inset: 0; z-index: 2; color: var(--faint); font-size: .61rem; font-variant-numeric: tabular-nums; pointer-events: none; } .dither-growth-y-axis span { position: absolute; left: 6px; width: 35px; overflow: hidden; text-align: right; text-overflow: ellipsis; transform: translateY(-50%); white-space: nowrap; } .dither-growth-x-axis span { position: absolute; bottom: 5px; max-width: 92px; overflow: hidden; text-align: center; text-overflow: ellipsis; transform: translateX(-50%); white-space: nowrap; } .dither-growth-x-axis span[data-edge="start"] { transform: none; } .dither-growth-x-axis span[data-edge="end"] { transform: translateX(-100%); } .dither-growth-scrub { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .dither-growth-scrub-line { position: absolute; z-index: 1; width: 1px; background: color-mix(in srgb, var(--dither-glow) 84%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--dither-glow) 18%, transparent), 0 0 12px color-mix(in srgb, var(--dither-glow) 32%, transparent); } .dither-growth-scrub-point { position: absolute; z-index: 2; width: 13px; height: 13px; background: var(--dither-glow); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--dither-glow) 20%, transparent), 0 3px 14px color-mix(in srgb, var(--dither-glow) 58%, transparent); transform: translate(-50%, -50%); } .dither-growth-scrub-card { position: absolute; z-index: 3; min-width: 148px; padding: 10px 13px 11px; color: #fff; text-align: left; background: #17151a; border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; box-shadow: 0 12px 30px rgba(17, 12, 24, .34); transform: translateX(-50%); } .dither-growth-scrub-card::after { content: ""; position: absolute; left: 50%; top: 100%; width: 9px; height: 9px; background: #17151a; border-right: 1px solid rgba(255, 255, 255, .16); border-bottom: 1px solid rgba(255, 255, 255, .16); transform: translate(-50%, -5px) rotate(45deg); } .dither-growth-scrub-card strong, .dither-growth-scrub-card small { display: block; } .dither-growth-scrub-card small { color: rgba(255, 255, 255, .66); font-size: .62rem; font-weight: 760; letter-spacing: .045em; line-height: 1.15; } .dither-growth-scrub-card strong { margin-top: 3px; font-size: .82rem; font-weight: 790; font-variant-numeric: tabular-nums; line-height: 1.2; } .dither-growth-scrub-card strong.trend-positive { color: #58dda9; } .dither-growth-scrub-card strong.trend-negative { color: #ff7f86; } .dither-growth-scrub-card strong.trend-neutral { color: #fff; } select { cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 10px) calc(50% - 2px); background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; appearance: none; padding-right: 28px !important; } @media (hover: hover) and (pointer: fine) { .sidebar-bottom .reach-module-link:hover, .sidebar-account-button:hover { color: var(--ink); background: color-mix(in srgb, var(--accent-soft) 50%, var(--panel)); border-color: var(--accent-border); transform: translateY(-1px); } .task-image-drop:hover, .task-image-thumb:hover, .task-link:hover, .task-assignee:hover { border-color: var(--accent-border); transform: translateY(-1px); } .task-dot-choice label:hover i, .task-assignee-choice label:hover .task-person-avatar { transform: scale(1.08); } } @media (max-width: 1180px) { .task-create { grid-template-columns: 1fr 1fr; } .task-create-attachments { grid-column: 1 / -1; } } @media (max-width: 760px) { .sidebar-bottom { padding-top: 4px; } .task-create { grid-template-columns: 1fr; padding: 11px; } .task-create-attachments { grid-column: auto; } .task-row { grid-template-columns: auto minmax(0, 1fr) auto; padding-inline: 14px; } .task-order { display: none; } .task-copy { grid-column: 2; } .task-row-extras { grid-column: 2; justify-content: flex-start; } .task-delete, .task-row-arrow { grid-column: 3; grid-row: 1 / 3; } .management-pilotage-head { padding: 16px; } .management-pilotage > :not(.management-pilotage-head) { margin-top: 12px; } .data-mode-indicator span { display: none; } .data-mode-indicator { width: 28px; justify-content: center; padding: 0; } .top-actions .sync-status-tooltip { left: -34px; right: auto; transform-origin: left top; } .top-actions .sync-status-tooltip::after { left: 43px; right: auto; } } @media (max-width: 520px) { .brand > .brand-logo-dark, .brand > .brand-logo-light { display: none !important; } .brand .brand-symbol { display: block !important; color: currentColor; filter: invert(1); } [data-theme="light"] .brand .brand-symbol { filter: none; } } /* ================= V17 — Dock de compte et passerelle Reach ================= */ .sidebar-bottom { gap: 9px; } .reach-launcher-shell { position: relative; z-index: 2; width: 100%; } .sidebar-bottom .reach-launcher { position: relative; isolation: isolate; width: 100%; min-height: 72px; display: grid; grid-template-columns: 42px minmax(0, 1fr) 30px; align-items: center; gap: 11px; padding: 11px; overflow: hidden; color: #fff; background: radial-gradient(circle at 17% 0%, rgba(183, 146, 220, .28), transparent 42%), linear-gradient(135deg, #352543 0%, #24182f 58%, #1b1422 100%); border: 1px solid rgba(190, 157, 220, .25); border-radius: 14px; box-shadow: 0 11px 26px rgba(25, 15, 34, .19), inset 0 1px 0 rgba(255,255,255,.08); text-decoration: none; transition: transform 180ms var(--ease-out), border-color 180ms ease, box-shadow 180ms ease; } .sidebar-bottom .reach-launcher::before { content: ""; position: absolute; z-index: -1; width: 130px; height: 130px; right: -76px; top: -76px; background: rgba(139, 105, 174, .26); border-radius: 50%; transition: transform 260ms var(--ease-out), background-color 180ms ease; } .sidebar-bottom .reach-launcher::after { content: ""; position: absolute; left: 64px; right: 48px; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(207, 180, 231, .72), transparent); opacity: .5; } .sidebar-bottom .reach-launcher .reach-module-icon { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; color: #281d33; background: linear-gradient(145deg, #f4edf9, #ddcee9); border: 1px solid rgba(255,255,255,.35); border-radius: 12px; box-shadow: 0 7px 16px rgba(12, 7, 18, .2), inset 0 1px 0 rgba(255,255,255,.8); } .sidebar-bottom .reach-launcher .reach-module-icon img { width: 25px; height: 25px; object-fit: contain; } .sidebar-bottom .reach-launcher .reach-module-copy { min-width: 0; } .sidebar-bottom .reach-launcher .reach-module-copy strong { display: block; color: #fff; font-size: .82rem; font-weight: 720; letter-spacing: -.015em; line-height: 1.25; } .reach-module-tooltip { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 8px); z-index: 85; padding: 9px 10px; color: var(--ink-soft); text-align: center; background: color-mix(in srgb, var(--panel) 96%, transparent); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 34px rgba(20, 13, 28, .2); font-size: .65rem; font-weight: 650; line-height: 1.35; opacity: 0; pointer-events: none; transform: translateY(5px) scale(.98); transform-origin: center bottom; transition: opacity 140ms ease, transform 160ms var(--ease-out); } .reach-module-tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; border: 6px solid transparent; border-top-color: var(--panel); transform: translateX(-50%); } .reach-launcher-shell:hover .reach-module-tooltip, .reach-launcher-shell:focus-within .reach-module-tooltip { opacity: 1; transform: translateY(0) scale(1); } .reach-module-cta { width: 30px; height: 30px; display: grid; place-items: center; color: #e9ddf3; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 50%; font-size: .85rem; transition: transform 180ms var(--ease-out), color 180ms ease, background-color 180ms ease; } .sidebar-account-stack { display: block; } .sync-status-button { position: relative; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; color: var(--success); background: color-mix(in srgb, var(--success-soft) 72%, var(--panel)); border: 1px solid color-mix(in srgb, var(--success) 24%, var(--line)); border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 30%, transparent); animation: sync-button-pulse 2.8s ease-out infinite; transition: transform 150ms var(--ease-out), border-color 150ms ease, background-color 150ms ease; } .sync-status-button .status-dot { width: 7px; height: 7px; margin: 0; color: var(--success); background: var(--success); animation: none; } .sync-status-button:has(.status-dot.warn) { color: var(--warning); background: var(--warning-soft); border-color: var(--warning-border); animation: none; } .sync-status-button:has(.status-dot.bad) { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-border); animation: none; } .sync-status-button:has(.status-dot.warn) .status-dot { color: var(--warning); background: var(--warning); } .sync-status-button:has(.status-dot.bad) .status-dot { color: var(--danger); background: var(--danger); } @keyframes sync-button-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 27%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--success) 0%, transparent); } } .sync-status-tooltip { position: absolute; right: -3px; bottom: calc(100% + 9px); z-index: 80; width: 205px; padding: 10px 11px; color: var(--ink); text-align: left; background: color-mix(in srgb, var(--panel) 96%, transparent); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 36px rgba(20, 13, 28, .22); opacity: 0; pointer-events: none; transform: translateY(5px) scale(.98); transform-origin: right bottom; transition: opacity 140ms ease, transform 160ms var(--ease-out); } .sync-status-tooltip::after { content: ""; position: absolute; right: 9px; top: 100%; border: 6px solid transparent; border-top-color: var(--panel); } .sync-status-tooltip strong, .sync-status-tooltip small, .sync-status-tooltip i { display: block; } .sync-status-tooltip strong { color: var(--ink); font-size: .72rem; } .sync-status-tooltip small { margin-top: 3px; color: var(--muted); font-size: .64rem; line-height: 1.35; } .sync-status-tooltip i { margin-top: 7px; color: var(--accent-strong); font-size: .58rem; font-style: normal; font-weight: 680; } .sync-status-button:hover .sync-status-tooltip, .sync-status-button:focus-visible .sync-status-tooltip { opacity: 1; transform: translateY(0) scale(1); } .top-actions .sync-status-button { flex: 0 0 auto; } .top-actions .sync-status-tooltip { top: calc(100% + 10px); right: -4px; bottom: auto; transform: translateY(-5px) scale(.98); transform-origin: right top; } .top-actions .sync-status-tooltip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--panel); } .sidebar-bottom .sidebar-account-button { position: relative; width: 100%; min-height: 58px; display: grid; grid-template-columns: 36px minmax(0, 1fr) 18px; align-items: center; gap: 10px; padding: 9px 10px; color: var(--ink-soft); text-align: left; background: color-mix(in srgb, var(--panel) 74%, transparent); border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 4px 14px rgba(27, 18, 35, .035); } .sidebar-bottom .sidebar-account-button .cloud-auth-avatar { width: 36px; height: 36px; color: var(--accent-strong); background: var(--accent-soft); border-color: var(--accent-border); border-radius: 11px; font-size: .7rem; } .sidebar-bottom .sidebar-account-button .cloud-auth-copy { min-width: 0; } .sidebar-bottom .sidebar-account-button .cloud-auth-copy strong { display: block; color: var(--ink); font-size: .75rem; font-weight: 710; } .sidebar-bottom .sidebar-account-button .cloud-auth-copy small, .sidebar-bottom .sidebar-account-button #cloudAuthLabel { display: block; margin-top: 2px; overflow: hidden; color: var(--muted); font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; } .sidebar-bottom .sidebar-account-button .cloud-auth-dot { display: none; } .cloud-auth-arrow { width: 17px; height: 17px; fill: none; stroke: var(--faint); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 160ms var(--ease-out), stroke 160ms ease; } .sidebar-account-button.is-online .cloud-auth-avatar { color: var(--success); background: var(--success-soft); border-color: var(--success-border); } @media (hover: hover) and (pointer: fine) { .sidebar-bottom .reach-launcher:hover { color: #fff; background: radial-gradient(circle at 17% 0%, rgba(194, 157, 226, .34), transparent 44%), linear-gradient(135deg, #3e2b50, #281a35 58%, #1d1525); border-color: rgba(203, 170, 232, .46); box-shadow: 0 15px 32px rgba(25, 15, 34, .28), inset 0 1px 0 rgba(255,255,255,.1); transform: translateY(-2px); } .sidebar-bottom .reach-launcher:hover::before { background: rgba(157, 119, 194, .36); transform: scale(1.12); } .sidebar-bottom .reach-launcher:hover .reach-module-cta { color: #fff; background: rgba(255,255,255,.12); transform: translate(2px, -2px); } .sync-status-button:hover { transform: scale(1.08); } .sidebar-bottom .sidebar-account-button:hover { color: var(--ink); background: color-mix(in srgb, var(--accent-soft) 46%, var(--panel)); border-color: var(--accent-border); transform: translateY(-1px); } .sidebar-bottom .sidebar-account-button:hover .cloud-auth-arrow { stroke: var(--accent-strong); transform: translateX(2px); } } @media (prefers-reduced-motion: reduce) { .sync-status-button { animation: none; } .sidebar-bottom .reach-launcher, .sidebar-bottom .reach-launcher::before, .reach-module-cta, .reach-module-tooltip, .sync-status-tooltip { transition: none; } } /* ========================================================================== V18 — Tri des tâches, fiche ouvrable et en-tête Management compact ========================================================================== */ .management-intro > div:first-child { min-width: 0; flex: 1 1 auto; } .management-intro .overview-intro-kicker { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .management-intro h2 { max-width: none; overflow: hidden; font-size: clamp(1.65rem, 2.75vw, 2.55rem); text-overflow: ellipsis; white-space: nowrap; } .task-toolbar-main { flex-wrap: wrap; } .task-assignee-filter { display: inline-flex; align-items: center; gap: 3px; padding: 3px; background: var(--panel-inset); border: 1px solid var(--line); border-radius: 10px; } .task-assignee-filter button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; color: var(--muted); background: transparent; border: 0; border-radius: 8px; cursor: pointer; font: inherit; font-size: .78rem; transition: color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, transform 120ms var(--ease-out); } .task-assignee-filter .task-person-avatar { width: 26px; height: 26px; border-radius: 8px; } .task-assignee-filter button.active { color: var(--ink); background: var(--panel); box-shadow: inset 0 0 0 1px var(--accent-border), 0 1px 5px rgba(0,0,0,.06); } .task-sort-control { flex: 0 1 174px; } .task-sort-control select { width: 100%; min-height: 42px; padding: 8px 32px 8px 11px; border: 1px solid var(--line); } .task-group-heading { position: sticky; top: 0; z-index: 2; } .task-category-button { position: relative; } .task-row { cursor: pointer; } .task-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; background: var(--accent-soft); } body.task-detail-open { overflow: hidden; } .task-detail-modal { position: fixed; inset: 0; z-index: 120; display: grid; justify-items: end; padding: 10px; } .task-detail-modal[hidden] { display: none; } .task-detail-scrim { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; background: rgba(12, 8, 18, .54); border: 0; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .task-detail-card { position: relative; z-index: 1; width: min(100%, 520px); max-height: calc(100dvh - 20px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 28px 90px rgba(0, 0, 0, .34); animation: task-detail-in 220ms var(--ease-out) both; } @keyframes task-detail-in { from { opacity: 0; transform: translateX(18px) scale(.985); } } .task-detail-head { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); } .task-detail-heading { min-width: 0; display: flex; align-items: center; gap: 8px; } .task-detail-priority, .task-detail-category { min-height: 27px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; font-size: .68rem; font-weight: 720; } .task-detail-priority { background: var(--panel-inset); } .task-detail-priority i { width: 7px; height: 7px; background: currentColor; border-radius: 50%; } .task-detail-priority.priority-0 { color: var(--danger); background: var(--danger-soft); } .task-detail-priority.priority-1 { color: var(--warning); background: var(--warning-soft); } .task-detail-priority.priority-2 { color: var(--accent-strong); background: var(--accent-soft); } .task-detail-priority.priority-3 { color: var(--muted); background: var(--panel-inset); } .task-detail-category { overflow: hidden; color: var(--muted); background: var(--panel-2); text-overflow: ellipsis; white-space: nowrap; } .task-detail-close { width: 36px; height: 36px; flex: none; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 1.2rem; transition: color 140ms ease, border-color 140ms ease, transform 120ms var(--ease-out); } .task-detail-body { min-height: 0; overflow-y: auto; padding: 27px 24px; } .task-detail-body h2 { max-width: 440px; margin: 0; font-size: clamp(1.55rem, 4vw, 2.15rem); line-height: 1.12; letter-spacing: -.04em; } .task-detail-description { margin: 14px 0 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.65; white-space: pre-wrap; } .task-detail-description.is-empty { color: var(--faint); font-style: italic; } .task-detail-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 24px 0 0; } .task-detail-meta > div { min-width: 0; padding: 13px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 11px; } .task-detail-meta dt { color: var(--faint); font-size: .62rem; font-weight: 740; letter-spacing: .07em; text-transform: uppercase; } .task-detail-meta dd { margin: 6px 0 0; overflow: hidden; color: var(--ink); font-size: .78rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .task-detail-image { margin: 18px 0 0; overflow: hidden; background: var(--panel-2); border: 1px solid var(--line); border-radius: 13px; } .task-detail-image img { width: 100%; max-height: 320px; display: block; object-fit: contain; } .task-detail-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line); } .task-detail-actions .secondary-action, .task-detail-actions .primary-button { min-height: 40px; } .task-detail-link { margin-right: auto; display: inline-flex; align-items: center; gap: 7px; padding: 8px 2px; color: var(--accent-strong); font-size: .75rem; font-weight: 720; text-decoration: none; } @media (hover: hover) and (pointer: fine) { .task-assignee-filter button:hover { color: var(--ink); background: var(--panel-2); } .task-row:hover { background: color-mix(in srgb, var(--accent-soft) 28%, var(--panel-2)); } .task-detail-close:hover { color: var(--ink); border-color: var(--accent-border); transform: rotate(4deg); } .task-detail-link:hover { text-decoration: underline; text-underline-offset: 4px; } } .task-assignee-filter button:active, .task-detail-close:active { transform: scale(.94); } @media (max-width: 1180px) { .task-sort-control { flex: 1 1 180px; } } @media (max-width: 760px) { .management-intro h2 { font-size: clamp(1.35rem, 6.2vw, 1.9rem); } .task-assignee-filter { order: 3; flex: 0 0 auto; } .task-sort-control { order: 4; flex: 1 1 150px; } .task-priority-filter { order: 5; } .task-detail-modal { align-items: end; padding: 8px; } .task-detail-card { width: 100%; max-height: calc(100dvh - 16px); border-radius: 17px 17px 12px 12px; } .task-detail-body { padding: 22px 18px; } .task-detail-meta { grid-template-columns: 1fr; } .task-detail-actions { flex-wrap: wrap; padding: 12px; } .task-detail-link { width: 100%; margin-right: 0; } .task-detail-actions .secondary-action, .task-detail-actions .primary-button { flex: 1 1 auto; } } @media (prefers-reduced-motion: reduce) { .task-detail-card { animation: none; } .task-assignee-filter button, .task-detail-close { transition: none; } } /* ========================================================================== V19 — Formulaires Management plus calmes et cohérents ========================================================================== */ .management-composer { overflow: hidden; background: var(--panel); border-color: var(--line-soft); border-radius: 14px; box-shadow: 0 1px 0 rgba(24, 15, 34, .02); transition: border-color 170ms ease, box-shadow 170ms ease; } .management-composer[open] { border-color: color-mix(in srgb, var(--accent-border) 76%, var(--line)); box-shadow: 0 12px 32px rgba(45, 27, 62, .055); } .management-composer summary { min-height: 52px; display: flex; align-items: center; gap: 11px; padding: 0 16px; color: var(--ink-soft); background: var(--panel); font-size: .78rem; letter-spacing: -.005em; } .management-composer summary::before { content: "+"; width: 28px; height: 28px; display: grid; flex: none; place-items: center; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: 9px; font-size: 1rem; font-weight: 520; transition: transform 170ms var(--ease-out), background-color 170ms ease; } .management-composer[open] summary { color: var(--ink); background: color-mix(in srgb, var(--accent-soft) 25%, var(--panel)); border-bottom-color: var(--line-soft); } .management-composer[open] summary::before { background: color-mix(in srgb, var(--accent-soft) 64%, var(--panel)); transform: rotate(45deg); } #managementJournalForm.management-form-grid { gap: 14px; padding: 18px; background: linear-gradient(145deg, color-mix(in srgb, var(--panel-2) 82%, var(--panel)), var(--panel)); } #managementJournalForm label { gap: 7px; color: var(--ink-soft); font-size: .69rem; font-weight: 680; letter-spacing: .01em; transition: color 150ms ease; } #managementJournalForm label:focus-within { color: var(--accent-strong); } #managementJournalForm input, #managementJournalForm select { min-height: 47px; padding: 10px 13px; color: var(--ink); background: color-mix(in srgb, var(--panel) 93%, var(--panel-inset)); border: 1px solid var(--line); border-radius: 11px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); font: inherit; font-size: .82rem; font-weight: 540; caret-color: var(--accent); transition: background-color 150ms ease, border-color 150ms ease, box-shadow 160ms ease, transform 150ms var(--ease-out); } #managementJournalForm input::placeholder { color: color-mix(in srgb, var(--muted) 72%, transparent); opacity: 1; font-weight: 440; } #managementJournalForm input:hover, #managementJournalForm select:hover { background: var(--panel); border-color: color-mix(in srgb, var(--accent-border) 55%, var(--line)); } #managementJournalForm input:focus, #managementJournalForm select:focus { background: var(--panel); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow), 0 8px 22px rgba(61, 38, 83, .055); outline: none; } #managementJournalForm input[type="date"] { color-scheme: light; } [data-theme="dark"] #managementJournalForm input[type="date"] { color-scheme: dark; } #managementJournalForm .primary-button { min-height: 47px; border-radius: 11px; box-shadow: 0 9px 22px color-mix(in srgb, var(--accent-deep) 15%, transparent); font-size: .8rem; letter-spacing: -.01em; } @media (hover: hover) and (pointer: fine) { .management-composer summary:hover { background: color-mix(in srgb, var(--accent-soft) 31%, var(--panel)); } .management-composer summary:hover::before { background: color-mix(in srgb, var(--accent-soft) 78%, var(--panel)); } #managementJournalForm .primary-button:hover { filter: saturate(.92) brightness(1.03); transform: translateY(-1px); } } @media (max-width: 760px) { #managementJournalForm.management-form-grid { gap: 12px; padding: 14px; } #managementJournalForm input, #managementJournalForm select { min-height: 45px; font-size: .8rem; } } @media (prefers-reduced-motion: reduce) { .management-composer, .management-composer summary::before, #managementJournalForm input, #managementJournalForm select { transition: none; } } /* ========================================================================== V23 — Identité visuelle des modèles ========================================================================== */ .model-context-avatar { padding: 0; overflow: hidden; cursor: pointer; font: inherit; transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out), transform 150ms var(--ease-out); } .model-context-avatar img, .model-row-avatar-visual img, .model-photo-preview img { width: 100%; height: 100%; display: block; object-fit: cover; } .model-context-avatar.has-photo { background: var(--panel-2); border-color: color-mix(in srgb, var(--accent-border) 72%, var(--line)); } .model-add-button { min-height: 38px; display: inline-flex; align-items: center; gap: 8px; padding-inline: 12px; } .model-add-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .model-name-cell { min-width: 190px; } .model-table-identity { display: flex; align-items: center; gap: 10px; } .model-table-identity .name-edit { min-width: 0; } .model-row-avatar { position: relative; width: 38px; height: 38px; flex: none; padding: 0; overflow: visible; color: var(--accent-strong); background: transparent; border: 0; border-radius: 11px; cursor: pointer; } .model-row-avatar-visual { width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; color: inherit; background: linear-gradient(145deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 55%, var(--panel))); border: 1px solid var(--accent-border); border-radius: inherit; font-size: .66rem; font-weight: 790; letter-spacing: .035em; transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out), transform 150ms var(--ease-out); } .model-row-avatar::after { content: "+"; position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; display: grid; place-items: center; color: var(--accent-strong); background: var(--panel); border: 1px solid var(--accent-border); border-radius: 50%; box-shadow: 0 2px 7px rgba(34, 20, 47, .13); font-size: .66rem; font-weight: 800; line-height: 1; } .model-profile-modal { position: fixed; inset: 0; z-index: 116; display: grid; place-items: center; padding: 18px; } .model-profile-modal[hidden] { display: none; } .model-profile-scrim { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; background: rgba(9, 6, 14, .52); border: 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .model-profile-card { position: relative; z-index: 1; width: min(100%, 500px); overflow: hidden; color: var(--ink); background: color-mix(in srgb, var(--panel) 96%, transparent); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 100px rgba(0, 0, 0, .3); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); animation: model-profile-in 190ms var(--ease-out) both; } .model-profile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 22px 17px; border-bottom: 1px solid var(--line-soft); } .model-profile-head h2 { margin: 5px 0 0; font-size: 1.28rem; letter-spacing: -.035em; } .model-profile-close { width: 34px; height: 34px; flex: none; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font: inherit; font-size: 1.1rem; transition: color 140ms ease, border-color 140ms ease, transform 140ms var(--ease-out); } .model-profile-form { padding: 20px 22px 22px; } .model-photo-field { display: flex; align-items: center; gap: 10px; } .model-photo-drop { min-width: 0; flex: 1; display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 13px; padding: 10px; color: var(--muted); background: var(--panel-2); border: 1px dashed var(--line); border-radius: 14px; cursor: pointer; transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms var(--ease-out); } .model-photo-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .model-photo-preview { width: 58px; height: 58px; display: grid; place-items: center; overflow: hidden; color: var(--accent-strong); background: linear-gradient(145deg, var(--accent-soft), color-mix(in srgb, var(--panel) 52%, var(--accent-soft))); border: 1px solid var(--accent-border); border-radius: 15px; font-size: .78rem; font-weight: 790; } .model-photo-preview.has-photo { background: var(--panel); } .model-photo-copy { min-width: 0; } .model-photo-copy strong, .model-photo-copy small { display: block; } .model-photo-copy strong { color: var(--ink-soft); font-size: .8rem; } .model-photo-copy small { margin-top: 4px; overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; } .model-photo-remove { flex: none; padding: 7px 3px; color: var(--danger); background: transparent; border: 0; cursor: pointer; font: inherit; font-size: .68rem; font-weight: 700; } .model-profile-name { display: grid; gap: 7px; margin-top: 17px; color: var(--ink-soft); font-size: .7rem; font-weight: 690; } .model-profile-name input { min-height: 48px; padding: 0 14px; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; font: inherit; font-size: .86rem; font-weight: 610; transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } .model-profile-name input:focus { background: var(--panel); border-color: var(--accent-border); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 76%, transparent); outline: none; } .model-profile-hint { margin: 10px 0 0; color: var(--faint); font-size: .66rem; line-height: 1.5; } .model-profile-error { min-height: 18px; margin: 7px 0 0; color: var(--danger); font-size: .68rem; font-weight: 650; } .model-profile-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; } .model-profile-actions button { min-height: 40px; } .model-photo-drop.is-dragging { color: var(--accent-strong); background: var(--accent-soft); border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-soft) 74%, transparent); } .model-photo-drop.is-loading { pointer-events: none; opacity: .68; } @keyframes model-profile-in { from { opacity: 0; transform: translateY(9px) scale(.985); } } @media (hover: hover) and (pointer: fine) { .model-context-avatar:hover { border-color: var(--accent); box-shadow: 0 7px 18px color-mix(in srgb, var(--accent) 18%, transparent); transform: translateY(-1px); } .model-row-avatar:hover .model-row-avatar-visual { border-color: var(--accent); box-shadow: 0 7px 18px color-mix(in srgb, var(--accent) 18%, transparent); transform: translateY(-1px); } .model-photo-drop:hover { color: var(--ink-soft); background: color-mix(in srgb, var(--accent-soft) 22%, var(--panel-2)); border-color: var(--accent-border); transform: translateY(-1px); } .model-photo-remove:hover { text-decoration: underline; text-underline-offset: 3px; } .model-profile-close:hover { color: var(--ink); border-color: var(--accent-border); transform: rotate(4deg); } } .model-context-avatar:active, .model-row-avatar:active, .model-profile-close:active { transform: scale(.95); } @media (max-width: 760px) { .model-add-button span { display: none; } .model-add-button { width: 38px; min-width: 38px; justify-content: center; padding: 0; } .model-profile-modal { align-items: end; padding: 8px; } .model-profile-card { width: 100%; border-radius: 18px 18px 12px 12px; } .model-profile-head { padding: 19px 18px 15px; } .model-profile-form { padding: 17px 18px 19px; } .model-photo-field { align-items: flex-start; flex-direction: column; } .model-photo-drop { width: 100%; } .model-photo-remove { align-self: flex-end; margin-top: -5px; } } @media (prefers-reduced-motion: reduce) { .model-profile-card { animation: none; } .model-context-avatar, .model-row-avatar-visual, .model-photo-drop, .model-profile-close { transition: none; } } /* ========================================================================== V24 — Titres compacts et aperçu Nymphea Remote ========================================================================== */ #view-overview .overview-intro h2, .management-intro h2, .tasks-intro h2 { font-size: clamp(1.65rem, 2.35vw, 2.15rem); line-height: 1.08; letter-spacing: -.042em; } .remote-launcher-shell { position: relative; z-index: 3; width: 100%; } .sidebar-bottom .remote-launcher { position: relative; width: 100%; min-height: 58px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; overflow: hidden; color: var(--muted); background: linear-gradient(135deg, color-mix(in srgb, var(--panel-2) 92%, var(--faint)), var(--panel-2)); border: 1px solid var(--line); border-radius: 13px; cursor: default; opacity: .78; filter: saturate(.18); transition: opacity 160ms ease, border-color 160ms ease, background-color 160ms ease, filter 160ms ease; } .sidebar-bottom .remote-launcher::after { content: ""; position: absolute; right: -28px; top: -32px; width: 88px; height: 88px; background: color-mix(in srgb, var(--faint) 9%, transparent); border-radius: 50%; } .remote-module-icon { width: 36px; height: 36px; display: grid; place-items: center; color: var(--faint); background: color-mix(in srgb, var(--panel) 72%, var(--panel-2)); border: 1px solid var(--line); border-radius: 11px; } .remote-module-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; } .remote-module-copy { min-width: 0; } .remote-module-copy strong, .remote-module-copy small { display: block; } .remote-module-copy strong { overflow: hidden; color: var(--ink-soft); font-size: .76rem; font-weight: 700; letter-spacing: -.012em; text-overflow: ellipsis; white-space: nowrap; } .remote-module-copy small { margin-top: 2px; color: var(--faint); font-size: .6rem; font-weight: 670; letter-spacing: .055em; text-transform: uppercase; } .remote-module-status { position: relative; z-index: 1; color: var(--faint); font-size: .72rem; letter-spacing: .08em; } .remote-module-tooltip { position: absolute; left: 6px; right: 6px; bottom: calc(100% + 8px); z-index: 86; padding: 10px 11px; color: var(--ink-soft); text-align: left; background: color-mix(in srgb, var(--panel) 97%, transparent); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 34px rgba(20, 13, 28, .18); font-size: .65rem; font-weight: 620; line-height: 1.4; opacity: 0; pointer-events: none; transform: translateY(5px) scale(.98); transform-origin: center bottom; transition: opacity 140ms ease, transform 160ms var(--ease-out); } .remote-module-tooltip::after { content: ""; position: absolute; top: 100%; left: 28px; border: 6px solid transparent; border-top-color: var(--panel); } .remote-launcher-shell:hover .remote-module-tooltip, .remote-launcher-shell:focus-within .remote-module-tooltip { opacity: 1; transform: translateY(0) scale(1); } @media (hover: hover) and (pointer: fine) { .sidebar-bottom .remote-launcher:hover { opacity: 1; filter: saturate(.3); border-color: color-mix(in srgb, var(--faint) 34%, var(--line)); background: color-mix(in srgb, var(--panel-2) 88%, var(--panel)); } } @media (max-width: 760px) { #view-overview .overview-intro h2, .management-intro h2, .tasks-intro h2 { font-size: clamp(1.55rem, 7vw, 2rem); } } @media (prefers-reduced-motion: reduce) { .sidebar-bottom .remote-launcher, .remote-module-tooltip { transition: none; } } /* ================= V25 — Entrée privée Nymphea ================= */ body.auth-view-open { overflow: hidden; } .auth-page { position: fixed; inset: 0; z-index: 5000; min-height: 100dvh; overflow: auto; color: var(--ink); background: radial-gradient(circle at 78% 12%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 27rem), linear-gradient(145deg, color-mix(in srgb, var(--panel-2) 62%, var(--bg)), var(--bg) 56%); isolation: isolate; } .auth-page-atmosphere { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .auth-page-atmosphere::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, #000, transparent 74%); } .auth-page-atmosphere span { position: absolute; border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 50%; } .auth-page-atmosphere span:nth-child(1) { width: 340px; height: 340px; top: -190px; right: 5%; } .auth-page-atmosphere span:nth-child(2) { width: 190px; height: 190px; right: 14%; bottom: -110px; } .auth-page-atmosphere span:nth-child(3) { width: 70px; height: 70px; left: 5%; bottom: 8%; background: color-mix(in srgb, var(--accent) 5%, transparent); } .auth-page-header, .auth-page-footer, .auth-page-layout { width: min(1180px, calc(100% - 48px)); margin-inline: auto; } .auth-page-header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .auth-page-brand img { display: block; width: 158px; height: auto; } .auth-logo-dark { display: none !important; } [data-theme="dark"] .auth-logo-light { display: none !important; } [data-theme="dark"] .auth-logo-dark { display: block !important; } .auth-private-badge { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 7px 11px; color: var(--muted); background: color-mix(in srgb, var(--panel) 76%, transparent); border: 1px solid var(--line); border-radius: 999px; font-size: .72rem; font-weight: 700; backdrop-filter: blur(12px); } .auth-private-badge i { width: 7px; height: 7px; background: var(--success); border-radius: 50%; box-shadow: 0 0 0 4px var(--success-soft); } .auth-page-layout { min-height: min(720px, calc(100dvh - 148px)); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr); gap: 18px; padding-bottom: 18px; } .auth-page-story { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 42px; overflow: hidden; padding: clamp(40px, 5vw, 68px); color: #f8f5fb; background: radial-gradient(circle at 88% 12%, rgba(185, 141, 219, .2), transparent 21rem), linear-gradient(150deg, #382346 0%, #24152f 54%, #17101f 100%); border: 1px solid rgba(255,255,255,.1); border-radius: 28px; box-shadow: 0 28px 70px rgba(25, 14, 34, .18); } .auth-page-story::before { content: ""; position: absolute; width: 340px; height: 340px; right: -180px; top: -175px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 58px rgba(255,255,255,.018), 0 0 0 116px rgba(255,255,255,.012); } .auth-story-kicker { margin: 0 0 18px; color: #c9aedc; font-size: .7rem; font-weight: 780; letter-spacing: .15em; } .auth-page-story h1 { margin: 0; color: #fff; font-size: clamp(2.65rem, 5vw, 4.6rem); line-height: .98; letter-spacing: -.065em; } .auth-page-story h1 span { color: #cdb8df; } .auth-story-copy { max-width: 540px; margin: 24px 0 0; color: rgba(245,239,250,.7); font-size: 1rem; line-height: 1.7; } .auth-feature-list { display: grid; gap: 9px; width: min(100%, 520px); } .auth-feature-list article { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 13px; min-height: 68px; padding: 12px 15px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.075); border-radius: 15px; transition: background-color 180ms ease, border-color 180ms ease, transform 180ms var(--ease-out); } .auth-feature-list article > span { width: 42px; height: 42px; display: grid; place-items: center; color: #d6bee8; background: rgba(255,255,255,.065); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; } .auth-feature-list svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } .auth-feature-list strong, .auth-feature-list small { display: block; } .auth-feature-list strong { color: #fff; font-size: .82rem; } .auth-feature-list small { margin-top: 3px; color: rgba(245,239,250,.58); font-size: .7rem; line-height: 1.4; } .auth-role-preview { display: flex; align-items: center; gap: 15px; padding-top: 5px; } .auth-role-avatars { display: flex; padding-left: 8px; } .auth-role-avatars span { width: 34px; height: 34px; display: grid; place-items: center; margin-left: -8px; color: #2a1735; background: #f6f1fa; border: 2px solid #2a1935; border-radius: 50%; font-size: .61rem; font-weight: 800; } .auth-role-avatars span:last-child { color: #e2d5eb; background: #5a3f69; } .auth-role-preview strong, .auth-role-preview small { display: block; } .auth-role-preview strong { color: #fff; font-size: .76rem; } .auth-role-preview small { margin-top: 3px; color: rgba(245,239,250,.54); font-size: .65rem; } .auth-panel { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(34px, 4.4vw, 58px); background: color-mix(in srgb, var(--panel) 96%, transparent); border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 26px 65px rgba(25, 14, 34, .1); backdrop-filter: blur(22px) saturate(135%); } .auth-panel-symbol { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 25px; background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: 15px; } .auth-panel-symbol img { width: 28px; height: 28px; object-fit: contain; } [data-theme="dark"] .auth-panel-symbol img { filter: invert(1); } .auth-panel .eyebrow { margin-bottom: 9px; } .auth-panel h2 { margin: 0; color: var(--ink); font-size: clamp(1.9rem, 3vw, 2.4rem); line-height: 1.06; letter-spacing: -.052em; } .auth-panel-intro { max-width: 380px; margin: 11px 0 28px; color: var(--muted); font-size: .86rem; line-height: 1.6; } .auth-login-form { gap: 16px; } .auth-login-form label { gap: 8px; color: var(--ink-soft); font-size: .73rem; font-weight: 720; } .auth-input-shell { position: relative; display: block; } .auth-input-shell > svg { position: absolute; left: 15px; top: 50%; z-index: 1; width: 18px; height: 18px; color: var(--faint); fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; transform: translateY(-50%); pointer-events: none; transition: color 150ms ease; } .auth-login-form .auth-input-shell input { min-height: 52px; padding: 13px 47px 13px 45px; color: var(--ink); background: color-mix(in srgb, var(--panel-2) 72%, var(--panel)); border: 1px solid var(--line); border-radius: 12px; font-size: .9rem; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel) 50%, transparent); transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease; } .auth-login-form .auth-input-shell input::placeholder { color: var(--faint); opacity: .72; } .auth-input-shell:focus-within > svg { color: var(--accent-strong); } .auth-login-form .auth-input-shell:focus-within input { border-color: var(--accent-border); background: var(--panel); box-shadow: 0 0 0 4px var(--accent-soft); outline: none; } .auth-password-toggle { position: absolute; right: 8px; top: 50%; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; color: var(--faint); background: transparent; border: 0; border-radius: 9px; cursor: pointer; transform: translateY(-50%); transition: color 140ms ease, background-color 140ms ease; } .auth-password-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; } .auth-form-options { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: -3px; color: var(--faint); font-size: .69rem; } .auth-form-options > span { display: inline-flex; align-items: center; gap: 7px; } .auth-form-options > span::before { content: ""; width: 6px; height: 6px; background: var(--success); border-radius: 50%; } .auth-form-options button { padding: 3px 0; color: var(--accent-strong); background: none; border: 0; cursor: pointer; font: inherit; font-weight: 720; } .auth-submit { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; margin-top: 2px; padding-inline: 18px; border-radius: 12px; box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 20%, transparent); } .auth-submit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 160ms var(--ease-out); } .auth-login-form .cloud-auth-message { margin: 0 !important; border-radius: 11px; font-size: .72rem; line-height: 1.45; } .auth-invite-note { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 18px; padding: 11px 12px; color: var(--muted); background: color-mix(in srgb, var(--accent-soft) 56%, transparent); border: 1px solid color-mix(in srgb, var(--accent-border) 58%, var(--line)); border-radius: 12px; } .auth-invite-note > span { width: 30px; height: 30px; display: grid; place-items: center; color: var(--accent-strong); background: var(--panel); border-radius: 9px; } .auth-invite-note p, .auth-invite-note strong, .auth-invite-note small { display: block; margin: 0; } .auth-invite-note strong { color: var(--ink-soft); font-size: .7rem; } .auth-invite-note small { margin-top: 2px; color: var(--muted); font-size: .63rem; line-height: 1.35; } .auth-panel .cloud-auth-link { margin-top: 10px; } .auth-signed-in { text-align: center; } .auth-success-mark { width: 66px; height: 66px; display: grid; place-items: center; margin: 0 auto 24px; color: var(--success); background: var(--success-soft); border: 1px solid var(--success-border); border-radius: 20px; } .auth-success-mark svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .auth-signed-in .eyebrow { justify-content: center; } .auth-signed-in-email { margin: 12px 0 22px; color: var(--muted); font-size: .86rem; } .auth-signed-in .cloud-auth-sync-status { margin: 0 0 18px; text-align: left; border-radius: 12px; font-size: .72rem; line-height: 1.45; } .auth-signout { width: 100%; justify-content: center; margin-top: 10px; } .auth-page-footer { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--faint); font-size: .63rem; } @media (hover: hover) and (pointer: fine) { .auth-feature-list article:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.13); transform: translateX(3px); } .auth-password-toggle:hover { color: var(--ink); background: var(--panel-2); border-color: var(--line); } .auth-form-options button:hover, .auth-panel .cloud-auth-link:hover { color: var(--accent); text-decoration: none; } .auth-submit:hover svg { transform: translateX(3px); } } @media (max-width: 900px) { .auth-page-header, .auth-page-footer, .auth-page-layout { width: min(700px, calc(100% - 28px)); } .auth-page-header { min-height: 76px; } .auth-page-layout { grid-template-columns: 1fr; min-height: auto; } .auth-page-story { min-height: 310px; padding: 36px; gap: 30px; } .auth-page-story h1 { font-size: clamp(2.45rem, 10vw, 3.6rem); } .auth-feature-list { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; } .auth-feature-list article { grid-template-columns: 1fr; align-content: start; min-height: 126px; } .auth-feature-list small { margin-top: 6px; } .auth-role-preview { display: none; } .auth-panel { min-height: 600px; } } @media (max-width: 620px) { .auth-page-header, .auth-page-footer, .auth-page-layout { width: min(100% - 20px, 460px); } .auth-page-brand img { width: 136px; } .auth-private-badge { min-height: 29px; padding: 6px 9px; font-size: .64rem; } .auth-page-layout { gap: 10px; padding-bottom: 10px; } .auth-page-story { min-height: 216px; padding: 29px 25px; border-radius: 21px; } .auth-page-story h1 { font-size: clamp(2rem, 10.3vw, 2.5rem); } .auth-story-copy { margin-top: 15px; font-size: .81rem; line-height: 1.55; } .auth-feature-list, .auth-role-preview { display: none; } .auth-panel { min-height: 0; padding: 50px 22px 27px; border-radius: 21px; } .auth-panel-symbol { width: 44px; height: 44px; margin-bottom: 20px; border-radius: 13px; } .auth-panel h2 { font-size: 2rem; } .auth-panel-intro { margin-bottom: 23px; } .auth-page-footer { min-height: 52px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 3px; padding-block: 8px; } } @media (prefers-reduced-motion: reduce) { .auth-feature-list article, .auth-password-toggle, .auth-submit svg { transition: none; } } /* ========================================================================== V27 — Profil connecté et menu personnel ========================================================================== */ .sidebar-account-stack { position: relative; margin-top: 5px; padding-top: 12px; border-top: 1px solid var(--line-soft); } .sidebar-bottom .sidebar-account-button { min-height: 66px; grid-template-columns: 46px minmax(0, 1fr) 22px; gap: 12px; padding: 8px 7px; background: transparent; border-color: transparent; border-radius: 14px; box-shadow: none; } .sidebar-bottom .sidebar-account-button .cloud-auth-avatar { width: 46px; height: 46px; overflow: hidden; color: var(--ink); background: color-mix(in srgb, var(--panel-2) 74%, transparent); border: 1px solid var(--line); border-radius: 50%; font-size: .82rem; font-weight: 650; } .cloud-auth-avatar img, .account-menu-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; } .sidebar-bottom .sidebar-account-button .cloud-auth-copy strong { overflow: hidden; font-size: .86rem; font-weight: 720; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; } .sidebar-bottom .sidebar-account-button .cloud-auth-copy small, .sidebar-bottom .sidebar-account-button #cloudAuthLabel { margin-top: 3px; font-size: .69rem; } .sidebar-bottom .sidebar-account-button .cloud-auth-dot { position: absolute; left: 42px; top: 43px; width: 9px; height: 9px; display: block; background: var(--faint); border: 2px solid var(--sidebar); border-radius: 50%; } .sidebar-account-button.is-online .cloud-auth-dot { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 13%, transparent); } .sidebar-account-button.is-syncing .cloud-auth-dot { background: var(--warning); animation: account-status-pulse 1.2s ease-in-out infinite; } .sidebar-account-button.is-error .cloud-auth-dot { background: var(--danger); } .sidebar-account-button.is-online .cloud-auth-avatar { color: var(--ink); background: color-mix(in srgb, var(--panel-2) 74%, transparent); border-color: var(--line); } .cloud-auth-arrow { width: 18px; height: 18px; } .sidebar-account-button[aria-expanded="true"] .cloud-auth-arrow { stroke: var(--accent-strong); transform: rotate(180deg); } .account-menu { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 90; width: min(330px, calc(100vw - 30px)); max-height: min(650px, calc(100vh - 54px)); overflow: auto; color: var(--ink); background: color-mix(in srgb, var(--panel) 97%, transparent); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 28px 70px rgba(24, 15, 32, .24), 0 8px 22px rgba(24, 15, 32, .1); backdrop-filter: blur(26px) saturate(145%); -webkit-backdrop-filter: blur(26px) saturate(145%); transform-origin: left bottom; animation: account-menu-in 180ms var(--ease-out) both; } .account-menu[hidden] { display: none; } .account-menu-head { display: grid; grid-template-columns: 48px minmax(0, 1fr) 30px; align-items: center; gap: 11px; padding: 15px; border-bottom: 1px solid var(--line-soft); } .account-menu-avatar { width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: 50%; font-size: .76rem; font-weight: 780; } .account-menu-identity { min-width: 0; } .account-menu-identity strong, .account-menu-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-menu-identity strong { font-size: .84rem; letter-spacing: -.015em; } .account-menu-identity small { margin-top: 3px; color: var(--muted); font-size: .64rem; } .account-menu-close { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; color: var(--faint); background: transparent; border: 0; border-radius: 9px; cursor: pointer; font: inherit; font-size: 1rem; } .account-profile-form { padding: 14px 15px 15px; } .account-photo-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .account-photo-action { min-height: 34px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; color: var(--ink-soft); background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: .68rem; font-weight: 700; } .account-photo-action input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .account-photo-action svg, .account-settings-button svg, .account-signout-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } .account-photo-remove { padding: 6px 2px; color: var(--danger); background: transparent; border: 0; cursor: pointer; font: inherit; font-size: .64rem; font-weight: 700; } .account-profile-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 13px; } .account-field { min-width: 0; display: grid; gap: 6px; color: var(--muted); font-size: .65rem; font-weight: 680; } .account-field-wide { grid-column: 1 / -1; } .account-field :is(input, textarea), .account-input-prefix { width: 100%; color: var(--ink); background: color-mix(in srgb, var(--panel-2) 72%, var(--panel)); border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: .76rem; font-weight: 560; transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; } .account-field > input { min-height: 39px; padding: 8px 10px; } .account-field textarea { min-height: 68px; padding: 10px; resize: vertical; line-height: 1.45; } .account-input-prefix { min-height: 39px; display: grid; grid-template-columns: 21px minmax(0, 1fr); align-items: center; padding-left: 9px; } .account-input-prefix i { color: var(--faint); font-style: normal; } .account-input-prefix input { min-width: 0; height: 37px; padding: 0 9px 0 0; background: transparent; border: 0; border-radius: 0; outline: none; } .account-field :is(input, textarea):focus, .account-input-prefix:focus-within { background: var(--panel); border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; } .account-profile-message { min-height: 18px; margin: 9px 0 0; color: var(--success); font-size: .63rem; line-height: 1.4; } .account-profile-message.is-error { color: var(--danger); } .account-profile-actions { display: grid; grid-template-columns: auto 1fr; gap: 8px; margin-top: 3px; } .account-profile-actions button { min-height: 39px; } .account-settings-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 11px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font: inherit; font-size: .67rem; font-weight: 700; } .account-save-button { justify-content: center; padding-inline: 12px; border-radius: 10px; font-size: .7rem; } .account-signout-button { width: 100%; min-height: 38px; display: flex; align-items: center; justify-content: space-between; margin-top: 11px; padding: 8px 4px 0; color: var(--muted); background: transparent; border: 0; border-top: 1px solid var(--line-soft); cursor: pointer; font: inherit; font-size: .66rem; font-weight: 690; } @keyframes account-menu-in { from { opacity: 0; transform: translateY(7px) scale(.975); } } @keyframes account-status-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--warning) 9%, transparent); } } @media (hover: hover) and (pointer: fine) { .sidebar-bottom .sidebar-account-button:hover { background: color-mix(in srgb, var(--accent-soft) 40%, transparent); border-color: color-mix(in srgb, var(--accent-border) 65%, transparent); transform: translateY(-1px); } .sidebar-bottom .sidebar-account-button:hover .cloud-auth-arrow { transform: translateY(-1px); } .sidebar-bottom .sidebar-account-button[aria-expanded="true"]:hover .cloud-auth-arrow { transform: rotate(180deg); } .account-menu-close:hover, .account-settings-button:hover { color: var(--ink); background: color-mix(in srgb, var(--accent-soft) 46%, var(--panel-2)); border-color: var(--accent-border); } .account-photo-action:hover { color: var(--accent-strong); border-color: var(--accent-border); transform: translateY(-1px); } .account-photo-remove:hover, .account-signout-button:hover { color: var(--danger); } } @media (max-width: 760px) { .account-menu { width: min(310px, calc(100vw - 30px)); max-height: calc(100dvh - 80px); } } @media (prefers-reduced-motion: reduce) { .account-menu { animation: none; } .sidebar-account-button.is-syncing .cloud-auth-dot { animation: none; } .account-photo-action, .account-settings-button { transition: none; } } /* ================= V28 — Nymphea Remote, cohérent avec Reach ================= */ .sidebar-bottom .remote-launcher { isolation: isolate; min-height: 72px; grid-template-columns: 42px minmax(0, 1fr) 30px; gap: 11px; padding: 11px; color: #fff; background: radial-gradient(circle at 18% 0%, rgba(171, 137, 204, .2), transparent 43%), linear-gradient(135deg, #31273a 0%, #27202f 58%, #211b27 100%); border-color: rgba(178, 151, 202, .2); border-radius: 14px; box-shadow: 0 9px 22px rgba(25, 15, 34, .13), inset 0 1px 0 rgba(255,255,255,.06); opacity: 1; filter: none; transition: transform 180ms var(--ease-out), border-color 180ms ease, box-shadow 180ms ease; } .sidebar-bottom .remote-launcher::before { content: ""; position: absolute; z-index: -1; right: -76px; top: -76px; width: 130px; height: 130px; background: rgba(126, 103, 148, .2); border-radius: 50%; transition: transform 260ms var(--ease-out), background-color 180ms ease; } .sidebar-bottom .remote-launcher::after { left: 64px; right: 48px; top: auto; bottom: 0; width: auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(196, 171, 218, .55), transparent); border-radius: 0; opacity: .42; } .sidebar-bottom .remote-launcher .remote-module-icon { position: relative; width: 42px; height: 42px; color: #352742; background: linear-gradient(145deg, #f2edf6, #dbd0e4); border-color: rgba(255,255,255,.32); border-radius: 12px; box-shadow: 0 7px 16px rgba(12, 7, 18, .18), inset 0 1px 0 rgba(255,255,255,.8); } .sidebar-bottom .remote-launcher .remote-module-icon > img { width: 25px; height: 25px; object-fit: contain; } .sidebar-bottom .remote-launcher .remote-module-badge { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; display: grid; place-items: center; color: #efe7f6; background: #6d557f; border: 2px solid #292130; border-radius: 50%; box-shadow: 0 3px 8px rgba(10, 6, 14, .28); } .sidebar-bottom .remote-launcher .remote-module-badge svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .sidebar-bottom .remote-launcher .remote-module-copy strong { overflow: visible; color: #fff; font-size: .78rem; font-weight: 720; letter-spacing: -.015em; line-height: 1.2; text-overflow: clip; white-space: normal; } .sidebar-bottom .remote-launcher .remote-module-copy small { margin-top: 3px; color: rgba(235, 225, 242, .62); font-size: .56rem; letter-spacing: .075em; } .sidebar-bottom .remote-launcher .remote-module-status { width: 30px; height: 30px; display: grid; place-items: center; color: #d8c9e4; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09); border-radius: 50%; } .sidebar-bottom .remote-launcher .remote-module-status svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } @media (hover: hover) and (pointer: fine) { .sidebar-bottom .remote-launcher:hover { transform: translateY(-1px); border-color: rgba(199, 169, 225, .38); background: radial-gradient(circle at 18% 0%, rgba(185, 145, 222, .27), transparent 43%), linear-gradient(135deg, #372941, #2a2032 58%, #221a29); box-shadow: 0 13px 28px rgba(25, 15, 34, .19), inset 0 1px 0 rgba(255,255,255,.08); filter: none; } .sidebar-bottom .remote-launcher:hover::before { transform: scale(1.08); background: rgba(145, 112, 174, .26); } } /* ================= V29 — Remote indisponible, téléphone Glass ================= */ .sidebar-bottom .remote-launcher { color: rgba(255,255,255,.88); background: radial-gradient(circle at 18% 0%, rgba(255,255,255,.08), transparent 44%), linear-gradient(135deg, #353438 0%, #2a292d 58%, #222125 100%); border-color: rgba(255,255,255,.11); box-shadow: 0 9px 22px rgba(18, 18, 20, .14), inset 0 1px 0 rgba(255,255,255,.055); } .sidebar-bottom .remote-launcher::before { background: rgba(255,255,255,.045); } .sidebar-bottom .remote-launcher::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); opacity: .34; } .sidebar-bottom .remote-launcher .remote-module-icon { isolation: isolate; overflow: visible; color: rgba(255,255,255,.92); background: linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.075)), rgba(255,255,255,.055); border-color: rgba(255,255,255,.27); box-shadow: 0 8px 18px rgba(5, 5, 7, .23), inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(255,255,255,.045); backdrop-filter: blur(16px) saturate(115%); -webkit-backdrop-filter: blur(16px) saturate(115%); } .sidebar-bottom .remote-launcher .remote-module-icon::before { content: ""; position: absolute; z-index: -1; inset: 1px 2px auto; height: 46%; background: linear-gradient(180deg, rgba(255,255,255,.18), transparent); border-radius: 10px 10px 45% 45%; pointer-events: none; } .sidebar-bottom .remote-launcher .remote-phone-glyph { position: relative; z-index: 1; width: 22px; height: 25px; fill: rgba(255,255,255,.025); stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(0,0,0,.28)); } .sidebar-bottom .remote-launcher .remote-module-badge { right: -5px; bottom: -5px; width: 19px; height: 19px; color: #1f1f22; background: rgba(247,247,249,.9); border-color: rgba(36,35,39,.78); box-shadow: 0 4px 10px rgba(4,4,6,.32), inset 0 1px 0 rgba(255,255,255,.82); backdrop-filter: blur(10px) saturate(105%); -webkit-backdrop-filter: blur(10px) saturate(105%); } .sidebar-bottom .remote-launcher .remote-module-badge img { width: 11px; height: 11px; display: block; object-fit: contain; opacity: .88; } .sidebar-bottom .remote-launcher .remote-module-copy strong { color: rgba(255,255,255,.86); } .sidebar-bottom .remote-launcher .remote-module-copy small { color: rgba(255,255,255,.42); } .sidebar-bottom .remote-launcher .remote-module-status { color: rgba(255,255,255,.46); background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.075); } @media (hover: hover) and (pointer: fine) { .sidebar-bottom .remote-launcher:hover { border-color: rgba(255,255,255,.2); background: radial-gradient(circle at 18% 0%, rgba(255,255,255,.11), transparent 44%), linear-gradient(135deg, #3a393d 0%, #2d2c30 58%, #242327 100%); box-shadow: 0 13px 28px rgba(18,18,20,.2), inset 0 1px 0 rgba(255,255,255,.07); } .sidebar-bottom .remote-launcher:hover::before { background: rgba(255,255,255,.065); } .sidebar-bottom .remote-launcher:hover .remote-module-icon { border-color: rgba(255,255,255,.36); box-shadow: 0 9px 20px rgba(5,5,7,.27), inset 0 1px 0 rgba(255,255,255,.4); } } @media (prefers-reduced-transparency: reduce) { .sidebar-bottom .remote-launcher .remote-module-icon, .sidebar-bottom .remote-launcher .remote-module-badge { backdrop-filter: none; -webkit-backdrop-filter: none; } .sidebar-bottom .remote-launcher .remote-module-icon { background: #555459; } .sidebar-bottom .remote-launcher .remote-module-badge { background: #f2f2f4; } } /* ================= V30 — Icône d’app Nymphea Remote ================= */ .sidebar-bottom .remote-launcher .remote-module-icon { isolation: auto; overflow: visible; background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .sidebar-bottom .remote-launcher .remote-module-icon::before { display: none; } .sidebar-bottom .remote-launcher .remote-module-icon > img.remote-app-icon { width: 42px; height: 42px; display: block; object-fit: contain; border-radius: 11px; filter: drop-shadow(0 5px 9px rgba(5,5,7,.24)); transform: translateZ(0); transition: transform 180ms var(--ease-out), filter 180ms ease; } @media (hover: hover) and (pointer: fine) { .sidebar-bottom .remote-launcher:hover .remote-module-icon { border-color: transparent; box-shadow: none; } .sidebar-bottom .remote-launcher:hover .remote-app-icon { filter: drop-shadow(0 7px 12px rgba(5,5,7,.3)); transform: translateY(-1px) scale(1.025); } } @media (prefers-reduced-motion: reduce) { .sidebar-bottom .remote-launcher .remote-app-icon { transition: none; } } /* ================= V31 — Sélecteurs de graphiques compacts ================= Les libellés restent annoncés aux technologies d’assistance et apparaissent dans le tooltip global, sans alourdir les en-têtes de graphiques. */ .chart-toggle { gap: 2px; padding: 3px; border-radius: 10px; } .chart-toggle-btn { width: 32px; min-width: 32px; min-height: 32px; height: 32px; padding: 0; gap: 0; border-radius: 7px; } .chart-toggle-btn svg { width: 15px; height: 15px; transition: transform 150ms var(--ease-out); } .chart-toggle-btn.active { background: color-mix(in srgb, var(--accent-soft) 78%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-border) 82%, transparent), 0 2px 7px rgba(42, 24, 60, 0.08); } @media (hover: hover) and (pointer: fine) { .chart-toggle-btn:not(:disabled):hover svg { transform: scale(1.08); } } @media (max-width: 760px) { .chart-toggle-btn { width: 38px; min-width: 38px; min-height: 38px; height: 38px; } .chart-toggle-btn svg { width: 16px; height: 16px; } } @media (prefers-reduced-motion: reduce) { .chart-toggle-btn svg { transition: none; } }