/* ═══════════════════════════════════════════
   ImageEdit Pro — style.css (v3 — Pintura layout)
══════════════════════════════════════════ */

:root,
body[data-theme='default'] {
  --bg:        #0c0c16;
  --bg-2:      #13131f;
  --bg-3:      #1b1b2e;
  --bg-4:      #23233a;
  --bg-5:      #2d2d48;

  --accent:    #6366f1;
  --accent-2:  #8b5cf6;
  --accent-3:  #a855f7;
  --accent-glow: rgba(99,102,241,0.25);

  --text:      #eeeef8;
  --text-2:    #9090b8;
  --text-3:    #5a5a80;

  --border:    #27273e;
  --border-2:  #363655;

  --success:   #22c55e;
  --danger:    #ef4444;

  --scrollbar-track: rgba(255,255,255,0.06);
  --scrollbar-thumb: #5a5a80;
  --scrollbar-thumb-hover: #8b8bb5;

  --radius:    10px;
  --radius-lg: 18px;

  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* High-contrast variant of original */
body[data-theme='contrast'] {
  --bg:        #050510;
  --bg-2:      #0e0e1c;
  --bg-3:      #1a1a30;
  --bg-4:      #2c2c52;
  --bg-5:      #3d3d70;

  --accent:    #818cf8;
  --accent-2:  #a78bfa;
  --accent-3:  #c084fc;
  --accent-glow: rgba(129,140,248,0.35);

  --text:      #ffffff;
  --text-2:    #c8c8e8;
  --text-3:    #8888b8;

  --border:    #45456e;
  --border-2:  #6262a0;

  --scrollbar-track: rgba(255,255,255,0.10);
  --scrollbar-thumb: #8888b8;
  --scrollbar-thumb-hover: #c8c8e8;
}

/* Midnight blue */
body[data-theme='midnight'] {
  --bg:        #050a18;
  --bg-2:      #0a1428;
  --bg-3:      #0f1d3a;
  --bg-4:      #182b50;
  --bg-5:      #233e6e;

  --accent:    #38bdf8;
  --accent-2:  #0ea5e9;
  --accent-3:  #0284c7;
  --accent-glow: rgba(56,189,248,0.30);

  --text:      #f0f9ff;
  --text-2:    #93c5fd;
  --text-3:    #60a5fa;

  --border:    #1e3a6b;
  --border-2:  #2c528f;

  --scrollbar-track: rgba(56,189,248,0.10);
  --scrollbar-thumb: #60a5fa;
  --scrollbar-thumb-hover: #93c5fd;
}

/* Slate / neutral gray */
body[data-theme='slate'] {
  --bg:        #0f0f12;
  --bg-2:      #18181c;
  --bg-3:      #232328;
  --bg-4:      #2e2e35;
  --bg-5:      #3a3a44;

  --accent:    #f59e0b;
  --accent-2:  #fbbf24;
  --accent-3:  #fcd34d;
  --accent-glow: rgba(245,158,11,0.30);

  --text:      #f4f4f5;
  --text-2:    #a1a1aa;
  --text-3:    #71717a;

  --border:    #2e2e35;
  --border-2:  #46464f;

  --scrollbar-track: rgba(255,255,255,0.07);
  --scrollbar-thumb: #71717a;
  --scrollbar-thumb-hover: #a1a1aa;
}

/* Emerald */
body[data-theme='emerald'] {
  --bg:        #061410;
  --bg-2:      #0a1f18;
  --bg-3:      #102a22;
  --bg-4:      #173a30;
  --bg-5:      #205142;

  --accent:    #10b981;
  --accent-2:  #34d399;
  --accent-3:  #6ee7b7;
  --accent-glow: rgba(16,185,129,0.30);

  --text:      #ecfdf5;
  --text-2:    #a7f3d0;
  --text-3:    #6ee7b7;

  --border:    #1e4a3a;
  --border-2:  #2d6852;

  --scrollbar-track: rgba(16,185,129,0.10);
  --scrollbar-thumb: #6ee7b7;
  --scrollbar-thumb-hover: #a7f3d0;
}

/* Light mode */
body[data-theme='light'] {
  --bg:        #f5f5fa;
  --bg-2:      #ffffff;
  --bg-3:      #f0f0f7;
  --bg-4:      #e5e5ee;
  --bg-5:      #d6d6e0;

  --accent:    #6366f1;
  --accent-2:  #8b5cf6;
  --accent-3:  #a855f7;
  --accent-glow: rgba(99,102,241,0.25);

  --text:      #1a1a2e;
  --text-2:    #4a4a6a;
  --text-3:    #7c7c98;

  --border:    #d6d6e0;
  --border-2:  #b8b8c8;

  --scrollbar-track: rgba(0,0,0,0.06);
  --scrollbar-thumb: #9090b0;
  --scrollbar-thumb-hover: #6a6a90;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

/* Make all icons & button labels click-transparent so the button itself
   always catches hover/click, regardless of where the cursor is inside it. */
button svg, button > span { pointer-events: none; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

/* ══════════════════════════════════════════
   HEADER
══════════════════════════════════════════ */
#header {
  display: flex;
  align-items: center;
  gap: 12px;
  /* PWA iOS : ajoute le safe-area-inset (status bar transparente + notch
     en paysage) pour que les icônes du header restent tactiles. */
  padding-top:    env(safe-area-inset-top);
  padding-left:   calc(16px + env(safe-area-inset-left));
  padding-right:  calc(16px + env(safe-area-inset-right));
  padding-bottom: 0;
  height: calc(54px + env(safe-area-inset-top));
  flex-shrink: 0;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  z-index: 200;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
}
.logo-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  flex-shrink: 0;
  object-fit: cover;          /* full-bleed dans le carré arrondi */
  box-shadow:
    0 2px 8px rgba(99,102,241,.30),
    inset 0 0 0 1px rgba(255,255,255,.06);
}
.logo-text  { font-size: 15px; font-weight: 500; letter-spacing: -0.2px; white-space: nowrap; display: inline-flex; align-items: baseline; gap: 6px; }
.logo-text strong { font-weight: 700; background: linear-gradient(135deg,#6366f1,#a855f7); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.logo-pro {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #f97316, #ef4444);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
}
.logo-pro.hidden { display: none; }

.header-left  { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.header-actions { display: flex; align-items: center; gap: 4px; }

.file-badge {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-4);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-2);
  max-width: 260px;
  overflow: hidden;
}
.file-badge.visible { display: flex; }
.file-badge svg { width: 14px; height: 14px; flex-shrink: 0; }
.file-badge #file-name { font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-meta { white-space: nowrap; color: var(--text-3); font-size: 11px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500; font-family: var(--font);
  border: 1px solid transparent; cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
  white-space: nowrap; flex-shrink: 0;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn-ghost  { background: transparent; border-color: var(--border); color: var(--text-2); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-4); color: var(--text); border-color: var(--border-2); }

.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-2); border-color: var(--accent-2); }

.btn-icon  { padding: 6px; }
.btn-close { color: var(--text-3); }
.btn-full  { width: 100%; justify-content: center; }
.btn-half  { width: calc(50% - 3px); justify-content: center; }
.btn-lg    { padding: 10px 24px; font-size: 15px; border-radius: 12px; }
.btn-sm    { padding: 4px 10px; font-size: 12px; }

.h-sep { width: 1px; height: 24px; background: var(--border); flex-shrink: 0; margin: 0 4px; }

/* ── App menu (camembert) ── */
.app-menu-wrap {
  position: relative;
  flex-shrink: 0;
}
.btn-app-menu {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: transparent; border: none; border-radius: 8px;
  color: var(--text-2); cursor: pointer;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.btn-app-menu:hover { background: var(--bg-4); color: var(--text); }
.btn-app-menu.open  { background: var(--bg-4); color: var(--text); }

.app-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  padding: 6px;
  z-index: 8000;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.app-menu-dropdown.hidden { display: none; }

.app-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  background: transparent; border: none; border-radius: 8px;
  color: var(--text); font-family: var(--font); font-size: 13px;
  cursor: pointer; text-align: left;
  transition: background .12s, color .12s;
}
.app-menu-item:hover { background: var(--bg-5); color: var(--text); }
.app-menu-item svg { flex-shrink: 0; opacity: 0.85; }
.app-menu-kbd {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--font);
}
.app-menu-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ══════════════════════════════════════════
   MAIN
══════════════════════════════════════════ */
#main {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

.hidden { display: none !important; }

/* ══════════════════════════════════════════
   SPLASH INTRO
══════════════════════════════════════════ */
#splash-intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #1a1340 0%, #0a0518 60%, #000 100%);
  overflow: hidden;
  animation: splash-out 0.5s ease 2.5s forwards;
  pointer-events: none;
}
#splash-intro.gone { display: none; }
.splash-bg-glow {
  position: absolute;
  width: 80vmin; height: 80vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168,85,247,0.45) 0%, rgba(99,102,241,0.20) 35%, transparent 70%);
  filter: blur(20px);
  animation: splash-glow 1.6s ease-out both;
}
.splash-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.splash-logo {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 28px;
  box-shadow:
    0 16px 42px rgba(99,102,241,0.55),
    0 6px 18px rgba(168,85,247,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.08);
  animation: splash-logo-in 0.9s cubic-bezier(.2,.9,.3,1) both;
}
.splash-title {
  font-size: clamp(32px, 5.5vw, 54px);
  font-weight: 600;
  letter-spacing: -1px;
  color: #fff;
  margin: 4px 0 0;
  opacity: 0;
  animation: splash-text-in 0.8s ease 0.35s forwards;
}
.splash-title strong {
  font-weight: 800;
  background: linear-gradient(120deg, #6366f1 0%, #8b5cf6 35%, #a855f7 60%, #ec4899 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: hero-grad 4s ease-in-out infinite;
}
.splash-pro {
  display: inline-block;
  font-size: 0.36em;
  font-weight: 800;
  letter-spacing: 1.4px;
  margin-left: 8px;
  text-transform: uppercase;
  background: linear-gradient(120deg, #f97316 0%, #ef4444 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  vertical-align: baseline;
  position: relative;
  top: -0.05em;
  opacity: 0;
  animation: splash-text-in 0.6s ease 0.85s forwards;
}
.splash-pro.hidden { display: none; }
.splash-version {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(168,85,247,0.16);
  border: 1px solid rgba(168,85,247,0.4);
  color: #c4b5fd;
  letter-spacing: 0.6px;
  opacity: 0;
  animation: splash-text-in 0.6s ease 0.7s forwards;
}
@keyframes splash-logo-in {
  0%   { opacity: 0; transform: scale(0.4) rotate(-15deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes splash-text-in {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes splash-glow {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0.6; transform: scale(1); }
}
@keyframes splash-out {
  to { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  #splash-intro,
  .splash-logo, .splash-title, .splash-version, .splash-bg-glow {
    animation: none !important;
  }
  #splash-intro { display: none; }
}

/* ══════════════════════════════════════════
   DROP ZONE — Home page (cards layout)
══════════════════════════════════════════ */
#drop-zone {
  flex: 1;
  display: flex;
  /* ⚠️  PAS de align-items/justify-content: center ici.
     Sinon, quand le contenu déborde verticalement (mobile/2 col),
     le flex-centering positionne le HAUT du contenu AU-DESSUS de scrollTop=0
     → titre + 1ère card inaccessibles (impossible de scroller en négatif).
     Le centrage est fait via `margin: auto` sur .drop-wrap : il ne s'active
     que s'il reste de la place, sinon il tombe à 0 et le contenu commence
     en haut, normalement scrollable. */
  padding: 24px;
  /* Scrollbar verticale toujours visible (même quand le contenu rentre)
     pour que l'utilisateur sache qu'il peut scroller dès que la fenêtre
     est trop courte. Le styling fin/violet est appliqué partout (la
     surcharge mobile plus bas reprend la même palette). */
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: rgba(168,85,247,.55) rgba(255,255,255,.06);
}
#drop-zone::-webkit-scrollbar {
  width: 9px;
  -webkit-appearance: none;
}
#drop-zone::-webkit-scrollbar-track {
  background: rgba(255,255,255,.06);
  border-radius: 99px;
}
#drop-zone::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6366f1, #a855f7);
  border-radius: 99px;
  box-shadow: 0 2px 6px rgba(99,102,241,.45);
}
.drop-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* gap réduit (avant 22 px) — l'espace vertical entre "Commencez par…" et
     la grille de cards était trop important. */
  gap: 8px;
  width: min(1100px, 95vw);
  margin: auto;            /* centre vertic. quand ça rentre, 0 sinon (cf. note) */
}

/* ── Animated hero title ── */
.hero-title-wrap {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hero-title {
  position: relative;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.8px;
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  line-height: 1.1;
}
.hero-pro {
  font-size: 0.45em;
  font-weight: 800;
  letter-spacing: 1.2px;
  margin-left: 6px;
  background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  vertical-align: baseline;
  align-self: baseline;
  animation: hero-fade-up .9s var(--ease) .35s both;
}
.hero-pro.hidden { display: none; }
.hero-version-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(168,85,247,0.16);
  border: 1px solid rgba(168,85,247,0.4);
  color: var(--accent-3);
  letter-spacing: 0.4px;
  margin-bottom: 4px;
  animation: hero-fade-up .9s var(--ease) .45s both;
}
.hero-version-badge.hidden { display: none; }
.hero-title-text {
  display: inline-block;
  animation: hero-fade-up .9s var(--ease) both;
}
.hero-title-text strong {
  font-weight: 800;
  background: linear-gradient(120deg, #6366f1 0%, #8b5cf6 35%, #a855f7 60%, #ec4899 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: hero-grad 7s ease-in-out infinite;
}
.hero-title-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% 0;
  animation: hero-shimmer 4.5s ease-in-out infinite 1.2s;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.hero-subtitle {
  font-size: 16px;
  color: var(--text-2);
  margin: 0;
  letter-spacing: 0.2px;
  animation: hero-fade-up .9s var(--ease) .2s both;
}

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-grad {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes hero-shimmer {
  0%, 100% { background-position: 200% 0; }
  50%      { background-position: -100% 0; }
}

/* ── Cards layout ── */
.start-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "stack  url"
    "stack  blank";
  gap: 14px;
  width: 100%;
}
.start-stack {
  grid-area: stack;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}
.start-stack .start-card-drop { flex: 1; }
@media (max-width: 800px) {
  .start-cards {
    grid-template-columns: 1fr;
    grid-template-areas: "stack" "url" "blank";
  }
}

/* ── Mobile : tout doit tenir sur une page ── */
@media (max-width: 640px) {
  #drop-zone { padding: 6px; }
  .drop-wrap { gap: 6px; }
  .hero-title-wrap { gap: 0; }
  .hero-title { font-size: clamp(18px, 5.2vw, 24px); }
  .hero-subtitle { font-size: 11px; }
  .start-cards { gap: 6px; }

  .start-card { padding: 8px 10px; gap: 4px; border-radius: 10px; }

  /* Carte de drop : reste verticale (zone tactile centrale) mais compacte */
  .start-card-drop { padding: 12px 10px; border-width: 1.5px; gap: 4px; }
  .start-card-drop .start-card-icon { width: 40px; height: 40px; box-shadow: 0 4px 14px rgba(99,102,241,0.16); }
  .start-card-drop .start-card-icon svg { width: 24px; height: 24px; }
  .start-card-drop .start-card-title { font-size: 14px; }
  .start-card-drop .start-card-desc { font-size: 11px; }

  /* Cartes URL et Blank : empilées verticalement et centrées */
  .start-card-url,
  .start-card-blank {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
  }
  .start-card-url .start-card-icon,
  .start-card-blank .start-card-icon {
    width: 32px; height: 32px;
    box-shadow: 0 3px 10px rgba(99,102,241,0.12);
  }
  .start-card-url .start-card-icon svg,
  .start-card-blank .start-card-icon svg { width: 18px; height: 18px; }
  .start-card-url .start-card-title,
  .start-card-blank .start-card-title { font-size: 13px; }
  .start-card-url .start-card-desc,
  .start-card-blank .start-card-desc { display: none; }
  .start-card-url .url-load-row,
  .start-card-blank .blank-canvas-row { width: 100%; justify-content: center; }
  .start-card-blank .blank-canvas-row { flex-wrap: nowrap; }
  .start-card-blank .blank-bg-swatches { justify-content: center; flex: 1; }
  .start-card-blank .btn-lg { width: 100%; }

  .format-list { gap: 3px; }
  .format-tag { font-size: 9.5px; padding: 1px 5px; }

  .start-card .btn-lg { padding: 6px 10px; font-size: 12px; min-height: 0; }
  .url-input { padding: 6px 10px; font-size: 12px; }
  .url-load-btn { padding: 6px 10px; font-size: 12px; }

  .blank-canvas-row { gap: 6px; }
  .blank-canvas-label { width: auto; font-size: 9.5px; }
  .blank-canvas-select { padding: 4px 6px; font-size: 11.5px; }
  .blank-bg-swatches { gap: 4px; }
  .blank-bg-swatches .swatch { width: 18px; height: 18px; }

  .drop-deco { display: none; }
  .shortcuts-hint { display: none; }
}

/* Très petits écrans : on coupe encore */
@media (max-width: 380px) {
  .start-card-drop { padding: 10px; }
  .start-card-drop .start-card-title { font-size: 13px; }
  .start-card-drop .start-card-icon { width: 34px; height: 34px; }
  .start-card-drop .start-card-icon svg { width: 20px; height: 20px; }
  .format-list { display: none; }
  .hero-subtitle { display: none; }
}

/* Hauteur réduite (paysage / petits laptops) : compacter en hauteur uniquement */
@media (max-height: 600px) and (max-width: 900px) {
  .drop-wrap { gap: 8px; }
  .hero-title { font-size: 22px; }
  .hero-subtitle { font-size: 12px; }
  .start-card-drop { padding: 14px 18px; }
  .start-card-drop .start-card-icon { width: 48px; height: 48px; }
  .start-card-drop .start-card-icon svg { width: 28px; height: 28px; }
  .shortcuts-hint { display: none; }
}

.start-card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  overflow: hidden;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease);
}
.start-card:hover {
  border-color: var(--border-2);
  transform: translateY(-2px);
}
.start-card-drop {
  grid-area: drop;
  cursor: pointer;
  border-style: dashed;
  border-width: 2px;
  border-color: var(--border-2);
  padding: 36px 28px;
  justify-content: center;
}
.start-card-drop:hover,
.start-card-drop.drag-over {
  border-color: var(--accent);
  background: rgba(99,102,241,0.04);
}
.start-card-url   { grid-area: url; }
.start-card-blank { grid-area: blank; }

