/* public/dashboard/styles/apps.css — LES APPLIS (spec Atlas § 4 et § 5 ; Conclure, spec 2026-10-29 § 4) : la barre (le sélecteur et les onglets, en
   tête sur ordinateur, en bas sur téléphone) et l'accueil (la carte, le chiffre, le bouton). Chaque règle vise une classe
   `app-*` ou vit sous la peau `:root[data-skin="atlas"]` ; seule public/dashboard.html charge cette feuille : la console
   ne la reçoit jamais. Couleurs, traits et coins viennent des jetons de l'Atlas (tokens.css). */

/* L'espace n'a plus de barre latérale : la zone principale prend toute la largeur. */
:root[data-skin="atlas"] #tenant-shell-root { grid-template-columns: minmax(0, 1fr); }

/* ---------- La barre : le sélecteur, puis les onglets en tête ---------- */
.app-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-5); background: var(--panel);
  border-bottom: var(--line, 1.5px) solid var(--rule, var(--border));
}
/* Sur ordinateur, le sélecteur et les onglets restent sous la barre haute pendant qu'on fait défiler la page (sa hauteur
   mesurée par apps/shell.js) ; les menus de la barre haute (z-index 60) passent au-dessus. */
:root[data-skin="atlas"] .app-bar { position: sticky; top: var(--shell-topbar-h, 0px); z-index: 50; }
.app-switch { display: inline-flex; margin: var(--space-2) 0; border: var(--line, 1.5px) solid var(--rule, var(--border)); border-radius: var(--radius-sm); }
.app-switch button {
  min-height: var(--target-min, 44px); padding: 0 var(--space-4); margin: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--text); font: inherit; font-weight: 700; cursor: pointer;
}
.app-switch button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.app-switch button:focus-visible, .app-tab:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.app-tabs ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-1); }
.app-tab {
  display: flex; align-items: center; min-height: var(--target-min, 44px); padding: 0 var(--space-3);
  color: var(--muted); text-decoration: none; font-weight: 700; border-bottom: 3px solid transparent;
}
.app-tab:hover { color: var(--text); }
.app-tab[aria-current="page"] { color: var(--text); border-bottom-color: var(--live, var(--brand-solid)); }

/* La barre haute passe au-dessus des barres du bas (la barre d'appel, et sur téléphone les onglets), à toute largeur : son
   menu du compte et sa cloche s'ouvrent par-dessus, jamais dessous. */
:root[data-skin="atlas"] .shell-topbar { z-index: 60; }

/* ---------- Cibles : 44 px au moins sous la peau (spec § 5) ---------- */
/* La barre haute, le menu du compte, les boutons, les boutons icônes (fermer une fenêtre, retirer une étiquette), les
   champs et les touches de la barre d'appel n'ont que leur remplissage pour hauteur (25 à 40 px) ; la console, qui ne
   reçoit pas cette feuille, garde les siens. Le plancher est le jeton de cible ; le bouton unique de l'accueil a son
   minimum, plus haut (`.app-gesture`). Un lien en bouton est un flex : sa hauteur tient et son texte reste centré. Le
   clavier d'appel a six touches, chacune de 44 px de large au moins ; un bouton icône est carré. */
:root[data-skin="atlas"] .shell-account-btn,
:root[data-skin="atlas"] .shell-bell,
:root[data-skin="atlas"] .shell-search-box,
:root[data-skin="atlas"] .shell-presence-actions button,
:root[data-skin="atlas"] .shell-account-item,
:root[data-skin="atlas"] .ui-icon-btn,
:root[data-skin="atlas"] .callbar-dialpad input,
:root[data-skin="atlas"] .callbar-wrapup select,
:root[data-skin="atlas"] .callbar-wrapup textarea,
:root[data-skin="atlas"] .callbar-dtmf button,
:root[data-skin="atlas"] .ui-btn:not(.app-gesture) { min-height: var(--target-min, 44px); }
:root[data-skin="atlas"] .shell-bell,
:root[data-skin="atlas"] .ui-icon-btn { min-width: var(--target-min, 44px); }
:root[data-skin="atlas"] .ui-icon-btn { display: inline-flex; align-items: center; justify-content: center; }
:root[data-skin="atlas"] a.ui-btn { display: inline-flex; align-items: center; justify-content: center; }
:root[data-skin="atlas"] .callbar-dtmf { grid-template-columns: repeat(6, minmax(var(--target-min, 44px), 1fr)); }

