/* ============================================================
   KAEDRIA IRIS — Onyx & Or
   Iris en présence réelle (debout) qui PRÉSENTE le post.
   Fond onyx = fond noir des poses → Iris semble dans l'app.
============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* L'attribut hidden DOIT masquer, même sur les éléments en display:flex */
[hidden] { display: none !important; }

:root {
  --onyx:        #0E0E10;
  --onyx-soft:   #1a1a1d;
  --graphite:    #3D3D40;
  --gold:        #B08D57;
  --gold-bright: #d4a96d;
  --gold-deep:   #8a6d40;
  --ivoire:      #F4EDE4;
  --bordeaux:    #6B1D2A;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', -apple-system, sans-serif;

  --li-blue:  #0a66c2;
  --li-text:  #1d1d1f;
  --li-gray:  #5e5e5e;

  --dock-h:   168px;
}

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: var(--onyx); color: var(--ivoire);
  font-family: var(--font-body); font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Iris en présence (plein écran, fond noir = onyx) ---------- */
.iris-stage { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.iris-stage img {
  width: 100%; height: 100%; object-fit: contain; object-position: left bottom;
  transition: opacity .45s ease;
}
.mesh-overlay {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(176,141,87,0.10) 0%, transparent 45%),
    radial-gradient(ellipse at 75% 70%, rgba(107,29,42,0.08) 0%, transparent 50%);
}

/* ---------- Layout vertical ---------- */
.ui-layer {
  position: relative; z-index: 3; height: 100vh;
  display: flex; flex-direction: column; padding: 16px 30px 0;
}

.brand-header {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-display); flex-shrink: 0; position: relative;
}
.brand-mark { color: var(--gold); font-size: 1rem; opacity: 0.8; }
.brand-name { font-size: 1.6rem; font-weight: 600; letter-spacing: 0.28em; padding-left: 0.28em; color: var(--ivoire); }
.brand-sep  { color: var(--gold); }
.brand-product { font-size: 1.6rem; font-weight: 500; font-style: italic; color: var(--gold-bright); }
.brand-hub-link {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit;
  cursor: pointer; border-radius: 10px; padding: 4px 10px; margin: -4px -10px;
  transition: background .15s ease, opacity .15s ease;
}
.brand-hub-link:hover { background: rgba(176,141,87,0.1); }
.brand-hub-link:hover .brand-mark { opacity: 1; }
.queue-nav {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 8px;
}
.queue-pill {
  font-family: var(--font-body); font-size: 0.82rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold-bright);
  border: 1px solid rgba(176,141,87,0.35); border-radius: 999px;
  padding: 6px 16px; background: rgba(176,141,87,0.06); white-space: nowrap;
}
.qbtn {
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  background: rgba(176,141,87,0.08); border: 1px solid var(--gold);
  color: var(--gold-bright); font-size: 1.3rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: filter .12s ease, transform .12s ease;
}
.qbtn:hover { filter: brightness(1.2); transform: translateY(-1px); }
.qbtn:disabled { opacity: 0.3; cursor: default; filter: none; transform: none; }

/* ---------- Onglets de statut (À valider / Validés / Publiés) ---------- */
.status-tabs {
  display: flex; justify-content: center; gap: 8px; flex-shrink: 0;
  margin-top: 12px;
}
.tab {
  font-family: var(--font-body); font-size: 0.86rem; font-weight: 500;
  color: #b8b3aa; background: transparent; border: 1px solid transparent;
  border-radius: 999px; padding: 7px 18px; cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.tab:hover { color: var(--gold-bright); }
.tab.active {
  color: var(--gold-bright); border-color: rgba(176,141,87,0.5);
  background: rgba(176,141,87,0.1);
}
.tab-count { font-size: 0.82em; opacity: 0.75; }

/* Onglets "action réseau" (Prospection LinkedIn, futur Instagram, DM...) —
   même famille visuelle que le bouton doré "Lancer la veille", en pilule
   inline dans la barre d'onglets. Réutiliser .tab-gold pour toute nouvelle
   action de ce type. */
.tab-gold {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--onyx); font-weight: 600;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  border: 1px solid rgba(176, 141, 87, 0.6);
  box-shadow: 0 2px 10px rgba(176, 141, 87, 0.28);
}
.tab-gold:hover { color: var(--onyx); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(176, 141, 87, 0.42); }
.tab-gold.active { box-shadow: 0 0 0 2px rgba(14,14,16,0.35) inset, 0 2px 10px rgba(176, 141, 87, 0.28); }
/* Onglet ACTIF qui cumule .tab.active (fond sombre, texte dore) et .tab-gold
   (pense pour les pastilles pleines dorees, texte fonce) : .tab-gold:hover
   l'emportait par accident sur .tab.active et rendait le texte fonce sur un
   fond deja sombre -- invisible au survol (retour Karen 2026-07-21). */
.tab.tab-gold.active:hover { color: var(--gold-bright); }
.tab-gold .tab-count, .tab-gold .vb-mark { color: var(--onyx); opacity: 0.85; }