.start-card-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(99,102,241,0.14);
  flex-shrink: 0;
}
.start-card-drop .start-card-icon { width: 84px; height: 84px; box-shadow: 0 10px 36px rgba(99,102,241,0.18); }
.start-card-icon svg { width: 32px; height: 32px; }
.start-card-drop .start-card-icon svg { width: 44px; height: 44px; }
/* Variante "logo de l'app" : pas de fond rond, juste l'image */
.start-card-icon-app {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.start-card-icon-app img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.start-card-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.3px;
  margin: 0;
  color: var(--text);
}
.start-card-drop .start-card-title { font-size: 22px; font-weight: 700; }
.start-card-desc {
  font-size: 12.5px;
  color: var(--text-2);
  margin: 0;
  line-height: 1.4;
}
.start-card-drop .start-card-desc { font-size: 14px; }

.drop-deco {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.12), transparent 70%);
  pointer-events: none;
}
.drop-deco-1 { width:280px;height:280px; top:-80px; right:-60px; }
.drop-deco-2 { width:200px;height:200px; bottom:-40px; left:-40px; }

.format-list { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.format-tag  { font-size:11px; font-weight:600; padding:2px 8px; border-radius:6px; background:var(--bg-4); border:1px solid var(--border); color:var(--text-3); letter-spacing:.5px; }

.shortcuts-hint { display:flex; align-items:center; gap:8px; color:var(--text-3); font-size:12px; flex-wrap: wrap; justify-content: center; }
.shortcuts-hint kbd { background:var(--bg-4); border:1px solid var(--border-2); border-radius:5px; padding:1px 6px; font-family:var(--font); font-size:11px; color:var(--text-2); }
.hint-sep { color:var(--border-2); }

/* URL card content */
.url-load-row {
  display: flex;
  gap: 6px;
  align-items: center;
  width: 100%;
  margin-top: 4px;
}
.url-input {
  flex: 1;
  padding: 9px 12px;
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  border-radius: 9px;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  min-width: 0;
}
.url-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.18);
}
.url-input::placeholder { color: var(--text-3); }
.url-load-btn {
  flex-shrink: 0;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
}

/* Blank canvas card */
.blank-canvas-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.blank-canvas-label {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  width: 70px;
  flex-shrink: 0;
  text-align: left;
}
.blank-canvas-select {
  flex: 1;
  min-width: 100px;
  font-size: 12.5px;
  padding: 6px 8px;
}
.blank-bg-swatches {
  flex: 1;
  flex-wrap: wrap;
  gap: 6px;
}
.blank-bg-swatches .swatch {
  width: 24px; height: 24px;
}
.swatch-transparent {
  background-image:
    linear-gradient(45deg, #888 25%, transparent 25%),
    linear-gradient(-45deg, #888 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #888 75%),
    linear-gradient(-45deg, transparent 75%, #888 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
  background-color: #fff;
}
.blank-bg-custom {
  width: 28px; height: 28px;
  flex-shrink: 0;
}
.start-card-blank .btn-lg { width: 100%; justify-content: center; margin-top: 4px; }

/* ── Session card ── */
.start-card-session {
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 12px;
  padding: 14px 16px;
  border-style: dashed;
}
.start-card-session .start-card-icon {
  width: 48px; height: 48px;
  flex-shrink: 0;
  background: rgba(168,85,247,0.08);
}
.start-card-session .start-card-icon svg { width: 26px; height: 26px; }
.session-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.session-card-info .start-card-title { font-size: 14px; }
.session-card-info .start-card-desc  { font-size: 11.5px; }
.session-card-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.session-card-actions .btn { white-space: nowrap; }
@media (max-width: 640px) {
  .start-card-session {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 8px;
    padding: 10px 12px;
  }
  .session-card-actions { width: 100%; }
  .session-card-actions .btn-primary { flex: 1; }
}

/* ══════════════════════════════════════════
   EDITOR AREA  (Pintura layout)
══════════════════════════════════════════ */
#editor-area {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* Left toolbar */
#tools-nav {
  width: 72px;
  flex-shrink: 0;
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 2px;
}

.tool-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 56px; padding: 10px 6px;
  border: none; background: transparent; border-radius: var(--radius);
  color: var(--text-3); cursor: pointer;
  transition: background .15s, color .15s;
  font-family: var(--font); font-size: 10px; font-weight: 500;
}
.tool-btn svg { width: 20px; height: 20px; }
.tool-btn:hover  { background: var(--bg-4); color: var(--text-2); }
.tool-btn.active { background: var(--bg-4); color: var(--text); }

/* Center column: canvas + bottom bar */
#editor-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* Canvas area */
#canvas-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg);
  position: relative;
}
/* Grab cursor outside crop/transform panel */
body:not([data-panel='transform']) #canvas-wrap {
  cursor: grab;
}
body:not([data-panel='transform']) #canvas-wrap:active {
  cursor: grabbing;
}

#canvas-container {
  position: relative;
  flex-shrink: 0;
}

#img-canvas, #ann-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#ann-canvas {
  pointer-events: none;
  cursor: crosshair;
}
#ann-canvas.drawing-active {
  pointer-events: auto;
}

/* Zoom bar */
#zoom-bar {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  z-index: 10;
}
.btn-zoom {
  width: 26px; height: 26px; border-radius: 6px; border: none;
  background: transparent; color: var(--text-2); font-size: 16px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-family: var(--font);
  transition: background .15s;
}
.btn-zoom:hover { background: var(--bg-4); color: var(--text); }
#zoom-display { font-size: 12px; color: var(--text-2); min-width: 42px; text-align: center; }

/* ══════════════════════════════════════════
   CROP OVERLAY
══════════════════════════════════════════ */
#crop-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity .2s;
}
#crop-overlay.active {
  pointer-events: auto;
  opacity: 1;
}

#crop-shade-top, #crop-shade-right, #crop-shade-bottom, #crop-shade-left {
  position: absolute;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

#crop-box {
  position: absolute;
  border: 1.5px solid rgba(255,255,255,0.85);
  overflow: visible;
}

.crop-line {
  position: absolute;
  background: rgba(255,255,255,0.25);
  pointer-events: none;
}
.crop-line.hl1, .crop-line.hl2 { left:0; right:0; height:1px; }
.crop-line.vl1, .crop-line.vl2 { top:0; bottom:0; width:1px; }
.crop-line.hl1 { top: 33.33%; }
.crop-line.hl2 { top: 66.66%; }
.crop-line.vl1 { left: 33.33%; }
.crop-line.vl2 { left: 66.66%; }

#crop-pan-target {
  position: absolute;
  inset: 0;
  cursor: grab;
  z-index: 0;
  /* Tactile : empêche iOS de capturer le geste pour scroll/pinch — on veut
     pouvoir glisser librement à l'intérieur de la zone de cadrage. */
  touch-action: none;
}
#crop-pan-target:active { cursor: grabbing; }

.crop-handle {
  position: absolute;
  width: 12px; height: 12px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  z-index: 1;
  /* Tactile iPad/iPhone : la cible visible reste à 12px, mais on ajoute
     une zone tactile invisible de 32px via ::before pour que le doigt
     puisse vraiment attraper la poignée. touch-action:none évite que iOS
     traite le glissement comme un scroll de page. */
  touch-action: none;
}
/* Halo tactile invisible — agrandit la cible touchable à ~32×32 px sans
   modifier l'apparence visuelle. Pointer-events: auto sur le ::before. */
.crop-handle::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
}
.crop-handle[data-h="nw"] { top:-6px;  left:-6px;              cursor:nw-resize; }
.crop-handle[data-h="n"]  { top:-6px;  left:calc(50% - 6px);   cursor:n-resize; }
.crop-handle[data-h="ne"] { top:-6px;  right:-6px;             cursor:ne-resize; }
.crop-handle[data-h="w"]  { top:calc(50% - 6px); left:-6px;    cursor:w-resize; }
.crop-handle[data-h="e"]  { top:calc(50% - 6px); right:-6px;   cursor:e-resize; }
.crop-handle[data-h="sw"] { bottom:-6px; left:-6px;            cursor:sw-resize; }
.crop-handle[data-h="s"]  { bottom:-6px; left:calc(50% - 6px); cursor:s-resize; }
.crop-handle[data-h="se"] { bottom:-6px; right:-6px;           cursor:se-resize; }

/* Crop recenter button */
.crop-recenter-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s, background .15s;
  backdrop-filter: blur(4px);
}
.crop-recenter-btn.visible {
  display: flex;
  opacity: 1;
}
.crop-recenter-btn:hover { background: rgba(99,102,241,0.7); }

/* Text overlay */
/* Inline text editor — transparent, positionné directement sur le canvas */
#inline-text-editor {
  position: absolute;
  display: none;
  z-index: 20;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.45), 0 0 0 3.5px rgba(99,102,241,0.35);
  border-radius: 2px;
  padding: 2px 5px;
  min-width: 80px;
  resize: none;
  overflow: hidden;
  line-height: 1.35;
  caret-color: white;
  white-space: pre;
  font-family: var(--font);
}
#inline-text-editor::placeholder {
  color: rgba(255,255,255,0.28);
  font-style: italic;
  font-size: 11px;
}

/* ══════════════════════════════════════════
   BOTTOM BAR  (Pintura style)
══════════════════════════════════════════ */
#bottom-bar {
  height: 175px;
  flex-shrink: 0;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.bottom-panel {
  display: none;
  height: 100%;
  flex-direction: column;
  padding: 0;
}
.bottom-panel.active {
  display: flex;
}

/* Generic bottom row */
.bb-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  flex-shrink: 0;
}

.bb-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 4px;
}

/* ── TRANSFORM bottom panel ── */
#bottom-transform {
  justify-content: space-between;
}

.bb-row-1 {
  border-bottom: 1px solid var(--border);
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: center;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.bb-row-1::-webkit-scrollbar { display: block; height: 8px; }
.bb-row-1::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 4px; }
.bb-row-1::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; border: 1px solid var(--scrollbar-track); }
.bb-row-1::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

.ratio-pills {
  display: flex;
  gap: 4px;
  align-items: center;
}

.ratio-btn {
  padding: 5px 11px;
  font-size: 12px; font-weight: 500; font-family: var(--font);
  background: var(--bg-4); border: 1px solid var(--border);
  border-radius: 20px; color: var(--text-2); cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.ratio-btn:hover  { background: var(--bg-5); color: var(--text); }
.ratio-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.icon-btns {
  display: flex;
  gap: 2px;
  align-items: center;
}

/* Row 2 — Pintura-style tape row */
.bb-row-tape {
  flex: 1;
  justify-content: center;
  padding: 0 16px;
  overflow: hidden;
}

/* Centered wrapper — width is set dynamically by JS to match canvas display width */
.tape-track-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
  width: 640px; /* overridden by JS to match image width */
  max-width: 100%;
}

/* Reference indicator line above the tape */
.tape-track-wrap::before {
  content: '';
  width: 2px;
  height: 8px;
  background: var(--accent);
  border-radius: 0 0 2px 2px;
  flex-shrink: 0;
}

/* Pintura-style dot-ruler tape */
.pintura-tape {
  width: 100%;
  height: 28px;
  cursor: ew-resize;
  position: relative;
  user-select: none;
  border-radius: 4px;
  overflow: hidden;
  /* Two-level dot pattern: major dots every 40px, minor dots every 8px */
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.5) 2px,  transparent 2.5px),
    radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 1.5px);
  background-size: 40px 100%, 8px 100%;
  background-repeat: repeat-x, repeat-x;
  background-position: 0 center, 0 center;
}

/* Tape limit overlays — grow from edges as value approaches min/max */
.tape-limit-left,
.tape-limit-right {
  position: absolute;
  top: 0; bottom: 0;
  width: 0;
  pointer-events: none;
  z-index: 1;
}
.tape-limit-left {
  left: 0;
  background: linear-gradient(to right, var(--bg-2) calc(100% - 6px), transparent);
}
.tape-limit-right {
  right: 0;
  background: linear-gradient(to left, var(--bg-2) calc(100% - 6px), transparent);
}

/* Tape value overlay */
.tape-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: rgba(13,13,22,0.78);
  padding: 2px 8px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
}

/* Mode tab buttons below the tape */
.tape-tabs {
  display: flex;
  gap: 2px;
  margin-top: 4px;
}

.tape-tab {
  padding: 3px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  font-family: var(--font);
  transition: background .15s, color .15s;
}
.tape-tab:hover  { color: var(--text-2); }
.tape-tab.active { background: var(--bg-4); color: var(--text); }

/* Row 3 — resize + crop actions */
/* Crop action icon buttons (apply ✓ / reset ↺) — inside bb-row-1 */
.crop-action-btn {
  width: 32px; height: 32px;
  padding: 0;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.crop-apply-btn { color: var(--success) !important; }
.crop-apply-btn:hover:not(:disabled) { background: rgba(34,197,94,0.15) !important; }

.resize-inline {
  display: flex;
  align-items: center;
  gap: 5px;
}

.resize-label-sm {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
  flex-shrink: 0;
}

.resize-input-sm {
  width: 68px;
  padding: 4px 6px;
  background: var(--bg-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
  outline: none;
}
.resize-input-sm:focus { border-color: var(--accent); }
.resize-lock-active { color: var(--accent) !important; border-color: var(--accent) !important; }

/* ── FINETUNE bottom panel ── */
#bottom-finetune {
  justify-content: space-between;
}

/* Row 1 — label + value + reset (compact header) */
.bb-row-ft-header {
  justify-content: center;
  padding: 2px 16px;
  flex-shrink: 0;
  height: 26px;
  border-bottom: none;
}

.ft-main-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  flex: 1;
}

.ft-main-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  min-width: 40px;
  text-align: right;
  flex-shrink: 0;
}

/* Row 2 — tape, centré sous l'image */
.bb-row-ft-tape {
  justify-content: center;
  padding: 2px 20px;
  flex-shrink: 0;
  height: 52px;
  align-items: center;
}

/* Finetune tape: taller than transform tape */
.ft-param-tape {
  height: 36px;
}

/* Row 3 — chips */
.bb-row-ft-chips {
  flex: 1;
  padding: 4px 0 4px 16px;
  overflow: visible;
  align-items: center;
}

.ft-chips-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  padding-right: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  flex-wrap: nowrap;
  align-items: center;
}
.ft-chips-scroll::-webkit-scrollbar { display: block; height: 8px; }
.ft-chips-scroll::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 4px; }
.ft-chips-scroll::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; border: 1px solid var(--scrollbar-track); }
.ft-chips-scroll::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

.ft-param {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--bg-4);
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .15s;
  font-family: var(--font);
}
.ft-param:hover { background: var(--bg-5); color: var(--text); }
.ft-param.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
/* value no longer shown in chips */

/* Reset single finetune icon button */
.btn-reset-ft {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-4);
  color: var(--text-3);
  cursor: pointer;
  transition: all .15s;
  padding: 0;
  flex-shrink: 0;
}
.btn-reset-ft:hover { background: var(--bg-5); color: var(--text); border-color: var(--text-3); }
.btn-reset-ft svg { width: 13px; height: 13px; }

/* Apply finetune effects button */
.btn-apply-ft {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--success);
  background: rgba(34,197,94,0.10);
  color: var(--success);
  cursor: pointer;
  transition: all .15s;
  padding: 0;
  flex-shrink: 0;
}
.btn-apply-ft:hover { background: rgba(34,197,94,0.22); color: var(--success); }
.btn-apply-ft:disabled { opacity: 0.35; cursor: default; }
.btn-apply-ft svg { width: 14px; height: 14px; }

/* Spacing tweak so the tape stays centered between the two side buttons */
.bb-row-ft-tape {
  gap: 12px;
}
.btn-ft-side { margin: 0 4px; }

/* ── RESAMPLE bottom panel ── */
#bottom-resample {
  justify-content: center;
  gap: 0;
}
.bb-row-rs-header {
  gap: 8px;
  padding: 6px 20px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border);
}
.rs-info-label {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
}
.rs-info-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
.rs-info-val.rs-new {
  color: var(--accent);
}
.rs-arrow {
  color: var(--text-3);
  margin: 0 2px;
}
.bb-row-rs-inputs {
  gap: 8px;
  padding: 10px 20px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.rs-label {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
  flex-shrink: 0;
}
.rs-input {
  width: 72px;
  padding: 5px 8px;
  background: var(--bg-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  outline: none;
  text-align: center;
}
.rs-input:focus { border-color: var(--accent); }
.rs-dpi-input { width: 60px; }
.rs-lock-active { color: var(--accent) !important; border-color: var(--accent) !important; }

/* ── FILTER bottom panel ── */
#bottom-filter {
  overflow: hidden;
}

.bb-row-presets {
  flex: 1;
  padding: 8px 16px;
  overflow: hidden;
  align-items: flex-start;
}

.preset-grid {
  display: flex;
  flex-direction: row;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  height: 100%;
  align-items: center;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  padding-bottom: 4px;
}
.preset-grid::-webkit-scrollbar { height: 8px; }
.preset-grid::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 4px; }
.preset-grid::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; border: 1px solid var(--scrollbar-track); }
.preset-grid::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

.preset-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-4);
  transition: border-color .15s;
  padding: 0;
  font-family: var(--font);
  flex-shrink: 0;
}
.preset-btn:hover  { border-color: var(--border-2); }
.preset-btn.active { border-color: var(--accent); }
.preset-thumb {
  width: 96px;
  height: 64px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-5);
}
.preset-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  padding: 0 4px 5px;
  text-align: center;
}

/* ── ANNOTATE bottom panel ── */
#bottom-annotate {
  justify-content: space-between;
}

.bb-row-ann-opts {
  border-bottom: 1px solid var(--border);
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 16px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  gap: 8px;
  justify-content: center;
}
.bb-row-ann-opts::-webkit-scrollbar { display: block; height: 8px; }
.bb-row-ann-opts::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 4px; }
.bb-row-ann-opts::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; border: 1px solid var(--scrollbar-track); }
.bb-row-ann-opts::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

.bb-row-ann-tools {
  flex: 1;
  gap: 4px;
  padding: 4px 16px 8px;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  justify-content: center;
}
.bb-row-ann-tools::-webkit-scrollbar { display: block; height: 8px; }
.bb-row-ann-tools::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 4px; }
.bb-row-ann-tools::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; border: 1px solid var(--scrollbar-track); }
.bb-row-ann-tools::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

.ann-opts-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  flex-shrink: 0;
}

/* ── Annotation floating popups ── */
.ann-popup-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ann-popup-trigger.active {
  background: rgba(99,102,241,0.18) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

.ann-popup {
  position: fixed;
  z-index: 7000;
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
  padding: 12px 14px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  /* position is set dynamically by JS */
}
.ann-popup.hidden { display: none; }

.ann-popup-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-3);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.ann-popup-hint {
  font-size: 10.5px;
  color: var(--text-3);
  font-style: italic;
  line-height: 1.35;
  margin-bottom: 2px;
}

.ann-popup-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ann-popup-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  min-width: 62px;
  flex-shrink: 0;
}
.ann-popup-range {
  flex: 1;
  accent-color: var(--accent);
  cursor: pointer;
}
.ann-popup-val {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  min-width: 26px;
  text-align: right;
  flex-shrink: 0;
}
.ann-popup-select {
  flex: 1;
  font-size: 12px;
}
.ann-popup-number {
  width: 60px;
  padding: 3px 6px;
  background: var(--bg-4);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  text-align: center;
  outline: none;
}
.ann-popup-number:focus { border-color: var(--accent); }
.ann-popup-unit { font-size: 11px; color: var(--text-3); }
.ann-popup-color {
  width: 32px; height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  padding: 1px;
  background: var(--bg-4);
}