/* ---------- L'accueil : la carte au centre, le chiffre et le bouton dans un panneau ---------- */
.app-home-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: var(--space-4); align-items: start; margin-bottom: var(--space-5); }
.app-home-panel {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-4);
  background: var(--panel); border: var(--line, 1.5px) solid var(--rule, var(--border)); border-radius: var(--radius-sm);
}
.app-gesture { align-self: stretch; justify-content: center; min-height: 48px; font-size: var(--font-4); text-align: center; }
.app-home-link { display: inline-flex; align-items: center; min-height: var(--target-min, 44px); color: var(--text); font-weight: 700; }
/* Le donneur d'ordre sans rien à vérifier : une ligne d'état calme, sans bouton ; Suivre liste ses campagnes sous la bande. */
.app-home-calm { margin: 0; color: var(--muted); font-size: var(--font-3); line-height: 1.5; }
.app-home-campaigns { margin-bottom: var(--space-5); }
.app-map { padding: var(--space-3); background: var(--panel); border: var(--line, 1.5px) solid var(--rule, var(--border)); border-radius: var(--radius-sm); }
.app-map-title { margin: 0 0 var(--space-2); font-size: var(--font-3); font-weight: 800; }
.app-map-svg { display: block; width: 100%; height: auto; max-height: 440px; }
.app-map .w-map-shape { vector-effect: non-scaling-stroke; }
.app-map-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--font-2); }
.app-map-note { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--font-2); }
.app-map-credit { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--font-1); }
/* Atlas A7 — les quatre niveaux de la carte : des boutons à bascule, comme le sélecteur des applis (jamais un bouton plein). */
.app-map-levels { display: inline-flex; flex-wrap: wrap; margin: 0 0 var(--space-2); border: var(--line, 1.5px) solid var(--rule, var(--border)); border-radius: var(--radius-sm); }
.app-map-levels button {
  min-height: var(--target-min, 44px); padding: 0 var(--space-3); margin: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--text); font: inherit; font-weight: 700; cursor: pointer;
}
.app-map-levels button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.app-map-levels button:focus-visible, .app-map-region:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* Une région s'ouvre sur ses départements par sa ligne de la liste. */
.app-map-region { min-height: var(--target-min, 44px); padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.app-map-back { margin-top: var(--space-2); }
/* Le monde : un pays ouvert est rempli (plus foncé là où sont les campagnes), bientôt ouvert en pointillés, pas encore
   disponible hachuré ; la légende le dit en mots. */
:root[data-skin="atlas"] .app-map-world .w-map-shape { stroke-width: .6; stroke-dasharray: none; }
:root[data-skin="atlas"] .app-map-world .w-map-shape[data-status="open"] { fill: var(--map-2); }
:root[data-skin="atlas"] .app-map-world .w-map-shape[data-status="open"]:is([data-heat="1"], [data-heat="2"]) { fill: var(--map-3); }
:root[data-skin="atlas"] .app-map-world .w-map-shape[data-status="open"]:is([data-heat="3"], [data-heat="4"]) { fill: var(--map-4); }
:root[data-skin="atlas"] .app-map-world .w-map-shape[data-status="soon"] { fill: var(--map-1); stroke-dasharray: 3 2; }
:root[data-skin="atlas"] .app-map-world .w-map-shape[data-status="closed"] { fill: url(#app-map-hatch); }
.app-map-hatch-ground { fill: var(--map-0); }
.app-map-hatch-line { stroke: var(--map-edge); }
.app-map-legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-2) 0 0; padding: 0; font-size: var(--font-2); }
.app-map-legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.app-map-swatch { flex: none; width: 18px; height: 12px; border: 1px solid var(--map-edge); }
.app-map-swatch-open { background: var(--map-3); }
.app-map-swatch-soon { background: var(--map-1); border-style: dashed; }
.app-map-swatch-closed { background: repeating-linear-gradient(45deg, var(--map-0) 0 3px, var(--map-edge) 3px 4px); }
/* « Prévenez-moi », sous la carte du monde de l'indépendant. */
.app-map-notify { display: grid; gap: var(--space-2); justify-items: start; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--border); }
.app-map-notify h3 { margin: 0; font-size: var(--font-3); }
.app-map-notify .ui-field { justify-self: stretch; }
/* Le témoin du direct : un voyant et ses mots, jamais la couleur seule. */
.app-live { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--font-1); }
.app-live::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--text); box-sizing: border-box; }
.app-live[data-live="live"]::before { background: var(--live, var(--brand-solid)); border: 0; }

