/* ============================================================ SocialFlow · feuille de style GI Base : design system admin Graphik Impact (aligné devhub/formation) + couche SocialFlow (sf-*) : sidebar multi-brands, command center, pipeline de statuts, split login. Charte 2025 : blanc/noir + cyan. ============================================================ */ /* ---------- Fonts (auto-hébergées) ---------- */ @font-face { font-family:'Outfit'; src:url('fonts/Outfit-Light.ttf') format('truetype'); font-weight:300; font-display:swap } @font-face { font-family:'Outfit'; src:url('fonts/Outfit-Regular.ttf') format('truetype'); font-weight:400; font-display:swap } @font-face { font-family:'Outfit'; src:url('fonts/Outfit-Medium.ttf') format('truetype'); font-weight:500; font-display:swap } @font-face { font-family:'Outfit'; src:url('fonts/Outfit-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap } @font-face { font-family:'Outfit'; src:url('fonts/Outfit-Bold.ttf') format('truetype'); font-weight:700; font-display:swap } @font-face { font-family:'Zalando Sans'; src:url('fonts/ZalandoSans-Regular.ttf') format('truetype'); font-weight:400; font-display:swap } @font-face { font-family:'Zalando Sans'; src:url('fonts/ZalandoSans-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap } @font-face { font-family:'Zalando Sans'; src:url('fonts/ZalandoSans-Medium.ttf') format('truetype'); font-weight:500; font-display:swap } @font-face { font-family:'Zalando Sans'; src:url('fonts/ZalandoSans-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap } @font-face { font-family:'Zalando Sans'; src:url('fonts/ZalandoSans-Bold.ttf') format('truetype'); font-weight:700; font-display:swap } /* ---------- Tokens (aligné gi-admin-ds devhub) ---------- */ :root { /* ============================================================ PRIMITIVE TOKENS (--gi-*) · charte print + brand signature ============================================================ */ --gi-black:#000; --gi-white:#fff; /* Snapshot immuable du cyan signature GI · ne JAMAIS pointer vers --gi-cyan ailleurs qu'ici, sinon le PDF et la signature perdent la teinte de marque quand l'utilisateur change son accent dans la SPA (cf .sf-shell override). */ --gi-cyan-brand:#009FE3; --gi-cyan:#009FE3; --gi-cyan-hover:#0087C0; --gi-cyan-active:#0076A8; --gi-cyan-soft:rgba(0,159,227,0.08); --gi-cyan-glow:0 0 0 4px rgba(0,159,227,0.15); --gi-gray-50:#F4F4F4; --gi-gray-100:#EEEEEE; --gi-gray-200:#DDDDDD; --gi-gray-300:#BBBBBB; --gi-gray-500:#555; --gi-gray-700:#2A2A2A; --gi-gray-900:#121212; --gi-text-muted:#9aa3ad; --gi-border:#E6E6E6; --gi-border-strong:#D4D4D4; --gi-success:#207f4b; --gi-success-bg:#EAF8EF; --gi-warning:#E68A00; --gi-warning-bg:#FFF8EE; --gi-warning-text:#7A4500; --gi-danger:#BA151A; --gi-danger-bg:#FEF2F2; --gi-danger-text:#7C0F12; --gi-font-display:'Outfit',system-ui,sans-serif; --gi-font-body:'Zalando Sans',system-ui,sans-serif; --gi-ease:cubic-bezier(0.22,1,0.36,1); --gi-transition:150ms var(--gi-ease); /* Sprint UX 7h/j Axe 5 · easing courbes plus organiques (spring physics iOS) pour les composants qui bougent (drawer, modal, cmdpal, toast). Plus naturel que le cubic-bezier raide actuel. */ --sf-ease-spring: cubic-bezier(0.32, 0.72, 0, 1); /* iOS standard · décélération douce */ --sf-ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* Material design · neutre */ --sf-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* rebond léger · pour confirmations */ /* Variables d'intensité des micro-interactions · tunables via [data-motion] */ --sf-press-scale: 0.97; /* compression au :active sur boutons (1.0 = aucun effet) */ --sf-hover-lift: -1px; /* translation Y au :hover sur cards et boutons */ --sf-checkbox-pop: 1.1; /* peak du scale checkbox au check (1.0 = pas de pop) */ /* ============================================================ SEMANTIC TOKENS (--sf-*) · contexte d'usage usage prolongé ============================================================ Cette couche découple la signification visuelle (surface, texte, bordure, accent) des valeurs primitives. Permet le dark mode et le tuning eye-comfort sans toucher aux .sf-* ni aux gi-* widgets (cf. socialflow-ux-research.md). Phase 1 (2026-05-29) : pointage vers les primitives actuelles, aucune régression visuelle attendue. Les valeurs « confort » (cream, charcoal, halo soft) sont activées en Phase 2. */ --sf-surface: var(--gi-gray-50); /* fond app */ --sf-surface-raised: var(--gi-white); /* cards, sidebar, sheet */ --sf-surface-elevated: #F4F4F2; /* carte profil, dropdowns, popovers · doit RESSORTIR sur surface-raised blanc */ --sf-surface-hover: #EFEEEB; /* hover discret sur surfaces */ --sf-surface-sunken: var(--gi-gray-100); /* inputs, code blocks */ --sf-overlay-scrim: rgba(15, 15, 17, 0.45); /* fond derrière les modales · sombre semi-transparent */ --sf-text-primary: var(--gi-black); /* texte body principal */ --sf-text-secondary: var(--gi-gray-700); /* texte secondaire (sous-titres) */ --sf-text-muted: var(--gi-gray-500); /* labels, légendes, hints */ --sf-text-on-accent: var(--gi-white); /* texte sur fond cyan */ --sf-border: var(--gi-border); /* bordure standard */ --sf-border-strong: var(--gi-border-strong); /* bordure focus/sélection */ /* Accent interactif · pilotable par l'utilisateur (Sprint UX 7h/j Axe 2). Le picker front pose `--sf-user-accent` ET `--sf-user-accent-soft/glow/hover` directement sur :root via JS (hex statiques pré-calculés par accent · audit fix 4.2 : ne dépend plus de `color-mix()` qui n'est supporté que par les navigateurs >= 2023). Fallback gracieux : si JS pas exécuté, on retombe sur les valeurs liées au cyan original. */ --sf-user-accent: var(--gi-cyan); --sf-user-accent-hover: var(--gi-cyan-hover); --sf-user-accent-soft: var(--gi-cyan-soft); --sf-user-accent-glow: var(--gi-cyan-glow); --sf-accent: var(--sf-user-accent); --sf-accent-hover: var(--sf-user-accent-hover); --sf-accent-soft: var(--sf-user-accent-soft); --sf-accent-glow: var(--sf-user-accent-glow); --sf-accent-brand: var(--gi-cyan-brand); /* signature GI immuable (cover PDF, dots) · pointe vers le snapshot, JAMAIS vers --gi-cyan override */ --sf-success: var(--gi-success); --sf-warning: var(--gi-warning); --sf-danger: var(--gi-danger); } /* ============================================================ ACCENT OVERRIDE SCOPÉ · Sprint UX 7h/j Axe 2 fix ------------------------------------------------------------ La majorité des composants UI (boutons primaires, focus, switches, calendrier today, tabs actifs) lisent `var(--gi-cyan)` directement plutôt que `var(--sf-accent)`. Pour faire propager le choix d'accent utilisateur SANS refactor de chaque composant, on redéfinit la primitive `--gi-cyan` UNIQUEMENT dans `.sf-shell`. Hors `.sf-shell` (PDF, signature, login standalone) → `--gi-cyan` reste son original (#009FE3), `--sf-accent-brand` aussi via `--gi-cyan-brand`. ============================================================ */ .sf-shell { /* Audit fix 4.2 · les variantes hover/active/soft/glow sont posées en hex statiques par le JS (ACCENTS table) pour ne pas dépendre de color-mix. Fallback : si JS n'a pas posé, on hérite des --sf-user-accent-* qui pointent vers les variantes cyan originales. */ --gi-cyan: var(--sf-user-accent); --gi-cyan-hover: var(--sf-user-accent-hover); --gi-cyan-active: var(--sf-user-accent-hover); --gi-cyan-soft: var(--sf-user-accent-soft); --gi-cyan-glow: var(--sf-user-accent-glow); } /* ============================================================ DARK MODE · activé via [data-theme="dark"] sur ------------------------------------------------------------ Refonte Axe 1 Sprint UX 7h/j (2026-06-01) : Deux couches de mapping : 1. Inversion des PRIMITIVES (--gi-*) · couvre par cascade tout composant qui lit `var(--gi-black|white|gray-*)` directement. 2. Override explicite des SEMANTIC tokens (--sf-*) · gradation surface < raised < elevated (l'inverse du light où surface est le plus clair). Permet des composants overlay au-dessus des cards (modales, drawers, command palette). Palette inspirée Linear/Smashing inclusive dark (bg #0F0F11 doux, text #E8E6E0 off-white pour ne pas brûler les yeux 7h/j). Pas de pure #000 ni de pure #FFF — c'est la clé du confort prolongé. ============================================================ */ [data-theme="dark"] { /* 1. Inversion des primitives */ --gi-black: #E8E6E0; --gi-white: #0F0F11; --gi-gray-50: #161618; --gi-gray-100: #1C1C1F; --gi-gray-200: #25252A; --gi-gray-300: #3A3A40; --gi-gray-500: #9CA0A8; --gi-gray-600: #C0C4CB; --gi-gray-700: #DCDFE5; --gi-text-muted: #8A8E96; --gi-border: #2A2A2F; --gi-border-strong: #3A3A40; /* Backgrounds états · plus sobres en dark (moins agressifs) */ --gi-success-bg: #0F2A1B; --gi-warning-bg: #2A1E0C; --gi-danger-bg: #2A0F11; --gi-warning-text: #FFC36B; --gi-danger-text: #FF8A8E; /* 2. Override explicite des semantic tokens · gradation surface */ --sf-surface: #0F0F11; /* fond app */ --sf-surface-raised: #18181B; /* cards, sidebar, sheet */ --sf-surface-elevated: #1F1F23; /* modales, drawers, popovers (un cran au-dessus de raised) */ --sf-surface-hover: #25252A; /* hover sur surfaces */ --sf-surface-sunken: #0A0A0C; /* inputs, code blocks (plus sombre que surface) */ --sf-overlay-scrim: rgba(0, 0, 0, 0.65); /* contraste plus marqué que en light */ --sf-text-primary: #E8E6E0; /* off-white, pas pure white */ --sf-text-secondary: #B8B8B5; --sf-text-muted: #8A8E96; --sf-text-on-accent: #FFFFFF; /* reste pure white sur fond accent (lisibilité) */ --sf-border: #2A2A2F; --sf-border-strong: #3A3A40; } [data-theme="dark"] body{background:var(--sf-surface);color:var(--sf-text-primary)} [data-theme="dark"] .gi-card, [data-theme="dark"] .sf-card{background:var(--sf-surface-raised);border-color:var(--sf-border);color:var(--sf-text-primary)} [data-theme="dark"] .gi-field-input, [data-theme="dark"] .gi-field-select{background:var(--sf-surface-sunken);color:var(--sf-text-primary);border-color:var(--sf-border-strong)} [data-theme="dark"] .sf-table th{background:var(--sf-surface-raised);color:var(--sf-text-primary)} [data-theme="dark"] .sf-table td{border-color:var(--sf-border)} [data-theme="dark"] .gi-btn{border-color:var(--sf-border);color:var(--sf-text-primary)} [data-theme="dark"] .gi-btn-primary{background:var(--gi-cyan);color:#fff;border-color:var(--gi-cyan)} [data-theme="dark"] code{background:#222226;color:#E8E6E0} /* ============================================================ ★ SCALING UNIFIÉ · density + font-size base (refonte audit 2026-05-31) ------------------------------------------------------------ UN SEUL mécanisme : `zoom` sur `.sf-shell` (couvre topbar + sidebar + main + modales + drawers + toasts — tout est descendant de .sf-shell ou en overlay positionné sur la page). Multiplicatif via 2 variables indépendantes. Plus de double cumul, plus de paddings spécifiques qui se cassent sur les styles inline. Amplitudes élargies pour effet vraiment perceptible : - density : compact 0.88 / comfortable 1.00 / aerated 1.18 (30% spread) - font-size : 13→0.86 / 14→1.00 / 15→1.14 / 16→1.28 (42% spread) Combiné max : aerated + 16px = 1.18 × 1.28 = ×1.51 (généreux). Combiné min : compact + 13px = 0.88 × 0.86 = ×0.76 (dense data-heavy). ============================================================ */ .sf-shell { --sf-zoom-font: 1; --sf-zoom-density: 1; } /* Density · une rule explicite par valeur (y compris comfortable = défaut). `comfortable` est posé avec la même spécificité que les autres pour garantir que le toggle est visuellement distinct (cf. audit 1.2). */ [data-density="compact"] .sf-shell { --sf-zoom-density: 0.88; } [data-density="comfortable"] .sf-shell { --sf-zoom-density: 1.00; } [data-density="aerated"] .sf-shell { --sf-zoom-density: 1.18; } /* Font-size base · amplitude étendue à 42% pour vraie perception 7h/j */ [data-font-base="13"] .sf-shell { --sf-zoom-font: 0.86; } [data-font-base="14"] .sf-shell { --sf-zoom-font: 1.00; } [data-font-base="15"] .sf-shell { --sf-zoom-font: 1.14; } [data-font-base="16"] .sf-shell { --sf-zoom-font: 1.28; } /* Application du zoom combiné : `.sf-shell` est le wrapper principal · cela couvre topbar, sidebar, main, ET les modales/drawers rendus en descendants. Pour les overlays attachés à `body` (toast, cmdpal), on applique aussi le zoom hérité via une rule séparée plus bas. Fix layout viewport · le `zoom: 0.88` rétrécit visuellement la coque à 88% de la viewport, laissant un vide à droite/en bas. Inversement `zoom: 1.18` ferait déborder. On compense en agrandissant la coque inversement au zoom pour que la taille visuelle finale = 100vw / 100vh. `body { overflow:hidden }` neutralise les éventuelles scrollbars de débord. */ html, body { overflow: hidden; } /* Spécificité supérieure (html .sf-shell = 0,1,1) pour battre la rule `.sf-shell{height:100vh}` ligne 644 (spécificité 0,1,0). Sans ça, la compensation width/height était écrasée → bande vide en bas/droite en mode compact. */ html .sf-shell { zoom: calc(var(--sf-zoom-font) * var(--sf-zoom-density)); width: calc(100vw / var(--sf-zoom-font) / var(--sf-zoom-density)); height: calc(100vh / var(--sf-zoom-font) / var(--sf-zoom-density)); } /* Overlays attachés à (donc HORS .sf-shell DOM-wise) : on lit le zoom via une CSS variable hissée au niveau :root par le JS bootstrap. */ .sf-cmdpal, .sf-toast, .sf-drawer, #sheet, .gi-modal { zoom: calc(var(--sf-zoom-font, 1) * var(--sf-zoom-density, 1)); } /* Fallback Firefox : `zoom` n'est pas supporté par Firefox. Le JS bootstrap détecte l'absence et applique un fallback `font-size` proportionnel sur `html` (couvre seulement la typo, pas les paddings — c'est documenté). */ /* ============================================================ MOTION · activé via [data-motion="reduced|standard|full"] sur ------------------------------------------------------------ Refonte audit 2026-05-31 · le user choice gagne TOUJOURS sur le media query OS (fix 2.1 + 2.2). Mécanisme : - [data-motion="reduced"] → force la réduction (toujours, peu importe l'OS) - [data-motion="standard"] → ANNULE le media query OS (revert + spécificité supérieure) - [data-motion="full"] → idem standard (alias pour "même si OS reduce") - Pas de [data-motion] → comportement OS (rétrocompatible) Astuce de spécificité : `*` (0,0,0) du media query est battu par `[data-motion="X"] *` (0,1,0). Quand les deux ont !important, la spécificité supérieure gagne. ============================================================ */ [data-motion="reduced"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* User a explicitement choisi standard ou full · on annule le media query OS. `revert` ramène la valeur à celle de la cascade sans le !important du media. */ [data-motion="standard"] *, [data-motion="standard"] *::before, [data-motion="standard"] *::after, [data-motion="full"] *, [data-motion="full"] *::before, [data-motion="full"] *::after { animation-duration: revert !important; animation-iteration-count: revert !important; transition-duration: revert !important; scroll-behavior: revert !important; } /* Feedback animation au clic sur un segment Préférences · transition transform + box-shadow se déclenche à chaque changement d'état `.is-active`. Plus fiable qu'une @keyframes qui ne re-joue pas forcément à chaque ajout de classe. */ .sf-shell .sf-segmented button { transition: background 280ms var(--gi-ease), color 280ms var(--gi-ease), transform 280ms var(--gi-ease), box-shadow 280ms var(--gi-ease); } .sf-shell .sf-segmented button.is-active { transform: scale(1.04); box-shadow: 0 0 0 4px var(--sf-accent-glow); } [data-motion="reduced"] .sf-shell .sf-segmented button { transition: none !important; } /* ============================================================ ACCENT PICKER · 6 pastilles cliquables (Sprint UX 7h/j Axe 2) ------------------------------------------------------------ Refonte audit 4.1 · état actif via halo externe coloré (pas de border foncée qui se confond avec swatch anthracite) + bord interne blanc contrasté pour la lisibilité. Plus de double-référence problématique. ============================================================ */ .sf-accent-picker{display:inline-flex;gap:10px;align-items:center} .sf-accent-swatch{ width:28px;height:28px;border-radius:50%; border:2px solid var(--gi-border); background:var(--swatch-color);cursor:pointer;padding:0; transition:transform 140ms var(--gi-ease),border-color 140ms var(--gi-ease),box-shadow 140ms var(--gi-ease); } .sf-accent-swatch:hover{transform:scale(1.08);border-color:var(--gi-gray-300)} /* État actif · halo externe via `--swatch-glow` (hex statique posé inline depuis JS, fallback color-mix pour navigateurs récents) + bord interne blanc visible sur toutes les teintes y compris anthracite. */ .sf-accent-swatch.is-active{ border-color:var(--gi-white,#fff); transform:scale(1.12); box-shadow:0 0 0 3px var(--swatch-glow, var(--gi-gray-300)); } .sf-accent-swatch:focus-visible{ outline:none; border-color:var(--gi-white,#fff); box-shadow:0 0 0 3px var(--swatch-glow, var(--gi-gray-300)); } /* ============================================================ ★ COUCHE LINEAR-STYLE · primitives settings/users (Phase 8) Référence : Linear redesign · strategic minimalism, hairlines, pas de bordures noires, espacement généreux, focus halo soft. Scope global (utilisable hors .sf-shell pour les modales). ============================================================ */ /* Hero header de page : eyebrow, titre, meta, actions ─ Linear-style */ .sf-page-hero{display:flex;align-items:flex-start;gap:24px;padding:24px 0 28px;border-bottom:1px solid var(--gi-border);margin-bottom:28px} .sf-page-hero .col-main{flex:1;min-width:0} .sf-page-hero .col-aside{flex-shrink:0;text-align:right;font-size:12px;color:var(--gi-gray-500);line-height:1.6} .sf-page-hero .eyebrow{font-family:var(--gi-font-display);font-size:11px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;color:var(--gi-gray-500);margin-bottom:6px} .sf-page-hero .title{font-family:var(--gi-font-display);font-weight:600;font-size:28px;line-height:1.15;letter-spacing:-.02em;margin:0} .sf-page-hero .title .accent{color:var(--gi-cyan)} .sf-page-hero .meta{margin-top:6px;font-size:13.5px;color:var(--gi-gray-500)} .sf-page-hero .meta b{color:var(--gi-black);font-weight:500} /* Section composable : titre + body, séparée par hairline */ .sf-section{padding:24px 0;border-bottom:1px solid var(--gi-border)} .sf-section:last-child{border-bottom:0} .sf-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px} .sf-section-head h3{font-family:var(--gi-font-display);font-weight:600;font-size:15px;letter-spacing:-.01em;line-height:1.2;margin:0} .sf-section-head .desc{font-size:12.5px;color:var(--gi-gray-500);margin-top:4px;max-width:520px} .sf-section-head .actions{display:flex;gap:6px;align-items:center} /* Row Linear-style : label gauche, valeur/champ droite */ .sf-row{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:center;padding:12px 0;border-bottom:1px solid var(--gi-border);font-size:14px} .sf-row:last-child{border-bottom:0} .sf-row .lbl{font-family:var(--gi-font-display);font-weight:500;font-size:12.5px;color:var(--gi-gray-600,var(--gi-gray-500));letter-spacing:.01em} .sf-row .val{color:var(--gi-black);min-width:0} .sf-row .val.muted{color:var(--gi-gray-500)} .sf-row .actions{display:flex;gap:8px;align-items:center} /* Inputs ghost : invisible jusqu'au focus · cyan underline au focus */ .sf-input-ghost{display:block;width:100%;padding:6px 0;background:transparent;border:0;border-bottom:1px solid transparent;color:var(--gi-black);font:inherit;font-size:14px;font-family:var(--gi-font-body);transition:border-color 150ms ease} .sf-input-ghost:hover{border-bottom-color:var(--gi-border)} .sf-input-ghost:focus{outline:none;border-bottom-color:var(--gi-cyan)} .sf-input-ghost::placeholder{color:var(--gi-gray-500)} /* Inputs bordés Linear-style · plus doux que gi-field-input */ .sf-input{display:block;width:100%;padding:9px 12px;background:var(--gi-white);border:1px solid var(--gi-border);color:var(--gi-black);font-family:var(--gi-font-body);font-size:14px;line-height:1.4;border-radius:6px;transition:border-color 150ms ease,box-shadow 150ms ease} .sf-input:hover{border-color:var(--gi-border-strong,var(--gi-gray-300))} .sf-input:focus{outline:none;border-color:var(--gi-cyan);box-shadow:0 0 0 3px rgba(0,152,220,.18)} .sf-input::placeholder{color:var(--gi-gray-500)} .sf-input-label{display:block;font-family:var(--gi-font-display);font-size:12px;font-weight:500;color:var(--gi-gray-600,var(--gi-gray-500));margin-bottom:6px;letter-spacing:.01em} /* Segmented control : 1 group avec slider d'état · style Linear */ .sf-segmented{display:inline-flex;padding:3px;background:var(--gi-gray-100);border:1px solid var(--gi-border);border-radius:7px;gap:0} .sf-segmented button{appearance:none;background:transparent;border:0;padding:6px 14px;font-family:var(--gi-font-body);font-size:13px;font-weight:500;color:var(--gi-gray-600,var(--gi-gray-500));cursor:pointer;border-radius:5px;transition:background 140ms ease,color 140ms ease;display:inline-flex;align-items:center;gap:6px} .sf-segmented button:hover{color:var(--gi-black)} .sf-segmented button.is-active{background:var(--gi-white);color:var(--gi-black);box-shadow:0 1px 2px rgba(0,0,0,.05),0 0 0 1px rgba(0,0,0,.04)} [data-theme="dark"] .sf-segmented{background:#1C1C1F;border-color:var(--sf-border)} [data-theme="dark"] .sf-segmented button.is-active{background:#2A2A2F;color:var(--sf-text);box-shadow:0 1px 2px rgba(0,0,0,.3)} /* Onglets clean Linear : underline cyan, pas de cadre */ .sf-tab-bar{display:flex;align-items:center;gap:0;border-bottom:1px solid var(--gi-border);margin-bottom:20px} .sf-tab-bar button{appearance:none;background:transparent;border:0;padding:10px 18px;font-family:var(--gi-font-body);font-size:13.5px;font-weight:500;color:var(--gi-gray-500);cursor:pointer;position:relative;transition:color 140ms ease;display:inline-flex;align-items:center;gap:6px} .sf-tab-bar button:hover{color:var(--gi-black)} .sf-tab-bar button.is-active{color:var(--gi-black)} .sf-tab-bar button.is-active::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gi-cyan)} .sf-tab-bar .badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:9px;background:var(--gi-gray-100);font-size:11px;font-weight:600;color:var(--gi-gray-600,var(--gi-gray-500));margin-left:4px} .sf-tab-bar button.is-active .badge{background:var(--gi-cyan-soft,rgba(0,159,227,.12));color:var(--gi-cyan)} /* Stepper minimaliste : dots + chiffres compacts */ .sf-stepper{display:flex;align-items:center;gap:12px;margin-bottom:24px;font-family:var(--gi-font-display);font-size:11px;letter-spacing:.08em;text-transform:uppercase} .sf-stepper .step{display:inline-flex;align-items:center;gap:8px;color:var(--gi-gray-500);font-weight:500} .sf-stepper .step .n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--gi-border);background:transparent;color:var(--gi-gray-500);font-size:11px;letter-spacing:0;font-weight:600} .sf-stepper .step.is-done .n{background:var(--gi-cyan);border-color:var(--gi-cyan);color:#fff} .sf-stepper .step.is-current{color:var(--gi-black)} .sf-stepper .step.is-current .n{border-color:var(--gi-black);color:var(--gi-black)} .sf-stepper .sep{flex:0 0 28px;height:1px;background:var(--gi-border)} /* Avatar unifié · sizes : sm 32 · md 56 · lg 80 · xl 96 */ .sf-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-family:var(--gi-font-display);font-weight:600;color:#fff;overflow:hidden;flex-shrink:0;letter-spacing:-.02em;background:linear-gradient(135deg,#0098DC 0%,#005f8a 100%)} .sf-avatar img{width:100%;height:100%;object-fit:cover;display:block} .sf-avatar.is-empty{background:linear-gradient(135deg,#3a3a40 0%,#1a1a1a 100%)} .sf-avatar-xs{width:22px;height:22px;font-size:10px} .sf-avatar-sm{width:32px;height:32px;font-size:13px} .sf-avatar-md{width:56px;height:56px;font-size:20px} .sf-avatar-lg{width:80px;height:80px;font-size:28px} .sf-avatar-xl{width:96px;height:96px;font-size:34px} .sf-avatar-edit{position:relative;display:inline-block} .sf-avatar-edit .edit-btn{position:absolute;right:-2px;bottom:-2px;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--gi-black);color:var(--gi-white);border:2px solid var(--gi-white);cursor:pointer;transition:transform 140ms ease,background 140ms ease} .sf-avatar-edit .edit-btn:hover{background:var(--gi-cyan);transform:scale(1.06)} .sf-avatar-edit .edit-btn svg{width:12px;height:12px;color:currentColor} /* Status dot · indique état actif/inactif/pending sans chips lourds */ .sf-status-dot{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--gi-gray-600,var(--gi-gray-500))} .sf-status-dot::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gi-gray-400,var(--gi-gray-500))} .sf-status-dot.is-active::before{background:var(--gi-success,#1e9a5a);box-shadow:0 0 0 3px rgba(30,154,90,.15)} .sf-status-dot.is-pending::before{background:var(--gi-warning,#e89034)} .sf-status-dot.is-disabled::before{background:var(--gi-gray-300)} /* Brand chip subtil · pour afficher l'assignation d'un user à une marque */ .sf-brand-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;background:var(--gi-gray-50,var(--gi-white));border:1px solid var(--gi-border);border-radius:6px;font-size:12.5px;color:var(--gi-black);line-height:1.2} .sf-brand-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--gi-gray-400,var(--gi-gray-300));flex-shrink:0} .sf-brand-chip .role{font-size:11px;color:var(--gi-gray-500);font-family:var(--gi-font-display);letter-spacing:.04em} /* Switch toggle Linear-style · plus moderne qu'une checkbox */ .sf-switch{position:relative;display:inline-block;width:34px;height:20px;flex-shrink:0} .sf-switch input{opacity:0;width:0;height:0;position:absolute} .sf-switch .slider{position:absolute;cursor:pointer;inset:0;background:var(--gi-gray-300);border-radius:20px;transition:background 160ms ease} .sf-switch .slider::before{content:'';position:absolute;left:2px;bottom:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform 160ms ease;box-shadow:0 1px 3px rgba(0,0,0,.15)} .sf-switch input:checked + .slider{background:var(--gi-cyan)} .sf-switch input:checked + .slider::before{transform:translateX(14px)} .sf-switch input:focus-visible + .slider{box-shadow:0 0 0 3px rgba(0,152,220,.18)} /* Boutons icon-only et ghost minimal */ .sf-icon-btn{appearance:none;background:transparent;border:1px solid transparent;border-radius:6px;padding:6px;display:inline-flex;align-items:center;justify-content:center;color:var(--gi-gray-600,var(--gi-gray-500));cursor:pointer;transition:background 140ms ease,color 140ms ease,border-color 140ms ease} .sf-icon-btn:hover{background:var(--gi-gray-100);color:var(--gi-black)} .sf-icon-btn svg{width:14px;height:14px} .sf-icon-btn.danger:hover{background:rgba(214,58,58,.08);color:var(--gi-danger,#d63a3a)} /* Banner info / warning · pour le contexte explicatif */ .sf-banner{display:flex;gap:12px;padding:12px 14px;border-radius:6px;font-size:13px;line-height:1.5;background:var(--gi-gray-50);border:1px solid var(--gi-border)} .sf-banner.cyan{background:rgba(0,152,220,.06);border-color:rgba(0,152,220,.18);color:var(--gi-black)} .sf-banner.warn{background:rgba(232,144,52,.08);border-color:rgba(232,144,52,.25);color:#7a4a14} .sf-banner.danger{background:rgba(214,58,58,.06);border-color:rgba(214,58,58,.22)} .sf-banner b{font-weight:600;color:inherit} /* Liens-row : item cliquable Linear, pas un bouton */ .sf-link-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--gi-border);font-size:14px;cursor:pointer;transition:background 140ms ease} .sf-link-row:hover{background:var(--gi-gray-50)} .sf-link-row:last-child{border-bottom:0} .sf-link-row .lbl{font-weight:500;color:var(--gi-black)} .sf-link-row .sub{font-size:12.5px;color:var(--gi-gray-500);margin-top:2px} .sf-link-row .right{display:flex;align-items:center;gap:8px;color:var(--gi-gray-500)} /* Empty state Linear-style */ .sf-empty{padding:48px 24px;text-align:center;color:var(--gi-gray-500);border:1px dashed var(--gi-border);border-radius:8px;font-size:13.5px} /* Modal sheet retravaillé · plus large pour les onglets */ .modal .sheet.sf-sheet-wide{width:min(96vw,720px);max-width:720px} /* ============================================================ Builder Meta « Ads Manager » 3 niveaux (Kevin 2026-06-17) Arbre gauche Campagne › Ensemble › Publicité · spec dans .claude/dev-cowork/SOCIALFLOW/META-ADS-MANAGER-BUILDER.md ============================================================ */ .modal .sheet.sf-adb-sheet{width:min(97vw,1040px);max-width:1040px;padding:0;overflow:hidden} .sf-adb{display:flex;min-height:560px;max-height:88vh} .sf-adb-rail{width:248px;flex:0 0 248px;background:var(--gi-gray-50);border-right:1px solid var(--gi-border);padding:22px 18px;display:flex;flex-direction:column} .sf-adb-tree{display:flex;flex-direction:column;margin-top:4px} .sf-adb-node{display:flex;align-items:flex-start;gap:10px;text-align:left;background:transparent;border:0;padding:10px;border-radius:10px;cursor:pointer;width:100%} .sf-adb-node:hover{background:rgba(0,0,0,.045)} .sf-adb-node.is-active{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08)} .sf-adb-num{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--gi-gray-200);color:var(--gi-gray-600);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700} .sf-adb-node.is-active .sf-adb-num{background:var(--gi-cyan);color:#fff} .sf-adb-nlbl{font-size:13px;font-weight:600;color:var(--gi-gray-800);line-height:1.3} .sf-adb-nlbl small{display:block;font-weight:400;font-size:10.5px;color:var(--gi-gray-400);margin-top:2px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sf-adb-link{width:2px;height:14px;background:var(--gi-border);margin-left:21px} .sf-adb-rail-foot{margin-top:auto;font-size:10.5px;line-height:1.5;padding-top:16px} .sf-adb-main{flex:1;display:flex;flex-direction:column;min-width:0} .sf-adb-body{flex:1;overflow:auto;padding:24px 26px} .sf-adb-foot{display:flex;gap:8px;align-items:center;padding:14px 22px;border-top:1px solid var(--gi-border);background:#fff} .sf-adb-h{font-size:17px;font-weight:700;margin:0 0 16px} .sf-adb-sec{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--gi-gray-500);margin:18px 0 8px;padding-top:10px;border-top:1px solid var(--gi-gray-100)} .sf-adb-adv{margin-top:14px;border:1px solid var(--gi-border);border-radius:10px;padding:0 14px} .sf-adb-adv>summary{cursor:pointer;padding:12px 0;font-weight:600;font-size:13px;color:var(--gi-cyan);list-style:none} .sf-adb-adv>summary::-webkit-details-marker{display:none} .sf-adb-adv>summary::before{content:'▸ '} .sf-adb-adv[open]>summary::before{content:'▾ '} .sf-adb-adv[open]{padding-bottom:14px} .adb-objgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px} .adb-obj{display:flex;flex-direction:column;text-align:left;border:2px solid var(--gi-border);border-radius:10px;padding:12px;background:#fff;cursor:pointer;transition:border-color .12s,box-shadow .12s} .adb-obj:hover:not(:disabled){border-color:var(--gi-cyan)} .adb-obj.is-sel{border-color:var(--gi-cyan);box-shadow:0 0 0 3px rgba(0,159,227,.16)} .adb-obj:disabled{opacity:.5;cursor:not-allowed} .adb-obj-ico{font-size:20px} .adb-obj-t{font-weight:600;font-size:13.5px;margin-top:6px} .adb-obj-h{font-size:11px;color:var(--gi-gray-500);margin-top:3px;line-height:1.35} .adb-audgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .adb-aud{text-align:left;border:2px solid var(--gi-border);border-radius:10px;padding:11px;background:#fff;cursor:pointer} .adb-aud:hover{border-color:var(--gi-cyan)} .adb-aud.is-sel{border-color:var(--gi-cyan);box-shadow:0 0 0 3px rgba(0,159,227,.16)} .adb-aud b{font-size:12.5px;display:block} .adb-aud small{font-size:10.5px;color:var(--gi-gray-500);display:block;margin-top:3px;line-height:1.3} .adb-chk{display:flex;align-items:center;gap:7px;font-size:13px;cursor:pointer;padding:3px 0} .adb-chks{display:flex;flex-wrap:wrap;gap:6px 16px} .adb-ident{display:flex;align-items:center;gap:8px;background:var(--gi-gray-50);border:1px solid var(--gi-border);border-radius:9px;padding:10px 12px;font-size:12px;color:var(--gi-gray-600);margin-bottom:14px} .adb-ident span{font-weight:700;text-transform:uppercase;font-size:10px;letter-spacing:.04em;color:var(--gi-gray-400)} .adb-note{background:#fff8e6;border:1px solid #f0d98a;color:#7a5c00;border-radius:9px;padding:10px 12px;font-size:11.5px;line-height:1.45;margin-bottom:12px} .adb-fmtgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .adb-fmt{border:2px solid var(--gi-border);border-radius:10px;padding:12px;background:#fff;cursor:pointer;font-size:13px;font-weight:600;text-align:center} .adb-fmt:hover{border-color:var(--gi-cyan)} .adb-fmt.is-sel{border-color:var(--gi-cyan);box-shadow:0 0 0 3px rgba(0,159,227,.16)} .adb-postgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:240px;overflow:auto;padding:2px} .adb-post{position:relative;border:2px solid var(--gi-border);border-radius:10px;overflow:hidden;background:#fff;cursor:pointer;padding:0;text-align:left} .adb-post:hover{border-color:var(--gi-cyan)} .adb-post.is-sel{border-color:var(--gi-cyan);box-shadow:0 0 0 3px rgba(0,159,227,.16)} .adb-post img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block} .adb-noimg{width:100%;aspect-ratio:1/1;background:var(--gi-gray-100);display:flex;align-items:center;justify-content:center;color:var(--gi-gray-400);font-size:20px} .adb-post-msg{display:block;font-size:10px;color:var(--gi-gray-600);padding:6px 7px;line-height:1.3;height:34px;overflow:hidden} .adb-check{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:var(--gi-cyan);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.3)} @media(max-width:720px){.sf-adb{flex-direction:column;max-height:90vh}.sf-adb-rail{width:auto;flex:none;border-right:0;border-bottom:1px solid var(--gi-border)}.sf-adb-tree{flex-direction:row;overflow:auto}.sf-adb-link{display:none}.adb-objgrid,.adb-audgrid,.adb-postgrid{grid-template-columns:1fr 1fr}} /* ============================================================ ★ COUCHE CALENDRIER · vue Mois / Semaine / Liste · navigation, filtres, code couleur par marque, indicateurs de statut. ============================================================ */ .cal-shell{display:flex;flex-direction:column;gap:18px} /* Toolbar : navigation + jump-to-month + view switcher */ .cal-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap} .cal-nav{display:flex;align-items:center;gap:10px} .cal-nav-btn{appearance:none;background:transparent;border:1px solid var(--gi-border);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--gi-black);font-size:18px;line-height:1;transition:background 140ms ease,border-color 140ms ease} .cal-nav-btn:hover{background:var(--gi-black);color:#fff;border-color:var(--gi-black)} .cal-title{font-family:var(--gi-font-display);font-weight:600;font-size:22px;letter-spacing:-.01em;margin:0;text-transform:capitalize;min-width:200px;text-align:center} .cal-today-btn{margin-left:8px} /* Stats inline (compteurs par statut) + bouton filtres */ .cal-stats{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:var(--gi-gray-50);border:1px solid var(--gi-border);flex-wrap:wrap} .cal-stats .group{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12.5px} .cal-stats .stat{display:inline-flex;align-items:center;gap:6px;color:var(--gi-gray-700)} .cal-stats .stat .dot{width:8px;height:8px;border-radius:50%;display:inline-block} .cal-stats .stat .n{font-family:var(--gi-font-display);font-weight:600;color:var(--gi-black);font-variant-numeric:tabular-nums} .cal-stats .stat-draft .dot{background:var(--gi-gray-400,#9aa3ad)} .cal-stats .stat-review .dot{background:var(--gi-warning,#e89034)} .cal-stats .stat-modif .dot{background:var(--gi-danger,#d63a3a)} .cal-stats .stat-approved .dot, .cal-stats .stat-scheduled .dot{background:var(--gi-cyan,#009FE3)} .cal-stats .stat-published .dot{background:var(--gi-success,#1e9a5a)} /* Filters bar (collapsible) */ .cal-filters{padding:12px 14px;background:var(--gi-white);border:1px solid var(--gi-border);display:none} .cal-filters.is-open{display:block} .cal-filters .group{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px} .cal-filters .group:last-child{margin-bottom:0} .cal-filters .group-label{font-family:var(--gi-font-display);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gi-gray-500);width:90px;flex-shrink:0} .cal-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--gi-border);background:var(--gi-white);font-size:12px;cursor:pointer;transition:all 120ms ease;color:var(--gi-gray-600,var(--gi-gray-500))} .cal-pill .dot{width:8px;height:8px;border-radius:50%;background:currentColor} .cal-pill:hover{border-color:var(--gi-black)} .cal-pill.is-active{background:var(--gi-black);color:#fff;border-color:var(--gi-black)} /* ── Vue Mois ── */ .cal-month{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--gi-black);background:var(--gi-white)} .cal-month .dow{font-family:var(--gi-font-display);font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gi-gray-500);padding:8px;border-bottom:1px solid var(--gi-black);border-right:1px solid var(--gi-border);background:var(--gi-gray-50);text-align:left} .cal-month .dow:last-child, .cal-month .cell:nth-child(7n+7){border-right:0} .cal-month .cell{min-height:108px;padding:6px 8px;border-bottom:1px solid var(--gi-border);border-right:1px solid var(--gi-border);font-family:var(--gi-font-body);position:relative;cursor:pointer;transition:background 140ms ease} .cal-month .cell:hover:not(.off){background:var(--gi-gray-50)} .cal-month .cell .d{font-family:var(--gi-font-display);font-size:11px;color:var(--gi-gray-500);font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:space-between} .cal-month .cell.off{background:var(--gi-gray-50);cursor:default} .cal-month .cell.weekend{background:rgba(0,0,0,.015)} .cal-month .cell.weekend:hover{background:var(--gi-gray-50)} .cal-month .cell.today{background:rgba(0,152,220,.06)} .cal-month .cell.today .d{color:var(--gi-cyan);font-weight:600} .cal-month .cell.today::before{content:'';position:absolute;left:0;top:0;width:3px;height:100%;background:var(--gi-cyan)} .cal-month .cell.drop-target{background:var(--gi-cyan-soft,rgba(0,152,220,.12));outline:2px dashed var(--gi-cyan);outline-offset:-2px;z-index:1} /* Event Linear-style avec border-left couleur marque */ .cal-ev{display:flex;align-items:center;gap:5px;font-size:11px;padding:3px 5px 3px 7px;margin-top:3px;background:var(--gi-gray-50);border-left:3px solid var(--gi-cyan);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab;user-select:none;transition:background 120ms ease,transform 120ms ease;line-height:1.3} .cal-ev:hover{background:var(--gi-gray-100);transform:translateX(1px)} .cal-ev.dragging{opacity:.4} .cal-ev .status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--gi-gray-400,#9aa3ad)} .cal-ev.status-draft .status-dot{background:var(--gi-gray-400,#9aa3ad)} .cal-ev.status-ready_for_review .status-dot{background:var(--gi-warning,#e89034)} .cal-ev.status-modif_requested .status-dot{background:var(--gi-danger,#d63a3a)} .cal-ev.status-approved .status-dot{background:var(--gi-cyan,#009FE3)} .cal-ev.status-scheduled .status-dot{background:var(--gi-cyan,#009FE3)} .cal-ev.status-published .status-dot{background:var(--gi-success,#1e9a5a)} .cal-ev.status-passed .status-dot{background:var(--gi-gray-300)} .cal-ev .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--gi-black)} .cal-ev .pf{font-family:var(--gi-font-display);font-size:9px;color:var(--gi-gray-500);letter-spacing:.04em;text-transform:uppercase;flex-shrink:0} /* ── Vue Semaine ── */ .cal-week{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--gi-black);background:var(--gi-white)} .cal-week .col{border-right:1px solid var(--gi-border);min-height:600px;display:flex;flex-direction:column} .cal-week .col:last-child{border-right:0} .cal-week .col-head{padding:10px 12px;border-bottom:1px solid var(--gi-black);background:var(--gi-gray-50)} .cal-week .col-head .dow{font-family:var(--gi-font-display);font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gi-gray-500)} .cal-week .col-head .num{font-family:var(--gi-font-display);font-size:22px;font-weight:600;color:var(--gi-black);font-variant-numeric:tabular-nums;margin-top:4px} .cal-week .col.today .col-head{background:rgba(0,152,220,.08)} .cal-week .col.today .col-head .num{color:var(--gi-cyan)} .cal-week .col.weekend{background:rgba(0,0,0,.015)} .cal-week .col-body{flex:1;padding:8px;cursor:pointer;transition:background 140ms ease} .cal-week .col-body:hover{background:var(--gi-gray-50)} .cal-week .col-body .cal-ev{margin-bottom:6px;font-size:12px;padding:5px 8px 5px 10px;white-space:normal;display:flex;align-items:flex-start;gap:6px;flex-direction:column} .cal-week .col-body .cal-ev .row1{display:flex;align-items:center;gap:6px;width:100%} .cal-week .col-body .cal-ev .msg{font-size:11px;color:var(--gi-gray-600,var(--gi-gray-500));line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .cal-week .col.drop-target .col-body{background:var(--gi-cyan-soft,rgba(0,152,220,.12));outline:2px dashed var(--gi-cyan);outline-offset:-4px} /* ── Vue Liste/Agenda ── */ .cal-list{border:1px solid var(--gi-black);background:var(--gi-white)} .cal-list .day{border-bottom:1px solid var(--gi-border);padding:12px 16px;display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:flex-start} .cal-list .day:last-child{border-bottom:0} .cal-list .day.today{background:rgba(0,152,220,.04);position:relative} .cal-list .day.today::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gi-cyan)} .cal-list .day-label{font-family:var(--gi-font-display);font-size:12px;text-transform:capitalize} .cal-list .day-label .num{font-size:24px;font-weight:600;color:var(--gi-black);font-variant-numeric:tabular-nums;display:block;line-height:1} .cal-list .day-label .dow{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gi-gray-500);margin-top:4px;display:block} .cal-list .day.today .day-label .num{color:var(--gi-cyan)} .cal-list .day-events{display:flex;flex-direction:column;gap:6px} .cal-list .day-events .cal-ev{font-size:13px;padding:8px 12px;margin:0;display:flex;align-items:center;gap:8px;white-space:nowrap} .cal-list .day-events .cal-ev .msg{font-size:11.5px;color:var(--gi-gray-500);margin-left:8px;overflow:hidden;text-overflow:ellipsis} .cal-list .day-empty{color:var(--gi-gray-400,#cfd4da);font-style:italic;font-size:12.5px;padding:4px 0} /* Empty state global */ .cal-empty{padding:48px 24px;text-align:center;border:1px dashed var(--gi-border-strong,var(--gi-gray-300));background:var(--gi-gray-50);font-size:13.5px;color:var(--gi-gray-500);font-style:italic} /* Dark mode overrides */ [data-theme="dark"] .cal-month, [data-theme="dark"] .cal-week, [data-theme="dark"] .cal-list{background:var(--sf-surface-raised);border-color:var(--sf-border)} [data-theme="dark"] .cal-month .dow, [data-theme="dark"] .cal-week .col-head{background:#1C1C1F;color:var(--sf-text)} [data-theme="dark"] .cal-month .cell.weekend{background:rgba(255,255,255,.02)} [data-theme="dark"] .cal-ev{background:#222226} [data-theme="dark"] .cal-ev:hover{background:#2A2A2F} /* ---------- Reset & base ---------- */ *{box-sizing:border-box} html,body{margin:0;padding:0} body{font-family:var(--gi-font-body);color:var(--gi-black);background:var(--gi-gray-50);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%} .gi-tnum,.tnum{font-variant-numeric:tabular-nums} /* ---------- Typo ---------- */ .gi-eyebrow{font-family:var(--gi-font-display);font-weight:500;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gi-gray-500)} .gi-h1{font-family:var(--gi-font-display);font-weight:600;font-size:clamp(32px,5vw,52px);line-height:.98;letter-spacing:-.025em;margin:0} .gi-h2{font-family:var(--gi-font-display);font-weight:600;font-size:clamp(24px,3vw,36px);line-height:1.05;letter-spacing:-.02em;margin:0} .gi-h3{font-family:var(--gi-font-display);font-weight:600;font-size:22px;line-height:1.1;margin:0} .gi-h4{font-family:var(--gi-font-display);font-weight:600;font-size:16px;line-height:1.15;letter-spacing:-.01em;margin:0} .gi-subtitle{font-family:var(--gi-font-display);font-weight:300;font-size:18px;line-height:1.4;color:var(--gi-gray-500)} .gi-quote{font-family:var(--gi-font-body);font-style:italic;font-size:18px;line-height:1.4} .accent{color:var(--gi-cyan)} .muted{color:var(--gi-gray-500)} .num{font-family:var(--gi-font-display);font-weight:600;font-size:10px;letter-spacing:.18em;color:var(--gi-gray-500)} .gi-wordmark{font-family:var(--gi-font-display);font-weight:800;letter-spacing:-.01em} .gi-wordmark .dot{color:var(--gi-cyan)} /* ---------- Boutons (gi-btn) ---------- */ .gi-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;font-family:var(--gi-font-display);font-size:13px;font-weight:500;line-height:1;border:1px solid var(--gi-black);background:var(--gi-white);color:var(--gi-black);transition:all var(--gi-transition);cursor:pointer} .gi-btn:hover{background:var(--gi-black);color:var(--gi-white);transform:translateY(-1px)} .gi-btn:active{transform:translateY(0);opacity:.92} .gi-btn:disabled{opacity:.5;cursor:not-allowed;transform:none} .gi-btn-primary{background:var(--gi-cyan);border-color:var(--gi-cyan);color:#fff} .gi-btn-primary:hover{background:var(--gi-cyan-hover);border-color:var(--gi-cyan-hover);color:#fff;box-shadow:var(--gi-cyan-glow)} .gi-btn-ghost{border-color:rgba(255,255,255,.4);color:#fff;background:transparent} .gi-btn-ghost:hover{background:#fff;color:#000;border-color:#fff} .gi-btn-sm{padding:6px 12px;font-size:12px} .gi-btn-lg{padding:12px 22px;font-size:14px} .gi-btn .arrow{transition:transform var(--gi-transition)} .gi-btn:hover .arrow{transform:translateX(4px)} /* ---------- Badges ---------- */ .gi-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;font-family:var(--gi-font-display);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--gi-black);background:#fff;color:#000;white-space:nowrap} .gi-badge.cyan{color:var(--gi-cyan);border-color:var(--gi-cyan);background:var(--gi-cyan-soft)} .gi-badge.success{color:var(--gi-success);border-color:var(--gi-success);background:var(--gi-success-bg)} .gi-badge.warning{color:var(--gi-warning-text);border-color:var(--gi-warning);background:var(--gi-warning-bg)} .gi-badge.danger{color:var(--gi-danger-text);border-color:var(--gi-danger);background:var(--gi-danger-bg)} .gi-badge.muted{color:var(--gi-gray-500);border-color:var(--gi-border-strong);background:var(--gi-gray-50)} /* ---------- Cards ---------- */ .gi-card{border:1px solid var(--gi-black);background:#fff} .gi-card-head{padding:16px 20px;border-bottom:1px solid var(--gi-border);display:flex;align-items:center;justify-content:space-between;gap:12px} .gi-card-head h3,.gi-card-title{font-family:var(--gi-font-display);font-size:14px;font-weight:600;letter-spacing:-.01em;margin:0} .gi-card-body{padding:20px} /* ---------- Section header ---------- */ .gi-section{margin-bottom:40px} .gi-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:2px solid var(--gi-black);margin-bottom:20px} .gi-section-title{font-family:var(--gi-font-display);font-size:20px;font-weight:600;letter-spacing:-.015em;margin:2px 0 0} /* ---------- KPI grid ---------- */ .gi-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--gi-black);background:#fff} @media(max-width:1024px){.gi-kpi-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.gi-kpi-grid{grid-template-columns:1fr}} /* Variante 5 colonnes · le bloc « Santé » d'Analytics compte CINQ indicateurs. Dans la grille à 4 colonnes, le cinquième se retrouvait seul sur une deuxième ligne et les trois quarts restants formaient un pavé vide qu'on lisait comme un bug d'affichage. Modificateur plutôt que changement de la règle commune : l'autre grille (Régularité) en a bien quatre. */ .gi-kpi-grid.gi-kpi-grid-5{grid-template-columns:repeat(5,1fr)} @media(max-width:1280px){.gi-kpi-grid.gi-kpi-grid-5{grid-template-columns:repeat(3,1fr)}} @media(max-width:1024px){.gi-kpi-grid.gi-kpi-grid-5{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.gi-kpi-grid.gi-kpi-grid-5{grid-template-columns:1fr}} .gi-kpi{padding:22px 24px;border-right:1px solid var(--gi-border)} .gi-kpi:last-child{border-right:0} .gi-kpi .lbl{font-family:var(--gi-font-display);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gi-gray-500)} .gi-kpi .val{font-family:var(--gi-font-display);font-size:36px;font-weight:700;line-height:1;letter-spacing:-.025em;margin-top:12px;font-variant-numeric:tabular-nums} .gi-kpi .val.cyan{color:var(--gi-cyan)} .gi-kpi .meta{font-family:var(--gi-font-body);font-style:italic;font-size:12px;color:var(--gi-gray-500);margin-top:6px} /* ---------- Hero split (signature) ---------- */ .gi-hero{display:grid;grid-template-columns:3fr 2fr;border:1px solid var(--gi-black);background:#fff;overflow:hidden} @media(max-width:768px){.gi-hero{grid-template-columns:1fr}} .gi-hero-light{padding:32px 36px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;min-height:200px} .gi-hero-dark{padding:32px 36px;background:#000;color:#fff;display:flex;flex-direction:column;justify-content:center;gap:14px;position:relative} .gi-hero-dark::before{content:'';position:absolute;left:0;top:32px;bottom:32px;width:3px;background:var(--gi-cyan)} .gi-hero-kpi{font-family:var(--gi-font-display);font-size:38px;font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums} /* ---------- Table ---------- */ .gi-table{width:100%;border-collapse:collapse;border:1px solid var(--gi-black);background:#fff;font-family:var(--gi-font-body);font-size:13px} .gi-table thead th{background:#000;color:#fff;font-family:var(--gi-font-display);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;text-align:left;padding:11px 14px} .gi-table tbody td{padding:12px 14px;border-bottom:1px solid var(--gi-border);vertical-align:middle} .gi-table tbody tr:last-child td{border-bottom:0} .gi-table tbody tr:hover{background:var(--gi-gray-50)} /* ---------- Form fields ---------- */ .gi-field{display:block;margin-bottom:16px} .gi-field-label{display:block;font-family:var(--gi-font-display);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gi-gray-500);margin-bottom:6px} .gi-field-label .req{color:var(--gi-cyan)} .gi-field-input,.gi-field-textarea,.gi-field-select{width:100%;padding:10px 14px;border:1px solid var(--gi-black);background:#fff;font-family:var(--gi-font-body);font-size:14px;color:#000;border-radius:0;appearance:none;-webkit-appearance:none;transition:box-shadow var(--gi-transition),border-color var(--gi-transition)} .gi-field-textarea{resize:vertical;min-height:96px} .gi-field-input:focus,.gi-field-textarea:focus,.gi-field-select:focus{outline:none;box-shadow:var(--gi-cyan-glow);border-color:var(--gi-cyan)} /* ---------- Empty state ---------- */ .gi-empty{border:1px dashed var(--gi-border-strong);background:var(--gi-gray-50);padding:44px 24px;text-align:center} .gi-empty-title{font-family:var(--gi-font-display);font-size:14px;font-weight:600;margin-bottom:6px} .gi-empty-desc{font-family:var(--gi-font-body);font-style:italic;font-size:13px;color:var(--gi-gray-500)} /* ---------- Bars (mini) ---------- */ .gi-bar-track{height:8px;background:var(--gi-gray-100);position:relative} .gi-bar-fill{height:100%;background:var(--gi-black);transition:width 400ms var(--gi-ease)} .gi-bar-fill.cyan{background:var(--gi-cyan)} /* ---------- Health dot ---------- */ .dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 auto} .dot.good{background:var(--gi-success)}.dot.warning{background:var(--gi-warning)}.dot.critical{background:var(--gi-danger)}.dot.none{background:var(--gi-gray-300)} /* ---------- Utilities ---------- */ .row{display:flex;align-items:center;gap:12px}.wrap{flex-wrap:wrap} .spread{display:flex;align-items:center;justify-content:space-between;gap:12px} .stack-1>*+*{margin-top:8px}.stack-2>*+*{margin-top:16px}.stack-3>*+*{margin-top:24px} .rule{height:1px;background:var(--gi-black);border:0;margin:0}.rule.light{background:var(--gi-border)} .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#000;color:#fff;font-family:var(--gi-font-display);font-size:13px;padding:12px 20px;display:none;z-index:60} .toast.show{display:block} .modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;place-items:center;z-index:50;padding:20px} .modal.open{display:grid} .sheet{background:#fff;border:1px solid #000;width:min(96vw,600px);max-height:92vh;overflow:auto;padding:28px} /* Stack de modales · overlay s'affiche par-dessus la modale primaire (refonte 2026-06-02). z-index 60 > 50 du primary · backdrop plus opaque pour bien séparer visuellement les 2 couches · sheet overlay legèrement plus petit pour suggérer l'empilement. */ .modal-overlay{z-index:60;background:rgba(0,0,0,.55)} .modal-overlay .sheet{width:min(94vw,540px)} /* ============================================================ COUCHE SOCIALFLOW (sf-*) · chrome & signatures propres ============================================================ */ /* Split login plein écran */ .sf-split{display:grid;grid-template-columns:1.1fr 1fr;min-height:100vh} .sf-split .pane-light{background:#fff;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,6vw,88px)} .sf-split .pane-dark{background:#000;color:#fff;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,6vw,88px);position:relative;overflow:hidden} .sf-split .pane-dark::after{content:'';position:absolute;right:-120px;bottom:-120px;width:320px;height:320px;border:1px solid rgba(255,255,255,.12);border-radius:50%} @media(max-width:820px){.sf-split{grid-template-columns:1fr}.sf-split .pane-dark{display:none}} /* Shell admin : sidebar + topbar + main */ /* `100vh` sur iOS Safari inclut la barre d'URL dynamique → la topbar sortait du viewport quand on scroll vers le bas (bug Kevin 2026-06-02). `100dvh` (dynamic viewport height) suit le viewport visible en temps réel. Fallback `100vh` pour les browsers qui ne supportent pas dvh. */ .sf-shell{display:grid;grid-template-columns:256px 1fr;grid-template-rows:60px 1fr;height:100vh;height:100dvh} /* Topbar collante en haut · visible en permanence même quand on scroll dans la main. z-index >sidebar pour rester au-dessus du menu off-canvas mobile. */ .sf-topbar{position:sticky;top:0;z-index:31} .sf-topbar{grid-column:1/3;background:#000;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid #000} .sf-topbar .gi-wordmark{font-size:18px;color:#fff} .sf-topbar .right{display:flex;align-items:center;gap:18px;font-family:var(--gi-font-display);font-size:13px} .sf-topbar .right a{color:rgba(255,255,255,.7)}.sf-topbar .right a:hover{color:#fff} .sf-bell{position:relative;cursor:pointer} .sf-bell .badge{position:absolute;top:-8px;right:-10px;background:var(--gi-cyan);color:#fff;font-size:10px;font-weight:600;border-radius:999px;padding:1px 6px;display:none} .sf-sidebar{background:#fff;border-right:1px solid var(--gi-black);overflow-y:auto;padding:18px 0} .sf-sidebar .grp{font-family:var(--gi-font-display);font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gi-text-muted);padding:0 22px;margin:6px 0 10px} .sf-brand-item{display:flex;align-items:center;gap:10px;padding:11px 22px;cursor:pointer;border-left:3px solid transparent;transition:background var(--gi-transition)} .sf-brand-item:hover{background:var(--gi-gray-50)} .sf-brand-item.active{background:var(--gi-gray-50);border-left-color:var(--gi-cyan)} .sf-brand-item .nm{font-family:var(--gi-font-display);font-size:14px;font-weight:500} /* Kevin 2026-06-10 · Phase 3 Kanban · vue pipeline 6 colonnes scrollables */ .kb-board{display:grid;grid-template-columns:repeat(6, minmax(220px, 1fr));gap:12px;margin-top:6px;overflow-x:auto;padding-bottom:6px} .kb-col{background:var(--gi-gray-50,#f6f5f0);border:1px solid var(--gi-border);border-radius:var(--gi-radius);display:flex;flex-direction:column;min-height:300px;max-height:calc(100vh - 320px)} .kb-col-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--gi-border);font-family:var(--gi-font-display);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;background:#fff;border-radius:var(--gi-radius) var(--gi-radius) 0 0} .kb-col-icon{font-size:14px} .kb-col-lbl{flex:1;color:var(--gi-black)} .kb-col-n{background:var(--gi-black);color:#fff;font-size:11px;padding:1px 7px;border-radius:10px;min-width:20px;text-align:center} .kb-col-body{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:8px} .kb-card{background:#fff;border:1px solid var(--gi-border);border-radius:var(--gi-radius);padding:10px 11px;cursor:pointer;transition:border-color 120ms ease,transform 120ms ease,box-shadow 120ms ease;outline:none} .kb-card:hover{border-color:var(--gi-cyan);box-shadow:0 4px 12px rgba(0,159,227,.1);transform:translateY(-1px)} .kb-card:focus-visible{border-color:var(--gi-cyan);box-shadow:0 0 0 3px rgba(0,159,227,.15)} .kb-head{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:6px} .kb-pfs{display:flex;gap:3px} .kb-pf{font-size:10px;font-weight:700;padding:1px 5px;background:var(--gi-gray-100);color:var(--gi-gray-700);border-radius:3px;letter-spacing:.02em} .kb-date{font-size:10.5px;color:var(--gi-gray-500);font-variant-numeric:tabular-nums} .kb-msg{font-size:12.5px;line-height:1.45;color:var(--gi-black);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:6px} .kb-foot{display:flex;gap:5px;align-items:center;flex-wrap:wrap} .kb-ctype{font-size:12px} .kb-share{font-size:11px;background:var(--gi-cyan-soft,#e8f5fb);color:var(--gi-cyan);padding:1px 5px;border-radius:3px} .kb-pillar{font-size:10.5px;background:var(--gi-gray-100);color:var(--gi-gray-700);padding:2px 7px;border-radius:10px;font-weight:500} .kb-empty{font-size:11.5px;color:var(--gi-gray-500);font-style:italic;text-align:center;padding:20px 8px} .kb-more{font-size:11px;color:var(--gi-gray-500);font-style:italic;text-align:center;padding:8px 4px;border-top:1px dashed var(--gi-border);margin-top:4px} .kb-cap-hint{background:var(--gi-warning-soft,#fff4e0);border-left:3px solid var(--gi-warning,#e89034);color:var(--gi-gray-700);padding:8px 14px;font-size:12px;margin-bottom:10px;border-radius:0 var(--gi-radius) var(--gi-radius) 0} .kb-col-draft .kb-col-head{border-bottom-color:var(--gi-gray-400)} .kb-col-ready_for_review .kb-col-head{border-bottom-color:var(--gi-warning,#e89034)} .kb-col-modif_requested .kb-col-head{border-bottom-color:var(--gi-danger,#d63a3a)} .kb-col-approved .kb-col-head{border-bottom-color:var(--gi-cyan,#009FE3)} .kb-col-scheduled .kb-col-head{border-bottom-color:var(--gi-cyan,#009FE3)} .kb-col-published .kb-col-head{border-bottom-color:var(--gi-success,#1e9a5a)} [data-theme="dark"] .kb-col{background:var(--sf-surface-elevated);border-color:var(--sf-border)} [data-theme="dark"] .kb-col-head{background:var(--sf-surface-raised);border-bottom-color:var(--sf-border-strong);color:var(--sf-text-primary)} [data-theme="dark"] .kb-col-lbl{color:var(--sf-text-primary)} [data-theme="dark"] .kb-col-n{background:var(--sf-text-primary);color:var(--sf-surface)} [data-theme="dark"] .kb-card{background:var(--sf-surface-elevated);border-color:var(--sf-border)} [data-theme="dark"] .kb-card:hover{border-color:var(--gi-cyan);box-shadow:0 4px 12px rgba(0,159,227,.18)} [data-theme="dark"] .kb-pf{background:var(--sf-surface-raised);color:var(--sf-text-secondary)} [data-theme="dark"] .kb-date{color:var(--sf-text-muted)} [data-theme="dark"] .kb-msg{color:var(--sf-text-primary)} [data-theme="dark"] .kb-pillar{background:var(--sf-surface-raised);color:var(--sf-text-secondary)} [data-theme="dark"] .kb-share{background:rgba(0,159,227,.18);color:var(--gi-cyan)} [data-theme="dark"] .kb-empty,[data-theme="dark"] .kb-more{color:var(--sf-text-muted)} [data-theme="dark"] .kb-cap-hint{background:rgba(232,144,52,.1);color:var(--sf-text-secondary)} @media (max-width: 1400px){ .kb-board{grid-template-columns:repeat(6, 230px)} } /* Kevin 2026-06-10 · Phase 1 toolbar upgrade · multi-select dropdowns Fix 2026-06-10 · z-index élevé (200) pour passer au-dessus des chips ctype et du thead/tbody (qui ont leur propre stacking context via sticky/transform). */ .sf-drop{position:relative;display:inline-block;z-index:1} .sf-drop:has(.sf-drop-menu.open){z-index:200} .sf-drop-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--gi-border-strong);background:#fff;cursor:pointer;font-family:var(--gi-font-display);font-size:12.5px;font-weight:500;color:var(--gi-black);transition:border-color var(--gi-transition),background var(--gi-transition);min-width:140px;max-width:230px;justify-content:space-between;border-radius:var(--gi-radius)} .sf-drop-btn:hover{border-color:var(--gi-black)} .sf-drop-btn.is-active{background:var(--gi-cyan-soft,#e8f5fb);border-color:var(--gi-cyan);color:var(--gi-cyan)} .sf-drop-btn span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sf-drop-caret{font-size:10px;opacity:.6;margin-left:auto} .sf-drop-menu{position:absolute;top:calc(100% + 4px);left:0;min-width:220px;max-width:320px;max-height:340px;overflow-y:auto;background:#fff;border:1px solid var(--gi-black);box-shadow:0 12px 32px rgba(0,0,0,.15);z-index:200;padding:6px 0;display:none} .sf-drop-menu.open{display:block} .sf-drop-item{display:block;width:100%;text-align:left;background:none;border:0;padding:8px 14px;font-family:var(--gi-font-body);font-size:13px;color:var(--gi-black);cursor:pointer;transition:background 100ms ease} .sf-drop-item:hover{background:var(--gi-gray-50)} .sf-drop-item.is-on{font-weight:600;color:var(--gi-cyan)} .sf-drop-item.is-clear{border-top:1px solid var(--gi-border);margin-top:4px;color:var(--gi-gray-600);font-size:12px} [data-theme="dark"] .sf-drop-btn{background:var(--sf-surface-elevated);border-color:var(--sf-border-strong);color:var(--sf-text-primary)} [data-theme="dark"] .sf-drop-btn:hover{border-color:var(--sf-text-primary)} [data-theme="dark"] .sf-drop-btn.is-active{background:rgba(0,159,227,.15);border-color:var(--gi-cyan);color:var(--gi-cyan)} [data-theme="dark"] .sf-drop-menu{background:var(--sf-surface-elevated);border-color:var(--sf-border-strong);box-shadow:0 12px 32px rgba(0,0,0,.4)} [data-theme="dark"] .sf-drop-item{color:var(--sf-text-primary)} [data-theme="dark"] .sf-drop-item:hover{background:var(--sf-surface-hover)} [data-theme="dark"] .sf-drop-item.is-clear{border-top-color:var(--sf-border);color:var(--sf-text-muted)} /* Kevin 2026-06-10 · centre de notifications + refonte cloche (groupes par marque) Fix 2026-06-10 · couleurs explicites pour les 2 thèmes (clair/sombre) sur le header de groupe · sans `color` explicite le `` était quasi invisible sur fond `gi-gray-50` en clair (héritait d'une couleur muted). */ .sf-bell-group{border-bottom:1px solid var(--gi-border)} .sf-bell-group:last-of-type{border-bottom:0} .sf-bell-group-head{padding:10px 14px;display:flex;justify-content:space-between;align-items:center;background:var(--gi-gray-50);border-bottom:1px solid var(--gi-border)} .sf-bell-group-head b{font-family:var(--gi-font-display);font-size:13px;font-weight:600;color:var(--gi-black);letter-spacing:-.01em} .sf-bell-group-head .muted{font-size:11px;font-weight:600;color:var(--gi-gray-500);background:#fff;padding:2px 8px;border-radius:999px;border:1px solid var(--gi-border)} .sf-bell-footer{border-top:1px solid var(--gi-border);padding:10px 14px;background:#fff} .sf-bell-link{background:none;border:0;color:var(--gi-cyan);cursor:pointer;font-family:var(--gi-font-display);font-size:13px;font-weight:500;display:flex;align-items:center;gap:6px;width:100%;justify-content:center;padding:6px 0} .sf-bell-link:hover{text-decoration:underline} /* Dark theme · réutilise les tokens existants */ [data-theme="dark"] .sf-bell-group{border-bottom-color:var(--sf-border)} [data-theme="dark"] .sf-bell-group-head{background:var(--sf-surface-raised);border-bottom-color:var(--sf-border)} [data-theme="dark"] .sf-bell-group-head b{color:var(--sf-text-primary)} [data-theme="dark"] .sf-bell-group-head .muted{background:var(--sf-surface-elevated);border-color:var(--sf-border);color:var(--sf-text-muted)} [data-theme="dark"] .sf-bell-footer{background:var(--sf-surface-elevated);border-top-color:var(--sf-border)} .sf-tab-btn{padding:12px 18px;background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--gi-font-display);font-size:13px;color:var(--gi-gray-600);font-weight:500;transition:color .2s,border-color .2s} .sf-tab-btn.active{color:var(--gi-black);border-bottom-color:var(--gi-cyan)} .sf-tab-btn:hover{color:var(--gi-black)} .sf-tab-btn .muted{margin-left:6px;font-size:11px;background:var(--gi-gray-100);color:var(--gi-gray-600);padding:1px 7px;border-radius:999px} .sf-tab-btn.active .muted{background:var(--gi-cyan);color:#fff} [data-theme="dark"] .sf-tab-btn{color:var(--sf-text-muted)} [data-theme="dark"] .sf-tab-btn.active{color:var(--sf-text-primary)} [data-theme="dark"] .sf-tab-btn:hover{color:var(--sf-text-primary)} [data-theme="dark"] .sf-tab-btn .muted{background:var(--sf-surface-elevated);color:var(--sf-text-muted)} .sf-notif-row{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--gi-gray-100);align-items:flex-start} .sf-notif-row:last-child{border-bottom:0} .sf-notif-row.is-read{opacity:.6} .sf-notif-row.is-archived{opacity:.55;background:var(--gi-gray-50)} .sf-notif-row-main{flex:1;min-width:0} .sf-notif-row-main b{color:var(--gi-black);font-family:var(--gi-font-display);font-size:13px} .sf-notif-row-actions{display:flex;gap:4px;flex-shrink:0;align-items:center} .sf-rowbtn.primary{background:var(--gi-cyan);color:#fff;border-color:var(--gi-cyan)} .sf-rowbtn.primary:hover{background:var(--gi-cyan);opacity:.9} [data-theme="dark"] .sf-notif-row{border-bottom-color:var(--sf-border)} [data-theme="dark"] .sf-notif-row-main b{color:var(--sf-text-primary)} [data-theme="dark"] .sf-notif-row.is-archived{background:var(--sf-surface-raised)} .sf-brand-item .pill{margin-left:auto;font-family:var(--gi-font-display);font-size:10px;font-weight:600;background:var(--gi-cyan);color:#fff;border-radius:999px;padding:1px 7px;font-variant-numeric:tabular-nums} .sf-brand-item .pill.warn{background:var(--gi-warning)} /* Kevin 2026-06-09 · indicateur visuel marque en pause · italique + opacité réduite */ .sf-brand-item.sf-brand-paused .nm{font-style:italic;opacity:.55} .sf-brand-item.sf-brand-paused .dot{opacity:.4} .sf-brand-item .sf-brand-status-badge{font-size:11px;line-height:1;color:var(--gi-gray-500);margin-left:auto;padding:0 4px} .sf-brand-item .sf-brand-status-badge.paused{color:var(--gi-gray-500)} .sf-brand-item .sf-brand-status-badge + .pill{margin-left:6px} .sf-main{overflow-y:auto;padding:32px clamp(20px,4vw,48px)} /* Command center : grille de cartes brand */ .sf-cmd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0;border:1px solid var(--gi-black);background:var(--gi-border)} .sf-cmd-card{background:#fff;padding:22px;cursor:pointer;transition:background var(--gi-transition)} .sf-cmd-card:hover{background:var(--gi-gray-50)} .sf-cmd-card .nm{font-family:var(--gi-font-display);font-size:17px;font-weight:600;display:flex;align-items:center;gap:9px} .sf-cmd-row{display:flex;align-items:baseline;justify-content:space-between;margin-top:14px;font-family:var(--gi-font-body);font-size:13px;color:var(--gi-gray-500)} .sf-cmd-row .v{font-family:var(--gi-font-display);font-weight:700;color:#000;font-variant-numeric:tabular-nums} .sf-score{font-family:var(--gi-font-display);font-size:30px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums} /* Pipeline de statuts (signature SocialFlow) */ .sf-pipe{display:flex;gap:0;border:1px solid var(--gi-black);background:#fff;font-family:var(--gi-font-display)} .sf-pipe .step{flex:1;padding:14px 12px;border-right:1px solid var(--gi-border);text-align:center} .sf-pipe .step:last-child{border-right:0} .sf-pipe .step .n{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums} .sf-pipe .step .l{font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gi-gray-500);margin-top:6px} .sf-pipe .step.hot .n{color:var(--gi-cyan)} /* Onglets (portail validation) */ .sf-tabs{display:flex;gap:0;border:1px solid var(--gi-black);width:fit-content;margin-bottom:24px} .sf-tab{font-family:var(--gi-font-display);font-size:13px;font-weight:500;padding:10px 18px;border-right:1px solid var(--gi-black);cursor:pointer;background:#fff;color:#000} .sf-tab:last-child{border-right:0} .sf-tab.active{background:#000;color:#fff} /* Carte de validation (post / campagne) */ .sf-vcard{border:1px solid var(--gi-black);background:#fff;margin-bottom:20px} .sf-vcard .hd{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--gi-border)} .sf-vcard .bd{padding:20px} .sf-vcard .msg{font-family:var(--gi-font-body);font-size:15px;line-height:1.55;white-space:pre-wrap} .sf-vcard .tags{color:var(--gi-cyan);font-family:var(--gi-font-body);font-size:13px;margin-top:10px} .sf-vcard .thread{border-top:1px solid var(--gi-border);margin-top:16px;padding-top:12px} .sf-cmt{font-size:13px;margin:6px 0;color:var(--gi-gray-700)}.sf-cmt b{font-family:var(--gi-font-display);font-weight:600} .sf-vcard .acts{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px 20px} /* ---------- Iconographie SVG inline (.ic) : sizing global ---------- */ /* Sans cette règle, un sans width/height explicite s'étale (~300×150). */ .ic{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;vertical-align:-0.15em;flex-shrink:0;line-height:1} .ic > svg{width:100%;height:100%;display:block} .gi-eyebrow .ic,.muted .ic{width:1em;height:1em} /* ---------- Filtres Publications (toolbar compacte) ---------- */ /* Kevin 2026-06-10 · `position:relative; z-index:10` pour que les `.sf-drop-menu` enfants passent au-dessus de `.sf-ctype-filters` (rangée suivante) et `` du tableau. Sans position, le z-index n'a pas d'effet et l'ordre DOM gagne par défaut → chips Lien/Partage apparaissaient À TRAVERS le menu dropdown. */ .sf-pub-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px;padding:6px 0;position:relative;z-index:10} .sf-pub-toolbar:has(.sf-drop-menu.open){z-index:200} .sf-pub-toolbar .gi-field-input{height:34px} .sf-pub-chips{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-width:0;align-items:center} .sf-pub-spacer{flex:1} /* Refonte A1 (2026-06-23) · toolbar Publications 3 zones (Filtres | Vues | Actions) + popover Filtres + chips actifs */ .sf-pub-toolbar2{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-bottom:10px;padding:6px 0;position:relative;z-index:10} .sf-pub-toolbar2:has(.sf-drop-menu.open){z-index:200} .sf-pub-toolbar2 .gi-field-input{height:34px} .sf-pt-zone{display:flex;align-items:center;gap:8px} .sf-pt-filters{flex:1 1 auto;min-width:0} .sf-filterbtn{min-width:auto;justify-content:flex-start} .sf-filterbtn .ic{width:14px;height:14px;opacity:.75} .sf-filterbtn-n{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--gi-cyan);color:#fff;font-size:11px;font-weight:700;margin-left:4px} .sf-filters-menu{min-width:290px;max-width:340px;padding:0} .sf-filters-menu.open{display:flex;flex-direction:column;max-height:none;overflow:visible} .sf-fg-scroll{overflow-y:auto;max-height:360px} .sf-fg{padding:9px 14px 11px;border-bottom:1px solid var(--gi-border)} .sf-fg-scroll .sf-fg:last-child{border-bottom:0} .sf-fg-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px} .sf-fg-t{font-family:var(--gi-font-display);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--gi-gray-500)} .sf-fg-allnone{background:none;border:0;color:var(--gi-cyan);font-size:11px;font-weight:600;cursor:pointer;padding:0} .sf-fg-allnone:hover{text-decoration:underline} .sf-fg-items{display:flex;flex-wrap:wrap;gap:5px} .sf-fg-items .sf-drop-item{display:inline-flex;align-items:center;gap:5px;width:auto;padding:4px 10px;border:1px solid var(--gi-border-strong);border-radius:var(--gi-radius-pill);font-size:12px} .sf-fg-items .sf-drop-item:hover{border-color:var(--gi-black)} .sf-fg-items .sf-drop-item.is-on{background:var(--gi-cyan-soft,#e8f5fb);border-color:var(--gi-cyan);color:var(--gi-cyan);font-weight:600} .sf-fg-check{font-size:10.5px;font-weight:700;color:var(--gi-cyan)} .sf-fg-ic{display:inline-flex;align-items:center;width:14px;height:14px} .sf-fg-ic svg{width:14px;height:14px} .sf-fg-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-top:1px solid var(--gi-border);background:#fff} .sf-fg-reset{background:none;border:0;color:var(--gi-gray-600);font-size:12px;cursor:pointer;text-decoration:underline} .sf-fg-reset:hover{color:var(--gi-black)} .sf-fg-apply{background:var(--gi-cyan);color:#fff;border:0;border-radius:6px;padding:6px 13px;font-size:12px;font-weight:600;cursor:pointer} .sf-fg-apply:hover{filter:brightness(1.05)} .sf-activef{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 14px} .sf-activef-lbl{font-family:var(--gi-font-display);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--gi-gray-500);margin-right:2px} .sf-fchip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--gi-cyan);background:var(--gi-cyan-soft,#e8f5fb);color:var(--gi-cyan);border-radius:var(--gi-radius-pill);font-size:12px;font-weight:600;cursor:pointer} .sf-fchip .x{font-size:14px;line-height:1;opacity:.8} .sf-fchip:hover{background:var(--gi-cyan);color:#fff} .sf-activef-reset{background:none;border:0;color:var(--gi-gray-600);font-size:12px;cursor:pointer;text-decoration:underline;margin-left:4px} .sf-activef-reset:hover{color:var(--gi-black)} [data-theme="dark"] .sf-fg{border-bottom-color:var(--sf-border)} [data-theme="dark"] .sf-fg-items .sf-drop-item{border-color:var(--sf-border-strong)} [data-theme="dark"] .sf-fchip{background:rgba(0,159,227,.15)} [data-theme="dark"] .sf-fg-foot{background:var(--sf-surface-elevated);border-top-color:var(--sf-border)} [data-theme="dark"] .sf-fg-items .sf-drop-item.is-on{background:rgba(0,159,227,.15)} .sf-pub-active-pills{display:flex;flex-wrap:wrap;gap:6px;padding:8px 0;border-bottom:1px solid var(--gi-border);margin-bottom:10px;align-items:center} .sf-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:var(--gi-cyan-soft);color:var(--gi-cyan);font-family:var(--gi-font-display);font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--gi-cyan)} .sf-pill .x{font-size:14px;line-height:1;opacity:.7} .sf-pill:hover{background:var(--gi-cyan);color:#fff} /* Popover filtres */ .sf-pub-popover{border:1px solid var(--gi-black);background:#fff;padding:14px 16px;margin-bottom:14px;box-shadow:0 8px 24px rgba(0,0,0,.08)} .sf-pop-group{display:flex;align-items:flex-start;gap:14px;padding:6px 0;border-bottom:1px solid var(--gi-border)} .sf-pop-group:last-child{border-bottom:none} .sf-pop-lbl{flex-shrink:0;width:80px;font-family:var(--gi-font-display);font-size:11px;font-weight:600;color:var(--gi-gray-500);text-transform:uppercase;letter-spacing:.08em;padding-top:6px} .sf-pop-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1;align-items:center} .sf-mfchip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--gi-border-strong);background:#fff;font-family:var(--gi-font-display);font-size:12px;font-weight:500;cursor:pointer;user-select:none;transition:background var(--gi-transition),color var(--gi-transition),border-color var(--gi-transition)} .sf-mfchip:hover{background:var(--gi-gray-50)} .sf-mfchip.active{background:var(--gi-black);color:#fff;border-color:var(--gi-black)} /* Pastilles statut visuel (rouge si manquant, vert si présent) */ .sf-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:middle} .sf-dot-danger{background:var(--gi-danger)} .sf-dot-ok{background:var(--gi-success,#34d27b)} /* Badge type de date (publié vs prévu) */ .sf-date-kind{display:inline-block;font-size:9px;font-family:var(--gi-font-display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:1px 5px;margin-left:4px;vertical-align:1px} .sf-date-published{background:var(--gi-success,#34d27b);color:#fff} .sf-date-planned{background:var(--gi-cyan-soft);color:var(--gi-cyan);border:1px solid var(--gi-cyan)} /* ---------- Dashboard Analytics (Sprout-like) ---------- */ /* Analytics · barre de filtres compacte (1 ligne, popovers pour multi-select). */ .sf-an-bar{margin-bottom:14px} .sf-an-line{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .sf-an-tag{font-family:var(--gi-font-display);font-size:11px;font-weight:600;color:var(--gi-gray-500);text-transform:uppercase;letter-spacing:.08em;margin-right:2px} .sf-an-daterow{font-size:11.5px;color:var(--gi-gray-500);margin-top:6px;font-family:var(--gi-font-display)} /* Phase 3 audit rapports (Kevin 2026-06-08) · badge couverture suivi SF. Signal discret quand la période choisie n'est pas entièrement couverte. */ .sf-cov-badge{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:5px 10px;font-size:11.5px;font-family:var(--gi-font-display);color:var(--gi-cyan-700);background:rgba(0,159,227,.07);border:1px solid rgba(0,159,227,.22);border-radius:999px;line-height:1} .sf-cov-dot{width:6px;height:6px;border-radius:50%;background:var(--gi-cyan);box-shadow:0 0 0 3px rgba(0,159,227,.18)} .sf-cov-empty{display:flex;align-items:center;gap:10px;margin-top:10px;padding:12px 14px;font-size:13px;font-family:var(--gi-font-display);color:var(--gi-gray-700);background:var(--gi-gray-50);border:1px dashed var(--gi-gray-300);border-radius:8px} .sf-cov-empty-icon{font-size:16px;color:var(--gi-cyan);flex-shrink:0} .sf-cov-empty-txt{flex:1;line-height:1.4} .sf-cov-empty .gi-btn{flex-shrink:0;white-space:nowrap} /* Toggle vs N-1 désactivé (Phase 4 audit rapports Kevin 2026-06-08) · discret, opaque, curseur not-allowed, icône cadenas pour rendre l'état lisible. */ .sf-toggle-locked{color:var(--gi-gray-400);cursor:not-allowed;opacity:.7} .sf-toggle-locked input{cursor:not-allowed} .sf-toggle-lock-icon{margin-left:4px;font-size:11px;opacity:.7} /* Ancien bloc (gardé pour compat ascendant · sera retiré quand plus utilisé) */ .sf-an-filters{border:1px solid var(--gi-border);background:var(--gi-gray-50);padding:12px 16px;margin-bottom:8px} .sf-an-row{display:flex;align-items:center;gap:14px;padding:6px 0;border-bottom:1px solid var(--gi-border)} .sf-an-row:last-child{border-bottom:none} .sf-an-lbl{flex-shrink:0;width:88px;font-family:var(--gi-font-display);font-size:11px;font-weight:600;color:var(--gi-gray-500);text-transform:uppercase;letter-spacing:.08em} .sf-an-grp{display:flex;flex-wrap:wrap;gap:6px;flex:1;align-items:center} .sf-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--gi-font-display);font-size:13px} .sf-toggle input{cursor:pointer} /* KPI cards : meta delta */ .gi-kpi .meta{margin-top:6px;font-size:11px;color:var(--gi-gray-500)} .sf-delta{display:inline-block;font-family:var(--gi-font-display);font-weight:700;font-size:12px;padding:1px 6px} .sf-delta-up{color:#0f7d3e;background:#e6f4eb} .sf-delta-down{color:#a32a2a;background:#fbeaea} .sf-delta-flat{color:var(--gi-gray-500);background:var(--gi-gray-100)} .sf-delta.muted{background:transparent} /* Per-platform sections */ .sf-an-platrow{display:flex;align-items:flex-start;gap:18px;padding:14px 0;border-bottom:1px solid var(--gi-border)} .sf-an-platrow:last-of-type{border-bottom:none} .sf-an-platlbl{flex-shrink:0;width:140px;padding-top:8px} .sf-an-platrow .gi-kpi-grid{flex:1} /* Cards blocs (piliers, content types, heatmap, top posts, hashtags) */ .sf-card-block{border:1px solid var(--gi-border);background:#fff;padding:18px 20px;margin-top:18px} /* ---------- Drawer latéral (preview post) ---------- */ /* Drawer · au repos invisible TOTAL (visibility hidden) en plus de pointer-events, pour éviter tout artefact visuel possible (résiduel backdrop, panel partiellement transformé, etc.). Visibility est ré-activé instantanément à .open ; opacity et transform animent le reveal. */ .sf-drawer{position:fixed;inset:0;z-index:60;pointer-events:none;visibility:hidden} .sf-drawer.open{pointer-events:auto;visibility:visible} .sf-drawer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .22s var(--gi-ease)} .sf-drawer.open .sf-drawer-backdrop{opacity:1} .sf-drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(720px,96vw);background:#fff;box-shadow:-10px 0 40px rgba(0,0,0,.18);transform:translateX(100%);transition:transform 320ms var(--sf-ease-spring, cubic-bezier(0.32,0.72,0,1));display:flex;flex-direction:column;overflow:hidden} .sf-drawer.open .sf-drawer-panel{transform:none} .sf-drawer-body{overflow-y:auto;padding:22px 26px} /* `flex-wrap:wrap` permet à la rangée actions de passer SOUS le titre en mobile au lieu de se serrer à côté · évite que le titre se casse en 3 lignes (bug Kevin 2026-06-02). */ .sf-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--gi-border);margin-bottom:18px;flex-wrap:wrap} /* Mobile · drawer plein écran + header compact + titre plus petit + actions stack en dessous */ @media (max-width:640px){ .sf-drawer-panel{width:100vw;max-width:100vw;border-radius:0;border-left:0} .sf-drawer-body{padding:16px 18px} .sf-drawer-head{flex-direction:column;align-items:stretch;gap:10px;padding-bottom:12px;margin-bottom:14px} .sf-drawer-head .gi-h3{font-size:18px!important;line-height:1.25!important;margin:.15rem 0!important} .sf-drawer-head .gi-eyebrow{font-size:10.5px;letter-spacing:.14em} /* La rangée actions en mobile : alignée à gauche, prend toute la largeur, wrap si besoin */ .sf-drawer-head > .row.wrap{justify-content:flex-start;width:100%;gap:6px} .sf-drawer-head .gi-btn-sm{padding:5px 10px;font-size:11.5px} /* Meta grid passe en 2 colonnes pour rester lisible sans étirer */ .sf-drawer-meta{grid-template-columns:1fr 1fr;gap:10px} } .sf-drawer-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-bottom:22px} .sf-drawer-section{margin-bottom:24px} .sf-iconbtn{width:32px;height:32px;border:1px solid var(--gi-border-strong);background:#fff;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--gi-gray-700);transition:background var(--gi-transition),color var(--gi-transition)} .sf-iconbtn:hover:not([disabled]){background:var(--gi-black);color:#fff;border-color:var(--gi-black)} .sf-iconbtn[disabled]{opacity:.4;cursor:not-allowed} .sf-drawer-loading{padding:40px;text-align:center;color:var(--gi-gray-500)} /* ---------- PostMock : aperçus réseaux ---------- */ /* Classes pm-* migrées vers /assets/post-mock.css (refactor 2026-06-03 Phase 2.2 cleanup). Cf. ADR 2026-06-03-post-mock-shared-module.md. Les overrides scopés (.sf-shell .pm, [data-theme="dark"] .pm-*, .modal .sheet.pm-fullsheet, .pm-lightbox*, .sf-vcard .pm-grid) restent dans ce fichier (admin-only). */ /* ---------- Iconographie réseaux (chips) ---------- */ .sf-pf-row{display:inline-flex;gap:4px;align-items:center;flex-wrap:wrap;line-height:1} .sf-pf-mark{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-family:var(--gi-font-display);color:var(--gi-gray-700);line-height:1} .sf-pf-mark svg{width:var(--sz,18px);height:var(--sz,18px);display:block;flex-shrink:0} .sf-pf-mark .lbl{line-height:1} .sf-pf-row .sf-pf-mark{gap:0} /* Tailles spécifiques selon contexte */ .sf-drawer-meta .sf-pf-row{gap:6px} .sf-drawer-meta .sf-pf-mark svg{--sz:20px;width:20px;height:20px} /* ---------- Strip d'avertissement (approval en attente) ---------- */ .sf-warn-strip{border:1px solid var(--gi-warning);background:var(--gi-warning-bg);color:var(--gi-warning-text);border-left:4px solid var(--gi-warning);padding:10px 14px;margin-top:8px} .sf-info-strip{border:1px solid var(--gi-cyan);background:var(--gi-cyan-soft);color:var(--gi-gray-700);border-left:4px solid var(--gi-cyan);padding:10px 14px;margin-top:8px} /* Inbox 2 volets Messages (refonte messagerie 2026-07-09) */ .sf-ibx{display:flex;border:1px solid var(--gi-border);border-radius:14px;overflow:hidden;min-height:480px;background:var(--gi-surface,#fff)} .sf-ibx-list{flex:0 0 340px;display:flex;flex-direction:column;border-right:1px solid var(--gi-border);min-width:0} .sf-ibx-thread{flex:1 1 auto;display:flex;flex-direction:column;min-width:0} .sf-ibx-search{padding:12px;border-bottom:1px solid var(--gi-border)} .sf-ibx-search input{width:100%;border:1px solid var(--gi-border);border-radius:8px;padding:8px 10px;font:inherit;background:var(--gi-surface,#fff);color:inherit} .sf-ibx-chips{display:flex;gap:6px;padding:10px 12px;flex-wrap:wrap;border-bottom:1px solid var(--gi-border)} .sf-ibx-chip{border:1px solid var(--gi-border);background:none;border-radius:20px;padding:3px 11px;font-size:12px;cursor:pointer;color:var(--gi-gray-500)} .sf-ibx-chip.active{background:var(--gi-cyan);color:#fff;border-color:var(--gi-cyan)} .sf-ibx-rows{overflow-y:auto;flex:1 1 auto} .sf-ibx-row{display:flex;gap:10px;align-items:center;width:100%;text-align:left;border:0;border-bottom:1px solid var(--gi-border);background:none;padding:11px 12px;cursor:pointer;font:inherit} .sf-ibx-row:hover,.sf-ibx-row.active{background:var(--gi-gray-50)} .sf-ibx-row.unread .sf-ibx-title{font-weight:700} .sf-ibx-thumb{flex:0 0 auto;width:40px;height:40px;border-radius:8px;background-size:cover;background-position:center;background-color:var(--gi-gray-100)} .sf-ibx-thumb-empty,.sf-ibx-thumb-gen{display:flex;align-items:center;justify-content:center;color:var(--gi-gray-500);font-size:18px} .sf-ibx-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px} .sf-ibx-toprow{display:flex;justify-content:space-between;gap:8px;align-items:baseline} .sf-ibx-title{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sf-ibx-time{flex:0 0 auto;font-size:11px;color:var(--gi-gray-500)} .sf-ibx-snip{font-size:12px;color:var(--gi-gray-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sf-ibx-status{font-size:10.5px;color:var(--gi-cyan)} .sf-ibx-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--gi-cyan)} .sf-ibx-none{padding:20px;color:var(--gi-gray-500);font-size:13px;text-align:center} .sf-ibx-thead{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--gi-border);background:var(--gi-gray-50)} .sf-ibx-back{display:none;border:0;background:none;font-size:20px;cursor:pointer;color:inherit;padding:0 4px} .sf-ibx-hmeta{display:flex;flex-direction:column;min-width:0;flex:1 1 auto} .sf-ibx-htitle{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sf-ibx-hstatus{font-size:11.5px;color:var(--gi-gray-500)} .sf-ibx-feed{flex:1 1 auto;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:16px 14px} .sf-ibx-foot{display:flex;gap:8px;align-items:flex-end;padding:12px 14px;border-top:1px solid var(--gi-border)} .sf-ibx-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--gi-gray-500);font-size:13px} @media (max-width:820px){ .sf-ibx-list{flex-basis:100%;border-right:0} .sf-ibx-thread{display:none} .sf-ibx.is-thread-open .sf-ibx-list{display:none} .sf-ibx.is-thread-open .sf-ibx-thread{display:flex} .sf-ibx-back{display:block} } /* ---------- OAuth strip (boutons « Connecter via X ») ---------- */ .sf-oauth-strip{border:1px solid var(--gi-cyan);background:var(--gi-cyan-soft);padding:12px 14px;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center} .sf-oauth-strip .gi-btn{margin:0} .sf-oauth-strip > .muted:first-child{flex-basis:100%;color:var(--gi-cyan);font-family:var(--gi-font-display);text-transform:uppercase;letter-spacing:.08em;font-weight:600} .sf-oauth-strip > .muted:last-child{flex-basis:100%} /* ---------- État actuel (modale d'édition credential) ---------- */ .sf-state-box{border:1px solid var(--gi-border-strong);background:var(--gi-gray-50);border-left:4px solid var(--gi-cyan);padding:12px 14px;margin-bottom:14px} .sf-state-box .gi-badge.muted{background:#fff;color:var(--gi-gray-500);border-color:var(--gi-border)} /* ---------- Connexions réseaux (carte par plateforme) ---------- */ .sf-conn-card{border:1px solid var(--gi-border);padding:14px 16px;margin-bottom:10px;background:#fff;transition:border-color var(--gi-transition)} .sf-conn-card:hover{border-color:var(--gi-border-strong)} /* ---------- Bandeau d'aide (périmètre d'écran) ---------- */ .sf-help-banner{border:1px solid var(--gi-cyan);background:var(--gi-cyan-soft);border-left:4px solid var(--gi-cyan);padding:14px 16px;margin-bottom:18px;color:var(--gi-black)} /* ---------- Cloche : sections + variante warning ---------- */ .sf-bell-section{padding:8px 14px;background:var(--gi-gray-50);font-family:var(--gi-font-display);font-size:11px;font-weight:600;color:var(--gi-gray-500);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--gi-border);position:sticky;top:0} .sf-notif-warn{border-left:3px solid var(--gi-warning);background:var(--gi-warning-bg)} .sf-notif-warn b{color:var(--gi-warning-text)} /* ---------- Clés API (boîte de copie one-shot) ---------- */ .sf-keybox{display:flex;gap:10px;align-items:center;padding:14px 16px;background:var(--gi-black);color:#fff;border:1px solid var(--gi-black);margin-top:14px} .sf-keybox code{flex:1;font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:14px;font-weight:600;color:var(--gi-cyan);word-break:break-all;user-select:all} .sf-keybox .gi-btn{flex-shrink:0;background:#fff;color:var(--gi-black);border-color:#fff} .sf-keybox .gi-btn:hover{background:var(--gi-cyan);color:#fff;border-color:var(--gi-cyan)} /* ---------- Tableaux responsives ---------- */ .gi-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--gi-border);margin-bottom:16px} .gi-table-wrap > .gi-table{margin-bottom:0;border:0;min-width:560px} /* Kevin 2026-07-02 · en VUE LISTE, le dropdown kebab (.sf-rowmenu-pop) était clippé par l'overflow du wrap (overflow-x:auto force overflow-y:auto → coupe le menu qui descend sous la rangée). Quand un menu est ouvert, on rend le wrap non-clippant : le scroll horizontal ne sert qu'au repos, l'interaction menu est brève. */ .gi-table-wrap:has(.sf-rowmenu.open){overflow:visible} /* ---------- Bulk bar (publications) ---------- */ .sf-bulkbar{display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:12px;border:1px solid var(--gi-cyan);background:var(--gi-cyan-soft)} .sf-bulkbar .cnt{font-family:var(--gi-font-display);font-weight:700;color:var(--gi-cyan)} .sf-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px} .sf-toolbar .gi-field-input{min-width:240px} /* ---------- Cloche notifications ---------- */ .sf-bell{position:relative;cursor:pointer} .sf-bell .badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:var(--gi-cyan);color:#fff;font-size:10px;font-weight:700;display:none;align-items:center;justify-content:center;padding:0 4px} .sf-bell.has-unread .badge{display:flex} .sf-bell-pop{position:absolute;top:42px;right:0;width:340px;max-height:420px;overflow-y:auto;background:#fff;border:1px solid var(--gi-black);box-shadow:0 12px 32px rgba(0,0,0,.18);z-index:60;display:none} .sf-bell-pop.open{display:block} .sf-notif{padding:12px 14px;border-bottom:1px solid var(--gi-border);cursor:pointer;font-size:13px;color:var(--sf-text-primary,var(--gi-black))} .sf-notif:hover{background:var(--gi-gray-50)} .sf-notif b{color:var(--sf-text-primary,var(--gi-black))} .sf-notif .meta{font-size:11px;color:var(--gi-gray-500);margin-top:2px} /* Kevin 2026-06-06 · fix dark mode du popover notifications. Le background était codé en dur `#fff` (ligne sf-bell-pop ci-dessus), donc en mode sombre le titre blanc s'affichait sur fond blanc et devenait invisible. On utilise les semantic tokens `--sf-surface-elevated` (popover = un cran au-dessus de raised) + couleur texte primaire pour titres lisibles dans les 2 thèmes. */ [data-theme="dark"] .sf-bell-pop{ background:var(--sf-surface-elevated); border-color:var(--sf-border-strong); box-shadow:0 12px 32px rgba(0,0,0,.45); } [data-theme="dark"] .sf-bell-section{ background:var(--sf-surface-raised); color:var(--sf-text-muted); border-bottom-color:var(--sf-border); } [data-theme="dark"] .sf-notif{ border-bottom-color:var(--sf-border); color:var(--sf-text-primary); } [data-theme="dark"] .sf-notif:hover{background:var(--sf-surface-hover)} [data-theme="dark"] .sf-notif b{color:var(--sf-text-primary)} [data-theme="dark"] .sf-notif .meta{color:var(--sf-text-muted)} [data-theme="dark"] .sf-notif-warn{ background:var(--gi-warning-bg); border-left-color:var(--gi-warning); } [data-theme="dark"] .sf-notif-warn b{color:var(--gi-warning-text)} /* ---------- Calendrier (clic + drag) ---------- */ .cal .cell{cursor:pointer;transition:background var(--gi-transition)} .cal .cell.off{cursor:default} .cal .cell.drop-target{background:var(--gi-cyan-soft);outline:2px dashed var(--gi-cyan)} .cal .ev{cursor:grab;user-select:none} .cal .ev.dragging{opacity:.4} /* ---------- Modale a11y (overlay close) ---------- */ .modal{cursor:pointer} .modal .sheet{cursor:auto} /* ---------- Dashboard Perf Ads ---------- */ .sf-kpi-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;border:1px solid var(--gi-black);background:var(--gi-border);margin-bottom:16px} .sf-kpi{background:#fff;padding:18px 20px} .sf-kpi .lbl{font-family:var(--gi-font-body);font-size:12px;color:var(--gi-gray-500);text-transform:uppercase;letter-spacing:.06em;font-weight:600} .sf-kpi .val{font-family:var(--gi-font-display);font-size:26px;font-weight:700;color:var(--gi-black);font-variant-numeric:tabular-nums;margin-top:6px} .sf-ads-alerts{display:flex;flex-direction:column;gap:6px;margin-bottom:16px} .sf-alert{padding:10px 14px;border-left:4px solid var(--gi-border-strong);background:var(--gi-gray-50);font-size:13px} .sf-alert.sev-info{border-left-color:var(--gi-cyan);background:var(--gi-cyan-soft)} .sf-alert.sev-warning{border-left-color:var(--gi-warning);background:var(--gi-warning-bg);color:var(--gi-warning-text)} .sf-alert.sev-critical{border-left-color:var(--gi-danger);background:#fff5f5;color:#7a1a1a} .sf-pacing{display:inline-block;padding:3px 10px;border:1px solid var(--gi-border-strong);background:#fff;font-family:var(--gi-font-display);font-weight:600;font-size:12px;font-variant-numeric:tabular-nums} .sf-pacing.sev-info{background:var(--gi-cyan-soft);border-color:var(--gi-cyan);color:var(--gi-cyan)} .sf-pacing.sev-warning{background:var(--gi-warning-bg);border-color:var(--gi-warning);color:var(--gi-warning-text)} .sf-pacing.sev-critical{background:var(--gi-danger);border-color:var(--gi-danger);color:#fff} /* ---------- Composer riche ---------- */ .sf-pf-chips{display:flex;flex-wrap:wrap;gap:8px} .sf-pf-chip{display:inline-flex;align-items:center;padding:6px 14px;border:1px solid var(--gi-border-strong);background:#fff;font-family:var(--gi-font-display);font-size:13px;font-weight:600;color:var(--gi-gray-700);cursor:pointer;user-select:none;transition:background var(--gi-transition),color var(--gi-transition),border-color var(--gi-transition)} .sf-pf-chip:hover{background:var(--gi-gray-50)} .sf-pf-chip.active{background:var(--gi-black);color:#fff;border-color:var(--gi-black)} .sf-cnts{display:inline-flex;flex-wrap:wrap;gap:6px;margin-left:8px;vertical-align:middle} .sf-cnt{display:inline-flex;align-items:center;padding:2px 8px;border:1px solid var(--gi-border);background:#fff;font-family:var(--gi-font-mono,ui-monospace,monospace);font-size:11px;color:var(--gi-gray-600);font-variant-numeric:tabular-nums} .sf-cnt.warn{color:var(--gi-warning-text);border-color:var(--gi-warning);background:var(--gi-warning-bg)} .sf-cnt.bad{color:#fff;border-color:var(--gi-danger);background:var(--gi-danger)} .sf-prev{max-width:280px;max-height:200px;border:1px solid var(--gi-border);display:inline-block;vertical-align:middle;object-fit:cover} /* ---------- Boucle de feedback (détail post admin) ---------- */ .sf-sep{height:1px;background:var(--gi-border);margin:1.6rem 0 1.2rem} .sf-modif-banner{border:1px solid var(--gi-warning);background:var(--gi-warning-bg);color:var(--gi-warning-text);padding:14px 16px;margin:0 0 14px;border-left:4px solid var(--gi-warning)} .sf-thread{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto;padding:2px 4px} .sf-cm{border:1px solid var(--gi-border);padding:9px 12px;background:#fff} .sf-cm-client{border-left:3px solid var(--gi-cyan);background:var(--gi-cyan-soft)} .sf-cm-team{border-left:3px solid var(--gi-black);background:var(--gi-gray-50)} .sf-cm-head{display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:4px} .sf-cm-head b{font-family:var(--gi-font-display);font-weight:600} .sf-cm-body{font-size:13.5px;line-height:1.5;white-space:pre-wrap} /* Sprint délégation V1 (Kevin 2026-06-06) · section "Décisions de validation" du drawer BO. Liste chronologique des post_approvals avec badge "déléguée par X" si invitation_source=client_delegated. */ .sf-deleg-row{padding:10px 0;border-bottom:1px solid var(--gi-border);font-size:13px} .sf-deleg-row:last-child{border-bottom:0} .sf-deleg-badge{display:inline-block;margin-left:8px;padding:2px 8px;font-size:11px;font-weight:500;color:var(--gi-cyan,#0098dc);background:var(--gi-cyan-soft,rgba(0,152,220,.08));border-radius:10px;letter-spacing:.01em} .sf-deleg-comment{margin-top:6px;padding:8px 10px;background:var(--gi-gray-50,#f7f7f5);border-radius:6px;font-size:12.5px;line-height:1.5;color:var(--gi-gray-700,#4a4a4a)} /* Modif structurée V2 (Kevin 2026-06-04 V2.1) · rendu cards par bloc + thumbnail image */ .sf-modif-block{margin:0 0 10px;padding:10px 12px;background:var(--sf-surface-elevated,#f7f7f5);border:1px solid var(--sf-border,#e3e1da);border-radius:8px} .sf-modif-block:last-child{margin-bottom:0} .sf-modif-block-plain{background:transparent;border:0;padding:0} .sf-modif-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--sf-border,#e3e1da);font-family:var(--gi-font-display);font-weight:600;font-size:13px} .sf-modif-ic{font-size:14px} .sf-modif-row{display:flex;gap:10px;margin-bottom:4px;font-size:12.5px;line-height:1.5} .sf-modif-row:last-child{margin-bottom:0} .sf-modif-row-free{display:block} .sf-modif-key{flex:0 0 110px;color:var(--sf-text-muted,#7a7a75);font-weight:500} .sf-modif-val{flex:1;color:var(--sf-text,#1a1a1a);white-space:pre-wrap;word-break:break-word} .sf-modif-img{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px} .sf-modif-thumb{width:140px;height:100px;object-fit:cover;border-radius:6px;border:1px solid var(--sf-border,#e3e1da);cursor:zoom-in;transition:transform 150ms ease-out,box-shadow 150ms ease-out} .sf-modif-thumb:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.08)} @media (prefers-color-scheme: dark){ .sf-modif-block{background:rgba(255,255,255,0.04)} } /* ---------- Responsive (sidebar repliable) ---------- */ .sf-menu-btn{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:0;margin-right:14px} .sf-menu-btn svg{width:22px;height:22px} .sf-backdrop{display:none} @media(max-width:960px){ .sf-shell{grid-template-columns:1fr} .sf-sidebar{position:fixed;top:60px;bottom:0;left:0;width:260px;z-index:30;transform:translateX(-100%);transition:transform .22s var(--gi-ease);box-shadow:var(--shadow-md,0 6px 24px rgba(0,0,0,.12))} .sf-shell.nav-open .sf-sidebar{transform:none} .sf-backdrop{position:fixed;inset:60px 0 0 0;background:rgba(0,0,0,.45);z-index:20} .sf-shell.nav-open .sf-backdrop{display:block} .sf-menu-btn{display:inline-flex;align-items:center} .sf-main{padding:22px 16px} .sf-topbar{padding:0 16px} /* Brand context masqué sur mobile · prend trop de place dans la topbar étroite et casse la mise en page. L'utilisateur sait sur quelle marque il est via la sidebar / le titre de page (bug Kevin 2026-06-02). */ .sf-brand-context{display:none!important} } @media(max-width:560px){ .sf-topbar .right a span:not(.ic){display:none} .sf-cmd-grid{grid-template-columns:1fr} /* Notif popovers (.sf-bell-pop = bell topbar, .sf-notif-pop = side sheet) · plein viewport mobile pour ne plus sortir de l'écran (bug Kevin 2026-06-02). `position:fixed` ancré dans le viewport au lieu d'absolute (relatif au bouton) · largeur calc(100vw - marges) · ancré sous la topbar. La classe historique `.sf-bell-pop` est celle réellement utilisée par le frontend (#bell-pop). */ .sf-bell-pop, .sf-notif-pop{position:fixed!important;top:64px!important;right:8px!important;left:8px!important;width:auto!important;max-width:none!important;max-height:calc(100dvh - 80px)!important} .sf-notif-pop-list{max-height:calc(100dvh - 160px)!important} } /* ============================================================================ * COUCHE RAFFINEMENT (2026-05-27) · adoucit le DS GI pour l'usage long en admin. * Esprit GI préservé : noir/blanc/cyan, Outfit display, angles vifs sur les * éléments structurants (sidebar, topbar, modales). Souplesse sur les surfaces * de contenu (cards, inputs, badges) : canvas tinté, radius 2px discret, * bordures gris clair au lieu de noires, hiérarchie typo Outfit/Zalando claire. * ============================================================================ */ /* Lot 1 · Hiérarchie de surfaces (3 niveaux) + tokens étendus */ :root { --gi-canvas:#fafafa; /* canvas de contenu (sous les cards) */ --gi-canvas-soft:#f6f6f6; /* surface intermédiaire (toolbar, filtres) */ --gi-radius:2px; /* radius discret « Linear-grade » */ --gi-radius-pill:4px; /* badges et chips */ --gi-shadow-soft:0 1px 0 var(--gi-border), 0 1px 3px rgba(0,0,0,.03); --gi-shadow-hover:0 2px 8px rgba(0,0,0,.06); --gi-info:#0a66c2; --gi-info-bg:#e6f0fa; --gi-info-text:#053b73; } /* Canvas global du contenu (le shell noir/blanc reste structurant) */ .sf-main{background:var(--gi-canvas)} .sf-shell .sf-main #tabview, .sf-shell .sf-main #view{background:transparent} /* Lot 1+2 · Cards de contenu : bord gris doux + radius 2px + ombrage léger. * Le bord noir fort reste sur les éléments STRUCTURANTS (sidebar, topbar, modale, hero). */ .gi-card, .gi-table, .gi-table-wrap, .gi-kpi-grid, .gi-kpi, .sf-card-block, .sf-conn-card, .sf-state-box, .sf-an-filters, .sf-pub-popover, .sf-pub-active-pills, .sf-modif-banner, .sf-help-banner, .sf-warn-strip, .sf-oauth-strip, .sf-keybox, .sf-bell-pop, .sf-kpi-bar{ border-color:var(--gi-border); border-radius:var(--gi-radius); } .gi-card{box-shadow:var(--gi-shadow-soft)} .gi-card.card-hover:hover{box-shadow:var(--gi-shadow-hover);transform:translateY(-1px);transition:transform 180ms var(--gi-ease),box-shadow 180ms var(--gi-ease)} /* Inputs & boutons : radius doux. Boutons primary garde son noir plein. */ .gi-field-input, .gi-field-textarea, .gi-field-select, .gi-btn, .sf-rowbtn, .sf-mfchip, .sf-pf-chip, .sf-iconbtn, .gi-badge, .sf-pill, .sf-chip{ border-radius:var(--gi-radius-pill); } .gi-field-input, .gi-field-textarea, .gi-field-select{border-color:var(--gi-border-strong)} .gi-field-input:focus,.gi-field-textarea:focus,.gi-field-select:focus{outline:none;border-color:var(--gi-cyan);box-shadow:var(--gi-cyan-glow)} /* Tableaux : densité plus aérée pour l'usage long */ .gi-table th{padding:14px 14px;background:var(--gi-canvas-soft);border-bottom:1px solid var(--gi-border)} .gi-table td{padding:12px 14px;border-bottom:1px solid var(--gi-border)} .gi-table tr:last-child td{border-bottom:none} .gi-table tr:hover td{background:var(--gi-canvas-soft)} /* KPI grid : sépare les cellules par bord doux et ajoute respiration */ .gi-kpi-grid{background:var(--gi-border);gap:1px} .gi-kpi{background:#fff;padding:18px 20px} .gi-kpi .val{font-size:24px;line-height:1.1;margin-top:6px} .gi-kpi .lbl{font-size:11px;color:var(--gi-gray-500);font-weight:600;letter-spacing:.08em;text-transform:uppercase} /* sf-kpi-bar : même esprit */ .sf-kpi-bar{background:var(--gi-border)} .sf-kpi{background:#fff;padding:18px 22px} /* Lot 2 · Hiérarchie typo stricte : body en Zalando Sans, display réservé aux titres/chiffres/labels */ body,.gi-body,.gi-table td,.pm-text,.sf-cm-body,.sf-drawer-body p,.muted{font-family:var(--gi-font-body)} .gi-h1,.gi-h2,.gi-h3,.gi-h4,.gi-eyebrow,.gi-card-title,.gi-section-title, .gi-kpi .val,.sf-kpi .val,.gi-badge,.gi-btn,.sf-rowbtn,.sf-chip,.sf-mfchip, .sf-pf-chip,.sf-pill,.sf-pf-mark{font-family:var(--gi-font-display)} /* Lot 3 · Couleurs sémantiques douces (bandeaux et badges) */ .gi-badge.success{background:var(--gi-success-bg);color:var(--gi-success);border-color:var(--gi-success-bg)} .gi-badge.warning{background:var(--gi-warning-bg);color:var(--gi-warning-text);border-color:var(--gi-warning-bg)} .gi-badge.danger{background:var(--gi-danger-bg);color:var(--gi-danger-text);border-color:var(--gi-danger-bg)} .gi-badge.info{background:var(--gi-info-bg);color:var(--gi-info-text);border-color:var(--gi-info-bg)} .gi-badge.muted{background:var(--gi-gray-50);color:var(--gi-gray-500);border-color:var(--gi-gray-100)} /* Bandeaux : tonalités douces, lecture facile (utilisé par help/warn/modif/oauth) */ .sf-help-banner{background:var(--gi-info-bg);color:var(--gi-info-text);border-color:var(--gi-info-bg);border-left:3px solid var(--gi-info)} .sf-warn-strip{border-color:var(--gi-warning-bg);border-left:3px solid var(--gi-warning)} .sf-modif-banner{border-color:var(--gi-warning-bg);border-left:3px solid var(--gi-warning);background:var(--gi-warning-bg)} .sf-oauth-strip{border-color:var(--gi-cyan-soft);background:rgba(0,159,227,0.05);border-left:3px solid var(--gi-cyan)} .sf-state-box{border-color:var(--gi-border-strong);background:var(--gi-canvas-soft);border-left:3px solid var(--gi-cyan)} /* Pills & chips : un peu plus aériens */ .sf-mfchip{padding:6px 14px;font-size:12.5px} .sf-mfchip:hover{background:var(--gi-canvas-soft);border-color:var(--gi-gray-300)} .sf-pill{font-weight:600} /* Drawer : padding plus généreux pour la respiration */ .sf-drawer-panel{box-shadow:-12px 0 36px rgba(0,0,0,.12);border-left:1px solid var(--gi-border-strong)} .sf-drawer-body{padding:26px 30px} /* Sidebar et topbar : RESTE noir/blanc/structure forte (préserve l'âme GI éditoriale) */ .sf-sidebar,.sf-topbar{border-radius:0} .sf-sidebar{box-shadow:1px 0 0 var(--gi-border)} .sf-nav-item.active{background:rgba(0,159,227,0.06)} /* Modale (overlay) : garde un look print pour les actions importantes */ .modal .sheet{border-radius:var(--gi-radius);border-color:var(--gi-border-strong);box-shadow:0 30px 80px rgba(0,0,0,.18)} /* Filtres riches : toolbar plus claire visuellement */ .sf-an-filters{background:var(--gi-canvas-soft);border-color:var(--gi-border)} .sf-pub-popover{background:#fff;border-color:var(--gi-border);box-shadow:0 12px 32px rgba(0,0,0,.06)} /* Focus visible accessible (a11y) sur tous les éléments cliquables */ button:focus-visible,a:focus-visible,[role="button"]:focus-visible,.sf-mfchip:focus-visible,.sf-chip:focus-visible{outline:2px solid var(--gi-cyan);outline-offset:2px} /* Liens contextuels : underline subtil au hover plutôt qu'aggressif */ a.accent{color:var(--gi-cyan);text-decoration:none} a.accent:hover{text-decoration:underline;text-underline-offset:3px} /* ============================================================================ * COUCHE RAFFINEMENT v3 (2026-05-27) · pousser l'âme GI plus loin. * Signature : cyan period «.», filets cyan, italic Zalando sur muted, multi-shadow * subtle, micro-anims, skeleton loaders, pulses contextuels, empty states soignés. * ============================================================================ */ /* Type scale rigoureux + tabular-nums sur tous les chiffres */ :root{ --gi-step-1:11px; --gi-step-2:12px; --gi-step-3:13.5px; --gi-step-4:15px; --gi-step-5:17px; --gi-step-6:20px; --gi-step-7:24px; --gi-step-8:30px; --gi-section-gap:32px; --gi-block-gap:20px; --gi-elev-1:0 1px 2px rgba(0,0,0,.03), 0 1px 1px rgba(0,0,0,.02); --gi-elev-2:0 2px 4px rgba(0,0,0,.04), 0 4px 8px rgba(0,0,0,.03); --gi-elev-3:0 8px 24px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04); } .tnum,.gi-kpi .val,.sf-kpi .val,td.tnum,.gi-table .tnum,.sf-pacing, .sf-cnt,.gi-eyebrow,.muted .tnum{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'} /* Italic Zalando sur muted/descriptions · saveur de marque */ .gi-empty-desc,.gi-card-body .muted:not(.tnum),.sf-drawer-meta .muted, .sf-cm-body em,.pm-meta,.gi-section-head .muted{font-style:italic} /* Cards multi-shadow subtle + lift au hover */ .gi-card,.sf-card-block,.sf-conn-card,.sf-state-box{box-shadow:var(--gi-elev-1);transition:box-shadow 180ms var(--gi-ease),transform 180ms var(--gi-ease),border-color 180ms var(--gi-ease)} .gi-card:hover,.sf-card-block:hover,.sf-conn-card:hover{box-shadow:var(--gi-elev-2);border-color:var(--gi-border-strong)} .gi-card.card-hover:hover{transform:translateY(-2px);box-shadow:var(--gi-elev-3)} .sf-brand-item{transition:background 180ms var(--gi-ease),padding-left 180ms var(--gi-ease)} .sf-brand-item:hover{background:var(--gi-canvas-soft);padding-left:26px} /* Sidebar nav-item · filet cyan slide-in au hover */ .sf-nav-item{position:relative;transition:background 180ms var(--gi-ease),color 180ms var(--gi-ease),padding-left 180ms var(--gi-ease)} .sf-nav-item::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--gi-cyan);transform:scaleY(0);transform-origin:center;transition:transform 220ms var(--gi-ease)} .sf-nav-item:hover::before,.sf-nav-item.active::before{transform:scaleY(1)} .sf-nav-item:hover{padding-left:26px} /* Topbar · fine ligne cyan en bas (signature subtile) */ .sf-topbar{box-shadow:inset 0 -1px 0 rgba(0,159,227,.18)} /* Boutons · primary avec glow cyan au hover, press effect */ .gi-btn{transition:transform 120ms var(--gi-ease),box-shadow 180ms var(--gi-ease),background 180ms var(--gi-ease),color 180ms var(--gi-ease),border-color 180ms var(--gi-ease)} .gi-btn:active{transform:scale(0.97)} .gi-btn-primary:hover{box-shadow:0 4px 12px rgba(0,159,227,.28),inset 0 0 0 1px rgba(255,255,255,.1)} /* sf-rowbtn · refonte 2026-06-02 · base solide + variants tonals Petit bouton d'action rapide utilisé dans les tables, drawers, listes, médias, etc. */ .sf-rowbtn{ display:inline-flex;align-items:center;justify-content:center;gap:4px; padding:5px 11px;font-family:var(--gi-font-body);font-size:12px;font-weight:500; line-height:1.2;background:transparent;color:var(--gi-gray-700); border:1px solid var(--gi-border);border-radius:6px;cursor:pointer; transition:transform 120ms var(--gi-ease),background 160ms var(--gi-ease),color 160ms var(--gi-ease),border-color 160ms var(--gi-ease) } .sf-rowbtn:hover:not([disabled]){background:var(--gi-gray-100);border-color:var(--gi-border-strong);color:var(--gi-black)} .sf-rowbtn:active{transform:scale(0.96)} .sf-rowbtn[disabled]{opacity:.4;cursor:not-allowed} .sf-rowbtn.cy{color:var(--gi-cyan);border-color:rgba(0,159,227,.4)} .sf-rowbtn.cy:hover:not([disabled]){background:var(--gi-cyan);color:#fff;border-color:var(--gi-cyan)} .sf-rowbtn.danger{color:var(--gi-danger);border-color:rgba(220,38,38,.35)} .sf-rowbtn.danger:hover:not([disabled]){background:var(--gi-danger);color:#fff;border-color:var(--gi-danger)} /* Filets cyan signatures sur les titres de section (rappel login) */ .gi-eyebrow.with-filet,.sf-section-eyebrow{display:inline-flex;align-items:center;gap:10px} .gi-eyebrow.with-filet::before,.gi-eyebrow.with-filet::after, .sf-section-eyebrow::before,.sf-section-eyebrow::after{content:'';display:block;width:24px;height:1px;background:var(--gi-cyan)} /* Cyan period automatique sur les h2/h3 de section (signature GI) */ .gi-h2.with-dot::after,.gi-h3.with-dot::after,.sf-section-title::after{content:'.';color:var(--gi-cyan);font-weight:900;margin-left:-1px} /* Empty states avec personnalité */ .gi-empty{padding:42px 28px;background:#fff;border:1px solid var(--gi-border);border-radius:var(--gi-radius);text-align:center;box-shadow:var(--gi-elev-1)} .gi-empty .sf-empty-ic,.gi-empty .ic.large{width:42px;height:42px;color:var(--gi-cyan);margin:0 auto 14px;opacity:.55} .gi-empty .sf-empty-ic svg{width:100%;height:100%} .gi-empty-title{font-family:var(--gi-font-display);font-size:var(--gi-step-5);font-weight:600;color:#000;margin-bottom:6px;letter-spacing:-0.01em} .gi-empty-desc{font-family:var(--gi-font-body);font-size:var(--gi-step-3);color:var(--gi-gray-500);max-width:420px;margin:0 auto 14px;font-style:italic;line-height:1.55} .gi-empty .gi-btn{margin-top:6px} /* Skeleton loaders · usage :
*/ @keyframes sf-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}} .sf-skel{background:linear-gradient(90deg,var(--gi-gray-50) 0%,var(--gi-canvas) 50%,var(--gi-gray-50) 100%);background-size:200% 100%;animation:sf-shimmer 1.4s infinite linear;border-radius:var(--gi-radius);display:block} .sf-skel-line{height:12px;margin:8px 0} .sf-skel-line.lg{height:18px}.sf-skel-line.sm{height:9px}.sf-skel-line.w50{width:50%}.sf-skel-line.w70{width:70%}.sf-skel-line.w30{width:30%} .sf-skel-card{height:120px;margin-bottom:14px} .sf-skel-circle{width:36px;height:36px;border-radius:50%} .sf-skel-row{display:flex;gap:12px;align-items:center;padding:10px 0} .sf-skel-row .sf-skel-line{flex:1;margin:0} /* Pulse cyan sur badges actionnables (« À valider », nouvelle notif) */ @keyframes sf-pulse-cyan{0%{box-shadow:0 0 0 0 rgba(0,159,227,.45)}70%{box-shadow:0 0 0 8px rgba(0,159,227,0)}100%{box-shadow:0 0 0 0 rgba(0,159,227,0)}} .gi-badge.actionable,.gi-badge.warning.actionable{animation:sf-pulse-cyan 2.2s infinite;border-color:var(--gi-cyan)} /* Cloche unread : pulse léger sur le badge rouge */ @keyframes sf-pulse-dot{0%{box-shadow:0 0 0 0 rgba(0,159,227,.5)}70%{box-shadow:0 0 0 6px rgba(0,159,227,0)}100%{box-shadow:0 0 0 0 rgba(0,159,227,0)}} .sf-bell.has-unread .badge{animation:sf-pulse-dot 1.8s infinite} /* Avatars stylisés · .pm-avatar box-shadow migré vers /assets/post-mock.css */ /* Drawer head · filet cyan décoratif sous le titre */ .sf-drawer-head{border-bottom:1px solid var(--gi-border);padding-bottom:18px;position:relative} .sf-drawer-head::after{content:'';position:absolute;bottom:-1px;left:0;width:48px;height:2px;background:var(--gi-cyan)} /* Toast · slide + accent cyan */ .toast{transform:translateX(-50%) translateY(100%);transition:transform 320ms var(--sf-ease-spring, cubic-bezier(0.32,0.72,0,1)),opacity 220ms;opacity:0} .toast.show{transform:translateX(-50%) translateY(0);opacity:1} .toast{border-left:3px solid var(--gi-cyan);border-radius:var(--gi-radius);box-shadow:var(--gi-elev-3);background:#000;color:#fff;font-family:var(--gi-font-display);font-size:13px;font-weight:500;letter-spacing:0.01em} /* Toast Progress · refonte Phase 6 (Kevin 2026-06-03) · opération longue avec spinner */ .toast-progress, .toast-success, .toast-error { display: inline-flex; align-items: center; gap: 10px; } .toast-progress { border-left-color: var(--gi-cyan); } .toast-success { border-left-color: #34d27b; } .toast-error { border-left-color: var(--gi-danger); } .t-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: t-spin 700ms linear infinite; } .t-check { color: #34d27b; font-weight: 700; font-size: 15px; } .t-cross { color: var(--gi-danger); font-weight: 700; font-size: 15px; } @keyframes t-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .t-spin { animation-duration: 2s; } } /* Section spacing rigoureux : tabs panel + cards */ #tabview{padding-top:8px} .sf-card-block{padding:22px 24px;margin-top:var(--gi-block-gap)} .gi-section-head{margin-bottom:var(--gi-block-gap)} /* Hover des lignes de table : background tinté + flèche subtile */ .gi-table tbody tr{transition:background 140ms var(--gi-ease)} .gi-table tbody tr:hover{background:rgba(0,159,227,.025)} .gi-table tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--gi-cyan)} /* Chips actifs : subtle shadow inset */ .sf-mfchip.active{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(0,0,0,.18)} /* KPI cards : delta plus visible */ .sf-delta-up{box-shadow:inset 0 0 0 1px rgba(15,125,62,.18)} .sf-delta-down{box-shadow:inset 0 0 0 1px rgba(163,42,42,.18)} /* Title typography : letter-spacing tighter pour le display */ .gi-h1,.gi-h2,.sf-section-title{letter-spacing:-0.015em} .gi-h3,.gi-h4{letter-spacing:-0.01em} /* Wordmark : cyan dot pulse subtil */ @keyframes sf-blink{0%,100%{opacity:1}50%{opacity:.4}} .gi-wordmark .dot{animation:sf-blink 2.6s ease-in-out infinite} /* Drawer-iconbtn cyan accent au focus */ .sf-iconbtn:focus-visible{outline-offset:0;border-color:var(--gi-cyan);color:var(--gi-cyan)} /* Cards de marque (Command center) : un cyan accent latéral au hover */ .sf-cmd-card{position:relative;transition:background 180ms var(--gi-ease),box-shadow 180ms var(--gi-ease)} .sf-cmd-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gi-cyan);transform:scaleY(0);transform-origin:bottom;transition:transform 220ms var(--gi-ease)} .sf-cmd-card:hover::before{transform:scaleY(1)} .sf-cmd-card:hover{box-shadow:var(--gi-elev-2)} /* sf-pf-chip et chips actifs : transition douce */ .sf-pf-chip{transition:background 160ms var(--gi-ease),color 160ms var(--gi-ease),border-color 160ms var(--gi-ease),transform 120ms var(--gi-ease)} .sf-pf-chip:active{transform:scale(0.97)} /* Anim entrée des cards / blocs (fadeInUp subtil) */ @keyframes sf-fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} #tabview > *,.sf-card-block{animation:sf-fadein 280ms var(--gi-ease) both} .sf-card-block:nth-child(2){animation-delay:30ms} .sf-card-block:nth-child(3){animation-delay:60ms} .sf-card-block:nth-child(4){animation-delay:90ms} .sf-card-block:nth-child(5){animation-delay:120ms} /* ============================================================================ * COUCHE v4 (2026-05-27) · wow effects et productivité quotidienne. * Cmd+K palette · pattern signature · counters animés · loading bar · tooltips * raffinés · brand stripe contextuel · cyan period universel. * ============================================================================ */ /* Pattern signature subtil sur le canvas · dots cyan très espacés (signe GI éditorial) */ .sf-main{ background-color:var(--gi-canvas); background-image: radial-gradient(circle at 1px 1px, rgba(0,159,227,.06) 1px, transparent 0), radial-gradient(circle at 1px 1px, rgba(0,0,0,.025) 1px, transparent 0); background-size:32px 32px, 8px 8px; background-position:0 0, 16px 16px; } /* Loading bar top (Vercel/Linear-style) */ .sf-loading-bar{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;pointer-events:none;background:transparent;overflow:hidden} .sf-loading-bar::before{content:'';display:block;height:100%;background:linear-gradient(90deg,transparent,var(--gi-cyan),var(--gi-cyan-active),var(--gi-cyan),transparent);width:30%;animation:sf-loading 1.2s ease-in-out infinite;box-shadow:0 0 8px rgba(0,159,227,.4)} @keyframes sf-loading{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}} /* Tooltips raffinés (data-tip="...") */ [data-tip]{position:relative} [data-tip]::before,[data-tip]::after{position:absolute;left:50%;transform:translateX(-50%) translateY(4px);opacity:0;pointer-events:none;transition:opacity 180ms var(--gi-ease),transform 180ms var(--gi-ease);white-space:nowrap} [data-tip]::before{content:attr(data-tip);bottom:calc(100% + 8px);background:#000;color:#fff;padding:6px 10px;font-family:var(--gi-font-display);font-size:11px;font-weight:500;letter-spacing:.02em;border-radius:var(--gi-radius);border-left:2px solid var(--gi-cyan);box-shadow:var(--gi-elev-3);z-index:100} [data-tip]::after{content:'';bottom:calc(100% + 2px);width:0;height:0;border:5px solid transparent;border-top-color:#000} [data-tip]:hover::before,[data-tip]:hover::after{opacity:1;transform:translateX(-50%) translateY(0)} [data-tip][data-tip-pos="below"]::before{bottom:auto;top:calc(100% + 8px)} [data-tip][data-tip-pos="below"]::after{bottom:auto;top:calc(100% + 2px);border-top-color:transparent;border-bottom-color:#000} /* Stripe couleur brand sur le workspace marque (top de la section head) */ .gi-section-head[data-brand-color]{position:relative;padding-top:18px} .gi-section-head[data-brand-color]::before{content:'';position:absolute;top:0;left:0;width:64px;height:3px;background:var(--brand-color, var(--gi-cyan))} /* Topbar : brand context (affiche le nom de la marque active à droite du wordmark) */ .sf-brand-context{display:none;align-items:center;gap:10px;margin-left:18px;padding-left:18px;border-left:1px solid rgba(255,255,255,.18);font-family:var(--gi-font-display);font-size:13px;font-weight:500;color:#fff} .sf-brand-context.on{display:inline-flex;animation:sf-fadein 240ms var(--gi-ease)} .sf-brand-context .ctx-dot{width:8px;height:8px;border-radius:50%;background:var(--brand-color,var(--gi-cyan));box-shadow:0 0 0 1px rgba(255,255,255,.35), 0 0 6px var(--brand-color,var(--gi-cyan))} .sf-brand-context .ctx-name{letter-spacing:-0.01em} /* Cyan period universel : tout titre `.gi-h2`, `.gi-h3`, `.gi-section-title` se voit ajouter un point cyan SI .with-dot (laissé opt-in pour pas casser les titres déjà finis avec span.accent) */ .gi-h2.with-dot::after,.gi-h3.with-dot::after,.sf-section-title.with-dot::after{content:'.';color:var(--gi-cyan);font-weight:900} /* Stylized ordered numerals · utilisé dans empty states, onboarding, listes guides */ .sf-numlist{counter-reset:sf-li;padding:0;list-style:none;margin:18px 0} .sf-numlist li{counter-increment:sf-li;position:relative;padding:6px 0 6px 56px;min-height:38px;display:flex;flex-direction:column;justify-content:center} .sf-numlist li::before{content:counter(sf-li,decimal-leading-zero);position:absolute;left:0;top:50%;transform:translateY(-50%);font-family:var(--gi-font-display);font-size:24px;font-weight:600;font-style:italic;color:var(--gi-cyan);letter-spacing:-0.02em;line-height:1} .sf-numlist li b{font-family:var(--gi-font-display);font-weight:600;color:#000;font-size:14px;letter-spacing:-0.01em} .sf-numlist li span{font-family:var(--gi-font-body);font-style:italic;color:var(--gi-gray-500);font-size:13px;line-height:1.5} /* KPI values : compteurs animés (.gi-kpi .val.animated → opacity transition) */ .gi-kpi .val{transition:color 200ms var(--gi-ease)} /* Command palette (Cmd+K) */ .sf-cmdpal{position:fixed;inset:0;z-index:100;display:none;align-items:flex-start;justify-content:center;padding-top:14vh} .sf-cmdpal.open{display:flex;animation:sf-fadein 180ms var(--gi-ease)} /* L'animation principale est sur le panel (slide depuis le haut + fade) pour un effet plus naturel · le wrapper fullscreen reste lui en fade simple. */ .sf-cmdpal.open .sf-cmdpal-panel { animation: sf-cmdpal-enter 280ms var(--sf-ease-spring, cubic-bezier(0.32,0.72,0,1)); } @keyframes sf-cmdpal-enter { from { opacity: 0; transform: translateY(-14px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .sf-cmdpal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px)} /* Refonte 2026-06-01 · semantic tokens partout pour suivre auto light/dark. La cmdpal est attachée à body (PAS .sf-shell) donc tout fonctionne via :root tokens. */ .sf-cmdpal-panel{position:relative;width:min(640px,92vw);background:var(--sf-surface-elevated);color:var(--sf-text-primary);border:1px solid var(--sf-border);border-radius:var(--gi-radius);box-shadow:0 32px 96px rgba(0,0,0,.32);overflow:hidden} .sf-cmdpal-input{width:100%;padding:18px 22px;border:none;outline:none;font-family:var(--gi-font-display);font-size:17px;font-weight:500;color:var(--sf-text-primary);border-bottom:1px solid var(--sf-border);background:var(--sf-surface-elevated)} .sf-cmdpal-input::placeholder{color:var(--sf-text-muted)} .sf-cmdpal-results{max-height:50vh;overflow-y:auto;padding:6px 0} .sf-cmdpal-group{padding:8px 0} .sf-cmdpal-group-lbl{padding:6px 22px 4px;font-family:var(--gi-font-display);font-size:10px;font-weight:600;color:var(--sf-text-muted);text-transform:uppercase;letter-spacing:.1em} .sf-cmdpal-item{padding:11px 22px;display:flex;align-items:center;gap:12px;cursor:pointer;font-family:var(--gi-font-body);font-size:14px;color:var(--sf-text-primary);transition:background 100ms var(--gi-ease)} .sf-cmdpal-item .ic{width:16px;height:16px;color:var(--sf-text-muted);flex-shrink:0} .sf-cmdpal-item .sub{font-size:12px;color:var(--sf-text-muted);margin-left:auto;font-family:var(--gi-font-display)} .sf-cmdpal-item:hover,.sf-cmdpal-item.selected{background:var(--sf-accent-soft);color:var(--sf-accent)} .sf-cmdpal-item:hover .ic,.sf-cmdpal-item.selected .ic{color:var(--sf-accent)} .sf-cmdpal-footer{padding:9px 22px;border-top:1px solid var(--sf-border);background:var(--sf-surface-raised);display:flex;justify-content:space-between;align-items:center;font-family:var(--gi-font-display);font-size:11px;color:var(--sf-text-muted);letter-spacing:.03em} .sf-cmdpal-footer kbd{display:inline-block;padding:1px 6px;border:1px solid var(--sf-border);border-radius:3px;background:var(--sf-surface-sunken);font-family:var(--gi-font-display);font-size:10px;font-weight:600;color:var(--sf-text-secondary);margin:0 3px} .sf-cmdpal-empty{padding:30px 22px;text-align:center;color:var(--sf-text-muted);font-size:13px;font-style:italic} /* Hint kbd Cmd+K dans le topbar (subtil) */ .sf-cmdpal-hint{display:none;align-items:center;gap:5px;margin-right:14px;padding:6px 10px 6px 9px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);border-radius:6px;font-family:var(--gi-font-display);font-size:11px;color:rgba(255,255,255,.85);cursor:pointer;transition:background 160ms var(--gi-ease),border-color 160ms var(--gi-ease),color 160ms var(--gi-ease)} .sf-cmdpal-hint:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.32)} .sf-cmdpal-hint .ic{width:13px;height:13px;color:var(--gi-cyan);opacity:.85;margin-right:2px} @media(min-width:900px){.sf-cmdpal-hint{display:inline-flex}} .sf-cmdpal-hint kbd{font-family:var(--gi-font-display);background:rgba(255,255,255,.14);padding:1px 5px;min-width:14px;text-align:center;border-radius:3px;font-size:11px;font-weight:600;color:#fff;letter-spacing:.02em} /* PostMock · Carrousel · migré vers /assets/post-mock.css (refactor 2026-06-03 Phase 2.2) */ /* ---------- Builder Rapports : templates + widget chips ---------- */ .sf-tplgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:6px} .sf-tplcard{border:1px solid var(--gi-border);padding:12px 14px;cursor:pointer;background:#fff;transition:border-color 160ms var(--gi-ease),box-shadow 160ms var(--gi-ease);border-radius:var(--gi-radius);display:flex;flex-direction:column;gap:4px} .sf-tplcard b{font-family:var(--gi-font-display);font-size:13px;font-weight:600} .sf-tplcard span{font-family:var(--gi-font-body);font-size:11px;color:var(--gi-gray-500);font-style:italic} .sf-tplcard:hover{border-color:var(--gi-border-strong);box-shadow:var(--gi-elev-1)} .sf-tplcard.active{border-color:var(--gi-cyan);box-shadow:0 0 0 1px var(--gi-cyan), var(--gi-elev-2);background:var(--gi-cyan-soft)} .sf-wgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px} .sf-wchip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--gi-border-strong);background:#fff;cursor:pointer;border-radius:var(--gi-radius-pill);font-family:var(--gi-font-display);font-size:12.5px;transition:background 160ms var(--gi-ease),border-color 160ms var(--gi-ease)} .sf-wchip:hover{background:var(--gi-canvas-soft)} .sf-wchip.active{background:var(--gi-black);color:#fff;border-color:var(--gi-black)} .sf-wchip input{cursor:pointer;accent-color:var(--gi-cyan)} /* ---------- Composer 2 colonnes (form + live preview) ---------- */ .modal .sheet.wide{width:min(96vw,1080px);max-width:1080px} .sf-composer{display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start} .sf-composer-form{min-width:0} .sf-composer-preview{position:sticky;top:0;background:var(--gi-canvas);border:1px solid var(--gi-border);border-radius:var(--gi-radius);padding:16px;align-self:start} .sf-prev-tabs{display:flex;gap:6px;margin:8px 0 12px;flex-wrap:wrap} .sf-prevtab{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--gi-border);border-radius:var(--gi-radius);cursor:pointer;background:#fff;transition:border-color 160ms var(--gi-ease),box-shadow 160ms var(--gi-ease)} .sf-prevtab svg{width:16px;height:16px} .sf-prevtab.active{border-color:var(--gi-cyan);box-shadow:0 0 0 1px var(--gi-cyan)} .sf-live-preview .pm{max-width:100%} .sf-composer-footer{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--gi-border)} /* Best practices list */ .sf-bp-list{display:flex;flex-direction:column;gap:6px} .sf-bp{font-size:12px;padding:6px 10px;border-radius:var(--gi-radius);line-height:1.4;border-left:3px solid var(--gi-border-strong)} .sf-bp-ok{background:var(--gi-success-bg);color:var(--gi-success);border-left-color:var(--gi-success)} .sf-bp-warn{background:var(--gi-warning-bg);color:var(--gi-warning-text);border-left-color:var(--gi-warning)} .sf-bp-bad{background:var(--gi-danger-bg);color:var(--gi-danger-text);border-left-color:var(--gi-danger)} .sf-bp-info{background:var(--gi-info-bg);color:var(--gi-info-text);border-left-color:var(--gi-info)} /* Emoji bar */ .sf-emoji-bar{display:flex;flex-wrap:wrap;gap:2px;margin-bottom:6px} .sf-emoji{border:none;background:transparent;font-size:17px;line-height:1;padding:3px 5px;cursor:pointer;border-radius:var(--gi-radius);transition:background 120ms var(--gi-ease)} .sf-emoji:hover{background:var(--gi-canvas-soft)} /* Draft banner */ .sf-draft-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;margin-bottom:14px;background:var(--gi-cyan-soft);border:1px solid var(--gi-cyan);border-radius:var(--gi-radius);font-size:13px} /* Responsive : passe en 1 colonne sous 880px */ @media(max-width:880px){ .sf-composer{grid-template-columns:1fr} .sf-composer-preview{position:static;order:-1} } /* Carte Brief GI (Paramètres → Stratégie) */ .sf-brief-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px} .sf-brief-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:var(--gi-canvas-soft);border:1px solid var(--gi-border-strong);border-radius:var(--gi-radius-pill);font-family:var(--gi-font-display);font-size:12px;font-weight:600;color:var(--gi-black)} .sf-brief-chip b{color:var(--gi-cyan);font-weight:700} .sf-brief-ctx{margin-top:16px;padding-top:14px;border-top:1px solid var(--gi-border);display:flex;flex-direction:column;gap:12px} .sf-brief-ctx p{font-size:13px;line-height:1.5;margin:4px 0 0;color:var(--gi-black)} /* Aperçu rapport · modale large + iframe */ .sheet.preview{width:94vw;max-width:1400px;height:92vh;max-height:none;padding:0;display:flex;flex-direction:column;overflow:hidden} .sf-prev-head{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid var(--gi-border);flex-shrink:0} .sf-prev-iframe{flex:1;width:100%;border:none;background:#f7f7f8;min-height:0} /* Analytics v3 : sections narratives, couverture piliers, composition engagement, funnel, démographie */ .sf-an-section{margin-top:28px;padding-top:6px} .sf-an-section-h{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--gi-border)} .sf-an-section-num{display:inline-block;width:4px;height:18px;background:var(--gi-cyan);border-radius:2px} /* Social Ads · grille 2 colonnes (Résultats & audience | Contenu & diffusion) */ .sf-ads-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gi-block-gap,18px);align-items:start;margin-top:var(--gi-block-gap,18px)} .sf-ads-grid>.sf-card-block{margin-top:0} .sf-ads-grid>div{min-width:0} .sf-ads-col-h{font-family:var(--gi-font-display);font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--gi-gray-700);text-transform:uppercase;padding-bottom:8px;border-bottom:1px solid var(--gi-border);margin:0 0 4px} /* dans une carte, la 1re rubrique ne double pas l'espace sous l'en-tête de colonne */ .sf-ads-col-h + .gi-eyebrow{margin-top:6px!important} @media (max-width:900px){.sf-ads-grid{grid-template-columns:1fr;gap:0}} /* Galerie de créatifs Ads · grille de vignettes (clic → aperçu post-mock) */ .sf-cr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:4px} .sf-cr-grid>.sf-card-block{margin-top:0;animation:none} .sf-cr-mini{transition:box-shadow 180ms var(--gi-ease),transform 180ms var(--gi-ease),border-color 180ms var(--gi-ease)} .sf-cr-mini:hover{transform:translateY(-2px)} .sf-cr-camp + .sf-cr-camp{margin-top:24px;padding-top:20px;border-top:1px solid var(--gi-border)} .sf-cr-mockhost{max-width:500px;margin:0 auto} /* Couverture piliers · barres réel vs cible Brief (track + tgt en transparence + real) */ .sf-cov-list{display:flex;flex-direction:column;gap:8px} .sf-cov-row{display:grid;grid-template-columns:minmax(160px,28%) 1fr minmax(170px,auto);align-items:center;gap:12px;font-size:13px} .sf-cov-lbl{font-family:var(--gi-font-display);font-weight:500;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sf-cov-track{position:relative;height:14px;background:var(--gi-gray-50);border:1px solid var(--gi-border);border-radius:99px;overflow:hidden} .sf-cov-tgt{position:absolute;left:0;top:0;bottom:0;background:repeating-linear-gradient(135deg,var(--gi-gray-200) 0,var(--gi-gray-200) 4px,transparent 4px,transparent 8px);border-right:2px dashed var(--gi-gray-500)} .sf-cov-real{position:absolute;left:0;top:0;bottom:0;background:var(--gi-cyan);transition:width 240ms var(--gi-ease);border-radius:99px 0 0 99px} .sf-cov-real.success{background:var(--gi-success)} .sf-cov-real.warning{background:var(--gi-warning)} .sf-cov-real.danger{background:var(--gi-danger)} .sf-cov-val{font-family:var(--gi-font-display);font-size:12.5px;white-space:nowrap;text-align:right} /* Mobile · 2 lignes (label + val sur 1ère ligne, track full-width en dessous). Avant : 3 colonnes fixes 160+170+gap = 350px → débordait à droite (badge -35 pts hors écran). Maintenant : label flex à gauche, val ancrée à droite, track sur toute la largeur sous (bug Kevin 2026-06-02). */ @media (max-width:640px){ .sf-cov-row{grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:4px 10px;font-size:12.5px} .sf-cov-lbl{grid-column:1;grid-row:1;white-space:normal;text-overflow:clip;font-size:12.5px;line-height:1.3} .sf-cov-bars{grid-column:1 / span 2;grid-row:2} .sf-cov-val{grid-column:2;grid-row:1;text-align:right;font-size:12px} } /* Composition engagement · stacked bar horizontale */ .sf-eng-bar{display:flex;height:18px;border-radius:99px;overflow:hidden;background:var(--gi-gray-50);border:1px solid var(--gi-border)} .sf-eng-seg{transition:width 240ms var(--gi-ease)} .sf-eng-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:12.5px} .sf-eng-leg{display:inline-flex;align-items:center;gap:6px;font-family:var(--gi-font-display)} .sf-eng-leg i{width:10px;height:10px;border-radius:3px;display:inline-block} .sf-eng-emojis{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:13px;padding-top:10px;border-top:1px solid var(--gi-border)} .sf-eng-emojis span{display:inline-flex;align-items:center;gap:5px;font-family:var(--gi-font-display)} /* Funnel éditorial */ .sf-fn{display:flex;flex-wrap:wrap;align-items:center;gap:6px} .sf-fn-step{flex:0 1 auto;min-width:88px;text-align:center;padding:8px 10px;background:var(--gi-gray-50);border:1px solid var(--gi-border);border-radius:var(--gi-radius)} .sf-fn-step.on{background:var(--gi-cyan-soft);border-color:var(--gi-cyan)} .sf-fn-step .n{font-family:var(--gi-font-display);font-weight:700;font-size:18px;color:var(--gi-gray-300)} .sf-fn-step.on .n{color:var(--gi-cyan-active)} .sf-fn-step .l{font-size:10.5px;font-family:var(--gi-font-display);text-transform:uppercase;letter-spacing:.06em;color:var(--gi-gray-500);margin-top:2px} .sf-fn-arrow{color:var(--gi-gray-300);font-size:14px} /* Démographie audience */ .sf-demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px} .sf-demo-card{border:1px solid var(--gi-border);padding:12px 14px;border-radius:var(--gi-radius);background:#fff} .sf-demo-row{display:grid;grid-template-columns:minmax(70px,30%) 1fr minmax(52px,auto);align-items:center;gap:8px;font-size:12.5px;margin-top:6px} .sf-demo-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sf-demo-trk{height:6px;background:var(--gi-gray-50);border-radius:99px;overflow:hidden} .sf-demo-trk i{display:block;height:100%;background:var(--gi-cyan);border-radius:99px} .sf-demo-val{font-family:var(--gi-font-display);text-align:right} /* Analytics v2 : insights, sparkline, chart d'évolution, cadence vs Brief, 2 colonnes */ .sf-insights{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin:14px 0;padding:14px 16px;background:var(--gi-cyan-soft);border-left:3px solid var(--gi-cyan);border-radius:var(--gi-radius)} .sf-insight{font-size:13px;line-height:1.4;color:var(--gi-black)} .sf-insight b{color:var(--gi-cyan-active)} .sf-spark{display:block;width:100%;height:22px;margin-top:6px;opacity:.85} .sf-chart{display:block;width:100%;height:auto;max-height:240px} .sf-chart-grid{stroke:var(--gi-border);stroke-width:1;stroke-dasharray:2 4} .sf-chart-yl{font:11px var(--gi-font-display);fill:var(--gi-gray-500)} .sf-chart-xl{font:10.5px var(--gi-font-display);fill:var(--gi-gray-500)} .sf-an-2col{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px} .sf-cad-bar{display:flex;align-items:center;gap:10px;min-width:200px} .sf-cad-bar .trk{flex:1;height:8px;background:var(--gi-border);border-radius:99px;overflow:hidden;position:relative} .sf-cad-bar .trk i{display:block;height:100%;border-radius:99px;transition:width 220ms var(--gi-ease)} .sf-cad-bar .trk i.sf-cad-success{background:var(--gi-success)} .sf-cad-bar .trk i.sf-cad-warning{background:var(--gi-warning)} .sf-cad-bar .trk i.sf-cad-danger{background:var(--gi-danger)} .sf-cad-pct{font-family:var(--gi-font-display);font-weight:700;font-size:12px;min-width:42px;text-align:right} /* Chips multi-select (réseaux à collecter, presets, popover filtres) · états lisibles - inactif : neutre · hover cyan-soft + bord cyan + léger lift (signal d'action) - actif : cyan-soft + bord cyan + ring inset + ✓ + texte cyan-active bold - hover sur actif : intensifie le cyan-soft, ne perd jamais la sensation « sélectionné » Préserve les couleurs natives des icônes plateformes (FB bleu, IG rose, etc.). */ .sf-mfchip{transition:background 160ms var(--gi-ease),color 160ms var(--gi-ease),border-color 160ms var(--gi-ease),transform 160ms var(--gi-ease),box-shadow 160ms var(--gi-ease)} .sf-mfchip:hover{background:var(--gi-cyan-soft);border-color:var(--gi-cyan);color:var(--gi-cyan);transform:translateY(-1px)} .sf-mfchip.active{background:var(--gi-cyan-soft);border:1px solid var(--gi-cyan);color:var(--gi-cyan-active);font-weight:600;box-shadow:inset 0 0 0 1px var(--gi-cyan)} .sf-mfchip.active:hover{background:rgba(0,159,227,.16);border-color:var(--gi-cyan-active);color:var(--gi-cyan-active);transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--gi-cyan-active),0 2px 6px rgba(0,159,227,.18)} .sf-mfchip.active::after{content:" ✓";margin-left:2px;font-weight:700;color:var(--gi-cyan-active)} .sf-mfchip:active{transform:translateY(0)} /* Configuration assistée Meta (connModal) */ .sf-assist{border:1px solid var(--gi-cyan);background:var(--gi-cyan-soft);border-radius:var(--gi-radius);padding:14px 16px;margin-bottom:16px} .sf-assist .gi-eyebrow{color:var(--gi-cyan)} .sf-assist-prev{font-size:12px;color:var(--gi-gray-700);min-height:16px;margin:2px 0 10px} .sf-assist-prev b{color:var(--gi-black)} /* ── Publications v2 : segments, vignettes, perf, galerie, pagination ── */ .sf-segbar{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--gi-border);padding-bottom:2px} .sf-seg{border:none;background:transparent;font-family:var(--gi-font-display);font-size:13px;font-weight:500;padding:8px 12px;cursor:pointer;color:var(--gi-gray-500);border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:6px;transition:color 140ms var(--gi-ease),border-color 140ms var(--gi-ease)} .sf-seg:hover{color:var(--gi-black)} .sf-seg.active{color:var(--gi-black);border-bottom-color:var(--gi-cyan)} .sf-seg .n{font-size:11px;background:var(--gi-gray-100);color:var(--gi-gray-700);border-radius:99px;padding:1px 7px;font-weight:600} .sf-seg.active .n{background:var(--gi-cyan-soft);color:var(--gi-cyan)} /* Kevin 2026-06-10 · Phase 4 · segment « ⚠ Échéance » : rouge SEULEMENT si has-urgent (compteur > 0). Sinon style gris standard. Évite l'alarme inutile. */ .sf-seg[data-seg="imminent"].has-urgent{color:var(--gi-danger,#d63a3a)} .sf-seg[data-seg="imminent"].has-urgent:hover{color:var(--gi-danger,#d63a3a)} .sf-seg[data-seg="imminent"].has-urgent.active{color:var(--gi-danger,#d63a3a);border-bottom-color:var(--gi-danger,#d63a3a)} .sf-seg[data-seg="imminent"].has-urgent .n{background:var(--gi-danger,#d63a3a);color:#fff} /* Badge urgence deadline tacite (J-N) sur les rows/cards listings */ .sf-deadline-pill{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:10px;margin-left:6px;letter-spacing:.02em;line-height:1;cursor:default} .sf-deadline-danger{background:var(--gi-danger,#d63a3a);color:#fff} .sf-deadline-warn{background:#fff4e0;color:#a55d12;border:1px solid #e89034} .sf-deadline-soft{background:var(--gi-gray-100);color:var(--gi-gray-700)} [data-theme="dark"] .sf-deadline-warn{background:rgba(232,144,52,.18);color:#f5b572;border-color:#a55d12} [data-theme="dark"] .sf-deadline-soft{background:var(--sf-surface-raised);color:var(--sf-text-secondary)} /* Kevin 2026-06-10 · Phase 4.B · sparklines inline (engagement cumulé 14j). Classes préfixées `sf-engspark*` pour éviter le conflit avec `.sf-spark` (KPI cards ligne 1705 ci-dessus qui force `width:100%;height:22px`). */ .sf-engspark-wrap{display:inline-block;vertical-align:middle;cursor:default;padding:2px 4px;border-radius:4px;transition:background 120ms ease;line-height:0} .sf-engspark-wrap:hover{background:var(--gi-gray-100)} .sf-engspark{display:block} .sf-engspark-line{fill:none;stroke:var(--gi-cyan,#009FE3);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round} .sf-engspark-area{fill:var(--gi-cyan,#009FE3);fill-opacity:.18} .sf-engspark-dot{fill:var(--gi-cyan,#009FE3)} .sf-engspark-empty{display:inline-block;color:var(--gi-gray-400);font-size:11px;margin-left:6px;cursor:help} .sf-engspark-loading{display:inline-block;color:var(--gi-gray-300);font-weight:700;margin-left:6px;animation:sfEngSparkPulse 1s infinite} @keyframes sfEngSparkPulse{0%,100%{opacity:.3}50%{opacity:1}} /* En vue Tableau, la cellule perf doit avoir assez de place et le contenu est sur 1 ligne */ .sf-perf{display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap;white-space:nowrap} .sf-perf-spark{display:inline-flex;align-items:center;margin-left:auto} /* En vue Galerie, la sparkline tient sur une seconde ligne KPI pour ne pas casser le compactage */ .sf-gal-kpi{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .sf-gal-spark{display:inline-flex;align-items:center;flex:1 0 100%;justify-content:flex-end;margin-top:2px} [data-theme="dark"] .sf-engspark-wrap:hover{background:var(--sf-surface-hover)} [data-theme="dark"] .sf-engspark-line{stroke:var(--gi-cyan,#009FE3)} [data-theme="dark"] .sf-engspark-area{fill:var(--gi-cyan,#009FE3);fill-opacity:.25} [data-theme="dark"] .sf-engspark-empty{color:var(--sf-text-muted)} /* Kevin 2026-06-10 · Phase 5 · hover preview (singleton popover) */ .sf-hover-preview{ position:fixed;width:340px;max-height:90vh;overflow-y:auto; background:#fff;border:1px solid var(--gi-border-strong);border-radius:var(--gi-radius); box-shadow:0 24px 60px rgba(0,0,0,.18),0 8px 18px rgba(0,0,0,.08); z-index:1000;opacity:0;transform:translateY(-4px); transition:opacity 140ms ease,transform 140ms ease; pointer-events:none;font-family:var(--gi-font-body) } .sf-hover-preview.is-open{opacity:1;transform:translateY(0)} .sf-hover-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--gi-border);background:var(--gi-gray-50)} .sf-hover-pfs{display:flex;gap:3px} .sf-hover-pf{font-size:10px;font-weight:700;padding:2px 6px;background:#fff;color:var(--gi-gray-700);border-radius:3px;border:1px solid var(--gi-border);letter-spacing:.02em} .sf-hover-status{font-size:10px;font-weight:600;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap} .sf-hover-status-draft{background:var(--gi-gray-100);color:var(--gi-gray-700)} .sf-hover-status-ready_for_review{background:#fff4e0;color:#a55d12} .sf-hover-status-modif_requested{background:#fde0e0;color:#8a2a2a} .sf-hover-status-approved,.sf-hover-status-scheduled{background:var(--gi-cyan-soft,#e8f5fb);color:var(--gi-cyan)} .sf-hover-status-published{background:#e0f4e6;color:#1e9a5a} .sf-hover-date{padding:8px 14px 0;font-size:12px;color:var(--gi-gray-600);font-variant-numeric:tabular-nums} .sf-hover-mock{padding:10px 14px;max-height:480px;overflow:hidden} .sf-hover-mock .post-mock{transform:scale(.9);transform-origin:top left;width:111.11%;margin-bottom:-30px} .sf-hover-foot{display:flex;gap:5px;flex-wrap:wrap;padding:0 14px 10px} .sf-hover-chip{font-size:11px;padding:2px 8px;background:var(--gi-cyan-soft,#e8f5fb);color:var(--gi-cyan);border-radius:10px;font-weight:500} .sf-hover-hint{padding:8px 14px;background:var(--gi-gray-50);border-top:1px solid var(--gi-border);font-size:11px;color:var(--gi-gray-500);font-style:italic;text-align:center} /* Dark mode */ [data-theme="dark"] .sf-hover-preview{background:var(--sf-surface-elevated);border-color:var(--sf-border-strong);box-shadow:0 24px 60px rgba(0,0,0,.55),0 8px 18px rgba(0,0,0,.35)} [data-theme="dark"] .sf-hover-head{background:var(--sf-surface-raised);border-bottom-color:var(--sf-border)} [data-theme="dark"] .sf-hover-pf{background:var(--sf-surface);color:var(--sf-text-secondary);border-color:var(--sf-border)} [data-theme="dark"] .sf-hover-date{color:var(--sf-text-secondary)} [data-theme="dark"] .sf-hover-chip{background:rgba(0,159,227,.2);color:var(--gi-cyan)} [data-theme="dark"] .sf-hover-hint{background:var(--sf-surface-raised);border-top-color:var(--sf-border);color:var(--sf-text-muted)} [data-theme="dark"] .sf-hover-status-draft{background:var(--sf-surface-raised);color:var(--sf-text-secondary)} [data-theme="dark"] .sf-hover-status-ready_for_review{background:rgba(232,144,52,.2);color:#f5b572} [data-theme="dark"] .sf-hover-status-modif_requested{background:rgba(214,58,58,.2);color:#ff7a7a} [data-theme="dark"] .sf-hover-status-approved,[data-theme="dark"] .sf-hover-status-scheduled{background:rgba(0,159,227,.18);color:var(--gi-cyan)} [data-theme="dark"] .sf-hover-status-published{background:rgba(30,154,90,.2);color:#6ee19a} /* Skip sur mobile/touch · pas de survol natif */ @media (hover: none){ .sf-hover-preview{display:none !important} } .sf-viewtog{display:inline-flex;border:1px solid var(--gi-border-strong);border-radius:var(--gi-radius);overflow:hidden} .sf-viewtog button{border:none;background:#fff;padding:6px 9px;cursor:pointer;color:var(--gi-gray-500);display:inline-flex} .sf-viewtog button svg{width:16px;height:16px} .sf-viewtog button.active{background:var(--gi-black);color:#fff} .sf-thumb{display:inline-flex;width:44px;height:44px;border-radius:var(--gi-radius);overflow:hidden;background:var(--gi-gray-50);position:relative;align-items:center;justify-content:center} .sf-thumb img,.sf-thumb video{width:100%;height:100%;object-fit:cover} .sf-thumb-play{position:absolute;font-size:11px;color:#fff;background:rgba(0,0,0,.55);width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center} .sf-thumb-empty{font-family:var(--gi-font-display);color:var(--gi-gray-300);font-size:16px} .sf-thumb-empty.miss{color:var(--gi-warning);background:var(--gi-warning-bg)} /* Phase 5 (Kevin 2026-06-03 audit Point 3) · badge "🔁 partagé" overlay sur le thumb du listing */ .sf-thumb-share{position:absolute;top:2px;right:2px;width:18px;height:18px;background:rgba(255,210,90,.95);color:#7a4d00;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;box-shadow:0 1px 3px rgba(0,0,0,.18);cursor:help;line-height:1} /* Audit session IV Point 1 · 3 colonnes stats sortables ❤/💬/↗ dans le listing publications */ .sf-pubcnt{font-size:12.5px;color:var(--gi-gray-700);text-align:right;width:60px;font-variant-numeric:tabular-nums;font-feature-settings:'tnum'} .sf-pubcnt .muted{font-size:12px} /* Audit session V v2 (Kevin 2026-06-03) · matrice Notifications refondue · sections groupées, lignes denses, header sticky, toggle column au clic. */ .sf-notif-table{width:100%;border-collapse:collapse;font-family:var(--gi-font-display);table-layout:fixed} .sf-notif-table thead th{position:sticky;top:0;z-index:2;background:#000;color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:8px 10px;text-align:left} .sf-notif-table .sf-notif-h-evt{text-align:left;padding-left:14px} .sf-notif-table .sf-notif-h-rcp{text-align:center;width:90px;cursor:pointer;user-select:none;transition:background 120ms ease} .sf-notif-table .sf-notif-h-rcp:hover{background:var(--gi-cyan)} .sf-notif-table .sf-notif-section td{padding:10px 12px 6px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gi-gray-500);background:transparent;border:0} .sf-notif-table .sf-notif-row{border-top:1px solid var(--gi-border)} .sf-notif-table .sf-notif-row:nth-child(even of .sf-notif-row){background:rgba(0,0,0,.015)} .sf-notif-table .sf-notif-row td{padding:6px 10px} .sf-notif-table .sf-notif-evt{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--gi-gray-800);cursor:help} .sf-notif-table .sf-notif-cell{text-align:center} .sf-notif-table .sf-notif-cb{display:inline-flex;align-items:center;justify-content:center;padding:4px;cursor:pointer;border-radius:4px;transition:background 100ms ease} .sf-notif-table .sf-notif-cb:hover{background:var(--gi-gray-100)} .sf-notif-table .sf-notif-cb input{width:18px;height:18px;cursor:pointer;accent-color:var(--gi-cyan)} .sf-notif-dot{font-size:14px;line-height:1;flex-shrink:0;cursor:help} .sf-notif-dot.ok{color:#34d27b} .sf-notif-dot.pending{color:var(--gi-gray-300,#cbd5e1)} /* Dark mode */ [data-theme="dark"] .sf-notif-table thead th{background:var(--sf-surface-elevated);color:var(--sf-text-primary)} [data-theme="dark"] .sf-notif-table .sf-notif-h-rcp:hover{background:var(--sf-accent);color:var(--sf-text-on-accent,#fff)} [data-theme="dark"] .sf-notif-table .sf-notif-row{border-top-color:var(--sf-border)} [data-theme="dark"] .sf-notif-table .sf-notif-row:nth-child(even of .sf-notif-row){background:rgba(255,255,255,.02)} [data-theme="dark"] .sf-notif-table .sf-notif-evt{color:var(--sf-text-primary)} [data-theme="dark"] .sf-notif-table .sf-notif-cb:hover{background:var(--sf-surface-hover)} [data-theme="dark"] .sf-notif-table .sf-notif-section td{color:var(--sf-text-muted)} [data-theme="dark"] .sf-notif-dot.pending{color:var(--sf-text-muted)} .sf-msgcell{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.4;font-size:13px} .sf-perf{font-size:12px;white-space:nowrap}.sf-perf b{font-family:var(--gi-font-display);color:var(--gi-black)} .sf-pillcell{display:inline-flex;align-items:center;gap:4px} .sf-pillacts{display:inline-flex;gap:2px;opacity:0;transition:opacity 120ms var(--gi-ease)} tr:hover .sf-pillacts,.sf-pillcell:hover .sf-pillacts{opacity:1} .sf-mini{border:1px solid var(--gi-border-strong);background:#fff;width:20px;height:20px;border-radius:5px;cursor:pointer;font-size:11px;line-height:1;color:var(--gi-gray-700);padding:0} .sf-mini:hover{border-color:var(--gi-cyan);color:var(--gi-cyan)} .sf-pager{display:flex;align-items:center;gap:6px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap} .sf-pager .gi-eyebrow{margin-right:auto} .sf-pager .sf-rowbtn[disabled]{opacity:.4;cursor:not-allowed} /* Refonte 2026-06-01 · numéros de pages cliquables (style Linear/GitHub). Page courante en accent cyan-soft + border cyan pour repérage rapide. */ .sf-pager .sf-pager-num{min-width:32px;padding:6px 10px;text-align:center;font-variant-numeric:tabular-nums} .sf-pager .sf-pager-num.is-current{background:var(--gi-cyan-soft,rgba(0,188,212,.12));color:var(--gi-cyan);border-color:var(--gi-cyan);font-weight:600;cursor:default} .sf-pager .sf-pager-num.is-current:hover{background:var(--gi-cyan-soft,rgba(0,188,212,.12));border-color:var(--gi-cyan)} .sf-pager .sf-pager-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:24px;color:var(--gi-gray-500);font-size:14px;pointer-events:none;user-select:none} .sf-pager .sf-pager-size{max-width:120px;font-size:12px;padding:5px 8px} /* Dark mode · page courante + ellipsis + select sans scope .sf-shell (au cas où le pager serait un jour dans une modale). */ [data-theme="dark"] .sf-pager .sf-pager-num.is-current{background:var(--sf-accent-soft,rgba(0,188,212,.18));color:var(--sf-accent,var(--gi-cyan));border-color:var(--sf-accent,var(--gi-cyan))} [data-theme="dark"] .sf-pager .sf-pager-ellipsis{color:var(--sf-text-muted)} /* Galerie publications refondue · audit Phase 4 (Kevin 2026-06-03 session III). 4 densités (XL/L/M/S) via la classe `.sf-gal-{xl|l|m|s}` sur le container grid. Carte enrichie : header inline · type badge top-right · message multi-lignes · chips contextuels (pilier/💬/🔗) · KPI dense · hover overlay actions rapides. */ .sf-gal{display:grid;gap:16px} .sf-gal-xl{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px} .sf-gal-l{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px} .sf-gal-m{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px} .sf-gal-s{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px} .sf-gal-card{border:1px solid var(--gi-border);border-radius:var(--gi-radius);overflow:hidden;cursor:pointer;background:#fff;transition:border-color 140ms var(--gi-ease),transform 140ms var(--gi-ease),box-shadow 140ms var(--gi-ease);position:relative;display:flex;flex-direction:column} .sf-gal-card:hover{border-color:var(--gi-cyan);transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.07)} .sf-gal-card:hover .sf-gal-overlay{opacity:1;pointer-events:auto} /* Zone média · ratio adaptatif selon densité */ .sf-gal-media{position:relative;background:var(--gi-gray-50);display:flex;align-items:center;justify-content:center;overflow:hidden} .sf-gal-xl .sf-gal-media{aspect-ratio:4/5} .sf-gal-l .sf-gal-media,.sf-gal-m .sf-gal-media,.sf-gal-s .sf-gal-media{aspect-ratio:1/1} .sf-gal-media .sf-thumb{width:100%;height:100%;border-radius:0} .sf-gal-media .sf-thumb-empty{font-size:30px} /* Badges overlays */ .sf-gal-status{position:absolute;top:8px;left:8px;font-size:10.5px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .sf-gal-ctype{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 1px 4px rgba(0,0,0,.12);cursor:help} .sf-gal-ctype.sf-gal-ctype-share{background:rgba(255,224,140,.95);color:#8a5a00} /* Hover overlay actions rapides */ .sf-gal-overlay{position:absolute;inset:auto 0 0 0;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.32) 60%,transparent);padding:14px 10px 10px;display:flex;gap:6px;opacity:0;pointer-events:none;transition:opacity 140ms var(--gi-ease)} /* Kevin 2026-06-10 · fix dark : background rgba(255,255,255,.94) reste blanc dans les 2 thèmes (pas semantic), donc le texte doit être noir absolu et NON `var(--gi-black)` qui s'inverse en clair `#E8E6E0` en dark (presque blanc → invisible sur fond blanc). */ .sf-gal-act{flex:1;background:rgba(255,255,255,.94);border:0;color:#1a1a1a;font-family:var(--gi-font-display);font-size:11.5px;font-weight:600;padding:6px 8px;border-radius:6px;cursor:pointer;transition:background 120ms ease,transform 80ms ease} .sf-gal-act:hover{background:var(--gi-cyan);color:#fff} .sf-gal-act:active{transform:scale(0.96)} /* Body de la carte */ .sf-gal-body{padding:10px 12px;display:flex;flex-direction:column;gap:6px;flex:1} .sf-gal-head{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:11px} .sf-gal-date{font-variant-numeric:tabular-nums;color:var(--gi-gray-500);font-family:var(--gi-font-display);white-space:nowrap} .sf-gal-msg{font-size:12.5px;line-height:1.4;margin:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;color:var(--gi-gray-800)} .sf-gal-xl .sf-gal-msg{-webkit-line-clamp:4;font-size:13.5px} .sf-gal-m .sf-gal-msg{-webkit-line-clamp:2;font-size:12px} .sf-gal-s .sf-gal-msg{-webkit-line-clamp:2;font-size:11.5px} /* Chips contextuels */ .sf-gal-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px} .sf-gal-chip{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:var(--gi-radius-pill);background:var(--gi-gray-50);border:1px solid var(--gi-border);font-size:10.5px;color:var(--gi-gray-700)} /* KPI dense */ .sf-gal-kpi{display:flex;flex-wrap:wrap;gap:8px;padding-top:8px;margin-top:auto;border-top:1px solid var(--gi-border);font-size:11px;color:var(--gi-gray-600);font-family:var(--gi-font-display);font-variant-numeric:tabular-nums} .sf-gal-kpi .kpi-rate b{color:var(--gi-cyan);font-size:12.5px} .sf-gal-s .sf-gal-kpi{font-size:10.5px;gap:6px} .sf-gal-s .sf-gal-kpi .kpi-r,.sf-gal-s .sf-gal-kpi .kpi-c,.sf-gal-s .sf-gal-kpi .kpi-s{display:none} /* mode dense · juste rate + reach */ .sf-gal-m .sf-gal-kpi .kpi-s{display:none} /* Toggle densité (4 boutons) */ .sf-densitytog{display:inline-flex;border:1px solid var(--gi-border-strong);border-radius:var(--gi-radius);overflow:hidden;margin-right:6px} .sf-densitytog button{border:none;background:#fff;padding:6px 8px;cursor:pointer;color:var(--gi-gray-500);font-family:var(--gi-font-display);font-size:10.5px;font-weight:600;letter-spacing:.04em;min-width:30px} .sf-densitytog button.active{background:var(--gi-black);color:#fff} .sf-densitytog button:hover:not(.active){background:var(--gi-gray-100);color:var(--gi-black)} /* Filtre quick type contenu (chips horizontaux sous la toolbar) */ .sf-ctype-filters{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 14px} .sf-ctype-chip{padding:5px 12px;border:1px solid var(--gi-border-strong);background:#fff;cursor:pointer;font-family:var(--gi-font-display);font-size:11.5px;font-weight:500;border-radius:var(--gi-radius-pill);color:var(--gi-gray-700);transition:background 120ms ease,border-color 120ms ease,color 120ms ease} .sf-ctype-chip:hover{background:var(--gi-gray-50);border-color:var(--gi-black);color:var(--gi-black)} .sf-ctype-chip.active{background:var(--gi-black);color:#fff;border-color:var(--gi-black)} /* Dark mode pour la galerie refondue */ [data-theme="dark"] .sf-gal-card{background:var(--sf-surface-raised);border-color:var(--sf-border);color:var(--sf-text-primary)} [data-theme="dark"] .sf-gal-card:hover{border-color:var(--sf-accent)} [data-theme="dark"] .sf-gal-media{background:var(--sf-surface-elevated)} [data-theme="dark"] .sf-gal-ctype{background:rgba(0,0,0,.62);color:var(--sf-text-primary)} [data-theme="dark"] .sf-gal-msg{color:var(--sf-text-primary)} [data-theme="dark"] .sf-gal-date{color:var(--sf-text-muted)} [data-theme="dark"] .sf-gal-chip{background:var(--sf-surface-elevated);border-color:var(--sf-border);color:var(--sf-text-secondary)} [data-theme="dark"] .sf-gal-kpi{border-top-color:var(--sf-border);color:var(--sf-text-secondary)} [data-theme="dark"] .sf-densitytog{border-color:var(--sf-border)} [data-theme="dark"] .sf-densitytog button{background:var(--sf-surface-raised);color:var(--sf-text-secondary)} [data-theme="dark"] .sf-densitytog button.active{background:var(--sf-accent);color:var(--sf-text-on-accent,#fff)} [data-theme="dark"] .sf-densitytog button:hover:not(.active){background:var(--sf-surface-hover);color:var(--sf-text-primary)} [data-theme="dark"] .sf-ctype-chip{background:var(--sf-surface-raised);border-color:var(--sf-border);color:var(--sf-text-secondary)} [data-theme="dark"] .sf-ctype-chip:hover{background:var(--sf-surface-hover);border-color:var(--sf-border-strong);color:var(--sf-text-primary)} [data-theme="dark"] .sf-ctype-chip.active{background:var(--sf-accent);color:var(--sf-text-on-accent,#fff);border-color:var(--sf-accent)} /* Badge de provenance pilier (Haiku / à confirmer / validé) */ .sf-pill-tag{display:inline-flex;align-items:center;gap:3px;padding:1px 7px 1px 5px;border-radius:var(--gi-radius-pill);font-family:var(--gi-font-display);font-size:10.5px;font-weight:600;line-height:1.6;vertical-align:1px;white-space:nowrap} .sf-pill-tag svg{width:11px;height:11px} .sf-pill-tag.haiku{background:var(--gi-cyan-soft);color:var(--gi-cyan)} .sf-pill-tag.low{background:var(--gi-warning-bg);color:var(--gi-warning-text)} .sf-pill-tag.human{background:var(--gi-success-bg);color:var(--gi-success)} /* Onglet Stratégie · Brief */ .sf-pre{white-space:pre-line;line-height:1.55} /* Sprint UX 7h/j Axe 6 · respiration verticale entre sections du brief Stratégie. La page reste full-width (la masse d'infos l'exige) mais on l'aère section par section. */ .sf-shell .sf-st-card { margin-top: 36px; } .sf-shell .sf-st-card .gi-card-head { padding-bottom: 18px; } .sf-shell .sf-st-card .gi-card-title { font-size: 17px; letter-spacing: -0.01em; } .sf-shell .sf-st-card .gi-card-head .gi-eyebrow { margin-bottom: 6px; } .sf-shell .sf-st-card .gi-card-body { padding-top: 4px; } /* Paragraphes longs aérés (positioning pitch, ton, tone preset, etc.) */ .sf-shell .sf-st-card .sf-pre, .sf-shell .sf-st-card p { line-height: 1.7; font-size: 14px; max-width: 78ch; } .sf-shell .sf-st-card .sf-st-field { margin-top: 18px; } .sf-shell .sf-st-card .sf-st-field:first-child { margin-top: 0; } .sf-shell .sf-st-card .gi-field-label { margin-bottom: 4px; } /* Hero · détaché un peu plus du reste (était collé) */ .sf-shell .sf-st-hero { margin-bottom: 8px; } .sf-st-hero{position:relative;display:flex;gap:18px;align-items:flex-start;padding:22px 24px 22px 28px;background:#000;color:#fff;border-radius:var(--gi-radius);overflow:hidden} .sf-st-hero::before{content:'';position:absolute;left:0;top:22px;bottom:22px;width:3px;background:var(--gi-cyan)} .sf-st-hero .gi-eyebrow{color:rgba(255,255,255,.55)} .sf-st-hero .gi-section-title{color:#fff} .sf-st-hero .muted{color:rgba(255,255,255,.6)} .sf-st-logo{width:64px;height:64px;object-fit:contain;background:#fff;border-radius:var(--gi-radius);padding:6px;flex-shrink:0} .sf-st-hero-main{flex:1;min-width:0} .sf-st-hero-main .sf-pre{color:rgba(255,255,255,.82)} .sf-st-hero-act{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0} .sf-st-hero-act .sf-rowbtn{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);padding:5px 12px;font-size:12px} .sf-st-hero-act .sf-rowbtn:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff} .sf-st-field{margin-top:12px} .sf-st-field:first-child{margin-top:0} .sf-st-field p{font-size:13px;margin:4px 0 0;color:var(--gi-black)} .sf-st-ul{margin:4px 0 0;padding-left:18px;font-size:13px;line-height:1.6} .sf-st-netgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px} .sf-st-net{border:1px solid var(--gi-border-strong);border-radius:var(--gi-radius);padding:14px} .sf-st-cadence{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;background:var(--gi-cyan-soft);border-radius:var(--gi-radius);font-size:12.5px;color:var(--gi-black)} .sf-st-cadence .ic{color:var(--gi-cyan)} .sf-st-cadence svg{width:15px;height:15px} .sf-st-alert{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px 14px;background:var(--gi-warning-bg);color:var(--gi-warning-text);border-left:3px solid var(--gi-warning);border-radius:var(--gi-radius);font-size:13px;line-height:1.5} .sf-st-alert svg{width:18px;height:18px;flex-shrink:0;margin-top:1px} .sf-st-objgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px} .sf-st-obj{border:1px solid var(--gi-border);border-radius:var(--gi-radius);padding:14px;background:var(--gi-canvas-soft)} .sf-st-obj-h{font-family:var(--gi-font-display);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--gi-cyan);margin-bottom:6px} .sf-st-obj p{font-size:12.5px;line-height:1.5;margin:0} .sf-st-horizons{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:14px} .sf-st-horizons p{font-size:12.5px;margin:4px 0 0} .sf-st-pillars{display:flex;flex-direction:column;gap:14px} .sf-st-pillar b{font-family:var(--gi-font-display);font-size:14px} .sf-st-pct{font-family:var(--gi-font-display);font-weight:700;color:var(--gi-cyan)} .sf-st-bar{height:6px;background:var(--gi-border);border-radius:99px;margin-top:6px;overflow:hidden} .sf-st-bar span{display:block;height:100%;background:var(--gi-cyan)} .sf-st-personas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:12px} .sf-st-persona{border:1px solid var(--gi-border-strong);border-radius:var(--gi-radius);padding:14px} .sf-st-persona-h b{font-family:var(--gi-font-display);font-size:14px} .sf-st-persona p{font-size:12.5px;line-height:1.5;margin:6px 0 0} .sf-st-2col{display:grid;grid-template-columns:1fr 1fr;gap:18px} .sf-st-swatches{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px} .sf-st-swatch{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border:1px solid var(--gi-border-strong);border-radius:var(--gi-radius-pill);background:#fff;cursor:pointer;font-family:var(--gi-font-display);font-size:12px;transition:border-color 140ms var(--gi-ease),transform 140ms var(--gi-ease)} .sf-st-swatch:hover{border-color:var(--gi-cyan);transform:translateY(-1px)} .sf-st-swatch .sw{width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.12)} @media(max-width:720px){.sf-st-hero{flex-direction:column}.sf-st-hero-act{align-items:flex-start}.sf-st-2col{grid-template-columns:1fr}} /* ============================================================ ★ COUCHE P1 QUICK WINS · CONFORT YEUX 8H/J (2026-05-29) ★ ============================================================ Refonte UX SocialFlow Phase 2 · scope admin uniquement (.sf-shell) pour ne pas affecter le rendu PDF rapport (qui inline gi.css aussi). Réf : socialflow-ux-research.md · 27 recommandations · P1 #1-9. Pilotée par les semantic tokens définis en Phase 1 (--sf-*). Principe : passage du print-grade pur (#000/#FFF/#009FE3 saturé) à un environnement éditorial calme (crème/charcoal/cyan UI tempéré) sans toucher à la signature GI sur le PDF. ============================================================ */ /* Nouvelles valeurs semantic tokens scopées admin */ .sf-shell { --sf-surface: #FAFAF7; /* crème léger · fond app */ --sf-surface-raised: #FFFFFF; /* cards, sidebar */ --sf-surface-elevated: #F4F4F2; /* carte profil, dropdowns, popovers · doit RESSORTIR sur sidebar blanche */ --sf-surface-hover: #EFEEEB; /* hover sur surfaces raised/elevated · plus marqué */ --sf-surface-sunken: #F0EFEA; /* inputs, code blocks, kbd */ --sf-text-primary: #1A1A1A; /* charcoal (au lieu de #000) */ --sf-text-secondary: #3A3A3A; --sf-text-muted: #6B6B6B; --sf-border: #EDECE8; /* warm gray (au lieu de #E6E6E6) */ --sf-border-strong: #DCDAD3; --sf-accent: #0098DC; /* cyan UI tempéré (au lieu de #009FE3 saturé) */ --sf-accent-hover: #0083C1; --sf-accent-soft: rgba(0,152,220,0.08); --sf-accent-glow: 0 0 0 3px rgba(0,152,220,0.18); /* halo soft, pas trait dur */ /* --sf-accent-brand reste #009FE3 immuable (cover PDF + dots) */ } /* ============================================================ ★ DARK MODE Linear-pur · override des semantic tokens (Axe 1 v2) ------------------------------------------------------------ FIX BUG ARCHITECTURE : la rule `.sf-shell { ... }` ci-dessus redéfinit TOUS les tokens en valeurs light → la cascade CSS prend la valeur de `.sf-shell` (descendant) plutôt que celle de `` pour tous les `.gi-card`/`.sf-card`/etc qui sont dans `.sf-shell`. Solution : un override `[data-theme="dark"] .sf-shell` (spécificité 0,2,0) qui BAT la rule `.sf-shell` (0,1,0) peu importe l'ordre de déclaration. Palette Linear-pur · 5 surfaces étagées, 4 niveaux texte, gris neutres. Pas de bleuté ni de raffinement excessif — sobriété maximale. ============================================================ */ [data-theme="dark"] .sf-shell { --sf-surface: #0A0A0B; /* fond app · le plus sombre */ --sf-surface-raised: #141416; /* cards, sidebar */ --sf-surface-elevated: #1C1C1F; /* modales, drawers, popovers */ --sf-surface-hover: #222226; /* états hover sur surfaces raised */ --sf-surface-sunken: #080809; /* inputs, code blocks · plus sombre que surface */ --sf-text-primary: #E8E8E5; /* off-white doux, jamais pur blanc */ --sf-text-secondary: #A0A0A8; --sf-text-muted: #71717A; --sf-text-disabled: #52525B; --sf-border: #26262A; --sf-border-strong: #3A3A3F; /* Accent : on garde l'accent utilisateur (--sf-user-accent) déjà piloté par le picker · les dérivés soft/glow sont posés par le JS en hex statiques. */ --sf-accent-soft: rgba(0, 152, 220, 0.14); /* fallback léger pour navigateurs anciens · le JS pose la vraie valeur */ --sf-accent-glow: 0 0 0 3px rgba(0, 152, 220, 0.25); } /* === P1 #1 backgrounds adoucis === */ .sf-shell { background: var(--sf-surface); } .sf-main { background: var(--sf-surface); color: var(--sf-text-primary); } .sf-shell .gi-card, .sf-shell .sf-card-block, .sf-shell .sf-kpi-bar, .sf-shell .sf-kpi { background: var(--sf-surface-raised); border-color: var(--sf-border); } /* === P1 #2 text body charcoal au lieu de noir pur === */ .sf-shell { color: var(--sf-text-primary); } .sf-shell .muted, .sf-shell .gi-subtitle { color: var(--sf-text-muted); } /* === P1 #3 cyan d'interface séparé du cyan signature === */ /* L'accent .accent reste cyan brand (cover, dots, signature). Les boutons primaires + focus utilisent maintenant --sf-accent (tempéré). */ .sf-shell .gi-btn-primary { background: var(--sf-accent); border-color: var(--sf-accent); color: var(--sf-text-on-accent); } .sf-shell .gi-btn-primary:hover { background: var(--sf-accent-hover); border-color: var(--sf-accent-hover); box-shadow: var(--sf-accent-glow); } .sf-shell .sf-brand-item.active { border-left-color: var(--sf-accent); } .sf-shell .sf-nav-item.active { border-left-color: var(--sf-accent); } .sf-shell .accent { color: var(--sf-accent-brand); } /* signature préservée pour .accent */ /* === P1 #4 bordures plus douces (warm gray) === */ .sf-shell .gi-card, .sf-shell .gi-table th, .sf-shell .gi-table td, .sf-shell .gi-field-input, .sf-shell .gi-field-select { border-color: var(--sf-border); } .sf-shell .gi-card-head { border-bottom-color: var(--sf-border); } /* === P1 #5 focus rings calmes (halo soft, pas trait dur) === */ .sf-shell *:focus-visible { outline: none; box-shadow: var(--sf-accent-glow); border-radius: 4px; transition: box-shadow 120ms var(--gi-ease); } .sf-shell button:focus-visible, .sf-shell input:focus-visible, .sf-shell select:focus-visible, .sf-shell textarea:focus-visible { outline: none; border-color: var(--sf-accent); box-shadow: var(--sf-accent-glow); } /* === P1 #6 eyebrows resserrés (.22em → .10em) === */ .sf-shell .gi-eyebrow { letter-spacing: 0.10em; } .sf-shell .num { letter-spacing: 0.10em; } /* === P1 #7 bordures 1px partout (audit visuel) === */ /* La couche initiale a déjà 1px sur la plupart des sélecteurs ; on s'assure que les bordures sombres .gi-card{border:1px solid var(--gi-black)} et .sf-sidebar{border-right:1px solid var(--gi-black)} passent en couleur douce. */ .sf-shell .gi-card { border: 1px solid var(--sf-border); } .sf-shell .sf-sidebar { border-right-color: var(--sf-border-strong); } /* === P1 #8 pulses statiques au lieu d'animation permanente === */ /* Le pulse vert "Système opérationnel" en sidebar foot devient un point statique sobre. L'animation permanente crée du bruit visuel sur 8h/j. */ .sf-shell .sf-pulse .ping { animation: none !important; opacity: 0.6; } /* === P1 #9 prefers-reduced-motion · global === */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ★ Fin couche P1 quick wins ★ */ /* ============================================================ ★ COUCHE P2 DENSITÉ LINEAR-STYLE (2026-05-29) ★ ============================================================ Refonte UX Phase 4 · scope admin (.sf-shell) uniquement. Réf : socialflow-ux-research.md · action #14. Objectif : plus d'info à l'écran sans cognitive overload. Resserrage padding/heights des composants principaux. Body typo : 15/1.6 → 14/1.7 (respiration en lecture longue). ============================================================ */ /* === Typographie body resserrée (action #13 P2) === */ .sf-shell { font-size: 14px; line-height: 1.7; } /* === Topbar plus compacte (60px → 48px) === */ .sf-shell { grid-template-rows: 48px 1fr; } .sf-shell .sf-topbar { padding: 0 18px; } .sf-shell .sf-topbar .gi-wordmark { font-size: 16px; } /* === Sidebar items resserrés (40-42px → 32-34px) === */ .sf-shell .sf-nav-item { padding: 7px 18px; font-size: 13px; } .sf-shell .sf-brand-item { padding: 8px 18px; } .sf-shell .sf-brand-item .nm { font-size: 13.5px; } .sf-shell .sf-sidebar { padding: 12px 0; } .sf-shell .sf-sidebar .grp { padding: 0 18px; margin: 4px 0 6px; } /* === Cards densifiées (head 16/20 → 12/16, body 20 → 16) === */ .sf-shell .gi-card-head { padding: 12px 16px; } .sf-shell .gi-card-body { padding: 16px; } .sf-shell .gi-card-head h3, .sf-shell .gi-card-title { font-size: 13.5px; } /* === Inputs densifiés (10/14 → 8/12) === */ .sf-shell .gi-field-input, .sf-shell .gi-field-select, .sf-shell .gi-field-textarea { padding: 8px 12px; font-size: 13.5px; } .sf-shell .gi-field { margin-bottom: 14px; } .sf-shell .gi-field-label { font-size: 10px; letter-spacing: 0.12em; margin-bottom: 5px; } /* === Boutons resserrés (10/18 → 7/14) === */ .sf-shell .gi-btn { padding: 7px 14px; font-size: 13px; } .sf-shell .gi-btn-sm { padding: 5px 10px; font-size: 12px; } /* === Main padding resserré (32 → 22) · Linear-style respiration === */ .sf-shell .sf-main { padding: 22px clamp(18px, 3vw, 36px); } /* === Tables resserrées === */ .sf-shell .gi-table th { padding: 9px 12px; font-size: 9.5px; letter-spacing: 0.10em; } .sf-shell .gi-table td { padding: 9px 12px; font-size: 13px; } /* === KPI cards · plus serrés mais lisibles === */ .sf-shell .gi-kpi { padding: 14px 16px; } .sf-shell .gi-kpi .lbl { font-size: 9.5px; letter-spacing: 0.12em; } .sf-shell .gi-kpi .val { font-size: 28px; margin-top: 8px; } /* === Section heads compacts === */ .sf-shell .gi-section-head { margin: 18px 0 14px; } .sf-shell .gi-section-title { font-size: 19px; } /* === Sf-tab2 (onglets brand) densifiés === */ .sf-shell .sf-tab2 { padding: 7px 12px; font-size: 12.5px; } /* Sprint Overview (Kevin 2026-06-05) · hero "État du moment" 3 colonnes. Chaque colonne regroupe une catégorie (à traiter / cette semaine / ce mois) avec ses chiffres-clés cliquables qui naviguent vers la zone concernée. */ .sf-state-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 4px; } .sf-state-col { background: var(--gi-bg, #fafaf7); border: 1px solid var(--gi-gray-100, #e5e7eb); border-radius: 12px; padding: 18px 18px 12px; } .sf-state-col .gi-eyebrow { font-size: 10.5px; letter-spacing: 0.16em; color: var(--gi-gray-600, #4b5563); margin: 0 0 12px; } .sf-state-row { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--gi-gray-50, #f3f4f6); transition: background 120ms ease; } .sf-state-row:first-of-type { border-top: none; padding-top: 4px; } .sf-state-row[data-state-action]:hover { background: rgba(0,159,227,0.06); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 6px; } .sf-state-num { font-family: var(--gi-font-display, system-ui); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; color: var(--gi-black, #0a0a0b); min-width: 36px; line-height: 1; } .sf-state-row-hot .sf-state-num { color: var(--gi-cyan, #009FE3); } .sf-state-lbl { font-size: 12.5px; color: var(--gi-gray-600, #4b5563); line-height: 1.4; } @media (max-width: 900px) { .sf-state-hero { grid-template-columns: 1fr; } } /* Theme dark · Kevin 2026-06-05 · sf-state-col était illisible (fond beige clair sur fond noir, contraste insuffisant). On bascule sur surface foncée avec bordure subtile et hover cyan léger. */ [data-theme="dark"] .sf-state-col { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.10); } [data-theme="dark"] .sf-state-col .gi-eyebrow { color: rgba(255, 255, 255, 0.65); } [data-theme="dark"] .sf-state-row { border-top-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .sf-state-row[data-state-action]:hover { background: rgba(0, 159, 227, 0.12); } [data-theme="dark"] .sf-state-num { color: rgba(255, 255, 255, 0.92); } [data-theme="dark"] .sf-state-row-hot .sf-state-num { color: var(--gi-cyan, #009FE3); } [data-theme="dark"] .sf-state-lbl { color: rgba(255, 255, 255, 0.65); } /* Modale standalone (utilisée par openMessageReplyModal · "Répondre au client"). Composant indépendant du système modal-overlay principal · z-index 80 pour qu'elle passe au-dessus de toute autre modale (modal-overlay = 60, fiche contact = dans modal-overlay). Bug Kevin 2026-06-05 : avant ce styling le contenu n'avait ni fond ni layout · la modale était techniquement ouverte mais visuellement cassée (titre/boutons éparpillés). */ .gi-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 80; display: none; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; } .gi-modal-backdrop.is-open { display: flex; } [data-theme="dark"] .gi-modal-backdrop { background: rgba(0, 0, 0, 0.72); } .gi-modal { background: #fff; border: 1px solid var(--gi-gray-200, #e5e7eb); border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22); width: 100%; max-width: 560px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; } .gi-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--gi-gray-100, #f3f4f6); } .gi-modal-title { margin: 0; font-family: var(--gi-font-display, system-ui); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--gi-black, #0a0a0b); } .gi-modal-close { background: none; border: none; padding: 0; width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; color: var(--gi-gray-600, #4b5563); cursor: pointer; transition: background 140ms ease; } .gi-modal-close:hover { background: var(--gi-gray-100, #f3f4f6); color: var(--gi-black, #0a0a0b); } .gi-modal-body { padding: 20px 22px; overflow-y: auto; flex: 1; font-size: 14px; line-height: 1.55; color: var(--gi-gray-700, #374151); } .gi-modal-body .gi-input, .gi-modal-body textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; font-family: inherit; font-size: 13.5px; background: var(--gi-bg, #fafaf7); border: 1px solid var(--gi-gray-200, #e5e7eb); border-radius: 8px; color: var(--gi-black, #0a0a0b); transition: border-color 140ms ease, box-shadow 140ms ease; } .gi-modal-body .gi-input:focus, .gi-modal-body textarea:focus { outline: none; border-color: var(--gi-cyan, #009FE3); box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.15); } .gi-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--gi-gray-100, #f3f4f6); background: var(--gi-gray-50, #fafaf7); } /* Theme dark · modale chic-editorial sur fond noir doux */ [data-theme="dark"] .gi-modal { background: #1F1F23; border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55); } [data-theme="dark"] .gi-modal-head { border-bottom-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .gi-modal-title { color: rgba(255, 255, 255, 0.92); } [data-theme="dark"] .gi-modal-close { color: rgba(255, 255, 255, 0.65); } [data-theme="dark"] .gi-modal-close:hover { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.92); } [data-theme="dark"] .gi-modal-body { color: rgba(255, 255, 255, 0.82); } [data-theme="dark"] .gi-modal-body .gi-input, [data-theme="dark"] .gi-modal-body textarea { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.92); } [data-theme="dark"] .gi-modal-foot { background: rgba(255, 255, 255, 0.02); border-top-color: rgba(255, 255, 255, 0.08); } /* Séparateurs de groupes (Kevin 2026-06-05) · regroupent visuellement la tabnav marque en 4 phases de travail : Pilotage │ Éditorial │ Performance │ Gestion. Bordure très douce + petit gap pour respiration sans charger l'œil. */ .sf-shell .sf-tab2.sf-tab2-group-end { border-right: 1px solid var(--gi-gray-100, #e5e7eb); padding-right: 18px; margin-right: 6px; } /* === Toolbar publications · plus dense === */ .sf-shell .sf-pub-toolbar .gi-field-input { height: 30px; padding: 4px 10px; } /* === Modales / sheet padding resserré === */ .sf-shell .sheet { padding: 22px 26px; } /* ★ Fin couche P2 densité Linear-style ★ */ /* ════════════════════════════════════════════════════════════════════════ ★ COUCHE UI UTILITAIRES · audit 2026-05-30 ★ ──────────────────────────────────────────────────────────────────────── Empty states variants · error box · back button · age badges · command palette · notif bell · command-center cards · keyboard cheatsheet. ════════════════════════════════════════════════════════════════════════ */ /* ── Empty states · variants ── */ .gi-empty.sf-empty-success .sf-empty-ic { color: var(--gi-success); } .gi-empty.sf-empty-warning .sf-empty-ic { color: var(--gi-warning); } .gi-empty.sf-empty-error .sf-empty-ic { color: var(--gi-danger); } /* ── Error box · banner réutilisable pour échec API ── */ .sf-errorbox { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; background: #fff; border: 1px solid var(--gi-border); border-left: 3px solid var(--gi-danger); border-radius: var(--gi-radius); box-shadow: var(--gi-elev-1); margin: 14px 0; } .sf-errorbox-ic { width: 22px; height: 22px; color: var(--gi-danger); flex-shrink: 0; } .sf-errorbox-ic svg { width: 100%; height: 100%; } .sf-errorbox-body { flex: 1; min-width: 0; } .sf-errorbox-title { font-family: var(--gi-font-display); font-weight: 600; font-size: 14px; margin-bottom: 3px; } .sf-errorbox-desc { font-family: var(--gi-font-body); font-size: 13px; color: var(--gi-gray-600); line-height: 1.5; } /* sf-back-btn supprimé 2026-06-01 · remplacé en HTML par `class="gi-btn gi-btn-sm"` (cf. src/web/admin/index.js et src/web/admin/helpers.ts). Le composant gi-btn bénéficie déjà des overrides dark, du hover noir-inversé GI et de la cohérence du design system. Rule custom devenue redondante → supprimée. */ /* ── Badge âge sur posts en attente (pulse si critique) ── */ .sf-age-badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--gi-font-mono, monospace); font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 10px; line-height: 1.4; } .sf-age-badge.fresh { background: var(--gi-gray-100); color: var(--gi-gray-600); } .sf-age-badge.warn { background: rgba(232,144,52,.12); color: var(--gi-warning); } .sf-age-badge.urgent { background: rgba(214,58,58,.12); color: var(--gi-danger); animation: sf-age-pulse 2s infinite; } @keyframes sf-age-pulse { 0%,100%{opacity:1} 50%{opacity:.55} } /* ── Notification bell (topbar) ── */ .sf-notif-btn { position: relative; background: none; border: none; padding: 8px; border-radius: 8px; cursor: pointer; color: var(--gi-gray-700); transition: background .15s; } .sf-notif-btn:hover { background: var(--gi-gray-100); color: var(--gi-black); } .sf-notif-btn svg { width: 18px; height: 18px; } .sf-notif-badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--gi-danger); color: #fff; font-size: 10px; font-weight: 700; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--gi-font-mono, monospace); line-height: 1; } .sf-notif-pop { position: absolute; top: calc(100% + 8px); right: 0; width: 380px; max-height: 480px; background: #fff; border: 1px solid var(--gi-border); border-radius: var(--gi-radius); box-shadow: var(--gi-elev-3); z-index: 100; display: none; overflow: hidden; } .sf-notif-pop.open { display: flex; flex-direction: column; } .sf-notif-pop-head { padding: 14px 18px; border-bottom: 1px solid var(--gi-border); display: flex; align-items: center; justify-content: space-between; } .sf-notif-pop-head h3 { font-family: var(--gi-font-display); font-size: 14px; font-weight: 600; margin: 0; } .sf-notif-pop-list { overflow-y: auto; flex: 1; max-height: 380px; } .sf-notif-item { padding: 12px 18px; border-bottom: 1px solid var(--gi-gray-50); cursor: pointer; transition: background .15s; display: flex; gap: 10px; } .sf-notif-item:hover { background: var(--gi-gray-50); } .sf-notif-item:last-child { border-bottom: none; } .sf-notif-item.unread { background: rgba(0,159,227,.04); } .sf-notif-item.unread::before { content: ''; width: 6px; height: 6px; background: var(--gi-cyan); border-radius: 50%; flex-shrink: 0; margin-top: 6px; } .sf-notif-item-body { flex: 1; min-width: 0; } .sf-notif-item-title { font-size: 13px; font-weight: 600; color: var(--gi-black); margin-bottom: 2px; } .sf-notif-item-desc { font-size: 12px; color: var(--gi-gray-600); line-height: 1.4; } .sf-notif-item-time { font-size: 10.5px; color: var(--gi-gray-500); margin-top: 4px; font-family: var(--gi-font-mono, monospace); } .sf-notif-empty { padding: 36px 20px; text-align: center; color: var(--gi-gray-500); font-style: italic; font-size: 13px; } /* ── Command palette (Cmd+K) ── */ .sf-cmdk-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.4); display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; } .sf-cmdk-overlay.open { display: flex; } .sf-cmdk { width: min(640px, 92vw); background: #fff; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.3); overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; } .sf-cmdk-search { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--gi-border); } .sf-cmdk-search svg { width: 16px; height: 16px; color: var(--gi-gray-500); } .sf-cmdk-input { flex: 1; border: none; outline: none; font-family: var(--gi-font-body); font-size: 15px; color: var(--gi-black); background: transparent; } .sf-cmdk-results { overflow-y: auto; flex: 1; padding: 6px 0; } .sf-cmdk-section { padding: 4px 0; } .sf-cmdk-section-title { padding: 6px 18px; font-size: 10.5px; font-weight: 600; color: var(--gi-gray-500); text-transform: uppercase; letter-spacing: .06em; } .sf-cmdk-item { padding: 9px 18px; cursor: pointer; display: flex; align-items: center; gap: 11px; font-size: 13px; color: var(--gi-gray-800); border-left: 2px solid transparent; } .sf-cmdk-item:hover, .sf-cmdk-item.is-active { background: var(--gi-gray-50); border-left-color: var(--gi-cyan); } .sf-cmdk-item .ic { width: 14px; height: 14px; color: var(--gi-gray-500); flex-shrink: 0; } .sf-cmdk-item .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sf-cmdk-item .kbd { font-family: var(--gi-font-mono, monospace); font-size: 10.5px; color: var(--gi-gray-500); padding: 2px 6px; border: 1px solid var(--gi-border); border-radius: 4px; background: var(--gi-gray-50); } .sf-cmdk-item .meta { font-size: 11px; color: var(--gi-gray-500); } .sf-cmdk-empty { padding: 32px 18px; text-align: center; color: var(--gi-gray-500); font-style: italic; font-size: 13px; } .sf-cmdk-footer { padding: 8px 18px; border-top: 1px solid var(--gi-border); display: flex; gap: 14px; font-size: 11px; color: var(--gi-gray-500); } .sf-cmdk-footer kbd { font-family: var(--gi-font-mono, monospace); font-size: 10.5px; padding: 1px 5px; border: 1px solid var(--gi-border); border-radius: 3px; background: var(--gi-gray-50); } /* ── Cheatsheet (?) raccourcis clavier ── */ .sf-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; padding: 6px 0; } .sf-shortcut { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--gi-border); font-size: 13px; } .sf-shortcut .lbl { color: var(--gi-gray-800); } .sf-shortcut .keys { display: flex; gap: 4px; } .sf-shortcut kbd { font-family: var(--gi-font-mono, monospace); font-size: 10.5px; padding: 2px 6px; border: 1px solid var(--gi-border); border-radius: 4px; background: var(--gi-gray-50); color: var(--gi-gray-700); min-width: 22px; text-align: center; } /* ── Command center · cartes intelligentes ── */ .sf-cc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 18px 0; } .sf-cc-card { background: #fff; border: 1px solid var(--gi-border); border-radius: var(--gi-radius); padding: 16px 18px; cursor: pointer; transition: border-color .18s, transform .18s, box-shadow .18s; position: relative; overflow: hidden; } .sf-cc-card:hover { border-color: var(--gi-cyan); transform: translateY(-1px); box-shadow: var(--gi-elev-2); } .sf-cc-card.is-alert { border-left: 3px solid var(--gi-warning); } .sf-cc-card.is-urgent { border-left: 3px solid var(--gi-danger); } .sf-cc-card.is-good { border-left: 3px solid var(--gi-success); } .sf-cc-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .sf-cc-card-ic { width: 16px; height: 16px; color: var(--gi-gray-500); } .sf-cc-card.is-alert .sf-cc-card-ic { color: var(--gi-warning); } .sf-cc-card.is-urgent .sf-cc-card-ic { color: var(--gi-danger); } .sf-cc-card.is-good .sf-cc-card-ic { color: var(--gi-success); } .sf-cc-card-eyebrow { font-family: var(--gi-font-display); font-size: 10.5px; font-weight: 600; color: var(--gi-gray-500); text-transform: uppercase; letter-spacing: .06em; } .sf-cc-card-value { font-family: var(--gi-font-display); font-size: 22px; font-weight: 700; color: var(--gi-black); letter-spacing: -0.01em; line-height: 1.1; margin-bottom: 4px; } .sf-cc-card-desc { font-size: 12px; color: var(--gi-gray-600); line-height: 1.45; } .sf-cc-card-cta { margin-top: 10px; font-size: 11.5px; color: var(--gi-cyan); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; } .sf-cc-card-cta svg { width: 11px; height: 11px; } /* ── Refonte IA dashboard (2026-06-22) · « À agir » liste + bande visibilité + cartes marque compactes ── */ .sf-agir { display: flex; flex-direction: column; border: 1px solid var(--gi-border); border-radius: var(--gi-radius); overflow: hidden; background: #fff; } .sf-agir-row { display: flex; align-items: center; gap: 13px; padding: 12px 16px; border-left: 3px solid transparent; border-bottom: 1px solid var(--gi-border); } .sf-agir-row:last-child { border-bottom: 0; } .sf-agir-row[data-cc-idx], .sf-agir-row[data-state-action], .sf-agir-row[data-agency-action] { cursor: pointer; transition: background .15s; } .sf-agir-row[data-cc-idx]:hover, .sf-agir-row[data-state-action]:hover, .sf-agir-row[data-agency-action]:hover { background: var(--gi-gray-50); } .sf-agir-row.is-urgent { border-left-color: var(--gi-danger); } .sf-agir-row.is-alert { border-left-color: var(--gi-warning); } .sf-agir-row.is-good { border-left-color: var(--gi-success); } .sf-agir-ic { width: 18px; height: 18px; flex: 0 0 18px; color: var(--gi-gray-500); } .sf-agir-row.is-urgent .sf-agir-ic { color: var(--gi-danger); } .sf-agir-row.is-alert .sf-agir-ic { color: var(--gi-warning); } .sf-agir-row.is-good .sf-agir-ic { color: var(--gi-success); } .sf-agir-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 9px; } .sf-agir-val { font-family: var(--gi-font-display); font-weight: 700; font-size: 14px; color: var(--gi-black); } .sf-agir-desc { font-size: 12px; color: var(--gi-gray-600); line-height: 1.4; } .sf-agir-cta { flex: 0 0 auto; font-size: 11.5px; font-weight: 600; color: var(--gi-cyan); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .sf-agir-cta svg { width: 11px; height: 11px; } .sf-home-band { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1px solid var(--gi-border); border-radius: var(--gi-radius); padding: 12px 16px; background: #fff; } .sf-cmd-grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .sf-cmd-card2 { background: #fff; border: 1px solid var(--gi-border); border-radius: var(--gi-radius); padding: 14px 16px; cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .18s; } .sf-cmd-card2:hover { border-color: var(--gi-cyan); box-shadow: var(--gi-elev-2); transform: translateY(-1px); } .sf-cmd2-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sf-cmd-card2 .nm { font-family: var(--gi-font-display); font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sf-cmd-card2 .nm .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .sf-cmd-card2 .sf-score { font-size: 20px; } .sf-cmd2-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; } .sf-cmd2-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 12px; white-space: nowrap; } .sf-cmd2-badge.cy { background: var(--gi-cyan-soft, #e6f7fb); color: var(--gi-cyan); } .sf-cmd2-badge.am { background: #fdf0d5; color: #9a6700; } /* Sur mobile, les cartes débordaient à droite et les noms de marques étaient coupés (constaté en capture 390 px le 2026-08-23). `1fr` ne descend PAS sous la largeur minimale du contenu : il faut `minmax(0, 1fr)` pour autoriser la piste à rétrécir. Sous 480 px, deux colonnes restent trop étroites pour « Le Collectif des Lunetiers de Givet » : une seule. */ @media (max-width: 640px) { .sf-cmd-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .sf-cmd-grid2 { grid-template-columns: minmax(0, 1fr); } } [data-theme="dark"] .sf-agir, [data-theme="dark"] .sf-home-band, [data-theme="dark"] .sf-cmd-card2 { background: var(--sf-card, #18181B); border-color: var(--sf-border, #2A2A2F); } [data-theme="dark"] .sf-agir-row { border-bottom-color: var(--sf-border, #2A2A2F); } [data-theme="dark"] .sf-agir-row[data-cc-idx]:hover, [data-theme="dark"] .sf-agir-row[data-state-action]:hover, [data-theme="dark"] .sf-agir-row[data-agency-action]:hover { background: var(--sf-surface-hover, rgba(255,255,255,.04)); } [data-theme="dark"] .sf-agir-val, [data-theme="dark"] .sf-cmd-card2 .nm { color: var(--sf-text, #E8E6E0); } [data-theme="dark"] .sf-agir-desc { color: var(--sf-text-muted, #9CA0A8); } /* ── Polish « Vue d'ensemble » marque (2026-06-23) · finition ligne par ligne ── */ /* (1) Badge santé entête */ .sf-hbadge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 20px; font-family: var(--gi-font-display); font-size: 13px; font-weight: 600; border: 1px solid transparent; vertical-align: middle; } .sf-hbadge .dot { width: 8px; height: 8px; border-radius: 50%; } .sf-hbadge.is-good { background: rgba(30,154,90,.10); color: var(--gi-success); border-color: rgba(30,154,90,.30); } .sf-hbadge.is-warning { background: rgba(232,144,52,.12); color: #9a6700; border-color: rgba(232,144,52,.35); } .sf-hbadge.is-critical { background: rgba(214,58,58,.10); color: var(--gi-danger); border-color: rgba(214,58,58,.30); } .sf-hbadge.is-none { background: var(--gi-gray-100); color: var(--gi-gray-600); border-color: var(--gi-border); } /* (2) Compteur-badge « À traiter » + affordance CTA */ .sf-agir-label { flex: 1; min-width: 0; font-size: 13.5px; color: var(--gi-black); } .sf-agir-count { flex: 0 0 auto; min-width: 30px; height: 24px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-family: var(--gi-font-display); font-weight: 700; font-size: 13px; background: var(--gi-gray-100); color: var(--gi-gray-700); font-variant-numeric: tabular-nums; } .sf-agir-count.is-urgent { background: var(--gi-danger); color: #fff; } .sf-agir-count.is-alert { background: #fdf0d5; color: #9a6700; } .sf-agir-count.is-good { background: var(--gi-success); color: #fff; } .sf-agir-cta { color: var(--gi-gray-400); } .sf-agir-row:hover .sf-agir-cta { color: var(--gi-cyan); } /* (3) Jauge visibilité */ .sf-vis { background: #fff; border: 1px solid var(--gi-border); border-radius: var(--gi-radius); padding: 14px 16px; } .sf-vis-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .sf-vis-head { display: flex; align-items: center; gap: 11px; } .sf-vis-nets { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; } .sf-vis-meta { font-size: 12px; margin-top: 11px; } .sf-hzbar { position: relative; height: 8px; border-radius: 5px; background: var(--gi-gray-100); margin: 13px 0 5px; } .sf-hzbar-plan { position: absolute; left: 0; top: 0; bottom: 0; opacity: .28; border-radius: 5px; } .sf-hzbar-valid { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; } .sf-hzbar-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--gi-gray-500); transform: translateX(-1px); } .sf-hzbar-legend { display: flex; justify-content: space-between; font-size: 10px; color: var(--gi-gray-500); letter-spacing: .03em; } /* (4) Tuiles activité */ .sf-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .sf-act-tile { background: #fff; border: 1px solid var(--gi-border); border-radius: var(--gi-radius); padding: 14px 16px; } .sf-act-tile .v { font-family: var(--gi-font-display); font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--gi-black); } .sf-act-tile .l { font-size: 10.5px; color: var(--gi-gray-500); text-transform: uppercase; letter-spacing: .06em; margin-top: 7px; } /* (5) Santé éditoriale — flux compact + anneau + barres facteurs */ .sf-pipe-sm .step { padding: 9px 10px; } .sf-pipe-sm .step .n { font-size: 18px; } .sf-pipe-sm .step .l { font-size: 8.5px; margin-top: 4px; } .sf-sante { display: flex; gap: 26px; align-items: center; background: #fff; border: 1px solid var(--gi-border); border-radius: var(--gi-radius); padding: 16px 18px; margin-top: 14px; flex-wrap: wrap; } .sf-sante-score { display: flex; align-items: center; gap: 13px; } .sf-ring { flex: 0 0 auto; } .sf-sante-factors { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 10px; } .sf-fbar-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; } .sf-fbar-l { color: var(--gi-gray-600); text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px; } .sf-fbar-v { font-weight: 700; font-family: var(--gi-font-display); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--gi-black); } .sf-fbar-track { height: 6px; border-radius: 4px; background: var(--gi-gray-100); overflow: hidden; } .sf-fbar-fill { height: 100%; border-radius: 4px; transition: width .3s var(--gi-ease, ease); } /* Dark */ [data-theme="dark"] .sf-vis, [data-theme="dark"] .sf-act-tile, [data-theme="dark"] .sf-sante { background: var(--sf-card, #18181B); border-color: var(--sf-border, #2A2A2F); } [data-theme="dark"] .sf-agir-label, [data-theme="dark"] .sf-act-tile .v, [data-theme="dark"] .sf-fbar-v { color: var(--sf-text, #E8E6E0); } [data-theme="dark"] .sf-hzbar, [data-theme="dark"] .sf-fbar-track { background: var(--sf-border, #2A2A2F); } [data-theme="dark"] .sf-ring circle:first-child { stroke: var(--sf-border, #2A2A2F); } [data-theme="dark"] .sf-hbadge.is-none { background: var(--sf-border, #2A2A2F); color: var(--sf-text-muted, #9CA0A8); } /* ── Cockpit cross-marques (2026-06-23) · mini-jauge avance + badge à-valider table portefeuille ── */ /* Barre de progression pleine largeur réutilisable (budget Ads, etc.) */ .sf-pbar { height: 8px; border-radius: 4px; background: var(--gi-gray-100); overflow: hidden; } .sf-pbar-fill { height: 100%; border-radius: 4px; transition: width .3s var(--gi-ease, ease); } [data-theme="dark"] .sf-pbar { background: var(--sf-border, #2A2A2F); } .sf-mini-jauge { display: inline-block; width: 80px; height: 6px; border-radius: 4px; background: var(--gi-gray-100); vertical-align: middle; overflow: hidden; } .sf-mini-jauge-fill { display: block; height: 100%; border-radius: 4px; } .sf-mini-jauge-lbl { font-family: var(--gi-font-display); font-weight: 700; font-size: 12.5px; margin-left: 9px; vertical-align: middle; font-variant-numeric: tabular-nums; } .sf-port-pend { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--gi-cyan-soft, #e6f7fb); color: var(--gi-cyan); font-family: var(--gi-font-display); font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums; } .sf-port-row:hover { background: var(--gi-gray-50); } [data-theme="dark"] .sf-mini-jauge { background: var(--sf-border, #2A2A2F); } [data-theme="dark"] .sf-port-row:hover { background: var(--sf-surface-hover, rgba(255,255,255,.04)); } /* ── Cockpit insight (2026-06-23) · sélecteur période + KPI enrichis + entêtes triables ── */ .sf-period-seg { display: inline-flex; border: 1px solid var(--gi-border); border-radius: 8px; overflow: hidden; } .sf-period-btn { border: 0; background: #fff; padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--gi-gray-600); cursor: pointer; border-right: 1px solid var(--gi-border); transition: background .15s, color .15s; } .sf-period-btn:last-child { border-right: 0; } .sf-period-btn:hover { background: var(--gi-gray-50); } .sf-period-btn.active { background: var(--gi-cyan); color: #fff; } .sf-kpi-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; } .sf-kpi-top .sf-spark { width: 72px; height: 20px; opacity: .85; flex: 0 0 auto; } .sf-kpi-sub { font-size: 11.5px; color: var(--gi-gray-600); margin-top: 5px; } .sf-kpi-delta { display: inline-block; font-size: 11px; font-weight: 600; margin-top: 6px; } .sf-kpi-delta.up { color: var(--gi-success); } .sf-kpi-delta.down { color: var(--gi-danger); } .sf-kpi-delta.neutral { color: var(--gi-gray-500); } .sf-kpi-delta .muted { font-weight: 400; } .sf-port-th[data-sortcol] { cursor: pointer; user-select: none; white-space: nowrap; } .sf-port-th[data-sortcol]:hover { color: var(--gi-cyan); } .sf-port-th.active { color: var(--gi-cyan); } [data-theme="dark"] .sf-period-btn { background: var(--sf-card, #18181B); color: var(--sf-text-muted, #9CA0A8); border-color: var(--sf-border, #2A2A2F); } [data-theme="dark"] .sf-period-btn:hover { background: var(--sf-surface-hover, rgba(255,255,255,.04)); } [data-theme="dark"] .sf-period-btn.active { background: var(--gi-cyan); color: #fff; } [data-theme="dark"] .sf-period-seg { border-color: var(--sf-border, #2A2A2F); } /* ── Overrides dark (refonte 2026-06-01) ── Anciennement: `@media (prefers-color-scheme: dark)` → bug ! Forçait le thème dark selon les préférences OS, indépendamment du `data-theme` choisi dans SocialFlow. Conséquence: un user en OS dark + theme app light voyait quand même ces composants en sombre (sf-errorbox, sf-notif-pop, sf-cmdk). Bascule sur `[data-theme="dark"]` pour aligner sur le système app (les overrides .sf-cc-card étaient déjà en data-theme plus bas, on consolide ici). */ [data-theme="dark"] .sf-errorbox { background: var(--sf-surface-elevated); border-color: var(--sf-border); } [data-theme="dark"] .sf-notif-pop, [data-theme="dark"] .sf-cmdk { background: var(--sf-surface-elevated); border-color: var(--sf-border); } [data-theme="dark"] .sf-notif-pop-head { border-color: var(--sf-border); } [data-theme="dark"] .sf-notif-item:hover { background: var(--sf-surface-hover); } [data-theme="dark"] .sf-notif-item.unread { background: var(--sf-accent-soft, rgba(0,188,212,.10)); } /* Fix audit 2026-05-31 · même overrides pour le dark mode manuel via [data-theme="dark"] (Profile > préférences). Le CSS ne permet pas de mixer @media et [attribute] dans un seul sélecteur, donc on duplique. */ [data-theme="dark"] .sf-cc-card { background: var(--sf-card, #18181B); border-color: var(--sf-border, #2A2A2F); } [data-theme="dark"] .sf-cc-card-value { color: var(--sf-text, #E8E6E0); } [data-theme="dark"] .sf-cc-card-eyebrow { color: var(--sf-text-muted, #9CA0A8); } [data-theme="dark"] .sf-cc-card-desc { color: var(--sf-text-muted, #9CA0A8); } [data-theme="dark"] .sf-cc-card-ic { color: var(--sf-text-muted, #9CA0A8); } [data-theme="dark"] .sf-cc-card.is-alert .sf-cc-card-ic { color: var(--gi-warning); } [data-theme="dark"] .sf-cc-card.is-urgent .sf-cc-card-ic { color: var(--gi-danger); } [data-theme="dark"] .sf-cc-card.is-good .sf-cc-card-ic { color: var(--gi-success); } [data-theme="dark"] .sf-cc-card:hover { border-color: var(--gi-cyan); } /* ── Tableau de diff (versions de posts) ── */ .sf-diff-table { width: 100%; font-size: 12.5px; border-collapse: collapse; } .sf-diff-table thead th { text-align: left; padding: 8px 10px; background: var(--gi-gray-50); font-family: var(--gi-font-display); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--gi-gray-600); border-bottom: 1px solid var(--gi-border); } .sf-diff-table tbody td { padding: 8px 10px; border-bottom: 1px solid var(--gi-gray-50); vertical-align: top; font-family: var(--gi-font-body); } .sf-diff-table td.lbl { width: 110px; font-weight: 600; color: var(--gi-gray-800); } .sf-diff-table td.old, .sf-diff-table td.new { word-break: break-word; max-width: 240px; } .sf-diff-table td.arrow { color: var(--gi-gray-400); text-align: center; width: 22px; } .sf-diff-table tr.diff-changed { background: rgba(232,144,52,.06); } .sf-diff-table tr.diff-changed td.old { color: var(--gi-danger); text-decoration: line-through; opacity: .75; } .sf-diff-table tr.diff-changed td.new { color: var(--gi-success); font-weight: 600; } /* ── Lignes versions dans le drawer ── */ .sf-ver-row:hover { background: var(--gi-gray-50); margin: 0 -10px; padding: 8px 10px !important; } /* ── Bouton Préparation client sur calendrier (mode Liste) ── */ .cal-prep-btn { background: var(--gi-cyan); color: #fff; } .cal-prep-btn:hover { background: var(--gi-cyan-active); } /* ════════════════════════════════════════════════════════════════════════ ★ COUCHE POSTMOCK ENRICHIE · audit 2026-05-30 ★ ──────────────────────────────────────────────────────────────────────── Toolbar (cover/contain · IG format · safe zones) · ratio detection + badge crop · lightbox · full preview · headers + stats enrichis. ════════════════════════════════════════════════════════════════════════ */ /* ── Toolbar PostMock · refonte light 2026-06-01 ── Avant : fond gray-50 + boutons fond #fff → tout plat, manque de hiérarchie. Maintenant : panel blanc surélevé avec petite ombre (style design system Linear), boutons ghost (transparent + hover subtle), groupes séparés par séparateurs fins. Le pm-tool-primary garde son look gi-black → cyan en hover (signature GI). */ .pm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; background: var(--gi-white, #fff); border: 1px solid var(--gi-border); border-radius: 8px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04); } .pm-tool-group { display: inline-flex; align-items: center; gap: 2px; padding: 0 2px; } .pm-tool-group + .pm-tool-group { border-left: 1px solid var(--gi-border); padding-left: 8px; margin-left: 4px; } .pm-tool-label { font-size: 10.5px; font-weight: 600; color: var(--gi-gray-500); text-transform: uppercase; letter-spacing: .08em; padding-right: 6px; } .pm-tool-btn { background: transparent; border: 1px solid transparent; color: var(--gi-gray-700); padding: 6px 11px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 500; font-family: var(--gi-font-body); transition: background .15s, color .15s, border-color .15s; } .pm-tool-btn:hover { background: var(--gi-gray-100); color: var(--gi-black); } .pm-tool-btn.is-active { background: var(--gi-cyan-soft, rgba(0,188,212,.12)); color: var(--gi-cyan); border-color: var(--gi-cyan); font-weight: 600; } .pm-tool-btn.is-active:hover { background: var(--gi-cyan); color: #fff; } .pm-tool-btn.pm-tool-mini { padding: 5px 9px; font-size: 11px; font-family: var(--gi-font-mono, monospace); } .pm-tool-btn.pm-tool-primary { background: var(--gi-black); color: #fff; border-color: var(--gi-black); font-weight: 600; margin-left: auto; } .pm-tool-btn.pm-tool-primary:hover { background: var(--gi-cyan); border-color: var(--gi-cyan); color: #fff; } .pm-tool-spacer { flex: 1; } /* Modes vue · crop warn · safe overlays · header enrichi · stats · Instagram re-order · TikTok max → migrés vers /assets/post-mock.css (refactor 2026-06-03 Phase 2.2 cleanup). Cf. ADR 2026-06-03-post-mock-shared-module.md. */ /* ── Lightbox plein écran (audit C) · admin-only · GARDÉE ici ── */ .pm-lightbox { position: fixed; inset: 0; z-index: 250; display: none; } .pm-lightbox.open { display: block; } .pm-lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.92); } .pm-lightbox-stage { position: absolute; inset: 40px 80px 60px; display: flex; align-items: center; justify-content: center; pointer-events: none; } .pm-lightbox-stage img, .pm-lightbox-stage video { max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: auto; box-shadow: 0 20px 60px rgba(0,0,0,.5); } .pm-lightbox-close { position: absolute; top: 18px; right: 22px; background: rgba(255,255,255,.1); color: #fff; border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 24px; cursor: pointer; line-height: 1; transition: background .15s; z-index: 2; } .pm-lightbox-close:hover { background: rgba(255,255,255,.25); } .pm-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.1); color: #fff; border: none; width: 52px; height: 52px; border-radius: 50%; font-size: 32px; cursor: pointer; line-height: 1; transition: background .15s; z-index: 2; } .pm-lightbox-nav:hover:not(:disabled) { background: rgba(255,255,255,.25); } .pm-lightbox-nav:disabled { opacity: .25; cursor: default; } .pm-lb-prev { left: 24px; } .pm-lb-next { right: 24px; } .pm-lightbox-meta { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: #fff; font-family: var(--gi-font-mono, monospace); font-size: 12px; background: rgba(0,0,0,.5); padding: 6px 14px; border-radius: 16px; max-width: 80vw; text-align: center; } /* ── Full preview modale (audit E) ── */ .modal .sheet.pm-fullsheet { width: min(96vw, 1240px) !important; max-width: 1240px !important; max-height: 92vh; overflow-y: auto; } .pm-fullhost .pm-grid { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 22px; } .pm-fullhost .pm-tiktok { max-width: 320px; } /* ── pm-toolbar · overrides dark (refonte 2026-06-01) ── Anciennement: `@media (prefers-color-scheme: dark)` → bug ! Forçait le thème dark selon les préférences OS, indépendamment du `data-theme` choisi dans SocialFlow. Conséquence: un user en OS dark + theme app light voyait quand même `pm-toolbar` en sombre. Et inversement en OS light + theme app dark. Maintenant aligné sur le système `[data-theme="dark"]` + semantic tokens `--sf-*`. */ [data-theme="dark"] .pm-toolbar { background: var(--sf-surface-raised); border-color: var(--sf-border); box-shadow: none; } [data-theme="dark"] .pm-tool-btn { background: transparent; color: var(--sf-text-secondary); border-color: transparent; } [data-theme="dark"] .pm-tool-btn:hover { background: var(--sf-surface-hover); color: var(--sf-text-primary); } [data-theme="dark"] .pm-tool-btn.is-active { background: var(--sf-accent-soft, rgba(0,188,212,.18)); color: var(--sf-accent); border-color: var(--sf-accent); } [data-theme="dark"] .pm-tool-btn.is-active:hover { background: var(--sf-accent); color: var(--sf-text-on-accent, #fff); } [data-theme="dark"] .pm-tool-btn.pm-tool-primary { background: var(--sf-accent); border-color: var(--sf-accent); color: var(--sf-text-on-accent, #fff); } [data-theme="dark"] .pm-tool-btn.pm-tool-primary:hover { background: var(--sf-accent-hover); border-color: var(--sf-accent-hover); } [data-theme="dark"] .pm-tool-label { color: var(--sf-text-muted); } [data-theme="dark"] .pm-tool-group + .pm-tool-group { border-left-color: var(--sf-border); } /* ★ Fin couche PostMock enrichie ★ */ /* ════════════════════════════════════════════════════════════════════════ ★ COUCHE COMPOSER ENRICHI · audit 2026-05-30 ★ Compteurs barres · emoji picker catégorisé · toolbar · hashtags · best-time · bibliothèque visuels. ════════════════════════════════════════════════════════════════════════ */ /* ── Compteurs barre par plateforme ── */ .sf-cnts { display: flex; flex-direction: column; gap: 4px; } .sf-cnt-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; padding: 3px 0; } .sf-cnt-ic { color: var(--gi-gray-600); flex-shrink: 0; } .sf-cnt-ic svg { width: 14px; height: 14px; } .sf-cnt-bar { flex: 1; height: 4px; background: var(--gi-gray-100); border-radius: 2px; overflow: hidden; max-width: 240px; } .sf-cnt-fill { height: 100%; transition: width .2s, background .2s; background: var(--gi-cyan); border-radius: 2px; } .sf-cnt-num { font-family: var(--gi-font-mono, monospace); font-size: 10.5px; color: var(--gi-gray-600); min-width: 100px; text-align: right; } /* Compteur 4 paliers · refonte 2026-06-03 Phase 3 v3 (Kevin) · barre = % HARD cap. ok = vert (marge confortable) · mid = cyan (encore de la marge) · warn = jaune (presque plein) · hard = rouge pulse (rejet API) */ .sf-cnt-row.sf-cnt-ok .sf-cnt-fill { background: #34d27b; } .sf-cnt-row.sf-cnt-mid .sf-cnt-fill { background: var(--gi-cyan); } .sf-cnt-row.sf-cnt-warn .sf-cnt-fill { background: #f5a623; } .sf-cnt-row.sf-cnt-warn .sf-cnt-num { color: #7a4d0c; font-weight: 600; } .sf-cnt-row.sf-cnt-hard .sf-cnt-fill { background: var(--gi-danger); animation: sf-pulse-bar 1.5s infinite; } .sf-cnt-row.sf-cnt-hard .sf-cnt-num { color: var(--gi-danger); font-weight: 700; } /* Compteur local sous textarea override per-platform · un peu d'air au-dessus. */ .sf-cnt-host-ov { margin-top: 6px; padding: 0 2px; } .sf-cnt-row .sf-cnt-num { min-width: 200px; } /* Mention discrète « tronqué après N » · gris italic, info secondaire */ .sf-cnt-hint { color: var(--gi-gray-500); font-size: 10.5px; font-style: italic; margin-left: 8px; cursor: help; } @keyframes sf-pulse-bar { 0%,100%{opacity:1} 50%{opacity:.5} } /* ── Toolbar message composer (emoji, hashtags, visuels) ── */ .sf-msg-toolbar { display: flex; gap: 4px; align-items: center; padding: 4px 0 6px; flex-wrap: wrap; } .sf-msg-tool-btn { background: var(--gi-gray-50); border: 1px solid var(--gi-border); padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 11.5px; font-family: var(--gi-font-body); transition: all .15s; } .sf-msg-tool-btn:hover { background: var(--gi-gray-100); } .sf-msg-tool-spacer { flex: 1; } /* ── Emoji picker catégorisé ── */ .sf-emoji-picker-wrap { position: relative; } .sf-emoji-picker { position: absolute; top: 0; left: 0; z-index: 50; width: min(380px, 92%); background: #fff; border: 1px solid var(--gi-border); border-radius: 8px; box-shadow: var(--gi-elev-3); display: none; overflow: hidden; } .sf-emoji-picker.open { display: block; } .sf-emp-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--gi-border); overflow-x: auto; } .sf-emp-tab { background: none; border: none; padding: 8px 12px; cursor: pointer; font-size: 11px; font-family: var(--gi-font-display); font-weight: 600; color: var(--gi-gray-600); border-bottom: 2px solid transparent; white-space: nowrap; transition: color .15s, border-color .15s; } .sf-emp-tab.is-active { color: var(--gi-cyan); border-bottom-color: var(--gi-cyan); } .sf-emp-tab:hover { color: var(--gi-black); } .sf-emp-panels { padding: 8px; } .sf-emp-panel { display: none; max-height: 220px; overflow-y: auto; gap: 4px; } .sf-emp-panel.is-active { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); } .sf-emp-emoji { background: none; border: none; cursor: pointer; padding: 4px; font-size: 20px; border-radius: 4px; transition: background .12s; } .sf-emp-emoji:hover { background: var(--gi-gray-100); } /* ── Bouton inline (suggérer créneau) ── */ .sf-inline-btn { background: none; border: 1px solid var(--gi-border); color: var(--gi-cyan); padding: 2px 8px; border-radius: 4px; cursor: pointer; font-size: 10.5px; font-weight: 600; margin-left: 6px; font-family: var(--gi-font-body); } .sf-inline-btn:hover { background: var(--gi-cyan-soft); } /* ── Hashtag suggestions ── */ .sf-htag-grid { display: flex; flex-wrap: wrap; gap: 6px; } .sf-htag-pill { background: var(--gi-gray-50); border: 1px solid var(--gi-border); padding: 5px 10px; border-radius: 14px; cursor: pointer; font-size: 12px; font-family: var(--gi-font-mono, monospace); color: var(--gi-cyan); transition: all .15s; } .sf-htag-pill:hover { background: var(--gi-cyan-soft); border-color: var(--gi-cyan); } .sf-htag-pill.is-used { background: var(--gi-success-soft, #d4f7e3); color: var(--gi-success); border-color: var(--gi-success); } .sf-htag-count { font-size: 10px; color: var(--gi-gray-500); margin-right: 4px; } /* ── Best-time list ── */ .sf-bt-list { display: flex; flex-direction: column; gap: 8px; } .sf-bt-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--gi-gray-50); border: 1px solid var(--gi-border); border-radius: 8px; } .sf-bt-rank { width: 28px; height: 28px; background: var(--gi-cyan); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--gi-font-mono, monospace); font-size: 11px; font-weight: 700; flex-shrink: 0; } .sf-bt-info { flex: 1; } .sf-bt-when { font-family: var(--gi-font-display); font-size: 13.5px; font-weight: 500; } .sf-bt-meta { font-size: 11.5px; color: var(--gi-gray-600); margin-top: 2px; } .sf-bt-action { text-align: right; } /* ── Bibliothèque visuels ── */ .sf-vl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; max-height: 60vh; overflow-y: auto; padding: 4px; } .sf-vl-item { background: var(--gi-gray-50); border: 1px solid var(--gi-border); border-radius: 6px; overflow: hidden; cursor: pointer; transition: transform .12s, border-color .15s, box-shadow .15s; } .sf-vl-item:hover { transform: translateY(-1px); border-color: var(--gi-cyan); box-shadow: var(--gi-elev-1); } .sf-vl-preview { position: relative; aspect-ratio: 1/1; background: #000; overflow: hidden; } .sf-vl-preview img, .sf-vl-preview video { width: 100%; height: 100%; object-fit: cover; display: block; } .sf-vl-used { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.65); color: #fff; padding: 2px 6px; border-radius: 10px; font-size: 10px; font-family: var(--gi-font-mono, monospace); } .sf-vl-meta { padding: 6px 8px; display: flex; justify-content: space-between; align-items: center; gap: 4px; min-height: 28px; } .sf-vl-tag { font-size: 10.5px; color: var(--gi-gray-700); background: var(--gi-cyan-soft); padding: 2px 6px; border-radius: 4px; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Dropzone drag & drop (refonte 2026-06-02 Kevin) · zone cliquable + cible visuelle pour le drop. Border dashée par défaut, devient pleine cyan + bg cyan-soft quand l'utilisateur drag des fichiers au-dessus de la modale (.is-over ajoutée par JS). */ .sf-vl-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 22px 16px; margin-bottom: 14px; border: 2px dashed var(--gi-border-strong); border-radius: 8px; background: var(--gi-gray-50); color: var(--gi-gray-700); cursor: pointer; text-align: center; transition: background .15s, border-color .15s, color .15s; } .sf-vl-dropzone:hover { background: var(--gi-gray-100); border-color: var(--gi-cyan); color: var(--gi-black); } .sf-vl-dropzone.is-over { background: var(--gi-cyan-soft); border-color: var(--gi-cyan); color: var(--gi-cyan); border-style: solid; } .sf-vl-dropzone-ic { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.7); color: var(--gi-gray-700); margin-bottom: 4px; } .sf-vl-dropzone.is-over .sf-vl-dropzone-ic { background: var(--gi-white); color: var(--gi-cyan); } .sf-vl-dropzone-title { font-family: var(--gi-font-display); font-weight: 600; font-size: 14px; } .sf-vl-dropzone-sub { font-size: 11.5px; line-height: 1.4; } /* Dark mode · sans scope .sf-shell car modale attachée à body */ [data-theme="dark"] .sf-vl-dropzone { background: var(--sf-surface-raised); border-color: var(--sf-border-strong); color: var(--sf-text-secondary); } [data-theme="dark"] .sf-vl-dropzone:hover { background: var(--sf-surface-hover); border-color: var(--sf-accent); color: var(--sf-text-primary); } [data-theme="dark"] .sf-vl-dropzone.is-over { background: var(--sf-accent-soft, rgba(0,188,212,.15)); border-color: var(--sf-accent); color: var(--sf-accent); } [data-theme="dark"] .sf-vl-dropzone-ic { background: var(--sf-surface-elevated); color: var(--sf-text-secondary); } [data-theme="dark"] .sf-vl-dropzone.is-over .sf-vl-dropzone-ic { background: var(--sf-surface-raised); color: var(--sf-accent); } [data-theme="dark"] .sf-vl-item { background: var(--sf-surface-raised); border-color: var(--sf-border); } [data-theme="dark"] .sf-vl-tag { background: var(--sf-accent-soft, rgba(0,188,212,.15)); color: var(--sf-text-primary); } /* Kevin 2026-06-10 · refonte Bibliothèque visuels (P2+P3) · filtres, badges enrichis, vidéo poster */ .sf-vl-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; padding: 8px 0; border-bottom: 1px solid var(--gi-border); } .sf-vl-chips { display: inline-flex; gap: 4px; } .sf-vl-chip { padding: 5px 11px; border: 1px solid var(--gi-border-strong); background: #fff; cursor: pointer; font-family: var(--gi-font-display); font-size: 11.5px; font-weight: 500; color: var(--gi-gray-700); border-radius: 13px; transition: all 120ms ease; } .sf-vl-chip:hover { border-color: var(--gi-black); color: var(--gi-black); } .sf-vl-chip.is-active { background: var(--gi-black); color: #fff; border-color: var(--gi-black); } .sf-vl-sort { max-width: 170px; height: 30px; padding: 4px 8px; font-size: 12px; } .sf-vl-counter { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; } [data-theme="dark"] .sf-vl-chip { background: var(--sf-surface-raised); border-color: var(--sf-border); color: var(--sf-text-secondary); } [data-theme="dark"] .sf-vl-chip:hover { border-color: var(--sf-text-primary); color: var(--sf-text-primary); } [data-theme="dark"] .sf-vl-chip.is-active { background: var(--sf-text-primary); color: var(--sf-surface); border-color: var(--sf-text-primary); } [data-theme="dark"] .sf-vl-filters { border-bottom-color: var(--sf-border); } /* Vidéo : poster + overlay play + durée */ .sf-vl-video-wrap { position: relative; width: 100%; height: 100%; } .sf-vl-video-wrap img, .sf-vl-video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; } .sf-vl-play-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; background: rgba(0,0,0,.6); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; pointer-events: none; transition: background 120ms ease; } .sf-vl-item:hover .sf-vl-play-overlay { background: var(--gi-cyan); } .sf-vl-duration { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,.7); color: #fff; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-variant-numeric: tabular-nums; } .sf-vl-dim { position: absolute; bottom: 6px; left: 6px; background: rgba(0,0,0,.6); color: #fff; padding: 1px 6px; border-radius: 3px; font-size: 9.5px; font-variant-numeric: tabular-nums; letter-spacing: .02em; } /* Tag édition inline · placeholder « + tag » plus discret */ .sf-vl-tag.is-empty { background: transparent; border: 1px dashed var(--gi-border); color: var(--gi-gray-500); cursor: pointer; font-style: italic; } .sf-vl-tag.is-empty:hover { border-color: var(--gi-cyan); color: var(--gi-cyan); } .sf-vl-tag-input { height: 22px; padding: 2px 6px; font-size: 11px; max-width: 110px; } [data-theme="dark"] .sf-vl-tag.is-empty { color: var(--sf-text-muted); border-color: var(--sf-border); } [data-theme="dark"] .sf-vl-tag.is-empty:hover { border-color: var(--gi-cyan); color: var(--gi-cyan); } /* Pagination "Charger plus" */ .sf-vl-loadmore { padding: 16px 0; } /* Sélection multi : badge ordre */ .sf-vl-item.is-selected { border-color: var(--gi-cyan); box-shadow: 0 0 0 2px var(--gi-cyan); } .sf-vl-selected-badge { position: absolute; top: 6px; left: 6px; background: var(--gi-cyan); color: #fff; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.3); } /* Bulk actions (P4.1) · barre flottante affichée quand bulkMode + selection */ .sf-vl-bulk-toggle { padding: 4px 10px; font-size: 11.5px; } .sf-vl-bulk-toggle.is-active { background: var(--gi-cyan); color: #fff; border-color: var(--gi-cyan); } .sf-vl-bulkbar { display: flex; align-items: center; gap: 8px; background: var(--gi-cyan-soft, #e8f5fb); border: 1px solid var(--gi-cyan); border-radius: var(--gi-radius); padding: 8px 14px; margin-bottom: 12px; } .sf-vl-bulkbar-count { font-size: 12.5px; font-weight: 600; color: var(--gi-cyan); margin-right: auto; font-variant-numeric: tabular-nums; } .sf-vl-bulk-danger { color: var(--gi-danger, #d63a3a); border-color: var(--gi-danger, #d63a3a); } .sf-vl-bulk-danger:hover { background: var(--gi-danger, #d63a3a); color: #fff; } [data-theme="dark"] .sf-vl-bulkbar { background: rgba(0,159,227,.12); border-color: var(--gi-cyan); } [data-theme="dark"] .sf-vl-bulkbar-count { color: var(--gi-cyan); } /* Lightbox aperçu (double-clic sur un visuel de la bibliothèque) · refonte P4 */ .sf-vl-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; } .sf-vl-lb-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.85); } .sf-vl-lb-content { position: relative; z-index: 1; max-width: 90vw; max-height: 90vh; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.5); display: flex; flex-direction: column; } .sf-vl-lb-close { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,.55); border: none; color: #fff; width: 36px; height: 36px; border-radius: 50%; font-size: 22px; cursor: pointer; z-index: 2; line-height: 1; padding: 0; } .sf-vl-lb-close:hover { background: var(--gi-cyan); } .sf-vl-lb-media { background: #000; display: flex; align-items: center; justify-content: center; max-height: 75vh; overflow: hidden; } .sf-vl-lb-media img, .sf-vl-lb-media video { max-width: 90vw; max-height: 75vh; object-fit: contain; display: block; } .sf-vl-lb-info { padding: 14px 18px; border-top: 1px solid var(--gi-border); background: var(--gi-gray-50); } .sf-vl-lb-name { font-family: var(--gi-font-display); font-size: 13px; font-weight: 600; margin-bottom: 8px; word-break: break-all; } .sf-vl-lb-chips { display: flex; flex-wrap: wrap; gap: 6px; } .sf-vl-lb-chip { font-size: 11px; padding: 3px 9px; background: #fff; border: 1px solid var(--gi-border); border-radius: 12px; color: var(--gi-gray-700); } [data-theme="dark"] .sf-vl-lb-content { background: var(--sf-surface-elevated); } [data-theme="dark"] .sf-vl-lb-info { background: var(--sf-surface-raised); border-top-color: var(--sf-border); } [data-theme="dark"] .sf-vl-lb-chip { background: var(--sf-surface-elevated); border-color: var(--sf-border); color: var(--sf-text-secondary); } [data-theme="dark"] .sf-vl-lb-name { color: var(--sf-text-primary); } /* ★ Fin couche composer enrichi ★ */ /* ════════════════════════════════════════════════════════════════════════ ★ COUCHE VALIDATION MOBILE-FIRST · audit 2026-05-30 ★ Override pour le viewport mobile sur /validation/:slug/:token Cible les classes existantes : vp-wrap, vp-header, sf-vcard, acts ════════════════════════════════════════════════════════════════════════ */ @media (max-width: 700px) { /* Header compact en mobile */ .vp-header { padding: 12px 14px !important; flex-direction: column; align-items: flex-start; gap: 6px; } .vp-header > div:first-child img { width: 28px !important; height: 28px !important; } .vp-header .gi-eyebrow { font-size: 9px !important; } /* Wrap full-width */ .vp-wrap { padding: 16px 12px 100px !important; } /* Onglets tabs scrollables horizontalement */ .sf-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .sf-tabs button, .sf-tabs > * { white-space: nowrap; flex-shrink: 0; } /* Carte post à valider · plus aérée */ .sf-vcard { border-radius: 8px; padding: 12px !important; margin-bottom: 14px !important; } .sf-vcard .hd { flex-wrap: wrap; gap: 6px !important; padding: 8px 0 !important; font-size: 11px; } .sf-vcard .bd { padding: 10px 0 !important; } .sf-vcard .msg { font-size: 14.5px !important; line-height: 1.55 !important; } .sf-vcard .tags { font-size: 12.5px !important; } /* Mocks aperçus en plein largeur mobile */ .sf-vcard .pm-grid { grid-template-columns: 1fr !important; gap: 14px !important; } .sf-vcard .pm { max-width: 100% !important; } /* Actions sticky en bas */ .sf-vcard .acts { position: sticky; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,.97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--gi-border); margin: 14px -12px -12px !important; padding: 10px 12px !important; display: flex; gap: 6px !important; z-index: 10; } .sf-vcard .acts .gi-btn { flex: 1; padding: 12px 6px !important; font-size: 13px !important; min-height: 44px; justify-content: center; } .sf-vcard .acts .gi-btn .ic { width: 14px; height: 14px; flex-shrink: 0; } /* Inputs : 16px pour éviter le zoom auto iOS */ .vp-wrap .gi-field-input, .vp-wrap .gi-field-textarea, .vp-wrap textarea, .vp-wrap input[type="text"], .vp-wrap input[type="email"] { font-size: 16px !important; } /* Gate (saisie email accès) plus aéré */ #gate { margin: 20px auto !important; padding: 4px; } #gate .gi-card-body { padding: 18px !important; } #gate h1 { font-size: 18px !important; } /* Bouton "Tout approuver" en pleine largeur sous l'onglet */ #approve-all { width: 100%; margin-top: 8px; padding: 10px !important; font-size: 13px !important; min-height: 40px; } .vp-wrap .spread { flex-direction: column; align-items: stretch !important; gap: 8px !important; } /* Footer + petit */ .vp-foot { padding: 20px 12px !important; font-size: 11px !important; } } /* Touch targets +44px universels (mobile guidelines Apple/Google) */ @media (pointer: coarse) { .sf-vcard .acts .gi-btn { min-height: 44px; } .gi-btn-sm { min-height: 36px; } } /* ★ Fin couche validation mobile ★ */ /* ════════════════════════════════════════════════════════════════════════ ★ COUCHE SETTINGS / ACCESS / KEYS · audit 2026-05-30 (2e round) ★ Connexions API en grille · status dot · matrice rôles · keys inactives ════════════════════════════════════════════════════════════════════════ */ /* ── Connexions API · grille de cartes ── */ .sf-conn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; } .sf-conn-card { background: #fff; border: 1px solid var(--gi-border); border-radius: 8px; padding: 14px 16px; transition: border-color .15s, box-shadow .15s; } .sf-conn-card.tone-ok { border-left: 3px solid var(--gi-success); } .sf-conn-card.tone-warn { border-left: 3px solid var(--gi-warning); } .sf-conn-card.tone-bad { border-left: 3px solid var(--gi-danger); } .sf-conn-card.tone-off { border-left: 3px solid var(--gi-gray-300); background: var(--gi-gray-50); } .sf-conn-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; } .sf-conn-icon { position: relative; flex-shrink: 0; width: 32px; height: 32px; } .sf-conn-icon svg { width: 32px; height: 32px; display: block; } .sf-conn-status-dot { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; background: var(--gi-gray-400); } .sf-conn-status-dot.ok { background: var(--gi-success); } .sf-conn-status-dot.warn { background: var(--gi-warning); animation: sf-pulse-bar 2s infinite; } .sf-conn-status-dot.bad { background: var(--gi-danger); animation: sf-pulse-bar 1.5s infinite; } .sf-conn-status-dot.off { background: var(--gi-gray-300); } .sf-conn-title { flex: 1; } .sf-conn-title b { font-family: var(--gi-font-display); font-size: 14px; } .sf-conn-sub { display: block; font-size: 11px; color: var(--gi-gray-600); margin-top: 1px; } .sf-conn-status { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; } .sf-conn-status.ok { background: rgba(30,154,90,.12); color: var(--gi-success); } .sf-conn-status.warn { background: rgba(232,144,52,.12); color: var(--gi-warning); } .sf-conn-status.bad { background: rgba(214,58,58,.12); color: var(--gi-danger); } .sf-conn-status.off { background: var(--gi-gray-100); color: var(--gi-gray-600); } .sf-conn-meta { font-size: 12px; color: var(--gi-gray-700); line-height: 1.5; margin-bottom: 10px; } .sf-conn-meta .sep { margin: 0 6px; color: var(--gi-gray-400); } .sf-conn-meta.empty { color: var(--gi-gray-500); font-style: italic; } .sf-conn-exp { margin-top: 4px; font-size: 11px; font-weight: 600; } .sf-conn-exp.ok { color: var(--gi-success); } .sf-conn-exp.warn { color: var(--gi-warning); } .sf-conn-exp.bad { color: var(--gi-danger); } .sf-conn-test-result { margin-top: 6px; font-size: 11px; line-height: 1.45; } .sf-conn-testing { color: var(--gi-cyan); font-weight: 500; } .sf-conn-test-ok { color: var(--gi-success); } .sf-conn-test-bad { color: var(--gi-danger); } .sf-conn-actions { display: flex; gap: 4px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--gi-gray-50); } .sf-conn-btn { background: #fff; border: 1px solid var(--gi-border); padding: 4px 10px; border-radius: 4px; font-size: 11.5px; cursor: pointer; font-family: var(--gi-font-body); color: var(--gi-gray-700); transition: all .15s; } .sf-conn-btn:hover { background: var(--gi-gray-50); } .sf-conn-btn.primary { background: var(--gi-cyan); color: #fff; border-color: var(--gi-cyan); } .sf-conn-btn.primary:hover { background: var(--gi-cyan-active); } .sf-conn-btn.danger { color: var(--gi-danger); border-color: var(--gi-danger); } .sf-conn-btn.danger:hover { background: var(--gi-danger); color: #fff; } .sf-conn-btn:disabled { opacity: .5; cursor: default; } /* ── Matrice accès users ── */ .sf-access-table td { vertical-align: middle; padding: 10px 14px; } .sf-access-av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--gi-cyan); color: #fff; font-weight: 600; font-family: var(--gi-font-display); font-size: 13px; } .sf-access-av-init { font-family: var(--gi-font-display); } /* ── Keys inactives ── */ .sf-key-badge { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 10px; font-size: 10px; font-weight: 600; font-family: var(--gi-font-mono, monospace); } .sf-key-badge.inactive { background: rgba(214,58,58,.12); color: var(--gi-danger); } .sf-key-badge.stale { background: rgba(232,144,52,.12); color: var(--gi-warning); } .sf-key-inactive { opacity: .7; } .sf-key-inactive:hover { opacity: 1; } /* ════════════════════════════════════════════════════════════════════════ ★ AI USAGE SPARKLINE · audit 2026-05-30 (2e round) ★ ════════════════════════════════════════════════════════════════════════ */ .sf-ai-spark-card { margin-bottom: 18px; } .sf-ai-trend { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 14px; font-family: var(--gi-font-mono, monospace); font-size: 12px; font-weight: 700; } .sf-ai-trend.tone-stable { background: var(--gi-gray-100); color: var(--gi-gray-700); } .sf-ai-trend.tone-mild { background: rgba(0,159,227,.1); color: var(--gi-cyan); } .sf-ai-trend.tone-up { background: rgba(214,58,58,.12); color: var(--gi-danger); } .sf-ai-trend.tone-down { background: rgba(30,154,90,.12); color: var(--gi-success); } .sf-ai-trend-alert { margin-top: 14px; padding: 10px 14px; background: rgba(232,144,52,.08); border-left: 3px solid var(--gi-warning); font-size: 13px; line-height: 1.5; } /* ════════════════════════════════════════════════════════════════════════ ★ ACTIVITY FILTERS · audit 2026-05-30 (2e round) ★ ════════════════════════════════════════════════════════════════════════ */ .sf-act-filters { position: sticky; top: 0; z-index: 5; background: var(--gi-canvas, #fafaf7); padding: 12px 0; margin-bottom: 16px; border-bottom: 1px solid var(--gi-border); } .sf-act-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; } .sf-act-row:last-child { margin-bottom: 0; } .sf-act-row .gi-field-input, .sf-act-row .gi-field-select { padding: 6px 10px; font-size: 12.5px; height: auto; } /* ════════════════════════════════════════════════════════════════════════ ★ REPORTS GALLERY · audit 2026-05-30 (2e round) ★ ════════════════════════════════════════════════════════════════════════ */ .sf-rep-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; } .sf-rep-pill { background: #fff; border: 1px solid var(--gi-border); padding: 6px 12px; border-radius: 14px; font-size: 12px; cursor: pointer; transition: all .15s; font-family: var(--gi-font-body); color: var(--gi-gray-700); display: inline-flex; align-items: center; gap: 6px; } .sf-rep-pill:hover { background: var(--gi-gray-50); } .sf-rep-pill.is-active { background: var(--gi-cyan); color: #fff; border-color: var(--gi-cyan); } .sf-rep-pill .n { background: rgba(0,0,0,.12); padding: 0 6px; border-radius: 8px; font-size: 10.5px; font-family: var(--gi-font-mono, monospace); } .sf-rep-pill.is-active .n { background: rgba(255,255,255,.25); } /* ── Médiathèque marque · refonte visuelle (Kevin 2026-07-09) ── Masonry (CSS multi-colonnes) qui préserve les ratios naturels + densité XL/L/M/S. */ .sf-lib-grid { column-gap: 12px; } .sf-lib-grid.dens-xl { column-width: 260px; } .sf-lib-grid.dens-l { column-width: 190px; } .sf-lib-grid.dens-m { column-width: 140px; } .sf-lib-grid.dens-s { column-width: 100px; } .sf-lib-card { break-inside: avoid; margin: 0 0 12px; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid var(--gi-border); cursor: pointer; position: relative; transition: box-shadow .15s; } .sf-lib-card:hover { box-shadow: var(--gi-elev-2); } .sf-lib-card.is-sel { outline: 2px solid var(--gi-cyan); outline-offset: -2px; } .sf-lib-thumb { display: block; width: 100%; overflow: hidden; background: var(--gi-gray-100); line-height: 0; } .sf-lib-thumb img { width: 100%; height: auto; display: block; transition: transform .3s ease; } .sf-lib-card:hover .sf-lib-thumb img { transform: scale(1.05); } .sf-lib-ph { width: 100%; aspect-ratio: 1/1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--gi-gray-400); font-size: 11px; gap: 4px; } .sf-lib-meta { padding: 7px 9px; } .sf-lib-name { font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--gi-black); } .sf-lib-sub { font-size: 10.5px; color: var(--gi-gray-500); margin-top: 2px; } .sf-lib-badge { position: absolute; top: 8px; right: 8px; z-index: 2; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 10px; } .sf-lib-selmark { position: absolute; top: 8px; left: 8px; z-index: 2; width: 20px; height: 20px; border-radius: 5px; border: 1px solid var(--gi-border-strong); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; background: rgba(255,255,255,.85); } .sf-lib-selmark.on { background: var(--gi-cyan); border-color: var(--gi-cyan); } .sf-lib-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .sf-lib-chip { font-size: 11.5px; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--gi-border-strong); background: #fff; cursor: pointer; color: var(--gi-gray-700); transition: all .12s; } .sf-lib-chip:hover { border-color: var(--gi-black); color: var(--gi-black); } .sf-lib-chip.active { background: var(--gi-black); color: #fff; border-color: var(--gi-black); } .sf-lib-dens { display: inline-flex; border: 1px solid var(--gi-border-strong); border-radius: 8px; overflow: hidden; } .sf-lib-dens button { appearance: none; background: transparent; border: 0; border-left: 1px solid var(--gi-border); padding: 5px 9px; font-size: 12px; cursor: pointer; color: var(--gi-gray-600); } .sf-lib-dens button:first-child { border-left: 0; } .sf-lib-dens button.active { background: var(--gi-black); color: #fff; } .sf-lib-navbtn { position: fixed; top: 50%; transform: translateY(-50%); z-index: 60; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--gi-border-strong); background: #fff; font-size: 22px; cursor: pointer; box-shadow: var(--gi-elev-2); display: flex; align-items: center; justify-content: center; } .sf-lib-navbtn.prev { left: max(16px, calc(50% - 520px)); } .sf-lib-navbtn.next { right: max(16px, calc(50% - 520px)); } [data-theme="dark"] .sf-lib-card { background: var(--sf-surface-raised); border-color: var(--sf-border); } [data-theme="dark"] .sf-lib-chip, [data-theme="dark"] .sf-lib-navbtn { background: var(--sf-surface-raised); color: var(--sf-text-primary); } .sf-rep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } /* Kevin 2026-06-12 · overflow visible pour ne pas clipper le menu kebab (.sf-rowmenu-pop) qui dropdown sous la rangée d'actions. Le thumb a son propre overflow:hidden + on lui ajoute les coins arrondis top pour préserver l'arrondi visuel de la carte. */ .sf-rep-card { background: #fff; border: 1px solid var(--gi-border); border-radius: 8px; overflow: visible; transition: transform .15s, box-shadow .15s; display: flex; flex-direction: column; position: relative; } .sf-rep-card:hover { transform: translateY(-2px); box-shadow: var(--gi-elev-2); } /* Kevin 2026-07-02 · le `transform` du :hover crée un contexte d'empilement qui PIÉGEAIT le menu kebab (z-index interne) → la carte suivante (plus loin dans le DOM) repeignait PAR-DESSUS le dropdown (« caché derrière le content »). On élève la carte au-dessus de ses sœurs quand elle est survolée OU que son menu est ouvert. */ .sf-rep-card:hover { z-index: 5; } .sf-rep-card:has(.sf-rowmenu.open) { z-index: 30; } .sf-rep-card.status-ready { border-top: 3px solid var(--gi-success); } .sf-rep-card.status-generating { border-top: 3px solid var(--gi-cyan); } .sf-rep-card.status-failed { border-top: 3px solid var(--gi-danger); } .sf-rep-card.status-draft { border-top: 3px solid var(--gi-gray-300); } .sf-rep-thumb { aspect-ratio: 8.5/11; background: var(--gi-gray-100); position: relative; overflow: hidden; border-radius: 8px 8px 0 0; } .sf-rep-thumb object { width: 100%; height: 100%; pointer-events: none; } .sf-rep-thumb-empty { background: linear-gradient(135deg, var(--gi-gray-50) 0%, var(--gi-gray-100) 100%); } .sf-rep-thumb-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--gi-gray-300); width: 40%; height: 40%; margin: auto; } .sf-rep-body { padding: 12px; flex: 1; display: flex; flex-direction: column; gap: 6px; } .sf-rep-card-head { display: flex; gap: 6px; flex-wrap: wrap; } .sf-rep-card-name { font-family: var(--gi-font-display); font-weight: 600; font-size: 14px; color: var(--gi-black); margin: 2px 0 0; } .sf-rep-card-meta { font-size: 11.5px; color: var(--gi-gray-600); } .sf-rep-card-meta.muted { font-size: 11px; } /* Sprint actions rapports (Kevin 2026-06-05) · refonte pattern 4-zones aligné sur Publications · [👁 consultation] [CTA contextuel] [⋮ menu]. Les groupes sont délimités par margin-left:auto sur le centre + un gap respiré. */ .sf-rep-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--gi-gray-50); } .sf-rep-actions-group { display: inline-flex; align-items: center; gap: 4px; } .sf-rep-actions-cta { flex: 1; display: flex; justify-content: center; } .sf-rep-actions-cta .sf-rowcta { min-width: 180px; justify-content: center; } /* Kevin 2026-07-02 · EN CARTE (galerie) la rangée d'actions débordait : le CTA (min-width 180px) + les 2 icônes + le kebab dépassaient la largeur de carte → kebab poussé hors cadre / CTA tronqué. On passe la carte en grille 2 lignes : ligne 1 = [consult ······ kebab], ligne 2 = CTA pleine largeur. La vue LISTE (table) garde sa rangée flex sur une ligne. */ .sf-rep-card .sf-rep-actions { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "consult . menu" "cta cta cta"; gap: 10px 6px; align-items: center; } .sf-rep-card .sf-rep-actions > .sf-rep-actions-group:first-child { grid-area: consult; } .sf-rep-card .sf-rep-actions > .sf-rep-actions-cta { grid-area: cta; } .sf-rep-card .sf-rep-actions > .sf-rep-actions-group:last-child { grid-area: menu; justify-self: end; } .sf-rep-card .sf-rep-actions-cta .sf-rowcta { min-width: 0; width: 100%; } /* Variante "info success" du sf-rowcta pour le badge "Visible client" · couleur cyan douce, non destructive, signale juste l'état (pas une action). */ .sf-rowcta.sf-rowcta-ok { background: var(--gi-cyan-soft, rgba(0,159,227,0.10)); color: var(--gi-cyan, #009FE3); border-color: var(--gi-cyan-soft, rgba(0,159,227,0.18)); cursor: default; } .sf-rowcta.sf-rowcta-ok:hover { background: rgba(0,159,227,0.16); } /* Variante primary explicite (fond cyan plein) pour différencier le "Partager au client" / "Générer" du badge "Visible client" qui est juste un état. */ .sf-rowcta.sf-rowcta-primary { background: var(--gi-cyan, #009FE3); color: #fff; border-color: var(--gi-cyan, #009FE3); } .sf-rowcta.sf-rowcta-primary:hover { background: var(--gi-cyan-dark, #007EB3); border-color: var(--gi-cyan-dark, #007EB3); } .sf-rowcta.sf-rowcta-primary:disabled, .sf-rowcta[disabled] { opacity: 0.6; cursor: default; } /* ════════════════════════════════════════════════════════════════════════ ★ ADS · KPIs étendus + segmented + pills statut · audit 2026-05-30 ★ ════════════════════════════════════════════════════════════════════════ */ .sf-kpi-bar.sf-kpi-ads { flex-wrap: wrap; gap: 8px; } .sf-kpi-bar.sf-kpi-ads .sf-kpi { min-width: 110px; flex: 1 1 110px; } .sf-kpi .val.success { color: var(--gi-success); } /* ════════════════════════════════════════════════════════════════════════ ★ MODÉRATION · regroupement par auteur + réponses Haiku ★ ════════════════════════════════════════════════════════════════════════ */ .sf-mod-table .sf-mod-group-row { border-top: 2px solid var(--gi-cyan-soft); } .sf-mod-group-tog { display: inline-block; width: 16px; color: var(--gi-cyan); } .sf-mod-group-tog.is-collapsed { transform: rotate(0deg); } /* Suggestions Haiku · grille de cartes par ton */ .sf-rsug-grid { display: grid; gap: 12px; } .sf-rsug-card { background: var(--gi-gray-50); border: 1px solid var(--gi-border); border-radius: 8px; padding: 14px; transition: border-color .15s; } .sf-rsug-card:hover { border-color: var(--gi-cyan); } .sf-rsug-card.tone-positive { border-left: 3px solid var(--gi-success); } .sf-rsug-card.tone-neutral { border-left: 3px solid var(--gi-cyan); } .sf-rsug-card.tone-clarification { border-left: 3px solid var(--gi-warning); } .sf-rsug-head { display: flex; align-items: center; gap: 8px; font-family: var(--gi-font-display); font-size: 11px; font-weight: 600; color: var(--gi-gray-600); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; } .sf-rsug-head .ic { font-size: 18px; } .sf-rsug-text { font-size: 14px; line-height: 1.55; color: var(--gi-black); white-space: pre-wrap; } .sf-rsug-actions { margin-top: 10px; display: flex; gap: 6px; } .sf-rsug-ta { width: 100%; margin-top: 8px; font-family: var(--gi-font-body); font-size: 13.5px; line-height: 1.5; color: var(--gi-black); border: 1px solid var(--gi-border); border-radius: 6px; padding: 8px 10px; resize: vertical; background: #fff; } .sf-rsug-ta:focus { outline: none; border-color: var(--gi-cyan); } .sf-modreply-orig { background: var(--gi-gray-50); padding: 12px 14px; border-left: 3px solid var(--gi-cyan); margin-bottom: 18px; font-size: 13px; font-style: italic; line-height: 1.5; border-radius: 0 6px 6px 0; } [data-theme="dark"] .sf-rsug-ta { background: var(--sf-surface-elevated); border-color: var(--sf-border); color: var(--sf-text-primary); } [data-theme="dark"] .sf-modreply-orig { background: var(--sf-surface-raised); } /* Refonte A3 (2026-06-23) · Modération en file de cartes + groupes repliables + group-by */ .sf-modlist { display: flex; flex-direction: column; gap: 0; } .sf-modgroup { margin-bottom: 4px; } .sf-modgroup-head { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: var(--gi-gray-50); border: 1px solid var(--gi-border); border-radius: 8px; padding: 8px 14px; margin: 10px 0 8px; font-family: var(--gi-font-display); font-size: 12.5px; font-weight: 600; color: var(--gi-black); cursor: pointer; } .sf-modgroup-head:hover { border-color: var(--gi-cyan); } .sf-modgroup-head .caret { font-size: 11px; opacity: .6; } .sf-modgroup-head .n { margin-left: auto; background: var(--gi-gray-200,#e5e5e5); color: var(--gi-gray-700); border-radius: 10px; padding: 1px 9px; font-size: 11.5px; font-variant-numeric: tabular-nums; } .sf-modgroup-body { display: flex; flex-direction: column; gap: 10px; } .sf-modcard { background: #fff; border: 1px solid var(--gi-border); border-radius: 8px; padding: 13px 16px; transition: box-shadow .15s, border-color .15s; } .sf-modcard:hover { box-shadow: var(--gi-elev-1, 0 2px 8px rgba(0,0,0,.05)); } .sf-modcard-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sf-modcard-top .mod-sel { width: 15px; height: 15px; cursor: pointer; flex: 0 0 auto; } .sf-modcard-author { font-family: var(--gi-font-display); font-weight: 600; font-size: 13.5px; color: var(--gi-black); } .sf-modcard-sub { font-size: 11.5px; color: var(--gi-gray-500); display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; } .sf-modcard-pf { display: inline-flex; align-items: center; gap: 3px; } .sf-modcard-stat { margin-left: auto; } .sf-modcard-msg { font-size: 13.5px; line-height: 1.5; color: var(--gi-black); margin: 9px 0; white-space: pre-wrap; word-break: break-word; } .sf-modcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .sf-modcard-acts { display: flex; gap: 5px; flex-wrap: wrap; } .sf-modgroupby { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .sf-seg-sm { padding: 4px 10px; font-size: 11.5px; } [data-theme="dark"] .sf-modcard { background: var(--sf-card,#18181B); border-color: var(--sf-border); } [data-theme="dark"] .sf-modcard-author, [data-theme="dark"] .sf-modcard-msg { color: var(--sf-text,#E8E6E0); } [data-theme="dark"] .sf-modgroup-head { background: var(--sf-surface-raised); border-color: var(--sf-border); color: var(--sf-text,#E8E6E0); } [data-theme="dark"] .sf-modgroup-head .n { background: var(--sf-border); color: var(--sf-text-muted,#9CA0A8); } /* ════════════════════════════════════════════════════════════════════════ ★ VALIDATION ADS ENRICHIE (client) · audit 2026-05-30 ★ ════════════════════════════════════════════════════════════════════════ */ .sf-vcard-ad .sf-ad-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; padding: 12px; background: var(--gi-gray-50); border-radius: 6px; margin: 12px 0; } .sf-vcard-ad .sf-ad-info .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--gi-gray-500); font-weight: 600; } .sf-vcard-ad .sf-ad-info .val { font-size: 13px; font-weight: 500; margin-top: 4px; line-height: 1.4; } .sf-vcard-ad .sf-ad-section { margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--gi-border); } .sf-vcard-ad .sf-ad-section-title { font-family: var(--gi-font-display); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--gi-gray-500); margin-bottom: 8px; font-weight: 600; } .sf-vcard-ad .sf-ad-aud { padding: 8px 12px; background: var(--gi-cyan-soft, rgba(0,159,227,.05)); border-left: 3px solid var(--gi-cyan); border-radius: 4px; margin-bottom: 6px; font-size: 13px; } .sf-vcard-ad .sf-ad-creative { padding: 12px; background: var(--gi-gray-50); border-radius: 6px; margin-bottom: 8px; } .sf-vcard-ad .sf-ad-creative-num { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--gi-cyan); font-weight: 700; margin-bottom: 4px; } .sf-vcard-ad .sf-ad-creative-name { font-family: var(--gi-font-display); font-weight: 600; font-size: 14px; } .sf-vcard-ad .sf-ad-creative-headline { font-size: 13.5px; font-weight: 500; margin: 4px 0; color: var(--gi-black); } .sf-vcard-ad .sf-ad-creative-text { font-size: 13px; line-height: 1.5; color: var(--gi-gray-700); white-space: pre-wrap; } .sf-vcard-ad .sf-ad-creative-cta { margin-top: 8px; font-size: 12px; } .sf-vcard-ad .sf-ad-creative-cta .cta-btn { display: inline-block; background: var(--gi-cyan); color: #fff; padding: 3px 10px; border-radius: 14px; font-size: 11px; font-weight: 600; } .sf-vcard-ad .sf-ad-creative-cta .cta-url { color: var(--gi-gray-600); margin-left: 4px; font-family: var(--gi-font-mono, monospace); font-size: 11px; word-break: break-all; } /* ════════════════════════════════════════════════════════════════════════ ★ ONBOARDING TOUR · audit 2026-05-30 ★ ════════════════════════════════════════════════════════════════════════ */ .sf-tour-overlay { position: fixed; inset: 0; z-index: 300; pointer-events: auto; } /* Le dim est porté UNIQUEMENT par le box-shadow du spotlight (trou transparent qui révèle la cible). Bug Kevin 2026-06-18 : un ::before plein écran s'ajoutait par-dessus → double dim, cible jamais révélée = « écran gris ». Supprimé. */ .sf-tour-spotlight { position: absolute; background: transparent; border-radius: 6px; box-shadow: 0 0 0 9999px rgba(0,0,0,.6), 0 0 0 3px var(--gi-cyan); transition: all .2s ease; pointer-events: none; z-index: 301; } .sf-tour-tooltip { position: absolute; width: 360px; max-width: 92vw; background: #fff; border-radius: 10px; padding: 20px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.3); z-index: 302; transition: top .25s, left .25s; } .sf-tour-step-n { font-size: 10.5px; font-family: var(--gi-font-display); font-weight: 600; color: var(--gi-cyan); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; } .sf-tour-title { font-family: var(--gi-font-display); font-size: 18px; font-weight: 600; margin: 0 0 8px; color: var(--gi-black); letter-spacing: -0.01em; } .sf-tour-desc { font-size: 13.5px; line-height: 1.55; color: var(--gi-gray-700); margin-bottom: 18px; } .sf-tour-desc b { color: var(--gi-black); font-weight: 600; } .sf-tour-desc kbd { display: inline-block; padding: 1px 6px; background: var(--gi-gray-100); border: 1px solid var(--gi-border); border-radius: 4px; font-family: var(--gi-font-mono, monospace); font-size: 11.5px; margin: 0 2px; } .sf-tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .sf-tour-skip { background: none; border: none; color: var(--gi-gray-500); cursor: pointer; font-family: var(--gi-font-body); font-size: 12px; text-decoration: underline; padding: 0; } .sf-tour-skip:hover { color: var(--gi-gray-700); } .sf-tour-nav { display: flex; gap: 6px; } .sf-tour-tooltip.pos-right::before, .sf-tour-tooltip.pos-left::before, .sf-tour-tooltip.pos-below::before, .sf-tour-tooltip.pos-above::before { content: ''; position: absolute; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); } .sf-tour-tooltip.pos-right::before { left: -6px; top: 24px; } .sf-tour-tooltip.pos-left::before { right: -6px; top: 24px; } .sf-tour-tooltip.pos-below::before { top: -6px; left: 24px; } .sf-tour-tooltip.pos-above::before { bottom: -6px; left: 24px; } /* ★ Fin couche audit 2026-05-30 (2e round) ★ */ /* ★ Fin couche UI utilitaires ★ */ /* ============================================================ ★ DARK MODE · couverture exhaustive (Axe 1 Sprint UX 2026-06-01) ------------------------------------------------------------ Refonte complète couvrant les ~48 composants identifiés par l'audit. Utilise STRICTEMENT les tokens semantic (--sf-surface*, --sf-text-*, --sf-border) pour pouvoir tuner la palette sans toucher au code. Groupé par catégorie pour relecture. ============================================================ */ /* ─ 1. Coque & navigation ─────────────────────────────────── */ /* La topbar reste noire en dark · marque GI signature. On adoucit juste les contrôles internes pour éviter le double noir agressif. */ [data-theme="dark"] .sf-topbar { background: #0A0A0C; border-bottom: 1px solid var(--sf-border); } [data-theme="dark"] .sf-sidebar, [data-theme="dark"] .sf-side { background: var(--sf-surface-raised); border-right: 1px solid var(--sf-border); color: var(--sf-text-primary); } [data-theme="dark"] .sf-side a, [data-theme="dark"] .sf-side .sf-side-link { color: var(--sf-text-secondary); } [data-theme="dark"] .sf-side a:hover, [data-theme="dark"] .sf-side .sf-side-link:hover { background: var(--sf-surface-elevated); color: var(--sf-text-primary); } [data-theme="dark"] .sf-side a.is-active, [data-theme="dark"] .sf-side .sf-side-link.is-active { color: var(--sf-text-primary); background: var(--sf-surface-elevated); } [data-theme="dark"] .sf-brand-context { background: var(--sf-surface-elevated); color: var(--sf-text-secondary); border-color: var(--sf-border); } /* ─ 2. Overlays · modales, drawers, command palette, toasts ─ */ [data-theme="dark"] .sf-modal-overlay, [data-theme="dark"] .sf-overlay, [data-theme="dark"] .gi-overlay { background: var(--sf-overlay-scrim); } [data-theme="dark"] #sheet, [data-theme="dark"] .gi-modal, [data-theme="dark"] .sf-modal { background: var(--sf-surface-elevated); color: var(--sf-text-primary); border-color: var(--sf-border); box-shadow: 0 16px 48px rgba(0,0,0,0.6); } /* BUG dark mode (fix 2026-06-01) · NE PAS poser de background sur `.sf-drawer`. `.sf-drawer` est un wrapper `position:fixed inset:0` qui couvre toute la viewport ; y mettre un background opaque masque la sf-shell derrière, même quand le drawer est "fermé" (transform off, backdrop opacity 0). Seul `.sf-drawer-panel` (l'aside réel) doit avoir le background sombre. Le backdrop a déjà son rgba(0,0,0,.45). */ [data-theme="dark"] .sf-drawer-panel { background: var(--sf-surface-elevated); color: var(--sf-text-primary); border-left: 1px solid var(--sf-border); } [data-theme="dark"] .sf-drawer-head, [data-theme="dark"] .sf-drawer-foot { border-color: var(--sf-border); background: var(--sf-surface-raised); } /* Rules cmdpal dark : les rules sources utilisent désormais les semantic tokens (--sf-*) qui s'adaptent automatiquement light/dark. Aucun override spécifique nécessaire ici. La cmdpal est attachée à `body` (PAS sous `.sf-shell`), donc on lit les tokens `:root` et `[data-theme="dark"]` directement. */ [data-theme="dark"] .sf-toast { background: var(--sf-surface-elevated); color: var(--sf-text-primary); border: 1px solid var(--sf-border); box-shadow: 0 8px 24px rgba(0,0,0,0.5); } [data-theme="dark"] .sf-banner { background: var(--sf-surface-raised); color: var(--sf-text-primary); border-color: var(--sf-border); } /* ─ 3. Cards & blocs (extension) ────────────────────────────── */ [data-theme="dark"] .sf-card-block, [data-theme="dark"] .sf-kpi-bar, [data-theme="dark"] .sf-kpi { background: var(--sf-surface-raised); border-color: var(--sf-border); color: var(--sf-text-primary); } [data-theme="dark"] .sf-cc-card, [data-theme="dark"] .sf-cc-tile { background: var(--sf-surface-raised); border-color: var(--sf-border); color: var(--sf-text-primary); } [data-theme="dark"] .sf-cc-card-eyebrow, [data-theme="dark"] .sf-cc-card-desc { color: var(--sf-text-muted); } [data-theme="dark"] .sf-cc-card-value { color: var(--sf-text-primary); } [data-theme="dark"] .sf-conn-card { background: var(--sf-surface-raised); border-color: var(--sf-border); } [data-theme="dark"] .sf-conn-btn { background: var(--sf-surface-elevated); border-color: var(--sf-border); color: var(--sf-text-primary); } [data-theme="dark"] .sf-rep-pill { background: var(--sf-surface-elevated); border-color: var(--sf-border); color: var(--sf-text-primary); } [data-theme="dark"] .sf-rep-card { background: var(--sf-surface-raised); border-color: var(--sf-border); } /* ─ 4. Pages spécifiques · modération / suggestions Haiku / ads ─ */ [data-theme="dark"] .sf-mod-row, [data-theme="dark"] .sf-mod-table tbody tr { background: var(--sf-surface-raised); border-color: var(--sf-border); } [data-theme="dark"] .sf-mod-group-row { background: var(--sf-surface-elevated); border-color: var(--sf-border); } [data-theme="dark"] .sf-rsug-card { background: var(--sf-surface-elevated); border-color: var(--sf-border); color: var(--sf-text-primary); } [data-theme="dark"] .sf-rsug-text { color: var(--sf-text-primary); } [data-theme="dark"] .sf-vcard-ad .sf-ad-info-grid, [data-theme="dark"] .sf-vcard-ad .sf-ad-creative { background: var(--sf-surface-elevated); } [data-theme="dark"] .sf-act-filters { background: var(--sf-surface-raised); border-color: var(--sf-border); } /* ─ 5. Tableaux (extension) ───────────────────────────────── */ [data-theme="dark"] .sf-table, [data-theme="dark"] .gi-table { color: var(--sf-text-primary); } [data-theme="dark"] .sf-table thead th, [data-theme="dark"] .gi-table thead th { background: var(--sf-surface-elevated); color: var(--sf-text-secondary); } [data-theme="dark"] .sf-table tbody tr:hover, [data-theme="dark"] .gi-table tbody tr:hover { background: var(--sf-surface-elevated); } [data-theme="dark"] .gi-table td { border-color: var(--sf-border); color: var(--sf-text-primary); } /* ─ 6. Formulaires (extension) ────────────────────────────── */ [data-theme="dark"] .gi-field-textarea, [data-theme="dark"] .sf-input, [data-theme="dark"] .sf-input-ghost { background: var(--sf-surface-sunken); color: var(--sf-text-primary); border-color: var(--sf-border-strong); } [data-theme="dark"] .gi-field-input::placeholder, [data-theme="dark"] .sf-input::placeholder { color: var(--sf-text-muted); } [data-theme="dark"] .gi-field-label, [data-theme="dark"] .sf-input-label { color: var(--sf-text-secondary); } /* ─ 7. Composants élémentaires ────────────────────────────── */ [data-theme="dark"] .sf-stepper .step .n { background: var(--sf-surface-sunken); border-color: var(--sf-border); color: var(--sf-text-muted); } [data-theme="dark"] .sf-stepper .step.is-done .n { background: var(--sf-accent); border-color: var(--sf-accent); color: var(--sf-text-on-accent); } [data-theme="dark"] .sf-tab-bar { border-color: var(--sf-border); } [data-theme="dark"] .sf-tab-bar button { color: var(--sf-text-muted); } [data-theme="dark"] .sf-tab-bar button.is-active { color: var(--sf-text-primary); } [data-theme="dark"] .sf-tab-bar .badge { background: var(--sf-surface-elevated); color: var(--sf-text-secondary); } /* Boutons : secondaire prend la surface elevated · primaire reste accent */ [data-theme="dark"] .gi-btn { background: var(--sf-surface-elevated); border-color: var(--sf-border); color: var(--sf-text-primary); } [data-theme="dark"] .gi-btn:hover { background: var(--sf-surface-raised); } [data-theme="dark"] .gi-btn-primary { background: var(--sf-accent); border-color: var(--sf-accent); color: var(--sf-text-on-accent); } [data-theme="dark"] .gi-btn-primary:hover { background: var(--sf-accent-hover); border-color: var(--sf-accent-hover); } /* Badges · variants doux en dark (pas de couleurs saturées agressives) */ [data-theme="dark"] .gi-badge { background: var(--sf-surface-elevated); color: var(--sf-text-secondary); border-color: var(--sf-border); } [data-theme="dark"] .gi-badge.cyan { background: var(--sf-accent-soft); color: var(--sf-accent); border-color: var(--sf-accent); } [data-theme="dark"] .gi-badge.success { background: var(--gi-success-bg); color: var(--gi-success); border-color: var(--gi-success); } [data-theme="dark"] .gi-badge.warning { background: var(--gi-warning-bg); color: var(--gi-warning-text); border-color: var(--gi-warning); } [data-theme="dark"] .gi-badge.danger { background: var(--gi-danger-bg); color: var(--gi-danger-text); border-color: var(--gi-danger); } /* Skeleton · gradient inversé pour être visible sur surfaces sombres */ [data-theme="dark"] .sf-skel { background: linear-gradient(90deg, var(--sf-surface-raised) 0%, var(--sf-surface-elevated) 50%, var(--sf-surface-raised) 100%); } /* ─ 8. Onboarding tour ──────────────────────────────────── */ [data-theme="dark"] .sf-tour-overlay::before { background: rgba(0, 0, 0, 0.78); } [data-theme="dark"] .sf-tour-tooltip { background: var(--sf-surface-elevated); color: var(--sf-text-primary); border-color: var(--sf-border); box-shadow: 0 12px 36px rgba(0,0,0,0.6); } [data-theme="dark"] .sf-tour-tooltip::before, [data-theme="dark"] .sf-tour-tooltip.pos-right::before, [data-theme="dark"] .sf-tour-tooltip.pos-left::before, [data-theme="dark"] .sf-tour-tooltip.pos-below::before, [data-theme="dark"] .sf-tour-tooltip.pos-above::before { background: var(--sf-surface-elevated); } [data-theme="dark"] .sf-tour-skip { color: var(--sf-text-muted); } [data-theme="dark"] .sf-tour-skip:hover { color: var(--sf-text-primary); } /* ─ 9. Eyebrows, dividers, separators ─────────────────────── */ [data-theme="dark"] .gi-eyebrow { color: var(--sf-text-muted); } [data-theme="dark"] hr, [data-theme="dark"] .sf-divider { border-color: var(--sf-border); } /* ─ 10. Accent picker (Préférences) ───────────────────────── */ /* Le bord blanc des swatches actifs reste blanc en dark · bonne visibilité. On ajuste juste la border-color initiale pour suivre la palette dark. */ [data-theme="dark"] .sf-accent-swatch { border-color: var(--sf-border); } [data-theme="dark"] .sf-accent-swatch:hover { border-color: var(--sf-border-strong); } [data-theme="dark"] .sf-accent-swatch.is-active { border-color: var(--sf-text-primary); } /* ─ 11. Transition douce light ↔ dark ─────────────────────── */ /* 200ms sur les propriétés de couleur principales pour adoucir le switch. Scopé `.sf-shell` (pas sur * pour ne pas pénaliser les animations existantes). Désactivé en motion=reduced (respect du toggle utilisateur Axe 2). */ .sf-shell, .sf-shell .gi-card, .sf-shell .sf-card, .sf-shell .sf-topbar, .sf-shell .sf-sidebar, .sf-shell .sf-side, .sf-shell .gi-btn, .sf-shell .sf-table, .sf-shell .gi-table, .sf-shell .sf-input, .sf-shell .gi-field-input, .sf-shell .gi-field-select, .sf-shell .gi-field-textarea { transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; } [data-motion="reduced"] .sf-shell, [data-motion="reduced"] .sf-shell * { transition-property: none !important; } /* ─ 12. Chasse aux #fff hardcodés (Axe 1bis) ────────────────── Composants avec `background:#fff` direct (pas via variable) qui ne suivent pas l'inversion des primitives. Tous passés en surface-raised/elevated/sunken selon leur rôle. Le sélecteur composé avec `.sf-shell` (spécificité 0,3,0) bat la rule source `.composant { background: #fff }` (0,1,0). ============================================================ */ /* Surfaces principales · cartes, blocs, panneaux */ [data-theme="dark"] .sf-shell .gi-hero, [data-theme="dark"] .sf-shell .gi-hero-light, [data-theme="dark"] .sf-shell .gi-card, [data-theme="dark"] .sf-shell .gi-kpi-grid, [data-theme="dark"] .sf-shell .gi-kpi, [data-theme="dark"] .sf-shell .gi-table, [data-theme="dark"] .sf-shell .sf-cmd-card, [data-theme="dark"] .sf-shell .sf-vcard, [data-theme="dark"] .sf-shell .sf-card-block, [data-theme="dark"] .sf-shell .sf-kpi, [data-theme="dark"] .sf-shell .sf-conn-card, [data-theme="dark"] .sf-shell .sf-cm, [data-theme="dark"] .sf-shell .sf-demo-card, [data-theme="dark"] .sf-shell .sf-gal-card, [data-theme="dark"] .sf-shell .pm { background: var(--sf-surface-raised); color: var(--sf-text-primary); } /* sf-tplcard + sf-wchip · sans scope .sf-shell car utilisés aussi dans #sheet/modales (composer rapport). En dark mode dans une modale, le bg #fff hardcodé reste visible → carte/chip blanche sur fond sombre. On override globalement. .active est déjà cohérent (cyan brand pour tplcard, noir inversé pour wchip → ré-override en dark ci-dessous). */ [data-theme="dark"] .sf-tplcard { background: var(--sf-surface-raised); color: var(--sf-text-primary); border-color: var(--sf-border); } [data-theme="dark"] .sf-tplcard span { color: var(--sf-text-muted); } [data-theme="dark"] .sf-tplcard:hover { background: var(--sf-surface-hover); border-color: var(--sf-border-strong); } /* sf-wchip · chip de widget rapport. État neutre : surface elevated. État actif : inversé brand cyan (cohérent avec is-active des pm-tool-btn, plus moderne que noir). */ [data-theme="dark"] .sf-wchip { background: var(--sf-surface-elevated); color: var(--sf-text-secondary); border-color: var(--sf-border-strong); } [data-theme="dark"] .sf-wchip:hover { background: var(--sf-surface-hover); color: var(--sf-text-primary); } [data-theme="dark"] .sf-wchip.active { background: var(--sf-accent, var(--gi-cyan)); color: var(--sf-text-on-accent, #fff); border-color: var(--sf-accent, var(--gi-cyan)); } /* Hover des cards portefeuille · transition vers surface-hover */ [data-theme="dark"] .sf-shell .sf-cmd-card:hover { background: var(--sf-surface-hover); } /* Overlays et modales · surface elevated (un cran au-dessus de raised). .sf-cmdpal-panel et .sf-drawer-panel : attachés à body (PAS dans .sf-shell) · override SANS scope shell sinon le sélecteur ne matche jamais. */ [data-theme="dark"] .sf-drawer-panel, [data-theme="dark"] .sf-drawer-head, [data-theme="dark"] .sf-drawer-body { background: var(--sf-surface-elevated); color: var(--sf-text-primary); border-color: var(--sf-border); } /* Drawer dark · enfants qui ont leurs propres règles light (sf-iconbtn fond #fff, sf-back-btn color gray-700, sf-brief-chip background canvas-soft, etc.) doivent être ré-overridés SANS scope `.sf-shell` puisque le drawer est attaché à `body`. Sinon ils gardent leur look light et ressortent en blanc/pâle sur le panel sombre. */ [data-theme="dark"] .sf-drawer-panel .sf-iconbtn, [data-theme="dark"] .sf-drawer-panel .sf-brief-chip { background: var(--sf-surface-raised); color: var(--sf-text-primary); border-color: var(--sf-border); } [data-theme="dark"] .sf-drawer-panel .sf-iconbtn:hover:not([disabled]) { background: var(--sf-surface-hover); color: var(--sf-text-primary); border-color: var(--sf-border-strong); } [data-theme="dark"] .sf-drawer-panel .sf-brief-chip b { color: var(--sf-accent); } /* Sheet (modale primaire + overlay) · scope `.sf-shell` retiré 2026-06-02 · les modals sont attachés à body, l'override scopé ne matchait jamais → sheet restait blanc en dark. */ [data-theme="dark"] .sheet { background: var(--sf-surface-elevated); color: var(--sf-text-primary); border-color: var(--sf-border); } /* Headings / textes / labels enfants du sheet · pour cohérence visuelle complète en dark */ [data-theme="dark"] .sheet .gi-h2, [data-theme="dark"] .sheet .gi-h3, [data-theme="dark"] .sheet .gi-h4, [data-theme="dark"] .sheet h1, [data-theme="dark"] .sheet h2, [data-theme="dark"] .sheet h3 { color: var(--sf-text-primary); } [data-theme="dark"] .sheet .gi-eyebrow, [data-theme="dark"] .sheet .gi-field-label { color: var(--sf-text-secondary); } [data-theme="dark"] .sheet .muted, [data-theme="dark"] .sheet p.muted, [data-theme="dark"] .sheet span.muted, [data-theme="dark"] .sheet div.muted { color: var(--sf-text-muted); } /* Inputs / textarea / select dans le sheet · surface plus sombre que la carte (sunken). Match les inputs admin pour cohérence. */ [data-theme="dark"] .sheet .gi-field-input, [data-theme="dark"] .sheet .gi-field-textarea, [data-theme="dark"] .sheet .gi-field-select { background: var(--sf-surface-sunken, var(--sf-surface-raised)); color: var(--sf-text-primary); border-color: var(--sf-border); } [data-theme="dark"] .sheet .gi-field-input::placeholder, [data-theme="dark"] .sheet .gi-field-textarea::placeholder { color: var(--sf-text-muted); } [data-theme="dark"] .sheet .gi-field-input:focus, [data-theme="dark"] .sheet .gi-field-textarea:focus, [data-theme="dark"] .sheet .gi-field-select:focus { border-color: var(--sf-accent); outline: none; } /* Variants sheet wide / fullsheet · héritent du fond elevated comme la version normale */ [data-theme="dark"] .modal .sheet.sf-sheet-wide, [data-theme="dark"] .modal .sheet.wide, [data-theme="dark"] .modal .sheet.pm-fullsheet { background: var(--sf-surface-elevated); border-color: var(--sf-border); } [data-theme="dark"] .sf-shell .sf-pub-popover, [data-theme="dark"] .sf-shell .sf-bell-pop, [data-theme="dark"] .sf-shell .gi-empty { background: var(--sf-surface-elevated); color: var(--sf-text-primary); border-color: var(--sf-border); } /* Chips, pills, contrôles ronds (bordures fines, fond surface elevated) */ [data-theme="dark"] .sf-shell .sf-mfchip, [data-theme="dark"] .sf-shell .sf-iconbtn, [data-theme="dark"] .sf-shell .sf-pacing, [data-theme="dark"] .sf-shell .sf-pf-chip, [data-theme="dark"] .sf-shell .sf-cnt, [data-theme="dark"] .sf-shell .sf-wchip, [data-theme="dark"] .sf-shell .sf-prevtab, [data-theme="dark"] .sf-shell .sf-mini, [data-theme="dark"] .sf-shell .sf-st-swatch, [data-theme="dark"] .sf-shell .sf-viewtog button { background: var(--sf-surface-elevated); border-color: var(--sf-border); color: var(--sf-text-secondary); } /* Inputs · fond surface-sunken (en creux, plus sombre que surface) */ [data-theme="dark"] .sf-shell .gi-field-input, [data-theme="dark"] .sf-shell .gi-field-textarea, [data-theme="dark"] .sf-shell .gi-field-select, [data-theme="dark"] .sf-shell .sf-cmdpal-input { background: var(--sf-surface-sunken); color: var(--sf-text-primary); border-color: var(--sf-border-strong); } /* Tabs · fond raised pour les inactifs, accent pour l'actif */ [data-theme="dark"] .sf-shell .sf-tab { background: var(--sf-surface-raised); color: var(--sf-text-secondary); border-color: var(--sf-border); } [data-theme="dark"] .sf-shell .sf-tab.is-active { background: var(--sf-surface-elevated); color: var(--sf-text-primary); } /* Pipeline · même approche que les cards */ [data-theme="dark"] .sf-shell .sf-pipe { background: var(--sf-surface-raised); border-color: var(--sf-border); color: var(--sf-text-primary); } /* Sidebar · déjà couverte plus haut dans le bloc Axe 1, mais on assure */ [data-theme="dark"] .sf-shell .sf-sidebar { background: var(--sf-surface-raised); border-right-color: var(--sf-border); } /* Logos clients · DOIVENT rester sur fond blanc pour faire ressortir le logo (signature visuelle marque · pas un composant UI). On force le blanc. */ [data-theme="dark"] .sf-shell .sf-st-logo { background: #FFFFFF; } /* Alerts critiques · le bg `#fff5f5` doit suivre la palette dark mais rester chaud */ [data-theme="dark"] .sf-shell .sf-alert.sev-critical { background: rgba(186, 21, 26, 0.12); color: var(--gi-danger-text, #FF8A8E); } /* ─ Fix dark 2026-06-01 · sf-state-box + pm-tool-btn ───────── `.sf-state-box` utilise bg=gi-gray-50 inversé en dark (#161618) trop sombre sur surface-raised (#141416) · imperceptible. On force surface-elevated. `.pm-tool-btn` a bg=#fff hardcodé + variant primary bg=gi-black inversé en blanc (illisible sur fond clair primary). */ /* sf-state-box · sans scope .sf-shell pour matcher aussi dans #sheet/modales (attachés à body, pas dans .sf-shell). Cas concrets : modale "Collecter publications" qui utilise sf-state-box pour les info banners. */ [data-theme="dark"] .sf-state-box { background: var(--sf-surface-elevated); border-color: var(--sf-border-strong); color: var(--sf-text-primary); } [data-theme="dark"] .sf-state-box .gi-badge.muted { background: var(--sf-surface-raised); color: var(--sf-text-secondary); border-color: var(--sf-border); } [data-theme="dark"] .sf-shell .pm-tool-btn { background: var(--sf-surface-elevated); border-color: var(--sf-border); color: var(--sf-text-primary); } [data-theme="dark"] .sf-shell .pm-tool-btn:hover { background: var(--sf-surface-hover); border-color: var(--sf-border-strong); } [data-theme="dark"] .sf-shell .pm-tool-btn.is-active { background: var(--sf-accent); color: var(--sf-text-on-accent); border-color: var(--sf-accent); } [data-theme="dark"] .sf-shell .pm-tool-btn.pm-tool-primary { background: var(--sf-accent); color: var(--sf-text-on-accent); border-color: var(--sf-accent); } [data-theme="dark"] .sf-shell .pm-tool-btn.pm-tool-primary:hover { background: var(--sf-accent-hover); border-color: var(--sf-accent-hover); } /* ─ 14. Composants Axe 1quater (chips brief, objectifs strat, rowbtn) ── Composants utilisant `--gi-canvas-soft` (token fantôme, sans fallback), ou bordures `--gi-black` qui deviennent blanc pur en dark (trop marqué). */ /* Brief chip · pill utilisée dans la table publications, le composer rapport, le drawer, etc. Scope `.sf-shell` retiré (bug Kevin 2026-06-02) car le composer modal est attaché à body et l'override scopé ne matchait pas. */ [data-theme="dark"] .sf-brief-chip { background: var(--sf-surface-elevated); border-color: var(--sf-border); color: var(--sf-text-primary); } [data-theme="dark"] .sf-brief-chip b { color: var(--sf-accent); } /* Objectifs Stratégie · tuiles dans la grille Objectifs & KPIs */ [data-theme="dark"] .sf-shell .sf-st-obj { background: var(--sf-surface-elevated); border-color: var(--sf-border); } [data-theme="dark"] .sf-shell .sf-st-obj-h { color: var(--sf-accent); } [data-theme="dark"] .sf-shell .sf-st-obj p { color: var(--sf-text-secondary); } /* Row buttons (boutons d'action en ligne dans tables, modales, biblio visuels…) Scope `.sf-shell` retiré 2026-06-02 · sf-rowbtn est aussi utilisé dans #sheet (composer, bibliothèque visuels, modales) attaché à body → l'override scopé ne matchait pas. Override global maintenant. */ [data-theme="dark"] .sf-rowbtn { /* Contraste augmenté hors hover (Kevin 2026-06-02) · border-strong + texte primary pour bien ressortir sur les surfaces sombres (sheet, drawer, modale). */ background: var(--sf-surface-raised); border-color: var(--sf-border-strong); color: var(--sf-text-primary); } [data-theme="dark"] .sf-rowbtn:hover { background: var(--sf-surface-hover); border-color: var(--sf-border-strong); color: var(--sf-text-primary); } [data-theme="dark"] .sf-rowbtn[disabled] { opacity: .4; cursor: not-allowed; } [data-theme="dark"] .sf-rowbtn.cy { border-color: var(--sf-border); } [data-theme="dark"] .sf-rowbtn.cy:hover { background: var(--sf-accent); border-color: var(--sf-accent); color: var(--sf-text-on-accent); } /* Variants tonals (danger pour suppression, etc.) si présents dans le markup */ [data-theme="dark"] .sf-rowbtn.danger { color: var(--gi-danger); } [data-theme="dark"] .sf-rowbtn.danger:hover { background: rgba(220,38,38,.18); border-color: var(--gi-danger); color: #fca5a5; } /* gi-card · adoucir la bordure qui devient blanc pur en dark via inversion */ [data-theme="dark"] .sf-shell .gi-card { border-color: var(--sf-border); } /* Help banner et variants info · les tokens --gi-info-bg/text sont en bleu pâle light · pas inversés en dark. On les remplace par des teintes sombres tirées du bleu accent · cohérent visuellement. */ [data-theme="dark"] .sf-shell .sf-help-banner, [data-theme="dark"] .sf-shell .gi-badge.info, [data-theme="dark"] .sf-shell .sf-bp-info { background: rgba(10, 102, 194, 0.14); color: #8AB8E0; border-color: rgba(10, 102, 194, 0.45); border-left-color: #5C8AC4; } /* ─ 13. Hovers en dark · contraste perceptible (Axe 1ter) ──── Les hovers sources `background:var(--gi-gray-50)` deviennent `#161618` en dark via inversion · trop proche de surface-raised `#141416` → hover invisible. Tous passent en `--sf-surface-hover` (#222226) qui crée un vrai écart visible. */ [data-theme="dark"] .sf-shell .sf-brand-item:hover, [data-theme="dark"] .sf-shell .sf-link-row:hover, [data-theme="dark"] .sf-shell .sf-icon-btn:hover, [data-theme="dark"] .sf-shell .sf-mfchip:hover, [data-theme="dark"] .sf-shell .sf-pf-chip:hover, [data-theme="dark"] .sf-shell .sf-wchip:hover, [data-theme="dark"] .sf-shell .sf-emoji:hover, [data-theme="dark"] .sf-shell .sf-notif:hover, [data-theme="dark"] .sf-shell .sf-notif-item:hover, [data-theme="dark"] .sf-shell .sf-cmdk-item:hover, [data-theme="dark"] .sf-shell .sf-cmdk-item.is-active, [data-theme="dark"] .sf-shell .sf-ver-row:hover, [data-theme="dark"] .sf-shell .gi-table tbody tr:hover, [data-theme="dark"] .sf-shell .gi-table tr:hover td, [data-theme="dark"] .sf-shell .cal-month .cell:hover:not(.off), [data-theme="dark"] .sf-shell .cal-month .cell.weekend:hover, [data-theme="dark"] .sf-shell .cal-week .col-body:hover, [data-theme="dark"] .sf-shell .cal-ev:hover { background: var(--sf-surface-hover) !important; color: var(--sf-text-primary); } /* Boutons icônes qui deviennent blanc-sur-blanc en dark (background:gi-black inversé en #E8E6E0 + color:#fff hardcodé) · on les remet visibles. */ [data-theme="dark"] .sf-shell .sf-iconbtn:hover:not([disabled]), [data-theme="dark"] .sf-shell .cal-nav-btn:hover, [data-theme="dark"] .sf-shell .gi-btn:hover { background: var(--sf-surface-hover) !important; color: var(--sf-text-primary) !important; border-color: var(--sf-border-strong) !important; } /* Bouton primaire en hover : garde l'accent · juste assombrissement */ [data-theme="dark"] .sf-shell .gi-btn-primary:hover { background: var(--sf-accent-hover) !important; border-color: var(--sf-accent-hover) !important; color: var(--sf-text-on-accent) !important; } /* Textes sur fonds devenus sombres · les heading qui pointent vers gi-black en dur doivent passer en text-primary. Idem pour les sf-cmd-card titles. */ [data-theme="dark"] .sf-shell .gi-hero-light, [data-theme="dark"] .sf-shell .gi-hero-light .gi-h2, [data-theme="dark"] .sf-shell .gi-hero-light h1, [data-theme="dark"] .sf-shell .gi-hero-light h2, [data-theme="dark"] .sf-shell .gi-hero-light h3, [data-theme="dark"] .sf-shell .sf-cmd-card, [data-theme="dark"] .sf-shell .sf-cmd-card * { color: var(--sf-text-primary); } [data-theme="dark"] .sf-shell .sf-cmd-card .muted, [data-theme="dark"] .sf-shell .gi-hero-light .muted, [data-theme="dark"] .sf-shell .gi-hero-light .gi-eyebrow { color: var(--sf-text-muted); } /* ============================================================ ★ BANDEAU MATINAL · Axe 4 Sprint UX (2026-06-01) ------------------------------------------------------------ Composant introduit en haut de la home : salutation personnalisée + 3 priorités du jour + barre de progression journée. Style Linear-pur, sobre, scopé `.sf-shell` (suit dark/light automatique). ============================================================ */ .sf-shell .sf-pulse-banner { margin: 0 0 24px; padding: 18px 24px; background: var(--sf-surface-raised); border: 1px solid var(--sf-border); border-left: 3px solid var(--sf-accent); border-radius: var(--gi-radius, 4px); } .sf-shell .sf-pulse-quote { font-family: var(--gi-font-display); font-size: 10.5px; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; color: var(--sf-accent); margin-bottom: 6px; } .sf-shell .sf-pulse-greeting { font-family: var(--gi-font-display); font-size: 17px; font-weight: 500; color: var(--sf-text-primary); letter-spacing: -0.01em; line-height: 1.3; } .sf-shell .sf-pulse-name { font-weight: 700; } .sf-shell .sf-pulse-prio { margin-top: 6px; font-size: 13px; color: var(--sf-text-secondary); line-height: 1.5; } .sf-shell .sf-pulse-prio b { color: var(--sf-text-primary); font-weight: 600; } .sf-shell .sf-pulse-progress { margin-top: 14px; height: 4px; background: var(--sf-surface-sunken); border-radius: 2px; overflow: hidden; } .sf-shell .sf-pulse-progress-bar { height: 100%; background: var(--sf-accent); transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1); } .sf-shell .sf-pulse-progress-label { margin-top: 6px; font-size: 10.5px; color: var(--sf-text-muted); font-family: var(--gi-font-display); letter-spacing: 0.10em; text-transform: uppercase; } /* ============================================================ ★ MICRO-CÉLÉBRATIONS · Axe 4 (helper celebrate) ------------------------------------------------------------ Toast subtil bottom-right · check vert qui glisse, jamais d'emoji, jamais de son. Pattern Linear / Things. Désactivé en motion=reduced (helper côté JS). ============================================================ */ #sf-celebrate-host { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .sf-celebrate { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 14px; background: var(--sf-surface-elevated, #fff); color: var(--sf-text-primary, #1A1A1A); border: 1px solid var(--sf-border, #E6E6E6); border-left: 3px solid var(--gi-success, #207f4b); border-radius: 6px; font-family: var(--gi-font-body); font-size: 13px; font-weight: 500; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10); animation: sf-celebrate-in 360ms cubic-bezier(0.22, 1, 0.36, 1) both; pointer-events: auto; } .sf-celebrate.is-leaving { animation: sf-celebrate-out 280ms cubic-bezier(0.22, 1, 0.36, 1) both; } .sf-celebrate-check { color: var(--gi-success, #207f4b); flex-shrink: 0; } .sf-celebrate-text { white-space: nowrap; } @keyframes sf-celebrate-in { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes sf-celebrate-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-4px) scale(0.98); } } [data-motion="reduced"] .sf-celebrate { animation: none !important; } /* ============================================================ ★ PAUSE BANNER · Axe 4 (suggestion de pause après 2h d'activité) ------------------------------------------------------------ Banner doux en bas-centre, suit l'esthétique Linear (border-left accent, sobriété). Snoozable 30 min ou validable. ============================================================ */ .sf-pause-banner { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 9998; display: flex; align-items: center; gap: 18px; padding: 14px 20px; background: var(--sf-surface-elevated, #fff); color: var(--sf-text-primary, #1A1A1A); border: 1px solid var(--sf-border, #E6E6E6); border-left: 3px solid var(--sf-accent, #0098DC); border-radius: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16); font-family: var(--gi-font-body); font-size: 13.5px; max-width: 560px; animation: sf-celebrate-in 380ms cubic-bezier(0.22, 1, 0.36, 1) both; } .sf-pause-text { flex: 1; line-height: 1.4; } .sf-pause-text b { font-weight: 600; } .sf-pause-actions { display: flex; gap: 8px; flex-shrink: 0; } [data-motion="reduced"] .sf-pause-banner { animation: none !important; } /* ============================================================ ★ MODE ZEN · Axe 3 Sprint UX (2026-06-01) ------------------------------------------------------------ Active via Cmd/Ctrl + \ (toggle) · sort via Esc. Masque la topbar + sidebar · le contenu (.sf-main) prend tout l'espace. Indicateur discret en haut-droite + raccourci pour sortir. ============================================================ */ body.sf-zen .sf-topbar, body.sf-zen .sf-sidebar, body.sf-zen .sf-side { display: none !important; } body.sf-zen .sf-shell { grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; } body.sf-zen .sf-main { padding: 32px 80px !important; /* Pas de max-width · le mode focus DOIT prendre tout l'espace dispo (sinon on rétrécit le contenu utile par rapport au mode normal). */ } /* Chip indicateur Zen · top-right, cliquable pour sortir */ .sf-zen-chip { position: fixed; top: 16px; right: 16px; z-index: 9999; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; background: var(--sf-surface-elevated, #fff); color: var(--sf-text-secondary, #52525B); border: 1px solid var(--sf-border, #E6E6E6); border-radius: 999px; font-family: var(--gi-font-display); font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); cursor: pointer; user-select: none; transition: background 160ms ease, transform 160ms ease; } .sf-zen-chip:hover { background: var(--sf-surface-hover, var(--sf-surface-elevated)); transform: translateY(-1px); } .sf-zen-chip kbd { display: inline-block; padding: 1px 5px; border: 1px solid var(--sf-border, #E6E6E6); border-radius: 3px; background: var(--sf-surface, transparent); font-family: var(--gi-font-display); font-size: 10px; color: var(--sf-text-secondary); margin: 0 2px; } .sf-zen-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sf-accent, #0098DC); display: inline-block; } /* ============================================================ ★ SIDEBAR REFONTE · Sprint UX (2026-06-01) ------------------------------------------------------------ Pattern wiki.graphik-impact.com / Linear : carte profil en haut cliquable (dropdown Mon profil / Déconnexion), quick actions sans label, sections labellées avec eyebrows, footer enrichi avec vrai statut système. ============================================================ */ /* ── 1. Carte profil ───────────────────────────────────── */ .sf-shell .sf-side-profile { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 12px 16px 16px; background: var(--sf-surface-elevated); border: 1px solid var(--sf-border); border-radius: 8px; cursor: pointer; transition: background 140ms ease, border-color 140ms ease; } .sf-shell .sf-side-profile:hover { background: var(--sf-surface-hover, var(--sf-surface-elevated)); border-color: var(--sf-border-strong); } .sf-shell .sf-side-profile-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--sf-accent); color: var(--sf-text-on-accent); display: inline-flex; align-items: center; justify-content: center; font-family: var(--gi-font-display); font-weight: 600; font-size: 13px; flex-shrink: 0; overflow: hidden; } .sf-shell .sf-side-profile-avatar img { width: 100%; height: 100%; object-fit: cover; } .sf-shell .sf-side-profile-info { flex: 1; min-width: 0; } .sf-shell .sf-side-profile-name { font-family: var(--gi-font-display); font-size: 13px; font-weight: 600; color: var(--sf-text-primary); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sf-shell .sf-side-profile-role { font-family: var(--gi-font-display); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-text-muted); margin-top: 2px; } .sf-shell .sf-side-profile-chevron { width: 14px; height: 14px; color: var(--sf-text-muted); transform: rotate(90deg); transition: transform 160ms ease; flex-shrink: 0; } .sf-shell .sf-side-profile[aria-expanded="true"] .sf-side-profile-chevron { transform: rotate(270deg); } /* Menu déroulant Mon profil / Déconnexion */ .sf-shell .sf-side-profile-menu { margin: 0 16px 8px; padding: 4px; background: var(--sf-surface-elevated); border: 1px solid var(--sf-border); border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } /* Ombre plus marquée en dark (les ombres légères s'effacent sur fond sombre) */ [data-theme="dark"] .sf-shell .sf-side-profile-menu { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); } .sf-shell .sf-side-profile-menu[hidden] { display: none; } .sf-shell .sf-side-profile-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; background: transparent; border: 0; border-radius: 4px; cursor: pointer; font-family: var(--gi-font-display); font-size: 12.5px; color: var(--sf-text-primary); text-align: left; transition: background 120ms ease; } .sf-shell .sf-side-profile-menu-item:hover { background: var(--sf-surface-hover, var(--sf-surface)); } .sf-shell .sf-side-profile-menu-item .ic { width: 14px; height: 14px; color: var(--sf-text-muted); } /* ── 2. Quick Actions ──────────────────────────────── Bloc invisible · les items à l'intérieur héritent du style standard .sf-nav-item (cohérent avec les autres entrées de menu, pas des cartes arrondies qui jureraient avec le reste de la sidebar). */ .sf-shell .sf-side-quick { display: flex; flex-direction: column; } /* Reset des styles natifs du