/* ================================================================ Gestion.Ordre-x — feuille de style principale Palette Thorium : navy #0F2C4A, or #C9A063 ================================================================ */ :root { /* Palette Burger National — charbon chaud + accent corail */ --fond: #1C1B19; --fond-carte: #232220; --fond-carte-hover: #2a2925; --bordure: #34322E; --bordure-forte: #4a4741; --texte: #ECEAE6; --texte-muet: #9A958D; --accent: #E0846A; /* corail principal */ --accent-clair: #EBA491; --accent-fonce: #C56A50; /* Aliases historiques (rétro-compatibilité avec le code existant) */ --navy: var(--accent); --navy-clair: var(--accent-clair); --or: var(--accent); --or-clair: var(--accent-clair); --succes: #6BB77B; --alerte: #E5B14A; --erreur: #D96D5C; --fond-thead: #2d2c29; --texte-thead: #FFFFFF; --pestel-p: #D96D5C; --pestel-p-bg: #3a2a26; --pestel-e: #E5B14A; --pestel-e-bg: #3a3122; --pestel-s: #6DA8D8; --pestel-s-bg: #23303a; --pestel-t: #6BB77B; --pestel-t-bg: #223328; --pestel-ec: #A182C0; --pestel-ec-bg: #2d2634; --pestel-l: #8A857D; --pestel-l-bg: #2b2a26; --ombre-douce: 0 1px 2px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.25); --ombre-carte: 0 4px 14px rgba(0,0,0,0.4); --radius: 8px; --radius-sm: 4px; --gap-1: 4px; --gap-2: 8px; --gap-3: 12px; --gap-4: 16px; --gap-5: 24px; --gap-6: 32px; } /* ------------------------------------------------------------------ THÈME CLAIR (surcharge quand data-theme="light" sur ) Palette Burger National version jour : blanc cassé chaud + charbon. ------------------------------------------------------------------ */ :root[data-theme="light"] { --fond: #F7F5F1; --fond-carte: #FFFFFF; --fond-carte-hover: #F0EDE6; --bordure: #E5E1D8; --bordure-forte: #C8C2B6; --texte: #2A2925; --texte-muet: #6B655C; /* Accent corail identique — signature Burger National conservée */ --accent: #C56A50; /* légèrement plus dense pour contraste sur fond clair */ --accent-clair: #E0846A; --accent-fonce: #A54F38; --succes: #4A9B5C; --alerte: #C08A22; --erreur: #B44A3B; --fond-thead: #2A2925; --texte-thead: #F7F5F1; --pestel-p: #B44A3B; --pestel-p-bg: #FDECE7; --pestel-e: #C08A22; --pestel-e-bg: #FBF3DF; --pestel-s: #4A88B8; --pestel-s-bg: #E7F1F9; --pestel-t: #4A9B5C; --pestel-t-bg: #E5F5EA; --pestel-ec: #8264A0; --pestel-ec-bg: #F0E9F6; --pestel-l: #6A655C; --pestel-l-bg: #EEECE6; --ombre-douce: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04); --ombre-carte: 0 4px 14px rgba(0,0,0,0.08); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Cambria", sans-serif; background: var(--fond); color: var(--texte); font-size: 14px; line-height: 1.5; } a { color: var(--navy); text-decoration: none; } a:hover { color: var(--or); } button { font: inherit; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } /* ---------- Layout général ---------- */ .app-layout { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: 52px 1fr; grid-template-areas: "sidebar header" "sidebar main"; height: 100vh; overflow: hidden; } .app-header { grid-area: header; background: var(--fond-carte); border-bottom: 1px solid var(--bordure); display: flex; align-items: center; justify-content: space-between; padding: 0 14px; height: 56px; z-index: 10; color: var(--texte); gap: 12px; } .app-header .titre-projet h1 { color: var(--texte); } .app-header .titre-projet .sous-titre { color: var(--texte-muet); } .app-header .titre-projet { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 220px; flex-shrink: 0; } .app-header .titre-projet h1 { font-size: 13px; font-weight: 600; color: var(--accent, #E0846A); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; line-height: 1.2; } .app-header .titre-projet .sous-titre { font-size: 11px; color: var(--texte-muet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-header .actions { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: flex-end; min-width: 0; } /* Hauteur commune sur TOUS les composants de la barre */ .app-header .actions > * , .app-header .actions .btn, .app-header .actions form > .btn { height: 34px; box-sizing: border-box; } .app-header .actions .btn { padding: 0 12px; font-size: 12px; white-space: nowrap; line-height: 1; } .app-header .actions .btn.btn-or { /* Bouton IA : compact, pas de wrap, badge accent */ padding: 0 12px; font-size: 12px; font-weight: 600; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 6px rgba(224, 132, 106, 0.22); } .app-header .actions form { display: inline-flex; align-items: center; margin: 0; } .app-header .actions form > button { height: 34px; } /* Séparateurs subtils entre groupes fonctionnels */ .app-header .barre-sep { width: 1px; height: 22px; background: var(--bordure); margin: 0 4px; flex-shrink: 0; } /* Sur écrans étroits : masquer le libellé Export, garder l'icône */ @media (max-width: 1200px) { .app-header .actions .btn.btn-or { max-width: 180px; } } @media (max-width: 1000px) { .app-header .titre-projet { max-width: 140px; } .app-header .actions { gap: 6px; } .app-header .actions .btn { padding: 0 10px; } } .app-sidebar { grid-area: sidebar; background: var(--fond-carte); border-right: 1px solid var(--bordure); color: var(--texte); padding: var(--gap-4) 0; overflow-y: auto; } /* Sélecteur de domaine — pilules en haut de la sidebar */ .selecteur-domaine { display: flex; gap: 4px; padding: 0 var(--gap-3) var(--gap-3); margin-bottom: var(--gap-2); border-bottom: 1px solid var(--bordure); } .btn-domaine { flex: 1; background: transparent; border: 1px solid var(--bordure); color: var(--texte-muet); padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; transition: all 0.15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .btn-domaine:hover { color: var(--texte); border-color: var(--bordure-forte); } .btn-domaine.actif { background: var(--accent); border-color: var(--accent); color: #fff; } /* ============================================================================ Vision de communication — 5 blocs ============================================================================ */ .vision-comm-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gap-3); margin-bottom: var(--gap-4); } .vision-comm-bloc { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-height: 220px; position: relative; transition: border-color 0.15s; } .vision-comm-bloc:hover { border-color: var(--accent); } .vision-comm-header { display: flex; gap: 10px; align-items: flex-start; padding-bottom: 8px; border-bottom: 1px solid var(--bordure); } .vision-comm-icone { font-size: 24px; flex-shrink: 0; } .vision-comm-num { font-size: 10px; letter-spacing: 0.06em; color: var(--accent); text-transform: uppercase; font-weight: 700; } .vision-comm-label { font-size: 14px; font-weight: 700; color: var(--texte); } .btn-init-vision { margin-left: auto; font-size: 11px; padding: 4px 10px; } .vision-comm-textarea, .vision-comm-remarques { background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--radius-sm); padding: 8px 10px; color: var(--texte); font-size: 13px; resize: vertical; font-family: inherit; } .vision-comm-textarea:focus, .vision-comm-remarques:focus { outline: none; border-color: var(--accent); } .vision-comm-remarques { font-size: 12px; color: var(--texte-muet); } /* ============================================================================ Groupe cible communication — cartes persona ============================================================================ */ .gcc-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--gap-3); } .gcc-carte { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; transition: border-color 0.15s; } .gcc-carte:hover { border-color: var(--bordure-forte); } .gcc-carte-header { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--bordure); } .gcc-num { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; border-radius: 50%; font-weight: 700; font-size: 12px; flex-shrink: 0; } .gcc-nom { flex: 1; background: transparent; border: 1px solid transparent; padding: 4px 6px; color: var(--texte); font-size: 15px; font-weight: 700; } .gcc-nom:hover { border-color: var(--bordure); } .gcc-nom:focus { border-color: var(--accent); outline: none; background: var(--fond); } .gcc-carte-corps { display: flex; flex-direction: column; gap: 10px; } .gcc-carte-corps label { display: flex; flex-direction: column; gap: 4px; } .gcc-carte-corps label span { font-size: 11px; color: var(--texte-muet); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } .gcc-carte-corps input, .gcc-carte-corps textarea { background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--radius-sm); padding: 6px 8px; color: var(--texte); font-size: 13px; font-family: inherit; resize: vertical; } .gcc-carte-corps input:focus, .gcc-carte-corps textarea:focus { outline: none; border-color: var(--accent); } /* ============================================================================ Strategy Map — 4 perspectives Kaplan-Norton (ordre visuel Financière → App.) ============================================================================ */ .smap-perspectives { display: flex; flex-direction: column; gap: var(--gap-3); } .smap-perspective { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .smap-perspective-header { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 10px; border-bottom: 1px solid var(--bordure); } .smap-icone { font-size: 22px; flex-shrink: 0; } .smap-titre-wrap { flex: 1; min-width: 0; } .smap-num-lvl { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-muet); font-weight: 700; } .smap-titre { font-size: 15px; font-weight: 700; color: var(--texte); margin-top: 2px; } .smap-question { font-size: 12px; color: var(--texte-muet); font-style: italic; margin-top: 3px; } .smap-compteur { font-size: 11px; padding: 3px 8px; background: var(--fond); border: 1px solid var(--bordure); border-radius: 10px; color: var(--texte-muet); white-space: nowrap; flex-shrink: 0; } .smap-objectifs { display: flex; flex-direction: column; gap: 8px; } .smap-objectif { background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } .smap-obj-header { display: flex; gap: 8px; align-items: center; } .smap-obj-titre { flex: 1; background: transparent; border: 1px solid transparent; padding: 4px 6px; color: var(--texte); font-size: 14px; font-weight: 600; resize: vertical; font-family: inherit; min-height: 32px; } .smap-obj-titre:hover { border-color: var(--bordure); background: var(--fond-carte); } .smap-obj-titre:focus { border-color: var(--accent); background: var(--fond-carte); outline: none; } .smap-obj-meta { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; } .smap-champ { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 130px; } .smap-champ span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texte-muet); font-weight: 600; } .smap-champ input, .smap-champ textarea { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius-sm); padding: 5px 8px; color: var(--texte); font-size: 12px; font-family: inherit; } .smap-champ input:focus, .smap-champ textarea:focus { outline: none; border-color: var(--accent); } .smap-lien { padding-top: 4px; border-top: 1px dashed var(--bordure); } .smap-lien span::before { content: ""; } .smap-btn-ajout { align-self: flex-start; font-size: 11px; padding: 5px 12px; } .smap-objectif .btn-supprimer-item { background: transparent; border: none; color: var(--texte-muet); cursor: pointer; font-size: 16px; padding: 0 6px; opacity: 0; transition: opacity 0.1s; } .smap-objectif:hover .btn-supprimer-item { opacity: 1; } .smap-objectif .btn-supprimer-item:hover { color: var(--erreur); } :root:not([data-theme="light"]) .app-sidebar { background: linear-gradient(180deg, #1A1917 0%, #16150F 100%); } .app-sidebar .logo { padding: 0 var(--gap-4) var(--gap-4); border-bottom: 1px solid var(--bordure); margin-bottom: var(--gap-3); } .app-sidebar .logo .marque { font-size: 15px; font-weight: 700; letter-spacing: 0.06em; color: var(--accent); text-transform: uppercase; } .app-sidebar .logo .sous { font-size: 11px; color: var(--texte-muet); margin-top: 2px; letter-spacing: 0.04em; } .nav-modules { list-style: none; padding: 0 var(--gap-2); } .nav-modules li a { display: flex; align-items: center; gap: var(--gap-2); padding: 8px 12px; color: var(--texte-muet); border-radius: var(--radius-sm); font-size: 13px; line-height: 1.3; position: relative; } .nav-modules li a:hover { background: rgba(224,132,106,0.08); color: var(--texte); } .nav-modules li a.actif { background: rgba(224,132,106,0.14); color: var(--accent); border-left: 2px solid var(--accent); padding-left: 10px; } .nav-modules .nav-groupe { color: var(--texte-muet); opacity: 0.75; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; padding: 12px 12px 4px; pointer-events: none; border-top: 1px solid var(--bordure); margin-top: 6px; } .nav-modules .nav-groupe:first-of-type { border-top: none; margin-top: 0; } .nav-modules li a.inactif { opacity: 0.45; } .nav-modules li a.inactif::after { content: "à venir"; font-size: 10px; background: var(--bordure); color: var(--texte-muet); padding: 1px 6px; border-radius: 8px; margin-left: auto; } .nav-modules .num { font-family: "SF Mono", Menlo, monospace; font-size: 11px; color: var(--texte-muet); min-width: 22px; text-align: right; } .nav-modules li a.actif .num { color: var(--accent); } .app-main { grid-area: main; padding: var(--gap-3) var(--gap-4); overflow-y: auto; overflow-x: hidden; min-width: 0; } /* ---------- Boutons ---------- */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--bordure-forte); background: var(--fond-carte); border-radius: var(--radius-sm); color: var(--texte); font-weight: 500; font-size: 13px; transition: all 0.15s ease; } .btn:hover { border-color: var(--navy); background: var(--fond-carte-hover); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primaire { background: var(--navy); color: var(--texte-thead); border-color: var(--navy); } .btn-primaire:hover { background: var(--navy-clair); border-color: var(--navy-clair); color: var(--texte-thead); } .btn-or { background: var(--accent); color: var(--texte-thead); border-color: var(--accent); font-weight: 600; } .btn-or:hover { background: var(--accent-clair); border-color: var(--accent-clair); color: var(--texte-thead); } .btn-fantome { background: transparent; border-color: transparent; color: var(--texte-muet); } .btn-fantome:hover { color: var(--navy); background: rgba(15,44,74,0.05); } .btn-icone { padding: 6px; min-width: 28px; justify-content: center; } /* ---------- Formulaires ---------- */ .formulaire { max-width: 480px; margin: 80px auto; background: var(--fond-carte); padding: var(--gap-6); border-radius: var(--radius); box-shadow: var(--ombre-carte); } .formulaire h1 { font-size: 22px; color: var(--navy); margin-bottom: var(--gap-2); } .formulaire .sous-titre { color: var(--texte-muet); margin-bottom: var(--gap-5); font-size: 13px; } .champ { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--gap-3); } .champ label { font-size: 12px; color: var(--texte-muet); font-weight: 500; letter-spacing: 0.02em; } .champ input[type="text"], .champ input[type="email"], .champ input[type="password"], .champ textarea, .champ select { padding: 8px 10px; border: 1px solid var(--bordure); border-radius: var(--radius-sm); background: var(--fond-carte); transition: border-color 0.15s; } .champ input:focus, .champ textarea:focus, .champ select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 2px rgba(15,44,74,0.1); } .champ textarea { resize: vertical; min-height: 60px; } .flash-messages { max-width: 480px; margin: 12px auto 0; } .flash { padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 8px; font-size: 13px; } .flash-info { background: rgba(109,168,216,0.15); color: var(--pestel-s); } .flash-success { background: rgba(107,183,123,0.15); color: var(--succes); } .flash-error { background: rgba(217,109,92,0.15); color: var(--erreur); } /* ---------- Auth ---------- */ .auth-lien { text-align: center; margin-top: var(--gap-4); font-size: 13px; color: var(--texte-muet); } /* ---------- Dashboard ---------- */ .dashboard-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--gap-5); } .dashboard-header h1 { font-size: 20px; color: var(--navy); font-weight: 600; } .projets-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gap-4); } .projet-carte { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: var(--gap-4); transition: all 0.15s; display: flex; flex-direction: column; gap: 8px; } .projet-carte:hover { border-color: var(--navy); box-shadow: var(--ombre-douce); transform: translateY(-1px); } .projet-carte h3 { font-size: 15px; font-weight: 600; color: var(--navy); } .projet-carte .meta { font-size: 12px; color: var(--texte-muet); display: flex; gap: var(--gap-3); flex-wrap: wrap; } .projet-carte .description { font-size: 13px; color: var(--texte); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vide { text-align: center; padding: var(--gap-6); color: var(--texte-muet); } /* ---------- Bandeau page ---------- */ .bandeau-page { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: 10px var(--gap-4); margin-bottom: var(--gap-3); display: flex; align-items: center; justify-content: space-between; gap: var(--gap-4); } .bandeau-page .titre { display: flex; align-items: center; gap: var(--gap-3); } .bandeau-page .titre .numero { background: var(--accent); color: #fff; font-weight: 700; padding: 4px 8px; border-radius: var(--radius-sm); font-family: "SF Mono", Menlo, monospace; font-size: 12px; min-width: 32px; text-align: center; } .bandeau-page .titre h2 { font-size: 15px; color: var(--accent); letter-spacing: 0.03em; text-transform: uppercase; font-weight: 600; } /* ---------- Sections graphiques + tableaux ---------- */ .section { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: var(--gap-3) var(--gap-4); margin-bottom: var(--gap-3); } .section-titre { font-size: 12px; color: var(--navy); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--bordure); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .grille-charts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-3); margin-bottom: var(--gap-3); } @media (max-width: 1100px) { .grille-charts { grid-template-columns: 1fr; } } .chart-conteneur { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: var(--gap-3); display: flex; flex-direction: column; gap: 8px; min-height: 340px; } .chart-conteneur canvas, .chart-conteneur svg { flex: 1; max-height: 400px; min-height: 0; } /* ---------- Tableau ---------- */ .tableau-conteneur { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--bordure); background: var(--fond-carte); } .tableau { width: 100%; border-collapse: collapse; font-size: 13px; } .tableau thead th { background: var(--fond-thead); color: var(--texte-thead); font-weight: 600; padding: 6px 10px; text-align: left; font-size: 11px; letter-spacing: 0.04em; /* le thead reste sombre dans les deux thèmes → séparateur clair OK */ border-right: 1px solid rgba(255,255,255,0.1); white-space: nowrap; } .tableau tbody tr { border-bottom: 1px solid var(--bordure); transition: background 0.1s; } .tableau tbody tr:hover { background: var(--fond-carte-hover); } /* Zébrage : léger tint contrastant avec --fond-carte, dépendant du thème */ :root:not([data-theme="light"]) .tableau tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); } :root[data-theme="light"] .tableau tbody tr:nth-child(even) { background: rgba(0,0,0,0.02); } .tableau tbody tr:nth-child(even):hover { background: var(--fond-carte-hover); } .tableau tbody td { padding: 4px 10px; vertical-align: middle; border-right: 1px solid var(--bordure); } .tableau tbody td:last-child { border-right: none; } .tableau .col-no { background: var(--bordure); color: var(--texte-muet); font-family: "SF Mono", Menlo, monospace; font-size: 12px; text-align: center; width: 44px; font-weight: 500; } /* Champs éditables inline */ .editable { background: transparent; border: 1px solid transparent; padding: 4px 6px; border-radius: var(--radius-sm); width: 100%; min-height: 24px; resize: none; transition: all 0.1s; color: var(--texte); font-family: inherit; font-size: 13px; } .editable:hover { border-color: var(--bordure); background: var(--fond-carte); } .editable:focus { outline: none; border-color: var(--navy); background: var(--fond-carte); box-shadow: 0 0 0 2px rgba(15,44,74,0.08); } textarea.editable { min-height: 40px; } /* Compteur de barres pour intensité 0-10 ou 0-4 */ .compteur-barres { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; transition: all 0.1s; } .compteur-barres:hover { border-color: var(--bordure); background: var(--fond-carte); } .compteur-barres .barres { display: inline-flex; align-items: flex-end; gap: 1px; height: 16px; } .compteur-barres .barre { width: 3px; background: var(--bordure-forte); border-radius: 1px; } .compteur-barres .barre.actif { background: var(--navy); } .compteur-barres .valeur { font-family: "SF Mono", Menlo, monospace; font-weight: 500; color: var(--navy); min-width: 20px; text-align: right; } /* Étoiles pour taille du groupe (0-3) */ .etoiles { display: inline-flex; gap: 2px; cursor: pointer; padding: 4px; border-radius: var(--radius-sm); border: 1px solid transparent; } .etoiles:hover { border-color: var(--bordure); background: var(--fond-carte); } .etoiles .etoile { color: var(--bordure-forte); font-size: 16px; line-height: 1; } .etoiles .etoile.actif { color: var(--or); } /* Tendance : flèches */ .tendance { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 24px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; font-size: 15px; color: var(--texte-muet); } .tendance:hover { border-color: var(--bordure); background: var(--fond-carte); } .tendance.hausse { color: var(--succes); } .tendance.baisse { color: var(--erreur); } .tendance.stable { color: var(--texte-muet); } /* Statut */ .statut { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 24px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; font-size: 14px; } .statut:hover { border-color: var(--bordure); background: var(--fond-carte); } .statut.ok { color: var(--succes); } .statut.attention { color: var(--alerte); } .statut.ko { color: var(--erreur); } .statut.vide { color: var(--bordure-forte); } /* Cellule de contrôle sauvegarde */ td.sauvegarde-etat { width: 20px; text-align: center; color: var(--texte-muet); font-size: 11px; } td.sauvegarde-etat.ok { color: var(--succes); } td.sauvegarde-etat.en-cours { color: var(--alerte); } /* ---------- PESTEL — layout fidèle au PDF (radar central + 6 badges hexagonaux) ---------- */ .pestel-tete { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: var(--gap-5); margin-bottom: var(--gap-5); } .pestel-radar-zone { position: relative; max-width: 640px; margin: 0 auto; aspect-ratio: 1; } .pestel-radar-centre { position: absolute; inset: 15%; } .pestel-radar-centre canvas { width: 100% !important; height: 100% !important; } .badge-hexa { position: absolute; width: 120px; padding: 8px 10px; background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: 6px; text-align: center; box-shadow: var(--ombre-douce); transition: transform 0.15s; z-index: 5; } .badge-hexa:hover { transform: translateY(-1px) scale(1.02); } .badge-hexa .lettre { font-family: "Cambria", serif; font-size: 26px; font-weight: 700; line-height: 1; margin-bottom: 2px; } .badge-hexa .nom { font-size: 10px; color: var(--texte-muet); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; } .badge-hexa .compteurs { display: flex; gap: 3px; justify-content: center; font-family: "SF Mono", Menlo, monospace; font-size: 10px; font-weight: 600; } .badge-hexa .compteurs span { padding: 1px 5px; border-radius: 3px; min-width: 22px; } .badge-hexa .compteurs .haut { background: rgba(107,183,123,0.15); color: var(--succes); } .badge-hexa .compteurs .stable{ background: rgba(229,177,74,0.15); color: var(--alerte); } .badge-hexa .compteurs .bas { background: rgba(217,109,92,0.15); color: var(--erreur); } /* Couleurs sémantiques PESTEL : tokens double thème */ .badge-hexa[data-cat="politique"] .lettre { color: var(--pestel-p); } .badge-hexa[data-cat="economique"] .lettre { color: var(--pestel-e); } .badge-hexa[data-cat="sociologique"] .lettre { color: var(--pestel-s); } .badge-hexa[data-cat="technologique"].lettre { color: var(--pestel-t); } .badge-hexa[data-cat="ecologique"] .lettre { color: var(--pestel-ec); } .badge-hexa[data-cat="legislative"] .lettre { color: var(--pestel-l); } /* Positions autour du radar (hexagone) */ .badge-hexa.position-p { top: 0; left: 50%; transform: translateX(-50%); } .badge-hexa.position-p:hover { transform: translateX(-50%) translateY(-1px) scale(1.02); } .badge-hexa.position-e { top: 25%; right: 0; } .badge-hexa.position-s { bottom: 25%; right: 0; } .badge-hexa.position-t { bottom: 0; left: 50%; transform: translateX(-50%); } .badge-hexa.position-t:hover { transform: translateX(-50%) translateY(-1px) scale(1.02); } .badge-hexa.position-env { bottom: 25%; left: 0; } .badge-hexa.position-l { top: 25%; left: 0; } @media (max-width: 900px) { .pestel-radar-zone { aspect-ratio: auto; height: auto; } .badge-hexa { position: static; width: 100%; margin-bottom: 8px; } .pestel-radar-centre { position: static; inset: auto; height: 400px; margin-top: var(--gap-4); } } /* Legende bandeau */ .bandeau-page .legende .sep { color: var(--bordure-forte); padding: 0 4px; } /* ---------- PESTEL : tableaux par catégorie ---------- */ .pestel-section { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); overflow: hidden; margin-bottom: 10px; } .pestel-section .pestel-header { background: transparent !important; color: var(--texte); padding: 8px 14px; display: flex; align-items: center; gap: var(--gap-3); border-bottom: 1px solid var(--bordure); } .pestel-lettre { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--texte-thead); border-radius: 6px; font-family: "Cambria", serif; font-weight: 700; font-size: 15px; flex-shrink: 0; } .pestel-titre-section { flex: 1; font-size: 14px; font-weight: 600; color: var(--navy); letter-spacing: 0.02em; } .pestel-compteur { font-family: "SF Mono", Menlo, monospace; font-size: 11px; color: var(--texte-muet); padding: 3px 8px; background: var(--bordure); border-radius: 10px; } .pestel-tableau-conteneur { border: none !important; border-radius: 0 !important; } /* Bandeau coloré selon la catégorie sur le bord gauche */ .pestel-section[data-cat="politique"] { border-left: 3px solid var(--pestel-p); } .pestel-section[data-cat="economique"] { border-left: 3px solid var(--pestel-e); } .pestel-section[data-cat="sociologique"] { border-left: 3px solid var(--pestel-s); } .pestel-section[data-cat="technologique"]{ border-left: 3px solid var(--pestel-t); } .pestel-section[data-cat="ecologique"] { border-left: 3px solid var(--pestel-ec); } .pestel-section[data-cat="legislative"] { border-left: 3px solid var(--pestel-l); } /* Pied de section avec bouton + somme */ .pestel-pied { display: flex; align-items: center; justify-content: space-between; padding: 6px 14px; background: var(--fond-carte-hover); border-top: 1px solid var(--bordure); } /* Tables vides : masquer le message par défaut avec un CSS discret */ .tableau tbody:empty::after, .pestel-tableau tbody:empty::after, .porter-tableau tbody:empty::after { content: "Aucune ligne — utilisez le bouton + Ajouter ou ✨ Pré-remplir avec l'IA"; display: table-row; color: var(--texte-muet); font-size: 11px; font-style: italic; padding: 8px 14px; text-align: center; } .pestel-somme-ligne { display: flex; align-items: center; gap: 10px; } .somme-label { font-size: 12px; color: var(--texte-muet); text-transform: uppercase; letter-spacing: 0.06em; } .somme-valeur { font-family: "SF Mono", Menlo, monospace; font-weight: 700; color: var(--navy); padding: 3px 12px; background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius-sm); min-width: 40px; text-align: center; } .pestel-section .tableau tbody tr:nth-child(odd) td { background: transparent; } .pestel-section .tableau tbody tr:hover td { background: var(--fond-carte-hover); } /* Retirer les anciens styles pastels */ .pestel-section { margin-bottom: var(--gap-4); } .pestel-header { display: flex; align-items: center; gap: var(--gap-3); padding: 10px 14px; border-radius: var(--radius) var(--radius) 0 0; color: var(--texte-thead); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; } .pestel-lettre { background: rgba(255,255,255,0.25); color: var(--texte-thead); width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-family: "Cambria", serif; font-weight: 700; font-size: 13px; } .pestel-section[data-cat="politique"] .pestel-header { background: var(--pestel-p); } .pestel-section[data-cat="economique"] .pestel-header { background: var(--pestel-e); } .pestel-section[data-cat="sociologique"] .pestel-header { background: var(--pestel-s); } .pestel-section[data-cat="technologique"] .pestel-header { background: var(--pestel-t); } .pestel-section[data-cat="ecologique"] .pestel-header { background: var(--pestel-ec); } .pestel-section[data-cat="legislative"] .pestel-header { background: var(--pestel-l); } .pestel-section .tableau-conteneur { border-top: none; border-radius: 0 0 var(--radius) var(--radius); } .pestel-section[data-cat="politique"] .tableau tbody tr:nth-child(odd) td { background: rgba(185, 74, 72, 0.04); } .pestel-section[data-cat="economique"] .tableau tbody tr:nth-child(odd) td { background: rgba(210, 105, 30, 0.04); } .pestel-section[data-cat="sociologique"] .tableau tbody tr:nth-child(odd) td { background: rgba(93, 173, 226, 0.06); } .pestel-section[data-cat="technologique"].tableau tbody tr:nth-child(odd) td { background: rgba(88, 214, 141, 0.06); } .pestel-section[data-cat="ecologique"] .tableau tbody tr:nth-child(odd) td { background: rgba(155, 89, 182, 0.05); } .pestel-section[data-cat="legislative"] .tableau tbody tr:nth-child(odd) td { background: rgba(127, 140, 141, 0.06); } .pestel-somme { display: flex; align-items: center; justify-content: flex-end; gap: var(--gap-2); padding: 8px 14px; background: var(--fond); border-top: 1px solid var(--bordure); font-size: 13px; color: var(--texte-muet); } .pestel-somme .valeur { font-weight: 700; color: var(--navy); font-family: "SF Mono", Menlo, monospace; padding: 2px 10px; background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius-sm); } /* Badges PESTEL autour du radar */ .pestel-badges { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap-2); margin-top: var(--gap-3); } .pestel-badge { display: flex; flex-direction: column; align-items: center; padding: 8px 6px; border-radius: var(--radius-sm); background: var(--fond-carte); border: 1px solid var(--bordure); } .pestel-badge .lettre { font-family: "Cambria", serif; font-size: 20px; font-weight: 700; line-height: 1; margin-bottom: 4px; } .pestel-badge .nom { font-size: 10px; color: var(--texte-muet); text-transform: uppercase; letter-spacing: 0.06em; } .pestel-badge .compteurs { display: flex; gap: 2px; margin-top: 4px; font-family: "SF Mono", Menlo, monospace; font-size: 10px; } .pestel-badge .compteurs span { padding: 1px 5px; border-radius: 3px; background: var(--bordure); color: var(--texte); } .pestel-badge .compteurs .haut { background: rgba(107,183,123,0.15); color: var(--succes); } .pestel-badge .compteurs .stable { background: rgba(229,177,74,0.15); color: var(--alerte); } .pestel-badge .compteurs .bas { background: rgba(217,109,92,0.15); color: var(--erreur); } .pestel-badge[data-cat="politique"] .lettre { color: var(--pestel-p); } .pestel-badge[data-cat="economique"] .lettre { color: var(--pestel-e); } .pestel-badge[data-cat="sociologique"] .lettre { color: var(--pestel-s); } .pestel-badge[data-cat="technologique"] .lettre { color: var(--pestel-t); } .pestel-badge[data-cat="ecologique"] .lettre { color: var(--pestel-ec); } .pestel-badge[data-cat="legislative"] .lettre { color: var(--pestel-l); } /* ---------- Actions tableau + suppression ligne ---------- */ .actions-tableau { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-2); padding: 0; background: transparent; flex-wrap: wrap; } /* Boutons "+ Ajouter/Initialiser une ligne" — style ligne pointillée pleine largeur (Notion/Airtable). Couvre à la fois les boutons enfants de `.actions-tableau` (uniques ou par catégorie) et les boutons "ajout par section" qui ne sont PAS dans `.actions-tableau` (pestel/porter/chiffres/scenarios/communication/plan_operationnel/ansoff/strategy_map). */ .actions-tableau .btn-primaire, .actions-tableau .btn-ajouter-cat, .actions-tableau #btn-ajouter, .actions-tableau [id^="btn-ajouter"], .btn-ajouter-pestel, .btn-ajouter-porter, .btn-ajouter-chiffre, .btn-ajouter-comm, .btn-init-scenario, .btn-ajouter-action, .smap-btn-ajout, .ansoff-btn-ajout { flex: 1; background: transparent !important; border: 1px dashed var(--bordure-forte) !important; color: var(--texte-muet) !important; padding: 8px 12px !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.02em; border-radius: var(--radius-sm) !important; transition: all 0.15s ease; text-align: center; cursor: pointer; /* Rétablit une largeur pleine pour les boutons "ajout section" qui n'ont pas de parent flex */ width: 100%; box-sizing: border-box; margin-top: 4px; } /* Dans une actions-tableau (flex row), on retombe sur flex:1 (déjà défini plus haut) */ .actions-tableau .btn-primaire, .actions-tableau .btn-ajouter-cat, .actions-tableau [id^="btn-ajouter"] { width: auto; margin-top: 0; } .actions-tableau .btn-primaire:hover, .actions-tableau .btn-ajouter-cat:hover, .actions-tableau #btn-ajouter:hover, .actions-tableau [id^="btn-ajouter"]:hover, .btn-ajouter-pestel:hover, .btn-ajouter-porter:hover, .btn-ajouter-chiffre:hover, .btn-ajouter-comm:hover, .btn-init-scenario:hover, .btn-ajouter-action:hover, .smap-btn-ajout:hover, .ansoff-btn-ajout:hover { background: rgba(224,132,106,0.08) !important; border-color: var(--accent) !important; border-style: solid !important; color: var(--accent) !important; } .actions-tableau .btn-primaire:disabled, .btn-ajouter-pestel:disabled, .btn-ajouter-porter:disabled, .btn-ajouter-chiffre:disabled, .btn-ajouter-comm:disabled, .btn-init-scenario:disabled, .btn-ajouter-action:disabled, .smap-btn-ajout:disabled, .ansoff-btn-ajout:disabled { opacity: 0.4; cursor: not-allowed; } .compteur-lignes { font-size: 11px; font-weight: 400; color: var(--texte-muet); text-transform: none; letter-spacing: 0; margin-left: var(--gap-2); padding: 2px 8px; background: var(--bordure); border-radius: 10px; } .section-titre .compteur-lignes { display: inline-block; } .col-supprimer { text-align: center; padding: 4px !important; } .btn-supprimer-ligne { background: transparent; border: 1px solid var(--trait); color: var(--texte-muet); padding: 4px 8px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1; transition: all 0.15s; opacity: 0.55; cursor: pointer; } .tableau tbody tr:hover .btn-supprimer-ligne { opacity: 1; } .btn-supprimer-ligne:hover { color: var(--erreur); background: rgba(192, 84, 69, 0.10); border-color: var(--erreur); opacity: 1; } .tableau tbody tr.vide-ligne td { background: var(--fond-carte-hover) !important; } /* ---------- Module générique (avec/sans catégories) ---------- */ .module-categorie { margin-bottom: var(--gap-4); background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); overflow: hidden; position: relative; } /* Liseré fin coloré en haut de chaque section (style TOWS minimaliste, sobre) */ .module-categorie::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--bordure-forte); } .categorie-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--fond-carte-hover); color: var(--texte); border-bottom: 1px solid var(--bordure); font-weight: 600; letter-spacing: 0.03em; font-size: 13px; } .categorie-titre { color: var(--accent); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; font-size: 13px; } /* Compteur inline dans les headers colorés (thead sombre en 2 thèmes) */ .compteur-lignes-inline { font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.75); padding: 2px 8px; background: rgba(255,255,255,0.1); border-radius: 10px; } /* Score signé (curseur -N à +N) */ .score-curseur { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; transition: all 0.1s; min-width: 90px; } .score-curseur:hover { border-color: var(--bordure); background: var(--fond-carte); } .score-track { position: relative; width: 60px; height: 6px; background: var(--bordure); border-radius: 3px; overflow: hidden; } .score-track::before { content: ""; position: absolute; top: 0; left: 50%; height: 100%; background: var(--navy); width: 2px; transform: translateX(-50%); z-index: 1; } .score-track::after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: var(--pct, 50%); background: linear-gradient(to right, rgba(239,68,68,0.6) 0%, rgba(239,68,68,0.3) 30%, rgba(107,114,128,0.15) 50%, rgba(16,185,129,0.3) 70%, rgba(16,185,129,0.6) 100%); } .score-curseur .valeur-signee { font-family: "SF Mono", Menlo, monospace; font-weight: 700; font-size: 13px; min-width: 26px; text-align: right; } .score-curseur.negatif .valeur-signee { color: var(--erreur); } .score-curseur.positif .valeur-signee { color: var(--succes); } .score-curseur.zero .valeur-signee { color: var(--texte-muet); } /* Select inline */ .select-inline { padding: 4px 6px; border: 1px solid transparent; background: transparent; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; cursor: pointer; } .select-inline:hover { border-color: var(--bordure); background: var(--fond-carte); } .select-inline:focus { border-color: var(--navy); background: var(--fond-carte); outline: none; } /* Colorisation des scores signés dans les tableaux */ .tableau .score-curseur.positif { background: rgba(16,185,129,0.06); } .tableau .score-curseur.negatif { background: rgba(239,68,68,0.06); } /* Unité % */ .unite-p { color: var(--texte-muet); font-size: 11px; margin-left: -4px; } /* Header de catégorie coloré selon la catégorie sémantique Utilise les tokens PESTEL double thème (les variantes claires sont plus denses pour rester lisibles sur fond blanc). */ /* Style minimaliste : liseré coloré 3px + titre coloré, fond neutre uniforme */ .module-categorie[data-cat="politique"]::before, .module-categorie[data-cat="nouveaux_entrants"]::before { background: var(--pestel-p); } .module-categorie[data-cat="economique"]::before, .module-categorie[data-cat="substitution"]::before { background: var(--pestel-e); } .module-categorie[data-cat="sociologique"]::before, .module-categorie[data-cat="fournisseurs"]::before { background: var(--pestel-s); } .module-categorie[data-cat="technologique"]::before, .module-categorie[data-cat="clients"]::before { background: var(--pestel-t); } .module-categorie[data-cat="ecologique"]::before, .module-categorie[data-cat="rivalite"]::before { background: var(--pestel-ec); } .module-categorie[data-cat="legislative"]::before { background: var(--pestel-l); } .module-categorie[data-cat="force"]::before { background: var(--pestel-s); } .module-categorie[data-cat="faiblesse"]::before { background: var(--pestel-e); } .module-categorie[data-cat="opportunite"]::before { background: var(--pestel-t); } .module-categorie[data-cat="menace"]::before { background: var(--pestel-p); } /* Titres colorés — même sémantique que le liseré, plus lisible qu'un fond plein */ .module-categorie[data-cat="politique"] .categorie-titre, .module-categorie[data-cat="nouveaux_entrants"] .categorie-titre, .module-categorie[data-cat="opportunite"] .categorie-titre { color: var(--pestel-p); } .module-categorie[data-cat="economique"] .categorie-titre, .module-categorie[data-cat="substitution"] .categorie-titre, .module-categorie[data-cat="faiblesse"] .categorie-titre, .module-categorie[data-cat="economique"] .categorie-titre { color: var(--pestel-e); } .module-categorie[data-cat="sociologique"] .categorie-titre, .module-categorie[data-cat="fournisseurs"] .categorie-titre, .module-categorie[data-cat="force"] .categorie-titre { color: var(--pestel-s); } .module-categorie[data-cat="technologique"] .categorie-titre, .module-categorie[data-cat="environnementale"] .categorie-titre, .module-categorie[data-cat="clients"] .categorie-titre { color: var(--pestel-t); } .module-categorie[data-cat="ecologique"] .categorie-titre, .module-categorie[data-cat="societale"] .categorie-titre, .module-categorie[data-cat="rivalite"] .categorie-titre, .module-categorie[data-cat="menace"] .categorie-titre { color: var(--pestel-ec); } .module-categorie[data-cat="legislative"] .categorie-titre, .module-categorie[data-cat="reglementaire"] .categorie-titre { color: var(--pestel-l); } /* Tendances : mêmes catégories que PESTEL (aliases sémantiques) */ .module-categorie[data-cat="technologique"]::before, .module-categorie[data-cat="environnementale"]::before { background: var(--pestel-t); } .module-categorie[data-cat="societale"]::before { background: var(--pestel-ec); } .module-categorie[data-cat="reglementaire"]::before { background: var(--pestel-l); } /* Compteur charbon plus discret (fini le blanc translucide sur fond coloré) */ .compteur-lignes-inline { color: var(--texte-muet) !important; } /* ---------- Templates dédiés — modules à visualisation métier ---------- */ /* Matrice 2×2 générique (Clients, Marché, BCG…) */ .matrice-2x2-conteneur { position: relative; height: 500px; padding: var(--gap-3); background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); } .legende-quadrants { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-2); margin-top: var(--gap-3); font-size: 12px; color: var(--texte-muet); } .quad-item { padding: 8px 10px; border-radius: var(--radius-sm); border-left: 3px solid; background: var(--fond-carte-hover); } .quad-item.butterflies { border-left-color: var(--pestel-s); background: rgba(93,173,226,0.10); } .quad-item.true-friends { border-left-color: var(--succes); background: rgba(107,183,123,0.10); } .quad-item.strangers { border-left-color: var(--erreur); background: rgba(217,109,92,0.10); } .quad-item.barnacles { border-left-color: var(--alerte); background: rgba(229,177,74,0.10); } .quad-nom { font-weight: 700; color: var(--navy); margin-right: 6px; } /* Porter — diagramme central 5 forces (Grid 3×3) */ .porter-tete { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--gap-3); margin-bottom: var(--gap-3); align-items: stretch; } .porter-diagramme { position: relative; background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: var(--gap-3); aspect-ratio: 1.1 / 1; max-height: 440px; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-template-areas: ". haut ." "gauche centre droite" ". bas ."; gap: 14px; align-items: center; justify-items: center; } .porter-fleches { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .porter-force, .porter-centre { width: 160px; padding: 12px 10px; background: var(--fond-carte); border: 2px solid var(--bordure); border-radius: var(--radius); text-align: center; z-index: 2; box-shadow: var(--ombre-douce); } .porter-nouveaux-entrants { grid-area: haut; border-color: var(--pestel-p); } .porter-fournisseurs { grid-area: gauche; border-color: var(--pestel-s); } .porter-clients { grid-area: droite; border-color: var(--pestel-t); } .porter-substitution { grid-area: bas; border-color: var(--pestel-e); } .porter-centre { grid-area: centre; width: 150px; height: 120px; /* Gradient violet (Porter rivalité) — reste identique en clair/sombre car c'est une couleur sémantique domain-metier. */ background: linear-gradient(135deg, var(--pestel-ec), color-mix(in srgb, var(--pestel-ec) 65%, #000)); color: var(--texte-thead); border: none; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 4px 12px rgba(155, 89, 182, 0.35); } .porter-label { font-size: 12px; font-weight: 600; color: var(--navy); line-height: 1.2; margin-bottom: 6px; } .porter-centre-label { font-size: 13px; font-weight: 700; line-height: 1.2; margin-bottom: 6px; } .porter-compteurs { display: flex; gap: 3px; justify-content: center; font-family: "SF Mono", Menlo, monospace; font-size: 10px; font-weight: 600; } .porter-compteurs span { padding: 1px 5px; border-radius: 3px; min-width: 20px; } .porter-compteurs .haut { background: rgba(107,183,123,0.15); color: var(--succes); } .porter-compteurs .stable{ background: rgba(229,177,74,0.15); color: var(--alerte); } .porter-compteurs .bas { background: rgba(217,109,92,0.15); color: var(--erreur); } .porter-centre .porter-compteurs span { background: rgba(255,255,255,0.2); color: var(--texte-thead); } .porter-radar { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: var(--gap-3); aspect-ratio: 1 / 1; max-height: 440px; display: flex; flex-direction: column; } .porter-radar canvas { flex: 1; min-height: 0; } .porter-section { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); overflow: hidden; margin-bottom: 10px; } .porter-section-header { padding: 8px 14px; display: flex; align-items: center; gap: var(--gap-3); border-left: 3px solid var(--bordure); border-bottom: 1px solid var(--bordure); } .porter-section-puce { width: 12px; height: 12px; border-radius: 3px; } .porter-section-titre { flex: 1; font-size: 14px; font-weight: 600; color: var(--navy); } .porter-section-compteur { font-family: "SF Mono", Menlo, monospace; font-size: 11px; color: var(--texte-muet); padding: 3px 8px; background: var(--bordure); border-radius: 10px; } .porter-tableau tbody tr:hover td { background: var(--fond-carte-hover); } /* BCG — icônes fond et formule */ .bcg-conteneur { position: relative; height: 520px; } .bcg-icone { position: absolute; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-family: "Cambria", serif; font-size: 22px; font-weight: 700; color: rgba(15,44,74,0.25); z-index: 1; pointer-events: none; } .bcg-icone-etoile { top: 30px; right: 30px; color: rgba(93,173,226,0.35); } .bcg-icone-dilemme { top: 30px; left: 30px; color: rgba(230,126,34,0.35); } .bcg-icone-vache { bottom: 30px; right: 30px; color: rgba(88,214,141,0.35); } .bcg-icone-poids { bottom: 30px; left: 30px; color: rgba(127,140,141,0.35); } .bcg-formule { text-align: center; margin-top: var(--gap-3); padding: var(--gap-3); background: var(--fond); border-radius: var(--radius-sm); font-size: 13px; color: var(--texte-muet); } .bcg-formule .frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 4px; } .bcg-formule .frac .haut { color: var(--navy); font-weight: 500; border-bottom: 1px solid var(--texte-muet); padding: 0 8px 2px; } .bcg-formule .frac .bas { color: var(--navy); font-weight: 500; padding: 2px 8px 0; } /* Cycle de vie — 5 phases + courbes */ .cycle-vie-conteneur { position: relative; background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: var(--gap-4); height: 480px; } .cycle-vie-phases { display: grid; grid-template-columns: repeat(5, 1fr); padding: 0 12px 8px; border-bottom: 1px solid var(--bordure); margin-bottom: 6px; } .cycle-phase { text-align: center; padding: 6px 4px; border-right: 1px dashed var(--bordure); } .cycle-phase:last-child { border-right: none; } .phase-titre { font-size: 12px; font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: 0.06em; } .cycle-vie-conteneur canvas { height: calc(100% - 40px) !important; } /* Marché — jauges circulaires */ .jauges-marches { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--gap-3); padding: var(--gap-3); } .jauge-circulaire-item { display: flex; flex-direction: column; align-items: center; gap: 4px; } .jauge-titre { font-size: 11px; color: var(--texte); font-weight: 500; text-align: center; line-height: 1.2; height: 28px; display: flex; align-items: center; justify-content: center; } .jauge-circulaire { width: 80px; height: 80px; } /* ---------- Kapferer nouveau — grid 3×3 avec hexagone au centre ---------- */ .kapferer-nouveau { position: relative; background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: var(--gap-5); margin-bottom: var(--gap-4); display: grid; grid-template-columns: 32px 1fr 32px; align-items: stretch; gap: 12px; } .kapferer-axe-y { display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); } .kapferer-axe-y-gauche { grid-column: 1; } .kapferer-axe-y-droite { grid-column: 3; } .kapferer-grid { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr 1fr 1fr auto; grid-template-areas: "haut haut" "physique personnalite" "relation culture" "reflet mentalisation" "bas bas"; gap: 14px; position: relative; } .kapferer-axe-x { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); padding: 6px 0; } .kapferer-axe-x.axe-haut { grid-area: haut; } .kapferer-axe-x.axe-bas { grid-area: bas; } .kap-dim { background: var(--fond-carte-hover); border: 1px solid var(--bordure); border-radius: var(--radius-sm); padding: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 2; } /* Placement des 6 dimensions du prisme dans le grid 5-lignes × 2-colonnes */ .kap-dim[data-dim="physique"] { grid-area: physique; } .kap-dim[data-dim="personnalite"] { grid-area: personnalite; } .kap-dim[data-dim="relation"] { grid-area: relation; } .kap-dim[data-dim="culture"] { grid-area: culture; } .kap-dim[data-dim="reflet"] { grid-area: reflet; } .kap-dim[data-dim="mentalisation"] { grid-area: mentalisation; } .kap-dim-header { display: flex; align-items: center; justify-content: space-between; } .kap-dim-label { font-size: 11px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: 0.06em; } .btn-init-dim { font-size: 11px; padding: 2px 8px; color: var(--or); background: transparent; border: 1px dashed var(--or); border-radius: 12px; cursor: pointer; } .kap-dim-textarea { width: 100%; padding: 6px 8px; border: 1px solid var(--bordure); border-radius: var(--radius-sm); font-size: 12px; resize: vertical; background: var(--fond-carte); } .kap-dim-textarea:disabled { background: var(--bordure); color: var(--texte-muet); } .kap-dim-textarea:focus { border-color: var(--navy); outline: none; } .kap-hexagone { position: absolute; inset: 40px auto auto 50%; transform: translateX(-50%); width: 320px; height: 320px; z-index: 1; pointer-events: none; opacity: 0.55; } .kap-hexagone svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 12px rgba(224,132,106,0.3)); } .kap-remarques-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; padding: 12px; } .kap-remarque { background: var(--fond-carte-hover); border: 1px solid var(--bordure); border-radius: var(--radius-sm); padding: 10px; } .kap-remarque-label { font-size: 11px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; } .kap-remarque textarea { width: 100%; padding: 6px 8px; border: 1px solid var(--bordure); border-radius: var(--radius-sm); font-size: 12px; resize: vertical; } .kap-remarque textarea:focus { border-color: var(--navy); outline: none; } /* ---------- Ancien conteneur Kapferer (compat) ---------- */ .kapferer-conteneur { position: relative; background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: var(--gap-6); margin-bottom: var(--gap-4); min-height: 640px; } .kapferer-labels-vertical { position: absolute; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: center; font-size: 15px; font-weight: 600; color: var(--navy); letter-spacing: 0.06em; text-transform: uppercase; } .kapferer-labels-vertical.labels-gauche { left: 20px; } .kapferer-labels-vertical.labels-droite { right: 20px; } .kapferer-label-haut, .kapferer-label-bas { position: absolute; left: 50%; transform: translateX(-50%); font-size: 15px; font-weight: 600; color: var(--navy); letter-spacing: 0.06em; text-transform: uppercase; } .kapferer-label-haut { top: 20px; } .kapferer-label-bas { bottom: 20px; } .kapferer-hexagone { max-width: 500px; margin: 40px auto; } .kapferer-hexagone svg { width: 100%; height: auto; } .kapferer-texte { position: absolute; width: 130px; font-size: 10px; padding: 6px 8px; background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius-sm); box-shadow: var(--ombre-douce); } .kapferer-texte .texte-label { font-size: 9px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 3px; } .kapferer-texte .texte-contenu { color: var(--texte-muet); line-height: 1.3; max-height: 42px; overflow: hidden; text-overflow: ellipsis; } /* Positions autour de l'hexagone */ .kapferer-texte.texte-physique { top: 100px; left: 90px; } .kapferer-texte.texte-personnalite { top: 100px; right: 90px; } .kapferer-texte.texte-relation { top: 300px; left: 20px; } .kapferer-texte.texte-culture { top: 300px; right: 20px; } .kapferer-texte.texte-reflet { bottom: 100px; left: 90px; } .kapferer-texte.texte-mentalisation { bottom: 100px; right: 90px; } .kapferer-details { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap-3); margin-top: var(--gap-3); } .kapferer-detail-carte { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: var(--gap-3); border-top: 3px solid var(--pestel-s); } .detail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .detail-titre { font-weight: 700; color: var(--navy); font-size: 14px; letter-spacing: 0.03em; } .detail-position { font-size: 10px; color: var(--texte-muet); text-transform: uppercase; letter-spacing: 0.06em; } .detail-contenu, .detail-remarques { width: 100%; padding: 6px 8px; border: 1px solid var(--bordure); border-radius: var(--radius-sm); font-family: inherit; font-size: 12px; min-height: 60px; resize: vertical; margin-bottom: 6px; } /* ---------- Parcours signé (Potentiel, Benchmark) ---------- */ .parcours-conteneur { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: var(--gap-4); margin-bottom: var(--gap-4); } .parcours-legende-haut { display: grid; grid-template-columns: 1fr 1fr 1fr; text-align: center; padding-bottom: var(--gap-3); border-bottom: 1px solid var(--bordure); font-weight: 600; font-size: 13px; color: var(--navy); } .parcours-avantage { color: var(--succes); text-align: left; } .parcours-desavantage { color: var(--erreur); text-align: right; } .parcours-centre { color: var(--navy); } .parcours-avantage .fleche, .parcours-desavantage .fleche { display: inline-block; margin: 0 6px; } .parcours-categorie { margin-top: var(--gap-4); } .parcours-cat-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--gap-2); padding-bottom: 4px; border-bottom: 2px solid var(--navy); } .parcours-cat-titre { font-size: 13px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: 0.06em; } .parcours-ligne { display: grid; grid-template-columns: 40px 220px 1fr 220px 24px; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--bordure); } .parcours-ligne:last-child { border-bottom: none; } .parcours-numero { font-family: "SF Mono", Menlo, monospace; color: var(--texte-muet); font-size: 12px; text-align: center; } .parcours-facteur, .parcours-remarques { padding: 4px 6px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 13px; } .parcours-facteur:hover, .parcours-remarques:hover { border-color: var(--bordure); } .parcours-facteur:focus, .parcours-remarques:focus { border-color: var(--navy); background: var(--fond-carte); } .parcours-jauge { display: flex; flex-direction: column; gap: 4px; } .jauge-graduations { display: grid; grid-template-columns: repeat(7, 1fr); font-family: "SF Mono", Menlo, monospace; font-size: 10px; color: var(--texte-muet); text-align: center; } .jauge-piste { position: relative; height: 8px; background: linear-gradient(to right, rgba(16,185,129,0.35) 0%, rgba(16,185,129,0.15) 40%, rgba(107,114,128,0.1) 50%, rgba(239,68,68,0.15) 60%, rgba(239,68,68,0.35) 100%); border-radius: 4px; cursor: pointer; } .jauge-milieu { position: absolute; top: -3px; left: 50%; width: 2px; height: 14px; background: var(--navy); transform: translateX(-50%); } .jauge-curseur { position: absolute; top: -6px; width: 18px; height: 18px; background: var(--navy); border: 2px solid var(--fond-carte); border-radius: 50%; transform: translateX(-50%); box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .jauge-curseur.positif { background: var(--succes); } .jauge-curseur.negatif { background: var(--erreur); } .parcours-ajout { margin-top: 8px; padding-left: 40px; } .input-ajout-parcours { width: 100%; max-width: 400px; padding: 6px 10px; border: 1px dashed var(--bordure-forte); border-radius: var(--radius-sm); font-size: 12px; background: transparent; } .input-ajout-parcours:focus { border-style: solid; border-color: var(--navy); background: var(--fond-carte); outline: none; } /* ---------- Benchmark — 6 points sur une jauge (Nous + 5 concurrents nommés) ---------- */ /* Tuiles concurrents (haut de page) — grille adaptative sans overflow horizontal */ .bench-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .bench-tuile { display: flex; gap: 10px; padding: 10px; background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); transition: border-color 0.15s; } .bench-tuile:hover { border-color: var(--bordure-forte); } .bench-tuile-nous { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } .bench-tuile-pastille { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--texte-thead); font-weight: 700; font-size: 14px; overflow: hidden; background: var(--bordure-forte); border: 2px solid var(--fond); } .bench-tuile-pastille img { width: 100%; height: 100%; object-fit: cover; } .bench-tuile-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .bench-tuile-nom { font-weight: 700; font-size: 13px; color: var(--texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bench-tuile-tag { font-size: 10px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; } .bench-tuile-nom-input { background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 3px 6px; font-size: 13px; font-weight: 600; color: var(--texte); width: 100%; } .bench-tuile-nom-input:hover { border-color: var(--bordure); background: var(--fond); } .bench-tuile-nom-input:focus { border-color: var(--accent); background: var(--fond); outline: none; } .bench-tuile-ligne { display: flex; gap: 4px; align-items: center; } .bench-tuile-logo-input { flex: 1; min-width: 0; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 2px 6px; font-size: 11px; color: var(--texte-muet); font-family: "SF Mono", Menlo, monospace; } .bench-tuile-logo-input:hover { border-color: var(--bordure); background: var(--fond); } .bench-tuile-logo-input:focus { border-color: var(--accent); background: var(--fond); outline: none; color: var(--texte); } .bench-tuile-couleur { flex: 0 0 26px; width: 26px; height: 22px; border: 1px solid var(--bordure); border-radius: var(--radius-sm); background: transparent; cursor: pointer; padding: 0; } /* Tableau des critères */ .bench-conteneur { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); overflow: hidden; } .bench-header { display: grid; grid-template-columns: 44px 220px 1fr 200px 30px; align-items: center; padding: 10px 14px; gap: 12px; background: var(--fond-thead); color: var(--texte-thead); font-size: 12px; font-weight: 600; } .bench-ligne { display: grid; grid-template-columns: 44px 220px 1fr 200px 30px; align-items: center; padding: 12px 14px; gap: 12px; border-bottom: 1px solid var(--bordure); } .bench-ligne:last-child { border-bottom: none; } .bench-ligne:hover { background: var(--fond-carte-hover); } .bench-col-no { font-family: "SF Mono", Menlo, monospace; color: var(--texte-muet); font-size: 12px; text-align: center; } .bench-header .bench-col-no { color: var(--texte-thead); opacity: 0.9; } .bench-col-critere input, .bench-col-remarques input { width: 100%; padding: 4px 8px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 13px; background: transparent; color: var(--texte); } .bench-col-critere input:hover, .bench-col-remarques input:hover { border-color: var(--bordure); background: var(--fond); } .bench-col-critere input:focus, .bench-col-remarques input:focus { border-color: var(--accent); background: var(--fond); outline: none; } .bench-piste { height: 8px; margin-top: 4px; } .bench-point { position: absolute; top: -6px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--fond-carte); box-shadow: 0 2px 6px rgba(0,0,0,0.45); transform: translateX(-50%); cursor: grab; user-select: none; z-index: 2; transition: transform 0.15s, box-shadow 0.15s; } .bench-point:hover { transform: translateX(-50%) scale(1.25); z-index: 4; } .bench-point.dragging { z-index: 5; transform: translateX(-50%) scale(1.35); box-shadow: 0 3px 12px rgba(224,132,106,0.5); } .bench-point:active { cursor: grabbing; } /* Couleurs par défaut (surchargées dynamiquement en JS depuis les tuiles) Palette benchmark = accent + 5 tokens PESTEL — cohérente en clair et sombre. */ .bench-point-c0 { background: var(--accent); } .bench-point-c1 { background: var(--pestel-s); } .bench-point-c2 { background: var(--pestel-e); } .bench-point-c3 { background: var(--pestel-t); } .bench-point-c4 { background: var(--pestel-ec); } .bench-point-c5 { background: var(--pestel-p); } .bench-point-c6 { background: #16A085; } .bench-point-c7 { background: #F39C12; } .bench-point-c8 { background: #34495E; } .bench-point-c9 { background: #E91E63; } .bench-point-c10 { background: #00BCD4; } /* Corbeille sur chaque tuile concurrent (au survol) */ .bench-tuile { position: relative; } .bench-tuile-supp { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; background: transparent; border: 1px solid transparent; border-radius: 50%; color: var(--texte-muet); font-size: 12px; cursor: pointer; opacity: 0; transition: all 0.15s; display: flex; align-items: center; justify-content: center; z-index: 2; } .bench-tuile:hover .bench-tuile-supp { opacity: 1; } .bench-tuile-supp:hover { color: #fff; background: var(--erreur); border-color: var(--erreur); } /* Tuile "+ Ajouter un concurrent" */ .bench-tuile-ajout { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: transparent; border: 1px dashed var(--bordure-forte); border-radius: var(--radius); padding: 20px; color: var(--texte-muet); cursor: pointer; transition: all 0.15s; min-height: 100px; font-family: inherit; } .bench-tuile-ajout:hover { background: rgba(224,132,106,0.08); border-color: var(--accent); border-style: solid; color: var(--accent); } .bench-tuile-ajout-icone { font-size: 34px; line-height: 1; font-weight: 300; } .bench-tuile-ajout-txt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } /* ---------- Blue Ocean — 4 actions ---------- */ .blue-ocean-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-3); margin-bottom: var(--gap-4); } .bo-action { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: var(--gap-3); border-left: 4px solid; } .bo-augmenter { border-left-color: var(--succes); } .bo-eliminer { border-left-color: var(--erreur); } .bo-creer { border-left-color: var(--or); } .bo-reduire { border-left-color: var(--texte-muet); } .bo-action-titre { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 6px; } .bo-action-question { font-size: 12px; color: var(--texte-muet); line-height: 1.4; } /* ---------- Stratégies standard TOWS ---------- */ .tows-grille { display: grid; grid-template-columns: 200px 1fr 1fr; gap: 1px; background: var(--bordure); border-radius: var(--radius); overflow: hidden; margin-bottom: var(--gap-4); } .tows-cellule { background: var(--fond-carte); padding: var(--gap-3); min-height: 200px; } .tows-titre-vide { min-height: 90px; background: var(--fond); } .tows-titre { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: var(--texte); min-height: 90px; background: var(--fond-carte); position: relative; padding: var(--gap-3); } /* Liseré coloré discret en haut de chaque bandeau (style Ansoff minimaliste) */ .tows-titre::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; } .tows-titre-s::before { background: var(--pestel-s); } .tows-titre-w::before { background: var(--pestel-e); } .tows-titre-o::before { background: var(--pestel-t); } .tows-titre-t::before { background: var(--pestel-p); } .tows-mini-titre { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; color: var(--texte); } .tows-titre-s .tows-mini-titre { color: var(--pestel-s); } .tows-titre-w .tows-mini-titre { color: var(--pestel-e); } .tows-titre-o .tows-mini-titre { color: var(--pestel-t); } .tows-titre-t .tows-mini-titre { color: var(--pestel-p); } .tows-titre .text-muet { color: var(--texte-muet) !important; } .tows-cellule-titre { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 4px; } .tows-cellule-consigne { font-size: 11px; color: var(--texte-muet); font-style: italic; margin-bottom: 10px; } .tows-so { border-top: 3px solid var(--pestel-s); } .tows-wo { border-top: 3px solid var(--pestel-e); } .tows-st { border-top: 3px solid var(--pestel-p); } .tows-wt { border-top: 3px solid var(--pestel-ec); } .tows-items { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .tows-item { display: grid; grid-template-columns: 40px 1fr 22px; align-items: center; gap: 6px; padding: 4px 6px; background: var(--fond-carte-hover); border: 1px solid var(--bordure); border-radius: 3px; font-size: 12px; } .tows-code { font-family: "SF Mono", Menlo, monospace; color: var(--texte-muet); font-weight: 700; font-size: 10px; } .tows-texte { outline: none; padding: 2px 4px; border-radius: 3px; line-height: 1.3; color: var(--texte); } .tows-texte:focus { background: var(--fond-carte); box-shadow: 0 0 0 2px rgba(15,44,74,0.1); } .input-ajout-tows { width: 100%; padding: 6px 8px; border: 1px dashed var(--bordure-forte); border-radius: var(--radius-sm); background: transparent; font-size: 12px; } .input-ajout-tows:focus { border-style: solid; border-color: var(--navy); background: var(--fond-carte); outline: none; } /* ---------- Segmentation — cartes ---------- */ .segmentation-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--gap-3); } .segment-carte { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: var(--gap-3); border-top: 3px solid var(--or); } .segment-header { display: grid; grid-template-columns: 30px 1fr 22px; align-items: center; gap: 8px; margin-bottom: 10px; } .segment-numero { font-family: "SF Mono", Menlo, monospace; color: var(--or); font-weight: 700; font-size: 11px; } .segment-nom { padding: 4px 6px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; color: var(--navy); } .segment-nom:hover { border-color: var(--bordure); background: var(--fond-carte); } .segment-nom:focus { border-color: var(--navy); background: var(--fond-carte); outline: none; } .segment-body label { display: block; font-size: 10px; color: var(--texte-muet); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 3px; margin-top: 8px; } .segment-body textarea, .segment-body input { width: 100%; padding: 5px 8px; border: 1px solid var(--bordure); border-radius: var(--radius-sm); font-size: 12px; resize: vertical; } .segment-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; } /* ---------- Mix Marketing — 5 politiques en grille ---------- */ .mix-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--gap-3); } .mix-carte { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: var(--gap-3); border-top: 3px solid var(--navy); } .mix-header { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding-bottom: var(--gap-2); border-bottom: 1px solid var(--bordure); margin-bottom: 10px; } .mix-lettre { width: 36px; height: 36px; background: var(--accent); color: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; font-family: "Cambria", serif; font-weight: 700; font-size: 18px; } .mix-titre { font-size: 13px; font-weight: 700; color: var(--navy); } .mix-question { font-size: 11px; color: var(--texte-muet); font-style: italic; line-height: 1.3; margin-top: 2px; } .mix-compteur { font-family: "SF Mono", Menlo, monospace; font-size: 10px; color: var(--texte-muet); padding: 2px 8px; background: var(--bordure); border-radius: 10px; white-space: nowrap; } .mix-items { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .mix-item { display: grid; grid-template-columns: 24px 1fr 22px; align-items: center; gap: 6px; padding: 4px 6px; background: var(--fond-carte-hover); border: 1px solid var(--bordure); border-radius: 3px; } .mix-num { font-family: "SF Mono", Menlo, monospace; color: var(--texte-muet); font-size: 10px; font-weight: 700; text-align: center; } .mix-item textarea { padding: 3px 6px; border: 1px solid transparent; background: transparent; font-size: 12px; resize: vertical; } .mix-item textarea:focus { border-color: var(--navy); background: var(--fond-carte); outline: none; } .input-ajout-mix { width: 100%; padding: 6px 8px; border: 1px dashed var(--bordure-forte); border-radius: var(--radius-sm); background: transparent; font-size: 12px; } .input-ajout-mix:focus { border-style: solid; border-color: var(--navy); background: var(--fond-carte); outline: none; } /* ---------- Communication — jauges canaux ---------- */ .comm-jauges { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-3); padding: var(--gap-3); } @media (max-width: 900px) { .comm-jauges { grid-template-columns: repeat(2, 1fr); } } .comm-jauge-canal { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: var(--radius-sm); background: var(--fond-carte-hover); border: 1px solid var(--bordure); } .comm-jauge-nom { font-size: 11px; color: var(--navy); font-weight: 600; text-align: center; height: 26px; display: flex; align-items: center; } .comm-jauge-canal .jauge-circulaire { width: 70px; height: 70px; } .comm-jauge-nb { font-size: 10px; color: var(--texte-muet); font-family: "SF Mono", Menlo, monospace; } .comm-total { text-align: center; font-size: 13px; color: var(--texte-muet); padding: 8px 0; border-top: 1px solid var(--bordure); margin-top: 8px; } #comm-total-pct { font-family: "SF Mono", Menlo, monospace; font-weight: 700; font-size: 15px; } /* ---------- Pie (Sources revenus, Structure coûts) ---------- */ .pie-conteneur { height: 380px; background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: var(--gap-4); position: relative; } .pie-total { text-align: center; margin-top: var(--gap-3); padding: 10px; font-family: "SF Mono", Menlo, monospace; font-weight: 700; font-size: 14px; background: var(--fond-carte-hover); border: 1px solid var(--bordure); border-radius: var(--radius-sm); } /* ---------- Scénarios d'avenir ---------- */ .scenarios-timeline { display: grid; grid-template-columns: 180px 40px 200px 1fr; align-items: center; padding: var(--gap-5); gap: var(--gap-3); background: linear-gradient(to right, var(--fond) 0%, var(--fond-carte) 100%); border-radius: var(--radius); border: 1px solid var(--bordure); } .scenario-passe { text-align: center; } .scenario-carre-passe { display: inline-block; padding: 12px 18px; background: var(--or); color: var(--fond); border-radius: var(--radius); font-weight: 700; font-size: 12px; line-height: 1.2; box-shadow: var(--ombre-douce); } .scenario-fleche-vers { text-align: center; color: var(--or); font-size: 22px; } .scenario-actuel { text-align: center; } .scenario-cercle-actuel { display: inline-flex; align-items: center; justify-content: center; width: 130px; height: 130px; /* --navy est aliasé sur --accent (corail) : dégradé cohérent en 2 thèmes */ background: linear-gradient(135deg, var(--accent), var(--accent-fonce)); color: var(--texte-thead); border-radius: 50%; font-weight: 700; font-size: 13px; text-align: center; line-height: 1.2; box-shadow: 0 4px 12px rgba(197,106,80,0.3); } .scenario-branches { display: flex; flex-direction: column; gap: 12px; } .scenario-branche { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--fond-carte); border-radius: var(--radius); border-left: 4px solid; box-shadow: var(--ombre-douce); } .scenario-branche.best { border-left-color: var(--succes); } .scenario-branche.base { border-left-color: var(--alerte); } .scenario-branche.worst { border-left-color: var(--erreur); } .scenario-num { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--navy); color: var(--texte-thead); border-radius: 50%; font-weight: 700; } .scenario-branche.best .scenario-num { background: var(--succes); } .scenario-branche.base .scenario-num { background: var(--alerte); } .scenario-branche.worst .scenario-num { background: var(--erreur); } .scenario-label { font-weight: 600; color: var(--navy); font-size: 13px; } .scenarios-legende { display: grid; grid-template-columns: 220px 240px 1fr; text-align: center; padding: 8px var(--gap-5); color: var(--texte-muet); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; border-top: 1px solid var(--bordure); margin-top: -1px; } .scenarios-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-3); margin-top: var(--gap-4); } @media (max-width: 900px) { .scenarios-grille { grid-template-columns: 1fr; } } .scenario-carte { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: var(--gap-3); border-top: 3px solid; } .scenario-carte.scenario-best { border-top-color: var(--succes); } .scenario-carte.scenario-base { border-top-color: var(--alerte); } .scenario-carte.scenario-worst { border-top-color: var(--erreur); } .scenario-carte-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--bordure); } .scenario-badge { padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 700; color: var(--texte-thead); } .scenario-badge-best { background: var(--succes); } .scenario-badge-base { background: var(--alerte); } .scenario-badge-worst { background: var(--erreur); } .scenario-prob { width: 60px; padding: 3px 6px; border: 1px solid var(--bordure); border-radius: var(--radius-sm); font-size: 12px; text-align: right; } .scenario-carte-body label { display: block; font-size: 10px; color: var(--texte-muet); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 3px; margin-top: 8px; } .scenario-carte-body textarea { width: 100%; padding: 6px 8px; border: 1px solid var(--bordure); border-radius: var(--radius-sm); font-size: 12px; resize: vertical; } .scenario-carte-body textarea:focus { border-color: var(--navy); outline: none; } /* ---------- Plan opérationnel Marketing & Com (matrice mensuelle) ---------- */ .plan-op-recap { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--gap-2); margin-bottom: var(--gap-4); } .recap-domaine { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: 10px 12px; } .recap-domaine.recap-total { background: var(--navy); color: var(--texte-thead); border-color: var(--navy); border-top: 3px solid var(--or); } .recap-titre { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--navy); margin-bottom: 4px; } .recap-total .recap-titre { color: var(--or); } .recap-actions { font-size: 11px; color: var(--texte-muet); margin-bottom: 6px; } .recap-total .recap-actions { color: rgba(255,255,255,0.7); } .recap-ligne { display: flex; justify-content: space-between; align-items: center; padding: 2px 0; font-size: 12px; } .recap-ligne .lbl { color: var(--texte-muet); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; } .recap-total .recap-ligne .lbl { color: rgba(255,255,255,0.6); } .recap-ligne .val { font-family: "SF Mono", Menlo, monospace; font-weight: 700; color: var(--navy); } .recap-total .recap-ligne .val { color: var(--texte-thead); } .plan-op-section { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); overflow: hidden; margin-bottom: var(--gap-3); } .plan-op-header { display: flex; align-items: center; gap: var(--gap-3); padding: 10px 14px; border-bottom: 1px solid var(--bordure); background: var(--fond-carte-hover); } .plan-op-titre { flex: 1; font-size: 14px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: 0.04em; } .plan-op-compteur { font-family: "SF Mono", Menlo, monospace; font-size: 11px; color: var(--texte-muet); padding: 2px 8px; background: var(--bordure); border-radius: 10px; } .plan-op-tableau-wrap { overflow-x: auto; } .plan-op-tableau { width: 100%; border-collapse: collapse; font-size: 12px; } .plan-op-tableau thead th { background: var(--fond-thead); color: var(--texte-thead); padding: 8px 6px; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; border-right: 1px solid rgba(255,255,255,0.1); white-space: nowrap; position: sticky; top: 0; } .plan-op-tableau thead th.col-fixe { text-align: left; } .plan-op-tableau tbody tr { border-bottom: 1px solid var(--bordure); } .plan-op-tableau tbody tr:hover { background: var(--fond-carte-hover); } .plan-op-tableau tbody td { padding: 4px 6px; border-right: 1px solid var(--bordure); vertical-align: middle; } .plan-op-tableau .col-fixe { min-width: 160px; } .plan-op-tableau .col-mois { width: 60px; text-align: right; } .plan-op-tableau .col-total { width: 90px; text-align: right; background: var(--fond); font-family: "SF Mono", Menlo, monospace; font-weight: 700; color: var(--navy); } .plan-op-tableau .col-supp { width: 26px; text-align: center; } .plan-op-tableau input.editable { width: 100%; padding: 3px 6px; border: 1px solid transparent; background: transparent; border-radius: 3px; font-size: 12px; font-family: inherit; } .plan-op-tableau input.editable:hover { border-color: var(--bordure); background: var(--fond-carte); } .plan-op-tableau input.editable:focus { border-color: var(--navy); background: var(--fond-carte); outline: none; } .plan-op-tableau input.montant-mois { text-align: right; font-family: "SF Mono", Menlo, monospace; } .btn-ajouter-action { padding: 5px 12px; font-size: 12px; } /* ---------- Bouton aide + modal ---------- */ .btn-aide { width: 30px; height: 30px; border-radius: 50%; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: var(--navy); background: rgba(15,44,74,0.06); border: 1px solid var(--bordure); } .btn-aide:hover { background: var(--navy); color: var(--or); border-color: var(--navy); } .modal-aide { position: fixed; inset: 0; background: rgba(15,44,74,0.55); z-index: 200; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); padding: 20px; } .modal-aide[hidden] { display: none; } .modal-aide-boite { background: var(--fond-carte); border-radius: var(--radius); max-width: 640px; width: 100%; max-height: 85vh; overflow-y: auto; padding: var(--gap-5); box-shadow: 0 20px 60px rgba(0,0,0,0.3); position: relative; } .modal-aide-fermer { position: absolute; top: 12px; right: 14px; background: transparent; border: none; font-size: 22px; color: var(--texte-muet); cursor: pointer; line-height: 1; } .modal-aide-fermer:hover { color: var(--erreur); } .modal-aide-header { display: flex; align-items: center; gap: var(--gap-3); padding-bottom: var(--gap-3); border-bottom: 1px solid var(--bordure); margin-bottom: var(--gap-4); } .modal-aide-header h3 { color: var(--navy); font-size: 18px; margin: 0; } .modal-aide-section { margin-bottom: var(--gap-4); } .modal-aide-section h4 { font-size: 12px; font-weight: 700; color: var(--or); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; } .modal-aide-section p { font-size: 13px; color: var(--texte); line-height: 1.5; } .modal-aide-section ul { padding-left: 20px; font-size: 13px; line-height: 1.6; color: var(--texte); } .modal-aide-section li { margin-bottom: 6px; } .modal-aide-section li strong { color: var(--navy); } .modal-aide-section.astuce { background: rgba(201,160,99,0.08); padding: var(--gap-3); border-radius: var(--radius-sm); border-left: 3px solid var(--or); } .modal-aide-section.astuce h4 { color: var(--navy); } .modal-aide-section.astuce p { font-style: italic; } /* ---------- Menu Export (dropdown) ---------- */ .menu-export { position: relative; display: inline-block; } .menu-export-liste { position: absolute; top: calc(100% + 6px); right: 0; min-width: 300px; background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(15,44,74,0.15); padding: 6px 0; display: none; z-index: 60; } .menu-export:hover .menu-export-liste, .menu-export:focus-within .menu-export-liste { display: block; } .menu-export-liste a { display: block; padding: 8px 14px; font-size: 13px; color: var(--texte); text-decoration: none; border-bottom: 1px solid var(--bordure); } .menu-export-liste a:last-child { border-bottom: none; } .menu-export-liste a:hover { background: var(--fond); color: var(--navy); } /* ---------- Print CSS pour export PDF ---------- */ @media print { .app-sidebar, .app-header, .btn, .actions-tableau, .col-supprimer, .btn-supprimer-ligne, .btn-supprimer-item, .btn-ajouter-cat, .modal-aide, .overlay-ia, .menu-export { display: none !important; } .app-layout { display: block !important; height: auto !important; overflow: visible !important; } .app-main { padding: 0 !important; overflow: visible !important; } body { background: var(--fond-carte); } .bandeau-page { border: none !important; border-bottom: 2px solid #0F2C4A !important; border-radius: 0 !important; page-break-after: avoid; } .section, .pestel-section, .porter-section, .synthese-activite, .kapferer-nouveau, .plan-op-section { page-break-inside: avoid; border: 1px solid #ccc !important; break-inside: avoid; } .tableau, .plan-op-tableau { page-break-inside: auto; font-size: 10pt; } .tableau thead th, .plan-op-tableau thead th { background: #0F2C4A !important; color: white !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } canvas { max-width: 100% !important; height: auto !important; } } /* ---------- Dashboard : bouton seed data ---------- */ .projet-carte-wrap { position: relative; display: flex; flex-direction: column; } .projet-actions { padding: 6px 10px 8px; text-align: right; background: var(--fond-carte-hover); border: 1px solid var(--bordure); border-top: none; border-radius: 0 0 var(--radius) var(--radius); } .projet-carte-wrap .projet-carte { border-radius: var(--radius) var(--radius) 0 0; } /* ---------- Bouton IA cellule par cellule ---------- */ .wrap-ia-champ { position: relative; display: block; width: 100%; } .wrap-ia-champ > input, .wrap-ia-champ > textarea { width: 100%; padding-right: 24px !important; } .btn-ia-champ { position: absolute; top: 4px; right: 3px; width: 20px; height: 20px; background: transparent; border: none; color: var(--or); font-size: 12px; padding: 0; cursor: pointer; opacity: 0; transition: opacity 0.15s; line-height: 1; border-radius: 3px; } .wrap-ia-champ:hover .btn-ia-champ, .wrap-ia-champ:focus-within .btn-ia-champ { opacity: 0.7; } .btn-ia-champ:hover { opacity: 1 !important; background: rgba(201,160,99,0.15); } .btn-ia-champ:disabled { color: var(--navy); } /* ---------- Barre recherche header ---------- */ .header-recherche { display: inline-block; } .input-recherche { width: 220px; padding: 6px 10px; border: 1px solid var(--bordure); border-radius: var(--radius-sm); background: var(--fond-carte-hover); font-size: 12px; } .input-recherche:focus { border-color: var(--navy); background: var(--fond-carte); outline: none; width: 280px; transition: width 0.15s; } .recherche-form { display: flex; gap: 10px; margin-bottom: var(--gap-4); } .recherche-input { flex: 1; padding: 10px 14px; border: 1px solid var(--bordure); border-radius: var(--radius-sm); font-size: 14px; background: var(--fond-carte); color: var(--texte); font-family: inherit; } .recherche-input::placeholder { color: var(--texte-doux); } .recherche-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(232, 120, 92, 0.15); } .recherche-resume { padding: 12px 16px; background: rgba(201,160,99,0.08); border-left: 3px solid var(--or); border-radius: var(--radius-sm); margin-bottom: var(--gap-3); font-size: 13px; color: var(--navy); } .recherche-liste { display: flex; flex-direction: column; gap: 10px; } .recherche-item { display: block; background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: 12px 14px; text-decoration: none; color: var(--texte); transition: all 0.15s; } .recherche-item:hover { border-color: var(--navy); box-shadow: var(--ombre-douce); } .recherche-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--bordure); } .recherche-module { font-weight: 700; color: var(--navy); font-size: 13px; } .recherche-num { display: inline-block; background: var(--navy); color: var(--or); font-family: "SF Mono", Menlo, monospace; font-size: 11px; padding: 2px 6px; border-radius: 3px; margin-right: 6px; } .recherche-ligne { font-family: "SF Mono", Menlo, monospace; font-size: 11px; color: var(--texte-muet); } .recherche-match { display: flex; gap: 8px; padding: 4px 0; font-size: 13px; } .recherche-champ { color: var(--texte-muet); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; min-width: 100px; } .recherche-snippet { color: var(--texte); } /* ---------- Organisation & membres ---------- */ .badge-role { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .badge-admin { background: var(--accent); color: #fff; } .badge-membre { background: var(--bordure-forte); color: var(--texte); } .badge-invite { background: var(--fond-carte-hover); color: var(--texte-muet); border: 1px solid var(--bordure); } /* Contraste global des inputs/textareas readonly ou disabled — évite le gris pâle par défaut du navigateur */ input[readonly], textarea[readonly] { color: var(--texte) !important; background: var(--fond) !important; opacity: 1 !important; -webkit-text-fill-color: var(--texte) !important; } input[disabled]:not([type="color"]), textarea[disabled], select[disabled] { color: var(--texte-muet) !important; opacity: 0.7 !important; -webkit-text-fill-color: var(--texte-muet) !important; background: var(--fond) !important; } .formulaire-invite { padding: var(--gap-3); background: var(--fond-carte-hover); border-radius: var(--radius-sm); } .formulaire-invite .champ { margin-bottom: 10px; } /* ---------- Timeline Gantt ---------- */ .tabs-plan { display: flex; gap: 4px; margin-bottom: var(--gap-3); border-bottom: 2px solid var(--bordure); } .tab-plan { padding: 8px 16px; background: transparent; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; font-size: 13px; font-weight: 600; color: var(--texte-muet); cursor: pointer; transition: all 0.15s; } .tab-plan:hover { color: var(--navy); } .tab-plan.actif { color: var(--navy); border-bottom-color: var(--or); } .vue-plan[hidden] { display: none; } .gantt-conteneur { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: var(--gap-3); overflow-x: auto; } .gantt-legende { display: flex; flex-wrap: wrap; gap: 14px; padding: 8px 0 var(--gap-3); border-bottom: 1px solid var(--bordure); margin-bottom: var(--gap-3); font-size: 12px; } .gantt-legende-item { display: inline-flex; align-items: center; gap: 4px; color: var(--texte-muet); } .gantt-pastille { display: inline-block; width: 12px; height: 12px; border-radius: 3px; } .gantt-mois { display: grid; grid-template-columns: 320px repeat(12, 1fr); gap: 2px; margin-bottom: 4px; } .gantt-mois-cell { background: var(--fond-thead); color: var(--texte-thead); padding: 6px 4px; text-align: center; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 3px; } .gantt-mois-cell.gantt-libelle { background: var(--or); color: var(--navy); text-align: left; padding-left: 10px; } .gantt-lignes { display: flex; flex-direction: column; gap: 3px; } .gantt-ligne { display: grid; grid-template-columns: 320px repeat(12, 1fr); gap: 2px; align-items: stretch; } .gantt-libelle-ligne { background: var(--fond-carte-hover); padding: 8px 10px; border-radius: 3px; font-size: 12px; display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 6px; } .gantt-libelle-txt { color: var(--navy); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gantt-total { font-family: "SF Mono", Menlo, monospace; font-size: 10px; color: var(--texte-muet); font-weight: 700; } .gantt-cellule { background: var(--bordure); border-radius: 3px; min-height: 30px; display: flex; align-items: center; justify-content: center; transition: transform 0.1s; } .gantt-cellule.rempli { box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15); } .gantt-cellule.rempli:hover { transform: scale(1.05); z-index: 1; box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .gantt-montant { color: var(--texte-thead); font-family: "SF Mono", Menlo, monospace; font-size: 10px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.3); } /* ---------- Historique / versions ---------- */ .historique-liste { display: flex; flex-direction: column; gap: 6px; } .historique-entry { display: grid; grid-template-columns: 140px 100px 1fr; gap: 12px; padding: 8px 12px; background: var(--fond-carte-hover); border: 1px solid var(--bordure); border-radius: var(--radius-sm); font-size: 12px; align-items: center; } .historique-date { font-family: "SF Mono", Menlo, monospace; color: var(--texte-muet); font-size: 11px; } .historique-action { font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 3px; text-align: center; } .historique-action.create { background: rgba(107,183,123,0.15); color: var(--succes); } .historique-action.update { background: rgba(229,177,74,0.15); color: var(--alerte); } .historique-action.delete { background: rgba(217,109,92,0.15); color: var(--erreur); } /* ---------- Panneau "Analyse & Recommandations" (bas de page module) ---------- */ .panneau-analyse { margin-top: var(--gap-3); /* Fond du panneau : légère variante du fond-carte, cohérente 2 thèmes */ background: var(--fond-carte-hover); border: 1px solid var(--bordure); border-radius: var(--radius); padding: var(--gap-3) var(--gap-4); border-left: 4px solid var(--or); } .panneau-analyse-header { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-3); padding-bottom: 8px; margin-bottom: var(--gap-3); border-bottom: 1px solid var(--bordure); } .panneau-analyse-header h3 { font-size: 14px; color: var(--navy); margin: 0; font-weight: 700; } .panneau-analyse-corps[hidden] { display: none; } .panneau-analyse-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap-2); } .analyse-bloc { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius-sm); padding: 10px 12px; border-top: 3px solid; } .analyse-bloc.bloc-synthese { border-top-color: var(--navy); } .analyse-bloc.bloc-forts { border-top-color: var(--succes); } .analyse-bloc.bloc-risques { border-top-color: var(--erreur); } .analyse-bloc.bloc-reco { border-top-color: var(--or); } .analyse-bloc h4 { font-size: 11px; color: var(--navy); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 6px 0; } .analyse-bloc.bloc-forts h4 { color: var(--succes); } .analyse-bloc.bloc-risques h4 { color: var(--erreur); } .analyse-bloc.bloc-reco h4 { color: var(--accent-fonce); } .analyse-contenu { font-size: 12px; line-height: 1.5; color: var(--texte); white-space: pre-wrap; } /* ---------- Détail action : liens croisés modules ---------- */ .grille-details-action { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-3); margin-bottom: var(--gap-3); } @media (max-width: 1000px) { .grille-details-action { grid-template-columns: 1fr; } } .detail-form { display: flex; flex-direction: column; gap: 10px; } .detail-form .champ { display: flex; flex-direction: column; gap: 3px; } .detail-form label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texte-muet); font-weight: 600; } .detail-form input, .detail-form select, .detail-form textarea { padding: 6px 10px; border: 1px solid var(--bordure); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; } .detail-form input:focus, .detail-form select:focus, .detail-form textarea:focus { border-color: var(--navy); outline: none; } .mois-mini-grille { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; } .mois-mini { background: var(--bordure); border-radius: 3px; padding: 6px 4px; text-align: center; } .mois-mini.mois-rempli { background: var(--navy); color: var(--texte-thead); } .mois-mini-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texte-muet); font-weight: 600; margin-bottom: 2px; } .mois-mini.mois-rempli .mois-mini-label { color: rgba(255,255,255,0.7); } .mois-mini-val { font-family: "SF Mono", Menlo, monospace; font-size: 11px; font-weight: 700; color: var(--navy); } .mois-mini.mois-rempli .mois-mini-val { color: var(--or); } /* Rattachements */ .rattachement-bloc { margin-bottom: 12px; padding: 8px 10px; background: var(--fond-carte-hover); border: 1px solid var(--bordure); border-radius: var(--radius-sm); } .rattachement-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .rattachement-label { font-size: 12px; font-weight: 600; color: var(--navy); } .rattachement-liens { display: flex; flex-wrap: wrap; gap: 4px; min-height: 26px; } .rattachement-liens:empty::after { content: "Aucun rattachement"; font-size: 11px; color: var(--texte-muet); font-style: italic; padding: 4px; } .rattachement-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; background: var(--fond-carte); border: 1px solid var(--navy); border-radius: 12px; font-size: 11px; color: var(--navy); } .pill-titre { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pill-supprimer { background: transparent; border: none; color: var(--texte-muet); font-size: 14px; line-height: 1; padding: 0; cursor: pointer; margin-left: 2px; } .pill-supprimer:hover { color: var(--erreur); } .rattachement-selecteur { width: 100%; padding: 4px 8px; margin-top: 4px; border: 1px solid var(--navy); border-radius: var(--radius-sm); font-size: 12px; background: var(--fond-carte); } .btn-detail-action { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: transparent; border: 1px solid transparent; border-radius: 3px; text-decoration: none; color: var(--or); font-size: 12px; flex-shrink: 0; } .btn-detail-action:hover { background: rgba(201,160,99,0.15); border-color: var(--or); } /* ---------- Modules SYNTHÈSE (auto-calculés) ---------- */ .bandeau-page .numero.synthese { background: linear-gradient(135deg, var(--or) 0%, var(--accent-fonce) 100%); color: var(--texte-thead); } .synthese-activite { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: var(--gap-4); margin-bottom: var(--gap-4); } .activite-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--gap-2); } .activite-carte { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--radius-sm); text-decoration: none; color: var(--texte); transition: all 0.15s; } .activite-carte:hover { border-color: var(--navy); background: var(--fond-carte); transform: translateY(-1px); box-shadow: var(--ombre-douce); } .activite-carte.vide { opacity: 0.55; } .activite-carte .num { font-family: "SF Mono", Menlo, monospace; font-size: 11px; color: var(--or); font-weight: 600; } .activite-carte .nom { font-size: 12px; font-weight: 600; color: var(--navy); line-height: 1.2; } .activite-carte .nb { font-size: 11px; color: var(--texte-muet); } .activite-carte.vide .nb { color: var(--erreur); } /* SWOT — 4 quadrants */ .swot-grille { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-3); margin-bottom: var(--gap-4); } .swot-quadrant { background: var(--fond-carte); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--bordure); display: flex; flex-direction: column; min-height: 300px; position: relative; } /* Liseré latéral gauche — la seule touche de couleur, discret et pro. */ .swot-quadrant::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--texte-muet); } .swot-quadrant[data-cat="force"]::before { background: var(--pestel-s); } .swot-quadrant[data-cat="faiblesse"]::before { background: var(--pestel-e); } .swot-quadrant[data-cat="opportunite"]::before { background: var(--pestel-t); } .swot-quadrant[data-cat="menace"]::before { background: var(--pestel-p); } .swot-header { padding: 12px 14px 12px 18px; display: flex; align-items: center; gap: var(--gap-2); color: var(--texte); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 13px; background: var(--fond-carte-hover); border-bottom: 1px solid var(--bordure); } .swot-lettre { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1.5px solid currentColor; border-radius: 50%; font-family: "Cambria", serif; font-weight: 700; font-size: 13px; color: var(--texte-muet); } .swot-quadrant[data-cat="force"] .swot-lettre { color: var(--pestel-s); } .swot-quadrant[data-cat="faiblesse"] .swot-lettre { color: var(--pestel-e); } .swot-quadrant[data-cat="opportunite"] .swot-lettre { color: var(--pestel-t); } .swot-quadrant[data-cat="menace"] .swot-lettre { color: var(--pestel-p); } .swot-titre { flex: 1; font-size: 13px; } .swot-signe { font-size: 16px; opacity: 0.5; color: var(--texte-muet); } .swot-items { flex: 1; padding: 8px 12px; overflow-y: auto; max-height: 300px; } .swot-item { display: grid; grid-template-columns: 34px 1fr 48px 20px; align-items: center; gap: 6px; padding: 6px 4px; border-bottom: 1px solid var(--bordure); font-size: 12px; } .swot-item:last-child { border-bottom: none; } .swot-item.positif { background: rgba(93,173,226,0.05); } .swot-item.negatif { background: rgba(230,126,34,0.05); } .swot-code { font-family: "SF Mono", Menlo, monospace; color: var(--texte-muet); font-size: 11px; font-weight: 600; } .swot-texte { outline: none; padding: 2px 4px; border-radius: 3px; line-height: 1.3; } .swot-texte:focus { background: var(--fond-carte); box-shadow: 0 0 0 2px rgba(15,44,74,0.1); } .swot-note { text-align: right; font-family: "SF Mono", Menlo, monospace; font-weight: 700; font-size: 12px; padding: 2px 6px; border-radius: 3px; cursor: pointer; color: var(--texte-muet); } .swot-note:hover { background: var(--bordure); } .swot-note.vert { color: var(--succes); } .swot-note.rouge { color: var(--erreur); } .btn-supprimer-item { background: transparent; border: none; color: var(--texte-muet); font-size: 16px; line-height: 1; cursor: pointer; padding: 0; } .btn-supprimer-item:hover { color: var(--erreur); } .swot-add { padding: 8px 12px; border-top: 1px solid var(--bordure); background: var(--fond-carte-hover); } .input-ajout-swot { width: 100%; padding: 6px 8px; border: 1px solid var(--bordure); border-radius: var(--radius-sm); font-size: 12px; } .input-ajout-swot:focus { outline: none; border-color: var(--navy); background: var(--fond-carte); } .swot-suggestions { padding: 8px 12px; border-top: 1px dashed var(--bordure); background: rgba(201,160,99,0.05); font-size: 12px; } .swot-suggestions summary { cursor: pointer; color: var(--or); font-weight: 600; } .suggestions-liste { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; } .suggestion { display: grid; grid-template-columns: 1fr 100px 40px 24px; align-items: center; gap: 6px; padding: 4px 6px; background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: 3px; font-size: 11px; } .sug-texte { color: var(--texte); } .sug-source { color: var(--texte-muet); font-size: 10px; text-align: right; } .sug-poids { font-family: "SF Mono", Menlo, monospace; text-align: right; } .btn-adopter { background: var(--or); color: var(--navy); border: none; border-radius: 3px; width: 22px; height: 22px; font-weight: 700; cursor: pointer; } .btn-adopter:hover { background: var(--or-clair); } .synthese-vue { margin-bottom: var(--gap-4); } /* Plan — mix jauges + briques */ .mix-ligne { display: grid; grid-template-columns: 200px 1fr 60px; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--bordure); font-size: 13px; } .mix-ligne:last-child { border-bottom: none; } .mix-label { color: var(--navy); font-weight: 500; } .mix-jauge { height: 8px; background: var(--bordure); border-radius: 4px; overflow: hidden; } .mix-remplissage { height: 100%; background: linear-gradient(90deg, var(--navy) 0%, var(--or) 100%); border-radius: 4px; transition: width 0.3s; } .mix-valeur { text-align: right; font-family: "SF Mono", Menlo, monospace; color: var(--texte-muet); } .brique-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--gap-3); margin-top: var(--gap-3); } .brique { background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--radius); padding: var(--gap-3); display: flex; flex-direction: column; gap: 4px; border-left: 4px solid var(--bordure-forte); } .brique.ok { border-left-color: var(--succes); background: rgba(16,185,129,0.03); } .brique.partiel { border-left-color: var(--alerte); background: rgba(245,158,11,0.03); } .brique.vide { border-left-color: var(--erreur); background: rgba(239,68,68,0.03); opacity: 0.85; } .brique-num { font-family: "SF Mono", Menlo, monospace; font-size: 11px; color: var(--or); font-weight: 600; } .brique-titre { font-weight: 600; color: var(--navy); font-size: 13px; } .brique-etat { font-size: 11px; color: var(--texte-muet); } .brique-lien { margin-top: 8px; font-size: 11px; color: var(--navy); font-weight: 500; } /* Cockpit — KPI grille */ .cockpit-kpi { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--gap-3); margin-bottom: var(--gap-4); } .kpi-carte { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: var(--gap-4); text-align: center; border-top: 3px solid var(--navy); } .kpi-valeur { font-family: "Cambria", serif; font-size: 32px; font-weight: 700; color: var(--navy); line-height: 1; margin-bottom: 8px; } .kpi-label { font-size: 12px; color: var(--texte); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .kpi-sub { font-size: 11px; color: var(--texte-muet); margin-top: 4px; } /* ---------- Module à venir ---------- */ .module-a-venir { max-width: 600px; margin: 80px auto; text-align: center; padding: var(--gap-6); } .module-a-venir h2 { color: var(--navy); margin-bottom: var(--gap-3); } .module-a-venir p { color: var(--texte-muet); } /* ---------- Overlay chargement IA ---------- */ .overlay-ia { position: fixed; inset: 0; background: rgba(15,44,74,0.7); display: none; align-items: center; justify-content: center; z-index: 100; backdrop-filter: blur(4px); } .overlay-ia.actif { display: flex; } .overlay-ia .boite { background: var(--fond-carte); padding: var(--gap-6); border-radius: var(--radius); text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.3); max-width: 400px; } .overlay-ia .spinner { width: 48px; height: 48px; border: 4px solid rgba(15,44,74,0.1); border-top-color: var(--or); border-radius: 50%; animation: rotation 1s linear infinite; margin: 0 auto var(--gap-3); } @keyframes rotation { to { transform: rotate(360deg); } } .overlay-ia h3 { color: var(--navy); margin-bottom: 6px; } .overlay-ia p { color: var(--texte-muet); font-size: 13px; } /* ---------- Micro utilitaires ---------- */ .text-muet { color: var(--texte-muet); } .mt-4 { margin-top: var(--gap-4); } .mb-4 { margin-bottom: var(--gap-4); } .hidden { display: none !important; } .pleine-largeur { width: 100%; } .legende { display: flex; gap: var(--gap-3); font-size: 12px; color: var(--texte-muet); align-items: center; flex-wrap: wrap; } .legende .pastille { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: middle; } /* ============================================================================ Bouton bascule thème clair / sombre ============================================================================ */ .btn-theme { padding: 6px 10px; font-size: 14px; line-height: 1; min-width: 34px; } .btn-theme .ico-sombre, .btn-theme .ico-clair { display: none; } :root:not([data-theme="light"]) .btn-theme .ico-clair { display: inline; } :root[data-theme="light"] .btn-theme .ico-sombre { display: inline; } /* Menu accent — pastille couleur + panneau flottant */ .menu-accent { position: relative; display: inline-block; } .btn-accent { padding: 6px 8px; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; } .pastille-accent { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--fond-carte); box-shadow: 0 0 0 1px var(--bordure); } /* Bouton "🗑 Supprimer" sur cartes projet — teinte alerte, visible mais discret */ .btn-suppr-projet { color: var(--erreur) !important; } .btn-suppr-projet:hover { background: rgba(217,109,92,0.12) !important; color: var(--erreur) !important; } .menu-accent-panneau { position: absolute; top: calc(100% + 6px); right: 0; background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); box-shadow: var(--ombre-carte); padding: 12px; min-width: 220px; z-index: 100; } .menu-accent-titre { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texte-muet); margin-bottom: 8px; font-weight: 700; } .menu-accent-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; } .pastille-choix { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--fond-carte); box-shadow: 0 0 0 1px var(--bordure); cursor: pointer; padding: 0; transition: transform 0.15s, box-shadow 0.15s; } .pastille-choix:hover { transform: scale(1.15); box-shadow: 0 0 0 2px var(--accent); } .menu-accent-perso { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--bordure); font-size: 12px; color: var(--texte-muet); cursor: pointer; } .menu-accent-perso input[type="color"] { width: 40px; height: 26px; border: 1px solid var(--bordure); border-radius: var(--radius-sm); padding: 0; cursor: pointer; background: transparent; } /* ============================================================================ Matrice Ansoff — 4 quadrants de croissance ============================================================================ */ .ansoff-conteneur { display: grid; grid-template-columns: 32px 60px 1fr; grid-template-rows: 24px 22px 1fr; gap: 6px; background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: 14px; align-items: stretch; } .ansoff-axe-y-titre { grid-column: 1; grid-row: 3; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-size: 11px; letter-spacing: 3px; color: var(--accent); font-weight: 700; padding: 12px 0; } .ansoff-axe-gauche { grid-column: 2; grid-row: 3; display: grid; grid-template-rows: 1fr 1fr; gap: 12px; } .ansoff-marche-label { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-size: 12px; font-weight: 600; color: var(--texte-muet); padding: 8px 0; border-right: 1px dashed var(--bordure); } .ansoff-axe-haut { grid-column: 3; grid-row: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 12px; font-weight: 600; color: var(--texte-muet); text-align: center; } .ansoff-axe-x-titre { grid-column: 3; grid-row: 2; text-align: center; font-size: 11px; letter-spacing: 3px; color: var(--accent); font-weight: 700; } .ansoff-axe-label { padding: 4px; border-bottom: 1px dashed var(--bordure); } .ansoff-grille { grid-column: 3; grid-row: 3; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; min-height: 520px; } .ansoff-quadrant { background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow 0.15s; } .ansoff-quadrant:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.35); } /* Ordre visuel de la grille : penetration (haut-gauche) / dev_produit (haut-droite) dev_marche (bas-gauche) / diversification (bas-droite) */ .ansoff-q-penetration { grid-column: 1; grid-row: 1; } .ansoff-q-dev_produit { grid-column: 2; grid-row: 1; } .ansoff-q-dev_marche { grid-column: 1; grid-row: 2; } .ansoff-q-diversification { grid-column: 2; grid-row: 2; } .ansoff-quadrant-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; border-bottom: 1px solid var(--bordure); padding-bottom: 8px; } .ansoff-quadrant-titre { font-size: 14px; font-weight: 700; color: var(--texte); letter-spacing: 0.3px; } .ansoff-quadrant-desc { font-size: 11px; color: var(--texte-muet); line-height: 1.4; margin-top: 3px; } .ansoff-quadrant-risque { flex-shrink: 0; font-size: 10px; padding: 3px 8px; background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: 12px; color: var(--texte-muet); white-space: nowrap; } .ansoff-quadrant-risque strong { color: var(--accent); } .ansoff-actions { flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 40px; } .ansoff-action { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius-sm); padding: 6px 8px; display: flex; flex-direction: column; gap: 6px; transition: border-color 0.15s; } .ansoff-action:hover { border-color: var(--bordure-forte); } .ansoff-action-intitule { background: transparent; border: none; color: var(--texte); font-size: 13px; font-weight: 500; padding: 2px 0; width: 100%; } .ansoff-action-intitule:focus { outline: none; border-bottom: 1px solid var(--accent); } .ansoff-action-meta { display: flex; gap: 6px; align-items: center; font-size: 11px; } .ansoff-meta { display: flex; align-items: center; gap: 3px; color: var(--texte-muet); } .ansoff-meta input { width: 34px; padding: 2px 4px; background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--radius-sm); color: var(--texte); font-size: 11px; text-align: center; } .ansoff-horizon { flex: 1; padding: 2px 6px; background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--radius-sm); color: var(--texte); font-size: 11px; } .ansoff-action .btn-supprimer-item { background: transparent; border: none; color: var(--texte-muet); cursor: pointer; font-size: 16px; padding: 0 4px; } .ansoff-action .btn-supprimer-item:hover { color: var(--accent); } .ansoff-btn-ajout { align-self: flex-start; font-size: 11px; padding: 4px 10px; margin-top: 4px; } /* ============================================================================ COCKPIT DE DIRECTION — Vague 1 ============================================================================ */ /* To-Do Liste : ligne colorée par statut */ #tableau-todo tbody tr[data-statut="termine"] { opacity: 0.55; } #tableau-todo tbody tr[data-statut="termine"] td:nth-child(2) input { text-decoration: line-through; } #tableau-todo tbody tr[data-statut="bloque"] td { background: rgba(217,109,92,0.06); } #tableau-todo tbody tr[data-statut="en_cours"] td { background: rgba(245,176,65,0.05); } /* Développement Durable — piliers */ .dd-pilier { margin-bottom: var(--gap-4); background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); overflow: hidden; position: relative; } .dd-pilier::before { content: ""; position: absolute; top:0; left:0; right:0; height: 3px; background: var(--accent); } .dd-pilier[data-pilier="economie"]::before { background: #F5B041; } .dd-pilier[data-pilier="environnement"]::before { background: #27AE60; } .dd-pilier[data-pilier="social"]::before { background: #8E44AD; } .dd-pilier-header { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--fond-carte-hover); border-bottom: 1px solid var(--bordure); } .dd-pilier-label { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); } .dd-pilier[data-pilier="economie"] .dd-pilier-label { color: #F5B041; } .dd-pilier[data-pilier="environnement"] .dd-pilier-label { color: #27AE60; } .dd-pilier[data-pilier="social"] .dd-pilier-label { color: #8E44AD; } .dd-pilier-aide { flex: 1; font-size: 12px; color: var(--texte-muet); font-style: italic; } .dd-pilier-compteur { font-size: 11px; color: var(--texte-muet); } .dd-pilier-compteur strong { color: var(--texte); font-family: "SF Mono", Menlo, monospace; } /* Entretien d'évaluation — cartes fiche */ .entretien-grille { display: flex; flex-direction: column; gap: var(--gap-3); margin-bottom: var(--gap-4); } .entretien-carte { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; position: relative; } .entretien-header { display: flex; gap: 16px; align-items: flex-start; padding-bottom: 12px; border-bottom: 1px solid var(--bordure); } .entretien-header-champs { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } .entretien-header-champs label { display: flex; flex-direction: column; gap: 3px; } .entretien-header-champs label > span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texte-muet); font-weight: 600; } .entretien-header-champs input { background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--radius-sm); padding: 6px 8px; color: var(--texte); font-size: 13px; } .entretien-header-champs input:focus { outline: none; border-color: var(--accent); } .entretien-note { display: flex; flex-direction: column; gap: 4px; min-width: 200px; } .entretien-note > span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texte-muet); font-weight: 600; } .entretien-carte .btn-supprimer-item { align-self: flex-start; background: transparent; border: none; color: var(--texte-muet); cursor: pointer; font-size: 18px; padding: 0 6px; } .entretien-carte .btn-supprimer-item:hover { color: var(--erreur); } .entretien-corps { display: flex; flex-direction: column; gap: 10px; } .entretien-champ { display: flex; flex-direction: column; gap: 4px; } .entretien-champ > span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texte-muet); font-weight: 600; } .entretien-champ textarea { background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--radius-sm); padding: 8px 10px; color: var(--texte); font-size: 13px; font-family: inherit; resize: vertical; } .entretien-champ textarea:focus { outline: none; border-color: var(--accent); } .entretien-2cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .entretien-signatures { display: flex; gap: 16px; padding-top: 10px; border-top: 1px dashed var(--bordure); font-size: 12px; color: var(--texte-muet); } .entretien-signatures label { display: flex; align-items: center; gap: 6px; cursor: pointer; } /* Test Belbin — 9 rôles */ .belbin-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); gap: var(--gap-3); margin-bottom: var(--gap-4); } .belbin-carte { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 12px; } .belbin-header { display: flex; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--bordure); } .belbin-header-champs { flex: 1; display: flex; gap: 8px; } .belbin-nom { flex: 1; background: transparent; border: 1px solid transparent; padding: 4px 8px; color: var(--texte); font-size: 15px; font-weight: 700; } .belbin-nom:hover { border-color: var(--bordure); } .belbin-nom:focus { border-color: var(--accent); background: var(--fond); outline: none; } .belbin-date { background: var(--fond); border: 1px solid var(--bordure); padding: 4px 6px; color: var(--texte-muet); font-size: 12px; border-radius: var(--radius-sm); } .belbin-scores { display: flex; flex-direction: column; gap: 6px; } .belbin-role { display: grid; grid-template-columns: 200px 1fr 60px; gap: 10px; align-items: center; padding: 4px 0; } .belbin-role-label { font-size: 12px; color: var(--texte); } .belbin-cat-cerebrale .belbin-role-label { border-left: 2px solid #5DADE2; padding-left: 8px; } .belbin-cat-sociale .belbin-role-label { border-left: 2px solid #F5B041; padding-left: 8px; } .belbin-cat-action .belbin-role-label { border-left: 2px solid #E74C3C; padding-left: 8px; } .belbin-role-bar-wrap { background: var(--fond); height: 8px; border-radius: 4px; overflow: hidden; border: 1px solid var(--bordure); } .belbin-role-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-clair)); transition: width 0.3s; } .belbin-role-num { background: var(--fond); border: 1px solid var(--bordure); padding: 3px 6px; color: var(--texte); font-size: 12px; text-align: center; border-radius: var(--radius-sm); font-family: "SF Mono", Menlo, monospace; } .belbin-remarques { display: flex; flex-direction: column; gap: 4px; } .belbin-remarques > span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texte-muet); font-weight: 600; } .belbin-remarques textarea { background: var(--fond); border: 1px solid var(--bordure); padding: 6px 8px; color: var(--texte); font-size: 12px; font-family: inherit; resize: vertical; border-radius: var(--radius-sm); } .belbin-carte .btn-supprimer-item { background: transparent; border: none; color: var(--texte-muet); cursor: pointer; font-size: 18px; } .belbin-carte .btn-supprimer-item:hover { color: var(--erreur); } /* Test Big Five — 5 facteurs OCEAN */ .bigfive-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)); gap: var(--gap-3); margin-bottom: var(--gap-4); } .bigfive-carte { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 12px; } .bigfive-header { display: flex; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--bordure); } .bigfive-header-champs { flex: 1; display: flex; gap: 8px; } .bigfive-nom { flex: 1; background: transparent; border: 1px solid transparent; padding: 4px 8px; color: var(--texte); font-size: 15px; font-weight: 700; } .bigfive-nom:hover { border-color: var(--bordure); } .bigfive-nom:focus { border-color: var(--accent); background: var(--fond); outline: none; } .bigfive-date { background: var(--fond); border: 1px solid var(--bordure); padding: 4px 6px; color: var(--texte-muet); font-size: 12px; border-radius: var(--radius-sm); } .bigfive-facteurs { display: flex; flex-direction: column; gap: 10px; } .bigfive-facteur { background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--radius-sm); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; } .bigfive-facteur-header { display: flex; align-items: center; gap: 10px; } .bigfive-facteur-icone { font-size: 22px; } .bigfive-facteur-nom { font-size: 13px; font-weight: 700; } .bigfive-facteur-aide { font-size: 10px; color: var(--texte-muet); } .bigfive-facteur-num { margin-left: auto; width: 56px; background: var(--fond-carte); border: 1px solid var(--bordure); padding: 4px 6px; color: var(--texte); font-size: 12px; text-align: center; border-radius: var(--radius-sm); font-family: "SF Mono", Menlo, monospace; } .bigfive-facteur-bar-wrap { background: var(--fond-carte); height: 10px; border-radius: 5px; overflow: hidden; border: 1px solid var(--bordure); } .bigfive-facteur-bar { height: 100%; transition: width 0.3s; } .bigfive-facteur-echelle { display: flex; justify-content: space-between; font-size: 9px; color: var(--texte-muet); text-transform: uppercase; letter-spacing: 0.05em; } .bigfive-champ { display: flex; flex-direction: column; gap: 4px; } .bigfive-champ > span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texte-muet); font-weight: 600; } .bigfive-champ textarea { background: var(--fond); border: 1px solid var(--bordure); padding: 6px 8px; color: var(--texte); font-size: 12px; font-family: inherit; resize: vertical; border-radius: var(--radius-sm); } .bigfive-carte .btn-supprimer-item { background: transparent; border: none; color: var(--texte-muet); cursor: pointer; font-size: 18px; } .bigfive-carte .btn-supprimer-item:hover { color: var(--erreur); } /* ============================================================================ Rapport multi-agent IA (onboarding) ============================================================================ */ .onboard-timeline { display: flex; flex-direction: column; gap: var(--gap-3); margin-bottom: var(--gap-4); } .onboard-etape { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: 16px; position: relative; } .onboard-etape::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--accent); border-radius: var(--radius) 0 0 var(--radius); } .onboard-chercheur::before { background: #5DADE2; } .onboard-auditeur::before { background: #27AE60; } .onboard-analyste::before { background: #F5B041; } .onboard-contradicteur::before { background: #E74C3C; } .onboard-synthetiseur::before { background: #8E44AD; } .onboard-header { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--bordure); margin-bottom: 12px; } .onboard-icone { font-size: 28px; } .onboard-titre-wrap { flex: 1; } .onboard-titre { font-size: 15px; font-weight: 700; color: var(--texte); } .onboard-meta { font-size: 11px; color: var(--texte-muet); margin-top: 2px; } .onboard-conf { width: 120px; height: 8px; background: var(--fond); border: 1px solid var(--bordure); border-radius: 4px; overflow: hidden; } .onboard-conf-bar { height: 100%; background: linear-gradient(90deg, var(--accent-clair), var(--accent)); transition: width 0.3s; } .onboard-contenu { color: var(--texte); font-size: 13px; line-height: 1.6; white-space: pre-wrap; max-height: 400px; overflow-y: auto; padding: 8px; background: var(--fond); border-radius: var(--radius-sm); border: 1px solid var(--bordure); font-family: inherit; } .onboard-actions { display: flex; gap: 12px; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--bordure); } /* ============================================================================ COCKPIT DIRECTION Vague 2 — Objectifs annuels · Faisabilité · Ishikawa · Pareto · RACI ============================================================================ */ /* Objectifs annuels — feux tricolores */ .oa-recap { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-3); margin-bottom: var(--gap-4); } .oa-recap-carte { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: 14px 16px; display: flex; align-items: center; gap: 12px; } .oa-recap-num { font-size: 32px; font-weight: 700; color: var(--texte); } .oa-recap-label { font-size: 12px; color: var(--texte-muet); } #tableau-oa tbody tr[data-feu="vert"] td:nth-child(7) { color: #27AE60; font-weight: 700; } #tableau-oa tbody tr[data-feu="orange"] td:nth-child(7) { color: #F5B041; font-weight: 700; } #tableau-oa tbody tr[data-feu="rouge"] td:nth-child(7) { color: #E74C3C; font-weight: 700; } /* Timeline Gantt trimestrielle */ .oa-gantt { display: flex; flex-direction: column; background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); overflow: hidden; } .oa-gantt-header, .oa-gantt-ligne { display: grid; grid-template-columns: 300px repeat(4, 1fr); align-items: center; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--bordure); } .oa-gantt-header { background: var(--fond-thead); color: var(--texte-thead); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; } .oa-gantt-tr { text-align: center; } .oa-gantt-ligne { transition: background 0.15s; } .oa-gantt-ligne:hover { background: var(--fond-carte-hover); } .oa-gantt-ligne:last-child { border-bottom: none; } .oa-gantt-libelle { display: flex; flex-direction: column; gap: 2px; padding-right: 12px; border-right: 1px solid var(--bordure); } .oa-gantt-num { display: inline-block; font-family: "SF Mono", Menlo, monospace; font-size: 10px; color: var(--accent); font-weight: 700; } .oa-gantt-titre { font-size: 13px; color: var(--texte); font-weight: 600; } .oa-gantt-domaine { font-size: 10px; color: var(--texte-muet); text-transform: uppercase; letter-spacing: 0.04em; } .oa-gantt-cellule { height: 28px; background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--radius-sm); transition: transform 0.1s; } .oa-gantt-cellule.actif { border-color: transparent; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .oa-gantt-cellule.actif:hover { transform: scale(1.05); } /* Faisabilité — 4 cartes 2×2 */ .feasib-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-3); margin-bottom: var(--gap-4); } @media (max-width: 900px) { .feasib-grille { grid-template-columns: 1fr; } } .feasib-carte { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 300px; } .feasib-header { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--bordure); } .feasib-icone { font-size: 28px; } .feasib-titre-wrap { flex: 1; } .feasib-titre { font-size: 14px; font-weight: 700; color: var(--accent); } .feasib-aide { font-size: 11px; color: var(--texte-muet); font-style: italic; margin-top: 2px; } .feasib-score { text-align: center; padding: 4px 10px; background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--radius-sm); } .feasib-score-num { font-size: 22px; font-weight: 700; color: var(--accent); line-height: 1; } .feasib-score-lbl { font-size: 10px; color: var(--texte-muet); text-transform: uppercase; } .feasib-items { display: flex; flex-direction: column; gap: 8px; flex: 1; } .feasib-item { background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--radius-sm); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; } .feasib-item-header { display: flex; align-items: center; gap: 6px; } .feasib-critere { flex: 1; background: transparent; border: 1px solid transparent; padding: 4px 6px; color: var(--texte); font-size: 13px; font-weight: 600; } .feasib-critere:hover { border-color: var(--bordure); } .feasib-critere:focus { border-color: var(--accent); background: var(--fond-carte); outline: none; } .feasib-item .btn-supprimer-item { background: transparent; border: none; color: var(--texte-muet); cursor: pointer; font-size: 14px; opacity: 0.5; padding: 0 4px; } .feasib-item:hover .btn-supprimer-item { opacity: 1; } .feasib-item-corps { display: flex; flex-direction: column; gap: 6px; } .feasib-item-corps label { display: flex; flex-direction: column; gap: 3px; } .feasib-item-corps label > span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texte-muet); font-weight: 600; } .feasib-item-corps textarea { background: var(--fond-carte); border: 1px solid var(--bordure); padding: 5px 8px; color: var(--texte); font-size: 12px; font-family: inherit; resize: vertical; border-radius: var(--radius-sm); } .btn-ajouter-feasib { background: transparent; border: 1px dashed var(--bordure-forte); color: var(--texte-muet); padding: 8px 12px; border-radius: var(--radius-sm); font-size: 11px; cursor: pointer; align-self: flex-start; transition: all 0.15s; } .btn-ajouter-feasib:hover { background: rgba(224,132,106,0.08); border-style: solid; border-color: var(--accent); color: var(--accent); } /* Ishikawa — diagramme SVG + blocs par catégorie */ .ishikawa-viz { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: var(--gap-3); margin-bottom: var(--gap-4); } .ishikawa-viz svg { width: 100%; height: auto; max-height: 500px; } .ishikawa-probleme { font-weight: 600; } .ishikawa-bloc { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); margin-bottom: var(--gap-3); overflow: hidden; } .ishikawa-bloc-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--fond-carte-hover); border-bottom: 1px solid var(--bordure); } .ishikawa-bloc-icone { font-size: 20px; } .ishikawa-bloc-label { flex: 1; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .ishikawa-bloc-count { font-size: 11px; color: var(--texte-muet); padding: 2px 8px; background: var(--fond); border: 1px solid var(--bordure); border-radius: 10px; } /* Pareto — chart Chart.js */ .pareto-viz { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: var(--gap-4); height: 420px; margin-bottom: var(--gap-3); } /* RACI — matrice */ .raci-legende { display: flex; flex-wrap: wrap; gap: 16px; padding: 10px 14px; background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); margin-bottom: var(--gap-3); font-size: 12px; } .raci-legende-item { display: flex; align-items: center; gap: 6px; } .raci-pastille { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: #fff; font-weight: 700; font-size: 11px; border-radius: 50%; } .raci-personnes-editor { background: var(--fond-carte-hover); border: 1px dashed var(--bordure-forte); border-radius: var(--radius-sm); padding: 12px; margin-bottom: var(--gap-3); display: flex; flex-direction: column; gap: 8px; } .raci-personnes-editor label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texte-muet); font-weight: 600; } .raci-personnes-editor textarea { background: var(--fond); border: 1px solid var(--bordure); padding: 8px 10px; color: var(--texte); font-size: 13px; font-family: inherit; resize: vertical; border-radius: var(--radius-sm); min-height: 70px; } .raci-personnes-editor button { align-self: flex-start; } .raci-tableau th[data-personne] { transform: rotate(0); } .raci-cell { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-weight: 700; font-size: 12px; border-radius: 50%; cursor: pointer; border: 1px solid var(--bordure); transition: transform 0.1s; user-select: none; } .raci-cell:hover { transform: scale(1.15); } /* RACI — Toggle mode + Vue Kanban */ .raci-modes { display: flex; gap: 6px; margin-bottom: 12px; } .raci-mode-btn { padding: 6px 14px; background: var(--fond-carte); border: 1px solid var(--bordure); color: var(--texte-muet); border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; } .raci-mode-btn:hover { color: var(--texte); border-color: var(--bordure-forte); } .raci-mode-btn.actif { background: var(--accent); border-color: var(--accent); color: #fff; } .raci-kanban-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 1000px) { .raci-kanban-cols { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .raci-kanban-cols { grid-template-columns: 1fr; } } .raci-kanban-col { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 300px; } .raci-kanban-col-header { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--bordure); } .raci-kanban-col-header > div { flex: 1; } .raci-kanban-col-titre { font-size: 13px; font-weight: 700; color: var(--texte); } .raci-kanban-col-aide { font-size: 10px; color: var(--texte-muet); font-style: italic; } .raci-kanban-col-count { background: var(--fond); border: 1px solid var(--bordure); padding: 2px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; color: var(--texte); font-family: "SF Mono", Menlo, monospace; } .raci-kanban-liste { display: flex; flex-direction: column; gap: 6px; flex: 1; } .raci-kanban-carte { background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--radius-sm); padding: 8px 10px; transition: border-color 0.15s; } .raci-kanban-carte:hover { border-color: var(--accent); } .raci-kanban-carte-personne { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.03em; } .raci-kanban-carte-activite { font-size: 13px; color: var(--texte); margin-top: 2px; font-weight: 600; } .raci-kanban-carte-desc { font-size: 11px; color: var(--texte-muet); margin-top: 3px; line-height: 1.3; } .raci-kanban-carte-echeance { font-size: 10px; color: var(--texte-muet); margin-top: 4px; } /* ============================================================================ Tuile « Nous » dans Benchmark : lien « Personnaliser » ============================================================================ */ .bench-tuile-perso { display: inline-block; margin-top: 4px; font-size: 10px; color: var(--texte-muet); text-decoration: none; padding: 2px 8px; border: 1px dashed var(--bordure); border-radius: 10px; transition: all 0.15s; } .bench-tuile-perso:hover { color: var(--accent); border-color: var(--accent); border-style: solid; background: rgba(224,132,106,0.08); } /* ============================================================================ Paramètres du projet ============================================================================ */ .param-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: var(--gap-3); margin-bottom: var(--gap-4); } .param-carte { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; } .param-carte-titre { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); padding-bottom: 8px; border-bottom: 1px solid var(--bordure); margin-bottom: 4px; } .param-champ { display: flex; flex-direction: column; gap: 4px; } .param-champ > span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texte-muet); font-weight: 600; } .param-champ input, .param-champ textarea { background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--radius-sm); padding: 8px 10px; color: var(--texte); font-size: 13px; font-family: inherit; resize: vertical; } .param-champ input:focus, .param-champ textarea:focus { outline: none; border-color: var(--accent); } .param-champ-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .param-preview-marque { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--radius-sm); margin-bottom: 8px; } .param-preview-pastille { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 20px; border: 2px solid var(--fond-carte); overflow: hidden; flex-shrink: 0; } .param-preview-pastille img { width: 100%; height: 100%; object-fit: cover; } .param-preview-info { flex: 1; } .param-couleur-ligne { display: flex; align-items: center; gap: 10px; } .param-couleur-ligne input[type="color"] { width: 44px; height: 32px; border: 1px solid var(--bordure); border-radius: var(--radius-sm); padding: 0; cursor: pointer; background: transparent; } .param-actions { display: flex; justify-content: flex-end; margin-bottom: var(--gap-4); } .param-upload-form { display: flex; gap: 10px; align-items: center; padding: 12px; background: var(--fond); border: 1px dashed var(--bordure-forte); border-radius: var(--radius-sm); } .param-upload-form input[type="file"] { flex: 1; color: var(--texte); font-size: 12px; } .param-ia-panneau { background: linear-gradient(135deg, rgba(224,132,106,0.08), var(--fond)); border: 1px solid var(--accent); border-radius: var(--radius); padding: 16px; } .param-ia-agents { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 14px; } .param-ia-agent { display: flex; gap: 10px; background: var(--fond-carte); padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--bordure); } .param-ia-agent-icone { font-size: 28px; flex-shrink: 0; } .param-ia-agent strong { color: var(--accent); font-size: 13px; display: block; margin-bottom: 4px; } .param-ia-agent p { color: var(--texte-muet); font-size: 11px; line-height: 1.4; margin: 0; } .param-ia-cta { padding-top: 12px; border-top: 1px solid var(--bordure); text-align: center; } /* ============================================================================ Persona — cartes fiches Buyer Persona ============================================================================ */ .persona-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--gap-3); } .persona-carte { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 12px; transition: border-color 0.15s; } .persona-carte:hover { border-color: var(--accent); } .persona-header { display: flex; gap: 10px; align-items: flex-start; padding-bottom: 10px; border-bottom: 1px solid var(--bordure); } .persona-emoji { width: 56px; height: 56px; text-align: center; font-size: 32px !important; background: var(--fond) !important; border: 1px solid var(--bordure) !important; border-radius: 50%; padding: 0 !important; line-height: 56px; flex-shrink: 0; } .persona-emoji:focus { outline: none; border-color: var(--accent) !important; } .persona-nom-wrap { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .persona-nom { background: transparent !important; border: 1px solid transparent !important; color: var(--texte) !important; font-size: 15px !important; font-weight: 700 !important; padding: 4px 6px !important; } .persona-nom:hover { border-color: var(--bordure) !important; } .persona-nom:focus { border-color: var(--accent) !important; background: var(--fond) !important; outline: none; } .persona-profession { background: transparent !important; border: 1px solid transparent !important; color: var(--texte-muet) !important; font-size: 12px !important; padding: 3px 6px !important; } .persona-profession:hover { border-color: var(--bordure) !important; } .persona-profession:focus { border-color: var(--accent) !important; background: var(--fond) !important; outline: none; } .persona-meta { display: grid; grid-template-columns: 80px 1fr 1fr; gap: 8px; } .persona-champ { display: flex; flex-direction: column; gap: 3px; } .persona-champ > span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texte-muet); font-weight: 600; } .persona-champ input, .persona-champ textarea { background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--radius-sm); padding: 5px 8px; color: var(--texte); font-size: 12px; font-family: inherit; resize: vertical; } .persona-champ input:focus, .persona-champ textarea:focus { outline: none; border-color: var(--accent); } .persona-citation { background: var(--fond); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 8px 10px; display: flex; gap: 8px; align-items: flex-start; } .persona-guillemet { color: var(--accent); font-size: 32px; font-family: Georgia, serif; line-height: 1; flex-shrink: 0; } .persona-citation textarea { flex: 1; background: transparent; border: none; color: var(--texte); font-style: italic; font-size: 13px; font-family: inherit; resize: vertical; } .persona-citation textarea:focus { outline: none; } .persona-corps { display: flex; flex-direction: column; gap: 8px; } /* ============================================================================ Value Proposition Canvas — 2 côtés, 6 blocs ============================================================================ */ .vpc-conteneur { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-3); margin-bottom: var(--gap-4); } @media (max-width: 1000px) { .vpc-conteneur { grid-template-columns: 1fr; } } .vpc-cote { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 10px; } .vpc-cote-titre { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); padding-bottom: 8px; border-bottom: 1px solid var(--bordure); } .vpc-bloc { background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--radius-sm); padding: 10px; display: flex; flex-direction: column; gap: 8px; } .vpc-bloc-header { display: flex; gap: 8px; align-items: flex-start; padding-bottom: 6px; border-bottom: 1px solid var(--bordure); } .vpc-bloc-icone { font-size: 20px; } .vpc-bloc-label { font-size: 13px; font-weight: 700; color: var(--texte); } .vpc-bloc-aide { font-size: 10px; color: var(--texte-muet); line-height: 1.3; margin-top: 2px; } .vpc-items { display: flex; flex-direction: column; gap: 4px; } .vpc-item { display: flex; gap: 6px; align-items: center; background: var(--fond-carte); border: 1px solid transparent; border-radius: var(--radius-sm); padding: 4px 6px; } .vpc-item:hover { border-color: var(--bordure); } .vpc-prio { display: flex; align-items: center; } .vpc-prio input { width: 32px; padding: 2px 4px; background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--radius-sm); color: var(--texte); font-size: 11px; text-align: center; } .vpc-item-input { flex: 1; background: transparent; border: none; color: var(--texte); font-size: 12px; padding: 2px 0; } .vpc-item-input:focus { outline: none; } .btn-ajouter-vpc { align-self: center; width: 24px; height: 24px; background: transparent; border: 1px dashed var(--bordure-forte); border-radius: 50%; color: var(--accent); cursor: pointer; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: all 0.15s; margin-top: 4px; } .btn-ajouter-vpc:hover { background: rgba(224,132,106,0.1); border-style: solid; border-color: var(--accent); } /* ============================================================================ Customer Journey Map — timeline 5 étapes ============================================================================ */ .journey-conteneur { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: var(--gap-4); } @media (max-width: 1400px) { .journey-conteneur { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .journey-conteneur { grid-template-columns: 1fr; } } .journey-etape { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 300px; } .journey-etape-header { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--bordure); } .journey-num { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 12px; flex-shrink: 0; } .journey-icone { font-size: 18px; } .journey-titre { flex: 1; font-size: 13px; font-weight: 700; color: var(--texte); text-transform: uppercase; letter-spacing: 0.03em; } .journey-compteur { background: var(--fond); border: 1px solid var(--bordure); border-radius: 10px; padding: 2px 8px; font-size: 10px; color: var(--texte-muet); font-family: "SF Mono", Menlo, monospace; } .journey-items { display: flex; flex-direction: column; gap: 10px; } .journey-item { background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--radius-sm); padding: 10px; display: flex; flex-direction: column; gap: 8px; position: relative; } .journey-item .btn-supprimer-item { position: absolute; top: 6px; right: 6px; background: transparent; border: none; color: var(--texte-muet); cursor: pointer; font-size: 14px; opacity: 0; transition: opacity 0.15s; } .journey-item:hover .btn-supprimer-item { opacity: 1; } .journey-item .btn-supprimer-item:hover { color: var(--accent); } .journey-item-emotion { display: flex; align-items: center; justify-content: space-between; padding-bottom: 6px; border-bottom: 1px dashed var(--bordure); } .journey-emotion-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texte-muet); font-weight: 600; } .journey-emoji-cycle { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px 8px; border-radius: 12px; background: var(--fond-carte); transition: background 0.15s; } .journey-emoji-cycle:hover { background: rgba(224,132,106,0.12); } .journey-emoji-cycle > span:first-child { font-size: 20px; line-height: 1; } .journey-emotion-num { font-size: 11px; color: var(--texte-muet); font-family: "SF Mono", Menlo, monospace; font-weight: 600; } .journey-champ { display: flex; flex-direction: column; gap: 3px; } .journey-champ > span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texte-muet); font-weight: 600; } .journey-champ textarea { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius-sm); padding: 5px 8px; color: var(--texte); font-size: 12px; font-family: inherit; resize: vertical; } .journey-champ textarea:focus { outline: none; border-color: var(--accent); } .btn-ajouter-journey { background: transparent; border: 1px dashed var(--bordure-forte); border-radius: var(--radius-sm); color: var(--texte-muet); padding: 6px 10px; font-size: 11px; cursor: pointer; transition: all 0.15s; } .btn-ajouter-journey:hover { background: rgba(224,132,106,0.1); border-style: solid; border-color: var(--accent); color: var(--accent); } /* ============================================================================ TAM / SAM / SOM — 3 cercles concentriques + blocs latéraux ============================================================================ */ .tss-conteneur { display: grid; grid-template-columns: 400px 1fr; gap: var(--gap-4); margin-bottom: var(--gap-4); } @media (max-width: 1100px) { .tss-conteneur { grid-template-columns: 1fr; } } .tss-viz { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: var(--gap-3); display: flex; align-items: center; justify-content: center; min-height: 400px; } .tss-viz svg { width: 100%; height: auto; max-width: 380px; } .tss-blocs { display: flex; flex-direction: column; gap: var(--gap-3); } .tss-bloc { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; position: relative; } .tss-bloc::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--accent); border-radius: var(--radius) 0 0 var(--radius); } .tss-bloc-tam::before { background: rgba(224,132,106,0.4); } .tss-bloc-sam::before { background: rgba(224,132,106,0.7); } .tss-bloc-som::before { background: var(--accent); } .tss-bloc-header { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--bordure); } .tss-bloc-code { width: 44px; height: 44px; background: var(--fond); border: 2px solid var(--accent); border-radius: 50%; color: var(--accent); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: 0.03em; } .tss-bloc-label { font-size: 14px; font-weight: 700; color: var(--texte); } .tss-bloc-aide { font-size: 11px; color: var(--texte-muet); margin-top: 2px; line-height: 1.4; } .tss-bloc-corps { display: flex; flex-direction: column; gap: 8px; } .tss-champ { display: flex; flex-direction: column; gap: 3px; } .tss-champ > span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texte-muet); font-weight: 600; } .tss-champ input, .tss-champ textarea { background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--radius-sm); padding: 6px 8px; color: var(--texte); font-size: 13px; font-family: inherit; resize: vertical; } .tss-champ input:focus, .tss-champ textarea:focus { outline: none; border-color: var(--accent); } .tss-valeur-ligne { display: grid; grid-template-columns: 1fr 140px; gap: 8px; } .btn-init-tss { margin-left: auto; font-size: 11px; padding: 4px 10px; } /* ============================================================================ Business Model Canvas — 9 briques ============================================================================ */ .bmc-conteneur { display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: 200px 200px 160px; gap: 6px; background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: 10px; } /* Ligne 1-2 : partenaires (2 col), activités (2 col), propositions (2 col), relations (2 col), segments (2 col) */ /* Ligne 3 : couts (5 col), revenus (5 col) */ .bmc-bloc-partenaires { grid-column: 1 / span 2; grid-row: 1 / span 2; } .bmc-bloc-activites { grid-column: 3 / span 2; grid-row: 1; } .bmc-bloc-ressources { grid-column: 3 / span 2; grid-row: 2; } .bmc-bloc-propositions { grid-column: 5 / span 2; grid-row: 1 / span 2; } .bmc-bloc-relations { grid-column: 7 / span 2; grid-row: 1; } .bmc-bloc-canaux { grid-column: 7 / span 2; grid-row: 2; } .bmc-bloc-segments { grid-column: 9 / span 2; grid-row: 1 / span 2; } .bmc-bloc-couts { grid-column: 1 / span 5; grid-row: 3; } .bmc-bloc-revenus { grid-column: 6 / span 5; grid-row: 3; } .bmc-bloc { position: relative; background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--radius-sm); padding: 10px 12px 32px 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; transition: box-shadow 0.15s, border-color 0.15s; } .bmc-bloc:hover { border-color: var(--accent); box-shadow: 0 3px 10px rgba(0,0,0,0.35); } .bmc-bloc-propositions { background: linear-gradient(180deg, rgba(224,132,106,0.08), var(--fond)); border-color: var(--accent-fonce); } .bmc-bloc-header { display: flex; gap: 8px; align-items: flex-start; padding-bottom: 6px; border-bottom: 1px solid var(--bordure); } .bmc-numero { flex-shrink: 0; width: 22px; height: 22px; background: var(--accent); color: var(--texte-thead); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; } .bmc-titre-wrap { flex: 1; min-width: 0; } .bmc-titre { font-size: 12px; font-weight: 700; color: var(--texte); letter-spacing: 0.2px; text-transform: uppercase; line-height: 1.2; } .bmc-question { font-size: 10px; color: var(--texte-muet); line-height: 1.3; margin-top: 2px; font-style: italic; } .bmc-items { flex: 1; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; max-height: 100%; } .bmc-item { display: flex; gap: 4px; align-items: center; background: var(--fond-carte); border-radius: var(--radius-sm); padding: 3px 6px; border: 1px solid transparent; transition: border-color 0.1s; } .bmc-item:hover { border-color: var(--bordure); } .bmc-item-input { flex: 1; background: transparent; border: none; color: var(--texte); font-size: 12px; padding: 2px 0; min-width: 0; } .bmc-item-input:focus { outline: none; } .bmc-item .btn-supprimer-item { background: transparent; border: none; color: var(--texte-muet); cursor: pointer; font-size: 13px; padding: 0 3px; opacity: 0; transition: opacity 0.1s; } .bmc-item:hover .btn-supprimer-item { opacity: 1; } .bmc-item .btn-supprimer-item:hover { color: var(--accent); } .btn-bmc-ajout { position: absolute; bottom: 6px; right: 8px; width: 22px; height: 22px; background: var(--fond-carte); border: 1px dashed var(--bordure-forte); border-radius: 50%; color: var(--accent); cursor: pointer; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s; } .btn-bmc-ajout:hover { /* Aligné sur le pattern Notion/Airtable : fond corail léger + bordure pleine accent + texte accent */ background: rgba(224,132,106,0.08); color: var(--accent); border-color: var(--accent); border-style: solid; } /* ---------- Boutons "init/rattacher" inline dans les en-têtes de blocs ---------- Même palette Notion/Airtable (transparent + dashed + muted → accent au hover) mais sans forcer padding/font-size/width : ces boutons sont des pastilles compactes intégrées à un en-tête de carte (vision, marque, action_detail). La règle est placée en fin de fichier pour l'emporter (même spécificité, source order). */ .btn-init-vision, .btn-init-dim, .btn-ajouter-lien { background: transparent; border: 1px dashed var(--bordure-forte); color: var(--texte-muet); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s ease; } .btn-init-vision:hover, .btn-init-dim:hover, .btn-ajouter-lien:hover { background: rgba(224,132,106,0.08); border-color: var(--accent); border-style: solid; color: var(--accent); } @media (max-width: 1100px) { .bmc-conteneur { grid-template-columns: 1fr; grid-template-rows: none; } .bmc-bloc { grid-column: 1 / -1 !important; grid-row: auto !important; min-height: 160px; } .ansoff-grille { grid-template-columns: 1fr; grid-template-rows: repeat(4, minmax(180px, 1fr)); } .ansoff-q-penetration, .ansoff-q-dev_produit, .ansoff-q-dev_marche, .ansoff-q-diversification { grid-column: 1; grid-row: auto; } } /* ═══════════════════════════════════════════════════════════════ Cockpit Direction Vague 3 — Innovation ═══════════════════════════════════════════════════════════════ */ .innov-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; } .innov-tuile { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; transition: transform 0.15s, box-shadow 0.15s; } .innov-tuile:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .innov-tuile-icon { font-size: 22px; } .innov-tuile-label { font-size: 12px; color: var(--texte-muet); text-transform: uppercase; letter-spacing: 0.04em; } .innov-tuile-nb { font-size: 28px; font-weight: 700; color: var(--texte); } .innov-tuile-detail { display: flex; gap: 4px; flex-wrap: wrap; } .innov-badge { font-size: 10px; padding: 2px 6px; border-radius: 8px; background: var(--fond); color: var(--texte-muet); border: 1px solid var(--bordure); } .innov-badge.ok { background: #27AE60; color: #fff; border-color: transparent; } .innov-badge.cours { background: #5DADE2; color: #fff; border-color: transparent; } .innov-badge.attente { background: var(--accent); color: #fff; border-color: transparent; } .innov-matrice { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: 12px; overflow-x: auto; } .innov-matrice canvas { max-width: 100%; height: auto; } .innov-legende { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; padding: 10px; font-size: 12px; color: var(--texte-muet); } .innov-leg-item { display: flex; align-items: center; gap: 6px; } .innov-leg-item .dot { width: 12px; height: 12px; border-radius: 50%; } .input-num-court { width: 60px; text-align: center; } /* ═══════════════════════════════════════════════════════════════ Cockpit Direction Vague 3 — Qualité ═══════════════════════════════════════════════════════════════ */ .qual-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; } .qual-tuile { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; } .qual-tuile-icon { font-size: 24px; } .qual-tuile-label { font-size: 12px; color: var(--texte-muet); text-transform: uppercase; letter-spacing: 0.04em; } .qual-tuile-nb { font-size: 32px; font-weight: 700; color: var(--texte); } .qual-tuile-detail { display: flex; gap: 4px; flex-wrap: wrap; } .qual-pill { font-size: 11px; padding: 3px 8px; border-radius: 10px; background: var(--fond); border: 1px solid var(--bordure); } .qual-pill.ok { background: #27AE60; color: #fff; border-color: transparent; } .qual-pill.att { background: #F5B041; color: #fff; border-color: transparent; } .qual-pill.ko { background: #E74C3C; color: #fff; border-color: transparent; } /* ═══════════════════════════════════════════════════════════════ Cockpit Direction Vague 3 — Business Plan ═══════════════════════════════════════════════════════════════ */ .bp-progress { position: relative; background: var(--fond); border: 1px solid var(--bordure); border-radius: 20px; height: 24px; overflow: hidden; } .bp-progress-barre { background: linear-gradient(90deg, #27AE60, var(--accent)); height: 100%; transition: width 0.4s ease; } .bp-progress-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: var(--texte); text-shadow: 0 0 4px rgba(255,255,255,0.7); } .bp-sommaire { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-bottom: 24px; } .bp-som-tuile { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: 10px 12px; text-decoration: none; color: var(--texte); display: flex; align-items: center; gap: 8px; transition: transform 0.1s, box-shadow 0.1s; } .bp-som-tuile:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.1); } .bp-som-num { background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px; min-width: 20px; text-align: center; } .bp-som-label { flex: 1; font-size: 13px; } .bp-som-icon { font-size: 14px; } .bp-som-tuile[data-statut="ok"] { border-left: 4px solid #27AE60; } .bp-som-tuile[data-statut="attention"] { border-left: 4px solid #F5B041; } .bp-som-tuile[data-statut="ko"] { border-left: 4px solid #E74C3C; } .bp-chapitre { scroll-margin-top: 20px; } .bp-chapitre-header { border-bottom: 1px solid var(--bordure); padding-bottom: 10px; margin-bottom: 14px; } .bp-chapitre-titre { display: flex; align-items: baseline; gap: 10px; } .bp-chapitre-num { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); font-weight: 700; } .bp-chapitre-label { font-size: 18px; font-weight: 600; } .bp-chapitre-corps { display: grid; grid-template-columns: 1fr 280px; gap: 20px; } .bp-chapitre-side { display: flex; flex-direction: column; gap: 12px; } .bp-champ { display: flex; flex-direction: column; gap: 4px; } .bp-champ-label { font-size: 11px; color: var(--texte-muet); text-transform: uppercase; letter-spacing: 0.04em; } .bp-textarea { font-family: Georgia, "Times New Roman", serif; line-height: 1.55; padding: 10px; } @media (max-width: 900px) { .bp-chapitre-corps { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════ Cockpit Direction Vague 3 — Finance ═══════════════════════════════════════════════════════════════ */ .fin-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; } .fin-tuile { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; } .fin-tuile-label { font-size: 12px; color: var(--texte-muet); text-transform: uppercase; letter-spacing: 0.04em; } .fin-tuile-nb { font-size: 22px; font-weight: 700; color: var(--texte); font-variant-numeric: tabular-nums; } .tableau-conteneur-scroll { overflow-x: auto; max-width: 100%; } .tableau-fin th, .tableau-fin td { white-space: nowrap; } .tableau-fin .fin-mensuel { width: 65px; text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; } /* ═════════════════════════════════════════════════════════════ PARCOURS MISSION — Entité › Métier › Outils Palette officielle : #1C1B19 / #232220 / #34322E / #E0846A ═════════════════════════════════════════════════════════════ */ /* Mode clair — surcharge des tokens quand data-theme="light" sur */ :root[data-theme="light"] .mission-body { --m-fond: #FAF6F0; --m-surface: #FFFFFF; --m-surface-2: #F5EEE4; --m-bordure: #E4DACC; --m-bordure-2: #C9B8A6; --m-texte: #1F1B16; --m-texte-doux: #6E5F52; --m-texte-tres-doux: #A89485; --m-inverse: #FFFFFF; } .mission-body { --m-fond: #1C1B19; --m-surface: #232220; --m-surface-2: #2A2926; --m-bordure: #34322E; --m-bordure-2: #45423D; --m-corail: #E0846A; --m-corail-clair: #EC9C86; --m-corail-braise: #C46B54; --m-corail-voile: rgba(224, 132, 106, 0.14); --m-texte: #ECEAE6; --m-texte-doux: #9A958D; --m-texte-tres-doux: #6E6A63; --m-inverse: #1A1918; --m-bleu: #7EA6C4; --m-vert: #7FB59B; --m-ambre: #D9A96A; --m-terracotta: #C67A5F; --m-champagne: #CCB08A; --m-mkt: var(--m-corail); --m-com: var(--m-ambre); --m-mgt: var(--m-terracotta); --m-dir: var(--m-champagne); --m-r-sm: 6px; --m-r-md: 10px; --m-r-lg: 16px; --m-r-pill: 999px; --m-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --m-serif: "Iowan Old Style", Georgia, "Times New Roman", serif; --m-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; margin: 0; padding: 0; font-family: var(--m-sans); background: var(--m-fond); color: var(--m-texte); line-height: 1.55; min-height: 100vh; -webkit-font-smoothing: antialiased; } /* Barre supérieure — breadcrumb persistant */ .mission-barre { border-bottom: 1px solid var(--m-bordure); background: var(--m-surface); padding: 14px 32px; display: flex; align-items: center; gap: 24px; position: sticky; top: 0; z-index: 20; } .mission-logo { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; color: var(--m-texte); text-decoration: none; } .mission-logo em { color: var(--m-corail); font-style: normal; } .mission-fil { display: flex; align-items: center; gap: 6px; font-family: var(--m-mono); font-size: 11px; letter-spacing: 0.08em; margin-left: 12px; } .mission-fil-etape { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--m-r-pill); background: transparent; text-decoration: none; color: var(--m-texte-tres-doux); font-family: var(--m-mono); font-size: 11px; letter-spacing: 0.08em; transition: color 0.15s, background 0.15s; } .mission-fil-etape.actif { background: var(--m-corail-voile); color: var(--m-corail); } .mission-fil-etape.fait { color: var(--m-texte-doux); } .mission-fil-etape.fait:hover { color: var(--m-corail); background: var(--m-corail-voile); } .mission-fil-etape .num { font-weight: 700; opacity: 0.6; } .mission-fil-etape.actif .num, .mission-fil-etape.fait .num { opacity: 1; } .mission-fil-desactive { opacity: 0.4; cursor: not-allowed; padding: 4px 10px; color: var(--m-texte-tres-doux); } .mission-fil-sep { color: var(--m-texte-tres-doux); font-family: var(--m-mono); } .mission-barre-fin { margin-left: auto; display: flex; align-items: center; gap: 12px; font-family: var(--m-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--m-texte-tres-doux); text-transform: uppercase; } .mission-theme { background: transparent; border: 1px solid var(--m-bordure-2); color: var(--m-texte-doux); padding: 6px 8px; border-radius: var(--m-r-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s; line-height: 0; } .mission-theme:hover { border-color: var(--m-corail); color: var(--m-corail); } .mission-theme .ico-sombre, .mission-theme .ico-clair { display: none; } :root:not([data-theme="light"]) .mission-theme .ico-sombre { display: inline; } :root[data-theme="light"] .mission-theme .ico-clair { display: inline; } /* Document */ .mission-doc { max-width: 1240px; margin: 0 auto; padding: 64px 32px; } @media (max-width: 900px) { .mission-doc { padding: 32px 20px; } } /* Tête d'étape */ .mission-tete { margin-bottom: 32px; } .mission-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--m-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--m-corail); padding: 6px 12px; background: var(--m-corail-voile); border-radius: var(--m-r-pill); margin-bottom: 16px; } .mission-eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--m-corail); border-radius: 50%; } .mission-tete h1 { font-weight: 700; font-size: clamp(38px, 5vw, 62px); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 12px; text-wrap: balance; color: var(--m-texte); } .mission-tete h1 em { font-family: var(--m-serif); font-style: italic; font-weight: 400; color: var(--m-corail); } .mission-lead { font-size: 17px; line-height: 1.55; color: var(--m-texte-doux); max-width: 62ch; margin: 0; } .mission-lead b { color: var(--m-texte); font-weight: 600; } /* Rappel */ .mission-rappel { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--m-surface); border: 1px solid var(--m-bordure); border-radius: var(--m-r-md); margin-bottom: 32px; font-size: 13px; flex-wrap: wrap; } .mission-rappel-icon { color: var(--m-corail); font-family: var(--m-mono); background: var(--m-corail-voile); padding: 4px 8px; border-radius: var(--m-r-sm); font-size: 10px; letter-spacing: 0.12em; font-weight: 700; } .mission-rappel-txt { color: var(--m-texte-doux); } .mission-rappel strong { color: var(--m-texte); font-weight: 600; } .mission-rappel-detail { margin-left: auto; color: var(--m-texte-tres-doux); font-family: var(--m-mono); font-size: 11px; letter-spacing: 0.08em; } .mission-rappel-sep { color: var(--m-texte-tres-doux); } /* ---------- ÉTAPE 01 · Entités ---------- */ .mission-entites { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 24px; } /* ═════════════════════════════════════════════════════════════ Corbeille — soft-delete des projets ═════════════════════════════════════════════════════════════ */ .mission-corbeille-lien { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--m-bordure); text-align: center; } .mission-corbeille-lien a { display: inline-flex; align-items: center; gap: 6px; color: var(--m-texte-doux); text-decoration: none; font-size: 12px; font-family: var(--m-mono); letter-spacing: 0.08em; padding: 6px 12px; border-radius: var(--m-r-pill); border: 1px dashed var(--m-bordure-2); transition: all 0.15s; } .mission-corbeille-lien a:hover { color: var(--m-corail); border-color: var(--m-corail); background: var(--m-corail-voile); } .corbeille-liste { display: flex; flex-direction: column; gap: 12px; } .corbeille-item { background: var(--m-surface); border: 1px solid var(--m-bordure); border-radius: var(--m-r-md); padding: 16px 20px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; opacity: 0.85; } .corbeille-item-imminente { border-color: var(--danger, #C05445); background: rgba(192, 84, 69, 0.08); opacity: 1; } .corbeille-item-infos { flex: 1; min-width: 240px; } .corbeille-item-nom { font-weight: 700; font-size: 16px; color: var(--m-texte); margin: 0 0 4px; text-decoration: line-through; text-decoration-color: var(--m-texte-tres-doux); } .corbeille-item-meta { font-size: 12px; color: var(--m-texte-doux); margin-bottom: 6px; } .corbeille-item-timer { font-family: var(--m-mono); font-size: 11px; color: var(--m-texte-tres-doux); letter-spacing: 0.04em; } .corbeille-item-timer b { color: var(--m-texte); } .corbeille-item-actions { display: flex; gap: 8px; } .mission-btn-danger { background: transparent; border-color: var(--danger, #C05445); color: var(--danger, #C05445); } .mission-btn-danger:hover:not(:disabled) { background: var(--danger, #C05445); color: #FFFFFF; } .mission-btn-danger:disabled { opacity: 0.4; cursor: not-allowed; } /* Modale suppression définitive (double confirmation + timer) */ .suppr-modale { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); z-index: 3000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); } .suppr-modale[hidden] { display: none !important; } .suppr-modale-corps { background: var(--m-surface); border: 1px solid var(--danger, #C05445); border-radius: 14px; padding: 28px 30px; width: 520px; max-width: calc(100vw - 32px); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6); } .suppr-modale-titre { font-weight: 700; font-size: 18px; color: var(--danger, #C05445); margin-bottom: 12px; } .suppr-modale-lead { font-size: 14px; line-height: 1.55; color: var(--m-texte-doux); margin: 0 0 20px; } .suppr-modale-lead b { color: var(--m-texte); } .suppr-modale-champ { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; } .suppr-modale-champ span { font-family: var(--m-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--m-texte-doux); } .suppr-modale-champ input { background: var(--m-fond); border: 1px solid var(--m-bordure-2); color: var(--m-texte); padding: 12px 14px; border-radius: var(--m-r-sm); font-size: 14px; font-family: inherit; outline: none; transition: border-color 0.15s; } .suppr-modale-champ input:focus { border-color: var(--danger, #C05445); } .suppr-modale-actions { display: flex; justify-content: flex-end; gap: 10px; } .mission-entite-wrap { position: relative; } .mission-entite-supprimer { position: absolute; top: 10px; right: 10px; z-index: 2; margin: 0; } .mission-entite-supprimer button { background: rgba(28, 27, 25, 0.65); border: 1px solid var(--m-bordure); color: var(--m-texte-doux); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 0.4; transition: all 0.15s; padding: 0; backdrop-filter: blur(4px); } .mission-entite-wrap:hover .mission-entite-supprimer button { opacity: 1; } .mission-entite-supprimer button:hover { background: var(--danger, #C05445); border-color: var(--danger, #C05445); color: #FFFFFF; transform: scale(1.08); } .mission-entite { background: var(--m-surface); border: 1px solid var(--m-bordure); border-radius: var(--m-r-md); padding: 16px; text-decoration: none; color: inherit; display: flex; flex-direction: column; min-height: 200px; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; } .mission-entite:hover { transform: translateY(-3px); border-color: var(--m-corail); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); } .mission-entite-badge { font-family: var(--m-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; background: var(--m-corail-voile); color: var(--m-corail); align-self: flex-start; margin-bottom: 12px; font-weight: 700; } .mission-entite h3 { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; margin: 0 0 4px; line-height: 1.2; color: var(--m-texte); } .mission-entite-meta { font-size: 12px; color: var(--m-texte-doux); margin-bottom: 16px; } .mission-entite-progress { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--m-bordure); } .mission-entite-progress-tete { display: flex; justify-content: space-between; font-family: var(--m-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--m-texte-doux); text-transform: uppercase; margin-bottom: 6px; } .mission-entite-progress-tete strong { color: var(--m-corail); font-family: var(--m-mono); } .mission-entite-progress-bar { height: 4px; background: var(--m-fond); border-radius: var(--m-r-pill); overflow: hidden; } .mission-entite-progress-fill { height: 100%; background: linear-gradient(90deg, var(--m-corail-braise), var(--m-corail)); } .mission-entite-progress-detail { font-family: var(--m-mono); font-size: 10px; color: var(--m-texte-tres-doux); margin-top: 6px; letter-spacing: 0.06em; } .mission-entite-nouveau { border: 1.5px dashed var(--m-bordure-2); background: transparent; align-items: center; justify-content: center; text-align: center; } .mission-entite-nouveau:hover { border-color: var(--m-corail); background: var(--m-corail-voile); border-style: dashed; } .mission-entite-nouveau-corps { display: flex; flex-direction: column; gap: 8px; align-items: center; } .mission-entite-nouveau-plus { font-size: 32px; font-weight: 300; color: var(--m-corail); line-height: 1; } .mission-entite-nouveau strong { font-weight: 600; font-size: 14px; color: var(--m-texte); } .mission-entite-nouveau small { font-size: 12px; color: var(--m-texte-doux); max-width: 22ch; line-height: 1.4; } .mission-vide { text-align: center; padding: 48px 24px; color: var(--m-texte-doux); border: 1px dashed var(--m-bordure); border-radius: var(--m-r-md); margin-top: 24px; } /* ---------- ÉTAPE 02 · Métiers ---------- */ .mission-metiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; } @media (max-width: 900px) { .mission-metiers { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .mission-metiers { grid-template-columns: 1fr; } } .mission-metier { background: var(--m-surface); border: 1px solid var(--m-bordure); border-radius: var(--m-r-md); padding: 24px 16px; text-decoration: none; color: inherit; display: flex; flex-direction: column; min-height: 320px; position: relative; overflow: hidden; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; } .mission-metier::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--_c); } .mission-metier:hover { transform: translateY(-4px); border-color: var(--_c); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); } .mission-metier-num { font-family: var(--m-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--_c); background: var(--_v); padding: 4px 10px; border-radius: var(--m-r-sm); align-self: flex-start; margin-bottom: 16px; font-weight: 700; } .mission-metier-symbole { display: flex; align-items: center; justify-content: center; margin: 12px 0; color: var(--_c); opacity: 0.5; } .mission-metier-symbole svg { width: 78px; height: 78px; } .mission-metier h3 { font-weight: 700; font-size: 22px; letter-spacing: -0.02em; margin: 0 0 8px; line-height: 1.15; color: var(--m-texte); } .mission-metier-baseline { font-family: var(--m-serif); font-style: italic; font-size: 13px; color: var(--m-texte-doux); line-height: 1.5; margin: 0 0 16px; } .mission-metier-stats { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--m-bordure); display: flex; justify-content: space-between; align-items: baseline; } .mission-metier-outils { font-family: var(--m-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--m-texte-doux); } .mission-metier-outils b { display: block; font-family: var(--m-sans); font-weight: 700; font-size: 24px; color: var(--_c); letter-spacing: -0.01em; text-transform: none; line-height: 1; margin-bottom: 2px; } .mission-metier-phases { font-family: var(--m-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--_c); opacity: 0.8; } /* ---------- ÉTAPE 03 · Outils ---------- */ .mission-etape-outils { /* --metier-c / --metier-v sont injectés en style inline */ } /* Progress bar globale du métier */ .mission-progress-global { background: var(--m-surface); border: 1px solid var(--m-bordure); border-radius: var(--m-r-md); padding: 16px 20px; margin: 24px 0; } .mission-progress-global-tete { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .mission-progress-global-label { font-family: var(--m-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--m-texte-doux); } .mission-progress-global-val { font-family: var(--m-mono); font-size: 22px; font-weight: 700; color: var(--metier-c); letter-spacing: -0.01em; } .mission-progress-global-bar { height: 6px; background: var(--m-fond); border-radius: var(--m-r-pill); overflow: hidden; } .mission-progress-global-fill { height: 100%; background: linear-gradient(90deg, var(--metier-c), var(--m-corail)); border-radius: var(--m-r-pill); transition: width 0.4s ease; } /* Phases avec compteur intégré */ .mission-phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 24px 0 40px; } @media (max-width: 700px) { .mission-phases { grid-template-columns: 1fr; } } .mission-phase { padding: 12px 14px; border-radius: var(--m-r-sm); background: var(--m-surface); border: 1px solid var(--m-bordure); color: var(--m-texte-doux); transition: all 0.15s; display: flex; flex-direction: column; gap: 6px; } .mission-phase.actif { background: var(--metier-v); border-color: var(--metier-c); color: var(--metier-c); } .mission-phase-tete { display: flex; justify-content: space-between; align-items: baseline; } .mission-phase-num { font-family: var(--m-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; } .mission-phase-compteur { font-family: var(--m-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; } .mission-phase.actif .mission-phase-compteur { color: var(--metier-c); } .mission-phase-nom { font-weight: 600; font-size: 13px; line-height: 1.2; color: var(--m-texte); } .mission-phase.actif .mission-phase-nom { color: var(--metier-c); } .mission-phase-barre { height: 3px; background: var(--m-fond); border-radius: var(--m-r-pill); overflow: hidden; margin-top: 2px; } .mission-phase-barre-fill { height: 100%; background: var(--metier-c); border-radius: var(--m-r-pill); transition: width 0.4s ease; } .mission-outils-groupe { margin-bottom: 32px; } .mission-outils-groupe-tete { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--m-bordure); flex-wrap: wrap; } .mission-outils-groupe-num { font-family: var(--m-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--metier-c); background: var(--metier-v); padding: 4px 8px; border-radius: var(--m-r-sm); font-weight: 700; } .mission-outils-groupe-nom { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--m-texte); } .mission-outils-groupe-hint { margin-left: auto; font-family: var(--m-serif); font-style: italic; font-size: 13px; color: var(--m-texte-doux); } .mission-outils { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 900px) { .mission-outils { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .mission-outils { grid-template-columns: 1fr; } } .mission-outil { background: var(--m-surface); border: 1px solid var(--m-bordure); border-radius: var(--m-r-md); padding: 14px; cursor: pointer; transition: all 0.15s; display: flex; flex-direction: column; gap: 6px; position: relative; text-align: left; text-decoration: none; color: inherit; line-height: 1.3; } .mission-outil:hover { border-color: var(--metier-c); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } .mission-outil-tete { display: flex; align-items: center; gap: 8px; } .mission-outil-num { font-family: var(--m-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--m-texte-tres-doux); } .mission-outil-nom { font-size: 13px; font-weight: 600; color: var(--m-texte); line-height: 1.3; margin-top: 2px; flex: 1; } .mission-outil-etat { font-family: var(--m-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 8px 3px 7px; border-radius: var(--m-r-pill); margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; } .mission-outil-etat-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; flex-shrink: 0; } .mission-outil-etat.fait { background: rgba(127, 181, 155, 0.14); color: var(--m-vert); } .mission-outil-etat.encours { background: var(--metier-v); color: var(--metier-c); } .mission-outil-etat.afaire { background: var(--m-fond); color: var(--m-texte-tres-doux); } .mission-outil-etat.afaire .mission-outil-etat-dot { background: transparent; border: 1px solid currentColor; width: 5px; height: 5px; } .mission-outil-etat.cle { background: var(--metier-v); color: var(--metier-c); font-weight: 700; } .mission-outil-etat.cle .mission-outil-etat-dot { width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); border-radius: 1px; } .mission-outil.recommande { border-color: var(--metier-c); background: color-mix(in oklab, var(--metier-c) 8%, var(--m-surface)); } .mission-outil.cle-de-voute { background: color-mix(in oklab, var(--metier-c) 14%, var(--m-surface)); border-color: var(--metier-c); } .mission-outil.cle-de-voute .mission-outil-nom { color: var(--metier-c); } /* Reco */ .mission-reco { background: var(--m-surface); border: 1px solid var(--metier-c); border-left: 4px solid var(--metier-c); border-radius: var(--m-r-md); padding: 16px 24px; margin-top: 32px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .mission-reco-icon { font-family: var(--m-serif); font-style: italic; font-size: 30px; color: var(--metier-c); line-height: 1; } .mission-reco-corps { flex: 1; min-width: 240px; } .mission-reco-titre { font-family: var(--m-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--metier-c); margin-bottom: 4px; } .mission-reco-outil { font-weight: 700; font-size: 16px; margin-bottom: 4px; color: var(--m-texte); } .mission-reco-raison { font-family: var(--m-serif); font-style: italic; font-size: 13px; color: var(--m-texte-doux); line-height: 1.5; } /* Boutons */ .mission-btn { font-family: var(--m-sans); font-size: 13px; font-weight: 600; padding: 12px 22px; border-radius: var(--m-r-pill); border: 1px solid transparent; cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 8px; line-height: 1; text-decoration: none; white-space: nowrap; } .mission-btn-fantome { background: transparent; color: var(--m-texte-doux); border-color: var(--m-bordure-2); } .mission-btn-fantome:hover { border-color: var(--m-corail); color: var(--m-corail); } .mission-btn-primaire { background: var(--m-corail); color: var(--m-inverse); } .mission-btn-primaire:hover { background: var(--m-corail-clair); } .mission-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--m-bordure); flex-wrap: wrap; gap: 12px; } .mission-nav-hint { font-family: var(--m-mono); font-size: 10px; color: var(--m-texte-tres-doux); letter-spacing: 0.14em; text-transform: uppercase; } /* CTA Plan stratégique — étape 03 */ .mission-cta-plan { margin-top: 48px; padding: 28px 32px; background: linear-gradient(135deg, var(--m-surface) 0%, var(--m-surface-2) 100%); border: 1px solid var(--m-corail); border-radius: var(--m-r-md); display: flex; align-items: center; gap: 24px; flex-wrap: wrap; position: relative; overflow: hidden; } .mission-cta-plan::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--m-corail); } .mission-cta-plan-corps { flex: 1; min-width: 260px; } .mission-cta-plan-eyebrow { font-family: var(--m-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--m-corail); margin-bottom: 8px; } .mission-cta-plan-titre { font-weight: 700; font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; color: var(--m-texte); margin: 0 0 8px; text-wrap: balance; } .mission-cta-plan-titre em { font-family: var(--m-serif); font-style: italic; font-weight: 400; color: var(--m-corail); } .mission-cta-plan-lead { font-family: var(--m-serif); font-style: italic; font-size: 14px; line-height: 1.55; color: var(--m-texte-doux); margin: 0; max-width: 60ch; } .mission-cta-plan-btn { padding: 14px 24px; font-size: 14px; white-space: nowrap; } /* CTA batch IA */ .mission-cta-batch { margin-top: 32px; padding: 22px 26px; background: var(--m-surface, #232220); border: 1px dashed var(--m-bordure-2, #45423D); border-radius: var(--m-r-md, 10px); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .mission-cta-batch-corps { flex: 1; min-width: 260px; } .mission-cta-batch-eyebrow { font-family: var(--m-mono, ui-monospace, monospace); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--m-corail, #E0846A); margin-bottom: 6px; } .mission-cta-batch-titre { font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: -0.015em; color: var(--m-texte, #ECEAE6); margin: 0 0 6px; } .mission-cta-batch-titre em { font-family: var(--m-serif, Georgia, serif); font-style: italic; font-weight: 400; color: var(--m-corail, #E0846A); } .mission-cta-batch-lead { font-size: 13px; line-height: 1.55; color: var(--m-texte-doux, #9A958D); margin: 0; max-width: 60ch; } .mission-cta-batch-btn { padding: 12px 22px; font-size: 13px; white-space: nowrap; } /* Modale progression prefill */ .prefill-modale { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: 2000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); } .prefill-modale[hidden] { display: none !important; } .prefill-modale-corps { background: var(--m-surface, #232220); border: 1px solid var(--m-bordure-2, #45423D); border-radius: 14px; padding: 24px 26px; width: 640px; max-width: calc(100vw - 32px); max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55); } .prefill-modale-tete { display: flex; justify-content: space-between; align-items: start; margin-bottom: 16px; } .prefill-modale-titre { font-weight: 700; font-size: 17px; color: var(--m-texte, #ECEAE6); margin-bottom: 3px; } .prefill-modale-sous { font-family: var(--m-mono, monospace); font-size: 11px; letter-spacing: 0.12em; color: var(--m-texte-doux, #9A958D); text-transform: uppercase; } .prefill-modale-fermer { background: transparent; border: 1px solid var(--m-bordure-2, #45423D); color: var(--m-texte-doux, #9A958D); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 20px; line-height: 1; } .prefill-modale-fermer:hover { border-color: var(--m-corail, #E0846A); color: var(--m-corail, #E0846A); } .prefill-modale-barre { height: 6px; background: var(--m-fond, #1C1B19); border-radius: 999px; overflow: hidden; margin-bottom: 8px; } .prefill-modale-barre-fill { height: 100%; background: linear-gradient(90deg, var(--m-corail-braise, #C46B54), var(--m-corail, #E0846A)); transition: width 0.4s ease; } .prefill-modale-compteur { font-family: var(--m-mono, monospace); font-size: 11px; color: var(--m-corail, #E0846A); letter-spacing: 0.1em; text-align: right; margin-bottom: 14px; } .prefill-modale-liste { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; max-height: 380px; padding: 4px 2px; } .prefill-item { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; background: var(--m-fond, #1C1B19); border: 1px solid var(--m-bordure, #34322E); border-radius: 6px; font-size: 12px; animation: prefill-in 0.25s ease-out; } @keyframes prefill-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } } .prefill-item-num { font-family: var(--m-mono, monospace); font-size: 10px; color: var(--m-texte-tres-doux, #6E6A63); letter-spacing: 0.06em; } .prefill-item-titre { color: var(--m-texte, #ECEAE6); font-weight: 500; } .prefill-item-detail { font-family: var(--m-mono, monospace); font-size: 10px; letter-spacing: 0.04em; } .prefill-item-ok { border-left: 3px solid var(--m-vert, #7FB59B); } .prefill-item-ok .prefill-item-detail { color: var(--m-vert, #7FB59B); } .prefill-item-skip { border-left: 3px solid var(--m-texte-tres-doux, #6E6A63); opacity: 0.6; } .prefill-item-error { border-left: 3px solid var(--danger, #C05445); } .prefill-item-error .prefill-item-detail { color: var(--danger, #C05445); } /* ═════════════════════════════════════════════════════════════ Flèches de navigation précédent/suivant entre modules ═════════════════════════════════════════════════════════════ */ /* Utility : ne jamais casser à la ligne (utilisé pour "Ordre-x") */ .nowrap { white-space: nowrap; display: inline-block; } /* ═════════════════════════════════════════════════════════════ Anti-tronquage global — laisser les cellules s'agrandir ═════════════════════════════════════════════════════════════ */ .tableau tbody td { white-space: normal !important; overflow: visible !important; text-overflow: unset !important; -webkit-line-clamp: unset !important; max-height: none !important; vertical-align: top; word-wrap: break-word; overflow-wrap: anywhere; hyphens: auto; } .tableau tbody td input.editable, .tableau tbody td .valeur { white-space: normal !important; overflow: visible !important; text-overflow: unset !important; height: auto !important; min-height: 32px; word-wrap: break-word; } .tableau tbody td textarea.editable { white-space: pre-wrap !important; overflow-y: auto !important; resize: vertical !important; min-height: 60px; max-height: none !important; field-sizing: content; /* Chrome/Edge — auto-grow natif */ word-wrap: break-word; hyphens: auto; } /* Auto-grow global — s'applique à toutes les textareas éditables et .auto-grow, pas seulement celles dans un tableau (cartes de segmentation, formulaires…) */ textarea.editable, textarea.auto-grow { field-sizing: content; min-height: 34px; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; overflow-y: hidden; resize: none; line-height: 1.4; } textarea.editable[rows="1"], textarea.auto-grow[rows="1"] { min-height: 34px; } /* Cartes de segmentation : la valeur peut se déployer */ .card-seg-champ .valeur { white-space: normal !important; overflow: visible !important; max-height: none !important; min-height: 34px; height: auto !important; word-wrap: break-word; line-height: 1.45; } /* Cartes projet/entité — laisser respirer */ .entite-meta, .a-tuile-bas, .m-tuile-baseline, .mission-entite-meta, .a-activite-item b { white-space: normal !important; overflow: visible !important; text-overflow: unset !important; -webkit-line-clamp: unset !important; max-height: none !important; } /* ═════════════════════════════════════════════════════════════ Export graphique universel — menu ⇓ flottant sur canvas/SVG ═════════════════════════════════════════════════════════════ */ .export-graph-menu { position: absolute; top: 8px; right: 8px; z-index: 5; } .export-graph-btn { background: rgba(28, 27, 25, 0.75); border: 1px solid rgba(224, 132, 106, 0.35); color: #ECEAE6; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s; backdrop-filter: blur(4px); } .export-graph-btn:hover { background: var(--accent, #E0846A); color: #1F1611; border-color: var(--accent, #E0846A); } .export-graph-liste { position: absolute; top: 34px; right: 0; min-width: 220px; background: var(--fond-panel, #29201A); border: 1px solid var(--trait-fort, #4A3C33); border-radius: 8px; padding: 4px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; z-index: 20; } .export-graph-liste[hidden] { display: none !important; } .export-graph-liste button { background: transparent; border: 0; color: var(--texte, #ECEAE6); padding: 8px 12px; text-align: left; font-size: 12px; cursor: pointer; border-radius: 4px; font-family: inherit; transition: background 0.1s; } .export-graph-liste button:hover { background: var(--corail-voile, rgba(224, 132, 106, 0.14)); color: var(--accent, #E0846A); } .export-graph-liste button[hidden] { display: none; } @media print { .export-graph-menu { display: none !important; } } /* Bouton masquer/restaurer (soft-delete) — à côté du bouton corbeille */ .btn-masquer-ligne { background: transparent; border: 1px solid var(--trait, #34322E); color: var(--texte-doux, #9A958D); padding: 4px 8px; border-radius: var(--radius-sm, 6px); font-size: 12px; line-height: 1; cursor: pointer; opacity: 0.55; transition: all 0.15s; margin-right: 4px; } .tableau tbody tr:hover .btn-masquer-ligne { opacity: 1; } .btn-masquer-ligne:hover { border-color: var(--accent, #E0846A); color: var(--accent, #E0846A); opacity: 1; } .tableau tbody tr.ligne-masquee { opacity: 0.45; background: repeating-linear-gradient( 45deg, transparent 0 8px, rgba(154, 149, 141, 0.06) 8px 16px ); } .tableau tbody tr.ligne-masquee td { font-style: italic; } .badge-masque { font-family: var(--mono, ui-monospace, monospace); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-tres-doux, #6E6A63); background: transparent; border: 1px dashed var(--trait-fort, #4A3C33); padding: 2px 6px; border-radius: 999px; margin-left: 6px; } .toggle-masques { font-family: var(--mono, ui-monospace, monospace); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 12px; background: transparent; border: 1px solid var(--trait, #34322E); color: var(--texte-doux, #9A958D); border-radius: var(--radius-sm, 6px); cursor: pointer; transition: all 0.15s; } .toggle-masques:hover, .toggle-masques.actif { border-color: var(--accent, #E0846A); color: var(--accent, #E0846A); } /* ═════════════════════════════════════════════════════════════ Chat IA — widget flottant bas-droite ═════════════════════════════════════════════════════════════ */ .chat-bulle { position: fixed; bottom: 24px; right: 24px; z-index: 1000; } .chat-toggle { width: 52px; height: 52px; border-radius: 50%; background: var(--accent, #E0846A); color: var(--texte-inverse, #1F1611); border: 0; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; transition: transform 0.15s; } .chat-toggle:hover { transform: scale(1.08); } .chat-panneau { position: absolute; bottom: 68px; right: 0; width: 380px; max-width: calc(100vw - 32px); height: 540px; max-height: calc(100vh - 120px); background: var(--fond-carte, #232220); border: 1px solid var(--trait-fort, #4A3C33); border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; overflow: hidden; } .chat-panneau[hidden] { display: none !important; } .chat-tete { padding: 14px 16px; background: var(--fond-panel, #29201A); border-bottom: 1px solid var(--trait, #34322E); display: flex; justify-content: space-between; align-items: center; } .chat-titre { font-weight: 700; font-size: 14px; color: var(--texte, #ECEAE6); } .chat-sous-titre { font-size: 11px; color: var(--texte-doux, #9A958D); margin-top: 2px; } .chat-actions { display: flex; gap: 8px; } .chat-btn-vider, .chat-btn-fermer { background: transparent; border: 1px solid var(--trait-fort, #4A3C33); color: var(--texte-doux, #9A958D); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center; transition: all 0.15s; padding: 0; } .chat-btn-vider { font-size: 12px; } .chat-btn-fermer { font-size: 18px; font-weight: 400; } .chat-btn-vider:hover { border-color: var(--danger, #C05445); color: var(--danger, #C05445); } .chat-btn-fermer:hover { border-color: var(--accent, #E0846A); color: var(--accent, #E0846A); } .chat-messages { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .chat-empty { text-align: center; color: var(--texte-doux, #9A958D); font-style: italic; font-size: 13px; padding: 24px 16px; line-height: 1.5; } .chat-msg { padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; max-width: 85%; word-wrap: break-word; white-space: pre-wrap; } .chat-msg-user { background: var(--accent, #E0846A); color: var(--texte-inverse, #1F1611); align-self: flex-end; border-bottom-right-radius: 4px; } .chat-msg-assistant { background: var(--fond-panel, #29201A); color: var(--texte, #ECEAE6); border: 1px solid var(--trait, #34322E); align-self: flex-start; border-bottom-left-radius: 4px; } .chat-msg-attente { font-size: 20px; letter-spacing: 4px; color: var(--texte-doux, #9A958D); animation: chat-pulse 1.4s ease-in-out infinite; } @keyframes chat-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } .chat-msg-anim { animation: chat-in 0.25s ease-out; } @keyframes chat-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .chat-form { padding: 10px 12px; background: var(--fond-panel, #29201A); border-top: 1px solid var(--trait, #34322E); display: flex; align-items: end; gap: 8px; } .chat-input { flex: 1; background: var(--fond, #1C1B19); color: var(--texte, #ECEAE6); border: 1px solid var(--trait, #34322E); border-radius: 8px; padding: 10px 12px; font-size: 13px; resize: none; font-family: inherit; outline: none; line-height: 1.4; max-height: 120px; } .chat-input:focus { border-color: var(--accent, #E0846A); box-shadow: 0 0 0 3px rgba(224, 132, 106, 0.15); } .chat-input::placeholder { color: var(--texte-tres-doux, #6E6A63); } .chat-envoyer { background: var(--accent, #E0846A); color: var(--texte-inverse, #1F1611); border: 0; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s; } .chat-envoyer:hover { background: var(--accent-clair, #EC9C86); } @media (max-width: 600px) { .chat-bulle { bottom: 16px; right: 16px; } .chat-panneau { width: calc(100vw - 32px); height: calc(100vh - 100px); } } /* Pastilles statut universelles (remplacent 🟢🟠🔴⬜) */ .pastille-vert, .pastille-orange, .pastille-rouge, .pastille-vide { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-right: 4px; flex-shrink: 0; } .pastille-vert { background: #7FB59B; } .pastille-orange { background: #D9A96A; } .pastille-rouge { background: #C05445; } .pastille-vide { background: transparent; border: 1px solid var(--trait-fort, #4A3C33); width: 7px; height: 7px; } /* Bouton corbeille — contenu SVG-like via ::before pour rester line-art */ .btn-supprimer-ligne:empty::before { content: "×"; font-size: 15px; line-height: 1; font-weight: 400; display: inline-block; transform: translateY(-1px); } /* Bouton retour au parcours mission */ .btn-parcours { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; height: 34px; border-radius: var(--r-pill, 999px); background: var(--corail-voile, rgba(224, 132, 106, 0.14)); color: var(--accent, #E0846A); border: 1px solid var(--accent, #E0846A); text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; transition: all 0.15s; white-space: nowrap; } .btn-parcours:hover { background: var(--accent, #E0846A); color: var(--texte-inverse, #1F1611); } .app-sidebar .logo { display: block; text-decoration: none; color: inherit; transition: opacity 0.15s; } .app-sidebar .logo:hover { opacity: 0.8; } .nav-modules-fleches { display: flex; align-items: center; gap: 6px; } .nav-fleche { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; height: 34px; border-radius: var(--radius-sm, 6px); background: transparent; border: 1px solid var(--trait, #34322E); color: var(--texte-doux, #9A958D); text-decoration: none; font-size: 12px; line-height: 1; transition: all 0.15s; white-space: nowrap; max-width: 220px; } .nav-fleche:hover { border-color: var(--accent, #E0846A); color: var(--accent, #E0846A); background: rgba(224, 132, 106, 0.08); } .nav-fleche .nav-fleche-lbl { font-weight: 500; overflow: hidden; text-overflow: ellipsis; max-width: 140px; } .nav-fleche.desactive { opacity: 0.3; cursor: not-allowed; padding: 6px 10px; } @media (max-width: 900px) { .nav-fleche-lbl { display: none; } .nav-fleche { padding: 6px 10px; } } /* ═════════════════════════════════════════════════════════════ Icônes SVG line-art — usage global ═════════════════════════════════════════════════════════════ */ .ico { display: inline-flex; vertical-align: middle; flex-shrink: 0; } button .ico, a .ico { margin-right: 4px; } .qual-tuile-icon { display: inline-flex; align-items: center; } .qual-tuile-icon .ico { width: 22px; height: 22px; } .qual-section-titre { display: inline-flex; align-items: center; gap: 6px; } .qual-section-titre .ico { width: 16px; height: 16px; } .qual-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; margin-right: 4px; } .innov-tuile-icon .ico, .fin-tuile .ico, .bp-som-icon .ico { width: 20px; height: 20px; } .numero-ico { display: inline-flex; align-items: center; justify-content: center; } .numero-ico .ico { width: 18px; height: 18px; } /* Pastilles statut BP */ .bp-som-pastille { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .bp-som-pastille-ok { background: #7FB59B; } .bp-som-pastille-attention { background: #D9A96A; } .bp-som-pastille-ko { background: #C05445; } .bp-som-pastille-vide { background: transparent; border: 1px solid var(--trait-fort, #4A3C33); }