* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:#0b0b0b; --surface:#111; --surface2:#181818; --surface3:#1f1f1f;
  --border:#252525; --border2:#303030;
  --cream:#f0ece2; --cream2:#b8b0a0; --cream3:#666058;
  --gold:#c9a96e; --gold2:#9c7c44; --gold3:#5a4520;
  --sfw:#5a9e72; --sfw-dim:#0f2018;
  --vid:#5a7abf; --vid-dim:#0f1828;
  --nsfw:#bf5a5a; --nsfw-dim:#280f0f;
  --warn:#d4884a; --warn-dim:#261408;
  --modified:#7a6abf; --modified-dim:#1a1828;
  --r:8px;
  /* Largeur de la colonne de gauche des panneaux API. Une seule valeur pour
     Tickets, LinkFORGE, InstaBOT et FanBOT : sans ça la colonne saute de
     300 à 360 px d'une tuile à l'autre (Marcel, 17/07). */
  --api-col:340px;
  --test-col:400px;   /* colonne des zones de test bots + preview LinkFORGE (telephone 360px + marges) */
  /* Polices — surchargées par le thème shadow */
  --font-ui:'Inter','Segoe UI',system-ui,sans-serif;
  --font-display:'DM Serif Display',Georgia,serif;
  /* Lampe qui suit le curseur. `--lamp-teinte` est un triplet RVB SANS
     rgb() autour : il est injecté dans rgba() avec des opacités variables. */
  --mx:50vw; --my:30vh; --lamp:190px; --lamp-teinte:181,123,255;
}

/* ══════════════════════════════════════════════════════════
   THÈME SHADOW — "AEL Studio · Build fantôme"
   Uniquement un override de variables : aucune règle de layout
   n'est touchée, donc aucun risque pour la structure.
   ══════════════════════════════════════════════════════════ */
[data-theme="shadow"] {
  --bg:#08060F; --surface:#120F1D; --surface2:#1A1528; --surface3:#221B34;
  --border:#2A2140; --border2:#3A2E58;
  --cream:#E8E4F0; --cream2:#A79EC2; --cream3:#6E6690;
  --gold:#B57BFF; --gold2:#8B5CD6; --gold3:#2B1C4A;
  --sfw:#3BD9A4; --sfw-dim:#0A2A22;
  --vid:#4DA6FF; --vid-dim:#0A1E33;
  --nsfw:#FF3B5C; --nsfw-dim:#2E0A14;
  --warn:#F0A93B; --warn-dim:#2E1E08;
  --modified:#B57BFF; --modified-dim:#1E1235;
  --r:3px;
  /* Police alignée sur le thème classique (Marcel, 15/07) : le thème
     ne change plus que les couleurs, jamais la typo ni les tailles. */
  --font-ui:'Inter','Segoe UI',system-ui,sans-serif;
  --font-display:'DM Serif Display',Georgia,serif;
}
/* Grille de scan de document en fond */
[data-theme="shadow"] body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.45;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%);
}
/* Les overrides de typo/taille du thème shadow ont été retirés (15/07) :
   brand-name, sidebar-label et mbtn-title gardent la police et la taille
   du thème classique. Ne pas les réintroduire. */
[data-theme="shadow"] .mode-btn.sel-sfw,
[data-theme="shadow"] .mode-btn.sel-nsfw,
[data-theme="shadow"] .mode-btn.sel-vid,
[data-theme="shadow"] .mode-btn.sel-warn,
[data-theme="shadow"] .mode-btn.sel-gold { box-shadow:inset 0 0 22px rgba(181,123,255,.10); }
[data-theme="shadow"] .gen-btn:not(:disabled):hover { box-shadow:0 0 22px rgba(181,123,255,.35); }

/* ══ LAMPE — suit le curseur, activable ══
   Présente dans LES DEUX produits (Victor, 22/07). La couleur ne vit plus
   ici : chaque thème pose `--lamp-teinte` (violet en Shadow, rouge en Tube),
   donc le halo est toujours celui du produit ouvert. Une seule règle à tenir
   au lieu d'une par thème. */
#uv-lamp { display:none; }
[data-lamp="on"] #uv-lamp {
  display:block; position:fixed; inset:0; z-index:850; pointer-events:none;
  background:radial-gradient(circle var(--lamp) at var(--mx) var(--my),
    rgba(var(--lamp-teinte), .16) 0%, rgba(var(--lamp-teinte), .06) 45%, transparent 72%);
  mix-blend-mode:screen;
}
/* Coquille d'app : hauteur FIXE, jamais de scroll de page.
   `min-height:100vh` laissait la page grandir au-delà de l'écran → sur
   un écran plus court, la sidebar droite débordait et se faisait couper
   (Marcel, 15/07). Avec `height` + `overflow:hidden`, ce sont les zones
   internes (.sidebar, .sidebar-right, .views-zone) qui scrollent. */
html { overflow:hidden; }
body { background:var(--bg); color:var(--cream); font-family:var(--font-ui); font-size:14px; line-height:1.6; height:100vh; overflow:hidden; display:flex; flex-direction:column; }

/* TOPBAR */
.topbar { background:var(--surface); border-bottom:1px solid var(--border); padding:0 1.5rem; height:56px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:200; gap:1rem; position:relative; }
/* Bulle centrale (sélecteur d'IA / de chaîne). Centrée en absolu sur grand
   écran ; repasse EN FLUX quand la place manque (voir media queries) pour ne
   plus chevaucher la marque à gauche ni les boutons à droite. */
.header-center { position:absolute; left:50%; transform:translateX(-50%); }
.brand { display:flex; align-items:center; gap:8px; flex-shrink:0; }
/* AEL Studio = l'application. */
.brand-name {
  font-family:var(--font-display); font-size:17px; color:var(--gold);
  font-weight:700; letter-spacing:.06em;
}
.brand-sep { color:var(--cream3); font-size:10px; }
.brand-sub { font-size:11px; color:var(--cream3); letter-spacing:.2em; text-transform:uppercase; font-weight:300; }

/* ACCÈS RAPIDE HEADER */
.nav-quick-link {
  font-size:11px; color:var(--cream3); text-decoration:none;
  padding:4px 10px; border:1px solid var(--border); border-radius:6px;
  background:var(--surface2); transition:all .15s; white-space:nowrap;
  display:flex; align-items:center;
}
.nav-quick-link:hover { color:var(--gold); border-color:var(--gold2); background:var(--gold3); }

/* DROPDOWN */
.pd-wrap { position:relative; }
/* Largeur doublée (Victor, 20/07) : min-width sur le trigger, le nom occupe
   l'espace, la flèche reste collée à droite. Le menu suit la même largeur. */
.pd-trigger { display:flex; align-items:center; gap:8px; background:var(--surface2); border:1px solid var(--border2); border-radius:20px; padding:6px 18px; cursor:pointer; font-family:inherit; color:var(--cream); font-size:13px; font-weight:500; transition:all .15s; white-space:nowrap; min-width:300px; }
/* Le nom occupe toute la largeur restante et reste centré entre la pastille
   et la flèche. Deux sélecteurs et non un : Prompt Engine IA nomme l'élément
   `header-pd-name`, Tube `tb-chan-name` — sans la seconde ligne, le nom de la
   chaîne était collé à gauche dans la bulle (Victor, 22/07). */
.pd-trigger #header-pd-name,
.pd-trigger #tb-chan-name { flex:1; text-align:center; }
.pd-trigger:hover,.pd-trigger.open { border-color:var(--gold); color:var(--gold); }
.pd-dot { width:7px; height:7px; border-radius:50%; background:var(--gold); flex-shrink:0; transition:background .2s; }
.pd-arrow { font-size:10px; color:var(--cream3); transition:transform .2s; }
.pd-trigger.open .pd-arrow { transform:rotate(180deg); }
.pd-menu { display:none; position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--surface); border:1px solid var(--border2); border-radius:var(--r); min-width:400px; z-index:300; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.5); }
.pd-menu.open { display:block; }
.pd-label { padding:.6rem 1rem .4rem; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--cream3); font-weight:500; border-bottom:1px solid var(--border); }
.pd-settings-btn {
  background:none; border:none; cursor:pointer; font-size:12px;
  color:var(--cream3); padding:2px 5px; border-radius:4px;
  transition:all .12s; flex-shrink:0; font-family:inherit;
}
.pd-settings-btn:hover { color:var(--gold); background:var(--gold3); }
.pd-item { display:flex; align-items:center; gap:8px; padding:.625rem 1rem; font-size:13px; color:var(--cream2); cursor:pointer; transition:background .12s; border:none; background:none; width:100%; font-family:inherit; text-align:left; }
.pd-item:hover { background:var(--surface2); color:var(--cream); }
.pd-item.active { color:var(--gold); }
.pd-item-dot { width:6px; height:6px; border-radius:50%; background:var(--cream3); flex-shrink:0; }
.pd-item.active .pd-item-dot { background:var(--gold); }
/* Ligne d'IA avec stylo d'édition à droite */
.pd-item-row { display:flex; align-items:center; gap:8px; padding:.5rem .625rem .5rem 1rem; font-size:13px; color:var(--cream2); transition:background .12s; }
/* Le nom et son étiquette sont empilés : l'étiquette passe SOUS le nom
   (Marcel, 15/07) — à droite elle poussait la ligne en largeur. */
.pd-item-main { align-items:flex-start; }
.pd-item-names { display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; }
.pd-item-dot { margin-top:5px; }
.pd-item-row:hover { background:var(--surface2); }
.pd-item-row.active { color:var(--gold); }
.pd-item-main { flex:1; display:flex; align-items:center; gap:8px; background:none; border:none; color:inherit; font-family:inherit; font-size:inherit; cursor:pointer; text-align:left; padding:0; }
.pd-item-row.active .pd-item-dot { background:var(--gold); }
.pd-item-edit { background:none; border:1px solid transparent; color:var(--cream3); cursor:pointer; font-size:13px; line-height:1; padding:4px 7px; border-radius:5px; transition:all .12s; flex-shrink:0; }
.pd-item-edit:hover { color:var(--gold); background:var(--gold3); border-color:var(--gold2); }
.pd-divider { border:none; border-top:1px solid var(--border); }
.pd-add { display:flex; align-items:center; gap:8px; padding:.625rem 1rem; font-size:12px; color:var(--cream3); cursor:pointer; transition:background .12s; border:none; background:none; width:100%; font-family:inherit; }
.pd-add:hover { background:var(--surface2); color:var(--gold); }

/* Variante sidebar du dropdown */
.pd-sidebar { width:100%; }
.pd-sidebar-trigger { width:100%; border-radius:var(--r) !important; padding:.875rem .875rem .875rem 1rem !important; font-size:13px !important; border-left:3px solid var(--gold2) !important; background:var(--surface2) !important; border-color:var(--border) !important; color:var(--cream) !important; }
.pd-sidebar-trigger:hover { background:var(--surface3) !important; border-color:var(--border2) !important; border-left-color:var(--gold) !important; }
.pd-sidebar-trigger.open { border-left-color:var(--gold) !important; border-color:var(--gold2) !important; background:var(--gold3) !important; color:var(--gold) !important; }
.pd-sidebar-trigger.open .pd-arrow { transform:rotate(180deg); color:var(--gold); }
.pd-menu-sidebar { left:0; transform:none; width:100%; top:calc(100% + 4px); }

/* KEY */
.key-zone { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.key-label { font-size:11px; color:var(--cream3); }
.key-input { background:var(--bg); border:1px solid var(--border2); border-radius:6px; padding:5px 10px; font-size:11px; color:var(--cream2); font-family:monospace; width:155px; outline:none; transition:border-color .15s; }
.key-input:focus { border-color:var(--gold2); }
.key-save { background:transparent; border:1px solid var(--border2); border-radius:6px; padding:5px 10px; font-size:11px; color:var(--cream3); cursor:pointer; font-family:inherit; transition:all .15s; }
.key-save:hover { border-color:var(--gold2); color:var(--gold); }

/* NAV */
.nav-tabs { background:var(--surface); border-bottom:1px solid var(--border); padding:0 1.5rem; display:flex; }
.nav-tab { padding:.75rem 1.125rem; font-size:12px; color:var(--cream3); cursor:pointer; border-bottom:2px solid transparent; transition:all .15s; background:none; border-top:none; border-left:none; border-right:none; font-family:inherit; display:flex; align-items:center; gap:6px; }
.nav-tab:hover { color:var(--cream2); }
.nav-tab.active { color:var(--gold); border-bottom-color:var(--gold); }
.nav-count { background:var(--surface3); color:var(--cream3); font-size:10px; padding:1px 6px; border-radius:10px; }
.nav-tab.active .nav-count { background:var(--gold3); color:var(--gold); }

/* LAYOUT */
.app { flex:1; display:flex; min-height:0; }
.views-zone { flex:1; display:flex; flex-direction:column; min-height:0; min-width:0; }
.view { display:none; flex:1; flex-direction:column; min-height:0; }
.view.active { display:flex; }
.gen-layout { display:flex; flex:1; min-height:0; position:relative; }

/* SIDEBAR GAUCHE */
.sidebar {
  width:260px; flex-shrink:0; border-right:1px solid var(--border);
  padding:1.25rem; display:flex; flex-direction:column; gap:1rem;
  background:var(--surface); overflow-y:auto; overflow-x:hidden;
}
.sidebar-label { font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:var(--cream3); font-weight:500; }

/* SIDEBAR DROITE */
.sidebar-right {
  width:260px; flex-shrink:0; border-left:1px solid var(--border);
  padding:1.25rem; display:flex; flex-direction:column; gap:1rem;
  background:var(--surface); overflow-y:auto; overflow-x:hidden;
}
.mode-list { display:flex; flex-direction:column; gap:6px; }
/* Toutes les tuiles (Type de contenu, Général, Messagerie, Outils) partagent
   exactement les mêmes dimensions : hauteur fixe + description sur 2 lignes. */
.mode-btn { background:var(--surface2); border:1px solid var(--border); border-radius:var(--r); padding:.875rem .875rem .875rem 1rem; cursor:pointer; transition:all .15s; text-align:left; color:var(--cream); font-family:inherit; border-left:3px solid transparent; min-height:76px; display:flex; flex-direction:column; justify-content:center; }
.mode-btn:hover { background:var(--surface3); border-color:var(--border2); }
.mode-btn.sel-sfw  { border-left-color:var(--sfw);  background:var(--sfw-dim);  border-color:var(--sfw); }
.mode-btn.sel-vid  { border-left-color:var(--vid);  background:var(--vid-dim);  border-color:var(--vid); }
.mode-btn.sel-nsfw { border-left-color:var(--nsfw); background:var(--nsfw-dim); border-color:var(--nsfw); }
.mode-btn.sel-warn { border-left-color:var(--warn); background:var(--warn-dim); border-color:var(--warn); }
.mode-btn.sel-gold { border-left-color:var(--gold); background:var(--gold3); border-color:var(--gold2); }
.mbtn-header { display:flex; align-items:center; gap:7px; margin-bottom:3px; }
.mbtn-icon { font-size:14px; }
.mbtn-title { font-size:13px; font-weight:500; }
.mbtn-desc { font-size:11px; color:var(--cream3); line-height:1.4; padding-left:21px; min-height:31px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* min-height:31px = la place de 2 lignes. Elle sert dans l'onglet API où les
   descriptions des tuiles font 1 ou 2 lignes selon le libellé : sans elle, les
   tuiles n'auraient pas toutes la même hauteur.
   Dans le Générateur au contraire, les 3 descriptions tiennent sur 1 ligne et la
   réserve se voyait comme un blanc mort avant « Modèle : … » → neutralisée plus bas. */
/* Pied de tuile : le modèle d'images utilisé pour ce type de contenu.
   Remplace le bloc « Modèles utilisés » qui vivait dans la colonne droite
   (Marcel, 16/07) — l'info est lue là où elle sert, pas à l'autre bout.
   Volontairement dépouillé : une ligne de plus sous la description, même
   graisse, même couleur. Ni filet, ni mise en avant à la sélection. */
.mbtn-model { font-size:11px; color:var(--cream3); line-height:1.4; padding-left:21px; }
/* Générateur uniquement : on supprime la réserve de 2e ligne pour coller la ligne
   « Modèle : … » sous la description. Les 3 tuiles gardent la même hauteur entre elles. */
#view-generator .mbtn-desc { min-height:0; }
.mbtn-badge { display:inline-block; margin-top:6px; margin-left:21px; font-size:10px; padding:1px 7px; border-radius:4px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; }
.badge-sfw  { background:var(--sfw-dim);  color:var(--sfw);  border:1px solid var(--sfw); }
.badge-vid  { background:var(--vid-dim);  color:var(--vid);  border:1px solid var(--vid); }
.badge-nsfw { background:var(--nsfw-dim); color:var(--nsfw); border:1px solid var(--nsfw); }

/* TOOLTIP D'AIDE — badge ? avec bulle au survol */
/* Les bulles d'aide « ? » ont été retirées → voir la doc « Glossaire · Termes techniques » */

/* GEN BTN */
.gen-btn-wrap { margin-top:auto; display:flex; flex-direction:column; gap:6px; }
.gen-btn { width:100%; background:var(--gold3); border:1px solid var(--gold2); border-radius:var(--r); padding:1.25rem 1rem; font-size:15px; font-weight:600; color:var(--gold); cursor:pointer; font-family:inherit; transition:all .15s; display:flex; align-items:center; justify-content:flex-start; gap:8px; letter-spacing:.02em; }
.gen-btn:hover { background:var(--gold2); color:#000; }
.gen-btn:disabled { opacity:.4; cursor:not-allowed; }
.test-btn { width:100%; background:transparent; border:1px dashed var(--border2); border-radius:var(--r); padding:.5rem; font-size:11px; color:var(--cream3); cursor:pointer; font-family:inherit; transition:all .15s; }
.test-btn:hover { border-color:var(--warn); color:var(--warn); }
.val-alert { background:var(--warn-dim); border:1px solid var(--warn); border-radius:var(--r); padding:.625rem .875rem; font-size:11px; color:var(--warn); display:none; margin-top:4px; line-height:1.5; }
.val-alert.show { display:block; }

/* OVERRIDE (déroulant) */
.override-wrap { border:1px solid var(--border2); border-radius:var(--r); overflow:hidden; background:var(--surface2); }
.override-toggle {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:transparent; border:none; padding:.7rem .875rem;
  font-size:11px; font-weight:500; color:var(--vid); font-family:inherit;
  cursor:pointer; text-align:left; transition:background .15s;
}
.override-toggle:hover { background:var(--surface3); }
.override-body { padding:.75rem .875rem; border-top:1px solid var(--border2); display:flex; flex-direction:column; gap:.5rem; }
.override-block-title { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--vid); font-weight:500; }
.override-block textarea,
.override-body textarea {
  width:100%; background:var(--bg); border:1px solid var(--border);
  border-radius:6px; outline:none; font-size:12px; color:var(--cream);
  font-family:inherit; line-height:1.65; resize:vertical; padding:.5rem .625rem;
  min-height:120px; transition:border-color .15s; box-sizing:border-box;
}
.override-body textarea:focus { border-color:var(--vid); }
.override-body textarea::placeholder { color:var(--cream3); font-style:italic; }
.override-row { display:flex; align-items:center; gap:8px; }
.override-row-label { font-size:11px; color:var(--cream3); white-space:nowrap; }
.override-qty-select {
  background:var(--surface); border:1px solid var(--border2);
  border-radius:6px; padding:4px 8px; font-size:12px;
  color:var(--cream); font-family:inherit; outline:none; cursor:pointer;
  transition:border-color .15s; width:52px; text-align:center;
}
.override-qty-select:focus { border-color:var(--gold); }
.override-qty-hint { font-size:11px; color:var(--cream3); flex:1; }
.override-gen-btn {
  width:100%; background:var(--gold3); border:1px solid var(--gold2);
  border-radius:6px; padding:.55rem; font-size:12px; font-weight:500;
  color:var(--gold); cursor:pointer; font-family:inherit; transition:all .15s;
}
.override-gen-btn:hover { background:var(--gold2); color:#000; }
.override-gen-btn:disabled { opacity:.4; cursor:not-allowed; }
.override-gen-btn:disabled:hover { background:var(--gold3); color:var(--gold); border-color:var(--gold2); }
.override-clear-btn {
  background:none; border:none; cursor:pointer; font-size:10px;
  color:var(--cream3); font-family:inherit; transition:color .15s; padding:0;
}
.override-clear-btn:hover { color:var(--nsfw); }

/* OUTPUT */
.main-output { flex:1; overflow:hidden; min-width:0; display:flex; flex-direction:column; }
#gen-standard-view { padding:1.5rem; flex:1; overflow-y:auto; height:100%; display:flex; flex-direction:column; }
#gen-lora-view { flex:1; display:flex; flex-direction:column; min-height:0; overflow:hidden; height:100%; }
.notice { background:var(--warn-dim); border-left:3px solid var(--warn); border-radius:0 var(--r) var(--r) 0; padding:.7rem 1rem; font-size:11.5px; color:var(--cream2); margin-bottom:1.25rem; }
.notice strong { color:var(--warn); }
.notice { flex-shrink:0; }
.state-idle { display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; min-height:300px; gap:10px; text-align:center; color:var(--cream3); }
.idle-glyph { font-family:var(--font-display); font-size:42px; color:var(--border2); }
.idle-text { font-size:12px; line-height:1.7; }
.state-loading { display:none; flex:1; align-items:center; justify-content:center; min-height:300px; gap:10px; }
.dots { display:flex; gap:5px; }
.dot { width:5px; height:5px; border-radius:50%; background:var(--gold2); animation:pulse 1.2s ease-in-out infinite; }
.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}
@keyframes pulse{0%,80%,100%{opacity:.2;transform:scale(.7)}40%{opacity:1;transform:scale(1)}}
.loading-text { font-size:12px; color:var(--cream3); }
.state-results { display:none; }
.results-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.results-meta { font-size:11px; color:var(--cream3); }
.results-meta strong { color:var(--gold); font-weight:500; }
.results-actions { display:flex; gap:6px; }
.act-btn { background:transparent; border:1px solid var(--border2); border-radius:6px; padding:5px 12px; font-size:11px; color:var(--cream3); cursor:pointer; font-family:inherit; transition:all .15s; }
.act-btn:hover { border-color:var(--gold2); color:var(--gold); }
.act-btn.primary { background:var(--gold3); border-color:var(--gold2); color:var(--gold); font-weight:500; }
.act-btn.primary:hover { background:var(--gold2); color:#000; }

/* PROMPT BLOCKS */
.prompt-block { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--border2); border-radius:0 var(--r) var(--r) 0; margin-bottom:10px; overflow:hidden; transition:border-left-color .15s; }
.prompt-block:hover { border-left-color:var(--gold2); }
.pb-number { font-size:10px; letter-spacing:.2em; color:var(--cream3); text-transform:uppercase; padding:.6rem 1rem 0; font-weight:500; }
.pb-histoire { padding:.5rem 1rem .75rem; font-size:12.5px; color:var(--cream2); line-height:1.7; font-style:italic; }
.pb-divider { border:none; border-top:1px solid var(--border); margin:0 1rem; }
.pb-prompt-label { padding:.6rem 1rem .25rem; font-size:10px; letter-spacing:.15em; color:var(--gold2); text-transform:uppercase; font-weight:500; }
.pb-prompt-text { padding:0 1rem .875rem; font-size:12px; color:var(--cream); line-height:1.75; font-family:'Courier New',monospace; word-break:break-word; white-space:pre-wrap; }
.pb-footer { background:var(--surface2); padding:.5rem 1rem; display:flex; justify-content:flex-end; gap:6px; border-top:1px solid var(--border); }
.copy-btn { background:transparent; border:1px solid var(--border2); border-radius:5px; padding:3px 10px; font-size:10px; color:var(--cream3); cursor:pointer; font-family:inherit; transition:all .15s; }
.copy-btn:hover { color:var(--gold); border-color:var(--gold2); }
.params-box { background:var(--bg); border:1px solid var(--border); border-left:3px solid var(--gold2); border-radius:0 var(--r) var(--r) 0; padding:1rem 1.125rem; margin-top:4px; }
.params-title { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold2); font-weight:500; margin-bottom:.6rem; }
.params-content { font-size:12px; color:var(--cream2); line-height:1.8; white-space:pre-wrap; font-family:'Courier New',monospace; }

/* HISTORY */
/* Colonne flex : l'en-tête garde sa hauteur, #history-list prend le reste.
   Sans ça, .history-empty (hauteur fixe) se collait sous l'en-tête au lieu
   d'être centré, contrairement à l'état vide du Générateur (Marcel, 16/07). */
.history-view { padding:1.5rem 2rem; flex:1; overflow-y:auto; display:flex; flex-direction:column; }
#history-list { flex:1; min-height:0; display:flex; flex-direction:column; }
.history-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.history-title { font-family:var(--font-display); font-size:16px; color:var(--gold); }
.history-filters { display:flex; gap:6px; margin-bottom:1.25rem; flex-wrap:wrap; }
.filter-btn { background:transparent; border:1px solid var(--border2); border-radius:16px; padding:3px 12px; font-size:11px; color:var(--cream3); cursor:pointer; font-family:inherit; transition:all .15s; }
.filter-btn:hover { border-color:var(--gold2); color:var(--gold); }
.filter-btn.active { background:var(--gold3); border-color:var(--gold2); color:var(--gold); }
.history-clear { background:transparent; border:1px solid var(--border2); border-radius:6px; padding:5px 12px; font-size:11px; color:var(--cream3); cursor:pointer; font-family:inherit; transition:all .15s; }
.history-clear:hover { border-color:var(--nsfw); color:var(--nsfw); }
/* Placé dans le HAUT de la zone (Victor, 23/07 : « à ¾ en haut »), pas au
   centre — même règle que .tb-empty côté Tube et que .msg-empty / .lib-empty
   ci-dessous, pour que le message tombe au même endroit d'un onglet à l'autre
   ET d'un produit à l'autre. */
.history-empty { display:flex; flex:1; flex-direction:column; align-items:center; justify-content:flex-start; padding-top:15vh; min-height:200px; gap:10px; color:var(--cream3); font-size:12px; text-align:center; }
.history-empty-icon { font-size:30px; opacity:.3; }

/* Section épinglés */
.pinned-section { margin-bottom:1.25rem; }
.pinned-label { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--vid); font-weight:500; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.pinned-count { background:var(--vid-dim); color:var(--vid); border:1px solid var(--vid); border-radius:10px; font-size:10px; padding:1px 7px; }
.pinned-divider { border:none; border-top:1px solid var(--border2); margin:1.25rem 0; }

.history-item { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); margin-bottom:10px; overflow:hidden; }
.history-item.is-fav { border-color:var(--gold2); }
.history-item.is-pinned { border-color:var(--vid); border-left:3px solid var(--vid); }
.hi-header { padding:.75rem 1rem; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); background:var(--surface2); cursor:pointer; gap:8px; transition:background .12s; }
.hi-header:hover { background:var(--surface3); }
.history-item { transition:border-color .12s; }
.history-item:hover { border-color:var(--border2); }
.history-item.is-fav:hover { border-color:var(--gold); }
.history-item.is-pinned:hover { border-color:var(--vid); }
.hi-left { display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex:1; }
.hi-badge { font-size:10px; padding:2px 8px; border-radius:4px; font-weight:500; text-transform:uppercase; letter-spacing:.05em; }
.hi-date { font-size:11px; color:var(--cream3); }
/* Badge « IA propriétaire » affiché seulement en vue Profil maître (Victor 20/07). */
.hi-persona-badge { font-size:10px; padding:2px 8px; border-radius:9px; font-weight:600; background:var(--surface3); border:1px solid var(--border2); color:var(--cream); white-space:nowrap; max-width:160px; overflow:hidden; text-overflow:ellipsis; }
.hi-right { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.fav-btn { background:var(--surface3); border:1px solid var(--border2); border-radius:5px; cursor:pointer; font-size:13px; padding:4px 8px; color:var(--cream3); transition:all .15s; }
.fav-btn:hover { color:var(--gold); border-color:var(--gold2); background:var(--gold3); }
.fav-btn.is-fav { color:var(--gold); border-color:var(--gold2); background:var(--gold3); }
.pin-btn { background:var(--surface3); border:1px solid var(--border2); border-radius:5px; cursor:pointer; font-size:12px; padding:4px 7px; color:var(--cream3); transition:all .15s; }
.pin-btn:hover { color:var(--vid); border-color:var(--vid); background:var(--vid-dim); }
.pin-btn.is-pinned { color:var(--vid); border-color:var(--vid); background:var(--vid-dim); }
.hi-toggle { font-size:10px; color:var(--cream3); transition:transform .2s; }
.hi-toggle.open { transform:rotate(180deg); }
.hi-body { display:none; }
.hi-body.open { display:block; }
.hi-note-zone { padding:.75rem 1rem; border-bottom:1px solid var(--border); background:var(--bg); display:flex; align-items:flex-start; gap:8px; }
.hi-note-icon { font-size:12px; color:var(--cream3); margin-top:2px; flex-shrink:0; }
.hi-note-input { flex:1; background:transparent; border:none; outline:none; font-size:12px; color:var(--cream2); font-family:inherit; line-height:1.5; resize:none; min-height:32px; }
.hi-note-input::placeholder { color:var(--cream3); }
.hi-note-save { background:var(--sfw-dim); border:1px solid var(--sfw); border-radius:5px; padding:5px 12px; font-size:11px; color:var(--sfw); cursor:pointer; font-family:inherit; transition:all .15s; flex-shrink:0; font-weight:500; }
.hi-note-save:hover { background:var(--sfw); color:#000; }
.hi-text-zone { padding:1rem; }
.hi-text { font-size:12px; color:var(--cream2); line-height:1.7; white-space:pre-wrap; }
/* Historique déplié : un bloc distinct par prompt (Victor, 20/07). */
.hi-prompts { display:flex; flex-direction:column; gap:.6rem; }
.hi-prompt-block { border:1px solid var(--border2); border-radius:8px; overflow:hidden; background:var(--surface); border-left:3px solid var(--gold2); }
.hi-prompt-block.hi-prompt-params { border-left-color:var(--nsfw); }
.hi-prompt-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:.4rem .7rem; background:var(--surface2); border-bottom:1px solid var(--border); }
.hi-prompt-num { font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--gold); }
.hi-prompt-block.hi-prompt-params .hi-prompt-num { color:var(--nsfw); }
.hi-prompt-copy { background:none; border:1px solid var(--border2); border-radius:5px; padding:3px 9px; font-size:10.5px; color:var(--cream3); cursor:pointer; font-family:inherit; transition:all .15s; }
.hi-prompt-copy:hover { border-color:var(--gold2); color:var(--gold); background:var(--gold3); }
.hi-prompt-block .hi-text { padding:.7rem; }
.hi-actions { display:flex; justify-content:flex-end; margin-top:.75rem; }
.hi-copy-btn { background:var(--gold3); border:1px solid var(--gold2); border-radius:6px; padding:6px 16px; font-size:12px; font-weight:500; color:var(--gold); cursor:pointer; font-family:inherit; transition:all .15s; }
.hi-copy-btn:hover { background:var(--gold2); color:#000; }

/* ── DONNÉES ── */
.donnees-view { display:flex; flex:1; min-height:0; }

/* Sidebar des onglets Données */
.donnees-tabs { width:220px; flex-shrink:0; border-right:1px solid var(--border); background:var(--surface); padding:1rem 0; display:flex; flex-direction:column; }
.donnees-tabs-label { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--cream3); font-weight:500; padding:.5rem 1.25rem 1rem; }
.d-tab { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1.25rem; font-size:12px; color:var(--cream3); cursor:pointer; transition:all .15s; border-left:3px solid transparent; width:100%; background:none; border-top:none; border-bottom:none; border-right:none; font-family:inherit; text-align:left; gap:8px; }
.d-tab:hover { color:var(--cream2); background:var(--surface2); }
.d-tab.active { color:var(--gold); border-left-color:var(--gold); background:var(--surface2); }
.d-tab-name { flex:1; }
.d-tab-dot { width:6px; height:6px; border-radius:50%; background:var(--modified); display:none; flex-shrink:0; }
.d-tab.has-changes .d-tab-dot { display:block; }

/* Contenu principal Données */
.donnees-content { flex:1; overflow-y:auto; padding:1.5rem 2rem; display:flex; flex-direction:column; gap:0; }

/* Header Données */
.donnees-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; flex-wrap:wrap; gap:8px; }
.donnees-title { font-family:var(--font-display); font-size:16px; color:var(--gold); }
.donnees-actions { display:flex; align-items:center; gap:8px; }

/* Barre « base du serveur » (mode serveur + admin uniquement).
   Volontairement discrète et à part des actions de l'IA courante : elle
   n'agit pas sur une IA mais sur TOUTE la base. */
.srv-backup-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:.5rem .9rem; border-bottom:1px solid var(--border); background:var(--surface2); }
.srv-backup-lbl { font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold2); }
.srv-backup-btn { background:transparent; border:1px solid var(--border2); border-radius:6px;
  padding:5px 11px; font-size:11px; color:var(--cream3); cursor:pointer; font-family:inherit; transition:all .15s; }
.srv-backup-btn:hover { border-color:var(--gold2); color:var(--gold); }
.srv-backup-btn.danger:hover { border-color:var(--nsfw); color:var(--nsfw); }
.srv-backup-btn:disabled { opacity:.45; cursor:progress; }
.srv-backup-last { margin-left:auto; font-size:10px; color:var(--cream3); font-style:italic; }

.export-btn { background:transparent; border:1px solid var(--border2); border-radius:6px; padding:6px 12px; font-size:11px; color:var(--cream3); cursor:pointer; font-family:inherit; transition:all .15s; }
.export-btn:hover { border-color:var(--vid); color:var(--vid); }
.import-btn { background:transparent; border:1px solid var(--border2); border-radius:6px; padding:6px 12px; font-size:11px; color:var(--cream3); cursor:pointer; font-family:inherit; transition:all .15s; }
.import-btn:hover { border-color:var(--sfw); color:var(--sfw); }

/* CANCEL BTN */
.cancel-btn { background:transparent; border:1px solid var(--border2); border-radius:6px; padding:6px 14px; font-size:12px; color:var(--cream3); cursor:pointer; font-family:inherit; transition:all .15s; display:none; }
.cancel-btn:hover { border-color:var(--nsfw); color:var(--nsfw); }
.cancel-btn.show { display:block; }

/* SAVE BTN — grisé par défaut */
.save-btn { background:var(--surface3); border:1px solid var(--border2); border-radius:6px; padding:6px 16px; font-size:12px; font-weight:500; color:var(--cream3); cursor:not-allowed; font-family:inherit; transition:all .2s; opacity:.45; }
.save-btn.dirty { background:var(--gold3); border-color:var(--gold2); color:var(--gold); cursor:pointer; opacity:1; }
.save-btn.dirty:hover { background:var(--gold2); color:#000; }

/* BLOC PROMPT — un seul bloc par onglet */
.prompt-editor-wrap { flex:1; display:flex; flex-direction:column; gap:8px; }

.prompt-editor-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem;
  background:var(--surface2);
  border:1px solid var(--border);
  border-bottom:none;
  border-radius:var(--r) var(--r) 0 0;
}

.peh-left { display:flex; align-items:center; gap:10px; }
.peh-label { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold2); font-weight:500; }
.peh-badge { font-size:10px; padding:2px 8px; border-radius:4px; font-weight:500; }

.peh-modified-badge {
  display:none;
  font-size:10px;
  background:var(--modified-dim);
  color:var(--modified);
  border:1px solid var(--modified);
  border-radius:10px;
  padding:1px 8px;
  font-weight:500;
}
.peh-modified-badge.show { display:inline-block; }

.peh-hint { font-size:11px; color:var(--cream3); }

.prompt-editor-body {
  border:1px solid var(--border);
  border-radius:0 0 var(--r) var(--r);
  overflow:hidden;
  transition:border-color .2s;
}
.prompt-editor-body.is-modified { border-color:var(--modified); }

.prompt-textarea {
  width:100%;
  background:var(--surface);
  border:none;
  outline:none;
  font-size:12.5px;
  color:var(--cream);
  font-family:'Courier New',monospace;
  line-height:1.8;
  padding:1.25rem;
  resize:none;
  min-height:420px;
  display:block;
}
.prompt-textarea:focus { background:var(--surface2); }
.prompt-textarea::placeholder { color:var(--cream3); }

.prompt-editor-footer {
  background:var(--surface2);
  border:1px solid var(--border);
  border-top:none;
  padding:.625rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-radius:0 0 var(--r) var(--r);
}
.pef-chars { font-size:11px; color:var(--cream3); }
.pef-hint { font-size:11px; color:var(--cream3); font-style:italic; }

/* INFO BOX sous le prompt */
.donnees-info-box {
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--gold2);
  border-radius:0 var(--r) var(--r) 0;
  padding:.875rem 1rem;
  margin-top:1rem;
}
.dib-title { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold2); font-weight:500; margin-bottom:.5rem; }
.dib-text { font-size:12px; color:var(--cream2); line-height:1.7; }
.dib-text code { background:var(--surface3); color:var(--gold); font-family:'Courier New',monospace; font-size:11px; padding:1px 5px; border-radius:3px; }

/* MODALS */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.78); z-index:500; align-items:center; justify-content:center; padding:2rem; }
.modal-overlay.open { display:flex; animation:ovIn .18s ease; }
.modal-overlay.closing { animation:ovOut .16s ease forwards; }
.modal-overlay.open > .modal { animation:modalIn .26s cubic-bezier(.2,.9,.3,1.25); }
.modal-overlay.closing > .modal { animation:modalOut .16s ease forwards; }
@keyframes ovIn   { from { opacity:0 } to { opacity:1 } }
@keyframes ovOut  { from { opacity:1 } to { opacity:0 } }
@keyframes modalIn  { from { opacity:0; transform:translateY(14px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes modalOut { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(8px) scale(.98); } }
@media (prefers-reduced-motion: reduce) {
  .modal-overlay.open, .modal-overlay.closing,
  .modal-overlay.open > .modal, .modal-overlay.closing > .modal { animation:none; }
}

/* ── Structure header / body / footer (modals compte, partage, mails…) ── */
.modal-header {
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  margin-bottom:1.25rem; padding-bottom:.875rem; border-bottom:1px solid var(--border);
}
.modal-header .modal-title { margin-bottom:0; }
.modal-close {
  background:none; border:1px solid transparent; color:var(--cream3);
  font-size:15px; line-height:1; cursor:pointer; font-family:inherit;
  width:28px; height:28px; border-radius:6px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition:all .15s;
  margin:-2px -4px 0 0;
}
.modal-close:hover { background:var(--surface2); border-color:var(--border2); color:var(--cream); }
/* Croix de fermeture UNIVERSELLE (23/07). Posée par openModal() sur toute
   modale qui n'a pas déjà son ✕ d'en-tête : plus besoin de scroller jusqu'au
   pied pour trouver un « Annuler ». Ancrée en haut à droite de la modale, au
   repos au-dessus du contenu. */
.modal-overlay > .modal { position:relative; }
.modal-x {
  position:absolute; top:.85rem; right:.85rem; z-index:6;
  background:var(--surface); border:1px solid var(--border); color:var(--cream3);
  font-size:15px; line-height:1; cursor:pointer; font-family:inherit;
  width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; transition:all .15s;
}
.modal-x:hover { background:var(--surface2); border-color:var(--border2); color:var(--cream); }
.modal-body { display:block; }
.modal-footer {
  display:flex; gap:8px; justify-content:flex-end; align-items:center;
  margin-top:1.5rem; padding-top:1.125rem; border-top:1px solid var(--border);
}
.modal { background:var(--surface); border:1px solid var(--border2); border-radius:12px; padding:2rem; width:100%; max-width:520px; max-height:90vh; overflow-y:auto; }
/* Modale à en-tête/pied FIXES : seule la zone centrale défile. Sans ça, sur une
   petite fenêtre (zoom réduit), toute la modale défilait d'un bloc et les
   boutons du pied de la corbeille passaient hors écran (fix 19/07). */
.modal.modal-scroll { display:flex; flex-direction:column; overflow:hidden; }
.modal.modal-scroll > .modal-header,
.modal.modal-scroll > .modal-footer { flex-shrink:0; }
.modal.modal-scroll > .modal-body { flex:1 1 auto; min-height:0; overflow-y:auto; margin:0 -.5rem; padding:0 .5rem; }
.modal-title { font-family:var(--font-display); font-size:18px; color:var(--gold); margin-bottom:.25rem; }
.modal-subtitle { font-size:12px; color:var(--cream3); margin-bottom:1.5rem; line-height:1.6; }
.modal-info { background:var(--gold3); border:1px solid var(--gold2); border-radius:var(--r); padding:.75rem 1rem; font-size:12px; color:var(--gold); line-height:1.6; margin-bottom:1.25rem; }
.modal-warn { background:var(--warn-dim); border:1px solid var(--warn); border-radius:var(--r); padding:.75rem 1rem; font-size:12px; color:var(--warn); line-height:1.6; margin-bottom:1.25rem; }
.modal-section { margin-bottom:1.125rem; }
.modal-label { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--cream3); font-weight:500; margin-bottom:.4rem; display:block; }
.modal-input { width:100%; background:var(--bg); border:1px solid var(--border2); border-radius:var(--r); padding:.6rem .875rem; font-size:13px; color:var(--cream); font-family:inherit; outline:none; transition:border-color .15s; }
.modal-input:focus { border-color:var(--gold2); }
.modal-textarea { width:100%; background:var(--bg); border:1px solid var(--border2); border-radius:var(--r); padding:.6rem .875rem; font-size:12px; color:var(--cream2); font-family:inherit; outline:none; transition:border-color .15s; resize:vertical; min-height:70px; line-height:1.6; }
.modal-textarea:focus { border-color:var(--gold2); color:var(--cream); }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--border); }
.modal-cancel { background:transparent; border:1px solid var(--border2); border-radius:6px; padding:7px 16px; font-size:12px; color:var(--cream3); cursor:pointer; font-family:inherit; transition:all .15s; }
.modal-cancel:hover { color:var(--cream2); }
.modal-submit { background:var(--gold3); border:1px solid var(--gold2); border-radius:6px; padding:7px 20px; font-size:12px; font-weight:500; color:var(--gold); cursor:pointer; font-family:inherit; transition:all .15s; }
.modal-submit:hover { background:var(--gold2); color:#000; }
.modal-danger { background:var(--nsfw-dim); border:1px solid var(--nsfw); border-radius:6px; padding:7px 20px; font-size:12px; font-weight:500; color:var(--nsfw); cursor:pointer; font-family:inherit; transition:all .15s; }
.modal-danger:hover { background:var(--nsfw); color:#fff; }

/* EXPORT */
.export-check-list { display:flex; flex-direction:column; gap:8px; margin-bottom:1rem; }
.export-check { display:flex; align-items:center; gap:10px; padding:.625rem .875rem; background:var(--surface2); border:1px solid var(--border); border-radius:var(--r); }
.export-check input { accent-color:var(--gold); width:14px; height:14px; cursor:pointer; }
.export-check label { font-size:13px; color:var(--cream2); cursor:pointer; flex:1; }

/* TOAST */
/* ══════════════════════════════════════════════════════════
   NOTIFICATIONS — pile unique, bas-centre (Marcel, 15/07).
   Toutes les notifs de l'app passent par ici : erreur, succès,
   info, avertissement. La nouvelle entre PAR LE BAS et pousse
   les précédentes vers le haut ; au-delà de 3, la plus ancienne
   (tout en haut) sort. `flex-direction:column-reverse` fait le
   travail : le DOM reste en ordre chronologique.
   ══════════════════════════════════════════════════════════ */
.toast-stack {
  /* Remontée au-dessus du footer (≈38px), qu'elle chevauchait avant. */
  position:fixed; bottom:4.25rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column-reverse; align-items:center; gap:8px;
  z-index:1200; pointer-events:none; max-width:min(560px, 90vw);
}
.toast {
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:9px;
  background:var(--gold); color:#000; font-size:12px; font-weight:500;
  padding:10px 20px 12px; border-radius:6px; box-shadow:0 8px 28px rgba(0,0,0,.5);
  opacity:0; transform:translateY(14px) scale(.96);
  transition:opacity .2s ease, transform .24s cubic-bezier(.2,.9,.3,1.3), margin .24s ease;
  pointer-events:none; max-width:100%;
}
/* Barre de décompte : se vide de gauche à droite pendant la durée de vie.
   Lancée seulement à l'ajout de .show, sinon l'animation démarrerait
   avant que la notif ne soit visible. */
.toast::after {
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:rgba(0,0,0,.4); transform:scaleX(0); transform-origin:left;
}
.toast.show::after { animation:toastCountdown linear forwards; animation-duration:var(--toast-life,2800ms); }
.toast.leaving::after { animation:none; }
@keyframes toastCountdown { from { transform:scaleX(1); } to { transform:scaleX(0); } }
.toast.show { opacity:1; transform:translateY(0) scale(1); }
/* Sortie par le haut : la plus vieille s'efface en montant. */
.toast.leaving { opacity:0; transform:translateY(-10px) scale(.96); margin-bottom:-42px; }
.toast-ico { font-size:13px; flex-shrink:0; line-height:1; }
.toast-msg { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.toast.t-success { background:var(--sfw);  color:#04120a; }
.toast.t-error   { background:var(--nsfw); color:#fff; }
.toast.t-error::after, .toast.t-info::after { background:rgba(255,255,255,.45); }
.toast.t-warn    { background:var(--warn); color:#160c02; }
.toast.t-info    { background:var(--vid);  color:#04101c; }
#file-import { display:none; }

/* ONGLETS MODAL ADD */
.add-tab {
  flex:1; background:var(--surface2); border:1px solid var(--border);
  border-radius:6px; padding:.45rem .5rem; font-size:11px;
  color:var(--cream3); cursor:pointer; font-family:inherit; transition:all .15s;
}
.add-tab:hover { color:var(--cream); border-color:var(--border2); }
.add-tab.active { background:var(--gold3); border-color:var(--gold2); color:var(--gold); font-weight:500; }

/* FOOTER */
.app-footer {
  text-align:center; font-size:10px; color:var(--cream3);
  padding:.625rem 1rem; border-top:1px solid var(--border);
  background:var(--surface); letter-spacing:.05em; flex-shrink:0;
}

/* ── BOUTON PARAMÈTRES sidebar ── */
.params-btn {
  width:100%; background:var(--gold3); border:1px solid var(--gold2);
  border-radius:var(--r); padding:.7rem 1rem; font-size:12px; font-weight:500;
  color:var(--gold); cursor:pointer; font-family:inherit; transition:all .15s;
  text-align:left; display:flex; align-items:center; justify-content:flex-start; gap:8px;
}
.params-btn:hover { background:var(--gold2); color:#000; }

/* ── QUICK LINKS sidebar droite ── */
.quick-link {
  font-size:11px; color:var(--cream2); text-decoration:none;
  display:flex; align-items:center; gap:5px; padding:5px 8px;
  background:var(--surface3); border-radius:5px; transition:all .15s;
}
.quick-link:hover { color:var(--sfw); background:var(--sfw-dim); }

/* ── ONGLET API — tuiles ── */
.api-tile-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.api-tile {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:1.25rem 1rem;
  cursor:pointer; transition:all .18s; text-align:left;
  display:flex; flex-direction:column; gap:6px;
  border-left:3px solid transparent;
  position:relative; overflow:hidden;
}
.api-tile:hover { border-color:var(--border2); transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,0,0,.3); }
.api-tile.tile-sfw   { border-left-color:var(--sfw); }
.api-tile.tile-sfw:hover   { background:var(--sfw-dim); border-color:var(--sfw); }
.api-tile.tile-nsfw  { border-left-color:var(--nsfw); }
.api-tile.tile-nsfw:hover  { background:var(--nsfw-dim); border-color:var(--nsfw); }
.api-tile.tile-vid   { border-left-color:var(--vid); }
.api-tile.tile-vid:hover   { background:var(--vid-dim); border-color:var(--vid); }
.api-tile.tile-gold  { border-left-color:var(--gold); }
.api-tile.tile-gold:hover  { background:var(--gold3); border-color:var(--gold); }
.api-tile-icon { font-size:22px; margin-bottom:2px; }
.api-tile-title { font-size:13px; font-weight:500; color:var(--cream); }
.api-tile-desc { font-size:11px; color:var(--cream3); line-height:1.5; }
.api-tile-badge {
  display:inline-block; margin-top:4px; font-size:10px; padding:1px 7px;
  border-radius:4px; font-weight:500; letter-spacing:.05em; text-transform:uppercase;
}
.api-tile-status {
  position:absolute; top:.6rem; right:.75rem;
  font-size:9px; padding:2px 7px; border-radius:10px; font-weight:500;
  letter-spacing:.05em; text-transform:uppercase;
}
.status-ok   { background:var(--sfw-dim); color:var(--sfw); border:1px solid var(--sfw); }
.status-wait { background:var(--warn-dim); color:var(--warn); border:1px solid var(--warn); }
.status-soon { background:var(--vid-dim);  color:var(--vid);  border:1px solid var(--vid); }

/* Panel API détail */
.api-panel { display:none; flex:1; min-height:0; flex-direction:column; }
.api-panel.active { display:flex; }

/* ── DOCUMENTATION · GROS POPUP ── */
.doc-overlay { padding:2.5rem; z-index:700; }
.doc-modal {
  background:var(--surface); border:1px solid var(--border2); border-radius:12px;
  width:100%; max-width:1240px; height:100%; max-height:88vh;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.65);
}
.doc-overlay.open > .doc-modal { animation:docIn .3s cubic-bezier(.2,.9,.3,1.2); }
.doc-overlay.closing > .doc-modal { animation:docOut .18s ease forwards; }
@keyframes docIn  { from { opacity:0; transform:translateY(22px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes docOut { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(10px) scale(.985); } }
@media (prefers-reduced-motion: reduce) {
  .doc-overlay.open > .doc-modal, .doc-overlay.closing > .doc-modal { animation:none; }
}
.doc-modal-header {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.125rem 1.5rem; border-bottom:1px solid var(--border);
  background:var(--surface2); flex-shrink:0;
}
.doc-modal-title { font-family:var(--font-display); font-size:17px; color:var(--gold); }
.doc-modal-sub { font-size:11px; color:var(--cream3); margin-top:2px; }
.doc-modal-actions { display:flex; align-items:center; gap:8px; }
.doc-dl-btn {
  background:var(--gold3); border:1px solid var(--gold2); border-radius:6px;
  padding:6px 14px; font-size:11.5px; font-weight:500; color:var(--gold);
  cursor:pointer; font-family:inherit; transition:all .15s; white-space:nowrap;
}
.doc-dl-btn:hover { background:var(--gold2); color:#000; }
.doc-modal-body { display:flex; flex:1; min-height:0; }
.doc-modal-body .doc-sidebar { border-right:1px solid var(--border); background:var(--surface2); }
.doc-modal-body .doc-content { flex:1; min-width:0; overflow-y:auto; }

/* ── DOCUMENTATION ── */
.doc-sidebar {
  width:260px; flex-shrink:0; border-right:1px solid var(--border);
  background:var(--surface); display:flex; flex-direction:column; overflow-y:auto;
}
.doc-sidebar-label { font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:var(--cream3); font-weight:500; padding:1.25rem 1.25rem .5rem; }
.doc-tab {
  display:flex; align-items:center; gap:10px; padding:.75rem 1.25rem;
  font-size:12px; color:var(--cream3); cursor:pointer; transition:all .15s;
  border-left:3px solid transparent; width:100%; background:none;
  border-top:none; border-bottom:none; border-right:none; font-family:inherit; text-align:left;
}
.doc-tab:hover { color:var(--cream2); background:var(--surface2); }
.doc-tab.active { color:var(--gold); border-left-color:var(--gold); background:var(--surface2); }
.doc-tab-icon { font-size:14px; flex-shrink:0; }
.doc-content { flex:1; overflow-y:auto; padding:2rem; max-width:860px; }
.doc-h1 { font-family:var(--font-display); font-size:22px; color:var(--gold); margin-bottom:.5rem; }
.doc-h2 { font-size:13px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold2); font-weight:500; margin:1.75rem 0 .75rem; }
.doc-h3 { font-size:12px; font-weight:600; color:var(--cream); margin:.75rem 0 .25rem; }
.doc-p { font-size:12.5px; color:var(--cream2); line-height:1.8; margin-bottom:.75rem; }
/* `.doc-ul` était utilisée par src/features/docs.js sans jamais avoir été
   stylée : les listes de la documentation prenaient les valeurs par défaut du
   navigateur (retrait nul, texte à 14px). Réglée ici, elle sert aux DEUX
   produits — c'est le point de la mise en commun (Victor, 22/07). */
.doc-ul { margin:0 0 .875rem 1.2rem; }
.doc-ul li { font-size:12.5px; color:var(--cream2); line-height:1.8; margin-bottom:.35rem; }
.doc-ul li strong { color:var(--cream); }
.doc-block {
  background:var(--surface); border:1px solid var(--border);
  border-left:3px solid var(--gold2); border-radius:0 var(--r) var(--r) 0;
  padding:.875rem 1rem; margin-bottom:.75rem;
}
/* Bloc copiable : le bouton se pose dans le coin du bloc de code.
   position:relative sur l'enveloppe, sinon le bouton se calerait sur la page. */
.doc-copy-wrap { position:relative; }
.doc-copy { position:absolute; top:8px; right:8px; z-index:2; background:var(--surface); border:1px solid var(--border2); color:var(--cream3); border-radius:var(--r); padding:.25rem .5rem; font-size:10px; cursor:pointer; font-family:inherit; transition:all .15s; }
.doc-copy:hover { border-color:var(--gold); color:var(--gold); }
.doc-copy-wrap .doc-code { padding-right:4.5rem; white-space:pre-wrap; }
.doc-code {
  background:var(--surface2); border:1px solid var(--border2); border-radius:var(--r);
  padding:.875rem 1rem; font-family:'Courier New',monospace; font-size:11.5px;
  color:var(--cream); line-height:1.75; white-space:pre-wrap; margin-bottom:.75rem;
  overflow-x:auto;
}
.doc-table { width:100%; border-collapse:collapse; margin-bottom:1rem; font-size:12px; }
.doc-table th { background:var(--surface2); color:var(--gold2); font-weight:500; font-size:10px; letter-spacing:.15em; text-transform:uppercase; padding:.5rem .875rem; border-bottom:2px solid var(--border2); text-align:left; }
.doc-table td { padding:.5rem .875rem; border-bottom:1px solid var(--border); color:var(--cream2); vertical-align:top; }
.doc-table tr:last-child td { border-bottom:none; }
.doc-warn { background:var(--warn-dim); border:1px solid var(--warn); border-radius:var(--r); padding:.75rem 1rem; font-size:12px; color:var(--warn); line-height:1.6; margin-bottom:.75rem; }
.doc-tip  { background:var(--sfw-dim);  border:1px solid var(--sfw);  border-radius:var(--r); padding:.75rem 1rem; font-size:12px; color:var(--sfw);  line-height:1.6; margin-bottom:.75rem; }
/* .doc-note existait dans le CSS du téléchargement mais pas ici : même
   piège que les .modal-header de la v48 (classe utilisée, jamais stylée). */
.doc-note { background:var(--vid-dim);  border:1px solid var(--vid);  border-radius:var(--r); padding:.75rem 1rem; font-size:12px; color:var(--vid);  line-height:1.6; margin-bottom:.75rem; }
.doc-badge { display:inline-block; font-size:10px; padding:1px 7px; border-radius:4px; font-weight:500; text-transform:uppercase; letter-spacing:.05em; }
.doc-badge-sfw  { background:var(--sfw-dim); color:var(--sfw); border:1px solid var(--sfw); }
.doc-badge-nsfw { background:var(--nsfw-dim); color:var(--nsfw); border:1px solid var(--nsfw); }
.doc-badge-gold { background:var(--gold3); color:var(--gold); border:1px solid var(--gold2); }

/* ══ POLISH DES 3 ÉCRANS — Calendrier · API/Outils · Documentation (18/07) ══
   Confort et lisibilite SANS toucher au rendu au repos deja valide :
   focus clavier visible, profondeur au survol, bandeau d'orientation en encart. */

/* 1 · Focus clavier coherent (or, comme le reste de l'app). :focus-visible
   ne s'affiche qu'au clavier -> le clic souris ne change rien. Outline seul :
   ni le fond ni les coins de l'element ne bougent. */
#view-calendar :is(button,select,input,[tabindex]):focus-visible,
#view-api :is(button,select,input,textarea,[tabindex]):focus-visible,
.doc-overlay :is(a,button,select,input,textarea,[tabindex]):focus-visible {
  outline:2px solid var(--gold); outline-offset:2px;
}

/* 2 · Profondeur tactile au survol (le repos reste plat, comme valide). */
#view-api .mode-btn:hover { box-shadow:0 6px 16px -6px rgba(0,0,0,.55); }
.cal-create:hover        { box-shadow:0 6px 16px -6px rgba(0,0,0,.55); }

/* 3 · Onglets Doc : on pre-affiche l'accent or au survol (sauf l'actif, qui
   garde son or plein) -> on voit « ce que je vais ouvrir ». */
.doc-tab:not(.active):hover { border-left-color:var(--gold3); }

/* 4 · Bandeau d'orientation API en vrai encart : barre d'accent or a gauche,
   pour qu'il se lise comme un conseil « par ou commencer » et non un pave.
   Qualifie par #view-api pour depasser la regle de base (l.871, meme
   specificite mais plus tardive) — y compris dans la colonne large LinkFORGE. */
#view-api .api-intro { border-left-width:3px; border-left-color:var(--gold); padding-left:1rem; }

/* ── MESSAGERIE ── */
.msg-tab {
  padding:.6rem 1rem; font-size:12px; color:var(--cream3); cursor:pointer;
  border-bottom:2px solid transparent; transition:all .15s; background:none;
  border-top:none; border-left:none; border-right:none; font-family:inherit;
}
.msg-tab:hover { color:var(--cream2); }
.msg-tab.active { color:var(--gold); border-bottom-color:var(--gold); }
.msg-panel { display:none; flex:1; overflow-y:auto; }
.msg-panel.active { display:flex; align-items:center; justify-content:center; }
.msg-empty { text-align:center; padding:2rem; max-width:420px; margin:15vh auto 0; }
.msg-empty-icon { font-size:40px; margin-bottom:1rem; opacity:.3; }
.msg-empty-title { font-family:var(--font-display); font-size:16px; color:var(--gold); margin-bottom:.5rem; }
.msg-empty-text { font-size:12px; color:var(--cream3); line-height:1.7; margin-bottom:1rem; }
/* Panels qui prennent toute la place */
#apipanel-linkforge, #apipanel-instabot, #apipanel-fanbot { flex:1; min-height:0; }

/* ══ RÈGLE DE CENTRAGE DES PANELS API ══
   Un panel API a souvent une colonne-liste à gauche (tickets: 300px,
   LinkFORGE: 340px). Sans compensation, le contenu se centre sur la
   sous-fenêtre restante et paraît décalé à droite.
   Le padding-right = largeur de la colonne recentre le contenu sur TOUTE
   la zone centrale, donc au centre de l'écran.
   `margin:auto` sur l'enfant = centrage vertical ET horizontal, sans
   rogner le haut quand le contenu dépasse (contrairement à align-items). */
.api-center-zone {
  flex:1; min-width:0; overflow-y:auto; display:flex;
  padding: var(--api-pad, 0px);
  /* Compense la colonne-liste pour recentrer sur l'écran entier */
  padding-right: calc(var(--api-pad, 0px) + var(--api-list-w, 0px));
}
.api-center-zone > * { margin:auto; }
.msg-badge { display:inline-block; font-size:10px; padding:3px 12px; border-radius:10px; font-weight:500;
  background:var(--vid-dim); color:var(--vid); border:1px solid var(--vid); }
.msg-badge-wait { background:var(--warn-dim); color:var(--warn); border-color:var(--warn); }

/* ── PILE DE NOTIFICATIONS ── */
#notif-stack {
  position:fixed; bottom:4.5rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:6px; align-items:center;
  z-index:800; pointer-events:none;
}
.notif-item {
  pointer-events:auto;
  background:var(--surface); border:1px solid var(--gold2);
  border-radius:10px; padding:.6rem 1.25rem;
  font-size:12px; color:var(--gold); font-weight:500;
  box-shadow:0 4px 20px rgba(0,0,0,.5);
  display:flex; align-items:center; gap:8px; white-space:nowrap;
  opacity:0; transform:translateY(10px);
  transition:opacity .25s, transform .25s;
}
.notif-item.visible { opacity:1; transform:translateY(0); }
.notif-item.done { border-color:var(--sfw); color:var(--sfw); }
.notif-item.error { border-color:var(--nsfw); color:var(--nsfw); }
.notif-icon { font-size:13px; }
.notif-bar-wrap { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,.1); border-radius:0 0 10px 10px; overflow:hidden; }
.notif-bar { height:100%; background:currentColor; opacity:.5; width:100%; }
.notif-item { position:relative; overflow:hidden; }
.notif-item .notif-text { flex:1; }

/* ── LINKFORGE ÉDITEUR ── */
/* Chaque panneau API porte le même cadre : un en-tête qui le nomme, un corps
   qui défile, un pied d'action. C'était la forme de Tickets, elle est devenue
   la règle (Marcel, 17/07). */
.api-col { width:var(--api-col);flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0; }
/* Sur les bots, c'est la CONFIG qui mérite la place, pas le chat : la zone de
   test ne sert qu'à vérifier un réglage (Marcel, 17/07). */
.api-col-wide { width:auto;flex:1;min-width:0; }

/* ══ MISE EN PAGE DES CONFIGS · InstaBOT · FanBOT · LinkFORGE ══
   (Marcel, 17/07 : « le contenu est nickel, la mise en forme est à chier »)

   AVANT : une grille CSS. Une grille aligne ses lignes sur la section la plus
   HAUTE de la ligne — un bloc de 3 champs à côté d'un bloc de 12 laissait donc
   400 px de vide sous le petit. D'où les trous.

   MAINTENANT : des COLONNES CSS (column-width). Le navigateur remplit une
   colonne de haut en bas, puis passe à la suivante : plus aucun trou intérieur,
   et il s'adapte tout seul à la largeur dispo. `break-inside:avoid` interdit de
   couper une section en deux.

   Et chaque section devient une CARTE : un en-tête coloré, un cadre, un fond.
   On voit où commence et où finit un réglage, au lieu d'une soupe de libellés. */
/* Le corps large ne fait plus QUE défiler verticalement. Le multi-colonnes est
   descendu dans .api-col-cols : posé sur un élément à hauteur AUTO, il équilibre
   ses colonnes vers le BAS au lieu de paginer vers la droite. Sans ça, sur une
   fenêtre courte, les colonnes débordaient à droite et créaient un scroll
   horizontal (Marcel : « pas de scroll droite/gauche, uniquement haut/bas »). */
.api-col-wide .api-col-body {
  display:block;
  padding:1rem;
  overflow-x:hidden;
}
.api-col-cols {
  column-width:288px; column-gap:1rem;
}
.api-col-cols > div {
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  display:flow-root;                 /* pas d'effondrement de marges dans la carte */
  background:var(--surface2); border:1px solid var(--border);
  border-radius:var(--r); margin:0 0 1rem; padding:0 .875rem .875rem;
  overflow:hidden;
}
/* Le libellé de section devient l'en-tête de la carte : il ressort de son
   padding pour toucher les bords. */
.api-col-cols > div > .lf-section-label {
  margin:0 -.875rem .875rem; padding:.5rem .875rem;
  background:var(--surface3); border-bottom:1px solid var(--border);
  font-size:10px; letter-spacing:.16em;
}
/* Rien ne flotte en bas d'une carte : le dernier champ colle au cadre. */
.api-col-cols > div > :last-child { margin-bottom:0; }
.api-col-cols > div > .bot-hint:last-child { margin-top:.5rem; }
.api-col-head { padding:.75rem 1rem;border-bottom:1px solid var(--border);background:var(--surface2);flex-shrink:0;display:flex;align-items:center;gap:10px;min-height:63px; }
.api-col-title { font-size:11px;color:var(--cream3);text-transform:uppercase;letter-spacing:.2em;font-weight:500; }
/* En-tête d'outil enrichi : pastille + nom + plateforme, pour situer l'outil
   d'un coup d'œil au lieu d'un simple libellé perdu en haut (Claria, 18/07). */
.api-col-ico { width:30px;height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px;background:var(--surface3);border:1px solid var(--border2);border-radius:9px; }
.api-col-titles { display:flex;flex-direction:column;gap:1px;min-width:0; }
.api-col-head .api-col-title { font-size:13px;color:var(--gold);letter-spacing:.08em;text-transform:none;font-family:var(--font-display);font-weight:700; }
.api-col-sub { font-size:10px;color:var(--cream3);letter-spacing:.04em; }
.api-col-head-actions { margin-left:auto;display:flex;align-items:center;gap:8px; }

/* Bandeau d'accueil de l'outil : dit ce qu'il fait ET par où commencer.
   column-span:all → il barre toute la largeur, au-dessus des cartes en colonnes.
   Sélecteur qualifié pour l'emporter sur le style « carte » des sections. */
.api-col-cols > .api-intro,
.api-intro { -webkit-column-span:all;column-span:all;background:var(--gold3);border:1px solid var(--gold2);border-radius:var(--r);padding:.7rem .85rem;margin:0 0 1rem;overflow:visible; }
.api-intro-desc { font-size:12px;color:var(--cream);line-height:1.5;margin:0; }
.api-intro-start { font-size:11px;color:var(--gold);line-height:1.5;margin:.4rem 0 0;font-weight:500; }
.api-col-body { flex:1;min-height:0;overflow-y:auto;padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem; }
.api-col-pad { overflow-y:auto;padding:1.5rem;gap:1.25rem; }

/* Pied d'action — gris tant qu'il n'y a rien à écrire, et dès qu'il devient
   cliquable il prend exactement la couleur du bouton Générer (Marcel, 17/07) :
   même or, même survol qui bascule en noir. */
.api-col-save { flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--surface2);border:none;border-top:1px solid var(--border);padding:.75rem 1rem;font-size:12px;font-weight:600;color:var(--cream3);cursor:pointer;font-family:inherit;transition:all .15s;width:100%;letter-spacing:.02em; }
.api-col-save:not(:disabled) { background:var(--gold3);border-top-color:var(--gold2);color:var(--gold); }
.api-col-save:not(:disabled):hover { background:var(--gold2);color:#000; }
.api-col-save:disabled { opacity:.4;cursor:not-allowed; }

/* Profil maître · sélecteur d'IA de l'onglet API + barre « modèle » des bots (Victor 20/07). */
/* ⚠️ `.api-master-pick` / `.api-master-hint` ont été supprimées le 22/07 avec
   le sélecteur déroulant « La centrale · IA » de l'encadré de gauche : l'IA
   se choisit désormais dans le popup commun (`.pf-list`) et s'affiche dans le
   bandeau `.gen-target-banner`, comme au Générateur. */
.bot-presetbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:.6rem 1rem; border-top:1px solid var(--border); background:var(--surface2); }
.bot-preset-btn { background:var(--surface3); border:1px solid var(--border2); border-radius:6px; padding:6px 12px; font-size:11.5px; font-weight:600; color:var(--cream2); cursor:pointer; font-family:inherit; transition:all .15s; }
.bot-preset-btn:hover { border-color:var(--gold2); color:var(--gold); background:var(--gold3); }
.bot-preset-apply { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--cream3); margin-left:auto; }
.bot-preset-apply .lf-input { width:auto; min-width:130px; }

.lf-section-label { font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2);font-weight:500;margin-bottom:.6rem; }
.lf-field { display:flex;flex-direction:column;gap:3px;margin-bottom:.5rem; }
.lf-label { font-size:10px;color:var(--cream3); }
.lf-input { background:var(--surface2);border:1px solid var(--border2);border-radius:6px;padding:.45rem .75rem;font-size:12px;color:var(--cream);font-family:inherit;outline:none;transition:border-color .15s;width:100%;box-sizing:border-box; }
.lf-input:focus { border-color:var(--gold2); }
.lf-color { width:100%;height:34px;border:1px solid var(--border2);border-radius:6px;cursor:pointer;background:none;padding:2px; }
.lf-link-row { display:flex;gap:6px;align-items:center; }
.lf-link-row input { background:var(--surface2);border:1px solid var(--border2);border-radius:6px;padding:.4rem .6rem;font-size:11px;color:var(--cream);font-family:inherit;outline:none;flex:1;min-width:0; }
.lf-link-row input:focus { border-color:var(--gold2); }
.lf-link-del { background:none;border:none;color:var(--cream3);cursor:pointer;font-size:14px;padding:2px 5px;border-radius:4px;transition:all .12s;flex-shrink:0; }
.lf-link-del:hover { color:var(--nsfw);background:var(--nsfw-dim); }
.lf-check { display:flex;align-items:center;gap:7px;font-size:11px;color:var(--cream2);cursor:pointer;margin-bottom:.5rem;user-select:none; }
.lf-check input { accent-color:var(--gold2);cursor:pointer;width:14px;height:14px;flex-shrink:0; }
.lf-link-card { background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:.5rem; }
.lf-link-opts { display:flex;gap:5px;align-items:center;margin-top:5px; }
.lf-opt-btn { background:var(--surface3);border:1px solid var(--border2);border-radius:4px;color:var(--cream3);font-size:10px;padding:3px 8px;cursor:pointer;font-family:inherit;transition:all .12s;white-space:nowrap; }
.lf-opt-btn:hover { border-color:var(--gold2);color:var(--gold); }
.lf-opt-btn.on { background:var(--gold3);border-color:var(--gold2);color:var(--gold);font-weight:600; }
.lf-opt-btn.on-nsfw { background:var(--nsfw-dim);border-color:var(--nsfw);color:var(--nsfw);font-weight:600; }
.lf-pos-off { opacity:.28; cursor:not-allowed; }
.lf-pos-off:hover { background:var(--surface2) !important; border-color:var(--border2) !important; color:var(--cream3) !important; }
.lf-hero-drop { position:relative;border:1px dashed var(--border2);border-radius:var(--r);padding:1rem;text-align:center;color:var(--cream3);cursor:pointer;transition:all .15s;background:var(--surface2); }
.lf-hero-drop:hover, .lf-hero-drop.dragover { border-color:var(--gold2);color:var(--gold);background:var(--gold3); }
.lf-hero-drop input { position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%; }
/* ══ CALENDRIER ══
   (refonte du 17/07 · 9 points demandés par Marcel)

   CHARPENTE
     colonne gauche fixe (--api-col)  : mini-calendrier · ＋ Créer · Agenda · Fériés
     colonne droite (flex)            : barre · grille (mois) ou rail horaire (jour/semaine) ou cartes (liste)
     le formulaire                    : dans un popup, plus dans la colonne

   OUTIL DE PLANIFICATION : il n'envoie rien. Les champs sont ceux que
   réclament les deux API, pour n'avoir plus qu'à brancher l'envoi. */
.cal-wrap { display:flex;flex:1;min-height:0; }
.cal-main { flex:1;min-width:0;display:flex;flex-direction:column; }
.cal-bar { display:flex;align-items:center;gap:.75rem;padding:.875rem 1.25rem;border-bottom:1px solid var(--border);background:var(--surface2);flex-shrink:0; }
.cal-nav { display:flex;align-items:center;gap:4px; }
.cal-nav-btn { background:var(--surface3);border:1px solid var(--border2);border-radius:6px;color:var(--cream2);font-size:13px;width:28px;height:28px;cursor:pointer;font-family:inherit;transition:all .12s;line-height:1;flex-shrink:0; }
.cal-nav-btn:hover { border-color:var(--gold2);color:var(--gold); }
.cal-label { font-family:var(--font-display);font-size:15px;color:var(--gold);min-width:205px;text-transform:capitalize;white-space:nowrap;flex-shrink:0; }
.cal-today-btn { background:var(--surface3);border:1px solid var(--border2);border-radius:6px;color:var(--cream3);font-size:10px;padding:4px 10px;cursor:pointer;font-family:inherit;transition:all .12s;white-space:nowrap; }
.cal-today-btn:hover { border-color:var(--gold2);color:var(--gold); }

/* Le filtre d'affichage est un menu déroulant, à droite de « Fanvue », sur la
   ligne de la légende (Marcel, 17/07). C'étaient 4 boutons. */
.cal-view-sel { background:var(--surface3);border:1px solid var(--border2);border-radius:6px;color:var(--cream2);font-size:11px;padding:4px 8px;cursor:pointer;font-family:inherit;outline:none;transition:all .12s; }
.cal-view-sel:hover, .cal-view-sel:focus { border-color:var(--gold2);color:var(--gold); }

.cal-legend { display:flex;gap:11px;align-items:center;margin-left:auto;font-size:10px;color:var(--cream3);flex-shrink:0; }
.cal-legend span { display:flex;align-items:center;gap:5px; }
.cal-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
.cal-dot-instagram { background:var(--sfw); }
.cal-dot-fanvue    { background:var(--nsfw); }

/* ── Colonne gauche ── */
.cal-side { width:260px;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;background:var(--surface);min-height:0; }
.cal-side-body { flex:1;min-height:0;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:1rem; }

/* ＋ Créer — ouvre le popup. Même or que le bouton Générer. */
.cal-create { width:100%;background:var(--gold3);border:1px solid var(--gold2);border-radius:var(--r);padding:.65rem;font-size:12px;font-weight:600;color:var(--gold);cursor:pointer;font-family:inherit;transition:all .15s;flex-shrink:0;letter-spacing:.02em; }
.cal-create:hover { background:var(--gold2);color:#000; }
.cal-create-sub { display:block;font-size:9.5px;font-weight:400;opacity:.75;margin-top:2px;letter-spacing:0; }
.cal-create-tip { font-size:10px;color:var(--cream3);line-height:1.4;margin-top:-.35rem;padding:0 .15rem;flex-shrink:0; }

/* Blocs repliables de la colonne (Agenda, Fériés) */
.cal-fold { border:1px solid var(--border);border-radius:var(--r);background:var(--surface2);overflow:hidden;flex-shrink:0; }
.cal-fold-head { width:100%;display:flex;align-items:center;gap:7px;background:var(--surface3);border:none;border-bottom:1px solid transparent;padding:.5rem .75rem;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold2);font-weight:500;cursor:pointer;font-family:inherit;text-align:left; }
.cal-fold-head:hover { color:var(--gold); }
/* Même chevron que le repli du chat Claude (#claude-collapse-btn) :
   glyphe ▶ au repos, pivoté à 90° une fois déplié. */
/* Panneau GAUCHE → flèche à DROITE de la tuile (Marcel) : le libellé reste à
   gauche, la flèche est poussée au bout par margin-left:auto. */
.cal-fold-arrow { display:inline-block;transition:transform .15s;font-size:10px;order:1;margin-left:auto; }
.cal-fold.open .cal-fold-head { border-bottom-color:var(--border); }
.cal-fold.open .cal-fold-arrow { transform:rotate(90deg); }
.cal-fold:not(.open) .cal-fold-body { display:none; }
.cal-fold-body { padding:.75rem; }

/* Agenda : une ligne par PROPRIÉTAIRE de calendrier, pas par IA. */
.cal-ag { display:flex;align-items:center;gap:8px;padding:.35rem .25rem;font-size:11.5px;color:var(--cream2);cursor:pointer;border-radius:4px;user-select:none; }
.cal-ag:hover { background:var(--surface3); }
.cal-ag input { accent-color:var(--gold2);cursor:pointer;width:14px;height:14px;flex-shrink:0; }
.cal-ag-dot { width:9px;height:9px;border-radius:50%;flex-shrink:0;border:1.5px solid currentColor; }
.cal-ag-dot.full { background:currentColor; }
.cal-ag-name { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.cal-ag-role { font-size:9px;color:var(--cream3);flex-shrink:0; }
.cal-share-lab { font-size:10px;color:var(--cream3);margin:.6rem 0 .3rem;padding-top:.6rem;border-top:1px solid var(--border); }
.cal-share-row { display:flex;gap:5px; }
.cal-share-row input { flex:1;min-width:0;background:var(--surface);border:1px solid var(--border2);border-radius:5px;padding:.35rem .5rem;font-size:10.5px;color:var(--cream);font-family:inherit;outline:none; }
.cal-share-row input:focus { border-color:var(--gold2); }
.cal-share-go { background:var(--gold3);border:1px solid var(--gold2);border-radius:5px;color:var(--gold);font-size:10px;padding:0 9px;cursor:pointer;font-family:inherit;flex-shrink:0;transition:all .12s; }
.cal-share-go:hover { background:var(--gold2);color:#000; }
.cal-share-chip { display:flex;align-items:center;gap:6px;font-size:10px;color:var(--cream2);background:var(--surface);border:1px solid var(--border2);border-radius:4px;padding:2px 4px 2px 7px;margin-top:4px; }
.cal-share-chip span { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis; }
.cal-share-x { background:none;border:none;color:var(--cream3);cursor:pointer;font-size:11px;padding:1px 4px;border-radius:3px;font-family:inherit; }
.cal-share-x:hover { color:var(--nsfw);background:var(--nsfw-dim); }

/* Mini-calendrier — {mois} {année} {‹ ›} au-dessus */
.cal-mini { flex-shrink:0; }
.cal-mini-bar { display:flex;align-items:center;gap:4px;margin-bottom:.5rem; }
.cal-mini-lab { flex:1;font-size:11.5px;color:var(--gold);text-transform:capitalize;font-weight:600;letter-spacing:.02em; }
.cal-mini-btn { background:var(--surface2);border:1px solid var(--border2);border-radius:4px;color:var(--cream3);font-size:11px;width:20px;height:20px;line-height:1;cursor:pointer;font-family:inherit;transition:all .12s;flex-shrink:0;padding:0; }
.cal-mini-btn:hover { border-color:var(--gold2);color:var(--gold); }
.cal-mini-grid { display:grid;grid-template-columns:repeat(7,1fr);gap:1px; }
.cal-mini-dow { font-size:8px;text-align:center;color:var(--cream3);text-transform:uppercase;letter-spacing:.05em;padding-bottom:3px; }
.cal-mini-d { position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--cream2);border-radius:4px;cursor:pointer;border:1px solid transparent;font-variant-numeric:tabular-nums; }
.cal-mini-d:hover { background:var(--surface3); }
.cal-mini-d.out { opacity:.3; }
.cal-mini-d.today { color:var(--gold);font-weight:700;border-color:var(--gold2); }
.cal-mini-d.armed { background:var(--gold);color:#000;font-weight:700; }
.cal-mini-d.fer { color:var(--vid); }
.cal-mini-d.has::after { content:"";position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:3px;height:3px;border-radius:50%;background:var(--gold); }
.cal-mini-d.armed.has::after { background:#000; }

/* Fériés — le sélecteur de pays + les prochaines dates */
.cal-fer-next { display:flex;align-items:baseline;gap:6px;font-size:10px;color:var(--cream2);padding:2px 0; }
.cal-fer-when { color:var(--cream3);font-variant-numeric:tabular-nums;flex-shrink:0;min-width:52px; }
.cal-fer-n { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

/* Calendriers nationaux téléchargeables (chantier 21/07) — bouton d'ajout,
   barre de progression du téléchargement, liste des pays de la modale. */
.cal-fer-add { flex:1;background:var(--surface3);border:1px solid var(--border);color:var(--cream2);
  border-radius:var(--r);padding:.34rem .5rem;font-family:var(--font-ui);font-size:10px;cursor:pointer;
  transition:border-color .15s, color .15s; }
.cal-fer-add:hover { border-color:var(--gold2);color:var(--gold); }
.hol-progress { margin-top:.5rem; }
.hol-prog-label { font-size:10px;color:var(--cream3);margin-bottom:3px;display:flex;justify-content:space-between;gap:6px; }
.hol-prog-pct { color:var(--gold);font-variant-numeric:tabular-nums; }
.hol-prog-rail { height:4px;background:var(--surface3);border-radius:2px;overflow:hidden; }
.hol-prog-fill { height:100%;background:var(--gold);transition:width .25s ease; }
.hol-row { display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:var(--surface2);
  border:1px solid var(--border);border-radius:var(--r);padding:.45rem .6rem;color:var(--cream2);
  font-family:var(--font-ui);font-size:12px;cursor:pointer;transition:border-color .15s; }
.hol-row:hover { border-color:var(--gold2); }
.hol-row.has { border-left:2px solid var(--sfw); }
.hol-row-flag { font-size:15px;flex-shrink:0; }
.hol-row-name { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.hol-row-tag { font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream3);flex-shrink:0; }
.hol-row.has .hol-row-tag { color:var(--sfw); }

/* ── Grille du mois ── */
.cal-head { display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--border);flex-shrink:0; }
.cal-head div { padding:.4rem;text-align:center;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream3); }
.cal-grid { flex:1;display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr;overflow-y:auto;min-height:0; }
.cal-cell { border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:4px;min-height:96px;display:flex;flex-direction:column;gap:3px;cursor:pointer;transition:background .12s;overflow:hidden; }
.cal-cell:hover { background:var(--surface2); }
.cal-cell:nth-child(7n) { border-right:none; }
.cal-cell.out { opacity:.32; }
.cal-cell.today { background:var(--gold3); }
.cal-cell.today:hover { background:var(--gold2); }
/* Le jour repris dans le formulaire — c'est le seul retour visuel qui dit
   « ton clic a servi », puisqu'il ne crée plus rien. */
.cal-cell.armed { box-shadow:inset 0 0 0 2px var(--gold); }
.cal-daynum { font-size:10px;color:var(--cream3);padding:1px 3px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;gap:4px; }
.cal-cell.today .cal-daynum { color:var(--gold);font-weight:700; }
/* Jour férié / date à contenu — un mot dans la case, jamais plus */
.cal-fer-tag { font-size:8px;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--vid);opacity:.9; }
.cal-fer-tag.k-date { color:var(--cream3);font-style:italic; }
/* Toutes les entrées du jour restent atteignables : la pile défile plutôt que
   de masquer les dernières derrière un « +N » sur lequel il n'y a rien à cliquer. */
.cal-chips { flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:3px; }
.cal-chips::-webkit-scrollbar { width:4px; }
.cal-chips::-webkit-scrollbar-thumb { background:var(--border2);border-radius:2px; }

.cal-chip { display:flex;align-items:center;gap:5px;border-radius:4px;padding:2px 5px;font-size:9px;cursor:pointer;background:var(--surface2);border:1px solid var(--border2);border-left:3px solid var(--border2);color:var(--cream2);transition:all .12s;white-space:nowrap;overflow:hidden;flex-shrink:0; }
.cal-chip:hover { border-color:var(--gold2); }
.cal-chip.sel { border-color:var(--gold);background:var(--gold3);color:var(--gold); }
.cal-chip-instagram { border-left-color:var(--sfw); }
.cal-chip-fanvue    { border-left-color:var(--nsfw); }
.cal-chip-txt { overflow:hidden;text-overflow:ellipsis; }
/* Initiales de l'IA sur un chip (multi-IA · Victor 20/07). */
.cal-chip-ia { flex-shrink:0;font-size:8px;font-weight:700;line-height:1;padding:1px 3px;border:1px solid var(--border2);border-radius:3px;letter-spacing:.02em; }
.cal-chip-h { flex-shrink:0;opacity:.75;font-variant-numeric:tabular-nums; }
.cal-chip.st-poste  { opacity:.5; }
.cal-chip.st-erreur { border-color:var(--nsfw);color:var(--nsfw); }
/* Marque d'une entrée qui n'est pas à moi : c'est la seule façon de savoir
   de qui on regarde le planning quand deux agendas sont cochés. */
.cal-chip.guest { border-style:dashed; }

/* ══ RAIL HORAIRE · vues Jour et Semaine (Marcel, 17/07 · §2.1) ══
   Les posts sont calés sur leur date ET leur heure, pas listés en vrac dans
   la journée. Position = (h*60+m)/1440 de la hauteur.
   --calh = hauteur d'une heure. Toute la géométrie en dépend. */
.cal-time { flex:1;display:flex;flex-direction:column;min-height:0;--calh:48px;--calrail:56px; }
.cal-time-head { display:grid;grid-template-columns:var(--calrail) repeat(var(--cols),1fr);border-bottom:1px solid var(--border);background:var(--surface2);flex-shrink:0; }
.cal-th { padding:.4rem 4px;text-align:center;border-left:1px solid var(--border);min-width:0; }
.cal-th-dow { font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream3); }
.cal-th-num { font-size:15px;color:var(--cream2);font-family:var(--font-display);line-height:1.3; }
.cal-th.today .cal-th-num { color:var(--gold); }
.cal-th.today .cal-th-dow { color:var(--gold2); }
.cal-th-fer { font-size:8px;color:var(--vid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.cal-time-scroll { flex:1;min-height:0;overflow-y:auto; }
.cal-time-grid { display:grid;grid-template-columns:var(--calrail) repeat(var(--cols),1fr);position:relative;height:calc(var(--calh) * 24); }
.cal-rail { position:relative;border-right:1px solid var(--border); }
.cal-rail-h { position:absolute;right:6px;font-size:9px;color:var(--cream3);transform:translateY(-50%);font-variant-numeric:tabular-nums; }
.cal-col { position:relative;border-left:1px solid var(--border);min-width:0;cursor:pointer;
  background-image:repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px var(--calh)); }
.cal-col:hover { background-color:var(--surface2); }
.cal-col.today { background-color:var(--gold3); }
.cal-col.wend { background-color:rgba(0,0,0,.14); }
/* Une entrée posée à son heure. Hauteur fixe : un post n'a pas de durée. */
.cal-ev { position:absolute;left:3px;right:3px;min-height:20px;border-radius:4px;padding:2px 5px;font-size:9px;cursor:pointer;background:var(--surface2);border:1px solid var(--border2);border-left:3px solid var(--border2);color:var(--cream2);transition:all .12s;overflow:hidden;display:flex;flex-direction:column;gap:1px;z-index:2; }
.cal-ev:hover { border-color:var(--gold2);z-index:4; }
.cal-ev.sel { border-color:var(--gold);background:var(--gold3);color:var(--gold); }
.cal-ev-instagram { border-left-color:var(--sfw); }
.cal-ev-fanvue    { border-left-color:var(--nsfw); }
.cal-ev.st-poste  { opacity:.55; }
.cal-ev.st-erreur { border-color:var(--nsfw);color:var(--nsfw); }
.cal-ev.guest { border-style:dashed; }
.cal-ev-h { font-weight:600;font-variant-numeric:tabular-nums;flex-shrink:0; }
.cal-ev-t { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
/* Trait de l'heure courante */
.cal-now { position:absolute;left:var(--calrail);right:0;height:0;border-top:1px solid var(--nsfw);z-index:5;pointer-events:none; }
.cal-now::before { content:"";position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--nsfw); }
.cal-now-lab { position:absolute;right:100%;top:-6px;margin-right:6px;font-size:8.5px;color:var(--nsfw);font-weight:700;background:var(--bg);padding:0 3px;font-variant-numeric:tabular-nums; }

/* Vue Liste — des cartes, pas des cases */
.cal-cards { flex:1;overflow-y:auto;padding:1.25rem;display:flex;flex-direction:column;gap:8px;min-height:0; }
.cal-card { background:var(--surface2);border:1px solid var(--border);border-left:3px solid var(--border2);border-radius:var(--r);padding:.7rem .85rem;cursor:pointer;transition:all .12s;display:flex;gap:10px;align-items:flex-start; }
.cal-card:hover { border-color:var(--gold2);background:var(--surface3); }
.cal-card.sel { border-color:var(--gold);background:var(--gold3); }
.cal-card-instagram { border-left-color:var(--sfw); }
.cal-card-fanvue    { border-left-color:var(--nsfw); }
.cal-card-thumb { width:52px;height:52px;border-radius:5px;object-fit:cover;flex-shrink:0;border:1px solid var(--border2); }
.cal-card-noimg { width:52px;height:52px;border-radius:5px;flex-shrink:0;border:1px dashed var(--border2);display:flex;align-items:center;justify-content:center;font-size:16px;opacity:.35; }
.cal-card-body { flex:1;min-width:0; }
.cal-card-top { display:flex;align-items:center;gap:8px;margin-bottom:3px;flex-wrap:wrap; }
.cal-card-when { font-size:11px;color:var(--cream);font-weight:500;font-variant-numeric:tabular-nums; }
.cal-card-meta { font-size:10px;color:var(--cream3); }
.cal-card-cap { font-size:11px;color:var(--cream2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.cal-who { font-size:9px;color:var(--cream3);border:1px solid var(--border2);border-radius:8px;padding:0 6px;white-space:nowrap; }

/* Étiquette de statut — posée par le système, jamais par la main */
.cal-tag { font-size:9px;border-radius:9px;padding:1px 8px;border:1px solid;white-space:nowrap;flex-shrink:0; }
/* Proposition d'agent non validee : visible, mais visuellement distincte
   d'une vraie programmation (bordure pointillee, teinte neutre). */
.cal-tag-brouillon { background:var(--surface3);border-color:var(--border2);color:var(--cream2);border-style:dashed; }
.cal-tag-attente { background:var(--gold3);border-color:var(--gold2);color:var(--gold); }
.cal-tag-poste   { background:var(--sfw-dim);border-color:var(--sfw);color:var(--sfw); }
.cal-tag-erreur  { background:var(--nsfw-dim);border-color:var(--nsfw);color:var(--nsfw); }

/* ── Le formulaire · popup au milieu de l'écran (Marcel, 17/07 · §2.5) ── */
.cal-modal { max-width:600px;padding:0;display:flex;flex-direction:column;max-height:88vh; }
.cal-detail-head { padding:.9rem 1.25rem;border-bottom:1px solid var(--border);background:var(--surface2);flex-shrink:0;display:flex;align-items:center;gap:10px;border-radius:12px 12px 0 0; }
/* Pastille 📅 devant le titre : le popup se reconnaît d'un coup d'œil. */
.cal-detail-head::before { content:"📅";width:30px;height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px;background:var(--gold3);border:1px solid var(--gold2);border-radius:9px; }
.cal-detail-title { font-size:13px;color:var(--gold);letter-spacing:.06em;font-weight:700;font-family:var(--font-display);flex:1;min-width:0; }
#cal-edit-actions { margin-left:auto; }
.cal-detail-body { flex:1;overflow-y:auto;padding:1.25rem;display:flex;flex-direction:column;gap:1rem;min-height:0;background:var(--bg); }
/* Chaque section devient une carte, comme les panneaux Outils : on voit où
   commence et où finit un réglage au lieu d'une pile de libellés (Claria, 18/07). */
.cal-detail-body > div { background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:0 .9rem .9rem;display:flow-root; }
.cal-detail-body > div > .lf-section-label { margin:0 -.9rem .8rem;padding:.5rem .9rem;background:var(--surface3);border-bottom:1px solid var(--border);border-radius:var(--r) var(--r) 0 0;font-size:10px;letter-spacing:.16em; }
.cal-detail-body > div > :last-child { margin-bottom:0; }
/* La zone d'alerte garde son propre style : pas de cadre « carte » autour. */
.cal-detail-body > #cal-warn-zone { background:none;border:none;padding:0; }
.cal-detail-body > #cal-warn-zone:empty { display:none; }
.cal-detail-foot { border-top:1px solid var(--border);padding:.875rem 1.25rem;flex-shrink:0;background:var(--surface);border-radius:0 0 12px 12px; }
.cal-del { background:var(--nsfw-dim);border:1px solid var(--nsfw);border-radius:4px;color:var(--nsfw);font-size:10px;padding:3px 9px;cursor:pointer;font-family:inherit;transition:all .12s; }
.cal-del:hover { background:var(--nsfw);color:#fff; }
.cal-cancel { background:var(--surface3);border:1px solid var(--border2);border-radius:4px;color:var(--cream3);font-size:10px;padding:3px 9px;cursor:pointer;font-family:inherit;transition:all .12s; }
.cal-cancel:hover { border-color:var(--gold2);color:var(--gold); }
.cal-go { width:100%;background:var(--gold3);border:1px solid var(--gold2);border-radius:var(--r);padding:.7rem;font-size:12px;font-weight:500;color:var(--gold);cursor:pointer;font-family:inherit;transition:all .15s; }
.cal-go:hover:not(:disabled) { background:var(--gold2);color:#000; }
.cal-go:disabled { opacity:.35;cursor:not-allowed; }
.cal-foot-why { font-size:10px;color:var(--cream3);text-align:center;margin-top:.45rem;line-height:1.5; }
.cal-count { font-size:9px;color:var(--cream3);text-align:right;margin-top:2px; }
.cal-count.over { color:var(--nsfw);font-weight:600; }
/* Crédits OpenArt (credits.js) — carte de la vue Données */
.oa-card { background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);
  padding:.75rem .9rem;margin:0 0 1rem; }
.oa-card:empty { display:none; }
.oa-head { display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:.7rem; }
.oa-title { font-size:12.5px;color:var(--gold); }
.oa-stats { display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px; }
.oa-stat { background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:.5rem .6rem; }
.oa-stat.ko { border-color:var(--nsfw); }
.oa-stat-val { font-size:17px;color:var(--cream);font-variant-numeric:tabular-nums; }
.oa-stat.ko .oa-stat-val { color:var(--nsfw); }
.oa-stat-lbl { font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold2);margin-top:2px; }
.oa-stat-sub { font-size:9.5px;color:var(--cream3);margin-top:2px; }
.oa-alerte { margin-top:.6rem;font-size:11px;color:var(--nsfw);background:var(--nsfw-dim);
  border:1px solid var(--nsfw);border-radius:6px;padding:.45rem .6rem; }
.oa-ventil { display:flex;flex-wrap:wrap;gap:6px;margin-top:.6rem; }
.oa-ventil-item { font-size:10.5px;color:var(--cream3);background:var(--surface3);border-radius:20px;padding:2px 9px; }
.oa-row { display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;
  color:var(--cream2);background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:.35rem .55rem; }

/* Campagnes (campaign.js) — période + contexte partagé */
.cm-chips { margin-top:.45rem; }
.cm-chip { display:inline-block;font-size:10.5px;border:1px solid;border-radius:20px;padding:2px 10px;margin-right:5px; }
.cm-line { display:flex;align-items:center;gap:7px;padding:.3rem .1rem;cursor:pointer;border-radius:4px; }
.cm-line:hover { background:var(--surface2); }
.cm-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
.cm-line-nom { font-size:11.5px;color:var(--cream2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.cm-line-when { font-size:9.5px;color:var(--cream3);flex-shrink:0; }
.cm-sep { font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold2);margin:.5rem 0 .2rem; }
.cm-row { display:flex;align-items:flex-start;gap:8px;background:var(--surface);border:1px solid var(--border);
  border-radius:6px;padding:.5rem .6rem; }
.cm-row.editing { border-color:var(--gold2); }
.cm-row .cm-dot { margin-top:5px; }
.cm-row-main { flex:1;min-width:0;display:flex;flex-direction:column; }
.cm-row-nom { font-size:12.5px;color:var(--cream); }
.cm-row-sub { font-size:10px;color:var(--cream3);margin-top:1px; }
.cm-row-ctx { font-size:10.5px;color:var(--cream2);margin-top:3px;line-height:1.5; }
.cm-ias { display:flex;flex-wrap:wrap;gap:8px;background:var(--surface);border:1px solid var(--border);
  border-radius:6px;padding:.45rem .6rem; }
.cm-ia { display:flex;align-items:center;gap:5px;font-size:11px;color:var(--cream2);cursor:pointer; }
.cm-ia input { accent-color:var(--gold);cursor:pointer; }

/* Mémoire des fans (fanmem.js) — fiches minimales, purge annoncée */
.fm-retention { display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--surface2);
  border:1px solid var(--border);border-radius:var(--r);padding:.6rem .7rem; }
.fm-row { position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:6px;padding:.5rem .6rem;padding-right:74px; }
.fm-row.editing { border-color:var(--gold2); }
.fm-row-main { display:flex;flex-wrap:wrap;align-items:center;gap:6px; }
.fm-alias { font-size:12.5px;color:var(--cream); }
.fm-tag { font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--cream3);
  background:var(--surface3);border-radius:8px;padding:1px 7px; }
.fm-row-sub { font-size:10.5px;color:var(--cream3);margin-top:3px;line-height:1.5; }
.fm-row-purge { color:var(--cream3);opacity:.75;font-size:9.5px; }
.fm-row-acts { position:absolute;top:6px;right:6px;display:flex;gap:2px; }

/* A/B de légendes (abtest.js) — deux angles côte à côte, un seul retenu */
.ab-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
@media (max-width:640px){ .ab-grid { grid-template-columns:1fr; } }
.ab-card { display:flex;flex-direction:column;gap:8px;background:var(--surface2);
  border:1px solid var(--border);border-radius:var(--r);padding:.7rem .75rem; }
.ab-card:hover { border-color:var(--gold2); }
.ab-card-head { display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold2); }
.ab-badge { display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:5px;background:var(--gold3);border:1px solid var(--gold2);color:var(--gold);
  font-size:11px;letter-spacing:0; }
.ab-card-text { flex:1;font-size:12px;line-height:1.6;color:var(--cream2);white-space:pre-wrap; }
.ab-pick { width:100%;background:var(--gold3);border:1px solid var(--gold2);border-radius:6px;
  color:var(--gold);font-size:11px;padding:6px;cursor:pointer;font-family:inherit;transition:all .12s; }
.ab-pick:hover { background:var(--gold2);color:#000; }
.ab-wait { padding:1.6rem;text-align:center;font-size:12px;color:var(--cream3); }
.ab-foot-note { font-size:10px;color:var(--cream3); }
.ab-trace { position:relative;margin-top:.45rem;background:var(--surface2);border:1px solid var(--border2);
  border-radius:6px;padding:.45rem .6rem;font-size:10.5px;color:var(--cream2);line-height:1.5; }
.ab-trace-sub { font-size:9.5px;color:var(--cream3);margin-top:2px; }
.ab-trace-x { position:absolute;top:5px;right:6px;background:none;border:none;color:var(--cream3);
  font-size:11px;cursor:pointer;font-family:inherit;padding:0 3px; }
.ab-trace-x:hover { color:var(--nsfw); }

/* Checklist de conformité (compliance.js) — remplace les anciennes alertes
   « cal-warn ». Vert = vérifié · rouge = bloquant · orange = conseil.
   SEUL « créneau déjà passé » est rouge parmi les conseils : c'est le seul qui
   dit « ça ne partira jamais » (Marcel, 17/07 · §2.9). */
.cp-check { border:1px solid var(--border2);border-radius:var(--r);padding:.55rem .65rem;background:var(--surface2); }
.cp-check.has-bloq { border-color:var(--nsfw); }
.cp-check-head { display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);margin-bottom:6px; }
.cp-check-score { letter-spacing:.05em;color:var(--cream3); }
.cp-check-score.ok { color:var(--sfw); }
.cp-check-score.ko { color:var(--nsfw); }
.cp-line { display:flex;align-items:flex-start;gap:7px;font-size:10.5px;line-height:1.5;padding:2px 0;color:var(--cream3); }
.cp-ico { flex-shrink:0;width:12px;text-align:center; }
.cp-line.ok   { color:var(--cream3); } .cp-line.ok .cp-ico { color:var(--sfw); }
.cp-line.warn { color:var(--warn); }   .cp-line.warn .cp-ico { color:var(--warn); }
.cp-line.red,
.cp-line.ko   { color:var(--nsfw); }   .cp-line.ko .cp-ico, .cp-line.red .cp-ico { color:var(--nsfw); }
.cp-check-foot { font-size:9.5px;color:var(--cream3);margin-top:6px;padding-top:5px;border-top:1px solid var(--border);line-height:1.5; }
.cp-check-foot.ko { color:var(--nsfw); }
.cal-thumb { width:100%;border-radius:6px;border:1px solid var(--border2);display:block; }

/* Pack Fanvue — plusieurs images, une seule sert d'appât */
.cal-pack { display:grid;grid-template-columns:repeat(3,1fr);gap:6px; }
.cal-pack-item { position:relative;border-radius:5px;overflow:hidden;border:2px solid var(--border2);cursor:pointer;aspect-ratio:1;transition:all .12s; }
.cal-pack-item:hover { border-color:var(--gold2); }
.cal-pack-item img { width:100%;height:100%;object-fit:cover;display:block; }
.cal-pack-item.is-preview { border-color:var(--gold); }
.cal-pack-badge { position:absolute;left:0;right:0;bottom:0;background:var(--gold);color:#000;font-size:8px;text-align:center;padding:1px 0;font-weight:700;letter-spacing:.05em; }
.cal-pack-del { position:absolute;top:2px;right:2px;background:rgba(0,0,0,.65);border:none;border-radius:3px;color:#fff;font-size:9px;width:16px;height:16px;cursor:pointer;line-height:1;padding:0; }
.cal-pack-del:hover { background:var(--nsfw); }
.cal-pack-add { border:1px dashed var(--border2);border-radius:5px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--cream3);cursor:pointer;position:relative;transition:all .12s;background:var(--surface2); }
.cal-pack-add:hover, .cal-pack-add.dragover { border-color:var(--gold2);color:var(--gold);background:var(--gold3); }
.cal-pack-add input { position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%; }

/* L'appât, tel que le voit un non-abonné */
.cal-blur { position:relative;border-radius:6px;overflow:hidden;border:1px solid var(--border2);margin-top:.5rem; }
.cal-blur img { width:100%;display:block;filter:blur(16px);transform:scale(1.1); }
.cal-blur-lock { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:rgba(0,0,0,.35);color:#fff;font-size:12px;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.8); }
.cal-blur-sub { font-size:10px;font-weight:400;opacity:.85; }
.lf-range { width:100%;accent-color:var(--gold2);cursor:pointer; }
.lf-export-btn { width:100%;background:var(--surface3);border:1px solid var(--border2);border-radius:var(--r);padding:.6rem;font-size:11px;color:var(--cream2);cursor:pointer;font-family:inherit;transition:all .15s; }
.lf-export-btn:hover { border-color:var(--gold2);color:var(--gold);background:var(--gold3); }

/* ══ PANNEAUX BOT · InstaBOT et FanBOT ══
   Même charpente que LinkFORGE : réglages à gauche, résultat à droite.
   Les deux panneaux partagent ces classes — leur contenu est fabriqué par
   botPanelHTML(bot), une seule fois, pour ne pas dupliquer 250 lignes. */

.bot-test { width:var(--test-col);flex-shrink:0;display:flex;flex-direction:column;background:var(--bg);min-height:0; }
/* Prévisualisation LinkFORGE — exactement le gabarit de la zone de test des
   bots (même en-tête, même colonne à droite d'une config large), mais la
   prévisualisation prend la place du tchat et se voit EN GRAND (Marcel, 17/07).
   Le téléphone remplit sa colonne au lieu de flotter dans un vide. */
.lf-preview-col { width:var(--test-col);flex-shrink:0;display:flex;flex-direction:column;background:var(--bg);min-height:0; }
.lf-preview-zone { flex:1;min-height:0;overflow-y:auto;padding:1.25rem;display:flex; }
.lf-phone { width:100%;max-width:360px;border-radius:40px;border:3px solid var(--border2);overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.6);background:#000;flex-shrink:0;margin:auto; }
.bot-area { background:var(--surface2);border:1px solid var(--border2);border-radius:6px;padding:.5rem .7rem;font-size:11px;color:var(--cream);font-family:inherit;outline:none;width:100%;box-sizing:border-box;resize:vertical;line-height:1.6; }
.bot-area:focus { border-color:var(--gold2); }
.bot-hint { font-size:10px;color:var(--cream3);line-height:1.55;margin-top:.4rem; }

/* Interrupteur maître — trois états exclusifs, chacun sa couleur */
.bot-seg { display:flex;gap:6px; }
.bot-seg-btn { flex:1;background:var(--surface2);border:1px solid var(--border2);border-radius:6px;padding:.5rem .2rem;font-size:11px;color:var(--cream3);cursor:pointer;font-family:inherit;transition:all .12s;text-align:center; }
.bot-seg-btn:hover { border-color:var(--gold2);color:var(--gold); }
.bot-seg-btn.on-on     { background:var(--sfw-dim);border-color:var(--sfw);color:var(--sfw);font-weight:600; }
.bot-seg-btn.on-silent { background:var(--warn-dim);border-color:var(--warn);color:var(--warn);font-weight:600; }
.bot-seg-btn.on-off    { background:var(--surface3);border-color:var(--cream3);color:var(--cream2);font-weight:600; }

/* Listes éditables : situations à ticket + limites infranchissables */
.bot-line-row { display:flex;gap:6px;align-items:flex-start;margin-bottom:6px; }
.bot-line-row .bot-area { min-height:34px; }
.bot-add { width:100%;background:var(--surface2);border:1px dashed var(--border2);border-radius:6px;color:var(--cream3);font-size:11px;padding:.45rem;cursor:pointer;font-family:inherit;transition:all .12s;margin-top:.25rem; }
.bot-add:hover { border-color:var(--gold2);color:var(--gold);background:var(--gold3); }

/* Zone de test */
/* min-height alignée sur .api-col-head (63px) pour que le bas de « Prévisualisation »
   / « Zone de test » tombe au même niveau que « LinkFORGE » / « InstaBOT » / « FanBOT »
   (en-tête gauche à 2 lignes + icône, plus haut). Victor, 20/07. */
.bot-test-head { padding:.875rem 1rem;border-bottom:1px solid var(--border);background:var(--surface2);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:63px; }
.bot-test-title { font-size:11px;color:var(--cream3);text-transform:uppercase;letter-spacing:.2em;font-weight:500; }
/* Reset de la conversation de test — discret, à droite du titre. */
.bot-reset { background:transparent;border:1px solid var(--border2);border-radius:6px;padding:4px 9px;font-size:10.5px;color:var(--cream3);cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap; }
.bot-reset:hover { border-color:var(--gold2);color:var(--gold); }
.bot-test-safe { font-size:10px;color:var(--warn);background:var(--warn-dim);border:1px solid var(--warn);border-radius:10px;padding:2px 10px;white-space:nowrap; }
.bot-test-body { flex:1;overflow-y:auto;min-height:0; }
/* Le fil de discussion est centré dans la zone, comme l'était le détail d'un
   ticket : même largeur max, même centrage. Le message d'accueil hérite donc
   exactement des mêmes coordonnées. */
.bot-chat { padding:1rem;display:flex;flex-direction:column;gap:10px;width:100%;margin:auto; }
.bot-test-foot { border-top:1px solid var(--border);padding:.875rem 1rem;flex-shrink:0;background:var(--surface); }
.bot-bubble { max-width:88%;border-radius:12px;padding:.6rem .85rem;font-size:12px;line-height:1.65;white-space:pre-wrap;word-break:break-word; }
.bot-bubble-fan { align-self:flex-start;background:var(--surface2);border:1px solid var(--border2);color:var(--cream2);border-bottom-left-radius:3px; }
.bot-bubble-bot { align-self:flex-end;background:var(--gold3);border:1px solid var(--gold2);color:var(--cream);border-bottom-right-radius:3px; }
.bot-bubble-who { font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--cream3);margin-bottom:4px; }
.bot-verdict { border-radius:var(--r);padding:.7rem .85rem;font-size:11px;line-height:1.6;border:1px solid; }
.bot-verdict-yes { background:var(--warn-dim);border-color:var(--warn);color:var(--warn); }
.bot-verdict-no  { background:var(--surface2);border-color:var(--border2);color:var(--cream3); }
.bot-verdict-mute{ background:var(--surface3);border-color:var(--cream3);color:var(--cream2); }
.bot-verdict b { color:var(--cream); }
.bot-run { width:100%;background:var(--gold3);border:1px solid var(--gold2);border-radius:var(--r);padding:.6rem;font-size:12px;font-weight:500;color:var(--gold);cursor:pointer;font-family:inherit;transition:all .15s;margin-top:.5rem; }
.bot-run:hover:not(:disabled) { background:var(--gold2);color:#000; }
.bot-run:disabled { opacity:.45;cursor:not-allowed; }
.bot-lore-btn { background:var(--surface3);border:1px solid var(--border2);border-radius:4px;color:var(--cream3);font-size:10px;padding:2px 8px;cursor:pointer;font-family:inherit;transition:all .12s; }
.bot-lore-btn:hover { border-color:var(--gold2);color:var(--gold); }
/* Pavé directionnel de cadrage de l'image d'en-tête */
.lf-pos-pad { display:flex; flex-direction:column; align-items:center; gap:4px; }
.lf-pos-mid { display:flex; gap:4px; }
.lf-pos-btn { width:30px; height:26px; background:var(--surface3); border:1px solid var(--border2); border-radius:4px; color:var(--cream3); font-size:9px; cursor:pointer; font-family:inherit; transition:all .12s; display:flex; align-items:center; justify-content:center; }
.lf-pos-btn:hover { border-color:var(--gold2); color:var(--gold); background:var(--gold3); }
.lf-pos-reset { color:var(--cream2); font-size:11px; }
.lf-pos-read { text-align:center; font-size:10px; color:var(--cream3); margin-top:5px; }

/* SIDEBAR DROITE GLOBALE */
#sidebar-right-global {
  width:260px; flex-shrink:0; border-left:1px solid var(--border);
  padding:1.25rem; display:flex; flex-direction:column; gap:1rem;
  background:var(--surface); overflow-y:auto; overflow-x:hidden;
}
.persona-card-global {
  display:flex; align-items:center; gap:10px;
  background:var(--surface2); border:1px solid var(--border2);
  border-radius:var(--r); padding:.75rem .875rem;
}
.pcg-avatar {
  width:36px; height:36px; border-radius:50%; background:var(--gold3);
  border:2px solid var(--gold2); display:flex; align-items:center;
  justify-content:center; font-size:11px; font-weight:700;
  color:var(--gold); flex-shrink:0; letter-spacing:.03em;
}
.pcg-info { display:flex; flex-direction:column; gap:2px; min-width:0; }
.pcg-name { font-size:13px; font-weight:500; color:var(--cream); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pcg-sub  { font-size:10px; color:var(--cream3); }
/* Fondu de remplacement du contenu de la popup ticket */
@keyframes urgentSwap { from { opacity:.35; transform:scale(.985); } to { opacity:1; transform:scale(1); } }
.urgent-box.swapping { animation:urgentSwap .22s ease-out; }

/* Les styles .claude-* (bulle de discussion de la sidebar droite) ont été
   retirés avec l'encadré lui-même (Victor, 22/07). */

/* ── LAYOUT FIXE ── */
html, body { height:100%; overflow:hidden; }
body { display:flex; flex-direction:column; }
.topbar { flex-shrink:0; }
.nav-tabs { flex-shrink:0; }
.app { flex:1; min-height:0; display:flex; flex-direction:row; }
.views-zone { flex:1; min-height:0; display:flex; flex-direction:column; min-width:0; }
.view { flex:1; min-height:0; }
.view.active { display:flex; flex-direction:column; }
.gen-layout { flex:1; min-height:0; display:flex; }
.sidebar { overflow-y:auto; height:100%; }
.sidebar-right { overflow-y:auto; height:100%; }
#sidebar-right-global { overflow-y:auto; height:100%; flex-shrink:0; }

/* ══ COLONNES LATÉRALES : SCROLLER, JAMAIS COMPRIMER ══
   (Marcel, 16/07 — « ça se superpose / disparaît »)

   Un enfant de flex column a flex-shrink:1 par défaut. Quand le
   contenu dépasse, le navigateur ÉCRASE les enfants au lieu de
   déclencher le scroll. Normalement min-height:auto l'en empêche…
   sauf que cette valeur tombe à ZÉRO dès que l'élément est en
   overflow:hidden — ce qui est le cas de .sb-fold.

   Résultat mesuré avant correctif (1920x880) :
     fold-engine    rendu 127px / naturel 264px  → 137px coupés
     fold-services  rendu  50px / naturel 101px  →  51px coupés
     sidebar scrollable : NON — rien ne débordait, tout était écrasé.
   D'où « Modèles utilisés » tronqué et les blocs qui se chevauchent.

   Le symptôme avait été traité une fois, sur une seule boîte. On le
   généralise à toutes les colonnes plutôt que boîte par boîte. */
.sidebar > *,
.sidebar-right > *,
#sidebar-right-global > *,
.lora-sidebar > *,
.doc-sidebar > * { flex-shrink:0; }
.main-output { flex:1; overflow:hidden; min-width:0; }
.history-view { flex:1; overflow-y:auto; }
.donnees-view { flex:1; min-height:0; }
.donnees-content { overflow-y:auto; }

/* ── BOUTON CLÉS API (topbar) ── */
.api-keys-btn {
  display:flex; align-items:center; gap:6px;
  background:var(--surface2); border:1px solid var(--border2);
  border-radius:6px; padding:6px 14px; cursor:pointer;
  font-family:inherit; color:var(--cream2); font-size:12px;
  font-weight:500; transition:all .15s; white-space:nowrap;
}
.api-keys-btn:hover { border-color:var(--gold2); color:var(--gold); }
.api-keys-dot { width:6px; height:6px; border-radius:50%; background:var(--cream3); }
.api-keys-dot.configured { background:var(--sfw); }

/* BULLE PROFIL UTILISATEUR */
/* Lignes du panneau d'administration des comptes */
.adm-row { display:flex; align-items:center; gap:.75rem; padding:.6rem .75rem; border:1px solid var(--border); border-radius:var(--r); margin-bottom:.5rem; background:var(--surface2); }
.adm-av { width:28px; height:28px; border-radius:50%; background:var(--gold3); border:1px solid var(--gold2); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; text-transform:uppercase; }
.adm-id { flex:1; min-width:0; }
.adm-pseudo { font-size:13px; font-weight:600; color:var(--cream); }
.adm-mail { font-size:10px; color:var(--cream3); word-break:break-all; }
.adm-tag { font-size:9px; letter-spacing:.1em; text-transform:uppercase; padding:2px 6px; border-radius:4px; border:1px solid var(--gold2); color:var(--gold); background:var(--gold3); flex-shrink:0; }
.adm-tag-warn { border-color:var(--nsfw); color:var(--nsfw); background:var(--nsfw-dim); }
.adm-act { background:none; border:1px solid var(--border2); color:var(--cream3); border-radius:var(--r); padding:.3rem .5rem; font-size:11px; cursor:pointer; font-family:inherit; transition:all .15s; flex-shrink:0; }
.adm-act:hover { border-color:var(--gold); color:var(--gold); }
.adm-act-del:hover { border-color:var(--nsfw); color:var(--nsfw); }
/* Filtre IA global (encadré droit, au-dessus des Agents). */
.master-filter-card .mf-head { display:flex; align-items:center; justify-content:space-between; padding:.55rem .75rem; border-bottom:1px solid var(--border); }
.master-filter-card .mf-body { padding:.45rem .55rem .55rem; display:flex; flex-direction:column; gap:2px; }
.mf-opt { display:flex; align-items:center; gap:.5rem; padding:.32rem .4rem; border-radius:6px; font-size:11.5px; color:var(--cream2); cursor:pointer; transition:background .12s; }
.mf-opt:hover { background:var(--surface3); }
.mf-opt.on { color:var(--cream); }
.mf-opt input { width:14px; height:14px; accent-color:var(--gold); cursor:pointer; flex-shrink:0; }
.mf-opt .mf-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mf-clear { margin-top:.35rem; width:100%; background:transparent; border:1px solid var(--border2); border-radius:6px; padding:5px; font-size:10.5px; color:var(--cream3); cursor:pointer; font-family:inherit; transition:all .15s; }
.mf-clear:hover:not(:disabled) { border-color:var(--gold2); color:var(--gold); }
.mf-clear:disabled { opacity:.4; cursor:default; }
/* Cases « produits accessibles » du formulaire de création de compte. */
.adm-acces-opt { display:flex; align-items:center; gap:.5rem; font-size:12px; color:var(--cream2); cursor:pointer; padding:.25rem 0; }
.adm-acces-opt input { width:15px; height:15px; accent-color:var(--gold); cursor:pointer; }
/* Puce d'accès dans l'annuaire (à côté du rôle). */
.adm-tag-prod { border-color:var(--border2); color:var(--cream3); background:var(--surface2); }
.user-bubble { display:flex; align-items:center; gap:8px; background:var(--surface2); border:1px solid var(--border2); border-radius:20px; padding:5px 12px 5px 6px; cursor:pointer; font-family:inherit; color:var(--cream); font-size:12px; font-weight:500; transition:all .15s; white-space:nowrap; }
.user-bubble:hover { border-color:var(--gold); color:var(--gold); }
.user-bubble-avatar { width:24px; height:24px; border-radius:50%; background:var(--gold3); border:1px solid var(--gold2); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; text-transform:uppercase; }
.user-menu { display:none; position:absolute; top:calc(100% + 8px); right:0; background:var(--surface); border:1px solid var(--border2); border-radius:var(--r); min-width:230px; z-index:400; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.5); }
.user-menu.open { display:block; }
.um-item { display:block; width:100%; text-align:left; background:none; border:none; padding:.6rem 1rem; font-size:12px; color:var(--cream2); cursor:pointer; font-family:inherit; transition:all .12s; }
.um-item:hover { background:var(--surface2); color:var(--gold); }
.um-logout:hover { background:var(--nsfw-dim); color:var(--nsfw); }
.um-theme-row { display:flex; gap:6px; padding:.25rem .75rem .5rem; }
.um-theme { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; background:var(--surface2); border:1px solid var(--border2); border-radius:var(--r); padding:.55rem .3rem; cursor:pointer; font-family:inherit; font-size:10.5px; color:var(--cream3); transition:all .15s; }
.um-theme:hover { border-color:var(--gold2); color:var(--cream2); }
.um-theme.active { border-color:var(--gold); color:var(--gold); background:var(--gold3); font-weight:600; }
.um-theme-chip { width:100%; height:18px; border-radius:2px; border:1px solid rgba(255,255,255,.14); }
.chip-classic { background:linear-gradient(115deg,#0b0b0b 0 42%,#c9a96e 42% 58%,#181818 58%); }
.chip-shadow  { background:linear-gradient(115deg,#08060F 0 42%,#B57BFF 42% 58%,#1A1528 58%); }
.um-switch { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:.5rem .75rem .7rem; font-size:11px; color:var(--cream2); cursor:pointer; user-select:none; }
.um-switch input { accent-color:var(--gold2); cursor:pointer; width:15px; height:15px; flex-shrink:0; }
.um-switch.disabled { opacity:.4; cursor:not-allowed; }
.um-switch.disabled input { cursor:not-allowed; }
/* Raison du grisage, affichée sous le libellé : un réglage désactivé sans
   explication, c'est un bug pour celui qui le voit. */
.um-switch-hint { display:block; font-size:9.5px; color:var(--cream3); margin-top:2px; font-style:italic; }

/* ── Popup ⚙ Paramètres ──
   Trois blocs cartonnés, un titre chacun, rien qui flotte. */
.set-block { background:var(--surface2); border:1px solid var(--border); border-radius:var(--r); margin-bottom:1rem; overflow:hidden; }
.set-block:last-child { margin-bottom:0; }
.set-block-head { padding:.55rem .875rem; background:var(--surface3); border-bottom:1px solid var(--border); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold2); font-weight:500; }
.set-block > :not(.set-block-head) { margin:.75rem .875rem; }
.set-ident { display:flex; align-items:center; gap:11px; }
.set-ident-av { width:40px; height:40px; border-radius:50%; background:var(--gold3); border:2px solid var(--gold2); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:var(--gold); flex-shrink:0; }
.set-ident-name { font-size:14px; font-weight:600; color:var(--cream); }
/* Pseudonyme éditable inline (Victor, 20/07) — remplace le bouton « Modifier ». */
.set-ident-name-input { width:100%; font-size:14px; font-weight:600; color:var(--cream); font-family:inherit;
  background:var(--surface); border:1px solid var(--border2); border-radius:6px; padding:.4rem .6rem; outline:none; transition:border-color .12s; }
.set-ident-name-input:focus { border-color:var(--gold2); }
.set-ident-name-input:disabled { opacity:.55; cursor:not-allowed; }
.set-ident-mail { font-size:10.5px; color:var(--cream3); margin-top:4px; word-break:break-all; }
.set-rows { display:flex; flex-direction:column; gap:5px; }
.set-row { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; background:var(--surface); border:1px solid var(--border2); border-radius:6px; padding:.55rem .75rem; font-size:12px; color:var(--cream2); cursor:pointer; font-family:inherit; transition:all .12s; text-align:left; }
.set-row:hover { border-color:var(--gold2); color:var(--gold); background:var(--gold3); }
.set-row-l { display:flex; align-items:center; gap:9px; min-width:0; }
.set-row-i { width:16px; text-align:center; flex-shrink:0; opacity:.8; }
.set-row-go { color:var(--cream3); font-size:14px; flex-shrink:0; }
.set-switch { padding:0 !important; }

/* Ces deux modals doivent pouvoir s'ouvrir par-dessus l'écran de connexion */
#modal-mailsim, #modal-newpass { z-index:1000; }

/* ÉCRAN DE CONNEXION */
/* L'aplat noir plein écran est parti (Victor, 22/07) : l'écran de connexion
   porte maintenant la MÊME ambiance que le reste de l'app — halo violet en
   haut + grille de scan. `body::before` ne suffit pas : l'écran est opaque et
   au-dessus (z-index 900), il redessine donc le décor lui-même. */
.auth-screen { display:none; position:fixed; inset:0; z-index:900; align-items:center; justify-content:center; padding:2rem; overflow-y:auto;
  background:var(--bg);
  background-image:
    radial-gradient(1100px 620px at 50% -12%, var(--gold3), transparent 62%),
    radial-gradient(760px 480px at 88% 108%, var(--gold3), transparent 66%);
}
.auth-screen.open { display:flex; }
/* Grille de scan, calquée sur `[data-theme="shadow"] body::before`. */
.auth-screen::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.45;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%);
}
.auth-card { position:relative; z-index:1; }
.auth-card { width:100%; max-width:380px; background:var(--surface); border:1px solid var(--border2); border-radius:var(--r); padding:2rem 1.75rem; box-shadow:0 12px 48px rgba(0,0,0,.6); }
.auth-brand { text-align:center; margin-bottom:1.5rem; }
.auth-brand-name {
  font-family:var(--font-display); font-size:26px; color:var(--gold);
  font-weight:700; letter-spacing:.1em;
}
.auth-brand-sub { font-size:10px; color:var(--cream3); letter-spacing:.3em; text-transform:uppercase; }
.auth-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:1.25rem; }
.auth-tab { flex:1; background:none; border:none; border-bottom:2px solid transparent; padding:.6rem; font-size:12px; color:var(--cream3); cursor:pointer; font-family:inherit; transition:all .15s; }
.auth-tab.active { color:var(--gold); border-bottom-color:var(--gold); }
.auth-field { margin-bottom:.875rem; }
.auth-label { display:block; font-size:11px; color:var(--cream2); margin-bottom:4px; font-weight:500; }
.auth-input { width:100%; background:var(--surface2); border:1px solid var(--border2); border-radius:6px; padding:.6rem .75rem; font-size:13px; color:var(--cream); font-family:inherit; outline:none; transition:border-color .15s; }
.auth-input:focus { border-color:var(--gold2); }
.auth-err { display:none; font-size:11px; color:var(--nsfw); background:var(--nsfw-dim); border:1px solid var(--nsfw); border-radius:6px; padding:.5rem .7rem; margin-bottom:.75rem; line-height:1.5; }
.auth-err.show { display:block; }
.auth-submit { width:100%; background:var(--gold3); border:1px solid var(--gold2); border-radius:var(--r); padding:.75rem; font-size:13px; font-weight:600; color:var(--gold); cursor:pointer; font-family:inherit; transition:all .15s; margin-top:.25rem; }
.auth-submit:hover { background:var(--gold2); color:#000; }
.auth-link { display:block; width:100%; background:none; border:none; color:var(--cream3); font-size:11px; cursor:pointer; font-family:inherit; margin-top:.6rem; text-align:center; transition:color .15s; }
.auth-link:hover { color:var(--gold); }
.auth-sep { display:flex; align-items:center; gap:10px; margin:1.25rem 0 .875rem; color:var(--cream3); font-size:10px; text-transform:uppercase; letter-spacing:.15em; }
.auth-sep::before, .auth-sep::after { content:""; flex:1; height:1px; background:var(--border); }
.auth-skip { width:100%; background:var(--surface2); border:1px dashed var(--border2); border-radius:var(--r); padding:.65rem; font-size:12px; color:var(--cream3); cursor:pointer; font-family:inherit; transition:all .15s; }
.auth-skip:hover { border-color:var(--gold2); color:var(--gold); }
.auth-note { font-size:10px; color:var(--cream3); text-align:center; margin-top:1rem; line-height:1.6; opacity:.75; }

/* ══════════════════════════════════════════════════════════
   ÉCRAN DE CHOIX DU PRODUIT (Victor, 22/07) — préfixe `.lx-`
   ------------------------------------------------------------
   Deuxième temps de la porte d'entrée, après la connexion. Il
   REPREND le décor de `.auth-screen` (même fond, même grille de
   scan) : c'est la suite du même parcours, pas un autre monde.

   Les deux tuiles portent chacune la couleur de SON produit —
   l'accent du thème pour Prompt Engine, le rouge YouTube pour
   Tube. C'est la seule occasion où les deux identités se voient
   côte à côte, autant s'en servir : on choisit une couleur avant
   de lire un libellé.
   ══════════════════════════════════════════════════════════ */
.lx-screen { display:none; position:fixed; inset:0; z-index:905; align-items:center; justify-content:center; padding:2rem; overflow-y:auto;
  background:var(--bg);
  background-image:
    radial-gradient(1100px 620px at 50% -12%, var(--gold3), transparent 62%),
    radial-gradient(760px 480px at 88% 108%, var(--gold3), transparent 66%);
}
.lx-screen.open { display:flex; }
.lx-screen::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.45;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%);
}
.lx-card { position:relative; z-index:1; width:100%; max-width:840px; }
.lx-brand { text-align:center; margin-bottom:.35rem; }
.lx-brand-name { font-family:var(--font-display); font-size:30px; color:var(--cream); letter-spacing:.02em; display:block; }
.lx-brand-hi { font-size:11px; color:var(--gold); letter-spacing:.14em; text-transform:uppercase; }
.lx-lead { text-align:center; font-size:12.5px; color:var(--cream2); margin:0 0 2rem; }

.lx-choices { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
/* Sous 640px les deux panneaux côte à côte deviennent illisibles : on empile. */
@media (max-width:640px){ .lx-choices { grid-template-columns:1fr; } }

/* ── Un panneau produit (le « diptyque ») ──
   Grand, cliquable en entier, portant la couleur de son produit. Au survol il
   se soulève, sa barre de tête s'allume et son « Entrer → » prend la couleur
   de marque : on voit d'un coup d'œil dans quel univers on entre. */
.lx-choice {
  position:relative; display:flex; flex-direction:column; align-items:stretch; gap:.4rem;
  background:linear-gradient(180deg, var(--surface2), var(--surface));
  border:1px solid var(--border2); border-radius:calc(var(--r) + 4px);
  padding:1.5rem 1.4rem 1.35rem; cursor:pointer; overflow:hidden;
  font-family:inherit; text-align:left; transition:transform .18s ease, border-color .18s, box-shadow .18s;
}
.lx-choice::before {
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--border2); transition:background .18s;
}
.lx-choice:hover { transform:translateY(-4px); }

.lx-choice-top { display:flex; align-items:center; justify-content:space-between; }
.lx-choice-ico {
  font-size:23px; width:46px; height:46px; border-radius:12px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface3); border:1px solid var(--border2); transition:all .18s;
}
.lx-choice-name { font-size:17px; font-weight:600; color:var(--cream); margin-top:.55rem; }
.lx-choice-sub  { font-size:11px; color:var(--cream2); line-height:1.5; }
.lx-choice-feats { display:flex; flex-direction:column; gap:.3rem; margin-top:.7rem; }
.lx-choice-feats span { position:relative; padding-left:1rem; font-size:11px; color:var(--cream3); line-height:1.45; }
.lx-choice-feats span::before { content:"›"; position:absolute; left:.15rem; color:var(--cream3); }
/* Compteur d'IA / de chaînes. Reste à « — » tant qu'on n'a pas pu lire :
   un « 0 » inventé ferait croire à un espace vide (cf. lxRemplirCompteurs). */
.lx-choice-meta {
  font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cream3); border:1px solid var(--border); border-radius:20px; padding:3px 10px; transition:all .18s;
}
.lx-choice-cta {
  display:flex; align-items:center; gap:.4rem; margin-top:1.1rem; padding-top:.85rem;
  border-top:1px solid var(--border); font-size:12px; font-weight:600; letter-spacing:.02em;
  color:var(--cream2); transition:color .18s;
}
.lx-choice-arrow { transition:transform .18s; }
.lx-choice:hover .lx-choice-arrow { transform:translateX(4px); }

/* Couleur produit : Prompt Engine IA (or). */
.lx-choice-pe::before { background:var(--gold2); }
.lx-choice-pe .lx-choice-ico { color:var(--gold); }
.lx-choice-pe:hover { border-color:var(--gold2); box-shadow:0 16px 44px -14px var(--gold3); }
.lx-choice-pe:hover::before { background:var(--gold); }
.lx-choice-pe:hover .lx-choice-ico { border-color:var(--gold2); background:var(--gold3); }
.lx-choice-pe:hover .lx-choice-cta  { color:var(--gold); }
.lx-choice-pe:hover .lx-choice-meta { border-color:var(--gold2); color:var(--gold); }

/* Couleur produit : Prompt Engine Tube (rouge YouTube). */
.lx-choice-tube::before { background:#8a1c1c; }
.lx-choice-tube .lx-choice-ico { color:#FF3B3B; }
.lx-choice-tube:hover { border-color:#CC0000; box-shadow:0 16px 44px -14px rgba(255,0,0,.30); }
.lx-choice-tube:hover::before { background:#FF0000; }
.lx-choice-tube:hover .lx-choice-ico { border-color:#CC0000; background:rgba(255,0,0,.12); }
.lx-choice-tube:hover .lx-choice-cta  { color:#FF4444; }
.lx-choice-tube:hover .lx-choice-meta { border-color:#CC0000; color:#FF4444; }

.lx-remember {
  display:flex; align-items:center; gap:8px; justify-content:center;
  margin-top:1.75rem; font-size:11px; color:var(--cream3); cursor:pointer;
}
.lx-remember input { accent-color:var(--gold); cursor:pointer; }
.lx-note { font-size:10px; color:var(--cream3); text-align:center; margin-top:1rem; line-height:1.6; opacity:.75; }

/* Bascule d'un produit à l'autre, dans la barre du haut de Prompt Engine.
   Le style de `.pe-appswitch` est dans styles/tube.css (avec son jumeau
   `.tb-appswitch`) : les deux boutons doivent rester identiques, et deux
   règles dans deux fichiers finiraient par diverger. tube.css n'est PAS
   chargé par index.html, donc la règle est recopiée ici — c'est la seule
   duplication assumée, et elle est signalée des deux côtés. */
.pe-appswitch {
  background:transparent; border:1px solid var(--border2); border-radius:6px;
  padding:5px 12px; font-size:11px; color:var(--cream3); cursor:pointer;
  font-family:inherit; transition:all .15s; display:flex; align-items:center; gap:6px;
}
.pe-appswitch:hover { color:#FF4E45; border-color:#CC0000; }

/* COMPTE / MAIL SIM / PARTAGE */
.acc-info { font-size:11px; color:var(--cream2); background:var(--surface2); border:1px solid var(--border); border-left:3px solid var(--gold2); border-radius:0 var(--r) var(--r) 0; padding:.7rem .875rem; line-height:1.6; }
.mailsim-note { font-size:10.5px; color:var(--cream3); background:var(--warn-dim); border-left:3px solid var(--warn); border-radius:0 6px 6px 0; padding:.6rem .75rem; margin-bottom:1rem; line-height:1.6; }
.mailsim-mail { background:#fff; border-radius:8px; padding:1.125rem; color:#1a1a1a; }
.mailsim-head { border-bottom:1px solid #e5e5e5; padding-bottom:.7rem; margin-bottom:.9rem; font-size:11px; color:#444; display:flex; flex-direction:column; gap:3px; }
.mailsim-k { display:inline-block; width:44px; color:#999; font-weight:600; text-transform:uppercase; font-size:9px; letter-spacing:.08em; }
.mailsim-body { font-size:12.5px; line-height:1.7; color:#333; margin-bottom:1.125rem; }
.mailsim-btn { width:100%; background:#3d0b1c; border:none; border-radius:6px; padding:.7rem; font-size:12.5px; font-weight:600; color:#f5e6d3; cursor:pointer; font-family:inherit; transition:opacity .15s; }
.mailsim-btn:hover { opacity:.85; }
.share-row { display:flex; align-items:center; gap:8px; background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:.5rem .7rem; font-size:11.5px; color:var(--cream2); }
.share-row.editing { border-color:var(--gold2); background:var(--gold3); }
.share-empty { font-size:11px; color:var(--cream3); font-style:italic; padding:.4rem 0; }
.share-badge { background:var(--gold3); border:1px solid var(--gold2); border-radius:10px; color:var(--gold); font-size:9px; font-weight:600; padding:1px 7px; white-space:nowrap; }
.share-badge.partial { background:var(--vid-dim); border-color:var(--vid); color:var(--vid); }

/* ══════════════════════════════════════════════════════════
   DROITS D'ACCÈS SUR IA PARTAGÉE
   .perm-locked = section refusée au compte courant.
   On n'utilise PAS l'attribut `disabled` : un élément disabled
   n'émet aucun événement de survol, donc le `title` ne
   s'afficherait jamais. Le clic est intercepté en phase de
   capture par le listener global (voir applyPermissions).
   ══════════════════════════════════════════════════════════ */
.perm-locked { opacity:.32 !important; cursor:not-allowed !important; filter:grayscale(1); position:relative; }
.mode-btn.perm-locked:hover { background:var(--surface2) !important; border-color:var(--border) !important; }
.nav-tab.perm-locked:hover { color:var(--cream3) !important; }
.pd-item-edit.perm-locked:hover { background:none !important; color:var(--cream3) !important; border-color:transparent !important; }
.mode-btn.perm-locked::after { content:"🔒"; position:absolute; top:7px; right:9px; font-size:10px; filter:none; opacity:.85; }
.perm-locked * { pointer-events:none; }

/* ══════════════════════════════════════════════════════════
   FEATURES DE CONTENU (content.js) — créneaux + hashtags
   ══════════════════════════════════════════════════════════ */
.ct-slots { margin-top:.5rem; }
.ct-slots-head { font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold2); margin-bottom:5px; }
.ct-tz { color:var(--cream3); letter-spacing:.05em; text-transform:none; font-size:9px; }
.ct-slot-row { display:flex; flex-wrap:wrap; gap:5px; }
.ct-slot { display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  background:var(--surface2); border:1px solid var(--border2); border-radius:6px;
  padding:4px 9px; cursor:pointer; font-family:inherit; transition:all .15s; }
.ct-slot:hover { border-color:var(--gold2); }
.ct-slot-h { font-size:12px; color:var(--cream); font-variant-numeric:tabular-nums; }
.ct-slot:hover .ct-slot-h { color:var(--gold); }
.ct-slot-q { font-size:9px; color:var(--cream3); }

.ct-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:.45rem; }
.ct-tag-set { display:inline-flex; align-items:center; gap:5px; background:var(--surface2);
  border:1px solid var(--border2); border-radius:20px; padding:3px 10px; font-size:11px;
  color:var(--cream2); cursor:pointer; font-family:inherit; transition:all .15s; }
.ct-tag-set:hover { border-color:var(--gold2); color:var(--gold); }
.ct-tag-n { font-size:9px; color:var(--cream3); background:var(--surface3); border-radius:8px; padding:0 5px; }
.ct-tag-manage { background:transparent; border:1px dashed var(--border2); border-radius:20px;
  padding:3px 10px; font-size:11px; color:var(--cream3); cursor:pointer; font-family:inherit; transition:all .15s; }
.ct-tag-manage:hover { border-color:var(--gold2); color:var(--gold); }
.ct-tag-row { display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border);
  border-radius:6px; padding:.42rem .6rem; }
.ct-tag-row.editing { border-color:var(--gold2); }
.ct-tag-row-nom { font-size:12px; color:var(--cream); flex-shrink:0; }
.ct-tag-row-tags { flex:1; min-width:0; font-size:10px; color:var(--cream3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Compte « lecture seule » (droit du COMPTE, ≠ droits de partage).
   Étiquette du menu profil ; le verrouillage des boutons réutilise
   .perm-locked, posé par applyReadOnlyMode(). */
.um-role-tag { margin-top:6px; display:inline-block; font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--vid); background:var(--vid-dim);
  border:1px solid var(--vid); border-radius:4px; padding:2px 6px; }

/* Grille des droits (modal partage) */
.perm-grid { display:flex; flex-direction:column; gap:4px; }
.perm-row { display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:.42rem .6rem; cursor:pointer; transition:all .12s; }
.perm-row:hover { border-color:var(--border2); }
.perm-row.on { background:var(--gold3); border-color:var(--gold2); }
.perm-row.ro { cursor:default; }
.perm-row.ro:hover { border-color:var(--border); }
.perm-row input { accent-color:var(--gold); flex-shrink:0; cursor:pointer; }
.perm-row.ro input { cursor:default; }
.perm-ico { font-size:12px; width:16px; text-align:center; flex-shrink:0; }
.perm-txt { display:flex; flex-direction:column; flex:1; min-width:0; }
.perm-lbl { font-size:11.5px; color:var(--cream); font-weight:500; }
.perm-desc { font-size:9.5px; color:var(--cream3); }
.perm-state { font-size:9px; font-weight:600; padding:1px 6px; border-radius:9px; flex-shrink:0; }
.perm-state.ok { background:var(--sfw-dim); border:1px solid var(--sfw); color:var(--sfw); }
.perm-state.ko { background:var(--nsfw-dim); border:1px solid var(--nsfw); color:var(--nsfw); }
.perm-quick { background:none; border:1px solid var(--border2); border-radius:4px; color:var(--cream3); font-size:9px; font-family:inherit; padding:1px 6px; cursor:pointer; margin-left:5px; letter-spacing:0; text-transform:none; }
.perm-quick:hover { color:var(--gold); border-color:var(--gold2); }

/* Marqueur "IA partagée avec moi" */
.pd-guest-tag { background:var(--vid-dim); border:1px solid var(--vid); border-radius:9px; color:var(--vid); font-size:9px; font-weight:600; padding:1px 6px; white-space:nowrap; }
/* Bandeau latéral : uniquement sur l'IA ACTIVE, comme la couleur du nom.
   Or si elle est à moi, bleu si elle m'a été partagée. */
.pd-item-row.active       { box-shadow:inset 2px 0 0 var(--gold); }
/* Ligne « Profil maître » du sélecteur d'IA (Victor 20/07). */
.pd-master-row .pd-guest-tag { background:var(--surface3); border-color:var(--border2); color:var(--cream2); }
.pd-master-row.active { box-shadow:inset 2px 0 0 var(--cream2); }
.pd-item-row.guest.active { box-shadow:inset 2px 0 0 var(--vid); color:var(--vid); }
.ia-banner { font-size:11px; color:var(--cream2); border-radius:var(--r); padding:.55rem .8rem; line-height:1.5; }
.ia-banner.owner { background:var(--gold3); border:1px solid var(--gold2); }
.ia-banner.guest { background:var(--vid-dim); border:1px solid var(--vid); }
.ia-banner-btn { margin-top:.5rem; width:100%; background:transparent; border:1px solid var(--border2); border-radius:var(--r); color:var(--cream2); font-size:10.5px; font-family:inherit; padding:.35rem; cursor:pointer; transition:all .12s; }
.ia-banner.owner .ia-banner-btn:hover { color:var(--gold); border-color:var(--gold2); }
.ia-banner.guest .ia-banner-btn:hover { color:var(--vid); border-color:var(--vid); }
.share-scope { background:var(--surface2); border:1px solid var(--border); border-radius:var(--r); padding:.75rem .875rem; margin-bottom:1.125rem; }
.share-scope-label { font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--cream3); font-weight:600; margin-bottom:.6rem; }
.share-scope-grid { display:grid; grid-template-columns:1fr 1fr; gap:.4rem .75rem; font-size:11px; color:var(--cream2); }

/* ── MODAL CLÉS API ── */
.api-field-row {
  display:flex; flex-direction:column; gap:4px; margin-bottom:1rem;
}
.api-field-label {
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream3); font-weight:500; display:flex; align-items:center; gap:6px;
}
.api-field-badge {
  font-size:9px; padding:1px 6px; border-radius:3px; font-weight:500;
  text-transform:uppercase; letter-spacing:.05em;
}
.api-badge-required { background:var(--sfw-dim); color:var(--sfw); border:1px solid var(--sfw); }
.api-badge-optional { background:var(--surface3); color:var(--cream3); border:1px solid var(--border2); }
.api-badge-soon { background:var(--vid-dim); color:var(--vid); border:1px solid var(--vid); }
.api-field-input {
  width:100%; background:var(--bg); border:1px solid var(--border2);
  border-radius:6px; padding:.55rem .875rem; font-size:12px;
  color:var(--cream); font-family:monospace; outline:none;
  transition:border-color .15s;
}
.api-field-input:focus { border-color:var(--gold2); }
.api-field-input:disabled { opacity:.35; cursor:not-allowed; }
.api-field-hint { font-size:10px; color:var(--cream3); line-height:1.5; }

/* ── BOUTONS PROMPT BLOCK ── */
.pb-actions { display:flex; gap:5px; }
.pb-copy-btn {
  background:transparent; border:1px solid var(--border2); border-radius:5px;
  padding:3px 10px; font-size:10px; color:var(--cream3); cursor:pointer;
  font-family:inherit; transition:all .15s;
}
.pb-copy-btn:hover { color:var(--gold); border-color:var(--gold2); }
.pb-open-btn {
  background:var(--surface3); border:1px solid var(--border2); border-radius:5px;
  padding:3px 10px; font-size:10px; color:var(--cream2); cursor:pointer;
  font-family:inherit; transition:all .15s; display:flex; align-items:center; gap:4px;
}
.pb-open-btn:hover { background:var(--vid-dim); border-color:var(--vid); color:var(--vid); }
.pb-open-btn.sent { background:var(--sfw-dim); border-color:var(--sfw); color:var(--sfw); }

/* ── SIDEBAR DROITE — info boxes ── */
.model-info-box {
  background:var(--surface2); border:1px solid var(--border);
  border-left:3px solid var(--gold2); border-radius:0 var(--r) var(--r) 0;
  padding:.875rem 1rem;
}

/* Tuile « contenus en attente » (colonne droite, sous Claude · Victor 20/07). */
.pending-tile {
  display:flex; align-items:center; gap:9px; width:100%; margin:8px 0;
  padding:.7rem .9rem; cursor:pointer; font-family:inherit; text-align:left;
  border-radius:var(--r); transition:all .15s; font-size:12px; font-weight:600;
}
.pending-tile .pending-ico { font-size:15px; flex-shrink:0; }
.pending-tile .pending-label { flex:1; min-width:0; }
.pending-tile .pending-go { flex-shrink:0; font-size:15px; opacity:.6; }
/* Rien en attente : discret. */
.pending-tile.empty {
  background:var(--surface2); border:1px solid var(--border); color:var(--cream3); font-weight:500;
}
.pending-tile.empty:hover { border-color:var(--border2); color:var(--cream2); }
/* Des contenus attendent : mis en avant (ambre). */
.pending-tile.has-pending {
  background:var(--warn-dim); border:1px solid var(--warn); color:var(--warn);
  animation:pendingPulse 2s ease-in-out infinite;
}
.pending-tile.has-pending:hover { background:var(--warn); color:#12100c; }
@keyframes pendingPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(212,136,74,0); } 50%{ box-shadow:0 0 0 3px rgba(212,136,74,.18); } }
.model-info-title {
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold2); font-weight:500; margin-bottom:.5rem;
}

/* ── SIDEBAR DROITE — zone preview (standby) ── */
.preview-zone {
  border:1px dashed var(--border2); border-radius:var(--r);
  padding:1rem; text-align:center; color:var(--cream3);
  font-size:11px; line-height:1.6;
}
.preview-zone-icon { font-size:22px; margin-bottom:6px; opacity:.35; }

/* ── ONGLET LORA ── */
.lora-view { flex:1; display:flex; flex-direction:column; min-height:0; }
.lora-layout { display:flex; flex:1; min-height:0; }
.lora-sidebar {
  width:260px; flex-shrink:0; border-right:1px solid var(--border);
  padding:1.25rem; display:flex; flex-direction:column; gap:1rem;
  background:var(--surface); overflow-y:auto;
}
.lora-main { flex:1; overflow-y:auto; padding:1.5rem; }
/* Le badge de progression est l'info clé de l'onglet LoRA : il est centré
   sur sa ligne (position absolue = centrage réel, indépendant du titre). */
.lora-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; position:relative; min-height:34px; }
.lora-header .lora-count-badge { position:absolute; left:50%; transform:translateX(-50%); }
.lora-title { font-family:var(--font-display); font-size:16px; color:var(--gold); }
.lora-label { font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:var(--cream3); font-weight:500; }
.lora-info {
  background:var(--vid-dim); border:1px solid var(--vid);
  border-radius:var(--r); padding:.75rem 1rem;
  font-size:11px; color:var(--cream2); line-height:1.6;
}
.lora-info strong { color:var(--vid); }
.lora-count-badge {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--gold3); border:1px solid var(--gold2); border-radius:16px;
  font-size:13px; color:var(--gold); padding:6px 18px; font-weight:600;
  letter-spacing:.02em; white-space:nowrap;
  box-shadow:0 0 0 4px rgba(201,169,110,.06);
}
/* Pastille de progression à gauche du compteur */
.lora-count-badge::before {
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--gold2); flex-shrink:0;
}
.lora-count-badge.complete { border-color:var(--sfw); color:var(--sfw); background:var(--sfw-dim); box-shadow:0 0 0 4px rgba(90,158,114,.10); }
.lora-count-badge.complete::before { background:var(--sfw); }
/* Version compacte dans la sidebar (place restreinte) */
#lora-count-sidebar { font-size:10px; padding:2px 10px; border-radius:10px; box-shadow:none; }
#lora-count-sidebar::before { display:none; }
.lora-prompt-block {
  background:var(--surface); border:1px solid var(--border);
  border-left:3px solid var(--border2); border-radius:0 var(--r) var(--r) 0;
  margin-bottom:8px; overflow:hidden; transition:border-left-color .15s;
}
.lora-prompt-block:hover { border-left-color:var(--vid); }
.lp-header {
  padding:.5rem 1rem; display:flex; align-items:center;
  justify-content:space-between; background:var(--surface2);
  border-bottom:1px solid var(--border);
}
.lp-num { font-size:10px; letter-spacing:.15em; color:var(--cream3); text-transform:uppercase; font-weight:500; }
.lp-tag { font-size:10px; color:var(--vid); background:var(--vid-dim); border:1px solid var(--vid); border-radius:4px; padding:1px 7px; }
.lp-body { padding:.625rem 1rem; display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.lp-text { font-size:11.5px; color:var(--cream); font-family:'Courier New',monospace; line-height:1.65; flex:1; word-break:break-word; }
.lp-actions { display:flex; gap:5px; flex-shrink:0; align-items:flex-start; padding-top:2px; }

/* ── BOUTON VALIDER LoRA ── */
.lora-validate-btn {
  background:transparent; border:1px solid var(--border2); border-radius:5px;
  padding:3px 10px; font-size:10px; color:var(--cream3); cursor:pointer;
  font-family:inherit; transition:all .15s; white-space:nowrap; min-width:64px; text-align:center;
  position:relative;
}
.lora-validate-btn:hover { border-color:var(--sfw); color:var(--sfw); }
.lora-validate-btn.validated { background:var(--sfw-dim); border-color:var(--sfw); color:var(--sfw); font-weight:500; }
/* Hover sur validé : fond rouge + texte "✕ Annuler" via font-size 0 sur le span + ::after */
.lora-validate-btn.validated:hover { background:var(--nsfw-dim); border-color:var(--nsfw); color:var(--nsfw); font-weight:500; }
.lora-validate-btn.validated .lora-btn-label { display:inline; }
.lora-validate-btn.validated:hover .lora-btn-label { display:none; }
.lora-validate-btn.validated::after { content:""; display:none; }
.lora-validate-btn.validated:hover::after { content:"✕ Annuler"; display:inline; }

/* ── STATUT HISTORIQUE envoyé vers OpenArt ── */
.hi-sent-badge {
  font-size:9px; background:var(--vid-dim); color:var(--vid);
  border:1px solid var(--vid); border-radius:4px; padding:1px 6px;
  font-weight:500; letter-spacing:.05em;
}


/* ── HISTORY FILTER SIDEBAR ── */
.hist-filter-sidebar {
  width:260px; flex-shrink:0; border-right:1px solid var(--border);
  background:var(--surface); display:flex; flex-direction:column;
  overflow:hidden;
}
/* Le scroll est passé sur cette zone interne pour que le bouton
   Corbeille reste collé en bas de la colonne (cf. .trash-btn). */
.hist-filter-scroll {
  flex:1; overflow-y:auto; padding:1.25rem; display:flex; flex-direction:column; gap:4px;
}
/* Corbeille — épinglée en pied de colonne, dans l'esprit du pied d'action
   des panneaux API (.api-col-save). */
.trash-btn {
  flex-shrink:0; display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:.75rem 1rem; background:var(--surface2);
  border:none; border-top:1px solid var(--border);
  font-family:inherit; font-size:12px; font-weight:600; letter-spacing:.02em;
  color:var(--cream3); cursor:pointer; transition:all .15s;
}
.trash-btn:hover { background:var(--surface3); color:var(--cream2); }
.trash-btn-ico { font-size:14px; line-height:1; }
.trash-btn-count {
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--border2); color:var(--cream2);
  font-size:10px; font-weight:700; line-height:1;
}
.trash-btn:hover .trash-btn-count { background:var(--nsfw-dim); color:var(--nsfw); }
/* Strictement identique à .sidebar-label du Générateur : même font-size,
   même letter-spacing (.25em, pas .2em) et surtout AUCUN padding-top —
   c'est lui qui décalait le 1er titre de 4px au changement d'onglet. */
.hist-fs-label { font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:var(--cream3); font-weight:500; padding:0 0 .5rem; }
/* Bloc derrière chaque groupe de filtres (Marcel) : même fond que les tuiles
   de l'app (surface2 + bordure + rayon), aucun style nouveau. */
.hist-fs-card {
  background:var(--surface2); border:1px solid var(--border); border-radius:var(--r);
  padding:.4rem; display:flex; flex-direction:column; gap:3px;
}
/* Sur ce fond surface2, le survol des boutons monte d'un cran pour rester lisible. */
.hist-fs-card .hist-filter-btn:hover,
.hist-fs-card .hist-date-btn:hover { background:var(--surface3); color:var(--cream2); }
.hist-filter-btn {
  width:100%; text-align:left; background:transparent; border:none;
  border-radius:6px; padding:.5rem .75rem; font-size:12px; color:var(--cream3);
  cursor:pointer; font-family:inherit; transition:all .15s;
}
.hist-filter-btn:hover { background:var(--surface2); color:var(--cream2); }
.hist-filter-btn.active { background:var(--gold3); color:var(--gold); font-weight:500; }
/* Filtre de date — classe distincte de .hist-filter-btn pour ne pas être
   désactivée par la synchronisation des filtres "type de contenu". */
.hist-date-btn {
  display:block; width:100%; text-align:left; background:none; border:none;
  padding:.5rem .75rem; font-size:12px; color:var(--cream3); cursor:pointer;
  font-family:inherit; border-radius:6px; transition:all .12s;
}
.hist-date-btn:hover { background:var(--surface2); color:var(--cream2); }
.hist-date-btn.active { background:var(--gold3); color:var(--gold); font-weight:500; }
.hist-date-range { padding:.5rem .75rem 0; display:flex; flex-direction:column; gap:5px; }
.hdr-row { display:flex; align-items:center; gap:6px; }
.hdr-row span { font-size:10px; color:var(--cream3); width:18px; flex-shrink:0; }
.hdr-row input {
  flex:1; min-width:0; background:var(--surface2); border:1px solid var(--border2);
  border-radius:4px; padding:3px 5px; font-size:10.5px; color:var(--cream);
  font-family:inherit; outline:none; color-scheme:dark;
}
.hdr-row input:focus { border-color:var(--gold2); }
.hdr-clear {
  background:none; border:1px solid var(--border2); border-radius:4px;
  color:var(--cream3); font-size:10px; padding:3px; cursor:pointer;
  font-family:inherit; transition:all .12s; margin-top:2px;
}
.hdr-clear:hover { border-color:var(--gold2); color:var(--gold); }
.hist-ia-filter-btn {
  width:100%; text-align:left; background:transparent; border:none;
  border-radius:6px; padding:.45rem .75rem; font-size:11px; color:var(--cream3);
  cursor:pointer; font-family:inherit; transition:all .15s; display:flex; align-items:center; gap:6px;
}
.hist-ia-filter-btn:hover { background:var(--surface2); color:var(--cream2); }
.hist-ia-filter-btn.active { background:var(--gold3); color:var(--gold); }
.hist-ia-dot { width:5px; height:5px; border-radius:50%; background:var(--gold); flex-shrink:0; }

/* ══════════════════════════════════════════════════════════
   BLOCS PLIABLES DE LA SIDEBAR DROITE
   Repliés, ils doivent rester lisibles d'un coup d'œil : une
   pastille résume l'état des services du bloc.
   vert = tout démarré · orange = partiel · rouge = rien
   gris = pas encore sondé
   ══════════════════════════════════════════════════════════ */
/* L'en-tête est maintenant enveloppé (.sb-fold-head-wrap) pour loger
   l'icône « i » à côté du bouton de repli sans la rendre cliquable-repli.
   Conséquence : les sélecteurs enfant-direct `>` visaient .sb-fold-head
   depuis .sb-fold — ils passent par le wrapper (Marcel, 16/07). */
.sb-fold-head-wrap { display:flex; align-items:center; position:relative; }
.sb-fold-head {
  display:flex; align-items:center; gap:7px; flex:1; min-width:0;
  background:none; border:none; padding:.75rem .5rem .75rem 1rem; cursor:pointer;
  font-family:inherit; text-align:left; transition:background .12s;
}
.sb-fold-head:hover { background:var(--surface3); }
/* Flèche de pliage à GAUCHE de la tuile (Victor, 18/07). On réordonne en
   flex plutôt que de toucher le DOM : flèche à gauche, puis titre, puis
   pastille poussée à droite. */
.sb-fold-arrow { font-size:10px; color:var(--cream3); flex-shrink:0; transition:transform .15s; order:1; }
.sb-fold-title { font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:var(--cream3); font-weight:500; order:2; }
.sb-fold.open .sb-fold-head .sb-fold-arrow { transform:rotate(90deg); }
/* Pastille de synthèse : visible UNIQUEMENT replié — dépliée, l'état
   est déjà lisible ligne par ligne, elle ferait doublon. Poussée à droite. */
.sb-fold-pill {
  margin-left:auto; order:3; flex-shrink:0; width:9px; height:9px; border-radius:50%;
  background:var(--cream3); transition:background .2s;
}
.sb-fold.open .sb-fold-head .sb-fold-pill { display:none; }
.sb-fold-pill.up      { background:var(--sfw); }
.sb-fold-pill.partial { background:var(--warn); }
.sb-fold-pill.down    { background:var(--nsfw); }
.sb-fold-body { border-top:1px solid var(--border); }
.sb-fold:not(.open) > .sb-fold-body { display:none; }

/* Bouton « Actualiser » (au-dessus du bloc Moteur de génération, Victor 20/07).
   Force un contrôle immédiat de l'état moteur + services. */
.svc-refresh-btn {
  display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
  margin:2px 0 8px; padding:.5rem .75rem; cursor:pointer;
  background:var(--surface2); border:1px solid var(--border); border-radius:var(--r);
  color:var(--cream2); font-family:inherit; font-size:11px; font-weight:600;
  letter-spacing:.04em; transition:background .12s, border-color .12s;
}
.svc-refresh-btn:hover:not(:disabled) { background:var(--surface3); border-color:var(--cream3); }
.svc-refresh-btn:disabled { opacity:.6; cursor:default; }
.svc-refresh-icon { display:inline-block; font-size:13px; line-height:1; }
.svc-refresh-icon.spinning { animation:svcSpin .8s linear infinite; }
@keyframes svcSpin { from { transform:rotate(0); } to { transform:rotate(360deg); } }
/* Démarrer : rebond (Victor 20/07) — plus vivant qu'une rotation. */
.svc-refresh-icon.bouncing { animation:svcBounce .6s cubic-bezier(.28,.84,.42,1) infinite; }
@keyframes svcBounce {
  0%,100% { transform:translateY(0) scale(1); }
  30%     { transform:translateY(-5px) scale(1.12); }
  55%     { transform:translateY(1px) scale(.94); }
  75%     { transform:translateY(-2px) scale(1.04); }
}
/* Replié, l'en-tête ne garde aucune bordure : le trait est porté par
   .sb-fold-body, qui est masqué. Rien à annuler. */

/* ══ ICÔNE « i » + INFOBULLE (en-têtes de la colonne droite) ══
   La bulle est en position:fixed et repositionnée en JS. Raison : la
   colonne droite a `overflow-y:auto`, une bulle en absolute y serait
   rognée net par le bord de la colonne. */
.sb-info {
  flex-shrink:0; width:15px; height:15px; margin-right:10px;
  border:1px solid var(--border2); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:Georgia, serif; font-style:italic; font-size:10px; font-weight:600;
  color:var(--cream3); cursor:help; user-select:none;
  transition:color .12s, border-color .12s, background .12s;
}
.sb-info:hover, .sb-info:focus-visible {
  color:var(--gold); border-color:var(--gold2); background:var(--gold3); outline:none;
}
.sb-tip {
  position:fixed; z-index:900; width:290px; max-width:calc(100vw - 24px);
  background:var(--surface); border:1px solid var(--border2);
  border-left:3px solid var(--gold2); border-radius:0 8px 8px 0;
  padding:.8rem .9rem; font-family:var(--font-ui); font-style:normal;
  font-size:11.5px; line-height:1.65; color:var(--cream2); text-align:left;
  font-weight:400; letter-spacing:normal; text-transform:none;
  box-shadow:0 10px 34px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform:translateY(3px);
  transition:opacity .14s, transform .14s, visibility .14s;
  pointer-events:none;
}
.sb-info:hover .sb-tip, .sb-info:focus-visible .sb-tip { opacity:1; visibility:visible; transform:translateY(0); }
.sb-tip strong { color:var(--gold); display:block; margin-bottom:.25rem; }
.sb-tip b { color:var(--cream); font-weight:600; }
.sb-tip code {
  background:var(--surface3); border:1px solid var(--border); border-radius:3px;
  padding:0 4px; font-family:'SF Mono',Consolas,monospace; font-size:10.5px; color:var(--gold);
}
.sb-tip-sep { display:block; height:1px; background:var(--border); margin:.55rem 0; }

/* ── RESPONSIVE MINIMAL — n'affecte que les écrans étroits, desktop inchangé ── */
@media (max-width: 1024px){
  .sidebar, .sidebar-right { width:214px; padding:1rem .85rem; }
  .doc-sidebar { width:214px; }
  .donnees-tabs { width:186px; }
  .key-input { width:120px; }
  .nav-tab { padding:.75rem .8rem; }
}
@media (max-width: 860px){
  .sidebar, .sidebar-right, .doc-sidebar { width:188px; padding:.85rem .7rem; }
  .topbar { padding:0 .75rem; gap:.5rem; }
  .brand-sub { display:none; }
  .nav-quick-link { padding:4px 7px; }
  .api-tile-grid { grid-template-columns:1fr; }
  .donnees-content, .history-view { padding:1.25rem 1rem; }
}
/* ── Barre du haut sur écran étroit (23/07) ──
   La bulle centrale était centrée en ABSOLU : quand la fenêtre rétrécit, la
   marque (gauche) et les boutons (droite) grandissaient vers elle et la
   recouvraient. Sous 1100px on la remet EN FLUX : les trois blocs se partagent
   la barre, plus aucun chevauchement. La marque et les libellés de boutons se
   réduisent d'abord, la bulle rétrécit avec une ellipse plutôt que déborder. */
@media (max-width: 1100px){
  .header-center { position:static; transform:none; margin:0 auto; min-width:0; }
  .topbar { gap:.5rem; }
  .header-center .pd-trigger { max-width:38vw; }
  .header-center .pd-trigger > span:not(.pd-dot):not(.pd-arrow){ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
@media (max-width: 720px){
  .brand-sep, .brand-sub { display:none; }
  .topbar { padding:0 .6rem; gap:.4rem; }
  .api-keys-btn { padding:5px 9px; }
  /* Le pseudo peut être long : on l'écrête plutôt que de pousser la barre. */
  #user-bubble-name, #tb-user-name { max-width:22vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .header-center .pd-trigger { max-width:44vw; }
}

/* ══ TABLEAU DE BORD (onglet de synthèse) ══
   Charte AEL Studio : variables existantes (--gold, --cream, --sfw…). */
#dash-root { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:1.5rem 1.75rem 2.5rem; }
.dsh-empty { color:var(--cream3); padding:13vh 2rem 2rem; text-align:center; }
/* En-tête de page : donne un vrai point de départ à la vue (elle « commençait »
   directement sur les chiffres, d'où l'impression de brouillon). */
.dsh-topbar { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-bottom:1.1rem; margin-bottom:1.25rem; border-bottom:1px solid var(--border); }
.dsh-h1 { font-family:var(--font-display); font-size:20px; color:var(--gold); line-height:1.2; }
.dsh-h1sub { font-size:12px; color:var(--cream3); margin-top:4px; }
.dsh-today { font-size:12px; color:var(--cream2); text-transform:capitalize; white-space:nowrap; }
/* Intertitre de section (« Chiffres clés », « Détail ») pour hiérarchiser. */
.dsh-section { margin:0 0 .75rem; }
.dsh-section + .dsh-grid, .dsh-section + .dsh-kpis { margin-top:0; }
.dsh-grid + .dsh-section, .dsh-kpis + .dsh-section { margin-top:1.5rem; }
.dsh-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:0; }
.dsh-kpi { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:13px 14px 11px; }
.dsh-kpi-l { font-size:11px; color:var(--cream3); margin-bottom:7px; }
.dsh-kpi-v { font-size:24px; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.dsh-kpi-s { font-size:11px; color:var(--cream2); margin-top:3px; }
.dsh-up { color:var(--sfw); } .dsh-gold { color:var(--gold); }
.dsh-kpi-v.up,.dsh-up { color:var(--sfw); } .dsh-kpi-v.warn { color:var(--warn); } .dsh-kpi-v.down { color:var(--nsfw); }
.dsh-grid { display:grid; grid-template-columns:1.55fr 1fr; gap:16px; align-items:start; }
.dsh-col { display:flex; flex-direction:column; gap:16px; min-width:0; }
.dsh-panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:18px; }
.dsh-kpi { transition:border-color .15s; }
.dsh-kpi:hover { border-color:var(--border2); }
.dsh-phead { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.dsh-ptitle { font-size:13px; font-weight:600; color:var(--cream); }
.dsh-pill { font-size:10px; padding:2px 8px; border-radius:20px; font-weight:500; }
.dsh-pill.ready { background:var(--sfw-dim); color:var(--sfw); border:1px solid var(--sfw); }
.dsh-pill.soon { background:var(--surface3); color:var(--cream3); border:1px solid var(--border2); }
.dsh-eyebrow { font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--cream3); font-weight:500; margin-bottom:9px; }
.dsh-sub { border-top:1px solid var(--border); margin-top:14px; padding-top:13px; }
.dsh-bars { display:flex; align-items:flex-end; gap:6px; height:126px; padding-top:6px; }
.dsh-b { flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:5px; height:100%; }
.dsh-b i { display:block; background:var(--gold2); border-radius:4px 4px 0 0; min-height:2px; }
/* Week-end d'abord, PUIS aujourd'hui : à spécificité égale, la dernière règle
   gagne — aujourd'hui doit primer même un dimanche (Victor, 20/07). Couleur
   « Aujourd'hui » passée au bleu (--vid) : le doré était trop proche de
   « Semaine » (--gold2). */
.dsh-b.wk i { background:var(--surface3); }
.dsh-b.today i { background:var(--vid); }
.dsh-b span { font-size:9.5px; color:var(--cream3); text-align:center; }
.dsh-legend { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:12px; font-size:11.5px; color:var(--cream2); }
.dsh-legend span { display:flex; align-items:center; gap:6px; }
.sw { width:10px; height:10px; border-radius:3px; display:inline-block; flex-shrink:0; }
.dsh-split { display:grid; grid-template-columns:140px 1fr; gap:18px; align-items:center; }
.dsh-donut { position:relative; width:140px; height:140px; margin:0 auto; }
.dsh-donut svg { display:block; }
.dsh-mid { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.dsh-mid b { font-size:21px; font-weight:600; font-variant-numeric:tabular-nums; }
.dsh-mid small { font-size:10px; color:var(--cream3); letter-spacing:.1em; text-transform:uppercase; }
.dsh-rows { display:flex; flex-direction:column; gap:9px; }
.dsh-row { display:grid; grid-template-columns:14px 1fr auto; align-items:center; gap:9px; font-size:12.5px; }
.dsh-track { height:7px; border-radius:5px; background:var(--surface3); overflow:hidden; }
.dsh-track i { display:block; height:100%; border-radius:5px; }
.dsh-n { color:var(--cream2); font-size:12px; white-space:nowrap; }
/* Bénéfices Fanvue (Victor, 20/07). */
.dsh-fv-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.dsh-fv-cell { background:var(--surface2); border:1px solid var(--border); border-radius:9px; padding:11px 12px; }
.dsh-fv-v { font-size:18px; font-weight:700; color:var(--gold); font-variant-numeric:tabular-nums; }
.dsh-fv-l { font-size:10.5px; color:var(--cream3); margin-top:2px; }
.dsh-fv-buyer { display:grid; grid-template-columns:20px 1fr auto; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--border); font-size:12.5px; }
.dsh-fv-buyer:last-child { border-bottom:none; }
.dsh-fv-rank { width:20px; height:20px; display:flex; align-items:center; justify-content:center; background:var(--gold3); color:var(--gold); border-radius:50%; font-size:11px; font-weight:700; }
.dsh-fv-name { color:var(--cream2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dsh-fv-amt { color:var(--cream); font-weight:600; font-variant-numeric:tabular-nums; }
.dsh-fv-wait { font-size:12px; color:var(--cream3); line-height:1.6; background:var(--surface2); border:1px dashed var(--border2); border-radius:9px; padding:12px; }
.dsh-cal { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.dsh-calh,.dsh-cald { font-size:11px; text-align:center; border-radius:7px; position:relative; }
.dsh-calh { color:var(--cream3); font-size:9.5px; text-transform:uppercase; padding:2px 0; }
.dsh-cald { background:var(--surface2); color:var(--cream2); padding:7px 0; }
.dsh-cald.mut { background:none; }
.dsh-cald.tod { outline:1px solid var(--gold2); }
.dsh-cald.ev { background:var(--gold3); color:var(--gold); border:1px solid var(--gold2); font-weight:600; }
.dsh-pt { position:absolute; bottom:3px; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; }
.dsh-evlist { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.dsh-upi { display:flex; align-items:center; gap:10px; font-size:12.5px; }
.dsh-cd { margin-left:auto; font-size:11px; color:var(--gold); font-weight:600; white-space:nowrap; }
.dsh-arch { display:flex; flex-direction:column; }
.dsh-node { display:flex; align-items:center; gap:10px; background:var(--surface2); border:1px solid var(--border2); border-radius:9px; padding:9px 11px; font-size:12.5px; }
.dsh-node .dsh-meta { margin-left:auto; font-size:11px; color:var(--cream3); }
.dsh-st { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.up-ok { background:var(--sfw); } .up-warn { background:var(--warn); } .up-off { background:var(--nsfw); } .up-mut { background:var(--cream3); }
.dsh-conn { width:2px; height:13px; background:var(--border2); margin:0 auto; }
.dsh-pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dsh-gauges { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.dsh-ga { display:grid; grid-template-columns:92px 1fr auto; align-items:center; gap:10px; font-size:12px; font-variant-numeric:tabular-nums; }
.dsh-feed { display:flex; flex-direction:column; }
.dsh-fi { display:grid; grid-template-columns:8px 1fr auto; gap:10px; align-items:start; padding:9px 0; border-top:1px solid var(--border); }
.dsh-fi:first-child { border-top:none; }
.dsh-fi .dsh-st { margin-top:5px; }
.dsh-act { font-size:12.5px; } .dsh-who { font-size:11px; color:var(--cream3); }
.dsh-t { font-size:10.5px; color:var(--cream3); white-space:nowrap; }
.dsh-soongrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dsh-soonbox { background:var(--surface2); border:1px dashed var(--border2); border-radius:10px; padding:13px; }
.dsh-soonbox .h { font-size:12.5px; font-weight:600; margin-bottom:6px; color:var(--cream); }
.dsh-soonbox p { margin:0; font-size:11.5px; color:var(--cream3); line-height:1.5; }
@media(max-width:1000px){ .dsh-kpis{ grid-template-columns:repeat(2,1fr); } .dsh-grid{ grid-template-columns:1fr; } }
@media(max-width:560px){ .dsh-kpis{ grid-template-columns:repeat(2,1fr); } .dsh-split{ grid-template-columns:1fr; } .dsh-soongrid{ grid-template-columns:1fr; } }

/* Bouton « ✨ Améliorer » (outils IA de texte) */
.ai-improve-btn {
  font-family:inherit; font-size:11px; font-weight:500; cursor:pointer;
  color:var(--gold); background:var(--gold3); border:1px solid var(--gold2);
  border-radius:6px; padding:3px 9px; transition:all .12s; white-space:nowrap;
}
.ai-improve-btn:hover:not(:disabled) { background:var(--gold2); color:var(--cream); }
.ai-improve-btn:disabled { opacity:.6; cursor:default; }

/* Cases conformité du calendrier (garde-fou §2) */
.cal-compliance { display:flex; flex-direction:column; gap:7px; margin-top:.6rem; padding-top:.6rem; border-top:1px solid var(--border); }
.cal-check { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--cream2); cursor:pointer; }
.cal-check input { accent-color:var(--gold); width:15px; height:15px; flex-shrink:0; cursor:pointer; }
.cal-check.locked { cursor:default; } .cal-check.locked input { cursor:default; }

/* ══ BIBLIOTHÈQUE (Feature 3) ══ */
#lib-root { padding:1.25rem 1.4rem 2rem; }
.lib-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:14px; flex-wrap:wrap; }
.lib-title { font-family:var(--font-display); font-size:16px; color:var(--gold); }
.lib-sub { font-size:12px; color:var(--cream3); margin-top:3px; }
.lib-addbtn { font-family:inherit; font-size:12.5px; font-weight:500; cursor:pointer; color:#1a1206; background:var(--gold); border:1px solid var(--gold); border-radius:8px; padding:8px 14px; transition:all .12s; }
.lib-addbtn:hover { background:var(--gold2); color:var(--cream); }
.lib-filters { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.lib-chips { display:flex; flex-wrap:wrap; gap:6px; }
.lib-chip { font-family:inherit; font-size:11.5px; cursor:pointer; color:var(--cream2); background:var(--surface2); border:1px solid var(--border); border-radius:20px; padding:4px 11px; transition:all .12s; }
.lib-chip:hover { border-color:var(--gold2); color:var(--cream); }
.lib-chip.on { color:var(--gold); background:var(--gold3); border-color:var(--gold2); }
.lib-drop { border:1px dashed transparent; border-radius:12px; transition:border-color .12s; }
.lib-drop.over { border-color:var(--gold2); background:var(--gold3); }
.lib-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
.lib-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
/* Contenu déjà « Utilisé » : grisé pour le distinguer des images encore dispo. */
.lib-card.used { opacity:.62; }
.lib-card.used .lib-thumb { filter:grayscale(.85); }
.lib-card.used:hover { opacity:.9; }
.lib-thumb { position:relative; aspect-ratio:3/4; background-size:cover; background-position:center; background-color:var(--surface3); }
.lib-badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:600; color:#12100c; padding:2px 8px; border-radius:20px; }
.lib-status { position:absolute; top:8px; right:8px; font-size:10px; font-weight:500; padding:2px 8px; border-radius:20px; }
.lib-status.warn { background:var(--warn-dim); color:var(--warn); } .lib-status.ok { background:var(--sfw-dim); color:var(--sfw); }
.lib-status.off { background:var(--nsfw-dim); color:var(--nsfw); } .lib-status.mut { background:var(--surface3); color:var(--cream3); }
/* Badge « IA propriétaire » sur les vignettes, vue Profil maître (Victor 20/07). */
.lib-persona { position:absolute; bottom:8px; left:8px; max-width:calc(100% - 16px); font-size:10px; font-weight:600; color:var(--cream); background:rgba(0,0,0,.62); padding:2px 8px; border-radius:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lib-card-body { padding:10px; display:flex; flex-direction:column; gap:7px; }
.lib-type-sel, .lib-tags { font-family:inherit; font-size:11.5px; color:var(--cream2); background:var(--surface2); border:1px solid var(--border2); border-radius:6px; padding:5px 7px; width:100%; }
.lib-actions { display:flex; gap:6px; flex-wrap:wrap; }
.lib-btn { flex:1; font-family:inherit; font-size:11px; font-weight:500; cursor:pointer; color:var(--cream2); background:var(--surface2); border:1px solid var(--border2); border-radius:6px; padding:6px 4px; transition:all .12s; white-space:nowrap; }
.lib-btn:hover { border-color:var(--gold2); color:var(--cream); }
.lib-btn.ok { color:var(--sfw); border-color:var(--sfw); } .lib-btn.ok:hover { background:var(--sfw-dim); }
.lib-btn.off { color:var(--nsfw); border-color:var(--nsfw); } .lib-btn.off:hover { background:var(--nsfw-dim); }
.lib-btn.plan { color:#1a1206; background:var(--gold); border-color:var(--gold); } .lib-btn.plan:hover { background:var(--gold2); color:var(--cream); }
.lib-empty { grid-column:1/-1; color:var(--cream3); margin-top:11vh; padding:2.5rem 1rem; text-align:center; border:1px dashed var(--border2); border-radius:12px; }

/* ══ Bibliothèque : miniature cliquable + visionneuse (lightbox) ══ */
.lib-thumb { cursor:zoom-in; }
.lib-zoom { position:absolute; bottom:8px; right:8px; width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:13px; background:rgba(0,0,0,.55); color:var(--cream); opacity:0; transition:opacity .15s; pointer-events:none; }
.lib-thumb:hover .lib-zoom { opacity:1; }
.lib-viewer-overlay { padding:0; background:rgba(0,0,0,.9); }
.lib-viewer-stage { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; max-width:92vw; max-height:94vh; }
.lib-viewer-img { max-width:92vw; max-height:82vh; object-fit:contain; border-radius:8px; box-shadow:0 12px 48px rgba(0,0,0,.6); background:var(--surface3); }
.lib-viewer-bar { display:flex; align-items:center; gap:12px; margin-top:12px; width:100%; background:var(--surface); border:1px solid var(--border2); border-radius:10px; padding:8px 12px; }
.lib-viewer-meta { display:flex; align-items:center; gap:8px; flex:1; min-width:0; font-size:12px; color:var(--cream2); flex-wrap:wrap; }
.lib-viewer-pos { font-size:11px; color:var(--cream3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.lib-viewer-close { flex-shrink:0; width:28px; height:28px; border-radius:7px; border:1px solid var(--border2); background:var(--surface2); color:var(--cream2); cursor:pointer; font-size:14px; line-height:1; }
.lib-viewer-close:hover { border-color:var(--nsfw); color:var(--nsfw); }
.lib-viewer-nav { flex-shrink:0; width:48px; height:48px; margin:0 10px; border-radius:50%; border:1px solid var(--border2); background:rgba(20,18,14,.7); color:var(--cream); font-size:26px; line-height:1; cursor:pointer; transition:all .12s; }
.lib-viewer-nav:hover { background:var(--gold); color:#1a1206; border-color:var(--gold); }

/* ══ Corbeille : lignes du modal (partagées Historique + Bibliothèque) ══ */
.trash-row { display:flex; align-items:center; gap:10px; padding:8px 10px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--r); }
.trash-row-ico { font-size:16px; line-height:1; width:32px; text-align:center; flex-shrink:0; }
.trash-row-thumb { width:34px; height:44px; flex-shrink:0; border-radius:5px; background-size:cover; background-position:center; background-color:var(--surface3); border:1px solid var(--border2); }
.trash-row-txt { flex:1; min-width:0; }
.trash-row-title { font-size:12px; color:var(--cream); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trash-row-sub { font-size:10.5px; color:var(--cream3); margin-top:2px; }
.trash-row-sub.soon { color:var(--warn); }
.trash-restore { flex-shrink:0; font-family:inherit; font-size:11px; cursor:pointer; color:var(--cream2); background:var(--surface3); border:1px solid var(--border2); border-radius:6px; padding:5px 9px; transition:all .12s; }
.trash-restore:hover { border-color:var(--sfw); color:var(--sfw); }
.trash-empty-state { text-align:center; padding:2rem 1rem; color:var(--cream3); }
.tes-ico { font-size:28px; opacity:.6; margin-bottom:.5rem; }
.tes-txt { font-size:12px; line-height:1.6; }

/* Animation de suppression : l'élément s'écrase sur lui-même puis disparaît.
   Ajoutée par crushRemove() (utils.js) avant le retrait réel des données. */
@keyframes crushOut {
  0%   { transform:scale(1,1);       opacity:1; }
  30%  { transform:scale(1.04,.9);   opacity:1; }
  100% { transform:scale(.25,0);     opacity:0; }
}
.crushing { animation:crushOut .3s cubic-bezier(.55,0,.75,.2) forwards; transform-origin:center; pointer-events:none; overflow:hidden; }
@media (prefers-reduced-motion: reduce) { .crushing { animation:none; opacity:0; } }

/* En-tête des cases de prompt dans les Paramètres du profil IA (libellé + ✨ Améliorer) */
.params-prompt-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.params-prompt-lbl { font-size:11px; color:var(--cream3); letter-spacing:.02em; }

/* ══════════════════════════════════════════════════════════
   CHOIX DE L'IA DE TRAVAIL (« La centrale » · generator.js)
   ------------------------------------------------------------
   ⚠️ Ce bloc s'appelait « Droits du compte parent ». Le filtre global
   a été retiré le 22/07 : il ne reste que la LISTE du popup
   « Sur quelle IA ? », partagée par le Générateur et l'onglet API.
   Les styles de cases à cocher, de pastilles et de résumé qui
   servaient au volet de l'encadré droit ont été supprimés avec lui —
   du CSS que plus rien n'utilise finit toujours par être recopié.
   ══════════════════════════════════════════════════════════ */
.pf-list { display:flex; flex-direction:column; gap:4px; max-height:300px; overflow-y:auto;
  background:var(--surface2); border:1px solid var(--border); border-radius:var(--r); padding:.4rem; }
.pf-empty { font-size:11.5px; color:var(--cream3); font-style:italic; padding:.6rem; text-align:center; }
/* Bandeau « Tu travailles sur … » + choix de l'IA cible (Centrale).
   Le MÊME dans le Générateur et dans l'onglet API : un seul choix, une seule
   façon de l'afficher, une seule façon d'en changer. */
.gen-target-banner {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--gold3); border:1px solid var(--gold2); border-radius:var(--r);
  padding:.5rem .75rem; font-size:11.5px; color:var(--gold); margin-bottom:.75rem;
}
.gen-target-banner strong { color:var(--cream); }
.gt-change {
  background:transparent; border:1px solid var(--gold2); border-radius:6px;
  color:var(--gold); font-size:10.5px; padding:3px 10px; cursor:pointer;
  font-family:inherit; transition:all .15s; flex-shrink:0;
}
.gt-change:hover { background:var(--gold2); color:#000; }
.gt-row {
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  background:transparent; border:none; border-radius:6px; padding:.55rem .65rem;
  font-size:12.5px; color:var(--cream2); cursor:pointer; font-family:inherit;
  transition:background .12s, color .12s;
}
.gt-row:hover { background:var(--gold3); color:var(--gold); }
.gt-row-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gt-row-go { color:var(--cream3); font-size:14px; flex-shrink:0; }

/* ══ AGENTS (agents.js, préfixe ag) — volet + fenêtre ══ */
.ag-feed { display:flex; flex-direction:column; gap:6px; max-height:230px; overflow-y:auto; }
.ag-empty { font-size:10.5px; color:var(--cream3); line-height:1.6; font-style:italic; padding:.3rem 0; }
.ag-line { display:flex; gap:7px; align-items:flex-start; background:var(--surface);
  border:1px solid var(--border); border-left:3px solid var(--border2);
  border-radius:0 var(--r) var(--r) 0; padding:.4rem .5rem; }
.ag-line.veto   { border-left-color:var(--nsfw); background:var(--nsfw-dim); }
.ag-line.retenu { border-left-color:var(--sfw); }
.ag-line.big { padding:.6rem .75rem; margin-bottom:6px; }
.ag-ico { font-size:12px; flex-shrink:0; line-height:1.5; }
.ag-body { min-width:0; flex:1; }
.ag-head { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:10px;
  font-weight:600; letter-spacing:.04em; margin-bottom:2px; }
.ag-who  { color:var(--cream3); font-weight:400; }
.ag-time { color:var(--cream3); font-weight:400; margin-left:auto; }
.ag-tag  { background:var(--nsfw); color:#fff; border-radius:8px; font-size:8.5px;
  padding:1px 6px; letter-spacing:.1em; }
.ag-line.retenu .ag-tag { background:var(--sfw); color:#062018; }
.ag-txt  { font-size:11px; color:var(--cream2); line-height:1.55; word-break:break-word; }
.ag-note { font-size:11.5px; color:var(--cream2); background:var(--surface2);
  border:1px solid var(--border); border-left:3px solid var(--gold2);
  border-radius:0 var(--r) var(--r) 0; padding:.7rem .875rem; line-height:1.6; margin-bottom:.75rem; }
.ag-card { background:var(--surface2); border:1px solid var(--border);
  border-radius:var(--r); padding:.7rem .875rem; margin-bottom:8px; }
.ag-card-h { display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:13px; font-weight:600; margin-bottom:5px; }
.ag-badge { background:var(--surface3); border:1px solid var(--border2); color:var(--cream3);
  border-radius:10px; font-size:9px; letter-spacing:.1em; text-transform:uppercase; padding:2px 8px; }
.ag-card-role { font-size:12px; color:var(--cream2); line-height:1.6; }
.ag-card-lit  { font-size:10px; color:var(--cream3); margin-top:5px; font-style:italic; }

/* ══ RÈGLES D'AUTOMATISATION (automation.js, préfixe au) ══ */
.au-row { display:flex; gap:10px; align-items:flex-start; background:var(--surface2);
  border:1px solid var(--border); border-left:3px solid var(--border2);
  border-radius:0 var(--r) var(--r) 0; padding:.7rem .875rem; margin-bottom:8px;
  cursor:pointer; transition:border-color .12s, background .12s; }
.au-row:hover { background:var(--surface3); }
.au-row.on { border-left-color:var(--gold); }
.au-row input, .au-sub input { accent-color:var(--gold); cursor:pointer; flex-shrink:0; margin-top:2px; }
.au-txt { min-width:0; flex:1; }
.au-t { font-size:12.5px; font-weight:600; color:var(--cream); margin-bottom:3px; }
.au-d { font-size:11px; color:var(--cream2); line-height:1.55; }
.au-sub { display:flex; gap:7px; align-items:flex-start; margin-top:7px;
  font-size:10.5px; color:var(--cream3); cursor:pointer; }
.au-sub.on { color:var(--cream2); }
.au-heure { margin-top:.9rem; }