/* ── Style popup : sliders verticaux Épaisseur + Opacité ─────────────────
   Économise la place horizontale dans la barre EDIT. Les deux sliders sont
   côte à côte, label en haut, valeur en bas. Compatible souris + tactile.
   Override la min-width générique des popups (220px) pour rester compact. */
.ann-popup.ann-popup-style { min-width: 0; width: max-content; padding: 10px 12px; }
.ann-popup-vsliders {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 2px 4px 4px;
}
.ann-vslider-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ann-vslider-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: .3px;
}
.ann-vslider-track {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ann-vslider-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 38px;
  text-align: center;
}
/* Slider vertical : on rotate à -90° pour un comportement uniforme cross-
   browser (writing-mode:vertical-lr varie en handle/track entre Chrome et
   Safari). La rotation conserve les events pointer/touch nativement. */
.ann-vslider {
  -webkit-appearance: none; appearance: none;
  width: 130px;            /* devient hauteur après rotation */
  height: 22px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  transform: rotate(-90deg);
  transform-origin: center;
  accent-color: var(--accent);
  touch-action: none;      /* iPad : empêche le scroll de page pendant le drag */
}
.ann-vslider::-webkit-slider-runnable-track {
  height: 6px;
  background: linear-gradient(90deg, var(--bg-4), var(--bg-5));
  border-radius: 3px;
  border: 1px solid var(--border);
}
.ann-vslider::-moz-range-track {
  height: 6px;
  background: linear-gradient(90deg, var(--bg-4), var(--bg-5));
  border-radius: 3px;
  border: 1px solid var(--border);
}
.ann-vslider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2, var(--accent-3)));
  border: 2px solid var(--bg-3);
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  margin-top: -7px;
  cursor: grab;
}
.ann-vslider::-webkit-slider-thumb:active { cursor: grabbing; }
.ann-vslider::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-3);
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  cursor: grab;
}

/* Badge dans le bouton trigger Style — affiche les valeurs courantes
   "3 · 100%" pour donner un aperçu rapide sans ouvrir le popup. Largeurs
   fixes (tabular-nums + min-width) pour éviter que le bouton bouge quand
   on passe de "100%" à "9%". */
.ann-style-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(99,102,241,.15);
  border: 1px solid rgba(99,102,241,.30);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ann-style-sep { color: var(--text-3); margin: 0 1px; }
/* Cellules à largeur fixe — assez large pour la valeur max (40 / 100). */
#stroke-val,
#opacity-val {
  display: inline-block;
  text-align: right;
  min-width: 1.6em;
}
#opacity-val { min-width: 2.2em; }

/* ── Colonne contextuelle "Coins" (rect / fillrect / image) ──────────── */
.ann-radius-col[hidden] { display: none; }
.ann-radius-col { position: relative; }
.ann-radius-uniform.hidden,
.ann-radius-corners.hidden { display: none; }
.ann-radius-uniform {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.ann-radius-corners {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Grille 2×2 — disposition spatiale TL TR / BL BR. */
.ann-radius-grid {
  display: grid;
  grid-template-columns: repeat(2, 38px);
  grid-template-rows:    repeat(2, 28px);
  gap: 6px;
}
.ann-radius-input {
  width: 100%;
  background: var(--bg-4);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font: 600 11px/1 var(--font);
  text-align: center;
  outline: none;
  padding: 0;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.ann-radius-input:focus { border-color: var(--accent); }
.ann-radius-input::-webkit-outer-spin-button,
.ann-radius-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
/* Bouton toggle uniforme / indépendant */
.ann-radius-mode-btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 26px; height: 22px;
  margin-top: 2px;
  border: 1px solid var(--border);
  background: var(--bg-4);
  border-radius: 6px;
  color: var(--text-3);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.ann-radius-mode-btn:hover { background: var(--bg-5); color: var(--text); }
.ann-radius-mode-btn.active {
  background: rgba(99,102,241,.18);
  border-color: var(--accent);
  color: #fff;
}
.shadow-toggle-off { color: var(--text-3) !important; }
.shadow-toggle-on  {
  background: rgba(99,102,241,0.18) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* Reset label counter button */
.ann-reset-n {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  flex-shrink: 0;
}
.ann-reset-n svg { flex-shrink: 0; }
#label-counter-badge { color: var(--text-2); }
#label-counter-val   { color: var(--accent); font-weight: 700; }

.ann-opt-label {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}

.ann-select {
  padding: 4px 6px;
  font-size: 12px;
  width: auto;
  margin: 0;
}

.ann-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-4);
  color: var(--text-2);
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.ann-btn svg { width: 18px; height: 18px; }
.ann-btn:hover  { background: var(--bg-5); color: var(--text); }
.ann-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Color swatches */
.color-swatches { display: flex; align-items: center; gap: 5px; }
.swatch {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .12s, border-color .12s;
  flex-shrink: 0;
}
.swatch:hover  { transform: scale(1.15); }
.swatch.active { border-color: white; transform: scale(1.1); }
.swatch.bordered { border-color: var(--border-2); }

input[type="color"] {
  width: 28px; height: 28px; padding: 2px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-4); cursor: pointer;
  flex-shrink: 0;
}

/* Shadow inline controls */
.shadow-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Sliders */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--bg-5);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%; border: none;
  background: var(--accent);
  cursor: pointer;
}

/* Select control */
.select-ctrl {
  padding: 6px 8px;
  background: var(--bg-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
  outline: none;
}
.select-ctrl:focus { border-color: var(--accent); }

/* Header format select */
.header-select {
  width: auto;
  margin: 0;
  padding: 5px 8px;
  font-size: 12px;
  height: 32px;
}
.header-select:disabled { opacity: 0.4; cursor: not-allowed; }

/* Channel label colors */
.ch-r { color: #ff6b6b; }
.ch-g { color: #6bcb77; }
.ch-b { color: #6fa8dc; }

/* ══════════════════════════════════════════
   DRAG OVERLAY
══════════════════════════════════════════ */
#drag-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10,8,24,0.85);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.drag-overlay-box {
  border: 2px dashed rgba(255,255,255,0.4);
  border-radius: 20px; padding: 48px 64px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  color: white; font-size: 16px; font-weight: 500;
}
.drag-overlay-box svg { width: 56px; height: 56px; opacity: 0.9; }

/* ══════════════════════════════════════════
   NOTIFICATIONS
══════════════════════════════════════════ */
#notifications {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom));
  left:   calc(20px + env(safe-area-inset-left));
  display: flex; flex-direction: column-reverse; gap: 8px;
  z-index: 9999; pointer-events: none;
}
.notif {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500;
  background: var(--bg-4); border: 1px solid var(--border-2);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  animation: notif-in .25s var(--ease);
  pointer-events: auto;
  color: var(--text);
  max-width: 320px;
}
.notif.success .notif-icon { color: var(--success); }
.notif.error   .notif-icon { color: var(--danger); }
.notif.info    .notif-icon { color: var(--accent); }
.notif-icon { font-weight: 700; font-size: 14px; flex-shrink: 0; }
.notif-out { animation: notif-out .25s var(--ease) forwards; }

@keyframes notif-in  { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes notif-out { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(8px); } }

/* Hide native file input — triggered programmatically */
#file-input { display: none !important; }

/* ── Settings modal ── */
.settings-box {
  width: min(960px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.settings-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 0;
}
.settings-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text);
  line-height: 1.2;
}
/* Croix de fermeture des modales — style unique pour TOUTES les modales.
   ⚠️  Pour toute nouvelle modale, AJOUTE la classe .modal-close-x sur le
       <button> de fermeture (X/cancel). Ne définis PAS un nouveau style. */
.modal-close-x,
#settings-close,
#auth-close,
#about-close,
#confirm-x {
  background: transparent;
  border: none;
  color: var(--text-3);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .2s ease;
}
.modal-close-x:hover,
#settings-close:hover,
#auth-close:hover,
#about-close:hover,
#confirm-x:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text);
  transform: rotate(90deg);
}
.modal-close-x:active,
#settings-close:active,
#auth-close:active,
#about-close:active,
#confirm-x:active { transform: rotate(90deg) scale(.92); }
.settings-body {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  overflow-y: auto;
  align-content: start;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.settings-body::-webkit-scrollbar { width: 8px; }
.settings-body::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 4px; }
.settings-body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
/* Section "Styles IA" prend toute la largeur */
.settings-section-wide { grid-column: 1 / -1; }

/* ── Section heads with big identifying icon ── */
.settings-section-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 4px;
}
.settings-section-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(99,102,241,0.30);
}
.settings-section-icon svg { width: 22px; height: 22px; }
.settings-section-icon-fmt   { background: linear-gradient(135deg, #14b8a6, #06b6d4); box-shadow: 0 4px 14px rgba(20,184,166,0.30); }
.settings-section-icon-theme { background: linear-gradient(135deg, #f59e0b, #ec4899); box-shadow: 0 4px 14px rgba(245,158,11,0.30); }
.settings-section-icon-ai    { background: linear-gradient(135deg, var(--accent-2), var(--accent-3)); box-shadow: 0 4px 14px rgba(168,85,247,0.30); }
.settings-section-head .settings-section-title {
  margin: 0;
  border-bottom: 0;
  padding-bottom: 0;
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
}

/* ── Account section ── */
#account-section .acc-state {
  display: flex; flex-direction: column; gap: 10px;
}
.acc-state.hidden { display: none; }
.acc-placeholder {
  display: flex; flex-direction: column; gap: 10px;
  align-items: flex-start;
}
.acc-placeholder.hidden { display: none; }

/* ── Standalone auth modal ── */
.auth-box {
  width: min(560px, calc(100vw - 32px));
  /* Fixed height so switching login ↔ register doesn't make the modal jump.
     Sized for the tallest state (register form: 4 fields + button + hint). */
  height: 380px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.auth-body {
  padding: 16px 20px 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.auth-body .acc-state {
  display: flex; flex-direction: column; gap: 12px;
}
.auth-body .acc-tabs { margin-bottom: 4px; }
.auth-body .code-boxes { justify-content: center; }

/* ── In-app confirm/alert modal ── */
.confirm-box {
  width: min(560px, calc(100vw - 32px));
  display: flex; flex-direction: column;
  overflow: hidden;
}
.confirm-body {
  padding: 18px 22px 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);
}
.confirm-body p { margin: 0; }
.confirm-body strong { color: var(--text); }
.confirm-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px 16px;
}
/* Variants — applied via JS by toggling classes on the box. */
.confirm-box.is-warn   .settings-title svg { color: var(--warn, #f59e0b); }
.confirm-box.is-danger .settings-title svg { color: var(--danger); }
.confirm-box.is-info   .settings-title svg { color: var(--accent); }
.confirm-box.is-danger .confirm-footer #confirm-ok {
  background: var(--danger); border-color: var(--danger);
}
.confirm-box.is-danger .confirm-footer #confirm-ok:hover { background: #dc2626; border-color: #dc2626; }

.acc-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.acc-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.acc-tab:hover { color: var(--text); }
.acc-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.acc-tab-pane { display: none; }
.acc-tab-pane.active { display: flex; flex-direction: column; gap: 10px; }

.acc-hint {
  font-size: 12px;
  color: var(--text-3);
  margin: 0;
  line-height: 1.4;
}

.acc-form {
  display: flex; flex-direction: column; gap: 10px;
  max-width: 520px;
}
.acc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.acc-row-2cols {
  /* Reduced max-width so emails + passwords share a row without bloat. */
  max-width: 420px;
}
.acc-field { display: flex; flex-direction: column; gap: 4px; }
.acc-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.acc-field input {
  background: var(--bg-4);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 9px;
  font-size: 13px;
  font-family: var(--font);
  outline: none;
  transition: border-color .15s;
}
.acc-field input:focus { border-color: var(--accent); }

/* Logged-in account : profil à gauche, boutons à droite (grille 2 colonnes).
   Specificity must beat the generic `#account-section .acc-state` rule above. */
#account-section #acc-loggedin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, auto);
  gap: 16px;
  align-items: stretch;
}

.acc-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-content: center;
}
.acc-actions .btn {
  white-space: nowrap;
  min-width: 0;
}
/* "Acheter" prend toute la largeur (la rangée 1 entière) */
.acc-actions .acc-action-buy {
  grid-column: 1 / -1;
}
/* Lien admin caché par défaut, occupe la rangée 1 quand visible */
.acc-actions .acc-admin-link:not(.hidden) {
  grid-column: 1 / -1;
}

/* Repli mobile : empile profil + boutons en colonne */
@media (max-width: 720px) {
  #account-section #acc-loggedin { grid-template-columns: 1fr; }
  .acc-actions { grid-template-columns: 1fr 1fr; }
}

/* ── Auth modal — centrage des éléments ── */
#auth-modal .acc-tabs {
  justify-content: center;
}
#auth-modal .acc-hint {
  text-align: center;
}
/* Le form est déjà full-width ; on le centre explicitement */
#auth-modal .acc-form {
  margin: 0 auto;
}
/* Boutons d'action : flex centré — le bouton unique (Sign in / Create) est centré,
   les trois boutons du state confirm (Confirmer / Renvoyer / Annuler) aussi */
#auth-modal .acc-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
#auth-modal .acc-actions .btn {
  justify-content: center;
  min-width: 140px;
  flex: 1 1 auto;
  max-width: 220px;
}

/* Sélecteur de langue dans la section Mon compte — VRAI slider toggle FR ⇄ EN */
.acc-lang-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border, rgba(255,255,255,.08));
}
.acc-lang-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2, inherit);
}

/* Wrapper du slider : labels latéraux + slider central */
.lang-slider-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}

/* Labels FR / EN aux extrémités — cliquables pour forcer la position */
.lang-slider-side {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2, rgba(255,255,255,.45));
  cursor: pointer;
  border-radius: 6px;
  transition: color .22s;
}
.lang-slider-side.active {
  color: #fff;
}
.lang-slider-side:hover { color: rgba(255,255,255,.85); }
.lang-slider-side:focus-visible {
  outline: 2px solid #a855f7;
  outline-offset: 2px;
}
.lang-flag {
  font-size: 16px;
  line-height: 1;
  filter: saturate(1.15);
}

/* Le slider lui-même : un VRAI toggle switch type iOS */
.lang-slider {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 28px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.18),
    0 2px 8px rgba(99,102,241,.25);
  transition: background .25s;
  flex-shrink: 0;
}
.lang-slider:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Track avec labels FR / EN à l'intérieur, légèrement transparents */
.lang-slider-track {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,.55);
  pointer-events: none;
}
.lang-slider-track-label { transition: color .22s, opacity .22s; }
/* Quand FR actif (default) : FR en clair, EN dimmed ; et inversement */
.lang-slider[aria-checked="false"] .lang-slider-label-fr { color: rgba(255,255,255,.85); }
.lang-slider[aria-checked="false"] .lang-slider-label-en { opacity: .55; }
.lang-slider[aria-checked="true"]  .lang-slider-label-en { color: rgba(255,255,255,.95); }
.lang-slider[aria-checked="true"]  .lang-slider-label-fr { opacity: .55; }

/* Knob (cercle) qui glisse */
.lang-slider-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  box-shadow:
    0 2px 4px rgba(0,0,0,.25),
    0 1px 2px rgba(0,0,0,.15);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
/* Position EN : knob glisse à droite (56 - 3 - 22 = 28px) */
.lang-slider[aria-checked="true"] .lang-slider-knob {
  transform: translateX(28px);
}

.acc-profile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  background: var(--bg-4);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.acc-profile-name { font-size: 14px; font-weight: 700; color: var(--text); }
.acc-profile-email { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.acc-credits {
  display: flex; flex-direction: column; align-items: flex-end;
  padding-left: 16px;
  border-left: 1px solid var(--border);
}
.acc-credits-num { font-size: 22px; font-weight: 800; color: var(--accent); line-height: 1; }

/* ── File-name click target + rename popup ── */
.file-name-clickable {
  cursor: pointer;
  border-radius: 4px;
  padding: 1px 4px;
  transition: background .12s;
}
.file-name-clickable:hover { background: var(--bg-4); }
.btn-icon-mini {
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
  flex-shrink: 0;
}
.btn-icon-mini:hover { background: var(--bg-5); color: var(--text); }

/* Filename rename popup (anchored beneath the file-badge by JS) */
.filename-popup {
  position: fixed;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55);
  width: 380px;
  max-width: calc(100vw - 24px);
  z-index: 9500;
  overflow: hidden;
  animation: filename-pop-in .15s ease-out;
}
.filename-popup.hidden { display: none; }
@keyframes filename-pop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Mode "centré" : utilisé quand le popup est ouvert depuis le menu
   Renommer (smartphone, où le file-badge du header est masqué). On
   override les coords inline calculées (top/left) en passant en
   centrage absolu via top/left 50% + transform — important pour
   défaire le style.top/left.style.left posés par positionPopup(). */
