/* Fonts self-hosted via /assets/fonts/fonts.css (charge dans index.html avant style.css).
   Fraunces + Inter uniquement. Anciennes refs DM Sans / Be Vietnam Pro / DM Mono
   migrees vers Inter (legacy → unifié) ou monospace systeme. */

:root {
  --teal:        #4db89a;
  --teal-light:  #1a2a25;
  --teal-mid:    #24433c;
  --purple:      #8b84e8;
  --purple-light:#1f1e2c;
  --amber:       #f0ab47;
  --amber-light: #2a2013;
  --red:         #f56565;
  --bg:          #060810;
  --card:        rgba(255,255,255,0.04);
  --card-solid:  #121826;
  --border:      rgba(255,255,255,0.08);
  --text:        #eef1f8;
  --text-2:      rgba(238,241,248,0.7);
  --text-3:      rgba(238,241,248,0.45);
  --header-bg:   #080c18;
  --header-border:rgba(255,255,255,0.06);
  --shadow:      0 8px 24px rgba(0,0,0,0.5);
  --app-max:     820px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100vh; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--wallpaper, var(--bg));
  background-size: cover;
  background-position: center;
  color: var(--text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
}

a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── HEADER ─── */
body.logged-in .app-header,
body.is-landing .app-header,
body.is-auth .app-header,
body.is-chat { overflow: hidden; }
body.is-landing .app-header,
body.is-auth .app-header,
body.is-chat .app-header,
body.is-home .app-header { display: none; }
body.is-landing .app-dock,
body.is-auth .app-dock,
body.is-chat .app-dock,
body.is-studio .app-dock { display: none !important; }
body.is-chat .app-main,
body.is-studio .app-main { padding-bottom: 0; }
body.is-chat .ipad-page { padding-bottom: 0; height: 100dvh; max-height: 100dvh; }
body.is-studio .ipad-page { padding-bottom: 0; }
body.is-chat .ipad-scroll,
body.is-studio .ipad-scroll { padding-bottom: 24px; }
.tableau-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#chatArtifactPanel.collapsed .tableau-scroll { display: none; }
#chatArtifactPanel.collapsed { padding: 8px 16px !important; max-height: none !important; }
.app-header {
  height: 56px;
  background: rgba(8, 12, 24, 0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--header-border);
}
.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
}
.header-logo img { width: 28px; height: 28px; object-fit: contain; }
.header-logo span {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: 15px;
  color: #dde2ee;
}
.header-nav {
  display: flex;
  gap: 4px;
  margin-left: 24px;
}
.header-nav a {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s;
}
.header-nav a:hover { color: #dde2ee; background: rgba(255,255,255,0.05); }
.header-nav a.active { color: white; background: rgba(255,255,255,0.1); }
.header-spacer { flex: 1; }
#headerRight { display: flex; align-items: center; gap: 10px; }
.header-wallet {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 12px;
  color: var(--teal);
  background: rgba(15,155,114,0.1);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.header-user {
  width: 34px; height: 34px;
  background: #1a1f2e;
  border: 1px solid #2a3045;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s;
}
.header-user:hover { border-color: var(--teal); }
.header-user svg { stroke: var(--text-3); }
.header-auth {
  display: flex;
  gap: 8px;
}
.btn-ghost {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--text-3);
  background: transparent;
  border: 1px solid #2a3045;
  padding: 7px 16px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-ghost:hover { color: white; border-color: var(--teal); }
.studio-action-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 2px; font-size: 9px; width: 100%; min-height: 38px; justify-content: center;
}
.studio-action-btn:hover span:first-child { transform: scale(1.15); }
.studio-action-btn span:first-child { font-size: 14px; transition: transform 0.15s; }
.studio-action-btn span:last-child { white-space: nowrap; }
.btn-primary {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: white;
  background: var(--teal);
  border: none;
  padding: 8px 18px;
  border-radius: 7px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.9; }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

.verify-banner {
  position: relative;
  background: linear-gradient(90deg, rgba(240,171,71,0.14), rgba(240,171,71,0.08));
  border-bottom: 1px solid rgba(240,171,71,0.3);
  color: var(--text);
  padding: 8px 16px;
  font-size: 13px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.verify-banner strong { color: #f0ab47; }
.verify-banner button {
  background: rgba(240,171,71,0.2);
  border: 1px solid rgba(240,171,71,0.35);
  color: #f0ab47;
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.verify-banner button:hover { background: rgba(240,171,71,0.3); }
.verify-banner button.dismiss {
  background: transparent;
  border: none;
  color: var(--text-3);
  padding: 2px 6px;
  font-size: 14px;
}

/* ─── MAIN CONTENT ─── */
.app-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* ─── HOME iPad-style ─── */
.ipad-page {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
  padding-bottom: 80px;
}
.ipad-frame {
  width: 100%;
  max-width: var(--app-max);
  margin: 0 auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ipad-banner {
  margin: 10px 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  animation: ipadFade 0.2s ease;
}
.ipad-banner span.label { font-size: 12px; color: var(--text-3); flex: 1; }
.ipad-banner button {
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 20px;
  font-family: inherit;
}
.ipad-banner button.primary { background: rgba(255,255,255,0.12); color: var(--text); }
.ipad-banner button.ghost { color: var(--text-3); }
.ipad-grid-wrap { flex: 1; overflow-y: auto; padding: 28px 36px 120px; }
.ipad-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 32px 120px;
  width: 100%;
}
.ipad-page-title {
  font-family: 'Avenir Next', 'Inter', system-ui, sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
  color: var(--text);
}
.ipad-page-sub {
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 22px;
}
.legal-content {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-2);
}
.legal-content p { margin-bottom: 14px; }
.legal-content strong { color: var(--text); font-weight: 600; }
.legal-content ul { margin: 8px 0 16px 20px; }
.legal-content li { margin-bottom: 6px; }
.legal-content a { color: var(--teal); }
.legal-intro {
  background: rgba(77,184,154,0.06);
  border-left: 3px solid var(--teal);
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 24px;
}
.legal-intro p { margin-bottom: 10px; }
.legal-intro p:last-child { margin-bottom: 0; }
.legal-toc {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 28px;
}
.legal-toc .toc-title {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  margin-bottom: 10px;
}
.legal-toc ol {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  counter-reset: toc;
}
.legal-toc ol[start="4"]  { counter-reset: toc 3; }
.legal-toc ol[start="7"]  { counter-reset: toc 6; }
.legal-toc ol[start="9"]  { counter-reset: toc 8; }
.legal-toc ol[start="11"] { counter-reset: toc 10; }
.legal-toc .toc-group {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal);
  margin-top: 12px;
  margin-bottom: 4px;
}
.legal-toc .toc-group:first-of-type { margin-top: 0; }
.legal-toc li {
  counter-increment: toc;
  padding: 3px 0;
  font-size: 13.5px;
}
.legal-toc li::before {
  content: counter(toc, decimal-leading-zero);
  display: inline-block;
  width: 26px;
  color: var(--text-3);
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
}
.legal-category {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--teal);
  margin: 28px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.legal-toc a {
  color: var(--text-2);
  transition: color 0.15s;
}
.legal-toc a:hover { color: var(--teal); text-decoration: none; }
.legal-section { margin-bottom: 24px; }
.legal-section h3 {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  margin-left: -8px;
  scroll-margin-top: 10px;
}
.legal-section p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-2);
  margin-bottom: 10px;
}
.ipad-grid {
  display: grid;
  grid-template-columns: repeat(4, 86px);
  grid-auto-rows: 96px;
  gap: 10px 32px;
  justify-content: center;
  justify-items: center;
  padding: 12px 0 20px;
}
.ipad-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  width: 86px;
}
.ipad-tile .icon {
  width: 72px; height: 72px; border-radius: 18px;
  font-size: 32px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  box-shadow: 0 5px 16px rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.15s, border 0.15s;
}
.ipad-tile:active .icon { transform: scale(0.94); }
.ipad-tile .label {
  font-size: 11px; color: var(--text-2); text-align: center; line-height: 1.2;
  max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ipad-tile.selected .icon {
  border: 2px solid var(--text);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.2), 0 6px 16px rgba(0,0,0,0.4);
}
.ipad-tile .edit-check {
  position: absolute; top: -6px; left: -6px;
  width: 18px; height: 18px;
  background: rgba(255,255,255,0.18); border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--text-3); font-weight: 700;
}
.ipad-tile.selected .edit-check { background: var(--text); border-color: var(--bg); color: var(--bg); }
.ipad-edit .ipad-tile .icon { animation: ipadWiggle 0.35s ease-in-out infinite alternate; }
.ipad-folder .icon {
  background: rgba(255,255,255,0.07);
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 3px; padding: 7px;
}
.ipad-folder .icon > div {
  border-radius: 4px; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.ipad-folder-edit-badge {
  position: absolute; top: -6px; left: -6px;
  width: 18px; height: 18px;
  background: #facc15; border: 2px solid var(--bg);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: var(--bg); font-weight: 700;
}
.ipad-store .icon {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.18);
  flex-direction: column; gap: 1px;
}
.ipad-store .icon .main { font-size: 26px; }
.ipad-store .icon .sub { font-size: 8px; letter-spacing: 1px; color: var(--text-3); font-weight: 700; }
.ipad-dock {
  background: var(--dock-bg, rgba(28,32,48,0.65));
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-radius: 28px;
  padding: 12px 20px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.08);
  display: inline-flex;
  gap: 16px;
  flex-shrink: 0;
  position: relative;
}
.ipad-dock::before {
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 16px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  border-radius: 1px;
  pointer-events: none;
}
.app-dock {
  width: auto;
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  margin: 0;
}
.app-dock:empty { display: none; }
.app-dock .ipad-dock-item.active .icon {
  color: var(--teal);
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
}
.app-dock .ipad-dock-item.active::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal);
}
.app-dock .ipad-dock-item.active .label { color: var(--text); }
.ipad-dock-item {
  padding: 0;
}
.ipad-dock-item .icon {
  width: 54px; height: 54px;
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
  color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1),
              background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s;
}
.ipad-dock-item .icon svg { display: block; }
.ipad-dock-item:hover .icon {
  transform: translateY(-6px) scale(1.12);
  color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 10px 24px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.2);
}
.ipad-dock-item:active .icon { transform: translateY(-2px) scale(0.95); }
.ipad-dock-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.ipad-dock-item .label {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  text-align: center;
  transition: color 0.15s;
}
.ipad-dock-item:hover .label { color: rgba(255,255,255,0.85); }
.app-dock .ipad-dock-item.active .label { color: var(--teal); }

