/* ===========================================================================
   Socle « Apple » (21/10) — chargé APRÈS style.css, seulement par les pages passées
   sur la nouvelle mise en page (<html class="ui-apple">, barre du haut _appbar.html).
   Principes (github.com/emilkowalski/skills : emil-design-eng + apple-design) :
   - police système (SF Pro sur Mac/iPhone), approche serrée sur les grands titres ;
   - clair et sombre qui suivent le système, ou forcés dans le menu « ⋯ » ;
   - matières translucides pour ce qui flotte (barre, menus, barre d'action), fonds pleins ailleurs ;
   - retour au clic immédiat (scale .97), survols réservés à la souris ;
   - entrées en ease-out fort < 300 ms, sorties plus rapides, menus qui partent de leur bouton ;
   - prefers-reduced-motion / -transparency / -contrast respectés.
   Les jetons reprennent les noms de style.css (--bg, --card, --text…) pour que les règles
   existantes des pages suivent sans réécriture.
   =========================================================================== */

html.ui-apple {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 22px;
  --page-max: 1240px;
  --gutter: 32px;

  /* Clair */
  --bg: #f5f5f7;
  --side: #f5f5f7;
  --card: #ffffff;
  --card-hover: #fbfbfd;
  --sunk: #f2f2f5;
  --wash: rgba(0, 0, 0, .03);
  --wash-strong: rgba(0, 0, 0, .055);
  --border: rgba(0, 0, 0, .08);
  --border-strong: rgba(0, 0, 0, .14);
  --fill: rgba(118, 118, 128, .12);
  --fill-strong: rgba(118, 118, 128, .2);
  --accent: #0071e3;
  --accent-2: #0071e3;
  --accent-grad: #0071e3;
  --accent-hover: #0077ed;
  --accent-ink: #ffffff;
  --text: #1d1d1f;
  --text-dim: #6e6e73;
  --text-faint: #8e8e93;
  --success: #248a3d;
  --warning: #c45f00;
  --danger: #d70015;
  --dot-success: #34c759;
  --dot-warning: #ff9500;
  --dot-danger: #ff3b30;
  --dot-run: #007aff;
  --material: rgba(245, 245, 247, .72);
  --material-thick: rgba(255, 255, 255, .86);
  --menu: #fbfbfd;
  --seg-thumb: #ffffff;
  --bezel: #1d1d1f;
  --scrim: rgba(0, 0, 0, .22);
  --focus: rgba(0, 113, 227, .32);
  --shadow-sm: 0 0 0 .5px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04);
  --shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 10px 30px -8px rgba(0, 0, 0, .18);
  --shadow-lg: 0 0 0 .5px rgba(0, 0, 0, .08), 0 24px 60px -12px rgba(0, 0, 0, .28);
  color-scheme: light;
}

/* Sombre : celui du système, sauf choix « Clair » forcé — ou choix « Sombre » forcé */
@media (prefers-color-scheme: dark) {
  html.ui-apple:not([data-theme="light"]) {
    --bg: #000000;
    --side: #000000;
    --card: #1c1c1e;
    --card-hover: #232325;
    --sunk: #2c2c2e;
    --wash: rgba(255, 255, 255, .04);
    --wash-strong: rgba(255, 255, 255, .07);
    --border: rgba(255, 255, 255, .09);
    --border-strong: rgba(255, 255, 255, .16);
    --fill: rgba(118, 118, 128, .24);
    --fill-strong: rgba(118, 118, 128, .34);
    --accent: #0a84ff;
    --accent-2: #0a84ff;
    --accent-grad: #0a84ff;
    --accent-hover: #409cff;
    --text: #f5f5f7;
    --text-dim: #a1a1a6;
    --text-faint: #6e6e73;
    --success: #30d158;
    --warning: #ff9f0a;
    --danger: #ff453a;
    --dot-success: #30d158;
    --dot-warning: #ff9f0a;
    --dot-danger: #ff453a;
    --dot-run: #0a84ff;
    --material: rgba(22, 22, 24, .72);
    --material-thick: rgba(38, 38, 40, .86);
    --menu: #2c2c2e;
    --seg-thumb: #636366;
    --bezel: #3a3a3c;
    --scrim: rgba(0, 0, 0, .5);
    --focus: rgba(10, 132, 255, .5);
    --shadow-sm: 0 0 0 .5px rgba(255, 255, 255, .07);
    --shadow: 0 0 0 .5px rgba(255, 255, 255, .1), 0 16px 40px -8px rgba(0, 0, 0, .7);
    --shadow-lg: 0 0 0 .5px rgba(255, 255, 255, .12), 0 28px 70px -12px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}
html.ui-apple[data-theme="dark"] {
  --bg: #000000;
  --side: #000000;
  --card: #1c1c1e;
  --card-hover: #232325;
  --sunk: #2c2c2e;
  --wash: rgba(255, 255, 255, .04);
  --wash-strong: rgba(255, 255, 255, .07);
  --border: rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .16);
  --fill: rgba(118, 118, 128, .24);
  --fill-strong: rgba(118, 118, 128, .34);
  --accent: #0a84ff;
  --accent-2: #0a84ff;
  --accent-grad: #0a84ff;
  --accent-hover: #409cff;
  --text: #f5f5f7;
  --text-dim: #a1a1a6;
  --text-faint: #6e6e73;
  --success: #30d158;
  --warning: #ff9f0a;
  --danger: #ff453a;
  --dot-success: #30d158;
  --dot-warning: #ff9f0a;
  --dot-danger: #ff453a;
  --dot-run: #0a84ff;
  --material: rgba(22, 22, 24, .72);
  --material-thick: rgba(38, 38, 40, .86);
  --menu: #2c2c2e;
  --seg-thumb: #636366;
  --bezel: #3a3a3c;
  --scrim: rgba(0, 0, 0, .5);
  --focus: rgba(10, 132, 255, .5);
  --shadow-sm: 0 0 0 .5px rgba(255, 255, 255, .07);
  --shadow: 0 0 0 .5px rgba(255, 255, 255, .1), 0 16px 40px -8px rgba(0, 0, 0, .7);
  --shadow-lg: 0 0 0 .5px rgba(255, 255, 255, .12), 0 28px 70px -12px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

/* ---------- Base ---------- */
html.ui-apple, html.ui-apple body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.47;
  letter-spacing: -.008em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.ui-apple body { min-height: 100vh; -webkit-tap-highlight-color: transparent; }
.ui-apple ::selection { background: var(--focus); color: inherit; }
.ui-apple :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.ui-apple ::-webkit-scrollbar-thumb { background: var(--fill-strong); background-clip: padding-box; border: 3px solid transparent; }
.ui-apple ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: padding-box; }
.ui-apple code, .ui-apple pre, .ui-apple kbd { font-family: var(--mono); }
.ui-apple code { font-size: .92em; padding: 1px 5px; border-radius: 5px; background: var(--fill); }