/* ---------- Conclure : Aujourd'hui, l'Agenda (jour, semaine), les agendas reliés, la fiche d'un RDV ---------- */
.app-conclure { display: flex; flex-direction: column; gap: var(--space-4); max-width: 960px; }
.app-conclure-panel { max-width: 420px; }
.app-conclure-h2 { margin: 0; font-size: var(--font-4); }
.app-conclure-h3 { margin: 0 0 var(--space-2); font-size: var(--font-3); }
.app-conclure-h2::first-letter, .app-conclure-h3::first-letter { text-transform: uppercase; }
.app-conclure-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.app-conclure-bar .app-conclure-h2 { flex: 1 1 100%; }
.app-conclure-views, .app-conclure-nav { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.app-conclure-views button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.app-conclure-dayblock { padding-top: var(--space-3); border-top: var(--line, 1.5px) solid var(--rule, var(--border)); }
.app-conclure-items, .app-conclure-calendars, .app-conclure-said { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.app-conclure-said li::before { content: '— '; color: var(--muted); }
.app-conclure-item {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1) var(--space-3);
  background: var(--panel); border: var(--line, 1.5px) solid var(--rule, var(--border)); border-radius: var(--radius-sm);
}
.app-conclure-item-body {
  flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3);
  min-height: var(--target-min, 44px); color: var(--text); text-decoration: none;
}
.app-conclure-item-body[href]:hover .app-conclure-item-text, .app-conclure-item-body[href]:focus-visible .app-conclure-item-text { text-decoration: underline; }
.app-conclure-item-body[href]:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.app-conclure-item-time { font-variant-numeric: tabular-nums; font-weight: 700; }
/* Une occupation se lit en tirets, une occupation d'un agenda relié en pointillés : jamais la couleur seule. */
.app-conclure-item-busy { border-style: dashed; }
.app-conclure-item-external { border-style: dotted; }
.app-conclure-calendar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.app-conclure-calendar-name { font-weight: 700; overflow-wrap: anywhere; }
.app-conclure-calendar-hint { flex: 1 1 100%; color: var(--muted); font-size: var(--font-2); }
.app-conclure-calendar-actions { display: inline-flex; gap: var(--space-2); margin-left: auto; }
.app-conclure-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-3); }
.app-conclure-facts dt { color: var(--muted); }
.app-conclure-facts dd { margin: 0; overflow-wrap: anywhere; }
.app-conclure-fiche .ui-tampon { margin-bottom: var(--space-3); }