.filename-popup.centered {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  animation: filename-modal-in .15s ease-out;
}
@keyframes filename-modal-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.filename-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
}
.filename-popup-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.filename-popup-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.filename-popup-body input {
  width: 100%;
  background: var(--bg-4);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: ui-monospace, 'JetBrains Mono', Menlo, monospace;
  outline: none;
  transition: border-color .15s;
}
.filename-popup-body input:focus { border-color: var(--accent); }
.filename-popup-hint {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.4;
}
.filename-popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 4px;
}
/* Mobile: full-width popup anchored just below the app header */
@media (max-width: 520px) {
  .filename-popup {
    left: 12px !important;
    right: 12px;
    width: auto;
    top: 60px !important;
  }
}
.acc-credits-lbl { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.acc-admin-link.hidden { display: none; }

/* ── 6-digit confirmation code boxes ── */
.code-boxes {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 4px 0 8px;
}
.code-boxes input {
  width: 42px;
  height: 52px;
  background: var(--bg-4);
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: 10px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  font-family: ui-monospace, 'JetBrains Mono', Menlo, monospace;
  outline: none;
  transition: border-color .15s, transform .12s;
  caret-color: var(--accent);
}
.code-boxes input:focus { border-color: var(--accent); transform: scale(1.04); }
.code-boxes input.filled { border-color: var(--accent-2); color: var(--accent); }

/* ── Modale "À propos" ── */
.about-box {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
}
.about-body {
  padding: 18px 22px 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.about-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 0 6px;
}
.about-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(99,102,241,0.40));
  animation: about-logo-in .9s var(--ease) both;
}
.about-title {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
  letter-spacing: -0.6px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.about-title strong {
  font-weight: 800;
  background: linear-gradient(120deg, #6366f1 0%, #8b5cf6 35%, #a855f7 60%, #ec4899 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: hero-grad 6s ease-in-out infinite;
}
.about-pro {
  font-size: 0.45em;
  font-weight: 800;
  letter-spacing: 1.2px;
  background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
}
.about-pro.hidden { display: none; }
.about-version {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(168,85,247,0.16);
  border: 1px solid rgba(168,85,247,0.4);
  color: var(--accent-3);
  letter-spacing: 0.5px;
}
.about-copyright {
  font-size: 12px;
  color: var(--text-3);
  margin: 4px 0 0;
}
.about-desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.about-desc p { margin: 0; }
.about-desc strong { color: var(--text); }
.about-tech {
  font-size: 11.5px;
  color: var(--text-3);
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 4px !important;
}
@keyframes about-logo-in {
  0%   { opacity: 0; transform: scale(0.6) rotate(-10deg); }
  60%  { opacity: 1; transform: scale(1.06) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
/* Le bouton "Fermer" de la modale about utilise les mêmes règles que settings-close */
#about-close {
  background: transparent;
  border: none;
  color: var(--text-3);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .2s ease;
}
#about-close:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text);
  transform: rotate(90deg);
}

/* Bloc création de style dans la modale */
.settings-styles-create {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(220px, 2fr) auto auto;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
}
.settings-styles-create .ai-style-input {
  font-size: 12px;
  padding: 6px 9px;
}
.settings-styles-create .btn {
  white-space: nowrap;
}
@media (max-width: 700px) {
  .settings-styles-create {
    grid-template-columns: 1fr 1fr;
  }
  .settings-styles-create .ai-style-input { grid-column: 1 / -1; }
}
/* Grille des styles dans la modale : ne prend pas trop de hauteur.
   Layout grid (équilibré) défini plus bas — on n'override ici que la hauteur. */
.settings-section .ai-styles-grid {
  max-height: 220px;
}
.settings-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--text-3); margin-bottom: 10px;
}
.settings-fmt-btns {
  display: flex; flex-direction: column; gap: 6px;
}
.settings-fmt-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: var(--bg-4); border: 1px solid var(--border);
  border-radius: 9px; color: var(--text-2);
  font-family: var(--font); font-size: 13px; font-weight: 600;
  cursor: pointer; text-align: left;
  transition: border-color .15s, color .15s, background .15s;
}
.settings-fmt-btn:hover { border-color: var(--border-2); color: var(--text); }
.settings-fmt-btn.active {
  border-color: var(--accent); color: #fff;
  background: rgba(99,102,241,0.12);
}
.settings-fmt-hint {
  font-size: 11px; font-weight: 400; color: var(--text-3); margin-left: auto;
}
.settings-fmt-btn.active .settings-fmt-hint { color: rgba(255,255,255,0.5); }

.settings-quality-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.settings-quality-label {
  font-size: 12px; font-weight: 600; color: var(--text-2);
  white-space: nowrap; flex-shrink: 0;
}
.settings-quality-slider {
  flex: 1; accent-color: var(--accent); cursor: pointer;
}
.settings-quality-val {
  font-size: 12px; font-weight: 700; color: var(--accent);
  min-width: 36px; text-align: right; flex-shrink: 0;
}
.settings-footer {
  display: flex; justify-content: flex-end;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border);
}

/* Theme picker */
.settings-section {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 10px;
}
/* En-tête de section : icône colorée + titre. On compresse la marge
   pour gagner en hauteur globale de la modale. */
.settings-section-head { margin-bottom: 2px; }
.settings-theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.settings-theme-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--bg-4); border: 1px solid var(--border);
  border-radius: 9px;
  font-family: var(--font); font-size: 12px; font-weight: 600;
  color: var(--text-2);
  cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s, color .15s;
}
.settings-theme-btn:hover { border-color: var(--border-2); color: var(--text); }
.settings-theme-btn.active {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(99,102,241,0.08);
}
.theme-swatch {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.12);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  overflow: hidden;
}
.theme-swatch span { display: block; width: 100%; height: 100%; }
.theme-swatch-default span:nth-child(1) { background: #0c0c16; }
.theme-swatch-default span:nth-child(2) { background: #23233a; }
.theme-swatch-default span:nth-child(3) { background: #6366f1; }
.theme-swatch-default span:nth-child(4) { background: #a855f7; }

.theme-swatch-contrast span:nth-child(1) { background: #050510; }
.theme-swatch-contrast span:nth-child(2) { background: #2c2c52; }
.theme-swatch-contrast span:nth-child(3) { background: #818cf8; }
.theme-swatch-contrast span:nth-child(4) { background: #c084fc; }

.theme-swatch-midnight span:nth-child(1) { background: #050a18; }
.theme-swatch-midnight span:nth-child(2) { background: #182b50; }
.theme-swatch-midnight span:nth-child(3) { background: #38bdf8; }
.theme-swatch-midnight span:nth-child(4) { background: #93c5fd; }

.theme-swatch-slate span:nth-child(1) { background: #0f0f12; }
.theme-swatch-slate span:nth-child(2) { background: #2e2e35; }
.theme-swatch-slate span:nth-child(3) { background: #f59e0b; }
.theme-swatch-slate span:nth-child(4) { background: #fbbf24; }

.theme-swatch-emerald span:nth-child(1) { background: #061410; }
.theme-swatch-emerald span:nth-child(2) { background: #173a30; }
.theme-swatch-emerald span:nth-child(3) { background: #10b981; }
.theme-swatch-emerald span:nth-child(4) { background: #6ee7b7; }

.theme-swatch-light span:nth-child(1) { background: #f5f5fa; }
.theme-swatch-light span:nth-child(2) { background: #d6d6e0; }
.theme-swatch-light span:nth-child(3) { background: #6366f1; }
.theme-swatch-light span:nth-child(4) { background: #a855f7; }

/* Annotation selection overlay container */
#ann-select-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 25;
}
#ann-select-overlay.hidden { display: none; }
#ann-select-overlay .ann-select-handle,
#ann-select-overlay .ann-select-edit-btn {
  pointer-events: auto;
}

/* Annotation selection box (text/redact resize) */
.ann-select-box {
  position: absolute;
  inset: 0;
  border: 1.5px dashed rgba(99,102,241,0.95);
  background: rgba(99,102,241,0.04);
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}
.ann-select-handle {
  position: absolute;
  width: 12px; height: 12px;
  background: white;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  z-index: 26;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.ann-select-handle[data-h="nw"] { top: -6px; left: -6px; cursor: nw-resize; }
.ann-select-handle[data-h="ne"] { top: -6px; right: -6px; cursor: ne-resize; }
.ann-select-handle[data-h="sw"] { bottom: -6px; left: -6px; cursor: sw-resize; }
.ann-select-handle[data-h="se"] { bottom: -6px; right: -6px; cursor: se-resize; }
.ann-select-handle[data-h="n"]  { top: -6px; left: calc(50% - 6px); cursor: n-resize; }
.ann-select-handle[data-h="s"]  { bottom: -6px; left: calc(50% - 6px); cursor: s-resize; }
.ann-select-handle[data-h="w"]  { top: calc(50% - 6px); left: -6px; cursor: w-resize; }
.ann-select-handle[data-h="e"]  { top: calc(50% - 6px); right: -6px; cursor: e-resize; }
.ann-select-handle.ann-select-rotate {
  top: auto;
  bottom: -28px;
  left: calc(50% - 8px);
  width: 16px; height: 16px;
  cursor: grab;
  background: var(--accent);
  border-color: #fff;
}
.ann-select-handle.ann-select-rotate::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  width: 1.5px;
  height: 10px;
  background: var(--accent);
}
.ann-select-handle.ann-select-rotate:active { cursor: grabbing; }

/* Toolbar layers (premier plan / arrière plan / supprimer) sur l'overlay de sélection */
.ann-select-layers {
  position: absolute;
  top: -42px;
  right: 0;
  display: flex;
  gap: 3px;
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  border-radius: 9px;
  padding: 3px;
  pointer-events: auto;
  z-index: 27;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.ann-layer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: none;
  background: transparent;
  border-radius: 7px;
  color: var(--text-2);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.ann-layer-btn svg { width: 16px; height: 16px; }
.ann-layer-btn:hover { background: var(--bg-5); color: var(--text); }
.ann-layer-btn-danger:hover { background: rgba(239,68,68,0.16); color: var(--danger); }
.ann-layer-toggle.active { background: var(--accent); color: #fff; }
.ann-layer-toggle.active:hover { background: var(--accent-2); color: #fff; }
.ann-layer-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 3px;
  align-self: center;
}
.ann-select-edit-btn {
  position: absolute;
  top: -42px;
  left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 5px;
  padding: 6px 11px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 7px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  z-index: 27;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.ann-select-edit-btn:hover { background: var(--accent-2); }
.ann-select-edit-btn svg { width: 13px; height: 13px; }

/* Resample-frame draw overlay (rectangle drawn on canvas to set new size) */
/* ── Copy region overlay (outil "Copier zone" du panneau Annoter) ── */
#copyrgn-overlay {
  position: absolute;
  z-index: 27;
  pointer-events: none;
}
#copyrgn-overlay.hidden { display: none; }
.copyrgn-box {
  position: absolute;
  inset: 0;
  border: 2px dashed #f59e0b;
  background: rgba(245,158,11,0.12);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
  cursor: move;
  pointer-events: auto;
}
.copyrgn-handle {
  position: absolute;
  width: 12px; height: 12px;
  background: #fff;
  border: 1.5px solid #f59e0b;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  pointer-events: auto;
}
.copyrgn-handle[data-h="nw"] { top: -6px; left: -6px; cursor: nw-resize; }
.copyrgn-handle[data-h="ne"] { top: -6px; right: -6px; cursor: ne-resize; }
.copyrgn-handle[data-h="sw"] { bottom: -6px; left: -6px; cursor: sw-resize; }
.copyrgn-handle[data-h="se"] { bottom: -6px; right: -6px; cursor: se-resize; }
.copyrgn-handle[data-h="n"]  { top: -6px; left: calc(50% - 6px); cursor: n-resize; }
.copyrgn-handle[data-h="s"]  { bottom: -6px; left: calc(50% - 6px); cursor: s-resize; }
.copyrgn-handle[data-h="w"]  { top: calc(50% - 6px); left: -6px; cursor: w-resize; }
.copyrgn-handle[data-h="e"]  { top: calc(50% - 6px); right: -6px; cursor: e-resize; }
.copyrgn-actions {
  position: absolute;
  top: -38px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  pointer-events: auto;
}
.copyrgn-actions .btn { padding: 4px 9px; }

#rs-frame-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  cursor: crosshair;
  pointer-events: none;
}
#rs-frame-overlay.active { pointer-events: auto; }
.rs-frame-rect {
  position: absolute;
  border: 2px dashed #f59e0b;
  background: rgba(245,158,11,0.12);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
  pointer-events: none;
}
/* Active state hint on the toggle button */
#btn-rs-draw.active {
  background: rgba(245,158,11,0.18) !important;
  border-color: #f59e0b !important;
  color: #f59e0b !important;
}

/* ── PDF format tag ── */
.format-tag.pdf-tag {
  background: rgba(220, 53, 69, 0.15);
  color: #dc3545;
  border-color: rgba(220, 53, 69, 0.3);
  font-weight: 700;
}

/* ── PDF page picker modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  backdrop-filter: blur(3px);
  /* Fade-in / fade-out global pour TOUTES les modales. On surcharge le
     comportement du .hidden générique (display:none → fade) sans casser le
     reste de l'app où .hidden = display:none. Le sélecteur ciblé garantit
     qu'on ne touche que les .modal-overlay. */
  opacity: 1;
  visibility: visible;
  transition: opacity .22s ease, visibility 0s 0s;
}
/* La modale de confirmation universelle (#confirm-modal) peut être ouverte
   par-dessus n'importe quelle autre modale (account, settings, …). Sans un
   z-index plus élevé, elle reste derrière l'ouvreuse car elle est déclarée
   plus haut dans le DOM (HTML order = z fallback à z-index égal).
   ⚠️  ON N'AJOUTE QUE z-index ICI — surtout pas opacity/visibility, sinon
   l'ID surclasse `.modal-overlay.hidden` (specificity ID > 2 classes) et
   la modale ne se masque plus jamais → flou résiduel sur l'interface. */
#confirm-modal {
  z-index: 9200;
}
.modal-overlay.hidden {
  display: flex !important;     /* override .hidden { display:none } */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility 0s .22s;
}
/* Petit "pop" sur la modal-box quand elle apparaît : scale .96 → 1 + fade */
.modal-overlay .modal-box {
  transform: scale(1);
  transition: transform .22s ease, opacity .22s ease;
  opacity: 1;
}
.modal-overlay.hidden .modal-box {
  transform: scale(.96);
  opacity: 0;
}

.modal-box {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.45);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pdf-picker-box {
  width: 420px;
  max-width: calc(100vw - 32px);
}

.pdf-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.pdf-picker-title-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-thumb-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-3);
  min-height: 240px;
  max-height: 380px;
  overflow: hidden;
  padding: 12px;
}
#pdf-thumb-canvas {
  max-width: 100%;
  max-height: 356px;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  display: block;
}

.pdf-picker-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
}
.pdf-nav-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.pdf-nav-btn:disabled { opacity: 0.3; cursor: default; }
.pdf-page-num {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  min-width: 70px;
  text-align: center;
}

/* DPI selector row */
.pdf-dpi-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
}
.pdf-dpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
  flex-shrink: 0;
}
.pdf-dpi-select {
  flex: 1;
  font-size: 12px;
  background: var(--bg-4);
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
  cursor: pointer;
  min-width: 0;
}
.pdf-dpi-info {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 100px;
  text-align: right;
}

/* PDF picker cancel button — no background, visible cross with hover animation */
#pdf-picker-cancel {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  border-radius: 6px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.18s, transform 0.2s ease;
  outline: none;
}
#pdf-picker-cancel:hover {
  color: #ffffff;
  background: transparent;
  transform: scale(1.25) rotate(90deg);
}
#pdf-picker-cancel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pdf-picker-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

/* ══════════════════════════════════════════
   PRINT MODAL
══════════════════════════════════════════ */
.print-modal-box {
  width: 920px;
  max-width: calc(100vw - 32px);
  height: 600px;
  /* 100dvh = "dynamic viewport height" — corrige le bug iOS Safari où
     100vh inclut la zone occupée par la barre Safari, faisant déborder
     la modale hors écran. Fallback 100vh pour les vieux browsers. */
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
}

.print-mhdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 0;
}
.print-mhdr-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.print-close-btn {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  border-radius: 6px;
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.18s, transform 0.2s ease;
  outline: none;
}
.print-close-btn:hover { color: var(--text); transform: scale(1.2) rotate(90deg); }

.print-mbody {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── Left panel ── */
.print-panel-left {
  width: 272px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.print-panel-left::-webkit-scrollbar { width: 6px; }
.print-panel-left::-webkit-scrollbar-track { background: var(--scrollbar-track); }
.print-panel-left::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

.print-section { display: flex; flex-direction: column; gap: 4px; padding: 5px 0; }
.print-sep { height: 1px; background: var(--border); margin: 1px 0 2px; }

.print-section-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
}
.print-section-lbl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.print-section-lbl-row .print-section-lbl { margin: 0; }

.print-select {
  font-size: 12px;
  background: var(--bg-4);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 8px;
  cursor: pointer;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
}
.print-select:focus { border-color: var(--accent); }

.print-field-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Variante : 2 paires (label/input/unit) côte à côte sur la même ligne.
   Utilisé pour X+Y (Position) et Larg.+Haut. (Taille image). */
.print-field-row-pair { gap: 8px; }
.print-field-pair {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.print-field-lbl {
  font-size: 11px;
  color: var(--text-2);
  width: 32px;
  flex-shrink: 0;
  text-align: right;
}
.print-field-lbl-1ch { width: 12px; }
.print-field-lbl-3ch { width: 30px; }
/* Le label « 4 côtés » et son input ont besoin de plus d'espace que les
   autres champs courts pour rester confortables à lire et à éditer. */
.print-field-lbl-margin    { width: auto; min-width: 48px; text-align: left; }
.print-number-input-margin { flex: 0 0 64px; max-width: 64px; }
.print-number-input {
  flex: 1;
  min-width: 0;
  background: var(--bg-4);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 12px;
  outline: none;
  transition: border-color 0.15s;
  -moz-appearance: textfield;
}
.print-number-input::-webkit-inner-spin-button,
.print-number-input::-webkit-outer-spin-button { opacity: 1; }
.print-number-input:focus { border-color: var(--accent); }
/* Largeurs des champs numériques selon le nombre max de caractères. Les
   modificateurs `-4` / `-6` sont posés sur l'input ET caps maxlength côté
   HTML (note : les browsers ignorent maxlength sur type=number, on relaie
   la contrainte via CSS width pour qu'on ne puisse pas y mettre 1234567). */
.print-number-input-4 { flex: 0 0 44px; max-width: 44px; }
.print-number-input-6 { flex: 1 1 auto; max-width: 70px; min-width: 0; }
.print-unit { font-size: 11px; color: var(--text-3); flex-shrink: 0; width: 18px; }

.print-orient-row { display: flex; gap: 6px; }
.print-orient-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 4px;
  background: var(--bg-4);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-2);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  outline: none;
}
.print-orient-btn:hover { background: var(--bg-5); color: var(--text); }
.print-orient-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-5);
}

.print-dpi-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: var(--bg-5);
  border: 1px solid var(--border-2);
  border-radius: 5px;
  padding: 3px 8px;
  text-align: center;
}

.print-lock-btn {
  -webkit-appearance: none;
  appearance: none;
  background: var(--bg-4);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-3);
  cursor: pointer;
  padding: 3px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s;
  outline: none;
  flex-shrink: 0;
}
.print-lock-btn:hover { color: var(--text-2); border-color: var(--border-2); }
.print-lock-btn.locked { color: var(--accent); border-color: var(--accent); }

.print-quick-row { display: flex; gap: 5px; }
.print-quick-row .btn { flex: 1; justify-content: center; font-size: 11px; padding: 5px 2px; }

.print-optimal-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 5px;
  font-size: 11px;
  padding: 6px 8px !important;
  flex-wrap: wrap;
}
.print-optimal-info {
  width: 100%;
  text-align: center;
  font-size: 10px;
  color: var(--text-3);
  font-weight: 500;
}

/* ── Right panel: preview ── */
.print-panel-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-2);
}
.print-preview-wrap {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
#print-preview-canvas {
  display: block;
  flex-shrink: 0;
}
.print-preview-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-3);
  padding: 6px 12px 7px;
  border-top: 1px solid var(--border);
  background: var(--bg-3);
  flex-shrink: 0;
}

/* ── Footer ── */
.print-mfooter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
  flex-shrink: 0;
}

/* ── Toggle switch (marges on/off) — réutilisable ── */
.print-toggle { position: relative; display: inline-flex; cursor: pointer; user-select: none; }
.print-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.print-toggle-track {
  width: 30px; height: 16px;
  background: var(--bg-5, #2a2a35);
  border: 1px solid var(--border);
  border-radius: 999px;
  position: relative;
  transition: background 0.18s, border-color 0.18s;
}
.print-toggle-knob {
  position: absolute; top: 1px; left: 1px;
  width: 12px; height: 12px;
  background: var(--text-2);
  border-radius: 50%;
  transition: left 0.18s, background 0.18s;
}
.print-toggle input:checked + .print-toggle-track {
  background: var(--accent);
  border-color: var(--accent);
}
.print-toggle input:checked + .print-toggle-track .print-toggle-knob {
  left: 15px;
  background: #fff;
}

/* ── Switch params/preview (smartphone uniquement) ── */
.print-view-switch {
  display: none;
  gap: 4px;
  background: var(--bg-4);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 2px;
}
.print-view-switch-btn {
  -webkit-appearance: none; appearance: none;
  background: transparent;
  border: none;
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.print-view-switch-btn.active {
  background: var(--accent);
  color: #fff;
}

@media (max-width: 768px) {
  .print-modal-box {
    height: calc(100vh - 16px);
    height: calc(100dvh - 16px);
    width: calc(100vw - 12px);
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }
  .print-view-switch { display: inline-flex; }
  .print-mbody[data-view='params'] .print-panel-right { display: none; }
  .print-mbody[data-view='params'] .print-panel-left  { width: 100%; border-right: none; }
  .print-mbody[data-view='preview'] .print-panel-left { display: none; }
  .print-mbody[data-view='preview'] .print-panel-right { width: 100%; }
  /* Header compact sur smartphone : titre tronqué + switch + croix
     doivent tenir sur la même ligne sans wrap. */
  .print-mhdr { padding: 4px 10px; gap: 6px; }
  .print-mhdr-title { font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .print-mhdr-title svg { flex-shrink: 0; }
  .print-mfooter { padding: 6px 10px; }
  /* L'overlay reste scrollable si jamais la modale ne tient pas
     (clavier iOS qui réduit la zone visible, par ex.). */
  #print-modal { align-items: flex-start; padding: 8px; overflow-y: auto; }
}

/* ── FRAME bottom panel ── */
#bottom-frame {
  justify-content: space-between;
  overflow: hidden;
}

.bb-row-frame-opts {
  border-bottom: 1px solid var(--border);
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 16px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  gap: 8px;
  justify-content: center;
}
.bb-row-frame-opts::-webkit-scrollbar { display: block; height: 8px; }
.bb-row-frame-opts::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 4px; }
.bb-row-frame-opts::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; border: 1px solid var(--scrollbar-track); }
.bb-row-frame-opts::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

.frame-btn canvas {
  display: block;
  border-radius: 6px 6px 0 0;
}

/* ══════════════════════════════════════════
   AI PANEL
══════════════════════════════════════════ */
.tool-sep {
  width: 32px;
  height: 1px;
  background: var(--border);
  margin: 8px 0;
  flex-shrink: 0;
}

.tool-btn-ai svg {
  color: var(--accent-3);
}
.tool-btn-ai.active svg,
.tool-btn-ai:hover svg {
  color: var(--accent-3);
  filter: drop-shadow(0 0 6px var(--accent-glow));
}

/* Prompt Builder — accent ambre/orange pour distinguer de l'IA générique */
.tool-btn-pb svg {
  color: #f59e0b;
}
.tool-btn-pb:hover svg {
  color: #fbbf24;
  filter: drop-shadow(0 0 6px rgba(245,158,11,0.55));
}

/* ── Credit badge under the AI button ── */
.credit-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  margin: 0 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  box-shadow: 0 4px 12px var(--accent-glow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.credit-badge:hover { transform: scale(1.06); box-shadow: 0 6px 16px var(--accent-glow); }
.credit-badge.hidden { display: none; }
.credit-badge svg { width: 13px; height: 13px; }
.credit-badge-num { line-height: 1; }
.credit-badge.low { background: linear-gradient(135deg,#f97316,#ef4444); }

/* ── Credit debit animation (flash + soap-bubble) ── */
.credit-badge.credit-flash {
  animation: credit-flash .7s ease;
}
@keyframes credit-flash {
  0%   { transform: scale(1);    box-shadow: 0 4px 12px var(--accent-glow); }
  18%  { transform: scale(1.18); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0.30), 0 6px 24px rgba(239, 68, 68, 0.55); filter: brightness(1.4); }
  45%  { transform: scale(0.96); }
  100% { transform: scale(1);    box-shadow: 0 4px 12px var(--accent-glow); filter: brightness(1); }
}

/* Soap-bubble : 2-element rig.
   - .credit-debit-bubble-wrap : positioned at the badge, handles VERTICAL rise + opacity fade.
   - .credit-debit-bubble       : the visual pill, handles a gentle HORIZONTAL sway + breathe.
   Two independent animations on different elements eliminate transform conflicts and produce
   silky-smooth motion (no jerks from competing keyframe steps). */
.credit-debit-bubble-wrap {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  /* Anchor centered on the badge so left/top from JS targets the badge centre. */
  transform: translate(-50%, -50%);
  /* Single, simple, smooth ease-out rise + a gentle fade in/out. */
  animation:
    credit-bubble-rise 1.25s cubic-bezier(.22, 1, .36, 1) forwards,
    credit-bubble-fade 1.25s ease-out forwards;
  will-change: transform, opacity;
}
@keyframes credit-bubble-rise {
  from { translate: 0 0; }
  to   { translate: 0 -260px; }
}
@keyframes credit-bubble-fade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

.credit-debit-bubble {
  /* Visual pill, no fixed positioning — transformed independently of the wrap. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  font-family: var(--font, system-ui, sans-serif);
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
  padding: 5px 13px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.42), rgba(239, 68, 68, 0.42));
  backdrop-filter: blur(4px) saturate(140%);
  -webkit-backdrop-filter: blur(4px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 4px 14px rgba(239, 68, 68, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
  letter-spacing: .4px;
  position: relative;
  /* Single keyframe that combines horizontal sway + subtle breathing scale.
     Running with `alternate` gives a natural back-and-forth without jerks. */
  animation: credit-bubble-sway 1.6s ease-in-out infinite alternate;
  transform-origin: center center;
  will-change: transform;
}
.credit-debit-bubble::before {
  /* Tiny highlight blob, like a soap-bubble surface reflection. */
  content: "";
  position: absolute;
  top: 4px;
  left: 10px;
  width: 9px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  filter: blur(0.5px);
}
@keyframes credit-bubble-sway {
  from { transform: translateX(-14px) scale(0.97); }
  to   { transform: translateX( 14px) scale(1.04); }
}

/* Bottom bar grows when AI is active to give room for prompt + controls */
body[data-panel='ai'] #bottom-bar {
  height: 320px;
}

/* Mask toolbar — affichée dans le panneau de droite de l'onglet Modifier
   (depuis la fusion edit+inpaint). Stack vertical pour tenir dans la
   colonne étroite ; les boutons restent compacts. */
.ai-mask-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  flex-shrink: 0;
}
.ai-mask-tools {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}
.ai-mask-brush-range { width: 90px; }

/* Bloc « Masque (optionnel) » dans la controls-col de Modifier — encadré
   visuel : tous les outils (modes + couleur + taille pinceau + poubelle)
   sont regroupés dans un même flex-wrap pour cohésion visuelle. */
.ai-mask-section {
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 4px;
  background: rgba(255,255,255,0.015);
}
.ai-mask-section-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-bottom: 6px;
}
.ai-mask-toolbar-grouped {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 0;
}
.ai-mask-toolbar-grouped .ai-mask-mode-btn { padding: 4px 7px; }
/* Sous-ligne dédiée à la taille du pinceau + poubelle. flex-basis 100%
   force un saut de ligne dans le parent flex-wrap, et flex-nowrap maintient
   les 4 enfants (label, slider, valeur, poubelle) sur la même ligne. */
