/* ============================================================================ console.css — design system "Pro / corporate" partagé (issu de Claude Design) ---------------------------------------------------------------------------- Shell à sidebar + patterns de contenu (tables, formulaires, stats, pills, toggles, modération, portfolio, tâches/versions, permissions/habilitations). INTÉGRATION AVEC palette.js : - Tout est piloté par --accent (posé sur :root par palette.js → 24 couleurs). - Les NEUTRES (bg/surface/texte/bordures) sont définis ICI, scopés sous .console, en deux ambiances : clair (défaut) et sombre ([data-theme=dark]). - .console se met sur . palette.js pose ses neutres en inline sur (=:root) ; comme .console redéfinit les neutres plus près dans la cascade, ce sont les neutres corp qui s'appliquent sur les pages refondues — sans impacter le dashboard ni les autres sites. Statuts = couleurs sémantiques fixes (vert/bleu/ambre/gris/rouge). ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=JetBrains+Mono:wght@500&display=swap'); /* ── Tokens : accent (hérité de palette.js) + neutres corp + dérivés ── */ .console{ /* --accent est hérité de :root (posé par palette.js). Ne pas le redéfinir ici (une auto-référence var(--accent) invaliderait la variable). */ --accent-2: color-mix(in srgb, var(--accent, #ef4444), #000 16%); --on-accent: #ffffff; --badge-bg: color-mix(in srgb, var(--accent, #ef4444) 12%, transparent); --badge-text: var(--accent, #ef4444); --radius: 11px; --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif; --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* neutres — ambiance CLAIRE (défaut) */ --bg: #f3f5f8; --surface: #ffffff; --surface-2: #f6f8fb; --border: #e4e8ee; --border-strong: #d2d8e1; --text: #1c2531; --text-muted: #586273; --text-faint: #8b95a4; } :root[data-theme="dark"] .console{ /* neutres — ambiance SOMBRE (variante du corp, mêmes rôles) */ --bg: #0f1318; --surface: #161b22; --surface-2: #1c232c; --border: rgba(255,255,255,.10); --border-strong: rgba(255,255,255,.20); --text: #e7ebf0; --text-muted: #9aa4b2; --text-faint: #69727f; } /* ── Base / reset (scopé) ── */ .console{ margin:0; min-height:100vh; font-family: var(--font-sans); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .console *, .console *::before, .console *::after{ box-sizing: border-box; } .console h1,.console h2,.console h3,.console p{ margin:0; } .console a{ color: inherit; text-decoration: none; } .console button{ font: inherit; cursor: pointer; border: none; background: none; color: inherit; } .console input,.console textarea,.console select{ font: inherit; outline: none; } .console ::placeholder{ color: var(--text-faint); } .console .wordmark{ font-weight: 800; letter-spacing: -0.03em; } .console .ver{ font-family: var(--font-mono); font-weight:500; font-size:11px; letter-spacing:.02em; color: var(--badge-text); background: var(--badge-bg); padding:2px 7px; border-radius:999px; white-space:nowrap; border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); } .console .empty{ color: var(--text-faint); font-size:14px; padding:28px 4px; } /* ════════ SHELL : layout sidebar + main ════════ */ .console .shell{ display:grid; grid-template-columns:236px 1fr; min-height:100vh; } .console .side{ background:var(--surface); border-right:1px solid var(--border); padding:22px 16px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; } .console .side .brand{ display:flex; align-items:center; gap:11px; padding:4px 8px 22px; } .console .side .brand img{ width:30px; height:30px; display:block; } .console .side .wordmark{ font-size:20px; } .console .side .brand small{ display:block; font-size:11px; color:var(--text-faint); font-weight:500; } .console .navlbl{ font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-faint); padding:14px 10px 6px; } .console .nav{ display:flex; flex-direction:column; gap:2px; } .console .nav a, .console .nav button{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 10px; border-radius:8px; font-size:13.5px; font-weight:500; color:var(--text-muted); transition:background .12s,color .12s; } .console .nav a:hover, .console .nav button:hover{ background:var(--surface-2); color:var(--text); } .console .nav a.on, .console .nav button.on{ background:var(--badge-bg); color:var(--accent); font-weight:600; } .console .nav a.on svg, .console .nav button.on svg{ color:var(--accent); } .console .nav svg{ width:17px; height:17px; flex:0 0 auto; } .console .side .user{ margin-top:auto; display:flex; align-items:center; gap:10px; padding:10px; border-top:1px solid var(--border); } .console .side .ava{ width:32px; height:32px; border-radius:50%; background:var(--accent); color:var(--on-accent); display:grid; place-items:center; font-weight:700; font-size:13px; } .console .side .user .who{ font-size:12.5px; font-weight:600; min-width:0; } .console .side .user .who small{ display:block; color:var(--text-faint); font-weight:500; } .console .main{ display:flex; flex-direction:column; min-width:0; } .console .bar{ display:flex; align-items:center; gap:18px; padding:18px 30px; border-bottom:1px solid var(--border); background:var(--surface); position:sticky; top:0; z-index:20; } .console .bar h1{ font-size:19px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; } .console .bar h1 small{ display:block; font-size:12.5px; color:var(--text-muted); font-weight:500; } .console .bar .spacer{ flex:1; } .console .search{ display:flex; align-items:center; gap:9px; width:250px; border:1px solid var(--border); border-radius:9px; padding:9px 13px; color:var(--text-faint); background:var(--surface-2); transition:border-color .15s,box-shadow .15s; } .console .search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--badge-bg); background:var(--surface); } .console .search input{ flex:1; color:var(--text); border:none; background:none; } .console .search svg{ width:16px; height:16px; flex:0 0 auto; } .console .btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 17px; border-radius:9px; background:var(--accent); color:var(--on-accent); font-weight:600; font-size:13.5px; transition:background .15s; white-space:nowrap; } .console .btn:hover{ background:var(--accent-2); } .console .btn.ghost{ background:var(--surface); color:var(--text-muted); border:1px solid var(--border); } .console .btn.ghost:hover{ background:var(--surface-2); color:var(--text); } .console .btn svg{ width:16px; height:16px; } .console .body{ padding:26px 30px; flex:1; overflow-y:auto; } .console .seclbl{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin:0 0 13px; font-weight:600; } .console .seclbl:not(:first-child){ margin-top:26px; } .console .foot{ padding:14px 30px; border-top:1px solid var(--border); font-size:12px; color:var(--text-faint); background:var(--surface); } .console .foot b{ color:var(--accent); font-weight:700; } /* segmented control (onglets de la barre) */ .console .seg{ display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:3px; } .console .seg button{ font-size:13px; font-weight:600; padding:6px 14px; border-radius:7px; color:var(--text-muted); transition:.15s; } .console .seg button.on, .console .seg button.active{ background:var(--surface); color:var(--text); box-shadow:0 1px 2px rgba(20,40,80,.12); } .console .hidden{ display:none !important; } .console #result-msg{ margin-top:14px; font-size:13.5px; font-weight:600; } .console #result-msg.success{ color:#15803d; } .console #result-msg.error{ color:#b91c1c; } .console #fb-alert .msg{ margin-bottom:14px; padding:11px 14px; border-radius:9px; font-size:13px; font-weight:600; border:1px solid; } .console #fb-alert .msg.success{ color:#15803d; background:#f0fdf4; border-color:#bbf7d0; } .console #fb-alert .msg.error{ color:#b91c1c; background:#fef2f2; border-color:#fecaca; } .console .field-error{ display:block; color:#b91c1c; font-size:12px; margin-top:6px; } .console .field-error:empty{ display:none; } .console .field-error.visible{ display:block; } .console .muted{ color:var(--text-faint); font-weight:500; } .console details.done-feedback-toggle{ margin-top:14px; border-top:1px solid var(--border); } .console details.done-feedback-toggle summary{ cursor:pointer; padding:12px 4px; font-size:12.5px; font-weight:600; color:var(--text-muted); } /* ════════ Cartes de services (dashboard-like) ════════ */ .console .cardgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; } .console .scard{ display:flex; gap:14px; padding:16px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); transition:border-color .15s,box-shadow .15s; } .console .scard:hover{ border-color:var(--border-strong); box-shadow:0 6px 20px -14px rgba(20,40,80,.4); } .console .scard .ico{ flex:0 0 auto; width:40px; height:40px; border-radius:9px; background:var(--surface-2); border:1px solid var(--border); color:var(--accent); display:grid; place-items:center; } .console .scard .meta{ min-width:0; flex:1; } .console .scard .crow{ display:flex; align-items:center; gap:9px; } .console .scard h3{ font-size:14.5px; font-weight:600; } .console .scard .dot{ width:7px; height:7px; border-radius:50%; background:#22c55e; margin-left:auto; box-shadow:0 0 0 3px color-mix(in srgb,#22c55e 22%,transparent); } .console .scard p{ font-size:12.5px; line-height:1.5; color:var(--text-muted); margin-top:5px; } /* ════════ Panels ════════ */ .console .panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; } .console .panel + .panel{ margin-top:16px; } .console .panel-h{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border); } .console .panel-h h2{ font-size:14px; font-weight:700; letter-spacing:-.01em; } .console .panel-h .sub{ font-size:12px; color:var(--text-muted); } .console .panel-h .right{ margin-left:auto; display:flex; align-items:center; gap:8px; } .console .panel-b{ padding:16px 18px; } .console .panel-b.flush{ padding:4px 8px; } .console .pg-grid{ display:grid; gap:16px; } .console .cols-2{ display:grid; grid-template-columns:1.45fr 1fr; gap:16px; align-items:start; } /* ════════ Tables ════════ */ .console .tbl{ width:100%; border-collapse:collapse; } .console .tbl th{ text-align:left; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--text-faint); font-weight:600; padding:8px 14px; } .console .tbl td{ padding:12px 14px; border-top:1px solid var(--border); font-size:13px; color:var(--text); vertical-align:middle; } .console .tbl tbody tr{ transition:background .12s; } .console .tbl tbody tr:hover td{ background:var(--surface-2); } .console .tbl .nm{ font-weight:600; white-space:nowrap; } .console .tbl .sub{ font-size:11.5px; color:var(--text-faint); font-weight:500; margin-top:1px; } .console .tbl .right{ text-align:right; } .console .mono{ font-family:var(--font-mono); font-size:12px; } /* ════════ Status pills (sémantique fixe) ════════ */ .console .st{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:3px 9px 3px 8px; border-radius:999px; white-space:nowrap; } .console .st::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; } .console .st.actif{ color:#fff; background:#16a34a; } .console .st.dev{ color:#fff; background:#2563eb; } .console .st.maint{ color:#fff; background:#e0820a; } .console .st.inactif{ color:#fff; background:#64748b; } .console .st.pending{ color:#fff; background:#e0820a; } .console .st.approved{ color:#fff; background:#16a34a; } .console .st.refused{ color:#fff; background:#dc2626; } /* ════════ Chips / filtres ════════ */ .console .filters{ display:flex; gap:8px; flex-wrap:wrap; } .console .chip{ font-size:12.5px; font-weight:500; padding:7px 13px; border-radius:8px; border:1px solid var(--border); color:var(--text-muted); background:var(--surface); transition:.12s; white-space:nowrap; } .console .chip:hover{ background:var(--surface-2); color:var(--text); } .console .chip.on{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); } .console .chip .cnt{ opacity:.7; margin-left:5px; font-variant-numeric:tabular-nums; } /* ════════ Stat cards ════════ */ .console .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .console .stat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:15px 17px; } .console .stat .top{ display:flex; align-items:center; justify-content:space-between; } .console .stat .ic{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:var(--accent); background:var(--badge-bg); } .console .stat .ic.green{ color:#16a34a; background:#dcfce7; } .console .stat .ic.amber{ color:#d97706; background:#fef3c7; } .console .stat .ic.red{ color:#dc2626; background:#fee2e2; } .console .stat .n{ font-size:27px; font-weight:700; letter-spacing:-.02em; margin-top:10px; font-variant-numeric:tabular-nums; } .console .stat .l{ font-size:12.5px; color:var(--text-muted); margin-top:1px; } /* ════════ Action buttons ════════ */ .console .iact{ width:30px; height:30px; border-radius:8px; border:1px solid var(--border); color:var(--text-muted); display:inline-grid; place-items:center; background:var(--surface); transition:.12s; } .console .iact:hover:not(:disabled){ background:var(--surface-2); color:var(--text); } .console .iact.danger:hover:not(:disabled){ color:#dc2626; border-color:#fecaca; background:#fef2f2; } .console .iact:disabled{ opacity:.38; cursor:not-allowed; } .console .iact svg{ width:15px; height:15px; } .console .row-actions{ display:inline-flex; gap:6px; } .console .btn-sm{ font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:8px; display:inline-flex; gap:6px; align-items:center; border:1px solid var(--border); background:var(--surface); color:var(--text-muted); transition:.12s; } .console .btn-sm:hover:not(:disabled){ background:var(--surface-2); } .console .btn-app{ color:#15803d; border-color:#bbf7d0; background:#f0fdf4; } .console .btn-app:hover:not(:disabled){ background:#dcfce7; } .console .btn-ref{ color:#b91c1c; border-color:#fecaca; background:#fef2f2; } .console .btn-ref:hover:not(:disabled){ background:#fee2e2; } .console .btn-sm:disabled{ opacity:.4; cursor:not-allowed; } /* ════════ Toggle switch ════════ */ .console .sw{ width:36px; height:21px; border-radius:999px; background:var(--border-strong); position:relative; transition:.15s; cursor:pointer; flex:0 0 auto; display:inline-block; border:none; } .console .sw.on{ background:#22c55e; } .console .sw::after{ content:''; position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:#fff; transition:.15s; box-shadow:0 1px 2px rgba(0,0,0,.25); } .console .sw.on::after{ transform:translateX(15px); } /* ════════ Formulaires ════════ */ .console .form{ max-width:720px; } .console .field{ margin-bottom:18px; } .console .lbl{ display:block; font-size:13px; font-weight:600; margin-bottom:8px; color:var(--text); } .console .lbl .opt{ color:var(--text-faint); font-weight:500; } .console .lbl .req{ color:var(--accent); margin-left:2px; } .console .radio-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } .console .radio{ display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 10px; border:1px solid var(--border); border-radius:10px; font-size:13.5px; font-weight:500; color:var(--text); background:var(--surface); cursor:pointer; transition:.12s; } .console .radio:hover{ background:var(--surface-2); } .console .radio.on, .console .radio:has(input:checked){ border-color:var(--accent); background:var(--badge-bg); color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); } .console .radio input{ position:absolute; opacity:0; pointer-events:none; } .console .inp,.console .ta,.console .sel{ width:100%; border:1px solid var(--border); border-radius:10px; background:var(--surface); padding:11px 13px; font-size:14px; color:var(--text); transition:border-color .15s,box-shadow .15s; } .console .inp::placeholder,.console .ta::placeholder{ color:var(--text-faint); } .console .inp:focus,.console .ta:focus,.console .sel:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--badge-bg); } .console .ta{ min-height:118px; resize:vertical; line-height:1.55; font-family:inherit; } .console .cnt{ text-align:right; font-size:12px; color:var(--text-faint); margin-top:6px; } .console .fgrid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .console .selwrap{ position:relative; } .console .selwrap .car{ position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--text-faint); pointer-events:none; } .console .sel{ appearance:none; -webkit-appearance:none; padding-right:36px; cursor:pointer; } /* ════════ Bannière de confirmation ════════ */ .console .note{ display:flex; align-items:center; gap:10px; padding:12px 15px; border-radius:10px; font-size:13.5px; font-weight:500; margin-bottom:18px; border:1px solid; } .console .note.ok{ color:#15803d; background:#f0fdf4; border-color:#bbf7d0; } .console .note.err{ color:#b91c1c; background:#fef2f2; border-color:#fecaca; } .console .note .x{ width:18px; height:18px; border-radius:50%; background:#16a34a; color:#fff; display:grid; place-items:center; flex:0 0 auto; } /* ════════ Modération feedback ════════ */ .console .fbitem{ display:flex; gap:14px; padding:15px 16px; border-top:1px solid var(--border); align-items:flex-start; } .console .fbitem:first-child{ border-top:none; } .console .fbitem .ftype{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; color:var(--accent); background:var(--badge-bg); flex:0 0 auto; } .console .fbitem .fmeta{ flex:1; min-width:0; } .console .fbitem .fhead{ display:flex; align-items:center; gap:9px; margin-bottom:4px; flex-wrap:wrap; } .console .fbitem .fhead b{ font-size:13.5px; font-weight:600; } .console .fbitem .fhead .fsite{ font-size:11.5px; color:var(--text-faint); white-space:nowrap; } .console .fbitem .ftext{ font-size:13px; color:var(--text-muted); line-height:1.5; } .console .fbitem .fwho{ font-size:11.5px; color:var(--text-faint); margin-top:6px; } .console .fbitem .factions{ display:flex; gap:7px; flex:0 0 auto; } /* ════════ Portfolio ════════ */ .console .hero{ display:flex; gap:22px; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px 26px; } .console .hero .ava{ width:72px; height:72px; border-radius:18px; background:var(--accent); color:var(--on-accent); display:grid; place-items:center; font-weight:700; font-size:23px; flex:0 0 auto; letter-spacing:-.02em; } .console .hero h2{ font-size:22px; font-weight:700; letter-spacing:-.02em; } .console .hero .role{ color:var(--text-muted); font-size:14px; margin-top:3px; } .console .hero p{ margin-top:11px; font-size:13.5px; color:var(--text-muted); line-height:1.55; max-width:580px; } .console .hero .skills{ display:flex; gap:7px; flex-wrap:wrap; margin-top:13px; } .console .tagk{ font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:999px; color:var(--accent); background:var(--badge-bg); } .console .secgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; } .console .seccard{ display:flex; gap:14px; padding:18px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); cursor:pointer; transition:.15s; align-items:flex-start; } .console .seccard:hover{ border-color:var(--border-strong); box-shadow:0 8px 22px -16px rgba(20,40,80,.5); transform:translateY(-2px); } .console .seccard .ic{ flex:0 0 auto; width:42px; height:42px; border-radius:11px; background:var(--surface-2); border:1px solid var(--border); color:var(--accent); display:grid; place-items:center; } .console .seccard h3{ font-size:15px; font-weight:600; display:flex; align-items:center; justify-content:space-between; } .console .seccard h3 .arr{ color:var(--text-faint); transition:transform .15s,color .15s; } .console .seccard:hover h3 .arr{ color:var(--accent); transform:translateX(3px); } .console .seccard p{ font-size:12.5px; color:var(--text-muted); line-height:1.5; margin-top:6px; } .console .seccard .meta{ flex:1; min-width:0; } .console .contact{ display:flex; align-items:center; gap:16px; padding:18px 22px; border:1px dashed var(--border-strong); border-radius:var(--radius); background:var(--surface-2); } .console .contact .l{ font-size:14px; font-weight:600; } .console .contact .l small{ display:block; font-weight:500; color:var(--text-muted); font-size:12.5px; margin-top:2px; } .console .contact .sp{ flex:1; } /* ════════ Tâches & versions ════════ */ .console .linerow{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-top:1px solid var(--border); } .console .linerow:first-child{ border-top:none; } .console .task .tl{ flex:1; min-width:0; } .console .task .tl b{ font-size:13px; font-weight:600; display:block; } .console .task .tl small{ font-size:11.5px; color:var(--text-faint); } .console .task.done .tl b{ text-decoration:line-through; color:var(--text-faint); } .console .vtag{ font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--accent); background:var(--badge-bg); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); padding:2px 8px; border-radius:6px; flex:0 0 auto; } .console .vrow .vnote{ font-size:13px; } .console .vrow .vnote small{ display:block; font-size:11.5px; color:var(--text-faint); } .console .vrow .vdate{ margin-left:auto; font-size:12px; color:var(--text-faint); white-space:nowrap; } /* ════════ Permissions / habilitations ════════ */ .console .perm{ display:flex; align-items:center; gap:8px; padding:11px 14px; border-top:1px solid var(--border); } .console .perm:first-child{ border-top:none; } .console .perm .pn{ flex:1; font-size:13px; font-weight:500; } .console .permchips{ display:flex; gap:6px; flex-wrap:wrap; } .console .pchip{ font-size:11px; font-weight:600; padding:3px 8px; border-radius:6px; background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border); } .console .pchip.on{ background:var(--badge-bg); color:var(--accent); border-color:color-mix(in srgb,var(--accent) 30%,transparent); } .console .matrix td .dotok{ color:#16a34a; } .console .matrix td .dotno{ color:var(--border-strong); } .console .matrix td.center{ text-align:center; } .console .profcard{ display:flex; align-items:center; gap:12px; padding:13px 16px; border-top:1px solid var(--border); } .console .profcard:first-child{ border-top:none; } .console .profcard .pav{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; color:var(--accent); background:var(--badge-bg); flex:0 0 auto; } .console .profcard .pmeta{ flex:1; } .console .profcard .pmeta b{ font-size:13.5px; font-weight:600; } .console .profcard .pmeta small{ display:block; font-size:12px; color:var(--text-muted); } .console .lockwrap{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-faint); } /* ════════ Responsive : sidebar repliée en barre haute ════════ */ @media (max-width: 860px){ .console .shell{ grid-template-columns:1fr; } .console .side{ position:static; height:auto; flex-direction:row; align-items:center; flex-wrap:wrap; gap:8px; padding:12px 14px; } .console .side .brand{ padding:0; } .console .navlbl{ display:none; } .console .nav{ flex-direction:row; flex-wrap:wrap; gap:6px; } .console .nav a, .console .nav button{ padding:7px 11px; } .console .side .user{ margin-top:0; margin-left:auto; border-top:none; padding:4px; } .console .bar{ padding:14px 16px; flex-wrap:wrap; gap:10px; } .console .bar h1{ white-space:normal; width:100%; } .console .bar .spacer{ display:none; } .console .bar .seg{ width:100%; } .console .bar .seg button{ flex:1; } .console .bar .btn{ width:100%; justify-content:center; } .console .search{ width:100%; order:3; } .console .radio{ justify-content:flex-start; } .console .body{ padding:16px; } .console .stats{ grid-template-columns:repeat(2,1fr); } .console .cardgrid,.console .grid,.console .secgrid,.console .radio-grid,.console .fgrid2,.console .cols-2{ grid-template-columns:1fr; } .console .foot{ padding:14px 16px; } } /* ════════════════════════════════════════════════════════════════ Modales + formulaires natifs (SiteTracker / Gestion utilisateurs) ════════════════════════════════════════════════════════════════ */ .console .modal-overlay{ position:fixed; inset:0; background:rgba(8,12,20,.55); display:none; align-items:center; justify-content:center; z-index:200; padding:20px; } .console .modal-overlay.open{ display:flex; } .console .modal{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); width:100%; max-width:540px; max-height:90vh; overflow:auto; box-shadow:0 24px 60px -20px rgba(0,0,0,.55); } .console .modal-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); } .console .modal-title{ font-size:15px; font-weight:700; } .console .modal-close{ width:30px; height:30px; border-radius:8px; color:var(--text-muted); font-size:15px; } .console .modal-close:hover{ background:var(--surface-2); color:var(--text); } .console .modal-body{ padding:18px 20px; } .console .modal-footer{ display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid var(--border); } .console .modal-hint{ font-size:12.5px; color:var(--text-muted); background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:10px 12px; margin:4px 0 0; line-height:1.5; } .console .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .console .form-group{ margin-bottom:14px; } .console .form-group > label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; color:var(--text); } .console .modal input[type=text],.console .modal input[type=date],.console .modal select,.console .modal textarea, .console .addmini input,.console .addmini select{ width:100%; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--text); padding:10px 12px; font-size:13.5px; font-family:inherit; } .console .modal textarea{ resize:vertical; min-height:60px; } .console .modal input:focus,.console .modal select:focus,.console .modal textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--badge-bg); outline:none; } .console .btn-primary{ background:var(--accent); color:var(--on-accent); border:1px solid var(--accent); border-radius:9px; padding:9px 16px; font-weight:600; font-size:13px; display:inline-flex; align-items:center; gap:6px; } .console .btn-primary:hover{ background:var(--accent-2); } .console .btn-ghost{ background:var(--surface); color:var(--text-muted); border:1px solid var(--border); border-radius:9px; padding:9px 16px; font-weight:600; font-size:13px; } .console .btn-ghost:hover{ background:var(--surface-2); color:var(--text); } /* ════════════════════════════════════════════════════════════════ SiteTracker — vue d'ensemble (liste sites dépliable + agrégats) ════════════════════════════════════════════════════════════════ */ .console .strow{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-top:1px solid var(--border); cursor:pointer; } .console .panel-b.flush > .site-card:first-child .strow{ border-top:none; } .console .strow:hover{ background:var(--surface-2); } .console .strow .sicon{ width:34px; height:34px; border-radius:9px; background:var(--surface-2); border:1px solid var(--border); display:grid; place-items:center; font-size:16px; flex:0 0 auto; } .console .strow .smeta{ flex:1; min-width:0; } .console .strow .smeta b{ font-size:13.5px; font-weight:600; } .console .strow .surl{ font-size:11.5px; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .console .strow .cnt{ font-size:11px; color:var(--text-faint); white-space:nowrap; } .console .strow .chev{ color:var(--text-faint); transition:transform .15s; display:inline-flex; } .console .site-card.expanded .strow .chev{ transform:rotate(180deg); } .console .site-detail{ display:none; } .console .site-card.expanded .site-detail{ display:block; padding:4px 16px 14px; } .console .sttabs{ display:flex; gap:6px; margin:8px 0 10px; } .console .sttab{ font-size:12px; font-weight:600; padding:6px 11px; border-radius:8px; border:1px solid var(--border); color:var(--text-muted); background:var(--surface); } .console .sttab.active{ background:var(--badge-bg); color:var(--accent); border-color:color-mix(in srgb,var(--accent) 30%,transparent); } .console .sttab-content{ display:none; } .console .sttab-content.active{ display:block; max-height:320px; overflow-y:auto; padding-right:4px; } .console .sttab-content.active::-webkit-scrollbar{ width:8px; } .console .sttab-content.active::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:8px; } .console .stline{ display:flex; align-items:center; gap:10px; padding:9px 2px; border-top:1px solid var(--border); font-size:13px; } .console .stline:first-child{ border-top:none; } .console .stline .il{ flex:1; min-width:0; } .console .stline .il b{ font-size:13px; font-weight:600; } .console .stline .il small{ display:block; font-size:11px; color:var(--text-faint); } .console .stline.done .il b{ text-decoration:line-through; color:var(--text-faint); } .console .btn-tiny{ width:28px; height:28px; border-radius:7px; border:1px solid var(--border); background:var(--surface); color:var(--text-muted); display:inline-grid; place-items:center; } .console .btn-tiny:hover{ background:var(--surface-2); color:var(--text); } .console .stcheck{ width:18px; height:18px; border:2px solid var(--border-strong); border-radius:5px; cursor:pointer; flex:0 0 auto; position:relative; } .console .stline.done .stcheck{ background:var(--accent); border-color:var(--accent); } .console .stline.done .stcheck::after{ content:'✓'; position:absolute; inset:0; color:#fff; font-size:12px; line-height:14px; text-align:center; } .console .prio{ font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:999px; white-space:nowrap; } .console .prio.high{ color:#fff; background:#dc2626; } .console .prio.medium{ color:#fff; background:#e0820a; } .console .prio.low{ color:#fff; background:#16a34a; } .console .addmini{ display:flex; gap:8px; margin:6px 0 12px; flex-wrap:wrap; align-items:center; } .console .addmini input{ flex:1; min-width:140px; } .console .changelog-input{ margin-bottom:6px; } .console .changelog-input input{ width:100%; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); padding:8px 10px; font-size:12.5px; } .console .changelog{ margin:6px 0 0; padding-left:18px; font-size:12px; color:var(--text-muted); } .console .srow-actions{ display:none; gap:8px; padding:2px 16px 14px; } .console .site-card.expanded .srow-actions{ display:flex; } .console details.done-tasks-toggle summary,.console details.st-done summary{ cursor:pointer; padding:8px 2px; font-size:12px; font-weight:600; color:var(--text-muted); } .console .dashboard-empty{ text-align:center; padding:48px 16px; color:var(--text-muted); } .console .dashboard-empty .icon-big{ font-size:40px; } .console .dashboard-empty h2{ font-size:17px; margin:10px 0 4px; color:var(--text); } .console #toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--text); color:var(--bg); padding:10px 18px; border-radius:10px; font-size:13px; font-weight:600; opacity:0; pointer-events:none; transition:opacity .2s; z-index:400; } .console #toast.show{ opacity:1; } /* Gating par permissions (les actions non autorisées sont masquées) */ body.console:not(.can-site-create) .act-site-create, body.console:not(.can-site-edit) .act-site-edit, body.console:not(.can-page-create) .act-page-create, body.console:not(.can-page-edit) .act-page-edit, body.console:not(.can-version-create) .act-version-create, body.console:not(.can-version-edit) .act-version-edit, body.console:not(.can-task-create) .act-task-create, body.console:not(.can-task-edit) .act-task-edit{ display:none !important; } /* ════════════════════════════════════════════════════════════════ Gestion utilisateurs — extras ════════════════════════════════════════════════════════════════ */ .console .nav a.active, .console .nav button.active{ background:var(--badge-bg); color:var(--accent); font-weight:600; } .console .nav a.active svg, .console .nav button.active svg{ color:var(--accent); } .console .alert{ padding:11px 14px; border-radius:9px; font-size:13px; font-weight:600; border:1px solid; margin-bottom:16px; } .console .alert-success{ color:#15803d; background:#f0fdf4; border-color:#bbf7d0; } .console .alert-error{ color:#b91c1c; background:#fef2f2; border-color:#fecaca; } .console .perm-group{ margin-bottom:14px; } .console .perm-group-title{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); font-weight:700; margin-bottom:7px; } .console .perm-check{ display:flex; align-items:center; gap:9px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; margin-bottom:6px; font-size:13px; cursor:pointer; background:var(--surface); } .console .perm-check:hover{ background:var(--surface-2); } .console .perm-check input{ width:16px; height:16px; accent-color:var(--accent); } .console .users-table-wrap{ overflow-x:auto; } .console .field-inline{ display:flex; align-items:center; gap:9px; } .console .field-inline input[type=checkbox]{ width:17px; height:17px; accent-color:var(--accent); } .console .field-inline label{ margin:0; } .console .form-hint, .console .gu-panel-intro{ font-size:12.5px; color:var(--text-muted); background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:10px 12px; line-height:1.5; } .console .hab-add-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; margin:14px 0; } .console .hab-add-row{ display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:end; } @media(max-width:860px){ .console .hab-add-row{ grid-template-columns:1fr; } } /* ════════════════════════════════════════════════════════════════ Ajustements : croix de recherche + contraste site déplié ════════════════════════════════════════════════════════════════ */ /* Bouton "effacer" (croix) dans une barre de recherche : icône plate, bien centrée */ .console .search button{ border:none; background:none; color:var(--text-faint); width:20px; height:20px; padding:0; flex:0 0 auto; display:grid; place-items:center; cursor:pointer; border-radius:6px; font-size:13px; line-height:1; } .console .search button:hover{ color:var(--text); background:var(--surface-2); } /* SiteTracker : le site déplié se distingue nettement des autres */ .console .site-card.expanded{ background:var(--surface-2); box-shadow:inset 3px 0 0 var(--accent); } .console .site-card.expanded .strow{ background:transparent; } .console .site-card.expanded .strow .smeta b{ color:var(--accent); } /* ════════════════════════════════════════════════════════════════ SiteTracker — barre d'ajout inline soignée (pages/versions/tâches) ════════════════════════════════════════════════════════════════ */ .console .addbar{ background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:11px; margin:0 0 12px; } .console .addbar .row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .console .addbar input, .console .addbar select, .console .addbar textarea{ border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); padding:8px 11px; font-size:13px; font-family:inherit; } .console .addbar input:focus, .console .addbar select:focus, .console .addbar textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--badge-bg); outline:none; } .console .addbar input.grow{ flex:1; min-width:150px; } .console .addbar textarea{ width:100%; min-height:52px; resize:vertical; line-height:1.5; } .console .addbar .btn-primary{ padding:8px 14px; } /* bouton "ajouter une page" : pleine largeur, discret */ .console .addbtn-page{ display:flex; align-items:center; justify-content:center; gap:7px; width:100%; padding:9px; border:1px dashed var(--border-strong); border-radius:10px; color:var(--text-muted); background:var(--surface-2); font-weight:600; font-size:12.5px; margin-bottom:10px; transition:.12s; } .console .addbtn-page:hover{ color:var(--accent); border-color:var(--accent); background:var(--badge-bg); }