/* ---------- O-11 : la fiche campagne en étapes (un itinéraire de quatre arrêts, une étape à l'écran) ---------- */
/* Partir (O-10) : le bandeau d'un espace résilié, en tête de chaque écran ; et la carte « Partir » de Mon compte. */
:root[data-skin="atlas"] .shell-terminated-banner { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--warn); border-left-width: 4px; border-radius: var(--radius); background: var(--panel-2); color: var(--text); font-weight: 600; }
:root[data-skin="atlas"] .departure-gesture { display: grid; gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--border); }
:root[data-skin="atlas"] .departure-gesture:first-of-type { border-top: 0; padding-top: 0; }
:root[data-skin="atlas"] .departure-gesture h3 { margin: 0; font-size: var(--font-4); }
:root[data-skin="atlas"] .departure-gesture dl { margin: 0; display: grid; gap: var(--space-1); }
:root[data-skin="atlas"] .departure-gesture dt { font-weight: 700; }
:root[data-skin="atlas"] .departure-gesture dd { margin: 0 0 var(--space-2); color: var(--muted); }
:root[data-skin="atlas"] .departure-gesture .ui-form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
/* Les actions en masse (Ruben, 28/10) : la barre de la sélection des prospects, au-dessus de la liste. */
:root[data-skin="atlas"] .leads-bulk { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-2); }
:root[data-skin="atlas"] .leads-bulk[hidden] { display: none; }
:root[data-skin="atlas"] .leads-bulk-count { margin: 0; font-weight: 700; }
:root[data-skin="atlas"] .leads-bulk .ui-form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
:root[data-skin="atlas"] .leads-bulk p.sub { margin: 0; }
:root[data-skin="atlas"] .campaign-steps { margin: var(--space-3) 0 var(--space-4); }
:root[data-skin="atlas"] .campaign-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--space-2); }
:root[data-skin="atlas"] .campaign-steps button {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--target-min, 44px);
  padding: var(--space-2) var(--space-3); margin: 0; border: var(--line, 1.5px) solid var(--rule, var(--border));
  border-radius: var(--radius-sm); background: var(--panel); color: var(--text); font: inherit; font-weight: 700;
  text-align: left; cursor: pointer;
}
:root[data-skin="atlas"] .campaign-steps button[aria-current="step"] { background: var(--text); color: var(--bg); }
:root[data-skin="atlas"] .campaign-steps button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
:root[data-skin="atlas"] .campaign-step-mark {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border: 1.5px solid currentColor; border-radius: 50%; font-variant-numeric: tabular-nums; font-size: var(--font-2);
}
:root[data-skin="atlas"] .campaign-steps button[data-done="true"]:not([aria-current="step"]) .campaign-step-mark { background: var(--text); color: var(--bg); border-color: var(--text); }
:root[data-skin="atlas"] .campaign-step-panel:focus { outline: none; }
:root[data-skin="atlas"] .campaign-step-panel > * + * { margin-top: var(--space-4); }
:root[data-skin="atlas"] .campaign-step-next { margin-top: var(--space-4); }
@media (max-width: 720px) {
  /* Quatre arrêts tiennent sur un téléphone : le numéro et le mot, sur deux lignes au besoin. */
  :root[data-skin="atlas"] .campaign-steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- O-11 : Réglages regroupés (un onglet empile ses sections, un sommaire mène à chacune) ---------- */
:root[data-skin="atlas"] .settings-summary { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); }
:root[data-skin="atlas"] .settings-section + .settings-section { margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--line, 1.5px) solid var(--border); }
:root[data-skin="atlas"] .settings-section:focus { outline: none; }

