.mp-tarif-inline.mp-3col{ grid-template-columns: minmax(320px,360px) 1fr 1fr; } @media (max-width: 1100px){ .mp-tarif-inline.mp-3col{ grid-template-columns: 1fr; } } /* BO_v93 */ :root{ --bg:#fffffff; --panel:#ffffff; --text:#121826; --muted:#667085; --border:#e6e8ef; --shadow: 0 10px 28px rgba(16,24,40,.08); --primary:#e11457; --primary2:#ff7aa3; --radius:14px; --radius2:10px; --sidebar:#0f172a; --sidebar2:#111c35; --sidebarText:#e5e7eb; --sidebarMuted:#9aa4b2; } *{ box-sizing:border-box; } /* IMPORTANT L'attribut HTML [hidden] peut être annulé si une règle CSS impose display:flex. On force donc le comportement attendu : hidden = invisible. */ [hidden]{display:none !important;} html,body{ height:100%; } body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; background:var(--bg); color:var(--text); /* BO_v87: le scroll doit Ãªtre gÃ©rÃ© par la zone principale, pas par */ overflow:hidden; } /* IMPORTANT UX - Aucun scroll horizontal sur body/layout. - Le scroll horizontal (et vertical si nÃ©cessaire) doit Ãªtre contenu dans .table-wrap. */ html, body{ overflow-x:hidden; } .layout{ display:flex; min-height:100vh; overflow:hidden; } .sidebar{ position:fixed; top:0; left:0; bottom:0; width:250px; background:linear-gradient(0deg, rgb(23, 114, 82) 0%, rgb(16, 87, 87) 30%); color:var(--sidebarText); padding:18px; display:flex; flex-direction:column; gap:16px; border-right:1px solid rgba(255,255,255,.06); overflow:auto; } .brand{ padding:10px 10px 6px 10px; } .brand-title{ font-weight:800; letter-spacing:.3px; } .brand-sub{ color:var(--sidebarMuted); font-size:13px; margin-top:4px; } .nav{ display:flex; flex-direction:column; gap:14px; } .nav-title{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--sidebarMuted); margin:6px 6px 8px; } .nav-subtitle{ font-size:12px; color:var(--sidebarMuted); margin:10px 6px 8px; } .nav-list{ display:flex; flex-direction:column; gap:8px; } .nav-item{ width:100%; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.15); color:var(--sidebarText); text-decoration:none; padding:10px 12px; border-radius: 8px 8px 8px 8px; -webkit-border-radius: 8px 8px 8px 8px; -moz-border-radius: 8px 8px 8px 8px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; } /* Les liens ne doivent pas être soulignés */ a.nav-item{ text-decoration:none; } .nav-item:hover{ background:rgba(255,255,255,.20); } .nav-item.active{ background: linear-gradient(90deg, rgb(0 172 79 / 50%) 0%, rgba(255,255,255,.20) 90%); } .pill{ font-size:12px; padding:3px 8px; border-radius:999px; background:rgba(255,255,255,.12); color:var(--sidebarText); } .sidebar-footer{ margin-top:auto; padding:10px; border-top:1px solid rgba(255,255,255,.08); } .small{ font-size:12px; color:var(--sidebarMuted); } /* --- Indicateur de sauvegarde (global) --- */ .save-state{ margin-top:8px; display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; border:1px solid #e2e8f0; background:#fff; font-size:12px; color:#334155; user-select:none; } .save-state::before{ content:""; width:8px; height:8px; border-radius:999px; background:#94a3b8; /* idle */ } .save-state.is-saving{ border-color:#c7d2fe; background:#eef2ff; } .save-state.is-saving::before{ background:#6366f1; } .save-state.is-saved{ border-color:#bbf7d0; background:#f0fdf4; } .save-state.is-saved::before{ background:#22c55e; } .save-state.is-error{ border-color:#fecaca; background:#fef2f2; } .save-state.is-error::before{ background:#ef4444; } .main{ flex:1; display:flex; flex-direction:column; min-width:0; /* BO_v87: la sidebar est fixe */ margin-left:250px; height:100vh; } .topbar{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #d4e0e0; padding: 10px; background: #d4e0e0; min-height: 87px; } .topbar-inner{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; } .topbar-left{ display:flex; flex-direction:column; gap:4px; min-width: 240px; } .topbar-right{ margin-left:auto; display:flex; align-items:center; justify-content:flex-end; gap:16px; flex:1; flex-wrap:nowrap; } .topbar-block.hidden{display:none !important;} .topbar-editorblock h1{ font-size:20px; } .topbar-editor-meta{ display:flex; flex-direction:column; gap:2px; } .topbar-editor-meta .muted{ margin:0; } .topbar-toggles{ display:flex; flex-direction:column; gap:10px; align-items:flex-end; } .topbar-actions-editor{ display:flex; gap:12px; align-items:center; justify-content:flex-end; flex-wrap:nowrap; } .dropdown{ position:relative; } .dropdown-menu{ position:absolute; right:0; top:calc(100% + 8px); min-width:220px; background:#fff; border:1px solid #e5e7eb; border-radius:14px; box-shadow:0 12px 30px rgba(0,0,0,.12); padding:6px; display:none; z-index:50; } .dropdown.open .dropdown-menu{ display:block; } .dropdown:hover .dropdown-menu{ display:block; } .dropdown-menu a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:#111; text-decoration:none; } .dropdown-menu a:hover{ background:#f3f4f6; } h1{ margin:0; font-size:22px; letter-spacing:.2px; } .name-titre{ margin:0; font-size:20px !important; letter-spacing:.2px !important; font-weight: 700; color:#8b1f3d;} /* muted générique (sans padding global, sinon ça casse les layouts) */ .muted{ color:var(--muted); font-size:13px; margin:0; } .topbar-block[hidden]{ display:none !important; } .topbar-actions[hidden]{ display:none !important; } /* Conteneur actions topbar (liste / édition) */ .topbar-actions{ display:flex; gap:10px; flex-wrap:nowrap; justify-content:flex-end; align-items:center; } .topbar-toggles{ display:flex; flex-direction:column; gap:10px; align-items:flex-end; } .topbar-actions .btn{ white-space:nowrap; } .topbar-actions-editor .editor-primary{ display:flex; flex-direction:row; flex-wrap:wrap; gap:10px; align-items:center; justify-content:flex-end; } .topbar-actions-editor .editor-primary .btn{ width:fit-content; } .topbar-actions-editor .toggles-stack{ display:flex; flex-direction:column; gap:10px; } @media (max-width: 980px){ .topbar-right{ flex-wrap:wrap; } .topbar-actions{ flex-wrap:wrap; } .topbar-actions-editor{ flex-wrap:wrap; } } /* Titres / sous-titres de la topbar */ .page-title{ font-size:28px; font-weight:900; letter-spacing:-.02em; } .page-hint{ color:var(--muted); font-size:13px; margin-top:4px; } .btn{ border:1px solid var(--border); background:#fff; padding:10px 12px; border-radius:12px; cursor:pointer; box-shadow:0 2px 10px rgba(16,24,40,.04); } .btn:hover{ transform:translateY(-1px); } .btn.primary{ border-color:rgba(225,20,87,.25); background: #00ac4f; box-shadow:0 10px 30px rgba(225,20,87,.12); color: #fff; box-shadow: 0 2px 5px rgb(4 4 4 / 12%); } .btn.primary::before{ content:""; display:inline-block; width:10px; height:10px; border-radius:3px; background:var(--primary); margin-right:8px; vertical-align:middle; } .content{ /* Évite une scrollbar toujours visible sur ce conteneur : le scroll vit dans les zones dédiées (table-wrap, éditeur…). */ overflow:hidden; min-width:0; flex:1; min-height:0; padding:14px 16px 16px; } .view.hidden{ display:none; } /* Hauteur 100% (vue Ãdition) */ #viewGridEditor{ height:100%; } #viewGridEditor > .card{ height:100%; display:flex; flex-direction:column; } #viewGridEditor .card-body{ flex:1; min-height:0; } #editorMount{ height:100%; min-height:0; } .card{ overflow:hidden; } .card-body.pad { padding: 0; } .card-head{ padding:16px; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; border-bottom:1px solid var(--border); } .card-title{ font-weight:800; } .card-actions{ display:flex; gap:10px; align-items:center; } .card-foot{ padding:14px 16px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; } .input, select{ border:1px solid var(--border); border-radius:12px; padding:10px 12px; min-height:40px; outline:none; background:#fff; } .input:focus, select:focus{ box-shadow:0 0 0 3px rgba(225,20,87,.12); border-color:rgba(225,20,87,.35); } .table-wrap{ overflow:auto; max-width:100%; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } /* Les tables de matrices doivent pouvoir dÃ©passer en largeur => scroll DANS .table-wrap */ .table-wrap .table, .table-wrap table.table{ width:max-content; min-width:100%; table-layout:auto; /* Ã©vite l'Ã©crasement / chevauchement */ } .table-wrap .table th, .table-wrap .table td{ white-space:nowrap; } .table{ width:100%; border-collapse:collapse; } .table th, .table td{ padding:12px 12px; border-bottom:1px solid var(--border); vertical-align:middle; text-align:left; font-size:13px; } .table th{padding:5px 5px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#475467; background:#fbfbfd; } .badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:#fff; font-size:13px; } .badge.on{ border-color:rgba(34,197,94,.35); background:rgba(34,197,94,.08); } .badge.off{ border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.08); } .actions{ display:flex; gap:8px; flex-wrap:wrap; } .iconbtn{ border:1px solid var(--border); background:#fff; border-radius:12px; padding:8px 10px; cursor:pointer; } .iconbtn.danger{ border-color:rgba(239,68,68,.35); } .iconbtn.star{ border-color:rgba(225,20,87,.25); } .grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; } @media (max-width: 1100px){ .sidebar{ width:290px; } .grid2{ grid-template-columns:1fr; } } .list{ padding:12px 16px; display:flex; flex-direction:column; gap:10px; } .row{ display:flex; gap:10px; align-items:center; justify-content:space-between; padding:10px; border:1px solid var(--border); border-radius:12px; background:#fff; } .row-left{ display:flex; flex-direction:column; gap:2px; } .row-title{ font-weight:700; } .row-sub{ font-size:12px; color:var(--muted); } .row-actions{ display:flex; gap:8px; } .seg{ display:flex; gap:8px; } .seg-btn{ border:1px solid var(--border); background:#fff; border-radius:999px; padding:8px 10px; cursor:pointer; font-size:13px; } .seg-btn.active{ border-color:rgba(225,20,87,.35); box-shadow:0 0 0 3px rgba(225,20,87,.12); } .modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:50; } .modal.hidden{ display:none; } .modal-backdrop{ position:absolute; inset:0; background:rgba(15,23,42,.55); } .modal-panel{ position:relative; max-height: calc(100vh - 24px); overflow:auto; background:#fff; border-radius:18px; box-shadow:0 25px 80px rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.16); } /* --- Modal variations (Grid vs Matrix) --- */ #modalHead{ display:flex; align-items:center; gap:10px; } #modalIcon{ width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:rgba(0,0,0,.06); flex:0 0 auto; } .modal-head-grid{ background:linear-gradient(135deg, rgba(0,172,79,.16) 0%, rgba(0,172,79,.04) 70%); } .modal-head-grid #modalIcon{ background:rgba(0,172,79,.18); color:rgb(0 172 79); } .modal-panel-grid{ width:min(480px, calc(100vw - 24px)); border-top:4px solid rgba(0,172,79,.35); } .modal-head-matrix{ background:linear-gradient(135deg, rgba(0,172,79,.16) 0%, rgba(0,172,79,.04) 70%); } .modal-head-matrix #modalIcon{ background:rgba(0,172,79,.18); color:rgb(0 172 79); } .modal-panel-matrix{ width:min(980px, calc(100vw - 24px)); border-top:4px solid rgba(0,172,79,.35); } .modal-head{ padding:16px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border); } .modal-title{ font-weight:900; } .modal-body{ padding:16px; } .modal-foot{ padding:14px 16px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; } @media (max-width: 900px){ } .hr{ height:1px; background:var(--border); margin:14px 0; } .note{ background: #d4e0e0; border:1px solid rgba(225,20,87,.20); padding:10px 12px; border-radius:12px; color:#111; font-size:13px; } .modal-panel-grid .editor-grid { display: grid; gap: 14px; } /* In-page grid editor */ .modal-panel-matrix .editor-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; } .editor-grid .full{ grid-column: 1 / -1; } @media (max-width: 900px){ .editor-grid{ grid-template-columns: 1fr; } } .prices-area{ overflow:auto; border-radius:14px; } #viewHint[data-version]::after{ content:' â¢ ' attr(data-version); font-weight:600; } /* Cache le titre/hint de la vue quand ils sont volontairement vides (Ã©vite les rÃ©pÃ©titions en Ã©dition) */ #viewTitle:empty{ display:none; } #viewHint:empty{ display:none; } #viewTitle { } /* Compact (dense) form controls for inline editor */ .compact .input, .compact input.input, .compact select.input, .compact textarea.input{ min-height: 36px; height: 36px; padding: 8px 10px; font-size: 14px; border-radius: 12px; } .compact label > .muted{ font-size: 12px; margin-bottom: 4px; } .compact .note{ padding: 10px 12px; font-size: 13px; border-radius: 12px; } .compact .editor-grid{ gap: 12px; } .compact .card-head{ padding-top: 12px; padding-bottom: 12px; } .compact .card-body{ padding-top: 12px; } /* V3.3 Dense controls â force only in editor view */ #viewGridEditor select, #viewGridEditor input.input, #viewGridEditor input[type="text"], #viewGridEditor input[type="number"], #viewGridEditor input[type="email"], #viewGridEditor textarea{ height: 34px !important; min-height: 34px !important; padding: 6px 10px !important; font-size: 14px !important; border-radius: 10px !important; } #viewGridEditor label{ gap: 4px !important; } #viewGridEditor .muted{ font-size: 12px !important; margin-bottom: 2px !important; } #viewGridEditor .editor-grid{ gap: 10px !important; } /* ===== BO V3.5 â Ãditeur inline PRO (dense & propre) ===== */ #viewGridEditor #editorMount{ --ctl-h: 38px; --ctl-r: 12px; --ctl-f: 14px; } #viewGridEditor #editorMount .editor-grid{ display:grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 12px !important; align-items: end; } #viewGridEditor #editorMount .editor-grid .full{ grid-column: 1 / -1; } @media (max-width: 1100px){ #viewGridEditor #editorMount .editor-grid{ grid-template-columns: 1fr 1fr !important; } } @media (max-width: 760px){ #viewGridEditor #editorMount .editor-grid{ grid-template-columns: 1fr !important; } } /* Field */ #viewGridEditor #editorMount .field{ display:flex; flex-direction:column; gap: 4px; margin: 0; } /* Labels */ #viewGridEditor #editorMount .field > .muted{ font-size: 12px; margin: 0; line-height: 1.2; } /* Controls */ #viewGridEditor #editorMount input, #viewGridEditor #editorMount select, #viewGridEditor #editorMount textarea{ box-sizing: border-box; height: var(--ctl-h) !important; min-height: var(--ctl-h) !important; padding: 8px 10px !important; font-size: var(--ctl-f) !important; border-radius: var(--ctl-r) !important; line-height: 1.2 !important; } /* Note / hint blocks: make them compact */ #viewGridEditor #editorMount .note{ padding: 10px 12px !important; border-radius: 12px !important; font-size: 13px !important; margin: 0 !important; } /* Tarifs area */ #viewGridEditor #editorMount .prices-area{ border-radius: 14px; } /* Remove the huge top whitespace feeling */ #viewGridEditor .editor-head{ padding: 14px 16px !important; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #d4e0e0; } #viewGridEditor .card-body{ } #viewGridEditor #editorMount .editor-grid .span2{ grid-column: span 2; } @media (max-width: 1100px){ #viewGridEditor #editorMount .editor-grid .span2{ grid-column: 1 / -1; } } /* Checkbox fields (Actif / Favori) */ #viewGridEditor #editorMount .field.checkbox{ flex-direction: row; align-items: center; gap: 10px; } #viewGridEditor #editorMount .field.checkbox .muted{ margin: 0; } #viewGridEditor #editorMount .field.checkbox input[type="checkbox"]{ width: 18px; height: 18px; accent-color: #e11457; cursor: pointer; } /* Header: title + toggles aligned on same line */ #viewGridEditor .editor-head-left{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; flex: 1 1 auto; width: auto; } #viewGridEditor .editor-head-toggles{ display:flex; flex-direction:column; /* Actif + Favori empilÃ©s */ gap:10px; align-items:flex-start; margin-left:auto; } #viewGridEditor .editor-head-toggles .toggle{ display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--border); border-radius:12px; background:#fff; } #viewGridEditor .editor-head-toggles .toggle span{ font-size:13px; font-weight:600; } #viewGridEditor .editor-head-toggles input[type="checkbox"]{ width:18px; height:18px; accent-color:#8b1f3d; cursor:pointer; } @media (max-width: 900px){ #viewGridEditor .editor-head-left{ flex-direction:column; align-items:flex-start; } #viewGridEditor .editor-head-toggles{ margin-left:0; } } /* Editor tabs */ #viewGridEditor #editorMount .editor-tabs{ display:flex; gap:10px; margin: 4px 0 14px; } #viewGridEditor #editorMount .tab-btn{ border:1px solid var(--border); background:#fff; border-radius: 999px; padding: 8px 12px; font-weight: 700; font-size: 13px; cursor: pointer; } #viewGridEditor #editorMount .tab-btn.is-active{ border-color: rgba(225,20,87,.35); box-shadow: 0 0 0 3px rgba(225,20,87,.10); } #viewGridEditor #editorMount .tab-panel.is-hidden{ display:none; } .tab-panel{ background:#fff; } /* Grid name in editor title */ /* editorGridTitle supprimÃ© (on affiche le nom via le sous-titre) */ /* Sous-titre + meta (Plomb / Vente-Location) */ #viewGridEditor #editorGridSubtitle{ font-size:16px; } #viewGridEditor .editor-grid-meta{ font-size:13px; color:#6b7280; margin-top:4px; } .badges{display:flex;flex-direction:column;gap:6px;align-items:flex-start} .badge.def{background:#fff4d6;border-color:#f2c14e;color:#7a5200} .badge.def.inline{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;font-weight:700} /* === Checkbox rows (Diagnostics inclus / Types concernÃ©s) === */ #diagTypeSelector, #tarifModeTypesBox{ margin-top:10px; } #diagTypeSelector .checks, #tarifModeTypesBox .checks, #diagTypeSelector .checklist, #tarifModeTypesBox .checklist{ display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center; } #diagTypeSelector label, #tarifModeTypesBox label{ display:inline-flex; align-items:center; gap:8px; margin:0; white-space:nowrap; line-height:1; } #diagTypeSelector input[type="checkbox"], #tarifModeTypesBox input[type="checkbox"]{ width:16px; height:16px; margin:0; vertical-align:middle; } /* === Table fixed cells (100px) + scroll wrapper (MATRICE TARIFAIRE uniquement) === */ .table-wrap{ overflow: auto; } .table{ width: 100%; border-collapse: collapse; } .table.table-fixed100{ table-layout: fixed; } .table.table-fixed100 th, .table.table-fixed100 td{ width: 100px; min-width: 100px; max-width: 100px; padding: 5px 5px; border-bottom: 1px solid var(--border); vertical-align: middle; text-align: left; font-size: 14px; } /* === Inline checkbox layout (override old grid inline styles removed) === */ .checks-inline{ display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center; } .chkItem{ display:inline-flex; align-items:center; gap:8px; margin:0; white-space:nowrap; line-height:1; } .chkItem input[type="checkbox"]{ width:16px; height:16px; margin:0; vertical-align:middle; accent-color: #8b1f3d !important; } /* --- Liste des grilles : compact + badges --- */ .grids-table .table th, .grids-table .table td{ padding:4px 6px; font-size:13px; } .name-cell{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .badge{ display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; border:1px solid var(--border); font-size:12px; line-height:18px; font-weight:600; background:#fff; } .badge.fav{ border-color:rgba(46,204,113,.45); background:rgba(46,204,113,.10); } .badge.def{ border-color:#f5c96b; background:#fff6cc; color:#7a4e00; } .badge.def i{ color:#f59e0b; } /* Statut (Actif / Inactif) compact */ .status{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:999px; font-weight:900; border:1px solid var(--border); } .statusbtn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-weight: 900; border: 1px solid var(--border); background: #fff; cursor: pointer; } .statusbtn:focus{ outline:2px solid rgba(225,20,87,.25); outline-offset:2px; } .status-on{ background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.35); color:#0a7a31; } .status-off{ background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.35); color:#b42318; } /* Badge "Par dÃ©faut" prÃ¨s du nom (liste) */ .defaultpill{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:#fff4d6; border:1px solid rgba(245,158,11,.55); color:#7a4b00; font-weight:800; font-size:12px; } /* Tri + filtres (liste) */ .table thead th{ user-select:none; } .table thead th.sortable{ cursor:pointer; } .table thead th.sortable .sort-ind{ margin-left:6px; opacity:.55; font-size:12px; } .table thead tr.filters th{ padding:8px 8px; } .table thead tr.filters input{ width:100%; height:34px; padding:6px 10px; border:1px solid var(--border); border-radius:10px; font-size:13px; background:#fff; } .table thead tr.filters input:focus{ outline:2px solid rgba(225,20,87,.25); outline-offset:2px; } /* EmpÃªche le "collage" visuel des titres de colonnes (capture) */ #gridTable thead th{ white-space:nowrap; } #gridTable thead th:nth-child(1){ min-width:80px; } #gridTable thead th:nth-child(2){ min-width:240px; } #gridTable thead th:nth-child(8){ min-width:240px; } /* Boutons actions : Ã©tats Favori / Par dÃ©faut */ .iconbtn.fav.is-on{ background:rgba(225,20,87,.10); border-color:rgba(225,20,87,.35); } .iconbtn.fav.is-on i{ color:var(--accent); } .iconbtn.fav:not(.is-on) i{ color:#111; } .iconbtn.fav:hover{ background:rgba(225,20,87,.10); border-color:rgba(225,20,87,.35); } .iconbtn.def.is-on{ background:#fff4d6; border-color:rgba(245,158,11,.55); } .iconbtn.def.is-on i{ color:#f59e0b; } .iconbtn.def:not(.is-on) i{ color:#111; } .iconbtn.def:hover{ background:#fff4d6; border-color:rgba(245,158,11,.55); } .iconbtn.trash:hover{ background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.35); } .defaultpill::before{ content:"â "; color:#f59e0b; } .actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .iconbtn{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:32px; padding:0; border-radius:10px; } .iconbtn.star{ border-color:rgba(46,204,113,.35); background:rgba(46,204,113,.10); } .iconbtn.warn{ border-color:rgba(243,156,18,.45); background:rgba(243,156,18,.14); } .iconbtn.disabled{ opacity:.45; cursor:not-allowed; } /* --- Liste des grilles : colonnes stables + hauteur compacte --- */ .grids-table .grid-table{ table-layout: auto; width:100%; } .grids-table .grid-table th, .grids-table .grid-table td{ white-space: normal; line-height: 1.15; } .grids-table .grid-table thead th{ font-size:12px; letter-spacing:.06em; white-space:nowrap; } /* Ordre colonnes: 1 Actif, 2 Nom, 3 Vente/Loc, 4 CatÃ©g., 5 Plomb, 6 Mode grille, 7 Mode tarif, 8 Actions */ /* (IMPORTANT) Ancien rÃ©glage en "table-layout:fixed" + colonnes figÃ©es â gros blancs / scroll excessif selon le viewport. On repasse en auto pour retrouver un rendu stable comme avant. */ .grids-table .grid-table th:nth-child(1), .grids-table .grid-table td:nth-child(1){ text-align:center; } .grids-table .grid-table td{ padding:8px 8px; } .grids-table .grid-table tr{ height:56px; } .actions-cell{ display:flex; gap:8px; justify-content:flex-end; align-items:center; flex-wrap:nowrap; } .iconbtn{ width:40px; height:40px; padding:0; display:grid; place-items:center; border-radius:12px; } .iconbtn svg{ width:20px; height:20px; display:block; } .iconbtn i{ font-size:18px; line-height:1; display:block; } .iconbtn:hover{ box-shadow:0 6px 18px rgba(0,0,0,.08); transform: translateY(-1px); } .iconbtn:active{ transform: translateY(0px); box-shadow:none; } .iconbtn.fav{ border-color:rgba(34,197,94,.35); background:rgba(34,197,94,.10); } .iconbtn.fav{ color:#111; } .iconbtn.fav:hover{ background:rgba(34,197,94,.18); border-color:rgba(34,197,94,.55); } .iconbtn.default{ border-color:#f2c14e; background:#fff6d6; color:#f2c14e; } .iconbtn.default:hover{ background:#ffefbf; border-color:#f2c14e; } .iconbtn.toggle-on{ border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.10); } .iconbtn.toggle-on:hover{ background:rgba(239,68,68,.18); border-color:rgba(239,68,68,.55); } .iconbtn.toggle-off{ border-color:rgba(34,197,94,.35); background:rgba(34,197,94,.10); } .iconbtn.toggle-off:hover{ background:rgba(34,197,94,.18); border-color:rgba(34,197,94,.55); } .iconbtn.danger:hover{ background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.65); } .actions{ display:flex; gap:8px; justify-content:flex-end; align-items:center; flex-wrap:nowrap; } /* ---- Actions (Favori / Par dÃ©faut) : couleurs demandÃ©es ---- */ .iconbtn.fav i{ color:#111; } .iconbtn.fav.is-on{ background:#ffe4ec; border-color:#f8b4c6; } .iconbtn.fav.is-on i{ color:#e11457; } .iconbtn.fav:hover{ background:#ffe4ec; border-color:#f8b4c6; } .iconbtn.defstar i{ color:#111; } .iconbtn.defstar.is-on{ background:#fff4d6; border-color:#f6d58a; } .iconbtn.defstar.is-on i{ color:#f59e0b; } .iconbtn.defstar:hover{ background:#fff4d6; border-color:#f6d58a; } /* ---- DataTables : intÃ©gration visuelle lÃ©gÃ¨re ---- */ .dataTables_wrapper{ width:100%; } table.dataTable{ border-collapse:collapse !important; width:100% !important; } table.dataTable thead th{ border-bottom:1px solid var(--border) !important; } .dataTables_wrapper .dt-bottom{ display:flex; justify-content:flex-end; gap:12px; align-items:center; padding:10px 14px; } .dataTables_wrapper .dataTables_paginate .paginate_button{ border:1px solid var(--border) !important; border-radius:12px !important; padding:6px 10px !important; margin:0 2px !important; background:#fff !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current{ background:#fff !important; border-color:#ffd4e1 !important; box-shadow:0 6px 16px rgba(225,20,87,.12) !important; } /* â Liste des grilles : neutralise les largeurs fixes (sources de gros "blanc" + scroll) */ .grids-table .grid-table{ table-layout:auto !important; } .grids-table .grid-table th, .grids-table .grid-table td{ width:auto !important; min-width:0 !important; max-width:none !important; } .grids-table .grid-table th{ white-space:nowrap; } .grids-table .grid-table td.actions-cell{ white-space:nowrap; } /* Pagination (5 grilles par page) */ .table-footer{ padding:12px 16px 16px; border-top:1px solid rgba(15,23,42,.08); } .pager{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; } .pager .pg-btn{ min-width:36px; height:36px; padding:0 10px; border:1px solid rgba(15,23,42,.12); border-radius:12px; background:#fff; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; box-shadow:0 3px 12px rgba(15,23,42,.06); } .pager .pg-btn:hover{ box-shadow:0 6px 16px rgba(15,23,42,.10); } .pager .pg-btn[disabled]{ opacity:.45; cursor:not-allowed; box-shadow:none; } .pager .pg-btn.active{ border-color:#ffd4e1; box-shadow:0 6px 16px rgba(225,20,87,.12); } /* CatÃ©gories (multi-matrices) */ .cat-tabs{display:block;} #pricesArea .segmented{display:inline-flex;gap:8px;padding: 6px 6px 6px 0px;border:1px solid var(--border);border-radius:999px;background:#fff;} .segmented{display:inline-flex;gap:8px;padding:6px;border:1px solid var(--border);border-radius:999px;background:#fff;} .seg-btn{border:none;background:transparent;padding:8px 12px;border-radius:999px;cursor:pointer;font-weight:600;font-size:13px;} .seg-btn:hover{background: #d4e0e073;} .seg-btn.is-active{background:var(--brand);color:#fff;} /* Onglets CatÃ©gories de bien (matrices) : actif = #8b1f3d */ .category-tabs .seg-btn.is-active{ background:#8b1f3d; color:#fff; } /* Onglets catÃ©gories dans la modale ParamÃ¨tres de la matrice (mÃªme style que la capture) */ .mp-category-tabs{margin:6px 0 6px;} .mp-category-tabs .seg-btn{padding:8px 12px;font-size:13px;} .mp-category-tabs .seg-btn.is-active{background:#8b1f3d;color:#fff;} /* Ligne onglets catÃ©gories + Nb diagnostics (mode unitÃ© + packs) */ .mp-tabs-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;} .mp-tabs-row .mp-category-tabs{margin:0;} .mp-field-nb-top{flex:0 0 190px;min-width:190px;margin-left:auto;} .mp-field-nb-top .muted{display:block;margin-bottom:6px;margin-right: 10px;} /* Bloc Tarif + (Types ou Paliers) sur une seule ligne + champ "Nb de diagnostics" au-dessus (sans libellé). */ .mp-tarif-inline{display:grid;grid-template-columns:minmax(320px,360px) 1fr;gap:16px;align-items:start;flex:1;min-width:280px;} .mp-tarif-inline .mp-left-col{display:flex;flex-direction:column;gap:12px;} .mp-cat-col{margin-bottom:10px;} .mp-cat-col .mp-category-tabs{} /* Champ "Nb de diagnostics" dans la colonne tarif. */ .mp-field-nb-in{max-width:360px;} .mp-inline-extra{min-width:260px;} @media (max-width: 900px){ .mp-tarif-inline{grid-template-columns:1fr;} .mp-inline-extra{min-width:unset;} } .mp-inline-label{font-size:13px;color:rgba(15,23,42,.62);margin-bottom:6px;} .mp-bands{display:flex;gap:8px;flex-wrap:wrap;align-items:center;min-height:44px;} .mp-bands .chip{display:inline-flex;align-items:center;padding:8px 12px;border:1px solid rgba(15,23,42,.14);border-radius:999px;background:#fff;font-size:12px;font-weight:600;color:#111;} /* Paramètres de la matrice : sélecteurs modernes + ordre */ .mp-mselect{border:1px solid rgba(15,23,42,.10);background:rgba(255,255,255,.65);border-radius:16px;padding:12px;box-shadow:0 1px 0 rgba(15,23,42,.03) inset;} .mp-mselect-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:6px;} .mp-mselect-top .mp-inline-label{margin:0;} .mp-mselect-hint{font-size:12px;color:rgba(15,23,42,.55);} .mp-order{display:flex;flex-direction:column;gap:8px;margin:10px 0 12px;} .mp-order-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background:#fff;border:1px solid rgba(15,23,42,.12);border-radius:14px;} .mp-order-label{font-size:13px;font-weight:700;color:#111;} .mp-order-actions{display:flex;align-items:center;gap:8px;} .mp-move{width:30px;height:30px;border-radius:10px;border:1px solid rgba(15,23,42,.12);background:#fff;color:#0f172a;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;} .mp-move:hover{background:rgba(15,23,42,.04);} .mp-dd{border:1px dashed rgba(15,23,42,.18);border-radius:14px;background:rgba(255,255,255,.7);} .mp-dd > summary{list-style:none;cursor:pointer;padding:10px 12px;font-size:13px;font-weight:700;color:#0f172a;display:flex;align-items:center;justify-content:space-between;} .mp-dd > summary::-webkit-details-marker{display:none;} .mp-dd > summary:after{content:"▾";opacity:.6;} .mp-dd[open] > summary:after{content:"▴";} .mp-dd-body{padding:10px 12px;border-top:1px solid rgba(15,23,42,.08);} .mp-dd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;} .mp-dd-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid rgba(15,23,42,.12);border-radius:12px;background:#fff;font-size:13px;font-weight:600;color:#0f172a;} .mp-dd-item input{accent-color:#8b1f3d;} @media (max-width:720px){ .mp-dd-grid{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width:480px){ .mp-dd-grid{grid-template-columns:1fr;} } @media (max-width:640px){ .mp-field{min-width:100%;} .mp-field-nb{min-width:100%;flex:1;} .mp-field-nb-top{min-width:100%;flex:1;margin-left:0;} .mp-tarif-inline{flex-wrap:wrap;} .mp-inline-extra{min-width:100%;} } /* Ligne unique des 3 champs (Grille en fonction / Nb diag / Tarif en fonction) */ .mp-row{gap:16px;align-items:flex-end;flex-wrap:wrap;} .mp-field{flex:0.4;min-width:220px;} .mp-field-nb{ flex: 1; min-width: 160px; display: flex;} /* Sous-titre grille (remplace l'ancien hint) */ .card-subtitle-grid{ margin-top:6px; font-size:13px; color:rgba(15,23,42,.62); } /* --- Stepper (-1 / +1) dans les matrices --- */ .stepper{ display:inline-flex; align-items:center; gap:10px; width:100%; justify-content:center; } /* === Prix: version simple (input number uniquement) === */ .price-cell{ display:flex; align-items:center; justify-content:center; width:100%; } .price-input{ width:76px; min-width:76px; height:44px; /* État normal: bordure grise légère */ border:1px solid rgba(15,23,42,.14); border-radius:14px; text-align:center; font-weight:700; background:#fff; } /* Focus propre: éviter le contour noir natif (Chrome/Edge) */ .price-input:focus, .price-input:focus-visible{ outline:none; /* Focus: bordure plus marquée + halo discret */ border-color: rgba(15,23,42,.55); box-shadow: 0 0 0 3px rgba(15,23,42,.08); } /* SÃ©curitÃ©: si d'anciens boutons restent dans le DOM, on les masque */ .step-btn{ display:none !important; } @media (max-width: 520px){ .price-input{ width:78px; min-width:78px; height:40px; border-radius:12px; font-size:13px; } .table th, .table td{ padding:10px 10px; } } .step-btn{ width:48px; height:44px; border-radius:14px; background:#fff; font-weight:800; font-size:15px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; } .step-btn.dec{ border:2px solid rgba(239,68,68,.6); color:#111; } .step-btn.inc{ border:2px solid rgba(34,197,94,.6); color:#111; } .step-input{ width:100%; min-width:88px; height:44px; border:1px solid rgba(15,23,42,.14); border-radius:14px; text-align:center; font-weight:700; background:#fff; } /* --- Grid parameters button (BO) --- */ #btnGridParams{ margin-left: 10px; white-space: nowrap; } @media (max-width: 680px){ #btnGridParams{ margin-left: 0; } .editor-head-left{ gap:10px; flex-wrap: wrap; } } /* Indicateur discret : modifications non enregistrÃ©es (modales) */ .unsaved-indicator{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; background:rgba(225,20,87,.10); color:#8b1f3d; border:1px solid rgba(139,31,61,.25); } .unsaved-indicator.hidden{ display:none; } .modal-headline-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; } /* ========================================================= HSCROLL MATRICES (from legacy BO behavior) â V26 FULL Goal: NEVER overlap on small widths, show horizontal scroll. ========================================================= */ .table-wrap { overflow-x: auto !important; overflow-y: visible; -webkit-overflow-scrolling: touch; } .table-wrap table { width: max-content !important; min-width: 100% !important; table-layout: auto !important; } .table-wrap th, .table-wrap td { white-space: nowrap !important; vertical-align: middle; } .table-wrap .stepper, .table-wrap .price-stepper, .table-wrap .cell-stepper { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; white-space: nowrap !important; min-width: 170px; /* guarantees space for - input + */ } .table-wrap .step-input, .table-wrap input.step-input { width: 72px !important; min-width: 72px !important; text-align: center; } /* Prevent any accidental shrinking */ .table-wrap td { overflow: visible; } #viewGridEditor .editor-head .card-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex:0 0 auto;} /* Tarifs card head (sans card-head) */ #viewGridEditor #editorMount .tarifs-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;} /* ========================= v59 â Matrice (Unit + Packs) : design pro + onglets segmented ========================= */ .matrix-card{ background:#d4e0e0; border:0; border-radius:22px; padding:18px; box-shadow:0 10px 28px rgba(0,0,0,.08); } /* Matrix card — inset table surface (ref capture) */ .matrix-card .table-wrap{ background:#fff !important; border-radius:16px !important; border:1px solid #e9edf3 !important; box-shadow:0 6px 18px rgba(0,0,0,.06) !important; padding:14px !important; overflow:auto !important; } .matrix-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-direction: row; } .matrix-title{ font-weight:600; color:#2b2f38; } .matrix-sub{ color:#6b7280; font-size:13px; margin-top:2px; } .matrix-controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } /* Segmented tabs (mÃªme esprit que catÃ©gories) */ .matrix-mode-tabs{ position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: #fff; border: 1px solid #e9edf3; overflow: hidden; } .matrix-mode-tabs::before{ content:""; position:absolute; top: 6px; left: 6px; height: calc(100% - 12px); width: var(--seg-w, 140px); transform: translateX(var(--seg-x, 0px)); border-radius: 999px; background: #8b1f3d; transition: transform .20s ease, width .20s ease; z-index: 0; } .matrix-mode-tabs .seg-btn{ position: relative; z-index: 1; border: 0; background: transparent; border-radius: 999px; padding: 10px 14px; font-weight: 600; cursor: pointer; transition: color .16s ease, background .16s ease; white-space: nowrap; color: #111; font-size: 14px; } .matrix-mode-tabs .seg-btn:hover{ background: #d4e0e073; } .matrix-mode-tabs .seg-btn.is-active{ color: #fff; } .matrix-mode-tabs .seg-btn.is-active:hover{ color: #fff; background: #8b1f3d !important; } .matrix-mode-tabs.seg-init::before{ transition:none !important; } /* Panels (scopé à la carte matrice pour éviter les collisions avec d'autres vues) */ .matrix-card .matrix-panel{ display:none; margin-top:12px; } .matrix-card .matrix-panel.is-active{ display:block; } /* Tables: lisibilitÃ© + responsive (scopé à la carte matrice) */ .matrix-card .table-wrap.matrix-wrap{ overflow:auto; border: 1px solid #eef1f6; background:#fff; padding: 10px; } .matrix-card .price-table.matrix-table{ width:100%; border-collapse: collapse; min-width: 720px; table-layout: fixed; } .matrix-card .price-table.matrix-table th{ position: sticky; top: 0; background: #fbfbfd; z-index: 1; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; color:#4b5563; } .matrix-card .price-table.matrix-table th, .matrix-card .price-table.matrix-table td{ border-bottom: 1px solid #eef1f6; padding: 3px 3px; text-align:center; } /* Fix: éviter le rendu "vertical" (tr/td qui deviennent flex/grid sur certains navigateurs / overrides) */ .matrix-card .price-table.matrix-table{ display: table; } .matrix-card .price-table.matrix-table tr{ display: table-row; } .matrix-card .price-table.matrix-table th, .matrix-card .price-table.matrix-table td{ display: table-cell; } .matrix-card .price-table.matrix-table td:first-child, .matrix-card .price-table.matrix-table th:first-child{ position: sticky; left: 0; background: #fbfbfd; z-index: 2; text-align:left; width: 220px; white-space: nowrap; } /* Colonnes de tarifs: largeur uniforme (évite 1 colonne trop large) */ .matrix-card .price-table.matrix-table th:not(:first-child), .matrix-card .price-table.matrix-table td:not(:first-child){ width: 140px; } /* Hover: surligner toute la ligne (y compris la colonne MODE) */ .matrix-card .price-table.matrix-table tr:hover td{ background: #d4e0e073; } /* Assainissement: surlignage de ligne COMPLET (y compris colonne MODE) */ .price-table.matrix-table.assain-table td:first-child{ background: transparent; } .price-table.matrix-table.assain-table tr:hover td:first-child{ background: rgba(15, 23, 42, .06); } .matrix-card .price-cell .price-input{ width: 76px; max-width: 76px; } @media (max-width: 860px){ .matrix-card{ padding: 14px; } .matrix-head{ flex-direction: column; align-items: stretch; } .matrix-controls{ justify-content:flex-start; } .matrix-mode-tabs{ width:100%; justify-content:space-between; } .matrix-mode-tabs .seg-btn{ flex:1; text-align:center; } .matrix-card .price-table.matrix-table{ min-width: 640px; } .matrix-card .price-table.matrix-table td:first-child, .matrix-card .price-table.matrix-table th:first-child{ min-width: 190px; } } /* v65 â ParamÃ¨tres de la grille: checkboxes "CatÃ©gories de bien" en boutons */ #gridCatsWrap{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; } #gridCatsWrap .chkItem{ position:relative; display:inline-flex; align-items:center; margin:0; user-select:none; } #gridCatsWrap .chkItem input{ position:absolute; opacity:0; pointer-events:none; } #gridCatsWrap .chkItem span{ display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:10px 16px; border-radius:12px; border:1px solid rgba(15,23,42,.18); background:#fff; font-weight:700; color:rgba(15,23,42,.72); box-shadow:0 3px 10px rgba(15,23,42,.06); transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; cursor:pointer; } #gridCatsWrap .chkItem:hover span{ box-shadow:0 6px 16px rgba(15,23,42,.10); transform: translateY(-1px); } #gridCatsWrap .chkItem input:checked + span{ background:#8b1f3d; border-color:#8b1f3d; color:#fff; box-shadow:0 8px 18px rgba(139,31,61,.18); } #gridCatsWrap .chkItem input:focus-visible + span{ outline:3px solid rgba(139,31,61,.22); outline-offset:2px; } /* ---------- Dropdown (Export -> Exporter / Importer) ---------- */ .dropdown{ position:relative; } .dropdown-menu{ position:absolute; right:0; top:calc(100% + 8px); min-width:220px; padding:6px; border-radius:12px; background:#fff; border:1px solid rgba(15,23,42,.14); box-shadow:0 18px 40px rgba(15,23,42,.16); display:none; z-index:50; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu{ display:block; } .dropdown .dropdown-item{ width:100%; display:flex; gap:10px; align-items:center; justify-content:flex-start; padding:10px 12px; border-radius:10px; border:1px solid transparent; background:#fff; font-weight:700; } .dropdown .dropdown-item:hover{ background:rgba(15,23,42,.04); border-color:rgba(15,23,42,.08); } /* Favoris – surligner uniquement le favori correspondant à la grille en cours d'édition */ #navFavorites .nav-item.is-current{ background: linear-gradient(90deg, rgb(0 172 79 / 50%) 0%, rgba(255,255,255,.20) 90%); } /* Icon buttons variants (topbar) */ .iconbtn.primary{ border-color:rgba(225,20,87,.25); box-shadow:0 2px 5px rgb(4 4 4 / 12%); } .iconbtn.primary i{ color: inherit; } /* Toggles (topbar) */ .toggle-switch{ position:relative; display:inline-flex; align-items:center; gap:8px; padding:4px 8px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.65); user-select:none; } .toggle-switch input{ position:absolute; inset:0; width:1px; height:1px; opacity:0; pointer-events:none; } .toggle-switch .track{ width:34px; height:20px; border-radius:999px; background:rgba(148,163,184,.45); position:relative; border:1px solid rgba(15,23,42,.12); box-shadow:inset 0 1px 2px rgba(0,0,0,.08); } .toggle-switch .thumb{ width:16px; height:16px; border-radius:50%; background:#fff; position:absolute; top:1px; left:1px; box-shadow:0 8px 20px rgba(0,0,0,.18); transform:translateX(0); transition:transform .18s ease, background .18s ease; } .toggle-switch input:checked + .track{ background:rgba(0,172,79,.45); } .toggle-switch input:checked + .track .thumb{ transform:translateX(14px); } .toggle-switch .toggle-text{ font-weight:700; color:var(--text); font-size:13px; } @media (max-width: 720px){ .toggle-switch .toggle-text{ display:none; } } /* Header editor: default first then toggles in a column */ .editor-toggles-col{ display:flex; gap:8px; align-items:flex-start; } /* Toggles compact */ /* Ultra-compact toggles (uniform size) */ .toggle-switch.toggle-compact{ padding:2px 6px; min-height:22px; width: 80px; } .toggle-switch.toggle-compact .track{ width:26px; height:14px; } .toggle-switch.toggle-compact .thumb{ width:12px; height:12px; top:1px; left:1px; } .toggle-switch.toggle-compact input:checked + .track .thumb{ transform:translateX(12px); } .toggle-switch.toggle-compact .toggle-text{ font-size:11px; line-height:1; } /* Header editor: default + toggles in one column */ .editor-head-col{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; } /* Header editor: 2 colonnes (Par défaut | Toggles) */ /* Header editor: 2 colonnes (Par défaut | Toggles) */ .editor-head-2col{ display:flex; align-items:center; /* vertical centering */ gap:14px; } .editor-head-default{ display:flex; align-items:center; /* center default vertically */ } /* Normalize title spacing so all topbars have same height */ .topbar h1, .topbar .view-title{ margin:0; line-height:1.2; } .topbar .view-subtitle, .topbar .view-hint{ margin:4px 0 0 0; line-height:1.2; } /* Sidebar footer accordion: Import - Export */ .sidebar-footer .footer-tools{ margin-bottom:10px; } .nav-accordion{ width:100%; } .nav-accordion > summary{ list-style:none; } .nav-accordion > summary::-webkit-details-marker{ display:none; } .nav-accordion-title{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; cursor:pointer; } .nav-accordion-title .chev{ opacity:.8; transition: transform .18s ease; } .nav-accordion[open] .nav-accordion-title .chev{ transform: rotate(180deg); } .nav-accordion-body{ display:flex; flex-direction:column; gap:10px; margin-top:10px; } .nav-subitem{ padding-left:16px; } /* ===== VIEW DATA — thème "Matrix" isolé (sans conflit) ===== */ #viewData .data-matrix-card{ background:#d4e0e0; border:0; border-radius:22px; padding:18px; box-shadow:0 10px 28px rgba(0,0,0,.08); } /* Liste "Données" : lecture type tableau (lignes pleines, séparateurs, hover) */ #viewData .data-table-wrap .list{ padding:0; gap:0; } #viewData .data-table-wrap .row{ background:transparent; border:0; border-bottom:1px solid #eef1f6; border-radius:0; box-shadow:none; padding:12px 12px; } #viewData .data-table-wrap .row:last-child{ border-bottom:0; } #viewData .data-table-wrap .row:hover{ background:#d4e0e073; } #viewData .data-table-wrap .row-actions{ gap:8px; } #viewData .data-matrix-card .data-table-wrap{ background:#fff !important; border-radius:16px !important; border:1px solid #e9edf3 !important; box-shadow:0 6px 18px rgba(0,0,0,.06) !important; padding:14px !important; overflow:auto !important; } /* Header (même logique que matrix-head mais scoppé) */ #viewData .data-matrix-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; flex-direction:row-reverse; } #viewData .data-matrix-title{ font-weight:600; color:#2b2f38; } #viewData .data-matrix-sub{ color:#6b7280; font-size:13px; margin-top:2px; } #viewData .data-matrix-controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } /* Segmented tabs isolés */ #viewData .data-nav{ position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: #fff; border: 1px solid #e9edf3; overflow: hidden; margin-bottom:14px; } #viewData .data-nav::before{ content:""; position:absolute; top: 6px; left: 6px; height: calc(100% - 12px); width: var(--seg-w, 140px); transform: translateX(var(--seg-x, 0px)); border-radius: 999px; background: #8b1f3d; transition: transform .20s ease, width .20s ease; z-index: 0; } #viewData .data-nav .data-tab{ position: relative; z-index: 1; border: 0; background: transparent; border-radius: 999px; padding: 10px 14px; font-weight: 600; cursor: pointer; transition: color .16s ease, background .16s ease; white-space: nowrap; color: #111; font-size: 14px; } #viewData .data-nav .data-tab:hover{ background: #d4e0e073; } #viewData .data-nav .data-tab.is-active{ color:#fff; } #viewData .data-nav .data-tab.is-active:hover{ background:#8b1f3d !important; color:#fff; } #viewData .data-nav.seg-init::before{ transition:none !important; } /* Lignes des listes dans la surface blanche */ #viewData .data-table-wrap .row{ background: transparent; border:0; border-radius:0; padding:12px 6px; margin:0; } #viewData .data-table-wrap .row + .row{ border-top:1px solid #eef1f6; } #viewData .data-table-wrap .row:hover{ background:#d4e0e073; } /* BO_v123 – widen label inputs */ .simple-editor input[type="text"], .modal-panel input[type="text"]{ min-width:320px; } /* BO_v124 – widen label input for data editors (Diagnostics, Catégories, Types, Paliers) */ .simple-editor .se-row .se-label input[type="text"], .simple-editor input[name="label"]{ width: 100%; max-width: 520px; } /* BO_v125 – widen "Label" inputs in Data editors (span full grid) */ .form-grid .field--wide{ grid-column: 1 / -1; } /* BO_v126 – extra wide label input */ .form-grid .field--wide{ grid-column: 1 / -1; } .form-grid .field--wide input[type="text"]{ width: 100%; max-width: 680px; } /* BO_v127 – enlarge label input itself */ .modal-panel .input{ width: 100%; max-width: 760px; } /* BO_v128 – place Label and ID on same row */ .form-grid .field--label{ grid-column: 1 / 2; } .form-grid .field--id{ grid-column: 2 / 3; } /* BO_v129 – enforce 2-column layout for Label + ID in all data editors */ .form-grid .field--label{ grid-column: 1 / 2; } .form-grid .field--id{ grid-column: 2 / 3; } /* BO_v130 – strict 50/50 Label / ID */ .form-grid .field--label input, .form-grid .field--id input{ width: 100%; max-width: none; } /* BO_v132 – form-grid clean & unique */ .form-grid{ display: grid; grid-template-columns: 1fr 240px 240px; gap: 12px 16px; align-items: start; } .form-grid2{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; } .form-grid .field{ display:flex; flex-direction:column; } .form-grid .input{ width:100%; max-width:100%; } @media (max-width: 760px){ .form-grid{ grid-template-columns: 1fr; } .form-grid2{ grid-template-columns: 1fr; } } /* BO_v141 – hide "Nouvelle grille" button on Données view */ body[data-view="data"] .btn-new-grid, body[data-view="data"] [data-action="new-grid"]{ display: none !important; } /* Toast sauvegarde (petit message en bas à droite) */ .save-toast{ position: fixed; right: 16px; bottom: 16px; z-index: 9999; background: #111827; color: #fff; padding: 10px 12px; border-radius: 999px; box-shadow: 0 10px 25px rgba(0,0,0,.15); font-weight: 600; font-size: 13px; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .save-toast.show{ opacity: 1; transform: translateY(0); } /* --- Auth UI (topbar user) --- */ .topbar-user{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.25); } .topbar-user i{ opacity:.9; } .topbar-user-txt{ display:flex; flex-direction:column; line-height:1.1; } .topbar-user-name{ font-weight:900; font-size:12px; color:#111; } .topbar-user-role{ font-weight:800; font-size:11px; opacity:.75; } /* ===== Brand (raison sociale + logo) dans la topbar ===== */ .topbar-brand{ display:flex; align-items:center; gap:10px; padding:6px 10px; border-radius:12px; background:rgba(255,255,255,.55); box-shadow:0 2px 10px rgba(0,0,0,.06); margin-right:12px; } .topbar-brand-logo{ width:34px; height:34px; object-fit:contain; border-radius:8px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.08); } .topbar-brand-name{ font-weight:900; font-size:13px; color:#111; white-space:nowrap; } @media (max-width: 720px){ .topbar-brand-name{ display:none; } } /* Company branding in sidebar */ .brand-row{ display:flex; align-items:center; gap:10px; padding:6px 0 10px 0; } .brand-logo{ width:80px; margin-left: auto; margin-right: auto; } .brand-name{ font-weight: 600; font-size: 15px; line-height: 1.15; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } /* ============================================================= Page Paramètres (bo_settings.php) ============================================================= */ .settings-grid{ display:grid; gap:16px; } @media (min-width:1024px){ .settings-grid{ grid-template-columns: 1.05fr .95fr; align-items:start; } } .card-head.compact{ padding:14px 16px; } .card-head .head-left{ display:flex; align-items:center; gap:10px; min-width:0; } .head-ic{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background: rgba(0, 172, 79, .14); box-shadow: inset 0 0 0 1px rgba(0, 172, 79, .25); } .head-ic svg{ width:18px; height:18px; } .settings-sub{ color:#5c6b73; font-size:13px; margin-top:2px; } .logo-uploader{ display:grid; grid-template-columns: 96px 1fr; gap:14px; align-items:center; } .logo-preview{ width:96px; height:96px; border-radius:16px; background:#f6f8fb; border:1px solid rgba(16, 24, 40, .10); display:grid; place-items:center; overflow:hidden; } .logo-preview img{ width:100%; height:100%; object-fit:contain; } .io-actions{ display:flex; gap:10px; flex-wrap:wrap; } .io-actions .btn{ min-width:200px; } .io-help{ color:#5c6b73; font-size:13px; line-height:1.45; margin-top:10px; } .io-divider{ height:1px; background: rgba(16, 24, 40, .08); margin:14px 0; } .btn-ghost{ background:rgba(16, 24, 40, .04); border:1px solid rgba(16, 24, 40, .12); } .btn-ghost:hover{ background:rgba(16, 24, 40, .06); } .fileline{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .fileline input[type="file"]{ max-width:340px; } .logo-box{ display:flex; gap:14px; align-items:flex-start; margin-top:14px; padding-top:14px; border-top:1px dashed rgba(16,24,40,.18); } .logo-preview{ width:76px; height:76px; border-radius:16px; background:rgba(16,24,40,.04); border:1px solid rgba(16,24,40,.10); display:grid; place-items:center; overflow:hidden; } .logo-preview img{ width:100%; height:100%; object-fit:contain; background:#fff; } .logo-actions{ flex:1; display:flex; flex-direction:column; gap:10px; } .logo-actions .hint{ font-size:12px; opacity:.72; line-height:1.35; } .muted-note{ font-size:12px; opacity:.72; margin:10px 0 0 0; } .settings-grid label{ font-weight:800; font-size:12px; color:#223; display:block; margin:0 0 6px 0; } .settings-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:0 0 16px 0; } .settings-title{ display:flex; gap:10px; align-items:flex-start; } .settings-title .title-ic{ width:36px; height:36px; border-radius:12px; display:grid; place-items:center; background:rgba(0,172,79,.12); border:1px solid rgba(0,172,79,.22); } .settings-title h1{ margin:0; font-size:20px; letter-spacing:.2px; } .settings-title p{ margin:4px 0 0 0; color:#556; font-size:13px; } .settings-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; } .settings-grid input[type="text"], .settings-grid input[type="number"], .settings-grid select{ width:100%; height:44px; padding:0 12px; border-radius:12px; border:1px solid rgba(16,24,40,.12); background:#fff; outline:none; } .settings-grid input[type="text"]:focus, .settings-grid input[type="number"]:focus, .settings-grid select:focus{ border-color: rgba(0,172,79,.45); box-shadow: 0 0 0 4px rgba(0,172,79,.12); } .settings-grid .hint{ color:#5c6b73; font-size:12px; margin-top:8px; }