/* ========================================================================= app.css — socle transverse de la refonte scraper-fa (preset liquid-glass). Surcharges du kit (assets/kit/ READ-ONLY) : tokens nuit, fond + scrim, layout, dock, header de vue, toast, modale, bannière erreur, skeletons, tooltips, chips, accordéon, pastille de note. Les styles PAR VUE vivent dans css/liste.css, fiche.css, pipeline.css, activite.css, search.css. Aucune animation d'ambiance ici (css/anim.css, phase finale) — seules les transitions d'interaction ≤ 200 ms sont permises. ========================================================================= */ /* ---------- 1. Tokens (thème NUIT unique) -------------------------------- MISSION7 : le pool a été assombri sur disque — il n'existe plus un seul fond clair, donc plus aucun thème « jour ». MESURE refaite le 2026-07-29 sur les 41 fichiers présents (luminance relative WCAG en lumière linéaire, moyennée sur un sous-échantillonnage 16×16 de chaque JPEG) : maximum 0,0711 (paysage-37), minimum 0,0118 (paysage-19) ; contraste du texte blanc pur sur le PIRE fond, AVANT le scrim posé plus bas : 8,67:1. Toutes les surcharges de thème clair de ce fichier ont été SUPPRIMÉES (code inatteignable). data-theme=nuit reste posé sur : d'autres feuilles s'appuient dessus. ------------------------------------------- */ :root{ /* accent par défaut (fond 1) — re-teinté par core.js selon le fond tiré */ --accent:#ff8a3d; --accent2:#ff5fa2; /* texte/icône accentué : jamais l'accent brut en texte */ --accent-ink:color-mix(in srgb, var(--accent) 55%, #ffffff); --txt:#f4f6f9;--muted:#aab2bf;--dim:#7e8794; --ok:#30d158;--warn:#ff9f0a;--danger:#ff453a;--violet:#5e5ce6; /* Palette sémantique FIXE (MISSION4 2-3) — ne dérive JAMAIS de l'accent : la lumière = information (favoris, RDV, tâches, notifications). */ --gold:#ffd60a; /* favoris : étoile dorée brillante */ --rdv:#64d2ff; /* RDV / agenda */ --task:#ff9f0a; /* tâches / relances dues */ --notif:#ff453a; /* notifications & activité non lues */ /* MISSION5 §1 — « non-vu » = LUMIÈRE, plus jamais un liseré rouge. --lum : blanc chaud. Halos multicouches partagés par la liste, le kanban, la fiche et l'agenda via .lum-glow / .lum-float. */ --lum:#fff7e6; --glow-soft: 0 0 0 1px color-mix(in srgb, var(--lum) 62%, transparent), 0 0 16px color-mix(in srgb, var(--lum) 42%, transparent), 0 0 34px color-mix(in srgb, var(--lum) 24%, transparent), inset 0 0 24px color-mix(in srgb, var(--lum) 14%, transparent); --glow-strong: 0 0 0 1.5px color-mix(in srgb, var(--lum) 88%, transparent), 0 0 10px color-mix(in srgb, var(--lum) 72%, transparent), 0 0 26px color-mix(in srgb, var(--lum) 50%, transparent), 0 0 58px color-mix(in srgb, var(--lum) 30%, transparent), inset 0 0 34px color-mix(in srgb, var(--lum) 20%, transparent); --glass:rgba(255,255,255,.07);--line:rgba(255,255,255,.14); --panel-solid:rgba(20,22,30,.88); } html{color-scheme:dark} body{color:var(--txt)} /* ---------- 2. Fond photo + scrim + bulles ------------------------------- */ /* Neutralise le glow/grille de landing.css (double sécurité avec .lg-photobg). */ body::before,body::after{display:none!important} body{background:#0a0c12} .bg-layer{position:fixed;inset:0;z-index:-3;background-size:cover;background-position:center; background-repeat:no-repeat;opacity:0;transition:opacity .6s ease} .bg-layer.on{opacity:1} /* Scrim ALLÉGÉ (demande Sylvain 31/07/2026 : « les photos telquel, là c'est trop dark »). Combiné au ré-éclaircissement des 41 fichiers (cible luminance ~0,30), on passe d'un voile 0,55→0,78 à un voile léger 0,22→0,42. Le fond reste un thème DARK mais la photo est nettement visible. La lisibilité du texte repose surtout sur les panneaux de verre (frost), pas sur ce voile ; le léger renfort en bas protège le dock et le texte nu. */ .bg-scrim{position:fixed;inset:0;z-index:-2;pointer-events:none; background:linear-gradient(rgba(8,10,14,.22),rgba(8,10,14,.42))} /* Bulles : inertes tant que css/anim.css (phase finale) ne les anime pas. */ .bubbles{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .bubble{display:none} /* ---------- 3. Layout ---------------------------------------------------- */ /* padding-bottom 190 px : hauteur du cluster flottant (dock + rangée B4). */ #view{position:relative;z-index:2;max-width:1180px;margin:0 auto; padding:64px 22px 190px} .wordmark{position:fixed;top:16px;left:20px;z-index:90;font-size:15px;font-weight:800; letter-spacing:-.02em;text-decoration:none;color:var(--txt);opacity:.9;transition:opacity .16s; /* Halo adaptatif : seule zone sans scrim — sans lui, le wordmark se noie dans les fonds contrastés (feuillage sombre, ciel clair). */ filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 0 9px rgba(0,0,0,.35))} .wordmark:hover{opacity:1} /* --accent-ink (lisible sur le thème courant), jamais l'accent brut (BRIEF). */ .wordmark b{color:var(--accent-ink)} /* .grad (landing.css) re-teinté sur l'accent dérivé du fond — jamais le bleu figé */ .grad{background:linear-gradient(120deg,var(--accent),var(--accent2)); -webkit-background-clip:text;background-clip:text;color:transparent} .eyebrow{color:var(--accent-ink)} /* Chiffres tabulaires par défaut sur les valeurs */ .num,.count,[data-count]{font-variant-numeric:tabular-nums} /* ---------- 4. Header de vue (H1 + question en sous-titre) --------------- */ .view-head{margin:6px 0 24px} .view-head h1{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.1} .view-head .question{color:var(--muted);font-size:15px;margin:6px 0 0} /* ---------- 5. Dock N4 + B4 « fond suivant » ------------------------------ */ /* Cluster flottant bas-centre (réf. dockwrap RAPPORT-v2) : dock AU-DESSUS, le B4 « fond suivant » DESSOUS (bouton unique) — plus jamais sur le contenu. */ .dock-wrap{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:80; display:flex;flex-direction:column;align-items:center;gap:10px; /* Le conteneur est plus large que la rangée B4 : sans ça, les bandes vides de part et d'autre du bouton fond avalent clics et survols du contenu. */ pointer-events:none} .dock-wrap>*{pointer-events:auto} .dock-app{border-radius:22px; /* Audit M4 : frost pur (recette .glass-frost §14) au lieu de la lentille réfractive — elle imprimait des copies nettes/miroir du contenu qui défile dessous (pastille de note sur l'icône Activité, textes kanban). Le dock est exclu du sélecteur LiquidGlass (core.js refreshGlass), mais kit.js (READ-ONLY) fait aussi un init au boot et pose la lentille en style INLINE → !important requis pour que le frost gagne toujours. */ backdrop-filter:blur(16px) saturate(1.5)!important; -webkit-backdrop-filter:blur(16px) saturate(1.5)!important} .dock-items{display:flex;gap:4px;padding:8px 10px} .dock-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px; min-width:66px;padding:8px 12px;border-radius:15px;border:none;background:none;cursor:pointer; color:var(--muted);font:inherit;font-size:10px;font-weight:640;text-decoration:none; transition:color .16s,background .16s} .dock-item .ic{width:20px;height:20px} .dock-item:hover{color:var(--txt);background:rgba(255,255,255,.10)} .dock-item.on{color:var(--accent-ink);background:color-mix(in srgb, var(--accent) 18%, transparent)} /* Badge relances du dock : sémantique tâches (--task, MISSION4 2-3). */ .dock-badge{position:absolute;top:2px;right:8px;min-width:17px;height:17px;border-radius:999px; background:var(--task);color:#221503;font-size:10px;font-weight:800;line-height:17px; display:grid;place-items:center;padding:0 4px;box-shadow:0 2px 6px rgba(0,0,0,.35)} .dock-side{display:flex;flex-direction:row;gap:10px} .dock-side .b4 .ic{width:18px;height:18px} @media (max-width:640px){ .dock-item{min-width:52px;padding:8px 8px} .dock-item span{display:none} .dock-wrap{gap:8px} } /* ---------- 6. Toast (bas-droite, au-dessus du dock) ---------------------- */ .app-toast{position:fixed;right:24px;bottom:160px;z-index:400;display:flex;gap:10px;align-items:center; padding:12px 16px;border-radius:13px;background:var(--panel-solid);border:1px solid var(--line); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); box-shadow:0 12px 30px rgba(0,0,0,.35);font-size:13.5px;font-weight:600;max-width:340px; opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s,transform .2s} .app-toast.show{opacity:1;transform:none} .app-toast .ic{width:17px;height:17px;color:var(--ok)} .app-toast.err .ic{color:var(--danger)} /* ---------- 7. Bannière erreur API (O4 rouge + Réessayer) ----------------- */ #banner-root{position:relative;z-index:3;max-width:1180px;margin:0 auto;padding:0 22px} #banner-root:empty{display:none} .api-banner{display:flex;gap:12px;align-items:center;margin-top:64px;padding:13px 16px; border-radius:14px;background:rgba(255,69,58,.14);border:1px solid rgba(255,69,58,.4); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:13.5px} #banner-root:not(:empty) + #view{padding-top:16px} .api-banner .ic{width:19px;height:19px;color:var(--danger);flex:none} .api-banner .msg{flex:1;min-width:0} .api-banner .btn{flex:none;color:var(--txt)} /* ---------- 8. Modale générique (garde-fou, confirmations) ---------------- */ .modal-backdrop{position:fixed;inset:0;z-index:500;display:grid;place-items:center; padding:20px;background:rgba(10,12,18,.5)} .modal-panel{width:min(460px,100%)} .modal-panel .lg-content{padding:26px} .modal-title{font-size:18px;font-weight:760;letter-spacing:-.02em;display:flex;gap:10px;align-items:center} .modal-title .ic{width:20px;height:20px;color:var(--accent-ink)} .modal-body{margin-top:12px;font-size:14px;line-height:1.6;color:var(--muted)} .modal-body b,.modal-body strong{color:var(--txt)} .modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px} /* Correctif M3 : action DESTRUCTIVE (App.modal icon "warn") — bouton de confirmation dérivé du rouge sémantique --danger, jamais le dégradé accent (qui signale une confirmation positive). Les deux thèmes : texte blanc. */ .b1.b1-danger{color:#fff; background:linear-gradient(135deg,#e03a30,color-mix(in srgb, var(--danger) 82%, #fff)); box-shadow:0 6px 18px color-mix(in srgb, var(--danger) 40%, transparent)} /* ---------- 9. Skeletons (O9 — jamais de spinner plein écran) ------------- */ .skel{padding:18px;border-radius:var(--radius)} .skel .ln{height:11px;border-radius:6px;margin:9px 0; background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.22),rgba(255,255,255,.06)); background-size:200% 100%;animation:shim 1.4s linear infinite} .skel .ln.s{width:60%} /* ---------- 10. Tooltips (O1 — tout terme expert) ------------------------- */ /* MISSION2 point 5 : tooltip UNIQUE global #tip-global en position:fixed, positionné par core.js (clamp viewport) — plus jamais coupé par un overflow/lentille. z-index > modale (500). */ .has-tip{cursor:help} #tip-global{position:fixed;left:0;top:0;z-index:640;max-width:300px; background:var(--panel-solid);color:var(--txt);padding:8px 11px;border-radius:9px; font-size:11.5px;font-weight:500;line-height:1.45;text-align:left;border:1px solid var(--line); box-shadow:0 10px 26px rgba(0,0,0,.35);pointer-events:none; opacity:0;transform:translateY(2px);transition:opacity .12s,transform .12s} #tip-global.show{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){#tip-global{transition:none}} /* ---------- 11. Chips ----------------------------------------------------- */ .chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px; background:rgba(255,255,255,.08);border:1px solid var(--line); font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap} .chip .ic{width:13px;height:13px} .chip.accent{background:color-mix(in srgb, var(--accent) 16%, transparent); border-color:color-mix(in srgb, var(--accent) 40%, transparent);color:var(--accent-ink)} .chip.ok{background:rgba(48,209,88,.14);border-color:rgba(48,209,88,.4);color:var(--ok)} .chip.warn{background:rgba(255,159,10,.14);border-color:rgba(255,159,10,.4);color:var(--warn)} .chip.danger{background:rgba(255,69,58,.14);border-color:rgba(255,69,58,.4);color:var(--danger)} /* chip retirable (filtres actifs) */ .chip.removable{cursor:pointer;transition:background .16s,border-color .16s} .chip.removable:hover{border-color:var(--danger);color:var(--danger)} .chip .x{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%} .chip .x .ic{width:11px;height:11px} /* mini-chip (signaux forts sur les lignes de liste) */ .mini-chip{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:999px; background:color-mix(in srgb, var(--accent) 13%, transparent); border:1px solid color-mix(in srgb, var(--accent) 32%, transparent); font-size:11px;font-weight:600;color:var(--accent-ink);white-space:nowrap} /* ---------- 12. Accordéon générique (App.accordion) ------------------------ */ .acc{overflow:visible} .acc + .acc{margin-top:10px} .acc-head{display:flex;align-items:center;gap:10px;width:100%;padding:14px 16px; background:none;border:none;color:var(--txt);cursor:pointer;font:inherit; font-size:14.5px;font-weight:680;text-align:left;letter-spacing:-.01em;border-radius:var(--radius)} .acc-head:hover{color:var(--accent-ink)} .acc-title{flex:1;min-width:0} .acc-count{flex:none;min-width:22px;height:20px;padding:0 7px;border-radius:999px;display:grid;place-items:center; background:rgba(255,255,255,.10);border:1px solid var(--line);font-size:11.5px;font-weight:700;color:var(--muted)} .acc-head .chev{width:16px;height:16px;flex:none;color:var(--dim);transition:transform .18s} .acc.open>.acc-head .chev{transform:rotate(180deg)} .acc-body{display:none;padding:0 16px 16px} .acc.open>.acc-body{display:block} /* ---------- 13. Pastille de note A–E -------------------------------------- */ .note-badge{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%; font-size:13px;font-weight:800;color:#fff;flex:none; background:var(--dim);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 2px 6px rgba(0,0,0,.25)} .note-badge.big{width:40px;height:40px;font-size:18px} .note-badge[data-note="A"]{background:var(--ok)} .note-badge[data-note="B"]{background:color-mix(in srgb, var(--accent) 85%, #000)} .note-badge[data-note="C"]{background:var(--warn);color:#221503} .note-badge[data-note="D"],.note-badge[data-note="E"]{background:var(--dim)} /* ---------- 14. Utilitaires transverses ------------------------------------ */ .count{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums} .kbd-hint{font-size:12px;color:var(--dim);text-align:center;margin-top:14px} .kbd-hint kbd{font-size:10.5px;padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);font-family:inherit} .placeholder{padding:36px;text-align:center} /* état vide générique : orbe grisé + phrase + 1 bouton */ .empty-state{display:flex;flex-direction:column;align-items:center;gap:16px;padding:56px 24px;text-align:center} .empty-state .orb{width:64px;height:64px;border-radius:50%;display:grid;place-items:center; background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--dim)} .empty-state .orb .ic{width:26px;height:26px} .empty-state p{margin:0;max-width:430px;color:var(--muted);font-size:14.5px;line-height:1.6} .hidden{display:none!important} /* dot de statut (sources, relances) */ .status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none} .status-dot.warn{background:var(--warn)} .status-dot.danger{background:var(--danger)} /* Verre FROST fort partagé (MISSION3 3.1/6 — intégration) : remplace la lentille SVG sur les grands cadres qui défilent ou les barres fixes (backdrop-filter:url() se repeint sur le main-thread → fantômes au scroll). Blur fort composité GPU + reflet spéculaire du kit recréé en ::after. Utilisé par .fiche-head/.fiche-minibar (fiche.js) et .act-health (activite.js). */ .glass-frost{backdrop-filter:blur(16px) saturate(1.5); -webkit-backdrop-filter:blur(16px) saturate(1.5)} .glass-frost::after{content:"";position:absolute;inset:0;pointer-events:none; border-radius:inherit;z-index:1;mix-blend-mode:screen;opacity:.65; background:linear-gradient(135deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%,rgba(255,255,255,.08) 100%)} .glass-frost>.lg-content{position:relative;z-index:2} /* ---------- 15. Surcharges du kit (sans le modifier) ----------------------- */ /* MISSION7 : les surcharges « mode jour » de cette section ont été supprimées avec le thème jour lui-même. */ /* le B1 garde son dégradé accent ; on le re-teinte sur l'accent du fond */ .b1{background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent)} .b17{background:linear-gradient(135deg,var(--accent),var(--accent2))} .badge{background:color-mix(in srgb, var(--accent) 20%, transparent); color:var(--accent-ink);border-color:color-mix(in srgb, var(--accent) 40%, transparent)} .b25 .badge-n{background:var(--accent)} /* ---------- 16. Étoile favori dorée + avatars de profil (MISSION4) --------- */ /* .ic-gold sur une icône du sprite (App.icon("star", "ic-gold")) : remplie or + halo doux PERMANENT — plus jamais la couleur accent pour les favoris. */ .ic-gold{color:var(--gold);fill:currentColor; filter:drop-shadow(0 0 4px color-mix(in srgb, var(--gold) 70%, transparent))} /* Avatar de profil (App.avatarNode — MISSION4 5.5) : pastille initiale colorée (--pc par profil), recouverte par la photo téléversée si elle existe (classe .has-photo posée au chargement de l'img). */ .avatar-badge{position:relative;display:inline-grid;place-items:center;flex:none; width:28px;height:28px;border-radius:50%;overflow:hidden;color:#fff; font-size:12px;font-weight:800; background:linear-gradient(135deg,var(--pc,#8b93a5),color-mix(in srgb,var(--pc,#8b93a5) 62%,#0b1018)); box-shadow:inset 0 1px 0 rgba(255,255,255,.3)} .avatar-badge img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; border-radius:50%;display:none} .avatar-badge.has-photo img{display:block} /* ---------- 16b. Lumière « non-vu » partagée (MISSION5 §1) ----------------- */ /* Langage commun liste / kanban / fiche / agenda : ce qui n'a pas encore été vu ne s'entoure plus de rouge, il S'ÉCLAIRE. Deux classes utilitaires (documentées dans CONTRACTS.md pour F2/F3) : .lum-glow → halo lumineux doux (var(--glow-soft)) .lum-glow.lum-strong → halo lumineux appuyé (var(--glow-strong)) .lum-float → flottement léger ±3 px, ~5 s (statique en mouvement réduit). Désynchroniser plusieurs éléments = animation-delay négatif côté vue (agenda, kanban). Exception assumée à la règle « aucune animation d'ambiance dans app.css » (BRIEF) : MISSION5 §1 exige des tokens PARTAGÉS ici pour les 3 vues. */ .lum-glow{box-shadow:var(--glow-soft)} .lum-glow.lum-strong{box-shadow:var(--glow-strong)} @keyframes sfaLumFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} .lum-float{animation:sfaLumFloat 5s ease-in-out infinite;will-change:transform} @media (prefers-reduced-motion:reduce){ .lum-float{animation:none} } /* ---------- 17. Chat d'équipe — shell (MISSION4 5.3) ----------------------- */ /* Conteneur fixe bord droit (rempli par js/views/chat.js). La classe `chat-open` sur (core.js — App.chatToggle) pilote tout : panneau glissé, bouton décalé, contenu rétréci ≥ 1280 px (overlay en dessous). */ #chat-root{position:fixed;top:0;right:0;bottom:0;z-index:120;width:min(360px,100vw); transform:translateX(103%);transition:transform .25s ease;pointer-events:none} :root.chat-open #chat-root{transform:none;pointer-events:auto} /* Bouton persistant ancré mi-hauteur : TOUJOURS visible (toutes les vues, chat replié compris) ; glisse au bord du panneau quand le chat est ouvert. */ .chat-toggle{position:fixed;top:50%;right:12px;transform:translateY(-50%);z-index:121; display:grid;place-items:center;width:44px;height:44px;border-radius:50%; border:1px solid var(--line);background:var(--panel-solid);color:var(--txt); cursor:pointer;box-shadow:0 10px 26px rgba(0,0,0,.35); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); transition:right .25s ease,background .16s,color .16s} .chat-toggle:hover{color:var(--accent-ink); background:color-mix(in srgb, var(--accent) 16%, var(--panel-solid))} .chat-toggle .ic{width:19px;height:19px} :root.chat-open .chat-toggle{right:calc(min(360px,100vw) + 12px)} /* Audit M4 — mobile : mi-hauteur, le bouton recouvrait le panneau ouvert (horodatages illisibles) et, replié, le lien « d'autres colonnes → » du kanban. Replié → coin bas-droit AU-DESSUS du cluster dock (190 px réservés) ; ouvert → masqué, le header du panneau porte déjà le bouton « Replier le chat ». */ @media (max-width:520px){ .chat-toggle{top:auto;bottom:206px;transform:none} :root.chat-open .chat-toggle{display:none} } /* Badge non-lus (--notif, MISSION4 5.2) — halo doux, compteur core.js. */ .chat-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px; border-radius:999px;background:var(--notif);color:#fff;font-size:10.5px; font-weight:800;line-height:18px;padding:0 5px;text-align:center; box-shadow:0 0 10px color-mix(in srgb, var(--notif) 55%, transparent), 0 2px 6px rgba(0,0,0,.3)} /* ≥ 1280 px : le contenu se rétrécit proprement (padding body → #view et la bannière restent centrés dans l'espace restant, le dock et le toast se décalent). En dessous : overlay, aucun décalage. */ .dock-wrap{transition:left .25s ease} body{transition:padding .25s ease} @media (min-width:1280px){ :root.chat-open body{padding-right:376px} :root.chat-open .dock-wrap{left:calc(50% - 188px)} :root.chat-open .app-toast{right:400px} } @media (prefers-reduced-motion:reduce){ #chat-root,.chat-toggle,.dock-wrap,body{transition:none} } /* ---------- 18. Accessibilité --------------------------------------------- */ :focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px;border-radius:6px} .dock-item:focus-visible{outline-offset:-2px}