/* ---------- Zone centrale ---------- */
.stage { flex: 1; position: relative; min-height: 0; }

/* La carte (post) occupe le côté OPPOSÉ à Iris.
   content-right = Iris à gauche (pose5) → carte à droite. */
.work {
  position: absolute; top: 8px; bottom: 8px; display: flex; align-items: center;
}
body.content-right .work { right: 0;  left: 42%; justify-content: flex-end; }
body.content-left  .work { left: 0;  right: 42%; justify-content: flex-start; }
body.content-center .work { left: 12%; right: 12%; justify-content: center; }

/* ---------- Aperçu LinkedIn fidèle (carte claire) ---------- */
.li-card {
  width: 100%; max-width: 560px; max-height: 100%; overflow-y: auto;
  background: #fff; color: var(--li-text); border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6); font-weight: 400;
}
.li-card::-webkit-scrollbar { width: 8px; }
.li-card::-webkit-scrollbar-thumb { background: #cfcfcf; border-radius: 8px; }

.li-head { display: flex; align-items: flex-start; gap: 10px; padding: 16px 16px 8px; }
.li-avatar-wrap {
  position: relative; width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%;
  overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gold-deep), var(--gold));
}
.li-avatar-fallback { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: #1b1407; }
.li-avatar { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 22%; }
.li-id { flex: 1; min-width: 0; }
.li-name { font-weight: 600; font-size: 1rem; }
.li-deg { font-weight: 400; color: var(--li-gray); font-size: 0.85rem; }
.li-headline { font-size: 0.84rem; color: var(--li-gray); line-height: 1.3; }
.li-meta { font-size: 0.8rem; color: var(--li-gray); margin-top: 2px; }
.li-more { color: var(--li-gray); font-size: 1.3rem; line-height: 1; }

.li-body {
  padding: 4px 16px 14px; font-size: 1.02rem; line-height: 1.5;
  color: var(--li-text); white-space: pre-wrap; word-wrap: break-word;
}
.li-body .hashtag { color: var(--li-blue); font-weight: 500; }

.li-visual {
  width: 100%; aspect-ratio: 1.91 / 1; background: var(--onyx);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-top: 1px solid #ececec; border-bottom: 1px solid #ececec;
}
.li-visual img { width: 100%; height: 100%; object-fit: cover; }
/* Post image (pas un lien) : on montre le visuel ENTIER, cliquable pour l'agrandir */
.li-visual.has-image { aspect-ratio: auto; height: auto; overflow: visible; }
.li-visual.has-image img { width: 100%; height: auto; object-fit: contain; display: block; cursor: zoom-in; }
/* Plein écran (lightbox) */
.lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(14, 14, 16, 0.93);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; cursor: zoom-out;
}
.lightbox img {
  max-width: 96vw; max-height: 96vh; object-fit: contain;
  border-radius: 4px; box-shadow: 0 10px 50px rgba(0, 0, 0, 0.6);
}

/* Zone gauche du header : bouton retour Hub + veille (regroupes, un seul ancrage absolu) */
.left-zone {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 16px;
}
.hub-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.02em;
  text-decoration: none; color: var(--ivoire); white-space: nowrap;
  padding: 8px 14px; border-radius: 8px;
  border: 1px solid rgba(176,141,87,0.5);
  background: rgba(176,141,87,0.08);
  transition: background .15s ease, border-color .15s ease;
}
.hub-back:hover { background: rgba(176,141,87,0.18); border-color: var(--gold-bright); }

/* Bouton "Lancer la veille" + selecteur de nombre de sujets (header) */
.veille-zone {
  display: inline-flex; align-items: center; gap: 10px;
}
.veille-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 0.86rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--onyx, #0E0E10);
  background: linear-gradient(135deg, var(--gold-bright, #C9A86A), var(--gold-deep, #B08D57));
  border: 1px solid rgba(176, 141, 87, 0.6);
  box-shadow: 0 2px 10px rgba(176, 141, 87, 0.28);
  transition: transform .12s ease, box-shadow .2s ease, opacity .2s ease;
}
.veille-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(176, 141, 87, 0.42); }
.veille-btn:disabled { cursor: progress; opacity: 0.8; }
/* Veille carrousel : meme gabarit, teinte distincte (graphite/ivoire au lieu de
   l'or) pour ne pas rivaliser visuellement avec la veille postes -- deux
   boutons cote a cote, jamais a confondre au premier coup d'oeil. */
