body { background: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; margin: 0; padding: 14px; }
  h1 { font-size: 1.25rem; margin: 0 0 12px 0; display: flex; justify-content: space-between; align-items: center; }
  textarea { width: 100%; box-sizing: border-box; background: #1e293b; color: #f8fafc; font-family: system-ui, sans-serif; border: 1px solid #475569; border-radius: 10px; padding: 12px; resize: vertical; }
  ::placeholder { color: #94a3b8; opacity: 1; } /* v23.14.1 : texte et exemples lisibles sur le fond bleu foncé */
  #code { height: 220px; color: #38bdf8; font-family: monospace; font-size: 13px; }
  #ideaSubject { height: 60px; margin-top: 2px; padding: 8px; color: #f8fafc; font-family: system-ui, sans-serif; font-size: 16px; line-height: 1.4; border: none; background: transparent; }
  #voiceScript { height: 90px; color: #f8fafc; font-family: system-ui, sans-serif; font-size: 16px; line-height: 1.4; }
  .row { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
  .field { flex: 1; min-width: 95px; background: #1e293b; padding: 8px 10px; border-radius: 8px; border: 1px solid #334155; }
  .field.wide { flex: 2; min-width: 220px; }
  .field label { display: block; font-size: 12px; color: #94a3b8; margin-bottom: 4px; }
  .field input, .field select { width: 100%; background: transparent; color: #fff; border: none; font-size: 14px; font-weight: 600; }
  .field input:disabled, .field select:disabled { opacity: 0.4; }
  .field select option { background: #1e293b; color: #fff; }
  .field input[type="range"] { accent-color: #6366f1; padding: 0; margin: 6px 0 2px 0; }
  .field .check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #cbd5e1; margin: 4px 0 0 0; cursor: pointer; }
  .field .check input { width: auto; accent-color: #6366f1; margin: 0; }
  .field input[type="color"] { height: 34px; padding: 0; cursor: pointer; border-radius: 6px; }
  .field input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
  .field input[type="color"]::-webkit-color-swatch { border: 1px solid #334155; border-radius: 5px; }
  .mode-switch { display: flex; gap: 4px; background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 3px; margin-bottom: 10px; }
  .mode-btn { flex: 1; background: transparent; color: #94a3b8; padding: 8px 6px; font-size: 13px; border-radius: 8px; }
  .mode-btn.active { background: #6062eb; color: #fff; }
  /* v24 : trois gros boutons (🛍️ Un produit, 📖 Une histoire, 🎨 Libre) */
  .mode-switch-gros .mode-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; font-size: 22px; line-height: 1.1; }
  .mode-switch-gros .mode-btn span { font-size: 14px; font-weight: 700; }
  /* v24 : étape 4 « Vérifier et générer » */
  .verif-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 10px; }
  .verif-row { display: flex; align-items: center; gap: 8px; background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 8px 10px; font-size: 13px; }
  .verif-row .step-status { flex: none; }
  .verif-text { flex: 1; min-width: 0; color: #e2e8f0; }
  .verif-edit { flex: none; font-size: 16px; }
  .verif-point .btn-small { flex: none; }
  .verif-actions { display: flex; gap: 8px; margin-bottom: 10px; }
  .verif-actions button { flex: 1; margin: 0; }
  .mode-switch-gros .mode-btn small { font-size: 12px; font-weight: 400; opacity: 1; }
  /* v22.18 (spec 020) : langue de la vidéo */
  .langue-switch { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
  .langue-title { color: #94a3b8; font-size: 12px; margin-right: 2px; }
  .langue-btn { background: #1e293b; color: #94a3b8; border: 1px solid #334155; padding: 5px 10px; font-size: 13px; border-radius: 999px; }
  .langue-btn.active { background: #6062eb; border-color: #6366f1; color: #fff; }
  .langue-note { color: #fbbf24; font-size: 12px; margin: -4px 0 10px; }
  /* v22.19 (spec 021) : script du storyboard en lecture seule ; éléments et images d'une Liste rythmée */
  textarea.script-locked { opacity: 0.7; cursor: not-allowed; }
  .script-lock { color: #94a3b8; font-size: 12px; margin: 4px 0 8px; }
  .script-lock a { color: #a5b4fc; }
  .plan-liste-note { color: #86efac; font-size: 12px; margin: 4px 0; }
  .plan-liste-note.warn { color: #fbbf24; }
  .mode-studio .ecom-only { display: none !important; }
  .prompt-mode { color: #c7d2fe; font-weight: 600; }
  .assets-summary { margin-top: 8px; background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 10px 12px; font-size: 14px; font-weight: 600; }
  .assets-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-height: 360px; overflow-y: auto; }
  .asset-group { font-size: 12px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; margin: 8px 0 2px 2px; }
  .asset-row { display: flex; align-items: center; gap: 8px; background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 6px 8px; }
  .asset-row .btn-small { padding: 6px 9px; font-size: 13px; }
  .asset-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .asset-name { font-size: 13px; font-weight: 700; color: #f8fafc; font-family: monospace; }
  .asset-desc { font-size: 12px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .asset-tag { font-size: 12px; color: #a5b4fc; border: 1px solid #4f46e5; border-radius: 6px; padding: 1px 5px; flex-shrink: 0; }
  .asset-preview { margin-top: 8px; border-radius: 10px; overflow: hidden; background: #334155 repeating-conic-gradient(#475569 0 25%, #334155 0 50%) 0 0 / 24px 24px; }
  .asset-preview img, .asset-preview video { display: block; width: 100%; max-height: 300px; object-fit: contain; }
  .rush-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
  .rush-row { display: flex; align-items: center; gap: 8px; background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 6px 8px; }
  .rush-row.selected { border-color: #6366f1; background: #272f5a; }
  .rush-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: #6366f1; flex-shrink: 0; }
  .rush-thumb { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: #0f172a; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; border: none; padding: 0; }
  .rush-order { font-size: 12px; font-weight: 800; color: #c7d2fe; min-width: 16px; text-align: center; }
  .rush-actions { display: flex; gap: 4px; flex-shrink: 0; }
  .rush-actions .btn-small { padding: 6px 8px; font-size: 12px; }
  .rush-edit { background: #0f172a; padding: 8px 10px 10px; }
  .rush-edit-title { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
  .rush-edit .row { margin: 8px 0 0 0; }
  .rush-edit .field { margin-top: 8px; }
  .btn-small.btn-primary-small { background: #6062eb; }
  .rush-keep { background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 6px 8px; margin-top: 6px; }
  .rush-keep .field { margin-top: 6px; }
  .rush-keep .btn-small { margin-top: 6px; }
  .rush-keep-video { display: block; width: 100%; max-height: 220px; object-fit: contain; background: #000; border-radius: 6px; margin-top: 6px; }
  .upload-bar { height: 6px; background: #334155; border-radius: 3px; overflow: hidden; margin-top: 6px; }
  .upload-bar div { height: 100%; background: #6062eb; width: 0; transition: width 0.2s; }
  .note { font-size: 12.5px; color: #94a3b8; margin: 4px 0 0 2px; }
  .bank-test-note { white-space: pre-line; font-size: 12px; color: #cbd5e1; }
  #templateNote:empty { display: none; }
  .note.warn-note { font-size: 12px; color: #fde68a; background: #2d2306; border: 1px solid #d97706; border-radius: 8px; padding: 6px 8px; }
  .rule { font-size: 12px; color: #cbd5e1; background: #1e293b; border-left: 3px solid #6366f1; border-radius: 6px; padding: 6px 8px; margin-top: 8px; line-height: 1.4; }
  .rule code { color: #fcd34d; word-break: break-word; }
  input[type="file"] { font-size: 12px; font-weight: normal; margin-top: 4px; }
  /* v21.6.1 : listes déroulantes hors d'un champ (banque, Ma banque…) aux couleurs de l'écran, plus en blanc */
  select { background: #1e293b; color: #f8fafc; border: 1px solid #334155; border-radius: 8px; padding: 9px 10px; font-size: 14px; font-weight: 600; color-scheme: dark; max-width: 100%; }
  select option { background: #1e293b; color: #f8fafc; }
  input[type="search"] { width: 100%; box-sizing: border-box; background: #1e293b; color: #fff; border: 1px solid #334155; border-radius: 8px; padding: 10px 12px; font-size: 14px; }
  button, .btn { border: none; border-radius: 10px; padding: 13px 16px; font-size: 15px; font-weight: 700; cursor: pointer; text-align: center; text-decoration: none; display: inline-block; box-sizing: border-box; }
  button:disabled { opacity: 0.45; cursor: default; }
  .btn-paste { background: #334155; color: #f8fafc; flex: 1; }
  .btn-clear { background: #475569; color: #f8fafc; }
  .btn-small { background: #334155; color: #f8fafc; padding: 10px 12px; font-size: 13px; }
  .btn-voice { background: #0369a1; color: #fff; width: 100%; margin-top: 8px; }
  .ma-voix { margin-top: 8px; padding: 10px; border: 1px solid #334155; border-radius: 10px; background: #0f172a; }
  .ma-voix-actions { display: flex; gap: 8px; margin-top: 8px; }
  .ma-voix-actions .btn-small { flex: 1; margin: 0; }
  .ma-voix-actions .btn-small.recording { background: #dc2626; }
  .ma-voix-file { display: block; margin-top: 8px; font-size: 12px; font-weight: normal; color: #94a3b8; }
  .ma-voix-state { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #14532d; color: #dcfce7; font-size: 13px; white-space: pre-line; }
  .ma-voix-state.old { background: #7c2d12; color: #ffedd5; font-weight: 600; }
  .ma-voix-state[hidden] { display: none; }
  .btn-render { background: #6062eb; color: #fff; width: 100%; margin-top: 4px; }
  .btn-cancel { background: #7f1d1d; color: #fecaca; width: 100%; margin-top: 8px; display: none; }
  .btn-dl { background: #047857; color: #fff; width: 100%; margin-top: 10px; }
  /* v22.3 (spec 011) : ✏️ Faire une variante */
  .btn-variant { background: #334155; color: #f8fafc; width: 100%; margin-top: 8px; }
  .btn-variant[hidden] { display: none; }
  .idea-consigne { color: #93c5fd; }
  .idea-consigne[hidden] { display: none; }
  .variant-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #1e3a5f; border: 1px solid #3b82f6; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; font-size: 14px; }
  .variant-bar[hidden] { display: none; }
  .variant-bar > span { flex: 1 1 200px; }
  .variant-note { flex-basis: 100%; font-size: 12px; color: #fbbf24; }
  .variant-note:empty { display: none; }
  body.colonnes .panel[data-panel="creer"] > #variantBar { grid-column: 1 / -1; }
  /* v22.6 : 🆕 Nouvelle vidéo */
  .new-video-row { display: flex; justify-content: flex-end; margin-bottom: 8px; }
  body.colonnes .panel[data-panel="creer"] > .new-video-row { grid-column: 1 / -1; }
  .new-sheet { max-width: 480px; margin-top: 14vh; }
  .new-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
  .new-actions button { width: 100%; margin: 0; padding: 10px 12px; text-align: left; }
  .new-actions small { display: block; font-weight: 400; font-size: 12px; opacity: 1; margin-top: 2px; }
  #newNote:empty { display: none; }
  .section-title { font-size: 12px; color: #94a3b8; margin: 16px 0 0 2px; text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 6px; }
  .section-title .count { text-transform: none; color: #94a3b8; }
  .section-title .link, .link { margin-left: auto; background: none; color: #818cf8; padding: 0; font-size: 12px; font-weight: 600; text-transform: none; }
  .template-bar { display: flex; gap: 6px; margin-top: 8px; }
  .template-bar select { flex: 1; min-width: 0; background: #1e293b; color: #fff; border: 1px solid #334155; border-radius: 8px; padding: 0 10px; font-size: 14px; font-weight: 600; }
  .template-consigne { margin-top: 10px; }
  .template-consigne label { display: block; font-size: 12px; color: #a5b4fc; margin-bottom: 4px; }
  .template-consigne textarea { font-size: 13px; color: #e2e8f0; }
  .template-consigne textarea[readonly] { opacity: 0.75; }
  .template-consigne-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
  .template-consigne-bar .note { margin: 0; }
  .template-consigne[hidden], .template-consigne-bar .btn-small[hidden] { display: none; }
  .template-consigne-bar .btn-small { width: auto; margin: 0; }
  .types summary { font-size: 12px; color: #a5b4fc; }
  .types pre { max-height: 320px; color: #e2e8f0; }
  .types .btn-small { margin-top: 6px; }
  audio { width: 100%; margin-top: 8px; }
  .product-collection { width: 100%; margin-top: 8px; background: #1e293b; color: #fff; border: 1px solid #334155; border-radius: 8px; padding: 10px 12px; font-size: 14px; font-weight: 600; }
  .product-list { max-height: 260px; overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #94a3b8; }
  .product-row { display: flex; align-items: center; gap: 10px; background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 6px 10px 6px 6px; text-align: left; font-weight: 500; color: #f8fafc; width: 100%; }
  .product-row.selected { border-color: #6366f1; background: #272f5a; }
  .product-row img, .product-selected img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; background: #fff; flex-shrink: 0; }
  .product-text { display: flex; flex-direction: column; min-width: 0; }
  .product-title { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .product-price { font-size: 12px; color: #fcd34d; margin-top: 2px; }
  .product-selected { display: none; align-items: center; gap: 10px; background: #272f5a; border: 1px solid #6366f1; border-radius: 10px; padding: 8px 10px; margin-top: 8px; }
  .product-selected .product-text { flex: 1; }
  .image-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
  .thumb { position: relative; width: 64px; height: 64px; }
  .thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid #334155; cursor: zoom-in; }
  .thumb.auto::after { content: '🪄'; position: absolute; left: 2px; bottom: 2px; font-size: 12px; line-height: 1; background: rgba(15,23,42,0.8); border-radius: 6px; padding: 2px 3px; pointer-events: none; }
  .thumb button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; padding: 0; border-radius: 50%; background: #0f172a; color: #f8fafc; font-size: 12px; border: 1px solid #475569; }
  .music-name { font-size: 13px; color: #cbd5e1; margin-top: 6px; display: flex; gap: 10px; align-items: center; }
  .music-name .link { margin-left: 0; }
  .music-name select { flex: 1; min-width: 0; }
  .music-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
  .music-row { display: flex; gap: 10px; align-items: center; font-size: 13px; color: #cbd5e1; }
  .music-row .music-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .music-row .music-by { color: #94a3b8; font-size: 12px; }
  .music-row .link { margin-left: 0; }
  /* v22.5 : 🗣 Mes avatars */
  .avatar-prompt { margin: 8px 0; font-size: 13px; color: #cbd5e1; }
  .avatar-prompt summary { cursor: pointer; color: #93c5fd; }
  .avatar-prompt p { background: #0f172a; border-radius: 8px; padding: 8px 10px; margin: 6px 0; line-height: 1.4; }
  .avatar-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
  .avatar-row { display: flex; gap: 10px; align-items: center; font-size: 13px; color: #cbd5e1; }
  .avatar-row img { width: 44px; height: 78px; object-fit: contain; border-radius: 6px; background: repeating-conic-gradient(#334155 0% 25%, #1e293b 0% 50%) 50% / 12px 12px; }
  .avatar-row .avatar-text { flex: 1; min-width: 0; }
  .avatar-row .avatar-state { display: block; color: #94a3b8; font-size: 12px; }
  .avatar-row .avatar-state.bad { color: #fca5a5; }
  .avatar-mouth { margin-top: 10px; padding: 10px; border: 1px solid #f59e0b; border-radius: 10px; }
  .avatar-mouth-title { font-size: 14px; margin-bottom: 8px; }
  .avatar-mouth-frame { position: relative; display: inline-block; max-width: 100%; }
  .avatar-mouth-frame img { display: block; max-width: 100%; max-height: 60vh; cursor: crosshair; border-radius: 8px; background: repeating-conic-gradient(#334155 0% 25%, #1e293b 0% 50%) 50% / 16px 16px; }
  .avatar-mouth-dot { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 3px solid #f59e0b; pointer-events: none; }
  .plan-avatar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
  .plan-avatar select { flex: 1; min-width: 140px; }
  .progress { display: none; margin-top: 10px; background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 10px 12px; }
  .progress-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; gap: 10px; }
  .progress-label { color: #cbd5e1; }
  .progress-percent { font-weight: 700; font-variant-numeric: tabular-nums; }
  .progress-track { height: 10px; background: #0f172a; border-radius: 999px; overflow: hidden; }
  .progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, #6366f1, #0ea5e9); border-radius: 999px; transition: width 0.6s ease; }
  .progress.done .progress-fill { background: #10b981; }
  .progress.error .progress-fill { background: #ef4444; }
  .progress.cancelled .progress-fill { background: #64748b; }
  details { margin-top: 10px; }
  summary { font-size: 12px; color: #94a3b8; cursor: pointer; padding: 4px 2px; }
  pre { background: #020617; color: #cbd5e1; padding: 12px; border-radius: 10px; font-size: 12px; max-height: 180px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; border: 1px solid #1e293b; margin: 6px 0 0 0; }
  video { width: 100%; max-height: 420px; border-radius: 10px; background: #000; margin-top: 10px; }
  .history-item { display: flex; align-items: center; gap: 10px; background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 10px 12px; margin-top: 8px; }
  .history-info { flex: 1; min-width: 0; }
  .history-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .history-meta { font-size: 12px; color: #94a3b8; margin-top: 3px; }
  .history-actions { display: flex; gap: 6px; flex-shrink: 0; }
  /* v22.21 (spec 022) : TikTok */
  .history-tiktok { color: #a5b4fc; }
  .tiktok-account { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid #334155; }
  .tiktok-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
  .tiktok-info { flex: 1; min-width: 160px; }
  .tiktok-name { font-weight: 600; }
  .tiktok-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; }
  .tiktok-hashtags { flex: 1; min-width: 160px; box-sizing: border-box; background: #1e293b; color: #fff; border: 1px solid #334155; border-radius: 8px; padding: 8px 10px; font-size: 13px; }
  .tiktok-box > .check, .tiktok-box #tiktokDirect > .check { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
  .tiktok-box textarea { width: 100%; }
  .mini { background: #334155; color: #f8fafc; padding: 8px 10px; font-size: 14px; border-radius: 8px; text-decoration: none; line-height: 1; }
  .mini.danger { background: #3f1d1d; }
  .check-box { margin-top: 8px; border-radius: 10px; padding: 10px 12px; font-size: 13px; border: 1px solid; }
  .check-box.ok { background: #052e1f; border-color: #10b981; color: #a7f3d0; }
  .check-box.warn { background: #2d2306; border-color: #d97706; color: #fde68a; }
  .check-box.bad { background: #350c0c; border-color: #ef4444; color: #fecaca; }
  .check-title { font-weight: 700; margin-bottom: 4px; }
  .check-item { margin-top: 4px; line-height: 1.35; }
  .check-box code { display: block; margin-top: 4px; padding: 6px 8px; background: rgba(0,0,0,0.35); border-radius: 6px; font-size: 12px; color: #f8fafc; white-space: pre-wrap; word-break: break-word; }
  /* Socle mobile (v25.0.0) : topbar compacte + barre d'onglets fixe en bas (3 entrées) */
  body { overflow-x: hidden; padding-bottom: 84px; max-width: 760px; margin: 0 auto; }
  .topbar { position: sticky; top: 0; z-index: 20; background: #0f172a; margin: -14px -14px 10px -14px; padding: 10px 14px 8px 14px; border-bottom: 1px solid #1e293b; }
  .topbar h1 { margin-bottom: 6px; }
  .topbar .ver { font-size: 12px; font-weight: 500; color: #94a3b8; margin-left: 6px; }
  body:not(.atelier-open) .topbar #actionBar[data-state=""] { display: none; }
  body.atelier-open .topbar #actionBar[data-state=""] { display: none; }
  .bottom-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; max-width: 760px; margin: 0 auto; display: flex; gap: 4px; background: #0f172a; border-top: 1px solid #334155; padding: 3px 8px calc(3px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; }
  .tabs { display: flex; gap: 4px; }
  .tab { flex: 1; min-width: 0; min-height: 46px; position: relative; background: transparent; color: #94a3b8; border-radius: 10px; padding: 2px 4px; font-size: 12px; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: none; white-space: nowrap; }
  .tab .tab-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 28px; border-radius: 999px; background: transparent; font-size: 18px; line-height: 1; }
  .tab.active { color: #f8fafc; background: transparent; }
  .tab.active .tab-icon { background: #312e81; }
  .badge { display: none; position: absolute; top: 3px; left: 50%; margin-left: 8px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: #6062eb; color: #fff; font-size: 12px; line-height: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .badge.show { display: block; }
  .badge.dot { min-width: 9px; width: 9px; height: 9px; padding: 0; top: 6px; margin-left: 10px; }
  .badge.red { background: #ef4444; }
  .badge.orange { background: #f59e0b; }
  .badge.green { background: #10b981; }
  .badge.grey { background: #475569; }
  .panel { display: none; }
  .panel.active { display: block; }
  .panel > .section-title:first-child { margin-top: 8px; }
  .flash { display: none; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; background: #052e1f; border: 1px solid #10b981; color: #a7f3d0; border-radius: 8px; padding: 8px 10px; }
  .flash.show { display: flex; }
  .flash .link { margin-left: auto; flex-shrink: 0; }
  #renderWarnings { margin-bottom: 10px; }
  #videoBox, #checkBox { scroll-margin-top: 165px; }
  .note .link { margin-left: 0; }
  /* Assistant Créatif (v16) */
  .btn-idea { background: linear-gradient(90deg, #7c3aed, #6366f1); color: #fff; width: 100%; margin-top: 8px; }
  #ownScriptBtn { background: #fff; color: #5b21b6; border: 2px solid #7c3aed; }
  /* v22.16 : suivi du storyboard en 4 étapes sous le bouton ✨ (attente gris, en cours bleu qui pulse, fait vert, à compléter orange) */
  .idea-steps-box { margin-top: 8px; background: #0f172a; border: 1px solid #334155; border-radius: 12px; padding: 10px 8px 8px; }
  .idea-steps-box[hidden] { display: none; }
  .idea-steps { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; position: relative; }
  .idea-step { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; position: relative; min-width: 0; }
  .idea-step + .idea-step::before { content: ''; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: #334155; z-index: 0; }
  .idea-step[data-state="done"]::before, .idea-step[data-state="warn"]::before, .idea-step[data-state="active"]::before { background: #6062eb; }
  .idea-step-dot { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; background: #1e293b; border: 2px solid #334155; color: #fff; }
  .idea-step-label { font-size: 12px; font-weight: 700; color: #94a3b8; }
  .idea-step-detail { font-size: 12px; color: #94a3b8; min-height: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .idea-step[data-state="active"] .idea-step-dot { border-color: #60a5fa; background: #1e3a5f; animation: idea-pulse 1.2s ease-in-out infinite; }
  .idea-step[data-state="active"] .idea-step-label { color: #93c5fd; }
  .idea-step[data-state="done"] .idea-step-dot { border-color: #10b981; background: #065f46; font-weight: 800; }
  .idea-step[data-state="done"] .idea-step-label { color: #6ee7b7; }
  .idea-step[data-state="warn"] .idea-step-dot { border-color: #f59e0b; background: #78350f; }
  .idea-step[data-state="warn"] .idea-step-label { color: #fcd34d; }
  .idea-step[data-state="error"] .idea-step-dot { border-color: #ef4444; background: #7f1d1d; }
  .idea-step[data-state="error"] .idea-step-label { color: #fca5a5; }
  .idea-step[data-state="skip"] { opacity: 1; }
  @keyframes idea-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.6); } 50% { box-shadow: 0 0 0 6px rgba(96, 165, 250, 0); } }
  .idea-steps-text { margin-top: 8px; font-size: 13px; color: #e2e8f0; text-align: center; }
  .idea-steps-track { margin-top: 6px; height: 5px; background: #1e293b; border-radius: 3px; overflow: hidden; }
  .idea-steps-track[hidden] { display: none; }
  .idea-steps-fill { height: 100%; width: 0; background: linear-gradient(90deg, #7c3aed, #60a5fa); transition: width 0.3s; }
  .idea-result { margin-top: 8px; background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 10px 12px; font-size: 13px; color: #cbd5e1; }
  .idea-title { font-weight: 700; color: #6ee7b7; }
  .idea-subtitle { margin-top: 8px; font-weight: 700; color: #e2e8f0; }
  /* v19.5 : liste des assistants (⚙️ Réglages) : actif, ordre d'essai */
  .idea-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
  .idea-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid #334155; border-radius: 10px; background: #0f172a; }
  .idea-row.idle { opacity: 1; }
  .idea-row .check { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; cursor: pointer; margin: 0; }
  .idea-row .check input { width: auto; accent-color: #6366f1; margin: 0; }
  .idea-name { font-weight: 700; color: #e2e8f0; }
  .idea-state { font-size: 12px; color: #94a3b8; white-space: nowrap; }
  .idea-row .btn-small { padding: 4px 10px; }
  .idea-scenes { margin: 6px 0 0 0; padding-left: 20px; line-height: 1.4; }
  .idea-drop { display: block; margin: 6px 0 0 0; }
  .idea-scenes-box[hidden], .idea-scenes-off[hidden] { display: none; }
  /* v19.9 : le code ne suit plus l'histoire (étape 3) et fenêtre avant 🚀 Générer */
  .stale-box { border: 1px solid #f59e0b; background: rgba(245, 158, 11, 0.12); border-radius: 10px; padding: 10px; margin-bottom: 8px; font-size: 13px; }
  .stale-box[hidden] { display: none; }
  .stale-box .btn-idea[hidden], #codeAiBtn[hidden], #ownScriptBtn[hidden] { display: none; }
  .stale-sheet { max-width: 480px; margin-top: 18vh; }
  .stale-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
  .stale-actions .btn-small { width: 100%; }
  .idea-undo { display: block; margin: 8px 0 0 0; }
  /* Bandeau d'action (v16) : Générer au repos ; progression + ⛔ pendant le rendu ; Générer + état à la fin */
  .actionbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; min-height: 44px; }
  .actionbar .btn-render { flex: 1; width: auto; margin: 0; padding: 11px 12px; }
  .actionbar .progress { display: none; flex: 1; min-width: 0; margin: 0; padding: 6px 10px; }
  .actionbar .progress-top { margin-bottom: 5px; font-size: 12px; }
  .actionbar .progress-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .actionbar .progress-track { height: 6px; }
  .actionbar .btn-cancel { display: none; width: auto; margin: 0; padding: 10px 12px; }
  .bar-status { display: none; background: #1e293b; border: 1px solid #334155; color: #cbd5e1; padding: 10px; font-size: 12px; white-space: nowrap; }
  .actionbar #barStatus { white-space: normal; }
  .bar-status.done { color: #6ee7b7; border-color: #047857; }
  .bar-status.error { color: #fca5a5; border-color: #b91c1c; }
  .bar-status.warn { color: #fde68a; border-color: #d97706; }
  .actionbar[data-state="rendering"] .btn-render { display: none; }
  .actionbar[data-state="rendering"] .progress, .actionbar[data-state="rendering"] .btn-cancel { display: block; }
  .actionbar[data-state="done"] #barStatus, .actionbar[data-state="error"] #barStatus, .actionbar[data-state="cancelled"] #barStatus { display: block; }
  .actionbar.has-warnings #barWarn { display: block; }
  .video-title { font-size: 13px; color: #cbd5e1; font-weight: 600; margin-top: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Parcours en 4 étapes (v17) : une carte par étape dans l'onglet ✏️ Créer */
  .step { display: block; background: #111a2e; border: 1px solid #334155; border-radius: 14px; padding: 10px 12px 12px; margin: 0 0 14px; scroll-margin-top: 175px; }
  .step-head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: #f8fafc; padding: 2px 0; list-style: none; }
  .step-head::-webkit-details-marker { display: none; }
  /* v19.4 : les 4 étapes sont repliables ; pastille et résumé restent visibles, étape fermée */
  details.step > summary.step-top { display: block; cursor: pointer; list-style: none; }
  details.step > summary.step-top::-webkit-details-marker { display: none; }
  details.step > summary.step-top .step-head::after { content: '▸'; color: #94a3b8; margin-left: 4px; }
  details.step[open] > summary.step-top .step-head::after { content: '▾'; }
  .step-num { width: 26px; height: 26px; border-radius: 50%; background: #6062eb; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
  .step-title { flex: 1; min-width: 0; }
  .step-status { margin-left: auto; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
  .step-status:empty { display: none; }
  .step-status.ok { background: #064e3b; color: #6ee7b7; }
  .step-status.warn { background: #2d2306; color: #fde68a; border: 1px solid #d97706; }
  .step-status.todo { background: #1e293b; color: #94a3b8; border: 1px solid #334155; }
  .step-status.bad { background: #350c0c; color: #fecaca; border: 1px solid #ef4444; }
  .step-summary { font-size: 12px; color: #94a3b8; margin: 2px 0 0 34px; }
  .step-summary:empty { display: none; }
  .step > .mode-switch { margin: 10px 0 8px; }
  .step > .section-title:first-of-type { margin-top: 12px; }
  .scene-choice { display: flex; gap: 8px; margin-top: 10px; }
  .scene-btn { flex: 1; min-width: 0; background: #1e293b; color: #e2e8f0; border: 2px solid #334155; border-radius: 12px; padding: 12px 8px; font-size: 15px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .scene-btn small { font-size: 12px; font-weight: 500; color: #94a3b8; white-space: normal; }
  .scene-btn.active { border-color: #6366f1; background: #272f5a; color: #fff; }
  /* v20.1 : en e-commerce, ⚡ et 🤖 sont rangés dans 🧪 Export avancé (2e rangée quand il est ouvert) */
  .scene-choice { flex-wrap: wrap; }
  body:not(.mode-studio) .scene-choice:not(.advanced-open) [data-scene="templates"],
  body:not(.mode-studio) .scene-choice:not(.advanced-open) [data-scene="ai"] { display: none; }
  body:not(.mode-studio) .scene-choice .scene-btn { flex: 1 1 40%; }
  body:not(.mode-studio) .scene-choice [data-scene="templates"], body:not(.mode-studio) .scene-choice [data-scene="ai"] { padding: 8px 6px; font-size: 13px; border-style: dashed; }
  .scene-btn.scene-advanced-btn.open { border-color: #94a3b8; background: #273449; }
  .scene-panel { margin-top: 8px; }
  /* Blocs repliables (v17.1) : ce qui ne sert pas à chaque vidéo ; fermés, une ligne de résumé (.fold-info) */
  details.fold { margin-top: 14px; border-top: 1px solid #1e293b; padding-top: 2px; }
  details.fold > summary.section-title { margin-top: 8px; cursor: pointer; list-style: none; padding: 6px 2px; }
  details.fold > summary.section-title::-webkit-details-marker { display: none; }
  details.fold > summary.section-title::before { content: '▸'; color: #94a3b8; }
  details.fold[open] > summary.section-title::before { content: '▾'; }
  .fold-info { text-transform: none; letter-spacing: 0; color: #cbd5e1; font-weight: 600; margin-left: auto; text-align: right; }
  .fold-tools { display: flex; justify-content: flex-end; }
  #productPicker.hidden { display: none; }
  .effects-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .asset-row.off .asset-text { opacity: 1; text-decoration: line-through; }
  .asset-row input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; margin: 0; }
  #remarques { scroll-margin-top: 175px; }
  #logsBox { scroll-margin-top: 175px; }
  .effect-pick { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; }
  .asset-row.off .effect-pick .asset-text { opacity: 1; text-decoration: line-through; }
  .effect-swap { display: flex; gap: 6px; align-items: center; margin: 4px 0 6px 28px; }
  .effect-swap select { flex: 1; min-width: 0; }
  .assets-filter { display: flex; gap: 6px; margin: 8px 0; }
  .assets-filter input { flex: 1; min-width: 0; }
  .assets-filter select { flex: 0 1 45%; min-width: 0; }
  /* Page de connexion (v19) */
  .login-page { display: flex; justify-content: center; }
  .login-card { width: 100%; max-width: 420px; margin-top: 6vh; }
  .login-card form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
  .login-card [hidden] { display: none !important; }
  .login-card .check-box { margin-top: 12px; }
  /* Comptes (v19) : ce que voit un membre ou le propriétaire */
  .role-member .owner-only { display: none !important; }
  .member-only { display: none; }
  .role-member .member-only { display: block; }
  .account-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
  .account-name { flex: 1; font-weight: 700; }
  .team-link { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
  .team-link input { width: 100%; box-sizing: border-box; background: #1e293b; color: #fff; border: 1px solid #334155; border-radius: 8px; padding: 10px; font-size: 13px; }
  .team-link[hidden] { display: none; }
  /* v19 : rendu d'un autre compte en cours (progression sans ⛔) */
  /* v22.15.1 : bandeau de la recherche des images (en cours : bleu, prête : vert, scènes sans image : orange) */
  .images-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #1e3a5f; border: 1px solid #3b82f6; border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; font-size: 13px; color: #e2e8f0; }
  .images-bar[hidden] { display: none; }
  .images-bar-text { flex: 1 1 180px; font-weight: 600; }
  .images-bar-track { flex-basis: 100%; height: 5px; background: #0f172a; border-radius: 3px; overflow: hidden; }
  .images-bar-fill { height: 100%; width: 0; background: #60a5fa; transition: width 0.3s; }
  .images-bar[data-state="done"] { background: #064e3b; border-color: #059669; }
  .images-bar[data-state="done"] .images-bar-fill { background: #34d399; }
  .images-bar[data-state="warn"] { background: #451a03; border-color: #d97706; }
  .images-bar[data-state="warn"] .images-bar-fill { background: #fbbf24; }
  .actionbar[data-state="busy"] .btn-render { display: none; }
  .actionbar[data-state="busy"] .progress { display: block; }
  /* ▶ Aperçu instantané (v19.3) */
  .btn-apercu { background: #1e293b; color: #c7d2fe; border: 1px solid #4f46e5; padding: 11px 12px; white-space: nowrap; }
  .actionbar[data-state="rendering"] .btn-apercu { display: none; }
  .sheet { position: fixed; inset: 0; z-index: 50; background: rgba(2, 6, 23, 0.82); display: flex; align-items: flex-start; justify-content: center; padding: 12px; overflow-y: auto; }
  .sheet[hidden] { display: none; }
  .sheet-box { width: 100%; max-width: 720px; background: #0f172a; border: 1px solid #334155; border-radius: 14px; padding: 12px; box-sizing: border-box; }
  .sheet-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; margin-bottom: 4px; }
  .apercu-formats { margin: 6px 0; }
  .apercu-formats .btn-small.active { background: #6062eb; color: #fff; }
  .apercu-stage { display: flex; justify-content: center; }
  .apercu-player { width: 100%; aspect-ratio: 9 / 16; max-width: 100%; background: #020617; border-radius: 10px; overflow: hidden; }
  body.sheet-open { overflow: hidden; }

  /* v19.7 : profil (👤 en haut), Réglages en rubriques repliables, étape 1 selon le mode, Aperçu caché une fois la vidéo prête */
  body:not(.mode-studio) .studio-only { display: none !important; }
  .topbar h1 { justify-content: flex-start; }
  .topbar .ver { margin-left: auto; }
  .profile-btn { width: auto; margin: 0 0 0 8px; padding: 4px 10px; font-size: 16px; line-height: 1.2; border-radius: 999px; background: #1e293b; border: 1px solid #334155; }
  .profile-box { max-width: 420px; margin-top: 60px; }
  /* v22.17 : 💾 Mes brouillons */
  .new-video-row { gap: 6px; flex-wrap: wrap; }
  .new-video-row { align-items: flex-start; }
  .draft-save-group { display: contents; }
  .draft-status { order: 1; flex-basis: 100%; font-size: 12px; color: #94a3b8; }
  .new-video-row .draft-status .btn-small { padding: 0 3px; font-size: 12px; }
  .draft-status [hidden] { display: none; }
  .draft-status-error, #draftCount.draft-count-warning { color: #fb923c; }
  .new-video-row .btn-small { padding: 8px 10px; font-size: 13px; }
  .draft-box { max-width: 520px; margin-top: 40px; }
  .draft-save-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
  .draft-save-row [hidden] { display: none; }
  .draft-list-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; font-weight: 700; color: #e2e8f0; }
  .draft-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
  .draft-row { display: flex; align-items: center; gap: 10px; background: #111a2e; border: 1px solid #334155; border-radius: 10px; padding: 8px; }
  .draft-row.current { border-color: #6366f1; }
  .draft-thumb { flex: none; width: 48px; height: 48px; border-radius: 8px; background: #1e293b; display: flex; align-items: center; justify-content: center; font-size: 22px; overflow: hidden; }
  .draft-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .draft-text { flex: 1; min-width: 0; }
  .draft-name { font-weight: 700; color: #f8fafc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .draft-meta { font-size: 12px; color: #94a3b8; }
  .draft-actions { display: flex; gap: 4px; flex: none; }
  .profile-box .account-name { margin: 10px 0 4px 0; line-height: 1.4; }
  .settings-intro { margin-bottom: 8px; }
  details.settings-fold { margin-top: 8px; border: 1px solid #334155; border-radius: 12px; padding: 0 12px; background: #0f172a; }
  details.settings-fold > summary.section-title { padding: 12px 0; margin: 0; cursor: pointer; }
  details.settings-fold[open] { padding-bottom: 12px; }
  .actionbar[data-state="done"]:not(.edited) .btn-apercu { display: none; }

  /* v20 : étape 3, 🎬 Plan de montage (liste de scènes) */
  body.mode-studio .ecommerce-only { display: none !important; }
  .scene-btn { padding: 10px 6px; font-size: 14px; }
  .plan-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
  .plan-row { background: #111827; border: 1px solid #334155; border-radius: 12px; padding: 8px; }
  .plan-head { display: flex; align-items: center; gap: 6px; }
  .plan-num { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #6062eb; color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
  .plan-head select { flex: 1; min-width: 0; margin: 0; }
  .plan-head .plan-tool { flex: none; width: auto; margin: 0; padding: 6px 9px; }
  .plan-role { font-size: 12px; color: #94a3b8; margin: 4px 0 6px 30px; }
  .plan-fields { display: flex; gap: 6px; margin-left: 30px; }
  .plan-fields select, .plan-fields input { flex: 1; min-width: 0; margin: 0; }
  .plan-actions { margin: 8px 0 0 0; }
  /* v21 : storyboard du Studio libre (voix, image voulue, sans musique, légende) */
  .plan-voix { display: block; width: calc(100% - 30px); margin: 0 0 6px 30px; min-height: 44px; font-size: 16px; }
  .plan-image { display: flex; align-items: center; gap: 6px; margin: 6px 0 0 30px; flex-wrap: wrap; }
  .plan-image-text { flex: 1 1 140px; min-width: 0; margin: 0; }
  .plan-image .plan-image-find { flex: none; width: auto; margin: 0; padding: 6px 9px; }
  .plan-image .plan-silence { flex: none; margin: 0; font-size: 13px; white-space: nowrap; }
  /* v21.2 : étiquettes, vignettes des médias, 🪄 Remplir les images */
  .plan-label { font-size: 12px; color: #cbd5e1; font-weight: 600; margin: 0 0 3px 30px; }
  .plan-fields { align-items: center; }
  .plan-field-label { flex: none; font-size: 12px; color: #cbd5e1; font-weight: 600; }
  .plan-media[hidden] { display: none; }
  .plan-thumbs { display: flex; gap: 6px; overflow-x: auto; margin: 6px 0 0 30px; padding: 2px 0; }
  .plan-thumbs[hidden] { display: none; }
  .plan-thumb { position: relative; flex: none; width: 52px; height: 52px; margin: 0; padding: 0; border: 2px solid #334155; border-radius: 8px; background: #0f172a; color: #cbd5e1; overflow: hidden; opacity: 1; cursor: pointer; }
  .plan-thumb.on { border-color: #22c55e; opacity: 1; }
  .plan-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .plan-thumb-auto { width: auto; padding: 0 8px; font-size: 12px; font-weight: 700; }
  .plan-thumb-icon { font-size: 20px; }
  .plan-thumb-num { position: absolute; left: 2px; bottom: 2px; min-width: 16px; height: 16px; border-radius: 8px; background: rgba(15, 23, 42, 0.85); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .plan-fill { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
  .plan-fill .btn-small { width: auto; margin: 0; }
  .plan-fill .btn-small[hidden] { display: none; }
  .plan-legende { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
  /* v23.15.0 : prompt de l'image dans chaque scène (📋 Copier, 📱 Mettre mon image) */
  .plan-prompt { margin: 6px 0 0 30px; }
  .plan-prompt-actions { display: flex; gap: 6px; flex-wrap: wrap; }
  .plan-prompt-actions .btn-small { flex: none; width: auto; margin: 0; padding: 6px 8px; font-size: 12px; white-space: nowrap; }
  .plan-prompt-voir summary { font-size: 12px; color: #94a3b8; cursor: pointer; margin-top: 4px; }
  .plan-prompt-texte { white-space: pre-wrap; font-size: 12px; line-height: 1.4; color: #e2e8f0; background: #1e293b; border: 1px solid #475569; border-radius: 8px; padding: 8px; margin-top: 4px; user-select: text; }
  .plan-prompt-note { font-size: 12px; margin-top: 4px; }
  .plan-legende[hidden] { display: none; }
  .plan-legende textarea { margin: 0; }
  .plan-legende .btn-small { align-self: flex-start; width: auto; }
  body.mode-studio .scene-choice .scene-btn { flex: 1 1 30%; }
  /* v20.2 : photos du produit à cocher, sons de chaque scène */
  .product-photos { margin-top: 8px; }
  .photo-picks { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0; }
  .photo-pick { position: relative; flex: none; width: 64px; height: 64px; padding: 0; border: 2px solid #334155; border-radius: 10px; background: #0f172a; overflow: hidden; opacity: 0.45; }
  .photo-pick.on { border-color: #22c55e; opacity: 1; }
  .photo-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .photo-pick-mark { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; border-radius: 50%; background: #22c55e; color: #052e16; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .photo-pick:not(.on) .photo-pick-mark { display: none; }
  .plan-fx { margin: 6px 0 0 30px; font-size: 12px; color: #94a3b8; }
  .plan-fx summary { cursor: pointer; }
  .plan-fx-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
  .plan-fx-row span { flex: none; width: 82px; }
  .plan-fx-row select { flex: 1; min-width: 0; margin: 0; font-size: 13px; }
  .plan-fx-row .btn-small { flex: none; width: auto; margin: 0; padding: 6px 9px; }
  .plan-demo-btn { background: #312e81; color: #e0e7ff; border: 0; border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 700; cursor: pointer; }
  .plan-demo { margin: 6px 0 2px 30px; }
  .plan-demo video { display: block; width: 100%; max-width: 200px; aspect-ratio: 9 / 16; background: #000; border-radius: 10px; }
  .plan-actions .btn-small { flex: 1; margin: 0; }
  .plan-bar { margin: 6px 0 4px 0; }
  .plan-info { margin-top: 4px; }
  .idea-plan-use[hidden] { display: none !important; }
  /* v20.4 : ✏️ Éditeur de scènes (réglages à gauche, aperçu à droite ; l'un sous l'autre sur un écran étroit) */
  .editor-body { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; }
  .editor-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  .editor-field { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #94a3b8; margin: 4px 0 0 0; }
  .editor-field { min-width: 0; }
  .editor-field select, .editor-fields input { margin: 0; width: 100%; max-width: 100%; min-width: 0; }
  .editor-son { display: flex; gap: 6px; align-items: center; min-width: 0; }
  .editor-son select { flex: 1; }
  .editor-son .editor-listen { flex: none; margin: 0; padding: 6px 10px; }
  .editor-side { flex: none; width: 150px; }
  .editor-preview { width: 150px; aspect-ratio: 9 / 16; background: #000; border-radius: 10px; overflow: hidden; }
  .editor-side .note { font-size: 12.5px; }
  .editor-name { gap: 6px; margin-top: 8px; }
  .editor-name #editorIcon { flex: none; width: 56px; text-align: center; margin: 0; }
  .editor-name #editorName { flex: 1; min-width: 0; margin: 0; }
  @media (max-width: 360px) { .editor-body { flex-direction: column; } .editor-fields { width: 100%; } .editor-side { width: 100%; } .editor-preview { width: 60%; margin: 0 auto; } }

  /* v25.0.0 : vue Créer (2 cartes) & Atelier (3 cartes) mobile-first à 390 px, cibles tactiles >= 44 px */
  .creer-utils { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
  .creer-alert { background: #3b1d12; border: 1px solid #f59e0b; color: #fde68a; border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; }
  .creer-alert[hidden] { display: none; }
  .creer-alert .link { color: #fef08a; font-weight: 700; min-height: 0; padding: 0 2px; }
  .rail-card, .atelier-card { background: #111a2e; border: 1px solid #334155; border-radius: 14px; padding: 14px; margin-bottom: 14px; }
  .rail-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
  .rail-card-head h2 { margin: 0; font-size: 18px; color: #f8fafc; }
  .rail-card-head .link, .btn-small, .btn-idea, .btn-voice, .pill-btn, .toggle-btn { min-height: 44px; }
  .rail-sublabel { font-size: 12px; font-weight: 600; color: #94a3b8; margin: 10px 0 6px; text-transform: uppercase; letter-spacing: 0.04em; }
  .account-pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
  .pill-btn { background: #0f172a; color: #cbd5e1; border: 1px solid #334155; border-radius: 10px; padding: 8px 6px; font-size: 13px; font-weight: 600; cursor: pointer; text-align: center; }
  .pill-btn.active { background: #312e81; border-color: #818cf8; color: #ffffff; }
  .toggle-2way { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; background: #0f172a; padding: 4px; border-radius: 10px; border: 1px solid #334155; }
  .toggle-btn { background: transparent; color: #94a3b8; border: none; border-radius: 8px; padding: 8px 6px; font-size: 13px; font-weight: 600; cursor: pointer; }
  .toggle-btn.active { background: #4338ca; color: #fff; }
  .rail-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
  .btn-secondary-action { width: 100%; background: #1e293b; border: 1px solid #475569; color: #f1f5f9; font-weight: 600; }
  .rail-note { margin-top: 8px; }
  .atelier-topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
  .atelier-top-tools { display: flex; gap: 6px; align-items: center; }
  .rail-badge { font-size: 12px; font-weight: 700; color: #c7d2fe; background: #1e1b4b; border: 1px solid #4338ca; border-radius: 999px; padding: 6px 10px; }
  .atelier-card-title { margin: 0 0 10px; font-size: 16px; color: #f8fafc; }
  .atelier-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
  .atelier-row > button { flex: 1 1 auto; }
  .toggle-disabled { opacity: 0.6; margin-top: 10px; cursor: not-allowed; }
  .toggle-disabled .muted { color: #94a3b8; }
  .validation-summary { background: #0f172a; border: 1px solid #334155; border-radius: 10px; padding: 10px 12px; font-size: 13px; font-weight: 600; color: #e2e8f0; margin-bottom: 10px; word-break: break-word; }
  .validation-blocking { background: #450a0a; border: 1px solid #f87171; color: #fecaca; border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 10px; }
  .validation-blocking[hidden] { display: none; }
  .atelier-val-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
  .atelier-val-actions button { width: 100%; margin: 0; }
  .section-subtitle { font-size: 13px; font-weight: 700; color: #cbd5e1; margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid #1e293b; }
  @media (max-width: 420px) { .atelier-val-actions { grid-template-columns: 1fr; } }

  /* v20.8 : banque d'images (étape 1) */
  .bank-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 8px; }
  .bank-card { position: relative; border-radius: 8px; overflow: hidden; background: #0f172a; border: 1px solid #334155; }
  .bank-card img, .bank-card video { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: #020617; cursor: pointer; }
  .bank-card.taken { border-color: #22c55e; }
  .bank-card.busy { pointer-events: none; }
  .bank-card.busy img { opacity: .4; }
  .bank-card.busy::after { content: ''; position: absolute; left: 50%; top: 40%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 3px solid #475569; border-top-color: #f8fafc; border-radius: 50%; animation: bank-spin .8s linear infinite; }
  @keyframes bank-spin { to { transform: rotate(360deg); } }
  .bank-card.failed { border-color: #f97316; }
  .bank-error { font-size: 12px; line-height: 1.25; color: #fdba74; padding: 2px 5px 4px; }
  .bank-shape { position: absolute; left: 5px; bottom: 23px; box-sizing: border-box; border: 2px solid #cbd5e1; border-radius: 2px; background: #0f172acc; pointer-events: none; }
  .bank-shape.portrait { width: 10px; height: 16px; }
  .bank-shape.landscape { width: 16px; height: 10px; }
  .bank-shape.square { width: 13px; height: 13px; }
  .bank-shape.same { border-color: #4ade80; }
  .bank-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .bank-bar { flex-wrap: nowrap; align-items: stretch; }
  .bank-bar select { flex: 1 1 0; min-width: 0; }
  .bank-bar .btn-small { flex: none; white-space: nowrap; }
  .bank-source { white-space: nowrap; padding: 5px 10px; border-radius: 999px; border: 1px solid #475569; background: #0f172a; color: #cbd5e1; font-size: 13px; }
  .bank-source.on { background: #1e3a8a; border-color: #60a5fa; color: #f8fafc; box-shadow: 0 0 0 1px #60a5fa inset; }
  .bank-source.locked { opacity: 1; }
  .bank-source.photo-only.on { opacity: 1; text-decoration: line-through; }
  #bankSimilarAll[hidden], #bankTakenMore[hidden] { display: none; }
  #bankTaken:empty { display: none; }
  .viewer-box { max-width: 900px; }
  .viewer-stage { position: relative; display: flex; align-items: center; justify-content: center; background: #020617; border-radius: 10px; min-height: 200px; }
  .viewer-stage img, .viewer-stage video { display: block; max-width: 100%; max-height: 68vh; object-fit: contain; }
  .viewer-stage [hidden] { display: none; }
  .viewer-loading { position: absolute; top: 8px; right: 10px; font-size: 18px; }
  .viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 56px; padding: 0; border-radius: 8px; border: none; background: #0f172a99; color: #f8fafc; font-size: 30px; }
  .viewer-prev { left: 4px; }
  .viewer-next { right: 4px; }
  .viewer-info { font-size: 12px; color: #94a3b8; margin-top: 8px; word-break: break-word; }
  .viewer-info a { color: #93c5fd; }
  .viewer-learned { font-size: 12px; color: #cbd5e1; margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .viewer-learned[hidden] { display: none; }
  .viewer-words { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; font-size: 13px; }
  .viewer-words[hidden] { display: none; }
  .viewer-words-title { color: #94a3b8; font-size: 12px; }
  .viewer-word { display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px 2px 9px; border-radius: 999px; background: #1e293b; border: 1px solid #334155; }
  .viewer-word button { border: none; background: none; color: #94a3b8; padding: 0 4px; font-size: 12px; }
  .viewer-word-none { color: #94a3b8; }
  .viewer-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; width: 100%; }
  .viewer-word-suggest { padding: 2px 9px; color: #94a3b8; background: none; border-style: dashed; font-size: 13px; }
  .viewer-word-input { width: 130px; padding: 4px 8px; }
  .viewer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .plan-thumb-zoom { font-size: 16px; }
  #bankOpen { margin-top: 10px; }
  .mine-box { max-width: 960px; }
  /* v22 (spec 009) : 🖼 Médiathèque */
  .med-open { display: block; width: 100%; margin: 10px 0 4px; padding: 10px; font-size: 15px; }
  .med-tabs { display: flex; gap: 4px; margin: 6px 0 4px; border-bottom: 1px solid #334155; }
  .med-tab { flex: 1; padding: 8px 4px; border: 0; border-bottom: 3px solid transparent; background: none; color: #94a3b8; font-size: 14px; }
  .med-tab.on { color: #f8fafc; border-bottom-color: #6366f1; }
  .mini-tabs { margin: 8px 0 10px; } /* v23.7.0 : petits onglets de ⚙️ Réglages et de l’étape 4 */
  .med-panel[hidden], .med-scene[hidden], #medDone[hidden], .med-triage[hidden], .med-word-list[hidden], #medAllWords[hidden] { display: none; }
  .med-scene { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #172554; border: 1px solid #3b82f6; border-radius: 10px; padding: 8px 10px; margin: 6px 0; font-size: 13px; color: #dbeafe; }
  .med-scene #medDone { margin-left: auto; }
  #medFilters select { padding: 4px 8px; border-radius: 999px; font-size: 13px; }
  .med-word-list { margin-top: 6px; max-height: 40vh; overflow-y: auto; border: 1px solid #334155; border-radius: 10px; }
  .med-word-row { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-bottom: 1px solid #1e293b; font-size: 13px; }
  .med-word-row .med-word-name { flex: 1; text-align: left; background: none; border: 0; color: #e2e8f0; padding: 4px 0; }
  .med-word-row .med-word-name.on { color: #93c5fd; font-weight: 700; }
  .med-triage { margin-top: 8px; padding: 8px; border: 1px solid #334155; border-radius: 10px; background: #0b1222; }
  .med-triage-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
  .triage-on .med-side, .triage-on .mine-tools:first-child { display: none; }
  .med-triage img { display: block; width: 100%; max-height: 45vh; object-fit: contain; background: #020617; border-radius: 8px; margin-top: 6px; }
  .med-empty { grid-column: 1 / -1; }
  .mine-grid .bank-card.match { border-color: #f59e0b; }
  .mine-grid .bank-card.picked { border-color: #6366f1; box-shadow: 0 0 0 2px #6366f1; }
  .med-order { position: absolute; top: 4px; left: 4px; min-width: 22px; height: 22px; border-radius: 11px; background: #6062eb; color: #fff; font-size: 13px; line-height: 22px; text-align: center; pointer-events: none; }
  .med-phone-pick { display: inline-block; margin-top: 10px; padding: 10px 14px; cursor: pointer; }
  @media (min-width: 1000px) {
    .med-mine { display: grid; grid-template-columns: 240px 1fr; gap: 12px; }
    .med-side { position: sticky; top: 0; align-self: start; }
  }
  .mine-search { display: flex; gap: 8px; margin-top: 6px; }
  .mine-search input { flex: 1; min-width: 0; }
  .mine-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
  .mine-tools [hidden], .mine-bulk[hidden], #mineMore[hidden] { display: none; }
  .mine-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding: 8px; border-radius: 10px; background: #1e293b; }
  .mine-grid { grid-template-columns: repeat(3, 1fr); }
  @media (min-width: 700px) { .mine-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
  .mine-grid .bank-card.selected { border-color: #60a5fa; box-shadow: 0 0 0 2px #60a5fa; }
  .mine-check { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #f8fafc; background: #0f172acc; color: #f8fafc; font-size: 14px; line-height: 22px; text-align: center; pointer-events: none; }
  .bank-card.selected .mine-check { background: #2563eb; }
  .bank-credit { font-size: 12px; color: #94a3b8; padding: 3px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bank-take { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; padding: 0; border-radius: 50%; background: #0f172acc; color: #f8fafc; border: 1px solid #475569; font-size: 15px; }
  .bank-card.taken .bank-take { background: #16a34a; }
  .bank-play { position: absolute; left: 6px; top: 6px; font-size: 14px; color: #fff; text-shadow: 0 0 4px #000; pointer-events: none; }
  #bankForce[hidden], #bankMore[hidden] { display: none; }
  #bankResults:empty { display: none; }
  /* v21.7 : Ma voix : texte à lire pendant l'enregistrement, ■ Arrêter juste en dessous */
  .prompter { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: #0b1120; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .prompter[hidden] { display: none; }
  .prompter-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: #94a3b8; margin-bottom: 8px; }
  .prompter-time { color: #f87171; font-weight: 800; font-size: 16px; }
  .prompter-text { flex: 1; overflow-y: auto; font-size: 30px; line-height: 1.45; color: #94a3b8; padding-bottom: 60vh; }
  .prompter-line { cursor: pointer; transition: color 0.2s; }
  .prompter-line.done { color: #94a3b8; }
  .prompter-line.now { color: #cbd5e1; }
  .prompter-line.now .prompter-word.said { color: #fff; }
  .prompter-countdown { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 140px; font-weight: 900; color: #f87171; background: rgba(11,17,32,0.7); pointer-events: none; }
  .prompter-countdown[hidden] { display: none; }
  .prompter-bar { flex: none; display: flex; align-items: center; justify-content: space-around; gap: 12px; margin-top: 10px; }
  .prompter-side { width: 72px; height: 72px; border-radius: 50%; border: 1px solid #475569; background: #1e293b; color: #e2e8f0; font-size: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
  .prompter-side span, .prompter-stop span { font-size: 12px; font-weight: 600; margin-top: 2px; }
  .prompter-text p { margin: 0 0 16px 0; }
  .prompter-empty { color: #94a3b8; font-size: 16px; }
  .prompter-stop { flex: none; width: 96px; height: 96px; border: 4px solid #fecaca; border-radius: 50%; background: #dc2626; color: #fff; font-size: 34px; font-weight: 800; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; }
  body.prompter-open { overflow: hidden; }
  /* v21.7 : banque visée par une scène du storyboard ; vignettes à plusieurs médias ; durée et ton */
  .plan-thumb-order { position: absolute; right: 2px; top: 2px; min-width: 18px; height: 18px; border-radius: 9px; background: #22c55e; color: #052e16; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
  .plan-thumb-hint { flex: none; align-self: center; font-size: 12px; color: #94a3b8; white-space: nowrap; }
  .plan-thumb { -webkit-touch-callout: none; user-select: none; touch-action: manipulation; }
  .idea-style { margin-top: 4px; }
  /* v23.8.0 (spec 024) : mode ✨ Simple / 🔧 Avancé : en Simple, les parties marquées data-avance sont cachées (elles comptent toujours) */
  .ecran-mode { display: flex; gap: 0; margin: 4px 0 8px; border: 1px solid #334155; border-radius: 10px; overflow: hidden; width: max-content; }
  .ecran-mode-btn { border: 0; background: none; color: #94a3b8; padding: 6px 14px; font-size: 14px; }
  .ecran-mode-btn[aria-pressed="true"] { background: #6062eb; color: #f8fafc; }
  body.ecran-simple [data-avance] { display: none !important; }
  /* v24 : en Simple, seul 🎬 Plan de montage / Storyboard reste : le choix de la mise en scène disparaît (sauf mise en scène avancée en cours) */
  body.ecran-simple:not(.scene-avancee) .scene-choice { display: none; }
  .avance-rappel { font-size: 13px; color: #cbd5e1; margin: 4px 0 6px; }
  .avance-rappel[hidden] { display: none; }

/* Clavier : même repère sur les champs, liens, boutons et cartes interactives. */
  :focus-visible { outline: 2px solid #a5b4fc; outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }
  /* Le contour reste à l’intérieur des vignettes dont la carte masque le débordement. */
  .bank-card :focus-visible, .thumb :focus-visible, .ecran-mode :focus-visible { outline-offset: -3px; }

/* Messages d’erreur et consignes : dans le flux, sur toute la largeur de l’onglet. */
.message-bandeau { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 12px; padding: 12px; border: 1px solid #fca5a5; border-radius: 10px; background: #450a0a; color: #fef2f2; scroll-margin-top: calc(var(--entete, 180px) + 8px); }
.message-texte { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.message-texte [data-partie="quoi"] { font-weight: 700; }
.message-texte > div + div { margin-top: 4px; }
.message-attention { background: #422006; border-color: #fcd34d; color: #fffbeb; }
.message-ok { background: #052e16; border-color: #86efac; color: #f0fdf4; }
.message-bandeau button { flex-shrink: 0; }
@media (max-width: 480px) {
  .message-bandeau { flex-wrap: wrap; }
  .message-texte { flex-basis: calc(100% - 52px); }
  .message-fermer { order: 1; }
  .message-action { order: 2; }
}

  .scene-media-bar { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
  .scene-media-actions { display: flex; flex-wrap: wrap; gap: 6px; }
  .scene-media-actions button { flex: 1 1 auto; }
  .scene-prompt-preview { font-size: 12px; color: #cbd5e1; background: #0f172a; border: 1px solid #1e293b; border-radius: 8px; padding: 6px 8px; line-height: 1.35; }
  .scene-effect-row { margin-top: 8px; }
  .scene-effect-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #e2e8f0; }
  .scene-effect-label select { flex: 1; min-width: 0; }
  .draft-launch { background: #4338ca; color: #fff; font-weight: 600; }
  .draft-launch:disabled { opacity: 0.5; cursor: not-allowed; }
  .mini-tabs { flex-wrap: wrap; }
  .mini-tabs .med-tab { flex: 1 1 auto; min-height: 44px; padding: 8px 10px; white-space: nowrap; }
  .history-server-card { padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; font-size: 14px; font-weight: 600; border: 1px solid #334155; }
  .history-server-card.idle { background: #0f291e; color: #86efac; border-color: #166534; }
  .history-server-card.busy { background: #1e293b; color: #fde68a; border-color: #b45309; }
  .history-account-badge { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; background: #1e293b; color: #93c5fd; border: 1px solid #3b82f6; vertical-align: middle; }
  .fav-voices-list { display: grid; gap: 10px; margin-top: 8px; }
  .fav-voices-group { display: grid; gap: 4px; }
  .fav-voice-row { min-height: 44px; display: flex; align-items: center; gap: 8px; }
  .fav-voice-unavail { opacity: 0.65; }