/* =================================================================== Haria — Design « Vision » de l'espace client Surcouche d'habillage chargée par TOUTES les pages de l'espace client (views/portal-*.html, juste après portal.css). Toutes les règles sont scopées sur body.vision : une page n'est concernée que si son porte cette classe. La console admin ne la charge pas. Structure reprise de la référence Vision UI (Simmmple) : — barre de gauche sombre, épurée, collée aux bords ; — fond nuit + lumière violette douce, fixe ; — les cartes sont des blocs sombres semi-transparents posés dessus ; — tout est réduit à 80 % sur ordinateur. Sombre par défaut ; le bouton de thème (#themeBtn, dévoilement circulaire de portal-shell.js) bascule en CLAIR — bloc « Mode CLAIR » en fin de feuille : mêmes tailles, seules les couleurs changent. Chaque page relit haria_portal_theme2 dans son amorce. =================================================================== */ /* ── Jetons ───────────────────────────────────────────────────────── */ /* Posés deux fois (nu et préfixé data-theme="dark") : l'amorce de la page pose data-theme="dark", la variante préfixée doit donc gagner sur celle de portal.css — même sélecteur, fichier chargé après. */ body.vision, :root[data-theme="dark"] body.vision { /* Encre */ --text: #ffffff; --text-2: #a0aec0; /* gris Vision (secondary) */ --text-3: rgba(160, 174, 192, 0.62); /* Surfaces */ --shell: #0c0a2a; /* hors coque (rebond de défilement) : fondu avec le haut du dégradé */ --surface: #0f1535; /* navy plein : champs, popovers */ --surface-2: rgba(255, 255, 255, 0.05); --surface-3: rgba(255, 255, 255, 0.10); --material: rgba(10, 14, 40, 0.86); /* Blocs des cartes : navy sombre SEMI-TRANSPARENT, sans bordure — la lumière violette du fond traverse le bloc sans nuire à la lecture. */ --card-bg: linear-gradient(127.09deg, rgba(8, 13, 38, 0.74) 19.41%, rgba(11, 16, 42, 0.54) 76.65%); --card-bg-solid: #0b1030; --card-line: transparent; /* Jetons « cockpit » du dashboard (portal.css) réalignés sur le bloc. */ --dash-card: var(--card-bg); --dash-card-solid: #0b1030; --dash-line: rgba(255, 255, 255, 0.08); --dash-line-strong: rgba(255, 255, 255, 0.20); --dash-subtle: rgba(255, 255, 255, 0.04); --dash-ink: #ffffff; --dash-muted: #a0aec0; /* Accent : violet Haria, calé pour rester lisible sur le bloc. */ --accent: #8b80ff; --accent-strong: #4318ff; --accent-deep: #4318ff; --accent-soft: rgba(139, 124, 240, 0.16); --accent-softer: rgba(139, 124, 240, 0.08); --ring: rgba(139, 124, 240, 0.35); /* Filets */ --separator: rgba(226, 232, 240, 0.12); --border: rgba(226, 232, 240, 0.14); --border-strong: rgba(226, 232, 240, 0.30); /* bordure « input » Vision */ /* Sémantique : vert et rouge exacts de la référence. */ --success: #01b574; --success-soft: rgba(1, 181, 116, 0.16); --danger: #ee5d50; --danger-soft: rgba(238, 93, 80, 0.16); --warn: #fbcf33; --warn-soft: rgba(251, 207, 51, 0.14); --info: #0075ff; --info-soft: rgba(0, 117, 255, 0.16); /* Séries du graphique : nuances de violet (courbe « Sales overview » de la référence — grande aire pleine, ligne claire par-dessus). */ /* Toutes tirées du violet des tuiles KPI (#8b5cf6 → #4318ff). */ --viz-1: #8b5cf6; /* conversations : le violet de la tuile */ --viz-2: #c4b5fd; /* leads : même violet éclairci, lu sur l'aire */ --viz-3: #6a3dfb; /* conversion : milieu du dégradé */ --activity-grid: rgba(226, 232, 240, 0.12); --activity-glow: rgba(139, 92, 246, 0.35); /* Chaleur et carte du monde : lueurs violettes. */ --hm-0: rgba(139, 124, 240, 0.08); --hm-1: rgba(139, 124, 240, 0.20); --hm-2: rgba(139, 124, 240, 0.36); --hm-3: rgba(139, 124, 240, 0.54); --hm-4: rgba(139, 124, 240, 0.62); --hm-5: rgba(139, 124, 240, 0.88); --wm-land: rgba(139, 124, 240, 0.16); --wm-pin: #0f1535; --track: rgba(226, 232, 240, 0.10); --tip-bg: #0f1535; --thumb: rgba(255, 255, 255, 0.13); /* Rayons Vision : cartes 20, coque 28. */ --radius: 20px; --shadow-card: 0 20px 27px rgba(2, 6, 23, 0.28); --shadow-hover: 0 18px 44px rgba(2, 6, 23, 0.42); --shadow-pop: 0 24px 64px rgba(2, 6, 23, 0.65); --shadow-accent: 0 10px 24px rgba(67, 24, 255, 0.40); --shadow-shell: 0 30px 80px rgba(2, 6, 23, 0.55); --shadow-thumb: 0 3px 8px rgba(0, 0, 0, 0.40); --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Inter", Roboto, sans-serif; } /* ── Fond de page : nuit + lumière violette douce, qui DÉFILE ────── */ /* Calque ancré en HAUT du document (et non plus fixe à l'écran) : la lumière violette éclaire le premier écran et s'en va quand on descend, comme le reste de la page. Il couvre un écran et demi puis se fond dans le bleu nuit uni du body. Teinte violette adoucie (~-30 %). */ body.vision { position: relative; min-height: 100vh; background: #080a24; color: var(--text); } body.vision::before { content: ""; position: absolute; top: 0; left: 0; right: 0; /* Jamais plus haut que le contenu : un calque de 150vh rallongeait les pages courtes (Rapports & export) au-delà de la coque, et la barre de gauche, collée DANS la coque, remontait en laissant un trou. */ height: 100%; max-height: 150vh; z-index: -1; pointer-events: none; background: radial-gradient(58vw 90vh at 50% 55vh, rgba(134, 108, 240, 0.42) 0%, rgba(118, 72, 232, 0.30) 26%, rgba(94, 44, 200, 0.20) 46%, rgba(66, 30, 150, 0.12) 62%, rgba(44, 22, 100, 0.05) 78%, rgba(40, 20, 96, 0) 92%), radial-gradient(46vw 80vh at 88% 55vh, rgba(150, 90, 240, 0.13) 0%, rgba(150, 90, 240, 0) 64%), radial-gradient(40vw 76vh at 8% 55vh, rgba(90, 40, 190, 0.12) 0%, rgba(90, 40, 190, 0) 62%), linear-gradient(180deg, #0c0c2c 0%, #0a0a27 45%, #080a24 100%); } /* ── Plein écran : la coque occupe tout le viewport ──────────────── */ /* Pas de marge, pas d'arrondi : le dashboard EST la page. Coque transparente : c'est le calque ci-dessus qui porte le fond. */ body.vision .app { margin: 0; min-height: 100vh; border-radius: 0; background: transparent; } /* ── Échelle : tout le tableau de bord à 80 % ─────────────────────── */ /* Blocs, textes, pictos et barre de gauche réduits de 20 % d'un seul geste (`zoom` agit aussi sur les tailles en px). Les hauteurs en vh sont zoomées elles aussi : elles sont compensées (÷ 0,8 = 125vh) pour que la coque et la barre couvrent toujours tout l'écran. Pas sur le tiroir mobile (déjà compact) ni à l'impression. */ @media (min-width: 901px) { body.vision .app { zoom: 0.8; min-height: 125vh; } body.vision .app .sidebar { height: 125vh; } } body.vision .shell { background: transparent; } /* ── Barre latérale : épurée, collée aux bords (référence Vision UI) ── */ /* Collée en haut et à gauche sur toute la hauteur, nuit profonde sur base navy pleine (la lumière violette du contenu ne la traverse pas), et beaucoup d'air : pas de compteurs, pictos en bulles, un seul accent violet sur l'entrée courante. */ body.vision .sidebar { top: 0; height: 100vh; margin: 0; padding: 1.1rem 0.9rem 0.9rem; border-right: none; border-radius: 0; overflow-x: hidden; /* pas de barre de défilement horizontale (barre réduite) */ background: linear-gradient(111.84deg, rgba(6, 11, 38, 0.96) 59.3%, rgba(26, 31, 62, 0.92) 100%), #060b26; box-shadow: none; } /* Marque : icône + nom en capitales espacées, puis filet en dégradé qui s'efface vers les bords (plus de trait plein). */ body.vision .side-head { border-bottom: none; padding-bottom: 1rem; margin-bottom: 1rem; height: auto; justify-content: center; } body.vision .side-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(224, 225, 226, 0) 0%, rgba(224, 225, 226, 0.32) 50%, rgba(224, 225, 226, 0) 100%); } body.vision .side-brand { gap: 10px; flex: 0 1 auto; } /* Logo détouré (public/logo-haria.png) : posé nu, sans tuile blanche. */ body.vision .side-brand .logo-mark { width: 28px; height: 28px; border-radius: 0; background: none; padding: 0; box-shadow: none; object-fit: contain; } body.vision .side-brand .logo-text { color: #fff; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } body.vision .side-brand .logo-sub { color: rgba(255, 255, 255, 0.55); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; } /* Nom de l'offre à côté du logo (posé par afficherOffreMarque) : gris pour le gratuit, dégradé violet-lavande « premium » pour les offres payantes, avec un reflet lent qui le traverse. */ body.vision .side-brand .logo-sub.offre-payante { background: linear-gradient(100deg, #a78bfa 0%, #e9d5ff 30%, #8b5cf6 55%, #c4b5fd 80%, #a78bfa 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; font-weight: 800; } @media (prefers-reduced-motion: no-preference) { body.vision .side-brand .logo-sub.offre-payante { animation: offre-reflet 6s ease-in-out infinite; } } @keyframes offre-reflet { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @media print { body.vision .side-brand .logo-sub.offre-payante { animation: none; } } /* Titres de section : petites capitales claires (« ACCOUNT PAGES »). */ body.vision .side-section { color: rgba(255, 255, 255, 0.82); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; padding: 0 0.75rem; margin: 1.1rem 0 0.35rem; } body.vision .side-nav, body.vision .side-group { gap: 2px; } body.vision .side-group > .side-section:first-child { margin-top: 1.1rem; } /* Entrées : encre claire, picto dans une tuile carrée navy au repos. */ body.vision .side-item { gap: 12px; padding: 0.4rem 0.75rem; border-radius: 15px; color: #fff; font-size: 0.83rem; font-weight: 500; } body.vision .side-item > svg { width: 29px; height: 29px; padding: 7px; border-radius: 11px; /* Bulle navy sombre, pictogramme peint avec le dégradé EXACT des tuiles KPI (#8b5cf6 → #4318ff) : #haria-violet est défini une fois dans la page, en unités 24×24 (les traits droits restent visibles). */ background: #1a1f37; color: #8b5cf6; stroke: url(#haria-violet); flex-shrink: 0; transition: background 0.15s, color 0.15s; } body.vision .side-item:hover { background: rgba(26, 31, 55, 0.55); color: #fff; } body.vision .side-item:hover > svg { background: #232946; } /* Entrée courante : pilule navy + tuile violette pleine, picto blanc. */ body.vision .side-item.active { background: #1a1f37; border: none; box-shadow: 0 3.5px 5.5px rgba(0, 0, 0, 0.02); color: #fff; font-weight: 600; } /* Entrée courante : bulle violette pleine, picto blanc (« Dashboard »). */ body.vision .side-item.active > svg { background: linear-gradient(135deg, #8b5cf6 0%, #4318ff 100%); color: #fff; stroke: #fff; box-shadow: none; } /* Épuré : pas de compteurs dans la barre (ils vivent dans les pages). */ body.vision .side-count { display: none; } /* Widgets du client : la pastille se centre dans la colonne des tuiles. */ body.vision .side-sub-item { gap: 12px; padding: 0.36rem 0.75rem; border-radius: 15px; color: rgba(255, 255, 255, 0.72); font-size: 0.8rem; } body.vision .side-sub-item:hover { background: rgba(26, 31, 55, 0.55); color: #fff; } body.vision .side-sub-item.active { background: #1a1f37; color: #fff; } body.vision .side-dot { width: 7px; height: 7px; margin: 0 11px; background: linear-gradient(135deg, #8b5cf6 0%, #4318ff 100%); } body.vision .side-sub-item.active .side-dot { box-shadow: 0 0 0 3px rgba(159, 122, 234, 0.25); } /* Carte « Votre offre » en pied de barre : vagues violettes (l'esprit de la carte « Need help ? »), tuile blanche, bouton navy en capitales. */ body.vision .side-promo { padding: 0.9rem 0.9rem 0.9rem; margin-top: 0.4rem; border-radius: 20px; background: #141040 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%233b1f8f'/%3E%3Cstop offset='1' stop-color='%23141040'/%3E%3C/linearGradient%3E%3ClinearGradient id='w1' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%238b5cf6'/%3E%3Cstop offset='1' stop-color='%234318ff'/%3E%3C/linearGradient%3E%3ClinearGradient id='w2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23c4b5fd' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%237c3aed' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='240' height='180' fill='url%28%23b%29'/%3E%3Cpath d='M70 0C96 30 150 20 160 62C170 104 128 120 150 150C168 174 214 170 240 180V0Z' fill='url%28%23w1%29'/%3E%3Cpath d='M118 0C132 26 186 30 190 70C194 108 168 124 190 146C208 164 230 160 240 158V0Z' fill='url%28%23w2%29'/%3E%3Cpath d='M150 0C160 22 212 34 214 72C216 104 200 120 222 138C230 145 236 146 240 146V0Z' fill='%23ddd6fe' fill-opacity='.35'/%3E%3C/svg%3E") center / cover no-repeat; box-shadow: none; } body.vision .side-promo::after { display: none; } body.vision .side-promo-icon { width: 34px; height: 34px; border-radius: 12px; background: #fff; color: #6d28d9; margin-bottom: 1.1rem; } body.vision .side-promo-icon svg { width: 17px; height: 17px; } body.vision .side-promo h4 { margin: 0; color: #fff; font-size: 0.88rem; font-weight: 700; letter-spacing: -0.01em; } body.vision .side-promo p { margin: 0.2rem 0 0.8rem; color: rgba(255, 255, 255, 0.82); font-size: 0.72rem; } body.vision .side-offre .offre-jauge { height: 4px; margin: 0.55rem 0 0; background: rgba(255, 255, 255, 0.2); } body.vision .side-promo a { padding: 0.62rem 0.5rem; border-radius: 12px; background: rgba(10, 14, 40, 0.88); color: #fff; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } body.vision .side-promo a:hover { background: #0a0e28; } /* Contenu de la barre un peu plus grand (~+12 %) que le reste du tableau de bord réduit à 80 % : lisibilité du menu, largeur inchangée. */ body.vision .side-brand .logo-mark { width: 32px; height: 32px; } body.vision .side-brand .logo-text, body.vision .side-brand .logo-sub { font-size: 0.9rem; } body.vision .side-section, body.vision .side-group > .side-section:first-child { font-size: 0.74rem; } body.vision .side-item { gap: 13px; font-size: 0.93rem; } body.vision .side-item > svg { width: 33px; height: 33px; padding: 8px; border-radius: 12px; } body.vision .side-sub-item { gap: 13px; font-size: 0.9rem; } body.vision .side-dot { margin: 0 13px; width: 8px; height: 8px; } body.vision .side-promo h4 { font-size: 0.98rem; } body.vision .side-promo p { font-size: 0.8rem; } body.vision .side-promo a { font-size: 0.72rem; padding: 0.7rem 0.5rem; } body.vision .side-promo-icon { width: 38px; height: 38px; } body.vision .side-promo-icon svg { width: 19px; height: 19px; } /* Écrans bas (portables) : la barre resserre son rythme pour que la carte d'offre et son bouton restent visibles sans défiler. */ @media (max-height: 740px) and (min-width: 901px) { body.vision .sidebar { padding-top: 0.8rem; } body.vision .side-head { padding-bottom: 0.7rem; margin-bottom: 0.6rem; } body.vision .side-section, body.vision .side-group > .side-section:first-child { margin: 0.75rem 0 0.2rem; } body.vision .side-item { padding: 0.26rem 0.75rem; } body.vision .side-sub-item { padding: 0.24rem 0.75rem; } body.vision .side-spacer { min-height: 0.5rem; } body.vision .side-promo-icon { display: none; } body.vision .side-promo { padding: 0.8rem 0.85rem; } } /* ── Pages d'accès (connexion, mot de passe, vérification, démarrage) ─ */ /* Même fond fixe que l'espace client (le calque body::before) : leurs conteneurs perdent leur fond ambiant, et la carte centrale devient un bloc sombre semi-transparent, arrondi et sans bordure, comme les autres. */ body.vision .auth-shell, body.vision .verification, body.vision .demarrage { background: transparent; } body.vision .auth-shell::before, body.vision .auth-shell::after { display: none; } body.vision .auth-card, body.vision .verification .carte, body.vision .demarrage .carte { border: none; border-radius: 20px; background: var(--card-bg); box-shadow: var(--shadow-card); } /* ── Barre haute : aucun bandeau sombre, juste un flou discret ───── */ /* La photo n'a pas de barre au-dessus du contenu : ici, pas de teinte sombre ni de filet — seul un léger flou sépare la barre du contenu qui passe derrière au défilement. */ body.vision .topbar { background: transparent; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: none; } /* Fil d'Ariane sur deux lignes, comme « Pages / Dashboard » puis « Dashboard » : le chemin, puis la période analysée. */ body.vision .topbar-crumb { display: flex; flex: 1; flex-direction: column; gap: 0.2rem; min-width: 0; font-size: 0.74rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.vision .crumb-period { display: inline-flex; align-items: center; gap: 0.35rem; color: #fff; font-size: 0.86rem; font-weight: 600; } body.vision .crumb-period svg { width: 13px; height: 13px; color: var(--text-3); } body.vision .topbar-actions .toolbar { flex-wrap: nowrap; } /* Barre haute un peu plus grande (~+15 %) : fil d'Ariane, période, recherche, menu de période, cloche et profil. */ body.vision .topbar { height: 84px; padding-top: 0.85rem; } body.vision .topbar-crumb { font-size: 0.84rem; gap: 0.25rem; } body.vision .crumb-period { font-size: 0.98rem; } body.vision .crumb-period svg { width: 15px; height: 15px; } body.vision .topbar-actions { gap: 0.55rem; margin-left: 0; } /* Pages sans fil d'Ariane : la recherche reste calée à droite, contre les actions, au lieu de flotter au milieu de la barre. */ body.vision .topbar > .search { margin-left: auto; } body.vision .topbar .icon-btn { width: 40px; height: 40px; } body.vision .topbar .icon-btn svg { width: 20px; height: 20px; } body.vision .topbar .avatar { width: 38px; height: 38px; font-size: 0.86rem; } body.vision .topbar-crumb b { color: #fff; font-weight: 600; } /* Bouton de thème : animation de dévoilement circulaire (portal-shell.js). */ /* Recherche épurée : petit champ navy, filet fin, pas de raccourci affiché. */ body.vision .search { flex: 0 1 240px; margin-left: auto; max-width: 240px; } body.vision .search input { height: 43px; padding: 0 0.9rem 0 2.5rem; border-radius: 15px; border: 0.5px solid rgba(226, 232, 240, 0.3); background: #0f1535; color: #fff; font-size: 0.9rem; box-shadow: none; } body.vision .search input::placeholder { color: rgba(160, 174, 192, 0.8); } body.vision .search input:focus { border-color: rgba(159, 122, 234, 0.7); box-shadow: 0 0 0 3px rgba(139, 124, 240, 0.18); } body.vision .search svg { left: 14px; width: 16px; height: 16px; color: rgba(160, 174, 192, 0.8); } body.vision .search kbd { display: none; } body.vision .icon-btn { color: rgba(255, 255, 255, 0.78); } body.vision .icon-btn:hover { background: rgba(255, 255, 255, 0.06); } body.vision .avatar { background: linear-gradient(97.89deg, #4318ff 0%, #9f7aea 100%); box-shadow: 0 4px 12px rgba(67, 24, 255, 0.40); } /* ── Zone de contenu ─────────────────────────────────────────────── */ /* Pleine largeur : les blocs occupent toute la place, barre de gauche dépliée ou réduite (plus de vide à droite quand on la replie). */ body.vision .page { max-width: none; padding: 1.7rem clamp(1.2rem, 2.3vw, 2.3rem) 4rem; } body.vision .page-head h1 { font-size: clamp(1.85rem, 2.4vw, 2.3rem); font-weight: 800; letter-spacing: -0.045em; } body.vision .page-eyebrow { color: var(--text-3); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em; text-transform: none; } body.vision .page-head .btn, body.vision .page-head .icon-btn { border: 1px solid rgba(226, 232, 240, 0.14); background: rgba(8, 13, 38, 0.55); box-shadow: none; color: rgba(255, 255, 255, 0.82); } body.vision .page-head .btn:hover, body.vision .page-head .icon-btn:hover { background: rgba(8, 13, 38, 0.75); } /* ── Cartes : blocs sombres posés sur le dégradé ─────────────────── */ body.vision .card { border: 1px solid var(--card-line); border-radius: 20px; background: var(--dash-card); box-shadow: var(--shadow-card); } body.vision .card-pad { padding: 1.25rem 1.35rem 1.4rem; } body.vision .card-analytics { border-radius: 20px; } body.vision .card-analytics, body.vision .attention-card { box-shadow: var(--shadow-card); } /* ── Rail KPI : quatre tuiles COMPACTES (structure Vision UI) ─────── */ /* Une ligne : libellé au-dessus, valeur + écart sur la même ligne, icône carrée violette centrée à droite. */ body.vision .kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; } body.vision .kpi-grid > .kpi { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label icon" "main icon"; align-items: center; column-gap: 1rem; row-gap: 0.15rem; position: relative; min-height: 0; padding: 1.15rem 1.35rem; overflow: hidden; border: 1px solid var(--card-line); border-radius: 20px; background: var(--dash-card); box-shadow: var(--shadow-card); transition: transform 160ms ease, box-shadow 160ms ease; } body.vision .kpi-grid > .kpi + .kpi { border-left: 1px solid var(--card-line); } /* Aucun effet au survol des blocs : ils restent immobiles. */ body.vision .kpi-grid > .kpi:hover { transform: none; background: var(--dash-card); box-shadow: var(--shadow-card); } body.vision .kpi-side { display: contents; } body.vision .kpi-icon { grid-area: icon; position: static; width: 50px; height: 50px; border: none; border-radius: 13px; background: linear-gradient(135deg, #8b5cf6 0%, #4318ff 100%); color: #fff; box-shadow: none; } body.vision .kpi-icon svg { width: 22px; height: 22px; } body.vision .kpi-label { grid-area: label; margin: 0; font-size: 0.84rem; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.vision .kpi-main { grid-area: main; position: static; display: flex; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 0.45rem; flex-wrap: nowrap; margin: 0; padding: 0; } body.vision .kpi-row { gap: 0.1rem; } body.vision .kpi-value { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; } body.vision .kpi-unit { color: #fff; font-size: 1.05rem; font-weight: 700; } body.vision .kpi-sub { max-width: none; font-size: 0.84rem; display: inline-flex; } body.vision .kpi-sub .delta { position: static; padding: 0; background: none; font-size: 0.84rem; font-weight: 700; } body.vision .kpi-sub .delta svg { display: none; } body.vision .kpi-sub .delta.up { color: #01b574; } body.vision .kpi-sub .delta.down { color: #ee5d50; } body.vision .kpi-sub .delta.flat { color: var(--text-3); } body.vision .kpi-spark { display: none; } body.vision .skel-kpi-icon { position: absolute; top: 50%; right: 1.35rem; transform: translateY(-50%); } /* ── Rangée du haut : bienvenue · pipeline · optimisation ────────── */ /* Proportions de la référence (≈ 795 / 425 / 665). */ body.vision .hero-row { display: grid; grid-template-columns: minmax(0, 1.87fr) minmax(0, 1fr) minmax(0, 1.56fr); gap: 1.5rem; margin-bottom: 1.5rem; } body.vision .hero-row > .card { position: relative; min-height: 370px; margin: 0; overflow: hidden; border: none; border-radius: 20px; background: var(--dash-card); box-shadow: var(--shadow-card); } /* Bienvenue : texte à gauche, grand visuel lumineux à droite (le logo Haria tient le rôle de la méduse), lien d'action en pied. */ body.vision .hero-row > .hero-welcome { display: flex; flex-direction: column; justify-content: space-between; padding: 2.1rem 2.2rem 1.9rem; background: var(--dash-card); } /* La méduse (photo détourée, public/meduse.png) occupe la moitié droite, cloche en haut, rognée à droite par l'arrondi du bloc — cadrage de la photo de référence. Halo violet doux autour de l'animal. */ body.vision .hero-art { position: absolute; top: 3%; right: -5%; width: 64%; height: 100%; display: flex; align-items: flex-start; justify-content: flex-end; pointer-events: none; } body.vision .hero-art .meduse { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 26px rgba(109, 61, 255, 0.55)) drop-shadow(0 0 60px rgba(88, 50, 230, 0.35)); transform-origin: 62% 30%; /* centre de la cloche */ } /* Nage, volontairement discrète : légère contraction de la cloche, petite poussée vers le haut, puis lente redescente. Cycle de 8 s. Les tentacules ondulent en plus, par le filtre SVG du HTML. Coupé si l'utilisateur réduit les animations, et à l'impression. */ @media (prefers-reduced-motion: no-preference) { body.vision .hero-art .meduse { animation: meduse-nage 8s cubic-bezier(0.45, 0, 0.35, 1) infinite; } } @keyframes meduse-nage { 0% { transform: translate(0, 0) rotate(0deg) scale(1, 1); } 15% { transform: translate(0, 1px) rotate(0.2deg) scale(1.01, 0.985); } 35% { transform: translate(-1px, -6px) rotate(-0.5deg) scale(0.995, 1.01); } 62% { transform: translate(-2px, -4px) rotate(-0.3deg) scale(1, 1); } 100% { transform: translate(0, 0) rotate(0deg) scale(1, 1); } } @media print { body.vision .hero-art .meduse { animation: none; } } body.vision .hero-copy { position: relative; max-width: 52%; } body.vision .hero-kicker { display: block; color: var(--text-2); font-size: 0.86rem; font-weight: 500; } body.vision .hero-welcome h1 { margin: 0.45rem 0 0.9rem; color: #fff; font-size: 1.95rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; } body.vision .hero-text { margin: 0; color: var(--text-2); font-size: 1rem; line-height: 1.55; } body.vision .hero-status { display: block; margin-top: 1rem; font-size: 0.78rem; } body.vision .hero-status .brief-live { color: #9ce9b5; } body.vision .hero-link { position: relative; align-self: flex-start; color: #fff; font-size: 0.82rem; font-weight: 600; text-decoration: none; } body.vision .hero-link span { display: inline-block; margin-left: 0.3rem; transition: transform 0.15s; } body.vision .hero-link:hover span { transform: translateX(3px); } /* Cartes à jauge : titre, sous-titre gris, arc au centre. */ body.vision .hero-gauge-card { padding: 1.9rem 2rem 1.6rem; } body.vision .hero-gauge-card h3 { margin: 0; color: #fff; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; } body.vision .hero-sub { display: block; margin-top: 0.3rem; color: var(--text-2); font-size: 0.88rem; } /* Bloc à jauge (forme « Satisfaction rate ») — optimisation du chatbot : arc violet, pastille chiffrée qui chevauche le bas de l'arc. */ body.vision .hero-arc-card { display: flex; flex-direction: column; align-items: stretch; } body.vision .hero-arc { position: relative; width: 190px; max-width: 100%; margin: 1.3rem auto -2.4rem; } body.vision .hero-arc svg { display: block; width: 100%; height: auto; } body.vision .hero-arc-icon { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #8b5cf6 0%, #4318ff 100%); color: #fff; box-shadow: none; } body.vision .hero-arc-icon svg { width: 24px; height: 24px; } body.vision .hero-readout { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 0.5rem; padding: 0.9rem 1.1rem 1rem; border-radius: 20px; background: linear-gradient(127deg, rgba(6, 11, 40, 0.92) 20%, rgba(10, 14, 35, 0.80) 80%); } body.vision .hero-scale { color: var(--text-3); font-size: 0.72rem; font-weight: 600; padding-top: 0.2rem; } body.vision .hero-readout-main { text-align: center; min-width: 0; } body.vision .hero-readout-main strong { display: block; color: #fff; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; } body.vision .hero-readout-main > span { display: block; margin-top: 0.15rem; color: var(--text-3); font-size: 0.72rem; } body.vision .hero-readout-main .delta { padding: 0; background: none; font-weight: 700; } body.vision .hero-readout-main .delta svg { display: none; } body.vision .hero-readout-main .delta.up { color: #01b574; } body.vision .hero-readout-main .delta.down { color: #ee5d50; } /* Bloc à anneau (forme « Referral tracking ») — pipeline estimé : deux pastilles à gauche, anneau vert à droite, bouton « … » en haut (ouvre la saisie de la valeur d'un client). */ body.vision .hero-ring-card { display: flex; flex-direction: column; } body.vision .hero-ring-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } body.vision .hero-more { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: #1a1f37; color: #8b5cf6; } body.vision .hero-more svg { width: 18px; height: 18px; } body.vision .hero-more:hover { background: #232946; } body.vision button.hero-more { border: none; cursor: pointer; padding: 0; } body.vision .hero-ring-text strong.long { font-size: 1.75rem; } body.vision .hero-arc-foot { margin-top: 0.75rem; color: var(--text-3); font-size: 0.74rem; text-align: center; } body.vision .hero-ring-card .brief-value-setting { margin: 0.8rem 0 0; padding: 0; border: none; justify-content: flex-start; font-size: 0.74rem; color: var(--text-3); } body.vision .hero-ring-card .brief-value-setting .link-more { color: #a78bfa; } body.vision .hero-ring-body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); align-items: center; gap: 1.4rem; flex: 1; margin-top: 1.2rem; } body.vision .hero-ring-stats { display: grid; gap: 1.4rem; } body.vision .hero-stat { padding: 1.15rem 1.3rem; border-radius: 20px; background: linear-gradient(127deg, rgba(6, 11, 40, 0.92) 20%, rgba(10, 14, 35, 0.80) 80%); } body.vision .hero-stat span { display: block; color: var(--text-2); font-size: 0.84rem; } body.vision .hero-stat strong { display: block; margin-top: 0.3rem; color: #fff; font-size: 1.2rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.vision .hero-ring { position: relative; width: 100%; max-width: 210px; justify-self: center; } body.vision .hero-ring svg { display: block; width: 100%; height: auto; } body.vision .hero-ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } body.vision .hero-ring-text span { color: var(--text-2); font-size: 0.82rem; } body.vision .hero-ring-text strong { color: #fff; font-size: 2.6rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } body.vision .hero-ring-text small { color: var(--text-2); font-size: 0.76rem; max-width: 80%; line-height: 1.3; } @media (prefers-reduced-motion: no-preference) { body.vision .arc-value { transition: stroke-dasharray 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); } } /* Rangée responsive : pipeline + optimisation côte à côte sous le bloc de bienvenue, puis tout en colonne. */ @media (max-width: 1280px) { body.vision .hero-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } body.vision .hero-row > .hero-welcome { grid-column: 1 / -1; min-height: 300px; } } @media (max-width: 760px) { body.vision .hero-row { grid-template-columns: minmax(0, 1fr); gap: 1rem; } body.vision .hero-row > .card { min-height: 0; } body.vision .hero-copy { max-width: 70%; } body.vision .hero-art { width: 50%; right: -6%; opacity: 0.7; } body.vision .hero-ring-body { grid-template-columns: minmax(0, 1fr); } body.vision .hero-ring-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; } } /* ── Carte Activité : bloc net, sans décor de cockpit ────────────── */ body.vision .activity-card { border: 1px solid var(--card-line); border-radius: 20px; background: var(--dash-card); box-shadow: var(--shadow-card); padding: 1.4rem 1.5rem 1.25rem; } body.vision .activity-card::before, body.vision .activity-card::after { display: none; } :root[data-theme="dark"] body.vision .activity-card { border-color: var(--card-line); background: var(--dash-card); box-shadow: var(--shadow-card); } /* Carte calquée sur « Sales overview » : titre, ligne d'évolution (écart en couleur, période en gris), puis la courbe seule — ni gros chiffre, ni résumé, ni légende, ni sélecteur de période. */ body.vision .activity-card { padding: 1.5rem 1.6rem 1.25rem; } body.vision .activity-card .tc-head { border-bottom: none; padding-bottom: 0; margin-bottom: 0.4rem; } body.vision .activity-card .tc-ident h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; } body.vision .activity-card .tc-sub { margin-top: 0.3rem; color: var(--text-2); font-size: 0.8rem; } body.vision .activity-card .tc-sub .delta { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0; background: none; font-weight: 700; } body.vision .activity-card .tc-sub .delta svg { width: 12px; height: 12px; } body.vision .activity-card .tc-sub .delta.up { color: #01b574; } body.vision .activity-card .tc-sub .delta.down { color: #ee5d50; } body.vision .activity-card .tc-sub .delta.flat { color: var(--text-2); } /* Le pourcentage qui suit « (+x) de plus » reste discret, sans flèche. */ body.vision .activity-card .tc-sub .delta:not(.tc-more) { color: var(--text-3); font-weight: 600; } body.vision .activity-card .tc-sub .delta:not(.tc-more) svg { display: none; } body.vision .activity-card .tc-visual { margin: 0; padding: 0.6rem 0 0; border-top: none; } /* Étiquettes des axes détachées de la courbe : valeurs calées à gauche (la grille commence 52 px plus loin), dates bien sous l'axe. */ body.vision .activity-card .tc-tick { fill: rgba(255, 255, 255, 0.72); font-size: 10px; font-weight: 700; } body.vision .activity-card .tc-x { margin-top: 1rem; padding-left: 52px; color: rgba(255, 255, 255, 0.72); font-size: 0.66rem; font-weight: 700; } @media (max-width: 720px) { body.vision .activity-card { padding: 1.1rem 1rem 1rem; } } body.vision .activity-card .tooltip { border: 1px solid rgba(226, 232, 240, 0.16); background: rgba(15, 21, 53, 0.96); box-shadow: 0 16px 34px rgba(2, 6, 23, 0.55); } /* Courbes façon « Sales overview » : aires pleines en dégradé violet qui s'éteignent vers le bas, lignes claires, repères pointillés discrets, aucune verticale. */ /* Réglage exact du graphique « Sales overview » (Vision UI, ApexCharts : fill gradient vertical, opacityFrom 0.8 → opacityTo 0, sans palier) : fondu LINÉAIRE de 0,8 au sommet de chaque aire à 0 sur la ligne de base. Le stop à 70 % vaut donc 0,8 × 0,3 = 0,24. Les deux séries suivent la même rampe, seule la teinte change (violet de la tuile / violet clair). */ body.vision .activity-card .tc-f1 { --tc-fill-color: #8b5cf6; --tc-fill-color-end: #4318ff; --tc-fill-a: 0.8; --tc-fill-b: 0.24; --tc-fill-c: 0; } body.vision .activity-card .tc-f2 { --tc-fill-color: #a78bfa; --tc-fill-color-end: #6a3dfb; --tc-fill-a: 0.8; --tc-fill-b: 0.24; --tc-fill-c: 0; } body.vision .activity-card .tc-f3 { --tc-fill-color: #8b5cf6; --tc-fill-color-end: #4318ff; --tc-fill-a: 0.55; --tc-fill-b: 0.18; --tc-fill-c: 0.02; } body.vision .activity-card .tc-vgrid { display: none; } body.vision .activity-card .tc-grid { stroke: rgba(226, 232, 240, 0.14); stroke-dasharray: 4 5; opacity: 1; } body.vision .activity-card .tc-s1 { stroke-width: 2.2; opacity: 1; } body.vision .activity-card .tc-line { filter: none; } body.vision .activity-card .tc-s2 { stroke-width: 1.8; opacity: 0.85; } body.vision .activity-card .tc-s3 { stroke-width: 2; opacity: 0.95; } body.vision .activity-card .tc-k2, body.vision .activity-card .tc-k3 { opacity: 1; } /* Curseur et points de survol : l'opacité CSS de portal.css battait l'attribut opacity="0" posé au repos — ils restaient affichés. */ body.vision .activity-card .tc-cursor { stroke: #c4b5fd; } body.vision .activity-card .tc-cursor[opacity="0"], body.vision .activity-card .tc-dot[opacity="0"] { opacity: 0; } body.vision .activity-card .tc-cursor[opacity="1"] { opacity: 0.45; } /* ── Priorités du jour, chaleur, carte du monde, fil ─────────────── */ /* Priorités du jour, façon « Orders overview » : titre, ligne d'état précédée d'un picto coloré, puis une frise — pictos nus reliés par un fin trait vertical, aucun encadré, compteur seulement s'il y a à faire. */ body.vision .attention-card { padding: 1.5rem 1.6rem 1.3rem; } body.vision .attention-head { flex-direction: column; align-items: flex-start; gap: 0.3rem; margin-bottom: 1.1rem; } body.vision .attention-head h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; } body.vision .attention-total, body.vision .attention-total.clear, body.vision .attention-total.partial { gap: 0.35rem; min-height: 0; padding: 0; border-radius: 0; background: none; color: var(--text-2); font-size: 0.8rem; font-weight: 500; } body.vision .attention-total svg { width: 15px; height: 15px; padding: 3px; border-radius: 50%; background: #fbcf33; color: #0b1030; } body.vision .attention-total.clear svg { background: #01b574; } body.vision .attention-total.partial svg { background: rgba(160, 174, 192, 0.5); } body.vision .attention-list { gap: 0; } body.vision .attention-item { position: relative; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 1rem; margin: 0 -0.6rem; padding: 0.85rem 0.6rem; border: none; border-radius: 12px; background: none; } body.vision .attention-item:hover { transform: none; border: none; background: none; } /* Le trait de la frise : du dessous du picto au bas de l'entrée, puis du haut de l'entrée suivante au-dessus de son picto (robuste aux hauteurs inégales des entrées). */ body.vision .attention-item::before, body.vision .attention-item::after { content: ""; position: absolute; left: calc(0.6rem + 9.5px); width: 1px; background: rgba(226, 232, 240, 0.14); } body.vision .attention-item:not(:last-child)::after { top: calc(50% + 14px); bottom: 0; } body.vision .attention-item:not(:first-child)::before { top: 0; bottom: calc(50% + 14px); } body.vision .attention-icon, body.vision .attention-item .attention-icon { width: 20px; height: 20px; border-radius: 0; background: none; color: #01b574; } body.vision .attention-icon svg { width: 17px; height: 17px; } body.vision .attention-item.needs-action .attention-icon.relance { background: none; color: #fbcf33; } body.vision .attention-item.needs-action .attention-icon.conversation, body.vision .attention-item.needs-action .attention-icon.integration { background: none; color: #ee5d50; } body.vision .attention-item.unavailable .attention-icon { background: none; color: var(--text-3); } body.vision .attention-copy { gap: 0.25rem; } body.vision .attention-copy strong { color: #fff; font-size: 0.86rem; font-weight: 600; } body.vision .attention-copy span { color: var(--text-3); font-size: 0.74rem; } body.vision .attention-count { font-size: 0.95rem; color: #fff; } body.vision .attention-item.clear .attention-count, body.vision .attention-item.unavailable .attention-count, body.vision .attention-go { display: none; } /* Activité par heure : cases en nuances du violet des tuiles KPI (#8b5cf6 → #4318ff) — même dégradé, de plus en plus dense, la case la plus active porte un halo. Fond des cases vides à peine teinté. */ body.vision .heat-head { margin-bottom: 1.25rem; } body.vision .heat-head h3 { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; } body.vision .heat-icon { width: 36px; height: 36px; border: none; border-radius: 12px; background: linear-gradient(135deg, #8b5cf6 0%, #4318ff 100%); color: #fff; box-shadow: none; } body.vision .heat-more { border: none; background: rgba(255, 255, 255, 0.05); color: var(--text-2); } body.vision .heat-more:hover { background: rgba(139, 92, 246, 0.18); color: #fff; } body.vision .hm { gap: 6px; } /* Cases TOUJOURS carrées, barre de gauche dépliée ou réduite : la hauteur suit la largeur (aspect-ratio) au lieu d'étirer les lignes pour remplir la carte (grid-auto-rows: 1fr de portal.css) ; la grille se centre verticalement dans la place restante. */ body.vision .heat-card .hm-wrap { justify-content: center; } body.vision .heat-card .hm-wrap .hm, body.vision .hm { flex: none; grid-auto-rows: auto; align-content: start; align-items: center; /* Cases BORNÉES. Les colonnes en `1fr` (portal.css) prenaient toute la largeur de la carte : sur un écran large, avec `aspect-ratio: 1/1`, la grille sortait en carrés de 120 px et la carte devenait démesurée (et entraînait sa voisine, en rangée à hauteurs égales). `minmax(0, 64px)` garde la taille de lecture au-delà, et laisse la grille rétrécir en dessous ; `justify-content: center` la recentre dans la place restante. */ grid-template-columns: 30px repeat(7, minmax(0, 64px)); justify-content: center; } body.vision .hm-cell { height: auto; min-height: 0; aspect-ratio: 1 / 1; } body.vision .hm-day { color: var(--text-3); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } body.vision .hm-hour { color: var(--text-3); font-size: 0.66rem; opacity: 0.8; } body.vision .hm-cell { border-radius: 8px; background: rgba(139, 92, 246, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } body.vision .hm-cell.l1, body.vision .hm-key.l1 { background: linear-gradient(135deg, rgba(139, 92, 246, 0.22) 0%, rgba(67, 24, 255, 0.18) 100%); } body.vision .hm-cell.l2, body.vision .hm-key.l2 { background: linear-gradient(135deg, rgba(139, 92, 246, 0.40) 0%, rgba(67, 24, 255, 0.32) 100%); } body.vision .hm-cell.l3, body.vision .hm-key.l3 { background: linear-gradient(135deg, rgba(139, 92, 246, 0.60) 0%, rgba(67, 24, 255, 0.50) 100%); } body.vision .hm-cell.l4, body.vision .hm-key.l4 { background: linear-gradient(135deg, rgba(139, 92, 246, 0.82) 0%, rgba(67, 24, 255, 0.72) 100%); } body.vision .hm-cell.l5, body.vision .hm-key.l5 { background: linear-gradient(135deg, #8b5cf6 0%, #4318ff 100%); } body.vision .hm-cell.l4, body.vision .hm-cell.l5 { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); } body.vision .hm-cell.l5 { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 10px rgba(103, 58, 255, 0.28); } body.vision .hm-cell:hover, body.vision .hm-cell:focus-visible { transform: scale(1.08); box-shadow: 0 0 0 2px rgba(196, 181, 253, 0.55), 0 6px 16px rgba(67, 24, 255, 0.35); } body.vision .hm-foot { margin-top: 1.1rem; } body.vision .hm-note { color: var(--text-2); font-weight: 500; } body.vision .hm-scale { gap: 5px; color: var(--text-3); } body.vision .hm-key { width: 11px; height: 11px; border-radius: 3.5px; } /* Colonnes bornées, même raison que les cases de la heatmap : `.colcell` est en `flex: 1`, donc sur un écran large sept barres se partageaient 900 px et ressortaient en pavés. Elles gardent leur largeur de lecture et la série se centre. */ body.vision .cols { justify-content: center; } body.vision .colcell { max-width: 88px; } body.vision .cols.dense .colcell { max-width: 34px; } /* Note de lead : étoiles sur fond nuit. L'éteint doit rester visible sans attirer l'œil, l'allumé est franc — c'est la colonne qu'on balaye. */ body.vision .score-stars .star svg { fill: rgba(255, 255, 255, 0.16); } body.vision .score-stars .star.on svg { fill: #a78bfa; } body.vision .score-stars.score-warm .star.on svg { fill: #ffb020; } body.vision .score-stars.score-hot .star.on svg { fill: #46d17f; } body.vision .score-why { color: var(--text-2); } /* Guide de branchement d'un connecteur : bloc légèrement détaché du fond de la fenêtre, comme les autres encarts de l'habillage Vision. */ body.vision .int-tuto { background: rgba(255, 255, 255, 0.035); border-color: rgba(255, 255, 255, 0.07); } body.vision .int-tuto-head h4 { color: #fff; } body.vision .int-tuto-time { color: #c4b5fd; background: rgba(139, 92, 246, 0.16); } body.vision .int-tuto-doc { color: #a78bfa; } body.vision .sa-portee { background: rgba(139, 92, 246, 0.12); border-color: rgba(139, 92, 246, 0.22); border-left-color: #8b5cf6; color: var(--text-2); } body.vision .sa-portee b { color: #fff; } body.vision .sa-portee svg { color: #a78bfa; } body.vision .map-stat-value { color: #fff; } body.vision .feed-row a:hover { background: rgba(255, 255, 255, 0.04); } body.vision .feed-dot.lead { background: linear-gradient(135deg, #6c5ce7, #4318ff); } /* ── Contrôles ───────────────────────────────────────────────────── */ body.vision .btn { background: rgba(8, 13, 38, 0.55); color: #fff; box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.13); } body.vision .btn:hover { background: rgba(8, 13, 38, 0.78); } body.vision .btn.primary { background: linear-gradient(97.89deg, #4318ff 0%, #9f7aea 100%); border: none; color: #fff; font-weight: 700; box-shadow: var(--shadow-accent); } body.vision .btn.primary:hover { filter: brightness(1.1); } body.vision .segmented { background: rgba(8, 13, 38, 0.55); } body.vision .segmented button { color: rgba(255, 255, 255, 0.78); } body.vision .segmented button.active { background: rgba(255, 255, 255, 0.13); box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.14), var(--shadow-thumb); color: #fff; } body.vision .link-more { color: #a99dff; } body.vision .value-input { color: #fff; } body.vision .select { color: #fff; } body.vision .tc-expand { border: 1px solid rgba(226, 232, 240, 0.14); background: rgba(8, 13, 38, 0.45); color: var(--text-2); } body.vision .tc-expand:hover { background: rgba(255, 255, 255, 0.07); color: #b0a8ff; } body.vision .period-line svg { color: var(--text-3); } body.vision .menu, body.vision .tool-pop { border: 1px solid rgba(226, 232, 240, 0.14); background: rgba(10, 14, 40, 0.92); } /* ── Calendrier de la période (tableau de bord) ──────────────────── */ /* Raccourcis 7/30/90 j, puis un mois en grille : jours nus, plage en violet translucide, bornes en dégradé violet, jours grisés non sélectionnables (futur, plus d'un an, plus de 90 jours). */ body.vision .cal-pop { width: 304px; padding: 1rem 1rem 0.9rem; border-radius: 18px; background: #0b1030; /* opaque : la page ne transparaît pas */ box-shadow: 0 24px 60px rgba(2, 6, 23, 0.6); } body.vision .cal-pop .segmented { margin-bottom: 0.9rem; } body.vision .cal-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; } body.vision .cal-mois { color: #fff; font-size: 0.9rem; font-weight: 700; text-transform: capitalize; } body.vision .cal-nav { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: none; border-radius: 10px; background: #1a1f37; color: #8b5cf6; cursor: pointer; } body.vision .cal-nav svg { width: 14px; height: 14px; transform: rotate(180deg); } body.vision .cal-nav.suiv svg { transform: none; } body.vision .cal-nav:hover:not(:disabled) { background: #232946; } body.vision .cal-nav:disabled { opacity: 0.3; cursor: default; } body.vision .cal-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; } body.vision .cal-js { padding: 0.3rem 0; color: var(--text-3); font-size: 0.68rem; font-weight: 600; text-align: center; } body.vision .cal-j { height: 34px; padding: 0; border: none; border-radius: 10px; background: none; color: rgba(255, 255, 255, 0.86); font: inherit; font-size: 0.8rem; font-variant-numeric: tabular-nums; cursor: pointer; } body.vision .cal-j:hover:not(:disabled) { background: rgba(139, 92, 246, 0.16); color: #fff; } body.vision .cal-j.auj { box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.55); } body.vision .cal-j.off { color: var(--text-3); opacity: 0.35; cursor: default; } body.vision .cal-j.dans { border-radius: 0; background: rgba(139, 92, 246, 0.18); color: #fff; } body.vision .cal-j.bord, body.vision .cal-j.bord:hover:not(:disabled) { background: linear-gradient(135deg, #8b5cf6 0%, #4318ff 100%); color: #fff; font-weight: 700; } body.vision .cal-foot { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.8rem; padding-top: 0.75rem; border-top: 1px solid rgba(226, 232, 240, 0.08); } body.vision .cal-resume { color: var(--text-2); font-size: 0.76rem; } body.vision .cal-actions { display: flex; justify-content: flex-end; gap: 0.45rem; } @media (max-width: 560px) { body.vision .cal-pop { width: min(304px, calc(100vw - 2rem)); } } body.vision .menu-item { color: rgba(255, 255, 255, 0.86); border-bottom-color: var(--separator); } body.vision .menu-item svg { color: var(--text-2); } /* ── Divers ──────────────────────────────────────────────────────── */ body.vision .verrou-carte { background: #0f1535; border: 1px solid rgba(226, 232, 240, 0.14); } body.vision .toast { background: #0f1535; border: 1px solid rgba(226, 232, 240, 0.14); } body.vision .info-pop { border: 1px solid rgba(226, 232, 240, 0.14); } body.vision .tuto-halo { box-shadow: 0 0 0 9999px rgba(2, 5, 21, 0.62), 0 0 0 2px #8b80ff; } body.vision .tuto-bulle, body.vision .bravo-carte { background: #0f1535; border: 1px solid rgba(226, 232, 240, 0.14); } body.vision .bravo-voile { background: rgba(2, 5, 21, 0.66); } body.vision .footer { color: rgba(160, 174, 192, 0.55); } body.vision .footer a { color: #a99dff; } body.vision ::selection { background: rgba(139, 124, 240, 0.35); color: #fff; } * body.vision { scrollbar-color: rgba(226, 232, 240, 0.22) transparent; } /* ── Sous 900 px : plein écran, tiroir, recherche qui se resserre ── */ @media (max-width: 900px) { body.vision .app { margin: 0; border-radius: 0; min-height: 100vh; } /* Tiroir : collé au bord (une marge laisserait dépasser le panneau une fois translaté hors écran). */ body.vision .sidebar { top: 0; height: 100vh; margin: 0; border-radius: 0; } body.vision .topbar-crumb { display: none; } body.vision .search { flex: 1 1 auto; max-width: none; } /* Le champ peut se resserrer sous la place des actions : sans `min-width: 0`, le topbar peut pousser la cloche hors de l'écran. */ body.vision .search { min-width: 0; } body.vision .search input { min-width: 0; } body.vision .topbar-actions { flex-shrink: 0; } } /* ── Sous 760 px : deux tuiles par rangée ────────────────────────── */ @media (max-width: 760px) { body.vision .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; margin-bottom: 1rem; } } @media (max-width: 1100px) and (min-width: 761px) { body.vision .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ── Sous 560 px : tuiles resserrées ─────────────────────────────── */ @media (max-width: 560px) { body.vision .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; } body.vision .kpi-grid > .kpi { padding: 0.9rem 1rem; column-gap: 0.6rem; } body.vision .kpi-icon { width: 38px; height: 38px; border-radius: 11px; } body.vision .kpi-icon svg { width: 17px; height: 17px; } body.vision .kpi-value { font-size: 1.15rem; } body.vision .kpi-main { flex-wrap: wrap; row-gap: 0; } body.vision .kpi-sub, body.vision .kpi-sub .delta { font-size: 0.74rem; } body.vision .hero-stat { padding: 0.9rem 1rem; } body.vision .hero-stat strong { font-size: 1rem; white-space: normal; } } @media (max-width: 360px) { body.vision .kpi-grid { grid-template-columns: minmax(0, 1fr); } } /* ══ Mode CLAIR du design « Vision » ═══════════════════════════════ Même structure, mêmes tailles, mêmes dégradés violets : SEULES les couleurs changent. Actif quand (bouton de thème, préférence enregistrée dans haria_portal_theme2). Chaque couleur sombre écrite en dur plus haut est doublée ici. */ :root[data-theme="light"] body.vision { --text: #1b1d3a; --text-2: #6b7194; --text-3: rgba(107, 113, 148, 0.72); --shell: #f3f2fb; --surface: #ffffff; --surface-2: rgba(67, 24, 255, 0.04); --surface-3: rgba(67, 24, 255, 0.08); --material: rgba(255, 255, 255, 0.92); --card-bg: linear-gradient(127.09deg, rgba(255, 255, 255, 0.92) 19.41%, rgba(255, 255, 255, 0.78) 76.65%); --card-bg-solid: #ffffff; --dash-card: var(--card-bg); --dash-card-solid: #ffffff; --dash-line: rgba(27, 29, 58, 0.08); --dash-line-strong: rgba(27, 29, 58, 0.16); --dash-subtle: rgba(67, 24, 255, 0.03); --dash-ink: #1b1d3a; --dash-muted: #6b7194; --accent: #6a3dfb; --separator: rgba(27, 29, 58, 0.09); --border: rgba(27, 29, 58, 0.10); --border-strong: rgba(27, 29, 58, 0.20); --activity-grid: rgba(27, 29, 58, 0.09); --wm-land: rgba(106, 61, 251, 0.14); --wm-pin: #ffffff; --track: rgba(27, 29, 58, 0.08); --tip-bg: #ffffff; --thumb: #ffffff; --shadow-card: 0 14px 30px rgba(67, 24, 255, 0.07); --shadow-hover: 0 18px 40px rgba(67, 24, 255, 0.10); --shadow-pop: 0 24px 60px rgba(27, 29, 58, 0.16); --shadow-shell: 0 30px 80px rgba(27, 29, 58, 0.14); --shadow-thumb: 0 3px 8px rgba(27, 29, 58, 0.12); } :root[data-theme="light"] body.vision { background: #f3f2fb; } :root[data-theme="light"] body.vision::before { background: radial-gradient(58vw 90vh at 50% 55vh, rgba(139, 92, 246, 0.16) 0%, rgba(139, 92, 246, 0.10) 30%, rgba(139, 92, 246, 0.04) 62%, rgba(139, 92, 246, 0) 90%), radial-gradient(46vw 80vh at 88% 55vh, rgba(67, 24, 255, 0.06) 0%, rgba(67, 24, 255, 0) 64%), radial-gradient(40vw 76vh at 8% 55vh, rgba(168, 85, 247, 0.06) 0%, rgba(168, 85, 247, 0) 62%), linear-gradient(180deg, #f6f5fd 0%, #f4f3fc 45%, #f3f2fb 100%); } /* Barre de gauche */ :root[data-theme="light"] body.vision .sidebar { background: #ffffff; box-shadow: 1px 0 0 rgba(27, 29, 58, 0.06); } :root[data-theme="light"] body.vision .side-head::after { background: linear-gradient(90deg, rgba(27, 29, 58, 0) 0%, rgba(27, 29, 58, 0.14) 50%, rgba(27, 29, 58, 0) 100%); } :root[data-theme="light"] body.vision .side-brand .logo-text { color: #1b1d3a; } :root[data-theme="light"] body.vision .side-brand .logo-sub { color: rgba(27, 29, 58, 0.5); } :root[data-theme="light"] body.vision .side-section { color: rgba(27, 29, 58, 0.72); } :root[data-theme="light"] body.vision .side-item { color: #1b1d3a; } :root[data-theme="light"] body.vision .side-item > svg { background: #f1effd; } :root[data-theme="light"] body.vision .side-item:hover { background: rgba(106, 61, 251, 0.05); color: #1b1d3a; } :root[data-theme="light"] body.vision .side-item:hover > svg { background: #e8e3fd; } :root[data-theme="light"] body.vision .side-item.active { background: #f1effd; color: #1b1d3a; box-shadow: none; } :root[data-theme="light"] body.vision .side-item.active > svg { background: linear-gradient(135deg, #8b5cf6 0%, #4318ff 100%); } :root[data-theme="light"] body.vision .side-sub-item { color: rgba(27, 29, 58, 0.66); } :root[data-theme="light"] body.vision .side-sub-item:hover { background: rgba(106, 61, 251, 0.05); color: #1b1d3a; } :root[data-theme="light"] body.vision .side-sub-item.active { background: #f1effd; color: #1b1d3a; } /* Barre haute */ :root[data-theme="light"] body.vision .topbar-crumb b, :root[data-theme="light"] body.vision .crumb-period { color: #1b1d3a; } :root[data-theme="light"] body.vision .search input { border-color: rgba(27, 29, 58, 0.14); background: #ffffff; color: #1b1d3a; } :root[data-theme="light"] body.vision .search input::placeholder, :root[data-theme="light"] body.vision .search svg { color: rgba(107, 113, 148, 0.85); } :root[data-theme="light"] body.vision .icon-btn { color: rgba(27, 29, 58, 0.72); } :root[data-theme="light"] body.vision .icon-btn:hover { background: rgba(27, 29, 58, 0.05); } :root[data-theme="light"] body.vision .page-head .btn:not(.primary), :root[data-theme="light"] body.vision .page-head .icon-btn { border-color: rgba(27, 29, 58, 0.12); background: rgba(255, 255, 255, 0.7); color: #1b1d3a; } :root[data-theme="light"] body.vision .page-head .btn:not(.primary):hover, :root[data-theme="light"] body.vision .page-head .icon-btn:hover { background: #ffffff; } :root[data-theme="light"] body.vision .page-head h1 { color: #1b1d3a; } /* Chiffres et titres */ :root[data-theme="light"] body.vision .kpi-value, :root[data-theme="light"] body.vision .kpi-unit, :root[data-theme="light"] body.vision .hero-welcome h1, :root[data-theme="light"] body.vision .hero-gauge-card h3, :root[data-theme="light"] body.vision .hero-readout-main strong, :root[data-theme="light"] body.vision .hero-stat strong, :root[data-theme="light"] body.vision .hero-ring-text strong, :root[data-theme="light"] body.vision .attention-copy strong, :root[data-theme="light"] body.vision .attention-count, :root[data-theme="light"] body.vision .map-stat-value, :root[data-theme="light"] body.vision .cal-mois { color: #1b1d3a; } :root[data-theme="light"] body.vision .hero-readout, :root[data-theme="light"] body.vision .hero-stat { background: linear-gradient(127deg, rgba(241, 239, 253, 0.95) 20%, rgba(246, 244, 254, 0.9) 80%); } :root[data-theme="light"] body.vision .hero-link { color: #1b1d3a; } :root[data-theme="light"] body.vision .hero-status .brief-live { color: #0d8f62; } :root[data-theme="light"] body.vision .hero-more, :root[data-theme="light"] body.vision .cal-nav { background: #f1effd; } /* Rail des jauges : la part « pas encore atteinte » reste visible sur blanc. */ :root[data-theme="light"] body.vision .arc-rail { stroke: #ece8fb; } /* Méduse (mode clair seulement) : sur fond blanc ses reflets lavande se fondaient ; plus sombre, plus contrastée et plus saturée pour ressortir. */ :root[data-theme="light"] body.vision .hero-art .meduse { filter: drop-shadow(0 0 22px rgba(106, 61, 251, 0.22)); } :root[data-theme="light"] body.vision .hero-art .md-corps { filter: url(#mdClair); } :root[data-theme="light"] body.vision .hero-more:hover, :root[data-theme="light"] body.vision .cal-nav:hover:not(:disabled) { background: #e8e3fd; } /* Graphiques */ :root[data-theme="light"] body.vision .activity-card .tc-tick { fill: rgba(27, 29, 58, 0.55); } :root[data-theme="light"] body.vision .activity-card .tc-x { color: rgba(27, 29, 58, 0.55); } :root[data-theme="light"] body.vision .activity-card .tc-grid { stroke: rgba(27, 29, 58, 0.12); } :root[data-theme="light"] body.vision .activity-card .tooltip { border-color: rgba(27, 29, 58, 0.10); background: rgba(255, 255, 255, 0.97); box-shadow: 0 16px 34px rgba(27, 29, 58, 0.14); } :root[data-theme="light"] body.vision .activity-card .tc-f1 { --tc-fill-a: 0.55; --tc-fill-b: 0.18; } :root[data-theme="light"] body.vision .activity-card .tc-f2 { --tc-fill-a: 0.45; --tc-fill-b: 0.14; } :root[data-theme="light"] body.vision .activity-card .tc-s2 { stroke: #a78bfa; } :root[data-theme="light"] body.vision .attention-item::before, :root[data-theme="light"] body.vision .attention-item::after { background: rgba(27, 29, 58, 0.12); } :root[data-theme="light"] body.vision .attention-total svg { color: #ffffff; } :root[data-theme="light"] body.vision .heat-more { background: rgba(27, 29, 58, 0.05); } :root[data-theme="light"] body.vision .heat-more:hover { color: #1b1d3a; } /* Cases vides SEULEMENT (l0) : une règle sur .hm-cell écrasait aussi les niveaux l1–l5 (spécificité plus forte) et la grille devenait blanche. */ :root[data-theme="light"] body.vision .hm-cell.l0 { background: rgba(106, 61, 251, 0.06); box-shadow: none; } /* Étoiles de la note de lead : pendant clair du blanc à 16 % (le blanc disparaîtrait sur fond clair). Les étoiles allumées gardent leurs teintes. */ :root[data-theme="light"] body.vision .score-stars .star svg { fill: rgba(27, 29, 58, 0.16); } /* Guide de branchement : pendant clair (le blanc à 3,5 % disparaîtrait). */ :root[data-theme="light"] body.vision .int-tuto { background: rgba(106, 61, 251, 0.05); border-color: rgba(27, 29, 58, 0.09); } :root[data-theme="light"] body.vision .int-tuto-head h4 { color: #1b1d3a; } /* Bandeau de portée : pendant clair. */ :root[data-theme="light"] body.vision .sa-portee { background: rgba(106, 61, 251, 0.07); border-color: rgba(106, 61, 251, 0.18); } :root[data-theme="light"] body.vision .sa-portee b { color: #1b1d3a; } :root[data-theme="light"] body.vision .feed-row a:hover { background: rgba(106, 61, 251, 0.04); } /* Contrôles */ :root[data-theme="light"] body.vision .btn:not(.primary) { background: rgba(255, 255, 255, 0.8); color: #1b1d3a; box-shadow: inset 0 0 0 1px rgba(27, 29, 58, 0.12); } :root[data-theme="light"] body.vision .btn:not(.primary):hover { background: #ffffff; } :root[data-theme="light"] body.vision .segmented { background: rgba(27, 29, 58, 0.05); } :root[data-theme="light"] body.vision .segmented button { color: rgba(27, 29, 58, 0.66); } :root[data-theme="light"] body.vision .segmented button.active { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(27, 29, 58, 0.08), var(--shadow-thumb); color: #1b1d3a; } :root[data-theme="light"] body.vision .value-input, :root[data-theme="light"] body.vision .select { color: #1b1d3a; } :root[data-theme="light"] body.vision .select { border-color: rgba(27, 29, 58, 0.12); background-color: #ffffff; } :root[data-theme="light"] body.vision .tc-expand:hover { background: rgba(27, 29, 58, 0.05); color: #6a3dfb; } :root[data-theme="light"] body.vision .tool-pop { border-color: rgba(27, 29, 58, 0.10); background: rgba(255, 255, 255, 0.97); } :root[data-theme="light"] body.vision .cal-pop { background: #ffffff; box-shadow: 0 24px 60px rgba(27, 29, 58, 0.16); } :root[data-theme="light"] body.vision .cal-j { color: rgba(27, 29, 58, 0.86); } :root[data-theme="light"] body.vision .cal-j:hover:not(:disabled), :root[data-theme="light"] body.vision .cal-j.dans { background: rgba(106, 61, 251, 0.10); color: #1b1d3a; } :root[data-theme="light"] body.vision .cal-j.bord { color: #ffffff; } :root[data-theme="light"] body.vision .cal-foot { border-top-color: rgba(27, 29, 58, 0.08); } :root[data-theme="light"] body.vision .menu-item { color: rgba(27, 29, 58, 0.86); } :root[data-theme="light"] body.vision .menu, :root[data-theme="light"] body.vision .toast { background: #ffffff; border-color: rgba(27, 29, 58, 0.10); } :root[data-theme="light"] body.vision .info-pop { border-color: rgba(27, 29, 58, 0.10); } :root[data-theme="light"] body.vision .tuto-bulle, :root[data-theme="light"] body.vision .bravo-carte { background: #ffffff; border-color: rgba(27, 29, 58, 0.10); } :root[data-theme="light"] body.vision .tuto-halo { box-shadow: 0 0 0 9999px rgba(27, 29, 58, 0.45), 0 0 0 2px #6a3dfb; } :root[data-theme="light"] body.vision .footer { color: rgba(27, 29, 58, 0.45); } :root[data-theme="light"] body.vision ::selection { background: rgba(106, 61, 251, 0.22); color: #1b1d3a; } :root[data-theme="light"] * body.vision { scrollbar-color: rgba(27, 29, 58, 0.2) transparent; } /* ── Impression / export PDF : le rapport garde le design Vision ──── */ /* portal.css imprime en clair (palette :root claire, cartes blanches). Ici, le rapport reste en design « Vision » : fond nuit sur toute la feuille, cartes sombres, dégradés violets et courbes pleines. Les jetons sombres de body.vision s'appliquent toujours (déclarés sur le body, ils battent ceux de :root) : on n'annule que les fonds blancs codés en dur et on force l'impression des couleurs. Hors rapport : navigation, outils, boutons d'export (carte .export-card), actions opérationnelles. */ @media print { /* Marge de page nulle : le fond sombre couvre toute la feuille, l'air autour du contenu est porté par le padding de .page. */ @page { margin: 0; } html { background: #080a24 !important; } body.vision { background: #080a24 !important; min-height: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; } body.vision::before { height: 100%; max-height: 260mm; } body.vision .app, body.vision .shell { zoom: 1; margin: 0; border-radius: 0; min-height: 0; background: transparent !important; box-shadow: none; } body.vision .page { padding: 10mm 10mm 8mm; } /* En-tête du rapport : logo, titre, périmètre — sur fond sombre. */ body.vision .print-head { align-items: center; gap: 12px; margin-bottom: 6mm; padding: 5mm 6mm; border: none; border-radius: 16px; background: linear-gradient(127deg, rgba(14, 18, 48, 0.95) 20%, rgba(22, 20, 62, 0.9) 80%); } body.vision .print-logo { width: 30px; height: 30px; object-fit: contain; } body.vision .print-id strong { color: #fff; font-size: 1.05rem; } body.vision .print-id span { color: var(--text-2); } body.vision .print-brand { color: #a78bfa; font-weight: 600; } /* ═══ RAPPORT (/portal/rapports) ═══════════════════════════════ La feuille est PLEINE : couverture à fond perdu en haut, puis le rapport sur toute la largeur utile. Le fond nuit est peint par `body.vision::before` en position fixe — en impression, Chrome le répète sur CHAQUE page, ce qui évite une page 2 blanche sous une page 1 sombre. */ body.vision::before { inset: 0; height: auto; max-height: none; } body.vision .rapport-view { padding: 0 12mm 14mm; } /* Bandeau de couverture à fond perdu : il sort des marges latérales de la page, c'est ce qui fait la différence entre « une capture d'écran imprimée » et un document. */ body.vision .rapport-view .print-head { display: block !important; margin: 0 -12mm 8mm; padding: 16mm 12mm 9mm; border-radius: 0; border-bottom: 1px solid rgba(139, 92, 246, 0.35); background: radial-gradient(90% 150% at 82% 0%, rgba(103, 58, 255, 0.45) 0%, rgba(103, 58, 255, 0) 62%), linear-gradient(127deg, rgba(10, 13, 40, 0.97) 18%, rgba(24, 20, 70, 0.95) 84%); } body.vision .rapport-view .print-logo { width: 34px; height: 34px; display: block; margin-bottom: 5mm; } body.vision .rapport-view .print-kicker { color: #c4b5fd; font-size: 0.66rem; } body.vision .rapport-view .print-id strong { display: block; margin: 2mm 0 1.5mm; color: #fff; font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; } body.vision .rapport-view .print-id span { display: block; color: var(--text-2); font-size: 0.82rem; } body.vision .rapport-view .print-brand { display: block; margin-top: 4mm; color: #a78bfa; font-weight: 600; font-size: 0.78rem; } /* Phrase d'ouverture : le paragraphe que l'on lit à voix haute. */ body.vision .rapport-view .rep-intro { background: none !important; border: none !important; padding: 0 0 6mm; } body.vision .rapport-view .rep-intro-kicker { color: #a78bfa; } body.vision .rapport-view .rep-intro-text { color: #fff; font-size: 1.12rem; line-height: 1.55; } /* Les rangées à deux colonnes le restent : c'est ce qui remplit la page. */ body.vision .rapport-view .grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6mm; margin-bottom: 6mm; } body.vision .rapport-view .kpi-grid { gap: 4mm; margin-bottom: 6mm; } body.vision .rapport-view .rep-activity { margin-bottom: 6mm; } body.vision .rapport-view .rep-pipe-main { color: #fff; font-size: 1.7rem; } body.vision .rapport-view .rep-split-bar { background: #6c5ce7; } body.vision .rapport-view .rep-split-v { background: rgba(255, 255, 255, 0.22); } /* Tableau des derniers contacts : lignes fines, jamais coupées. */ body.vision .rapport-view .rep-leads { break-inside: auto; } body.vision .rapport-view .rep-leads table { width: 100%; font-size: 0.8rem; } body.vision .rapport-view .rep-leads tr { break-inside: avoid; } body.vision .rapport-view .rep-leads .table-wrap { overflow: visible; } /* portal.css masque la DERNIÈRE colonne des tableaux à l'impression (c'est la colonne du chevron dans les écrans de liste). Ici la dernière colonne porte une donnée — « Reçu le » — et doit sortir. */ body.vision .rapport-view .rep-leads table.table th:last-child { display: table-cell !important; } /* Pied du rapport. */ body.vision .rapport-view .print-foot { display: flex !important; justify-content: space-between; gap: 1rem; margin-top: 8mm; padding-top: 4mm; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.72rem; color: var(--text-3); } /* Blocs : sombres, sans ombre, jamais coupés entre deux pages. */ body.vision .card, body.vision .kpi-grid > .kpi, body.vision .kpi-grid > .kpi + .kpi, body.vision .activity-card, :root[data-theme="dark"] body.vision .activity-card, body.vision .hero-row > .card, body.vision .hero-row > .hero-welcome { background: linear-gradient(127.09deg, rgba(14, 19, 48, 0.96) 19.41%, rgba(17, 21, 52, 0.92) 76.65%) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; box-shadow: none !important; color: var(--text); break-inside: avoid; } body.vision .kpi-grid > .kpi { min-height: 0; padding: 0.9rem 1.1rem; } body.vision .kpi-value { color: #fff; font-size: 1.25rem; } body.vision .kpi-icon { width: 38px; height: 38px; box-shadow: none; } body.vision .kpi-grid > .kpi:hover { transform: none; } /* La rangée du haut peut se couper entre ses blocs (sinon elle partait entière en page 2) ; jauge et anneau côte à côte sous la bienvenue. */ body.vision .hero-row { break-inside: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5mm; margin-bottom: 5mm; } body.vision .hero-row > .hero-welcome { grid-column: 1 / -1; min-height: 0; } body.vision .hero-row > .card { min-height: 0; } body.vision .hero-ring-body { grid-template-columns: minmax(0, 1fr); } body.vision .hero-ring-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3mm; } body.vision .hero-ring { max-width: 150px; } /* Grille horaire : cases bornées, la carte ne prend plus une page. */ body.vision .heat-card .hm { max-width: 120mm; margin: 0 auto; } body.vision .grid-wide .card, body.vision .grid-2 > .card { margin-bottom: 5mm; } #demoBanner { display: none !important; } body.vision .hero-art .meduse, body.vision .side-brand .logo-sub.offre-payante { animation: none; } /* ═══ RAPPORT SUR UNE SEULE FEUILLE A4 ══════════════════════════ Le rapport imprimé tient EXACTEMENT une page : la vue fait la hauteur de la feuille, le pied est poussé en bas. Le contenu est mis à l'échelle d'un bloc (`zoom`, qui réduit aussi les tailles en rem) et chaque bloc a un volume borné : 5 contacts, 6 pays, 10 lignes de résumé, courbe redessinée plus basse au moment d'imprimer (voir portal-rapports.html). `overflow: hidden` garantit qu'aucune seconde page ne naît d'un débordement de quelques millimètres. */ @page { size: A4; margin: 0; } body.vision .rapport-view { box-sizing: border-box; height: 296mm; overflow: hidden; display: flex; flex-direction: column; padding: 0 10mm 6mm; } body.vision .rapport-view > * { flex-shrink: 0; } body.vision .rapport-view > :not(.print-head):not(.print-foot) { zoom: 0.57; } body.vision .rapport-view .print-head { display: flex !important; align-items: center; gap: 4mm; margin: 0 -10mm 4mm; padding: 6mm 10mm 4.5mm; } body.vision .rapport-view .print-logo { width: 28px; height: 28px; margin: 0; } body.vision .rapport-view .print-id strong { font-size: 1.45rem; margin: 0.8mm 0; } body.vision .rapport-view .print-id span { font-size: 0.74rem; } body.vision .rapport-view .print-brand { margin: 0 0 0 auto; align-self: flex-start; font-size: 0.72rem; } body.vision .rapport-view .rep-intro { padding: 0 0 5mm; margin: 0; } body.vision .rapport-view .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4mm; margin-bottom: 5mm; } /* La pastille passe sous le chiffre plutôt que sous l'icône. */ body.vision .rapport-view .kpi-main { flex-wrap: wrap; row-gap: 0; min-width: 0; } body.vision .rapport-view .kpi-sub { white-space: nowrap; } body.vision .rapport-view .kpi-grid > .kpi { padding: 0.9rem 1.1rem; } body.vision .rapport-view .kpi-icon { width: 40px; height: 40px; } /* Résumé : dix lignes serrées plutôt qu'aérées. */ body.vision .rapport-view .qitem { padding: 0.28rem 0; } body.vision .rapport-view .card.card-pad, body.vision .rapport-view .rep-activity { padding: 0.95rem 1.15rem; } body.vision .rapport-view .rep-intro { padding: 0 0 5mm !important; } body.vision .rapport-view #repCountries .hbar:nth-child(n + 6) { display: none; } body.vision .rapport-view .rep-activity { margin-bottom: 5mm; } /* La courbe garde ses proportions (sa hauteur en pixels est posée par le script pour l'écran). */ body.vision .rapport-view #chartSvg { height: auto !important; } body.vision .rapport-view .grid-2 { gap: 5mm; margin-bottom: 5mm; align-items: stretch; } body.vision .rapport-view .grid-2 > .card { margin-bottom: 0; } body.vision .rapport-view .rep-leads { margin: 0; } body.vision .rapport-view .rep-leads table { table-layout: fixed; } body.vision .rapport-view .rep-leads th, body.vision .rapport-view .rep-leads td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.vision .rapport-view .rep-leads tbody tr:nth-child(n + 6) { display: none; } body.vision .rapport-view .rep-leads .table th, body.vision .rapport-view .rep-leads .table td { padding-top: 0.45rem; padding-bottom: 0.45rem; } body.vision .rapport-view .print-foot { margin-top: auto; padding-top: 2.5mm; font-size: 0.6rem; } /* Imprimé AVANT la fin du chargement (Cmd+P tout de suite) : plutôt que des blocs gris et des cartes vides, un message clair. */ body.vision:not(.rapport-pret) .rapport-view > * { display: none !important; } body.vision:not(.rapport-pret) .rapport-view::before { content: "Le rapport est encore en cours de chargement. Fermez cette fenêtre, patientez quelques secondes, puis relancez l'impression."; display: block; margin: 40mm 10mm 0; color: #fff; font-size: 1rem; text-align: center; } /* Hors rapport. */ body.vision .topbar-actions .toolbar, body.vision .export-card, body.vision .hero-link, body.vision .hero-more, body.vision .brief-value-setting { display: none !important; } }