/* ═══════════════════════════════════════════════════════════════════════════
   interface-agent.css — présentation de l'interface agent (phase 1, tâche 5)

   Portée : body[data-ui-agent-vue], posé par js/parcours-agent.js quand une
   session d'agent est ouverte. Sans ce contrôleur (pas de session, module
   absent), la page reste celle de r56. Seules exceptions, marquées « toutes
   pages » : libellés de cellules masqués par défaut, guide de première
   utilisation, et cartes RAS qui portent un NON ou un incident.

   Thèmes : les trois de r56 (Clair, body.dark, body.outdoor), choisis par
   l'agent ; aucun thème imposé, aucune règle prefers-color-scheme. Les
   jetons --ui-* ci-dessous suivent la classe de body.

   Preuves de signature : aucune règle ne change la largeur de .page,
   .card, .card-body, .sig-wrap ni .a320-eq (un canevas prend la largeur de
   son parent) ; les attributs width/height des canevas ne sont pas touchés.

   Largeurs : téléphone < 600 px ; équipe en cartes ≤ 640 px ; intervenants
   et registre d'accès toujours en cartes ; Mes rapports côte à côte
   ≥ 900 px (index.html, tâche 4).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Jetons ─────────────────────────────────────────────────────────────── */
body{--ui-fond:#eef2f6;--ui-surface:#fff;--ui-encre:#14203a;--ui-attenue:#4b5a6e;--ui-ligne:#c3cfdc;
  --ui-accent:#c2410c;--ui-accent-texte:#fff;--ui-courant:#14203a;--ui-courant-texte:#fff;--ui-champ:#fff;
  --ui-alerte-fond:#fff0ed;--ui-alerte-bord:#b42318;--ui-alerte-texte:#8d211b;--ui-ok:#17613c;--ui-bord:1px}
body.dark{--ui-fond:#0d1117;--ui-surface:#161b22;--ui-encre:#e6edf3;--ui-attenue:#a9b5c2;--ui-ligne:#3d4650;
  --ui-courant:#e6edf3;--ui-courant-texte:#0d1117;--ui-champ:#0d1117;
  --ui-alerte-fond:#2d1c1c;--ui-alerte-bord:#f87171;--ui-alerte-texte:#fecaca;--ui-ok:#86efac}
body.outdoor{--ui-fond:#000;--ui-surface:#0a0a0a;--ui-encre:#fff;--ui-attenue:#fde047;--ui-ligne:#fbbf24;
  --ui-accent:#fde047;--ui-accent-texte:#000;--ui-courant:#fde047;--ui-courant-texte:#000;--ui-champ:#000;
  --ui-alerte-fond:#1f0d00;--ui-alerte-bord:#fb923c;--ui-alerte-texte:#fff;--ui-ok:#86efac;--ui-bord:2px}

/* ── Toutes pages ───────────────────────────────────────────────────────── */
.ui-agent-invisible{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ui-agent-libelle-cellule{display:none}
/* Guide : compteur d'étapes en texte, icônes locales, cibles de 44 px. */
.ob-card{max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow:auto}
.ob-compteur{text-align:center;font-size:14px;color:#4b5a6e;margin:-8px 0 12px}
.ob-icon{display:flex;justify-content:center;color:#c2410c}
.ob-text{font-size:15px;color:#4b5a6e}
.ob-btn{min-height:44px;font-size:15px}
/* Mode RAS d'un brouillon repris : un NON ou un incident reste visible.
   body.ras-avec-anomalie est posée par majAnomalieRas() (index.html). */
.ui-agent-ras-anomalie{display:none}
body.ras-avec-anomalie .ui-agent-ras-normal{display:none}
body.ras-avec-anomalie .ui-agent-ras-anomalie{display:block;margin-top:6px;font-size:13px;font-weight:700}
body.ras-mode.ras-avec-anomalie #cardChecklist,
body.ras-mode.ras-avec-anomalie #cardIncident{display:block!important}

/* Mise à jour prête (tâche 6), toutes pages : dans le flux sous l'en-tête,
   jamais fixé (ne couvre ni champ ni signature) ; cibles de 48 px. */
.maj-bandeau{box-sizing:border-box;padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));
  background:var(--ui-surface);color:var(--ui-encre);border-bottom:3px solid var(--ui-accent);border-top:1px solid var(--ui-ligne)}
.maj-bandeau p{margin:4px 0;font-size:16px;line-height:1.45}
.maj-bandeau-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.maj-bandeau button{font:inherit;font-size:16px;font-weight:600;line-height:1.25;min-height:48px;min-width:44px;padding:10px 16px;
  border:var(--ui-bord) solid var(--ui-ligne);border-radius:10px;background:var(--ui-surface);color:var(--ui-encre);cursor:pointer}
.maj-bandeau button.maj-principal{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-accent-texte)}
.maj-bandeau button:disabled{opacity:.65;cursor:progress}
.maj-bandeau .maj-bandeau-progression{font-weight:600}
.maj-bandeau .maj-bandeau-refus{color:var(--ui-alerte-texte);background:var(--ui-alerte-fond);border-left:4px solid var(--ui-alerte-bord);padding:8px 12px;font-weight:600}

/* ── Page et bandeau ────────────────────────────────────────────────────── */
body[data-ui-agent-vue]{background:var(--ui-fond);color:var(--ui-encre)}
/* Toutes pages (bénin en r56) : un champ qui prend le focus ne finit ni sous le bandeau ni sous la barre fixe. */
html{scroll-padding-top:80px;scroll-padding-bottom:calc(150px + env(safe-area-inset-bottom))}
body[data-ui-agent-vue] .app-header{gap:10px;padding-top:max(10px,env(safe-area-inset-top));
  padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
/* Raccourcis icône seule du bandeau : leurs fonctions sont nommées dans Aide
   (aide, envois) et Compte (apparence, identité, déconnexion). */
body[data-ui-agent-vue] #helpToggle,body[data-ui-agent-vue] #outboxToggle,
body[data-ui-agent-vue] #darkToggle,body[data-ui-agent-vue] #agentSession{display:none!important}
body[data-ui-agent-vue] .conn-badge{font-size:13px;min-height:32px}
@media (max-width:420px){
  body[data-ui-agent-vue] .hd-sub{display:none}
  body[data-ui-agent-vue] .app-header .logo{width:34px;height:34px}
}
/* Écran bas (paysage téléphone, zoom 200 %) : le bandeau défile avec la page. */
@media (max-height:500px){body[data-ui-agent-vue] .app-header{position:static}}
body[data-ui-agent-vue] .page{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
body[data-ui-agent-vue]:not([data-ui-agent-vue="rapport"]) #draftBadge,
body[data-ui-agent-vue]:not([data-ui-agent-vue="rapport"]) #correctionBanner{display:none!important}
body[data-ui-agent-vue] #correctionBanner{position:relative!important;top:auto!important}
body[data-ui-agent-vue] .sync-banner{flex-wrap:wrap}
body[data-ui-agent-vue] .sync-banner button{min-height:44px;font-size:14px}

/* ── Navigation ─────────────────────────────────────────────────────────── */
body[data-ui-agent-vue] .ui-agent .ui-agent-nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  background:var(--ui-surface);border-bottom:var(--ui-bord) solid var(--ui-ligne);
  padding:8px max(16px,env(safe-area-inset-right),calc((100% - 1120px)/2)) 8px max(16px,env(safe-area-inset-left),calc((100% - 1120px)/2))}
body[data-ui-agent-vue] .ui-agent .ui-agent-nav-bouton{display:inline-flex;align-items:center;gap:8px;min-height:48px;min-width:44px;
  padding:10px 14px;border:var(--ui-bord) solid transparent;border-radius:10px;background:transparent;color:var(--ui-encre);
  font:inherit;font-size:16px;font-weight:650;line-height:1.2;cursor:pointer}
body[data-ui-agent-vue] .ui-agent .ui-agent-nav-bouton[aria-current="page"]{background:var(--ui-courant);color:var(--ui-courant-texte);font-weight:800}
body[data-ui-agent-vue] .ui-agent .ui-agent-nav-compte{margin-left:auto;border-color:var(--ui-ligne)}
body[data-ui-agent-vue] .ui-agent .ui-agent-nav-compte[aria-expanded="true"]{background:var(--ui-fond)}
.ui-agent-ic{flex:none;width:22px;height:22px}
/* Badge « Mes rapports » (7b-B, U07) : symbole (« ! » ou « ? ») + forme ; le
   sens est dit par la description du bouton, pas par la couleur. */
body[data-ui-agent-vue] .ui-agent .ui-agent-nav-bouton{position:relative}
body[data-ui-agent-vue] .ui-agent-badge{display:inline-grid;place-items:center;box-sizing:border-box;min-width:24px;height:24px;padding:0 6px;
  border-radius:999px;border:2px solid var(--ui-accent);background:var(--ui-accent);color:var(--ui-accent-texte);font-size:15px;font-weight:800;line-height:1}
body[data-ui-agent-vue] .ui-agent-badge[data-ui-agent-badge="incomplet"]{background:var(--ui-surface);color:var(--ui-encre);border-style:dashed;border-color:var(--ui-encre)}
@media (max-width:599px){
  body[data-ui-agent-vue] .ui-agent .ui-agent-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;
    padding:4px max(4px,env(safe-area-inset-right)) 4px max(4px,env(safe-area-inset-left))}
  body[data-ui-agent-vue] .ui-agent .ui-agent-nav-bouton{flex-direction:column;justify-content:center;gap:3px;min-height:58px;min-width:0;
    padding:6px 2px;font-size:12px;text-align:center;hyphens:auto;-webkit-hyphens:auto}
  body[data-ui-agent-vue] .ui-agent .ui-agent-nav-compte{margin-left:0}
  body[data-ui-agent-vue] .ui-agent-badge{position:absolute;top:2px;right:calc(50% - 30px)}
}

/* ── Conteneurs des vues ────────────────────────────────────────────────── */
body[data-ui-agent-vue] .ui-agent > :not(.ui-agent-nav){box-sizing:border-box;max-width:1120px;margin-left:auto;margin-right:auto;
  padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
body[data-ui-agent-vue="rapport"] .ui-agent > :not(.ui-agent-nav){max-width:780px;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
body[data-ui-agent-vue] .ui-agent-vue{padding-top:22px;padding-bottom:56px}
body[data-ui-agent-vue] .ui-agent p{margin:4px 0;line-height:1.5}
body[data-ui-agent-vue] .ui-agent-titre{font-size:26px;font-weight:750;letter-spacing:-.3px;line-height:1.25;margin:0 0 6px;color:var(--ui-encre)}
body[data-ui-agent-vue] .ui-agent-titre[data-ui-agent-titre="rapport"]{font-size:20px;margin:14px auto 0}
body[data-ui-agent-vue] .ui-agent-sous-titre,body[data-ui-agent-vue] .ui-agent-vue h3{font-size:19px;line-height:1.3;margin:24px 0 10px;color:var(--ui-encre)}
body[data-ui-agent-vue] .ui-agent-chapo,body[data-ui-agent-vue] .ui-agent-identite p+p{color:var(--ui-attenue)}

/* Boutons des vues : cibles de 48 px, texte toujours visible. */
body[data-ui-agent-vue] .ui-agent button:not(.ui-agent-nav-bouton){font:inherit;font-size:16px;font-weight:600;line-height:1.25;
  min-height:48px;min-width:44px;padding:10px 16px;border:var(--ui-bord) solid var(--ui-ligne);border-radius:10px;
  background:var(--ui-surface);color:var(--ui-encre);cursor:pointer;text-align:center}
body[data-ui-agent-vue] .ui-agent button.ui-agent-principal{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-accent-texte)}
body[data-ui-agent-vue] .ui-agent button[aria-pressed="true"]{background:var(--ui-courant);border-color:var(--ui-courant);color:var(--ui-courant-texte)}
/* État pressé dit aussi par une coche (aria-pressed le porte pour les lecteurs d'écran). */
body[data-ui-agent-vue] .ui-agent button[aria-pressed="true"]::before{content:"✓ ";content:"✓ " / ""}
/* Remplacements fermés par un rapport en cours (majGardesParcours, 2.5.1) : bouton
   gris mais lisible (texte atténué ≥ 4,5:1 dans les trois thèmes), bordure en
   pointillé, cible inchangée ; l'appui reste possible et affiche le motif. */
body[data-ui-agent-vue] .ui-agent button[aria-disabled="true"]{color:var(--ui-attenue);background:var(--ui-fond);
  border-style:dashed;cursor:not-allowed}
body[data-ui-agent-vue] .ui-agent-actions,body[data-ui-agent-vue] .ui-agent-carte-rapport,
body[data-ui-agent-vue] .ui-agent-a-suivre,body[data-ui-agent-vue] #uiMrAttention{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
body[data-ui-agent-vue] :is(.ui-agent-carte-rapport,.ui-agent-a-suivre,#uiMrAttention) > :not(button){flex-basis:100%}

/* Messages de la navigation (#uiAgentMessage) et alertes. */
body[data-ui-agent-vue] .ui-agent-message{margin-top:12px}
body[data-ui-agent-vue] :is(.ui-agent-alerte,.ui-agent-question,.ui-agent-statut){display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  border:2px solid var(--ui-ligne);border-radius:12px;padding:12px 16px;background:var(--ui-surface)}
body[data-ui-agent-vue] :is(.ui-agent-alerte,.ui-agent-question,.ui-agent-statut) > p{flex-basis:100%}
body[data-ui-agent-vue] .ui-agent-alerte{border-color:var(--ui-alerte-bord);background:var(--ui-alerte-fond);color:var(--ui-alerte-texte)}
body[data-ui-agent-vue] .ui-agent-question{border-color:var(--ui-accent)}
body[data-ui-agent-vue] :is(.ui-agent-annonce[role="alert"],.ui-agent-a-suivre) > p[role="alert"],body[data-ui-agent-vue] .ui-agent-annonce[role="alert"] > p{color:var(--ui-alerte-texte);font-weight:600}
body[data-ui-agent-vue] .ui-agent-annonce > p{margin:6px 0}

/* ── Accueil ────────────────────────────────────────────────────────────── */
body[data-ui-agent-vue] .ui-agent-entete{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:16px}
/* Salutation (7b-B, U08) : surtitre « Accueil », « Bonjour Prénom », identité dessous.
   Le réseau n'est indiqué qu'une fois, dans l'en-tête (#connBadge). */
body[data-ui-agent-vue] .ui-agent .ui-agent-surtitre{margin:0;color:var(--ui-attenue);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
body[data-ui-agent-vue] .ui-agent-identite{color:var(--ui-attenue)}
body[data-ui-agent-vue] .ui-agent-identite strong{color:var(--ui-encre)}
body[data-ui-agent-vue] .ui-agent p.ui-agent-hors-ligne{margin-top:6px;color:var(--ui-alerte-texte);font-weight:650}
body[data-ui-agent-vue] .ui-agent-travail,body[data-ui-agent-vue] .ui-agent-bloc{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;
  background:var(--ui-surface);border:var(--ui-bord) solid var(--ui-ligne);border-radius:14px;padding:20px}
body[data-ui-agent-vue] .ui-agent-bloc{margin-bottom:16px;gap:8px}
@media (min-width:900px){body[data-ui-agent-vue] .ui-agent-travail{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:36px;padding:28px}}
body[data-ui-agent-vue] .ui-agent-carte-rapport h3{font-size:24px;margin:0 0 2px;flex-basis:100%}
body[data-ui-agent-vue] .ui-agent-carte-rapport p{color:var(--ui-attenue)}
body[data-ui-agent-vue] .ui-agent-carte-rapport .ui-agent-principal{min-width:min(100%,240px)}
body[data-ui-agent-vue] .ui-agent-etapes{list-style:none;counter-reset:etape;display:grid;gap:14px;margin:0;padding:0}
body[data-ui-agent-vue] .ui-agent-etapes li{counter-increment:etape;display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;align-items:start}
body[data-ui-agent-vue] .ui-agent-etapes li::before{content:counter(etape);grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;
  border-radius:50%;border:var(--ui-bord) solid var(--ui-ligne);background:var(--ui-fond);font-weight:700}
body[data-ui-agent-vue] .ui-agent-etapes strong,body[data-ui-agent-vue] .ui-agent-etapes span{display:block}
body[data-ui-agent-vue] .ui-agent-etapes span{color:var(--ui-attenue);font-size:15px}

/* Cartes de rapport (À suivre, Mes rapports) : l'origine est écrite en tête. */
body[data-ui-agent-vue] .ui-agent-liste{list-style:none;margin:0;padding:0;display:grid;gap:10px;flex-basis:100%}
body[data-ui-agent-vue] .ui-agent-carte{background:var(--ui-surface);border:var(--ui-bord) solid var(--ui-ligne);border-left-width:5px;
  border-radius:12px;padding:12px 16px;overflow-wrap:anywhere;min-width:0}
body[data-ui-agent-vue] .ui-agent-carte.ui-agent-brouillon{border-left-style:dashed}
body[data-ui-agent-vue] .ui-agent-carte.ui-agent-file{border-left-color:var(--ui-accent)}
/* Carte (7b-B, U06) : vol en tête, état principal écrit, doublé par une forme
   (symbole, bord) et une couleur ; jamais la couleur seule. */
body[data-ui-agent-vue] .ui-agent-carte-tete{margin:0 0 6px}
body[data-ui-agent-vue] .ui-agent-carte-vol{display:block;font-size:18px;line-height:1.3}
body[data-ui-agent-vue] .ui-agent-carte-tete span{display:block;color:var(--ui-attenue)}
body[data-ui-agent-vue] .ui-agent .ui-agent-etat{display:inline-flex;align-items:center;gap:6px;margin:4px 0;padding:3px 12px;border-radius:999px;
  border:var(--ui-bord) solid var(--ui-ligne);background:var(--ui-fond);color:var(--ui-encre);font-weight:750}
body[data-ui-agent-vue] .ui-agent-etat::before{content:"•";content:"•" / "";flex:none}
body[data-ui-agent-vue] .ui-agent-etat[data-ui-agent-ton="action"]{border:2px solid var(--ui-alerte-bord);background:var(--ui-alerte-fond);color:var(--ui-alerte-texte)}
body[data-ui-agent-vue] .ui-agent-etat[data-ui-agent-ton="action"]::before{content:"⚠";content:"⚠" / ""}
body[data-ui-agent-vue] .ui-agent-etat[data-ui-agent-ton="attente"]{border-style:dashed;border-color:var(--ui-accent)}
body[data-ui-agent-vue] .ui-agent-etat[data-ui-agent-ton="attente"]::before{content:"◷";content:"◷" / ""}
body[data-ui-agent-vue] .ui-agent-etat[data-ui-agent-ton="ok"]{color:var(--ui-ok)}
body[data-ui-agent-vue] .ui-agent-etat[data-ui-agent-ton="ok"]::before{content:"✓";content:"✓" / ""}
body[data-ui-agent-vue] .ui-agent .ui-agent-alerte-transmission{color:var(--ui-alerte-texte);font-weight:700}
body[data-ui-agent-vue] .ui-agent-alerte-transmission::before{content:"⚠ ";content:"⚠ " / ""}
body[data-ui-agent-vue] .ui-agent .ui-agent-secondaire{color:var(--ui-attenue);font-size:15px}
body[data-ui-agent-vue] .ui-agent-motif{font-weight:600}
body[data-ui-agent-vue] .ui-agent-actions{margin-top:8px}

/* Menu Compte : identité, rôle, apparence, déconnexion à toute largeur. */
body[data-ui-agent-vue] .ui-agent-compte{margin-top:8px;margin-bottom:8px;display:grid;gap:4px;
  background:var(--ui-surface);border:var(--ui-bord) solid var(--ui-ligne);border-radius:12px;padding-top:12px;padding-bottom:14px}
body[data-ui-agent-vue] .ui-agent-compte-nom{font-size:18px}
body[data-ui-agent-vue] .ui-agent-apparence{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
body[data-ui-agent-vue] .ui-agent-apparence-titre{flex-basis:100%;font-weight:700}
body[data-ui-agent-vue] .ui-agent-compte .ui-agent-deconnexion{justify-self:start}

/* ── Mes rapports ───────────────────────────────────────────────────────── */
body[data-ui-agent-vue] .ui-mr-filtres{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 12px;align-items:center;
  background:var(--ui-surface);border:var(--ui-bord) solid var(--ui-ligne);border-radius:14px;padding:12px 16px 16px;margin-bottom:14px}
body[data-ui-agent-vue] .ui-mr-filtres label{margin-top:8px;font-weight:600}
body[data-ui-agent-vue] .ui-mr-filtres :is(input,select){width:100%;min-width:0;min-height:48px;padding:10px 12px;font-size:16px;
  border:var(--ui-bord) solid var(--ui-ligne);border-radius:10px;background:var(--ui-champ);color:var(--ui-encre)}
/* WebKit n'applique hauteur et marges à un select qu'une fois son apparence native retirée ; chevron en currentColor (lisible dans les trois thèmes). */
body[data-ui-agent-vue] .ui-mr-filtres select{-webkit-appearance:none;appearance:none;padding-right:40px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
body[data-ui-agent-vue] .ui-mr-groupe{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
@media (min-width:600px){
  body[data-ui-agent-vue] .ui-mr-filtres{grid-template-columns:max-content minmax(0,1fr)}
  body[data-ui-agent-vue] .ui-mr-filtres label{margin-top:0}
}
@media (min-width:1024px){body[data-ui-agent-vue] .ui-mr-filtres{grid-template-columns:max-content minmax(0,1fr) max-content minmax(0,1fr)}}
/* Filtres secondaires repliés (7b-B, U08). */
body[data-ui-agent-vue] :is(.ui-mr-avances,.ui-mr-actifs){grid-column:1/-1}
body[data-ui-agent-vue] .ui-mr-avances{margin-top:10px}
body[data-ui-agent-vue] .ui-mr-avances > summary{display:inline-flex;align-items:center;gap:8px;box-sizing:border-box;min-height:48px;padding:10px 16px;
  border:var(--ui-bord) solid var(--ui-ligne);border-radius:10px;background:var(--ui-surface);color:var(--ui-encre);font-weight:650;cursor:pointer;list-style:none}
body[data-ui-agent-vue] .ui-mr-avances > summary::-webkit-details-marker{display:none}
body[data-ui-agent-vue] .ui-mr-avances > summary::before{content:"▸";content:"▸" / "";display:inline-block;transition:transform .15s}
body[data-ui-agent-vue] .ui-mr-avances[open] > summary::before{transform:rotate(90deg)}
body[data-ui-agent-vue] .ui-mr-avances > summary:focus-visible{outline:3px solid var(--ui-accent);outline-offset:2px}
body[data-ui-agent-vue] .ui-mr-avances-corps{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 12px;align-items:center;margin-top:8px}
@media (min-width:600px){body[data-ui-agent-vue] .ui-mr-avances-corps{grid-template-columns:max-content minmax(0,1fr)}}
@media (min-width:1024px){body[data-ui-agent-vue] .ui-mr-avances-corps{grid-template-columns:max-content minmax(0,1fr) max-content minmax(0,1fr)}}
body[data-ui-agent-vue] .ui-agent p.ui-mr-actifs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 0;font-weight:600}
body[data-ui-agent-vue] #uiMrAttention{background:var(--ui-surface);border:var(--ui-bord) solid var(--ui-ligne);border-radius:12px;padding:10px 16px;margin-bottom:6px}
body[data-ui-agent-vue] .ui-agent-corps{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
body[data-ui-agent-vue] .ui-mr-detail{background:var(--ui-surface);border:var(--ui-bord) solid var(--ui-ligne);border-radius:14px;padding:18px;min-width:0}
body[data-ui-agent-vue] .ui-mr-detail h3{margin-top:0}
body[data-ui-agent-vue] .ui-mr-infos{display:grid;grid-template-columns:minmax(110px,.6fr) minmax(0,1fr);gap:8px 14px;margin:14px 0;flex-basis:100%}
body[data-ui-agent-vue] .ui-mr-infos dt{color:var(--ui-attenue)}
body[data-ui-agent-vue] .ui-mr-infos dd{margin:0;overflow-wrap:anywhere}
@media (max-width:599px){
  body[data-ui-agent-vue] .ui-mr-infos{grid-template-columns:minmax(0,1fr);gap:2px}
  body[data-ui-agent-vue] .ui-mr-infos dd{margin-bottom:10px}
}
@media (min-width:900px){body[data-ui-agent-vue] .ui-mr-detail{position:sticky;top:76px}}

/* ── Aide ───────────────────────────────────────────────────────────────── */
body[data-ui-agent-vue] .ui-agent-aide{display:grid;grid-template-columns:minmax(0,1fr);gap:0 32px}
@media (min-width:900px){body[data-ui-agent-vue] .ui-agent-aide{grid-template-columns:repeat(2,minmax(0,1fr))}}
body[data-ui-agent-vue] .ui-agent-aide-item{margin-bottom:16px}
body[data-ui-agent-vue] .ui-agent .ui-agent-aide-item button{display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;min-height:56px;text-align:left}
body[data-ui-agent-vue] .ui-agent-aide-item p{color:var(--ui-attenue);font-size:15px;margin:6px 2px 0}
/* Mise à jour (tâche 6) : refus lisible, procédure numérotée. */
body[data-ui-agent-vue] .ui-agent-aide-item #uiAgentAideMajRefus{color:var(--ui-alerte-texte);font-weight:600}
body[data-ui-agent-vue] .ui-agent-aide-procedure{margin:8px 0 0;padding-left:1.4em;font-size:15px;line-height:1.5}
body[data-ui-agent-vue] .ui-agent-aide-procedure li{margin:4px 0}

/* ── Rapport en cours : blocs Agent et Mission OPS repliés (7b-B, U04) ─── */
/* Toutes pages : le résumé est une cible de 44 px même sans l'interface agent. */
.ui-agent-pli-resume{min-height:44px;cursor:pointer}
body[data-ui-agent-vue] .ui-agent-pli{margin:0 0 12px}
body[data-ui-agent-vue] .ui-agent-pli-resume{display:flex;align-items:center;gap:10px;box-sizing:border-box;min-height:48px;padding:12px 16px;
  border:var(--ui-bord) solid var(--ui-ligne);border-radius:12px;background:var(--ui-surface);color:var(--ui-encre);
  font-size:16px;font-weight:650;line-height:1.35;list-style:none;overflow-wrap:anywhere}
body[data-ui-agent-vue] .ui-agent-pli-resume::-webkit-details-marker{display:none}
/* Repère ouvert/fermé : forme (flèche), en plus de l'état annoncé par <details>. */
body[data-ui-agent-vue] .ui-agent-pli-resume::before{content:"▸";content:"▸" / "";flex:none;display:inline-block;transition:transform .15s}
body[data-ui-agent-vue] .ui-agent-pli[open] > .ui-agent-pli-resume::before{transform:rotate(90deg)}
body[data-ui-agent-vue] .ui-agent-pli-resume:focus-visible{outline:3px solid var(--ui-accent);outline-offset:2px}
body[data-ui-agent-vue] .ui-agent-pli > .card{margin-top:8px}

/* ── Rapport en cours : étapes, cibles, barre d'actions ─────────────────── */
body[data-ui-agent-vue] .prog{background:var(--ui-surface);border-bottom-color:var(--ui-ligne)}
body[data-ui-agent-vue] .steps{max-width:560px}
body[data-ui-agent-vue] .s-circle{width:32px;height:32px;font-size:14px}
body[data-ui-agent-vue] .step:not(:last-child)::after{top:16px}
body[data-ui-agent-vue] .s-lbl{font-size:13px;line-height:1.25;color:var(--ui-attenue);padding:0 2px}
body[data-ui-agent-vue] .step.active .s-lbl{color:var(--ui-encre);font-weight:800;text-decoration:underline;text-underline-offset:3px}
body[data-ui-agent-vue] .card{border-radius:12px}
body[data-ui-agent-vue]:not(.dark):not(.outdoor) .card{box-shadow:0 0 0 1px var(--ui-ligne)}
/* Cibles d'au moins 44 × 44 px (taille visuelle inchangée ailleurs). */
body[data-ui-agent-vue] :is(.sig-btn-sm,.sig-clr,.btn-add,.a320-all,.now-btn,.visa-del,.sig-fs-bar button,.ob-act,.ob-close,.outbox-retirer,.outbox-corriger,.mb){min-height:44px}
body[data-ui-agent-vue] :is(.sig-btn-sm,.sig-clr,.visa-del,.now-btn){min-width:44px}
body[data-ui-agent-vue] button[onclick="openFlightRadar()"],body[data-ui-agent-vue] button[onclick="swapFlightDirection()"]{min-height:44px;font-size:14px!important;padding:8px 12px!important}
body[data-ui-agent-vue] :is(#eqRows,#accesRows,#tca-rows) td button{min-width:44px;min-height:44px}
body[data-ui-agent-vue] #incidentCodesList label{min-height:44px;font-size:15px!important}
body[data-ui-agent-vue] #incidentCodesList input{width:22px;height:22px;flex:none}
body[data-ui-agent-vue] .help-desc{font-size:16px}
body[data-ui-agent-vue] .photo-prev{gap:18px;padding-top:10px}
body[data-ui-agent-vue] .photo-del{width:44px;height:44px;top:-12px;right:-12px;font-size:16px}
body[data-ui-agent-vue] .sig-foot{flex-wrap:wrap}
body[data-ui-agent-vue] .sig-foot-btns{flex-wrap:wrap}
body[data-ui-agent-vue] :is(.cl-lbl,.fl){overflow-wrap:anywhere}
body[data-ui-agent-vue] .yn-grp{flex-wrap:wrap}
/* Champ + bouton côte à côte (Néant, Même personne…) : le bouton passe dessous plutôt qu'écraser le champ. */
body[data-ui-agent-vue] #bloc-tca .fg > div[style*="display:flex"]{flex-wrap:wrap}
body[data-ui-agent-vue] #bloc-tca .fg > div[style*="display:flex"] > .fi{flex:1 1 180px!important;min-width:0}
@media (max-width:480px){body[data-ui-agent-vue] .cl-item{flex-wrap:wrap;gap:8px}}
/* Barre Retour / Suivant alignée sur la colonne du formulaire. */
body[data-ui-agent-vue="rapport"] #mainNav{background:var(--ui-surface);border-top:var(--ui-bord) solid var(--ui-ligne);
  padding-left:max(14px,env(safe-area-inset-left),calc((100% - 780px)/2 + 14px));
  padding-right:max(14px,env(safe-area-inset-right),calc((100% - 780px)/2 + 14px))}
/* Pendant un tracé seulement (classe posée au pointerdown du pad, retirée au
   relâchement, à l'annulation, et par un filet sur le document) : la barre
   s'efface, puis revient ; jamais au-delà du geste. */
body[data-ui-agent-vue="rapport"].ui-agent-trace-en-cours #mainNav{visibility:hidden}
/* Badge de brouillon : dans la barre (déplacé par demarrerParcoursAgent), plus au-dessus du contenu. */
body[data-ui-agent-vue] #mainNav{flex-wrap:wrap;align-items:center}
body[data-ui-agent-vue] #mainNav #draftBadge{position:static!important;order:-1;flex:0 1 auto;max-width:100%;min-height:44px;display:flex;align-items:center;
  font-size:13px!important;box-shadow:none!important;overflow-wrap:anywhere}
body[data-ui-agent-vue] #mainNav #draftBadge[style*="opacity: 0"]{display:none}

/* ── Tableaux en cartes (mêmes nœuds, libellé réel par cellule) ─────────── */
@media (max-width:640px){
  body[data-ui-agent-vue] #equipeTable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  body[data-ui-agent-vue] :is(#equipeTable,#equipeTable tbody){display:block;width:100%}
  body[data-ui-agent-vue] #equipeTable tr{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;
    border:var(--ui-bord) solid var(--ui-ligne);border-radius:12px;padding:12px;margin:0 0 10px;background:var(--ui-surface)}
  body[data-ui-agent-vue] #equipeTable td{display:block;min-width:0;padding:0;border:0}
  body[data-ui-agent-vue] #equipeTable td:nth-child(n+3){display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;white-space:normal!important}
  body[data-ui-agent-vue] #equipeTable td:nth-child(n+3) .ui-agent-libelle-cellule{flex-basis:100%}
  body[data-ui-agent-vue] #equipeTable td:nth-child(3) input{flex:1 1 100px;width:auto!important;min-width:0}
  body[data-ui-agent-vue] #equipeTable td:nth-child(n+5){justify-content:flex-end}
}
/* Intervenants et registre d'accès : 8 colonnes ne tiennent jamais dans la
   colonne du formulaire (780 px au plus) : cartes à toute largeur. */
body[data-ui-agent-vue] :is(#accesTable,#bloc-tca table) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
body[data-ui-agent-vue] :is(#accesTable,#accesTable tbody,#bloc-tca table,#bloc-tca tbody){display:block;width:100%}
body[data-ui-agent-vue] :is(#accesRows,#tca-rows) tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:10px 12px;
  align-items:end;border:var(--ui-bord) solid var(--ui-ligne);border-radius:12px;padding:12px;margin:0 0 10px;background:var(--ui-surface)}
body[data-ui-agent-vue] :is(#accesRows,#tca-rows) td{display:block;min-width:0;padding:0!important;border:0}
body[data-ui-agent-vue] :is(#accesRows,#tca-rows) td:last-child{grid-column:1/-1;justify-self:end}
body[data-ui-agent-vue] :is(#accesRows,#tca-rows) .ui-agent-libelle-cellule{display:block;margin-bottom:4px;font-size:14px;font-weight:700;color:var(--ui-attenue)}
body[data-ui-agent-vue] :is(#accesRows,#tca-rows) td :is(input,select){width:100%;min-height:48px;padding:10px 12px;font-size:16px;
  border:2px solid var(--ui-ligne);border-radius:10px;background:var(--ui-champ);color:var(--ui-encre)}
/* Cellule en carte : libellé réel visible, champ encadré. */
@media (max-width:640px){
  body[data-ui-agent-vue] #eqRows .ui-agent-libelle-cellule{display:block;margin-bottom:4px;font-size:14px;font-weight:700;color:var(--ui-attenue)}
  body[data-ui-agent-vue] #eqRows td :is(input,select){width:100%;min-height:48px;padding:10px 12px;font-size:16px;
    border:2px solid var(--ui-ligne);border-radius:10px;background:var(--ui-champ);color:var(--ui-encre)}
}
@media (prefers-reduced-motion:reduce){
  body[data-ui-agent-vue] *,body[data-ui-agent-vue] *::before,body[data-ui-agent-vue] *::after{animation-duration:.01ms!important;transition:none!important;scroll-behavior:auto!important}
}