/* ═══════════════════════════════════════════════════════════════════════ RS WP Maintenance — design system « A2 Relief » Fichier statique (pas de build) chargé via par le layout. Source de vérité visuelle : design/propositions/a2-relief.html ═══════════════════════════════════════════════════════════════════════ */ /* ── Fontes locales (Clash Display — l'intégrateur copie les woff2 dans public/fonts/) ── */ @font-face{font-family:'Clash Display';src:url('../fonts/clash-display-400.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Clash Display';src:url('../fonts/clash-display-500.woff2') format('woff2');font-weight:500;font-display:swap} @font-face{font-family:'Clash Display';src:url('../fonts/clash-display-600.woff2') format('woff2');font-weight:600;font-display:swap} /* ═══ Tokens ═══ */ :root{ --surface:#edf0f6; --ink:#1c2740; --ink-2:#66748d; --ink-3:#a2adc0; --accent:#00ffa7; --accent-ink:#03583e; --tongue:#0af0a0; --tongue-deep:#013a27; --warn:#e3a02a; --danger:#e85a74; /* Quatre noms écrits dans les règles sans avoir jamais été définis. Une var() non résolue rend la déclaration INVALIDE — la propriété ne s'applique pas du tout. Conséquences mesurées au navigateur le 03/08/2026 : aucun anneau de focus clavier sur les lignes de la Flotte (outline-style:none), aucun filet entre les sites de /monitoring, entre les .run et dans les .wk (border-top-style:none), cases à cocher en bleu navigateur. Ce sont des alias, pas des couleurs neuves : chacun dit l'intention de l'usage avec le token qui existait déjà. */ --ink-1:var(--ink); /* titres et textes forts */ --acc:var(--accent-ink); /* survols et accent-color lisibles */ --accent-deep:var(--accent-ink); --hair:rgba(28,39,64,.09); /* filet séparateur, même encre que les ombres */ /* La matière posée : un seul dégradé pour tout ce qui est en relief. Il était recopié 45 fois sur 7 valeurs à un point d'écart — « améliorer le relief » voulait dire 45 modifications. */ --posed:linear-gradient(150deg,#f1f4f9,#eaeef5); /* ── L'ENTRÉE EN SCÈNE N'A LIEU QU'UNE FOIS ────────────────────────────── Le hub compte 21 animations d'entrée — `fade` sur les cartes, les KPI et l'entête, `gooIn` sur le menu, `railIn` sur la gouttière, `tabin` sur les panneaux — échelonnées par des délais qui vont jusqu'à 0,7 s. Elles donnent au premier chargement sa mise en place. Mais `wire:navigate` remplace le : à chaque clic d'onglet, tous ces éléments sont neufs, et les 21 animations REJOUENT. C'est ce qui donnait l'impression que le menu, la gouttière et l'entête « se rechargeaient », et ces 700 ms écrasaient la transition de 420 ms qui, elle, tournait bien. Ces animations passent donc toutes par cette variable. `hub.js` marque le document après la première navigation, et elles se taisent — le shell devient réellement persistant. Une animation d'entrée ajoutée plus tard doit s'écrire `animation:var(--entree,son-nom)` pour suivre la règle. */ --entree:initial; /* Le chiffre gravé. L'ombre est INVERSÉE — sombre en haut-gauche, claire en bas : c'est elle qui creuse au lieu de soulever, et c'est tout ce qui fait l'effet. Purement verticale, comme le reste de la lumière du hub. Ce que la recette d'origine ajoute et qu'on écarte : `color:transparent` + `background-clip:text`, et `filter:blur(.45px)`. Les deux se paient en lisibilité, et ces chiffres-là sont des DONNÉES — un score de santé, un uptime, un nombre de failles — pas de la décoration. L'ombre seule ne coûte aucun contraste : l'encre du chiffre ne bouge pas. */ --grave:0 -1px 1px rgba(28,39,64,.2), 0 1px 1px rgba(255,255,255,.9); /* ───────────────────────────────────────────────────────────────────────── Le relief, refondu le 03/08/2026 sur la recette du codepen de référence. Ce qui a changé et pourquoi — arbitré par Raphaël sur prototype, en comparant les deux recettes sur le vrai tableau de bord : 1. LA LUMIÈRE PASSE À LA VERTICALE. Elle venait du haut-GAUCHE (`-14px -14px` de blanc contre `16px 18px` d'ombre). Le codepen éclaire d'aplomb par le haut, et c'est ce qui rend son creux crédible : la lèvre du haut projette DANS le trou, celle du bas renvoie la lumière. Le creux et le relief partagent désormais le même axe — deux axes différents sur un même écran, c'est deux soleils. 2. LE CONTRASTE MONTE. Les ombres étaient à .07 d'opacité, elles vont à .4 sur le creux. C'est le facteur qui sépare le plat du réaliste, mesuré en comparant les deux : quatre à cinq fois. 3. LA LUEUR EXTÉRIEURE. C'est ce que Raphaël a repéré à l'œil — « une lueur d'ombre supplémentaire autour du rectangle arrondi ». Le creux n'avait que des `inset` : rien ne disait que la matière remontait autour du trou. Les deux `0 -4px 15px 2px` (blanc) et `0 -1px 15px 2px` (sombre) la posent, et le relief reçoit la même en blanc. Le fond ne bouge pas : `--surface` reste #edf0f6. L'hypothèse d'un fond neutre #efefef a été testée sur prototype et écartée — les deux ont la même clarté (0,870 contre 0,863), ils ne diffèrent que par la teinte. Ce n'était pas le fond, c'était le contraste des ombres. ───────────────────────────────────────────────────────────────────────── */ /* Le creux : la structure du codepen, son ombre interne atténuée. Le codepen la pose à .4 — sur un objet unique c'est juste, mais répétée 95 fois sur des écrans de données elle plombait. Descendue à .19 en deux passes (Raphaël, 03/08), pour ÉQUILIBRER avec le relief : un creux à .28 contre un relief à .15 se lisait deux fois plus lourd que lui, sur la même page. L'écart tient maintenant en dessous de 1,3 — la lèvre haute projette toujours, sans que le trou tire l'œil plus que l'objet posé à côté. */ --carve: inset 0 -2px 8px #fff, inset 0 -2px 4px #fff, 0 2px 4px rgba(255,255,255,.8), inset 0 5px 8px rgba(18,30,58,.19), inset 0 2px 2px rgba(18,30,58,.19), 0 -1px 4px rgba(18,30,58,.15), 0 -4px 15px 2px #fff, 0 -1px 15px 2px rgba(18,30,58,.11); /* Le creux SANS ses lueurs extérieures. `--carve` en porte deux — un halo blanc de 15 px et son ombre — qui font remonter la matière autour d'un grand trou. Sur une petite pièce COLORÉE (la rainure verte d'un interrupteur), ce halo blanc déborde sur la couleur et la rend floue au lieu de la creuser. Ici, rien que les faces internes. */ --carve-net: inset 0 4px 7px rgba(18,30,58,.3), inset 0 1px 2px rgba(18,30,58,.26), inset 0 -2px 4px rgba(255,255,255,.5); /* Le relief : même axe vertical, contraste modéré — un objet posé se lit à son contact au sol, pas à la profondeur d'un trou. La lueur blanche extérieure est la même que celle du creux. */ --raise: inset 0 2px 0 rgba(255,255,255,.75), 0 -3px 8px rgba(255,255,255,.9), 0 -4px 15px 2px rgba(255,255,255,.75), 0 4px 8px rgba(18,30,58,.15), 0 10px 24px rgba(18,30,58,.13); --raise-sm: inset 0 1px 0 rgba(255,255,255,.7), 0 -2px 6px rgba(255,255,255,.88), 0 -3px 11px 1px rgba(255,255,255,.7), 0 2px 5px rgba(18,30,58,.14), 0 6px 14px rgba(18,30,58,.11); } /* ═══ Base + grain céramique ═══ */ *{margin:0;padding:0;box-sizing:border-box} html{-webkit-font-smoothing:antialiased} body{ font-family:'Atkinson Hyperlegible',sans-serif;font-size:14px;color:var(--ink); min-height:100vh;overflow-x:hidden; background: radial-gradient(1400px 700px at 10% -12%, rgba(255,255,255,.6), transparent 55%), radial-gradient(1000px 600px at 110% 115%, rgba(163,178,203,.14), transparent 60%), var(--surface); } /* grain céramique très léger */ body::after{ content:"";position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.5; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E"); } .mono{font-family:'Spline Sans Mono',monospace} /* ═══ Menu goo : une seule forme SVG, plate et fluide ═══ */ .goo{ view-transition-name:menu; position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:50; width:88px;height:640px; animation:var(--entree,gooIn) 1s cubic-bezier(.22,1,.36,1) both; } /* Après la première navigation, plus aucune entrée en scène : c'est `--entree` qui les éteint toutes d'un coup, et pas seulement le temps d'une transition comme le faisait `:active-view-transition` — les animations reprenaient juste après elle. */ html[data-navigue]{--entree:none} @keyframes gooIn{from{opacity:0;transform:translate(-60px,-50%)}to{opacity:1;transform:translate(0,-50%)}} .goo-svg{ position:absolute;left:0;top:0;pointer-events:none;overflow:visible; filter:drop-shadow(6px 12px 28px rgba(10,45,48,.28)) drop-shadow(2px 4px 10px rgba(10,45,48,.16)); } .goo-items{ position:absolute;left:0;top:0;bottom:0;width:100%; /* Menu replié : les libellés sont en opacity:0 mais gardent leur largeur. Sans ce rognage ils débordaient de la forme et attrapaient les clics dans le vide, à droite du menu. */ overflow:hidden; /* Les congés rétrécissent la forme en haut et en bas : sans ce retrait, les premières et dernières icônes sortaient de la matière. La valeur est calculée par le JS et suit l'échelle de la forme (--goo-inset). */ padding:calc(var(--goo-inset, 126px) * .86) 15px; display:flex;flex-direction:column;justify-content:center;gap:3px; transition:padding .1s linear; } .goo a{ position:relative; display:flex;align-items:center;gap:13px;height:46px;flex:none; padding:0 14px;border-radius:999px;text-decoration:none; color:rgba(255,255,255,.72); transition:color .25s;white-space:nowrap; } /* La bille avait été essayée ici, en puce sur l'entrée active. Écartée par Raphaël le 03/08/2026 : l'entrée est déjà en vert accent et en gras, la puce ne faisait que redire la même chose. */ .goo a svg{width:19px;height:19px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; transition:transform .3s cubic-bezier(.34,1.56,.64,1)} .goo a:hover{color:#fff} .goo a:hover svg{transform:scale(1.12)} .goo a.on{color:var(--accent)} /* Les libellés sont visibles au repos (revue d'interface 29/07 : « huit icônes sans un mot au repos »). Ils ne s'effacent que si Raphaël replie le menu lui-même — jamais au survol, jamais tout seuls. */ .goo a .lb{ font-size:13px;font-weight:600;letter-spacing:.01em; opacity:1;transform:none; transition:opacity .3s .06s, transform .4s .06s cubic-bezier(.22,1,.36,1); } .goo a .lb i{font-style:normal;font-family:'Spline Sans Mono';font-size:10.5px;font-weight:400; opacity:.5;margin-left:7px} /* Menu replié : seules les icônes restent. */ .goo:not(.is-open) a .lb, .goo:not(.is-open) .soon .lb, .goo:not(.is-open) .fold .lb{opacity:0;transform:translateX(-8px)} /* Entrées pas encore branchées : même place, même rythme, mais visiblement inertes — et sans compteur. Un lien mort qui affiche un chiffre laisse croire qu'il y a quelque chose derrière. */ .goo .soon{ display:flex;align-items:center;gap:13px;height:46px;flex:none; padding:0 14px;border-radius:999px;white-space:nowrap;cursor:default; color:rgba(255,255,255,.3); } .goo .soon svg{width:19px;height:19px;flex:none;stroke:currentColor;fill:none; stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .goo .soon .lb{ font-size:13px;font-weight:600;letter-spacing:.01em; opacity:1;transform:none; transition:opacity .3s .06s, transform .4s .06s cubic-bezier(.22,1,.36,1); } .goo .soon .lb em{font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;margin-left:8px;padding:2px 7px;border-radius:999px; background:rgba(255,255,255,.09);color:rgba(255,255,255,.45)} /* La poignée de repli : même gabarit qu'une entrée, mais ce n'est pas une destination — d'où le retrait de couleur et la flèche qui se retourne. */ .goo .fold{ display:flex;align-items:center;gap:13px;height:46px;flex:none;margin-top:6px; padding:0 14px;border:0;border-radius:999px;background:transparent; color:rgba(255,255,255,.4);cursor:pointer;white-space:nowrap; font-family:inherit;transition:color .25s; } .goo .fold:hover{color:#fff} .goo .fold svg{width:19px;height:19px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.34,1.56,.64,1)} .goo:not(.is-open) .fold svg{transform:rotate(180deg)} .goo .fold .lb{ font-size:13px;font-weight:600;letter-spacing:.01em; opacity:1;transform:none; transition:opacity .3s .06s, transform .4s .06s cubic-bezier(.22,1,.36,1); } .goo .gap{height:14px;flex:none;position:relative;margin:0 16px} .goo .gap::after{content:"";position:absolute;inset:auto 0 6px;height:1px;border-radius:2px; background:rgba(255,255,255,.16)} /* ═══ Dock droit : actions, tâches, notifications ═══ */ /* ⚠️ Jamais de `margin-top:auto` sur le PREMIER enfant de ce rail. Sur le premier enfant d'une colonne flex, il absorbe tout l'espace au-dessus et refoule le rail entier vers le bas de l'écran — régression vécue le 29/07/2026 avec `.lvl{margin-top:auto}`. La mise en garde vivait dans le bloc `.lvl`, supprimé le 03/08 avec la bascule Simple/Avancé ; elle est ici parce que c'est le rail qu'elle protège, pas le bloc qui l'a révélée. */ /* Persistant d'un écran à l'autre : la gouttière ne change pas quand on passe d'un onglet à un autre, elle n'a aucune raison de se refondre. */ .rail{ view-transition-name:rail; position:fixed;right:0;top:0;bottom:0;width:296px;z-index:40; background:linear-gradient(200deg,#f2f5fa,#e9edf4); border-radius:30px 0 0 30px; box-shadow:-16px 0 44px rgba(28,39,64,.10), inset 1px 0 0 rgba(255,255,255,.8); padding:28px 26px 24px;display:flex;flex-direction:column;gap:30px; overflow-y:auto; animation:var(--entree,railIn) 1s .15s cubic-bezier(.22,1,.36,1) both; } @keyframes railIn{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}} .rail h3{font-family:'Clash Display';font-size:11px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-2);margin-bottom:14px;display:flex;align-items:baseline;gap:8px} .rail h3 .mono{margin-left:auto;font-size:10px;color:var(--ink-3);letter-spacing:0;text-transform:none} /* Un titre du dock peut être un lien (« Tâches » mène à /travail). `hub.css` n'a aucun reset sur `a` : sans cette règle il sortait en bleu souligné du navigateur, au milieu d'un dock en encre — constaté par Raphaël le 03/08. Un titre reste un titre, qu'il mène quelque part ou non. */ .rail h3 a{color:inherit;text-decoration:none;transition:color .25s} .rail h3 a:hover{color:var(--accent-ink)} .qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .qa{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:13px 14px; border-radius:16px;background:var(--posed); box-shadow:var(--raise-sm);cursor:pointer;text-decoration:none;color:var(--ink-2); transition:transform .25s, box-shadow .3s, color .25s} .qa svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .qa b{font-size:11.5px;font-weight:600;line-height:1.25} .qa:hover{transform:translateY(-2px);color:var(--accent-ink);box-shadow:var(--raise)} .qa:active{transform:none;box-shadow:var(--carve)} .task{margin-bottom:15px;display:block;color:inherit;text-decoration:none; padding:2px 0;border-radius:8px;transition:background .2s} .task:hover{background:rgba(143,157,182,.06)} .task:last-child{margin-bottom:0} .task .t{display:flex;align-items:baseline;gap:8px;min-width:0} .task .t{min-width:0} .task .t b{font-size:12.5px;font-weight:600;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;min-width:0} .task .t>span{font-size:10.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .task .t .pc{margin-left:auto;flex:none;font-family:'Spline Sans Mono';font-size:10.5px;color:var(--accent-ink)} .bar{height:5px;border-radius:999px;background:var(--surface);box-shadow:var(--carve);margin-top:8px;overflow:hidden} .bar i{display:block;height:100%;border-radius:999px; background:linear-gradient(90deg,#00d68c,var(--accent)); box-shadow:0 0 8px rgba(0,255,167,.5)} .bar i.run{animation:barpulse 2.2s ease-in-out infinite} @keyframes barpulse{50%{filter:brightness(1.15)}} .task.queued .t b{color:var(--ink-2);font-weight:500} .task.queued .t .pc{color:var(--ink-3)} /* Une tâche cassée est du travail qui attend, pas du travail terminé. */ .task.failed .t .pc{color:#c13a54;font-weight:600} /* Une tâche qui attend une DÉCISION est ce que le dock doit crier le plus fort : elle ne bougera jamais toute seule. Elle garde donc le titre pleine graisse (contrairement à `.queued`, volontairement effacée) et sa mention passe en accent. Ajouté le 07/09/2026 après l'audit du dock, qui comptait cinq tâches et n'en montrait qu'une. */ .task.waiting .t .pc{color:var(--accent-ink);font-weight:600} .bar i.bad{background:var(--danger);opacity:.5;animation:none} /* Une part qui n'est ni bonne ni mauvaise. Les deux remplissages ci-dessus portent un verdict : vert « ça avance », rouge « c'est cassé ». La part de trafic marqué campagne n'est ni l'un ni l'autre — la teinter reviendrait à juger la stratégie du client à sa place. Ajouté le 04/08/2026 (perfseo). `--ink-3` à .55 avait été le premier essai : mesuré au navigateur, le remplissage ne se distinguait plus de son rail — une barre qu'on ne lit pas ne dit rien. `--ink-2` opaque garde la neutralité et rend la proportion. */ .bar i.neutre{background:var(--ink-2);opacity:1;box-shadow:none;animation:none} .notif{display:flex;gap:11px;padding:11px 0;position:relative} .notif + .notif::before{content:"";position:absolute;top:0;left:18px;right:0;height:1px; background:linear-gradient(180deg, rgba(28,39,64,.05), rgba(255,255,255,.7))} .notif .nd{width:7px;height:7px;border-radius:50%;flex:none;margin-top:5px} .notif .nd.a{background:#00d68c;box-shadow:0 0 8px rgba(0,230,150,.5)} .notif .nd.w{background:var(--warn)} .notif .nd.d{background:var(--danger)} .notif .nt{min-width:0} .notif .nt b{font-size:12px;font-weight:600;display:block;line-height:1.35} .notif .nt span{font-size:11px;color:var(--ink-3)} .notif .ok-x{margin-left:auto;display:flex;gap:7px;align-self:center;flex:none} .notif .ok-x a{width:30px;height:30px;border-radius:50%;display:grid;place-items:center; text-decoration:none;font-size:12px;font-weight:700; background:var(--posed);box-shadow:var(--raise-sm); transition:transform .2s, box-shadow .3s} .notif .ok-x a.y{color:var(--accent-ink)} .notif .ok-x a.n{color:var(--ink-3)} .notif .ok-x a:hover{transform:translateY(-1px)} .notif .ok-x a:active{box-shadow:var(--carve);transform:none} .rail-empty{font-size:11.5px;color:var(--ink-3);padding:4px 0} /* ═══ Page ═══ */ /* Le retrait de gauche suit la largeur réelle du menu (--goo-w, posée par le JS à chaque image) : quand le menu s'ouvre, le contenu se décale au lieu d'être recouvert. */ .page{padding:30px 336px 56px calc(var(--goo-w, 88px) + 50px)} /* ── Entête ── */ /* `view-transition-name` doit être UNIQUE dans la page. Vérifié au navigateur sur quatre écrans : il n'y a jamais qu'un seul `header.top` rendu — celui de l'écran de gestion vit dans la branche non encastrée, les deux ne coexistent pas. Deux éléments de même nom feraient annuler la transition entière. */ .top{view-transition-name:entete; display:flex;align-items:center;gap:20px;margin-bottom:30px; animation:var(--entree,fade) .9s .1s cubic-bezier(.22,1,.36,1) both} /* L'entête est persistant : il ne se réintroduit pas à chaque navigation. Son `fade` d'entrée ne sert qu'au premier chargement, et rejouait à chaque clic — c'est ce clignotement qu'on retire. Pendant une transition, le navigateur l'interpole d'un écran à l'autre ; l'animation ferait un fondu DANS le fondu. */ h1{font-family:'Clash Display';font-size:29px;font-weight:600;letter-spacing:.05em;text-transform:uppercase} .top .sub{color:var(--ink-3);font-size:12.5px;margin-top:4px;letter-spacing:.01em} .top .sub b{color:var(--ink-2);font-weight:500} .search{ margin-left:auto;display:flex;align-items:center;gap:10px;width:290px; background:var(--surface); border-radius:999px;padding:11px 18px;color:var(--ink-3);font-size:13px; box-shadow:var(--carve); } .search svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round} .search .mono{margin-left:auto;font-size:10px;color:var(--ink-3);opacity:.8} .search input{flex:1;min-width:0;background:transparent;border:0;outline:none; font:inherit;color:var(--ink)} .search input::placeholder{color:var(--ink-3)} .search input::-webkit-search-cancel-button{display:none} .night{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2)} .night i{width:6px;height:6px;border-radius:50%;background:#00d68c; box-shadow:0 0 8px 1px rgba(0,230,150,.55);animation:pulse 3s infinite} @keyframes pulse{50%{opacity:.45}} /* ── Bandeau KPI : une pièce, sculptée doucement ── */ .kpi-bar{ display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr; background:var(--posed); border-radius:28px;box-shadow:var(--raise); margin-bottom:22px; animation:var(--entree,fade) .9s .18s cubic-bezier(.22,1,.36,1) both; } .kpi{padding:26px 28px 24px;position:relative} .kpi + .kpi::before{ content:"";position:absolute;left:0;top:20%;bottom:20%;width:1.5px;border-radius:2px; background:linear-gradient(90deg, rgba(28,39,64,.06), rgba(255,255,255,.9)); } .kpi .lbl{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:500} .kpi .val{font-family:'Clash Display';font-size:34px;font-weight:500;letter-spacing:-.02em; margin-top:9px;line-height:1;font-variant-numeric:tabular-nums;text-shadow:var(--grave)} .kpi .val small{font-size:14px;color:var(--ink-3);font-weight:400;margin-left:1px} /* padding:0 explicite : `.foot` seul (le pied de page de la Flotte, sans rapport) déclare `padding:0 26px`, et la valeur descendait dans les ~19 pieds de KPI qui ont déjà leur propre padding. Les vues contournaient en patchant le margin en inline. */ .kpi .foot{font-size:12px;color:var(--ink-2);margin-top:10px;padding:0;display:flex;align-items:center;gap:7px} .dot{width:5px;height:5px;border-radius:50%;flex:none} .dot.ok{background:#00c583} .dot.warn{background:var(--warn)} /* « On ne sait pas » : une pastille grise, jamais une verte. */ .dot.mute{background:var(--ink-3);opacity:.5} .kpi.hero{display:flex;align-items:center;gap:20px} .hero-ring{position:relative;width:66px;height:66px;flex:none;border-radius:50%; background:var(--surface);box-shadow:var(--carve); --bille:#00c583;--bille-deep:#007a4e} /* Le cercle de progrès est retiré : la bille porte le signal à elle seule, et le chiffre dit le reste. Le ` redevenait un inline, où `width` et `height` ne s'appliquent pas — le point de couleur faisait 0 × 0. Rendre son `display:flex` à `.st` le fait réapparaître. */ .s-id .st{display:flex} .s-id .st-txt{min-width:0} .h{display:flex;align-items:center;gap:10px} .h .c{width:26px;height:26px;border-radius:50%;flex:none;position:relative; background:conic-gradient(var(--hc,#00c583) calc(var(--hv,90)*1%), #dfe4ed 0)} .h .c::before{content:"";position:absolute;inset:3.5px;border-radius:50%; background:var(--posed); box-shadow:inset 0 1px 1px rgba(28,39,64,.07)} .h b{font-size:12.5px;font-weight:600;min-width:26px;font-variant-numeric:tabular-nums} .up{font-size:11.5px;color:var(--ink-2)} /* statuts minimalistes : point + valeur */ .st{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);font-weight:500} .st i{width:5px;height:5px;border-radius:50%;flex:none} .st.ok i{background:#00c583} .st.w i{background:var(--warn)} .st.d{color:#c13a54;font-weight:600} .st.d i{background:var(--danger)} .st.m{color:var(--ink-3);font-weight:400} .st.m i{display:none} /* L'asymétrie de `.st` est VOULUE pour un ÉTAT : `.st.ok` ne colore que sa pastille, `.st.d` colore tout son texte — au milieu de vingt lignes « en ligne », la panne doit crier. Elle devient un défaut quand `.st` sert à une COMPARAISON : sur /performance/{site}/mots-cles, mesuré le 03/08 sur 126 mots-clés réels, 42 baisses sortaient en rouge gras contre 22 hausses en gris — l'œil lisait un effondrement là où un tiers des mots-clés montait. `kw` rétablit l'équilibre, et NULLE PART ailleurs : sur l'onglet Maintenance, `.st.ok` (« à jour ») est le cas normal de dizaines de lignes. */ .inv-row.kw .st.ok{color:var(--accent-ink);font-weight:600} .lastc{font-size:11.5px;color:var(--ink-3);line-height:1.35;min-width:0} .lastc b{display:block;font-size:12.5px;color:var(--ink-2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .go{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3); transition:all .35s;opacity:0} .row:hover .go{opacity:1;background:var(--surface);box-shadow:var(--carve);color:var(--accent-ink)} .row-empty{padding:36px 24px;text-align:center;color:var(--ink-3);font-size:12.5px} .foot{display:flex;align-items:center;margin-top:22px;padding:0 26px; font-size:11.5px;color:var(--ink-3)} .foot .r{margin-left:auto;font-family:'Spline Sans Mono';font-size:10px} .foot .r-dim{color:var(--ink-3);margin-left:6px} /* ═══ États : toast, apparitions ═══ */ .toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:80; padding:12px 24px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--accent-ink); background:var(--posed);box-shadow:var(--raise); animation:toastIn .5s cubic-bezier(.22,1,.36,1) both, toastOut .5s 3.6s ease forwards} .toast::before{content:"";width:7px;height:7px;border-radius:50%;display:inline-block; margin-right:9px;background:var(--accent);box-shadow:0 0 10px rgba(0,255,167,.6);vertical-align:1px} @keyframes toastIn{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}} @keyframes toastOut{to{opacity:0;transform:translate(-50%,10px);visibility:hidden}} @keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* ═══ Responsive ═══ */ /* Le dock ne DISPARAÎT plus sous 1500 px : il se replie en bande d'icônes, collée au bord droit, et se déploie au survol ou au focus clavier — même principe que le menu de gauche. */ .rail-mini{display:none} @media (max-width:1500px){ .page{padding-right:96px} .rail{ width:72px;padding:22px 0;overflow:hidden; border-radius:30px 0 0 30px; transition:width .55s cubic-bezier(.3,1.15,.35,1), padding .55s cubic-bezier(.3,1.15,.35,1); } .rail:hover,.rail:focus-within{width:296px;padding:28px 26px 24px} /* Replié : seule la bande d'icônes est visible. */ .rail-mini{ display:flex;flex-direction:column;align-items:center;gap:14px; opacity:1;transition:opacity .25s; } .rail > section,.rail > div:not(.rail-mini){ opacity:0;pointer-events:none;transition:opacity .3s; } .rail:hover .rail-mini,.rail:focus-within .rail-mini{opacity:0;pointer-events:none;height:0;overflow:hidden} .rail:hover > section,.rail:focus-within > section, .rail:hover > div:not(.rail-mini),.rail:focus-within > div:not(.rail-mini){ opacity:1;pointer-events:auto; } .rm{position:relative;width:40px;height:40px;border-radius:50%;flex:none; display:grid;place-items:center;color:var(--ink-3);text-decoration:none; background:var(--posed);box-shadow:var(--raise-sm)} a.rm:hover{color:var(--ink-1)} .rm svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .rm b{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;border-radius:999px; display:grid;place-items:center;font-size:10px;font-weight:700;padding:0 4px; background:var(--ink);color:#fff} .rm-go{color:var(--accent-ink)} .rm-go b{background:var(--accent-deep)} .rm-warn b{background:var(--warn)} .rm-alarm{color:#fff;background:linear-gradient(150deg,#e0405c,#c22740); box-shadow:0 0 0 4px rgba(224,64,92,.16);animation:pulse 1.8s ease-in-out infinite} .rm-more{color:var(--ink-3);box-shadow:none;background:transparent;margin-top:4px} } /* Sous 1100 px, le dock ne disparaissait plus DU TOUT — c'était l'accès unique à l'approbation, à « TOUT ARRÊTER » et à la bascule Simple/Avancé (revue d'interface 29/07). On garde la bande d'icônes visible jusqu'en bas, en la restant repliable au survol comme entre 1100 et 1500 px. */ @media (max-width:1100px){ .rail{width:56px;padding:16px 0} .rail:hover,.rail:focus-within{width:296px;padding:28px 26px 24px} .page{padding-right:76px} .rm{width:36px;height:36px} } @media (max-width:1240px){ .kpi-bar{grid-template-columns:repeat(3,1fr)} /* 6 colonnes : .hide-md en masque 2 sur les 8 (Vuln., Tickets), il reste site / santé / uptime / MAJ / intervention / flèche. ⚠️ Vrai aussi avec la colonne « Responsable » : elle porte `hide-md`, donc à ce point de rupture c'est 3 masquées sur 9, et il reste les mêmes six. */ .cols,.row{grid-template-columns:2.2fr .85fr .7fr .5fr 1.6fr 36px} .hide-md{display:none} } /* En dessous de 1100 px, six colonnes ne tiennent plus : mesuré le 03/08 au navigateur, `.s-id` réclame 247 px et n'en recevait que 205 à 1000 px, 118 à 800, 64 à 700 — le nom du site passait par-dessus la colonne suivante, et la page débordait en largeur. Uptime et « Dernière intervention » sortent donc à leur tour : ce sont les deux qui ne disent pas « agis maintenant ». Reste site / santé / MAJ / flèche. */ @media (max-width:1100px){ .cols,.row{grid-template-columns:minmax(0,2.6fr) .9fr .6fr 36px} .hide-sm{display:none} } /* Sous 860 px, même quatre colonnes ne tiennent pas : la ligne cesse d'être une grille et devient un bloc. Le nom prend toute la largeur, l'état passe dessous, la flèche reste à droite. Rien n'est masqué de plus — c'est la disposition qui change, pas l'information. */ @media (max-width:860px){ .cols{display:none} .row{grid-template-columns:minmax(0,1fr) auto auto 36px;gap:8px 10px;padding:14px 18px} .row .s-id{grid-column:1/-1} } .st.state{font-size:13px} .st.state.ok{color:var(--accent-ink)} .st.state.m i{display:block;background:var(--ink-3);opacity:.55} .st.state i{width:6px;height:6px} /* ── Approbations en attente (parcours P1 : approuver en 1 clic) ── */ .approvals h3{color:var(--accent-ink)} .appr{display:flex;flex-direction:column;gap:10px;padding:13px 15px;margin-bottom:10px; border-radius:16px;background:var(--posed);box-shadow:var(--raise-sm)} .appr-tx{min-width:0} .appr-tx b,.appr-tx a{display:block;font-size:12.5px;font-weight:600;line-height:1.35; color:var(--ink-1);text-decoration:none} .appr-tx a:hover{color:var(--accent-ink)} .appr-tx span{font-size:11px;color:var(--ink-3)} /* Ce qui ne se répare pas se confirme — même standard que « TOUT ARRÊTER ». */ .appr-ask{font-size:11.5px;line-height:1.5;color:#a33049;margin:-2px 0 0} .appr-act{display:flex;gap:6px} .appr-act .ok{flex:1} .appr-act .ghost{color:var(--ink-3);padding:8px 11px;box-shadow:none;background:transparent} .appr-act .ghost:hover{color:var(--ink-2);box-shadow:var(--raise-sm);background:var(--surface)} .appr-act .no.confirm{flex:1;color:#fff;background:linear-gradient(150deg,#e0405c,#c22740)} .appr-act button{border:0;cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:600; border-radius:999px;padding:8px 12px;background:var(--posed); box-shadow:var(--raise-sm);transition:transform .2s,box-shadow .3s,color .2s} .appr-act .ok{color:var(--accent-ink)} .appr-act .no{color:var(--ink-3);padding:8px 11px} .appr-act button:hover{transform:translateY(-1px)} .appr-act button:active{box-shadow:var(--carve);transform:none} .appr-act button:disabled{opacity:.5;cursor:default} /* ═══════════════════════════════════════════════════════════════════════ Pipeline de mise à jour (écran /pipelines/{task}) — proto A2 « Relief » Tout est portée par .pipeline pour ne rien déborder sur les autres écrans. ═══════════════════════════════════════════════════════════════════════ */ .pipeline .back{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center; text-decoration:none;color:var(--ink-2);font-size:15px; background:var(--posed);box-shadow:var(--raise-sm); transition:transform .25s, box-shadow .3s, color .25s} .pipeline .back:hover{transform:translateX(-2px);color:var(--accent-ink);box-shadow:var(--raise)} .pipeline .back:active{transform:none;box-shadow:var(--carve)} .pipeline h1{font-size:26px} .pipeline .live{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2); padding:10px 18px;border-radius:999px;background:var(--surface);box-shadow:var(--carve);white-space:nowrap} .pipeline .live i{width:6px;height:6px;border-radius:50%;background:#00d68c; box-shadow:0 0 8px 1px rgba(0,230,150,.55);animation:pulse 3s infinite} /* ── Panneaux sculptés ── */ .pipeline .panel{background:var(--posed); border-radius:28px;box-shadow:var(--raise);padding:24px 26px;margin-bottom:22px; animation:var(--entree,fade) .9s .18s cubic-bezier(.22,1,.36,1) both} .pipeline .panel h2{font-family:'Clash Display';font-size:15px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;white-space:nowrap;flex:none} .pipeline .p-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap} .pipeline .p-head .mono{margin-left:auto;font-size:10.5px;color:var(--ink-3)} .pipeline .chip{font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; padding:5px 11px;border-radius:999px;background:var(--surface);box-shadow:var(--carve); color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .pipeline .chip.ok,.pipeline .chip.run{color:var(--accent-ink)} .pipeline .chip.run i{width:5px;height:5px;border-radius:50%;background:#00d68c; box-shadow:0 0 7px rgba(0,230,150,.55);animation:pulse 2.2s infinite} .pipeline .chip.sec{color:#b06a10;margin-left:8px} .pipeline .chip.ko{color:#c13a54} .pipeline .chip.mut{color:var(--ink-3)} /* ── Où on en est : la phrase, puis le geste ── */ .pipeline .now-panel{animation-delay:.1s} .pipeline .headline{font-size:17px;line-height:1.5;font-weight:700;max-width:74ch} .pipeline .blocker{margin-top:10px;font-size:13px;line-height:1.55;color:var(--ink-2);max-width:74ch} .pipeline .btns{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap} .pipeline .pl-appr .btns{flex-direction:column} .pipeline .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:13px 22px;border-radius:999px;border:0;font-family:inherit;cursor:pointer; font-size:13px;font-weight:700;color:var(--ink-2); background:var(--posed);box-shadow:var(--raise-sm); transition:transform .25s, box-shadow .3s, color .25s} .pipeline .btn svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none; stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .pipeline .btn:hover{transform:translateY(-2px);color:var(--accent-ink);box-shadow:var(--raise)} .pipeline .btn:active{transform:none;box-shadow:var(--carve)} .pipeline .btn.deploy:not(:disabled){color:var(--accent-ink)} .pipeline .btn.refuse{color:var(--ink-3)} .pipeline .btn:disabled{background:var(--surface);box-shadow:var(--carve);color:var(--ink-3); cursor:not-allowed;font-weight:600;transform:none} .pipeline .btn:disabled:hover{transform:none;color:var(--ink-3);box-shadow:var(--carve)} /* ── Stepper : 9 étapes gravées dans une pièce ── */ .pipeline .pipe{animation-delay:.22s} .pipeline .steps-wrap{overflow-x:auto;margin:0 -8px;padding:0 8px} .pipeline .steps-wrap::-webkit-scrollbar{display:none} .pipeline .steps{display:grid;grid-template-columns:repeat(9,1fr);min-width:900px} .pipeline .step{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px; padding:14px 6px 4px;text-align:center} .pipeline .step:not(:first-child)::before{content:"";position:absolute;top:30px;height:3px;border-radius:3px; left:calc(-50% + 25px);right:calc(50% + 25px); background:#dfe4ed;box-shadow:inset 0 1px 2px rgba(28,39,64,.08)} .pipeline .step.done:not(:first-child)::before,.pipeline .step.now::before{ background:linear-gradient(90deg,#00d68c,var(--accent));box-shadow:0 0 8px rgba(0,255,167,.45)} .pipeline .step.ko::before{background:linear-gradient(90deg,#e07f92,var(--danger))} .pipeline .step .n{position:relative;width:34px;height:34px;border-radius:50%;display:grid;place-items:center; transition:transform .35s cubic-bezier(.34,1.56,.64,1)} .pipeline .step:hover .n{transform:scale(1.1)} .pipeline .step.done .n,.pipeline .step.now .n,.pipeline .step.ko .n,.pipeline .step.skip .n{ background:var(--posed);box-shadow:var(--raise-sm)} .pipeline .step .n svg{width:14px;height:14px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .pipeline .step.done .n svg{stroke:var(--accent-ink)} .pipeline .step.ko .n svg{stroke:var(--danger)} .pipeline .step.now .n::after{content:"";position:absolute;inset:0;border-radius:50%; box-shadow:0 0 0 0 rgba(0,255,167,.45);animation:ping 2.4s infinite} .pipeline .step.now .n i{width:10px;height:10px;border-radius:50%;background:var(--accent); box-shadow:0 0 12px 2px rgba(0,255,167,.55);animation:pulse 2.6s infinite} .pipeline .step.todo .n{background:var(--surface);box-shadow:var(--carve); font-family:'Spline Sans Mono';font-size:11px;color:var(--ink-3)} .pipeline .step b{font-size:11px;font-weight:600;line-height:1.25;color:var(--ink-2)} .pipeline .step.now b{color:var(--ink);font-weight:700} .pipeline .step.todo b{color:var(--ink-3);font-weight:500} .pipeline .step.ko b{color:#c13a54} .pipeline .step .tm{font-family:'Spline Sans Mono';font-size:9.5px;color:var(--ink-3)} .pipeline .step.now .tm{color:var(--accent-ink)} /* ── Corps : étape courante + colonne latérale ── */ .pipeline .pl-main{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;align-items:start} .pipeline .stage-panel{animation-delay:.3s} .pipeline .stage-desc{font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:70ch} .pipeline .stage-detail{margin-top:10px;font-size:12.5px;line-height:1.55;color:var(--ink-3);max-width:70ch} .pipeline .stage-list{margin-top:2px} .pipeline .stage-desc + .stage-list,.pipeline .stage-detail + .stage-list{margin-top:18px} .pipeline .stage{display:flex;align-items:flex-start;gap:13px;padding:12px 8px;border-radius:14px; position:relative;transition:background .3s} .pipeline .stage + .stage::before{content:"";position:absolute;top:0;left:16px;right:8px;height:1px; background:linear-gradient(180deg, rgba(28,39,64,.05), rgba(255,255,255,.7))} .pipeline .stage:hover{background:rgba(255,255,255,.35)} .pipeline .stage .sn{font-size:10px;color:var(--ink-3);padding-top:3px;flex:none} .pipeline .stage.done .sn{color:var(--accent-ink)} .pipeline .stage .sx{min-width:0;flex:1} .pipeline .stage .sx b{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:8px} .pipeline .stage.todo .sx b{font-weight:500;color:var(--ink-3)} .pipeline .stage .sd{display:block;margin-top:3px;font-size:11.5px;line-height:1.5;color:var(--ink-3)} .pipeline .arts{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px} .pipeline .art{font-size:9.5px;color:var(--ink-2);padding:4px 9px;border-radius:999px; background:var(--surface);box-shadow:var(--carve)} /* Le geste d'une étape (entretenir 35) : ce que Raphaël fait. Il empruntait `.art`, la pastille de 9,5 px d'un lien d'artefact ; un renvoi ou une commande se lit à la taille de la phrase qui le porte, et la commande se sélectionne d'un clic pour être recopiée (socle 34). */ .pipeline .geste{font:inherit;color:inherit} .pipeline a.geste{color:var(--accent-ink);font-weight:600;text-decoration:none} .pipeline a.geste:hover{text-decoration:underline} .pipeline .geste code{display:inline-block;margin-top:4px;font-size:11.5px;line-height:1.5;color:var(--ink); padding:3px 9px;border-radius:9px;background:var(--surface);box-shadow:var(--carve); user-select:all;overflow-wrap:anywhere} /* Le retour arrière d'un passage qui a pu écrire en production : un bouton, et ce qu'il fait dit à côté (socle 34). */ .pipeline .retour{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:14px} .pipeline .retour .btn{color:var(--accent-ink)} .pipeline .retour .quoi{font-size:12px;line-height:1.5;color:var(--ink-3);max-width:62ch} .pipeline .stage .stm{flex:none;font-size:9.5px;color:var(--ink-3);padding-top:3px;text-align:right} /* ── Les écarts d'une comparaison visuelle ────────────────────────────────── Un écart ne se replie pas : c'est un signal, et le premier geste devant lui est d'aller voir la page. Les deux liens (copie et production) sont donc au même niveau que le chiffre, pas cachés derrière une poignée. */ .pipeline .ecarts{margin-top:18px;display:flex;flex-direction:column;gap:10px} .pipeline .ecart{padding:13px 15px;border-radius:14px;background:var(--surface);box-shadow:var(--carve)} /* La reprise d'un passage dont TOUS les écarts sont identiques à des décisions passées : il n'y a plus de bouton dans aucune carte, donc plus de porte de sortie sans celle-ci (08/09/2026). */ .pipeline .ecart-reprise{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px} .pipeline .ecart-reprise .mono{font-size:10px;color:var(--ink-3)} .pipeline .ecart b{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .pipeline .ecart .ecart-pc{font-size:10.5px;color:#c13a54} .pipeline .ecart .ecart-h{font-size:10px;color:var(--ink-3)} .pipeline .ecart .ecart-go{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px} .pipeline .ecart .ecart-ia{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:11px} .pipeline .ecart .ecart-ia .btn{padding:8px 15px;font-size:11.5px} .pipeline .ecart .ecart-prix{font-size:10px;color:var(--ink-3)} .pipeline .ecart .ecart-avis{display:block;margin-top:11px;padding:11px 13px;border-radius:12px; background:var(--posed);box-shadow:var(--carve);font-size:12px;line-height:1.55;color:var(--ink-2)} .pipeline .ecart .ecart-avis b{display:block;font-size:11.5px;margin-bottom:4px} .pipeline .ecart .ecart-avis em{display:block;margin-top:6px;font-style:normal;font-size:11px;color:var(--ink-3)} .pipeline .ecart .ecart-avis .ecart-src{font-size:10px;line-height:1.5} .pipeline .ecart .ecart-avis.ko b{color:#c13a54} /* ── Colonne : mises à jour + approbation ── */ .pipeline .pl-side{display:flex;flex-direction:column} .pipeline .maj-panel{animation-delay:.36s} .pipeline .maj{display:flex;align-items:center;gap:13px;padding:11px 6px;border-radius:14px;position:relative; transition:background .3s} .pipeline .maj + .maj::before{content:"";position:absolute;top:0;left:16px;right:8px;height:1px; background:linear-gradient(180deg, rgba(28,39,64,.05), rgba(255,255,255,.7))} .pipeline .maj:hover{background:rgba(255,255,255,.35)} .pipeline .maj .fav{width:34px;height:34px;border-radius:12px;font-size:11px} .pipeline .maj .maj-x{min-width:0;flex:1} .pipeline .maj .maj-x b{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:4px} .pipeline .maj .maj-x .maj-v{font-size:10.5px;color:var(--ink-3);display:block;margin-top:2px} .pipeline .maj .maj-x .maj-v em{font-style:normal;color:var(--accent-ink)} .pipeline .maj .st{flex:none;font-size:11.5px} .pipeline .maj .st .mono{font-size:10px;color:var(--ink-3);margin-left:6px} .pipeline .pl-appr{animation-delay:.44s} .pipeline .pl-appr .hint{font-size:12.5px;color:var(--ink-2);line-height:1.55;margin:-6px 0 14px} .pipeline .pre{display:flex;align-items:center;gap:11px;padding:8px 4px;font-size:12.5px;color:var(--ink-2)} .pipeline .pre .pi{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center; background:var(--surface);box-shadow:var(--carve)} .pipeline .pre.done .pi{background:var(--posed);box-shadow:var(--raise-sm)} .pipeline .pre.done .pi svg{width:11px;height:11px;stroke:var(--accent-ink);fill:none;stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round} .pipeline .pre.now .pi i{width:7px;height:7px;border-radius:50%;background:var(--accent); box-shadow:0 0 9px 1px rgba(0,255,167,.55);animation:pulse 2.4s infinite} .pipeline .pre.now{color:var(--ink);font-weight:600} .pipeline .pre.todo{color:var(--ink-3)} .pipeline .pre.ko{color:#c13a54;font-weight:600} .pipeline .pre .mono{margin-left:auto;font-size:10px;color:var(--ink-3)} .pipeline .appr-foot{font-size:11px;color:var(--ink-3);line-height:1.6;margin-top:15px; display:flex;gap:8px;align-items:flex-start} .pipeline .appr-foot svg{width:13px;height:13px;flex:none;margin-top:2px;stroke:var(--ink-3);fill:none; stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .pipeline .foot{animation:var(--entree,fade) .9s .55s cubic-bezier(.22,1,.36,1) both} @media (max-width:1240px){ .pipeline .pl-main{grid-template-columns:1fr} } @media (max-width:980px){ .pipeline .live{display:none} .pipeline .top{flex-wrap:wrap} } /* ═══════════════════════════════════════════════════════════════════════ Écran « Inbox tickets » (livewire.tickets.inbox) Source visuelle : design/propositions/screens/inbox-tickets.html ═══════════════════════════════════════════════════════════════════════ */ /* La page tient dans l'écran : ce sont la file et le fil qui défilent. */ .inbox-page{height:100vh;display:flex;flex-direction:column;padding-bottom:26px} .inbox-page .top{margin-bottom:24px;flex:none} .inbox-page .top .search{margin-left:14px;width:260px} .inbox-page .inbox{flex:1;min-height:0;display:grid;grid-template-columns:356px minmax(0,1fr);gap:26px} /* ── Colonne gauche : file de tickets ── */ .inbox-page .queue{display:flex;flex-direction:column;min-height:0; animation:var(--entree,fade) .9s .2s cubic-bezier(.22,1,.36,1) both} .inbox-page .q-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:12px;padding:0 8px;flex:none} .inbox-page .q-head h2{font-family:'Clash Display';font-size:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase} .inbox-page .q-head .mono{margin-left:auto;font-size:10px;color:var(--ink-3)} .inbox-page .q-head .filters{flex-basis:100%;margin-left:0;flex-wrap:wrap;gap:3px} .inbox-page .q-head .f{font-size:11.5px;padding:5px 11px} .inbox-page .tlist{flex:1;min-height:0;overflow-y:auto;padding:4px 8px 20px 4px; scrollbar-width:thin;scrollbar-color:rgba(28,39,64,.14) transparent} .inbox-page .tlist::-webkit-scrollbar{width:6px} .inbox-page .tlist::-webkit-scrollbar-thumb{background:rgba(28,39,64,.12);border-radius:99px} .inbox-page .tk{display:block;padding:15px 18px 14px 24px;border-radius:18px;position:relative;cursor:pointer; transition:box-shadow .35s, transform .3s cubic-bezier(.22,1,.36,1); animation:var(--entree,fade) .8s cubic-bezier(.22,1,.36,1) both} .inbox-page .tk + .tk::before{content:"";position:absolute;top:-1px;left:26px;right:26px;height:1.5px;border-radius:2px; background:linear-gradient(180deg, rgba(28,39,64,.045), rgba(255,255,255,.75));transition:opacity .3s} .inbox-page .tk:hover{background:var(--posed);box-shadow:var(--raise-sm); transform:translateY(-1px);z-index:2} .inbox-page .tk:hover::before, .inbox-page .tk:hover + .tk::before{opacity:0} /* sélectionné : pressé dans la céramique, liseré accent */ .inbox-page .tk.sel{background:var(--surface);box-shadow:var(--carve);transform:none;z-index:1} .inbox-page .tk.sel::before, .inbox-page .tk.sel + .tk::before{opacity:0} .inbox-page .tk.sel::after{content:"";position:absolute;left:10px;top:20px;bottom:20px;width:3px;border-radius:4px; background:linear-gradient(180deg,#00d68c,var(--accent));box-shadow:0 0 9px rgba(0,255,167,.55)} .inbox-page .tlist .tk:nth-child(1){animation-delay:.34s}.tlist .tk:nth-child(2){animation-delay:.39s} .inbox-page .tlist .tk:nth-child(3){animation-delay:.44s}.tlist .tk:nth-child(4){animation-delay:.49s} .inbox-page .tlist .tk:nth-child(5){animation-delay:.54s}.tlist .tk:nth-child(6){animation-delay:.59s} .inbox-page .tk .l1{display:flex;align-items:center;gap:8px;margin-bottom:6px} .inbox-page .tk .id{font-family:'Spline Sans Mono';font-size:10.5px;color:var(--ink-3)} .inbox-page .tk .age{margin-left:auto;font-family:'Spline Sans Mono';font-size:10px;color:var(--ink-3);white-space:nowrap} .inbox-page .tk .sub{display:block;font-size:13.5px;font-weight:600;line-height:1.3; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .inbox-page .tk .site{font-size:11px;color:var(--ink-2);margin-top:3px} .inbox-page .tk .site span{color:var(--ink-3)} .inbox-page .tk .site a{color:inherit;text-decoration:none;border-bottom:1px dotted transparent} .inbox-page .tk .site a:hover{color:var(--accent-ink);border-bottom-color:currentColor} .inbox-page .tk .ex{font-size:11.5px;color:var(--ink-3);line-height:1.45;margin-top:6px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .inbox-page .tk .l4{display:flex;align-items:center;gap:8px;margin-top:9px} /* tickets résolus : assourdis */ .inbox-page .tk.done{opacity:.68;transition:opacity .3s, box-shadow .35s, transform .3s cubic-bezier(.22,1,.36,1)} .inbox-page .tk.done:hover{opacity:1} .inbox-page .tk.done .sub{font-weight:500;color:var(--ink-2)} .inbox-page .q-empty{padding:32px 18px;text-align:center;color:var(--ink-3);font-size:12.5px} .inbox-page .q-foot{flex:none;padding:14px 10px 0;font-size:11px;color:var(--ink-3);line-height:1.6; animation:var(--entree,fade) .8s .6s cubic-bezier(.22,1,.36,1) both} .inbox-page .q-foot .mono{font-size:10px} /* classification IA : petit chip discret */ .inbox-page .chip{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; padding:3px 9px;border-radius:999px;line-height:1.4;white-space:nowrap} .inbox-page .chip.bug{color:#c13a54;background:rgba(232,90,116,.11)} .inbox-page .chip.evo{color:var(--accent-ink);background:rgba(0,214,140,.13)} .inbox-page .chip.cnt{color:#a4691c;background:rgba(227,160,42,.14)} .inbox-page .chip.qst{color:var(--ink-2);background:rgba(28,39,64,.06)} /* urgence : point coloré */ .inbox-page .urg{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block} .inbox-page .urg.low{background:#c6cedd} .inbox-page .urg.normal{background:#00c583} .inbox-page .urg.high{background:var(--warn);box-shadow:0 0 0 0 rgba(227,160,42,.4);animation:ping 2.6s infinite} .inbox-page .urg.critical{background:var(--danger);box-shadow:0 0 0 0 rgba(232,90,116,.4);animation:ping 2.4s infinite} /* sur qui la balle est */ .inbox-page .mini{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:500;color:var(--ink-2);min-width:0} .inbox-page .mini i{width:5px;height:5px;border-radius:50%;flex:none} .inbox-page .mini.wait i{background:var(--warn)} .inbox-page .mini.client i{background:#7f8fb0} .inbox-page .mini.new i{background:#00c583} .inbox-page .mini.done{color:var(--ink-3)} .inbox-page .mini.done i{background:#c6cedd} /* badge « à propager sur la flotte » */ .inbox-page .pbk{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700; letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);flex:none; padding:3px 9px;border-radius:999px;background:var(--surface);box-shadow:var(--carve)} .inbox-page .pbk svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* ── Colonne droite : fil de conversation ── */ .inbox-page .thread{display:flex;flex-direction:column;min-height:0;border-radius:28px; background:var(--posed);box-shadow:var(--raise); animation:var(--entree,fade) .9s .3s cubic-bezier(.22,1,.36,1) both} .inbox-page .th-empty{margin:auto;padding:40px;text-align:center;color:var(--ink-3);font-size:13px} .inbox-page .th-hint{margin:16px 28px 8px;padding:12px 16px;border-radius:14px;background:var(--surface);box-shadow:var(--carve); font-size:12px;color:var(--ink-3);line-height:1.55} .inbox-page .th-hint b{color:var(--ink-2)} .inbox-page .th-head{flex:none;padding:22px 28px 18px;position:relative} .inbox-page .th-head::after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:1.5px;border-radius:2px; background:linear-gradient(180deg, rgba(28,39,64,.07), rgba(255,255,255,.9))} .inbox-page .th-row{display:flex;align-items:center;gap:12px} .inbox-page .th-row h2{font-family:'Clash Display';font-size:17px;font-weight:600;letter-spacing:.04em; text-transform:uppercase;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .inbox-page .th-row h2 .id{font-family:'Spline Sans Mono';font-size:12px;font-weight:400;color:var(--ink-3); letter-spacing:0;margin-right:10px;vertical-align:2px} .inbox-page .th-meta{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap} .inbox-page .th-meta .m{font-size:12px;color:var(--ink-2)} .inbox-page .th-meta .m b{font-weight:600;color:var(--ink)} .inbox-page .th-meta .urg-m{display:flex;align-items:center;gap:6px} .inbox-page .th-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--ink-3);opacity:.6} /* Site à identifier : sélecteur juste à côté du blocage nommé, pour que le geste et sa raison partagent la même ligne. */ .inbox-page .tk-attach{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3)} .inbox-page .tk-attach select{font-family:inherit;font-size:12px;font-weight:500;color:var(--ink-2); border:0;outline:none;cursor:pointer;padding:6px 12px;border-radius:999px; background:var(--surface);box-shadow:var(--carve)} /* Le nom du site cité dans un ticket est un lien vers sa fiche — comme sur l'écran Perf. Sans cela, on voit le site mais on ne peut pas y aller. */ .inbox-page a.tk-site-link{color:inherit;text-decoration:none} .inbox-page a.tk-site-link:hover b{color:var(--accent-ink)} /* Bouton « + Nouveau » (saisie manuelle) — au niveau du filtre. */ .inbox-page .q-new{margin-left:6px} /* Formulaire de saisie manuelle : dans le panneau de droite, à la place du fil. Reprend les tokens des autres formulaires du hub. */ .inbox-page .tk-new-form{padding:22px 28px;display:flex;flex-direction:column;gap:18px} .inbox-page .tk-new-form .field{display:flex;flex-direction:column;gap:8px} .inbox-page .tk-new-form .field-lbl{font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)} .inbox-page .tk-new-form input, .inbox-page .tk-new-form select, .inbox-page .tk-new-form textarea{ width:100%;padding:13px 16px;border:0;outline:none;border-radius:16px; font:inherit;font-size:13.5px;color:var(--ink); background:var(--surface);box-shadow:var(--carve); transition:box-shadow .3s; } .inbox-page .tk-new-form textarea{line-height:1.55;resize:vertical;min-height:120px} .inbox-page .tk-new-form input:focus, .inbox-page .tk-new-form select:focus, .inbox-page .tk-new-form textarea:focus{box-shadow:var(--carve), 0 0 0 2px rgba(0,255,167,.35)} .inbox-page .tk-new-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media (max-width:960px){.inbox-page .tk-new-grid{grid-template-columns:1fr}} /* pastille d'état du ticket */ .inbox-page .thread .state{margin-left:auto;flex:none;display:flex;align-items:center;gap:7px; font-size:11px;font-weight:700;letter-spacing:.04em;color:#a4691c; padding:8px 15px;border-radius:999px;background:var(--surface);box-shadow:var(--carve); transition:color .4s} .inbox-page .thread .state i{width:6px;height:6px;border-radius:50%;background:var(--warn);animation:pulse 3s infinite;transition:background .4s} .inbox-page .thread .state.ok{color:var(--accent-ink)} .inbox-page .thread .state.ok i{background:#00d68c;animation:none;box-shadow:0 0 8px rgba(0,230,150,.5)} /* bascule « à propager sur la flotte » */ .inbox-page .pb-btn{flex:none;margin-left:auto;display:flex;align-items:center;gap:9px;padding:9px 15px;border:0;cursor:pointer; font-family:inherit;font-size:12px;font-weight:700;color:var(--ink-2);text-align:left; border-radius:999px;background:var(--posed);box-shadow:var(--raise-sm); transition:transform .25s, box-shadow .3s, color .25s} .inbox-page .pb-btn svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .inbox-page .pb-btn .n{font-family:'Spline Sans Mono';font-size:9.5px;font-weight:400;color:var(--ink-3); padding:2px 7px;border-radius:999px;background:var(--surface);box-shadow:var(--carve)} .inbox-page .pb-btn:hover{transform:translateY(-1px);box-shadow:var(--raise)} .inbox-page .pb-btn:active{transform:none;box-shadow:var(--carve)} .inbox-page .pb-btn.tagged{color:var(--accent-ink);box-shadow:var(--carve)} .inbox-page .pb-btn.tagged .n{color:var(--accent-ink)} .inbox-page .th-scroll{flex:1;min-height:0;overflow-y:auto;padding:24px 28px 12px; scrollbar-width:thin;scrollbar-color:rgba(28,39,64,.14) transparent} .inbox-page .th-scroll::-webkit-scrollbar{width:6px} .inbox-page .th-scroll::-webkit-scrollbar-thumb{background:rgba(28,39,64,.12);border-radius:99px} .inbox-page .th-scroll>*{animation:var(--entree,fade) .8s cubic-bezier(.22,1,.36,1) both} .inbox-page .th-scroll>*:nth-child(1){animation-delay:.4s} .inbox-page .th-scroll>*:nth-child(2){animation-delay:.48s} .inbox-page .th-scroll>*:nth-child(3){animation-delay:.56s} .inbox-page .th-scroll>*:nth-child(4){animation-delay:.64s} .inbox-page .th-scroll>*:nth-child(5){animation-delay:.72s} /* ── Mode simple : les trois questions qui comptent ── */ .inbox-page .recap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:22px} .inbox-page .recap>div{padding:15px 17px;border-radius:18px;background:var(--surface);box-shadow:var(--carve)} .inbox-page .recap span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-3);margin-bottom:9px} .inbox-page .recap p{font-size:12.5px;line-height:1.55;color:var(--ink)} .inbox-page .recap em{display:block;font-style:normal;font-size:10.5px;color:var(--ink-3);margin-top:7px} .inbox-page .recap p.w-client{color:#7f8fb0;font-weight:600} .inbox-page .recap p.w-wait, .inbox-page .recap p.w-new{color:#a4691c;font-weight:600} .inbox-page .recap p.w-done{color:var(--accent-ink);font-weight:600} /* ── Bloc triage IA : céramique sombre, distincte ── */ .inbox-page .triage{margin:0 0 22px;border-radius:20px;padding:20px 24px 18px;color:rgba(255,255,255,.82); background:linear-gradient(155deg,#155054,#0e393c); box-shadow:10px 16px 36px rgba(10,45,48,.28), inset 0 1px 0 rgba(255,255,255,.12)} .inbox-page .triage header{display:flex;align-items:center;gap:10px;margin-bottom:16px} .inbox-page .triage header svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .inbox-page .triage header b{font-family:'Clash Display';font-size:11px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--accent)} .inbox-page .tri-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .inbox-page .tri-grid>div{padding:11px 14px;border-radius:13px;background:rgba(255,255,255,.05); box-shadow:inset 2px 3px 7px rgba(0,0,0,.28), inset -1px -1px 3px rgba(255,255,255,.07)} .inbox-page .tri-grid span{display:block;font-family:'Spline Sans Mono';font-size:9px;letter-spacing:.12em; text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:6px} .inbox-page .tri-grid b{font-size:13px;font-weight:700;color:#fff} .inbox-page .tri-grid b.hi{color:var(--warn)} .inbox-page .tri-grid b.ac{color:var(--accent)} .inbox-page .tri-cause{font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.78);margin-top:16px} .inbox-page .tri-cause b{color:#fff;font-weight:700} /* ── Cadrage : verdict forfait/devis dans le fil du ticket ── Trois tons : compris (vert), devis à préparer (accent), à trancher (jaune). Pas un bloc criant : c'est une décision RENDUE, pas un appel à l'action. */ .inbox-page .scoping{margin:0 0 22px;padding:14px 18px;border-radius:18px; background:var(--surface);box-shadow:var(--carve);border-left:3px solid var(--ink-3)} .inbox-page .scoping.s-included{border-color:#00c583} .inbox-page .scoping.s-uncertain{border-color:var(--warn)} .inbox-page .scoping header{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px} .inbox-page .scoping header b{font-size:12.5px;font-weight:700;color:var(--ink)} .inbox-page .scoping p{font-size:12px;color:var(--ink-2);line-height:1.5;margin:0} .inbox-page .scoping .mono{margin-top:8px;font-family:'Spline Sans Mono';font-size:10px; color:var(--ink-3);letter-spacing:.02em} /* ── Double validation : lecture seule ── */ .inbox-page .valid{margin-bottom:22px;padding:14px 18px;border-radius:18px;background:var(--surface);box-shadow:var(--carve)} .inbox-page .valid>span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-3);margin-bottom:10px} .inbox-page .valid .v{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-2);padding:3px 0} .inbox-page .valid .v i{width:6px;height:6px;border-radius:50%;flex:none;background:var(--warn)} .inbox-page .valid .v.ok{color:var(--accent-ink)} .inbox-page .valid .v.ok i{background:#00d68c;box-shadow:0 0 8px rgba(0,230,150,.5)} /* ── Messages ── */ .inbox-page .msg{display:flex;gap:14px;margin-bottom:22px} .inbox-page .mav{width:38px;height:38px;flex:none;border-radius:14px;display:grid;place-items:center; color:var(--ink-2);font-weight:700;font-size:12px;letter-spacing:.02em; background:var(--posed);box-shadow:var(--raise-sm)} .inbox-page .mav.ia{background:linear-gradient(155deg,#155054,#0e393c); box-shadow:5px 8px 20px rgba(10,45,48,.25), inset 0 1px 0 rgba(255,255,255,.14)} .inbox-page .mav.ia::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent); box-shadow:0 0 12px 2px rgba(0,255,167,.5)} .inbox-page .mbody{min-width:0;flex:1} .inbox-page .mh{display:flex;align-items:baseline;gap:9px;margin-bottom:8px;flex-wrap:wrap} .inbox-page .mh b{font-size:13px;font-weight:700} .inbox-page .mh .who{font-size:11.5px;color:var(--ink-2)} .inbox-page .mh .via{font-size:10.5px;color:var(--ink-3)} .inbox-page .mh .mt{margin-left:auto;font-size:10px;color:var(--ink-3)} .inbox-page .bubble{border-radius:18px;padding:16px 20px;font-size:13px;line-height:1.6;color:var(--ink); background:var(--posed);box-shadow:var(--raise-sm)} .inbox-page .bubble p + p{margin-top:10px} /* note interne : gravée, jamais envoyée au client */ .inbox-page .msg.note .mav{color:var(--ink-3);background:var(--surface);box-shadow:var(--carve)} .inbox-page .bubble.noteb{background:var(--surface);box-shadow:var(--carve);color:var(--ink-2); border-left:3px solid rgba(227,160,42,.5)} .inbox-page .pill{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; padding:3px 10px;border-radius:999px} .inbox-page .pill.wait{color:#a4691c;background:rgba(227,160,42,.14)} .inbox-page .pill.ok{color:var(--accent-ink);background:rgba(0,214,140,.14)} /* ── Actions sur le ticket ── */ .inbox-page .th-actions{flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:14px 28px 0} .inbox-page .btn{display:flex;align-items:center;gap:8px;padding:10px 18px;border:0;cursor:pointer; font-family:inherit;font-size:12.5px;font-weight:700;color:var(--ink-2); border-radius:999px;background:var(--posed);box-shadow:var(--raise-sm); transition:transform .25s, box-shadow .3s, color .25s} .inbox-page .btn:hover{transform:translateY(-1px);box-shadow:var(--raise);color:var(--accent-ink)} .inbox-page .btn:active{transform:none;box-shadow:var(--carve)} .inbox-page .st-select{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)} .inbox-page .st-select select{font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2); border:0;outline:none;cursor:pointer;padding:9px 14px;border-radius:999px; background:var(--surface);box-shadow:var(--carve);letter-spacing:0;text-transform:none} /* ── Composer : champ gravé ── */ .inbox-page .composer{flex:none;display:flex;align-items:flex-end;gap:12px;padding:16px 28px 26px;position:relative} .inbox-page .composer::before{content:"";position:absolute;left:22px;right:22px;top:4px;height:1.5px;border-radius:2px; background:linear-gradient(180deg, rgba(28,39,64,.06), rgba(255,255,255,.9))} .inbox-page .c-field{flex:1;display:flex;align-items:flex-end;gap:10px;min-width:0; background:var(--surface);border-radius:19px;padding:13px 16px;box-shadow:var(--carve); transition:box-shadow .3s} .inbox-page .c-field:focus-within{box-shadow:var(--carve), 0 0 0 4px rgba(0,214,140,.08)} .inbox-page .c-field textarea{flex:1;border:0;background:transparent;resize:none;outline:none;min-width:0; font-family:inherit;font-size:13px;line-height:1.5;color:var(--ink);height:44px;max-height:120px} .inbox-page .c-field textarea::placeholder{color:var(--ink-3)} .inbox-page .c-tool{flex:none;width:30px;height:30px;border:0;border-radius:50%;display:grid;place-items:center; cursor:pointer;color:var(--ink-3);background:transparent;transition:color .25s, box-shadow .3s} .inbox-page .c-tool svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .inbox-page .c-tool:hover{color:var(--ink-2)} .inbox-page .c-tool.on{color:#a4691c;box-shadow:var(--carve)} /* Le bouton porte un LIBELLÉ (« Enregistrer sur le fil ») tant que l'envoi réel au client n'existe pas : un pictogramme d'avion sans envoi apprend à cliquer sans lire. Forme pilulaire, pas circulaire — pour dire du texte. */ .inbox-page .c-send{flex:none;height:44px;padding:0 18px;border:0;border-radius:999px;cursor:pointer; display:inline-flex;align-items:center;gap:9px;color:var(--accent); background:linear-gradient(155deg,#155054,#0e393c); box-shadow:6px 10px 24px rgba(10,45,48,.28), inset 0 1px 0 rgba(255,255,255,.12); transition:transform .25s, box-shadow .3s; font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.01em} .inbox-page .c-send svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none} .inbox-page .c-send:hover{transform:translateY(-2px)} .inbox-page .c-send:active{transform:none;box-shadow:inset 4px 4px 11px rgba(0,0,0,.4)} .inbox-page .c-send:disabled{opacity:.6;cursor:wait;transform:none} .inbox-page .c-note{position:absolute;right:34px;bottom:8px;font-family:'Spline Sans Mono';font-size:9px;color:var(--ink-3);opacity:.8} .inbox-page .c-err{position:absolute;left:34px;bottom:8px;font-size:10.5px;font-weight:600;color:#c13a54} /* ── Responsive ── */ @media (max-width:1240px){ .inbox-page .inbox{grid-template-columns:300px minmax(0,1fr)} .inbox-page .tri-grid{grid-template-columns:repeat(2,1fr)} .inbox-page .recap{grid-template-columns:1fr} .inbox-page .th-meta .hide-md{display:none} } @media (max-width:1000px){ .inbox-page{height:auto} .inbox-page .inbox{grid-template-columns:1fr} .inbox-page .queue{max-height:340px} .inbox-page .thread{min-height:70vh} } /* ═══════════════════════════════════════════════════════════════════════ Fiche site (écran Sites\Show) — cible visuelle : design/propositions/screens/fiche-site.html ═══════════════════════════════════════════════════════════════════════ */ /* ── Entête identité ── */ .site-top{align-items:center;gap:22px;margin-bottom:34px} .back{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center; text-decoration:none;color:var(--ink-2);font-size:15px; background:var(--posed);box-shadow:var(--raise-sm); transition:transform .25s, box-shadow .3s, color .25s} .back:hover{transform:translateX(-2px);color:var(--accent-ink);box-shadow:var(--raise)} .back:active{transform:none;box-shadow:var(--carve)} .fav-xl{width:56px;height:56px;flex:none;border-radius:19px;display:grid;place-items:center; color:var(--ink-2);font-weight:600;font-size:17px;letter-spacing:.02em; background:var(--posed);box-shadow:var(--raise)} .site-title{min-width:0} .site-title h1{line-height:1} .site-sub{margin-top:7px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .site-sub a{color:var(--ink-2);font-weight:600;text-decoration:none;transition:color .25s} .site-sub a:hover{color:var(--accent-ink)} .site-sub .sep{width:3px;height:3px;border-radius:50%;background:var(--ink-3);opacity:.6} .badges{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin-left:6px} .brow{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .brow:empty{display:none} .bdg{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px; font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2); background:var(--posed);box-shadow:var(--raise-sm); transition:transform .25s, box-shadow .3s;cursor:default;white-space:nowrap} .bdg:hover{transform:translateY(-1px);box-shadow:var(--raise)} .bdg i{width:5px;height:5px;border-radius:50%;flex:none;background:var(--ink-3)} .bdg.ssh i{background:#00c583;box-shadow:0 0 7px rgba(0,197,131,.55)} /* forfaits : gravés, encre accent — l'état, pas l'objet */ .bdg.plan{background:var(--surface);box-shadow:var(--carve);color:var(--accent-ink)} .bdg.plan i{background:#00c583} .bdg.ro{background:var(--surface);box-shadow:var(--carve);color:#a9741e} .bdg.ro i{background:var(--warn)} .top-actions{margin-left:auto;display:flex;align-items:center;gap:12px;flex:none} /* La fiche d'un site empile ses gestes sur DEUX lignes — quatre libellés en file mangeaient la largeur du titre (Raphaël, 03/08). Scopé à `.site-top` : les autres écrans qui portent `.top-actions` (ajout, gestion, accès) gardent leur rangée unique. */ .site-top .top-actions{flex-direction:column;align-items:flex-end;gap:8px} .site-top .ta-row{display:flex;align-items:center;gap:8px} /* Icône seule : carré, sans écart interne pour le libellé absent. Son nom vit dans `aria-label` + `title` — une icône muette n'est pas un bouton. */ .btn.ico{padding:0;width:38px;height:38px;justify-content:center;gap:0} /* border/font-family/cursor ne sont PAS décoratifs ici : sans eux, un