/* Style global de la page */
        body { font-family: 'Segoe UI', Tahoma, sans-serif; background: #e9ecef; margin: 0; padding: 20px; color: #333; }
        .app-container { max-width: 900px; margin: auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
        h1 { text-align: center; color: #2c3e50; }
        
        /* Barre d'outils (Sauvegarder / Charger) */
        .top-toolbar { display: flex; gap: 10px; margin-bottom: 20px; background: #ecf0f1; padding: 15px; border-radius: 8px; }
        .btn-save { background: #2980b9; flex: 1; font-size: 16px; }
        .btn-load { background: #8e44ad; flex: 1; font-size: 16px; }
        
        /* Bouton principal de génération du jeu */
        .btn-generate { background: #27ae60; width: 100%; font-size: 20px; margin-top: 30px; padding: 15px; }
        .btn-generate:hover { background: #2ecc71; }
        .btn-export-offline {
            background: #16a085;
            width: 100%;
            font-size: 17px;
            margin-top: 12px;
            padding: 14px;
            border: none;
            border-radius: 8px;
            color: #fff;
            cursor: pointer;
            font-weight: 600;
        }
        .btn-export-offline:hover { background: #1abc9c; }
        
        /* Blocs visuels (Scènes et Hotspots) — fluides : panneau latéral carte, petits écrans */
        .scene-block, .hotspot-block {
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
        }
        .scene-block { border: 2px solid #3498db; border-radius: 8px; padding: 15px; margin-top: 20px; background: #f8fbff; }
        .hotspot-block { border: 1px solid #2ecc71; border-left: 5px solid #2ecc71; padding: 15px; margin-top: 15px; background: white; border-radius: 5px; }

        .scene-header {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
            border-bottom: 1px solid #ccc;
            padding-bottom: 10px;
            margin-bottom: 10px;
            background: #eaf2f8;
            padding: 10px;
            border-radius: 5px;
        }
        .scene-header-main,
        .scene-header-actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }
        .scene-header-actions {
            justify-content: flex-end;
            flex: 1 1 200px;
        }
        .scene-block-heading { margin: 0; font-size: 1.05em; line-height: 1.3; }

        .hs-block-header {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
            background: #e8f8f5;
            padding: 8px;
            border-radius: 5px;
        }
        .hs-block-header-main,
        .hs-block-header-actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }
        .hs-block-header-actions {
            justify-content: flex-end;
            flex: 1 1 180px;
        }
        .hs-block-id { font-weight: bold; flex: 0 1 auto; }

        /* Éléments de formulaire (Inputs, bouttons) */
        input, select, textarea { width: 100%; padding: 8px; margin-top: 5px; margin-bottom: 10px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; max-width: 100%; }
        /* Cases / radios : ne pas hériter du width:100% global (sinon label + case se cassent sur plusieurs lignes). */
        input[type="checkbox"],
        input[type="radio"] {
            width: auto;
            max-width: none;
            margin-top: 0;
            margin-bottom: 0;
            flex-shrink: 0;
            align-self: center;
        }
        .row {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: flex-start;
        }
        .col {
            flex: 1 1 200px;
            min-width: 0;
            max-width: 100%;
        }
        .col-wide {
            flex: 2 1 280px;
            min-width: min(100%, 200px);
        }
        /* Bloc repliable : ambiance / volume / timer local par scène */
        .scene-optional-details {
            margin: 10px 0 14px 0;
            border: 1px solid #dce4ec;
            border-radius: 6px;
            padding: 0 12px 10px;
            background: #f8fafc;
        }
        .scene-optional-details > summary.scene-optional-details-summary {
            cursor: pointer;
            font-weight: 600;
            color: #2c3e50;
            padding: 10px 4px 8px;
            list-style-position: outside;
        }
        .scene-optional-details-inner {
            padding-top: 2px;
        }
        button { cursor: pointer; padding: 10px 15px; border: none; border-radius: 5px; font-weight: bold; color: white; transition: 0.2s; }
        
        /* Boutons d'actions spécifiques */
        .btn-add-scene { background: #3498db; width: 100%; font-size: 16px; margin-top: 20px; }
        .btn-add-hs { background: #2ecc71; font-size: 14px; margin-top: 10px; }
        .btn-del { background: #e74c3c; padding: 5px 10px; }
        .btn-target { background: #e67e22; width: 100%; font-size: 14px; margin-bottom: 10px; }
        .btn-preview-scene { background: #f39c12; color: white; padding: 8px 15px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; }
        
        /* Petits boutons d'interface (Flèches, Dupliquer, Plier) */
        .btn-icon { background: #95a5a6; color: white; padding: 6px 10px; border-radius: 4px; margin-right: 3px; font-size: 14px; }
        .btn-icon:hover { background: #7f8c8d; }
        
        /* Champs de titres facultatifs (Notes pour l'utilisateur) */
        .title-input {
            display: inline-block;
            width: auto;
            min-width: min(100%, 140px);
            max-width: 100%;
            flex: 1 1 180px;
            margin: 0;
            padding: 5px;
            border: 1px dashed #ccc;
            background: white;
            box-sizing: border-box;
        }

        .editor-row-spread {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-end;
            gap: 10px;
            margin-top: 15px;
        }
        .editor-row-spread-label {
            margin: 0;
            flex: 1 1 160px;
            min-width: 0;
        }
        .btn-expert-css,
        .btn-sel-json-expert {
            background: #7f8c8d !important;
            flex-shrink: 0;
        }
        .editor-field-label {
            display: block;
            margin-top: 10px;
        }

        /* Éditeur CSS (Mode Expert) */
        .dynamic-fields { padding: 15px; background: #f9f9f9; border: 1px dashed #ccc; margin-top: 10px; border-radius: 4px; }
        textarea.css-editor { font-family: 'Courier New', Courier, monospace; background: #2d3436; color: #f1c40f; font-size: 13px; }

        /* Éditeur CSS Visuel (Mode No-Code) */
        .visual-css-editor { background: #ecf0f1; border: 1px solid #bdc3c7; padding: 10px; border-radius: 5px; margin-bottom: 10px; font-size: 13px; min-width: 0; }
        .visual-css-editor .row { margin-bottom: 0; }
        .visual-css-editor .row .col { flex: 1 1 140px; min-width: min(100%, 120px); }
        .visual-css-editor label { display: block; margin-top: 5px; font-weight: bold; color: #34495e; }
        input[type="color"] { padding: 0; border: none; border-radius: 4px; cursor: pointer; height: 35px; }
        input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
        input[type="color"]::-webkit-color-swatch { border: 1px solid #ccc; border-radius: 4px; }
        
        /* Fenêtres Modales (Popups prenant tout l'écran) */
        .modal-fullscreen { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 10000; flex-direction: column; }
        /* Placement 360° et aperçu scène : au-dessus de la modale carte Drawflow (#project-map-modal, z-index 10000) */
        #picker-modal.modal-fullscreen,
        #scene-preview-modal.modal-fullscreen { z-index: 11050; }
        .modal-header { padding: 15px; background: #222; color: white; display: flex; justify-content: space-between; align-items: center; font-size: 18px; }

        /* Paramètres de l'inventaire */
        #inv-settings { background: #fff3cd; padding: 15px; margin-top: 10px; border-radius: 8px; border: 1px solid #ffeeba; }

        /* Sections repliables (apparence hotspot, JSON selector) */
        .editor-collapse-section { margin-top: 12px; margin-bottom: 8px; }
        .editor-collapse-header {
            width: 100%; text-align: left; cursor: pointer;
            padding: 10px 12px; border: 1px solid #bdc3c7; border-radius: 6px;
            background: #ecf0f1; color: #2c3e50; font-size: 14px; font-weight: 600;
        }
        .editor-collapse-header:hover { background: #dfe6e9; }

        /* Formulaire des choix du selector */
        .sel-choices-root { margin-top: 8px; }
        .sel-choice-card {
            border: 1px solid #bdc3c7; border-radius: 8px; padding: 12px; margin-bottom: 12px;
            background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        }
        .sel-choice-toolbar {
            display: flex; align-items: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap;
        }
        .sel-choice-heading { font-weight: 600; color: #2980b9; margin-right: auto; }
        .sel-nested-block {
            margin-top: 10px; padding: 10px; border-left: 3px solid #3498db; background: #f8fbff; border-radius: 0 6px 6px 0;
        }
        /* Tiroirs par choix (alignés sur hs-vis-advanced / hs-sfx-advanced des hotspots) */
        .sel-choice-card .hs-vis-advanced,
        .sel-choice-card .hs-sfx-advanced { font-size: 13px; color: #555; }
        .sel-choice-card .hs-vis-advanced summary,
        .sel-choice-card .hs-sfx-advanced summary { color: #2c3e50; }
        .selector-form-wrap { margin-top: 8px; }
        .selector-json-hint { font-size: 13px; color: #555; margin: 8px 0; line-height: 1.4; }

        /* Sous-sections repliables (inventaire / popups / audio) dans les paramètres globaux */
        .global-settings-subsection {
            background: #fdfefe;
            padding: 12px 16px 16px;
            border-radius: 8px;
            border: 1px solid #d5dbdb;
        }
        .global-settings-subsection-head {
            margin: -4px -8px 12px -8px;
            padding: 8px 8px 10px;
            border-bottom: 1px solid #d5dbdb;
            background: #eaf2f8;
            border-radius: 6px 6px 0 0;
        }

        /* Quill (WYSIWYG) dans les champs dynamiques */
        .wysiwyg-wrap {
            margin-bottom: 12px;
        }
        .wysiwyg-wrap .ql-toolbar {
            border-radius: 4px 4px 0 0;
            border-color: #bdc3c7;
            background: #f8f9fa;
        }
        .wysiwyg-wrap .ql-container {
            border-radius: 0 0 4px 4px;
            border-color: #bdc3c7;
            font-size: 14px;
            min-height: 72px;
            background: #fff;
        }

        /* Polices Quill (valeurs internes → stacks système, hors-ligne) */
        .ql-font-arial { font-family: Arial, Helvetica, sans-serif; }
        .ql-font-courier { font-family: "Courier New", Courier, monospace; }
        .ql-font-times { font-family: "Times New Roman", Times, serif; }
        .ql-font-impact { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", fantasy; }
        .ql-font-comic { font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif; }

        .wysiwyg-wrap .ql-picker.ql-font { width: 148px; }
        .wysiwyg-wrap .ql-picker.ql-font .ql-picker-label::before,
        .wysiwyg-wrap .ql-picker.ql-font .ql-picker-item::before {
            content: none;
        }
        .wysiwyg-wrap .ql-picker.ql-font .ql-picker-label[data-value="arial"]::before,
        .wysiwyg-wrap .ql-picker.ql-font .ql-picker-item[data-value="arial"]::before {
            content: "Arial";
            font-family: Arial, Helvetica, sans-serif;
        }
        .wysiwyg-wrap .ql-picker.ql-font .ql-picker-label[data-value="courier"]::before,
        .wysiwyg-wrap .ql-picker.ql-font .ql-picker-item[data-value="courier"]::before {
            content: "Courier New";
            font-family: "Courier New", Courier, monospace;
        }
        .wysiwyg-wrap .ql-picker.ql-font .ql-picker-label[data-value="times"]::before,
        .wysiwyg-wrap .ql-picker.ql-font .ql-picker-item[data-value="times"]::before {
            content: "Times New Roman";
            font-family: "Times New Roman", Times, serif;
        }
        .wysiwyg-wrap .ql-picker.ql-font .ql-picker-label[data-value="impact"]::before,
        .wysiwyg-wrap .ql-picker.ql-font .ql-picker-item[data-value="impact"]::before {
            content: "Impact";
            font-family: Impact, Haettenschweiler, fantasy;
        }
        .wysiwyg-wrap .ql-picker.ql-font .ql-picker-label[data-value="comic"]::before,
        .wysiwyg-wrap .ql-picker.ql-font .ql-picker-item[data-value="comic"]::before {
            content: "Comic Sans MS";
            font-family: "Comic Sans MS", cursive, sans-serif;
        }
        .wysiwyg-wrap .ql-picker.ql-font .ql-picker-label[data-value="false"]::before,
        .wysiwyg-wrap .ql-picker.ql-font .ql-picker-item[data-value="false"]::before,
        .wysiwyg-wrap .ql-picker.ql-font .ql-picker-label[data-value=""]::before,
        .wysiwyg-wrap .ql-picker.ql-font .ql-picker-item[data-value=""]::before,
        .wysiwyg-wrap .ql-picker.ql-font .ql-picker-label:not([data-value])::before {
            content: "Défaut";
        }
        html[lang="en"] .wysiwyg-wrap .ql-picker.ql-font .ql-picker-label[data-value="false"]::before,
        html[lang="en"] .wysiwyg-wrap .ql-picker.ql-font .ql-picker-item[data-value="false"]::before,
        html[lang="en"] .wysiwyg-wrap .ql-picker.ql-font .ql-picker-label[data-value=""]::before,
        html[lang="en"] .wysiwyg-wrap .ql-picker.ql-font .ql-picker-item[data-value=""]::before,
        html[lang="en"] .wysiwyg-wrap .ql-picker.ql-font .ql-picker-label:not([data-value])::before {
            content: "Default";
        }

        /* Tailles Quill — rendu dans l’éditeur */
        .wysiwyg-wrap .ql-editor .ql-size-small { font-size: 0.85em; }
        .wysiwyg-wrap .ql-editor .ql-size-large { font-size: 1.5em; }
        .wysiwyg-wrap .ql-editor .ql-size-huge { font-size: 2em; }

        .wysiwyg-wrap .ql-picker.ql-size { width: 92px; }
        html[lang="fr"] .wysiwyg-wrap .ql-picker.ql-size .ql-picker-label::before,
        html[lang="fr"] .wysiwyg-wrap .ql-picker.ql-size .ql-picker-item::before {
            content: none;
        }
        html[lang="fr"] .wysiwyg-wrap .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
        html[lang="fr"] .wysiwyg-wrap .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
            content: "Petit";
        }
        html[lang="fr"] .wysiwyg-wrap .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
        html[lang="fr"] .wysiwyg-wrap .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
            content: "Grand";
        }
        html[lang="fr"] .wysiwyg-wrap .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
        html[lang="fr"] .wysiwyg-wrap .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
            content: "Très grand";
        }
        html[lang="fr"] .wysiwyg-wrap .ql-picker.ql-size .ql-picker-label[data-value="false"]::before,
        html[lang="fr"] .wysiwyg-wrap .ql-picker.ql-size .ql-picker-item[data-value="false"]::before,
        html[lang="fr"] .wysiwyg-wrap .ql-picker.ql-size .ql-picker-label[data-value=""]::before,
        html[lang="fr"] .wysiwyg-wrap .ql-picker.ql-size .ql-picker-item[data-value=""]::before,
        html[lang="fr"] .wysiwyg-wrap .ql-picker.ql-size .ql-picker-label:not([data-value])::before {
            content: "Normal";
        }
        html[lang="en"] .wysiwyg-wrap .ql-picker.ql-size .ql-picker-label::before,
        html[lang="en"] .wysiwyg-wrap .ql-picker.ql-size .ql-picker-item::before {
            content: none;
        }
        html[lang="en"] .wysiwyg-wrap .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
        html[lang="en"] .wysiwyg-wrap .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
            content: "Small";
        }
        html[lang="en"] .wysiwyg-wrap .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
        html[lang="en"] .wysiwyg-wrap .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
            content: "Large";
        }
        html[lang="en"] .wysiwyg-wrap .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
        html[lang="en"] .wysiwyg-wrap .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
            content: "Huge";
        }
        html[lang="en"] .wysiwyg-wrap .ql-picker.ql-size .ql-picker-label[data-value="false"]::before,
        html[lang="en"] .wysiwyg-wrap .ql-picker.ql-size .ql-picker-item[data-value="false"]::before,
        html[lang="en"] .wysiwyg-wrap .ql-picker.ql-size .ql-picker-label[data-value=""]::before,
        html[lang="en"] .wysiwyg-wrap .ql-picker.ql-size .ql-picker-item[data-value=""]::before,
        html[lang="en"] .wysiwyg-wrap .ql-picker.ql-size .ql-picker-label:not([data-value])::before {
            content: "Normal";
        }

        select.f-target,
        select.sel-scene-target {
            max-width: 100%;
            min-width: 140px;
            padding: 6px 8px;
            border-radius: 4px;
            border: 1px solid #bdc3c7;
        }