/* ════════════════════════════════════════════════════════════════ FEUILLE SCOPÉE — page software "centered_and_folded_systems" À charger EN DERNIER dans le (après toutes les feuilles du software et Bootstrap), À LA PLACE de interface.css + mcp_modal.css. 1) Barre d'outils : règles d'interface.css confinées sous #software-toolbar (les règles globales body{padding:20px}, .container, textarea, .input-section… ne sont PAS reprises, ce qui supprime à la racine le décalage du bandeau). 2) Fenêtre modale : règles de mcp_modal.css préfixées "body " pour passer devant le CSS modal du software et de Bootstrap, + on neutralise la marge négative que Bootstrap impose à .close. ════════════════════════════════════════════════════════════════ */ /* ───────────────────────── BARRE D'OUTILS (scopée) ───────────────────────── */ #software-toolbar .btn-control { color: black; background-color: #ddd; border: none; cursor: pointer; text-decoration: none; padding: 10px 12px; border-radius: 6px; text-align: center; font-size: 15px; font-weight: 500; transition: background-color 0.2s ease; } #software-toolbar .btn-control:hover:not([disabled]) { background-color: #bbb; } #software-toolbar .btn-control:active:not([disabled]) { background-color: #666; color: white; } #software-toolbar .btn-control:disabled { background-color: #eee; color: #aaa; cursor: not-allowed; } #software-toolbar #btn-rollback, #software-toolbar #btn-rollforward { font-size: 25px; padding: 3px 10px; } #software-toolbar .display-info { color: #666; font-size: 14px; margin-left: auto; } /* Action buttons (Add / Replace) — au cas où ils apparaissent */ #software-toolbar .action-buttons { display: flex; gap: 8px; justify-content: center; align-items: center; } #software-toolbar .btn-add-component, #software-toolbar .btn-create-component { border: 1px solid #999; padding: 5px 12px; border-radius: 2px; cursor: pointer; font-size: 12px; font-weight: normal; transition: border-color 0.15s ease, color 0.15s ease; background-color: white; color: #555; } #software-toolbar .btn-add-component:hover:not([disabled]), #software-toolbar .btn-create-component:hover:not([disabled]) { border-color: #333; color: #333; } #software-toolbar .btn-add-component:disabled, #software-toolbar .btn-create-component:disabled { opacity: 0.5; cursor: not-allowed; border-color: #ddd; color: #aaa; } /* Boutons output */ #software-toolbar .output-buttons-container { display: flex; justify-content: flex-end; gap: 10px; margin: 10px 0; width: 100%; } #software-toolbar .btn-output { color: white; background-color: rgb(0, 153, 153); border: none; cursor: pointer; text-decoration: none; padding: 10px 12px; border-radius: 6px; text-align: center; font-size: 15px; font-weight: 500; transition: background-color 0.2s ease; } #software-toolbar .btn-output:hover { background-color: #5fda89; } /* Menus déroulants */ #software-toolbar .dropdown-container { position: relative; display: inline-block; } #software-toolbar .btn-dropdown { color: white; background-color: rgb(0, 153, 153); border: none; cursor: pointer; text-decoration: none; padding: 10px 12px; border-radius: 6px; text-align: center; font-size: 15px; font-weight: 500; transition: background-color 0.2s ease; } #software-toolbar .btn-dropdown:hover { background-color: #5fda89; } #software-toolbar .dropdown-menu { display: none; position: absolute; top: calc(100% + 4px); left: 0; background-color: white; border: 1px solid #ccc; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1000; min-width: 200px; overflow: hidden; } #software-toolbar .dropdown-menu.open { display: block; } #software-toolbar .dropdown-item { display: block; width: 100%; padding: 10px 16px; background: white; border: none; text-align: left; font-size: 14px; font-weight: 400; color: #333; cursor: pointer; transition: background-color 0.15s ease; box-sizing: border-box; } #software-toolbar .dropdown-item:hover { background-color: rgb(0, 153, 153); color: white; } #software-toolbar .dropdown-item:not(:last-child) { border-bottom: 1px solid #eee; } /* Menu output - 2 niveaux */ #software-toolbar .output-group { border-bottom: 1px solid #ddd; } #software-toolbar .output-group:last-child { border-bottom: none; } #software-toolbar .output-group-title { background-color: #e8f5f5; color: #006666; font-weight: 700; font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase; padding: 10px 16px; border-bottom: none !important; } #software-toolbar .output-group-title:hover { background-color: rgb(0, 153, 153); color: white; } #software-toolbar .output-subgroup { background-color: #f9f9f9; border-top: 1px solid #e0e0e0; } #software-toolbar .dropdown-subitem { padding: 8px 16px 8px 28px; font-size: 13px; color: #444; background-color: #f9f9f9; border-bottom: 1px solid #f0f0f0 !important; } #software-toolbar .dropdown-subitem:last-child { border-bottom: none !important; } #software-toolbar .dropdown-subitem:hover { background-color: rgb(0, 153, 153); color: white; } #software-toolbar #output-menu { left: auto; right: 0; max-height: 420px; overflow-y: auto; } #software-toolbar .dropdown-subitem-row { display: flex; align-items: center; } #software-toolbar .dropdown-subitem-row .dropdown-item.dropdown-subitem { flex: 1; } #software-toolbar .dropdown-subitem-tuto { display: inline-block; margin-left: 4px; margin-right: 6px; padding: 2px 6px; font-size: 11px; font-weight: 600; color: #007bff; background: #e8f0fe; border: 1px solid #c0d4f5; border-radius: 3px; text-decoration: none; white-space: nowrap; line-height: 1.4; cursor: pointer; } #software-toolbar .dropdown-subitem-tuto:hover { background: #007bff; color: white; border-color: #007bff; text-decoration: none; } @keyframes calcSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ───────────────────── FENÊTRE MODALE (préfixée "body ") ───────────────────── */ body .modal { display: none; position: fixed !important; z-index: 2147483647 !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; background-color: rgba(0, 0, 0, 0.6); pointer-events: auto !important; } body .modal .modal-content { position: absolute !important; background: #1a1a1a; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); overflow: hidden; pointer-events: auto !important; /* Resets défensifs : le ModalManager ne pose PAS ces propriétés en inline, donc une feuille du software pourrait les injecter et décaler/redimensionner la fenêtre. (On ne touche PAS à width/height/top/left/max-width : ceux-là sont posés en inline par modal_manager.) */ margin: 0 !important; max-height: none !important; min-height: 0 !important; min-width: 0 !important; } body .modal .modal-header { background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #3498db; cursor: move; user-select: none; } body .modal .modal-title { color: white; font-size: 16px; font-weight: 600; margin: 0; } body .modal .modal-controls { display: flex; gap: 10px; align-items: center; } body .modal .zoom-indicator { color: white; font-size: 14px; padding: 5px 10px; background: rgba(255, 255, 255, 0.1); border-radius: 5px; min-width: 50px; text-align: center; font-weight: bold; } body .modal .btn-reset { background: rgba(52, 152, 219, 0.8); border: 1px solid rgba(52, 152, 219, 1); color: white; font-size: 13px; font-weight: bold; cursor: pointer; padding: 5px 12px; border-radius: 5px; transition: all 0.2s ease; } body .modal .btn-reset:hover { background: rgba(41, 128, 185, 1); transform: translateY(-1px); } /* Bouton fermer : styles mcp_modal + neutralisation de la marge négative de Bootstrap */ body .modal .close { background: rgba(231, 76, 60, 0.8); border: none; color: white; font-size: 24px; font-weight: bold; cursor: pointer; padding: 2px 10px; border-radius: 6px; line-height: 1; transition: all 0.2s ease; margin: 0 !important; float: none !important; position: static !important; opacity: 1 !important; text-shadow: none !important; } body .modal .close:hover { background: rgba(192, 57, 43, 1); transform: scale(1.1); } /* Body de la modale + image (taille naturelle, zoom géré par transform) */ body .modal .modal-body { background: #000; width: 100%; height: calc(100% - 48px); overflow: hidden; position: relative; cursor: grab; } body .modal .modal-body.panning { cursor: grabbing !important; } body .modal .modal-body img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: center center; transition: transform 0.1s ease-out; user-select: none; pointer-events: none; /* Taille intrinsèque forcée : neutralise un éventuel "img { width:100% }" du software qui étirerait l'image (→ surdimensionnée). Reproduit le rendu MCP où l'image est affichée à sa taille naturelle (scale géré par le ModalManager via transform). */ width: auto !important; height: auto !important; max-width: none !important; max-height: none !important; } /* Poignées de redimensionnement */ body .modal .resize-handle { position: absolute; background: rgba(52, 152, 219, 0.7); transition: background 0.2s ease; z-index: 10; } body .modal .resize-handle:hover { background: rgba(52, 152, 219, 1); } body .modal .resize-nw { top: 0; left: 0; width: 20px; height: 20px; cursor: nw-resize; border-top-left-radius: 12px; } body .modal .resize-ne { top: 0; right: 0; width: 20px; height: 20px; cursor: ne-resize; border-top-right-radius: 12px; } body .modal .resize-sw { bottom: 0; left: 0; width: 20px; height: 20px; cursor: sw-resize; border-bottom-left-radius: 12px; } body .modal .resize-se { bottom: 0; right: 0; width: 20px; height: 20px; cursor: se-resize; border-bottom-right-radius: 12px; } body .modal .resize-n { top: 0; left: 20px; right: 20px; height: 8px; cursor: n-resize; } body .modal .resize-s { bottom: 0; left: 20px; right: 20px; height: 8px; cursor: s-resize; } body .modal .resize-e { right: 0; top: 20px; bottom: 20px; width: 8px; cursor: e-resize; } body .modal .resize-w { left: 0; top: 20px; bottom: 20px; width: 8px; cursor: w-resize; } /* Responsive */ @media (max-width: 768px) { body .modal .modal-content { width: 95vw !important; height: 90vh !important; max-width: none !important; } body .modal .modal-title { font-size: 14px; } body .modal .zoom-indicator { font-size: 12px; padding: 3px 8px; } body .modal .btn-reset { font-size: 11px; padding: 3px 8px; } body .modal .resize-nw, body .modal .resize-ne, body .modal .resize-sw, body .modal .resize-se { width: 30px !important; height: 30px !important; } body .modal .resize-n, body .modal .resize-s { height: 15px !important; } body .modal .resize-e, body .modal .resize-w { width: 15px !important; } }