/* ---------- Téléphone : la carte, une feuille du bas, et la barre d'onglets en bas ---------- */
@media (max-width: 720px) {
  /* La barre haute défile avec la page : collée, elle prendrait 140 px de l'écran, et un champ qui prend le focus passerait
     dessous. Le menu du compte et la cloche ont pour ancre la barre, pas leur bouton, qui passe à la ligne, à gauche : ils
     restent dans l'écran. */
  :root[data-skin="atlas"] .shell-topbar { position: relative; }
  :root[data-skin="atlas"] .shell-account, :root[data-skin="atlas"] .shell-bell-wrap { position: static; }
  :root[data-skin="atlas"] .shell-account-menu, :root[data-skin="atlas"] .shell-bell-panel { right: var(--space-3); }
  .app-bar { padding: 0 var(--space-3); }
  /* Sur téléphone, la barre haute défile avec la page : la barre des applis aussi (ses onglets sont en bas). */
  :root[data-skin="atlas"] .app-bar { position: static; }
  .app-tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: var(--panel);
    border-top: var(--line, 1.5px) solid var(--rule, var(--border)); padding-bottom: env(safe-area-inset-bottom);
  }
  .app-tabs ul { gap: 0; }
  .app-tabs li { flex: 1 1 0; min-width: 0; }
  .app-tab {
    justify-content: center; min-height: 56px; padding: 0 2px; font-size: var(--font-1); text-align: center;
    overflow-wrap: anywhere; border-bottom: 0; border-top: 3px solid transparent;
  }
  .app-tab[aria-current="page"] { border-top-color: var(--live, var(--brand-solid)); }
  /* --app-tabs-h : la hauteur mesurée des onglets (apps/shell.js) réserve le bas de page et remonte la barre d'appel,
     seulement là où les onglets existent (l'écran de connexion n'en a pas). */
  :root[data-skin="atlas"] body:has(.app-tabs) { padding-bottom: var(--app-tabs-h, 60px); }
  :root[data-skin="atlas"] body:has(.app-tabs) #shell-callbar { bottom: var(--app-tabs-h, 60px); }
  :root[data-skin="atlas"]:has(.app-tabs) { scroll-padding-bottom: calc(var(--app-tabs-h, 60px) + 72px); }
  /* Clavier ouvert : le champ en saisie prend la place des onglets, qui reviennent à la sortie du champ. */
  :root[data-skin="atlas"]:has(input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([type="color"]):focus) .app-tabs,
  :root[data-skin="atlas"]:has(textarea:focus) .app-tabs,
  :root[data-skin="atlas"]:has(select:focus) .app-tabs,
  :root[data-skin="atlas"]:has([contenteditable="true"]:focus) .app-tabs { display: none; }
  .app-home-band { grid-template-columns: minmax(0, 1fr); }
  /* Le chiffre et le bouton passent au-dessus de la carte : visibles sans défiler, jamais sous la barre d'appel ni sous
     les onglets. */
  .app-home-panel { order: -1; }
  /* Conclure sur téléphone : la fiche en une colonne, les gestes de l'agenda pleine largeur. */
  .app-conclure-facts { grid-template-columns: minmax(0, 1fr); }
  .app-conclure-facts dd { margin-bottom: var(--space-2); }
  .app-conclure-panel { max-width: none; }
  .app-conclure-bar > .ui-btn-primary { flex: 1 1 100%; }
  .app-conclure-calendar-actions { margin-left: 0; }
}

/* Mon niveau (spec Atlas § 6.3, § 6.4) : les tampons en rangée ; la célébration, un bandeau bref à l'ocre de l'argent. */
.app-stamps { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-2) 0; }
.app-celebration { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); margin-bottom: var(--space-3); border: 2px solid var(--money); color: var(--money); animation: app-celebration-in .4s ease-out; }
.app-celebration button { min-height: var(--target-min, 44px); }
@keyframes app-celebration-in { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- « Aujourd'hui » de Piloter : « À traiter » et l'équipe en direct (spec Atlas § 4) ---------- */
.app-home-todo, .app-home-team { margin-bottom: var(--space-5); }
.app-todo, .app-team, .app-board, .app-verify-part {
  display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3);
  background: var(--panel); border: var(--line, 1.5px) solid var(--rule, var(--border)); border-radius: var(--radius-sm);
}
.app-board { margin-bottom: var(--space-4); }
.app-todo-title, .app-team-title, .app-board h2 { margin: 0; font-size: var(--font-4); }
.app-todo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.app-todo-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-height: var(--target-min, 44px); }
.app-todo-text { font-weight: 700; }
.app-todo-none, .app-team-none, .app-team-counts { margin: 0; color: var(--muted); }

