/* Arpentiq — etat de synchronisation (kit Margot « sync »). Repris TEL QUEL :
   checklist b2342 respectee de bout en bout — une seule globale, classes
   prefixees aqy-, aucune regle body/:root, theme en ANCETRE, z-index en
   VARIABLE, demo qui charge les fichiers. Rien a adapter dans sa feuille.
   [b2349] Seule intervention : le palier, sur la bande du produit. Son toast
   doit rester AU-DESSUS de tout (un echec de synchro est la seule chose que
   l'agent doit voir quoi qu'il fasse), donc 100096 comme nos autres toasts. */
:root{ --aqy-z-toast:100096; }

/* ═══════════════════════════════════════════════════════════════════
   arpe-sync.css — Arpentiq · état de synchronisation
   Namespace .aqy-* · deux surfaces :
     .aqy-chip   pastille d'état permanente et discrète (succès)
     .aqy-toast  toast, réservé à l'échec et à la reconnexion
   ═══════════════════════════════════════════════════════════════════ */

/* ── tokens (retire ce bloc si tes tokens sont déjà globaux) ─────── */
.aqy,[data-theme="light"] .aqy{
  --bg:#f7f8fa;--surface:#ffffff;--s2:#f1f3f7;--s3:#e7ebf2;
  --border:#e4e7ee;--border-hi:#d3d8e3;
  --text:#14161f;--text-dim:#4a5169;--muted:#8a93ab;
  --accent:#6b5cf5;--accent-dim:rgba(107,92,245,.09);
  --chaud:#d64560;--tiede:#c08a2e;--green:#22a06b;
  --r:8px;--r-lg:12px;
  --sh-sm:0 1px 2px rgba(20,22,31,.05);
  --sh-lg:0 1px 2px rgba(20,22,31,.05),0 18px 44px -12px rgba(20,22,31,.26);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
[data-theme="noir"] .aqy,[data-theme="donna"] .aqy,[data-theme="ardoise"] .aqy{
  --bg:#0f1115;--surface:#16181d;--s2:#1c1e24;--s3:#23262d;
  --border:#23262d;--border-hi:#2f333c;
  --text:#f2f3f7;--text-dim:#a8adbd;--muted:#5f6578;
  --accent:#8b7bff;--accent-dim:rgba(139,123,255,.12);
  --chaud:#ff6680;--tiede:#f0c050;--green:#4fd49a;
  --r:6px;--r-lg:10px;
  --sh-sm:0 1px 2px rgba(0,0,0,.5);
  --sh-lg:0 1px 2px rgba(0,0,0,.5),0 20px 50px -12px rgba(0,0,0,.75);
}
.aqy{font-family:var(--sans);color:var(--text)}
.aqy *{box-sizing:border-box}
.aqy button{font-family:inherit;cursor:pointer}

/* ═══ 1. PASTILLE D'ÉTAT — le succès ne mérite pas un toast ═══════ */
.aqy-chip{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:500;letter-spacing:-.01em;
  color:var(--muted);background:transparent;border:1px solid transparent;border-radius:99px;padding:4px 9px;
  transition:color .2s,background .2s,border-color .2s;white-space:nowrap}
.aqy-chip:hover{color:var(--text-dim);background:var(--s2);border-color:var(--border)}
.aqy-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--green);transition:background .2s}
.aqy-chip .aqy-lb{font-variant-numeric:tabular-nums}
/* en cours : le point respire, aucun mouvement de texte */
.aqy-chip.aqy-run .aqy-dot{background:var(--accent);animation:aqy-pulse 1.1s ease-in-out infinite}
@keyframes aqy-pulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
/* juste après une synchro réussie : bref éclat vert puis retour au calme */
.aqy-chip.aqy-ok{color:var(--green)}
.aqy-chip.aqy-ok .aqy-dot{background:var(--green)}
/* échec / hors-ligne : c'est le seul cas qui a droit à de la couleur permanente */
.aqy-chip.aqy-err{color:var(--chaud);background:color-mix(in srgb,var(--chaud) 9%,transparent);
  border-color:color-mix(in srgb,var(--chaud) 26%,transparent)}
.aqy-chip.aqy-err .aqy-dot{background:var(--chaud)}
.aqy-chip.aqy-off{color:var(--tiede);background:color-mix(in srgb,var(--tiede) 9%,transparent);
  border-color:color-mix(in srgb,var(--tiede) 26%,transparent)}
.aqy-chip.aqy-off .aqy-dot{background:var(--tiede)}
.aqy-chip svg{width:12px;height:12px;flex-shrink:0;opacity:0;width:0;transition:opacity .2s}
/* l'icône n'apparaît que pendant une synchro, et elle tourne */
.aqy-chip.aqy-run svg{opacity:1;width:12px;animation:aqy-spin .8s linear infinite}
@keyframes aqy-spin{to{transform:rotate(360deg)}}

/* ═══ 2. TOAST — échec, reconnexion, action requise ═══════════════ */
.aqy-stack{position:fixed;right:18px;bottom:18px;z-index:var(--aqy-z-toast,800);
  display:flex;flex-direction:column-reverse;gap:9px;pointer-events:none}
.aqy-toast{pointer-events:auto;width:326px;max-width:calc(100vw - 28px);
  background:var(--surface);border:1px solid var(--border-hi);border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  overflow:hidden;opacity:0;transform:translateX(16px);
  transition:opacity .22s,transform .26s cubic-bezier(.2,.75,.2,1)}
