/* ═══════════════════════════════════════════════════════════════════ CENTRE DE PILOTAGE SUPER ADMIN — la feuille de style du lot porté. PROVENANCE. Ces règles viennent telles quelles de `styles.css` de l'application Étudiante (blocs « SUPER ADMIN · ANALYTICS », « CENTRE DE PILOTAGE », « PORTE DU CENTRE DE PILOTAGE », et la queue de fichier : comptes, « Les espaces », « À faire », spotlight). Elles n'ont pas été retouchées : le kit est le même dans les deux applications, les mêmes variables y sont définies — y compris les alias `--orange-*`, que ce code utilise. ⚠️ NE RIEN RÉÉCRIRE ICI SANS LE REPORTER LÀ-BAS tant que l'espace admin n'a pas été retiré de l'application Étudiante : deux copies qui divergent au premier correctif, c'est exactement ce que la passation demande d'éviter. Aucun sélecteur de ce fichier n'existe ailleurs dans l'application interne : préfixes `.sa-`, `.spot-`, `.u-*`, `.auth-super`, `.pi-*`. Vérifié avant l'ajout, zéro collision avec `fasup-ui.css` et `app.css`. ═══════════════════════════════════════════════════════════════════ */ /* ═══════════ SUPER ADMIN · ANALYTICS ═══════════ Mêmes fondations que le reste (cartes, couleurs, arrondis), version plus sobre : de grands chiffres et de l'air. La coquille a SES classes : la barre latérale étudiante existe en plusieurs variantes (rail d'icônes, barre horizontale…) pilotées par body[data-menu], et la première version de l'admin, bâtie dessus, éclatait selon la variante mémorisée. Ici, rien de partagé avec le menu étudiant : la mise en page ne dépend d'aucun réglage. */ .sa-side{width:232px;flex:none;background:var(--surface);border-right:1px solid var(--border); display:flex;flex-direction:column;position:sticky;top:0;height:100vh; padding:16px 12px 12px;gap:2px;z-index:50} .sa-logo{padding:2px 8px 14px} .sa-logo .brand{cursor:default} .sa-sec{padding:8px 10px 6px;font-size:.66rem;font-weight:800;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-mute)} .sa-nav{display:flex;flex-direction:column;gap:2px} .sa-item{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px; border:none;background:none;border-radius:12px;font-family:inherit; font-size:.87rem;font-weight:600;color:var(--ink-soft);cursor:pointer; text-align:left;transition:background .15s,color .15s;white-space:nowrap} .sa-item svg{width:18px;height:18px;flex:none} .sa-item:hover{background:var(--bg-2);color:var(--ink)} .sa-item.on{background:var(--orange-50);color:var(--ink);font-weight:700} .sa-item.on svg{color:var(--orange-700)} .sa-foot{margin-top:auto;border-top:1px solid var(--border);padding-top:10px} .sa-top{display:flex;align-items:center;gap:12px;padding:14px 24px} /* Quand la fenêtre fait à peine plus que la largeur maximale du contenu, le centrage ne laissait que quelques pixels : le contenu collait à la barre latérale. On garantit une vraie marge des deux côtés. */ .sa-app .page{padding:28px 44px 110px} @media(max-width:900px){ .sa-app .page{padding:20px 16px 60px} } /* Sous 900 px, la barre passe en bandeau horizontal qui défile : les sections restent toutes accessibles, les cartes s'empilent. */ @media(max-width:900px){ .sa-app{flex-direction:column} .sa-side{width:100%;height:auto;flex-direction:row;align-items:center; overflow-x:auto;border-right:0;border-bottom:1px solid var(--border); padding:8px 10px;gap:4px} .sa-side .sa-logo{display:none} .sa-side .sa-sec{display:none} .sa-nav{flex-direction:row;gap:4px} .sa-item{width:auto;flex:none;padding:8px 11px} .sa-item span{font-size:.8rem} .sa-foot{margin:0;border:0;padding:0} .sa-foot .sa-item span{display:none} } .sa-filtres{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:4px 0 22px} /* Les trois sélecteurs partagent la même silhouette : même hauteur, même respiration, même focus — l'œil ne doit voir qu'une seule barre. */ /* La flèche NATIVE du navigateur se plaque contre le bord droit et ne se règle pas. On la remplace par notre chevron, posé à 16 px du bord, avec l'espace qui va avec entre le texte et lui. La règle couvre TOUS les menus déroulants de l'espace admin, page Gestion comprise. */ .sa-app select{ appearance:none;-webkit-appearance:none;-moz-appearance:none; /* Centrage vertical RÉEL : le remplissage hérité de .input (11 px) poussait le texte sous le centre optique dès qu'une hauteur fixe s'ajoutait. Zéro remplissage vertical, interligne = hauteur utile : le texte est au milieu, partout, y compris sur Windows. */ height:42px;padding:0 44px 0 16px;line-height:39px;font-size:.86rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23291D13' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center;background-size:13px} .sa-sel{width:auto;min-width:158px;font-weight:600} /* Les champs de dates de la période personnalisée s'alignent sur les sélecteurs qui les entourent. */ .sa-app input[type=date].sa-sel{height:42px;padding-top:0;padding-bottom:0} .sa-sel:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-50)} body[data-theme="dark"] .sa-app select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23EDE6DD' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")} .sa-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:14px;margin-bottom:18px} .sa-kpi{padding:18px 18px 16px;display:flex;flex-direction:column;gap:3px} .sa-chiffre{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;line-height:1.1} .sa-lib{font-size:.8rem;font-weight:700;color:var(--ink-soft);display:flex;gap:8px;align-items:center;flex-wrap:wrap} .sa-sous{font-size:.74rem;color:var(--ink-mute);line-height:1.4} .sa-delta{font-size:.7rem;font-weight:800;padding:2px 7px;border-radius:99px;background:var(--bg-2);color:var(--ink-soft)} .sa-delta.up{background:var(--ok-soft);color:var(--ok)} .sa-delta.down{background:var(--danger-soft);color:var(--danger)} .sa-carte{margin-bottom:18px;overflow-x:auto} /* un tableau large défile DANS sa carte, jamais la page */ .sa-carte h4{margin-bottom:12px} .sa-table{min-width:560px} .sa-deux{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px} .sa-svg{width:100%;height:150px;display:block} .sa-axe{display:flex;justify-content:space-between;font-size:.7rem;color:var(--ink-mute); font-weight:700;margin-top:4px} .sa-barres{display:flex;flex-direction:column;gap:9px} .sa-bl{display:flex;align-items:center;gap:10px} .sa-bl-nom{flex:0 0 118px;font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sa-bl-piste{flex:1;height:9px;border-radius:99px;background:var(--bg-2);overflow:hidden} .sa-bl-piste i{display:block;height:100%;background:var(--orange);border-radius:99px} .sa-bl-val{font-size:.8rem;min-width:44px;text-align:right} .sa-bl-part{color:var(--ink-mute);min-width:36px;text-align:right} .sa-anneau{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center} .sa-anneau svg{width:118px;height:118px} .sa-anneau-txt{font-size:1.25rem;font-weight:800;fill:var(--ink)} .sa-funnel{display:flex;flex-direction:column;align-items:center;gap:2px} .sa-fu-etape{width:100%;display:flex;align-items:center;gap:10px;position:relative} /* La barre laisse TOUJOURS la place du chiffre et du libellé : à 100 % de large, elle poussait le texte hors de l'écran. */ .sa-fu-etape i{display:block;width:var(--l);min-width:14%;max-width:calc(100% - 210px); height:30px;border-radius:8px; background:linear-gradient(90deg,var(--orange),var(--orange-100));opacity:.85;flex:0 0 auto} .sa-fu-etape b{font-size:.88rem;flex:0 0 auto} .sa-fu-etape span{font-size:.78rem;color:var(--ink-soft);font-weight:600; flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sa-fu-taux{font-size:.72rem;font-weight:800;color:var(--orange-700);padding:2px 0} .sa-table{width:100%;border-collapse:collapse;font-size:.84rem} .sa-table th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em; color:var(--ink-mute);font-weight:800;padding:8px 10px;border-bottom:1.5px solid var(--border)} .sa-table td{padding:10px;border-bottom:1px solid var(--border)} .sa-table tbody tr:last-child td{border-bottom:0} .sa-cliquable tbody tr{cursor:pointer;transition:background .12s} .sa-cliquable tbody tr:hover{background:var(--orange-50)} .sa-lignes{display:flex;flex-direction:column} .sa-ligne{display:flex;justify-content:space-between;gap:12px;padding:8px 2px; border-bottom:1px solid var(--border);font-size:.85rem} .sa-ligne:last-child{border-bottom:0} .sa-ligne span{color:var(--ink-soft);font-weight:600} .sa-pagi{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px} .sa-vide{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 12px; color:var(--ink-mute);text-align:center;font-size:.84rem;font-weight:600} .sa-vide svg{width:26px;height:26px;opacity:.5} .sa-attente{display:flex;align-items:center;gap:8px;color:var(--ink-mute); font-size:.85rem;font-weight:600;padding:26px 12px;justify-content:center} .sa-timeline{display:flex;flex-direction:column;gap:7px} .sa-tl{display:flex;gap:10px;align-items:baseline;font-size:.83rem} .sa-tl small{flex:0 0 64px;color:var(--ink-mute);font-weight:700} @media(max-width:720px){ .sa-kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))} .sa-chiffre{font-size:1.5rem} .sa-bl-nom{flex-basis:88px} .sa-table{font-size:.76rem} } /* ═══════════════════════════════════════════════════════════════════ CENTRE DE PILOTAGE SUPER ADMIN — launcher, univers, « Voir comme » Aucune couleur en dur hors des trois teintes d'univers : tout dérive des variables du thème, donc le mode sombre suit sans réglage. ═══════════════════════════════════════════════════════════════════ */ /* Les trois univers ne changent pas de charte, seulement d'accent. */ .u-mentoria{--ux:var(--orange)} .u-entreprises{--ux:#3B6FE0} .u-interne{--ux:#7A8B3F} /* ─── Le launcher occupe tout : ni menu, ni barre ─── */ .sa-app.sa-launcher-mode .sa-side, .sa-app.sa-launcher-mode .sa-top{display:none} .sa-app.sa-launcher-mode .page{padding:0} .sa-lx{max-width:1180px;margin:0 auto;padding:46px 34px 90px} .sa-lx-tete{margin-bottom:26px} .sa-lx-oeil{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:800; letter-spacing:.09em;text-transform:uppercase;color:var(--orange); background:var(--orange-50);padding:6px 12px;border-radius:999px} .sa-lx-oeil .ico{width:14px;height:14px} .sa-lx-tete h1{font-size:2.1rem;font-weight:800;margin:14px 0 6px;letter-spacing:-.02em} .sa-lx-tete p{color:var(--ink-soft);font-size:.95rem} /* « Aujourd'hui sur FASUP' » : la vie du réseau, en une bande sombre. */ .sa-lx-jour{background:var(--always-dark);color:#F7F6F5;border-radius:18px; padding:18px 24px;margin-bottom:26px} .sa-lx-jour>b{display:flex;align-items:center;gap:8px;font-size:.74rem;font-weight:800; letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin-bottom:12px} .sa-lx-jour>b .ico{width:15px;height:15px} .sa-lx-jour-l{display:flex;flex-wrap:wrap;gap:10px 30px} .sa-lx-jour-l span{font-size:.82rem;color:#CBBFB2;display:flex;align-items:baseline;gap:7px} .sa-lx-jour-l i{font-style:normal;font-size:1.32rem;font-weight:800;color:#fff} /* ─── Les trois cartes ─── */ .sa-lx-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:20px} .sa-lx-carte{position:relative;overflow:hidden;text-align:left;cursor:pointer; background:var(--surface);border:1px solid var(--border);border-radius:22px; padding:0;display:flex;flex-direction:column; transition:transform .28s ease,box-shadow .28s ease,border-color .28s} .sa-lx-carte:hover,.sa-lx-carte:focus-visible{transform:translateY(-6px); border-color:var(--ux);box-shadow:0 18px 40px -18px color-mix(in srgb,var(--ux) 55%,transparent);outline:none} /* Le halo ne se révèle qu'au survol : au repos, la page reste calme. */ .sa-lx-glow{position:absolute;inset:-40% -30% auto;height:190px;pointer-events:none; background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--ux) 26%,transparent),transparent 70%); opacity:0;transition:opacity .3s} .sa-lx-carte:hover .sa-lx-glow,.sa-lx-carte:focus-visible .sa-lx-glow{opacity:1} /* ⚠️ Cette regle remettait AUSSI .sa-lx-glow en position:relative — meme specificite, declaree apres — et le halo, cesse d'etre hors flux, occupait 190 px de vide en tete de CHAQUE carte. Le :not() l'exclut. */ .sa-lx-carte>*:not(.sa-lx-glow){position:relative} .sa-lx-carte header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px} .sa-lx-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center; background:color-mix(in srgb,var(--ux) 14%,transparent);color:var(--ux)} .sa-lx-ico .ico{width:22px;height:22px} .sa-lx-etat{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700; color:var(--ink-soft);background:var(--bg-2);padding:5px 10px;border-radius:999px} .sa-lx-etat i{width:7px;height:7px;border-radius:50%;background:var(--ink-mute)} .sa-lx-etat.ok i{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)} .sa-lx-etat.calme i{background:var(--warn)} .sa-lx-carte h2{font-size:1.32rem;font-weight:800;letter-spacing:-.01em;margin:0} .sa-lx-sous{font-size:.78rem;font-weight:700;color:var(--ux);margin:2px 0 10px} .sa-lx-phrase{font-size:.85rem;color:var(--ink-soft);line-height:1.55;margin-bottom:18px;min-height:2.6em} .sa-lx-kpis{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 12px; margin:0 0 18px;padding:16px 0 0;border-top:1px solid var(--border)} .sa-lx-kpis b{display:block;font-size:1.42rem;font-weight:800;line-height:1.1;letter-spacing:-.02em} .sa-lx-kpis span{font-size:.72rem;color:var(--ink-soft);line-height:1.35;display:block;margin-top:3px} .sa-lx-carte footer{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px} .sa-lx-maj{font-size:.7rem;color:var(--ink-mute)} .sa-lx-cta{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--ux)} .sa-lx-cta .ico{width:15px;height:15px;transition:transform .25s} .sa-lx-carte:hover .sa-lx-cta .ico{transform:translateX(4px)} /* ─── Dans un univers : retour, étiquette, contexte ─── */ .sa-retour{display:flex;align-items:center;gap:9px;width:100%;margin:0 0 4px;padding:9px 12px; border:0;background:transparent;color:var(--ink-soft);font:inherit;font-size:.82rem; font-weight:600;border-radius:11px;cursor:pointer;transition:background .2s,color .2s} .sa-retour:hover{background:var(--bg-2);color:var(--ink)} .sa-retour .ico{width:16px;height:16px} .sa-univers-tag{display:flex;align-items:center;gap:8px;margin:6px 0 14px;padding:10px 12px; border-radius:12px;font-size:.84rem;font-weight:800;color:var(--ux); background:color-mix(in srgb,var(--ux) 12%,transparent)} .sa-univers-tag .ico{width:17px;height:17px} .sa-top-retour{display:grid;place-items:center;width:34px;height:34px;flex:none;margin-right:4px; border:1px solid var(--border);border-radius:10px;background:var(--surface); color:var(--ink-soft);cursor:pointer;transition:background .2s,color .2s} .sa-top-retour:hover{background:var(--bg-2);color:var(--ink)} .sa-top-retour .ico{width:16px;height:16px} .sa-contexte{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700; color:var(--orange);background:var(--orange-50);padding:6px 8px 6px 10px;border-radius:999px} .sa-contexte .ico{width:14px;height:14px} .sa-contexte button{border:0;background:transparent;color:inherit;cursor:pointer; font-size:.9rem;line-height:1;padding:0 2px;opacity:.65} .sa-contexte button:hover{opacity:1} .sa-sel-top{height:36px;max-width:190px} /* ─── « Voir comme » ─── */ .sa-avert{display:flex;gap:14px;align-items:flex-start; border-left:3px solid var(--orange);background:var(--orange-50)} .sa-avert>.ico{width:22px;height:22px;color:var(--orange);flex:none;margin-top:2px} .sa-avert p{margin-top:4px;max-width:78ch} .sa-vis-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px} .sa-vis-carte{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left; padding:18px;border:1px solid var(--border);border-radius:16px;background:var(--surface); cursor:pointer;font:inherit;transition:transform .2s,border-color .2s,box-shadow .2s} .sa-vis-carte:hover{transform:translateY(-3px);border-color:var(--orange); box-shadow:0 12px 26px -16px rgba(41,29,19,.4)} .sa-vis-ini{width:42px;height:42px;border-radius:12px;display:grid;place-items:center; background:var(--always-dark);color:#fff;font-weight:800;font-size:.9rem;margin-bottom:8px} .sa-vis-carte b{font-size:.93rem;font-weight:700} .sa-vis-fn{font-size:.76rem;color:var(--ink-soft)} .sa-vis-cp{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;color:var(--ink-mute);margin-top:2px} .sa-vis-cp .ico{width:12px;height:12px} .sa-vis-cta{display:inline-flex;align-items:center;gap:6px;margin-top:12px; font-size:.76rem;font-weight:700;color:var(--orange)} .sa-vis-cta .ico{width:14px;height:14px} /* Le bandeau colle en haut de la page et ne peut pas être manqué. */ .sa-bandeau{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px; flex-wrap:wrap;margin:-4px 0 22px;padding:13px 18px;border-radius:14px; background:var(--always-dark);color:#F7F6F5;font-size:.85rem; box-shadow:0 10px 26px -14px rgba(41,29,19,.55)} .sa-bandeau>.ico{width:19px;height:19px;color:var(--orange);flex:none} .sa-bandeau span:first-of-type{flex:1;min-width:230px;line-height:1.45} .sa-bandeau b{color:#fff} .sa-bandeau-lec{font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase; color:var(--orange);background:rgba(245,157,0,.16);padding:5px 10px;border-radius:999px} .sa-bandeau .btn{background:#fff;color:var(--always-dark);border:0;font-weight:700} .sa-bandeau .btn:hover{background:var(--orange)} @media(max-width:860px){ .sa-lx{padding:30px 18px 70px} .sa-lx-tete h1{font-size:1.6rem} .sa-lx-kpis{grid-template-columns:1fr 1fr} .sa-sel-top{max-width:140px} } /* ═══════════════════════════════════════════════════════════════════ PORTE DU CENTRE DE PILOTAGE ⚠️ La plaque .auth-super est la SEULE chose qui distingue cette porte de la connexion étudiante. La retirer « pour alléger » rend les deux écrans indiscernables. Test de relecture : en niveaux de gris, en vignette, sans lire les textes, les deux portes doivent rester distinctes. C'est une différence de VALEUR, pas de teinte, donc elle tient aussi en vision daltonienne. ⚠️ Ne jamais repeindre le fond .auth depuis ce bloc : la règle body[data-theme="dark"] .auth a une spécificité qu'une simple classe ne bat pas. ═══════════════════════════════════════════════════════════════════ */ /* La plaque encre. Fond var(--always-dark) et JAMAIS var(--ink) : --ink devient clair en thème sombre, la bande passerait en crème sur crème et la seule marque de l'écran disparaîtrait. Le liseré orange n'est pas une coquetterie : en sombre, le fond de page et la plaque sont deux bruns voisins, elle s'y dissoudrait sans lui. */ .auth-super{display:flex;align-items:center;flex-wrap:wrap;gap:4px 9px; width:100%;margin:0 0 22px;padding:11px 16px;border-radius:14px; background:var(--always-dark);border:1px solid rgba(245,157,0,.30); box-shadow:var(--sh-sm)} /* Le bouclier, ramené de 18px (.ico global) à la taille des bandes encre existantes du launcher. */ .auth-super .ico{width:15px;height:15px;color:var(--orange)} /* Mêmes valeurs que .sa-lx-oeil et .sa-bandeau-lec : la plaque appartient visiblement à la même famille que le launcher. */ .auth-super b{font-size:.72rem;font-weight:800;letter-spacing:.09em; text-transform:uppercase;color:var(--orange)} /* #CBBFB2 est déjà la teinte de texte secondaire sur fond encre du projet (.sa-lx-jour-l). Aucune couleur nouvelle n'entre ici. */ .auth-super small{margin-left:auto;font-size:.7rem;font-weight:600;color:#CBBFB2} /* Zone d'erreur DÉCLARÉE dans le gabarit : afficherErreurAuth() la trouve et se contente de la remplir, donc elle ne pose PAS son style.cssText en ligne et cette classe suffit. Sans le div statique, il faudrait un !important. */ .auth-err{margin:2px 0 14px;padding:10px 13px;border-radius:9px; background:var(--danger-soft);color:var(--danger);font-size:.85rem;font-weight:600} /* Compte reconnu, mais sans accès au pilotage. AUCUNE couleur sémantique : ni rouge, ni orange. Ce n'est pas une faute, c'est une orientation, et l'information est dans les mots. */ .pi-refus{margin:2px 0 16px;padding:14px 16px;border-radius:var(--r-md); background:var(--bg-2);border:1px solid var(--border-2)} .pi-refus p{font-size:.82rem;line-height:1.55;color:var(--ink-2)} .pi-refus p+p{margin-top:8px} .pi-refus .btn{margin-top:12px} /* La phrase de vérité. var(--ink-soft) et JAMAIS var(--ink-mute) : ce dernier tombe sous le seuil de contraste sur le fond crème. */ .pi-note{margin-top:14px;text-align:center;font-size:.72rem; line-height:1.5;color:var(--ink-soft)} /* ─── La bande illustrée des cartes du launcher ─── Les illustrations viennent de bannieres/, déjà dans le projet : aucune image nouvelle, aucun appel réseau, et chacune montre le métier de son univers (l'étudiante à la bibliothèque, le bureau, le tableau). Elles sont claires et chaudes dans les deux thèmes : ce sont des images, elles ne s'inversent pas, et c'est voulu. */ .sa-lx-media{position:relative;height:132px;flex:none;overflow:hidden; border-radius:21px 21px 0 0;background:var(--bg-2)} /* Le sujet est dessiné dans le tiers gauche des illustrations : on cadre dessus plutôt qu'au centre, sinon la carte n'affiche qu'un mur vide. */ .sa-lx-media img{width:100%;height:100%;object-fit:cover;object-position:12% 38%; display:block;transition:transform .5s var(--ease,ease)} .sa-lx-carte:hover .sa-lx-media img{transform:scale(1.045)} /* Un voile depuis le bas : il raccroche l'image à la carte et garantit que le médaillon reste lisible quel que soit le dessin dessous. */ .sa-lx-media::after{content:"";position:absolute;inset:auto 0 0;height:56%; background:linear-gradient(to top,var(--surface),transparent);pointer-events:none} .sa-lx-media.sans-image img{display:none} /* L'état passe SUR l'image : fond opaque, jamais une variable de thème — il doit rester lisible sur un dessin, pas sur une surface connue. */ .sa-lx-media .sa-lx-etat{position:absolute;top:12px;right:12px;z-index:2; background:rgba(255,255,255,.94);color:#4A3F35; box-shadow:0 2px 8px rgba(41,29,19,.18)} /* Le médaillon chevauche la bande, comme un avatar sur une bannière : c'est lui qui donne la profondeur, et il garde l'accent de l'univers. */ .sa-lx-media .sa-lx-ico{position:absolute;left:22px;bottom:-23px;z-index:2; width:52px;height:52px;border-radius:16px; background:var(--surface);color:var(--ux); border:1px solid var(--border);box-shadow:0 6px 16px -6px rgba(41,29,19,.35)} .sa-lx-media .sa-lx-ico .ico{width:23px;height:23px} /* Le corps reprend le padding que la carte a perdu, plus la place du médaillon qui déborde. */ .sa-lx-corps{display:flex;flex-direction:column;flex:1;padding:34px 24px 20px} @media(max-width:860px){ .sa-lx-media{height:112px} .sa-lx-corps{padding:32px 18px 18px} } /* ─── COMPTES DES ÉQUIPES ─── Le formulaire de création, et le bloc qui montre un mot de passe UNE SEULE FOIS. */ .sa-cpt-form{display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:12px;align-items:end} .sa-cpt-form .field{margin:0} .sa-cpt-form .btn{height:42px;white-space:nowrap} @media(max-width:820px){ .sa-cpt-form{grid-template-columns:1fr} } .sa-cpt-id{font-size:.78rem;color:var(--ink-2);word-break:break-all} /* ⚠️ Surface volontairement foncée : var(--always-dark) et JAMAIS var(--ink), qui s'éclaircit quand la palette s'inverse — le bloc le plus important de l'écran deviendrait crème sur crème. */ .sa-cpt-secret{background:var(--always-dark);border:1px solid rgba(245,157,0,.34); margin-bottom:18px;padding:20px 22px} .sa-cpt-secret-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px} .sa-cpt-secret-h b{color:var(--orange);font-size:1rem} .sa-cpt-secret-h span{color:#CBBFB2;font-size:.84rem} .sa-cpt-avert{color:#F1E4D2;font-size:.84rem;line-height:1.55;margin:0 0 16px} .sa-cpt-champ{display:flex;align-items:center;gap:12px;flex-wrap:wrap; background:rgba(255,255,255,.06);border-radius:11px;padding:11px 14px;margin-bottom:10px} .sa-cpt-champ>span{color:#CBBFB2;font-size:.74rem;font-weight:700; text-transform:uppercase;letter-spacing:.07em;min-width:96px} .sa-cpt-champ code{flex:1;color:#FFF;font-size:.95rem;word-break:break-all; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} .sa-cpt-champ .sa-cpt-mdp{font-size:1.12rem;letter-spacing:.04em;font-weight:600} .sa-cpt-champ .btn{flex:none;border-color:rgba(255,255,255,.32);color:#FFF;background:transparent} .sa-cpt-champ .btn:hover{background:rgba(255,255,255,.12)} .sa-cpt-pied{color:#CBBFB2;font-size:.78rem;line-height:1.5;margin:12px 0 0} /* ─── « VOIR COMME » : LE CHOIX DU CAMPUS, PUIS DE LA PERSONNE ─── Deux niveaux parce que le reseau ira vers la centaine de comptes : une liste plate de cent visages ne se lit pas. */ .sa-vis-campus{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:12px} .sa-vis-cp-carte{position:relative;text-align:left;display:flex;flex-direction:column;gap:3px; padding:16px 18px;border-radius:var(--r-md);background:var(--surface); border:1px solid var(--border);box-shadow:var(--sh-sm);cursor:pointer; transition:transform .16s var(--ease,ease),border-color .16s,box-shadow .16s} .sa-vis-cp-carte:hover:not(.off){transform:translateY(-2px);border-color:var(--orange); box-shadow:0 10px 24px -14px rgba(41,29,19,.42)} .sa-vis-cp-carte.off{cursor:default;opacity:.62} .sa-vis-cp-nom{display:flex;align-items:center;gap:6px;font-weight:800;font-size:.92rem;color:var(--ink)} .sa-vis-cp-nom .ico{width:15px;height:15px;color:var(--orange)} /* Le nombre de comptes se lit en un coup d'oeil : c'est lui qu'on compare d'un campus a l'autre. */ .sa-vis-cp-n{position:absolute;top:14px;right:18px;font-size:1.34rem;color:var(--orange);line-height:1} .sa-vis-cp-det{font-size:.78rem;color:var(--ink-2)} /* Jamais connecte : une alerte douce, sans couleur d'erreur — ce n'est pas une faute, c'est un compte a remettre en main propre. */ .sa-vis-cp-jamais{margin-top:4px;font-size:.72rem;font-weight:700;color:var(--warn)} .sa-vis-groupe{margin:20px 0 10px;font-size:.74rem;font-weight:800;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-soft)} .sa-vis-groupe:first-child{margin-top:0} .sa-vis-aucun{padding:18px 20px} .sa-vis-aucun .btn{margin-top:12px} /* ─── LA TO-DO DES CAMPUS ─── Une carte par campus, du plus charge au plus a jour. Le retard est la seule chose en rouge : tout n'est pas urgent, et un ecran tout rouge n'alerte plus personne. */ .sa-todo-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px} .sa-todo-carte{background:var(--surface);border:1px solid var(--border); border-radius:var(--r-md);box-shadow:var(--sh-sm);padding:14px 16px} .sa-todo-carte.en-retard{border-color:color-mix(in srgb,var(--danger) 45%,var(--border))} .sa-todo-carte.ok{opacity:.78} .sa-todo-carte header{display:flex;align-items:center;justify-content:space-between; gap:8px;margin-bottom:9px} .sa-todo-carte header b{font-size:.95rem} .sa-todo-item{display:flex;align-items:flex-start;gap:7px;padding:4px 0; font-size:.8rem;line-height:1.45;color:var(--ink-2)} .sa-todo-item .ico{width:13px;height:13px;flex:none;margin-top:2px;color:var(--ink-mute)} .sa-todo-item b{margin-left:auto;color:var(--ink);font-size:.8rem} .sa-todo-item.retard{color:var(--danger);font-weight:600} .sa-todo-item.retard .ico{color:var(--danger)} .sa-todo-item.ok{color:var(--ok)} .sa-todo-item.ok .ico{color:var(--ok)} /* ─── SPOTLIGHT : L'INDICATEUR, CÔTÉ OBSERVÉ ─── Discret et permanent tant que quelqu'un regarde. La personne n'a rien à autoriser, mais elle n'est jamais observée à son insu. ⚠️ var(--always-dark) et non var(--ink) : en thème sombre, --ink s'éclaircit et la pastille deviendrait crème sur crème. */ .spot-indic{position:fixed;left:16px;bottom:16px;z-index:60; display:flex;align-items:center;gap:8px; padding:8px 14px;border-radius:999px; background:var(--always-dark);color:#F1E4D2; font-size:.78rem;font-weight:600; border:1px solid rgba(245,157,0,.34); box-shadow:0 8px 22px -10px rgba(41,29,19,.5); animation:spotEntree .3s var(--ease,ease)} @keyframes spotEntree{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .spot-pastille{width:7px;height:7px;border-radius:50%;background:var(--orange); flex:none;animation:spotBattement 1.8s ease-in-out infinite} @keyframes spotBattement{0%,100%{opacity:1}50%{opacity:.35}} @media(prefers-reduced-motion:reduce){ .spot-indic{animation:none} .spot-pastille{animation:none} } @media(max-width:720px){ .spot-indic{left:12px;bottom:76px;font-size:.74rem} } /* ─── LES ESPACES : l'état de présence sur la carte d'une personne ─── Trois états et non deux : connecté, hors ligne, et « non publié » — ce dernier pour une application qui n'émet pas encore sa présence. Afficher « hors ligne » à sa place serait un mensonge silencieux. */ .sa-vis-live{display:inline-flex;align-items:center;gap:6px;margin-top:6px; font-size:.74rem;font-weight:700;color:var(--ok)} .sa-vis-live::before{content:"";width:6px;height:6px;border-radius:50%; background:var(--ok);animation:spotBattement 1.8s ease-in-out infinite} .sa-vis-etat{display:block;margin-top:6px;font-size:.73rem;color:var(--ink-soft)} .sa-vis-etat.muet{color:var(--ink-mute);font-style:italic} .sa-vis-carte.en-ligne{border-color:color-mix(in srgb,var(--ok) 45%,var(--border))} @media(prefers-reduced-motion:reduce){ .sa-vis-live::before{animation:none} } /* ─── TO-DO : cartes a jauge, detail en tiroir ─── La carte devient un bouton : tout son corps ouvre le detail. */ .sa-todo-carte{text-align:left;cursor:pointer;position:relative; transition:transform .16s var(--ease,ease),border-color .16s,box-shadow .16s} .sa-todo-carte:hover{transform:translateY(-2px);border-color:var(--orange); box-shadow:0 10px 24px -14px rgba(41,29,19,.42)} .sa-todo-carte.en-retard:hover{border-color:var(--danger)} .sa-todo-jauge{height:7px;border-radius:999px;background:var(--bg-2); overflow:hidden;margin:2px 0 7px} .sa-todo-jauge i{display:block;height:100%;border-radius:999px; background:linear-gradient(90deg,var(--orange),#FFB84D); transition:width .4s var(--ease,ease)} .sa-todo-carte.ok .sa-todo-jauge i{background:var(--ok)} .sa-todo-carte.en-retard .sa-todo-jauge i{background:var(--danger)} .sa-todo-jauge.grande{height:9px;margin:0 0 16px} .sa-todo-sous{display:flex;justify-content:space-between;align-items:baseline; font-size:.76rem;color:var(--ink-soft);margin-bottom:8px} .sa-todo-sous b{color:var(--ink);font-size:.85rem} .sa-todo-plus{font-size:.74rem;color:var(--ink-soft);padding:2px 0 0 20px} .sa-todo-cta{display:flex;align-items:center;gap:5px;margin-top:10px; font-size:.76rem;font-weight:700;color:var(--orange)} .sa-todo-cta .ico{width:13px;height:13px} /* Le detail : une ligne par tache, l'etat a droite, la preuve dessous. */ .sa-todo-detail{display:flex;flex-direction:column;gap:2px} .sa-todo-ligne{display:flex;align-items:flex-start;gap:10px; padding:9px 10px;border-radius:10px} .sa-todo-ligne:nth-child(odd){background:var(--bg-2)} .sa-todo-ligne .ico{width:15px;height:15px;flex:none;margin-top:2px} .sa-todo-ligne.fait .ico{color:var(--ok)} .sa-todo-ligne.retard .ico{color:var(--danger)} .sa-todo-ligne.a_faire .ico{color:var(--ink-mute)} .sa-todo-ligne>div{flex:1;min-width:0} .sa-todo-ligne b{display:block;font-size:.84rem} .sa-todo-ligne small{display:block;font-size:.76rem;color:var(--ink-soft);margin-top:1px} .sa-todo-ligne.retard b{color:var(--danger)} .sa-todo-etat{flex:none;font-size:.7rem;font-weight:800;letter-spacing:.05em; text-transform:uppercase;margin-top:3px;color:var(--ink-mute)} .sa-todo-ligne.fait .sa-todo-etat{color:var(--ok)} .sa-todo-ligne.retard .sa-todo-etat{color:var(--danger)} /* ─── ANALYTICS MENTORIA : la barre d'alternance et la carte cliquable ─── UNE visualisation pour l'alternance, pas quatre : une barre a trois segments. Le vert est le contrat, le reste est la nuance qui compte pour agir (a deja candidate, ou pas encore). */ .sa-alt-barre{display:flex;height:16px;border-radius:999px;overflow:hidden; background:var(--bg-2);margin:6px 0 14px} .sa-alt-barre i{display:block;height:100%} .sa-alt-barre .ok{background:var(--ok)} .sa-alt-barre .mi{background:var(--orange)} .sa-alt-barre .no{background:var(--ink-mute)} .sa-alt-leg{display:flex;flex-direction:column;gap:7px;font-size:.82rem;color:var(--ink-2)} .sa-alt-leg span{display:flex;align-items:center;gap:8px} .sa-alt-leg i{width:10px;height:10px;border-radius:3px;flex:none} .sa-alt-leg .ok{background:var(--ok)} .sa-alt-leg .mi{background:var(--orange)} .sa-alt-leg .no{background:var(--ink-mute)} .sa-alt-leg b{margin-left:auto;color:var(--ink)} /* La carte « A relancer » est un bouton : meme habit que ses voisines, plus le geste. */ .sa-kpi-btn{text-align:left;cursor:pointer; transition:transform .16s var(--ease,ease),border-color .16s} .sa-kpi-btn:hover{transform:translateY(-2px);border-color:var(--orange)} /* ═══════════════════════════════════════════════════════════════════ TROIS NOMS QUE LE KIT ÉCRIT AUTREMENT Le lot porté vient d'une application où le kit avait été recopié plus tôt : trois classes y portaient un autre nom. Plutôt que de retoucher 92 Ko d'écrans — et de rendre impossible toute resynchronisation avec la référence qui tourne —, on donne ici leur équivalent. Trois règles, et le lot reste lisible à l'identique des deux côtés. ═══════════════════════════════════════════════════════════════════ */ /* `.b-err` est le `.b-danger` du kit. */ .b-err{background:var(--danger-soft);color:var(--danger-ink)} /* Le kit s'arrête à `.h3` : `.h4` est le cran en dessous, même famille. */ .h4{font-size:.92rem;font-weight:700;letter-spacing:-.005em} /* Le chevron entre deux niveaux du fil d'Ariane. */ .tb-sep{color:var(--ink-mute);font-weight:400;opacity:.7} /* ═══════════════════════════════════════════════════════════════════ LES ÉCRANS AJOUTÉS POUR L'APPLICATION INTERNE (25/08/2026) To do list · suivi des étudiants · avancement · contrats. Rien ici ne vient de l'application Étudiante : ces sélecteurs lui sont inconnus, et ne partiront donc pas dans une resynchronisation. ═══════════════════════════════════════════════════════════════════ */ /* ── LE ROUGE, ET RIEN QUE POUR LE RETARD ── Un écran où tout est rouge n'alerte plus personne. Cette teinte est réservée à une seule chose : une échéance dépassée. */ .sa-rouge{color:var(--danger)} /* La ligne d'un campus ou d'un étudiant en retard. Un filet à gauche plutôt qu'un fond : la ligne se repère en balayant la colonne, sans que le tableau devienne illisible quand la moitié est en retard. Le fond très pâle suffit à la distinguer sans crier. */ .sa-table tr.sa-l-retard td{background:color-mix(in srgb,var(--danger) 5%,transparent)} .sa-table tr.sa-l-retard td:first-child{box-shadow:inset 3px 0 0 var(--danger)} /* ── LA SUITE DES RENCONTRES D'UN ÉTUDIANT ── */ .sa-rencontres{display:flex;flex-direction:column;gap:14px;margin-top:10px} .sa-renc{border:1px solid var(--border);border-radius:var(--r-md); background:var(--surface);padding:14px 16px} .sa-renc.en-retard{border-color:color-mix(in srgb,var(--danger) 45%,var(--border))} .sa-renc-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .sa-renc-h b{font-size:.92rem} .sa-renc-sous{font-size:.8rem;color:var(--ink-soft);margin-top:3px} .sa-renc p{margin-top:8px;line-height:1.55} .sa-renc-vide{display:flex;align-items:center;gap:7px;margin-top:10px} .sa-renc-vide .ico{width:14px;height:14px;flex:none} /* ── LE COMPTE RENDU, DÉPLIÉ ── On ne le résume pas : c'est pour le LIRE qu'on ouvre la fiche. Le fond creusé le détache du reste de la carte sans l'encadrer deux fois. */ .sa-cr{margin-top:12px;background:var(--bg-2);border-radius:var(--r-md);padding:14px 16px} .sa-cr-tete{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px} .sa-cr-tete b{font-size:.88rem} .sa-cr-tete span{font-size:.76rem;color:var(--ink-soft)} .sa-cr-sec{margin-top:14px} .sa-cr-sec>b{display:block;font-size:.74rem;font-weight:800;letter-spacing:.07em; text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px} .sa-cr-champ{padding:7px 0;border-top:1px solid var(--border)} .sa-cr-champ:first-of-type{border-top:0} .sa-cr-champ>span{display:block;font-size:.76rem;color:var(--ink-soft)} /* `pre-wrap` : une réponse écrite sur trois lignes en garde trois. */ .sa-cr-champ p{margin-top:2px;font-size:.85rem;line-height:1.55;white-space:pre-wrap} /* Ce qui ne sort pas du campus. Aucune couleur d'alerte : ce n'est pas une faute, c'est une règle — et le document le dit lui-même. */ .sa-cr-retenue{display:flex;gap:10px;margin-top:14px;padding-top:12px; border-top:1px solid var(--border)} .sa-cr-retenue .ico{width:15px;height:15px;flex:none;margin-top:2px;color:var(--ink-mute)} .sa-cr-retenue b{font-size:.8rem} .sa-cr-retenue p{color:var(--ink-soft);line-height:1.5;margin-top:3px} /* ── LES DEUX VUES D'UN MÊME ÉCRAN ── Un segmenté, posé à droite du titre : on ne change pas de page, on change de point de vue. */ .sa-onglets{display:flex;gap:2px;padding:3px;border-radius:var(--r-full); background:var(--bg-2);border:1px solid var(--border)} .sa-onglets button{display:flex;align-items:center;gap:6px; padding:7px 14px;border:0;border-radius:var(--r-full);background:none; font:inherit;font-size:.82rem;font-weight:600;color:var(--ink-soft); cursor:pointer;white-space:nowrap;transition:background .15s,color .15s} .sa-onglets button .ico{width:15px;height:15px} .sa-onglets button:hover{color:var(--ink)} .sa-onglets button.on{background:var(--surface);color:var(--ink);font-weight:700; box-shadow:var(--sh-sm)} /* ── PASSER D'UN CAMPUS À L'AUTRE ── Deux flèches et le nom entre les deux. Le clavier fait la même chose : c'est le geste naturel quand on parcourt dix-neuf campus à la suite. */ .sa-kb-nav{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap} .sa-kb-fleche{width:38px;height:38px;flex:none;border-radius:var(--r-md); display:flex;align-items:center;justify-content:center;cursor:pointer; background:var(--surface);border:1px solid var(--border);color:var(--ink-soft); transition:all .15s} .sa-kb-fleche:hover{color:var(--ink);border-color:var(--orange);box-shadow:var(--sh-sm)} .sa-kb-fleche .ico{width:17px;height:17px} .sa-kb-titre{display:flex;flex-direction:column;line-height:1.25;min-width:170px} .sa-kb-titre b{font-size:1.12rem;font-weight:800;letter-spacing:-.01em} .sa-kb-titre span{font-size:.74rem;color:var(--ink-mute)} .sa-kb-aide{margin-left:auto} @media(max-width:720px){ .sa-kb-aide{display:none} } /* ── LE TABLEAU D'UN CAMPUS ── Aucune règle de mise en page ici : le kanban du pilotage réutilise `.kanban`, `.kb-col`, `.kb-card`… du kit et de `app.css`, exactement comme la page « To do list » de l'application. Écrire un second jeu de règles, c'était accepter qu'elles divergent au premier ajustement. Seule marque propre : `.sa-kanban`, qui redonne à la grille l'air qu'elle a dans une page du pilotage, et rend les cartes inertes de façon visible (aucun curseur de saisie, aucun bouton). */ .sa-kanban{margin-top:2px} .sa-kanban .kb-card{cursor:default} .sa-kanban .kb-card:hover{box-shadow:var(--sh-sm);transform:none} /* ── LE COMPARATIF DES CENTRES ── Une grille dense : dix-neuf lignes sur sept colonnes chiffrées. Elle défile DANS SON CADRE, jamais en poussant la page. */ .sa-ind-defile{overflow-x:auto;margin:0 -4px;padding:0 4px} .sa-ind-grille{min-width:760px} .sa-ind-grille th{vertical-align:bottom;line-height:1.3} .sa-ind-grille td{text-align:center;font-variant-numeric:tabular-nums;font-weight:600} .sa-ind-cible{display:block;font-size:.68rem;font-weight:600;color:var(--ink-mute); text-transform:none;letter-spacing:0;margin-top:3px} /* La colonne des noms reste lisible quand le reste défile. */ .sa-ind-nom{text-align:left!important;position:sticky;left:0;z-index:1; background:var(--surface);min-width:150px} .sa-ind-nom small{display:block;font-size:.7rem;font-weight:400;color:var(--ink-mute)} .sa-ind-reseau td{background:var(--bg-2)} .sa-ind-reseau .sa-ind-nom{background:var(--bg-2)} /* Trois états, trois teintes — les mêmes que partout : le rouge ne sert qu'à ce qui décroche vraiment. */ .ind-tenu{color:var(--ok-ink);background:color-mix(in srgb,var(--ok) 9%,transparent)} .ind-surveiller{color:var(--warn-ink);background:color-mix(in srgb,var(--warn) 11%,transparent)} .ind-critique{color:var(--danger-ink);background:color-mix(in srgb,var(--danger) 11%,transparent)} b.ind-tenu,b.ind-surveiller,b.ind-critique{background:none;padding:0} .sa-ind-compte{display:flex;flex-wrap:wrap;gap:8px 18px;margin:16px 0 6px; font-size:.8rem;color:var(--ink-2)} .sa-ind-compte b{color:var(--ink);font-size:.9rem} /* Les objectifs sans mesure : présentés comme une liste de chantiers, pas comme des erreurs. Aucune couleur d'alerte. */ .sa-ind-attente{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px} .sa-ind-manque{background:var(--bg-2);border-radius:var(--r-md);padding:13px 15px} .sa-ind-manque-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px} .sa-ind-manque-h b{font-size:.88rem} .sa-ind-fam{margin-left:auto;font-size:.68rem;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--ink-mute)} .sa-ind-manque p{line-height:1.5;margin-top:4px} /* ── L'ARGENT, EN GRAND ── Quatre montants qui se lisent de loin. Ce n'est pas un KPI de plus dans la rangée : c'est ce que la direction vient chercher sur cet écran, donc ça occupe la première place et la plus grande taille. */ .sa-argent{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px;margin-bottom:18px} .sa-argent-c{background:var(--surface);border:1px solid var(--border); border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:18px 20px; display:flex;flex-direction:column;gap:4px} .sa-argent-c>span{font-size:.74rem;font-weight:800;letter-spacing:.07em; text-transform:uppercase;color:var(--ink-soft)} .sa-argent-c>b{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;line-height:1.1; color:var(--ink);font-variant-numeric:tabular-nums} .sa-argent-c>small{font-size:.76rem;color:var(--ink-mute);line-height:1.45} /* Le perdu est le seul en rouge : c'est le seul qui appelle une action. */ .sa-argent-c.perdu{border-color:color-mix(in srgb,var(--danger) 40%,var(--border))} .sa-argent-c.perdu>b{color:var(--danger)} @media(max-width:900px){ .sa-argent-c>b{font-size:1.55rem} } /* ── L'APERÇU DES ÉTAPES D'UNE CLASSE ── Une pastille par étape, dans l'ordre du parcours : on voit d'un coup d'œil ce qui est validé, ce qui attend, ce qui n'a pas commencé. */ .sa-cl{margin-bottom:20px} .sa-cl-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px} .sa-cl-h b{font-size:.95rem} .sa-cl-n{margin-left:auto;font-size:.76rem;color:var(--ink-soft)} .sa-cl-vide{display:flex;align-items:center;gap:6px;font-size:.78rem; color:var(--warn-ink);margin-bottom:8px} .sa-cl-vide .ico{width:14px;height:14px;flex:none} .sa-etapes{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:7px} .sa-etape{position:relative;text-align:left;cursor:pointer;font:inherit; border-radius:10px;padding:8px 10px;border:1px solid var(--border); background:var(--surface);transition:border-color .15s,box-shadow .15s} .sa-etape:hover{border-color:var(--orange);box-shadow:var(--sh-sm)} .sa-etape-t{display:block;font-size:.78rem;font-weight:600;line-height:1.3;color:var(--ink)} .sa-etape-d{display:block;font-size:.7rem;color:var(--ink-mute);margin-top:2px} /* La teinte porte l'état : bordure à gauche, pas un aplat — vingt pastilles pleines feraient un vitrail. */ .sa-etape.e-ok{border-left:3px solid var(--ok)} .sa-etape.e-warn{border-left:3px solid var(--warn)} .sa-etape.e-info{border-left:3px solid var(--info)} .sa-etape.e-neutre{border-left:3px solid var(--border-2);opacity:.72} /* Déclarée faite, mais vide : le seul avertissement de cette grille. */ .sa-etape-vide{position:absolute;top:6px;right:6px;color:var(--warn)} .sa-etape-vide .ico{width:13px;height:13px} .sa-cl-sans{margin-top:18px;padding-top:14px;border-top:1px solid var(--border)} /* ═══════════════════════════════════════════════════════════════════ LA PASSE VISUELLE (25/08/2026) Les écrans étaient justes et plats : tout s'y lisait en chiffres, rien ne s'y voyait. Ce bloc n'ajoute aucune couleur décorative — la teinte porte toujours un sens : la famille du chiffre, ou son état par rapport à l'objectif. ═══════════════════════════════════════════════════════════════════ */ /* ── LE KPI TEINTÉ ── Un filet de couleur en tête de carte. Assez pour donner un rythme à la rangée, trop peu pour crier. */ .sa-kpi-t{position:relative;overflow:hidden} .sa-kpi-t::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--t)} .sa-kpi-t.t-brand {--t:var(--orange)} .sa-kpi-t.t-ok {--t:var(--ok)} .sa-kpi-t.t-warn {--t:var(--warn)} .sa-kpi-t.t-danger{--t:var(--danger)} .sa-kpi-t.t-info {--t:var(--info)} .sa-kpi-t.t-neutre{--t:var(--ink-mute)} .sa-kpi-t.t-danger .sa-chiffre{color:var(--danger)} .sa-kpi-t.t-ok .sa-chiffre{color:var(--ok-ink)} /* ── LES JAUGES D'OBJECTIF ── */ .sa-jauges-c{margin-bottom:16px} .sa-jauges{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr)); gap:16px 20px;margin:6px 0 14px} .sa-jauge{display:flex;align-items:center;gap:12px} .sa-jauge svg{width:74px;height:74px;flex:none} .sa-jauge-t{min-width:0} .sa-jauge-t b{display:block;font-size:1.15rem;font-weight:800;letter-spacing:-.01em; line-height:1.15;font-variant-numeric:tabular-nums} .sa-jauge-t span{display:block;font-size:.8rem;font-weight:600;color:var(--ink-2); line-height:1.3;margin-top:2px} .sa-jauge-t small{display:block;font-size:.7rem;color:var(--ink-mute);margin-top:2px} .sa-jauge.j-tenu .sa-jauge-t b{color:var(--ok-ink)} .sa-jauge.j-surveiller .sa-jauge-t b{color:var(--warn-ink)} .sa-jauge.j-critique .sa-jauge-t b{color:var(--danger-ink)} /* ── LA BARRE DE PROPORTION DE L'ARGENT ── Trois montants dont la somme fait un tout. L'œil compare des longueurs, pas des nombres alignés. */ .sa-part{margin:-4px 0 18px} .sa-part-barre{display:flex;height:14px;border-radius:999px;overflow:hidden; background:var(--bg-2);box-shadow:inset 0 1px 2px rgba(41,29,19,.06)} .sa-part-barre i{display:block;height:100%} .sa-part i.p-acquis{background:var(--ok)} .sa-part i.p-reste {background:var(--orange)} .sa-part i.p-perdu {background:var(--danger)} .sa-part-leg{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:9px; font-size:.78rem;color:var(--ink-2)} .sa-part-leg span{display:flex;align-items:center;gap:7px} .sa-part-leg i{width:9px;height:9px;border-radius:3px;flex:none} .sa-part-leg b{color:var(--ink);font-variant-numeric:tabular-nums} /* ── LE CLASSEMENT SUR UN INDICATEUR ── */ .sa-ind-choix{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 12px} .sa-ind-choix button{font:inherit;font-size:.76rem;font-weight:600;cursor:pointer; padding:5px 12px;border-radius:999px;border:1px solid var(--border); background:var(--surface);color:var(--ink-soft);transition:all .15s} .sa-ind-choix button:hover{color:var(--ink);border-color:var(--border-2)} .sa-ind-choix button.on{background:var(--always-dark);border-color:var(--always-dark);color:#fff} .sa-classement-c{background:var(--bg-2);border-radius:var(--r-md);padding:14px 16px} .sa-classement{display:flex;flex-direction:column;gap:5px;margin:10px 0} .sa-cl-l{display:flex;align-items:center;gap:10px;font-size:.8rem} .sa-cl-rang{width:20px;flex:none;text-align:right;font-size:.72rem;color:var(--ink-mute); font-variant-numeric:tabular-nums} .sa-cl-nom{width:104px;flex:none;font-weight:600;color:var(--ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sa-cl-piste{flex:1;height:9px;border-radius:999px;background:var(--surface); overflow:hidden;min-width:40px} .sa-cl-piste i{display:block;height:100%;border-radius:999px;background:var(--ink-mute)} .sa-cl-piste i.j-tenu{background:var(--ok)} .sa-cl-piste i.j-surveiller{background:var(--warn)} .sa-cl-piste i.j-critique{background:var(--danger)} .sa-cl-l>b{width:74px;flex:none;text-align:right;font-variant-numeric:tabular-nums; background:none;padding:0} @media(max-width:640px){ .sa-cl-nom{width:78px} .sa-cl-l>b{width:62px} } /* ── LA BARRE D'OBJECTIF (remplace l'anneau) ── Un anneau se lit mal : deux valeurs proches y font deux arcs presque identiques, et huit anneaux côte à côte ne se comparent pas. Les barres s'alignent, et la cible tombe au même endroit sur toutes celles qui partagent une échelle. */ .sa-objs{display:flex;flex-direction:column;gap:11px;margin:6px 0 14px} .sa-obj{display:grid;grid-template-columns:1fr minmax(120px,2.2fr) 92px 78px; align-items:center;gap:14px} .sa-obj-nom{font-size:.84rem;font-weight:600;color:var(--ink-2);line-height:1.25} .sa-obj-piste{position:relative;height:15px;border-radius:999px;background:var(--bg-2); overflow:visible;box-shadow:inset 0 1px 2px rgba(41,29,19,.06)} .sa-obj-piste i{display:block;height:100%;border-radius:999px;background:var(--ink-mute); transition:width .4s var(--ease,ease)} .sa-obj-piste i.j-tenu{background:var(--ok)} .sa-obj-piste i.j-surveiller{background:var(--warn)} .sa-obj-piste i.j-critique{background:var(--danger)} /* Le repère de cible : un trait qui traverse la piste, pas une teinte. */ .sa-obj-piste u{position:absolute;top:-4px;bottom:-4px;width:2px;border-radius:2px; background:var(--ink);opacity:.62;transform:translateX(-1px)} .sa-obj>b{text-align:right;font-size:1rem;font-variant-numeric:tabular-nums; background:none;padding:0} .sa-obj>small{font-size:.72rem;color:var(--ink-mute);white-space:nowrap} .sa-obj.vide{opacity:.55} @media(max-width:720px){ .sa-obj{grid-template-columns:1fr 76px;gap:4px 10px} .sa-obj-piste{grid-column:1 / -1;order:3} .sa-obj>small{order:4;grid-column:1 / -1} } /* Le rang, devant le nom du centre. */ .sa-ind-rang{display:inline-block;min-width:19px;font-size:.72rem;font-weight:700; color:var(--ink-mute);font-variant-numeric:tabular-nums} .sa-table tr.sa-ind-choisie td{background:var(--orange-50)} .sa-table tr.sa-ind-choisie .sa-ind-nom{background:var(--orange-50); box-shadow:inset 3px 0 0 var(--orange)} /* ── « ON PEUT CLIQUER ICI » ── Une ligne cliquable qui ne le dit pas ne se clique pas : le curseur ne se voit qu'une fois qu'on est déjà dessus. Une dernière colonne discrète, qui s'affirme au survol de la ligne. */ .sa-table .sa-voir{width:1%;white-space:nowrap;text-align:right} .sa-table .sa-voir span{display:inline-flex;align-items:center;gap:3px; font-size:.74rem;font-weight:700;color:var(--ink-mute); opacity:.55;transition:opacity .15s,color .15s} .sa-table .sa-voir .ico{width:13px;height:13px} .sa-table tbody tr:hover .sa-voir span{opacity:1;color:var(--orange-700)} /* ── LES OBJECTIFS SANS MESURE, EN PASTILLES ── Ils étaient huit cartes de trois paragraphes. Ce sont huit étiquettes : le nom, la cible, et le détail au survol. Ce qui manque à chacun est écrit en base — ça n'a pas à occuper la moitié de l'écran. */ .sa-ind-attente{display:flex;flex-wrap:wrap;gap:8px} .sa-manque{display:inline-flex;align-items:baseline;gap:8px; padding:7px 13px;border-radius:999px;background:var(--bg-2); font-size:.8rem;color:var(--ink-2);cursor:help} .sa-manque b{font-size:.76rem;color:var(--ink-mute);font-weight:700} /* ── LA LISTE DES TÂCHES D'UN COLLABORATEUR ── Une ligne par acte, cliquable : on ouvre, on lit ce qui a été rempli. C'est là que se compare une manière de faire — pas dans un compteur. */ .sa-actes{display:flex;flex-direction:column;gap:6px;margin-top:8px} .sa-acte{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:center; text-align:left;font:inherit;cursor:pointer;padding:9px 12px;border-radius:10px; border:1px solid var(--border);background:var(--surface);transition:all .15s} .sa-acte:hover{border-color:var(--orange);box-shadow:var(--sh-sm)} .sa-acte-t{font-size:.83rem;font-weight:700;color:var(--ink)} .sa-acte-s{font-size:.76rem;color:var(--ink-soft);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .sa-acte-e{font-size:.7rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase; color:var(--ok-ink);white-space:nowrap} /* Rien dedans : le seul avertissement de la liste. */ .sa-acte.vide{border-left:3px solid var(--warn)} .sa-acte.vide .sa-acte-e{color:var(--warn-ink)} /* ── LA SIGNATURE D'UN GESTE ── « Qui a fait ça », partout de la même façon : le compte, son rôle en gris, la date au bout. Une seule forme, pour qu'un directeur la reconnaisse au premier coup d'œil sans relire le libellé. La variante `flou` sert aux deux cas où l'on ne sait pas vraiment : le compte qui a POSÉ une rencontre sans la tenir, et les lignes antérieures à la signature. Elle est volontairement plus pâle — on ne donne pas le même poids à une certitude et à un repli. */ .sa-sign{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:2px 6px; font-size:.8rem;font-weight:600;color:var(--ink);text-align:right; /* Le nom passe à la ligne d'un bloc, jamais entre son prénom et son nom : « Selma / Barrieiros » sur deux lignes se lit mal et fait douter de ce qu'on regarde. */ white-space:nowrap} .sa-ligne .sa-sign{justify-content:flex-end} .sa-sign .ico{width:13px;height:13px;color:var(--orange-600);flex:none} .sa-sign i{font-style:normal;font-size:.72rem;font-weight:600;color:var(--ink-mute); letter-spacing:.01em} .sa-sign b{font-size:.72rem;font-weight:600;color:var(--ink-soft)} .sa-sign i::before{content:"· "} .sa-sign b::before{content:"· "} .sa-sign-flou{font-weight:500;color:var(--ink-soft)} .sa-sign-flou .ico{color:var(--ink-mute)} /* Sur une rencontre, les deux comptes vont l'un sous l'autre : celui qui a posé, celui qui a tenu. Jamais fondus en une seule ligne — ce sont deux faits distincts. */ .sa-renc-qui{display:flex;flex-direction:column;gap:2px;margin-top:6px} /* Qui a terminé la carte, sous le reste : vert, discret, jamais confondu avec `kb-qui` qui dit à qui la tâche revient. */ .sa-kanban .kb-fait{display:flex;align-items:center;gap:5px;margin-top:6px; padding-top:6px;border-top:1px dashed var(--border)} .sa-kanban .kb-fait .ico{width:12px;height:12px;color:var(--ok);flex:none} .sa-kanban .kb-fait small{font-size:.68rem;color:var(--ink-soft);line-height:1.3}