.ai-mask-brush-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  flex-basis: 100%;
  margin-top: 2px;
}
.ai-mask-brush-row .ai-mask-brush-range { flex: 1; min-width: 0; }
.ai-mask-brush-row #ai-mask-brush-val { min-width: 22px; text-align: right; }
.ai-mask-brush-row .ai-ctrl-label { flex-shrink: 0; }

/* Source info / status secondary row inside controls col */
.ai-source-info-row {
  margin-top: -2px;
  justify-content: center;
}
.ai-source-info-row .ai-info-text {
  font-size: 10.5px;
  color: var(--text-3);
}

/* Seed input — compact number field inside an AI ctrl row */
.ai-seed-input {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  font-size: 11.5px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-family: var(--font);
  outline: none;
}
.ai-seed-input:focus { border-color: var(--accent); }
.ai-seed-input::-webkit-inner-spin-button,
.ai-seed-input::-webkit-outer-spin-button {
  opacity: 0.5;
}

#bottom-ai {
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.bb-row-ai-tabs {
  border-bottom: 1px solid var(--border);
  padding: 6px 12px;
  gap: 8px;
  flex-shrink: 0;
}

.ai-tabs {
  display: flex;
  gap: 2px;
  align-items: center;
  flex-shrink: 0;
  background: var(--bg);
  border-radius: 8px;
  padding: 2px;
}
.ai-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  font-size: 12px; font-weight: 500; font-family: var(--font);
  background: transparent; border: none;
  border-radius: 6px; color: var(--text-3); cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.ai-tab:hover { color: var(--text-2); }
.ai-tab.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px var(--accent-glow);
}
.ai-tab svg { opacity: 0.9; }

.ai-status-wrap {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
}
.ai-status {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
  font-style: italic;
}
.ai-status.loading {
  color: var(--accent);
  font-style: normal;
}
.ai-status.loading::before {
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 6px;
  border: 2px solid var(--accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: ai-spin .7s linear infinite;
  vertical-align: -1px;
}
.ai-status.error { color: var(--danger); font-style: normal; }
.ai-status.success { color: var(--success); font-style: normal; }
@keyframes ai-spin { to { transform: rotate(360deg); } }

.bb-row-ai-body {
  flex: 1;
  padding: 0;
  overflow: hidden;
  align-items: stretch;
  position: relative;
}

.ai-subpanel {
  display: none;
  width: 100%;
  height: 100%;
  flex-direction: row;
  gap: 12px;
  padding: 10px 14px;
  align-items: stretch;
  overflow: hidden;
}
.ai-subpanel.active { display: flex; }

.ai-prompt-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  min-height: 0;
}

.ai-controls-col {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 1px solid var(--border);
  padding-left: 12px;
}

/* Switch button injected into prompt-col / controls-col by JS — hidden on
   wide viewports, only revealed on phone-sized screens. */
.ai-flip-btn {
  display: none;
  align-self: flex-end;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--bg-4);
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  flex-shrink: 0;
}
.ai-flip-btn:hover { background: var(--bg-5); color: var(--text); border-color: var(--border-2); }
.ai-flip-btn svg { width: 12px; height: 12px; }

/* ── Mobile flip layout ── */
@media (max-width: 720px) {
  /* Show the flip toggles. */
  .ai-flip-btn { display: inline-flex; }

  /* Each sub-panel collapses to a single column; only one of the two cols
     is visible at a time, controlled by .show-params on the panel. */
  .ai-subpanel.active {
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px;
  }
  .ai-subpanel.active > .ai-prompt-col,
  .ai-subpanel.active > .ai-refs-col,
  .ai-subpanel.active > .ai-iterate-col   { display: flex; flex: 1; min-height: 0; }
  .ai-subpanel.active > .ai-controls-col  { display: none; }
  .ai-subpanel.active.show-params > .ai-prompt-col,
  .ai-subpanel.active.show-params > .ai-refs-col,
  .ai-subpanel.active.show-params > .ai-iterate-col   { display: none; }
  .ai-subpanel.active.show-params > .ai-controls-col {
    display: flex;
    width: 100%;
    border-left: 0;
    padding-left: 0;
    flex: 1;
    overflow-y: auto;
  }
}

.ai-ctrl-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-ctrl-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  width: 50px;
  flex-shrink: 0;
}

/* Wrapper autour de .ai-prompt-textarea : pile verticale textarea + toolbar.
   Le toolbar contient compteur + boutons paste/copy. Visuellement séparé par
   un fond distinct + des coins arrondis bas. */
.ai-prompt-wrap {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ai-prompt-wrap > .ai-prompt-textarea {
  flex: 1;
  min-height: 0;
  /* Coins arrondis bas supprimés : merge visuel avec le toolbar collé en
     dessous (qui prend les coins arrondis bas pour les deux). */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
}

/* Toolbar bas : compteur (gauche) + spacer + boutons paste/copy (droite).
   Fond légèrement plus clair que le textarea pour donner un effet "barre
   d'état" et différencier visuellement des contrôles encore plus bas. */
.ai-prompt-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  border-top: none;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  flex-shrink: 0;
  min-height: 28px;
}
.ai-prompt-toolbar-spacer { flex: 1; }

/* Compteur — passe en inline (plus en absolute overlay). */
.ai-prompt-counter {
  font-family: var(--font, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
  user-select: none;
  transition: color .15s;
}
.ai-prompt-counter.warn { color: #fbbf24; }
.ai-prompt-counter.over { color: #fca5a5; font-weight: 700; }

/* Boutons paste / copy. */
.ai-prompt-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 22px;
  background: var(--bg-4);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-2);
  cursor: pointer;
  padding: 0;
  transition: background .12s, color .12s, border-color .12s, transform .08s;
}
.ai-prompt-tool-btn:hover  { background: var(--bg-5); color: var(--text); border-color: var(--border-2); }
.ai-prompt-tool-btn:active { transform: scale(.94); }
.ai-prompt-tool-btn.flash-ok {
  background: rgba(34,197,94,.25) !important;
  border-color: rgba(34,197,94,.55) !important;
  color: #4ade80 !important;
}
.ai-prompt-tool-btn.flash-fail {
  background: rgba(239,68,68,.22) !important;
  border-color: rgba(239,68,68,.55) !important;
  color: #f87171 !important;
}

.ai-prompt-textarea {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font);
  font-size: 12.5px;
  padding: 8px 10px;
  resize: none;
  outline: none;
  line-height: 1.4;
  min-height: 0;
  overflow-y: auto;            /* scrollbar verticale pour les longs prompts */
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  transition: border-color .15s, box-shadow .15s;
}
.ai-prompt-textarea::-webkit-scrollbar { width: 8px; }
.ai-prompt-textarea::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 4px; }
.ai-prompt-textarea::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
.ai-prompt-textarea::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
.ai-prompt-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.ai-prompt-textarea::placeholder { color: var(--text-3); }

/* Refs : la zone de prompt grandit pour remplir l'espace disponible */
.ai-prompt-refs { flex: 1; min-height: 0; max-height: none; }

.ai-select {
  flex: 1;
  font-size: 12px;
  padding: 5px 8px;
}
.ai-select-n { flex: 0 0 56px; }

.ai-action-btn {
  margin-left: auto;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
}

/* ── Settings : ligne paramètre IA (label + hint + toggle) ── */
.ai-param-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  background: var(--bg-4);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.ai-param-info { flex: 1; min-width: 0; }
.ai-param-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.ai-param-hint {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 3px;
  line-height: 1.4;
}
.ai-param-hint em { color: #d4af37; font-style: normal; font-weight: 600; }

.ai-param-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.ai-param-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ai-param-toggle-slider {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--bg-5, #2a2a2e);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  transition: background .15s, border-color .15s;
}
.ai-param-toggle-slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--text-3);
  border-radius: 50%;
  transition: transform .15s, background .15s;
}
.ai-param-toggle input:checked + .ai-param-toggle-slider {
  background: rgba(124, 92, 255, 0.25);
  border-color: var(--accent);
}
.ai-param-toggle input:checked + .ai-param-toggle-slider::after {
  transform: translateX(18px);
  background: var(--accent);
}
.ai-param-toggle-state {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  min-width: 28px;
}

/* ── Prompt Builder CTA (ligne dédiée sous "Générer") ── */
/* La row qui contient le bouton est centrée. Pas de margin-left:auto sur l'enfant. */
.ai-ctrl-row.ai-builder-row {
  justify-content: center;
  margin-top: 6px;
}

.ai-builder-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  /* Largeur fluide, bornée — s'adapte à l'écran sans prendre toute la section */
  width: clamp(220px, 90%, 320px);
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.20), rgba(56, 189, 248, 0.18));
  border: 1.5px solid rgba(124, 92, 255, 0.55);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font);
  cursor: pointer;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: background .18s, border-color .18s, transform .12s, box-shadow .18s;
}
.ai-builder-cta::before {
  /* Faint shimmer overlay on hover */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .6s ease;
  pointer-events: none;
}
.ai-builder-cta:hover {
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.32), rgba(56, 189, 248, 0.28));
  border-color: var(--accent);
  box-shadow: 0 6px 20px rgba(124, 92, 255, 0.30), 0 0 0 3px rgba(124, 92, 255, 0.15);
  transform: translateY(-1px);
}
.ai-builder-cta:hover::before { transform: translateX(100%); }
.ai-builder-cta:active { transform: translateY(0); }

.ai-builder-cta-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, #7c5cff, #38bdf8);
  border-radius: 8px;
  color: #fff;
  box-shadow: 0 2px 8px rgba(124, 92, 255, 0.40);
}
.ai-builder-cta-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.ai-builder-cta-main {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .2px;
}
.ai-builder-cta-sub {
  font-size: 10.5px;
  color: var(--text-3);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-builder-cta-arrow {
  flex-shrink: 0;
  color: var(--accent);
  opacity: 0.7;
  transition: transform .15s, opacity .15s;
}
.ai-builder-cta:hover .ai-builder-cta-arrow {
  transform: translateX(3px);
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────
   PROMPT BUILDER MODAL — guided multi-step assistant
   ───────────────────────────────────────────────────────── */
.pb-modal {
  width: min(720px, calc(100vw - 32px));
  height: min(720px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg-2, #16171c) 0%, var(--bg, #101117) 100%);
  border: 1px solid rgba(124, 92, 255, 0.35);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(124, 92, 255, 0.12);
}

.pb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.12), rgba(56, 189, 248, 0.06));
}
.pb-title { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: var(--text); }
.pb-title-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #7c5cff, #38bdf8);
  border-radius: 8px;
  color: #fff;
}
.pb-step-counter {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-3);
  padding: 3px 9px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: var(--bg-4);
  margin-left: 6px;
}
.pb-close-btn {
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: background .12s, color .12s;
}
.pb-close-btn:hover { background: var(--bg-4); color: var(--text); }

.pb-progress {
  height: 3px;
  background: var(--bg-4);
  position: relative;
  overflow: hidden;
}
.pb-progress-bar {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, #7c5cff, #38bdf8);
  transition: width .35s ease;
}

.pb-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
.pb-body::-webkit-scrollbar { width: 8px; }
.pb-body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }

/* History of past Q&As — small square cards in a 5-col grid (4 on
   tablet, 3 on mobile). Cyan/teal accent (different from the purple
   used by the active question card) so the user reads the layers
   visually: history = past, in cool tones; active question = present,
   in warm purple. Each card has a numbered badge + native tooltip
   showing the full text on hover (line-clamp truncates the visible
   content for compactness). */