.aqy-toast.aqy-on{opacity:1;transform:none}
.aqy-tin{display:flex;align-items:flex-start;gap:10px;padding:11px 12px}
.aqy-ti{width:26px;height:26px;flex-shrink:0;border-radius:var(--r);display:grid;place-items:center}
.aqy-ti svg{width:14px;height:14px}
.aqy-toast.aqy-t-ok .aqy-ti{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
.aqy-toast.aqy-t-err .aqy-ti{background:color-mix(in srgb,var(--chaud) 13%,transparent);color:var(--chaud)}
.aqy-toast.aqy-t-wrn .aqy-ti{background:color-mix(in srgb,var(--tiede) 13%,transparent);color:var(--tiede)}
.aqy-toast.aqy-t-run .aqy-ti{background:var(--accent-dim);color:var(--accent)}
.aqy-toast.aqy-t-run .aqy-ti svg{animation:aqy-spin .8s linear infinite}
.aqy-tx{flex:1;min-width:0}
.aqy-tt{font-size:13px;font-weight:600;letter-spacing:-.013em}
.aqy-td{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.aqy-tx-btn{margin-top:8px;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:5px 10px;transition:.15s}
.aqy-tx-btn:hover{background:var(--s2);border-color:var(--border-hi)}
.aqy-tx-btn svg{width:12px;height:12px}
.aqy-tclose{width:22px;height:22px;flex-shrink:0;border:0;border-radius:6px;background:transparent;
  color:var(--muted);display:grid;place-items:center;transition:.14s}
.aqy-tclose:hover{background:var(--s2);color:var(--text)}
.aqy-tclose svg{width:12px;height:12px}
/* barre de vie, en pause au survol */
.aqy-tbar{height:2px;background:var(--s3);overflow:hidden}
.aqy-tbar i{display:block;height:100%;width:100%;transform-origin:left;background:var(--muted)}
.aqy-toast.aqy-t-ok .aqy-tbar i{background:var(--green)}
.aqy-toast.aqy-t-err .aqy-tbar i{background:var(--chaud)}
.aqy-toast.aqy-t-wrn .aqy-tbar i{background:var(--tiede)}
.aqy-toast.aqy-run-bar .aqy-tbar i{animation:aqy-life linear forwards}
.aqy-toast:hover .aqy-tbar i{animation-play-state:paused}
@keyframes aqy-life{from{transform:scaleX(1)}to{transform:scaleX(0)}}

@media(max-width:640px){.aqy-stack{left:14px;right:14px;bottom:14px}.aqy-toast{width:auto}}
@media(prefers-reduced-motion:reduce){
  .aqy-chip,.aqy-toast,.aqy-dot,.aqy-tbar i{transition:none!important;animation:none!important}
  .aqy-toast{opacity:1;transform:none}
}

/* [b2351] TITRE ET DETAIL COLLES. `.aqy-tt` et `.aqy-td` sont deux spans
   INLINE dans `.aqy-tx` : ils se posent cote a cote et se touchent. Le
   `margin-top:2px` de `.aqy-td` dit pourtant l'intention — ils doivent
   etre EMPILES. On fait de `.aqy-tx` une colonne : sa marge reprend son
   sens, et rien d'autre ne bouge.
   Meme famille que le titre/meta de la recherche (b2343) : une regle ecrite
   pour du bloc, appliquee a de l'inline. */
.aqy-tx{ display:flex; flex-direction:column; min-width:0; }

/* [b2353] Pastille de la nav : alignee sur les items de page.
   Leurs icones font 14px (tc.css) et la gouttiere gauche est de 14px : le
   POINT d'etat doit occuper exactement cette colonne, sinon il flotte entre
   deux et l'oeil ne suit plus la verticale. Et un cran plus petit que les
   libelles de page — c'est un etat, pas une destination. */
/* [b2355] LE POINT ETAIT ECRASE : `flex:0 0 14px` impose une base de 14px
   qui ecrase la largeur de 8px — le rond devenait un ovale. On fige la
   taille (flex:none) et on le CENTRE dans la colonne des icones par sa
   marge : 14px de gouttiere + 3px = centre a 21px, exactement le centre
   d'une icone de nav (14px de gouttiere + 7px de demi-icone). */
/* [b2357] ALIGNEMENT A GAUCHE, pour de bon. Je centrais le point sur la
   colonne des icones (marge de 3px) alors qu'Anthony demande un alignement
   a GAUCHE : son bord doit tomber sur le bord des icones, pas son centre.
   Marge nulle, et la gouttiere du bouton fait tout le travail. */
.aqy-navchip .aqy-dot{ width:8px; height:8px; flex:none; margin:0; }
.aqy-navchip .aqy-lb{ font-size:12px; }
.aqy-navchip:hover{ background:var(--s2); }
/* Aligne a gauche sur les items de page : meme gouttiere, pas de centrage. */
.aqy-navchip{ justify-content:flex-start; }

/* [b2353] L'icone de synchro n'a de sens QUE pendant la synchro : au repos
   elle double le point d'etat et decale le libelle d'une largeur d'icone,
   ce qui casse la verticale des libelles de la nav. On ne la montre qu'en
   cours (.aqy-run) — la ou elle tourne et porte l'information. */
.aqy-navchip svg{ display:none; }
.aqy-navchip.aqy-run svg{ display:block; }
.aqy-navchip.aqy-run .aqy-dot{ display:none; }