/* DemoBuilder editor — styles extraits de Index.cshtml */
        :root { --red:#b91c3c; --gray:#6b7280; --border:#e5e7eb; --bg:#f9fafb; --sep:#1f2937; }
        * { box-sizing:border-box; }
        /* Rectangles de surlignage recherche : cadre rouge fin dessine par-dessus le controle */
        .search-rect { pointer-events:none; }
        html, body { height:100%; }
        body { font-family:'Inter',system-ui,sans-serif; margin:0; background:var(--bg); color:#1f2937; display:flex; flex-direction:column; overflow:hidden; }
        header { background:#fff; border-bottom:1px solid var(--border); z-index:100; box-shadow:0 2px 6px rgba(0,0,0,0.08); flex-shrink:0; }
        header .header-top { padding:12px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
        header .file-path { font-size:12px; color:#6b7280; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60%; direction:rtl; text-align:left; }
        header .toolbar { padding:6px 14px 10px 14px; border-top:1px solid #f3f4f6; margin-bottom:0; }
        main { flex:1 1 auto; overflow-y:auto; }
        /* Sticky thead (haut du main, le header est hors du scroll) */
        thead th { position:sticky; top:0; z-index:5; background:#fff; }
        h1 { margin:0; font-size:20px; color:var(--red); }
        main { padding:0 0 60px 6px; flex:1 1 auto; overflow-y:auto; overflow-x:hidden; }
        .toolbar { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; align-items:center; padding:0 8px; }
        button { font:inherit; cursor:pointer; border:0; border-radius:6px; padding:7px 14px; font-weight:600; font-size:13px; }
        .btn-primary { background:var(--red); color:#fff; }
        .btn-secondary { background:#e5e7eb; color:#374151; }
        .btn-ghost { background:transparent; color:var(--red); padding:4px 8px; }
        /* Réduit l'écart horizontal entre les flèches monter/descendre (étapes) */
        .col-sequences .btn-up, .col-sequences .btn-down { padding:4px 1px; }
        table { width:100%; table-layout:fixed; background:#fff; border-collapse:separate; border-spacing:0; border-radius:8px; }
        th { background:#f3f4f6; padding:8px 10px; text-align:center; font-size:11px; text-transform:uppercase; color:var(--gray); letter-spacing:0.5px; border-bottom:2px solid transparent; box-shadow:none; }
        td { padding:10px 6px; border-bottom:2px solid transparent; vertical-align:top; font-size:13px; }
        tr:last-child td { border-bottom:0; }
        td input, td select, td textarea { width:100%; border:1px solid var(--border); border-radius:4px; padding:5px 7px; font:inherit; font-size:13px; background:#fff; }
        td textarea { resize:vertical; min-height:60px; font-family:inherit; }
        td .drag-handle { cursor:grab; color:#9ca3af; font-size:18px; user-select:none; }
        /* Padding-bottom 0 sur le td : le bord noir bas sera porte par .col-order-inner (suit l indent) */
        tr.step-row > td.col-order { padding:10px 0 0 0; border-bottom:0; height:1px; vertical-align:top; }
        /* col-order = UNIQUEMENT le hook de drag (~16px) : le Titre de la Ligne 1 est colle juste apres.
           Les numeros chapitre/etape ont ete deplaces a droite de la Ligne 1 (.step-num). */
        .col-order { width:16px; text-align:left; }
        .col-order-inner { display:flex; flex-direction:column; height:100%; min-height:36px; border-bottom:2px solid transparent; padding:0 0 8px 0; box-sizing:border-box; }
        .col-order-inner .col-order-handle { font-size:18px; color:#9ca3af; cursor:grab; user-select:none; line-height:1; }
        /* Ligne 3 : numeros (flush bord gauche) + bouton +IA. Le texte de la Ligne 2 ne bouge pas. */
        .step-line3 { display:flex; align-items:center; gap:12px; margin-top:2px; }
        .step-line3 .step-num { display:inline-flex; align-items:baseline; gap:5px; white-space:nowrap; flex-shrink:0; }
        .step-num .col-order-chap { font-size:13.86px; font-weight:700; color:#1f2937; cursor:pointer; padding:1px 4px 1px 0; border-radius:4px; }
        .step-num .col-order-step { font-size:12.6px; font-weight:600; color:#9ca3af; }
        .seg-inject-lbl { display:inline-flex; align-items:center; gap:5px; font-size:10px; color:#9ca3af; white-space:nowrap; }
        .seg-inject-lbl .seg-inject { width:240px; height:20px; font-size:10px; padding:1px 6px; border:1px solid var(--border); border-radius:4px; color:#374151; }
        .col-app { width:30%; vertical-align:top; }
        /* Colonne Application + Texte : select app en haut, champ texte (+ ses 3 boutons) en dessous. */
        .app-text-stack { display:flex; flex-direction:column; gap:6px; }
        .app-select-row { display:flex; align-items:center; gap:4px; }
        .app-select-row > select[data-f="app"] { width:110px; }
        .app-edit-btn { background:transparent; border:0; cursor:pointer; font-size:13px; padding:1px 4px; border-radius:4px; }
        .app-edit-btn:hover { background:#f3f4f6; }
        /* Étiquette flottante "à cheval" sur le haut du contour du champ texte de la bulle */
        .text-float-label { font-size:11px; font-weight:700; color:#6b7280; padding:0 4px; pointer-events:none; margin:0; }
        .text-float-label.ia-label { display:inline-flex; align-items:center; background:#EF4444; color:#fff; border-radius:4px; padding:1px 4px; font-size:10px; }
        .ia-badge-mini { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; background:#FFD600; color:#2E7D32; font-size:7px; font-weight:800; line-height:1; margin-right:3px; flex-shrink:0; }
        /* col-app collee a 5px du # */
        th.col-order, td.col-order { padding-right:0; }
        th.col-app, td.col-app { padding-left:4px; }
        .col-url { width:17.64%; }                        /* -30% (25.2 -> 17.64) */
        .col-url .url-wrap textarea { width:100%; height:30px; min-height:30px; resize:none; white-space:nowrap; overflow-x:auto; font-family:inherit; font-size:inherit; padding:4px 6px; border:1px solid var(--border); border-radius:4px; box-sizing:border-box; line-height:1.3; }
        .url-wrap { display:flex; gap:2px; align-items:flex-start; }
        .url-wrap input { flex:1; min-width:0; }
        /* Même style ET même hauteur (24px) que les boutons à droite des événements (cellule Séquence) */
        .url-wrap .url-pick, .url-wrap .url-go { background:#f3f4f6; border:1px solid var(--border); border-radius:4px; padding:0 6px; cursor:pointer; font-size:13px; line-height:1; height:24px; box-sizing:border-box; }
        .url-wrap .url-clear { background:#fee2e2; color:#991b1b; border:1px solid var(--border); border-radius:4px; padding:0 6px; cursor:pointer; font-size:13px; line-height:1; height:24px; box-sizing:border-box; }
        .url-pick:hover { background:#0ea5e9; color:#fff; border-color:#0ea5e9; }
        .url-go:hover { background:#10b981; color:#fff; border-color:#10b981; }
        .url-clear:hover { background:#dc2626; color:#fff; border-color:#dc2626; }
        /* Plus de translateX : toutes les colonnes flush, pas de trou nulle part */
        /* Highlight : liste verticale */
        .hl-list { display:flex; flex-direction:column; gap:3px; }
        .hl-item { display:flex; gap:2px; align-items:stretch; }
        .hl-item input { flex:1; min-width:0; font-family:monospace; font-size:12px; }
        .hl-item .hl-remove { background:#fee2e2; color:#991b1b; border:1px solid var(--border); border-radius:4px; padding:0 6px; cursor:pointer; font-size:13px; line-height:1; }
        .hl-item .hl-remove:hover { background:#dc2626; color:#fff; }
        .hl-actions { display:flex; gap:3px; }
        .hl-actions button { flex:1; background:#f3f4f6; border:1px solid var(--border); border-radius:4px; padding:3px; cursor:pointer; font-size:12px; }
        .hl-actions .hl-pick:hover { background:#0ea5e9; color:#fff; border-color:#0ea5e9; }
        .hl-actions .hl-add:hover { background:#10b981; color:#fff; border-color:#10b981; }
        .col-highlight { width:10%; }
        .col-sequence { width:180px; }         /* +30px (pris sur col-text) */
        .col-title { width:10.56%; }         /* +20% (8.8% -> 10.56%) */
        /* col-text supprimee : le champ Texte est desormais sous le select dans la colonne Application (.col-app) */
        .col-position { width:145px; text-align:right; padding-right:4px; }
        .col-sequences { width:80px; text-align:right; white-space:nowrap; }
        /* Flèches déplacer l'étape (monter/descendre) regroupées dans un fond arrondi sans bord, même couleur que .pos-group */
        .step-move { display:inline-flex; align-items:center; gap:1px; border:0; border-radius:6px; padding:2px; }
        /* ===== Étape sur une ligne : Ligne 1 = strip de contrôles, Ligne 2 = texte bulle + actions ===== */
        .step-cell { padding:8px 35px 8px 0; vertical-align:top; }
        /* Align left edge with chapter banner at same depth */
        tr.step-row[data-step-depth="2"] .step-cell { padding-left:10px; }
        tr.step-row[data-step-depth="3"] .step-cell { padding-left:20px; }
        tr.step-row[data-step-depth="4"] .step-cell { padding-left:30px; }
        tr.step-row[data-step-depth="5"] .step-cell { padding-left:40px; }
        .step-line1 { display:flex; align-items:center; gap:14px; flex-wrap:nowrap; }
        .step-line1 .seg { display:inline-flex; align-items:center; gap:5px; min-width:0; flex-shrink:1; }
        .step-line1 .seg-label { font-size:12px; font-weight:700; color:#4b5563; text-transform:uppercase; letter-spacing:0.3px; white-space:nowrap; }
        /* Fieldsets "Options de démo" style pour les 5 groupes Position/App/Url/Surbrillance/Séquence */
        .step-line1 .seg-fs { display:flex; align-items:center; gap:6px; margin:0; border:1px solid var(--border); border-radius:8px; padding:1px 8px 3px; min-width:0; flex-shrink:1; }
        .step-line1 .seg-fs > legend { font-size:11px; font-weight:700; color:#6b7280; padding:0 6px; margin:0; }
        /* Override du "td input/select/textarea { width:100% }" pour rester compact sur la ligne */
        .step-line1 input, .step-line1 select, .step-line1 textarea { width:auto; min-width:0; }
        .step-line1 .seg-url .url-wrap { display:flex; gap:2px; align-items:center; width:336px; }
        .step-line1 .seg-url .url-wrap textarea { flex:1; min-width:0; height:26px; min-height:26px; resize:none; white-space:nowrap; overflow-x:auto; font-size:12px; padding:4px 6px; border:1px solid var(--border); border-radius:4px; box-sizing:border-box; }
        .step-line1 .seg-title input[data-f="title"] { width:186px; }
        .step-line1 .col-highlight, .step-line1 .col-sequence { width:auto; display:inline-flex; align-items:center; }
        /* Flèches verticales + X poussés à droite, X centré verticalement */
        .step-line1 .step-move { margin-left:auto; }
        .step-line1 .btn-del { align-self:center; }
        /* Bouton supprimer étape : 60% plus grand, trait plus gras */
        .btn-del svg { width:21px; height:21px; }
        .btn-del svg line { stroke-width:4; }
        /* Ligne 2 : 3 sections égales — Texte bulle / Instructions IA / Réponse IA */
        .step-line2 { display:flex; align-items:flex-start; gap:8px; margin-top:8px; }
        .step-line2 > span { flex:1 1 0; min-width:0; display:block; }
        .step-line2 .app-text-mount-2,
        .step-line2 .app-text-mount-3 { margin-left:10px; }
        .status { font-size:12px; padding:8px 12px; border-radius:6px; margin-left:auto; }
        .status.saved { background:#d1fae5; color:#065f46; }
        .status.error { background:#fee2e2; color:#991b1b; }
        .status.dirty { background:#fef3c7; color:#92400e; }
        tr.dragging { opacity:0.4; }
        /* Lignes chapitre — sticky tant qu'on scrolle dans les étapes du chapitre */
        /* td chapter-row = simple porteur avec padding-left transparent, l accordeon visible est .chap-inner */
        tr.chapter-row td { background:transparent; padding:0 35px 0 0; border-bottom:0; position:sticky; top:0; z-index:4; }
        tr.chapter-row[data-depth="2"] td { padding-left:10px; }
        tr.chapter-row[data-depth="3"] td { padding-left:20px; }
        tr.chapter-row[data-depth="4"] td { padding-left:30px; }
        tr.chapter-row[data-depth="5"] td { padding-left:40px; }
        tr.chapter-row .chap-inner { display:flex; align-items:center; gap:10px; color:#fff; padding:3px 0 8px 12px; }
        tr.chapter-row[data-depth="1"] .chap-inner { background:linear-gradient(90deg,#1e3a8a,#1e40af); }
        tr.chapter-row[data-depth="2"] .chap-inner { background:linear-gradient(90deg,#1e40af,#2563eb); }
        tr.chapter-row[data-depth="3"] .chap-inner { background:linear-gradient(90deg,#2563eb,#3b82f6); }
        tr.chapter-row[data-depth="4"] .chap-inner { background:linear-gradient(90deg,#3b82f6,#60a5fa); }
        tr.chapter-row[data-depth="5"] .chap-inner { background:linear-gradient(90deg,#60a5fa,#93c5fd); color:#1e3a8a; }
        /* Selection : fond vert sur tous les td de la step-row */
        tr.step-row.selected td { background:#dcfce7; }
        /* DEBUG : visualisation du conteneur step-row */
        tr.step-row[data-step-depth="2"] > td.col-order { padding-left:10px !important; }
        tr.step-row[data-step-depth="3"] > td.col-order { padding-left:20px !important; }
        tr.step-row[data-step-depth="4"] > td.col-order { padding-left:30px !important; }
        tr.step-row[data-step-depth="5"] > td.col-order { padding-left:40px !important; }
        tr.chapter-row .chap-icon { font-size:16px; }
        tr.chapter-row .chap-input { max-width:40ch; background:transparent; color:#fff; border:0; border-bottom:1px dashed rgba(255,255,255,0.3); font-size:14px; font-weight:700; padding:3px 6px; }
        tr.chapter-row .chap-input:focus { outline:none; border-bottom-color:#fbbf24; background:#fff; color:#1f2937; border-radius:3px; }
        tr.chapter-row .chap-add-step { background:rgba(255,255,255,0.12); border:0; color:#fff; cursor:pointer; font-size:11px; padding:4px 8px; border-radius:4px; font-weight:700; margin-left:auto; }
        tr.chapter-row .chap-add-step:hover { background:rgba(255,255,255,0.25); }
        tr.chapter-row .chap-count { font-size:11px; opacity:0.7; font-weight:600; }
        tr.chapter-row .chap-collapse, tr.chapter-row .chap-move { background:transparent; border:0; color:#fff; cursor:pointer; font-size:14px; padding:3px 8px; border-radius:4px; }
        /* Toutes les paires de flèches du bandeau regroupées, gap uniforme et resserré (4px entre paires, 1px dans une paire) */
        tr.chapter-row .chap-arrows { display:inline-flex; align-items:center; gap:4px; }
        tr.chapter-row .chap-level, tr.chapter-row .chap-pos, tr.chapter-row .chap-block-group { display:inline-flex; align-items:center; gap:1px; border-radius:6px; }
        /* 1 pastille bleue translucide (sans bord) par paire ; chap-level seulement s'il a un bouton visible (sinon pastille vide) */
        tr.chapter-row .chap-pos, tr.chapter-row .chap-block-group,
        tr.chapter-row .chap-level:has(.chap-promote),
        tr.chapter-row .chap-level:has(.chap-demote:not([style*="display:none"])) { background:rgba(255,255,255,0.15); padding:2px 4px; }
        /* Flèches horizontales (Promouvoir/Rétrograder) : padding resserré comme les verticales (au lieu de 8px) */
        tr.chapter-row .chap-promote, tr.chapter-row .chap-demote { padding:3px 2px; }
        tr.chapter-row .chap-up, tr.chapter-row .chap-down { padding:3px 2px; }
        /* Flèches "déplacer TOUT le chapitre" (double pointe) — même style que up/down */
        tr.chapter-row .chap-block { padding:3px 2px; background:transparent; font-size:14px; line-height:1; }
        tr.chapter-row .chap-collapse:hover, tr.chapter-row .chap-move:hover { background:rgba(255,255,255,0.15); }
        tr.chapter-row .chap-block:hover { background:rgba(255,255,255,0.15); }
        tr.chapter-row .chap-delete { background:transparent; border:0; color:#fca5a5; cursor:pointer; padding:4px 8px; border-radius:4px; align-self:center; }
        tr.chapter-row .chap-delete:hover { background:#dc2626; color:#fff; }
        tr.chapter-row .chap-delete svg { width:21px; height:21px; }
        tr.chapter-row .chap-delete svg line { stroke-width:4; }
        tr.chapter-row .chap-add-sub { background:rgba(255,255,255,0.12); border:0; color:#fff; cursor:pointer; font-size:11px; padding:4px 8px; border-radius:4px; font-weight:700; }
        tr.chapter-row .chap-add-sub:hover { background:rgba(255,255,255,0.25); }
        tr.collapsed-step { display:none; }
        /* Play button + Sous-chap : aligné à gauche du groupe de positions, 20% plus petit */
        .pos-cell { display:flex; flex-direction:column; gap:5px; align-items:flex-end; }
        .pos-row { display:inline-flex; gap:4px; align-items:center; }
        .pos-play { background:#10b981; color:#fff; border:0; border-radius:5px; padding:0 8px; height:26px; cursor:pointer; font-size:11px; font-weight:700; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; box-sizing:border-box; }
        .pos-addsub { background:#1e40af; color:#fff; border:0; border-radius:5px; padding:0 8px; height:26px; cursor:pointer; font-size:11px; font-weight:700; white-space:nowrap; box-sizing:border-box; display:inline-flex; align-items:center; }
        .pos-addsub:hover { background:#1e3a8a; }
        .pos-play:hover { background:#059669; }
        .pos-action { background:#f3f4f6; color:#374151; border:1px solid #d1d5db; border-radius:5px; padding:4px 8px; cursor:pointer; font-size:11px; font-weight:700; }
        .pos-action:hover { background:#e5e7eb; }
        .pos-action.pos-action-on { background:#7c3aed; color:#fff; border-color:#7c3aed; }
        .pos-action.pos-action-on:hover { background:#6d28d9; }
        .pos-group { display:inline-flex; gap:2px; background:#f3f4f6; padding:2px; border-radius:6px; }
        .pos-btn { background:transparent; border:0; padding:3px 4px; cursor:pointer; border-radius:4px; color:#6b7280; line-height:0; display:inline-flex; }
        .pos-btn:hover { color:#374151; }
        .pos-btn.active { background:#fee2e2; color:#991b1b; }
        .pos-btn svg { display:block; }

        /* === Cellule texte === */
        .text-wrap { display:flex; flex-direction:column; gap:6px; }
        .text-item { display:flex; gap:4px; align-items:flex-start; position:relative; }
        .text-item textarea { flex:1; }
        /* Decoration rouge UNIQUEMENT quand le caret est dans le texte (focus), pas pour le texte actif */
        .text-item.focused .ta-bubble-wrap { border-color:var(--red); border-width:2px; }
        .text-item.focused .text-side button, .text-item.focused .text-side label { border-color:var(--red); }
        /* Sidebar verticale a GAUCHE du texte */
        .text-left { display:flex; flex-direction:column; gap:3px; align-items:stretch; order:-1; min-width:34px; }
        .text-side { display:flex; flex-direction:column; gap:3px; align-items:stretch; min-width:34px; }
        .text-side button, .text-side label,
        .text-left button, .text-left label {
            background:transparent; border:1px solid var(--border); border-radius:4px; padding:0 6px; cursor:pointer; font-size:13px; line-height:1; text-align:center;
            height:24px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
        }
        .text-left .check-active { display:flex; align-items:center; justify-content:center; gap:3px; font-size:10px; background:#f9fafb; }
        .text-left .check-active input { width:auto; margin:0; }
        .text-left .del-text { color:#991b1b; background:#fee2e2; }
        .text-left .del-text:hover { background:#dc2626; color:#fff; }
        .text-side .mic-btn.recording { background:#dc2626; color:#fff; border-color:#dc2626; animation:pulse 1s infinite; }
        .text-side .mic-btn:disabled { opacity:1; cursor:not-allowed; }
        .text-side .speaker.playing { background:#0ea5e9; color:#fff; border-color:#0ea5e9; }
        .text-side .clear-text { color:#991b1b; background:#fee2e2; }
        .text-side .clear-text:hover { background:#dc2626; color:#fff; }
        .text-left .add-text-inline, .text-side .add-text-inline { background:#e5e7eb; color:#374151; font-weight:700; }
        /* Texte de la bulle — fieldset/legend : le navigateur coupe la bordure sous le label */
        .ta-bubble-wrap { flex:1; min-width:0; margin:0; border:1px solid var(--border); border-radius:4px; padding:0 7px 5px; background:#fff; position:relative; }
        .ta-bubble-wrap textarea { width:100%; resize:none; border:none; outline:none; background:transparent; padding:0; }
        /* Quand expanded, le fieldset efface sa bordure — le textarea sert de cadre complet */
        .text-item .ta-bubble-wrap:has(textarea.expanded) { border-color:transparent; border-width:1px; }
        /* La légende reste au-dessus du textarea (z-index) + background:inherit crée l'entaille dans la bordure */
        .ta-bubble-wrap legend { position:relative; z-index:51; background:inherit; }
        /* top/left/right:-1px : le bord du textarea s'aligne exactement sur le bord du fieldset (padding-top=0) */
        .ta-bubble-wrap textarea.expanded { position:absolute; top:-1px; left:-1px; right:-1px; z-index:50; border:1px solid var(--border); border-radius:4px; box-shadow:0 4px 16px rgba(0,0,0,0.18); background:inherit; box-sizing:border-box; padding:2px 7px; }
        .text-item.focused .ta-bubble-wrap textarea.expanded { border-color:var(--red); }
        .text-item.ia .ta-bubble-wrap textarea.expanded { border-color:#a78bfa; }
        /* Bouton "+ IA" : ajoute l'unique 2e texte (consignes IA) de l'étape */
        .add-ia { align-self:flex-start; background:linear-gradient(135deg,#a78bfa,#7c3aed); color:#fff; border:0; padding:6px 14px; border-radius:6px; font-weight:700; font-size:12px; cursor:pointer; letter-spacing:.3px; }
        .add-ia:hover { filter:brightness(1.08); }
        /* Badge de rôle (💬 bulle / 🤖 IA) à gauche de chaque texte */
        .text-item .text-role { order:-1; display:flex; align-items:center; justify-content:center; min-width:22px; font-size:14px; align-self:stretch; }
        /* Champ IA : liseré violet pour le distinguer du texte de bulle */
        .text-item.ia .ta-bubble-wrap { border-color:#a78bfa; background:#faf5ff; }
        .text-item.ia .text-role { color:#7c3aed; }
        @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.55; } }

        /* === Panel dictee === */
        .dict-panel { border:1px solid #f59e0b; background:#fffbeb; border-radius:6px; padding:8px; }
        .dict-controls { display:flex; gap:6px; align-items:center; margin-bottom:6px; }
        .dict-controls button { padding:3px 8px; font-size:11px; border-radius:4px; }
        .dict-controls .ctrl-pause { background:#f59e0b; color:#fff; }
        .dict-controls .ctrl-cancel { background:#6b7280; color:#fff; }
        .dict-controls .ctrl-finish { background:#10b981; color:#fff; }
        .dict-controls .status-dot { font-size:11px; color:#92400e; font-weight:600; margin-left:auto; }
        .dict-panel textarea { width:100%; background:#fff; }

        .add-text-btn { font-size:11px; padding:3px 8px; background:#e5e7eb; color:#374151; border-radius:4px; align-self:flex-start; }

    /* === Modale Applications === */
    #appsModal { display:none; position:fixed; inset:0; z-index:99996; background:rgba(0,0,0,0.55); align-items:center; justify-content:center; padding:24px; }
    #appsModal .apps-box { background:#fff; border-radius:12px; width:100%; max-width:720px; display:flex; flex-direction:column; box-shadow:0 25px 60px rgba(0,0,0,0.45); overflow:hidden; }
    #appsModal .apps-head { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; background:linear-gradient(135deg,#1e40af,#2563eb); color:#fff; }
    #appsModal .apps-head h2 { margin:0; font-size:17px; font-weight:700; }
    #appsModal .apps-head .add { background:#fff; color:#1e40af; border:0; padding:6px 14px; border-radius:6px; font-weight:700; cursor:pointer; }
    #appsModal .apps-foot { display:flex; gap:8px; justify-content:flex-end; padding:12px 20px; border-top:1px solid var(--border); background:#fafafa; }
    #appsModal .apps-foot .cancel { background:#f3f4f6; color:#374151; border:0; padding:8px 14px; border-radius:6px; font-weight:700; cursor:pointer; }
    #appsModal .apps-foot .save { background:#1e40af; color:#fff; border:0; padding:8px 16px; border-radius:6px; font-weight:700; cursor:pointer; }

    /* table : grille fixe = colonnes alignees a coup sur */
    #appsModal table.apps-tbl { width:100%; border-collapse:collapse; table-layout:fixed; font-size:13px; }
    #appsModal table.apps-tbl col.c-key { width:200px; }
    #appsModal table.apps-tbl col.c-url { width:auto; }
    #appsModal table.apps-tbl col.c-del { width:48px; }
    #appsModal table.apps-tbl th { text-align:left; padding:8px 10px; background:#f3f4f6; color:#374151; font-weight:700; border-bottom:1px solid var(--border); white-space:nowrap; }
    #appsModal table.apps-tbl td { padding:6px 10px; border-bottom:1px solid #f3f4f6; vertical-align:middle; }
    #appsModal table.apps-tbl input { width:100%; padding:6px 8px; border:1px solid var(--border); border-radius:4px; font-size:13px; box-sizing:border-box; }
    #appsModal table.apps-tbl .del { background:transparent; border:0; cursor:pointer; color:#dc2626; font-size:16px; font-weight:700; padding:4px 6px; border-radius:4px; }
    #appsModal table.apps-tbl .del:hover { background:#fee2e2; }

    /* Hauteur du body : 5 lignes (~44px chacune) + en-tete + scroll si > 5 apps */
    #appsModal .apps-body { padding:14px 20px; }
    #appsModal .apps-scroll { max-height:262px; overflow-y:auto; border:1px solid var(--border); border-radius:6px; }
    #appsModal .apps-scroll thead th { position:sticky; top:0; z-index:1; }

    #sequenceModal { display:none; position:fixed; inset:0; z-index:99996; background:rgba(0,0,0,0.55); align-items:center; justify-content:center; padding:24px; }
    /* Hauteur variable selon le contenu, plafonnee a 4/5 de la page (le corps scrolle au-dela). */
    #sequenceModal .am-box { background:#fff; border-radius:12px; width:100%; max-width:1280px; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 25px 60px rgba(0,0,0,0.45); overflow:hidden; }
    #sequenceModal .am-head { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; background:linear-gradient(135deg,#7c3aed,#a78bfa); color:#fff; }
    #sequenceModal .am-head h2 { margin:0; font-size:17px; font-weight:700; }
    #sequenceModal .am-body { padding:16px 20px; overflow-y:auto; }
    #sequenceModal .am-foot { display:flex; gap:8px; justify-content:space-between; padding:12px 20px; border-top:1px solid var(--border); background:#fafafa; }
    #sequenceModal label { display:block; font-size:12px; font-weight:700; color:#374151; margin-top:12px; margin-bottom:4px; }
    #sequenceModal label:first-child { margin-top:0; }
    #sequenceModal input[type=text], #sequenceModal select, #sequenceModal textarea { width:100%; padding:7px 10px; border:1px solid var(--border); border-radius:6px; font-size:13px; box-sizing:border-box; font-family:inherit; }
    #sequenceModal textarea { resize:vertical; min-height:72px; font-family:'Consolas','Monaco',monospace; font-size:12px; }
    #sequenceModal .am-help { font-size:11px; color:#6b7280; margin-top:4px; }
    #sequenceModal .am-row { display:flex; gap:8px; }
    #sequenceModal .am-row > * { flex:1; }
    #sequenceModal .am-clear { background:#f3f4f6; color:#dc2626; border:0; padding:8px 14px; border-radius:6px; font-weight:700; cursor:pointer; }
    #sequenceModal .am-cancel { background:#f3f4f6; color:#374151; border:0; padding:8px 14px; border-radius:6px; font-weight:700; cursor:pointer; }
    #sequenceModal .am-save { background:#7c3aed; color:#fff; border:0; padding:8px 16px; border-radius:6px; font-weight:700; cursor:pointer; }
    #sequenceModal .am-copy { background:#0ea5e9; color:#fff; border:0; padding:8px 16px; border-radius:6px; font-weight:700; cursor:pointer; }
    #highlightModal { display:none; position:fixed; inset:0; z-index:99996; background:rgba(0,0,0,0.55); align-items:center; justify-content:center; padding:24px; }
    #highlightModal .am-box { background:#fff; border-radius:12px; width:100%; max-width:1100px; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 25px 60px rgba(0,0,0,0.45); overflow:hidden; }
    #highlightModal .am-head { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; color:#fff; }
    #highlightModal .am-head h2 { margin:0; font-size:17px; font-weight:700; }
    #highlightModal .am-body { padding:16px 20px; overflow-y:auto; }
    #highlightModal .am-foot { padding:12px 20px; border-top:1px solid var(--border); background:#fafafa; }
    #highlightModal .am-cancel { background:#f3f4f6; color:#374151; border:0; padding:8px 14px; border-radius:6px; font-weight:700; cursor:pointer; }
    #highlightModal .am-save { color:#fff; border:0; padding:8px 16px; border-radius:6px; font-weight:700; cursor:pointer; }