.pb-history {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.pb-history:empty { display: none; }
@media (max-width: 900px) {
  .pb-history { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
  .pb-history { grid-template-columns: repeat(3, 1fr); }
}
.pb-history-item {
  position: relative;
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.07) 0%, rgba(20, 184, 166, 0.04) 100%),
    var(--bg-4);
  border: 1px solid rgba(34, 211, 238, 0.18);
  border-radius: 9px;
  padding: 8px 9px 7px;
  font-size: 10.5px;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
  aspect-ratio: 1 / 1;
  min-height: 78px;
  overflow: hidden;
  cursor: help;        /* signals the tooltip-on-hover behaviour */
  transition: border-color .18s, box-shadow .18s, transform .18s, background .18s;
}
.pb-history-item:hover {
  border-color: rgba(34, 211, 238, 0.55);
  box-shadow: 0 4px 16px rgba(34, 211, 238, 0.18);
  transform: translateY(-2px);
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.13) 0%, rgba(20, 184, 166, 0.08) 100%),
    var(--bg-4);
}

/* Numbered step badge — anchored upper-right, glowing cyan pill */
.pb-history-num {
  position: absolute;
  top: 4px; right: 4px;
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #22d3ee 0%, #14b8a6 100%);
  color: #0b1726;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -.2px;
  box-shadow: 0 2px 6px rgba(34, 211, 238, 0.45);
  user-select: none;
}

.pb-history-q {
  color: var(--text-3);
  font-weight: 500;
  font-size: 9.5px;
  line-height: 1.3;
  padding-right: 22px;   /* reserve space for the number badge */
  /* Truncate the question to 1 line — it's secondary info. */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pb-history-a {
  color: var(--text);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.3;
  /* Answer takes up to 3 lines — dominant content. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Subtle cyan accent on the answer text for a less-tristful look */
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Current question card */
.pb-content {
  background: var(--bg-4);
  border: 1px solid rgba(124, 92, 255, 0.35);
  border-radius: 12px;
  padding: 18px 18px 16px;
  box-shadow: 0 4px 24px rgba(124, 92, 255, 0.08);
}
.pb-content.pb-fading-out {
  animation: pb-fade-out .25s ease forwards;
  pointer-events: none;
}
.pb-content.pb-fading-in {
  animation: pb-fade-in .45s cubic-bezier(.22, 1, .36, 1);
}
@keyframes pb-fade-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pb-fade-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-8px); }
}

/* History items fade in when newly added */
.pb-history-item.pb-just-added {
  animation: pb-fade-in .4s ease;
}

.pb-q-intro {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 4px;
  font-style: italic;
}
.pb-q-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
  line-height: 1.35;
}

/* Choice chips (single / multi) */
.pb-choices {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.pb-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border: 1.5px solid var(--border-2);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  user-select: none;
}
.pb-chip:hover {
  background: rgba(124, 92, 255, 0.10);
  border-color: rgba(124, 92, 255, 0.55);
  color: var(--text);
}
.pb-chip.selected {
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.30), rgba(56, 189, 248, 0.20));
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.pb-chip.selected::before {
  content: "✓";
  margin-right: 5px;
  font-weight: 700;
}

/* Free text input */
.pb-free {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 4px;
}
.pb-free-label {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.pb-input, .pb-textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  padding: 9px 12px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  resize: vertical;
}
.pb-input:focus, .pb-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.20);
}
.pb-textarea { min-height: 78px; line-height: 1.45; }

/* Items (list with sub-fields, e.g. characters) */
.pb-items { display: flex; flex-direction: column; gap: 10px; }
.pb-item {
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 12px 12px 10px;
  position: relative;
  transition: border-color .15s;
}
.pb-item:hover { border-color: rgba(124, 92, 255, 0.40); }
.pb-item-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.pb-item-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .3px;
}
.pb-item-remove {
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1;
}
.pb-item-remove:hover { color: #ef4444; background: rgba(239,68,68,0.10); }
.pb-item-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pb-field { display: flex; flex-direction: column; gap: 3px; }
.pb-field.full { grid-column: 1 / -1; }
.pb-field-label {
  font-size: 10.5px;
  color: var(--text-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.pb-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1.5px dashed var(--border-2);
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  align-self: flex-start;
}
.pb-add-btn:hover {
  background: rgba(124, 92, 255, 0.08);
  border-color: var(--accent);
  border-style: solid;
  color: var(--text);
}

/* Image-reference slot (drop zone or thumbnail) */
.pb-img-slot {
  display: flex;
  align-items: stretch;
  width: 100%;
}
.pb-img-drop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: 1.5px dashed var(--border-2);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-3);
  font-size: 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.pb-img-drop:hover {
  background: rgba(124, 92, 255, 0.06);
  border-color: var(--accent);
  border-style: solid;
  color: var(--text);
}
.pb-img-thumb {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid rgba(124, 92, 255, 0.45);
  background: var(--bg);
  flex-shrink: 0;
}
.pb-img-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pb-img-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.65);
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pb-img-remove:hover { background: #ef4444; }

/* Final state — assembled prompt + actions */
.pb-final-card {
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.12), rgba(56, 189, 248, 0.08));
  border: 1px solid rgba(124, 92, 255, 0.55);
  border-radius: 12px;
  padding: 16px;
}
.pb-final-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 8px;
}
.pb-final-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
  white-space: pre-wrap;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.pb-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.pb-final-actions .btn { flex: 1; min-width: 140px; justify-content: center; }

/* Footer */
.pb-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--bg-3, var(--bg-4));
}
.pb-footer .btn { display: inline-flex; align-items: center; gap: 6px; }

/* Status / loading */
.pb-status {
  font-size: 12.5px;
  padding: 10px 14px;
  border-radius: 8px;
  text-align: center;
}
.pb-status.loading {
  color: var(--accent);
  background: rgba(124, 92, 255, 0.10);
  border: 1px solid rgba(124, 92, 255, 0.35);
}
.pb-status.error {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.35);
}
.pb-status.hidden { display: none; }
.pb-status .pb-spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid rgba(124, 92, 255, 0.3);
  border-top-color: var(--accent);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  animation: pb-spin .8s linear infinite;
}
@keyframes pb-spin { to { transform: rotate(360deg); } }

/* Mobile */
@media (max-width: 720px) {
  .pb-item-fields { grid-template-columns: 1fr; }
  .pb-final-actions .btn { flex: 1 1 100%; }
}

/* ── Stream preview thumbnail (partial_image snapshots in the AI status pill) ── */
.ai-stream-preview {
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-left: 8px;
  vertical-align: middle;
  border-radius: 6px;
  border: 1px solid var(--accent);
  box-shadow: 0 0 8px var(--accent-glow, rgba(124,92,255,0.3));
  object-fit: cover;
  animation: ai-stream-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes ai-stream-pulse {
  from { box-shadow: 0 0 4px rgba(124,92,255,0.3); }
  to   { box-shadow: 0 0 16px rgba(124,92,255,0.7); }
}

/* ── "Adoucir le prompt" — transient action when the OpenAI safety filter
      rejected a prompt. Sits directly under the active prompt textarea,
      auto-removes when the user starts editing manually. ── */
.ai-soften-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  padding: 7px 12px;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.18), rgba(245, 158, 11, 0.14));
  border: 1.5px solid rgba(249, 115, 22, 0.55);
  border-radius: 8px;
  color: #fcd34d;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .12s, box-shadow .15s;
  align-self: flex-start;
  animation: ai-soften-in .25s ease;
}
.ai-soften-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.32), rgba(245, 158, 11, 0.24));
  border-color: #f59e0b;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
  transform: translateY(-1px);
}
.ai-soften-btn:disabled { opacity: 0.55; cursor: progress; }
.ai-soften-btn.loading svg { animation: ai-soften-spin .8s linear infinite; }
@keyframes ai-soften-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ai-soften-spin { to { transform: rotate(360deg); } }

/* ── Prompt-enhance icon button (✨ Améliorer) ── */
.ai-enhance-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  background: var(--bg-4);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 8px;
  color: #d4af37;            /* doré */
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, opacity .15s, box-shadow .15s;
}
.ai-enhance-btn:hover:not(:disabled) {
  background: rgba(212, 175, 55, 0.12);
  border-color: #d4af37;
  color: #f0c75e;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}
.ai-enhance-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.ai-enhance-btn.loading svg {
  animation: ai-enhance-spin .75s linear infinite;
}
.ai-enhance-btn.done {
  border-color: var(--success, #22c55e);
  color: var(--success, #22c55e);
}
@keyframes ai-enhance-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.ai-info-text {
  font-size: 11px;
  color: var(--text-3);
  font-style: italic;
}

.ai-helper-row {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}
.ai-helper-btn {
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 600;
  font-family: var(--font);
  background: var(--bg-4);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-2);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  letter-spacing: .3px;
}
.ai-helper-btn:hover {
  background: var(--bg-5);
  color: var(--text);
  border-color: var(--accent);
}

.ai-style-strip {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 56px;
  padding: 2px 0 4px;
  width: 100%;
  min-width: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
.ai-style-strip::-webkit-scrollbar { width: 5px; }
.ai-style-strip::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
.ai-style-strip::-webkit-scrollbar-track { background: transparent; }
.ai-style-chip {
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 500;
  font-family: var(--font);
  background: var(--bg-4);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-3);
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
  flex-shrink: 0;
}
.ai-style-chip:hover { color: var(--text); border-color: var(--border-2); }
.ai-style-chip.active {
  background: rgba(168,85,247,0.16);
  border-color: var(--accent-3);
  color: var(--text);
}

.ai-mask-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--accent);
  font-style: italic;
  flex-shrink: 0;
}

.ai-range {
  flex: 1;
  height: 4px;
  cursor: pointer;
}
.ai-range-val {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  min-width: 26px;
  text-align: right;
}


/* References strip */
.ai-refs-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  min-height: 0;
}
.ai-refs-strip {
  display: flex;
  gap: 6px;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;
  flex: 0 0 auto;             /* sizing sur le contenu — laisse le textarea grandir */
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.ai-refs-strip::-webkit-scrollbar { height: 6px; }
.ai-refs-strip::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 3px; }
.ai-refs-strip::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

.ai-ref-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border-2);
  overflow: hidden;
  flex-shrink: 0;
  cursor: default;
}
.ai-ref-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ai-ref-thumb-num {
  position: absolute;
  top: 2px; left: 2px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
}
.ai-ref-thumb-del {
  position: absolute;
  top: 2px; right: 2px;
  width: 18px; height: 18px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  transition: background .12s;
}
.ai-ref-thumb-del:hover { background: var(--danger); }

.ai-ref-add {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: var(--bg);
  border: 1.5px dashed var(--border-2);
  color: var(--text-3);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
  font-family: var(--font);
  font-size: 9.5px;
  font-weight: 600;
  transition: all .12s;
}
.ai-ref-add:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(99,102,241,0.05);
}
.ai-ref-add svg { opacity: 0.8; }

/* Styles library */
.ai-styles-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.ai-styles-grid {
  display: grid;
  /* Auto-fill columns of equal width — every card lines up perfectly. */
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  align-content: flex-start;
  overflow-y: auto;
  padding: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.ai-styles-grid::-webkit-scrollbar { width: 6px; }
.ai-styles-grid::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

.ai-style-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  background: var(--bg-4);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all .12s;
  /* Width is fully driven by the grid track now — no min/max needed. */
  min-width: 0;
  overflow: hidden;
}
.ai-style-card:hover {
  border-color: var(--border-2);
  background: var(--bg-5);
}
.ai-style-card.active {
  border-color: var(--accent-3);
  background: rgba(168,85,247,0.12);
}
.ai-style-card-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.ai-style-card-desc {
  font-size: 10.5px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-style-card-actions {
  position: absolute;
  top: 4px; right: 4px;
  display: none;
  gap: 2px;
  align-items: center;
}
.ai-style-card:hover .ai-style-card-actions,
.ai-style-card.editing .ai-style-card-actions { display: flex; }

.ai-style-card-edit,
.ai-style-card-del {
  width: 18px; height: 18px;
  background: transparent;
  color: var(--text-3);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  transition: background .12s, color .12s;
}
.ai-style-card-edit:hover { background: var(--bg-5); color: var(--accent); }
.ai-style-card-del:hover  { background: rgba(239,68,68,0.18); color: var(--danger); }
.ai-style-card.editing {
  border-color: var(--accent);
  background: rgba(99,102,241,0.08);
}
.ai-style-card:hover .ai-style-card-del { display: flex; }
.ai-style-card-del:hover { color: var(--danger); }

.ai-style-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
  padding: 6px 9px;
  outline: none;
  transition: border-color .12s;
}
.ai-style-input:focus { border-color: var(--accent); }
.ai-style-input::placeholder { color: var(--text-3); }

/* Mask canvas overlay */
#mask-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none;
  cursor: crosshair;
  z-index: 4;
  mix-blend-mode: normal;
}
#mask-canvas.mask-drawing { cursor: crosshair; }
/* L'onglet IA « Modifier » (anciennement edit + inpaint fusionnés) expose
   désormais toujours le mask canvas — l'utilisateur peut peindre une zone
   pour basculer en inpaint, ou laisser vide pour faire une modif globale.
   Par défaut le canvas est inerte ; pointer-events activé seulement quand
   un outil de dessin (paint/rect/erase) est explicitement choisi. */
body[data-panel='ai'][data-ai-sub='edit'] #mask-canvas {
  display: block;
  pointer-events: none;
}
body[data-panel='ai'][data-ai-sub='edit'][data-ai-mask-mode='paint'] #mask-canvas,
body[data-panel='ai'][data-ai-sub='edit'][data-ai-mask-mode='rect']  #mask-canvas,
body[data-panel='ai'][data-ai-sub='edit'][data-ai-mask-mode='erase'] #mask-canvas {
  pointer-events: auto;
}
body[data-panel='ai'][data-ai-sub='edit'] #ann-canvas {
  pointer-events: none !important;
}
/* Mode "Vue" : on désactive le mask-canvas pour laisser passer le pan/zoom de l'image */
body[data-ai-mask-mode='pan'] #mask-canvas {
  pointer-events: none !important;
  cursor: grab;
}
body[data-ai-mask-mode='erase'] #mask-canvas { cursor: cell; }

/* Groupe de modes Pinceau / Gomme / Vue dans la barre d'inpaint */
.ai-mask-modes {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
  flex-shrink: 0;
}
.ai-mask-modes .ai-mask-mode-btn,
.ai-mask-toolbar .ai-mask-mode-btn {
  border: none;
  background: transparent;
  border-radius: 6px;
  padding: 4px 8px;
}
/* État actif — l'ancien sélecteur exigeait un ancêtre .ai-mask-modes qui
   n'existe plus depuis le passage à la toolbar groupée (.ai-mask-toolbar-
   grouped). Le JS pose .active sur le bouton mais aucun style ne s'appliquait
   → l'utilisateur voyait Brush/Rect/Gomme/Vue inactifs visuellement. */
.ai-mask-modes .ai-mask-mode-btn.active,
.ai-mask-toolbar .ai-mask-mode-btn.active {
  background: var(--accent);
  color: #fff;
}
.ai-mask-modes .ai-mask-mode-btn.active svg,
.ai-mask-toolbar .ai-mask-mode-btn.active svg { color: #fff; }

/* Pastille couleur du masque IA — l'<input type=color> est directement
   visible et stylé en cercle. Sur iOS/iPad Safari un input caché refuse
   souvent d'ouvrir le picker via .click() programmatique : ici le tap
   utilisateur est direct sur l'input → 100% fiable. Override des styles
   par défaut du picker WebKit/Mozilla pour avoir une vraie pastille. */
.ai-mask-color-swatch {
  width: 26px; height: 26px;
  margin: 0 4px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.35);
  cursor: pointer;
  flex-shrink: 0;
  outline: none;
  -webkit-appearance: none; appearance: none;
  background: none;
  /* Empêche le scroll de page au tap iOS quand on tap sur la pastille. */
  touch-action: manipulation;
}
.ai-mask-color-swatch:hover  { transform: scale(1.08); }
.ai-mask-color-swatch:active { transform: scale(0.95); }
/* Le rendu interne du picker — on enlève les paddings/borders pour que la
   couleur remplisse toute la pastille circulaire. */
.ai-mask-color-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.ai-mask-color-swatch::-webkit-color-swatch         { border: none; border-radius: 50%; }
.ai-mask-color-swatch::-moz-color-swatch            { border: none; border-radius: 50%; }

/* ── Combo Taille texte : <select> + <input> côte à côte ── */
.font-size-select {
  flex: 0 0 auto;
  width: 80px;
  font-size: 12px;
}
.font-size-input {
  width: 56px;
  margin-left: 4px;
}

/* ── Boutons style texte (Bold / Italic / Underline) dans popup texte ── */
.text-style-toggles {
  display: inline-flex;
  gap: 4px;
}
.text-style-btn {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-family: var(--font);
  font-size: 13px;
  background: var(--bg-4);
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  user-select: none;
  transition: background .12s, color .12s, border-color .12s;
}
.text-style-btn:hover  { background: var(--bg-5); color: var(--text); }
.text-style-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.text-style-btn strong { font-weight: 800; }
.text-style-btn em     { font-style: italic; }
.text-style-btn u      { text-decoration: underline; text-underline-offset: 2px; }

/* ── Bulles BD : poignée draggable du tail + toggle talk/think ── */
.ann-bubble-tail-handle {
  position: absolute;
  width: 18px; height: 18px;
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: 50%;
  cursor: grab;
  pointer-events: auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  /* Position absolue ajustée par JS (tailX/tailY → coords écran) */
  transform: translate(-50%, -50%);
  z-index: 28;
  /* Tactile iPad : empêche le pan de page de l'embarquer. */
  touch-action: none;
}
.ann-bubble-tail-handle:active { cursor: grabbing; }
.ann-bubble-tail-handle.hidden { display: none; }
.ann-bubble-tail-toggle.hidden { display: none; }

/* ── Cadrage déverrouillé : lock toggle + pastille couleur + transparent ── */
.crop-unlock-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* Bouton lock : surface accent quand déverrouillé pour signaler clairement
   l'état actif (= peut sortir des bords image). */
#btn-crop-unlock.unlocked {
  background: var(--accent);
  color: #fff;
}
#btn-crop-unlock.unlocked svg { color: #fff; }
/* Pastille couleur de remplissage — même style que le swatch IA mais plus
   carrée pour rester visuellement distincte (= "couleur de fond" plutôt
   que "couleur de pinceau"). */