.ipad-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8,12,24,0.93); backdrop-filter: blur(20px);
  display: flex; flex-direction: column;
  animation: ipadFade 0.2s ease;
}
.ipad-overlay-inner {
  width: 100%; max-width: var(--app-max); margin: 0 auto;
  flex: 1; display: flex; flex-direction: column; min-height: 0;
}
.ipad-overlay-head {
  padding: 20px 20px 12px;
  display: flex; align-items: center; justify-content: space-between;
}
.ipad-overlay-head h2 {
  font-family: 'Avenir Next', 'Inter', system-ui, sans-serif;
  font-size: 19px; font-weight: 600; color: var(--text);
}
.ipad-overlay-head .sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.ipad-close {
  background: rgba(255,255,255,0.08);
  border: none; border-radius: 20px;
  color: var(--text-3); padding: 5px 14px;
  font-size: 13px; cursor: pointer; font-family: inherit;
}
.ipad-search { margin: 0 20px 12px; }
.ipad-search input {
  width: 100%; padding: 9px 14px; border-radius: 12px; box-sizing: border-box;
  background: rgba(255,255,255,0.07); border: 1px solid var(--border);
  color: var(--text); font-size: 13px; outline: none;
}
.ipad-overlay-scroll { flex: 1; overflow-y: auto; padding: 0 20px 20px; }

