/* Arpentiq — rangee recherche + notifications (kit Margot « navbar-arpe »).
   [b2378] REPRISE TELLE QUELLE, sans toucher a un selecteur. Ma passe
   precedente portait ses regles pour « gagner en specificite » : c'etait une
   erreur de diagnostic. Sa feuille est scopee sous `.aqn`, une classe RACINE
   que son README demande de poser sur la barre (`<aside class="sb aqn">`) et
   que notre DOM ne portait pas — elle ne matchait donc NULLE PART. Ce n'etait
   pas un probleme de poids mais d'ancrage.
   `.aqn .sb-search` (0,2,0) egale notre `.sb-toprow .sb-search`, et sa
   feuille est chargee APRES : a specificite egale, l'ordre tranche en sa
   faveur. Rien a porter. */

/* ═══════════════════════════════════════════════════════════════════
   arpe-navbar.css — Arpentiq · rangée Recherche + Notifications
   Réponse au handoff b2376. Namespace .aqn-*, plus surcharges ciblées
   des classes/ids existants (.sb-toprow, .sb-search, #act-bell…).
   Aucune règle body/html/:root — les variables vivent sur .aqn.
   ═══════════════════════════════════════════════════════════════════ */

/* ── tokens (retire ce bloc si tes tokens sont déjà globaux) ─────── */
.aqn,[data-theme="light"] .aqn{
  --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;
  --radius:8px;--radius-lg:12px;
  --shadow:0 1px 2px rgba(20,22,31,.05);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  /* hauteur unique des deux boutons : une seule source */
  --aqn-h:40px;
}
[data-theme="noir"] .aqn,[data-theme="donna"] .aqn,[data-theme="ardoise"] .aqn{
  --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;
  --radius:6px;--radius-lg:10px;
  --shadow:0 1px 2px rgba(0,0,0,.5);
}
.aqn{font-family:var(--sans);color:var(--text)}
.aqn *{box-sizing:border-box}
.aqn button{font-family:inherit;cursor:pointer}

/* ── la rangée ──────────────────────────────────────────────────
   overflow:visible obligatoire : le badge de la cloche déborde. */
.aqn .sb-toprow,.aqn-toprow{
  display:flex;align-items:stretch;gap:8px;overflow:visible}

/* ── gabarit partagé : DÉCISION = on le garde ───────────────────
   Les deux boutons partagent hauteur, rayon, bordure, transition.
   Tout ce qui est propre à l'un passe par son id (cf. plus bas). */
.aqn .sb-search,.aqn-btn{
  height:var(--aqn-h);
  display:flex;align-items:center;gap:10px;
  background:var(--s2);
  border:1px solid transparent;
  border-radius:var(--radius-lg);
  color:var(--text-dim);
  padding:0 12px;
  transition:background .15s,border-color .15s,color .15s;
  overflow:visible}
.aqn .sb-search:hover,.aqn-btn:hover{background:var(--s3);color:var(--text)}
.aqn .sb-search:focus-visible,.aqn-btn:focus-visible{
  outline:none;border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  box-shadow:0 0 0 3px var(--accent-dim)}
.aqn .sb-search svg,.aqn-btn svg{width:18px;height:18px;flex-shrink:0;color:var(--muted)}
.aqn .sb-search:hover svg,.aqn-btn:hover svg{color:var(--text-dim)}

/* ── propre à la RECHERCHE (id, pour ne pas toucher la cloche) ─── */
.aqn #shellv2-search,.aqn-search{flex:1;min-width:0;justify-content:flex-start}
.aqn .sb-search .lbl,.aqn-search .aqn-lbl{
  flex:1;min-width:0;text-align:left;
  font-size:14px;font-weight:500;letter-spacing:-.012em;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aqn .sb-search:hover .lbl,.aqn-search:hover .aqn-lbl{color:var(--text-dim)}
.aqn .sb-search kbd,.aqn-search kbd{
  flex-shrink:0;font-family:var(--mono);font-size:11px;font-weight:600;
  color:var(--text-dim);background:var(--s3);
  border:1px solid var(--border);border-radius:6px;
  padding:2px 7px;line-height:1.35}
.aqn .sb-search:hover kbd,.aqn-search:hover kbd{background:var(--surface)}

/* ── propre à la CLOCHE (id : bat les styles injectés au runtime) ─
   .sb-search aligne à gauche → il faut recentrer explicitement. */
.aqn #act-bell,.aqn .act-bell,.aqn-bell{
  position:relative;flex:0 0 var(--aqn-h);width:var(--aqn-h);
  justify-content:center;padding:0;gap:0;
  background:var(--surface);border-color:var(--border)}
.aqn #act-bell:hover,.aqn .act-bell:hover,.aqn-bell:hover{
  background:var(--s2);border-color:var(--border-hi)}
/* badge : déborde du bouton, liseré de la couleur du FOND DE BARRE */
.aqn #act-bell-badge,.aqn-badge{
  position:absolute;top:-6px;right:-6px;
  min-width:18px;height:18px;padding:0 5px;
  display:grid;place-items:center;
  font-family:var(--mono);font-size:10px;font-weight:700;line-height:1;
  color:#fff;background:var(--chaud);
  border:2px solid var(--aqn-bar-bg,var(--surface));
  border-radius:99px}
.aqn #act-bell-badge[hidden],.aqn-badge[hidden]{display:none}

/* ── 3ᵉ bouton optionnel : Arpe, assorti à la cloche ─────────────── */
.aqn-arpe{flex:0 0 var(--aqn-h);width:var(--aqn-h);justify-content:center;padding:0;gap:0;
  background:var(--surface);border-color:var(--border)}
.aqn-arpe svg{color:var(--accent)}
.aqn-arpe:hover{background:var(--s2);border-color:var(--border-hi)}
.aqn-arpe.aqn-on{background:var(--accent-dim);border-color:color-mix(in srgb,var(--accent) 34%,transparent)}
.aqn-arpe.aqn-on svg{color:var(--accent)}

@media(prefers-reduced-motion:reduce){.aqn .sb-search,.aqn-btn{transition:none}}