/* ---------- La vérification un par un et la commande (spec Atlas § 4) ---------- */
.app-verify, .app-order { display: flex; flex-direction: column; gap: var(--space-3); max-width: 60rem; }
.app-verify-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.app-verify-head h2 { margin: 0; flex: 1 1 auto; }
.app-verify-head p { flex-basis: 100%; margin: 0; }
.app-verify-part h3 { margin: 0; font-size: var(--font-3, 1rem); }
.app-verify-facts, .app-verify-points, .app-verify-calls, .app-verify-turns { margin: 0; padding-left: var(--space-4); }
.app-verify-turns { max-height: 24rem; overflow-y: auto; }
.app-verify-transcript summary { min-height: var(--target-min, 44px); display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.app-verify-gestures { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.app-verify-count, .app-order-live { margin: 0; color: var(--muted); }
.app-order-figure { margin: 0; font-weight: 700; }

/* « Réduire les animations » (spec § 5) : sous la peau, rien ne bouge. */
@media (prefers-reduced-motion: reduce) {
  :root[data-skin="atlas"] *, :root[data-skin="atlas"] *::before, :root[data-skin="atlas"] *::after { animation: none !important; transition: none !important; }
}

/* ---------- C5 : le cadre de travail dans l'onglet `marche` (shell/workFrame.js) ---------- */
/* La mission d'un propriétaire couvre l'onglet ; la barre d'appel de `marche` ne reparaît au-dessus que pour
   « Décrocher » : pendant l'appel, ses gestes sont ceux du cadre (le pont). */
:root[data-skin="atlas"] .work-frame {
  position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: var(--bg);
}
:root[data-skin="atlas"] .work-frame-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--space-4); background: var(--panel);
  border-bottom: var(--line, 1.5px) solid var(--rule, var(--border));
}
:root[data-skin="atlas"] .work-frame-bar h2 { margin: 0; font-size: var(--font-3, 1rem); }
:root[data-skin="atlas"] .work-frame iframe { flex: 1; width: 100%; border: 0; }
:root[data-skin="atlas"] body:has(.work-frame) #shell-callbar:has(#callbar-answer) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; }

/* ---------- A3 : l'appel et l'après-appel en plein écran (components/callBar.js, `data-full`) ---------- */
/* Rien ne bouge pendant l'appel, sauf le minuteur ; le guide en tête, les gestes en bas. */
:root[data-skin="atlas"] #shell-callbar:has(#callbar[data-full="true"]) {
  position: fixed; inset: 0; z-index: 65; overflow: auto; background: var(--bg);
}
:root[data-skin="atlas"] #callbar[data-full="true"] { max-width: 48rem; margin: 0 auto; padding: var(--space-5) var(--space-4); display: grid; gap: var(--space-4); }
:root[data-skin="atlas"] #callbar[data-full="true"] .callbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
:root[data-skin="atlas"] #callbar[data-full="true"] #callbar-hangup { min-height: 56px; flex: 1 1 100%; }
:root[data-skin="atlas"] .callbar-guide-box { border: var(--line, 1.5px) solid var(--rule, var(--border)); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
:root[data-skin="atlas"] .callbar-guide-box h3 { margin: 0 0 var(--space-2); }
:root[data-skin="atlas"] .callbar-guide-notice { margin: 0 0 var(--space-3); color: var(--muted); }
:root[data-skin="atlas"] .callbar-guide { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); font-size: var(--font-3, 1.05rem); }
:root[data-skin="atlas"] .callbar-guide-box details { margin-top: var(--space-3); }
:root[data-skin="atlas"] .callbar-guide-box summary { min-height: var(--target-min, 44px); display: flex; align-items: center; cursor: pointer; font-weight: 700; }