.ipad-modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  animation: ipadFade 0.2s ease; padding: 20px;
}
.ipad-modal {
  width: 100%; max-width: 340px;
  background: linear-gradient(160deg, #131926, #0e1420);
  border-radius: 24px; border: 1px solid var(--border);
  padding: 24px; box-shadow: var(--shadow);
}
.ipad-modal h3 { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.ipad-modal .modal-sub { font-size: 12px; color: var(--text-3); margin-bottom: 16px; }
.ipad-modal input.modal-input {
  width: 100%; padding: 10px 14px; border-radius: 12px; box-sizing: border-box;
  background: rgba(255,255,255,0.07); border: 1px solid var(--border);
  color: var(--text); font-size: 14px; outline: none; margin-bottom: 12px; font-family: inherit;
}
.ipad-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.ipad-chip {
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  border-radius: 20px; color: var(--text-2);
  font-size: 11px; padding: 4px 10px; cursor: pointer; font-family: inherit;
}
.ipad-chip:hover { background: rgba(255,255,255,0.12); }
.ipad-modal-actions { display: flex; gap: 8px; }
.ipad-modal-actions button {
  flex: 1; padding: 10px; border-radius: 12px;
  font-size: 13px; font-family: inherit; cursor: pointer; font-weight: 600;
}
.ipad-modal-actions .btn-primary { background: rgba(255,255,255,0.14); color: var(--text); border: none; }
.ipad-modal-actions .btn-ghost { background: transparent; color: var(--text-3); border: 1px solid var(--border); }
.ipad-modal-actions .btn-danger { background: rgba(255,59,48,0.08); color: #f56565; border: 1px solid rgba(255,59,48,0.3); flex: 0; padding: 10px 14px; }

.ipad-store-item {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.ipad-store-item .mini-icon {
  width: 50px; height: 50px; border-radius: 12px;
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
}
.ipad-store-item .info { flex: 1; min-width: 0; }
.ipad-store-item .info .name { font-size: 14px; font-weight: 600; color: var(--text); }
.ipad-store-item .info .sub { font-size: 11px; color: var(--text-3); margin-top: 1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ipad-store-item .add-btn {
  flex-shrink: 0;
  background: rgba(255,255,255,0.08); border: 1px solid var(--border);
  border-radius: 20px; padding: 5px 14px;
  color: var(--text-2); font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.ipad-store-item .add-btn.added { background: rgba(77,184,154,0.1); border-color: rgba(77,184,154,0.3); color: var(--teal); cursor: pointer; }
.ipad-store-item .add-btn.added:hover { background: rgba(245,101,101,0.12); border-color: rgba(245,101,101,0.3); color: #f56565; }
.ipad-store-item .add-btn.added:hover::after { content: ''; }

.agent-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}
.agent-hero-icon {
  width: 72px; height: 72px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px;
  border: 1.5px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  flex-shrink: 0;
}
.agent-hero-info { flex: 1; min-width: 0; }

.sidebar-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 12px 14px;
}

/* ─── Historique des exécutions d'une étape ─── */
.stage-history { margin-top: 30px; }
.stage-history-title {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  margin-bottom: 10px;
}
.stage-history-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.stage-history-table th,
.stage-history-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.stage-history-table th {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  font-weight: 500;
  background: rgba(255,255,255,0.02);
}
.stage-history-table tr:last-child td { border-bottom: none; }
.stage-history-table tr:hover td { background: rgba(255,255,255,0.03); }

/* ─── Fiche info d'étape (Plan de test / Tests / Robustesse / Audit) ─── */
.stage-info-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 6px;
}
.stage-info-card h3 {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--teal);
  margin: 14px 0 6px;
}
.stage-info-card h3:first-child { margin-top: 0; }
.stage-info-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0 0 4px;
}
.stage-info-card ul {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 2px 0 6px 18px;
  padding: 0;
}
.stage-info-card ul li { margin-bottom: 3px; }
.stage-info-meta {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
}
.stage-info-meta .meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  padding: 3px 0;
  gap: 10px;
}
.stage-info-meta .meta-label { color: var(--text-3); }
.stage-info-meta .meta-value { color: var(--text-2); font-family: 'SF Mono', Menlo, monospace; font-size: 11.5px; text-align: right; }

/* ─── Barre de progression générique (étapes pipeline) ─── */
.stage-progress {
  max-width: 520px;
  margin: 48px auto;
  text-align: center;
  padding: 22px 28px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.stage-progress-label {
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: 14px;
  line-height: 1.5;
}
.stage-progress-bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.stage-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--purple));
  border-radius: 3px;
  transition: width 0.4s ease;
  box-shadow: 0 0 12px rgba(77,184,154,0.4);
}
.stage-progress-pct {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  color: var(--text-3);
}

/* ─── Arbre de fichiers (sidebar Studio) ─── */
.tree-header {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  margin-bottom: 14px;
}
.tree-count { opacity: 0.6; font-weight: 400; }
.tree-stage { margin-bottom: 18px; }
.tree-stage-title {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--teal);
  margin-bottom: 6px;
  padding-left: 4px;
}
.tree-root { font-family: 'Inter', sans-serif; font-size: 12.5px; }
.tree-folder,
.tree-file {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 0;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-2);
  transition: background 0.12s, color 0.12s;
  line-height: 1.4;
  user-select: none;
}
.tree-folder:hover,
.tree-file:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text);
}
.tree-caret {
  display: inline-flex;
  width: 14px;
  font-size: 10px;
  color: var(--text-3);
  flex-shrink: 0;
}
.tree-icon {
  flex-shrink: 0;
  font-size: 13px;
  opacity: 0.85;
}
.tree-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tree-meta {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 10px;
  color: var(--text-3);
  flex-shrink: 0;
}

.studio-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.studio-action-btn:hover {
  background: linear-gradient(180deg, var(--teal-light), rgba(255,255,255,0.04));
  border-color: var(--teal-mid);
  color: var(--teal);
  transform: translateY(-1px);
}
.studio-action-btn svg { display: block; }
.studio-action-btn span { line-height: 1.2; text-align: center; }