/* ---------- Barre du haut : matière translucide, filet seulement quand le contenu passe dessous ---------- */
.ap-bar {
  position: sticky; top: 0; z-index: 100;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--material);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.ap-bar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--border); opacity: 0; transition: opacity 200ms ease;
}
.ap-bar[data-scrolled]::after { opacity: 1; }
.ap-row, .ap-tabs-wrap {
  max-width: var(--page-max); margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.ap-row { height: 52px; display: flex; align-items: center; gap: 6px; }
.ap-brand { display: flex; align-items: center; gap: 9px; margin-right: 10px; font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -.02em; color: var(--text); white-space: nowrap; }
/* même icône que l'écran de connexion, en petit : monogramme vectoriel (img/logo-hm.svg) */
.ap-logo {
  position: relative; display: grid; place-items: center; flex: none;
  width: 24px; height: 24px; border-radius: 6.5px;
  background: linear-gradient(180deg, #3a3a3c, #0a0a0b);
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .16), 0 0 0 .5px var(--border-strong), 0 1px 2px rgba(0, 0, 0, .15);
}
.ap-logo::after {
  content: ""; width: 62%; height: 62%; background: #fff;
  -webkit-mask: url("/static/img/logo-hm.svg") center / contain no-repeat;
  mask: url("/static/img/logo-hm.svg") center / contain no-repeat;
}
.ap-spacer { flex: 1; }
.ap-menu { position: relative; }
.ap-pill, .ap-round, .ap-tools a {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-dim);
  font: 500 13px/1 var(--font); letter-spacing: -.005em; white-space: nowrap; cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, transform 160ms var(--ease-out);
}
.ap-pill { background: var(--fill); color: var(--text); }
.ap-pill svg, .ap-round svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ap-round svg circle { fill: currentColor; stroke: none; }
.ap-round { width: 30px; padding: 0; }
.ap-pill:active, .ap-round:active, .ap-tools a:active { transform: scale(.96); }
.ap-tools { display: flex; gap: 2px; margin-left: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ap-tools::-webkit-scrollbar { display: none; }
.ap-tools a.on { color: var(--text); background: var(--fill); }
.ap-claude { background: transparent; color: var(--text-dim); }
.ap-claude .gr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); }
#claudeRcBtn.ap-claude.on .gr-dot { background: var(--dot-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot-success) 22%, transparent); }
.ap-pill[aria-expanded="true"], .ap-round[aria-expanded="true"] { background: var(--fill-strong); color: var(--text); }
@media (hover: hover) and (pointer: fine) {
  .ap-tools a:hover, .ap-round:hover, .ap-claude:hover { background: var(--fill); color: var(--text); }
  .ap-pill:hover { background: var(--fill-strong); }
}

/* Onglets de l'outil : soulignement sous l'onglet courant ; réglage propre à l'outil à droite (persona du Studio) */
.ap-tabs-wrap { display: flex; align-items: center; gap: 16px; }
.ap-tabs { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ap-extra { flex: none; display: flex; align-items: center; gap: 8px; min-width: 0; }
.ap-extra-label { margin: 0; font-size: 12.5px; color: var(--text-faint); font-weight: 500; }
.ui-apple .ap-extra select { width: auto; max-width: 200px; padding: 4px 28px 4px 10px; font-size: 13px; border-radius: 999px; background-position: right 8px center; background-size: 12px; }
.ap-extra-tag { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text-faint); }
.ap-extra-tag:empty { display: none; }
.ap-tabs::-webkit-scrollbar { display: none; }
.ap-tabs-in { display: flex; gap: 4px; height: 40px; }
.ap-tabs { margin-left: -10px; }
.ap-tabs a {
  position: relative; display: flex; align-items: center; padding: 0 10px;
  color: var(--text-dim); font-size: 13.5px; font-weight: 500; white-space: nowrap;
  transition: color 150ms ease;
}
.ap-tabs a.on { color: var(--text); }
.ap-tabs a.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px; background: var(--text); }
@media (hover: hover) and (pointer: fine) { .ap-tabs a:hover { color: var(--text); } }

/* Menus déroulants : matière épaisse, partent de leur bouton, sortie plus rapide que l'entrée */
.ap-pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 120;
  min-width: 230px; max-height: calc(100vh - 90px); overflow-y: auto;
  padding: 6px; border-radius: 14px;
  /* quasi opaque : dans la barre (déjà floutée), un second flou ne voit pas la page dessous */
  background: var(--menu);
  box-shadow: var(--shadow-lg);
  transform-origin: top left;
  opacity: 0; transform: scale(.96);
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.ap-pop-end { left: auto; right: 0; transform-origin: top right; }
.ap-pop[data-open] { opacity: 1; transform: none; }
.ap-pop[data-closing] { transition-duration: 110ms; }
.ap-pop a, .ap-pop button[role="menuitem"] {
  display: flex; align-items: center; width: 100%; height: 30px; padding: 0 10px;
  border: 0; border-radius: 7px; background: none; color: var(--text);
  font: 400 13.5px/1 var(--font); letter-spacing: -.01em; text-align: left; cursor: pointer;
}
.ap-pop a.on::after { content: ""; margin-left: auto; width: 10px; height: 6px; border: solid currentColor; border-width: 0 0 2px 2px; transform: translateY(-2px) rotate(-45deg); }
.ap-pop a:focus-visible, .ap-pop button:focus-visible { outline: none; background: var(--accent); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .ap-pop a:hover, .ap-pop button[role="menuitem"]:hover { background: var(--accent); color: #fff; }
}
.ap-pop button[role="menuitem"]:disabled { color: var(--text-faint); background: none; cursor: default; }
.ap-pop-label { padding: 9px 10px 3px; font-size: 11.5px; font-weight: 600; color: var(--text-faint); letter-spacing: 0; }
.ap-pop-sep { height: 1px; margin: 5px 10px; background: var(--border); }
.ap-pop form { margin: 0; }
.ap-theme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 4px 6px 6px; padding: 2px; border-radius: 9px; background: var(--fill); }
.ap-theme button { height: 26px; border: 0; border-radius: 7px; background: none; color: var(--text); font: 500 12.5px/1 var(--font); cursor: pointer; }
.ap-theme button[aria-pressed="true"] { background: var(--seg-thumb); box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04); }

/* ---------- Page ---------- */
.ap-main {
  max-width: var(--page-max); margin: 0 auto;
  padding-top: 34px; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.ui-apple .page-header { align-items: flex-end; margin-bottom: 28px; gap: 16px; }
.ui-apple .page-header h1 {
  font-family: var(--font-display); font-size: 34px; line-height: 1.12; font-weight: 700;
  letter-spacing: -.022em; text-wrap: balance;
}
.ui-apple .page-header p { margin-top: 6px; max-width: 72ch; font-size: 15px; line-height: 1.45; color: var(--text-dim); letter-spacing: -.012em; text-wrap: pretty; }
.ui-apple .section-title { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -.02em; margin: 34px 0 14px; }
.ui-apple .section-title:first-child { margin-top: 0; }
.ui-apple .meta { color: var(--text-dim); font-size: 12.5px; }
.ui-apple .hint { color: var(--text-faint); }
.ui-apple .card { background: var(--card); border: 0; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 22px; }
.ui-apple .empty-state { color: var(--text-faint); }
.ui-apple .empty-state .es-title { font-size: 15px; color: var(--text); letter-spacing: -.012em; }

/* ---------- Boutons : pilules, enfoncement au clic ---------- */
.ui-apple .btn {
  gap: 6px; padding: 8px 16px; border: 0; border-radius: 980px;
  background: var(--fill); color: var(--text);
  font: 500 13.5px/1.2 var(--font); letter-spacing: -.01em; white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease, opacity 150ms ease;
}
.ui-apple .btn:active:not(:disabled) { transform: scale(.97); transition-duration: 100ms; }
.ui-apple .btn:disabled { opacity: .4; }
.ui-apple .btn-sm { padding: 6px 12px; font-size: 12.5px; }
.ui-apple .btn-lg { padding: 12px 22px; font-size: 15px; border-radius: 980px; }
.ui-apple .btn-primary { background: var(--accent); color: var(--accent-ink); }
.ui-apple .btn-ghost { background: transparent; color: var(--text-dim); }
.ui-apple .btn-success { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.ui-apple .btn-danger { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.ui-apple .btn-warning { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); }
@media (hover: hover) and (pointer: fine) {
  .ui-apple .btn:hover:not(:disabled) { background: var(--fill-strong); border-color: transparent; }
  .ui-apple .btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
  .ui-apple .btn-ghost:hover:not(:disabled) { background: var(--fill); color: var(--text); }
  .ui-apple .btn-success:hover:not(:disabled) { background: color-mix(in srgb, var(--success) 22%, transparent); }
  .ui-apple .btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 20%, transparent); }
  .ui-apple .btn-warning:hover:not(:disabled) { background: color-mix(in srgb, var(--warning) 22%, transparent); }
}
/* le survol de style.css (fond clair) ne doit pas s'appliquer au doigt */
@media not ((hover: hover) and (pointer: fine)) {
  .ui-apple .btn:hover { background: var(--fill); }
  .ui-apple .btn-primary:hover { background: var(--accent); }
  .ui-apple .btn-ghost:hover { background: transparent; }
}
.ui-apple .icon-btn { border: 0; background: var(--fill); color: var(--text); border-radius: 999px; transition: transform 160ms var(--ease-out), background-color 150ms ease; }
.ui-apple .icon-btn:hover { transform: none; background: var(--fill-strong); color: var(--text); }
.ui-apple .icon-btn:active { transform: scale(.94); }

/* ---------- Champs : remplis, sans bordure, anneau bleu au focus ---------- */
.ui-apple select,
.ui-apple input[type=text], .ui-apple input[type=password], .ui-apple input[type=number], .ui-apple input[type=search],
.ui-apple input[type=email], .ui-apple input[type=url], .ui-apple input[type=date], .ui-apple input[type=time],
.ui-apple input[type=month], .ui-apple input[type=datetime-local], .ui-apple textarea {
  background-color: var(--fill); border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--text); font: 400 14px/1.35 var(--font); letter-spacing: -.01em;
  padding: 8px 12px; color-scheme: inherit;
  transition: box-shadow 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.ui-apple input::placeholder, .ui-apple textarea::placeholder { color: var(--text-faint); }
.ui-apple select:hover, .ui-apple input:hover, .ui-apple textarea:hover { border-color: transparent; }
.ui-apple select:focus, .ui-apple input:focus, .ui-apple textarea:focus {
  outline: none; background-color: var(--card); border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus);
}
.ui-apple select {
  -webkit-appearance: none; appearance: none; padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 10 4-4 4 4M8 14l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 14px;
}
.ui-apple input[type=checkbox], .ui-apple input[type=radio], .ui-apple input[type=range] { accent-color: var(--accent); }
.ui-apple label { color: var(--text-dim); font-size: 12.5px; font-weight: 500; letter-spacing: -.005em; }
.ui-apple .filters select, .ui-apple .filters input { min-width: 150px; }

/* ---------- Tableaux : filets fins, en-têtes en casse normale ---------- */
.ui-apple th, .ui-apple td { border-bottom: 1px solid var(--border); font-size: 13.5px; }
.ui-apple th { text-transform: none; letter-spacing: -.005em; font-size: 12px; font-weight: 500; color: var(--text-faint); }
.ui-apple tbody tr { transition: background-color 120ms ease; }
.ui-apple tbody tr:hover { background: transparent; }
@media (hover: hover) and (pointer: fine) { .ui-apple tbody tr:hover { background: var(--wash); } }

/* ---------- Pastilles d'état ---------- */
.ui-apple .badge { padding: 3px 9px 3px 8px; font-size: 11.5px; font-weight: 500; letter-spacing: -.005em; }
.ui-apple .badge-success { background: color-mix(in srgb, var(--dot-success) 16%, transparent); color: var(--success); }
.ui-apple .badge-warning { background: color-mix(in srgb, var(--dot-warning) 16%, transparent); color: var(--warning); }
.ui-apple .badge-danger { background: color-mix(in srgb, var(--dot-danger) 14%, transparent); color: var(--danger); }
.ui-apple .badge-accent { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.ui-apple .badge-muted, .ui-apple .badge:not([class*="badge-"]) { background: var(--fill); color: var(--text-dim); }

/* ---------- Contrôle segmenté (iOS) ---------- */
.ui-apple .segmented { background: var(--fill); border: 0; border-radius: 9px; padding: 2px; gap: 0; }
.ui-apple .segmented .segmented-thumb {
  top: 2px; left: 2px; bottom: 2px; width: calc(50% - 2px); border-radius: 7px;
  background: var(--seg-thumb); box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04);
  transition: transform 250ms var(--ease-out);
}
.ui-apple .segmented button { padding: 6px 16px; border-radius: 7px; color: var(--text); font-weight: 500; font-size: 13px; }

/* ---------- Interrupteur (iOS) ---------- */
.ui-apple .switch { width: 44px; height: 26px; }
.ui-apple .switch .slider { background: var(--fill-strong); transition: background-color 200ms ease; }
.ui-apple .switch .slider::before {
  width: 22px; height: 22px; left: 2px; top: 2px; background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 3px 1px rgba(0, 0, 0, .06);
  transition: transform 220ms var(--ease-out);
}
.ui-apple .switch input:checked + .slider { background: var(--dot-success); }

/* ---------- Divers composants partagés (fonds blancs codés en dur dans style.css) ---------- */
.ui-apple .tag { background: var(--fill); border-color: transparent; }
.ui-apple .comment-text { background: var(--wash); border-color: var(--border); }
.ui-apple .row-menu-list { background: var(--material-thick); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); border: 0; border-radius: 12px; box-shadow: var(--shadow-lg); }
.ui-apple .row-menu-list button:hover { background: var(--accent); color: #fff; }
.ui-apple .log-viewer { background: var(--card); border: 0; box-shadow: var(--shadow-sm); border-radius: 14px; font-family: var(--mono); font-size: 12px; }
.ui-apple .settings-tabs { border-bottom-color: var(--border); }
.ui-apple .settings-tabs button.active { border-bottom-color: var(--text); }

/* ---------- Fenêtres (confirmDialog, promptDialog et fenêtres des pages) ---------- */
.ui-apple .dlg-overlay {
  background: var(--scrim); -webkit-backdrop-filter: none; backdrop-filter: none;
  animation: none; opacity: 1; transition: opacity 200ms ease;
}
.ui-apple .dlg-card {
  border: 0; border-radius: 16px; padding: 22px;
  background: var(--menu);
  box-shadow: var(--shadow-lg);
  animation: none; transform: none; opacity: 1;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
@starting-style {
  .ui-apple .dlg-overlay { opacity: 0; }
  .ui-apple .dlg-card { opacity: 0; transform: scale(.96); }
}
.ui-apple .dlg-overlay[data-closing] { opacity: 0; transition-duration: 150ms; pointer-events: none; }
.ui-apple .dlg-overlay[data-closing] .dlg-card { opacity: 0; transform: scale(.98); transition-duration: 150ms; }
.ui-apple .dlg-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.ui-apple .dlg-message { color: var(--text-dim); font-size: 14px; }
.ui-apple .dlg-input { background: var(--fill); border: 1px solid transparent; border-radius: var(--radius-sm); }
.ui-apple .dlg-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); background: var(--card); }
.ui-apple .dlg-actions { gap: 8px; }

/* ---------- Toasts : pile en bas à droite, transitions interruptibles ---------- */
.ap-toaster {
  position: fixed; z-index: 400;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: min(380px, calc(100vw - 32px));
  display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none;
}
.ap-toaster .toast {
  position: static; pointer-events: auto; animation: none;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border: 0; border-radius: 14px;
  background: var(--material-thick);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
  box-shadow: var(--shadow-lg);
  color: var(--text); font-size: 13.5px; font-weight: 500; line-height: 1.4; letter-spacing: -.01em;
  opacity: 1; transform: none;
  transition: opacity 260ms ease, transform 260ms var(--ease-out);
}
@starting-style { .ap-toaster .toast { opacity: 0; transform: translateY(100%); } }
.ap-toaster .toast[data-leaving] { opacity: 0; transform: translateY(6px) scale(.98); transition-duration: 150ms; }
.ap-toaster .toast::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--dot-success); }
.ap-toaster .toast.error::before { background: var(--dot-danger); }
.ap-toaster .toast.info::before, .ap-toaster .toast.warning::before { background: var(--dot-warning); }
.ap-toaster .toast.success, .ap-toaster .toast.error { color: var(--text); border-color: transparent; }
@media (max-width: 640px) { .ap-toaster { left: 16px; right: 16px; width: auto; } }

/* ===========================================================================
   GeeLark
   =========================================================================== */
/* Parc : un téléphone = une carte, cadre sombre façon iPhone dans les deux thèmes */
.ui-apple .gl-phone-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.ui-apple .gl-phone { border: 0; border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-sm); padding: 12px 12px 14px; gap: 12px; }
.ui-apple .gl-phone-busy { box-shadow: 0 0 0 2px color-mix(in srgb, var(--dot-run) 70%, transparent), var(--shadow-sm); }
.ui-apple .gl-phone-frame { background: var(--bezel); border: 0; border-radius: 26px; padding: 7px 7px 9px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.ui-apple .gl-phone-notch { width: 38px; height: 10px; border-radius: 999px; background: #000; margin: 3px auto 7px; }
.ui-apple .gl-phone-status { margin: 0 6px 7px; color: rgba(255, 255, 255, .72); font-size: 11px; font-weight: 600; letter-spacing: 0; }
.ui-apple .gl-phone-dot { background: rgba(255, 255, 255, .35); }
.ui-apple .gl-phone-on .gl-phone-dot { background: var(--dot-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot-success) 25%, transparent); }
.ui-apple .gl-phone-starting .gl-phone-dot { background: var(--dot-warning); }
.ui-apple .gl-phone-run { color: #64b5ff; }
.ui-apple .gl-phone-screen { border: 0; border-radius: 19px; background: #0d0d0f; }
.ui-apple a.gl-phone-screen { transition: opacity 150ms ease; }
.ui-apple a.gl-phone-screen:active { opacity: .85; }
.ui-apple .gl-phone-blank { color: rgba(255, 255, 255, .42); }
.ui-apple .gl-phone-info { padding: 0 4px; gap: 4px; }
.ui-apple .gl-phone-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.ui-apple .gl-phone-account { font-size: 13.5px; }
.ui-apple .gl-phone-account a { color: var(--accent); border-bottom: 0; }
@media (hover: hover) and (pointer: fine) { .ui-apple .gl-phone-account a:hover { text-decoration: underline; text-underline-offset: 2px; } }
.ui-apple .gl-phone-proxy select { padding: 4px 26px 4px 8px; font-size: 12px; background-position: right 6px center; background-size: 12px; }
.ui-apple .gl-phone-actions { gap: 4px; padding: 0 0 0 2px; }
.ui-apple .gl-pick input { width: 18px; height: 18px; }

/* Barre « N téléphones cochés » : flotte en matière translucide, entre par le bas */
.ui-apple .gl-launchbar {
  border: 0; border-radius: 18px; padding: 10px 12px 10px 18px;
  background: var(--material-thick);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
  box-shadow: var(--shadow-lg);
  transition: opacity 240ms ease, transform 240ms var(--ease-out);
}
@starting-style { .ui-apple .gl-launchbar { opacity: 0; transform: translateY(16px); } }

/* File d'attente, Planning, Réserves, éditeur de parcours */
.ui-apple .q-stat { border: 0; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-sm); }
.ui-apple .q-stat-v { font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -.025em; }
.ui-apple .q-gap { border-bottom-color: var(--border); }
.ui-apple .pl-chip { background: var(--fill); border-color: transparent; border-radius: 8px; transition: background-color 150ms ease, transform 160ms var(--ease-out); }
.ui-apple .pl-chip:hover { border-color: transparent; }
@media (hover: hover) and (pointer: fine) { .ui-apple .pl-chip:hover { background: var(--fill-strong); } }
.ui-apple .pl-chip:active { transform: scale(.98); }
.ui-apple .pl-dot { background: var(--text-faint); }
.ui-apple .pl-queued .pl-dot, .ui-apple .pl-running .pl-dot { background: var(--dot-warning); }
.ui-apple .pl-done .pl-dot { background: var(--dot-success); }
.ui-apple .pl-failed .pl-dot { background: var(--dot-danger); }
.ui-apple .pl-pick { background: var(--fill); border-width: 3px; }
.ui-apple .gl-content-body .gl-reserve { background: var(--sunk); box-shadow: none; }
.ui-apple .gl-content-tile { background: var(--card); border: 0; box-shadow: var(--shadow-sm); border-radius: 14px; }
.ui-apple .gl-pal-block { background: var(--card); border: 0; border-left: 4px solid var(--accent); border-radius: 12px; box-shadow: var(--shadow-sm); transition: transform 160ms var(--ease-out), box-shadow 150ms ease; }
.ui-apple .gl-pal-block.gl-wait { border-left-color: var(--dot-warning); }
.ui-apple .gl-pal-block.gl-manual { border-left-color: var(--warning); }
.ui-apple .gl-pal-block:hover { transform: none; border-color: inherit; }
@media (hover: hover) and (pointer: fine) { .ui-apple .gl-pal-block:hover { box-shadow: var(--shadow); } }
.ui-apple .gl-pal-block:active { transform: scale(.98); }
.ui-apple .gl-block { background: var(--card); border: 0; border-left: 4px solid var(--accent); box-shadow: var(--shadow-sm); border-radius: 14px; }
.ui-apple .gl-block.gl-wait { border-left-color: var(--dot-warning); }
.ui-apple .gl-block.gl-manual { border-left-color: var(--warning); }
.ui-apple .gl-block-head .gl-idx { background: var(--fill); }
.ui-apple .gl-block-head .gl-tools button { border: 0; background: var(--fill); color: var(--text-dim); border-radius: 6px; }
.ui-apple .gl-block-head .gl-tools button:hover { color: var(--text); background: var(--fill-strong); }
.ui-apple .gl-pf-warn { background: color-mix(in srgb, var(--dot-warning) 14%, transparent); }
.ui-apple .gl-pf-block { background: color-mix(in srgb, var(--dot-danger) 12%, transparent); }
.ui-apple .gl-pf::before { background: var(--dot-success); }
.ui-apple .gl-pf-warn::before { background: var(--dot-warning); }
.ui-apple .gl-pf-block::before { background: var(--dot-danger); }
.ui-apple .gl-live-screen iframe { border: 0; border-radius: 14px; }
.ui-apple .gl-live-full { background: var(--bg); border-radius: 18px; box-shadow: 0 0 0 100vmax var(--scrim); padding: 16px; }


/* ===========================================================================
   Pages générales (Comptes, Finance, Médias, Scripts, Réglages, Changelog, Recadrage)
   et espaces Commentaires, Planning, Brander, Studio
   =========================================================================== */
.ap-main .hub-main { max-width: none; margin: 0; padding: 0; }
.ap-main .hub-main h1 { font-size: 34px; font-weight: 700; letter-spacing: -.022em; }
.ui-apple .row-expand-btn:hover { background: var(--fill); }
.ui-apple .profile-detail-row td { background: var(--wash); }
.ui-apple .profile-detail-photo { background: var(--fill); border-radius: 12px; }
.ui-apple .dropzone { background: var(--wash); border-color: var(--border-strong); border-radius: var(--radius); }
.ui-apple .catbar-track { background: var(--fill); }
.ui-apple .agent-card .icon { background: var(--fill); border: 0; }
.ui-apple .markdown-body code { background: var(--fill); border: 0; font-family: var(--mono); }
.ui-apple .markdown-body pre { background: var(--card); border: 0; box-shadow: var(--shadow-sm); border-radius: 12px; }
.ui-apple .markdown-body th { background: var(--wash); }
.ui-apple #accountsList .account-group { background: var(--card); border: 0; box-shadow: var(--shadow-sm); border-radius: var(--radius); }
.ui-apple #accountsList .account-group summary:hover { background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .ui-apple #accountsList .account-group summary:hover { background: var(--wash); }
  .ui-apple #accountsList .account-group .account-item:hover { background: var(--wash); }
}
.ui-apple .account-item, .ui-apple .activity-item, .ui-apple .queue-item { background: var(--card); border: 0; box-shadow: var(--shadow-sm); border-radius: 16px; }
.ui-apple .avatar { background: var(--fill); border: 0; }
.ui-apple .floating-changelog-btn { background: var(--material-thick); border: 0; box-shadow: var(--shadow); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.ui-apple .floating-changelog-btn:hover { transform: none; }
.ui-apple .floating-changelog-btn:active { transform: scale(.97); }
.ui-apple .stat-card .value { font-family: var(--font-display); letter-spacing: -.025em; }
.ui-apple .stat-card .value.success { color: var(--success); }
.ui-apple .stat-card .value.warning { color: var(--warning); }
.ui-apple .media-tile, .ui-apple .collection-card { border: 0; box-shadow: var(--shadow-sm); border-radius: 14px; }
.ui-apple .media-tile.picked { box-shadow: 0 0 0 3px var(--accent); }

.ui-apple .fx-widget { background: var(--card); border: 0; box-shadow: var(--shadow-sm); }
.ui-apple .fx-widget .fx-rate { border-left-color: var(--border); }

/* ===========================================================================
   Accueil : contrôle segmenté des espaces, outils en tuiles d'icônes
   =========================================================================== */
.ui-apple .gr-inner { max-width: none; }
.ap-seg {
  position: relative; display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  padding: 2px; margin: -6px 0 26px; border-radius: 9px; background: var(--fill);
}
.ap-seg::-webkit-scrollbar { display: none; }
.ap-seg-thumb { position: absolute; top: 2px; bottom: 2px; left: 0; border-radius: 7px; background: var(--seg-thumb); box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04); }
.ap-seg[data-ready] .ap-seg-thumb { transition: transform 250ms var(--ease-out), width 250ms var(--ease-out); }
.ap-seg a { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 14px; border-radius: 7px; color: var(--text); font-size: 13px; font-weight: 500; white-space: nowrap; }
.ap-seg a .n { font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.ap-seg a:active { opacity: .7; }
.ui-apple .gr-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ui-apple .gr-card {
  height: 100%; padding: 18px 52px 18px 18px; border: 0; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm);
  transition: transform 160ms var(--ease-out), box-shadow 200ms ease;
}
.ui-apple .gr-card:hover { background: var(--card); }
@media (hover: hover) and (pointer: fine) { .ui-apple .gr-card:hover { box-shadow: var(--shadow); } }
.ui-apple .gr-card:active { transform: scale(.98); }
.ui-apple .gr-card .top { gap: 12px; margin-bottom: 10px; }
.ui-apple .gr-card .name { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.ui-apple .gr-card .desc { color: var(--text-dim); font-size: 13.5px; }
.ui-apple .gr-card .space { color: var(--text-faint); font-size: 12px; }
.ui-apple .gr-tag { border: 0; background: var(--fill); border-radius: 999px; padding: 1px 7px; }
/* icônes façon icônes d'app : tuile en dégradé, glyphe blanc */
.ui-apple .gr-card .ic { width: 40px; height: 40px; border: 0; border-radius: 10px; background: linear-gradient(180deg, var(--ic-a, #8e8e93), var(--ic-b, #636366)); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .08); }
.ui-apple .gr-card .ic svg { width: 21px; height: 21px; color: #fff; stroke-width: 1.8; }
.ui-apple [data-tool="finance"] .ic { --ic-a: #4cd964; --ic-b: #28a745; }
.ui-apple [data-tool="gestion"] .ic { --ic-a: #ff9f0a; --ic-b: #ff6b00; }
.ui-apple [data-tool="geelark"] .ic { --ic-a: #7d7aff; --ic-b: #4b48d6; }
.ui-apple [data-tool="studio"] .ic { --ic-a: #ff6482; --ic-b: #e0244a; }
.ui-apple [data-tool="crop"] .ic { --ic-a: #ffb340; --ic-b: #f08a00; }
.ui-apple [data-tool="accounts"] .ic { --ic-a: #4ba3ff; --ic-b: #0a6fd6; }
.ui-apple [data-tool="comments"] .ic { --ic-a: #5ad1e6; --ic-b: #1e9db8; }
.ui-apple [data-tool="scheduler"] .ic { --ic-a: #ff6a5c; --ic-b: #e5372a; }
.ui-apple [data-tool="brander"] .ic { --ic-a: #d17bff; --ic-b: #9b3fdc; }
.ui-apple [data-tool="scripts"] .ic { --ic-a: #8e8e93; --ic-b: #48484a; }
.ui-apple .gr-star { top: 16px; right: 14px; border-radius: 999px; color: var(--text-faint); transition: transform 160ms var(--ease-out), color 150ms ease, background-color 150ms ease; }
.ui-apple .gr-star:hover { background: transparent; }
@media (hover: hover) and (pointer: fine) { .ui-apple .gr-star:hover { background: var(--fill); color: var(--text); } }
.ui-apple .gr-star:active { transform: scale(.88); }
.ui-apple .gr-star[aria-pressed="true"] { color: var(--dot-warning); }
.ui-apple .gr-empty { border: 0; background: var(--card); box-shadow: var(--shadow-sm); border-radius: var(--radius); }

/* ---------- Téléphone ---------- */
@media (max-width: 760px) {
  html.ui-apple { --gutter: 16px; }
  .ap-brand span, .ap-tools, .ap-extra-tag, .ap-extra-label { display: none; }
  .ap-tabs-wrap { gap: 8px; }
  .ui-apple .ap-extra select { max-width: 130px; }
  .ap-brand { margin-right: 4px; }
  .ap-main { padding-top: 22px; }
  .ui-apple .page-header h1 { font-size: 28px; }
  .ui-apple .page-header p { font-size: 14px; }
  .ui-apple .card { padding: 16px; border-radius: 16px; }
  .ui-apple .segmented { display: grid; width: 100%; }
  .ui-apple .segmented button { white-space: normal; text-align: center; line-height: 1.25; padding: 6px 10px; }
  .ui-apple .fx-widget { max-width: 100%; flex-wrap: wrap; border-radius: 16px; }
  .ui-apple .fx-widget .fx-icon { white-space: nowrap; }
  .ui-apple .fx-widget input { width: 68px; }
  .ui-apple .fx-widget .fx-rate { flex-basis: 100%; margin-left: 0; padding-left: 0; border-left: 0; }
  .ui-apple .gl-phone-grid { grid-template-columns: 1fr; gap: 12px; }
  /* une carte par ligne : le téléphone à gauche, les infos et les actions à droite */
  .ui-apple .gl-phone { display: grid; grid-template-columns: 128px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 10px; align-items: start; }
  .ui-apple .gl-phone-frame { grid-row: 1 / span 2; border-radius: 22px; padding: 5px 5px 7px; }
  .ui-apple .gl-phone-notch { width: 30px; height: 8px; margin: 2px auto 5px; }
  .ui-apple .gl-phone-status { margin: 0 4px 5px; font-size: 10px; flex-wrap: wrap; }
  .ui-apple .gl-phone-screen { border-radius: 16px; }
  .ui-apple .gl-phone-info, .ui-apple .gl-phone-actions { padding: 0; }
  .ui-apple .gl-phone-actions { align-self: end; }
}

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
  .ui-apple .btn, .ui-apple .btn:active, .ap-pill:active, .ap-round:active { transform: none !important; }
  .ap-pop, .ui-apple .dlg-card, .ap-toaster .toast, .ui-apple .gl-launchbar { transform: none !important; }
  .ui-apple .segmented .segmented-thumb, .ui-apple .switch .slider::before { transition-duration: 0ms; }
}
@media (prefers-reduced-transparency: reduce) {
  .ap-bar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ap-pop, .ui-apple .dlg-card, .ap-toaster .toast, .ui-apple .gl-launchbar, .ui-apple .row-menu-list { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  html.ui-apple { --border: rgba(0, 0, 0, .3); --fill: rgba(118, 118, 128, .22); }
  .ui-apple .card, .ui-apple .gl-phone, .ap-pop, .ui-apple .dlg-card { box-shadow: 0 0 0 1px var(--border-strong); }
}