/* ════════════════════════════════════════════════════════════════════ MATRICE ROAS × VOLUME — CSS extracted from index.html (Phase 1.F) ──────────────────────────────────────────────────────────────────── Scoped under .view-matrice so quadrant / tooltip / mapping styles don't leak out to other views. Loaded from of index.html. Pair file : public/tools/matrice.js (Phase 1.B). ════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════ MATRICE ROAS × VOLUME — scoped CSS Every selector below is prefixed with `.view-matrice` so the matrice tool styles only apply inside #view-matrice. Globals (:root, *, html, body, .tb-btn) from the standalone tool are dropped because the main app already defines equivalents. ════════════════════════════════════════════════════════════ */ /* ═══════════ BUTTONS ═══════════ */ /* ═══════════ PAGE CONTAINER ═══════════ */ .view-matrice .roas-wrap { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1.5rem 3rem; } /* ═══════════ MATRIX HEAD (main title block) ═══════════ */ .view-matrice .matrix-wrap { background: transparent; padding: 0; } .view-matrice .matrix-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1.5rem; gap: 1.5rem; flex-wrap: wrap; } .view-matrice .matrix-head .eyebrow { font-family: 'Fragment Mono', ui-monospace, monospace; font-size: 0.65rem; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; margin-bottom: 0.4rem; } .view-matrice .matrix-head h2 { font-family: 'StackSans headline Variable', system-ui, -apple-system, sans-serif; font-weight: 400; /* Harmonisation colonnes gauches : même échelle que .pane-head h1 (1.5rem / -0.02em) — 2.2rem débordait dans une colonne de 280px. */ font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.1; } .view-matrice .matrix-head h2 em { font-style: italic; color: var(--muted); } .view-matrice .matrix-sub { /* Harmonisation : même échelle que .pane-sub (0.78rem). */ font-size: 0.78rem; color: var(--muted); margin-top: 0.5rem; line-height: 1.4; max-width: 620px; } .view-matrice .matrix-actions { display: flex; gap: 0.5rem; align-items: center; flex-shrink: 0; } .view-matrice .csv-mapping { background: var(--surface); border-radius: var(--r-md); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; border: 1px solid var(--line-soft); } /* Essential mapping fields — 3 columns side by side, prominent */ .view-matrice .map-essentials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } @media (max-width: 720px) { .view-matrice .map-essentials { grid-template-columns: 1fr; } } .view-matrice .map-fld { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; } .view-matrice .map-fld label { font-size: 0.78rem; color: var(--fg); font-weight: 500; letter-spacing: -0.005em; } .view-matrice .map-fld label .opt { color: var(--faint); font-weight: 400; font-style: italic; font-size: 0.7rem; margin-left: 0.3rem; } .view-matrice .map-fld select, .view-matrice .map-fld input { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.6rem 0.75rem; font-family: inherit; font-size: 0.85rem; color: var(--fg); width: 100%; box-sizing: border-box; } .view-matrice .map-fld select:focus, .view-matrice .map-fld input:focus { outline: none; border-color: var(--fg); background: var(--surface); } .view-matrice .map-help { font-size: 0.7rem; color: var(--muted); line-height: 1.3; } /* Toggle row between essentials and advanced */ .view-matrice .map-advanced-toggle { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); flex-wrap: wrap; } .view-matrice .map-advanced-btn { display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; border: none; color: var(--muted); font-family: inherit; font-size: 0.75rem; font-weight: 500; padding: 0.3rem 0; cursor: pointer; letter-spacing: -0.005em; transition: color 0.12s; } .view-matrice .map-advanced-btn:hover { color: var(--fg); } .view-matrice .map-advanced-btn .chev { width: 12px; height: 12px; transition: transform 0.18s; } .view-matrice .map-advanced-btn[aria-expanded="true"] .chev { transform: rotate(90deg); } .view-matrice .map-advanced-btn[aria-expanded="true"] { color: var(--fg); } .view-matrice .csv-meta { font-size: 0.7rem; color: var(--muted); } .view-matrice .csv-meta strong { color: var(--fg); font-weight: 500; } .view-matrice .map-advanced { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); } .view-matrice .map-advanced-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; } /* The 2×2 matrix canvas */ /* ═══════════════════════════════════════════════════════════════════════ MATRIX FRAME — outer wrapper with axis margins The actual plotting area (.matrix-canvas) sits inside .matrix-frame with reserved space on the left (Y-axis: ROAS) and bottom (X-axis: Cost). Tick marks + value labels live in those margins. ═══════════════════════════════════════════════════════════════════════ */ .view-matrice .matrix-frame { position: relative; /* Dimensions fixes (height fixe + max-width) au lieu d'un aspect-ratio variable. Évite que la matrice s'étire bizarrement sur des écrans larges et garantit un visuel reproductible. max-width laisse l'air à droite si la fenêtre est très large. margin: 0 auto pour centrer la matrice quand la sidebar est collapsée (canvas plus large que 1100px → la matrice se centre au lieu de rester collée à gauche). */ width: 100%; max-width: 1100px; margin: 0 auto; /* leave room for axes : 90px à gauche au lieu de 65px pour éviter que le titre Y rotaté ("ROAS — échelle log") ne déborde sur la sidebar dans le layout 2-col. 70px en bas pour l'axe X + son titre. */ padding: 0 0 70px 90px; box-sizing: border-box; } .view-matrice .matrix-canvas { position: relative; width: 100%; /* Hauteur fixe (560px) au lieu d'aspect-ratio variable. L'utilisateur a explicitement demandé des dimensions fixes pour éviter que la matrice se redimensionne en fonction de la largeur du canvas. */ height: 560px; background: var(--surface); border-radius: var(--r-md); border: 1px solid var(--line); display: none; overflow: visible; } .view-matrice .matrix-canvas.visible { display: block; } /* Threshold dividing lines (kept inside the canvas, dashed for clarity) */ .view-matrice .matrix-axis { position: absolute; z-index: 1; pointer-events: none; } .view-matrice .matrix-axis.h { top: 50%; left: 0; right: 0; border-top: 1.5px dashed rgba(35,31,35,0.45); height: 0; } .view-matrice .matrix-axis.v { top: 0; bottom: 0; left: 50%; border-left: 1.5px dashed rgba(35,31,35,0.45); width: 0; } /* Tick lines (very subtle gridlines from each tick mark) */ .view-matrice .matrix-grid { position: absolute; background: rgba(35,31,35,0.08); z-index: 0; pointer-events: none; } .view-matrice .matrix-grid.h { left: 0; right: 0; height: 1px; } .view-matrice .matrix-grid.v { top: 0; bottom: 0; width: 1px; } /* Tick label = the number near the axis (e.g. "5×", "10 €", "1 000 €") */ .view-matrice .matrix-tick { position: absolute; font-family: 'Fragment Mono', ui-monospace, monospace; font-size: 0.62rem; color: var(--muted); pointer-events: none; z-index: 2; white-space: nowrap; } /* Y axis ticks live in the LEFT margin */ .view-matrice .matrix-tick.y { right: 100%; margin-right: 8px; transform: translateY(-50%); text-align: right; } /* X axis ticks live in the BOTTOM margin */ .view-matrice .matrix-tick.x { top: 100%; margin-top: 8px; transform: translateX(-50%); text-align: center; } /* Axis titles ("ROAS — échelle log" / "Coût — échelle log") */ .view-matrice .matrix-axis-title { position: absolute; font-family: 'StackSans text Variable', system-ui, -apple-system, sans-serif; font-size: 0.72rem; color: var(--fg); font-weight: 500; letter-spacing: -0.005em; z-index: 3; } .view-matrice .matrix-axis-title em { font-style: italic; color: var(--muted); font-weight: 400; } .view-matrice .matrix-axis-title.title-y { top: 50%; /* Positionnement INSIDE matrix-frame (la frame a maintenant 90px de padding-left pour réserver la place de l'axe Y + son titre). L'ancienne valeur left: -55px positionnait le titre à 55px à GAUCHE du bord de matrix-frame — donc dans le gap entre la sidebar et le canvas, ou pire dans la sidebar elle-même. Avec left: 30px le titre est à 30px du bord gauche de la frame, soit à ~60px à gauche du début de matrix-canvas (à l'intérieur de la zone padding réservée pour l'axe). */ left: 30px; transform: rotate(-90deg) translateX(50%); transform-origin: left center; white-space: nowrap; } .view-matrice .matrix-axis-title.title-x { left: 50%; bottom: -45px; transform: translateX(-50%); white-space: nowrap; } /* Threshold value labels — positioned at the END of each threshold line, in the margin so they never overlap with quadrant titles. */ .view-matrice .matrix-thresh-label { position: absolute; font-family: 'Fragment Mono', ui-monospace, monospace; font-size: 0.6rem; color: var(--fg); background: var(--surface); padding: 2px 7px; border-radius: 3px; pointer-events: none; z-index: 5; letter-spacing: 0.02em; white-space: nowrap; border: 1px solid rgba(35,31,35,0.18); font-weight: 500; } .view-matrice .matrix-thresh-label.thresh-y { /* sticks to the right edge of the canvas, vertically centered on the line */ right: 8px; transform: translateY(-50%); } .view-matrice .matrix-thresh-label.thresh-x { /* sticks to the top edge of the canvas, horizontally centered on the line */ top: 8px; transform: translateX(-50%); } /* Period / count header above the matrix canvas */ .view-matrice .matrix-period-header { text-align: center; font-family: 'Fragment Mono', ui-monospace, monospace; font-size: 0.7rem; color: var(--muted); margin-bottom: 0.75rem; letter-spacing: 0.02em; } .view-matrice .matrix-period-header strong { color: var(--fg); font-weight: 500; } .view-matrice .matrix-period-header em { color: var(--p-warm); font-style: italic; } /* (Old corner labels for axes were removed — proper axis titles now live in the margin via .matrix-axis-title) */ .view-matrice .matrix-quadrant { position: absolute; width: 50%; height: 50%; padding: 0; pointer-events: none; overflow: hidden; z-index: 0; } .view-matrice .matrix-quadrant.q-star { background: var(--mint-soft); } .view-matrice .matrix-quadrant.q-question { background: var(--orchid-soft); } .view-matrice .matrix-quadrant.q-cow { background: var(--sand-soft); } .view-matrice .matrix-quadrant.q-dog { background: var(--coral-soft); } .view-matrice .matrix-quadrant > div { position: absolute; } /* Title + advice positioned in the "outer" corner of each quadrant (the corner farthest from the threshold axes), so they don't hide the data points clustered near the threshold lines. */ .view-matrice .matrix-quadrant.q-star .quadrant-title, .view-matrice .matrix-quadrant.q-star .quadrant-advice { right: 1rem; text-align: right; } .view-matrice .matrix-quadrant.q-star .quadrant-title { top: 0.7rem; } .view-matrice .matrix-quadrant.q-star .quadrant-advice { top: 2.4rem; } .view-matrice .matrix-quadrant.q-question .quadrant-title, .view-matrice .matrix-quadrant.q-question .quadrant-advice { left: 1rem; text-align: left; } .view-matrice .matrix-quadrant.q-question .quadrant-title { top: 0.7rem; } .view-matrice .matrix-quadrant.q-question .quadrant-advice { top: 2.4rem; } .view-matrice .matrix-quadrant.q-cow .quadrant-title, .view-matrice .matrix-quadrant.q-cow .quadrant-advice { right: 1rem; text-align: right; } .view-matrice .matrix-quadrant.q-cow .quadrant-advice { bottom: 0.7rem; } .view-matrice .matrix-quadrant.q-cow .quadrant-title { bottom: 2.4rem; } .view-matrice .matrix-quadrant.q-dog .quadrant-title, .view-matrice .matrix-quadrant.q-dog .quadrant-advice { left: 1rem; text-align: left; } .view-matrice .matrix-quadrant.q-dog .quadrant-advice { bottom: 0.7rem; } .view-matrice .matrix-quadrant.q-dog .quadrant-title { bottom: 2.4rem; } .view-matrice .quadrant-title { font-family: 'StackSans headline Variable', system-ui, -apple-system, sans-serif; font-style: italic; font-size: 1.1rem; color: var(--fg); line-height: 1.2; } .view-matrice .quadrant-advice { font-size: 0.66rem; color: var(--muted); line-height: 1.4; max-width: 220px; } .view-matrice .matrix-dot { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; z-index: 5; border: 2px solid var(--surface); } .view-matrice .matrix-dot:hover { transform: translate(-50%, -50%) scale(1.25); z-index: 10; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); } .view-matrice .matrix-dot.q-star { background: var(--p-cold); } .view-matrice .matrix-dot.q-question { background: var(--p-test); } .view-matrice .matrix-dot.q-cow { background: var(--p-ret); } .view-matrice .matrix-dot.q-dog { background: var(--p-warm); } /* Contour learning-phase : réutilise le border 2px déjà présent sur le dot. Rouge = encore en apprentissage (≤ 40 conversions) ; vert = sorti (> 40). Le border passe à 2.5px pour bien détacher l'anneau du fond. */ .view-matrice .matrix-dot.lp-learning { border-color: #e5484d; border-width: 2.5px; } .view-matrice .matrix-dot.lp-scaled { border-color: #30a46c; border-width: 2.5px; } /* Label next to each dot showing the entity name. Positioned to the right of the dot center. Uses a thin text-shadow trick to keep the label readable when it overlaps a quadrant background. */ .view-matrice .matrix-dot-label { position: absolute; transform: translateY(-50%); font-family: 'Fragment Mono', ui-monospace, monospace; font-size: 0.6rem; color: var(--fg); background: rgba(247, 246, 245, 0.78); padding: 1px 5px; border-radius: 3px; pointer-events: none; white-space: nowrap; z-index: 4; line-height: 1.3; max-width: 160px; overflow: hidden; text-overflow: ellipsis; } /* When the dot is in the right half (>50% x) the label would overflow to the right; we flip it to sit on the left side of the dot. */ .view-matrice .matrix-dot-label.left-of-dot { transform: translate(-100%, -50%); text-align: right; } /* ── Dark mode ────────────────────────────────────────────────────── The quadrant fills use pastel *-soft tokens that intentionally do NOT flip in dark mode, so the (flipped → light) --fg title and --muted advice text would be invisible on them. Tint the quadrants dark instead (a subtle accent wash) so the light text reads, and give the dot label a dark chip background. */ :root[data-theme="dark"] .view-matrice .matrix-quadrant.q-star { background: rgba(143, 224, 149, 0.14); } :root[data-theme="dark"] .view-matrice .matrix-quadrant.q-question { background: rgba(184, 166, 245, 0.14); } :root[data-theme="dark"] .view-matrice .matrix-quadrant.q-cow { background: rgba(224, 198, 111, 0.14); } :root[data-theme="dark"] .view-matrice .matrix-quadrant.q-dog { background: rgba(242, 166, 164, 0.14); } :root[data-theme="dark"] .view-matrice .matrix-dot-label { background: rgba(20, 17, 22, 0.82); } .view-matrice .matrix-tooltip { position: fixed; z-index: 100; background: var(--fg); color: var(--surface); padding: 0.6rem 0.85rem; border-radius: var(--r-sm); font-size: 0.7rem; line-height: 1.4; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); pointer-events: none; max-width: 280px; } .view-matrice .matrix-tooltip .name { font-weight: 500; display: block; margin-bottom: 0.3rem; } .view-matrice .matrix-tooltip .metric { display: flex; justify-content: space-between; gap: 1rem; font-family: 'Fragment Mono', monospace; font-size: 0.62rem; opacity: 0.85; } .view-matrice .matrix-tooltip .quadrant-pill { display: inline-block; margin-top: 0.4rem; padding: 0.15rem 0.5rem; background: rgba(255, 255, 255, 0.1); border-radius: 999px; font-family: 'Fragment Mono', monospace; font-size: 0.55rem; letter-spacing: 0.06em; text-transform: uppercase; } /* Empty state */ .view-matrice .matrix-empty { background: var(--surface); border-radius: var(--r-md); border: 1px dashed var(--line); padding: 3rem 2rem; text-align: center; color: var(--muted); } .view-matrice .matrix-empty .icon { font-size: 2rem; color: var(--faint); margin-bottom: 0.5rem; } .view-matrice .matrix-empty h3 { font-family: 'StackSans headline Variable', system-ui, -apple-system, sans-serif; font-weight: 400; font-size: 1.3rem; color: var(--fg); margin-bottom: 0.6rem; } .view-matrice .matrix-empty p { font-size: 0.8rem; margin-bottom: 0.4rem; } .view-matrice .matrix-empty p strong { color: var(--fg); font-weight: 500; } .view-matrice .csv-example { font-family: 'Fragment Mono', monospace; font-size: 0.62rem; opacity: 0.7; margin-top: 0.5rem; } .view-matrice .csv-example code { background: var(--bg); padding: 0.15rem 0.35rem; border: 1px solid var(--line); border-radius: 3px; } /* ═══════════ COMPARE MODE ═══════════ */ /* Bar showing the two compared periods (before vs after) */ .view-matrice .compare-bar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 0.6rem 0.85rem; margin-bottom: 0.85rem; } .view-matrice .compare-warn { background: var(--sand-soft); border: 1px solid var(--p-ret-edge); color: var(--p-ret); border-radius: var(--r-md); padding: 0.55rem 0.85rem; margin-bottom: 0.85rem; font-size: 0.78rem; line-height: 1.4; } .view-matrice .compare-pill { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--bg); border: 1px solid var(--line-soft); border-radius: 999px; padding: 0.3rem 0.55rem 0.3rem 0.7rem; font-size: 0.72rem; max-width: 280px; } .view-matrice .compare-pill-label { font-family: 'Fragment Mono', ui-monospace, monospace; font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0.1rem 0.4rem; border-radius: 999px; background: var(--surface); } .view-matrice .compare-prev .compare-pill-label { color: var(--p-test); background: var(--p-test-soft); } .view-matrice .compare-curr .compare-pill-label { color: var(--p-cold); background: var(--p-cold-soft); } .view-matrice .compare-pill-name { font-weight: 500; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } .view-matrice .compare-pill-close { background: transparent; border: none; cursor: pointer; color: var(--muted); font-size: 1rem; line-height: 1; padding: 0 0.15rem; border-radius: 50%; transition: color 0.12s, background 0.12s; } .view-matrice .compare-pill-close:hover { color: var(--fg); background: var(--depth); } .view-matrice .compare-arrow-icon { color: var(--muted); flex-shrink: 0; } .view-matrice .compare-legend { display: flex; gap: 0.85rem; margin-left: auto; flex-wrap: wrap; } .view-matrice .compare-legend-item { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; color: var(--muted); font-family: 'Fragment Mono', ui-monospace, monospace; } /* SVG arrow layer — overlays the matrix canvas */ .view-matrice .matrix-arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; /* between quadrant bg/grid and dots */ overflow: visible; } /* "Before" (previous period) ghost dots — hollow ring style */ .view-matrice .matrix-dot.before-dot { background: transparent !important; border: 1.5px dashed var(--muted); opacity: 0.55; z-index: 3; } .view-matrice .matrix-dot.before-dot:hover { opacity: 0.85; } /* The "after" dot keeps the existing solid quadrant color */ /* Solo dot — entity present in only one period */ .view-matrice .matrix-dot.solo-prev { /* Same as before-dot but with a small "−" marker via box-shadow */ background: transparent !important; border: 1.5px dotted var(--muted); opacity: 0.45; z-index: 3; } .view-matrice .matrix-dot.solo-curr::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px dotted var(--p-cold); opacity: 0.6; } /* Tooltip delta rows (compare mode) */ .view-matrice .matrix-tooltip .delta-row { display: grid; grid-template-columns: 1fr auto auto; gap: 0.5rem; font-family: 'Fragment Mono', monospace; font-size: 0.62rem; align-items: baseline; } .view-matrice .matrix-tooltip .delta-row .label { opacity: 0.7; } .view-matrice .matrix-tooltip .delta-row .vals { opacity: 0.85; white-space: nowrap; } .view-matrice .matrix-tooltip .delta-row .delta { font-weight: 500; } .view-matrice .matrix-tooltip .delta-up { color: #9BE6A0; } .view-matrice .matrix-tooltip .delta-down { color: #FFB3A8; } .view-matrice .matrix-tooltip .delta-flat { color: rgba(255,255,255,0.55); } .view-matrice .matrix-tooltip .compare-divider { height: 1px; background: rgba(255,255,255,0.15); margin: 0.4rem 0; } .view-matrice .matrix-tooltip .quadrant-shift { display: inline-block; margin-top: 0.35rem; padding: 0.15rem 0.5rem; border-radius: 999px; font-family: 'Fragment Mono', monospace; font-size: 0.55rem; letter-spacing: 0.06em; text-transform: uppercase; } .view-matrice .matrix-tooltip .quadrant-shift.up { background: rgba(155,230,160,0.18); color: #9BE6A0; } .view-matrice .matrix-tooltip .quadrant-shift.down { background: rgba(255,179,168,0.18); color: #FFB3A8; } .view-matrice .matrix-tooltip .quadrant-shift.flat { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.7); } .view-matrice .matrix-tooltip .solo-note { margin-top: 0.35rem; font-size: 0.6rem; color: rgba(255,255,255,0.6); font-style: italic; }