.design-action-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 20px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  text-align: center;
}
.design-action-card:hover {
  background: var(--teal-light);
  border-color: var(--teal-mid);
  transform: translateY(-2px);
}
.design-action-icon { font-size: 32px; margin-bottom: 10px; }
.design-action-title {
  font-family: 'Avenir Next','Inter',sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.design-action-sub {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.45;
}
.sidebar-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--teal);
  margin-bottom: 2px;
}
.info-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-family: 'Fraunces', serif;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  line-height: 14px;
  font-style: italic;
}
.info-dot:hover { background: var(--teal-light); color: var(--teal); border-color: var(--teal-mid); }

.legal-content h3 {
  font-family: 'Avenir Next', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 18px 0 6px;
}
.legal-content code {
  background: rgba(255,255,255,0.08);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 12px;
}
.legal-content ol { margin: 6px 0 12px 22px; }
.legal-content ol li { margin-bottom: 4px; }

.profile-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.profile-tab {
  flex: 1;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text-3);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.profile-tab:hover { color: var(--text-2); }
.profile-tab.active {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.ipad-badge {
  display: inline-block; padding: 2px 8px; border-radius: 20px;
  font-size: 10px; font-weight: 700; margin-top: 4px;
}
.ipad-badge.gold   { background: rgba(240,171,71,0.15);  border: 1px solid rgba(240,171,71,0.4);  color: #f0ab47; }
.ipad-badge.silver { background: rgba(180,190,210,0.15); border: 1px solid rgba(180,190,210,0.3); color: #c4cddb; }
.ipad-badge.bronze { background: rgba(205,127,50,0.15);  border: 1px solid rgba(205,127,50,0.3);  color: #cd7f32; }

/* ─── Wallpaper picker ─── */
.wp-grid { margin-top: 4px; }
.mood-bubble {
  width: 72px; height: 72px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  box-shadow: 0 5px 16px rgba(0,0,0,0.35);
  cursor: pointer;
  transition: transform .15s;
}
.mood-bubble:active { transform: scale(0.94); }

@media (max-width: 767px) {
  .ipad-dock-item.dock-studio { display: none; }

  /* Landing mobile */
  .landing-hero { padding: 40px 18px 28px; }
  .landing-hero h1 { font-size: 38px; }
  .landing-hero .tagline { font-size: 16px; line-height: 1.45; margin-bottom: 24px; }
  .landing-hero .tagline br { display: none; }
  .landing-hero .cta-row { flex-direction: column; gap: 10px; margin-bottom: 32px; }
  .landing-hero .cta-row button { width: 100%; }
  .landing-values { grid-template-columns: 1fr; gap: 14px; padding: 0 18px; margin-bottom: 32px; }
  .value-card { padding: 22px 20px; }

  /* Auth mobile */
  .auth-page { padding: 24px 16px; }
  .auth-card { padding: 28px 22px; }
  .auth-card h1 { font-size: 22px; }

  /* Header mobile */
  .app-header { padding: 0 14px; }
  .header-nav { margin-left: 8px; }
  .header-logo span { font-size: 13px; }
}

@keyframes ipadWiggle { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
@keyframes ipadFade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes ipadSlideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.ipad-slide { animation: ipadSlideUp 0.3s cubic-bezier(0.34,1.56,0.64,1); }

/* ─── LANDING ─── */
/* Legacy landing-hero (fallback) */
.landing-hero { text-align: center; padding: 60px 24px 40px; max-width: 680px; margin: 0 auto; }
.landing-hero h1 { font-family: 'Fraunces', serif; font-size: 56px; font-weight: 600; margin-bottom: 12px; line-height: 1.1; }
.landing-hero .tagline { font-size: 22px; color: var(--text-2); font-weight: 300; margin-bottom: 32px; line-height: 1.5; }
.landing-hero .cta-row { display: flex; gap: 12px; justify-content: center; margin-bottom: 48px; }

/* V2 Landing */
.landing-wrap {
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  gap: 24px;
  background: #efe6d4;
  position: relative;
}
body.is-landing { background: #F5F1EB; }
body.is-landing .app-main { overflow: hidden; }
.landing-wrap::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.13 0 0 0 0 0.10 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.45;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.landing-hero-v2 {
  text-align: center;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: landingAppear 0.7s ease;
}
.landing-mark {
  margin-bottom: 4px;
  animation: markFloat 5s ease-in-out infinite, eggWobble 8s ease-in-out infinite;
  transform-origin: center bottom;
  cursor: pointer;
}
.landing-mark-img {
  display: block;
  height: auto;
  filter: drop-shadow(0 12px 30px rgba(42,32,26,0.15));
}

/* ── Egg constellation (triangle 5-4-3-2-1) ── */
.egg-constellation {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}
.egg-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  margin-bottom: -70px;
  /* Rows do not catch clicks — only individual eggs do.
     Otherwise upper rows (higher z-index) would block clicks on the visitor egg below. */
  pointer-events: none;
}
.egg-row.r1 { z-index: 5; margin-bottom: 0; }
.egg-row.r2 { z-index: 4; }
.egg-row.r3 { z-index: 3; }
.egg-row.r4 { z-index: 2; }
.egg-row.r5 { z-index: 1; }

.egg-mini {
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 8px rgba(42,32,26,0.12));
  pointer-events: auto;
}
/* Sizes match egg-landing.html exactly */
.egg-row.r1 .egg-mini { width: 84px; height: 112px; }
.egg-row.r2 .egg-mini { width: 78px; height: 104px; }
.egg-row.r3 .egg-mini { width: 72px; height: 96px;  }
.egg-row.r4 .egg-mini { width: 68px; height: 90px;  }
.egg-row.r5 .egg-mini { width: 64px; height: 84px;  }

/* Visitor egg (cracked PNG) inside constellation.
   PNG visible egg = 57.8% wide × 85.2% tall of 600×600 canvas.
   At container 130×130, visible egg = 75×111 (clearly larger than r3 siblings 62×82,
   appropriate for the focal point). margin-bottom: -8px aligns the egg bottom
   with SVG ellipses' bottoms. position+z-index lifts it above r2/r1 rows so the
   entire visible shell catches clicks (the rows above have higher row-z-index). */
/* Visitor egg: cropped PNG (no transparent borders) sized to match
   the visible SVG ellipse exactly (62×82). object-fit: fill stretches
   the cropped PNG (ratio 0.68) to the container ratio (0.756) — slight
   horizontal stretch (~11%) for an exact size match with siblings.
   margin-bottom: 3px aligns the egg bottom with SVG ellipses (whose bottom
   sits ~3.5px above the container bottom in their 72×96 box).
   --lift-distance is read by eggLift (Phase B levitation). */
.egg-row.r3 .landing-mark {
  width: 62px; height: 82px;
  margin-bottom: 3px;
  position: relative;
  z-index: 10;
  pointer-events: auto;
  transform-origin: center bottom;
  --lift-distance: -130px;
  animation: eggIdle 11s ease-in-out infinite;
}
.egg-row.r3 .landing-mark .landing-mark-img {
  width: 100%; height: 100%;
  object-fit: fill;
  filter: drop-shadow(0 4px 8px rgba(42,32,26,0.15));
  pointer-events: none;
}

/* Row-by-row reveal from horizon to foreground */
.egg-row.r5 .egg-mini { animation: eggRowReveal 1.2s 0.1s both; }
.egg-row.r4 .egg-mini { animation: eggRowReveal 1.2s 0.25s both; }
.egg-row.r3 .egg-mini { animation: eggRowReveal 1.2s 0.4s both; }
.egg-row.r3 .landing-mark { animation: eggRowReveal 1.2s 0.4s both, markFloat 7s 1.6s ease-in-out infinite; }
.egg-row.r2 .egg-mini { animation: eggRowReveal 1.2s 0.55s both; }
.egg-row.r1 .egg-mini { animation: eggRowReveal 1.2s 0.7s both; }
@keyframes eggRowReveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* During hatching, fade background eggs */
.landing-wrap.hatching-zoom .egg-mini:not(.landing-mark) {
  opacity: 0 !important;
  transition: opacity 0.5s ease !important;
}
.landing-title {
  font-family: 'Avenir Next', 'Inter', system-ui, sans-serif;
  font-size: 92px;
  font-weight: 600;
  letter-spacing: -3px;
  line-height: 0.95;
  color: #2a201a;
  margin: 0;
}
.landing-claim {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #5a4a3e;
  margin: 0;
  display: flex;
  gap: 18px;
  justify-content: center;
}
.landing-tagline {
  font-size: 18px;
  color: #5a4a3e;
  font-weight: 300;
  line-height: 1.55;
  max-width: 460px;
  margin: 8px 0 8px;
}
.landing-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}
.landing-btn-main {
  font-size: 15px;
  padding: 13px 30px;
  border-radius: 999px;
  font-weight: 600;
  background: #2a201a;
  color: #efe6d4;
  border: none;
  box-shadow: 0 6px 20px rgba(42,32,26,0.25);
}
.landing-btn-main:hover { background: #3d2f25; }
.landing-btn-secondary {
  font-size: 14px;
  padding: 13px 24px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: var(--text-2);
  border-color: var(--border);
}
.landing-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0.85;
  animation: landingAppear 1s ease 0.2s backwards;
}
.landing-pills .value-pill .pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--teal-light);
  color: var(--teal);
  flex-shrink: 0;
}
.landing-pills .value-pill .pill-icon svg { display: block; }

@keyframes landingAppear {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes markFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
@keyframes eggWobble {
  0%, 42%, 58%, 100% { rotate: 0deg; }
  45% { rotate: -1.5deg; }
  48% { rotate: 1.8deg; }
  50% { rotate: -1.2deg; }
  52% { rotate: 1deg; }
  54% { rotate: -0.5deg; }
  56% { rotate: 0deg; }
}

/* ── Visitor egg idle animation : combines float + occasional lateral sway ──
   Cycle 11s : two up-down floats, then a 4-cycle lateral wobble while the egg
   is at the bottom, then one more float. The wobble is timed to coincide with
   the lowest point of the float so it looks like the egg is rocking on the ground.
   Uses standalone `rotate` and `translate` properties so they compose cleanly. */
@keyframes eggIdle {
  0%    { translate: 0 0;    rotate: 0deg; }
  12.5% { translate: 0 -6px; rotate: 0deg; }
  25%   { translate: 0 0;    rotate: 0deg; }
  37.5% { translate: 0 -6px; rotate: 0deg; }
  50%   { translate: 0 0;    rotate: 0deg; }
  /* Lateral wobble at the bottom (50-70%) — 4 oscillations */
  54%   { translate: 0 0;    rotate: -4.5deg; }
  58%   { translate: 0 0;    rotate: 4.5deg; }
  62%   { translate: 0 0;    rotate: -3deg; }
  66%   { translate: 0 0;    rotate: 2deg; }
  70%   { translate: 0 0;    rotate: 0deg; }
  /* Resume float */
  85%   { translate: 0 -6px; rotate: 0deg; }
  100%  { translate: 0 0;    rotate: 0deg; }
}

/* ── Phase A : rapid vibration on click (existing) ── */
.landing-mark.hatching {
  animation: eggVibrate 0.12s ease-in-out infinite !important;
  cursor: default;
  filter: none !important;
}
.landing-mark.hatching-calm {
  animation: eggCalm 0.4s ease-out forwards !important;
}
@keyframes eggVibrate {
  0%, 100% { rotate: 0deg; }
  20% { rotate: -2.5deg; }
  40% { rotate: 3deg; }
  60% { rotate: -2deg; }
  80% { rotate: 2.5deg; }
}
@keyframes eggCalm {
  0% { rotate: 1deg; }
  100% { rotate: 0deg; }
}

/* ── Phase B : levitation upward + continued micro-vibration ──
   Lifts the egg above r5 (the topmost row) over 1.8s with a calm cubic-bezier.
   eggLift uses transform: translateY(...) and reads --lift-distance from the element. */
.landing-mark.lifting {
  animation:
    eggLift 1.8s cubic-bezier(0.4, 0, 0.4, 1) forwards,
    eggMicroVibrate 0.18s ease-in-out infinite !important;
  cursor: default;
}
@keyframes eggLift {
  0%   { transform: translateY(0); }
  100% { transform: translateY(var(--lift-distance, -180px)); }
}
@keyframes eggMicroVibrate {
  0%, 100% { rotate: 0deg; }
  25% { rotate: -1.5deg; }
  75% { rotate: 1.5deg; }
}

/* ── End of Phase B : freeze egg at lifted position before zoom kicks in.
   No animation, transform held at lift-distance so the egg doesn't snap back. */
.landing-mark.lifted {
  transform: translateY(var(--lift-distance, -130px));
  animation: none !important;
  cursor: default;
}

/* ── Phase C : page zoom in centered on the lifted egg ──
   The whole .landing-wrap (including the egg inside it) scales up. With
   transform-origin set to the egg's viewport center via JS, the egg's center
   stays put on screen while everything (egg + page) grows around the user —
   the "shot into the egg" effect. */
.landing-wrap.hatching-zoom {
  animation:
    pageZoomIn 1.8s cubic-bezier(0.55, 0, 0.45, 1) forwards,
    pageZoomFade 1.8s ease-in forwards;
  will-change: transform, opacity;
}
@keyframes pageZoomIn {
  0%   { transform: scale(1); }
  100% { transform: scale(15); }
}
@keyframes pageZoomFade {
  0%   { opacity: 1; }
  65%  { opacity: 1; }
  100% { opacity: 0; }
}

@media (max-width: 767px) {
  .landing-title { font-size: 64px; letter-spacing: -2px; }
  .landing-claim { font-size: 10px; letter-spacing: 0.3em; gap: 10px; }
  .landing-tagline { font-size: 15px; }
  .landing-cta { flex-direction: column; width: 100%; max-width: 280px; }
  .landing-cta button { width: 100%; }
  .landing-wrap { padding: 24px 18px; }
  .egg-row { margin-bottom: -58px; gap: 4px; }
  .egg-row.r1 { margin-bottom: 0; }
  .egg-row.r1 .egg-mini { width: 70px; height: 94px; }
  .egg-row.r2 .egg-mini { width: 66px; height: 88px; }
  .egg-row.r3 .egg-mini { width: 60px; height: 80px; }
  .egg-row.r4 .egg-mini { width: 56px; height: 76px; }
  .egg-row.r5 .egg-mini { width: 54px; height: 72px; }
  /* Mobile: matches SVG visible egg size 51×69 (60×80 container × 86%).
     --lift-distance shorter on mobile because the constellation is smaller. */
  .egg-row.r3 .landing-mark { width: 51px; height: 69px; margin-bottom: 3px; --lift-distance: -110px; }
}

.landing-values {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto 14px;
  padding: 0 24px;
}
.value-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(42,32,26,0.06);
  border: 1px solid rgba(42,32,26,0.12);
  border-radius: 999px;
  font-size: 13px;
  color: #5a4a3e;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  text-decoration: none;
}
.value-pill:hover { background: rgba(42,32,26,0.1); border-color: rgba(42,32,26,0.2); transform: translateY(-1px); text-decoration: none; }
.value-pill .pill-icon { font-size: 15px; }
.value-pill .pill-text { font-weight: 500; }
.landing-foot {
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 40px;
}
.legal-modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(5, 8, 18, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: ipadFade 0.2s ease;
}
.legal-modal {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 88vh;
  background: linear-gradient(160deg, rgba(19,25,38,0.92), rgba(14,20,32,0.92));
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.7);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.legal-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  z-index: 2;
  transition: background 0.15s, color 0.15s;
}
.legal-modal-close:hover { background: rgba(255,255,255,0.16); color: var(--text); }
.legal-modal-scroll {
  overflow-y: auto;
  padding: 36px 40px 32px;
}
@media (max-width: 640px) {
  .legal-modal-backdrop { padding: 12px; }
  .legal-modal { border-radius: 14px; max-height: 92vh; }
  .legal-modal-scroll { padding: 28px 22px 24px; }
}