.crop-fill-swatch {
  width: 26px; height: 26px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--border-2);
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  outline: none;
  -webkit-appearance: none; appearance: none;
  background: none;
  touch-action: manipulation;
}
.crop-fill-swatch:hover { border-color: var(--text-3); }
.crop-fill-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.crop-fill-swatch::-webkit-color-swatch         { border: none; border-radius: 4px; }
.crop-fill-swatch::-moz-color-swatch            { border: none; border-radius: 4px; }
/* Transparent toggle — actif = picker couleur ignoré, fond restera vide.  */
#btn-crop-fill-transparent.active {
  background: var(--accent);
  color: #fff;
}

/* Damier subtil dans la zone d'extension (cadrage hors image).
   Appliqué sur canvas-wrap quand .crop-extending. L'image est dessinée
   par-dessus → le motif n'est visible que dans la zone qui deviendra
   "fond couleur" au moment de l'apply. */
#canvas-wrap.crop-extending {
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.04) 75%),
    linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.04) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
}

/* AI sub-tab "Itérer" — Responses API */
.ai-tab-responses {
  position: relative;
}
.ai-tab-responses::after {
  content: 'β';
  position: absolute;
  top: -2px; right: -2px;
  font-size: 8px;
  font-weight: 700;
  background: var(--accent-3);
  color: #fff;
  width: 11px; height: 11px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

.ai-iterate-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  min-height: 0;
}

/* Cadre unifié : historique + prompt dans une seule "carte" */
.ai-iterate-combined {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  overflow: hidden;
  min-height: 0;
  transition: border-color .15s, box-shadow .15s;
}
.ai-iterate-combined:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.ai-iterate-divider {
  height: 1px;
  background: var(--border);
  flex-shrink: 0;
  display: none;        /* masqué par défaut — affiché par JS quand il y a un historique */
}
.ai-iterate-combined.has-history .ai-iterate-divider { display: block; }

.ai-iterate-history {
  flex: 0 1 auto;       /* sizing sur le contenu — minimal quand vide */
  max-height: 35%;
  min-height: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 6px 8px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.ai-iterate-combined:not(.has-history) .ai-iterate-history { padding: 4px 8px; }
.ai-iterate-history::-webkit-scrollbar { width: 6px; }
.ai-iterate-history::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

.ai-iterate-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  font-size: 11px;
  color: var(--text-3);
  font-style: italic;
  line-height: 1.35;
}
.ai-iterate-empty svg { flex-shrink: 0; opacity: 0.5; width: 16px; height: 16px; }

.ai-iterate-turn {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.ai-iterate-turn:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.ai-iterate-turn-thumb {
  width: 56px; height: 56px;
  flex-shrink: 0;
  background: var(--bg-3);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border-2);
}
.ai-iterate-turn-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ai-iterate-turn-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ai-iterate-turn-prompt {
  font-size: 11.5px;
  color: var(--text);
  line-height: 1.35;
  word-break: break-word;
}
.ai-iterate-turn-meta {
  font-size: 10px;
  color: var(--text-3);
  display: flex;
  gap: 6px;
  align-items: center;
}
.ai-iterate-turn-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.ai-iterate-mini-btn {
  padding: 3px 6px;
  font-size: 10px;
  font-family: var(--font);
  background: var(--bg-4);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-2);
  cursor: pointer;
  transition: all .12s;
}
.ai-iterate-mini-btn:hover { background: var(--bg-5); color: var(--text); }
.ai-iterate-mini-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }

.ai-prompt-iterate {
  flex: 1;                    /* prend l'espace restant (≈ 64% du combiné) */
  min-height: 0;
  max-height: none;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.ai-prompt-iterate:focus { box-shadow: none !important; }

.ai-iterate-status-row {
  font-style: italic;
  min-height: 18px;
}

/* AI settings section */
.ai-settings-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.ai-settings-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  width: 90px;
  flex-shrink: 0;
}
.ai-settings-input {
  flex: 1;
  background: var(--bg-4);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
  padding: 6px 9px;
  outline: none;
  min-width: 0;
}
.ai-settings-input:focus { border-color: var(--accent); }
.ai-settings-key-wrap {
  flex: 1;
  display: flex;
  gap: 4px;
  align-items: center;
  min-width: 0;
}
.ai-key-toggle {
  flex-shrink: 0;
  width: 28px; height: 28px;
  background: var(--bg-4);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ai-key-toggle:hover { color: var(--text); }
.ai-settings-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 6px;
  font-style: italic;
}
.ai-settings-hint.ok { color: var(--success); font-style: normal; }
.ai-settings-hint.warn { color: #f59e0b; }
.ai-settings-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* AI Result modal */
.ai-result-box {
  width: 720px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
}
.ai-result-body {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  min-height: 0;
  overflow: hidden;
}
.ai-result-thumbs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  flex-shrink: 0;
  scrollbar-width: thin;
}
.ai-result-thumbs:empty { display: none; }
.ai-result-thumb {
  width: 64px; height: 64px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
  background: var(--bg);
  flex-shrink: 0;
  padding: 0;
}
.ai-result-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ai-result-thumb.active { border-color: var(--accent); }
.ai-result-preview-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 0;
  background: var(--bg);
  border-radius: 8px;
  padding: 10px;
  overflow: hidden;
}
#ai-result-img {
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: 4px;
  display: block;
}
.ai-result-meta {
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
}
.ai-result-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border);
}

/* ════════════════════════════════════════════════════════════════════════
   HOME REDESIGN — 6 cards de taille identique + login CTA + copyright
   ──────────────────────────────────────────────────────────────────────── */

/* Hero title : on conserve l'animation d'origine (cf .hero-title plus haut),
   on ajuste juste l'espacement vers la grille de cards. */
.hero-title-wrap {
  margin-bottom: 6px;
}

/* Login CTA — élégant orange/jaune, pas un gros block */
.btn-login-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 22px;
  border: 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;
  color: #2a1a05;
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #f97316 100%);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(245,158,11,.35), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .18s ease, box-shadow .25s, filter .25s;
}
.btn-login-cta:hover  {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(245,158,11,.50), inset 0 1px 0 rgba(255,255,255,.4);
  filter: brightness(1.05);
}
.btn-login-cta:active { transform: translateY(0); filter: brightness(.96); }
.btn-login-cta.hidden { display: none !important; }

/* Grille des 6 cards : 3 col desktop, 2 tablette, 1 mobile, max-width pour
   ne pas bouffer toute la largeur de la page */
/* ═══════════════════════════════════════════════════════════
   GRILLE HOME — quinconce RÉEL (6 lignes × 3 colonnes).
   Chaque card occupe EXACTEMENT 2 demi-lignes → toutes identiques.
   Les cols gauche/droite sont décalées d'1 demi-ligne par rapport
   au centre, créant les marges flottantes en haut et en bas.

   Ligne 1 : [vide]  | Edit ①   | [vide]
   Ligne 2 : URL  ①  | Edit ②   | Toile ①
   Ligne 3 : URL  ②  | CTA  ①   | Toile ②
   Ligne 4 : IA   ①  | CTA  ②   | PB    ①
   Ligne 5 : IA   ②  | Ses  ①   | PB    ②
   Ligne 6 : [vide]  | Ses  ②   | [vide]
   ─────────────────────────────────────────────────────────── */
.home-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 6 lignes auto — chaque paire de lignes = une card (même min-height) */
  grid-template-rows: repeat(6, auto);
  grid-template-areas:
    ".    edit  ."
    "url  edit  blank"
    "url  cta   blank"
    "ai   cta   pb"
    "ai   ses   pb"
    ".    ses   .";
  gap: 12px;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
}

/* Attribution des cards à leur zone — chaque card span AUTOMATIQUEMENT
   2 lignes via les areas répétées dans la grille (ex: "url" en ligne 2
   ET ligne 3 = grid-row span de 2 lignes). */
#btn-home-login { grid-area: cta;   }
#drop-area      { grid-area: edit;  }
#btn-home-url   { grid-area: url;   }
#btn-home-blank { grid-area: blank; }
#btn-home-ai    { grid-area: ai;    }
#btn-home-pb    { grid-area: pb;    }
#session-card   { grid-area: ses;   }

/* Toutes les cards doivent s'étirer pour occuper leur zone entière */
.home-card { align-self: stretch; }

/* Card CTA — reprend le style card normal (pas de span forcé) */
.home-card-login { grid-column: unset; }

/* Responsive — sous 960px on abandonne le quinconce pour un flux 2 col */
@media (max-width: 960px) {
  .home-cards {
    grid-template-areas: none;
    grid-template-rows: auto;
    grid-template-columns: repeat(2, 1fr);
    max-width: 720px;
  }
  #btn-home-login, #drop-area, #btn-home-url,
  #btn-home-blank, #btn-home-ai, #btn-home-pb, #session-card {
    grid-area: auto;
  }
}
@media (max-width: 600px) {
  .home-cards { grid-template-columns: 1fr; max-width: 380px; }
}

/* Card : taille identique, pas de cadre dash, look glassmorph */
.home-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 14px 14px;
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  cursor: pointer;
  color: inherit;
  font: inherit;
  min-height: 180px;
  transition: transform .22s ease, border-color .22s, box-shadow .25s, background .25s;
  overflow: hidden;
}
.home-card:hover {
  transform: translateY(-3px);
  border-color: rgba(168,85,247,.45);
  box-shadow: 0 12px 32px rgba(99,102,241,.16), 0 4px 12px rgba(0,0,0,.18);
  background: linear-gradient(180deg, rgba(168,85,247,.06), rgba(99,102,241,.03));
}
.home-card:focus-visible {
  outline: 2px solid #a855f7;
  outline-offset: 3px;
}

/* Drop card : bord coloré pulsant pendant un drag */
.home-card-drop.dragover {
  border-color: #f59e0b;
  background: linear-gradient(180deg, rgba(245,158,11,.10), rgba(99,102,241,.05));
  box-shadow:
    0 0 0 2px #f59e0b,
    0 0 28px 4px rgba(245,158,11,.45),
    0 12px 32px rgba(245,158,11,.25);
  transform: translateY(-2px);
}

/* Icône dans la card — image PNG dédiée */
.home-card-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(99,102,241,.25));
}

.home-card-title {
  font-size: 14.5px;
  font-weight: 700;
  margin: 2px 0 0;
  line-height: 1.2;
  color: inherit;
}
.home-card-desc {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-2, rgba(255,255,255,.65));
  margin: 0;
}

/* Format tags reusing existing .format-tag (kept identical) */
.home-card .format-list {
  margin-top: auto;
  padding-top: 4px;
}

/* Card session : actions en bas */
.home-card-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: auto;
  padding-top: 6px;
}
.home-card.home-card-session { cursor: default; }
.home-card.home-card-session:hover {
  transform: none;
  border-color: var(--border, rgba(255,255,255,.08));
  box-shadow: none;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
}

/* Copyright discret en bas de la home */
.home-copyright {
  margin-top: 28px;
  text-align: center;
  font-size: 11px;
  color: var(--text-2, rgba(255,255,255,.35));
  letter-spacing: .3px;
}

/* Shortcuts hint — légèrement aéré sur la nouvelle home */
.shortcuts-hint { margin-top: 24px; }

/* ── Modales URL Load + Blank Canvas ── */
.url-load-box,
.blank-canvas-box {
  width: min(540px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.modal-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border, rgba(255,255,255,.08));
}
.modal-hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-2, rgba(255,255,255,.65));
}
.modal-input {
  font-size: 14px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255,255,255,.12));
  background: rgba(0,0,0,.18);
  color: inherit;
  width: 100%;
}
.modal-input:focus {
  outline: 2px solid #6366f1;
  outline-offset: 1px;
  border-color: rgba(99,102,241,.5);
}

/* ── Help / contact modal ── */
.help-modal-box { width: min(540px, 95vw); }
.help-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.help-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2, rgba(255,255,255,.78));
  letter-spacing: .2px;
  text-transform: uppercase;
}
.help-cat-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.help-cat-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(255,255,255,.12));
  background: rgba(255,255,255,.04);
  cursor: pointer;
  font-size: 13px;
  transition: background .15s, border-color .15s;
}
.help-cat-opt:hover { background: rgba(99,102,241,.10); }
.help-cat-opt input { accent-color: #a855f7; }
.help-cat-opt:has(input:checked) {
  background: rgba(168,85,247,.18);
  border-color: rgba(168,85,247,.55);
}
.help-textarea {
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
  line-height: 1.45;
}
.help-counter {
  font-size: 11px;
  color: var(--text-3, rgba(255,255,255,.55));
  text-align: right;
}
.help-anon-warn {
  color: #fbbf24;
  background: rgba(251,191,36,.10);
  border: 1px solid rgba(251,191,36,.35);
  padding: 8px 12px;
  border-radius: 8px;
}
.blank-modal-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.blank-modal-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2, rgba(255,255,255,.6));
  letter-spacing: .3px;
  text-transform: uppercase;
}

/* ── Fade transitions home ↔ editor ── */
#drop-zone, #editor-area {
  transition: opacity .35s ease, transform .35s ease;
}
.fade-out {
  opacity: 0 !important;
  pointer-events: none;
  transform: scale(.98);
}
.fade-in {
  animation: fade-in-anim .35s ease forwards;
}
@keyframes fade-in-anim {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: scale(1); }
}

/* ════════════════════════════════════════════════════════════════════════
   HOME — fond diffus + lens flares dans les cards + icônes XL + scroll mobile
   ──────────────────────────────────────────────────────────────────────── */

/* Fond diffus de la home : 3 grosses taches lumineuses très douces qui
   donnent du corps à la page sans surcharger. Pseudo-éléments pour ne pas
   alourdir le DOM.
   ⚠️  overflow-x: hidden — sinon les halos en pseudo-éléments (520/600px)
   débordent côté droit et créent une scrollbar horizontale parasite, surtout
   sur mobile (<600px). On force overflow-y: scroll (pas auto) pour que la
   scrollbar verticale soit toujours visible — sinon, dès qu'une fenêtre est
   un peu plus haute que les cards, l'utilisateur ne sait pas qu'il faut
   scroller pour atteindre le copyright / les cards du bas. */
#drop-zone {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
#drop-zone::before,
#drop-zone::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .62;
}
/* Halo violet en haut-gauche — plus lumineux + animation */
#drop-zone::before {
  width: 580px; height: 580px;
  top: -200px; left: -180px;
  background: radial-gradient(circle, rgba(99,102,241,.52) 0%, rgba(168,85,247,.20) 45%, transparent 70%);
  animation: home-blob-1 14s ease-in-out infinite;
}
/* Halo orange/rose en bas-droite — plus lumineux + animation */
#drop-zone::after {
  width: 660px; height: 660px;
  bottom: -220px; right: -200px;
  background: radial-gradient(circle, rgba(236,72,153,.40) 0%, rgba(245,158,11,.18) 45%, transparent 70%);
  animation: home-blob-2 18s ease-in-out infinite;
}

@keyframes home-blob-1 {
  0%, 100% { transform: translate(0, 0)         scale(1);    opacity: .62; }
  30%       { transform: translate(40px, 30px)   scale(1.10); opacity: .72; }
  60%       { transform: translate(-20px, 50px)  scale(0.92); opacity: .52; }
}
@keyframes home-blob-2 {
  0%, 100% { transform: translate(0, 0)          scale(1);    opacity: .62; }
  25%       { transform: translate(-50px, -30px)  scale(1.08); opacity: .72; }
  55%       { transform: translate(30px, -50px)   scale(0.95); opacity: .55; }
  80%       { transform: translate(-20px, 20px)   scale(1.05); opacity: .65; }
}

/* Lens flares dark dans chaque card : 2 taches sombres très diffuses qui
   donnent du volume à la card sans la rendre lisible comme un fond chargé.
   Les flares sont des pseudo-éléments en mode multiply pour rester subtils. */
.home-card {
  position: relative;
  isolation: isolate;
}
.home-card::before,
.home-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
  filter: blur(28px);
  transition: opacity .35s ease, transform .35s ease;
  opacity: .85;
}
/* Flare bleuté haut-gauche — plus lumineux */
.home-card::before {
  width: 200px; height: 200px;
  top: -60px; left: -50px;
  background: radial-gradient(circle, rgba(40,60,140,.65) 0%, rgba(30,50,120,.28) 50%, transparent 75%);
}
/* Flare violet/indigo bas-droite — plus lumineux */
.home-card::after {
  width: 220px; height: 220px;
  bottom: -65px; right: -55px;
  background: radial-gradient(circle, rgba(99,102,241,.35) 0%, rgba(30,50,130,.38) 45%, transparent 75%);
}
.home-card:hover::after {
  background: radial-gradient(circle, rgba(168,85,247,.55) 0%, rgba(99,102,241,.35) 45%, transparent 75%);
  transform: scale(1.08);
}
.home-card:hover::before {
  transform: translate(8px, 6px);
}

/* Icônes : taille moyenne avec léger drop-shadow pour donner du relief.
   Réduit (avant 92px) pour compacter la card sans perdre la lisibilité. */
.home-card-icon {
  width: 64px;
  height: 64px;
  filter:
    drop-shadow(0 6px 14px rgba(99,102,241,.30))
    drop-shadow(0 2px 5px rgba(0,0,0,.22));
}
/* ── Tablette / 2 colonnes (600-960px) — cards encore plus compactes ── */
@media (max-width: 960px) {
  .home-cards       { gap: 10px; }
  .home-card        { min-height: 150px; padding: 12px 12px; gap: 5px; }
  .home-card-icon   { width: 52px; height: 52px; }
  .home-card-title  { font-size: 13.5px; }
  .home-card-desc   { font-size: 11.5px; }
  .hero-title-wrap  { margin-bottom: 10px; }
  .drop-wrap        { gap: 10px; }
}

/* ── Mobile / 1 colonne (≤600px) — encore plus compact ── */
@media (max-width: 600px) {
  /* Titre app sur mobile : doit rester visible et lisible. */
  .hero-title { font-size: 22px; }
  .hero-title-text strong { white-space: nowrap; }   /* "Image Edit" ne se coupe pas en deux lignes */

  /* Le drop-wrap doit prendre toute la largeur dispo en mobile (sinon les
     cards de 380px max-width sont confinées au centre et apparaissent
     "tronquées" dans un viewport ~360-420px). */
  .drop-wrap       { width: 100%; gap: 8px; }
  .home-cards      { max-width: 100%; padding: 0 4px; gap: 8px; }
  .home-card       { min-height: 0; padding: 10px 12px; gap: 5px; }
  .home-card-icon  { width: 44px; height: 44px; }
  .home-card-title { font-size: 13.5px; margin-top: 1px; }
  .home-card-desc  { font-size: 11.5px; }
  .hero-title-wrap { margin-bottom: 8px; }
}

/* ── Scrollbar visible en mode smartphone (sinon l'utilisateur ne sait pas
      qu'il peut scroller — déroutant). Sur desktop on garde le look "fin"
      par défaut, sur mobile on la rend toujours visible. ── */
