/* ========================================================================= Neyss — Diagnostic & Analyse Post-Incident styles.css : thème sombre "outil de sécurité", responsive + styles print. ========================================================================= */ :root { --bg: #0b1020; --bg-soft: #121a30; --bg-card: #18223c; --border: #263149; --border-soft:#1e2740; --text: #e8edf6; --text-dim: #9aa6bd; --accent: #2f6bed; --accent-dark:#1f56cf; --violet: #8b34f0; --magenta: #e03ad6; --grad: linear-gradient(100deg,#2f6bed,#8b34f0 52%,#e03ad6); --ok: #3fb950; --warn: #d29922; --high: #db6d28; --crit: #f85149; --radius: 12px; --radius-sm: 8px; --shadow: 0 8px 30px rgba(0,0,0,.35); --font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; --font-display: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; --app-header-h: 72px; /* hauteur réelle du header fixe (logo 42 + padding 2×14 + bordure 1 = 71, +1 pour passer sous le liseré néon). Décale le contenu et la barre latérale. */ } * { box-sizing: border-box; } /* L'attribut HTML [hidden] doit primer sur les display:flex/grid ci-dessous */ [hidden] { display: none !important; } /* ===== Accessibilité ===== */ .skip-link { position: absolute; left: 8px; top: -60px; z-index: 200; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 600; text-decoration: none; transition: top .15s; } .skip-link:focus { top: 8px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } #main:focus { outline: none; } /* ============ THÈME CLAIR ============ */ :root[data-theme="light"] { --bg: #f6f8fc; --bg-soft: #ffffff; --bg-card: #ffffff; --border: #e2e8f2; --border-soft:#eef2f8; --text: #12203a; --text-dim: #4a5a76; --accent: #2f6bed; --accent-dark:#1f56cf; --violet: #8b34f0; --shadow: 0 8px 30px rgba(47,107,237,.12); /* Couleurs sémantiques assombries pour un contraste AA (≥4.5:1) sur fond clair */ --ok: #1a7f37; --warn: #9a6a00; --high: #b45309; --crit: #c0362c; } :root[data-theme="light"] .app-header { background: linear-gradient(180deg, #ffffff, #eef2f7); } :root[data-theme="light"] .brand-mark { filter: none; } :root[data-theme="light"] input, :root[data-theme="light"] textarea, :root[data-theme="light"] select { background: #fff; } :root[data-theme="light"] .ioc-pub { color: #b42318; } :root[data-theme="light"] .auth-ok { color: #1a7f37; } :root[data-theme="light"] .auth-bad { color: #b42318; } html, body { margin: 0; padding: 0; color: var(--text); font-family: var(--font); line-height: 1.55; -webkit-font-smoothing: antialiased; } /* Le fond de page est porté par (le « canvas »), pas par , afin qu'un décor fixe en z-index négatif puisse s'afficher derrière le contenu tout en restant au-dessus du fond uni. */ html { background: var(--bg); } body { background: transparent; } /* Titres : police d'affichage (cohérence avec la vitrine) */ h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.02em; } /* ============ EN-TÊTE ============ */ .app-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 26px; background: linear-gradient(180deg, #111725, var(--bg-soft)); border-bottom: 1px solid var(--border); position: fixed; /* toujours visible en haut, quel que soit le défilement */ top: 0; left: 0; right: 0; z-index: 10; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; } .brand-logo { height: 40px; width: auto; display: block; } .brand-logo-light { display: none; } :root[data-theme="light"] .brand-logo-dark { display: none; } :root[data-theme="light"] .brand-logo-light { display: block; } .brand-mark { display: inline-block; height: 1.25em; width: auto; vertical-align: -0.32em; } .brand-text { display: flex; flex-direction: column; line-height: 1.2; } .brand-text strong { font-size: 18px; letter-spacing: .12em; } .brand-text small { color: var(--text-dim); font-size: 12px; } .badge-proto { font-size: 11px; color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent); padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .05em; } /* ===== Numéro de version — pastille discrète, fixe en bas à gauche, lisible sur le fond ===== */ .foot-ver { text-align: center; margin: 10px auto 2px; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--text-dim); user-select: none; } /* ===== Sélecteur de langue à DRAPEAUX (header) ===== */ .lang-picker { position: relative; } .lang-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; font: inherit; font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; } .lang-btn:hover { border-color: var(--accent); } .lang-flag { display: inline-block; width: 20px; height: 14px; flex: none; line-height: 0; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.12); } .lang-flag svg { width: 100%; height: 100%; display: block; } .lang-caret { font-size: 9px; color: var(--text-dim); } .lang-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 320; min-width: 176px; margin: 0; padding: 5px; list-style: none; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); } .lang-opt { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text); } .lang-opt:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } .lang-opt.is-cur { background: color-mix(in srgb, var(--accent) 16%, transparent); font-weight: 700; } .lang-name { white-space: nowrap; } :root[dir="rtl"] .lang-menu { right: auto; left: 0; } /* ===== Sélecteur de PAYS (normes applicables) — distinct de la langue ===== */ .ctry-picker { position: relative; } .ctry-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; font: inherit; font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; max-width: 150px; } .ctry-btn:hover { border-color: var(--accent); } .ctry-flag { display: inline-block; width: 20px; height: 14px; flex: none; line-height: 0; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.12); } .ctry-flag svg { width: 100%; height: 100%; display: block; } .ctry-btn .ctry-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ctry-caret { font-size: 9px; color: var(--text-dim); flex: none; } .ctry-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 320; min-width: 210px; max-height: min(60vh, 420px); overflow-y: auto; margin: 0; padding: 5px; list-style: none; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); } .ctry-opt { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text); } .ctry-opt:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } .ctry-opt.is-cur { background: color-mix(in srgb, var(--accent) 16%, transparent); font-weight: 700; } .ctry-opt .ctry-name { white-space: nowrap; } :root[dir="rtl"] .ctry-menu { right: auto; left: 0; } @media (max-width: 560px) { .ctry-btn { max-width: 96px; } .ctry-btn .ctry-name { display: none; } } /* En-têtes multilingues en tête de menu (langue / pays) : non cliquables, discrets, s'enroulent — indiquent, dans toutes les langues, ce que chaque sélecteur fait (langue) et son but (normes pays). */ .lang-menu-head, .ctry-menu-head { display: flex; align-items: flex-start; gap: 7px; padding: 3px 9px 8px; margin: 1px 2px 5px; border-bottom: 1px solid var(--border-soft); font-size: 10.5px; line-height: 1.55; color: var(--text-dim); cursor: default; user-select: none; list-style: none; } .lang-menu-head svg, .ctry-menu-head svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--accent); } .ctry-menu-head { max-width: 258px; } :root[dir="rtl"] .lang-menu-head, :root[dir="rtl"] .ctry-menu-head { text-align: right; } /* ===== RTL (arabe) — miroir de la mise en page ===== i18n.js pose pour l'arabe. La direction RTL retourne nativement le texte et les conteneurs flex (la barre latérale passe à droite, le header s'inverse). Ci-dessous : les quelques ajustements de bordures/décor à forcer. (Peaufinage RTL complet des vues internes = passe dédiée.) */ :root[dir="rtl"] .app-main { text-align: right; } :root[dir="rtl"] .sidebar { border-right: 0; border-left: 1px solid var(--border); } /* Décor de fond : en RTL la marge libre passe à GAUCHE (la barre latérale est à droite) → le panneau décoratif bascule au bord gauche et son image est mise en miroir. */ :root[dir="rtl"] .app-fond { right: auto; left: 0; transform: scaleX(-1); } /* Indicateur d'onglet actif (barre 3px) : du bord gauche au bord droit de l'onglet. */ :root[dir="rtl"] .nav-tab.active::before { margin: -9px -12px -9px 0; border-radius: 0 3px 3px 0; } /* Listes de priorités numérotées : la pastille passe à droite, la marge suit. */ :root[dir="rtl"] .rpt-prio li { padding-left: 0; padding-right: 40px; } :root[dir="rtl"] .rpt-prio li::before { left: auto; right: 0; } :root[dir="rtl"] .dg-prio li { padding-left: 0; padding-right: 38px; } :root[dir="rtl"] .dg-prio li::before { left: auto; right: 0; } /* Halos décoratifs directionnels : mis en symétrie (X% → 100-X%). */ :root[dir="rtl"] .gate-overlay { background: radial-gradient(760px 520px at 12% 66%, color-mix(in srgb, var(--violet) 6%, transparent) 0%, transparent 72%), linear-gradient(180deg, #eaeef6 0%, #eff2f9 58%, #f1f4f9 100%); } :root[dir="rtl"][data-theme="light"] { background: radial-gradient(1050px 500px at 20% -250px, color-mix(in srgb, #8b34f0 9%, transparent) 0, transparent 58%), radial-gradient(1200px 560px at 84% -300px, #dbeafe 0, rgba(219,234,254,0) 56%), #f1f4f9; background-attachment: fixed; } /* ============ STEPPER ============ */ .stepper { display: flex; gap: 6px; padding: 16px 26px; overflow-x: auto; border-bottom: 1px solid var(--border-soft); background: var(--bg-soft); } .step { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 13px; color: var(--text-dim); white-space: nowrap; border: 1px solid transparent; } .step .num { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border); font-size: 12px; flex: none; } .step.active { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } .step.active .num { background: var(--accent); border-color: var(--accent); color: #fff; } .step.done { color: var(--ok); } .step.done .num { background: rgba(63,185,80,.15); border-color: var(--ok); color: var(--ok); } /* ============ MAIN ============ */ .app-main { width: 100%; max-width: 860px; margin: 0 auto; padding: 32px 22px 60px; } .wizard-step h2 { font-size: 22px; margin: 0 0 4px; } .wizard-step .step-hint { color: var(--text-dim); margin: 0 0 22px; font-size: 14px; } /* Champs */ .field { margin-bottom: 20px; } .field > label { display: block; font-weight: 600; margin-bottom: 7px; font-size: 14px; } .field .req { color: var(--crit); } input[type=text], input[type=datetime-local], textarea, select { width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 11px 13px; font-size: 15px; font-family: inherit; transition: border-color .15s, box-shadow .15s; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } textarea { min-height: 90px; resize: vertical; } /* Cartes de choix (type d'incident) */ .choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; } .choice-card { text-align: left; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 16px; cursor: pointer; transition: transform .12s, border-color .12s, background .12s; color: var(--text); } .choice-card:hover { transform: translateY(-2px); border-color: var(--accent-dark); } .choice-card.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: 0 0 0 1px var(--accent) inset; } .choice-card .ic { font-size: 22px; } .choice-card .t { font-weight: 600; margin: 6px 0 3px; } .choice-card .d { font-size: 12.5px; color: var(--text-dim); line-height: 1.4; } /* Options radio/checkbox stylées */ .opt-list { display: flex; flex-direction: column; gap: 9px; } .opt { display: flex; align-items: flex-start; gap: 11px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; cursor: pointer; font-size: 14.5px; transition: border-color .12s, background .12s; } .opt:hover { border-color: var(--accent-dark); } .opt input { margin-top: 3px; accent-color: var(--accent); flex: none; } .opt.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } .opt .opt-label { flex: 1; } /* ============ BOUTONS ============ */ .wizard-nav, .report-actions { display: flex; align-items: center; gap: 12px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border-soft); } .spacer { flex: 1; } .btn { font-family: inherit; font-size: 14.5px; font-weight: 600; padding: 11px 20px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: background .13s, border-color .13s, opacity .13s; } .btn-primary { background: linear-gradient(135deg, var(--accent), var(--violet)); color: #fff; border: none; } .btn-primary:hover { filter: brightness(1.06); } .btn-ghost { background: transparent; border-color: var(--border); color: var(--text); } .btn-ghost:hover { border-color: var(--text-dim); } .btn:disabled { opacity: .45; cursor: not-allowed; } .field-error { color: var(--crit); font-size: 13px; margin-top: 6px; } .shake { animation: shake .3s; } @keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } /* ============ RAPPORT ============ */ .report { animation: fade .25s ease; } @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .report-head { border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; background: linear-gradient(180deg, var(--bg-card), var(--bg-soft)); margin-bottom: 22px; } .report-head .ref { color: var(--text-dim); font-size: 13px; font-family: ui-monospace, monospace; } .report-head h1 { margin: 6px 0 14px; font-size: 24px; } .report-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 10px 24px; font-size: 14px; } .report-meta div span { color: var(--text-dim); display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } .severity-banner { display: flex; align-items: center; gap: 16px; border-radius: var(--radius); padding: 18px 22px; margin-bottom: 22px; border: 1px solid; } .severity-banner .sev-badge { font-size: 15px; font-weight: 700; padding: 8px 16px; border-radius: 8px; color: #fff; white-space: nowrap; } .severity-banner .sev-text strong { display: block; font-size: 16px; } .severity-banner .sev-text small { color: var(--text-dim); } .report-block { border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 18px; background: var(--bg-soft); } .report-block > h3 { margin: 0 0 14px; font-size: 16px; display: flex; align-items: center; gap: 9px; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); } .report-block > h3 .rb-ic { color: var(--accent); } .report-block ul { margin: 0; padding-left: 20px; } .report-block li { margin-bottom: 7px; } .report-block p { margin: 0 0 10px; } .kv { display: grid; grid-template-columns: 200px 1fr; gap: 8px 16px; font-size: 14.5px; } .kv dt { color: var(--text-dim); } .kv dd { margin: 0; } .mitre-item { padding: 8px 0; border-bottom: 1px solid var(--border-soft); } .mitre-item:last-child { border-bottom: none; } .mitre-item .tac { color: var(--accent); font-weight: 600; font-size: 13px; } .mitre-item .tech { font-family: ui-monospace, monospace; font-size: 13.5px; } .alert-rgpd { border: 1px solid var(--crit); background: rgba(248,81,73,.08); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px; } .alert-rgpd h3 { color: var(--crit); margin: 0 0 8px; font-size: 16px; } .alert-rgpd .deadline { font-weight: 700; } .phase-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); } .phase-row:last-child { border-bottom: none; } .phase-row .p-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); display: grid; place-items: center; font-size: 13px; font-weight: 700; } .phase-row .p-name { font-weight: 600; } .phase-row .p-desc { color: var(--text-dim); font-size: 13.5px; } .tag-done { color: var(--ok); font-size: 12px; } .tag-todo { color: var(--warn); font-size: 12px; } /* ============ FOOTER ============ */ .app-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 16px 26px; border-top: 1px solid var(--border-soft); color: var(--text-dim); font-size: 12.5px; } /* ============ RESPONSIVE ============ */ @media (max-width: 640px) { .app-header { padding: 12px 16px; } .app-main { padding: 22px 14px 50px; } .kv { grid-template-columns: 1fr; gap: 2px; } .kv dt { margin-top: 8px; } .stepper { padding: 12px 14px; } } /* ========================================================================= PHASE 1 — Navigation multi-outils + analyseurs ========================================================================= */ /* Navigation principale */ /* ===== Coquille : barre latérale + corps ===== */ .app-shell { display: flex; align-items: flex-start; padding-top: var(--app-header-h); } /* compense le header fixe */ .sidebar { flex: none; width: 248px; background: var(--bg-soft); border-right: 1px solid var(--border); padding: 18px 12px; position: sticky; top: var(--app-header-h); height: calc(100vh - var(--app-header-h)); overflow-y: auto; } .app-body { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: calc(100vh - var(--app-header-h)); } .app-body .app-main { flex: 1; position: relative; z-index: 1; } /* ============ DÉCOR DE FOND (côté droit) ============ Bandeau décoratif fixé au bord droit de la fenêtre, derrière le contenu. Non-interactif (pointer-events:none) et masqué aux lecteurs d'écran. Le contenu (.app-main, cartes opaques) passe au-dessus ; le décor n'apparaît que dans la marge droite et les espaces vides. L'opacité + un dégradé de masque vers la gauche garantissent la lisibilité et l'harmonie visuelle. */ .app-fond { position: fixed; top: 0; right: 0; bottom: 0; width: clamp(300px, 40vw, 560px); z-index: -1; /* derrière le contenu, au-dessus du fond uni () */ pointer-events: none; user-select: none; overflow: hidden; opacity: .5; /* dosage pour rester discret et harmonieux */ -webkit-mask-image: linear-gradient(to left, #000 58%, transparent 100%); mask-image: linear-gradient(to left, #000 58%, transparent 100%); } .app-fond img { width: 100%; height: 100%; object-fit: cover; object-position: right bottom; display: block; } /* Tablette : décor un peu plus léger, moins large. */ @media (max-width: 900px) { .app-fond { width: clamp(220px, 46vw, 380px); opacity: .38; } } /* Mobile : coin décoratif discret en bas à droite (le contenu occupe la largeur). */ @media (max-width: 640px) { .app-fond { width: min(62vw, 300px); height: 74vh; top: auto; bottom: 0; opacity: .3; } } /* Impression : pas de décor. */ @media print { .app-fond { display: none !important; } } /* Respect des préférences de contraste renforcé. */ @media (prefers-contrast: more) { .app-fond { display: none; } } /* ============ MODULES REPLIABLES (réduire / déplier) ============ */ .nm-h { cursor: pointer; } .nm-h-flex { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* chevron : poussé à droite de l'en-tête */ .nm-toggle { margin-left: auto; flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; padding: 0; background: transparent; border: 1px solid transparent; color: var(--text-dim); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .nm-h:hover .nm-toggle { color: var(--text); } .nm-toggle:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 22%, transparent); } .nm-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* le triangle (bordures) tourne selon l'état */ .nm-chev { width: 9px; height: 9px; display: block; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); /* pointe en bas = ouvert */ transition: transform .25s ease; } .nm-mod.nm-closed .nm-chev { transform: translateY(2px) rotate(-45deg); } /* pointe à droite = fermé */ /* corps repliable : astuce grid-rows 1fr → 0fr (aucune mesure de hauteur) */ .nm-fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .28s ease; } .nm-mod.nm-closed .nm-fold { grid-template-rows: 0fr; } .nm-fold-in { overflow: hidden; min-height: 0; } .nm-mod.nm-open .nm-fold-in { overflow: visible; } /* pleinement ouvert : ombres/focus non coupés */ .nm-mod.nm-noanim .nm-fold, .nm-mod.nm-noanim .nm-chev { transition: none; } /* bouton « Tout replier / déplier » dans le titre de vue (même style que .view-help) */ .nm-allbtn { vertical-align: middle; margin-left: 10px; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-dim); background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px 4px 10px; cursor: pointer; line-height: 1; transition: color .15s ease, border-color .15s ease, background .15s ease; } .nm-allbtn:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, transparent); } .nm-allbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .nm-allbtn .nm-chev-sm { width: 7px; height: 7px; border-width: 1.6px; } .nm-allbtn.nm-all-collapsed .nm-chev-sm { transform: translateY(2px) rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .nm-fold, .nm-chev { transition: none; } } @media print { .nm-fold { grid-template-rows: 1fr !important; } .nm-toggle, .nm-allbtn { display: none !important; } } .nav-group { margin-bottom: 18px; } .nav-group-t { display: block; font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); padding: 0 12px 7px; } .nav-tab { display: flex; align-items: center; gap: 9px; width: 100%; background: transparent; border: 1px solid transparent; border-radius: 9px; color: var(--text-dim); font-family: inherit; font-size: 14px; font-weight: 600; padding: 9px 12px; margin-bottom: 2px; cursor: pointer; text-align: left; transition: background .12s, color .12s, border-color .12s; } .nav-tab:hover { color: var(--text); background: var(--bg-card); } .nav-tab.active { color: var(--text); background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .nav-tab.active::before { content: ""; width: 3px; align-self: stretch; margin: -9px 0 -9px -12px; border-radius: 3px 0 0 3px; background: linear-gradient(180deg, var(--accent), var(--violet)); } /* ===== Hamburger + tiroir mobile ===== */ .nav-toggle { display: none; flex-direction: column; gap: 4px; background: transparent; border: 0; cursor: pointer; padding: 8px; margin-right: 4px; } .nav-toggle span { width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s, opacity .2s; } .nav-backdrop { display: none; } @media (max-width: 860px) { .nav-toggle { display: flex; } .app-shell { display: block; } .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 270px; z-index: 60; transform: translateX(-100%); transition: transform .24s cubic-bezier(.2,.7,.2,1); padding-top: 20px; box-shadow: var(--shadow); } body.nav-open .sidebar { transform: none; } .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .24s; } body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; } body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* En-tête compacté */ .brand-text small { display: none; } .badge-proto { display: none; } .mode-switch .ms-label, .mode-switch .ms-change { display: none; } .app-header { padding: 12px 14px; } .app-body .app-main { padding: 22px 16px 48px; } } /* Transition douce entre les vues */ .view:not([hidden]) { animation: viewfade .22s ease; } @keyframes viewfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .view:not([hidden]) { animation: none; } } .view-title { font-size: 22px; margin: 4px 0 6px; } .view-help { vertical-align: middle; margin-left: 12px; font-size: 12.5px; font-weight: 600; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-dim); border-radius: 999px; padding: 4px 12px; cursor: pointer; transition: .12s; } .view-help:hover { border-color: var(--accent); color: var(--accent); } .onboard-banner { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--bg-soft)), color-mix(in srgb, var(--violet) 12%, var(--bg-soft))); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: var(--radius); padding: 14px 16px; } .onboard-banner .ob-ic { width: 46px; height: 46px; object-fit: contain; flex: none; } .onboard-banner .ob-txt { flex: 1; font-size: 14px; line-height: 1.5; } .onboard-banner .ob-gi { width: 1.05em; height: 1.05em; vertical-align: -.18em; margin-right: .12em; } .onboard-banner .ob-gi-ai { color: var(--violet); } .onboard-banner .ob-x { flex: none; background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 8px 16px; font-weight: 600; cursor: pointer; } .onboard-banner .ob-x:hover { background: var(--accent-dark); } @media (max-width: 640px) { .onboard-banner { flex-wrap: wrap; } } .view-hint { color: var(--text-dim); font-size: 14px; margin: 0 0 20px; max-width: 720px; } .view-hint code { background: var(--bg-card); padding: 1px 5px; border-radius: 4px; font-size: 13px; } /* Barre d'outils */ .tool-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; } .inline-check { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text-dim); cursor: pointer; } .inline-check input { accent-color: var(--accent); } /* -------- Analyse IOC -------- */ .ioc-summary { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .pill { background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--text); font-size: 12.5px; padding: 4px 10px; border-radius: 999px; } .pill-muted { background: var(--bg-card); border-color: var(--border); color: var(--text-dim); } .ioc-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 14px; } .ioc-cat { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; } .ioc-cat h4 { margin: 0 0 10px; font-size: 14.5px; display: flex; align-items: center; gap: 8px; } .ioc-cat h4 .cnt, .cnt { margin-left: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; font-size: 12px; padding: 1px 9px; color: var(--text-dim); } .ioc-list { list-style: none; margin: 0; padding: 0; } .ioc-list li { padding: 5px 0; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ioc-list li:last-child { border-bottom: none; } .ioc-list code { font-size: 13px; word-break: break-all; } .ioc-tag { font-size: 11px; padding: 1px 7px; border-radius: 999px; } .ioc-pub { background: rgba(248,81,73,.15); color: #ff9b95; border: 1px solid rgba(248,81,73,.4); } .ioc-priv { background: rgba(139,148,158,.15); color: var(--text-dim); border: 1px solid var(--border); } /* -------- Analyse e-mail -------- */ .verdict { display: flex; align-items: center; gap: 12px; border-radius: var(--radius); padding: 16px 20px; margin-bottom: 18px; border: 1px solid; font-size: 16px; font-weight: 600; } .verdict-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; } .verdict-ok { border-color: var(--ok); background: rgba(63,185,80,.08); } .verdict-ok .verdict-dot { background: var(--ok); } .verdict-warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); } .verdict-warn .verdict-dot { background: var(--warn); } .verdict-bad { border-color: var(--crit); background: rgba(248,81,73,.08); } .verdict-bad .verdict-dot { background: var(--crit); } .mail-block { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; } .mail-block h4 { margin: 0 0 12px; font-size: 15px; display: flex; align-items: center; gap: 8px; } .mail-empty { color: var(--text-dim); font-style: italic; } .auth-row { display: flex; flex-wrap: wrap; gap: 8px; } .auth-badge { font-size: 13px; padding: 5px 12px; border-radius: 8px; font-weight: 600; border: 1px solid; } .auth-ok { background: rgba(63,185,80,.12); color: #7ee787; border-color: rgba(63,185,80,.4); } .auth-warn { background: color-mix(in srgb, var(--warn) 12%, transparent); color: #e3b341; border-color: color-mix(in srgb, var(--warn) 40%, transparent); } .auth-bad { background: rgba(248,81,73,.12); color: #ff9b95; border-color: rgba(248,81,73,.4); } .flag { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; border-radius: var(--radius-sm); margin-bottom: 9px; border-left: 3px solid; } .flag:last-child { margin-bottom: 0; } .flag span { font-size: 13.5px; color: var(--text-dim); } .flag-bad { background: rgba(248,81,73,.07); border-color: var(--crit); } .flag-warn { background: color-mix(in srgb, var(--warn) 7%, transparent); border-color: var(--warn); } .flag-ok { background: rgba(63,185,80,.07); border-color: var(--ok); } .hops { display: flex; flex-direction: column; gap: 8px; } .hop { display: flex; gap: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; } .hop-n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); display: grid; place-items: center; font-size: 12.5px; font-weight: 700; } .hop-body { font-size: 13.5px; display: flex; flex-direction: column; gap: 3px; } .hop-body code { font-size: 13px; word-break: break-all; } .hop-k { color: var(--text-dim); font-size: 12px; display: inline-block; width: 34px; } .hop-date { color: var(--text-dim); font-size: 12.5px; } .hop-delay { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 999px; padding: 0 8px; margin-left: 6px; font-size: 11.5px; } /* ============ THÈME : bouton + badge nav ============ */ .header-actions { display: flex; align-items: center; gap: 12px; } .theme-toggle { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; width: 34px; height: 34px; font-size: 16px; cursor: pointer; color: var(--text); display: grid; place-items: center; transition: border-color .12s; } .theme-toggle:hover { border-color: var(--accent); } .header-help { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; color: var(--text); text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap; transition: border-color .12s; } .header-help:hover { border-color: var(--accent); color: var(--accent); } @media (max-width: 640px) { .header-help { padding: 0 10px; } } .nav-count { background: var(--accent); color: #fff; font-size: 11px; border-radius: 999px; padding: 0 6px; margin-left: 4px; vertical-align: middle; } /* ============ ZONE DE DÉPÔT (import fichier) ============ */ .dropzone { position: relative; } .drop-overlay { position: absolute; inset: 0; display: none; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 2px dashed var(--accent); border-radius: var(--radius-sm); color: var(--accent); font-weight: 600; font-size: 15px; pointer-events: none; z-index: 2; } .dropzone.drag-over .drop-overlay { display: grid; } .dropzone.drag-over textarea { border-color: var(--accent); } /* ============ BIBLIOTHÈQUE D'IOC ============ */ .lib-table { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; } .lib-empty { color: var(--text-dim); font-style: italic; padding: 24px; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius); } .lib-row { display: grid; grid-template-columns: 130px 1fr 54px 130px 34px; gap: 10px; align-items: center; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13.5px; } .lib-head { background: transparent; border: none; color: var(--text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 2px 12px; } .lib-row.row-faux { opacity: .55; } .lib-val code { word-break: break-all; font-size: 13px; } .lib-occ { color: var(--warn); font-size: 12px; } .ttag { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--border); background: var(--bg-card); } .st-surv { border-color: color-mix(in srgb, var(--warn) 40%, transparent); color: var(--warn); } .st-faux { border-color: var(--border); color: var(--text-dim); } .lib-status { padding: 5px 8px; font-size: 12.5px; border-radius: 6px; } .lib-del { background: transparent; border: 1px solid var(--border); color: var(--text-dim); border-radius: 6px; width: 28px; height: 28px; cursor: pointer; transition: border-color .12s, color .12s; } .lib-del:hover { border-color: var(--crit); color: var(--crit); } /* Liste d'IOC dans le rapport technique */ .report-ioc { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; } .report-ioc li { padding: 3px 0; break-inside: avoid; } .report-ioc code { font-size: 13px; word-break: break-all; } @media (max-width: 640px) { .report-ioc { columns: 1; } .lib-row { grid-template-columns: 1fr 50px 108px 30px; } .lib-row .lib-type { grid-column: 1 / -1; } } /* Comptage d'occurrences */ .occ { font-size: 11px; color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: 999px; padding: 0 7px; } /* Liens de pivot externes */ .pivots { display: inline-flex; gap: 6px; margin-left: auto; flex-wrap: wrap; } .pivot { font-size: 11px; color: var(--accent); text-decoration: none; border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; background: var(--bg); transition: border-color .12s, color .12s; } .pivot:hover { border-color: var(--accent); color: #fff; background: var(--accent-dark); } /* Toast d'information */ .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--bg-card); color: var(--text); border: 1px solid var(--accent); padding: 12px 20px; border-radius: 10px; box-shadow: var(--shadow); font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 50; max-width: 90vw; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============ CHRONOLOGIE / TIMELINE ============ */ .tl-form { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 24px; } .tl-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .tl-form label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 13.5px; } .tl-list { position: relative; padding-left: 8px; } .tl-item { position: relative; display: flex; gap: 16px; padding-bottom: 4px; } .tl-item::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: -4px; width: 2px; background: var(--border); } .tl-item:last-child::before { display: none; } .tl-marker { position: relative; z-index: 1; flex: none; width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; box-shadow: 0 0 0 3px var(--bg); } .tl-card { flex: 1; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 14px; } .tl-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; } .tl-cat { font-size: 11.5px; font-weight: 600; border: 1px solid; border-radius: 999px; padding: 1px 9px; } .tl-time { color: var(--text-dim); font-size: 12.5px; } .tl-del { margin-left: auto; background: transparent; border: 1px solid var(--border); color: var(--text-dim); border-radius: 6px; width: 24px; height: 24px; cursor: pointer; font-size: 12px; } .tl-del:hover { border-color: var(--crit); color: var(--crit); } .tl-title { font-weight: 600; font-size: 14.5px; } .tl-desc { color: var(--text-dim); font-size: 13px; margin-top: 4px; } /* ============ GLOSSAIRE ============ */ .glo-section { margin-bottom: 28px; } .glo-section > h3 { font-size: 17px; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); } .glo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .glo-item { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 15px; } .glo-item-t { font-weight: 600; font-size: 14px; margin-bottom: 5px; } .glo-item-d { color: var(--text-dim); font-size: 13px; line-height: 1.5; } .glo-code { font-family: ui-monospace, monospace; font-size: 12px; color: var(--accent); background: var(--bg-card); padding: 1px 6px; border-radius: 4px; } .glo-delai { float: right; font-size: 11px; color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); border-radius: 999px; padding: 1px 9px; } /* ============ EXPOSITION AUX FUITES ============ */ .ext-notice { background: color-mix(in srgb, var(--warn) 8%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); border-radius: var(--radius); padding: 14px 18px; font-size: 13.5px; line-height: 1.5; margin-bottom: 20px; } .expo-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 18px; } .expo-card > h3 { margin: 0 0 6px; font-size: 17px; } .pw-field { position: relative; display: flex; align-items: center; } .pw-field input { padding-right: 44px; } .pw-eye { position: absolute; right: 8px; background: transparent; border: none; cursor: pointer; font-size: 16px; opacity: .7; padding: 4px; } .pw-eye:hover { opacity: 1; } .expo-result { border-radius: var(--radius-sm); padding: 14px 16px; margin-top: 6px; border: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; } .expo-result span { font-size: 13.5px; color: var(--text-dim); } .expo-result strong { font-size: 15px; } .expo-ok { border-color: var(--ok); background: rgba(63,185,80,.08); } .expo-bad { border-color: var(--crit); background: rgba(248,81,73,.08); } .expo-loading { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); color: var(--text-dim); flex-direction: row; align-items: center; } .expo-soon { color: var(--text-dim); font-size: 12.5px; font-style: italic; } .spin { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ============ DIAGNOSTIC DE DOMAINE (Neyss Domain) ============ */ .dom-wrap { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; } .dom-verdict { border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius-sm); padding: 14px 16px; background: var(--bg-soft); } .dom-verdict.sev-ok { border-left-color: var(--ok); background: rgba(63,185,80,.06); } .dom-verdict.sev-warn { border-left-color: var(--warn); background: rgba(210,153,34,.07); } .dom-verdict.sev-crit { border-left-color: var(--crit); background: rgba(248,81,73,.06); } .dom-score { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .dom-score-lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); font-weight: 700; } .dom-score-val { font-size: 20px; font-weight: 800; font-family: var(--font-display); } .dom-verdict.sev-ok .dom-score-val { color: var(--ok); } .dom-verdict.sev-warn .dom-score-val { color: var(--warn); } .dom-verdict.sev-crit .dom-score-val { color: var(--crit); } .dom-score-txt { font-size: 13.5px; color: var(--text-dim); margin-top: 4px; line-height: 1.5; } .dom-domain { margin-top: 8px; font-family: ui-monospace, monospace; font-size: 13px; color: var(--text); display: inline-flex; align-items: center; gap: 6px; } .dom-domain .gi-globe { color: var(--accent); } .dom-checks { display: flex; flex-direction: column; gap: 8px; } .dom-check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-card); } .dom-check-ic { flex: none; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 14px; } .dom-check.sev-ok .dom-check-ic { color: var(--ok); background: rgba(63,185,80,.12); } .dom-check.sev-warn .dom-check-ic { color: var(--warn); background: rgba(210,153,34,.14); } .dom-check.sev-crit .dom-check-ic { color: var(--crit); background: rgba(248,81,73,.12); } .dom-check.sev-info .dom-check-ic { color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 12%, transparent); } .dom-check.sev-crit { border-color: color-mix(in srgb, var(--crit) 35%, var(--border-soft)); } .dom-check-b { flex: 1; min-width: 0; } .dom-check-h strong { font-size: 14px; } .dom-check-d { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin-top: 2px; } .dom-rec { display: block; margin-top: 7px; padding: 6px 9px; font-family: ui-monospace, monospace; font-size: 12px; color: var(--text); background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: 6px; word-break: break-all; white-space: pre-wrap; } .dom-actions { margin: 2px 0 0; } .dom-src { font-size: 11.5px; color: var(--text-dim); font-style: italic; margin: 2px 0 0; } .dom-lk-list { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; } .dom-lk-list code { font-size: 12.5px; } .dom-tag { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--text-dim) 14%, transparent); color: var(--text-dim); white-space: nowrap; } .dom-tag-mx { background: color-mix(in srgb, var(--crit) 16%, transparent); color: var(--crit); } /* ---- Veille & vulnérabilités (CVE) ---- */ .vl-sev { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 9px; border-radius: 999px; margin-left: auto; white-space: nowrap; } .vl-crit { background: color-mix(in srgb, var(--crit) 16%, transparent); color: var(--crit); } .vl-warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); } .vl-ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); } .vl-info { background: color-mix(in srgb, var(--text-dim) 14%, transparent); color: var(--text-dim); } .vl-refs { font-size: 13px; } .vl-refs strong { font-size: 12.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; } .vl-refs ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; } .vl-refs a { word-break: break-all; } /* ---- CERT-FR (liste de publications) ---- */ .cf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .cf-item { display: flex; align-items: baseline; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--border-soft); } .cf-item:last-child { border-bottom: none; } .cf-item a { flex: 1; min-width: 0; } .cf-date { flex: none; font-size: 11.5px; color: var(--text-dim); font-family: ui-monospace, monospace; } .cf-seg.is-on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } /* ---- Analyse de lien : capture du rendu isolé ---- */ .lk-shot { display: block; margin-top: 8px; max-width: 320px; width: 100%; border: 1px solid var(--border); border-radius: 8px; } /* ---- Création de compte : jauge de mot de passe + anti-robot ---- */ .gs-strength { display: flex; align-items: center; gap: 8px; margin: -2px 0 2px; } .gs-strength-bar { flex: 1; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; } .gs-strength-bar span { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .25s ease, background .25s ease; } .gs-strength-bar span.s-crit { background: var(--crit); } .gs-strength-bar span.s-mid { background: var(--warn); } .gs-strength-bar span.s-ok { background: var(--ok); } .gs-strength-txt { font-size: 11.5px; color: var(--text-dim); flex: none; max-width: 58%; text-align: right; } .gs-hp { position: absolute !important; left: -9999px !important; top: -9999px; width: 1px; height: 1px; opacity: 0; } .gs-human { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin: 2px 0; } .gs-human-run { color: var(--text-dim); } .gs-human-ok { color: var(--ok); } /* ---- Onboarding : personnalisation inline (logo + couleur) ---- */ .pp-brand { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); } .pp-brand-l { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); } .pp-brand-l [class^="gi-"] { width: 15px; height: 15px; } .pp-brand-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .pp-logo { width: 46px; height: 46px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card); display: grid; place-items: center; overflow: hidden; flex: none; } .pp-logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .pp-logo-ph { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; } .pp-accent { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-dim); } .pp-accent input[type=color] { width: 30px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; } .pp-brand-note { font-size: 11.5px; color: var(--text-dim); margin: 8px 0 0; } /* ---- Onboarding : recherche + pré-remplissage de l'organisation ---- */ .pp-search { position: relative; margin-bottom: 12px; } .pp-search > input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); font: inherit; font-size: 14px; } .pp-search > input:focus { outline: none; border-color: var(--accent); } .pp-search-res { position: absolute; z-index: 5; left: 0; right: 0; margin-top: 4px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); max-height: 300px; overflow-y: auto; } .pp-search-item { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; padding: 9px 12px; background: none; border: 0; border-bottom: 1px solid var(--border-soft); cursor: pointer; font: inherit; } .pp-search-item:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); } .pp-si-n { font-weight: 600; font-size: 13.5px; color: var(--text); } .pp-si-s { font-size: 12px; color: var(--text-dim); } .pp-search-empty { padding: 10px 12px; font-size: 12.5px; color: var(--text-dim); } .pp-search-src { padding: 6px 12px; font-size: 10.5px; color: var(--text-dim); font-style: italic; border-top: 1px solid var(--border-soft); } /* ============ AUTHENTIFICATION / DOSSIERS SERVEUR ============ */ /* Compte connecté : pied épinglé en bas de la barre latérale (avatar + identité + déconnexion). sticky bottom:0 -> toujours visible même quand la liste de navigation défile ; sur mobile, la barre latérale est le tiroir ☰, donc la déconnexion y est aussi accessible. */ .sidebar-account { position: sticky; bottom: 0; z-index: 4; margin-top: 12px; display: flex; align-items: center; gap: 9px; padding: 8px 9px; background: color-mix(in srgb, var(--bg-soft) 92%, #fff); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); border: 1px solid var(--border-soft); border-radius: 12px; box-shadow: 0 -6px 18px rgba(16, 28, 51, .06); } .sa-ava { width: 32px; height: 32px; border-radius: 999px; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent), var(--violet)); background-size: cover; background-position: center; /* si une photo est fournie */ } .sa-id { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; } .sa-name { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sa-mail { font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sa-logout { flex: none; width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--text-dim); transition: border-color .12s, color .12s; } .sa-logout svg { width: 15px; height: 15px; } .sa-logout:hover { border-color: var(--crit); color: var(--crit); } #srv-list .lib-row { grid-template-columns: 150px 1fr 90px 110px 108px 82px; } #adm-users .lib-row { grid-template-columns: 1fr 1fr 90px 150px 40px; } @media (max-width: 640px) { #srv-list .lib-row, #adm-users .lib-row { grid-template-columns: 1fr auto; } } /* ============ CATALOGUE D'OUTILS DE RÉFÉRENCE ============ */ .ref-group { margin-bottom: 20px; } .ref-group:last-child { margin-bottom: 0; } .ref-group > h4 { font-size: 14px; margin: 0 0 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; } .ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; } .ref-card { display: block; text-decoration: none; color: var(--text); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; transition: transform .12s, border-color .12s; } .ref-card:hover { transform: translateY(-2px); border-color: var(--accent); } .ref-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; } .ref-name { font-weight: 600; font-size: 14px; } .ref-desc { color: var(--text-dim); font-size: 12.5px; line-height: 1.45; } .ref-tag { font-size: 10px; padding: 1px 7px; border-radius: 999px; white-space: nowrap; border: 1px solid; flex: none; } .ref-free { color: var(--ok); border-color: rgba(63,185,80,.4); background: rgba(63,185,80,.1); } .ref-key { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); } .ref-gov { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); } .ref-paid { color: var(--text-dim); border-color: var(--border); background: var(--bg-soft); } /* ============ ÉCRAN D'ACCUEIL (choix du profil) ============ */ .welcome-overlay { position: fixed; inset: 0; z-index: 100; background: radial-gradient(1200px 600px at 50% -10%, #16233c, var(--bg)); display: grid; place-items: center; padding: 24px; overflow-y: auto; } .welcome-box { max-width: 760px; width: 100%; text-align: center; } .welcome-brand { font-size: 20px; letter-spacing: .14em; color: var(--accent); margin-bottom: 18px; } .welcome-brand .brand-mark { font-size: 22px; } .welcome-box h1 { font-size: 30px; margin: 0 0 8px; } .welcome-sub { color: var(--text-dim); margin: 0 0 28px; font-size: 15.5px; } .welcome-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .welcome-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 22px; cursor: pointer; text-align: center; color: var(--text); transition: transform .14s, border-color .14s, box-shadow .14s; } .welcome-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow); } .wc-icon { display: inline-grid; place-items: center; width: 58px; height: 58px; margin: 0 auto; border-radius: 15px; color: var(--accent); background: color-mix(in srgb, var(--brand-blue) 10%, var(--bg-soft)); border: 1px solid color-mix(in srgb, var(--brand-blue) 20%, var(--border)); } .wc-icon svg { width: 30px; height: 30px; } .welcome-card:hover .wc-icon { border-color: color-mix(in srgb, var(--brand-blue) 40%, var(--border)); } .wc-title { font-weight: 700; font-size: 18px; margin: 12px 0 8px; } .wc-desc { color: var(--text-dim); font-size: 13.5px; line-height: 1.5; } .welcome-note { color: var(--text-dim); font-size: 12.5px; margin-top: 22px; } @media (max-width: 600px) { .welcome-choices { grid-template-columns: 1fr; } .welcome-box h1 { font-size: 24px; } } /* Bouton de bascule de profil (en-tête) */ .mode-switch { display: inline-flex; align-items: center; gap: 7px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-family: inherit; cursor: pointer; } .mode-switch:hover { border-color: var(--accent); } .ms-change { color: var(--text-dim); font-size: 11px; border-left: 1px solid var(--border); padding-left: 7px; } /* ============ ESPACE PARTICULIER ============ */ .ref-card-static { cursor: default; } .ref-card-static:hover { transform: none; border-color: var(--border); } .pp-golden { background: color-mix(in srgb, var(--ok) 8%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 18px; } .pp-golden-t { font-weight: 700; font-size: 14.5px; } .pp-golden-l { margin: 8px 0 0; padding-left: 20px; columns: 2; column-gap: 26px; font-size: 13.5px; color: var(--text-dim); } .pp-golden-l li { margin: 3px 0; break-inside: avoid; } @media (max-width: 560px) { .pp-golden-l { columns: 1; } } /* « Que faire ? » — parcours calme et groupé (moins intimidant) */ .pp-choose-lead { font-size: 15.5px; font-weight: 700; color: var(--text); margin: 10px 0 14px; } .pp-cat { margin-bottom: 22px; } .pp-cat-h { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 10px; padding-left: 2px; } .pp-card-unsure { display: block; width: 100%; margin-top: 4px; border-style: dashed; background: color-mix(in srgb, var(--brand-blue, #2f6bed) 5%, var(--bg-soft)); } .pp-card-unsure:hover { background: color-mix(in srgb, var(--brand-blue, #2f6bed) 9%, var(--bg-soft)); } .pp-card-unsure .ic { color: var(--accent-dark); } .pp-golden-soft { margin-top: 6px; } .pp-detail { margin-top: 22px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; animation: fade .25s ease; } .pp-detail-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 8px; } .pp-detail-ic { font-size: 34px; flex: none; } .pp-detail-head h3 { margin: 0 0 4px; font-size: 20px; } .pp-detail-head p { margin: 0; color: var(--text-dim); font-size: 14px; } .pp-h4 { font-size: 15px; margin: 22px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); } .pp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .pp-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; } .pp-step-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; } .pp-tips { display: flex; flex-wrap: wrap; gap: 8px; } .pp-tip { background: rgba(63,185,80,.1); border: 1px solid rgba(63,185,80,.35); color: var(--text); border-radius: 999px; padding: 5px 12px; font-size: 13px; } /* ============ ANALYSE FICHIER / AUTO-DIAGNOSTIC (particulier) ============ */ .pf-zone { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 2px dashed var(--border); border-radius: var(--radius-sm); padding: 20px; background: var(--bg); } .drop-hint { color: var(--text-dim); font-size: 13.5px; } .ad-checks { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } .ad-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; transition: border-color .12s, opacity .12s; } .ad-check input { margin-top: 3px; accent-color: var(--ok); flex: none; width: 18px; height: 18px; } .ad-check-t { font-weight: 600; font-size: 14.5px; display: block; } .ad-check-h { color: var(--text-dim); font-size: 13px; display: block; margin-top: 3px; } .ad-check.done { border-color: var(--ok); opacity: .6; } .ad-check.done .ad-check-t { text-decoration: line-through; } /* ============ APPELS À L'ACTION (CTA) ============ */ .cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; border-radius: var(--radius); padding: 20px 24px; box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 28%, transparent); } .cta-compact { padding: 15px 18px; gap: 14px; } .cta-body { flex: 1; min-width: 220px; } .cta-brand { font-weight: 800; font-size: 18px; letter-spacing: .01em; } .cta-compact .cta-brand { font-size: 16px; } .cta-pitch { font-size: 13.5px; line-height: 1.5; opacity: .95; margin-top: 4px; } .cta-trust { font-size: 12px; font-weight: 600; margin-top: 8px; opacity: .95; } .cta-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .cta-btn { background: #fff; color: var(--accent-dark); text-decoration: none; font-weight: 700; font-size: 14.5px; padding: 12px 22px; border-radius: 8px; white-space: nowrap; transition: transform .12s, box-shadow .12s; } .cta-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(23,60,130,.2); } .cta-tel { color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap; } .cta-tel:hover { text-decoration: underline; } .pp-cta-top, #pp-cta { margin-bottom: 20px; } /* Bouton CTA dans l'en-tête */ .header-cta { display: inline-flex; align-items: center; text-decoration: none; background: linear-gradient(135deg, var(--accent), var(--violet)); color: #fff; font-weight: 700; font-size: 12.5px; padding: 7px 14px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent); transition: filter .12s, box-shadow .12s; } .header-cta:hover { filter: brightness(1.06); } /* ============ PAGES LÉGALES ============ */ .legal { max-width: 760px; } .legal p, .legal li { font-size: 14.5px; color: var(--text); } .legal p { margin: 0 0 14px; } .legal h3 { font-size: 16px; margin: 26px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); } .legal ul { margin: 0 0 14px; padding-left: 20px; } .legal li { margin-bottom: 8px; } .legal a { color: var(--accent); } .legal-updated { color: var(--text-dim); font-size: 13px; font-family: ui-monospace, monospace; margin-top: -6px; } .legal-id { display: grid; grid-template-columns: 220px 1fr; gap: 8px 18px; font-size: 14.5px; margin: 0 0 8px; } .legal-id dt { color: var(--text-dim); } .legal-id dd { margin: 0; } .todo { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); border: 1px dashed color-mix(in srgb, var(--warn) 45%, transparent); border-radius: 5px; padding: 0 6px; font-size: 13px; } .legal-callout { background: rgba(248,81,73,.08); border: 1px solid var(--crit); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 18px; font-size: 14.5px; } @media (max-width: 560px) { .legal-id { grid-template-columns: 1fr; gap: 2px; } .legal-id dt { margin-top: 8px; } } /* Pied de page — liens légaux */ .foot-line { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .foot-links { display: flex; gap: 6px; flex-wrap: wrap; } .foot-link { background: transparent; border: none; color: var(--text-dim); font-family: inherit; font-size: 12.5px; cursor: pointer; padding: 2px 6px; border-radius: 5px; text-decoration: underline; text-underline-offset: 2px; } .foot-link:hover { color: var(--accent); } /* ============ ACCUEIL PRO (lanceur) ============ */ .home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } /* Bande d'accès direct à la gestion de crise (Accueil pro) */ .home-crise { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; cursor: pointer; margin-bottom: 26px; background: linear-gradient(120deg, color-mix(in srgb, var(--crit) 12%, var(--bg-soft)), color-mix(in srgb, var(--violet) 10%, var(--bg-soft))); border: 1px solid color-mix(in srgb, var(--crit) 32%, var(--border)); border-radius: var(--radius); padding: 16px 20px; transition: border-color .15s, box-shadow .15s; } .home-crise:hover { border-color: color-mix(in srgb, var(--crit) 55%, var(--border)); box-shadow: 0 4px 18px color-mix(in srgb, var(--crit) 16%, transparent); } .home-crise-ic { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, var(--crit), color-mix(in srgb, var(--crit) 65%, var(--violet))); } .home-crise-ic i { width: 24px; height: 24px; background: #fff; } .home-crise-b { flex: 1; min-width: 0; } .home-crise-t { display: block; font-size: 16px; font-weight: 700; } .home-crise-d { display: block; font-size: 13px; color: var(--text-dim); margin-top: 2px; } .home-crise-go { flex: none; font-size: 13.5px; font-weight: 700; color: var(--crit); white-space: nowrap; } @media (max-width: 560px) { .home-crise-go { display: none; } } /* Accueil organisé par thème */ .home-section { margin-bottom: 30px; } .home-section-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 13px; padding-bottom: 9px; border-bottom: 1px solid var(--border-soft); } .home-section-h .hs-ic { font-size: 16px; align-self: center; opacity: .95; } .home-section-h h3 { margin: 0; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text); } .home-section-h .hs-d { font-size: 12.5px; color: var(--text-dim); font-weight: 400; letter-spacing: 0; } .home-card { display: flex; flex-direction: column; gap: 5px; text-align: left; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; cursor: pointer; color: var(--text); font-family: inherit; transition: transform .12s, border-color .12s, box-shadow .12s; } .home-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow); } .hc-ic { width: 42px; height: 42px; border-radius: 11px; flex: none; display: grid; place-items: center; font-size: 21px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--violet) 15%, transparent)); color: var(--accent); } .hc-t { font-weight: 700; font-size: 15.5px; margin-top: 4px; } .hc-d { color: var(--text-dim); font-size: 13px; line-height: 1.45; } /* ============ ÉCOSYSTÈME (pied de page) ============ */ .foot-eco { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%; margin-top: 4px; } .foot-eco > span { color: var(--text-dim); } .foot-eco a { color: var(--accent); text-decoration: none; font-weight: 600; } .foot-eco a:hover { text-decoration: underline; } /* ============ ASSISTANT IA (chat) ============ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .chat { display: flex; flex-direction: column; gap: 12px; } .chat-log { display: flex; flex-direction: column; gap: 12px; min-height: 220px; max-height: 58vh; overflow-y: auto; padding: 16px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); } .msg { display: flex; } .msg-user { justify-content: flex-end; } .msg-b { max-width: 82%; padding: 11px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.55; white-space: normal; word-wrap: break-word; } .msg-user .msg-b { background: var(--accent); color: #fff; border-bottom-right-radius: 5px; } .msg-bot .msg-b { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); border-bottom-left-radius: 5px; } .msg-bot.is-intro .msg-b { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: var(--accent-dark); } .msg-bot.is-error .msg-b { border-color: #d1701f; } .msg-bot.is-cta .msg-b { background: rgba(63,185,80,.10); border-color: var(--ok); font-size: 14px; } .msg-b a { color: inherit; font-weight: 700; text-decoration: underline; } .msg-user .msg-b a { color: #fff; } /* Indicateur de saisie (…) */ .typing { display: inline-flex; gap: 4px; align-items: center; } .typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); opacity: .5; animation: chatdot 1s infinite; } .typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; } @keyframes chatdot { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } } /* Suggestions rapides */ .chat-suggest { display: flex; flex-wrap: wrap; gap: 8px; } .chip { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-dim); border-radius: 999px; padding: 7px 13px; font-size: 13px; cursor: pointer; font-family: inherit; transition: border-color .12s, color .12s; } .chip:hover { border-color: var(--accent); color: var(--text); } /* Zone de saisie */ .chat-input { display: flex; flex-direction: column; gap: 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; } .chat-input textarea { width: 100%; resize: none; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font-family: inherit; font-size: 14.5px; line-height: 1.5; } .chat-input textarea:focus { outline: none; border-color: var(--accent); } .chat-actions { display: flex; justify-content: flex-end; gap: 10px; } .chat-foot { color: var(--text-dim); font-size: 12px; margin: 0; text-align: center; } @media (max-width: 640px) { .msg-b { max-width: 90%; } } @media (prefers-reduced-motion: reduce) { .typing i { animation: none; } } /* ---- Synthèse assistée (IA) depuis le rapport ---- */ .btn-sm { padding: 6px 12px; font-size: 13px; } .synth { margin-top: 18px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; } .synth-head { display: flex; align-items: center; gap: 12px; } .synth-head h3 { margin: 0; font-size: 17px; flex: 1; } .synth-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 2px 9px; vertical-align: middle; margin-left: 8px; } .synth-hint { color: var(--text-dim); font-size: 13px; margin: 8px 0 14px; } .synth-body { font-size: 14.5px; line-height: 1.6; } .synth-body h4 { margin: 16px 0 6px; font-size: 15px; color: var(--accent); } .synth-body h4:first-child { margin-top: 0; } .synth-body p { margin: 0 0 10px; } .synth-body ul { margin: 0 0 10px; padding-left: 20px; } .synth-body li { margin: 2px 0; } .synth-loading { color: var(--text-dim); display: flex; align-items: center; gap: 10px; } .synth-note { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); } .synth-note.is-error { border-color: #d1701f; } .synth-note.is-cta { margin-top: 10px; background: rgba(63,185,80,.10); border-color: var(--ok); } .synth-note a { color: inherit; font-weight: 700; } .synth-actions { display: flex; gap: 10px; margin-top: 14px; } .synth-savehint { color: var(--text-dim); font-size: 12.5px; margin: 12px 0 0; } /* ---- Analyse guidée d'un e-mail (particulier) ---- */ .mailcheck { display: flex; flex-direction: column; gap: 12px; } .mailcheck textarea { width: 100%; resize: vertical; min-height: 150px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; font-family: inherit; font-size: 14px; line-height: 1.5; } .mailcheck textarea:focus { outline: none; border-color: var(--accent); } .mc-bar { display: flex; gap: 10px; } .mc-ioc, .mc-explain { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .mc-note { color: var(--text-dim); font-size: 14px; } .mc-ioc-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .mc-hint { color: var(--text-dim); font-size: 12px; } .mc-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .mc-cat h4 { margin: 0 0 6px; font-size: 13.5px; color: var(--accent); } .mc-cnt { color: var(--text-dim); font-weight: 400; } .mc-cat ul { margin: 0; padding-left: 16px; } .mc-cat li { margin: 2px 0; font-size: 13px; word-break: break-all; } .mc-cat li code { font-size: 12.5px; } .mc-more { list-style: none; color: var(--text-dim); font-size: 12px; } #mc-tolib { margin-top: 12px; } .mc-verdict-h { font-weight: 700; margin-bottom: 8px; } .mc-verdict-b { font-size: 14.5px; line-height: 1.6; } /* ---- Détecteur d'arnaques (particulier) ---- */ .scam { display: flex; flex-direction: column; gap: 12px; } .scam textarea { width: 100%; resize: vertical; min-height: 130px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; font-family: inherit; font-size: 14px; line-height: 1.5; } .scam textarea:focus { outline: none; border-color: var(--accent); } .sc-bar { display: flex; gap: 10px; } .sc-out { display: flex; flex-direction: column; gap: 12px; } .sc-verdict { font-weight: 700; font-size: 16px; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); } .sc-verdict.sc-bad { border-color: var(--crit); background: rgba(248,81,73,.08); } .sc-verdict.sc-warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); } .sc-verdict.sc-ok { border-color: var(--ok); background: rgba(63,185,80,.08); } .sc-block { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; } .sc-block h4 { margin: 0 0 8px; font-size: 15px; } .sc-item { border-left: 3px solid var(--border); padding: 6px 0 6px 10px; margin: 6px 0; font-size: 14px; } .sc-item.sc-bad { border-color: var(--crit); } .sc-item.sc-warn { border-color: var(--warn); } .sc-item.sc-ok { border-color: var(--ok); } .sc-item code { word-break: break-all; } .sc-item ul { margin: 4px 0 0; padding-left: 18px; color: var(--text-dim); font-size: 13px; } .sc-ok-t { color: var(--ok); font-size: 13px; } .sc-tip { color: var(--text-dim); font-size: 13px; margin: 8px 0 0; } .sc-signals { margin: 0; padding-left: 18px; } .sc-note { color: var(--text-dim); font-size: 14px; } .sc-cta { background: rgba(63,185,80,.10); border: 1px solid var(--ok); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px; } .sc-cta a { color: inherit; font-weight: 700; } /* ---- Enrichissement d'IOC (bibliothèque, pro) ---- */ .lib-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; } .lib-enrich { background: transparent; border: 1px solid var(--border); color: var(--text-dim); border-radius: 6px; cursor: pointer; font-size: 13px; padding: 2px 7px; font-family: inherit; } .lib-enrich:hover:not(:disabled) { border-color: var(--accent); color: var(--text); } .lib-enrich:disabled { opacity: .6; cursor: default; } .enr { display: inline-block; margin-left: 8px; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); vertical-align: middle; white-space: nowrap; } .enr-malicious { color: var(--crit); border-color: var(--crit); background: rgba(248,81,73,.08); } .enr-suspicious { color: var(--warn); border-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); } .enr-clean { color: var(--ok); border-color: var(--ok); background: rgba(63,185,80,.08); } .enr-unknown, .enr-error, .enr-notconfigured { color: var(--text-dim); } /* Badges de provenance des indicateurs (MISP, marqueur détection to_ids) */ .src-badge { display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 1px 7px; border-radius: 999px; vertical-align: middle; white-space: nowrap; border: 1px solid var(--border); } .src-misp { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 45%, transparent); background: color-mix(in srgb, var(--violet) 10%, transparent); } .src-ids { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); } /* ---- Détail d'un dossier serveur (ré-affichage synthèse) ---- */ .srv-detail { margin-top: 18px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; } .srv-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .srv-detail-head h3 { margin: 0; font-size: 17px; flex: 1; } .srv-detail-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 18px; margin-bottom: 16px; } .srv-detail-meta > div { display: flex; flex-direction: column; gap: 1px; } .sd-k { color: var(--text-dim); font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; } .sd-v { font-size: 14px; } .sd-synth-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 700; margin-bottom: 10px; } .sd-when { color: var(--text-dim); font-weight: 400; font-size: 12.5px; } .sd-synth-b { font-size: 14.5px; line-height: 1.6; } .sd-synth-b h4 { margin: 16px 0 6px; font-size: 15px; color: var(--accent); } .sd-synth-b h4:first-child { margin-top: 0; } .sd-synth-b p { margin: 0 0 10px; } .sd-synth-b ul { margin: 0 0 10px; padding-left: 20px; } .sd-synth-b li { margin: 2px 0; } #srv-synth-copy { margin-top: 12px; } .sd-nosynth { color: var(--text-dim); font-size: 14px; } .srv-detail-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; } .srv-detail-actions .spacer { flex: 1; } .srv-detail-dirty { color: #d1701f; font-size: 12.5px; margin: 8px 0 0; } /* Journal / commentaires du dossier */ .srv-comments { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; } .srv-comments-h { margin: 0 0 10px; font-size: 14.5px; } .srv-comments-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .srv-comments-empty { color: var(--text-dim); font-size: 13.5px; } .srv-comment { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; } .srv-comment-meta { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; } .srv-comment-auth { font-weight: 700; font-size: 13px; } .srv-comment-when { font-size: 11.5px; color: var(--text-dim); } .srv-comment-txt { font-size: 13.5px; line-height: 1.5; } .srv-comment-add { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .srv-comment-ta { width: 100%; resize: vertical; min-height: 52px; box-sizing: border-box; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 13.5px; } /* Textarea d'édition de synthèse (rapport + dossier) */ .synth-edit-ta { width: 100%; resize: vertical; min-height: 220px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; font-family: inherit; font-size: 14px; line-height: 1.55; } .synth-edit-ta:focus { outline: none; border-color: var(--accent); } /* ---- Assistant IA flottant (présent sur toutes les vues) ---- */ .ai-fab { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--accent), var(--violet)); color: #fff; border: none; cursor: pointer; border-radius: 999px; padding: 12px 18px; font-family: inherit; font-size: 14px; font-weight: 600; box-shadow: 0 6px 20px rgba(23,60,130,.28); transition: transform .12s, filter .12s, box-shadow .12s; } .ai-fab:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(23,60,130,.34); } .ai-fab-ic { width: 30px; height: 30px; flex: none; display: block; border-radius: 50%; background: #fff; object-fit: contain; padding: 2px; } /* Mascotte Neyss en icône inline (remplace l'ancien emoji 🤖) */ .ai-ic { height: 18px; width: 18px; object-fit: contain; vertical-align: middle; display: inline-block; flex: none; } img.hc-ic { width: 32px; height: 32px; object-fit: contain; display: block; background: none; border-radius: 0; } @media (max-width: 640px) { .ai-fab { right: 14px; bottom: 14px; padding: 12px; } .ai-fab-t { display: none; } /* icône seule sur mobile */ } @media print { .ai-fab { display: none !important; } } /* ---- « Faire le point » rassurant (particulier, détail de situation) ---- */ .pp-synth-hint { color: var(--text-dim); font-size: 13px; margin: 0 0 8px; } .pp-synth-note { width: 100%; resize: vertical; min-height: 52px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 11px; font-family: inherit; font-size: 14px; margin-bottom: 10px; } .pp-synth-note:focus { outline: none; border-color: var(--accent); } .pp-synth-out { margin-top: 12px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; font-size: 14.5px; line-height: 1.6; } .pp-synth-out h4 { margin: 14px 0 6px; font-size: 15px; color: var(--accent); } .pp-synth-out h4:first-child { margin-top: 0; } .pp-synth-out p { margin: 0 0 10px; } .pp-synth-out ul { margin: 0 0 10px; padding-left: 20px; } .pp-synth-out li { margin: 2px 0; } .pp-synth-err { color: #d1701f; } /* ---- Plan de récupération suivi (particulier) ---- */ .pp-plan-hint { color: var(--text-dim); font-size: 13px; margin: 0 0 10px; } .pp-progress { height: 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; } .pp-progress-bar { height: 100%; background: var(--accent); border-radius: 999px; transition: width .25s; } .pp-progress-t { color: var(--text-dim); font-size: 13px; margin: 6px 0 14px; } .pp-tasks { display: flex; flex-direction: column; gap: 8px; } .pp-task { display: flex; align-items: flex-start; gap: 11px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; cursor: pointer; transition: border-color .12s; } .pp-task:hover { border-color: var(--accent-dark); } .pp-task input { position: absolute; opacity: 0; width: 0; height: 0; } .pp-task-box { flex: none; width: 20px; height: 20px; border: 2px solid var(--border); border-radius: 6px; margin-top: 1px; display: grid; place-items: center; transition: background .12s, border-color .12s; } .pp-task input:checked + .pp-task-box { background: var(--accent); border-color: var(--accent); } .pp-task input:checked + .pp-task-box::after { content: "✓"; color: #fff; font-size: 13px; font-weight: 800; } .pp-task input:focus-visible + .pp-task-box { outline: 2px solid var(--accent); outline-offset: 2px; } .pp-task-n { flex: none; color: var(--text-dim); font-weight: 700; font-size: 13px; min-width: 16px; } .pp-task-t { font-size: 14.5px; line-height: 1.45; } .pp-task.is-done { opacity: .62; } .pp-task.is-done .pp-task-t { text-decoration: line-through; } .pp-evidence { margin-top: 14px; } .pp-evidence summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 6px 0; } .pp-plan-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } /* ---- Générateur de documents (particulier) ---- */ .doc-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; } .doc-card { display: flex; flex-direction: column; gap: 5px; text-align: left; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; cursor: pointer; color: var(--text); font-family: inherit; transition: transform .12s, border-color .12s; } .doc-card:hover { transform: translateY(-3px); border-color: var(--accent); } .doc-ic { font-size: 24px; } .doc-t { font-weight: 700; font-size: 15px; margin-top: 2px; } .doc-d { color: var(--text-dim); font-size: 13px; line-height: 1.4; } .doc-back { margin-bottom: 12px; } .doc-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 20px; align-items: start; } .doc-form h3 { margin: 0 0 14px; font-size: 17px; } .doc-f { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; } .doc-f > span { font-size: 13.5px; font-weight: 600; } .doc-f em { color: var(--text-dim); font-weight: 400; font-style: normal; font-size: 12px; } .doc-f input, .doc-f textarea { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 11px; font-family: inherit; font-size: 14px; } .doc-f input:focus, .doc-f textarea:focus { outline: none; border-color: var(--accent); } .doc-preview { background: #fff; color: #1a1a1a; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 22px; white-space: pre-wrap; word-wrap: break-word; font-family: Georgia, "Times New Roman", serif; font-size: 14px; line-height: 1.6; min-height: 260px; } .doc-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .doc-warn { color: var(--text-dim); font-size: 12.5px; margin: 10px 0 0; } /* ---- Playbooks + conformité CNIL (pro) ---- */ .pb-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; } .pb-card { display: flex; flex-direction: column; gap: 5px; text-align: left; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; cursor: pointer; color: var(--text); font-family: inherit; transition: transform .12s, border-color .12s; } .pb-card:hover { transform: translateY(-3px); border-color: var(--accent); } .pb-ic { font-size: 24px; } .pb-t { font-weight: 700; font-size: 15px; } .pb-d { color: var(--text-dim); font-size: 13px; line-height: 1.4; } .pb-back { display: flex; gap: 10px; margin-bottom: 12px; } .pb-title { font-size: 20px; margin: 0 0 12px; } .pb-phase { margin-bottom: 18px; } .pb-phase h4 { font-size: 15px; margin: 0 0 8px; color: var(--accent); } .pb-cnil { margin-top: 26px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; } .pb-cnil-h { margin: 0 0 4px; font-size: 17px; } .cnil-q { display: flex; flex-direction: column; gap: 12px; max-width: 640px; } .cnil-q label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; } .cnil-q select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; font-family: inherit; font-size: 14px; max-width: 260px; } .cnil-out { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14.5px; } .cnil-out.is-ok { border-color: var(--ok); background: rgba(63,185,80,.08); } .cnil-out.is-warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); } .cnil-out.is-bad { border-color: #db6d28; background: rgba(219,109,40,.08); } .cnil-out p { margin: 0; } .cnil-tpl { margin-top: 12px; } .cnil-tpl pre { white-space: pre-wrap; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; font-size: 12.5px; font-family: Consolas, monospace; color: var(--text); overflow-x: auto; } .cnil-tpl .btn { margin: 10px 8px 0 0; text-decoration: none; } @media (max-width: 820px) { .doc-grid { grid-template-columns: 1fr; } } /* Impression : n'imprimer que le courrier */ @media print { body.printing-doc .app-header, body.printing-doc .app-footer, body.printing-doc .sidebar, body.printing-doc .doc-form, body.printing-doc .doc-actions, body.printing-doc .doc-warn, body.printing-doc .doc-back, body.printing-doc .doc-picker, body.printing-doc .view-title, body.printing-doc .view-hint { display: none !important; } body.printing-doc .doc-preview { border: none; padding: 0; } } /* ---- Mascotte Neyss (écran d'accueil) ---- */ .welcome-mascot { width: 132px; height: 132px; margin: 0 auto 6px; object-fit: contain; } @media (max-width: 640px) { .welcome-mascot { width: 104px; height: 104px; } } /* ---- Verrou d'accès (compte + paiement) ---- */ body.gated .app-header, body.gated .app-shell, body.gated .ai-fab, body.gated #welcome { display: none !important; } .gate-overlay { position: fixed; inset: 0; z-index: 300; overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: 24px; /* Fond uni accordé aux teintes claires de l'image de fond (lavande-blanc froid échantillonné : bande haute #eaeef6, base #f1f4f9), pour que la zone masquée du décor .gate-fond se fonde sans couture. Touche de violet à droite = néon de l'image. */ background: radial-gradient(760px 520px at 88% 66%, color-mix(in srgb, var(--violet) 6%, transparent) 0%, transparent 72%), linear-gradient(180deg, #eaeef6 0%, #eff2f9 58%, #f1f4f9 100%); } /* Décor de l'écran de connexion : hérite de .app-fond (même image, masque, opacité). z-index:-1 dans le contexte d'empilement de .gate-overlay = au-dessus du fond uni, sous la carte .gate-box (qui reste opaque et lisible au-dessus). */ .gate-fond { z-index: -1; } .gate-box { width: 100%; max-width: 440px; text-align: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--shadow); } .gate-brand { font-size: 22px; font-weight: 700; letter-spacing: .12em; margin-bottom: 14px; } .gate-logo { margin: 0 auto 18px; text-align: center; } .gate-logo img { height: 66px; width: auto; max-width: 100%; } .gate-logo-light { display: none; } :root[data-theme="light"] .gate-logo-dark { display: none; } :root[data-theme="light"] .gate-logo-light { display: inline-block; } .gate-sub { color: var(--text-dim); font-size: 14px; line-height: 1.5; margin: 0 0 16px; } .gate-tabs { display: flex; gap: 6px; margin-bottom: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 4px; } .gate-tab { flex: 1; padding: 8px 10px; border: none; background: transparent; color: var(--text-dim); font-family: inherit; font-size: 13.5px; font-weight: 600; border-radius: 999px; cursor: pointer; } .gate-tab.active { background: var(--accent); color: #fff; } .gate-form { display: flex; flex-direction: column; gap: 10px; text-align: left; } .gate-form input { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; font-family: inherit; font-size: 14.5px; } .gate-form input:focus { outline: none; border-color: var(--accent); } .gate-form .btn { margin-top: 4px; } /* Écran de vérification e-mail (code à 6 chiffres) */ .gate-verify-ico { text-align: center; margin: -2px 0 6px; } .gate-verify-ico img { width: 104px; height: auto; } .gate-verify-mail { text-align: center; font-weight: 600; color: var(--text); font-size: 14px; margin: 0 0 14px; word-break: break-word; } .gate-panel .gate-code-input { width: 100%; text-align: center; font-size: 30px; font-weight: 700; letter-spacing: 12px; font-family: var(--mono, ui-monospace, monospace); padding: 12px 8px 12px 20px; margin: 2px 0 12px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); } .gate-code-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .gate-code-input::placeholder { letter-spacing: 8px; color: var(--border); } .gate-verify-hint { text-align: center; font-size: 12.5px; color: var(--text-dim); margin: 14px 0 8px; line-height: 1.55; } .gate-link-inline { display: inline; padding: 0; font-size: inherit; vertical-align: baseline; } .gate-err { color: var(--crit); font-size: 13px; margin: 2px 0 0; } .gate-check { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: var(--text-dim); text-align: left; cursor: pointer; } .gate-check input[type="checkbox"] { width: 16px; height: 16px; min-width: 16px; flex: none; margin: 1px 0 0; padding: 0; accent-color: var(--accent); } .gate-check a { color: var(--accent); } .gate-price { font-size: 15px; margin: 4px 0 16px; } .gate-price strong { color: var(--accent); font-size: 20px; } #gate-pay .btn { width: 100%; } .gate-link { display: inline-block; margin-top: 14px; background: none; border: none; color: var(--text-dim); text-decoration: underline; font-family: inherit; font-size: 13px; cursor: pointer; } .gate-foot { color: var(--text-dim); font-size: 12px; margin: 18px 0 0; line-height: 1.5; } .gate-foot a { color: var(--accent); } /* ---- Rapport d'incident (fenêtre imprimable + document) ---- */ .report-modal { position: fixed; inset: 0; z-index: 200; background: rgba(9,14,26,.78); display: flex; flex-direction: column; } .report-modal-bar { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--bg-soft); border-bottom: 1px solid var(--border); } .rm-title { font-weight: 700; } .report-modal-body { flex: 1; overflow-y: auto; padding: 26px; display: flex; justify-content: center; } .report-doc { width: 100%; max-width: 800px; height: fit-content; background: #fff; color: #1a1a1a; border-radius: 8px; padding: 40px 44px; box-shadow: 0 20px 60px rgba(23,60,130,.45); font-family: Georgia, "Times New Roman", serif; line-height: 1.6; } .report-doc .rd-head { border-bottom: 2px solid #1f56cf; padding-bottom: 14px; margin-bottom: 22px; } .report-doc .rd-top { display: flex; justify-content: space-between; align-items: center; font-family: "Segoe UI", sans-serif; } .report-doc .rd-brand { font-weight: 800; color: #1f56cf; letter-spacing: .08em; } .report-doc .rd-logo { height: 30px; width: auto; display: block; } .report-doc .rd-client-logo { height: 42px; width: auto; max-width: 240px; display: block; object-fit: contain; } @media print { .report-doc .rd-logo { height: 26px; } .report-doc .rd-client-logo { height: 36px; } } .report-doc .rd-class { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #b42318; border: 1px solid #b42318; border-radius: 4px; padding: 2px 8px; } .report-doc h1 { font-size: 28px; margin: 18px 0 4px; } .report-doc .rd-sub { color: #555; margin: 0; font-family: "Segoe UI", sans-serif; } .report-doc .rd-sec { margin: 22px 0; } .report-doc .rd-sec h3 { font-family: "Segoe UI", sans-serif; font-size: 16px; color: #12203a; border-bottom: 1px solid #e2e8f2; padding-bottom: 5px; margin: 0 0 10px; } .report-doc h4 { font-family: "Segoe UI", sans-serif; font-size: 14px; margin: 12px 0 4px; color: #1f56cf; } .report-doc h4 span { color: #999; font-weight: 400; } .report-doc .rd-muted { color: #777; } .report-doc table.rd-info { width: 100%; border-collapse: collapse; font-family: "Segoe UI", sans-serif; font-size: 14px; } .report-doc .rd-info th { text-align: left; width: 190px; color: #555; font-weight: 600; padding: 5px 10px 5px 0; vertical-align: top; } .report-doc .rd-info td { padding: 5px 0; } .report-doc .rd-exec { font-size: 15px; } .report-doc .rd-exec h4 { color: #12203a; } .report-doc .rd-ioc-cat ul, .report-doc .rd-tl, .report-doc .rd-mitre, .report-doc .rd-reco, .report-doc .rd-journal { margin: 4px 0 10px; padding-left: 20px; } .report-doc .rd-journal li { font-family: "Segoe UI", sans-serif; font-size: 13.5px; margin: 6px 0; } .report-doc .rd-tbl { width: 100%; border-collapse: collapse; margin: 8px 0 14px; font-family: "Segoe UI", sans-serif; font-size: 13px; } .report-doc .rd-tbl th, .report-doc .rd-tbl td { border: 1px solid #d8dee6; padding: 6px 9px; text-align: left; vertical-align: top; } .report-doc .rd-tbl th { background: #f1f5fb; } .report-doc .rd-cat-row td { background: #e7edf6; font-weight: 800; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: #12203a; } /* ============ EBIOS Risk Manager ============ */ .nav-pill { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; background: color-mix(in srgb, var(--violet) 24%, transparent); color: var(--text); padding: 2px 6px; border-radius: 999px; vertical-align: middle; } .eb-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } .eb-title { flex: 1; min-width: 240px; } .eb-study { width: 100%; background: var(--bg-soft); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; font-size: 16px; font-weight: 600; } .eb-study:focus { outline: none; border-color: var(--accent); } .eb-actions { display: flex; gap: 8px; flex-wrap: wrap; } .eb-steps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .eb-step { display: flex; align-items: center; gap: 8px; background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-dim); border-radius: 999px; padding: 7px 14px 7px 8px; cursor: pointer; font: inherit; font-size: 13px; transition: .15s; } .eb-step:hover { border-color: var(--accent); color: var(--text); } .eb-step-n { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border); display: grid; place-items: center; font-weight: 700; font-size: 12px; } .eb-step.active { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--violet)); } .eb-step.active .eb-step-n { background: rgba(255,255,255,.25); border-color: transparent; color: #fff; } .eb-step.done .eb-step-n { background: var(--accent); border-color: var(--accent); color: #fff; } .eb-intro { background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; } .eb-intro h3 { margin: 0 0 5px; font-size: 17px; } .eb-intro p { margin: 0; color: var(--text-dim); font-size: 14px; } /* Bulles explicatives (tooltips) + glossaire automatique */ .gl { border-bottom: 1px dotted var(--accent); cursor: help; } .gl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } .gl-i { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--accent); color: var(--accent); font-size: 11px; font-weight: 800; line-height: 1; cursor: help; vertical-align: middle; margin-left: 7px; flex: none; } .gl-i:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); } .gl-i:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .tip-bubble { position: fixed; z-index: 400; max-width: 300px; background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 12.5px; line-height: 1.45; font-weight: 400; box-shadow: 0 10px 28px rgba(23,60,130, .3); opacity: 0; visibility: hidden; transform: translateY(2px); transition: opacity .12s ease, transform .12s ease; pointer-events: none; } .tip-bubble.show { opacity: 1; visibility: visible; transform: none; } /* ===== Programmes de conformité (collaboratif) ===== */ .prog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 18px; } .prog-card { display: flex; flex-direction: column; gap: 6px; text-align: left; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; color: var(--text); font-family: inherit; box-shadow: var(--shadow-sm); transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; } .prog-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); } .prog-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); } .prog-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .prog-card-t { font-weight: 700; font-size: 14.5px; } .prog-card-sub { font-size: 12px; color: var(--text-dim); } .prog-create { border: 1px dashed var(--border); border-radius: var(--radius); padding: 16px; margin-top: 6px; } .prog-create h4 { margin: 0 0 6px; } .prog-create-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .prog-create-row input, .prog-create-row select { flex: 1; min-width: 160px; } .prog-add { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .prog-add input { flex: 1; min-width: 180px; } .prog-member { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 10px; background: color-mix(in srgb, var(--bg-card) 55%, transparent); } .prog-member-h { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; } .prog-m-nom { flex: 1; font-weight: 600; } .prog-m-role { flex: none; width: 170px; } .prog-m-mail { width: 100%; margin-bottom: 10px; } .prog-domaines { display: flex; flex-wrap: wrap; gap: 6px; } .prog-dom { border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-dim); font: inherit; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: background .13s ease, color .13s ease, border-color .13s ease; } .prog-dom:hover { color: var(--text); border-color: var(--text-dim); } .prog-dom.on { background: linear-gradient(135deg, var(--accent), var(--violet)); color: #fff; border-color: transparent; } .prog-actbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } .prog-acting { font-size: 13px; color: var(--text-dim); display: flex; gap: 8px; align-items: center; } .prog-acting select { min-width: 220px; } .prog-tasks { display: flex; flex-direction: column; gap: 10px; } .prog-task { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 13px 15px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bg-card) 55%, transparent); } .prog-task:hover { background: var(--bg-card); } .prog-task-main { flex: 1; min-width: 0; } .prog-task-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 5px; } .prog-task-meta { font-size: 12px; color: var(--text-dim); margin-top: 6px; } .prog-task-act { display: flex; flex-direction: column; gap: 7px; flex: none; width: 320px; max-width: 46%; } .prog-risk { background: color-mix(in srgb, var(--crit) 12%, transparent); border: 1px solid color-mix(in srgb, var(--crit) 34%, transparent); border-radius: var(--radius-sm); padding: 11px 14px; font-size: 13.5px; margin: 12px 0; } @media (max-width: 760px) { .prog-task { flex-direction: column; } .prog-task-act { width: 100%; max-width: none; } } /* Assistant de rédaction des courriers */ .doc-ai { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; padding: 12px 13px; border: 1px dashed color-mix(in srgb, var(--violet) 42%, var(--border)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--violet) 6%, transparent); } .doc-ai-desc { width: 100%; resize: vertical; } .doc-sendto { margin-top: 16px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 6%, transparent); } .doc-sendto-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-weight: 700; font-size: 14px; margin-bottom: 8px; } .doc-sendto-i { font-size: 13.5px; margin: 0 0 8px; } .doc-sendto-n { font-size: 12.5px; color: var(--text-dim); margin: 6px 0 0; } /* Analyse approfondie de l'appareil (agent transparent) */ .ds-steps { font-size: 14px; margin-bottom: 14px; } .ds-steps p { margin: 4px 0; } .ds-code-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; font-size: 13px; margin: 6px 0; flex-wrap: wrap; } .ds-code { background: #0d1424; color: #cdd9ef; border: 1px solid #243049; border-radius: var(--radius-sm); padding: 12px 14px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 11.5px; line-height: 1.5; overflow-x: auto; white-space: pre; max-height: 230px; } .ds-input { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 12px; margin-top: 12px; resize: vertical; } .ds-list { margin: 6px 0 12px; padding-left: 20px; font-size: 14px; line-height: 1.55; } .ds-list li { margin: 6px 0; } .ds-verdict { font-weight: 700; padding: 10px 14px; border-radius: var(--radius-sm); margin: 14px 0 10px; } .ds-verdict.ds-crit { background: color-mix(in srgb, var(--crit) 12%, transparent); border: 1px solid color-mix(in srgb, var(--crit) 34%, transparent); color: var(--crit); } .ds-verdict.ds-mid { background: color-mix(in srgb, var(--warn) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent); } .ds-verdict.ds-ok { background: color-mix(in srgb, var(--ok) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent); color: var(--ok); } .ds-flist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .ds-f { padding: 11px 13px; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); border-left: 3px solid var(--border); font-size: 13.5px; line-height: 1.5; background: color-mix(in srgb, var(--bg-card) 55%, transparent); } .ds-f-crit { border-left-color: var(--crit); } .ds-f-mid { border-left-color: var(--warn); } .ds-f-ok { border-left-color: var(--ok); } .ds-reassure { background: color-mix(in srgb, var(--ok) 9%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); border-radius: var(--radius-sm); padding: 11px 14px; font-size: 13.5px; margin-bottom: 14px; } .ds-why2 { background: color-mix(in srgb, var(--brand-blue) 5%, var(--bg-soft)); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 15px 13px; font-size: 13.5px; line-height: 1.55; margin-bottom: 14px; } .ds-why2 p { margin: 7px 0; } .ds-why2-h { font-weight: 700; color: var(--text); margin-top: 0 !important; } .ds-why2-t { font-weight: 700; color: var(--accent-dark); } .ds-modes { display: inline-flex; gap: 6px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 3px; margin-bottom: 16px; } .ds-mode { border: 0; background: transparent; color: var(--text-dim); font: inherit; font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: background .13s ease, color .13s ease; } .ds-mode.on { background: linear-gradient(135deg, var(--accent), var(--violet)); color: #fff; } .ds-guide-l { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; } .ds-guide-l > input { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--accent); } .ds-guide-b { display: flex; gap: 11px; align-items: flex-start; min-width: 0; } .ds-guide-n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: 12px; font-weight: 800; display: grid; place-items: center; margin-top: 1px; } .ds-guide-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .ds-guide-t { font-weight: 700; font-size: 14.5px; } .ds-guide-w { font-size: 12.5px; color: var(--text-dim); font-style: italic; } .ds-guide-h { font-size: 13.5px; line-height: 1.5; } .ds-link { background: none; border: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; padding: 0; } /* Mon dossier d'incident (agrégateur) */ .dos-sel { margin-bottom: 16px; } .dos-sel label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-dim); font-weight: 600; max-width: 460px; } .dos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; } .dos-card { display: flex; flex-direction: column; gap: 3px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm); } .dos-ic { width: 40px; height: 40px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--violet) 15%, transparent)); color: var(--accent); } .dos-t { font-weight: 700; font-size: 13.5px; margin-top: 2px; } .dos-d { font-size: 12.5px; color: var(--text-dim); } .dos-letters { background: color-mix(in srgb, var(--accent) 7%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 8px; } .dos-letters h4 { margin: 0 0 10px; font-size: 14.5px; } .dos-letter-btns { display: flex; flex-wrap: wrap; gap: 8px; } /* Ma sécurité (tableau de bord particulier) */ .ms-card { cursor: pointer; text-align: left; font-family: inherit; color: var(--text); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; } .ms-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); } .ms-freq { margin-bottom: 12px; } .ms-freq-t { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin-bottom: 6px; } .ms-r-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); margin-bottom: 6px; cursor: pointer; font-size: 14px; } .ms-r-item > input { flex: none; width: 17px; height: 17px; accent-color: var(--accent); } .ms-r-item > span:not(.ms-r-date) { flex: 1; } .ms-r-item.done { background: color-mix(in srgb, var(--ok) 8%, transparent); border-color: color-mix(in srgb, var(--ok) 30%, var(--border)); } .ms-r-item.done > span:not(.ms-r-date) { color: var(--text-dim); } .ms-r-date { font-size: 11.5px; color: var(--ok); white-space: nowrap; } .ms-r-date.over { color: var(--warn); font-weight: 600; } .ms-r-date.todo { color: var(--text-dim); } .ms-r-item.over { background: color-mix(in srgb, var(--warn) 8%, transparent); border-color: color-mix(in srgb, var(--warn) 30%, var(--border)); } .ms-due-pill { font-size: 11.5px; font-weight: 800; color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent); border-radius: 999px; padding: 3px 10px; } /* Mes comptes & mots de passe — outil de test (k-anonymat) */ .cp-tool { border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border)); } .cp-pw-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0 6px; } .cp-pw-row .input { flex: 1; min-width: 200px; } .cp-pw-out { border-radius: var(--radius-sm); padding: 11px 13px; font-size: 13.5px; line-height: 1.5; margin-top: 4px; border: 1px solid var(--border); } .cp-pw-out.ds-crit { background: color-mix(in srgb, var(--crit) 12%, transparent); border-color: color-mix(in srgb, var(--crit) 34%, transparent); } .cp-pw-out.ds-mid { background: color-mix(in srgb, var(--warn) 12%, transparent); border-color: color-mix(in srgb, var(--warn) 34%, transparent); } .cp-pw-out.ds-ok { background: color-mix(in srgb, var(--ok) 10%, transparent); border-color: color-mix(in srgb, var(--ok) 32%, transparent); } .cp-note { font-size: 12px; color: var(--text-dim); margin: 6px 0 0; } /* Agent d'analyse (forensic) — côté web */ .fx-code-wrap { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .fx-code { font-size: 34px; font-weight: 800; letter-spacing: .18em; color: var(--accent-dark); background: color-mix(in srgb, var(--brand-blue, #2f6bed) 8%, transparent); border: 1px solid color-mix(in srgb, var(--brand-blue, #2f6bed) 30%, transparent); border-radius: 12px; padding: 8px 20px; font-variant-numeric: tabular-nums; } .fx-code.expired { opacity: .45; text-decoration: line-through; } .fx-code-info { font-size: 13px; color: var(--text-dim); flex: 1; min-width: 220px; } .fx-items { display: flex; flex-direction: column; gap: 8px; } .fx-item { text-align: left; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 14px; background: var(--bg-card); cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: border-color .15s ease, transform .12s ease; } .fx-item:hover { border-color: color-mix(in srgb, var(--brand-blue, #2f6bed) 35%, var(--border)); transform: translateY(-1px); } .fx-item-h { font-weight: 700; } .fx-item-m { font-size: 12px; color: var(--text-dim); } .fx-detail-card { margin-top: 14px; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: var(--bg-soft); } .fx-detail-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; } .fx-detail-head h4 { margin: 0; } .fx-ai { margin-top: 12px; } .fx-report { margin-top: 6px; } /* Bouton d'auto-remplissage IA (mini) */ .ai-mini { background: color-mix(in srgb, var(--violet) 16%, transparent); border: 1px solid color-mix(in srgb, var(--violet) 42%, transparent); color: var(--text); border-radius: 8px; padding: 5px 9px; cursor: pointer; font-size: 13px; margin-right: 4px; transition: background .15s ease, transform .12s ease; } .ai-mini:hover { background: color-mix(in srgb, var(--violet) 28%, transparent); transform: translateY(-1px); } .ai-mini[data-busy] { opacity: .55; cursor: progress; } /* Personnalisation (logo client) */ .brd-preview { display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 14px; min-height: 96px; } .brd-preview img { max-height: 90px; max-width: 100%; width: auto; object-fit: contain; } .brd-empty { background: var(--surface-2, rgba(127,127,127,.08)); border: 1px dashed var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 14px; text-align: center; color: var(--text-dim); font-size: 14px; } .brd-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .brd-upload { cursor: pointer; } .brd-note { margin: 12px 0 0; font-size: 12.5px; color: var(--text-dim); } /* Nom d'organisation en lecture seule (miroir du serveur) dans la Personnalisation. */ .brd-orgname { font-size: 15px; font-weight: 700; color: var(--text); padding: 9px 12px; background: var(--bg-soft, color-mix(in srgb, var(--accent) 5%, transparent)); border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); } .brd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } @media (max-width: 760px) { .brd-grid { grid-template-columns: 1fr; } } .brd-grid input.input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-soft); color: var(--text); font: inherit; font-size: 14px; } .brd-grid input.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 18%, transparent); } .brd-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .brd-swatch { width: 34px; height: 34px; border-radius: 9px; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--border) inset; cursor: pointer; padding: 0; position: relative; transition: transform .1s ease; } .brd-swatch:hover { transform: scale(1.08); } .brd-swatch.on { box-shadow: 0 0 0 2px var(--bg-card) inset, 0 0 0 2px var(--accent); } .brd-swatch.brd-custom { display: grid; place-items: center; overflow: hidden; } .brd-custom input[type=color] { position: absolute; inset: 0; opacity: 0; cursor: pointer; border: 0; padding: 0; } .brd-custom .gi-pen { color: #fff; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.45)); pointer-events: none; } .brd-foot { margin-top: 16px; } /* Co-branding dans l'en-tête de l'app */ .client-brand { display: inline-flex; align-items: center; gap: 10px; margin-left: 4px; min-width: 0; } .client-brand .cb-x { width: 1px; height: 24px; background: var(--border); flex: none; } .client-brand .cb-logo { height: 26px; width: auto; max-width: 130px; object-fit: contain; display: block; } .client-brand .cb-name { font-weight: 700; font-size: 14px; color: var(--text); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 640px) { .client-brand .cb-name { display: none; } .client-brand .cb-logo { height: 22px; max-width: 96px; } } /* Nom de l'organisation dans les documents exportés */ .rd-client-name { font-weight: 800; font-size: 17px; color: var(--brand-blue); letter-spacing: .02em; } /* Horloge réglementaire (compte à rebours 72 h CNIL) */ .v72 { font-family: var(--mono); font-size: 11.5px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; } .v72 [class^="gi-"] { width: .95em; height: .95em; margin-right: 0; } /* Journal d'audit : voir le bloc « enrichi » plus bas (.aud-bar/.aud-seg…). */ /* Registre de preuves (conformité) */ .cf-ev { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; position: relative; } .cf-ev-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; background: color-mix(in srgb, var(--brand-blue) 8%, var(--bg-soft)); border: 1px solid color-mix(in srgb, var(--brand-blue) 22%, var(--border)); color: var(--text); border-radius: 999px; padding: 3px 5px 3px 9px; } .cf-ev-chip [class^="gi-"] { width: 13px; height: 13px; color: var(--accent); margin: 0; } .cf-ev-x { border: 0; background: none; color: var(--text-dim); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 3px; } .cf-ev-x:hover { color: var(--crit); } .cf-ev-add { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--accent-dark); background: none; border: 1px dashed var(--border); border-radius: 999px; padding: 4px 10px; cursor: pointer; } .cf-ev-add:hover { border-color: var(--accent); background: var(--bg-soft); } .cf-ev-add [class^="gi-"] { width: 13px; height: 13px; margin: 0; } .cf-ev-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: min(430px, 92vw); background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 12px 14px; } .cf-ev-pop-h { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; margin: 8px 0 6px; } .cf-ev-pop-h:first-child { margin-top: 0; } .cf-ev-picklist { display: flex; flex-direction: column; gap: 4px; max-height: 170px; overflow: auto; } .cf-ev-pick { display: flex; align-items: center; gap: 7px; text-align: left; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; cursor: pointer; font-size: 13px; color: var(--text); } .cf-ev-pick:hover { border-color: var(--accent); } .cf-ev-pick [class^="gi-"] { width: 14px; height: 14px; color: var(--accent); margin: 0; } .cf-ev-t { margin-left: auto; font-size: 11px; color: var(--text-dim); } .cf-ev-new { display: flex; flex-direction: column; gap: 7px; } .cf-ev-new .input { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft); color: var(--text); font: inherit; font-size: 13px; } .cf-ev-new-act { display: flex; gap: 8px; } .cf-reg-list { display: flex; flex-direction: column; } .cf-reg-item { display: flex; align-items: center; gap: 11px; padding: 9px 4px; border-top: 1px solid var(--border-soft); } .cf-reg-item:first-child { border-top: 0; } .cf-reg-ic { width: 30px; height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--brand-blue) 10%, var(--bg-soft)); color: var(--accent); display: grid; place-items: center; flex: none; } .cf-reg-ic [class^="gi-"] { width: 16px; height: 16px; margin: 0; } .cf-reg-b { flex: 1; min-width: 0; display: flex; flex-direction: column; } .cf-reg-t { font-weight: 600; font-size: 14px; } .cf-reg-m { font-size: 12px; color: var(--text-dim); } .cf-reg-cov { font-family: var(--mono); font-size: 11.5px; color: var(--accent-dark); white-space: nowrap; flex: none; } /* Mapping relationnel */ .cf-map-tok { font-family: var(--mono); font-size: 11px; color: var(--accent-dark); background: color-mix(in srgb, var(--brand-blue) 7%, transparent); border: 1px solid color-mix(in srgb, var(--brand-blue) 18%, var(--border)); border-radius: 6px; padding: 1px 6px; margin: 0 4px 2px 0; cursor: pointer; } .cf-map-tok:hover { background: color-mix(in srgb, var(--brand-blue) 16%, transparent); } .cf-map-n { font-family: var(--mono); font-size: 11px; color: var(--text-dim); } .cf-map-grp { margin-top: 12px; } .cf-map-grp-h { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 6px; } .cf-map-item { display: block; width: 100%; text-align: left; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; margin-bottom: 5px; font-size: 13px; color: var(--text); cursor: pointer; } .cf-map-item:hover { border-color: var(--accent); } .cf-map-item-fw { font-family: var(--mono); font-size: 11px; color: var(--accent-dark); margin-right: 8px; } /* Palette de commandes / recherche globale (Ctrl+K) */ .cmdk-trigger { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; color: var(--text-dim); cursor: pointer; font: inherit; font-size: 13px; } .cmdk-trigger:hover { border-color: var(--accent); color: var(--text); } .cmdk-trigger svg { width: 15px; height: 15px; flex: none; } .cmdk-trigger kbd { font-family: var(--mono); font-size: 10.5px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; color: var(--text-dim); } @media (max-width: 720px) { .cmdk-trigger span, .cmdk-trigger kbd { display: none; } .cmdk-trigger { padding: 8px; } } /* ---- Centre d'alertes (cloche en-tête) ---- */ .bell-trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 34px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; color: var(--text-dim); cursor: pointer; } .bell-trigger:hover { border-color: var(--accent); color: var(--text); } .bell-trigger svg { width: 17px; height: 17px; } .bell-trigger.has-alerts { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 45%, var(--border)); } .bell-badge { position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--crit); color: #fff; font: 600 11px/17px var(--mono); text-align: center; box-shadow: 0 0 0 2px var(--bg); } .alrt-panel { position: fixed; z-index: 1200; width: min(360px, calc(100vw - 16px)); max-height: min(70vh, 560px); overflow: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 16px 44px rgba(23,60,130,.28); } .alrt-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; position: sticky; top: 0; background: var(--bg-card); } .alrt-head h4 { margin: 0; font-size: 14px; } .alrt-seen { background: none; border: none; color: var(--accent); font-size: 12px; cursor: pointer; padding: 2px 4px; } .alrt-seen:hover { text-decoration: underline; } .alrt-list { list-style: none; margin: 0; padding: 0 8px 6px; display: flex; flex-direction: column; gap: 5px; } .alrt-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); background: var(--bg-soft); border: 1px solid var(--border-soft); border-left: 3px solid var(--text-dim); } .alrt-crit { border-left-color: var(--crit); } .alrt-warn { border-left-color: var(--warn); } .alrt-info { border-left-color: var(--accent); } .alrt-new { background: color-mix(in srgb, var(--accent) 7%, var(--bg-soft)); } .alrt-ic { flex: none; width: 20px; display: grid; place-items: center; padding-top: 1px; } .alrt-ic i { width: 15px; height: 15px; } .alrt-crit .alrt-ic i { background: var(--crit); } .alrt-warn .alrt-ic i { background: var(--warn); } .alrt-info .alrt-ic i { background: var(--accent); } .alrt-body { flex: 1; min-width: 0; } .alrt-t { display: block; font-size: 13px; line-height: 1.35; } .alrt-m { display: block; font-size: 11px; color: var(--text-dim); font-family: var(--mono); margin-top: 2px; } .alrt-go { flex: none; background: none; border: none; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 2px; white-space: nowrap; } .alrt-go:hover { text-decoration: underline; } .alrt-empty { display: flex; align-items: center; gap: 9px; padding: 14px 10px; font-size: 13px; color: var(--text-dim); } .alrt-empty i { width: 17px; height: 17px; background: var(--ok); flex: none; } .alrt-foot { padding: 8px 14px 12px; border-top: 1px solid var(--border-soft); margin-top: 4px; } .alrt-foot-link { background: none; border: none; color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 2px 0; } .alrt-foot-link:hover { text-decoration: underline; } /* ========================================================================= MESSAGERIE d'équipe + commentaires ancrés ========================================================================= */ .msgr-tabs { display: flex; gap: 6px; margin-bottom: 12px; } .msgr-tab { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 5px 14px; font-size: 13px; color: var(--text-dim); cursor: pointer; } .msgr-tab.on { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); color: var(--text); font-weight: 600; } .msgr-tabn { font-family: var(--mono); font-size: 11px; background: var(--crit); color: #fff; border-radius: 999px; padding: 0 6px; margin-left: 4px; } .msgr-compose { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 16px; } .msgr-compose-top { margin-bottom: 8px; } .msgr-compose-top .msgr-to, .cmt-d-form .msgr-to { max-width: 320px; } .msgr-text { width: 100%; resize: vertical; } .msgr-compose-b { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; } .msgr-hint { font-size: 12px; color: var(--text-dim); } .msgr-ro { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); background: var(--bg-soft); border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 14px; } .msgr-ro i { width: 15px; height: 15px; background: var(--text-dim); flex: none; } .msgr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .msgr-msg { display: flex; gap: 10px; } .msgr-msg.mine { flex-direction: row-reverse; } .msgr-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 13px var(--mono); color: #fff; background: linear-gradient(135deg, var(--accent), var(--violet)); } .msgr-b { flex: 1; min-width: 0; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 12px; padding: 8px 12px; max-width: 76%; } .msgr-msg.mine .msgr-b { background: color-mix(in srgb, var(--accent) 9%, var(--bg-card)); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); } .msgr-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 3px; } .msgr-ts { color: var(--text-dim); font-family: var(--mono); font-size: 11px; margin-left: auto; } .msgr-badge { font-family: var(--mono); font-size: 10.5px; padding: 1px 7px; border-radius: 999px; letter-spacing: .02em; } .msgr-gen { background: color-mix(in srgb, var(--text-dim) 16%, transparent); color: var(--text-dim); } .msgr-nom { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); } .msgr-tx { font-size: 13.5px; line-height: 1.4; word-wrap: break-word; } .msgr-at { color: var(--accent); font-weight: 600; } .msgr-anchor { margin-top: 6px; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--accent); background: none; border: none; cursor: pointer; padding: 2px 0; } .msgr-anchor i { width: 13px; height: 13px; background: var(--accent); } .msgr-anchor:hover { text-decoration: underline; } .msgr-empty { text-align: center; color: var(--text-dim); font-size: 13.5px; padding: 22px 8px; } .msgr-del { background: none; border: none; cursor: pointer; color: var(--text-dim); padding: 2px 4px; margin-left: 4px; opacity: .45; } .msgr-del:hover { color: var(--crit); opacity: 1; } .msgr-del i { width: 12px; height: 12px; background: currentColor; } .msgr-restore { background: none; border: none; cursor: pointer; color: var(--accent); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; margin-left: auto; } .msgr-restore i { width: 13px; height: 13px; background: currentColor; } .msgr-trashed .msgr-b { opacity: .8; border-style: dashed; } .msgr-delmeta { display: block; font-size: 11px; color: var(--text-dim); margin-top: 4px; font-style: italic; } .msgr-tabn-mut { background: var(--text-dim) !important; } /* Bouton commentaire (posé sur les entités) */ .cmt-btn { position: relative; display: inline-flex; align-items: center; gap: 3px; background: none; border: none; cursor: pointer; color: var(--text-dim); padding: 4px; border-radius: 6px; } .cmt-btn:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); } .cmt-btn i { width: 15px; height: 15px; background: currentColor; } .cmt-btn.has { color: var(--accent); } .cmt-n { font-family: var(--mono); font-size: 10.5px; font-weight: 600; min-width: 14px; } /* Volet de discussion ancrée */ .cmt-drawer { position: fixed; top: 0; right: 0; width: min(400px, 92vw); height: 100vh; z-index: 1300; overflow: auto; background: var(--bg); border-left: 1px solid var(--border); box-shadow: -14px 0 40px rgba(23,60,130,.24); display: flex; flex-direction: column; animation: cmt-in .18s ease; } @keyframes cmt-in { from { transform: translateX(20px); opacity: .6; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .cmt-drawer { animation: none; } } .cmt-d-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); } .cmt-d-k { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); } .cmt-d-t { font-size: 15px; font-weight: 700; margin-top: 2px; } .cmt-d-x { background: none; border: none; cursor: pointer; color: var(--text-dim); padding: 4px; } .cmt-d-x i { width: 18px; height: 18px; background: currentColor; } .cmt-d-list { flex: 1; padding: 16px 18px; } .cmt-d-form { border-top: 1px solid var(--border); padding: 12px 18px 18px; display: flex; flex-direction: column; gap: 8px; position: sticky; bottom: 0; background: var(--bg); } .cmt-d-form .btn { align-self: flex-end; } @media (max-width: 640px) { .msgr-b { max-width: 84%; } } /* ========================================================================= RAPPORTS double audience (vue + bascule + rapport dirigeant) ========================================================================= */ .rpt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } .rpt-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .rpt-card-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--violet)); margin-bottom: 4px; } .rpt-card-ic i { width: 22px; height: 22px; background: #fff; } .rpt-card h4 { margin: 0; font-size: 16px; } .rpt-card p { margin: 0 0 6px; font-size: 13.5px; color: var(--text-dim); line-height: 1.45; } /* Bascule d'audience dans la modale */ .rpt-wrap { width: 100%; max-width: 820px; margin: 0 auto; } .rpt-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; } .rpt-seg { display: inline-flex; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 3px; } .rpt-seg-b { background: none; border: none; border-radius: 999px; padding: 6px 16px; font-size: 13px; color: var(--text-dim); cursor: pointer; } .rpt-seg-b.on { background: var(--bg-card); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(23,60,130,.12); } /* Rapport dirigeant */ .rpt-hero-sec { display: flex; gap: 14px; flex-wrap: wrap; } .rpt-big { flex: 1; min-width: 150px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--bg-soft)), color-mix(in srgb, var(--violet) 10%, var(--bg-soft))); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; } .rpt-big-v { font-size: 30px; font-weight: 800; line-height: 1; } .rpt-big-v small { font-size: 15px; font-weight: 600; color: var(--text-dim); } .rpt-big-l { font-size: 12.5px; color: var(--text-dim); margin-top: 6px; } .rpt-trend { font-size: 14px; background: var(--bg-soft); border-left: 3px solid var(--accent); padding: 10px 14px; border-radius: var(--radius-sm); } .rpt-prio { margin: 0; padding-left: 0; list-style: none; counter-reset: rp; display: flex; flex-direction: column; gap: 10px; } .rpt-prio li { counter-increment: rp; position: relative; padding-left: 40px; } .rpt-prio li::before { content: counter(rp); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--violet)); color: #fff; font: 700 13px var(--mono); display: grid; place-items: center; } .rpt-prio-t { display: block; font-weight: 700; font-size: 14.5px; } .rpt-prio-w { display: block; font-size: 13px; color: var(--text-dim); margin-top: 1px; } .rpt-conseils { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; } .rpt-conseils li { font-size: 14px; line-height: 1.5; } @media print { .rpt-switch, .no-print { display: none !important; } } /* ========================================================================= GOUVERNANCE — domaines de privilèges (équipe) + journal d'audit enrichi ========================================================================= */ .tm-row-wrap { border: 1px solid var(--border-soft); border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; } .tm-row-wrap .tm-row { margin: 0; border: none; border-radius: 0; } .tm-scopes { padding: 10px 14px; background: color-mix(in srgb, var(--accent) 4%, var(--bg-soft)); border-top: 1px dashed var(--border); } .tm-scopes-l { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); } .tm-scopes-l i { width: 14px; height: 14px; background: var(--text-dim); } .tm-scope-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-left: 12px; cursor: pointer; } .tm-scope-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .tm-scope-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); cursor: pointer; } .tm-scope-chip i { width: 13px; height: 13px; background: var(--text-dim); } .tm-scope-chip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); } .tm-scope-chip.on i { background: var(--accent); } .tm-scope-chip input { position: absolute; opacity: 0; width: 0; height: 0; } .tm-scope-chip.tm-scope-off { opacity: .5; cursor: not-allowed; } .tm-scopes-h { margin: 8px 0 0; font-size: 12px; color: var(--text-dim); } .tm-scopes-ro { background: var(--bg-soft); } .aud-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .aud-seg { display: inline-flex; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 3px; } .aud-seg-b { background: none; border: none; border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--text-dim); cursor: pointer; } .aud-seg-b.on { background: var(--bg-card); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(23,60,130,.12); } .aud-filter { display: inline-flex; align-items: center; gap: 6px; } .aud-filter i { width: 14px; height: 14px; background: var(--text-dim); } .aud-filter select { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; color: var(--text); font: inherit; font-size: 13px; } .aud-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .aud-item { display: flex; align-items: flex-start; gap: 10px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 9px 12px; } .aud-item.aud-arch { opacity: .72; border-style: dashed; } .aud-ic { flex: none; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 10%, transparent); } .aud-ic i { width: 14px; height: 14px; background: var(--accent); } .aud-body { flex: 1; min-width: 0; } .aud-head { display: block; font-size: 13.5px; } .aud-det { display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 1px; } .aud-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; } .aud-who { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; } .aud-who i { width: 12px; height: 12px; background: currentColor; } .aud-when { font-family: var(--mono); font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; } @media (max-width: 560px) { .aud-meta { align-items: flex-start; } .aud-item { flex-wrap: wrap; } .aud-meta { width: 100%; flex-direction: row; justify-content: space-between; margin-top: 4px; } } /* ========================================================================= GESTION DE CRISE (cellule / war-room) ========================================================================= */ .btn-danger { background: var(--crit); color: #fff; border: 1px solid var(--crit); } .btn-danger:hover { background: color-mix(in srgb, var(--crit) 88%, #000); } .nav-tab-crise i { background: var(--crit) !important; } .crise-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.6); animation: crise-pulse 1.6s infinite; } @keyframes crise-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } } @media (prefers-reduced-motion: reduce) { .crise-dot { animation: none; } } /* Bannière persistante */ .crise-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1250; display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg, var(--crit), color-mix(in srgb, var(--crit) 70%, var(--violet))); color: #fff; padding: 9px 18px; font-size: 14px; box-shadow: 0 -4px 20px rgba(23,60,130,.25); } .crise-banner b { letter-spacing: .04em; } .crise-b-clock { font-family: var(--mono); font-weight: 700; background: rgba(0,0,0,.2); padding: 2px 8px; border-radius: 6px; margin-left: 4px; } .crise-b-go { margin-left: auto; background: #fff; color: var(--crit); border: none; border-radius: 8px; padding: 5px 12px; font-weight: 700; font-size: 12.5px; cursor: pointer; } body.crise-on .app-main, body.crise-on .app-shell { padding-bottom: 52px; } /* Héros */ .crise-hero { border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 16px; } .crise-off { display: flex; gap: 18px; align-items: flex-start; background: var(--bg-soft); } .crise-hero-ic { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--ok) 16%, transparent); } .crise-hero-ic i { width: 24px; height: 24px; background: var(--ok); } .crise-hero-b h3 { margin: 0 0 4px; } .crise-hero-b p { margin: 0 0 12px; font-size: 13.5px; color: var(--text-dim); max-width: 70ch; } .crise-declare { display: flex; gap: 8px; flex-wrap: wrap; } .crise-declare select, .crise-declare input { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; color: var(--text); font: inherit; font-size: 13.5px; } .crise-declare input { flex: 1; min-width: 220px; } .crise-live { background: linear-gradient(135deg, color-mix(in srgb, var(--crit) 14%, var(--bg-soft)), color-mix(in srgb, var(--violet) 10%, var(--bg-soft))); border-color: color-mix(in srgb, var(--crit) 40%, var(--border)); } .crise-lvl-r-high.crise-live { background: linear-gradient(135deg, color-mix(in srgb, var(--high) 14%, var(--bg-soft)), var(--bg-soft)); } .crise-lvl-r-mid.crise-live { background: linear-gradient(135deg, color-mix(in srgb, var(--warn) 12%, var(--bg-soft)), var(--bg-soft)); } .crise-hero-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .crise-live-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--crit); color: #fff; font-weight: 700; font-size: 12.5px; letter-spacing: .04em; padding: 5px 12px; border-radius: 999px; margin-right: auto; } .crise-title-in, .crise-sys-in { display: block; width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; color: var(--text); font: inherit; margin-bottom: 8px; } .crise-title-in { font-size: 17px; font-weight: 700; } .crise-sys-in { font-size: 13.5px; } /* Horloges */ .crise-clocks { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; } .crise-clock { flex: 1; min-width: 180px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; } .crise-clock.r-crit { border-color: color-mix(in srgb, var(--crit) 55%, var(--border)); } .crise-clock-l { font-size: 11.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; } .crise-clock-v { font-family: var(--mono); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; } .crise-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 0; } .crise-col { min-width: 0; } @media (max-width: 900px) { .crise-grid { grid-template-columns: 1fr; } } /* Contexte siphonné */ .crise-ctx { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .crise-ctx-c { text-align: left; cursor: pointer; background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 11px 13px; display: flex; flex-direction: column; gap: 4px; } .crise-ctx-c:hover { border-color: var(--accent); } .crise-ctx-c.r-crit { border-left-color: var(--crit); } .crise-ctx-c.r-mid { border-left-color: var(--warn); } .crise-ctx-h { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em; } .crise-ctx-h i { width: 14px; height: 14px; background: currentColor; } .crise-ctx-b { font-size: 13.5px; } .crise-ctx-go { font-size: 11.5px; color: var(--accent); font-weight: 600; } /* Rôles */ .crise-roles { display: flex; flex-direction: column; gap: 8px; } .crise-role { display: flex; align-items: center; gap: 10px; justify-content: space-between; } .crise-role-l { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; } .crise-role-l i { width: 15px; height: 15px; background: var(--accent); } .crise-role select { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; color: var(--text); font: inherit; font-size: 13px; min-width: 160px; } /* Réflexes */ .crise-reflex { display: flex; flex-direction: column; gap: 6px; } .crise-rx { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-card); cursor: pointer; } .crise-rx input { margin-top: 2px; flex: none; } .crise-rx-t { flex: 1; font-size: 13px; } .crise-rx.done { background: color-mix(in srgb, var(--ok) 8%, var(--bg-card)); border-color: color-mix(in srgb, var(--ok) 30%, var(--border)); } .crise-rx.done .crise-rx-t { color: var(--text-dim); } .crise-rx-m { flex: none; font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); } /* Main courante */ .crise-add { display: flex; gap: 8px; margin-bottom: 10px; } .crise-add input { flex: 1; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; color: var(--text); font: inherit; } .crise-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; max-height: 420px; overflow: auto; } .crise-log-i { display: flex; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm); background: var(--bg-card); border: 1px solid var(--border-soft); border-left: 3px solid var(--text-dim); } .crise-k-phase { border-left-color: var(--accent); } .crise-k-reflex { border-left-color: var(--ok); } .crise-log-t { flex: none; font-family: var(--mono); font-size: 11px; color: var(--text-dim); width: 118px; } .crise-log-b { flex: 1; min-width: 0; display: flex; flex-direction: column; } .crise-log-x { font-size: 13px; } .crise-log-w { font-size: 11px; color: var(--text-dim); } .crise-empty { color: var(--text-dim); font-size: 13px; padding: 10px; } /* Contacts + liens */ .crise-contacts { display: flex; flex-direction: column; gap: 8px; } .crise-ct { display: flex; align-items: center; gap: 10px; justify-content: space-between; } .crise-ct-l { font-size: 13px; } .crise-ct-v { font-family: var(--mono); font-size: 12.5px; color: var(--accent); } .crise-ct input { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; color: var(--text); font: inherit; font-size: 12.5px; min-width: 180px; } .crise-links { display: flex; flex-wrap: wrap; gap: 8px; } .crise-link { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; font-size: 13px; color: var(--text); cursor: pointer; } .crise-link:hover { border-color: var(--accent); color: var(--accent); } .crise-link i { width: 14px; height: 14px; background: currentColor; } /* Communication de crise */ .crise-comm-sel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; color: var(--text); font: inherit; font-size: 13px; } .crise-comm-tx { width: 100%; resize: vertical; font-size: 13px; line-height: 1.5; white-space: pre-wrap; } .crise-comm-act { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } /* Registre des crises */ .crise-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .crise-hist-i { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); } .crise-hist-b { flex: 1; min-width: 0; } .crise-hist-t { display: block; font-size: 14px; font-weight: 600; } .crise-hist-m { display: block; font-size: 12px; color: var(--text-dim); font-family: var(--mono); margin-top: 2px; } /* ---------- Palier 1 : poste de commandement (gravité, cellule, plan d'action, SITREP, sortie) ---------- */ /* Moteur de gravité (scoring NIST) */ .crise-sev { margin-top: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; } .crise-sev-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; font-weight: 600; font-size: 13.5px; } .crise-sev-h > span:first-child { display: inline-flex; align-items: center; gap: 7px; } .crise-sev-h i { width: 15px; height: 15px; background: var(--crit); } .crise-sev-hint { font-weight: 400; font-size: 11.5px; color: var(--text-dim); } .crise-sev-axes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; } .crise-sev-ax { display: flex; flex-direction: column; gap: 4px; } .crise-sev-axl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); font-weight: 600; } .crise-sev-axl i { width: 13px; height: 13px; background: var(--accent); } .crise-sev-ax select { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; color: var(--text); font: inherit; font-size: 12.5px; } .crise-declare-btn { margin-top: 14px; } .crise-sev-tag { font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); background: var(--bg-card); border: 1px solid var(--border-soft); padding: 3px 8px; border-radius: 6px; } .crise-hero-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; } /* Réévaluation de la gravité */ .crise-reeval { background: var(--bg-card); border: 1px solid color-mix(in srgb, var(--crit) 30%, var(--border)); border-radius: var(--radius-sm); padding: 12px 14px; margin: 4px 0 12px; } .crise-reeval .crise-sev-axes { margin-bottom: 10px; } /* Cellule à deux niveaux + RACI + suppléants */ .crise-cellgrp { margin-top: 12px; } .crise-cellgrp:first-child { margin-top: 0; } .crise-cellgrp-h { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; margin-bottom: 4px; } .crise-cellgrp-h i { width: 15px; height: 15px; background: var(--accent); } .crise-role2 { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; } .crise-role2-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .crise-role2-d { margin: 3px 0 8px; font-size: 12px; color: var(--text-dim); } .crise-role2-sel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .crise-role2-sel label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-dim); } .crise-role2-sel select { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; color: var(--text); font: inherit; font-size: 12.5px; } .crise-role2-ct { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--accent); } .crise-role2-ct i { width: 12px; height: 12px; background: currentColor; } .crise-raci { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; padding: 2px 7px; border-radius: 999px; white-space: nowrap; } .crise-raci-A { color: var(--violet); background: color-mix(in srgb, var(--violet) 15%, transparent); } .crise-raci-R { color: var(--ok); background: color-mix(in srgb, var(--ok) 15%, transparent); } .crise-raci-C { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent); } .crise-raci-I { color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 15%, transparent); } @media (max-width: 520px) { .crise-role2-sel { grid-template-columns: 1fr; } } /* Plan d'action (tâches assignées) */ .crise-task-add { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 8px; margin-bottom: 10px; } .crise-task-add input, .crise-task-add select { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; color: var(--text); font: inherit; font-size: 12.5px; } @media (max-width: 720px) { .crise-task-add { grid-template-columns: 1fr 1fr; } } .crise-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .crise-task { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; background: var(--bg-card); border: 1px solid var(--border-soft); border-left: 3px solid var(--text-dim); border-radius: var(--radius-sm); } .crise-task-doing { border-left-color: var(--accent); } .crise-task-done { border-left-color: var(--ok); } .crise-task-late { border-left-color: var(--crit); } .crise-task-st { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-soft); color: var(--text); cursor: pointer; font-size: 12px; line-height: 1; } .crise-task-done .crise-task-st { background: var(--ok); color: #fff; border-color: var(--ok); } .crise-task-b { flex: 1; min-width: 0; display: flex; flex-direction: column; } .crise-task-x { font-size: 13px; } .crise-task-done .crise-task-x { text-decoration: line-through; color: var(--text-dim); } .crise-task-m { font-size: 11px; color: var(--text-dim); margin-top: 2px; } .crise-task-cat { font-weight: 700; color: var(--accent); } .crise-task-late .crise-task-due { color: var(--crit); font-weight: 700; } .crise-task-del { flex: none; background: none; border: none; color: var(--text-dim); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; } .crise-task-del:hover { color: var(--crit); } /* SITREP */ .crise-sitrep-tx { width: 100%; resize: vertical; font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; font-family: var(--mono); } /* Réflexes spécifiques au type + tags */ .crise-rx-tag { display: inline-block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); padding: 1px 5px; border-radius: 4px; vertical-align: middle; } .crise-rx-crit { color: var(--crit); background: color-mix(in srgb, var(--crit) 14%, transparent); } .crise-rx-spec { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); } /* Sortie de crise (stand-down) */ .crise-standdown { border-color: color-mix(in srgb, var(--crit) 35%, var(--border)); } /* Chronologie technique (kill-chain) dans la cellule */ .crise-kc { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; } .crise-kc-i { display: flex; align-items: flex-start; gap: 9px; padding: 7px 10px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); } .crise-kc-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; } .crise-kc-b { flex: 1; min-width: 0; display: flex; flex-direction: column; } .crise-kc-t { font-size: 11px; color: var(--text-dim); font-family: var(--mono); } .crise-kc-x { font-size: 13px; } /* Échelle d'escalade (suivi de situation) */ .crise-ladder { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 12px; } .crise-rung { flex: 1; min-width: 96px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; color: var(--text-dim); } .crise-rung:hover { border-color: var(--accent); } .crise-rung-n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--bg-soft); border: 1px solid var(--border); } .crise-rung-l { font-size: 12px; font-weight: 600; text-align: center; line-height: 1.15; } .crise-rung.past { color: var(--text); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); } .crise-rung.past .crise-rung-n { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); border-color: transparent; } .crise-rung.on { color: var(--text); border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); } .crise-rung.on .crise-rung-n { background: var(--warn); color: #fff; border-color: var(--warn); } .crise-rung-crise.on { border-color: var(--crit); box-shadow: 0 0 0 1px var(--crit); } .crise-rung-crise.on .crise-rung-n { background: var(--crit); border-color: var(--crit); } .crise-matrix { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 8px; } .crise-matrix-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; } .crise-matrix-lvl { font-weight: 700; font-size: 14px; } .crise-matrix-h > span:last-child { font-size: 12.5px; color: var(--text-dim); } .crise-matrix-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; } .crise-matrix-g > div { font-size: 12.5px; } .crise-matrix-k { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-dim); font-weight: 700; margin-bottom: 2px; } .crise-matrix-veille { font-size: 13px; color: var(--text-dim); margin: 6px 0 12px; } .crise-declare-wrap { margin-top: 14px; border-top: 1px solid var(--border-soft); padding-top: 14px; } .crise-declare-wrap h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 14px; } .crise-declare-wrap h4 i { width: 15px; height: 15px; background: var(--crit); } .crise-sitlog { margin-top: 14px; } .crise-sitlog-h { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); font-weight: 700; } .crise-sitlog ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .crise-sitlog li { font-size: 12px; color: var(--text); } .crise-sitlog li span { font-family: var(--mono); font-size: 11px; color: var(--text-dim); margin-right: 6px; } .crise-sitlog li em { color: var(--text-dim); font-style: normal; font-size: 11px; margin-left: 4px; } /* Horloges réglementaires + profil */ .crise-clock-go { margin-top: 6px; background: none; border: none; color: var(--accent); font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 0; } .crise-clock.r-high { border-color: color-mix(in srgb, var(--high) 55%, var(--border)); } .crise-regprof { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .crise-regprof-l { font-size: 12px; color: var(--text-dim); font-weight: 600; } .crise-regchip { font-size: 12px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-dim); cursor: pointer; } .crise-regchip.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 600; } .crise-regnote { font-size: 11px; color: var(--text-dim); margin: 4px 0 0; width: 100%; } /* Registre des décisions */ .crise-dec-add { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 8px; margin-bottom: 10px; } .crise-dec-add input, .crise-dec-add select { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; color: var(--text); font: inherit; font-size: 12.5px; } @media (max-width: 720px) { .crise-dec-add { grid-template-columns: 1fr 1fr; } } .crise-decs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .crise-dec { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; background: var(--bg-card); border: 1px solid var(--border-soft); border-left: 3px solid var(--violet); border-radius: var(--radius-sm); } .crise-dec-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .crise-dec-x { font-size: 13px; font-weight: 600; } .crise-dec-r { font-size: 12px; color: var(--text-dim); } .crise-dec-r b { color: var(--text); font-weight: 600; } .crise-dec-m { font-size: 11px; color: var(--text-dim); font-family: var(--mono); } .crise-k-decision { border-left-color: var(--violet); } /* Horloge réglementaire non pertinente */ .crise-clock-off { opacity: .75; } .crise-clock-off .crise-clock-v { font-size: 13px; font-family: inherit; color: var(--text-dim); font-weight: 600; } /* Badge « prêt à clôturer » + RACI dans le rapport */ .eb-badge.r-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, transparent); background: color-mix(in srgb, var(--ok) 14%, transparent); } .rd-raci { font-size: 10px; font-weight: 700; color: var(--text-dim); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; margin-left: 4px; } /* ========================================================================= MODE EXERCICE (entraînement de la cellule — marqué EXERCICE, isolé du réel) Couleur d'accent VIOLET pour ne JAMAIS confondre avec une vraie crise (rouge). ========================================================================= */ /* Bannière + héro en mode exercice */ .crise-banner.crise-ex { background: linear-gradient(90deg, var(--violet), color-mix(in srgb, var(--violet) 60%, var(--accent))); } .crise-banner.crise-ex .crise-b-go { color: var(--violet); } .crise-live-badge.crise-ex-badge { background: var(--violet); } .crise-live-ex { background: linear-gradient(135deg, color-mix(in srgb, var(--violet) 16%, var(--bg-soft)), color-mix(in srgb, var(--accent) 8%, var(--bg-soft))) !important; border-color: color-mix(in srgb, var(--violet) 42%, var(--border)) !important; } .crise-ex-badge-sm { display: inline-block; background: var(--violet); color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; padding: 1px 6px; border-radius: 4px; vertical-align: middle; } /* Injects (cellule d'exercice + créateur) */ .crise-k-inject { border-left-color: var(--violet); } .crise-inject-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; } .crise-inject { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; background: var(--bg-card); border: 1px solid var(--border-soft); border-left: 3px solid var(--violet); border-radius: var(--radius-sm); } .crise-inject.done { opacity: .6; border-left-color: var(--text-dim); } .crise-inject-t { flex: none; font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--violet); min-width: 50px; padding-top: 1px; } .crise-inject.done .crise-inject-t { color: var(--text-dim); } .crise-inject-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .crise-inject-cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-dim); } .crise-inject-x { font-size: 13px; line-height: 1.45; } .crise-inject-go { flex: none; } .crise-inject-done { flex: none; align-self: center; font-size: 10.5px; font-weight: 700; color: var(--ok); } /* Section « Entraîner la cellule » (hors crise) */ .crise-ex-off { margin-top: 16px; border-top: 1px solid var(--border-soft); padding-top: 14px; } .crise-ex-off-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; } .crise-ex-off-h h4 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; } .crise-ex-off-h h4 i { width: 15px; height: 15px; background: var(--violet); } .crise-ex-tag { font-size: 11px; font-weight: 600; color: var(--violet); background: color-mix(in srgb, var(--violet) 12%, transparent); border: 1px solid color-mix(in srgb, var(--violet) 35%, transparent); padding: 2px 9px; border-radius: 999px; } .crise-ex-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .crise-ex-row select { flex: 1; min-width: 220px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; color: var(--text); font: inherit; font-size: 13.5px; } /* Créateur de scénario (assisté IA) */ .crise-ex-builder { margin-top: 12px; background: var(--bg-card); border: 1px solid color-mix(in srgb, var(--violet) 30%, var(--border)); border-radius: var(--radius-sm); padding: 12px 14px; } .crise-ex-builder-h h5 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 13.5px; } .crise-ex-builder-h h5 i { width: 14px; height: 14px; background: var(--violet); } .crise-ex-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .crise-ex-f { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-dim); } .crise-ex-f-wide { grid-column: 1 / -1; } .crise-ex-f input, .crise-ex-f select { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; color: var(--text); font: inherit; font-size: 13px; } @media (max-width: 560px) { .crise-ex-fields { grid-template-columns: 1fr; } } .crise-ex-inj { margin-top: 12px; } .crise-ex-inj-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 12.5px; font-weight: 700; } .crise-ex-inj-add { display: grid; grid-template-columns: 92px auto 1fr auto; gap: 8px; margin-top: 8px; } .crise-ex-inj-add input, .crise-ex-inj-add select { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; color: var(--text); font: inherit; font-size: 12.5px; } @media (max-width: 620px) { .crise-ex-inj-add { grid-template-columns: 1fr 1fr; } } /* Méthodologie (bloc repliable) */ .crise-methode { margin-top: 14px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); } .crise-methode > summary { cursor: pointer; padding: 10px 14px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; list-style: none; } .crise-methode > summary::-webkit-details-marker { display: none; } .crise-methode > summary i { width: 15px; height: 15px; background: var(--violet); } .crise-methode[open] > summary { border-bottom: 1px solid var(--border-soft); } .crise-methode-b { padding: 4px 16px 14px; } .crise-methode-b h5 { margin: 12px 0 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--violet); } .crise-methode-l, .crise-methode-src { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; } .crise-methode-l li, .crise-methode-src li { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; } .crise-methode-l li b { color: var(--text); } /* Registre des exercices */ .crise-ex-hist-i { border-left: 3px solid var(--violet); } /* Rapport : débrief + grille de maturité (réservés à l'exercice) */ .report-doc .rd-class-ex { color: #6b21a8; border-color: #6b21a8; } .report-doc .rd-ex-banner { background: #f3e8ff; border: 1px solid #d8b4fe; color: #6b21a8; border-radius: 6px; padding: 10px 14px; margin: 0 0 18px; font-family: "Segoe UI", sans-serif; font-size: 13px; line-height: 1.5; } .report-doc .rd-ex-banner b { letter-spacing: .06em; } .report-doc .rd-debrief { list-style: none; margin: 6px 0 10px; padding: 0; } .report-doc .rd-debrief li { font-family: "Segoe UI", sans-serif; font-size: 13px; margin: 7px 0; display: flex; gap: 8px; align-items: flex-start; } .report-doc .rd-chk { flex: none; font-size: 15px; line-height: 1.15; color: #6b21a8; } .report-doc table.rd-mat .rd-mat-lvl { font-size: 11px; text-align: center; white-space: nowrap; } .report-doc table.rd-mat .rd-mat-c { text-align: center; color: #b0b0b0; font-size: 16px; } .report-doc table.rd-mat .rd-mat-ind { font-size: 12px; color: #444; } /* ---------- Catalogue d'intégrations (connecteurs) ---------- */ .intg-intro p { margin: 0 0 14px; color: var(--text-dim); font-size: 14px; line-height: 1.55; max-width: 84ch; } .intg-intro b { color: var(--text); } .intg-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .intg-search { position: relative; flex: 1; min-width: 200px; } .intg-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; background: var(--text-dim); } .intg-search input { width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px 8px 32px; color: var(--text); font: inherit; font-size: 13.5px; } .intg-filters select { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; color: var(--text); font: inherit; font-size: 13px; } .intg-only { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); cursor: pointer; } .intg-kpi { font-size: 12.5px; color: var(--text-dim); margin-left: auto; } .intg-kpi b { color: var(--accent); } .intg-cat { margin-bottom: 18px; } .intg-cat-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; margin-bottom: 10px; } .intg-cat-h i { width: 16px; height: 16px; background: var(--accent); } .intg-cat-n { font-size: 11.5px; color: var(--text-dim); font-family: var(--mono); background: var(--bg-soft); border-radius: 999px; padding: 1px 8px; } .intg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .intg-card { display: flex; flex-direction: column; gap: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 14px; } .intg-card.intg-used { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); box-shadow: inset 3px 0 0 var(--ok); } .intg-card-h { display: flex; align-items: center; gap: 10px; } .intg-logo { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; background: hsl(var(--h, 210), 55%, 46%); } .intg-logo-lg { width: 44px; height: 44px; font-size: 16px; border-radius: 12px; } .intg-card-t { flex: 1; min-width: 0; } .intg-name { display: block; font-weight: 700; font-size: 14px; } .intg-flag { font-size: 12px; } .intg-cat-l { display: block; font-size: 11.5px; color: var(--text-dim); } .intg-tier { flex: none; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .intg-t-pro { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); } .intg-t-biz { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); } .intg-t-ent { color: var(--violet); background: color-mix(in srgb, var(--violet) 14%, transparent); } .intg-desc { margin: 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.45; flex: 1; } .intg-card-f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .intg-auth { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; cursor: help; } .intg-a-key { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); } .intg-a-oauth { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); } .intg-a-pub { color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 12%, transparent); } .intg-acts { display: inline-flex; gap: 6px; margin-left: auto; align-items: center; } .intg-use { font-size: 11.5px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-dim); border-radius: 999px; padding: 4px 10px; cursor: pointer; } .intg-use.on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); } .intg-use:disabled { opacity: .5; cursor: not-allowed; } .intg-standards { margin-top: 8px; border-top: 1px solid var(--border-soft); padding-top: 16px; } .intg-std-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; } .intg-std { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 10px 12px; } .intg-std b { display: block; font-size: 13px; } .intg-std span { font-size: 12px; color: var(--text-dim); } .intg-note { margin: 16px 0 0; font-size: 12.5px; color: var(--text-dim); display: flex; align-items: flex-start; gap: 8px; background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 10px 12px; } .intg-note i { flex: none; width: 15px; height: 15px; background: var(--accent); margin-top: 1px; } .intg-note b { color: var(--text); } .intg-modal { position: fixed; inset: 0; z-index: 1400; background: rgba(8,12,24,.55); display: grid; place-items: center; padding: 20px; } .intg-modal[hidden] { display: none; } .intg-modal-card { width: min(560px, 100%); max-height: 88vh; overflow: auto; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; } .intg-modal-h { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .intg-modal-h h3 { margin: 0; font-size: 17px; } .intg-modal-x { margin-left: auto; background: none; border: none; font-size: 24px; line-height: 1; color: var(--text-dim); cursor: pointer; } .intg-modal-auth { display: flex; align-items: flex-start; gap: 10px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 10px 12px; margin: 8px 0; } .intg-modal-auth p { margin: 0; font-size: 12.5px; color: var(--text-dim); } .intg-modal-steps h4 { margin: 12px 0 6px; font-size: 13px; } .intg-modal-steps ol { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-dim); display: flex; flex-direction: column; gap: 5px; } .intg-soon { font-size: 10px; font-weight: 700; color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); padding: 1px 6px; border-radius: 4px; margin-left: 4px; } .intg-modal-f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; } .intg-modal-note { margin: 12px 0 0; font-size: 11.5px; color: var(--text-dim); } .intg-iocs { margin-top: 14px; max-height: 260px; overflow: auto; } .intg-iocs-h { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; } .intg-ioc { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border-soft); font-size: 12px; } .intg-ioc-t { flex: none; font-size: 9.5px; font-weight: 700; text-transform: uppercase; color: var(--accent); min-width: 52px; } .intg-ioc-v { font-family: var(--mono); word-break: break-all; } .intg-ioc-ids { flex: none; margin-left: auto; font-size: 9px; font-weight: 800; letter-spacing: .04em; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 999px; padding: 0 6px; } .intg-golib { margin-left: 10px; border: 0; background: transparent; color: var(--accent); font-weight: 700; font-size: 11px; cursor: pointer; text-transform: none; letter-spacing: 0; padding: 0; } .intg-golib:hover { text-decoration: underline; } .intg-connbadge { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ok) 20%, transparent); } .intg-connbadge i { width: 12px; height: 12px; background: var(--ok); } .intg-card.intg-conn { border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); } .intg-connected { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); border-radius: var(--radius-sm); padding: 8px 12px; margin: 8px 0; } .intg-connected i { flex: none; width: 14px; height: 14px; background: var(--ok); } .intg-form { display: flex; flex-direction: column; gap: 10px; margin: 4px 0; } .intg-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--text); } .intg-form input { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; color: var(--text); font: inherit; font-size: 13px; } .intg-opt { font-weight: 400; font-size: 11px; color: var(--text-dim); } .intg-form-sec { display: flex; align-items: center; gap: 7px; margin: 2px 0 0; font-size: 11.5px; color: var(--text-dim); } .intg-form-sec i { flex: none; width: 13px; height: 13px; background: var(--ok); } .intg-form-sec b { color: var(--text); } .intg-form label.intg-check { flex-direction: row; align-items: center; gap: 8px; font-weight: 600; } .intg-form label.intg-check input[type="checkbox"] { width: auto; flex: none; padding: 0; background: none; } /* ========================================================================= ESPACE DIRIGEANT (COMEX) — lecture claire, gros chiffres ========================================================================= */ .dg-intro { margin-bottom: 16px; } .dg-intro p { margin: 0; color: var(--text-dim); font-size: 14.5px; max-width: 74ch; line-height: 1.55; } .dg-lead strong { color: var(--text); } .dg-crise { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; cursor: pointer; margin-bottom: 16px; background: linear-gradient(135deg, var(--crit), color-mix(in srgb, var(--crit) 65%, var(--violet))); color: #fff; border: none; border-radius: var(--radius); padding: 16px 20px; } .dg-crise-l { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12.5px; letter-spacing: .04em; } .dg-crise-t { font-size: 17px; font-weight: 700; } .dg-crise-m { font-size: 12.5px; opacity: .9; } .dg-crise-ex { background: linear-gradient(135deg, var(--violet), color-mix(in srgb, var(--violet) 55%, #0b1020)) !important; } /* exercice = violet, jamais rouge */ .dg-hero { display: flex; align-items: center; gap: 28px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--bg-soft)), color-mix(in srgb, var(--violet) 12%, var(--bg-soft))); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 28px; margin-bottom: 14px; flex-wrap: wrap; } .dg-ring { --p: 0; flex: none; width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--rc, var(--accent)) calc(var(--p) * 1%), color-mix(in srgb, var(--text-dim) 18%, transparent) 0); } .dg-ring.r-low { --rc: var(--ok); } .dg-ring.r-mid { --rc: var(--warn); } .dg-ring.r-high { --rc: var(--high); } .dg-ring.r-crit { --rc: var(--crit); } .dg-ring.r-idle { --rc: var(--text-dim); } .dg-ring-c { width: 104px; height: 104px; border-radius: 50%; background: var(--bg-soft); display: grid; place-items: center; text-align: center; } .dg-ring-v { font-size: 34px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .dg-ring-v small { font-size: 15px; font-weight: 600; color: var(--text-dim); } .dg-ring-l { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); margin-top: 3px; } .dg-hero-b { flex: 1; min-width: 240px; } .dg-level { display: inline-block; font-weight: 700; font-size: 16px; padding: 3px 12px; border-radius: 999px; margin-bottom: 8px; } .dg-level.r-low { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); } .dg-level.r-mid { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); } .dg-level.r-high { background: color-mix(in srgb, var(--high) 15%, transparent); color: var(--high); } .dg-level.r-crit { background: color-mix(in srgb, var(--crit) 15%, transparent); color: var(--crit); } .dg-verdict { margin: 0; font-size: 15.5px; line-height: 1.5; } .dg-trend { margin: 8px 0 0; font-size: 13px; color: var(--text-dim); } .dg-reg { display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--crit) 8%, var(--bg-soft)); border: 1px solid color-mix(in srgb, var(--crit) 30%, var(--border)); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 14px; font-size: 14px; } .dg-reg i { width: 17px; height: 17px; background: var(--crit); flex: none; } .dg-reg span { flex: 1; } .dg-reg-go { background: none; border: none; color: var(--crit); font-weight: 700; font-size: 13px; cursor: pointer; } .dg-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; } .dg-kpi { text-align: left; cursor: pointer; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; } .dg-kpi:hover { border-color: var(--accent); } .dg-kpi-v { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; } .dg-kpi-l { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; } .dg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; } .dg-block { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; height: 100%; } .dg-block h3 { margin: 0 0 12px; font-size: 16px; } .dg-muted { color: var(--text-dim); font-size: 14px; } .dg-prio { margin: 0; padding: 0; list-style: none; counter-reset: dp; display: flex; flex-direction: column; gap: 12px; } .dg-prio li { counter-increment: dp; position: relative; padding-left: 38px; } .dg-prio li::before { content: counter(dp); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--violet)); color: #fff; font: 700 13px var(--mono); display: grid; place-items: center; } .dg-prio-t { display: block; font-weight: 700; font-size: 14.5px; } .dg-prio-w { display: block; font-size: 13px; color: var(--text-dim); margin-top: 1px; } .dg-conseils { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; } .dg-conseils li { font-size: 14px; line-height: 1.5; } .dg-actions { display: flex; gap: 10px; flex-wrap: wrap; } @media (max-width: 820px) { .dg-kpis { grid-template-columns: 1fr; } .dg-cols { grid-template-columns: 1fr; } } /* ========================================================================= POSTE ANALYSTE (console opérationnelle) ========================================================================= */ .an-crise { display: inline-flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer; margin-bottom: 14px; background: linear-gradient(90deg, var(--crit), color-mix(in srgb, var(--crit) 70%, var(--violet))); color: #fff; border: none; border-radius: var(--radius); padding: 12px 16px; font-size: 14px; } .an-ctx { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } .an-ctx-i { flex: 1; min-width: 130px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; } .an-ctx-v { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; } .an-ctx-v small { font-size: 13px; color: var(--text-dim); font-weight: 500; } .an-ctx-l { display: block; font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; } .an-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; } @media (max-width: 900px) { .an-cols { grid-template-columns: 1fr; } } .an-sec-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .an-sec-h h3 { margin: 0; font-size: 16px; display: inline-flex; align-items: center; gap: 8px; } .an-sec-h h3 i { width: 16px; height: 16px; background: var(--accent); } .an-count { font-family: var(--mono); font-size: 12px; background: var(--crit); color: #fff; border-radius: 999px; padding: 1px 8px; } .an-grp { margin-bottom: 14px; } .an-grp-h { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin-bottom: 6px; } .an-grp-h.r-crit { color: var(--crit); } .an-grp-h.r-mid { color: var(--warn); } .an-grp-h i { width: 14px; height: 14px; background: currentColor; } .an-grp-n { font-family: var(--mono); background: color-mix(in srgb, var(--text-dim) 16%, transparent); color: var(--text); border-radius: 999px; padding: 0 7px; font-size: 11px; } .an-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .an-item { display: flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1px solid var(--border-soft); border-left: 3px solid var(--text-dim); border-radius: var(--radius-sm); padding: 10px 12px; } .an-item.an-crit { border-left-color: var(--crit); } .an-item.an-warn { border-left-color: var(--warn); } .an-item.an-info { border-left-color: var(--accent); } .an-item-b { flex: 1; min-width: 0; } .an-item-t { display: block; font-size: 13.5px; } .an-item-m { display: block; font-size: 11.5px; color: var(--text-dim); font-family: var(--mono); margin-top: 1px; } .an-item-go { flex: none; background: none; border: none; color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; } .an-item-go:hover { text-decoration: underline; } .an-empty { display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--ok) 8%, var(--bg-soft)); border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--border)); border-radius: var(--radius); padding: 16px; font-size: 14px; color: var(--text-dim); } .an-empty i { width: 18px; height: 18px; background: var(--ok); flex: none; } .an-tools { display: flex; flex-direction: column; gap: 8px; } .an-tool { display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; } .an-tool:hover { border-color: var(--accent); } .an-tool-ic { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); } .an-tool-ic i { width: 17px; height: 17px; background: var(--accent); } .an-tool-t { display: block; font-size: 14px; font-weight: 600; } .an-tool-d { display: block; font-size: 12px; color: var(--text-dim); } /* ========================================================================= PREMIERS PAS (configuration guidée pro) ========================================================================= */ .pp-panel { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--bg-soft)), color-mix(in srgb, var(--violet) 8%, var(--bg-soft))); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 20px; } .pp-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .pp-k { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; } .pp-k i { width: 14px; height: 14px; background: var(--accent); } .pp-h h3 { margin: 3px 0 0; font-size: 18px; } .pp-x { background: none; border: none; color: var(--text-dim); font-size: 13px; cursor: pointer; white-space: nowrap; } .pp-x:hover { color: var(--text); } .pp-prog { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--text-dim) 18%, transparent); overflow: hidden; } .pp-prog-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--violet)); border-radius: 999px; transition: width .3s; } .pp-prog-t { font-size: 12.5px; color: var(--text-dim); margin: 6px 0 14px; font-family: var(--mono); } .pp-prog-t b { color: var(--text); } .pp-org { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; margin-bottom: 14px; } .pp-f { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-dim); } .pp-f input, .pp-f select { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; color: var(--text); font: inherit; font-size: 13.5px; } .pp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .pp-step { display: flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 10px 12px; } .pp-step-c { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); display: grid; place-items: center; } .pp-step.done .pp-step-c { background: var(--ok); border-color: var(--ok); } .pp-step.done .pp-step-c i { width: 12px; height: 12px; background: #fff; } .pp-step-b { flex: 1; min-width: 0; } .pp-step-t { display: block; font-size: 14px; font-weight: 600; } .pp-step.done .pp-step-t { color: var(--text-dim); text-decoration: line-through; } .pp-step-d { display: block; font-size: 12px; color: var(--text-dim); } .pp-step-go { flex: none; background: none; border: none; color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; } .pp-step-go:hover { text-decoration: underline; } .pp-step-here { flex: none; font-size: 11.5px; color: var(--text-dim); font-style: italic; } .pp-bar { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; margin-bottom: 20px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 16px; } .pp-bar-l { font-size: 13.5px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .pp-bar-l i { width: 15px; height: 15px; background: var(--accent); } .pp-bar-track { flex: 1; height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--text-dim) 18%, transparent); overflow: hidden; } .pp-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--violet)); } .pp-bar-go { font-size: 12.5px; color: var(--accent); font-weight: 600; white-space: nowrap; } .pp-done { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; background: color-mix(in srgb, var(--ok) 9%, var(--bg-soft)); border: 1px solid color-mix(in srgb, var(--ok) 32%, var(--border)); border-radius: var(--radius); padding: 12px 16px; } .pp-done-l { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; } .pp-done-l i { width: 17px; height: 17px; background: var(--ok); } @media (max-width: 720px) { .pp-org { grid-template-columns: 1fr; } } .cmdk-ov { position: fixed; inset: 0; z-index: 200; background: rgba(10,18,34,.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; } .cmdk-box { width: min(560px, 100%); background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 30px 80px rgba(23,60,130,.35); overflow: hidden; } .cmdk-in { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .cmdk-si { width: 20px; height: 20px; color: var(--text-dim); flex: none; } .cmdk-in input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; color: var(--text); outline: none; } .cmdk-in kbd { font-family: var(--mono); font-size: 11px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; flex: none; } .cmdk-list { max-height: 52vh; overflow: auto; padding: 8px; } .cmdk-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none; border: 0; border-radius: 9px; padding: 10px 12px; font: inherit; font-size: 14.5px; color: var(--text); cursor: pointer; } .cmdk-item.on { background: color-mix(in srgb, var(--brand-blue) 12%, transparent); } .cmdk-ic { width: 22px; height: 22px; display: grid; place-items: center; color: var(--accent); flex: none; } .cmdk-ic svg { width: 18px; height: 18px; } .cmdk-ic [class^="gi-"] { width: 18px; height: 18px; margin: 0; } .cmdk-empty { padding: 24px; text-align: center; color: var(--text-dim); font-size: 14px; } /* Équipe & droits */ .tm-me { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .tm-me-l { font-weight: 600; font-size: 14px; } .tm-me .input { min-width: 250px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-soft); color: var(--text); font: inherit; } .tm-list { display: flex; flex-direction: column; } .tm-row, .tm-inv { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--border-soft); } .tm-row:first-child, .tm-inv:first-child { border-top: 0; } .tm-av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-blue), var(--violet)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; } .tm-av-p { background: var(--bg-soft); color: var(--accent); } .tm-av-p [class^="gi-"] { width: 16px; height: 16px; margin: 0; } .tm-av img { width: 100%; height: 100%; object-fit: cover; display: block; } .tm-av-edit { position: relative; padding: 0; border: 0; cursor: pointer; overflow: hidden; font: inherit; -webkit-appearance: none; appearance: none; } .tm-av-cam { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(13, 26, 49, .5); color: #fff; opacity: 0; transition: opacity .15s ease; } .tm-av-edit:hover .tm-av-cam, .tm-av-edit:focus-visible .tm-av-cam { opacity: 1; } .tm-av-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .tm-id { flex: 1; min-width: 0; display: flex; flex-direction: column; } .tm-name { font-weight: 600; font-size: 14px; } .tm-you { font-family: var(--mono); font-size: 10px; color: var(--accent-dark); background: color-mix(in srgb, var(--brand-blue) 12%, transparent); border-radius: 4px; padding: 1px 5px; } .tm-mail { font-size: 12.5px; color: var(--text-dim); } .tm-role { flex: none; } .tm-role-sel { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft); color: var(--text); font: inherit; font-size: 13px; } .tm-badge { font-family: var(--mono); font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-dim); } .tm-badge.r-crit { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, transparent); } .tm-badge.r-mid { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); } .tm-invite { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .tm-invite .input { flex: 1; min-width: 200px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-soft); color: var(--text); font: inherit; } .tm-invite .tm-in-role { flex: none; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-soft); color: var(--text); font: inherit; } /* Bandeau + mode lecture seule */ .ro-banner { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 150; display: flex; align-items: center; gap: 10px; background: var(--bg-card); border: 1px solid var(--warn); color: var(--text); border-radius: 999px; padding: 8px 10px 8px 16px; box-shadow: 0 10px 30px rgba(23,60,130,.2); font-size: 13.5px; } .ro-banner [class^="gi-"] { color: var(--warn); width: 16px; height: 16px; margin: 0; } .ro-switch { background: var(--accent); color: #fff; border: 0; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer; } body.ro-mode #main input, body.ro-mode #main textarea, body.ro-mode #main select, body.ro-mode #main .lib-del, body.ro-mode #main [data-act^="add"], body.ro-mode #main [data-act="del"], body.ro-mode #main [data-act="stat"], body.ro-mode #main [data-act^="ev-"], body.ro-mode #main .cf-seg-b { pointer-events: none; opacity: .5; } body.ro-mode #view-equipe input, body.ro-mode #view-equipe textarea, body.ro-mode #view-equipe select, body.ro-mode #view-equipe button, body.ro-mode #view-equipe .lib-del { pointer-events: auto; opacity: 1; } .eb-metagrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; } .eb-metagrid label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text-dim); font-weight: 600; } .eb-metagrid input { background: var(--bg-soft); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 11px; font: inherit; font-size: 14px; } .eb-metagrid input:focus { outline: none; border-color: var(--accent); } .eb-block { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; } .eb-block-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .eb-block h4 { margin: 0 0 10px; font-size: 15px; } .eb-block-h h4 { margin: 0; } .eb-empty { color: var(--text-dim); font-size: 13.5px; padding: 6px 0; } .eb-t { width: 100%; border-collapse: collapse; font-size: 13.5px; } .eb-t thead th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); padding: 4px 8px; border-bottom: 1px solid var(--border); font-weight: 700; } .eb-t td { padding: 5px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } .eb-t input, .eb-t select { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 7px; padding: 7px 9px; font: inherit; font-size: 13.5px; } .eb-t input:focus, .eb-t select:focus { outline: none; border-color: var(--accent); } .eb-t .eb-x { width: 34px; text-align: center; } .eb-t .eb-c { width: 60px; text-align: center; } .eb-eco th, .eb-eco td { padding: 5px 5px; } .eb-sub { color: var(--text-dim); font-size: 12px; margin-top: 2px; } .eb-badge { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; border: 1px solid; } .r-low { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); background: color-mix(in srgb, var(--ok) 12%, transparent); } .r-mid { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: color-mix(in srgb, var(--warn) 12%, transparent); } .r-high { color: var(--high); border-color: color-mix(in srgb, var(--high) 50%, transparent); background: color-mix(in srgb, var(--high) 14%, transparent); } .r-crit { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 55%, transparent); background: color-mix(in srgb, var(--crit) 14%, transparent); } tr.r-crit td, tr.r-high td, tr.r-mid td, tr.r-low td { border-left: 3px solid transparent; } tr.r-crit td:first-child { border-left-color: var(--crit); } tr.r-high td:first-child { border-left-color: var(--high); } tr.r-mid td:first-child { border-left-color: var(--warn); } tr.r-low td:first-child { border-left-color: var(--ok); } .eb-matrix { display: grid; grid-template-columns: 40px repeat(4, 1fr); gap: 6px; max-width: 460px; margin: 8px 0; } .eb-m-corner { } .eb-m-axis { display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--text-dim); } .eb-m-cell { aspect-ratio: 1 / 1; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--border); min-height: 44px; } .eb-m-count { font-weight: 800; font-size: 16px; color: var(--text); } .eb-legend { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; } .eb-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; gap: 12px; } .eb-cta { margin-top: 16px; } /* Cockpit de synthèse (RSSI / COMEX) */ .eb-cockpit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; } .eb-stat { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; } .eb-stat-v { font-size: 26px; font-weight: 800; line-height: 1.1; } .eb-stat-v.eb-euro { font-size: 22px; color: var(--accent); } .eb-stat-v.r-crit-txt { color: var(--crit); } .eb-stat-v.r-mid-txt { color: var(--warn); } .eb-stat-l { font-size: 12px; color: var(--text-dim); } /* EBIOS — polish premium */ .eb-block-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; } .eb-ai-fill { background: color-mix(in srgb, var(--violet) 14%, transparent); border-color: color-mix(in srgb, var(--violet) 42%, transparent); } .eb-ai-fill:hover { background: color-mix(in srgb, var(--violet) 26%, transparent); border-color: color-mix(in srgb, var(--violet) 60%, transparent); } .eb-ai-fill[data-busy] { opacity: .6; cursor: progress; } .eb-step { box-shadow: var(--shadow-sm); } .eb-step.active { box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent); } .eb-stat { box-shadow: var(--shadow-sm); } /* Registre des risques quantifié */ .eb-scroll { overflow-x: auto; } .eb-t-risk { min-width: 720px; } .eb-t .eb-num { width: 92px; } .eb-t .eb-num input { text-align: right; } .eb-t .eb-ale { font-weight: 700; white-space: nowrap; } .eb-t tfoot .eb-tot-l { text-align: right; font-weight: 700; color: var(--text-dim); } .eb-t tfoot .eb-euro { font-weight: 800; color: var(--accent); white-space: nowrap; } .eb-note { font-size: 12.5px; color: var(--text-dim); margin: 8px 0 0; } @media (max-width: 900px) { .eb-cockpit { grid-template-columns: 1fr 1fr; } } /* ============ Conformité multi-référentiels ============ */ .conf-cockpit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; } .conf-cat-group { margin-bottom: 14px; } .conf-cat-group .conf-cockpit { margin-bottom: 0; } .conf-cat-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .conf-cat-d { font-size: 11.5px; font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .75; } /* ---- Conformité premium : cartes de référentiel (cockpit-sélecteur) ---- */ .cf-fw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 12px; margin-bottom: 4px; } .cf-fw-card { display: flex; align-items: center; gap: 13px; text-align: left; width: 100%; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 13px 15px; cursor: pointer; color: var(--text); font-family: inherit; box-shadow: var(--shadow-sm); transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; } .cf-fw-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: var(--shadow); } .cf-fw-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); } .cf-fw-info { display: flex; flex-direction: column; min-width: 0; } .cf-fw-name { font-weight: 700; font-size: 14px; } .cf-fw-sub { font-size: 11.5px; color: var(--text-dim); } .cf-ring { position: relative; width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--rc, var(--accent)) calc(var(--p, 0) * 3.6deg), color-mix(in srgb, var(--text) 12%, transparent) 0); } .cf-ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--bg-card); } .cf-ring-v { position: relative; font-size: 11px; font-weight: 800; } .cf-ring.r-low { --rc: var(--ok); } .cf-ring.r-mid { --rc: var(--warn); } .cf-ring.r-high { --rc: var(--high); } .cf-ring.r-crit { --rc: var(--crit); } .cf-ring.cf-idle { --rc: color-mix(in srgb, var(--text) 18%, transparent); } .cf-ring.cf-idle .cf-ring-v { color: var(--text-dim); } /* ---- Barre d'outils + légende ---- */ .cf-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 20px; } .cf-legend { display: flex; gap: 15px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); } .cf-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: middle; } /* ---- Panneau d'exigences premium ---- */ .cf-panel-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .cf-panel-title { display: flex; align-items: center; gap: 8px; } .cf-panel-title h4 { margin: 0; font-size: 18px; } .cf-panel-plain { margin: 6px 0 14px; color: var(--text-dim); font-size: 13.5px; max-width: 74ch; line-height: 1.55; } .cf-progress { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; } .cf-progress-bar { flex: 1; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; } .cf-progress-fill { height: 100%; border-radius: 999px; transition: width .35s ease; } .cf-progress-fill.r-low { background: var(--ok); } .cf-progress-fill.r-mid { background: var(--warn); } .cf-progress-fill.r-high { background: var(--high); } .cf-progress-fill.r-crit { background: var(--crit); } .cf-progress-txt { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; } .cf-ctrls { display: flex; flex-direction: column; gap: 10px; } .cf-ctrl { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--border-soft); border-left: 3px solid transparent; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bg-card) 55%, transparent); transition: background .15s ease, border-color .15s ease; } .cf-ctrl:hover { background: var(--bg-card); } .cf-ctrl.is-ok { border-left-color: var(--ok); } .cf-ctrl.is-mid { border-left-color: var(--warn); } .cf-ctrl.is-crit { border-left-color: var(--crit); } .cf-ctrl-main { flex: 1; min-width: 0; } .cf-ctrl-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; } .cf-dom { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); background: color-mix(in srgb, var(--text) 8%, transparent); padding: 2px 9px; border-radius: 999px; } .cf-map { font-size: 11px; color: var(--accent); opacity: .85; } .cf-ctrl-txt { font-size: 14px; line-height: 1.5; } .cf-ctrl-act { display: flex; flex-direction: column; gap: 8px; align-items: stretch; flex: none; width: 300px; max-width: 42%; } .cf-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--bg-soft); } .cf-seg-b { flex: 1; border: 0; border-right: 1px solid var(--border); background: transparent; color: var(--text-dim); font-family: inherit; font-size: 12px; font-weight: 600; padding: 7px 8px; cursor: pointer; white-space: nowrap; transition: background .13s ease, color .13s ease; } .cf-seg-b:last-child { border-right: 0; } .cf-seg-b:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); } .cf-seg-b.active.s-ok { background: var(--ok); color: #04240c; } .cf-seg-b.active.s-mid { background: var(--warn); color: #2a1e00; } .cf-seg-b.active.s-crit { background: var(--crit); color: #2a0606; } .cf-seg-b.active.s-na { background: color-mix(in srgb, var(--text) 28%, transparent); color: var(--text); } .cf-note { width: 100%; } @media (max-width: 760px) { .cf-ctrl { flex-direction: column; } .cf-ctrl-act { width: 100%; max-width: none; } } /* ---- Questionnaire de profil (page évolutive) ---- */ .cf-quiz-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; } .cf-quiz-h h4 { margin: 0; font-size: 18px; } .cf-ai-row { display: flex; gap: 10px; margin: 12px 0 18px; flex-wrap: wrap; } .cf-ai-desc { flex: 1; min-width: 240px; } .cf-qs { display: flex; flex-direction: column; gap: 12px; } .cf-q { padding: 14px 16px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bg-card) 55%, transparent); } .cf-q-txt { font-size: 14px; line-height: 1.5; margin-bottom: 11px; display: flex; gap: 10px; align-items: flex-start; } .cf-q-n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-size: 12px; font-weight: 800; display: grid; place-items: center; } .cf-q-opts { display: flex; gap: 8px; flex-wrap: wrap; padding-left: 32px; } .cf-q-opt { border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-dim); font-family: inherit; font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: background .13s ease, color .13s ease, border-color .13s ease; } .cf-q-opt:hover { color: var(--text); border-color: var(--text-dim); } .cf-q-opt.active { background: linear-gradient(135deg, var(--accent), var(--violet)); color: #fff; border-color: transparent; } .cf-quiz-foot { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; } /* ---- Bandeau de profil + badges de pertinence ---- */ .cf-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px; } .cf-banner-txt { font-size: 13.5px; } .cf-rel-oblig { color: var(--crit); font-weight: 700; } .cf-banner-act { display: flex; gap: 8px; flex-wrap: wrap; } .cf-badge { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; margin-left: 8px; vertical-align: middle; } .cf-badge-ob { background: color-mix(in srgb, var(--crit) 20%, transparent); color: var(--crit); border: 1px solid color-mix(in srgb, var(--crit) 45%, transparent); } .cf-badge-out { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text-dim); } .cf-fw-card.cf-out { opacity: .58; } .cf-fw-card.cf-out:hover { opacity: 1; } .conf-tabgroups { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; } .conf-tabgroup { display: flex; flex-direction: column; gap: 5px; } .conf-tabgroup-l { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); } .conf-bar { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 15px; } .conf-bar-h { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: 13.5px; } .conf-bar-pct { font-size: 18px; font-weight: 800; } .conf-bar-track { height: 8px; background: var(--bg-card); border-radius: 999px; margin: 8px 0 6px; overflow: hidden; } .conf-bar-fill { height: 100%; border-radius: 999px; transition: width .3s; } .conf-bar-fill.r-low { background: var(--ok); } .conf-bar-fill.r-mid { background: var(--warn); } .conf-bar-fill.r-high { background: var(--high); } .conf-bar-fill.r-crit { background: var(--crit); } .conf-bar-pct.r-low { color: var(--ok); } .conf-bar-pct.r-mid { color: var(--warn); } .conf-bar-pct.r-high { color: var(--high); } .conf-bar-pct.r-crit { color: var(--crit); } .conf-bar-sub { font-size: 11.5px; color: var(--text-dim); } .conf-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .conf-tab { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-dim); border-radius: 999px 999px 0 0; padding: 9px 16px; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; } .conf-tab:hover { color: var(--text); } .conf-tab.active { color: var(--text); background: var(--bg-card); border-bottom-color: var(--bg-card); } .conf-tab-sc { font-size: 11.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; border: 1px solid; } .conf-tab-sc.r-low { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); } .conf-tab-sc.r-mid { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); } .conf-tab-sc.r-high { color: var(--high); border-color: color-mix(in srgb, var(--high) 50%, transparent); } .conf-tab-sc.r-crit { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 55%, transparent); } .conf-hint { font-size: 12.5px; color: var(--text-dim); font-weight: 400; } .conf-t { min-width: 640px; } .conf-t .conf-cat { white-space: nowrap; font-size: 12px; color: var(--text-dim); font-weight: 600; width: 130px; } .conf-map { font-size: 11px; color: var(--accent); margin-top: 3px; opacity: .85; } .conf-t .conf-st { width: 150px; } .conf-sel.r-low { border-color: color-mix(in srgb, var(--ok) 55%, var(--border)); } .conf-sel.r-mid { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); } .conf-sel.r-crit { border-color: color-mix(in srgb, var(--crit) 55%, var(--border)); } .conf-count { display: inline-block; font-size: 12px; font-weight: 800; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); border-radius: 999px; padding: 1px 9px; margin-left: 6px; } @media (max-width: 900px) { .conf-cockpit { grid-template-columns: 1fr 1fr; } } /* ============ Aide IA contextuelle (inline) ============ */ .eb-ai { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .eb-ai-btn { border-color: color-mix(in srgb, var(--violet) 45%, var(--border)) !important; } .eb-ai-hint { font-size: 12px; color: var(--text-dim); } .ai-inline { flex-basis: 100%; margin-top: 10px; background: color-mix(in srgb, var(--violet) 8%, var(--bg-soft)); border: 1px solid color-mix(in srgb, var(--violet) 30%, var(--border)); border-radius: var(--radius); padding: 13px 15px; } .ai-inline-load { display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-size: 14px; } .ai-inline-err { color: var(--warn); font-size: 13.5px; } .ai-inline-h { font-weight: 700; font-size: 13.5px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .ai-inline-b { font-size: 14px; line-height: 1.6; } .ai-inline-b h4 { margin: 14px 0 5px; font-size: 14.5px; color: var(--accent); } .ai-inline-b h4:first-child { margin-top: 0; } .ai-inline-b ul, .ai-inline-b ol { margin: 4px 0 10px; padding-left: 20px; } .ai-inline-b li { margin: 3px 0; } .ai-inline-b p { margin: 0 0 8px; } .ai-inline-copy { margin-top: 10px; } /* ============ Tableau de bord global (cockpit) ============ */ .dash-topline { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; margin-bottom: 16px; } .dash-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--bg-soft)), color-mix(in srgb, var(--violet) 16%, var(--bg-soft))); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 22px; } .dash-hero-l { font-size: 13px; color: var(--text-dim); } .dash-hero-v { font-size: 34px; font-weight: 800; letter-spacing: -.01em; margin: 2px 0; } .dash-hero-s { font-size: 13px; color: var(--text-dim); } .dash-ai { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; } /* ===== Hero de posture — anneau radial + décomposition (pro & particulier) ===== */ .pg-hero { display: flex; align-items: center; gap: 26px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--bg-soft)), color-mix(in srgb, var(--violet) 14%, var(--bg-soft))); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 16px; flex-wrap: wrap; } .pg-ring { position: relative; width: 112px; height: 112px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--rc, var(--accent)) calc(var(--p, 0) * 1%), color-mix(in srgb, var(--text) 9%, transparent) 0); } .pg-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--bg-soft); } .pg-ring.r-low { --rc: var(--ok); } .pg-ring.r-mid { --rc: var(--warn); } .pg-ring.r-high { --rc: var(--high); } .pg-ring.r-crit { --rc: var(--crit); } .pg-ring.pg-idle { --rc: color-mix(in srgb, var(--text) 20%, transparent); } .pg-ring-c { position: relative; text-align: center; line-height: 1; } .pg-ring-v { font-size: 30px; font-weight: 800; letter-spacing: -.01em; } .pg-ring-v small { font-size: 14px; font-weight: 700; opacity: .5; } .pg-ring-l { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .07em; margin-top: 4px; } .pg-body { flex: 1; min-width: 250px; } .pg-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .pg-level { font-size: 20px; font-weight: 800; } .pg-level.r-low { color: var(--ok); } .pg-level.r-mid { color: var(--warn); } .pg-level.r-high { color: var(--high); } .pg-level.r-crit { color: var(--crit); } .pg-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); background: color-mix(in srgb, var(--text) 8%, transparent); border-radius: 999px; padding: 2px 7px; cursor: help; } .pg-desc { font-size: 13px; color: var(--text-dim); margin: 4px 0 13px; } .pg-parts { display: flex; gap: 16px; flex-wrap: wrap; } .pg-part { flex: 1; min-width: 120px; } button.pg-part { border: 0; background: none; padding: 5px 6px; margin: -5px -6px; border-radius: 8px; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background .15s ease; } button.pg-part:hover { background: color-mix(in srgb, var(--text) 6%, transparent); } button.pg-part:hover .pg-part-h span { color: var(--text); } .pg-part-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; margin-bottom: 4px; } .pg-part-h span { color: var(--text-dim); } .pg-part-h b { font-weight: 800; } .pg-part-track { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; } .pg-part-fill { height: 100%; border-radius: 999px; transition: width .35s; } .pg-part-fill.r-low { background: var(--ok); } .pg-part-fill.r-mid { background: var(--warn); } .pg-part-fill.r-high { background: var(--high); } .pg-part-fill.r-crit { background: var(--crit); } .pg-part-fill.pg-idle { background: color-mix(in srgb, var(--text) 18%, transparent); } .pg-cta { margin-top: 12px; } @media (max-width: 560px) { .pg-hero { gap: 16px; } .pg-ring { width: 92px; height: 92px; } .pg-ring-v { font-size: 25px; } } .dash-attention { background: color-mix(in srgb, var(--crit) 7%, var(--bg-soft)); border: 1px solid color-mix(in srgb, var(--crit) 28%, var(--border)); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; } .dash-attention h4 { margin: 0 0 8px; font-size: 14px; } .dash-attention ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .dash-attention li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; } .dash-attention li span { flex: 1; } .dash-attention li.r-crit span::before { content: "●"; color: var(--crit); margin-right: 7px; } .dash-attention li.r-mid span::before { content: "●"; color: var(--warn); margin-right: 7px; } .dash-jump { background: none; border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 3px 12px; font-size: 12px; cursor: pointer; } .dash-jump:hover { border-color: var(--accent); } .dash-ok { background: color-mix(in srgb, var(--ok) 8%, var(--bg-soft)); border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--border)); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; font-size: 14px; } .dash-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .dash-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; } .dash-card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .dash-ic { width: 40px; height: 40px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--violet) 15%, transparent)); color: var(--accent); } .dash-card-h h3 { margin: 0; font-size: 16px; } .dash-card-b { flex: 1; margin-bottom: 12px; } .dash-open { align-self: flex-start; } .dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .dash-kpis-4 { grid-template-columns: repeat(2, 1fr); } .dash-kpis > div { display: flex; flex-direction: column; } .dash-k { font-size: 22px; font-weight: 800; line-height: 1.1; } .dash-k.eb-euro { color: var(--accent); font-size: 18px; } .dash-k.r-crit-txt { color: var(--crit); } .dash-k.r-mid-txt { color: var(--warn); } .dash-kl { font-size: 11.5px; color: var(--text-dim); } .dash-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 10px; } .dash-empty { font-size: 13.5px; color: var(--text-dim); } .dash-score { font-size: 30px; font-weight: 800; margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; } .dash-score span { font-size: 12.5px; font-weight: 400; color: var(--text-dim); } .dash-score.r-low { color: var(--ok); } .dash-score.r-mid { color: var(--warn); } .dash-score.r-high { color: var(--high); } .dash-score.r-crit { color: var(--crit); } .dash-bar { margin-bottom: 7px; } .dash-bar-h { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 3px; } .dash-bar-h .r-low { color: var(--ok); } .dash-bar-h .r-mid { color: var(--warn); } .dash-bar-h .r-high { color: var(--high); } .dash-bar-h .r-crit { color: var(--crit); } .dash-links { display: flex; gap: 8px; flex-wrap: wrap; } @media (max-width: 860px) { .dash-topline, .dash-grid { grid-template-columns: 1fr; } } /* ============ Plan de remédiation (roadmap) ============ */ .eb-stat-v.r-low-txt { color: var(--ok); } .rm-bar { height: 10px; background: var(--bg-card); border-radius: 999px; overflow: hidden; margin: 2px 0 4px; } .rm-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--violet)); border-radius: 999px; transition: width .35s; } .rm-filter { background: var(--bg-soft); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; font: inherit; font-size: 13.5px; } .rm-src { font-size: 12px; color: var(--text-dim); white-space: nowrap; } .rm-done td { opacity: .62; } .rm-done td:nth-child(2) { text-decoration: line-through; } .rm-st { font-weight: 600; } .rm-st-ok { border-color: color-mix(in srgb, var(--ok) 55%, var(--border)) !important; color: var(--ok); } .rm-st-mid { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)) !important; } .rm-add { display: flex; gap: 8px; flex-wrap: wrap; } .rm-add input { flex: 1; min-width: 220px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; font: inherit; } .rm-add select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; font: inherit; } /* ============ Tiers / écosystème ============ */ .ti-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; } .ti-meta label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text-dim); font-weight: 600; } .ti-meta input, .ti-meta select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 14px; } .ti-meta input:focus, .ti-meta select:focus { outline: none; border-color: var(--accent); } .ti-qh { margin: 4px 0 8px; font-size: 14.5px; } .ti-ans { width: 130px; } @media (max-width: 640px) { .ti-meta { grid-template-columns: 1fr; } } /* ============ Quiz de sensibilisation ============ */ .qz-card { max-width: 640px; margin: 0 auto; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 26px; } .qz-intro { text-align: center; } .qz-emoji { font-size: 42px; margin-bottom: 6px; } .qz-intro h3 { font-size: 22px; margin: 0 0 8px; } .qz-intro p { color: var(--text-dim); } .qz-best { color: var(--text) !important; } .qz-progress { height: 6px; background: var(--bg-card); border-radius: 999px; overflow: hidden; margin-bottom: 10px; } .qz-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--violet)); transition: width .3s; } .qz-count { font-size: 12.5px; color: var(--text-dim); margin-bottom: 12px; } .qz-q { font-size: 18px; margin: 0 0 16px; line-height: 1.35; } .qz-opts { display: flex; flex-direction: column; gap: 10px; } .qz-opt { text-align: left; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 13px 15px; cursor: pointer; font: inherit; font-size: 14.5px; transition: .12s; } .qz-opt:hover:not(:disabled) { border-color: var(--accent); } .qz-opt:disabled { cursor: default; } .qz-opt.ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); } .qz-opt.bad { border-color: var(--crit); background: color-mix(in srgb, var(--crit) 12%, transparent); } .qz-exp { margin-top: 16px; background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 10px; padding: 13px 15px; font-size: 14px; line-height: 1.55; } .qz-next { margin-top: 16px; text-align: right; } .qz-end-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; } .qz-card .r-low { color: var(--ok); } .qz-card .r-mid { color: var(--warn); } .qz-card .r-high { color: var(--high); } /* ============ Ma protection (particulier) ============ */ .prot-hero { display: flex; align-items: center; gap: 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--bg-soft)), color-mix(in srgb, var(--violet) 14%, var(--bg-soft))); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 18px; flex-wrap: wrap; } .prot-gauge { text-align: center; flex: none; } .prot-gauge-v { font-size: 40px; font-weight: 800; line-height: 1; } .prot-gauge-v.r-low { color: var(--ok); } .prot-gauge-v.r-mid { color: var(--warn); } .prot-gauge-v.r-high { color: var(--high); } .prot-gauge-l { font-size: 12px; color: var(--text-dim); } .prot-hero-txt { flex: 1; min-width: 220px; } .prot-level { font-size: 18px; font-weight: 800; margin-bottom: 8px; } .prot-level.r-low { color: var(--ok); } .prot-level.r-mid { color: var(--warn); } .prot-level.r-high { color: var(--high); } .prot-bar { height: 10px; background: var(--bg-card); border-radius: 999px; overflow: hidden; } .prot-bar-fill { height: 100%; border-radius: 999px; transition: width .35s; } .prot-bar-fill.r-low { background: var(--ok); } .prot-bar-fill.r-mid { background: var(--warn); } .prot-bar-fill.r-high { background: var(--high); } .prot-hero-s { font-size: 13px; color: var(--text-dim); margin-top: 8px; } .prot-list { display: flex; flex-direction: column; gap: 10px; } .prot-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .prot-card.open { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); } .prot-head { width: 100%; display: flex; align-items: center; gap: 12px; background: none; border: 0; color: var(--text); padding: 14px 16px; cursor: pointer; font: inherit; text-align: left; } .prot-ic { font-size: 22px; flex: none; } .prot-h-t { flex: 1; font-size: 15.5px; font-weight: 600; } .prot-h-p { font-size: 13px; font-weight: 700; color: var(--text-dim); } .prot-h-p.r-low { color: var(--ok); } .prot-chev { color: var(--text-dim); font-size: 13px; } .prot-mini { height: 3px; background: var(--bg-card); } .prot-mini-fill { height: 100%; background: var(--accent); transition: width .3s; } .prot-mini-fill.r-low { background: var(--ok); } .prot-body { padding: 4px 16px 16px; } .prot-why { font-size: 14px; color: var(--text-dim); line-height: 1.55; margin: 4px 0 14px; } .prot-acts { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .prot-act { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; font-size: 14px; transition: .12s; } .prot-act:hover { border-color: var(--accent); } .prot-act input { margin-top: 2px; flex: none; width: 17px; height: 17px; accent-color: var(--accent); } .prot-act.on { background: color-mix(in srgb, var(--ok) 9%, transparent); border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); } .prot-act.on span { color: var(--text-dim); text-decoration: line-through; } .prot-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; } .prot-tools-l { color: var(--text-dim); } .prot-tool { display: inline-flex; align-items: baseline; gap: 5px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; color: var(--text); text-decoration: none; } a.prot-tool:hover { border-color: var(--accent); } .prot-tool small { color: var(--text-dim); font-size: 11.5px; } .prot-gotos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .prot-ai { margin-top: 6px; } /* Bilan particulier — référentiel (compléments) */ .prot-gauge-v small { font-size: 18px; font-weight: 700; opacity: .55; } .prot-gauge-v.r-crit { color: var(--crit); } .prot-level.r-crit { color: var(--crit); } .prot-bar-fill.r-crit { background: var(--crit); } .prot-mini-fill.r-mid { background: var(--warn); } .prot-mini-fill.r-crit { background: var(--crit); } .prot-h-p.r-mid { color: var(--warn); } .prot-h-p.r-crit { color: var(--crit); } .prot-levelbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .prot-levelbar-l { font-size: 13px; color: var(--text-dim); font-weight: 600; margin-right: 2px; } .prot-lvl { border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-dim); font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: background .13s ease, color .13s ease, border-color .13s ease; } .prot-lvl:hover { color: var(--text); border-color: var(--text-dim); } .prot-lvl.on { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--violet)); } .prot-prio { background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; } .prot-prio-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 700; font-size: 14px; } .prot-prio-l { margin: 10px 0 0; padding-left: 20px; font-size: 14px; color: var(--text-dim); } .prot-prio-l li { margin: 4px 0; } .prot-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .prot-item { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; padding: 11px 13px; border: 1px solid var(--border-soft); border-left: 3px solid transparent; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bg-card) 55%, transparent); } .prot-item.is-ok { border-left-color: var(--ok); } .prot-item.is-mid { border-left-color: var(--warn); } .prot-item.is-crit { border-left-color: var(--crit); } .prot-item-txt { flex: 1; min-width: 0; font-size: 14px; line-height: 1.5; } .prot-niv { display: inline-block; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; margin-right: 8px; vertical-align: 1px; } .prot-niv.r-crit { background: color-mix(in srgb, var(--crit) 16%, transparent); color: var(--crit); } .prot-niv.r-mid { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); } .prot-niv.r-low { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); } .prot-seg { flex: none; } @media (max-width: 640px) { .prot-item { flex-direction: column; } .prot-seg { width: 100%; } .prot-seg.cf-seg { display: flex; } } @media (max-width: 680px) { .eb-metagrid { grid-template-columns: 1fr; } .eb-t { font-size: 12.5px; } } .report-doc .rd-ioc-cat li { font-family: "Segoe UI", sans-serif; font-size: 13px; word-break: break-all; } .report-doc code { font-family: Consolas, monospace; font-size: 12.5px; background: #f2f5f9; padding: 1px 4px; border-radius: 3px; } .report-doc .rd-tl li, .report-doc .rd-mitre li, .report-doc .rd-reco li { font-family: "Segoe UI", sans-serif; font-size: 14px; margin: 5px 0; } .report-doc .rd-tl-cat { color: #1f56cf; font-weight: 600; } .report-doc .rd-oblig { font-family: "Segoe UI", sans-serif; font-size: 13.5px; background: #fff7e6; border: 1px solid #e0b34d; border-radius: 6px; padding: 10px 12px; color: #7a5900; } .report-doc .rd-foot { margin-top: 26px; padding-top: 14px; border-top: 1px solid #e2e8f2; font-family: "Segoe UI", sans-serif; font-size: 12px; color: #888; } .srv-badge { display: inline-block; font-size: 11px; font-weight: 700; border: 1px solid; border-radius: 999px; padding: 1px 8px; vertical-align: middle; } .srv-status-l { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); } .srv-status { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px; font-family: inherit; font-size: 13px; } @media print { body.report-open > *:not(#report-modal) { display: none !important; } #report-modal { position: static; background: #fff; } .report-modal-bar { display: none !important; } .report-modal-body { overflow: visible; padding: 0; } .report-doc { box-shadow: none; max-width: 100%; padding: 0; } } /* ========================================================================= PREMIUM PASS — raffinement global (profondeur, respiration, transitions). Placé en fin de feuille (hors @media print) pour surcharger proprement. ========================================================================= */ :root { --bg: #080c17; --bg-soft: #0e1526; --bg-card: #141c32; --border: #222c47; --border-soft:#1a2339; --text: #eceff7; --text-dim: #97a3bd; --radius: 14px; --radius-sm: 9px; --radius-lg: 18px; --shadow-sm: 0 1px 2px rgba(0,0,0,.28), 0 4px 12px rgba(0,0,0,.22); --shadow: 0 2px 6px rgba(0,0,0,.3), 0 16px 44px rgba(0,0,0,.42); } :root[data-theme="light"] { --bg: #f4f7fc; --bg-soft: #ffffff; --bg-card: #ffffff; --border: #e3e9f3; --border-soft:#eef2f8; --text: #101c33; --text-dim: #56637d; --shadow-sm: 0 1px 2px rgba(16,28,51,.06), 0 4px 12px rgba(16,28,51,.06); --shadow: 0 2px 8px rgba(16,28,51,.08), 0 18px 44px rgba(16,28,51,.12); } * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-track { background: transparent; } /* Décor de page porté par (le canvas) pour laisser passer .app-fond. */ html { background: radial-gradient(1200px 560px at 50% -280px, #16213c 0%, rgba(22,33,60,0) 62%), var(--bg); background-attachment: fixed; } :root[data-theme="light"] { background: radial-gradient(1200px 560px at 50% -300px, #e7f0fc 0%, rgba(231,240,252,0) 60%), var(--bg); background-attachment: fixed; } /* En-tête translucide */ .app-header { background: color-mix(in srgb, var(--bg-soft) 80%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--border-soft); padding: 14px 30px; } :root[data-theme="light"] .app-header { background: color-mix(in srgb, #ffffff 78%, transparent); } .brand-text strong { letter-spacing: .16em; font-weight: 700; } /* Barre latérale + accordéon dynamique */ .sidebar { width: 258px; background: color-mix(in srgb, var(--bg-soft) 55%, transparent); border-right: 1px solid var(--border-soft); padding: 20px 14px 28px; display: flex; flex-direction: column; } /* Mascotte décorative — TOUJOURS visible en bas à gauche, le texte du menu glisse par-dessus */ .sidebar-mascot { position: sticky; /* reste ancrée au bas de la barre quand le menu défile */ bottom: 0; margin: auto -24px -150px -24px; /* top auto = pousse en bas ; bas négatif = déborde et coupe le bas du buste */ padding: 0; display: flex; justify-content: flex-start; align-items: flex-end; pointer-events: none; /* purement décoratif : aucun effet au survol */ z-index: 0; /* derrière le texte du menu */ } /* Le texte/les onglets du menu passent AU-DESSUS de la mascotte */ .sidebar > nav { position: relative; z-index: 1; } .sidebar-mascot img { width: 250px; max-width: none; height: auto; display: block; opacity: .16; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 100%); /* débleuie : silhouette neutre et discrète, sans teinte bleue forcée */ filter: grayscale(.5) saturate(.5) brightness(1.05) drop-shadow(0 8px 16px rgba(28, 38, 58, .1)); user-select: none; -webkit-user-drag: none; } .nav-group { margin-bottom: 4px; } .nav-group-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; margin-bottom: 2px; border-radius: 9px; cursor: pointer; user-select: none; transition: color .15s ease, background .15s ease; } .nav-group-t:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); } .nav-chev { font-size: 10px; opacity: .5; transition: transform .24s cubic-bezier(.2,.7,.2,1); flex: none; } .nav-group.collapsed .nav-chev { transform: rotate(-90deg); } .nav-grp-body { overflow: hidden; max-height: 900px; opacity: 1; transition: max-height .3s cubic-bezier(.2,.7,.2,1), opacity .22s ease; } .nav-group.collapsed .nav-grp-body { max-height: 0; opacity: 0; } .nav-group.collapsed .nav-group-t { color: var(--text-dim); } .nav-group.has-active-hidden .nav-group-t { color: var(--accent); } .nav-tab { border-radius: 10px; padding: 9px 12px; transition: background .15s ease, color .15s ease, transform .12s ease, border-color .15s ease; } .nav-tab:hover { background: color-mix(in srgb, var(--text) 6%, transparent); transform: translateX(2px); } .nav-tab.active { background: color-mix(in srgb, var(--accent) 16%, transparent); } @media (prefers-reduced-motion: reduce) { .nav-grp-body { transition: none; } .nav-chev { transition: none; } .nav-tab:hover { transform: none; } } /* Contenu : plus d'air, titres premium */ .app-body .app-main { max-width: 940px; padding: 40px 30px 76px; } .view-title { font-size: 27px; font-weight: 700; letter-spacing: -.015em; margin: 2px 0 7px; } .view-hint { font-size: 14.5px; line-height: 1.62; margin: 0 0 24px; } /* Boutons premium */ .btn { border-radius: 10px; transition: transform .12s ease, background .15s ease, box-shadow .16s ease, border-color .15s ease, opacity .13s ease; } .btn-primary { box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 34%, transparent); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 7px 22px color-mix(in srgb, var(--accent) 46%, transparent); } .btn-ghost { background: color-mix(in srgb, var(--text) 4%, transparent); } .btn-ghost:hover { background: color-mix(in srgb, var(--text) 9%, transparent); border-color: var(--text-dim); } .btn:active { transform: translateY(0); } /* Cartes & blocs : profondeur douce + survol */ .eb-block { border-radius: var(--radius); border-color: var(--border-soft); box-shadow: var(--shadow-sm); } .home-card { border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .home-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .conf-bar { border-radius: var(--radius-sm); transition: border-color .15s ease, transform .12s ease; } .conf-bar:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); } /* Champs : focus premium */ input, textarea, select { border-radius: 9px; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } /* Transition de vue plus soyeuse */ .view:not([hidden]) { animation: viewfade .28s cubic-bezier(.2,.7,.2,1); } /* ========================================================================= IDENTITÉ NEYSS — refonte esthétique (fond clair conservé) Direction : « cyber-guardian » d'après la mascotte — navy profond + bleu électrique néon, neutres froids, profondeur douce, touches lumineuses parcimonieuses. Bloc final : surcharge proprement les règles précédentes. ========================================================================= */ :root { --brand-ink: #0b1424; --brand-blue: #2f6bed; --brand-blue2: #1f56cf; --brand-grad: linear-gradient(100deg, #2f6bed 0%, #8b34f0 52%, #e03ad6 100%); --brand-grad-soft: linear-gradient(120deg, #2f6bed 0%, #8b34f0 100%); } :root[data-theme="light"] { --bg: #eef2f8; --bg-soft: #ffffff; --bg-card: #ffffff; --border: #dce5f2; --border-soft:#e9eff8; --text: #0d1a31; --text-dim: #55627c; --accent: #2f6bed; --accent-dark:#1f56cf; --shadow-sm: 0 1px 2px rgba(13,26,49,.05), 0 6px 16px rgba(23,60,130,.07); --shadow: 0 2px 10px rgba(13,26,49,.07), 0 22px 48px rgba(23,60,130,.13); } :root[data-theme="light"] { /* Canvas de l'app : base accordée à la teinte claire de l'image de fond (#f1f4f9, identique au bas de l'écran de connexion) → transition login → app sans rupture, et le décor .app-fond se fond dans le même ton. Halos violet/bleu = écho du néon de l'image. */ background: radial-gradient(1050px 500px at 80% -250px, color-mix(in srgb, #8b34f0 9%, transparent) 0, transparent 58%), radial-gradient(1200px 560px at 16% -300px, #dbeafe 0, rgba(219,234,254,0) 56%), #f1f4f9; background-attachment: fixed; } ::selection { background: color-mix(in srgb, var(--brand-blue) 22%, transparent); } /* En-tête : fin liseré électrique néon sous la barre */ .app-header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; } /* toujours visible (le ::after reste ancré, fixed = contexte de positionnement) */ .app-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand-grad); opacity: .85; } .brand { transition: transform .16s ease, filter .16s ease; } .brand:hover { transform: translateY(-1px); filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--brand-blue) 34%, transparent)); } .brand-logo { height: 42px; } /* Boutons primaires : dégradé électrique + halo */ .btn-primary, :root[data-theme="light"] .btn-primary { background: var(--brand-grad-soft); border-color: transparent; color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-blue) 26%, transparent); } .btn-primary:hover { filter: brightness(1.05); box-shadow: 0 8px 20px color-mix(in srgb, var(--brand-blue) 38%, transparent); } /* Barre latérale : indicateur électrique sur l'onglet actif */ .nav-tab.active { position: relative; color: var(--accent-dark); font-weight: 600; background: color-mix(in srgb, var(--brand-blue) 11%, transparent); } .nav-tab.active::before { content: ""; position: absolute; left: 3px; top: 7px; bottom: 7px; width: 3px; border-radius: 3px; background: var(--brand-grad); } /* Heros : dégradé bleu électrique / violet + bord lumineux */ .pg-hero, .prot-hero, .dash-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-blue) 12%, var(--bg-soft)), color-mix(in srgb, #8b34f0 10%, var(--bg-soft))); border-color: color-mix(in srgb, var(--brand-blue) 18%, var(--border)); } /* Cartes : profondeur froide + survol vivant */ .eb-block, .home-card, .home-section, .conf-panel { box-shadow: var(--shadow-sm); } .dos-card, .doc-card, .pb-card { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .dos-card:hover, .doc-card:hover, .pb-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--brand-blue) 26%, var(--border)); } /* Badge prototype : bleu discret plutôt qu'ambre (cohérence de marque) */ .badge-proto { color: var(--accent-dark); border-color: color-mix(in srgb, var(--brand-blue) 30%, transparent); background: color-mix(in srgb, var(--brand-blue) 8%, transparent); } /* Barre de défilement froide */ * { scrollbar-color: color-mix(in srgb, var(--brand-blue) 30%, var(--border)) transparent; } /* Logos de plateforme (Windows / Android / Apple) — SVG monochrome, à l'échelle du texte */ .os-ic { width: 1.18em; height: 1.18em; vertical-align: -.24em; flex: none; } .conf-tab .os-ic { margin-right: 4px; } /* Jeu d'icônes SVG « trait fin » — cohérent, hérite couleur & taille du texte */ .nic { width: 1.18em; height: 1.18em; vertical-align: -.24em; flex: none; } .nav-tab .nic { margin-right: 10px; opacity: .82; transition: opacity .15s ease; } .nav-tab:hover .nic, .nav-tab.active .nic { opacity: 1; } /* Bouton d'installation PWA (en-tête) — chip discret, apparaît si installable */ .header-install { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--accent-dark); background: color-mix(in srgb, var(--brand-blue, #2f6bed) 8%, transparent); border: 1px solid color-mix(in srgb, var(--brand-blue, #2f6bed) 32%, transparent); border-radius: 999px; padding: 6px 13px; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .12s ease; } .header-install:hover { background: color-mix(in srgb, var(--brand-blue, #2f6bed) 15%, transparent); transform: translateY(-1px); } .header-install .nic { width: 1.05em; height: 1.05em; vertical-align: -.18em; } @media (max-width: 640px) { .header-install .hi-label { display: none; } .header-install { padding: 7px; } } /* ============ IMPRESSION / PDF ============ */ @media print { :root { --bg: #fff; --bg-soft: #fff; --bg-card: #fff; --text: #111; --text-dim: #555; --border: #ccc; --border-soft: #e2e2e2; } body { background: #fff; color: #111; } .app-header, .main-nav, .stepper, .wizard-nav, .report-actions, .app-footer, .badge-proto, .chat-input, .chat-suggest { display: none !important; } .app-main { max-width: 100%; padding: 0; } .report-block, .report-head, .severity-banner, .alert-rgpd { break-inside: avoid; box-shadow: none; border-color: #ccc; } .report-head { background: #f4f6f8; } a { color: #111; text-decoration: none; } @page { margin: 16mm; } } /* ============ FINITIONS DA — typo « tech » (mono) sur les micro-labels ============ Calme et statique : aucune animation, aucune couleur ajoutée. */ .badge-proto, .pg-tag, .synth-tag, .srv-badge, .cf-badge, .cf-badge-ob, .cf-badge-out, .eb-badge, .hi-label, .nav-pill, .ms-due-pill, .eb-step-n, .prog-task-meta, .ti-meta, .srv-detail-meta, .srv-comment-meta { font-family: var(--mono); font-feature-settings: "tnum" 1; letter-spacing: .02em; } .eb-step-n { font-weight: 600; } /* ========================================================================= TRAJECTOIRE — temporalité (sparklines, deltas, échéancier unifié) ========================================================================= */ .traj-svg { display: block; overflow: visible; } /* Bandeau compact dans le tableau de bord */ .traj-strip { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 16px; transition: border-color .15s, box-shadow .15s; } .traj-strip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 14%, transparent); } .traj-strip-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; flex: none; background: linear-gradient(135deg, var(--accent), var(--violet)); color: #fff; } .traj-strip-ic i { width: 16px; height: 16px; background: #fff; } .traj-strip-lbl { font-weight: 700; font-size: 14px; } .traj-strip-cur { font-family: var(--mono); font-weight: 700; font-size: 15px; } .traj-strip-cur small { color: var(--text-dim); font-weight: 500; } .traj-strip-hint { color: var(--text-dim); font-size: 13px; } .traj-strip .traj-svg { flex: none; } .traj-strip-go { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--accent); white-space: nowrap; } /* Barre d'action */ .traj-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .traj-bar-info { font-size: 13px; color: var(--text-dim); font-family: var(--mono); } .traj-bar-info b { color: var(--text); } /* Delta chip */ .traj-d { display: inline-flex; align-items: center; gap: 3px; font-family: var(--mono); font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; letter-spacing: .01em; white-space: nowrap; } .traj-d small { font-weight: 500; opacity: .8; } .traj-d-up { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); } .traj-d-down { color: var(--crit); background: color-mix(in srgb, var(--crit) 13%, transparent); } .traj-d-flat { color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 12%, transparent); } /* Héros posture */ .traj-hero { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-bottom: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--bg-soft)), color-mix(in srgb, var(--violet) 12%, var(--bg-soft))); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; } .traj-hero-l { flex: 1; min-width: 200px; } .traj-hero-k { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-bottom: 4px; } .traj-hero-v { font-size: 44px; font-weight: 800; line-height: 1; margin-bottom: 8px; font-variant-numeric: tabular-nums; } .traj-hero-v small { font-size: 20px; font-weight: 600; color: var(--text-dim); } .traj-hero-s { font-size: 12.5px; color: var(--text-dim); margin-top: 6px; } .traj-hero-spark { flex: none; width: min(340px, 100%); } .traj-hero-spark .traj-svg { width: 100%; height: 90px; } .traj-hero-empty { align-items: center; } .traj-hero-empty .traj-hero-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; flex: none; background: linear-gradient(135deg, var(--accent), var(--violet)); } .traj-hero-empty .traj-hero-ic i { width: 26px; height: 26px; background: #fff; } .traj-hero-empty h3 { margin: 0 0 4px; font-size: 16px; } .traj-hero-empty p { margin: 0; font-size: 13.5px; color: var(--text-dim); max-width: 62ch; } /* Cartes de tendance */ .traj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 20px; } .traj-card { text-align: left; cursor: pointer; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, transform .1s; } .traj-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); transform: translateY(-1px); } .traj-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--text-dim); } .traj-card-v { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; } .traj-card-v small { font-size: 13px; font-weight: 500; color: var(--text-dim); } .traj-card-v .traj-na { color: var(--text-dim); } .traj-card-spark { height: 40px; } .traj-card-spark .traj-svg { width: 100%; height: 40px; } .traj-card-hint { font-size: 12px; color: var(--text-dim); } /* Échéancier unifié */ .traj-ech { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; } .traj-ech-top { margin-bottom: 12px; } .traj-ech-top h4 { margin: 0 0 2px; font-size: 15px; display: flex; align-items: center; gap: 8px; } .traj-ech-top h4 i { width: 16px; height: 16px; background: var(--accent); } .traj-ech-sub { font-size: 12.5px; color: var(--text-dim); } .traj-ech-group { margin-top: 14px; } .traj-ech-h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin-bottom: 6px; } .traj-ech-h i { width: 14px; height: 14px; background: currentColor; } .traj-ech-n { font-family: var(--mono); font-weight: 600; background: color-mix(in srgb, var(--text-dim) 16%, transparent); color: var(--text); border-radius: 999px; padding: 0 7px; font-size: 11px; } .traj-b-retard .traj-ech-h { color: var(--crit); } .traj-ech-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .traj-row { display: flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1px solid var(--border-soft); border-left: 3px solid var(--warn); border-radius: var(--radius-sm); padding: 9px 12px; } .traj-sev-haute { border-left-color: var(--crit); } .traj-sev-moyenne { border-left-color: var(--warn); } .traj-sev-basse { border-left-color: var(--ok); } .traj-row-when { font-family: var(--mono); font-size: 12px; font-weight: 600; white-space: nowrap; min-width: 96px; color: var(--text-dim); } .traj-row-when.late { color: var(--crit); } .traj-row-body { flex: 1; min-width: 0; } .traj-row-t { display: block; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; } .traj-row-meta { display: block; font-size: 11.5px; color: var(--text-dim); font-family: var(--mono); margin-top: 1px; } .traj-row-go { flex: none; font-size: 12px; font-weight: 600; color: var(--accent); background: none; border: none; cursor: pointer; padding: 4px 6px; white-space: nowrap; } .traj-row-go:hover { text-decoration: underline; } .traj-ech-empty { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-dim); padding: 10px 4px; } .traj-ech-empty i { width: 18px; height: 18px; background: var(--ok); flex: none; } @media (max-width: 560px) { .traj-hero-v { font-size: 36px; } .traj-row-when { min-width: 78px; font-size: 11px; } .traj-strip-go { display: none; } } /* ========================================================================= COCKPIT unifié — sélecteur de vue (ensemble / dirigeant / analyste) ========================================================================= */ .ck-switch { display: inline-flex; gap: 4px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 4px; margin-bottom: 18px; flex-wrap: wrap; } .ck-b { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; border-radius: 999px; padding: 8px 16px; font-size: 13.5px; color: var(--text-dim); cursor: pointer; font-weight: 600; } .ck-b i { width: 15px; height: 15px; background: currentColor; } .ck-b:hover { color: var(--text); } .ck-b.on { background: linear-gradient(135deg, var(--accent), var(--violet)); color: #fff; } .ck-b.on i { background: #fff; } @media (max-width: 560px) { .ck-switch { display: flex; width: 100%; } .ck-b { flex: 1; justify-content: center; padding: 8px 8px; } } /* ========================================================================= ACCESSIBILITÉ — anneau de focus clavier + cibles tactiles (audit a11y) ========================================================================= */ /* Rétablit un focus visible au clavier même là où un outline:none a été posé, sans le montrer au clic souris (:focus-visible). */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .nav-tab:focus-visible, .choice-card:focus-visible, .home-card:focus-visible, .seg-b:focus-visible, .cf-seg-b:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; } /* Sur écran tactile, agrandit la zone de tap des petits boutons icône. */ @media (pointer: coarse) { .lib-del, .cmt-btn, .msgr-del, .aud-seg-b, .bell-trigger { min-width: 40px; min-height: 40px; } } /* ============ MON PROFIL + ANNUAIRE D'ÉQUIPE ============ */ .pf-wrap { display: flex; flex-direction: column; gap: 16px; } .pf-loading { color: var(--text-dim); font-size: 14px; padding: 20px 4px; display: flex; align-items: center; gap: 8px; } /* Avatar (grand) */ .pf-ava { position: relative; width: 72px; height: 72px; border-radius: 999px; flex: none; display: grid; place-items: center; overflow: hidden; padding: 0; border: 2px solid var(--bg-card); background: linear-gradient(135deg, var(--accent), var(--violet)); box-shadow: var(--shadow-sm); } .pf-ava img { width: 100%; height: 100%; object-fit: cover; display: block; } .pf-ava-txt { color: #fff; font-size: 24px; font-weight: 700; } .pf-ava-edit { position: relative; display: inline-flex; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 999px; transition: box-shadow .12s; } .pf-ava-edit:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); } .pf-ava-cam { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 999px; background: var(--accent); color: #fff; display: grid; place-items: center; border: 2px solid var(--bg-card); } /* Mon profil */ .pf-me-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; } .pf-me-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .pf-name { background: transparent; border: 1px solid transparent; border-radius: 8px; font-family: inherit; font-size: 19px; font-weight: 700; color: var(--text); padding: 3px 6px; margin-left: -6px; max-width: 320px; } .pf-name:hover { border-color: var(--border); } .pf-name:focus { outline: none; border-color: var(--accent); background: var(--bg); } .pf-role-badge { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .pf-role-admin { color: var(--violet); background: color-mix(in srgb, var(--violet) 12%, transparent); border-color: color-mix(in srgb, var(--violet) 30%, transparent); } .pf-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .pf-f { display: flex; flex-direction: column; gap: 5px; } .pf-f > span { font-size: 12px; font-weight: 600; color: var(--text-dim); } .pf-f input { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; font-family: inherit; font-size: 14px; } .pf-f input:focus { outline: none; border-color: var(--accent); } .pf-f input:disabled { background: var(--bg-soft); color: var(--text-dim); cursor: not-allowed; } .pf-f-wide { grid-column: 1 / -1; } .pf-hint { margin: 12px 0 0; font-size: 12.5px; color: var(--text-dim); } /* Annuaire */ .pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .pf-card { display: flex; align-items: flex-start; gap: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 14px; } .pf-card-me { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 4%, var(--bg-card)); } .pf-card .pf-ava { width: 46px; height: 46px; } .pf-card .pf-ava-txt { font-size: 16px; } .pf-card-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .pf-card-id strong { font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-you { font-size: 10px; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 999px; padding: 0 6px; vertical-align: middle; } .pf-card-role { font-size: 12.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-card-contact { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; } .pf-contact { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-contact:hover { color: var(--accent); } .pf-contact svg, .pf-contact i { width: 13px; height: 13px; flex: none; } /* Rôle applicatif — étiquette inline sur les cartes de l'annuaire + contrôles du propriétaire. */ .pf-role-tag { display: inline-block; vertical-align: middle; margin-left: 6px; font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 999px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); } .pf-role-tag.pf-role-member { color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 10%, transparent); border-color: var(--border); } .pf-role-tag.pf-role-admin { color: var(--violet); background: color-mix(in srgb, var(--violet) 12%, transparent); border-color: color-mix(in srgb, var(--violet) 30%, transparent); } .pf-card-admin { display: flex; align-items: center; gap: 8px; margin-top: 9px; flex-wrap: wrap; } .pf-role-sel { font-size: 12px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text); } .pf-card-rm { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 8px; cursor: pointer; color: var(--crit); background: transparent; border: 1px solid color-mix(in srgb, var(--crit) 30%, transparent); } .pf-card-rm:hover { background: color-mix(in srgb, var(--crit) 10%, transparent); } /* ============ Avatar UNIQUE Neyss (.n-avatar) — photo / initiales / non assigné ============ Un seul composant pour la puce compte, l'annuaire, la messagerie, le suivi et la crise. Dégradé accent→violet unique, initiales sans-serif 700, photo en fond couvrant. */ .n-avatar { --n-av: 32px; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: var(--n-av); height: var(--n-av); flex: none; border-radius: 50%; overflow: hidden; font-family: inherit; font-weight: 700; font-size: calc(var(--n-av) * .42); line-height: 1; text-transform: uppercase; letter-spacing: .01em; color: #fff; background: linear-gradient(135deg, var(--accent), var(--violet)); background-size: cover; background-position: center; background-repeat: no-repeat; user-select: none; } .n-avatar--xs { --n-av: 24px; } .n-avatar--sm { --n-av: 32px; } .n-avatar--md { --n-av: 46px; } .n-avatar--lg { --n-av: 72px; } .n-avatar img { width: 100%; height: 100%; object-fit: cover; } .n-avatar--empty { color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 12%, transparent); } .n-avatar--empty svg { width: 58%; height: 58%; } /* ============ Mon compte (espace personnel) + résumé profil ============ */ .cpt-wrap { display: flex; flex-direction: column; gap: 16px; } .pf-name-ro { font-size: 16px; font-weight: 700; color: var(--text); } .pf-me-poste { font-weight: 500; color: var(--text-dim); font-size: 13px; } .pf-me-head .pf-goto-compte { margin-left: auto; align-self: center; } .cpt-access { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); padding: 12px 14px; border-radius: var(--radius-sm, 8px); border: 1px solid var(--border); background: color-mix(in srgb, var(--ok, #16a34a) 8%, transparent); } .cpt-access i { color: var(--ok, #16a34a); flex: none; } .cpt-access-warn { background: color-mix(in srgb, var(--crit) 8%, transparent); } .cpt-access-warn i { color: var(--crit); } .cpt-msg { font-size: 12.5px; margin: 8px 0 0; } .cpt-msg.cpt-ok { color: var(--ok, #16a34a); } .cpt-msg.cpt-err { color: var(--crit); } .cpt-danger { border-color: color-mix(in srgb, var(--crit) 35%, var(--border)); } .cpt-danger h4 i { color: var(--crit); } .btn-danger { color: #fff; background: var(--crit); border: 1px solid var(--crit); } .btn-danger:hover { filter: brightness(.92); } /* Demandes d'adhésion à l'entreprise (le propriétaire décide, avec les infos du demandeur). */ .pf-reqs { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .pf-req-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); background: var(--bg-card); } .pf-req-id { display: flex; flex-direction: column; min-width: 140px; flex: 1; } .pf-req-id strong { font-size: 14px; color: var(--text); } .pf-req-meta { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; } .pf-req-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pf-req-role { font-size: 12px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text); } /* Invitations d'entreprise */ .pf-invite-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 8%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); font-size: 14px; color: var(--text); } .pf-invite-banner i, .pf-invite-banner svg { width: 18px; height: 18px; color: var(--accent); flex: none; } .pf-invite-banner span { flex: 1; min-width: 160px; } .pf-invite-wrap { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); } .pf-invite-h { font-size: 13px; font-weight: 700; color: var(--text-dim); margin-bottom: 8px; } .pf-invite { display: flex; gap: 8px; flex-wrap: wrap; } .pf-invite #pf-inv-email { flex: 1; min-width: 180px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; font-family: inherit; font-size: 14px; } .pf-invite select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 10px; font-family: inherit; font-size: 13px; } .pf-invites { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .pf-inv-row { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 6px 10px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); } .pf-inv-mail { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .pf-inv-badge { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; } .pf-inv-x { background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 6px; flex: none; } .pf-inv-x:hover { color: var(--crit); background: color-mix(in srgb, var(--crit) 10%, transparent); } /* ============ SUIVI D'ÉQUIPE (Kanban / Gantt / Charge) ============ */ /* Couleur sémantique par statut, portée par une variable --c. */ .su-bar-todo, .su-h-todo, .su-num.su-bar-todo { --c: #7c8aa5; } .su-bar-mid, .su-h-mid, .su-num.su-bar-mid { --c: var(--accent); } .su-bar-blk, .su-h-blk, .su-num.su-bar-blk { --c: var(--crit); } .su-bar-ok, .su-h-ok, .su-num.su-bar-ok { --c: var(--ok); } .su-bar-late { --c: var(--crit); } .su-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .su-switch { display: inline-flex; gap: 4px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 4px; } .su-b { display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent; color: var(--text-dim); font-family: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: background .12s, color .12s; } .su-b:hover { color: var(--text); } .su-b.on { background: var(--accent); color: #fff; } .su-b i { width: 15px; height: 15px; } .su-filters { display: flex; gap: 8px; flex-wrap: wrap; } .su-pri { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; } .su-pri.r-crit { color: var(--crit); background: color-mix(in srgb, var(--crit) 12%, transparent); border: 1px solid color-mix(in srgb, var(--crit) 35%, transparent); } .su-pri.r-mid { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); } .su-pri.r-low { color: var(--text-dim); background: var(--bg-soft); border: 1px solid var(--border); } /* Avatars */ .su-ava { width: 26px; height: 26px; border-radius: 999px; flex: none; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent), var(--violet)); background-size: cover; background-position: center; } .su-ava-none { background: var(--bg-card); color: var(--text-dim); border: 1px dashed var(--border); } .su-ava-none i { width: 13px; height: 13px; } .su-ava-lg { width: 36px; height: 36px; font-size: 13px; } /* Ajout rapide */ .su-quickadd { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; } .su-quickadd #su-add-t { flex: 1; min-width: 200px; background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; font-family: inherit; font-size: 14px; } .su-quickadd select { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 10px; font-family: inherit; font-size: 13px; } /* --- Kanban --- */ .su-board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; align-items: start; } .su-col { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; min-height: 120px; } .su-col-h { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; font-weight: 700; font-size: 13px; border-bottom: 2px solid var(--c); border-radius: var(--radius) var(--radius) 0 0; color: var(--text); } .su-col-h .su-col-n { background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); font-size: 12px; padding: 0 8px; border-radius: 999px; min-width: 22px; text-align: center; } .su-col-body { padding: 10px; display: flex; flex-direction: column; gap: 10px; flex: 1; transition: background .12s; border-radius: 0 0 var(--radius) var(--radius); } .su-col-over { background: color-mix(in srgb, var(--accent) 9%, transparent); outline: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: -4px; } .su-col-empty { color: var(--text-dim); font-size: 12.5px; text-align: center; padding: 18px 8px; border: 1px dashed var(--border); border-radius: var(--radius-sm); } .su-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 11px; box-shadow: var(--shadow-sm); cursor: grab; display: flex; flex-direction: column; gap: 8px; } .su-card:active { cursor: grabbing; } .su-card.su-drag { opacity: .45; } .su-card-done { opacity: .68; } .su-card-done .su-card-t { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-dim) 60%, transparent); } .su-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .su-src { font-size: 10.5px; color: var(--text-dim); font-family: var(--mono); text-transform: uppercase; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .su-card-t { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--text); } /* Assignation par avatar cliquable (façon photo de profil) */ .su-assign-wrap { position: relative; align-self: flex-start; max-width: 100%; } .su-assign-btn { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 3px 10px 3px 3px; cursor: pointer; font-family: inherit; max-width: 100%; transition: background .12s, border-color .12s; } .su-assign-btn:hover { background: var(--bg-soft); border-color: var(--border); } .su-assign-name { font-size: 12px; font-weight: 600; color: var(--text); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .su-assign-name.su-assign-none { color: var(--text-dim); font-weight: 500; } .su-picker { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 190px; max-height: 240px; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 5px; } .su-pick-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: transparent; border: none; border-radius: 8px; padding: 7px 9px; cursor: pointer; font-family: inherit; font-size: 12.5px; color: var(--text); } .su-pick-item:hover { background: var(--bg-soft); } .su-pick-item.on { background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; } .su-pick-free { color: var(--text-dim); font-size: 11px; font-weight: 400; } /* Dates début → échéance */ .su-card-dates { display: flex; align-items: center; gap: 4px; color: var(--text-dim); font-size: 11px; } .su-dt-ic { width: 13px; height: 13px; flex: none; } .su-card-dates input[type="date"] { background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--text-dim); font-family: inherit; font-size: 11px; padding: 1px 3px; flex: 1; min-width: 0; cursor: pointer; } .su-card-dates input[type="date"]:hover { border-color: var(--border); } .su-card-dates input.su-late { color: var(--crit); font-weight: 600; } .su-arrow { color: var(--border); flex: none; } .su-badge-late { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; font-size: 11px; font-weight: 600; color: var(--crit); background: color-mix(in srgb, var(--crit) 10%, transparent); border: 1px solid color-mix(in srgb, var(--crit) 30%, transparent); padding: 2px 8px; border-radius: 999px; } .su-badge-late i { width: 12px; height: 12px; } /* --- Gantt / échéancier --- */ .su-gantt { padding: 14px; } .su-g-scroll { overflow-x: auto; } .su-g-head, .su-g-row { display: grid; grid-template-columns: 220px 1fr; align-items: center; } .su-g-head { position: sticky; top: 0; z-index: 2; } .su-g-lbl { font-size: 12.5px; color: var(--text); padding: 6px 10px 6px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .su-g-lbl-h { font-weight: 700; color: var(--text-dim); text-transform: uppercase; font-size: 11px; letter-spacing: .04em; } .su-g-track { position: relative; height: 26px; min-width: 520px; } .su-g-axis { height: 30px; border-bottom: 1px solid var(--border); } .su-g-week { position: absolute; top: 6px; font-size: 10.5px; color: var(--text-dim); font-family: var(--mono); padding-left: 4px; border-left: 1px solid var(--border-soft); height: 22px; box-sizing: border-box; white-space: nowrap; } .su-g-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--violet); z-index: 3; } .su-g-today::after { content: "auj."; position: absolute; top: 2px; left: 3px; font-size: 9px; color: var(--violet); font-weight: 700; } .su-g-rows { border-top: 1px solid var(--border-soft); } .su-g-row { border-bottom: 1px solid var(--border-soft); } .su-g-row:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); } .su-g-bar { position: absolute; top: 5px; height: 16px; background: var(--c); border-radius: 5px; display: flex; align-items: center; overflow: hidden; box-shadow: 0 1px 3px rgba(16,28,51,.15); min-width: 6px; } .su-g-bar-txt { font-size: 9.5px; color: #fff; font-weight: 600; padding: 0 6px; white-space: nowrap; text-shadow: 0 1px 1px rgba(0,0,0,.25); } .su-bar-late.su-g-bar { background: repeating-linear-gradient(45deg, var(--crit), var(--crit) 6px, color-mix(in srgb, var(--crit) 70%, #000) 6px, color-mix(in srgb, var(--crit) 70%, #000) 12px); } .su-g-group { display: flex; align-items: center; gap: 8px; padding: 10px 0 6px; font-weight: 700; font-size: 12.5px; color: var(--text); border-bottom: 1px solid var(--border-soft); margin-top: 4px; } .su-g-group .su-g-count { margin-left: auto; color: var(--text-dim); font-size: 11px; font-weight: 600; background: var(--bg-soft); border-radius: 999px; padding: 0 8px; } .su-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft); } .su-lg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-dim); } .su-dot { width: 11px; height: 11px; border-radius: 3px; background: var(--c); display: inline-block; } .su-undated { display: flex; flex-wrap: wrap; gap: 8px; } .su-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px 4px 6px; font-size: 12.5px; color: var(--text); } /* --- Charge d'équipe --- */ .su-team { display: flex; flex-direction: column; } .su-team-row { display: grid; grid-template-columns: minmax(160px, 1.2fr) 2fr auto; gap: 16px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--border-soft); } .su-team-row:last-child { border-bottom: none; } .su-team-who { display: flex; align-items: center; gap: 10px; min-width: 0; } .su-team-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .su-team-id strong { font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .su-team-sub { font-size: 11.5px; color: var(--text-dim); } .su-team-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--bg-soft); border: 1px solid var(--border); } .su-seg { background: var(--c); min-width: 3px; } .su-team-nums { display: flex; gap: 6px; } .su-num { min-width: 26px; text-align: center; font-size: 12px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border-radius: 6px; padding: 3px 0; } @media (max-width: 900px) { .su-board { grid-template-columns: repeat(4, minmax(200px, 1fr)); overflow-x: auto; padding-bottom: 6px; } .su-team-row { grid-template-columns: 1fr auto; } .su-team-bar { grid-column: 1 / -1; order: 3; } } @media (max-width: 560px) { .su-toolbar { flex-direction: column; align-items: stretch; } .su-switch { justify-content: center; } } /* ========================================================================= Moteur IA (Mon compte) — choix souverain, gouverné côté serveur. Mistral 🇫🇷 par défaut ; Anthropic 🇺🇸 en option, avec avertissements. ========================================================================= */ .ai-flag { height: 14px; width: auto; max-width: 26px; border-radius: 2px; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); box-shadow: 0 1px 2px rgba(13, 26, 49, .12); flex: none; vertical-align: middle; } /* Badge « moteur actif » */ .ai-current { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 12px; } .ai-current-lbl { font-size: .74rem; color: var(--text-dim); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .ai-badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-soft); box-shadow: var(--shadow-sm); } .ai-badge-lbl { font-weight: 700; color: var(--text); } .ai-badge-juris { font-size: .82rem; color: var(--text-dim); } .ai-badge-juris::before { content: "·"; margin-right: 8px; color: color-mix(in srgb, var(--text-dim) 55%, transparent); } .ai-badge-anthropic { border-color: color-mix(in srgb, var(--warn) 42%, var(--border)); } /* Liste d'implications réglementaires / données */ .ai-impl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .ai-impl li { display: flex; align-items: flex-start; gap: 9px; font-size: .9rem; line-height: 1.45; color: var(--text); } .ai-impl li i { margin-top: .12em; font-size: 1.05em; flex: none; } .ai-impl li em { font-style: italic; opacity: .95; } .ai-impl-ok i { color: var(--ok); } .ai-impl-info i { color: var(--accent); } .ai-impl-warn i { color: var(--warn); } .ai-impl-box { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--bg) 55%, var(--bg-soft)); } /* Bandeau « moteur IA à confirmer » (nouvel utilisateur / changement non acquitté) */ .ai-ackbar { display: flex; gap: 11px; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--warn) 9%, var(--bg-soft)); margin-bottom: 14px; } .ai-ackbar > i { color: var(--warn); font-size: 1.25em; flex: none; margin-top: .1em; } .ai-ackbar-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .ai-ackbar-body > strong { color: var(--text); } .ai-ackbar-body > p { margin: 0; font-size: .9rem; color: var(--text-dim); } /* Éditeur : deux options radio + implications live + consentement + mot de passe */ .ai-editor { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; padding: 15px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-soft); box-shadow: var(--shadow-sm); } .ai-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; } @media (max-width: 560px) { .ai-opts { grid-template-columns: 1fr; } } .ai-opt { position: relative; display: block; cursor: pointer; padding: 13px 14px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--bg); transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } .ai-opt:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .ai-opt input { position: absolute; opacity: 0; pointer-events: none; } .ai-opt-cur { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--bg-soft)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); } .ai-opt-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .ai-opt-head b { color: var(--text); } .ai-opt-juris { font-size: .82rem; color: var(--text-dim); flex-basis: 100%; } .ai-reco { margin-left: auto; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); padding: 2px 8px; border-radius: 999px; } /* Consentement « en connaissance de cause » */ .ai-consent { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; line-height: 1.45; color: var(--text); cursor: pointer; } .ai-consent input { margin-top: .16em; width: 17px; height: 17px; flex: none; accent-color: var(--accent); } /* Historique des décisions (transparence d'équipe) */ .ai-hist { list-style: none; margin: 10px 0 0; padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .ai-hist li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 9px 12px; font-size: .86rem; } .ai-hist li:nth-child(odd) { background: color-mix(in srgb, var(--bg) 50%, var(--bg-soft)); } .ai-hist-when { color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; } .ai-hist-typ { color: var(--text); font-weight: 600; } .ai-hist-prov { margin-left: auto; color: var(--accent-dark); font-weight: 700; } .ai-hist-by { flex-basis: 100%; font-size: .8rem; color: var(--text-dim); } /* Modale de verrou « moteur IA à confirmer » (assistant) — non contournable */ .ai-gate-ov { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: color-mix(in srgb, var(--brand-ink) 55%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: aiGateIn .16s ease; } @keyframes aiGateIn { from { opacity: 0; } to { opacity: 1; } } .ai-gate { width: min(520px, 100%); max-height: 90vh; overflow-y: auto; padding: 22px 22px 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-soft); box-shadow: var(--shadow); } .ai-gate h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 1.12rem; color: var(--text); } .ai-gate-lead { margin: 0 0 14px; font-size: .92rem; line-height: 1.5; color: var(--text-dim); } .ai-gate .ai-impl { margin-bottom: 6px; } .ai-gate-err { margin: 10px 0 0; font-size: .86rem; color: var(--warn); } .ai-gate-bar { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; } @media (max-width: 560px) { .ai-gate-bar { flex-direction: column-reverse; } .ai-gate-bar .btn { width: 100%; } }