*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #eceef1; --surface: #ffffff; --surface-2: #f6f7f9; --surface-3: #eef0f3; --border: #e1e4e9; --border-strong: #cdd2da; --text: #14171c; --text-muted: #5b636e; --text-faint: #8b929d; --accent: oklch(0.55 0.12 252); --accent-press: oklch(0.48 0.12 252); --accent-soft: oklch(0.96 0.025 252); --accent-line: oklch(0.88 0.05 252); --done: oklch(0.55 0.11 152); --done-bg: oklch(0.95 0.04 152); --delayed: oklch(0.64 0.13 70); --delayed-bg: oklch(0.95 0.05 80); --overrun: oklch(0.6 0.16 40); --overrun-bg: oklch(0.95 0.045 45); --shadow-sm: 0 1px 2px rgba(20,23,28,.06); --shadow: 0 4px 16px -4px rgba(20,23,28,.14), 0 2px 6px -2px rgba(20,23,28,.08); --radius: 8px; --radius-sm: 6px; font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; color: var(--text); color-scheme: light; } /* ---- Thème sombre (mêmes variables que la page runbook → cohérence globale) ---- */ :root[data-theme="dark"] { --bg: #0f1115; --surface: #181b21; --surface-2: #1f232b; --surface-3: #272c35; --border: #2a2f38; --border-strong: #3a414c; --text: #e6e9ee; --text-muted: #a3aab5; --text-faint: #727a86; --accent: oklch(0.68 0.13 252); --accent-press: oklch(0.74 0.13 252); --accent-soft: oklch(0.30 0.06 252); --accent-line: oklch(0.42 0.07 252); --done: oklch(0.72 0.12 152); --done-bg: oklch(0.30 0.05 152); --delayed: oklch(0.78 0.13 80); --delayed-bg: oklch(0.33 0.06 80); --overrun: oklch(0.72 0.16 40); --overrun-bg: oklch(0.33 0.07 40); --shadow-sm: 0 1px 2px rgba(0,0,0,.45); --shadow: 0 4px 16px -4px rgba(0,0,0,.55), 0 2px 6px -2px rgba(0,0,0,.45); color-scheme: dark; } /* Sélection contrastée. Valeurs littérales : var() n'est pas fiable dans ::selection. */ ::selection { background: #bcd6ff; color: #14171c; } ::-moz-selection { background: #bcd6ff; color: #14171c; } :root[data-theme="dark"] ::selection { background: #2f5180; color: #eef2f7; } :root[data-theme="dark"] ::-moz-selection { background: #2f5180; color: #eef2f7; } /* Pendant le chargement (classe posée dans le , retirée après le 1er paint) : aucune transition, pour éviter l'animation clair→sombre des bordures/ombres. */ .preload, .preload *, .preload *::before, .preload *::after { transition: none !important; } body { background: var(--bg); min-height: 100vh; transition: background .25s ease, color .25s ease; } @media (prefers-reduced-motion: reduce) { body { transition: none; } } /* ---- Auth pages ---- */ .auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 36px 40px; width: 100%; max-width: 420px; } .auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; } .auth-brand-mark { width: 46px; height: 46px; border-radius: 10px; object-fit: contain; background: #fff; flex-shrink: 0; } .auth-brand-name { font-size: 15px; font-weight: 600; letter-spacing: -.1px; } .auth-brand-sub { font-size: 11px; color: var(--text-faint); } .auth-title { font-size: 20px; font-weight: 700; margin-bottom: 6px; } .auth-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; } .form-group { margin-bottom: 14px; } .form-group label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: var(--text-muted); } .form-group input, .form-group select { width: 100%; padding: 8px 11px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; background: var(--surface); color: var(--text); transition: border-color .13s, box-shadow .13s; outline: none; } .form-group input:focus, .form-group select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-line); } .form-group .helptext { font-size: 11px; color: var(--text-faint); margin-top: 4px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; border: none; transition: background .13s, opacity .13s; text-decoration: none; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-press); } .btn-secondary { background: var(--surface-3); color: var(--text); border: 1px solid var(--border-strong); } .btn-secondary:hover { background: var(--border); } .btn-danger { background: #fee2e2; color: #dc2626; } .btn-danger:hover { background: #fecaca; } .btn-full { width: 100%; } .btn-sm { padding: 6px 11px; font-size: 12.5px; } .auth-footer { margin-top: 20px; text-align: center; font-size: 13px; color: var(--text-muted); } .auth-footer a { color: var(--accent); text-decoration: none; font-weight: 600; } .auth-forgot { margin-top: 6px; text-align: right; font-size: 12px; } .auth-forgot a { color: var(--text-muted); text-decoration: none; } .auth-forgot a:hover { color: var(--accent); text-decoration: underline; } .errorlist { list-style: none; font-size: 12px; color: #dc2626; margin-top: 4px; } /* ---- Dashboard ---- */ .dash-header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 24px; height: 56px; display: flex; align-items: center; gap: 16px; } .dash-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } .dash-brand-mark { width: 30px; height: 30px; border-radius: 7px; object-fit: contain; background: #fff; flex-shrink: 0; } .dash-brand-name { font-size: 14px; font-weight: 600; color: var(--text); } .dash-spacer { flex: 1; } .dash-user { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); } .dash-user-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; } .dash-user-logout { font-size: 12px; color: var(--text-faint); text-decoration: none; } .dash-user-logout:hover { color: var(--text); } .dash-main { max-width: 860px; margin: 0 auto; padding: 32px 24px; } /* Variante large (Mes opérations) : pleine largeur, deux colonnes côte à côte — possédées à gauche, rejointes à droite — chacune sous-groupée par statut. */ .dash-main.dash-wide { max-width: none; padding: 32px 36px; } @media (max-width: 700px) { .dash-main.dash-wide { padding: 24px 16px; } } .dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; } @media (max-width: 980px) { .dash-cols { grid-template-columns: 1fr; } } .dash-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; min-width: 0; } /* En-tête d'un cadre : titre + compteur groupés à gauche, actions à droite. */ .dash-col .dash-group-head { justify-content: flex-start; gap: 10px; } .dash-col-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .dash-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .dash-section-head h1 { font-size: 20px; font-weight: 700; } /* ---- Sections (Propriétaire / Rejointes) ---- */ .dash-group { margin-bottom: 28px; } .dash-group-head { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 12px; } .dash-group-head h2 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); } .dash-group-count { font-size: 12px; font-weight: 600; color: var(--text-faint); } .dash-group-empty { color: var(--text-faint); font-size: 13px; padding: 4px 2px; } /* Sous-groupes par statut au sein d'une section : En cours / À venir / Terminées */ .dash-subgroup { margin-bottom: 18px; } .dash-subgroup:last-child { margin-bottom: 0; } .dash-subgroup-head { display: flex; align-items: baseline; gap: 7px; margin: 0 2px 8px; } .dash-subgroup-head h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); } .dash-subgroup-dot { width: 7px; height: 7px; border-radius: 50%; align-self: center; background: var(--text-faint); flex: 0 0 auto; } .dash-subgroup-head.st-progress .dash-subgroup-dot { background: var(--accent); } .dash-subgroup-head.st-progress h3 { color: var(--accent); } .dash-subgroup-head.st-done .dash-subgroup-dot { background: var(--done); } .dash-limit-note { color: var(--overrun); font-size: 12.5px; margin: 0 2px 12px; } .runbook-list { display: flex; flex-direction: column; gap: 10px; } .runbook-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px 18px; display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; transition: box-shadow .13s, border-color .13s; } .runbook-card:hover { box-shadow: var(--shadow); border-color: var(--accent-line); } .runbook-card-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .runbook-card-icon img { width: 44px; height: 44px; object-fit: contain; } /* Dark mode : bascule vers les icônes bouquin corps clair (les noires deviennent invisibles sur fond sombre). Swap purement CSS via content:url, ciblé par le nom de fichier du src — aucun changement de template requis. */ :root[data-theme="dark"] .runbook-card-icon img[src*="book_green"], :root[data-theme="dark"] .xp-mini-book[src*="book_green"] { content: url("/static/img/book_green_dark.png"); } :root[data-theme="dark"] .runbook-card-icon img[src*="book_blue"], :root[data-theme="dark"] .xp-mini-book[src*="book_blue"] { content: url("/static/img/book_blue_dark.png"); } :root[data-theme="dark"] .runbook-card-icon img[src*="book_simple"], :root[data-theme="dark"] .xp-mini-book[src*="book_simple"] { content: url("/static/img/book_simple_dark.png"); } /* Logo Vaudop (bouquin noir + flèche rouge) : en dark mode on retire la pastille blanche et on affiche la variante corps clair (rouge conservé), posée directement sur le fond sombre. Couvre header, dashboard, drawer, pages auth et page de partage. */ :root[data-theme="dark"] .auth-brand-mark, :root[data-theme="dark"] .dash-brand-mark, :root[data-theme="dark"] .site-brand-mark, :root[data-theme="dark"] .drawer-brand-mark, :root[data-theme="dark"] .sh-mark { background: transparent; content: url("/static/img/logo_dark.png"); } .runbook-card-body { flex: 1; min-width: 0; } .runbook-card-title { font-size: 14.5px; font-weight: 600; margin-bottom: 2px; } .runbook-card-meta { font-size: 12px; color: var(--text-faint); display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; } .runbook-card-ref { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; } /* La plage horaire reste insécable : elle wrappe en bloc, sans se couper au milieu. */ .runbook-card-window { white-space: nowrap; } .runbook-card-date { font-size: 12px; font-weight: 700; color: var(--text-muted); } .runbook-card-role { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--surface-3); color: var(--text-muted); flex-shrink: 0; white-space: nowrap; } /* Couleur par rôle pour repérer d'un coup d'œil son niveau d'accès. */ .runbook-card-role.role-owner { background: var(--accent-soft); color: var(--accent); } .runbook-card-role.role-pilot { background: var(--delayed-bg); color: var(--delayed); } .runbook-card-role.role-member { background: var(--done-bg); color: var(--done); } .runbook-card-role.role-viewer { background: var(--surface-3); color: var(--text-faint); } /* ---- Menu « … » des cartes (dashboard, Explorer) ---- */ .runbook-card-wrap { position: relative; } .runbook-card-wrap.menu-open { z-index: 100; } .runbook-card-wrap .runbook-card { padding-right: 46px; } .rb-dots { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); } /* Variante « inline » : posée dans le flux flex de la carte (cartes Explorer). */ .rb-dots.inline { position: relative; top: auto; right: auto; transform: none; flex-shrink: 0; } .rb-dots.inline.open { z-index: 60; } .rb-dots-btn { width: 30px; height: 30px; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: 1px solid transparent; cursor: pointer; transition: background .13s, border-color .13s; } .rb-dots-btn span { width: 4px; height: 4px; border-radius: 50%; background: var(--text-muted); display: block; } .rb-dots-btn:hover { background: var(--surface-3); border-color: var(--border); } .rb-dots-menu { display: none; position: absolute; top: calc(100% + 4px); right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 8px 24px -4px rgba(20,23,28,.18); padding: 5px; min-width: 172px; z-index: 50; } .rb-dots.open .rb-dots-menu { display: block; } .rb-dots-item { display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 6px; font-size: 13px; text-align: left; background: none; border: none; cursor: pointer; font-family: inherit; color: var(--text); text-decoration: none; } .rb-dots-item:hover { background: var(--surface-2); } .rb-dots-item.danger { color: #c0392b; } .rb-dots-item.danger:hover { background: #fee2e2; } .rb-dots-sep { height: 1px; background: var(--border); margin: 4px 4px; } .rb-dots form { margin: 0; } /* ---- Explorer / Modèles ---- */ .tpl-search { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; margin-bottom: 18px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; transition: border-color .13s, box-shadow .13s; } .tpl-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-line); } .tpl-search svg { color: var(--text-faint); flex-shrink: 0; } .tpl-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 14.5px; color: var(--text); } .tpl-search input::placeholder { color: var(--text-faint); } .tpl-search-clear { color: var(--text-faint); text-decoration: none; font-size: 14px; padding: 4px; flex-shrink: 0; } .tpl-search-clear:hover { color: var(--text); } /* Neutralise le fond blanc de l'autofill navigateur (Chrome/Safari) : très visible en mode sombre, il repeignait l'intérieur des champs en blanc. Le box-shadow inset est le seul moyen d'écraser ce fond ; on force aussi la couleur du texte au thème. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 1000px var(--surface) inset; box-shadow: 0 0 0 1000px var(--surface) inset; caret-color: var(--text); } .tpl-card .runbook-card-title.tpl-title-link { display: inline-block; text-decoration: none; color: inherit; } .tpl-card .runbook-card-title.tpl-title-link:hover { color: var(--accent); } .tpl-badge { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; white-space: nowrap; } .tpl-badge.mandatory { background: var(--overrun-bg); color: var(--overrun); } .tpl-badge.enterprise { background: var(--accent-soft); color: var(--accent); } .tpl-badge.published { background: var(--done-bg); color: var(--done); } .tpl-badge.private { background: var(--surface-3); color: var(--text-faint); display: inline-flex; align-items: center; gap: 3px; } .tpl-badge.private svg { width: 10px; height: 10px; } /* Domaine métier d'un projet (pastille colorée, cartes et listes) */ .rb-domain { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 11px; font-weight: 600; color: var(--text-muted); background: var(--surface-3); padding: 1px 8px; border-radius: 99px; } .rb-domain-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .rb-domain.is-none { color: var(--text-faint); background: none; padding-left: 0; } /* ---- Page « Mes projets » : bandeau de filtres + tableau 3 colonnes ---- */ .pj-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .pj-bar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .pj-filters { display: flex; gap: 6px; flex-wrap: wrap; } .pj-chip-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); font: 600 12.5px/1 inherit; font-family: inherit; color: var(--text-muted); transition: color .13s, border-color .13s, background .13s; } .pj-chip-btn:hover { color: var(--text); border-color: var(--border-strong); } .pj-chip-btn.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); } .pj-n { font-variant-numeric: tabular-nums; opacity: .7; } .pj-quota { font-size: 12.5px; font-weight: 600; color: var(--text-faint); font-variant-numeric: tabular-nums; } /* Bloc vertical par domaine : en-tête + tableau 3 colonnes à l'intérieur */ .pj-domain { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); padding: 12px 14px 14px; margin-bottom: 16px; } .pj-domain-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; } .pj-domain-head h2 { font-size: 14.5px; font-weight: 700; color: var(--text); } .pj-domain-head h2.is-none { color: var(--text-faint); font-weight: 600; } .pj-domain-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; } .pj-domain-dot.is-none { background: none; border: 1.5px dashed var(--border-strong); box-sizing: border-box; } .pj-domain-count { font-size: 12px; font-weight: 700; color: var(--text-faint); background: var(--surface); border: 1px solid var(--border); padding: 1px 8px; border-radius: 99px; font-variant-numeric: tabular-nums; } .pj-domain-toggle { margin-left: auto; border: none; background: none; cursor: pointer; color: var(--text-faint); padding: 4px; border-radius: 6px; display: flex; transition: color .13s, background .13s, transform .15s; } .pj-domain-toggle:hover { color: var(--text); background: var(--surface-3); } .pj-domain.collapsed .pj-domain-toggle svg { transform: rotate(-90deg); } .pj-domain.collapsed .pj-board { display: none; } /* ---- Frise résumé d'un projet (une ligne par projet dans son domaine) ---- */ .pjf-list { display: flex; flex-direction: column; gap: 10px; } .pjf { position: relative; /* ancre du lien étiré (voir .pjf-title::after) */ background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; cursor: pointer; transition: border-color .13s, box-shadow .13s; } .pjf:hover { border-color: var(--accent-line); box-shadow: var(--shadow-sm); } /* Toute la ligne ouvre le projet : le titre reste le lien réel (accessible, ouvrable dans un nouvel onglet), sa zone cliquable est simplement étendue à la carte entière. Les éléments interactifs éventuels repassent au-dessus. */ .pjf-title::after { content: ''; position: absolute; inset: 0; border-radius: inherit; } .pjf a:not(.pjf-title), .pjf button { position: relative; z-index: 1; } .pjf-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .pjf-status { width: 9px; height: 9px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; } .pjf-status.st-progress { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-line); animation: ltPulse 1.6s infinite; } .pjf-status.st-done { background: var(--done); } .pjf-title { font-size: 14px; font-weight: 700; color: var(--text); text-decoration: none; } .pjf-title:hover { color: var(--accent); } .pjf-code { font-size: 11.5px; font-weight: 600; color: var(--text-faint); } .pjf-head-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pjf-role { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: var(--surface-3); color: var(--text-faint); white-space: nowrap; } .pjf-role.role-owner { background: var(--accent-soft); color: var(--accent); } /* Avancement global, lisible d'un coup d'œil en tête de ligne */ .pjf-pct { font: 800 13px inherit; font-variant-numeric: tabular-nums; padding: 2px 10px; border-radius: 99px; background: var(--surface-3); color: var(--text-muted); } .pjf-pct.st-progress { background: var(--accent-soft); color: var(--accent); } .pjf-pct.st-done { background: var(--done-bg); color: var(--done); } /* La frise : roadmap de chevrons enchaînés, un par phase. Le chevron dit le sens de la progression ; la couleur dit l'état ; le remplissage dit l'avancement. */ .pjf-track { display: flex; margin: 12px 0 10px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: thin; } .pjf-seg { --arrow: 17px; --seg: var(--accent); position: relative; overflow: hidden; min-width: 152px; height: 58px; display: flex; align-items: center; gap: 11px; padding: 0 14px 0 calc(var(--arrow) + 12px); /* Recouvrement volontairement inférieur à la pointe : il reste un liseré de 4 px en forme de chevron entre deux phases — sans lui, les segments se touchent et la flèche devient invisible. */ margin-left: calc(var(--arrow) * -1 + 4px); background: var(--surface-3); color: var(--text-muted); clip-path: polygon(0 0, calc(100% - var(--arrow)) 0, 100% 50%, calc(100% - var(--arrow)) 100%, 0 100%, var(--arrow) 50%); transition: filter .13s; } .pjf-seg:first-child { margin-left: 0; padding-left: 15px; clip-path: polygon(0 0, calc(100% - var(--arrow)) 0, 100% 50%, calc(100% - var(--arrow)) 100%, 0 100%); } .pjf:hover .pjf-seg { filter: brightness(1.03); } /* Remplissage = part d'accomplissement de la phase. Discret à dessein : c'est le seul aplat coloré du chevron, le fond restant neutre pour tous les états — sinon la frise devient un mur de couleurs où plus rien ne ressort. */ .pjf-seg-fill { position: absolute; inset: 0 auto 0 0; background: var(--seg); opacity: .13; transition: width .3s ease; } /* Pastille : numéro de phase, ou coche une fois la phase terminée */ .pjf-seg-num { position: relative; flex: 0 0 auto; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--text-muted); font: 800 13px/1 inherit; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--border); } .pjf-seg-num svg { width: 15px; height: 15px; } .pjf-seg-txt { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pjf-seg-label { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pjf-seg-n { font-size: 12px; font-weight: 800; color: var(--text-muted); line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pjf-seg-n b { color: var(--overrun); font-weight: 800; } /* Terminée : la couleur tient dans la pastille et le pourcentage. */ .pjf-seg.st-done .pjf-seg-fill { background: var(--done); opacity: .15; } .pjf-seg.st-done .pjf-seg-n { color: var(--done); } .pjf-seg.st-done .pjf-seg-num { background: var(--done); color: #fff; box-shadow: none; } /* En cours : seule phase mise en avant — pastille pleine qui bat. */ .pjf-seg.st-progress .pjf-seg-n { color: var(--accent); } .pjf-seg.st-progress .pjf-seg-num { background: var(--accent); color: #fff; box-shadow: 0 0 0 3px var(--accent-line); animation: ltPulse 1.6s infinite; } /* Retard dans la phase en cours : la pastille passe au rouge */ .pjf-seg.st-progress.has-late .pjf-seg-num { background: var(--overrun); box-shadow: 0 0 0 3px var(--overrun-bg); } .pjf-seg.st-progress.has-late .pjf-seg-n { color: var(--overrun); } /* Le nom de la phase reste toujours lisible en couleur de texte normale : il n'a pas à changer de teinte selon l'état, ce sont la pastille et le pourcentage qui le portent. */ .pjf-seg .pjf-seg-label { color: var(--text); } .pjf-nophase { margin: 12px 0 10px; padding: 12px; border-radius: 8px; text-align: center; border: 1px dashed var(--border-strong); color: var(--text-faint); font-size: 12px; } .pjf-foot { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-faint); } .pjf-next { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--text-muted); } .pjf-next-date { font-variant-numeric: tabular-nums; color: var(--text-faint); } @media (max-width: 700px) { /* Chevrons resserrés : pastille, nom et pourcentage — la frise défile. */ .pjf-seg { min-width: 124px; height: 50px; gap: 8px; padding-right: 10px; } .pjf-seg-label { font-size: 12.5px; } .pjf-seg-num { width: 24px; height: 24px; font-size: 12px; } } .pj-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; } @media (max-width: 940px) { .pj-board { grid-template-columns: 1fr; } } .pj-col { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px; min-width: 0; } .pj-col-head { display: flex; align-items: center; gap: 7px; padding: 2px 4px 10px; } .pj-col-head h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); } .pj-col-count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--text-faint); background: var(--surface); border: 1px solid var(--border); padding: 1px 8px; border-radius: 99px; font-variant-numeric: tabular-nums; } .pj-col.st-progress .pj-col-head h3 { color: var(--accent); } .pj-col.st-progress .dash-subgroup-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-line); animation: ltPulse 1.6s infinite; } .pj-col.st-done .pj-col-head h3 { color: var(--done); } .pj-col.st-done .dash-subgroup-dot { background: var(--done); } .pj-col-list { display: flex; flex-direction: column; gap: 8px; } .pj-col-empty { color: var(--text-faint); font-size: 12.5px; text-align: center; padding: 12px 6px; } /* La carte est déjà sur --surface : à l'intérieur d'une colonne, on la détache du fond par une bordure un peu plus marquée. */ .pj-col .pj-card { background: var(--surface-2); } /* Carte projet compacte */ .pj-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-sm); padding: 10px 12px; transition: border-color .13s; } .pj-card:hover { border-color: var(--accent-line); } .pj-card-top { display: flex; align-items: flex-start; gap: 8px; } .pj-title { font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none; line-height: 1.3; flex: 1; min-width: 0; overflow-wrap: anywhere; } .pj-title:hover { color: var(--accent); } .pj-role { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: var(--surface-3); color: var(--text-faint); white-space: nowrap; flex-shrink: 0; } .pj-role.role-owner { background: var(--accent-soft); color: var(--accent); } .pj-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-faint); margin-top: 3px; } .pj-code { font-weight: 600; color: var(--text-muted); } .pj-prog { height: 5px; border-radius: 99px; background: var(--surface-3); margin-top: 9px; overflow: hidden; } .pj-prog-fill { display: block; height: 100%; border-radius: 99px; background: var(--accent); } .pj-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 11.5px; color: var(--text-faint); } .pj-steps { white-space: nowrap; font-variant-numeric: tabular-nums; } /* Prochain jalon à franchir (carte projet) */ .pj-next-ms { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11.5px; color: var(--text-muted); min-width: 0; } .pj-next-ms svg { color: var(--text-faint); flex-shrink: 0; } .pj-next-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pj-next-date { font-variant-numeric: tabular-nums; color: var(--text-faint); flex-shrink: 0; } .pj-next-more { font-size: 10px; font-weight: 700; color: var(--text-faint); background: var(--surface-3); border-radius: 99px; padding: 0 6px; flex-shrink: 0; } .pj-chip { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: var(--surface-3); color: var(--text-muted); white-space: nowrap; } .pj-chip.soon { background: var(--accent-soft); color: var(--accent); } .pj-chip.warn { background: var(--overrun-bg); color: var(--overrun); } .pj-chip.done { background: var(--done-bg); color: var(--done); } /* Badges de cycle de vie (Explorer / profil public) : où en est l'opération. */ .tpl-badge.live { background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; gap: 5px; } .tpl-badge.done { background: var(--done-bg); color: var(--done); } .tpl-badge.pending { background: var(--surface-3); color: var(--text-muted); } .tpl-badge-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; animation: ltPulse 1.6s infinite; } /* ---- Explorer communautaire ---- */ /* Explorer : pleine largeur — le tableau 3 colonnes et les listes exploitent tout l'écran (les autres pages gardent leur colonne centrée). */ .explorer-main { max-width: none; padding: 32px 36px; } @media (max-width: 700px) { .explorer-main { padding: 24px 16px; } } /* Le widget de suivi flotte à droite (position fixe) : quand il est présent, l'Explorer lui réserve la place au lieu de passer dessous — pastille seule (lt-on) ou panneau déplié de 292px (lt-open). */ @media (min-width: 1100px) { body.lt-on .explorer-main, body.lt-on .dash-wide { padding-right: 160px; } body.lt-on.lt-open .explorer-main, body.lt-on.lt-open .dash-wide { padding-right: 342px; } } .explorer-sub { color: var(--text-muted); font-size: 13.5px; margin: 2px 0 20px; line-height: 1.5; } .xp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } .xp-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; } .xp-stat-num { font-size: 25px; font-weight: 700; line-height: 1.05; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .xp-stat-label { font-size: 12px; color: var(--text-faint); font-weight: 600; } .xp-stat.accent .xp-stat-num { color: var(--accent); } .xp-stat.done .xp-stat-num { color: var(--done); } .xp-stat.warm .xp-stat-num { color: var(--overrun); } .xp-layout { display: grid; grid-template-columns: 1fr 248px; gap: 28px; align-items: start; } .xp-layout.no-side { grid-template-columns: 1fr; } .xp-content { min-width: 0; } /* ---- Onglet « Opérations » : tableau 3 colonnes par cycle de vie ---- */ .xp-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; } .xp-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; min-width: 0; } .xp-col-head { display: flex; align-items: center; gap: 7px; padding: 2px 4px 10px; } .xp-col-head h2 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); } .xp-col-count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--text-faint); background: var(--surface); border: 1px solid var(--border); padding: 1px 8px; border-radius: 99px; font-variant-numeric: tabular-nums; } .xp-col.st-progress .xp-col-head h2 { color: var(--accent); } .xp-col.st-progress .dash-subgroup-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-line); animation: ltPulse 1.6s infinite; } .xp-col.st-done .xp-col-head h2 { color: var(--done); } .xp-col.st-done .dash-subgroup-dot { background: var(--done); } .xp-col-list { display: flex; flex-direction: column; gap: 8px; } .xp-col-empty { color: var(--text-faint); font-size: 12.5px; text-align: center; padding: 18px 6px; } .xp-col .xp-more { margin-top: 8px; padding: 7px 0; font-size: 12.5px; } /* Carte compacte du tableau */ .xp-mini { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-sm); padding: 10px 12px; transition: border-color .13s; } .xp-mini:hover { border-color: var(--accent-line); } .xp-mini-top { display: flex; align-items: flex-start; gap: 8px; } .xp-mini-book { width: 17px; height: 17px; object-fit: contain; opacity: .55; flex-shrink: 0; margin-top: 1px; } :root[data-theme="dark"] .xp-mini-book { opacity: .8; } /* Recherche dynamique : contenu estompé pendant le rechargement */ .xp-content.searching { opacity: .55; transition: opacity .15s; } .xp-mini-title { font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none; line-height: 1.3; flex: 1; min-width: 0; overflow-wrap: anywhere; } .xp-mini-title:hover { color: var(--accent); } .xp-fav.mini { padding: 2px 6px; font-size: 11px; gap: 4px; border: none; } .xp-mini-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-faint); margin-top: 2px; } .xp-mini-code { font-weight: 600; color: var(--text-muted); } .xp-mini-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; font-size: 11.5px; color: var(--text-faint); } .xp-mini-steps { white-space: nowrap; font-variant-numeric: tabular-nums; } /* Barre d'avancement (colonne En cours) */ .xp-prog { height: 5px; border-radius: 99px; background: var(--surface-3); margin-top: 9px; overflow: hidden; } .xp-prog-fill { display: block; height: 100%; border-radius: 99px; background: var(--accent); } /* Pastilles d'info des cartes compactes */ .xp-chip { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: var(--surface-3); color: var(--text-muted); white-space: nowrap; } .xp-chip.date { color: var(--text); } .xp-chip.soon { background: var(--accent-soft); color: var(--accent); } .xp-chip.warn { background: var(--overrun-bg); color: var(--overrun); } .xp-chip.done { background: var(--done-bg); color: var(--done); } /* Bouton « Réutiliser » discret (colonne Terminés) */ .xp-mini-use { margin: 0 0 0 auto; } .xp-mini-usebtn { border: 1px solid var(--border); background: none; border-radius: 7px; padding: 3px 9px; font: 600 11.5px/1.2 inherit; font-family: inherit; color: var(--text-muted); cursor: pointer; transition: color .13s, border-color .13s, background .13s; } .xp-mini-usebtn:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); } @media (max-width: 940px) { .xp-board { grid-template-columns: 1fr; } } .xp-tabs { display: flex; gap: 6px; margin-bottom: 18px; } .xp-tab { font-size: 13px; font-weight: 600; text-decoration: none; color: var(--text-muted); padding: 6px 14px; border-radius: 99px; border: 1px solid transparent; transition: background .12s, color .12s, border-color .12s; } .xp-tab:hover { background: var(--surface-2); color: var(--text); } .xp-tab.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); } .xp-card-foot { margin-top: 6px; font-size: 12px; color: var(--text-faint); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .xp-author { font-weight: 600; color: var(--text-muted); text-decoration: none; } .xp-author:hover { color: var(--accent); text-decoration: underline; } .xp-dot { color: var(--border-strong); } .xp-uses { font-variant-numeric: tabular-nums; } /* Onglet « En cours » : pastille pulsante. */ .xp-tab-pulse, .lt-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; margin-right: 6px; flex-shrink: 0; box-shadow: 0 0 0 3px var(--accent-line); animation: ltPulse 1.6s infinite; } @keyframes ltPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } /* Bouton « Suivre » d'une carte (onglet En cours). */ .xp-follow { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: none; color: var(--text-faint); font: 600 12.5px/1 inherit; font-family: inherit; cursor: pointer; transition: color .13s, border-color .13s, background .13s; } .xp-follow:hover { color: var(--text); border-color: var(--border-strong); } .xp-follow.is-on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); } /* Bouton global « Suivre tous les en-cours » (tête de section). */ .xp-followall { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted); font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: color .13s, border-color .13s, background .13s; } .xp-followall:hover { color: var(--accent); border-color: var(--accent-line); } .xp-followall.on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); } /* ==== Widget flottant de suivi des opérations en cours (toutes pages) ==== */ .lt { position: fixed; right: 14px; top: 130px; z-index: 800; } .lt.hidden { display: none; } .lt-pill { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 99px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow); } .lt-pill:hover { border-color: var(--accent-line); } .lt-pill-count { font-variant-numeric: tabular-nums; } .lt-pill-label { color: var(--text-muted); font-weight: 600; } .lt.open .lt-pill { display: none; } .lt-panel { display: none; } .lt.open .lt-panel { display: flex; flex-direction: column; width: 292px; max-height: min(64vh, 560px); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; } .lt-head { display: flex; align-items: center; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--text); } .lt-head-title { flex: 1; } .lt-head-link { font-size: 11px; font-weight: 600; color: var(--accent); text-decoration: none; margin-right: 4px; } .lt-head-link:hover { text-decoration: underline; } .lt-close { width: 22px; height: 22px; border-radius: 6px; border: none; background: none; color: var(--text-faint); font-size: 11px; cursor: pointer; } .lt-close:hover { background: var(--surface-2); color: var(--text); } .lt-list { overflow-y: auto; padding: 6px; } .lt-item + .lt-item { margin-top: 2px; } .lt-row { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 8px; border: none; border-radius: 8px; background: none; cursor: pointer; font-family: inherit; text-align: left; color: var(--text); } .lt-row:hover { background: var(--surface-2); } .lt-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-line); animation: ltPulse 1.6s infinite; } .lt-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .lt-row-title { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lt-row-sub { font-size: 10.5px; color: var(--text-faint); font-family: 'IBM Plex Mono', monospace; } .lt-bar { width: 46px; height: 5px; border-radius: 99px; background: var(--surface-3); overflow: hidden; flex-shrink: 0; } .lt-bar-in { height: 100%; background: var(--done); border-radius: 99px; } .lt-bar-n { font-size: 10px; color: var(--text-faint); font-variant-numeric: tabular-nums; flex-shrink: 0; } /* Section « Terminées récemment » (aujourd'hui / hier), séparée sous les en-cours */ .lt-empty { font-size: 11.5px; color: var(--text-faint); margin: 6px 8px; } .lt-done-head { margin: 12px 2px 4px; padding: 10px 6px 0; border-top: 1px solid var(--border); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); } .lt-row.lt-done { text-decoration: none; } .lt-dot.is-done { background: var(--done); box-shadow: none; animation: none; } .lt-when { font-size: 10px; font-weight: 700; color: var(--done); background: var(--done-bg); padding: 1px 7px; border-radius: 99px; flex-shrink: 0; } /* Visu macro dépliée (mêmes codes couleur que le panneau du runbook) */ .lt-macro { display: none; padding: 2px 8px 8px 24px; } .lt-macro.open { display: block; } .lt-macro-empty { font-size: 11px; color: var(--text-faint); margin: 4px 0; } .lt-m-cat { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); border-bottom: 1px solid var(--border); padding: 5px 2px 3px; margin-bottom: 2px; } .lt-m-step { display: flex; align-items: center; gap: 6px; padding: 3px 2px; font-size: 11.5px; } .lt-m-step.skipped .lt-m-title { text-decoration: line-through; color: var(--text-faint); } .lt-m-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lt-m-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid var(--text-faint); background: transparent; box-sizing: border-box; } .lt-m-dot.done { background: var(--done); border-color: var(--done); } .lt-m-dot.progress { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-line); animation: ltPulse 1.6s infinite; } .lt-m-dot.delayed { background: var(--delayed); border-color: var(--delayed); } .lt-m-dot.skipped { background: var(--surface-3); border-color: var(--border-strong); } .lt-macro-open { display: block; margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--accent); text-decoration: none; } .lt-macro-open:hover { text-decoration: underline; } /* Mobile : le widget encombrerait — masqué. */ @media (max-width: 900px) { .lt { display: none; } } /* Lien « Voir plus » sous une section bornée de l'Explorer. */ .xp-more { display: block; text-align: center; margin-top: 10px; padding: 9px 0; border: 1px dashed var(--border-strong); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-muted); text-decoration: none; transition: color .13s, border-color .13s, background .13s; } .xp-more:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); } /* Bouton favori (étoile) — alimente le tri « Populaires ». */ .xp-fav { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: none; color: var(--text-faint); font: 600 12.5px/1 inherit; font-family: inherit; cursor: pointer; transition: color .13s, border-color .13s, background .13s; } .xp-fav:hover { color: var(--text); border-color: var(--border-strong); } .xp-fav .xp-fav-ico { fill: none; transition: fill .13s; } .xp-fav .xp-fav-n { font-variant-numeric: tabular-nums; } .xp-fav.is-fav { color: #e0a413; border-color: rgba(224,164,19,.45); background: rgba(224,164,19,.1); } .xp-fav.is-fav .xp-fav-ico { fill: currentColor; } .xp-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 20px; } .xp-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px 16px; } .xp-panel h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); margin-bottom: 10px; } .xp-panel-empty { color: var(--text-faint); font-size: 12.5px; } .xp-contrib { display: flex; align-items: center; gap: 10px; padding: 7px 4px; margin: 0 -4px; border-radius: 6px; text-decoration: none; color: inherit; transition: background .12s; } .xp-contrib:hover { background: var(--surface-2); } .xp-contrib + .xp-contrib { border-top: 1px solid var(--border); } .xp-rank { font-size: 12px; font-weight: 700; color: var(--text-faint); width: 15px; text-align: center; flex-shrink: 0; font-variant-numeric: tabular-nums; } .xp-contrib:nth-child(1) .xp-rank { color: var(--delayed); } .xp-contrib-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xp-contrib-count { font-size: 11.5px; font-weight: 700; color: var(--text-faint); flex-shrink: 0; font-variant-numeric: tabular-nums; } /* ---- Profil public ---- */ .prof-back { display: inline-block; font-size: 13px; font-weight: 600; color: var(--text-muted); text-decoration: none; margin-bottom: 16px; } .prof-back:hover { color: var(--accent); } .prof-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; } .prof-avatar { width: 68px; height: 68px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 25px; font-weight: 700; color: #fff; text-transform: uppercase; box-shadow: var(--shadow-sm); } .prof-id { flex: 1; min-width: 0; } .prof-id h1 { font-size: 22px; font-weight: 700; line-height: 1.2; } .prof-role { font-size: 13.5px; font-weight: 600; color: var(--accent); margin-top: 1px; } .prof-presence { font-size: 12.5px; color: var(--text-faint); margin-top: 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .prof-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; } .prof-dot.online { background: var(--done); box-shadow: 0 0 0 3px var(--done-bg); } .prof-mail { display: inline-block; font-size: 12.5px; color: var(--text-muted); text-decoration: none; margin-top: 5px; } .prof-mail:hover { color: var(--accent); text-decoration: underline; } .prof-edit { flex-shrink: 0; align-self: flex-start; } .prof-stats { grid-template-columns: repeat(3, 1fr); max-width: 520px; } @media (max-width: 760px) { .xp-stats { grid-template-columns: repeat(2, 1fr); } .xp-layout { grid-template-columns: 1fr; } .xp-side { position: static; } .prof-stats { grid-template-columns: repeat(3, 1fr); max-width: none; } } .tpl-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--text); cursor: pointer; padding: 6px 0; } .tpl-check input { margin-top: 2px; flex-shrink: 0; } .tpl-sub { margin: 4px 0 8px 22px; display: flex; flex-direction: column; gap: 6px; } .tpl-radio { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); cursor: pointer; } .tpl-hint { font-size: 12px; color: var(--text-faint); margin: 2px 0; } .empty-state { text-align: center; padding: 60px 24px; color: var(--text-faint); font-size: 14px; } .empty-state h2 { font-size: 17px; color: var(--text-muted); margin-bottom: 8px; } /* ---- Create form ---- */ .create-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 32px 36px; max-width: 500px; margin: 40px auto; } .create-card h1 { font-size: 20px; font-weight: 700; margin-bottom: 6px; } .create-card .sub { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; } .create-actions { display: flex; gap: 10px; margin-top: 20px; } /* ---- Settings page ---- */ .settings-wrap { max-width: 640px; margin: 32px auto; padding: 0 24px; } .settings-wrap h1 { font-size: 20px; font-weight: 700; margin-bottom: 4px; } .settings-wrap .back { font-size: 13px; color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; margin-bottom: 20px; } .settings-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; overflow: hidden; } .settings-section-head { padding: 14px 18px; border-bottom: 1px solid var(--border); } .settings-section-head h2 { font-size: 14px; font-weight: 600; } .settings-section-body { padding: 16px 18px; } .member-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); } .member-row:last-child { border-bottom: none; } .member-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; } .member-info { flex: 1; } .member-name { font-size: 13.5px; font-weight: 600; } .member-email { font-size: 12px; color: var(--text-faint); } .member-role { font-size: 12px; color: var(--text-muted); font-weight: 600; padding: 2px 8px; background: var(--surface-3); border-radius: 99px; } /* ---- Profile edit (dans le menu déroulant) ---- */ .profile-edit { padding: 10px; display: flex; flex-direction: column; gap: 8px; } .profile-edit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } .profile-edit-field { display: flex; flex-direction: column; gap: 3px; } .profile-edit-field label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); font-weight: 600; } .profile-edit-field input { border: 1px solid var(--border-strong); border-radius: 6px; padding: 6px 9px; font-family: inherit; font-size: 13px; background: var(--surface); color: var(--text); outline: none; transition: border-color .13s, box-shadow .13s; } .profile-edit-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-line); } .color-swatches { display: flex; gap: 6px; flex-wrap: wrap; padding: 2px 0; } .color-swatch { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform .13s, border-color .13s; } .color-swatch:hover { transform: scale(1.15); } .color-swatch.selected { border-color: var(--text); transform: scale(1.1); } .profile-edit-actions { display: flex; gap: 7px; padding-top: 2px; } .profile-edit-save { flex: 1; padding: 7px 12px; border-radius: 6px; font-size: 12.5px; font-weight: 600; background: var(--accent); color: #fff; border: none; cursor: pointer; transition: background .13s; } .profile-edit-save:hover { background: var(--accent-press); } .profile-edit-save:disabled { opacity: .55; cursor: not-allowed; } .profile-edit-cancel { padding: 7px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 500; background: none; border: 1px solid var(--border-strong); color: var(--text-muted); cursor: pointer; } .profile-edit-cancel:hover { background: var(--surface-3); } .menu-item-logout { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; padding: 9px 10px; border-radius: 7px; font-size: 13px; color: #c0392b; cursor: pointer; text-decoration: none; } .menu-item-logout:hover { background: #fee2e2; } .menu-item-logout svg { color: #c0392b; flex: 0 0 auto; } /* ================================================================ Header / sidebar / recherche globale — déplacés depuis l'inline de _header.html pour être rendus-bloquants (évite le FOUC : sidebar "blanche et grande" un instant au chargement). ================================================================ */ /* ================================================================ Header desktop ================================================================ */ .site-header { height: 60px; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 24px; position: sticky; top: 0; z-index: 100; } .site-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; } .site-brand-mark { width: 44px; height: 44px; border-radius: 9px; flex-shrink: 0; object-fit: contain; background: #fff; } .site-brand-name { font-size: 14px; font-weight: 700; color: var(--text, #14171c); } /* Nav centrée : spacers flex égaux */ .site-header-spacer { flex: 1; } .site-nav { display: flex; align-items: center; gap: 2px; } .site-nav-link { display: flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 7px; text-decoration: none; font-size: 13px; font-weight: 500; color: var(--text-muted, #5b636e); transition: background .13s, color .13s; white-space: nowrap; } .site-nav-link:hover { background: var(--surface-3, #eef0f3); color: var(--text, #14171c); } .site-nav-link.active { background: var(--surface-3, #eef0f3); color: var(--text, #14171c); font-weight: 600; } .site-nav-link svg { flex-shrink: 0; } /* Espace droit pour ne pas chevaucher le widget profil */ .site-header-right { flex: 1; min-width: 190px; } /* Bascule jour/nuit — vit en bas de la sidebar desktop (voir media ≥769px). Cachée sur mobile : le drawer porte sa propre entrée (drawer-footer-link). */ .site-theme-toggle { display: none; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border, #e1e4e9); background: none; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text-muted, #5b636e); cursor: pointer; transition: background .13s, color .13s, border-color .13s; } .site-theme-toggle:hover { background: var(--surface-3, #eef0f3); color: var(--text, #14171c); border-color: var(--border-strong, #cdd2da); } .site-theme-toggle svg { flex-shrink: 0; } /* ---- Sélecteur de langue FR | EN (segmented control) ---- Les deux langues restent visibles ; la courante est un mis en évidence (pas un bouton : cliquer sur la langue déjà active ne ferait rien). */ .lang-switch { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 99px; background: var(--surface-3, #eef0f3); border: 1px solid var(--border, #e1e4e9); } .lang-seg { flex: 1; padding: 5px 12px; border-radius: 99px; border: none; background: none; font-family: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; color: var(--text-faint, #8b929d); text-align: center; white-space: nowrap; transition: background .13s, color .13s, box-shadow .13s; } button.lang-seg { cursor: pointer; } button.lang-seg:hover { color: var(--text, #14171c); } .lang-seg.on { background: var(--surface, #fff); color: var(--text, #14171c); box-shadow: 0 1px 2px rgba(20, 23, 28, .10); } /* Instance sidebar : masquée sur mobile, où le drawer porte la sienne. */ .site-lang-switch { display: none; } /* Ligne « Langue » du footer du drawer (mobile) */ .drawer-lang { display: flex; align-items: center; gap: 12px; padding: 8px 12px; margin-bottom: 2px; font-size: 13.5px; font-weight: 500; color: var(--text-muted, #5b636e); } .drawer-lang svg { flex-shrink: 0; } .drawer-lang-switch { margin-left: auto; flex-shrink: 0; } /* Le drawer mobile réutilise .drawer-footer-link sur un