/* ─── MOBILE (iPhone) ─── */
@media (max-width: 480px) {
  /* Dock → tab bar iOS fixe en bas */
  .app-dock {
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
  }
  .app-dock.ipad-dock {
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 -2px 16px rgba(0,0,0,0.4);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 12px));
    gap: 0;
    display: flex;
    justify-content: space-around;
  }
  .app-dock.ipad-dock::before { display: none; }
  .ipad-dock-item { gap: 2px; }
  .ipad-dock-item .icon {
    width: 28px; height: 28px;
    border-radius: 0;
    box-shadow: none;
    border: none;
    background: transparent;
  }
  .ipad-dock-item .icon svg { width: 24px; height: 24px; }
  .ipad-dock-item:hover .icon,
  .app-dock .ipad-dock-item.active .icon {
    transform: none;
    background: transparent;
    box-shadow: none;
    border: none;
  }
  .ipad-dock-item:active .icon { transform: scale(0.9); }
  .ipad-dock-item .label {
    position: static;
    opacity: 1;
    background: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    font-size: 10px;
    color: rgba(255,255,255,0.35);
    transform: none;
    pointer-events: auto;
  }
  .ipad-dock-item .label::after { display: none; }
  .ipad-dock-item:hover .label { transform: none; color: rgba(255,255,255,0.35); }
  .app-dock .ipad-dock-item.active .icon { color: var(--teal); }
  .app-dock .ipad-dock-item.active .label { color: var(--teal); }
  .app-dock .ipad-dock-item.active::after { display: none; }

  /* Grille accueil — icônes plus grosses */
  .ipad-grid-wrap { padding: 16px 12px 4px; }
  .ipad-grid {
    grid-template-columns: repeat(4, 72px);
    grid-auto-rows: 82px;
    gap: 4px 14px;
  }
  .ipad-tile { width: 72px; }
  .ipad-tile .icon {
    width: 58px; height: 58px;
    border-radius: 14px;
    font-size: 26px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  }
  .ipad-tile .label { font-size: 10px; max-width: 70px; }

  /* Folder icons */
  .ipad-folder .icon { padding: 6px; gap: 2px; }
  .ipad-folder .icon > div { font-size: 12px; }

  /* App main — espace suffisant pour la tab bar */
  .app-main { padding-bottom: calc(64px + env(safe-area-inset-bottom, 12px)); }

  /* Toutes les pages scrollables — marge basse pour ne pas passer sous le dock */
  .ipad-scroll { padding: 16px 16px calc(16px + 64px + env(safe-area-inset-bottom, 12px)); }
  .ipad-grid-wrap { padding-bottom: calc(16px + 64px + env(safe-area-inset-bottom, 12px)); }

  /* Greeting */
  .ipad-frame { padding: 0; }

  /* Pages */
  .ipad-page { padding: 0; }
  .ipad-page-title { font-size: 20px; }

  /* Mood widget bubbles */
  .mood-bubble { width: 58px; height: 58px; border-radius: 14px; font-size: 26px; }

  /* Store items */
  .ipad-store-item { padding: 10px 0; }
  .ipad-store-item .mini-icon { width: 46px; height: 46px; border-radius: 12px; font-size: 20px; }

  /* Profile tabs */
  .profile-tabs { gap: 2px; }
  .profile-tab { font-size: 12px; padding: 8px 12px; }
  .profile-section h2 { font-size: 15px; }
}

.legal-highlight {
  animation: legalFlash 2s ease-out;
}
@keyframes legalFlash {
  0%   { background: rgba(77,184,154,0); }
  20%  { background: rgba(77,184,154,0.18); }
  100% { background: rgba(77,184,154,0); }
}

/* ─── AUTH FORMS ─── */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 40px 24px;
}
/* Auth en palette Cocon naturel (v2) — fond beige doux, carte blanche, accents brun profond */
.auth-page.auth-unified {
  min-height: 100vh;
  position: relative;
  background: #F5F1EB;
}
.auth-unified .auth-card {
  background: #FFFFFF;
  border: 1px solid #E6DFD8;
  box-shadow: 0 10px 30px rgba(47, 42, 38, 0.07);
  border-radius: 20px;
  position: relative;
  z-index: 1;
  padding: 36px 36px 30px;
}
.auth-unified .auth-card h1 {
  color: #2F2A26;
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-weight: 600;
}
.auth-unified .auth-card .subtitle { color: #8A817C; font-style: normal; }
.auth-unified .form-field label { color: #5A4A3E; }
.auth-unified .form-field input {
  background: #FAF7F2;
  border: 1px solid #E6DFD8;
  color: #2F2A26;
  box-shadow: none;
}
.auth-unified .form-field input::placeholder { color: #A39C95; }
.auth-unified .form-field input:focus {
  border-color: #5A4A3E;
  outline: none;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(90, 74, 62, 0.10);
}
.auth-unified .oauth-label { color: #8A817C; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
.auth-unified .oauth-btn {
  background: #FFFFFF !important;
  border: 1px solid #E6DFD8 !important;
  color: #2F2A26 !important;
  box-shadow: 0 1px 2px rgba(47, 42, 38, 0.04) !important;
  font-weight: 500 !important;
}
.auth-unified .oauth-btn:hover {
  background: #FAF7F2 !important;
  border-color: #D6CEC7 !important;
}
.auth-unified .oauth-sep { margin: 18px 0 4px; }
.auth-unified .oauth-sep::before { display: none; }
.auth-unified .oauth-sep span { background: transparent; color: #8A817C; font-style: italic; font-size: 13px; }
.auth-unified #authBtn {
  background: #5A4A3E !important;
  border-color: #5A4A3E !important;
  color: #FFFFFF !important;
}
.auth-unified #authBtn:hover { background: #4a3f33 !important; border-color: #4a3f33 !important; }
.auth-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 40px 44px;
  width: 100%;
  max-width: 420px;
}
.auth-card h1 {
  font-family: 'Avenir Next', 'Inter', 'Inter', system-ui, sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--text);
  margin-bottom: 6px;
}
.auth-card .subtitle {
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: 28px;
}
.form-field {
  margin-bottom: 18px;
}
.form-field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
input, textarea, select {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border: 1px solid var(--border);
  font-family: inherit;
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:disabled, textarea:disabled, select:disabled { opacity: 0.5; cursor: not-allowed; }
input[type="color"] { padding: 2px; cursor: pointer; }

.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  padding: 11px 14px;
  border-radius: 8px;
  /* 16px : sous ce seuil, iOS Safari auto-zoome au focus. */
  font-size: 16px;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  border-color: var(--teal);
  background: rgba(255,255,255,0.09);
}
.form-field textarea { resize: vertical; min-height: 80px; }
.form-actions {
  margin-top: 24px;
}
.form-actions .btn-primary { width: 100%; padding: 13px; font-size: 15px; }
.form-footer {
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-3);
}
.oauth-section { margin-bottom: 18px; }
.oauth-label {
  font-size: 13px;
  color: var(--text-2);
  text-align: center;
  margin-bottom: 10px;
  font-style: italic;
}
.oauth-row {
  display: flex;
  gap: 10px;
}
.oauth-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.oauth-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.18); }
.oauth-btn svg { flex-shrink: 0; }
.oauth-sep {
  position: relative;
  text-align: center;
  margin: 14px 0 0;
}
.oauth-sep::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--border);
}
.oauth-sep span {
  position: relative;
  background: var(--card-solid, #0a0e18);
  padding: 0 10px;
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.form-error {
  background: rgba(245,101,101,0.12);
  border: 1px solid rgba(245,101,101,0.3);
  color: #f56565;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}
.form-error.visible { display: block; }

/* ─── HOME ─── */
.home-page {
  padding: 36px 32px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.home-page h1 {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 8px;
}
.home-subtitle {
  font-size: 15px;
  color: var(--text-2);
  margin-bottom: 28px;
}
.agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.agent-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 20px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.agent-card:hover { border-color: var(--teal); box-shadow: 0 4px 16px rgba(15,155,114,0.08); }
.agent-card .card-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 10px;
  width: fit-content;
}
.badge-gold   { background: rgba(240,171,71,0.15);  color: #f0ab47; border: 1px solid rgba(240,171,71,0.4); }
.badge-silver { background: rgba(180,190,210,0.15); color: #c4cddb; border: 1px solid rgba(180,190,210,0.3); }
.badge-bronze { background: rgba(205,127,50,0.15);  color: #cd7f32; border: 1px solid rgba(205,127,50,0.3); }
.agent-card .card-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.agent-card .card-desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  flex: 1;
}
.agent-card .card-meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--text-3);
  font-family: 'SF Mono', Menlo, monospace;
}
.empty-state {
  text-align: center;
  padding: 60px 24px;
  color: var(--text-3);
}
.empty-state .empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}
.empty-state h2 {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--text);
  margin-bottom: 8px;
}
.empty-state p {
  font-size: 14px;
  margin-bottom: 20px;
  line-height: 1.6;
}

/* ─── STORE ─── */
.store-page {
  padding: 36px 32px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.store-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.store-header h1 {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 600;
}
.store-search {
  position: relative;
}
.store-search input {
  width: 280px;
  padding: 10px 14px 10px 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  outline: none;
  background: var(--card);
}
.store-search input:focus { border-color: var(--teal); }
.store-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  stroke: var(--text-3);
}
.store-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.store-tag {
  font-size: 12px;
  padding: 5px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  color: var(--text-2);
  transition: all 0.15s;
}
.store-tag:hover, .store-tag.active { background: var(--teal-light); color: var(--teal); border-color: var(--teal-mid); }

.wallet-notice {
  display: flex;
  gap: 14px;
  background: rgba(240,171,71,0.08);
  border: 1px solid rgba(240,171,71,0.25);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 22px;
  color: var(--text-2);
}
.wallet-notice-icon {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1.2;
}
.wallet-notice strong { color: #f0ab47; display: block; margin-bottom: 4px; font-size: 14px; }
.wallet-notice p { font-size: 13px; line-height: 1.55; margin: 0; }
.wallet-balance.locked { opacity: 0.55; }

/* ─── WALLET ─── */
.wallet-page {
  padding: 36px 32px;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}
.wallet-balance {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
  text-align: center;
  margin-bottom: 28px;
}
.wallet-balance .amount {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 42px;
  font-weight: 500;
  color: var(--teal);
  margin-bottom: 4px;
}
.wallet-balance .label {
  font-size: 14px;
  color: var(--text-3);
}
.wallet-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 32px;
}
.history-list {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.history-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.history-item:last-child { border-bottom: none; }
.history-item .date { color: var(--text-3); font-family: 'SF Mono', Menlo, monospace; font-size: 11px; min-width: 70px; }
.history-item .desc { flex: 1; color: var(--text-2); }
.history-item .tokens { font-family: 'SF Mono', Menlo, monospace; font-weight: 500; }
.history-item .tokens.positive { color: var(--teal); }
.history-item .tokens.negative { color: var(--text-3); }

/* ─── PROFILE ─── */
.profile-page {
  padding: 36px 32px;
  max-width: 700px;
  margin: 0 auto;
  width: 100%;
}
.profile-page h1 {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 24px;
}
.profile-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
  margin-bottom: 20px;
}
.profile-section h2 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text);
}
.eggspert-cta {
  background: var(--teal-light);
  border: 1px solid var(--teal-mid);
  border-radius: 12px;
  padding: 24px 28px;
  margin-bottom: 20px;
}
.eggspert-cta h2 {
  color: var(--teal);
  font-size: 16px;
  margin-bottom: 8px;
}
.eggspert-cta p {
  font-size: 13.5px;
  color: var(--text-2);
  margin-bottom: 16px;
  line-height: 1.6;
}

/* ─── FOOTER ─── */
.app-footer {
  text-align: center;
  padding: 20px;
  font-size: 12px;
  color: var(--text-3);
  border-top: 1px solid var(--border);
  background: rgba(8, 12, 24, 0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.app-footer a { color: var(--text-3); }
.app-footer a:hover { color: var(--teal); text-decoration: none; }
.app-footer .sep { opacity: 0.4; margin: 0 8px; }

/* ─── STUDIO · viewer markdown des fichiers .md ─── */
.studio-md-viewer h1 { font-size: 22px; font-weight: 600; margin: 0 0 14px; color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.studio-md-viewer h2 { font-size: 18px; font-weight: 600; margin: 22px 0 10px; color: var(--text); }
.studio-md-viewer h3 { font-size: 15px; font-weight: 600; margin: 18px 0 8px; color: var(--text); }
.studio-md-viewer h4 { font-size: 14px; font-weight: 600; margin: 14px 0 6px; color: var(--text-2); }
.studio-md-viewer p  { margin: 0 0 12px; color: var(--text-2); }
.studio-md-viewer ul, .studio-md-viewer ol { margin: 0 0 14px; padding-left: 22px; color: var(--text-2); }
.studio-md-viewer li { margin: 3px 0; }
.studio-md-viewer strong { color: var(--text); font-weight: 600; }
.studio-md-viewer em { color: var(--text-2); font-style: italic; }
.studio-md-viewer a { color: var(--teal); }
.studio-md-viewer code { font-family: 'SF Mono', Menlo, monospace; font-size: 12.5px; background: rgba(255,255,255,0.08); padding: 1px 6px; border-radius: 4px; color: var(--text); }
.studio-md-viewer pre { background: rgba(0,0,0,0.35); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; overflow-x: auto; margin: 0 0 14px; }
.studio-md-viewer pre code { background: transparent; padding: 0; font-size: 12px; color: var(--text-2); }
.studio-md-viewer blockquote { border-left: 3px solid var(--teal); padding: 4px 14px; margin: 0 0 14px; background: rgba(77,184,154,0.06); color: var(--text-2); border-radius: 0 6px 6px 0; }
.studio-md-viewer hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.studio-md-viewer table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 13px; }
.studio-md-viewer th, .studio-md-viewer td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.studio-md-viewer th { background: rgba(255,255,255,0.05); color: var(--text); }

/* ─── UTILITIES ─── */
.hidden { display: none !important; }
.loading { text-align: center; padding: 40px; color: var(--text-3); }