/* ============================================================= Agile Toolkit — Thème partagé Identité visuelle commune au lanceur et aux outils. Base + composants sont volontairement préfixés / scopés : - variables globales -> :root - styles de base -> .tk (à poser sur ) - composants réutilisables -> .tk-btn, .tk-card, .tk-badge, ... Ce scoping rend le fichier sûr à inclure partout : une page qui ne porte pas la classe .tk (ex. l'outil sprint-planning existant, qui garde ses styles inline) n'est pas affectée, seules les variables :root inutilisées sont ajoutées. ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap'); :root { /* ── Palette ───────────────────────────────────────────── */ --navy: #0C1A2E; /* navy foncé */ --navy-2: #1A2E4A; /* navy moyen */ --accent: #0C447C; /* bleu accent */ --accent-dark: #093561; /* hover accent */ --green: #1A7A42; /* succès / actions */ --green-dark: #155F34; /* hover vert */ --green-bg: #E7F2EC; /* fond vert doux */ --red: #C0392B; /* alerte */ --red-bg: #FBEAE8; --border: #E8EAED; /* gris bordure */ --muted: #6B7A90; /* gris texte */ --bg: #F4F5F7; /* gris fond */ --white: #FFFFFF; --text: #0C1A2E; /* texte courant = navy */ /* ── Typographie ──────────────────────────────────────── */ --font: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ── Rayons / ombres / transitions ────────────────────── */ --radius: 6px; --radius-2: 12px; --shadow: 0 1px 3px rgba(12, 26, 46, .05); --shadow-hover: 0 8px 28px rgba(12, 26, 46, .10); --ease: all .18s ease; /* ── Échelle d'espacement ──────────────────────────────── */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; /* ── Points de rupture (breakpoints) ──────────────────── Référence partagée pour les media queries du toolkit : • mobile : < 640px • tablette : 640px – 1024px • desktop : > 1024px CSS n'autorise pas une variable custom dans une condition @media : ces valeurs sont donc dupliquées dans les @media et doivent rester synchronisées avec celles-ci. */ --bp-mobile: 640px; --bp-tablet: 1024px; } /* ── Base (scopée à .tk) ──────────────────────────────────── */ .tk, .tk *, .tk *::before, .tk *::after { box-sizing: border-box; } .tk * { margin: 0; padding: 0; } .tk { min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Texture de grille discrète, signature visuelle de la plateforme */ .tk::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(rgba(12, 26, 46, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(12, 26, 46, .03) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; z-index: 0; } .tk > * { position: relative; z-index: 1; } .tk a { color: var(--accent); text-decoration: none; } .tk a:hover { text-decoration: underline; } /* ── Eyebrow / petit label mono ───────────────────────────── */ .tk-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; } .tk-eyebrow::before { content: ''; width: 18px; height: 2px; background: var(--accent); } /* ── Conteneur centré ─────────────────────────────────────── */ .tk-container { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); } /* ── Boutons ──────────────────────────────────────────────── */ .tk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border: 1.5px solid transparent; border-radius: var(--radius); font-family: var(--font); font-size: 13px; font-weight: 700; letter-spacing: .3px; line-height: 1; cursor: pointer; text-decoration: none; white-space: nowrap; transition: var(--ease); } .tk-btn:hover { text-decoration: none; } .tk-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .tk-btn--primary { background: var(--green); color: var(--white); } .tk-btn--primary:hover { background: var(--green-dark); } .tk-btn--accent { background: var(--accent); color: var(--white); } .tk-btn--accent:hover { background: var(--accent-dark); } .tk-btn--ghost { background: transparent; color: var(--navy); border-color: var(--border); } .tk-btn--ghost:hover { border-color: var(--muted); background: var(--white); } /* Bouton sur fond navy (topbars) */ .tk-btn--on-dark { background: rgba(255, 255, 255, .12); color: var(--white); border-color: rgba(255, 255, 255, .22); } .tk-btn--on-dark:hover { background: rgba(255, 255, 255, .22); } /* ── Cartes ───────────────────────────────────────────────── */ .tk-card { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius-2); padding: 22px; box-shadow: var(--shadow); transition: var(--ease); } .tk-card--hover:hover { border-color: #C8CDD6; box-shadow: var(--shadow-hover); transform: translateY(-3px); } /* ── Badges / pastilles ───────────────────────────────────── */ .tk-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .3px; line-height: 1.4; white-space: nowrap; } .tk-badge--ok { background: var(--green-bg); color: var(--green); } .tk-badge--preview { background: #EAF1F8; color: var(--accent); } .tk-badge--muted { background: var(--bg); color: var(--muted); border: 1px solid var(--border); } .tk-badge--alert { background: var(--red-bg); color: var(--red); } .tk-badge--dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } /* ── Barre supérieure partagée (topbar outil) ───────────────── Entête neutre commune à tous les outils : carré accent + « Agile Toolkit » (lien vers le lanceur), séparateur, nom de l'outil, version, puis emplacement d'actions à droite. Couleurs en littéral pour un rendu identique quel que soit le thème local de l'outil. */ .tk-topbar { background: #0C1A2E; height: 56px; flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding-inline: clamp(16px, 4vw, 40px); position: relative; z-index: 40; } .tk-topbar__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .tk-topbar__logo:hover { text-decoration: none; } .tk-topbar__logo .sq { width: 11px; height: 11px; background: #0C447C; flex-shrink: 0; } .tk-topbar__logo .wm { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 16px; color: #FFFFFF; letter-spacing: -.4px; white-space: nowrap; } .tk-topbar__sep { width: 1px; height: 24px; background: rgba(255,255,255,.15); flex-shrink: 0; } .tk-topbar__tool { font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.85); letter-spacing: .3px; white-space: nowrap; } .tk-topbar__version { font-family: 'DM Mono', monospace; font-size: 10px; color: rgba(255,255,255,.35); letter-spacing: 1px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .tk-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }