/* ===================================================================
   Ruche — système de design « cockpit »
   Un seul iPhone à l'écran, piloté comme un instrument : l'appareil
   occupe la scène, tout le reste vit dans un pupitre à onglets.
   =================================================================== */

:root {
    /* Charte « OnlyFlow bis » (relevée sur onlyflow.io, 24/09/2026) : noir
       neutre, cartes gris foncé à bordure fine, Montserrat, violet #2f6bff,
       états vert / jaune / rouge sur fonds teintés, presque aucune ombre. */
    color-scheme: dark;
    /* Teinte des voiles et survols : blanc sur le thème sombre, encre sur le clair (rgb(var(--ink) / 6%)). */
    --ink: 255 255 255;
    font-family: Montserrat, "Montserrat Fallback", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
    --bg: #09090b;
    --bg-2: #050506;
    --bg-deep: #050506;
    --panel: #141417;
    --panel-solid: #141417;
    --panel-raised: #232327;
    --panel-elevated: #1c1c20;
    --line: #232327;
    --border: #232327;
    --border-strong: #3a3a3c;
    --text: #f2f2f7;
    --text-2: #c7c7cc;
    --muted: #8e8e93;
    --dim: #636366;
    --accent: #2f6bff;
    --accent-hover: #2459e0;
    --accent-2: #2f6bff;
    --accent-soft: rgb(47 107 255 / 21%);
    --accent-subtle: rgb(115 66 250 / 8%);
    --accent-gradient: linear-gradient(#2f6bff, #2f6bff);
    --success: #3dd68c;
    --success-solid: #30a46c;
    --success-bg: rgb(34 255 153 / 12%);
    --warning: #ffca16;
    --warning-solid: #ffc53d;
    --warning-bg: rgb(250 130 0 / 13%);
    --danger: #ec5d5e;
    --danger-solid: #e5484d;
    --danger-bg: rgb(255 23 63 / 18%);
    --info: #70b8ff;
    --radius: 14px;
    --radius-sm: 11px;
    --radius-xs: 7px;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --spring: cubic-bezier(.2, .8, .2, 1);
    --shadow: 0 4px 14px rgb(0 0 0 / 35%);
    --shadow-float: 0 12px 32px rgb(0 0 0 / 45%);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* La place de l'ascenseur est réservée sur toutes les pages : sans ça, le
   cockpit (qui ne défile pas) est plus large de 15 px que les autres, et le
   logo comme la barre sautent d'une page à l'autre. */
html { scroll-behavior: smooth; overflow-y: scroll; scrollbar-gutter: stable; }
body {
    margin: 0; min-height: 100vh; color: var(--text); background: var(--bg);
    font-size: 14px; line-height: 1.5;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body::before { content: none; }
body.dragging, body.dragging * { user-select: none; -webkit-user-select: none; cursor: grabbing; }
button, input, textarea, select { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(30px, 5vw, 46px); line-height: 1.02; letter-spacing: -.045em; }
h2 { margin-bottom: 6px; font-size: 18px; letter-spacing: -.02em; }
h3 { margin-bottom: 4px; font-size: 14px; }
p { margin-bottom: 0; color: var(--muted); line-height: 1.55; }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92em; color: var(--muted); }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
::selection { background: rgb(47 107 255 / 40%); }

/* Animations d'entrée ---------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(48 164 108 / 55%); } 70% { box-shadow: 0 0 0 7px rgb(48 164 108 / 0%); } }
@keyframes pulse-warn { 0%, 100% { box-shadow: 0 0 0 0 rgb(255 197 61 / 55%); } 70% { box-shadow: 0 0 0 7px rgb(255 197 61 / 0%); } }
@keyframes ripple { from { opacity: .9; transform: translate(-50%, -50%) scale(.2); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } }
@keyframes shimmer { from { background-position: -600px 0; } to { background-position: 600px 0; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes scan { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
@keyframes gradient-shift { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
.rise { animation: rise .55s var(--ease) both; }
.rise-1 { animation-delay: .04s; } .rise-2 { animation-delay: .10s; } .rise-3 { animation-delay: .16s; }
.rise-4 { animation-delay: .22s; } .rise-5 { animation-delay: .28s; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Barre du haut ------------------------------------------------------ */
.topbar {
    position: sticky; top: 0; z-index: 60;
    border-bottom: 1px solid var(--border);
    background: rgb(9 9 11 / 70%);
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.topbar-inner {
    display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: 16px;
    width: min(1440px, calc(100% - 32px)); margin: 0 auto; padding: 10px 0;
}
.brand { display: flex; align-items: center; gap: 10px; justify-self: start; }
.account-mark {
    display: grid; flex: none; width: 26px; height: 26px; place-items: center; border-radius: 8px;
    background: var(--accent-gradient); color: #fff; font-size: 12px; font-weight: 800;
    box-shadow: 0 6px 18px rgb(47 107 255 / 35%);
}
/* La marque : l'alvéole, en SVG avec son dégradé. */
.brand-mark { display: grid; flex: none; width: 28px; height: 28px; place-items: center; color: var(--text); }
.brand-mark svg { width: 28px; height: 28px; display: block; }
.brand-titles { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: 'Outfit', var(--font, sans-serif); font-size: 19px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; }
/* ScalyX : le X en majuscule et violet (30/09/2026). */
a.brand-name, a.brand-name:hover { font-family: 'Outfit', var(--font, sans-serif) !important; font-weight: 600 !important; }
.brand-name span.brand-x { display: inline; color: #2F6BFF; border: 0; outline: 0; padding: 0; margin: 0; background: none; box-shadow: none; font: inherit; }
.brand-sub { font-size: 11px; color: var(--dim); font-weight: 600; letter-spacing: .04em; }
.pill-nav {
    display: flex; justify-self: center; gap: 2px; padding: 3px; border: 1px solid var(--border);
    border-radius: 999px; background: rgb(var(--ink) / 3%);
}
.pill-nav:empty { display: none; }
.pill {
    position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 14px;
    border-radius: 999px; color: var(--muted); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
    transition: color .2s var(--ease), background .25s var(--ease);
}
.pill:hover { color: var(--text); background: rgb(var(--ink) / 4%); }
.pill.current { background: var(--panel-raised); color: var(--text); box-shadow: 0 1px 0 rgb(var(--ink) / 8%) inset, 0 6px 16px rgb(0 0 0 / 30%); }
.topbar-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
/* Les boutons de la barre ne s'écrasent jamais (02/10/2026, « rends les boutons cohérents ») : tous carrés, 36 px. */
.topbar-actions > * { flex: none; }
.topbar-actions > .icon-button, .topbar-actions .alerts-anchor > .icon-button { display: inline-grid; place-items: center; width: 36px; height: 36px; min-height: 36px; padding: 0; }
.topbar-actions .button { min-height: 34px; padding: 0 12px; font-size: 12px; }
.icon-button.bell { position: relative; width: 34px; min-height: 34px; padding: 0; border-radius: 10px; }
.icon-button.bell::after { position: absolute; top: 7px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); content: ""; box-shadow: 0 0 8px var(--accent-2); }
.account-chip {
    display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px 0 6px;
    border: 1px solid var(--border); border-radius: 10px; background: rgb(var(--ink) / 3%); font-size: 13px; font-weight: 700;
}
/* Le sélecteur d'iPhone : le téléphone piloté, en un coup d'œil. */
.device-switch {
    display: inline-flex; align-items: center; gap: 9px; min-height: 34px; padding: 0 12px 0 8px;
    border: 1px solid var(--border); border-radius: 10px; background: rgb(var(--ink) / 3%);
    font-size: 13px; font-weight: 700; text-decoration: none; transition: border-color .2s, background .2s;
}
.device-switch:hover { border-color: var(--border-strong); background: rgb(var(--ink) / 6%); }
.device-switch .live-dot { width: 7px; height: 7px; }
/* Le sélecteur de modèle : son visage, petit, partout — cockpit compris. Un bouton, un menu à nous. */
.model-switch { position: relative; display: inline-block; }
.ms-btn { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; padding: 0 10px 0 6px; border: 1px solid var(--border); border-radius: 12px; background: rgb(var(--ink) / 3%); color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .3s; }
.ms-btn:hover, .ms-btn[aria-expanded="true"] { border-color: rgb(47 107 255 / 45%); background: rgb(var(--ink) / 6%); box-shadow: 0 8px 20px -12px rgb(47 107 255 / 60%); }
.ms-btn svg { color: var(--muted); transition: transform .25s var(--ease); } .ms-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.ms-btn img, .ms-item img, .ms-initial { width: 24px; height: 24px; border-radius: 8px; object-fit: cover; flex: none; }
.ms-initial { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 800; }
.ms-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 80; min-width: 240px; padding: 6px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--panel-solid); box-shadow: 0 24px 60px -20px rgb(0 0 0 / 80%), 0 0 0 1px rgb(var(--ink) / 3%) inset; animation: ms-pop .18s var(--spring); transform-origin: top right; }
@keyframes ms-pop { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
.ms-head { padding: 6px 10px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ms-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none; transition: background .15s; }
.ms-item:hover { background: rgb(var(--ink) / 6%); } .ms-item.current { background: rgb(47 107 255 / 12%); }
.ms-item i { margin-left: auto; font-style: normal; color: var(--accent); font-weight: 800; }
.ms-item img { width: 26px; height: 26px; }
/* La modèle implicite (agence sans modèle, 02/10/2026) : « Sans modèle » sous le nom de l'agence. */
.ms-item .ms-sub { display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
.ms-sep { height: 1px; margin: 6px 4px; background: var(--border); }
.ms-new { color: var(--muted); } .ms-new:hover { color: var(--text); }
a.ms-btn, a.ms-btn:hover { text-decoration: none; } a.ms-btn:hover { border-color: #2f6bff; }
.ms-plus { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: #2f6bff; color: #fff; font-weight: 800; line-height: 1; }
.device-switch small { color: var(--muted); font-weight: 600; }
.device-switch select {
    appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font-weight: 700;
    padding-right: 14px; cursor: pointer; max-width: 200px;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 8px) 55%, calc(100% - 4px) 55%; background-size: 4px 4px; background-repeat: no-repeat;
}
.device-switch select:focus { outline: none; }
@media (max-width: 980px) {
    .topbar-inner { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
    .brand { grid-row: 1; grid-column: 1; }
    .topbar-actions { grid-row: 1; grid-column: 2; }
    .pill-nav { grid-row: 2; grid-column: 1 / -1; justify-self: stretch; overflow-x: auto; scrollbar-width: none; }
    .pill { flex: 1; justify-content: center; }
    .pill-nav::-webkit-scrollbar { display: none; }
    .brand-sub, .account-chip { display: none; }
}
@media (max-width: 560px) {
    .topbar-actions > .button, .topbar-actions > .bell { display: none; }
    .device-switch select { max-width: 170px; }
    /* Les six entrées tiennent sur une ligne de téléphone. */
    .pill { min-height: 30px; padding: 0 5px; font-size: 11.5px; letter-spacing: -.01em; }
    .stage-title h1 { font-size: 22px; }
    .stage-title .meta code { display: none; }
    .shell { width: calc(100% - 20px); padding-top: 16px; }
}

/* Coquille de page --------------------------------------------------- */
.shell { position: relative; z-index: 1; width: min(1440px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 24px; }
.page-header { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 26px; }
.eyebrow { display: block; margin-bottom: 8px; color: var(--dim); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.section-heading, .run-heading, .modal-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.section-heading h2, .modal-head h2 { margin-bottom: 0; }
.section-heading .eyebrow, .modal-head .eyebrow { margin-bottom: 4px; }
.inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.spacer { flex: 1; }
.hint { font-size: 12px; color: var(--dim); }
.muted { color: var(--muted); }
.run-meta { font-size: 12px; color: var(--muted); }
.run-error { padding: 10px 12px; border: 1px solid rgb(229 72 77 / 35%); border-radius: var(--radius-sm); background: rgb(229 72 77 / 8%); color: var(--danger); font-size: 13px; }

/* Panneaux ----------------------------------------------------------- */
.panel, .card, .registration-panel {
    position: relative; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--panel); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow);
}
.panel::before, .card::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(180deg, rgb(var(--ink) / 4%), transparent 40%);
}
.panel > *, .card > * { position: relative; }

/* Boutons ------------------------------------------------------------ */
.button, .icon-button {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 12px;
    color: var(--text); font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer;
    transition: transform .15s var(--spring), background .2s, border-color .2s, box-shadow .25s, filter .2s;
    overflow: hidden; white-space: nowrap;
}
.button:active, .icon-button:active { transform: scale(.96); }
.button.primary { background: var(--accent-gradient); background-size: 200% 200%; color: var(--bg); box-shadow: 0 10px 28px rgb(47 107 255 / 30%); }
.button.primary:hover { animation: gradient-shift 1.6s var(--ease) infinite alternate; box-shadow: 0 12px 34px rgb(47 107 255 / 42%); }
.button.secondary, .icon-button { border-color: var(--border); background: rgb(var(--ink) / 4%); }
.button.secondary:hover, .icon-button:hover { border-color: var(--border-strong); background: rgb(var(--ink) / 7%); }
.button.danger { background: rgb(229 72 77 / 12%); border-color: rgb(229 72 77 / 35%); color: var(--danger); }
.button.danger:hover { background: rgb(229 72 77 / 20%); }
.button.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.button.ghost:hover { color: var(--text); background: rgb(var(--ink) / 5%); }
.button.small, .icon-button.small { min-height: 32px; padding: 0 11px; font-size: 12px; border-radius: 10px; }
.icon-button.active { border-color: rgb(47 107 255 / 45%); background: rgb(47 107 255 / 12%); color: var(--accent-2); }
/* Le curseur (30/09/2026) : la main sur TOUT ce qui se clique — un <button> gardait la flèche du navigateur, sauf
   ceux qui avaient reçu la main un par un, d'où un curseur qui changeait d'un bouton à l'autre. */
button, [role="button"], summary, select, a[href], label:has(> input[type="checkbox"]), label:has(> input[type="radio"]), input[type="checkbox"], input[type="radio"], input[type="file"] { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: default; opacity: .5; }
.button svg, .icon-button svg { width: 16px; height: 16px; flex: none; }

/* Champs ------------------------------------------------------------- */
label { display: block; margin: 12px 0 6px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
label small, .field-help { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--dim); }
/* Les libellés qui ne sont pas des intitulés de champ gardent leur casse. */
label.flow-option, label.switch, label.segmented, .segmented label, .flow-option span, .checkbox-option, .choices label, .authorization { text-transform: none; letter-spacing: 0; margin: 0; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px;
    background: rgb(0 0 0 / 30%); color: inherit; transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: rgb(47 107 255 / 70%); box-shadow: 0 0 0 4px rgb(47 107 255 / 15%); }
select { appearance: none; -webkit-appearance: none; padding-right: 32px;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
textarea { min-height: 90px; resize: vertical; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > label { margin: 0; }
.field[hidden], .row[hidden], .soft-toggle[hidden] { display: none; }
.form-row, .schedule-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.checkbox-option, .choices label, .authorization { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--text); }
.checkbox-option input, .choices input, .authorization input { width: auto; margin-top: 2px; accent-color: var(--accent); }
fieldset { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
legend { padding: 0 6px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
/* Interrupteur */
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--text); margin: 0; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: rgb(var(--ink) / 10%); border: 1px solid var(--border); transition: background .25s; flex: none; }
.switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .25s var(--spring); }
.switch input:checked + .switch-track { background: var(--accent); border-color: transparent; }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent-2); outline-offset: 2px; }
/* Segments */
.segmented { display: inline-flex; max-width: 100%; padding: 3px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-deep); gap: 2px; overflow-x: auto; scrollbar-width: none; }
.segmented::-webkit-scrollbar { display: none; }
.segmented label span { white-space: nowrap; }
.segmented label { position: relative; margin: 0; }
.segmented input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.segmented span { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 9px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; transition: background .2s, color .2s; }
.segmented input:checked + span { background: var(--panel-raised); color: var(--text); box-shadow: 0 1px 0 rgb(var(--ink) / 8%) inset; }
.segmented input:focus-visible + span { outline: 2px solid var(--accent-2); }
/* Curseur */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; padding: 0; border: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent) var(--fill, 0%), rgb(var(--ink) / 10%) var(--fill, 0%)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 4px 14px rgb(0 0 0 / 40%); cursor: grab; transition: transform .15s var(--spring); }
input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }
.range-row { display: flex; align-items: center; gap: 12px; }
.range-row output { min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; }

/* Statuts ------------------------------------------------------------ */
.status { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: rgb(var(--ink) / 4%); color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.status .dot, .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); flex: none; transition: background .3s; }
.status.ready, .status.succeeded, .status.active { color: var(--success); border-color: rgb(48 164 108 / 30%); }
.status.ready .dot, .status.succeeded .dot, .status.active .dot, .live-dot.on { background: var(--success); animation: pulse 1.8s ease-out infinite; }
.status.running, .status.queued, .status.paused, .status.checking { color: var(--warning); border-color: rgb(255 197 61 / 30%); }
.status.running .dot, .status.queued .dot { background: var(--warning); animation: pulse-warn 1.4s ease-out infinite; }
.status.error, .status.failed, .status.stopped, .status.cancelled { color: var(--danger); border-color: rgb(229 72 77 / 30%); }
.status.error .dot, .status.failed .dot, .status.stopped .dot { background: var(--danger); }
.status.idle .dot { background: var(--dim); }
.status::first-letter { text-transform: uppercase; }
.count-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; background: rgb(var(--ink) / 3%); font-size: 12px; font-weight: 700; }
.count-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px var(--success); }
.count-badge .dot.off { background: var(--danger); box-shadow: none; }
.handle-chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: #2f6bff; font-size: 12px; font-weight: 700; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); font-size: 11px; font-weight: 700; color: var(--muted); }
.state { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: rgb(var(--ink) / 6%); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.state-succeeded { color: var(--success); background: rgb(48 164 108 / 12%); }
.state-failed, .state-stopped { color: var(--danger); background: rgb(229 72 77 / 12%); }
.state-running, .state-queued { color: var(--warning); background: rgb(255 197 61 / 12%); }

/* Chargement --------------------------------------------------------- */
.loading-card, .empty-state { min-height: 120px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--muted); font-size: 13px; }
.empty-state { flex-direction: column; padding: 40px 20px; text-align: center; }
.empty-state h2 { margin: 10px 0 0; }
.spinner { width: 16px; height: 16px; border: 2px solid rgb(var(--ink) / 15%); border-top-color: var(--accent-2); border-radius: 50%; animation: spin .8s linear infinite; }
.skeleton { border-radius: 8px; background: linear-gradient(90deg, rgb(var(--ink) / 4%) 25%, rgb(var(--ink) / 9%) 50%, rgb(var(--ink) / 4%) 75%); background-size: 600px 100%; animation: shimmer 1.4s linear infinite; }

/* ===================================================================
   Le cockpit
   =================================================================== */
.cockpit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 500px); gap: 22px; align-items: start; }
/* Sur bureau, le cockpit tient dans la fenêtre : rien à faire défiler. Le
   téléphone se dimensionne à la hauteur, le pupitre défile en lui-même. */
@media (min-width: 1101px) {
    html:has(.cockpit) { overflow-y: scroll; } body:has(.cockpit) { height: 100vh; overflow: hidden; }
    .shell.cockpit { height: calc(100vh - 77px); padding: 14px 0 10px; align-items: stretch; overflow: hidden; }
    .stage { position: relative; height: 100%; min-height: 0; }
    /* La barre « tâche en cours » ne prend pas de place dans la colonne (le
       téléphone a déjà toute la hauteur) : elle flotte au-dessus du dock. */
    .stage .running-bar, .stage .stream-status { position: absolute; left: 0; right: 0; bottom: 66px; z-index: 6; margin: 0; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgb(30 26 12 / 78%); box-shadow: 0 10px 30px rgb(0 0 0 / 40%); }
    .stage .stream-status { bottom: 66px; }
    .stage .running-bar:not([hidden]) ~ .stream-status:not([hidden]) { bottom: 118px; }
    /* Le téléphone prend toute la hauteur qui reste entre ses onglets et le
       dock : barre du haut 77, marges 24, onglets 38, dock 46, deux écarts de
       14 → 213 px ; l'écran 375×812 sous 12 px de châssis donne la largeur,
       plafonnée à 560 px. Une largeur calculée, pas un rapport hauteur/largeur
       : Safari recalculait ce dernier au survol et faisait sauter les rails.
       La colonne a cette largeur fixe : en « auto », l'image du flux
       (1125 px de large) élargirait la colonne. */
    .cockpit .phone-rig { flex: 1; min-height: 0; align-content: start; grid-template-columns: minmax(0, 1fr) auto min(560px, calc((100vh - 190px) / var(--phone-ratio, 2.174))) auto minmax(0, 1fr); }
    /* --phone-ratio : hauteur / largeur de l'écran affiché (device.ts, applyScreenSize ; 03/10/2026). Avec le rapport
       d'un iPhone (812/375), un Samsung (2400/1080), plus allongé, poussait le dock sous le bas de la fenêtre. */
    .cockpit .phone-frame { grid-column: 3; width: 100%; min-width: 0; }
    .cockpit .rail-apps { grid-column: 2; } .cockpit .rail-macros { grid-column: 4; }
    .deck { height: 100%; min-height: 0; }
    .deck-panel.active { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
}
@media (max-width: 1100px) { .cockpit { grid-template-columns: minmax(0, 1fr); } }

/* La scène : le téléphone ------------------------------------------- */
.stage { position: relative; display: flex; flex-direction: column; gap: 14px; }
/* La tête de scène : une seule ligne — le menu des réseaux à gauche, les
   onglets de téléphones au centre, le menu des actions à droite. */
.stage-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.stage-head .stage-tools { grid-column: 3; grid-row: 1; justify-self: end; position: relative; margin: 0; display: block; }
.stage-head details summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap; }
.stage-head details summary::-webkit-details-marker { display: none; }
.stage-head details summary svg { width: 15px; height: 15px; }
.stage-head details summary .chevron { width: 12px; height: 12px; color: var(--muted); transition: transform .2s; }
.stage-head details[open] summary .chevron { transform: rotate(180deg); }
.menu-list { position: absolute; top: calc(100% + 6px); z-index: 40; display: flex; flex-direction: column; gap: 2px; min-width: 220px; padding: 6px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--panel-solid); box-shadow: 0 18px 40px rgb(0 0 0 / 45%); }
.socials-menu .menu-list { left: 0; } .tools-menu .menu-list { right: 0; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.menu-item svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.menu-item:hover { background: rgb(var(--ink) / 7%); }
.menu-item[aria-pressed="true"] svg { color: var(--accent-2); }
/* Les onglets de téléphones d'une modèle (cockpit) : la même pilule que la navigation. */
.phone-tabs-row { display: flex; justify-content: center; grid-column: 2; }
.phone-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgb(var(--ink) / 5%); border: 1px solid var(--line); }
.phone-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; }
.phone-tabs a.current { background: var(--accent-soft); color: var(--text); }
.phone-tabs a:hover { color: var(--text); }
.phone-tabs .live-dot { margin: 0; }
/* Les comptes de la modèle : une pastille par réseau. Sur bureau, en liste
   à gauche du téléphone ; sur petit écran, en ligne au-dessus. */
/* Le menu des réseaux, en haut à gauche de la scène. */
.socials-menu { position: relative; grid-column: 1; grid-row: 1; justify-self: start; }
.socials-list .social-link { border: 0; border-radius: 8px; background: transparent; font-size: 13px; padding: 8px 10px; }
.socials-list .social-scan { position: relative; width: 100%; margin-top: 9px; border-top: 0; border-radius: 8px; color: #2f6bff; font: inherit; font-size: 13px; font-weight: 600; text-align: left; } .socials-list .social-scan:hover { color: var(--text); } .socials-list .social-scan::before { content: ""; position: absolute; left: 4px; right: 4px; top: -5px; height: 1px; background: var(--border); }
.socials-list .social-link:hover { background: rgb(var(--ink) / 7%); }
/* Petit écran : même ligne, plus serrée — les deux menus sans leur mot,
   les onglets au milieu. */
@media (max-width: 640px) {
    .stage-head { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
    .stage-head details summary span { display: none; }
    /* Les onglets défilent sur le côté (huit téléphones ne tiennent pas) au
       lieu de déborder sous le menu Actions ; l'onglet courant est ramené au
       centre par le script. */
    .phone-tabs-row { min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; justify-content: flex-start; mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); padding: 2px 0; }
    .phone-tabs-row::-webkit-scrollbar { display: none; }
    .phone-tabs { flex: none; max-width: none; margin: 0 auto; }
    .phone-tabs a { padding: 6px 10px; font-size: 12px; white-space: nowrap; }
    .phone-tabs .phone-tabs-sep { flex: none; }
}
@media (max-width: 640px) {
    .cockpit { gap: 14px; }
    .phone-rig { gap: 6px; }
}
.social-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 8px; border: 1px solid var(--border); border-radius: 999px; background: rgb(var(--ink) / 4%); color: var(--muted); font-size: 12px; font-weight: 700; text-decoration: none; transition: color .2s, border-color .2s, background .2s; }
.social-link svg { width: 14px; height: 14px; }
.social-link:hover { color: var(--text); border-color: var(--border-strong); background: rgb(var(--ink) / 8%); }
.stage-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.stage-title h1 { margin: 0; font-size: 26px; }
.stage-title .meta { display: flex; flex-wrap: wrap; gap: 6px 10px; color: var(--muted); font-size: 12px; }
.stage-title .meta code { font-size: 11px; }
.stage-tools { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }

.phone-rig { display: grid; grid-template-columns: auto auto auto; gap: 14px 10px; align-items: center; justify-content: center; justify-items: center; }
/* Les rails : à gauche les apps, à droite les macros. Une fine colonne
   d'icônes, le mot en info-bulle ; un trait sépare les groupes. */
.rail { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; padding: 5px; border: 1px solid var(--border); border-radius: 999px; background: rgb(9 9 11 / 70%); box-shadow: 0 8px 24px rgb(0 0 0 / 30%); }
/* Au survol, la colonne passe devant l'écran : ses bulles ne glissent plus sous « Connexion au téléphone… ». */
.rail:hover, .rail:focus-within { z-index: 10; }
.rail hr { width: 16px; height: 1px; margin: 3px auto; border: 0; background: var(--border-strong); }
/* Un séparateur sans bouton visible après lui (« Lien… » masqué sur Android, 03/10/2026) : un trait orphelin sous Réglages. */
.rail hr:not(:has(~ .rail-btn:not([hidden]))) { display: none; }
.rail-btn {
    position: relative; display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--muted); text-decoration: none; cursor: pointer;
    transition: transform .15s var(--spring), background .2s, color .2s;
}
.rail-btn svg { width: 17px; height: 17px; }
.rail-btn span { position: absolute; top: 50%; padding: 4px 8px; border-radius: 7px; background: var(--panel-solid); border: 1px solid var(--border-strong);
    color: var(--text); font-size: 11px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(-50%); transition: opacity .15s; }
.rail-apps .rail-btn span { left: calc(100% + 10px); } .rail-macros .rail-btn span { right: calc(100% + 10px); }
.rail-btn:hover { color: var(--text); background: rgb(var(--ink) / 7%); }
.rail-btn:hover span { opacity: 1; }
.rail-btn:active { transform: scale(.88); }
.rail-btn.busy { color: var(--accent-2); pointer-events: none; }
.rail-btn.busy svg { animation: blink 1s ease-in-out infinite; }
/* Le bouton Scroll devient « arrêter » tant qu'un scroll tourne. */
.rail-btn.stop { color: var(--danger); background: rgb(229 72 77 / 12%); }
.rail-btn.stop:hover { background: rgb(229 72 77 / 22%); }
.rail-btn .when-stop { display: none; } .rail-btn.stop .when-stop { display: block; } .rail-btn.stop .when-idle { display: none; }
@keyframes blink { 50% { opacity: .35; } }
/* Sur un téléphone il n'y a pas de survol : le mot passe sous l'icône,
   dans les rails comme dans le dock, plutôt que de disparaître. */
@media (max-width: 640px) {
    .phone-rig { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; }
    .rail { gap: 0; padding: 4px 2px; border-radius: 14px; }
    .rail-btn { width: 46px; height: auto; padding: 5px 0 4px; grid-auto-flow: row; gap: 2px; border-radius: 10px; }
    .rail-btn svg { width: 16px; height: 16px; }
    .rail .rail-btn span, .dock .dock-btn span { position: static; padding: 0; border: 0; background: none; opacity: 1; transform: none;
        font-size: 8px; font-weight: 600; letter-spacing: -.01em; color: var(--muted); max-width: 44px; overflow: hidden; text-overflow: ellipsis; }
    .rail-btn.active span, .rail-btn:hover span, .dock-btn:hover span { color: var(--text); }
    .dock { border-radius: 16px; }
    .dock .dock-btn { width: auto; min-width: 44px; height: auto; padding: 5px 4px 4px; grid-auto-flow: row; gap: 2px; border-radius: 10px; }
}

/* Le châssis. Les boutons latéraux sont réels : le volume à gauche,
   la mise en veille à droite, comme sur l'objet. */
.phone-frame {
    /* Le châssis tient dans la hauteur de la fenêtre : la scène est collante,
       on ne doit jamais avoir à faire défiler pour voir le bas du téléphone. */
    position: relative; width: min(100%, 380px, calc((100vh - 250px) * 1.022 / var(--phone-ratio, 2.174))); min-width: 220px; padding: 12px;
    /* Les rayons suivent la largeur (comme le simulateur de Xcode) : en
       pourcentage, l'horizontal se rapporte à la largeur et le vertical à la
       hauteur, corrigés par le format 375 / 812 pour rester circulaires. */
    border-radius: 17% / 7.7%;
    background: linear-gradient(160deg, var(--panel-raised), var(--panel) 45%, var(--panel-elevated));
    box-shadow: 0 30px 80px rgb(0 0 0 / 60%), 0 0 0 1px rgb(var(--ink) / 8%) inset, 0 0 0 3px var(--bg-deep);
    transition: box-shadow .4s var(--ease);
}
@media (max-width: 640px) { .phone-frame { width: min(100%, calc((100vh - 300px) * 1.022 / var(--phone-ratio, 2.174))); min-width: 0; margin: 0 auto; } .side-btn span { display: none; } }
/* Plein écran : l'écran seul, à la hauteur de l'affichage, centré sur noir. */
.phone-frame:fullscreen { display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border-radius: 0; background: #000; box-shadow: none; }
.phone-frame:fullscreen::after, .phone-frame:fullscreen .side-btn { display: none; }
.phone-frame:fullscreen .phone-screen { width: min(100%, calc(100vh * 375 / 812)); border-radius: 0; }
.phone-frame.live { box-shadow: 0 30px 80px rgb(0 0 0 / 60%), 0 0 0 1px rgb(var(--ink) / 8%) inset, 0 0 0 3px var(--bg-deep), 0 0 60px rgb(47 107 255 / 22%); }
.phone-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(120deg, rgb(var(--ink) / 6%), transparent 30%, transparent 70%, rgb(var(--ink) / 3%)); }
/* Le flux est l'écran tel quel, coins compris. Les coins suivent ceux de
   l'iPhone (≈ 14 % de la largeur), assez pour l'allure, pas assez pour
   rogner l'heure ou la batterie ; rien n'est posé par-dessus. */
.phone-screen {
    position: relative; overflow: hidden; border-radius: 14% / 6.47%; aspect-ratio: 375 / 812; background: #000;
    touch-action: none; cursor: crosshair;
}
.phone-screen img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.phone-screen img:not([src]) { visibility: hidden; }
/* Android : le flux H.264 décodé par le navigateur se dessine sur un canevas par-dessus l'image (les gestes passent au travers). */
.phone-screen .screen-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; display: block; }
.phone-screen .screen-video[hidden] { display: none; }
/* Les ondes des touchers */
.ripples { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.ripples span { position: absolute; width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--accent-2); background: rgb(47 107 255 / 18%); animation: ripple .55s var(--ease) forwards; }
.ripples .trail { width: 8px; height: 8px; border: 0; background: var(--accent-2); animation: ripple .8s var(--ease) forwards; }
/* Le voile quand l'écran n'est pas disponible */
.screen-veil { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--muted); font-size: 13px; background: radial-gradient(circle at 50% 40%, var(--panel), var(--bg-deep)); transition: opacity .4s; }
.screen-veil[hidden] { display: none; }
.screen-veil .device-icon { margin-bottom: 14px; }
.screen-veil::after { content: ""; pointer-events: none; position: absolute; left: 0; right: 0; height: 40%; background: linear-gradient(180deg, transparent, rgb(47 107 255 / 8%), transparent); animation: scan 2.6s linear infinite; }
.side-btn {
    position: absolute; width: 4px; padding: 0; border: 0; border-radius: 3px; cursor: pointer;
    background: linear-gradient(180deg, var(--border-strong), var(--panel)); box-shadow: 0 0 0 1px rgb(0 0 0 / 60%);
    transition: transform .12s var(--spring), background .2s;
}
.side-btn:hover { background: linear-gradient(180deg, #2f6bff, #2f6bff); }
.side-btn:active { transform: scaleX(.4); }
.side-btn.vol-up { left: -5px; top: 21%; height: 9%; }
.side-btn.vol-down { left: -5px; top: 32%; height: 9%; }
.side-btn.power { right: -5px; top: 24%; height: 14%; }
.side-btn.mute { left: -5px; top: 14%; height: 4%; }
.side-btn span { position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 10px; font-weight: 700; color: var(--dim); opacity: 0; transition: opacity .2s; pointer-events: none; }
.side-btn.vol-up span, .side-btn.vol-down span, .side-btn.mute span { right: 10px; }
.side-btn.power span { left: 10px; }
.side-btn:hover span { opacity: 1; }

/* Le pupitre de commande à côté du téléphone ------------------------- */
/* Le dock : une pilule d'icônes sous l'écran. Même dessin que les rails,
   à l'horizontale ; les balayages se font au doigt sur l'écran. */
.dock { grid-column: 1 / -1; display: flex; align-items: center; gap: 2px; padding: 5px; border: 1px solid var(--border); border-radius: 999px; background: rgb(9 9 11 / 70%); box-shadow: 0 8px 24px rgb(0 0 0 / 30%); }
.dock hr { width: 1px; height: 16px; margin: 0 4px; border: 0; background: var(--border-strong); }
.dock-btn {
    position: relative; display: grid; place-items: center; width: 38px; height: 34px; padding: 0;
    border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer;
    transition: transform .15s var(--spring), background .2s, color .2s;
}
.dock-btn svg { width: 17px; height: 17px; }
.dock-btn span { position: absolute; bottom: calc(100% + 8px); left: 50%; padding: 4px 8px; border-radius: 7px; background: var(--panel-solid); border: 1px solid var(--border-strong);
    color: var(--text); font-size: 11px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateX(-50%); transition: opacity .15s; }
.dock-btn:hover { color: var(--text); background: rgb(var(--ink) / 7%); }
.dock-btn:hover span { opacity: 1; }
.dock-btn:active { transform: scale(.88); }
.dock-btn.home { color: var(--text); background: rgb(var(--ink) / 7%); }
.dock-btn.active { color: var(--accent-2); background: rgb(47 107 255 / 14%); }
/* Le clavier virtuel n'a de sens que sans clavier physique. */
@media (hover: hover) and (pointer: fine) { .touch-only { display: none; } }

/* L'état sous le téléphone */
/* La tâche en cours sur cet iPhone, et de quoi l'arrêter. */
.running-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border: 1px solid rgb(255 197 61 / 35%); border-radius: 14px; background: rgb(255 197 61 / 7%); font-size: 13px; color: var(--text); }
.running-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); flex: none; animation: pulse-warn 1.8s ease-out infinite; }
.running-bar .spacer { flex: 1; }
.running-bar.stopping { border-color: rgb(229 72 77 / 35%); background: rgb(229 72 77 / 7%); } .running-bar.stopping .dot { background: var(--danger); animation: blink 1s ease-in-out infinite; }
.stream-status { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); font-size: 13px; color: var(--muted); transition: border-color .3s; }
.stream-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex: none; transition: background .3s; }
.stream-status.ready { border-color: rgb(48 164 108 / 25%); color: var(--text); }
.stream-status.ready .dot { background: var(--success); animation: pulse 1.8s ease-out infinite; }
.stream-status.error { border-color: rgb(229 72 77 / 30%); color: var(--danger); }
.stream-status.error .dot { background: var(--danger); }
.stream-status span:last-child::first-letter { text-transform: uppercase; }
.stream-status .latency { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 11px; color: var(--dim); }

/* Saisie de texte rapide */
.type-bar { display: flex; gap: 8px; }
.type-bar input { flex: 1; }
/* Le champ clavier, hors de vue mais focalisable (clavier virtuel du téléphone). */
.live-input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
/* Le clavier en direct : un champ qui a l'air d'une barre, sans bouton. */
.live-type { display: flex; align-items: center; gap: 10px; padding: 0 14px; min-height: 44px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); color: var(--muted); cursor: text; transition: border-color .2s, box-shadow .2s; }
.live-type:focus-within { border-color: rgb(47 107 255 / 45%); box-shadow: 0 0 0 3px rgb(47 107 255 / 10%); color: var(--text); }
.live-type svg { width: 17px; height: 17px; flex: none; }
.live-type input { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 14px; color: var(--text); }
.live-type input:focus { outline: 0; }
.live-type .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); flex: none; transition: background .2s; }
.live-type .live-dot.on { background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); }

/* Le pupitre à onglets ------------------------------------------------ */
.deck { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.deck-tabs { display: flex; gap: 2px; padding: 4px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); backdrop-filter: blur(12px); overflow-x: auto; scrollbar-width: none; position: relative; }
.deck-tabs::-webkit-scrollbar { display: none; }
/* Un onglet fait toujours la largeur de son libellé : « Compa… » ou « Act… »
   tronqués, ça ne se lit pas. La barre défile en dernier recours plutôt que
   de couper les mots. */
.deck-tab { position: relative; flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: color .2s, background .25s; }
.deck-tab svg { width: 16px; height: 16px; flex: none; }
.deck-tab:hover { color: var(--text); }
.deck-tab[aria-selected="true"] { color: var(--text); background: var(--panel-raised); box-shadow: 0 1px 0 rgb(var(--ink) / 8%) inset, 0 6px 16px rgb(0 0 0 / 30%); }
/* L'indicateur d'activité : un petit point ambre qui pulse après le mot,
   comme les autres états « en cours » — dans la ligne, jamais par-dessus. */
.deck-tab .badge { display: none; width: 7px; height: 7px; margin-left: 2px; border-radius: 50%; background: var(--warning); flex: none; }
.deck-tab .badge.on { display: inline-block; animation: pulse-warn 1.4s ease-out infinite; }
/* Pupitre étroit : les icônes s'effacent, les mots restent entiers. */
@media (max-width: 1500px) { .deck-tab svg { display: none; } }
.deck-panel { display: none; flex-direction: column; gap: 12px; }
.deck-panel.active { display: flex; animation: rise .35s var(--ease) both; }
/* Sur téléphone, les icônes sont déjà effacées : les mots restent, et la
   rangée d'onglets défile si elle ne tient pas. */
@media (max-width: 1240px) and (min-width: 1101px) { .deck-tab span.label { display: none; } }
@media (max-width: 520px) { .deck-tab { flex: 0 0 auto; padding: 0 12px; } }

/* Cartes d'action */
.action-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.action-card {
    position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--border); border-radius: 14px;
    background: rgb(var(--ink) / 3%); text-decoration: none; overflow: hidden;
    /* Lien ou bouton, même allure. */
    font: inherit; color: inherit; text-align: left; cursor: pointer;
    transition: transform .2s var(--spring), border-color .2s, background .2s;
}
.action-card:hover { transform: translateY(-2px); border-color: var(--border-strong); background: rgb(var(--ink) / 6%); }
.action-card::after { content: "→"; position: absolute; right: 12px; top: 12px; color: var(--dim); transition: transform .2s var(--ease), color .2s; }
.action-card:hover::after { transform: translateX(3px); color: var(--accent-2); }
.action-card .platform { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
/* L'icône de la plateforme, dans un petit carré à sa couleur. */
.action-card .platform svg { width: 20px; height: 20px; padding: 3px; border-radius: 6px; background: rgb(var(--ink) / 8%); color: currentColor; flex: none; }
.action-card.th .platform, .action-card.x .platform { color: var(--text); }
.action-card .name { font-size: 14px; font-weight: 800; }
.action-card .note { font-size: 12px; color: var(--muted); }
.action-card.ig .platform { color: #f77fb0; } .action-card.tt .platform { color: #69f0e6; }
.action-card.x .platform { color: #e5e5ea; } .action-card.th .platform { color: #2f6bff; }
.action-card.fb .platform { color: #0866ff; }
.action-card.launch { cursor: pointer; border-style: dashed; }

/* Journal */
.run-panel { display: flex; flex-direction: column; gap: 10px; }
.run-panel pre { margin: 0; max-height: 380px; overflow: auto; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgb(0 0 0 / 40%); color: #c9d1dc; font: 12px/1.6 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre-wrap; word-break: break-word; }
.run-panel pre::-webkit-scrollbar { width: 8px; } .run-panel pre::-webkit-scrollbar-thumb { background: rgb(var(--ink) / 10%); border-radius: 8px; }
.run-heading { flex-wrap: wrap; }

/* Listes de tâches */
.task-list { display: flex; flex-direction: column; gap: 8px; }
.task-list.empty-state { min-height: 90px; padding: 22px; }
.task-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: rgb(var(--ink) / 3%); animation: fade .3s both; }
.task-row h3 { margin: 0 0 2px; font-size: 13px; }
/* Les apps lancées : une ligne par app, les services système en retrait. */
.apps-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.app-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: rgb(var(--ink) / 3%); }
.app-row > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.app-row strong { font-size: 13px; } .app-row small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-row.system { opacity: .55; }
/* Un lot de scrolls : replié, une ligne ; déplié, les heures précises. */
.task-lot { border: 1px solid var(--border); border-radius: 14px; background: rgb(var(--ink) / 3%); animation: fade .3s both; }
.task-lot > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; gap: 8px 12px; align-items: center; padding: 12px 14px; cursor: pointer; list-style: none; }
.task-lot > summary::-webkit-details-marker { display: none; }
.task-lot > summary h3 { margin: 0 0 2px; font-size: 13px; }
.task-lot > summary p { font-size: 12px; }
.lot-chevron { width: 8px; height: 8px; margin: 0 auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
.task-lot[open] .lot-chevron { transform: rotate(-135deg); }
.lot-body { display: flex; flex-direction: column; gap: 6px; padding: 0 10px 10px; }
.lot-body .task-row { padding: 9px 12px; border-radius: 10px; background: rgb(0 0 0 / 18%); animation: none; }
.lot-actions { padding: 4px 4px 0; }
.task-row p { font-size: 12px; }
.task-row .inline-actions { grid-column: 1 / -1; }
.task-row .status { justify-self: end; }
.task-section { margin-bottom: 18px; }

/* Réglages */
.setting { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--border); }
.setting:first-of-type { border-top: 0; padding-top: 0; }
.setting-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.setting-head h3 { margin: 0; }
.setting p { font-size: 12px; }
.setting label { margin-top: 4px; }

/* Compagnon */
.shortcut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.shortcut { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; background: rgb(var(--ink) / 3%); text-align: left; cursor: pointer; transition: transform .15s var(--spring), border-color .2s, background .2s; }
.shortcut:hover { border-color: var(--border-strong); background: rgb(var(--ink) / 6%); }
.shortcut:active { transform: scale(.96); }
.shortcut b { font-size: 12px; }
.shortcut small { font-size: 10px; color: var(--dim); font-family: ui-monospace, Menlo, monospace; word-break: break-all; }
.shortcut .app { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.shortcut.verified { position: relative; }
.shortcut.verified::after { content: "✓"; position: absolute; top: 8px; right: 10px; color: var(--success); font-size: 11px; font-weight: 800; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.info-cell { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: rgb(var(--ink) / 3%); }
.info-cell .k { display: block; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: 3px; }
.info-cell .v { font-size: 13px; font-weight: 700; word-break: break-word; }
.meter { position: relative; height: 6px; margin-top: 6px; border-radius: 999px; background: rgb(var(--ink) / 8%); overflow: hidden; }
.meter i { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); border-radius: inherit; background: var(--accent-gradient); transition: width .6s var(--ease); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.photo-grid .ph { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: rgb(var(--ink) / 4%); border: 1px solid var(--border); }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.drop { padding: 22px 14px; border: 1px dashed var(--border-strong); border-radius: 14px; background: rgb(var(--ink) / 2%); color: var(--muted); text-align: center; cursor: pointer; font-size: 13px; transition: border-color .2s, background .2s; }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.companion-state { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }

/* Toasts */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; min-width: 220px; max-width: 360px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 14px; background: rgb(20 20 23 / 92%); backdrop-filter: blur(14px); box-shadow: var(--shadow); font-size: 13px; animation: toast-in .35s var(--spring) both; pointer-events: auto; }
.toast.ok { border-color: rgb(48 164 108 / 35%); } .toast.err { border-color: rgb(229 72 77 / 40%); }
.toast .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); flex: none; }
.toast.ok .dot { background: var(--success); } .toast.err .dot { background: var(--danger); }
.toast.out { opacity: 0; transform: translateY(8px); transition: all .3s; }

/* Boîtes de dialogue ------------------------------------------------- */
/* La boîte <dialog> ne montre jamais d'ascenseur : l'animation d'entrée fait
   déborder le panneau de 12 px pendant 0,3 s, et le navigateur affichait deux
   barres le temps qu'il rentre. C'est le panneau lui-même qui défile s'il est
   plus haut que la fenêtre. */
dialog { padding: 0; border: 0; background: transparent; color: inherit; max-width: min(96vw, 900px); max-height: none; overflow: visible; }
/* La boîte reçoit le focus à l'ouverture : pas d'anneau bleu autour d'elle
   (le panneau a déjà son cadre), le focus va au premier champ. */
dialog:focus, dialog:focus-visible { outline: none; }
dialog::backdrop { background: rgb(0 0 0 / 70%); backdrop-filter: blur(6px); }
dialog[open] .modal { animation: rise .3s var(--ease) both; }
.modal { width: min(94vw, 560px); max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin; padding: 22px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--panel-solid); box-shadow: var(--shadow); }
.modal.wide, .calibrate-modal { width: min(94vw, 880px); }

/* Le composeur de publication, incrusté dans une pop-up du cockpit : la page
   existante en mode embed (sans barre), dans un cadre à la hauteur de l'écran. */
.compose-dialog { max-width: min(96vw, 1000px); }
.post-sheet { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; }
.post-sheet::backdrop { background: transparent; }
.post-sheet iframe { display: block; width: 100vw; height: 100vh; height: 100dvh; border: 0; background: transparent; }
.compose-modal { width: min(94vw, 960px); display: flex; flex-direction: column; gap: 10px; }
.compose-modal iframe { width: 100%; height: min(78vh, 900px); border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
/* Une page en mode embed : pas d'en-tête, du contenu bord à bord. */
body.embed .shell { width: calc(100% - 24px); padding: 12px 0 24px; }
body.embed .page-header { display: none; }

/* Suivi ---------------------------------------------------------------- */
.todo-nav { gap: 4px; }
.todo-list { display: flex; flex-direction: column; gap: 6px; }
.todo-group { margin: 10px 0 2px; color: var(--dim); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.todo-group:first-child { margin-top: 0; }
.todo-empty { padding: 8px 12px; color: var(--muted); font-size: 12px; }
/* Une ligne : la case, le titre en clair (jamais tronqué, il passe à la ligne)
   avec l'heure ou le détail dessous, et l'état à droite. */
.todo-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: rgb(var(--ink) / 3%); }
.todo-item input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--success); }
.todo-item input[type="checkbox"]:disabled { opacity: 1; }
.todo-item.manual input[type="checkbox"] { cursor: pointer; }
.todo-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.todo-title { font-size: 14px; font-weight: 700; line-height: 1.25; }
.todo-copy small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.todo-state { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.todo-item.done .todo-title { color: var(--muted); text-decoration: line-through; text-decoration-color: rgb(255 255 255 / 25%); }
.todo-item.done .todo-state { color: var(--success); }
.todo-item.failed { border-color: rgb(229 72 77 / 30%); }
.todo-item.failed .todo-state { color: var(--danger); }
.todo-item.running .todo-state { color: var(--warning); }
.todo-item.planned .todo-state, .todo-item.skipped .todo-state { color: var(--muted); }
.calibrate-body { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 18px; }
@media (max-width: 700px) { .calibrate-body { grid-template-columns: minmax(0, 1fr); } }
.calibrate-screen { position: relative; aspect-ratio: 375 / 812; border-radius: 20px; overflow: hidden; background: #000; border: 1px solid var(--border-strong); cursor: crosshair; }
.calibrate-screen.controlling { cursor: pointer; outline: 2px solid var(--accent-2); }
.calibrate-screen img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cal-markers { position: absolute; inset: 0; pointer-events: none; }
.cal-markers .m { position: absolute; width: 14px; height: 14px; border: 2px solid var(--warning); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px rgb(0 0 0 / 60%); }
.cal-markers .m.overridden { border-color: var(--success); }
.cal-markers .m.armed { border-color: var(--accent-2); box-shadow: 0 0 0 4px rgb(47 107 255 / 30%); animation: pulse 1.2s infinite; }
.cal-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 480px; overflow: auto; }
.cal-point { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; background: rgb(var(--ink) / 3%); }
.cal-point.armed { border-color: var(--accent-2); background: rgb(47 107 255 / 8%); }
.cal-point.overridden .cal-xy { color: var(--success); }
.cal-pick { border: 0; background: transparent; color: inherit; text-align: left; font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px; }
.cal-xy { font: 12px ui-monospace, Menlo, monospace; color: var(--muted); }
.cal-reset { border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: 8px; width: 28px; height: 28px; cursor: pointer; }
.cal-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

/* Parc (grille secondaire) ------------------------------------------- */
.device-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.grid-toolbar { grid-column: 1 / -1; display: flex; gap: 8px; }
.device-card { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); transition: transform .2s var(--spring), border-color .2s; animation: rise .4s var(--ease) both; }
.device-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.device-preview-frame { width: 84px; aspect-ratio: 375 / 812; overflow: hidden; border-radius: 14px; background: #000; border: 1px solid var(--border-strong); }
.device-preview-frame.unavailable { display: grid; place-items: center; background: var(--bg); }
.device-preview { display: block; width: 100%; height: 100%; object-fit: contain; }
.device-copy h2 { margin: 0 0 2px; font-size: 16px; }
.device-copy p { font-size: 12px; }
.device-card-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.device-icon, .empty-icon { position: relative; width: 26px; height: 42px; margin: auto; border: 2px solid var(--dim); border-radius: 7px; }
.device-icon::after, .empty-icon::after { position: absolute; bottom: 3px; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--dim); content: ""; transform: translateX(-50%); }
.connected { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--muted); }
.connected span { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px var(--success); }
.connected.offline span { background: var(--danger); box-shadow: none; }
.device-copy .accounts { margin-top: 4px; font-size: 12px; overflow-wrap: anywhere; }
.disabled-devices { grid-column: 1 / -1; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); }
.disabled-devices > summary { padding: 12px 16px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.disabled-devices ul { list-style: none; margin: 0; padding: 8px; display: grid; gap: 6px; }
.disabled-devices li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 9px; background: var(--bg-deep); font-size: 13px; }
.device-toggle { min-height: 32px; padding: 0 12px; font-size: 12px; }

/* Enregistrement ----------------------------------------------------- */
.registration-shell { max-width: 1000px; }
.registration-panel { margin: 16px 0; }
.candidate-list, .registration-checks { display: grid; gap: 10px; margin-top: 16px; }
.candidate-card, .registration-check { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgb(var(--ink) / 3%); }
.candidate-card h3, .registration-check h3, .registration-guidance h3 { margin: 0 0 4px; }
.registration-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0; }
.registration-form label { margin: 0; display: grid; gap: 7px; }
.registration-form .wide { grid-column: 1 / -1; }
@media (max-width: 700px) { .registration-form { grid-template-columns: minmax(0, 1fr); } }
.registration-check { justify-content: flex-start; }
.registration-check.passed { border-color: rgb(48 164 108 / 40%); }
.registration-check.blocked, .registration-check.failed { border-color: rgb(229 72 77 / 50%); }
.check-mark { display: grid; flex: 0 0 30px; height: 30px; place-items: center; border-radius: 50%; background: rgb(var(--ink) / 8%); font-weight: 700; }
.check-mark.passed { background: rgb(48 164 108 / 20%); color: var(--success); }
.check-mark.failed, .check-mark.blocked { background: rgb(229 72 77 / 20%); color: var(--danger); }
.registration-guidance { margin: 20px 0; padding: 14px 18px; border-left: 3px solid var(--accent); background: rgb(var(--ink) / 3%); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.registration-guidance li { margin: 7px 0; color: var(--muted); }
.registration-actions { flex-wrap: wrap; }
.registration-log { margin-top: 20px; }
.registration-log pre { max-height: 280px; overflow: auto; padding: 12px; border-radius: var(--radius-sm); background: rgb(0 0 0 / 40%); font-size: 12px; }
.inline-form { display: grid; gap: 9px; margin-top: 16px; }

/* L'explorateur (finder.js) ------------------------------------------- */
.finder { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--border); border-radius: 14px; background: rgb(var(--ink) / 2%); overflow: hidden; }
.finder-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: rgb(var(--ink) / 2.5%); flex-wrap: wrap; }
.finder-nav { display: flex; gap: 2px; }
.finder-ib { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.finder-ib svg { width: 16px; height: 16px; }
.finder-ib:hover:not(:disabled) { color: var(--text); background: rgb(var(--ink) / 6%); }
.finder-ib:disabled { opacity: .3; cursor: default; }
.finder-ib.on { color: var(--accent-2); background: rgb(47 107 255 / 12%); }
.finder-crumbs { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; font-size: 13px; }
.finder-crumbs::-webkit-scrollbar { display: none; }
.finder-crumbs .crumb { padding: 4px 7px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-weight: 600; white-space: nowrap; cursor: pointer; }
.finder-crumbs .crumb:hover { color: var(--text); background: rgb(var(--ink) / 5%); }
.finder-crumbs .crumb.current { color: var(--text); }
.finder-crumbs .sep { color: var(--dim); }
.finder-tools { display: flex; align-items: center; gap: 4px; }
.finder-search { width: 150px; min-height: 30px; padding: 0 10px; margin: 0; font-size: 12px; border-radius: 9px; }
.finder-seg { display: flex; padding: 2px; border: 1px solid var(--border); border-radius: 9px; }
.finder-seg button { display: grid; place-items: center; width: 26px; height: 24px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.finder-seg button svg { width: 14px; height: 14px; }
.finder-seg button.on { background: var(--panel-raised); color: var(--text); }
.finder-body { position: relative; flex: 1; min-height: 220px; max-height: 62vh; overflow: auto; padding: 12px; }
.finder-body.dropping { box-shadow: 0 0 0 2px var(--accent-2) inset; background: rgb(47 107 255 / 5%); }
.finder-empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 40px 0; margin: 0; color: var(--muted); font-size: 13px; text-align: center; }
.finder-empty.err { color: var(--danger); }
.finder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
/* Un nom de fichier long ne doit pas élargir sa colonne (mobile : la grille sortait de l'écran, 01/10/2026). */
.finder-grid > .finder-item { min-width: 0; }
.finder-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 7px; border: 1px solid transparent; border-radius: 12px; text-align: center; cursor: pointer; user-select: none; -webkit-user-select: none; transition: background .12s, border-color .12s; }
.finder-item:hover { background: rgb(var(--ink) / 4%); }
.finder-item.selected { background: rgb(47 107 255 / 12%); border-color: rgb(47 107 255 / 45%); }
.finder-item.drop { background: rgb(47 107 255 / 12%); border-color: rgb(47 107 255 / 60%); }
.finder-thumb { position: relative; width: 100%; aspect-ratio: 1; border-radius: 9px; overflow: hidden; display: grid; place-items: center; background: rgb(0 0 0 / 25%); }
.finder-item.folder .finder-thumb { background: transparent; }
.finder-workshop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 8px 4px; padding-top: 10px; border-top: 1px dashed var(--border, var(--line)); }
.finder-workshop-label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dim, var(--muted)); margin-right: 4px; }
.finder-workshop .finder-item.folder { flex-direction: row; align-items: center; gap: 8px; width: auto; padding: 4px 10px 4px 6px; border-radius: 999px; background: rgb(var(--ink) / 4%); opacity: .8; }
.finder-workshop .finder-item.folder .finder-thumb { width: 22px; height: 22px; aspect-ratio: auto; }
.finder-workshop .finder-item.folder .finder-thumb svg { color: var(--muted); }
.finder-workshop .finder-item.folder .finder-name { font-size: 12px; }
.finder-workshop .finder-item.folder .finder-meta { font-size: 11px; }
.finder-item.folder .finder-thumb svg { width: 60%; height: 60%; color: #2f6bff; }
.finder-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; transition: filter .2s; }
/* L'image entière, pas recadrée (un logo 2000×482 n'était qu'un morceau de lettre) ; la transparence sur un damier discret. */
.finder-item.file .finder-thumb { background: repeating-conic-gradient(rgb(var(--ink) / 7%) 0 25%, rgb(var(--ink) / 3%) 0 50%) 0 0 / 16px 16px; }
.finder-zoom { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 26px; height: 26px; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 50%; background: rgb(0 0 0 / 62%); color: #fff; opacity: 0; transition: opacity .12s; cursor: zoom-in; }
.finder-zoom svg { width: 15px; height: 15px; }
.finder-item.file:hover .finder-zoom, .finder-zoom:focus-visible { opacity: 1; }
@media (hover: none) { .finder-zoom { opacity: .85; } }
.finder-list .finder-zoom { display: none; }
.finder-item.nsfw .finder-thumb img { filter: blur(14px) saturate(.6); transform: scale(1.1); }
.finder.reveal .finder-item.nsfw .finder-thumb img { filter: none; transform: none; }
.finder-glyph { color: var(--muted); } .finder-glyph svg { width: 34px; height: 34px; }
.finder-glyph-over { position: absolute; right: 6px; bottom: 6px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgb(0 0 0 / 55%); color: #fff; } .finder-glyph-over svg { width: 14px; height: 14px; }
.finder-tick { position: absolute; top: 6px; left: 6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; opacity: 0; transform: scale(.6); transition: opacity .12s, transform .12s var(--spring); }
.finder-tick svg { width: 12px; height: 12px; }
.finder-item.selected .finder-tick { opacity: 1; transform: none; }
.finder-used { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2px rgb(0 0 0 / 50%); }
.finder-name { width: 100%; font-size: 11.5px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finder-meta { font-size: 10px; color: var(--dim); }
.finder-list { display: flex; flex-direction: column; }
.finder-list .finder-item { flex-direction: row; gap: 10px; padding: 5px 8px; border-radius: 9px; text-align: left; }
.finder-list .finder-thumb { width: 34px; height: 34px; aspect-ratio: auto; border-radius: 7px; flex: none; }
.finder-list .finder-glyph svg { width: 18px; height: 18px; }
.finder-list .finder-name { flex: 1; font-size: 13px; }
.finder-list .finder-meta { flex: none; font-size: 11px; font-variant-numeric: tabular-nums; }
.finder-list .finder-tick { position: static; flex: none; order: -1; }
.finder-foot { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.finder-foot b { color: var(--text); }
.finder-foot .hint { margin: 0; }
.finder-menu { position: fixed; z-index: 220; display: none; flex-direction: column; min-width: 190px; padding: 5px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--panel-solid); box-shadow: var(--shadow); }
.finder-menu.open { display: flex; }
.finder-menu button { padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font-size: 13px; text-align: left; cursor: pointer; }
.finder-menu button:hover { background: rgb(var(--ink) / 7%); }
.finder-menu button.danger { color: var(--danger); }
.finder-preview { position: fixed; inset: 0; z-index: 230; display: none; grid-template-columns: 56px 1fr 56px; align-items: center; background: rgb(0 0 0 / 90%); backdrop-filter: blur(8px); }
.finder-preview.open { display: grid; }
.finder-preview figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.finder-stage img, .finder-stage video { max-width: min(92vw, 1400px); max-height: 84vh; border-radius: 12px; box-shadow: var(--shadow); }
.finder-preview figcaption { font-size: 12px; color: var(--muted); }
.finder-preview .finder-ib { width: 40px; height: 40px; margin: auto; color: var(--text); background: rgb(var(--ink) / 8%); }
.finder-preview .close { position: absolute; top: 16px; right: 16px; font-size: 16px; }
.finder-dialog { max-width: min(96vw, 1100px); }
.finder-modal { width: min(94vw, 1000px); }
.finder-host .finder-body { max-height: 56vh; }
@media (max-width: 640px) {
    .finder-search { width: 110px; }
    .finder-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .finder-body { padding: 8px; max-height: none; }
    .finder-preview { grid-template-columns: 40px 1fr 40px; }
}

/* Le style du texte des reels (Edits) dans la fiche d'un post : un aperçu
   9:16 où le texte se glisse au doigt, les réglages à côté. */
.edits-style { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; margin-top: 12px; align-items: start; }
@media (max-width: 640px) { .edits-style { grid-template-columns: minmax(0, 1fr); } .edits-preview-col { max-width: 260px; margin: 0 auto; } }
.edits-preview { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, var(--panel-raised), var(--panel)); border: 1px solid var(--border); user-select: none; }
.edits-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.edits-safe { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, rgb(var(--ink) / 6%) 0 6px, transparent 6px 12px); pointer-events: none; }
.edits-safe.top { top: 0; height: 13%; } .edits-safe.bottom { bottom: 0; height: 22%; }
.edits-text { position: absolute; max-width: 92%; padding: 2px 4px; line-height: 1.2; text-align: center; white-space: pre-wrap; word-break: break-word; cursor: grab; touch-action: none; border: 1px dashed rgb(255 214 0 / 70%); border-radius: 4px; }
.edits-text:active { cursor: grabbing; }
.edits-swatches { display: flex; flex-wrap: wrap; gap: 3px; max-width: 128px; }
.edits-swatch { width: 14px; height: 14px; padding: 0; border: 1px solid rgb(255 255 255 / 30%); border-radius: 3px; cursor: pointer; }
.edits-swatch:hover { transform: scale(1.25); }

/* Téléphone : rien ne doit élargir la page — un élément trop large est
   rogné, pas la page étirée (sinon l'en-tête paraît plus étroit que le
   reste et tout défile de côté). Les en-têtes de page s'empilent. */
@media (max-width: 640px) {
    html, body { overflow-x: clip; }
    .shell, .topbar-inner { width: calc(100% - 20px); }
    .shell { padding-top: 16px; }
    .section-heading, .run-heading { flex-wrap: wrap; align-items: start; }
    .section-heading > * { min-width: 0; }
    .finder-bar { flex-wrap: wrap; row-gap: 6px; }
    .finder-crumbs { flex-basis: 100%; order: -1; }
    .finder-search { flex: 1; width: auto; min-width: 0; }
    .studio-head { flex-direction: column; align-items: stretch; gap: 10px; }
    .studio-head .studio-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .studio-head .studio-row .chips { flex-wrap: nowrap; }
    .studio-head .studio-row .chips > * { flex: none; white-space: nowrap; }
    .studio-head .inline-actions { justify-content: flex-end; }
    .studio-head #launch { flex: 1; }
    .pack-bar { padding: 8px 10px; }
    .form-row, .schedule-fields, .registration-form { grid-template-columns: minmax(0, 1fr); }
    table { display: block; max-width: 100%; overflow-x: auto; }
    pre, code { max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
    img, video, svg, iframe { max-width: 100%; }
}

/* ------------------------------------------------------------------------
   Mouvement. Tout ce qui se survole répond : un léger soulèvement, la
   bordure qui s'allume, un reflet qui glisse sur ce qui est mis en avant,
   l'icône qui bondit. Même famille de gestes que les cartes de Créer.
   ------------------------------------------------------------------------ */
.button, .icon-button { transition: transform .25s var(--spring), background .2s, border-color .2s, box-shadow .25s, filter .2s, color .2s; }
/* Pas de déplacement sur les petits contrôles : un bouton qui monte sous le
   curseur en sort, y revient, et clignote. Ils s'éclairent ; leur icône bouge. */
.button:hover, .icon-button:hover { filter: brightness(1.08); }
.button:active, .icon-button:active { transform: translateY(0) scale(.96); transition-duration: .08s; }
.button.secondary:hover, .icon-button:hover { border-color: rgb(47 107 255 / 45%); box-shadow: 0 10px 22px -12px rgb(47 107 255 / 55%); }
.button.ghost:hover { box-shadow: 0 8px 18px -12px rgb(0 0 0 / 60%); }
.button.danger:hover { box-shadow: 0 10px 22px -12px rgb(229 72 77 / 55%); }
.button.primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; background: linear-gradient(105deg, transparent, rgb(255 255 255 / 38%), transparent); transform: skewX(-18deg); transition: left .55s ease; pointer-events: none; }
.button.primary:hover::after { left: 135%; }
.button.primary:hover { filter: brightness(1.06); }
.button svg, .icon-button svg { transition: transform .4s var(--spring); }
.button:hover svg, .icon-button:hover svg { transform: translateY(-1px) scale(1.18) rotate(-8deg); }
.button:hover [aria-hidden] { display: inline-block; animation: nudge .5s var(--spring); }
@keyframes nudge { 40% { transform: translateX(4px); } }

/* Navigation : pilules, onglets des téléphones, rail et dock. */
.pill { transition: color .2s var(--ease), background .25s var(--ease), transform .3s var(--spring), box-shadow .3s; }
.pill:hover { box-shadow: 0 6px 16px -10px rgb(47 107 255 / 60%); }
.phone-tabs a { transition: color .2s, background .2s, transform .3s var(--spring); }
.phone-tabs a:hover { background: rgb(var(--ink) / 5%); }
.rail-btn, .dock-btn { transition: transform .3s var(--spring), background .2s, color .2s, box-shadow .3s; }
.rail-btn:hover, .dock-btn:hover { box-shadow: 0 0 0 1px rgb(47 107 255 / 35%), 0 8px 18px -10px rgb(47 107 255 / 70%); }
.rail-btn svg, .dock-btn svg, .finder-ib svg { transition: transform .4s var(--spring); }
.rail-btn:hover svg, .dock-btn:hover svg { transform: scale(1.22) rotate(-8deg); }
.finder-ib { transition: background .15s, color .15s, transform .3s var(--spring); }
.finder-ib:hover:not(:disabled) svg { transform: scale(1.2) rotate(-6deg); }
.ms-btn img, .ms-btn .ms-initial { transition: transform .4s var(--spring); } .ms-btn:hover img, .ms-btn:hover .ms-initial { transform: scale(1.12) rotate(-4deg); }

/* Cartes et tuiles : téléphones, chiffres, posts, raccourcis, dossiers, étapes. */
.device-card, .fc, .kpi, .post-card, .shortcut, .onb-phone, .onb-tree div, .model-card, .week-legend-item, .cell, .flow-option, .checkbox-option { transition: transform .3s var(--spring), border-color .25s, background .25s, box-shadow .3s; }
.device-card, .fc, .kpi, .post-card { position: relative; overflow: hidden; }
.device-card::after, .fc::after, .kpi::after, .post-card::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(105deg, transparent, rgb(var(--ink) / 6%), transparent); transform: skewX(-18deg); transition: left .6s ease; pointer-events: none; }
.device-card:hover::after, .fc:hover::after, .kpi:hover::after, .post-card:hover::after { left: 120%; }
.device-card:hover { transform: translateY(-4px); border-color: rgb(47 107 255 / 50%); box-shadow: 0 18px 40px -20px rgb(47 107 255 / 55%); }
.device-card img, .device-card .device-shot { transition: transform .5s var(--spring); } .device-card:hover img { transform: scale(1.04); }
.kpi:hover { transform: translateY(-3px); border-color: rgb(47 107 255 / 40%); box-shadow: 0 14px 30px -18px rgb(47 107 255 / 50%); }
.kpi .v { display: inline-block; transition: transform .4s var(--spring); } .kpi:hover .v { transform: scale(1.06); transform-origin: left center; }
.post-card:hover, .shortcut:hover, .onb-tree div:hover { transform: translateY(-3px); border-color: rgb(47 107 255 / 45%); box-shadow: 0 14px 30px -18px rgb(47 107 255 / 50%); }
.post-chip, .week-post { transition: transform .25s var(--spring), background .2s, box-shadow .25s, border-color .2s; }
.post-chip:hover, .week-post:hover { box-shadow: 0 0 0 1px rgb(47 107 255 / 40%), 0 8px 18px -10px rgb(0 0 0 / 70%); }
.post-chip img, .week-post img { transition: transform .4s var(--spring); } .post-chip:hover img, .week-post:hover img { transform: scale(1.12); }
.cell:hover { background: rgb(var(--ink) / 2.5%); } .cell-add { transition: transform .3s var(--spring), opacity .2s, background .2s; } .cell-add:hover { transform: rotate(90deg); }
.finder-item { transition: background .15s, border-color .15s, transform .3s var(--spring); }
.finder-item:hover { border-color: rgb(47 107 255 / 30%); }
/* Explorateur (30/09/2026, « ombres mal faites, clignotements ») : un contour discret au survol, pas d'agrandissement ;
   les vignettes arrivent en fondu sur un fond neutre ; le dossier qui se charge s'estompe au lieu de se vider. */
.finder-thumb { transition: box-shadow .15s; } .finder-item.file:hover .finder-thumb { box-shadow: 0 0 0 1px rgb(var(--ink) / 14%); }
.finder-thumb img { opacity: 0; transition: opacity .18s ease, filter .2s; } .finder-thumb img.ok { opacity: 1; }
.finder-item.file .finder-thumb { background: rgb(var(--ink) / 4%); }
.finder-body > * { transition: opacity .15s ease; } .finder-body.loading > * { opacity: .45; pointer-events: none; }
@keyframes folder-wiggle { 30% { transform: rotate(-6deg) scale(1.08); } 60% { transform: rotate(4deg) scale(1.08); } }
.onb-phone:hover { border-color: rgb(47 107 255 / 45%); } .onb-phone .ic { display: inline-block; transition: transform .4s var(--spring); } .onb-phone:hover .ic { transform: scale(1.2) rotate(-8deg); }
.flow-option:hover, .checkbox-option:hover { border-color: rgb(47 107 255 / 40%); }
.segmented label span { transition: transform .3s var(--spring), background .2s, color .2s; }

/* Champs : un halo quand on y est. Lignes de listes : un pas de côté. */
input, textarea, select { transition: border-color .2s, box-shadow .25s, background .2s; }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px rgb(47 107 255 / 20%); }
.switch .switch-track { transition: background .2s, box-shadow .25s; } .switch:hover .switch-track { box-shadow: 0 0 0 4px rgb(47 107 255 / 15%); }
.up-row, .list-row, .run-row, .task-row, tr[data-post], .facts div { transition: background .2s, transform .25s var(--ease); }
.up-row:hover, .list-row:hover, .run-row:hover, .task-row:hover, tr[data-post]:hover { background: rgb(var(--ink) / 3.5%); }
.facts div:hover { background: rgb(var(--ink) / 2.5%); }
.up-row img, .up-noimg { transition: transform .4s var(--spring); } .up-row:hover img { transform: scale(1.1); }

@media (prefers-reduced-motion: reduce) {
    .button, .icon-button, .pill, .phone-tabs a, .rail-btn, .dock-btn, .device-card, .kpi, .post-card, .shortcut, .post-chip, .week-post, .finder-item, .finder-thumb, .onb-phone, .model-switch { transition: none !important; animation: none !important; }
    .button:hover, .icon-button:hover, .pill:hover, .device-card:hover, .kpi:hover, .post-card:hover, .post-chip:hover, .week-post:hover, .finder-item:hover, .rail-btn:hover, .dock-btn:hover { transform: none; }
}