.veille-btn-carrousel {
  color: var(--ivoire, #F4EDE4);
  background: linear-gradient(135deg, var(--graphite, #3D3D40), var(--onyx-soft, #1a1a1d));
  border: 1px solid rgba(216, 211, 202, 0.35);
}
.veille-btn-carrousel:hover { box-shadow: 0 4px 16px rgba(216, 211, 202, 0.22); }
.veille-btn .vb-mark { font-size: 0.95rem; line-height: 1; }
.veille-btn.loading .vb-mark { animation: vb-spin 1s linear infinite; }
@keyframes vb-spin { to { transform: rotate(360deg); } }
.veille-count {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 6px; border-radius: 999px;
  border: 1px solid rgba(176, 141, 87, 0.35); background: rgba(176, 141, 87, 0.08);
}
.veille-count button {
  width: 24px; height: 24px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(176, 141, 87, 0.2); color: var(--ivoire); font-size: 1rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; transition: background .12s ease;
}
.veille-count button:hover { background: rgba(176, 141, 87, 0.36); }
.veille-count button:disabled { opacity: 0.35; cursor: not-allowed; }
.veille-count-val {
  font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 700;
  color: var(--gold-bright); min-width: 16px; text-align: center;
}
.li-visual-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: 100%;
  background: radial-gradient(ellipse at center, rgba(176,141,87,0.14), transparent 70%);
}
.vh-mark { color: var(--gold-bright); font-size: 1.8rem; }
.vh-text { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--gold-bright); }

.li-actions {
  display: flex; justify-content: space-around; padding: 8px;
  color: var(--li-gray); font-size: 0.84rem; font-weight: 500;
}

/* ---------- Dock du bas : validation ---------- */
.action-dock {
  flex-shrink: 0; min-height: var(--dock-h);
  background: linear-gradient(to top, rgba(14,14,16,0.96) 70%, rgba(14,14,16,0));
  border-top: 1px solid rgba(176,141,87,0.18);
  margin: 0 -30px; padding: 14px 30px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.review-inline {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.lbl {
  display: block; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 3px; font-weight: 500;
}
.lbl-hint {
  text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.72rem;
  color: #9c968b; margin-left: 6px;
}
.ri-sujet { font-family: var(--font-display); font-size: 1.2rem; color: var(--ivoire); flex: 1 1 240px; min-width: 200px; line-height: 1.2; }
/* Badges format + programmations par réseau (▤ Carrousel choisi, 📅 LinkedIn/Instagram) */
.ri-format { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; flex: 1 1 260px; min-width: 220px; }
.ri-format-badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Raison d'Iris toujours visible en texte (pas seulement au survol du badge) --
   Karen a besoin de lire pourquoi sans avoir a deviner qu'il faut survoler
   (retour Karen 2026-07-30). Meme gabarit que .ri-note pour la coherence. */
.ri-format-reason { font-size: 0.86rem; color: #d8d3ca; line-height: 1.35; max-width: 440px; }
.fmt-badge {
  font-family: var(--font-body); font-size: 0.9rem; font-weight: 600;
  color: var(--gold-bright); background: rgba(176,141,87,0.12);
  border: 1px solid rgba(176,141,87,0.55); border-radius: 999px;
  padding: 7px 14px; cursor: pointer; transition: all .12s ease; white-space: nowrap;
}
.fmt-badge:hover { background: rgba(176,141,87,0.22); border-color: var(--gold-bright); }
.fmt-badge-ig { color: var(--ivoire); border-style: dashed; }
/* Paire de chips POSTE / CARROUSEL -- verdict explicite d'Iris, toujours les
   deux affiches cote a cote, jamais un seul mot ambigu a interpreter (retour
   Karen 2026-07-30 : "je ne veux pas devoir interpreter, je veux que ce soit
   ecrit clairement si c'est poste ou carrousel"). Purement informatif (pas
   cliquable) : ouvrir le carrousel reste le bouton dedie "Carrousel" du Studio. */
.fmt-chip-pair { display: flex; gap: 8px; flex-wrap: wrap; }
.fmt-chip {
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 700;
  border-radius: 8px; padding: 7px 14px; white-space: nowrap;
  letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 6px;
}
.fmt-chip-yes { color: var(--onyx); background: var(--gold-bright); border: 1px solid var(--gold-bright); }
.fmt-chip-no { color: #9c968b; background: rgba(61,61,64,0.35); border: 1px solid rgba(156,150,139,0.35); }
.fmt-chip-unknown { color: #9c968b; background: transparent; border: 1px dashed rgba(156,150,139,0.5); }
.ri-conf { display: flex; flex-direction: column; min-width: 150px; }
.ri-conf .gauge { height: 7px; background: var(--graphite); border-radius: 999px; overflow: hidden; width: 130px; display: inline-block; }
.ri-conf .gauge-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); transition: width .5s ease; }
.ri-conf .conf-val { color: var(--gold-bright); font-weight: 600; font-size: 0.9rem; margin-top: 3px; }
.ri-note { flex: 2 1 260px; font-size: 0.86rem; color: #d8d3ca; line-height: 1.35; max-height: 3.6em; overflow: hidden; }
.ri-sources { flex: 1 1 160px; font-size: 0.8rem; }
.ri-sources a { color: var(--gold-bright); text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ri-sources a:hover { text-decoration: underline; }

.review-actions { display: flex; gap: 14px; justify-content: flex-end; }
.btn {
  font-family: var(--font-body); font-size: 1.02rem; font-weight: 500;
  padding: 12px 26px; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; transition: transform .12s ease, filter .12s ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn-valider { background: linear-gradient(135deg, var(--gold-deep), var(--gold)); color: #1b1407; font-weight: 600; }
.btn-corriger { background: transparent; border-color: var(--gold); color: var(--gold-bright); }
.btn-refuser { background: transparent; border-color: rgba(107,29,42,0.7); color: #d98b97; }
.btn-copier { background: rgba(176,141,87,0.14); border-color: rgba(176,141,87,0.5); color: var(--ivoire); }
.btn-image { background: transparent; border-color: rgba(176,141,87,0.4); color: var(--gold-bright); }
.btn-ghost { background: transparent; border-color: var(--graphite); color: var(--ivoire); }

/* ---------- Éditeur (overlay) ---------- */
.editor-overlay {
  position: fixed; inset: 0; z-index: 20; background: rgba(8,8,10,0.78);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.editor-box {
  width: min(640px, 92vw); max-height: 88vh; overflow-y: auto;
  background: var(--onyx-soft); border: 1px solid rgba(176,141,87,0.3);
  border-radius: 14px; padding: 24px;
}
.editor-box h3 { font-family: var(--font-display); font-size: 1.5rem; color: var(--ivoire); margin-bottom: 14px; font-weight: 500; }
.editor-box textarea {
  width: 100%; margin-bottom: 12px; background: var(--onyx); color: var(--ivoire);
  border: 1px solid var(--graphite); border-radius: 8px; padding: 10px 12px;
  font-family: var(--font-body); font-size: 0.98rem; line-height: 1.45; resize: vertical;
}
.editor-box textarea:focus { outline: none; border-color: var(--gold); }
.editor-actions { display: flex; gap: 12px; margin-top: 4px; }
.editor-actions .btn { flex: 1; }

/* ---------- État vide ---------- */
.empty-state {
  position: absolute; top: 0; bottom: 0; right: 6%; width: 46%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #b8b3aa;
}
.empty-icon { font-size: 2.4rem; color: var(--gold); margin-bottom: 12px; }
.empty-state h2 { font-family: var(--font-display); font-size: 1.9rem; color: var(--ivoire); margin-bottom: 8px; font-weight: 500; }
.empty-state p { margin-bottom: 20px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 188px; left: 50%; transform: translateX(-50%);
  background: var(--onyx-soft); border: 1px solid var(--gold); color: var(--ivoire);
  padding: 13px 26px; border-radius: 12px; z-index: 40; font-size: 0.98rem;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6); animation: toast-in .25s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }

/* ---------- Studio d'Iris : barre des 3 lentilles ---------- */
.studio-actions {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  flex-wrap: wrap; padding-top: 10px; border-top: 1px solid rgba(176,141,87,0.14);
}
.studio-label {
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-deep); margin-right: auto; font-weight: 600;
}
.btn-studio {
  background: rgba(176,141,87,0.08); border: 1px solid rgba(176,141,87,0.35);
  color: var(--gold-bright); font-size: 0.9rem; padding: 8px 18px; border-radius: 9px;
}
.btn-studio:hover { background: rgba(176,141,87,0.16); }
.btn-studio.loading { cursor: progress; opacity: 0.6; }

/* ---------- Studio : overlay des résultats ---------- */
.lens-overlay {
  position: fixed; inset: 0; z-index: 30; background: rgba(8,8,10,0.82);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.lens-box {
  width: min(1120px, 96vw); height: 88vh; display: flex; flex-direction: column;
  background: var(--onyx-soft); border: 1px solid rgba(176,141,87,0.3);
  border-radius: 14px; padding: 20px 24px 16px;
}
.lens-head { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.lens-head h3 { font-family: var(--font-display); font-size: 1.9rem; color: var(--ivoire); font-weight: 600; }
.lens-close {
  background: transparent; border: none; color: var(--gold); font-size: 1.3rem;
  cursor: pointer; padding: 4px 10px; border-radius: 8px;
}
.lens-close:hover { background: rgba(176,141,87,0.14); color: var(--gold-bright); }
.lens-sub { color: #c7c2b8; font-size: 1rem; margin: 6px 0 14px; line-height: 1.45; flex-shrink: 0; }

/* Deux volets : options (gauche) + post complet (droite) */
.lens-compare-body { flex: 1; display: flex; gap: 18px; min-height: 0; }
.lens-options {
  flex: 0 0 40%; max-width: 460px; overflow-y: auto; padding-right: 6px;
  display: flex; flex-direction: column; gap: 12px;
}
.lens-opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--onyx); border: 1px solid var(--graphite); border-radius: 12px;
  padding: 16px 18px; transition: border-color .12s ease, background .12s ease;
  font-family: var(--font-body);
}
.lens-opt:hover { border-color: var(--gold); }
.lens-opt.active { border-color: var(--gold-bright); background: rgba(176,141,87,0.10); box-shadow: inset 3px 0 0 var(--gold); }
.lens-badge {
  display: inline-block; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-bright); background: rgba(176,141,87,0.14); border-radius: 6px;
  padding: 3px 9px; margin-bottom: 9px; font-weight: 600;
}
.lens-opt-main { display: block; color: var(--ivoire); font-size: 1.12rem; line-height: 1.5; font-weight: 500; }
.lens-opt-sub  { display: block; color: #a8a298; font-size: 0.92rem; line-height: 1.45; margin-top: 7px; }

/* Volet droit : le post complet, sur fond clair = lecture confortable */
.lens-preview {
  flex: 1; min-width: 0; overflow-y: auto; border-radius: 12px;
  background: var(--ivoire); border: 1px solid rgba(176,141,87,0.3); padding: 28px 30px;
}
.lens-post {
  white-space: pre-wrap; word-wrap: break-word; color: #1d1d1f;
  font-size: 1.18rem; line-height: 1.72; font-family: var(--font-body);
}
.lens-preview-hint { color: #8c887f; font-size: 1rem; text-align: center; padding: 40px 10px; line-height: 1.5; }

.lens-footer {
  flex-shrink: 0; display: flex; align-items: center; gap: 14px;
  padding-top: 14px; margin-top: 4px; border-top: 1px solid rgba(176,141,87,0.16);
}
.lens-footer-note { margin-right: auto; color: #9a958c; font-size: 0.88rem; }
.lens-footer .btn { padding: 11px 24px; }

.lens-spinner { text-align: center; color: var(--gold); font-size: 2rem; padding: 30px; animation: vb-spin 1.4s linear infinite; }
.lens-empty { color: #b8b3aa; text-align: center; padding: 24px; }

/* ---------- Studio image : galerie de variantes ---------- */
.img-gallery {
  flex: 1; min-height: 0; overflow-y: auto; padding: 4px 2px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px; align-content: start;
}
.img-card {
  background: var(--onyx); border: 1px solid var(--graphite); border-radius: 12px;
  padding: 12px; transition: border-color .12s ease;
}
.img-card:hover { border-color: var(--gold); }
.img-card.current { border-color: var(--gold-bright); box-shadow: 0 0 0 1px var(--gold); }
.img-card img {
  width: 100%; display: block; border-radius: 8px; background: #000; cursor: zoom-in;
}
.img-card-foot {
  display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap;
}
.img-card-foot .lens-badge { margin-bottom: 0; }
.img-current-tag { color: var(--gold-bright); font-size: 0.95rem; font-weight: 600; }
.img-apercu-tag {
  color: #a8a298; font-size: 0.8rem; font-style: italic; margin-left: 8px;
}
.img-use, .img-upgrade { margin-left: auto; padding: 9px 18px; font-size: 0.95rem; }
.img-retouche-row {
  display: flex; gap: 8px; padding: 0 14px 14px;
}
.img-retouche-input {
  flex: 1; min-width: 0; background: var(--onyx); border: 1px solid var(--gold-deep);
  border-radius: 8px; color: var(--ivoire); font-size: 0.9rem; padding: 8px 10px;
}
.img-retouche-input::placeholder { color: #8a857b; }
.img-retouche-btn {
  flex-shrink: 0; padding: 8px 14px; font-size: 0.88rem;
  background: transparent; border: 1px solid var(--gold-deep); color: var(--gold-bright);
  border-radius: 8px;
}
.img-retouche-btn:hover { background: rgba(176,141,87,0.14); }
.img-library {
  flex-shrink: 0; max-height: 260px; overflow-y: auto; margin-top: 10px;
  padding: 12px; background: var(--onyx); border: 1px solid var(--gold-deep); border-radius: 12px;
}
.img-library-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin-top: 8px;
}
.img-library-grid img {
  width: 100%; height: 110px; object-fit: cover; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--graphite); transition: border-color .12s ease;
}
.img-library-grid img:hover { border-color: var(--gold); }
.img-genbar { display: flex; gap: 12px; margin: 14px 0 2px; flex-shrink: 0; }
#img-directive {
  flex: 1; background: var(--onyx); border: 1px solid var(--graphite); border-radius: 10px;
  padding: 13px 16px; color: var(--ivoire); font-size: 1.02rem; font-family: var(--font-body);
}
#img-directive:focus { outline: none; border-color: var(--gold); }
#img-directive::placeholder { color: #8c887f; }
.btn-studio-img { border-color: var(--gold-deep); }

/* ---------- Carrousel LinkedIn ---------- */
/* Le carrousel + legende + editeur peuvent depasser la hauteur du modal (surtout
   pendant l'edition d'une slide) -- car-scroll absorbe TOUT le debordement en un
   seul ascenseur, pour que le bouton "Appliquer" reste toujours atteignable et
   que le carrousel ne soit jamais ecrase a une taille illisible. */
.car-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.car-body { flex: 0 0 auto; display: flex; flex-direction: column; }
.car-strip {
  flex: 0 0 auto; display: flex; gap: 16px; overflow-x: auto;
  align-items: center; padding: 6px 2px 14px;
}
.car-slide { flex: 0 0 auto; margin: 0; text-align: center; }
.car-slide img {
  height: min(44vh, 500px); border-radius: 10px; border: 1px solid var(--graphite);
  cursor: zoom-in; display: block; transition: border-color .12s ease;
}
.car-slide img:hover { border-color: var(--gold); }
.car-slide figcaption {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px; color: #9a958c; font-size: 0.95rem;
}
.car-edit-btn { padding: 7px 14px; font-size: 0.9rem; }
.car-editor {
  flex-shrink: 0; background: var(--onyx); border: 1px solid var(--gold-deep);
  border-radius: 12px; padding: 14px 18px; margin-top: 8px;
}
.car-editor-title { font-family: var(--font-display); font-size: 1.25rem; color: var(--gold-bright); margin-bottom: 8px; }
.car-editor input, .car-editor textarea {
  width: 100%; background: var(--onyx-soft); border: 1px solid var(--graphite);
  border-radius: 8px; padding: 10px 12px; color: var(--ivoire);
  font-size: 1rem; font-family: var(--font-body); margin: 4px 0 10px;
}
.car-editor input:focus, .car-editor textarea:focus { outline: none; border-color: var(--gold); }
.car-editor-row { display: flex; gap: 14px; }
.car-editor-row > div { flex: 1; min-width: 0; }
.car-variants { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.car-variants:empty { margin: 0; }
.car-variants-lbl { font-size: 0.8rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; }
.car-variant-chip { padding: 7px 14px; font-size: 0.85rem; }
.car-variant-chip.active { border-color: var(--gold-bright); color: var(--gold-bright); cursor: default; }
.car-caption {
  flex-shrink: 0; background: var(--onyx); border: 1px solid var(--gold-deep);
  border-radius: 12px; padding: 14px 18px; margin-top: 10px;
}
.car-caption textarea {
  width: 100%; background: var(--onyx-soft); border: 1px solid var(--graphite);
  border-radius: 8px; padding: 10px 12px; color: var(--ivoire);
  font-size: 1rem; font-family: var(--font-body); margin: 4px 0 10px;
  min-height: 220px; line-height: 1.5; resize: vertical;
}
.car-caption textarea:focus { outline: none; border-color: var(--gold); }
/* Legende sur plusieurs paragraphes dans une textarea de 2 lignes : une
   regeneration changeait bien le texte (verifie cote backend) mais Karen ne
   voyait que la 1re ligne, souvent similaire d'une variante a l'autre --
   d'ou l'impression que "rien ne se passe" (retour 2026-07-21). Textarea
   agrandie + redimensionnable ci-dessus. */
.car-hashtags { display: flex; flex-wrap: wrap; gap: 8px; margin: -2px 0 12px; }
.car-hashtags:empty { display: none; }
.car-hashtag-chip {
  font-size: 0.86rem; color: var(--gold-bright); background: rgba(176,141,87,0.12);
  border: 1px solid rgba(176,141,87,0.4); border-radius: 999px; padding: 4px 12px;
}
.car-caption-actions { display: flex; gap: 12px; }
.car-doctitre-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; }
.car-doctitre-row input {
  flex: 1; background: var(--onyx-soft); border: 1px solid var(--graphite);
  border-radius: 8px; padding: 10px 12px; color: var(--ivoire);
  font-size: 1rem; font-family: var(--font-body);
}
.car-doctitre-row input:focus { outline: none; border-color: var(--gold); }
.car-doctitre-count { font-size: 0.8rem; color: #9a958c; white-space: nowrap; }
.car-doctitre-count.over { color: #e08b8b; font-weight: 600; }
.car-doctitre-row .btn { padding: 9px 14px; }
#car-pdf { text-decoration: none; }

#sched-date, #sched-type {
  width: 100%; background: var(--onyx); border: 1px solid var(--graphite);
  border-radius: 8px; padding: 10px 12px; color: var(--ivoire);
  font-size: 1rem; font-family: var(--font-body); margin: 4px 0 4px; color-scheme: dark;
}
#sched-date:focus, #sched-type:focus { outline: none; border-color: var(--gold); }

@media (max-width: 900px) {
  .lens-compare-body { flex-direction: column; }
  .lens-options { flex: 0 0 auto; max-width: none; max-height: 38%; }
}

@media (max-width: 1000px) {
  body.content-right .work, body.content-left .work { left: 6%; right: 6%; justify-content: center; }
  .calendar-view, .pistes-view, .prospection-view { left: 6%; right: 6%; }
  .iris-stage img { opacity: 0.25; }
}

/* ---------- Calendrier de publication ---------- */
/* left/right directement dans inset (pas de regle separee) : ces 3 vues
   (calendrier/pistes/prospection) appellent toujours setPose('iris-pose1-
   presence') (cf. app.js), donc body est TOUJOURS en content-center a ce
   moment -- une regle separee plus bas dans le fichier (meme specificite,
   ordre de source) ecrasait silencieusement ce decalage a chaque fois. Les
   valeurs (48% / 6%) reprennent le decalage deja valide par Karen sur
   .empty-state. */
.calendar-view {
  position: absolute; inset: 8px 6% 8px 48%; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px; padding: 0 2%;
}
.cal-head {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; background: rgba(20,20,22,0.85); border: 1px solid rgba(176,141,87,0.25);
  border-radius: 14px; padding: 12px 18px;
}
.cal-reseaux { display: flex; gap: 8px; }
.cal-net {
  font-family: var(--font-body); font-size: 0.86rem; font-weight: 500;
  color: #b8b3aa; background: transparent; border: 1px solid var(--graphite);
  border-radius: 999px; padding: 7px 16px; cursor: pointer; transition: all .12s ease;
}
.cal-net:hover:not(:disabled) { color: var(--gold-bright); border-color: var(--gold); }
.cal-net.active { color: var(--gold-bright); border-color: rgba(176,141,87,0.5); background: rgba(176,141,87,0.1); }
.cal-net:disabled { opacity: 0.4; cursor: not-allowed; }

.car-platforms { display: flex; gap: 8px; margin: 4px 0 14px; }
.car-net {
  font-family: var(--font-body); font-size: 0.86rem; font-weight: 500;
  color: #b8b3aa; background: transparent; border: 1px solid var(--graphite);
  border-radius: 999px; padding: 7px 16px; cursor: pointer; transition: all .12s ease;
}
.car-net:hover:not(:disabled) { color: var(--gold-bright); border-color: var(--gold); }
.car-net.active { color: var(--gold-bright); border-color: rgba(176,141,87,0.5); background: rgba(176,141,87,0.1); }
.cal-nav { display: flex; align-items: center; gap: 12px; }
.cal-titre { font-family: var(--font-display); font-size: 1.25rem; color: var(--ivoire); min-width: 260px; text-align: center; }
.cal-nav .btn { padding: 8px 16px; font-size: 0.88rem; }

.cal-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; flex: 1; min-height: 0; padding-bottom: 10px; }
.cal-day {
  background: var(--onyx-soft); border: 1px solid rgba(176,141,87,0.25); border-radius: 14px;
  overflow-y: auto; display: flex; flex-direction: column; min-height: 0;
}
.cal-day-head {
  padding: 12px 16px 10px; border-bottom: 1px solid rgba(176,141,87,0.2); flex-shrink: 0;
  font-family: var(--font-display); font-size: 1.25rem; color: var(--ivoire); font-weight: 600;
}
.cal-day-head .cal-date {
  display: block; font-family: var(--font-body); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; color: var(--gold-bright); text-transform: uppercase; margin-top: 2px;
}
.cal-day-head .cal-heure {
  display: block; font-family: var(--font-body); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.1em; color: #9a958c; margin-top: 2px;
}
.cal-day-body { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cal-day.prepa {
  background: linear-gradient(165deg, #14100f 0%, #3a1520 70%, var(--bordeaux) 140%);
  border-color: rgba(176,141,87,0.5);
}
.cal-day.stats { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(176,141,87,0.3); }
.cal-day.optional { border-style: dashed; opacity: 0.88; }
.cal-day.optional .cal-day-head { color: #cfc9bd; }

.cal-label {
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}
.cal-day textarea {
  width: 100%; min-height: 70px; resize: vertical; background: var(--onyx);
  border: 1px solid var(--graphite); border-radius: 8px; padding: 9px 10px;
  color: var(--ivoire); font-family: var(--font-body); font-size: 0.92rem; line-height: 1.4;
}
.cal-day textarea:focus { outline: none; border-color: var(--gold); }
.cal-checks { display: flex; flex-direction: column; gap: 7px; }
.cal-check {
  display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
  font-size: 0.86rem; color: var(--ivoire); line-height: 1.35;
}
.cal-check input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--gold); flex-shrink: 0; margin-top: 1px; }
.cal-check.done { text-decoration: line-through; opacity: 0.6; }

.cal-post-stat {
  border: 1px dashed rgba(176,141,87,0.35); border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.cal-post-stat .cps-sujet { font-size: 0.86rem; color: var(--ivoire); line-height: 1.3; }
.cal-stat-inputs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cal-stat-field { display: flex; flex-direction: column; gap: 3px; }
.cal-stat-field span { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; color: #9a958c; text-transform: uppercase; }
.cal-stat-field input {
  width: 100%; background: var(--onyx); border: 1px solid var(--graphite); border-radius: 6px;
  padding: 6px 7px; color: var(--ivoire); font-family: var(--font-body); font-size: 0.88rem;
}
.cal-stat-field input:focus { outline: none; border-color: var(--gold); }
.cal-empty-week { color: #9a958c; font-size: 0.86rem; text-align: center; padding: 10px 6px; font-style: italic; }

/* Post reellement publie, auto-rattache au jour : carte cliquable */
.cal-post-card {
  display: flex; gap: 10px; align-items: center; cursor: pointer;
  background: var(--onyx); border: 1px solid rgba(176,141,87,0.35); border-radius: 10px;
  padding: 10px; transition: border-color .12s ease, background .12s ease;
}
.cal-post-card:hover { border-color: var(--gold); background: rgba(176,141,87,0.08); }
.cpc-thumb { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #000; }
.cpc-thumb-empty { display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 1.2rem; }
.cpc-body { min-width: 0; }
.cpc-titre {
  font-size: 0.88rem; color: var(--ivoire); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cpc-tag { font-size: 0.72rem; color: var(--gold-bright); font-weight: 600; margin-top: 4px; }

.cal-assign-select {
  width: 100%; background: var(--onyx); border: 1px solid var(--graphite); border-radius: 8px;
  padding: 7px 8px; color: var(--ivoire); font-family: var(--font-body); font-size: 0.82rem; cursor: pointer;
}
.cal-assign-select:focus { outline: none; border-color: var(--gold); }

/* ---------- Reglages : jours de publication ---------- */
.cal-schedule-grid { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 4px; }
.cal-sched-row {
  display: flex; align-items: center; gap: 22px; padding: 9px 6px;
  border-bottom: 1px solid rgba(176,141,87,0.14);
}
.cal-sched-day { font-family: var(--font-display); font-size: 1.05rem; color: var(--ivoire); width: 110px; flex-shrink: 0; }
.cal-sched-row .cal-check { font-size: 0.92rem; }
.cal-saved-tag { font-size: 0.7rem; color: var(--gold-bright); opacity: 0; transition: opacity .3s ease; }
.cal-saved-tag.show { opacity: 1; }

@media (max-width: 1700px) { .cal-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .cal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cal-grid { grid-template-columns: 1fr; } }

/* ---------- Pistes de veille ---------- */
.pistes-view {
  position: absolute; inset: 8px 6% 8px 48%; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px; padding: 0 2%;
}
/* Prospection LinkedIn : meme structure que Pistes, n'avait aucun style de
   positionnement jusqu'ici (d'ou l'affichage a plat, par-dessus Iris). */
.prospection-view {
  position: absolute; inset: 8px 6% 8px 48%; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px; padding: 0 2%;
}
/* Réponse aux DM : même positionnement que Prospection/Pistes. */
.dm-view {
  position: absolute; inset: 8px 6% 8px 48%; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px; padding: 0 2%;
}
.dm-textarea {
  width: 100%; background: var(--onyx-soft); border: 1px solid var(--graphite);
  border-radius: 8px; padding: 10px 12px; color: var(--ivoire);
  font-size: 1rem; font-family: var(--font-body); resize: vertical;
}
.dm-textarea:focus { outline: none; border-color: var(--gold); }
#dm-post-context {
  width: 100%; background: var(--onyx); border: 1px solid var(--graphite);
  border-radius: 8px; padding: 10px 12px; color: var(--ivoire);
  font-size: 0.95rem; font-family: var(--font-body); cursor: pointer; color-scheme: dark;
}
#dm-post-context:focus { outline: none; border-color: var(--gold); }
#btn-run-dm { align-self: flex-start; }
.pistes-head h2 {
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 500;
  color: var(--ivoire); margin-bottom: 4px;
}
.pistes-head p { color: #9a958c; font-size: 0.92rem; }
.pistes-list { display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; }
.piste-card {
  background: var(--onyx-soft); border: 1px solid rgba(176,141,87,0.25); border-radius: 12px;
  padding: 16px 20px; display: flex; gap: 16px; align-items: flex-start;
  transition: border-color .12s ease;
}
.piste-card.traite { opacity: 0.55; }
.piste-card:hover { border-color: rgba(176,141,87,0.45); }
.piste-body { flex: 1; min-width: 0; }
.piste-titre { font-family: var(--font-display); font-size: 1.15rem; color: var(--ivoire); font-weight: 600; }
.piste-titre a { color: var(--gold-bright); text-decoration: none; }
.piste-titre a:hover { text-decoration: underline; }
.piste-pourquoi { color: #c7c2b8; font-size: 0.94rem; margin-top: 5px; line-height: 1.4; }
.piste-meta { color: #8c887f; font-size: 0.78rem; margin-top: 8px; }
.piste-actions { flex-shrink: 0; }
.piste-empty { color: #9a958c; text-align: center; padding: 40px 10px; font-style: italic; }

#btn-run-prospection { margin-top: 10px; align-self: flex-start; }
.prospection-drafts { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.prospection-draft-chip {
  text-align: left; background: rgba(176,141,87,0.1); border: 1px solid rgba(176,141,87,0.3);
  border-radius: 8px; padding: 8px 12px; color: var(--ivoire); font-size: 0.9rem;
  cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.prospection-draft-chip:hover { border-color: var(--gold-bright); background: rgba(176,141,87,0.2); }

.profile-scan-head { margin-top: 8px; padding-top: 16px; border-top: 1px solid rgba(176,141,87,0.2); }
#btn-run-profile-scan { margin-top: 10px; align-self: flex-start; }
.profile-scan-score {
  display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--font-display);
  font-size: 1.6rem; font-weight: 600; color: var(--gold-bright); margin-top: 10px;
}
.profile-scan-score span { font-size: 0.85rem; color: #9a958c; font-family: var(--font-body); font-weight: 400; }
.profile-scan-signaux, .profile-scan-points {
  list-style: disc; margin: 8px 0 0 20px; color: #c7c2b8; font-size: 0.92rem; line-height: 1.5;
}
.profile-scan-label { color: #9a958c; font-size: 0.8rem; margin-top: 14px; text-transform: uppercase; letter-spacing: 0.03em; }