:root {
    --bg:        #080703;
    --bg-glow:   #16120b;
    --surface:   #1a160e;
    --surface-2: #201b12;
    --border:    rgba(224, 201, 141, 0.12);
    --border-2:  rgba(224, 201, 141, 0.22);
    --text:      #ece3d0;
    --muted:     #9c9079;
    --faint:     #6f6650;
    --sand:      #e0c07d;
    --sand-dim:  #c9a86a;
    --sand-soft: rgba(224, 192, 125, 0.12);
    --ok:        #a7cf95;
    --warn:      #e0c07d;
    --err:       #dd8b78;
    --radius:    14px;
    --shadow:    0 18px 50px -20px rgba(0,0,0,0.7);
    /* panneaux "en creux" (champs, tuiles, sidebar) : nettement plus sombres
       et plus neutres (moins de teinte marron) que --surface, pour un vrai
       contraste avec les éléments "en relief" (chips, cartes) au-dessus. */
    --sidebar-bg: #060503;
    --well:       #070604;
    /* liseré neutre (gris) pour la sidebar et la carte de création : la
       teinte marron de --border s'y voyait trop, redondante avec --sand. */
    --border-mute: rgba(255, 255, 255, 0.07);
    /* look "glossy" partagé par tous les boutons dorés (même recette que le
       prompteur géant de la landing) */
    --gold-grad:   linear-gradient(165deg, #f6e3b0, var(--sand) 45%, #a8894f);
    --gold-shadow: 0 10px 26px -10px rgba(224,192,125,0.55),
                   inset 0 2px 3px rgba(255,255,255,0.5),
                   inset 0 -6px 14px rgba(90,66,26,0.4);
  }

  /* ---- thème clair (bascule manuelle, voir js/theme.js) ---- */
  :root[data-theme="light"] {
    --bg:        #f7f3ea;
    --bg-glow:   #efe6d2;
    --surface:   #fffdf8;
    --surface-2: #f3ecdd;
    --border:    rgba(90, 66, 26, 0.14);
    --border-2:  rgba(90, 66, 26, 0.26);
    --text:      #241d0f;
    --muted:     #6b6047;
    --faint:     #948764;
    --sand:      #b8863f;
    --sand-dim:  #9c6f31;
    --sand-soft: rgba(184, 134, 63, 0.14);
    --ok:        #3f7a4f;
    --warn:      #9c6f31;
    --err:       #b8493a;
    --shadow:    0 18px 50px -20px rgba(60,45,15,0.25);
    --sidebar-bg: #efe6d2;
    --well:       #fbf7ee;
    --border-mute: rgba(0, 0, 0, 0.1);
  }

  * { box-sizing: border-box; }

  html, body { height: 100%; }

  body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
  }

  /* ---- icônes SVG (trait, héritent de la couleur/taille du texte) ---- */
  .ic {
    width: 1.05em; height: 1.05em; flex: none;
    vertical-align: -0.16em; stroke-width: 2;
    stroke: currentColor; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
  }

  /* logo de la marque (icône générée) : remplace l'ancien mark vectoriel */
  .brand-mark {
    width: 1.2em; height: 1.2em; flex: none;
    border-radius: 24%; object-fit: cover;
    vertical-align: -0.22em;
  }

  /* bascule thème clair/sombre : deux variantes du même bouton (icônes et
     logique de bascule communes, cf. theme.js qui cible tout [data-theme-toggle]).
     --floating : mode anonyme, sidebar masquée, doit rester joignable seule.
     --corner : accrochée au coin haut-droit de la carte compte, déborde de
     son bord (cf. .account-card, position: relative). */
  .theme-toggle {
    display: grid; place-items: center;
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border-2); color: var(--muted);
    cursor: pointer; transition: color .15s, border-color .15s;
  }
  .theme-toggle:hover { color: var(--sand); border-color: var(--sand); }
  .theme-toggle .theme-ic-moon { display: none; }
  :root[data-theme="light"] .theme-toggle .theme-ic-sun { display: none; }
  :root[data-theme="light"] .theme-toggle .theme-ic-moon { display: block; }

  .theme-toggle--floating {
    position: fixed; bottom: 20px; left: 20px; z-index: 40;
    width: 40px; height: 40px; border-radius: 50%;
    box-shadow: 0 10px 26px -12px rgba(0,0,0,0.5);
  }
  .theme-toggle--floating[hidden] { display: none; }

  .theme-toggle--corner {
    position: absolute; top: -8px; right: -8px; z-index: 2;
    width: 24px; height: 24px; border-radius: 50%;
    box-shadow: 0 4px 10px -4px rgba(0,0,0,0.5);
  }
  .theme-toggle--corner .ic { width: 13px; height: 13px; }

  /* ---- coquille app (sidebar + contenu), inspirée d'un shell type bolt.new ---- */
  .app-shell { display: flex; min-height: 100vh; }

  .sidebar {
    width: 280px; flex: none; display: flex; flex-direction: column;
    background: var(--sidebar-bg); border-right: 1px solid var(--border-mute);
    padding: 14px 12px; gap: 4px;
    /* z-index explicite : .hero (position:relative pour son glow décoratif)
       vient après la sidebar dans le DOM, donc sans ça il repeindrait par
       dessus (z-index:auto, ordre du DOM) et masquerait tout élément fixed/
       absolute de la sidebar qui déborde sur la zone principale (ex. le
       bouton collapse flottant en mode réduit). */
    position: sticky; top: 0; z-index: 1; align-self: flex-start; height: 100vh; overflow-y: auto;
    transition: width .2s ease;
  }
  .sidebar.collapsed { width: 72px; }
  .sidebar[hidden] { display: none; }

  .sb-top { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 14px; }
  .sb-brand { display: flex; align-items: center; gap: 9px; color: var(--text); font-weight: 750; font-size: 15px; overflow: hidden; text-decoration: none; }
  .sb-brand .ic { color: var(--sand); width: 20px; height: 20px; flex: none; }
  .sb-collapse {
    display: grid; place-items: center; width: 26px; height: 26px; flex: none;
    border-radius: 7px; border: none; background: transparent; color: var(--muted); cursor: pointer;
  }
  .sb-collapse:hover { color: var(--sand); background: var(--sand-soft); }
  .sb-collapse .ic { width: 15px; height: 15px; }
  .sidebar.collapsed .sb-collapse .ic { transform: rotate(180deg); }
  /* Réduite : le bouton sort de la colonne 72px et flotte sur la bordure.
     position: fixed (pas absolute) car .sidebar a overflow-y: auto, qui
     clippe aussi tout débordement horizontal d'un descendant positionné
     relativement à elle — fixed échappe au clipping en se positionnant par
     rapport au viewport. */
  .sidebar.collapsed .sb-collapse {
    position: fixed; top: 14px; left: 60px; z-index: 5;
    width: 24px; height: 24px; border-radius: 50%;
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border-2); box-shadow: var(--shadow);
  }

  .sb-search {
    display: flex; align-items: center; gap: 8px;
    background: var(--well); border: 1px solid var(--border-mute); border-radius: 10px;
    padding: 9px 11px; margin-bottom: 10px; color: var(--faint);
  }
  .sb-search .ic { flex: none; }
  .sb-search input { flex: 1; min-width: 0; border: none; background: none; box-shadow: none !important; padding: 0; font-size: 13px; color: var(--text); }
  .sb-search input::placeholder { color: var(--faint); }
  .sb-search-kbd {
    flex: none; font-family: inherit; font-size: 11px; font-weight: 600; color: var(--faint);
    background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 5px;
    padding: 2px 5px; line-height: 1.4;
  }
  .sb-search:focus-within { border-color: var(--border-2); }
  .sb-search:focus-within .sb-search-kbd { display: none; }

  .sb-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }

  /* position: relative ancre le bouton thème en coin (.theme-toggle--corner) ;
     margin-top laisse la place à son débordement au-dessus de la carte. */
  .account { margin-top: 8px; margin-bottom: 4px; }
  .account-card { position: relative; margin-top: 8px; }
  .sb-item {
    display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
    background: none; border: none; border-radius: 9px; padding: 10px;
    color: var(--muted); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
    transition: background .15s, color .15s;
  }
  .sb-item .ic { flex: none; }
  .sb-item:hover { color: var(--text); background: rgba(224,192,125,0.06); }
  .sb-item.active { color: var(--sand); background: var(--sand-soft); }

  /* ---- carte "contribuer" en pied de sidebar : plaquée en bas via
     margin-top:auto (dernier enfant du flex column de .sidebar). ---- */
  .sb-promo {
    margin-top: auto; position: relative; overflow: hidden;
    border: 1px solid var(--border-mute); border-radius: 14px;
    background: var(--sidebar-bg);
  }
  .sb-promo[hidden] { display: none; }
  .sb-promo-close {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    width: 22px; height: 22px; display: grid; place-items: center;
    border-radius: 50%; border: none; background: rgba(0,0,0,0.25);
    color: var(--muted); cursor: pointer;
  }
  .sb-promo-close:hover { color: var(--text); background: rgba(0,0,0,0.4); }
  .sb-promo-close .ic { width: 12px; height: 12px; }

  .sb-promo-art { display: block; width: 100%; height: 88px; object-fit: cover; }

  .sb-promo-body { padding: 10px 14px 14px; }
  .sb-promo-title { margin: 0 0 4px; font-size: 13.5px; font-weight: 750; color: var(--text); }
  .sb-promo-text {
    margin: 0 0 12px; font-size: 12px; line-height: 1.45; color: var(--muted);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    line-clamp: 2; overflow: hidden;
  }
  .sb-promo-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 9px 12px; border-radius: 10px;
    background: var(--gold-grad); box-shadow: var(--gold-shadow);
    color: #201a0e; font-weight: 700; font-size: 13px;
    text-decoration: none; transition: filter .15s;
  }
  .sb-promo-cta:hover { filter: brightness(1.04); }
  .sb-promo-cta .ic { fill: currentColor; stroke: none; width: 15px; height: 15px; }

  .main { flex: 1; min-width: 0; overflow-y: auto; height: 100vh; }
  .view[hidden] { display: none; }

  /* Bouton flottant (pas une barre) : ancré au viewport, ne bouge pas au scroll,
     ne prend aucune place dans le flux (contrairement à une bande pleine largeur). */
  .anon-topbar { position: fixed; top: 20px; right: 20px; z-index: 40; }
  .anon-topbar[hidden] { display: none; }
  .anon-login-btn {
    display: flex; align-items: center; gap: 9px; text-align: left;
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border-2); color: var(--text);
    font-family: inherit; font-size: 13px; font-weight: 600;
    padding: 9px 16px; border-radius: 999px; cursor: pointer;
    box-shadow: 0 14px 34px -14px rgba(0,0,0,0.75);
    transition: border-color .15s, background .15s;
  }
  .anon-login-btn:hover { border-color: var(--sand); background: var(--surface-2); }
  .anon-login-btn .ic { width: 16px; height: 16px; flex: none; }

  /* réduite : ne garde que les icônes (aussi appliqué automatiquement en dessous
     d'une certaine largeur, pour rester utilisable sur petit écran). */
  .sidebar.collapsed .sb-brand span,
  .sidebar.collapsed .sb-search,
  .sidebar.collapsed .sb-item span,
  .sidebar.collapsed .account-name,
  .sidebar.collapsed .account-chev,
  .sidebar.collapsed .account-credits-badge,
  .sidebar.collapsed .account-login span { display: none; }
  .sidebar.collapsed .sb-item { justify-content: center; }
  .sidebar.collapsed .account-chip { justify-content: center; min-width: 0; padding: 7px; }
  .sidebar.collapsed .account-login { justify-content: center; padding: 9px; }
  /* logo seul (le texte à côté est masqué ci-dessus) : centré et agrandi. */
  .sidebar.collapsed .sb-top { justify-content: center; }
  .sidebar.collapsed .brand-mark { width: 28px; height: 28px; }
  /* trop de contenu pour tenir en icône seule : masquée en réduit. */
  .sidebar.collapsed .sb-promo { display: none; }
  /* Réduite, la carte compte se résume à l'avatar : le badge en coin (pensé
     pour une carte large) écraserait/chevaucherait l'avatar. Pas la place
     pour une bascule de thème lisible ici : masquée (accessible via la
     sidebar dépliée). */
  .sidebar.collapsed .theme-toggle--corner { display: none; }

  @media (max-width: 760px) {
    .sidebar:not(.expanded) { width: 72px; }
    .sidebar:not(.expanded) .sb-brand span,
    .sidebar:not(.expanded) .sb-search,
    .sidebar:not(.expanded) .sb-item span,
    .sidebar:not(.expanded) .account-name,
    .sidebar:not(.expanded) .account-chev,
    .sidebar:not(.expanded) .account-credits-badge,
    .sidebar:not(.expanded) .account-login span { display: none; }
    .sidebar:not(.expanded) .sb-item { justify-content: center; }
    .sidebar:not(.expanded) .account-chip { justify-content: center; min-width: 0; padding: 7px; }
    .sidebar:not(.expanded) .account-login { justify-content: center; padding: 9px; }
    .sidebar:not(.expanded) .sb-top { justify-content: center; }
    .sidebar:not(.expanded) .brand-mark { width: 28px; height: 28px; }
    .sidebar:not(.expanded) .sb-promo { display: none; }
    .sidebar:not(.expanded) .theme-toggle--corner { display: none; }
    .sidebar:not(.expanded) .sb-collapse .ic { transform: rotate(180deg); }
    .sidebar:not(.expanded) .sb-collapse {
      position: fixed; top: 14px; left: 60px; z-index: 5;
      width: 24px; height: 24px; border-radius: 50%;
      background: linear-gradient(180deg, var(--surface), var(--surface-2));
      border: 1px solid var(--border-2); box-shadow: var(--shadow);
    }
  }

  /* ---- hero ---- */
  .hero {
    position: relative;
    padding: clamp(38px, 8vw, 88px) 20px clamp(64px, 9vw, 104px);
    text-align: center;
    overflow: visible;
    background:
      radial-gradient(900px 520px at 50% -8%, rgba(224,192,125,0.22), transparent 60%),
      radial-gradient(680px 460px at 14% 6%, rgba(200,90,74,0.16), transparent 55%),
      radial-gradient(680px 460px at 86% 4%, rgba(150,110,180,0.14), transparent 55%),
      var(--bg);
  }
  .hero-inner { max-width: 680px; margin: 0 auto; }

  /* ---- connexion Google (optionnelle) ---- */
  .account[hidden], .account-login[hidden], .account-user[hidden], .account-menu[hidden] { display: none; }
  .account-login {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    background: var(--well); border: 1px solid var(--border-2); color: var(--text);
    font-family: inherit; font-size: 13px; font-weight: 600;
    padding: 9px 12px; border-radius: 10px; cursor: pointer;
  }
  .account-login:hover { border-color: var(--sand); }
  .account-login .ic { width: 16px; height: 16px; flex: none; }

  .account-user { position: relative; }
  .account-chip {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border-2); color: var(--text);
    font-family: inherit; cursor: pointer;
    padding: 7px 10px 7px 7px; border-radius: 12px;
    transition: border-color .15s, background .15s;
  }
  .account-chip:hover { border-color: var(--sand); background: var(--surface-2); }
  .account-chip[aria-expanded="true"] .account-chev { transform: rotate(180deg); }

  .account-avatar {
    position: relative; width: 30px; height: 30px; border-radius: 9px; flex: none;
    display: grid; place-items: center;
    background: linear-gradient(160deg, var(--sand), var(--sand-dim));
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
  }
  .account-avatar img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    border-radius: 9px;
  }
  .account-avatar img[hidden] { display: none; }
  #accountAvatarInitial {
    font-size: 13px; font-weight: 700; color: #201a0e; line-height: 1;
  }
  /* petit indicateur "connecté" (façon statut en ligne) sur le coin de l'avatar */
  .account-status {
    position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px;
    border-radius: 50%; background: var(--ok); border: 2px solid var(--surface-2);
  }

  /* flex:1 sur le nom -> pousse le chevron à droite du chip. */
  .account-name {
    flex: 1; min-width: 0;
    font-size: 13px; font-weight: 650; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .account-chev { color: var(--faint); transition: transform .2s; flex: none; }

  /* Badge crédits IA sur le chip du compte : visible sans ouvrir le menu ; le
     détail (jauge + explication) reste dans le dropdown. */
  .account-credits-badge[hidden] { display: none; }
  .account-credits-badge {
    display: flex; align-items: center; gap: 3px; flex: none;
    font-size: 11px; font-weight: 700; line-height: 1;
    color: var(--sand); background: var(--sand-soft);
    border: 1px solid var(--border-2); border-radius: 999px;
    padding: 3px 7px 3px 6px;
  }
  .account-credits-badge .ic { width: 12px; height: 12px; }
  .account-credits-badge.empty { color: var(--err); border-color: rgba(221,139,120,0.4); }

  .account-menu {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 7;
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border-2); border-radius: 12px; padding: 6px;
    box-shadow: var(--shadow); animation: pop .16s ease;
  }
  .account-menu-item {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    background: none; border: none; border-radius: 8px; padding: 9px 10px; cursor: pointer;
    color: var(--text); font-family: inherit; font-size: 13px; font-weight: 600;
  }
  .account-menu-item:hover { background: rgba(221,139,120,0.12); color: var(--err); }

  /* ---- crédits IA (menu du compte) : 5 crédits/jour = 5000 tokens, remis à
     zéro chaque nuit ; affiché avec une jauge + une explication courte. ---- */
  .account-credits[hidden] { display: none; }
  .account-credits {
    padding: 10px 10px 11px; margin-bottom: 4px;
    border-bottom: 1px solid var(--border-2);
  }
  .account-credits-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    margin-bottom: 7px;
  }
  .account-credits-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--faint);
  }
  .account-credits-count {
    font-size: 13px; font-weight: 700; color: var(--sand);
  }
  .account-credits-track {
    height: 6px; border-radius: 4px; background: var(--well);
    border: 1px solid var(--border-2); overflow: hidden;
  }
  .account-credits-fill {
    display: block; height: 100%; border-radius: 4px;
    background: var(--gold-grad, var(--sand));
    transition: width .25s ease;
  }
  .account-credits-track.empty .account-credits-fill { background: var(--err); }
  .account-credits-note {
    margin: 8px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--faint);
  }
  .account-credits-note strong { color: var(--text); font-weight: 650; }
  .pill-badge {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 600; color: var(--sand);
    background: rgba(224,192,125,0.10); border: 1px solid var(--border-2);
    padding: 6px 14px; border-radius: 999px; margin-bottom: 22px;
  }
  .hero h1 {
    font-size: clamp(34px, 6vw, 56px); font-weight: 800; letter-spacing: -0.03em;
    margin: 0 0 14px; line-height: 1.06;
  }
  .hero .subtitle {
    color: var(--muted); font-size: 17px; margin: 0 auto 32px; max-width: 480px;
  }

  /* ---- carte de création (barre de prompt) ---- */
  .card {
    background: var(--well);
    border: 1px solid var(--border-mute);
    border-radius: 22px;
    padding: 8px;
    box-shadow: var(--shadow);
    max-width: 700px; margin: 0 auto;
    text-align: left;
  }

  .prompt-box { position: relative; transition: box-shadow .2s; border-radius: 16px; }
  .prompt-box.drag { box-shadow: 0 0 0 2px var(--sand) inset; }
  .prompt-input {
    color: var(--text);
    width: 100%; min-height: 92px; max-height: 40vh; resize: none;
    border: none; background: none; box-shadow: none !important;
    padding: 16px 18px 4px; font-size: 16px; font-family: inherit; line-height: 1.5;
  }
  .prompt-input:focus {
  outline: none; /* Supprime le contour natif */
  }
  .prompt-box.has-project .prompt-input { display: none; }
  .prompt-box #summarySection { margin: 14px 14px 0; }
  .prompt-box #summarySection .section-label { margin-bottom: 8px; }

  .prompt-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px 10px; flex-wrap: wrap; }
  .pt-left { position: relative; display: flex; }
  .pt-import {
    display: inline-flex; align-items: center; gap: 7px;
    background: transparent; border: 1px solid var(--border-2); color: var(--muted);
    font-family: inherit; font-size: 13px; font-weight: 600;
    padding: 8px 12px; border-radius: 10px; cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
  }
  .pt-import:hover { color: var(--sand); border-color: var(--sand); background: var(--sand-soft); }
  .pt-chev { transition: transform .2s; opacity: .8; }
  .pt-import[aria-expanded="true"] .pt-chev { transform: rotate(180deg); }

  /* bouton "Générer par IA" (comptes connectés uniquement) */
  .pt-gen {
    display: inline-flex; align-items: center; gap: 7px; margin-left: 8px;
    background: transparent; border: 1px solid var(--border-2); color: var(--muted);
    font-family: inherit; font-size: 13px; font-weight: 600;
    padding: 8px 12px; border-radius: 10px; cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
  }
  .pt-gen:hover { color: var(--sand); border-color: var(--sand); background: var(--sand-soft); }
  .pt-gen.active {
    color: #201a0e; border-color: transparent;
    background: var(--gold-grad); box-shadow: var(--gold-shadow);
  }
  .pt-gen[hidden] { display: none; }
  .pt-gen:disabled {
    opacity: .45; cursor: not-allowed;
    color: var(--muted); border-color: var(--border-2); background: transparent;
  }

  /* panneau interactif de génération : questions, budget, progression */
  .gen-panel {
    margin-top: 12px; padding: 14px;
    background: var(--surface); border: 1px solid var(--border-2); border-radius: 14px;
    text-align: left;
  }
  .gen-panel[hidden] { display: none; }
  .gq { margin-bottom: 12px; }
  .gq-label { font-size: 13px; font-weight: 650; color: var(--text); margin-bottom: 7px; }
  .gq-opts { display: flex; flex-wrap: wrap; gap: 7px; }
  .gq-opt {
    background: transparent; border: 1px solid var(--border-2); color: var(--muted);
    font-family: inherit; font-size: 12.5px; font-weight: 600;
    padding: 7px 12px; border-radius: 999px; cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
  }
  .gq-opt:hover { color: var(--sand); border-color: var(--sand); }
  .gq-opt.selected {
    color: #201a0e; border-color: transparent;
    background: var(--gold-grad); box-shadow: var(--gold-shadow);
  }
  .gen-note { font-size: 12px; color: var(--faint); margin: 4px 0 10px; }
  .gen-actions { display: flex; justify-content: flex-end; gap: 8px; }
  .gen-progress {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 600; color: var(--sand); margin-bottom: 10px;
  }
  .gen-progress .spin {
    width: 12px; height: 12px; border-radius: 50%; flex: none;
    border: 2px solid var(--sand); border-top-color: transparent;
    animation: spin .7s linear infinite;
  }
  .gen-tokens { margin-left: auto; color: var(--faint); font-weight: 500; font-size: 12px; }
  .gen-over-title { font-size: 13.5px; font-weight: 700; color: var(--err); margin-bottom: 6px; }
  .gen-lighter {
    font-size: 13px; color: var(--text); background: var(--sand-soft);
    border: 1px dashed var(--border-2); border-radius: 10px;
    padding: 9px 12px; margin-bottom: 10px;
  }

  .pt-right { display: flex; align-items: center; gap: 14px; }
  .pt-hint {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--faint); font-size: 12px; white-space: nowrap;
  }
  .pt-submit {
    display: grid; place-items: center; width: 38px; height: 38px; flex: none;
    background: var(--gold-grad);
    color: #201a0e; border: none; border-radius: 50%; cursor: pointer;
    box-shadow: var(--gold-shadow);
    transition: filter .15s, transform .08s;
  }
  .pt-submit:hover { filter: brightness(1.05); }
  .pt-submit:active { transform: translateY(1px); }
  .pt-submit:disabled { opacity: .5; cursor: not-allowed; filter: none; }
  .pt-submit .ic { width: 17px; height: 17px; stroke-width: 2.4; }

  /* ---- barre de prompt ---- */
  .promptbar { position: relative; }
  .pb-fields { margin-bottom: 14px; }
  .pb-input { display: flex; align-items: center; gap: 10px; }
  .pb-ic { font-size: 17px; opacity: .75; flex: none; }
  .pb-input input {
    border: none; background: none; box-shadow: none !important;
    padding: 12px 0; font-size: 16px;
  }
  .pb-name {
    border: none; background: none; box-shadow: none !important;
    padding: 4px 0 6px; font-size: 14px; color: var(--text);
  }
  .pb-drop { display: block; }
  .pb-drop .drop { margin-top: 4px; padding: 16px; }

  .pb-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding-top: 14px; border-top: 1px solid var(--border); flex-wrap: wrap;
  }
  .pb-chips { display: flex; gap: 8px; flex-wrap: wrap; }
  .chip {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--well); border: 1px solid var(--border); color: var(--muted);
    font-family: inherit; font-size: 13px; font-weight: 550;
    padding: 8px 12px; border-radius: 10px; cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
  }
  .chip:hover { color: var(--text); border-color: var(--border-2); }
  .chip.active { color: var(--sand); border-color: var(--sand); background: var(--sand-soft); }
  .chip-thumb {
    width: 18px; height: 18px; border-radius: 5px; flex: none;
    background: var(--well); background-size: cover; background-position: center;
    box-shadow: inset 0 0 0 1px var(--border-2);
  }
  .swatch { width: 16px; height: 16px; border-radius: 5px; flex: none; border: 1px solid var(--border-2); background: var(--well); }
  .pb-submit { width: auto; margin: 0; padding: 11px 22px; }

  /* popovers des puces */
  .popover {
    position: absolute; left: 0; right: 0; top: calc(100% + 10px);
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border-2); border-radius: 16px; padding: 18px;
    box-shadow: var(--shadow); z-index: 25; animation: pop .18s ease;
  }
  .popover[hidden] { display: none; }
  .pop-title { font-size: 13px; font-weight: 650; color: var(--sand); margin-bottom: 14px; }
  .pop-field { margin-bottom: 14px; }
  .pop-field:last-child { margin-bottom: 0; }
  .popover .phone { margin-top: 14px; }

  /* source : URL ou import de projet */
  .pb-or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 12px; margin: 12px 2px; }
  .pb-or::before, .pb-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
  .pb-import-row { display: flex; align-items: center; gap: 12px; }
  .pb-import {
    flex: 1; display: inline-flex; align-items: center; gap: 12px;
    background: var(--sand-soft); border: 1px dashed var(--sand-dim); color: var(--sand);
    font-family: inherit; font-size: 14.5px; font-weight: 650; text-align: left;
    padding: 14px 16px; border-radius: 12px; cursor: pointer;
    transition: background .15s, border-color .15s;
  }
  .pb-import:hover, .pb-fields.drag .pb-import { background: rgba(224,192,125,0.18); border-color: var(--sand); }
  .pb-import-ic { font-size: 20px; flex: none; }
  .pb-import small { display: block; font-size: 11.5px; font-weight: 450; color: var(--sand-dim); margin-top: 2px; }
  .pb-zip {
    background: none; border: 1px solid var(--border); color: var(--muted);
    font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 10px 12px;
    border-radius: 10px; cursor: pointer; flex: none;
  }
  .pb-zip:hover { color: var(--sand); border-color: var(--border-2); }
  .pb-project {
    display: flex; align-items: center; gap: 10px;
    background: var(--sand-soft); border: 1px solid var(--sand-dim);
    border-radius: 12px; padding: 12px 14px;
  }
  .pb-project-ic { font-size: 18px; flex: none; }
  .pb-project-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--sand);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pb-project-edit { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 4px; }
  .pb-project-edit:hover { color: var(--sand); }
  .pb-project-clear { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 4px; }
  .pb-project-clear:hover { color: var(--err); }
  .pb-fields.drag { outline: 2px dashed var(--sand); outline-offset: 8px; border-radius: 8px; }

  /* ---- maquette : entrée unifiée + sections ---- */
  .import-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 26; width: 230px;
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border-2); border-radius: 13px; padding: 6px;
    box-shadow: var(--shadow); animation: pop .16s ease;
  }
  .import-menu[hidden] { display: none; }
  .import-opt {
    display: flex; align-items: flex-start; gap: 10px;
    width: 100%; text-align: left; cursor: pointer;
    background: none; border: none; border-radius: 9px; padding: 10px 12px;
    color: var(--text); font-family: inherit; font-size: 14px; font-weight: 600;
    transition: background .12s, color .12s;
  }
  .import-opt:hover { background: var(--sand-soft); color: var(--sand); }
  .import-opt .import-opt-ic { margin-top: 2px; }
  .import-opt small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: var(--faint); }
  .import-opt small code { color: var(--muted); }

  .section { margin-top: 20px; }
  .section-label { display: block; font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 10px; letter-spacing: -0.01em; }
  .section-label .req { color: var(--err); }
  .section-label .opt { color: var(--faint); font-weight: 500; font-size: 12.5px; }

  /* effet "pile de cartes" derrière le bouton -> impression de dépliable */
  .custom-stack { position: relative; margin-top: 16px; }
  .custom-stack::before, .custom-stack::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
    border: 1px solid var(--border-2); border-radius: 13px;
    background: linear-gradient(180deg, rgba(224,192,125,0.07), rgba(224,192,125,0.02));
    box-shadow: 0 6px 22px -14px rgba(224,192,125,0.45);
    z-index: 0; transition: transform .25s ease, opacity .25s ease;
  }
  .custom-stack::before { transform: translateY(-7px) scaleX(0.955); }
  .custom-stack::after  { transform: translateY(-14px) scaleX(0.91); opacity: .65; }
  .custom-stack.open::before, .custom-stack.open::after { transform: translateY(0) scaleX(1); opacity: 0; }

  .custom-toggle {
    position: relative; z-index: 1;
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border-2); color: var(--sand);
    font-family: inherit; font-size: 15px; font-weight: 650; text-align: left;
    padding: 15px 18px; border-radius: 13px; cursor: pointer;
    box-shadow: 0 12px 30px -16px rgba(224,192,125,0.55);
    transition: border-color .15s, background .15s;
  }
  .custom-toggle:hover { border-color: var(--sand); }
  .custom-toggle small { display: block; font-size: 12px; font-weight: 450; color: var(--sand-dim); margin-top: 3px; }
  .custom-toggle .chev { transition: transform .2s; font-size: 12px; }
  .custom-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
  .custom-panel {
    margin-top: 10px; padding: 18px;
    background: var(--well); border: 1px solid var(--border); border-radius: 13px;
    animation: pop .2s ease;
  }
  .custom-panel[hidden] { display: none; }

  .pb-generate {
    width: 100%; margin-top: 24px; font-size: 16px; padding: 16px;
    box-shadow: 0 0 0 1px var(--sand-dim), 0 16px 44px -16px rgba(224,192,125,0.6);
  }
  .pb-eta { text-align: center; color: var(--faint); font-size: 12px; margin-top: 10px; }

  /* ---- galerie ---- */
  .gallery {
    max-width: 1140px; margin: 0 auto; padding: 40px 24px 80px;
  }
  .gallery-panel {
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 24px 60px -30px rgba(0,0,0,0.8);
    backdrop-filter: blur(8px);
  }
  .gallery-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
  .gallery-title { font-size: 19px; font-weight: 750; margin: 0; flex: 1; min-width: 160px; letter-spacing: -0.01em; }
  .recent-viewall {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: none; cursor: pointer;
    color: var(--sand); font-family: inherit; font-size: 13px; font-weight: 650;
  }
  .recent-viewall:hover { color: var(--sand-dim); }
  .recent-viewall[hidden] { display: none; }
  .recent-viewall .ic { width: 14px; height: 14px; }
  .tabs { display: flex; gap: 4px; background: var(--well); border: 1px solid var(--border); border-radius: 10px; padding: 4px; }
  .tab {
    border: none; background: transparent; cursor: pointer; font-family: inherit;
    color: var(--muted); font-size: 13px; font-weight: 550; padding: 7px 13px; border-radius: 7px;
    transition: color .15s, background .15s;
  }
  .tab:hover { color: var(--text); }
  .tab.active { background: var(--sand-soft); color: var(--sand); }
  .gallery-foot { text-align: center; color: var(--faint); font-size: 12px; margin: 18px 0 0; }
  .gallery-foot code { color: var(--muted); }

  /* sélecteur de mode */
  .seg {
    display: flex; gap: 4px; margin-bottom: 18px;
    background: var(--well); border: 1px solid var(--border);
    border-radius: 11px; padding: 4px;
  }
  .seg button {
    flex: 1; border: none; background: transparent; cursor: pointer;
    color: var(--muted); font-size: 13.5px; font-weight: 550;
    padding: 9px; border-radius: 8px; font-family: inherit;
    transition: background .15s, color .15s;
  }
  .seg button:hover { color: var(--text); }
  .seg button.active {
    background: var(--sand-soft); color: var(--sand);
  }

  /* zone d'upload */
  .drop {
    border: 1px dashed var(--border-2); border-radius: 11px;
    padding: 20px; text-align: center; cursor: pointer;
    color: var(--muted); font-size: 13.5px; background: var(--well);
    transition: border-color .15s, background .15s, color .15s;
  }
  .drop:hover, .drop.over { border-color: var(--sand); color: var(--sand); background: var(--sand-soft); }
  .drop strong { color: var(--text); font-weight: 600; }
  .drop .file-name { color: var(--sand); font-weight: 600; display: block; margin-top: 6px; }
  .drop input[type=file] { display: none; }
  .drop-btns { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
  .drop-btns button {
    border: 1px solid var(--border-2); background: rgba(224,192,125,.06);
    color: var(--sand-dim); font-family: inherit; font-size: 12.5px; font-weight: 600;
    padding: 8px 14px; border-radius: 9px; cursor: pointer; transition: color .15s, border-color .15s, background .15s;
  }
  .drop-btns button:hover { color: var(--sand); border-color: var(--sand); background: var(--sand-soft); }

  .field { margin-bottom: 16px; }
  .field:last-of-type { margin-bottom: 0; }
  label {
    display: block; font-size: 12.5px; font-weight: 550;
    color: var(--muted); margin-bottom: 7px;
    letter-spacing: 0.01em;
  }
  .hint { color: var(--faint); font-weight: 450; }

  input {
    width: 100%;
    background: var(--well);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 15px;
    padding: 11px 13px;
    border-radius: 10px;
    transition: border-color .15s, box-shadow .15s, background .15s;
    font-family: inherit;
  }
  input::placeholder { color: var(--faint); }
  input:focus {
    outline: none;
    border-color: var(--border-2);
    box-shadow: 0 0 0 3px var(--sand-soft);
    background: var(--well);
  }
  input:invalid:not(:placeholder-shown) { border-color: rgba(221,139,120,0.4); }

  .row { display: flex; gap: 12px; }
  .row .field { flex: 1; }

  /* advanced toggle */
  .adv-toggle {
    background: none; border: none; color: var(--sand-dim);
    font-size: 13px; cursor: pointer; padding: 6px 0; margin-top: 4px;
    font-family: inherit; display: inline-flex; align-items: center; gap: 6px;
  }
  .adv-toggle:hover { color: var(--sand); }
  .adv-toggle .chev { transition: transform .2s; font-size: 10px; }
  .adv-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }
  .adv { display: none; margin-top: 14px; }
  .adv.open { display: block; }

  button.submit {
    width: 100%; margin-top: 22px;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    background: var(--gold-grad); box-shadow: var(--gold-shadow);
    color: #201a0e;
    font-size: 15px; font-weight: 650;
    border: none; border-radius: 11px;
    padding: 13px; cursor: pointer;
    transition: transform .08s, filter .15s, opacity .15s;
    font-family: inherit;
  }
  button.submit:hover { filter: brightness(1.05); }
  button.submit:active { transform: translateY(1px); }
  button.submit:disabled { opacity: .5; cursor: not-allowed; filter: none; }

  .form-error {
    color: var(--err); font-size: 13px; margin-top: 12px;
    min-height: 0; text-align: center;
  }

  /* ---- interrupteur (toggle) ---- */
  .switch-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    cursor: pointer; padding: 4px 0;
  }
  .switch-row .switch-label { font-size: 13.5px; color: var(--text); font-weight: 500; }
  .switch-row .switch-label small { display: block; font-size: 11.5px; color: var(--faint); font-weight: 400; margin-top: 1px; }
  .switch {
    position: relative; flex: none; width: 42px; height: 24px; border-radius: 999px;
    background: var(--well); border: 1px solid var(--border-2); transition: background .18s;
  }
  .switch::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; border-radius: 50%; background: var(--muted);
    transition: transform .18s, background .18s;
  }
  .switch-row input { position: absolute; opacity: 0; pointer-events: none; }
  .switch-row input:checked + .switch { background: var(--sand-soft); border-color: var(--sand); }
  .switch-row input:checked + .switch::after { transform: translateX(18px); background: var(--sand); }

  /* ---- apparence (icône + splash) ---- */
  .appearance { display: flex; gap: 16px; align-items: stretch; }
  .appearance-controls { flex: 1; display: flex; flex-direction: column; gap: 14px; }
  .icon-tile {
    display: flex; align-items: center; gap: 12px; cursor: pointer;
    background: var(--well); border: 1px solid var(--border); border-radius: 12px;
    padding: 10px; color: var(--muted); font-family: inherit; text-align: left;
    transition: border-color .15s;
  }
  .icon-tile:hover { border-color: var(--border-2); }
  .icon-img {
    width: 46px; height: 46px; border-radius: 11px; flex: none;
    background: linear-gradient(160deg, #e6c98a, #c9a86a);
    background-size: cover; background-position: center;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
  }
  .icon-edit { font-size: 13px; font-weight: 600; color: var(--text); }
  .icon-tile:hover .icon-edit { color: var(--sand); }

  /* ---- popover de suggestions d'icône (façon sélecteur d'emoji, au survol) ---- */
  .icon-picker { position: relative; display: inline-block; }
  .icon-popover {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border); border-radius: 14px; padding: 12px;
    box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .15s, transform .15s, visibility .15s;
  }
  .icon-picker:hover .icon-popover,
  .icon-popover:hover,
  .icon-popover:focus-within { opacity: 1; visibility: visible; transform: translateY(0); }
  .icon-popover { width: 380px; }
  .icon-popover-label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 8px; }
  .icon-popover-label:not(:first-child) { margin-top: 12px; }
  .icon-popover-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 12px; margin-bottom: 8px;
  }
  .icon-popover-row .icon-popover-label { margin: 0; }
  .icon-refresh {
    background: none; border: none; cursor: pointer; color: var(--muted);
    padding: 2px; display: flex; transition: color .15s, transform .3s;
  }
  .icon-refresh:hover { color: var(--sand); }
  .icon-refresh.spin { animation: icon-refresh-spin .5s ease; }
  .icon-refresh svg { width: 15px; height: 15px; }
  @keyframes icon-refresh-spin { from { transform: rotate(0deg); } to { transform: rotate(180deg); } }
  .icon-brand-row input {
    width: 100%; font-size: 12.5px; padding: 8px 10px; border-radius: 9px;
    background: var(--well); border: 1px solid var(--border); color: var(--text);
    font-family: inherit;
  }
  .icon-brand-preview { margin-top: 8px; }
  .icon-brand-btn {
    width: 100%; height: 56px; border-radius: 11px; border: none; cursor: pointer;
    background: var(--well); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
    display: flex; align-items: center; justify-content: center;
    transition: box-shadow .15s;
  }
  .icon-brand-btn:hover { box-shadow: inset 0 0 0 1px var(--sand); }
  .icon-brand-btn img { max-width: 80%; max-height: 80%; object-fit: contain; }
  .icon-popover-attrib { margin-top: 10px; text-align: center; }
  .icon-popover-attrib a { font-size: 10.5px; color: var(--faint); text-decoration: none; }
  .icon-popover-attrib a:hover { color: var(--muted); }
  .icon-suggestions { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
  .icon-suggestion {
    width: 100%; aspect-ratio: 1; border-radius: 11px; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
    transition: transform .15s, box-shadow .15s;
  }
  :root[data-theme="light"] .icon-suggestion { background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
  .icon-suggestion:hover { transform: translateY(-2px); }
  .icon-suggestion.selected { box-shadow: 0 0 0 2px var(--sand); }
  .icon-suggestion-img { max-width: 78%; max-height: 78%; object-fit: contain; }

  .mini-label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 7px; }
  .color-row { display: flex; gap: 8px; align-items: center; }
  input[type=color] {
    -webkit-appearance: none; appearance: none; border: none; cursor: pointer;
    width: 46px; height: 40px; border-radius: 10px; background: none; padding: 0;
  }
  input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
  input[type=color]::-webkit-color-swatch { border: 1px solid var(--border-2); border-radius: 10px; }
  #splashHex {
    width: 100%; text-transform: uppercase; font-family: ui-monospace, monospace;
    font-size: 13px; padding: 10px 12px;
  }

  .phone { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .phone-screen {
    width: 96px; height: 190px; border-radius: 20px;
    border: 3px solid #2a241a; background: #14110b;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(0,0,0,.4), 0 10px 24px -12px rgba(0,0,0,.7);
    transition: background .2s;
  }
  .phone-icon {
    width: 52px; height: 52px; border-radius: 13px;
    background: linear-gradient(160deg, #e6c98a, #c9a86a);
    background-size: cover; background-position: center;
    box-shadow: 0 6px 16px -6px rgba(0,0,0,.6);
  }
  .phone-name { font-size: 11px; font-weight: 600; color: #ece3d0; max-width: 84px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .phone-caption { font-size: 10.5px; color: var(--faint); letter-spacing: .05em; }

  /* ---- modal de crop ---- */
  .modal {
    position: fixed; inset: 0; z-index: 20; display: none;
    place-items: center; padding: 20px;
    background: rgba(8,6,4,.72); backdrop-filter: blur(3px);
  }
  .modal.open { display: grid; }
  .modal-card {
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border); border-radius: 16px; padding: 22px;
    width: 100%; max-width: 340px; box-shadow: var(--shadow);
    animation: pop .3s cubic-bezier(.2,1.2,.3,1);
  }
  @keyframes pop { from { transform: scale(.94); opacity: 0; } }
  .modal-card h3 { font-size: 17px; margin-bottom: 4px; }
  .modal-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 16px; }

  /* ---- palette de recherche rapide (⌘K) ---- */
  .command-modal { align-items: flex-start; padding-top: 12vh; }
  .command-card { max-width: 560px; padding: 0; overflow: hidden; }
  .command-search {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 18px; border-bottom: 1px solid var(--border); color: var(--faint);
  }
  .command-search input {
    flex: 1; min-width: 0; border: none; background: none; box-shadow: none !important;
    font-size: 15px; color: var(--text); padding: 0; font-family: inherit;
  }
  .command-search .sb-search-kbd { flex: none; }
  .command-results { max-height: 50vh; overflow-y: auto; padding: 8px; }
  .command-empty { padding: 26px 12px; text-align: center; font-size: 13px; color: var(--faint); }
  .command-row {
    display: flex; align-items: center; gap: 12px; padding: 9px 10px;
    border-radius: 10px; cursor: pointer;
  }
  .command-row:hover, .command-row.selected { background: var(--well); }
  .command-row-icon {
    width: 38px; height: 38px; border-radius: 10px; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700; color: rgba(255,255,255,.92);
    overflow: hidden;
  }
  .command-row-icon img { width: 100%; height: 100%; object-fit: cover; }
  .command-row-text { flex: 1; min-width: 0; }
  .command-row-title {
    font-size: 13.5px; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .command-row-sub {
    font-size: 12px; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .command-row-kbd { flex: none; font-size: 12px; color: var(--faint); }
  .pcard.flash { animation: pcard-flash 1.2s ease; }
  @keyframes pcard-flash {
    0%, 100% { box-shadow: none; }
    20% { box-shadow: 0 0 0 2px var(--sand); }
  }
  .crop-stage {
    position: relative; width: 288px; height: 288px; max-width: 100%;
    margin: 0 auto; border-radius: 12px; overflow: hidden; background: var(--well);
    touch-action: none; cursor: grab;
  }
  .crop-stage:active { cursor: grabbing; }
  #cropCanvas { display: block; width: 100%; height: 100%; }
  .crop-frame {
    position: absolute; inset: 0; pointer-events: none;
    box-shadow: 0 0 0 2000px rgba(20,17,11,.55);
    border: 2px solid rgba(224,192,125,.7); border-radius: 10px;
  }
  .zoom-row { display: flex; align-items: center; gap: 10px; margin: 16px 0 4px; color: var(--muted); }
  #zoom { flex: 1; accent-color: var(--sand); }
  .modal-actions { display: flex; gap: 10px; margin-top: 16px; }
  .btn-ghost, .btn-gold {
    flex: 1; border: none; cursor: pointer; font-family: inherit;
    font-size: 14px; font-weight: 600; padding: 11px; border-radius: 11px;
  }
  .btn-ghost { background: transparent; border: 1px solid var(--border-2); color: var(--muted); }
  .btn-ghost:hover { color: var(--text); }

  /* ---- modal de l'éditeur de code (façon VS Code) ----
     Palette figée (--ed-*), volontairement indépendante des variables de
     thème --surface/--text/etc. : l'éditeur reste toujours sombre, même
     quand le reste de l'app est en thème clair. Padding et boutons réduits
     au minimum — pas de gros bouton "Enregistrer"/"Annuler" (Ctrl/Cmd+S et
     Échap/icône × à la place). */
  .editor-card {
    --ed-bg:      #100d0a;
    --ed-surface: #17130f;
    --ed-panel:   #0e0b09;
    --ed-border:  rgba(224, 201, 141, 0.10);
    --ed-text:    #e4dbc8;
    --ed-muted:   #8d8267;
    --ed-faint:   #5f5744;
    --ed-sand:    #e0c07d;
    --ed-sand-soft: rgba(224, 192, 125, 0.12);
    --ed-err:     #dd8b78;
    max-width: 1080px; width: 94vw; padding: 12px;
    display: flex; flex-direction: column;
    background: var(--ed-bg); border-color: var(--ed-border);
  }
  .editor-titlebar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .editor-titlebar h3 { font-size: 13.5px; margin: 0; color: var(--ed-text); }
  .editor-close {
    display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px;
    background: none; border: none; color: var(--ed-muted); cursor: pointer; flex: none;
  }
  .editor-close .ic { width: 15px; height: 15px; }
  .editor-close:hover { color: var(--ed-text); background: var(--ed-surface); }
  .editor-body {
    position: relative; display: flex; height: 68vh; min-height: 380px;
    border: 1px solid var(--ed-border); border-radius: 10px; overflow: hidden;
    background: var(--ed-surface);
  }

  /* -- confirmation à la fermeture, si des changements n'ont pas été appliqués -- */
  .editor-confirm {
    position: absolute; inset: 0; z-index: 5; display: grid; place-items: center;
    background: rgba(8, 6, 4, 0.78); backdrop-filter: blur(2px);
  }
  .editor-confirm[hidden] { display: none; }
  .editor-confirm-box {
    width: 100%; max-width: 300px; padding: 16px; border-radius: 12px;
    background: var(--ed-panel); border: 1px solid var(--ed-border);
    box-shadow: 0 14px 40px -16px rgba(0,0,0,.7);
  }
  .editor-confirm-title { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--ed-text); }
  .editor-confirm-sub { margin: 0 0 14px; font-size: 11.5px; color: var(--ed-muted); }
  .editor-confirm-actions { display: flex; flex-direction: column; gap: 6px; }
  .editor-confirm-btn {
    font-family: inherit; font-size: 12px; font-weight: 600; padding: 8px 10px;
    border-radius: 8px; border: 1px solid var(--ed-border); background: none;
    color: var(--ed-muted); cursor: pointer;
  }
  .editor-confirm-btn:hover { color: var(--ed-text); background: var(--ed-surface); }
  .editor-confirm-btn.ghost { color: var(--ed-err); }
  .editor-confirm-btn.primary { background: var(--ed-sand); color: #201a0e; border-color: transparent; font-weight: 700; }
  .editor-confirm-btn.primary:hover { filter: brightness(1.06); background: var(--ed-sand); }

  /* -- barre latérale : arborescence repliable -- */
  .editor-sidebar {
    flex: none; width: 220px; overflow-y: auto; background: var(--ed-panel);
    border-right: 1px solid var(--ed-border);
  }
  .editor-sidebar-head {
    padding: 8px 10px 4px; font-size: 10px; font-weight: 700; letter-spacing: .08em;
    color: var(--ed-faint); text-transform: uppercase;
  }
  .editor-tree { padding: 2px 4px 8px; }
  .tree-node { display: block; }
  .tree-row {
    display: flex; align-items: center; gap: 5px; width: 100%; text-align: left;
    background: none; border: none; cursor: pointer; color: var(--ed-muted);
    font-family: inherit; font-size: 12px; padding: 3px 6px 3px calc(6px + var(--depth, 0) * 14px);
    border-radius: 5px; white-space: nowrap;
  }
  .tree-row:hover { background: var(--ed-surface); color: var(--ed-text); }
  .tree-file.active { background: var(--ed-sand-soft); color: var(--ed-sand); }
  .tree-chev {
    flex: none; width: 12px; height: 12px; color: var(--ed-faint);
    transition: transform .12s;
  }
  .tree-dir.open .tree-chev { transform: rotate(90deg); }
  .tree-folder-ic { flex: none; width: 13px; height: 13px; color: #d9a94f; fill: none; stroke: currentColor; stroke-width: 1.8; }
  .tree-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .dirty-dot {
    flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--ed-sand);
  }
  .file-badge {
    flex: none; width: 15px; height: 15px; border-radius: 4px; display: grid; place-items: center;
    font-size: 8px; font-weight: 800; line-height: 1; background: rgba(255,255,255,.05);
  }
  .file-badge.small { width: 13px; height: 13px; font-size: 7px; }

  /* -- zone d'édition : onglets + CodeMirror + barre de statut -- */
  .editor-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--ed-surface); }
  .editor-tabs {
    flex: none; display: flex; overflow-x: auto; background: var(--ed-panel);
    border-bottom: 1px solid var(--ed-border);
  }
  .editor-tab {
    display: flex; align-items: center; gap: 5px; flex: none; cursor: pointer;
    padding: 6px 6px 6px 10px; font-size: 11.5px; color: var(--ed-muted);
    border-right: 1px solid var(--ed-border); max-width: 170px;
  }
  .editor-tab.active { background: var(--ed-surface); color: var(--ed-text); }
  .editor-tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .editor-tab-close {
    flex: none; background: none; border: none; color: var(--ed-faint); cursor: pointer;
    font-size: 13px; line-height: 1; padding: 2px 3px; border-radius: 4px;
  }
  .editor-tab-close:hover { color: var(--ed-err); background: var(--ed-panel); }
  .editor-cm { flex: 1; min-height: 0; position: relative; }
  .editor-view-host { display: none; height: 100%; }
  .editor-view-host.shown { display: block; }
  .editor-cm .cm-editor { height: 100%; font-size: 12.5px; }
  .editor-cm .cm-scroller { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
  .editor-binary { padding: 16px; color: var(--ed-faint); font-size: 13px; }
  .editor-status {
    flex: none; display: flex; align-items: center; gap: 14px; padding: 4px 10px; font-size: 10.5px;
    color: var(--ed-faint); background: var(--ed-panel); border-top: 1px solid var(--ed-border);
  }
  .editor-status-hint { margin-left: auto; }
  .editor-card .form-error { margin-top: 6px; color: var(--ed-err); }
  .btn-gold { background: var(--gold-grad); box-shadow: var(--gold-shadow); color: #201a0e; }

  /* ---- galerie de builds (cartes) ---- */
  .builds {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
  .builds-empty {
    grid-column: 1 / -1;
    text-align: center; color: var(--faint); font-size: 13.5px;
    padding: 44px 0;
  }
  @keyframes rise { from { opacity: 0; transform: translateY(6px); } }

  .pcard {
    position: relative;
    background: #000;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    display: flex; flex-direction: column;
    animation: rise .3s ease;
    transition: border-color .15s, transform .15s;
  }
  :root[data-theme="light"] .pcard { background: #fff; }
  .pcard:hover { border-color: var(--border-2); transform: translateY(-2px); }
  .pcard { cursor: pointer; }
  .pcard-thumb { position: relative; height: 120px; display: grid; place-items: center; }
  .pcard-initial {
    font-size: 42px; font-weight: 800; color: rgba(255,255,255,0.92);
    text-shadow: 0 2px 14px rgba(0,0,0,0.4);
  }
  .pcard-icon {
    width: 58px; height: 58px; border-radius: 15px; object-fit: contain;
    box-shadow: 0 8px 20px -8px rgba(0,0,0,0.65);
  }
  .pcard-shot {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: top center;
    animation: fade .4s ease;
  }
  @keyframes fade { from { opacity: 0; } }
  .pcard-pill { position: absolute; top: 10px; left: 10px; z-index: 1; }
  .pcard-main { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
  .pcard-info { flex: 1; min-width: 0; }
  .pcard-title {
    font-size: 14px; font-weight: 650; margin: 0 0 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pcard-sub {
    font-size: 12px; color: var(--muted); margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pcard-offline { display: inline-flex; align-items: center; gap: 4px; }
  .pcard-offline .ic { width: .95em; height: .95em; }
  .pcard .progress-wrap { padding: 0 14px 14px; margin-top: 0; }

  /* ---- modal de détail d'un build ---- */
  .detail-card { max-width: 420px; padding: 0; overflow: visible; }
  .detail-topchip {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--sand); background: var(--surface-2); border: 1px solid var(--border-2);
    padding: 5px 14px; border-radius: 999px; white-space: nowrap;
  }
  .detail-body { border-radius: 16px; overflow: hidden; }
  .detail-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 14px 0;
  }
  .detail-close {
    display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
    background: none; border: none; color: var(--muted); cursor: pointer;
  }
  .detail-close:hover { color: var(--text); background: var(--well); }
  .detail-preview {
    position: relative; margin: 12px 14px 0; height: 190px; border-radius: 12px;
    overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 16px; gap: 6px;
  }
  .detail-preview-shot {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  }
  .detail-preview::after {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55));
  }
  .detail-preview > * { position: relative; z-index: 1; }
  .detail-preview-name { font-size: 22px; font-weight: 800; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
  .detail-preview-sub { font-size: 12.5px; color: rgba(255,255,255,.82); }
  .detail-play {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
    background: var(--ok); color: #16321f; font-weight: 700; font-size: 13px;
    padding: 9px 18px; border-radius: 999px; text-decoration: none; border: none; cursor: pointer;
  }
  .detail-play:hover { filter: brightness(1.05); }
  .detail-play .ic { width: 14px; height: 14px; }
  .detail-foot { padding: 14px; }
  .detail-foot-name { font-size: 17px; font-weight: 750; margin: 0 0 2px; }
  .detail-foot-src {
    display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--faint); margin-bottom: 14px;
  }
  .detail-foot-src .ic { width: 13px; height: 13px; }
  .detail-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; }
  .detail-action {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 10px 4px; border-radius: 11px; border: 1px solid var(--border-2);
    background: none; color: var(--muted); cursor: pointer; font-family: inherit;
    text-decoration: none;
  }
  .detail-action:hover { color: var(--text); border-color: var(--sand-dim); }
  .detail-action .ic { width: 16px; height: 16px; }
  .detail-action-label { font-size: 9.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; text-align: center; }
  .detail-action.primary {
    background: var(--gold-grad); color: #201a0e; border-color: transparent; box-shadow: var(--gold-shadow);
  }
  .detail-action.danger { color: var(--err); border-color: rgba(221,139,120,.3); }
  .detail-action.danger:hover { background: rgba(221,139,120,.1); border-color: var(--err); }
  .detail-action[disabled] { opacity: .35; pointer-events: none; }

  /* ---- menu d'actions groupées d'une carte (⋯) ---- */
  .card-menu {
    position: fixed; z-index: 40; width: 214px;
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border-2); border-radius: 13px; padding: 6px;
    box-shadow: var(--shadow); animation: pop .14s ease;
  }
  .card-menu[hidden] { display: none; }
  .card-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: none; border: none; cursor: pointer; text-decoration: none;
    color: var(--text); font-family: inherit; font-size: 13px; font-weight: 550;
    padding: 8px 10px; border-radius: 9px;
  }
  .card-menu-item:hover { background: var(--sand-soft); color: var(--sand); }
  .card-menu-item .ic { flex: none; color: var(--muted); }
  .card-menu-item:hover .ic { color: var(--sand); }
  .card-menu-item.danger { color: var(--err); }
  .card-menu-item.danger .ic { color: var(--err); }
  .card-menu-item.danger:hover { background: rgba(221,139,120,.1); color: var(--err); }
  .card-menu-sep { height: 1px; margin: 6px 4px; background: var(--border); }

  /* ---- dock flottant des builds en cours ---- */
  .active-dock {
    position: fixed; bottom: 20px; right: 20px; z-index: 30;
    width: 300px; max-width: calc(100vw - 40px);
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border-2); border-radius: 14px;
    box-shadow: 0 20px 50px -20px rgba(0,0,0,0.85);
    overflow: hidden; animation: rise .3s ease;
  }
  .active-dock[hidden] { display: none; }
  .active-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 11px 14px; font-size: 13px; font-weight: 650; color: var(--sand);
    border-bottom: 1px solid var(--border); background: rgba(224,192,125,0.06);
  }
  .active-head .spin {
    width: 12px; height: 12px; border-radius: 50%; flex: none;
    border: 2px solid var(--sand); border-top-color: transparent;
    animation: spin .7s linear infinite; margin-right: 8px;
  }
  .active-head-title { flex: 1; display: flex; align-items: center; }
  .active-head button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; font-family: inherit; padding: 2px 6px; }
  .active-head button:hover { color: var(--sand); }
  .active-head button .ic { transition: transform .2s; }
  .active-dock.collapsed .active-head button .ic { transform: rotate(180deg); }
  .active-list { max-height: 300px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
  .active-dock.collapsed .active-list { display: none; }
  .active-item { padding: 9px 10px; border-radius: 9px; }
  .active-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 7px; }
  .active-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .active-pct { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .active-step { font-size: 11.5px; color: var(--sand-dim); margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
    padding: 4px 10px; border-radius: 999px;
    white-space: nowrap;
  }
  .pill.pending  { color: var(--muted); background: rgba(156,144,121,0.12); }
  .pill.building { color: var(--warn);  background: rgba(224,192,125,0.13); }
  .pill.success  { color: var(--ok);    background: rgba(167,207,149,0.13); }
  .pill.failed   { color: var(--err);   background: rgba(221,139,120,0.13); }

  .dot {
    width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  }
  .pill.building .dot,
  .pill.pending .dot { animation: pulse 1.1s ease-in-out infinite; }
  @keyframes pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

  /* progression temps réel */
  .progress-wrap { margin-top: 10px; }
  .progress-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 6px; gap: 10px;
  }
  .progress-step {
    font-size: 12.5px; color: var(--sand-dim); font-weight: 550;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .progress-pct { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .track {
    height: 5px; border-radius: 999px; background: rgba(224,192,125,0.10);
    overflow: hidden;
  }
  .track > span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--sand-dim), var(--sand));
    border-radius: 999px;
    transition: width .5s cubic-bezier(.4,0,.2,1);
  }

  .steps {
    list-style: none; margin: 12px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 5px;
  }
  .steps li {
    display: flex; align-items: center; gap: 9px;
    font-size: 12.5px; color: var(--faint);
    transition: color .2s;
  }
  .steps li.done { color: var(--muted); }
  .steps li.active { color: var(--text); font-weight: 550; }
  .steps li.failed { color: var(--err); }
  .step-ic {
    width: 15px; height: 15px; flex: none;
    display: grid; place-items: center; font-size: 10px;
    border-radius: 50%;
  }
  .step-ic.queued { color: var(--faint); border: 1px solid var(--border-2); }
  .step-ic.done   { color: var(--ok); }
  .step-ic.failed { color: var(--err); }
  .step-ic.active {
    border: 1.5px solid var(--sand); border-top-color: transparent;
    border-radius: 50%; animation: spin .7s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  .top { display: flex; align-items: center; gap: 14px; width: 100%; }
  .top .info { flex: 1; min-width: 0; }
  .build.expanded { flex-direction: column; align-items: stretch; }

  .actions { display: flex; align-items: center; gap: 6px; }
  .icon-btn {
    display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 9px;
    border: 1px solid var(--border); background: transparent;
    color: var(--muted); cursor: pointer; text-decoration: none;
    transition: color .15s, border-color .15s, background .15s;
    font-size: 15px;
  }
  .icon-btn:hover { color: var(--sand); border-color: var(--border-2); background: var(--sand-soft); }
  .icon-btn.primary { color: #201a0e; background: var(--sand); border-color: transparent; }
  .icon-btn.primary:hover { filter: brightness(1.06); }

  footer {
    text-align: center; margin-top: 40px;
    color: var(--faint); font-size: 12px;
  }
  footer code { color: var(--muted); }