/* Le parc : le choix de la flotte, deux cartes. */
/* Le parc : la flotte en un sélecteur, les téléphones en cartes — tout d'un coup d'œil. */
.fleet-head { align-items: center; gap: 16px; margin-bottom: 14px; }
.fleet-head h1 { margin: 0; }
.fleet-seg { display: inline-flex; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); }
.fleet-seg-item { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; color: var(--muted); font-size: 13px; font-weight: 700; text-decoration: none; transition: color .2s, background .25s, box-shadow .3s; }
.fleet-seg-item b { padding: 1px 7px; border-radius: 999px; background: rgb(var(--ink) / 7%); font-size: 11px; font-weight: 800; color: var(--dim); }
.fleet-seg-item:hover { color: var(--text); }
.fleet-seg-item.on { color: #fff; background: linear-gradient(135deg, #2f6bff, #2f6bff); box-shadow: 0 8px 20px -10px rgb(47 107 255 / 70%); }
.fleet-seg-item.on b { background: rgb(255 255 255 / 22%); color: #fff; }
.device-list { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.grid-toolbar { flex-wrap: wrap; margin-bottom: 2px; }
.count-badge.busy .dot { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.count-badge.warn .dot { background: var(--warning, #f5b74e); box-shadow: 0 0 10px var(--warning, #f5b74e); }
.fc { position: relative; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); overflow: hidden; transition: transform .3s var(--spring), border-color .25s, box-shadow .3s; animation: rise .4s var(--ease) both; }
.fc:hover { transform: translateY(-4px); border-color: rgb(47 107 255 / 50%); box-shadow: 0 18px 40px -20px rgb(47 107 255 / 55%); }
.fc-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.fc-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fc-screen { position: relative; aspect-ratio: 375 / 812; max-height: 230px; margin: 10px 10px 0; border-radius: 12px; background: var(--bg-deep); border: 1px solid var(--border-strong); overflow: hidden; display: grid; place-items: center; }
.fc-screen .device-preview { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s var(--spring); }
.fc:hover .fc-screen .device-preview { transform: scale(1.03); }
.fc-screen .device-icon { opacity: .35; }
.fc-state { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 16px); padding: 4px 9px 4px 7px; border-radius: 999px; background: rgb(13 13 15 / 78%); backdrop-filter: blur(8px); color: var(--text); font-size: 11px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-state i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px var(--success); }
.fc.off .fc-state i { background: var(--danger); box-shadow: none; }
.fc.off .fc-screen { background: var(--bg); }
.fc.busy .fc-state i { background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: fc-pulse 1.4s ease-in-out infinite; }
.fc.warn .fc-state i { background: var(--warning, #f5b74e); box-shadow: 0 0 10px var(--warning, #f5b74e); }
.fc.wait .fc-state i { background: var(--dim); box-shadow: none; animation: fc-pulse 1.4s ease-in-out infinite; }
.fc.warn { border-color: rgb(245 183 78 / 35%); } .fc.off { opacity: .78; }
@keyframes fc-pulse { 50% { opacity: .35; } }
.fc-body { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 8px; }
.fc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fc-head h2 { margin: 0; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-head small { flex: none; color: var(--dim); font-size: 11px; font-weight: 600; }
.fc-who { display: flex; flex-direction: column; gap: 1px; margin: 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.fc-who b { color: #2f6bff; font-weight: 700; }
.fc-lines { display: flex; flex-direction: column; gap: 3px; }
.fc-line { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-line i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--dim); }
.fc-line.next i { background: #2f6bff; } .fc-line.ok i { background: var(--success); } .fc-line.ko i { background: var(--danger); } .fc-line.ko { color: var(--danger); } .fc-line.dim { color: var(--dim); }
.fc-actions { position: relative; z-index: 2; display: flex; justify-content: flex-end; padding: 0 8px 8px; opacity: 0; transition: opacity .2s; }
.fc:hover .fc-actions, .fc:focus-within .fc-actions { opacity: 1; }
.fc-actions .button { min-height: 26px; padding: 0 9px; font-size: 11.5px; }
@media (hover: none) { .fc-actions { opacity: 1; } }
@media (max-width: 640px) { .device-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .fc-screen { max-height: 170px; } .fleet-head { flex-direction: column; align-items: flex-start; } }
.fleet-switch { margin-left: 4px; min-height: 32px; padding: 0 11px 0 9px; font-size: 12.5px; letter-spacing: .02em; }
.fleet-switch small { margin-left: 4px; color: var(--dim); font-size: 12px; transition: color .2s, transform .3s var(--spring); display: inline-block; }
.fleet-switch:hover small { color: var(--text); transform: rotate(180deg); }

/* Le deck refait (21/09/2026) : Journée (direct + jour + plannings + historique), Abeille en sous-menus. */
.fold { border: 1px solid var(--border); border-radius: 14px; background: rgb(var(--ink) / 3%); }
.fold > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; gap: 8px 12px; align-items: center; padding: 11px 14px; cursor: pointer; list-style: none; user-select: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold-title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fold-title svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
.fold-meta { color: var(--dim); font-size: 11.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fold[open] .lot-chevron { transform: rotate(-135deg); }
.fold-body { padding: 0 12px 12px; }
.panel-fold { padding: 0; }
.panel-fold > summary { padding: 14px 16px; }
.live-fold { margin: 0 0 10px; }
.live-fold .run-panel { padding: 0 12px 12px; }
.live-fold .run-panel pre { max-height: 220px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex: none; }
.live-dot.on { background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: fc-pulse 1.4s ease-in-out infinite; }
.live-dot.on.queued { background: var(--warning, #f5b74e); box-shadow: 0 0 10px var(--warning, #f5b74e); }
/* Les actions d'une ligne (voir plus bas : repliées derrière « ⋯ »). */
.todo-actions { gap: 4px; flex-wrap: wrap; }
.todo-actions .button.small { min-height: 26px; padding: 0 9px; font-size: 11.5px; }
/* Sous-onglets */
.subtabs { display: flex; gap: 2px; margin-top: 12px; padding: 3px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-deep); }
.subtab { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: color .2s, background .25s; }
.subtab:hover { color: var(--text); }
.subtab[aria-selected="true"] { color: var(--text); background: var(--panel-raised); box-shadow: 0 1px 0 rgb(var(--ink) / 8%) inset; }
.subtab-meta { padding: 1px 6px; border-radius: 999px; background: rgb(var(--ink) / 8%); font-size: 10.5px; font-weight: 800; color: var(--dim); }
.subtab-meta:empty { display: none; }
.subpanel { display: none; }
.subpanel.active { display: block; animation: rise .3s var(--ease) both; }
.companion-head .hint { margin-bottom: 0; }
.shortcut-board { display: flex; flex-direction: column; gap: 10px; }
.shortcut-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.shortcut-chips .chip { background: transparent; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.shortcut-chips .chip:hover { color: var(--text); border-color: var(--border-strong); }
.shortcut-chips .chip.on { color: #fff; background: rgb(47 107 255 / 22%); border-color: rgb(47 107 255 / 55%); }
/* Les actions d'une ligne de la journée n'apparaissent qu'au survol (toujours visibles au doigt). */

/* Les barres « tâche en cours » et « état du flux » flottent au-dessus du dock dans tous les formats :
   en flux normal, leur apparition (2 s à chaque geste) faisait descendre le téléphone et tout le volet — « des sauts » (21/09/2026). */
.stage .running-bar, .stage .stream-status { position: absolute; left: 0; right: 0; bottom: 66px; z-index: 6; margin: 0; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgb(0 0 0 / 35%); }
.stage .running-bar { background: rgb(30 26 12 / 78%); }
.stage .stream-status { background: rgb(9 9 11 / 82%); }
.stage .running-bar:not([hidden]) ~ .stream-status:not([hidden]) { bottom: 118px; }
/* Les actions d'une ligne : repliées derrière « ⋯ » ; au survol elles se montrent d'elles-mêmes. */
.todo-item.has-actions { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.todo-more { width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--dim); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.todo-more:hover { color: var(--text); border-color: var(--border); }
.todo-item .todo-actions { display: none; grid-column: 2 / -1; justify-content: flex-start; padding-top: 2px; }
.todo-item.open .todo-actions { display: inline-flex; }
.todo-item.open .todo-more { color: var(--text); background: rgb(var(--ink) / 6%); }
/* Les actions d’une ligne ne s’ouvrent plus au survol (22/09/2026) : seulement par « ⋯ ». */

/* La barre « tâche en cours » (22/09/2026) : une pastille compacte, centrée,
   plutôt qu'un bandeau pleine largeur qui recouvrait le bas de l'écran du
   téléphone. Sur un grand écran, elle se range dans la marge vide à gauche du
   téléphone, sous « Réseaux » : plus rien ne passe devant l'écran. */
.stage .running-bar, .stage .stream-status { left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: min(92%, 420px); border-radius: 999px; padding: 5px 5px 5px 14px; gap: 10px; font-size: 12.5px; white-space: nowrap; }
.stage .stream-status { padding-right: 14px; }
.stage .running-bar #running-text { overflow: hidden; text-overflow: ellipsis; }
.stage .running-bar .spacer { display: none; }
.stage .running-bar .button { border-radius: 999px; }
/* La tâche en cours : une pastille centrée dans la barre du haut du cockpit,
   entre « Réseaux » et « Actions » — la carte en haut à gauche (≥ 1440 px)
   tombait sur le rail des apps depuis que la liste des téléphones est là (27/09/2026). */
.stage .running-bar { top: 6px; bottom: auto; max-width: min(46%, 380px); z-index: 12; }
.stage .running-bar:not([hidden]) ~ .stream-status:not([hidden]) { top: 52px; bottom: auto; }
@media (max-width: 760px) { .stage .running-bar { top: auto; bottom: 66px; max-width: min(92%, 420px); } .stage .running-bar:not([hidden]) ~ .stream-status:not([hidden]) { top: auto; bottom: 118px; } }
}

/* L'iPhone dort : un écran noir sans explication faisait croire à une panne
   (23/09/2026). Un bandeau au milieu de l'écran, qui le réveille d'un clic. */
.phone-screen .screen-asleep { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid rgb(var(--ink) / 14%); border-radius: 999px; background: rgb(20 20 23 / 82%); color: var(--muted); font: inherit; font-size: 12.5px; white-space: nowrap; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.phone-screen .screen-asleep b { color: var(--text); font-weight: 700; }
.phone-screen .screen-asleep .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.phone-screen .screen-asleep[hidden] { display: none; }

/* La Journée, compacte (23/09/2026 — « trop illisible ») : une ligne par tâche,
   l'heure en colonne, l'état en pastille de couleur, les pauses repliées. */
.todo-list { gap: 4px; }
.todo-item { gap: 10px; padding: 7px 10px; border-radius: 10px; min-height: 38px; }
.todo-item.has-actions { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.todo-time { width: 38px; color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.todo-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.todo-copy small { font-size: 11.5px; }
.todo-state { padding: 3px 8px; border-radius: 999px; font-size: 10px; letter-spacing: .04em; background: rgb(var(--ink) / 5%); }
.todo-item.done .todo-state { background: rgb(48 164 108 / 12%); }
.todo-item.failed .todo-state { background: rgb(229 72 77 / 14%); }
.todo-item.running .todo-state { background: rgb(255 197 61 / 14%); }
.todo-item.planned .todo-state { color: #2f6bff; background: rgb(47 107 255 / 12%); }
.todo-item.skipped, .todo-fold .todo-item { opacity: .75; }
.todo-more { width: 24px; height: 24px; font-size: 14px; }
.todo-fold { border: 1px dashed var(--border); border-radius: 10px; padding: 0 6px; }
.todo-fold > summary { list-style: none; cursor: pointer; padding: 8px 4px; color: var(--muted); font-size: 12px; font-weight: 700; }
.todo-fold > summary::-webkit-details-marker { display: none; }
.todo-fold > summary::before { content: "▸ "; color: var(--dim); }
.todo-fold[open] > summary::before { content: "▾ "; }
.todo-fold[open] { padding-bottom: 6px; }
.todo-fold .todo-item + .todo-item { margin-top: 4px; }

/* Logos des réseaux dans la Journée. */
.todo-title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.todo-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-brands { display: inline-flex; gap: 3px; flex: none; }
.brand-badge { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: #fff; }
.brand-badge svg { width: 12px; height: 12px; }
.brand-instagram, .brand-ig-reel, .brand-ig-story, .brand-ig-post { background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7); }
.brand-facebook { background: #1877f2; }
.brand-threads, .brand-x { background: #000; border: 1px solid rgb(255 255 255 / 18%); }
.brand-youtube { background: #ff0033; }
.brand-tiktok { background: #111; box-shadow: inset 1px 0 0 #25f4ee, inset -1px 0 0 #fe2c55; }
.brand-snapchat { background: #fffc00; color: #111; }
.todo-item.done .todo-label { color: var(--muted); text-decoration: line-through; text-decoration-color: rgb(255 255 255 / 25%); }
.todo-item.done .todo-title { text-decoration: none; }
.todo-item.done .brand-badge { opacity: .55; }

/* Les actions d'une tâche, en icônes sur la ligne. */
.todo-item.has-actions { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.todo-icons { display: inline-flex; gap: 4px; }
.todo-icon { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: rgb(var(--ink) / 3%); color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.todo-icon svg { width: 14px; height: 14px; }
.todo-icon:hover { color: var(--text); border-color: var(--border-strong); background: rgb(var(--ink) / 7%); }
.todo-icon.danger:hover { color: var(--danger); border-color: rgb(229 72 77 / 45%); background: rgb(229 72 77 / 10%); }

/* « Plannings récurrents » retiré du cockpit (23/09/2026). */
#schedules-fold[hidden] { display: none !important; }

/* « + Photos » : le petit menu à côté du bouton du rail (bibliothèque ou Mac). */
.rail-pop-anchor { position: relative; }
.rail-pop { position: absolute; z-index: 60; top: 50%; right: calc(100% + 12px); transform: translateY(-50%); min-width: 250px; display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--border-strong, var(--border)); border-radius: 12px; background: var(--panel, var(--panel)); box-shadow: 0 12px 32px rgb(0 0 0 / 45%); }
.rail-pop button { padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.rail-pop button:hover { background: rgb(var(--ink) / 6%); }
.rail-pop-anchor:has(.rail-pop:not([hidden])) .rail-btn span { opacity: 0; }
@media (max-width: 640px) { .rail-pop { top: auto; bottom: 0; transform: none; min-width: 210px; } }

/* =====================================================================
   Charte « OnlyFlow bis » — composants
   Relevé onlyflow.io (24/09/2026), fond et cartes passés en « noir profond » :
   fond var(--bg), cartes var(--panel) bordées de var(--panel-raised) (14 px), textes var(--text) /
   var(--text-2) / var(--muted), violet #2f6bff (survol #2459e0), Montserrat 400-700,
   titres 600 serrés (-0,035 em), boutons 11 px, pastilles d'état sur fond
   teinté, ombres seulement sur ce qui flotte (menus, toasts, fenêtres).
   ===================================================================== */
body { font-family: Montserrat, "Montserrat Fallback", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; }
h1 { font-weight: 600; letter-spacing: -.035em; }
h2 { font-weight: 600; letter-spacing: -.025em; }
h3 { font-weight: 600; letter-spacing: -.01em; }
p { color: var(--text-2); }
strong, b { font-weight: 600; }
::selection { background: rgb(47 107 255 / 45%); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
* { scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--panel-raised); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: padding-box; }

/* La barre du haut : logo, onglets au centre, compte à droite. */
.topbar { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--border); }
.topbar-inner { padding: 12px 0; }
.brand-mark { filter: none; }
.brand-name { font-family: 'Outfit', var(--font, sans-serif); font-weight: 600; font-size: 19px; letter-spacing: -.01em; }
.pill-nav { gap: 2px; padding: 0; border: 0; background: transparent; }
.pill { min-height: 36px; padding: 0 13px; border-radius: 9px; color: var(--text-2); font-size: 14px; font-weight: 600; }
.pill:hover { color: var(--text); background: rgb(var(--ink) / 4%); }
.pill.current { background: var(--panel-raised); color: var(--text); box-shadow: none; }
.icon-button.bell { width: 36px; min-height: 36px; border-radius: var(--radius-sm); }
.icon-button.bell::after { background: var(--accent); box-shadow: none; }
.device-switch, .ms-btn { min-height: 38px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; font-weight: 600; box-shadow: none; }
.device-switch:hover, .ms-btn:hover, .ms-btn[aria-expanded="true"] { border-color: var(--border-strong); background: rgb(var(--ink) / 3%); box-shadow: none; }
.ms-btn img, .ms-item img, .ms-initial { border-radius: 7px; }
.ms-menu, .menu-list, .finder-menu, .rail-pop { border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-elevated); box-shadow: var(--shadow-float); }
.menu-item:hover, .ms-item:hover { background: var(--panel-raised); }

/* Pages. */
.shell { padding-top: 24px; }
.page-header h1 { font-size: 26px; }
.eyebrow { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .12em; }
.hint { color: var(--muted); }
label { color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; }

/* Cartes : à plat, bordure fine, pas de verre ni d'ombre. */
.panel, .card, .registration-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.panel::before, .card::before { content: none; }

/* Boutons : violet plein, ou contour fin. */
.button, .icon-button { min-height: 38px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.button:active, .icon-button:active { transform: none; filter: brightness(.95); }
.button.primary { background: var(--accent); color: #fff; box-shadow: none; }
.button.primary:hover { background: var(--accent-hover); animation: none; box-shadow: none; }
.button.primary:disabled, .button:disabled { opacity: .45; cursor: default; }
.button.secondary, .icon-button { border-color: var(--border); background: transparent; color: var(--text); }
.button.secondary:hover, .icon-button:hover { border-color: var(--border-strong); background: rgb(var(--ink) / 3%); }
.button.danger { background: var(--danger-bg); border-color: transparent; color: var(--danger); }
.button.danger:hover { background: rgb(254 10 59 / 27%); }
.button.ghost { color: var(--text-2); }
.button.ghost:hover { color: var(--text); background: var(--panel-raised); }
.button.small, .icon-button.small { min-height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: 9px; }
.icon-button.active { border-color: transparent; background: var(--accent-soft); color: var(--accent-2); }

/* Champs. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-deep); color: var(--text); font-size: 14px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(47 107 255 / 20%); }
::placeholder { color: var(--dim); }
.switch-track { background: var(--panel-raised); border-color: var(--border-strong); }
.switch input:checked + .switch-track { background: var(--accent); }

/* Choix segmentés : des pavés gris, le choix en violet plein (Story / Post / Short form). */
.segmented { padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-deep); }
.segmented span { border-radius: 8px; color: var(--text-2); font-weight: 600; }
.segmented input:checked + span { background: var(--accent); color: #fff; box-shadow: none; }

/* États : pastilles sur fond teinté, sans contour. */
.status { border: 0; border-radius: 8px; background: var(--panel-raised); color: var(--text-2); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 4px 10px; }
.status.ready, .status.succeeded, .status.active { background: var(--success-bg); color: var(--success); }
.status.running, .status.queued, .status.checking { background: var(--accent-soft); color: var(--accent-2); }
.status.running .dot, .status.queued .dot { background: var(--accent-2); animation: none; }
.status.paused { background: var(--warning-bg); color: var(--warning); }
.status.error, .status.failed, .status.stopped, .status.cancelled { background: var(--danger-bg); color: var(--danger); }
.status.ready .dot, .status.succeeded .dot, .status.active .dot, .live-dot.on { background: var(--success-solid); animation: none; }
.count-badge { border: 0; border-radius: 8px; background: var(--accent-soft); color: var(--accent-2); font-weight: 600; }
.count-badge .dot { background: var(--accent-2); box-shadow: none; }
.count-badge .dot.off { background: var(--danger); }
.chip { border-radius: 8px; font-weight: 600; }
.handle-chip { border-radius: 8px; background: var(--accent-soft); color: var(--accent-2); font-weight: 600; }
.state { border-radius: 7px; font-weight: 600; letter-spacing: 0; text-transform: none; }

/* Chiffres : libellé discret, valeur en 600 (Analytics d'OnlyFlow). */
.kpi { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.kpi .k { color: var(--text-2); font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.kpi .v { font-weight: 600; letter-spacing: -.02em; }
.kpi .s { color: var(--muted); }
.delta { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 7px; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.delta.up { background: var(--success-bg); color: var(--success); } .delta.down { background: var(--danger-bg); color: var(--danger); }

/* Ce qui flotte : fenêtres, menus, toasts. */
dialog::backdrop { background: rgb(0 0 0 / 62%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal { border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-float); }
.toast { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-elevated); backdrop-filter: none; box-shadow: var(--shadow-float); font-weight: 500; }
.toast .dot { background: var(--accent-2); }

/* Cockpit : onglets de téléphones et pupitre au même dessin que la barre. */
.phone-tabs { padding: 3px; gap: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); }
.phone-tabs a { border-radius: 8px; color: var(--text-2); font-weight: 600; }
.phone-tabs a.current { background: var(--panel-raised); color: var(--text); }
.deck-tabs { border-radius: var(--radius); background: var(--panel); backdrop-filter: none; }
.deck-tab { border-radius: 9px; color: var(--text-2); font-weight: 600; }
.deck-tab[aria-selected="true"] { background: var(--panel-raised); color: var(--text); box-shadow: none; }

/* Cockpit à la « Monitoring » d'OnlyFlow ------------------------------ */
.phone-list:empty { display: none; }
.pdot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex: none; transition: background .3s; }
.pdot.on { background: var(--success-solid); }
.pdot.run { background: #2f6bff; box-shadow: 0 0 0 3px rgb(177 140 255 / 18%); }
.pdot.remote { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
@media (min-width: 1101px) {
    .cockpit { grid-template-columns: 220px minmax(0, 1fr) minmax(360px, 460px); gap: 18px; }
    .cockpit:has(.phone-list:empty) { grid-template-columns: minmax(0, 1fr) minmax(380px, 500px); }
    .phone-list { height: 100%; min-height: 0; overflow: auto; scrollbar-width: thin; }
    .phone-list .phone-tabs-row { display: block; }
    .phone-list .phone-tabs { display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
    .phone-list .phone-tabs::before { content: attr(data-title); display: block; margin: -6px -6px 6px; padding: 13px 16px; border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 600; color: var(--text); }
    .phone-list .phone-tabs a { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 0 12px; border-radius: 9px; color: var(--text); font-size: 14px; font-weight: 500; }
    .phone-list .phone-tabs a:hover { background: rgb(var(--ink) / 3%); }
    .phone-list .phone-tabs a.current { background: var(--panel-raised); }
    .phone-list .phone-tabs-sep { display: block; margin: 8px 4px 2px; padding: 10px 8px 4px; border-top: 1px solid var(--border); color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
    .phone-list .phone-tabs-sep::before { content: attr(data-label); }
    /* Le premier intitulé (« iPhone ») : en tête de liste, sans trait au-dessus. */
    .phone-list .phone-tabs-sep.first { display: block; margin-top: 0; padding-top: 2px; border-top: 0; }
}
@media (max-width: 1100px) {
    .phone-list { order: -1; overflow-x: auto; scrollbar-width: none; }
    .phone-list .phone-tabs-row { display: flex; justify-content: center; }
    .phone-list .phone-tabs { flex-wrap: nowrap; }
    .phone-list .phone-tabs a { white-space: nowrap; }
    .phone-list .phone-tabs-sep { width: 1px; align-self: stretch; margin: 4px 2px; background: var(--border); }
    .phone-list .phone-tabs-sep.first { display: none; }
}
/* Les rails : des panneaux, et les apps à leurs vraies couleurs. */
.rail { padding: 6px; gap: 4px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); box-shadow: none; }
.rail hr { width: 20px; margin: 2px auto; background: var(--border); }
.rail-btn { width: 40px; height: 40px; border-radius: var(--radius-sm); color: var(--text-2); }
.rail-btn:hover { color: var(--text); background: var(--panel-raised); }
.rail-btn:active { transform: none; filter: brightness(.9); }
.rail-btn span { border-color: var(--border); background: var(--panel-elevated); box-shadow: var(--shadow); }
.rail-apps .rail-btn[data-app] { color: #fff; background: var(--panel-raised); }
.rail-apps .rail-btn[data-app] svg { width: 21px; height: 21px; }
.rail-apps .rail-btn[data-app]:hover { filter: brightness(1.12); }
.rail-apps .rail-btn[data-app="instagram"] { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.rail-apps .rail-btn[data-app="threads"], .rail-apps .rail-btn[data-app="x"], .rail-apps .rail-btn[data-app="tiktok"] { background: #000; box-shadow: inset 0 0 0 1px var(--border-strong); }
.rail-apps .rail-btn[data-app="facebook"] { background: #0866ff; }
.rail-apps .rail-btn[data-app="snapchat"] { background: #fffc00; color: #111; }
.rail-apps .rail-btn[data-app="telegram"] { background: #229ed9; }
.rail-apps .rail-btn[data-app="discord"] { background: #5865f2; }
.rail-apps .rail-btn[data-app="photos"] { background: conic-gradient(from 20deg, #fbbc05, #ea4335, #c837ab, #4285f4, #34a853, #fbbc05); }
.rail-apps .rail-btn[data-app="settings"] { background: var(--dim); }
@media (max-width: 640px) { .rail-btn { width: 44px; height: auto; } .rail-apps .rail-btn[data-app] { height: 44px; } .rail-apps .rail-btn[data-app] span { display: none; } }
/* L'écran : à plat dans une carte, sans châssis brillant. */
.phone-frame { padding: 8px; border: 1px solid var(--border); background: var(--panel); box-shadow: none; }
.phone-frame::after { content: none; }
.phone-frame.live { box-shadow: none; border-color: var(--border-strong); }
.dock { border-radius: var(--radius); background: var(--panel); box-shadow: none; }
.dock-btn:hover { background: var(--panel-raised); }
/* La Journée : une liste de tâches à la « Scheduled » d'OnlyFlow. */
.todo-item { background: transparent; border-color: var(--border); }
.todo-item:hover { background: rgb(var(--ink) / 2%); }
.todo-title { font-weight: 600; }
.todo-state { padding: 3px 8px; border-radius: 7px; background: var(--panel-raised); color: var(--text-2); font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.todo-state::first-letter { text-transform: uppercase; }
.todo-item.done .todo-state { background: var(--success-bg); color: var(--success); }
.todo-item.failed .todo-state { background: var(--danger-bg); color: var(--danger); }
.todo-item.running .todo-state { background: var(--accent-soft); color: var(--accent-2); }
.todo-item.planned .todo-state, .todo-item.skipped .todo-state { background: var(--panel-raised); color: var(--text-2); }
.todo-item.skipped .todo-state { background: var(--warning-bg); color: var(--warning); }
.todo-group, .ms-head, legend, .info-cell .k, .action-card .platform, .shortcut .app { font-weight: 600; color: var(--muted); }
.fleet-switch, .device-switch { white-space: nowrap; }
a.hint { text-decoration: none; color: var(--text-2); } a.hint:hover { color: var(--text); }
/* Filtres : le choix en gris neutre (le violet est réservé aux actions). */
body .chip.on { background: var(--panel-raised); border-color: var(--border-strong); color: var(--text); }
body .chip { border-radius: 9px; }
/* Sélecteur de flotte (Parc) : segmenté gris, le choix en var(--panel-raised). */
.fleet-seg { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); padding: 3px; }
.fleet-seg-item { border-radius: 8px; font-weight: 600; color: var(--text-2); }
.fleet-seg-item.on { background: var(--panel-raised); color: var(--text); box-shadow: none; }
.fleet-seg-item.on b { background: var(--accent-soft); color: var(--accent-2); }
.fleet-seg-item b { border-radius: 6px; font-weight: 600; }
/* L'apparition des pages ne laisse pas de transformation derrière elle :
   une transformation (même neutre) sur <main> piège les éléments fixes
   (conversation plein écran du Chat sur téléphone). */
.rise { animation-fill-mode: backwards; }
/* La cloche des alertes (Live alerts d'OnlyFlow). */
.alerts-anchor { position: relative; }
.alerts-bell { position: relative; width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: var(--radius-sm, 10px); }
.alerts-count { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--danger-solid); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); }
.alerts-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 90; width: min(380px, calc(100vw - 24px)); max-height: 70vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-elevated); box-shadow: var(--shadow-float); }
.alerts-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); } .alerts-head b { font-size: 15px; font-weight: 600; } .alerts-head span { color: var(--muted); font-size: 12px; }
.alerts-list { padding: 6px; }
.alert-item { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 10px; border-radius: 9px; color: var(--text); text-decoration: none; }
.alert-item:hover { background: var(--panel-raised); }
.alert-item .dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--warning-solid); } .alert-item.danger .dot { background: var(--danger-solid); } .alert-item.info .dot { background: var(--accent-2); }
.alert-item b { display: block; font-size: 13.5px; font-weight: 600; } .alert-item small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.alert-item time { color: var(--dim); font-size: 11px; white-space: nowrap; margin-top: 2px; }
.alerts-empty { padding: 14px 12px; color: var(--muted); font-size: 13px; }
.icon-button.bell::after { content: none; }
@media (max-width: 640px) { .alerts-pop { position: fixed; top: 60px; left: 12px; right: 12px; width: auto; } }
/* Barre du haut sur téléphone : l'avatar seul pour la modèle, la cloche garde sa place. */
@media (max-width: 640px) {
    .topbar-actions { gap: 6px; }
    .ms-btn .ms-name { display: none; }
    .ms-btn { padding: 0 6px; }
    .topbar-actions > .icon-button.bell:not(.alerts-bell) { display: none; }
    .fleet-switch small { display: none; }
}
/* La cloche : le compteur déborde du bouton (qui coupait tout ce qui dépasse). */
.icon-button.alerts-bell { overflow: visible; }
.alerts-count { top: -6px; right: -6px; }
/* Rails du cockpit plus discrets (Monitoring d'OnlyFlow) : pastilles de 32 px. */
.rail { padding: 5px; gap: 5px; border-radius: 12px; }
.rail-btn { width: 32px; height: 32px; border-radius: 8px; }
.rail-btn svg { width: 16px; height: 16px; }
.rail-apps .rail-btn[data-app] svg { width: 17px; height: 17px; }
.rail hr { width: 16px; }
.side-btn:hover { background: var(--accent); }
@media (max-width: 640px) { .rail-btn { width: 38px; } .rail-apps .rail-btn[data-app] { height: 38px; } }
/* Le vrai logo Instagram : le dégradé officiel (jaune-orangé en bas à gauche, rose, violet-bleu en haut à droite). */
.rail-apps .rail-btn[data-app="instagram"] {
    background:
        radial-gradient(circle farthest-corner at 28% 100%, #ffe17d 0%, #ffcd69 10%, #fa9137 28%, #eb4141 42%, transparent 82%),
        linear-gradient(135deg, #234bd7 12%, #c33cbe 58%);
}

/* Animations (charte OnlyFlow bis) -------------------------------------- */
/* Changement de page : fondu enchaîné, la barre du haut ne bouge pas. */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
::view-transition-old(root) { animation: vt-out .16s ease both; }
::view-transition-new(root) { animation: vt-in .26s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }
/* Fenêtres : le fond s'assombrit, la fenêtre monte et grandit un peu. */
dialog[open] .modal, dialog[open] > .finder-modal { animation: pop-modal .22s cubic-bezier(.2, .8, .2, 1) both; }
dialog[open]::backdrop { animation: fade-in .2s ease both; }
@keyframes pop-modal { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes fade-in { from { opacity: 0; } }
/* Menus et pop-ups : ils s'ouvrent depuis leur bouton. */
.alerts-pop:not([hidden]), .rail-pop:not([hidden]), .ms-menu:not([hidden]), .pop:not([hidden]), details[open] > .menu-list, .finder-menu:not([hidden]) { animation: pop-in .16s cubic-bezier(.2, .8, .2, 1) both; transform-origin: top right; }
.rail-pop:not([hidden]) { transform-origin: right center; } .pop:not([hidden]) { transform-origin: bottom left; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
/* Un téléphone de l'autre machine, piloté d'ici (Mac ↔ octo-gw). */
.remote-cockpit { grid-template-columns: 220px minmax(0, 1fr) !important; }
.remote-stage { display: flex; flex-direction: column; min-height: 0; height: 100%; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.remote-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.remote-head b { font-size: 15px; font-weight: 600; } .remote-head .spacer { flex: 1; }
.remote-frame { flex: 1; width: 100%; min-height: 70vh; border: 0; background: var(--bg); }
@media (max-width: 1100px) { .remote-cockpit { grid-template-columns: minmax(0, 1fr) !important; } .remote-frame { min-height: 80vh; } .remote-head .hint { display: none; } }
/* Le cockpit affiché dans une autre page : sans barre ni liste, toute la hauteur. */
html.framed .topbar, html.framed .phone-list { display: none !important; }
html.framed .shell.cockpit { height: 100vh; padding-top: 10px; width: calc(100% - 20px); }
html.framed .cockpit { grid-template-columns: minmax(0, 1fr) minmax(340px, 440px) !important; }
@media (max-width: 1100px) { html.framed .cockpit { grid-template-columns: minmax(0, 1fr) !important; } }
/* Onglets du pupitre entre 1 101 et 1 240 px : l'icône reste (le libellé part), jamais un onglet vide. */
@media (max-width: 1240px) and (min-width: 1101px) { .deck-tab svg { display: block; } }

/* Rail des apps : les logos des sites (favicons d'instagram.com, x.com…, 25/09/2026 ;
   TikTok, Photos et Réglages : icônes d'app) — static/dashboard/apps. */
.rail-apps .rail-btn[data-app]:has(img) { background: transparent; box-shadow: none; padding: 0; overflow: visible; }
.rail-apps .rail-btn[data-app] img { display: block; width: 100%; height: 100%; border-radius: 22%; object-fit: contain; pointer-events: none; transition: transform .3s var(--spring); }
.rail-apps .rail-btn[data-app]:hover img { transform: scale(1.08); }
.rail-apps .rail-btn[data-app]:hover { box-shadow: none; filter: none; }
.rail-btn.busy img { animation: blink 1s ease-in-out infinite; }

/* Cloche : croix par notification, « Tout effacer », les vues en retrait. */
.alerts-head { display: flex; align-items: center; gap: 8px; }
.alerts-head #alerts-sub { margin-right: auto; }
.alerts-clear { border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; padding: 4px 6px; border-radius: 7px; }
.alerts-clear:hover { color: var(--text); background: var(--panel-raised); }
.alert-item { position: relative; grid-template-columns: 8px minmax(0, 1fr) auto auto; }
.alert-item.seen b { font-weight: 500; color: var(--text-2); }
.alert-item .alert-x { flex: none; width: 24px; height: 24px; margin-left: 2px; border: 0; border-radius: 7px; background: none; color: var(--dim); font-size: 17px; line-height: 1; cursor: pointer; }
.alert-item .alert-x:hover { color: var(--text); background: var(--panel-raised); }

/* Voile d'un iPhone injoignable : voir l'écran et déverrouiller sans WDA. */
.veil-tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
/* Le voile reste dans l'écran du téléphone : texte et boutons centrés, les boutons passent l'un sous l'autre s'il le faut (28/09/2026). */
.screen-veil > div { position: relative; z-index: 1; display: grid; justify-items: center; width: 100%; max-width: 280px; min-width: 0; }
.screen-veil #veil-text { max-width: 100%; line-height: 1.45; }
.veil-tools .button { flex: 1 1 120px; max-width: 200px; justify-content: center; white-space: nowrap; }
.veil-tools[hidden] { display: none; }
.veil-still { display: block; width: 60%; max-width: 180px; margin: 12px auto 0; border-radius: 12px; border: 1px solid var(--border-strong); }
.veil-still[hidden] { display: none; }

/* Pause des automatisations, à gauche de la cloche. */
.icon-button.auto-pause { width: 36px; min-height: 36px; padding: 0; border-radius: var(--radius-sm, 10px); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.icon-button.auto-pause span { display: none; font-size: 12px; font-weight: 700; }
.icon-button.auto-pause.on { width: auto; padding: 0 11px; color: #ffc53d; background: rgb(255 197 61 / 14%); border-color: rgb(255 197 61 / 45%); }
.icon-button.auto-pause.on span { display: inline; }

/* VPN 4G du téléphone (cockpit). */
.vpn-menu .vpn-dot, .vpn-list .vpn-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; background: #6b6b73; }
.vpn-dot.on { background: #3ecf8e; box-shadow: 0 0 6px rgb(62 207 142 / 60%); }
.vpn-dot.down { background: #ff5c5c; }
.vpn-dot.wait { background: #ffc53d; }
.vpn-list { max-height: 60vh; overflow-y: auto; min-width: 230px; }
.vpn-list .vpn-head { padding: 8px 12px 6px; font-size: 12px; color: var(--muted); }
.vpn-list .vpn-item { display: flex; align-items: center; gap: 8px; width: 100%; }
.vpn-list .vpn-item span { flex: 1; text-align: left; }
.vpn-list .vpn-item small { color: var(--muted); font-size: 11px; }
.vpn-list .vpn-item.current { background: rgb(47 107 255 / 16%); }
.vpn-list .vpn-item.danger { color: #ff5c5c; }
.stage-left { grid-column: 1; grid-row: 1; justify-self: start; display: flex; align-items: center; gap: 8px; min-width: 0; }
.stage-left .vpn-menu .vpn-list { left: 0; }

/* La tâche en cours : en bas, à droite du dock sous l'iPhone — dans la barre du haut, elle encombrait « Réseaux » et « Actions » (28/09/2026). */
@media (min-width: 761px) {
    .stage .running-bar { top: auto; bottom: 15px; left: calc(50% + 95px); right: auto; transform: none; height: 32px; max-width: calc(50% - 96px); box-sizing: border-box; padding: 0 3px 0 10px; gap: 6px; font-size: 11.5px; font-weight: 600; box-shadow: none; }
    .stage .running-bar .dot { width: 7px; height: 7px; }
    .stage .running-bar:not([hidden]) ~ .stream-status:not([hidden]) { top: auto; bottom: 66px; }
    .stage .running-bar > span:not(.dot):not(.spacer) { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .stage .running-bar .button { height: 24px; min-height: 24px; padding: 0 9px; font-size: 11px; }
}

/* Parc : le réseau réel de chaque téléphone, à côté de « branché ». */
.fc-line.net.ok i { background: #3ecf8e; } .fc-line.net.ko { color: #ff5c5c; } .fc-line.net.ko i { background: #ff5c5c; } .fc-line.net.unknown { color: var(--muted); }
.count-badge.warn { color: #ffc53d; } .count-badge.warn .dot { background: #ffc53d; }
.fc-line.net.warn { color: #ffc53d; } .fc-line.net.warn i { background: #ffc53d; }

/* Parc : la conso 4G de la ligne qui sert à l'iPhone (eSIM ou ligne de son VPN), 28/09/2026. */
.fc-line.plan { color: var(--muted); }
.fc-line.plan i { width: 26px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, currentColor var(--pct), rgb(var(--ink) / 12%) var(--pct)); }
.fc-line.plan.ok i { color: #3ecf8e; } .fc-line.plan.warn { color: #ffc53d; } .fc-line.plan.ko { color: #ff5c5c; }
.plan-box { display: grid; gap: 6px; padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); font-size: 12px; min-width: 250px; }
.plan-box .plan-head { color: var(--muted); font-size: 11px; font-weight: 600; }
.plan-box .plan-row { display: flex; align-items: center; gap: 8px; color: var(--text); }
.plan-box .plan-row i { flex: none; width: 34px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, currentColor var(--pct), rgb(var(--ink) / 12%) var(--pct)); color: #3ecf8e; }
.plan-box .plan-row.warn i { color: #ffc53d; } .plan-box .plan-row.ko { color: #ff5c5c; } .plan-box .plan-row.ko i { color: #ff5c5c; }

/* La tâche en cours sous la liste des téléphones (grand écran) : une carte comme la liste. */
.phone-list .running-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); font-size: 12.5px; font-weight: 600; }
.phone-list .running-bar .dot { margin-left: 4px; }
.phone-list .running-bar #running-text { line-height: 1.3; }
.phone-list .running-bar #running-text small { display: block; margin-top: 1px; color: var(--muted); font-size: 11.5px; font-weight: 500; }
.phone-list .running-bar .spacer { display: none; }
.phone-list .running-bar .button { grid-column: 1 / -1; width: 100%; height: 32px; min-height: 32px; justify-content: center; border-radius: 9px; font-size: 12.5px; }
.phone-list .running-bar.stopping { border-color: rgb(229 72 77 / 35%); }
/* Le point de la tâche en cours (Journée) : le titre coupe ce qui dépasse, son halo sortait en carré. */
.fold-title .live-dot.on, .fold-title .live-dot.on.queued { box-shadow: none; }
#running-text b { font-weight: inherit; } #running-text small { font-size: inherit; }

/* Une vidéo en plein écran s'affiche entière (les vignettes rognent en « cover » : Safari garde ce rognage en plein écran). */
video:fullscreen, video:-webkit-full-screen { object-fit: contain !important; aspect-ratio: auto !important; width: 100% !important; height: 100% !important; border-radius: 0 !important; background: #000; }

/* Survol sans saut (29/09/2026 : « ça saute, c'est saccadé, parfois ça change de position ») : un élément
   qui se soulève sort de sous le curseur près de son bord bas — survol perdu, il redescend, revient : il
   tremble ; l'élan « ressort » ajoutait un dépassement. Le survol ne déplace plus rien : il colore et éclaire. */
.kpi:hover, .bb .kpi:hover, .device-card:hover, .post-card:hover, .shortcut:hover, .onb-tree div:hover, .action-card:hover, .rp:hover, .oc-case[data-day]:hover { transform: none !important; }
.kpi .v, .kpi:hover .v { transform: none !important; }
.rail-btn svg, .dock-btn svg, .button svg, .icon-button svg, .finder-ib svg { transition: color .15s ease, opacity .15s ease !important; }
.rail-btn:hover svg, .dock-btn:hover svg, .button:hover svg, .icon-button:hover svg, .finder-ib:hover:not(:disabled) svg { transform: none !important; }
.action-card:hover::after { transform: none !important; }

/* Pas de barres de défilement visibles (29/09/2026) : on défile toujours à la molette, au pavé et au doigt. */
/* !important : des blocs (bande des posts, listes, fenêtres) redemandaient une barre fine avec une règle plus précise. */
html, body, * { scrollbar-width: none !important; }
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
html { scrollbar-gutter: auto; }
.todo-item.paused .todo-state { color: var(--warning); }
.todo-item.paused { border-color: rgb(255 197 61 / 30%); }

/* Cockpit — onglets Abeille et Réglages retapés (30/09/2026) : un panneau, des lignes « texte à gauche, commande à droite ». */
.cz { display: grid; gap: 12px; }
.cz-head { display: flex; align-items: center; gap: 12px; } .cz-icon { width: 40px; height: 40px; border-radius: 11px; } .cz-title { flex: 1; min-width: 0; } .cz-title h2 { margin: 0; font-size: 18px; } .cz-title .eyebrow { margin: 0; }
.cz-head .companion-state { padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; white-space: nowrap; }
.cz .hint { margin: 0; } .cz .subtabs { margin-top: 0; } #companion-install[hidden] { display: none; }
.cz-sub.active { display: grid; gap: 10px; }
.cz-bar { display: flex; align-items: center; gap: 8px; } .cz-bar .spacer { flex: 1; } .cz-bar .button svg { width: 14px; height: 14px; margin-right: 4px; }
.cz-drop { display: grid; gap: 3px; padding: 18px 14px; } .cz-drop b { color: var(--text); font-size: 13.5px; } .cz-drop span { font-size: 12px; }
.danger-text { color: #ff8a8f !important; }
.cz-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: rgb(var(--ink) / 2%); }
.cz-text h3 { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 14px; } .cz-text p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.cz-ctrl { display: flex; align-items: center; gap: 6px; } .cz .cz-ctrl input:not([type=checkbox]) { flex: 1; width: auto; min-width: 0; margin: 0; height: 34px; padding: 6px 10px; } .cz-ctrl .button { white-space: nowrap; }
.cz .count-badge:empty { display: none; }
.cz-result { grid-column: 1 / -1; } .cz-result:empty { display: none; }
.cz-col { grid-template-columns: minmax(0, 1fr); } .cz-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 6px; } .cz-fields input { margin: 0; height: 34px; padding: 6px 10px; }
.cz-danger { border-color: rgb(229 72 77 / 25%); background: rgb(229 72 77 / 4%); }
@media (max-width: 520px) { .cz-row { grid-template-columns: minmax(0, 1fr); } .cz-fields { grid-template-columns: minmax(0, 1fr); } }

/* Visualiseur de la pellicule (Abeille). */
dialog.photo-viewer { max-width: none; max-height: none; width: 100vw; height: 100vh; height: 100dvh; margin: 0; padding: 0; border: 0; background: rgb(0 0 0 / 88%); display: grid; place-items: center; cursor: zoom-out; }
dialog.photo-viewer::backdrop { background: transparent; }
dialog.photo-viewer img { max-width: 92vw; max-height: 88vh; border-radius: 14px; object-fit: contain; min-width: min(420px, 80vw); image-rendering: auto; }
.photo-viewer-note { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); padding: 7px 14px; border-radius: 999px; background: rgb(var(--ink) / 10%); color: #ddd; font-size: 13px; }
.photo-viewer-note.small { top: 18px; right: 18px; bottom: auto; left: auto; transform: none; padding: 4px 9px; font-size: 11px; font-weight: 700; letter-spacing: .04em; opacity: .75; }

/* Les étiquettes des boutons latéraux (30/09/2026, « pas très propre ») : une bulle au-dessus du bouton, avec son fond,
   au lieu d'un texte gris posé à côté — celle du bouton latéral passait sous la barre d'outils. */
.side-btn span { top: auto; bottom: calc(100% + 8px); left: 50% !important; right: auto !important; transform: translateX(-50%); padding: 5px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-raised); color: var(--text); font-size: 11px; font-weight: 600; box-shadow: 0 6px 18px rgb(0 0 0 / 35%); z-index: 6; }

/* La tâche en cours (30/09/2026) : son résumé en titre, l'état, puis un journal lisible. */
.run-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.run-top form { flex: none; margin: 0; }
.run-summary small .status { display: inline-flex; align-items: center; gap: 5px; padding: 0; background: none; border: 0; font-size: inherit; font-weight: 600; }
.run-summary small .status.running, .run-summary small .status.queued { color: var(--accent, #2f6bff); }
.run-summary small .status.succeeded { color: var(--ok, #3fb97a); } .run-summary small .status.failed { color: var(--danger, #e5484d); }
.run-panel pre.run-log.plain { padding: 2px 0 2px 12px; border: 0; border-left: 2px solid var(--border); border-radius: 0; background: none; color: var(--muted); font: 13px/1.55 var(--font, sans-serif); max-height: 160px; }
.run-summary { display: grid; gap: 2px; min-width: 0; } .run-summary b { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.35; } .run-summary small { color: var(--muted); font-size: 12.5px; }
.run-panel .run-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .run-panel .run-heading form { margin: 0; }
.run-panel pre.run-log { font-family: var(--font, 'Montserrat', sans-serif); font-size: 13px; line-height: 1.55; white-space: pre-wrap; color: var(--text-2, #c8c8cf); }

/* Coller / glisser une photo depuis l'app Photos (30/09/2026). */
.rail-pop-hint { margin: 4px 10px 6px; max-width: 240px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.phone-frame.drop-ready, .drop-ready { box-shadow: 0 0 0 3px #2f6bff, 0 0 28px rgb(47 107 255 / 45%) !important; }

/* ===================================================================
   Thème clair (01/10/2026) : choisi dans Mon compte (Clair, Sombre ou comme
   l'appareil), posé sur <html data-theme> par le serveur (cookie scalyx_theme).
   Le sombre reste celui de :root ; les couleurs des pages passent par les
   variables (--bg, --panel, --line, --text, rgb(var(--ink) / x%)…).
   =================================================================== */
:root[data-theme="light"] {
    color-scheme: light;
    --ink: 15 23 42;
    --bg: #f4f6fa;
    --bg-2: #eef1f6;
    --bg-deep: #e9edf4;
    --panel: #ffffff;
    --panel-solid: #ffffff;
    --panel-raised: #eef1f6;
    --panel-elevated: #ffffff;
    --line: #e2e7f0;
    --border: #e2e7f0;
    --border-strong: #cbd3e1;
    --text: #0f172a;
    --text-2: #334155;
    --muted: #5b6478;
    --dim: #8a93a6;
    --accent-soft: rgb(47 107 255 / 12%);
    --accent-subtle: rgb(47 107 255 / 6%);
    --success: #15803d;
    --success-solid: #16a34a;
    --success-bg: rgb(22 163 74 / 12%);
    --warning: #b45309;
    --warning-solid: #d97706;
    --warning-bg: rgb(245 158 11 / 16%);
    --danger: #dc2626;
    --danger-solid: #dc2626;
    --danger-bg: rgb(220 38 38 / 10%);
    --info: #2563eb;
    --shadow: 0 8px 24px -12px rgb(15 23 42 / 14%);
    --shadow-float: 0 12px 32px rgb(15 23 42 / 14%);
}
@media (prefers-color-scheme: light) {
    :root[data-theme="auto"] {
        color-scheme: light;
        --ink: 15 23 42;
        --bg: #f4f6fa;
        --bg-2: #eef1f6;
        --bg-deep: #e9edf4;
        --panel: #ffffff;
        --panel-solid: #ffffff;
        --panel-raised: #eef1f6;
        --panel-elevated: #ffffff;
        --line: #e2e7f0;
        --border: #e2e7f0;
        --border-strong: #cbd3e1;
        --text: #0f172a;
        --text-2: #334155;
        --muted: #5b6478;
        --dim: #8a93a6;
        --accent-soft: rgb(47 107 255 / 12%);
        --accent-subtle: rgb(47 107 255 / 6%);
        --success: #15803d;
        --success-solid: #16a34a;
        --success-bg: rgb(22 163 74 / 12%);
        --warning: #b45309;
        --warning-solid: #d97706;
        --warning-bg: rgb(245 158 11 / 16%);
        --danger: #dc2626;
        --danger-solid: #dc2626;
        --danger-bg: rgb(220 38 38 / 10%);
        --info: #2563eb;
        --shadow: 0 8px 24px -12px rgb(15 23 42 / 14%);
        --shadow-float: 0 12px 32px rgb(15 23 42 / 14%);
    }
}
/* Sur fond clair : cartes posées par une ombre douce, l'écran du téléphone reste noir. */
:root[data-theme="light"] .panel, :root[data-theme="light"] .card { box-shadow: var(--shadow); }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] .panel, :root[data-theme="auto"] .card { box-shadow: var(--shadow); } }
/* Le téléphone en clair aussi (01/10/2026, « fais un mode clair ici aussi ») : châssis et voile clairs ; seul
   l'écran en direct reste noir (.phone-screen), comme un vrai écran. */
:root[data-theme="light"] .phone-frame { background: linear-gradient(160deg, #ffffff, #eef1f6 45%, #e2e7f0); box-shadow: 0 0 0 1px rgb(15 23 42 / 8%) inset, 0 0 0 3px #e9edf4; }
:root[data-theme="light"]  .phone-frame.live { box-shadow: 0 0 0 1px rgb(15 23 42 / 8%) inset, 0 0 0 3px #e9edf4; }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] .phone-frame { background: linear-gradient(160deg, #ffffff, #eef1f6 45%, #e2e7f0); box-shadow: 0 0 0 1px rgb(15 23 42 / 8%) inset, 0 0 0 3px #e9edf4; } :root[data-theme="auto"] .phone-frame.live { box-shadow: 0 0 0 1px rgb(15 23 42 / 8%) inset, 0 0 0 3px #e9edf4; } }

/* La main sur tout ce qui se clique (01/10/2026 : « sur “Nouvelle” la souris montre qu'on peut cliquer, sur
   “agence” non ») — boutons, liens, onglets ; le texte et les icônes à l'intérieur suivent leur bouton. */
button:not(:disabled), [role="button"], [role="tab"], [role="menuitem"], .button, a[href], summary, label[for], select,
input[type="checkbox"], input[type="radio"], input[type="file"], .rail-btn, .dock-btn, .deck-tab { cursor: pointer; }
button *, [role="button"] *, [role="tab"] *, .button *, a[href] *, summary * { cursor: inherit; }
button:disabled, .button[aria-disabled="true"] { cursor: not-allowed; }

/* Le bouton clair / sombre de la barre : le soleil pour passer au clair, la lune pour passer au sombre. */
.icon-button.theme-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: var(--radius-sm); }
.theme-toggle .to-dark { display: none; }
:root[data-theme="light"] .theme-toggle .to-light { display: none; }
:root[data-theme="light"] .theme-toggle .to-dark { display: block; }
@media (prefers-color-scheme: light) {
    :root[data-theme="auto"] .theme-toggle .to-light { display: none; }
    :root[data-theme="auto"] .theme-toggle .to-dark { display: block; }
}
/* Une image par thème (logo de l'app embarquée…) : .only-dark en sombre, .only-light en clair. */
.only-light { display: none !important; }
:root[data-theme="light"] .only-light { display: revert !important; }
:root[data-theme="light"] .only-dark { display: none !important; }
@media (prefers-color-scheme: light) {
    :root[data-theme="auto"] .only-light { display: revert !important; }
    :root[data-theme="auto"] .only-dark { display: none !important; }
}
/* Pendant la bascule clair / sombre, aucune transition : tout change d'un coup, au lieu que les boutons et les
   cartes (qui ont un fondu pour le survol) passent l'un après l'autre (01/10/2026, « pas très beau »). */
html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; animation-duration: 0s !important; }

/* Écrans cachés par l'agence (01/10/2026, agency/phone-privacy.ts) : vu par le superviseur, le téléphone ne montre rien. */
.screen-private { position: absolute; inset: 0; z-index: 7; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.45; background: radial-gradient(circle at 50% 40%, var(--panel), var(--bg-deep)); }
.screen-private svg { width: 28px; height: 28px; color: var(--text); }
.screen-private b { color: var(--text); font-size: 14px; }
#hide-screens[aria-pressed="true"] svg { color: #2f6bff; }

/* Mobile : la barre d'outils de Safari (en bas) ne cache plus la fin des pages (01/10/2026). */
@media (max-width: 640px) { main.shell { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }

.history-modal { width: min(640px, calc(100vw - 32px)); max-height: 82vh; overflow: auto; }

/* Xylacs, le compagnon ScalyX (02/10/2026) : une bulle carrée en bas à droite de chaque page de l'agence, qui se
   déplie en conversation ; sur téléphone, la conversation prend tout l'écran. */
.xy-bubble { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 950; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 16px; background: transparent; cursor: pointer; box-shadow: 0 10px 30px rgb(47 107 255 / 35%), 0 2px 8px rgb(0 0 0 / 25%); transition: transform .2s var(--ease, ease), box-shadow .2s; }
.xy-bubble svg { width: 52px; height: 52px; display: block; } .xy-bubble:hover { transform: translateY(-2px) scale(1.04); } .xy-bubble.on { transform: scale(.94); }
/* Les couleurs de l'IA (02/10/2026, « colore Xylacs avec les couleurs IA, arc-en-ciel ») : bleu → violet → rose → orange. */
:root { --xy-rainbow: linear-gradient(135deg, #0894ff, #c959dd 38%, #ff2e54 72%, #ff9004); --xy-rainbow-ring: conic-gradient(from var(--xy-turn, 0deg), #0894ff, #c959dd, #ff2e54, #ff9004, #0894ff); }
@property --xy-turn { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes xy-turn { to { --xy-turn: 360deg; } }
.xy-bubble { box-shadow: 0 10px 30px rgb(201 89 221 / 30%), 0 2px 8px rgb(0 0 0 / 25%); }
.xy-bubble::before { content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: 19px; background: var(--xy-rainbow-ring); filter: blur(7px); opacity: .55; animation: xy-turn 6s linear infinite; transition: opacity .2s; }
.xy-bubble:hover::before { opacity: .85; }
.xy-bubble.busy::after { content: ""; position: absolute; inset: -4px; border-radius: 19px; padding: 2px; background: var(--xy-rainbow-ring); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: xy-turn 1.6s linear infinite; }
.xy-who b { background: var(--xy-rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xy-caret { background: var(--xy-rainbow) !important; }
@media (prefers-reduced-motion: reduce) { .xy-bubble::before, .xy-bubble.busy::after { animation: none; } }
.xy-dot { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: #ff5b5b; border: 2px solid var(--bg, #0b0b0d); } .xy-dot[hidden] { display: none; }
.xy-panel { position: fixed; right: 20px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 951; display: flex; flex-direction: column; width: min(420px, calc(100vw - 40px)); height: min(640px, calc(100dvh - 120px)); border: 1px solid var(--border); border-radius: 18px; background: var(--panel-elevated, var(--panel)); color: var(--text); box-shadow: 0 24px 70px rgb(0 0 0 / 45%); overflow: hidden; transform-origin: bottom right; }
.xy-panel.opening { animation: xy-open .26s cubic-bezier(.2, .9, .25, 1.05) both; } .xy-panel.closing { animation: xy-close .18s ease-in both; pointer-events: none; }
.xy-panel[hidden] { display: none; }
@keyframes xy-open { from { opacity: 0; transform: translateY(16px) scale(.86); } }
@keyframes xy-close { to { opacity: 0; transform: translateY(14px) scale(.9); } }
@keyframes xy-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.xy-panel .pop { animation: xy-pop .24s cubic-bezier(.2, .9, .3, 1) both; } .xy-row.me.pop { transform-origin: bottom right; } .xy-row.bot.pop { transform-origin: bottom left; }
.xy-caret { display: inline-block; width: 7px; height: 14px; margin-left: 2px; vertical-align: -2px; border-radius: 2px; background: #2f6bff; animation: xy-pulse .9s ease-in-out infinite; }
.xy-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.xy-list { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; background: var(--panel-elevated, var(--panel)); animation: xy-pop .2s ease both; } .xy-list[hidden] { display: none; }
.xy-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-bottom: 1px solid var(--border); } .xy-list-head b { font-size: 13.5px; }
.xy-list-new { display: inline-flex; align-items: center; gap: 5px; } .xy-list-new svg { width: 14px; height: 14px; }
.xy-list-items { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; display: grid; align-content: start; gap: 4px; }
.xy-conv { display: flex; align-items: center; gap: 4px; border-radius: 12px; } .xy-conv.on { background: rgb(47 107 255 / 10%); } .xy-conv:hover { background: rgb(var(--ink) / 5%); }
.xy-conv-open { flex: 1; min-width: 0; display: grid; gap: 2px; padding: 9px 10px; border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.xy-conv-open b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xy-conv-open small { color: var(--muted); font-size: 11.5px; }
.xy-conv-del { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-right: 6px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; opacity: .6; } .xy-conv-del svg { width: 15px; height: 15px; } .xy-conv-del:hover { opacity: 1; color: #ff6b6b; background: rgb(255 107 107 / 10%); }
.xy-icon { position: relative; } .xy-count { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #2f6bff; color: #fff; font-size: 10px; font-style: normal; font-weight: 700; line-height: 16px; text-align: center; } .xy-count[hidden] { display: none; }
.xy-panel.listing .xy-convs { border-color: #2f6bff; color: #2f6bff; }
@keyframes xy-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.xy-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-bottom: 1px solid var(--border); }
.xy-who { flex: 1; min-width: 0; display: grid; } .xy-who b { font-size: 14px; } .xy-who small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xy-panel.busy .xy-who small::after { content: " · écrit…"; color: #2f6bff; }
.xy-avatar { display: inline-grid; flex: none; width: 32px; height: 32px; } .xy-avatar svg { width: 100%; height: 100%; display: block; }
.xy-avatar.small { width: 26px; height: 26px; margin-top: 2px; } .xy-avatar.big { width: 52px; height: 52px; }
.xy-icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--text); cursor: pointer; } .xy-icon svg { width: 16px; height: 16px; } .xy-icon[hidden] { display: none; } .xy-icon:hover { border-color: #2f6bff; }
.xy-ia { flex: none; width: auto; height: 32px; min-height: 32px; max-width: 110px; margin: 0; padding: 0 24px 0 10px; border-radius: 10px; font-size: 12px; font-weight: 600; } .xy-ia[hidden] { display: none; }
.xy-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; padding: 14px 12px; scrollbar-width: thin; }
.xy-row { display: flex; gap: 8px; align-items: flex-start; max-width: 100%; } .xy-row.me { justify-content: flex-end; }
.xy-msg { min-width: 0; max-width: 86%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.xy-row.me .xy-msg { background: #2f6bff; color: #fff; border-bottom-right-radius: 5px; white-space: pre-wrap; }
.xy-row.bot .xy-msg { background: rgb(var(--ink) / 6%); color: var(--text); border-bottom-left-radius: 5px; }
.xy-msg p { margin: 0 0 6px; } .xy-msg p:last-child { margin-bottom: 0; } .xy-msg ul, .xy-msg ol { margin: 2px 0 6px; padding-left: 18px; } .xy-msg li { margin: 2px 0; }
.xy-msg code { padding: 1px 5px; border-radius: 5px; background: rgb(var(--ink) / 8%); font-size: 12px; } .xy-msg a { color: #2f6bff; } .xy-msg .xy-h { font-weight: 700; margin-top: 4px; }
.xy-steps { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.xy-step { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: rgb(var(--ink) / 7%); color: var(--muted); font-size: 11.5px; font-weight: 600; }
.xy-step::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3ecf8e; } .xy-step.ko::before { background: #ff6b6b; } .xy-step.run::before { background: #2f6bff; animation: xy-pulse 1s ease-in-out infinite; }
.xy-typing { display: inline-flex; gap: 4px; padding: 4px 0; } .xy-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: xy-pulse 1.1s ease-in-out infinite; } .xy-typing i:nth-child(2) { animation-delay: .15s; } .xy-typing i:nth-child(3) { animation-delay: .3s; }
.xy-error { color: #ff6b6b; font-size: 12.5px; } .xy-retry { margin-top: 8px; }
.xy-confirm { display: grid; gap: 8px; margin-top: 8px; padding: 10px 12px; border: 1px solid rgb(47 107 255 / 40%); border-radius: 12px; background: rgb(47 107 255 / 8%); }
/* Les cartes de « afficher » : posts en carrousel, téléphones, comptes (02/10/2026). */
.xy-msg:has(.xy-cards) { width: 100%; max-width: 100%; }
.xy-cards { display: grid; gap: 8px; margin: 8px -4px 2px; }
.xy-cards-title { padding: 0 4px; font-size: 12.5px; }
.xy-rail { display: flex; gap: 8px; overflow-x: auto; padding: 2px 4px 6px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.xy-rail > * { scroll-snap-align: start; flex: none; }
.xy-post { width: 214px; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.xy-media { display: flex; aspect-ratio: 4 / 5; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: #000; } .xy-media::-webkit-scrollbar { display: none; }
.xy-slide { flex: 0 0 100%; scroll-snap-align: center; display: grid; place-items: center; } .xy-slide img, .xy-slide video { width: 100%; height: 100%; object-fit: cover; display: block; }
.xy-noimg { color: var(--muted); font-size: 12px; background: rgb(var(--ink) / 6%); }
.xy-dots { display: flex; justify-content: center; gap: 4px; margin-top: -16px; position: relative; height: 16px; pointer-events: none; } .xy-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgb(255 255 255 / 45%); } .xy-dots i.on { background: #fff; }
.xy-post-b { display: grid; gap: 4px; padding: 9px 10px 10px; } .xy-post-b b { font-size: 13px; line-height: 1.3; } .xy-post-b p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; } .xy-post-b small { color: var(--muted); font-size: 11px; }
.xy-post-tags { display: flex; gap: 4px; } .xy-tag { padding: 2px 7px; border-radius: 999px; background: rgb(var(--ink) / 7%); color: var(--muted); font-size: 10.5px; font-weight: 700; }
.xy-tag.st-pret, .xy-tag.st-planifie { background: rgb(47 107 255 / 14%); color: #2f6bff; } .xy-tag.st-publie { background: rgb(62 207 142 / 14%); color: #2bb57a; } .xy-tag.st-echec { background: rgb(255 107 107 / 14%); color: #ff6b6b; }
.xy-phone { width: 230px; display: grid; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.xy-phone-top { display: flex; align-items: center; gap: 10px; } .xy-phone-top > span:last-child { display: grid; min-width: 0; } .xy-phone-top b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xy-phone-top small { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11.5px; }
.xy-dev { flex: none; width: 22px; height: 38px; border: 2px solid var(--text); border-radius: 7px; position: relative; opacity: .8; } .xy-dev::after { content: ""; position: absolute; top: 3px; left: 50%; width: 6px; height: 2px; margin-left: -3px; border-radius: 2px; background: var(--text); } .xy-dev.android { border-radius: 4px; } .xy-dev.android::after { width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; }
.xy-live { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); } .xy-live.on { background: #3ecf8e; }
.xy-accs { display: flex; flex-wrap: wrap; gap: 4px; } .xy-accs span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 3px; border-radius: 999px; background: rgb(var(--ink) / 6%); font-size: 11.5px; font-weight: 600; }
.xy-none { color: var(--muted); font-size: 11.5px; }
.xy-net { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: 9px; font-style: normal; font-weight: 800; line-height: 1; }
.xy-acc { width: 150px; display: grid; justify-items: center; gap: 4px; padding: 12px 8px 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); color: var(--text); text-align: center; text-decoration: none; } a.xy-acc:hover { border-color: #2f6bff; }
.xy-acc-av { display: grid; place-items: center; width: 52px; height: 52px; padding: 2.5px; border-radius: 50%; } .xy-acc-av span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--panel); border: 2px solid var(--panel); font-size: 18px; font-weight: 800; }
.xy-acc b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; } .xy-acc small { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }
.xy-confirm-items { display: grid; gap: 4px; max-height: 260px; overflow: auto; margin-bottom: 2px; }
.xy-ci { display: flex; align-items: center; gap: 9px; padding: 5px; border-radius: 10px; background: rgb(var(--ink) / 4%); }
.xy-ci img, .xy-ci-ph { flex: none; width: 34px; height: 34px; border-radius: 7px; object-fit: cover; background: rgb(var(--ink) / 8%); }
.xy-ci > span { display: grid; min-width: 0; } .xy-ci b { overflow: hidden; color: var(--text); font-size: 12.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; } .xy-ci small { overflow: hidden; color: var(--muted); font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
.xy-ci-more { color: var(--muted); font-size: 11.5px; padding-left: 4px; }
.xy-confirm > b { font-size: 13px; } .xy-confirm-details { display: grid; gap: 3px; font-size: 12px; color: var(--muted); } .xy-confirm-details i { font-style: normal; color: var(--dim, var(--muted)); margin-right: 6px; }
.xy-confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .xy-confirm-actions span { font-size: 12px; font-weight: 700; color: var(--muted); }
.xy-confirm.yes { border-color: rgb(62 207 142 / 45%); background: rgb(62 207 142 / 8%); } .xy-confirm.no { opacity: .7; }
.xy-hello { margin: auto 0; display: grid; justify-items: center; gap: 8px; padding: 10px 6px; text-align: center; } .xy-hello b { font-size: 15px; } .xy-hello > span:not(.xy-avatar) { color: var(--muted); font-size: 13px; line-height: 1.5; max-width: 360px; }
.xy-ideas-h { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.xy-ideas .xy-suggest { border-image: none; background: linear-gradient(var(--panel-elevated, var(--panel)), var(--panel-elevated, var(--panel))) padding-box, var(--xy-rainbow) border-box; border: 1px solid transparent; }
.xy-ideas { display: grid; gap: 6px; width: 100%; margin-top: 6px; } .xy-ideas button { padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer; } .xy-ideas button:hover { border-color: #2f6bff; background: rgb(47 107 255 / 8%); }
.xy-compose { display: flex; align-items: flex-end; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
.xy-compose textarea { flex: 1; min-width: 0; min-height: 40px; max-height: 140px; margin: 0; resize: none; padding: 9px 12px; border-radius: 12px; font: inherit; font-size: 13.5px; line-height: 1.45; }
.xy-send { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: #2f6bff; color: #fff; cursor: pointer; } .xy-send svg { width: 18px; height: 18px; } .xy-send:disabled { opacity: .45; cursor: default; }
.xy-panel.off .xy-compose { opacity: .5; }
@media (max-width: 640px) {
    .xy-bubble { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 48px; height: 48px; } .xy-bubble svg { width: 48px; height: 48px; }
    .xy-panel { inset: 0; right: 0; bottom: 0; width: 100vw; height: 100dvh; border: 0; border-radius: 0; padding-top: env(safe-area-inset-top); }
    .xy-compose { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
    .xy-panel:not([hidden]) ~ .xy-bubble { display: none; }
}

/* Le châssis de l'iPhone (02/10/2026, « les bordures de l'iPhone ne sont pas belles ») : un vrai contour d'iPhone, noir
   titane, le même en clair et en sombre — plus de liseré blanc en mode clair ni de boutons dessinés en traits fins. */
.phone-frame, :root[data-theme] .phone-frame, :root[data-theme="light"] .phone-frame {
    padding: 2.6% !important; border: 0 !important;
    background: linear-gradient(145deg, #3a3b40, #18181b 22%, #0d0d0f 60%, #26272b) !important;
    box-shadow: 0 0 0 1.5px #4a4b51, 0 0 0 3px #111114, 0 26px 60px rgb(0 0 0 / 35%), inset 0 0 0 1px rgb(255 255 255 / 6%) !important;
}
.phone-frame.live, :root[data-theme] .phone-frame.live, :root[data-theme="light"] .phone-frame.live {
    box-shadow: 0 0 0 1.5px #4a4b51, 0 0 0 3px #111114, 0 26px 60px rgb(0 0 0 / 35%), inset 0 0 0 1px rgb(255 255 255 / 6%), 0 0 46px rgb(47 107 255 / 20%) !important;
}
.phone-frame:fullscreen { padding: 0 !important; background: #000 !important; box-shadow: none !important; }
.side-btn { width: 3px; border-radius: 2px 0 0 2px; background: linear-gradient(90deg, #4a4b51, #1c1c20) !important; box-shadow: none !important; }
.side-btn.vol-up, .side-btn.vol-down, .side-btn.mute { left: -4.5px; }
.side-btn.power { right: -4.5px; border-radius: 0 2px 2px 0; background: linear-gradient(270deg, #4a4b51, #1c1c20) !important; }
.side-btn:hover { background: #2f6bff !important; }

/* Un Android a son propre châssis (02/10/2026) : coins plus droits, caméra en poinçon, boutons sur la tranche droite, 20:9. */
.phone-frame.android { border-radius: 9% / 4.2%; }
.phone-frame.android .phone-screen { aspect-ratio: 9 / 20; border-radius: 6.5% / 2.9%; }
.phone-frame.android::before { content: ""; position: absolute; z-index: 6; top: calc(2.6% + 1.1%); left: 50%; width: 3.2%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #050506; box-shadow: 0 0 0 1.5px #1c1c20; pointer-events: none; }
.phone-frame.android .side-btn.mute { display: none; }
.phone-frame.android .side-btn.vol-up { left: auto; right: -4.5px; top: 18%; height: 10%; border-radius: 0 2px 2px 0; background: linear-gradient(270deg, #4a4b51, #1c1c20) !important; }
.phone-frame.android .side-btn.vol-down { left: auto; right: -4.5px; top: 29%; height: 10%; border-radius: 0 2px 2px 0; background: linear-gradient(270deg, #4a4b51, #1c1c20) !important; }
.phone-frame.android .side-btn.power { top: 42%; height: 8%; }
.phone-frame.android .side-btn.vol-up span, .phone-frame.android .side-btn.vol-down span { right: auto; left: 10px; }
.veil-code-form { display: flex; flex-basis: 100%; gap: 6px; margin-top: 2px; } .veil-code-form[hidden] { display: none; } .veil-code-form input { flex: 1; min-width: 0; height: 32px; text-align: center; letter-spacing: .2em; }

/* La fiche de post de Publier (.pp-*, déplacée de pages.ts le 03/10/2026) : reprise par le cockpit pour Publier, Profil et Scroll. */
dialog.pp .pp-modal { width: min(1040px, 96vw); max-height: 92vh; overflow: auto; padding-bottom: 0; }
.pp-body { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 22px; align-items: start; }
.pp-media-col { position: sticky; top: 0; display: grid; gap: 12px; min-width: 0; } 
.pp-more-btn { display: grid; gap: 2px; width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: 14px; background: rgb(var(--ink) / 2%); color: var(--text); font: inherit; text-align: left; cursor: pointer; } .pp-more-btn span { font-size: 13px; font-weight: 700; } .pp-more-btn small { color: var(--dim); font-size: 11.5px; } .pp-more-btn:hover, .pp-more-btn.on { border-color: var(--accent); background: rgb(47 107 255 / 10%); }
.pp-body.opts .pp-main > .pp-step:not(.pp-options) { display: none; }
.pp-options h3 { justify-content: space-between; align-items: center; } .pp-options h3 .pp-q { text-transform: none; letter-spacing: 0; }
.pp-options .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-options .field-grid > .switch { grid-column: 1 / -1; margin-top: 4px; }
.pp-options[hidden] { display: none; }
/* Plus d'options (02/10/2026, retapé) : une carte par thème, les réglages en lignes (texte à gauche, interrupteur à droite). */
.pp-options { gap: 12px; } .pp-card { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); } .pp-card[hidden] { display: none; }
.pp-card h4 { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #2f6bff; }
.pp-card label { margin-top: 0; } .pp-inline { display: flex; gap: 6px; } .pp-inline input { flex: 1; min-width: 0; }
.pp-toggles { display: grid; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.pp-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 10px 12px; box-sizing: border-box; line-height: 1.25; } .pp-toggle + .pp-toggle { box-shadow: inset 0 1px 0 var(--border); }
.pp-toggle-text { flex: 1; min-width: 0; display: grid; gap: 1px; } .pp-toggle-text b { font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--text); } .pp-toggle-text small { line-height: 1.35; } .pp-toggle-text small { color: var(--dim); font-size: 11.5px; font-weight: 500; }
.pp-sub { margin: 12px 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #2f6bff; } .pp-switches { display: grid; gap: 8px; margin-top: 10px; } .pp-switches .switch { margin: 0; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--text); } .pp-switches small { color: var(--dim); font-weight: 500; } .pp-options { max-height: calc(96vh - 150px); overflow: auto; } .pp-options .field-grid { gap: 8px; } .pp-options label { margin-top: 8px; }
.pp-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-height: 300px; align-content: start; }
.pp-media.empty { grid-template-columns: minmax(0, 1fr); }
.pp-media figure { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: #222226; } .pp-media figure:only-child { grid-column: 1 / -1; aspect-ratio: 4 / 5; }
.pp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-video, .pp-n { position: absolute; left: 8px; top: 8px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgb(0 0 0 / 60%); color: #fff; font-size: 11px; font-weight: 800; } .pp-video { left: auto; right: 38px; }
.pp-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgb(0 0 0 / 60%); color: #fff; font-size: 16px; cursor: pointer; opacity: 0; transition: opacity .15s; } .pp-media figure:hover .pp-x { opacity: 1; }
.pp-empty { display: grid; place-content: center; justify-items: center; gap: 6px; min-height: 300px; padding: 16px; border: 2px dashed var(--border); border-radius: 16px; background: transparent; color: var(--muted); font: inherit; text-align: center; } .pp-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; } .pp-empty b { color: var(--text); font-size: 15px; } .pp-empty span { font-size: 12.5px; }
.pp-media-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp-main { display: grid; gap: 14px; min-width: 0; }
.pp-step { padding: 14px 16px; border: 1px solid var(--border); border-radius: 16px; background: rgb(var(--ink) / 2%); display: grid; gap: 10px; }
.pp-step h3 { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #2f6bff; } .pp-step h3 .when-echo { text-transform: none; letter-spacing: 0; font-weight: 500; }
.pp-step .hint { margin: 0; }
.pp-formats { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-format { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 7px 12px 7px 9px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); cursor: pointer; transition: border-color .15s, background .15s; }
.pp-format input { display: none; } .pp-format:has(input:checked) { border-color: var(--accent); background: rgb(47 107 255 / 14%); color: var(--text); }
.pp-logo { display: inline-grid; width: 18px; height: 18px; } .pp-logo svg { width: 100%; height: 100%; }
.pp-phones { display: flex; flex-wrap: wrap; gap: 6px; } .pp-chip { display: inline-flex; margin: 0; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); cursor: pointer; } .pp-chip input { display: none; } .pp-chip:has(input:checked) { border-color: var(--accent); color: var(--text); background: rgb(47 107 255 / 10%); }
.pp-caption-head { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--muted); }
.pp-step textarea[name="caption"] { min-height: 120px; }
#slide-captions { display: grid; gap: 8px; } #slide-captions > .pp-toggle { border: 1px solid var(--border); border-radius: 12px; } #slide-captions[hidden] { display: none; }
.pp-slides { display: grid; gap: 8px; } .pp-slide { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: start; } .pp-slide img { width: 56px; height: 70px; object-fit: cover; border-radius: 8px; display: block; } .pp-slide .pp-n { left: 4px; top: 4px; min-width: 18px; height: 18px; font-size: 10px; padding: 0 4px; } .pp-slide textarea { margin: 0; min-height: 70px; }
.pp-when { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 8px; } .pp-when input { margin: 0; }
.pp-quick { display: flex; flex-wrap: wrap; gap: 6px; } .pp-q { padding: 6px 11px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .pp-q:hover { color: var(--text); border-color: var(--accent); } .pp-q.ghost { border-style: dashed; }
.pp-real { margin: 2px 0 0; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--text); } .pp-real small { color: var(--dim); font-weight: 500; }
.pp-more { border: 1px solid var(--border); border-radius: 16px; padding: 0 14px; background: rgb(var(--ink) / 2%); } .pp-more summary { padding: 12px 0; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text); } .pp-more[open] { padding-bottom: 14px; } .pp-more[open] summary { color: var(--text); }
.pp-foot { position: sticky; bottom: 0; margin: 18px -22px 0; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--panel); z-index: 2; }
@media (max-width: 860px) { .pp-body { grid-template-columns: minmax(0, 1fr); } .pp-media-col { position: static; } .pp-media, .pp-empty { min-height: 200px; } }

/* Tout tient sans défiler, même dans une petite fenêtre (30/09/2026) : en-tête d'une ligne, étapes serrées. */
dialog.pp .pp-modal { width: min(1040px, calc(100vw - 110px)); padding: 16px 18px 0; max-height: 96vh; }
dialog.pp .modal-head { margin-bottom: 10px; } dialog.pp .modal-head .eyebrow { display: none; } dialog.pp .modal-head h2 { margin: 0; font-size: 18px; }
.pp-body { grid-template-columns: 280px minmax(0, 1fr); gap: 16px; }
.pp-main { gap: 10px; } .pp-step { padding: 10px 12px; gap: 8px; border-radius: 14px; }
.pp-media, .pp-empty { min-height: 230px; } .pp-media figure { aspect-ratio: 1; } .pp-media figure:only-child { aspect-ratio: 4 / 5; max-height: 300px; }
.pp-formats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 5px; } .pp-format { flex: none; padding: 5px 10px 5px 7px; font-size: 12.5px; } .pp-logo { width: 16px; height: 16px; }
#format-hint { display: none; }
.pp-step textarea[name="caption"] { min-height: 74px; height: 74px; resize: vertical; } .pp-step input[name="hashtags"] { height: 36px; padding-top: 6px; padding-bottom: 6px; }
.pp-caption-head { display: none; } .pp-caption-head:has(#write-caption:not([hidden])) { display: flex; }
.pp-when { grid-template-columns: minmax(0, 1fr) 110px; } .pp-when input { height: 38px; padding-top: 6px; padding-bottom: 6px; }
.pp-q { padding: 4px 9px; font-size: 12px; }
.pp-foot { margin: 12px -18px 0; padding: 10px 18px; }
/* Petit écran (02/10/2026) : une colonne (médias puis étapes), et sur téléphone la fenêtre prend tout l'écran,
   le titre et « Fermer » restent en haut, les boutons en bas. Les règles ci-dessus repassaient en deux colonnes. */
@media (max-width: 860px) { .pp-body { grid-template-columns: minmax(0, 1fr); } .pp-media-col { position: static; } dialog.pp .pp-modal { width: min(1040px, calc(100vw - 32px)); } }
@media (max-width: 640px) {
  dialog.pp { inset: 0; margin: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; }
  dialog.pp .pp-modal { width: 100vw; height: 100dvh; max-height: none; border: 0; border-radius: 0; padding: 0 14px; box-sizing: border-box; display: flex; flex-direction: column; } dialog.pp .pp-body { flex: 1 0 auto; }
  dialog.pp .modal-head { position: sticky; top: 0; z-index: 3; margin: 0 -14px 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; border-bottom: 1px solid var(--border); background: var(--panel); }
  .pp-body { gap: 12px; } .pp-media, .pp-empty { min-height: 150px; } .pp-media figure:only-child { max-height: 260px; }
  .pp-when { grid-template-columns: minmax(0, 1fr) minmax(0, 104px); }
  .pp-options { max-height: none; overflow: visible; padding: 0; border: 0; background: none; } .pp-options > h3 { padding: 2px 2px 0; } .pp-options .field-grid { grid-template-columns: minmax(0, 1fr); } .pp-body.opts .pp-media-col { display: none; }
  /* Safari iOS : les champs date / heure ont une largeur et une hauteur à eux, ils débordaient de la carte. */
  .pp-when input { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%; height: 42px; box-sizing: border-box; text-align: left; } .pp-when input::-webkit-date-and-time-value { text-align: left; margin: 0; }
  .pp-foot { margin: 12px -14px 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
}
/* La fenêtre .pp porte sa largeur (1040 px) : le plafond général des <dialog> (900 px) la laissait déborder à droite,
   décentrée (03/10/2026). Profil et Scroll du cockpit : une colonne, plus étroits, pastilles avec logos. */
dialog.pp { max-width: none; }
dialog.pp.pp-narrow .pp-modal { width: min(640px, calc(100vw - 32px)); }
.pp-body.pp-single { grid-template-columns: minmax(0, 1fr); }
.pp-media-col[hidden] { display: none; }
.pp-formats.wrap { flex-wrap: wrap; overflow: visible; }
.pp-logo img { width: 100%; height: 100%; border-radius: 4px; object-fit: contain; display: block; }
.pp-format:has(input:disabled) { opacity: .4; cursor: not-allowed; }
.pp-step label { margin-top: 0; }
@media (max-width: 640px) { dialog.pp.pp-narrow .pp-modal { width: 100vw; } }
/* La fiche de post incrustée : un indicateur pendant son premier chargement, plutôt qu'un fond flou seul. */
.post-sheet-loading { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; }
.post-sheet-loading[hidden] { display: none; }
.post-sheet-loading > div { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); color: var(--muted); font-size: 13px; box-shadow: 0 20px 60px rgb(0 0 0 / 30%); }
/* L'aperçu d'une tâche (03/10/2026) : la carte de Xylacs, en long dans la Journée (médias à gauche), en grand dans sa fenêtre. */
.run-preview:empty { display: none; }
.task-preview { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 10px; padding: 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.task-preview:not(:has(.task-preview-media)) { grid-template-columns: minmax(0, 1fr); }
.task-preview-media { min-width: 0; } .task-preview-media .xy-media { border-radius: 10px; }
.task-preview .xy-post-b { padding: 2px 2px 2px 0; gap: 6px; } .task-preview .xy-post-b p { -webkit-line-clamp: 6; }
.task-preview .xy-post-tags { flex-wrap: wrap; }
.task-preview-dialog .modal { width: min(460px, calc(100vw - 32px)); }
.task-preview-dialog .task-preview { grid-template-columns: minmax(0, 1fr); margin: 0; border: 0; padding: 0; background: none; }
.task-preview-dialog .task-preview-media .xy-media { max-height: 62vh; aspect-ratio: 4 / 5; }
.task-preview-dialog .xy-post-b p { -webkit-line-clamp: unset; font-size: 13px; }
.todo-item.previewable { cursor: pointer; } .todo-item.previewable:hover { border-color: var(--border-strong); }
.run-log-fold { margin-top: 8px; } .run-log-fold summary { cursor: pointer; font-size: 12px; color: var(--muted); }
/* Les rails et le dock immobiles au survol (03/10/2026, « ils bougent bizarrement » dans Safari) : plus de ressort,
   de rotation, de halo animé ni de changement de plan au survol — seulement la couleur du fond et la bulle du nom.
   Les rails restent au premier plan en permanence (leurs bulles passent devant l'écran sans changer de calque). */
.rail { z-index: 10; }
.rail-btn, .dock-btn { transition: background-color .15s, color .15s !important; }
.rail-btn:hover, .dock-btn:hover, .rail-btn:active, .dock-btn:active { transform: none !important; box-shadow: none !important; filter: none !important; }
.rail-btn svg, .dock-btn svg, .rail-apps .rail-btn[data-app] img { transition: none !important; transform: none !important; }
.rail-btn:active, .dock-btn:active { background: rgb(var(--ink) / 12%); }
.rail-btn span, .dock-btn span { transition: opacity .12s !important; }
/* Icônes centrées dans Safari (03/10/2026) : un <button> en grille y était rendu en ligne — l'icône posée sur la
   ligne de base, un peu basse. En flex, centrée ; la bulle du nom reste en position absolue. */
@media (min-width: 641px) { .rail-btn, .dock-btn { display: flex; align-items: center; justify-content: center; } }
.rail-btn svg, .dock-btn svg { display: block; flex: none; }

/* L'ombre du téléphone en thème clair (03/10/2026, « une sorte d'ombre bizarre ») : resserrée (28 px au lieu de 60)
   et plus légère, elle ne déborde plus sur le dock en dessous. */
/* Le dock au-dessus de l'ombre du téléphone (03/10/2026, « y'a encore l'ombre ») : non positionné, il était peint
   avant le châssis (positionné), dont l'ombre le grisait en dégradé. */
.dock { position: relative; z-index: 2; }
/* Thème clair : plus d'ombre portée ni de halo autour du téléphone (03/10/2026) — ils voilaient de gris le fond et
   le dock ; le liseré du châssis suffit. */
/* Thème clair : le châssis noir sans ombre portée ni halo bleu (03/10/2026, « y'a encore l'ombre » — elle voilait
   de gris le fond jusqu'au dock). Le contour titane reste. */
:root[data-theme="light"] .phone-frame, :root[data-theme="light"] .phone-frame.live { box-shadow: 0 0 0 1.5px #4a4b51, 0 0 0 3px #111114, inset 0 0 0 1px rgb(255 255 255 / 6%) !important; }
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .phone-frame, :root:not([data-theme="dark"]) .phone-frame.live { box-shadow: 0 0 0 1.5px #4a4b51, 0 0 0 3px #111114, inset 0 0 0 1px rgb(255 255 255 / 6%) !important; }
}
/* Le cockpit ne coupe plus ce qui dépasse 14 px avant le bas de la fenêtre (03/10/2026, « un trait entre le bas de
   Safari et le bas des boutons ») : une ombre y était tranchée net. La page (body, 100vh) coupe déjà au bord. */
@media (min-width: 1101px) { .shell.cockpit { overflow: visible; } }
/* Les boutons de la tranche (03/10/2026, « un peu bug ») : la bulle à l'extérieur du châssis, à côté du bouton (à droite
   pour ceux de droite, à gauche pour ceux de gauche), au-dessus des rails ; plus de ressort au clic. */
.side-btn { transition: background-color .15s !important; }
.side-btn:active { transform: none !important; filter: brightness(.85); }
.side-btn span { top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; z-index: 20 !important; }
.side-btn.power span, .phone-frame.android .side-btn.vol-up span, .phone-frame.android .side-btn.vol-down span { left: calc(100% + 10px) !important; right: auto !important; }
.phone-frame:not(.android) .side-btn.vol-up span, .phone-frame:not(.android) .side-btn.vol-down span, .side-btn.mute span { right: calc(100% + 10px) !important; left: auto !important; }
.side-btn:hover span { opacity: 1; }

/* La liste des téléphones (03/10/2026, « enlève iPhone et remplace les ronds par un logo apple/android ») : plus
   d'intitulé de section, la pastille devient le logo du système, gris débranché, vert branché (ou en tâche). */
.phone-tabs a .pdot { width: 15px; height: 15px; border-radius: 0; background: var(--dim); box-shadow: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701'/%3E%3C/svg%3E") center / contain no-repeat; }
.phone-tabs a[data-platform="android"] .pdot { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.5 3.5 23 16'%3E%3Cpath d='M17.6 9.48l1.84-3.18c.16-.31.04-.69-.26-.85a.637.637 0 0 0-.83.22l-1.88 3.24a11.43 11.43 0 0 0-8.94 0L5.65 5.67a.643.643 0 0 0-.87-.2c-.28.18-.37.54-.22.83L6.4 9.48A10.78 10.78 0 0 0 1 18h22a10.78 10.78 0 0 0-5.4-8.52zM7 15.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm10 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.5 3.5 23 16'%3E%3Cpath d='M17.6 9.48l1.84-3.18c.16-.31.04-.69-.26-.85a.637.637 0 0 0-.83.22l-1.88 3.24a11.43 11.43 0 0 0-8.94 0L5.65 5.67a.643.643 0 0 0-.87-.2c-.28.18-.37.54-.22.83L6.4 9.48A10.78 10.78 0 0 0 1 18h22a10.78 10.78 0 0 0-5.4-8.52zM7 15.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm10 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5z'/%3E%3C/svg%3E"); }
.phone-tabs a .pdot.on, .phone-tabs a .pdot.run { background: var(--success-solid); box-shadow: none; }
.phone-tabs a .pdot.remote { background: var(--dim); opacity: .6; box-shadow: none; }
.phone-list .phone-tabs-sep::before { content: none; }
.phone-list .phone-tabs-sep.first { display: none; }
.phone-list .phone-tabs-sep:not(.first) { padding: 0; margin: 6px 4px; }

/* Xylacs en renard (03/10/2026, pack « xylacs-pack ») : sa tête dans la bulle, l'en-tête et les messages ; son corps
   sur l'écran d'accueil de la conversation (au repos, ou qui réfléchit quand il manque une IA). Le dégradé IA du pack
   remplace l'ancien arc-en-ciel. */
:root { --xy-rainbow: linear-gradient(135deg, #4f8bff, #9b6bff 35%, #ff5fa2 70%, #ffb648); --xy-rainbow-ring: conic-gradient(from var(--xy-turn, 0deg), #4f8bff, #9b6bff, #ff5fa2, #ffb648, #4f8bff); }
.xy-bubble img { width: 52px; height: 52px; display: block; border-radius: 16px; }
.xy-avatar img { width: 100%; height: 100%; display: block; border-radius: 30%; }
.xy-pose { width: 150px; height: auto; margin: -8px 0 -4px; filter: drop-shadow(0 10px 18px rgb(255 95 162 / 22%)); animation: xy-float 3.2s ease-in-out infinite; user-select: none; }
@keyframes xy-float { 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .xy-pose { animation: none; } }
@media (max-width: 640px) { .xy-bubble img { width: 48px; height: 48px; border-radius: 15px; } .xy-pose { width: 132px; } }
/* La carte de post de Xylacs (03/10/2026) : la légende garde ses retours à la ligne, se déplie au toucher ; un lien
   l'ouvre dans le Calendrier. */
.xy-post-b { cursor: pointer; } .xy-post-b p { white-space: pre-line; } .xy-post-b.open p { -webkit-line-clamp: unset; display: block; }
.xy-open { margin-top: 2px; color: #2f6bff; font-size: 12px; font-weight: 600; text-decoration: none; } .xy-open:hover { text-decoration: underline; }
/* Pas de zoom de Safari en touchant le champ : 16 px au moins sur téléphone. */
@media (max-width: 640px) { .xy-compose textarea { font-size: 16px; } }
/* Le cockpit sur téléphone (03/10/2026) : les deux colonnes centrées dans leur marge (autant d'écart au bord qu'au
   téléphone), des noms de téléphones plus petits, les boutons du voile qui passent à la ligne dans un écran étroit,
   et la bulle de Xylacs plus petite (rangée par compagnon.js sous la colonne de droite). */
@media (max-width: 640px) {
    .phone-rig { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 4px; }
    .phone-rig > .rail { justify-self: center; }
    .phone-frame { width: min(calc(100vw - 132px), calc((100vh - 300px) * 1.022 / var(--phone-ratio, 2.174))); }
    .screen-veil { padding: 14px 10px; }
    .veil-tools .button { flex: 1 1 100%; max-width: 100%; white-space: normal; min-width: 0; }
    .phone-tabs a { font-size: 11px; padding: 5px 9px; gap: 6px; }
}
/* Les boutons du voile sur téléphone (03/10/2026, « trop gros et mal centrés ») : petits, de même largeur, empilés. */
@media (max-width: 640px) {
    .veil-tools { flex-direction: column; align-items: center; gap: 6px; margin-top: 12px; }
    .veil-tools .button { flex: none; width: min(100%, 168px); min-height: 0; padding: 6px 10px; font-size: 12px; line-height: 1.25; white-space: normal; }
    .screen-veil { font-size: 12px; }
}
/* La bulle de Xylacs sur téléphone (03/10/2026, « une bulle en bas à droite qui reste où elle est ») : fixe, sans
   aucun recalage après le chargement. */
@media (max-width: 640px) { .xy-bubble { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: 46px; height: 46px; } .xy-bubble img { width: 46px; height: 46px; } }
/* Le renard animé de Xylacs (03/10/2026) : grand sur l'accueil, petit à la place des trois points pendant qu'il réfléchit. */
.xy-fox { display: block; } .xy-fox-svg { display: block; width: 100%; height: auto; overflow: visible; }
.xy-fox-slot { display: block; width: 170px; margin: -10px 0 -8px; }
.xy-typing .xy-fox { width: 74px; margin: -6px 0 -10px -6px; }
.xy-typing { display: block; padding: 0; }
@media (max-width: 640px) { .xy-fox-slot { width: 150px; } }
/* Cockpit sur téléphone (03/10/2026, « déplace la bannière du scroll auto », « l'url en bas gêne les boutons du tel ») :
   le bandeau d'une automatisation passe en haut de la scène, entre les boutons lien et réglages ; le téléphone se règle
   sur la hauteur réellement visible (svh : barres de Safari affichées) ; noms des téléphones plus petits. */
@media (max-width: 640px) {
    .stage .running-bar, .stage .stream-status { top: 0; bottom: auto; max-width: calc(100% - 140px); font-size: 11.5px; padding: 3px 3px 3px 10px; gap: 8px; }
    .stage .running-bar .button { min-height: 26px; padding: 0 9px; font-size: 11.5px; }
    .stage .running-bar #running-text { overflow: hidden; text-overflow: ellipsis; }
    .stage .running-bar:not([hidden]) ~ .stream-status:not([hidden]) { top: 40px; bottom: auto; }
    .phone-frame { width: min(calc(100vw - 132px), calc((100svh - 255px) * 1.022 / var(--phone-ratio, 2.174))); }
    .phone-tabs a { font-size: 10.5px; padding: 4px 8px; gap: 5px; }
    .phone-tabs a .pdot { width: 13px; height: 13px; }
}
/* Le téléphone remonte (03/10/2026, « les boutons sont trop collés, monte le tel ») : sur téléphone, la rangée lien /
   réglages se pose en haut de la scène, dans les marges à côté du téléphone, au lieu de le pousser vers le bas. */
@media (max-width: 640px) {
    .stage > .stage-head { position: absolute; top: 0; left: 0; right: 0; z-index: 12; pointer-events: none; } /* au-dessus des colonnes (z 10) : ses menus s'ouvrent devant */
    .stage > .stage-head * { pointer-events: auto; }
}
/* Le renard dans sa scène, comme dans les vidéos du pack (03/10/2026, « intègre mieux les vidéos du renard ») : un fond
   violet nuit en dégradé, coins arrondis, le sol en pointillés — en clair, la version lavande du pack. */
.xy-fox-slot, .xy-typing .xy-fox { border-radius: 22px; background: radial-gradient(120% 90% at 50% 25%, #2a2160 0%, #14122a 62%); border: 1px solid #2a2648; overflow: hidden; box-shadow: 0 10px 30px rgb(20 18 42 / 35%); }
.xy-fox-slot { width: 210px; aspect-ratio: 6 / 5; margin: 0 0 4px; display: grid; place-items: center; }
.xy-fox-slot .xy-fox { width: 100%; }
.xy-typing .xy-fox { width: 84px; aspect-ratio: 6 / 5; margin: 2px 0; border-radius: 14px; box-shadow: none; }
:root[data-theme="light"] .xy-fox-slot, :root[data-theme="light"] .xy-typing .xy-fox { background: radial-gradient(120% 90% at 50% 25%, #e9e3ff 0%, #ffffff 62%); border-color: #ddd8f0; box-shadow: 0 10px 30px rgb(110 102 168 / 18%); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .xy-fox-slot, :root:not([data-theme="dark"]) .xy-typing .xy-fox { background: radial-gradient(120% 90% at 50% 25%, #e9e3ff 0%, #ffffff 62%); border-color: #ddd8f0; box-shadow: 0 10px 30px rgb(110 102 168 / 18%); } }
@media (max-width: 640px) { .xy-fox-slot { width: 180px; } }

/* Cockpit sur téléphone (03/10/2026, « ça monte sur les réseaux », « colle les boutons à la photo de profil ») : les colonnes ne dépassent jamais la hauteur du téléphone (dix apps : la colonne défile), icônes de 38 px ; boutons du haut resserrés contre l'avatar (le conteneur des bandeaux, vide, faisait un écart de plus). */
.topbar-actions > [data-live-banners]:empty { display: none; }
@media (max-width: 640px) {
    .topbar-actions { gap: 4px; }
    .phone-rig > .rail { align-self: center; max-height: calc(min((100vw - 132px) * var(--phone-ratio, 2.174) / 1.022, 100svh - 255px) - 80px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
    .phone-rig > .rail::-webkit-scrollbar { display: none; }
    .rail-apps .rail-btn[data-app] { width: 38px; height: 38px; flex: none; }
    .rail-apps { gap: 3px; padding: 4px; }
}
/* La fiche « Publier » (03/10/2026, « cette pop-up sur fond blanc c'est moche ») : le cadre caché tant que la fiche
   n'est pas prête (Safari le peignait en blanc), l'indicateur sur un fond sombre voilé ; prête, la fiche a son propre fond. */
.post-sheet iframe { opacity: 0; transition: opacity .15s ease; }
.post-sheet.ready iframe { opacity: 1; }
.post-sheet:not(.ready)::backdrop { background: rgb(5 5 8 / 55%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* Cockpit sur téléphone, restructuré (03/10/2026, « réarrange tout, c'est mal structuré ») : trois colonnes — le bouton lien posé sur la colonne d'apps, le téléphone et son dock au centre, le bouton réglages posé sur la colonne d'actions ; les deux colonnes partent de la même hauteur, sous leur bouton. */
@media (max-width: 640px) {
    .cockpit { --fw: min(calc(100vw - 132px), calc((100svh - 255px) * 1.022 / var(--phone-ratio, 2.174))); --col: calc((100vw - 20px - var(--fw) - 8px) / 2); }
    .stage > .stage-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0; }
    .stage > .stage-head > .stage-left, .stage > .stage-head > .stage-tools { width: var(--col); flex: none; display: flex; justify-content: center; margin: 0; }
    .stage > .stage-head > .stage-tools { margin-left: auto; }
    .phone-rig > .rail { align-self: start; margin-top: 44px; max-height: calc(min((100vw - 132px) * var(--phone-ratio, 2.174) / 1.022, 100svh - 255px) - 52px); }
}
/* Moins d'écart entre la navigation et la barre des téléphones sur téléphone (03/10/2026) : 8 px au lieu de 24. */
@media (max-width: 640px) { main.shell.cockpit { padding-top: 8px; } }
/* Le téléphone prend toute la hauteur visible (03/10/2026, « récupère l'espace en bas ») : la scène commence à 187 px,
   le dock (52 px) et 12 px de marge dessous — 252 px au total ; Journée / ScalyX / Réglages passent sous le pli. */
/* Le dock décollé du téléphone comme les deux colonnes (03/10/2026) : 22 px ; la hauteur du téléphone recule d'autant (270 px). */
@media (max-width: 640px) { .phone-rig { row-gap: 22px; } }
/* Écarts réguliers en haut du cockpit sur téléphone (03/10/2026, « nav bar – liste des tels – tel n'ont pas le même
   espacement ») : 10 px partout ; la barre des téléphones compacte (42 px : le bouton « Ajouter » de 44 px étirait tous
   les onglets) ; le dock ne dépasse jamais la largeur entre les deux colonnes (il passait sous la bulle de Xylacs). */
@media (max-width: 640px) {
    main.shell.cockpit { padding-top: 10px; row-gap: 10px; }
    .phone-tabs-row { padding: 0; }
    .phone-tabs { padding: 3px; }
    .phone-list .phone-tabs a, .phone-tabs a { min-height: 0; height: auto; padding: 6px 10px; }
    .phone-list .phone-tabs { padding: 3px; align-items: center; height: auto; min-height: 0; }
    .phone-list .phone-tabs-row { height: auto; min-height: 0; }
    .phone-list .phone-tabs .phone-add, .phone-tabs .phone-add { width: auto; min-height: 0; margin: 0; height: 28px; padding: 0 10px; font-size: 10.5px; line-height: 1; border-radius: 9px; }
    .dock { max-width: calc(100vw - 132px); }
    .dock .dock-btn { flex: 1 1 0; min-width: 0; }
    .dock .dock-btn span { max-width: 100%; }
}
@media (max-width: 640px) { .phone-list .phone-tabs > .phone-add { margin: 0 !important; align-self: center; } }
/* La bulle de Xylacs refaite (05/10/2026, « le renard est mal intégré, son ombre est coupée sur téléphone ») : un
   bouton rond comme les autres de l'interface, la tête du renard détourée, un fin anneau aux couleurs de l'IA ; une
   ombre courte et centrée (rien ne déborde du bord de l'écran ni sous la barre de Safari). Plus de halo flou qui
   tournait en continu : il faisait repeindre la page à chaque image, pendant que la vidéo du téléphone se décodait. */
.xy-bubble { width: 54px; height: 54px; border-radius: 50%; background: var(--panel-elevated, var(--panel)); box-shadow: 0 4px 14px rgb(0 0 0 / 28%), 0 0 0 1px rgb(var(--ink) / 6%); overflow: visible; }
.xy-bubble::before { content: none; animation: none; }
.xy-bubble .xy-ring { position: absolute; inset: 0; border-radius: 50%; padding: 2px; background: linear-gradient(135deg, #4f8bff, #9b6bff 35%, #ff5fa2 70%, #ffb648); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: .9; pointer-events: none; transition: opacity .2s; }
.xy-bubble .xy-head-img { width: 38px; height: auto; margin-top: 2px; border-radius: 0; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 25%)); pointer-events: none; transition: transform .25s var(--ease, ease); }
.xy-bubble:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgb(0 0 0 / 30%), 0 0 0 1px rgb(var(--ink) / 8%); }
.xy-bubble:hover .xy-head-img { transform: rotate(-8deg) scale(1.06); }
.xy-bubble.on { transform: scale(.94); }
/* Pendant qu'il travaille : l'anneau tourne — une rotation, faite par la carte graphique sans repeindre. */
.xy-bubble.busy::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; padding: 2px; background: conic-gradient(#4f8bff, #9b6bff, #ff5fa2, #ffb648, transparent 80%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: xy-spin 1.1s linear infinite; }
@keyframes xy-spin { to { transform: rotate(360deg); } }
.xy-bubble .xy-dot { top: 0; right: 0; }
@media (max-width: 640px) {
    .xy-bubble { width: 48px; height: 48px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 2px 8px rgb(0 0 0 / 30%), 0 0 0 1px rgb(var(--ink) / 6%); }
    .xy-bubble .xy-head-img { width: 34px; height: auto; }
}
@media (prefers-reduced-motion: reduce) { .xy-bubble.busy::after { animation: none; } }
/* Les pastilles « en direct » : la pulsation passe par l'opacité et l'échelle (carte graphique) plutôt que par une
   ombre animée qui faisait repeindre à chaque image (05/10/2026, petites pertes d'images au contrôle des téléphones). */
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 60% { opacity: .55; transform: scale(.8); } }
@keyframes pulse-warn { 0%, 100% { opacity: 1; transform: scale(1); } 60% { opacity: .55; transform: scale(.8); } }
/* Les onglets du bas au survol (05/10/2026, « Journée oui, mais ScalyX et Réglages non ») : le même rectangle que
   l'onglet ouvert, en plus léger. */
@media (hover: hover) { .deck-tab:not([aria-selected="true"]):hover { background: rgb(var(--ink) / 6%); color: var(--text); } }
/* Le survol des boutons, un seul geste (05/10/2026, « la pause et la cloche réagissent, le thème et les réglages non ;
   Déconnecter clignote, comme une double animation ») : trois couches de règles s'empilaient — un éclaircissement et
   une ombre bleue posés d'un coup, et un fond qui glissait en 0,15 s. Désormais : le fond et la bordure, en fondu, et
   rien d'autre ; le même pour tous les boutons, en clair comme en sombre. */
.button, .icon-button { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.button:hover, .icon-button:hover, .button.primary:hover { filter: none; box-shadow: none; animation: none; }
.button.secondary:hover, .icon-button:hover { background: rgb(var(--ink) / 7%); border-color: var(--border-strong); }
.button.ghost:hover { background: rgb(var(--ink) / 7%); color: var(--text); box-shadow: none; }
.button.danger:hover { box-shadow: none; }
.button:hover [aria-hidden] { animation: none; }

/* Une tâche en cours (05/10/2026, « change le vert en jaune quand une tâche est en cours ») : un seul jaune, lisible en
   clair comme en sombre — le point de la carte, celui de la Journée et le logo du téléphone dans la liste. */
:root { --busy: #f5b301; }
.running-bar .dot, .live-dot.running, .live-dot.on.running { background: var(--busy); box-shadow: 0 0 8px rgb(245 179 1 / 45%); }
.pdot.run, .phone-tabs a .pdot.run { background: var(--busy); }
.run-preview-body { display: contents; }

/* « Écrire avec Xylacs » (05/10/2026) : le renard et un liseré dégradé, comme la maquette. */
.button.xy-write { display: inline-flex; align-items: center; gap: 7px; padding: 4px 13px 4px 4px; border-radius: 999px; border: 1.5px solid transparent;
    background: linear-gradient(var(--panel-solid, var(--panel, #fff)), var(--panel-solid, var(--panel, #fff))) padding-box, linear-gradient(90deg, #2f6bff, #a66bff 55%, #f5a524) border-box; color: var(--text); font-weight: 700; }
.button.xy-write .xy-write-ico { width: 24px; height: 24px; border-radius: 50%; background: #fff3e8; flex: none; }
/* Le survol suit le thème (06/10/2026 : « illisible » — un fond clair de secours, texte clair en thème sombre). */
.button.xy-write:hover:not(:disabled) { --xy-hover: color-mix(in srgb, #2f6bff 12%, var(--panel-solid, var(--panel, #fff))); background: linear-gradient(var(--xy-hover), var(--xy-hover)) padding-box, linear-gradient(90deg, #2f6bff, #a66bff 55%, #f5a524) border-box; color: var(--text); }

/* Barre du haut sous Safari (06/10/2026) : au survol, la luminosité (filter) et l'icône animée faisaient clignoter le
   curseur (main ↔ flèche). Survol en couleur seulement, icônes immobiles. */
.topbar .icon-button:hover, .topbar .ms-btn:hover { filter: none; }
.topbar .icon-button svg, .topbar .ms-btn img, .topbar .ms-btn .ms-initial { transition: none; transform: none !important; }

/* Barre du haut (06/10/2026, diagnostic ?debug-souris=1) : entre deux boutons, 8 px « morts » où le curseur repassait en
   flèche et où un clic ne faisait rien — d'un bouton à l'autre, la souris clignotait main ↔ flèche. Chaque bouton
   déborde d'une zone cliquable invisible (5 px de côté, 6 px en hauteur) : les zones se touchent, le dessin ne change pas. */
.topbar-actions .icon-button, .topbar-actions .ms-btn, .topbar-actions .acct > summary { position: relative; overflow: visible; }
.topbar-actions .icon-button::after, .topbar-actions .ms-btn::after, .topbar-actions .acct > summary::after { content: ''; position: absolute; inset: -6px -5px; width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; }