@media (max-width: 600px) {
  #drop-zone {
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: rgba(168,85,247,.55) rgba(255,255,255,.06);
  }
  /* Webkit : forcer la scrollbar visible (sinon iOS la cache totalement) */
  #drop-zone::-webkit-scrollbar {
    width: 7px;
    -webkit-appearance: none;
  }
  #drop-zone::-webkit-scrollbar-track {
    background: rgba(255,255,255,.06);
    border-radius: 99px;
  }
  #drop-zone::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #6366f1, #a855f7);
    border-radius: 99px;
    box-shadow: 0 2px 6px rgba(99,102,241,.45);
  }
  /* Petit indicateur visuel "il y a plus en bas" — chevron animé qui rebondit
     au-dessus du copyright tant que la page n'est pas scrollée à fond. */
  .home-copyright::before {
    content: "▾";
    display: block;
    font-size: 18px;
    margin-bottom: 4px;
    color: rgba(168,85,247,.6);
    animation: bounce-down 1.6s ease-in-out infinite;
  }
}
@keyframes bounce-down {
  0%, 100% { transform: translateY(0);   opacity: .55; }
  50%      { transform: translateY(4px); opacity: .95; }
}

/* ── Pro lock sur les cards IA (Create with AI / Prompt Builder) ──
   Quand l'utilisateur n'est pas connecté Pro, on grise + on affiche un badge
   "Mode Pro requis" en haut à droite. Le clic reste actif (handler décide :
   ouvre la modale d'auth au lieu d'entrer dans l'éditeur). */
.home-card-pro.pro-locked {
  opacity: .55;
  filter: grayscale(.4);
}
.home-card-pro.pro-locked:hover {
  opacity: .75;
  filter: grayscale(.2);
}
.home-card-pro-badge {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
  color: #ffe0a8;
  padding: 4px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(245,158,11,.85), rgba(249,115,22,.85));
  border: 1px solid rgba(245,158,11,.55);
  box-shadow: 0 4px 10px rgba(245,158,11,.30);
  pointer-events: none;
  z-index: 2;
  text-transform: uppercase;
}
.home-card-pro.pro-locked .home-card-pro-badge {
  display: inline-block;
}

/* "Free" badge — bottom-right corner of every free home card, signalling
   "no credits needed for this action". Sits in the SAME corner zone as the
   orange "Mode Pro requis" pill but on free cards (mutually exclusive),
   green-glowing for an immediate visual contrast. */
/* Badge "Free" — discret, fond gris-bleuté sombre à 35% d'opacité.
   Positionné en haut à gauche (symétrique du badge "Mode Pro requis"
   qui est en haut à droite). */
.home-card-free-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  color: rgba(168,212,255,0.90);   /* bleu clair léger */
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(30, 50, 80, 0.35);   /* gris-bleuté sombre à 35% */
  border: 1px solid rgba(100,160,220,0.25);
  pointer-events: none;
  z-index: 2;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

/* Format tags sur une seule ligne sans wrap */
.format-list-nowrap {
  flex-wrap: nowrap !important;
  gap: 4px !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  justify-content: center;
  overflow: hidden;
}
.format-list-nowrap .format-tag {
  padding: 2px 5px;   /* légèrement plus compact pour tenir sur une ligne */
  font-size: 9.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Hero welcome (mode connecté) — remplace le sous-titre "Commencez par…" */
.hero-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.hero-welcome.hidden { display: none; }
.hero-welcome-text {
  font-size: 15px;
  color: var(--text-2);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}
.hero-welcome-text strong { color: var(--text); font-weight: 700; }
.hero-welcome .hero-welcome-buy {
  /* Hérite du style btn-login-cta mais avec un fond plus discret */
  margin-top: 2px;
  font-size: 13px;
  padding: 7px 20px;
  text-decoration: none;
}

/* Card login (non connecté) — demi-hauteur, couleurs jaune/orange,
   span toute la largeur de la grille pour bien attirer l'œil sans
   concurrencer les cards d'édition. */
/* Card CTA "Connexion / Créer un compte" — même taille qu'une card standard,
   positionnée entre Éditer et URL. Même fond/bord que les autres cards, mais
   lens-flares orange/doré pour la distinguer visuellement (plus attractive).
   La card entière est le bouton — pas de bouton interne. */
.home-card-login {
  /* Même layout flex que les autres cards */
  cursor: pointer;
  /* Fond légèrement plus chaud (teinté ambré par-dessus le gradient de base) */
  background:
    linear-gradient(160deg, rgba(245,158,11,0.07) 0%, rgba(249,115,22,0.05) 100%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border-color: rgba(245,158,11,0.30);
}
.home-card-login:hover {
  transform: translateY(-4px);
  border-color: rgba(245,158,11,0.65);
  box-shadow: 0 14px 38px rgba(245,158,11,0.22), 0 4px 12px rgba(0,0,0,.20);
  background:
    linear-gradient(160deg, rgba(245,158,11,0.13) 0%, rgba(249,115,22,0.10) 100%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
/* Lens flares orange/doré (override des ::before/::after violet des autres cards) */
.home-card-login::before {
  background: radial-gradient(circle, rgba(180,80,10,.45) 0%, rgba(140,60,5,.18) 50%, transparent 75%);
}
.home-card-login::after {
  background: radial-gradient(circle, rgba(245,158,11,.25) 0%, rgba(249,115,22,.15) 45%, transparent 75%);
}
.home-card-login:hover::after {
  background: radial-gradient(circle, rgba(251,191,36,.40) 0%, rgba(249,115,22,.25) 45%, transparent 75%);
}
.home-card-login:hover::before {
  transform: translate(8px, 6px);
}
/* Titre de la card login — "Connectez-vous / Créer un compte" mis en avant */
.home-card-login-title {
  font-size: 17px;
  line-height: 1.3;
  margin: 2px 0 0;
  background: linear-gradient(120deg, #fbbf24 0%, #f97316 60%, #fde68a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
/* Description — accentuée */
.home-card-login-desc {
  font-size: 12px;
  line-height: 1.55;
}
.home-card-login-desc strong {
  color: #fcd34d;
  font-weight: 700;
  -webkit-text-fill-color: #fcd34d;
}

/* ═══════════════════════════════════════════════════════════
   BULLE DE DIMENSIONS LIVE (Resample crop + Copy region)
   ─────────────────────────────────────────────────────────── */
.draw-size-bubble {
  position: absolute;
  z-index: 50;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(0,0,0,.78);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  pointer-events: none;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  line-height: 16px;
  text-align: center;
}
.draw-size-bubble .size-bubble-origin {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3px;
  color: rgba(255,255,255,.78);
}

/* ── Grid on/off toggle (mini switch dans la modale Grille) ── */
.grid-onoff {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.grid-onoff input { position: absolute; opacity: 0; pointer-events: none; }
.grid-onoff-track {
  position: relative;
  display: inline-block;
  width: 36px; height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  transition: background .2s;
  flex-shrink: 0;
}
.grid-onoff-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform .22s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.grid-onoff input:checked + .grid-onoff-track {
  background: linear-gradient(135deg, #6366f1, #a855f7);
}
.grid-onoff input:checked + .grid-onoff-track .grid-onoff-knob {
  transform: translateX(18px);
}
.grid-onoff-state {
  font-size: 11px; font-weight: 700;
  color: var(--text-2, rgba(255,255,255,.65));
  min-width: 22px;
}
.grid-onoff input:checked ~ .grid-onoff-state { color: #fff; }

/* ── Bouton Pan : distinguer visuellement de Move ── */
.ann-btn-pan { color: #93c5fd; }
.ann-btn-pan.active { color: #fff; }
.ann-btn.grid-active::after {
  content: "";
  position: absolute;
  bottom: 2px; right: 2px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 4px #f59e0b;
}

/* ═══════════════════════════════════════════════════════════
   EDIT PANEL — compactage : 3 rangées (opts + outils-1 + outils-2)
   Pas d'espace vide entre les rangées : padding réduit + flex 0
   ─────────────────────────────────────────────────────────── */
#bottom-annotate {
  justify-content: flex-start;   /* override le space-between qui créait l'espace vide */
}
#bottom-annotate .bb-row-ann-opts,
#bottom-annotate .bb-row-ann-tools {
  padding: 4px 16px 4px;
  flex: 0 0 auto;                /* ne s'étire plus verticalement */
}
.bb-row-ann-tools-2 {
  border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════
   Mode PAN — curseur grab sur l'image (et grabbing pendant drag)
   On utilise data-ann-tool sur body, posé par JS au click sur tools.
   ─────────────────────────────────────────────────────────── */
body[data-ann-tool="pan"] #ann-canvas,
body[data-ann-tool="pan"] #img-canvas,
body[data-ann-tool="pan"] #canvas-container {
  cursor: grab;
}
body[data-ann-tool="pan"] #canvas-wrap:active #ann-canvas,
body[data-ann-tool="pan"] #canvas-wrap:active #img-canvas,
body[data-ann-tool="pan"] #canvas-wrap:active #canvas-container,
body[data-ann-tool="pan"] #canvas-wrap.is-grabbing #ann-canvas,
body[data-ann-tool="pan"] #canvas-wrap.is-grabbing #img-canvas {
  cursor: grabbing;
}

/* ═══════════════════════════════════════════════════════════
   EDIT — Palette type "Photoshop" : les 3 rangées (couleur + 2 outils)
   forment un bloc unique centré horizontalement, dont la largeur est
   celle de la rangée la plus large. Sur petits écrans, le bloc déborde
   et un ascenseur horizontal apparaît sur le panel.
   ─────────────────────────────────────────────────────────── */
#bottom-annotate.active {
  /* Grille à 1 colonne dimensionnée sur le contenu le plus large : toutes
     les rangées partagent la même largeur, donc s'alignent verticalement. */
  display: grid;
  grid-template-columns: max-content;
  grid-auto-rows: min-content;
  justify-content: center;            /* centre la colonne dans le panel */
  align-content: start;
  overflow-x: auto;                   /* ascenseur horizontal global */
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
#bottom-annotate.active::-webkit-scrollbar { display: block; height: 8px; }
#bottom-annotate.active::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 4px; }
#bottom-annotate.active::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; border: 1px solid var(--scrollbar-track); }
#bottom-annotate.active::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* Les 3 rangées : alignées par la gauche, mêmes paddings, plus de scroll
   propre (le parent gère). width:100% leur fait toutes prendre la largeur
   de la colonne grid (= max-content de la plus large). */
#bottom-annotate .bb-row-ann-opts,
#bottom-annotate .bb-row-ann-tools,
#bottom-annotate .bb-row-ann-tools-2 {
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  gap: 4px;
  padding: 4px 16px;
  overflow: visible;
}
/* Annule les scrollbars individuelles de chaque rangée — c'est le panel
   #bottom-annotate qui scrolle horizontalement pour le tout. */
#bottom-annotate .bb-row-ann-opts::-webkit-scrollbar,
#bottom-annotate .bb-row-ann-tools::-webkit-scrollbar { display: none; }

/* Spacer "fantôme" à la même taille qu'un .ann-btn pour que la rangée 2
   commence à la même colonne que la rangée 1 (Pan/Move au-dessus des deux
   premiers spacers). */
.ann-btn-spacer {
  display: inline-block;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  pointer-events: none;
  visibility: hidden;
}

/* ═══════════════════════════════════════════════════════════
   EDIT — Compact mobile / petit écran (≤ 760 px)
   La rangée d'outils était trop large pour smartphones : on autorise le
   wrap, on réduit les boutons et on cache les labels textuels des popup-
   triggers. La grille parente bascule en pleine largeur (1fr au lieu de
   max-content qui mesurait la largeur unwrapped et empêchait le wrap).

   Breakpoint à 760px pour couvrir iPhone landscape, iPad portrait et iPad
   en split-view. !important utilisé sur les règles critiques pour défaire
   toute cascade non détectée (notamment .bb-row-ann-tools nowrap initial).
   ─────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  #bottom-annotate.active {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow-x: hidden !important;
  }
  #bottom-annotate .bb-row-ann-opts,
  #bottom-annotate .bb-row-ann-tools,
  #bottom-annotate .bb-row-ann-tools-2 {
    flex-wrap: wrap !important;
    row-gap: 4px;
    column-gap: 3px;
    padding: 4px 8px;
    justify-content: center;
    overflow: visible !important;
    width: 100% !important;
  }
  /* Boutons un peu plus petits pour faire tenir plus de tools / ligne. */
  #bottom-annotate .ann-btn {
    width: 32px !important; height: 32px !important;
  }
  #bottom-annotate .ann-btn svg { width: 16px; height: 16px; }
  /* Spacer fantôme inutile en mode wrap (provoquerait un trou). */
  #bottom-annotate .ann-btn-spacer { display: none !important; }
  /* Popup-triggers (Style / Ombre / Contour / Grille / Texte) :
     cache les labels, garde juste l'icône → 4× moins de largeur. */
  #bottom-annotate .ann-popup-trigger {
    padding: 4px 6px;
    min-height: 32px;
  }
  #bottom-annotate .ann-popup-trigger > span:not(.ann-style-badge):not(.ann-style-sep) {
    display: none !important;
  }
  /* Le badge "3 · 100%" du bouton Style reste utile : garde sa taille. */
  #bottom-annotate .ann-style-badge { font-size: 10px; }
  /* Séparateurs un peu moins épais. */
  #bottom-annotate .ann-opts-sep { height: 22px; margin: 0 2px; }
  /* Pastilles couleur un peu plus petites. */
  #bottom-annotate .swatch { width: 22px !important; height: 22px !important; }
  #bottom-annotate #custom-color { width: 26px !important; height: 26px !important; }

  /* Bouton Style en smartphone : icône seule (cacher AUSSI le badge
     "3·100%" — l'utilisateur consulte les valeurs en ouvrant le popup). */
  #bottom-annotate #ann-style-btn .ann-style-badge { display: none !important; }

  /* En smartphone le bloc nom-de-fichier du header est redondant avec
     l'entrée Menu "Renommer" (qui affiche aussi le nom). On le masque
     pour libérer de la place (header très étroit sur petits écrans). */
  .file-badge { display: none !important; }
}

/* Entrée Menu "Renommer" : badge à droite affiche le nom de fichier
   courant (limité en largeur, ellipsis si trop long). Différent du
   raccourci clavier (mêmes parents .app-menu-kbd) → on override couleur
   et on laisse plus de place. */
.app-menu-kbd.app-menu-filename {
  background: var(--bg-4);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   PROMPT BUILDER — modale de choix de pack
   3 cards cliquables : Générique / Radio FM / Enseignants.
   Layout : grille responsive — 3 col desktop, 1 col mobile.
   ─────────────────────────────────────────────────────────── */
.pb-pack-box {
  width: min(960px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 40px);
  overflow: hidden;
}
.pb-pack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* desktop : 3 cols x 2 lignes (6 packs) */
  gap: 12px;
  margin-top: 8px;
}
@media (max-width: 720px) {
  .pb-pack-grid { grid-template-columns: repeat(2, 1fr); }   /* tablette : 2 cols x 3 lignes */
}
@media (max-width: 480px) {
  .pb-pack-grid { grid-template-columns: 1fr; }              /* mobile : 1 col */
}
.pb-pack-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 18px 14px;
  background: var(--bg-4);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s, background .18s, box-shadow .18s;
}
.pb-pack-card:hover {
  transform: translateY(-2px);
  border-color: rgba(245,158,11,0.55);
  background: linear-gradient(180deg, rgba(245,158,11,0.06), rgba(99,102,241,0.03));
  box-shadow: 0 8px 22px rgba(245,158,11,0.18), 0 2px 8px rgba(0,0,0,0.18);
}
.pb-pack-card:focus-visible {
  outline: 2px solid #f59e0b;
  outline-offset: 2px;
}
.pb-pack-icon {
  width: 56px; height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(99,102,241,0.10));
  color: #fbbf24;
}
.pb-pack-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.pb-pack-desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-2);
}

/* ═══════════════════════════════════════════════════════════
   PROMPT BUILDER — Universal brand-identity panel
   Visible across ALL packs at the top of the builder modal.
   `<details>`/`<summary>` for native open/close + a11y. Open
   by default so users SEE they can fill it. The "status" pill
   in the summary updates dynamically when fields are filled
   (so even when collapsed, the user sees what's set).
   ─────────────────────────────────────────────────────────── */
.pb-identity-panel {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 12px;
  flex-shrink: 0;
  overflow: hidden;
}
.pb-identity-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.pb-identity-summary::-webkit-details-marker { display: none; }
.pb-identity-summary svg { color: #f59e0b; flex-shrink: 0; }
.pb-identity-summary::after {
  content: "▾";
  margin-left: auto;
  font-size: 11px;
  color: var(--text-3);
  transition: transform .15s ease;
}
.pb-identity-panel[open] .pb-identity-summary::after { transform: rotate(180deg); }
.pb-identity-summary-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-3);
  font-style: italic;
}
.pb-identity-summary-status {
  font-size: 11px;
  color: #fbbf24;
  font-weight: 600;
  margin-left: 4px;
}
.pb-identity-summary-status:empty { display: none; }

.pb-identity-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  padding: 6px 14px 14px;
  border-top: 1px solid var(--border);
}
@media (max-width: 600px) {
  .pb-identity-fields { grid-template-columns: 1fr; }
}
.pb-identity-field { display: flex; flex-direction: column; gap: 4px; }
.pb-identity-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pb-identity-field input[type="text"] {
  background: var(--bg-4);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: var(--font);
  outline: none;
  transition: border-color .15s;
}
.pb-identity-field input[type="text"]:focus { border-color: var(--accent); }

.pb-identity-field-logo .pb-identity-logo-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pb-identity-logo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-4);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-2);
  font-size: 12px;
  font-family: var(--font);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.pb-identity-logo-btn:hover { background: var(--bg-5); border-color: var(--border-2); color: var(--text); }
.pb-identity-logo-thumb {
  width: 32px; height: 32px;
  border-radius: 6px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--bg-4);
  border: 1px solid var(--border-2);
  flex-shrink: 0;
}
.pb-identity-logo-thumb.hidden { display: none; }
.pb-identity-logo-clear {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-3);
  width: 26px; height: 26px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pb-identity-logo-clear:hover { background: var(--bg-5); color: var(--text); border-color: var(--danger); }
.pb-identity-logo-clear.hidden { display: none; }

/* ── Bouton de langue dans le header (FR / EN toggle) ── */
/* Bouton langue — même forme carrée aux coins arrondis que les autres
   boutons du header (btn-icon : padding:6px + border-radius:10px).
   Le label FR/EN remplace l'icône SVG. */
.header-lang-btn {
  padding: 6px;             /* carré identique à .btn-icon */
  width: 32px;
  height: 32px;
  justify-content: center;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .6px;
  line-height: 1;
  color: var(--text-2);
  border-color: var(--border);
  transition: color .15s, background .15s, border-color .15s;
}
.header-lang-btn:hover {
  color: var(--text);
  background: var(--bg-4);
  border-color: var(--accent);
}
.header-lang-label {
  pointer-events: none;
}

/* ── Icône compte dans le header ── */
.header-account-btn {
  transition: color .2s, background .15s, border-color .15s;
}
.header-account-btn:hover {
  color: var(--text);
  background: var(--bg-4);
  border-color: var(--border-2);
}